@rokkit/chart 1.3.8 → 1.3.10

package/dist/geoms/lib/aesthetics.js

@@ -0,0 +1,45 @@
+// Shared aesthetic resolution for all geoms. Done ONCE here so every geom's build
+// function inherits the same ggplot-aligned fill/color and alpha rules.
+// See docs/backlog/2026-08-17-chart-aesthetics-unification.md §2, §3, §11.
+
+const GRAY = { fill: '#888', stroke: '#888' }
+
+/**
+ * Resolve a mark's interior (fill) and outline (stroke) from the `fill` and `color`
+ * channels through the shared categorical `colors` palette (Map<value, {fill, stroke}>).
+ *
+ * ggplot fallback:
+ *  - color-only → fill AND stroke from the color value's entry (backward compatible)
+ *  - fill-only  → fill AND stroke from the fill value's entry
+ *  - both       → interior from the fill value, outline from the color value
+ *  - neither    → the first palette entry (single-series)
+ *
+ * @param {Record<string, unknown>} row
+ * @param {{ fill?: string, color?: string }} channels
+ * @param {Map<unknown, { fill: string, stroke: string }>} colors
+ * @returns {{ fill: string, stroke: string }}
+ */
+export function resolveFillStroke(row, channels, colors) {
+	const { fill, color } = channels ?? {}
+	const first = colors?.values?.().next?.().value ?? GRAY
+	const fillEntry = fill ? (colors?.get(row?.[fill]) ?? first) : null
+	const colorEntry = color ? (colors?.get(row?.[color]) ?? first) : null
+	const base = fillEntry ?? colorEntry ?? first
+	return {
+		fill: (fillEntry ?? base).fill,
+		stroke: (colorEntry ?? base).stroke
+	}
+}
+
+/**
+ * Resolve a geom's mark opacity: an explicit fixed `alpha`, else the per-geom preset
+ * default, else fully opaque.
+ * @param {number|undefined} alpha
+ * @param {string} type - geom type key into preset.opacity
+ * @param {{ opacity?: Record<string, number> }} [preset]
+ * @returns {number}
+ */
+export function resolveAlpha(alpha, type, preset) {
+	if (typeof alpha === 'number') return alpha
+	return preset?.opacity?.[type] ?? 1
+}

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

@@ -49,7 +49,7 @@ export function buildStackedAreas(data: Object[], channels: {
 }>, curve?: "linear" | "smooth" | "step", patterns?: Map<unknown, string>, place?: (x: any, y: any) => {
     x: any;
     y: any;
-}): {
+}, normalize?: boolean): {
     d: string;
     fill: string;
     stroke: string;

package/dist/geoms/lib/areas.js

@@ -1,5 +1,6 @@
-import { area, stack, curveCatmullRom, curveStep } from 'd3-shape'
+import { area, stack, stackOffsetExpand, curveCatmullRom, curveStep } from 'd3-shape'
 import { toPatternId } from '../../lib/brewing/patterns.js'
+import { literalColor, markEntry } from '../../lib/brewing/colors.js'
 
 /**
  * Builds area path geometry for multi-series area charts.
@@ -15,16 +16,25 @@ import { toPatternId } from '../../lib/brewing/patterns.js'
  * @returns {{ d: string, fill: string, stroke: string, key: unknown, patternId: string|null }[]}
  */
 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 { x: xf, y: yf, pattern: pf } = channels
+	// A literal color (var()/oklch()/hex/currentColor) isn't a data field — it's the exact
+	// fill the caller wants for THIS area. Don't group on it, and don't fall back to the
+	// shared color scale (one value across all geoms); use it directly.
+	const lit = literalColor(channels.color)
+	const cf = lit ? undefined : channels.color
 	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])) })
