@fundar/data-chart-telling 0.0.24 → 0.0.26

package/dist/charts/bar/Chart.svelte

@@ -101,6 +101,8 @@
             sync: tip.sync,
             series: tip.series,
             content: tip.content,
+            anchorX: tip.anchorX,
+            anchorY: tip.anchorY,
           }
         : undefined}
     />

package/dist/charts/heatmap/Chart.svelte

@@ -9,7 +9,7 @@
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
   import type { Accessor } from '../../types/plots/data/common';
-  import type { AxisBasedScalesConfig } from '../../types/plots/props';
+  import type { AxisBasedScalesConfig } from '../../types/layout/scales';
   import type { CellSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
 
@@ -105,6 +105,8 @@
             sync: tip.sync,
             series: tip.series,
             content: tip.content,
+            anchorX: tip.anchorX,
+            anchorY: tip.anchorY,
           }
         : undefined}
     />

package/dist/charts/heatmap/Chart.svelte.d.ts

@@ -1,8 +1,7 @@
 import type { Accessor } from '../../types/plots/data/common';
-import type { CellSegmentStyle } from '../../types/plots/segments/common';
 import type { ChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, CellSegmentStyle> & {
+    props: ChartProps<TRow, import("../..").AreaStyle> & {
         z: Accessor<TRow, number>;
     };
     exports: {};

package/dist/charts/line/Chart.svelte

@@ -103,6 +103,8 @@
             sync: tip.sync,
             series: tip.series,
             content: tip.content,
+            anchorX: tip.anchorX,
+            anchorY: tip.anchorY,
           }
         : undefined}
     />

package/dist/charts/pyramid/Chart.svelte

@@ -9,7 +9,7 @@
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { AxisValue } from '../../types/plots/axis';
+  import type { AxisValue } from '../../types/layout/scales';
   import type { Accessor } from '../../types/plots/data/common';
   import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
@@ -125,6 +125,8 @@
             sync: tip.sync,
             series: tip.series,
             content: tip.content,
+            anchorX: tip.anchorX,
+            anchorY: tip.anchorY,
           }
         : undefined}
     />

package/dist/charts/pyramid/Chart.svelte.d.ts

@@ -1,8 +1,7 @@
 import type { Accessor } from '../../types/plots/data/common';
