@ruckc/truss-chart 0.0.0-stage → 1.0.0

package/dist/BarChart.svelte

@@ -0,0 +1,207 @@
+<script lang="ts">
+	import ChartFrame from './ChartFrame.svelte';
+	import Tooltip from './Tooltip.svelte';
+	import type { Series } from './types.js';
+	import { fmtAxis, fmtValue, linear, niceTicks, seriesColor, MAX_SERIES } from './util.js';
+
+	let {
+		categories,
+		series,
+		title,
+		subtitle,
+		height = 240,
+		stacked = false,
+		horizontal = false,
+		showValues = false,
+		yFormat = fmtValue
+	}: {
+		categories: string[];
+		/** Up to 8 series (fixed-order palette). Negative values are allowed everywhere, including stacked bars. */
+		series: Series[];
+		title?: string;
+		subtitle?: string;
+		/** Plot height in px (horizontal charts grow to fit their categories). */
+		height?: number;
+		/** `true` stacks values (positives up/right of zero, negatives down/left); `'percent'` normalises each category to 100%. */
+		stacked?: boolean | 'percent';
+		/** Bars run left→right with categories down the side — better for long labels and many categories. */
+		horizontal?: boolean;
+		/** Label the end of each bar (the stack total when stacked). */
+		showValues?: boolean;
+		yFormat?: (n: number) => string;
+	} = $props();
+
+	let hidden = $state<string[]>([]);
+	type Tip = { x: number; y: number; cat: string; name: string; value: number; color: string; share?: number };
+	let tip = $state<Tip | null>(null);
+
+	const all = $derived(series.slice(0, MAX_SERIES).map((s, i) => ({ ...s, i, color: seriesColor(i) })));
+	const vis = $derived(all.filter((s) => !hidden.includes(s.name)));
+	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 percent = $derived(stacked === 'percent');
+	const isStack = $derived(!!stacked);
+	const fmt = $derived((n: number) => (percent ? `${fmtValue(n)}%` : yFormat(n)));
+
+	/** One drawn segment: [lo, hi] on the value axis, per category and series. */
+	type Seg = { c: number; k: number; lo: number; hi: number; v: number; sign: 1 | -1; outer: boolean; inner: boolean };
+	const segs = $derived.by(() => {
+		const out: Seg[] = [];
+		categories.forEach((_, c) => {
+			if (!isStack) {
+				vis.forEach((s, k) => {
+					const v = s.values[c] ?? 0;
+					out.push({ c, k, lo: Math.min(0, v), hi: Math.max(0, v), v, sign: v < 0 ? -1 : 1, outer: true, inner: false });
+				});
+				return;
+			}
+			const total = percent ? vis.reduce((a, s) => a + Math.abs(s.values[c] ?? 0), 0) || 1 : 1;
+			let pos = 0, neg = 0;
+			const posIdx = vis.map((s, k) => ((s.values[c] ?? 0) > 0 ? k : -1)).filter((k) => k >= 0);
+			const negIdx = vis.map((s, k) => ((s.values[c] ?? 0) < 0 ? k : -1)).filter((k) => k >= 0);
+			vis.forEach((s, k) => {
+				const raw = s.values[c] ?? 0;
+				if (raw === 0) return;
+				const v = percent ? (raw / total) * 100 : raw;
+				if (v > 0) { out.push({ c, k, lo: pos, hi: pos + v, v: raw, sign: 1, outer: k === posIdx.at(-1), inner: k !== posIdx[0] }); pos += v; }
+				else { out.push({ c, k, lo: neg + v, hi: neg, v: raw, sign: -1, outer: k === negIdx.at(-1), inner: k !== negIdx[0] }); neg += v; }
+			});
+		});
+		return out;
+	});
+	const scale = $derived.by(() => {
+		let lo = 0, hi = 0;
+		for (const s of segs) { lo = Math.min(lo, s.lo); hi = Math.max(hi, s.hi); }
+		if (percent && lo === 0) hi = 100;
+		return niceTicks(lo, hi || 1, 5);
+	});
+	const totals = $derived(
+		categories.map((_, c) => vis.reduce((a, s) => a + (s.values[c] ?? 0), 0))
+	);
+
+	/** Rounded rectangle with only the chosen corners rounded. */
+	function rr(x: number, y: number, w: number, h: number, r: number, c: { tl?: boolean; tr?: boolean; br?: boolean; bl?: boolean }) {
+		if (w <= 0 || h <= 0) return '';
+		const k = Math.min(r, w / 2, h / 2);
+		const tl = c.tl ? k : 0, tr = c.tr ? k : 0, br = c.br ? k : 0, bl = c.bl ? k : 0;
+		return `M${x + tl},${y}H${x + w - tr}${tr ? `Q${x + w},${y} ${x + w},${y + tr}` : ''}V${y + h - br}${br ? `Q${x + w},${y + h} ${x + w - br},${y + h}` : ''}H${x + bl}${bl ? `Q${x},${y + h} ${x},${y + h - bl}` : ''}V${y + tl}${tl ? `Q${x},${y} ${x + tl},${y}` : ''}Z`;
+	}
+
+	const GAP = 1; // each side of a shared edge yields a 2px surface gap
+	const labelWidth = $derived(Math.min(168, Math.max(48, Math.max(0, ...categories.map((c) => c.length)) * 6.4 + 14)));
+	const trunc = (s: string, px: number) => (s.length * 6.4 > px ? `${s.slice(0, Math.max(1, Math.floor(px / 6.4) - 1))}…` : s);
+</script>
+
+<ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
+	{#snippet plot(w)}
+		{@const m = horizontal ? { top: 10, right: showValues ? 56 : 14, bottom: 26, left: labelWidth } : { top: showValues ? 22 : 12, right: 12, bottom: 28, left: 46 }}
+		{@const bandN = Math.max(categories.length, 1)}
+		{@const plotH = horizontal ? Math.max(height, bandN * (isStack ? 30 : Math.max(1, vis.length) * 16 + 14) + m.top + m.bottom) : height}
+		{@const V = horizontal ? linear(scale.min, scale.max, m.left, w - m.right) : linear(scale.min, scale.max, plotH - m.bottom, m.top)}
+		{@const band = horizontal ? (plotH - m.top - m.bottom) / bandN : (w - m.left - m.right) / bandN}
+		{@const groupT = band * (horizontal ? 0.72 : 0.7)}
+		{@const nb = Math.max(1, vis.length)}
+		{@const thick = isStack ? Math.min(groupT, horizontal ? 28 : 56) : Math.max(4, Math.min(horizontal ? 22 : 40, (groupT - 2 * (nb - 1)) / nb))}
+		{@const cluster = isStack ? thick : thick * nb + 2 * (nb - 1)}
+		{@const catPos = (c: number) => (horizontal ? m.top : m.left) + band * c + band / 2}
+
+		<svg width={w} height={plotH} role="img" aria-label="{title ?? 'Bar chart'}. A table view is available." onpointerleave={() => (tip = null)}>
+			{#each scale.ticks as t}
+				{#if horizontal}
+					<line class="grid" x1={V(t)} x2={V(t)} y1={m.top} y2={plotH - m.bottom} data-zero={t === 0} />
+					<text class="tick" x={V(t)} y={plotH - 8} text-anchor="middle">{percent ? `${t}%` : fmtAxis(t)}</text>
+				{:else}
+					<line class="grid" x1={m.left} x2={w - m.right} y1={V(t)} y2={V(t)} data-zero={t === 0} />
+					<text class="tick" x={m.left - 8} y={V(t)} text-anchor="end" dominant-baseline="middle">{percent ? `${t}%` : fmtAxis(t)}</text>
+				{/if}
+			{/each}
+
+			{#each categories as cat, c}
+				{#if horizontal}
+					<text class="tick cat" x={m.left - 8} y={catPos(c)} text-anchor="end" dominant-baseline="middle">{trunc(cat, m.left - 14)}<title>{cat}</title></text>
+				{:else}
+					<text class="tick" x={catPos(c)} y={plotH - 8} text-anchor="middle">{cat}</text>
+				{/if}
+			{/each}
+
+			{#each segs as s (`${s.c}:${s.k}`)}
+				{@const ser = vis[s.k]}
+				{@const off = isStack ? 0 : s.k * (thick + 2)}
+				{@const start = catPos(s.c) - cluster / 2 + off}
+				{@const p0 = V(s.lo)}
+				{@const p1 = V(s.hi)}
+				<!-- neighbours: toward zero (inner) and away from zero (not the outermost) — each gives up 1px so the gap is 2px -->
+				{@const gapLo = isStack && (s.sign === 1 ? s.inner : !s.outer)}
+				{@const gapHi = isStack && (s.sign === 1 ? !s.outer : s.inner)}
+				{@const a = Math.min(p0, p1) + (horizontal ? (gapLo ? GAP : 0) : gapHi ? GAP : 0)}
+				{@const bEnd = Math.max(p0, p1) - (horizontal ? (gapHi ? GAP : 0) : gapLo ? GAP : 0)}
+				{@const d = horizontal
+					? rr(a, start, bEnd - a, thick, 4, s.outer ? (s.sign === 1 ? { tr: true, br: true } : { tl: true, bl: true }) : {})
+					: rr(start, a, thick, bEnd - a, 4, s.outer ? (s.sign === 1 ? { tl: true, tr: true } : { bl: true, br: true }) : {})}
+				{@const tx = horizontal ? (s.sign === 1 ? Math.max(p0, p1) : Math.min(p0, p1)) : start + thick / 2}
+				{@const ty = horizontal ? start + thick / 2 : s.sign === 1 ? Math.min(p0, p1) : Math.max(p0, p1)}
+				{#if d}
+					<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+					<path
+						class="bar" fill={ser.color} role="img" tabindex="0" data-cat={categories[s.c]} data-series={ser.name}
+						aria-label="{categories[s.c]}, {ser.name}: {yFormat(s.v)}{percent ? ` (${fmtValue(Math.abs(s.hi - s.lo))}%)` : ''}"
+						{d}
+						onpointermove={() => (tip = { x: tx, y: ty, cat: categories[s.c], name: ser.name, value: s.v, color: ser.color, share: percent ? Math.abs(s.hi - s.lo) : undefined })}
+						onfocus={() => (tip = { x: tx, y: ty, cat: categories[s.c], name: ser.name, value: s.v, color: ser.color, share: percent ? Math.abs(s.hi - s.lo) : undefined })}
+						onblur={() => (tip = null)}
+					/>
+				{/if}
+			{/each}
+
+			{#if showValues && !percent}
+				{#each categories as cat, c}
+					{#if isStack || vis.length}
+						{#each isStack ? [{ v: totals[c], k: 0 }] : vis.map((s, k) => ({ v: s.values[c] ?? 0, k })) as lab}
+							{@const end = isStack ? V(lab.v >= 0 ? Math.max(0, ...segs.filter((x) => x.c === c).map((x) => x.hi)) : Math.min(0, ...segs.filter((x) => x.c === c).map((x) => x.lo))) : V(lab.v)}
+							{@const pos = catPos(c) - cluster / 2 + (isStack ? 0 : lab.k * (thick + 2)) + thick / 2}
+							{#if horizontal}
+								<text class="val" x={end + (lab.v >= 0 ? 6 : -6)} y={pos} text-anchor={lab.v >= 0 ? 'start' : 'end'} dominant-baseline="middle">{yFormat(lab.v)}</text>
+							{:else}
+								<text class="val" x={pos} y={end + (lab.v >= 0 ? -6 : 14)} text-anchor="middle">{yFormat(lab.v)}</text>
+							{/if}
+						{/each}
+					{/if}
+				{/each}
+			{/if}
+		</svg>
+
+		{#if tip}
+			<Tooltip x={tip.x} y={tip.y} width={w}>
+				<div class="head">{tip.cat}</div>
+				<div class="row"><span class="line-key" style:background={tip.color}></span><b>{yFormat(tip.value)}</b><span class="name">{tip.name}{tip.share != null ? ` · ${fmtValue(tip.share)}%` : ''}</span></div>
+			</Tooltip>
+		{/if}
+	{/snippet}
+
+	{#snippet table()}
+		<table>
+			<thead><tr><th>Category</th>{#each all as s}<th>{s.name}</th>{/each}</tr></thead>
+			<tbody>
+				{#each categories as c, i}
+					<tr><td>{c}</td>{#each all as s}<td>{s.values[i] == null ? '—' : yFormat(s.values[i]!)}</td>{/each}</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/snippet}
+</ChartFrame>
+
+<style>
+	svg { display: block; overflow: visible; }
+	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; }
+	.grid[data-zero='true'] { stroke-opacity: 1; }
+	.tick { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-variant-numeric: tabular-nums; }
+	.val { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-weight: 600; font-variant-numeric: tabular-nums; }
+	.bar { outline: none; transition: filter var(--tr-dur-fast) var(--tr-ease); }
+	.bar:hover, .bar:focus-visible { filter: brightness(1.12) saturate(1.1); }
+	.bar:focus-visible { stroke: var(--tr-on-surface); stroke-width: 2; }
+	.head { color: var(--tr-on-surface-variant); margin-bottom: 4px; }
+	.row { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
+	.row b { color: var(--tr-on-surface); font-variant-numeric: tabular-nums; }
+	.name { color: var(--tr-on-surface-variant); }
+	.line-key { width: 12px; height: 8px; border-radius: 2px; flex: none; }
+</style>

package/dist/ChartFrame.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { LegendItem } from './types.js';
+
+	let {
+		title,
+		subtitle,
+		items = [],
+		ontoggle,
+		plot,
+		table
+	}: {
+		title?: string;
+		subtitle?: string;
+		/** Legend is shown for 2+ items; clicking toggles visibility. */
+		items?: LegendItem[];
+		ontoggle?: (name: string) => void;
+		plot: Snippet<[width: number]>;
+		/** Table alternative — every value reachable without hover. */
+		table: Snippet;
+	} = $props();
+
+	let width = $state(640);
+	let showTable = $state(false);
+</script>
+
+<figure class="rdc">
+	<figcaption>
+		<div>
+			{#if title}<div class="title">{title}</div>{/if}
+			{#if subtitle}<div class="sub">{subtitle}</div>{/if}
+		</div>
+		<button type="button" class="tv" aria-pressed={showTable} onclick={() => (showTable = !showTable)}>
+			{showTable ? 'Chart' : 'Table'}
+		</button>
+	</figcaption>
+
+	{#if items.length > 1}
+		<ul class="legend" aria-label="Legend">
+			{#each items as it (it.name)}
+				<li>
+					<button type="button" aria-pressed={!it.hidden} onclick={() => ontoggle?.(it.name)}>
+						<span class="key" style:background={it.color}></span>{it.name}
+					</button>
+				</li>
+			{/each}
+		</ul>
+	{/if}
+
+	<div class="body" bind:clientWidth={width}>
+		{#if showTable}<div class="tbl">{@render table()}</div>{:else}{@render plot(width)}{/if}
+	</div>
+</figure>
+
+<style>
+	.rdc { margin: 0; padding: 12px 12px 8px; 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); }
+	figcaption { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
+	.title { font-weight: 700; }
+	.sub { font-size: var(--tr-text-sm); color: var(--tr-on-surface-variant); }
+	.tv { height: 24px; padding: 0 10px; border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); font: 600 var(--tr-text-sm) var(--tr-font-sans); cursor: pointer; }
+	.tv:hover { background: var(--tr-surface-container-high); }
+	.tv:focus-visible, .legend button:focus-visible { outline: none; box-shadow: var(--tr-focus-ring); }
+	.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 0 0 6px; padding: 0; list-style: none; }
+	.legend button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px; border: 0; border-radius: var(--tr-radius-sm); background: none; color: var(--tr-on-surface-variant); font: var(--tr-text-sm) var(--tr-font-sans); cursor: pointer; }
+	.legend button[aria-pressed='false'] { opacity: 0.45; text-decoration: line-through; }
+	.key { width: 10px; height: 10px; border-radius: 2px; }
+	.body { position: relative; }
+	.tbl { max-height: 320px; overflow: auto; }
+	.tbl :global(table) { width: 100%; border-collapse: collapse; font-size: var(--tr-text-sm); font-variant-numeric: tabular-nums; }
+	.tbl :global(th), .tbl :global(td) { padding: 4px 8px; text-align: right; border-bottom: 1px solid var(--tr-outline-variant); }
+	.tbl :global(th:first-child), .tbl :global(td:first-child) { text-align: left; }
+	.tbl :global(th) { position: sticky; top: 0; background: var(--tr-surface-container); color: var(--tr-on-surface-variant); }
+</style>

package/dist/DonutChart.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+	import ChartFrame from './ChartFrame.svelte';
+	import { fmtValue, seriesColor, MAX_SERIES } from './util.js';
+
+	let {
+		slices,
+		title,
+		subtitle,
+		size = 200,
+		format = fmtValue,
+		centerLabel = 'Total'
+	}: {
+		slices: { name: string; value: number }[];
+		title?: string;
+		subtitle?: string;
+		size?: number;
+		format?: (n: number) => string;
+		centerLabel?: string;
+	} = $props();
+
+	let hidden = $state<string[]>([]);
+	let active = $state<string | null>(null);
+
+	// Past 8 slices, the tail folds into a muted "Other" — never a generated hue.
+	const base = $derived.by(() => {
+		const sorted = slices.map((s, i) => ({ ...s, i }));
+		if (sorted.length <= MAX_SERIES) return sorted.map((s) => ({ ...s, color: seriesColor(s.i) }));
+		const head = sorted.slice(0, MAX_SERIES - 1).map((s) => ({ ...s, color: seriesColor(s.i) }));
+		const rest = sorted.slice(MAX_SERIES - 1).reduce((a, s) => a + s.value, 0);
+		return [...head, { name: 'Other', value: rest, i: MAX_SERIES - 1, color: 'var(--tr-outline)' }];
+	});
+	const vis = $derived(base.filter((s) => !hidden.includes(s.name)));
+	const total = $derived(vis.reduce((a, s) => a + s.value, 0));
+	const items = $derived(base.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 r = $derived(size / 2 - 6);
+	const th = $derived(Math.max(14, size * 0.14));
+	const arcs = $derived.by(() => {
+		let a0 = -Math.PI / 2;
+		return vis.map((s) => {
+			const sweep = total ? (s.value / total) * Math.PI * 2 : 0;
+			const a1 = a0 + sweep;
+			const large = sweep > Math.PI ? 1 : 0;
+			const R = r, ri = r - th;
+			const pt = (rad: number, a: number) => `${size / 2 + rad * Math.cos(a)},${size / 2 + rad * Math.sin(a)}`;
+			const d = sweep >= Math.PI * 2 - 1e-6
+				? `M${pt(R, a0)}A${R},${R} 0 1 1 ${pt(R, a0 + Math.PI)}A${R},${R} 0 1 1 ${pt(R, a0)}M${pt(ri, a0)}A${ri},${ri} 0 1 0 ${pt(ri, a0 + Math.PI)}A${ri},${ri} 0 1 0 ${pt(ri, a0)}Z`
+				: `M${pt(R, a0)}A${R},${R} 0 ${large} 1 ${pt(R, a1)}L${pt(ri, a1)}A${ri},${ri} 0 ${large} 0 ${pt(ri, a0)}Z`;
+			a0 = a1;
+			return { ...s, d };
+		});
+	});
+	const focus = $derived(vis.find((s) => s.name === active));
+</script>
+
+<ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
+	{#snippet plot()}
+		<div class="wrap">
+			<svg width={size} height={size} role="img" aria-label="{title ?? 'Donut chart'}. A table view is available.">
+				{#each arcs as a (a.name)}
+					<!-- 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)} ({Math.round((a.value / total) * 100)}%)"
+						onpointerenter={() => (active = a.name)} onpointerleave={() => (active = null)}
+						onfocus={() => (active = a.name)} onblur={() => (active = null)}
+					/>
+				{/each}
+				<text class="big" x={size / 2} y={size / 2 - 2} text-anchor="middle">{format(focus?.value ?? total)}</text>
+				<text class="small" x={size / 2} y={size / 2 + 16} text-anchor="middle">
+					{focus ? `${focus.name} · ${Math.round((focus.value / total) * 100)}%` : centerLabel}
+				</text>
+			</svg>
+		</div>
+	{/snippet}
+
+	{#snippet table()}
+		<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}
+			</tbody>
+		</table>
+	{/snippet}
+</ChartFrame>
+
+<style>
+	.wrap { display: flex; justify-content: center; padding: 8px 0; }
+	/* 2px surface gap between adjacent fills */
+	.slice { stroke: var(--tr-surface-container-low); stroke-width: 2; outline: none; transition: opacity var(--tr-dur-fast) var(--tr-ease); }
+	.slice[data-dim='true'] { opacity: 0.4; }
+	.slice:focus-visible { stroke: var(--tr-on-surface); }
+	.big { fill: var(--tr-on-surface); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
+	.small { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-sm); }
+</style>

package/dist/Histogram.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+	import ChartFrame from './ChartFrame.svelte';
+	import Tooltip from './Tooltip.svelte';
+	import { barPath, fmtAxis, fmtValue, linear, niceTicks, seriesColor } from './util.js';
+
+	let {
+		values,
+		bins = 'auto',
+		domain,
+		title,
+		subtitle,
+		height = 240,
+		color = seriesColor(0),
+		xFormat = fmtValue,
+		range = $bindable(null),
+		onbrush
+	}: {
+		values: number[];
+		/** Approximate bin count, or 'auto' (Sturges). Edges snap to nice numbers. */
+		bins?: number | 'auto';
+		domain?: [number, number];
+		title?: string;
+		subtitle?: string;
+		height?: number;
+		color?: string;
+		xFormat?: (n: number) => string;
+		/** Brushed selection [from, to] on the value axis (snaps to bin edges). Drag to select, click to clear. */
+		range?: [number, number] | null;
+		onbrush?: (range: [number, number] | null) => void;
+	} = $props();
+
+	let hover = $state<number | null>(null);
+	let drag = $state<{ a: number; b: number } | null>(null);
+
+	const clean = $derived(values.filter((v) => Number.isFinite(v)));
+	const want = $derived(bins === 'auto' ? Math.min(60, Math.max(5, Math.ceil(Math.log2(Math.max(clean.length, 1)) + 1))) : bins);
+	const ext = $derived<[number, number]>(domain ?? [Math.min(...clean, 0), Math.max(...clean, 1)]);
+	const grid = $derived(niceTicks(ext[0], ext[1], want));
+	const edges = $derived(grid.ticks);
+	const nb = $derived(Math.max(1, edges.length - 1));
+	const step = $derived((grid.max - grid.min) / nb);
+	const counts = $derived.by(() => {
+		const c = new Array(nb).fill(0);
+		for (const v of clean) {
+			if (v < grid.min || v > grid.max) continue;
+			c[Math.min(nb - 1, Math.floor((v - grid.min) / step))]++;
+		}
+		return c as number[];
+	});
+	const yScale = $derived(niceTicks(0, Math.max(...counts, 1), 5));
+	const total = $derived(counts.reduce((a, b) => a + b, 0));
+
+	const inRange = (i: number) => !range || (edges[i + 1] > range[0] && edges[i] < range[1]);
+	const sel = $derived(drag ? ([Math.min(drag.a, drag.b), Math.max(drag.a, drag.b)] as [number, number]) : range);
+
+	function set(r: [number, number] | null) {
+		range = r;
+		onbrush?.(r);
+	}
+	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>
+
+<ChartFrame {title} {subtitle}>
+	{#snippet plot(w)}
+		{@const m = { top: 12, right: 12, bottom: 28, left: 46 }}
+		{@const X = linear(grid.min, grid.max, m.left, w - m.right)}
+		{@const Y = linear(yScale.min, yScale.max, height - m.bottom, m.top)}
+		{@const bw = Math.max(2, (X(grid.min + step) - X(grid.min)) - 2)}
+		{@const toVal = (px: number) => grid.min + ((px - m.left) / (w - m.left - m.right)) * (grid.max - grid.min)}
+		{@const xt = edges.length > 12 ? edges.filter((_, i) => i % Math.ceil(edges.length / 8) === 0) : edges}
+
+		<!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+		<svg
+			width={w} {height} role="group" tabindex="0"
+			aria-label="{title ?? 'Histogram'}. Arrow keys move between bins, Enter selects a bin, Escape clears the selection."
+			onpointerleave={() => (hover = null)}
+			onblur={() => (hover = null)}
+			onkeydown={(e) => {
+				if (e.key === 'ArrowRight') hover = Math.min(nb - 1, (hover ?? -1) + 1);
+				else if (e.key === 'ArrowLeft') hover = Math.max(0, (hover ?? nb) - 1);
+				else if (e.key === 'Enter' && hover != null) set(e.shiftKey && range ? [Math.min(range[0], edges[hover]), Math.max(range[1], edges[hover + 1])] : [edges[hover], edges[hover + 1]]);
+				else if (e.key === 'Escape') set(null);
+				else return;
+				e.preventDefault();
+			}}
+		>
+			{#each yScale.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 xt as e}
+				<text class="tick" x={X(e)} y={height - 8} text-anchor="middle">{xFormat(e)}</text>
+			{/each}
+
+			{#each counts as c, i}
+				<path class="bar" d={barPath(X(edges[i]) + 1, Y(0), Y(c), bw, 4)} fill={color} data-dim={!!sel && !(edges[i + 1] > sel[0] && edges[i] < sel[1])} data-hover={hover === i} />
+			{/each}
+
+			{#if sel}
+				<rect class="brush" x={X(sel[0])} y={m.top} width={Math.max(0, X(sel[1]) - X(sel[0]))} height={height - m.top - m.bottom} />
+				<line class="edge" x1={X(sel[0])} x2={X(sel[0])} y1={m.top} y2={height - m.bottom} />
+				<line class="edge" x1={X(sel[1])} x2={X(sel[1])} y1={m.top} y2={height - m.bottom} />
+			{/if}
+
+			<!-- hit layer: hover for tooltip, drag to brush -->
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<rect
+				class="hit" x={m.left} y={m.top} width={w - m.left - m.right} height={height - m.top - m.bottom}
+				onpointermove={(e) => {
+					const px = e.clientX - e.currentTarget.getBoundingClientRect().left + m.left;
+					hover = Math.min(nb - 1, Math.max(0, Math.floor((toVal(px) - grid.min) / step)));
+					if (drag) drag = { ...drag, b: Math.min(grid.max, Math.max(grid.min, toVal(px))) };
+				}}
+				onpointerdown={(e) => {
+					e.currentTarget.setPointerCapture(e.pointerId);
+					const v = toVal(e.clientX - e.currentTarget.getBoundingClientRect().left + m.left);
+					drag = { a: v, b: v };
+				}}
+				onpointerup={() => {
+					if (!drag) return;
+					const lo = Math.min(drag.a, drag.b), hi = Math.max(drag.a, drag.b);
+					set(Math.abs(X(hi) - X(lo)) < 4 ? null : [snapLo(lo), snapHi(hi)]);
+					drag = null;
+				}}
+			/>
+		</svg>
+
+		{#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>
+			</Tooltip>
+		{/if}
+	{/snippet}
+
+	{#snippet table()}
+		<table>
+			<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>
+				{/each}
+			</tbody>
+		</table>
+	{/snippet}
+</ChartFrame>
+
+<style>
+	svg { display: block; outline: none; overflow: visible; }
+	svg:focus-visible { border-radius: var(--tr-radius-sm); box-shadow: var(--tr-focus-ring); }
+	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; }
+	.tick { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-variant-numeric: tabular-nums; }
+	.bar { transition: opacity var(--tr-dur-fast) var(--tr-ease), filter var(--tr-dur-fast) var(--tr-ease); }
+	.bar[data-hover='true'] { filter: brightness(1.12) saturate(1.1); }
+	.bar[data-dim='true'] { opacity: 0.3; }
+	.brush { fill: var(--tr-primary); fill-opacity: 0.1; pointer-events: none; }
+	.edge { stroke: var(--tr-primary); stroke-width: 1.5; pointer-events: none; }
+	.hit { fill: transparent; cursor: crosshair; touch-action: none; }
+	.head { color: var(--tr-on-surface-variant); margin-bottom: 4px; }
+	.row { display: flex; align-items: baseline; gap: 8px; }
+	.row b { color: var(--tr-on-surface); font-variant-numeric: tabular-nums; }
+	.name { color: var(--tr-on-surface-variant); }
+</style>

package/dist/LineChart.svelte

@@ -0,0 +1,157 @@
+<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';
+
+	let {
+		x,
+		series,
+		title,
+		subtitle,
+		height = 240,
+		area = false,
+		zeroBaseline = false,
+		directLabels = true,
+		yFormat = fmtValue
+	}: {
+		/** Shared x positions: numbers or Dates. */
+		x: (number | Date)[];
+		/** Max 8 (fixed-order palette, never cycled). Fold extras into "Other" upstream. */
+		series: Series[];
+		title?: string;
+		subtitle?: string;
+		height?: number;
+		area?: boolean;
+		zeroBaseline?: boolean;
+		/** Name labels at line ends when ≤ 4 series. */
+		directLabels?: boolean;
+		yFormat?: (n: number) => string;
+	} = $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: 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 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(() => {
+		let lo = Infinity, hi = -Infinity;
+		for (const s of vis) for (const v of s.values) if (v != null) { lo = Math.min(lo, v); hi = Math.max(hi, v); }
+		if (!isFinite(lo)) { lo = 0; hi = 1; }
+		if (area || zeroBaseline) lo = Math.min(lo, 0);
+		return niceTicks(lo, hi, 5);
+	});
+
+	function segments(values: (number | null)[]) {
+		const out: number[][] = [];
+		let cur: number[] = [];
+		values.forEach((v, i) => { if (v == null) { if (cur.length) out.push(cur); cur = []; } else cur.push(i); });
+		if (cur.length) out.push(cur);
+		return out;
+	}
+</script>
+
+<ChartFrame {title} {subtitle} {items} ontoggle={toggle}>
+	{#snippet plot(w)}
+		{@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 ends = vis.map((s) => { const k = s.values.findLastIndex((v) => v != null); return k < 0 ? null : { s, y: Y(s.values[k]!) }; }).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."
+			onpointermove={(e) => {
+				const px = e.clientX - e.currentTarget.getBoundingClientRect().left;
+				let best = 0;
+				for (let i = 1; i < xs.length; i++) if (Math.abs(X(xs[i]) - px) < Math.abs(X(xs[best]) - px)) best = i;
+				hover = best;
+			}}
+			onpointerleave={() => (hover = null)}
+			onblur={() => (hover = null)}
+			onkeydown={(e) => {
+				if (e.key === 'ArrowRight') hover = Math.min(xs.length - 1, (hover ?? -1) + 1);
+				else if (e.key === 'ArrowLeft') hover = Math.max(0, (hover ?? xs.length) - 1);
+				else if (e.key === 'Escape') hover = null;
+				else return;
+				e.preventDefault();
+			}}
+		>
+			{#each yScale.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>
+			{/each}
+
+			{#each vis as s (s.name)}
+				{#if area}
+					{#each segments(s.values) as seg}
+						<path class="area" fill={s.color}
+							d="M{X(xs[seg[0]])},{Y(Math.max(yScale.min, 0))} {seg.map((i) => `L${X(xs[i])},${Y(s.values[i]!)}`).join(' ')} L{X(xs[seg.at(-1)!])},{Y(Math.max(yScale.min, 0))}Z" />
+					{/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(s.values[i]!).toFixed(1)}`).join(' ')).join(' ')} />
+			{/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}
+
+			{#if hover != null}
+				<line class="cross" x1={X(xs[hover])} x2={X(xs[hover])} y1={m.top} y2={height - m.bottom} />
+				{#each vis as s}
+					{#if s.values[hover] != null}<circle class="dot" cx={X(xs[hover])} cy={Y(s.values[hover]!)} r="4" fill={s.color} />{/if}
+				{/each}
+			{/if}
+		</svg>
+
+		{#if hover != null}
+			<Tooltip x={X(xs[hover])} y={height / 2} width={w}>
+				<div class="head">{fmtX(xs[hover], span, isDate)}</div>
+				{#each vis as s}
+					<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}</span></div>
+				{/each}
+			</Tooltip>
+		{/if}
+	{/snippet}
+
+	{#snippet table()}
+		<table>
+			<thead><tr><th>{isDate ? 'Date' : 'X'}</th>{#each all as s}<th>{s.name}</th>{/each}</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]!)}</td>{/each}</tr>
+				{/each}
+			</tbody>
+		</table>
+	{/snippet}
+</ChartFrame>
+
+<style>
+	svg { display: block; outline: none; overflow: visible; }
+	svg:focus-visible { border-radius: var(--tr-radius-sm); box-shadow: var(--tr-focus-ring); }
+	.grid { stroke: var(--tr-outline-variant); stroke-opacity: 0.6; stroke-width: 1; }
+	.tick { fill: var(--tr-on-surface-variant); font-size: var(--tr-text-xs); font-variant-numeric: tabular-nums; }
+	.line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
+	.area { fill-opacity: 0.14; }
+	.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; }
+	.head { color: var(--tr-on-surface-variant); margin-bottom: 4px; }
+	.row { display: flex; align-items: center; gap: 8px; line-height: 1.5; }
+	.row b { color: var(--tr-on-surface); font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
+	.name { color: var(--tr-on-surface-variant); }
+	.line-key { width: 12px; height: 2px; border-radius: 1px; flex: none; }
+</style>

package/dist/Sparkline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { linear, seriesColor } from './util.js';
+
+	let {
+		values,
+		width = 120,
+		height = 28,
+		color = seriesColor(0),
+		label = 'Trend'
+	}: { values: (number | null)[]; width?: number; height?: number; color?: string; label?: string } = $props();
+
+	const pts = $derived(values.map((v, i) => ({ v, i })).filter((p) => p.v != null) as { v: number; i: number }[]);
+	const X = $derived(linear(0, Math.max(values.length - 1, 1), 3, width - 3));
+	const Y = $derived(linear(Math.min(...pts.map((p) => p.v)), Math.max(...pts.map((p) => p.v)), height - 4, 4));
+	const last = $derived(pts.at(-1));
+</script>
+
+<svg {width} {height} role="img" aria-label="{label}: {pts.map((p) => p.v).join(', ')}">
+	<path d={pts.map((p, k) => `${k ? 'L' : 'M'}${X(p.i).toFixed(1)},${Y(p.v).toFixed(1)}`).join(' ')} fill="none" stroke={color} stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
+	{#if last}<circle cx={X(last.i)} cy={Y(last.v)} r="3.5" fill={color} stroke="var(--tr-surface-container-low)" stroke-width="2" />{/if}
+</svg>
+
+<style>svg { display: inline-block; vertical-align: middle; overflow: visible; }</style>

package/dist/Tooltip.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	/** Positioned inside a `position: relative` host. Values lead, names follow, line keys not boxes. */
+	let { x, y, width, children }: { x: number; y: number; width: number; children: Snippet } = $props();
+</script>
+
+<div class="tip" role="status" style:left="{x}px" style:top="{y}px" data-flip={x > width * 0.6}>{@render children()}</div>
+
+<style>
+	.tip { position: absolute; z-index: 5; transform: translate(12px, -50%); min-width: 120px; padding: 6px 10px; pointer-events: none; background: var(--tr-surface-container-highest); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-2); font-size: var(--tr-text-sm); white-space: nowrap; }
+	.tip[data-flip='true'] { transform: translate(calc(-100% - 12px), -50%); }
+</style>

package/dist/charts.css

@@ -0,0 +1,19 @@
+/*
+ * Categorical series palette (8 slots, fixed order — never cycled).
+ * Validated adjacent-pair CVD / normal-vision separation in both modes.
+ * Chart chrome reuses truss tokens, so it themes with the rest of the app.
+ */
+:root {
+	--trc-s1: #2a78d6; --trc-s2: #eb6834; --trc-s3: #1baf7a; --trc-s4: #eda100;
+	--trc-s5: #e87ba4; --trc-s6: #008300; --trc-s7: #6250d6; --trc-s8: #e34948;
+}
+@media (prefers-color-scheme: dark) {
+	:root:not([data-theme='light']) {
+		--trc-s1: #3987e5; --trc-s2: #d95926; --trc-s3: #199e70; --trc-s4: #c98500;
+		--trc-s5: #d55181; --trc-s6: #008300; --trc-s7: #9085e9; --trc-s8: #e66767;
+	}
+}
+:root[data-theme='dark'] {
+	--trc-s1: #3987e5; --trc-s2: #d95926; --trc-s3: #199e70; --trc-s4: #c98500;
+	--trc-s5: #d55181; --trc-s6: #008300; --trc-s7: #9085e9; --trc-s8: #e66767;
+}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { default as LineChart } from './LineChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as DonutChart } from './DonutChart.svelte';
+export { default as Histogram } from './Histogram.svelte';
+export { default as Sparkline } from './Sparkline.svelte';
+export { seriesColor, niceTicks, linear } from './util.js';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/util.js

@@ -0,0 +1,60 @@
+export const MAX_SERIES = 8;
+/** Color follows the entity (its index in the full series list), never its rank among visible ones. */
+export const seriesColor = (i) => `var(--trc-s${(i % MAX_SERIES) + 1})`;
+export const linear = (d0, d1, r0, r1) => (v) => r0 + ((v - d0) / (d1 - d0 || 1)) * (r1 - r0);
+export function niceTicks(min, max, count = 5) {
+    if (min === max) {
+        min -= 1;
+        max += 1;
+    }
+    const raw = (max - min) / count;
+    const mag = 10 ** Math.floor(Math.log10(raw));
+    const n = raw / mag;
+    const step = (n < 1.5 ? 1 : n < 3 ? 2 : n < 7 ? 5 : 10) * mag;
+    const lo = Math.floor(min / step) * step;
+    const hi = Math.ceil(max / step) * step;
+    const dec = Math.max(0, -Math.floor(Math.log10(step)) + 1);
+    const ticks = [];
+    for (let v = lo; v <= hi + step / 2; v += step)
+        ticks.push(Number(v.toFixed(dec)));
+    return { ticks, min: lo, max: hi };
+}
+const compact = new Intl.NumberFormat('en-US', { notation: 'compact', maximumFractionDigits: 1 });
+const full = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
+export const fmtAxis = (n) => compact.format(n);
+export const fmtValue = (n) => full.format(n);
+export function fmtX(v, span, isDate) {
+    if (!isDate)
+        return fmtValue(v);
+    const d = new Date(v);
+    const day = 864e5;
+    if (span <= 2 * day)
+        return d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
+    if (span <= 365 * day)
+        return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+    return d.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
+}
+/** Spread label y-positions so they are at least `gap` apart, preserving order. */
+export function spreadLabels(ys, gap, lo, hi) {
+    const idx = ys.map((_, i) => i).sort((a, b) => ys[a] - ys[b]);
+    const out = [...ys];
+    for (let k = 0; k < idx.length; k++) {
+        const i = idx[k];
+        out[i] = Math.max(k ? out[idx[k - 1]] + gap : lo, out[i]);
+    }
+    for (let k = idx.length - 1; k >= 0; k--) {
+        const i = idx[k];
+        out[i] = Math.min(k < idx.length - 1 ? out[idx[k + 1]] - gap : hi, out[i]);
+    }
+    return out;
+}
+/** Bar with a rounded data-end, square against the baseline. `y0` is the baseline, `y1` the data end. */
+export function barPath(x, y0, y1, w, r, round = true) {
+    const top = Math.min(y0, y1), h = Math.abs(y1 - y0);
+    if (h < 0.5)
+        return '';
+    const rr = round ? Math.min(r, w / 2, h) : 0;
+    return y1 < y0
+        ? `M${x},${y0}V${top + rr}Q${x},${top} ${x + rr},${top}H${x + w - rr}Q${x + w},${top} ${x + w},${top + rr}V${y0}Z`
+        : `M${x},${y0}V${top + h - rr}Q${x},${top + h} ${x + rr},${top + h}H${x + w - rr}Q${x + w},${top + h} ${x + w},${top + h - rr}V${y0}Z`;
+}

package/package.json

@@ -1,6 +1,48 @@
 {
-  "name": "@ruckc/truss-chart",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@ruckc/truss-chart",
+	"version": "1.0.0",
+	"description": "Zero-dependency SVG charts for Truss UI",
+	"type": "module",
+	"license": "MIT",
+	"scripts": {
+		"package": "svelte-package -i src/lib -o dist"
+	},
+	"files": [
+		"dist"
+	],
+	"sideEffects": [
+		"**/*.css"
+	],
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js"
+		},
+		"./charts.css": "./dist/charts.css"
+	},
+	"peerDependencies": {
+		"svelte": "^5.20.0"
+	},
+	"author": "Curtis Ruck",
+	"homepage": "https://truss.ruck.io",
+	"bugs": {
+		"url": "https://github.com/ruckc/truss-ui/issues"
+	},
+	"publishConfig": {
+		"access": "public"
+	},
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/ruckc/truss-ui.git",
+		"directory": "packages/charts"
+	},
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"truss",
+		"charts",
+		"svg"
+	]
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.