@rokkit/chart 1.3.7 → 1.3.9

package/dist/AnimatedPlot.svelte

@@ -34,6 +34,11 @@
 		tween?: boolean
 		sorted?: boolean
 		dynamicDomain?: boolean
+		/** Chart direction for standard (non-race) animations — flips via the same geom
+		 *  place() mechanism as static charts. `flip` is sugar for 'horizontal'. Ignored for
+		 *  the bar-chart race, which is inherently horizontal. */
+		orientation?: 'vertical' | 'horizontal'
+		flip?: boolean
 		label?: boolean | string | ((data: Row) => string)
 		children?: Snippet
 	}
@@ -53,16 +58,22 @@
 		helpers = {},
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		tween = true,
 		sorted = false,
 		dynamicDomain = false,
+		orientation = undefined,
+		flip = false,
 		label = false,
 		children
 	}: Props = $props()
 
+	// Standard-animation direction (non-race). Flows to the frameSpec so the geoms flip via the
+	// same place() path as static charts; the frame tween interpolates values orientation-agnostically.
+	const resolvedOrientation = $derived(flip ? 'horizontal' : orientation)
+
 	// Effective geom list: explicit array takes precedence; otherwise build from shorthand props
 	const effectiveGeoms = $derived(
 		geoms.length > 0
@@ -348,23 +359,30 @@
 		}))
 	)
 
