@fundar/data-chart-telling 0.0.1

package/dist/layout/facet/FacetLayout.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { FacetColumns, FacetCellSnippet } from '../../types/charts/common';
+import type { Accessor } from '../../types/plots/common';
+declare function $$render<TRow extends Record<string, unknown>>(): {
+    props: {
+        data: TRow[];
+        by: Accessor<TRow, unknown>;
+        columns?: FacetColumns;
+        values?: string[];
+        gap?: number;
+        width: number;
+        height: number;
+        cell: FacetCellSnippet<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 FacetLayout: $$IsomorphicComponent;
+type FacetLayout<TRow extends Record<string, unknown>> = InstanceType<typeof FacetLayout<TRow>>;
+export default FacetLayout;

package/dist/layout/legend/ContinuousSection.svelte

@@ -0,0 +1,95 @@
+<script lang="ts">
+  import type { ContinuousLegendSection } from '../../types/charts/legend';
+  import { makeColorScale } from '../../utils/color';
+  import { getConfiguration } from '../../configuration/config.svelte';
+
+  let { section }: { section: ContinuousLegendSection } = $props();
+
+  const cfg = $derived(getConfiguration());
+  const gradientId = `dct-grad-${Math.random().toString(36).slice(2)}`;
+  const barWidth = $derived(section.width ?? 170);
+  const colorScale = $derived(
+    makeColorScale(
+      section.min,
+      section.max,
+      section.colorMin ?? cfg.continuous.min,
+      section.colorMax ?? cfg.continuous.max,
+    ),
+  );
+
+  const fmt = $derived(section.format ?? ((v: number) => String(v)));
+
+  const tickPositions = $derived(
+    (section.ticks ?? []).map((v) => ({
+      v,
+      t: (v - section.min) / (section.max - section.min || 1),
+      label: fmt(v),
+    })),
+  );
+
+  const stops = $derived(
+    Array.from({ length: 20 }, (_, i) => {
+      const t = i / 19;
+      const v = section.min + t * (section.max - section.min);
+      return { offset: t * 100, color: colorScale(v) };
+    }),
+  );
+</script>
+
+<div class="dct-continuous" style:width="{barWidth}px">
+  <svg width={barWidth} height="20" style="overflow: visible">
+    <defs>
+      <linearGradient id={gradientId} x1="0" x2="1" y1="0" y2="0">
+        {#each stops as s (s.offset)}
+          <stop offset="{s.offset}%" stop-color={s.color} />
+        {/each}
+      </linearGradient>
+    </defs>
+    <rect width={barWidth} height="12" rx="2" fill="url(#{gradientId})" />
+    {#each tickPositions as tick (tick.v)}
+      <line
+        x1={tick.t * barWidth}
+        y1="12"
+        x2={tick.t * barWidth}
+        y2="18"
+        stroke="currentColor"
+        stroke-width="1"
+      />
+    {/each}
+  </svg>
+
+  <div class="dct-continuous__labels" style:width="{barWidth}px">
+    <span class="dct-continuous__edge dct-continuous__edge--start">{fmt(section.min)}</span>
+    {#each tickPositions as tick (tick.v)}
+      <span class="dct-continuous__tick" style:left="{tick.t * barWidth}px">{tick.label}</span>
+    {/each}
+    <span class="dct-continuous__edge dct-continuous__edge--end">{fmt(section.max)}</span>
+  </div>
+</div>
+
+<style>
+  .dct-continuous {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .dct-continuous__labels {
+    position: relative;
+    height: 1rem;
+    font-size: var(--dct-legend-size, 0.75rem);
+    user-select: none;
+  }
+  .dct-continuous__edge {
+    position: absolute;
+  }
+  .dct-continuous__edge--start {
+    left: 0;
+  }
+  .dct-continuous__edge--end {
+    right: 0;
+  }
+  .dct-continuous__tick {
+    position: absolute;
+    transform: translateX(-50%);
+  }
+</style>

package/dist/layout/legend/ContinuousSection.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ContinuousLegendSection } from '../../types/charts/legend';
+type $$ComponentProps = {
+    section: ContinuousLegendSection;
+};
+declare const ContinuousSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContinuousSection = ReturnType<typeof ContinuousSection>;
+export default ContinuousSection;

package/dist/layout/legend/DiscreteSection.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { paletteColor } from '../../utils/color';
+  import type { DiscreteLegendSection } from '../../types/charts/legend';
+  import type { LineStyle } from '../../types/plots/styles';
+
+  let { section }: { section: DiscreteLegendSection } = $props();
+
+  const cfg = $derived(getConfiguration());
+  const columns = $derived(section.columns ?? 1);
+
+  function dashArray(style?: LineStyle): string | undefined {
+    switch (style) {
+      case 'dashed':
+        return '2,5';
+      case 'dotted':
+        return '1,4';
+      case 'dashdot':
+        return '5,3,1,3';
+      default:
+        return undefined;
+    }
+  }
+</script>
+
+<div class="dct-discrete" style:grid-template-columns="repeat({columns}, max-content)">
+  {#each section.items as item, i (item.name)}
+    {@const color = item.color ?? paletteColor(i, cfg.palette)}
+    <div class="dct-discrete__item" style:opacity={item.opacity ?? 1}>
+      <svg class="dct-discrete__swatch" viewBox="0 0 15 10">
+        {#if item.symbol === 'circle'}
+          <circle cx="5" cy="5" r="4" fill={color} />
+        {:else if item.symbol === 'square'}
+          <rect x="1" y="1" width="8" height="8" rx="2" fill={color} />
+        {:else if item.symbol === 'triangle'}
+          <path
+            d="M 6 2 L 9 7.5 A 1.5 1.5 0 0 1 7.8 10 L 2.2 10 A 1.5 1.5 0 0 1 1 7.5 L 4 2 A 1.5 1.5 0 0 1 6 2"
+            fill={color}
+            transform="translate(0,-1)"
+          />
+        {:else if item.symbol === 'line'}
+          <line
+            x1="2"
+            y1="5"
+            x2="13"
+            y2="5"
+            stroke={color}
+            stroke-width="3"
+            stroke-linecap="round"
+            stroke-dasharray={dashArray(item.lineStyle)}
+          />
+        {:else}
+          <rect x="1" y="1" width="8" height="8" fill={color} />
+        {/if}
+      </svg>
+      <span class="dct-discrete__label">{item.label || item.name}</span>
+    </div>
+  {/each}
+</div>
+
+<style>
+  .dct-discrete {
+    display: grid;
+    column-gap: 1.25rem;
+    row-gap: 0.4rem;
+    max-width: 100%;
+  }
+  .dct-discrete__item {
+    display: flex;
+    align-items: center;
+    gap: 0.35rem;
+    min-width: 0;
+  }
+  .dct-discrete__swatch {
+    width: var(--dct-legend-swatch, 1.25rem);
+    height: var(--dct-legend-swatch, 1.25rem);
+    flex-shrink: 0;
+  }
+  .dct-discrete__label {
+    font-size: var(--dct-legend-size, 0.875rem);
+    font-weight: var(--dct-legend-weight, 400);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+</style>

package/dist/layout/legend/DiscreteSection.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { DiscreteLegendSection } from '../../types/charts/legend';
+type $$ComponentProps = {
+    section: DiscreteLegendSection;
+};
+declare const DiscreteSection: import("svelte").Component<$$ComponentProps, {}, "">;
+type DiscreteSection = ReturnType<typeof DiscreteSection>;
+export default DiscreteSection;

package/dist/layout/legend/LegendLayout.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { LegendSection } from '../../types/charts/legend';
+  import DiscreteSection from './DiscreteSection.svelte';
+  import ContinuousSection from './ContinuousSection.svelte';
+
+  /**
+   * Renders one or more legend sections side by side, dispatching each to the
+   * matching section renderer. Discrete and continuous sections can be mixed.
+   */
+  let { sections }: { sections: LegendSection[] } = $props();
+</script>
+
+<div class="dct-legend">
+  {#each sections as section, i (section.title ?? i)}
+    <div class="dct-legend__section">
+      {#if section.title}
+        <div class="dct-legend__title">{section.title}</div>
+      {/if}
+      {#if section.type === 'discrete'}
+        <DiscreteSection {section} />
+      {:else if section.type === 'continuous'}
+        <ContinuousSection {section} />
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .dct-legend {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--dct-legend-gap, 0.5rem 2rem);
+    align-items: flex-start;
+    font-family: var(--dct-legend-font, inherit);
+    color: var(--dct-legend-color, inherit);
+  }
+  .dct-legend__section {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+  .dct-legend__title {
+    font-size: var(--dct-legend-title-size, 0.875rem);
+    font-weight: var(--dct-legend-title-weight, 500);
+  }
+</style>

package/dist/layout/legend/LegendLayout.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { LegendSection } from '../../types/charts/legend';
+type $$ComponentProps = {
+    sections: LegendSection[];
+};
+declare const LegendLayout: import("svelte").Component<$$ComponentProps, {}, "">;
+type LegendLayout = ReturnType<typeof LegendLayout>;
+export default LegendLayout;

package/dist/layout/plot/PlotLayout.svelte

@@ -0,0 +1,236 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import type { ComponentProps, Snippet } from 'svelte';
+  import { Plot, Pointer, RuleX, RuleY, AxisX, AxisY } from 'svelteplot';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { getHover, createHover } from '../tooltip/hover.svelte';
+  import { createHoverController } from '../tooltip/controller.svelte';
+  import { hasHoverMarker, findHoverMarker } from '../tooltip/utils';
+  import HoverMarker from '../../plots/markers/HoverMarker.svelte';
+  import Tooltip from '../tooltip/Tooltip.svelte';
+  import type { AxisValue, Series, ScalesConfig, MarginConfig } from '../../types/plots/common';
+  import type { Marker } from '../../types/plots/markers';
+  import type { HoverStrategy, HoverDisplayPoint, HoverPoint, TooltipRuntime } from '../../types/layout/tooltip';
+
+  type SveltePlotProps = ComponentProps<typeof Plot>;
+
+  /**
+   * Shared chrome around every plot kind's svelteplot markup: the pointer-event
+   * wrapper, the hover/tooltip state machine, the `<Plot>` element itself plus
+   * standalone markers (`ruleX`/`ruleY`/un-scoped `component`) and the floating
+   * tooltip. A plot kind only supplies its data/accessors and its marks
+   * (`<Line>`/`<BarY>`/`<Cell>`, …) through `children`.
+   */
+  let {
+    width,
+    height,
+    x,
+    y,
+    data,
+    getX,
+    getY,
+    matchY,
+    hoverPoints,
+    label,
+    tooltip = undefined,
+    markers = [],
+    seriesData = [],
+    showHoverLabels = true,
+    scales,
+    margins,
+    defaultStrategy = 'x',
+    children,
+  }: {
+    width: number;
+    height: number;
+    x?: SveltePlotProps['x'];
+    y?: SveltePlotProps['y'];
+    /** Flat rows fed to svelteplot's `<Pointer>` for nearest-point matching. */
+    data: TData[];
+    getX: (d: TData) => AxisValue;
+    getY: (d: TData) => AxisValue;
+    /** Pointer's `y` channel — only needed when matching must be 2D (e.g. a heatmap grid). */
+    matchY?: (d: TData) => AxisValue;
+    hoverPoints: HoverPoint<TData>[];
+    label: (row: TData) => string;
+    tooltip?: TooltipRuntime<TData>;
+    markers?: Marker[];
+    /** All resolved series, forwarded to unscoped component markers (e.g. DeltaMarker). */
+    seriesData?: Series<TData>[];
+    /** Scale config forwarded from the plot. */
+    scales?: ScalesConfig;
+    /** Partial margin override — merged on top of the theme before tickRotate adjustment. */
+    margins?: MarginConfig;
+    showHoverLabels?: boolean;
+    /**
+     * The plot kind's default hover strategy when none is set on the tooltip or
+     * hover marker. Line/bar → `'x'`, pyramid → `'y'`, heatmap → `'punctual'`.
+     */
+    defaultStrategy?: HoverStrategy;
+    /**
+     * `matchedPoints` carries only display info (+ `series`), not `row` — a
+     * per-series-scoped `HoverMarker` never needs the source row, just enough
+     * to filter and place dots/labels, which sidesteps forcing a concrete
+     * `TData` resolution through this snippet's type for every plot kind.
+     * `impliesRuleX`/`impliesRuleY` tell the plot kind whether the active
+     * strategy implies a crosshair rule on each axis by default.
+     */
+    children: Snippet<
+      [{
+        matchedPoints: HoverDisplayPoint[];
+        ruleX: AxisValue | null;
+        ruleY: AxisValue | null;
+        impliesRuleX: boolean;
+        impliesRuleY: boolean;
+      }]
+    >;
+  } = $props();
+
+  const cfg = $derived(getConfiguration());
+
+  const computedMargins = $derived.by(() => {
+    const base = { ...cfg.margins, ...margins };
+    const xRotate = scales?.x?.tickRotate;
+    if (!xRotate) return base;
+    const rad = Math.abs(xRotate) * Math.PI / 180;
+    return {
+      ...base,
+      bottom: base.bottom + Math.ceil(Math.sin(rad) * 20),
+    };
+  });
+
+  // ── Hover / tooltip ───────────────────────────────────────────────────────
+  const hoverActive = $derived(tooltip != null || hasHoverMarker(markers));
+
+  const sharedHover = getHover();
+  const localHover = createHover();
+  const hover = $derived(sharedHover ?? localHover);
+
+  $effect(() => {
+    if (sharedHover) return;
+    const hoverMarker = findHoverMarker(markers);
+    localHover.strategy = tooltip?.strategy ?? hoverMarker?.strategy ?? defaultStrategy;
+    localHover.sync = tooltip?.sync ?? hoverMarker?.sync ?? false;
+  });
+
+  const ctrl = createHoverController<TData>({
+    hover: () => hover,
+    facetId: () => tooltip?.facetId ?? '',
+    points: () => hoverPoints,
+    getX: () => getX,
+    getY: () => getY,
+    label: () => label,
+    format: () => tooltip?.format ?? label,
+    seriesFilter: () => tooltip?.series,
+    width: () => width,
+    height: () => height,
+  });
+
+  const topLevelMarkers = $derived(
+    markers.filter(
+      (marker) =>
+        marker.type === 'ruleX' ||
+        marker.type === 'ruleY' ||
+        (marker.type === 'component' && !marker.series),
+    ),
+  );
+
+  /** The unscoped (no `series`) hover marker, if any. */
+  const unscopedHoverMarker = $derived(
+    markers.find((m) => m.type === 'hover' && !m.series) as
+      | Extract<Marker, { type: 'hover' }>
+      | undefined,
+  );
+
+  /**
+   * Gate ruleX display: shows when the strategy implies it (default) or the
+   * marker explicitly requests it (`ruleX: true`), and is never suppressed
+   * unless the marker explicitly disables it (`ruleX: false`).
+   */
+  const showRuleX = $derived(
+    unscopedHoverMarker != null &&
+    unscopedHoverMarker.ruleX !== false &&
+    (ctrl.impliesRuleX || unscopedHoverMarker.ruleX === true),
+  );
+  const showRuleY = $derived(
+    unscopedHoverMarker != null &&
+    unscopedHoverMarker.ruleY !== false &&
+    (ctrl.impliesRuleY || unscopedHoverMarker.ruleY === true),
+  );
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+  class="dct-plot"
+  style:color={cfg.axis.color}
+  onpointermove={hoverActive ? ctrl.onMove : undefined}
+  onpointerleave={hoverActive ? ctrl.onLeave : undefined}
+>
+  <Plot {width} {height} margin={computedMargins} {x} {y}>
+    <AxisX tickSize={scales?.x?.tickSize ?? cfg.axis.xTickSize} tickPadding={scales?.x?.tickPadding ?? cfg.axis.xTickPadding} tickFontSize={cfg.axis.fontSize} titleFontSize={scales?.x?.titleFontSize ?? cfg.axis.titleFontSize} />
+    <AxisY tickSize={scales?.y?.tickSize ?? cfg.axis.yTickSize} tickPadding={scales?.y?.tickPadding ?? cfg.axis.yTickPadding} tickFontSize={cfg.axis.fontSize} titleFontSize={scales?.y?.titleFontSize ?? cfg.axis.titleFontSize} />
+    {@render children({
+      matchedPoints: ctrl.points,
+      ruleX: ctrl.ruleX,
+      ruleY: ctrl.ruleY,
+      impliesRuleX: ctrl.impliesRuleX,
+      impliesRuleY: ctrl.impliesRuleY,
+    })}
+
+    {#each topLevelMarkers as marker, i (marker.type === 'ruleX' ? `${marker.type}-${marker.x}` : marker.type === 'ruleY' ? `${marker.type}-${marker.y}` : `${marker.type}-${i}`)}
+      {#if marker.type === 'ruleX'}
+        <RuleX
+          data={[{ xValue: marker.x }]}
+          x={(d) => d.xValue}
+          stroke={marker.style?.stroke ?? 'currentColor'}
+          strokeWidth={marker.style?.strokeWidth ?? 1}
+          strokeOpacity={marker.style?.strokeOpacity ?? 1}
+          strokeDasharray={marker.style?.strokeDasharray}
+        />
+      {:else if marker.type === 'ruleY'}
+        <RuleY
+          data={[{ yValue: marker.y }]}
+          y={(d) => d.yValue}
+          stroke={marker.style?.stroke ?? 'currentColor'}
+          strokeWidth={marker.style?.strokeWidth ?? 1}
+          strokeOpacity={marker.style?.strokeOpacity ?? 1}
+          strokeDasharray={marker.style?.strokeDasharray}
+        />
+      {:else if marker.type === 'component'}
+        <marker.component {...marker.props} data={marker.data ?? seriesData} />
+      {/if}
+    {/each}
+
+    {#if hoverActive}
+      <Pointer {data} x={getX} y={matchY} maxDistance={400} onupdate={ctrl.onPointer} />
+    {/if}
+
+    {#if unscopedHoverMarker}
+      <HoverMarker
+        data={ctrl.points}
+        ruleX={showRuleX ? ctrl.ruleX : null}
+        ruleY={showRuleY ? ctrl.ruleY : null}
+        showLabels={unscopedHoverMarker.showLabels ?? showHoverLabels}
+        ruleStyle={unscopedHoverMarker.ruleStyle}
+        dotStyle={unscopedHoverMarker.dotStyle}
+        fontStyle={unscopedHoverMarker.fontStyle}
+      />
+    {/if}
+  </Plot>
+
+  {#if tooltip && ctrl.showTooltip && ctrl.tooltipPosition}
+    <Tooltip x={ctrl.tooltipPosition.x} y={ctrl.tooltipPosition.y}>
+      {#if tooltip.content}
+        {@render tooltip.content({ rows: ctrl.matchedRows.map((p) => p.row) })}
+      {:else}
+        {ctrl.tooltipText}
+      {/if}
+    </Tooltip>
+  {/if}
+</div>
+
+<style>
+  .dct-plot {
+    position: relative;
+    line-height: 0;
+  }
+</style>

package/dist/layout/plot/PlotLayout.svelte.d.ts

@@ -0,0 +1,70 @@
+import type { Snippet } from 'svelte';
+import type { AxisValue, Series, ScalesConfig, MarginConfig } from '../../types/plots/common';
+import type { Marker } from '../../types/plots/markers';
+import type { HoverStrategy, HoverDisplayPoint, HoverPoint, TooltipRuntime } from '../../types/layout/tooltip';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        width: number;
+        height: number;
+        x?: false | Partial<import("svelteplot/types/scale.js").XScaleOptions> | import("svelteplot/types/data.js").RawValue[] | undefined;
+        y?: false | import("svelteplot/types/data.js").RawValue[] | Partial<import("svelteplot/types/scale.js").YScaleOptions> | undefined;
+        /** Flat rows fed to svelteplot's `<Pointer>` for nearest-point matching. */
+        data: TData[];
+        getX: (d: TData) => AxisValue;
+        getY: (d: TData) => AxisValue;
+        /** Pointer's `y` channel — only needed when matching must be 2D (e.g. a heatmap grid). */
+        matchY?: (d: TData) => AxisValue;
+        hoverPoints: HoverPoint<TData>[];
+        label: (row: TData) => string;
+        tooltip?: TooltipRuntime<TData>;
+        markers?: Marker[];
+        /** All resolved series, forwarded to unscoped component markers (e.g. DeltaMarker). */
+        seriesData?: Series<TData>[];
+        /** Scale config forwarded from the plot. */
+        scales?: ScalesConfig;
+        /** Partial margin override — merged on top of the theme before tickRotate adjustment. */
+        margins?: MarginConfig;
+        showHoverLabels?: boolean;
+        /**
+         * The plot kind's default hover strategy when none is set on the tooltip or
+         * hover marker. Line/bar → `'x'`, pyramid → `'y'`, heatmap → `'punctual'`.
+         */
+        defaultStrategy?: HoverStrategy;
+        /**
+         * `matchedPoints` carries only display info (+ `series`), not `row` — a
+         * per-series-scoped `HoverMarker` never needs the source row, just enough
+         * to filter and place dots/labels, which sidesteps forcing a concrete
+         * `TData` resolution through this snippet's type for every plot kind.
+         * `impliesRuleX`/`impliesRuleY` tell the plot kind whether the active
+         * strategy implies a crosshair rule on each axis by default.
+         */
+        children: Snippet<[{
+            matchedPoints: HoverDisplayPoint[];
+            ruleX: AxisValue | null;
+            ruleY: AxisValue | null;
+            impliesRuleX: boolean;
+            impliesRuleY: boolean;
+        }]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PlotLayout: $$IsomorphicComponent;
+type PlotLayout<TData extends Record<string, unknown>> = InstanceType<typeof PlotLayout<TData>>;
+export default PlotLayout;

package/dist/layout/timeline/Timeline.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import { Plot, RuleX, RuleY, Text } from 'svelteplot';
+  import type { Orientation, TimeValue } from '../../types/charts/common';
+
+  /**
+   * Purely visual time axis: a baseline rule plus the ordered step labels with
+   * the current step emphasised. It has no notion of data — it just draws the
+   * `values` it is handed and highlights `currentValue`. Colours come from CSS
+   * variables so a host app can theme it.
+   */
+  let {
+    currentValue,
+    values,
+    orientation = 'vertical',
+    width,
+    height,
+  }: {
+    currentValue: TimeValue;
+    values: TimeValue[];
+    orientation?: Orientation;
+    width: number;
+    height: number;
+  } = $props();
+
+  const isHorizontal = $derived(orientation === 'horizontal');
+  const crossKey = $derived(isHorizontal ? 'y' : 'x');
+
+  const domain = $derived.by(() => {
+    const sorted = [...values].sort((a, b) => a - b);
+    return [sorted[0], sorted[sorted.length - 1]];
+  });
+
+  const baseValues = $derived(values.filter((v) => v !== currentValue));
+  const identity = (d: TimeValue) => d;
+
+  const Rule = $derived(isHorizontal ? RuleY : RuleX);
+
+  const textOffset = $derived(
+    isHorizontal
+      ? { dy: -12, dx: 0, textAnchor: 'middle' as const }
+      : { dx: -8, dy: 0, textAnchor: 'end' as const },
+  );
+
+  const axisConfig = $derived(
+    isHorizontal
+      ? { x: { domain, ticks: [] }, y: { axis: false as const } }
+      : { y: { domain, ticks: [], reverse: true }, x: { axis: false as const } },
+  );
+</script>
+
+<Plot
+  {width}
+  {height}
+  {...axisConfig}
+  marginTop={isHorizontal ? 32 : 0}
+  marginBottom={0}
+  marginLeft={isHorizontal ? 30 : 50}
+  marginRight={isHorizontal ? 30 : 0}
+>
+  <Rule
+    {...{ [crossKey]: 0 }}
+    stroke="var(--dct-timeline-axis, currentColor)"
+    strokeOpacity={0.7}
+    strokeWidth={1.5}
+  />
+
+  <Text
+    data={baseValues}
+    {...(isHorizontal ? { x: identity, y: 0 } : { x: 0, y: identity })}
+    text={(d: TimeValue) => `${d}`}
+    {...textOffset}
+    fontSize={12}
+    fill="var(--dct-timeline-axis, currentColor)"
+    fillOpacity={0.55}
+  />
+
+  <Text
+    data={[currentValue]}
+    {...(isHorizontal ? { x: identity, y: 0 } : { x: 0, y: identity })}
+    text={(d: TimeValue) => `${d}`}
+    {...textOffset}
+    fontSize={20}
+    fontWeight="bold"
+    fill="var(--dct-timeline-active, #e6580d)"
+  />
+</Plot>