@fundar/data-chart-telling 0.0.63 → 1.0.0

package/examples/TimelinePlayer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { BarPlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!--
+	`timeline` slices the rows by `accessor`. A timeline is a player by default:
+	play/pause, the current step and a slider in the chrome. `type: 'rule'`
+	draws a guide beside the plot with no controls instead. To build your own
+	widget, read `useFigure().timeline` (seek, play, pause, next, ...).
+-->
+<BarPlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="region"
+	y="value"
+	scales={{ y: { domain: [0, 200] } }}
+	timeline={{ accessor: 'year', player: { autoplay: false, loop: true } }}
+/>

package/examples/Tooltip.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { LinePlot } from '@fundar/data-chart-telling';
+	import { ROWS } from './data';
+</script>
+
+<!--
+	`tooltip` turns the floating box on (`true` for the defaults, or an object
+	to tune it); a `hover` marker draws the in-plot crosshair, dot and label.
+-->
+<LinePlot
+	width={720}
+	height={400}
+	data={ROWS}
+	x="year"
+	y="value"
+	color="region"
+	tooltip={{ strategy: 'x', format: (row) => `${row.region}: ${row.value}` }}
+	markers={[{ type: 'hover' }]}
+/>

package/examples/TooltipCard.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	type Entry = { label: string; color: string; value: number; display: string };
+
+	let { heading, entries, footer }: { heading: string; entries: Entry[]; footer: string } =
+		$props();
+</script>
+
+<div class="rich-tooltip">
+	<div class="rich-tooltip__header">{heading}</div>
+	<div class="rich-tooltip__body">
+		{#each entries as entry (entry.label)}
+			<div class="rich-tooltip__row">
+				<span class="rich-tooltip__label">
+					<span class="rich-tooltip__swatch" style:background={entry.color}></span>
+					{entry.label}
+				</span>
+				<span class="rich-tooltip__value">{entry.display}</span>
+			</div>
+		{/each}
+	</div>
+	<div class="rich-tooltip__footer">{footer}</div>
+</div>
+
+<style>
+	.rich-tooltip {
+		min-width: 200px;
+		background: #fff;
+		color: #1f2937;
+		border-radius: 0.75rem;
+		overflow: hidden;
+		font-family: ui-sans-serif, system-ui, sans-serif;
+	}
+
+	.rich-tooltip__header {
+		padding: 0.6rem 0.9rem;
+		font-weight: 700;
+		font-size: 1rem;
+		text-transform: capitalize;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+	}
+
+	.rich-tooltip__body {
+		padding: 0.2rem 0.9rem;
+	}
+
+	.rich-tooltip__row {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 1.5rem;
+		padding: 0.35rem 0;
+		font-size: 0.85rem;
+		border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
+	}
+
+	.rich-tooltip__row:last-child {
+		border-bottom: none;
+	}
+
+	.rich-tooltip__label {
+		display: flex;
+		align-items: center;
+		gap: 0.45rem;
+	}
+
+	.rich-tooltip__swatch {
+		width: 0.65rem;
+		height: 0.65rem;
+		border-radius: 2px;
+		flex-shrink: 0;
+	}
+
+	.rich-tooltip__value {
+		font-weight: 700;
+		font-variant-numeric: tabular-nums;
+	}
+
+	.rich-tooltip__footer {
+		padding: 0.45rem 0.9rem;
+		font-size: 0.7rem;
+		font-style: italic;
+		color: rgba(0, 0, 0, 0.5);
+		border-top: 1px solid rgba(0, 0, 0, 0.08);
+		background: rgba(0, 0, 0, 0.02);
+	}
+</style>

package/examples/data.ts

@@ -0,0 +1,12 @@
+export type Row = { year: number; region: string; value: number };
+
+const REGIONS = ['North', 'Center', 'South'];
+
+/** Tiny deterministic dataset shared by the examples: one value per region and year. */
+export const ROWS: Row[] = REGIONS.flatMap((region, r) =>
+	Array.from({ length: 8 }, (_, i) => ({
+		year: 2016 + i,
+		region,
+		value: 100 + (r + 1) * 4 * i + (i % 3) * 2
+	}))
+);

package/llms-full.txt

@@ -0,0 +1,114 @@
+# @fundar/data-chart-telling - guide for LLMs and coding agents
+
+Svelte 5 plot components on top of svelteplot. This file is checked against the source; the runnable files in `examples/` are type-checked and mounted by the test suite, and `docs/` has one page per topic. If this text and `dist/**/*.d.ts` differ, the types are right - tell the user.
+
+## Setup
+
+- Peer dependencies: `svelte@^5`, `svelteplot@^0.14`; `topojson-client` only for GeoPlot with TopoJSON.
+- The package ships Svelte components, so the app builds with `@sveltejs/vite-plugin-svelte` or SvelteKit.
+- Import from the package root: `import { LinePlot } from '@fundar/data-chart-telling'`.
+- Types ship with the package (`dist/index.d.ts`, JSDoc on every config field).
+
+## The mental model
+
+- A **plot** is one graph (axes + marks). Titles, subtitle, caption, legend, facets and a timeline are props of the plot itself.
+- Plots: `LinePlot AreaPlot BarPlot HistogramPlot HeatmapPlot PyramidPlot ScatterPlot GeoPlot`.
+- `PlotComposer` lays several plots out in one figure with shared hover, legend and timeline.
+- `width` and `height` are pixel numbers on a standalone plot. To fill a container or the window, bind its size (`examples/ResponsiveLine.svelte`) and render the plot once both are > 0.
+
+## Data
+
+Two ways to give data, one per plot:
+
+```svelte
+<LinePlot data={rows} x="year" y="value" color="region" {width} {height} />
+<LinePlot series={[{ name: 'North', x: 'year', y: 'value', data: rowsNorth }]} {width} {height} />
+```
+
+- `x`, `y`, `color`, `grouping`, `opacity`, `symbol`, `r`, `length` take a field name or an accessor function.
+- `grouping` splits `data` into series. When unset, `color` groups too, so the usual call is `color="region"`: one series per region, each with its own color.
+- Dates are `Date` objects (UTC midnight avoids timezone shifts); numeric years are numbers.
+- Rows are parsed, typed and sorted by the app before they reach the plot (a `?raw` CSV import plus a small parser is enough).
+- A series' name is what the legend, value labels and tooltip show: name values in the data.
+
+## Props of every x/y plot
+
+| Prop | Purpose |
+| --- | --- |
+| `title` `subtitle` `caption` | Text chrome. `header` / `footer` snippets replace title+subtitle / caption. |
+| `legend` | unset/`true`: automatic legend; `false`: none; `{ series: { interactive: { enabled: true, disabled: { mode: 'omit' } } } }` adjusts a section. |
+| `order` | Chrome blocks top to bottom, e.g. `['title','subtitle','legend','plot','caption']`; rows as `'(plot, timeline)'`; `'divider'` between blocks. |
+| `scales` | Per channel: `{ x: { label, tickFormat, domain, type, ticks, grid }, y: {...}, color: { scheme, domain } }`. |
+| `styles` | `{ values: {...}, frame: true, gaps: {...} }` (shape depends on the kind). |
+| `segments` | Style ranges of the data (rule 1 below). |
+| `markers` | Extra marks, an array of `{ type: '...', ... }`. |
+| `margins` | `{ top, right, bottom, left }`, each a number or `'auto'` (all `'auto'` by default). |
+| `tooltip` | `true` or `{ strategy, sync, format, content, series, anchorX, anchorY }`. |
+| `timeline` | `{ accessor: 'year' }` steps through the rows by a field, drawn as a player bar (default); `type: 'rule'` draws a rule beside the plot instead. |
+| `facet` | `{ by: 'field', columns, gap, scales: 'shared'\|'free', mode: 'grid'\|'carousel'\|'paginated' }` or `{ rows, cols }`. |
+| `transforms` `statistics` | svelteplot transforms / derived summaries (regression, movingAverage, ...). |
+
+Per kind: `BarPlot` x = category, y = value (swap for horizontal bars); `PyramidPlot` mirrors two series around zero; `HeatmapPlot` colors cells by `color`; `HistogramPlot` bins one numeric field; `ScatterPlot` takes `r` (size) and `symbol`; `GeoPlot` takes GeoJSON/TopoJSON in `data` and `coordinates` for the projection (`docs/geo.md`).
+
+## Switches
+
+- **Hover and tooltip** are enabled by `tooltip` and/or a hover marker. The usual look: `tooltip={true} markers={[{ type: 'hover' }]}`. `tooltip.strategy` is `'x' | 'y' | 'punctual' | 'series'`.
+- **Value labels**: `styles={{ values: { show: true } }}`. On a LinePlot they sit at the end of each series, spread apart automatically, and the right margin grows to fit them (keep `margins.right` at `'auto'`). Format with `values.format: (value, seriesName) => string`; style with `values.fontStyle`.
+- **Toggling series from the legend**: `interactive.enabled` on the series section.
+- **A frame** around the plot area: `styles={{ frame: true }}`.
+
+## Rules that matter
+
+1. `segments` is an object keyed by series name or `'default'`: `{ default: [{ areas: [{ x: { from, to } }], styles: { stroke: { strokeDasharray: '6 4' } } }] }`. A segment without `areas` is a baseline for everything; area-specific segments override it.
+2. The global configuration holds data (`setConfiguration(...)` is cloned); functions go in plot props such as `format` and `tickFormat`.
+3. A continuous color ramp is `scales.color.scheme: [colorA, colorB]` (or a named ramp such as `'blues'`); categorical colors come from `palette` or a `scheme` record.
+4. `margins` at `'auto'` (the default) fit value labels and long tick text from the measured text, also when `scales.y.domain` is pinned. A fixed number sets the side exactly.
+5. `tooltip.sync: true` in a `facet` or `PlotComposer` shows the highlight in every panel: that is how panels compare the same x.
+6. On a BarPlot the tooltip triggers anywhere over a bar's whole band (and its series' slice, when grouped).
+7. `r` takes raw values and its sqrt scale makes area follow the value; tune with `scales.r.range`. A literal number is a fixed pixel radius.
+8. Narrow plots with long category or series names: shorten the text in the data, format with `tickFormat` / `values.format`, or give `margins` more room.
+9. In Svelte 5 components, `state` is taken by the `$state` rune: name local variables otherwise.
+10. Stacking is `transforms={[{ type: 'stackY' }]}`, also for horizontal bars (the value channel is the one stacked).
+
+## Reading and driving plot state (custom UI)
+
+Inside a plot's snippets (`header`, `footer`, tooltip `content`) or any child of a figure, call during component init:
+
+- `useFigure()` returns `{ hover, legend, timeline }` for the whole figure.
+- `usePlot()` returns the same plus `margins`, `scales`, `axes`, `data`, `width`, `height`, `svelteplot` (inside a plot, e.g. a `component` marker).
+- `legend.off` (names of hidden series), `legend.isOff(name)`, `legend.toggle(name, action)`, `turnOff`, `turnOn`. `action` is `{ mode: 'dim' | 'hide' | 'omit' }`; `'omit'` removes the series and refits the axes, so the visible domain follows `legend.off`.
+- `timeline.steps`, `value`, `progress`, `playing`, `seek(p)`, `seekValue(v)`, `next()`, `previous()`, `play()`, `pause()`, `toggle()`, `setSpeed()`.
+- `hover.activeX`, `activeY`, `activeSeries`, `source`.
+
+The timeline is a player bar by default: `timeline={{ accessor: 'year', player: { controls: ['play','value','slider','speed','loop'], format, autoplay, loop, speed, stepDuration } }}`. `type: 'rule'` draws a guide beside the plot instead, driven by `progress` (a slider or scroll position of your own).
+
+## Markers
+
+Add with `markers={[{ type: '...' }]}`. For x/y plots:
+`area arrow bar bollinger box brush cell component delaunayLink delaunayMesh delta density difference dot hover hull image line raster rect regression rule text tick trail voronoi voronoiMesh waffle`.
+GeoPlot: `graticule sphere dot text vector link contour inset geo-hover geo-component`.
+
+- `delta` annotates the difference between two series at a position: `{ type: 'delta', axis: 'x', at: 2020, from: { type: 'series', series: 'A' }, to: { type: 'series', series: 'B' }, formatDiff: (d) => d.toFixed(1) }`.
+- `rule` (`axis`, `value`), `text` (`text`), `dot` annotate; `component` mounts your own Svelte component inside the plot (it can call `usePlot()`).
+- Each plot kind types its own marker union (`AxisBasedMarkersConfig`, `GeoMarkersConfig`); `satisfies` on a markers array gives completion.
+
+## Theming and locale
+
+- `setConfiguration(partial)` deep-merges global defaults (colors, fonts, spacing, legend, tooltip, timeline); `resetConfiguration()` restores them. Inside an `$effect`, wrap the call in `untrack`.
+- `THEMES` has `Default Editorial Dark Compact`: `setConfiguration(THEMES.Editorial)`.
+- Number and date text follows `axis.locale` (default `'es-AR'`) in the configuration; per axis, `tickFormat: (d) => new Intl.NumberFormat('en-US').format(d)` or an `Intl.*FormatOptions` object.
+
+## Docs (in `docs/`)
+
+`getting-started.md`, `concepts.md`, `plots.md`, `scales.md`, `styles-and-segments.md`, `markers.md`, `transforms-and-statistics.md`, `tooltip-and-hover.md`, `legend.md`, `timeline.md`, `chrome.md`, `facets.md`, `composer.md`, `state.md`, `geo.md`, `theming.md`.
+
+## Examples (in `examples/`, all runnable)
+
+- `ResponsiveLine.svelte` - fill the window, end-of-line labels, axis labels.
+- `Tooltip.svelte` - tooltip + hover marker.
+- `Segments.svelte` - styling a range of the data.
+- `LegendToggle.svelte` + `LegendReader.svelte` - interactive legend and reading its state.
+- `TimelinePlayer.svelte` - animated bar chart with a player.
+- `Facets.svelte` - small multiples with a synced tooltip.
+- `BarValues.svelte` - value labels on bars.
+- `CustomTooltip.svelte` + `TooltipCard.svelte` - a tooltip drawn with your own card (`tooltip.content`).

package/llms.txt

@@ -0,0 +1,49 @@
+# @fundar/data-chart-telling
+
+> Svelte 5 plot components (line, area, bar, histogram, heatmap, pyramid, scatter, geo) built on svelteplot, with titles, legends, tooltips, facets, timelines and value labels built in. Plots take pixel `width`/`height`; hover and tooltips are switched on with `tooltip` and a `hover` marker.
+
+Start with the full guide: it lists the mental model, the props every plot shares, the switches and the rules that matter. Runnable examples are type-checked, so copy them as a starting point.
+
+## Guide
+
+- [Full guide](./llms-full.txt): API overview, switches, rules, state hooks (`useFigure`, `usePlot`), markers, theming
+
+## Docs
+
+- [Getting started](./docs/getting-started.md): install, first plot, sizing, data
+- [Concepts](./docs/concepts.md): plots, figures, rows and series, channels, shared props
+- [Plots](./docs/plots.md): the eight plot kinds
+- [Scales](./docs/scales.md): axes and channel scales
+- [Styles and segments](./docs/styles-and-segments.md): value labels, frame, gaps, ranges of data
+- [Markers](./docs/markers.md): annotations, regions, hover highlight, custom components
+- [Transforms and statistics](./docs/transforms-and-statistics.md): stacking, binning, smoothing, regression
+- [Tooltip and hover](./docs/tooltip-and-hover.md): tooltip options, hover marker, sync
+- [Legend](./docs/legend.md): automatic legend, toggling series, sections
+- [Timeline](./docs/timeline.md): player (default) and rule
+- [Chrome](./docs/chrome.md): title, caption, header, footer, order, dividers
+- [Facets](./docs/facets.md): small multiples
+- [Composer](./docs/composer.md): several plots in one figure
+- [Reading plot state](./docs/state.md): `useFigure`, `usePlot`
+- [Maps](./docs/geo.md): GeoPlot, projections, camera, map markers
+- [Theming](./docs/theming.md): configuration, themes, locale, CSS variables
+
+## Examples
+
+- [Responsive line chart with end labels](./examples/ResponsiveLine.svelte)
+- [Tooltip and hover marker](./examples/Tooltip.svelte)
+- [Segments (styling a range of data)](./examples/Segments.svelte)
+- [Interactive legend and reading its state](./examples/LegendToggle.svelte)
+- [Timeline player](./examples/TimelinePlayer.svelte)
+- [Facets with a synced tooltip](./examples/Facets.svelte)
+- [Bars with value labels](./examples/BarValues.svelte)
+- [Custom tooltip card](./examples/CustomTooltip.svelte)
+- [Shared example data](./examples/data.ts)
+
+## Types
+
+- [Public exports](./dist/index.d.ts): every config type, with JSDoc on each field
+
+## Optional
+
+- [README](./README.md): overview and documentation index
+- [Package manifest](./package.json): peer dependencies (`svelte`, `svelteplot`, optional `topojson-client`)

package/package.json

@@ -1,9 +1,33 @@
 {
   "name": "@fundar/data-chart-telling",
-  "version": "0.0.63",
+  "version": "1.0.0",
+  "description": "Declarative charts, maps and small multiples for Svelte, built on svelteplot.",
+  "license": "MIT",
+  "author": "Ezequiel Puerta",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/datos-Fundar/data-chart-telling.git"
+  },
+  "homepage": "https://github.com/datos-Fundar/data-chart-telling#readme",
+  "bugs": {
+    "url": "https://github.com/datos-Fundar/data-chart-telling/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.19"
+  },
   "type": "module",
   "files": [
-    "dist"
+    "LICENSE",
+    "CHANGELOG.md",
+    "dist",
+    "docs",
+    "!docs/images",
+    "examples",
+    "llms.txt",
+    "llms-full.txt"
   ],
   "sideEffects": [
     "**/*.css"
@@ -19,8 +43,10 @@
   },
   "dependencies": {
     "@types/geojson": "^7946.0.16",
+    "d3-array": "^3.2.4",
     "d3-geo": "^3.1.1",
     "d3-interpolate": "^3.0.1",
+    "d3-scale-chromatic": "^3.1.0",
     "d3-selection": "^3.0.0",
     "d3-zoom": "^3.0.0"
   },
@@ -45,8 +71,10 @@
     "@storybook/svelte-vite": "^10.4.1",
     "@sveltejs/package": "^2.5.7",
     "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@types/d3-array": "^3.2.2",
     "@types/d3-geo": "^3.1.0",
     "@types/d3-interpolate": "^3.0.4",
+    "@types/d3-scale-chromatic": "^3.1.0",
     "@types/d3-selection": "^3.0.11",
     "@types/d3-zoom": "^3.0.8",
     "@types/node": "^22",
@@ -58,8 +86,9 @@
     "eslint-plugin-storybook": "^10.4.1",
     "eslint-plugin-svelte": "^3.17.0",
     "globals": "^17.4.0",
+    "husky": "^9.1.7",
     "knip": "^6.32.1",
-    "playwright": "^1.60.0",
+    "playwright": "^1.64.0",
     "prettier": "^3.8.1",
     "prettier-plugin-svelte": "^3.5.1",
     "publint": "^0.3.18",
@@ -75,7 +104,12 @@
     "vitest-browser-svelte": "^2.1.1"
   },
   "keywords": [
-    "svelte"
+    "svelte",
+    "svelteplot",
+    "charts",
+    "data-visualization",
+    "maps",
+    "small-multiples"
   ],
   "scripts": {
     "build": "svelte-package",
@@ -85,8 +119,10 @@
     "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "test": "vitest run --project=unit --project=browser",
+    "test:coverage": "node scripts/coverage.mjs",
     "test:stories": "vitest run --project=storybook",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "docs:images": "node scripts/docs-images.mjs"
   }
 }

