@fundar/data-chart-telling 0.0.1

package/dist/charts/heatmap/Chart.svelte

@@ -0,0 +1,107 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import Chart from '../Chart.svelte';
+  import HeatmapPlot from '../../plots/heatmap/Plot.svelte';
+  import {
+    resolveTooltip,
+    resolveHoverStrategy,
+    resolveHoverSync,
+    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 { 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
+   * 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.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    data,
+    x,
+    y,
+    z,
+    styles = {},
+    segments = [],
+    scales = {},
+    margins,
+    markers = [],
+    facet,
+    timeline,
+    tooltip,
+  }: ChartProps<TRow, CellSegmentStyle> & { z: Accessor<TRow, number> } = $props();
+
+  const getX = $derived(resolveAccessor<TRow>(x));
+  const getY = $derived(resolveAccessor<TRow>(y));
+  const getZ = $derived(resolveAccessor<TRow>(z));
+  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+
+  // Compute domain over the full dataset so colour is comparable across facets/timeline steps.
+  // Caller-provided `scales.z.domain` always takes precedence.
+  const fullDomain = $derived.by((): [number, number] => {
+    const vals = data.map((d) => Number(getZ(d)));
+    return vals.length ? [Math.min(...vals, 0), Math.max(...vals)] : [0, 1];
+  });
+  const mergedScales = $derived<ScalesConfig>({
+    ...scales,
+    z: { domain: fullDomain, ...(scales.z ?? {}) },
+  });
+
+  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 defaultFormat = $derived((row: TRow) => {
+    const xl = scales.x?.label || 'x';
+    const yl = scales.y?.label || 'y';
+    return `${xl} ${getX(row)} · ${yl} ${getY(row)}\n${fmtVal(Number(getZ(row)), '')}`;
+  });
+</script>
+
+<Chart
+  {width}
+  {height}
+  {title}
+  {subtitle}
+  {caption}
+  {legend}
+  {data}
+  {facet}
+  {timeline}
+  hover={hoverEnabled ? { strategy: resolvedStrategy, sync: resolvedSync } : undefined}
+>
+  {#snippet plot({ data: rows, width: w, height: h, facetValue })}
+    <HeatmapPlot
+      width={w}
+      height={h}
+      data={rows}
+      {x}
+      {y}
+      {z}
+      {styles}
+      {segments}
+      scales={mergedScales}
+      {margins}
+      {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/heatmap/Chart.svelte.d.ts

@@ -0,0 +1,30 @@
+import Chart from '../Chart.svelte';
+import type { Accessor } from '../../types/plots/common';
+import type { CellSegmentStyle } from '../../types/plots/styles';
+import type { ChartProps } from '../../types/charts/props';
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: ChartProps<TRow, CellSegmentStyle> & {
+        z: Accessor<TRow, 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/charts/line/Chart.svelte

@@ -0,0 +1,106 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import Chart from '../Chart.svelte';
+  import LinePlot from '../../plots/line/Plot.svelte';
+  import {
+    resolveTooltip,
+    resolveHoverStrategy,
+    resolveHoverSync,
+    hasHoverMarker
+  } from '../../layout/tooltip/utils';
+  import { resolveAccessor } from '../../plots/utils/accessors';
+  import { resolveTimelineInterpolation } from '../../utils/interpolate';
+  import type { LineSegmentStyle } from '../../types/plots/styles';
+  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.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    data,
+    x,
+    y,
+    z,
+    styles = {},
+    segments,
+    markers = [],
+    scales = {},
+    margins,
+    facet,
+    timeline,
+    tooltip,
+  }: ChartProps<TRow, LineSegmentStyle> = $props();
+
+  // A line should grow into its full extent over time, not snap to a single
+  // year's point — so default to a cumulative reveal unless the caller wants
+  // the bar/heatmap-style exact-step snapshot instead.
+  const timelineConfig = $derived(
+    timeline
+      ? {
+          ...timeline,
+          filterMode: timeline.filterMode ?? 'upTo',
+          interpolate: resolveTimelineInterpolation(timeline.interpolate, { value: y, key: z }),
+        }
+      : undefined,
+  );
+
+  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 fmtX = (v: unknown) => (v instanceof Date ? v.toLocaleDateString() : String(v));
+  const defaultFormat = $derived((row: TRow) => {
+    const group = getZ ? `${getZ(row)}\n` : '';
+    return `${group}${fmtX(getX(row))}: ${getY(row)}`;
+  });
+</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 })}
+    <LinePlot
+      width={w}
+      height={h}
+      data={rows}
+      {x}
+      {y}
+      {z}
+      {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,
+          }
+        : undefined}
+    />
+  {/snippet}
+</Chart>

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

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

