@jcsoftdev/ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  rangeColor,
+  scaleGradient
+} from "../../core/color-scale.js";
+function MapLegend({
+  kind,
+  domain,
+  center = 0,
+  colors,
+  ranges,
+  format,
+  noData
+}) {
+  const missing = noData ? /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-[12px] text-ink-2", children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-2.5 shrink-0 rounded-[3px] border border-line",
+        style: { background: "var(--surface-2)" }
+      }
+    ),
+    noData
+  ] }) : null;
+  return /* @__PURE__ */ jsxs("div", { className: "@md/chart:-order-1 flex flex-wrap items-end gap-x-4 gap-y-2 @md/chart:justify-end", children: [
+    ranges && ranges.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "m-0 flex list-none flex-wrap gap-x-3 gap-y-1 p-0 text-[12px]", children: ranges.map((range, index) => /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "inline-flex min-w-0 items-center gap-1.5 font-semibold text-ink-2",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "size-2.5 shrink-0 rounded-[3px]",
+              style: { background: rangeColor(range, index, ranges.length).color }
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "truncate", children: range.label })
+        ]
+      },
+      range.label
+    )) }) : /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "aria-hidden": "true",
+        className: "flex w-full max-w-[220px] flex-col gap-1 text-[11px] text-ink-3 tabular-nums",
+        children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "h-2 w-full rounded-pill",
+              style: { background: scaleGradient(kind, colors) }
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "flex justify-between font-semibold", children: [
+            /* @__PURE__ */ jsx("span", { children: format(domain[0]) }),
+            kind === "diverging" ? /* @__PURE__ */ jsx("span", { children: format(center) }) : null,
+            /* @__PURE__ */ jsx("span", { children: format(domain[1]) })
+          ] })
+        ]
+      }
+    ),
+    missing
+  ] });
+}
+export {
+  MapLegend
+};

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

@@ -0,0 +1,69 @@
+import { type KeyboardEvent, type ReactNode, type RefObject } from "react";
+import type { MapLabels } from "./map-labels.js";
+import type { MapGeometry } from "./use-map-geometry.js";
+import type { MapViewController } from "./use-map-view.js";
+import { type MapView } from "./view.js";
+export interface MapViewportContext {
+    view: MapView;
+    /** Screen position of a point given in zoom 1 pixels (`geometry.projection.project`). */
+    toScreen: (x: number, y: number) => [number, number];
+    /** Zooms to a pixel box (zoom 1 coordinates). */
+    focusBox: (box: readonly [number, number, number, number]) => void;
+    /** True right after a drag: ignore the click that follows. */
+    wasDragged: () => boolean;
+    /** A pan is in progress: ignore hover. */
+    dragging: boolean;
+}
+export interface MapViewportProps {
+    width: number;
+    height: number;
+    /** Accessible name of the drawing. */
+    title: string;
+    geometry: MapGeometry;
+    labels: MapLabels;
+    /** CSS fill of each region. */
+    fills: readonly string[];
+    /** Regions react to hover, focus and click. Off for a plain base map. */
+    interactive: boolean;
+    /** Region under the pointer or the keyboard, or null. */
+    activeRegion?: number | null;
+    onRegionHover?: (index: number, event: {
+        clientX: number;
+        clientY: number;
+    }) => void;
+    onLeave?: () => void;
+    onRegionClick?: (index: number) => void;
+    /** Text drawn on each region where it fits (null leaves it out). */
+    regionLabels?: ReadonlyArray<string | null>;
+    /** Zoom and pan state, from `useMapView`; the parent owns it so markers can depend on the zoom. */
+    controller: MapViewController;
+    /** Shows the zoom buttons and enables the zoom keys (gestures are configured in `useMapView`). */
+    zoomable: boolean;
+    /** Ref of the positioned container, for pointer-relative tooltips. */
+    containerRef?: RefObject<HTMLDivElement | null>;
+    /** Keyboard model, usually from `useIndexNavigation(...).sliderProps`. */
+    keyboard?: {
+        count: number;
+        active: number | null;
+        valueText: string;
+        onKeyDown?: (event: KeyboardEvent<HTMLElement>) => void;
+        onFocus?: () => void;
+        onBlur?: () => void;
+        /** Enter or Space on the active item. */
+        onActivate?: () => void;
+    };
+    /** Zoom 1 pixel position to keep in view while the keyboard moves (null: no panning). */
+    reveal?: readonly [number, number] | null;
+    /** SVG drawn in screen space over the regions (markers, bubbles). */
+    overlay?: (context: MapViewportContext) => ReactNode;
+    /** HTML positioned over the map (tooltips). */
+    floating?: (context: MapViewportContext) => ReactNode;
+    className?: string;
+}
+/**
+ * The shared stage of the maps: draws the regions of a fitted geometry, owns
+ * zoom and pan (wheel, drag, pinch, buttons, keys), the region labels, the
+ * zoom buttons and the focusable keyboard layer. Charts supply fills,
+ * hover/click semantics, an SVG overlay (markers) and HTML (tooltip).
+ */
+export declare function MapViewport({ width, height, title, geometry, labels, fills, interactive, activeRegion, onRegionHover, onLeave, onRegionClick, regionLabels, controller: map, zoomable, containerRef, keyboard, reveal, overlay, floating, className, }: MapViewportProps): import("react").JSX.Element;

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

