@jcsoftdev/ui 0.0.0-stage → 0.1.1

package/dist/charts/maps/geo/geo-path.js

@@ -0,0 +1,132 @@
+import { geometryRings } from "./topojson.js";
+function geometryPath(geometry, project, precision = 1) {
+  const factor = 10 ** precision;
+  const round = (value) => Math.round(value * factor) / factor;
+  let d = "";
+  for (const ring of geometryRings(geometry)) {
+    let lastX = Number.NaN;
+    let lastY = Number.NaN;
+    let count = 0;
+    let part = "";
+    for (const [lon, lat] of ring) {
+      const [px, py] = project(lon, lat);
+      const x = round(px);
+      const y = round(py);
+      if (x === lastX && y === lastY) continue;
+      part += `${count === 0 ? "M" : "L"}${x} ${y}`;
+      lastX = x;
+      lastY = y;
+      count++;
+    }
+    if (count >= 3) d += `${part}Z`;
+  }
+  return d;
+}
+function geometryExtent(geometry) {
+  let west = Number.POSITIVE_INFINITY;
+  let south = Number.POSITIVE_INFINITY;
+  let east = Number.NEGATIVE_INFINITY;
+  let north = Number.NEGATIVE_INFINITY;
+  const polygons = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.coordinates;
+  for (const polygon of polygons) {
+    for (const [lon, lat] of polygon[0] ?? []) {
+      if (lon < west) west = lon;
+      if (lon > east) east = lon;
+      if (lat < south) south = lat;
+      if (lat > north) north = lat;
+    }
+  }
+  return [west, south, east, north];
+}
+function featurePositions(features) {
+  const positions = [];
+  for (const feature of features) {
+    const polygons = feature.geometry.type === "Polygon" ? [feature.geometry.coordinates] : feature.geometry.coordinates;
+    for (const polygon of polygons) for (const point of polygon[0] ?? []) positions.push(point);
+  }
+  return positions;
+}
+function ringContains(ring, x, y) {
+  let inside = false;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    const [xi, yi] = ring[i];
+    const [xj, yj] = ring[j];
+    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) inside = !inside;
+  }
+  return inside;
+}
+function edgeDistanceSquared(rings, x, y, k) {
+  let best = Number.POSITIVE_INFINITY;
+  for (const ring of rings) {
+    for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+      const ax = (ring[j][0] - x) * k;
+      const ay = ring[j][1] - y;
+      const bx = (ring[i][0] - x) * k;
+      const by = ring[i][1] - y;
+      const dx = bx - ax;
+      const dy = by - ay;
+      const length = dx * dx + dy * dy;
+      const t = length === 0 ? 0 : Math.max(0, Math.min(1, -(ax * dx + ay * dy) / length));
+      const px = ax + t * dx;
+      const py = ay + t * dy;
+      best = Math.min(best, px * px + py * py);
+    }
+  }
+  return best;
+}
+function polygonArea(ring) {
+  let sum = 0;
+  for (let i = 0, j = ring.length - 1; i < ring.length; j = i++) {
+    sum += ring[j][0] * ring[i][1];
+    sum -= ring[i][0] * ring[j][1];
+  }
+  return Math.abs(sum / 2);
+}
+function labelAnchor(geometry) {
+  const polygons = geometry.type === "Polygon" ? [geometry.coordinates] : geometry.coordinates;
+  let main = polygons[0];
+  let mainArea = -1;
+  for (const polygon of polygons) {
+    const area = polygonArea(polygon[0] ?? []);
+    if (area > mainArea) {
+      main = polygon;
+      mainArea = area;
+    }
+  }
+  const [west, south, east, north] = geometryExtent({ type: "Polygon", coordinates: main });
+  const k = Math.cos((south + north) / 2 * (Math.PI / 180)) || 1;
+  const inside = (x, y) => ringContains(main[0] ?? [], x, y) && !main.slice(1).some((hole) => ringContains(hole, x, y));
+  let best = [(west + east) / 2, (south + north) / 2];
+  let bestDistance = -1;
+  let stepX = (east - west) / 16;
+  let stepY = (north - south) / 16;
+  let x0 = west;
+  let y0 = south;
+  let x1 = east;
+  let y1 = north;
+  for (let pass = 0; pass < 3; pass++) {
+    for (let x = x0; x <= x1; x += stepX) {
+      for (let y = y0; y <= y1; y += stepY) {
+        if (!inside(x, y)) continue;
+        const distance = edgeDistanceSquared(main, x, y, k);
+        if (distance > bestDistance) {
+          bestDistance = distance;
+          best = [x, y];
+        }
+      }
+    }
+    x0 = best[0] - stepX;
+    x1 = best[0] + stepX;
+    y0 = best[1] - stepY;
+    y1 = best[1] + stepY;
+    stepX /= 5;
+    stepY /= 5;
+  }
+  return best;
+}
+export {
+  featurePositions,
+  geometryExtent,
+  geometryPath,
+  labelAnchor
+};