+	// `v` carries the raw y-value so the generator can break the area at a gap (null).
+	const toEdge = (d) => ({ base: place(xPos(d), baseline), top: place(xPos(d), yScale(d[yf])), v: d[yf] })
 	const makeGen = () => {
 		const gen = area()
+			// A null y-value is a GAP (a missing period): break the area there instead of
+			// dropping it onto the 0 baseline. A genuine 0 stays defined and fills.
+			.defined((p) => Number.isFinite(p.top.y) && (yf === undefined || yf === null || (p.v !== undefined && p.v !== null)))
 			.x0((p) => p.base.x)
 			.y0((p) => p.base.y)
 			.x1((p) => p.top.x)
@@ -45,7 +55,8 @@ export function buildAreas(data, channels, xScale, yScale, colors, curve, patter
 	}
 
 	if (!cf) {
-		const entry = colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		// A literal color IS the fill; a single-series field uses the shared shade.
+		const entry = markEntry(lit, undefined, colors, colors?.values().next().value ?? { fill: '#888', stroke: '#888' })
 		const patternKey = pf ? data[0]?.[pf] : null
 		const patternId =
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
@@ -92,7 +103,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, place = (x, y) => ({ x, y })) {
+export function buildStackedAreas(data, channels, xScale, yScale, colors, curve, patterns, place = (x, y) => ({ x, y }), normalize = false) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
 	if (!cf) return buildAreas(data, channels, xScale, yScale, colors, curve, patterns)
 
@@ -132,6 +143,8 @@ export function buildStackedAreas(data, channels, xScale, yScale, colors, curve,
 	}
 
 	const stackGen = stack().keys(colorCategories)
+	// position='fill' → normalize each x column to [0,1] (100% stacked area).
+	if (normalize) stackGen.offset(stackOffsetExpand)
 	const layers = stackGen(wide)
 
 	const orderedPatternKeys = pf && pf !== cf ? [...(patterns?.keys() ?? [])] : null

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

@@ -11,8 +11,8 @@
 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;
+}, continuousCategory?: boolean, dodge?: 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;
+}, normalize?: boolean): any;

package/dist/geoms/lib/bars.js

@@ -1,7 +1,7 @@
 import { scaleBand } from 'd3-scale'
-import { stack } from 'd3-shape'
+import { stack, stackOffsetExpand } from 'd3-shape'
 import { toPatternId } from '../../lib/brewing/patterns.js'
