diff --git a/src/_components/AnnotationsData.html.svelte b/src/_components/AnnotationsData.html.svelte
index 6aa1c97b..4ed9cee3 100644
--- a/src/_components/AnnotationsData.html.svelte
+++ b/src/_components/AnnotationsData.html.svelte
@@ -3,9 +3,9 @@
 	Adds text annotations that get their x and y placement using the `xScale` and `yScale`.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xGet, yGet, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} ArrowSource
@@ -50,7 +50,7 @@
 	 */
 
 	/** @type {Props} */
-	let { annotations, getText = d => d.text, pr = $percentRange } = $props();
+	let { annotations, getText = d => d.text, pr = c.percentRange } = $props();
 
 	let units = $derived(pr === true ? '%' : 'px');
 </script>
@@ -60,8 +60,8 @@
 		<div
 			class="layercake-annotation"
 			data-id={i}
-			style:left={`calc(${$xGet(d)}${units} + ${d.dx || 0}px)`}
-			style:top={`calc(${$yGet(d)}${units} + ${d.dy || 0}px)`}
+			style:left={`calc(${c.xGet(d)}${units} + ${d.dx || 0}px)`}
+			style:top={`calc(${c.yGet(d)}${units} + ${d.dy || 0}px)`}
 		>
 			{getText(d)}
 		</div>
diff --git a/src/_components/Area-D3.svelte b/src/_components/Area-D3.svelte
index 59323292..b2568311 100644
--- a/src/_components/Area-D3.svelte
+++ b/src/_components/Area-D3.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { area, curveLinear } from 'd3-shape';
 
