@fundar/data-chart-telling 0.0.1

package/README.md

@@ -0,0 +1,250 @@
+# data-chart-telling
+
+A Svelte 5 component library for building data visualisation charts, built on top of [svelteplot](https://svelteplot.dev). It provides low-level **plot** primitives (single graphs) and will grow to include higher-level **chart** compositions with titles, legends, facets, and timelines.
+
+---
+
+## Build & publish
+
+After making changes, rebuild the package distributable:
+
+```bash
+pnpm build
+```
+
+`prepack` runs `svelte-package` followed by `publint` automatically before packing, so a publish will always ship a clean build:
+
+```bash
+# dry-run — inspect what will be uploaded
+pnpm pack
+
+# publish to the npm registry
+pnpm publish --access public
+```
+
+> Bump `version` in `package.json` before each publish.
+
+---
+
+## Tests
+
+### Unit tests (node)
+
+Pure logic tests — no browser required.
+
+```bash
+pnpm test
+```
+
+This runs both the **node unit** project and the **browser component** project (Chromium via Playwright).
+
+To run only the node unit tests:
+
+```bash
+pnpm vitest run --project=unit
+```
+
+To run only the browser component tests:
+
+```bash
+pnpm vitest run --project=browser
+```
+
+### Storybook interaction tests
+
+Run stories as Vitest tests (requires Storybook to boot internally):
+
+```bash
+pnpm test:stories
+```
+
+---
+
+## Storybook
+
+Serve the component explorer locally:
+
+```bash
+pnpm storybook
+# → http://localhost:6006
+```
+
+Build a static Storybook for deployment:
+
+```bash
+pnpm build-storybook
+```
+
+---
+
+## Chart types
+
+> **Vocabulary**: a _plot_ is a single graph (axes + marks). A _chart_ wraps a plot with a title, caption, legend, facets, and/or a timeline.
+
+### Charts
+
+| Component | Import path | Description |
+| --- | --- | --- |
+| `BarChart` | `$lib/charts/bar/Chart.svelte` | Vertical bar chart with title/caption/legend/facet/timeline chrome. |
+| `HeatmapChart` | `$lib/charts/heatmap/Chart.svelte` | Grid of colour-coded cells. Colour domain is computed over the full dataset for cross-facet comparability. |
+| `LineChart` | `$lib/charts/line/Chart.svelte` | Line chart. Default timeline mode is `upTo` (cumulative reveal). |
+| `PyramidChart` | `$lib/charts/pyramid/Chart.svelte` | Population-pyramid-style diverging bar chart with a shared zero baseline. |
+
+### Plots
+
+| Component | Import path | Description |
+| --- | --- | --- |
+| `BarPlot` | `$lib/plots/bar/Plot.svelte` | Vertical bar chart. Supports multiple series and per-series range segments. |
+| `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. |
+
+All components accept explicit `width` and `height` in pixels (svelteplot does not auto-size).
+
+---
+
+### Plot props
+
+Plots accept either `series` (pre-built `Series[]`) or the `data` + `x`/`y`/`z` flat-rows path — these are mutually exclusive.
+
+| Prop | Type | Default | BarPlot | HeatmapPlot | LinePlot | PyramidPlot |
+| ---- | ---- | ------- | ------- | ----------- | -------- | ----------- |
+| `width` | `number` | — | ✅ | ✅ | ✅ | ✅ |
+| `height` | `number` | — | ✅ | ✅ | ✅ | ✅ |
+| `series` | `Series[]` | — | ✅ | ✅ | ✅ | ✅ |
+| `data` | `TData[]` | — | ✅ | ✅ | ✅ | ✅ |
+| `x` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `y` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `z` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `segments` | `SegmentsMap<TStyle>` | `{}` / `[]` | ✅ | ✅ | ✅ | ✅ |
+| `markers` | `Marker[]` | `[]` | ✅ | ✅ | ✅ | ✅ |
+| `scales` | `ScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `margins` | `MarginConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `tooltip` | `TooltipRuntime` | | ✅ | ✅ | ✅ | ✅ |
+| `styles` | `PlotStyles` | | ✅ | ✅ | ✅ | ✅ |
+
+#### `PlotStyles` sub-properties (plots)
+
+| Sub-prop | Type | BarPlot default | HeatmapPlot default | LinePlot default | PyramidPlot default |
+| -------- | ---- | --------------- | ------------------- | ---------------- | ------------------- |
+| `styles.values.show` | `boolean` | `false` | `true` | `false` (last point) | `false` |
+| `styles.values.format` | `(v: number, seriesName: string) => string` | `v => \`${v}\`` | `v => \`${v}\`` | `(v, name) => \`${name} - ${v}\`` | `v => \`${v}\`` |
+| `styles.values.anchor` | `'outside' \| 'start' \| 'middle' \| 'end'` | `'outside'` | — | `'start'` | `'outside'` |
+| `styles.values.dx` | `number` | | | | |
+| `styles.values.dy` | `number` | | | | |
+| `styles.values.textAnchor` | `'start' \| 'end' \| 'middle'` | | `'middle'` | | |
+| `styles.values.lineAnchor` | `'top' \| 'bottom' \| 'middle'` | | `'middle'` | | |
+| `styles.values.rotate` | `number` | | | | |
+| `styles.values.class` | `string` | | | | |
+| `styles.values.textClass` | `string` | | | | |
+| `styles.colors.min` | `string` | — | cfg `continuous.min` | — | — |
+| `styles.colors.max` | `string` | — | cfg `continuous.max` | — | — |
+| `styles.colors.left` | `string` | — | — | — | palette index 0 |
+| `styles.colors.right` | `string` | — | — | — | palette index 1 |
+
+---
+
+### Chart props
+
+| Prop | Type | Default | BarChart | HeatmapChart | LineChart | PyramidChart |
+| ---- | ---- | ------- | -------- | ------------ | --------- | ------------ |
+| `width` | `number` | — | ✅ | ✅ | ✅ | ✅ |
+| `height` | `number` | — | ✅ | ✅ | ✅ | ✅ |
+| `data` | `TRow[]` | — | ✅ | ✅ | ✅ | ✅ |
+| `x` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `y` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `z` | `Accessor` | — | ✅ | ✅ | ✅ | ✅ |
+| `title` | `string` | | ✅ | ✅ | ✅ | ✅ |
+| `subtitle` | `string` | | ✅ | ✅ | ✅ | ✅ |
+| `caption` | `string` | | ✅ | ✅ | ✅ | ✅ |
+| `legend` | `LegendSection[]` | | ✅ | ✅ | ✅ | ✅ |
+| `segments` | `SegmentsMap<TStyle>` | `{}` / `[]` | ✅ | ✅ | ✅ | ✅ |
+| `markers` | `Marker[]` | `[]` | ✅ | ✅ | ✅ | ✅ |
+| `scales` | `ScalesConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `margins` | `MarginConfig` | `{}` | ✅ | ✅ | ✅ | ✅ |
+| `facet` | `FacetConfig` | | ✅ | ✅ | ✅ | ✅ |
+| `timeline` | `TimelineConfig` | | ✅ | ✅ | ✅ | ✅ |
+| `tooltip` | `TooltipProp` | | ✅ | ✅ | ✅ | ✅ |
+| `styles` | `PlotStyles` | | ✅ | ✅ | ✅ | ✅ |
+
+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.  
+
+---
+
+### Segments
+
+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` | `SegmentsMap<LineSegmentStyle>` |
+| `BarPlot` / `BarChart` | `SegmentsMap<BarSegmentStyle>` |
+| `PyramidPlot` / `PyramidChart` | `SegmentsMap<BarSegmentStyle>` |
+| `HeatmapPlot` / `HeatmapChart` | `SegmentsMap<CellSegmentStyle>` (array form only) |
+
+#### Core types
+
+```ts
+type Range   = { from?: AxisValue; to?: AxisValue };   // half-open on either side
+type Area    = { x?: Range; y?: Range };               // 2-D rectangular region
+type Segment<TStyle> = { areas?: Area[]; style?: TStyle };
+```
+
+A **`Segment`** matches a data point (or heatmap cell) when the point falls inside **any** of its `areas`. Omitting `areas` (or providing an empty array) makes the segment match **all** data — useful as a baseline style. Segments are rendered in order; later ones appear on top.
+
+An **`Area`** restricts by x, y, or both. Both bounds of a `Range` are **inclusive**. Omitting `x` or `y` leaves that axis unrestricted.
+
+#### `SegmentsMap` forms
+
+```ts
+// Array form — same segments apply to every series (required for heatmaps)
+type SegmentsMap<TStyle> = Segment<TStyle>[];
+
+// Record form — segments keyed by series name (line / bar / pyramid)
+type SegmentsMap<TStyle> = SeriesAwareSegmentsMap<TStyle>;
+                         = Record<string, Segment<TStyle>[]>;
+```
+
+#### Examples
+
+**Line chart — colour a period and leave the rest as the palette default:**
+
+```svelte
+<LinePlot
+  {width} {height}
+  series={[{ name: 'gdp', x: 'year', y: 'value', data: GDP }]}
+  segments={{
+    gdp: [
+      { style: { stroke: { stroke: '#94a3b8', strokeWidth: 1 } } },
+      { areas: [{ x: { from: 2008, to: 2010 } }],
+        style: { stroke: { stroke: '#ef4444', strokeWidth: 3 } } },
+    ],
+  }}
+/>
+```
+
+**Heatmap — highlight specific columns, rows, and individual cells:**
+
+```svelte
+<HeatmapChart
+  {width} {height} {data} {x} {y} {z}
+  segments={[
+    { areas: [{ x: { from: 'Q1', to: 'Q1' } }, { x: { from: 'Q3', to: 'Q3' } }],
+      style: { stroke: '#f59e0b', strokeWidth: 2 } },
+    { areas: [{ x: { from: 'Q2', to: 'Q2' }, y: { from: 1, to: 2 } }],
+      style: { fill: '#ef4444', fillOpacity: 0.8 } },
+  ]}
+/>
+```
+
+Omitting `segments` renders every mark in its default palette colour.
+
+---
+
+## Public API
+
+```ts
+import {
+  ...
+} from '@fundar/data-chart-telling';
+```

package/dist/charts/Chart.svelte

@@ -0,0 +1,125 @@
+<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 type { LegendSection } from '../types/charts/legend';
+  import type { HoverStrategy } from '../types/layout/tooltip';
+  import type {
+    ChartPlotSnippet,
+    FacetConfig,
+    TimeValue,
+    TimelineConfig,
+  } from '../types/charts/common';
+
+  /**
+   * 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? }`
+   * 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.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    data,
+    facet,
+    timeline,
+    hover,
+    plot,
+  }: {
+    width: number;
+    height: number;
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    legend?: LegendSection[];
+    data: TRow[];
+    facet?: FacetConfig<TRow>;
+    timeline?: TimelineConfig<TRow>;
+    hover?: { strategy: HoverStrategy; sync: boolean };
+    plot: ChartPlotSnippet<TRow>;
+  } = $props();
+
+  const cfg = $derived(getConfiguration());
+
+  const hoverStore = provideHover();
+  $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}
+      width={w}
+      height={h}
+    >
+      {#snippet cell({ facetValue, data: cellData, width: cw, height: ch })}
+        {@render plot({
+          data: cellData,
+          width: cw,
+          height: ch,
+          facetValue,
+          selectedValue
+        })}
+      {/snippet}
+    </FacetLayout>
+  {:else}
+    {@render plot({ data: rows, width: w, height: h, selectedValue })}
+  {/if}
+{/snippet}
+
+{#snippet legendSnippet()}
+  {#if legend && legend.length > 0}
+    <LegendLayout sections={legend} />
+  {/if}
+{/snippet}
+
+<ChartContainer
+  {width}
+  {height}
+  {title}
+  {subtitle}
+  {caption}
+  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}
+        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/Chart.svelte.d.ts

@@ -0,0 +1,42 @@
+import type { LegendSection } from '../types/charts/legend';
+import type { HoverStrategy } from '../types/layout/tooltip';
+import type { ChartPlotSnippet, FacetConfig, TimelineConfig } from '../types/charts/common';
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: {
+        width: number;
+        height: number;
+        title?: string;
+        subtitle?: string;
+        caption?: string;
+        legend?: LegendSection[];
+        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 Chart: $$IsomorphicComponent;
+type Chart<TRow extends Record<string, unknown>> = InstanceType<typeof Chart<TRow>>;
+export default Chart;

package/dist/charts/bar/Chart.svelte

@@ -0,0 +1,104 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import Chart from '../Chart.svelte';
+  import BarPlot from '../../plots/bar/Plot.svelte';
+  import {
+    resolveTooltip,
+    resolveHoverStrategy,
+    resolveHoverSync,
+    hasHoverMarker
+  } from '../../layout/tooltip/utils';
+  import { resolveAccessor } from '../../plots/utils/accessors';
+  import { resolveTimelineInterpolation } from '../../utils/interpolate';
+  import type { BarSegmentStyle } from '../../types/plots/styles';
+  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
+   * `segments` — there's no separate colour shorthand, so a series' look is
+   * always defined in one place.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    data,
+    x,
+    y,
+    z,
+    styles = {},
+    scales = {},
+    margins,
+    segments,
+    markers = [],
+    facet,
+    timeline,
+    tooltip,
+  }: ChartProps<TRow, BarSegmentStyle> = $props();
+
+  const tip = $derived(resolveTooltip(tooltip, 'x'));
+  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
+  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'x'));
+  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
+  const getX = $derived(resolveAccessor<TRow>(x));
+  const getY = $derived(resolveAccessor<TRow>(y));
+  const getZ = $derived(z ? resolveAccessor<TRow>(z) : null);
+  const defaultFormat = $derived((row: TRow) => `${String(getX(row))}: ${getY(row)}`);
+
+  // A bar timeline snapshots one frame per step; interpolation needs to match
+  // each bar across steps by its category (`x`) — and by `z` too, when the
+  // chart groups categories into series — not by the timeline's own time field.
+  const timelineConfig = $derived(
+    timeline
+      ? {
+          ...timeline,
+          interpolate: resolveTimelineInterpolation(timeline.interpolate, {
+            value: y,
+            key: getZ ? (d: TRow) => `${String(getX(d))}::${String(getZ(d))}` : x,
+          }),
+        }
+      : undefined,
+  );
+</script>
+
+<Chart
+  {width}
+  {height}
+  {title}
+  {subtitle}
+  {caption}
+  {legend}
+  {data}
+  {facet}
+  timeline={timelineConfig}
+  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
+>
+  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
+    <BarPlot
+      width={w}
+      height={h}
+      data={rows}
+      {x}
+      {y}
+      {z}
+      {styles}
+      {scales}
+      {margins}
+      {segments}
+      {markers}
+      tooltip={tip.enabled
+        ? {
+            format: tip.format ?? defaultFormat,
+            facetId: facetValue ?? '',
+            strategy: tip.strategy,
+            sync: tip.sync,
+            series: tip.series,
+            content: tip.content,
+          }
+        : undefined}
+    />
+  {/snippet}
+</Chart>

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

@@ -0,0 +1,27 @@
+import Chart from '../Chart.svelte';
+import type { BarSegmentStyle } from '../../types/plots/styles';
+import type { ChartProps } from '../../types/charts/props';
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: ChartProps<TRow, BarSegmentStyle>;
+    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/charts/container/ChartContainer.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import type { ChartBoxSnippet } from '../../types/charts/common';
+  import { getConfiguration, configToCssVars, cssVarsStyle } from '../../configuration/config.svelte';
+
+  /**
+   * The outermost chart frame. It owns the fixed footprint (`width`/`height`),
+   * lays out the header, optional legend and caption, and measures whatever
+   * space is left for the plot. The actual drawing is delegated to the `plot`
+   * snippet, which receives that measured box — so this component knows nothing
+   * about what kind of plot it wraps.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    plot,
+  }: {
+    width: number;
+    height: number;
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    legend?: Snippet;
+    plot: ChartBoxSnippet;
+  } = $props();
+
+  let bodyWidth = $state(0);
+  let bodyHeight = $state(0);
+
+  // Stamp every `--dct-*` custom property on the root so the scoped styles below
+  // (and any nested plot/legend/timeline) resolve them from the live config.
+  const themeStyle = $derived(cssVarsStyle(configToCssVars(getConfiguration())));
+</script>
+
+<div class="dct-chart" style={themeStyle} style:width="{width}px" style:height="{height}px">
+  {#if title || subtitle}
+    <div class="dct-chart__header">
+      {#if title}<h3 class="dct-chart__title">{title}</h3>{/if}
+      {#if subtitle}<span class="dct-chart__subtitle">{subtitle}</span>{/if}
+    </div>
+  {/if}
+
+  {#if legend}
+    <div class="dct-chart__legend">{@render legend()}</div>
+  {/if}
+
+  <div
+    class="dct-chart__body"
+    bind:clientWidth={bodyWidth}
+    bind:clientHeight={bodyHeight}
+  >
+    {#if bodyWidth > 0 && bodyHeight > 0}
+      {@render plot({ width: bodyWidth, height: bodyHeight })}
+    {/if}
+  </div>
+
+  {#if caption}
+    <div class="dct-chart__caption">
+      <span>{caption}</span>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .dct-chart {
+    display: flex;
+    flex-direction: column;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    color: var(--dct-fg, currentColor);
+    background: var(--dct-bg, transparent);
+    font-family: var(--dct-font, inherit);
+  }
+
+  .dct-chart__header {
+    flex: 0 0 auto;
+    padding: var(--dct-header-pad, 0.75rem 0 1rem);
+    border-bottom: 1px solid var(--dct-border, color-mix(in srgb, currentColor 15%, transparent));
+  }
+
+  .dct-chart__title {
+    margin: 0 0 0.4rem;
+    font-family: var(--dct-title-font, inherit);
+    font-size: var(--dct-title-size, 1.5rem);
+    font-weight: var(--dct-title-weight, 500);
+    line-height: var(--dct-title-leading, 1.2);
+    letter-spacing: var(--dct-title-spacing, normal);
+    color: var(--dct-title-color, inherit);
+  }
+
+  .dct-chart__subtitle {
+    font-family: var(--dct-subtitle-font, inherit);
+    font-size: var(--dct-subtitle-size, 1rem);
+    font-weight: var(--dct-subtitle-weight, 400);
+    line-height: var(--dct-subtitle-leading, 1.3);
+    letter-spacing: var(--dct-subtitle-spacing, normal);
+    color: var(--dct-subtitle-color, inherit);
+  }
+
+  .dct-chart__legend {
+    flex: 0 0 auto;
+    padding: var(--dct-legend-pad, 0.75rem 0);
+  }
+
+  .dct-chart__body {
+    flex: 1 1 auto;
+    min-height: 0;
+    min-width: 0;
+  }
+
+  .dct-chart__caption {
+    flex: 0 0 auto;
+    padding: var(--dct-caption-pad, 0.5rem 0);
+    font-family: var(--dct-caption-font, inherit);
+    font-size: var(--dct-caption-size, 0.75rem);
+    font-weight: var(--dct-caption-weight, 400);
+    line-height: var(--dct-caption-leading, 1.3);
+    letter-spacing: var(--dct-caption-spacing, normal);
+    color: var(--dct-caption-color, inherit);
+    white-space: pre-line;
+  }
+</style>

package/dist/charts/container/ChartContainer.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { ChartBoxSnippet } from '../../types/charts/common';
+type $$ComponentProps = {
+    width: number;
+    height: number;
+    title?: string;
+    subtitle?: string;
+    caption?: string;
+    legend?: Snippet;
+    plot: ChartBoxSnippet;
+};
+declare const ChartContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;