@fundar/data-chart-telling 0.0.14 → 0.0.16

package/README.md

@@ -98,12 +98,13 @@ pnpm build-storybook
 | `HeatmapPlot` | `$lib/plots/heatmap/Plot.svelte` | Grid of colour-coded cells. |
 | `LinePlot` | `$lib/plots/line/Plot.svelte` | Line chart. Supports multiple series and per-series range segments with independent stroke styles. |
 | `PyramidPlot` | `$lib/plots/pyramid/Plot.svelte` | Diverging horizontal bar chart; each series is mirrored left or right of a shared zero baseline. |
+| `GeoPlot` | `$lib/plots/geo/Plot.svelte` | Geographic map rendered from GeoJSON/TopoJSON with optional choropleth styling and interactive markers. |
 
 All components accept explicit `width` and `height` in pixels (svelteplot does not auto-size).
 
 ---
 
-### Plot props
+### Plot props (BarPlot, LinePlot, HeatmapPlot, PyramidPlot)
 
 Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z` flat-rows path — these are mutually exclusive.
 
@@ -116,14 +117,34 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 | `x` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
 | `y` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
 | `z` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
-| `segments` | `Segments<TStyle>` | `[]` | ✅ | ✅ | ✅ | ✅ |
+| `segments` | `SegmentsConfig<TStyle>` | `[]` | ✅ | ✅ | ✅ | ✅ |
 | `markers` | `Marker[]` | `[]` | ✅ | ✅ | ✅ | ✅ |
-| `scales` | `ScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `scales` | `AxisBasedScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
 | `margins` | `MarginConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
