@ruckc/truss-chart 1.6.0 → 1.8.0

package/dist/DonutChart.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
-	import { fmtValue, seriesColor, MAX_SERIES } from './util.js';
+	import { fmtValue, seriesColor, str, MAX_SERIES } from './util.js';
 
 	let {
 		slices,
@@ -54,6 +54,8 @@
 	const focus = $derived(vis.find((s) => s.name === active));
 	/** Share of the visible total; 0 (not NaN) when everything visible is 0. */
 	const pct = (v: number) => (total ? Math.round((v / total) * 100) : 0);
+	// built in script: interpolating in markup would add unreachable `?? ''` branches
+	const sliceLabel = (a: { name: string; value: number }) => `${a.name}: ${str(format(a.value))} (${pct(a.value)}%)`;
 </script>
 
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
@@ -64,7 +66,7 @@
 					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 					<path
 						role="img" d={a.d} fill={a.color} fill-rule="evenodd" class="slice" data-dim={active != null && active !== a.name} tabindex="0"
-						aria-label="{a.name}: {format(a.value)} ({pct(a.value)}%)"
+						aria-label={sliceLabel(a)}
 						onpointerenter={() => (active = a.name)} onpointerleave={() => (active = null)}
 						onfocus={() => (active = a.name)} onblur={() => (active = null)}
 					/>
@@ -81,7 +83,7 @@
 		<table>
 			<thead><tr><th>Slice</th><th>Value</th><th>Share</th></tr></thead>
 			<tbody>
-				{#each base as s}<tr><td>{s.name}</td><td>{format(s.value)}</td><td>{Math.round((s.value / (base.reduce((a, q) => a + q.value, 0) || 1)) * 100)}%</td></tr>{/each}
+				{#each base as s}<tr><td>{s.name}</td><td>{format(s.value)}</td><td>{`${Math.round((s.value / (base.reduce((a, q) => a + q.value, 0) || 1)) * 100)}%`}</td></tr>{/each}
 			</tbody>
 		</table>
 	{/snippet}

package/dist/Histogram.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
 	import Tooltip from './Tooltip.svelte';
-	import { barPath, fmtAxis, fmtValue, linear, niceTicks, seriesColor } from './util.js';
+	import { barPath, fmtAxis, fmtValue, linear, niceTicks, seriesColor, str } from './util.js';
 
 	let {
 		values,
@@ -56,6 +56,9 @@
 		range = r;
 		onbrush?.(r);
 	}
+	// built in script: interpolating in markup would add unreachable `?? ''` branches
+	const share = (c: number) => (total ? Math.round((c / total) * 100) : 0);
+	const span = (i: number) => `${str(xFormat(edges[i]))} – ${str(xFormat(edges[i + 1]))}`;
 	const snapLo = (v: number) => grid.min + Math.floor((v - grid.min) / step + 1e-9) * step;
 	const snapHi = (v: number) => grid.min + Math.ceil((v - grid.min) / step - 1e-9) * step;
 </script>
@@ -127,8 +130,8 @@
 
 		{#if hover != null && !drag}
 			<Tooltip x={X(edges[hover] + step / 2)} y={Y(counts[hover]) - 4} width={w}>
-				<div class="head">{xFormat(edges[hover])} – {xFormat(edges[hover + 1])}</div>
-				<div class="row"><b>{counts[hover]}</b><span class="name">{total ? Math.round((counts[hover] / total) * 100) : 0}% of {total}</span></div>
+				<div class="head">{span(hover)}</div>
+				<div class="row"><b>{counts[hover]}</b><span class="name">{`${share(counts[hover])}% of ${total}`}</span></div>
 			</Tooltip>
 		{/if}
 	{/snippet}
@@ -138,7 +141,7 @@
 			<thead><tr><th>Range</th><th>Count</th><th>Share</th></tr></thead>
 			<tbody>
 				{#each counts as c, i}
-					<tr><td>{xFormat(edges[i])} – {xFormat(edges[i + 1])}</td><td>{c}</td><td>{total ? Math.round((c / total) * 100) : 0}%</td></tr>
+					<tr><td>{span(i)}</td><td>{c}</td><td>{`${share(c)}%`}</td></tr>
 				{/each}
 			</tbody>
 		</table>

package/dist/LineChart.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import ChartFrame from './ChartFrame.svelte';
 	import Tooltip from './Tooltip.svelte';
-	import type { Series } from './types.js';
-	import { fmtAxis, fmtValue, fmtX, linear, niceTicks, seriesColor, spreadLabels, MAX_SERIES } from './util.js';
+	import type { Series, Band, ReferenceLine } from './types.js';
+	import { fmtAxis, fmtValue, fmtX, isPos, linear, logLinear, logTicks, niceTicks, seriesColor, str, spreadLabels, MAX_SERIES } from './util.js';
 
 	let {
 		x,
@@ -14,7 +14,12 @@
 		stacked = false,
 		zeroBaseline = false,
 		directLabels = true,
-		yFormat = fmtValue
+		yFormat = fmtValue,
+		xFormat,
+		band,
+		referenceLines = [],
+		xScale = 'linear',
+		yScale: yScaleKind = 'linear'
 	}: {
 		/** Shared x positions: numbers or Dates. */
 		x: (number | Date)[];
@@ -22,25 +27,86 @@
 		series: Series[];
 		title?: string;
 		subtitle?: string;
-		height?: number;
+		/**
+		 * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+		 * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+		 * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+		 */
+		height?: number | 'fill';
 		area?: boolean;
 		/** Only meaningful with `area`. `true` stacks the series; `'percent'` normalises each x to 100%. Missing values count as 0 in a stack; tooltips and the table show the raw values. */
 		stacked?: boolean | 'percent';
+		/** Ensures 0 is inside the y-domain. It does not draw a line at 0: add `referenceLines={[{ value: 0 }]}` for that. */
 		zeroBaseline?: boolean;
 		/** Name labels at line ends when ≤ 4 series. */
 		directLabels?: boolean;
 		yFormat?: (n: number) => string;
+		/** Formats x values (a Date when `x` holds Dates) for axis ticks, tooltip and table. Default: number or date-aware short format. */
+		xFormat?: (x: number | Date) => string;
+		/**
+		 * A chart-level shaded envelope drawn behind the lines (e.g. a confidence or min/max range). `lo` and `hi` align
+		 * with `x` by index; `null` in either leaves a gap. It widens the y-domain, appears in the tooltip and table as
+		 * `lo – hi` under `label` (default "Band"), and uses `color` (default: the first series' colour).
+		 * Ignored when `stacked` is on.
+		 */
+		band?: Band;
+		/** Emphasised, labelled horizontal lines. Their values widen the y-domain; they are also announced in the chart's accessible name and listed under the table view. */
+		referenceLines?: ReferenceLine[];
+		/**
+		 * `'log'` plots x on a base-10 log axis with ticks at powers of 10. Points with x <= 0 are dropped (not drawn,
+		 * not in the tooltip or table). Ignored for Date x values.
+		 */
+		xScale?: 'linear' | 'log';
+		/**
+		 * `'log'` plots y on a base-10 log axis with ticks at powers of 10. Values <= 0 (including band and
+		 * reference values) are treated as missing and shown as an em dash; area fills run down to the axis
+		 * minimum. `stacked` is ignored (series draw independently).
+		 */
+		yScale?: 'linear' | 'log';
 	} = $props();
 
 	let hidden = $state<string[]>([]);
 	let hover = $state<number | null>(null);
 
-	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: s.color ?? seriesColor(i) })));
-	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
 	const isDate = $derived(x[0] instanceof Date);
-	const xs = $derived(x.map((v) => +v));
-	const isStack = $derived(area && !!stacked);
-	const percent = $derived(area && stacked === 'percent');
+	const xLog = $derived(xScale === 'log' && !isDate);
+	const yLog = $derived(yScaleKind === 'log');
+	/** Indices of x kept after dropping non-positive x on a log axis. */
+	const ix = $derived(x.map((_, i) => i).filter((i) => !xLog || +x[i] > 0));
+	const clean = (v: number | null | undefined) => (v == null || (yLog && !isPos(v)) ? null : v);
+	const pick = (vals: (number | null)[]) => ix.map((i) => clean(vals[i]));
+	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: s.color ?? seriesColor(i), values: pick(s.values) })));
+	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
+	const xs = $derived(ix.map((i) => +x[i]));
+	const isStack = $derived(area && !!stacked && !yLog);
+	const percent = $derived(isStack && stacked === 'percent');
+	const bandData = $derived(band && !isStack ? { lo: pick(band.lo), hi: pick(band.hi) } : null);
+	const bandAt = (i: number) => { const lo = bandData?.lo[i], hi = bandData?.hi[i]; return lo != null && hi != null ? { lo, hi } : null; };
+	const bandColor = $derived(band?.color ?? all[0]?.color ?? 'var(--tr-outline)');
+	const bandLabel = $derived(band?.label ?? 'Band');
+	const refs = $derived(referenceLines.filter((r) => !yLog || isPos(r.value)));
+	const xSpan = $derived(Math.max(...xs) - Math.min(...xs));
+	const fx = (v: number) => (xFormat ? xFormat(isDate ? new Date(v) : v) : fmtX(v, xSpan, isDate));
+	const refsText = $derived(refs.map((r) => `${r.label ?? 'Reference'} at ${yFormat(r.value)}`).join(', '));
+	const rangeText = (b: { lo: number; hi: number }) => `${yFormat(b.lo)} – ${yFormat(b.hi)}`;
+
+	let wrap = $state<HTMLElement>();
+	let fillH = $state(240);
+	const fill = $derived(height === 'fill');
+	const H = $derived(height === 'fill' ? fillH : height);
+	$effect(() => {
+		if (!fill || !wrap) return;
+		const el = wrap;
+		const measure = () => {
+			const fig = el.querySelector('figure'), svg = el.querySelector('svg[role=group]');
+			if (!fig || !svg) return;
+			fillH = Math.max(120, Math.floor(el.clientHeight - (fig.getBoundingClientRect().height - svg.getBoundingClientRect().height)));
+		};
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		measure();
+		return () => ro.disconnect();
+	});
 	/** Per visible series: [lo, hi] band at each x (stacked), else lo = 0, hi = value. */
 	const bands = $derived.by(() => {
 		if (!isStack) return vis.map((s) => s.values.map((v) => (v == null ? null : { lo: 0, hi: v })));
@@ -56,22 +122,32 @@
 		});
 		return out;
 	});
