@rokkit/chart 1.3.7 → 1.3.8

package/dist/geoms/Violin.svelte

@@ -8,21 +8,30 @@
 		y?: string
 		fill?: string
 		stat?: string
+		/** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+		 *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+		side?: 'left' | 'right' | 'center'
+		/** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+		pattern?: string
 		options?: { opacity?: number }
 	}
 
-	let { x, y, fill, stat = 'boxplot', options = {} }: Props = $props()
+	let { x, y, fill, stat = 'boxplot', side = 'center', pattern, options = {} }: Props = $props()
 
 	const plotState = getContext<PlotState>('plot-state')
 	let id = $state<string | null>(null)
 
-	// fill ?? x drives the colors map for both violin interior and outline
-	const fillChannel = $derived(fill ?? x)
+	// Fall back to the root Plot channels when the geom omits x/y (composes under
+	// <Plot.Root x y> without silently NaN-ing).
+	const xf = $derived(x ?? plotState.channels?.x)
+	const yf = $derived(y ?? plotState.channels?.y)
+	// fill ?? effective-x drives the colors map for both violin interior and outline
+	const fillChannel = $derived(fill ?? xf)
 
 	onMount(() => {
 		id = plotState.registerGeom({
 			type: 'violin',
-			channels: { x, y, color: fillChannel },
+			channels: { x: xf, y: yf, color: fillChannel, pattern },
 			stat,
 			options
 		})
@@ -32,17 +41,28 @@
 	})
 
 	$effect(() => {
-		if (id) plotState.updateGeom(id, { channels: { x, y, color: fillChannel }, stat })
+		if (id)
+			plotState.updateGeom(id, { channels: { x: xf, y: yf, color: fillChannel, pattern }, stat })
 	})
 
 	const data = $derived(id ? plotState.geomData(id) : [])
 	const xScale = $derived(plotState.xScale)
 	const yScale = $derived(plotState.yScale)
 	const colors = $derived(plotState.colors)
+	const patterns = $derived(plotState.patterns)
 
 	const violins = $derived.by(() => {
 		if (!data?.length || !xScale || !yScale) return []
-		return buildViolins(data, { x, fill: fillChannel }, xScale, yScale, colors)
+		return buildViolins(
+			data,
+			{ x: xf, fill: fillChannel, pattern },
+			xScale,
+			yScale,
+			colors,
+			plotState.place.bind(plotState),
+			side,
+			patterns
+		)
 	})
 </script>
 
@@ -60,6 +80,10 @@
 				onmouseenter={() => plotState.setHovered(v.data)}
 				onmouseleave={() => plotState.clearHovered()}
 			/>
+			{#if v.patternId}
+				<!-- Texture fill overlay (matches the violin silhouette) -->
+				<path d={v.d} fill="url(#{v.patternId})" pointer-events="none" />
+			{/if}
 		{/each}
 	</g>
 {/if}

package/dist/geoms/Violin.svelte.d.ts

@@ -3,6 +3,11 @@ type Props = {
     y?: string;
     fill?: string;
     stat?: string;
+    /** Half-violin: 'left'/'right' draw one side (flat edge at the band centre) for
+     *  raincloud/split plots; 'center' (default) is the full symmetric silhouette. */
+    side?: 'left' | 'right' | 'center';
+    /** Data field driving a texture fill (from the shared pattern set) instead of a solid fill. */
+    pattern?: string;
     options?: {
         opacity?: number;
     };

package/dist/geoms/Waterfall.svelte

@@ -87,14 +87,19 @@
 				fill = yVal >= 0 ? positiveColor : negativeColor
 			}
 
+			// Place two (band, value) corners so the bar transposes under orientation flip.
+			const c1 = plotState.place(xPos, barTop)
+			const c2 = plotState.place(xPos + bw, barBottom)
 			return {
 				key: `${xVal}-${i}`,
-				x: xPos,
-				y: barTop,
-				width: bw,
-				height: Math.max(1, barBottom - barTop),
+				x: Math.min(c1.x, c2.x),
+				y: Math.min(c1.y, c2.y),
+				width: Math.abs(c2.x - c1.x),
+				height: Math.max(1, Math.abs(c2.y - c1.y)),
 				fill,
-				cumulative,
+				bandStart: xPos,
+				bandEnd: xPos + bw,
+				cumY: yScale(cumulative) ?? 0,
 				data: d
 			}
 		})