package/dist/charts/maps/geo/globe.d.ts

@@ -0,0 +1,72 @@
+import type { Position } from "./types.js";
+/** Unit vector on the sphere (x, y, z). */
+export type Vec3 = readonly [number, number, number];
+/** The point of the globe facing the viewer, in degrees. */
+export interface GlobeRotation {
+    lon: number;
+    lat: number;
+}
+/** Maximum latitude of the view center: the poles themselves are a singular view. */
+export declare const GLOBE_MAX_LAT = 89;
+/** Longitude wrapped into [-180, 180). */
+export declare function wrapLon(lon: number): number;
+/** Keeps a rotation valid: longitude wrapped, latitude clamped. */
+export declare function normalizeRotation(rotation: GlobeRotation): GlobeRotation;
+/** `[lon, lat]` in degrees to a unit vector. */
+export declare function toVec([lon, lat]: Position): Vec3;
+/** Unit vector to `[lon, lat]` in degrees. */
+export declare function fromVec([x, y, z]: Vec3): Position;
+type Matrix = readonly [Vec3, Vec3, Vec3];
+/**
+ * Rows of the view basis: east, north and the direction towards the viewer at the rotation's
+ * center. Applying it to a world vector gives view coordinates (x right, y up, z towards the viewer).
+ */
+export declare function viewMatrix({ lon, lat }: GlobeRotation): Matrix;
+export declare function applyMatrix(matrix: Matrix, v: Vec3): Vec3;
+/** The disc the globe occupies on screen. */
+export interface GlobeDisc {
+    cx: number;
+    cy: number;
+    radius: number;
+}
+/** View coordinates to screen pixels (y grows downwards). */
+export declare function viewToScreen(v: Vec3, { cx, cy, radius }: GlobeDisc): [number, number];
+/** Orthographic projection of `[lon, lat]`, or `null` on the far side of the globe. */
+export declare function projectOrthographic(position: Position, rotation: GlobeRotation, disc: GlobeDisc): [number, number] | null;
+/** The `[lon, lat]` under a screen pixel, or `null` outside the disc. */
+export declare function invertOrthographic(x: number, y: number, rotation: GlobeRotation, { cx, cy, radius }: GlobeDisc): Position | null;
+/**
+ * New rotation after dragging `dx`, `dy` pixels: the surface follows the pointer (one disc
+ * radius is one radian), so a small globe turns faster per pixel than a big one.
+ */
+export declare function dragRotation(rotation: GlobeRotation, dx: number, dy: number, radius: number): GlobeRotation;
+/** Rotation after an arrow key: left and right turn the globe, up and down tilt it. */
+export declare function keyRotation(rotation: GlobeRotation, key: string, step?: number): GlobeRotation | null;
+/** Rotation after `seconds` of the idle spin at `speed` degrees per second (eastwards view drift). */
+export declare function spinRotation(rotation: GlobeRotation, seconds: number, speed: number): GlobeRotation;
+/**
+ * A closed ring in view coordinates cut to the visible hemisphere (z >= 0). Where the ring
+ * leaves and re-enters the visible side, the cut follows the horizon circle instead of a
+ * straight chord, so a continent half behind the globe keeps its round edge.
+ * Returns `null` when the ring is entirely hidden.
+ */
+export declare function clipRingToHemisphere(ring: readonly Vec3[], arcStep?: number): Vec3[] | null;
+/**
+ * SVG path of rings drawn on the globe. `rings` hold precomputed world vectors (`toVec`), so
+ * turning the globe is one matrix product per vertex. Use with `fill-rule: evenodd`.
+ */
+export declare function globeRingsPath(rings: ReadonlyArray<readonly Vec3[]>, rotation: GlobeRotation, disc: GlobeDisc): string;
+/** Meridians and parallels every `step` degrees, as polylines of `[lon, lat]`. */
+export declare function graticuleLines(step?: number, resolution?: number): Position[][];
+/**
+ * Visible stretches of a polyline of world vectors, projected: a path leaving the visible
+ * hemisphere is cut at the horizon so lines never wrap behind the globe.
+ */
+export declare function globeLinePieces(line: readonly Vec3[], rotation: GlobeRotation, disc: GlobeDisc): Array<Array<[number, number]>>;
+/**
+ * Points of the great circle from `a` to `b` as world vectors, optionally lifted off the surface
+ * (`lift` is the extra radius at the middle, as a fraction of the globe radius) so an arc
+ * seems to fly over the globe.
+ */
+export declare function globeArc(a: Position, b: Position, steps?: number, lift?: number): Vec3[];
+export {};