-	const xDomainForFrame = $derived(
+	// The race's value-axis domain (the caller's x = the measured value), dynamic or static.
+	const valueDomainForFrame = $derived(
 		isHorizontalRace && dynamicDomain ? $xDomainTween : staticDomains.xDomain
 	)
 	const frameSpec = $derived<PlotSpec>({
 		data: $displayTween,
-		x,
-		y: isHorizontalRace ? '_rank' : y,
+		// Race uses the STANDARD convention so it flips through the same place() path as every
+		// chart: x = the continuous `_rank` (category/position axis), y = the caller's value.
+		// `continuousCategory` keeps the rank scale linear so fractional ranks tween smoothly.
+		x: isHorizontalRace ? '_rank' : x,
+		y: isHorizontalRace ? x : y,
 		color,
 		geoms: isHorizontalRace ? raceGeoms : prepared.geoms,
-		xDomain: xDomainForFrame,
-		yDomain: isHorizontalRace ? [0, entityCount - 1] : staticDomains.yDomain,
-		orientation: isHorizontalRace ? 'horizontal' : undefined
+		// Pad the rank axis half a slot each end so the first/last bar's thickness doesn't spill
+		// past the axis (a continuous-category bar centres on the rank with a step-derived height).
+		xDomain: isHorizontalRace ? [-0.5, entityCount - 0.5] : staticDomains.xDomain,
+		yDomain: isHorizontalRace ? valueDomainForFrame : staticDomains.yDomain,
+		orientation: isHorizontalRace ? 'horizontal' : resolvedOrientation,
+		continuousCategory: isHorizontalRace
 	})
 </script>
 
 <div data-plot-animated>
-	<PlotChart spec={frameSpec} {helpers} {width} {height} {mode} {grid} {legend}>
+	<PlotChart spec={frameSpec} {helpers} {width} {height} {mode} {grid} {legend} animate={false}>
 		{@render children?.()}
 	</PlotChart>
 

package/dist/AnimatedPlot.svelte.d.ts

@@ -27,6 +27,11 @@ type Props = {
     tween?: boolean;
     sorted?: boolean;
     dynamicDomain?: boolean;
+    /** Chart direction for standard (non-race) animations — flips via the same geom
+     *  place() mechanism as static charts. `flip` is sugar for 'horizontal'. Ignored for
+     *  the bar-chart race, which is inherently horizontal. */
+    orientation?: 'vertical' | 'horizontal';
+    flip?: boolean;
     label?: boolean | string | ((data: Row) => string);
     children?: Snippet;
 };

package/dist/Chart.svelte

@@ -1,19 +1,8 @@
 <script lang="ts">
-	import { setContext } from 'svelte'
 	import type { Snippet } from 'svelte'
-	import { ChartBrewer } from './lib/brewing/brewer.svelte.js'
+	import Plot from './Plot.svelte'
 	import type { ChartSpec } from './spec/chart-spec.js'
-
-	type Channels = {
-		x?: string
-		y?: string
-		color?: string
-		pattern?: string
-		fill?: string
-		size?: string
-		label?: string
-		symbol?: string
-	}
+	import type { PlotSpec, GeomSpec } from './lib/plot/types.js'
 
 	type Props = {
 		spec?: ChartSpec
@@ -45,63 +34,60 @@
 		symbol = undefined,
 		width = 600,
 		height = 400,
-		mode = 'light',
+		mode = undefined,
 		children
 	}: Props = $props()
 
-	const brewer = new ChartBrewer()
-	setContext('chart-brewer', brewer)
-
-	function buildChannels(): Channels {
-		const channels: Channels = {}
-		if (x) channels.x = x
-		if (y) channels.y = y
-		if (color) channels.color = color
-		if (pattern) channels.pattern = pattern
-		if (fill) channels.fill = fill
-		if (size) channels.size = size
-		if (label) channels.label = label
-		if (symbol) channels.symbol = symbol
-		return channels
-	}
-
-	$effect(() => {
+	// `Chart` is a thin wrapper over the geom-path host (`Plot`). It maps the fluent
+	// `ChartSpec` builder (data / channels / layers / options) onto a `PlotSpec` and renders
+	// the layers as geoms. Axes/grid stay off by default — `Chart` historically rendered just
+	// the marks (plus any declarative geom children). See the brewer-consolidation spec
+	// (docs/backlog/2026-08-17-chart-aesthetics-unification.md §9).
+	const plotSpec = $derived.by((): PlotSpec => {
 		if (spec) {
-			brewer.update({
-				data: spec.data,
-				channels: spec.channels,
-				width,
-				height,
-				mode,
-				layers: spec.layers
-			})
-		} else {
-			brewer.update({ data, channels: buildChannels(), width, height, mode })
+			const ch = (spec.channels ?? {}) as {
+				x?: string
+				y?: string
+				color?: string
+				pattern?: string
+			}
+			const opts = (spec.options ?? {}) as {
+				width?: number
+				height?: number
+				grid?: unknown
+				legend?: unknown
+			}
+			const layers = (spec.layers ?? []) as GeomSpec[]
+			return {
+				data: spec.data as Record<string, unknown>[],
+				x: ch.x,
+				y: ch.y,
+				color: ch.color,
+				pattern: ch.pattern,
+				width: opts.width ?? width,
+				height: opts.height ?? height,
+				grid: 'grid' in opts,
+				legend: 'legend' in opts,
+				geoms: layers.map((l) => ({ pattern: ch.pattern, ...l }))
+			}
+		}
+		return {
+			data,
+			x,
+			y,
+			color: color ?? fill,
+			pattern,
+			size,
+			symbol,
+			width,
+			height,
+			grid: false,
+			legend: false,
+			geoms: []
 		}
 	})
 </script>
 
-<div class="chart-container" data-chart-root>
-	<svg {width} {height} viewBox="0 0 {width} {height}" role="img" aria-label="Chart visualization">
-		<g class="chart-area" data-chart-canvas>
-			{@render children?.()}
-		</g>
-	</svg>
-</div>
-
-<style>
-	.chart-container {
-		position: relative;
-		width: 100%;
-		height: auto;
-	}
-
-	svg {
-		display: block;
-		overflow: visible;
-	}
-
-	.chart-area {
-		pointer-events: all;
-	}
-</style>
+<Plot spec={plotSpec} axes={false} label={label ?? false} {mode}>
+	{@render children?.()}
+</Plot>

package/dist/FacetPlot.svelte

@@ -47,7 +47,7 @@
 		panelHeight,
 		width = 900,
 		height = 300,
-		mode = 'light',
+		mode = undefined,
 		grid = true,
 		legend = false,
 		children

package/dist/Plot/Axis.svelte

@@ -59,16 +59,21 @@
 	const xTicks = $derived(buildTicks(state.xScale))
 	const yTicks = $derived(buildTicks(state.yScale))
 
-	const xTransform = $derived(`translate(0, ${state.xAxisY ?? state.innerHeight})`)
-	const yTransform = $derived(`translate(${state.yAxisX ?? 0}, 0)`)
+	// When flipped, the x-channel (category) axis stands up on the left and the value (y)
+	// axis lies along the bottom — each axis type renders on the opposite screen orientation.
+	const flipped = $derived(state.isFlipped)
+	const renderAsX = $derived((type === 'x') !== flipped)
+	const ticks = $derived(type === 'x' ? xTicks : yTicks)
+	const hAxisY = $derived(flipped ? state.innerHeight : (state.xAxisY ?? state.innerHeight))
+	const vAxisX = $derived(flipped ? 0 : (state.yAxisX ?? 0))
 </script>
 
-{#if type === 'x'}
-	<g class="axis x-axis" transform={xTransform} data-plot-axis="x">
+{#if renderAsX}
+	<g class="axis x-axis" transform={`translate(0, ${hAxisY})`} data-plot-axis="x">
 		{#if showLine}
 			<line x1="0" y1="0" x2={state.innerWidth} y2="0" data-plot-axis-line />
 		{/if}
-		{#each xTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+		{#each ticks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
 			<g transform="translate({tick.pos}, 0)" data-plot-tick>
 				{#if showTicks}
 					<line
@@ -96,11 +101,11 @@
 		{/if}
 	</g>
 {:else}
-	<g class="axis y-axis" transform={yTransform} data-plot-axis="y">
+	<g class="axis y-axis" transform={`translate(${vAxisX}, 0)`} data-plot-axis="y">
 		{#if showLine}
 			<line x1="0" y1="0" x2="0" y2={state.innerHeight} data-plot-axis-line />
 		{/if}
-		{#each yTicks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
+		{#each ticks as tick (tick.minor ? `minor-${tick.pos}` : tick.value)}
 			<g transform="translate(0, {tick.pos})" data-plot-tick>
 				{#if showTicks}
 					<line
@@ -130,17 +135,21 @@
 {/if}
 
 <style>
+	/* Readable, theme-adaptive axis colours (fall back to currentColor for a base-only
+	   consumer that doesn't provide the --ink token vocabulary). currentColor alone was a
+	   mode-hardcoded surface tone that went faint on a dark theme paper. */
 	.axis {
 		font-size: 11px;
-		fill: currentColor;
-		stroke: currentColor;
+		fill: var(--ink-mute, currentColor);
+		stroke: var(--ink-mute, currentColor);
 	}
 	.axis-label {
 		font-size: 13px;
 		font-weight: 500;
+		fill: var(--ink, currentColor);
 	}
 	[data-plot-axis-line] {
-		stroke: currentColor;
+		stroke: var(--paper-edge, currentColor);
 		/* Decoration only — never intercept clicks meant for data marks beneath it. */
 		pointer-events: none;
 	}

package/dist/Plot/Root.svelte

@@ -1,20 +1,46 @@
 <script lang="ts">
-	import { setContext, untrack } from 'svelte'
 	import type { Snippet } from 'svelte'
-	import { PlotState } from '../PlotState.svelte.js'
 	import { defaultPreset } from '../lib/preset.js'
+	import PlotSurface from '../PlotSurface.svelte'
 
 	type Margin = { top?: number; right?: number; bottom?: number; left?: number }
+	type Row = Record<string, unknown>
 
 	type Props = {
-		data?: Record<string, unknown>[]
+		data?: Row[]
 		x?: string
 		y?: string
 		color?: string
+		/** Interior aesthetic default (field); geoms inherit unless they set their own. */
+		fill?: string
 		width?: number
 		height?: number
 		margin?: Margin
 		mode?: 'light' | 'dark'
+		/** Chart direction. 'horizontal' stands the category axis up and runs the value
+		 *  axis sideways — x/y channels are unchanged. `flip` is sugar for 'horizontal'. */
+		orientation?: 'vertical' | 'horizontal'
+		flip?: boolean
+		/** Order the category (band) axis by aggregated value instead of by label — bars sorted
+		 *  by size (histogram-style). 'desc' (largest first) | 'asc'. */
+		sort?: 'asc' | 'desc'
+		/** Explicit scale domain overrides. */
+		xDomain?: unknown[]
+		yDomain?: unknown[]
+		/** Continuous colour scale controls (sequential/diverging). */
+		colorScale?: unknown
+		colorScheme?: string
+		colorDomain?: unknown[]
+		colorMidpoint?: number
+		/** Enable d3-zoom pan/zoom. */
+		zoom?: boolean
+		/** Opt-in click-to-select; fires onselect(detail) and syncs bind:selected (row refs). */
+		selectable?: boolean
+		onselect?: (detail: unknown) => void
+		selected?: Row[]
+		/** Animate marks on data/flip changes. Enabled one frame after mount so the
+		 *  initial layout paints un-animated. Default `true`. */
+		animate?: boolean
 		children?: Snippet
 	}
 
@@ -23,55 +49,50 @@
 		x = undefined,
 		y = undefined,
 		color = undefined,
+		fill = undefined,
 		width = 600,
 		height = 400,
 		margin = undefined,
-		mode = 'light',
+		mode = undefined,
+		orientation = undefined,
+		flip = false,
+		sort = undefined,
+		xDomain = undefined,
+		yDomain = undefined,
+		colorScale = undefined,
+		colorScheme = undefined,
+		colorDomain = undefined,
+		colorMidpoint = undefined,
+		zoom = false,
+		selectable = false,
+		onselect = undefined,
+		selected = $bindable([]),
+		animate = true,
 		children
 	}: Props = $props()
 
-	const plotState = untrack(
-		() =>
-			new PlotState({
-				data,
-				channels: { x, y, color },
-				width,
-				height,
-				margin,
-				mode,
-				chartPreset: defaultPreset
-			})
-	)
-
-	$effect(() => {
-		plotState.update({
-			data,
-			channels: { x, y, color },
-			width,
-			height,
-			margin,
-			mode,
-			chartPreset: defaultPreset
-		})
+	// The composable root is just PlotSurface (the shared shell) fed a config from these props.
+	const config = $derived({
+		data,
+		channels: { x, y, color, fill },
+		width,
+		height,
+		margin,
+		mode,
+		orientation: flip ? 'horizontal' : orientation,
+		sort,
+		xDomain,
+		yDomain,
+		colorScale,
+		colorScheme,
+		colorDomain,
+		colorMidpoint,
+		onselect,
+		selectable,
+		chartPreset: defaultPreset
 	})
-
-	setContext('plot-state', plotState)
-
-	const svgWidth = $derived(plotState.innerWidth + (margin?.left ?? 50) + (margin?.right ?? 30))
-	const svgHeight = $derived(plotState.innerHeight + (margin?.top ?? 20) + (margin?.bottom ?? 40))
-	const marginLeft = $derived(margin?.left ?? 50)
-	const marginTop = $derived(margin?.top ?? 20)
 </script>
 
-<svg
-	{width}
-	{height}
-	viewBox="0 0 {svgWidth} {svgHeight}"
-	role="img"
-	aria-label="Chart visualization"
-	data-plot-root
->
-	<g transform="translate({marginLeft}, {marginTop})" data-plot-canvas>
-		{@render children?.()}
-	</g>
-</svg>
+<PlotSurface {config} {animate} {zoom} bind:selected>
+	{@render children?.()}
+</PlotSurface>

package/dist/Plot/Root.svelte.d.ts

@@ -5,17 +5,44 @@ type Margin = {
     bottom?: number;
     left?: number;
 };
+type Row = Record<string, unknown>;
 type Props = {
-    data?: Record<string, unknown>[];
+    data?: Row[];
     x?: string;
     y?: string;
     color?: string;
+    /** Interior aesthetic default (field); geoms inherit unless they set their own. */
+    fill?: string;
     width?: number;
     height?: number;
     margin?: Margin;
     mode?: 'light' | 'dark';
+    /** Chart direction. 'horizontal' stands the category axis up and runs the value
+     *  axis sideways — x/y channels are unchanged. `flip` is sugar for 'horizontal'. */
+    orientation?: 'vertical' | 'horizontal';
+    flip?: boolean;
+    /** Order the category (band) axis by aggregated value instead of by label — bars sorted
+     *  by size (histogram-style). 'desc' (largest first) | 'asc'. */
+    sort?: 'asc' | 'desc';
+    /** Explicit scale domain overrides. */
+    xDomain?: unknown[];
+    yDomain?: unknown[];
+    /** Continuous colour scale controls (sequential/diverging). */
+    colorScale?: unknown;
+    colorScheme?: string;
+    colorDomain?: unknown[];
+    colorMidpoint?: number;
+    /** Enable d3-zoom pan/zoom. */
+    zoom?: boolean;
+    /** Opt-in click-to-select; fires onselect(detail) and syncs bind:selected (row refs). */
+    selectable?: boolean;
+    onselect?: (detail: unknown) => void;
+    selected?: Row[];
+    /** Animate marks on data/flip changes. Enabled one frame after mount so the
+     *  initial layout paints un-animated. Default `true`. */
+    animate?: boolean;
     children?: Snippet;
 };
-declare const Root: import("svelte").Component<Props, {}, "">;
+declare const Root: import("svelte").Component<Props, {}, "selected">;
 type Root = ReturnType<typeof Root>;
 export default Root;

package/dist/Plot/Timeline.svelte

@@ -24,8 +24,6 @@
 	const safeIndex = $derived(
 		frameKeys.length === 0 ? 0 : Math.min(currentIndex, frameKeys.length - 1)
 	)
-
-	const SPEEDS = [0.5, 1, 1.5, 2, 4]
 </script>
 
 <div class="timeline" data-plot-timeline>
@@ -56,17 +54,20 @@
 		data-plot-timeline-scrub
 	/>
 
-	<!-- Speed selector -->
-	<select
-		aria-label="Playback speed"
-		value={speed}
-		onchange={(e) => onspeed?.(Number(e.currentTarget.value))}
-		data-plot-timeline-speed
-	>
-		{#each SPEEDS as s (s)}
-			<option value={s}>{s}×</option>
-		{/each}
-	</select>
+	<!-- Speed (× multiplier) — themed numeric input -->
+	<div class="speed">
+		<input
+			type="number"
+			min="0.25"
+			max="8"
+			step="0.25"
+			value={speed}
+			aria-label="Playback speed"
+			onchange={(e) => onspeed?.(Math.max(0.25, Number(e.currentTarget.value) || 1))}
+			data-plot-timeline-speed
+		/>
+		<span class="speed-unit" aria-hidden="true">×</span>
+	</div>
 </div>
 
 <style>
@@ -76,6 +77,7 @@
 		gap: 8px;
 		padding: 8px 0;
 		font-size: 12px;
+		color: var(--ink-mute, currentColor);
 	}
 	.play-pause {
 		font-size: 16px;
@@ -83,12 +85,36 @@
 		background: none;
 		border: none;
 		padding: 0;
+		color: var(--ink, currentColor);
 	}
 	.scrub {
 		flex: 1;
+		accent-color: var(--accent, currentColor);
 	}
 	.frame-label {
 		min-width: 4ch;
 		text-align: right;
+		color: var(--ink, currentColor);
+	}
+	.speed {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+	}
+	.speed input {
+		width: 3.5em;
+		font: inherit;
+		color: var(--ink, currentColor);
+		background: var(--paper, transparent);
+		border: 1px solid var(--paper-edge, currentColor);
+		border-radius: 4px;
+		padding: 2px 4px;
+	}
+	.speed input:focus-visible {
+		outline: 2px solid var(--accent, currentColor);
+		outline-offset: 1px;
+	}
+	.speed-unit {
+		color: var(--ink-mute, currentColor);
 	}
 </style>

package/dist/Plot/index.d.ts

@@ -1,9 +1,9 @@
 export { default as Root } from "./Root.svelte";
 export { default as Axis } from "./Axis.svelte";
-export { default as Bar } from "./Bar.svelte";
+export { default as Bar } from "../geoms/Bar.svelte";
 export { default as Legend } from "./Legend.svelte";
 export { default as Grid } from "./Grid.svelte";
-export { default as Line } from "./Line.svelte";
-export { default as Area } from "./Area.svelte";
-export { default as Point } from "./Point.svelte";
-export { default as Arc } from "./Arc.svelte";
+export { default as Line } from "../geoms/Line.svelte";
+export { default as Area } from "../geoms/Area.svelte";
+export { default as Point } from "../geoms/Point.svelte";
+export { default as Arc } from "../geoms/Arc.svelte";

package/dist/Plot/index.js

@@ -1,9 +1,9 @@
 export { default as Root } from './Root.svelte'
 export { default as Axis } from './Axis.svelte'
-export { default as Bar } from './Bar.svelte'
+export { default as Bar } from '../geoms/Bar.svelte'
 export { default as Legend } from './Legend.svelte'
 export { default as Grid } from './Grid.svelte'
-export { default as Line } from './Line.svelte'
-export { default as Area } from './Area.svelte'
-export { default as Point } from './Point.svelte'
-export { default as Arc } from './Arc.svelte'
+export { default as Line } from '../geoms/Line.svelte'
+export { default as Area } from '../geoms/Area.svelte'
+export { default as Point } from '../geoms/Point.svelte'
+export { default as Arc } from '../geoms/Arc.svelte'