@@ -119,11 +124,13 @@
 			</rect>
 			<!-- Connector line to next bar -->
 			{#if i < bars.length - 1}
+				{@const cs = plotState.place(bar.bandEnd, bar.cumY)}
+				{@const ce = plotState.place(bars[i + 1].bandStart, bar.cumY)}
 				<line
-					x1={bar.x + bar.width}
-					y1={yScale(bar.cumulative)}
-					x2={bars[i + 1].x}
-					y2={yScale(bar.cumulative)}
+					x1={cs.x}
+					y1={cs.y}
+					x2={ce.x}
+					y2={ce.y}
 					stroke="currentColor"
 					stroke-width={connectorWidth}
 					stroke-dasharray="3 2"

package/dist/geoms/lib/areas.d.ts

@@ -8,6 +8,7 @@
  * @param {Map<unknown, {fill: string, stroke: string}>} colors
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
+ * @param {Function} [place] - orientation mapper (x, y) => {x, y}
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 export function buildAreas(data: Object[], channels: {
@@ -18,7 +19,7 @@ export function buildAreas(data: Object[], channels: {
 }, xScale: Function, yScale: Function, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>): {
+}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: Function): {
     d: string;
     fill: string;
     stroke: string;
@@ -45,7 +46,10 @@ export function buildStackedAreas(data: Object[], channels: {
 }, xScale: Function, yScale: Function, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>): {
+}>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}): {
     d: string;
     fill: string;
     stroke: string;

package/dist/geoms/lib/areas.js

@@ -11,20 +11,24 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * @param {Map<unknown, {fill: string, stroke: string}>} colors
  * @param {'linear'|'smooth'|'step'} [curve]
  * @param {Map<unknown, string>} [patterns]
+ * @param {Function} [place] - orientation mapper (x, y) => {x, y}
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
-export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+export function buildAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 	const baseline = yScale.range()[0] // bottom of the chart (y pixel max)
 
 	const xPos = (d) =>
 		typeof xScale.bandwidth === 'function' ? xScale(d[xf]) + xScale.bandwidth() / 2 : xScale(d[xf])
 
+	// Each area edge (baseline + top) is placed so the area transposes under orientation.
+	const toEdge = (d) => ({ base: place(xPos(d), baseline), top: place(xPos(d), yScale(d[yf])) })
 	const makeGen = () => {
 		const gen = area()
-			.x(xPos)
-			.y0(baseline)
-			.y1((d) => yScale(d[yf]))
+			.x0((p) => p.base.x)
+			.y0((p) => p.base.y)
+			.x1((p) => p.top.x)
+			.y1((p) => p.top.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
@@ -47,7 +51,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return [{ d: makeGen()(sortByX(data)), fill: entry.fill, stroke: 'none', key: null, patternId }]
+		return [{ d: makeGen()(sortByX(data).map(toEdge)), fill: entry.fill, stroke: 'none', key: null, patternId }]
 	}
 
 	// Group by color field
@@ -72,7 +76,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
 				: null
-		return { d: makeGen()(sortByX(rows)), fill: entry.fill, stroke: 'none', key, patternId }
+		return { d: makeGen()(sortByX(rows).map(toEdge)), fill: entry.fill, stroke: 'none', key, patternId }
 	})
 }
 