package/dist/charts/maps/geo/globe.js

@@ -0,0 +1,223 @@
+const RAD = Math.PI / 180;
+const GLOBE_MAX_LAT = 89;
+function wrapLon(lon) {
+  return ((lon + 180) % 360 + 360) % 360 - 180;
+}
+function normalizeRotation(rotation) {
+  return {
+    lon: wrapLon(rotation.lon),
+    lat: Math.max(-GLOBE_MAX_LAT, Math.min(GLOBE_MAX_LAT, rotation.lat))
+  };
+}
+function toVec([lon, lat]) {
+  const phi = lat * RAD;
+  const lambda = lon * RAD;
+  return [Math.cos(phi) * Math.cos(lambda), Math.cos(phi) * Math.sin(lambda), Math.sin(phi)];
+}
+function fromVec([x, y, z]) {
+  return [Math.atan2(y, x) / RAD, Math.asin(Math.max(-1, Math.min(1, z))) / RAD];
+}
+const dot = (a, b) => a[0] * b[0] + a[1] * b[1] + a[2] * b[2];
+function viewMatrix({ lon, lat }) {
+  const lambda = lon * RAD;
+  const phi = lat * RAD;
+  return [
+    [-Math.sin(lambda), Math.cos(lambda), 0],
+    [-Math.sin(phi) * Math.cos(lambda), -Math.sin(phi) * Math.sin(lambda), Math.cos(phi)],
+    [Math.cos(phi) * Math.cos(lambda), Math.cos(phi) * Math.sin(lambda), Math.sin(phi)]
+  ];
+}
+function applyMatrix(matrix, v) {
+  return [dot(matrix[0], v), dot(matrix[1], v), dot(matrix[2], v)];
+}
+function viewToScreen(v, { cx, cy, radius }) {
+  return [cx + radius * v[0], cy - radius * v[1]];
+}
+function projectOrthographic(position, rotation, disc) {
+  const v = applyMatrix(viewMatrix(rotation), toVec(position));
+  return v[2] < 0 ? null : viewToScreen(v, disc);
+}
+function invertOrthographic(x, y, rotation, { cx, cy, radius }) {
+  const xv = (x - cx) / radius;
+  const yv = -(y - cy) / radius;
+  const r2 = xv * xv + yv * yv;
+  if (r2 > 1) return null;
+  const [east, north, front] = viewMatrix(rotation);
+  const zv = Math.sqrt(1 - r2);
+  return fromVec([
+    xv * east[0] + yv * north[0] + zv * front[0],
+    xv * east[1] + yv * north[1] + zv * front[1],
+    xv * east[2] + yv * north[2] + zv * front[2]
+  ]);
+}
+function dragRotation(rotation, dx, dy, radius) {
+  const k = 1 / Math.max(1, radius) / RAD;
+  return normalizeRotation({ lon: rotation.lon - dx * k, lat: rotation.lat + dy * k });
+}
+function keyRotation(rotation, key, step = 10) {
+  if (key === "ArrowLeft") return normalizeRotation({ ...rotation, lon: rotation.lon - step });
+  if (key === "ArrowRight") return normalizeRotation({ ...rotation, lon: rotation.lon + step });
+  if (key === "ArrowUp") return normalizeRotation({ ...rotation, lat: rotation.lat + step });
+  if (key === "ArrowDown") return normalizeRotation({ ...rotation, lat: rotation.lat - step });
+  return null;
+}
+function spinRotation(rotation, seconds, speed) {
+  return normalizeRotation({ ...rotation, lon: rotation.lon + speed * seconds });
+}
+function lerpUnit(a, b, t) {
+  const x = a[0] + (b[0] - a[0]) * t;
+  const y = a[1] + (b[1] - a[1]) * t;
+  const z = a[2] + (b[2] - a[2]) * t;
+  const length = Math.hypot(x, y, z) || 1;
+  return [x / length, y / length, z / length];
+}
+function arcPoints(from, to, stepRad) {
+  const start = Math.atan2(from[1], from[0]);
+  let delta = Math.atan2(to[1], to[0]) - start;
+  if (delta > Math.PI) delta -= 2 * Math.PI;
+  if (delta < -Math.PI) delta += 2 * Math.PI;
+  const count = Math.floor(Math.abs(delta) / stepRad);
+  const points = [];
+  for (let i = 1; i < count; i += 1) {
+    const angle = start + delta * i / count;
+    points.push([Math.cos(angle), Math.sin(angle), 0]);
+  }
+  return points;
+}
+function clipRingToHemisphere(ring, arcStep = 6 * RAD) {
+  const n = ring.length;
+  if (n < 3) return null;
+  const marked = [];
+  let anyInside = false;
+  for (let i = 0; i < n; i += 1) {
+    const previous = ring[(i + n - 1) % n];
+    const current = ring[i];
+    const insideNow = current[2] >= 0;
+    const insideBefore = previous[2] >= 0;
+    if (insideNow !== insideBefore) {
+      const t = previous[2] / (previous[2] - current[2]);
+      const cut = lerpUnit(previous, current, t);
+      marked.push({ v: [cut[0], cut[1], 0], kind: insideNow ? "enter" : "exit" });
+    }
+    if (insideNow) {
+      marked.push({ v: current, kind: "inside" });
+      anyInside = true;
+    }
+  }
+  if (!anyInside) return null;
+  const out = [];
+  for (let i = 0; i < marked.length; i += 1) {
+    const item = marked[i];
+    out.push(item.v);
+    if (item.kind === "exit") {
+      const next = marked[(i + 1) % marked.length];
+      if (next.kind === "enter") out.push(...arcPoints(item.v, next.v, arcStep));
+    }
+  }
+  return out;
+}
+function globeRingsPath(rings, rotation, disc) {
+  const matrix = viewMatrix(rotation);
+  let d = "";
+  for (const ring of rings) {
+    const view = ring.map((v) => applyMatrix(matrix, v));
+    const clipped = view.every((v) => v[2] >= 0) ? view : clipRingToHemisphere(view);
+    if (!clipped) continue;
+    let part = "";
+    let count = 0;
+    let lastX = Number.NaN;
+    let lastY = Number.NaN;
+    for (const v of clipped) {
+      const [px, py] = viewToScreen(v, disc);
+      const x = Math.round(px * 10) / 10;
+      const y = Math.round(py * 10) / 10;
+      if (x === lastX && y === lastY) continue;
+      part += `${count === 0 ? "M" : "L"}${x} ${y}`;
+      lastX = x;
+      lastY = y;
+      count += 1;
+    }
+    if (count >= 3) d += `${part}Z`;
+  }
+  return d;
+}
+function graticuleLines(step = 30, resolution = 6) {
+  const lines = [];
+  for (let lon = -180; lon < 180; lon += step) {
+    const line = [];
+    for (let lat = -90; lat <= 90; lat += resolution) line.push([lon, lat]);
+    lines.push(line);
+  }
+  for (let lat = -90 + step; lat < 90; lat += step) {
+    const line = [];
+    for (let lon = -180; lon <= 180; lon += resolution) line.push([lon, lat]);
+    lines.push(line);
+  }
+  return lines;
+}
+function globeLinePieces(line, rotation, disc) {
+  const matrix = viewMatrix(rotation);
+  const pieces = [];
+  let current = [];
+  let previous = null;
+  for (const world of line) {
+    const v = applyMatrix(matrix, world);
+    if (v[2] >= 0) {
+      if (previous && previous[2] < 0) {
+        const cut = lerpUnit(previous, v, previous[2] / (previous[2] - v[2]));
+        current.push(viewToScreen([cut[0], cut[1], 0], disc));
+      }
+      current.push(viewToScreen(v, disc));
+    } else if (previous && previous[2] >= 0) {
+      const cut = lerpUnit(previous, v, previous[2] / (previous[2] - v[2]));
+      current.push(viewToScreen([cut[0], cut[1], 0], disc));
+      pieces.push(current);
+      current = [];
+    }
+    previous = v;
+  }
+  if (current.length > 1) pieces.push(current);
+  return pieces.filter((piece) => piece.length > 1);
+}
+function globeArc(a, b, steps = 48, lift = 0) {
+  const va = toVec(a);
+  const vb = toVec(b);
+  const cos = Math.max(-1, Math.min(1, dot(va, vb)));
+  const omega = Math.acos(cos);
+  const count = Math.max(1, Math.round(steps));
+  const points = [];
+  for (let i = 0; i <= count; i += 1) {
+    const t = i / count;
+    let p;
+    if (omega < 1e-9 || Math.abs(Math.PI - omega) < 1e-9) {
+      p = va;
+    } else {
+      const wa = Math.sin((1 - t) * omega) / Math.sin(omega);
+      const wb = Math.sin(t * omega) / Math.sin(omega);
+      p = [wa * va[0] + wb * vb[0], wa * va[1] + wb * vb[1], wa * va[2] + wb * vb[2]];
+    }
+    const scale = 1 + lift * Math.sin(Math.PI * t) * Math.min(1, omega / Math.PI);
+    points.push([p[0] * scale, p[1] * scale, p[2] * scale]);
+  }
+  return points;
+}
+export {
+  GLOBE_MAX_LAT,
+  applyMatrix,
+  clipRingToHemisphere,
+  dragRotation,
+  fromVec,
+  globeArc,
+  globeLinePieces,
+  globeRingsPath,
+  graticuleLines,
+  invertOrthographic,
+  keyRotation,
+  normalizeRotation,
+  projectOrthographic,
+  spinRotation,
+  toVec,
+  viewMatrix,
+  viewToScreen,
+  wrapLon
+};