package/dist/charts/BaseChart.svelte

@@ -1,149 +0,0 @@
-<script lang="ts" generics="TRow extends Record<string, unknown>">
-  import ChartContainer from './container/ChartContainer.svelte';
-  import TimelineLayout from '../layout/timeline/TimelineLayout.svelte';
-  import FacetLayout from '../layout/facet/FacetLayout.svelte';
-  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/layout/legend';
-  import type { HoverStrategy } from '../types/layout/tooltip';
-  import type { ChartPlotSnippet } from '../types/charts/common';
-  import type { FacetConfig } from '../types/layout/facet';
-  import type { TimeValue, TimelineConfig } from '../types/layout/timeline';
-
-  /**
-   * The orchestrator. It wires together the four interchangeable layout
-   * primitives — container, timeline, facet, legend — around a single leaf
-   * `plot` snippet. The composition order is fixed and meaningful:
-   *
-   *   container ▸ timeline (one shared scrubber) ▸ facet (split per small-multiple) ▸ plot
-   *
-   * The leaf snippet receives `{ data, width, height, facetValue?, selectedValue?,
-   * margins? }` and knows nothing about how that box or that data slice was
-   * produced, which is what lets any plot (line, bar, heatmap, …) drop in
-   * unchanged. `margins` only has a side set when `facet.marginsForFacet`
-   * reports it — forward it to the plot's own `margins` prop so every facet
-   * shares the same content box on that side.
-   */
-  let {
-    width,
-    height,
-    title,
-    subtitle,
-    caption,
-    legend,
-    header,
-    footer,
-    data,
-    facet,
-    timeline,
-    hover,
-    plot,
-  }: {
-    width: number;
-    height: number;
-    title?: string;
-    subtitle?: string;
-    caption?: string;
-    legend?: LegendSection[];
-    header?: Snippet;
-    footer?: Snippet;
-    data: TRow[];
-    facet?: FacetConfig<TRow>;
-    timeline?: TimelineConfig<TRow>;
-    hover?: { strategy: HoverStrategy; sync: boolean };
-    plot: ChartPlotSnippet<TRow>;
-  } = $props();
-
-  const cfg = $derived(getConfiguration());
-
-  const hoverStore = provideHover();
-  const legendInteraction = provideLegendInteraction();
-  const legendPlotContext = $derived({
-    disabledSeries: new Set(legendInteraction.disabledSeries.keys()),
-    isDisabled: (name: string) => legendInteraction.disabledSeries.has(name),
-  });
-  $effect(() => {
-    hoverStore.strategy = hover?.strategy ?? 'x';
-    hoverStore.sync = hover?.sync ?? false;
-  });
-</script>
-
-{#snippet body(rows: TRow[], w: number, h: number, selectedValue: TimeValue | undefined)}
-  {#if facet}
-    <FacetLayout
-      data={rows}
-      by={facet.by}
-      columns={facet.columns}
-      values={facet.values}
-      gap={facet.gap}
-      mode={facet.mode}
-      visible={facet.visible}
-      pageSize={facet.pageSize}
-      navLayout={facet.navLayout}
-      formatIndicator={facet.formatIndicator}
-      indicator={facet.indicator}
-      navButton={facet.navButton}
-      marginsForFacet={facet.marginsForFacet}
-      width={w}
-      height={h}
-    >
-      {#snippet cell({ facetValue, data: cellData, width: cw, height: ch, margins })}
-        {@render plot({
-          data: cellData,
-          width: cw,
-          height: ch,
-          facetValue,
-          selectedValue,
-          legend: legendPlotContext,
-          margins
-        })}
-      {/snippet}
-    </FacetLayout>
-  {:else}
-    {@render plot({ data: rows, width: w, height: h, selectedValue, legend: legendPlotContext })}
-  {/if}
-{/snippet}
-
-{#snippet legendSnippet()}
-  {#if legend && legend.length > 0}
-    <LegendLayout sections={legend} />
-  {/if}
-{/snippet}
-
-<ChartContainer
-  {width}
-  {height}
-  {title}
-  {subtitle}
-  {caption}
-  {header}
-  {footer}
-  legend={legend && legend.length > 0 ? legendSnippet : undefined}
->
-  {#snippet plot({ width: w, height: h })}
-    {#if timeline}
-      <TimelineLayout
-        {data}
-        accessor={timeline.accessor}
-        progress={timeline.progress}
-        values={timeline.values}
-        orientation={timeline.orientation}
-        show={timeline.show}
-        thickness={timeline.thickness ?? cfg.timeline.thickness}
-        filterMode={timeline.filterMode}
-        interpolate={typeof timeline.interpolate === 'object' ? timeline.interpolate : undefined}
-        width={w}
-        height={h}
-      >
-        {#snippet child({ selectedValue, data: tData, width: tw, height: th })}
-          {@render body(tData, tw, th, selectedValue)}
-        {/snippet}
-      </TimelineLayout>
-    {:else}
-      {@render body(data, w, h, undefined)}
-    {/if}
-  {/snippet}
-</ChartContainer>

package/dist/charts/BaseChart.svelte.d.ts

@@ -1,47 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { LegendSection } from '../types/layout/legend';
-import type { HoverStrategy } from '../types/layout/tooltip';
-import type { ChartPlotSnippet } from '../types/charts/common';
-import type { FacetConfig } from '../types/layout/facet';
-import type { TimelineConfig } from '../types/layout/timeline';
-declare function $$render<TRow extends Record<string, unknown>>(): {
-    props: {
-        width: number;
-        height: number;
-        title?: string;
-        subtitle?: string;
-        caption?: string;
-        legend?: LegendSection[];
-        header?: Snippet;
-        footer?: Snippet;
-        data: TRow[];
-        facet?: FacetConfig<TRow>;
-        timeline?: TimelineConfig<TRow>;
-        hover?: {
-            strategy: HoverStrategy;
-            sync: boolean;
-        };
-        plot: ChartPlotSnippet<TRow>;
-    };
-    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 BaseChart: $$IsomorphicComponent;
-type BaseChart<TRow extends Record<string, unknown>> = InstanceType<typeof BaseChart<TRow>>;
-export default BaseChart;