bharat-choropleth 0.1.0

package/dist/index.js

@@ -0,0 +1,833 @@
+// src/IndiaChoropleth.tsx
+import { geoMercator, geoPath } from "d3-geo";
+import { useCallback as useCallback2, useEffect, useId, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
+
+// src/geometry.ts
+import { feature as topoFeature } from "topojson-client";
+function asFeatureCollection(source) {
+  if ("type" in source && source.type === "FeatureCollection") {
+    return source;
+  }
+  const topoSource = source;
+  const object = typeof topoSource.object === "string" ? topoSource.topology.objects[topoSource.object] : topoSource.object;
+  if (!object) {
+    throw new Error("The named TopoJSON object does not exist in this topology.");
+  }
+  const unpacked = topoFeature(topoSource.topology, object);
+  return unpacked.type === "FeatureCollection" ? unpacked : { type: "FeatureCollection", features: [unpacked] };
+}
+function totalOf(values) {
+  return values.reduce((total, value) => total + (value ?? 0), 0);
+}
+
+// src/legend.ts
+function swatchIndexOf(value, min, max, count) {
+  if (value === null || count <= 0) return null;
+  if (count === 1 || max === min) return count - 1;
+  const index = Math.round((value - min) / (max - min) * (count - 1));
+  return Math.min(Math.max(index, 0), count - 1);
+}
+function legendBuckets(colors, values, min, max) {
+  const count = colors.length;
+  return colors.map((color, index) => {
+    const members = values.filter((value) => swatchIndexOf(value, min, max, count) === index);
+    return {
+      index,
+      color,
+      from: members.length ? Math.min(...members) : null,
+      to: members.length ? Math.max(...members) : null,
+      matches: members.length
+    };
+  });
+}
+function legendBucketLabel(bucket, formatValue) {
+  if (bucket.matches === 0 || bucket.from === null || bucket.to === null) return "No regions in this band";
+  const range = bucket.from === bucket.to ? formatValue(bucket.from) : `${formatValue(bucket.from)} to ${formatValue(bucket.to)}`;
+  return `Highlight ${bucket.matches} ${bucket.matches === 1 ? "region" : "regions"}, ${range}`;
+}
+
+// src/tooltip-position.ts
+function placeTooltip(tooltip, bounds, gap, padding = 4) {
+  let dx = 0;
+  if (tooltip.right > bounds.right - padding) dx = bounds.right - padding - tooltip.right;
+  if (tooltip.left + dx < bounds.left + padding) dx = bounds.left + padding - tooltip.left;
+  const side = tooltip.top < bounds.top + padding ? "below" : "above";
+  return { dx, side };
+}
+
+// src/small-regions.ts
+var TRUE_GEOMETRY_REGIONS = ["puducherry"];
+function keepsTrueGeometry(id) {
+  const normalized = id.toLowerCase();
+  return TRUE_GEOMETRY_REGIONS.some((name) => normalized.includes(name));
+}
+function boundsOfRing(ring) {
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
+  for (const [x, y] of ring) {
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  return [minX, minY, maxX, maxY];
+}
+function largestRingExtent(rings) {
+  let largest = 0;
+  for (const ring of rings) {
+    if (ring.length === 0) continue;
+    const [minX, minY, maxX, maxY] = boundsOfRing(ring);
+    const extent = Math.max(maxX - minX, maxY - minY);
+    if (extent > largest) largest = extent;
+  }
+  return largest;
+}
+function signedArea(ring) {
+  let total = 0;
+  for (let i = 0; i < ring.length; i++) {
+    const [ax, ay] = ring[i];
+    const [bx, by] = ring[(i + 1) % ring.length];
+    total += ax * by - bx * ay;
+  }
+  return total / 2;
+}
+function labelPointFor(rings, fallback) {
+  let largest = null;
+  let largestArea = 0;
+  for (const ring of rings) {
+    if (ring.length < 3) continue;
+    const area2 = Math.abs(signedArea(ring));
+    if (area2 > largestArea) {
+      largestArea = area2;
+      largest = ring;
+    }
+  }
+  if (!largest || largestArea === 0) return fallback;
+  const area = signedArea(largest);
+  let cx = 0;
+  let cy = 0;
+  for (let i = 0; i < largest.length; i++) {
+    const [ax, ay] = largest[i];
+    const [bx, by] = largest[(i + 1) % largest.length];
+    const cross = ax * by - bx * ay;
+    cx += (ax + bx) * cross;
+    cy += (ay + by) * cross;
+  }
+  const centroid = [cx / (6 * area), cy / (6 * area)];
+  return Number.isFinite(centroid[0]) && Number.isFinite(centroid[1]) ? centroid : fallback;
+}
+function distanceToBox(point, box) {
+  const [x, y] = point;
+  const [minX, minY, maxX, maxY] = box;
+  const dx = Math.max(minX - x, 0) + Math.max(x - maxX, 0);
+  const dy = Math.max(minY - y, 0) + Math.max(y - maxY, 0);
+  return Math.hypot(dx, dy);
+}
+function distanceToParts(point, parts) {
+  let nearest = Infinity;
+  for (const part of parts) {
+    const distance = distanceToBox(point, part);
+    if (distance < nearest) nearest = distance;
+  }
+  return nearest;
+}
+var LABEL_SEARCH_TURNS = [
+  0,
+  Math.PI / 6,
+  -Math.PI / 6,
+  Math.PI / 3,
+  -Math.PI / 3,
+  Math.PI / 2,
+  -Math.PI / 2,
+  2 * Math.PI / 3,
+  -(2 * Math.PI) / 3,
+  5 * Math.PI / 6,
+  -(5 * Math.PI) / 6,
+  Math.PI
+];
+function placeOutsideLabel(options) {
+  const { anchor, clearance, halfSize, viewBox, centre, isBlocked } = options;
+  const dx = anchor[0] - centre[0];
+  const dy = anchor[1] - centre[1];
+  const base = dx === 0 && dy === 0 ? 0 : Math.atan2(dy, dx);
+  for (const turn of LABEL_SEARCH_TURNS) {
+    const angle = base + turn;
+    const candidate = [
+      clamp(anchor[0] + Math.cos(angle) * clearance, halfSize[0], viewBox[0] - halfSize[0]),
+      clamp(anchor[1] + Math.sin(angle) * clearance, halfSize[1], viewBox[1] - halfSize[1])
+    ];
+    if (!isBlocked(candidate)) return candidate;
+  }
+  return null;
+}
+function clamp(value, lower, upper) {
+  return Math.min(Math.max(value, lower), upper);
+}
+function enlargeSmallParts(rings, minExtent, maxScale = 8) {
+  const unchanged = () => rings.map((ring) => [...ring]);
+  if (minExtent <= 0) return unchanged();
+  const largest = largestRingExtent(rings);
+  if (largest <= 0 || largest >= minExtent) return unchanged();
+  return rings.map((ring) => {
+    const [minX, minY, maxX, maxY] = boundsOfRing(ring);
+    const extent = Math.max(maxX - minX, maxY - minY);
+    const scale = extent <= 0 ? 1 : Math.min(minExtent / extent, maxScale);
+    const cx = (minX + maxX) / 2;
+    const cy = (minY + maxY) / 2;
+    return ring.map(([x, y]) => [cx + (x - cx) * scale, cy + (y - cy) * scale]);
+  });
+}
+function convexHull(points) {
+  const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+  const unique = [];
+  for (const point of sorted) {
+    const prior = unique.at(-1);
+    if (!prior || prior[0] !== point[0] || prior[1] !== point[1]) unique.push(point);
+  }
+  if (unique.length < 3) return unique.map((point) => [...point]);
+  const turn = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+  const half = (ordered) => {
+    const chain = [];
+    for (const point of ordered) {
+      while (chain.length >= 2 && turn(chain[chain.length - 2], chain[chain.length - 1], point) <= 0) chain.pop();
+      chain.push(point);
+    }
+    return chain;
+  };
+  const lower = half(unique);
+  const upper = half([...unique].reverse());
+  const hull = [...lower.slice(0, -1), ...upper.slice(0, -1)];
+  return hull.length >= 3 ? hull : unique.map((point) => [...point]);
+}
+function scatteredHitArea(rings, maxExtent) {
+  if (rings.length < 2 || maxExtent <= 0) return null;
+  const extent = largestRingExtent(rings);
+  if (extent <= 0 || extent >= maxExtent) return null;
+  const hull = convexHull(rings.flat());
+  return hull.length >= 3 ? hull : null;
+}
+function ringsToPath(rings) {
+  let d = "";
+  for (const ring of rings) {
+    if (ring.length === 0) continue;
+    d += `M${ring[0][0]},${ring[0][1]}`;
+    for (let i = 1; i < ring.length; i++) d += `L${ring[i][0]},${ring[i][1]}`;
+    d += "Z";
+  }
+  return d;
+}
+
+// src/useControllableState.ts
+import { useCallback, useState } from "react";
+function useControllableState(controlled, initial) {
+  const [uncontrolled, setUncontrolled] = useState(initial);
+  const value = controlled === void 0 ? uncontrolled : controlled;
+  const setValue = useCallback((next) => {
+    if (controlled === void 0) setUncontrolled(next);
+  }, [controlled]);
+  return [value, setValue];
+}
+
+// src/IndiaChoropleth.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var VIEWBOX = { width: 960, height: 640, padding: 28 };
+var DEFAULT_COLORS = ["#d9f1ed", "#b9e3dd", "#8fd1c8", "#5bb9ae", "#2f9c90", "#147b71", "#075b55"];
+var DEFAULT_FORMAT = new Intl.NumberFormat("en-IN").format;
+var TOOLTIP_GAP_PX = 12;
+var SMALL_REGION_EXTENT = 22;
+var SMALL_REGION_CLICK_RADIUS = 14;
+var MIN_REGION_MARKER_SIZE = 7;
+function projectedRings(feature, projection) {
+  const geometry = feature.geometry;
+  if (!geometry) return [];
+  const polygons = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.type === "MultiPolygon" ? geometry.coordinates : [];
+  const rings = [];
+  for (const polygon of polygons) {
+    for (const ring of polygon) {
+      const projected = [];
+      for (const position of ring) {
+        const point = projection(position);
+        if (point && Number.isFinite(point[0]) && Number.isFinite(point[1])) projected.push([point[0], point[1]]);
+      }
+      if (projected.length > 0) rings.push(projected);
+    }
+  }
+  return rings;
+}
+function colorFor(value, region, min, max, scale) {
+  if (typeof scale === "function") {
+    const context = { min, max, feature: region.feature, id: region.id };
+    return scale(value, context);
+  }
+  const index = swatchIndexOf(value, min, max, scale.length);
+  return index === null ? "var(--india-map-empty)" : scale[index] ?? "var(--india-map-empty)";
+}
+function makeProjection(collection) {
+  return geoMercator().fitExtent(
+    [[VIEWBOX.padding, VIEWBOX.padding], [VIEWBOX.width - VIEWBOX.padding, VIEWBOX.height - VIEWBOX.padding]],
+    collection
+  );
+}
+function prepareLayer(layer, projection = makeProjection(asFeatureCollection(layer.geometry)), minPartExtent = 0) {
+  const collection = asFeatureCollection(layer.geometry);
+  const path = geoPath(projection);
+  return collection.features.map((feature) => {
+    const centroid = path.centroid(feature);
+    const bounds = path.bounds(feature);
+    const fallbackCentroid = [
+      (bounds[0][0] + bounds[1][0]) / 2,
+      (bounds[0][1] + bounds[1][1]) / 2
+    ];
+    const region = {
+      id: layer.getId(feature),
+      label: layer.getLabel(feature),
+      value: layer.getValue(feature),
+      meta: layer.getMeta?.(feature),
+      feature
+    };
+    const exaggerate = minPartExtent > 0 && !keepsTrueGeometry(region.id);
+    const rings = exaggerate ? enlargeSmallParts(projectedRings(feature, projection), minPartExtent) : projectedRings(feature, projection);
+    const fallback = centroid.every(Number.isFinite) ? centroid : fallbackCentroid;
+    const hull = scatteredHitArea(rings, SMALL_REGION_EXTENT);
+    return {
+      ...region,
+      path: exaggerate ? ringsToPath(rings) : path(feature) ?? "",
+      hitPath: hull ? ringsToPath([hull]) : null,
+      // The largest part's centroid, not the whole feature's: averaging across
+      // parts puts an island group's label out at sea between its islands.
+      centroid: rings.length > 0 ? labelPointFor(rings, fallback) : fallback,
+      partBounds: rings.map(boundsOfRing),
+      extent: largestRingExtent(rings)
+    };
+  });
+}
+function prepareReferenceOverlay(overlay, projection) {
+  const path = geoPath(projection);
+  return asFeatureCollection(overlay.geometry).features.map((feature) => ({
+    id: overlay.getId(feature),
+    label: overlay.getLabel(feature),
+    description: overlay.getDescription(feature),
+    path: path(feature) ?? ""
+  }));
+}
+function ordinal(n) {
+  const lastTwo = n % 100;
+  if (lastTwo >= 11 && lastTwo <= 13) return `${n}th`;
+  return `${n}${["th", "st", "nd", "rd"][n % 10] ?? "th"}`;
+}
+function defaultTooltip(context, formatValue) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("strong", { children: context.label }),
+    /* @__PURE__ */ jsx("b", { children: context.value === null ? "No data" : formatValue(context.value) }),
+    context.share !== null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { className: "india-choropleth__tooltip-bar", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { style: { width: `${Math.max(context.share, 1.5)}%` } }) }),
+      /* @__PURE__ */ jsx("small", { children: [
+        `${context.share.toFixed(1)}% of total`,
+        ...context.rank !== null ? [`${ordinal(context.rank)} of ${context.rankedCount}`] : []
+      ].join(" \xB7 ") })
+    ] }) : null
+  ] });
+}
+function IndiaChoropleth({
+  states,
+  referenceOverlay,
+  loadDistricts,
+  loadDistrictReferenceOverlay,
+  drillDownId,
+  defaultDrillDownId = null,
+  onDrillDownChange,
+  selectedId,
+  defaultSelectedId = null,
+  onSelectedChange,
+  onInspect,
+  onInsight,
+  onRegionClick,
+  onBackgroundClick,
+  colorScale = DEFAULT_COLORS,
+  formatValue = DEFAULT_FORMAT,
+  renderTooltip,
+  renderInsights,
+  showLegend = true,
+  showBreadcrumb = true,
+  legendLabels = ["Lower", "Higher"],
+  referenceOverlayLegendLabel = "Reference context \xB7 data unavailable",
+  referenceOverlayMergeIds = [],
+  referenceOverlayFill = "hatch",
+  showRegionValues = false,
+  minPartExtent = 0,
+  minDistrictPartExtent,
+  className,
+  ariaLabel = "Interactive choropleth map",
+  interactive = true
+}) {
+  const tooltipId = useId();
+  const canvasRef = useRef(null);
+  const tooltipAnchorRef = useRef(null);
+  const hatchId = `${useId()}-reference-hatch`;
+  const [activeDrillDownId, setActiveDrillDownId] = useControllableState(drillDownId, defaultDrillDownId);
+  const [activeSelectedId, setActiveSelectedId] = useControllableState(selectedId, defaultSelectedId);
+  const [loadedDistricts, setLoadedDistricts] = useState2(null);
+  const [loadedDistrictReferenceOverlay, setLoadedDistrictReferenceOverlay] = useState2(null);
+  const [loadingState, setLoadingState] = useState2(null);
+  const [loadError, setLoadError] = useState2(null);
+  const pathRefs = useRef({});
+  const restoreFocusId = useRef(null);
+  const stateCollection = useMemo(() => asFeatureCollection(states.geometry), [states]);
+  const referenceCollection = useMemo(
+    () => referenceOverlay ? asFeatureCollection(referenceOverlay.geometry) : null,
+    [referenceOverlay]
+  );
+  const nationalProjection = useMemo(
+    () => makeProjection({ type: "FeatureCollection", features: [...stateCollection.features, ...referenceCollection?.features ?? []] }),
+    [referenceCollection, stateCollection]
+  );
+  const stateRegions = useMemo(() => prepareLayer(states, nationalProjection, minPartExtent), [minPartExtent, nationalProjection, states]);
+  const referenceRegions = useMemo(
+    () => referenceOverlay ? prepareReferenceOverlay(referenceOverlay, nationalProjection) : [],
+    [nationalProjection, referenceOverlay]
+  );
+  const drilledState = useMemo(
+    () => stateRegions.find((region) => region.id === activeDrillDownId) ?? null,
+    [activeDrillDownId, stateRegions]
+  );
+  const isDrillRequested = Boolean(drilledState && activeDrillDownId);
+  const level = isDrillRequested ? "district" : "state";
+  const districtLayer = loadedDistricts?.stateId === activeDrillDownId ? loadedDistricts.layer : null;
+  const districtReferenceOverlay = loadedDistrictReferenceOverlay?.stateId === activeDrillDownId ? loadedDistrictReferenceOverlay.overlay : null;
+  const districtCollection = useMemo(
+    () => districtLayer ? asFeatureCollection(districtLayer.geometry) : null,
+    [districtLayer]
+  );
+  const districtReferenceCollection = useMemo(
+    () => districtReferenceOverlay ? asFeatureCollection(districtReferenceOverlay.geometry) : null,
+    [districtReferenceOverlay]
+  );
+  const districtProjection = useMemo(
+    () => districtCollection ? makeProjection({ type: "FeatureCollection", features: [...districtCollection.features, ...districtReferenceCollection?.features ?? []] }) : null,
+    [districtCollection, districtReferenceCollection]
+  );
+  const regions = useMemo(
+    () => level === "district" && districtLayer && districtProjection ? prepareLayer(districtLayer, districtProjection, minDistrictPartExtent ?? minPartExtent) : level === "state" ? stateRegions : [],
+    [districtLayer, districtProjection, level, minDistrictPartExtent, minPartExtent, stateRegions]
+  );
+  const districtReferenceRegions = useMemo(
+    () => level === "district" && districtReferenceOverlay && districtProjection ? prepareReferenceOverlay(districtReferenceOverlay, districtProjection) : [],
+    [districtProjection, districtReferenceOverlay, level]
+  );
+  const selected = regions.find((region) => region.id === activeSelectedId) ?? null;
+  const [inspectedId, setInspectedId] = useState2(null);
+  const inspectedIdRef = useRef(null);
+  const inspected = regions.find((region) => region.id === inspectedId) ?? null;
+  const values = useMemo(() => regions.map((region) => region.value).filter((value) => value !== null), [regions]);
+  const total = useMemo(() => totalOf(values), [values]);
+  const min = values.length ? Math.min(...values) : 0;
+  const max = values.length ? Math.max(...values) : 0;
+  const legendColors = typeof colorScale === "function" ? DEFAULT_COLORS : colorScale;
+  const buckets = useMemo(
+    () => legendBuckets(legendColors, regions.map((region) => region.value), min, max),
+    [legendColors, max, min, regions]
+  );
+  const [activeBucket, setActiveBucket] = useState2(null);
+  const filterBucket = activeBucket !== null && activeBucket < buckets.length ? activeBucket : null;
+  const colorScaleKey = typeof colorScale === "function" ? "function" : colorScale.join(",");
+  useEffect(() => {
+    setActiveBucket(null);
+  }, [activeDrillDownId, colorScaleKey, level]);
+  const highlighted = useMemo(
+    () => filterBucket === null ? null : new Set(regions.filter((region) => swatchIndexOf(region.value, min, max, legendColors.length) === filterBucket).map((region) => region.id)),
+    [filterBucket, legendColors.length, max, min, regions]
+  );
+  const isDimmed = (id) => highlighted !== null && !highlighted.has(id);
+  useEffect(() => {
+    let cancelled = false;
+    if (!activeDrillDownId || !loadDistricts) {
+      setLoadedDistricts(null);
+      setLoadingState(null);
+      setLoadError(null);
+      return;
+    }
+    const sourceState = stateRegions.find((region) => region.id === activeDrillDownId);
+    if (!sourceState) return;
+    setLoadingState(activeDrillDownId);
+    setLoadError(null);
+    setLoadedDistricts(null);
+    loadDistricts(activeDrillDownId, sourceState).then((loaded) => {
+      if (!cancelled) setLoadedDistricts({ stateId: activeDrillDownId, layer: loaded });
+    }).catch((error) => {
+      if (!cancelled) setLoadError(error instanceof Error ? error : new Error("Unable to load districts."));
+    }).finally(() => {
+      if (!cancelled) setLoadingState(null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeDrillDownId, loadDistricts, stateRegions]);
+  useEffect(() => {
+    let cancelled = false;
+    if (!activeDrillDownId || !loadDistrictReferenceOverlay) {
+      setLoadedDistrictReferenceOverlay(null);
+      return;
+    }
+    const sourceState = stateRegions.find((region) => region.id === activeDrillDownId);
+    if (!sourceState) return;
+    setLoadedDistrictReferenceOverlay(null);
+    loadDistrictReferenceOverlay(activeDrillDownId, sourceState).then((overlay) => {
+      if (!cancelled) setLoadedDistrictReferenceOverlay({ stateId: activeDrillDownId, overlay });
+    }).catch(() => {
+      if (!cancelled) setLoadedDistrictReferenceOverlay({ stateId: activeDrillDownId, overlay: null });
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [activeDrillDownId, loadDistrictReferenceOverlay, stateRegions]);
+  useEffect(() => {
+    const regionId = restoreFocusId.current;
+    if (!regionId || level !== "state") return;
+    restoreFocusId.current = null;
+    pathRefs.current[regionId]?.focus();
+  }, [level, regions]);
+  useEffect(() => {
+    if (!inspectedId) return;
+    if (!regions.some((region) => region.id === inspectedId)) {
+      inspectedIdRef.current = null;
+      setInspectedId(null);
+    }
+  }, [inspectedId, regions]);
+  const inspect = (region) => {
+    const nextId = region?.id ?? null;
+    if (nextId === null && inspectedIdRef.current === null) return;
+    inspectedIdRef.current = nextId;
+    setInspectedId(nextId);
+    onInspect?.(region ?? null, level);
+  };
+  const activate = (region) => {
+    onRegionClick?.(region, level);
+    setActiveSelectedId(region.id);
+    onSelectedChange?.(region, level);
+    if (level === "state" && loadDistricts) {
+      setActiveSelectedId(null);
+      setActiveDrillDownId(region.id);
+      onDrillDownChange?.(region.id, region);
+    }
+  };
+  const goBack = () => {
+    const priorState = drilledState ?? void 0;
+    setActiveDrillDownId(null);
+    setActiveSelectedId(priorState?.id ?? null);
+    inspectedIdRef.current = priorState?.id ?? null;
+    setInspectedId(priorState?.id ?? null);
+    restoreFocusId.current = priorState?.id ?? null;
+    onDrillDownChange?.(null, priorState);
+  };
+  const toTooltipContext = useCallback2((region) => {
+    const valued = regions.filter((candidate) => candidate.value !== null);
+    const rank = region.value === null ? null : valued.filter((candidate) => (candidate.value ?? 0) > (region.value ?? 0)).length + 1;
+    return {
+      ...region,
+      level,
+      total,
+      share: region.value === null || total === 0 ? null : region.value / total * 100,
+      rank,
+      rankedCount: valued.length
+    };
+  }, [level, regions, total]);
+  const tooltipContext = useMemo(
+    () => inspected ? toTooltipContext(inspected) : null,
+    [inspected, toTooltipContext]
+  );
+  const insightSource = inspected ?? selected;
+  const insightContext = useMemo(() => insightSource ? { ...toTooltipContext(insightSource), selected: insightSource.id === selected?.id } : null, [insightSource, selected?.id, toTooltipContext]);
+  const valuePlacements = useMemo(() => {
+    const coversAnother = (region, at, halfWidth, halfHeight) => {
+      const probes = [
+        at,
+        [at[0] - halfWidth, at[1] - halfHeight],
+        [at[0] + halfWidth, at[1] + halfHeight],
+        [at[0] + halfWidth, at[1] - halfHeight],
+        [at[0] - halfWidth, at[1] + halfHeight]
+      ];
+      return regions.some((other) => other.id !== region.id && other.partBounds.some(([minX, minY, maxX, maxY]) => probes.some((probe) => probe[0] >= minX && probe[0] <= maxX && probe[1] >= minY && probe[1] <= maxY)));
+    };
+    return regions.map((region) => {
+      const text = region.value === null ? "\u2014" : formatValue(region.value);
+      const halfWidth = Math.max(text.length * 3.1, 3);
+      const halfHeight = 5.5;
+      const isSmall = region.extent > 0 && region.extent < SMALL_REGION_EXTENT;
+      const fitsInside = region.partBounds.some(([minX, minY, maxX, maxY]) => maxX - minX >= halfWidth * 2 && maxY - minY >= halfHeight * 2);
+      if (!isSmall && fitsInside) return { region, text, at: region.centroid, leader: null };
+      const outside = isSmall ? placeOutsideLabel({
+        anchor: region.centroid,
+        clearance: Math.max(region.extent, MIN_REGION_MARKER_SIZE) / 2 + 4 + halfWidth,
+        halfSize: [halfWidth, halfHeight],
+        viewBox: [VIEWBOX.width, VIEWBOX.height],
+        centre: [VIEWBOX.width / 2, VIEWBOX.height / 2],
+        // Moving a label out only helps if there is open space to move it into.
+        // Goa and Puducherry have sea beside them; Delhi is ringed by other
+        // states, so its number stays put rather than landing on a neighbour.
+        isBlocked: (candidate) => coversAnother(region, candidate, halfWidth, halfHeight)
+      }) : null;
+      if (!outside) {
+        return fitsInside ? { region, text, at: region.centroid, leader: null } : null;
+      }
+      const gap = Math.max(region.extent, MIN_REGION_MARKER_SIZE) / 2 + 1;
+      const dx = outside[0] - region.centroid[0];
+      const dy = outside[1] - region.centroid[1];
+      const length = Math.hypot(dx, dy);
+      if (length <= gap + halfWidth) return { region, text, at: outside, leader: null };
+      return {
+        region,
+        text,
+        at: outside,
+        leader: [
+          [region.centroid[0] + dx / length * gap, region.centroid[1] + dy / length * gap],
+          [outside[0] - dx / length * (halfWidth + 1.5), outside[1] - dy / length * (halfWidth + 1.5)]
+        ]
+      };
+    }).filter((placement) => placement !== null);
+  }, [formatValue, regions]);
+  const smallMarkers = useMemo(
+    () => regions.filter((region) => region.extent > 0 && region.extent < MIN_REGION_MARKER_SIZE),
+    [regions]
+  );
+  const handleBackgroundClick = (event) => {
+    if (event.target !== event.currentTarget) return;
+    const rect = event.currentTarget.getBoundingClientRect();
+    const point = rect.width > 0 && rect.height > 0 ? (() => {
+      const scale = Math.min(rect.width / VIEWBOX.width, rect.height / VIEWBOX.height);
+      return [
+        (event.clientX - rect.left - (rect.width - VIEWBOX.width * scale) / 2) / scale,
+        (event.clientY - rect.top - (rect.height - VIEWBOX.height * scale) / 2) / scale
+      ];
+    })() : null;
+    let nearest = null;
+    if (point) {
+      let nearestDistance = Infinity;
+      for (const region of regions) {
+        if (region.extent <= 0 || region.extent >= SMALL_REGION_EXTENT) continue;
+        const distance = distanceToParts(point, region.partBounds);
+        if (distance <= SMALL_REGION_CLICK_RADIUS && distance < nearestDistance) {
+          nearestDistance = distance;
+          nearest = region;
+        }
+      }
+    }
+    if (nearest) {
+      activate(nearest);
+      return;
+    }
+    onBackgroundClick?.();
+    if (activeSelectedId !== null) {
+      setActiveSelectedId(null);
+      onSelectedChange?.(null, level);
+    }
+  };
+  const canDrill = Boolean(loadDistricts && level === "state");
+  const visibleReferenceRegions = level === "state" ? referenceRegions : districtReferenceRegions;
+  const mergedReferenceIds = useMemo(() => new Set(referenceOverlayMergeIds), [referenceOverlayMergeIds]);
+  useEffect(() => {
+    onInsight?.(insightContext);
+  }, [insightContext, onInsight]);
+  useLayoutEffect(() => {
+    const anchor = tooltipAnchorRef.current;
+    const canvas = canvasRef.current;
+    if (!anchor || !canvas) return;
+    anchor.style.removeProperty("--india-map-tooltip-dx");
+    anchor.style.removeProperty("--india-map-tooltip-dy");
+    const tooltipRect = anchor.getBoundingClientRect();
+    const boundsRect = canvas.getBoundingClientRect();
+    if (tooltipRect.width === 0 || boundsRect.width === 0) return;
+    const { dx, side } = placeTooltip(tooltipRect, boundsRect, TOOLTIP_GAP_PX);
+    if (dx !== 0) anchor.style.setProperty("--india-map-tooltip-dx", `${Math.round(dx)}px`);
+    if (side === "below") anchor.style.setProperty("--india-map-tooltip-dy", `${TOOLTIP_GAP_PX}px`);
+  }, [tooltipContext?.id, tooltipContext?.value, tooltipContext?.label, renderTooltip]);
+  return /* @__PURE__ */ jsxs("section", { className: ["india-choropleth", !interactive && "india-choropleth--static", className].filter(Boolean).join(" "), "aria-busy": loadingState ? "true" : void 0, children: [
+    showBreadcrumb ? /* @__PURE__ */ jsx("div", { className: "india-choropleth__toolbar", children: /* @__PURE__ */ jsxs("nav", { className: "india-choropleth__breadcrumb", "aria-label": "Map hierarchy", children: [
+      drilledState ? /* @__PURE__ */ jsx("button", { className: "india-choropleth__back", type: "button", onClick: goBack, children: "All states" }) : /* @__PURE__ */ jsx("span", { children: "All states" }),
+      drilledState ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "/" }),
+        /* @__PURE__ */ jsx("span", { "aria-current": "page", children: drilledState.label })
+      ] }) : null
+    ] }) }) : null,
+    /* @__PURE__ */ jsxs("div", { ref: canvasRef, className: "india-choropleth__canvas", onMouseLeave: interactive ? () => inspect(null) : void 0, children: [
+      isDrillRequested && (!districtLayer || loadError) ? /* @__PURE__ */ jsx("div", { className: "india-choropleth__status", role: loadError ? "alert" : "status", children: loadError ? loadError.message : loadingState ? "Loading districts\u2026" : "District data is unavailable for this state." }) : regions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "india-choropleth__status", role: "status", children: "No district data is available for this state." }) : /* @__PURE__ */ jsxs(
+        "svg",
+        {
+          className: `india-choropleth__svg${filterBucket !== null ? " india-choropleth__svg--filtered" : ""}`,
+          viewBox: `0 0 ${VIEWBOX.width} ${VIEWBOX.height}`,
+          role: "group",
+          "aria-label": ariaLabel,
+          onKeyDown: interactive ? (event) => {
+            if (event.key === "Escape") {
+              event.preventDefault();
+              inspect(null);
+            }
+          } : void 0,
+          onClick: interactive ? handleBackgroundClick : void 0,
+          children: [
+            visibleReferenceRegions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("pattern", { id: hatchId, width: "8", height: "8", patternUnits: "userSpaceOnUse", patternTransform: "rotate(45)", children: [
+                /* @__PURE__ */ jsx("rect", { width: "8", height: "8", fill: "var(--india-map-reference-bg)" }),
+                /* @__PURE__ */ jsx("line", { x1: "0", y1: "0", x2: "0", y2: "8", stroke: "var(--india-map-reference-hatch)", strokeWidth: "2" })
+              ] }) }),
+              /* @__PURE__ */ jsx("g", { className: "india-choropleth__reference-fill", role: "group", "aria-label": "Non-statistical reference context.", children: visibleReferenceRegions.map((region) => /* @__PURE__ */ jsx(
+                "path",
+                {
+                  d: region.path,
+                  fill: referenceOverlayFill === "solid" ? "var(--india-map-reference-bg)" : `url(#${hatchId})`,
+                  "aria-label": `${region.label}.${region.description ? ` ${region.description}` : ""}`,
+                  role: "img"
+                },
+                region.id
+              )) })
+            ] }) : null,
+            interactive ? /* @__PURE__ */ jsx("g", { className: "india-choropleth__hit-areas", "aria-hidden": "true", children: regions.filter((region) => region.hitPath).map((region) => /* @__PURE__ */ jsx(
+              "path",
+              {
+                d: region.hitPath,
+                fill: "none",
+                pointerEvents: "all",
+                tabIndex: -1,
+                onMouseEnter: () => inspect(region),
+                onMouseLeave: () => inspect(null),
+                onClick: () => activate(region)
+              },
+              region.id
+            )) }) : null,
+            regions.map((region) => {
+              const isInspected = region.id === inspected?.id;
+              const isSelected = region.id === selected?.id;
+              const action = canDrill ? "Activate to view districts." : "Activate to select.";
+              const textValue = region.value === null ? "No data" : formatValue(region.value);
+              return /* @__PURE__ */ jsx(
+                "path",
+                {
+                  className: `india-choropleth__region${isInspected ? " india-choropleth__region--inspected" : ""}${isSelected ? " india-choropleth__region--selected" : ""}${mergedReferenceIds.has(region.id) ? " india-choropleth__region--reference-merged" : ""}${isDimmed(region.id) ? " india-choropleth__dimmed" : ""}`,
+                  d: region.path,
+                  fill: colorFor(region.value, region, min, max, colorScale),
+                  tabIndex: interactive ? 0 : -1,
+                  role: interactive ? "button" : void 0,
+                  "aria-label": `${region.label}, ${textValue}. ${action}`,
+                  "aria-pressed": interactive ? isSelected : void 0,
+                  "aria-describedby": isInspected ? tooltipId : void 0,
+                  ref: (element) => {
+                    pathRefs.current[region.id] = element;
+                  },
+                  onMouseEnter: interactive ? () => inspect(region) : void 0,
+                  onMouseLeave: interactive ? () => inspect(null) : void 0,
+                  onFocus: interactive ? () => inspect(region) : void 0,
+                  onBlur: interactive ? () => inspect(null) : void 0,
+                  onClick: interactive ? () => activate(region) : void 0,
+                  onKeyDown: interactive ? (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      activate(region);
+                    }
+                  } : void 0
+                },
+                region.id
+              );
+            }),
+            smallMarkers.length > 0 ? /* @__PURE__ */ jsx("g", { className: "india-choropleth__small-markers", "aria-hidden": "true", children: smallMarkers.map((region) => /* @__PURE__ */ jsx(
+              "circle",
+              {
+                className: isDimmed(region.id) ? "india-choropleth__dimmed" : void 0,
+                cx: region.centroid[0],
+                cy: region.centroid[1],
+                r: MIN_REGION_MARKER_SIZE / 2,
+                fill: colorFor(region.value, region, min, max, colorScale),
+                onMouseEnter: interactive ? () => inspect(region) : void 0,
+                onMouseLeave: interactive ? () => inspect(null) : void 0,
+                onClick: interactive ? () => activate(region) : void 0
+              },
+              region.id
+            )) }) : null,
+            showRegionValues ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("g", { className: "india-choropleth__value-leaders", "aria-hidden": "true", children: valuePlacements.filter((p) => p.leader).map((p) => /* @__PURE__ */ jsx(
+                "line",
+                {
+                  className: isDimmed(p.region.id) ? "india-choropleth__dimmed" : void 0,
+                  x1: p.leader[0][0],
+                  y1: p.leader[0][1],
+                  x2: p.leader[1][0],
+                  y2: p.leader[1][1]
+                },
+                p.region.id
+              )) }),
+              /* @__PURE__ */ jsx("g", { className: `india-choropleth__region-values${level === "district" ? " india-choropleth__region-values--district" : ""}`, "aria-hidden": "true", children: valuePlacements.map((p) => /* @__PURE__ */ jsx(
+                "text",
+                {
+                  className: isDimmed(p.region.id) ? "india-choropleth__dimmed" : void 0,
+                  x: p.at[0],
+                  y: p.at[1],
+                  textAnchor: "middle",
+                  dominantBaseline: "central",
+                  children: p.text
+                },
+                p.region.id
+              )) })
+            ] }) : null,
+            visibleReferenceRegions.length > 0 ? /* @__PURE__ */ jsx("g", { className: "india-choropleth__reference-outline", "aria-hidden": "true", children: visibleReferenceRegions.map((region) => /* @__PURE__ */ jsx("path", { d: region.path, fill: "none" }, region.id)) }) : null,
+            selected ? /* @__PURE__ */ jsxs(
+              "g",
+              {
+                className: `india-choropleth__selection${selected.id === inspected?.id ? " india-choropleth__selection--lifted" : ""}`,
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("path", { className: "india-choropleth__selection-halo", d: selected.path, fill: "none" }),
+                  /* @__PURE__ */ jsx("path", { className: "india-choropleth__selection-ring", d: selected.path, fill: "none" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      ),
+      tooltipContext && regions.length > 0 ? /* @__PURE__ */ jsx("div", { ref: tooltipAnchorRef, className: "india-choropleth__tooltip-anchor", style: { left: `${inspected.centroid[0] / VIEWBOX.width * 100}%`, top: `${inspected.centroid[1] / VIEWBOX.height * 100}%` }, children: /* @__PURE__ */ jsx("div", { id: tooltipId, className: "india-choropleth__tooltip", children: renderTooltip ? renderTooltip(tooltipContext) : defaultTooltip(tooltipContext, formatValue) }) }) : null
+    ] }),
+    showLegend ? /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "india-choropleth__legend",
+        role: "group",
+        "aria-label": `Color scale: ${legendLabels[0]} to ${legendLabels[1]} values`,
+        onKeyDown: interactive ? (event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            setActiveBucket(null);
+          }
+        } : void 0,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: legendLabels[0] }),
+          /* @__PURE__ */ jsx("div", { className: "india-choropleth__swatches", "aria-hidden": interactive ? void 0 : true, children: buckets.map((bucket) => interactive ? /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: `india-choropleth__swatch${filterBucket === bucket.index ? " india-choropleth__swatch--active" : ""}${filterBucket !== null && filterBucket !== bucket.index ? " india-choropleth__swatch--muted" : ""}`,
+              style: { backgroundColor: bucket.color },
+              "aria-pressed": filterBucket === bucket.index,
+              "aria-disabled": bucket.matches === 0 ? true : void 0,
+              "aria-label": legendBucketLabel(bucket, formatValue),
+              title: legendBucketLabel(bucket, formatValue),
+              onClick: () => {
+                if (bucket.matches === 0) return;
+                setActiveBucket(filterBucket === bucket.index ? null : bucket.index);
+              }
+            },
+            bucket.index
+          ) : /* @__PURE__ */ jsx("i", { className: "india-choropleth__swatch", style: { backgroundColor: bucket.color } }, bucket.index)) }),
+          /* @__PURE__ */ jsx("span", { children: legendLabels[1] }),
+          visibleReferenceRegions.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("i", { className: `india-choropleth__reference-key${referenceOverlayFill === "solid" ? " india-choropleth__reference-key--solid" : ""}`, "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { children: referenceOverlayLegendLabel })
+          ] }) : null
+        ]
+      }
+    ) : null,
+    renderInsights ? /* @__PURE__ */ jsx("aside", { className: "india-choropleth__insights", "aria-live": "polite", children: renderInsights(insightContext) }) : null
+  ] });
+}
+export {
+  IndiaChoropleth
+};
+//# sourceMappingURL=index.js.map