@@ -88,7 +92,7 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
  * @param {Map<unknown, string>} [patterns]
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
-export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns) {
+export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 	if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
 
@@ -115,11 +119,13 @@ export function buildStackedAreas(data, channels, xScale, yScale, colors, curve,
 			? xScale(d.data[xf]) + xScale.bandwidth() / 2
 			: xScale(d.data[xf])
 
+	const toEdge = (d) => ({ base: place(xPos(d), yScale(d[0])), top: place(xPos(d), yScale(d[1])) })
 	const makeGen = () => {
 		const gen = area()
-			.x(xPos)
-			.y0((d) => yScale(d[0]))
-			.y1((d) => yScale(d[1]))
+			.x0((p) => p.base.x)
+			.y0((p) => p.base.y)
+			.x1((p) => p.top.x)
+			.y1((p) => p.top.y)
 		if (curve === 'smooth') gen.curve(curveCatmullRom)
 		else if (curve === 'step') gen.curve(curveStep)
 		return gen
@@ -144,7 +150,7 @@ export function buildStackedAreas(data, channels, xScale, yScale, colors, curve,
 				? toPatternId(String(patternKey))
 				: null
 		return {
-			d: makeGen()(layer) ?? '',
+			d: makeGen()(layer.map(toEdge)) ?? '',
 			fill: entry.fill,
 			stroke: 'none',
 			key: colorKey,

package/dist/geoms/lib/bars.d.ts

@@ -1,3 +1,18 @@
-export function buildGroupedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any): any;
-export function buildStackedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any): any;
-export function buildHorizontalBars(data: any, channels: any, xScale: any, yScale: any, colors: any, _innerHeight: any): any;
+/**
+ * The one bar builder. Expresses each bar in abstract (category, value) space and maps it to
+ * screen via `place()`, so it renders vertical or horizontal (flip) with the same code.
+ *
+ * Category (x) positioning has two modes:
+ * - band (default): a scaleBand slots each category; sub-bands split grouped series.
+ * - continuous (`continuousCategory`): a LINEAR position scale (e.g. a bar-chart race's tweened
+ *   `_rank`). Each bar centres on `xScale(pos)` with a fixed thickness from the scale step, so a
+ *   fractional position tweens smoothly (a band scale can only jump between slots). No sub-banding.
+ */
+export function buildBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}, continuousCategory?: boolean): any;
+export function buildStackedBars(data: any, channels: any, xScale: any, yScale: any, colors: any, innerHeight: any, patterns: any, place?: (x: any, y: any) => {
+    x: any;
+    y: any;
+}): any;

package/dist/geoms/lib/bars.js

@@ -33,27 +33,63 @@ function subBandFields(channels) {
 	return out
 }
 
-export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+/**
+ * The one bar builder. Expresses each bar in abstract (category, value) space and maps it to
+ * screen via `place()`, so it renders vertical or horizontal (flip) with the same code.
+ *
+ * Category (x) positioning has two modes:
+ * - band (default): a scaleBand slots each category; sub-bands split grouped series.
+ * - continuous (`continuousCategory`): a LINEAR position scale (e.g. a bar-chart race's tweened
+ *   `_rank`). Each bar centres on `xScale(pos)` with a fixed thickness from the scale step, so a
+ *   fractional position tweens smoothly (a band scale can only jump between slots). No sub-banding.
+ */
+export function buildBars(
+	data,
+	channels,
+	xScale,
+	yScale,
+	colors,
+	innerHeight,
+	patterns,
+	place = (x, y) => ({ x, y }),
+	continuousCategory = false
+) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 
-	const bandScale = ensureBandX(xScale, data, xf)
-
-	// Sub-banding: only fields that differ from x drive grouping within a band
-	const subFields = subBandFields(channels)
+	const subFields = continuousCategory ? [] : subBandFields(channels)
 	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
-	const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
-	const subScale =
-		subDomain.length > 1
-			? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
-			: null
-
-	// Baseline for bars: at y=0 when domain spans zero (supports negative bars),
-	// otherwise at the bottom of the chart area.
+
+	let positionOf
+	let thicknessOf
+	if (continuousCategory) {
+		const [r0, r1] = xScale.range()
+		const [d0, d1] = xScale.domain()
+		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
+		const thickness = step * 0.9
+		thicknessOf = () => thickness
+		positionOf = (d) => (xScale(Number(d[xf])) ?? 0) - thickness / 2
+	} else {
+		const bandScale = ensureBandX(xScale, data, xf)
+		const subDomain = subFields.length > 0 ? [...new Set(data.map(getSubKey))] : []
+		const subScale =
+			subDomain.length > 1
+				? scaleBand().domain(subDomain).range([0, bandScale.bandwidth()]).padding(0.05)
+				: null
+		thicknessOf = () => (subScale ? subScale.bandwidth() : bandScale.bandwidth())
+		positionOf = (d) => {
+			const bandX = bandScale(d[xf]) ?? 0
+			const subX = subScale ? (subScale(getSubKey(d)) ?? 0) : 0
+			return bandX + subX
+		}
+	}
+
+	// Value baseline: at value=0 when the domain spans zero (supports negative bars), else the
+	// value-axis origin (yScale.range()[0] — innerHeight when vertical, 0 when flipped).
 	const yDomain = typeof yScale.bandwidth !== 'function' ? yScale.domain?.() : null
 	const baseline =
 		yDomain && yDomain[0] <= 0 && yDomain[yDomain.length - 1] >= 0
-			? (yScale(0) ?? innerHeight)
-			: innerHeight
+			? (yScale(0) ?? yScale.range()[0])
+			: yScale.range()[0]
 
 	return data.map((d, i) => {
 		const xVal = d[xf]
@@ -68,19 +104,26 @@ export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHe
 				? toPatternId(String(patternKey))
 				: null
 
-		const bandX = bandScale(xVal) ?? 0
-		const subX = subScale && subKey ? (subScale(subKey) ?? 0) : 0
-		const barX = bandX + subX
-		const barWidth = subScale ? subScale.bandwidth() : bandScale.bandwidth()
-		const barY = yScale(d[yf]) ?? baseline
+		const barBand = positionOf(d)
+		const barThickness = thicknessOf(d)
+		const barValue = yScale(d[yf]) ?? baseline
+		// Two opposite corners in (band, value) space, placed to screen — transposes under flip.
+		const c1 = place(barBand, baseline)
+		const c2 = place(barBand + barThickness, barValue)
+
+		// Continuous mode keys by _entity so Svelte reuses each bar as its position tweens (a
+		// race's rows reorder every frame); band mode keys by category + sub-band + index.
+		const key = continuousCategory
+			? `${String(d._entity ?? xVal)}::${String(colorKey ?? '')}`
+			: `${String(xVal)}::${subKey}::${i}`
 
 		return {
 			data: d,
-			key: `${String(xVal)}::${subKey}::${i}`,
-			x: barX,
-			y: Math.min(barY, baseline),
-			width: barWidth,
-			height: Math.abs(baseline - barY),
+			key,
+			x: Math.min(c1.x, c2.x),
+			y: Math.min(c1.y, c2.y),
+			width: Math.abs(c2.x - c1.x),
+			height: Math.abs(c2.y - c1.y),
 			fill: colorEntry.fill,
 			stroke: colorEntry.stroke,
 			patternId
@@ -88,7 +131,7 @@ export function buildGroupedBars(data, channels, xScale, yScale, colors, innerHe
 	})
 }
 
-export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns) {
+export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place = (x, y) => ({ x, y })) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 
 	const bandScale = ensureBandX(xScale, data, xf)
@@ -96,7 +139,7 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 	// Stack dimension: first non-x grouping field (prefer pattern, then color)
 	const subFields = subBandFields(channels)
 	if (subFields.length === 0) {
-		return buildGroupedBars(data, channels, xScale, yScale, colors, innerHeight, patterns)
+		return buildBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place)
 	}
 	const stackField = subFields[0]
 