package/dist/charts/maps/geo/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./map-data-table.js";
+export * from "./map-labels.js";
+export * from "./map-legend.js";
+export * from "./map-viewport.js";
+export * from "./pure.js";
+export * from "./use-map-geometry.js";
+export * from "./use-map-view.js";

package/dist/charts/maps/geo/index.js

@@ -0,0 +1,7 @@
+export * from "./map-data-table.js";
+export * from "./map-labels.js";
+export * from "./map-legend.js";
+export * from "./map-viewport.js";
+export * from "./pure.js";
+export * from "./use-map-geometry.js";
+export * from "./use-map-view.js";

package/dist/charts/maps/geo/map-data-table.d.ts

@@ -0,0 +1,25 @@
+import type { MapLabels } from "./map-labels.js";
+export interface MapDataRow {
+    id: string;
+    name: string;
+    /** `null`: the region has no data. */
+    value: number | null;
+    /** Value as text. */
+    display: string;
+    /** CSS color of the region on the map. */
+    color: string;
+}
+/**
+ * Visible, sortable table with the same numbers as a choropleth: the accessible alternative to
+ * the colors. A bar next to each value repeats the magnitude without relying on hue. Rows
+ * without data always sort last.
+ */
+export declare function MapDataTable({ caption, rows, valueName, labels, height, onRowClick, }: {
+    caption: string;
+    rows: readonly MapDataRow[];
+    valueName: string;
+    labels: MapLabels;
+    /** Height in px of the scrolling area. */
+    height: number;
+    onRowClick?: (row: MapDataRow) => void;
+}): import("react").JSX.Element;