@@ -0,0 +1,326 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  memo,
+  useEffect,
+  useMemo
+} from "react";
+import { cn } from "../../../utils/cn.js";
+import { estimateTextWidth } from "../../core/axes.js";
+import { revealPoint, toScreen } from "./view.js";
+const Regions = memo(function Regions2({
+  paths,
+  fills,
+  interactive,
+  active,
+  onHover,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs("g", { children: [
+    paths.map((d, index) => (
+      // biome-ignore lint/a11y/noStaticElementInteractions: pointer-only mirror of the keyboard model on the focusable slider.
+      /* @__PURE__ */ jsx(
+        "path",
+        {
+          d,
+          fillRule: "evenodd",
+          vectorEffect: "non-scaling-stroke",
+          strokeLinejoin: "round",
+          className: "motion-safe:transition-[fill] motion-safe:duration-150",
+          style: {
+            fill: fills[index],
+            stroke: "var(--surface)",
+            strokeWidth: 1,
+            cursor: interactive ? "pointer" : void 0
+          },
+          onPointerEnter: interactive ? (event) => onHover(index, event) : void 0,
+          onPointerMove: interactive ? (event) => onHover(index, event) : void 0,
+          onClick: interactive ? () => onClick(index) : void 0
+        },
+        index
+      )
+    )),
+    interactive && active != null && paths[active] ? /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: paths[active],
+        fill: "none",
+        fillRule: "evenodd",
+        vectorEffect: "non-scaling-stroke",
+        strokeLinejoin: "round",
+        pointerEvents: "none",
+        style: { stroke: "var(--ink)", strokeWidth: 2 }
+      }
+    ) : null
+  ] });
+});
+const ZOOM_KEYS = {
+  "+": "in",
+  "=": "in",
+  "-": "out",
+  _: "out",
+  "0": "fit"
+};
+const LABEL_STYLE = {
+  paintOrder: "stroke",
+  stroke: "var(--surface)",
+  strokeWidth: 3,
+  strokeLinejoin: "round"
+};
+function RegionLabels({
+  view,
+  geometry,
+  texts,
+  width,
+  height
+}) {
+  const placed = useMemo(() => {
+    const order = geometry.boxes.map((box, index) => ({ index, area: (box[2] - box[0]) * (box[3] - box[1]) })).sort((a, b) => b.area - a.area);
+    const taken = [];
+    const out = [];
+    for (const { index } of order) {
+      const text = texts[index];
+      const box = geometry.boxes[index];
+      const anchor = geometry.anchors[index];
+      if (!text || !box || !anchor) continue;
+      const boxWidth = (box[2] - box[0]) * view.k;
+      const boxHeight = (box[3] - box[1]) * view.k;
+      const textWidth = estimateTextWidth(text, 11) * 1.05;
+      if (boxWidth < textWidth + 8 || boxHeight < 16) continue;
+      const [x, y] = toScreen(view, anchor[0], anchor[1]);
+      if (x < textWidth / 2 || x > width - textWidth / 2 || y < 8 || y > height - 8) continue;
+      const rect = [
+        x - textWidth / 2,
+        y - 7,
+        x + textWidth / 2,
+        y + 7
+      ];
+      if (taken.some((t) => rect[0] < t[2] && rect[2] > t[0] && rect[1] < t[3] && rect[3] > t[1]))
+        continue;
+      taken.push(rect);
+      out.push({ index, x, y, text });
+    }
+    return out;
+  }, [view, geometry, texts, width, height]);
+  return /* @__PURE__ */ jsx("g", { pointerEvents: "none", children: placed.map(({ index, x, y, text }) => /* @__PURE__ */ jsx(
+    "text",
+    {
+      x,
+      y,
+      textAnchor: "middle",
+      dominantBaseline: "central",
+      className: "fill-ink font-semibold text-[11px]",
+      style: LABEL_STYLE,
+      children: text
+    },
+    index
+  )) });
+}
+const BUTTON = "inline-flex size-8 cursor-pointer items-center justify-center border-0 bg-surface-overlay text-ink-2 outline-none transition-colors hover:bg-surface-2 hover:text-ink focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:-outline-offset-2 disabled:cursor-default disabled:opacity-40 disabled:hover:bg-float";
+function Glyph({ d }) {
+  return /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", width: "16", height: "16", fill: "none", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d,
+      stroke: "currentColor",
+      strokeWidth: "1.75",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function MapViewport({
+  width,
+  height,
+  title,
+  geometry,
+  labels,
+  fills,
+  interactive,
+  activeRegion = null,
+  onRegionHover,
+  onLeave,
+  onRegionClick,
+  regionLabels,
+  controller: map,
+  zoomable,
+  containerRef,
+  keyboard,
+  reveal,
+  overlay,
+  floating,
+  className
+}) {
+  const { view, wasDragged, zoomBy, fit, panBy, focusBox, animateTo } = map;
+  useEffect(() => {
+    if (!reveal) return;
+    const next = revealPoint(map.view, reveal[0], reveal[1], width, height);
+    if (next !== map.view) animateTo(next);
+  }, [reveal?.[0], reveal?.[1]]);
+  const context = {
+    view,
+    toScreen: (x, y) => toScreen(view, x, y),
+    focusBox,
+    wasDragged,
+    dragging: map.dragging
+  };
+  const onKeyDown = (event) => {
+    if (zoomable) {
+      const zoomKey = ZOOM_KEYS[event.key];
+      if (zoomKey) {
+        event.preventDefault();
+        if (zoomKey === "fit") fit();
+        else zoomBy(zoomKey === "in" ? 1.6 : 1 / 1.6);
+        return;
+      }
+      if (event.shiftKey && event.key.startsWith("Arrow")) {
+        event.preventDefault();
+        const step = 64;
+        panBy(
+          event.key === "ArrowLeft" ? step : event.key === "ArrowRight" ? -step : 0,
+          event.key === "ArrowUp" ? step : event.key === "ArrowDown" ? -step : 0
+        );
+        return;
+      }
+    }
+    if ((event.key === "Enter" || event.key === " ") && keyboard?.onActivate) {
+      event.preventDefault();
+      keyboard.onActivate();
+      return;
+    }
+    keyboard?.onKeyDown?.(event);
+  };
+  const hover = (index, event) => {
+    if (map.dragging || event.buttons !== 0) return;
+    onRegionHover?.(index, event);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative select-none overflow-hidden", className),
+      style: { width, height },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            ref: map.ref,
+            role: "img",
+            "aria-label": title,
+            width,
+            height,
+            viewBox: `0 0 ${width} ${height}`,
+            className: cn(
+              "block",
+              zoomable && "touch-none",
+              zoomable && (map.dragging ? "cursor-grabbing" : "cursor-grab")
+            ),
+            onPointerLeave: onLeave,
+            ...map.pointerProps,
+            children: [
+              /* @__PURE__ */ jsx(
+                "g",
+                {
+                  style: {
+                    transform: `translate(${view.x}px, ${view.y}px) scale(${view.k})`,
+                    transformOrigin: "0 0"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    Regions,
+                    {
+                      paths: geometry.paths,
+                      fills,
+                      interactive,
+                      active: activeRegion,
+                      onHover: hover,
+                      onClick: (index) => {
+                        if (!wasDragged()) onRegionClick?.(index);
+                      }
+                    }
+                  )
+                }
+              ),
+              regionLabels ? /* @__PURE__ */ jsx(
+                RegionLabels,
+                {
+                  view,
+                  geometry,
+                  texts: regionLabels,
+                  width,
+                  height
+                }
+              ) : null,
+              overlay?.(context)
+            ]
+          }
+        ),
+        zoomable ? (
+          // biome-ignore lint/a11y/useSemanticElements: a fieldset would add form semantics and default styling to a floating toolbar.
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "group",
+              "aria-label": labels.controls,
+              className: "absolute top-2 right-2 flex flex-col divide-y divide-line overflow-hidden rounded-event shadow-overlay",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: BUTTON,
+                    "aria-label": labels.zoomIn,
+                    disabled: !map.canZoomIn,
+                    onClick: () => zoomBy(1.6),
+                    children: /* @__PURE__ */ jsx(Glyph, { d: "M8 3v10M3 8h10" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: BUTTON,
+                    "aria-label": labels.zoomOut,
+                    disabled: !map.canZoomOut,
+                    onClick: () => zoomBy(1 / 1.6),
+                    children: /* @__PURE__ */ jsx(Glyph, { d: "M3 8h10" })
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    className: BUTTON,
+                    "aria-label": labels.fit,
+                    disabled: view.k <= 1.0001,
+                    onClick: fit,
+                    children: /* @__PURE__ */ jsx(Glyph, { d: "M2.5 6V2.5H6M10 2.5h3.5V6M13.5 10v3.5H10M6 13.5H2.5V10" })
+                  }
+                )
+              ]
+            }
+          )
+        ) : null,
+        keyboard ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "slider",
+            tabIndex: 0,
+            "aria-label": labels.explore,
+            "aria-valuemin": 1,
+            "aria-valuemax": Math.max(1, keyboard.count),
+            "aria-valuenow": (keyboard.active ?? 0) + 1,
+            "aria-valuetext": keyboard.valueText,
+            onKeyDown,
+            onFocus: keyboard.onFocus,
+            onBlur: keyboard.onBlur,
+            className: "pointer-events-none absolute inset-0 rounded-xs outline-none focus-visible:outline-2 focus-visible:outline-accent-ink focus-visible:-outline-offset-2"
+          }
+        ) : null,
+        floating?.(context)
+      ]
+    }
+  );
+}
+export {
+  MapViewport
+};

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