@@ -152,72 +195,3 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 	}
 	return bars
 }
-
-export function buildHorizontalBars(data, channels, xScale, yScale, colors, _innerHeight) {
-	const { x: xf, y: yf, color: cf } = channels
-	const isBand = typeof yScale?.bandwidth === 'function'
-
-	if (!isBand) {
-		// Linear y-scale: rank-based bar chart race.
-		// Each row has a numeric _rank that tweens smoothly between frames.
-		// No sub-grouping — each rank position holds exactly one entity.
-		const [r0, r1] = yScale.range() // [innerHeight, 0]
-		const [d0, d1] = yScale.domain() // [0, N-1]
-		const step = Math.max(Math.abs(r0 - r1) / Math.max(d1 - d0, 1), 1)
-		const barH = step * 0.9
-
-		return data.map((d) => {
-			const rankVal = Number(d[yf])
-			const colorKey = cf ? d[cf] : null
-			const colorEntry =
-				colors?.get(colorKey) ??
-				colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-
-			const centerY = yScale(rankVal) ?? 0
-			return {
-				data: d,
-				// Key by entity name (_entity) so Svelte reuses elements as rank tweens
-				key: `${String(d._entity ?? d[yf])}::${String(colorKey ?? '')}`,
-				x: 0,
-				y: centerY - barH / 2,
-				width: xScale(d[xf]) ?? 0,
-				height: barH,
-				fill: colorEntry.fill,
-				stroke: colorEntry.stroke,
-				patternId: null
-			}
-		})
-	}
-
-	// Band scale: standard grouped horizontal bars.
-	// Only create sub-bands when multiple entities share the same y-band (true grouping).
-	const yVals = new Set(data.map((d) => d[yf]))
-	const colorKeys = cf && !isLiteralColor(cf) ? [...new Set(data.map((d) => d[cf]))] : []
-	const hasSubBands = colorKeys.length > 1 && data.length > yVals.size
-	const subScale = hasSubBands
-		? scaleBand().domain(colorKeys).range([0, yScale.bandwidth()]).padding(0.05)
-		: null
-
-	return data.map((d) => {
-		const yVal = d[yf]
-		const colorKey = cf ? d[cf] : null
-		const colorEntry =
-			colors?.get(colorKey) ??
-			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
-
-		const bandY = yScale(yVal) ?? 0
-		const subY = subScale ? (subScale(colorKey) ?? 0) : 0
-
-		return {
-			data: d,
-			key: `${String(yVal)}::${String(colorKey ?? '')}`,
-			x: 0,
-			y: bandY + subY,
-			width: xScale(d[xf]) ?? 0,
-			height: subScale ? subScale.bandwidth() : yScale.bandwidth(),
-			fill: colorEntry.fill,
-			stroke: colorEntry.stroke,
-			patternId: null
-		}
-	})
-}