@@ -0,0 +1,127 @@
+<script lang="ts" generics="TRow extends Record<string, unknown>">
+  import Chart from '../Chart.svelte';
+  import PyramidPlot from '../../plots/pyramid/Plot.svelte';
+  import {
+    resolveTooltip,
+    resolveHoverStrategy,
+    resolveHoverSync,
+    hasHoverMarker
+  } 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 { ChartProps } from '../../types/charts/props';
+
+  /**
+   * High-level population-pyramid-style chart. Forwards flat rows and the
+   * `x`/`y`/`z` accessors straight to {@link PyramidPlot}, which groups them
+   * 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}.
+   */
+  let {
+    width,
+    height,
+    title,
+    subtitle,
+    caption,
+    legend,
+    data,
+    x: magnitude,
+    y: category,
+    z: sides,
+    styles = {},
+    scales = {},
+    margins,
+    segments,
+    markers = [],
+    facet,
+    timeline,
+    tooltip,
+  }: ChartProps<TRow, BarSegmentStyle> & { x: Accessor<TRow, number>; z: Accessor<TRow, unknown> } = $props();
+
+  const getMagnitude = $derived(resolveAccessor<TRow>(magnitude));
+  const getCategory = $derived(resolveAccessor<TRow>(category));
+  const getSides = $derived(resolveAccessor<TRow>(sides));
+  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+
+  // Computed once over the full dataset (not the per-facet/timeline-filtered
+  // rows) so the diverging axis and category bands stay comparable across
+  // timeline steps/facets — the same reasoning HeatmapChart applies to its
+  // colour domain.
+  const categoryDomain = $derived([...new Set(data.map((d) => getCategory(d) as AxisValue))]);
+  const maxMagnitude = $derived.by(() => {
+    const vals = data.map((d) => Math.abs(Number(getMagnitude(d))));
+    return vals.length ? Math.max(...vals) : 1;
+  });
+  // Spread all caller scales first so scales.z (used by PyramidPlot for side
+  // assignment) is preserved, then override x/y with the computed domains.
+  const resolvedScales = $derived({
+    ...scales,
+    x: { domain: [-maxMagnitude, maxMagnitude], ...(scales.x ?? {}) },
+    y: { domain: categoryDomain, ...(scales.y ?? {}) },
+  });
+  // A pyramid timeline snapshots one frame per step; interpolation needs to
+  // match each bar across steps by its category and z-group, not by the
+  // timeline's own time field.
+  const timelineConfig = $derived(
+    timeline
+      ? {
+          ...timeline,
+          interpolate: resolveTimelineInterpolation(timeline.interpolate, {
+            value: magnitude,
+            key: (d: TRow) => `${String(getCategory(d))}::${String(getSides(d))}`,
+          }),
+        }
+      : undefined,
+  );
+
+  const tip = $derived(resolveTooltip(tooltip, 'y'));
+  const hoverEnabled = $derived(tip.enabled || hasHoverMarker(markers));
+  const resolvedStrategy = $derived(resolveHoverStrategy(tip.enabled ? tip.strategy : undefined, markers, 'y'));
+  const resolvedSync = $derived(resolveHoverSync(tip.enabled ? tip.sync : undefined, markers));
+  const defaultFormat = $derived(
+    (row: TRow) => `${String(getSides(row))}\n${String(getCategory(row))}: ${fmtVal(Number(getMagnitude(row)), String(getSides(row)))}`,
+  );
+</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 })}
+    <PyramidPlot
+      width={w}
+      height={h}
+      data={rows}
+      x={magnitude}
+      y={category}
+      z={sides}
+      {styles}
+      scales={resolvedScales}
+      {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/pyramid/Chart.svelte.d.ts

@@ -0,0 +1,31 @@
+import Chart from '../Chart.svelte';
+import type { Accessor } from '../../types/plots/common';
+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> & {
+        x: Accessor<TRow, number>;
+        z: Accessor<TRow, unknown>;
+    };
+    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.d.ts

@@ -0,0 +1,12 @@
+import type { ChartConfig, ChartConfigInput } from '../types/configuration/styling';
+export declare const DEFAULT_CONFIG: ChartConfig;
+/** Read the live, reactive configuration. */
+export declare function getConfiguration(): ChartConfig;
+/** Deep-merge a partial override into the global configuration. Reactive. */
+export declare function setConfiguration(patch: ChartConfigInput): ChartConfig;
+/** Restore the shipped defaults. */
+export declare function resetConfiguration(): void;
+/** Flatten a config into the `--dct-*` custom properties used by the styles. */
+export declare function configToCssVars(c: ChartConfig): Record<string, string>;
+/** Serialize a CSS-vars record into a `style` attribute string. */
+export declare function cssVarsStyle(vars: Record<string, string>): string;

package/dist/configuration/config.svelte.js

@@ -0,0 +1,159 @@
+/**
+ * Global, reactive styling configuration for the whole package.
+ *
+ * One source of truth feeds two consumers:
+ *   1. HTML chrome (container, legend, caption, tooltip) reads it as **CSS
+ *      custom properties** — {@link configToCssVars} flattens the config and
+ *      {@link ChartContainer} stamps the variables on its root so the scoped
+ *      `<style>` blocks resolve them.
+ *   2. Plots read it as **plain JS values** for the props svelteplot needs as
+ *      numbers/strings (margins, tick font sizes, palette, gradient endpoints).
+ *
+ * Because the store is a module-level Svelte `$state`, calling
+ * {@link setConfiguration} re-renders every chart on screen.
+ */
+// ── Defaults ────────────────────────────────────────────────────────────────
+// Mirror the values the components shipped with, so adopting the config system
+// is visually a no-op until something is overridden.
+const text = (over) => ({
+    font: 'inherit',
+    size: '1rem',
+    weight: 400,
+    color: 'inherit',
+    leading: '1.3',
+    spacing: 'normal',
+    ...over,
+});
+export const DEFAULT_CONFIG = {
+    font: 'inherit',
+    color: 'currentColor',
+    background: 'transparent',
+    border: 'color-mix(in srgb, currentColor 15%, transparent)',
+    spacing: {
+        headerPadding: '0.75rem 0 1rem',
+        legendPadding: '0.75rem 0',
+        captionPadding: '0.5rem 0',
+    },
+    title: text({ size: '1.5rem', weight: 500, leading: '1.2' }),
+    subtitle: text({ size: '1rem', weight: 400, color: 'color-mix(in srgb, currentColor 85%, transparent)' }),
+    caption: text({ size: '0.75rem', color: 'color-mix(in srgb, currentColor 75%, transparent)' }),
+    legend: {
+        font: 'inherit',
+        size: '0.875rem',
+        weight: 400,
+        color: 'inherit',
+        titleSize: '0.875rem',
+        titleWeight: 500,
+        gap: '0.5rem 2rem',
+        swatchSize: '1.25rem',
+    },
+    axis: {
+        color: 'currentColor',
+        fontSize: 14,
+        labelFontSize: 14,
+        titleFontSize: 14,
+        xTickSize: 5,
+        yTickSize: 5,
+        xTickPadding: 10,
+        yTickPadding: 10,
+        grid: false,
+    },
+    tooltip: {
+        background: '#111827',
+        color: '#ffffff',
+        fontSize: '0.8125rem',
+        padding: '0.5rem 0.75rem',
+        radius: '0.375rem',
+        border: 'none',
+    },
+    margins: { top: 30, right: 50, bottom: 30, left: 40 },
+    palette: ['#4f46e5', '#e6580d', '#16a34a', '#dc2626', '#0891b2', '#9333ea', '#ca8a04', '#db2777'],
+    continuous: { min: '#e0e7ff', max: '#4f46e5', labelColor: '#111827' },
+    line: { strokeWidth: 3, dotRadius: 4 },
+    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 },
+    },
+};
+// ── Merge ─────────────────────────────────────────────────────────────────────
+function isPlainObject(v) {
+    return typeof v === 'object' && v !== null && !Array.isArray(v);
+}
+function merge(base, patch) {
+    const out = { ...base };
+    for (const key in patch) {
+        const pv = patch[key];
+        if (pv === undefined)
+            continue;
+        const bv = out[key];
+        out[key] = isPlainObject(bv) && isPlainObject(pv) ? merge(bv, pv) : pv;
+    }
+    return out;
+}
+// ── Reactive store ──────────────────────────────────────────────────────────
+let current = $state(structuredClone(DEFAULT_CONFIG));
+/** Read the live, reactive configuration. */
+export function getConfiguration() {
+    return current;
+}
+/** Deep-merge a partial override into the global configuration. Reactive. */
+export function setConfiguration(patch) {
+    current = merge(current, patch);
+    return current;
+}
+/** Restore the shipped defaults. */
+export function resetConfiguration() {
+    current = structuredClone(DEFAULT_CONFIG);
+}
+// ── CSS variable bridge ───────────────────────────────────────────────────────
+/** Flatten a config into the `--dct-*` custom properties used by the styles. */
+export function configToCssVars(c) {
+    const t = (prefix, s) => ({
+        [`--dct-${prefix}-font`]: s.font,
+        [`--dct-${prefix}-size`]: s.size,
+        [`--dct-${prefix}-weight`]: String(s.weight),
+        [`--dct-${prefix}-color`]: s.color,
+        [`--dct-${prefix}-leading`]: s.leading,
+        [`--dct-${prefix}-spacing`]: s.spacing,
+    });
+    return {
+        '--dct-font': c.font,
+        '--dct-fg': c.color,
+        '--dct-bg': c.background,
+        '--dct-border': c.border,
+        '--dct-header-pad': c.spacing.headerPadding,
+        '--dct-legend-pad': c.spacing.legendPadding,
+        '--dct-caption-pad': c.spacing.captionPadding,
+        ...t('title', c.title),
+        ...t('subtitle', c.subtitle),
+        ...t('caption', c.caption),
+        '--dct-legend-font': c.legend.font,
+        '--dct-legend-size': c.legend.size,
+        '--dct-legend-weight': String(c.legend.weight),
+        '--dct-legend-color': c.legend.color,
+        '--dct-legend-title-size': c.legend.titleSize,
+        '--dct-legend-title-weight': String(c.legend.titleWeight),
+        '--dct-legend-gap': c.legend.gap,
+        '--dct-legend-swatch': c.legend.swatchSize,
+        '--dct-axis-color': c.axis.color,
+        '--dct-tooltip-bg': c.tooltip.background,
+        '--dct-tooltip-color': c.tooltip.color,
+        '--dct-tooltip-size': c.tooltip.fontSize,
+        '--dct-tooltip-pad': c.tooltip.padding,
+        '--dct-tooltip-radius': c.tooltip.radius,
+        '--dct-tooltip-border': c.tooltip.border,
+        '--dct-timeline-axis': c.timeline.axisColor,
+        '--dct-timeline-active': c.timeline.activeColor,
+        '--dct-heat-min': c.continuous.min,
+        '--dct-heat-max': c.continuous.max,
+        '--dct-heat-text': c.continuous.labelColor,
+    };
+}
+/** Serialize a CSS-vars record into a `style` attribute string. */
+export function cssVarsStyle(vars) {
+    return Object.entries(vars)
+        .map(([k, v]) => `${k}:${v}`)
+        .join(';');
+}

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