@@ -0,0 +1,9 @@
+/** Lowercase, accent-free key so "Áncash", "ancash" and "ANCASH" join. */
+export declare function matchKey(text: string): string;
+/** Looks a record up by the id or by the name of a region. */
+export declare function createRegionIndex<T extends {
+    id: string;
+}>(items: readonly T[]): (feature: {
+    id: string;
+    name: string;
+}) => T | undefined;

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

@@ -0,0 +1,12 @@
+function matchKey(text) {
+  return text.normalize("NFD").replace(/[̀-ͯ]/g, "").trim().toLowerCase();
+}
+function createRegionIndex(items) {
+  const byKey = /* @__PURE__ */ new Map();
+  for (const item of items) byKey.set(matchKey(item.id), item);
+  return (feature) => byKey.get(matchKey(feature.id)) ?? byKey.get(matchKey(feature.name));
+}
+export {
+  createRegionIndex,
+  matchKey
+};

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

@@ -0,0 +1,47 @@
+import type { Position, ProjectionKind } from "./types.js";
+/** Web Mercator cannot show the poles; latitudes are clamped here. */
+export declare const MERCATOR_MAX_LAT = 85.0511287798;
+/** Unit-scale projection: lon/lat in degrees to plane coordinates (x east, y south, so it can be drawn directly). */
+export interface RawProjection {
+    kind: ProjectionKind;
+    forward: (lon: number, lat: number) => [number, number];
+    inverse: (x: number, y: number) => [number, number];
+}
+export interface RawProjectionOptions {
+    /** Longitude kept at x = 0, in degrees. */
+    centerLon?: number;
+    /** Standard parallel of the `equirectangular` and `fitted` projections, in degrees (true scale there). */
+    parallel?: number;
+}
+/**
+ * Creates a raw projection:
+ * - `equirectangular`: plate carrée (x = lon, y = -lat) with an optional standard parallel;
+ * - `mercator`: conformal, latitudes clamped to ±85.05°;
+ * - `equalEarth`: area preserving, pleasant for world maps;
+ * - `fitted`: equirectangular with the standard parallel at the middle of the area, so a country keeps its shape
+ *   (use with `fitProjection`, which also picks the centre).
+ */
+export declare function createRawProjection(kind: ProjectionKind, { centerLon, parallel }?: RawProjectionOptions): RawProjection;
+/** A raw projection scaled and translated into a pixel box. */
+export interface Projection {
+    kind: ProjectionKind;
+    /** Pixels per unit of the raw projection. */
+    scale: number;
+    translate: readonly [number, number];
+    project: (lon: number, lat: number) => [number, number];
+    invert: (x: number, y: number) => [number, number];
+}
+export interface FitOptions {
+    /** Pixels kept free on every side. */
+    padding?: number;
+}
+/** Extent of a set of positions: [west, south, east, north]. */
+export declare function positionsExtent(positions: Iterable<Position>): [number, number, number, number] | null;
+/**
+ * Projects `positions` and scales them to fill `width` x `height` (minus
+ * padding) keeping the aspect ratio, centred. This is what makes a map fill
+ * its exact parent: the same data fits a 320 px card and a full dashboard
+ * panel. For `fitted` the centre meridian and the standard parallel come
+ * from the extent itself.
+ */
+export declare function fitProjection(kind: ProjectionKind, positions: readonly Position[], width: number, height: number, { padding }?: FitOptions): Projection;

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