-	const { data, xGet, yGet, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -19,12 +19,12 @@
 
 	let path = $derived(
 		area()
-			.x($xGet)
-			.y1($yGet)
-			.y0(d => $yScale(0))
+			.x(c.xGet)
+			.y1(c.yGet)
+			.y0(d => c.yScale(0))
 			.curve(curve)
 	);
 	// .defined($y)
 </script>
 
-<path class="path-area" d={path($data)} {fill}></path>
+<path class="path-area" d={path(c.data)} {fill}></path>
diff --git a/src/_components/Area.svelte b/src/_components/Area.svelte
index a9be3994..4b870812 100644
--- a/src/_components/Area.svelte
+++ b/src/_components/Area.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG area shape.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, xScale, yScale, extents } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -17,24 +17,24 @@
 
 	let path = $derived(
 		'M' +
-			$data
+			c.data
 				.map((/** @type {object} */ d) => {
-					return $xGet(d) + ',' + $yGet(d);
+					return c.xGet(d) + ',' + c.yGet(d);
 				})
 				.join('L')
 	);
 
 	/**	@type {string} **/
 	let area = $derived.by(() => {
-		const yRange = $yScale.range();
+		const yRange = c.yScale.range();
 		return (
 			path +
 			('L' +
-				$xScale($extents.x ? $extents.x[1] : 0) +
+				c.xScale(c.extents.x ? c.extents.x[1] : 0) +
 				',' +
 				yRange[0] +
 				'L' +
-				$xScale($extents.x ? $extents.x[0] : 0) +
+				c.xScale(c.extents.x ? c.extents.x[0] : 0) +
 				',' +
 				yRange[0] +
 				'Z')
diff --git a/src/_components/AreaStacked.svelte b/src/_components/AreaStacked.svelte
index b3f9b90f..aa5c68ec 100644
--- a/src/_components/AreaStacked.svelte
+++ b/src/_components/AreaStacked.svelte
@@ -3,21 +3,21 @@
 	Generates an SVG area shape using the `area` function from [d3-shape](https://github.com/d3/d3-shape) and sets the color via an ordinal scale in `zScale`. It assumes your data is in a [D3 stack format](https://github.com/d3/d3-shape#stack).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { area } from 'd3-shape';
 
-	const { data, xGet, yScale, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	let areaGen = $derived(
 		area()
-			.x(d => $xGet(d))
-			.y0(d => $yScale(d[0]))
-			.y1(d => $yScale(d[1]))
+			.x(d => c.xGet(d))
+			.y0(d => c.yScale(d[0]))
+			.y1(d => c.yScale(d[1]))
 	);
 </script>
 
 <g class="area-group">
-	{#each $data as d}
-		<path class="path-area" d={areaGen(d)} fill={$zGet(d)}></path>
+	{#each c.data as d}
+		<path class="path-area" d={areaGen(d)} fill={c.zGet(d)}></path>
 	{/each}
 </g>
diff --git a/src/_components/Arrows.svelte b/src/_components/Arrows.svelte
index c52e2df1..b37eb29d 100644
--- a/src/_components/Arrows.svelte
+++ b/src/_components/Arrows.svelte
@@ -4,7 +4,8 @@
  -->
 <script>
 	// @ts-nocheck
-	import { getContext, onMount, tick } from 'svelte';
+	import { onMount, tick } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { swoopyArrow, getElPosition, parseCssValue } from '../_modules/arrowUtils.js';
 
 	/**
@@ -27,7 +28,7 @@
 
 	let container = $state();
 
-	const { width, height, xScale, yScale, x, y } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/* --------------------------------------------
 	 * Some lookups to convert between x, y / width, height terminology
@@ -88,15 +89,15 @@
 		 * Otherwise pass it to our xGet and yGet functions
 		 */
 		const targetCoords = [
-			arrow.target.x || $x(arrow.target),
-			arrow.target.y || $y(arrow.target)
+			arrow.target.x || c.x(arrow.target),
+			arrow.target.y || c.y(arrow.target)
 		].map((q, j) => {
 			const val =
 				typeof q === 'string' && q.includes('%')
-					? parseCssValue(q, j, $width, $height)
+					? parseCssValue(q, j, c.width, c.height)
 					: j
-						? $yScale(q)
-						: $xScale(q);
+						? c.yScale(q)
+						: c.xScale(q);
 			return val + (arrow.target[`d${lookups[j].position}`] || 0);
 		});
 
diff --git a/src/_components/AxisRadial.svelte b/src/_components/AxisRadial.svelte
index 2bca3df1..0bbf8455 100644
--- a/src/_components/AxisRadial.svelte
+++ b/src/_components/AxisRadial.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG radial scale, useful for radar charts.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { width, height, xScale, extents, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -16,12 +16,12 @@
 	/** @type {Props} */
 	let { lineLengthFactor = 1.1, labelPlacementFactor = 1.25 } = $props();
 
-	let max = $derived($xScale(Math.max(...$extents.x)));
+	let max = $derived(c.xScale(Math.max(...c.extents.x)));
 
 	let lineLength = $derived(max * lineLengthFactor);
 	let labelPlacement = $derived(max * labelPlacementFactor);
 
-	let angleSlice = $derived((Math.PI * 2) / $config.x.length);
+	let angleSlice = $derived((Math.PI * 2) / c.config.x.length);
 
 	/** @param {number} total
 	 *  @param {number} i */
@@ -35,12 +35,12 @@
 	}
 </script>
 
-<g transform="translate({$width / 2}, {$height / 2})">
+<g transform="translate({c.width / 2}, {c.height / 2})">
 	<circle cx="0" cy="0" r={max} stroke="#ccc" stroke-width="1" fill="#CDCDCD" fill-opacity="0.1"
 	></circle>
 	<circle cx="0" cy="0" r={max / 2} stroke="#ccc" stroke-width="1" fill="none"></circle>
 
-	{#each $config.x as label, i}
+	{#each c.config.x as label, i}
 		{@const thisAngleSlice = angleSlice * i - Math.PI / 2}
 		<line
 			x1="0"
@@ -53,7 +53,7 @@
 		>
 		</line>
 		<text
-			text-anchor={anchor($config.x.length, i)}
+			text-anchor={anchor(c.config.x.length, i)}
 			dy="0.35em"
 			font-size="12px"
 			transform="translate({labelPlacement * Math.cos(thisAngleSlice)}, {labelPlacement *
diff --git a/src/_components/AxisX.percent-range.html.svelte b/src/_components/AxisX.percent-range.html.svelte
index 9985c9ea..ed16ea6e 100644
--- a/src/_components/AxisX.percent-range.html.svelte
+++ b/src/_components/AxisX.percent-range.html.svelte
@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xScale, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -36,30 +36,30 @@
 		tickGutter = 0,
 		dx = 0,
 		dy = 0,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <div class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $xScale(tick)}
+		{@const tickValUnits = c.xScale(tick)}
 
 		{#if baseline === true}
 			<div class="baseline" style="top:100%; width:100%;"></div>
diff --git a/src/_components/AxisX.svelte b/src/_components/AxisX.svelte
index e1b70920..d483e396 100644
--- a/src/_components/AxisX.svelte
+++ b/src/_components/AxisX.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { width, height, xScale, yRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -51,31 +51,31 @@
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <g class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
 		{#if baseline === true}
-			<line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
+			<line class="baseline" y1={c.height} y2={c.height} x1="0" x2={c.width} />
 		{/if}
 
-		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+		<g class="tick tick-{i}" transform="translate({c.xScale(tick)},{Math.max(...c.yRange)})">
 			{#if gridlines === true}
-				<line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
+				<line class="gridline" x1={halfBand} x2={halfBand} y1={-c.height} y2="0" />
 			{/if}
 			{#if tickMarks === true}
 				<line
diff --git a/src/_components/AxisXTop.percent-range.html.svelte b/src/_components/AxisXTop.percent-range.html.svelte
index fb197476..1cde1ca7 100644
--- a/src/_components/AxisXTop.percent-range.html.svelte
+++ b/src/_components/AxisXTop.percent-range.html.svelte
@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xScale, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -36,30 +36,30 @@
 		tickGutter = 0,
 		dx = 0,
 		dy = 0,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <div class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $xScale(tick)}
+		{@const tickValUnits = c.xScale(tick)}
 
 		{#if baseline === true}
 			<div class="baseline" style="top:0; width:100%;"></div>
diff --git a/src/_components/AxisXTop.svelte b/src/_components/AxisXTop.svelte
index 981a1a5b..06f8abb9 100644
--- a/src/_components/AxisXTop.svelte
+++ b/src/_components/AxisXTop.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG top x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { width, height, xScale, yRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -51,31 +51,31 @@
 
 	let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
 
-	let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.xScale.bandwidth === 'function');
 
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $xScale.domain()
+				? c.xScale.domain()
 				: typeof ticks === 'function'
-					? ticks($xScale.ticks())
-					: $xScale.ticks(ticks)
+					? ticks(c.xScale.ticks())
+					: c.xScale.ticks(ticks)
 	);
 
-	let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+	let halfBand = $derived(isBandwidth ? c.xScale.bandwidth() / 2 : 0);
 </script>
 
 <g class="axis x-axis" class:snapLabels>
 	{#each tickVals as tick, i (tick)}
 		{#if baseline === true}
-			<line class="baseline" y1="0" y2="0" x1="0" x2={$width} />
+			<line class="baseline" y1="0" y2="0" x1="0" x2={c.width} />
 		{/if}
 
-		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.min(...$yRange)})">
+		<g class="tick tick-{i}" transform="translate({c.xScale(tick)},{Math.min(...c.yRange)})">
 			{#if gridlines === true}
-				<line class="gridline" x1="0" x2="0" y1={$height} y2="0" />
+				<line class="gridline" x1="0" x2="0" y1={c.height} y2="0" />
 			{/if}
 			{#if tickMarks === true}
 				<line
diff --git a/src/_components/AxisY.percent-range.html.svelte b/src/_components/AxisY.percent-range.html.svelte
index 8027d53c..c4b1d9dc 100644
--- a/src/_components/AxisY.percent-range.html.svelte
+++ b/src/_components/AxisY.percent-range.html.svelte
@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xRange, yScale, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -38,7 +38,7 @@
 		dx = 0,
 		dy = -3,
 		charPixelWidth = 7.25,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	/** @param {number} sum
@@ -48,16 +48,16 @@
 		return sum + charPixelWidth;
 	}
 
-	let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.yScale.bandwidth === 'function');
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $yScale.domain()
+				? c.yScale.domain()
 				: typeof ticks === 'function'
-					? ticks($yScale.ticks())
-					: $yScale.ticks(ticks)
+					? ticks(c.yScale.ticks())
+					: c.yScale.ticks(ticks)
 	);
 	let widestTickLen = $derived(
 		Math.max(
@@ -73,17 +73,17 @@
 			: 0
 	);
 	let x1 = $derived(-tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen));
-	let halfBand = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
-	let maxTickValUnits = $derived(Math.max(...tickVals.map($yScale)));
+	let halfBand = $derived(isBandwidth ? c.yScale.bandwidth() / 2 : 0);
+	let maxTickValUnits = $derived(Math.max(...tickVals.map(c.yScale)));
 </script>
 
 <div class="axis y-axis">
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $yScale(tick)}
+		{@const tickValUnits = c.yScale(tick)}
 
 		<div
 			class="tick tick-{i}"
-			style="left:{$xRange[0]}{units};top:{tickValUnits + halfBand}{units};"
+			style="left:{c.xRange[0]}{units};top:{tickValUnits + halfBand}{units};"
 		>
 			{#if gridlines === true}
 				<div class="gridline" style="top:0;" style:left="{x1}px" style:right="0px"></div>
diff --git a/src/_components/AxisY.svelte b/src/_components/AxisY.svelte
index 3dd2c6d6..ac88e385 100644
--- a/src/_components/AxisY.svelte
+++ b/src/_components/AxisY.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xRange, yScale, width } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -44,16 +44,16 @@
 		return sum + charPixelWidth;
 	}
 
-	let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.yScale.bandwidth === 'function');
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $yScale.domain()
+				? c.yScale.domain()
 				: typeof ticks === 'function'
-					? ticks($yScale.ticks())
-					: $yScale.ticks(ticks)
+					? ticks(c.yScale.ticks())
+					: c.yScale.ticks(ticks)
 	);
 	let widestTickLen = $derived(
 		Math.max(
@@ -69,16 +69,16 @@
 			: 0
 	);
 	let x1 = $derived(-tickGutter - (labelPosition === 'above' ? widestTickLen : tickLen));
-	let y = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
-	let maxTickValPx = $derived(Math.max(...tickVals.map($yScale)));
+	let y = $derived(isBandwidth ? c.yScale.bandwidth() / 2 : 0);
+	let maxTickValPx = $derived(Math.max(...tickVals.map(c.yScale)));
 </script>
 
 <g class="axis y-axis">
 	{#each tickVals as tick (tick)}
-		{@const tickValPx = $yScale(tick)}
-		<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
+		{@const tickValPx = c.yScale(tick)}
+		<g class="tick tick-{tick}" transform="translate({c.xRange[0]}, {tickValPx})">
 			{#if gridlines === true}
-				<line class="gridline" {x1} x2={$width} y1={y} y2={y}></line>
+				<line class="gridline" {x1} x2={c.width} y1={y} y2={y}></line>
 			{/if}
 			{#if tickMarks === true}
 				<line class="tick-mark" {x1} x2={x1 + tickLen} y1={y} y2={y}></line>
diff --git a/src/_components/AxisYRight.percent-range.html.svelte b/src/_components/AxisYRight.percent-range.html.svelte
index 9399a4cc..6bb5b1a2 100644
--- a/src/_components/AxisYRight.percent-range.html.svelte
+++ b/src/_components/AxisYRight.percent-range.html.svelte
@@ -5,9 +5,9 @@
 	Although this is marked as a percent-range component, you can also use it with a normal scale with no configuration needed. By default, if you have `percentRange={true}` it will use percentages, otherwise it will use pixels. This makes this component compatible with server-side and client-side rendered charts. Set the `units` prop to either `'%'` or `'px'` to override the default behavior.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xRange, yScale, width, percentRange } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -38,7 +38,7 @@
 		dx = 0,
 		dy = -3,
 		charPixelWidth = 7.25,
-		units = $percentRange === true ? '%' : 'px'
+		units = c.percentRange === true ? '%' : 'px'
 	} = $props();
 
 	/** @param {number} sum
@@ -48,16 +48,16 @@
 		return sum + charPixelWidth;
 	}
 
-	let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.yScale.bandwidth === 'function');
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $yScale.domain()
+				? c.yScale.domain()
 				: typeof ticks === 'function'
-					? ticks($yScale.ticks())
-					: $yScale.ticks(ticks)
+					? ticks(c.yScale.ticks())
+					: c.yScale.ticks(ticks)
 	);
 	let widestTickLen = $derived(
 		Math.max(
@@ -72,17 +72,17 @@
 				: (tickMarkLength ?? 6)
 			: 0
 	);
-	let halfBand = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
-	let maxTickValUnits = $derived(Math.max(...tickVals.map($yScale)));
+	let halfBand = $derived(isBandwidth ? c.yScale.bandwidth() / 2 : 0);
+	let maxTickValUnits = $derived(Math.max(...tickVals.map(c.yScale)));
 </script>
 
 <div class="axis y-axis">
 	{#each tickVals as tick, i (tick)}
-		{@const tickValUnits = $yScale(tick)}
+		{@const tickValUnits = c.yScale(tick)}
 
 		<div
 			class="tick tick-{i}"
-			style="left:{$xRange[0]}{units};top:{tickValUnits + halfBand}{units};"
+			style="left:{c.xRange[0]}{units};top:{tickValUnits + halfBand}{units};"
 		>
 			{#if gridlines === true}
 				<div
@@ -96,7 +96,7 @@
 				<div
 					class="tick-mark"
 					style:top="0"
-					style:left="{$width + tickGutter}px"
+					style:left="{c.width + tickGutter}px"
 					style:width="{tickLen}px"
 				></div>
 			{/if}
diff --git a/src/_components/AxisYRight.svelte b/src/_components/AxisYRight.svelte
index 61f357df..39344991 100644
--- a/src/_components/AxisYRight.svelte
+++ b/src/_components/AxisYRight.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG y-axis on the right-hand side of the chart. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xRange, yScale, width } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -44,16 +44,16 @@
 		return sum + charPixelWidth;
 	}
 
-	let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
+	let isBandwidth = $derived(typeof c.yScale.bandwidth === 'function');
 	/** @type {Array<any>} */
 	let tickVals = $derived(
 		Array.isArray(ticks)
 			? ticks
 			: isBandwidth
-				? $yScale.domain()
+				? c.yScale.domain()
 				: typeof ticks === 'function'
-					? ticks($yScale.ticks())
-					: $yScale.ticks(ticks)
+					? ticks(c.yScale.ticks())
+					: c.yScale.ticks(ticks)
 	);
 	let widestTickLen = $derived(
 		Math.max(
@@ -68,30 +68,30 @@
 				: (tickMarkLength ?? 6)
 			: 0
 	);
-	let x2 = $derived($width + tickGutter + (labelPosition === 'above' ? widestTickLen : tickLen));
-	let y = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
-	let maxTickValPx = $derived(Math.max(...tickVals.map($yScale)));
+	let x2 = $derived(c.width + tickGutter + (labelPosition === 'above' ? widestTickLen : tickLen));
+	let y = $derived(isBandwidth ? c.yScale.bandwidth() / 2 : 0);
+	let maxTickValPx = $derived(Math.max(...tickVals.map(c.yScale)));
 </script>
 
 <g class="axis y-axis">
 	{#each tickVals as tick (tick)}
-		{@const tickValPx = $yScale(tick)}
-		<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
+		{@const tickValPx = c.yScale(tick)}
+		<g class="tick tick-{tick}" transform="translate({c.xRange[0]}, {tickValPx})">
 			{#if gridlines === true}
 				<line class="gridline" x1="0" {x2} y1={y} y2={y}></line>
 			{/if}
 			{#if tickMarks === true}
 				<line
 					class="tick-mark"
-					x1={$width + tickGutter}
-					x2={$width + tickGutter + tickLen}
+					x1={c.width + tickGutter}
+					x2={c.width + tickGutter + tickLen}
 					y1={y}
 					y2={y}
 				></line>
 			{/if}
 
 			<text
-				x={$width + tickGutter + (labelPosition === 'even' ? tickLen : 0)}
+				x={c.width + tickGutter + (labelPosition === 'even' ? tickLen : 0)}
 				{y}
 				dx={dx + (labelPosition === 'even' ? 3 : 0)}
 				dy={dy +
diff --git a/src/_components/Bar.svelte b/src/_components/Bar.svelte
index 308c24a6..59d4308b 100644
--- a/src/_components/Bar.svelte
+++ b/src/_components/Bar.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG bar chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -17,14 +17,14 @@
 </script>
 
 <g class="bar-group">
-	{#each $data as d, i}
+	{#each c.data as d, i}
 		<rect
 			class="group-rect"
 			data-id={i}
-			x={$xScale.range()[0]}
-			y={$yGet(d)}
-			height={$yScale.bandwidth()}
-			width={$xGet(d)}
+			x={c.xScale.range()[0]}
+			y={c.yGet(d)}
+			height={c.yScale.bandwidth()}
+			width={c.xGet(d)}
 			{fill}
 		></rect>
 	{/each}
diff --git a/src/_components/BarStacked.svelte b/src/_components/BarStacked.svelte
index 34889abf..fe282910 100644
--- a/src/_components/BarStacked.svelte
+++ b/src/_components/BarStacked.svelte
@@ -3,27 +3,27 @@
 	Generates an SVG stacked bar chart and sets the color via an ordinal scale in `zScale`.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, zGet, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	let columnWidth = $derived(d => {
-		const xVals = $xGet(d);
+		const xVals = c.xGet(d);
 		return xVals[1] - xVals[0];
 	});
 </script>
 
 <g class="bar-group">
-	{#each $data as series}
+	{#each c.data as series}
 		{#each series as d, i}
 			<rect
 				class="group-rect"
 				data-id={i}
-				x={$xGet(d)[0]}
-				y={$yGet(d)}
-				height={$yScale.bandwidth()}
+				x={c.xGet(d)[0]}
+				y={c.yGet(d)}
+				height={c.yScale.bandwidth()}
 				width={columnWidth(d)}
-				fill={$zGet(series)}
+				fill={c.zGet(series)}
 			></rect>
 		{/each}
 	{/each}
diff --git a/src/_components/Beeswarm.html.svelte b/src/_components/Beeswarm.html.svelte
index 7bf3df58..1146f5b0 100644
--- a/src/_components/Beeswarm.html.svelte
+++ b/src/_components/Beeswarm.html.svelte
@@ -3,9 +3,9 @@
 	Generates an HTML Beeswarm chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, zGet, height, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -22,7 +22,7 @@
 	function dodge(data, { rds = 1, x = d => d } = {}) {
 		const radius2 = rds ** 2;
 		const circles = data
-			.map(d => ({ x: x(d), [$config.z]: d[$config.z], data: d }))
+			.map(d => ({ x: x(d), [c.config.z]: d[c.config.z], data: d }))
 			.sort((a, b) => a.x - b.x);
 		const epsilon = 1e-3;
 		let head = null,
@@ -67,7 +67,7 @@
 
 		return circles;
 	}
-	let circles = $derived(dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet }));
+	let circles = $derived(dodge(c.data, { rds: r * 2 + spacing + strokeWidth, x: c.xGet }));
 </script>
 
 <div class="bee-group">
@@ -75,11 +75,11 @@
 		<div
 			class="bee"
 			style="
-				background:{$zGet(d)};
+				background:{c.zGet(d)};
 				border-color:{stroke};
 				border-width:{strokeWidth};
 				left:{d.x}px;
-				top:{$height - r - spacing - strokeWidth / 2 - d.y}px;
+				top:{c.height - r - spacing - strokeWidth / 2 - d.y}px;
 				width:{r * 2}px;
 				height:{r * 2}px;
 			"
diff --git a/src/_components/Beeswarm.svelte b/src/_components/Beeswarm.svelte
index 3ba8b768..d0b77a81 100644
--- a/src/_components/Beeswarm.svelte
+++ b/src/_components/Beeswarm.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG Beeswarm chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, zGet, height, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -22,7 +22,7 @@
 	function dodge(data, { rds = 1, x = d => d } = {}) {
 		const radius2 = rds ** 2;
 		const circles = data
-			.map(d => ({ x: x(d), [$config.z]: d[$config.z], data: d }))
+			.map(d => ({ x: x(d), [c.config.z]: d[c.config.z], data: d }))
 			.sort((a, b) => a.x - b.x);
 		const epsilon = 1e-3;
 		let head = null,
@@ -67,17 +67,17 @@
 
 		return circles;
 	}
-	let circles = $derived(dodge($data, { rds: r * 2 + spacing + strokeWidth, x: $xGet }));
+	let circles = $derived(dodge(c.data, { rds: r * 2 + spacing + strokeWidth, x: c.xGet }));
 </script>
 
 <g class="bee-group">
 	{#each circles as d}
 		<circle
-			fill={$zGet(d)}
+			fill={c.zGet(d)}
 			{stroke}
 			stroke-width={strokeWidth}
 			cx={d.x}
-			cy={$height - r - spacing - strokeWidth / 2 - d.y}
+			cy={c.height - r - spacing - strokeWidth / 2 - d.y}
 			{r}
 		>
 			{#if getTitle}
diff --git a/src/_components/BeeswarmForce.html.svelte b/src/_components/BeeswarmForce.html.svelte
index 8614ad57..2c8968c1 100644
--- a/src/_components/BeeswarmForce.html.svelte
+++ b/src/_components/BeeswarmForce.html.svelte
@@ -3,10 +3,11 @@
 	Generates an HTML Beeswarm chart using a [d3-force simulation](https://github.com/d3/d3-force).
  -->
 <script>
-	import { getContext, untrack } from 'svelte';
+	import { untrack } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { forceSimulation, forceX, forceY, forceCollide } from 'd3-force';
 
-	const { data, xGet, width, height, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -32,19 +33,19 @@
 	let nodes = $state([]);
 
 	let simulation = $derived.by(() => {
-		if (!$width || !$height || !$data.length) return null;
+		if (!c.width || !c.height || !c.data.length) return null;
 
-		const sim = forceSimulation($data.map((/** @type {any} */ d) => ({ ...d })))
+		const sim = forceSimulation(c.data.map((/** @type {any} */ d) => ({ ...d })))
 			.force(
 				'x',
 				forceX()
-					.x(d => $xGet(d))
+					.x(d => c.xGet(d))
 					.strength(xStrength)
 			)
 			.force(
 				'y',
 				forceY()
-					.y($height / 2)
+					.y(c.height / 2)
 					.strength(yStrength)
 			)
 			.force('collide', forceCollide(r))
@@ -84,7 +85,7 @@
 				top: {node.y}px;
 				width: {r * 2}px;
 				height: {r * 2}px;
-				background: {$zGet(node)};
+				background: {c.zGet(node)};
 				border-width: {strokeWidth}px;
 				border-color: {stroke};
 				"
diff --git a/src/_components/BeeswarmForce.svelte b/src/_components/BeeswarmForce.svelte
index dea7f423..3fc0de36 100644
--- a/src/_components/BeeswarmForce.svelte
+++ b/src/_components/BeeswarmForce.svelte
@@ -3,10 +3,11 @@
 	Generates an SVG Beeswarm chart using a [d3-force simulation](https://github.com/d3/d3-force).
  -->
 <script>
-	import { getContext, untrack } from 'svelte';
+	import { untrack } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { forceSimulation, forceX, forceY, forceCollide } from 'd3-force';
 
-	const { data, xGet, width, height, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -32,19 +33,19 @@
 	let nodes = $state([]);
 
 	let simulation = $derived.by(() => {
-		if (!$width || !$height || !$data.length) return null;
+		if (!c.width || !c.height || !c.data.length) return null;
 
-		const sim = forceSimulation($data.map((/** @type {any} */ d) => ({ ...d })))
+		const sim = forceSimulation(c.data.map((/** @type {any} */ d) => ({ ...d })))
 			.force(
 				'x',
 				forceX()
-					.x(d => $xGet(d))
+					.x(d => c.xGet(d))
 					.strength(xStrength)
 			)
 			.force(
 				'y',
 				forceY()
-					.y($height / 2)
+					.y(c.height / 2)
 					.strength(yStrength)
 			)
 			.force('collide', forceCollide(r))
@@ -77,7 +78,7 @@
 
 <g class="bee-group">
 	{#each nodes as node}
-		<circle fill={$zGet(node)} {stroke} stroke-width={strokeWidth} cx={node.x} cy={node.y} {r}>
+		<circle fill={c.zGet(node)} {stroke} stroke-width={strokeWidth} cx={node.x} cy={node.y} {r}>
 			{#if getTitle}
 				<title>{getTitle(node)}</title>
 			{/if}
diff --git a/src/_components/CalendarMonth.svelte b/src/_components/CalendarMonth.svelte
index 81de046a..7af4f9b9 100644
--- a/src/_components/CalendarMonth.svelte
+++ b/src/_components/CalendarMonth.svelte
@@ -3,11 +3,11 @@
 	Generates an SVG calendar chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { utcFormat } from 'd3-time-format';
 	import { utcDay } from 'd3-time';
 
-	const { width, height, data, x, z, zScale, extents } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -23,26 +23,26 @@
 
 	let count = $derived(date => {
 		const stringDate = date.toISOString().split('T')[0];
-		const days = $data.filter(d => $x(d) === stringDate)[0];
+		const days = c.data.filter(d => c.x(d) === stringDate)[0];
 		if (days) {
-			return $z(days);
+			return c.z(days);
 		}
 		return 0;
 	});
 
 	let fillColor = $derived(day => {
 		const n = count(day);
-		return n ? $zScale(n) : '#fff';
+		return n ? c.zScale(n) : '#fff';
 	});
 
-	let cellSize = $derived(calcCellSize($width, $height));
+	let cellSize = $derived(calcCellSize(c.width, c.height));
 
 	/**
 	 * Calculate what month we're in and generate the full days of that month
 	 */
 	/** @type {Date[]} */
 	let days = $derived.by(() => {
-		const minDate = $extents.x[0];
+		const minDate = c.extents.x[0];
 		const parts = minDate.split('-').map(d => +d);
 
 		return utcDay.range(
diff --git a/src/_components/CirclePack.html.svelte b/src/_components/CirclePack.html.svelte
index 9b01d7d1..6d4538d6 100644
--- a/src/_components/CirclePack.html.svelte
+++ b/src/_components/CirclePack.html.svelte
@@ -4,13 +4,13 @@
  -->
 <script>
 	import { stratify, pack, hierarchy } from 'd3-hierarchy';
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { format } from 'd3-format';
 
 	const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
 	const commas = format(',');
 
-	const { width, height, data } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/** @typedef {import('d3-hierarchy').HierarchyNode<any>} HierarchyNode */
 
@@ -49,11 +49,11 @@
 	/* --------------------------------------------
 	 * This component will automatically group your data
 	 * into one group if no `parentKey` was passed in.
-	 * Stash $data here so we can add our own parent
+	 * Stash c.data here so we can add our own parent
 	 * if there's no `parentKey`
 	 */
 	let parent = $derived(parentKey !== undefined ? {} : { [idKey]: 'all' });
-	let dataset = $derived(parentKey !== undefined ? $data : [...$data, parent]);
+	let dataset = $derived(parentKey !== undefined ? c.data : [...c.data, parent]);
 
 	let stratifier = $derived(
 		stratify()
@@ -67,7 +67,7 @@
 
 	let descendants = $derived(
 		pack()
-			.size([$width, $height])
+			.size([c.width, c.height])
 			.padding(spacing)(
 				hierarchy(stratifier(dataset))
 					.sum(d => {
diff --git a/src/_components/CirclePackForce.svelte b/src/_components/CirclePackForce.svelte
index bc0a4396..0e2fe203 100644
--- a/src/_components/CirclePackForce.svelte
+++ b/src/_components/CirclePackForce.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG force simulation using [d3-force](https://github.com/d3/d3-force). The values here are defaults which you will likely have to customize because every force simulation is different. This technique comes from @plmrry.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { forceSimulation, forceX, forceManyBody, forceCollide, forceCenter } from 'd3-force';
 
-	const { data, width, height, xScale, xGet, rGet, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -31,7 +31,7 @@
 	/* --------------------------------------------
 	 * Make a copy because the simulation will alter the objects
 	 */
-	const initialNodes = $data.map(d => ({ ...d }));
+	const initialNodes = c.data.map(d => ({ ...d }));
 
 	const simulation = forceSimulation(initialNodes);
 
@@ -51,22 +51,22 @@
 				forceX()
 					.x(
 						/** @param {any} d */ d => {
-							return groupBy === true ? $xGet(d) + $xScale.bandwidth() / 2 : $width / 2;
+							return groupBy === true ? c.xGet(d) + c.xScale.bandwidth() / 2 : c.width / 2;
 						}
 					)
 					.strength(xStrength)
 			)
-			.force('center', forceCenter($width / 2, $height / 2))
+			.force('center', forceCenter(c.width / 2, c.height / 2))
 			.force('charge', forceManyBody().strength(manyBodyStrength))
 			.force(
 				'collision',
 				forceCollide().radius(
 					/** @param {any} d */ d => {
-						return $rGet(d) + nodeStrokeWidth / 2; // Divide this by two because an svg stroke is drawn halfway out
+						return c.rGet(d) + nodeStrokeWidth / 2; // Divide this by two because an svg stroke is drawn halfway out
 					}
 				)
 			)
-			.force('center', forceCenter($width / 2, $height / 2))
+			.force('center', forceCenter(c.width / 2, c.height / 2))
 			.alpha(1)
 			.restart();
 	});
@@ -75,8 +75,8 @@
 {#each nodes as point}
 	<circle
 		class="node"
-		r={$rGet(point)}
-		fill={nodeColor || $zGet(point)}
+		r={c.rGet(point)}
+		fill={nodeColor || c.zGet(point)}
 		stroke={nodeStroke}
 		stroke-width={nodeStrokeWidth}
 		cx={point.x}
diff --git a/src/_components/ClevelandDotPlot.percent-range.html.svelte b/src/_components/ClevelandDotPlot.percent-range.html.svelte
index 581f20b2..c9aae96e 100644
--- a/src/_components/ClevelandDotPlot.percent-range.html.svelte
+++ b/src/_components/ClevelandDotPlot.percent-range.html.svelte
@@ -3,9 +3,9 @@
 	Generates an HTML Cleveland dot plot, also known as a lollipop-chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, zScale, yScale, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -15,13 +15,13 @@
 	/** @type {Props} */
 	let { r = 5 } = $props();
 
-	let midHeight = $derived($yScale.bandwidth() / 2);
+	let midHeight = $derived(c.yScale.bandwidth() / 2);
 </script>
 
 <div class="dot-plot">
-	{#each $data as row}
-		{@const scaledYValue = $yGet(row)}
-		{@const scaledXValues = $xGet(row)}
+	{#each c.data as row}
+		{@const scaledYValue = c.yGet(row)}
+		{@const scaledXValues = c.xGet(row)}
 		<div class="dot-row">
 			<div
 				class="line"
@@ -40,7 +40,7 @@
 						top: {scaledYValue + midHeight}%;
 						width: {r * 2}px;
 						height: {r * 2}px;
-						background: {$zScale($config.x[i])};
+						background: {c.zScale(c.config.x[i])};
 					"
 				></div>
 			{/each}
diff --git a/src/_components/ClevelandDotPlot.svelte b/src/_components/ClevelandDotPlot.svelte
index ed799195..1bb4145a 100644
--- a/src/_components/ClevelandDotPlot.svelte
+++ b/src/_components/ClevelandDotPlot.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG Cleveland dot plot, also known as a lollipop-chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, yScale, zScale, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -15,13 +15,13 @@
 	/** @type {Props} */
 	let { r = 5 } = $props();
 
-	let midHeight = $derived($yScale.bandwidth() / 2);
+	let midHeight = $derived(c.yScale.bandwidth() / 2);
 </script>
 
 <g class="dot-plot">
-	{#each $data as row}
-		{@const yVal = $yGet(row)}
-		{@const xVals = $xGet(row)}
+	{#each c.data as row}
+		{@const yVal = c.yGet(row)}
+		{@const xVals = c.xGet(row)}
 		<g class="dot-row">
 			<line
 				x1={Math.min(...xVals)}
@@ -31,7 +31,7 @@
 			></line>
 
 			{#each xVals as circleX, i}
-				<circle cx={circleX} cy={yVal + midHeight} {r} fill={$zScale($config.x[i])}></circle>
+				<circle cx={circleX} cy={yVal + midHeight} {r} fill={c.zScale(c.config.x[i])}></circle>
 			{/each}
 		</g>
 	{/each}
diff --git a/src/_components/Column.svelte b/src/_components/Column.svelte
index bf3ab67f..aed06eba 100644
--- a/src/_components/Column.svelte
+++ b/src/_components/Column.svelte
@@ -3,9 +3,9 @@
   Generates an SVG column chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, x, yRange, xScale, y, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -19,29 +19,29 @@
 	let { fill = '#00e047', stroke = '#000', strokeWidth = 0, showLabels = false } = $props();
 
 	let columnWidth = $derived(d => {
-		const vals = $xGet(d);
+		const vals = c.xGet(d);
 		return Math.abs(vals[1] - vals[0]);
 	});
 
 	let columnHeight = $derived(d => {
-		return $yRange[0] - $yGet(d);
+		return c.yRange[0] - c.yGet(d);
 	});
 </script>
 
 <g class="column-group">
-	{#each $data as d, i}
+	{#each c.data as d, i}
 		{@const colHeight = columnHeight(d)}
-		{@const xGot = $xGet(d)}
+		{@const xGot = c.xGet(d)}
 		{@const xPos = Array.isArray(xGot) ? xGot[0] : xGot}
-		{@const colWidth = $xScale.bandwidth ? $xScale.bandwidth() : columnWidth(d)}
-		{@const yValue = $y(d)}
+		{@const colWidth = c.xScale.bandwidth ? c.xScale.bandwidth() : columnWidth(d)}
+		{@const yValue = c.y(d)}
 		<rect
 			class="group-rect"
 			data-id={i}
-			data-range={$x(d)}
+			data-range={c.x(d)}
 			data-count={yValue}
 			x={xPos}
-			y={$yGet(d)}
+			y={c.yGet(d)}
 			width={colWidth}
 			height={colHeight}
 			{fill}
@@ -49,7 +49,8 @@
 			stroke-width={strokeWidth}
 		/>
 		{#if showLabels && yValue}
-			<text x={xPos + colWidth / 2} y={$height - colHeight - 5} text-anchor="middle">{yValue}</text>
+			<text x={xPos + colWidth / 2} y={c.height - colHeight - 5} text-anchor="middle">{yValue}</text
+			>
 		{/if}
 	{/each}
 </g>
diff --git a/src/_components/ColumnStacked.svelte b/src/_components/ColumnStacked.svelte
index 0b803056..ab32b5a7 100644
--- a/src/_components/ColumnStacked.svelte
+++ b/src/_components/ColumnStacked.svelte
@@ -3,24 +3,24 @@
 	Generates an SVG stacked column chart. It uses the z-scale for color assignments and assumes both `xScale` and `zScale` are ordinal scales. It assumes your data is in a [D3 stack format](https://github.com/d3/d3-shape#stack).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, zGet, xScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 </script>
 
 <g class="column-group">
-	{#each $data as series, i}
+	{#each c.data as series, i}
 		{#each series as d}
-			{@const yVals = $yGet(d)}
+			{@const yVals = c.yGet(d)}
 			{@const columnHeight = yVals[0] - yVals[1]}
 			<rect
 				class="group-rect"
 				data-id={i}
-				x={$xGet(d)}
+				x={c.xGet(d)}
 				y={yVals[1]}
-				width={$xScale.bandwidth()}
+				width={c.xScale.bandwidth()}
 				height={columnHeight}
-				fill={$zGet(series)}
+				fill={c.zGet(series)}
 			></rect>
 		{/each}
 	{/each}
diff --git a/src/_components/GroupLabels.html.svelte b/src/_components/GroupLabels.html.svelte
index 4c13f422..d6ab0336 100644
--- a/src/_components/GroupLabels.html.svelte
+++ b/src/_components/GroupLabels.html.svelte
@@ -3,10 +3,10 @@
 	Generates HTML text labels for a nested data structure. It places the label near the y-value of the highest x-valued data point. This is useful for labeling the final point in a multi-series line chart, for example. It expects your data to be an array of objects where each has `values` field that is an array of data objects. It uses the `z` field accessor to pull the text label.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { max } from 'd3-array';
 
-	const { data, x, y, xScale, yScale, xRange, yRange, z } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/* --------------------------------------------
 	 * Title case the first letter
@@ -16,11 +16,11 @@
 	/* --------------------------------------------
 	 * Put the label on the highest value
 	 */
-	let left = $derived(values => $xScale(max(values, $x)) / Math.max(...$xRange));
-	let top = $derived(values => $yScale(max(values, $y)) / Math.max(...$yRange));
+	let left = $derived(values => c.xScale(max(values, c.x)) / Math.max(...c.xRange));
+	let top = $derived(values => c.yScale(max(values, c.y)) / Math.max(...c.yRange));
 </script>
 
-{#each $data as group}
+{#each c.data as group}
 	<div
 		class="label"
 		style="
@@ -28,7 +28,7 @@
       left:{left(group.values) * 100}%;
     "
 	>
-		{cap($z(group))}
+		{cap(c.z(group))}
 	</div>
 {/each}
 
diff --git a/src/_components/Key.html.svelte b/src/_components/Key.html.svelte
index 82b1af82..0f1b8c65 100644
--- a/src/_components/Key.html.svelte
+++ b/src/_components/Key.html.svelte
@@ -3,7 +3,7 @@
 	Creates a key for ordinal scales on `zScale`.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
 	/**
 	 * @typedef {Object} Props
@@ -16,7 +16,7 @@
 	/** @type {Props} */
 	let { shape = 'square', align = 'start', lookup, capitalize = true } = $props();
 
-	const { zDomain, zScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	function cap(val) {
 		return String(val).replace(/^\w/, d => d.toUpperCase());
@@ -31,13 +31,13 @@
 </script>
 
 <div class="key" style="justify-content: {align === 'end' ? 'flex-end' : align};">
-	{#each $zDomain as item}
+	{#each c.zDomain as item}
 		<div class="key-item">
 			<div
 				class="chip chip__{shape}"
 				style="background: {shape === `line`
-					? `linear-gradient(-45deg, #ffffff 40%, ${$zScale(item)} 41%, ${$zScale(item)} 59%, #ffffff 60%)`
-					: $zScale(item)};"
+					? `linear-gradient(-45deg, #ffffff 40%, ${c.zScale(item)} 41%, ${c.zScale(item)} 59%, #ffffff 60%)`
+					: c.zScale(item)};"
 			></div>
 			<div class="name">{displayName(item)}</div>
 		</div>
diff --git a/src/_components/Labels.html.svelte b/src/_components/Labels.html.svelte
index 56f2bb32..9e8c2acd 100644
--- a/src/_components/Labels.html.svelte
+++ b/src/_components/Labels.html.svelte
@@ -3,9 +3,9 @@
 	Adds HTML text labels based on a given list.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { xGet, yGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -22,8 +22,8 @@
 	<div
 		class="label"
 		style="
-      top:{$yGet(d)}px;
-      left:{$xGet(d)}px;
+      top:{c.yGet(d)}px;
+      left:{c.xGet(d)}px;
     "
 	>
 		{formatLabelName(getLabelName(d))}
diff --git a/src/_components/Line-D3.svelte b/src/_components/Line-D3.svelte
index 1d8248af..4b6b4a98 100644
--- a/src/_components/Line-D3.svelte
+++ b/src/_components/Line-D3.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG line shape using the `line` function from [d3-shape](https://github.com/d3/d3-shape).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { line, curveLinear } from 'd3-shape';
 
-	const { data, xGet, yGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/** @typedef {import('d3-shape').CurveFactory} CurveFactory */
 	/**
@@ -18,11 +18,11 @@
 	/** @type {Props} */
 	let { stroke = '#ab00d6', curve = curveLinear } = $props();
 
-	let path = $derived(line().x($xGet).y($yGet).curve(curve));
+	let path = $derived(line().x(c.xGet).y(c.yGet).curve(curve));
 	// .defined($y)
 </script>
 
-<path class="path-line" d={path($data)} {stroke}></path>
+<path class="path-line" d={path(c.data)} {stroke}></path>
 
 <style>
 	.path-line {
diff --git a/src/_components/Line.svelte b/src/_components/Line.svelte
index b425d8e7..7c5c5a2c 100644
--- a/src/_components/Line.svelte
+++ b/src/_components/Line.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG line shape.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -17,9 +17,9 @@
 
 	let path = $derived(
 		'M' +
-			$data
+			c.data
 				.map(d => {
-					return $xGet(d) + ',' + $yGet(d);
+					return c.xGet(d) + ',' + c.yGet(d);
 				})
 				.join('L')
 	);
diff --git a/src/_components/Map.canvas.svelte b/src/_components/Map.canvas.svelte
index 1aaf7796..bc07aa73 100644
--- a/src/_components/Map.canvas.svelte
+++ b/src/_components/Map.canvas.svelte
@@ -4,10 +4,11 @@
  -->
 <script>
 	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { scaleCanvas } from 'layercake';
 	import { geoPath } from 'd3-geo';
 
-	const { data, width, height, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	const { ctx } = getContext('canvas');
 
@@ -17,28 +18,28 @@
 	 * @property {string} [stroke='#ccc'] - The shape's stroke color.
 	 * @property {number} [strokeWidth=1] - The shape's stroke width.
 	 * @property {string|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set.
-	 * @property {Array<GeoJSON>|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset.
+	 * @property {Array<GeoJSON>|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `c.data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `c.data.features` if left unset.
 	 */
 
 	/** @type {Props} */
 	let { projection, stroke = '#ccc', strokeWidth = 1, fill, features } = $props();
 
-	let projectionFn = $derived(projection().fitSize([$width, $height], $data));
+	let projectionFn = $derived(projection().fitSize([c.width, c.height], c.data));
 
 	let geoPathFn = $derived(geoPath(projectionFn));
 
-	let featuresToDraw = $derived(features || $data.features);
+	let featuresToDraw = $derived(features || c.data.features);
 
 	$effect(() => {
-		if (!$width || !$height || !$ctx) return;
+		if (!c.width || !c.height || !$ctx) return;
 
 		// Assign to a local variable: setting properties on `$ctx` directly
 		// would re-notify the store and re-trigger this effect
 		const context = $ctx;
-		const zGetFn = $zGet;
+		const zGetFn = c.zGet;
 
-		scaleCanvas(context, $width, $height);
-		context.clearRect(0, 0, $width, $height);
+		scaleCanvas(context, c.width, c.height);
+		context.clearRect(0, 0, c.width, c.height);
 
 		featuresToDraw.forEach(
 			/** @param {any} feature */ feature => {
diff --git a/src/_components/Map.svg.svelte b/src/_components/Map.svg.svelte
index eefc7450..5820c03d 100644
--- a/src/_components/Map.svg.svelte
+++ b/src/_components/Map.svg.svelte
@@ -3,20 +3,20 @@
 	Generates an SVG map using the `geoPath` function from [d3-geo](https://github.com/d3/d3-geo).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { geoPath } from 'd3-geo';
 	import { raise } from 'layercake';
 
-	const { data, width, height, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
 	 * @property {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`.
-	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
+	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
 	 * @property {string|undefined} [fill] - The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set.
 	 * @property {string} [stroke='#333'] - The shape's stroke color.
 	 * @property {number} [strokeWidth=0.5] - The shape's stroke width.
-	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `$data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `$data.features` if left unset.
+	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features. Use this if you want to draw a subset of the features in `c.data` while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in `c.data.features` if left unset.
 	 * @property {(e: MouseEvent, props: Object) => void} [onmousemove] - A function that gets called on mousemove events. The first argument is the event, and the second is the properties of the hovered feature.
 	 * @property {(e: MouseEvent) => void} [onmouseout] - A function that gets called on mouseout events.
 	 */
@@ -36,9 +36,11 @@
 	/* --------------------------------------------
 	 * Here's how you would do cross-component hovers
 	 */
-	let fitSizeRange = $derived(fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
+	let fitSizeRange = $derived(
+		fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [c.width, c.height]
+	);
 
-	let projectionFn = $derived(projection().fitSize(fitSizeRange, $data));
+	let projectionFn = $derived(projection().fitSize(fitSizeRange, c.data));
 
 	let geoPathFn = $derived(geoPath(projectionFn));
 
@@ -56,10 +58,10 @@
 
 <!-- svelte-ignore a11y_mouse_events_have_key_events -->
 <g class="map-group" {onmouseout} role="tooltip">
-	{#each features || $data.features as feature}
+	{#each features || c.data.features as feature}
 		<path
 			class="feature-path"
-			fill={fill || $zGet(feature.properties)}
+			fill={fill || c.zGet(feature.properties)}
 			{stroke}
 			stroke-width={strokeWidth}
 			d={geoPathFn(feature)}
diff --git a/src/_components/MapLabels.html.svelte b/src/_components/MapLabels.html.svelte
index 664d9626..4e1ece00 100644
--- a/src/_components/MapLabels.html.svelte
+++ b/src/_components/MapLabels.html.svelte
@@ -3,31 +3,33 @@
 	Adds HTML text labels based on features in the data or a custom GeoJSON Feature Collection.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
 	 * @property {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`.
-	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
+	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
 	 * @property {Function} getLabel - An accessor function to get the field to display.
 	 * @property {Function} getCoordinates - An accessor function to get the `[x, y]` coordinate field. Defaults to a GeoJSON feature format.
-	 * @property {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will default to those in `$data.features`, assuming this field is a list of GeoJSON features.
+	 * @property {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will default to those in `c.data.features`, assuming this field is a list of GeoJSON features.
 	 */
 
 	/** @type {Props} */
 	let { projection, fixedAspectRatio, getLabel, getCoordinates, features } = $props();
 
-	let fitSizeRange = $derived(fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
+	let fitSizeRange = $derived(
+		fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [c.width, c.height]
+	);
 
-	let projectionFn = $derived(projection().fitSize(fitSizeRange, $data));
+	let projectionFn = $derived(projection().fitSize(fitSizeRange, c.data));
 
 	let units = $derived(fixedAspectRatio ? '%' : 'px');
 </script>
 
 <div class="map-labels" style:aspect-ratio={fixedAspectRatio ? 1 : null}>
-	{#each features || $data.features as d}
+	{#each features || c.data.features as d}
 		{@const coords = projectionFn(getCoordinates(d))}
 		<div
 			class="map-label"
diff --git a/src/_components/MapLabels.svg.svelte b/src/_components/MapLabels.svg.svelte
index 0d222143..72e0480a 100644
--- a/src/_components/MapLabels.svg.svelte
+++ b/src/_components/MapLabels.svg.svelte
@@ -3,29 +3,31 @@
 	Adds SVG text labels based on features in the data or a custom GeoJSON Feature Collection.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
 	 * @property {Function} projection - A D3 projection function. Pass this in as an uncalled function, e.g. `projection={geoAlbersUsa}`.
 	 * @property {Function} getLabel - An accessor function to get the field to display.
-	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
+	 * @property {number|undefined} [fixedAspectRatio] - By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.
 	 * @property {Function} getCoordinates - An accessor function to get the `[x, y]` coordinate field. Defaults to a GeoJSON feature format.
-	 * @property {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will default to those in `$data.features`, assuming this field is a list of GeoJSON features.
+	 * @property {Array<Object>|undefined} [features] - A list of labels as GeoJSON features. If unset, the plotted features will default to those in `c.data.features`, assuming this field is a list of GeoJSON features.
 	 */
 
 	/** @type {Props} */
 	let { projection, getLabel, fixedAspectRatio, getCoordinates, features } = $props();
 
-	let fitSizeRange = $derived(fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [$width, $height]);
+	let fitSizeRange = $derived(
+		fixedAspectRatio ? [100, 100 / fixedAspectRatio] : [c.width, c.height]
+	);
 
-	let projectionFn = $derived(projection().fitSize(fitSizeRange, $data));
+	let projectionFn = $derived(projection().fitSize(fitSizeRange, c.data));
 </script>
 
 <g class="map-labels">
-	{#each features || $data.features as d}
+	{#each features || c.data.features as d}
 		{@const coords = projectionFn(getCoordinates(d))}
 		<text class="map-label" x={coords[0]} y={coords[1]}>{getLabel(d)}</text>
 	{/each}
diff --git a/src/_components/MapPoints.canvas.svelte b/src/_components/MapPoints.canvas.svelte
index 6fd83397..170fdd24 100644
--- a/src/_components/MapPoints.canvas.svelte
+++ b/src/_components/MapPoints.canvas.svelte
@@ -4,9 +4,10 @@
  -->
 <script>
 	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { scaleCanvas } from 'layercake';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	const { ctx } = getContext('canvas');
 
@@ -17,7 +18,7 @@
 	 * @property {string} [fill='yellow'] - The point's fill color.
 	 * @property {string} [stroke='#000'] - The point's stroke color.
 	 * @property {number} [strokeWidth=1] - The point's stroke width.
-	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `$data.features`, assuming this field is a list of GeoJSON features.
+	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `c.data.features`, assuming this field is a list of GeoJSON features.
 	 */
 
 	/** @type {Props} */
@@ -30,19 +31,19 @@
 		features
 	} = $props();
 
-	let projectionFn = $derived(projection().fitSize([$width, $height], $data));
+	let projectionFn = $derived(projection().fitSize([c.width, c.height], c.data));
 
-	let featuresToDraw = $derived(features || $data.features);
+	let featuresToDraw = $derived(features || c.data.features);
 
 	$effect(() => {
-		if (!$width || !$height || !$ctx) return;
+		if (!c.width || !c.height || !$ctx) return;
 
 		// Assign to a local variable: setting properties on `$ctx` directly
 		// would re-notify the store and re-trigger this effect
 		const context = $ctx;
 
-		scaleCanvas(context, $width, $height);
-		context.clearRect(0, 0, $width, $height);
+		scaleCanvas(context, c.width, c.height);
+		context.clearRect(0, 0, c.width, c.height);
 
 		// To scale the circle by size, set width and height to `$rGet(d.properties)`
 		featuresToDraw.forEach(
diff --git a/src/_components/MapPoints.html.svelte b/src/_components/MapPoints.html.svelte
index fbbf6de4..84db7639 100644
--- a/src/_components/MapPoints.html.svelte
+++ b/src/_components/MapPoints.html.svelte
@@ -3,9 +3,9 @@
 	Generates HTML dots onto a map using [d3-geo](https://github.com/d3/d3-geo).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -15,7 +15,7 @@
 	 * @property {string} [stroke='#000'] - The point's stroke color.
 	 * @property {number} [strokeWidth=1] - The point's stroke width, in pixels.
 	 * @property {number} [opacity=1] - The point's opacity.
-	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `$data.features`, assuming this field is a list of GeoJSON features.
+	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `c.data.features`, assuming this field is a list of GeoJSON features.
 	 */
 
 	/** @type {Props} */
@@ -29,12 +29,12 @@
 		features
 	} = $props();
 
-	let projectionFn = $derived(projection().fitSize([$width, $height], $data));
+	let projectionFn = $derived(projection().fitSize([c.width, c.height], c.data));
 </script>
 
 <div class="points">
 	<!-- To scale the circle by size, set width and height to `$rGet(d.properties)` -->
-	{#each features || $data.features as d}
+	{#each features || c.data.features as d}
 		<div
 			class="point"
 			style="
diff --git a/src/_components/MapPoints.svelte b/src/_components/MapPoints.svelte
index 99a4c788..55a6fc3f 100644
--- a/src/_components/MapPoints.svelte
+++ b/src/_components/MapPoints.svelte
@@ -3,9 +3,9 @@
 	Generates SVG dots onto a map using [d3-geo](https://github.com/d3/d3-geo).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/* --------------------------------------------
 	 * Require a D3 projection function
@@ -19,7 +19,7 @@
 	 * @property {string} [stroke='#000'] - The point's stroke color.
 	 * @property {number} [strokeWidth=1] - The point's stroke width.
 	 * @property {number} [opacity=1] - The point's opacity.
-	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `$data.features`, assuming this field is a list of GeoJSON features.
+	 * @property {Array<Object>|undefined} [features] - A list of GeoJSON features to plot. If unset, the plotted features will default to those in `c.data.features`, assuming this field is a list of GeoJSON features.
 	 */
 
 	/** @type {Props} */
@@ -33,11 +33,11 @@
 		features
 	} = $props();
 
-	let projectionFn = $derived(projection().fitSize([$width, $height], $data));
+	let projectionFn = $derived(projection().fitSize([c.width, c.height], c.data));
 </script>
 
 <g class="points">
-	{#each features || $data.features as d}
+	{#each features || c.data.features as d}
 		<!-- To scale the circle by size, set r to `$rGet(d.properties)` -->
 		<circle
 			cx={projectionFn(d.geometry.coordinates)[0]}
diff --git a/src/_components/MultiLine.svelte b/src/_components/MultiLine.svelte
index bd6fc433..a779d851 100644
--- a/src/_components/MultiLine.svelte
+++ b/src/_components/MultiLine.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG multi-series line chart. It expects your data to be an array of objects, each with a `values` key that is an array of data objects.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { line, curveLinear } from 'd3-shape';
 
-	const { data, xGet, yGet, zGet } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/** @typedef {import('d3-shape').CurveFactory} CurveFactory */
 	/**
@@ -17,13 +17,13 @@
 	/** @type {Props} */
 	let { curve = curveLinear } = $props();
 
-	let path = $derived(line().x($xGet).y($yGet).curve(curve));
+	let path = $derived(line().x(c.xGet).y(c.yGet).curve(curve));
 	// .defined($y)
 </script>
 
 <g class="line-group">
-	{#each $data as group}
-		<path class="path-line" d={path(group.values)} stroke={$zGet(group)}></path>
+	{#each c.data as group}
+		<path class="path-line" d={path(group.values)} stroke={c.zGet(group)}></path>
 	{/each}
 </g>
 
diff --git a/src/_components/QuadTree.html.svelte b/src/_components/QuadTree.html.svelte
index be529203..c6eda973 100644
--- a/src/_components/QuadTree.html.svelte
+++ b/src/_components/QuadTree.html.svelte
@@ -5,10 +5,10 @@
 	The quadtree searches across both the x and y dimensions at the same time. But if you want to only search across one, set the `x` and `y` props to the same value. For example, the [shared tooltip component](https://layercake.graphics/components/SharedTooltip.html.svelte) sets `y='x'` since it's nicer behavior to only pick up on the nearest x-value.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { quadtree } from 'd3-quadtree';
 
-	const { data, xGet, yGet, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	let visible = $state(false);
 	let found = $state({});
@@ -19,15 +19,15 @@
 	 * @property {string} [x='x'] - The dimension to search across when moving the mouse left and right.
 	 * @property {string} [y='y'] - The dimension to search across when moving the mouse up and down.
 	 * @property {number|undefined} [searchRadius] - The number of pixels to search around the mouse's location. This is the third argument passed to [`quadtree.find`](https://github.com/d3/d3-quadtree#quadtree_find) and by default a value of `undefined` means an unlimited range.
-	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
+	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
 	 * @property {import('svelte').Snippet<[any]>} [children]
 	 */
 
 	/** @type {Props} */
 	let { x = 'x', y = 'y', searchRadius, dataset, children } = $props();
 
-	let xGetter = $derived(x === 'x' ? $xGet : $yGet);
-	let yGetter = $derived(y === 'y' ? $yGet : $xGet);
+	let xGetter = $derived(x === 'x' ? c.xGet : c.yGet);
+	let yGetter = $derived(y === 'y' ? c.yGet : c.xGet);
 
 	/** @param {MouseEvent} evt */
 	function findItem(evt) {
@@ -44,11 +44,11 @@
 		quadtree()
 			.extent([
 				[-1, -1],
-				[$width + 1, $height + 1]
+				[c.width + 1, c.height + 1]
 			])
 			.x(xGetter)
 			.y(yGetter)
-			.addAll(dataset || $data)
+			.addAll(dataset || c.data)
 	);
 </script>
 
diff --git a/src/_components/QuadTree.percent-range.html.svelte b/src/_components/QuadTree.percent-range.html.svelte
index c54b3d48..1e76d4ff 100644
--- a/src/_components/QuadTree.percent-range.html.svelte
+++ b/src/_components/QuadTree.percent-range.html.svelte
@@ -5,10 +5,10 @@
 	The quadtree searches across both the x and y dimensions at the same time. But if you want to only search across one, set the `x` and `y` props to the same value. For example, the [shared tooltip component](https://layercake.graphics/components/SharedTooltip.html.svelte) sets `y='x'` since it's nicer behavior to only pick up on the nearest x-value.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { quadtree } from 'd3-quadtree';
 
-	const { data, xGet, yGet, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	let visible = $state(false);
 	let found = $state({});
@@ -19,15 +19,15 @@
 	 * @property {string} [x='x'] - The dimension to search across when moving the mouse left and right.
 	 * @property {string} [y='y'] - The dimension to search across when moving the mouse up and down.
 	 * @property {number|undefined} [searchRadius] - The number of pixels to search around the mouse's location. This is the third argument passed to [`quadtree.find`](https://github.com/d3/d3-quadtree#quadtree_find) and by default a value of `undefined` means an unlimited range.
-	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
+	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
 	 * @property {import('svelte').Snippet<[any]>} [children]
 	 */
 
 	/** @type {Props} */
 	let { x = 'x', y = 'y', searchRadius, dataset, children } = $props();
 
-	let xGetter = $derived(x === 'x' ? $xGet : $yGet);
-	let yGetter = $derived(y === 'y' ? $yGet : $xGet);
+	let xGetter = $derived(x === 'x' ? c.xGet : c.yGet);
+	let yGetter = $derived(y === 'y' ? c.yGet : c.xGet);
 
 	/** @param {MouseEvent} evt*/
 	function findItem(evt) {
@@ -36,8 +36,8 @@
 		const xLayerKey = /** @type {'layerX'|'layerY'} */ (`layer${x.toUpperCase()}`);
 		const yLayerKey = /** @type {'layerX'|'layerY'}*/ (`layer${y.toUpperCase()}`);
 
-		const xLayerVal = (evt[xLayerKey] / (x === 'x' ? $width : $height)) * 100;
-		const yLayerVal = (evt[yLayerKey] / (y === 'y' ? $height : $width)) * 100;
+		const xLayerVal = (evt[xLayerKey] / (x === 'x' ? c.width : c.height)) * 100;
+		const yLayerVal = (evt[yLayerKey] / (y === 'y' ? c.height : c.width)) * 100;
 
 		found = finder.find(xLayerVal, yLayerVal, searchRadius) || {};
 
@@ -48,11 +48,11 @@
 		quadtree()
 			.extent([
 				[-1, -1],
-				[$width + 1, $height + 1]
+				[c.width + 1, c.height + 1]
 			])
 			.x(xGetter)
 			.y(yGetter)
-			.addAll(dataset || $data)
+			.addAll(dataset || c.data)
 	);
 </script>
 
diff --git a/src/_components/Radar.svelte b/src/_components/Radar.svelte
index e43ba0c6..fc699740 100644
--- a/src/_components/Radar.svelte
+++ b/src/_components/Radar.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG radar chart.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { line, curveCardinalClosed } from 'd3-shape';
 
-	const { data, width, height, xGet, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -32,7 +32,7 @@
 		circleStrokeWidth = 1
 	} = $props();
 
-	let angleSlice = $derived((Math.PI * 2) / $config.x.length);
+	let angleSlice = $derived((Math.PI * 2) / c.config.x.length);
 
 	let path = $derived(
 		line()
@@ -61,9 +61,9 @@
 	// );
 </script>
 
-<g transform="translate({$width / 2}, {$height / 2})">
-	{#each $data as row}
-		{@const xVals = $xGet(row)}
+<g transform="translate({c.width / 2}, {c.height / 2})">
+	{#each c.data as row}
+		{@const xVals = c.xGet(row)}
 		<!-- Draw a line connecting all the dots -->
 		<path
 			class="path-line"
diff --git a/src/_components/Sankey.svelte b/src/_components/Sankey.svelte
index 9e3ee6fd..df6fd6ba 100644
--- a/src/_components/Sankey.svelte
+++ b/src/_components/Sankey.svelte
@@ -3,10 +3,10 @@
 	Generates an SVG Sankey chart using [d3-sankey](https://github.com/d3/d3-sankey).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import * as Sankey from 'd3-sankey';
 
-	const { data, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {(
@@ -61,13 +61,13 @@
 			.nodeWidth(nodeWidth)
 			.nodePadding(nodePadding)
 			.nodeId(nodeId)
-			.size([$width, $height])
+			.size([c.width, c.height])
 			.linkSort(linkSort);
 
-		sankeyData = sankey($data);
+		sankeyData = sankey(c.data);
 	});
 
-	let fontSize = $derived($width <= 320 ? 8 : 12);
+	let fontSize = $derived(c.width <= 320 ? 8 : 12);
 </script>
 
 <g class="sankey-layer">
@@ -86,12 +86,12 @@
 		{#each sankeyData.nodes as d}
 			<rect x={d.x0} y={d.y0} height={d.y1 - d.y0} width={d.x1 - d.x0} fill={colorNodes(d)} />
 			<text
-				x={d.x0 < $width / 4 ? d.x1 + 6 : d.x0 - 6}
+				x={d.x0 < c.width / 4 ? d.x1 + 6 : d.x0 - 6}
 				y={(d.y1 + d.y0) / 2}
 				dy={fontSize / 2 - 2}
 				style="fill: {colorText(d)};
 							font-size: {fontSize}px;
-							text-anchor: {d.x0 < $width / 4 ? 'start' : 'end'};"
+							text-anchor: {d.x0 < c.width / 4 ? 'start' : 'end'};"
 			>
 				{d.id}
 			</text>
diff --git a/src/_components/Scatter.canvas.svelte b/src/_components/Scatter.canvas.svelte
index 2a41c05b..211c7413 100644
--- a/src/_components/Scatter.canvas.svelte
+++ b/src/_components/Scatter.canvas.svelte
@@ -4,9 +4,10 @@
  -->
 <script>
 	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { scaleCanvas } from 'layercake';
 
-	const { data, xGet, yGet, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	const { ctx } = getContext('canvas');
 
@@ -22,7 +23,7 @@
 	let { r = 5, fill = '#0cf', stroke = '#000', strokeWidth = 1 } = $props();
 
 	$effect(() => {
-		if (!$width || !$height || !$ctx) return;
+		if (!c.width || !c.height || !$ctx) return;
 
 		// Assign to a local variable: setting properties on `$ctx` directly
 		// would re-notify the store and re-trigger this effect
@@ -34,15 +35,15 @@
 		 * put these reset functions in the first layer, not each one
 		 * since they should only run once per update
 		 */
-		scaleCanvas(context, $width, $height);
-		context.clearRect(0, 0, $width, $height);
+		scaleCanvas(context, c.width, c.height);
+		context.clearRect(0, 0, c.width, c.height);
 
 		/**
 		 * Draw our scatterplot
 		 */
-		$data.forEach((/** @type {any} d */ d) => {
+		c.data.forEach((/** @type {any} d */ d) => {
 			context.beginPath();
-			context.arc($xGet(d), $yGet(d), r, 0, 2 * Math.PI, false);
+			context.arc(c.xGet(d), c.yGet(d), r, 0, 2 * Math.PI, false);
 			context.lineWidth = strokeWidth;
 			context.strokeStyle = stroke;
 			context.stroke();
diff --git a/src/_components/Scatter.html.svelte b/src/_components/Scatter.html.svelte
index 07d465ac..c286a5d0 100644
--- a/src/_components/Scatter.html.svelte
+++ b/src/_components/Scatter.html.svelte
@@ -3,9 +3,9 @@
 	Generates an HTML scatter plot. This component can also work if the x- or y-scale is ordinal, i.e. it has a `.bandwidth` method. See the [timeplot chart](https://layercake.graphics/example/Timeplot) for an example.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -20,12 +20,12 @@
 </script>
 
 <div class="scatter-group">
-	{#each $data as d}
+	{#each c.data as d}
 		<div
 			class="circle"
 			style="
-				left: {$xGet(d) + ($xScale.bandwidth ? $xScale.bandwidth() / 2 : 0)}%;
-				top: {$yGet(d) + ($yScale.bandwidth ? $yScale.bandwidth() / 2 : 0)}%;
+				left: {c.xGet(d) + (c.xScale.bandwidth ? c.xScale.bandwidth() / 2 : 0)}%;
+				top: {c.yGet(d) + (c.yScale.bandwidth ? c.yScale.bandwidth() / 2 : 0)}%;
 				width: {r * 2}px;
 				height: {r * 2}px;
 				background-color: {fill};
diff --git a/src/_components/Scatter.svg.svelte b/src/_components/Scatter.svg.svelte
index 4a59fe66..0aab4ad6 100644
--- a/src/_components/Scatter.svg.svelte
+++ b/src/_components/Scatter.svg.svelte
@@ -3,9 +3,9 @@
 	Generates an SVG scatter plot. This component can also work if the x- or y-scale is ordinal, i.e. it has a `.bandwidth` method. See the [timeplot chart](https://layercake.graphics/example/Timeplot) for an example.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, xScale, yScale } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -20,10 +20,10 @@
 </script>
 
 <g class="scatter-group">
-	{#each $data as d}
+	{#each c.data as d}
 		<circle
-			cx={$xGet(d) + ($xScale.bandwidth ? $xScale.bandwidth() / 2 : 0)}
-			cy={$yGet(d) + ($yScale.bandwidth ? $yScale.bandwidth() / 2 : 0)}
+			cx={c.xGet(d) + (c.xScale.bandwidth ? c.xScale.bandwidth() / 2 : 0)}
+			cy={c.yGet(d) + (c.yScale.bandwidth ? c.yScale.bandwidth() / 2 : 0)}
 			{r}
 			{fill}
 			{stroke}
diff --git a/src/_components/Scatter.webgl.svelte b/src/_components/Scatter.webgl.svelte
index fe6633c4..c25cdd04 100644
--- a/src/_components/Scatter.webgl.svelte
+++ b/src/_components/Scatter.webgl.svelte
@@ -5,8 +5,9 @@
 <script>
 	import reglWrapper from 'regl';
 	import { getContext, onDestroy } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { data, xGet, yGet, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -175,7 +176,7 @@
 	}
 
 	$effect(() => {
-		if (!$width || !$height || !$gl) return;
+		if (!c.width || !c.height || !$gl) return;
 
 		ensureRegl($gl);
 		if (!regl || !drawPoints) return;
@@ -191,9 +192,9 @@
 
 		drawPoints({
 			pointWidth: r * 2,
-			points: $data,
-			x: $xGet,
-			y: $yGet,
+			points: c.data,
+			x: c.xGet,
+			y: c.yGet,
 			fillColor: hexToRgbPercent(fill),
 			strokeColor: hexToRgbPercent(stroke)
 		});
diff --git a/src/_components/SharedTooltip.html.svelte b/src/_components/SharedTooltip.html.svelte
index c8dc6f54..a689b048 100644
--- a/src/_components/SharedTooltip.html.svelte
+++ b/src/_components/SharedTooltip.html.svelte
@@ -3,23 +3,23 @@
 	Generates a tooltip that works on multiseries datasets, like multiline charts. It creates a tooltip showing the name of the series and the current value. It finds the nearest data point using the [QuadTree.html.svelte](https://layercake.graphics/components/QuadTree.html.svelte) component.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { format } from 'd3-format';
 
 	import QuadTree from './QuadTree.html.svelte';
 
-	const { data, width, yScale, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	const commas = format(',');
 	const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {Function} [formatTitle=d => d] - A function to format the tooltip title, which is `$config.x`.
+	 * @property {Function} [formatTitle=d => d] - A function to format the tooltip title, which is `c.config.x`.
 	 * @property {Function} [formatValue=d => (isNaN(+d) ? d : commas(d))] - A function to format the value.
 	 * @property {Function} [formatKey=d => titleCase(d)] - A function to format the series name.
 	 * @property {number} [offset=-20] - A y-offset from the hover point, in pixels.
-	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
+	 * @property {Array<Object>|undefined} [dataset] - The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
 	 */
 
 	/** @type {Props} */
@@ -40,7 +40,7 @@
 	function sortResult(result) {
 		if (Object.keys(result).length === 0) return [];
 		const rows = Object.keys(result)
-			.filter(d => d !== $config.x)
+			.filter(d => d !== c.config.x)
 			.map(key => {
 				return {
 					key,
@@ -53,7 +53,7 @@
 	}
 </script>
 
-<QuadTree dataset={dataset || $data} y="x">
+<QuadTree dataset={dataset || c.data} y="x">
 	{#snippet children({ x, y, visible, found, e })}
 		{@const foundSorted = sortResult(found)}
 		{#if visible === true}
@@ -63,10 +63,10 @@
 				style="
 	        width:{w}px;
 	        display: {visible ? 'block' : 'none'};
-	        top:{$yScale(foundSorted[0].value) + offset}px;
-	        left:{Math.min(Math.max(w2, x), $width - w2)}px;"
+	        top:{c.yScale(foundSorted[0].value) + offset}px;
+	        left:{Math.min(Math.max(w2, x), c.width - w2)}px;"
 			>
-				<div class="title">{formatTitle(found[$config.x])}</div>
+				<div class="title">{formatTitle(found[c.config.x])}</div>
 				{#each foundSorted as row}
 					<div class="row">
 						<span class="key">{formatKey(row.key)}:</span>
diff --git a/src/_components/SharedTooltip.percent-range.html.svelte b/src/_components/SharedTooltip.percent-range.html.svelte
index ca6eb8f3..3690ae19 100644
--- a/src/_components/SharedTooltip.percent-range.html.svelte
+++ b/src/_components/SharedTooltip.percent-range.html.svelte
@@ -3,23 +3,23 @@
 	Generates a tooltip that works on multiseries datasets, like multiline charts. It creates a tooltip showing the name of the series and the current value. This version uses percentages so you can use it to render server-side. It finds the nearest data point using the [QuadTree.percent-range.html.svelte](https://layercake.graphics/components/QuadTree.percent-range.html.svelte) component.
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { format } from 'd3-format';
 
 	import QuadTree from './QuadTree.percent-range.html.svelte';
 
-	const { data, width, yScale, config } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	const commas = format(',');
 	const titleCase = d => d.replace(/^\w/, w => w.toUpperCase());
 
 	/**
 	 * @typedef {Object} Props
-	 * @property {Function} [formatTitle=d => d] - A function to format the tooltip title, which is `$config.x`.
+	 * @property {Function} [formatTitle=d => d] - A function to format the tooltip title, which is `c.config.x`.
 	 * @property {Function} [formatKey = d => titleCase(d)] - A function to format the series name.
 	 * @property {Function} [formatValue = d => (isNaN(+d) ? d : commas(d))] - A function to format the value.
 	 * @property {number} [offset=-20] - A y-offset from the hover point, in pixels.
-	 * @property {Array} [dataset] - The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
+	 * @property {Array} [dataset] - The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.
 	 */
 
 	/** @type {Props} */
@@ -40,7 +40,7 @@
 	function sortResult(result) {
 		if (Object.keys(result).length === 0) return [];
 		const rows = Object.keys(result)
-			.filter(d => d !== $config.x)
+			.filter(d => d !== c.config.x)
 			.map(key => {
 				return {
 					key,
@@ -53,20 +53,20 @@
 	}
 </script>
 
-<QuadTree dataset={dataset || $data} y="x">
+<QuadTree dataset={dataset || c.data} y="x">
 	{#snippet children({ x, y, visible, found, e })}
 		{@const foundSorted = sortResult(found)}
 		{#if visible === true}
-			<div style="left:{(x / 100) * $width}px;" class="line"></div>
+			<div style="left:{(x / 100) * c.width}px;" class="line"></div>
 			<div
 				class="tooltip"
 				style="
 	        width:{w}px;
 	        display: {visible ? 'block' : 'none'};
-	        top:calc({$yScale(foundSorted[0].value)}% + {offset}px);
-	        left:{Math.min(Math.max(w2, (x / 100) * $width), $width - w2)}px;"
+	        top:calc({c.yScale(foundSorted[0].value)}% + {offset}px);
+	        left:{Math.min(Math.max(w2, (x / 100) * c.width), c.width - w2)}px;"
 			>
-				<div class="title">{formatTitle(found[$config.x])}</div>
+				<div class="title">{formatTitle(found[c.config.x])}</div>
 				{#each foundSorted as row}
 					<div class="row">
 						<span class="key">{formatKey(row.key)}:</span>
diff --git a/src/_components/Voronoi.svelte b/src/_components/Voronoi.svelte
index 444392fb..c1e4cc71 100644
--- a/src/_components/Voronoi.svelte
+++ b/src/_components/Voronoi.svelte
@@ -3,11 +3,11 @@
 	Generates a Voronoi layer using [d3-delaunay](https://github.com/d3/d3-delaunay).
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { uniques } from 'layercake';
 	import { Delaunay } from 'd3-delaunay';
 
-	const { data, xGet, yGet, width, height } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/** @typedef {[number, number] & { data?: any }} Point */
 
@@ -31,9 +31,9 @@
 
 	/** @type {Point[]} */
 	let points = $derived(
-		$data.map(d => {
+		c.data.map(d => {
 			/** @type {Point} */
-			const point = [$xGet(d), $yGet(d)];
+			const point = [c.xGet(d), c.yGet(d)];
 			point.data = d;
 			return point;
 		})
@@ -41,7 +41,7 @@
 
 	let uniquePoints = $derived(uniques(points, d => d.join(), false) ?? []);
 
-	let voronoi = $derived(Delaunay.from(uniquePoints ?? []).voronoi([0, 0, $width, $height]));
+	let voronoi = $derived(Delaunay.from(uniquePoints ?? []).voronoi([0, 0, c.width, c.height]));
 </script>
 
 {#each uniquePoints as point, i}
diff --git a/src/lib/LayerCake.svelte b/src/lib/LayerCake.svelte
index f619be72..4b7547d6 100644
--- a/src/lib/LayerCake.svelte
+++ b/src/lib/LayerCake.svelte
@@ -3,8 +3,9 @@
 	Layer Cake component
  -->
 <script>
-	import { setContext, onMount } from 'svelte';
-	import { writable, derived } from 'svelte/store';
+	import { setLayerCakeContext } from './context';
+
+	import { onMount } from 'svelte';
 
 	import makeAccessor from './utils/makeAccessor.js';
 	import filterObject from './utils/filterObject.js';
@@ -22,28 +23,6 @@
 
 	const printDebug_debounced = debounce(printDebug, 200);
 
-	/** @type {boolean} [ssr=false] Whether this chart should be rendered server side. */
-	export let ssr = false;
-	/** @type {boolean} [pointerEvents=true] Whether to allow pointer events via CSS. Set this to `false` to set `pointer-events: none;` on all components, disabling all mouse interaction. */
-	export let pointerEvents = true;
-	/** @type {string} [position='relative'] Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes. */
-	export let position = 'relative';
-	/** @type {boolean} [percentRange=false] If `true`, set all scale ranges to `[0, 100]`. Ranges reversed via `xReverse`, `yReverse`, `zReverse` or `rReverse` props will continue to be reversed as usual. */
-	export let percentRange = false;
-
-	/** @type {number} [width=containerWidth] Override the automated width. */
-	export let width = undefined;
-	/** @type {number} [height=containerHeight] Override the automated height. */
-	export let height = undefined;
-
-	/** @type {number} [containerWidth=100] The bound container width. */
-	export let containerWidth = width || 100;
-	/** @type {number} [containerHeight=100] The bound container height. */
-	export let containerHeight = height || 100;
-
-	/**	@type {Element|undefined} [element] The .layercake-container `<div>` tag. Useful for bindings. */
-	export let element = undefined;
-
 	/* --------------------------------------------
 	 * Parameters
 	 * Values that computed properties are based on and that
@@ -51,97 +30,119 @@
 	 *
 	 */
 
-	/** @type {string|Function|number|Array<string|Function|number>|undefined} x The x accessor. The key in each row of data that corresponds to the x-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-	export let x = undefined;
-	/** @type {string|Function|number|Array<string|Function|number>|undefined} y The y accessor. The key in each row of data that corresponds to the y-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-	export let y = undefined;
-	/** @type {string|Function|number|Array<string|Function|number>|undefined} z The z accessor. The key in each row of data that corresponds to the z-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-	export let z = undefined;
-	/** @type {string|Function|number|Array<string|Function|number>|undefined} r The r accessor. The key in each row of data that corresponds to the r-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context. */
-	export let r = undefined;
-
-	/** @type {Array<Object>|Object} [data=[]] If `data` is not a flat array of objects and you want to use any of the scales, set a flat version of the data via the `flatData` prop. */
-	export let data = [];
-
-	/** @type {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [xDomain] Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
-	export let xDomain = undefined;
-	/** @type {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [yDomain] Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`.  Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
-	export let yDomain = undefined;
-	/** @type {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [zDomain] Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
-	export let zDomain = undefined;
-	/** @type {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [rDomain] Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values. */
-	export let rDomain = undefined;
-	/** @type {boolean|number} [xNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. */
-	export let xNice = false;
-	/** @type {boolean|number} [yNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. */
-	export let yNice = false;
-	/** @type {boolean|number} [zNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. */
-	export let zNice = false;
-	/** @type {boolean} [rNice=false] Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. */
-	export let rNice = false;
-	/** @type {[leftPixels: number, rightPixels: number]|undefined} [xPadding] Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-	export let xPadding = undefined;
-	/** @type {[leftPixels: number, rightPixels: number]|undefined} [yPadding] Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-	export let yPadding = undefined;
-	/** @type {[leftPixels: number, rightPixels: number]|undefined} [zPadding] Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-	export let zPadding = undefined;
-	/** @type {[leftPixels: number, rightPixels: number]|undefined} [rPadding] Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels. */
-	export let rPadding = undefined;
-	/** @type {Function} [xScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
-	export let xScale = defaultScales.x;
-	/** @type {Function} [yScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
-	export let yScale = defaultScales.y;
-	/** @type {Function} [zScale=d3.scaleLinear] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
-	export let zScale = defaultScales.z;
-	/** @type {Function} [rScale=d3.scaleSqrt] The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. */
-	export let rScale = defaultScales.r;
-	/** @type {[min: number, max: number]|Function|Array<string|number>|undefined} [xRange] Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-	export let xRange = undefined;
-	/** @type {[min: number, max: number]|Function|Array<string|number>|undefined} [xRange] Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-	export let yRange = undefined;
-	/** @type {[min: number, max: number]|Function|Array<string|number>|undefined} [zRange] Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-	export let zRange = undefined;
-	/** @type {[min: number, max: number]|Function|Array<string|number>|undefined} [rRange] Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). */
-	export let rRange = undefined;
-	/** @type {boolean} [xReverse=false] Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. */
-	export let xReverse = false;
-	/** @type {boolean|undefined} [yReverse=true] Reverse the default y range. By default this is set dynamically and will be `true` – setting the range to `[height, 0]` – unless the `yScale` has a `.bandwidth` method. Dynamic behavior is overridden if the user sets the prop. Ignored if you set the `yRange` prop. */
-	export let yReverse = undefined;
-	/** @type {boolean} [zReverse=false] Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. */
-	export let zReverse = false;
-	/** @type {boolean} [rReverse=false] Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. */
-	export let rReverse = false;
-	/** @type {boolean} [xDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
-	export let xDomainSort = false;
-	/** @type {boolean} [yDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
-	export let yDomainSort = false;
-	/** @type {boolean} [zDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
-	export let zDomainSort = false;
-	/** @type {boolean} [rDomainSort=false] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
-	export let rDomainSort = false;
-	/** @type {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] The amount of padding to put around your chart. It operates like CSS box-sizing: border-box; where values are subtracted from the parent container's width and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563). */
-	export let padding = {};
-
-	/** @type {Array<Object|Array<any>>|undefined} [flatData=data] A flat version of data. */
-	export let flatData = undefined;
-
-	/** @type {Object} custom Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
-	export let custom = {};
-
-	/** @type {boolean} debug Enable debug printing to the console. Useful to inspect your scales and dimensions. */
-	export let debug = false;
-	/** @type {boolean} [verbose=true] Show warnings in the console. */
-	export let verbose = true;
-
 	/**
-	 * Make this reactive
+	 * @typedef {Object} Props
+	 * @property {boolean} [ssr] - Whether this chart should be rendered server side.
+	 * @property {boolean} [pointerEvents] - Whether to allow pointer events via CSS. Set this to `false` to set `pointer-events: none;` on all components, disabling all mouse interaction.
+	 * @property {string} [position] - Determine the positioning of the wrapper div. Set this to `'absolute'` when you want to stack cakes.
+	 * @property {boolean} [percentRange] - If `true`, set all scale ranges to `[0, 100]`. Ranges reversed via `xReverse`, `yReverse`, `zReverse` or `rReverse` props will continue to be reversed as usual.
+	 * @property {number} [width] - Override the automated width.
+	 * @property {number} [height] - Override the automated height.
+	 * @property {number} [containerWidth] - The bound container width.
+	 * @property {number} [containerHeight] - The bound container height.
+	 * @property {Element|undefined} [element] - The .layercake-container `<div>` tag. Useful for bindings.
+	 * @property {string|Function|number|Array<string|Function|number>|undefined} [x] - The x accessor. The key in each row of data that corresponds to the x-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context.
+	 * @property {string|Function|number|Array<string|Function|number>|undefined} [y] - The y accessor. The key in each row of data that corresponds to the y-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context.
+	 * @property {string|Function|number|Array<string|Function|number>|undefined} [z] - The z accessor. The key in each row of data that corresponds to the z-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context.
+	 * @property {string|Function|number|Array<string|Function|number>|undefined} [r] - The r accessor. The key in each row of data that corresponds to the r-field. This can be a string, an accessor function, a number or an array of any combination of those types. This property gets converted to a function when you access it through the context.
+	 * @property {Array<Object>|Object} [data]
+	 * @property {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [xDomain] - Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values.
+	 * @property {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [yDomain] - Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`.  Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values.
+	 * @property {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [zDomain] - Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values.
+	 * @property {[min: number|null, max: number|null]|Array<string|number>|Function|undefined} [rDomain] - Set a min or max. For linear scales, if you want to inherit the value from the data's extent, set that value to `null`. This value can also be an array because sometimes your scales are [piecewise](https://github.com/d3/d3-scale#continuous_domain) or are a list of discrete values such as in [ordinal scales](https://github.com/d3/d3-scale#ordinal-scales), useful for color series. Set it to a function that receives the computed domain and lets you return a modified domain, useful for sorting values.
+	 * @property {boolean|number} [xNice] - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain.
+	 * @property {boolean|number} [yNice] - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain.
+	 * @property {boolean|number} [zNice] - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain.
+	 * @property {boolean} [rNice] - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain.
+	 * @property {[leftPixels: number, rightPixels: number]|undefined} [xPadding] - Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels.
+	 * @property {[leftPixels: number, rightPixels: number]|undefined} [yPadding] - Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels.
+	 * @property {[leftPixels: number, rightPixels: number]|undefined} [zPadding] - Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels.
+	 * @property {[leftPixels: number, rightPixels: number]|undefined} [rPadding] - Assign a pixel value to add to the min or max of the scale. This will increase the scales domain by the scale unit equivalent of the provided pixels.
+	 * @property {Function} [xScale] - The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options.
+	 * @property {Function} [yScale] - The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options.
+	 * @property {Function} [zScale] - The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options.
+	 * @property {Function} [rScale] - The D3 scale that should be used for the x-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options.
+	 * @property {[min: number, max: number]|Function|Array<string|number>|undefined} [xRange] - Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height} [xRange] - Override the default x range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `xReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+	 * @property {[min: number, max: number]|Function|Array<string|number>|undefined} [yRange] - Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height} [yRange] - Override the default y range of `[0, height]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+	 * @property {[min: number, max: number]|Function|Array<string|number>|undefined} [zRange] - Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height} [zRange] - Override the default z range of `[0, width]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+	 * @property {[min: number, max: number]|Function|Array<string|number>|undefined} [rRange] - Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height} [rRange] - Override the default r range of `[1, 25]` by setting an array or function with argument `({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can also be a list of numbers or strings for scales with discrete ranges like [scaleThreshhold](https://github.com/d3/d3-scale#threshold-scales) or [scaleQuantize](https://github.com/d3/d3-scale#quantize-scales).
+	 * @property {boolean} [xReverse] - Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop.
+	 * @property {boolean|undefined} [yReverse] - Reverse the default y range. By default this is set dynamically and will be `true` – setting the range to `[height, 0]` – unless the `yScale` has a `.bandwidth` method. Dynamic behavior is overridden if the user sets the prop. Ignored if you set the `yRange` prop.
+	 * @property {boolean} [zReverse] - Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop.
+	 * @property {boolean} [rReverse] - Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop.
+	 * @property {boolean} [xDomainSort] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted.
+	 * @property {boolean} [yDomainSort] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted.
+	 * @property {boolean} [zDomainSort] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted.
+	 * @property {boolean} [rDomainSort] - Only used when scale is ordinal. Set whether the calculated unique items come back sorted.
+	 * @property {{top?: Number, right?: Number, bottom?: Number, left?: Number}} [padding={}] - The amount of padding to put around your chart. It operates like CSS box-sizing: border-box; where values are subtracted from the parent container's width and height, the same as a [D3 margin convention](https://bl.ocks.org/mbostock/3019563).
+	 * @property {Array<Object|Array<any>>|Object} [flatData] - A flat version of data.
+	 * @property {Object} [custom] - Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants.
+	 * @property {boolean} [debug] - Enable debug printing to the console. Useful to inspect your scales and dimensions.
+	 * @property {boolean} [verbose] - Show warnings in the console.
+	 * @property {import('svelte').Snippet<[any]>} [children]
 	 */
-	$: yReverseValue =
+
+	/** @type {Props} */
+	let {
+		ssr = false,
+		pointerEvents = true,
+		position = 'relative',
+		percentRange = false,
+		width = undefined,
+		height = undefined,
+		containerWidth = $bindable(width || 100),
+		containerHeight = $bindable(height || 100),
+		element = $bindable(undefined),
+		x = undefined,
+		y = undefined,
+		z = undefined,
+		r = undefined,
+		data = [],
+		xDomain = undefined,
+		yDomain = undefined,
+		zDomain = undefined,
+		rDomain = undefined,
+		xNice = false,
+		yNice = false,
+		zNice = false,
+		rNice = false,
+		xPadding = undefined,
+		yPadding = undefined,
+		zPadding = undefined,
+		rPadding = undefined,
+		xScale = defaultScales.x,
+		yScale = defaultScales.y,
+		zScale = defaultScales.z,
+		rScale = defaultScales.r,
+		xRange = undefined,
+		yRange = undefined,
+		zRange = undefined,
+		rRange = undefined,
+		xReverse = false,
+		yReverse = undefined,
+		zReverse = false,
+		rReverse = false,
+		xDomainSort = false,
+		yDomainSort = false,
+		zDomainSort = false,
+		rDomainSort = false,
+		padding = {},
+		flatData = data,
+		custom = {},
+		debug = false,
+		verbose = true,
+		children
+	} = $props();
+
+	let yReverseValue = $derived(
 		typeof yReverse === 'undefined'
-			? typeof yScale.bandwidth === 'function'
+			? // TODO revise types of {x,y,z,r}Scale parameters
+				// @ts-ignore
+				typeof yScale?.bandwidth === 'function'
 				? false
 				: true
-			: yReverse;
+			: yReverse
+	);
 
 	/* --------------------------------------------
 	 * Keep track of whether the component has mounted
@@ -159,161 +160,81 @@
 	 * Add the active keys since those aren't on our settings object.
 	 * This is mostly an escape-hatch
 	 */
-	const config = {};
-	$: if (x) config.x = x;
-	$: if (y) config.y = y;
-	$: if (z) config.z = z;
-	$: if (r) config.r = r;
-	$: if (xDomain) config.xDomain = xDomain;
-	$: if (yDomain) config.yDomain = yDomain;
-	$: if (zDomain) config.zDomain = zDomain;
-	$: if (rDomain) config.rDomain = rDomain;
-	$: if (xRange) config.xRange = xRange;
-	$: if (yRange) config.yRange = yRange;
-	$: if (zRange) config.zRange = zRange;
-	$: if (rRange) config.rRange = rRange;
-
-	/* --------------------------------------------
-	 * Make store versions of each parameter
-	 * Prefix these with `_` to keep things organized
-	 */
-	const _percentRange = writable(percentRange);
-	const _containerWidth = writable(containerWidth);
-	const _containerHeight = writable(containerHeight);
-	const _data = writable(data);
-	const _flatData = writable(flatData || data);
-	const _padding = writable(padding);
-	const _x = writable(makeAccessor(x));
-	const _y = writable(makeAccessor(y));
-	const _z = writable(makeAccessor(z));
-	const _r = writable(makeAccessor(r));
-	const _xDomain = writable(xDomain);
-	const _yDomain = writable(yDomain);
-	const _zDomain = writable(zDomain);
-	const _rDomain = writable(rDomain);
-	const _xNice = writable(xNice);
-	const _yNice = writable(yNice);
-	const _zNice = writable(zNice);
-	const _rNice = writable(rNice);
-	const _xReverse = writable(xReverse);
-	const _yReverse = writable(yReverseValue);
-	const _zReverse = writable(zReverse);
-	const _rReverse = writable(rReverse);
-	const _xPadding = writable(xPadding);
-	const _yPadding = writable(yPadding);
-	const _zPadding = writable(zPadding);
-	const _rPadding = writable(rPadding);
-	const _xRange = writable(xRange);
-	const _yRange = writable(yRange);
-	const _zRange = writable(zRange);
-	const _rRange = writable(rRange);
-	const _xScale = writable(xScale);
-	const _yScale = writable(yScale);
-	const _zScale = writable(zScale);
-	const _rScale = writable(rScale);
-	const _xDomainSort = writable(xDomainSort);
-	const _yDomainSort = writable(yDomainSort);
-	const _zDomainSort = writable(zDomainSort);
-	const _rDomainSort = writable(rDomainSort);
-	const _config = writable(config);
-	const _custom = writable(custom);
-
-	$: $_percentRange = percentRange;
-	$: $_containerWidth = containerWidth;
-	$: $_containerHeight = containerHeight;
-	$: $_data = data;
-	$: $_flatData = flatData || data;
-	$: $_padding = padding;
-	$: $_x = makeAccessor(x);
-	$: $_y = makeAccessor(y);
-	$: $_z = makeAccessor(z);
-	$: $_r = makeAccessor(r);
-	$: $_xDomain = xDomain;
-	$: $_yDomain = yDomain;
-	$: $_zDomain = zDomain;
-	$: $_rDomain = rDomain;
-	$: $_xNice = xNice;
-	$: $_yNice = yNice;
-	$: $_zNice = zNice;
-	$: $_rNice = rNice;
-	$: $_xReverse = xReverse;
-	$: $_yReverse = yReverseValue;
-	$: $_zReverse = zReverse;
-	$: $_rReverse = rReverse;
-	$: $_xPadding = xPadding;
-	$: $_yPadding = yPadding;
-	$: $_zPadding = zPadding;
-	$: $_rPadding = rPadding;
-	$: $_xRange = xRange;
-	$: $_yRange = yRange;
-	$: $_zRange = zRange;
-	$: $_rRange = rRange;
-	$: $_xScale = xScale;
-	$: $_yScale = yScale;
-	$: $_zScale = zScale;
-	$: $_rScale = rScale;
-	$: $_custom = custom;
-	$: $_config = config;
+	const config = $derived.by(() => {
+		const obj = {};
+		if (x) obj.x = x;
+		if (y) obj.y = y;
+		if (z) obj.z = z;
+		if (r) obj.r = r;
+		if (xDomain) obj.xDomain = xDomain;
+		if (yDomain) obj.yDomain = yDomain;
+		if (zDomain) obj.zDomain = zDomain;
+		if (rDomain) obj.rDomain = rDomain;
+		if (xRange) obj.xRange = xRange;
+		if (yRange) obj.yRange = yRange;
+		if (zRange) obj.zRange = zRange;
+		if (rRange) obj.rRange = rRange;
+		return obj;
+	});
 
 	/* --------------------------------------------
 	 * Create derived values
 	 * Suffix these with `_d`
 	 */
-	const activeGetters_d = derived([_x, _y, _z, _r], ([$x, $y, $z, $r]) => {
+
+	let x_d = $derived(x ? makeAccessor(x) : undefined);
+	let y_d = $derived(y ? makeAccessor(y) : undefined);
+	let z_d = $derived(z ? makeAccessor(z) : undefined);
+	let r_d = $derived(r ? makeAccessor(r) : undefined);
+
+	let activeGetters_d = $derived.by(() => {
 		const obj = {};
-		if ($x) {
-			obj.x = $x;
+		if (x) {
+			obj.x = x_d;
 		}
-		if ($y) {
-			obj.y = $y;
+		if (y) {
+			obj.y = y_d;
 		}
-		if ($z) {
-			obj.z = $z;
+		if (z) {
+			obj.z = z_d;
 		}
-		if ($r) {
-			obj.r = $r;
+		if (r) {
+			obj.r = r_d;
 		}
 		return obj;
 	});
 
-	const padding_d = derived([_padding, _containerWidth, _containerHeight], ([$padding]) => {
+	let padding_d = $derived.by(() => {
 		const defaultPadding = { top: 0, right: 0, bottom: 0, left: 0 };
-		return Object.assign(defaultPadding, $padding);
+		return Object.assign(defaultPadding, padding);
 	});
 
-	const box_d = derived(
-		[_containerWidth, _containerHeight, padding_d],
-		([$containerWidth, $containerHeight, $padding]) => {
-			const b = {};
-			b.top = $padding.top;
-			b.right = $containerWidth - $padding.right;
-			b.bottom = $containerHeight - $padding.bottom;
-			b.left = $padding.left;
-			b.width = b.right - b.left;
-			b.height = b.bottom - b.top;
-			if (verbose === true) {
-				if (b.width <= 0 && isMounted === true) {
-					console.warn(
-						'[LayerCake] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
-					);
-				}
-				if (b.height <= 0 && isMounted === true) {
-					console.warn(
-						'[LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
-					);
-				}
+	let box_d = $derived.by(() => {
+		const b = {};
+		b.top = padding_d.top;
+		b.right = containerWidth - padding_d.right;
+		b.bottom = containerHeight - padding_d.bottom;
+		b.left = padding_d.left;
+		b.width = b.right - b.left;
+		b.height = b.bottom - b.top;
+		if (verbose === true) {
+			if (b.width <= 0 && isMounted === true) {
+				console.warn(
+					'[LayerCake] Target div has zero or negative width. Did you forget to set an explicit width in CSS on the container?'
+				);
+			}
+			if (b.height <= 0 && isMounted === true) {
+				console.warn(
+					'[LayerCake] Target div has zero or negative height. Did you forget to set an explicit height in CSS on the container?'
+				);
 			}
-			return b;
 		}
-	);
-
-	const width_d = derived([box_d], ([$box]) => {
-		return $box.width;
+		return b;
 	});
 
-	const height_d = derived([box_d], ([$box]) => {
-		return $box.height;
-	});
+	let width_d = $derived(box_d.width);
+
+	let height_d = $derived(box_d.height);
 
 	/* --------------------------------------------
 	 * Calculate extents by taking the extent of the data
@@ -321,229 +242,295 @@
 	 * Note that this is different from an "extent" passed
 	 * in as a domain, which can be a partial domain
 	 */
-	const extents_d = derived(
-		[
-			_flatData,
-			activeGetters_d,
-			_xScale,
-			_yScale,
-			_rScale,
-			_zScale,
-			_xDomain,
-			_yDomain,
-			_zDomain,
-			_rDomain,
-			_xDomainSort,
-			_yDomainSort,
-			_zDomainSort,
-			_rDomainSort
-		],
-		([
-			$flatData,
-			$activeGetters,
-			$_xScale,
-			$_yScale,
-			$_rScale,
-			$_zScale,
-			$xDomain,
-			$yDomain,
-			$zDomain,
-			$rDomain,
-			$_xDomainSort,
-			$_yDomainSort,
-			$_zDomainSort,
-			$_rDomainSort
-		]) => {
-			const scaleLookup = {
-				x: { scale: $_xScale, sort: $_xDomainSort },
-				y: { scale: $_yScale, sort: $_yDomainSort },
-				r: { scale: $_rScale, sort: $_rDomainSort },
-				z: { scale: $_zScale, sort: $_zDomainSort }
-			};
-
-			/**
-			 * Skip any extents that the user already set a min and max for
-			 */
-			const extents = Object.fromEntries(
-				[
-					['x', getCompleteDomain($xDomain)],
-					['y', getCompleteDomain($yDomain)],
-					['z', getCompleteDomain($zDomain)],
-					['r', getCompleteDomain($rDomain)]
-				].filter(([_, v]) => v !== false)
-			);
-
-			const getters = filterObject($activeGetters, extents);
-			const activeScales = Object.fromEntries(Object.keys(getters).map(k => [k, scaleLookup[k]]));
-
-			if (Object.keys(getters).length > 0) {
-				const calculatedExtents = calcScaleExtents($flatData, getters, activeScales);
-				return { ...calculatedExtents, ...extents };
-			} else {
-				return extents;
-			}
+	let extents_d = $derived.by(() => {
+		const scaleLookup = {
+			x: { scale: xScale, sort: xDomainSort },
+			y: { scale: yScale, sort: yDomainSort },
+			r: { scale: rScale, sort: rDomainSort },
+			z: { scale: zScale, sort: zDomainSort }
+		};
+
+		/**
+		 * Skip any extents that the user already set a min and max for
+		 */
+		const extents = Object.fromEntries(
+			[
+				['x', getCompleteDomain(xDomain)],
+				['y', getCompleteDomain(yDomain)],
+				['z', getCompleteDomain(zDomain)],
+				['r', getCompleteDomain(rDomain)]
+			].filter(([_, v]) => v !== false)
+		);
+
+		const getters = filterObject(activeGetters_d, extents);
+		const activeScales = Object.fromEntries(Object.keys(getters).map(k => [k, scaleLookup[k]]));
+
+		if (Object.keys(getters).length > 0) {
+			const calculatedExtents = calcScaleExtents(flatData, getters, activeScales);
+			return { ...calculatedExtents, ...extents };
+		} else {
+			return extents;
 		}
-	);
+	});
 
-	const xDomain_d = derived([extents_d, _xDomain], calcDomain('x'));
-	const yDomain_d = derived([extents_d, _yDomain], calcDomain('y'));
-	const zDomain_d = derived([extents_d, _zDomain], calcDomain('z'));
-	const rDomain_d = derived([extents_d, _rDomain], calcDomain('r'));
+	let xDomain_d = $derived(calcDomain('x', extents_d, xDomain));
+	let yDomain_d = $derived(calcDomain('y', extents_d, yDomain));
+	let zDomain_d = $derived(calcDomain('z', extents_d, zDomain));
+	let rDomain_d = $derived(calcDomain('r', extents_d, rDomain));
 
-	const xScale_d = derived(
-		[
-			_xScale,
+	let xScale_d = $derived(
+		createScale(
+			'x',
+			xScale,
 			extents_d,
 			xDomain_d,
-			_xPadding,
-			_xNice,
-			_xReverse,
+			xPadding,
+			xNice,
+			xReverse,
 			width_d,
 			height_d,
-			_xRange,
-			_percentRange
-		],
-		createScale('x')
+			xRange,
+			percentRange
+		)
 	);
-	const xGet_d = derived([_x, xScale_d], createGetter);
 
-	const yScale_d = derived(
-		[
-			_yScale,
+	const xGet_d = $derived(createGetter(x_d, xScale_d));
+
+	const yScale_d = $derived(
+		createScale(
+			'y',
+			yScale,
 			extents_d,
 			yDomain_d,
-			_yPadding,
-			_yNice,
-			_yReverse,
+			yPadding,
+			yNice,
+			yReverseValue,
 			width_d,
 			height_d,
-			_yRange,
-			_percentRange
-		],
-		createScale('y')
+			yRange,
+			percentRange
+		)
 	);
-	const yGet_d = derived([_y, yScale_d], createGetter);
+	const yGet_d = $derived(createGetter(y_d, yScale_d));
 
-	const zScale_d = derived(
-		[
-			_zScale,
+	const zScale_d = $derived(
+		createScale(
+			'z',
+			zScale,
 			extents_d,
 			zDomain_d,
-			_zPadding,
-			_zNice,
-			_zReverse,
+			zPadding,
+			zNice,
+			zReverse,
 			width_d,
 			height_d,
-			_zRange,
-			_percentRange
-		],
-		createScale('z')
+			zRange,
+			percentRange
+		)
 	);
-	const zGet_d = derived([_z, zScale_d], createGetter);
+	const zGet_d = $derived(createGetter(z_d, zScale_d));
 
-	const rScale_d = derived(
-		[
-			_rScale,
+	const rScale_d = $derived(
+		createScale(
+			'r',
+			rScale,
 			extents_d,
 			rDomain_d,
-			_rPadding,
-			_rNice,
-			_rReverse,
+			rPadding,
+			rNice,
+			rReverse,
 			width_d,
 			height_d,
-			_rRange,
-			_percentRange
-		],
-		createScale('r')
+			rRange,
+			percentRange
+		)
 	);
-	const rGet_d = derived([_r, rScale_d], createGetter);
+	const rGet_d = $derived(createGetter(r_d, rScale_d));
 
 	// Create new _Domains in case we ran `.nice()` over our domain on scale initialization
-	const xDomain_d_possibly_nice = derived(xScale_d, $xScale_d => $xScale_d.domain());
-	const yDomain_d_possibly_nice = derived(yScale_d, $yScale_d => $yScale_d.domain());
-	const zDomain_d_possibly_nice = derived(zScale_d, $zScale_d => $zScale_d.domain());
-	const rDomain_d_possibly_nice = derived(rScale_d, $rScale_d => $rScale_d.domain());
-
-	const xRange_d = derived([xScale_d], getRange);
-	const yRange_d = derived([yScale_d], getRange);
-	const zRange_d = derived([zScale_d], getRange);
-	const rRange_d = derived([rScale_d], getRange);
-
-	const aspectRatio_d = derived([width_d, height_d], ([$width, $height]) => {
-		return $width / $height;
-	});
+	const xDomain_d_possibly_nice = $derived(xScale_d.domain());
+	const yDomain_d_possibly_nice = $derived(yScale_d.domain());
+	const zDomain_d_possibly_nice = $derived(zScale_d.domain());
+	const rDomain_d_possibly_nice = $derived(rScale_d.domain());
+
+	const xRange_d = $derived(getRange(xScale_d));
+	const yRange_d = $derived(getRange(yScale_d));
+	const zRange_d = $derived(getRange(zScale_d));
+	const rRange_d = $derived(getRange(rScale_d));
+
+	const aspectRatio_d = $derived(width_d / height_d);
 
 	const context = {
-		activeGetters: activeGetters_d,
-		width: width_d,
-		height: height_d,
-		percentRange: _percentRange,
-		aspectRatio: aspectRatio_d,
-		containerWidth: _containerWidth,
-		containerHeight: _containerHeight,
-		x: _x,
-		y: _y,
-		z: _z,
-		r: _r,
-		custom: _custom,
-		data: _data,
-		xNice: _xNice,
-		yNice: _yNice,
-		zNice: _zNice,
-		rNice: _rNice,
-		xDomainSort: _xDomainSort,
-		yDomainSort: _yDomainSort,
-		zDomainSort: _zDomainSort,
-		rDomainSort: _rDomainSort,
-		xReverse: _xReverse,
-		yReverse: _yReverse,
-		zReverse: _zReverse,
-		rReverse: _rReverse,
-		xPadding: _xPadding,
-		yPadding: _yPadding,
-		zPadding: _zPadding,
-		rPadding: _rPadding,
-		padding: padding_d,
-		flatData: _flatData,
-		extents: extents_d,
-		xDomain: xDomain_d_possibly_nice,
-		yDomain: yDomain_d_possibly_nice,
-		zDomain: zDomain_d_possibly_nice,
-		rDomain: rDomain_d_possibly_nice,
-		xRange: xRange_d,
-		yRange: yRange_d,
-		zRange: zRange_d,
-		rRange: rRange_d,
-		config: _config,
-		xScale: xScale_d,
-		xGet: xGet_d,
-		yScale: yScale_d,
-		yGet: yGet_d,
-		zScale: zScale_d,
-		zGet: zGet_d,
-		rScale: rScale_d,
-		rGet: rGet_d
+		get activeGetters() {
+			return activeGetters_d;
+		},
+		get width() {
+			return width_d;
+		},
+		get height() {
+			return height_d;
+		},
+		get percentRange() {
+			return percentRange;
+		},
+		get aspectRatio() {
+			return aspectRatio_d;
+		},
+		get containerWidth() {
+			return containerWidth;
+		},
+		get containerHeight() {
+			return containerHeight;
+		},
+		get x() {
+			return x_d;
+		},
+		get y() {
+			return y_d;
+		},
+		get z() {
+			return z_d;
+		},
+		get r() {
+			return r_d;
+		},
+		get custom() {
+			return custom;
+		},
+		get data() {
+			return data;
+		},
+		get xNice() {
+			return xNice;
+		},
+		get yNice() {
+			return yNice;
+		},
+		get zNice() {
+			return zNice;
+		},
+		get rNice() {
+			return rNice;
+		},
+		get xDomainSort() {
+			return xDomainSort;
+		},
+		get yDomainSort() {
+			return yDomainSort;
+		},
+		get zDomainSort() {
+			return zDomainSort;
+		},
+		get rDomainSort() {
+			return rDomainSort;
+		},
+		get xReverse() {
+			return xReverse;
+		},
+		get yReverse() {
+			return yReverse;
+		},
+		get zReverse() {
+			return zReverse;
+		},
+		get rReverse() {
+			return rReverse;
+		},
+		get xPadding() {
+			return xPadding;
+		},
+		get yPadding() {
+			return yPadding;
+		},
+		get zPadding() {
+			return zPadding;
+		},
+		get rPadding() {
+			return rPadding;
+		},
+		get padding() {
+			return padding_d;
+		},
+		get flatData() {
+			return flatData;
+		},
+		get extents() {
+			return extents_d;
+		},
+		get xDomain() {
+			return xDomain_d_possibly_nice;
+		},
+		get yDomain() {
+			return yDomain_d_possibly_nice;
+		},
+		get zDomain() {
+			return zDomain_d_possibly_nice;
+		},
+		get rDomain() {
+			return rDomain_d_possibly_nice;
+		},
+		get xRange() {
+			return xRange_d;
+		},
+		get yRange() {
+			return yRange_d;
+		},
+		get zRange() {
+			return zRange_d;
+		},
+		get rRange() {
+			return rRange_d;
+		},
+		get config() {
+			return config;
+		},
+		get xScale() {
+			return xScale_d;
+		},
+		get xGet() {
+			return xGet_d;
+		},
+		get yScale() {
+			return yScale_d;
+		},
+		get yGet() {
+			return yGet_d;
+		},
+		get zScale() {
+			return zScale_d;
+		},
+		get zGet() {
+			return zGet_d;
+		},
+		get rScale() {
+			return rScale_d;
+		},
+		get rGet() {
+			return rGet_d;
+		}
 	};
 
-	setContext('LayerCake', context);
-
-	$: if ($box_d && debug === true && (ssr === true || typeof window !== 'undefined')) {
-		// Call this as a debounce so that it doesn't get called multiple times as these vars get filled in
-		printDebug_debounced({
-			data: $_data,
-			flatData: typeof flatData !== 'undefined' ? $_flatData : null,
-			boundingBox: $box_d,
-			activeGetters: $activeGetters_d,
-			x: config.x,
-			y: config.y,
-			z: config.z,
-			r: config.r,
-			xScale: $xScale_d,
-			yScale: $yScale_d,
-			zScale: $zScale_d,
-			rScale: $rScale_d
-		});
-	}
+	setLayerCakeContext(context);
+
+	$effect(() => {
+		if (box_d && debug === true && (ssr === true || typeof window !== 'undefined')) {
+			// Call this as a debounce so that it doesn't get called multiple times as these vars get filled in
+			printDebug_debounced({
+				data: data,
+				flatData: typeof flatData !== 'undefined' ? flatData : null,
+				boundingBox: box_d,
+				activeGetters: activeGetters_d,
+				x: config.x,
+				y: config.y,
+				z: config.z,
+				r: config.r,
+				xScale: xScale_d,
+				yScale: yScale_d,
+				zScale: zScale_d,
+				rScale: rScale_d
+			});
+		}
+	});
 </script>
 
 {#if ssr === true || typeof window !== 'undefined'}
@@ -559,58 +546,58 @@
 		bind:clientWidth={containerWidth}
 		bind:clientHeight={containerHeight}
 	>
-		<slot
-			{element}
-			width={$width_d}
-			height={$height_d}
-			aspectRatio={$aspectRatio_d}
-			containerWidth={$_containerWidth}
-			containerHeight={$_containerHeight}
-			activeGetters={$activeGetters_d}
-			percentRange={$_percentRange}
-			x={$_x}
-			y={$_y}
-			z={$_z}
-			r={$_r}
-			custom={$_custom}
-			data={$_data}
-			xNice={$_xNice}
-			yNice={$_yNice}
-			zNice={$_zNice}
-			rNice={$_rNice}
-			xDomainSort={$_xDomainSort}
-			yDomainSort={$_yDomainSort}
-			zDomainSort={$_zDomainSort}
-			rDomainSort={$_rDomainSort}
-			xReverse={$_xReverse}
-			yReverse={$_yReverse}
-			zReverse={$_zReverse}
-			rReverse={$_rReverse}
-			xPadding={$_xPadding}
-			yPadding={$_yPadding}
-			zPadding={$_zPadding}
-			rPadding={$_rPadding}
-			padding={$padding_d}
-			flatData={$_flatData}
-			extents={$extents_d}
-			xDomain={$xDomain_d}
-			yDomain={$yDomain_d}
-			zDomain={$zDomain_d}
-			rDomain={$rDomain_d}
-			xRange={$xRange_d}
-			yRange={$yRange_d}
-			zRange={$zRange_d}
-			rRange={$rRange_d}
-			config={$_config}
-			xScale={$xScale_d}
-			xGet={$xGet_d}
-			yScale={$yScale_d}
-			yGet={$yGet_d}
-			zScale={$zScale_d}
-			zGet={$zGet_d}
-			rScale={$rScale_d}
-			rGet={$rGet_d}
-		/>
+		{@render children?.({
+			element,
+			width: width_d,
+			height: height_d,
+			aspectRatio: aspectRatio_d,
+			containerWidth: containerWidth,
+			containerHeight: containerHeight,
+			activeGetters: activeGetters_d,
+			percentRange: percentRange,
+			x: x,
+			y: y,
+			z: z,
+			r: r,
+			custom: custom,
+			data: data,
+			xNice: xNice,
+			yNice: yNice,
+			zNice: zNice,
+			rNice: rNice,
+			xDomainSort: xDomainSort,
+			yDomainSort: yDomainSort,
+			zDomainSort: zDomainSort,
+			rDomainSort: rDomainSort,
+			xReverse: xReverse,
+			yReverse: yReverse,
+			zReverse: zReverse,
+			rReverse: rReverse,
+			xPadding: xPadding,
+			yPadding: yPadding,
+			zPadding: zPadding,
+			rPadding: rPadding,
+			padding: padding_d,
+			flatData: flatData,
+			extents: extents_d,
+			xDomain: xDomain_d,
+			yDomain: yDomain_d,
+			zDomain: zDomain_d,
+			rDomain: rDomain_d,
+			xRange: xRange_d,
+			yRange: yRange_d,
+			zRange: zRange_d,
+			rRange: rRange_d,
+			config: config,
+			xScale: xScale_d,
+			xGet: xGet_d,
+			yScale: yScale_d,
+			yGet: yGet_d,
+			zScale: zScale_d,
+			zGet: zGet_d,
+			rScale: rScale_d,
+			rGet: rGet_d
+		})}
 	</div>
 {/if}
 
diff --git a/src/lib/context.ts b/src/lib/context.ts
new file mode 100644
index 00000000..0c9dc795
--- /dev/null
+++ b/src/lib/context.ts
@@ -0,0 +1,60 @@
+import { createContext } from 'svelte';
+
+interface LayerCakeContext {
+	activeGetters: {
+		x?: Function | null | undefined;
+		y?: Function | null | undefined;
+		z?: Function | null | undefined;
+		r?: Function | null | undefined;
+	};
+	width: number;
+	height: number;
+	percentRange: boolean;
+	aspectRatio: number;
+	containerWidth: number;
+	containerHeight: number;
+	x: Function | null | undefined;
+	y: Function | null | undefined;
+	z: Function | null | undefined;
+	r: Function | null | undefined;
+	custom: {};
+	data: {} | Array<{}>;
+	xNice: number | boolean;
+	yNice: number | boolean;
+	zNice: number | boolean;
+	rNice: number | boolean;
+	xDomainSort: boolean;
+	yDomainSort: boolean;
+	zDomainSort: boolean;
+	rDomainSort: boolean;
+	xReverse: boolean;
+	yReverse: boolean | undefined;
+	zReverse: boolean;
+	rReverse: boolean;
+	xPadding: [leftPixels: number, rightPixels: number] | undefined;
+	yPadding: [leftPixels: number, rightPixels: number] | undefined;
+	zPadding: [leftPixels: number, rightPixels: number] | undefined;
+	rPadding: [leftPixels: number, rightPixels: number] | undefined;
+	padding: { top: number; right: number; bottom: number; left: number };
+	flatData: {} | Array<{} | any>;
+	extents: {};
+	xDomain: any;
+	yDomain: any;
+	zDomain: any;
+	rDomain: any;
+	xRange: any;
+	yRange: any;
+	zRange: any;
+	rRange: any;
+	config: {};
+	xScale: any;
+	yScale: any;
+	zScale: any;
+	rScale: any;
+	xGet: any;
+	yGet: any;
+	zGet: any;
+	rGet: any;
+}
+
+export const [getLayerCakeContext, setLayerCakeContext] = createContext<LayerCakeContext>();
diff --git a/src/lib/helpers/calcDomain.js b/src/lib/helpers/calcDomain.js
index 21c4b872..38168b1f 100644
--- a/src/lib/helpers/calcDomain.js
+++ b/src/lib/helpers/calcDomain.js
@@ -1,10 +1,8 @@
 import partialDomain from '../utils/partialDomain.js';
 
-export default function calcDomain(s) {
-	return function domainCalc([$extents, $domain]) {
-		if (typeof $domain === 'function') {
-			$domain = $domain($extents[s]);
-		}
-		return $extents ? partialDomain($extents[s], $domain) : $domain;
-	};
+export default function calcDomain(s, extents, domain) {
+	if (typeof domain === 'function') {
+		domain = domain(extents[s]);
+	}
+	return extents ? partialDomain(extents[s], domain) : domain;
 }
diff --git a/src/lib/helpers/createGetter.js b/src/lib/helpers/createGetter.js
index 871fac0b..9f81bf20 100644
--- a/src/lib/helpers/createGetter.js
+++ b/src/lib/helpers/createGetter.js
@@ -1,9 +1,9 @@
-export default function createGetter([$acc, $scale]) {
+export default function createGetter(acc, scale) {
 	return (d, i) => {
-		const val = $acc(d, i);
+		const val = acc(d, i);
 		if (Array.isArray(val)) {
-			return val.map(v => $scale(v));
+			return val.map(v => scale(v));
 		}
-		return $scale(val);
+		return scale(val);
 	};
 }
diff --git a/src/lib/helpers/createScale.js b/src/lib/helpers/createScale.js
index cbd2097d..a7e0fa00 100644
--- a/src/lib/helpers/createScale.js
+++ b/src/lib/helpers/createScale.js
@@ -2,59 +2,61 @@ import defaultScales from '../settings/defaultScales.js';
 import padScale from '../utils/padScale.js';
 import getDefaultRange from '../settings/getDefaultRange.js';
 
-export default function createScale(s) {
-	return function scaleCreator([
-		$scale,
-		$extents,
-		$domain,
-		$padding,
-		$nice,
-		$reverse,
-		$width,
-		$height,
-		$range,
-		$percentScale
-	]) {
-		if ($extents === null) {
-			return null;
+export default function createScale(
+	s,
+	scaleInstanceOrFunction,
+	extents,
+	domain,
+	padding,
+	nice,
+	reverse,
+	width,
+	height,
+	range,
+	percentScale
+) {
+	if (extents === null) {
+		return null;
+	}
+
+	const defaultRange = getDefaultRange(s, width, height, reverse, range, percentScale);
+
+	const scale =
+		scaleInstanceOrFunction === defaultScales[s]
+			? scaleInstanceOrFunction()
+			: scaleInstanceOrFunction.copy();
+
+	/* --------------------------------------------
+	 * Set the domain
+	 */
+	scale.domain(domain);
+
+	/* --------------------------------------------
+	 * Set the range of the scale to our default if
+	 * the scale doesn't have an interpolator function
+	 * or if it does, still set the range if that function
+	 * is the default identity function
+	 */
+	if (
+		!scale.interpolator ||
+		(typeof scale.interpolator === 'function' && scale.interpolator().name.startsWith('identity'))
+	) {
+		scale.range(defaultRange);
+	}
+
+	if (padding) {
+		scale.domain(padScale(scale, padding));
+	}
+
+	if (nice === true || typeof nice === 'number') {
+		if (typeof scale.nice === 'function') {
+			scale.nice(typeof nice === 'number' ? nice : undefined);
+		} else {
+			console.error(
+				`[Layer Cake] You set \`${s}Nice: true\` but the ${s}Scale does not have a \`.nice\` method. Ignoring...`
+			);
 		}
+	}
 
-		const defaultRange = getDefaultRange(s, $width, $height, $reverse, $range, $percentScale);
-
-		const scale = $scale === defaultScales[s] ? $scale() : $scale.copy();
-
-		/* --------------------------------------------
-		 * Set the domain
-		 */
-		scale.domain($domain);
-
-		/* --------------------------------------------
-		 * Set the range of the scale to our default if
-		 * the scale doesn't have an interpolator function
-		 * or if it does, still set the range if that function
-		 * is the default identity function
-		 */
-		if (
-			!scale.interpolator ||
-			(typeof scale.interpolator === 'function' && scale.interpolator().name.startsWith('identity'))
-		) {
-			scale.range(defaultRange);
-		}
-
-		if ($padding) {
-			scale.domain(padScale(scale, $padding));
-		}
-
-		if ($nice === true || typeof $nice === 'number') {
-			if (typeof scale.nice === 'function') {
-				scale.nice(typeof $nice === 'number' ? $nice : undefined);
-			} else {
-				console.error(
-					`[Layer Cake] You set \`${s}Nice: true\` but the ${s}Scale does not have a \`.nice\` method. Ignoring...`
-				);
-			}
-		}
-
-		return scale;
-	};
+	return scale;
 }
diff --git a/src/lib/helpers/getRange.js b/src/lib/helpers/getRange.js
index 9f2c78f1..d4ba48b2 100644
--- a/src/lib/helpers/getRange.js
+++ b/src/lib/helpers/getRange.js
@@ -1,7 +1,7 @@
-export default function getRange([$scale]) {
-	if (typeof $scale === 'function') {
-		if (typeof $scale.range === 'function') {
-			return $scale.range();
+export default function getRange(scale) {
+	if (typeof scale === 'function') {
+		if (typeof scale.range === 'function') {
+			return scale.range();
 		}
 		console.error("[LayerCake] Your scale doesn't have a `.range` method?");
 	}
diff --git a/src/lib/index.js b/src/lib/index.js
index 541a8641..8fac32a3 100644
--- a/src/lib/index.js
+++ b/src/lib/index.js
@@ -1,4 +1,5 @@
 export { default as LayerCake } from './LayerCake.svelte';
+export { getLayerCakeContext } from './context';
 export { default as Html } from './layouts/Html.svelte';
 export { default as Svg } from './layouts/Svg.svelte';
 export { default as ScaledSvg } from './layouts/ScaledSvg.svelte';
diff --git a/src/lib/layouts/Canvas.svelte b/src/lib/layouts/Canvas.svelte
index f5ca8deb..d0a4f452 100644
--- a/src/lib/layouts/Canvas.svelte
+++ b/src/lib/layouts/Canvas.svelte
@@ -3,11 +3,12 @@
 	Canvas layout component
  -->
 <script>
-	import { getContext, onMount, setContext } from 'svelte';
+	import { onMount, setContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { writable } from 'svelte/store';
 	import scaleCanvas from '../lib/scaleCanvas.js';
 
-	const { width, height, padding } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -47,7 +48,7 @@
 		if (element) {
 			context = element.getContext('2d');
 			if (context) {
-				scaleCanvas(context, $width, $height);
+				scaleCanvas(context, c.width, c.height);
 				cntxt.ctx.set(context);
 			}
 		}
@@ -59,10 +60,10 @@
 	class="layercake-layout-canvas"
 	style:z-index={zIndex}
 	style:pointer-events={pointerEvents === false ? 'none' : null}
-	style:top={$padding.top + 'px'}
-	style:right={$padding.right + 'px'}
-	style:bottom={$padding.bottom + 'px'}
-	style:left={$padding.left + 'px'}
+	style:top={c.padding.top + 'px'}
+	style:right={c.padding.right + 'px'}
+	style:bottom={c.padding.bottom + 'px'}
+	style:left={c.padding.left + 'px'}
 	style="width:100%;height:100%;position:absolute;"
 	aria-label={label}
 	aria-labelledby={labelledBy}
diff --git a/src/lib/layouts/Html.svelte b/src/lib/layouts/Html.svelte
index 4bdf34cc..bf9f3348 100644
--- a/src/lib/layouts/Html.svelte
+++ b/src/lib/layouts/Html.svelte
@@ -3,9 +3,9 @@
 	HTML layout component
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { padding } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -41,10 +41,10 @@
 	class="layercake-layout-html"
 	style:z-index={zIndex}
 	style:pointer-events={pointerEvents === false ? 'none' : null}
-	style:top={$padding.top + 'px'}
-	style:right={$padding.right + 'px'}
-	style:bottom={$padding.bottom + 'px'}
-	style:left={$padding.left + 'px'}
+	style:top={c.padding.top + 'px'}
+	style:right={c.padding.right + 'px'}
+	style:bottom={c.padding.bottom + 'px'}
+	style:left={c.padding.left + 'px'}
 	role={roleVal}
 	aria-label={label}
 	aria-labelledby={labelledBy}
diff --git a/src/lib/layouts/ScaledSvg.svelte b/src/lib/layouts/ScaledSvg.svelte
index 6b0be2b1..f269e630 100644
--- a/src/lib/layouts/ScaledSvg.svelte
+++ b/src/lib/layouts/ScaledSvg.svelte
@@ -3,9 +3,9 @@
 	Scaled SVG layout component
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
-	const { padding } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @typedef {Object} Props
@@ -48,10 +48,10 @@
 	preserveAspectRatio="none"
 	style:z-index={zIndex}
 	style:pointer-events={pointerEvents === false ? 'none' : null}
-	style:top={$padding.top + 'px'}
-	style:left={$padding.left + 'px'}
-	style:width={`calc(100% - ${$padding.left + $padding.right}px)`}
-	style:height={`calc(100% - ${$padding.top + $padding.bottom}px)`}
+	style:top={c.padding.top + 'px'}
+	style:left={c.padding.left + 'px'}
+	style:width={`calc(100% - ${c.padding.left + c.padding.right}px)`}
+	style:height={`calc(100% - ${c.padding.top + c.padding.bottom}px)`}
 	style="right:0px; bottom:0px;"
 	style:overflow
 	aria-label={label}
diff --git a/src/lib/layouts/Svg.svelte b/src/lib/layouts/Svg.svelte
index 3d741b7a..350336fe 100644
--- a/src/lib/layouts/Svg.svelte
+++ b/src/lib/layouts/Svg.svelte
@@ -3,7 +3,7 @@
 	SVG layout component
  -->
 <script>
-	import { getContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 
 	/**
 	 * @typedef {Object} Props
@@ -37,21 +37,21 @@
 		children
 	} = $props();
 
-	const { containerWidth, containerHeight, padding } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 </script>
 
 <svg
 	bind:this={element}
 	class="layercake-layout-svg"
 	{viewBox}
-	width={$containerWidth}
-	height={$containerHeight}
+	width={c.containerWidth}
+	height={c.containerHeight}
 	style:z-index={zIndex}
 	style:pointer-events={pointerEvents === false ? 'none' : null}
-	style:top={$padding.top + 'px'}
-	style:left={$padding.left + 'px'}
-	style:width={`calc(100% - ${$padding.left + $padding.right}px)`}
-	style:height={`calc(100% - ${$padding.top + $padding.bottom}px)`}
+	style:top={c.padding.top + 'px'}
+	style:left={c.padding.left + 'px'}
+	style:width={`calc(100% - ${c.padding.left + c.padding.right}px)`}
+	style:height={`calc(100% - ${c.padding.top + c.padding.bottom}px)`}
 	style:overflow
 	aria-label={label}
 	aria-labelledby={labelledBy}
diff --git a/src/lib/layouts/Webgl.svelte b/src/lib/layouts/Webgl.svelte
index fa1adb23..18876b6d 100644
--- a/src/lib/layouts/Webgl.svelte
+++ b/src/lib/layouts/Webgl.svelte
@@ -3,7 +3,8 @@
 	WebGL layout component
  -->
 <script>
-	import { getContext, onMount, setContext } from 'svelte';
+	import { onMount, setContext } from 'svelte';
+	import { getLayerCakeContext } from 'layercake';
 	import { writable } from 'svelte/store';
 
 	/**
@@ -36,7 +37,7 @@
 
 	let testGl;
 
-	const { padding } = getContext('LayerCake');
+	const c = getLayerCakeContext();
 
 	/**
 	 * @type {{ gl: import('svelte/store').Writable<WebGLRenderingContext|null> }}
@@ -70,10 +71,10 @@
 	class="layercake-layout-webgl"
 	style:z-index={zIndex}
 	style:pointer-events={pointerEvents === false ? 'none' : null}
-	style:top={$padding.top + 'px'}
-	style:right={$padding.right + 'px'}
-	style:bottom={$padding.bottom + 'px'}
-	style:left={$padding.left + 'px'}
+	style:top={c.padding.top + 'px'}
+	style:right={c.padding.right + 'px'}
+	style:bottom={c.padding.bottom + 'px'}
+	style:left={c.padding.left + 'px'}
 	style="width:100%;height:100%;position:absolute;"
 	aria-label={label}
 	aria-labelledby={labelledBy}
diff --git a/src/routes/components/+page.svelte b/src/routes/components/+page.svelte
index b72c1494..1598ed1d 100644
--- a/src/routes/components/+page.svelte
+++ b/src/routes/components/+page.svelte
@@ -32,24 +32,26 @@
 		return parts;
 	}
 
-	const componentGroups = svelteComponents.map(/** @param {ComponentGroup} d */ d => {
-		return {
-			name: `${d.name.replace(/^\w/, /** @param {string} w */ w => w.toUpperCase())} components`,
-			components: sortBy(d.components, 'slug').map(
-				/** @param {ComponentEntry} args */
-				({ name, slug, component }) => {
-					const classes = getClasses(slug);
-					return {
-						name,
-						slug,
-						component,
-						classes,
-						group: classes.filter(/** @param {string} d */ d => d !== 'percent-range')[0]
-					};
-				}
-			)
-		};
-	});
+	const componentGroups = svelteComponents.map(
+		/** @param {ComponentGroup} d */ d => {
+			return {
+				name: `${d.name.replace(/^\w/, /** @param {string} w */ w => w.toUpperCase())} components`,
+				components: sortBy(d.components, 'slug').map(
+					/** @param {ComponentEntry} args */
+					({ name, slug, component }) => {
+						const classes = getClasses(slug);
+						return {
+							name,
+							slug,
+							component,
+							classes,
+							group: classes.filter(/** @param {string} d */ d => d !== 'percent-range')[0]
+						};
+					}
+				)
+			};
+		}
+	);
 
 	/** @param {string} name */
 	function formatName(name) {
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml
index 91aa1284..87e57b6f 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AnnotationsData-html-svelte-1.aria.yml
@@ -21,12 +21,12 @@
         - code: d => d.text
       - cell "no"
       - cell "An accessor function to get the field to display."
-    - row "pr boolean $percentRange no If true will set the top and left CSS positions to percentages instead of pixels.":
+    - row "pr boolean c.percentRange no If true will set the top and left CSS positions to percentages instead of pixels.":
       - cell "pr boolean":
         - strong: pr
         - code: boolean
-      - cell "$percentRange":
-        - code: $percentRange
+      - cell "c.percentRange":
+        - code: c.percentRange
       - cell "no"
       - cell "If true will set the top and left CSS positions to percentages instead of pixels.":
         - text: ""
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-percent-range-html-svelte-1.aria.yml
index 7fd447cd..26fa8670 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisX-percent-range-html-svelte-1.aria.yml
@@ -68,10 +68,10 @@
         - code: undefined
       - cell "no"
       - cell "If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
-        - text: ""
+        - text: If this is a number, it passes that along to the
         - link "d3Scale.ticks":
           - /url: https://github.com/d3/d3-scale
-        - text: ""
+        - text: function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.
     - row "tickGutter number 0 no The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).":
       - cell "tickGutter number":
         - strong: tickGutter
@@ -102,7 +102,7 @@
         - text: ""
         - code: dy
         - text: ""
-    - 'row "units (''px'' | ''%'') $percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
+    - 'row "units (''px'' | ''%'') c.percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
       - cell "units ('px' | '%')":
         - strong: units
         - text: ""
@@ -110,8 +110,8 @@
         - text: ""
         - code: "'%'"
         - text: ""
-      - 'cell "$percentRange === true ? ''%'' : ''px''"':
-        - code: "$percentRange === true ? '%' : 'px'"
+      - 'cell "c.percentRange === true ? ''%'' : ''px''"':
+        - code: "c.percentRange === true ? '%' : 'px'"
       - cell "no"
       - 'cell "If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
         - text: ""
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisXTop-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisXTop-percent-range-html-svelte-1.aria.yml
index 7fd447cd..26fa8670 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisXTop-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisXTop-percent-range-html-svelte-1.aria.yml
@@ -68,10 +68,10 @@
         - code: undefined
       - cell "no"
       - cell "If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.":
-        - text: ""
+        - text: If this is a number, it passes that along to the
         - link "d3Scale.ticks":
           - /url: https://github.com/d3/d3-scale
-        - text: ""
+        - text: function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.
     - row "tickGutter number 0 no The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).":
       - cell "tickGutter number":
         - strong: tickGutter
@@ -102,7 +102,7 @@
         - text: ""
         - code: dy
         - text: ""
-    - 'row "units (''px'' | ''%'') $percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
+    - 'row "units (''px'' | ''%'') c.percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
       - cell "units ('px' | '%')":
         - strong: units
         - text: ""
@@ -110,8 +110,8 @@
         - text: ""
         - code: "'%'"
         - text: ""
-      - 'cell "$percentRange === true ? ''%'' : ''px''"':
-        - code: "$percentRange === true ? '%' : 'px'"
+      - 'cell "c.percentRange === true ? ''%'' : ''px''"':
+        - code: "c.percentRange === true ? '%' : 'px'"
       - cell "no"
       - 'cell "If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
         - text: ""
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisY-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisY-percent-range-html-svelte-1.aria.yml
index 3ee2f055..b845498d 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisY-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisY-percent-range-html-svelte-1.aria.yml
@@ -68,10 +68,10 @@
         - code: "4"
       - cell "no"
       - cell "If this is a number, it passes that along to the d3Scale.ticks function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.":
-        - text: ""
+        - text: If this is a number, it passes that along to the
         - link "d3Scale.ticks":
           - /url: https://github.com/d3/d3-scale
-        - text: ""
+        - text: function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
     - row "tickGutter number 0 no The amount of whitespace between the start of the tick and the chart drawing area (the xRange min).":
       - cell "tickGutter number":
         - strong: tickGutter
@@ -113,7 +113,7 @@
         - text: ""
         - code: tickMarkLength
         - text: ""
-    - 'row "units (''px'' | ''%'') $percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
+    - 'row "units (''px'' | ''%'') c.percentRange === true ? ''%'' : ''px'' no If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
       - cell "units ('px' | '%')":
         - strong: units
         - text: ""
@@ -121,8 +121,8 @@
         - text: ""
         - code: "'%'"
         - text: ""
-      - 'cell "$percentRange === true ? ''%'' : ''px''"':
-        - code: "$percentRange === true ? '%' : 'px'"
+      - 'cell "c.percentRange === true ? ''%'' : ''px''"':
+        - code: "c.percentRange === true ? '%' : 'px'"
       - cell "no"
       - 'cell "If percentRange={true} it defaults to ''%'', otherwise, the default is ''px''. Options: ''%'' or ''px''"':
         - text: ""
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisYRight-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisYRight-percent-range-html-svelte-1.aria.yml
index 01dd7e64..2b33f413 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisYRight-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-AxisYRight-percent-range-html-svelte-1.aria.yml
@@ -113,7 +113,7 @@
         - text: ""
         - code: tickMarkLength
         - text: ""
-    - 'row "units (''px'' | ''%'') $percentRange === true ? ''%'' : ''px'' no Whether this component should use percentage or pixel values. If percentRange={true} it defaults to ''%''."':
+    - 'row "units (''px'' | ''%'') c.percentRange === true ? ''%'' : ''px'' no Whether this component should use percentage or pixel values. If percentRange={true} it defaults to ''%''."':
       - cell "units ('px' | '%')":
         - strong: units
         - text: ""
@@ -121,8 +121,8 @@
         - text: ""
         - code: "'%'"
         - text: ""
-      - 'cell "$percentRange === true ? ''%'' : ''px''"':
-        - code: "$percentRange === true ? '%' : 'px'"
+      - 'cell "c.percentRange === true ? ''%'' : ''px''"':
+        - code: "c.percentRange === true ? '%' : 'px'"
       - cell "no"
       - 'cell "Whether this component should use percentage or pixel values. If percentRange={true} it defaults to ''%''."':
         - text: ""
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-canvas-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-canvas-svelte-1.aria.yml
index 24c98b0c..d9a99a53 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-canvas-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-canvas-svelte-1.aria.yml
@@ -43,7 +43,7 @@
       - cell "None"
       - cell "no"
       - cell "The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set."
-    - row "features (Array<GeoJSON> | undefined) None no A list of GeoJSON features. Use this if you want to draw a subset of the features in $data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in $data.features if left unset.":
+    - row "features (Array<GeoJSON> | undefined) None no A list of GeoJSON features. Use this if you want to draw a subset of the features in c.data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in c.data.features if left unset.":
       - cell "features (Array<GeoJSON> | undefined)":
         - strong: features
         - text: ""
@@ -53,9 +53,9 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of GeoJSON features. Use this if you want to draw a subset of the features in $data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in $data.features if left unset.":
-        - text: ""
-        - code: $data
-        - text: ""
-        - code: $data.features
-        - text: ""
\ No newline at end of file
+      - cell "A list of GeoJSON features. Use this if you want to draw a subset of the features in c.data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in c.data.features if left unset.":
+        - text: A list of GeoJSON features. Use this if you want to draw a subset of the features in
+        - code: c.data
+        - text: while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in
+        - code: c.data.features
+        - text: if left unset.
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-svg-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-svg-svelte-1.aria.yml
index 79752249..2fe7ecb4 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-svg-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-Map-svg-svelte-1.aria.yml
@@ -16,7 +16,7 @@
         - text: ""
         - code: "projection={geoAlbersUsa}"
         - text: ""
-    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
+    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
       - cell "fixedAspectRatio (number | undefined)":
         - strong: fixedAspectRatio
         - text: ""
@@ -26,7 +26,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
+      - cell "By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
     - row "fill (string | undefined) None no The shape's fill color. By default, the fill will be determined by the z-scale, unless this prop is set.":
       - cell "fill (string | undefined)":
         - strong: fill
@@ -54,7 +54,7 @@
         - code: "0.5"
       - cell "no"
       - cell "The shape's stroke width."
-    - row "features (Array<Object> | undefined) None no A list of GeoJSON features. Use this if you want to draw a subset of the features in $data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in $data.features if left unset.":
+    - row "features (Array<Object> | undefined) None no A list of GeoJSON features. Use this if you want to draw a subset of the features in c.data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in c.data.features if left unset.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -64,12 +64,12 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of GeoJSON features. Use this if you want to draw a subset of the features in $data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in $data.features if left unset.":
-        - text: ""
-        - code: $data
-        - text: ""
-        - code: $data.features
-        - text: ""
+      - cell "A list of GeoJSON features. Use this if you want to draw a subset of the features in c.data while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in c.data.features if left unset.":
+        - text: A list of GeoJSON features. Use this if you want to draw a subset of the features in
+        - code: c.data
+        - text: while keeping the zoom on the whole GeoJSON feature set. By default, it plots everything in
+        - code: c.data.features
+        - text: if left unset.
     - 'row "onmousemove (e: MouseEvent, props: Object) => void () => {} no A function that gets called on mousemove events. The first argument is the event, and the second is the properties of the hovered feature."':
       - 'cell "onmousemove (e: MouseEvent, props: Object) => void"':
         - strong: onmousemove
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-html-svelte-1.aria.yml
index a3d27f9d..56d8a272 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-html-svelte-1.aria.yml
@@ -16,7 +16,7 @@
         - text: ""
         - code: "projection={geoAlbersUsa}"
         - text: ""
-    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
+    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
       - cell "fixedAspectRatio (number | undefined)":
         - strong: fixedAspectRatio
         - text: ""
@@ -26,7 +26,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
+      - cell "By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
     - row "getLabel Function None yes An accessor function to get the field to display.":
       - cell "getLabel Function":
         - strong: getLabel
@@ -44,7 +44,7 @@
         - text: ""
         - code: "[x, y]"
         - text: ""
-    - row "features (Array<Object> | undefined) None no A list of labels as GeoJSON features. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+    - row "features (Array<Object> | undefined) None no A list of labels as GeoJSON features. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -54,7 +54,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of labels as GeoJSON features. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+      - cell "A list of labels as GeoJSON features. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
         - text: ""
-        - code: $data.features
+        - code: c.data.features
         - text: ""
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-svg-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-svg-svelte-1.aria.yml
index b8d5d029..309d3476 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-svg-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapLabels-svg-svelte-1.aria.yml
@@ -23,7 +23,7 @@
       - cell "None"
       - cell "yes"
       - cell "An accessor function to get the field to display."
-    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
+    - row "fixedAspectRatio (number | undefined) None no By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here.":
       - cell "fixedAspectRatio (number | undefined)":
         - strong: fixedAspectRatio
         - text: ""
@@ -33,7 +33,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "By default, the map fills to fit the $width and $height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
+      - cell "By default, the map fills to fit the c.width and c.height. If instead you want a fixed-aspect ratio, like for a server-side rendered map, set that here."
     - row "getCoordinates Function None yes An accessor function to get the [x, y] coordinate field. Defaults to a GeoJSON feature format.":
       - cell "getCoordinates Function":
         - strong: getCoordinates
@@ -44,7 +44,7 @@
         - text: ""
         - code: "[x, y]"
         - text: ""
-    - row "features (Array<Object> | undefined) None no A list of labels as GeoJSON features. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+    - row "features (Array<Object> | undefined) None no A list of labels as GeoJSON features. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -54,7 +54,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of labels as GeoJSON features. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+      - cell "A list of labels as GeoJSON features. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
         - text: ""
-        - code: $data.features
+        - code: c.data.features
         - text: ""
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-canvas-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-canvas-svelte-1.aria.yml
index 7c3bf691..5f70ef52 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-canvas-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-canvas-svelte-1.aria.yml
@@ -48,7 +48,7 @@
         - code: "1"
       - cell "no"
       - cell "The point's stroke width."
-    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -58,7 +58,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
         - text: ""
-        - code: $data.features
+        - code: c.data.features
         - text: ""
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-html-svelte-1.aria.yml
index 4209dce3..3dcda8e1 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-html-svelte-1.aria.yml
@@ -56,7 +56,7 @@
         - code: "1"
       - cell "no"
       - cell "The point's opacity."
-    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -66,7 +66,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
         - text: ""
-        - code: $data.features
+        - code: c.data.features
         - text: ""
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-svelte-1.aria.yml
index edd489e6..f90d0592 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-MapPoints-svelte-1.aria.yml
@@ -56,7 +56,7 @@
         - code: "1"
       - cell "no"
       - cell "The point's opacity."
-    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+    - row "features (Array<Object> | undefined) None no A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
       - cell "features (Array<Object> | undefined)":
         - strong: features
         - text: ""
@@ -66,7 +66,7 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in $data.features, assuming this field is a list of GeoJSON features.":
+      - cell "A list of GeoJSON features to plot. If unset, the plotted features will default to those in c.data.features, assuming this field is a list of GeoJSON features.":
         - text: ""
-        - code: $data.features
+        - code: c.data.features
         - text: ""
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-html-svelte-1.aria.yml
index 27b095e5..70fb622f 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-html-svelte-1.aria.yml
@@ -40,7 +40,7 @@
         - text: ""
         - code: undefined
         - text: ""
-    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
+    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
       - cell "dataset (Array<Object> | undefined)":
         - strong: dataset
         - text: ""
@@ -50,4 +50,4 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
+      - cell "The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-percent-range-html-svelte-1.aria.yml
index 27b095e5..70fb622f 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-QuadTree-percent-range-html-svelte-1.aria.yml
@@ -40,7 +40,7 @@
         - text: ""
         - code: undefined
         - text: ""
-    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
+    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
       - cell "dataset (Array<Object> | undefined)":
         - strong: dataset
         - text: ""
@@ -50,4 +50,4 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
+      - cell "The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-html-svelte-1.aria.yml
index 8dd204b3..a927264c 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-html-svelte-1.aria.yml
@@ -6,16 +6,16 @@
       - columnheader "Required"
       - columnheader "Description"
   - rowgroup:
-    - row "formatTitle Function d => d no A function to format the tooltip title, which is $config.x.":
+    - row "formatTitle Function d => d no A function to format the tooltip title, which is c.config.x.":
       - cell "formatTitle Function":
         - strong: formatTitle
         - code: Function
       - cell "d => d":
         - code: d => d
       - cell "no"
-      - cell "A function to format the tooltip title, which is $config.x.":
+      - cell "A function to format the tooltip title, which is c.config.x.":
         - text: ""
-        - code: $config.x
+        - code: c.config.x
         - text: ""
     - 'row "formatValue Function d => (isNaN(+d) ? d : commas(d)) no A function to format the value."':
       - cell "formatValue Function":
@@ -41,7 +41,7 @@
         - code: /-\d+/
       - cell "no"
       - cell "A y-offset from the hover point, in pixels."
-    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
+    - row "dataset (Array<Object> | undefined) None no The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
       - cell "dataset (Array<Object> | undefined)":
         - strong: dataset
         - text: ""
@@ -51,4 +51,4 @@
         - text: ""
       - cell "None"
       - cell "no"
-      - cell "The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
+      - cell "The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
diff --git a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-percent-range-html-svelte-1.aria.yml b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-percent-range-html-svelte-1.aria.yml
index a4c6eb21..f32b3add 100644
--- a/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-percent-range-html-svelte-1.aria.yml
+++ b/test/e2e/component-properties-table.spec.js-snapshots/Property-table-content-for-components-SharedTooltip-percent-range-html-svelte-1.aria.yml
@@ -6,16 +6,16 @@
       - columnheader "Required"
       - columnheader "Description"
   - rowgroup:
-    - row "formatTitle Function d => d no A function to format the tooltip title, which is $config.x.":
+    - row "formatTitle Function d => d no A function to format the tooltip title, which is c.config.x.":
       - cell "formatTitle Function":
         - strong: formatTitle
         - code: Function
       - cell "d => d":
         - code: d => d
       - cell "no"
-      - cell "A function to format the tooltip title, which is $config.x.":
+      - cell "A function to format the tooltip title, which is c.config.x.":
         - text: ""
-        - code: $config.x
+        - code: c.config.x
         - text: ""
     - row "formatKey Function d => titleCase(d) no A function to format the series name.":
       - cell "formatKey Function":
@@ -41,10 +41,10 @@
         - code: /-\d+/
       - cell "no"
       - cell "A y-offset from the hover point, in pixels."
-    - row "dataset Array None no The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
+    - row "dataset Array None no The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format.":
       - cell "dataset Array":
         - strong: dataset
         - code: Array
       - cell "None"
       - cell "no"
-      - cell "The dataset to work off of—defaults to $data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file
+      - cell "The dataset to work off of—defaults to c.data if left unset. You can pass something custom in here in case you don't want to use the main data or it's in a strange format."
\ No newline at end of file