package/dist/charts/maps/geo/map-data-table.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { cn } from "../../../utils/cn.js";
+function MapDataTable({
+  caption,
+  rows,
+  valueName,
+  labels,
+  height,
+  onRowClick
+}) {
+  const [sort, setSort] = useState({
+    key: "value",
+    direction: "desc"
+  });
+  const top = useMemo(() => Math.max(0, ...rows.map((row) => row.value ?? 0)), [rows]);
+  const sorted = useMemo(() => {
+    const factor = sort.direction === "asc" ? 1 : -1;
+    return [...rows].sort((a, b) => {
+      if (sort.key === "name") return factor * a.name.localeCompare(b.name);
+      if (a.value == null || b.value == null) {
+        return a.value == null ? b.value == null ? 0 : 1 : -1;
+      }
+      return factor * (a.value - b.value);
+    });
+  }, [rows, sort]);
+  const toggle = (key) => setSort(
+    (current) => current.key === key ? { key, direction: current.direction === "asc" ? "desc" : "asc" } : { key, direction: key === "name" ? "asc" : "desc" }
+  );
+  const header = (key, text, className) => /* @__PURE__ */ jsx(
+    "th",
+    {
+      scope: "col",
+      "aria-sort": sort.key === key ? sort.direction === "asc" ? "ascending" : "descending" : "none",
+      className: cn("sticky top-0 bg-surface px-2 py-1.5 text-left font-bold text-ink", className),
+      children: /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => toggle(key),
+          "aria-label": labels.sortBy(text),
+          className: "inline-flex cursor-pointer items-center gap-1 rounded-xs border-0 bg-transparent p-0 font-bold text-ink outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:outline-offset-2",
+          children: [
+            text,
+            /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-[10px] text-ink-3", children: sort.key === key ? sort.direction === "asc" ? "\u25B2" : "\u25BC" : "" })
+          ]
+        }
+      )
+    }
+  );
+  return /* @__PURE__ */ jsx("div", { className: "@container/table overflow-auto rounded-event border-divider", style: { height }, children: /* @__PURE__ */ jsxs("table", { className: "w-full border-collapse text-[12.5px]", children: [
+    /* @__PURE__ */ jsx("caption", { className: "sr-only", children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "border-b-divider", children: [
+      header("name", labels.region),
+      header("value", valueName, "text-right"),
+      /* @__PURE__ */ jsx("th", { scope: "col", className: "sticky top-0 hidden w-1/3 bg-surface @sm/table:table-cell", children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.share }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sorted.map((row) => /* @__PURE__ */ jsxs(
+      "tr",
+      {
+        onClick: onRowClick ? () => onRowClick(row) : void 0,
+        className: cn(
+          "border-b-divider last:border-b-0",
+          onRowClick && "cursor-pointer hover:bg-surface-2"
+        ),
+        children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", className: "px-2 py-1.5 text-left font-semibold text-ink", children: /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                className: "size-2.5 shrink-0 rounded-[3px] border border-line",
+                style: { background: row.color }
+              }
+            ),
+            row.name
+          ] }) }),
+          /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 text-right text-ink tabular-nums", children: row.value == null ? /* @__PURE__ */ jsx("span", { className: "text-ink-3", children: labels.noData }) : row.display }),
+          /* @__PURE__ */ jsx("td", { className: "hidden px-2 py-1.5 @sm/table:table-cell", "aria-hidden": "true", children: row.value != null && top > 0 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "block h-1.5 rounded-pill",
+              style: {
+                width: `${Math.max(2, Math.max(0, row.value) / top * 100)}%`,
+                background: "var(--accent-word)",
+                opacity: 0.75
+              }
+            }
+          ) : null })
+        ]
+      },
+      row.id
+    )) })
+  ] }) });
+}
+export {
+  MapDataTable
+};