-	const share = (i: number, k: number) => { const b = bands[k][i]; return b ? b.hi - b.lo : 0; };
+	// only read in percent mode, which is always stacked: every band is then filled in
+	const share = (i: number, k: number) => { const b = bands[k][i]!; return b.hi - b.lo; };
+	// built in script: interpolating in markup would add unreachable `?? ''` branches
+	const areaPath = (seg: number[], X: (v: number) => number, Y: (v: number) => number, k: number) =>
+		`M${seg.map((i) => `${X(xs[i])},${Y(bands[k][i]!.hi)}`).join(' L')} L${seg.toReversed().map((i) => `${X(xs[i])},${Y(bands[k][i]!.lo)}`).join(' L')}Z`;
+	const tipName = (name: string, i: number, k: number) => `${name}${percent && vis[k].values[i] != null ? ` · ${fmtValue(share(i, k))}%` : ''}`;
+	const cellText = (s: (typeof all)[number], i: number) =>
+		`${s.values[i] == null ? '—' : str(yFormat(s.values[i]!))}${percent && s.values[i] != null && !hidden.includes(s.name) ? ` (${fmtValue(share(i, vis.indexOf(s)))}%)` : ''}`;
 	const labelled = $derived(directLabels && all.length > 1 && all.length <= 4);
 	const items = $derived(all.map((s) => ({ name: s.name, color: s.color, hidden: hidden.includes(s.name) })));
 	const toggle = (n: string) => (hidden = hidden.includes(n) ? hidden.filter((h) => h !== n) : [...hidden, n]);
 