-import type { BarSegmentStyle } from '../../types/plots/segments/common';
 import type { ChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: ChartProps<TRow, BarSegmentStyle> & {
+    props: ChartProps<TRow, import("../..").AreaStyle> & {
         x: Accessor<TRow, number>;
         z: Accessor<TRow, unknown>;
     };

package/dist/charts/scatter/Chart.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import BaseChart from '../BaseChart.svelte';
+  import ScatterPlot from '../../plots/scatter/Plot.svelte';
+  import {
+    resolveTooltip,
+    resolveHoverStrategy,
+    resolveHoverSync,
+    hasHoverMarker
+  } from '../../layout/tooltip/utils';
+  import { resolveAccessor } from '../../plots/utils/accessors';
+  import type { Accessor } from '../../types/plots/data/common';
+  import type { ScatterSegmentStyle } from '../../types/plots/segments/common';
+  import type { ChartProps } from '../../types/charts/props';
+
+  /**
+   * High-level scatter chart. Groups flat rows by `z` into one point cloud
+   * per group and delegates all chrome to {@link BaseChart}. `r` gives every
+   * point a per-row radius (bubble sizing), independent of `z` grouping.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    header,
+    footer,
+    data,
+    x,
+    y,
+    z,
+    r,
+    styles = {},
+    segments,
+    markers = [],
+    scales = {},
+    margins,
+    facet,
+    timeline,
+    tooltip,
+  }: ChartProps<TRow, ScatterSegmentStyle> & { r?: Accessor<TRow, number> | number } = $props();
+
+  const tip = $derived(resolveTooltip(tooltip, 'punctual'));
+  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
+  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'punctual'));
+  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
+  const getX = $derived(resolveAccessor<TRow>(x));
+  const getY = $derived(resolveAccessor<TRow>(y));
+  const defaultFormat = $derived((row: TRow) => `${String(getX(row))}, ${String(getY(row))}`);
+</script>
+
+<BaseChart
+  {width}
+  {height}
+  {title}
+  {subtitle}
+  {caption}
+  {legend}
+  {header}
+  {footer}
+  {data}
+  {facet}
+  {timeline}
+  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
+>
+  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
+    <ScatterPlot
+      width={w}
+      height={h}
+      data={rows}
+      {x}
+      {y}
+      {z}
+      {r}
+      {styles}
+      {segments}
+      {markers}
+      {scales}
+      {margins}
+      tooltip={tip.enabled
+        ? {
+            format: tip.format ?? defaultFormat,
+            facetId: facetValue ?? '',
+            strategy: tip.strategy,
+            sync: tip.sync,
+            series: tip.series,
+            content: tip.content,
+            anchorX: tip.anchorX,
+            anchorY: tip.anchorY,
+          }
+        : undefined}
+    />
+  {/snippet}
+</BaseChart>

package/dist/charts/scatter/Chart.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { Accessor } from '../../types/plots/data/common';
+import type { ChartProps } from '../../types/charts/props';
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: ChartProps<TRow, import("../..").DotStyle> & {
+        r?: Accessor<TRow, number> | number;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TRow extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TRow>>['props'];
+    events(): ReturnType<typeof $$render<TRow>>['events'];
+    slots(): ReturnType<typeof $$render<TRow>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TRow extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TRow>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TRow>['props']>, ReturnType<__sveltets_Render<TRow>['events']>, ReturnType<__sveltets_Render<TRow>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TRow>['bindings']>;
+    } & ReturnType<__sveltets_Render<TRow>['exports']>;
+    <TRow extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TRow>['props']> & {}): ReturnType<__sveltets_Render<TRow>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Chart: $$IsomorphicComponent;
+type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
+export default Chart;

package/dist/configuration/config.svelte.js

@@ -70,12 +70,24 @@ export const DEFAULT_CONFIG = {
     margins: { top: 'auto', right: 'auto', bottom: 'auto', left: 'auto' },
     palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
     continuous: { min: '#e0e7ff', max: '#4f46e5', labelColor: '#111827' },
-    line: { strokeWidth: 3, dotRadius: 4 },
+    line: {
+        strokeWidth: 3,
+        dotRadius: 4,
+        valueLabels: {
+            elbowGap: 10,
+            laneStep: 7,
+            labelGap: 6,
+            connectorColor: '#94a3b8',
+            connectorWidth: 0.5,
+        },
+    },
+    scatter: { dotRadius: 5 },
     timeline: { axisColor: 'currentColor', activeColor: '#e6580d', thickness: 60 },
     hover: {
         rule: { stroke: '#e6580d', strokeOpacity: 0.35, strokeWidth: 1.5, strokeDasharray: '4 4' },
         dot: { dotRadius: 5, dotFill: 'currentColor' },
         font: { fill: 'currentColor', fontSize: 12, dy: -18 },
+        area: { stroke: '#e6580d', strokeWidth: 2, fillOpacity: 0 },
     },
 };
 // ── Merge ─────────────────────────────────────────────────────────────────────

package/dist/configuration/themes/index.d.ts

@@ -84,6 +84,16 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
+        } | undefined;
+        scatter?: {
+            dotRadius?: number | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -126,6 +136,15 @@ export declare const THEMES: {
                 class?: string | undefined;
                 textClass?: string | undefined;
             } | undefined;
+            area?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
         } | undefined;
     };
     Editorial: {
@@ -207,6 +226,16 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
+        } | undefined;
+        scatter?: {
+            dotRadius?: number | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -249,6 +278,15 @@ export declare const THEMES: {
                 class?: string | undefined;
                 textClass?: string | undefined;
             } | undefined;
+            area?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
         } | undefined;
     };
     Dark: {
@@ -330,6 +368,16 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
+        } | undefined;
+        scatter?: {
+            dotRadius?: number | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -372,6 +420,15 @@ export declare const THEMES: {
                 class?: string | undefined;
                 textClass?: string | undefined;
             } | undefined;
+            area?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
         } | undefined;
     };
     Compact: {
@@ -453,6 +510,16 @@ export declare const THEMES: {
         line?: {
             strokeWidth?: number | undefined;
             dotRadius?: number | undefined;
+            valueLabels?: {
+                elbowGap?: number | undefined;
+                laneStep?: number | undefined;
+                labelGap?: number | undefined;
+                connectorColor?: string | undefined;
+                connectorWidth?: number | undefined;
+            } | undefined;
+        } | undefined;
+        scatter?: {
+            dotRadius?: number | undefined;
         } | undefined;
         timeline?: {
             axisColor?: string | undefined;
@@ -495,6 +562,15 @@ export declare const THEMES: {
                 class?: string | undefined;
                 textClass?: string | undefined;
             } | undefined;
+            area?: {
+                fill?: string | undefined;
+                fillOpacity?: number | undefined;
+                stroke?: string | undefined;
+                strokeWidth?: number | undefined;
+                strokeOpacity?: number | undefined;
+                strokeDasharray?: (string | import("../..").LineStyle) | undefined;
+                borderRadius?: number | undefined;
+            } | undefined;
         } | undefined;
     };
 };

package/dist/index.d.ts

@@ -2,49 +2,55 @@ export { default as BarPlot } from './plots/bar/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
 export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
+export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
 export { default as GeoPlot } from './plots/geo/Plot.svelte';
 export { default as BaseChart } from './charts/BaseChart.svelte';
 export { default as BarChart } from './charts/bar/Chart.svelte';
 export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
 export { default as LineChart } from './charts/line/Chart.svelte';
 export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
+export { default as ScatterChart } from './charts/scatter/Chart.svelte';
 export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
 export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
-export { default as GeoLayout } from './layout/geo/GeoLayout.svelte';
-export { default as TileLayer } from './plots/geo/TileLayer.svelte';
-export { argentinaBicontinental } from './plots/geo/projections/argentina';
+export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
+export { default as TileLayer } from './layout/styles/TileLayer.svelte';
+export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { default as Timeline } from './layout/timeline/Timeline.svelte';
 export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
 export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
+export { default as BarMarker } from './markers/BarMarker.svelte';
+export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
 export { default as DotMarker } from './markers/DotMarker.svelte';
 export { default as HoverMarker } from './markers/HoverMarker.svelte';
+export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
+export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';
 export type { ThemeName } from './configuration/themes';
 export { groupBy, buildSeries } from './utils/grouping';
 export { makeColorScale, normalize, resolveCssColor, paletteColor } from './utils/color';
-export type { AxisValue, AxisScale } from './types/plots/axis';
+export type { AxisValue, AxisScale, AxisBasedScalesConfig } from './types/layout/scales';
 export type { Accessor, Series, SeriesProps, DataProps } from './types/plots/data/common';
-export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, AxisBasedScalesConfig, GeoScalesConfig, ScalesConfig, MarginConfig, TooltipConfig, } from './types/plots/props';
-export type { DeltaConfig, } from './types/plots/delta';
-export type { ValuesStyle, ColorsStyle, BasePlotStyles, } from './types/plots/styles/common';
-export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle } from './types/plots/segments/common';
+export type { BasePlotProps, StylesConfig, MarkersConfig, SegmentsConfig, ScalesConfig, MarginConfig, TooltipConfig, HoverConfig, PointMatchingStrategy, } from './types/plots/props';
+export type { ValuesStyle, ColorsStyle, FrameStyle, FrameProp, BasePlotStylesConfig, GeoStylesConfig, GeoTileLayerConfig, } from './types/layout/styles';
+export type { LineSegmentStyle, BarSegmentStyle, CellSegmentStyle, GeoSegmentStyle, ScatterSegmentStyle } from './types/plots/segments/common';
 export type { Range, Area, Segment } from './types/plots/segments/config';
 export type { ValueAnchor, SymbolType, LineStyle, LineCap, LineJoin, FontWeight, FontStyleKeyword, TextAnchor, LineAnchor, } from './types/plots/constants';
-export type { FontStyle, StrokeStyle, DotStyle } from './types/plots/styling';
-export type { Marker } from './types/markers/common';
+export type { FontStyle, StrokeStyle, DotStyle, AreaStyle } from './types/plots/styling';
+export type { AxisBasedMarkersConfig } from './types/markers/common';
+export type { LineMarkersConfig, DeltaMarkerConfig, DeltaConfig, DeltaTarget } from './types/markers/line';
 export type { MarkerProps } from './types/markers/props';
 export type { GeoFeature, GeoJsonInput, GeoDataProps, Topology } from './types/plots/data/geo';
-export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, } from './types/plots/scales/geo';
-export type { GeoStyles, GeoTileLayerConfig, GeoZoomConfig } from './types/plots/styles/geo';
-export type { GeoMarker, GeoInsetMarker, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
+export type { ScatterDataProps } from './types/plots/data/scatter';
+export type { GeoProjectionName, GeoProjectionConfig, GeoCustomProjection, GeoCustomProjectionFactory, GeoScalesConfig, GeoZoomConfig, CoordinatesConfig, } from './types/layout/coordinates';
+export type { GeoMarkersConfig, GeoInsetMarkerConfig, GeoInsetTooltipConfig, GeoInsetLocation, GeoInsetProjectionName, GeoInsetProjectionConfig, } from './types/markers/geo';
 export type { TimeValue, Orientation, FacetColumns, FacetConfig, TimelineConfig, ChartPlotContext, ChartPlotSnippet, } from './types/charts/common';
 export type { LegendSection, DiscreteLegendSection, ContinuousLegendSection, LegendItem, LegendDisabledStyle, } from './types/charts/legend';
-export type { HoverStrategy, TooltipOptions, TooltipProp, } from './types/layout/tooltip';
+export type { HoverStrategy, TooltipOptions, TooltipProp, TooltipAnchorX, TooltipAnchorY, } from './types/layout/tooltip';
 export type { ChartConfig, ChartConfigInput, TextStyle } from './types/configuration/styling';
 export type { ChartProps } from './types/charts/props';

package/dist/index.js

@@ -4,6 +4,7 @@ export { default as BarPlot } from './plots/bar/Plot.svelte';
 export { default as HeatmapPlot } from './plots/heatmap/Plot.svelte';
 export { default as LinePlot } from './plots/line/Plot.svelte';
 export { default as PyramidPlot } from './plots/pyramid/Plot.svelte';
+export { default as ScatterPlot } from './plots/scatter/Plot.svelte';
 export { default as GeoPlot } from './plots/geo/Plot.svelte';
 // ── Charts ──────────────────────────────────────────────────────────────────
 // High-level, plot-agnostic chrome plus ready-made chart kinds.
@@ -12,23 +13,28 @@ export { default as BarChart } from './charts/bar/Chart.svelte';
 export { default as HeatmapChart } from './charts/heatmap/Chart.svelte';
 export { default as LineChart } from './charts/line/Chart.svelte';
 export { default as PyramidChart } from './charts/pyramid/Chart.svelte';
+export { default as ScatterChart } from './charts/scatter/Chart.svelte';
 // Interchangeable layout primitives (compose your own chart kinds with these).
 export { default as ChartContainer } from './charts/container/ChartContainer.svelte';
 export { default as BasePlotLayout } from './layout/plot/BasePlotLayout.svelte';
-export { default as GeoLayout } from './layout/geo/GeoLayout.svelte';
-export { default as TileLayer } from './plots/geo/TileLayer.svelte';
+export { default as CoordinatesLayout } from './layout/coordinates/CoordinatesLayout.svelte';
+export { default as TileLayer } from './layout/styles/TileLayer.svelte';
 // Custom geo projections — usable as `scales.projection.type`.
-export { argentinaBicontinental } from './plots/geo/projections/argentina';
+export { argentinaBicontinental } from './layout/coordinates/projections/argentina';
 export { default as Timeline } from './layout/timeline/Timeline.svelte';
 export { default as TimelineLayout } from './layout/timeline/TimelineLayout.svelte';
 export { default as FacetLayout } from './layout/facet/FacetLayout.svelte';
 export { default as LegendLayout } from './layout/legend/LegendLayout.svelte';
 export { default as Tooltip } from './layout/tooltip/Tooltip.svelte';
 // Markers
+export { default as BarMarker } from './markers/BarMarker.svelte';
+export { default as CellMarker } from './markers/CellMarker.svelte';
 export { default as DeltaMarker } from './markers/DeltaMarker.svelte';
 export { default as DotMarker } from './markers/DotMarker.svelte';
 export { default as HoverMarker } from './markers/HoverMarker.svelte';
+export { default as LineMarker } from './markers/LineMarker.svelte';
 export { default as PeakMarker } from './markers/PeakMarker.svelte';
+export { default as RuleMarker } from './markers/RuleMarker.svelte';
 export { default as TextMarker } from './markers/TextMarker.svelte';
 export { setConfiguration, getConfiguration, resetConfiguration, configToCssVars, cssVarsStyle, DEFAULT_CONFIG, } from './configuration/config.svelte';
 export { THEMES } from './configuration/themes';

package/dist/layout/coordinates/CoordinatesLayout.svelte

@@ -0,0 +1,95 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import { Plot } from 'svelteplot';
+  import { resolveProjection } from './resolveProjection';
+  import { createGeoZoom } from './zoom.svelte';
+  import { createGeoRotate, type GeoRotate } from './rotate.svelte';
+  import type { CoordinatesConfig } from '../../types/layout/coordinates';
+
+  type SveltePlotProps = ComponentProps<typeof Plot>;
+
+  /**
+   * The Coordinates layer, rendered — resolves the active coordinate system
+   * (today, only a `d3-geo` projection; svelteplot has no other coordinate
+   * abstraction, cartesian is implicit elsewhere) and owns `<Plot>` itself,
+   * since `<Plot projection>` must be known before `<Plot>` mounts — nothing
+   * nested inside it could supply that prop after the fact. Also owns the
+   * pan/zoom/rotate gesture state and applies the resulting transform as a
+   * `<g>` wrapper around `children`. A no-op identity transform, no
+   * projection, for every plot kind but `GeoPlot`.
+   */
+  let {
+    width,
+    height,
+    margin,
+    x,
+    y,
+    coordinates = undefined,
+    data,
+    containerEl,
+    children,
+  }: {
+    width: number;
+    height: number;
+    margin: SveltePlotProps['margin'];
+    x: SveltePlotProps['x'];
+    y: SveltePlotProps['y'];
+    coordinates?: CoordinatesConfig;
+    /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
+    data: TData[];
+    containerEl?: HTMLDivElement;
+    children: Snippet;
+  } = $props();
+
+  const resolvedProjection = $derived(
+    coordinates?.projection ? resolveProjection(coordinates.projection, data) : undefined,
+  );
+
+  const zoomEnabled = $derived(coordinates?.zoom !== false && coordinates?.zoom != null);
+  const zoomConfig = $derived(typeof coordinates?.zoom === 'object' ? coordinates.zoom : undefined);
+
+  /**
+   * Orthographic (and other azimuthal, hemisphere-style) projections don't
+   * gain anything from drag-to-*pan* — panning just slides the same globe a
+   * few pixels within the frame — so when zoom is enabled on one, drag
+   * instead rotates the globe (`createGeoRotate`) and wheel/pinch keeps
+   * scaling it (`createGeoZoom`, with its own drag disabled below so the two
+   * gestures don't fight over the same pointer events).
+   */
+  const projectionType = $derived(
+    typeof resolvedProjection === 'string' ? resolvedProjection : resolvedProjection?.type,
+  );
+  const rotateEnabled = $derived(zoomEnabled && projectionType === 'orthographic');
+  const baseRotate = $derived.by((): GeoRotate => {
+    const configured = typeof resolvedProjection === 'object' ? resolvedProjection?.rotate : undefined;
+    return [configured?.[0] ?? 0, configured?.[1] ?? 0, configured?.[2] ?? 0];
+  });
+
+  const geoZoom = createGeoZoom({
+    enabled: () => zoomEnabled,
+    config: () => zoomConfig,
+    node: () => containerEl ?? null,
+    disableDrag: () => rotateEnabled,
+  });
+
+  const geoRotate = createGeoRotate({
+    enabled: () => rotateEnabled,
+    baseRotate: () => baseRotate,
+    scale: () => geoZoom.transform.k,
+    node: () => containerEl ?? null,
+  });
+
+  const finalProjection = $derived.by(() => {
+    if (!rotateEnabled) return resolvedProjection;
+    return {
+      ...(typeof resolvedProjection === 'string' ? { type: resolvedProjection } : resolvedProjection),
+      rotate: geoRotate.rotate,
+    };
+  });
+</script>
+
+<Plot {width} {height} {margin} {x} {y} projection={finalProjection as SveltePlotProps['projection']}>
+  <g transform="translate({geoZoom.transform.x}, {geoZoom.transform.y}) scale({geoZoom.transform.k})">
+    {@render children()}
+  </g>
+</Plot>

package/dist/layout/{plot/RuleLayout.svelte.d.ts → coordinates/CoordinatesLayout.svelte.d.ts}

@@ -1,19 +1,16 @@
 import type { Snippet } from 'svelte';
-import type { AxisValue } from '../../types/plots/axis';
-import type { Series } from '../../types/plots/data/common';
-import type { Marker } from '../../types/markers/common';
-import type { HoverPoint } from '../../types/layout/tooltip';
+import type { CoordinatesConfig } from '../../types/layout/coordinates';
 declare function $$render<TData extends Record<string, unknown>>(): {
     props: {
-        markers?: Marker[];
-        /** All resolved series, forwarded to unscoped component markers (e.g. DeltaMarker). */
-        seriesData?: Series<TData>[];
-        matchedPoints: HoverPoint<TData>[];
-        ruleX: AxisValue | null;
-        ruleY: AxisValue | null;
-        impliesRuleX: boolean;
-        impliesRuleY: boolean;
-        showHoverLabels?: boolean;
+        width: number;
+        height: number;
+        margin: number | "auto" | import("svelteplot/types/plot.js").PlotMargin | undefined;
+        x: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").XScaleOptions> | undefined;
+        y: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
+        coordinates?: CoordinatesConfig;
+        /** Fed to `resolveProjection`'s `domain: 'data'` sentinel — the same rows `BasePlotLayout` uses for hover matching. */
+        data: TData[];
+        containerEl?: HTMLDivElement;
         children: Snippet;
     };
     exports: {};
@@ -35,6 +32,6 @@ interface $$IsomorphicComponent {
     <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
-declare const RuleLayout: $$IsomorphicComponent;
-type RuleLayout<TData extends Record<string, unknown>> = InstanceType<typeof RuleLayout<TData>>;
-export default RuleLayout;
+declare const CoordinatesLayout: $$IsomorphicComponent;
+type CoordinatesLayout<TData extends Record<string, unknown>> = InstanceType<typeof CoordinatesLayout<TData>>;
+export default CoordinatesLayout;

package/dist/layout/coordinates/margins.d.ts

@@ -0,0 +1,16 @@
+/**
+ * GeoPlot's own margin default — a small, uniform gap on every side, unlike
+ * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
+ * on the left/bottom for y tick labels and an x-axis title). A map has no
+ * axes to make room for, so borrowing that estimate just left GeoPlot with
+ * a lopsided, oversized margin — most visibly a much taller gap under the
+ * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
+ * even though both are meant to read as the same edge gap. Matching this
+ * constant to that 8px inset default keeps the two visually aligned.
+ */
+export declare const GEO_MARGIN_ESTIMATE: {
+    readonly top: 8;
+    readonly right: 8;
+    readonly bottom: 8;
+    readonly left: 8;
+};

package/dist/layout/coordinates/margins.js

@@ -0,0 +1,11 @@
+/**
+ * GeoPlot's own margin default — a small, uniform gap on every side, unlike
+ * `AUTO_MARGIN_ESTIMATE`'s asymmetric axis-tick-label estimate (extra room
+ * on the left/bottom for y tick labels and an x-axis title). A map has no
+ * axes to make room for, so borrowing that estimate just left GeoPlot with
+ * a lopsided, oversized margin — most visibly a much taller gap under the
+ * map than an `inset` marker's own default `margin` (see `insetLayout.ts`),
+ * even though both are meant to read as the same edge gap. Matching this
+ * constant to that 8px inset default keeps the two visually aligned.
+ */
+export const GEO_MARGIN_ESTIMATE = { top: 8, right: 8, bottom: 8, left: 8 };

package/dist/{plots/geo → layout/coordinates}/projections/argentina.d.ts

@@ -1,4 +1,4 @@
-import type { GeoCustomProjectionFactory } from '../../../types/plots/scales/geo';
+import type { GeoCustomProjectionFactory } from '../../../types/layout/coordinates';
 /**
  * Argentina's territory in one unbroken frame: the mainland and the
  * Antarctic/South Atlantic sector both visible, related to each other at