package/dist/index.d.ts

@@ -10,6 +10,15 @@ export namespace Plot {
     export { Arc };
     export { Highlight };
     export { Trend };
+    export { Box };
+    export { Violin };
+    export { Jitter };
+    export { Candlestick };
+    export { Heatmap };
+    export { Hexbin };
+    export { Ribbon };
+    export { Waterfall };
+    export { Rule };
 }
 export namespace PlotLayers { }
 export { default as PlotChart } from "./Plot.svelte";
@@ -32,6 +41,8 @@ export { default as GeomHexbin } from "./geoms/Hexbin.svelte";
 export { default as GeomRibbon } from "./geoms/Ribbon.svelte";
 export { default as GeomHighlight } from "./geoms/Highlight.svelte";
 export { default as GeomTrend } from "./geoms/Trend.svelte";
+export { default as GeomJitter } from "./geoms/Jitter.svelte";
+export { default as GeomRule } from "./geoms/Rule.svelte";
 export { default as Chart } from "./Chart.svelte";
 export { default as Sparkline } from "./Sparkline.svelte";
 export { default as BarChart } from "./charts/BarChart.svelte";
@@ -57,14 +68,23 @@ export { default as FilterSlider } from "./crossfilter/FilterSlider.svelte";
 export { default as FilterHistogram } from "./crossfilter/FilterHistogram.svelte";
 import Root from './Plot/Root.svelte';
 import Axis from './Plot/Axis.svelte';
-import Bar from './Plot/Bar.svelte';
+import Bar from './geoms/Bar.svelte';
 import Grid from './Plot/Grid.svelte';
 import Legend from './Plot/Legend.svelte';
-import Line from './Plot/Line.svelte';
-import Area from './Plot/Area.svelte';
-import Point from './Plot/Point.svelte';
+import Line from './geoms/Line.svelte';
+import Area from './geoms/Area.svelte';
+import Point from './geoms/Point.svelte';
 import Arc from './Plot/Arc.svelte';
 import Highlight from './geoms/Highlight.svelte';
 import Trend from './geoms/Trend.svelte';
+import Box from './geoms/Box.svelte';
+import Violin from './geoms/Violin.svelte';
+import Jitter from './geoms/Jitter.svelte';
+import Candlestick from './geoms/Candlestick.svelte';
+import Heatmap from './geoms/Heatmap.svelte';
+import Hexbin from './geoms/Hexbin.svelte';
+import Ribbon from './geoms/Ribbon.svelte';
+import Waterfall from './geoms/Waterfall.svelte';
+import Rule from './geoms/Rule.svelte';
 export { createChartPreset, defaultPreset } from "./lib/preset.js";
 export { buildSequentialScale, buildDivergingScale } from "./lib/brewing/colors.js";

package/dist/index.js

@@ -1,14 +1,23 @@
 import Root from './Plot/Root.svelte'
 import Axis from './Plot/Axis.svelte'
-import Bar from './Plot/Bar.svelte'
+import Bar from './geoms/Bar.svelte'
 import Grid from './Plot/Grid.svelte'
 import Legend from './Plot/Legend.svelte'
-import Line from './Plot/Line.svelte'
-import Area from './Plot/Area.svelte'
-import Point from './Plot/Point.svelte'
+import Line from './geoms/Line.svelte'
+import Area from './geoms/Area.svelte'
+import Point from './geoms/Point.svelte'
 import Arc from './Plot/Arc.svelte'
 import Highlight from './geoms/Highlight.svelte'
 import Trend from './geoms/Trend.svelte'
