@fundar/data-chart-telling 0.0.1

package/dist/plots/pyramid/Plot.svelte

@@ -0,0 +1,282 @@
+<script lang="ts" generics="TData extends Record<string, unknown>">
+  import { SvelteMap } from 'svelte/reactivity';
+  import { BarX, Text } from 'svelteplot';
+  import { resolveAccessor } from '../utils/accessors';
+  import { getConfiguration } from '../../configuration/config.svelte';
+  import { paletteColor } from '../../utils/color';
+  import { buildSeries } from '../../utils/grouping';
+  import { buildGroupedSeries, validateSegments, resolveSegmentsForSeries, matchesSegmentX, getDataForSegments } from '../utils/segments';
+  import PlotLayout from '../../layout/plot/PlotLayout.svelte';
+  import HoverMarker from '../markers/HoverMarker.svelte';
+  import type { PlotProps } from '../../types/plots/props';
+  import type { Series, AxisValue } from '../../types/plots/common';
+  import type { BarSegmentStyle, ValueAnchor } from '../../types/plots/styles';
+  import type { Marker } from '../../types/plots/markers';
+
+  /**
+   * A population-pyramid-style diverging bar chart: each series is mirrored
+   * left or right of a shared zero baseline along a categorical band axis.
+   * Mirrors the bar/line plot contract — series in, marks out — so the
+   * chart-level container/timeline/facet/legend wrap it unchanged. Like
+   * `LinePlot`/`BarPlot`, accepts either pre-built `series` or flat `data` +
+   * `x`/`y`/`z` accessors.
+   *
+   * Side assignment is automatic: series names are sorted alphabetically and
+   * the first goes left, the second right. Pass `scales.z.reverse: true` to
+   * flip the order.
+   */
+
+  type PyramidSide = 'left' | 'right';
+  type InternalSeries = Series<TData> & { side: PyramidSide };
+
+  let {
+    width,
+    height,
+    series,
+    data,
+    x: magnitude,
+    y: category,
+    z: sides,
+    styles = {},
+    scales = {},
+    margins,
+    segments = {},
+    markers = [],
+    tooltip = undefined,
+  }: PlotProps<TData, BarSegmentStyle> = $props();
+
+  $effect(() => { validateSegments(segments); });
+
+  const cfg = $derived(getConfiguration());
+  const leftColor = $derived(styles.colors?.left ?? paletteColor(0, cfg.palette));
+  const rightColor = $derived(styles.colors?.right ?? paletteColor(1, cfg.palette));
+  const showVals = $derived(styles.values?.show ?? false);
+  const fmtVal = $derived(styles.values?.format ?? ((v: number) => `${v}`));
+  const valAnchor = $derived<ValueAnchor>(styles.values?.anchor ?? 'outside');
+
+  // Sort series names alphabetically; even index → left, odd → right.
+  // scales.z.reverse flips the assignment so the second name goes left.
+  const zReversed = $derived(scales.z?.reverse ?? false);
+  const resolvedSeries = $derived.by((): InternalSeries[] => {
+    const base: Series<TData>[] = series ?? buildSeries(data!, category!, magnitude!, sides);
+    const sortedNames = [...base.map((s) => s.name)].sort((a, b) => a.localeCompare(b));
+    return base.map((s) => {
+      const idx = sortedNames.indexOf(s.name);
+      const side: PyramidSide = (idx % 2 === 0) !== zReversed ? 'left' : 'right';
+      return { ...s, side };
+    });
+  });
+
+  const groupedSeries = $derived(
+    buildGroupedSeries<InternalSeries, BarSegmentStyle>(resolvedSeries, segments),
+  );
+
+  function signedValue(s: InternalSeries, d: TData): number {
+    const v = Math.abs(Number(resolveAccessor(s.y)(d)));
+    return s.side === 'left' ? -v : v;
+  }
+
+  // svelteplot's `Pointer` rebuilds its quadtree from shallow-cloned rows
+  // (`{ ...d }`), never the original references, so a row's owning series
+  // can't be recovered by identity once hover is active. Pre-compute
+  // everything `getX`/`getY`/`labelFor` need as plain enumerable properties —
+  // they survive the clone automatically.
+  type TaggedRow = TData & {
+    __side: string;
+    __x: number;
+    __y: AxisValue;
+    __label: string;
+    __series: string;
+  };
+
+  const flat = $derived.by((): TaggedRow[] =>
+    resolvedSeries.flatMap((s) => {
+      const getCategory = resolveAccessor(s.x);
+      const getMagnitude = resolveAccessor(s.y);
+      return s.data.map((d) => {
+        const v = Math.abs(Number(getMagnitude(d)));
+        return {
+          ...d,
+          __side: s.side,
+          __x: s.side === 'left' ? -v : v,
+          __y: getCategory(d) as AxisValue,
+          __label: fmtVal(v, s.name),
+          __series: s.name,
+        } as TaggedRow;
+      });
+    }),
+  );
+
+  const getX = (d: TaggedRow) => d.__x;
+  const getY = (d: TaggedRow) => d.__y;
+  const labelFor = (d: TaggedRow) => d.__label;
+
+  const hoverPoints = $derived(
+    flat.map((d) => ({
+      x: d.__x,
+      y: d.__y,
+      row: d,
+      label: d.__label,
+      series: d.__series,
+    })),
+  );
+
+  const yDomain = $derived([
+    ...new Set(
+      resolvedSeries.flatMap((s) => {
+        const getCategory = resolveAccessor(s.x);
+        return s.data.map((d) => getCategory(d) as AxisValue);
+      }),
+    ),
+  ]);
+
+  const maxMagnitude = $derived.by(() => {
+    const vals = resolvedSeries.flatMap((s) => {
+      const getMagnitude = resolveAccessor(s.y);
+      return s.data.map((d) => Math.abs(Number(getMagnitude(d))));
+    });
+    return vals.length ? Math.max(...vals) : 1;
+  });
+
+  const seriesMarkers = $derived.by(() => {
+    const map = new SvelteMap<string, Marker[]>();
+    for (const marker of markers) {
+      if ((marker.type === 'component' || marker.type === 'hover') && marker.series) {
+        if (!map.has(marker.series)) map.set(marker.series, []);
+        map.get(marker.series)!.push(marker);
+      }
+    }
+    return map;
+  });
+</script>
+
+<PlotLayout
+  {width}
+  {height}
+  x={{
+    domain: [-maxMagnitude, maxMagnitude],
+    tickFormat: (v: unknown) => fmtVal(Math.abs(Number(v)), ''),
+    ...(scales.x ?? {}),
+  }}
+  y={{ type: 'band', padding: 0.2, domain: yDomain, ...(scales.y ?? {}) }}
+  data={flat}
+  {getX}
+  {getY}
+  matchY={getY}
+  {hoverPoints}
+  label={labelFor}
+  {tooltip}
+  {markers}
+  seriesData={resolvedSeries}
+  {scales}
+  {margins}
+  defaultStrategy="y"
+>
+  {#snippet children({ matchedPoints, ruleX, ruleY, impliesRuleX, impliesRuleY })}
+    {#each groupedSeries as group (group.series.name)}
+      {@const defaultColor = group.series.side === 'left' ? leftColor : rightColor}
+      {@const getCategory = resolveAccessor(group.series.x)}
+      {#each group.visualSegments as seg, i (`${group.series.name}-${i}`)}
+        <BarX
+          data={seg.data}
+          x1={0}
+          x2={(d: TData) => signedValue(group.series, d)}
+          y={getCategory}
+          fill={seg.style.fill ?? defaultColor}
+          fillOpacity={seg.style.fillOpacity ?? 1}
+        />
+      {/each}
+
+      {#if showVals}
+        {@const isLeft = group.series.side === 'left'}
+        {@const xFn = valAnchor === 'middle'
+          ? (d: TData) => signedValue(group.series, d) / 2
+          : valAnchor === 'end'
+          ? () => 0
+          : (d: TData) => signedValue(group.series, d)}
+        {@const defaultDx = valAnchor === 'middle' ? 0
+          : valAnchor === 'end' ? (isLeft ? -4 : 4)
+          : (isLeft ? -6 : 6)}
+        {@const defaultTextAnchor = valAnchor === 'middle'
+          ? ('middle' as const)
+          : isLeft
+          ? ('end' as const)
+          : ('start' as const)}
+        <Text
+          data={group.series.data}
+          x={xFn}
+          y={getCategory}
+          text={(d: TData) => fmtVal(Math.abs(Number(resolveAccessor(group.series.y)(d))), group.series.name)}
+          dx={styles.values?.dx ?? defaultDx}
+          dy={styles.values?.dy ?? 0}
+          textAnchor={styles.values?.textAnchor ?? defaultTextAnchor}
+          lineAnchor={styles.values?.lineAnchor ?? 'middle'}
+          lineHeight={styles.values?.lineHeight}
+          rotate={styles.values?.rotate}
+          class={styles.values?.class}
+          textClass={styles.values?.textClass}
+          fill={cfg.axis.color}
+          fontSize={12}
+        />
+      {/if}
+
+      {#each seriesMarkers.get(group.series.name) ?? [] as marker, i (`series-${group.series.name}-${marker.type}-${i}`)}
+        {#if marker.type === 'component'}
+          {#if marker.scope === 'segment'}
+            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
+            {@const segmentDataArrays = getDataForSegments(group.series.data, getCategory, segs)}
+            {#each segmentDataArrays as segmentData, segIdx (`${group.series.name}-marker-segment-${segIdx}`)}
+              {#if segmentData.length > 0}
+                {@const segmentColor = segs[segIdx]?.style?.fill ?? defaultColor}
+                <marker.component
+                  {...marker.props}
+                  series={group.series.name}
+                  data={segmentData}
+                  seriesColor={segmentColor}
+                />
+              {/if}
+            {/each}
+          {:else}
+            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
+            {@const seriesColor = segs[0]?.style?.fill ?? defaultColor}
+            <marker.component
+              {...marker.props}
+              series={group.series.name}
+              data={group.series.data}
+              seriesColor={seriesColor}
+            />
+          {/if}
+        {:else if marker.type === 'hover'}
+          {@const seriesPoints = matchedPoints.filter((p) => p.series === group.series.name)}
+          {#if marker.scope === 'segment'}
+            {@const segs = resolveSegmentsForSeries(segments, group.series.name)}
+            {#each segs as seg, segIdx (`${group.series.name}-hover-segment-${segIdx}`)}
+              {@const segPoints = seriesPoints.filter((p) => matchesSegmentX(p.x, seg))}
+              {#if segPoints.length > 0}
+                <HoverMarker
+                  data={segPoints}
+                  ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
+                  ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
+                  showLabels={marker.showLabels}
+                  ruleStyle={marker.ruleStyle}
+                  dotStyle={marker.dotStyle}
+                  fontStyle={marker.fontStyle}
+                />
+              {/if}
+            {/each}
+          {:else}
+            <HoverMarker
+              data={seriesPoints}
+              ruleX={marker.ruleX !== false && (impliesRuleX || marker.ruleX === true) ? ruleX : null}
+              ruleY={marker.ruleY !== false && (impliesRuleY || marker.ruleY === true) ? ruleY : null}
+              showLabels={marker.showLabels}
+              ruleStyle={marker.ruleStyle}
+              dotStyle={marker.dotStyle}
+              fontStyle={marker.fontStyle}
+            />
+          {/if}
+        {/if}
+      {/each}
+    {/each}
+  {/snippet}
+</PlotLayout>

package/dist/plots/pyramid/Plot.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { PlotProps } from '../../types/plots/props';
+import type { BarSegmentStyle } from '../../types/plots/styles';
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: PlotProps<TData, BarSegmentStyle>;
+    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 Plot: $$IsomorphicComponent;
+type Plot<TData extends Record<string, unknown>> = InstanceType<typeof Plot<TData>>;
+export default Plot;

package/dist/plots/utils/accessors.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Converts a field key or a function into a data accessor function.
+ * Svelteplot marks expect `(d: T) => value` — this bridges the
+ * shorthand key notation used in series definitions.
+ */
+export declare function resolveAccessor<T extends Record<string, unknown>>(field: keyof T | ((d: T) => any)): (d: T) => any;

package/dist/plots/utils/accessors.js

@@ -0,0 +1,10 @@
+/**
+ * Converts a field key or a function into a data accessor function.
+ * Svelteplot marks expect `(d: T) => value` — this bridges the
+ * shorthand key notation used in series definitions.
+ */
+export function resolveAccessor(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+field) {
+    return typeof field === 'function' ? field : (d) => d[field];
+}

package/dist/plots/utils/delta.d.ts

@@ -0,0 +1,12 @@
+import type { Series } from '../../types/plots/common';
+import type { DeltaConfig } from '../../types/plots/delta';
+export type ResolvedDelta = {
+    cfg: DeltaConfig;
+    at: number;
+    from: number;
+    to: number;
+    diff: number;
+    mid: number;
+};
+export declare function resolveXDeltas<T extends Record<string, unknown>>(allSeries: Series<T>[], configs: DeltaConfig[]): ResolvedDelta[];
+export declare function resolveYDeltas<T extends Record<string, unknown>>(allSeries: Series<T>[], configs: DeltaConfig[]): ResolvedDelta[];

package/dist/plots/utils/delta.js

@@ -0,0 +1,69 @@
+import { resolveAccessor } from './accessors';
+/**
+ * Sorts `data` by `sortBy`, then finds the first adjacent pair where `scanBy`
+ * brackets `target` and linearly interpolates `measureBy` at that crossing.
+ *
+ * X delta usage: sortBy=getX, scanBy=getX, measureBy=getY  → Y at given X
+ * Y delta usage: sortBy=getX, scanBy=getY, measureBy=getX  → X at given Y (first crossing)
+ */
+function interpolate(data, sortBy, scanBy, measureBy, target) {
+    const sorted = [...data].sort((a, b) => sortBy(a) - sortBy(b));
+    for (let i = 0; i < sorted.length; i++) {
+        if (scanBy(sorted[i]) === target)
+            return measureBy(sorted[i]);
+    }
+    for (let i = 0; i < sorted.length - 1; i++) {
+        const s0 = scanBy(sorted[i]);
+        const s1 = scanBy(sorted[i + 1]);
+        if ((s0 <= target && target <= s1) || (s1 <= target && target <= s0)) {
+            const t = (target - s0) / (s1 - s0);
+            return measureBy(sorted[i]) + t * (measureBy(sorted[i + 1]) - measureBy(sorted[i]));
+        }
+    }
+    return null;
+}
+function resolveXDeltaEndpoint(allSeries, target, atX) {
+    if (target.type === 'axis')
+        return target.value ?? 0;
+    const s = allSeries.find(s => s.name === target.series);
+    if (!s)
+        return null;
+    const getX = (d) => Number(resolveAccessor(s.x)(d));
+    const getY = (d) => Number(resolveAccessor(s.y)(d));
+    return interpolate(s.data, getX, getX, getY, atX);
+}
+function resolveYDeltaEndpoint(allSeries, target, atY) {
+    if (target.type === 'axis')
+        return target.value ?? 0;
+    const s = allSeries.find(s => s.name === target.series);
+    if (!s)
+        return null;
+    const getX = (d) => Number(resolveAccessor(s.x)(d));
+    const getY = (d) => Number(resolveAccessor(s.y)(d));
+    return interpolate(s.data, getX, getY, getX, atY);
+}
+function buildDelta(cfg, from, to) {
+    const diff = Math.abs(from - to);
+    const mid = (from + to) / 2;
+    return { cfg, at: Number(cfg.at), from, to, diff, mid };
+}
+export function resolveXDeltas(allSeries, configs) {
+    return configs.flatMap(cfg => {
+        const atX = Number(cfg.at);
+        const from = resolveXDeltaEndpoint(allSeries, cfg.from, atX);
+        const to = cfg.to ? resolveXDeltaEndpoint(allSeries, cfg.to, atX) : 0;
+        if (from === null || to === null)
+            return [];
+        return [buildDelta(cfg, from, to)];
+    });
+}
+export function resolveYDeltas(allSeries, configs) {
+    return configs.flatMap(cfg => {
+        const atY = Number(cfg.at);
+        const from = resolveYDeltaEndpoint(allSeries, cfg.from, atY);
+        const to = cfg.to ? resolveYDeltaEndpoint(allSeries, cfg.to, atY) : 0;
+        if (from === null || to === null)
+            return [];
+        return [buildDelta(cfg, from, to)];
+    });
+}

package/dist/plots/utils/segments.d.ts

@@ -0,0 +1,33 @@
+import type { AxisValue, Series } from '../../types/plots/common';
+import type { Segment, SegmentsMap, SeriesAwareSegmentsMap, LineSegmentStyle, VisualGroup } from '../../types/plots/styles';
+/** Narrows a {@link SegmentsMap} to its per-series record form. */
+export declare function isSeriesAware<TStyle>(segments: SegmentsMap<TStyle>): segments is SeriesAwareSegmentsMap<TStyle>;
+/**
+ * Returns the {@link Segment} list relevant for one series. If `segments` is
+ * the global array form every series gets the same list; if it is the record
+ * form only the entry keyed by `seriesName` is used (falling back to `[]`).
+ */
+export declare function resolveSegmentsForSeries<TStyle>(segments: SegmentsMap<TStyle>, seriesName: string): Segment<TStyle>[];
+/** Returns true when `xVal` falls inside any of a segment's x ranges. */
+export declare function matchesSegmentX<TStyle>(xVal: AxisValue, seg: Segment<TStyle>): boolean;
+/**
+ * For each segment in `segs`, returns the subset of `data` rows whose x value
+ * (from `xAccessor`) falls inside any of the segment's x ranges. Rows are
+ * not deduplicated across segments — a row that matches multiple segments
+ * appears in each resulting array.
+ *
+ * Used by component and hover markers with the `'segment'` strategy.
+ */
+export declare function getDataForSegments<TData, TStyle>(data: TData[], xAccessor: (d: TData) => AxisValue, segs: Segment<TStyle>[]): TData[][];
+/**
+ * Warns about obvious configuration mistakes:
+ * - Multiple segments with no `areas` in the same series (they all match
+ *   everything; only the last style will be visible).
+ */
+export declare function validateSegments<TStyle>(segments: SegmentsMap<TStyle>): void;
+/**
+ * Builds the full list of visual groups — one per series — ready to render.
+ * Each group's `visualSegments` is derived from the series' entry in
+ * `segments` (or the global array when `segments` is in array form).
+ */
+export declare function buildGroupedSeries<S extends Series<any>, TStyle = LineSegmentStyle>(seriesList: S[], segments: SegmentsMap<TStyle>): VisualGroup<S, TStyle>[];

package/dist/plots/utils/segments.js

@@ -0,0 +1,153 @@
+import { resolveAccessor } from './accessors';
+/** Narrows a {@link SegmentsMap} to its per-series record form. */
+export function isSeriesAware(segments) {
+    return !Array.isArray(segments);
+}
+/**
+ * Returns the {@link Segment} list relevant for one series. If `segments` is
+ * the global array form every series gets the same list; if it is the record
+ * form only the entry keyed by `seriesName` is used (falling back to `[]`).
+ */
+export function resolveSegmentsForSeries(segments, seriesName) {
+    return Array.isArray(segments) ? segments : (segments[seriesName] ?? []);
+}
+/** Returns true when `xVal` falls inside any of a segment's x ranges. */
+export function matchesSegmentX(xVal, seg) {
+    const areas = seg.areas;
+    if (!areas || areas.length === 0)
+        return true;
+    return areas.some((area) => areaMatchesX(xVal, area));
+}
+function areaMatchesX(xVal, area) {
+    if (!area.x)
+        return true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (area.x.from === undefined || xVal >= area.x.from) &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (area.x.to === undefined || xVal <= area.x.to);
+}
+function areaMatchesXY(xVal, yVal, area) {
+    if (!areaMatchesX(xVal, area))
+        return false;
+    if (!area.y)
+        return true;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (area.y.from === undefined || yVal >= area.y.from) &&
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        (area.y.to === undefined || yVal <= area.y.to);
+}
+/**
+ * For each segment in `segs`, returns the subset of `data` rows whose x value
+ * (from `xAccessor`) falls inside any of the segment's x ranges. Rows are
+ * not deduplicated across segments — a row that matches multiple segments
+ * appears in each resulting array.
+ *
+ * Used by component and hover markers with the `'segment'` strategy.
+ */
+export function getDataForSegments(data, xAccessor, segs) {
+    return segs.map((seg) => {
+        const areas = seg.areas;
+        if (!areas || areas.length === 0)
+            return data;
+        return data.filter((d) => areas.some((area) => areaMatchesX(xAccessor(d), area)));
+    });
+}
+/**
+ * Warns about obvious configuration mistakes:
+ * - Multiple segments with no `areas` in the same series (they all match
+ *   everything; only the last style will be visible).
+ */
+export function validateSegments(segments) {
+    const check = (label, segs) => {
+        const catchAlls = segs.filter((s) => !s.areas || s.areas.length === 0).length;
+        if (catchAlls > 1) {
+            console.warn(`segments ${label}: ${catchAlls} entries have no areas — ` +
+                `they each match every data point; only the last one's style will be visible.`);
+        }
+    };
+    if (Array.isArray(segments)) {
+        check('(global)', segments);
+    }
+    else {
+        for (const [name, segs] of Object.entries(segments)) {
+            check(`"${name}"`, segs);
+        }
+    }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function resolveSeriesSegments(series, segs) {
+    if (!segs.length) {
+        return [{ data: series.data, style: {} }];
+    }
+    const getX = resolveAccessor(series.x);
+    const getY = resolveAccessor(series.y);
+    // For each data point, find the first matching segment index (-1 = unmatched).
+    const matchIdx = series.data.map((d) => {
+        const xVal = getX(d);
+        const yVal = getY(d);
+        return segs.findIndex((seg) => {
+            const areas = seg.areas;
+            if (!areas || areas.length === 0)
+                return true;
+            return areas.some((area) => areaMatchesXY(xVal, yVal, area));
+        });
+    });
+    const runs = [];
+    for (let i = 0; i < series.data.length; i++) {
+        const idx = matchIdx[i];
+        const last = runs[runs.length - 1];
+        if (last && last.segIdx === idx) {
+            last.data.push(series.data[i]);
+        }
+        else {
+            runs.push({ data: [series.data[i]], segIdx: idx });
+        }
+    }
+    const defaultVisual = [];
+    const connectors = [];
+    const userVisual = [];
+    for (let r = 0; r < runs.length; r++) {
+        const run = runs[r];
+        if (run.segIdx === -1) {
+            // Unmatched run: insert bridge points so the line connects to adjacent
+            // user segments without a gap.
+            const bridged = [];
+            if (r > 0)
+                bridged.push(runs[r - 1].data[runs[r - 1].data.length - 1]);
+            bridged.push(...run.data);
+            if (r < runs.length - 1)
+                bridged.push(runs[r + 1].data[0]);
+            defaultVisual.push({ data: bridged, style: {} });
+        }
+        else {
+            userVisual.push({ data: run.data, style: segs[run.segIdx].style ?? {} });
+            // When the next run is also a user segment (no unmatched data between them),
+            // insert a line-only connector so the lines join without a gap. Using a
+            // separate mark (rather than appending a bridge point to the current run)
+            // avoids rendering an extra dot at the shared boundary point.
+            const nextRun = runs[r + 1];
+            if (nextRun && nextRun.segIdx !== -1) {
+                connectors.push({
+                    data: [run.data[run.data.length - 1], nextRun.data[0]],
+                    style: {},
+                });
+            }
+        }
+    }
+    if (defaultVisual.length === 0 && connectors.length === 0)
+        return userVisual;
+    // Defaults and connectors render first so user segments paint on top at
+    // their endpoints, ensuring the correct dot style at boundary points.
+    return [...defaultVisual, ...connectors, ...userVisual];
+}
+/**
+ * Builds the full list of visual groups — one per series — ready to render.
+ * Each group's `visualSegments` is derived from the series' entry in
+ * `segments` (or the global array when `segments` is in array form).
+ */
+export function buildGroupedSeries(seriesList, segments) {
+    return seriesList.map((s) => ({
+        series: s,
+        visualSegments: resolveSeriesSegments(s, resolveSegmentsForSeries(segments, s.name)),
+    }));
+}

package/dist/stores/device.d.ts

@@ -0,0 +1,7 @@
+export declare const isBrowser: boolean;
+export declare const isMobile: import("svelte/store").Readable<boolean>;
+export declare const isTablet: import("svelte/store").Readable<boolean>;
+export declare const isLaptop: import("svelte/store").Readable<boolean>;
+export declare const isDesktop: import("svelte/store").Readable<boolean>;
+export declare const viewportWidth: import("svelte/store").Readable<number>;
+export declare const viewportHeight: import("svelte/store").Readable<number>;

package/dist/stores/device.js

@@ -0,0 +1,39 @@
+import { derived, readable } from 'svelte/store';
+export const isBrowser = typeof window !== 'undefined';
+const viewport = readable({ width: 0, height: 0 }, (set) => {
+    if (!isBrowser)
+        return;
+    let raf = 0;
+    let lastWidth = -1;
+    let lastHeight = -1;
+    const flush = () => {
+        raf = 0;
+        const width = window.innerWidth;
+        const height = window.innerHeight;
+        if (width === lastWidth && height === lastHeight)
+            return;
+        lastWidth = width;
+        lastHeight = height;
+        set({ width, height });
+    };
+    const schedule = () => {
+        if (raf)
+            return;
+        raf = requestAnimationFrame(flush);
+    };
+    flush();
+    window.addEventListener('resize', schedule);
+    return () => {
+        window.removeEventListener('resize', schedule);
+        if (raf)
+            cancelAnimationFrame(raf);
+    };
+});
+export const isMobile = derived(viewport, ($viewport) => $viewport.width < 768);
+export const isTablet = derived(viewport, ($viewport) => ($viewport.width >= 768 &&
+    $viewport.width < 1024));
+export const isLaptop = derived(viewport, ($viewport) => ($viewport.width >= 1024 &&
+    $viewport.width < 1280));
+export const isDesktop = derived(viewport, ($viewport) => $viewport.width >= 1280);
+export const viewportWidth = derived(viewport, ($viewport) => $viewport.width);
+export const viewportHeight = derived(viewport, ($viewport) => $viewport.height);