@rokkit/chart 1.3.8 → 1.3.10

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
@@ -49,59 +38,56 @@
 		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/Plot/Root.svelte

@@ -11,6 +11,8 @@
 		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
@@ -47,6 +49,7 @@
 		x = undefined,
 		y = undefined,
 		color = undefined,
+		fill = undefined,
 		width = 600,
 		height = 400,
 		margin = undefined,
@@ -71,7 +74,7 @@
 	// The composable root is just PlotSurface (the shared shell) fed a config from these props.
 	const config = $derived({
 		data,
-		channels: { x, y, color },
+		channels: { x, y, color, fill },
 		width,
 		height,
 		margin,

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

@@ -11,6 +11,8 @@ type Props = {
     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;

package/dist/Plot/index.d.ts

@@ -6,4 +6,4 @@ export { default as Grid } from "./Grid.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 "./Arc.svelte";
+export { default as Arc } from "../geoms/Arc.svelte";

package/dist/Plot/index.js

@@ -6,4 +6,4 @@ export { default as Grid } from './Grid.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 './Arc.svelte'
+export { default as Arc } from '../geoms/Arc.svelte'

package/dist/Plot.svelte

@@ -43,6 +43,8 @@
 		summary?: string
 		tooltip?: boolean | ((data: Row) => string)
 		zoom?: boolean
+		/** Force chart direction (else inferred). Also settable via `spec.orientation`. */
+		orientation?: 'horizontal' | 'vertical'
 		xFormat?: (v: unknown) => string
 		yFormat?: (v: unknown) => string
 		xTicks?: number
@@ -78,6 +80,7 @@
 		summary = '',
 		tooltip = false,
 		zoom = false,
+		orientation = undefined,
 		xFormat = undefined,
 		yFormat = undefined,
 		xTicks = undefined,
@@ -138,7 +141,7 @@
 			colorScale: spec?.colorScale,
 			colorScheme: spec?.colorScheme,
 			colorMidpoint: spec?.colorMidpoint,
-			orientation: spec?.orientation,
+			orientation: orientation ?? spec?.orientation,
 			sort: spec?.sort,
 			continuousCategory: spec?.continuousCategory,
 			chartPreset,

package/dist/Plot.svelte.d.ts

@@ -26,6 +26,8 @@ type Props = {
     summary?: string;
     tooltip?: boolean | ((data: Row) => string);
     zoom?: boolean;
+    /** Force chart direction (else inferred). Also settable via `spec.orientation`. */
+    orientation?: 'horizontal' | 'vertical';
     xFormat?: (v: unknown) => string;
     yFormat?: (v: unknown) => string;
     xTicks?: number;

package/dist/PlotState.svelte.d.ts

@@ -21,6 +21,7 @@ export class PlotState {
     patterns: Map<unknown, string> | SvelteMap<any, any>;
     symbols: Map<unknown, string> | SvelteMap<any, any>;
     colorField: any;
+    fillField: any;
     patternField: any;
     symbolField: any;
     geomTypes: SvelteSet<any>;
@@ -41,11 +42,12 @@ export class PlotState {
         symbols: any;
     };
     get data(): any[];
-    /** @returns {{ x?: string, y?: string, color?: string, pattern?: string, symbol?: string }} */
+    /** @returns {{ x?: string, y?: string, color?: string, fill?: string, pattern?: string, symbol?: string }} */
     get channels(): {
         x?: string;
         y?: string;
         color?: string;
+        fill?: string;
         pattern?: string;
         symbol?: string;
     };
@@ -80,9 +82,19 @@ export class PlotState {
         };
         opacity: {
             area: number;
+            bar: number;
+            line: number;
+            point: number;
+            arc: number;
             box: number;
             violin: number;
-            point: number;
+            jitter: number;
+            heatmap: number;
+            candlestick: number;
+            hexbin: number;
+            ribbon: number;
+            waterfall: number;
+            rule: number;
         };
         patterns: string[];
         symbols: string[];

package/dist/PlotState.svelte.js

@@ -73,11 +73,40 @@ export class PlotState {
 			x: tc.x ?? geom.channels?.x,
 			y: tc.y ?? geom.channels?.y,
 			color: tc.color ?? geom.channels?.color,
+			fill: tc.fill ?? geom.channels?.fill,
 			pattern: tc.pattern ?? geom.channels?.pattern,
 			symbol: tc.symbol ?? geom.channels?.symbol
 		}
 	}
 
+	// Field names feeding the shared categorical color scale: the `color` AND `fill` channels,
+	// from the top-level channels and EVERY geom (union, de-duped, order-preserving). Literal
+	// CSS colors are excluded. One palette/legend spans both aesthetics — the "shared scale"
+	// model (see docs/backlog/2026-08-17-chart-aesthetics-unification.md §2).
+	#sharedColorValues() {
+		const fields = []
+		const addField = (f) => {
+			if (f && !isLiteralColor(f) && !fields.includes(f)) fields.push(f)
+		}
+		addField(this.#channels.color)
+		addField(this.#channels.fill)
+		for (const g of this.#geoms) {
+			addField(g.channels?.color)
+			addField(g.channels?.fill)
+		}
+		const seen = new Set()
+		const values = []
+		for (const f of fields) {
+			for (const v of distinct(this.#data, f)) {
+				if (!seen.has(v)) {
+					seen.add(v)
+					values.push(v)
+				}
+			}
+		}
+		return values
+	}
+
 	#effectiveChannels = $derived.by(() => {
 		const tc = this.#channels
 		const firstGeom = this.#geoms[0]
@@ -210,8 +239,12 @@ export class PlotState {
 
 	// For stacked bars, compute y domain from per-x column totals.
 	#resolveStackDomain(field) {
-		const stackGeom = this.#geoms.find((g) => g.options?.stack)
+		const stackGeom = this.#geoms.find(
+			(g) => g.options?.stack || g.options?.position === 'stack' || g.options?.position === 'fill'
+		)
 		if (!stackGeom) return null
+		// position='fill' normalizes each column to 100% → the value domain is [0,1].
+		if (stackGeom.options?.position === 'fill') return [0, 1]
 		const xField = this.#effectiveChannels.x
 		const stackData = this.geomData(stackGeom.id)
 		if (!xField || stackData.length === 0) return null
@@ -221,8 +254,18 @@ export class PlotState {
 		const colorField = isLiteralColor(this.#effectiveChannels.color)
 			? null
 			: this.#effectiveChannels.color
+		const fillField = isLiteralColor(this.#effectiveChannels.fill)
+			? null
+			: this.#effectiveChannels.fill
 		const patternField = this.#effectiveChannels.pattern
-		const stackField = [colorField, patternField].find((f) => f && f !== xField) ?? colorField
+		// Mirror buildStackedBars/subBandFields (group=fill first, then color, then pattern).
+		const stackField =
+			[fillField, colorField, patternField].find((f) => f && f !== xField) ?? (fillField ?? colorField)
+		// No grouping field → buildStackedBars falls back to buildBars (individual bars, no
+		// actual stacking), so there's no stacked total to size to. Bail to the normal value
+		// extent; otherwise every row collapses to the same cKey below and the lookup's set()
+		// overwrites, shrinking the domain to the last row per x — and the bars overflow.
+		if (!stackField) return null
 		const lookup = new SvelteMap()
 		for (const d of stackData) {
 			const xVal = d[xField]
@@ -240,6 +283,31 @@ export class PlotState {
 		return [0, Math.max(0, ...totals.values())]
 	}
 
+	// Waterfall bars sit at the RUNNING TOTAL, not the per-step value — so the y-domain must
+	// span the cumulative range, else bars overflow the axis. Mirrors buildWaterfallMarks.
+	#resolveWaterfallDomain(field) {
+		const geom = this.#geoms.find((g) => g.type === 'waterfall')
+		if (!geom) return null
+		const data = this.geomData(geom.id)
+		if (data.length === 0) return null
+		const totalField = geom.options?.totalField
+		let cumulative = 0
+		let min = 0
+		let max = 0
+		for (const d of data) {
+			if (totalField && d[totalField]) {
+				min = Math.min(min, 0, cumulative)
+				max = Math.max(max, 0, cumulative)
+			} else {
+				const start = cumulative
+				cumulative += Number(d[field]) || 0
+				min = Math.min(min, start, cumulative)
+				max = Math.max(max, start, cumulative)
+			}
+		}
+		return [min, max]
+	}
+
 	yScale = $derived.by(() => {
 		const field = this.#effectiveChannels.y
 		if (!field) return null
@@ -248,7 +316,11 @@ export class PlotState {
 		// includeZero applies to the VALUE axis: vertical charts (value on y) and flipped
 		// charts (value still y, but now the horizontal screen axis) both want a 0 baseline.
 		const includeZero = this.orientation === 'vertical' || this.#flipped
-		const yDomain = this.#yDomain ?? this.#resolveBoxDomain() ?? this.#resolveStackDomain(field)
+		const yDomain =
+			this.#yDomain ??
+			this.#resolveBoxDomain() ??
+			this.#resolveStackDomain(field) ??
+			this.#resolveWaterfallDomain(field)
 		// Flip: the value (y) axis runs along the horizontal screen → range over width.
 		const range = this.#flipped ? [0, this.#innerWidth] : undefined
 		const base = buildUnifiedYScale(datasets, field, this.#innerHeight, { domain: yDomain, includeZero, range })
@@ -268,7 +340,7 @@ export class PlotState {
 			const literal = new Map([[null, { fill: field, stroke: field }]])
 			return literal
 		}
-		const values = this.#colorDomain ?? distinct(this.#data, field)
+		const values = this.#colorDomain ?? this.#sharedColorValues()
 		// No color channel but data exists → use first preset color for single-series rendering.
 		// This prevents geoms from falling back to gray (#888) on charts with no fill channel.
 		if (values.length === 0 && this.#data.length > 0) return assignColors([null], this.#mode, this.#chartPreset)
@@ -296,6 +368,10 @@ export class PlotState {
 	colorField = $derived(
 		isLiteralColor(this.#effectiveChannels.color) ? null : this.#effectiveChannels.color
 	)
+	// Fill field (interior aesthetic), parallel to colorField. Null for a literal CSS color.
+	fillField = $derived(
+		isLiteralColor(this.#effectiveChannels.fill) ? null : this.#effectiveChannels.fill
+	)
 	patternField = $derived(this.#effectiveChannels.pattern)
 	symbolField = $derived(this.#effectiveChannels.symbol)
 
@@ -432,7 +508,7 @@ export class PlotState {
 		// array separately, so their elements are not ===. Same content, aligned identity.
 		return this.#rawData
 	}
-	/** @returns {{ x?: string, y?: string, color?: string, pattern?: string, symbol?: string }} */
+	/** @returns {{ x?: string, y?: string, color?: string, fill?: string, pattern?: string, symbol?: string }} */
 	get channels() {
 		return this.#channels
 	}

package/dist/charts/AreaChart.svelte

@@ -14,7 +14,12 @@
 		stat?: string
 		curve?: 'linear' | 'smooth' | 'step'
 		pattern?: string
+		/** @deprecated use `position="stack"`. */
 		stack?: boolean
+		/** Multi-series arrangement: 'stack' | 'fill' | 'identity' (default). */
+		position?: 'stack' | 'fill' | 'identity'
+		/** Fixed area opacity 0–1. */
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
@@ -42,6 +47,8 @@
 		curve = undefined,
 		pattern = undefined,
 		stack = false,
+		position = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
 		mode = undefined,
@@ -82,5 +89,5 @@
 	{selectable}
 	bind:selected
 >
-	<Area {x} {y} color={fill} {pattern} {stat} options={{ curve, stack }} />
+	<Area {x} {y} color={fill} {pattern} {stat} {position} {alpha} options={{ curve, stack }} />
 </Plot>

package/dist/charts/AreaChart.svelte.d.ts

@@ -12,7 +12,12 @@ type Props = {
     stat?: string;
     curve?: 'linear' | 'smooth' | 'step';
     pattern?: string;
+    /** @deprecated use `position="stack"`. */
     stack?: boolean;
+    /** Multi-series arrangement: 'stack' | 'fill' | 'identity' (default). */
+    position?: 'stack' | 'fill' | 'identity';
+    /** Fixed area opacity 0–1. */
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';

package/dist/charts/BarChart.svelte

@@ -18,7 +18,12 @@
 		grid?: boolean
 		legend?: boolean
 		stat?: string
+		/** @deprecated use `position="stack"`. */
 		stack?: boolean
+		/** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' | 'identity'. */
+		position?: 'stack' | 'dodge' | 'fill' | 'identity'
+		/** Fixed bar opacity 0–1. */
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		tooltip?: boolean | ((data: Row) => string)
 		highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean)
@@ -46,6 +51,8 @@
 		legend = false,
 		stat = 'identity',
 		stack = false,
+		position = undefined,
+		alpha = undefined,
 		label = false,
 		tooltip = false,
 		highlight = undefined,
@@ -80,5 +87,5 @@
 	{selectable}
 	bind:selected
 >
-	<Bar {x} {y} color={fill} {pattern} {label} {stat} options={{ stack }} />
+	<Bar {x} {y} color={fill} {pattern} {label} {stat} {position} {alpha} options={{ stack }} />
 </Plot>

package/dist/charts/BarChart.svelte.d.ts

@@ -16,7 +16,12 @@ type Props = {
     grid?: boolean;
     legend?: boolean;
     stat?: string;
+    /** @deprecated use `position="stack"`. */
     stack?: boolean;
+    /** Multi-series arrangement: 'stack' | 'dodge' (default) | 'fill' | 'identity'. */
+    position?: 'stack' | 'dodge' | 'fill' | 'identity';
+    /** Fixed bar opacity 0–1. */
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     tooltip?: boolean | ((data: Row) => string);
     highlight?: 'first' | 'last' | 'min' | 'max' | number | ((row: Row, i: number) => boolean);

package/dist/charts/BoxPlot.svelte

@@ -9,6 +9,7 @@
 		x?: string
 		y?: string
 		fill?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
@@ -25,6 +26,7 @@
 		x = undefined,
 		y = undefined,
 		fill = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
 		mode = undefined,
@@ -38,5 +40,5 @@
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
-	<Box {x} {y} {fill} />
+	<Box {x} {y} {fill} {alpha} />
 </Plot>

package/dist/charts/BoxPlot.svelte.d.ts

@@ -4,6 +4,7 @@ type Props = {
     x?: string;
     y?: string;
     fill?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';

package/dist/charts/BubbleChart.svelte

@@ -13,6 +13,7 @@
 		color?: string
 		symbol?: string
 		size?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
@@ -38,6 +39,7 @@
 		color = undefined,
 		symbol: _symbol = undefined,
 		size, // required: field name for bubble radius
+		alpha = undefined,
 		width = 600,
 		height = 400,
 		mode = undefined,
@@ -76,5 +78,5 @@
 	{selectable}
 	bind:selected
 >
-	<Point {x} {y} {color} {size} />
+	<Point {x} {y} {color} {size} {alpha} />
 </Plot>

package/dist/charts/BubbleChart.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     color?: string;
     symbol?: string;
     size?: string;
+    alpha?: number;
     width?: number;
     height?: number;
     mode?: 'light' | 'dark';

package/dist/charts/LineChart.svelte

@@ -12,6 +12,7 @@
 		y?: string
 		color?: string
 		stat?: string
+		alpha?: number
 		symbol?: string
 		curve?: 'linear' | 'smooth' | 'step'
 		label?: boolean | string | ((data: Row) => unknown)
@@ -39,6 +40,7 @@
 		y = undefined,
 		color = undefined,
 		stat = 'identity',
+		alpha = undefined,
 		symbol = undefined,
 		curve = undefined, // forwarded to Line options
 		label = false,
@@ -82,5 +84,5 @@
 	{selectable}
 	bind:selected
 >
-	<Line {x} {y} {color} {symbol} {label} {stat} options={{ curve }} />
+	<Line {x} {y} {color} {symbol} {label} {stat} {alpha} options={{ curve }} />
 </Plot>

package/dist/charts/LineChart.svelte.d.ts

@@ -10,6 +10,7 @@ type Props = {
     y?: string;
     color?: string;
     stat?: string;
+    alpha?: number;
     symbol?: string;
     curve?: 'linear' | 'smooth' | 'step';
     label?: boolean | string | ((data: Row) => unknown);

package/dist/charts/PieChart.svelte

@@ -18,6 +18,7 @@
 		mode?: 'light' | 'dark'
 		legend?: boolean
 		stat?: string
+		alpha?: number
 	}
 
 	let {
@@ -33,7 +34,8 @@
 		height = 400,
 		mode = undefined,
 		legend = false,
-		stat = 'sum'
+		stat = 'sum',
+		alpha = undefined
 	}: Props = $props()
 </script>
 
@@ -48,5 +50,5 @@
 	{legend}
 	{tooltip}
 >
-	<Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} options={{ innerRadius }} />
+	<Arc theta={y} fill={label ?? fill} {pattern} {labelFn} {stat} {alpha} options={{ innerRadius }} />
 </Plot>

package/dist/charts/PieChart.svelte.d.ts

@@ -13,6 +13,7 @@ type Props = {
     mode?: 'light' | 'dark';
     legend?: boolean;
     stat?: string;
+    alpha?: number;
 };
 declare const PieChart: import("svelte").Component<Props, {}, "">;
 type PieChart = ReturnType<typeof PieChart>;

package/dist/charts/ScatterPlot.svelte

@@ -13,6 +13,7 @@
 		color?: string
 		symbol?: string
 		size?: string
+		alpha?: number
 		label?: boolean | string | ((data: Row) => unknown)
 		tooltip?: boolean | ((data: Row) => string)
 		width?: number
@@ -40,6 +41,7 @@
 		color = undefined,
 		symbol = undefined,
 		size = undefined,
+		alpha = undefined,
 		label = false,
 		tooltip = false,
 		width = 600,
@@ -80,5 +82,5 @@
 	{selectable}
 	bind:selected
 >
-	<Point {x} {y} {color} {size} {symbol} {label} options={{ jitter }} />
+	<Point {x} {y} {color} {size} {symbol} {label} {alpha} options={{ jitter }} />
 </Plot>

package/dist/charts/ScatterPlot.svelte.d.ts

@@ -11,6 +11,7 @@ type Props = {
     color?: string;
     symbol?: string;
     size?: string;
+    alpha?: number;
     label?: boolean | string | ((data: Row) => unknown);
     tooltip?: boolean | ((data: Row) => string);
     width?: number;

package/dist/charts/ViolinPlot.svelte

@@ -9,6 +9,7 @@
 		x?: string
 		y?: string
 		fill?: string
+		alpha?: number
 		width?: number
 		height?: number
 		mode?: 'light' | 'dark'
@@ -25,6 +26,7 @@
 		x = undefined,
 		y = undefined,
 		fill = undefined,
+		alpha = undefined,
 		width = 600,
 		height = 400,
 		mode = undefined,
@@ -38,5 +40,5 @@
 </script>
 
 <Plot {data} {width} {height} {mode} {grid} {legend} {tooltip} {yFormat} {yTicks} {minorTicks}>
-	<Violin {x} {y} {fill} />
+	<Violin {x} {y} {fill} {alpha} />
 </Plot>