@@ -0,0 +1,2 @@
+import type { ChartConfigInput } from '../../types/configuration/styling';
+export declare const COMPACT_THEME: ChartConfigInput;

package/dist/configuration/themes/compact.js

@@ -0,0 +1,9 @@
+export const COMPACT_THEME = {
+    title: { size: '1.1rem', weight: 600 },
+    subtitle: { size: '0.85rem' },
+    legend: { size: '0.75rem', swatchSize: '0.9rem', gap: '0.25rem 1rem' },
+    axis: { fontSize: 11, xTickSize: 3, yTickSize: 3, xTickPadding: 6, yTickPadding: 6 },
+    margins: { top: 18, right: 30, bottom: 22, left: 30 },
+    line: { strokeWidth: 2, dotRadius: 3 },
+    hover: { rule: { strokeWidth: 1, strokeDasharray: '3 3' }, dot: { dotRadius: 3 } },
+};

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

@@ -0,0 +1,2 @@
+import type { ChartConfigInput } from '../../types/configuration/styling';
+export declare const DARK_THEME: ChartConfigInput;

package/dist/configuration/themes/dark.js

@@ -0,0 +1,17 @@
+export const DARK_THEME = {
+    font: 'ui-sans-serif, system-ui, sans-serif',
+    color: '#e5e7eb',
+    background: '#0f172a',
+    border: 'color-mix(in srgb, #e5e7eb 18%, transparent)',
+    title: { size: '1.6rem', weight: 600 },
+    subtitle: { color: '#94a3b8' },
+    caption: { color: '#94a3b8' },
+    legend: { gap: '0.5rem 1.5rem', swatchSize: '1rem' },
+    palette: ['#38bdf8', '#f472b6', '#a3e635', '#fbbf24', '#c084fc'],
+    continuous: { min: '#1e293b', max: '#38bdf8', labelColor: '#e5e7eb' },
+    axis: { color: '#94a3b8', fontSize: 13, xTickSize: 6, yTickSize: 6 },
+    tooltip: { background: '#e5e7eb', color: '#0f172a' },
+    line: { strokeWidth: 3, dotRadius: 4 },
+    timeline: { activeColor: '#38bdf8', axisColor: '#94a3b8', thickness: 60 },
+    hover: { rule: { stroke: '#38bdf8' } },
+};

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