@@ -0,0 +1,118 @@
+const RAD = Math.PI / 180;
+const MERCATOR_MAX_LAT = 85.0511287798;
+const A1 = 1.340264;
+const A2 = -0.081106;
+const A3 = 893e-6;
+const A4 = 3796e-6;
+const EQUAL_EARTH_M = Math.sqrt(3) / 2;
+function createRawProjection(kind, { centerLon = 0, parallel = 0 } = {}) {
+  if (kind === "mercator") {
+    return {
+      kind,
+      forward: (lon, lat) => {
+        const phi = Math.max(-MERCATOR_MAX_LAT, Math.min(MERCATOR_MAX_LAT, lat)) * RAD;
+        return [(lon - centerLon) * RAD, -Math.log(Math.tan(Math.PI / 4 + phi / 2))];
+      },
+      inverse: (x, y) => [x / RAD + centerLon, (2 * Math.atan(Math.exp(-y)) - Math.PI / 2) / RAD]
+    };
+  }
+  if (kind === "equalEarth") {
+    return {
+      kind,
+      forward: (lon, lat) => {
+        const theta = Math.asin(EQUAL_EARTH_M * Math.sin(lat * RAD));
+        const t2 = theta * theta;
+        const t6 = t2 * t2 * t2;
+        const x = (lon - centerLon) * RAD * Math.cos(theta) / (EQUAL_EARTH_M * (A1 + 3 * A2 * t2 + t6 * (7 * A3 + 9 * A4 * t2)));
+        return [x, -theta * (A1 + A2 * t2 + t6 * (A3 + A4 * t2))];
+      },
+      inverse: (x, y) => {
+        let theta = -y;
+        let t2 = theta * theta;
+        let t6 = t2 * t2 * t2;
+        let slope = A1 + 3 * A2 * t2 + t6 * (7 * A3 + 9 * A4 * t2);
+        for (let i = 0; i < 12; i++) {
+          t2 = theta * theta;
+          t6 = t2 * t2 * t2;
+          const error = theta * (A1 + A2 * t2 + t6 * (A3 + A4 * t2)) + y;
+          slope = A1 + 3 * A2 * t2 + t6 * (7 * A3 + 9 * A4 * t2);
+          const delta = error / slope;
+          theta -= delta;
+          if (Math.abs(delta) < 1e-12) break;
+        }
+        t2 = theta * theta;
+        t6 = t2 * t2 * t2;
+        slope = A1 + 3 * A2 * t2 + t6 * (7 * A3 + 9 * A4 * t2);
+        return [
+          EQUAL_EARTH_M * x * slope / Math.cos(theta) / RAD + centerLon,
+          Math.asin(Math.sin(theta) / EQUAL_EARTH_M) / RAD
+        ];
+      }
+    };
+  }
+  const stretch = Math.cos(parallel * RAD) || 1;
+  return {
+    kind,
+    forward: (lon, lat) => [(lon - centerLon) * RAD * stretch, -lat * RAD],
+    inverse: (x, y) => [x / (RAD * stretch) + centerLon, -y / RAD]
+  };
+}
+function positionsExtent(positions) {
+  let west = Number.POSITIVE_INFINITY;
+  let south = Number.POSITIVE_INFINITY;
+  let east = Number.NEGATIVE_INFINITY;
+  let north = Number.NEGATIVE_INFINITY;
+  for (const [lon, lat] of positions) {
+    if (lon < west) west = lon;
+    if (lon > east) east = lon;
+    if (lat < south) south = lat;
+    if (lat > north) north = lat;
+  }
+  return Number.isFinite(west) ? [west, south, east, north] : null;
+}
+function fitProjection(kind, positions, width, height, { padding = 8 } = {}) {
+  const extent = positionsExtent(positions) ?? [-180, -90, 180, 90];
+  const centerLon = kind === "fitted" ? (extent[0] + extent[2]) / 2 : 0;
+  const parallel = kind === "fitted" ? (extent[1] + extent[3]) / 2 : 0;
+  const raw = createRawProjection(kind, { centerLon, parallel });
+  let minX = Number.POSITIVE_INFINITY;
+  let minY = Number.POSITIVE_INFINITY;
+  let maxX = Number.NEGATIVE_INFINITY;
+  let maxY = Number.NEGATIVE_INFINITY;
+  for (const [lon, lat] of positions) {
+    const [x, y] = raw.forward(lon, lat);
+    if (x < minX) minX = x;
+    if (x > maxX) maxX = x;
+    if (y < minY) minY = y;
+    if (y > maxY) maxY = y;
+  }
+  if (!Number.isFinite(minX)) {
+    minX = -1;
+    maxX = 1;
+    minY = -1;
+    maxY = 1;
+  }
+  const innerW = Math.max(1, width - padding * 2);
+  const innerH = Math.max(1, height - padding * 2);
+  const scale = Math.min(innerW / (maxX - minX || 1), innerH / (maxY - minY || 1));
+  const translate = [
+    (width - scale * (minX + maxX)) / 2,
+    (height - scale * (minY + maxY)) / 2
+  ];
+  return {
+    kind,
+    scale,
+    translate,
+    project: (lon, lat) => {
+      const [x, y] = raw.forward(lon, lat);
+      return [x * scale + translate[0], y * scale + translate[1]];
+    },
+    invert: (x, y) => raw.inverse((x - translate[0]) / scale, (y - translate[1]) / scale)
+  };
+}
+export {
+  MERCATOR_MAX_LAT,
+  createRawProjection,
+  fitProjection,
+  positionsExtent
+};

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

@@ -0,0 +1,11 @@
+export * from "./build-topology.js";
+export * from "./cluster.js";
+export * from "./geo-path.js";
+export * from "./globe.js";
+export * from "./match.js";
+export * from "./projection.js";
+export * from "./routes.js";
+export * from "./simplify.js";
+export * from "./topojson.js";
+export * from "./types.js";
+export * from "./view.js";

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

@@ -0,0 +1,11 @@
+export * from "./build-topology.js";
+export * from "./cluster.js";
+export * from "./geo-path.js";
+export * from "./globe.js";
+export * from "./match.js";
+export * from "./projection.js";
+export * from "./routes.js";
+export * from "./simplify.js";
+export * from "./topojson.js";
+export * from "./types.js";
+export * from "./view.js";