+import Box from './geoms/Box.svelte'
+import Violin from './geoms/Violin.svelte'
+import Jitter from './geoms/Jitter.svelte'
+import Candlestick from './geoms/Candlestick.svelte'
+import Heatmap from './geoms/Heatmap.svelte'
+import Hexbin from './geoms/Hexbin.svelte'
+import Ribbon from './geoms/Ribbon.svelte'
+import Waterfall from './geoms/Waterfall.svelte'
+import Rule from './geoms/Rule.svelte'
 
 // Composable Plot primitives — use as <Plot.Root>, <Plot.Axis>, <Plot.Bar>, etc.
 export const Plot = {
@@ -22,7 +31,16 @@ export const Plot = {
 	Point,
 	Arc,
 	Highlight,
-	Trend
+	Trend,
+	Box,
+	Violin,
+	Jitter,
+	Candlestick,
+	Heatmap,
+	Hexbin,
+	Ribbon,
+	Waterfall,
+	Rule
 }
 
 /** @deprecated Use Plot instead */
@@ -54,6 +72,8 @@ export { default as GeomHexbin } from './geoms/Hexbin.svelte'
 export { default as GeomRibbon } from './geoms/Ribbon.svelte'
 export { default as GeomHighlight } from './geoms/Highlight.svelte'
 export { default as GeomTrend } from './geoms/Trend.svelte'
+export { default as GeomJitter } from './geoms/Jitter.svelte'
+export { default as GeomRule } from './geoms/Rule.svelte'
 
 // Export standalone components
 export { default as Chart } from './Chart.svelte'

package/dist/lib/brewing/ViolinBrewer.svelte.d.ts

@@ -3,6 +3,6 @@
  * fill = violin body color, color = outline stroke.
  */
 export class ViolinBrewer extends QuartileBrewer {
-    violins: any[];
+    violins: any;
 }
 import { QuartileBrewer } from './QuartileBrewer.svelte.js';

package/dist/lib/brewing/marks/arcs.js

@@ -15,7 +15,13 @@ import { toPatternId } from '../../brewing/patterns.js'
 export function buildArcs(data, channels, colors, width, height, opts = {}, patterns) {
 	const { color: lf, y: yf } = channels
 	const radius = Math.min(width, height) / 2
-	const innerRadius = opts.innerRadius ?? 0
+	// innerRadius: a value <= 1 is a fraction of the radius (responsive donut);
+	// a value > 1 is absolute pixels. Clamp below the outer radius so a bad value
+	// (e.g. a fraction/pixel mixup) can never invert the arc into a giant ring
+	// rendered outside the circle.
+	const rawInner = opts.innerRadius ?? 0
+	const innerPx = rawInner <= 1 ? rawInner * radius : rawInner
+	const innerRadius = Math.max(0, Math.min(innerPx, radius * 0.98))
 	const pieGen = pie().value((d) => Number(d[yf]))
 	const arcGen = arc().innerRadius(innerRadius).outerRadius(radius)
 	const slices = pieGen(data)

package/dist/lib/brewing/marks/boxes.d.ts

@@ -8,17 +8,26 @@
  * Box body uses the lighter fill shade; whiskers and median use the darker stroke shade.
  *
  * @param {Object[]} data - Pre-aggregated rows with quartile fields
- * @param {{ x?: string, fill?: string }} channels
+ * @param {{ x?: string, fill?: string, pattern?: string }} channels
  *   `fill` drives the box and whisker color (defaults to x-field).
  * @param {import('d3-scale').ScaleBand} xScale
  * @param {import('d3-scale').ScaleLinear} yScale
  * @param {Map<unknown, {fill:string, stroke:string}>} colors
+ * @param {{ side?: 'left'|'right'|'center', width?: number, patterns?: Map<unknown, string> }} [opts]
+ *   `side` offsets the box to one half of the band; `width` is the box thickness as a
+ *   fraction of the (sub-)band (for a thin raincloud box); `patterns` maps a pattern-channel
+ *   value to a pattern name for texture fills. Defaults preserve the full box.
  * @returns {Array}
  */
 export function buildBoxes(data: Object[], channels: {
     x?: string;
     fill?: string;
+    pattern?: string;
 }, xScale: import("d3-scale").ScaleBand<any>, yScale: import("d3-scale").ScaleLinear<any, any, never>, colors: Map<unknown, {
     fill: string;
     stroke: string;
-}>): any[];
+}>, opts?: {
+    side?: "left" | "right" | "center";
+    width?: number;
+    patterns?: Map<unknown, string>;
+}): any[];