package/dist/charts/maps/geo/map-labels.d.ts

@@ -0,0 +1,33 @@
+import { type ChartLabels } from "../../core/types.js";
+/** Visible strings of the maps. English defaults; pass Spanish (or any language) from the app. */
+export interface MapLabels extends ChartLabels {
+    zoomIn: string;
+    zoomOut: string;
+    /** Button that fits the whole map again. */
+    fit: string;
+    /** Accessible name of the zoom button group. */
+    controls: string;
+    /** Tooltip value and table cell of a region without data. */
+    noData: string;
+    /** Header of the region column in the hidden data table. */
+    region: string;
+    /** Header of the longitude / latitude columns of a marker table. */
+    longitude: string;
+    latitude: string;
+    /** Spoken and tooltip name of a cluster, e.g. "Grupo de 4". Receives the member count. */
+    cluster: (count: number) => string;
+    /** Spoken hint appended to the explore label. */
+    zoomHint: string;
+    /** Route table headers (BubbleMap routes). */
+    origin: string;
+    destination: string;
+    /** Name of the routes layer, e.g. "Routes". */
+    routes: string;
+    /** Visible data table: the toggle buttons and the "Share" bar column. */
+    showTable: string;
+    showMap: string;
+    /** Accessible name of the sortable column buttons: receives the column name. */
+    sortBy: (column: string) => string;
+}
+export declare const DEFAULT_MAP_LABELS: MapLabels;
+export declare function resolveMapLabels(labels?: Partial<MapLabels>): MapLabels;