-| `tooltip` | `TooltipRuntime` | | ✅ | ✅ | ✅ | ✅ |
-| `styles` | `PlotStyles` | | ✅ | ✅ | ✅ | ✅ |
-
-#### `PlotStyles` sub-properties (plots)
+| `tooltip` | `TooltipConfig` | | ✅ | ✅ | ✅ | ✅ |
+| `styles` | `BasePlotStyles` | | ✅ | ✅ | ✅ | ✅ |
+
+#### GeoPlot props
+
+Unlike x/y plots, `GeoPlot` uses GeoJSON/TopoJSON as its data source (no x/y/z axes). It accepts either a `FeatureCollection`, a `Feature[]`, or a TopoJSON `Topology` (with the `object` key to specify which named object to extract).
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `width` | `number` | — | Plot width in pixels. |
+| `height` | `number` | — | Plot height in pixels. |
+| `data` | `FeatureCollection \| Feature[] \| Topology` | — | GeoJSON (FeatureCollection or Feature array) or TopoJSON Topology. |
+| `object` | `string` | — | Required when `data` is a TopoJSON Topology — the key under `topology.objects` to extract. |
+| `featureId` | `Accessor<GeoFeature, string>` | `feature.id ?? feature.properties?.id ?? feature.properties?.name` | Resolver for each feature's stable id (used for `segments` lookup and hover identification). |
+| `value` | `(feature: GeoFeature) => number \| undefined` | — | Optional continuous accessor for choropleth colouring (mirrors heatmap's `z`). |
+| `excludeParts` | `(part: GeoGeometry, feature: GeoFeature) => boolean` | — | Excludes matching geometry parts from rendering/hover (e.g. for inset markers). Return `true` to exclude. |
+| `segments` | `SegmentsConfig<GeoSegmentStyle>` | `[]` | Per-feature styling (keyed by `featureId`). |
+| `markers` | `GeoMarker[]` | `[]` | Array of markers: `graticule`, `sphere`, `dot`, `vector`, `link`, `contour`, `inset`, or custom `component`. |
+| `scales` | `GeoScalesConfig` | `{}` | Projection and colour scale config. |
+| `margins` | `MarginConfig` | `{}` | Top/right/bottom/left margin overrides. |
+| `tooltip` | `TooltipConfig<GeoFeature>` | — | Hover/click tooltip configuration. |
+| `styles` | `GeoStyles<TProps>` | — | Base map fill, choropleth ramp, tile layer, zoom, and click handlers. |
+
+#### `BasePlotStyles` sub-properties (BarPlot, LinePlot, HeatmapPlot, PyramidPlot)
 
 | Sub-prop | Type | BarPlot default | HeatmapPlot default | LinePlot default | PyramidPlot default |
 | -------- | ---- | --------------- | ------------------- | ---------------- | ------------------- |
@@ -142,6 +163,54 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 | `styles.colors.left` | `string` | — | — | — | palette index 0 |
 | `styles.colors.right` | `string` | — | — | — | palette index 1 |
 
+#### `GeoStyles` sub-properties (GeoPlot)
+
+| Sub-prop | Type | Default | Description |
+| -------- | ---- | ------- | ----------- |
+| `styles.fill` | `string` | palette[0] | Base map fill for features not styled by `segments` or choropleth. |
+| `styles.fillOpacity` | `number` | `1` | Base map fill opacity. |
+| `styles.stroke` | `string` | cfg `axis.color` | Base map feature stroke colour. |
+| `styles.strokeWidth` | `number` | `0.5` | Base map feature stroke width. |
+| `styles.colors.min` | `string` | cfg `continuous.min` | Choropleth ramp minimum colour (when `value` is provided). |
+| `styles.colors.max` | `string` | cfg `continuous.max` | Choropleth ramp maximum colour (when `value` is provided). |
+| `styles.tileLayer` | `GeoTileLayerConfig` | — | XYZ raster basemap config (URL, opacity, zoom range). Mercator-family projections only. |
+| `styles.zoom` | `boolean \| GeoZoomConfig` | `false` | Enable/configure drag-pan + scroll-zoom (`false` = static map). |
+| `styles.onFeatureClick` | `(feature: GeoFeature, event: Event) => void` | — | Click handler for base-map features. |
+
+#### Scales: `AxisBasedScalesConfig` (x/y plots) vs `GeoScalesConfig` (GeoPlot)
+
+X/Y plots use `AxisBasedScalesConfig` with `x`, `y`, `z` axis configurations. GeoPlot uses `GeoScalesConfig` with projection and colour settings instead. `ScalesConfig` is the union of both (`AxisBasedScalesConfig | GeoScalesConfig`) — each plot kind's own `scales` prop narrows to whichever one applies to it.
+
+| Prop | AxisBasedScalesConfig (BarPlot, LinePlot, HeatmapPlot, PyramidPlot) | GeoScalesConfig (GeoPlot) |
+| ---- | ------- | ------- |
+| `x` | ✅ (AxisScale) | ❌ |
+| `y` | ✅ (AxisScale) | ❌ |
+| `z` | ✅ (AxisScale) | ❌ |
+| `projection` | ❌ | ✅ (GeoProjectionConfig) |
+| `color` | ❌ | ✅ (`{ domain?: [number, number] }`) |
+
+#### Props distribution across all plot kinds
+
+| Prop | BarPlot | HeatmapPlot | LinePlot | PyramidPlot | GeoPlot | Notes |
+| ---- | ------- | ----------- | -------- | ----------- | ------- | ----- |
+| `width` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots. |
+| `height` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots. |
+| `segments` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots; GeoPlot uses `SegmentsConfig<GeoSegmentStyle>`, others use their own `SegmentStyle` type. |
+| `markers` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots; GeoPlot uses `GeoMarker[]`, others use `Marker[]`. |
+| `margins` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots. |
+| `tooltip` | ✅ | ✅ | ✅ | ✅ | ✅ | Common to all plots; row type varies per plot. |
+| `styles` | ✅ | ✅ | ✅ | ✅ | ✅ | Common; type is `BasePlotStyles` for x/y plots, `GeoStyles<TProps>` for GeoPlot. |
+| `scales` | ✅ | ✅ | ✅ | ✅ | ✅ | Common; type is `AxisBasedScalesConfig<TData>` for x/y plots, `GeoScalesConfig` for GeoPlot. |
+| `series` | ✅ | ✅ | ✅ | ✅ | ❌ | X/Y plots only (mutually exclusive with `data`/`x`/`y`/`z`). |
+| `data` | ✅ (TData[]) | ✅ (TData[]) | ✅ (TData[]) | ✅ (TData[]) | ✅ (FeatureCollection \| Feature[] \| Topology) | Common; data shape differs — x/y plots use flat rows, GeoPlot uses geo features. |
+| `x` | ✅ | ✅ | ✅ | ✅ | ❌ | X/Y plots only. |
+| `y` | ✅ | ✅ | ✅ | ✅ | ❌ | X/Y plots only. |
+| `z` | ✅ | ✅ | ✅ | ✅ | ❌ | X/Y plots only (used as series selector in bar/line/pyramid, value accessor in heatmap). |
+| `object` | ❌ | ❌ | ❌ | ❌ | ✅ (optional) | GeoPlot only; required when `data` is a TopoJSON Topology. |
+| `featureId` | ❌ | ❌ | ❌ | ❌ | ✅ (optional) | GeoPlot only; resolves feature identity for `segments` lookup and hover. |
+| `value` | ❌ | ❌ | ❌ | ❌ | ✅ (optional) | GeoPlot only; drives choropleth colouring (analogous to heatmap's `z`). |
+| `excludeParts` | ❌ | ❌ | ❌ | ❌ | ✅ (optional) | GeoPlot only; filters geometry parts from rendering. |
+
 ---
 
 ### Chart props
@@ -160,14 +229,14 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 | `header` | `Snippet` | | ✅ | ✅ | ✅ | ✅ |
 | `footer` | `Snippet` | | ✅ | ✅ | ✅ | ✅ |
 | `legend` | `LegendSection[]` | | ✅ | ✅ | ✅ | ✅ |
-| `segments` | `Segments<TStyle>` | `[]` | ✅ | ✅ | ✅ | ✅ |
+| `segments` | `SegmentsConfig<TStyle>` | `[]` | ✅ | ✅ | ✅ | ✅ |
 | `markers` | `Marker[]` | `[]` | ✅ | ✅ | ✅ | ✅ |
-| `scales` | `ScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `scales` | `AxisBasedScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
 | `margins` | `MarginConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
 | `facet` | `FacetConfig` | | ✅ | ✅ | ✅ | ✅ |
 | `timeline` | `TimelineConfig` | | ✅ | ✅ | ✅ | ✅ |
 | `tooltip` | `TooltipProp` | | ✅ | ✅ | ✅ | ✅ |
-| `styles` | `PlotStyles` | | ✅ | ✅ | ✅ | ✅ |
+| `styles` | `BasePlotStyles` | | ✅ | ✅ | ✅ | ✅ |
 
 `header` and `footer` are Svelte 5 snippets that replace the string props when richer markup is needed (custom styles, logos, links, etc.). When `header` is provided it takes full precedence over `title`/`subtitle`; when `footer` is provided it takes full precedence over `caption`. Use the natural snippet syntax:
 
@@ -186,7 +255,7 @@ Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z`
 </LineChart>
 ```
 
-See the [PlotStyles sub-properties table](#plotstyles-sub-properties-plots) above — charts accept the same `styles` shape and pass it through to their underlying plot.  
+See the [BasePlotStyles sub-properties table](#baseplotstyles-sub-properties-barplot-lineplot-heatmapplot-pyramidplot) above — charts accept the same `styles` shape and pass it through to their underlying plot.  
 
 ---
 
@@ -194,12 +263,22 @@ See the [PlotStyles sub-properties table](#plotstyles-sub-properties-plots) abov
 
 The `segments` prop separates data ranges from visual styling. Every plot kind shares the same underlying types; the style shape (`TStyle`) differs per mark.
 
-| Plot | `segments` type |
-| ---- | --------------- |
-| `LinePlot` / `LineChart` | `Segments<LineSegmentStyle>` |
-| `BarPlot` / `BarChart` | `Segments<BarSegmentStyle>` |
-| `PyramidPlot` / `PyramidChart` | `Segments<BarSegmentStyle>` |
-| `HeatmapPlot` / `HeatmapChart` | `Segments<CellSegmentStyle>` (`'default'` key only) |
+| Plot | `segments` type | Key structure | Lookup |
+| ---- | --------------- | ------------- | ------ |
+| `LinePlot` / `LineChart` | `SegmentsConfig<LineSegmentStyle>` | Named keys (series names) or `'default'` | By series name (`z` accessor or series index). |
+| `BarPlot` / `BarChart` | `SegmentsConfig<BarSegmentStyle>` | Named keys (series names) or `'default'` | By series name (`z` accessor or series index). |
+| `PyramidPlot` / `PyramidChart` | `SegmentsConfig<BarSegmentStyle>` | Named keys (series names) or `'default'` | By series name (`z` accessor or series index). |
+| `HeatmapPlot` / `HeatmapChart` | `SegmentsConfig<CellSegmentStyle>` | `'default'` key only | All cells (can be restricted by `areas` coordinates). |
+| `GeoPlot` | `SegmentsConfig<GeoSegmentStyle>` | Named keys (feature ids) or `'default'` | By feature id (`featureId` accessor or derived from properties). |
+
+**Segment styles by plot:**
+
+| SegmentStyle type | Supports | Plot(s) |
+| --- | --- | --- |
+| `LineSegmentStyle` | `stroke` (line), `dots` (endpoint markers) | `LinePlot` / `LineChart` |
+| `BarSegmentStyle` | `fill`, `fillOpacity` | `BarPlot` / `BarChart`, `PyramidPlot` / `PyramidChart` |
+| `CellSegmentStyle` | `fill`, `fillOpacity`, `stroke`, `strokeWidth` | `HeatmapPlot` / `HeatmapChart` |
+| `GeoSegmentStyle` | `fill`, `fillOpacity`, `stroke`, `strokeWidth` | `GeoPlot` |
 
 #### Core types
 
@@ -291,6 +370,31 @@ Having multiple groups lets you organise segments by concern — for example one
 />
 ```
 
+**GeoPlot — per-feature styling and catch-all fallback (note: GeoPlot keys are feature ids, not series names):**
+
+```svelte
+<GeoPlot
+  {width} {height}
+  data={COUNTRIES_GEOJSON}
+  value={(f) => f.properties?.population}
+  segments={[
+    {
+      // Catch-all baseline (always evaluated last)
+      default: [
+        { style: { fillOpacity: 0.7, stroke: '#94a3b8' } },
+      ],
+      // Per-feature overrides (matched by feature id)
+      argentina: [
+        { style: { fill: '#3b82f6', fillOpacity: 0.9 } },
+      ],
+      brazil: [
+        { style: { fill: '#ef4444', fillOpacity: 0.9 } },
+      ],
+    },
+  ]}
+/>
+```
+
 Omitting `segments` (or passing `[]`) renders every mark in its default palette colour.
 
 ---

package/dist/charts/{Chart.svelte → BaseChart.svelte}

@@ -5,6 +5,7 @@
   import LegendLayout from '../layout/legend/LegendLayout.svelte';
   import { getConfiguration } from '../configuration/config.svelte';
   import { provideHover } from '../layout/tooltip/hover.svelte';
+  import { provideLegendInteraction } from '../layout/legend/interaction.svelte';
   import type { Snippet } from 'svelte';
   import type { LegendSection } from '../types/charts/legend';
   import type { HoverStrategy } from '../types/layout/tooltip';
@@ -59,6 +60,7 @@
   const cfg = $derived(getConfiguration());
 
   const hoverStore = provideHover();
+  provideLegendInteraction();
   $effect(() => {
     hoverStore.strategy = hover?.strategy ?? 'x';
     hoverStore.sync = hover?.sync ?? false;

package/dist/charts/{Chart.svelte.d.ts → BaseChart.svelte.d.ts}

@@ -40,6 +40,6 @@ interface $$IsomorphicComponent {
     <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;
+declare const BaseChart: $$IsomorphicComponent;
+type BaseChart<TRow extends Record<string, unknown>> = InstanceType<typeof BaseChart<TRow>>;
+export default BaseChart;

package/dist/charts/bar/Chart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
-  import Chart from '../Chart.svelte';
+  import BaseChart from '../BaseChart.svelte';
   import BarPlot from '../../plots/bar/Plot.svelte';
   import {
     resolveTooltip,
@@ -9,12 +9,12 @@
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { BarSegmentStyle } from '../../types/plots/styles';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
 
   /**
    * High-level bar chart. Groups flat rows by `z` into one series per group
-   * and delegates all chrome to {@link Chart}. Styling lives entirely in
+   * and delegates all chrome to {@link BaseChart}. Styling lives entirely in
    * `segments` — there's no separate colour shorthand, so a series' look is
    * always defined in one place.
    */
@@ -66,7 +66,7 @@
   );
 </script>
 
-<Chart
+<BaseChart
   {width}
   {height}
   {title}
@@ -105,4 +105,4 @@
         : undefined}
     />
   {/snippet}
-</Chart>
+</BaseChart>

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

@@ -1,5 +1,4 @@
-import Chart from '../Chart.svelte';
-import type { BarSegmentStyle } from '../../types/plots/styles';
+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>;

package/dist/charts/heatmap/Chart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
-  import Chart from '../Chart.svelte';
+  import BaseChart from '../BaseChart.svelte';
   import HeatmapPlot from '../../plots/heatmap/Plot.svelte';
   import {
     resolveTooltip,
@@ -8,13 +8,14 @@
     hasHoverMarker
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
-  import type { Accessor, ScalesConfig } from '../../types/plots/common';
-  import type { CellSegmentStyle } from '../../types/plots/styles';
+  import type { Accessor } from '../../types/plots/data/common';
+  import type { AxisBasedScalesConfig } from '../../types/plots/props';
+  import type { CellSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
 
   /**
    * High-level heatmap. Proves the chart chrome (container/legend/timeline/facet)
-   * is plot-agnostic: it reuses {@link Chart} exactly like {@link LineChart}, only
+   * is plot-agnostic: it reuses {@link BaseChart} exactly like {@link LineChart}, only
    * swapping the leaf for {@link HeatmapPlot}. The colour domain is computed once
    * over the full dataset so cells stay comparable across timeline steps/facets —
    * it is passed via `scales.z.domain` and can be overridden by the caller.
@@ -53,7 +54,7 @@
     const vals = data.map((d) => Number(getZ(d)));
     return vals.length ? [Math.min(...vals, 0), Math.max(...vals)] : [0, 1];
   });
-  const mergedScales = $derived<ScalesConfig>({
+  const mergedScales = $derived<AxisBasedScalesConfig<TRow>>({
     ...scales,
     z: { domain: fullDomain, ...(scales.z ?? {}) },
   });
@@ -69,7 +70,7 @@
   });
 </script>
 
-<Chart
+<BaseChart
   {width}
   {height}
   {title}
@@ -108,4 +109,4 @@
         : undefined}
     />
   {/snippet}
-</Chart>
+</BaseChart>

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

@@ -1,6 +1,5 @@
-import Chart from '../Chart.svelte';
-import type { Accessor } from '../../types/plots/common';
-import type { CellSegmentStyle } from '../../types/plots/styles';
+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> & {

package/dist/charts/line/Chart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
-  import Chart from '../Chart.svelte';
+  import BaseChart from '../BaseChart.svelte';
   import LinePlot from '../../plots/line/Plot.svelte';
   import {
     resolveTooltip,
@@ -9,14 +9,14 @@
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { LineSegmentStyle } from '../../types/plots/styles';
+  import type { LineSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
 
   /**
    * High-level line chart. It takes flat rows plus `x`/`y`/`z` encodings, groups
    * by `z` into one line per group, and hands the result to {@link LinePlot}.
    * Everything chrome-related (title, legend, timeline, facets) is delegated to
-   * {@link Chart}; this component only owns the flat-data → line-series adaption.
+   * {@link BaseChart}; this component only owns the flat-data → line-series adaption.
    */
   let {
     width,
@@ -68,7 +68,7 @@
   });
 </script>
 
-<Chart
+<BaseChart
   {width}
   {height}
   {title}
@@ -107,4 +107,4 @@
         : undefined}
     />
   {/snippet}
-</Chart>
+</BaseChart>

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

@@ -1,5 +1,4 @@
-import Chart from '../Chart.svelte';
-import type { LineSegmentStyle } from '../../types/plots/styles';
+import type { LineSegmentStyle } from '../../types/plots/segments/common';
 import type { ChartProps } from '../../types/charts/props';
 declare function $$render<TRow extends Record<string, unknown>>(): {
     props: ChartProps<TRow, LineSegmentStyle>;

package/dist/charts/pyramid/Chart.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="TRow extends Record<string, unknown>">
-  import Chart from '../Chart.svelte';
+  import BaseChart from '../BaseChart.svelte';
   import PyramidPlot from '../../plots/pyramid/Plot.svelte';
   import {
     resolveTooltip,
@@ -9,8 +9,9 @@
   } from '../../layout/tooltip/utils';
   import { resolveAccessor } from '../../plots/utils/accessors';
   import { resolveTimelineInterpolation } from '../../utils/interpolate';
-  import type { Accessor, AxisValue } from '../../types/plots/common';
-  import type { BarSegmentStyle } from '../../types/plots/styles';
+  import type { AxisValue } from '../../types/plots/axis';
+  import type { Accessor } from '../../types/plots/data/common';
+  import type { BarSegmentStyle } from '../../types/plots/segments/common';
   import type { ChartProps } from '../../types/charts/props';
 
   /**
@@ -19,7 +20,7 @@
    * into series and assigns left/right sides automatically from the
    * alphabetical order of `z` values. Pass `scales.z.reverse: true` to flip
    * which side goes first. Delegates all chrome (title, legend, timeline,
-   * facets) to {@link Chart}.
+   * facets) to {@link BaseChart}.
    */
   let {
     width,
@@ -89,7 +90,7 @@
   );
 </script>
 
-<Chart
+<BaseChart
   {width}
   {height}
   {title}
@@ -128,4 +129,4 @@
         : undefined}
     />
   {/snippet}
-</Chart>
+</BaseChart>

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

@@ -1,6 +1,5 @@
-import Chart from '../Chart.svelte';
-import type { Accessor } from '../../types/plots/common';
-import type { BarSegmentStyle } from '../../types/plots/styles';
+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> & {

package/dist/configuration/config.svelte.js

@@ -46,6 +46,7 @@ export const DEFAULT_CONFIG = {
         titleWeight: 500,
         gap: '0.5rem 2rem',
         swatchSize: '1.25rem',
+        disabledOpacity: 0.12,
     },
     axis: {
         color: 'currentColor',
@@ -66,7 +67,7 @@ export const DEFAULT_CONFIG = {
         radius: '0.375rem',
         border: 'none',
     },
-    margins: { top: 30, right: 50, bottom: 30, left: 40 },
+    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 },