-import { isLiteralColor } from '../../lib/brewing/colors.js'
+import { isLiteralColor, literalColor, markEntry } from '../../lib/brewing/colors.js'
 
 /**
  * Returns a band scale suitable for bar x-positioning.
@@ -17,14 +17,15 @@ function ensureBandX(xScale, data, xField) {
 }
 
 /**
- * Returns the sub-band fields: distinct non-x fields among [color, pattern].
- * These are the fields that cause multiple bars within a single x-band.
+ * Returns the sub-band fields: distinct non-x fields among [group, color, pattern].
+ * These are the fields that cause multiple bars within a single x-band (dodge/grouping).
+ * `group` (the explicit grouping channel) takes precedence as the first sub-band.
  */
 function subBandFields(channels) {
-	const { x: xf, color: cf, pattern: pf } = channels
+	const { x: xf, group: gf, color: cf, pattern: pf } = channels
 	const seen = new Set()
 	const out = []
-	for (const f of [cf, pf]) {
+	for (const f of [gf, cf, pf]) {
 		if (f && f !== xf && !seen.has(f) && !isLiteralColor(f)) {
 			seen.add(f)
 			out.push(f)
@@ -52,11 +53,16 @@ export function buildBars(
 	innerHeight,
 	patterns,
 	place = (x, y) => ({ x, y }),
-	continuousCategory = false
+	continuousCategory = false,
+	dodge = true
 ) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	// A literal color is the exact fill for every bar; a field indexes the shared color scale.
+	const lit = literalColor(cf)
+	const field = lit ? undefined : cf
 
-	const subFields = continuousCategory ? [] : subBandFields(channels)
+	// No sub-banding for a continuous (race) axis or position='identity' (dodge=false → overlap).
+	const subFields = continuousCategory || !dodge ? [] : subBandFields(channels)
 	const getSubKey = (d) => subFields.map((f) => String(d[f])).join('::')
 
 	let positionOf
@@ -93,12 +99,16 @@ export function buildBars(
 
 	return data.map((d, i) => {
 		const xVal = d[xf]
-		const colorKey = cf ? d[cf] : null
+		const colorKey = field ? d[field] : null
 		const patternKey = pf ? d[pf] : null
 		const subKey = getSubKey(d)
 
-		const colorEntry = colors?.get(colorKey) ??
+		const colorEntry = markEntry(
+			lit,
+			colorKey,
+			colors,
 			colors?.values().next().value ?? { fill: '#888', stroke: '#888' }
+		)
 		const patternId =
 			patternKey !== null && patternKey !== undefined && patterns?.has(patternKey)
 				? toPatternId(String(patternKey))
@@ -131,8 +141,10 @@ export function buildBars(
 	})
 }
 
-export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place = (x, y) => ({ x, y })) {
+export function buildStackedBars(data, channels, xScale, yScale, colors, innerHeight, patterns, place = (x, y) => ({ x, y }), normalize = false) {
 	const { x: xf, y: yf, color: cf, pattern: pf } = channels
+	const lit = literalColor(cf)
+	const field = lit ? undefined : cf
 
 	const bandScale = ensureBandX(xScale, data, xf)
 
@@ -159,6 +171,8 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 	})
 
 	const stackGen = stack().keys(stackCategories)
+	// position='fill' → normalize each x column to [0,1] (100% stacked).
+	if (normalize) stackGen.offset(stackOffsetExpand)
 	const layers = stackGen(wide)
 
 	const bars = []
@@ -170,8 +184,8 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 			const xVal = point.data[xf]
 
 			// Color lookup: cf may equal xf (= xVal) or stackField (= stackKey)
-			const colorKey = cf ? (cf === xf ? xVal : cf === stackField ? stackKey : null) : null
-			const colorEntry = colors?.get(colorKey) ?? { fill: '#888', stroke: '#888' }
+			const colorKey = field ? (field === xf ? xVal : field === stackField ? stackKey : null) : null
+			const colorEntry = markEntry(lit, colorKey, colors, { fill: '#888', stroke: '#888' })
 
 			// Pattern lookup: pf may equal xf (= xVal) or stackField (= stackKey)
 			const patternKey = pf ? (pf === xf ? xVal : pf === stackField ? stackKey : null) : null
@@ -180,13 +194,19 @@ export function buildStackedBars(data, channels, xScale, yScale, colors, innerHe
 					? toPatternId(String(patternKey))
 					: null
 
+			// Two opposite corners in (band, value) space, mapped through place() so the
+			// stack transposes under orientation='horizontal' (identity default → unchanged).
+			// Without this a grouped stack/fill ignored place() and always drew vertically.
+			const band = bandScale(xVal) ?? 0
+			const c1 = place(band, yScale(y0))
+			const c2 = place(band + bandScale.bandwidth(), yScale(y1))
 			bars.push({
 				data: point.data,
 				key: `${String(xVal)}::${String(stackKey)}`,
-				x: bandScale(xVal) ?? 0,
-				y: yScale(y1),
-				width: bandScale.bandwidth(),
-				height: yScale(y0) - yScale(y1),
+				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

package/dist/geoms/lib/marks/arc.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Build renderable pie/donut arcs. Slice interior + border come from `fill ?? color`
+ * through the shared palette (buildArcs already yields fill + a darker stroke). Adds the
+ * geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildArcMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    alpha: number;
+    d: string | null;
+    fill: string;
+    stroke: string;
+    key: unknown;
+    patternId: string | null;
+    pct: number;
+    centroid: [number, number];
+    data: Record<string, unknown>;
+}[];

package/dist/geoms/lib/marks/arc.js

@@ -0,0 +1,28 @@
+import { buildArcs } from '../../../lib/brewing/marks/arcs.js'
+import { resolveAlpha } from '../aesthetics.js'
+
+/**
+ * Build renderable pie/donut arcs. Slice interior + border come from `fill ?? color`
+ * through the shared palette (buildArcs already yields fill + a darker stroke). Adds the
+ * geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildArcMarks({ data, plot, channels, options = {}, alpha, type = 'arc' }) {
+	if (!data?.length) return []
+	const interiorField = channels.fill ?? channels.color
+	// Guard: skip until data catches up after a fill-field change — otherwise a stale row set
+	// (missing the new field) produces all-undefined keys and duplicate-key errors.
+	if (interiorField && data[0] && !(interiorField in data[0])) return []
+
+	const arcs = buildArcs(
+		data,
+		{ color: interiorField, y: channels.y, pattern: channels.pattern },
+		plot.colors,
+		plot.innerWidth,
+		plot.innerHeight,
+		{ innerRadius: options.innerRadius ?? 0 },
+		plot.patterns
+	)
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+	return arcs.map((arc) => ({ ...arc, alpha: a }))
+}

package/dist/geoms/lib/marks/area.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Build renderable area segments. Interior is grouped/filled by `fill ?? color`
+ * (ggplot geom_area's fill). A border stroke is drawn only when BOTH `fill` and `color`
+ * are set — so an old `color`-only area stays border-less (backward compatible); the
+ * border uses the interior group's darker stroke shade. Per-field border coloring
+ * (fill ≠ color, two legends) is the deferred dual-scale follow-up.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildAreaMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    stroke: any;
+    alpha: number;
+    d: string;
+    fill: string;
+    key: unknown;
+    patternId: string | null;
+}[];

package/dist/geoms/lib/marks/area.js

@@ -0,0 +1,38 @@
+import { buildAreas, buildStackedAreas } from '../areas.js'
+import { resolveAlpha } from '../aesthetics.js'
+
+/**
+ * Build renderable area segments. Interior is grouped/filled by `fill ?? color`
+ * (ggplot geom_area's fill). A border stroke is drawn only when BOTH `fill` and `color`
+ * are set — so an old `color`-only area stays border-less (backward compatible); the
+ * border uses the interior group's darker stroke shade. Per-field border coloring
+ * (fill ≠ color, two legends) is the deferred dual-scale follow-up.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildAreaMarks({ data, plot, channels, options = {}, alpha, type = 'area' }) {
+	const { xScale, yScale, colors, patterns } = plot
+	if (!data?.length || !xScale || !yScale || !channels.x || !channels.y) return []
+
+	const interiorField = channels.fill ?? channels.color
+	const hasBorder = Boolean(channels.fill && channels.color)
+	const place = plot.place.bind(plot)
+	const areaChannels = {
+		x: channels.x,
+		y: channels.y,
+		color: interiorField,
+		pattern: channels.pattern
+	}
+	// Areas don't dodge; position selects stack | fill (100%) | identity (overlap, default).
+	const position = options.position ?? (options.stack ? 'stack' : 'identity')
+	const stacked = position === 'stack' || position === 'fill'
+	const raw = stacked
+		? buildStackedAreas(data, areaChannels, xScale, yScale, colors, options.curve, patterns, place, position === 'fill')
+		: buildAreas(data, areaChannels, xScale, yScale, colors, options.curve, patterns, place)
+
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+	return raw.map((seg) => ({
+		...seg,
+		stroke: hasBorder ? (colors.get(seg.key)?.stroke ?? 'none') : 'none',
+		alpha: a
+	}))
+}

package/dist/geoms/lib/marks/bar.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Build renderable bar marks. Interior is grouped/filled by `fill ?? color`; the `group`
+ * channel (default `fill ?? color`) drives the sub-series partitioned by `position`:
+ *  - stack: cumulative segments      - dodge: side-by-side sub-bands (default)
+ *  - fill:  100% (normalized) stack  - identity: overlapping full-width bars
+ * `options.stack: true` maps to position 'stack' (back-compat). Adds the geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildBarMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): any;

package/dist/geoms/lib/marks/bar.js

@@ -0,0 +1,43 @@
+import { buildBars, buildStackedBars } from '../bars.js'
+import { resolveAlpha } from '../aesthetics.js'
+
+/**
+ * Build renderable bar marks. Interior is grouped/filled by `fill ?? color`; the `group`
+ * channel (default `fill ?? color`) drives the sub-series partitioned by `position`:
+ *  - stack: cumulative segments      - dodge: side-by-side sub-bands (default)
+ *  - fill:  100% (normalized) stack  - identity: overlapping full-width bars
+ * `options.stack: true` maps to position 'stack' (back-compat). Adds the geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildBarMarks({ data, plot, channels, options = {}, alpha, type = 'bar' }) {
+	const { xScale, yScale, colors, patterns } = plot
+	if (!data?.length || !xScale || !yScale) return []
+
+	const interiorField = channels.fill ?? channels.color
+	const groupField = channels.group ?? channels.fill ?? channels.color
+	const barChannels = {
+		x: channels.x,
+		y: channels.y,
+		color: interiorField,
+		pattern: channels.pattern,
+		group: groupField
+	}
+	const place = plot.place.bind(plot)
+	const ih = plot.innerHeight
+	const position = options.position ?? (options.stack ? 'stack' : 'dodge')
+
+	let raw
+	if (position === 'stack') {
+		raw = buildStackedBars(data, barChannels, xScale, yScale, colors, ih, patterns, place, false)
+	} else if (position === 'fill') {
+		raw = buildStackedBars(data, barChannels, xScale, yScale, colors, ih, patterns, place, true)
+	} else if (position === 'identity') {
+		raw = buildBars(data, barChannels, xScale, yScale, colors, ih, patterns, place, plot.continuousCategory, false)
+	} else {
+		// dodge (default): side-by-side sub-bands
+		raw = buildBars(data, barChannels, xScale, yScale, colors, ih, patterns, place, plot.continuousCategory, true)
+	}
+
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+	return raw.map((bar) => ({ ...bar, alpha: a }))
+}

package/dist/geoms/lib/marks/box.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Build renderable box marks. Body fill + outline (whiskers/median/caps) come from the
+ * `fill` channel (defaulting to `x`); an explicit `color` channel overrides the outline
+ * stroke (interior stays from `fill`). Adds the geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildBoxMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): any[];

package/dist/geoms/lib/marks/box.js

@@ -0,0 +1,30 @@
+import { buildBoxes } from '../../../lib/brewing/marks/boxes.js'
+import { resolveAlpha } from '../aesthetics.js'
+
+/**
+ * Build renderable box marks. Body fill + outline (whiskers/median/caps) come from the
+ * `fill` channel (defaulting to `x`); an explicit `color` channel overrides the outline
+ * stroke (interior stays from `fill`). Adds the geom's fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildBoxMarks({ data, plot, channels, options = {}, alpha, type = 'box' }) {
+	const { xScale, yScale, colors } = plot
+	if (!data?.length || !xScale || !yScale) return []
+
+	const fillField = channels.fill ?? channels.x
+	const boxes = buildBoxes(
+		data,
+		{ x: channels.x, fill: fillField, pattern: channels.pattern },
+		xScale,
+		yScale,
+		colors,
+		{ side: options.side, width: options.width, patterns: plot.patterns }
+	)
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+	const colorField = channels.color
+	return boxes.map((box) => ({
+		...box,
+		stroke: colorField ? (colors.get(box.data[colorField])?.stroke ?? box.stroke) : box.stroke,
+		alpha: a
+	}))
+}

package/dist/geoms/lib/marks/candlestick.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Build renderable candlesticks. Body + wick color is semantic (up/down from options), not
+ * the shared palette. Adds fixed `alpha`. Places (band, value) corners through place() so the
+ * candle transposes under orientation flip.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildCandleMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    key: string;
+    bodyX: number;
+    bodyY: number;
+    bodyWidth: number;
+    bodyHeight: number;
+    fill: any;
+    alpha: number;
+    wickX1: any;
+    wickY1: any;
+    wickX2: any;
+    wickY2: any;
+    data: any;
+}[];

package/dist/geoms/lib/marks/candlestick.js

@@ -0,0 +1,52 @@
+import { resolveAlpha } from '../aesthetics.js'
+
+/**
+ * Build renderable candlesticks. Body + wick color is semantic (up/down from options), not
+ * the shared palette. Adds fixed `alpha`. Places (band, value) corners through place() so the
+ * candle transposes under orientation flip.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildCandleMarks({ data, plot, channels, options = {}, alpha, type = 'candlestick' }) {
+	const { xScale, yScale } = plot
+	if (!data?.length || !xScale || !yScale) return []
+
+	const open = options.open ?? 'open'
+	const high = options.high ?? 'high'
+	const low = options.low ?? 'low'
+	const close = options.close ?? 'close'
+	const upColor = options.upColor ?? '#22c55e'
+	const downColor = options.downColor ?? '#ef4444'
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+
+	const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
+	const bodyWidth = bw * 0.6
+	const bodyOffset = (bw - bodyWidth) / 2
+
+	return data.map((d, i) => {
+		const xPos = (xScale(d[channels.x ?? '']) ?? 0) + bodyOffset
+		const openVal = Number(d[open])
+		const closeVal = Number(d[close])
+		const isUp = closeVal >= openVal
+		const bodyTop = yScale(isUp ? closeVal : openVal)
+		const bodyBottom = yScale(isUp ? openVal : closeVal)
+
+		const b1 = plot.place(xPos, bodyTop)
+		const b2 = plot.place(xPos + bodyWidth, bodyBottom)
+		const wa = plot.place(xPos + bodyWidth / 2, yScale(Number(d[high])))
+		const wb = plot.place(xPos + bodyWidth / 2, yScale(Number(d[low])))
+		return {
+			key: `${d[channels.x ?? '']}-${i}`,
+			bodyX: Math.min(b1.x, b2.x),
+			bodyY: Math.min(b1.y, b2.y),
+			bodyWidth: Math.abs(b2.x - b1.x),
+			bodyHeight: Math.max(1, Math.abs(b2.y - b1.y)),
+			fill: isUp ? upColor : downColor,
+			alpha: a,
+			wickX1: wa.x,
+			wickY1: wa.y,
+			wickX2: wb.x,
+			wickY2: wb.y,
+			data: d
+		}
+	})
+}

package/dist/geoms/lib/marks/heatmap.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Build renderable heatmap cells. Cell fill is the continuous color scale (numeric color
+ * field) or the categorical palette entry, from `fill ?? color`. Adds fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildHeatmapMarks({ data, plot, channels, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    key: string;
+    x: any;
+    y: any;
+    width: any;
+    height: any;
+    fill: string;
+    alpha: number;
+    value: any;
+    display: string;
+    data: any;
+}[];

package/dist/geoms/lib/marks/heatmap.js

@@ -0,0 +1,47 @@
+import { resolveAlpha } from '../aesthetics.js'
+import { literalColor } from '../../../lib/brewing/colors.js'
+
+/**
+ * Build renderable heatmap cells. Cell fill is the continuous color scale (numeric color
+ * field) or the categorical palette entry, from `fill ?? color`. Adds fixed `alpha`.
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildHeatmapMarks({ data, plot, channels, alpha, type = 'heatmap' }) {
+	const { xScale, yScale, colors } = plot
+	if (!data?.length || !xScale || !yScale) return []
+
+	const colorField = channels.fill ?? channels.color
+	// A literal fill/color paints every cell directly, skipping the value/palette scale.
+	const lit = literalColor(colorField)
+	const field = lit ? undefined : colorField
+	const continuous = plot.continuousColorScale
+	const bwX = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 0
+	const bwY = typeof yScale.bandwidth === 'function' ? yScale.bandwidth() : 0
+	const a = resolveAlpha(alpha, type, plot.chartPreset)
+
+	return data.map((d, i) => {
+		const xVal = d[channels.x ?? '']
+		const yVal = d[channels.y ?? '']
+		const colorVal = field ? d[field] : null
+		let fill = lit ?? '#ccc'
+		if (!lit) {
+			if (continuous) fill = continuous.scale(Number(colorVal))
+			else {
+				const entry = colors?.get(colorVal)
+				if (entry) fill = entry.fill
+			}
+		}
+		return {
+			key: `${xVal}-${yVal}-${i}`,
+			x: xScale(xVal) ?? 0,
+			y: yScale(yVal) ?? 0,
+			width: bwX,
+			height: bwY,
+			fill,
+			alpha: a,
+			value: colorVal,
+			display: String(colorVal ?? ''),
+			data: d
+		}
+	})
+}

package/dist/geoms/lib/marks/hexbin.d.ts

@@ -0,0 +1,29 @@
+/** SVG path for a pointy-top hexagon of radius r, centered at the origin. */
+export function hexPath(r: any): string;
+/**
+ * Build renderable hex bins. Fill is the continuous color scale (by count) or a density-ramp
+ * rgba fallback. `alpha` is a flat multiplier on top (default 1 → unchanged).
+ * @param {{ data: any[], plot: any, channels: any, options?: any, alpha?: number, type?: string }} ctx
+ */
+export function buildHexbinMarks({ data, plot, channels, options, alpha, type }: {
+    data: any[];
+    plot: any;
+    channels: any;
+    options?: any;
+    alpha?: number;
+    type?: string;
+}): {
+    key: string;
+    cx: any;
+    cy: any;
+    count: any;
+    fill: any;
+    alpha: number;
+    value: any;
+    display: string;
+    data: {
+        count: any;
+        x: any;
+        y: any;
+    };
+}[];