package/dist/charts/maps/geo/map-labels.js

@@ -0,0 +1,30 @@
+import { DEFAULT_LABELS } from "../../core/types.js";
+const DEFAULT_MAP_LABELS = {
+  ...DEFAULT_LABELS,
+  empty: "No map data to show",
+  loading: "Loading map",
+  explore: "Map regions. Use the arrow keys to move between them, plus and minus to zoom, zero to fit.",
+  region: "Region",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit the whole map",
+  controls: "Map zoom",
+  noData: "No data",
+  longitude: "Longitude",
+  latitude: "Latitude",
+  cluster: (count) => `Group of ${count}`,
+  zoomHint: "Plus and minus zoom, zero fits the map.",
+  origin: "Origin",
+  destination: "Destination",
+  routes: "Routes",
+  showTable: "View as table",
+  showMap: "View as map",
+  sortBy: (column) => `Sort by ${column}`
+};
+function resolveMapLabels(labels) {
+  return labels ? { ...DEFAULT_MAP_LABELS, ...labels } : DEFAULT_MAP_LABELS;
+}
+export {
+  DEFAULT_MAP_LABELS,
+  resolveMapLabels
+};

package/dist/charts/maps/geo/map-legend.d.ts

@@ -0,0 +1,19 @@
+import { type ColorRange, type ScaleColors } from "../../core/color-scale.js";
+import type { ValueFormatter } from "../../core/format.js";
+export interface MapLegendProps {
+    kind: "sequential" | "diverging";
+    domain: readonly [number, number];
+    center?: number;
+    colors?: ScaleColors;
+    /** Stepped scale: one swatch per range instead of a gradient bar. */
+    ranges?: readonly ColorRange[];
+    format: ValueFormatter;
+    /** Swatch for regions without data, with its label. */
+    noData?: string;
+}
+/**
+ * Color key of a choropleth: a gradient bar with its extremes (and centre when
+ * diverging), or one swatch per range. It sits under the map in narrow
+ * containers and above it, aligned to the end, from `@md/chart`.
+ */
+export declare function MapLegend({ kind, domain, center, colors, ranges, format, noData, }: MapLegendProps): import("react").JSX.Element;