-	const yScale = $derived.by(() => {
+	const yDom = $derived.by(() => {
 		let lo = Infinity, hi = -Infinity;
-		for (const b of bands) for (const v of b) if (v != null) { lo = Math.min(lo, v.lo, v.hi); hi = Math.max(hi, v.lo, v.hi); }
+		const add = (v: number) => { if (!yLog || v > 0) { lo = Math.min(lo, v); hi = Math.max(hi, v); } };
+		for (const b of bands) for (const v of b) if (v != null) { add(v.lo); add(v.hi); }
+		for (let i = 0; i < xs.length; i++) { const b = bandAt(i); if (b) { add(b.lo); add(b.hi); } }
+		for (const r of refs) add(r.value);
 		if (percent) hi = 100;
-		if (!isFinite(lo)) { lo = 0; hi = 1; }
-		if (area || zeroBaseline) lo = Math.min(lo, 0);
-		return niceTicks(lo, hi, 5);
+		if (!isFinite(lo)) { lo = yLog ? 1 : 0; hi = yLog ? 10 : 1; }
+		if (!yLog && (area || zeroBaseline)) lo = Math.min(lo, 0);
+		return yLog ? logTicks(lo, hi) : niceTicks(lo, hi, 5);
 	});
 
-	function segments(values: (number | null)[]) {
-		if (isStack) return [values.map((_, i) => i)];
+	function segments(values: (number | null)[], forceGaps = false) {
+		if (isStack && !forceGaps) return [values.map((_, i) => i)];
 		const out: number[][] = [];
 		let cur: number[] = [];
 		values.forEach((v, i) => { if (v == null) { if (cur.length) out.push(cur); cur = []; } else cur.push(i); });
@@ -80,20 +156,21 @@
 	}
 </script>
 
+{#snippet chart()}
 <ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
 	{#snippet plot(w)}
+		{@const height = H}
 		{@const m = { top: 12, right: labelled ? 92 : 14, bottom: 26, left: 46 }}
-		{@const X = linear(Math.min(...xs), Math.max(...xs), m.left, w - m.right)}
-		{@const Y = linear(yScale.min, yScale.max, height - m.bottom, m.top)}
-		{@const span = Math.max(...xs) - Math.min(...xs)}
-		{@const xTicks = xs.length <= 8 ? xs : niceTicks(Math.min(...xs), Math.max(...xs), Math.max(2, Math.floor(w / 100))).ticks.filter((t) => t >= Math.min(...xs) && t <= Math.max(...xs))}
+		{@const X = (xLog ? logLinear : linear)(Math.min(...xs), Math.max(...xs), m.left, w - m.right)}
+		{@const Y = (yLog ? logLinear : linear)(yDom.min, yDom.max, height - m.bottom, m.top)}
+		{@const xTicks = xLog ? logTicks(Math.min(...xs), Math.max(...xs)).ticks.filter((t) => t >= Math.min(...xs) && t <= Math.max(...xs)) : xs.length <= 8 ? xs : niceTicks(Math.min(...xs), Math.max(...xs), Math.max(2, Math.floor(w / 100))).ticks.filter((t) => t >= Math.min(...xs) && t <= Math.max(...xs))}
 		{@const ends = vis.map((s, si) => { const k = s.values.findLastIndex((v) => v != null); return k < 0 ? null : { s, y: Y(bands[si][k]!.hi) }; }).filter((e) => !!e)}
 		{@const labelY = spreadLabels(ends.map((e) => e.y), 14, m.top + 4, height - m.bottom)}
 
 		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
 		<svg
 			width={w} {height} role="group" tabindex="0"
-			aria-label="{title ?? 'Line chart'}. Use left and right arrow keys to read values."
+			aria-label="{title ?? 'Line chart'}. Use left and right arrow keys to read values.{refsText && ` Reference lines: ${refsText}.`}"
 			onpointermove={(e) => {
 				const px = e.clientX - e.currentTarget.getBoundingClientRect().left;
 				let best = 0;
@@ -110,24 +187,35 @@
 				e.preventDefault();
 			}}
 		>
-			{#each yScale.ticks as t}
+			{#each yDom.ticks as t}
 				<line class="grid" x1={m.left} x2={w - m.right} y1={Y(t)} y2={Y(t)} />
 				<text class="tick" x={m.left - 8} y={Y(t)} text-anchor="end" dominant-baseline="middle">{fmtAxis(t)}</text>
 			{/each}
 			{#each xTicks as t}
-				<text class="tick" x={X(t)} y={height - 8} text-anchor="middle">{fmtX(t, span, isDate)}</text>
+				<text class="tick" x={X(t)} y={height - 8} text-anchor="middle">{fx(t)}</text>
 			{/each}
 
+			{#if bandData}
+				{#each segments(bandData.lo.map((_, i) => (bandAt(i) ? 0 : null)), true) as seg}
+					<path class="band" fill={bandColor} d="M{seg.map((i) => `${X(xs[i])},${Y(bandAt(i)!.hi)}`).join(' L')} L{seg.toReversed().map((i) => `${X(xs[i])},${Y(bandAt(i)!.lo)}`).join(' L')}Z" />
+				{/each}
+			{/if}
+
 			{#each vis as s, si (s.name)}
 				{#if area}
 					{#each segments(s.values) as seg}
 						<path class="area" class:stack={isStack} fill={s.color}
-							d="M{seg.map((i) => `${X(xs[i])},${Y(bands[si][i]!.hi)}`).join(' L')} L{seg.toReversed().map((i) => `${X(xs[i])},${Y(bands[si][i]!.lo)}`).join(' L')}Z" />
+							d={areaPath(seg, X, Y, si)} />
 					{/each}
 				{/if}
 				<path class="line" stroke={s.color} d={segments(s.values).map((seg) => seg.map((i, k) => `${k ? 'L' : 'M'}${X(xs[i]).toFixed(1)},${Y(bands[si][i]!.hi).toFixed(1)}`).join(' ')).join(' ')} />
 			{/each}
 
+			{#each refs as r}
+				<line class="ref" x1={m.left} x2={w - m.right} y1={Y(r.value)} y2={Y(r.value)} />
+				{#if r.label}<text class="reflabel" x={m.left + 4} y={Y(r.value) - 4}>{r.label}</text>{/if}
+			{/each}
+
 			{#each ends as e, k}
 				{#if labelled}<text class="direct" x={w - m.right + 8} y={labelY[k]} dominant-baseline="middle">{e.s.name}</text>{/if}
 			{/each}
@@ -142,25 +230,40 @@
 
 		{#if hover != null}
 			<Tooltip x={X(xs[hover])} y={height / 2} width={w}>
-				<div class="head">{fmtX(xs[hover], span, isDate)}</div>
+				<div class="head">{fx(xs[hover])}</div>
 				{#each vis as s, si}
-					<div class="row"><span class="line-key" style:background={s.color}></span><b>{s.values[hover] == null ? '—' : yFormat(s.values[hover]!)}</b><span class="name">{s.name}{#if percent && s.values[hover] != null} · {fmtValue(share(hover, si))}%{/if}</span></div>
+					<div class="row"><span class="line-key" style:background={s.color}></span><b>{s.values[hover] == null ? '—' : yFormat(s.values[hover]!)}</b><span class="name">{tipName(s.name, hover, si)}</span></div>
 				{/each}
+				{#if bandAt(hover)}
+					<div class="row"><span class="band-key" style:background={bandColor}></span><b>{rangeText(bandAt(hover)!)}</b><span class="name">{bandLabel}</span></div>
+				{/if}
 			</Tooltip>
 		{/if}
 	{/snippet}
 
 	{#snippet table()}
 		<table>
-			<thead><tr><th>{isDate ? 'Date' : 'X'}</th>{#each all as s}<th>{s.name}</th>{/each}</tr></thead>
+			<thead><tr><th>{isDate ? 'Date' : 'X'}</th>{#each all as s}<th>{s.name}</th>{/each}{#if bandData}<th>{bandLabel}</th>{/if}</tr></thead>
 			<tbody>
 				{#each xs as v, i}
-					<tr><td>{fmtX(v, Math.max(...xs) - Math.min(...xs), isDate)}</td>{#each all as s}<td>{s.values[i] == null ? '—' : yFormat(s.values[i]!)}{#if percent && s.values[i] != null && !hidden.includes(s.name)} ({fmtValue(share(i, vis.indexOf(s)))}%){/if}</td>{/each}</tr>
+					<tr><td>{fx(v)}</td>{#each all as s}<td>{cellText(s, i)}</td>{/each}{#if bandData}<td>{bandAt(i) ? rangeText(bandAt(i)!) : '—'}</td>{/if}</tr>
 				{/each}
 			</tbody>
+			{#if refs.length}
+				<tfoot>
+					{#each refs as r}<tr><th scope="row">{r.label ?? 'Reference'}</th><td colspan={all.length + (bandData ? 1 : 0)}>{yFormat(r.value)}</td></tr>{/each}
+				</tfoot>
+			{/if}
 		</table>
 	{/snippet}
 </ChartFrame>
+{/snippet}
+
+{#if fill}
+	<div class="fillwrap" bind:this={wrap}>{@render chart()}</div>
+{:else}
+	{@render chart()}
+{/if}
 
 <style>
 	svg { display: block; outline: none; overflow: visible; }
@@ -170,6 +273,11 @@
 	.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
 	.area { fill-opacity: 0.14; }
 	.area.stack { fill-opacity: 0.55; }
+	.band { fill-opacity: 0.18; stroke: none; }
+	.ref { stroke: var(--tr-on-surface); stroke-width: 1.5; stroke-dasharray: 6 3; }
+	.reflabel { fill: var(--tr-on-surface); font-size: var(--tr-text-xs); font-weight: 600; }
+	.band-key { width: 12px; height: 8px; border-radius: 2px; flex: none; opacity: 0.4; }
+	.fillwrap { height: 100%; min-height: 0; overflow: hidden; }
 	.direct { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
 	.cross { stroke: var(--tr-outline); stroke-width: 1; stroke-dasharray: 3 3; }
 	.dot { stroke: var(--tr-surface-container-low); stroke-width: 2; }

package/dist/LineChart.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Series } from './types.js';
+import type { Series, Band, ReferenceLine } from './types.js';
 type $$ComponentProps = {
     /** Shared x positions: numbers or Dates. */
     x: (number | Date)[];
@@ -6,14 +6,42 @@ type $$ComponentProps = {
     series: Series[];
     title?: string;
     subtitle?: string;
-    height?: number;
+    /**
+     * Plot height in px (default 240), or `'fill'` to size to the container's height. `'fill'` measures the
+     * parent with a ResizeObserver, so the parent needs a definite height (e.g. `height: 360px`, or a grid/flex
+     * track with a fixed size). A parent with `height: auto` collapses to the 120px minimum.
+     */
+    height?: number | 'fill';
     area?: boolean;
     /** Only meaningful with `area`. `true` stacks the series; `'percent'` normalises each x to 100%. Missing values count as 0 in a stack; tooltips and the table show the raw values. */
     stacked?: boolean | 'percent';
+    /** Ensures 0 is inside the y-domain. It does not draw a line at 0: add `referenceLines={[{ value: 0 }]}` for that. */
     zeroBaseline?: boolean;
     /** Name labels at line ends when ≤ 4 series. */
     directLabels?: boolean;
     yFormat?: (n: number) => string;
+    /** Formats x values (a Date when `x` holds Dates) for axis ticks, tooltip and table. Default: number or date-aware short format. */
+    xFormat?: (x: number | Date) => string;
+    /**
+     * A chart-level shaded envelope drawn behind the lines (e.g. a confidence or min/max range). `lo` and `hi` align
+     * with `x` by index; `null` in either leaves a gap. It widens the y-domain, appears in the tooltip and table as
+     * `lo – hi` under `label` (default "Band"), and uses `color` (default: the first series' colour).
+     * Ignored when `stacked` is on.
+     */
+    band?: Band;
+    /** Emphasised, labelled horizontal lines. Their values widen the y-domain; they are also announced in the chart's accessible name and listed under the table view. */
+    referenceLines?: ReferenceLine[];
+    /**
+     * `'log'` plots x on a base-10 log axis with ticks at powers of 10. Points with x <= 0 are dropped (not drawn,
+     * not in the tooltip or table). Ignored for Date x values.
+     */
+    xScale?: 'linear' | 'log';
+    /**
+     * `'log'` plots y on a base-10 log axis with ticks at powers of 10. Values <= 0 (including band and
+     * reference values) are treated as missing and shown as an em dash; area fills run down to the axis
+     * minimum. `stacked` is ignored (series draw independently).
+     */
+    yScale?: 'linear' | 'log';
 };
 declare const LineChart: import("svelte").Component<$$ComponentProps, {}, "">;
 type LineChart = ReturnType<typeof LineChart>;

package/dist/StatTile.svelte

@@ -9,7 +9,8 @@
 		delta,
 		deltaLabel = 'vs previous',
 		deltaGoodDirection = 'up',
-		spark
+		spark,
+		size = 'md'
 	}: {
 		label: string;
 		value: number | string;
@@ -22,12 +23,16 @@
 		deltaGoodDirection?: 'up' | 'down';
 		/** Recent values for a trailing trend line. */
 		spark?: number[];
+		/** `'sm'` uses `--tr-text-xl` for the value and tighter padding. The value size can also be set from outside with the `--trc-stat-value-size` custom property (default 28px). */
+		size?: 'sm' | 'md';
 	} = $props();
 
 	const shown = $derived(typeof value === 'number' ? (format ?? fmtValue)(value) : value);
 	const dir = $derived(delta == null || delta === 0 ? 'flat' : delta > 0 ? 'up' : 'down');
 	const tone = $derived(dir === 'flat' ? 'neutral' : dir === deltaGoodDirection ? 'good' : 'bad');
-	const deltaText = $derived(delta == null ? '' : `${delta > 0 ? '+' : delta < 0 ? '−' : ''}${fmtValue(Math.abs(delta))}%`);
+	const signed = (d: number) => `${d > 0 ? '+' : d < 0 ? '−' : ''}${fmtValue(Math.abs(d))}%`;
+	// built in script: interpolating in markup would add an unreachable `?? ''` branch
+	const deltaClass = $derived(`delta ${tone}`);
 	const summary = $derived(
 		`${label}: ${shown}.` +
 			(delta == null ? '' : dir === 'flat' ? ` No change ${deltaLabel}.` : ` ${dir === 'up' ? 'Up' : 'Down'} ${fmtValue(Math.abs(delta))}% ${deltaLabel}, ${tone === 'good' ? 'favourable' : 'unfavourable'}.`) +
@@ -35,27 +40,29 @@
 	);
 </script>
 
-<div class="tile" role="group" aria-label={summary}>
+<div class="tile" class:sm={size === 'sm'} role="group" aria-label={summary}>
 	<div class="label" aria-hidden="true">{label}</div>
 	<div class="row" aria-hidden="true">
 		<div class="value">{shown}</div>
 		{#if spark && spark.length > 1}<Sparkline values={spark} {label} />{/if}
 	</div>
 	{#if delta != null}
-		<div class="delta {tone}" data-dir={dir} aria-hidden="true">
+		<div class={deltaClass} data-dir={dir} aria-hidden="true">
 			<svg viewBox="0 0 12 12" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
 				{#if dir === 'up'}<path d="M6 10V2M2.5 5.5 6 2l3.5 3.5" />{:else if dir === 'down'}<path d="M6 2v8M2.5 6.5 6 10l3.5-3.5" />{:else}<path d="M2 6h8" />{/if}
 			</svg>
-			<b>{deltaText}</b><span class="vs">{deltaLabel}</span>
+			<b>{signed(delta)}</b><span class="vs">{deltaLabel}</span>
 		</div>
 	{/if}
 </div>
 
 <style>
 	.tile { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); color: var(--tr-on-surface); font-family: var(--tr-font-sans); }
+	.tile.sm { padding: 8px 12px; gap: 2px; }
+	.tile.sm .value { font-size: var(--trc-stat-value-size, var(--tr-text-xl)); }
 	.label { color: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); font-weight: 600; }
 	.row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
-	.value { font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
+	.value { font-size: var(--trc-stat-value-size, 28px); font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
 	.delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--tr-text-sm); font-variant-numeric: tabular-nums; }
 	.delta.good { color: var(--tr-success); }
 	.delta.bad { color: var(--tr-danger); }

package/dist/StatTile.svelte.d.ts

@@ -10,6 +10,8 @@ type $$ComponentProps = {
     deltaGoodDirection?: 'up' | 'down';
     /** Recent values for a trailing trend line. */
     spark?: number[];
+    /** `'sm'` uses `--tr-text-xl` for the value and tighter padding. The value size can also be set from outside with the `--trc-stat-value-size` custom property (default 28px). */
+    size?: 'sm' | 'md';
 };
 declare const StatTile: import("svelte").Component<$$ComponentProps, {}, "">;
 type StatTile = ReturnType<typeof StatTile>;

package/dist/charts.css

@@ -17,3 +17,31 @@
 	--trc-s1: #3987e5; --trc-s2: #d95926; --trc-s3: #199e70; --trc-s4: #c98500;
 	--trc-s5: #d55181; --trc-s6: #008300; --trc-s7: #9085e9; --trc-s8: #e66767;
 }
+
+/*
+ * Sequential (--trc-seq-1..7) and diverging (--trc-div-1..7) ramps for continuous scales (heatmaps, choropleths, ColorScale).
+ * Sequential: one blue hue, lightness strictly monotonic from low (seq-1) to high (seq-7). In light mode low is the lightest
+ * step, in dark mode low is the darkest, so "more" always reads as stronger contrast against the surface.
+ * Diverging: blue (div-1) through a neutral midpoint (div-4) to orange (div-7). Each half is monotonic in lightness toward the
+ * neutral, and the poles stay distinguishable under protan, deutan and tritan simulation (OKLab delta-E >= 0.19).
+ */
+:root {
+	--trc-seq-1: #eaf3fe; --trc-seq-2: #c5ddfc; --trc-seq-3: #97c1f7; --trc-seq-4: #64a1ee;
+	--trc-seq-5: #3a81d7; --trc-seq-6: #1d60ad; --trc-seq-7: #10427b;
+	--trc-div-1: #11458c; --trc-div-2: #3c79d1; --trc-div-3: #94b9f1; --trc-div-4: #f0eeeb;
+	--trc-div-5: #ebaf86; --trc-div-6: #d26c28; --trc-div-7: #993e02;
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		--trc-seq-1: #0e294a; --trc-seq-2: #113d70; --trc-seq-3: #1b589e; --trc-seq-4: #3077cd;
+		--trc-seq-5: #589aed; --trc-seq-6: #8fbefa; --trc-seq-7: #c5ddfc;
+		--trc-div-1: #86bafe; --trc-div-2: #4c8edf; --trc-div-3: #285994; --trc-div-4: #2a2926;
+		--trc-div-5: #944e21; --trc-div-6: #dc7b40; --trc-div-7: #f9a870;
+	}
+}
+:root[data-theme='dark'] {
+	--trc-seq-1: #0e294a; --trc-seq-2: #113d70; --trc-seq-3: #1b589e; --trc-seq-4: #3077cd;
+	--trc-seq-5: #589aed; --trc-seq-6: #8fbefa; --trc-seq-7: #c5ddfc;
+	--trc-div-1: #86bafe; --trc-div-2: #4c8edf; --trc-div-3: #285994; --trc-div-4: #2a2926;
+	--trc-div-5: #944e21; --trc-div-6: #dc7b40; --trc-div-7: #f9a870;
+}

package/dist/density.d.ts

@@ -0,0 +1,44 @@
+export type DensityPoint = {
+    x: number;
+    y: number;
+    group?: string;
+};
+export type View = {
+    x0: number;
+    x1: number;
+    y0: number;
+    y1: number;
+};
+export type Prepared = {
+    xs: ArrayLike<number>;
+    ys: ArrayLike<number>;
+    /** Palette slot per point, or `null` when nothing is grouped (fast path). */
+    g: Uint8Array | null;
+    names: string[];
+    n: number;
+    /** Finite data extent, or `null` when there is nothing finite to plot. */
+    extent: View | null;
+};
+/**
+ * Normalises either input style into parallel arrays. Typed arrays are used as-is (no copy).
+ * Groups beyond the 8 palette slots, and points without a group in a grouped set, take slot 0.
+ */
+export declare function prepare(points: DensityPoint[] | undefined, xs: ArrayLike<number> | undefined, ys: ArrayLike<number> | undefined, groupIds?: Uint8Array, groupNames?: string[]): Prepared;
+/**
+ * Counts the points inside `v` into `out` (cols x rows, row 0 at the bottom, y up) in one pass, skipping hidden
+ * groups and non-finite values. Returns how many points fell inside the view. No allocation.
+ */
+export declare function bin(p: Prepared, hid: Uint8Array, v: View, cols: number, rows: number, out: Uint32Array): number;
+/** Index of the visible point nearest to the domain position (qx, qy) within `rx`/`ry` domain units, or -1. */
+export declare function nearest(p: Prepared, hid: Uint8Array, qx: number, qy: number, rx: number, ry: number): number;
+export declare const isHome: (v: View, h: View) => boolean;
+/** Zooms by factor `k` (>1 zooms in) keeping the point at fractions (fx, fy from the top) of the plot fixed. */
+export declare function zoomView(v: View, h: View, fx: number, fy: number, k: number): View;
+/** Shifts the window by fractions of its own span (positive fx moves right, positive fy moves up). */
+export declare function panView(v: View, h: View, fx: number, fy: number): View;
+/** Fallback sequential ramp (colour-blind safe, readable on light and dark surfaces); overridden by `--trc-seq-1..9`. */
+export declare const DEFAULT_RAMP: string[];
+/** `#rrggbb` or `rgb[a](r, g, b…)` (the forms a canvas returns for fillStyle) to [r, g, b]. */
+export declare function parseColor(s: string): [number, number, number];
+/** Interpolates the ramp at t in [0, 1]. */
+export declare function rampColor(stops: [number, number, number][], t: number): string;