@rokkit/chart 1.3.8 → 1.3.9

package/dist/geoms/Ribbon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-
-	type Node = { name: string; y: number; height: number }
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildRibbonMarks } from './lib/marks/ribbon.js'
 
 	type Options = {
 		source?: string
@@ -15,141 +15,47 @@
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed ribbon opacity 0–1; defaults to the per-geom preset (ribbon = 0.5). */
+		alpha?: number
 		stat?: string
 		options?: Options
 	}
 
-	let {
-		x = undefined,
-		y = undefined,
-		color = undefined,
-		fill: fillProp = undefined,
-		stat = 'identity',
-		options = {}
-	}: Props = $props()
+	let { x, y, color, fill, alpha, stat = 'identity', options = {} }: Props = $props()
 
+	const colorField = $derived(fill ?? color)
 	const sourceField = $derived(options.source ?? 'source')
 	const targetField = $derived(options.target ?? 'target')
 	const valueField = $derived(options.value ?? 'value')
-	const colorChannel = $derived(fillProp ?? color)
-
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'ribbon',
-			channels: { x, y, color: colorChannel },
-			stat
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
-
-	$effect(() => {
-		if (id)
-			plotState.updateGeom(id, {
-				channels: { x, y, color: colorChannel },
-				stat
-			})
-	})
-
-	const data = $derived(id ? plotState.geomData(id) : [])
-	const colors = $derived(plotState.colors)
-	const innerHeight = $derived(plotState.innerHeight)
-	const innerWidth = $derived(plotState.innerWidth)
-
-	// Compute Sankey-style layout
-	// eslint-disable-next-line max-lines-per-function, complexity
-	const ribbons = $derived.by(() => {
-		if (!data?.length) return { links: [], sourceNodes: [], targetNodes: [] }
-
-		// Aggregate flows
-		const flows = data.map((d) => ({
-			source: String(d[sourceField]),
-			target: String(d[targetField]),
-			value: Number(d[valueField]) || 0,
-			data: d
-		}))
-
-		// Compute node positions
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const sourceMap = new Map<string, number>()
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const targetMap = new Map<string, number>()
-		for (const f of flows) {
-			sourceMap.set(f.source, (sourceMap.get(f.source) ?? 0) + f.value)
-			targetMap.set(f.target, (targetMap.get(f.target) ?? 0) + f.value)
-		}
-
-		const totalSource = Math.max(1, [...sourceMap.values()].reduce((s, v) => s + v, 0))
-		const totalTarget = Math.max(1, [...targetMap.values()].reduce((s, v) => s + v, 0))
-		const padding = 4
-		const availHeight = innerHeight - padding * (Math.max(sourceMap.size, targetMap.size) - 1)
-
-		// Position source nodes on left
-		let sourceY = 0
-		const sourceNodes: Node[] = []
-		for (const [name, value] of sourceMap) {
-			const h = (value / totalSource) * availHeight
-			sourceNodes.push({ name, y: sourceY, height: h })
-			sourceY += h + padding
-		}
-
-		// Position target nodes on right
-		let targetY = 0
-		const targetNodes: Node[] = []
-		for (const [name, value] of targetMap) {
-			const h = (value / totalTarget) * availHeight
-			targetNodes.push({ name, y: targetY, height: h })
-			targetY += h + padding
-		}
-
-		// Build ribbon paths
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const sourceOffsets = new Map(sourceNodes.map((n) => [n.name, n.y]))
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const targetOffsets = new Map(targetNodes.map((n) => [n.name, n.y]))
-		const x0 = 0
-		const x1 = innerWidth
-
-		// eslint-disable-next-line complexity
-		const links = flows.map((f, i) => {
-			const sy0 = sourceOffsets.get(f.source) ?? 0
-			const ty0 = targetOffsets.get(f.target) ?? 0
-			const sourceTotal = sourceMap.get(f.source) ?? 1
-			const targetTotal = targetMap.get(f.target) ?? 1
-			const sh = (f.value / sourceTotal) * (sourceNodes.find((n) => n.name === f.source)?.height ?? 0)
-			const th = (f.value / targetTotal) * (targetNodes.find((n) => n.name === f.target)?.height ?? 0)
-
-			const path = `M${x0},${sy0} C${innerWidth * 0.4},${sy0} ${innerWidth * 0.6},${ty0} ${x1},${ty0} L${x1},${ty0 + th} C${innerWidth * 0.6},${ty0 + th} ${innerWidth * 0.4},${sy0 + sh} ${x0},${sy0 + sh} Z`
-
-			// Update offsets for stacking
-			sourceOffsets.set(f.source, sy0 + sh)
-			targetOffsets.set(f.target, ty0 + th)
-
-			const fillColor = colors?.get(f.source)?.fill ?? colors?.get(f.target)?.fill ?? '#888'
-
-			return {
-				key: `ribbon-${i}`,
-				d: path,
-				fill: fillColor,
-				data: f.data
-			}
-		})
 
-		return { links, sourceNodes, targetNodes }
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'ribbon',
+		channels: { x, y, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildRibbonMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
+
+	// GeomState returns [] for empty data; buildRibbonMarks otherwise returns
+	// { links, sourceNodes, targetNodes } — normalize each to an array.
+	const marks = $derived(geom.marks)
+	const links = $derived(marks?.links ?? [])
+	const sourceNodes = $derived(marks?.sourceNodes ?? [])
+	const targetNodes = $derived(marks?.targetNodes ?? [])
 </script>
 
-{#if ribbons.links.length > 0}
+{#if links.length > 0}
 	<g data-plot-geom="ribbon">
-		{#each ribbons.links as link (link.key)}
+		{#each links as link (link.key)}
 			<path
 				d={link.d}
 				fill={link.fill}
-				opacity="0.5"
+				opacity={link.alpha}
 				data-plot-element="ribbon"
 				role="img"
 				onmouseenter={() => plotState.setHovered(link.data)}
@@ -159,7 +65,7 @@
 			</path>
 		{/each}
 		<!-- Source node labels -->
-		{#each ribbons.sourceNodes as node (node.name)}
+		{#each sourceNodes as node (node.name)}
 			<text
 				x="-4"
 				y={node.y + node.height / 2}
@@ -171,9 +77,9 @@
 			>{node.name}</text>
 		{/each}
 		<!-- Target node labels -->
-		{#each ribbons.targetNodes as node (node.name)}
+		{#each targetNodes as node (node.name)}
 			<text
-				x={innerWidth + 4}
+				x={plotState.innerWidth + 4}
 				y={node.y + node.height / 2}
 				text-anchor="start"
 				dominant-baseline="middle"

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

@@ -8,6 +8,8 @@ type Props = {
     y?: string;
     color?: string;
     fill?: string;
+    /** Fixed ribbon opacity 0–1; defaults to the per-geom preset (ribbon = 0.5). */
+    alpha?: number;
     stat?: string;
     options?: Options;
 };

package/dist/geoms/Rule.svelte

@@ -8,6 +8,9 @@
 		x?: RuleValue | RuleValue[]
 		/** Horizontal reference line(s) at these y-axis value(s). */
 		y?: RuleValue | RuleValue[]
+		/** Line color (aligns with the other geoms' `color` aesthetic). */
+		color?: string
+		/** @deprecated use `color` — kept as an alias. */
 		stroke?: string
 		/** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
 		dash?: string
@@ -19,6 +22,7 @@
 	let {
 		x,
 		y,
+		color = undefined,
 		stroke = undefined,
 		dash = '4 4',
 		strokeWidth = 1,
@@ -79,7 +83,7 @@
 		return out
 	})
 
-	const strokeColor = $derived(stroke ?? 'currentColor')
+	const strokeColor = $derived(color ?? stroke ?? 'currentColor')
 </script>
 
 {#if rules.length > 0}

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

@@ -4,6 +4,9 @@ type Props = {
     x?: RuleValue | RuleValue[];
     /** Horizontal reference line(s) at these y-axis value(s). */
     y?: RuleValue | RuleValue[];
+    /** Line color (aligns with the other geoms' `color` aesthetic). */
+    color?: string;
+    /** @deprecated use `color` — kept as an alias. */
     stroke?: string;
     /** SVG stroke-dasharray (default dashed). Pass '' for a solid line. */
     dash?: string;

package/dist/geoms/Violin.svelte

@@ -1,25 +1,29 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
-	import { buildViolins } from '../lib/brewing/marks/violins.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildViolinMarks } from './lib/marks/violin.js'
 
 	type Props = {
 		x?: string
 		y?: string
+		/** Violin interior aesthetic (field); defaults to `x`. */
 		fill?: string
+		/** Outline aesthetic (field); overrides the silhouette stroke when set. */
+		color?: 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 }
+		/** Fixed violin opacity 0–1; defaults to the per-geom preset (violin = 0.5). */
+		alpha?: number
 	}
 
-	let { x, y, fill, stat = 'boxplot', side = 'center', pattern, options = {} }: Props = $props()
+	let { x, y, fill, color, stat = 'boxplot', side = 'center', pattern, alpha }: Props = $props()
 
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
 
 	// Fall back to the root Plot channels when the geom omits x/y (composes under
 	// <Plot.Root x y> without silently NaN-ing).
@@ -28,42 +32,19 @@
 	// 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: xf, y: yf, color: fillChannel, pattern },
-			stat,
-			options
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
+	const geom = new GeomState(plotState, () => ({
+		type: 'violin',
+		channels: { x: xf, y: yf, fill: fillChannel, color, pattern },
+		stat,
+		options: { side },
+		alpha,
+		build: buildViolinMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
 
-	$effect(() => {
-		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: xf, fill: fillChannel, pattern },
-			xScale,
-			yScale,
-			colors,
-			plotState.place.bind(plotState),
-			side,
-			patterns
-		)
-	})
+	const violins = $derived(geom.marks)
 </script>
 
 {#if violins.length > 0}
@@ -72,7 +53,7 @@
 			<path
 				d={v.d}
 				fill={v.fill}
-				fill-opacity={options?.opacity ?? plotState.chartPreset.opacity.violin}
+				fill-opacity={v.alpha}
 				stroke={v.stroke}
 				stroke-width="1.5"
 				data-plot-element="violin"

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

@@ -1,16 +1,18 @@
 type Props = {
     x?: string;
     y?: string;
+    /** Violin interior aesthetic (field); defaults to `x`. */
     fill?: string;
+    /** Outline aesthetic (field); overrides the silhouette stroke when set. */
+    color?: 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;
-    };
+    /** Fixed violin opacity 0–1; defaults to the per-geom preset (violin = 0.5). */
+    alpha?: number;
 };
 declare const Violin: import("svelte").Component<Props, {}, "">;
 type Violin = ReturnType<typeof Violin>;

package/dist/geoms/Waterfall.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { getContext, onMount, onDestroy } from 'svelte'
 	import type { PlotState } from '../PlotState.svelte.js'
+	import { GeomState } from './lib/GeomState.svelte.js'
+	import { buildWaterfallMarks } from './lib/marks/waterfall.js'
 
 	type Options = {
 		positiveColor?: string
@@ -15,95 +17,31 @@
 		y?: string
 		color?: string
 		fill?: string
+		/** Fixed bar opacity 0–1; defaults to the per-geom preset (waterfall = 1). */
+		alpha?: number
 		stat?: string
 		options?: Options
 	}
 
-	let {
-		x,
-		y,
-		color = undefined,
-		fill: fillProp = undefined,
-		stat = 'identity',
-		options = {}
-	}: Props = $props()
+	let { x, y, color, fill, alpha, stat = 'identity', options = {} }: Props = $props()
 
-	const positiveColor = $derived(options.positiveColor ?? '#22c55e')
-	const negativeColor = $derived(options.negativeColor ?? '#ef4444')
-	const totalColor = $derived(options.totalColor ?? '#3b82f6')
-	const totalField = $derived(options.totalField ?? undefined)
+	const colorField = $derived(fill ?? color)
 	const connectorWidth = $derived(options.connectorWidth ?? 0.5)
-
 	const plotState = getContext<PlotState>('plot-state')
-	let id = $state<string | null>(null)
-
-	onMount(() => {
-		id = plotState.registerGeom({
-			type: 'waterfall',
-			channels: { x, y, color: fillProp ?? color },
-			stat
-		})
-	})
-	onDestroy(() => {
-		if (id) plotState.unregisterGeom(id)
-	})
-
-	$effect(() => {
-		if (id)
-			plotState.updateGeom(id, {
-				channels: { x, y, color: fillProp ?? color },
-				stat
-			})
-	})
-
-	const data = $derived(id ? plotState.geomData(id) : [])
-	const xScale = $derived(plotState.xScale)
-	const yScale = $derived(plotState.yScale)
-
-	// eslint-disable-next-line max-lines-per-function
-	const bars = $derived.by(() => {
-		if (!data?.length || !xScale || !yScale) return []
-		const bw = typeof xScale.bandwidth === 'function' ? xScale.bandwidth() : 10
-
-		let cumulative = 0
-		return data.map((d, i) => {
-			const xVal = d[x ?? '']
-			const yVal = Number(d[y ?? ''])
-			const isTotal = totalField ? Boolean(d[totalField]) : false
-			const xPos = xScale(xVal) ?? 0
-			let barTop: number
-			let barBottom: number
-			let fill: string
 
-			if (isTotal) {
-				barTop = yScale(Math.max(0, cumulative)) ?? 0
-				barBottom = yScale(0) ?? 0
-				fill = totalColor
-			} else {
-				const start = cumulative
-				cumulative += yVal
-				barTop = yScale(Math.max(start, cumulative)) ?? 0
-				barBottom = yScale(Math.min(start, cumulative)) ?? 0
-				fill = yVal >= 0 ? positiveColor : negativeColor
-			}
+	const geom = new GeomState(plotState, () => ({
+		type: 'waterfall',
+		channels: { x, y, color: colorField },
+		stat,
+		options,
+		alpha,
+		build: buildWaterfallMarks
+	}))
+	onMount(geom.register)
+	onDestroy(geom.destroy)
+	$effect(geom.sync)
 
-			// 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: 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,
-				bandStart: xPos,
-				bandEnd: xPos + bw,
-				cumY: yScale(cumulative) ?? 0,
-				data: d
-			}
-		})
-	})
+	const bars = $derived(geom.marks)
 </script>
 
 {#if bars.length > 0}
@@ -115,6 +53,7 @@
 				width={Math.max(0, bar.width)}
 				height={bar.height}
 				fill={bar.fill}
+				fill-opacity={bar.alpha}
 				data-plot-element="waterfall-bar"
 				role="img"
 				onmouseenter={() => plotState.setHovered(bar.data)}

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

@@ -10,6 +10,8 @@ type Props = {
     y?: string;
     color?: string;
     fill?: string;
+    /** Fixed bar opacity 0–1; defaults to the per-geom preset (waterfall = 1). */
+    alpha?: number;
     stat?: string;
     options?: Options;
 };

package/dist/geoms/lib/GeomState.svelte.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Per-geom reactive state, fed by the shared `PlotState` context. Owns the geom's
+ * registration lifecycle and derives the renderable `marks` array, so a geom component
+ * only has to render marks + wire interactivity. This is the integrated version of the
+ * old brewer idea — one shared path, not a parallel one.
+ * See docs/backlog/2026-08-17-chart-aesthetics-unification.md §11.
+ *
+ * @typedef {Object} GeomConfig
+ * @property {string} type
+ * @property {Record<string, string | undefined>} channels
+ * @property {string} [stat]
+ * @property {Record<string, unknown>} [options]
+ * @property {number} [alpha]
+ * @property {(ctx: { data: any[], plot: any, channels: any, options: any, alpha: number|undefined, type: string }) => any} build
+ */
+export class GeomState {
+    /**
+     * @param {any} plot - the PlotState from context
+     * @param {() => GeomConfig} config - a getter thunk (Svelte passes reactive values to
+     *   classes via getters), read reactively on every marks recompute.
+     */
+    constructor(plot: any, config: () => GeomConfig);
+    register: () => void;
+    sync: () => void;
+    destroy: () => void;
+    get data(): any;
+    marks: any;
+    #private;
+}
+/**
+ * Per-geom reactive state, fed by the shared `PlotState` context. Owns the geom's
+ * registration lifecycle and derives the renderable `marks` array, so a geom component
+ * only has to render marks + wire interactivity. This is the integrated version of the
+ * old brewer idea — one shared path, not a parallel one.
+ * See docs/backlog/2026-08-17-chart-aesthetics-unification.md §11.
+ */
+export type GeomConfig = {
+    type: string;
+    channels: Record<string, string | undefined>;
+    stat?: string | undefined;
+    options?: Record<string, unknown> | undefined;
+    alpha?: number | undefined;
+    build: (ctx: {
+        data: any[];
+        plot: any;
+        channels: any;
+        options: any;
+        alpha: number | undefined;
+        type: string;
+    }) => any;
+};

package/dist/geoms/lib/GeomState.svelte.js

@@ -0,0 +1,79 @@
+/**
+ * Per-geom reactive state, fed by the shared `PlotState` context. Owns the geom's
+ * registration lifecycle and derives the renderable `marks` array, so a geom component
+ * only has to render marks + wire interactivity. This is the integrated version of the
+ * old brewer idea — one shared path, not a parallel one.
+ * See docs/backlog/2026-08-17-chart-aesthetics-unification.md §11.
+ *
+ * @typedef {Object} GeomConfig
+ * @property {string} type
+ * @property {Record<string, string | undefined>} channels
+ * @property {string} [stat]
+ * @property {Record<string, unknown>} [options]
+ * @property {number} [alpha]
+ * @property {(ctx: { data: any[], plot: any, channels: any, options: any, alpha: number|undefined, type: string }) => any} build
+ */
+export class GeomState {
+	#plot
+	#config
+	#id = $state(null)
+
+	/**
+	 * @param {any} plot - the PlotState from context
+	 * @param {() => GeomConfig} config - a getter thunk (Svelte passes reactive values to
+	 *   classes via getters), read reactively on every marks recompute.
+	 */
+	constructor(plot, config) {
+		this.#plot = plot
+		this.#config = config
+	}
+
+	// Arrow methods so they can be passed straight to onMount/onDestroy/$effect without
+	// losing `this` (see Svelte $state "Classes" docs).
+	register = () => {
+		const c = this.#config()
+		this.#id = this.#plot.registerGeom({
+			type: c.type,
+			channels: c.channels,
+			stat: c.stat ?? 'identity',
+			options: c.options ?? {}
+		})
+	}
+
+	sync = () => {
+		if (this.#id === null) return
+		const c = this.#config()
+		this.#plot.updateGeom(this.#id, {
+			channels: c.channels,
+			stat: c.stat ?? 'identity',
+			options: c.options ?? {}
+		})
+	}
+
+	destroy = () => {
+		if (this.#id !== null) this.#plot.unregisterGeom(this.#id)
+	}
+
+	#data = $derived(this.#id !== null ? this.#plot.geomData(this.#id) : [])
+
+	// The geom's rows (post-stat). Exposed for templates that render per-row overlays
+	// (e.g. an area's invisible tooltip hit-circles) alongside the computed `marks`.
+	get data() {
+		return this.#data
+	}
+
+	// The renderable array. `build` reads scales/colors/preset from `plot` synchronously,
+	// so those reads register as dependencies and `marks` recomputes on any change.
+	marks = $derived.by(() => {
+		const c = this.#config()
+		if (!this.#data.length) return []
+		return c.build({
+			data: this.#data,
+			plot: this.#plot,
+			channels: c.channels,
+			options: c.options ?? {},
+			alpha: c.alpha,
+			type: c.type
+		})
+	})
+}

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

@@ -0,0 +1,36 @@
+/**
+ * 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: Record<string, unknown>, channels: {
+    fill?: string;
+    color?: string;
+}, colors: Map<unknown, {
+    fill: string;
+    stroke: string;
+}>): {
+    fill: string;
+    stroke: string;
+};
+/**
+ * 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: number | undefined, type: string, preset?: {
+    opacity?: Record<string, number>;
+}): number;