@@ -0,0 +1,3 @@
+import type { ChartConfigInput } from '../../types/configuration/styling';
+/** The shipped no-op theme — `DEFAULT_CONFIG` itself, unchanged. */
+export declare const DEFAULT_THEME: ChartConfigInput;

package/dist/configuration/themes/default.js

@@ -0,0 +1,2 @@
+/** The shipped no-op theme — `DEFAULT_CONFIG` itself, unchanged. */
+export const DEFAULT_THEME = {};

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

@@ -0,0 +1,2 @@
+import type { ChartConfigInput } from '../../types/configuration/styling';
+export declare const EDITORIAL_THEME: ChartConfigInput;

package/dist/configuration/themes/editorial.js

@@ -0,0 +1,14 @@
+export const EDITORIAL_THEME = {
+    font: 'Georgia, "Times New Roman", serif',
+    color: '#2b2118',
+    border: 'color-mix(in srgb, #2b2118 20%, transparent)',
+    title: { size: '1.9rem', weight: 700, leading: '1.1', spacing: '-0.01em' },
+    subtitle: { color: '#8a6d3b', size: '1.05rem' },
+    caption: { color: '#8a6d3b' },
+    palette: ['#9b2226', '#606c38', '#6a4c93', '#ee9b00', '#005f73'],
+    continuous: { min: '#fff3e0', max: '#bb3e03', labelColor: '#2b2118' },
+    axis: { color: '#8a6d3b', fontSize: 13, xTickSize: 6, yTickSize: 6 },
+    line: { strokeWidth: 5, dotRadius: 5 },
+    timeline: { activeColor: '#bb3e03', axisColor: '#8a6d3b', thickness: 60 },
+    hover: { rule: { stroke: '#bb3e03' } },
+};