diff --git a/.changeset/chilly-years-vanish.md b/.changeset/chilly-years-vanish.md
new file mode 100644
index 000000000..50a93e40a
--- /dev/null
+++ b/.changeset/chilly-years-vanish.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Bars): Support passing `data` override
diff --git a/.changeset/cold-taxis-sit.md b/.changeset/cold-taxis-sit.md
new file mode 100644
index 000000000..8e084c953
--- /dev/null
+++ b/.changeset/cold-taxis-sit.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Expose `config` as slot prop
diff --git a/.changeset/cool-needles-divide.md b/.changeset/cool-needles-divide.md
new file mode 100644
index 000000000..ccc3f07d5
--- /dev/null
+++ b/.changeset/cool-needles-divide.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat: Add simplified charts to streamline creating common chart types with recommended conventions and granular extensibility (AreaChart, BarChart, LineChart, PieChart, and ScatterChart)
diff --git a/.changeset/cuddly-avocados-trade.md b/.changeset/cuddly-avocados-trade.md
new file mode 100644
index 000000000..30d4c7b62
--- /dev/null
+++ b/.changeset/cuddly-avocados-trade.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Bar): Forward pointer events to enable individual bar tooltips
diff --git a/.changeset/eight-llamas-pump.md b/.changeset/eight-llamas-pump.md
new file mode 100644
index 000000000..b534e24a8
--- /dev/null
+++ b/.changeset/eight-llamas-pump.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Highlight): Handle non-zero y values when drawing lines (ex. radial line chart with inner radius)
diff --git a/.changeset/empty-pianos-add.md b/.changeset/empty-pianos-add.md
new file mode 100644
index 000000000..30594e304
--- /dev/null
+++ b/.changeset/empty-pianos-add.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Voronoi): Support radial coordinates. Issue #112
diff --git a/.changeset/five-plums-speak.md b/.changeset/five-plums-speak.md
new file mode 100644
index 000000000..91cf1d6ad
--- /dev/null
+++ b/.changeset/five-plums-speak.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Tooltip): Rename Tooltip to Tooltip.Root
diff --git a/.changeset/flat-ties-trade.md b/.changeset/flat-ties-trade.md
new file mode 100644
index 000000000..4eee48aff
--- /dev/null
+++ b/.changeset/flat-ties-trade.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Bar/Bars): Replace groupBy/groupPadding with Chart-level x1/y1 derived scales
diff --git a/.changeset/four-months-judge.md b/.changeset/four-months-judge.md
new file mode 100644
index 000000000..072a5fee2
--- /dev/null
+++ b/.changeset/four-months-judge.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Labels): Handle multiple x or y properties (stack, diverting) by leveraging Points component internally
diff --git a/.changeset/four-rockets-cry.md b/.changeset/four-rockets-cry.md
new file mode 100644
index 000000000..11114952a
--- /dev/null
+++ b/.changeset/four-rockets-cry.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Tooltip): Remove default grid on Tooltip.Root and add Tooltip.List as Tooltip.Item container
diff --git a/.changeset/fresh-houses-run.md b/.changeset/fresh-houses-run.md
new file mode 100644
index 000000000..aa59311f7
--- /dev/null
+++ b/.changeset/fresh-houses-run.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Chart): Default domain sorting to `false` (instead of LayerCake's `true`) to simplify bandScale use cases
diff --git a/.changeset/green-crews-change.md b/.changeset/green-crews-change.md
new file mode 100644
index 000000000..3613c3398
--- /dev/null
+++ b/.changeset/green-crews-change.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Points): Add `xValue` and `yValue` to each point, and improve types
diff --git a/.changeset/grumpy-masks-agree.md b/.changeset/grumpy-masks-agree.md
new file mode 100644
index 000000000..e0c79a167
--- /dev/null
+++ b/.changeset/grumpy-masks-agree.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Tooltip): Consolidate Tooltip components (TooltipItem, TooltipSeparator, etc) to Tooltip.Item, Tooltip.Separtor, etc
diff --git a/.changeset/hot-houses-stare.md b/.changeset/hot-houses-stare.md
new file mode 100644
index 000000000..468ae04be
--- /dev/null
+++ b/.changeset/hot-houses-stare.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Highlight): Support radial coordiantes for `points` and `lines`. Issue #112
diff --git a/.changeset/late-cheetahs-smell.md b/.changeset/late-cheetahs-smell.md
new file mode 100644
index 000000000..ec4c0d5e7
--- /dev/null
+++ b/.changeset/late-cheetahs-smell.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Handle null data via defined by default
diff --git a/.changeset/little-geese-laugh.md b/.changeset/little-geese-laugh.md
new file mode 100644
index 000000000..e36903b16
--- /dev/null
+++ b/.changeset/little-geese-laugh.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Points): Add canvas support
diff --git a/.changeset/long-crabs-teach.md b/.changeset/long-crabs-teach.md
new file mode 100644
index 000000000..c73542b59
--- /dev/null
+++ b/.changeset/long-crabs-teach.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Expose `x`/`y`/`z`/`r` accessors via slot props
diff --git a/.changeset/long-pugs-tan.md b/.changeset/long-pugs-tan.md
new file mode 100644
index 000000000..5ca073e85
--- /dev/null
+++ b/.changeset/long-pugs-tan.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(TooltipSeparator): Use theme color
diff --git a/.changeset/lucky-tables-retire.md b/.changeset/lucky-tables-retire.md
new file mode 100644
index 000000000..7a6e574d1
--- /dev/null
+++ b/.changeset/lucky-tables-retire.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+refactor: Add `@layerstack/svelte-actions`, `@layerstack/svelte-stores`, `@layerstack/tailwind`, and `@layerstack/utils` packages and move `svelte-ux` package to `devDependancies` (components only for docs)
diff --git a/.changeset/mighty-teachers-rest.md b/.changeset/mighty-teachers-rest.md
new file mode 100644
index 000000000..fd2037030
--- /dev/null
+++ b/.changeset/mighty-teachers-rest.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Rename `createStackData()` to `groupStackData()`, refine returned structure to simplify tooltips and make consistent with different options combinations, and add tests
diff --git a/.changeset/neat-schools-bake.md b/.changeset/neat-schools-bake.md
new file mode 100644
index 000000000..c8680c53f
--- /dev/null
+++ b/.changeset/neat-schools-bake.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking: Remove `AreaStack` as use cases fully supported by `Area`
diff --git a/.changeset/new-readers-sparkle.md b/.changeset/new-readers-sparkle.md
new file mode 100644
index 000000000..9c97e9cd3
--- /dev/null
+++ b/.changeset/new-readers-sparkle.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Labels): Support `center` placement (useful with Points)
diff --git a/.changeset/polite-cooks-tease.md b/.changeset/polite-cooks-tease.md
new file mode 100644
index 000000000..ecd4ccca8
--- /dev/null
+++ b/.changeset/polite-cooks-tease.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+feat(Svg): Add `center` to conveniently center children, useful for radial layouts without requiring `Group` wrapper
diff --git a/.changeset/polite-tools-chew.md b/.changeset/polite-tools-chew.md
new file mode 100644
index 000000000..c7be14065
--- /dev/null
+++ b/.changeset/polite-tools-chew.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking: Remove <Tooltip.Root header={...}> and replace with <Tooltip.Header>
diff --git a/.changeset/poor-hats-roll.md b/.changeset/poor-hats-roll.md
new file mode 100644
index 000000000..e3a64622f
--- /dev/null
+++ b/.changeset/poor-hats-roll.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Pie): Remove `placement` prop and instead rely Svg `center` or use `Group` for positioning
diff --git a/.changeset/red-roses-drive.md b/.changeset/red-roses-drive.md
new file mode 100644
index 000000000..8d75f660d
--- /dev/null
+++ b/.changeset/red-roses-drive.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking: Add new color `cScale` (and related `c` accessor, domain, range, etc) and replace `rScale` usage (which should be used for radius, etc)
diff --git a/.changeset/rotten-baboons-design.md b/.changeset/rotten-baboons-design.md
new file mode 100644
index 000000000..f359e1f4f
--- /dev/null
+++ b/.changeset/rotten-baboons-design.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Area): Handle null data via defined by default
diff --git a/.changeset/rude-students-lick.md b/.changeset/rude-students-lick.md
new file mode 100644
index 000000000..f61938ec7
--- /dev/null
+++ b/.changeset/rude-students-lick.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(tooltip): Update bisect-x mode to support radial coordinates
diff --git a/.changeset/seven-cars-happen.md b/.changeset/seven-cars-happen.md
new file mode 100644
index 000000000..2aa4d8037
--- /dev/null
+++ b/.changeset/seven-cars-happen.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Highlight): Handle null value points
diff --git a/.changeset/sharp-ways-move.md b/.changeset/sharp-ways-move.md
new file mode 100644
index 000000000..2e19b1940
--- /dev/null
+++ b/.changeset/sharp-ways-move.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Voronoi): Dispatch custom `pointerevent` instead of forwarding to fix console errors
diff --git a/.changeset/short-colts-smash.md b/.changeset/short-colts-smash.md
new file mode 100644
index 000000000..483148598
--- /dev/null
+++ b/.changeset/short-colts-smash.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Points): Integrate with rScale
diff --git a/.changeset/slimy-points-sing.md b/.changeset/slimy-points-sing.md
new file mode 100644
index 000000000..34a0aaf1d
--- /dev/null
+++ b/.changeset/slimy-points-sing.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Points): Remove incorrect points for null/undefined values
diff --git a/.changeset/smooth-tomatoes-hug.md b/.changeset/smooth-tomatoes-hug.md
new file mode 100644
index 000000000..7dcc469fa
--- /dev/null
+++ b/.changeset/smooth-tomatoes-hug.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking(Threshold): Simplify implementation and rename `pathAbove`/`pathBelow` slots to `above`/`below`
diff --git a/.changeset/spotty-moles-rhyme.md b/.changeset/spotty-moles-rhyme.md
new file mode 100644
index 000000000..ac9454b6e
--- /dev/null
+++ b/.changeset/spotty-moles-rhyme.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Area): Pass `x` override to internal Spline
diff --git a/.changeset/stale-tools-taste.md b/.changeset/stale-tools-taste.md
new file mode 100644
index 000000000..e8a289359
--- /dev/null
+++ b/.changeset/stale-tools-taste.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Spline): Enable passing `fill` prop (useful for Bar with single rounded edge)
diff --git a/.changeset/twelve-otters-count.md b/.changeset/twelve-otters-count.md
new file mode 100644
index 000000000..4912ffe10
--- /dev/null
+++ b/.changeset/twelve-otters-count.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Tooltip.Item): Support `color` prop to add swatch, support theme colors and any color via `color="variable"`
diff --git a/.changeset/twenty-queens-remember.md b/.changeset/twenty-queens-remember.md
new file mode 100644
index 000000000..3f0d4d459
--- /dev/null
+++ b/.changeset/twenty-queens-remember.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(cartesianToPolar): Correctly calculate angle/radians between 0 and 2π
diff --git a/.changeset/weak-tigers-poke.md b/.changeset/weak-tigers-poke.md
new file mode 100644
index 000000000..ab0e3a6e3
--- /dev/null
+++ b/.changeset/weak-tigers-poke.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Arc): Support passing `tooltip` and `data` props to simplify setting up tooltip pointer events
diff --git a/.changeset/witty-goats-breathe.md b/.changeset/witty-goats-breathe.md
new file mode 100644
index 000000000..e02810250
--- /dev/null
+++ b/.changeset/witty-goats-breathe.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Support x1/y1 derived scales, useful for grouped bar charts
diff --git a/packages/layerchart/package.json b/packages/layerchart/package.json
index c8ce1a523..ec5d8fcc4 100644
--- a/packages/layerchart/package.json
+++ b/packages/layerchart/package.json
@@ -13,6 +13,7 @@
     "prepublishOnly": "svelte-package",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "TZ=UTC-5 vitest",
     "lint": "prettier --check .",
     "format": "prettier --write .",
     "prepare": "svelte-kit sync"
@@ -66,6 +67,7 @@
     "svelte-check": "^3.8.5",
     "svelte-json-tree": "^2.2.0",
     "svelte-preprocess": "^6.0.2",
+    "svelte-ux": "^0.74.4",
     "svelte2tsx": "^0.7.15",
     "tailwindcss": "^3.4.10",
     "topojson-client": "^3.1.0",
@@ -74,10 +76,15 @@
     "typescript": "^5.5.4",
     "unist-util-visit": "^5.0.0",
     "us-atlas": "^3.0.1",
-    "vite": "^5.4.0"
+    "vite": "^5.4.0",
+    "vitest": "^2.0.5"
   },
   "type": "module",
   "dependencies": {
+    "@layerstack/svelte-actions": "^0.0.3",
+    "@layerstack/svelte-stores": "^0.0.3",
+    "@layerstack/tailwind": "^0.0.5",
+    "@layerstack/utils": "^0.0.3",
     "d3-array": "^3.2.4",
     "d3-color": "^3.1.0",
     "d3-delaunay": "^6.0.4",
@@ -102,7 +109,6 @@
     "lodash-es": "^4.17.21",
     "posthog-js": "^1.155.4",
     "shapefile": "^0.6.6",
-    "svelte-ux": "^0.74.4",
     "topojson-client": "^3.1.0"
   },
   "peerDependencies": {
diff --git a/packages/layerchart/src/lib/components/Arc.svelte b/packages/layerchart/src/lib/components/Arc.svelte
index 05e142591..f23ddd44f 100644
--- a/packages/layerchart/src/lib/components/Arc.svelte
+++ b/packages/layerchart/src/lib/components/Arc.svelte
@@ -27,6 +27,7 @@
   import { chartContext } from './ChartContext.svelte';
   import { motionStore } from '$lib/stores/motionStore.js';
   import { degreesToRadians } from '$lib/utils/math.js';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -86,7 +87,7 @@
   $: scale = scaleLinear().domain(domain).range(range);
 
   function getOuterRadius(outerRadius: number | undefined, chartRadius: number) {
-    if (outerRadius == null) {
+    if (!outerRadius) {
       return chartRadius;
     } else if (outerRadius > 1) {
       // discrete value
@@ -172,6 +173,16 @@
   $: angle = ((startAngle ?? 0) + (endAngle ?? 0)) / 2;
   $: xOffset = Math.sin(angle) * offset;
   $: yOffset = -Math.cos(angle) * offset;
+
+  /**
+   * Tooltip context to setup pointer events to show tooltip for related data.  Must set `data` prop as well
+   */
+  export let tooltip: TooltipContextValue | undefined = undefined;
+
+  /**
+   * Data to set when showing tooltip
+   */
+  export let data: any = undefined;
 </script>
 
 {#if track}
@@ -188,6 +199,15 @@
   d={arc()}
   transform="translate({xOffset}, {yOffset})"
   {...$$restProps}
+  on:pointerenter={(e) => tooltip?.show(e, data)}
+  on:pointermove={(e) => tooltip?.show(e, data)}
+  on:pointerleave={(e) => tooltip?.hide()}
+  on:touchmove={(e) => {
+    if (tooltip) {
+      // Prevent touch to not interfer with pointer when using tooltip
+      e.preventDefault();
+    }
+  }}
   on:click
   on:pointerenter
   on:pointermove
diff --git a/packages/layerchart/src/lib/components/Area.svelte b/packages/layerchart/src/lib/components/Area.svelte
index d3bf335fd..bf4a1fcdb 100644
--- a/packages/layerchart/src/lib/components/Area.svelte
+++ b/packages/layerchart/src/lib/components/Area.svelte
@@ -3,10 +3,10 @@
   import type { tweened as tweenedStore } from 'svelte/motion';
   import { type Area, area as d3Area, areaRadial } from 'd3-shape';
   import type { CurveFactory } from 'd3-shape';
-  import { max } from 'd3-array';
+  import { max, min } from 'd3-array';
   import { interpolatePath } from 'd3-interpolate-path';
 
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '$lib/stores/motionStore.js';
 
@@ -15,7 +15,17 @@
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
 
-  const { data: contextData, xScale, yScale, xGet, yGet, yRange } = chartContext();
+  const {
+    data: contextData,
+    xScale,
+    yScale,
+    x: contextX,
+    y,
+    yDomain,
+    yRange,
+    config,
+    radial,
+  } = chartContext();
 
   /** Override data instead of using context */
   export let data: any = undefined;
@@ -23,9 +33,6 @@
   /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
   export let pathData: string | undefined | null = undefined;
 
-  /** Use radial instead of cartesian area generator, mapping `x` to `angle` and `y0`/`y1 to `innerRadius`/`outerRadius.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-  export let radial = false;
-
   /** Override x accessor */
   export let x: Accessor = undefined;
 
@@ -45,9 +52,9 @@
   /** Enable showing line */
   export let line: boolean | Partial<ComponentProps<Spline>> = false;
 
-  const _x = accessor(x);
-  const _y0 = accessor(y0);
-  const _y1 = accessor(y1);
+  const xAccessor = x ? accessor(x) : $contextX;
+  const y0Accessor = y0 ? accessor(y0) : (d: any) => min($yDomain);
+  const y1Accessor = y1 ? accessor(y1) : $y;
 
   $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
   $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
@@ -57,17 +64,44 @@
     : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });
   $: {
-    const path = radial
+    const path = $radial
       ? areaRadial()
-          .angle((d) => (x ? $xScale(_x(d)) : $xGet(d)))
-          .innerRadius((d) => (y0 ? $yScale(_y0(d)) : max($yRange)))
-          .outerRadius((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)))
+          .angle((d) => $xScale(xAccessor(d)))
+          .innerRadius((d) => $yScale(y0Accessor(d)))
+          .outerRadius((d) => $yScale(y1Accessor(d)))
       : d3Area()
-          .x((d) => (x ? $xScale(_x(d)) : $xGet(d)) + xOffset)
-          .y0((d) => (y0 ? $yScale(_y0(d)) : max($yRange)) + yOffset)
-          .y1((d) => (y1 ? $yScale(_y1(d)) : $yGet(d)) + yOffset);
+          .x((d) => $xScale(xAccessor(d)) + xOffset)
+          .y0((d) => {
+            let value = max<number>($yRange)!;
+            if (y0) {
+              value = $yScale(y0Accessor(d));
+            } else if (Array.isArray($config.y) && $config.y[0] === 0) {
+              // Use first value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+              // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+              value = $yScale($y(d)[0]);
+            }
+
+            return value + yOffset;
+          })
+          .y1((d) => {
+            let value = max<number>($yRange)!;
+            if (y1) {
+              value = $yScale(y1Accessor(d));
+            } else if (Array.isArray($config.y) && $config.y[1] === 1) {
+              // Use second value if `y` defined as an array (ex. `<Chart y={[0,1]}>`)
+              // TODO: Would be nice if this also handled multi-series (<Chart y={['apples', 'bananas', 'oranges']}>) as well as delta values (<Chart y={['baseline', 'value']}>)
+              value = $yScale($y(d)[1]);
+            } else {
+              // Expect single value defined for `y` (ex. `<Chart y="value">`)
+              value = $yScale($y(d));
+            }
+
+            return value + yOffset;
+          });
+
+    path.defined(defined ?? ((d) => xAccessor(d) != null && y1Accessor(d) != null));
+
     if (curve) path.curve(curve);
-    if (defined) path.defined(defined);
 
     const d = pathData ?? path(data ?? $contextData);
     tweened_d.set(d ?? '');
@@ -75,7 +109,15 @@
 </script>
 
 {#if line}
-  <Spline {data} y={y1} {curve} {defined} {tweened} {...typeof line === 'object' ? line : null} />
+  <Spline
+    {data}
+    {x}
+    y={y1}
+    {curve}
+    {defined}
+    {tweened}
+    {...typeof line === 'object' ? line : null}
+  />
 {/if}
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
diff --git a/packages/layerchart/src/lib/components/AreaStack.svelte b/packages/layerchart/src/lib/components/AreaStack.svelte
deleted file mode 100644
index 1bd1650e4..000000000
--- a/packages/layerchart/src/lib/components/AreaStack.svelte
+++ /dev/null
@@ -1,54 +0,0 @@
-<script lang="ts">
-  import { type ComponentProps } from 'svelte';
-  import type { tweened as tweenedStore } from 'svelte/motion';
-  import type { CurveFactory } from 'd3-shape';
-
-  import { chartContext } from './ChartContext.svelte';
-  import Area from './Area.svelte';
-  import Spline from './Spline.svelte';
-  import { chartDataArray } from '../utils/common.js';
-
-  const { data, rGet } = chartContext();
-
-  export let curve: CurveFactory | undefined = undefined;
-  export let defined: ComponentProps<Spline>['defined'] | undefined = undefined;
-  export let opacity = 0.3;
-  export let line: boolean | any = false;
-  export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
-
-  // Render in reverse order so bottom stacks are rendered last (and stack above the upper stacks).  Fixes when upper stack has 0 value
-  $: lineData = [...chartDataArray($data)].reverse();
-</script>
-
-{#if line}
-  <g class="line-group">
-    {#each lineData as seriesData}
-      <Spline
-        data={seriesData}
-        y={(d) => d[1]}
-        stroke={$rGet(seriesData)}
-        {curve}
-        {defined}
-        {tweened}
-        {...line}
-      />
-    {/each}
-  </g>
-{/if}
-
-<slot data={$data}>
-  <g class="area-group">
-    {#each chartDataArray($data) as seriesData}
-      <Area
-        data={seriesData}
-        y0={(d) => d[0]}
-        y1={(d) => d[1]}
-        fill={$rGet(seriesData)}
-        {curve}
-        {defined}
-        {opacity}
-        {tweened}
-      />
-    {/each}
-  </g>
-</slot>
diff --git a/packages/layerchart/src/lib/components/Axis.svelte b/packages/layerchart/src/lib/components/Axis.svelte
index d66bd4132..fef076697 100644
--- a/packages/layerchart/src/lib/components/Axis.svelte
+++ b/packages/layerchart/src/lib/components/Axis.svelte
@@ -8,7 +8,9 @@
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
 
-  import { format as formatValue, type FormatType, cls, type TransitionParams } from 'svelte-ux';
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import type { TransitionParams } from 'svelte-ux'; // TODO: Replace with `@layerstack/svelte-types` or similar
 
   import { chartContext } from './ChartContext.svelte';
   import Circle from './Circle.svelte';
diff --git a/packages/layerchart/src/lib/components/Bar.svelte b/packages/layerchart/src/lib/components/Bar.svelte
index 8c620fb09..a0fa1d8e0 100644
--- a/packages/layerchart/src/lib/components/Bar.svelte
+++ b/packages/layerchart/src/lib/components/Bar.svelte
@@ -22,6 +22,16 @@
    */
   export let y: Accessor = $yContext;
 
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
   export let fill: string | undefined = undefined;
   export let stroke = 'black';
   export let strokeWidth = 0;
@@ -40,9 +50,6 @@
     | 'bottom-right' = 'all';
 
   export let inset = 0;
-  export let groupBy: string | undefined = undefined;
-  export let groupPaddingInner = 0.2;
-  export let groupPaddingOuter = 0;
 
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
@@ -52,12 +59,9 @@
   $: getDimensions = createDimensionGetter(chartContext(), {
     x,
     y,
-    groupBy,
+    x1,
+    y1,
     inset,
-    groupPadding: {
-      inner: groupPaddingInner,
-      outer: groupPaddingOuter,
-    },
   });
   $: dimensions = $getDimensions(bar) ?? { x: 0, y: 0, width: 0, height: 0 };
 
@@ -94,6 +98,10 @@
     {...dimensions}
     {...$$restProps}
     on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {:else}
   <Spline
@@ -105,5 +113,9 @@
     stroke-width={strokeWidth}
     {...$$restProps}
     on:click
+    on:pointerenter
+    on:pointermove
+    on:pointerleave
+    on:touchmove
   />
 {/if}
diff --git a/packages/layerchart/src/lib/components/Bars.svelte b/packages/layerchart/src/lib/components/Bars.svelte
index f052f4313..ea5507690 100644
--- a/packages/layerchart/src/lib/components/Bars.svelte
+++ b/packages/layerchart/src/lib/components/Bars.svelte
@@ -6,7 +6,12 @@
   import Rect from './Rect.svelte';
   import { chartDataArray, type Accessor } from '../utils/common.js';
 
-  const { data, rGet, config } = chartContext();
+  const { data: contextData, cGet, config } = chartContext();
+
+  /**
+   * Override `data` from context.  Useful for multiple Bar instances
+   */
+  export let data: any = undefined;
 
   /**
    * Override `x` from context.  Useful for multiple Bar instances
@@ -18,6 +23,16 @@
    */
   export let y: Accessor = undefined;
 
+  /**
+   * Override `x1` from context.  Useful for multiple Bar instances
+   */
+  export let x1: Accessor = undefined;
+
+  /**
+   * Override `y1` from context.  Useful for multiple Bar instances
+   */
+  export let y1: Accessor = undefined;
+
   export let stroke = 'black';
   export let strokeWidth = 0;
   export let radius = 0;
@@ -27,31 +42,24 @@
 
   export let spring: ComponentProps<Rect>['spring'] = undefined;
   export let tweened: ComponentProps<Rect>['tweened'] = undefined;
-
-  // See: https://svelte.dev/repl/7000c5ce05b84cd98ccbfb2768b4be3d?version=3.38.3
-
-  export let groupBy: string | undefined = undefined;
-  export let groupPaddingInner = 0.2;
-  export let groupPaddingOuter = 0;
 </script>
 
 <g class="Bars">
   <slot>
-    {#each chartDataArray($data) as item}
+    {#each chartDataArray(data ?? $contextData) as item}
       <Bar
         bar={item}
         {x}
         {y}
-        fill={$config.r ? $rGet(item) : null}
+        {x1}
+        {y1}
+        fill={$config.c ? $cGet(item) : null}
         {stroke}
         {strokeWidth}
         {radius}
+        {inset}
         {spring}
         {tweened}
-        {groupBy}
-        {inset}
-        {groupPaddingInner}
-        {groupPaddingOuter}
         {...$$restProps}
       />
     {/each}
diff --git a/packages/layerchart/src/lib/components/Blur.svelte b/packages/layerchart/src/lib/components/Blur.svelte
index 267989210..868ed9ad3 100644
--- a/packages/layerchart/src/lib/components/Blur.svelte
+++ b/packages/layerchart/src/lib/components/Blur.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   export let id: string = uniqueId('blur-');
   export let stdDeviation = 5;
diff --git a/packages/layerchart/src/lib/components/Brush.svelte b/packages/layerchart/src/lib/components/Brush.svelte
index ba9e67409..0a29bbeec 100644
--- a/packages/layerchart/src/lib/components/Brush.svelte
+++ b/packages/layerchart/src/lib/components/Brush.svelte
@@ -2,7 +2,8 @@
   import { createEventDispatcher } from 'svelte';
   import type { SVGAttributes } from 'svelte/elements';
   import { extent } from 'd3-array';
-  import { clamp, cls } from 'svelte-ux';
+  import { clamp } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import Frame from './Frame.svelte';
diff --git a/packages/layerchart/src/lib/components/Calendar.svelte b/packages/layerchart/src/lib/components/Calendar.svelte
index c8fed37eb..924c5ee8d 100644
--- a/packages/layerchart/src/lib/components/Calendar.svelte
+++ b/packages/layerchart/src/lib/components/Calendar.svelte
@@ -6,7 +6,7 @@
 
   import { chartContext } from './ChartContext.svelte';
   import Rect from './Rect.svelte';
-  import type { TooltipContextValue } from './TooltipContext.svelte';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import MonthPath from './MonthPath.svelte';
   import Text from './Text.svelte';
   import { chartDataArray } from '../utils/common.js';
@@ -27,7 +27,7 @@
    */
   export let tooltip: TooltipContextValue | undefined = undefined;
 
-  const { width, height, x, rGet, data, config } = chartContext();
+  const { width, height, x, cGet, data, config } = chartContext();
 
   $: yearDays = timeDays(start, end);
   $: yearMonths = timeMonths(start, end);
@@ -50,7 +50,7 @@
     return {
       x: timeWeek.count(timeYear(date), date) * cellWidth,
       y: date.getDay() * cellHeight,
-      color: $config.r ? $rGet(cellData) : 'transparent',
+      color: $config.c ? $cGet(cellData) : 'transparent',
       data: cellData,
     };
   });
diff --git a/packages/layerchart/src/lib/components/Chart.svelte b/packages/layerchart/src/lib/components/Chart.svelte
index f12b0ca7c..addfcfce9 100644
--- a/packages/layerchart/src/lib/components/Chart.svelte
+++ b/packages/layerchart/src/lib/components/Chart.svelte
@@ -1,47 +1,20 @@
-<script context="module" lang="ts">
-  // import { LayerCake, Svg, Html } from 'layercake';
-  // export { Svg, Html };
-
-  // TODO: Workaround for sveld error: `Cannot read properties of null (reading 'type')` in `ComponentParser`
-  // See: https://github.com/carbon-design-system/sveld/issues/104
-  import {
-    LayerCake,
-    // Canvas as _Canvas,
-    // Html as _Html,
-    // Svg as _Svg,
-    WebGL as _WebGL,
-  } from 'layercake';
-  import _Canvas from './layout/Canvas.svelte';
-  import _Html from './layout/Html.svelte';
-  import _Svg from './layout/Svg.svelte';
-
-  export const Canvas = _Canvas;
-  export const Html = _Html;
-  export const Svg = _Svg;
-  export const WebGL = _WebGL;
-</script>
-
 <script lang="ts" generics="TData">
-  import { accessor, type Accessor } from '../utils/common.js';
-
+  import { onMount, type ComponentProps } from 'svelte';
+  import { LayerCake } from 'layercake';
   import type { HierarchyNode } from 'd3-hierarchy';
   import type { SankeyGraph } from 'd3-sankey';
-
-  import { onMount, type ComponentProps } from 'svelte';
   import { max, min } from 'd3-array';
-  import { isScaleBand, type AnyScale } from '$lib/utils/scales.js';
 
   import ChartContext from './ChartContext.svelte';
   import GeoContext from './GeoContext.svelte';
-  import TooltipContext from './TooltipContext.svelte';
+  import TooltipContext from './tooltip/TooltipContext.svelte';
   import TransformContext from './TransformContext.svelte';
+
+  import { accessor, type Accessor } from '$lib/utils/common.js';
+  import { isScaleBand, type AnyScale, type DomainType } from '$lib/utils/scales.js';
   import { geoFitObjectTransform } from '$lib/utils/geo.js';
 
-  type DomainType =
-    | (number | string | Date | null | undefined)[]
-    | Function
-    // 'null' useful for Brush component
-    | null;
+  type LayerCakeProps = ComponentProps<LayerCake>;
 
   interface $$Props {
     /** Whether this chart should be rendered server side. @default false */
@@ -83,6 +56,12 @@
     z?: Accessor<TData>;
     /** 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. */
     r?: Accessor<TData>;
+    /** The x1 accessor. The key in each row of data that corresponds to the x1-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. */
+    x1?: Accessor<TData>;
+    /** The y1 accessor. The key in each row of data that corresponds to the y1-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. */
+    y1?: Accessor<TData>;
+    /** The c (color) accessor. The key in each row of data that corresponds to the color. This can be a string or an accessor function. This property gets converted to a function when you access it through the context. */
+    c?: Accessor<TData>;
 
     /** 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. */
     xDomain?: DomainType;
@@ -92,6 +71,12 @@
     zDomain?: DomainType;
     /** 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. */
     rDomain?: DomainType;
+    /** 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. */
+    x1Domain?: DomainType;
+    /** 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. */
+    y1Domain?: DomainType;
+    /** Set the list of color values. */
+    cDomain?: DomainType;
 
     /** Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. @default false */
     xNice?: boolean | number;
@@ -102,25 +87,31 @@
     /**  Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. @default false */
     rNice?: boolean | number;
 
-    /** @type 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. */
+    /** 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. */
     xPadding?: [number, number];
-    /** @type 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. */
+    /** 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. */
     yPadding?: [number, number];
-    /** @type 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. */
+    /** 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. */
     zPadding?: [number, number];
-    /** @type 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. */
+    /** 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. */
     rPadding?: [number, number];
 
-    /** @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. */
+    /** 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. @default scaleLinear */
     xScale?: AnyScale;
-    /** @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. */
+    /** 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. @default scaleLinear */
     yScale?: AnyScale;
-    /** @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. */
+    /** 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. @default scaleLinear */
     zScale?: AnyScale;
-    /** @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. */
+    /** 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. @default scaleSqrt */
     rScale?: AnyScale;
-
-    /** @type 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). */
+    /** The D3 scale that should be used for the x1-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleLinear */
+    x1Scale?: AnyScale;
+    /** The D3 scale that should be used for the y1-dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleLinear */
+    y1Scale?: AnyScale;
+    /** The D3 scale that should be used for the  color dimension. Pass in an instantiated D3 scale if you want to override the default or you want to extra options. @default scaleOrdinal */
+    cScale?: AnyScale;
+
+    /** 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). */
     xRange?:
       | number[]
       | string[]
@@ -140,23 +131,35 @@
       | number[]
       | string[]
       | ((args: { width: number; height: number }) => number[] | string[]);
+    /** Set the x1 range by setting an array or function with argument `({ xScale, width, height})` that returns an array. 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). */
+    x1Range?:
+      | number[]
+      | string[]
+      | ((args: { xScale: AnyScale; width: number; height: number }) => number[] | string[]);
+    /** Set the y1 range by setting an array or function with argument `({ yScale, width, height})` that returns an array. 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). */
+    y1Range?:
+      | number[]
+      | string[]
+      | ((args: { yScale: AnyScale; width: number; height: number }) => number[] | string[]);
+    /** Override the default y1 range of `[0, width]` by setting an array or function with argument `({ yScale, width, height})` that returns an array. Setting this prop overrides `x1Reverse`. 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). */
+    cRange?: string[];
 
     /** Reverse the default x range. By default this is `false` and the range is `[0, width]`. Ignored if you set the xRange prop. @default false */
     xReverse?: boolean;
     /** Reverse the default y range. By default this is `true` and the range is `[height, 0]` unless using an ordinal scale with a `.bandwidth` method for `yScale`. Ignored if you set the `yRange` prop. @default true */
     yReverse?: boolean;
-    /** @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. @default false */
+    /** Reverse the default z range. By default this is `false` and the range is `[0, width]`. Ignored if you set the zRange prop. @default false */
     zReverse?: boolean;
-    /** @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. @default false */
+    /** Reverse the default r range. By default this is `false` and the range is `[1, 25]`. Ignored if you set the rRange prop. @default false */
     rReverse?: boolean;
 
-    /** @type {Boolean} [xDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
     xDomainSort?: boolean;
-    /** @type {Boolean} [yDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
     yDomainSort?: boolean;
-    /** @type {Boolean} [zDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
     zDomainSort?: boolean;
-    /** @type {Boolean} [rDomainSort=true] Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
+    /** Only used when scale is ordinal. Set whether the calculated unique items come back sorted. */
     rDomainSort?: boolean;
 
     /** 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). */
@@ -173,10 +176,10 @@
     /** Any extra configuration values you want available on the LayerCake context. This could be useful for color lookups or additional constants. */
     custom?: Record<string, any>;
 
-    /** @type {Boolean} debug Enable debug printing to the console. Useful to inspect your scales and dimensions. */
+    /** Enable debug printing to the console. Useful to inspect your scales and dimensions. */
     debug?: boolean;
 
-    /** @type {Boolean} [verbose=true] Show warnings in the console. */
+    /** Show warnings in the console. */
     verbose?: boolean;
 
     /** x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values */
@@ -185,6 +188,10 @@
     /** y value guaranteed to be visible in yDomain.  Useful with optional negative values since `yDomain={[0, null]}` would ignore negative values */
     yBaseline?: typeof xBaseline;
 
+    /* Props passed to ChartContext */
+    /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+    radial?: typeof radial;
+
     /** Props passed to GeoContext */
     geo?: typeof geo;
 
@@ -201,8 +208,26 @@
   export let data: TData[] | HierarchyNode<TData> | SankeyGraph<any, any> = [];
 
   export let x: Accessor<TData> = undefined;
+  export let xRange: $$Props['xRange'] = undefined;
+
   export let y: Accessor<TData> = undefined;
   export let yScale: AnyScale | undefined = undefined;
+  export let yRange: $$Props['yRange'] = undefined;
+
+  export let x1: $$Props['x1'] = undefined;
+  export let x1Scale: $$Props['x1Scale'] = undefined;
+  export let x1Domain: $$Props['x1Domain'] = undefined;
+  export let x1Range: $$Props['x1Range'] = undefined;
+
+  export let y1: $$Props['y1'] = undefined;
+  export let y1Scale: $$Props['y1Scale'] = undefined;
+  export let y1Domain: $$Props['y1Domain'] = undefined;
+  export let y1Range: $$Props['y1Range'] = undefined;
+
+  export let c: $$Props['c'] = undefined;
+  export let cScale: $$Props['cScale'] = undefined;
+  export let cDomain: $$Props['cDomain'] = undefined;
+  export let cRange: $$Props['cRange'] = undefined;
 
   /**
    * x value guaranteed to be visible in xDomain.  Useful with optional negative values since `xDomain={[0, null]}` would ignore negative values
@@ -233,6 +258,9 @@
    */
   $: yReverse = yScale ? !isScaleBand(yScale) : true;
 
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
   /** Props passed to GeoContext */
   export let geo: Partial<ComponentProps<GeoContext>> | undefined = undefined;
 
@@ -253,16 +281,32 @@
   onMount(() => {
     isMounted = true;
   });
+
+  // TODO: Hacks until LayerCake has better typings (`Accessor<TData>`)
+  $: _x = x as LayerCakeProps['x'];
+  $: _y = y as LayerCakeProps['y'];
+  $: _yRange =
+    yRange ??
+    ((radial
+      ? ({ height }: { height: number }) => [0, height / 2]
+      : undefined) as LayerCakeProps['yRange']);
 </script>
 
+<!-- Remove domain sorting by default: https://github.com/mhkeller/layercake/issues/147  -->
 <LayerCake
   {data}
-  {x}
+  x={_x}
   {xDomain}
-  {y}
+  xRange={xRange ?? (radial ? [0, 2 * Math.PI] : undefined)}
+  y={_y}
   {yScale}
   {yDomain}
+  yRange={_yRange}
   {yReverse}
+  xDomainSort={false}
+  yDomainSort={false}
+  zDomainSort={false}
+  rDomainSort={false}
   {...$$restProps}
   let:aspectRatio
   let:containerHeight
@@ -270,12 +314,16 @@
   let:height
   let:width
   let:element
+  let:x
   let:xScale
   let:xGet
+  let:y
   let:yScale
   let:yGet
+  let:z
   let:zScale
   let:zGet
+  let:r
   let:rScale
   let:rGet
   let:padding
@@ -286,7 +334,35 @@
       ? geoFitObjectTransform(geo.projection(), [width, height], geo.fitGeojson)
       : undefined}
 
-  <ChartContext {data} let:data let:flatData on:resize>
+  <ChartContext
+    {data}
+    {radial}
+    {x1}
+    {x1Scale}
+    {x1Domain}
+    {x1Range}
+    {y1}
+    {y1Scale}
+    {y1Domain}
+    {y1Range}
+    {c}
+    {cScale}
+    {cDomain}
+    {cRange}
+    let:data
+    let:flatData
+    let:config
+    let:x1
+    let:x1Scale
+    let:x1Get
+    let:y1
+    let:y1Scale
+    let:y1Get
+    let:c
+    let:cScale
+    let:cGet
+    on:resize
+  >
     {#key isMounted}
       <TransformContext
         bind:this={transformContext}
@@ -333,17 +409,31 @@
               {projection}
               transform={_transform}
               {tooltip}
+              {x}
               {xScale}
               {xGet}
+              {y}
               {yScale}
               {yGet}
+              {z}
               {zScale}
               {zGet}
+              {r}
               {rScale}
               {rGet}
+              {x1}
+              {x1Scale}
+              {x1Get}
+              {y1}
+              {y1Scale}
+              {y1Get}
+              {c}
+              {cScale}
+              {cGet}
               {padding}
               {data}
               {flatData}
+              {config}
             />
           </TooltipContext>
         </GeoContext>
diff --git a/packages/layerchart/src/lib/components/ChartContext.svelte b/packages/layerchart/src/lib/components/ChartContext.svelte
index 85bf98c7c..438f26fc5 100644
--- a/packages/layerchart/src/lib/components/ChartContext.svelte
+++ b/packages/layerchart/src/lib/components/ChartContext.svelte
@@ -1,10 +1,16 @@
 <!-- Wrapper to allow getting LayerCake context from <Chart> and exposing with a strongly type context getter -->
 <script lang="ts" context="module">
-  import type { AnyScale } from 'layerchart/utils/scales.js';
+  import { createScale, type AnyScale } from 'layerchart/utils/scales.js';
 
   import type { HierarchyNode } from 'd3-hierarchy';
-  import { createEventDispatcher, getContext, onMount, setContext } from 'svelte';
-  import { type Readable } from 'svelte/store';
+  import {
+    createEventDispatcher,
+    getContext,
+    onMount,
+    setContext,
+    type ComponentProps,
+  } from 'svelte';
+  import { derived, writable, type Readable } from 'svelte/store';
 
   export const chartContextKey = Symbol();
 
@@ -25,6 +31,9 @@
     y: Readable<(d: TData) => any>;
     z: Readable<(d: TData) => any>;
     r: Readable<(d: TData) => any>;
+    x1: Readable<(d: TData) => any>;
+    y1: Readable<(d: TData) => any>;
+    c: Readable<(d: TData) => any>;
     custom: Readable<Object>;
     data: Readable<TData[] | HierarchyNode<TData> | SankeyGraph<any, any>>;
     xNice: Readable<number | boolean>;
@@ -55,10 +64,16 @@
     yDomain: Readable<any>;
     zDomain: Readable<any>;
     rDomain: Readable<any>;
+    x1Domain: Readable<any>;
+    y1Domain: Readable<any>;
+    cDomain: Readable<any>;
     xRange: Readable<any>;
     yRange: Readable<any>;
     zRange: Readable<any>;
     rRange: Readable<any>;
+    x1Range: Readable<any>;
+    y1Range: Readable<any>;
+    cRange: Readable<any>;
     config: Readable<any>;
     xScale: Readable<AnyScale>;
     xGet: Readable<any>;
@@ -68,6 +83,12 @@
     zGet: Readable<any>;
     rScale: Readable<AnyScale>;
     rGet: Readable<any>;
+    x1Scale: Readable<AnyScale | null>;
+    x1Get: Readable<any>;
+    y1Scale: Readable<AnyScale | null>;
+    y1Get: Readable<any>;
+    cScale: Readable<AnyScale | null>;
+    cGet: Readable<any>;
   };
 
   export type ChartEvents = {
@@ -84,7 +105,8 @@
   export type ChartResizeEvent = CustomEvent<ChartResizeDetail>;
 
   export type ChartContext<TData> = LayerCakeContext<TData> & {
-    // TODO: consider extending with additional values
+    // Additional context values
+    radial: Readable<boolean>;
   };
 
   export function chartContext<TData = any>() {
@@ -97,15 +119,152 @@
 </script>
 
 <script lang="ts" generics="TData">
+  import { unique } from '@layerstack/utils/array';
+
+  import { scaleOrdinal } from 'd3-scale';
+
+  import { extent } from 'd3-array';
+
   import type { SankeyGraph } from 'd3-sankey';
 
-  const dispatch = createEventDispatcher<ChartEvents>();
+  import type Chart from './Chart.svelte';
+  import { accessor, chartDataArray } from '../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  export let x1: ChartProps['x1'] = undefined;
+  export let x1Scale: ChartProps['x1Scale'] = undefined;
+  export let x1Domain: ChartProps['x1Domain'] = undefined;
+  export let x1Range: ChartProps['x1Range'] = undefined;
+
+  export let y1: ChartProps['y1'] = undefined;
+  export let y1Scale: ChartProps['y1Scale'] = undefined;
+  export let y1Domain: ChartProps['y1Domain'] = undefined;
+  export let y1Range: ChartProps['y1Range'] = undefined;
+
+  export let c: ChartProps['c'] = undefined;
+  export let cScale: ChartProps['cScale'] = undefined;
+  export let cDomain: ChartProps['cDomain'] = undefined;
+  export let cRange: ChartProps['cRange'] = undefined;
 
   const layerCakeContext = getContext<LayerCakeContext<TData>>('LayerCake');
-  setChartContext(layerCakeContext);
+  const {
+    data: contextData,
+    width,
+    height,
+    containerWidth,
+    containerHeight,
+    xScale,
+    yScale,
+  } = layerCakeContext;
+
+  /* --------------------------------------------
+   * Make store versions of each parameter
+   * Prefix these with `_` to keep things organized
+   */
+  const _x1 = writable(accessor(x1));
+  const _x1Scale = writable<AnyScale | null>(null);
+  const _x1Domain = writable<ChartProps['x1Domain']>(x1Domain);
+  const _x1Range = writable<ChartProps['x1Range']>(x1Range);
+  const _x1Get = writable<Function>();
+
+  $: $_x1 = accessor(x1);
+  $: $_x1Domain = x1Domain ?? extent(chartDataArray($contextData), $_x1);
+  $: $_x1Scale =
+    x1Scale && x1Range
+      ? createScale(x1Scale, $_x1Domain, x1Range, { xScale: $xScale, $width, $height })
+      : null;
+  $: $_x1Range = x1Range;
+  $: $_x1Get = (d: any) => $_x1Scale?.($_x1(d));
+
+  const _y1 = writable(accessor(y1));
+  const _y1Scale = writable<AnyScale | null>(null);
+  const _y1Domain = writable<ChartProps['y1Domain']>(y1Domain);
+  const _y1Range = writable<ChartProps['y1Range']>(y1Range);
+  const _y1Get = writable<Function>();
+
+  $: $_y1 = accessor(y1);
+  $: $_y1Domain = y1Domain ?? extent(chartDataArray($contextData), $_y1);
+  $: $_y1Range = y1Range;
+  $: $_y1Scale =
+    y1Scale && y1Range
+      ? createScale(y1Scale, $_y1Domain, y1Range, { yScale: $yScale, $width, $height })
+      : null;
+  $: $_y1Get = (d: any) => $_y1Scale?.($_y1(d));
+
+  const _c = writable(accessor(c));
+  const _cScale = writable<AnyScale | null>(scaleOrdinal());
+  const _cDomain = writable<ChartProps['cDomain']>(cDomain);
+  const _cRange = writable<ChartProps['cRange']>(cRange);
+  const _cGet = writable<Function>();
+
+  $: $_c = accessor(c);
+  $: $_cDomain = cDomain ?? unique(chartDataArray($contextData).map($_c));
+  $: $_cRange = cRange;
+  $: $_cScale = cRange
+    ? createScale(cScale ?? scaleOrdinal(), $_cDomain, cRange, { $width, $height })
+    : null;
+  $: $_cGet = (d: any) => $_cScale?.($_c(d));
 
-  const { width, height, containerWidth, containerHeight } = layerCakeContext;
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+  const _radial = writable(radial);
+  $: $_radial = radial;
 
+  $: addtConfig = {
+    ...(x1 && { x1 }),
+    ...(x1Domain && { x1Domain }),
+    ...(x1Range && { x1Range }),
+    ...(x1Scale && { x1Scale }),
+
+    ...(y1 && { y1 }),
+    ...(y1Domain && { y1Domain }),
+    ...(y1Range && { y1Range }),
+    ...(y1Scale && { y1Scale }),
+
+    ...(c && { c }),
+    ...(cDomain && { cDomain }),
+    ...(cRange && { cRange }),
+    ...(cScale && { cScale }),
+  };
+  const _addtConfig = writable(addtConfig);
+  $: $_addtConfig = addtConfig;
+
+  const config = derived([layerCakeContext.config, _addtConfig], ([$config, $addtConfig]) => {
+    return {
+      ...$config,
+      ...$addtConfig,
+    };
+  });
+
+  const chartContext = {
+    ...layerCakeContext,
+
+    x1: _x1,
+    x1Domain: _x1Domain,
+    x1Range: _x1Range,
+    x1Scale: _x1Scale,
+    x1Get: _x1Get,
+
+    y1: _y1,
+    y1Domain: _y1Domain,
+    y1Range: _y1Range,
+    y1Scale: _y1Scale,
+    y1Get: _y1Get,
+
+    c: _c,
+    cDomain: _cDomain,
+    cRange: _cRange,
+    cScale: _cScale,
+    cGet: _cGet,
+
+    config,
+
+    radial: _radial,
+  };
+  setChartContext(chartContext);
+
+  const dispatch = createEventDispatcher<ChartEvents>();
   $: if (isMounted) {
     dispatch('resize', {
       width: $width,
@@ -125,4 +284,17 @@
   export let data: TData[] | HierarchyNode<TData> | SankeyGraph<any, any> = []; // Same as `ComponentProps<Chart<TData>>` but causes circular reference
 </script>
 
-<slot {data} flatData={layerCakeContext.data} />
+<slot
+  {data}
+  flatData={chartContext.data}
+  config={$config}
+  x1={$_x1}
+  x1Scale={$_x1Scale}
+  x1Get={$_x1Get}
+  y1={$_y1}
+  y1Scale={$_y1Scale}
+  y1Get={$_y1Get}
+  c={$_c}
+  cScale={$_cScale}
+  cGet={$_cGet}
+/>
diff --git a/packages/layerchart/src/lib/components/Circle.svelte b/packages/layerchart/src/lib/components/Circle.svelte
index 682eb83ec..03f21befc 100644
--- a/packages/layerchart/src/lib/components/Circle.svelte
+++ b/packages/layerchart/src/lib/components/Circle.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '$lib/stores/motionStore.js';
 
diff --git a/packages/layerchart/src/lib/components/CircleClipPath.svelte b/packages/layerchart/src/lib/components/CircleClipPath.svelte
index a17556272..a2b2439c2 100644
--- a/packages/layerchart/src/lib/components/CircleClipPath.svelte
+++ b/packages/layerchart/src/lib/components/CircleClipPath.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
 
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   import ClipPath from './ClipPath.svelte';
   import Circle from './Circle.svelte';
diff --git a/packages/layerchart/src/lib/components/ClipPath.svelte b/packages/layerchart/src/lib/components/ClipPath.svelte
index 83cc95bf3..9550da3b2 100644
--- a/packages/layerchart/src/lib/components/ClipPath.svelte
+++ b/packages/layerchart/src/lib/components/ClipPath.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   /** Unique id for clipPath */
   export let id: string = uniqueId('clipPath-');
diff --git a/packages/layerchart/src/lib/components/GeoPath.svelte b/packages/layerchart/src/lib/components/GeoPath.svelte
index 128bee7ea..487d3f246 100644
--- a/packages/layerchart/src/lib/components/GeoPath.svelte
+++ b/packages/layerchart/src/lib/components/GeoPath.svelte
@@ -8,11 +8,11 @@
     type GeoProjection,
     type GeoTransformPrototype,
   } from 'd3-geo';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import { geoContext } from './GeoContext.svelte';
-  import type { TooltipContextValue } from './TooltipContext.svelte';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
   import { curveLinearClosed, type CurveFactory, type CurveFactoryLineOnly } from 'd3-shape';
   import { geoCurvePath } from '$lib/utils/geo.js';
 
diff --git a/packages/layerchart/src/lib/components/Highlight.svelte b/packages/layerchart/src/lib/components/Highlight.svelte
index 5ab2815fe..4da0041ee 100644
--- a/packages/layerchart/src/lib/components/Highlight.svelte
+++ b/packages/layerchart/src/lib/components/Highlight.svelte
@@ -1,15 +1,16 @@
 <script lang="ts">
   import { type ComponentProps } from 'svelte';
   import { max, min } from 'd3-array';
-  import type { Series, SeriesPoint } from 'd3-shape';
-  import { cls, notNull } from 'svelte-ux';
+  import { pointRadial, type Series, type SeriesPoint } from 'd3-shape';
+  import { notNull } from '@layerstack/utils/typeGuards';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import Circle from './Circle.svelte';
   import Line from './Line.svelte';
   import Bar from './Bar.svelte';
   import Rect from './Rect.svelte';
-  import { tooltipContext } from './TooltipContext.svelte';
+  import { tooltipContext } from './tooltip/TooltipContext.svelte';
 
   import { isScaleBand } from '$lib/utils/scales.js';
   import { accessor, type Accessor } from '$lib/utils/common.js';
@@ -25,8 +26,9 @@
     yDomain,
     yScale,
     yRange,
-    rGet,
+    cGet,
     config,
+    radial,
   } = chartContext();
   const tooltip = tooltipContext();
 
@@ -60,8 +62,6 @@
   /** Set to false to disable spring transitions */
   export let motion = true;
 
-  // TODO: Fix circle points being backwards for stack (see AreaStack)
-
   const _x = accessor(x);
   const _y = accessor(y);
 
@@ -79,11 +79,11 @@
   $: if (highlightData) {
     const xValue = _x(highlightData);
     const xCoord = Array.isArray(xValue) ? xValue.map((v) => $xScale(v)) : $xScale(xValue);
-    const xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
+    const xOffset = isScaleBand($xScale) && !$radial ? $xScale.bandwidth() / 2 : 0;
 
     const yValue = _y(highlightData);
     const yCoord = Array.isArray(yValue) ? yValue.map((v) => $yScale(v)) : $yScale(yValue);
-    const yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
+    const yOffset = isScaleBand($yScale) && !$radial ? $yScale.bandwidth() / 2 : 0;
 
     // Reset lines
     _lines = [];
@@ -101,17 +101,17 @@
           ..._lines,
           ...xCoord.filter(notNull).map((xItem, i) => ({
             x1: xItem + xOffset,
-            y1: 0,
+            y1: min($yRange) as unknown as number,
             x2: xItem + xOffset,
             y2: max($yRange) as unknown as number,
           })),
         ];
-      } else {
+      } else if (xCoord) {
         _lines = [
           ..._lines,
           {
             x1: xCoord + xOffset,
-            y1: 0,
+            y1: min($yRange) as unknown as number,
             x2: xCoord + xOffset,
             y2: max($yRange) as unknown as number,
           },
@@ -149,17 +149,17 @@
         _lines = [
           ..._lines,
           ...yCoord.filter(notNull).map((yItem, i) => ({
-            x1: 0,
+            x1: min($xRange) as unknown as number,
             y1: yItem + yOffset,
             x2: max($xRange) as unknown as number,
             y2: yItem + yOffset,
           })),
         ];
-      } else {
+      } else if (yCoord) {
         _lines = [
           ..._lines,
           {
-            x1: 0,
+            x1: min($xRange) as unknown as number,
             y1: yCoord + yOffset,
             x2: max($xRange) as unknown as number,
             y2: yCoord + yOffset,
@@ -213,11 +213,10 @@
             .filter((d) => d.point); // remove if no point found (ex. Histogram);
 
           _points = seriesPointsData.map((seriesPoint, i) => {
-            console.log({ seriesPoint });
             return {
               x: $xScale(seriesPoint.point[1]) + xOffset,
               y: yCoord + yOffset,
-              fill: $config.r ? $rGet(seriesPoint.series) : null,
+              fill: $config.c ? $cGet(seriesPoint.series) : null,
             };
           });
         }
@@ -229,7 +228,7 @@
             x: xItem + xOffset,
             y: yCoord + yOffset,
             // TODO: is there a better way to expose the series key/value?
-            fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+            fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
           };
         });
       }
@@ -256,7 +255,7 @@
           _points = seriesPointsData.map((seriesPoint, i) => ({
             x: xCoord + xOffset,
             y: $yScale(seriesPoint.point[1]) + yOffset,
-            fill: $config.r ? $rGet(seriesPoint.series) : null,
+            fill: $config.c ? $cGet(seriesPoint.series) : null,
           }));
         }
       } else {
@@ -267,18 +266,46 @@
             x: xCoord + xOffset,
             y: yItem + yOffset,
             // TODO: is there a better way to expose the series key/value?
-            fill: $config.r ? $rGet({ ...highlightData, $key }) : null,
+            fill: $config.c ? $cGet({ ...highlightData, $key }) : null,
           };
         });
       }
-    } else {
+    } else if (xCoord != null && yCoord != null) {
       _points = [
         {
           x: xCoord + xOffset,
           y: yCoord + yOffset,
-          fill: $config.r ? $rGet(highlightData) : null,
+          fill: $config.c ? $cGet(highlightData) : null,
         },
       ];
+    } else {
+      _points = [];
+    }
+
+    if ($radial) {
+      // Translate x/y to angle/radius
+      _points = _points.map((p) => {
+        const [x, y] = pointRadial(p.x, p.y);
+        return {
+          ...p,
+          x,
+          y,
+        };
+      });
+
+      _lines = _lines.map((l) => {
+        const [x1, y1] = pointRadial(l.x1, l.y1);
+        const [x2, y2] = pointRadial(l.x2, l.y2);
+        return {
+          ...l,
+          x1,
+          y1,
+          x2,
+          y2,
+        };
+      });
+
+      // TODO: How to handle _areas
     }
   }
 </script>
diff --git a/packages/layerchart/src/lib/components/HitCanvas.svelte b/packages/layerchart/src/lib/components/HitCanvas.svelte
index 68c129e9f..5352fd59a 100644
--- a/packages/layerchart/src/lib/components/HitCanvas.svelte
+++ b/packages/layerchart/src/lib/components/HitCanvas.svelte
@@ -2,7 +2,7 @@
   import { createEventDispatcher, onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import { scaleCanvas } from 'layercake';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import Canvas from './layout/Canvas.svelte';
diff --git a/packages/layerchart/src/lib/components/Hull.svelte b/packages/layerchart/src/lib/components/Hull.svelte
index 2843138bd..88d69bb1b 100644
--- a/packages/layerchart/src/lib/components/Hull.svelte
+++ b/packages/layerchart/src/lib/components/Hull.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
   import { createEventDispatcher, type ComponentProps } from 'svelte';
-  import { cls } from 'svelte-ux';
   import { min } from 'd3-array';
   import { Delaunay } from 'd3-delaunay';
   // @ts-expect-error
   import { geoVoronoi } from 'd3-geo-voronoi';
   import { curveLinearClosed } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import GeoPath from './GeoPath.svelte';
diff --git a/packages/layerchart/src/lib/components/Labels.svelte b/packages/layerchart/src/lib/components/Labels.svelte
index 1d2671f1d..3dfb59fd5 100644
--- a/packages/layerchart/src/lib/components/Labels.svelte
+++ b/packages/layerchart/src/lib/components/Labels.svelte
@@ -1,74 +1,35 @@
 <script lang="ts">
-  /*
-   * TODO
-   *   - [ ] Support step curves (center like scaleBand())
-   *   - [ ] Support multiple values (threshold, stacks, etc)
-   */
-  import { type ComponentProps } from 'svelte';
-  import { format as formatValue, type FormatType, cls } from 'svelte-ux';
-  import { greatestAbs } from 'svelte-ux/utils/array';
+  import { SvelteComponent, type ComponentProps } from 'svelte';
+  import { format as formatValue, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
-  const { flatData, yScale, x, y, custom } = chartContext();
   import Text from './Text.svelte';
   import { isScaleBand } from '$lib/utils/scales.js';
-  import { createDimensionGetter } from '$lib/utils/rect.js';
   import { chartContext } from './ChartContext.svelte';
+  import Points from './Points.svelte';
 
-  // TODO: Support 'auto' to switch `inside` to `outside` if not enough room
-  export let placement: 'inside' | 'outside' = 'outside';
-  export let offset = 4;
+  export let placement: 'inside' | 'outside' | 'center' = 'outside';
+  export let offset = placement === 'center' ? 0 : 4;
   export let format: FormatType | undefined = undefined;
-  // export let overlap = false;
 
-  // @ts-expect-error
-  $: yBaseline = $custom?.yBaseline ?? 0;
+  const { yScale } = chartContext();
 
-  export let groupBy: string | undefined = undefined;
-  export let groupPaddingInner = 0.2;
-  export let groupPaddingOuter = 0;
+  // TODO: Add to @layerstack/svelte-types package
+  type ComponentSlots<T> = T extends SvelteComponent<any, any, infer S> ? S : never;
+  type PointsSlotProp = ComponentSlots<Points>['default']['points'];
 
-  $: getDimensions = createDimensionGetter(chartContext(), {
-    // x,
-    // y,
-    groupBy,
-    // padding,
-    groupPadding: {
-      inner: groupPaddingInner,
-      outer: groupPaddingOuter,
-    },
-  });
-
-  $: getValue = (item: any) => (isScaleBand($yScale) ? $x(item) : $y(item));
-
-  $: getLabelValue = (item: any) => {
-    const value = getValue(item);
-    return (Array.isArray(value) ? greatestAbs(value) : value) + yBaseline;
-  };
-
-  $: getFormattedValue = (item: any) => {
-    const labelValue = getLabelValue(item);
-    let formattedValue = labelValue;
-    if (labelValue != null) {
-      if (format) {
-        // Apply more versatile formatting first
-        formattedValue = formatValue(labelValue, format ?? $yScale.tickFormat?.());
-      }
-    }
-
-    return formattedValue ?? '';
-  };
-
-  $: getTextProps = (item: any): ComponentProps<Text> => {
-    const labelValue = getLabelValue(item);
-    const dimensions = $getDimensions(item);
+  $: getTextProps = (point: PointsSlotProp[number]): ComponentProps<Text> => {
+    const value = isScaleBand($yScale) ? point.xValue : point.yValue;
+    const formattedValue = formatValue(value, format ?? $yScale.tickFormat?.());
 
     if (isScaleBand($yScale)) {
       // Position label left/right on horizontal bars
-      if (labelValue < 0) {
+      if (value < 0) {
         // left
         return {
-          x: dimensions?.x + (placement === 'outside' ? -offset : offset),
-          y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+          value: formattedValue,
+          x: point.x + (placement === 'outside' ? -offset : offset),
+          y: point.y,
           textAnchor: placement === 'outside' ? 'end' : 'start',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
@@ -76,8 +37,9 @@
       } else {
         // right
         return {
-          x: dimensions?.x + dimensions?.width + (placement === 'outside' ? offset : -offset),
-          y: dimensions?.y + (dimensions?.height ?? 0) / 2,
+          value: formattedValue,
+          x: point.x + (placement === 'outside' ? offset : -offset),
+          y: point.y,
           textAnchor: placement === 'outside' ? 'start' : 'end',
           verticalAnchor: 'middle',
           capHeight: '.6rem',
@@ -85,23 +47,27 @@
       }
     } else {
       // Position label top/bottom on vertical bars
-      if (labelValue < 0) {
+      if (value < 0) {
         // bottom
         return {
-          x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-          y: dimensions?.y + dimensions?.height + (placement === 'outside' ? offset : -offset),
+          value: formattedValue,
+          x: point.x,
+          y: point.y + (placement === 'outside' ? offset : -offset),
           capHeight: '.6rem',
           textAnchor: 'middle',
-          verticalAnchor: placement === 'outside' ? 'start' : 'end',
+          verticalAnchor:
+            placement === 'center' ? 'middle' : placement === 'outside' ? 'start' : 'end',
         };
       } else {
         // top
         return {
-          x: dimensions?.x + (dimensions?.width ?? 0) / 2,
-          y: dimensions?.y + (placement === 'outside' ? -offset : offset),
+          value: formattedValue,
+          x: point.x,
+          y: point.y + (placement === 'outside' ? -offset : offset),
           capHeight: '.6rem',
           textAnchor: 'middle',
-          verticalAnchor: placement === 'outside' ? 'end' : 'start',
+          verticalAnchor:
+            placement === 'center' ? 'middle' : placement === 'outside' ? 'end' : 'start',
         };
       }
     }
@@ -109,18 +75,18 @@
 </script>
 
 <g class="Labels">
-  {#each $flatData as item, index}
-    <!-- TODO: Add labels for each item when array/stack?  Use `getValue(item)` instead and iterate -->
-    <Text
-      value={getFormattedValue(item)}
-      class={cls(
-        'text-xs',
-        placement === 'inside'
-          ? 'fill-surface-300 stroke-surface-content'
-          : 'fill-surface-content stroke-surface-100'
-      )}
-      {...getTextProps(item)}
-      {...$$restProps}
-    />
-  {/each}
+  <Points let:points>
+    {#each points as point}
+      <Text
+        class={cls(
+          'text-xs',
+          placement === 'inside'
+            ? 'fill-surface-300 stroke-surface-content'
+            : 'fill-surface-content stroke-surface-100'
+        )}
+        {...getTextProps(point)}
+        {...$$restProps}
+      />
+    {/each}
+  </Points>
 </g>
diff --git a/packages/layerchart/src/lib/components/Legend.svelte b/packages/layerchart/src/lib/components/Legend.svelte
index b6df75aef..46df8600a 100644
--- a/packages/layerchart/src/lib/components/Legend.svelte
+++ b/packages/layerchart/src/lib/components/Legend.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
+  import type { SVGAttributes } from 'svelte/elements';
   import { scaleBand, scaleLinear } from 'd3-scale';
   import { quantize, interpolate, interpolateRound } from 'd3-interpolate';
   import { quantile, range } from 'd3-array';
-  import { format, type FormatType } from 'svelte-ux';
-  import type { SVGAttributes } from 'svelte/elements';
+  import { format, type FormatType } from '@layerstack/utils';
 
   import { chartContext } from './ChartContext.svelte';
   import ColorRamp from './ColorRamp.svelte';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
-  const { rScale } = chartContext() ?? {};
+  const { cScale } = chartContext() ?? {};
 
   type AnyScale = any;
   type Placement =
@@ -41,9 +41,9 @@
     tick?: string;
   } = {};
 
-  $: if (scale == null && rScale) {
+  $: if (scale == null && cScale) {
     // Read scale from chart context
-    scale = $rScale;
+    scale = $cScale;
   }
 
   let xScale: AnyScale;
diff --git a/packages/layerchart/src/lib/components/Line.svelte b/packages/layerchart/src/lib/components/Line.svelte
index ad69fe5c8..54908bee8 100644
--- a/packages/layerchart/src/lib/components/Line.svelte
+++ b/packages/layerchart/src/lib/components/Line.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { motionStore } from '$lib/stores/motionStore.js';
 
diff --git a/packages/layerchart/src/lib/components/LinearGradient.svelte b/packages/layerchart/src/lib/components/LinearGradient.svelte
index cee4a4eaa..44c448d16 100644
--- a/packages/layerchart/src/lib/components/LinearGradient.svelte
+++ b/packages/layerchart/src/lib/components/LinearGradient.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   /** Unique id for linearGradient */
   export let id: string = uniqueId('linearGradient-');
diff --git a/packages/layerchart/src/lib/components/MotionPath.svelte b/packages/layerchart/src/lib/components/MotionPath.svelte
index 82229c3f5..24f7ce237 100644
--- a/packages/layerchart/src/lib/components/MotionPath.svelte
+++ b/packages/layerchart/src/lib/components/MotionPath.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { onMount } from 'svelte';
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   /** Id of path to move object along */
   export let pathId: string = uniqueId('motionPathId-');
diff --git a/packages/layerchart/src/lib/components/Pie.svelte b/packages/layerchart/src/lib/components/Pie.svelte
index 55fea4e71..50761308f 100644
--- a/packages/layerchart/src/lib/components/Pie.svelte
+++ b/packages/layerchart/src/lib/components/Pie.svelte
@@ -5,10 +5,9 @@
 
   import Arc from './Arc.svelte';
   import { chartContext } from './ChartContext.svelte';
-  import Group from './Group.svelte';
   import { degreesToRadians } from '$lib/utils/math.js';
   import { motionStore } from '$lib/stores/motionStore.js';
-  import type { TooltipContextValue } from './TooltipContext.svelte';
+  import type { TooltipContextValue } from './tooltip/TooltipContext.svelte';
 
   /*
     TODO:
@@ -51,9 +50,6 @@
 
   export let cornerRadius = 0;
   export let padAngle = 0;
-  // export let padRadius = 0;
-
-  export let placement: 'left' | 'center' | 'right' | 'none' = 'center';
 
   export let spring: boolean | Parameters<typeof springStore>[1] = undefined;
   export let tweened: boolean | Parameters<typeof tweenedStore>[1] = undefined;
@@ -64,11 +60,11 @@
   export let offset = 0;
 
   /**
-   * Tooltip context to setup mouse events to show tooltip for related data
+   * Tooltip context to setup pointer events to show tooltip for related data
    */
   export let tooltip: TooltipContextValue | undefined = undefined;
 
-  const { data: contextData, x, y, xRange, rGet, config, width, height } = chartContext();
+  const { data: contextData, x, y, xRange, c, cScale, config, width, height } = chartContext();
 
   // @ts-expect-error
   $: resolved_endAngle = endAngle ?? degreesToRadians($config.xRange ? max($xRange) : max(range));
@@ -83,43 +79,21 @@
     .value($x);
 
   $: arcs = pie(data ?? (Array.isArray($contextData) ? $contextData : []));
-
-  $: radius = Math.min($width / 2, $height / 2);
-  $: coords = {
-    x:
-      placement === 'left'
-        ? radius
-        : placement === 'center'
-          ? $width / 2
-          : placement === 'right'
-            ? $width - radius
-            : 0,
-    y: placement === 'none' ? 0 : $height / 2,
-  };
 </script>
 
-<Group x={coords.x} y={coords.y}>
-  <slot {arcs}>
-    {#each arcs as arc}
-      <Arc
-        startAngle={arc.startAngle}
-        endAngle={arc.endAngle}
-        padAngle={arc.padAngle}
-        {innerRadius}
-        {outerRadius}
-        {cornerRadius}
-        {offset}
-        fill={$config.r ? $rGet(arc.data) : null}
-        on:pointerenter={(e) => tooltip?.show(e, arc.data)}
-        on:pointermove={(e) => tooltip?.show(e, arc.data)}
-        on:pointerleave={(e) => tooltip?.hide()}
-        on:touchmove={(e) => {
-          if (tooltip) {
-            // Prevent touch to not interfer with pointer when using tooltip
-            e.preventDefault();
-          }
-        }}
-      />
-    {/each}
-  </slot>
-</Group>
+<slot {arcs}>
+  {#each arcs as arc}
+    <Arc
+      startAngle={arc.startAngle}
+      endAngle={arc.endAngle}
+      padAngle={arc.padAngle}
+      {innerRadius}
+      {outerRadius}
+      {cornerRadius}
+      {offset}
+      fill={$config.c ? $cScale?.($c(arc.data)) : null}
+      data={arc.data}
+      {tooltip}
+    />
+  {/each}
+</slot>
diff --git a/packages/layerchart/src/lib/components/Points.svelte b/packages/layerchart/src/lib/components/Points.svelte
index 419df03ab..001e184f7 100644
--- a/packages/layerchart/src/lib/components/Points.svelte
+++ b/packages/layerchart/src/lib/components/Points.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
-  import { type ComponentProps } from 'svelte';
+  import { getContext, type ComponentProps } from 'svelte';
+  import type { Readable } from 'svelte/store';
   import { extent } from 'd3-array';
   import { pointRadial } from 'd3-shape';
-  import { notNull } from 'svelte-ux';
+  import { notNull } from '@layerstack/utils/typeGuards';
 
   import { chartContext } from './ChartContext.svelte';
   import Circle from './Circle.svelte';
@@ -10,7 +11,22 @@
   import { isScaleBand, type AnyScale } from '../utils/scales.js';
 
   const context = chartContext() as any;
-  const { data: contextData, xGet, y, yGet, xScale, yScale, rGet, config } = context;
+  const {
+    data: contextData,
+    x,
+    xScale,
+    xGet,
+    y,
+    yScale,
+    yGet,
+    cGet,
+    rGet,
+    padding,
+    containerWidth,
+    containerHeight,
+    config,
+    radial,
+  } = context;
 
   type Offset = number | ((value: number, context: any) => number) | undefined;
 
@@ -21,18 +37,31 @@
   export let offsetX: Offset = undefined;
   export let offsetY: Offset = undefined;
 
-  /** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial points are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-  export let radial = false;
-
   /** Enable showing links between related points (array x/y accessors) */
   export let links: boolean | Partial<ComponentProps<Link>> = false;
 
+  export let fill: string | undefined = undefined;
+  export let stroke: string | undefined = undefined;
+  export let strokeWidth: number | string | undefined = undefined;
+
+  type Point = { x: number; y: number; r: number; xValue: any; yValue: any; data: any };
+
+  /** Render to canvas */
+  export let render: ((ctx: CanvasRenderingContext2D, points: Point[]) => any) | undefined =
+    undefined;
+
+  let className: string | undefined = undefined;
+  export { className as class };
+
+  const canvas = getContext<{ ctx: Readable<CanvasRenderingContext2D> }>('canvas');
+  const DEFAULT_FILL = 'rgb(0, 0, 0)';
+
   function getOffset(value: any, offset: Offset, scale: AnyScale) {
     if (typeof offset === 'function') {
       return offset(value, context);
     } else if (offset != null) {
       return offset;
-    } else if (isScaleBand(scale) && !radial) {
+    } else if (isScaleBand(scale) && !$radial) {
       return scale.bandwidth() / 2;
     } else {
       return 0;
@@ -41,50 +70,63 @@
 
   $: pointsData = data ?? $contextData;
 
-  $: points = pointsData.flatMap((d: any) => {
-    if (Array.isArray($config.x)) {
-      /*
+  $: points = pointsData
+    .flatMap((d: any) => {
+      const xValue = $x(d);
+      const yValue = $y(d);
+
+      if (Array.isArray(xValue)) {
+        /*
 				x={["prop1" ,"prop2"]}
 				y="prop3"
 			*/
-      return $xGet(d)
-        .filter(notNull)
-        .map((x: number) => {
+        return xValue.filter(notNull).map((xValue: number) => {
           return {
-            x: x + getOffset(x, offsetX, $xScale),
-            y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
+            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+            r: $config.r ? $rGet(d) : r,
+            xValue,
+            yValue,
             data: d,
           };
         });
-    } else if (Array.isArray($config.y)) {
-      /*
+      } else if (Array.isArray(yValue)) {
+        /*
 				x="prop1"
 				y={["prop2" ,"prop3"]}
 			*/
-      return $yGet(d)
-        .filter(notNull)
-        .map((y: number) => {
+        return yValue.filter(notNull).map((yValue: number) => {
           return {
-            x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-            y: y + getOffset(y, offsetY, $yScale),
+            x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+            y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+            r: $config.r ? $rGet(d) : r,
+            xValue,
+            yValue,
             data: d,
           };
         });
-    } else {
-      /*
+      } else if (xValue != null && yValue != null) {
+        /*
 				x="prop1"
 				y="prop2"
 			*/
-      return {
-        x: $xGet(d) + getOffset($xGet(d), offsetX, $xScale),
-        y: $yGet(d) + getOffset($yGet(d), offsetY, $yScale),
-        data: d,
-      };
-    }
-  });
+        return {
+          x: $xScale(xValue) + getOffset($xScale(xValue), offsetX, $xScale),
+          y: $yScale(yValue) + getOffset($yScale(yValue), offsetY, $yScale),
+          r: $config.r ? $rGet(d) : r,
+          xValue,
+          yValue,
+          data: d,
+        };
+      }
+    })
+    .filter((p: Point) => p) as Point[];
 
   $: _links = pointsData.flatMap((d: any) => {
-    if (Array.isArray($config.x)) {
+    const xValue = $x(d);
+    const yValue = $y(d);
+
+    if (Array.isArray(xValue)) {
       /*
 				x={["prop1" ,"prop2"]}
 				y="prop3"
@@ -93,15 +135,15 @@
       const y = $yGet(d) + getOffset($yGet(d), offsetY, $yScale);
       return {
         source: {
-          x: xMin + getOffset(xMin, offsetX, $xScale) + r,
+          x: xMin + getOffset(xMin, offsetX, $xScale) + ($config.r ? $rGet(d) : r),
           y,
         },
         target: {
-          x: xMax + getOffset(xMax, offsetX, $xScale) - r,
+          x: xMax + getOffset(xMax, offsetX, $xScale) - ($config.r ? $rGet(d) : r),
           y: y,
         },
       };
-    } else if (Array.isArray($config.y)) {
+    } else if (Array.isArray(yValue)) {
       /*
 				x="prop1"
 				y={["prop2" ,"prop3"]}
@@ -120,31 +162,72 @@
       };
     }
   });
+
+  $: renderContext = canvas ? 'canvas' : 'svg';
+  $: ctx = canvas?.ctx;
+  $: if (renderContext === 'canvas' && $ctx) {
+    let computedStyles: Partial<CSSStyleDeclaration> = {};
+
+    // Transfer classes defined on <GeoPath> to <canvas> to enable window.getComputedStyle() retrieval (Tailwind classes, etc)
+    if (className) {
+      $ctx.canvas.classList.add(...className.split(' '));
+      computedStyles = window.getComputedStyle($ctx.canvas);
+    }
+
+    // Clear with negative offset due to Canvas `context.translate(...)`
+    $ctx.clearRect(-$padding.left, -$padding.top, $containerWidth, $containerHeight);
+
+    if (render) {
+      render($ctx, points);
+    } else {
+      points.forEach((point) => {
+        $ctx.beginPath();
+        $ctx.arc(point.x, point.y, point.r, 0, 2 * Math.PI, false);
+
+        $ctx.lineWidth = Number(strokeWidth ?? 0);
+        $ctx.strokeStyle =
+          (stroke ?? computedStyles.stroke === 'none')
+            ? 'transparent'
+            : (computedStyles.stroke ?? '');
+        $ctx.stroke();
+
+        $ctx.fillStyle =
+          fill ??
+          (computedStyles.fill !== DEFAULT_FILL ? computedStyles.fill : undefined) ??
+          'transparent';
+        $ctx.fill();
+      });
+    }
+  }
 </script>
 
 <slot {points}>
-  {#if links}
-    <g class="link-group">
-      {#each _links as link}
-        <Link
-          data={link}
-          class="stroke-surface-content/50"
-          {...typeof links === 'object' ? links : null}
+  {#if renderContext === 'svg'}
+    {#if links}
+      <g class="link-group">
+        {#each _links as link}
+          <Link
+            data={link}
+            class="stroke-surface-content/50"
+            {...typeof links === 'object' ? links : null}
+          />
+        {/each}
+      </g>
+    {/if}
+
+    <g class="point-group">
+      {#each points as point}
+        {@const radialPoint = pointRadial(point.x, point.y)}
+        <Circle
+          cx={$radial ? radialPoint[0] : point.x}
+          cy={$radial ? radialPoint[1] : point.y}
+          r={point.r}
+          fill={fill ?? ($config.c ? $cGet(point.data) : null)}
+          {stroke}
+          class={className}
+          {...$$restProps}
         />
       {/each}
     </g>
   {/if}
-
-  <g class="point-group">
-    {#each points as point}
-      {@const radialPoint = pointRadial(point.x, point.y)}
-      <Circle
-        cx={radial ? radialPoint[0] : point.x}
-        cy={radial ? radialPoint[1] : point.y}
-        {r}
-        fill={$config.r ? $rGet(point.data) : null}
-        {...$$restProps}
-      />
-    {/each}
-  </g>
 </slot>
diff --git a/packages/layerchart/src/lib/components/RadialGradient.svelte b/packages/layerchart/src/lib/components/RadialGradient.svelte
index 65d15f0a9..0b1bf6bd1 100644
--- a/packages/layerchart/src/lib/components/RadialGradient.svelte
+++ b/packages/layerchart/src/lib/components/RadialGradient.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   /** Unique id for linearGradient */
   export let id: string = uniqueId('radialGradient-');
diff --git a/packages/layerchart/src/lib/components/Rect.svelte b/packages/layerchart/src/lib/components/Rect.svelte
index 091d2afb4..08600db1c 100644
--- a/packages/layerchart/src/lib/components/Rect.svelte
+++ b/packages/layerchart/src/lib/components/Rect.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { tick } from 'svelte';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import {
     motionStore,
@@ -47,6 +47,7 @@
   class={cls($$props.fill == null && 'fill-surface-content')}
   {...$$restProps}
   on:click
+  on:pointerenter
   on:pointerover
   on:pointermove
   on:pointerout
diff --git a/packages/layerchart/src/lib/components/RectClipPath.svelte b/packages/layerchart/src/lib/components/RectClipPath.svelte
index 2a5c49831..881ad47b5 100644
--- a/packages/layerchart/src/lib/components/RectClipPath.svelte
+++ b/packages/layerchart/src/lib/components/RectClipPath.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
-  import { uniqueId } from 'svelte-ux';
+  import { uniqueId } from '@layerstack/utils';
 
   import ClipPath from './ClipPath.svelte';
   import Rect from './Rect.svelte';
diff --git a/packages/layerchart/src/lib/components/Rule.svelte b/packages/layerchart/src/lib/components/Rule.svelte
index 6ee2408a3..127f26a7b 100644
--- a/packages/layerchart/src/lib/components/Rule.svelte
+++ b/packages/layerchart/src/lib/components/Rule.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { extent } from 'd3-array';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import Line from './Line.svelte';
diff --git a/packages/layerchart/src/lib/components/Spline.svelte b/packages/layerchart/src/lib/components/Spline.svelte
index ecc2a12cc..f94a42a1e 100644
--- a/packages/layerchart/src/lib/components/Spline.svelte
+++ b/packages/layerchart/src/lib/components/Spline.svelte
@@ -9,7 +9,8 @@
   import type { CurveFactory, CurveFactoryLineOnly, Line } from 'd3-shape';
   // import { interpolateString } from 'd3-interpolate';
   import { interpolatePath } from 'd3-interpolate-path';
-  import { cls } from 'svelte-ux';
+  import { max } from 'd3-array';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import Group from './Group.svelte';
@@ -17,7 +18,7 @@
   import { accessor, type Accessor } from '../utils/common.js';
   import { isScaleBand } from '../utils/scales.js';
 
-  const { data: contextData, xScale, yScale, x: contextX, y: contextY } = chartContext();
+  const { data: contextData, xScale, yScale, x: contextX, y: contextY, radial } = chartContext();
 
   /** Override data instead of using context */
   export let data: any = undefined;
@@ -25,12 +26,9 @@
   /** Pass `<path d={...} />` explicitly instead of calculating from data / context */
   export let pathData: string | undefined | null = undefined;
 
-  /** Use radial instead of cartesian line generator, mapping `x` to `angle` and `y` to `radius`.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
-  export let radial = false;
-
-  /** Override `x` accessor from Chart context.  Applies to `angle` when `radial=true` */
+  /** Override `x` accessor from Chart context */
   export let x: Accessor = undefined;
-  /** Override `y` accessor from Chart context.  Applies to `radius` when `radial=true` */
+  /** Override `y` accessor from Chart context */
   export let y: Accessor = undefined;
 
   /** Interpolate path data using d3-interpolate-path.  Works best without `draw` enabled */
@@ -51,17 +49,23 @@
   export let defined: Parameters<Line<any>['defined']>[0] | undefined = undefined;
 
   function getScaleValue(data: any, scale: typeof $xScale | typeof $yScale, accessor: Function) {
+    let value = accessor(data);
+
+    if (Array.isArray(value)) {
+      value = max(value);
+    }
+
     if (scale.domain().length) {
       // If scale is defined with domain, map value
-      return scale(accessor(data));
+      return scale(value);
     } else {
       // Use raw value
-      return accessor(data);
+      return value;
     }
   }
 
-  const _x = accessor(x);
-  const _y = accessor(y);
+  const xAccessor = x ? accessor(x) : $contextX;
+  const yAccessor = y ? accessor(y) : $contextY;
 
   $: xOffset = isScaleBand($xScale) ? $xScale.bandwidth() / 2 : 0;
   $: yOffset = isScaleBand($yScale) ? $yScale.bandwidth() / 2 : 0;
@@ -71,15 +75,17 @@
   $: tweenedOptions = tweened ? { interpolate: interpolatePath, ...tweened } : false;
   $: tweened_d = motionStore('', { tweened: tweenedOptions });
   $: {
-    const path = radial
+    const path = $radial
       ? lineRadial()
-          .angle((d) => getScaleValue(d, $xScale, x ? _x : $contextX))
-          .radius((d) => getScaleValue(d, $yScale, y ? _y : $contextY))
+          .angle((d) => getScaleValue(d, $xScale, xAccessor))
+          .radius((d) => getScaleValue(d, $yScale, yAccessor))
       : d3Line()
-          .x((d) => getScaleValue(d, $xScale, x ? _x : $contextX) + xOffset)
-          .y((d) => getScaleValue(d, $yScale, y ? _y : $contextY) + yOffset);
+          .x((d) => getScaleValue(d, $xScale, xAccessor) + xOffset)
+          .y((d) => getScaleValue(d, $yScale, yAccessor) + yOffset);
+
+    path.defined(defined ?? ((d) => xAccessor(d) != null && yAccessor(d) != null));
+
     if (curve) path.curve(curve);
-    if (defined) path.defined(defined);
 
     d = pathData ?? path(data ?? $contextData) ?? '';
     tweened_d.set(d);
@@ -133,9 +139,15 @@
   <path
     d={$tweened_d}
     {...$$restProps}
-    class={cls('path-line fill-none', !$$props.stroke && 'stroke-surface-content', $$props.class)}
+    class={cls(
+      'path-line',
+      !$$props.fill && 'fill-none',
+      !$$props.stroke && 'stroke-surface-content',
+      $$props.class
+    )}
     in:drawTransition|global={typeof draw === 'object' ? draw : undefined}
     on:click
+    on:pointerenter
     on:pointermove
     on:pointerleave
     bind:this={pathEl}
diff --git a/packages/layerchart/src/lib/components/Text.svelte b/packages/layerchart/src/lib/components/Text.svelte
index 8a35f03d0..1efcd441c 100644
--- a/packages/layerchart/src/lib/components/Text.svelte
+++ b/packages/layerchart/src/lib/components/Text.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { tick } from 'svelte';
   import type { spring as springStore, tweened as tweenedStore } from 'svelte/motion';
+  import { cls } from '@layerstack/tailwind';
 
-  import { cls } from 'svelte-ux';
   import { getStringWidth } from '$lib/utils/string.js';
   import { motionStore } from '$lib/stores/motionStore.js';
 
diff --git a/packages/layerchart/src/lib/components/Threshold.svelte b/packages/layerchart/src/lib/components/Threshold.svelte
index 14efd4358..dbca3220a 100644
--- a/packages/layerchart/src/lib/components/Threshold.svelte
+++ b/packages/layerchart/src/lib/components/Threshold.svelte
@@ -4,89 +4,37 @@
       - https://observablehq.com/@d3/difference-chart
       - https://github.com/airbnb/visx/issues/245
   */
-  import { area as d3Area, line as d3Line } from 'd3-shape';
+  import type { ComponentProps } from 'svelte';
   import type { CurveFactory } from 'd3-shape';
-  import { min, max } from 'd3-array';
-  import { chartContext } from './ChartContext.svelte';
-  import { accessor, type Accessor } from '../utils/common.js';
+  import { min } from 'd3-array';
 
-  const { data: contextData, xGet, yGet, yRange } = chartContext();
+  import { chartContext } from './ChartContext.svelte';
+  import Area from './Area.svelte';
+  import ClipPath from './ClipPath.svelte';
 
-  // Properties to override what is used from context
-  export let data: any = undefined; // TODO: Update Type
-  export let x: Accessor = undefined;
-  export let y0: Accessor = undefined;
-  export let y1: Accessor = undefined;
+  const { y, yDomain } = chartContext();
 
   export let curve: CurveFactory | undefined = undefined;
-  export let defined: Parameters<typeof areaPath.defined>[0] | undefined = undefined;
-  export let id = Math.random().toString(16).slice(-4);
-
-  const _x = accessor(x);
-  const _y0 = accessor(y0);
-  const _y1 = accessor(y1);
-
-  $: areaPath = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d: any) => $yGet(d)[0])
-    .y1(y1 ? _y1 : (d: any) => $yGet(d)[1]);
-  $: if (curve) areaPath.curve(curve);
-  $: if (defined) areaPath.defined(defined);
-
-  $: clipPathBelow = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d: any) => $yGet(d)[0])
-    .y1(y1 ? _y1 : (d: any) => max($yRange));
-  $: if (curve) clipPathBelow.curve(curve);
-  $: if (defined) clipPathBelow.defined(defined);
-
-  $: clipPathAbove = d3Area()
-    .x(x ? _x : $xGet)
-    .y0(y0 ? _y0 : (d: any) => max($yRange))
-    .y1(y1 ? _y1 : (d: any) => $yGet(d)[1]);
-  $: if (curve) clipPathAbove.curve(curve);
-  $: if (defined) clipPathAbove.defined(defined);
-
-  $: linePathAbove = d3Line()
-    .x(x ? _x : $xGet)
-    .y(y0 ? _y0 : (d: any) => $yGet(d)[0]);
-  $: if (curve) linePathAbove.curve(curve);
-  $: if (defined) linePathAbove.defined(defined);
-
-  $: linePathBelow = d3Line()
-    .x(x ? _x : $xGet)
-    .y(y1 ? _y1 : (d: any) => $yGet(d)[1]);
-  $: if (curve) linePathBelow.curve(curve);
-  $: if (defined) linePathBelow.defined(defined);
+  export let defined: ComponentProps<Area>['defined'] | undefined = undefined;
 </script>
 
 <!-- Recreate on curve change as otherwise is 1 state change behind for some reason -->
 {#key curve}
-  <g class="clip-paths">
-    <defs>
-      <clipPath id="threshold-clip-below-{id}">
-        <path d={clipPathBelow(data ?? $contextData)} />
-      </clipPath>
-      <clipPath id="threshold-clip-above-{id}">
-        <path d={clipPathAbove(data ?? $contextData)} />
-      </clipPath>
-    </defs>
-  </g>
+  <ClipPath>
+    <svelte:fragment slot="clip">
+      <Area y0={(d) => $y(d)[0]} y1={(d) => min($yDomain)} {curve} {defined} />
+    </svelte:fragment>
 
-  <slot
-    name="pathAbove"
-    areaPathData={areaPath(data ?? $contextData)}
-    clipPath="url(#threshold-clip-below-{id})"
-    linePathData={linePathAbove(data ?? $contextData)}
-  />
+    <slot name="above" {curve} {defined} />
+  </ClipPath>
 
-  <slot
-    name="pathBelow"
-    areaPathData={areaPath(data ?? $contextData)}
-    clipPath="url(#threshold-clip-above-{id})"
-    linePathData={linePathBelow(data ?? $contextData)}
-  />
-{/key}
+  <ClipPath>
+    <svelte:fragment slot="clip">
+      <Area y0={(d) => min($yDomain)} y1={(d) => $y(d)[1]} {curve} {defined} />
+    </svelte:fragment>
 
-<!-- Fix `<Threshold> received an unexpected slot "default".` warning -->
-<slot />
+    <slot name="below" {curve} {defined} />
+  </ClipPath>
+
+  <slot {curve} {defined} />
+{/key}
diff --git a/packages/layerchart/src/lib/components/TooltipItem.svelte b/packages/layerchart/src/lib/components/TooltipItem.svelte
deleted file mode 100644
index 3bc5e4ef7..000000000
--- a/packages/layerchart/src/lib/components/TooltipItem.svelte
+++ /dev/null
@@ -1,32 +0,0 @@
-<script lang="ts">
-  import { cls, format as formatUtil, type FormatType } from 'svelte-ux';
-
-  export let label: any;
-  /** Value to be formatted and displayed.  Can also be passed as default slot */
-  export let value: any = undefined;
-  export let format: FormatType | undefined = undefined;
-  export let valueAlign: 'left' | 'right' | 'center' = 'left';
-
-  export let classes: {
-    label?: string;
-    value?: string;
-  } = {};
-</script>
-
-<div class={cls('label', classes.label)}>
-  <slot name="label">{label}:</slot>
-</div>
-
-<div
-  class={cls(
-    'value',
-    {
-      'text-right': valueAlign === 'right',
-      'text-center': valueAlign === 'center',
-    },
-    classes.value,
-    $$props.class
-  )}
->
-  <slot>{format ? formatUtil(value, format) : value}</slot>
-</div>
diff --git a/packages/layerchart/src/lib/components/TooltipSeparator.svelte b/packages/layerchart/src/lib/components/TooltipSeparator.svelte
deleted file mode 100644
index 3436fa175..000000000
--- a/packages/layerchart/src/lib/components/TooltipSeparator.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-  import { cls } from 'svelte-ux';
-</script>
-
-<div class={cls('rounded bg-white/50 my-1 col-span-full h-px', $$props.class)} />
diff --git a/packages/layerchart/src/lib/components/TransformControls.svelte b/packages/layerchart/src/lib/components/TransformControls.svelte
index b4b596720..c933f1121 100644
--- a/packages/layerchart/src/lib/components/TransformControls.svelte
+++ b/packages/layerchart/src/lib/components/TransformControls.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { Button, Icon, MenuButton, Tooltip, cls } from 'svelte-ux';
+  import { Button, Icon, MenuButton, Tooltip } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import {
     mdiArrowULeftTop,
diff --git a/packages/layerchart/src/lib/components/Voronoi.svelte b/packages/layerchart/src/lib/components/Voronoi.svelte
index 68d6a0872..6a9ae4c92 100644
--- a/packages/layerchart/src/lib/components/Voronoi.svelte
+++ b/packages/layerchart/src/lib/components/Voronoi.svelte
@@ -5,13 +5,14 @@
   import type { GeoPermissibleObjects } from 'd3-geo';
   // @ts-expect-error
   import { geoVoronoi } from 'd3-geo-voronoi';
-  import { cls } from 'svelte-ux';
+  import { pointRadial } from 'd3-shape';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from './ChartContext.svelte';
   import GeoPath from './GeoPath.svelte';
   import { geoContext, type GeoContext } from './GeoContext.svelte';
 
-  const { flatData, xGet, yGet, x: xContext, y: yContext, width, height } = chartContext();
+  const { flatData, xGet, yGet, x: xContext, y: yContext, width, height, radial } = chartContext();
   const geo = geoContext() as GeoContext | undefined;
 
   /** Override data instead of using context */
@@ -24,6 +25,12 @@
 
   const dispatch = createEventDispatcher<{
     click: { data: any; point?: [number, number]; feature?: GeoPermissibleObjects };
+    pointerenter: {
+      event: PointerEvent;
+      data: any;
+      point?: [number, number];
+      feature?: GeoPermissibleObjects;
+    };
     pointermove: {
       event: PointerEvent;
       data: any;
@@ -40,7 +47,14 @@
     const x = Array.isArray(xValue) ? min(xValue) : xValue;
     const y = Array.isArray(yValue) ? min(yValue) : yValue;
 
-    const point = [x, y];
+    let point: [number, number];
+    if ($radial) {
+      const radialPoint = pointRadial(x, y);
+      // Assume radial is also centered
+      point = [radialPoint[0] + $width / 2, radialPoint[1] + $height / 2];
+    } else {
+      point = [x, y];
+    }
     // @ts-expect-error
     point.data = d;
     return point;
@@ -58,7 +72,8 @@
       <GeoPath
         geojson={feature}
         class={cls('fill-transparent', classes.path)}
-        on:pointerenter
+        on:pointerenter={(e) =>
+          dispatch('pointerenter', { event: e, data: feature.properties.site.data, feature })}
         on:pointermove={(e) =>
           dispatch('pointermove', { event: e, data: feature.properties.site.data, feature })}
         on:pointerleave
@@ -78,7 +93,7 @@
       <path
         d={voronoi.renderCell(i)}
         class={cls('fill-transparent', classes.path)}
-        on:pointerenter
+        on:pointerenter={(e) => dispatch('pointerenter', { event: e, data: point.data, point })}
         on:pointermove={(e) => dispatch('pointermove', { event: e, data: point.data, point })}
         on:pointerleave
         on:touchmove={(e) => {
diff --git a/packages/layerchart/src/lib/components/charts/AreaChart.svelte b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
new file mode 100644
index 000000000..6db580a65
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/AreaChart.svelte
@@ -0,0 +1,222 @@
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleTime } from 'd3-scale';
+  import { stack } from 'd3-shape';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Area from '../Area.svelte';
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Points from '../Points.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    series?: typeof series;
+    labels?: typeof labels;
+    axis?: typeof axis;
+    points?: typeof points;
+    props?: typeof props;
+    seriesLayout?: typeof seriesLayout;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
+  export let series: {
+    key: string;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Area>>;
+  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+
+  /** Determine how to layout series.  Overlap (default) or stack */
+  export let seriesLayout: 'overlap' | 'stack' = 'overlap';
+  $: stackSeries = seriesLayout === 'stack';
+
+  export let axis: ComponentProps<Axis> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let points: ComponentProps<Points> | boolean = false;
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    area?: Partial<ComponentProps<Area>>;
+    points?: Partial<ComponentProps<Points>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+  } = {};
+
+  $: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  $: if (stackSeries) {
+    const seriesKeys = series.map((s) => s.key);
+    const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
+
+    chartData = chartData.map((d, i) => {
+      return {
+        ...d,
+        stackData: stackData.map((sd) => sd[i]),
+      };
+    });
+  }
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+</script>
+
+<Chart
+  data={chartData}
+  {x}
+  {xScale}
+  y={y ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  yBaseline={0}
+  yNice
+  {radial}
+  padding={radial || axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'bisect-x' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  <slot {...slotProps}>
+    <Svg center={radial}>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement={radial ? 'radius' : 'left'}
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement={radial ? 'angle' : 'bottom'}
+            grid={radial}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Area
+            data={s.data}
+            y0={stackSeries
+              ? (d) => d.stackData[i][0]
+              : Array.isArray(s.value)
+                ? s.value[0]
+                : undefined}
+            y1={stackSeries
+              ? (d) => d.stackData[i][1]
+              : Array.isArray(s.value)
+                ? s.value[1]
+                : (s.value ?? s.key)}
+            line={{ class: 'stroke-2', stroke: s.color }}
+            fill={s.color}
+            fill-opacity={0.3}
+            {...props.area}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      {#if points}
+        {#each series as s}
+          <Points
+            data={s.data}
+            fill={s.color}
+            class="stroke-surface-200"
+            {...props.points}
+            {...typeof points === 'object' ? points : null}
+          />
+        {/each}
+      {/if}
+
+      <slot name="highlight" {...slotProps}>
+        {#each series as s, i}
+          <Highlight
+            y={stackSeries ? (d) => d.stackData[i][1] : (s.value ?? s.key)}
+            points={{ fill: s.color }}
+            lines={i == 0}
+            {...props.highlight}
+          />
+        {/each}
+      </slot>
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          <!-- Reverse series order so tooltip items match stacks -->
+          {@const seriesItems = stackSeries ? [...series].reverse() : series}
+          {#each seriesItems as s}
+            {@const valueAccessor = accessor(s.value ?? s.key)}
+            <Tooltip.Item
+              label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
+              value={valueAccessor(data)}
+              color={s.color}
+              {format}
+              valueAlign="right"
+            />
+          {/each}
+
+          {#if stackSeries}
+            <Tooltip.Separator />
+
+            <Tooltip.Item
+              label="total"
+              value={sum(series, (s) => {
+                const valueAccessor = accessor(s.value ?? s.key);
+                return valueAccessor(data);
+              })}
+              format="integer"
+              valueAlign="right"
+            />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/charts/BarChart.svelte b/packages/layerchart/src/lib/components/charts/BarChart.svelte
new file mode 100644
index 000000000..8d21617d7
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/BarChart.svelte
@@ -0,0 +1,255 @@
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleBand, scaleLinear } from 'd3-scale';
+  import { stack } from 'd3-shape';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Bars from '../Bars.svelte';
+  import Chart from '../Chart.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    series?: typeof series;
+    seriesLayout?: typeof seriesLayout;
+    labels?: typeof labels;
+    axis?: typeof axis;
+    orientation?: typeof orientation;
+    bandPadding?: typeof bandPadding;
+    props?: typeof props;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  export let orientation: 'vertical' | 'horizontal' = 'vertical';
+  $: isVertical = orientation === 'vertical';
+
+  export let series: {
+    key: string;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Bars>>;
+  }[] = [
+    {
+      key: 'default',
+      value: orientation === 'vertical' ? y : x,
+      color: 'hsl(var(--color-primary))',
+    },
+  ];
+
+  /** Determine how to layout series.  Overlap (default), stack, or group side by side */
+  export let seriesLayout: 'overlap' | 'stack' | 'group' = 'overlap';
+  $: stackSeries = seriesLayout === 'stack';
+  $: groupSeries = seriesLayout === 'group';
+
+  export let axis: ComponentProps<Axis> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+
+  /** Padding between primary x or y bands/bars, applied to scaleBand().padding() */
+  export let bandPadding = 0.4;
+  /** Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() */
+  export let groupPadding = 0;
+
+  $: xScale = isVertical ? scaleBand().padding(bandPadding) : scaleLinear();
+  $: xBaseline = isVertical ? undefined : 0;
+
+  $: yScale = isVertical ? scaleLinear() : scaleBand().padding(bandPadding);
+  $: yBaseline = isVertical ? 0 : undefined;
+
+  let x1Scale: ChartProps['x1Scale'];
+  let x1Domain: ChartProps['x1Domain'];
+  let x1Range: ChartProps['x1Range'];
+
+  let y1Scale: ChartProps['y1Scale'];
+  let y1Domain: ChartProps['y1Domain'];
+  let y1Range: ChartProps['y1Range'];
+
+  $: if (seriesLayout === 'group') {
+    if (isVertical) {
+      x1Scale = scaleBand().padding(groupPadding);
+      x1Domain = series.map((s) => s.key);
+      x1Range = ({ xScale }) => [0, xScale.bandwidth?.()];
+    } else {
+      y1Scale = scaleBand().padding(groupPadding);
+      y1Domain = series.map((s) => s.key);
+      y1Range = ({ yScale }) => [0, yScale.bandwidth?.()];
+    }
+  }
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    bars?: Partial<ComponentProps<Bars>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+  } = {};
+
+  $: allSeriesData = series
+    .flatMap((s) =>
+      s.data?.map((d) => {
+        return { seriesKey: s.key, ...d };
+      })
+    )
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  $: if (stackSeries) {
+    const seriesKeys = series.map((s) => s.key);
+    const stackData = stack().keys(seriesKeys)(chartDataArray(data)) as any[];
+
+    chartData = chartData.map((d, i) => {
+      return {
+        ...d,
+        stackData: stackData.map((sd) => sd[i]),
+      };
+    });
+  }
+</script>
+
+<Chart
+  data={chartData}
+  x={x ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  {xScale}
+  {xBaseline}
+  xNice={orientation === 'horizontal'}
+  {x1Scale}
+  {x1Domain}
+  {x1Range}
+  y={y ??
+    (stackSeries
+      ? (d) => series.map((s, i) => d.stackData[i][1])
+      : series.map((s) => s.value ?? s.key))}
+  {yScale}
+  {yBaseline}
+  yNice={orientation === 'vertical'}
+  {y1Scale}
+  {y1Domain}
+  {y1Range}
+  padding={axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'band' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  <slot {...slotProps}>
+    <Svg>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement="left"
+            grid={isVertical}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement="bottom"
+            grid={!isVertical}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s, i}
+          <Bars
+            data={s.data}
+            x={!isVertical
+              ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+              : undefined}
+            y={isVertical
+              ? stackSeries
+                ? (d) => d.stackData[i]
+                : (s.value ?? (s.data ? undefined : s.key))
+              : undefined}
+            x1={isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
+            y1={!isVertical && groupSeries ? (d) => s.value ?? s.key : undefined}
+            radius={4}
+            strokeWidth={1}
+            fill={s.color}
+            {...props.bars}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      <slot name="highlight" {...slotProps}>
+        <Highlight area {...props.highlight} />
+      </slot>
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(isVertical ? x(data) : y(data))}</Tooltip.Header>
+        <Tooltip.List>
+          <!-- Reverse series order so tooltip items match stacks -->
+          {@const seriesItems = stackSeries ? [...series].reverse() : series}
+          {#each seriesItems as s}
+            {@const valueAccessor = accessor(s.value ?? s.key)}
+            <Tooltip.Item
+              label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
+              value={valueAccessor(data)}
+              color={s.color}
+              {format}
+              valueAlign="right"
+            />
+          {/each}
+
+          {#if stackSeries || groupSeries}
+            <Tooltip.Separator />
+
+            <Tooltip.Item
+              label="total"
+              value={sum(series, (s) => {
+                const valueAccessor = accessor(s.value ?? s.key);
+                return valueAccessor(data);
+              })}
+              format="integer"
+              valueAlign="right"
+            />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/charts/LineChart.svelte b/packages/layerchart/src/lib/components/charts/LineChart.svelte
new file mode 100644
index 000000000..5886f213c
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/LineChart.svelte
@@ -0,0 +1,175 @@
+<script lang="ts" generics="TData">
+  import Points from '../Points.svelte';
+
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleTime } from 'd3-scale';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Spline from '../Spline.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    series?: typeof series;
+    labels?: typeof labels;
+    axis?: typeof axis;
+    points?: typeof points;
+    props?: typeof props;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  /** Use radial instead of cartesian coordinates, mapping `x` to `angle` and `y`` to radial.  Radial lines are positioned relative to the origin, use transform (ex. `<Group center>`) to change the origin */
+  export let radial = false;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Spline>>;
+  }[] = [{ key: 'default', value: y, color: 'hsl(var(--color-primary))' }];
+
+  export let axis: ComponentProps<Axis> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+  export let points: ComponentProps<Points> | boolean = false;
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    spline?: Partial<ComponentProps<Spline>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+    points?: Partial<ComponentProps<Points>>;
+  } = {};
+
+  $: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d) as Array<TData & { stackData?: any }>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<
+    TData & { stackData?: any }
+  >;
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartData[0]) instanceof Date ? scaleTime() : scaleLinear();
+</script>
+
+<Chart
+  data={chartData}
+  {x}
+  {xScale}
+  y={y ?? series.map((s) => s.value ?? s.key)}
+  yBaseline={0}
+  yNice
+  {radial}
+  padding={radial || axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'bisect-x' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  <slot {...slotProps}>
+    <Svg center={radial}>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement={radial ? 'radius' : 'left'}
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement={radial ? 'angle' : 'bottom'}
+            grid={radial}
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s}
+          <Spline
+            data={s.data}
+            y={s.value ?? (s.data ? undefined : s.key)}
+            class="stroke-2"
+            stroke={s.color}
+            {...props.spline}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      {#if points}
+        {#each series as s}
+          <Points
+            data={s.data}
+            fill={s.color}
+            class="stroke-surface-200"
+            {...props.points}
+            {...typeof points === 'object' ? points : null}
+          />
+        {/each}
+      {/if}
+
+      {#if labels}
+        <Labels {...props.labels} {...typeof labels === 'object' ? labels : null} />
+      {/if}
+
+      <slot name="highlight" {...slotProps}>
+        {#each series as s, i}
+          <Highlight
+            data={s.data}
+            y={s.value ?? s.key}
+            points={{ fill: s.color }}
+            lines={i === 0}
+            {...props.highlight}
+          />
+        {/each}
+      </slot>
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          {#each series as s}
+            {@const valueAccessor = accessor(s.value ?? s.key)}
+            <Tooltip.Item
+              label={s.label ?? (s.key !== 'default' ? s.key : 'value')}
+              value={valueAccessor(data)}
+              color={s.color}
+              {format}
+            />
+          {/each}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/charts/PieChart.svelte b/packages/layerchart/src/lib/components/charts/PieChart.svelte
new file mode 100644
index 000000000..668d960d6
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/PieChart.svelte
@@ -0,0 +1,192 @@
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { sum } from 'd3-array';
+  import { format } from '@layerstack/utils';
+
+  import Arc from '../Arc.svelte';
+  import Chart from '../Chart.svelte';
+  import Group from '../Group.svelte';
+  import Pie from '../Pie.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  type ChartProps = ComponentProps<Chart<TData>>;
+
+  interface $$Props extends ChartProps {
+    label?: typeof label;
+    value?: typeof label;
+    maxValue?: typeof maxValue;
+    range?: typeof range;
+    innerRadius?: typeof innerRadius;
+    outerRadius?: typeof outerRadius;
+    cornerRadius?: typeof cornerRadius;
+    padAngle?: typeof padAngle;
+    props?: typeof props;
+    series?: typeof series;
+    // labels?: typeof labels;
+  }
+
+  export let data: ChartProps['data'] = [];
+
+  /** Label accessor */
+  export let label: Accessor<TData> = 'label';
+  $: labelAccessor = accessor(label);
+
+  /** Value accessor */
+  export let value: Accessor<TData> = 'value';
+  $: valueAccessor = accessor(value);
+
+  /** Maximum possible value, useful when `data` is single item */
+  export let maxValue: number | undefined = undefined;
+
+  export let series: {
+    key: string | number;
+    label?: string;
+    value?: Accessor<TData>;
+    /** Provider series data, else uses chart data (with value/key accessor) */
+    data?: TData[];
+    /** Maximum possible value, useful when `data` is single item */
+    maxValue?: number;
+    color?: string;
+    props?: Partial<ComponentProps<Arc>>;
+  }[] = [{ key: 'default', value: value /*, color: 'hsl(var(--color-primary))'*/ }];
+
+  /**
+   * Range [min,max] in degrees.  See also startAngle/endAngle
+   */
+  export let range = [0, 360];
+
+  /**
+   * Define innerRadius.
+   *   value >= 1: discrete value
+   *   value >  0: percent of `outerRadius`
+   *   value <  0: offset of `outerRadius`
+   *   default: yRange min
+   */
+  export let innerRadius: number | undefined = undefined;
+
+  /**
+   * Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2)
+   */
+  export let outerRadius: number | undefined = undefined;
+
+  export let cornerRadius = 0;
+  export let padAngle = 0;
+
+  export let props: {
+    pie?: Partial<ComponentProps<Pie>>;
+    group?: Partial<ComponentProps<Group>>;
+    arc?: Partial<ComponentProps<Arc>>;
+  } = {};
+
+  $: allSeriesData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d) as Array<TData>;
+
+  $: chartData = (allSeriesData.length ? allSeriesData : chartDataArray(data)) as Array<TData>;
+
+  $: seriesColors = series.map((s) => s.color).filter((d) => d != null);
+</script>
+
+<Chart
+  data={chartData}
+  x={value}
+  y={label}
+  c={label}
+  cRange={seriesColors.length
+    ? seriesColors
+    : [
+        'hsl(var(--color-primary))',
+        'hsl(var(--color-secondary))',
+        'hsl(var(--color-info))',
+        'hsl(var(--color-success))',
+        'hsl(var(--color-warning))',
+        'hsl(var(--color-danger))',
+      ]}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:c
+  let:cScale
+  let:yScale
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+>
+  {@const slotProps = { label, value, x, xScale, y, yScale, width, height, padding, tooltip }}
+  <slot {...slotProps}>
+    <Svg center>
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        <Group {...props.group}>
+          {#each series as s, i}
+            {@const singleArc = s.data?.length === 1 || chartData.length === 1}
+            {#if singleArc}
+              {@const d = s.data?.[0] || chartData[0]}
+              <Arc
+                value={valueAccessor(d)}
+                domain={[0, s.maxValue ?? maxValue ?? sum(chartData, valueAccessor)]}
+                {range}
+                {innerRadius}
+                outerRadius={(outerRadius ?? 0) < 0 ? i * (outerRadius ?? 0) : outerRadius}
+                {cornerRadius}
+                {padAngle}
+                fill={s.color ?? cScale(c(d))}
+                track={{ fill: s.color ?? cScale(c(d)), 'fill-opacity': 0.1 }}
+                {tooltip}
+                data={d}
+                {...props.arc}
+              />
+            {:else}
+              <Pie
+                data={s.data}
+                {range}
+                {innerRadius}
+                {outerRadius}
+                {cornerRadius}
+                {padAngle}
+                {...props.pie}
+                let:arcs
+              >
+                {#each arcs as arc}
+                  <Arc
+                    startAngle={arc.startAngle}
+                    endAngle={arc.endAngle}
+                    outerRadius={i * (outerRadius ?? 0)}
+                    {innerRadius}
+                    {cornerRadius}
+                    {padAngle}
+                    fill={cScale(c(arc.data))}
+                    data={arc.data}
+                    {tooltip}
+                    {...props.arc}
+                  />
+                {/each}
+              </Pie>
+            {/if}
+          {/each}
+        </Group>
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        <Tooltip.List>
+          <Tooltip.Item
+            label={labelAccessor(data)}
+            value={valueAccessor(data)}
+            color={cScale(c(data))}
+            {format}
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/charts/ScatterChart.svelte b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
new file mode 100644
index 000000000..41f01caa0
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/ScatterChart.svelte
@@ -0,0 +1,161 @@
+<script lang="ts" generics="TData">
+  import { type ComponentProps } from 'svelte';
+  import { scaleLinear, scaleTime } from 'd3-scale';
+  import { format } from '@layerstack/utils';
+
+  import Axis from '../Axis.svelte';
+  import Chart from '../Chart.svelte';
+  import Highlight from '../Highlight.svelte';
+  import Labels from '../Labels.svelte';
+  import Points from '../Points.svelte';
+  import Svg from '../layout/Svg.svelte';
+  import * as Tooltip from '../tooltip/index.js';
+
+  import { accessor, chartDataArray, type Accessor } from '../../utils/common.js';
+
+  interface $$Props extends ComponentProps<Chart<TData>> {
+    series?: typeof series;
+    labels?: typeof labels;
+    axis?: typeof axis;
+    props?: typeof props;
+  }
+
+  export let data: $$Props['data'] = [];
+  export let x: Accessor<TData> = undefined;
+  export let y: Accessor<TData> = undefined;
+
+  export let series: {
+    key: string;
+    label?: string;
+    data: TData[];
+    color?: string;
+    props?: Partial<ComponentProps<Points>>;
+  }[] = [{ key: 'default', data: chartDataArray(data), color: 'hsl(var(--color-primary))' }];
+
+  export let axis: ComponentProps<Axis> | boolean = true;
+  export let labels: ComponentProps<Labels> | boolean = false;
+
+  // Default xScale based on first data's `x` value
+  $: xScale = accessor(x)(chartDataArray(data)[0]) instanceof Date ? scaleTime() : scaleLinear();
+
+  export let props: {
+    xAxis?: Partial<ComponentProps<Axis>>;
+    yAxis?: Partial<ComponentProps<Axis>>;
+    points?: Partial<ComponentProps<Points>>;
+    highlight?: Partial<ComponentProps<Highlight>>;
+    labels?: Partial<ComponentProps<Labels>>;
+  } = {};
+
+  let chartData = series
+    .flatMap((s) => s.data?.map((d) => ({ seriesKey: s.key, ...d })))
+    .filter((d) => d) as Array<TData>;
+</script>
+
+<Chart
+  data={chartData}
+  {x}
+  {xScale}
+  {y}
+  yNice
+  padding={axis === false ? undefined : { left: 16, bottom: 16 }}
+  tooltip={{ mode: 'voronoi' }}
+  {...$$restProps}
+  let:x
+  let:xScale
+  let:y
+  let:yScale
+  let:r
+  let:width
+  let:height
+  let:padding
+  let:tooltip
+  let:config
+>
+  {@const slotProps = { x, xScale, y, yScale, width, height, padding, tooltip, series }}
+  {@const activeSeries = tooltip.data
+    ? (series.find((s) => s.key === tooltip.data.seriesKey) ?? series[0])
+    : null}
+
+  <slot {...slotProps}>
+    <Svg>
+      <slot name="axis" {...slotProps}>
+        {#if axis}
+          <Axis
+            placement="left"
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.yAxis}
+          />
+          <Axis
+            placement="bottom"
+            grid
+            rule
+            format={(value) => format(value, undefined, { variant: 'short' })}
+            {...typeof axis === 'object' ? axis : null}
+            {...props.xAxis}
+          />
+        {/if}
+      </slot>
+
+      <slot name="below-marks" {...slotProps} />
+
+      <slot name="marks" {...slotProps}>
+        {#each series as s}
+          <Points
+            data={s.data}
+            stroke={s.color}
+            fill={s.color}
+            fill-opacity={0.3}
+            {...props.points}
+            {...s.props}
+          />
+        {/each}
+      </slot>
+
+      <slot name="above-marks" {...slotProps} />
+
+      <slot name="highlight" {...slotProps}>
+        <Highlight points={{ fill: activeSeries?.color }} lines axis="both" {...props.highlight} />
+      </slot>
+
+      {#if labels}
+        <Labels
+          format={(value) => format(value)}
+          {...props.highlight}
+          {...typeof labels === 'object' ? labels : null}
+        />
+      {/if}
+    </Svg>
+
+    <slot name="tooltip" {...slotProps}>
+      <Tooltip.Root let:data>
+        {#if activeSeries?.key !== 'default'}
+          <Tooltip.Header color={activeSeries?.color}>
+            {activeSeries?.label ?? activeSeries?.key}
+          </Tooltip.Header>
+        {/if}
+        <Tooltip.List>
+          <Tooltip.Item
+            label={typeof config.x === 'string' ? config.x : 'x'}
+            value={x(data)}
+            {format}
+          />
+          <Tooltip.Item
+            label={typeof config.y === 'string' ? config.y : 'y'}
+            value={y(data)}
+            {format}
+          />
+          {#if config.r}
+            <Tooltip.Item
+              label={typeof config.r === 'string' ? config.r : 'r'}
+              value={r(data)}
+              {format}
+            />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </slot>
+  </slot>
+</Chart>
diff --git a/packages/layerchart/src/lib/components/charts/index.ts b/packages/layerchart/src/lib/components/charts/index.ts
new file mode 100644
index 000000000..d2f2c6bd3
--- /dev/null
+++ b/packages/layerchart/src/lib/components/charts/index.ts
@@ -0,0 +1,5 @@
+export { default as AreaChart } from './AreaChart.svelte';
+export { default as BarChart } from './BarChart.svelte';
+export { default as LineChart } from './LineChart.svelte';
+export { default as PieChart } from './PieChart.svelte';
+export { default as ScatterChart } from './ScatterChart.svelte';
diff --git a/packages/layerchart/src/lib/components/index.ts b/packages/layerchart/src/lib/components/index.ts
index 5042f5034..b0805d696 100644
--- a/packages/layerchart/src/lib/components/index.ts
+++ b/packages/layerchart/src/lib/components/index.ts
@@ -1,9 +1,10 @@
 // Re-export for easy access (Svg and Canvas are provided by LayerChart)
 export { Html, WebGL } from 'layercake';
 
+export * from './charts/index.js';
+
 export { default as Arc } from './Arc.svelte';
 export { default as Area } from './Area.svelte';
-export { default as AreaStack } from './AreaStack.svelte';
 export { default as Axis } from './Axis.svelte';
 export { default as Bar } from './Bar.svelte';
 export { default as Bars } from './Bars.svelte';
@@ -55,10 +56,7 @@ export { default as Svg } from './layout/Svg.svelte';
 export { default as Text } from './Text.svelte';
 export { default as Threshold } from './Threshold.svelte';
 export { default as TileImage } from './TileImage.svelte';
-export { default as Tooltip } from './Tooltip.svelte';
-export { default as TooltipContext } from './TooltipContext.svelte';
-export { default as TooltipItem } from './TooltipItem.svelte';
-export { default as TooltipSeparator } from './TooltipSeparator.svelte';
+export * as Tooltip from './tooltip/index.js';
 export { default as TransformContext, transformContext } from './TransformContext.svelte';
 export { default as TransformControls } from './TransformControls.svelte';
 export { default as Tree } from './Tree.svelte';
diff --git a/packages/layerchart/src/lib/components/layout/Canvas.svelte b/packages/layerchart/src/lib/components/layout/Canvas.svelte
index b48b3ba23..7df807ad5 100644
--- a/packages/layerchart/src/lib/components/layout/Canvas.svelte
+++ b/packages/layerchart/src/lib/components/layout/Canvas.svelte
@@ -2,7 +2,7 @@
   import { onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import { scaleCanvas } from 'layercake';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
diff --git a/packages/layerchart/src/lib/components/layout/Html.svelte b/packages/layerchart/src/lib/components/layout/Html.svelte
index 6bf7c9f5f..81420db9f 100644
--- a/packages/layerchart/src/lib/components/layout/Html.svelte
+++ b/packages/layerchart/src/lib/components/layout/Html.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
   import { chartContext } from '../ChartContext.svelte';
 
   /** The layer's outermost `<div>` tag. Useful for bindings. */
diff --git a/packages/layerchart/src/lib/components/layout/Svg.svelte b/packages/layerchart/src/lib/components/layout/Svg.svelte
index afd14d062..35f014c57 100644
--- a/packages/layerchart/src/lib/components/layout/Svg.svelte
+++ b/packages/layerchart/src/lib/components/layout/Svg.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import { chartContext } from '../ChartContext.svelte';
   import { transformContext } from '../TransformContext.svelte';
@@ -31,11 +31,18 @@
   /** Shorthand to set the contents of `<title></title>` for accessibility. You can also set arbitrary HTML via the "title" slot but this is a convenient shorthand. If you use the "title" slot, this prop is ignored. */
   export let title: string | undefined = undefined;
 
+  /**
+   * Translate children to center, useful for radial layouts
+   */
+  export let center: boolean | 'x' | 'y' = false;
+
   const { containerWidth, containerHeight, width, height, padding } = chartContext();
 
   const { mode, scale, translate } = transformContext();
 
-  let transform = '';
+  $: transform = center
+    ? `translate(${center === 'x' || center === true ? $width / 2 : 0}, ${center === 'y' || center === true ? $height / 2 : 0})`
+    : '';
   $: if (mode === 'canvas') {
     const center = { x: $width / 2, y: $height / 2 };
     const newTranslate = {
@@ -79,8 +86,12 @@
     class="layercake-layout-svg_g"
     transform="translate({$padding.left}, {$padding.top})"
   >
-    <g {transform}>
+    {#if transform}
+      <g {transform}>
+        <slot {element}></slot>
+      </g>
+    {:else}
       <slot {element}></slot>
-    </g>
+    {/if}
   </g>
 </svg>
diff --git a/packages/layerchart/src/lib/components/Tooltip.svelte b/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
similarity index 84%
rename from packages/layerchart/src/lib/components/Tooltip.svelte
rename to packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
index 4a06eebc7..67f84ab4d 100644
--- a/packages/layerchart/src/lib/components/Tooltip.svelte
+++ b/packages/layerchart/src/lib/components/tooltip/Tooltip.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import { fade } from 'svelte/transition';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
-  import { chartContext } from './ChartContext.svelte';
+  import { chartContext } from './../ChartContext.svelte';
   import { tooltipContext } from './TooltipContext.svelte';
-  import { motionStore } from '../stores/motionStore.js';
+  import { motionStore } from '../../stores/motionStore.js';
 
   /** `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an explicit fixed position. */
   export let x: 'pointer' | 'data' | number | undefined = 'pointer';
@@ -35,8 +35,6 @@
   /** Set to `false` to disable spring transitions */
   export let motion = true;
 
-  export let header: ((data: any) => any) | undefined = undefined;
-
   export let classes: {
     root?: string;
     container?: string;
@@ -154,11 +152,7 @@
   >
     <div
       class={cls(
-        variant !== 'none' && [
-          'px-2 py-1 h-full rounded elevation-1',
-          '[&_.label]:text-xs [&_.label]:text-right [&_.label]:whitespace-nowrap',
-          ['[&_.value]:text-sm [&_.value]:tabular-nums'],
-        ],
+        variant !== 'none' && ['text-sm py-1 px-2 h-full rounded elevation-1'],
         {
           default: [
             'bg-surface-100/90 dark:bg-surface-300/90 backdrop-filter backdrop-blur-[2px] text-surface-content',
@@ -174,26 +168,8 @@
         $$props.class
       )}
     >
-      {#if header || $$slots.header}
-        <div
-          class={cls(
-            variant !== 'none' && 'text-center font-semibold whitespace-nowrap',
-            classes.header
-          )}
-        >
-          <slot name="header" data={$tooltip.data}>
-            {header?.($tooltip.data)}
-          </slot>
-        </div>
-      {/if}
-
       {#if $$slots.default}
-        <div
-          class={cls(
-            variant !== 'none' && 'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center pt-1',
-            classes.content
-          )}
-        >
+        <div class={cls(classes.content)}>
           <slot data={$tooltip.data} />
         </div>
       {/if}
diff --git a/packages/layerchart/src/lib/components/TooltipContext.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte
similarity index 95%
rename from packages/layerchart/src/lib/components/TooltipContext.svelte
rename to packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte
index 5f19c9f6b..eaacb658b 100644
--- a/packages/layerchart/src/lib/components/TooltipContext.svelte
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipContext.svelte
@@ -35,15 +35,17 @@
   import { writable } from 'svelte/store';
   import { bisector, max, min } from 'd3-array';
   import { quadtree as d3Quadtree, type Quadtree } from 'd3-quadtree';
-  import { cls, sortFunc } from 'svelte-ux';
+  import { sortFunc } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
-  import { Svg } from './Chart.svelte';
-  import { chartContext } from './ChartContext.svelte';
-  import ChartClipPath from './ChartClipPath.svelte';
-  import Voronoi from './Voronoi.svelte';
+  import Svg from './../layout/Svg.svelte';
+  import { chartContext } from './../ChartContext.svelte';
+  import ChartClipPath from './../ChartClipPath.svelte';
+  import Voronoi from './../Voronoi.svelte';
 
   import { localPoint } from '$lib/utils/event.js';
   import { isScaleBand, scaleInvert } from '$lib/utils/scales.js';
+  import { cartesianToPolar } from '$lib/utils/math.js';
   import { quadtreeRects } from '$lib/utils/quadtree.js';
 
   const {
@@ -61,6 +63,7 @@
     containerWidth,
     containerHeight,
     padding,
+    radial,
   } = chartContext<any>();
 
   /*
@@ -190,8 +193,14 @@
     if (tooltipData == null) {
       switch (mode) {
         case 'bisect-x': {
-          // `x` value at pointer coordinate
-          const xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+          let xValueAtPoint: any;
+          if ($radial) {
+            // Assume radial is always centered
+            const { radians } = cartesianToPolar(localX - $width / 2, localY - $height / 2);
+            xValueAtPoint = scaleInvert($xScale, radians);
+          } else {
+            xValueAtPoint = scaleInvert($xScale, localX - $padding.left);
+          }
 
           const index = bisectX($flatData, xValueAtPoint, 1);
           const previousValue = $flatData[index - 1];
@@ -396,7 +405,6 @@
       <Svg>
         <Voronoi
           on:pointerenter={(e) => {
-            // @ts-expect-error
             showTooltip(e.detail.event, e.detail.data);
           }}
           on:pointermove={(e) => {
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte
new file mode 100644
index 000000000..7ecf23b32
--- /dev/null
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipHeader.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+
+  export let color: string | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    color?: string;
+  } = {};
+</script>
+
+<div
+  class={cls(
+    'TooltipHeader',
+    'font-semibold whitespace-nowrap border-b mb-1 pb-1 flex items-center gap-2',
+    classes.root,
+    $$props.class
+  )}
+>
+  {#if color}
+    <div
+      class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+      style:--color={color}
+    ></div>
+  {/if}
+  <slot />
+</div>
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte
new file mode 100644
index 000000000..f380163bd
--- /dev/null
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipItem.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+  import { format as formatUtil, type FormatType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+
+  export let label: any;
+  /** Value to be formatted and displayed.  Can also be passed as default slot */
+  export let value: any = undefined;
+  export let format: FormatType | undefined = undefined;
+  export let valueAlign: 'left' | 'right' | 'center' = 'left';
+  export let color: string | undefined = undefined;
+
+  export let classes: {
+    root?: string;
+    label?: string;
+    value?: string;
+    color?: string;
+  } = {};
+</script>
+
+<div class={cls('contents', classes.root, $$props.class)} {...$$restProps}>
+  <div class={cls('label', 'flex items-center gap-2 whitespace-nowrap', classes.label)}>
+    {#if color}
+      <div
+        class={cls('color', 'inline-block size-2 rounded-full bg-[--color]', classes.color)}
+        style:--color={color}
+      ></div>
+    {/if}
+    <slot name="label">{label}</slot>
+  </div>
+
+  <div
+    class={cls(
+      'value',
+      'tabular-nums',
+      {
+        'text-right': valueAlign === 'right',
+        'text-center': valueAlign === 'center',
+      },
+      classes.value,
+      $$props.class
+    )}
+  >
+    <slot>{format ? formatUtil(value, format) : value}</slot>
+  </div>
+</div>
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipList.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipList.svelte
new file mode 100644
index 000000000..144643220
--- /dev/null
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipList.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+</script>
+
+<div
+  class={cls(
+    'TooltipList',
+    'grid grid-cols-[1fr,auto] gap-x-2 gap-y-1 items-center',
+    $$props.class
+  )}
+>
+  <slot />
+</div>
diff --git a/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte b/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte
new file mode 100644
index 000000000..baa50dedf
--- /dev/null
+++ b/packages/layerchart/src/lib/components/tooltip/TooltipSeparator.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import { cls } from '@layerstack/tailwind';
+</script>
+
+<div class={cls('rounded bg-surface-content/20 my-1 col-span-full h-px', $$props.class)} />
diff --git a/packages/layerchart/src/lib/components/tooltip/index.ts b/packages/layerchart/src/lib/components/tooltip/index.ts
new file mode 100644
index 000000000..a3d575a8e
--- /dev/null
+++ b/packages/layerchart/src/lib/components/tooltip/index.ts
@@ -0,0 +1,6 @@
+export { default as Context } from './TooltipContext.svelte';
+export { default as Header } from './TooltipHeader.svelte';
+export { default as Item } from './TooltipItem.svelte';
+export { default as List } from './TooltipList.svelte';
+export { default as Separator } from './TooltipSeparator.svelte';
+export { default as Root } from './Tooltip.svelte';
diff --git a/packages/layerchart/src/lib/docs/Blockquote.svelte b/packages/layerchart/src/lib/docs/Blockquote.svelte
index 438ffbafa..adde7486c 100644
--- a/packages/layerchart/src/lib/docs/Blockquote.svelte
+++ b/packages/layerchart/src/lib/docs/Blockquote.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { mdiInformation } from '@mdi/js';
-  import { Icon, cls } from 'svelte-ux';
+  import { Icon } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 </script>
 
 <div
diff --git a/packages/layerchart/src/lib/docs/Code.svelte b/packages/layerchart/src/lib/docs/Code.svelte
index 5d525840b..c843968f9 100644
--- a/packages/layerchart/src/lib/docs/Code.svelte
+++ b/packages/layerchart/src/lib/docs/Code.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import Prism from 'prismjs';
   import 'prism-svelte';
-  import { CopyButton, cls } from 'svelte-ux';
+  import { CopyButton } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   export let source: string | null = null;
   export let language = 'svelte';
diff --git a/packages/layerchart/src/lib/docs/CurveMenuField.svelte b/packages/layerchart/src/lib/docs/CurveMenuField.svelte
index bcf6cbf35..10bf08ace 100644
--- a/packages/layerchart/src/lib/docs/CurveMenuField.svelte
+++ b/packages/layerchart/src/lib/docs/CurveMenuField.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import * as d3shapes from 'd3-shape';
 
-  import { MenuField, entries } from 'svelte-ux';
+  import { MenuField } from 'svelte-ux';
+  import { entries } from '@layerstack/utils';
 
   export let value: any | undefined = d3shapes['curveLinear'];
   export let showOpenClosed = false;
diff --git a/packages/layerchart/src/lib/docs/GeoDebug.svelte b/packages/layerchart/src/lib/docs/GeoDebug.svelte
index b21a404bc..fecb98fbd 100644
--- a/packages/layerchart/src/lib/docs/GeoDebug.svelte
+++ b/packages/layerchart/src/lib/docs/GeoDebug.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
-  import { format, Checkbox, cls } from 'svelte-ux';
+  import { Checkbox } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { format } from '@layerstack/utils';
 
   import { chartContext } from '$lib/components/ChartContext.svelte';
   import { geoContext } from '$lib/components/GeoContext.svelte';
diff --git a/packages/layerchart/src/lib/docs/Json.svelte b/packages/layerchart/src/lib/docs/Json.svelte
index b64e0f421..4ff157abc 100644
--- a/packages/layerchart/src/lib/docs/Json.svelte
+++ b/packages/layerchart/src/lib/docs/Json.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import JsonTree from 'svelte-json-tree';
-  import { cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   export let value: any;
   export let defaultExpandedPaths = ['$'];
diff --git a/packages/layerchart/src/lib/docs/Preview.svelte b/packages/layerchart/src/lib/docs/Preview.svelte
index 6ae709de0..01a52fb70 100644
--- a/packages/layerchart/src/lib/docs/Preview.svelte
+++ b/packages/layerchart/src/lib/docs/Preview.svelte
@@ -5,7 +5,8 @@
   import 'prism-svelte';
   import { mdiCodeTags, mdiTable } from '@mdi/js';
 
-  import { Button, CopyButton, Dialog, Toggle, Tooltip, cls } from 'svelte-ux';
+  import { Button, CopyButton, Dialog, Toggle, Tooltip } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import Code from './Code.svelte';
   import Json from './Json.svelte';
diff --git a/packages/layerchart/src/lib/docs/TransformDebug.svelte b/packages/layerchart/src/lib/docs/TransformDebug.svelte
index 58acf1a9b..7c1d85301 100644
--- a/packages/layerchart/src/lib/docs/TransformDebug.svelte
+++ b/packages/layerchart/src/lib/docs/TransformDebug.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-  import { format, cls } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { format } from '@layerstack/utils';
 
   import { transformContext } from '$lib/components/TransformContext.svelte';
 
diff --git a/packages/layerchart/src/lib/utils/common.test.ts b/packages/layerchart/src/lib/utils/common.test.ts
new file mode 100644
index 000000000..7f5dad0e6
--- /dev/null
+++ b/packages/layerchart/src/lib/utils/common.test.ts
@@ -0,0 +1,47 @@
+import { describe, it, expect } from 'vitest';
+
+import { accessor } from './common.js';
+
+export const testData = {
+  one: 1,
+  two: 2,
+  obj: { value: 2 },
+  arr: ['one', 'two', 'three'],
+};
+
+describe('accessor', () => {
+  it('string path', () => {
+    const actual = accessor('one')(testData);
+    expect(actual).toEqual(testData.one);
+  });
+
+  it('nested path', () => {
+    const actual = accessor('obj.value')(testData);
+    expect(actual).toEqual(testData.obj.value);
+  });
+
+  it('multiple properties', () => {
+    const actual = accessor(['one', 'two', 'obj.value', (d) => d.arr[0]])(testData);
+    expect(actual).toEqual([testData.one, testData.two, testData.obj.value, testData.arr[0]]);
+  });
+
+  it('multiple properties as numbers (index)', () => {
+    const actual = accessor([0, 1])(testData.arr);
+    expect(actual).toEqual([testData.arr[0], testData.arr[1]]);
+  });
+
+  it('function', () => {
+    const actual = accessor((d) => d.obj.value)(testData);
+    expect(actual).toEqual(testData.obj.value);
+  });
+
+  it('string path with array value', () => {
+    const actual = accessor('arr[0]')(testData);
+    expect(actual).toEqual(testData.arr[0]);
+  });
+
+  it('null returns full object', () => {
+    const actual = accessor(null)(testData);
+    expect(actual).toEqual(testData);
+  });
+});
diff --git a/packages/layerchart/src/lib/utils/common.ts b/packages/layerchart/src/lib/utils/common.ts
index 258e85445..6e005ac39 100644
--- a/packages/layerchart/src/lib/utils/common.ts
+++ b/packages/layerchart/src/lib/utils/common.ts
@@ -7,6 +7,7 @@ export type Accessor<TData = any> =
   | string
   | ((d: TData) => any)
   | undefined
+  | null
   | Accessor<TData>[];
 
 export function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any {
@@ -15,8 +16,8 @@ export function accessor<TData = any>(prop: Accessor<TData>): (d: TData) => any
   } else if (typeof prop === 'function') {
     // function
     return prop;
-  } else if (typeof prop === 'string') {
-    // path string
+  } else if (typeof prop === 'string' || typeof prop === 'number') {
+    // path string or number (array index)
     return (d: TData) => get(d, prop);
   } else {
     // return full object
diff --git a/packages/layerchart/src/lib/utils/genData.ts b/packages/layerchart/src/lib/utils/genData.ts
index df4adb1f8..7ec8d9855 100644
--- a/packages/layerchart/src/lib/utils/genData.ts
+++ b/packages/layerchart/src/lib/utils/genData.ts
@@ -124,32 +124,32 @@ export function createTimeSeries<TKey extends string>(options: {
 }
 
 export const wideData = [
-  { year: '2019', apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
-  { year: '2018', apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
-  { year: '2017', apples: 820, bananas: 1000, cherries: 640, dates: 400 },
-  { year: '2016', apples: 820, bananas: 560, cherries: 720, dates: 400 },
+  { year: 2019, apples: 3840, bananas: 1920, cherries: 960, dates: 400 },
+  { year: 2018, apples: 1600, bananas: 1440, cherries: 960, dates: 400 },
+  { year: 2017, apples: 820, bananas: 1000, cherries: 640, dates: 400 },
+  { year: 2016, apples: 820, bananas: 560, cherries: 720, dates: 400 },
 ];
 
 export const longData = [
-  { year: '2019', basket: 1, fruit: 'apples', value: 3840 },
-  { year: '2019', basket: 1, fruit: 'bananas', value: 1920 },
-  { year: '2019', basket: 2, fruit: 'cherries', value: 960 },
-  { year: '2019', basket: 2, fruit: 'dates', value: 400 },
-
-  { year: '2018', basket: 1, fruit: 'apples', value: 1600 },
-  { year: '2018', basket: 1, fruit: 'bananas', value: 1440 },
-  { year: '2018', basket: 2, fruit: 'cherries', value: 960 },
-  { year: '2018', basket: 2, fruit: 'dates', value: 400 },
-
-  { year: '2017', basket: 1, fruit: 'apples', value: 820 },
-  { year: '2017', basket: 1, fruit: 'bananas', value: 1000 },
-  { year: '2017', basket: 2, fruit: 'cherries', value: 640 },
-  { year: '2017', basket: 2, fruit: 'dates', value: 400 },
-
-  { year: '2016', basket: 1, fruit: 'apples', value: 820 },
-  { year: '2016', basket: 1, fruit: 'bananas', value: 560 },
-  { year: '2016', basket: 2, fruit: 'cherries', value: 720 },
-  { year: '2016', basket: 2, fruit: 'dates', value: 400 },
+  { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
+  { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
+  { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
+  { year: 2019, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
+  { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
+  { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
+  { year: 2018, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2017, basket: 1, fruit: 'apples', value: 820 },
+  { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
+  { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
+  { year: 2017, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2016, basket: 1, fruit: 'apples', value: 820 },
+  { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
+  { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
+  { year: 2016, basket: 2, fruit: 'dates', value: 400 },
 ];
 
 export function getPhyllotaxis({
diff --git a/packages/layerchart/src/lib/utils/math.ts b/packages/layerchart/src/lib/utils/math.ts
index 19b627c25..f968bec88 100644
--- a/packages/layerchart/src/lib/utils/math.ts
+++ b/packages/layerchart/src/lib/utils/math.ts
@@ -26,12 +26,21 @@ export function polarToCartesian(angle: number, radius: number) {
 }
 
 /**
- * Convert cartesian to polar coordinate system.  Angle in radians
+ * Convert cartesian to polar coordinate system.  Angle in radians with 0 at the 12 o'clock position
  */
 export function cartesianToPolar(x: number, y: number) {
+  let radians = Math.atan2(y, x);
+
+  radians += Math.PI / 2;
+
+  // Ensure the result is between 0 and 2π
+  if (radians < 0) {
+    radians += 2 * Math.PI;
+  }
+
   return {
     radius: Math.sqrt(x ** 2 + y ** 2),
-    angle: Math.atan(y / x),
+    radians,
   };
 }
 
diff --git a/packages/layerchart/src/lib/utils/rect.ts b/packages/layerchart/src/lib/utils/rect.ts
index 023468957..0ed03af01 100644
--- a/packages/layerchart/src/lib/utils/rect.ts
+++ b/packages/layerchart/src/lib/utils/rect.ts
@@ -1,7 +1,7 @@
 import { derived } from 'svelte/store';
 import { max, min } from 'd3-array';
 
-import { groupScaleBand, isScaleBand } from './scales.js';
+import { isScaleBand } from './scales.js';
 import type { ChartContext } from '../components/ChartContext.svelte';
 import { accessor, type Accessor } from './common.js';
 
@@ -10,43 +10,55 @@ type DimensionGetterOptions = {
   x?: Accessor;
   /** Override `y` accessor from context */
   y?: Accessor;
-  groupBy?: string;
+  /** Override `x1` accessor from context */
+  x1?: Accessor;
+  /** Override `y1` accessor from context */
+  y1?: Accessor;
   inset?: number;
-  groupPadding?: { inner?: number; outer?: number };
 };
 
-// TOOD: Pass in overrides for `x` and `y` accessors
 export function createDimensionGetter<TData>(
   context: ChartContext<TData>,
   options?: DimensionGetterOptions
 ) {
-  const { flatData, xGet, yGet, xScale, yScale, x: xAccessor, y: yAccessor } = context;
+  const {
+    xScale,
+    yScale,
+    x: xAccessor,
+    y: yAccessor,
+    x1: x1Accessor,
+    y1: y1Accessor,
+    x1Scale,
+    y1Scale,
+  } = context;
 
-  const groupBy = options?.groupBy;
   const inset = options?.inset ?? 0;
 
   return derived(
-    [flatData, xGet, yGet, xScale, yScale, xAccessor, yAccessor],
-    ([$flatData, $xGet, $yGet, $xScale, $yScale, $xAccessor, $yAccessor]) => {
+    [xScale, x1Scale, yScale, y1Scale, xAccessor, yAccessor, x1Accessor, y1Accessor],
+    ([$xScale, $x1Scale, $yScale, $y1Scale, $xAccessor, $yAccessor, $x1Accessor, $y1Accessor]) => {
       // Use `xscale.domain()` instead of `$xDomain` to include `nice()` being applied
       const [minXDomain, maxXDomain] = $xScale.domain();
       const [minYDomain, maxYDomain] = $yScale.domain();
 
+      const _x = accessor(options?.x ?? $xAccessor);
+      const _y = accessor(options?.y ?? $yAccessor);
+      const _x1 = accessor(options?.x1 ?? $x1Accessor);
+      const _y1 = accessor(options?.y1 ?? $y1Accessor);
+
       // @ts-expect-error
       return function getter(item) {
         if (isScaleBand($yScale)) {
           // Horizontal band
-          const y1Scale = groupBy
-            ? groupScaleBand($yScale, $flatData, groupBy, options?.groupPadding)
-            : null;
-          // @ts-expect-error
-          const y = firstValue($yGet(item)) + (y1Scale ? y1Scale(item[groupBy]) : 0) + inset / 2;
+          const y =
+            firstValue($yScale(_y(item)) ?? 0) + ($y1Scale ? $y1Scale(_y1(item)) : 0) + inset / 2;
           const height = Math.max(
             0,
-            $yScale.bandwidth ? (y1Scale ? y1Scale.bandwidth() : $yScale.bandwidth()) - inset : 0
+            $yScale.bandwidth
+              ? ($y1Scale ? ($y1Scale.bandwidth?.() ?? 0) : $yScale.bandwidth()) - inset
+              : 0
           );
 
-          const _x = accessor(options?.x ?? $xAccessor);
           const xValue = _x(item);
 
           let left = 0;
@@ -77,19 +89,15 @@ export function createDimensionGetter<TData>(
           };
         } else {
           // Vertical band or linear
-          const x1Scale =
-            groupBy && isScaleBand($xScale)
-              ? groupScaleBand($xScale, $flatData, groupBy, options?.groupPadding)
-              : null;
-
-          // @ts-expect-error
-          const x = firstValue($xGet(item)) + (x1Scale ? x1Scale(item[groupBy]) : 0) + inset / 2;
+          const x =
+            firstValue($xScale(_x(item))) + ($x1Scale ? $x1Scale(_x1(item)) : 0) + inset / 2;
           const width = Math.max(
             0,
-            $xScale.bandwidth ? (x1Scale ? x1Scale.bandwidth() : $xScale.bandwidth()) - inset : 0
+            $xScale.bandwidth
+              ? ($x1Scale ? ($x1Scale.bandwidth?.() ?? 0) : $xScale.bandwidth()) - inset
+              : 0
           );
 
-          const _y = accessor(options?.y ?? $yAccessor);
           const yValue = _y(item);
 
           let top = 0;
diff --git a/packages/layerchart/src/lib/utils/scales.ts b/packages/layerchart/src/lib/utils/scales.ts
index 6de57bccc..2b09a41fb 100644
--- a/packages/layerchart/src/lib/utils/scales.ts
+++ b/packages/layerchart/src/lib/utils/scales.ts
@@ -5,15 +5,23 @@ import { type MotionOptions, motionStore } from '$lib/stores/motionStore.js';
 import { scaleBand, type ScaleBand } from 'd3-scale';
 import { unique } from 'svelte-ux/utils/array';
 
-export type AnyScale<Domain = any, Range = any, Input = Domain, Output = any> = {
+export interface AnyScale<Domain = any, Range = any, Input = Domain, Output = any> {
   (value: Input): Output;
   invert?: (value: Output) => Input;
   domain(): Domain[];
+  domain(domain: Iterable<Domain>): this;
   range(): Range[];
+  range(range: Iterable<Range>): this;
   bandwidth?: Function;
   ticks?: Function;
   tickFormat?: Function;
-};
+  copy(): Function;
+}
+
+export type DomainType =
+  | (number | string | Date | null | undefined)[]
+  // 'null' useful for Brush component
+  | null;
 
 /**
  * Implemenation for missing `scaleBand().invert()`
@@ -52,6 +60,26 @@ export function scaleInvert(scale: AnyScale<any, any>, value: number) {
   }
 }
 
+/** Create new copy of scale with domain and range */
+export function createScale(
+  scale: AnyScale,
+  domain: DomainType,
+  range: any[] | Function,
+  context?: Record<any, any>
+) {
+  const scaleCopy = scale.copy() as AnyScale;
+  if (domain) {
+    scaleCopy.domain(domain);
+  }
+
+  if (typeof range === 'function') {
+    scaleCopy.range(range(context));
+  } else {
+    scaleCopy.range(range);
+  }
+  return scaleCopy;
+}
+
 /** Create a `scaleBand()` within another scaleBand()'s bandwidth (typically a x1 of an x0 scale, used for grouping) */
 export function groupScaleBand<Domain extends { toString(): string }>(
   scale: ScaleBand<Domain>,
diff --git a/packages/layerchart/src/lib/utils/stack.test.ts b/packages/layerchart/src/lib/utils/stack.test.ts
new file mode 100644
index 000000000..5fa0dd0e3
--- /dev/null
+++ b/packages/layerchart/src/lib/utils/stack.test.ts
@@ -0,0 +1,160 @@
+import { describe, it, expect } from 'vitest';
+
+import { groupStackData } from './stack.js';
+import { group } from 'd3-array';
+
+export const testData = [
+  { year: 2019, basket: 1, fruit: 'apples', value: 3840 },
+  { year: 2019, basket: 1, fruit: 'bananas', value: 1920 },
+  { year: 2019, basket: 2, fruit: 'cherries', value: 960 },
+  { year: 2019, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2018, basket: 1, fruit: 'apples', value: 1600 },
+  { year: 2018, basket: 1, fruit: 'bananas', value: 1440 },
+  { year: 2018, basket: 2, fruit: 'cherries', value: 960 },
+  { year: 2018, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2017, basket: 1, fruit: 'apples', value: 820 },
+  { year: 2017, basket: 1, fruit: 'bananas', value: 1000 },
+  { year: 2017, basket: 2, fruit: 'cherries', value: 640 },
+  { year: 2017, basket: 2, fruit: 'dates', value: 400 },
+
+  { year: 2016, basket: 1, fruit: 'apples', value: 820 },
+  { year: 2016, basket: 1, fruit: 'bananas', value: 560 },
+  { year: 2016, basket: 2, fruit: 'cherries', value: 720 },
+  { year: 2016, basket: 2, fruit: 'dates', value: 400 },
+];
+
+const testDataByYear = group(testData, (d) => d.year);
+
+describe('groupStackData', () => {
+  it('xKey only', () => {
+    const actual = groupStackData(testData, { xKey: 'year' });
+
+    expect(actual.length).toEqual(4);
+    expect(actual[0]).toEqual({
+      year: 2019,
+      keys: { year: 2019 },
+      value: 7120,
+      values: [0, 7120],
+      data: testDataByYear.get(2019),
+    });
+  });
+
+  it('xKey with groupBy (unique)', () => {
+    const xKey = 'year';
+    const groupBy = 'fruit';
+    const actual = groupStackData(testData, { xKey, groupBy });
+
+    // 4 years, 4 fruits each (each a separate bar)
+    expect(actual.length).toEqual(16);
+
+    expect(actual[0]).toEqual({
+      year: 2019,
+      fruit: 'apples',
+      value: 3840,
+      keys: { year: 2019, fruit: 'apples' },
+      values: [0, 3840],
+      data: testDataByYear.get(2019),
+    });
+
+    expect(actual[1]).toEqual({
+      year: 2019,
+      fruit: 'bananas',
+      value: 1920,
+      keys: { year: 2019, fruit: 'bananas' },
+      values: [0, 1920],
+      data: testDataByYear.get(2019),
+    });
+  });
+
+  it('xKey with groupBy (grouped)', () => {
+    const xKey = 'year';
+    const groupBy = 'basket';
+    const actual = groupStackData(testData, { xKey, groupBy });
+
+    // 4 years, 2 buckets each
+    expect(actual.length).toEqual(8);
+
+    expect(actual[0]).toEqual({
+      year: 2019,
+      basket: 1,
+      value: 5760,
+      keys: { year: 2019, basket: 1 },
+      values: [0, 5760],
+      data: testDataByYear.get(2019),
+    });
+
+    expect(actual[1]).toEqual({
+      year: 2019,
+      basket: 2,
+      value: 1360,
+      keys: { year: 2019, basket: 2 },
+      values: [0, 1360],
+      data: testDataByYear.get(2019),
+    });
+
+    expect(actual[2]).toEqual({
+      year: 2018,
+      basket: 1,
+      value: 3040,
+      keys: { year: 2018, basket: 1 },
+      values: [0, 3040],
+      data: testDataByYear.get(2018),
+    });
+  });
+
+  it('xKey with stackBy', () => {
+    const xKey = 'year';
+    const stackBy = 'fruit';
+    const actual = groupStackData(testData, { xKey, stackBy });
+
+    // 4 years, 4 fruits each (each a separate bar)
+    expect(actual.length).toEqual(16);
+
+    expect(actual[0]).toEqual({
+      year: 2019,
+      fruit: 'apples',
+      value: 3840,
+      keys: { year: 2019, fruit: 'apples' },
+      values: [0, 3840],
+      data: testDataByYear.get(2019),
+    });
+
+    expect(actual[1]).toEqual({
+      year: 2018,
+      fruit: 'apples',
+      value: 1600,
+      keys: { year: 2018, fruit: 'apples' },
+      values: [0, 1600],
+      data: testDataByYear.get(2018),
+    });
+
+    expect(actual[2]).toEqual({
+      year: 2017,
+      fruit: 'apples',
+      value: 820,
+      keys: { year: 2017, fruit: 'apples' },
+      values: [0, 820],
+      data: testDataByYear.get(2017),
+    });
+
+    expect(actual[3]).toEqual({
+      year: 2016,
+      fruit: 'apples',
+      value: 820,
+      keys: { year: 2016, fruit: 'apples' },
+      values: [0, 820],
+      data: testDataByYear.get(2016),
+    });
+
+    expect(actual[4]).toEqual({
+      year: 2019,
+      fruit: 'bananas',
+      value: 1920,
+      keys: { year: 2019, fruit: 'bananas' },
+      values: [3840, 5760],
+      data: testDataByYear.get(2019),
+    });
+  });
+});
diff --git a/packages/layerchart/src/lib/utils/stack.ts b/packages/layerchart/src/lib/utils/stack.ts
index 50ea3dfc9..27a09b117 100644
--- a/packages/layerchart/src/lib/utils/stack.ts
+++ b/packages/layerchart/src/lib/utils/stack.ts
@@ -1,11 +1,11 @@
-import { flatGroup, max, rollup, sum } from 'd3-array';
+import { flatGroup, group, max, rollup, sum } from 'd3-array';
 import { stack, stackOffsetNone, stackOrderNone } from 'd3-shape';
 import { pivotWider } from './pivot.js';
 
 type OrderType = typeof stackOrderNone; // all orders share the same API
 type OffsetType = typeof stackOffsetNone; // all offsets share the same API
 
-export function createStackData<TData>(
+export function groupStackData<TData>(
   data: TData[],
   options: {
     xKey: string;
@@ -15,27 +15,27 @@ export function createStackData<TData>(
     offset?: OffsetType;
   }
 ): {
-  keys: (string | number)[];
+  keys: Record<string, any>; // TODO: Improve type based on key, groupBy, and stackBy values
   values: number[];
 }[] {
+  const dataByKey = group(data, (d: any) => d[options.xKey]);
+
   if (options.groupBy) {
     // Group then Stack (if needed)
     const groupedData = flatGroup(
       data,
-      // @ts-expect-error
-      (d) => d[options.xKey],
-      // @ts-expect-error
-      (d) => d[options.groupBy ?? '']
+      (d: any) => d[options.xKey],
+      (d: any) => d[options.groupBy ?? '']
     );
 
     const result = groupedData.flatMap((d, i) => {
       const groupKeys = d.slice(0, -1); // all but last item
-      const itemData = d.slice(-1)[0]; // last item
+      const groupData = d.slice(-1)[0]; // last item
 
-      const pivotData = pivotWider(itemData, options.xKey, options.stackBy ?? '', 'value');
+      const pivotData = pivotWider(groupData, options.xKey, options.stackBy ?? '', 'value');
 
       const stackKeys: Array<any> = [
-        ...new Set(itemData.map((d: any) => d[options.stackBy ?? ''])),
+        ...new Set(groupData.map((d: any) => d[options.stackBy ?? ''])),
       ];
       // @ts-expect-error
       const stackData = stack().keys(stackKeys).order(options.order).offset(options.offset)(
@@ -44,10 +44,22 @@ export function createStackData<TData>(
 
       return stackData.flatMap((series) => {
         return series.flatMap((s) => {
+          const keys = {
+            [options.xKey]: groupKeys[0],
+            [options.groupBy ?? '']: groupKeys[1],
+          };
+          if (options.stackBy) {
+            keys[options.stackBy] = series.key;
+          }
+
+          const value = sum(groupData, (d: any) => d.value);
+
           return {
-            ...itemData[0], // TODO: More than one should use stacks or aggregate values?
-            keys: options.stackBy ? [...groupKeys, series.key] : groupKeys,
-            values: options.stackBy ? [s[0], s[1]] : [0, sum(itemData, (d: any) => d.value)],
+            ...keys,
+            keys,
+            value,
+            values: options.stackBy ? [s[0], s[1]] : [0, value],
+            data: dataByKey.get(keys[options.xKey]),
           };
         });
       });
@@ -67,10 +79,16 @@ export function createStackData<TData>(
 
     const result = stackData.flatMap((series) => {
       return series.flatMap((s) => {
+        const keys = {
+          [options.xKey]: s.data[options.xKey],
+          [options.stackBy ?? '']: series.key,
+        };
         return {
-          ...s.data,
-          keys: [s.data[options.xKey], series.key],
+          ...keys,
+          keys,
+          value: s[1] - s[0],
           values: [s[0], s[1]],
+          data: dataByKey.get(keys[options.xKey]),
         };
       });
     });
@@ -82,11 +100,15 @@ export function createStackData<TData>(
       rollup(
         data,
         (items) => {
+          // @ts-expect-error
+          const keys = { [options.xKey]: items[0][options.xKey] };
+          const value = sum(items, (d: any) => d.value);
           return {
-            // @ts-expect-error
-            keys: [items[0][options.xKey]],
-            // @ts-expect-error
-            values: [0, sum(items, (d) => d.value)],
+            ...keys,
+            keys,
+            value,
+            values: [0, value],
+            data: dataByKey.get(keys[options.xKey]),
           };
         },
         // @ts-expect-error
@@ -100,7 +122,7 @@ export function createStackData<TData>(
  * Function to offset each layer by the maximum of the previous layer
  *   - see: https://observablehq.com/@mkfreeman/separated-bar-chart
  */
-// TODO: Try to find way to support separated with createStackData() (which has isolated stacked per group)
+// TODO: Try to find way to support separated with groupStackData() (which has isolated stacked per group)
 // @ts-expect-error
 export function stackOffsetSeparated(series, order) {
   const gap = 200; // TODO: Determine way to pass in as option (curry?)
diff --git a/packages/layerchart/src/lib/utils/string.ts b/packages/layerchart/src/lib/utils/string.ts
index 61cd94a7b..3624843f5 100644
--- a/packages/layerchart/src/lib/utils/string.ts
+++ b/packages/layerchart/src/lib/utils/string.ts
@@ -33,3 +33,65 @@ export const getStringWidth = memoize(
   _getStringWidth,
   (str, style) => `${str}_${JSON.stringify(style)}`
 );
+
+export type RasterizeTextOptions = {
+  fontSize?: string;
+  fontWeight?: number;
+  fontFamily?: string;
+  textAlign?: CanvasTextAlign;
+  textBaseline?: CanvasTextBaseline;
+  spacing?: number;
+  width?: number;
+  height?: number;
+  x?: number;
+  y?: number;
+};
+
+export function rasterizeText(text: string, options: RasterizeTextOptions = {}) {
+  const fontSize = options.fontSize ?? '200px';
+  const fontWeight = options.fontWeight ?? 600;
+  const fontFamily = options.fontFamily ?? 'sans-serif';
+  const textAlign = options.textAlign ?? 'center';
+  const textBaseline = options.textBaseline ?? 'middle';
+  const spacing = options.spacing ?? 20;
+  const width = options.width ?? 960;
+  const height = options.height ?? 500;
+  const x = options.x ?? width / 2;
+  const y = options.y ?? height / 2;
+
+  const canvas = document.createElement('canvas');
+  canvas.width = width;
+  canvas.height = height;
+
+  const context = canvas.getContext('2d')!;
+  context.font = [fontWeight, fontSize, fontFamily].join(' ');
+  context.textAlign = textAlign;
+  context.textBaseline = textBaseline;
+
+  const dx = context.measureText(text).width;
+  const dy = +fontSize.replace('px', '');
+  const bBox = [
+    [x - dx / 2, y - dy / 2],
+    [x + dx / 2, y + dy / 2],
+  ];
+
+  context.fillText(text, x, y);
+
+  var imageData = context.getImageData(0, 0, width, height);
+
+  var pixels = [];
+  for (let x = bBox[0][0]; x < bBox[1][0]; x += spacing) {
+    for (let y = bBox[0][1]; y < bBox[1][1]; y += spacing) {
+      const pixel = getPixel(imageData, x, y);
+      if (pixel[3] != 0) pixels.push([x, y]);
+    }
+  }
+
+  return pixels;
+}
+
+function getPixel(imageData: ImageData, x: number, y: number) {
+  var i = 4 * (Math.floor(x) + Math.floor(y) * imageData.width);
+  var d = imageData.data;
+  return [d[i], d[i + 1], d[i + 2], d[i + 3]];
+}
diff --git a/packages/layerchart/src/lib/utils/ticks.ts b/packages/layerchart/src/lib/utils/ticks.ts
index e7ab7fa3e..b23faf18c 100644
--- a/packages/layerchart/src/lib/utils/ticks.ts
+++ b/packages/layerchart/src/lib/utils/ticks.ts
@@ -10,8 +10,7 @@ import {
 } from 'd3-time';
 import { format } from 'date-fns';
 
-import { formatDate, PeriodType, getDuration } from 'svelte-ux';
-import { fail } from 'svelte-ux';
+import { formatDate, PeriodType, getDuration, fail } from '@layerstack/utils';
 
 type Duration = ReturnType<typeof getDuration>;
 
diff --git a/packages/layerchart/src/routes/+layout.svelte b/packages/layerchart/src/routes/+layout.svelte
index 0a3a5a6c7..a06fd0f3d 100644
--- a/packages/layerchart/src/routes/+layout.svelte
+++ b/packages/layerchart/src/routes/+layout.svelte
@@ -8,15 +8,15 @@
     AppBar,
     AppLayout,
     Button,
+    MenuButton,
     QuickSearch,
     ThemeSelect,
     // ThemeSwitch,
     Tooltip,
     settings,
-    sortFunc,
-    lgScreen,
-    MenuButton,
   } from 'svelte-ux';
+  import { sortFunc } from '@layerstack/utils';
+  import { lgScreen } from '@layerstack/svelte-stores';
 
   import { dev } from '$app/environment';
   import { afterNavigate, goto } from '$app/navigation';
diff --git a/packages/layerchart/src/routes/_NavMenu.svelte b/packages/layerchart/src/routes/_NavMenu.svelte
index ea7de4010..ab8b36693 100644
--- a/packages/layerchart/src/routes/_NavMenu.svelte
+++ b/packages/layerchart/src/routes/_NavMenu.svelte
@@ -6,11 +6,14 @@
 
   type LinkCollection = Record<string, Array<string | { label: string; value: string }>>;
 
+  const charts: LinkCollection = {
+    'Cartesian & Polar': ['AreaChart', 'BarChart'],
+  };
+
   const examples: LinkCollection = {
     'Cartesian & Polar': [
       'Arc',
       'Area',
-      'AreaStack',
       { label: 'Bar Chart (Vertical)', value: 'Columns' },
       { label: 'Bar Chart (Horizontal)', value: 'Bars' },
       'Candlestick',
@@ -36,6 +39,7 @@
       'ForceDisjointGraph',
       'ForceLattice',
       'ForceTree',
+      'ForceText',
     ],
     Geo: [
       'GeoPath',
@@ -61,11 +65,11 @@
   };
 
   const components: LinkCollection = {
-    Common: ['Chart', 'Axis', 'Frame', 'Legend', 'Rule'],
-    Primitives: ['Arc', 'Circle', 'Group', 'Line', 'Point', 'Rect', 'Text'],
-    'Data-driven': [
+    Charts: ['Chart', 'AreaChart', 'BarChart', 'LineChart', 'PieChart', 'ScatterChart'],
+    Common: ['Axis', 'Frame', 'Legend', 'Rule'],
+    Primitives: ['Arc', 'Bar', 'Circle', 'Group', 'Line', 'Point', 'Rect', 'Text'],
+    Marks: [
       'Area',
-      'AreaStack',
       'Bars',
       'Calendar',
       'Hull',
@@ -123,25 +127,34 @@
 />
 <NavItem text="Changelog" icon={mdiFormatListBulleted} currentUrl={$page.url} path="/changelog" />
 
+<!-- <h1>Charts</h1>
+{#each Object.entries(charts) as [header, items]}
+  <h2>{header}</h2>
+  {#each items as item}
+    {@const label = typeof item === 'object' ? item.label : item}
+    {@const pathValue = typeof item === 'object' ? item.value : item}
+    <NavItem
+      text={label}
+      currentUrl={$page.url}
+      path="/docs/charts/{pathValue}"
+      class="pl-6 py-2"
+    />
+  {/each}
+{/each} -->
+
 <h1>Examples</h1>
 {#each Object.entries(examples) as [header, items]}
   <h2>{header}</h2>
   {#each items as item}
-    {#if typeof item === 'object'}
-      <NavItem
-        text={item.label}
-        currentUrl={$page.url}
-        path="/docs/examples/{item.value}"
-        class="pl-6 py-2"
-      />
-    {:else}
-      <NavItem
-        text={item.replace(/([a-z])([A-Z])/g, '$1 $2')}
-        currentUrl={$page.url}
-        path="/docs/examples/{item}"
-        class="pl-6 py-2"
-      />
-    {/if}
+    {@const label =
+      typeof item === 'object' ? item.label : item.replace(/([a-z])([A-Z])/g, '$1 $2')}
+    {@const pathValue = typeof item === 'object' ? item.value : item}
+    <NavItem
+      text={label}
+      currentUrl={$page.url}
+      path="/docs/examples/{pathValue}"
+      class="pl-6 py-2"
+    />
   {/each}
 {/each}
 
@@ -149,21 +162,14 @@
 {#each Object.entries(components) as [header, items]}
   <h2>{header}</h2>
   {#each items as item}
-    {#if typeof item === 'object'}
-      <NavItem
-        text={item.label}
-        currentUrl={$page.url}
-        path="/docs/components/{item.value}"
-        class="pl-6 py-2"
-      />
-    {:else}
-      <NavItem
-        text={item}
-        currentUrl={$page.url}
-        path="/docs/components/{item}"
-        class="pl-6 py-2"
-      />
-    {/if}
+    {@const label = typeof item === 'object' ? item.label : item}
+    {@const pathValue = typeof item === 'object' ? item.value : item}
+    <NavItem
+      text={label}
+      currentUrl={$page.url}
+      path="/docs/components/{pathValue}"
+      class="pl-6 py-2"
+    />
   {/each}
 {/each}
 
diff --git a/packages/layerchart/src/routes/changelog/+page.svelte b/packages/layerchart/src/routes/changelog/+page.svelte
index 9ad53a91c..8ec23d353 100644
--- a/packages/layerchart/src/routes/changelog/+page.svelte
+++ b/packages/layerchart/src/routes/changelog/+page.svelte
@@ -2,7 +2,7 @@
   import { marked } from 'marked';
   import { TableOfContents } from 'svelte-ux';
 
-  import changelog from '../../../CHANGELOG.md?raw';
+  export let data;
 
   function sanitize(str: string) {
     return str.replace(/</g, '\\<').replace(/>/g, '\\>');
@@ -11,7 +11,7 @@
 
 <div class="grid grid-cols-[1fr,auto] gap-6 pt-2 pb-4">
   <div class="prose max-w-none px-4 bg-surface-100 p-2 m-2 rounded shadow-lg border overflow-auto">
-    {@html marked.parse(sanitize(changelog))}
+    {@html marked.parse(sanitize(data.changelog))}
   </div>
 
   <div class="hidden lg:block w-[224px]">
diff --git a/packages/layerchart/src/routes/changelog/+page.ts b/packages/layerchart/src/routes/changelog/+page.ts
new file mode 100644
index 000000000..f77e63726
--- /dev/null
+++ b/packages/layerchart/src/routes/changelog/+page.ts
@@ -0,0 +1,7 @@
+export async function load() {
+  return {
+    changelog: await fetch(
+      'https://raw.githubusercontent.com/techniq/layerchart/main/packages/layerchart/CHANGELOG.md'
+    ).then(async (r) => await r.text()),
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/+layout.svelte b/packages/layerchart/src/routes/docs/+layout.svelte
index fe2a632be..7230733e5 100644
--- a/packages/layerchart/src/routes/docs/+layout.svelte
+++ b/packages/layerchart/src/routes/docs/+layout.svelte
@@ -15,17 +15,11 @@
     mdiLink,
   } from '@mdi/js';
 
-  import {
-    ApiDocs,
-    Button,
-    Dialog,
-    Icon,
-    ListItem,
-    TableOfContents,
-    cls,
-    toTitleCase,
-    xlScreen,
-  } from 'svelte-ux';
+  import { ApiDocs, Button, Dialog, Icon, ListItem, TableOfContents } from 'svelte-ux';
+
+  import { xlScreen } from '@layerstack/svelte-stores';
+  import { cls } from '@layerstack/tailwind';
+  import { toTitleCase } from '@layerstack/utils';
 
   import Code from '$lib/docs/Code.svelte';
   import ViewSourceButton from '$lib/docs/ViewSourceButton.svelte';
diff --git a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
index 60c0dd573..3ac5928f1 100644
--- a/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Arc/+page.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Field, RangeField, Switch } from 'svelte-ux';
-
-  import { Arc, Chart, Svg, Group, LinearGradient, Text } from 'layerchart';
+  import { Arc, Chart, Svg, LinearGradient, Text } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -53,36 +52,34 @@
 <Preview>
   <div class="h-[200px] p-4 border rounded">
     <Chart>
-      <Svg>
-        <Group center>
-          {#key spring}
-            <LinearGradient class="from-secondary to-primary" vertical let:url>
-              <Arc
-                {value}
-                {domain}
-                {range}
-                {innerRadius}
-                {outerRadius}
-                {cornerRadius}
-                {padAngle}
-                {label}
-                {spring}
-                let:value
-                let:boundingBox
-                fill={url}
-                track={{ class: 'fill-surface-content/5' }}
-              >
-                <Text
-                  value={Math.round(value)}
-                  textAnchor="middle"
-                  verticalAnchor="middle"
-                  class="text-4xl"
-                  dy={8}
-                />
-              </Arc>
-            </LinearGradient>
-          {/key}
-        </Group>
+      <Svg center>
+        {#key spring}
+          <LinearGradient class="from-secondary to-primary" vertical let:url>
+            <Arc
+              {value}
+              {domain}
+              {range}
+              {innerRadius}
+              {outerRadius}
+              {cornerRadius}
+              {padAngle}
+              {label}
+              {spring}
+              let:value
+              let:boundingBox
+              fill={url}
+              track={{ class: 'fill-surface-content/5' }}
+            >
+              <Text
+                value={Math.round(value)}
+                textAnchor="middle"
+                verticalAnchor="middle"
+                class="text-4xl"
+                dy={8}
+              />
+            </Arc>
+          </LinearGradient>
+        {/key}
       </Svg>
     </Chart>
   </div>
@@ -118,44 +115,42 @@
   <Preview>
     <div class="h-[200px] p-4 border rounded">
       <Chart>
-        <Svg>
-          <Group center>
-            <LinearGradient stops={['hsl(80, 100%, 50%)', 'hsl(200, 100%, 50%)']} vertical let:url>
-              <Arc
-                {value}
-                {domain}
-                {range}
-                {innerRadius}
-                {outerRadius}
-                {cornerRadius}
-                {padAngle}
-                {label}
-                let:boundingBox
-                fill={url}
-              >
-                <!-- svg center -->
-                <!-- <Text
+        <Svg center>
+          <LinearGradient stops={['hsl(80, 100%, 50%)', 'hsl(200, 100%, 50%)']} vertical let:url>
+            <Arc
+              {value}
+              {domain}
+              {range}
+              {innerRadius}
+              {outerRadius}
+              {cornerRadius}
+              {padAngle}
+              {label}
+              let:boundingBox
+              fill={url}
+            >
+              <!-- svg center -->
+              <!-- <Text
 							value={Math.round(value)}
 							textAnchor="middle"
 							verticalAnchor="middle"
               class="text-4xl"
 							dy={8}
 						/> -->
-                <!-- arc center -->
-                <Text
-                  value={Math.round(value)}
-                  textAnchor="middle"
-                  verticalAnchor="middle"
-                  class="text-4xl"
-                  x={outerRadius - boundingBox.width / 2}
-                  y={(outerRadius - boundingBox.height / 2) * -1}
-                  dy={8}
-                />
-                <!-- <Text {value} textAnchor="middle" verticalAnchor="middle" class="text-4xl" capHeight="1.5rem" /> -->
-                <!-- <Text {value} textAnchor="middle" verticalAnchor="middle" class="text-7xl" capHeight="3.1em" /> -->
-              </Arc>
-            </LinearGradient>
-          </Group>
+              <!-- arc center -->
+              <Text
+                value={Math.round(value)}
+                textAnchor="middle"
+                verticalAnchor="middle"
+                class="text-4xl"
+                x={outerRadius - boundingBox.width / 2}
+                y={(outerRadius - boundingBox.height / 2) * -1}
+                dy={8}
+              />
+              <!-- <Text {value} textAnchor="middle" verticalAnchor="middle" class="text-4xl" capHeight="1.5rem" /> -->
+              <!-- <Text {value} textAnchor="middle" verticalAnchor="middle" class="text-7xl" capHeight="3.1em" /> -->
+            </Arc>
+          </LinearGradient>
         </Svg>
       </Chart>
     </div>
diff --git a/packages/layerchart/src/routes/docs/components/Area/+page.svelte b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
index 682ff00a8..e3c85c6c7 100644
--- a/packages/layerchart/src/routes/docs/components/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Area/+page.svelte
@@ -2,7 +2,6 @@
   import type { ComponentProps } from 'svelte';
 
   import { Field, RangeField, Switch } from 'svelte-ux';
-
   import { Area, Axis, Chart, Svg, Points } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
new file mode 100644
index 000000000..48580f765
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.svelte
@@ -0,0 +1,362 @@
+<script lang="ts">
+  import {
+    AreaChart,
+    Area,
+    Axis,
+    Highlight,
+    Svg,
+    Tooltip,
+    pivotLonger,
+    LinearGradient,
+    Rule,
+    Spline,
+  } from 'layerchart';
+  import { PeriodType } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+
+  import Preview from '$lib/docs/Preview.svelte';
+  import { createDateSeries } from '$lib/utils/genData.js';
+  import { curveCatmullRom } from 'd3-shape';
+  import { group } from 'd3-array';
+
+  export let data;
+
+  const dateSeriesData = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+  $: dateSeriesDataWithNulls = dateSeriesData.map((d) => {
+    return {
+      ...d,
+      value: Math.random() < 0.2 ? null : d.value,
+    };
+  });
+
+  const negativeDateSeriesData = createDateSeries({
+    count: 30,
+    min: -20,
+    max: 50,
+    value: 'integer',
+  });
+
+  const keys = ['apples', 'bananas', 'oranges'];
+  const multiSeriesData = createDateSeries({
+    count: 30,
+    min: 10,
+    max: 100,
+    value: 'integer',
+    keys,
+  });
+  const multiSeriesFlatData = pivotLonger(multiSeriesData, keys, 'fruit', 'value');
+  const multiSeriesDataByFruit = group(multiSeriesFlatData, (d) => d.fruit);
+</script>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value" />
+  </div>
+</Preview>
+
+<h2>Gradient</h2>
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value">
+      <svelte:fragment slot="marks">
+        <LinearGradient class="from-primary/50 to-primary/0" vertical let:url>
+          <Area line={{ class: 'stroke-2 stroke-primary' }} fill={url} />
+        </LinearGradient>
+      </svelte:fragment>
+    </AreaChart>
+  </div>
+</Preview>
+
+<h2>Threshold Gradient</h2>
+<Preview data={dateSeriesData}>
+  {@const colors = {
+    positive: 'hsl(var(--color-success))',
+    negative: 'hsl(var(--color-danger))',
+  }}
+
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={negativeDateSeriesData} x="date" y="value" props={{ xAxis: { rule: false } }}>
+      <svelte:fragment slot="marks" let:yScale let:height let:padding>
+        {@const thresholdValue = 0}
+        {@const thresholdOffset = yScale(thresholdValue) / (height + padding.bottom)}
+        <Rule y={0} />
+        <LinearGradient
+          stops={[
+            [thresholdOffset, colors.positive],
+            [thresholdOffset, colors.negative],
+          ]}
+          units="userSpaceOnUse"
+          vertical
+          let:url
+        >
+          <Area
+            y0={(d) => thresholdValue}
+            line={{ stroke: url, class: 'stroke-2' }}
+            fill={url}
+            fill-opacity={0.2}
+          />
+        </LinearGradient>
+      </svelte:fragment>
+
+      <svelte:fragment slot="highlight" let:tooltip let:y>
+        {@const value = tooltip.data && y(tooltip.data)}
+        <Highlight lines points={{ fill: value < 0 ? colors.negative : colors.positive }} />
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:x let:y>
+        <Tooltip.Root let:data>
+          {@const value = y(data)}
+          <Tooltip.Header>{format(x(data), PeriodType.Day)}</Tooltip.Header>
+          <Tooltip.List>
+            <Tooltip.Item
+              label="value"
+              value={y(data)}
+              color={value < 0 ? colors.negative : colors.positive}
+            />
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </AreaChart>
+  </div>
+</Preview>
+
+<h2>Series</h2>
+
+<Preview data={multiSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={multiSeriesData}
+      x="date"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'oranges',
+          color: 'hsl(var(--color-warning))',
+        },
+      ]}
+    />
+  </div>
+</Preview>
+
+<h2>Series (highlight on hover)</h2>
+
+<Preview data={multiSeriesDataByFruit}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      x="date"
+      y="value"
+      series={[
+        {
+          key: 'apples',
+          data: multiSeriesDataByFruit.get('apples'),
+          color: 'hsl(var(--color-danger))',
+        },
+        {
+          key: 'bananas',
+          data: multiSeriesDataByFruit.get('bananas'),
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'oranges',
+          data: multiSeriesDataByFruit.get('oranges'),
+          color: 'hsl(var(--color-warning))',
+        },
+      ]}
+      tooltip={{ mode: 'voronoi' }}
+    >
+      <svelte:fragment slot="marks" let:series let:tooltip>
+        {#each series as s}
+          {@const color =
+            tooltip.data == null || tooltip.data.fruit === s.key
+              ? s.color
+              : 'hsl(var(--color-surface-content) / 20%)'}
+
+          <Area
+            data={s.data}
+            line={{ class: 'stroke-2', stroke: color }}
+            fill={color}
+            fill-opacity={0.3}
+          />
+        {/each}
+      </svelte:fragment>
+
+      <svelte:fragment slot="highlight" let:series let:tooltip>
+        <!-- TODO: Remove hack to make typescript happy -->
+        {@const activeSeries = [...series].find((s) => s.key === tooltip.data?.fruit)}
+        <Highlight lines points={{ fill: activeSeries?.color }} />
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:x let:series let:tooltip>
+        <!-- TODO: Remove hack to make typescript happy -->
+        {@const activeSeries = [...series].find((s) => s.key === tooltip.data?.fruit)}
+        <Tooltip.Root slot="tooltip" let:data>
+          <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+          <Tooltip.List>
+            <Tooltip.Item label={data.fruit} value={data.value} color={activeSeries?.color} />
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </AreaChart>
+  </div>
+</Preview>
+
+<h2>Stack series</h2>
+
+<Preview data={multiSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart
+      data={multiSeriesData}
+      x="date"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'oranges',
+          color: 'hsl(var(--color-warning))',
+        },
+      ]}
+      seriesLayout="stack"
+    />
+  </div>
+</Preview>
+
+<h2>Labels</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value" labels />
+  </div>
+</Preview>
+
+<h2>Points</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value" points />
+  </div>
+</Preview>
+
+<h2>Radial</h2>
+
+<Preview data={data.sfoTemperatures}>
+  <div class="h-[500px] p-4 border rounded">
+    <AreaChart
+      data={data.sfoTemperatures}
+      x="date"
+      y={['minmin', 'maxmax']}
+      yRange={({ height }) => [height / 5, height / 2]}
+      radial
+      props={{
+        area: { line: false, 'fill-opacity': 1 },
+        xAxis: { format: PeriodType.Month },
+        yAxis: { ticks: 4, format: (v) => v + '° F' },
+        highlight: { points: false },
+      }}
+      series={[
+        {
+          key: 'min_max',
+          label: 'min/max',
+          value: ['min', 'max'],
+          color: 'hsl(var(--color-primary) / 20%)',
+        },
+        {
+          key: 'minmin_maxmax',
+          label: 'minmin/maxmax',
+          value: ['minmin', 'maxmax'],
+          color: 'hsl(var(--color-primary) / 20%)',
+        },
+      ]}
+    >
+      <svelte:fragment slot="below-marks">
+        <Spline y="avg" curve={curveCatmullRom} class="stroke-primary" />
+      </svelte:fragment>
+    </AreaChart>
+  </div>
+</Preview>
+
+<h2>Null gaps</h2>
+
+<Preview data={dateSeriesDataWithNulls}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesDataWithNulls} x="date" y="value" points />
+  </div>
+</Preview>
+
+<!-- TODO: Add "Null with filled gaps" using clipped paths -->
+
+<h2>Sparkline</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="w-[124px] h-[24px]">
+    <AreaChart data={dateSeriesData} x="date" y="value" axis={false} />
+  </div>
+</Preview>
+
+<h2>Custom tooltip</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value">
+      <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
+        <Tooltip.Root
+          x={padding.left}
+          y="data"
+          anchor="right"
+          contained={false}
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          let:data
+        >
+          {y(data)}
+        </Tooltip.Root>
+
+        <Tooltip.Root
+          x="data"
+          y={height}
+          anchor="top"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+          contained={false}
+          let:data
+        >
+          {format(x(data), PeriodType.Day)}
+        </Tooltip.Root>
+      </svelte:fragment>
+    </AreaChart>
+  </div>
+</Preview>
+
+<h2>Custom chart</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <AreaChart data={dateSeriesData} x="date" y="value" let:x let:y>
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+        <Highlight points lines />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data), PeriodType.DayTime)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={y(data)} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </AreaChart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts b/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts
new file mode 100644
index 000000000..e152576a2
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/AreaChart/+page.ts
@@ -0,0 +1,60 @@
+import { csvParse, autoType } from 'd3-dsv';
+import { parse } from '@layerstack/utils';
+
+import api from '$lib/components/charts/AreaChart.svelte?raw&sveld';
+import source from '$lib/components/charts/AreaChart.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+import type { AppleStockData } from '$static/data/examples/date/apple-stock.js';
+import { ascending, flatGroup, max, mean, min } from 'd3-array';
+import { celsiusToFahrenheit } from '$lib/utils/math.js';
+
+export async function load() {
+  return {
+    appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) =>
+      parse<AppleStockData>(await r.text())
+    ),
+    dailyTemperatures: await fetch('/data/examples/dailyTemperatures.csv').then(async (r) => {
+      return csvParse<{ dayOfYear: number; year: number; value: number | 'NA' }>(
+        await r.text(),
+        // @ts-expect-error
+        autoType
+      )
+        .filter((d) => d.value !== 'NA')
+        .map((d) => {
+          const origDate = new Date(d.year, 0, d.dayOfYear);
+          return {
+            ...d,
+            date: new Date(Date.UTC(2000, origDate.getUTCMonth(), origDate.getUTCDate())),
+            value: d.value !== 'NA' ? celsiusToFahrenheit(d.value) : 'NA',
+          };
+        });
+    }),
+    sfoTemperatures: await fetch('/data/examples/sfoTemperatures.csv').then(async (r) => {
+      return flatGroup(
+        csvParse<{ date: Date; tavg: number; tmax: number; tmin: number }>(
+          await r.text(),
+          // @ts-expect-error
+          autoType
+        ),
+        (d) => new Date(Date.UTC(2000, d.date.getUTCMonth(), d.date.getUTCDate())) // group by day of year
+      )
+        .sort(([a], [b]) => ascending(a, b)) // sort chronologically
+        .map(([date, v]) => ({
+          date,
+          avg: mean(v, (d) => d.tavg || NaN),
+          min: mean(v, (d) => d.tmin || NaN),
+          max: mean(v, (d) => d.tmax || NaN),
+          minmin: min(v, (d) => d.tmin || NaN),
+          maxmax: max(v, (d) => d.tmax || NaN),
+        }));
+    }),
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: 'Streamlined Chart configuration for Area charts',
+      related: ['components/Chart', 'components/Area', 'examples/Area'],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/AreaStack/+page.ts b/packages/layerchart/src/routes/docs/components/AreaStack/+page.ts
deleted file mode 100644
index de7cfd68b..000000000
--- a/packages/layerchart/src/routes/docs/components/AreaStack/+page.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import api from '$lib/components/AreaStack.svelte?raw&sveld';
-import source from '$lib/components/AreaStack.svelte?raw';
-import pageSource from './+page.svelte?raw';
-
-export async function load() {
-  return {
-    meta: {
-      api,
-      source,
-      pageSource,
-      related: ['examples/AreaStack'],
-    },
-  };
-}
diff --git a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
index 5440ec83a..acf45889b 100644
--- a/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Axis/+page.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { scaleTime } from 'd3-scale';
-  import { Field, PeriodType, Switch, format } from 'svelte-ux';
+  import { Field, PeriodType, Switch } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+  import { mdScreen } from '@layerstack/svelte-stores';
 
   import { Axis, Chart, Svg, Frame, Rule, Text } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
@@ -336,6 +338,27 @@
   </div>
 </Preview>
 
+<h2>tick count (responsive)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, 100]}
+      yNice
+      padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+    >
+      <Svg>
+        <Axis placement="bottom" rule ticks={$mdScreen ? 10 : 5} />
+        <Axis placement="left" rule />
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>remove default tick count</h2>
 
 <Preview {data}>
diff --git a/packages/layerchart/src/routes/docs/components/AreaStack/+page.svelte b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte
similarity index 61%
rename from packages/layerchart/src/routes/docs/components/AreaStack/+page.svelte
rename to packages/layerchart/src/routes/docs/components/Bar/+page.svelte
index f5e63b239..87857a3c4 100644
--- a/packages/layerchart/src/routes/docs/components/AreaStack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Bar/+page.svelte
@@ -1,4 +1,4 @@
 <script lang="ts">
-  import { Chart, Svg } from 'layerchart';
+  import { Axis, Chart, Svg } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 </script>
diff --git a/packages/layerchart/src/routes/docs/components/Bar/+page.ts b/packages/layerchart/src/routes/docs/components/Bar/+page.ts
new file mode 100644
index 000000000..6f60ad2a9
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/Bar/+page.ts
@@ -0,0 +1,14 @@
+import api from '$lib/components/Bar.svelte?raw&sveld';
+import source from '$lib/components/Bar.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      api,
+      source,
+      pageSource,
+      related: ['components/Bars', 'examples/Bars', 'examples/Columns'],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
new file mode 100644
index 000000000..fabd06940
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.svelte
@@ -0,0 +1,522 @@
+<script lang="ts">
+  import { accessor, Axis, BarChart, Bars, Highlight, Rule, Svg, Tooltip } from 'layerchart';
+  import { group, sum } from 'd3-array';
+  import { format, PeriodType } from '@layerstack/utils';
+
+  import Preview from '$lib/docs/Preview.svelte';
+  import Blockquote from '$lib/docs/Blockquote.svelte';
+  import { createDateSeries, wideData, longData } from '$lib/utils/genData.js';
+
+  export let data;
+
+  const dataByFruit = group(longData, (d) => d.fruit);
+
+  const dateSeriesData = createDateSeries({
+    count: 10,
+    min: 20,
+    max: 100,
+    value: 'integer',
+    keys: ['value', 'baseline'],
+  });
+  const horizontalDateSeriesData = dateSeriesData.slice(0, 10);
+  const dateSeriesBaselineData = dateSeriesData.map((d) => ({ ...d, value: d.baseline }));
+</script>
+
+<h1>Examples</h1>
+
+<h2>Vertical (default)</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value" />
+  </div>
+</Preview>
+
+<h2>Horizontal</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={horizontalDateSeriesData} x="value" y="date" orientation="horizontal" />
+  </div>
+</Preview>
+
+<h2>Series</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      series={[
+        { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
+        {
+          key: 'value',
+          color: 'hsl(var(--color-primary))',
+          props: { inset: 16 },
+        },
+      ]}
+    />
+  </div>
+</Preview>
+
+<h2>Series (horizontal)</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[400px] p-4 border rounded">
+    <BarChart
+      data={dateSeriesData}
+      y="date"
+      orientation="horizontal"
+      series={[
+        { key: 'baseline', color: 'hsl(var(--color-surface-content) / 20%)' },
+        { key: 'value', color: 'hsl(var(--color-primary))', props: { inset: 8 } },
+      ]}
+    />
+  </div>
+</Preview>
+
+<h2>Series data</h2>
+
+<Preview data={{ dateSeriesData, dateSeriesBaselineData }}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      x="date"
+      y="value"
+      series={[
+        {
+          key: 'baseline',
+          data: dateSeriesBaselineData,
+          color: 'hsl(var(--color-surface-content) / 20%)',
+        },
+        {
+          key: 'value',
+          data: dateSeriesData,
+          color: 'hsl(var(--color-primary))',
+          props: { inset: 16 },
+        },
+      ]}
+    />
+  </div>
+</Preview>
+
+<h2>Series (diverging)</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      series={[
+        {
+          key: 'value',
+          color: 'hsl(var(--color-primary))',
+          props: { rounded: 'top' },
+        },
+        {
+          key: 'baseline',
+          value: (d) => -d.baseline,
+          color: 'hsl(var(--color-secondary))',
+          props: { rounded: 'bottom' },
+        },
+      ]}
+    >
+      <svelte:fragment slot="above-marks">
+        <Rule y={0} />
+      </svelte:fragment>
+    </BarChart>
+  </div>
+</Preview>
+
+<h2>Series (horizontal / diverging)</h2>
+
+<Preview data={data.worldPopulationDemographics}>
+  {@const totalPopulation = sum(data.worldPopulationDemographics, (d) => d.male + d.female)}
+  <div class="h-[600px] p-4 border rounded">
+    <BarChart
+      data={data.worldPopulationDemographics}
+      y="age"
+      orientation="horizontal"
+      padding={{ left: 32, bottom: 16 }}
+      labels={{ format: (value) => format(Math.abs(value), 'metric') }}
+      props={{
+        xAxis: { format: (value) => format(Math.abs(value), 'metric') },
+        yAxis: { rule: false },
+      }}
+      series={[
+        {
+          key: 'male',
+          value: (d) => -d.male,
+          color: 'hsl(var(--color-primary))',
+          props: { rounded: 'left' },
+        },
+        {
+          key: 'female',
+          color: 'hsl(var(--color-secondary))',
+          props: { rounded: 'right' },
+        },
+      ]}
+    >
+      <svelte:fragment slot="above-marks">
+        <Rule x={0} />
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:y let:series>
+        <Tooltip.Root let:data>
+          <Tooltip.Header>Age: {format(y(data))}</Tooltip.Header>
+          <Tooltip.List>
+            {#each series as s}
+              {@const valueAccessor = accessor(s.value ?? s.key)}
+              {@const value = Math.abs(valueAccessor(data))}
+              <Tooltip.Item label={s.key} color={s.color}>
+                {format(value)}
+                <span class="text-xs text-surface-content/50"
+                  >({format(value / totalPopulation, 'percent')})</span
+                >
+              </Tooltip.Item>
+            {/each}
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </BarChart>
+  </div>
+</Preview>
+
+<Blockquote>
+  Data source: <a href="https://www.populationpyramid.net/ " target="_blank">
+    Population pyramid
+  </a>
+</Blockquote>
+
+<h2>Series (horizontal / diverging) as percent</h2>
+
+<Preview data={data.worldPopulationDemographics}>
+  {@const totalPopulation = sum(data.worldPopulationDemographics, (d) => d.male + d.female)}
+  <div class="h-[600px] p-4 border rounded">
+    <BarChart
+      data={data.worldPopulationDemographics}
+      y="age"
+      orientation="horizontal"
+      padding={{ left: 32, bottom: 16 }}
+      labels={{ format: (value) => format(Math.abs(value), 'percent') }}
+      props={{
+        xAxis: { format: (value) => format(Math.abs(value), 'percentRound') },
+        yAxis: { rule: false },
+      }}
+      series={[
+        {
+          key: 'male',
+          value: (d) => -d.male / totalPopulation,
+          color: 'hsl(var(--color-primary))',
+          props: { rounded: 'left' },
+        },
+        {
+          key: 'female',
+          value: (d) => d.female / totalPopulation,
+          color: 'hsl(var(--color-secondary))',
+          props: { rounded: 'right' },
+        },
+      ]}
+    >
+      <svelte:fragment slot="above-marks">
+        <Rule x={0} />
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:y let:series>
+        <Tooltip.Root let:data>
+          <Tooltip.Header>Age: {format(y(data))}</Tooltip.Header>
+          <Tooltip.List>
+            {#each series as s}
+              {@const valueAccessor = accessor(s.value ?? s.key)}
+              {@const value = Math.abs(valueAccessor(data))}
+              <Tooltip.Item label={s.key} color={s.color}>
+                {format(value * totalPopulation)}
+                <span class="text-xs text-surface-content/50">({format(value, 'percent')})</span>
+              </Tooltip.Item>
+            {/each}
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </BarChart>
+  </div>
+</Preview>
+
+<Blockquote>
+  Data source: <a href="https://www.populationpyramid.net/ " target="_blank">
+    Population pyramid
+  </a>
+</Blockquote>
+
+<h2>Group series</h2>
+
+<Preview data={wideData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={wideData}
+      x="year"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="group"
+      props={{
+        xAxis: { format: 'none' },
+        yAxis: { format: 'metric' },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Group series (horizontal)</h2>
+
+<Preview data={wideData}>
+  <div class="h-[500px] p-4 border rounded">
+    <BarChart
+      data={wideData}
+      orientation="horizontal"
+      y="year"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="group"
+      props={{
+        xAxis: { format: 'metric' },
+        yAxis: { format: 'none' },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Group series (series / long data)</h2>
+
+<Preview data={dataByFruit}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      x="year"
+      y="value"
+      series={[
+        { key: 'apples', data: dataByFruit.get('apples'), color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          data: dataByFruit.get('bananas'),
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          data: dataByFruit.get('cherries'),
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          data: dataByFruit.get('dates'),
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="group"
+      props={{
+        xAxis: { format: 'none' },
+        yAxis: { format: 'metric' },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Stack series</h2>
+
+<Preview data={wideData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={wideData}
+      x="year"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="stack"
+      props={{
+        xAxis: { format: 'none' },
+        yAxis: { format: 'metric' },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Stack series (horizontal)</h2>
+
+<Preview data={wideData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      data={wideData}
+      orientation="horizontal"
+      y="year"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="stack"
+      props={{
+        xAxis: { format: 'metric' },
+        yAxis: { format: 'none' },
+      }}
+    />
+  </div>
+</Preview>
+
+<!-- TODO: Possible to handle series data as separate stacks? -->
+<!--
+<h2>Stack series (series data / long data)</h2>
+
+<Preview data={dataByFruit}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart
+      x="year"
+      y="value"
+      series={[
+        { key: 'apples', data: dataByFruit.get('apples'), color: 'hsl(var(--color-danger))' },
+        {
+          key: 'bananas',
+          data: dataByFruit.get('bananas'),
+          color: 'hsl(var(--color-warning))',
+        },
+        {
+          key: 'cherries',
+          data: dataByFruit.get('cherries'),
+          color: 'hsl(var(--color-success))',
+        },
+        {
+          key: 'dates',
+          data: dataByFruit.get('dates'),
+          color: 'hsl(var(--color-info))',
+        },
+      ]}
+      seriesLayout="stack"
+      props={{
+        xAxis: { format: 'none' },
+        yAxis: { format: 'metric' },
+      }}
+    />
+  </div>
+</Preview> -->
+
+<h2>Labels</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value" labels />
+  </div>
+</Preview>
+
+<h2>Labels (inside placement)</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value" labels={{ placement: 'inside' }} />
+  </div>
+</Preview>
+
+<h2>Sparkline</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="w-[124px] h-[24px]">
+    <BarChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      axis={false}
+      bandPadding={0.1}
+      props={{ bars: { radius: 1 } }}
+    />
+  </div>
+</Preview>
+
+<h2>Custom tooltip</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value">
+      <svelte:fragment slot="tooltip" let:x let:y>
+        <Tooltip.Root let:data>
+          <Tooltip.Header>{format(x(data), PeriodType.DayTime)}</Tooltip.Header>
+          <Tooltip.List>
+            <Tooltip.Item label="value" value={y(data)} />
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </BarChart>
+  </div>
+</Preview>
+
+<h2>Custom chart</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <BarChart data={dateSeriesData} x="date" y="value" let:x let:y>
+      <Svg>
+        <Axis
+          placement="left"
+          grid
+          rule
+          format={(value) => format(value, undefined, { variant: 'short' })}
+        />
+        <Axis
+          placement="bottom"
+          rule
+          format={(value) => format(value, undefined, { variant: 'short' })}
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+        <Highlight area />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={y(data)} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </BarChart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/BarChart/+page.ts b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts
new file mode 100644
index 000000000..4819e4651
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/BarChart/+page.ts
@@ -0,0 +1,28 @@
+import { autoType, csvParse } from 'd3-dsv';
+
+import api from '$lib/components/charts/BarChart.svelte?raw&sveld';
+import source from '$lib/components/charts/BarChart.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+import type { WorldPopulationDemographicsData } from '$static/data/examples/world-population-demographics.js';
+
+export async function load() {
+  return {
+    worldPopulationDemographics: (await fetch(
+      '/data/examples/world-population-demographics.csv'
+    ).then(async (r) => csvParse(await r.text(), autoType))) as WorldPopulationDemographicsData,
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: 'Streamlined Chart configuration for Bar charts',
+      related: [
+        'components/Chart',
+        'components/Bars',
+        'examples/Bars',
+        'examples/Histogram',
+        'examples/Sparkbar',
+      ],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/Bars/+page.ts b/packages/layerchart/src/routes/docs/components/Bars/+page.ts
index 9e2876d8d..f979343fe 100644
--- a/packages/layerchart/src/routes/docs/components/Bars/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Bars/+page.ts
@@ -8,7 +8,7 @@ export async function load() {
       api,
       source,
       pageSource,
-      related: ['examples/Bars', 'examples/Columns', 'examples/Histogram'],
+      related: ['components/Bar', 'examples/Bars', 'examples/Columns', 'examples/Histogram'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
index a4f689c50..3d2090bf0 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
   import { scaleOrdinal, scaleTime } from 'd3-scale';
   import { range } from 'd3-array';
-  import { PeriodType, State, cls, format } from 'svelte-ux';
+  import { PeriodType, State } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
   import { subDays } from 'date-fns';
   import { mdiChevronRight } from '@mdi/js';
 
@@ -475,7 +477,7 @@
             />
           </Svg>
 
-          <Tooltip
+          <Tooltip.Root
             y="data"
             xOffset={4}
             anchor="bottom"
@@ -484,9 +486,9 @@
             let:data
           >
             {format(data.value, 'currency')}
-          </Tooltip>
+          </Tooltip.Root>
 
-          <Tooltip
+          <Tooltip.Root
             x="data"
             y={height + padding.top}
             yOffset={2}
@@ -496,7 +498,7 @@
             let:data
           >
             {format(data.date, PeriodType.Day)}
-          </Tooltip>
+          </Tooltip.Root>
         </Chart>
       </div>
     </State>
diff --git a/packages/layerchart/src/routes/docs/components/Brush/+page.ts b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
index d111bd18f..7ef406845 100644
--- a/packages/layerchart/src/routes/docs/components/Brush/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Brush/+page.ts
@@ -1,4 +1,4 @@
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 
 import api from '$lib/components/Brush.svelte?raw&sveld';
 import source from '$lib/components/Brush.svelte?raw';
diff --git a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
index d75d2ffbe..94078a249 100644
--- a/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Calendar/+page.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-  import { PeriodType, format } from 'svelte-ux';
+  import { format, PeriodType } from '@layerstack/utils';
   import { startOfYear, endOfYear } from 'date-fns';
   import { scaleThreshold } from 'd3-scale';
   import { range } from 'd3-array';
 
-  import { Calendar, Chart, Group, Text, Tooltip, TooltipItem, Svg } from 'layerchart';
+  import { Calendar, Chart, Group, Text, Tooltip, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -31,11 +31,11 @@
   <div class="h-[200px] p-4 border rounded">
     <Chart
       {data}
-      x={(d) => d.date}
-      r={(d) => d.value}
-      rScale={scaleThreshold().unknown('transparent')}
-      rDomain={[25, 50, 75]}
-      rRange={[
+      x="date"
+      c="value"
+      cScale={scaleThreshold().unknown('transparent')}
+      cDomain={[25, 50, 75]}
+      cRange={[
         'hsl(var(--color-primary-100))',
         'hsl(var(--color-primary-300))',
         'hsl(var(--color-primary-500))',
@@ -47,7 +47,15 @@
         <Calendar start={firstDayOfYear} end={lastDayOfYear} {tooltip} monthPath />
       </Svg>
 
-      <Tooltip header={(d) => format(d.date, PeriodType.Day)} />
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, PeriodType.Day)}</Tooltip.Header>
+
+        {#if data.value != null}
+          <Tooltip.List>
+            <Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+          </Tooltip.List>
+        {/if}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -58,11 +66,11 @@
   <div class="h-[200px] p-4 border rounded overflow-hidden">
     <Chart
       {data}
-      x={(d) => d.date}
-      r={(d) => d.value}
-      rScale={scaleThreshold().unknown('transparent')}
-      rDomain={[25, 50, 75]}
-      rRange={[
+      x="date"
+      c="value"
+      cScale={scaleThreshold().unknown('transparent')}
+      cDomain={[25, 50, 75]}
+      cRange={[
         'hsl(var(--color-primary-100))',
         'hsl(var(--color-primary-300))',
         'hsl(var(--color-primary-500))',
@@ -74,7 +82,15 @@
         <Calendar start={firstDayOfYear} end={lastDayOfYear} {tooltip} cellSize={16} monthPath />
       </Svg>
 
-      <Tooltip header={(d) => format(d.date, PeriodType.Day)} />
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, PeriodType.Day)}</Tooltip.Header>
+
+        {#if data.value != null}
+          <Tooltip.List>
+            <Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+          </Tooltip.List>
+        {/if}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -85,11 +101,11 @@
   <div class="h-[716px] p-4 border rounded overflow-hidden">
     <Chart
       {data}
-      x={(d) => d.date}
-      r={(d) => d.value}
-      rScale={scaleThreshold().unknown('transparent')}
-      rDomain={[25, 50, 75]}
-      rRange={[
+      x="date"
+      c="value"
+      cScale={scaleThreshold().unknown('transparent')}
+      cDomain={[25, 50, 75]}
+      cRange={[
         'hsl(var(--color-primary-100))',
         'hsl(var(--color-primary-300))',
         'hsl(var(--color-primary-500))',
@@ -117,11 +133,15 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(d) => format(d.date, PeriodType.Day)} let:data>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, PeriodType.Day)}</Tooltip.Header>
+
         {#if data.value != null}
-          <TooltipItem label="value" value={data.value} format="integer" valueAlign="right" />
+          <Tooltip.List>
+            <Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+          </Tooltip.List>
         {/if}
-      </Tooltip>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Chart/+page.ts b/packages/layerchart/src/routes/docs/components/Chart/+page.ts
index 44819b60d..01a8d26f4 100644
--- a/packages/layerchart/src/routes/docs/components/Chart/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Chart/+page.ts
@@ -8,9 +8,15 @@ export async function load() {
       api,
       source,
       pageSource,
-      description: 'Setup LakerCake chart context, along with tooltip and geo contexts',
+      description:
+        'Sets up chart context, including dimension scales and additional contexts such as `TooltipContext`, `GeoContext`, and `TransformContext`. See also simplified charts such as `AreaChart` and `BarChart` for streamline configuration',
       features: ['Adds support for x and y baselines (always show 0, etc)'],
-      related: ['components/TooltipContext', 'components/GeoContext'],
+      related: [
+        'components/AreaChart',
+        'components/BarChart',
+        'components/TooltipContext',
+        'components/GeoContext',
+      ],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.svelte b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.svelte
index f5a224495..4492c2be3 100644
--- a/packages/layerchart/src/routes/docs/components/ColorRamp/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/ColorRamp/+page.svelte
@@ -4,7 +4,8 @@
   import { scaleQuantize } from 'd3-scale';
 
   import { ColorRamp } from 'layerchart';
-  import { NumberStepper, entries } from 'svelte-ux';
+  import { NumberStepper } from 'svelte-ux';
+  import { entries } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
diff --git a/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte b/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
index df97aeeaf..751e252de 100644
--- a/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/HitCanvas/+page.svelte
@@ -76,7 +76,9 @@
         />
       </HitCanvas>
 
-      <Tooltip header={(data) => data.properties.name} />
+      <Tooltip.Root let:data>
+        {data.properties.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
index dddb5e199..608a70eeb 100644
--- a/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Legend/+page.svelte
@@ -142,9 +142,9 @@
   <div class="h-[40px]">
     <Chart
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
-      r="name"
-      rScale={scaleOrdinal()}
-      rRange={[
+      c="name"
+      cScale={scaleOrdinal()}
+      cRange={[
         'hsl(var(--color-success))',
         'hsl(var(--color-warning))',
         'hsl(var(--color-danger))',
@@ -161,9 +161,9 @@
   <div class="h-[300px]">
     <Chart
       data={[{ name: 'One' }, { name: 'Two' }, { name: 'Three' }]}
-      r="name"
-      rScale={scaleOrdinal()}
-      rRange={[
+      c="name"
+      cScale={scaleOrdinal()}
+      cRange={[
         'hsl(var(--color-success))',
         'hsl(var(--color-warning))',
         'hsl(var(--color-danger))',
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
new file mode 100644
index 000000000..f2c86c7d8
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.svelte
@@ -0,0 +1,471 @@
+<script lang="ts">
+  import {
+    Axis,
+    Highlight,
+    LinearGradient,
+    LineChart,
+    pivotLonger,
+    Spline,
+    Svg,
+    Tooltip,
+  } from 'layerchart';
+  import { scaleBand, scaleSequential } from 'd3-scale';
+  import { curveLinearClosed } from 'd3-shape';
+  import { extent, flatGroup, ticks } from 'd3-array';
+  import { PeriodType } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
+
+  import Preview from '$lib/docs/Preview.svelte';
+  import { createDateSeries } from '$lib/utils/genData.js';
+  import { interpolateTurbo } from 'd3-scale-chromatic';
+
+  export let data;
+
+  const dateSeriesData = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+  $: dateSeriesDataWithNulls = dateSeriesData.map((d) => {
+    return {
+      ...d,
+      value: Math.random() < 0.2 ? null : d.value,
+    };
+  });
+
+  const keys = ['apples', 'bananas', 'oranges'];
+  const multiSeriesData = createDateSeries({
+    count: 30,
+    min: 10,
+    max: 100,
+    value: 'integer',
+    keys,
+  });
+  const multiSeriesFlatData = pivotLonger(multiSeriesData, keys, 'fruit', 'value');
+
+  const pitchData = [
+    { name: 'fastball', value: 10 },
+    { name: 'change', value: 0 },
+    { name: 'slider', value: 4 },
+    { name: 'cutter', value: 8 },
+    { name: 'curve', value: 5 },
+  ];
+
+  const budgetData = [
+    { name: 'Sales', budget: 22000, actual: 40000 },
+    { name: 'Administration', budget: 3000, actual: 14000 },
+    { name: 'Information Technology', budget: 20000, actual: 28000 },
+    { name: 'Customer Support', budget: 35000, actual: 26000 },
+    { name: 'Development', budget: 50000, actual: 42000 },
+    { name: 'Marketing', budget: 18000, actual: 21000 },
+  ];
+
+  const temperatureColor = scaleSequential(
+    extent(data.dailyTemperature, (d) => d.value) as [number, number],
+    interpolateTurbo
+  );
+</script>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value" />
+  </div>
+</Preview>
+
+<h2>Series</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={multiSeriesData}
+      x="date"
+      series={[
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'bananas', color: 'hsl(var(--color-success))' },
+        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+      ]}
+    />
+  </div>
+</Preview>
+
+<h2>Series (highlight on hover)</h2>
+
+<Preview data={multiSeriesFlatData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={multiSeriesFlatData}
+      x="date"
+      y="value"
+      tooltip={{ mode: 'voronoi' }}
+      let:x
+      let:tooltip
+    >
+      {@const series = [
+        { key: 'apples', color: 'hsl(var(--color-danger))' },
+        { key: 'bananas', color: 'hsl(var(--color-success))' },
+        { key: 'oranges', color: 'hsl(var(--color-warning))' },
+      ]}
+      {@const activeSeriesColor = series.find((s) => s.key === tooltip.data?.fruit)?.color}
+      <Svg>
+        <Axis
+          placement="left"
+          grid
+          rule
+          format={(value) => format(value, undefined, { variant: 'short' })}
+        />
+        <Axis
+          placement="bottom"
+          rule
+          format={(value) => format(value, undefined, { variant: 'short' })}
+        />
+
+        {#each series as s}
+          {@const color =
+            tooltip.data == null || tooltip.data.fruit === s.key
+              ? s.color
+              : 'hsl(var(--color-surface-content) / 20%)'}
+          <Spline data={multiSeriesData} y={s.key} class="stroke-2" stroke={color} />
+        {/each}
+
+        <Highlight lines points={{ fill: activeSeriesColor }} />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} color={activeSeriesColor} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </LineChart>
+  </div>
+</Preview>
+
+<h2>Labels</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value" labels={{ offset: 10 }} />
+  </div>
+</Preview>
+
+<h2>Points</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value" points />
+  </div>
+</Preview>
+
+<h2>Labels with Points</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value" points labels={{ offset: 10 }} />
+  </div>
+</Preview>
+
+<h2>Labels within points</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={dateSeriesData}
+      x="date"
+      y="value"
+      points={{ r: 12 }}
+      labels={{ placement: 'center', class: 'text-xs fill-surface-300' }}
+      props={{
+        highlight: {
+          points: false,
+        },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Radar</h2>
+
+<Preview data={pitchData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={pitchData}
+      x="name"
+      xScale={scaleBand()}
+      y="value"
+      yPadding={[0, 10]}
+      padding={{ top: 8 }}
+      radial
+      points
+      props={{
+        spline: {
+          curve: curveLinearClosed,
+          class: 'stroke-primary fill-primary/20',
+        },
+        yAxis: {
+          ticks: [0, 5, 10],
+          format: (d) => '',
+          grid: {
+            class: 'stroke-surface-content/20 fill-surface-200/50',
+          },
+        },
+        highlight: {
+          lines: false,
+        },
+      }}
+      tooltip={{ mode: 'voronoi' }}
+    />
+  </div>
+</Preview>
+
+<h2>Radar with series data</h2>
+
+<Preview data={budgetData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart
+      data={budgetData}
+      x="name"
+      xScale={scaleBand()}
+      yPadding={[0, 10]}
+      radial
+      series={[
+        {
+          key: 'budget',
+          color: 'hsl(var(--color-secondary))',
+          props: { class: 'fill-secondary/50' },
+        },
+        { key: 'actual', color: 'hsl(var(--color-primary))', props: { class: 'fill-primary/50' } },
+      ]}
+      props={{
+        spline: {
+          curve: curveLinearClosed,
+        },
+        yAxis: {
+          ticks: 4,
+          format: 'metric',
+        },
+        highlight: {
+          lines: false,
+        },
+      }}
+      tooltip={{ mode: 'voronoi' }}
+    />
+  </div>
+</Preview>
+
+<h2>Gradient encoding</h2>
+
+<Preview data={data.dailyTemperature}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null}>
+      <svelte:fragment slot="marks">
+        <LinearGradient
+          stops={ticks(1, 0, 10).map(temperatureColor.interpolator())}
+          vertical
+          let:url
+        >
+          <Spline class="stroke-2" stroke={url} />
+        </LinearGradient>
+      </svelte:fragment>
+
+      <svelte:fragment slot="highlight" let:tooltip let:y>
+        {#if tooltip.data}
+          <Highlight lines points={{ fill: temperatureColor(y(tooltip.data)) }} />
+        {/if}
+      </svelte:fragment>
+
+      <svelte:fragment slot="tooltip" let:x let:y>
+        <Tooltip.Root let:data>
+          {@const value = y(data)}
+          <Tooltip.Header>{format(x(data))}</Tooltip.Header>
+          <Tooltip.List>
+            <Tooltip.Item label="value" {value} color={temperatureColor(value)} />
+          </Tooltip.List>
+        </Tooltip.Root>
+      </svelte:fragment>
+    </LineChart>
+  </div>
+</Preview>
+
+<h2>Gradient threshold</h2>
+
+<Preview data={data.dailyTemperature}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={data.dailyTemperature} x="date" y="value" yDomain={null}>
+      <svelte:fragment slot="marks" let:yScale let:height let:padding>
+        {@const thresholdOffset = (yScale(50) / (height + padding.bottom)) * 100 + '%'}
+        <LinearGradient
+          stops={[
+            [thresholdOffset, 'hsl(var(--color-danger))'],
+            [thresholdOffset, 'hsl(var(--color-info))'],
+          ]}
+          units="userSpaceOnUse"
+          vertical
+          let:url
+        >
+          <Spline class="stroke-2" stroke={url} />
+        </LinearGradient>
+      </svelte:fragment>
+    </LineChart>
+  </div>
+</Preview>
+
+<h2>Large series</h2>
+
+<Preview data={data.dailyTemperatures}>
+  <div class="h-[500px] p-4 border rounded">
+    <LineChart
+      x="date"
+      y="value"
+      yDomain={null}
+      props={{
+        spline: { class: 'stroke' },
+        xAxis: { format: PeriodType.Month },
+        yAxis: { ticks: 4, format: (v) => v + '° F' },
+        highlight: { points: false },
+      }}
+      series={flatGroup(data.dailyTemperatures, (d) => d.year).map(([year, data]) => {
+        return {
+          key: year,
+          data,
+          color:
+            year === 2024
+              ? 'hsl(var(--color-primary))'
+              : year === 2023
+                ? 'hsl(var(--color-primary) / 50%)'
+                : 'hsl(var(--color-surface-content))',
+          props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
+        };
+      })}
+      tooltip={{ mode: 'manual' }}
+    />
+  </div>
+</Preview>
+
+<h2>Radial large series</h2>
+
+<Preview data={data.dailyTemperatures}>
+  <div class="h-[500px] p-4 border rounded">
+    <LineChart
+      x="date"
+      y="value"
+      yDomain={null}
+      yRange={({ height }) => [height / 5, height / 2]}
+      yNice={false}
+      yPadding={[0, 20]}
+      radial
+      props={{
+        spline: { class: 'stroke' },
+        xAxis: { format: PeriodType.Month },
+        yAxis: { ticks: 4, format: (v) => v + '° F' },
+        highlight: { points: false },
+      }}
+      series={flatGroup(data.dailyTemperatures, (d) => d.year).map(([year, data]) => {
+        return {
+          key: year,
+          data,
+          color:
+            year === 2024
+              ? 'hsl(var(--color-primary))'
+              : year === 2023
+                ? 'hsl(var(--color-primary) / 50%)'
+                : 'hsl(var(--color-surface-content))',
+          props: { opacity: [2023, 2024].includes(year) ? 1 : 0.1 },
+        };
+      })}
+      tooltip={{ mode: 'manual' }}
+    />
+  </div>
+</Preview>
+
+<h2>Null gaps</h2>
+
+<Preview data={dateSeriesDataWithNulls}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesDataWithNulls} x="date" y="value" points />
+  </div>
+</Preview>
+
+<h2>Null with dashed lines</h2>
+
+<Preview data={dateSeriesDataWithNulls}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesDataWithNulls} x="date" y="value">
+      <svelte:fragment slot="below-marks" let:series>
+        {#each series as s}
+          <Spline
+            data={dateSeriesDataWithNulls.filter((d) => d.value !== null)}
+            y={s.value}
+            class="stroke-2 [stroke-dasharray:3,3]"
+            stroke={s.color}
+          />
+        {/each}
+      </svelte:fragment>
+    </LineChart>
+  </div>
+</Preview>
+
+<h2>Sparkline</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="w-[124px] h-[24px]">
+    <LineChart data={dateSeriesData} x="date" y="value" axis={false} />
+  </div>
+</Preview>
+
+<h2>Custom tooltip</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value">
+      <svelte:fragment slot="tooltip" let:x let:y let:height let:padding>
+        <Tooltip.Root
+          x={padding.left}
+          y="data"
+          anchor="right"
+          contained={false}
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          let:data
+        >
+          {y(data)}
+        </Tooltip.Root>
+
+        <Tooltip.Root
+          x="data"
+          y={height}
+          anchor="top"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
+          contained={false}
+          let:data
+        >
+          {format(x(data), PeriodType.Day)}
+        </Tooltip.Root>
+      </svelte:fragment>
+    </LineChart>
+  </div>
+</Preview>
+
+<h2>Custom chart</h2>
+
+<Preview data={dateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <LineChart data={dateSeriesData} x="date" y="value" let:x let:y>
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Spline class="stroke-2 stroke-primary" />
+        <Highlight points lines />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data), PeriodType.DayTime)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={y(data)} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </LineChart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/LineChart/+page.ts b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts
new file mode 100644
index 000000000..204bda6c9
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/LineChart/+page.ts
@@ -0,0 +1,43 @@
+import { csvParse, autoType } from 'd3-dsv';
+import { parse } from '@layerstack/utils';
+
+import api from '$lib/components/charts/LineChart.svelte?raw&sveld';
+import source from '$lib/components/charts/LineChart.svelte?raw';
+import { celsiusToFahrenheit } from '$lib/utils/math.js';
+import pageSource from './+page.svelte?raw';
+
+import type { AppleStockData } from '$static/data/examples/date/apple-stock.js';
+
+export async function load() {
+  return {
+    appleStock: await fetch('/data/examples/date/apple-stock.json').then(async (r) =>
+      parse<AppleStockData>(await r.text())
+    ),
+    dailyTemperatures: await fetch('/data/examples/dailyTemperatures.csv').then(async (r) => {
+      return csvParse<{ dayOfYear: number; year: number; value: number | 'NA' }>(
+        await r.text(),
+        // @ts-expect-error
+        autoType
+      )
+        .filter((d) => d.value !== 'NA' && d.dayOfYear <= 365 /* Ignore 366th day */)
+        .map((d) => {
+          const origDate = new Date(d.year, 0, d.dayOfYear);
+          return {
+            ...d,
+            date: new Date(Date.UTC(2000, origDate.getUTCMonth(), origDate.getUTCDate())),
+            value: d.value !== 'NA' ? celsiusToFahrenheit(d.value) : 'NA',
+          };
+        });
+    }),
+    dailyTemperature: await fetch('/data/examples/date/daily-temperature.json').then(async (r) =>
+      parse<{ date: Date; value: number }[]>(await r.text())
+    ),
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: 'Streamlined Chart configuration for Line charts',
+      related: ['components/Chart', 'components/Spline', 'examples/Line'],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
index 8751ff79e..0c2a7ad5f 100644
--- a/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Pie/+page.svelte
@@ -2,9 +2,10 @@
   import { scaleOrdinal } from 'd3-scale';
   import { format } from 'date-fns';
   import { sum } from 'd3-array';
-  import { cls, format as formatUtil } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { format as formatUtil } from '@layerstack/utils';
 
-  import { Arc, Chart, Group, Pie, Svg, Text, Tooltip, TooltipItem } from 'layerchart';
+  import { Arc, Chart, Group, Pie, Svg, Text, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -36,8 +37,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie />
       </Svg>
     </Chart>
@@ -48,16 +49,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart
-      {data}
-      x="value"
-      xRange={[-90, 90]}
-      r="date"
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
-    >
-      <Svg>
+    <Chart {data} x="value" xRange={[-90, 90]} c="date" cRange={keyColors}>
+      <Svg center>
         <Pie />
       </Svg>
     </Chart>
@@ -68,8 +61,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie range={[-90, 90]} />
       </Svg>
     </Chart>
@@ -80,8 +73,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie padAngle={0.05} />
       </Svg>
     </Chart>
@@ -92,8 +85,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie innerRadius={100} padAngle={0.03} />
       </Svg>
     </Chart>
@@ -106,8 +99,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie innerRadius={100} />
       </Svg>
     </Chart>
@@ -118,8 +111,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie innerRadius={0.9} />
       </Svg>
     </Chart>
@@ -130,8 +123,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie innerRadius={-30} />
       </Svg>
     </Chart>
@@ -142,8 +135,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie outerRadius={100} />
       </Svg>
     </Chart>
@@ -154,8 +147,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie innerRadius={100} {data} />
         <Pie outerRadius={90} data={data2} />
       </Svg>
@@ -167,8 +160,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie tweened />
       </Svg>
     </Chart>
@@ -179,8 +172,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie offset={4} />
       </Svg>
     </Chart>
@@ -191,8 +184,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie let:arcs>
           {#each arcs as arc, index}
             <Arc
@@ -213,8 +206,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date">
-      <Svg>
+    <Chart {data} x="value" c="date">
+      <Svg center>
         <Pie let:arcs>
           {#each arcs as arc, index}
             {@const colors = keyClasses[index]}
@@ -231,7 +224,7 @@
                 y={centroid[1]}
                 dy={-8}
                 textAnchor="middle"
-                verticalAnchor="middle"
+                verticalAnchoc="middle"
                 class={cls('text-base', colors.content)}
               />
               <Text
@@ -240,7 +233,7 @@
                 y={centroid[1]}
                 dy={8}
                 textAnchor="middle"
-                verticalAnchor="middle"
+                verticalAnchoc="middle"
                 class={cls('text-sm opacity-50', colors.content)}
               />
             </Arc>
@@ -255,27 +248,22 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart
-      {data}
-      x="value"
-      r="date"
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
-      let:tooltip
-    >
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
+      <Svg center>
         <Pie {tooltip} />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} format="integer" valueAlign="right" />
-        <TooltipItem
-          label="percent"
-          value={data.value / dataSum}
-          format="percent"
-          valueAlign="right"
-        />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+          <Tooltip.Item
+            label="percent"
+            value={data.value / dataSum}
+            format="percent"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -284,16 +272,8 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart
-      {data}
-      x="value"
-      r="date"
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
-      let:tooltip
-    >
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors} let:tooltip>
+      <Svg center>
         <Pie let:arcs>
           {#each arcs as arc, index}
             {@const colors = keyClasses[index]}
@@ -322,7 +302,7 @@
                   x={centroid[0]}
                   y={centroid[1]}
                   textAnchor="middle"
-                  verticalAnchor="middle"
+                  verticalAnchoc="middle"
                   class={cls('text-base', colors.content)}
                 />
               </Arc>
@@ -331,15 +311,18 @@
         </Pie>
       </Svg>
 
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} format="integer" valueAlign="right" />
-        <TooltipItem
-          label="percent"
-          value={data.value / dataSum}
-          format="percent"
-          valueAlign="right"
-        />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+          <Tooltip.Item
+            label="percent"
+            value={data.value / dataSum}
+            format="percent"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -350,20 +333,22 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
+    <Chart {data} x="value" c="date" cRange={keyColors} let:height>
       <Svg>
-        <Pie placement="left" />
+        <Group x={height / 2} center="y">
+          <Pie />
+        </Group>
       </Svg>
     </Chart>
   </div>
 </Preview>
 
-<h3>center (default)</h3>
+<h3>center</h3>
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
-      <Svg>
+    <Chart {data} x="value" c="date" cRange={keyColors}>
+      <Svg center>
         <Pie />
       </Svg>
     </Chart>
@@ -374,9 +359,11 @@
 
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
-    <Chart {data} x="value" r="date" rScale={scaleOrdinal()} rDomain={colorKeys} rRange={keyColors}>
+    <Chart {data} x="value" c="date" cRange={keyColors} let:width let:height>
       <Svg>
-        <Pie placement="right" />
+        <Group x={width - height / 2} center="y">
+          <Pie />
+        </Group>
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
new file mode 100644
index 000000000..65127dfe9
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { Arc, LinearGradient, PieChart, Text } from 'layerchart';
+  import { group } from 'd3-array';
+
+  import Preview from '$lib/docs/Preview.svelte';
+  import { longData } from '$lib/utils/genData.js';
+
+  const dataByYear = group(longData, (d) => d.year);
+  const data = dataByYear.get(2019);
+
+  const exerciseData = [
+    { label: 'move', value: 400, maxValue: 1000, color: '#ef4444' },
+    { label: 'exercise', value: 20, maxValue: 30, color: '#a3e635' },
+    { label: 'stand', value: 10, maxValue: 12, color: '#22d3ee' },
+  ];
+</script>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart {data} label="fruit" value="value" />
+  </div>
+</Preview>
+
+<h2>Donut (innerRadius)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      {data}
+      label="fruit"
+      value="value"
+      innerRadius={-20}
+      cornerRadius={5}
+      padAngle={0.02}
+    />
+  </div>
+</Preview>
+
+<h2>Arc (range)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] border rounded">
+    <PieChart
+      {data}
+      label="fruit"
+      value="value"
+      range={[-90, 90]}
+      outerRadius={300 / 2}
+      innerRadius={-20}
+      cornerRadius={10}
+      padAngle={0.02}
+      props={{ group: { y: 80 } }}
+    />
+  </div>
+</Preview>
+
+<h2>Single value</h2>
+
+<Preview>
+  <div class="h-[200px] p-4 border rounded">
+    <PieChart
+      data={[{ label: 'Example', value: 70 }]}
+      label="label"
+      value="value"
+      maxValue={100}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={10}
+    />
+  </div>
+</Preview>
+
+<h2>Single value gradient with text</h2>
+
+<Preview {data}>
+  <div class="h-[200px] p-4 border rounded">
+    <PieChart>
+      <svelte:fragment slot="marks">
+        <LinearGradient class="from-secondary to-primary" let:url>
+          <Arc
+            value={70}
+            domain={[0, 100]}
+            innerRadius={-15}
+            cornerRadius={10}
+            padAngle={0.02}
+            range={[-120, 120]}
+            fill={url}
+            track={{ class: 'fill-none stroke-surface-content/10' }}
+            let:value
+          >
+            <Text
+              value={Math.round(value) + '%'}
+              textAnchor="middle"
+              verticalAnchor="middle"
+              class="text-4xl tabular-nums"
+            />
+          </Arc>
+        </LinearGradient>
+      </svelte:fragment>
+    </PieChart>
+  </div>
+</Preview>
+
+<h2>Single value (arc)</h2>
+
+<Preview>
+  <div class="h-[120px] p-4 border rounded">
+    <PieChart
+      data={[{ label: 'Example', value: 70 }]}
+      label="label"
+      value="value"
+      maxValue={100}
+      range={[-90, 90]}
+      outerRadius={90}
+      innerRadius={-20}
+      cornerRadius={10}
+      props={{
+        group: { y: 45 },
+      }}
+    />
+  </div>
+</Preview>
+
+<h2>Series data</h2>
+
+<Preview data={dataByYear}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      label="fruit"
+      value="value"
+      series={Array.from(dataByYear, ([key, data]) => ({ key, data }))}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={5}
+      padAngle={0.01}
+    />
+  </div>
+</Preview>
+
+<h2>Series data (individual tracks)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      label="fruit"
+      value="value"
+      series={data?.map((d) => ({ key: d.fruit, data: [d] }))}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={10}
+    />
+  </div>
+</Preview>
+
+<h2>Series data (arc)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      label="fruit"
+      value="value"
+      series={data?.map((d) => ({ key: d.fruit, data: [d] }))}
+      range={[-90, 90]}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={10}
+      props={{ group: { y: 70 } }}
+    />
+  </div>
+</Preview>
+
+<h2>Series data (track color)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart
+      label="fruit"
+      value="value"
+      series={data?.map((d) => ({ key: d.fruit, data: [d] }))}
+      props={{
+        arc: {
+          track: { fill: 'hsl(var(--color-surface-content) / 10%)' },
+        },
+      }}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={10}
+    />
+  </div>
+</Preview>
+
+<h2>Series data (individual tracks, max value, and color)</h2>
+
+<Preview data={exerciseData}>
+  <div class="h-[200px] p-4 border rounded">
+    <PieChart
+      label="label"
+      value="value"
+      series={exerciseData.map((d) => {
+        return {
+          key: d.label,
+          data: [d],
+          maxValue: d.maxValue,
+          color: d.color,
+        };
+      })}
+      outerRadius={-25}
+      innerRadius={-20}
+      cornerRadius={10}
+    />
+  </div>
+</Preview>
+
+<h2>Inner component props (Arc class)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart {data} label="fruit" value="value" props={{ arc: { class: 'stroke-surface-100' } }} />
+  </div>
+</Preview>
+
+<h2>Customize colors</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart {data} label="fruit" value="value" cRange={['red', 'blue', 'green', 'orange']} />
+  </div>
+</Preview>
+
+<!-- <h2>Centroid labels</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <PieChart {data} label="fruit" value="value" labels="centroid" />
+  </div>
+</Preview> -->
diff --git a/packages/layerchart/src/routes/docs/components/PieChart/+page.ts b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts
new file mode 100644
index 000000000..d1eaceae4
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/PieChart/+page.ts
@@ -0,0 +1,15 @@
+import api from '$lib/components/charts/PieChart.svelte?raw&sveld';
+import source from '$lib/components/charts/PieChart.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+export async function load() {
+  return {
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: 'Streamlined Chart configuration for Pie charts',
+      related: ['components/Chart', 'components/Pie', 'examples/Arc'],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
new file mode 100644
index 000000000..54a4cdfd3
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.svelte
@@ -0,0 +1,167 @@
+<script lang="ts">
+  import { Axis, Highlight, Points, ScatterChart, Svg, Tooltip } from 'layerchart';
+  import { format } from '@layerstack/utils';
+  import { flatGroup } from 'd3-array';
+  import { randomNormal } from 'd3-random';
+
+  import Preview from '$lib/docs/Preview.svelte';
+  import { getSpiral } from '$lib/utils/genData.js';
+
+  export let data;
+
+  const spiralData = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
+
+  const penguinDataBySpecies = flatGroup(
+    data.penguins.filter((d) => d.flipper_length_mm !== 'NA' && d.bill_length_mm !== 'NA'),
+    (d) => d.species
+  );
+
+  const random = randomNormal();
+  const randomNormalData = Array.from({ length: 100 }, () => ({ value: random() }));
+</script>
+
+<h1>Examples</h1>
+
+<h2>Basic</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart data={spiralData} x="x" y="y" />
+  </div>
+</Preview>
+
+<h2>Radius via rScale</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart data={spiralData} x="x" y="y" r="y" rRange={[2, 30]} xNice yNice />
+  </div>
+</Preview>
+
+<h2>Series</h2>
+
+<Preview data={penguinDataBySpecies}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart
+      x="flipper_length_mm"
+      y="bill_length_mm"
+      series={penguinDataBySpecies.map(([species, data], i) => {
+        return {
+          key: species,
+          data,
+          color: [
+            'hsl(var(--color-primary))',
+            'hsl(var(--color-secondary))',
+            'hsl(var(--color-success))',
+          ][i],
+        };
+      })}
+    />
+  </div>
+</Preview>
+
+<h2>Series with radius</h2>
+
+<Preview data={penguinDataBySpecies}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart
+      x="flipper_length_mm"
+      y="bill_length_mm"
+      r="body_mass_g"
+      rRange={[2, 20]}
+      series={penguinDataBySpecies.map(([species, data], i) => {
+        return {
+          key: species,
+          data,
+          color: [
+            'hsl(var(--color-primary))',
+            'hsl(var(--color-secondary))',
+            'hsl(var(--color-success))',
+          ][i],
+        };
+      })}
+    />
+  </div>
+</Preview>
+
+<h2>Labels</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart data={spiralData} x="x" y="y" labels={{ offset: 10 }} />
+  </div>
+</Preview>
+
+<h2>Single dimension</h2>
+
+<Preview data={randomNormalData}>
+  <div class="h-[24px]">
+    <ScatterChart
+      data={randomNormalData}
+      x="value"
+      y={(d) => 0}
+      axis={false}
+      props={{ highlight: { lines: false } }}
+    >
+      <svelte:fragment slot="tooltip" let:data let:x>
+        <Tooltip.Root let:data>
+          {format(x(data))}
+        </Tooltip.Root>
+      </svelte:fragment>
+    </ScatterChart>
+  </div>
+</Preview>
+
+<h2>Custom tooltip</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart data={spiralData} x="x" y="y">
+      <svelte:fragment slot="tooltip" let:x let:y let:padding let:height>
+        <Tooltip.Root
+          x={padding.left}
+          y="data"
+          anchor="right"
+          contained={false}
+          class="text-[10px] font-semibold text-primary bg-surface-100 mr-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
+          let:data
+        >
+          {format(y(data), 'integer')}
+        </Tooltip.Root>
+
+        <Tooltip.Root
+          x="data"
+          y={height}
+          anchor="top"
+          class="text-[10px] font-semibold text-primary bg-surface-100 mt-[1px] px-2 py-[1px] border border-primary rounded whitespace-nowrap"
+          contained={false}
+          let:data
+        >
+          {format(x(data), 'integer')}
+        </Tooltip.Root>
+      </svelte:fragment>
+    </ScatterChart>
+  </div>
+</Preview>
+
+<h2>Custom chart</h2>
+
+<Preview data={spiralData}>
+  <div class="h-[400px] p-4 border rounded">
+    <ScatterChart data={spiralData} x="x" y="y" let:x let:y>
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" grid rule />
+        <Points class="fill-primary/10 stroke-primary" />
+        <Highlight points lines axis="both" />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(x(data), 'integer')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={format(y(data), 'integer')} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </ScatterChart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts
new file mode 100644
index 000000000..caeed1dcc
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/components/ScatterChart/+page.ts
@@ -0,0 +1,22 @@
+import { autoType, csvParse } from 'd3-dsv';
+
+import api from '$lib/components/charts/ScatterChart.svelte?raw&sveld';
+import source from '$lib/components/charts/ScatterChart.svelte?raw';
+import pageSource from './+page.svelte?raw';
+
+import type { PenguinsData } from '$static/data/examples/penguins.js';
+
+export async function load() {
+  return {
+    penguins: (await fetch('/data/examples/penguins.csv').then(async (r) =>
+      csvParse(await r.text(), autoType)
+    )) as PenguinsData,
+    meta: {
+      api,
+      source,
+      pageSource,
+      description: 'Streamlined Chart configuration for Scatter charts',
+      related: ['components/Chart', 'components/Points', 'examples/Scatter'],
+    },
+  };
+}
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
index f0171276f..74d5130b4 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.svelte
@@ -1,34 +1,13 @@
 <script lang="ts">
   import type { ComponentProps } from 'svelte';
   import { scaleBand, scaleOrdinal, scaleTime } from 'd3-scale';
-  import { stack, type Series, type Stack } from 'd3-shape';
+  import { stack } from 'd3-shape';
   import { format } from 'date-fns';
 
-  import {
-    Area,
-    AreaStack,
-    Axis,
-    Bars,
-    Chart,
-    Highlight,
-    Points,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    TooltipSeparator,
-  } from 'layerchart';
-
-  import {
-    Button,
-    Duration,
-    Field,
-    formatDate,
-    Menu,
-    MenuField,
-    PeriodType,
-    Toggle,
-  } from 'svelte-ux';
-  import { flatten } from 'svelte-ux/utils/array';
+  import { Area, Axis, Bars, Chart, Highlight, Points, Svg, Tooltip } from 'layerchart';
+  import { Button, Duration, Field, Menu, MenuField, PeriodType, Toggle } from 'svelte-ux';
+  import { formatDate } from '@layerstack/utils';
+  import { flatten } from '@layerstack/utils/array';
 
   import Preview from '$lib/docs/Preview.svelte';
   import TooltipControls from './TooltipControls.svelte';
@@ -144,7 +123,7 @@
     'bottom',
     'bottom-right',
   ] as const;
-  let anchor: ComponentProps<Tooltip>['anchor'] = 'top-left';
+  let anchor: ComponentProps<Tooltip.Root>['anchor'] = 'top-left';
   let snap: 'pointer' | 'data' = 'pointer';
 </script>
 
@@ -174,9 +153,109 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Custom content</h2>
+
+<Preview data={dateSeries}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeries}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+        <Highlight points lines />
+      </Svg>
+      <Tooltip.Root let:data>Anything can go here test</Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>color swatch</h2>
+
+<Preview data={dateSeries}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeries}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+        <Highlight points lines />
+      </Svg>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} color="#f00" />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>color swatch using theme</h2>
+
+<Preview data={dateSeries}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={dateSeries}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yDomain={[0, null]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+        <Highlight points lines />
+      </Svg>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} color="hsl(var(--color-primary))" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -205,12 +284,14 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip variant="invert" let:data>
-        <div slot="header" class="font-semibold text-center" let:data>
+      <Tooltip.Root variant="invert" let:data>
+        <Tooltip.Header>
           {format(data.date, 'eee, MMMM do')}
-        </div>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -240,9 +321,12 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -271,9 +355,12 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip y="data" x="data" header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root x="data" y="data" let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -305,28 +392,26 @@
         <Highlight points lines axis="both" />
       </Svg>
 
-      <Tooltip
+      <Tooltip.Root
         x={padding.left}
         y="data"
         anchor="right"
         contained={false}
-        variant="none"
         class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-1 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {data.value}
-      </Tooltip>
+      </Tooltip.Root>
 
-      <Tooltip
+      <Tooltip.Root
         x="data"
         y={height}
         anchor="top"
-        variant="none"
         class="text-[10px] font-semibold text-primary bg-surface-100 mt-[2px] px-2 py-[2px] border border-primary rounded whitespace-nowrap"
         let:data
       >
         {formatDate(data.date, PeriodType.Day)}
-      </Tooltip>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -388,17 +473,19 @@
         <Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
         <Highlight points lines />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         {anchor}
         x={snap}
         xOffset={['top', 'center', 'bottom'].includes(anchor ?? '') ? 0 : 10}
         y={snap}
         yOffset={['left', 'center', 'right'].includes(anchor ?? '') ? 0 : 10}
-        header={(data) => format(data.date, 'eee, MMMM do')}
         let:data
       >
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -441,14 +528,16 @@
           axis={charts.area.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.area.snapToDataX ? 'data' : 'pointer'}
         y={charts.area.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => format(data.date, 'eee, MMMM do')}
         let:data
       >
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -468,15 +557,16 @@
       xScale={scaleTime()}
       y={[0, 1]}
       yNice
-      r="key"
-      rScale={scaleOrdinal()}
-      rDomain={keys}
-      rRange={['hsl(var(--color-info))', 'hsl(var(--color-success))', 'hsl(var(--color-warning))']}
+      c="key"
+      cScale={scaleOrdinal()}
+      cDomain={keys}
+      cRange={['hsl(var(--color-info))', 'hsl(var(--color-success))', 'hsl(var(--color-warning))']}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{
         mode: charts.areaStack.mode,
         debug: charts.areaStack.debug,
       }}
+      let:cGet
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -485,7 +575,17 @@
           format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <AreaStack line={{ class: 'stroke-2' }} />
+
+        {#each stackData as seriesData}
+          {@const color = cGet(seriesData)}
+          <Area
+            data={seriesData}
+            line={{ stroke: color, 'stroke-width': 2 }}
+            fill={color}
+            fill-opacity={0.2}
+          />
+        {/each}
+
         <Highlight
           points={charts.areaStack.highlight.includes('points')}
           lines={charts.areaStack.highlight.includes('lines')}
@@ -493,16 +593,18 @@
           axis={charts.areaStack.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.areaStack.snapToDataX ? 'data' : 'pointer'}
         y={charts.areaStack.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => format(data.data.date, 'eee, MMMM do')}
         let:data
       >
-        {#each keys as key}
-          <TooltipItem label={key} value={data.data[key]} />
-        {/each}
-      </Tooltip>
+        <Tooltip.Header>{format(data.data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          {#each keys as key}
+            <Tooltip.Item label={key} value={data.data[key]} />
+          {/each}
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -521,7 +623,6 @@
       xScale={scaleTime()}
       y="name"
       yScale={scaleBand()}
-      yDomain={[...new Set(timeSeries.map((d) => d.name))]}
       padding={{ left: 36, bottom: 36 }}
       tooltip={{
         mode: charts.dateTime.mode,
@@ -539,14 +640,16 @@
           axis={charts.dateTime.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.dateTime.snapToDataX ? 'data' : 'pointer'}
         y={charts.dateTime.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => data.name}
         let:data
       >
-        <TooltipItem label="date" value={format(data.startDate, 'h:mm a')} />
-      </Tooltip>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="date" value={format(data.startDate, 'h:mm a')} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -567,7 +670,6 @@
       xScale={scaleTime()}
       y="name"
       yScale={scaleBand()}
-      yDomain={[...new Set(timeSeries.map((d) => d.name))]}
       padding={{ left: 36, bottom: 36 }}
       tooltip={{
         mode: charts.duration.mode,
@@ -585,19 +687,21 @@
           axis={charts.duration.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.duration.snapToDataX ? 'data' : 'pointer'}
         y={charts.duration.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => data.name}
         let:data
       >
-        <TooltipItem label="start" value={format(data.startDate, 'h:mm a')} />
-        <TooltipItem label="end" value={format(data.endDate, 'h:mm a')} />
-        <TooltipSeparator />
-        <TooltipItem label="duration" valueAlign="right">
-          <Duration start={data.startDate} end={data.endDate} />
-        </TooltipItem>
-      </Tooltip>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="start" value={format(data.startDate, 'h:mm a')} />
+          <Tooltip.Item label="end" value={format(data.endDate, 'h:mm a')} />
+          <Tooltip.Separator />
+          <Tooltip.Item label="duration" valueAlign="right">
+            <Duration start={data.startDate} end={data.endDate} />
+          </Tooltip.Item>
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -617,7 +721,6 @@
       xScale={scaleTime()}
       y="name"
       yScale={scaleBand()}
-      yDomain={[...new Set(overlapTimeSeries.map((d) => d.name))]}
       padding={{ left: 36, bottom: 36 }}
       tooltip={{
         mode: charts.multiDuration.mode,
@@ -635,19 +738,21 @@
           axis={charts.multiDuration.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.multiDuration.snapToDataX ? 'data' : 'pointer'}
         y={charts.multiDuration.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => data.name}
         let:data
       >
-        <TooltipItem label="start" value={format(data.startDate, 'h:mm a')} />
-        <TooltipItem label="end" value={format(data.endDate, 'h:mm a')} />
-        <TooltipSeparator />
-        <TooltipItem label="duration" valueAlign="right">
-          <Duration start={data.startDate} end={data.endDate} />
-        </TooltipItem>
-      </Tooltip>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="start" value={format(data.startDate, 'h:mm a')} />
+          <Tooltip.Item label="end" value={format(data.endDate, 'h:mm a')} />
+          <Tooltip.Separator />
+          <Tooltip.Item label="duration" valueAlign="right">
+            <Duration start={data.startDate} end={data.endDate} />
+          </Tooltip.Item>
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -691,14 +796,16 @@
           axis={charts.bars.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.bars.snapToDataX ? 'data' : 'pointer'}
         y={charts.bars.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => format(data.date, 'eee, MMMM do')}
         let:data
       >
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -751,15 +858,17 @@
             : false}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.multiBars.snapToDataX ? 'data' : 'pointer'}
         y={charts.multiBars.snapToDataY ? 'data' : 'pointer'}
-        header={(data) => format(data.date, 'eee, MMMM do')}
         let:data
       >
-        <TooltipItem label="value" value={data.value} />
-        <TooltipItem label="baseline" value={data.baseline} />
-      </Tooltip>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -793,14 +902,16 @@
           axis={charts.scatter.axis}
         />
       </Svg>
-      <Tooltip
+      <Tooltip.Root
         x={charts.scatter.snapToDataX ? 'data' : 'pointer'}
         y={charts.scatter.snapToDataY ? 'data' : 'pointer'}
         let:data
       >
-        <TooltipItem label="x" value={data.x} format="decimal" />
-        <TooltipItem label="y" value={data.y} format="decimal" />
-      </Tooltip>
+        <Tooltip.List>
+          <Tooltip.Item label="x" value={data.x} format="decimal" />
+          <Tooltip.Item label="y" value={data.y} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts b/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
index 54c872feb..91ffed3ef 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/+page.ts
@@ -1,5 +1,5 @@
-import api from '$lib/components/Tooltip.svelte?raw&sveld';
-import source from '$lib/components/Tooltip.svelte?raw';
+import api from '$lib/components/tooltip/Tooltip.svelte?raw&sveld';
+import source from '$lib/components/tooltip/Tooltip.svelte?raw';
 import pageSource from './+page.svelte?raw';
 
 export async function load() {
diff --git a/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte b/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte
index dc2876356..30f405b66 100644
--- a/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte
+++ b/packages/layerchart/src/routes/docs/components/Tooltip/TooltipControls.svelte
@@ -2,7 +2,7 @@
   import type { ComponentProps } from 'svelte';
   import { Field, MenuField, MultiSelectField, Switch } from 'svelte-ux';
 
-  import type TooltipContext from '$lib/components/TooltipContext.svelte';
+  import type TooltipContext from '$lib/components/tooltip/TooltipContext.svelte';
   import type Highlight from '$lib/components/Highlight.svelte';
 
   type TooltipContextProps = ComponentProps<TooltipContext>;
@@ -18,7 +18,7 @@
   };
 </script>
 
-<div class="grid grid-cols-[1fr,1fr,1fr,1fr,64px] gap-2 mb-2">
+<div class="grid grid-cols-[1fr,1fr,120px,120px,64px] gap-2 mb-2">
   <MenuField
     label="Mode"
     bind:value={settings.mode}
@@ -42,7 +42,7 @@
       { label: 'area', value: 'area' },
       { label: 'bar', value: 'bar' },
     ]}
-    formatSelected={({ options }) => options.map((x) => x.name).join(', ')}
+    formatSelected={({ options }) => options.map((x) => x.label).join(', ')}
   />
 
   <MenuField
diff --git a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
index 0c5e5fa56..c0b1b388f 100644
--- a/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
+++ b/packages/layerchart/src/routes/docs/components/TooltipContext/+page.ts
@@ -1,5 +1,5 @@
-import api from '$lib/components/TooltipContext.svelte?raw&sveld';
-import source from '$lib/components/TooltipContext.svelte?raw';
+import api from '$lib/components/tooltip/TooltipContext.svelte?raw&sveld';
+import source from '$lib/components/tooltip/TooltipContext.svelte?raw';
 import pageSource from './+page.svelte?raw';
 
 export async function load() {
diff --git a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
index 5f4593f54..24cae4e9a 100644
--- a/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/AnimatedGlobe/+page.svelte
@@ -15,7 +15,11 @@
     TransformContext,
     Svg,
   } from 'layerchart';
-  import { Button, scrollIntoView, cls, sortFunc, ButtonGroup, timerStore } from 'svelte-ux';
+  import { Button, ButtonGroup } from 'svelte-ux';
+  import { sortFunc } from '@layerstack/utils';
+  import { scrollIntoView } from '@layerstack/svelte-actions';
+  import { cls } from '@layerstack/tailwind';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import Preview from '$lib/docs/Preview.svelte';
   import GeoDebug from '$lib/docs/GeoDebug.svelte';
@@ -169,9 +173,9 @@
         {/each}
       </Svg>
 
-      <Tooltip>
-        <div slot="header" let:data>{data.properties.name}</div>
-      </Tooltip>
+      <Tooltip.Root let:data>
+        {data.properties.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -269,7 +273,9 @@
         />
       </HitCanvas>
 
-      <Tooltip header={(data) => data.properties.name} />
+      <Tooltip.Root let:data>
+        {data.properties.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
index 40653b90e..e990ee4ba 100644
--- a/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Arc/+page.svelte
@@ -11,7 +11,9 @@
     Tooltip,
     radiansToDegrees,
   } from 'layerchart';
-  import { Field, RangeField, SpringValue, Switch, Toggle, cls, round } from 'svelte-ux';
+  import { Field, RangeField, SpringValue, Switch, Toggle } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { round } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -49,30 +51,28 @@
 <Preview>
   <div class="h-[120px] p-4 border rounded">
     <Chart>
-      <Svg>
-        <Group center>
-          <Group y={16}>
-            <LinearGradient class="from-secondary to-primary" let:url>
-              <Arc
-                {value}
-                range={[-120, 120]}
-                outerRadius={60}
-                innerRadius={50}
-                cornerRadius={5}
-                spring
-                let:value
-                fill={url}
-                track={{ class: 'fill-none stroke-surface-content/10' }}
-              >
-                <Text
-                  value={Math.round(value) + '%'}
-                  textAnchor="middle"
-                  verticalAnchor="middle"
-                  class="text-3xl tabular-nums"
-                />
-              </Arc>
-            </LinearGradient>
-          </Group>
+      <Svg center>
+        <Group y={16}>
+          <LinearGradient class="from-secondary to-primary" let:url>
+            <Arc
+              {value}
+              range={[-120, 120]}
+              outerRadius={60}
+              innerRadius={50}
+              cornerRadius={5}
+              spring
+              let:value
+              fill={url}
+              track={{ class: 'fill-none stroke-surface-content/10' }}
+            >
+              <Text
+                value={Math.round(value) + '%'}
+                textAnchor="middle"
+                verticalAnchor="middle"
+                class="text-3xl tabular-nums"
+              />
+            </Arc>
+          </LinearGradient>
         </Group>
       </Svg>
     </Chart>
@@ -84,35 +84,33 @@
 <Preview>
   <div class="h-[200px] p-4 border rounded">
     <Chart>
-      <Svg>
-        <Group center>
-          <Arc
-            value={400}
-            domain={[0, 1000]}
-            innerRadius={-20}
-            cornerRadius={10}
-            class="fill-red-500"
-            track={{ class: 'fill-red-500/10' }}
-          />
-          <Arc
-            value={20}
-            domain={[0, 30]}
-            outerRadius={-25}
-            innerRadius={-20}
-            cornerRadius={10}
-            class="fill-lime-400"
-            track={{ class: 'fill-lime-400/10' }}
-          />
-          <Arc
-            value={10}
-            domain={[0, 12]}
-            outerRadius={-50}
-            innerRadius={-20}
-            cornerRadius={10}
-            class="fill-cyan-400"
-            track={{ class: 'fill-cyan-500/10' }}
-          />
-        </Group>
+      <Svg center>
+        <Arc
+          value={400}
+          domain={[0, 1000]}
+          innerRadius={-20}
+          cornerRadius={10}
+          class="fill-red-500"
+          track={{ class: 'fill-red-500/10' }}
+        />
+        <Arc
+          value={20}
+          domain={[0, 30]}
+          outerRadius={-25}
+          innerRadius={-20}
+          cornerRadius={10}
+          class="fill-lime-400"
+          track={{ class: 'fill-lime-400/10' }}
+        />
+        <Arc
+          value={10}
+          domain={[0, 12]}
+          outerRadius={-50}
+          innerRadius={-20}
+          cornerRadius={10}
+          class="fill-cyan-400"
+          track={{ class: 'fill-cyan-500/10' }}
+        />
       </Svg>
     </Chart>
   </div>
@@ -125,38 +123,36 @@
   <RangeField label="Segments" bind:value={segments} min={2} />
 </div>
 <Preview>
-  <div class="h-[240px] p-4 border rounded bg-neutral-900">
+  <div class="h-[240px] p-4 border rounded">
     <Chart>
-      <Svg>
-        <Group center>
+      <Svg center>
+        <SpringValue {value} let:value>
           {#each { length: segments } as _, segmentIndex}
             {@const segmentAngle = (2 * Math.PI) / segments}
             {@const startAngle = segmentIndex * segmentAngle}
             {@const endAngle = (segmentIndex + 1) * segmentAngle}
-            <SpringValue {value} let:value>
-              <Arc
-                {startAngle}
-                {endAngle}
-                innerRadius={-20}
-                cornerRadius={4}
-                padAngle={0.02}
-                class={cls(
-                  (segmentIndex / segments) * 100 < (value ?? 0)
-                    ? 'fill-emerald-300'
-                    : 'fill-gray-700'
-                )}
-              >
-                <Text
-                  value={Math.round(value ?? 0)}
-                  textAnchor="middle"
-                  verticalAnchor="middle"
-                  dy={16}
-                  class="text-6xl tabular-nums fill-white"
-                />
-              </Arc>
-            </SpringValue>
+            <Arc
+              {startAngle}
+              {endAngle}
+              innerRadius={-20}
+              cornerRadius={4}
+              padAngle={0.02}
+              class={cls(
+                (segmentIndex / segments) * 100 < (value ?? 0)
+                  ? 'fill-success-300'
+                  : 'fill-surface-content/10'
+              )}
+            ></Arc>
           {/each}
-        </Group>
+
+          <Text
+            value={Math.round(value ?? 0)}
+            textAnchor="middle"
+            verticalAnchor="middle"
+            dy={16}
+            class="text-6xl tabular-nums"
+          />
+        </SpringValue>
       </Svg>
     </Chart>
   </div>
@@ -167,32 +163,32 @@
 <Preview>
   <div class="h-[300px] p-4 border rounded">
     <Chart let:tooltip>
-      <Svg>
-        <Group center>
-          {#each { length: layerCount } as _, layerIndex}
-            {@const layer = layerIndex + 1}
-            {#each { length: divisions } as _, segmentIndex}
-              {@const segmentAngle = (2 * Math.PI) / divisions}
-              {@const startAngle = segmentIndex * segmentAngle}
-              {@const endAngle = (segmentIndex + 1) * segmentAngle}
-              {@const color = wheelSegmentColor(startAngle, layer)}
-              <Arc
-                {startAngle}
-                {endAngle}
-                outerRadius={layer / layerCount}
-                innerRadius={-20}
-                cornerRadius={4}
-                padAngle={0.02}
-                fill={color}
-                class="hover:scale-90 origin-center [transform-box:fill-box] transition-transform"
-                on:pointermove={(e) => tooltip?.show(e, color)}
-                on:pointerleave={(e) => tooltip?.hide()}
-              />
-            {/each}
+      <Svg center>
+        {#each { length: layerCount } as _, layerIndex}
+          {@const layer = layerIndex + 1}
+          {#each { length: divisions } as _, segmentIndex}
+            {@const segmentAngle = (2 * Math.PI) / divisions}
+            {@const startAngle = segmentIndex * segmentAngle}
+            {@const endAngle = (segmentIndex + 1) * segmentAngle}
+            {@const color = wheelSegmentColor(startAngle, layer)}
+            <Arc
+              {startAngle}
+              {endAngle}
+              outerRadius={layer / layerCount}
+              innerRadius={-20}
+              cornerRadius={4}
+              padAngle={0.02}
+              fill={color}
+              class="hover:scale-90 origin-center [transform-box:fill-box] transition-transform"
+              on:pointermove={(e) => tooltip?.show(e, color)}
+              on:pointerleave={(e) => tooltip?.hide()}
+            />
           {/each}
-        </Group>
+        {/each}
       </Svg>
-      <Tooltip header={(data) => data} />
+      <Tooltip.Root let:data>
+        {data}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -209,40 +205,38 @@
   <Preview>
     <div class="h-[200px] p-4 border rounded">
       <Chart>
-        <Svg>
-          <Group center>
-            {#if show}
-              <Arc
-                initialValue={0}
-                value={40}
-                innerRadius={-20}
-                cornerRadius={10}
-                class="fill-red-500"
-                track={{ class: 'fill-red-500/10' }}
-                tweened={{ duration: 1000, easing: cubicInOut }}
-              />
-              <Arc
-                initialValue={0}
-                value={60}
-                outerRadius={-25}
-                innerRadius={-20}
-                cornerRadius={10}
-                class="fill-lime-400"
-                track={{ class: 'fill-lime-400/10' }}
-                tweened={{ duration: 1000, easing: cubicInOut }}
-              />
-              <Arc
-                initialValue={0}
-                value={80}
-                outerRadius={-50}
-                innerRadius={-20}
-                cornerRadius={10}
-                class="fill-cyan-400"
-                track={{ class: 'fill-cyan-500/10' }}
-                tweened={{ duration: 1000, easing: cubicInOut }}
-              />
-            {/if}
-          </Group>
+        <Svg center>
+          {#if show}
+            <Arc
+              initialValue={0}
+              value={40}
+              innerRadius={-20}
+              cornerRadius={10}
+              class="fill-red-500"
+              track={{ class: 'fill-red-500/10' }}
+              tweened={{ duration: 1000, easing: cubicInOut }}
+            />
+            <Arc
+              initialValue={0}
+              value={60}
+              outerRadius={-25}
+              innerRadius={-20}
+              cornerRadius={10}
+              class="fill-lime-400"
+              track={{ class: 'fill-lime-400/10' }}
+              tweened={{ duration: 1000, easing: cubicInOut }}
+            />
+            <Arc
+              initialValue={0}
+              value={80}
+              outerRadius={-50}
+              innerRadius={-20}
+              cornerRadius={10}
+              class="fill-cyan-400"
+              track={{ class: 'fill-cyan-500/10' }}
+              tweened={{ duration: 1000, easing: cubicInOut }}
+            />
+          {/if}
         </Svg>
       </Chart>
     </div>
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
index 9562ba594..e8f4384fa 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.svelte
@@ -2,7 +2,9 @@
   import { cubicInOut } from 'svelte/easing';
   import { scaleOrdinal, scaleTime } from 'd3-scale';
   import { flatGroup } from 'd3-array';
+  import { stack } from 'd3-shape';
   import { format as formatDate } from 'date-fns';
+  import { flatten } from 'layercake';
 
   import {
     Area,
@@ -14,14 +16,16 @@
     LinearGradient,
     Point,
     RectClipPath,
+    Rule,
     Spline,
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
+    chartDataArray,
     pivotLonger,
   } from 'layerchart';
-  import { format, Field, Switch, Toggle, PeriodType } from 'svelte-ux';
+  import { Field, Switch, Toggle, PeriodType } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -29,6 +33,12 @@
   export let data;
 
   const dateSeriesData = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+  const negativeDateSeriesData = createDateSeries({
+    count: 30,
+    min: -20,
+    max: 50,
+    value: 'integer',
+  });
 
   const keys = ['apples', 'bananas', 'oranges'];
   const multiSeriesData = createDateSeries({
@@ -38,12 +48,14 @@
     value: 'integer',
     keys,
   });
+  const stackData = stack().keys(keys)(multiSeriesData) as any[];
   const multiSeriesFlatData = pivotLonger(multiSeriesData, keys, 'fruit', 'value');
   const dataByFruit = flatGroup(multiSeriesFlatData, (d) => d.fruit);
+
   const fruitColors = {
-    apples: 'hsl(var(--color-info))',
+    apples: 'hsl(var(--color-danger))',
     bananas: 'hsl(var(--color-success))',
-    oranges: 'hsl(var(--color-warning))',
+    oranges: 'hsl(var(--color-info))',
   };
 </script>
 
@@ -99,9 +111,12 @@
         <Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -203,13 +218,13 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24, right: 48 }}
       tooltip={{ mode: 'voronoi' }}
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -219,7 +234,7 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color = rScale(fruit)}
+          {@const color = cScale(fruit)}
           <Area
             {data}
             fill={color}
@@ -242,9 +257,12 @@
         {/each}
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -299,11 +317,14 @@
         <Highlight y={(d) => d.oranges} points={{ fill: fruitColors.oranges }} />
         <Highlight lines />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="apples" value={data.apples} />
-        <TooltipItem label="bananas" value={data.bananas} />
-        <TooltipItem label="oranges" value={data.oranges} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="apples" value={data.apples} />
+          <Tooltip.Item label="bananas" value={data.bananas} />
+          <Tooltip.Item label="oranges" value={data.oranges} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -319,14 +340,14 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24, right: 48 }}
       tooltip={{ mode: 'voronoi' }}
       let:tooltip
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -338,7 +359,7 @@
         {#each dataByFruit as [fruit, data]}
           {@const color =
             tooltip.data == null || tooltip.data.fruit === fruit
-              ? rScale(fruit)
+              ? cScale(fruit)
               : 'hsl(var(--color-surface-content) / 20%)'}
           <Area
             {data}
@@ -362,9 +383,12 @@
         {/each}
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -380,13 +404,13 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'voronoi' }}
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -396,7 +420,7 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color = rScale(fruit)}
+          {@const color = cScale(fruit)}
           <Area
             {data}
             fill={color}
@@ -407,9 +431,110 @@
         <Labels format="integer" />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Stack</h2>
+
+<Preview data={stackData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={stackData}
+      flatData={flatten(stackData)}
+      x={(d) => d.data.date}
+      xScale={scaleTime()}
+      y={[0, 1]}
+      yNice
+      c="key"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:data
+      let:cGet
+      let:cScale
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+
+        {#each stackData as seriesData}
+          {@const color = cGet(seriesData)}
+          <Area
+            data={seriesData}
+            line={{ stroke: color, 'stroke-width': 2 }}
+            fill={color}
+            fill-opacity={0.2}
+          />
+        {/each}
+
+        <Highlight points lines />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          {#each keys as key}
+            <Tooltip.Item label={key} value={data.data[key]} color={cScale(key)} />
+          {/each}
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Stack with gradient</h2>
+
+<Preview data={stackData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={stackData}
+      flatData={flatten(stackData)}
+      x={(d) => d.data.date}
+      xScale={scaleTime()}
+      y={[0, 1]}
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        {@const primaryColors = [
+          'hsl(var(--color-danger-500))',
+          'hsl(var(--color-success-500))',
+          'hsl(var(--color-info-500))',
+        ]}
+        {@const secondaryColors = [
+          'hsl(var(--color-danger-500) / 10%)',
+          'hsl(var(--color-success-500) / 10%)',
+          'hsl(var(--color-info-500) / 10%)',
+        ]}
+
+        {#each chartDataArray(stackData) as seriesData, index}
+          {@const primaryColor = primaryColors[index]}
+          {@const secondaryColor = secondaryColors[index]}
+
+          <LinearGradient stops={[primaryColor, secondaryColor]} vertical let:url>
+            <Area data={seriesData} fill={url} fill-opacity={0.5} line={{ stroke: primaryColor }} />
+          </LinearGradient>
+        {/each}
+      </Svg>
     </Chart>
   </div>
 </Preview>
@@ -539,6 +664,239 @@
   </Preview>
 </Toggle>
 
+<h2>Threshold with RectClipPath</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:width
+      let:height
+      let:yScale
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <RectClipPath x={0} y={0} {width} height={yScale(0)}>
+          <Area line={{ class: 'stroke-2 stroke-success' }} class="fill-success/20" />
+        </RectClipPath>
+        <RectClipPath x={0} y={yScale(0)} {width} height={height - yScale(0)}>
+          <Area line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
+        </RectClipPath>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Threshold with RectClipPath (over/under)</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:width
+      let:height
+      let:yScale
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <RectClipPath x={0} y={0} {width} height={yScale(0)}>
+          <Area line={{ class: 'stroke-2 stroke-success' }} class="fill-success/20" />
+        </RectClipPath>
+        <RectClipPath x={0} y={yScale(0)} {width} height={height - yScale(0)}>
+          <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
+        </RectClipPath>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Highlight color based on value using color scale</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      c={(d) => (d.value < 0 ? 'under' : 'over')}
+      cScale={scaleOrdinal()}
+      cDomain={['over', 'under']}
+      cRange={['hsl(var(--color-success))', 'hsl(var(--color-danger))']}
+      let:width
+      let:height
+      let:yScale
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <RectClipPath x={0} y={0} {width} height={yScale(0)}>
+          <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-success' }} class="fill-success/20" />
+        </RectClipPath>
+        <RectClipPath x={0} y={yScale(0)} {width} height={height - yScale(0)}>
+          <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
+        </RectClipPath>
+        <Highlight lines points />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Highlight color based on value using tooltip slot prop</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:width
+      let:height
+      let:yScale
+      let:tooltip
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <RectClipPath x={0} y={0} {width} height={yScale(0)}>
+          <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-success' }} class="fill-success/20" />
+        </RectClipPath>
+        <RectClipPath x={0} y={yScale(0)} {width} height={height - yScale(0)}>
+          <Area y0={(d) => 0} line={{ class: 'stroke-2 stroke-danger' }} class="fill-danger/20" />
+        </RectClipPath>
+        <Highlight
+          lines={{
+            class: tooltip.data?.value < 0 ? 'stroke-danger' : 'stroke-success',
+          }}
+          points={{
+            class: tooltip.data?.value < 0 ? 'fill-danger' : 'fill-success',
+          }}
+        />
+      </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Threshold with LinearGradient</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:yScale
+      let:height
+      let:padding
+    >
+      {@const thresholdValue = 0}
+      {@const thresholdOffset = yScale(thresholdValue) / (height + padding.bottom)}
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <LinearGradient
+          stops={[
+            [thresholdOffset, 'hsl(var(--color-success))'],
+            [thresholdOffset, 'hsl(var(--color-danger))'],
+          ]}
+          units="userSpaceOnUse"
+          vertical
+          let:url
+        >
+          <Area line={{ stroke: url, class: 'stroke-2' }} fill={url} fill-opacity={0.2} />
+        </LinearGradient>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Threshold with LinearGradient (over/under)</h2>
+
+<Preview data={negativeDateSeriesData}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      data={negativeDateSeriesData}
+      x="date"
+      xScale={scaleTime()}
+      y="value"
+      yNice
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+      let:yScale
+      let:height
+      let:padding
+    >
+      {@const thresholdValue = 0}
+      {@const thresholdOffset = yScale(thresholdValue) / (height + padding.bottom)}
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Rule y={0} />
+        <LinearGradient
+          stops={[
+            [thresholdOffset, 'hsl(var(--color-success))'],
+            [thresholdOffset, 'hsl(var(--color-danger))'],
+          ]}
+          units="userSpaceOnUse"
+          vertical
+          let:url
+        >
+          <Area
+            y0={(d) => 0}
+            line={{ stroke: url, class: 'stroke-2' }}
+            fill={url}
+            fill-opacity={0.2}
+          />
+        </LinearGradient>
+      </Svg>
+    </Chart>
+  </div>
+</Preview>
+
 <h2>Clipped area on Tooltip</h2>
 
 <Preview data={data.appleStock}>
@@ -568,7 +926,7 @@
         <Axis placement="bottom" />
       </Svg>
 
-      <Tooltip
+      <Tooltip.Root
         y={48}
         xOffset={4}
         variant="none"
@@ -576,13 +934,13 @@
         let:data
       >
         {format(data.value, 'currency')}
-      </Tooltip>
+      </Tooltip.Root>
 
-      <Tooltip x={4} y={4} variant="none" class="text-sm font-semibold leading-3" let:data>
+      <Tooltip.Root x={4} y={4} variant="none" class="text-sm font-semibold leading-3" let:data>
         {format(data.date, PeriodType.Day)}
-      </Tooltip>
+      </Tooltip.Root>
 
-      <Tooltip
+      <Tooltip.Root
         x="data"
         y={height + padding.top + 2}
         anchor="top"
@@ -591,7 +949,7 @@
         let:data
       >
         {format(data.date, PeriodType.Day)}
-      </Tooltip>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Area/+page.ts b/packages/layerchart/src/routes/docs/examples/Area/+page.ts
index 035a27e5b..92d05db4d 100644
--- a/packages/layerchart/src/routes/docs/examples/Area/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Area/+page.ts
@@ -1,4 +1,4 @@
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 
 import pageSource from './+page.svelte?raw';
 import type { AppleStockData } from '$static/data/examples/date/apple-stock.js';
diff --git a/packages/layerchart/src/routes/docs/examples/AreaStack/+page.svelte b/packages/layerchart/src/routes/docs/examples/AreaStack/+page.svelte
deleted file mode 100644
index e076c3592..000000000
--- a/packages/layerchart/src/routes/docs/examples/AreaStack/+page.svelte
+++ /dev/null
@@ -1,182 +0,0 @@
-<script lang="ts">
-  import { scaleOrdinal, scaleTime } from 'd3-scale';
-  import { stack } from 'd3-shape';
-  import { format } from 'date-fns';
-  import { formatDate, PeriodType } from 'svelte-ux/utils/date';
-  import { flatten } from 'svelte-ux/utils/array';
-
-  import {
-    Area,
-    AreaStack,
-    Axis,
-    Chart,
-    Highlight,
-    Labels,
-    LinearGradient,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    chartDataArray,
-  } from 'layerchart';
-
-  import Preview from '$lib/docs/Preview.svelte';
-  import { createDateSeries } from '$lib/utils/genData.js';
-
-  const keys = ['apples', 'bananas', 'oranges'];
-  const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer', keys });
-  const stackData = stack().keys(keys)(data) as any[];
-</script>
-
-<h1>Examples</h1>
-
-<h2>Basic</h2>
-
-<Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      data={stackData}
-      flatData={flatten(stackData)}
-      x={(d) => d.data.date}
-      xScale={scaleTime()}
-      y={[0, 1]}
-      yNice
-      r="key"
-      rScale={scaleOrdinal()}
-      rDomain={keys}
-      rRange={['hsl(var(--color-danger))', 'hsl(var(--color-success))', 'hsl(var(--color-info))']}
-      padding={{ left: 16, bottom: 24 }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis
-          placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <AreaStack line={{ 'stroke-width': 2 }} />
-      </Svg>
-    </Chart>
-  </div>
-</Preview>
-
-<h2>With Tooltip and Highlight</h2>
-
-<Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      data={stackData}
-      flatData={flatten(stackData)}
-      x={(d) => d.data.date}
-      xScale={scaleTime()}
-      y={[0, 1]}
-      yNice
-      r="key"
-      rScale={scaleOrdinal()}
-      rDomain={keys}
-      rRange={['hsl(var(--color-danger))', 'hsl(var(--color-success))', 'hsl(var(--color-info))']}
-      padding={{ left: 16, bottom: 24 }}
-      tooltip={{ mode: 'bisect-x' }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis
-          placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <AreaStack line={{ 'stroke-width': 2 }} />
-        <Highlight points lines />
-      </Svg>
-      <Tooltip header={(data) => format(data.data.date, 'eee, MMMM do')} let:data>
-        {#each keys as key}
-          <TooltipItem label={key} value={data.data[key]} />
-        {/each}
-      </Tooltip>
-    </Chart>
-  </div>
-</Preview>
-
-<!-- TODO: Current shows the stacked value, but should it show the individual series value instead? -->
-<!-- <h2>With Labels</h2>
-
-<Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      data={stackData}
-      flatData={flatten(stackData)}
-      x={(d) => d.data.date}
-      xScale={scaleTime()}
-      y={[0, 1]}
-      yNice
-      r="key"
-      rScale={scaleOrdinal()}
-      rDomain={keys}
-      rRange={['hsl(var(--color-danger))', 'hsl(var(--color-success))', 'hsl(var(--color-info))']}
-      padding={{ left: 16, bottom: 24 }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis
-          placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <AreaStack line={{ 'stroke-width': 2 }} />
-        <Labels />
-      </Svg>
-    </Chart>
-  </div>
-</Preview> -->
-
-<h2>Slot with gradient</h2>
-
-<Preview data={stackData}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      data={stackData}
-      flatData={flatten(stackData)}
-      x={(d) => d.data.date}
-      xScale={scaleTime()}
-      y={[0, 1]}
-      yNice
-      padding={{ left: 16, bottom: 24 }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis
-          placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <AreaStack let:data>
-          {@const primaryColorScale = scaleOrdinal([
-            'hsl(var(--color-danger-500))',
-            'hsl(var(--color-success-500))',
-            'hsl(var(--color-info-500))',
-          ])}
-          {@const secondaryColorScale = scaleOrdinal([
-            'hsl(var(--color-danger-500) / 10%)',
-            'hsl(var(--color-success-500) / 10%)',
-            'hsl(var(--color-info-500) / 10%)',
-          ])}
-
-          {#each chartDataArray(data) as seriesData, index}
-            {@const primaryColor = primaryColorScale(String(index))}
-            {@const secondaryColor = secondaryColorScale(String(index))}
-
-            <LinearGradient stops={[primaryColor, secondaryColor]} vertical let:url>
-              <Area
-                data={seriesData}
-                y0={(d) => d[0]}
-                y1={(d) => d[1]}
-                fill={url}
-                fill-opacity={0.5}
-                line={{ stroke: primaryColor }}
-              />
-            </LinearGradient>
-          {/each}
-        </AreaStack>
-      </Svg>
-    </Chart>
-  </div>
-</Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
index 2f0162a66..4fd0624b1 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
   import { cubicInOut } from 'svelte/easing';
   import { scaleBand, scaleOrdinal, scaleTime } from 'd3-scale';
-  import { format } from 'date-fns';
-  import { extent, mean } from 'd3-array';
+  import { mean, sum } from 'd3-array';
   import { stackOffsetExpand } from 'd3-shape';
 
-  import {
-    Field,
-    ToggleGroup,
-    ToggleOption,
-    formatDate,
-    PeriodType,
-    Toggle,
-    Switch,
-  } from 'svelte-ux';
+  import { Field, ToggleGroup, ToggleOption, Toggle, Switch } from 'svelte-ux';
+  import { format, PeriodType } from '@layerstack/utils';
 
   import {
     Bar,
@@ -28,14 +20,14 @@
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
-    createStackData,
+    groupStackData,
     stackOffsetSeparated,
     Pattern,
   } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries, longData } from '$lib/utils/genData.js';
+  import { unique } from '@layerstack/utils/array';
 
   const data = createDateSeries({
     count: 10,
@@ -46,19 +38,19 @@
   });
   const negativeData = createDateSeries({ min: -20, max: 50, value: 'integer' });
 
-  const groupedData = createStackData(longData, { xKey: 'year', groupBy: 'fruit' });
-  const stackedData = createStackData(longData, { xKey: 'year', stackBy: 'fruit' });
-  const groupedStackedData = createStackData(longData, {
+  const groupedData = groupStackData(longData, { xKey: 'year', groupBy: 'fruit' });
+  const stackedData = groupStackData(longData, { xKey: 'year', stackBy: 'fruit' });
+  const groupedStackedData = groupStackData(longData, {
     xKey: 'year',
     groupBy: 'basket',
     stackBy: 'fruit',
   });
-  const stackedPercentData = createStackData(longData, {
+  const stackedPercentData = groupStackData(longData, {
     xKey: 'year',
     stackBy: 'fruit',
     offset: stackOffsetExpand,
   });
-  const stackedSeperatedData = createStackData(longData, {
+  const stackedSeperatedData = groupStackData(longData, {
     xKey: 'year',
     stackBy: 'fruit',
     offset: stackOffsetSeparated,
@@ -75,29 +67,36 @@
   let transitionChartMode = 'group';
   $: transitionChart =
     transitionChartMode === 'group'
-      ? {
+      ? ({
           groupBy: 'fruit',
           stackBy: undefined,
-        }
+        } as const)
       : transitionChartMode === 'stack'
-        ? {
+        ? ({
             groupBy: undefined,
             stackBy: 'fruit',
-          }
+          } as const)
         : transitionChartMode === 'groupStack'
-          ? {
+          ? ({
               groupBy: 'basket',
               stackBy: 'fruit',
-            }
-          : {
+            } as const)
+          : ({
               groupBy: undefined,
               stackBy: undefined,
-            };
-  $: transitionData = createStackData(longData, {
+            } as const);
+  $: transitionData = groupStackData(longData, {
     xKey: 'year',
     groupBy: transitionChart.groupBy,
     stackBy: transitionChart.stackBy,
-  });
+  }) as {
+    year: string;
+    fruit: string;
+    basket: number;
+    keys: string[];
+    value: number;
+    values: number[];
+  }[];
 </script>
 
 <h1>Examples</h1>
@@ -119,7 +118,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -145,7 +144,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} rounded="right" strokeWidth={1} class="fill-primary" />
@@ -172,15 +171,20 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -203,7 +207,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars
@@ -213,9 +217,14 @@
         />
         <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1, radius: 4 }} />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -238,7 +247,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars
@@ -254,9 +263,14 @@
           </svelte:fragment>
         </Highlight>
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -277,7 +291,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -302,7 +316,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -328,7 +342,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Rule x={0} />
@@ -355,7 +369,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Rule x={0} />
@@ -383,7 +397,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           ticks={4}
           rule
         />
@@ -410,7 +424,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           ticks={(scale) => scaleTime(scale.domain(), scale.range()).ticks(4)}
           rule
         />
@@ -437,7 +451,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <LinearGradient class="from-green-400 to-blue-500" units="userSpaceOnUse" let:url>
@@ -465,7 +479,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars>
@@ -500,7 +514,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -534,7 +548,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -567,7 +581,7 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -604,7 +618,7 @@
         <Axis placement="bottom" grid={{ class: 'stroke-surface-100' }} rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
       </Svg>
@@ -630,7 +644,7 @@
         <Axis placement="bottom" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
       </Svg>
@@ -644,7 +658,7 @@
   <div class="h-[500px] p-4 border rounded">
     <Chart
       {data}
-      x={(d) => Math.max(d.value, d.baseline)}
+      x={['value', 'baseline']}
       xDomain={[0, null]}
       xNice
       y="date"
@@ -656,17 +670,63 @@
         <Axis placement="bottom" grid rule />
         <Axis
           placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars x="baseline" radius={4} strokeWidth={1} class="fill-surface-content/20" />
         <Bars x="value" radius={4} strokeWidth={1} inset={16} class="fill-primary" />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-        <TooltipItem label="baseline" value={data.baseline} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Multiple (diverging)</h2>
+
+<Preview {data}>
+  <div class="h-[500px] p-4 border rounded">
+    <Chart
+      {data}
+      x={['value', (d) => -d.baseline]}
+      xNice
+      y="date"
+      yScale={scaleBand().padding(0.4)}
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+    >
+      <Svg>
+        <Axis placement="bottom" grid rule />
+        <Axis placement="left" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Bars x="value" radius={4} rounded="right" strokeWidth={1} class="fill-primary" />
+        <Bars
+          x={(d) => -d.baseline}
+          radius={4}
+          rounded="left"
+          strokeWidth={1}
+          class="fill-secondary"
+        />
+        <Rule x={0} />
+
+        <Highlight area />
+      </Svg>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -695,7 +755,7 @@
           <Axis placement="bottom" grid rule />
           <Axis
             placement="left"
-            format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+            format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
             rule
           />
           {#if show}
@@ -723,23 +783,53 @@
   <div class="h-[400px] p-4 border rounded">
     <Chart
       data={groupedData}
-      flatData={longData}
-      x="values"
-      xDomain={extent(groupedData.flatMap((d) => d.values))}
+      x="value"
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.3).paddingOuter(0.1)}
-      r={(d) => d}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      y1="fruit"
+      y1Scale={scaleBand()}
+      y1Domain={colorKeys}
+      y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
-        <Bars groupBy="fruit" radius={4} strokeWidth={1} />
+        <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -751,21 +841,48 @@
     <Chart
       data={stackedData}
       x="values"
-      xDomain={extent(stackedData.flatMap((d) => d.values))}
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-      r={(d) => d.keys[1]}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -777,74 +894,105 @@
     <Chart
       data={stackedPercentData}
       x="values"
-      xDomain={extent(stackedPercentData.flatMap((d) => d.values))}
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-      r={(d) => d.keys[1]}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule format="percentRound" />
         <Axis placement="left" rule />
         <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
-<!-- <h2>Stack (Separated)</h2>
-
-<Preview data={stackedSeperatedData}>
-	<div class="h-[300px] p-4 border rounded">
-		<Chart
-			data={stackedSeperatedData}
-			x="values"
-      xDomain={extent(stackedSeperatedData.flatMap((d) => d.values))}
-			xNice
-			y="year"
-			yScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-			r={(d) => d.keys[1]}
-			rScale={scaleOrdinal()}
-			rDomain={colorKeys}
-			rRange={keyColors}
-			padding={{ left: 16, bottom: 24 }}
-		>
-			<Svg>
-        <Axis placement="bottom" grid rule />
-				<Axis placement="left" rule />
-				<Bars radius={4} strokeWidth={1} />
-			</Svg>
-		</Chart>
-	</div>
-</Preview> -->
-
 <h2>Grouped and Stacked</h2>
 
 <Preview data={groupedStackedData}>
   <div class="h-[300px] p-4 border rounded">
     <Chart
       data={groupedStackedData}
-      flatData={longData}
       x="values"
-      xDomain={extent(groupedStackedData.flatMap((d) => d.values))}
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-      r={(d) => d}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      y1="basket"
+      y1Scale={scaleBand().padding(0.1)}
+      y1Domain={[1, 2]}
+      y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
-        <Bars groupBy="basket" radius={4} strokeWidth={1} />
+        <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -867,35 +1015,33 @@
     <Chart
       data={transitionData}
       x="values"
-      xDomain={extent(stackedData.flatMap((d) => d.values))}
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
-      r={(d) => {
-        // Color by fruit (last key)
-        return d.keys.at(-1);
-      }}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      y1={transitionChart.groupBy}
+      y1Scale={scaleBand().padding(0.1)}
+      y1Domain={transitionChart.groupBy
+        ? unique(transitionData.map((d) => d[transitionChart.groupBy]))
+        : undefined}
+      y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
       let:data
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <g>
           <!-- TODO: 'data' can be used once type issue is resolved -->
-          {#each transitionData as bar (bar.keys
-            .filter((key) => typeof key !== 'number')
-            .join('-'))}
+          {#each transitionData as bar (bar.year + '-' + bar.fruit)}
             <Bar
               {bar}
-              groupBy={transitionChart.groupBy}
-              groupPaddingInner={0.2}
-              groupPaddingOuter={0}
-              fill={rScale(bar.keys.at(-1))}
+              fill={cScale(bar.fruit)}
               radius={4}
               strokeWidth={1}
               tweened={{
@@ -907,45 +1053,38 @@
             />
           {/each}
         </g>
+        <Highlight area />
       </Svg>
-    </Chart>
-  </div>
-</Preview>
 
-<h2>Click handler</h2>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
 
-<Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      {data}
-      x="value"
-      xDomain={[0, null]}
-      xNice
-      y="date"
-      yScale={scaleBand().padding(0.4)}
-      padding={{ left: 20, bottom: 20 }}
-      tooltip={{
-        mode: 'band',
-        onClick({ data }) {
-          alert('You clicked on:\n' + JSON.stringify(data, null, 2));
-        },
-      }}
-    >
-      <Svg>
-        <Axis placement="bottom" grid rule />
-        <Axis
-          placement="left"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <Bars radius={4} strokeWidth={1} class="fill-primary" />
-        <Highlight area />
-      </Svg>
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
-<h2>Click handlers for stack/grouped bars</h2>
+<h2>Tooltip and click handlers for individual stack/grouped bar</h2>
 
 <div class="grid grid-cols-[1fr,1fr] gap-2 mb-2">
   <Field label="Mode">
@@ -963,35 +1102,33 @@
     <Chart
       data={transitionData}
       x="values"
-      xDomain={extent(stackedData.flatMap((d) => d.values))}
       xNice
       y="year"
       yScale={scaleBand().paddingInner(0.2).paddingOuter(0.1)}
-      r={(d) => {
-        // Color by fruit (last key)
-        return d.keys.at(-1);
-      }}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      y1={transitionChart.groupBy}
+      y1Scale={scaleBand().padding(0.1)}
+      y1Domain={transitionChart.groupBy
+        ? unique(transitionData.map((d) => d[transitionChart.groupBy]))
+        : undefined}
+      y1Range={({ yScale }) => [0, yScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      let:tooltip
       let:data
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="bottom" grid rule />
         <Axis placement="left" rule />
         <g>
           <!-- TODO: 'data' can be used once type issue is resolved -->
-          {#each transitionData as bar (bar.keys
-            .filter((key) => typeof key !== 'number')
-            .join('-'))}
+          {#each transitionData as bar (bar.year + '-' + bar.fruit)}
             <Bar
               {bar}
-              groupBy={transitionChart.groupBy}
-              groupPaddingInner={0.2}
-              groupPaddingOuter={0}
-              fill={rScale(bar.keys.at(-1))}
+              fill={cScale(bar.fruit)}
               radius={4}
               strokeWidth={1}
               tweened={{
@@ -1004,10 +1141,59 @@
               on:click={(e) => {
                 alert('You clicked on:\n' + JSON.stringify(bar, null, 2));
               }}
+              on:pointerenter={(e) => tooltip?.show(e, bar)}
+              on:pointermove={(e) => tooltip?.show(e, bar)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each}
         </g>
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label={data.fruit}
+            value={data.value}
+            color={cScale(data.fruit)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Click handler</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="value"
+      xDomain={[0, null]}
+      xNice
+      y="date"
+      yScale={scaleBand().padding(0.4)}
+      padding={{ left: 20, bottom: 20 }}
+      tooltip={{
+        mode: 'band',
+        onClick({ data }) {
+          alert('You clicked on:\n' + JSON.stringify(data, null, 2));
+        },
+      }}
+    >
+      <Svg>
+        <Axis placement="bottom" grid rule />
+        <Axis
+          placement="left"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+        <Highlight area />
+      </Svg>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
index e737de2ed..b40169ef0 100644
--- a/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Bars/+page.ts
@@ -5,7 +5,7 @@ export async function load() {
     meta: {
       title: 'Bar Chart (Horizontal)',
       pageSource,
-      related: ['components/Bars', 'examples/Columns', 'examples/Histogram'],
+      related: ['components/Bars', 'examples/Columns', 'examples/Histogram', 'charts/BarChart'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
index b873137a8..0bb41a0b9 100644
--- a/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Beeswarm/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { scaleOrdinal } from 'd3-scale';
   import { forceX, forceY, forceCollide } from 'd3-force';
-  import { PeriodType } from 'svelte-ux';
+  import { PeriodType } from '@layerstack/utils';
 
-  import { Axis, Chart, Circle, ForceSimulation, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Axis, Chart, Circle, ForceSimulation, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -56,12 +56,15 @@
         </ForceSimulation>
       </Svg>
 
-      <Tooltip header={(d) => d.name} let:data>
-        <TooltipItem label="Birth date" value={data.date_of_birth} format={PeriodType.Day} />
-        <TooltipItem label="State" value={data.state_name} />
-        <TooltipItem label="Party" value={data.party} />
-        <TooltipItem label="Gender" value={data.gender} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Birth date" value={data.date_of_birth} format={PeriodType.Day} />
+          <Tooltip.Item label="State" value={data.state_name} />
+          <Tooltip.Item label="Party" value={data.party} />
+          <Tooltip.Item label="Gender" value={data.gender} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
index 49917802c..cb0de3563 100644
--- a/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/BubbleMap/+page.svelte
@@ -5,7 +5,7 @@
   import { interpolateViridis } from 'd3-scale-chromatic';
   import { quantize } from 'd3-interpolate';
   import { feature } from 'topojson-client';
-  import { sortFunc } from 'svelte-ux';
+  import { sortFunc } from '@layerstack/utils';
 
   import {
     Chart,
@@ -15,7 +15,6 @@
     Legend,
     Svg,
     Tooltip,
-    TooltipItem,
     TransformControls,
   } from 'layerchart';
 
@@ -129,30 +128,32 @@
         class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
       />
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = data.properties.data}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>
+          {data.properties.name + ' - ' + data.properties.data?.state}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -239,30 +240,32 @@
 
       <Legend scale={colorScale} title="Est. Percent under 18" placement="top-left" />
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = data.properties.data}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>
+          {data.properties.name + ' - ' + data.properties.data?.state}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
index b4d413ee4..53ddeb669 100644
--- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { scaleBand, scaleOrdinal } from 'd3-scale';
 
-  import { Axis, Bars, Chart, Highlight, Points, Svg, Tooltip, TooltipItem } from 'layerchart';
-  import { PeriodType, formatDate } from 'svelte-ux';
+  import { Axis, Bars, Chart, Highlight, Points, Svg, Tooltip } from 'layerchart';
+  import { PeriodType, formatDate } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -22,10 +22,10 @@
       xScale={scaleBand().paddingInner(0.4)}
       y={['high', 'low']}
       yNice
-      r={(d) => (d.close < d.open ? 'desc' : 'asc')}
-      rScale={scaleOrdinal()}
-      rDomain={['desc', 'asc']}
-      rRange={['#e41a1c', '#4daf4a']}
+      c={(d) => (d.close < d.open ? 'desc' : 'asc')}
+      cScale={scaleOrdinal()}
+      cDomain={['desc', 'asc']}
+      cRange={['#e41a1c', '#4daf4a']}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
@@ -36,12 +36,15 @@
         <Bars y={(d) => [d.open, d.close]} radius={2} />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => formatDate(data.date, PeriodType.Day)} let:data>
-        <TooltipItem label="Open" value={data.open} format="decimal" />
-        <TooltipItem label="Close" value={data.close} format="decimal" />
-        <TooltipItem label="High" value={data.high} format="decimal" />
-        <TooltipItem label="Low" value={data.low} format="decimal" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, PeriodType.Day)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Open" value={data.open} format="decimal" />
+          <Tooltip.Item label="Close" value={data.close} format="decimal" />
+          <Tooltip.Item label="High" value={data.high} format="decimal" />
+          <Tooltip.Item label="Low" value={data.low} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
index e78628bb3..cbc4301e5 100644
--- a/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Candlestick/+page.ts
@@ -1,4 +1,4 @@
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 import type { AppleTickerData } from '$static/data/examples/date/apple-ticker.js';
 
 import pageSource from './+page.svelte?raw';
diff --git a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
index 71d3fc1c5..e1a46b17e 100644
--- a/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Choropleth/+page.svelte
@@ -4,7 +4,7 @@
   import { schemeBlues } from 'd3-scale-chromatic';
   import { geoIdentity, type GeoProjection } from 'd3-geo';
   import { feature } from 'topojson-client';
-  import { format } from 'svelte-ux';
+  import { format } from '@layerstack/utils';
 
   import {
     Canvas,
@@ -14,7 +14,6 @@
     Legend,
     Svg,
     Tooltip,
-    TooltipItem,
     TransformControls,
   } from 'layerchart';
 
@@ -107,30 +106,32 @@
         class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
       />
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = populationByFips.get(data.id)}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 ?? 0 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>
+          {data.properties.name + ' - ' + data.properties.data?.state}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 ?? 0 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -206,30 +207,32 @@
         class="absolute bg-surface-100/80 px-2 py-1 backdrop-blur-sm rounded m-1"
       />
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = populationByFips.get(data.id)}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 ?? 0 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>
+          {data.properties.name + ' - ' + data.properties.data?.state}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 ?? 0 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
index 0adb7f747..0e2dac2f5 100644
--- a/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Columns/+page.svelte
@@ -1,9 +1,8 @@
 <script lang="ts">
   import { cubicInOut } from 'svelte/easing';
   import { scaleBand, scaleOrdinal, scaleTime } from 'd3-scale';
-  import { extent, mean } from 'd3-array';
+  import { mean, sum } from 'd3-array';
   import { stackOffsetExpand } from 'd3-shape';
-  import { format } from 'date-fns';
 
   import {
     Axis,
@@ -19,23 +18,16 @@
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
-    createStackData,
+    groupStackData,
     stackOffsetSeparated,
   } from 'layerchart';
 
-  import {
-    Field,
-    ToggleGroup,
-    ToggleOption,
-    formatDate,
-    PeriodType,
-    Toggle,
-    Switch,
-  } from 'svelte-ux';
+  import { Field, ToggleGroup, ToggleOption, Toggle, Switch } from 'svelte-ux';
+  import { format, PeriodType } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries, longData } from '$lib/utils/genData.js';
+  import { unique } from '@layerstack/utils/array';
 
   const data = createDateSeries({
     count: 30,
@@ -46,19 +38,19 @@
   });
   const negativeData = createDateSeries({ count: 30, min: -20, max: 50, value: 'integer' });
 
-  const groupedData = createStackData(longData, { xKey: 'year', groupBy: 'fruit' });
-  const stackedData = createStackData(longData, { xKey: 'year', stackBy: 'fruit' });
-  const groupedStackedData = createStackData(longData, {
+  const groupedData = groupStackData(longData, { xKey: 'year', groupBy: 'fruit' });
+  const stackedData = groupStackData(longData, { xKey: 'year', stackBy: 'fruit' });
+  const groupedStackedData = groupStackData(longData, {
     xKey: 'year',
     groupBy: 'basket',
     stackBy: 'fruit',
   });
-  const stackedPercentData = createStackData(longData, {
+  const stackedPercentData = groupStackData(longData, {
     xKey: 'year',
     stackBy: 'fruit',
     offset: stackOffsetExpand,
   });
-  const stackedSeperatedData = createStackData(longData, {
+  const stackedSeperatedData = groupStackData(longData, {
     xKey: 'year',
     stackBy: 'fruit',
     offset: stackOffsetSeparated,
@@ -75,35 +67,35 @@
   let transitionChartMode = 'group';
   $: transitionChart =
     transitionChartMode === 'group'
-      ? {
+      ? ({
           groupBy: 'fruit',
           stackBy: undefined,
-        }
+        } as const)
       : transitionChartMode === 'stack'
-        ? {
+        ? ({
             groupBy: undefined,
             stackBy: 'fruit',
-          }
+          } as const)
         : transitionChartMode === 'groupStack'
-          ? {
+          ? ({
               groupBy: 'basket',
               stackBy: 'fruit',
-            }
-          : {
+            } as const)
+          : ({
               groupBy: undefined,
               stackBy: undefined,
-            };
-  $: transitionData = createStackData(longData, {
+            } as const);
+  $: transitionData = groupStackData(longData, {
     xKey: 'year',
     groupBy: transitionChart.groupBy,
     stackBy: transitionChart.stackBy,
   }) as {
-    basket: number;
+    year: string;
     fruit: string;
+    basket: number;
     keys: string[];
     value: number;
     values: number[];
-    year: string;
   }[];
 </script>
 
@@ -126,7 +118,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -152,7 +144,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} rounded="top" strokeWidth={1} class="fill-primary" />
@@ -179,15 +171,20 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -210,7 +207,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars
@@ -220,9 +217,14 @@
         />
         <Highlight area bar={{ class: 'fill-primary', strokeWidth: 1, radius: 4 }} />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -245,7 +247,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars
@@ -261,9 +263,14 @@
           </svelte:fragment>
         </Highlight>
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -284,7 +291,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -309,7 +316,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -336,7 +343,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Rule y={0} />
@@ -364,7 +371,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Rule y={0} />
@@ -392,7 +399,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           ticks={4}
           rule
         />
@@ -419,7 +426,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           ticks={(scale) => scaleTime(scale.domain(), scale.range()).ticks(4)}
           rule
         />
@@ -446,7 +453,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <LinearGradient class="from-blue-500 to-green-400" vertical units="userSpaceOnUse" let:url>
@@ -474,7 +481,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars>
@@ -509,7 +516,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -543,7 +550,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -577,7 +584,7 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars radius={4} strokeWidth={1} class="fill-primary" />
@@ -614,7 +621,7 @@
         <Axis placement="left" grid={{ class: 'stroke-surface-100' }} rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
       </Svg>
@@ -640,7 +647,7 @@
         <Axis placement="left" grid={{ class: 'mix-blend-multiply' }} rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
       </Svg>
@@ -656,7 +663,7 @@
       {data}
       x="date"
       xScale={scaleBand().padding(0.4)}
-      y={(d) => Math.max(d.value, d.baseline)}
+      y={['value', 'baseline']}
       yDomain={[0, null]}
       yNice={4}
       padding={{ left: 16, bottom: 24 }}
@@ -666,17 +673,62 @@
         <Axis placement="left" grid rule />
         <Axis
           placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
         <Bars y="baseline" radius={4} strokeWidth={1} class="fill-surface-content/20" />
         <Bars y="value" radius={4} strokeWidth={1} inset={8} class="fill-primary" />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-        <TooltipItem label="baseline" value={data.baseline} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Multiple (diverging)</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleBand().padding(0.4)}
+      y={['value', (d) => -d.baseline]}
+      yNice={4}
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'bisect-x' }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule format={(d) => format(Math.abs(d), 'integer')} />
+        <Axis placement="bottom" format={(d) => format(d, PeriodType.Day, { variant: 'short' })} />
+        <Bars y="value" radius={4} rounded="top" strokeWidth={1} class="fill-primary" />
+        <Bars
+          y={(d) => -d.baseline}
+          radius={4}
+          rounded="bottom"
+          strokeWidth={1}
+          class="fill-secondary"
+        />
+        <Rule y={0} />
+        <Highlight area />
+      </Svg>
+      <Tooltip.Root let:data>
+        <Tooltip.Header
+          >{format(data.date, PeriodType.Custom, { custom: 'eee, MMMM do' })}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -705,7 +757,7 @@
           <Axis placement="left" grid rule />
           <Axis
             placement="bottom"
-            format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
+            format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
             rule
           />
           {#if show}
@@ -733,23 +785,53 @@
   <div class="h-[300px] p-4 border rounded">
     <Chart
       data={groupedData}
-      flatData={longData}
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-      y="values"
-      yDomain={extent(groupedData.flatMap((d) => d.values))}
+      y="value"
       yNice={4}
-      r={(d) => d}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      x1="fruit"
+      x1Scale={scaleBand()}
+      x1Domain={colorKeys}
+      x1Range={({ xScale }) => [0, xScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
-        <Bars groupBy="fruit" radius={4} strokeWidth={1} />
+        <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -763,19 +845,46 @@
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
       y="values"
-      yDomain={extent(stackedData.flatMap((d) => d.values))}
       yNice={4}
-      r={(d) => d.keys[1]}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -789,72 +898,103 @@
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
       y="values"
-      yDomain={extent(stackedPercentData.flatMap((d) => d.values))}
       yNice={4}
-      r={(d) => d.keys[1]}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule format="percentRound" />
         <Axis placement="bottom" rule />
         <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
-<!-- <h2>Stack (Separated)</h2>
-
-<Preview data={stackedSeperatedData}>
-	<div class="h-[300px] p-4 border rounded">
-		<Chart
-			data={stackedSeperatedData}
-			x="year"
-			xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
-			y="values"
-      yDomain={extent(stackedSeperatedData.flatMap((d) => d.values))}
-      yNice={4}
-			r={(d) => d.keys[1]}
-			rScale={scaleOrdinal()}
-			rDomain={colorKeys}
-			rRange={keyColors}
-			padding={{ left: 16, bottom: 24 }}
-		>
-			<Svg>
-				<Axis placement="left" grid rule />
-				<Axis placement="bottom" rule />
-				<Bars radius={4} strokeWidth={1} />
-			</Svg>
-		</Chart>
-	</div>
-</Preview> -->
-
 <h2>Grouped and Stacked</h2>
 
 <Preview data={groupedStackedData}>
   <div class="h-[300px] p-4 border rounded">
     <Chart
       data={groupedStackedData}
-      flatData={longData}
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
       y="values"
-      yDomain={extent(groupedStackedData.flatMap((d) => d.values))}
       yNice={4}
-      r={(d) => d}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      x1="basket"
+      x1Scale={scaleBand().padding(0.1)}
+      x1Domain={[1, 2]}
+      x1Range={({ xScale }) => [0, xScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
-        <Bars groupBy="basket" radius={4} strokeWidth={1} />
+        <Bars radius={4} strokeWidth={1} />
+        <Highlight area />
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
+
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -873,39 +1013,36 @@
 
 <Preview data={transitionData}>
   <div class="h-[300px] p-4 border rounded">
-    <!-- Always use stackedData for extents for consistent scale -->
     <Chart
       data={transitionData}
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
       y="values"
-      yDomain={extent(stackedData.flatMap((d) => d.values))}
       yNice={4}
-      r={(d) => {
-        // Color by fruit (last key)
-        return d.keys.at(-1);
-      }}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      x1={transitionChart.groupBy}
+      x1Scale={scaleBand().padding(0.1)}
+      x1Domain={transitionChart.groupBy
+        ? unique(transitionData.map((d) => d[transitionChart.groupBy]))
+        : undefined}
+      x1Range={({ xScale }) => [0, xScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
+      tooltip={{ mode: 'band' }}
       let:data
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <g>
           <!-- TODO: 'data' can be used once type issue is resolved -->
-          {#each transitionData as bar (bar.keys
-            .filter((key) => typeof key !== 'number')
-            .join('-'))}
+          {#each transitionData as bar (bar.year + '-' + bar.fruit)}
             <Bar
               {bar}
-              groupBy={transitionChart.groupBy}
-              groupPaddingInner={0.2}
-              groupPaddingOuter={0}
-              fill={rScale(bar.keys.at(-1))}
+              fill={cScale(bar.fruit)}
               radius={4}
               strokeWidth={1}
               tweened={{
@@ -917,45 +1054,38 @@
             />
           {/each}
         </g>
+        <Highlight area />
       </Svg>
-    </Chart>
-  </div>
-</Preview>
 
-<h2>Click handler</h2>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          {#each data.data as d}
+            <Tooltip.Item
+              label={d.fruit}
+              value={d.value}
+              color={cScale(d.fruit)}
+              format="integer"
+              valueAlign="right"
+            />
+          {/each}
 
-<Preview {data}>
-  <div class="h-[300px] p-4 border rounded">
-    <Chart
-      {data}
-      x="date"
-      xScale={scaleBand().padding(0.4)}
-      y="value"
-      yDomain={[0, null]}
-      yNice={4}
-      padding={{ left: 16, bottom: 24 }}
-      tooltip={{
-        mode: 'band',
-        onClick({ data }) {
-          alert('You clicked on:\n' + JSON.stringify(data, null, 2));
-        },
-      }}
-    >
-      <Svg>
-        <Axis placement="left" grid rule />
-        <Axis
-          placement="bottom"
-          format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
-          rule
-        />
-        <Bars radius={4} strokeWidth={1} class="fill-primary" />
-        <Highlight area />
-      </Svg>
+          <Tooltip.Separator />
+
+          <!-- TODO: Remove [...] type hack to make svelte-check happy -->
+          <Tooltip.Item
+            label="total"
+            value={sum([...data.data], (d) => d.value)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
-<h2>Click handlers for stack/grouped bars</h2>
+<h2>Tooltip and click handlers for individual stack/grouped bar</h2>
 
 <div class="grid grid-cols-[1fr,1fr] gap-2 mb-2">
   <Field label="Mode">
@@ -969,39 +1099,36 @@
 
 <Preview data={transitionData}>
   <div class="h-[300px] p-4 border rounded">
-    <!-- Always use stackedData for extents for consistent scale -->
     <Chart
       data={transitionData}
       x="year"
       xScale={scaleBand().paddingInner(0.4).paddingOuter(0.1)}
       y="values"
-      yDomain={extent(stackedData.flatMap((d) => d.values))}
       yNice={4}
-      r={(d) => {
-        // Color by fruit (last key)
-        return d.keys.at(-1);
-      }}
-      rScale={scaleOrdinal()}
-      rDomain={colorKeys}
-      rRange={keyColors}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={colorKeys}
+      cRange={keyColors}
+      x1={transitionChart.groupBy}
+      x1Scale={scaleBand().padding(0.1)}
+      x1Domain={transitionChart.groupBy
+        ? unique(transitionData.map((d) => d[transitionChart.groupBy]))
+        : undefined}
+      x1Range={({ xScale }) => [0, xScale.bandwidth?.()]}
       padding={{ left: 16, bottom: 24 }}
       let:data
-      let:rScale
+      let:cScale
+      let:tooltip
     >
       <Svg>
         <Axis placement="left" grid rule />
         <Axis placement="bottom" rule />
         <g>
           <!-- TODO: 'data' can be used once type issue is resolved -->
-          {#each transitionData as bar (bar.keys
-            .filter((key) => typeof key !== 'number')
-            .join('-'))}
+          {#each transitionData as bar (bar.year + '-' + bar.fruit)}
             <Bar
               {bar}
-              groupBy={transitionChart.groupBy}
-              groupPaddingInner={0.2}
-              groupPaddingOuter={0}
-              fill={rScale(bar.keys.at(-1))}
+              fill={cScale(bar.fruit)}
               radius={4}
               strokeWidth={1}
               tweened={{
@@ -1014,10 +1141,59 @@
               on:click={(e) => {
                 alert('You clicked on:\n' + JSON.stringify(bar, null, 2));
               }}
+              on:pointerenter={(e) => tooltip?.show(e, bar)}
+              on:pointermove={(e) => tooltip?.show(e, bar)}
+              on:pointerleave={(e) => tooltip?.hide()}
             />
           {/each}
         </g>
       </Svg>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label={data.fruit}
+            value={data.value}
+            color={cScale(data.fruit)}
+            format="integer"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
+    </Chart>
+  </div>
+</Preview>
+
+<h2>Click handler</h2>
+
+<Preview {data}>
+  <div class="h-[300px] p-4 border rounded">
+    <Chart
+      {data}
+      x="date"
+      xScale={scaleBand().padding(0.4)}
+      y="value"
+      yDomain={[0, null]}
+      yNice={4}
+      padding={{ left: 16, bottom: 24 }}
+      tooltip={{
+        mode: 'band',
+        onClick({ data }) {
+          alert('You clicked on:\n' + JSON.stringify(data, null, 2));
+        },
+      }}
+    >
+      <Svg>
+        <Axis placement="left" grid rule />
+        <Axis
+          placement="bottom"
+          format={(d) => format(d, PeriodType.Day, { variant: 'short' })}
+          rule
+        />
+        <Bars radius={4} strokeWidth={1} class="fill-primary" />
+        <Highlight area />
+      </Svg>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
index 998be57b1..15407e4ff 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.svelte
@@ -1,19 +1,7 @@
 <script lang="ts">
   import { scaleBand } from 'd3-scale';
-
-  import {
-    Area,
-    Axis,
-    Bars,
-    Chart,
-    Highlight,
-    Spline,
-    Svg,
-    Tooltip,
-    TooltipItem,
-  } from 'layerchart';
-
-  import { formatDate, PeriodType } from 'svelte-ux';
+  import { Area, Axis, Bars, Chart, Highlight, Spline, Svg, Tooltip } from 'layerchart';
+  import { formatDate, PeriodType } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -57,10 +45,15 @@
         <Highlight area />
       </Svg>
 
-      <Tooltip header={(data) => formatDate(data.date, PeriodType.Day)} let:data>
-        <TooltipItem label="baseline" value={data.baseline} />
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>
+          {formatDate(data.date, PeriodType.Day)}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="baseline" value={data.baseline} />
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -106,13 +99,18 @@
         <Highlight area />
       </Svg>
 
-      <Tooltip header={(data) => formatDate(data.date, PeriodType.Day)} let:data>
-        <TooltipItem label="open" value={data.open} format="currency" />
-        <TooltipItem label="close" value={data.close} format="currency" />
-        <TooltipItem label="high" value={data.high} format="currency" />
-        <TooltipItem label="low" value={data.low} format="currency" />
-        <TooltipItem label="volume" value={data.volume} format="integer" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>
+          {formatDate(data.date, PeriodType.Day)}
+        </Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="open" value={data.open} format="currency" />
+          <Tooltip.Item label="close" value={data.close} format="currency" />
+          <Tooltip.Item label="high" value={data.high} format="currency" />
+          <Tooltip.Item label="low" value={data.low} format="currency" />
+          <Tooltip.Item label="volume" value={data.volume} format="integer" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
index 9499a3603..3976beaae 100644
--- a/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Compound/+page.ts
@@ -1,4 +1,4 @@
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 import type { AppleTickerData } from '$static/data/examples/date/apple-ticker.js';
 
 import pageSource from './+page.svelte?raw';
diff --git a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
index 33892c5dd..3936fb807 100644
--- a/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DotPlot/+page.svelte
@@ -1,18 +1,10 @@
 <script lang="ts">
   import { scaleBand, scaleTime } from 'd3-scale';
   import { addMinutes, startOfDay } from 'date-fns';
-  import { Duration, PeriodType, format } from 'svelte-ux';
+  import { Duration } from 'svelte-ux';
+  import { PeriodType, format } from '@layerstack/utils';
 
-  import {
-    Axis,
-    Chart,
-    Highlight,
-    Points,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    TooltipSeparator,
-  } from 'layerchart';
+  import { Axis, Chart, Highlight, Points, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { getRandomInteger } from '$lib/utils/genData.js';
@@ -47,7 +39,6 @@
       xScale={scaleTime()}
       y="name"
       yScale={scaleBand()}
-      yDomain={[...new Set(data.map((d) => d.name))]}
       padding={{ left: 36, bottom: 36 }}
       tooltip={{ mode: 'band' }}
     >
@@ -61,20 +52,23 @@
         <Highlight area />
         <Highlight points lines axis="x" />
       </Svg>
-      <Tooltip header={(data) => data.name} let:data>
-        <TooltipItem
-          label="start"
-          value={format(data.startDate, PeriodType.TimeOnly, { variant: 'short' })}
-        />
-        <TooltipItem
-          label="end"
-          value={format(data.endDate, PeriodType.TimeOnly, { variant: 'short' })}
-        />
-        <TooltipSeparator />
-        <TooltipItem label="duration" valueAlign="right">
-          <Duration start={data.startDate} end={data.endDate} totalUnits={2} />
-        </TooltipItem>
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item
+            label="start"
+            value={format(data.startDate, PeriodType.TimeOnly, { variant: 'short' })}
+          />
+          <Tooltip.Item
+            label="end"
+            value={format(data.endDate, PeriodType.TimeOnly, { variant: 'short' })}
+          />
+          <Tooltip.Separator />
+          <Tooltip.Item label="duration" valueAlign="right">
+            <Duration start={data.startDate} end={data.endDate} totalUnits={2} />
+          </Tooltip.Item>
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte b/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
index 8fe007ee7..33e1f9613 100644
--- a/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/DualAxis/+page.svelte
@@ -1,20 +1,13 @@
 <script lang="ts">
   import { scaleLinear } from 'd3-scale';
-  import { extent, max } from 'd3-array';
 
-  import { Axis, Chart, Highlight, Spline, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Axis, Chart, Highlight, Spline, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
 
   const chartData = data.newPassengerCars;
-
-  // Remap efficiency to its equivalent value in sales - https://observablehq.com/@observablehq/plot-dual-axis
-  const efficiencyScale = scaleLinear(extent(chartData, (d) => d.efficiency) as [number, number], [
-    0,
-    max(chartData, (d) => d.sales),
-  ]);
 </script>
 
 <h1>Examples</h1>
@@ -23,15 +16,20 @@
 
 <Preview data={chartData}>
   <div class="h-[300px] p-4 border rounded">
+    <!-- Remap efficiency to its equivalent value in sales - https://observablehq.com/@observablehq/plot-dual-axis -->
     <Chart
       data={chartData}
       x="year"
       y="sales"
       yDomain={[0, null]}
       yNice
+      y1="efficiency"
+      y1Scale={scaleLinear()}
+      y1Range={({ yScale }) => yScale.domain()}
       padding={{ top: 24, bottom: 24, left: 24, right: 24 }}
       tooltip={{ mode: 'bisect-x' }}
       let:height
+      let:y1Scale
     >
       <Svg>
         <Axis
@@ -44,8 +42,8 @@
         />
         <Axis
           placement="right"
-          scale={scaleLinear(efficiencyScale.domain(), [height, 0])}
-          ticks={efficiencyScale.ticks()}
+          scale={scaleLinear(y1Scale.domain(), [height, 0])}
+          ticks={y1Scale.ticks()}
           rule
           label="efficiency (mpg) ↑"
           labelPlacement="start"
@@ -53,15 +51,18 @@
         />
         <Axis placement="bottom" format="none" rule />
         <Spline class="stroke-2 stroke-primary" />
-        <Spline y={(d) => efficiencyScale(d.efficiency)} class="stroke-2 stroke-secondary" />
+        <Spline y={(d) => y1Scale(d.efficiency)} class="stroke-2 stroke-secondary" />
         <Highlight lines points />
-        <Highlight points={{ class: 'fill-secondary' }} y={(d) => efficiencyScale(d.efficiency)} />
+        <Highlight points={{ class: 'fill-secondary' }} y={(d) => y1Scale(d.efficiency)} />
       </Svg>
 
-      <Tooltip header={(data) => data.year} let:data>
-        <TooltipItem label="sales" value={data.sales} format="currencyRound" />
-        <TooltipItem label="efficiency" value={data.efficiency} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="sales" value={data.sales} format="currencyRound" />
+          <Tooltip.Item label="efficiency" value={data.efficiency} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -115,10 +116,13 @@
         <Highlight lines />
       </Svg>
 
-      <Tooltip header={(data) => data.year} let:data>
-        <TooltipItem label="sales" value={data.sales} format="currencyRound" />
-        <TooltipItem label="efficiency" value={data.efficiency} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.year}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="sales" value={data.sales} format="currencyRound" />
+          <Tooltip.Item label="efficiency" value={data.efficiency} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
index c99111b5f..5f4de7b67 100644
--- a/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EarthquakeGlobe/+page.svelte
@@ -3,18 +3,10 @@
   import { scaleSqrt } from 'd3-scale';
   import { feature } from 'topojson-client';
 
-  import { Button, ButtonGroup, Field, RangeField, timerStore } from 'svelte-ux';
-
-  import {
-    Chart,
-    GeoCircle,
-    GeoPath,
-    Graticule,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    TransformContext,
-  } from 'layerchart';
+  import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
+  import { timerStore } from '@layerstack/svelte-stores';
+
+  import { Chart, GeoCircle, GeoPath, Graticule, Svg, Tooltip, TransformContext } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -123,11 +115,14 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(d) => d.place} let:data>
-        <TooltipItem label="Latitude" value={data.latitude} format="decimal" />
-        <TooltipItem label="Longitude" value={data.longitude} format="decimal" />
-        <TooltipItem label="Magnitude" value={data.magnitude} format="decimal" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.place}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
+          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
+          <Tooltip.Item label="Magnitude" value={data.magnitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
index 58a966090..e742ef545 100644
--- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.svelte
@@ -7,16 +7,10 @@
 
   import { Chart, GeoPath, Graticule, Legend, Svg, Tooltip, TransformContext } from 'layerchart';
 
-  import {
-    Button,
-    ButtonGroup,
-    Field,
-    RangeField,
-    format,
-    timerStore,
-    PeriodType,
-    cls,
-  } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
+  import { format, PeriodType } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -128,7 +122,9 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(d) => format(d.Date, PeriodType.Day, { variant: 'long' })} />
+      <Tooltip.Root let:data>
+        {format(data.Date, PeriodType.Day, { variant: 'long' })}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
index debc9a49d..b7f81d1f3 100644
--- a/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/EclipsesGlobe/+page.ts
@@ -1,6 +1,6 @@
 import type { GeometryCollection, Topology } from 'topojson-specification';
 import pageSource from './+page.svelte?raw';
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 
 export async function load({ fetch }) {
   return {
diff --git a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
index 3a2c88e68..b488e5ad9 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceDisjointGraph/+page.svelte
@@ -4,7 +4,7 @@
   import { scaleOrdinal } from 'd3-scale';
   import { schemeCategory10 } from 'd3-scale-chromatic';
 
-  import { Chart, Circle, ForceSimulation, Group, Link, Svg } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -26,7 +26,7 @@
 <Preview data={data.miserables}>
   <div class="h-[680px] p-4 border rounded">
     <Chart data={nodes}>
-      <Svg>
+      <Svg center>
         <ForceSimulation
           forces={{
             link: linkForce,
@@ -36,17 +36,15 @@
           }}
           let:nodes
         >
-          <Group center>
-            {#key nodes}
-              {#each links as link}
-                <Link data={link} class="stroke-surface-content/50" curve={curveLinear} />
-              {/each}
-            {/key}
-
-            {#each nodes as node}
-              <Circle cx={node.x} cy={node.y} r={3} fill={colorScale(node.group)} />
+          {#key nodes}
+            {#each links as link}
+              <Link data={link} class="stroke-surface-content/50" curve={curveLinear} />
             {/each}
-          </Group>
+          {/key}
+
+          {#each nodes as node}
+            <Circle cx={node.x} cy={node.y} r={3} fill={colorScale(node.group)} />
+          {/each}
         </ForceSimulation>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
index e71a76cdd..8018f16d5 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceGraph/+page.svelte
@@ -290,7 +290,9 @@
         </ForceSimulation>
       </Svg>
 
-      <Tooltip header={(d) => d.id} />
+      <Tooltip.Root let:data>
+        {data.id}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
index c89e68727..5bf98a343 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceLattice/+page.svelte
@@ -2,7 +2,7 @@
   import { forceManyBody, forceLink } from 'd3-force';
   import { curveLinear } from 'd3-shape';
 
-  import { Chart, Circle, ForceSimulation, Group, Link, Svg } from 'layerchart';
+  import { Chart, Circle, ForceSimulation, Link, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -25,7 +25,7 @@
 <Preview data={nodes}>
   <div class="h-[800px] p-4 border rounded overflow-hidden">
     <Chart data={nodes}>
-      <Svg>
+      <Svg center>
         <ForceSimulation
           forces={{
             charge: chargeForce,
@@ -33,17 +33,15 @@
           }}
           let:nodes
         >
-          <Group center>
-            {#key nodes}
-              {#each links as link}
-                <Link data={link} class="stroke-surface-content/20" curve={curveLinear} />
-              {/each}
-            {/key}
-
-            {#each nodes as node}
-              <Circle cx={node.x} cy={node.y} r={3} class="fill-surface-content" />
+          {#key nodes}
+            {#each links as link}
+              <Link data={link} class="stroke-surface-content/20" curve={curveLinear} />
             {/each}
-          </Group>
+          {/key}
+
+          {#each nodes as node}
+            <Circle cx={node.x} cy={node.y} r={3} class="fill-surface-content" />
+          {/each}
         </ForceSimulation>
       </Svg>
     </Chart>
diff --git a/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
new file mode 100644
index 000000000..80495ca98
--- /dev/null
+++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+  import { forceX, forceY, forceManyBody, forceCollide } from 'd3-force';
+
+  import { Canvas, Chart, Circle, ForceSimulation, Points, Svg } from 'layerchart';
+  import { Field, RangeField, Switch, TextField } from 'svelte-ux';
+
+  import Preview from '$lib/docs/Preview.svelte';
+
+  import type { ChartResizeEvent } from 'layerchart/components/ChartContext.svelte';
+  import { rasterizeText, type RasterizeTextOptions } from 'layerchart/utils/string.js';
+
+  let width = 960;
+  let height = 500;
+  let radius = 2;
+  const collisionStrength = 0.01;
+
+  let hasCollideForce = false; // TODO: Determine why unable to remove if enabled true by default
+  let hasChargeForce = false;
+  let transition = false;
+
+  function onResize(e: ChartResizeEvent) {
+    width = e.detail.width;
+    height = e.detail.height;
+  }
+
+  let mouseNode = {
+    x: 0,
+    y: height / 2,
+    xTarget: width,
+    yTarget: height / 2,
+    rTarget: 100,
+  };
+
+  let text = 'LayerChart';
+  let fontSize = 150;
+  let spacing = 10;
+  $: textOptions = {
+    fontSize: fontSize + 'px',
+    spacing,
+    width,
+    height,
+  } satisfies RasterizeTextOptions;
+
+  $: pixels = rasterizeText(text, textOptions).map(function (d) {
+    return {
+      x: transition ? d[0] : Math.random() * width,
+      y: transition ? d[1] : Math.random() * height,
+      xTarget: d[0],
+      yTarget: d[1],
+      rTarget: radius,
+    };
+  });
+  $: data = [mouseNode, ...pixels];
+
+  const xForce = forceX<(typeof pixels)[number]>((d) => d.xTarget).strength(collisionStrength);
+  const yForce = forceY<(typeof pixels)[number]>((d) => d.yTarget).strength(collisionStrength);
+  const collideForce = forceCollide<(typeof pixels)[number]>()
+    .radius((d) => d.rTarget)
+    .iterations(3);
+  const manyBodyForce = forceManyBody();
+</script>
+
+<h1>Examples</h1>
+
+<div class="grid grid-flow-col gap-2 mb-1">
+  <TextField label="Text" bind:value={text} />
+  <RangeField label="Font size (px)" bind:value={fontSize} max={600} />
+  <RangeField label="Spacing" bind:value={spacing} />
+  <RangeField label="Radius" bind:value={radius} min={1} max={spacing * 2} />
+</div>
+<div class="flex gap-2 mb-2">
+  <Field label="Collide Force" let:id>
+    <Switch bind:checked={hasCollideForce} {id} size="md" />
+  </Field>
+  <Field label="Charge Force" let:id>
+    <Switch bind:checked={hasChargeForce} {id} size="md" />
+  </Field>
+  <!-- <Field label="Transition" let:id>
+    <Switch bind:checked={transition} {id} size="md" />
+  </Field> -->
+</div>
+
+<Preview {data}>
+  <div class="h-[500px] p-4 border rounded overflow-hidden">
+    <Chart
+      x="x"
+      xDomain={[0, 1]}
+      xRange={[0, 1]}
+      y="y"
+      yDomain={[0, 1]}
+      yRange={[0, 1]}
+      {data}
+      let:width
+      let:height
+      on:resize={onResize}
+    >
+      <ForceSimulation
+        forces={{
+          x: xForce,
+          y: yForce,
+          ...(hasCollideForce && {
+            collide: collideForce,
+          }),
+          ...(hasChargeForce && {
+            charge: manyBodyForce.strength((d, i) => (i ? 0 : (-width * 2) / 10)),
+          }),
+        }}
+        alphaTarget={1}
+        velocityDecay={0.2}
+        let:nodes
+      >
+        <Canvas>
+          <Points data={nodes.slice(1)} r={radius} class="fill-primary" />
+        </Canvas>
+
+        <Svg>
+          <!-- {#each nodes.slice(1) as node, i (i)}
+            <Circle
+              cx={node.x}
+              cy={node.y}
+              r={node.rTarget}
+              class="fill-primary"
+              spring={transition}
+            />
+          {/each} -->
+
+          <rect
+            {width}
+            {height}
+            on:pointermove={(e) => {
+              mouseNode.xTarget = e.offsetX;
+              mouseNode.yTarget = e.offsetY;
+            }}
+            class="fill-transparent"
+          />
+        </Svg>
+      </ForceSimulation>
+    </Chart>
+  </div>
+</Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/AreaStack/+page.ts b/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
similarity index 61%
rename from packages/layerchart/src/routes/docs/examples/AreaStack/+page.ts
rename to packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
index 48dcda64e..cdeabe134 100644
--- a/packages/layerchart/src/routes/docs/examples/AreaStack/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/ForceText/+page.ts
@@ -4,6 +4,7 @@ export async function load() {
   return {
     meta: {
       pageSource,
+      related: ['https://d3og.com/armollica/06a202c9f7df191ace8a1f97e33ffb97/'],
     },
   };
 }
diff --git a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
index 3c9e99cd0..acb6e8fa2 100644
--- a/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ForceTree/+page.svelte
@@ -2,17 +2,8 @@
   import { hierarchy } from 'd3-hierarchy';
   import { forceX, forceY, forceManyBody, forceLink } from 'd3-force';
 
-  import {
-    Chart,
-    Circle,
-    ForceSimulation,
-    Group,
-    Link,
-    Svg,
-    Tooltip,
-    TooltipItem,
-  } from 'layerchart';
-  import { cls } from 'svelte-ux';
+  import { Chart, Circle, ForceSimulation, Link, Svg, Tooltip } from 'layerchart';
+  import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -33,7 +24,7 @@
 <Preview data={nodes}>
   <div class="h-[600px] p-4 border rounded">
     <Chart data={nodes} let:tooltip>
-      <Svg>
+      <Svg center>
         <ForceSimulation
           forces={{
             link: linkForce,
@@ -43,37 +34,38 @@
           }}
           let:nodes
         >
-          <Group center>
-            {#key nodes}
-              {#each links as link}
-                <Link data={link} class="stroke-surface-content/20" />
-              {/each}
-            {/key}
-
-            {#each nodes as node}
-              <Circle
-                cx={node.x}
-                cy={node.y}
-                r={3}
-                class={cls(
-                  node.children ? 'fill-surface-100 stroke-surface-content' : 'fill-surface-content'
-                )}
-                on:pointermove={(e) => tooltip.show(e, node)}
-                on:pointerleave={tooltip.hide}
-              />
+          {#key nodes}
+            {#each links as link}
+              <Link data={link} class="stroke-surface-content/20" />
             {/each}
-          </Group>
+          {/key}
+
+          {#each nodes as node}
+            <Circle
+              cx={node.x}
+              cy={node.y}
+              r={3}
+              class={cls(
+                node.children ? 'fill-surface-100 stroke-surface-content' : 'fill-surface-content'
+              )}
+              on:pointermove={(e) => tooltip.show(e, node)}
+              on:pointerleave={tooltip.hide}
+            />
+          {/each}
         </ForceSimulation>
       </Svg>
 
-      <Tooltip header={(d) => d.data.name} let:data>
-        {#if data.data.children}
-          <TooltipItem label="children" value={data.data.children.length} />
-        {/if}
-        {#if data.data.value}
-          <TooltipItem label="value" value={data.data.value} format="integer" />
-        {/if}
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.data.name}</Tooltip.Header>
+        <Tooltip.List>
+          {#if data.data.children}
+            <Tooltip.Item label="children" value={data.data.children.length} />
+          {/if}
+          {#if data.data.value}
+            <Tooltip.Item label="value" value={data.data.value} format="integer" />
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
index 36469c810..210db93d7 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPath/+page.svelte
@@ -2,7 +2,7 @@
   import { geoAlbersUsa } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, Chart, GeoPath, HitCanvas, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Canvas, Chart, GeoPath, HitCanvas, Svg, Tooltip } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -38,11 +38,15 @@
           class="fill-none stroke-surface-content/20 pointer-events-none"
         />
       </Svg>
-      <Tooltip header={(data) => data.properties.name} let:data>
+
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -94,11 +98,14 @@
         />
       </HitCanvas>
 
-      <Tooltip header={(data) => data.properties.name} let:data>
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
index 00b9fd2ec..460978a99 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoPoint/+page.svelte
@@ -3,7 +3,7 @@
   import { feature } from 'topojson-client';
   import { Field, Switch } from 'svelte-ux';
 
-  import { Canvas, Chart, GeoPath, GeoPoint, Svg, Text, Tooltip, TooltipItem } from 'layerchart';
+  import { Canvas, Chart, GeoPath, GeoPoint, Svg, Text, Tooltip } from 'layerchart';
   import Preview from '$lib/docs/Preview.svelte';
 
   export let data;
@@ -112,11 +112,13 @@
         </g>
       </Svg>
 
-      <!-- <Tooltip header={(d) => d.label} let:data>
-        {console.log({ data })}
-        <TooltipItem label="Latitude" value={data.latitude} format="decimal" />
-        <TooltipItem label="Longitude" value={data.longitude} format="decimal" />
-      </Tooltip> -->
+      <!-- <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
+          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root> -->
     </Chart>
   </div>
 </Preview>
@@ -173,10 +175,13 @@
         </g>
       </Svg>
 
-      <Tooltip header={(d) => d.name} let:data>
-        <TooltipItem label="Latitude" value={data.latitude} format="decimal" />
-        <TooltipItem label="Longitude" value={data.longitude} format="decimal" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
+          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -229,10 +234,13 @@
         </g>
       </Svg>
 
-      <Tooltip header={(d) => d.name} let:data>
-        <TooltipItem label="Latitude" value={data.latitude} format="decimal" />
-        <TooltipItem label="Longitude" value={data.longitude} format="decimal" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
+          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
index 7fc74608b..67d2331ff 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoProjection/+page.svelte
@@ -95,7 +95,10 @@
           />
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name} let:data />
+
+      <Tooltip.Root let:data>
+        {data.properties.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
index 9d7b548f9..bd0956f91 100644
--- a/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/GeoTile/+page.svelte
@@ -3,7 +3,7 @@
   import { geoMercator } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Canvas, ClipPath, Chart, GeoPath, GeoTile, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Canvas, ClipPath, Chart, GeoPath, GeoTile, Svg, Tooltip } from 'layerchart';
   import { Field, RangeField, Switch } from 'svelte-ux';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -61,11 +61,15 @@
           />
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name} let:data>
+
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -97,11 +101,15 @@
           />
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name} let:data>
+
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
index fd9d83f60..b67962c43 100644
--- a/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Histogram/+page.svelte
@@ -12,18 +12,9 @@
   import { timeDays, timeMonths, timeWeeks } from 'd3-time';
   import { subDays } from 'date-fns';
 
-  import {
-    Axis,
-    Bars,
-    Chart,
-    Highlight,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    TooltipSeparator,
-    thresholdTime,
-  } from 'layerchart';
-  import { MenuField, RangeField, NumberStepper, format, PeriodType, State } from 'svelte-ux';
+  import { Axis, Bars, Chart, Highlight, Svg, Tooltip, thresholdTime } from 'layerchart';
+  import { MenuField, RangeField, NumberStepper, State } from 'svelte-ux';
+  import { format, PeriodType } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -80,17 +71,20 @@
         <Bars radius={4} strokeWidth={1} class="fill-primary" tweened />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 1)} let:data>
-        <TooltipItem label="count" value={data.length} format="integer" />
-        <TooltipSeparator />
-        {#each data.slice(0, 5) as d}
-          <TooltipItem label={d.name} value={d.weight} />
-        {/each}
-        {#if data.length > 5}
-          <span />
-          <span>...</span>
-        {/if}
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header class="text-center">{data.x0 + ' - ' + (data.x1 - 1)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="count" value={data.length} format="integer" />
+          <Tooltip.Separator />
+          {#each data.slice(0, 5) as d}
+            <Tooltip.Item label={d.name} value={d.weight} />
+          {/each}
+          {#if data.length > 5}
+            <span />
+            <span>...</span>
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -115,17 +109,20 @@
         <Bars radius={4} strokeWidth={1} class="fill-primary" tweened />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 1)} let:data>
-        <TooltipItem label="count" value={data.length} format="integer" />
-        <TooltipSeparator />
-        {#each data.slice(0, 5) as d}
-          <TooltipItem label={d.name} value={d.weight} />
-        {/each}
-        {#if data.length > 5}
-          <span />
-          <span>...</span>
-        {/if}
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header class="text-center">{data.x0 + ' - ' + (data.x1 - 1)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="count" value={data.length} format="integer" />
+          <Tooltip.Separator />
+          {#each data.slice(0, 5) as d}
+            <Tooltip.Item label={d.name} value={d.weight} />
+          {/each}
+          {#if data.length > 5}
+            <span />
+            <span>...</span>
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -207,17 +204,20 @@
         <Bars radius={4} strokeWidth={1} tweened class="fill-primary" />
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => data.x0 + ' - ' + (data.x1 - 0.01)} let:data>
-        <TooltipItem label="count" value={data.length} format="integer" />
-        <TooltipSeparator />
-        {#each data.slice(0, 5) as d}
-          <TooltipItem label="value" value={d} />
-        {/each}
-        {#if data.length > 5}
-          <span />
-          <span>...</span>
-        {/if}
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header class="text-center">{data.x0 + ' - ' + (data.x1 - 0.01)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="count" value={data.length} format="integer" />
+          <Tooltip.Separator />
+          {#each data.slice(0, 5) as d}
+            <Tooltip.Item label="value" value={d} />
+          {/each}
+          {#if data.length > 5}
+            <span />
+            <span>...</span>
+          {/if}
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -262,25 +262,28 @@
           <Bars radius={4} strokeWidth={1} class="fill-primary" tweened />
           <Highlight area />
         </Svg>
-        <Tooltip
-          header={(data) =>
-            format(data.x0, PeriodType.Day) + ' - ' + format(data.x1, PeriodType.Day)}
-          let:data
-        >
-          <TooltipItem label="count" value={data.length} format="integer" />
-          <TooltipSeparator />
-          {#each data.slice(0, 5) as d}
-            <TooltipItem
-              label="value"
-              value={d}
-              format={(value) => format(value, PeriodType.DayTime)}
-            />
-          {/each}
-          {#if data.length > 5}
-            <span />
-            <span>...</span>
-          {/if}
-        </Tooltip>
+        <Tooltip.Root let:data>
+          <Tooltip.Header class="text-center">
+            {format(data.x0, PeriodType.Day) +
+              ' - ' +
+              format(data.x1, PeriodType.Day)}</Tooltip.Header
+          >
+          <Tooltip.List>
+            <Tooltip.Item label="count" value={data.length} format="integer" />
+            <Tooltip.Separator />
+            {#each data.slice(0, 5) as d}
+              <Tooltip.Item
+                label="value"
+                value={d}
+                format={(value) => format(value, PeriodType.DayTime)}
+              />
+            {/each}
+            {#if data.length > 5}
+              <span />
+              <span>...</span>
+            {/if}
+          </Tooltip.List>
+        </Tooltip.Root>
       </Chart>
     </div>
   </Preview>
@@ -339,25 +342,28 @@
           <Bars radius={4} strokeWidth={1} class="fill-primary" tweened />
           <Highlight area />
         </Svg>
-        <Tooltip
-          header={(data) =>
-            format(data.x0, PeriodType.Day) + ' - ' + format(new Date(data.x1 - 1), PeriodType.Day)}
-          let:data
-        >
-          <TooltipItem label="count" value={data.length} format="integer" />
-          <TooltipSeparator />
-          {#each data.slice(0, 5) as d}
-            <TooltipItem
-              label="value"
-              value={d}
-              format={(value) => format(value, PeriodType.DayTime)}
-            />
-          {/each}
-          {#if data.length > 5}
-            <span />
-            <span>...</span>
-          {/if}
-        </Tooltip>
+        <Tooltip.Root let:data>
+          <Tooltip.Header class="text-center"
+            >{format(data.x0, PeriodType.Day) +
+              ' - ' +
+              format(new Date(data.x1 - 1), PeriodType.Day)}</Tooltip.Header
+          >
+          <Tooltip.Item label="count" value={data.length} format="integer" />
+          <Tooltip.List>
+            <Tooltip.Separator />
+            {#each data.slice(0, 5) as d}
+              <Tooltip.Item
+                label="value"
+                value={d}
+                format={(value) => format(value, PeriodType.DayTime)}
+              />
+            {/each}
+            {#if data.length > 5}
+              <span />
+              <span>...</span>
+            {/if}
+          </Tooltip.List>
+        </Tooltip.Root>
       </Chart>
     </div>
   </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
index 7a6136e88..47a6985bb 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.svelte
@@ -3,7 +3,7 @@
   import { extent, flatGroup, ticks } from 'd3-array';
   import { interpolateTurbo } from 'd3-scale-chromatic';
   import { format } from 'date-fns';
-  import { formatDate, PeriodType } from 'svelte-ux/utils/date';
+  import { formatDate, PeriodType } from '@layerstack/utils';
 
   import {
     Axis,
@@ -16,7 +16,6 @@
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
     pivotLonger,
   } from 'layerchart';
 
@@ -104,9 +103,13 @@
         <Spline class="stroke-2 stroke-primary" />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -226,13 +229,13 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24, right: 48 }}
       tooltip={{ mode: 'voronoi' }}
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -242,7 +245,7 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color = rScale(fruit)}
+          {@const color = cScale(fruit)}
           <Spline {data} class="stroke-2" stroke={color}>
             <svelte:fragment slot="end">
               <circle r={4} fill={color} />
@@ -259,9 +262,13 @@
         {/each}
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -280,7 +287,7 @@
       y="y"
       yDomain={[0, null]}
       yNice
-      padding={{ left: 16, bottom: 24, right: 48 }}
+      padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'bisect-x' }}
     >
       <Svg>
@@ -296,10 +303,13 @@
         <Highlight y={(d) => d.y1} points={{ fill: fruitColors.oranges }} />
         <Highlight lines />
       </Svg>
-      <Tooltip let:data>
-        <TooltipItem label="bananas" value={data.y} />
-        <TooltipItem label="oranges" value={data.y1} />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.List>
+          <Tooltip.Item label="bananas" value={data.y} />
+          <Tooltip.Item label="oranges" value={data.y1} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -315,14 +325,14 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24, right: 48 }}
       tooltip={{ mode: 'voronoi' }}
       let:tooltip
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -334,7 +344,7 @@
         {#each dataByFruit as [fruit, data]}
           {@const color =
             tooltip.data == null || tooltip.data.fruit === fruit
-              ? rScale(fruit)
+              ? cScale(fruit)
               : 'hsl(var(--color-surface-content) / 20%)'}
           <Spline {data} class="stroke-2" stroke={color}>
             <svelte:fragment slot="end">
@@ -352,9 +362,12 @@
         {/each}
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -370,13 +383,13 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="fruit"
-      rScale={scaleOrdinal()}
-      rDomain={Object.keys(fruitColors)}
-      rRange={Object.values(fruitColors)}
+      c="fruit"
+      cScale={scaleOrdinal()}
+      cDomain={Object.keys(fruitColors)}
+      cRange={Object.values(fruitColors)}
       padding={{ left: 16, bottom: 24 }}
       tooltip={{ mode: 'voronoi' }}
-      let:rScale
+      let:cScale
     >
       <Svg>
         <Axis placement="left" grid rule />
@@ -386,15 +399,18 @@
           rule
         />
         {#each dataByFruit as [fruit, data]}
-          {@const color = rScale(fruit)}
+          {@const color = cScale(fruit)}
           <Spline {data} class="stroke-2" stroke={color} />
         {/each}
         <Labels format="integer" />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label={data.fruit} value={data.value} />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label={data.fruit} value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Line/+page.ts b/packages/layerchart/src/routes/docs/examples/Line/+page.ts
index 5805f073b..f2cb67afe 100644
--- a/packages/layerchart/src/routes/docs/examples/Line/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Line/+page.ts
@@ -1,4 +1,4 @@
-import { parse } from 'svelte-ux';
+import { parse } from '@layerstack/utils';
 
 import pageSource from './+page.svelte?raw';
 
diff --git a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
index 8ed65a7de..a686b0e2b 100644
--- a/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Pack/+page.svelte
@@ -8,16 +8,8 @@
   import { hsl } from 'd3-color';
 
   import { Chart, Circle, Group, Pack, Svg, TransformContext, findAncestor } from 'layerchart';
-  import {
-    Breadcrumb,
-    Button,
-    Field,
-    RangeField,
-    ToggleGroup,
-    ToggleOption,
-    format,
-    sortFunc,
-  } from 'svelte-ux';
+  import { Breadcrumb, Button, Field, RangeField, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { format, sortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
diff --git a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
index 7b3f426d8..84b68314e 100644
--- a/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Partition/+page.svelte
@@ -28,10 +28,9 @@
     Switch,
     ToggleGroup,
     ToggleOption,
-    cls,
-    format,
-    sortFunc,
   } from 'svelte-ux';
+  import { format, sortFunc } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
 
diff --git a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
index 0e14265fa..47696ef01 100644
--- a/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/PunchCard/+page.svelte
@@ -3,8 +3,8 @@
   import { max, range } from 'd3-array';
   import { getDay, getWeek } from 'date-fns';
 
-  import { Axis, Chart, Circle, Highlight, Points, Svg, Tooltip, TooltipItem } from 'layerchart';
-  import { formatDate, PeriodType } from 'svelte-ux';
+  import { Axis, Chart, Circle, Highlight, Points, Svg, Tooltip } from 'layerchart';
+  import { formatDate, PeriodType } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -59,9 +59,12 @@
         <Highlight area axis="x" />
         <Highlight area axis="y" />
       </Svg>
-      <Tooltip header={(d) => formatDate(d.date, PeriodType.Day)} let:data>
-        <TooltipItem label="duration" value={data.value} valueAlign="right" />
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{formatDate(data.date, PeriodType.Day)}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="duration" value={data.value} valueAlign="right" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
index b88c1207e..8d20134aa 100644
--- a/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/RadialLine/+page.svelte
@@ -2,9 +2,10 @@
   import { scaleBand, scaleUtc } from 'd3-scale';
   import { flatGroup } from 'd3-array';
   import { curveLinearClosed, curveCatmullRomClosed, curveCatmullRom } from 'd3-shape';
-  import { Field, PeriodType, ToggleGroup, ToggleOption, cls } from 'svelte-ux';
+  import { Field, PeriodType, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
-  import { Area, Axis, Chart, Group, Points, Spline, Svg } from 'layerchart';
+  import { Area, Axis, Chart, Points, Spline, Svg } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -38,25 +39,23 @@
       data={pitchData}
       x="name"
       xScale={scaleBand()}
-      xDomain={pitchData.map((d) => d.name)}
       xRange={[0, 2 * Math.PI]}
       y="value"
       yRange={({ height }) => [0, height / 2]}
       yPadding={[0, 10]}
       padding={{ top: 32, bottom: 8 }}
+      radial
     >
-      <Svg>
-        <Group center>
-          <Axis
-            placement="radius"
-            grid={{ class: 'stroke-surface-content/20 fill-surface-200/50' }}
-            ticks={[0, 5, 10]}
-            format={(d) => ''}
-          />
-          <Axis placement="angle" grid={{ class: 'stroke-surface-content/20' }} />
-          <Spline radial {curve} class="stroke-primary fill-primary/20" />
-          <Points radial class="fill-primary stroke-surface-200" />
-        </Group>
+      <Svg center>
+        <Axis
+          placement="radius"
+          grid={{ class: 'stroke-surface-content/20 fill-surface-200/50' }}
+          ticks={[0, 5, 10]}
+          format={(d) => ''}
+        />
+        <Axis placement="angle" grid={{ class: 'stroke-surface-content/20' }} />
+        <Spline {curve} class="stroke-primary fill-primary/20" />
+        <Points class="fill-primary stroke-surface-200" />
       </Svg>
     </Chart>
   </div>
@@ -73,27 +72,24 @@
       xRange={[0, 2 * Math.PI]}
       y={['minmin', 'maxmax']}
       yRange={({ height }) => [height / 5, height / 2]}
+      radial
     >
-      <Svg>
-        <Group center>
-          <Spline y={(d) => d.avg} radial curve={curveCatmullRom} class="stroke-primary" />
-          <Area
-            radial
-            y0={(d) => d.min}
-            y1={(d) => d.max}
-            curve={curveCatmullRomClosed}
-            class="fill-primary/20"
-          />
-          <Area
-            radial
-            y0={(d) => d.minmin}
-            y1={(d) => d.maxmax}
-            curve={curveCatmullRomClosed}
-            class="fill-primary/20"
-          />
-          <Axis placement="angle" grid format={PeriodType.Month} />
-          <Axis placement="radius" rule grid format={(v) => v + '° F'} />
-        </Group>
+      <Svg center>
+        <Spline y={(d) => d.avg} curve={curveCatmullRom} class="stroke-primary" />
+        <Area
+          y0={(d) => d.min}
+          y1={(d) => d.max}
+          curve={curveCatmullRomClosed}
+          class="fill-primary/20"
+        />
+        <Area
+          y0={(d) => d.minmin}
+          y1={(d) => d.maxmax}
+          curve={curveCatmullRomClosed}
+          class="fill-primary/20"
+        />
+        <Axis placement="angle" grid format={PeriodType.Month} />
+        <Axis placement="radius" rule grid format={(v) => v + '° F'} />
       </Svg>
     </Chart>
   </div>
@@ -113,28 +109,26 @@
       yPadding={[0, 20]}
       zDomain={[1940, 2024]}
       zRange={[0.1, 0.2]}
+      radial
       let:zScale
     >
-      <Svg>
-        <Group center>
-          {#each flatGroup(data.dailyTemperatures, (d) => d.year) as [year, yearData]}
-            <Spline
-              data={yearData}
-              radial
-              curve={curveCatmullRom}
-              class={cls(
-                year === 2024
-                  ? 'stroke-primary'
-                  : year === 2023
-                    ? 'stroke-primary/50'
-                    : 'stroke-surface-content'
-              )}
-              opacity={[2023, 2024].includes(year) ? 1 : zScale(year)}
-            />
-          {/each}
-          <Axis placement="angle" grid format={PeriodType.Month} />
-          <Axis placement="radius" grid rule ticks={4} format={(v) => v + '° F'} />
-        </Group>
+      <Svg center>
+        {#each flatGroup(data.dailyTemperatures, (d) => d.year) as [year, yearData]}
+          <Spline
+            data={yearData}
+            curve={curveCatmullRom}
+            class={cls(
+              year === 2024
+                ? 'stroke-primary'
+                : year === 2023
+                  ? 'stroke-primary/50'
+                  : 'stroke-surface-content'
+            )}
+            opacity={[2023, 2024].includes(year) ? 1 : zScale(year)}
+          />
+        {/each}
+        <Axis placement="angle" grid format={PeriodType.Month} />
+        <Axis placement="radius" grid rule ticks={4} format={(v) => v + '° F'} />
       </Svg>
     </Chart>
   </div>
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
index ea725ecf6..633683866 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.svelte
@@ -5,7 +5,9 @@
   import { hierarchy } from 'd3-hierarchy';
   import { interpolateCool } from 'd3-scale-chromatic';
   import { extent } from 'd3-array';
-  import { Icon, cls, sortFunc } from 'svelte-ux';
+  import { Icon } from 'svelte-ux';
+  import { sortFunc } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
   import { mdiArrowRightBold } from '@mdi/js';
 
   import {
@@ -17,8 +19,6 @@
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
-    TooltipSeparator,
     graphFromHierarchy,
     graphFromNode,
   } from 'layerchart';
@@ -26,8 +26,6 @@
   import Preview from '$lib/docs/Preview.svelte';
   import SankeyControls from './SankeyControls.svelte';
 
-  import { simpleData, complexData, greenhouse } from '../_data/graph.js';
-
   export let data;
 
   const colorScale = scaleSequential(interpolateCool);
@@ -76,9 +74,9 @@
 
 <h2>Simple</h2>
 
-<Preview data={simpleData}>
+<Preview data={data.simple}>
   <div class="h-[400px] p-4 border rounded">
-    <Chart data={simpleData}>
+    <Chart data={data.simple}>
       <Svg>
         <Sankey nodeId={(d) => d.id} let:links let:nodes>
           {#each links as link ([link.source.id, link.target.id].join('_'))}
@@ -106,9 +104,9 @@
 
 <h2>Tooltip</h2>
 
-<Preview data={structuredClone(greenhouse)}>
+<Preview data={structuredClone(data.greenhouse)}>
   <div class="h-[800px] p-4 border rounded">
-    <Chart data={structuredClone(greenhouse)} let:tooltip>
+    <Chart data={structuredClone(data.greenhouse)} let:tooltip>
       <Svg>
         <Sankey nodeId={(d) => d.name} nodeWidth={8} let:links let:nodes>
           {#each links as link ([link.source.name, link.target.name].join('_'))}
@@ -146,8 +144,8 @@
         </Sankey>
       </Svg>
 
-      <Tooltip let:data>
-        <div slot="header" let:data>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>
           {#if data.node}
             {data.node.name}
           {:else if data.link}
@@ -155,39 +153,41 @@
             <Icon data={mdiArrowRightBold} class="text-white/50" />
             {data.link.target.name}
           {/if}
-        </div>
-
-        {#if data.node}
-          <TooltipItem label="Total" value={data.node.value} format="decimal" />
-
-          {#if data.node.targetLinks.length}
-            <TooltipSeparator />
-            <div class="col-span-full text-sm">Sources</div>
-            {#each data.node.targetLinks as link}
-              <TooltipItem label={link.source.name} value={link.value} format="decimal" />
-            {/each}
-          {/if}
+        </Tooltip.Header>
 
-          {#if data.node.sourceLinks.length}
-            <TooltipSeparator />
-            <div class="col-span-full text-sm">Targets</div>
-            {#each data.node.sourceLinks as link}
-              <TooltipItem label={link.target.name} value={link.value} format="decimal" />
-            {/each}
+        <Tooltip.List>
+          {#if data.node}
+            <Tooltip.Item label="Total" value={data.node.value} format="decimal" />
+
+            {#if data.node.targetLinks.length}
+              <Tooltip.Separator />
+              <div class="col-span-full text-sm">Sources</div>
+              {#each data.node.targetLinks as link}
+                <Tooltip.Item label={link.source.name} value={link.value} format="decimal" />
+              {/each}
+            {/if}
+
+            {#if data.node.sourceLinks.length}
+              <Tooltip.Separator />
+              <div class="col-span-full text-sm">Targets</div>
+              {#each data.node.sourceLinks as link}
+                <Tooltip.Item label={link.target.name} value={link.value} format="decimal" />
+              {/each}
+            {/if}
+          {:else if data.link}
+            <Tooltip.Item label="Value" value={data.link.value} format="decimal" />
           {/if}
-        {:else if data.link}
-          <TooltipItem label="Value" value={data.link.value} format="decimal" />
-        {/if}
-      </Tooltip>
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
 <h2>Node select</h2>
 
-<Preview data={selectedNode ? graphFromNode(selectedNode) : greenhouse}>
+<Preview data={selectedNode ? graphFromNode(selectedNode) : data.greenhouse}>
   <div class="h-[600px] p-4 border rounded">
-    <Chart data={selectedNode ? graphFromNode(selectedNode) : greenhouse}>
+    <Chart data={selectedNode ? graphFromNode(selectedNode) : data.greenhouse}>
       <Svg>
         <Sankey nodeId={(d) => d.name} nodeWidth={8} let:links let:nodes>
           {#each links as link ([link.source.name, link.target.name].join('_'))}
@@ -237,9 +237,9 @@
 
 <SankeyControls bind:nodeAlign bind:nodeColorBy bind:linkColorBy bind:nodePadding bind:nodeWidth />
 
-<Preview data={complexData}>
+<Preview data={data.complex}>
   <div class="h-[800px] p-4 border rounded">
-    <Chart data={complexData} padding={{ right: 164 }} let:tooltip>
+    <Chart data={data.complex} padding={{ right: 164 }} let:tooltip>
       <Svg>
         <Sankey
           {nodeAlign}
@@ -317,8 +317,8 @@
         </Sankey>
       </Svg>
 
-      <Tooltip let:data>
-        <div slot="header" let:data>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>
           {#if data.node}
             {data.node.name}
           {:else if data.link}
@@ -326,30 +326,32 @@
             <Icon data={mdiArrowRightBold} class="text-white/50" />
             {data.link.target.name}
           {/if}
-        </div>
+        </Tooltip.Header>
 
-        {#if data.node}
-          <TooltipItem label="Total" value={data.node.value} format="decimal" />
-
-          {#if data.node.targetLinks.length}
-            <TooltipSeparator />
-            <div class="col-span-full text-sm">Sources</div>
-            {#each data.node.targetLinks as link}
-              <TooltipItem label={link.source.name} value={link.value} format="decimal" />
-            {/each}
-          {/if}
-
-          {#if data.node.sourceLinks.length}
-            <TooltipSeparator />
-            <div class="col-span-full text-sm">Targets</div>
-            {#each data.node.sourceLinks as link}
-              <TooltipItem label={link.target.name} value={link.value} format="decimal" />
-            {/each}
+        <Tooltip.List>
+          {#if data.node}
+            <Tooltip.Item label="Total" value={data.node.value} format="decimal" />
+
+            {#if data.node.targetLinks.length}
+              <Tooltip.Separator />
+              <div class="col-span-full text-sm">Sources</div>
+              {#each data.node.targetLinks as link}
+                <Tooltip.Item label={link.source.name} value={link.value} format="decimal" />
+              {/each}
+            {/if}
+
+            {#if data.node.sourceLinks.length}
+              <Tooltip.Separator />
+              <div class="col-span-full text-sm">Targets</div>
+              {#each data.node.sourceLinks as link}
+                <Tooltip.Item label={link.target.name} value={link.value} format="decimal" />
+              {/each}
+            {/if}
+          {:else if data.link}
+            <Tooltip.Item label="Value" value={data.link.value} format="decimal" />
           {/if}
-        {:else if data.link}
-          <TooltipItem label="Value" value={data.link.value} format="decimal" />
-        {/if}
-      </Tooltip>
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
index ad5a1908d..406d807ea 100644
--- a/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
+++ b/packages/layerchart/src/routes/docs/examples/Sankey/+page.ts
@@ -2,7 +2,11 @@ import pageSource from './+page.svelte?raw';
 
 export async function load() {
   return {
+    simple: await fetch('/data/examples/graph/simple.json').then((r) => r.json()),
+    complex: await fetch('/data/examples/graph/complex.json').then((r) => r.json()),
+    greenhouse: await fetch('/data/examples/graph/greenhouse.json').then((r) => r.json()),
     flare: await fetch('/data/examples/hierarchy/flare.json').then((r) => r.json()),
+
     meta: {
       pageSource,
       related: ['components/Sankey', 'components/Link'],
diff --git a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
index 15de49826..d78f38caf 100644
--- a/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Scatter/+page.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
   import { scaleTime, scaleThreshold } from 'd3-scale';
   import { format } from 'date-fns';
-  import { formatDate, PeriodType } from 'svelte-ux';
+  import { formatDate, PeriodType } from '@layerstack/utils';
 
-  import { Axis, Chart, Highlight, Labels, Points, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Axis, Chart, Highlight, Labels, Points, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -63,9 +63,13 @@
         <Points class="fill-primary/10 stroke-primary" />
         <Highlight points lines />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -91,7 +95,7 @@
           rule
         />
         <Points class="fill-primary/10 stroke-primary" />
-        <Labels format="integer" verticalAnchor="bottom" offset={10} />
+        <Labels format="integer" offset={10} />
       </Svg>
     </Chart>
   </div>
@@ -110,10 +114,10 @@
       y="value"
       yDomain={[0, null]}
       yNice
-      r="value"
-      rScale={scaleThreshold()}
-      rDomain={[50, 90]}
-      rRange={[
+      c="value"
+      cScale={scaleThreshold()}
+      cDomain={[50, 90]}
+      cRange={[
         'hsl(var(--color-danger))',
         'hsl(var(--color-warning))',
         'hsl(var(--color-success))',
diff --git a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
index 00c896c13..824808eee 100644
--- a/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SketchyGlobe/+page.svelte
@@ -5,7 +5,8 @@
   import { presimplify, simplify } from 'topojson-simplify';
 
   import { Chart, GeoPath, Graticule, Svg, TransformContext } from 'layerchart';
-  import { Button, ButtonGroup, Field, RangeField, timerStore } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import Preview from '$lib/docs/Preview.svelte';
   import CurveMenuField from '$lib/docs/CurveMenuField.svelte';
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
index b380aef38..6466f95f6 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sparkbar/+page.svelte
@@ -2,7 +2,7 @@
   import { scaleBand } from 'd3-scale';
   import { format } from 'date-fns';
 
-  import { Bars, Chart, Highlight, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Bars, Chart, Highlight, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -22,7 +22,7 @@
 <h2>Basic</h2>
 
 <Preview {data}>
-  <div class="w-[125px] h-[18px]">
+  <div class="w-[124px] h-[18px]">
     <Chart {data} x="date" xScale={scaleBand()} y="value" yDomain={[0, null]}>
       <Svg>
         <Bars strokeWidth={1} class="fill-primary/20 stroke-primary" />
@@ -37,7 +37,7 @@
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin
       ullamcorper, leo justo pretium tellus, at gravida ex quam et orci.
-      <span class="w-[125px] h-[18px] inline-block">
+      <span class="w-[124px] h-[18px] inline-block">
         <Chart {data} x="date" xScale={scaleBand()} y="value" yDomain={[0, null]}>
           <Svg>
             <Bars strokeWidth={1} class="fill-primary/20 stroke-primary" />
@@ -52,7 +52,7 @@
 <h2>Basic negative data</h2>
 
 <Preview data={negativeData}>
-  <div class="w-[125px] h-[18px]">
+  <div class="w-[124px] h-[18px]">
     <Chart data={negativeData} x="date" xScale={scaleBand()} y="value">
       <Svg>
         <Bars strokeWidth={1} class="fill-primary/20 stroke-primary" />
@@ -64,7 +64,7 @@
 <h2>With Tooltip and Highlight</h2>
 
 <Preview {data}>
-  <div class="w-[125px] h-[18px]">
+  <div class="w-[124px] h-[18px]">
     <Chart
       {data}
       x="date"
@@ -77,14 +77,13 @@
         <Bars strokeWidth={1} class="fill-primary/20 stroke-primary" />
         <Highlight bar={{ strokeWidth: 1 }} />
       </Svg>
-      <Tooltip
-        class="text-xs"
-        contained={false}
-        header={(data) => format(data.date, 'eee, MMM do')}
-        let:data
-      >
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+
+      <Tooltip.Root contained={false} class="text-xs" let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -92,7 +91,7 @@
 <h2>With Tooltip and Highlight (fixed position)</h2>
 
 <Preview {data}>
-  <div class="w-[125px] h-[18px]">
+  <div class="w-[124px] h-[18px]">
     <Chart
       {data}
       x="date"
@@ -107,12 +106,12 @@
         <Highlight bar={{ strokeWidth: 1 }} />
       </Svg>
 
-      <Tooltip
+      <Tooltip.Root
         class="text-xs"
         contained={false}
+        variant="none"
         y={-10}
         x={containerWidth + 8}
-        variant="none"
         let:data
       >
         <div class="whitespace-nowrap">
@@ -121,7 +120,7 @@
         <div class="font-semibold">
           {data.value}
         </div>
-      </Tooltip>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -132,7 +131,7 @@
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin
       ullamcorper, leo justo pretium tellus, at gravida ex quam et orci.
-      <span class="w-[125px] h-[18px] inline-block">
+      <span class="w-[124px] h-[18px] inline-block">
         <Chart
           {data}
           x="date"
@@ -146,16 +145,19 @@
             <Bars strokeWidth={1} class="fill-primary/20 stroke-primary" />
             <Highlight bar={{ strokeWidth: 1 }} />
           </Svg>
-          <Tooltip
+
+          <Tooltip.Root
             class="text-xs"
             contained={false}
-            header={(data) => format(data.date, 'eee, MMM do')}
             y={containerHeight + 4}
             xOffset={0}
             let:data
           >
-            <TooltipItem label="value" value={data.value} />
-          </Tooltip>
+            <Tooltip.Header>{format(data.date, 'eee, MMM do')}</Tooltip.Header>
+            <Tooltip.List>
+              <Tooltip.Item label="value" value={data.value} />
+            </Tooltip.List>
+          </Tooltip.Root>
         </Chart>
       </span> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis
       nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna.
diff --git a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
index 81c0b5f75..bf25e10be 100644
--- a/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sparkline/+page.svelte
@@ -2,7 +2,7 @@
   import { scaleTime } from 'd3-scale';
   import { format } from 'date-fns';
 
-  import { Chart, Highlight, Spline, Svg, Tooltip, TooltipItem } from 'layerchart';
+  import { Chart, Highlight, Spline, Svg, Tooltip } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
   import { createDateSeries } from '$lib/utils/genData.js';
@@ -15,7 +15,7 @@
 <h2>Basic</h2>
 <Preview {data}>
   <div>
-    <div class="w-[125px] h-[18px]">
+    <div class="w-[124px] h-[18px]">
       <Chart {data} x="date" xScale={scaleTime()} y="value">
         <Svg>
           <Spline class="stroke-1 stroke-primary" />
@@ -31,7 +31,7 @@
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin
       ullamcorper, leo justo pretium tellus, at gravida ex quam et orci.
-      <span class="w-[125px] h-[18px] inline-block">
+      <span class="w-[124px] h-[18px] inline-block">
         <Chart {data} x="date" xScale={scaleTime()} y="value">
           <Svg>
             <Spline class="stroke-1 stroke-primary" />
@@ -45,7 +45,7 @@
 
 <h2>Basic zero axis</h2>
 <Preview {data}>
-  <div class="w-[125px] h-[20px] inline-block">
+  <div class="w-[124px] h-[20px] inline-block">
     <Chart {data} x="date" xScale={scaleTime()} y="value" yDomain={[0, null]}>
       <Svg>
         <Spline class="stroke-1 stroke-primary" />
@@ -56,27 +56,26 @@
 
 <h2>With Tooltip and Highlight</h2>
 <Preview {data}>
-  <div class="w-[125px] h-[25px]">
+  <div class="w-[124px] h-[24px]">
     <Chart {data} x="date" xScale={scaleTime()} y="value" tooltip={{ mode: 'bisect-x' }}>
       <Svg>
         <Spline class="stroke-1 stroke-primary" />
         <Highlight points={{ r: 3, class: 'stroke-none' }} />
       </Svg>
-      <Tooltip
-        class="text-xs"
-        contained={false}
-        header={(data) => format(data.date, 'eee, MMM do')}
-        let:data
-      >
-        <TooltipItem label="value" value={data.value} />
-      </Tooltip>
+
+      <Tooltip.Root class="text-xs" contained={false} let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
 <h2>With Tooltip and Highlight (fixed position)</h2>
 <Preview {data}>
-  <div class="w-[125px] h-[25px]">
+  <div class="w-[124px] h-[24px]">
     <Chart
       {data}
       x="date"
@@ -90,7 +89,7 @@
         <Highlight points={{ r: 3, class: 'stroke-none' }} />
       </Svg>
 
-      <Tooltip
+      <Tooltip.Root
         class="text-xs"
         contained={false}
         y={-3}
@@ -104,7 +103,7 @@
         <div class="font-semibold">
           {data.value}
         </div>
-      </Tooltip>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -115,7 +114,7 @@
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium, ligula ac sollicitudin
       ullamcorper, leo justo pretium tellus, at gravida ex quam et orci.
-      <span class="w-[125px] h-[18px] inline-block">
+      <span class="w-[124px] h-[18px] inline-block">
         <Chart
           {data}
           x="date"
@@ -128,16 +127,19 @@
             <Spline class="stroke-1 stroke-primary" />
             <Highlight points lines />
           </Svg>
-          <Tooltip
+
+          <Tooltip.Root
             class="text-xs"
             contained={false}
-            header={(data) => format(data.date, 'eee, MMM do')}
             y={containerHeight + 4}
             xOffset={0}
             let:data
           >
-            <TooltipItem label="value" value={data.value} />
-          </Tooltip>
+            <Tooltip.Header>{format(data.date, 'eee, MMM do')}</Tooltip.Header>
+            <Tooltip.List>
+              <Tooltip.Item label="value" value={data.value} />
+            </Tooltip.List>
+          </Tooltip.Root>
         </Chart>
       </span> Sed ipsum justo, facilisis id tempor hendrerit, suscipit eu ipsum. Mauris ut sapien quis
       nibh volutpat venenatis. Ut viverra justo varius sapien convallis venenatis vel faucibus urna.
diff --git a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
index c14543b11..44577f0db 100644
--- a/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SpikeMap/+page.svelte
@@ -13,7 +13,6 @@
     Svg,
     TransformControls,
     Tooltip,
-    TooltipItem,
   } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -113,30 +112,31 @@
         {/each}
       </Svg>
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = data.properties.data}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name + ' - ' + data.properties.data?.state}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -230,30 +230,31 @@
         />
       </HitCanvas>
 
-      <Tooltip
-        header={(data) => data.properties.name + ' - ' + data.properties.data?.state}
-        let:data
-      >
+      <Tooltip.Root let:data>
         {@const d = data.properties.data}
-        <TooltipItem
-          label="Total Population"
-          value={d?.population}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Population under 18"
-          value={d?.populationUnder18}
-          format="integer"
-          valueAlign="right"
-        />
-        <TooltipItem
-          label="Est. Percent under 18"
-          value={d?.percentUnder18 / 100}
-          format="percentRound"
-          valueAlign="right"
-        />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name + ' - ' + data.properties.data?.state}</Tooltip.Header
+        >
+        <Tooltip.List>
+          <Tooltip.Item
+            label="Total Population"
+            value={d?.population}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Population under 18"
+            value={d?.populationUnder18}
+            format="integer"
+            valueAlign="right"
+          />
+          <Tooltip.Item
+            label="Est. Percent under 18"
+            value={d?.percentUnder18 / 100}
+            format="percentRound"
+            valueAlign="right"
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
index 46205b035..6849bdae2 100644
--- a/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/StateMap/+page.svelte
@@ -3,7 +3,8 @@
   import { feature } from 'topojson-client';
 
   import { Chart, ChartClipPath, GeoPath, Svg, Tooltip } from 'layerchart';
-  import { SelectField, sort } from 'svelte-ux';
+  import { SelectField } from 'svelte-ux';
+  import { sort } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -94,7 +95,10 @@
           class="fill-none stroke-surface-content pointer-events-none"
         />
       </Svg>
-      <Tooltip header={(data) => data.properties.name} />
+
+      <Tooltip.Root let:data>
+        {data.properites.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -131,7 +135,10 @@
           />
         </ChartClipPath>
       </Svg>
-      <Tooltip header={(data) => data.properties.name} />
+
+      <Tooltip.Root let:data>
+        {data.properites.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
index c9d78808e..241771d65 100644
--- a/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/SubmarineCablesGlobe/+page.svelte
@@ -2,7 +2,9 @@
   import { geoOrthographic } from 'd3-geo';
   import { feature } from 'topojson-client';
 
-  import { Button, ButtonGroup, Field, RangeField, cls, timerStore } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import {
     Chart,
@@ -140,10 +142,13 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(d) => d.name} let:data>
-        <!-- <TooltipItem label="Latitude" value={data.latitude} format="decimal" />
-        <TooltipItem label="Longitude" value={data.longitude} format="decimal" /> -->
-      </Tooltip>
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.name}</Tooltip.Header>
+        <!-- <Tooltip.List>
+          <Tooltip.Item label="Latitude" value={data.latitude} format="decimal" />
+          <Tooltip.Item label="Longitude" value={data.longitude} format="decimal" />
+        </Tooltip.List> -->
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
index 888c1b629..c65689615 100644
--- a/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Sunburst/+page.svelte
@@ -5,28 +5,10 @@
   import * as chromatic from 'd3-scale-chromatic';
   import { hsl } from 'd3-color';
 
-  import {
-    Arc,
-    Bounds,
-    Chart,
-    Group,
-    Partition,
-    Svg,
-    Tooltip,
-    TooltipItem,
-    findAncestor,
-  } from 'layerchart';
+  import { Arc, Bounds, Chart, Partition, Svg, Tooltip, findAncestor } from 'layerchart';
 
-  import {
-    Breadcrumb,
-    Button,
-    Field,
-    ToggleGroup,
-    ToggleOption,
-    compoundSortFunc,
-    format,
-    sortFunc,
-  } from 'svelte-ux';
+  import { Breadcrumb, Button, Field, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { format, sortFunc, compoundSortFunc } from '@layerstack/utils';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -91,7 +73,7 @@
   </Breadcrumb>
   <div class="h-[600px] p-4 border rounded">
     <Chart data={complexHierarchy} let:tooltip>
-      <Svg>
+      <Svg center>
         <Bounds
           domain={{ x0: selected?.x0 ?? 0, x1: selected?.x1 ?? 1, y0: selected?.y0 ?? 0, y1: 1 }}
           range={({ height }) => ({
@@ -105,36 +87,38 @@
           let:yScale
         >
           <Partition size={[1, 1]} let:nodes>
-            <Group center>
-              {#each nodes as node}
-                {@const nodeColor = getNodeColor(node, colorBy)}
-                <Arc
-                  value={node.value}
-                  startAngle={Math.max(0, Math.min(2 * Math.PI, xScale(node.x0)))}
-                  endAngle={Math.max(0, Math.min(2 * Math.PI, xScale(node.x1)))}
-                  innerRadius={Math.max(0, yScale(node.y0))}
-                  outerRadius={Math.max(0, yScale(node.y1))}
-                  fill={nodeColor}
-                  _stroke={hsl(nodeColor).darker(colorBy === 'children' ? 0.5 : 2)}
-                  stroke="hsl(0 0% 20%)"
-                  class="cursor-pointer"
-                  let:centroid
-                  on:click={() => {
-                    selected = node;
-                  }}
-                  on:pointermove={(e) => tooltip.show(e, node)}
-                  on:pointerleave={tooltip.hide}
-                >
-                  <!-- <text x={centroid[0]} y={centroid[1]}>{node.data.name}</text> -->
-                </Arc>
-              {/each}
-            </Group>
+            {#each nodes as node}
+              {@const nodeColor = getNodeColor(node, colorBy)}
+              <Arc
+                value={node.value}
+                startAngle={Math.max(0, Math.min(2 * Math.PI, xScale(node.x0)))}
+                endAngle={Math.max(0, Math.min(2 * Math.PI, xScale(node.x1)))}
+                innerRadius={Math.max(0, yScale(node.y0))}
+                outerRadius={Math.max(0, yScale(node.y1))}
+                fill={nodeColor}
+                _stroke={hsl(nodeColor).darker(colorBy === 'children' ? 0.5 : 2)}
+                stroke="hsl(0 0% 20%)"
+                class="cursor-pointer"
+                let:centroid
+                on:click={() => {
+                  selected = node;
+                }}
+                on:pointermove={(e) => tooltip.show(e, node)}
+                on:pointerleave={tooltip.hide}
+              >
+                <!-- <text x={centroid[0]} y={centroid[1]}>{node.data.name}</text> -->
+              </Arc>
+            {/each}
           </Partition>
         </Bounds>
       </Svg>
-      <Tooltip header={(data) => data.data.name} let:data>
-        <TooltipItem label="value" value={data.value} format="integer" />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} format="integer" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
index 064ff936a..b27d059a4 100644
--- a/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Threshold/+page.svelte
@@ -2,7 +2,7 @@
   import { scaleTime } from 'd3-scale';
   import { curveLinear, curveStepAfter } from 'd3-shape';
   import { format } from 'date-fns';
-  import { formatDate, PeriodType } from 'svelte-ux';
+  import { formatDate, PeriodType } from '@layerstack/utils';
 
   import {
     Area,
@@ -14,8 +14,6 @@
     Svg,
     Threshold,
     Tooltip,
-    TooltipItem,
-    TooltipSeparator,
   } from 'layerchart';
 
   import Preview from '$lib/docs/Preview.svelte';
@@ -57,15 +55,15 @@
           format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <Threshold curve={selectedCurve}>
-          <g slot="pathAbove" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} stroke-width="1.5" />
-            <Area pathData={areaPathData} {clipPath} class="fill-success/30" />
+        <Threshold curve={selectedCurve} let:curve>
+          <g slot="above" let:curve>
+            <Area y0="value" y1="baseline" {curve} class="fill-success/30" />
           </g>
-          <g slot="pathBelow" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} stroke-dasharray="4" />
-            <Area pathData={areaPathData} {clipPath} class="fill-danger/30" />
+          <g slot="below" let:curve>
+            <Area y0="value" y1="baseline" {curve} class="fill-danger/30" />
           </g>
+          <Spline y="baseline" {curve} class="[stroke-dasharray:4]" />
+          <Spline y="value" {curve} class="stroke-[1.5]" />
         </Threshold>
       </Svg>
     </Chart>
@@ -93,32 +91,34 @@
           format={(d) => formatDate(d, PeriodType.Day, { variant: 'short' })}
           rule
         />
-        <Threshold curve={curveStepAfter}>
-          <g slot="pathAbove" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} color="black" width="1.5" />
-            <Area pathData={areaPathData} {clipPath} class="fill-success/30" />
+        <Threshold curve={curveStepAfter} let:curve>
+          <g slot="above" let:curve>
+            <Area y0="value" y1="baseline" {curve} class="fill-success/30" />
           </g>
-          <g slot="pathBelow" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} color="black" width="1" stroke-dasharray="4" />
-            <Area pathData={areaPathData} {clipPath} class="fill-danger/30" />
+          <g slot="below" let:curve>
+            <Area y0="value" y1="baseline" {curve} class="fill-danger/30" />
           </g>
+          <Spline y="baseline" {curve} class="[stroke-dasharray:4]" />
+          <Spline y="value" {curve} class="stroke-[1.5]" />
         </Threshold>
         <Highlight area />
       </Svg>
-      <Tooltip header={(data) => format(data.date, 'eee, MMMM do')} let:data>
-        <TooltipItem label="value" value={data.value} />
-        <TooltipItem label="baseline" value={data.baseline} />
-        <TooltipSeparator />
-        <TooltipItem label="variance" value={data.value - data.baseline} />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{format(data.date, 'eee, MMMM do')}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} />
+          <Tooltip.Item label="baseline" value={data.baseline} />
+          <Tooltip.Separator />
+          <Tooltip.Item label="variance" value={data.value - data.baseline} />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
 
 <h2>With Labels</h2>
 
-<!-- TODO: Show label for both value and baseline (above and below) -->
-
 <Preview {data}>
   <div class="h-[300px] p-4 border rounded">
     <Chart
@@ -138,14 +138,14 @@
           rule
         />
         <Threshold>
-          <g slot="pathAbove" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} color="black" width="1.5" />
-            <Area pathData={areaPathData} {clipPath} class="fill-success/30" />
+          <g slot="above">
+            <Area y0="value" y1="baseline" class="fill-success/30" />
           </g>
-          <g slot="pathBelow" let:areaPathData let:clipPath let:linePathData>
-            <Spline pathData={linePathData} color="black" width="1" stroke-dasharray="4" />
-            <Area pathData={areaPathData} {clipPath} class="fill-danger/30" />
+          <g slot="below">
+            <Area y0="value" y1="baseline" class="fill-danger/30" />
           </g>
+          <Spline y="baseline" class="[stroke-dasharray:4]" />
+          <Spline y="value" class="stroke-[1.5]" />
         </Threshold>
         <Labels format="integer" />
       </Svg>
diff --git a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
index cb0e4abf7..1283c59a6 100644
--- a/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Timezones/+page.svelte
@@ -23,10 +23,10 @@
     Graticule,
     Svg,
     Tooltip,
-    TooltipItem,
     antipode,
   } from 'layerchart';
-  import { Field, SelectField, Switch, timerStore } from 'svelte-ux';
+  import { Field, SelectField, Switch } from 'svelte-ux';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -152,15 +152,17 @@
         {/if}
       </Svg>
 
-      <Tooltip let:data>
+      <Tooltip.Root let:data>
         {@const { tz_name1st, time_zone } = data.properties}
-        <TooltipItem label="Name" value={tz_name1st} />
-        <TooltipItem label="Timezone" value={time_zone} />
-        <TooltipItem
-          label="Current time"
-          value={formatDate($dateTimer, time_zone.replace('UTC', '').replace('±', '+'))}
-        />
-      </Tooltip>
+        <Tooltip.List>
+          <Tooltip.Item label="Name" value={tz_name1st} />
+          <Tooltip.Item label="Timezone" value={time_zone} />
+          <Tooltip.Item
+            label="Current time"
+            value={formatDate($dateTimer, time_zone.replace('UTC', '').replace('±', '+'))}
+          />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
index 0f05ebca4..c2d8f6d31 100644
--- a/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/TranslucentGlobe/+page.svelte
@@ -11,7 +11,8 @@
     Tooltip,
     TransformContext,
   } from 'layerchart';
-  import { Button, ButtonGroup, Field, RangeField, timerStore } from 'svelte-ux';
+  import { Button, ButtonGroup, Field, RangeField } from 'svelte-ux';
+  import { timerStore } from '@layerstack/svelte-stores';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -124,9 +125,9 @@
         {/each}
       </Svg>
 
-      <Tooltip>
-        <div slot="header" let:data>{data.properties.name}</div>
-      </Tooltip>
+      <Tooltip.Root let:data>
+        {data.properties.name}
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
index 85401ffb3..97e2868b0 100644
--- a/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Tree/+page.svelte
@@ -4,7 +4,8 @@
   import { curveBumpX, curveBumpY, curveStep, curveStepBefore, curveStepAfter } from 'd3-shape';
 
   import { Chart, Group, Link, Rect, Svg, Text, TransformControls, Tree } from 'layerchart';
-  import { Field, ToggleGroup, ToggleOption, cls } from 'svelte-ux';
+  import { Field, ToggleGroup, ToggleOption } from 'svelte-ux';
+  import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
   import type { ComponentProps } from 'svelte';
diff --git a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
index daa600738..f5c6a5cf3 100644
--- a/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/Treemap/+page.svelte
@@ -15,10 +15,9 @@
     Switch,
     ToggleGroup,
     ToggleOption,
-    format,
-    sortFunc,
-    cls,
   } from 'svelte-ux';
+  import { format, sortFunc } from '@layerstack/utils';
+  import { cls } from '@layerstack/tailwind';
 
   import Preview from '$lib/docs/Preview.svelte';
 
@@ -32,7 +31,6 @@
     Svg,
     Text,
     Tooltip,
-    TooltipItem,
     Treemap,
     findAncestor,
   } from 'layerchart';
@@ -240,9 +238,13 @@
           </ChartClipPath>
         </Bounds>
       </Svg>
-      <Tooltip header={(data) => data.data.name} let:data>
-        <TooltipItem label="value" value={data.value} format="integer" />
-      </Tooltip>
+
+      <Tooltip.Root let:data>
+        <Tooltip.Header>{data.data.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="value" value={data.value} format="integer" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
index 6d9bd303e..f78bc6f62 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableMap/+page.svelte
@@ -11,7 +11,6 @@
     HitCanvas,
     Svg,
     Tooltip,
-    TooltipItem,
     TransformControls,
     geoFitObjectTransform,
   } from 'layerchart';
@@ -122,11 +121,15 @@
           </g>
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name}>
+
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -192,12 +195,17 @@
           </g>
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name}>
+
+      <Tooltip.Root let:data>
+        {data.properties.name}
         <!-- TODO: How to handle scale (when using canvas and not projection transforms) -->
         <!-- {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" /> -->
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List> -->
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -308,11 +316,14 @@
         />
       </HitCanvas>
 
-      <Tooltip header={(data) => data.properties.name}>
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -427,12 +438,16 @@
         />
       </HitCanvas>
 
-      <Tooltip header={(data) => data.properties.name}>
+      <Tooltip.Root let:data>
+        {data.properties.name}
         <!-- TODO: How to handle scale (when using canvas and not projection transforms) -->
         <!-- {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" /> -->
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List> -->
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
index 625e6177b..69beead98 100644
--- a/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
+++ b/packages/layerchart/src/routes/docs/examples/ZoomableTileMap/+page.svelte
@@ -9,7 +9,6 @@
     GeoTile,
     Svg,
     Tooltip,
-    TooltipItem,
     TransformControls,
     geoFitObjectTransform,
   } from 'layerchart';
@@ -92,11 +91,14 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(data) => data.properties.name} let:data>
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -153,11 +155,15 @@
           />
         {/each}
       </Svg>
-      <Tooltip header={(data) => data.properties.name} let:data>
+
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
@@ -213,11 +219,14 @@
         {/each}
       </Svg>
 
-      <Tooltip header={(data) => data.properties.name} let:data>
+      <Tooltip.Root let:data>
         {@const [longitude, latitude] = projection.invert?.([tooltip.x, tooltip.y]) ?? []}
-        <TooltipItem label="longitude" value={longitude} format="decimal" />
-        <TooltipItem label="latitude" value={latitude} format="decimal" />
-      </Tooltip>
+        <Tooltip.Header>{data.properties.name}</Tooltip.Header>
+        <Tooltip.List>
+          <Tooltip.Item label="longitude" value={longitude} format="decimal" />
+          <Tooltip.Item label="latitude" value={latitude} format="decimal" />
+        </Tooltip.List>
+      </Tooltip.Root>
     </Chart>
   </div>
 </Preview>
diff --git a/packages/layerchart/src/routes/docs/examples/_data/graph.ts b/packages/layerchart/src/routes/docs/examples/_data/graph.ts
deleted file mode 100644
index 593ebf4c3..000000000
--- a/packages/layerchart/src/routes/docs/examples/_data/graph.ts
+++ /dev/null
@@ -1,462 +0,0 @@
-/*
-	TODO:
-	  - https://observablehq.com/@sophietalbot/bipartite-graph-of-virtual-water-trade-wheat/2
-*/
-
-export const simpleData = {
-  nodes: [
-    { id: 'A1' },
-    { id: 'A2' },
-    { id: 'A3' },
-    { id: 'B1' },
-    { id: 'B2' },
-    { id: 'B3' },
-    { id: 'B4' },
-    { id: 'C1' },
-    { id: 'C2' },
-    { id: 'C3' },
-    { id: 'D1' },
-    { id: 'D2' },
-  ],
-  links: [
-    { source: 'A1', target: 'B1', value: 27 },
-    { source: 'A1', target: 'B2', value: 9 },
-    { source: 'A2', target: 'B2', value: 5 },
-    { source: 'A2', target: 'B3', value: 11 },
-    { source: 'A3', target: 'B2', value: 12 },
-    { source: 'A3', target: 'B4', value: 7 },
-    { source: 'B1', target: 'C1', value: 13 },
-    { source: 'B1', target: 'C2', value: 10 },
-    { source: 'B4', target: 'C2', value: 5 },
-    { source: 'B4', target: 'C3', value: 2 },
-    { source: 'B1', target: 'D1', value: 4 },
-    { source: 'C3', target: 'D1', value: 1 },
-    { source: 'C3', target: 'D2', value: 1 },
-  ],
-};
-
-export const complexData = {
-  nodes: [
-    { name: "Agricultural 'waste'" },
-    { name: 'Bio-conversion' },
-    { name: 'Liquid' },
-    { name: 'Losses' },
-    { name: 'Solid' },
-    { name: 'Gas' },
-    { name: 'Biofuel imports' },
-    { name: 'Biomass imports' },
-    { name: 'Coal imports' },
-    { name: 'Coal' },
-    { name: 'Coal reserves' },
-    { name: 'District heating' },
-    { name: 'Industry' },
-    { name: 'Heating and cooling - commercial' },
-    { name: 'Heating and cooling - homes' },
-    { name: 'Electricity grid' },
-    { name: 'Over generation / exports' },
-    { name: 'H2 conversion' },
-    { name: 'Road transport' },
-    { name: 'Agriculture' },
-    { name: 'Rail transport' },
-    { name: 'Lighting & appliances - commercial' },
-    { name: 'Lighting & appliances - homes' },
-    { name: 'Gas imports' },
-    { name: 'Ngas' },
-    { name: 'Gas reserves' },
-    { name: 'Thermal generation' },
-    { name: 'Geothermal' },
-    { name: 'H2' },
-    { name: 'Hydro' },
-    { name: 'International shipping' },
-    { name: 'Domestic aviation' },
-    { name: 'International aviation' },
-    { name: 'National navigation' },
-    { name: 'Marine algae' },
-    { name: 'Nuclear' },
-    { name: 'Oil imports' },
-    { name: 'Oil' },
-    { name: 'Oil reserves' },
-    { name: 'Other waste' },
-    { name: 'Pumped heat' },
-    { name: 'Solar PV' },
-    { name: 'Solar Thermal' },
-    { name: 'Solar' },
-    { name: 'Tidal' },
-    { name: 'UK land based bioenergy' },
-    { name: 'Wave' },
-    { name: 'Wind' },
-  ],
-  links: [
-    { source: 0, target: 1, value: 124.729 },
-    { source: 1, target: 2, value: 0.597 },
-    { source: 1, target: 3, value: 26.862 },
-    { source: 1, target: 4, value: 280.322 },
-    { source: 1, target: 5, value: 81.144 },
-    { source: 6, target: 2, value: 35 },
-    { source: 7, target: 4, value: 35 },
-    { source: 8, target: 9, value: 11.606 },
-    { source: 10, target: 9, value: 63.965 },
-    { source: 9, target: 4, value: 75.571 },
-    { source: 11, target: 12, value: 10.639 },
-    { source: 11, target: 13, value: 22.505 },
-    { source: 11, target: 14, value: 46.184 },
-    { source: 15, target: 16, value: 104.453 },
-    { source: 15, target: 14, value: 113.726 },
-    { source: 15, target: 17, value: 27.14 },
-    { source: 15, target: 12, value: 342.165 },
-    { source: 15, target: 18, value: 37.797 },
-    { source: 15, target: 19, value: 4.412 },
-    { source: 15, target: 13, value: 40.858 },
-    { source: 15, target: 3, value: 56.691 },
-    { source: 15, target: 20, value: 7.863 },
-    { source: 15, target: 21, value: 90.008 },
-    { source: 15, target: 22, value: 93.494 },
-    { source: 23, target: 24, value: 40.719 },
-    { source: 25, target: 24, value: 82.233 },
-    { source: 5, target: 13, value: 0.129 },
-    { source: 5, target: 3, value: 1.401 },
-    { source: 5, target: 26, value: 151.891 },
-    { source: 5, target: 19, value: 2.096 },
-    { source: 5, target: 12, value: 48.58 },
-    { source: 27, target: 15, value: 7.013 },
-    { source: 17, target: 28, value: 20.897 },
-    { source: 17, target: 3, value: 6.242 },
-    { source: 28, target: 18, value: 20.897 },
-    { source: 29, target: 15, value: 6.995 },
-    { source: 2, target: 12, value: 121.066 },
-    { source: 2, target: 30, value: 128.69 },
-    { source: 2, target: 18, value: 135.835 },
-    { source: 2, target: 31, value: 14.458 },
-    { source: 2, target: 32, value: 206.267 },
-    { source: 2, target: 19, value: 3.64 },
-    { source: 2, target: 33, value: 33.218 },
-    { source: 2, target: 20, value: 4.413 },
-    { source: 34, target: 1, value: 4.375 },
-    { source: 24, target: 5, value: 122.952 },
-    { source: 35, target: 26, value: 839.978 },
-    { source: 36, target: 37, value: 504.287 },
-    { source: 38, target: 37, value: 107.703 },
-    { source: 37, target: 2, value: 611.99 },
-    { source: 39, target: 4, value: 56.587 },
-    { source: 39, target: 1, value: 77.81 },
-    { source: 40, target: 14, value: 193.026 },
-    { source: 40, target: 13, value: 70.672 },
-    { source: 41, target: 15, value: 59.901 },
-    { source: 42, target: 14, value: 19.263 },
-    { source: 43, target: 42, value: 19.263 },
-    { source: 43, target: 41, value: 59.901 },
-    { source: 4, target: 19, value: 0.882 },
-    { source: 4, target: 26, value: 400.12 },
-    { source: 4, target: 12, value: 46.477 },
-    { source: 26, target: 15, value: 525.531 },
-    { source: 26, target: 3, value: 787.129 },
-    { source: 26, target: 11, value: 79.329 },
-    { source: 44, target: 15, value: 9.452 },
-    { source: 45, target: 1, value: 182.01 },
-    { source: 46, target: 15, value: 19.013 },
-    { source: 47, target: 15, value: 289.366 },
-  ],
-};
-
-// https://www.fusioncharts.com/charts/sankey-diagram/vertical-sankey-diagram?framework=javascript
-export const bilateralTradeValue2013 = {
-  nodes: [
-    {
-      label: 'Netherlands',
-    },
-    {
-      label: 'Canada',
-    },
-    {
-      label: 'Belgium',
-    },
-    {
-      label: 'Italy',
-    },
-    {
-      label: 'Mexico',
-    },
-    {
-      label: 'Russia',
-    },
-    {
-      label: 'Spain',
-    },
-    {
-      label: 'South Korea',
-    },
-    {
-      label: 'Germany',
-    },
-    {
-      label: 'China',
-    },
-    {
-      label: 'European Union',
-    },
-    {
-      label: 'Japan',
-    },
-    {
-      label: 'United Kingdom',
-    },
-    {
-      label: 'United States',
-    },
-    {
-      label: 'France',
-    },
-    {
-      label: 'Hong Kong',
-    },
-    {
-      label: 'Switzerland',
-    },
-    {
-      label: 'Austria',
-    },
-    {
-      label: 'Sweden',
-    },
-  ],
-  links: [
-    {
-      from: 'Netherlands',
-      to: 'European Union',
-      value: 798744,
-    },
-    {
-      from: 'Germany',
-      to: 'European Union',
-      value: 1468990,
-    },
-    {
-      from: 'European Union',
-      to: 'France',
-      value: 745931,
-    },
-    {
-      from: 'European Union',
-      to: 'United States',
-      value: 660541,
-    },
-    {
-      from: 'Canada',
-      to: 'United States',
-      value: 594546,
-    },
-    {
-      from: 'Belgium',
-      to: 'European Union',
-      value: 628796,
-    },
-    {
-      from: 'China',
-      to: 'Hong Kong',
-      value: 400571,
-    },
-    {
-      from: 'China',
-      to: 'United States',
-      value: 526454,
-    },
-    {
-      from: 'European Union',
-      to: 'United Kingdom',
-      value: 520318,
-    },
-    {
-      from: 'China',
-      to: 'European Union',
-      value: 560536,
-    },
-    {
-      from: 'Italy',
-      to: 'European Union',
-      value: 539556,
-    },
-    {
-      from: 'Mexico',
-      to: 'United States',
-      value: 492715,
-    },
-    {
-      from: 'Russia',
-      to: 'European Union',
-      value: 385778,
-    },
-    {
-      from: 'Spain',
-      to: 'European Union',
-      value: 365191,
-    },
-    {
-      from: 'China',
-      to: 'Japan',
-      value: 312062,
-    },
-    {
-      from: 'European Union',
-      to: 'Switzerland',
-      value: 328609,
-    },
-    {
-      from: 'South Korea',
-      to: 'China',
-      value: 229073,
-    },
-    {
-      from: 'European Union',
-      to: 'Austria',
-      value: 244913,
-    },
-    {
-      from: 'Japan',
-      to: 'United States',
-      value: 206091,
-    },
-    {
-      from: 'European Union',
-      to: 'Sweden',
-      value: 204849,
-    },
-    {
-      from: 'Germany',
-      to: 'United States',
-      value: 184287,
-    },
-  ],
-};
-
-// https://bl.ocks.org/d3noob/5028304
-export const greenhouse = {
-  links: [
-    { source: 'Agricultural Energy Use', target: 'Carbon Dioxide', value: '1.4' },
-    { source: 'Agriculture', target: 'Agriculture Soils', value: '5.2' },
-    { source: 'Agriculture', target: 'Livestock and Manure', value: '5.4' },
-    { source: 'Agriculture', target: 'Other Agriculture', value: '1.7' },
-    { source: 'Agriculture', target: 'Rice Cultivation', value: '1.5' },
-    { source: 'Agriculture Soils', target: 'Nitrous Oxide', value: '5.2' },
-    { source: 'Air', target: 'Carbon Dioxide', value: '1.7' },
-    { source: 'Aluminium Non-Ferrous Metals', target: 'Carbon Dioxide', value: '1.0' },
-    { source: 'Aluminium Non-Ferrous Metals', target: 'HFCs - PFCs', value: '0.2' },
-    { source: 'Cement', target: 'Carbon Dioxide', value: '5.0' },
-    { source: 'Chemicals', target: 'Carbon Dioxide', value: '3.4' },
-    { source: 'Chemicals', target: 'HFCs - PFCs', value: '0.5' },
-    { source: 'Chemicals', target: 'Nitrous Oxide', value: '0.2' },
-    { source: 'Coal Mining', target: 'Carbon Dioxide', value: '0.1' },
-    { source: 'Coal Mining', target: 'Methane', value: '1.2' },
-    { source: 'Commercial Buildings', target: 'Carbon Dioxide', value: '6.3' },
-    { source: 'Deforestation', target: 'Carbon Dioxide', value: '10.9' },
-    { source: 'Electricity and heat', target: 'Agricultural Energy Use', value: '0.4' },
-    { source: 'Electricity and heat', target: 'Aluminium Non-Ferrous Metals', value: '0.4' },
-    { source: 'Electricity and heat', target: 'Cement', value: '0.3' },
-    { source: 'Electricity and heat', target: 'Chemicals', value: '1.3' },
-    { source: 'Electricity and heat', target: 'Commercial Buildings', value: '5.0' },
-    { source: 'Electricity and heat', target: 'Food and Tobacco', value: '0.5' },
-    { source: 'Electricity and heat', target: 'Iron and Steel', value: '1.0' },
-    { source: 'Electricity and heat', target: 'Machinery', value: '1.0' },
-    { source: 'Electricity and heat', target: 'Oil and Gas Processing', value: '0.4' },
-    { source: 'Electricity and heat', target: 'Other Industry', value: '2.7' },
-    { source: 'Electricity and heat', target: 'Pulp - Paper and Printing', value: '0.6' },
-    { source: 'Electricity and heat', target: 'Residential Buildings', value: '5.2' },
-    { source: 'Electricity and heat', target: 'T and D Losses', value: '2.2' },
-    { source: 'Electricity and heat', target: 'Unallocated Fuel Combustion', value: '2.0' },
-    { source: 'Energy', target: 'Electricity and heat', value: '24.9' },
-    { source: 'Energy', target: 'Fugitive Emissions', value: '4.0' },
-    { source: 'Energy', target: 'Industry', value: '14.7' },
-    { source: 'Energy', target: 'Other Fuel Combustion', value: '8.6' },
-    { source: 'Energy', target: 'Transportation', value: '14.3' },
-    { source: 'Food and Tobacco', target: 'Carbon Dioxide', value: '1.0' },
-    { source: 'Fugitive Emissions', target: 'Coal Mining', value: '1.3' },
-    { source: 'Fugitive Emissions', target: 'Oil and Gas Processing', value: '3.2' },
-    { source: 'Harvest / Management', target: 'Carbon Dioxide', value: '1.3' },
-    { source: 'Industrial Processes', target: 'Aluminium Non-Ferrous Metals', value: '0.4' },
-    { source: 'Industrial Processes', target: 'Cement', value: '2.8' },
-    { source: 'Industrial Processes', target: 'Chemicals', value: '1.4' },
-    { source: 'Industrial Processes', target: 'Other Industry', value: '0.5' },
-    { source: 'Industry', target: 'Aluminium Non-Ferrous Metals', value: '0.4' },
-    { source: 'Industry', target: 'Cement', value: '1.9' },
-    { source: 'Industry', target: 'Chemicals', value: '1.4' },
-    { source: 'Industry', target: 'Food and Tobacco', value: '0.5' },
-    { source: 'Industry', target: 'Iron and Steel', value: '3.0' },
-    { source: 'Industry', target: 'Oil and Gas Processing', value: '2.8' },
-    { source: 'Industry', target: 'Other Industry', value: '3.8' },
-    { source: 'Industry', target: 'Pulp - Paper and Printing', value: '0.5' },
-    { source: 'Iron and Steel', target: 'Carbon Dioxide', value: '4.0' },
-    { source: 'Land Use Change', target: 'Deforestation', value: '10.9' },
-    { source: 'Land Use Change', target: 'Harvest / Management', value: '1.3' },
-    { source: 'Landfills', target: 'Methane', value: '1.7' },
-    { source: 'Livestock and Manure', target: 'Methane', value: '5.1' },
-    { source: 'Livestock and Manure', target: 'Nitrous Oxide', value: '0.3' },
-    { source: 'Machinery', target: 'Carbon Dioxide', value: '1.0' },
-    { source: 'Oil and Gas Processing', target: 'Carbon Dioxide', value: '3.6' },
-    { source: 'Oil and Gas Processing', target: 'Methane', value: '2.8' },
-    { source: 'Other Agriculture', target: 'Methane', value: '1.4' },
-    { source: 'Other Agriculture', target: 'Nitrous Oxide', value: '0.3' },
-    { source: 'Other Fuel Combustion', target: 'Agricultural Energy Use', value: '1.0' },
-    { source: 'Other Fuel Combustion', target: 'Commercial Buildings', value: '1.3' },
-    { source: 'Other Fuel Combustion', target: 'Residential Buildings', value: '5.0' },
-    { source: 'Other Fuel Combustion', target: 'Unallocated Fuel Combustion', value: '1.8' },
-    { source: 'Other Industry', target: 'Carbon Dioxide', value: '6.6' },
-    { source: 'Other Industry', target: 'HFCs - PFCs', value: '0.4' },
-    { source: 'Pulp - Paper and Printing', target: 'Carbon Dioxide', value: '1.1' },
-    { source: 'Rail - Ship and Other Transport', target: 'Carbon Dioxide', value: '2.5' },
-    { source: 'Residential Buildings', target: 'Carbon Dioxide', value: '10.2' },
-    { source: 'Rice Cultivation', target: 'Methane', value: '1.5' },
-    { source: 'Road', target: 'Carbon Dioxide', value: '10.5' },
-    { source: 'T and D Losses', target: 'Carbon Dioxide', value: '2.2' },
-    { source: 'Transportation', target: 'Air', value: '1.7' },
-    { source: 'Transportation', target: 'Rail - Ship and Other Transport', value: '2.5' },
-    { source: 'Transportation', target: 'Road', value: '10.5' },
-    { source: 'Unallocated Fuel Combustion', target: 'Carbon Dioxide', value: '3.0' },
-    { source: 'Unallocated Fuel Combustion', target: 'Methane', value: '0.4' },
-    { source: 'Unallocated Fuel Combustion', target: 'Nitrous Oxide', value: '0.4' },
-    { source: 'Waste', target: 'Landfills', value: '1.7' },
-    { source: 'Waste', target: 'Waste water - Other Waste', value: '1.5' },
-    { source: 'Waste water - Other Waste', target: 'Methane', value: '1.2' },
-    { source: 'Waste water - Other Waste', target: 'Nitrous Oxide', value: '0.3' },
-  ],
-  nodes: [
-    { name: 'Energy' },
-    { name: 'Industrial Processes' },
-    { name: 'Electricity and heat' },
-    { name: 'Industry' },
-    { name: 'Land Use Change' },
-    { name: 'Agriculture' },
-    { name: 'Waste' },
-    { name: 'Transportation' },
-    { name: 'Other Fuel Combustion' },
-    { name: 'Fugitive Emissions' },
-    { name: 'Road' },
-    { name: 'Air' },
-    { name: 'Rail - Ship and Other Transport' },
-    { name: 'Residential Buildings' },
-    { name: 'Commercial Buildings' },
-    { name: 'Unallocated Fuel Combustion' },
-    { name: 'Iron and Steel' },
-    { name: 'Aluminium Non-Ferrous Metals' },
-    { name: 'Machinery' },
-    { name: 'Pulp - Paper and Printing' },
-    { name: 'Food and Tobacco' },
-    { name: 'Chemicals' },
-    { name: 'Cement' },
-    { name: 'Other Industry' },
-    { name: 'T and D Losses' },
-    { name: 'Coal Mining' },
-    { name: 'Oil and Gas Processing' },
-    { name: 'Deforestation' },
-    { name: 'Harvest / Management' },
-    { name: 'Agricultural Energy Use' },
-    { name: 'Agriculture Soils' },
-    { name: 'Livestock and Manure' },
-    { name: 'Rice Cultivation' },
-    { name: 'Other Agriculture' },
-    { name: 'Landfills' },
-    { name: 'Waste water - Other Waste' },
-    { name: 'Carbon Dioxide' },
-    { name: 'HFCs - PFCs' },
-    { name: 'Methane' },
-    { name: 'Nitrous Oxide' },
-  ],
-};
diff --git a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
index b7ccb62b7..298f940bd 100644
--- a/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/GeojsonPreview/+page.svelte
@@ -15,7 +15,16 @@
   import { schemeCategory10 } from 'd3-scale-chromatic';
   import { color } from 'd3-color';
 
-  import { Canvas, Chart, GeoPath, GeoTile, HitCanvas, Tooltip, TooltipItem } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    GeoTile,
+    HitCanvas,
+    Svg,
+    Tooltip,
+    TransformControls,
+  } from 'layerchart';
   import {
     EmptyMessage,
     RangeField,
@@ -89,16 +98,27 @@
         geo={{
           projection,
           fitGeojson: geojson,
+          applyTransform: ['translate', 'scale'],
+        }}
+        transform={{
+          translateOnScale: true,
+          initialScrollMode: 'scale',
         }}
         padding={{ top: 8, bottom: 8, left: 8, right: 8 }}
         let:tooltip
       >
         {#if projection === geoMercator}
-          <Canvas>
+          <Svg>
+            <!-- technique: https://observablehq.com/@d3/seamless-zoomable-map-tiles -->
+            <GeoTile url={serviceUrl} zoomDelta={-100} />
+            <GeoTile url={serviceUrl} zoomDelta={-4} />
+            <GeoTile url={serviceUrl} zoomDelta={-1} />
             <GeoTile url={serviceUrl} {zoomDelta} />
-          </Canvas>
+          </Svg>
         {/if}
 
+        <TransformControls />
+
         <Canvas>
           {#if projection === geoMercator}
             <!-- <GeoPath {geojson} class="stroke-black fill-black/50" /> -->
@@ -151,11 +171,14 @@
           />
         </HitCanvas>
 
-        <Tooltip header={(data) => data.properties.id} let:data>
-          {#each Object.entries(data.properties) as [key, value]}
-            <TooltipItem label={key} {value} />
-          {/each}
-        </Tooltip>
+        <Tooltip.Root let:data>
+          <Tooltip.Header>{data.properties.id}</Tooltip.Header>
+          <Tooltip.List>
+            {#each Object.entries(data.properties) as [key, value]}
+              <Tooltip.Item label={key} {value} />
+            {/each}
+          </Tooltip.List>
+        </Tooltip.Root>
       </Chart>
     {:else}
       <EmptyMessage class="h-full">Please enter input below</EmptyMessage>
diff --git a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
index 48be58eb1..db0e55e7e 100644
--- a/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
+++ b/packages/layerchart/src/routes/docs/tools/TopojsonPreview/+page.svelte
@@ -17,7 +17,16 @@
   import { feature } from 'topojson-client';
   import type { GeometryCollection, Topology } from 'topojson-specification';
 
-  import { Canvas, Chart, GeoPath, GeoTile, HitCanvas, Tooltip, TooltipItem } from 'layerchart';
+  import {
+    Canvas,
+    Chart,
+    GeoPath,
+    GeoTile,
+    HitCanvas,
+    Svg,
+    Tooltip,
+    TransformControls,
+  } from 'layerchart';
   import {
     CopyButton,
     EmptyMessage,
@@ -74,7 +83,7 @@
     })
   );
 
-  $: features = geojson.features;
+  $: features = geojson?.features;
 </script>
 
 <div class="grid gap-2">
@@ -96,16 +105,27 @@
         geo={{
           projection,
           fitGeojson: geojson,
+          applyTransform: ['translate', 'scale'],
+        }}
+        transform={{
+          translateOnScale: true,
+          initialScrollMode: 'scale',
         }}
         padding={{ top: 8, bottom: 8, left: 8, right: 8 }}
         let:tooltip
       >
         {#if projection === geoMercator}
-          <Canvas>
+          <Svg>
+            <!-- technique: https://observablehq.com/@d3/seamless-zoomable-map-tiles -->
+            <GeoTile url={serviceUrl} zoomDelta={-100} />
+            <GeoTile url={serviceUrl} zoomDelta={-4} />
+            <GeoTile url={serviceUrl} zoomDelta={-1} />
             <GeoTile url={serviceUrl} {zoomDelta} />
-          </Canvas>
+          </Svg>
         {/if}
 
+        <TransformControls />
+
         <Canvas>
           {#if projection === geoMercator}
             <!-- <GeoPath {geojson} class="stroke-black fill-black/50" /> -->
@@ -158,11 +178,14 @@
           />
         </HitCanvas>
 
-        <Tooltip header={(data) => data.properties.id} let:data>
-          {#each Object.entries(data.properties) as [key, value]}
-            <TooltipItem label={key} {value} />
-          {/each}
-        </Tooltip>
+        <Tooltip.Root let:data>
+          <Tooltip.Header>{data.properties.id}</Tooltip.Header>
+          <Tooltip.List>
+            {#each Object.entries(data.properties) as [key, value]}
+              <Tooltip.Item label={key} {value} />
+            {/each}
+          </Tooltip.List>
+        </Tooltip.Root>
       </Chart>
     {:else}
       <EmptyMessage class="h-full">Please enter input below</EmptyMessage>
diff --git a/packages/layerchart/static/data/examples/graph/complex.json b/packages/layerchart/static/data/examples/graph/complex.json
new file mode 100644
index 000000000..2c36a790b
--- /dev/null
+++ b/packages/layerchart/static/data/examples/graph/complex.json
@@ -0,0 +1,122 @@
+{
+  "nodes": [
+    { "name": "Agricultural 'waste'" },
+    { "name": "Bio-conversion" },
+    { "name": "Liquid" },
+    { "name": "Losses" },
+    { "name": "Solid" },
+    { "name": "Gas" },
+    { "name": "Biofuel imports" },
+    { "name": "Biomass imports" },
+    { "name": "Coal imports" },
+    { "name": "Coal" },
+    { "name": "Coal reserves" },
+    { "name": "District heating" },
+    { "name": "Industry" },
+    { "name": "Heating and cooling - commercial" },
+    { "name": "Heating and cooling - homes" },
+    { "name": "Electricity grid" },
+    { "name": "Over generation / exports" },
+    { "name": "H2 conversion" },
+    { "name": "Road transport" },
+    { "name": "Agriculture" },
+    { "name": "Rail transport" },
+    { "name": "Lighting & appliances - commercial" },
+    { "name": "Lighting & appliances - homes" },
+    { "name": "Gas imports" },
+    { "name": "Ngas" },
+    { "name": "Gas reserves" },
+    { "name": "Thermal generation" },
+    { "name": "Geothermal" },
+    { "name": "H2" },
+    { "name": "Hydro" },
+    { "name": "International shipping" },
+    { "name": "Domestic aviation" },
+    { "name": "International aviation" },
+    { "name": "National navigation" },
+    { "name": "Marine algae" },
+    { "name": "Nuclear" },
+    { "name": "Oil imports" },
+    { "name": "Oil" },
+    { "name": "Oil reserves" },
+    { "name": "Other waste" },
+    { "name": "Pumped heat" },
+    { "name": "Solar PV" },
+    { "name": "Solar Thermal" },
+    { "name": "Solar" },
+    { "name": "Tidal" },
+    { "name": "UK land based bioenergy" },
+    { "name": "Wave" },
+    { "name": "Wind" }
+  ],
+  "links": [
+    { "source": 0, "target": 1, "value": 124.729 },
+    { "source": 1, "target": 2, "value": 0.597 },
+    { "source": 1, "target": 3, "value": 26.862 },
+    { "source": 1, "target": 4, "value": 280.322 },
+    { "source": 1, "target": 5, "value": 81.144 },
+    { "source": 6, "target": 2, "value": 35 },
+    { "source": 7, "target": 4, "value": 35 },
+    { "source": 8, "target": 9, "value": 11.606 },
+    { "source": 10, "target": 9, "value": 63.965 },
+    { "source": 9, "target": 4, "value": 75.571 },
+    { "source": 11, "target": 12, "value": 10.639 },
+    { "source": 11, "target": 13, "value": 22.505 },
+    { "source": 11, "target": 14, "value": 46.184 },
+    { "source": 15, "target": 16, "value": 104.453 },
+    { "source": 15, "target": 14, "value": 113.726 },
+    { "source": 15, "target": 17, "value": 27.14 },
+    { "source": 15, "target": 12, "value": 342.165 },
+    { "source": 15, "target": 18, "value": 37.797 },
+    { "source": 15, "target": 19, "value": 4.412 },
+    { "source": 15, "target": 13, "value": 40.858 },
+    { "source": 15, "target": 3, "value": 56.691 },
+    { "source": 15, "target": 20, "value": 7.863 },
+    { "source": 15, "target": 21, "value": 90.008 },
+    { "source": 15, "target": 22, "value": 93.494 },
+    { "source": 23, "target": 24, "value": 40.719 },
+    { "source": 25, "target": 24, "value": 82.233 },
+    { "source": 5, "target": 13, "value": 0.129 },
+    { "source": 5, "target": 3, "value": 1.401 },
+    { "source": 5, "target": 26, "value": 151.891 },
+    { "source": 5, "target": 19, "value": 2.096 },
+    { "source": 5, "target": 12, "value": 48.58 },
+    { "source": 27, "target": 15, "value": 7.013 },
+    { "source": 17, "target": 28, "value": 20.897 },
+    { "source": 17, "target": 3, "value": 6.242 },
+    { "source": 28, "target": 18, "value": 20.897 },
+    { "source": 29, "target": 15, "value": 6.995 },
+    { "source": 2, "target": 12, "value": 121.066 },
+    { "source": 2, "target": 30, "value": 128.69 },
+    { "source": 2, "target": 18, "value": 135.835 },
+    { "source": 2, "target": 31, "value": 14.458 },
+    { "source": 2, "target": 32, "value": 206.267 },
+    { "source": 2, "target": 19, "value": 3.64 },
+    { "source": 2, "target": 33, "value": 33.218 },
+    { "source": 2, "target": 20, "value": 4.413 },
+    { "source": 34, "target": 1, "value": 4.375 },
+    { "source": 24, "target": 5, "value": 122.952 },
+    { "source": 35, "target": 26, "value": 839.978 },
+    { "source": 36, "target": 37, "value": 504.287 },
+    { "source": 38, "target": 37, "value": 107.703 },
+    { "source": 37, "target": 2, "value": 611.99 },
+    { "source": 39, "target": 4, "value": 56.587 },
+    { "source": 39, "target": 1, "value": 77.81 },
+    { "source": 40, "target": 14, "value": 193.026 },
+    { "source": 40, "target": 13, "value": 70.672 },
+    { "source": 41, "target": 15, "value": 59.901 },
+    { "source": 42, "target": 14, "value": 19.263 },
+    { "source": 43, "target": 42, "value": 19.263 },
+    { "source": 43, "target": 41, "value": 59.901 },
+    { "source": 4, "target": 19, "value": 0.882 },
+    { "source": 4, "target": 26, "value": 400.12 },
+    { "source": 4, "target": 12, "value": 46.477 },
+    { "source": 26, "target": 15, "value": 525.531 },
+    { "source": 26, "target": 3, "value": 787.129 },
+    { "source": 26, "target": 11, "value": 79.329 },
+    { "source": 44, "target": 15, "value": 9.452 },
+    { "source": 45, "target": 1, "value": 182.01 },
+    { "source": 46, "target": 15, "value": 19.013 },
+    { "source": 47, "target": 15, "value": 289.366 }
+  ]
+}
diff --git a/packages/layerchart/static/data/examples/graph/greenhouse.json b/packages/layerchart/static/data/examples/graph/greenhouse.json
new file mode 100644
index 000000000..51027ee68
--- /dev/null
+++ b/packages/layerchart/static/data/examples/graph/greenhouse.json
@@ -0,0 +1,131 @@
+{
+  "nodes": [
+    { "name": "Energy" },
+    { "name": "Industrial Processes" },
+    { "name": "Electricity and heat" },
+    { "name": "Industry" },
+    { "name": "Land Use Change" },
+    { "name": "Agriculture" },
+    { "name": "Waste" },
+    { "name": "Transportation" },
+    { "name": "Other Fuel Combustion" },
+    { "name": "Fugitive Emissions" },
+    { "name": "Road" },
+    { "name": "Air" },
+    { "name": "Rail - Ship and Other Transport" },
+    { "name": "Residential Buildings" },
+    { "name": "Commercial Buildings" },
+    { "name": "Unallocated Fuel Combustion" },
+    { "name": "Iron and Steel" },
+    { "name": "Aluminium Non-Ferrous Metals" },
+    { "name": "Machinery" },
+    { "name": "Pulp - Paper and Printing" },
+    { "name": "Food and Tobacco" },
+    { "name": "Chemicals" },
+    { "name": "Cement" },
+    { "name": "Other Industry" },
+    { "name": "T and D Losses" },
+    { "name": "Coal Mining" },
+    { "name": "Oil and Gas Processing" },
+    { "name": "Deforestation" },
+    { "name": "Harvest / Management" },
+    { "name": "Agricultural Energy Use" },
+    { "name": "Agriculture Soils" },
+    { "name": "Livestock and Manure" },
+    { "name": "Rice Cultivation" },
+    { "name": "Other Agriculture" },
+    { "name": "Landfills" },
+    { "name": "Waste water - Other Waste" },
+    { "name": "Carbon Dioxide" },
+    { "name": "HFCs - PFCs" },
+    { "name": "Methane" },
+    { "name": "Nitrous Oxide" }
+  ],
+  "links": [
+    { "source": "Agricultural Energy Use", "target": "Carbon Dioxide", "value": "1.4" },
+    { "source": "Agriculture", "target": "Agriculture Soils", "value": "5.2" },
+    { "source": "Agriculture", "target": "Livestock and Manure", "value": "5.4" },
+    { "source": "Agriculture", "target": "Other Agriculture", "value": "1.7" },
+    { "source": "Agriculture", "target": "Rice Cultivation", "value": "1.5" },
+    { "source": "Agriculture Soils", "target": "Nitrous Oxide", "value": "5.2" },
+    { "source": "Air", "target": "Carbon Dioxide", "value": "1.7" },
+    { "source": "Aluminium Non-Ferrous Metals", "target": "Carbon Dioxide", "value": "1.0" },
+    { "source": "Aluminium Non-Ferrous Metals", "target": "HFCs - PFCs", "value": "0.2" },
+    { "source": "Cement", "target": "Carbon Dioxide", "value": "5.0" },
+    { "source": "Chemicals", "target": "Carbon Dioxide", "value": "3.4" },
+    { "source": "Chemicals", "target": "HFCs - PFCs", "value": "0.5" },
+    { "source": "Chemicals", "target": "Nitrous Oxide", "value": "0.2" },
+    { "source": "Coal Mining", "target": "Carbon Dioxide", "value": "0.1" },
+    { "source": "Coal Mining", "target": "Methane", "value": "1.2" },
+    { "source": "Commercial Buildings", "target": "Carbon Dioxide", "value": "6.3" },
+    { "source": "Deforestation", "target": "Carbon Dioxide", "value": "10.9" },
+    { "source": "Electricity and heat", "target": "Agricultural Energy Use", "value": "0.4" },
+    { "source": "Electricity and heat", "target": "Aluminium Non-Ferrous Metals", "value": "0.4" },
+    { "source": "Electricity and heat", "target": "Cement", "value": "0.3" },
+    { "source": "Electricity and heat", "target": "Chemicals", "value": "1.3" },
+    { "source": "Electricity and heat", "target": "Commercial Buildings", "value": "5.0" },
+    { "source": "Electricity and heat", "target": "Food and Tobacco", "value": "0.5" },
+    { "source": "Electricity and heat", "target": "Iron and Steel", "value": "1.0" },
+    { "source": "Electricity and heat", "target": "Machinery", "value": "1.0" },
+    { "source": "Electricity and heat", "target": "Oil and Gas Processing", "value": "0.4" },
+    { "source": "Electricity and heat", "target": "Other Industry", "value": "2.7" },
+    { "source": "Electricity and heat", "target": "Pulp - Paper and Printing", "value": "0.6" },
+    { "source": "Electricity and heat", "target": "Residential Buildings", "value": "5.2" },
+    { "source": "Electricity and heat", "target": "T and D Losses", "value": "2.2" },
+    { "source": "Electricity and heat", "target": "Unallocated Fuel Combustion", "value": "2.0" },
+    { "source": "Energy", "target": "Electricity and heat", "value": "24.9" },
+    { "source": "Energy", "target": "Fugitive Emissions", "value": "4.0" },
+    { "source": "Energy", "target": "Industry", "value": "14.7" },
+    { "source": "Energy", "target": "Other Fuel Combustion", "value": "8.6" },
+    { "source": "Energy", "target": "Transportation", "value": "14.3" },
+    { "source": "Food and Tobacco", "target": "Carbon Dioxide", "value": "1.0" },
+    { "source": "Fugitive Emissions", "target": "Coal Mining", "value": "1.3" },
+    { "source": "Fugitive Emissions", "target": "Oil and Gas Processing", "value": "3.2" },
+    { "source": "Harvest / Management", "target": "Carbon Dioxide", "value": "1.3" },
+    { "source": "Industrial Processes", "target": "Aluminium Non-Ferrous Metals", "value": "0.4" },
+    { "source": "Industrial Processes", "target": "Cement", "value": "2.8" },
+    { "source": "Industrial Processes", "target": "Chemicals", "value": "1.4" },
+    { "source": "Industrial Processes", "target": "Other Industry", "value": "0.5" },
+    { "source": "Industry", "target": "Aluminium Non-Ferrous Metals", "value": "0.4" },
+    { "source": "Industry", "target": "Cement", "value": "1.9" },
+    { "source": "Industry", "target": "Chemicals", "value": "1.4" },
+    { "source": "Industry", "target": "Food and Tobacco", "value": "0.5" },
+    { "source": "Industry", "target": "Iron and Steel", "value": "3.0" },
+    { "source": "Industry", "target": "Oil and Gas Processing", "value": "2.8" },
+    { "source": "Industry", "target": "Other Industry", "value": "3.8" },
+    { "source": "Industry", "target": "Pulp - Paper and Printing", "value": "0.5" },
+    { "source": "Iron and Steel", "target": "Carbon Dioxide", "value": "4.0" },
+    { "source": "Land Use Change", "target": "Deforestation", "value": "10.9" },
+    { "source": "Land Use Change", "target": "Harvest / Management", "value": "1.3" },
+    { "source": "Landfills", "target": "Methane", "value": "1.7" },
+    { "source": "Livestock and Manure", "target": "Methane", "value": "5.1" },
+    { "source": "Livestock and Manure", "target": "Nitrous Oxide", "value": "0.3" },
+    { "source": "Machinery", "target": "Carbon Dioxide", "value": "1.0" },
+    { "source": "Oil and Gas Processing", "target": "Carbon Dioxide", "value": "3.6" },
+    { "source": "Oil and Gas Processing", "target": "Methane", "value": "2.8" },
+    { "source": "Other Agriculture", "target": "Methane", "value": "1.4" },
+    { "source": "Other Agriculture", "target": "Nitrous Oxide", "value": "0.3" },
+    { "source": "Other Fuel Combustion", "target": "Agricultural Energy Use", "value": "1.0" },
+    { "source": "Other Fuel Combustion", "target": "Commercial Buildings", "value": "1.3" },
+    { "source": "Other Fuel Combustion", "target": "Residential Buildings", "value": "5.0" },
+    { "source": "Other Fuel Combustion", "target": "Unallocated Fuel Combustion", "value": "1.8" },
+    { "source": "Other Industry", "target": "Carbon Dioxide", "value": "6.6" },
+    { "source": "Other Industry", "target": "HFCs - PFCs", "value": "0.4" },
+    { "source": "Pulp - Paper and Printing", "target": "Carbon Dioxide", "value": "1.1" },
+    { "source": "Rail - Ship and Other Transport", "target": "Carbon Dioxide", "value": "2.5" },
+    { "source": "Residential Buildings", "target": "Carbon Dioxide", "value": "10.2" },
+    { "source": "Rice Cultivation", "target": "Methane", "value": "1.5" },
+    { "source": "Road", "target": "Carbon Dioxide", "value": "10.5" },
+    { "source": "T and D Losses", "target": "Carbon Dioxide", "value": "2.2" },
+    { "source": "Transportation", "target": "Air", "value": "1.7" },
+    { "source": "Transportation", "target": "Rail - Ship and Other Transport", "value": "2.5" },
+    { "source": "Transportation", "target": "Road", "value": "10.5" },
+    { "source": "Unallocated Fuel Combustion", "target": "Carbon Dioxide", "value": "3.0" },
+    { "source": "Unallocated Fuel Combustion", "target": "Methane", "value": "0.4" },
+    { "source": "Unallocated Fuel Combustion", "target": "Nitrous Oxide", "value": "0.4" },
+    { "source": "Waste", "target": "Landfills", "value": "1.7" },
+    { "source": "Waste", "target": "Waste water - Other Waste", "value": "1.5" },
+    { "source": "Waste water - Other Waste", "target": "Methane", "value": "1.2" },
+    { "source": "Waste water - Other Waste", "target": "Nitrous Oxide", "value": "0.3" }
+  ]
+}
diff --git a/packages/layerchart/static/data/examples/graph/simple.json b/packages/layerchart/static/data/examples/graph/simple.json
new file mode 100644
index 000000000..452635b64
--- /dev/null
+++ b/packages/layerchart/static/data/examples/graph/simple.json
@@ -0,0 +1,31 @@
+{
+  "nodes": [
+    { "id": "A1" },
+    { "id": "A2" },
+    { "id": "A3" },
+    { "id": "B1" },
+    { "id": "B2" },
+    { "id": "B3" },
+    { "id": "B4" },
+    { "id": "C1" },
+    { "id": "C2" },
+    { "id": "C3" },
+    { "id": "D1" },
+    { "id": "D2" }
+  ],
+  "links": [
+    { "source": "A1", "target": "B1", "value": 27 },
+    { "source": "A1", "target": "B2", "value": 9 },
+    { "source": "A2", "target": "B2", "value": 5 },
+    { "source": "A2", "target": "B3", "value": 11 },
+    { "source": "A3", "target": "B2", "value": 12 },
+    { "source": "A3", "target": "B4", "value": 7 },
+    { "source": "B1", "target": "C1", "value": 13 },
+    { "source": "B1", "target": "C2", "value": 10 },
+    { "source": "B4", "target": "C2", "value": 5 },
+    { "source": "B4", "target": "C3", "value": 2 },
+    { "source": "B1", "target": "D1", "value": 4 },
+    { "source": "C3", "target": "D1", "value": 1 },
+    { "source": "C3", "target": "D2", "value": 1 }
+  ]
+}
diff --git a/packages/layerchart/static/data/examples/graph/trade-volume.json b/packages/layerchart/static/data/examples/graph/trade-volume.json
new file mode 100644
index 000000000..5bfb63a61
--- /dev/null
+++ b/packages/layerchart/static/data/examples/graph/trade-volume.json
@@ -0,0 +1,168 @@
+{
+  "nodes": [
+    {
+      "label": "Netherlands"
+    },
+    {
+      "label": "Canada"
+    },
+    {
+      "label": "Belgium"
+    },
+    {
+      "label": "Italy"
+    },
+    {
+      "label": "Mexico"
+    },
+    {
+      "label": "Russia"
+    },
+    {
+      "label": "Spain"
+    },
+    {
+      "label": "South Korea"
+    },
+    {
+      "label": "Germany"
+    },
+    {
+      "label": "China"
+    },
+    {
+      "label": "European Union"
+    },
+    {
+      "label": "Japan"
+    },
+    {
+      "label": "United Kingdom"
+    },
+    {
+      "label": "United States"
+    },
+    {
+      "label": "France"
+    },
+    {
+      "label": "Hong Kong"
+    },
+    {
+      "label": "Switzerland"
+    },
+    {
+      "label": "Austria"
+    },
+    {
+      "label": "Sweden"
+    }
+  ],
+  "links": [
+    {
+      "from": "Netherlands",
+      "to": "European Union",
+      "value": 798744
+    },
+    {
+      "from": "Germany",
+      "to": "European Union",
+      "value": 1468990
+    },
+    {
+      "from": "European Union",
+      "to": "France",
+      "value": 745931
+    },
+    {
+      "from": "European Union",
+      "to": "United States",
+      "value": 660541
+    },
+    {
+      "from": "Canada",
+      "to": "United States",
+      "value": 594546
+    },
+    {
+      "from": "Belgium",
+      "to": "European Union",
+      "value": 628796
+    },
+    {
+      "from": "China",
+      "to": "Hong Kong",
+      "value": 400571
+    },
+    {
+      "from": "China",
+      "to": "United States",
+      "value": 526454
+    },
+    {
+      "from": "European Union",
+      "to": "United Kingdom",
+      "value": 520318
+    },
+    {
+      "from": "China",
+      "to": "European Union",
+      "value": 560536
+    },
+    {
+      "from": "Italy",
+      "to": "European Union",
+      "value": 539556
+    },
+    {
+      "from": "Mexico",
+      "to": "United States",
+      "value": 492715
+    },
+    {
+      "from": "Russia",
+      "to": "European Union",
+      "value": 385778
+    },
+    {
+      "from": "Spain",
+      "to": "European Union",
+      "value": 365191
+    },
+    {
+      "from": "China",
+      "to": "Japan",
+      "value": 312062
+    },
+    {
+      "from": "European Union",
+      "to": "Switzerland",
+      "value": 328609
+    },
+    {
+      "from": "South Korea",
+      "to": "China",
+      "value": 229073
+    },
+    {
+      "from": "European Union",
+      "to": "Austria",
+      "value": 244913
+    },
+    {
+      "from": "Japan",
+      "to": "United States",
+      "value": 206091
+    },
+    {
+      "from": "European Union",
+      "to": "Sweden",
+      "value": 204849
+    },
+    {
+      "from": "Germany",
+      "to": "United States",
+      "value": 184287
+    }
+  ]
+}
diff --git a/packages/layerchart/static/data/examples/penguins.csv b/packages/layerchart/static/data/examples/penguins.csv
new file mode 100644
index 000000000..af24f5270
--- /dev/null
+++ b/packages/layerchart/static/data/examples/penguins.csv
@@ -0,0 +1,345 @@
+species,island,bill_length_mm,bill_depth_mm,flipper_length_mm,body_mass_g,sex,year
+Adelie,Torgersen,39.1,18.7,181,3750,male,2007
+Adelie,Torgersen,39.5,17.4,186,3800,female,2007
+Adelie,Torgersen,40.3,18,195,3250,female,2007
+Adelie,Torgersen,NA,NA,NA,NA,NA,2007
+Adelie,Torgersen,36.7,19.3,193,3450,female,2007
+Adelie,Torgersen,39.3,20.6,190,3650,male,2007
+Adelie,Torgersen,38.9,17.8,181,3625,female,2007
+Adelie,Torgersen,39.2,19.6,195,4675,male,2007
+Adelie,Torgersen,34.1,18.1,193,3475,NA,2007
+Adelie,Torgersen,42,20.2,190,4250,NA,2007
+Adelie,Torgersen,37.8,17.1,186,3300,NA,2007
+Adelie,Torgersen,37.8,17.3,180,3700,NA,2007
+Adelie,Torgersen,41.1,17.6,182,3200,female,2007
+Adelie,Torgersen,38.6,21.2,191,3800,male,2007
+Adelie,Torgersen,34.6,21.1,198,4400,male,2007
+Adelie,Torgersen,36.6,17.8,185,3700,female,2007
+Adelie,Torgersen,38.7,19,195,3450,female,2007
+Adelie,Torgersen,42.5,20.7,197,4500,male,2007
+Adelie,Torgersen,34.4,18.4,184,3325,female,2007
+Adelie,Torgersen,46,21.5,194,4200,male,2007
+Adelie,Biscoe,37.8,18.3,174,3400,female,2007
+Adelie,Biscoe,37.7,18.7,180,3600,male,2007
+Adelie,Biscoe,35.9,19.2,189,3800,female,2007
+Adelie,Biscoe,38.2,18.1,185,3950,male,2007
+Adelie,Biscoe,38.8,17.2,180,3800,male,2007
+Adelie,Biscoe,35.3,18.9,187,3800,female,2007
+Adelie,Biscoe,40.6,18.6,183,3550,male,2007
+Adelie,Biscoe,40.5,17.9,187,3200,female,2007
+Adelie,Biscoe,37.9,18.6,172,3150,female,2007
+Adelie,Biscoe,40.5,18.9,180,3950,male,2007
+Adelie,Dream,39.5,16.7,178,3250,female,2007
+Adelie,Dream,37.2,18.1,178,3900,male,2007
+Adelie,Dream,39.5,17.8,188,3300,female,2007
+Adelie,Dream,40.9,18.9,184,3900,male,2007
+Adelie,Dream,36.4,17,195,3325,female,2007
+Adelie,Dream,39.2,21.1,196,4150,male,2007
+Adelie,Dream,38.8,20,190,3950,male,2007
+Adelie,Dream,42.2,18.5,180,3550,female,2007
+Adelie,Dream,37.6,19.3,181,3300,female,2007
+Adelie,Dream,39.8,19.1,184,4650,male,2007
+Adelie,Dream,36.5,18,182,3150,female,2007
+Adelie,Dream,40.8,18.4,195,3900,male,2007
+Adelie,Dream,36,18.5,186,3100,female,2007
+Adelie,Dream,44.1,19.7,196,4400,male,2007
+Adelie,Dream,37,16.9,185,3000,female,2007
+Adelie,Dream,39.6,18.8,190,4600,male,2007
+Adelie,Dream,41.1,19,182,3425,male,2007
+Adelie,Dream,37.5,18.9,179,2975,NA,2007
+Adelie,Dream,36,17.9,190,3450,female,2007
+Adelie,Dream,42.3,21.2,191,4150,male,2007
+Adelie,Biscoe,39.6,17.7,186,3500,female,2008
+Adelie,Biscoe,40.1,18.9,188,4300,male,2008
+Adelie,Biscoe,35,17.9,190,3450,female,2008
+Adelie,Biscoe,42,19.5,200,4050,male,2008
+Adelie,Biscoe,34.5,18.1,187,2900,female,2008
+Adelie,Biscoe,41.4,18.6,191,3700,male,2008
+Adelie,Biscoe,39,17.5,186,3550,female,2008
+Adelie,Biscoe,40.6,18.8,193,3800,male,2008
+Adelie,Biscoe,36.5,16.6,181,2850,female,2008
+Adelie,Biscoe,37.6,19.1,194,3750,male,2008
+Adelie,Biscoe,35.7,16.9,185,3150,female,2008
+Adelie,Biscoe,41.3,21.1,195,4400,male,2008
+Adelie,Biscoe,37.6,17,185,3600,female,2008
+Adelie,Biscoe,41.1,18.2,192,4050,male,2008
+Adelie,Biscoe,36.4,17.1,184,2850,female,2008
+Adelie,Biscoe,41.6,18,192,3950,male,2008
+Adelie,Biscoe,35.5,16.2,195,3350,female,2008
+Adelie,Biscoe,41.1,19.1,188,4100,male,2008
+Adelie,Torgersen,35.9,16.6,190,3050,female,2008
+Adelie,Torgersen,41.8,19.4,198,4450,male,2008
+Adelie,Torgersen,33.5,19,190,3600,female,2008
+Adelie,Torgersen,39.7,18.4,190,3900,male,2008
+Adelie,Torgersen,39.6,17.2,196,3550,female,2008
+Adelie,Torgersen,45.8,18.9,197,4150,male,2008
+Adelie,Torgersen,35.5,17.5,190,3700,female,2008
+Adelie,Torgersen,42.8,18.5,195,4250,male,2008
+Adelie,Torgersen,40.9,16.8,191,3700,female,2008
+Adelie,Torgersen,37.2,19.4,184,3900,male,2008
+Adelie,Torgersen,36.2,16.1,187,3550,female,2008
+Adelie,Torgersen,42.1,19.1,195,4000,male,2008
+Adelie,Torgersen,34.6,17.2,189,3200,female,2008
+Adelie,Torgersen,42.9,17.6,196,4700,male,2008
+Adelie,Torgersen,36.7,18.8,187,3800,female,2008
+Adelie,Torgersen,35.1,19.4,193,4200,male,2008
+Adelie,Dream,37.3,17.8,191,3350,female,2008
+Adelie,Dream,41.3,20.3,194,3550,male,2008
+Adelie,Dream,36.3,19.5,190,3800,male,2008
+Adelie,Dream,36.9,18.6,189,3500,female,2008
+Adelie,Dream,38.3,19.2,189,3950,male,2008
+Adelie,Dream,38.9,18.8,190,3600,female,2008
+Adelie,Dream,35.7,18,202,3550,female,2008
+Adelie,Dream,41.1,18.1,205,4300,male,2008
+Adelie,Dream,34,17.1,185,3400,female,2008
+Adelie,Dream,39.6,18.1,186,4450,male,2008
+Adelie,Dream,36.2,17.3,187,3300,female,2008
+Adelie,Dream,40.8,18.9,208,4300,male,2008
+Adelie,Dream,38.1,18.6,190,3700,female,2008
+Adelie,Dream,40.3,18.5,196,4350,male,2008
+Adelie,Dream,33.1,16.1,178,2900,female,2008
+Adelie,Dream,43.2,18.5,192,4100,male,2008
+Adelie,Biscoe,35,17.9,192,3725,female,2009
+Adelie,Biscoe,41,20,203,4725,male,2009
+Adelie,Biscoe,37.7,16,183,3075,female,2009
+Adelie,Biscoe,37.8,20,190,4250,male,2009
+Adelie,Biscoe,37.9,18.6,193,2925,female,2009
+Adelie,Biscoe,39.7,18.9,184,3550,male,2009
+Adelie,Biscoe,38.6,17.2,199,3750,female,2009
+Adelie,Biscoe,38.2,20,190,3900,male,2009
+Adelie,Biscoe,38.1,17,181,3175,female,2009
+Adelie,Biscoe,43.2,19,197,4775,male,2009
+Adelie,Biscoe,38.1,16.5,198,3825,female,2009
+Adelie,Biscoe,45.6,20.3,191,4600,male,2009
+Adelie,Biscoe,39.7,17.7,193,3200,female,2009
+Adelie,Biscoe,42.2,19.5,197,4275,male,2009
+Adelie,Biscoe,39.6,20.7,191,3900,female,2009
+Adelie,Biscoe,42.7,18.3,196,4075,male,2009
+Adelie,Torgersen,38.6,17,188,2900,female,2009
+Adelie,Torgersen,37.3,20.5,199,3775,male,2009
+Adelie,Torgersen,35.7,17,189,3350,female,2009
+Adelie,Torgersen,41.1,18.6,189,3325,male,2009
+Adelie,Torgersen,36.2,17.2,187,3150,female,2009
+Adelie,Torgersen,37.7,19.8,198,3500,male,2009
+Adelie,Torgersen,40.2,17,176,3450,female,2009
+Adelie,Torgersen,41.4,18.5,202,3875,male,2009
+Adelie,Torgersen,35.2,15.9,186,3050,female,2009
+Adelie,Torgersen,40.6,19,199,4000,male,2009
+Adelie,Torgersen,38.8,17.6,191,3275,female,2009
+Adelie,Torgersen,41.5,18.3,195,4300,male,2009
+Adelie,Torgersen,39,17.1,191,3050,female,2009
+Adelie,Torgersen,44.1,18,210,4000,male,2009
+Adelie,Torgersen,38.5,17.9,190,3325,female,2009
+Adelie,Torgersen,43.1,19.2,197,3500,male,2009
+Adelie,Dream,36.8,18.5,193,3500,female,2009
+Adelie,Dream,37.5,18.5,199,4475,male,2009
+Adelie,Dream,38.1,17.6,187,3425,female,2009
+Adelie,Dream,41.1,17.5,190,3900,male,2009
+Adelie,Dream,35.6,17.5,191,3175,female,2009
+Adelie,Dream,40.2,20.1,200,3975,male,2009
+Adelie,Dream,37,16.5,185,3400,female,2009
+Adelie,Dream,39.7,17.9,193,4250,male,2009
+Adelie,Dream,40.2,17.1,193,3400,female,2009
+Adelie,Dream,40.6,17.2,187,3475,male,2009
+Adelie,Dream,32.1,15.5,188,3050,female,2009
+Adelie,Dream,40.7,17,190,3725,male,2009
+Adelie,Dream,37.3,16.8,192,3000,female,2009
+Adelie,Dream,39,18.7,185,3650,male,2009
+Adelie,Dream,39.2,18.6,190,4250,male,2009
+Adelie,Dream,36.6,18.4,184,3475,female,2009
+Adelie,Dream,36,17.8,195,3450,female,2009
+Adelie,Dream,37.8,18.1,193,3750,male,2009
+Adelie,Dream,36,17.1,187,3700,female,2009
+Adelie,Dream,41.5,18.5,201,4000,male,2009
+Gentoo,Biscoe,46.1,13.2,211,4500,female,2007
+Gentoo,Biscoe,50,16.3,230,5700,male,2007
+Gentoo,Biscoe,48.7,14.1,210,4450,female,2007
+Gentoo,Biscoe,50,15.2,218,5700,male,2007
+Gentoo,Biscoe,47.6,14.5,215,5400,male,2007
+Gentoo,Biscoe,46.5,13.5,210,4550,female,2007
+Gentoo,Biscoe,45.4,14.6,211,4800,female,2007
+Gentoo,Biscoe,46.7,15.3,219,5200,male,2007
+Gentoo,Biscoe,43.3,13.4,209,4400,female,2007
+Gentoo,Biscoe,46.8,15.4,215,5150,male,2007
+Gentoo,Biscoe,40.9,13.7,214,4650,female,2007
+Gentoo,Biscoe,49,16.1,216,5550,male,2007
+Gentoo,Biscoe,45.5,13.7,214,4650,female,2007
+Gentoo,Biscoe,48.4,14.6,213,5850,male,2007
+Gentoo,Biscoe,45.8,14.6,210,4200,female,2007
+Gentoo,Biscoe,49.3,15.7,217,5850,male,2007
+Gentoo,Biscoe,42,13.5,210,4150,female,2007
+Gentoo,Biscoe,49.2,15.2,221,6300,male,2007
+Gentoo,Biscoe,46.2,14.5,209,4800,female,2007
+Gentoo,Biscoe,48.7,15.1,222,5350,male,2007
+Gentoo,Biscoe,50.2,14.3,218,5700,male,2007
+Gentoo,Biscoe,45.1,14.5,215,5000,female,2007
+Gentoo,Biscoe,46.5,14.5,213,4400,female,2007
+Gentoo,Biscoe,46.3,15.8,215,5050,male,2007
+Gentoo,Biscoe,42.9,13.1,215,5000,female,2007
+Gentoo,Biscoe,46.1,15.1,215,5100,male,2007
+Gentoo,Biscoe,44.5,14.3,216,4100,NA,2007
+Gentoo,Biscoe,47.8,15,215,5650,male,2007
+Gentoo,Biscoe,48.2,14.3,210,4600,female,2007
+Gentoo,Biscoe,50,15.3,220,5550,male,2007
+Gentoo,Biscoe,47.3,15.3,222,5250,male,2007
+Gentoo,Biscoe,42.8,14.2,209,4700,female,2007
+Gentoo,Biscoe,45.1,14.5,207,5050,female,2007
+Gentoo,Biscoe,59.6,17,230,6050,male,2007
+Gentoo,Biscoe,49.1,14.8,220,5150,female,2008
+Gentoo,Biscoe,48.4,16.3,220,5400,male,2008
+Gentoo,Biscoe,42.6,13.7,213,4950,female,2008
+Gentoo,Biscoe,44.4,17.3,219,5250,male,2008
+Gentoo,Biscoe,44,13.6,208,4350,female,2008
+Gentoo,Biscoe,48.7,15.7,208,5350,male,2008
+Gentoo,Biscoe,42.7,13.7,208,3950,female,2008
+Gentoo,Biscoe,49.6,16,225,5700,male,2008
+Gentoo,Biscoe,45.3,13.7,210,4300,female,2008
+Gentoo,Biscoe,49.6,15,216,4750,male,2008
+Gentoo,Biscoe,50.5,15.9,222,5550,male,2008
+Gentoo,Biscoe,43.6,13.9,217,4900,female,2008
+Gentoo,Biscoe,45.5,13.9,210,4200,female,2008
+Gentoo,Biscoe,50.5,15.9,225,5400,male,2008
+Gentoo,Biscoe,44.9,13.3,213,5100,female,2008
+Gentoo,Biscoe,45.2,15.8,215,5300,male,2008
+Gentoo,Biscoe,46.6,14.2,210,4850,female,2008
+Gentoo,Biscoe,48.5,14.1,220,5300,male,2008
+Gentoo,Biscoe,45.1,14.4,210,4400,female,2008
+Gentoo,Biscoe,50.1,15,225,5000,male,2008
+Gentoo,Biscoe,46.5,14.4,217,4900,female,2008
+Gentoo,Biscoe,45,15.4,220,5050,male,2008
+Gentoo,Biscoe,43.8,13.9,208,4300,female,2008
+Gentoo,Biscoe,45.5,15,220,5000,male,2008
+Gentoo,Biscoe,43.2,14.5,208,4450,female,2008
+Gentoo,Biscoe,50.4,15.3,224,5550,male,2008
+Gentoo,Biscoe,45.3,13.8,208,4200,female,2008
+Gentoo,Biscoe,46.2,14.9,221,5300,male,2008
+Gentoo,Biscoe,45.7,13.9,214,4400,female,2008
+Gentoo,Biscoe,54.3,15.7,231,5650,male,2008
+Gentoo,Biscoe,45.8,14.2,219,4700,female,2008
+Gentoo,Biscoe,49.8,16.8,230,5700,male,2008
+Gentoo,Biscoe,46.2,14.4,214,4650,NA,2008
+Gentoo,Biscoe,49.5,16.2,229,5800,male,2008
+Gentoo,Biscoe,43.5,14.2,220,4700,female,2008
+Gentoo,Biscoe,50.7,15,223,5550,male,2008
+Gentoo,Biscoe,47.7,15,216,4750,female,2008
+Gentoo,Biscoe,46.4,15.6,221,5000,male,2008
+Gentoo,Biscoe,48.2,15.6,221,5100,male,2008
+Gentoo,Biscoe,46.5,14.8,217,5200,female,2008
+Gentoo,Biscoe,46.4,15,216,4700,female,2008
+Gentoo,Biscoe,48.6,16,230,5800,male,2008
+Gentoo,Biscoe,47.5,14.2,209,4600,female,2008
+Gentoo,Biscoe,51.1,16.3,220,6000,male,2008
+Gentoo,Biscoe,45.2,13.8,215,4750,female,2008
+Gentoo,Biscoe,45.2,16.4,223,5950,male,2008
+Gentoo,Biscoe,49.1,14.5,212,4625,female,2009
+Gentoo,Biscoe,52.5,15.6,221,5450,male,2009
+Gentoo,Biscoe,47.4,14.6,212,4725,female,2009
+Gentoo,Biscoe,50,15.9,224,5350,male,2009
+Gentoo,Biscoe,44.9,13.8,212,4750,female,2009
+Gentoo,Biscoe,50.8,17.3,228,5600,male,2009
+Gentoo,Biscoe,43.4,14.4,218,4600,female,2009
+Gentoo,Biscoe,51.3,14.2,218,5300,male,2009
+Gentoo,Biscoe,47.5,14,212,4875,female,2009
+Gentoo,Biscoe,52.1,17,230,5550,male,2009
+Gentoo,Biscoe,47.5,15,218,4950,female,2009
+Gentoo,Biscoe,52.2,17.1,228,5400,male,2009
+Gentoo,Biscoe,45.5,14.5,212,4750,female,2009
+Gentoo,Biscoe,49.5,16.1,224,5650,male,2009
+Gentoo,Biscoe,44.5,14.7,214,4850,female,2009
+Gentoo,Biscoe,50.8,15.7,226,5200,male,2009
+Gentoo,Biscoe,49.4,15.8,216,4925,male,2009
+Gentoo,Biscoe,46.9,14.6,222,4875,female,2009
+Gentoo,Biscoe,48.4,14.4,203,4625,female,2009
+Gentoo,Biscoe,51.1,16.5,225,5250,male,2009
+Gentoo,Biscoe,48.5,15,219,4850,female,2009
+Gentoo,Biscoe,55.9,17,228,5600,male,2009
+Gentoo,Biscoe,47.2,15.5,215,4975,female,2009
+Gentoo,Biscoe,49.1,15,228,5500,male,2009
+Gentoo,Biscoe,47.3,13.8,216,4725,NA,2009
+Gentoo,Biscoe,46.8,16.1,215,5500,male,2009
+Gentoo,Biscoe,41.7,14.7,210,4700,female,2009
+Gentoo,Biscoe,53.4,15.8,219,5500,male,2009
+Gentoo,Biscoe,43.3,14,208,4575,female,2009
+Gentoo,Biscoe,48.1,15.1,209,5500,male,2009
+Gentoo,Biscoe,50.5,15.2,216,5000,female,2009
+Gentoo,Biscoe,49.8,15.9,229,5950,male,2009
+Gentoo,Biscoe,43.5,15.2,213,4650,female,2009
+Gentoo,Biscoe,51.5,16.3,230,5500,male,2009
+Gentoo,Biscoe,46.2,14.1,217,4375,female,2009
+Gentoo,Biscoe,55.1,16,230,5850,male,2009
+Gentoo,Biscoe,44.5,15.7,217,4875,NA,2009
+Gentoo,Biscoe,48.8,16.2,222,6000,male,2009
+Gentoo,Biscoe,47.2,13.7,214,4925,female,2009
+Gentoo,Biscoe,NA,NA,NA,NA,NA,2009
+Gentoo,Biscoe,46.8,14.3,215,4850,female,2009
+Gentoo,Biscoe,50.4,15.7,222,5750,male,2009
+Gentoo,Biscoe,45.2,14.8,212,5200,female,2009
+Gentoo,Biscoe,49.9,16.1,213,5400,male,2009
+Chinstrap,Dream,46.5,17.9,192,3500,female,2007
+Chinstrap,Dream,50,19.5,196,3900,male,2007
+Chinstrap,Dream,51.3,19.2,193,3650,male,2007
+Chinstrap,Dream,45.4,18.7,188,3525,female,2007
+Chinstrap,Dream,52.7,19.8,197,3725,male,2007
+Chinstrap,Dream,45.2,17.8,198,3950,female,2007
+Chinstrap,Dream,46.1,18.2,178,3250,female,2007
+Chinstrap,Dream,51.3,18.2,197,3750,male,2007
+Chinstrap,Dream,46,18.9,195,4150,female,2007
+Chinstrap,Dream,51.3,19.9,198,3700,male,2007
+Chinstrap,Dream,46.6,17.8,193,3800,female,2007
+Chinstrap,Dream,51.7,20.3,194,3775,male,2007
+Chinstrap,Dream,47,17.3,185,3700,female,2007
+Chinstrap,Dream,52,18.1,201,4050,male,2007
+Chinstrap,Dream,45.9,17.1,190,3575,female,2007
+Chinstrap,Dream,50.5,19.6,201,4050,male,2007
+Chinstrap,Dream,50.3,20,197,3300,male,2007
+Chinstrap,Dream,58,17.8,181,3700,female,2007
+Chinstrap,Dream,46.4,18.6,190,3450,female,2007
+Chinstrap,Dream,49.2,18.2,195,4400,male,2007
+Chinstrap,Dream,42.4,17.3,181,3600,female,2007
+Chinstrap,Dream,48.5,17.5,191,3400,male,2007
+Chinstrap,Dream,43.2,16.6,187,2900,female,2007
+Chinstrap,Dream,50.6,19.4,193,3800,male,2007
+Chinstrap,Dream,46.7,17.9,195,3300,female,2007
+Chinstrap,Dream,52,19,197,4150,male,2007
+Chinstrap,Dream,50.5,18.4,200,3400,female,2008
+Chinstrap,Dream,49.5,19,200,3800,male,2008
+Chinstrap,Dream,46.4,17.8,191,3700,female,2008
+Chinstrap,Dream,52.8,20,205,4550,male,2008
+Chinstrap,Dream,40.9,16.6,187,3200,female,2008
+Chinstrap,Dream,54.2,20.8,201,4300,male,2008
+Chinstrap,Dream,42.5,16.7,187,3350,female,2008
+Chinstrap,Dream,51,18.8,203,4100,male,2008
+Chinstrap,Dream,49.7,18.6,195,3600,male,2008
+Chinstrap,Dream,47.5,16.8,199,3900,female,2008
+Chinstrap,Dream,47.6,18.3,195,3850,female,2008
+Chinstrap,Dream,52,20.7,210,4800,male,2008
+Chinstrap,Dream,46.9,16.6,192,2700,female,2008
+Chinstrap,Dream,53.5,19.9,205,4500,male,2008
+Chinstrap,Dream,49,19.5,210,3950,male,2008
+Chinstrap,Dream,46.2,17.5,187,3650,female,2008
+Chinstrap,Dream,50.9,19.1,196,3550,male,2008
+Chinstrap,Dream,45.5,17,196,3500,female,2008
+Chinstrap,Dream,50.9,17.9,196,3675,female,2009
+Chinstrap,Dream,50.8,18.5,201,4450,male,2009
+Chinstrap,Dream,50.1,17.9,190,3400,female,2009
+Chinstrap,Dream,49,19.6,212,4300,male,2009
+Chinstrap,Dream,51.5,18.7,187,3250,male,2009
+Chinstrap,Dream,49.8,17.3,198,3675,female,2009
+Chinstrap,Dream,48.1,16.4,199,3325,female,2009
+Chinstrap,Dream,51.4,19,201,3950,male,2009
+Chinstrap,Dream,45.7,17.3,193,3600,female,2009
+Chinstrap,Dream,50.7,19.7,203,4050,male,2009
+Chinstrap,Dream,42.5,17.3,187,3350,female,2009
+Chinstrap,Dream,52.2,18.8,197,3450,male,2009
+Chinstrap,Dream,45.2,16.6,191,3250,female,2009
+Chinstrap,Dream,49.3,19.9,203,4050,male,2009
+Chinstrap,Dream,50.2,18.8,202,3800,male,2009
+Chinstrap,Dream,45.6,19.4,194,3525,female,2009
+Chinstrap,Dream,51.9,19.5,206,3950,male,2009
+Chinstrap,Dream,46.8,16.5,189,3650,female,2009
+Chinstrap,Dream,45.7,17,195,3650,female,2009
+Chinstrap,Dream,55.8,19.8,207,4000,male,2009
+Chinstrap,Dream,43.5,18.1,202,3400,female,2009
+Chinstrap,Dream,49.6,18.2,193,3775,male,2009
+Chinstrap,Dream,50.8,19,210,4100,male,2009
+Chinstrap,Dream,50.2,18.7,198,3775,female,2009
\ No newline at end of file
diff --git a/packages/layerchart/static/data/examples/penguins.d.ts b/packages/layerchart/static/data/examples/penguins.d.ts
new file mode 100644
index 000000000..61e70451d
--- /dev/null
+++ b/packages/layerchart/static/data/examples/penguins.d.ts
@@ -0,0 +1,10 @@
+export type PenguinsData = {
+  species: string;
+  island: string;
+  bill_length_mm: number | 'NA';
+  bill_depth_mm: number | 'NA';
+  flipper_length_mm: number | 'NA';
+  body_mass_g: number | 'NA';
+  sex: 'male' | 'female' | 'NA';
+  year: number;
+}[];
diff --git a/packages/layerchart/static/data/examples/world-population-demographics.csv b/packages/layerchart/static/data/examples/world-population-demographics.csv
new file mode 100644
index 000000000..c7ccf5a79
--- /dev/null
+++ b/packages/layerchart/static/data/examples/world-population-demographics.csv
@@ -0,0 +1,22 @@
+age,male,female
+0-4,337082467,319557714
+5-9,351715561,331015496
+10-14,346898098,325046485
+15-19,328189555,307629576
+20-24,313191215,294184526
+25-29,304421477,287497451
+30-34,308206126,294461443
+35-39,293650660,283742580
+40-44,264954566,258134000
+45-49,238892693,235655907
+50-54,230886182,231469447
+55-59,204396487,210274344
+60-64,162559789,173807303
+65-69,135678685,152556237
+70-74,99662458,119189625
+75-79,61653088,78620257
+80-84,36107650,52173305
+85-89,17564615,30311032
+90-94,5956267,12939489
+95-99,1189572,3510425
+100+,130480,547105
diff --git a/packages/layerchart/static/data/examples/world-population-demographics.d.ts b/packages/layerchart/static/data/examples/world-population-demographics.d.ts
new file mode 100644
index 000000000..cd9d8155f
--- /dev/null
+++ b/packages/layerchart/static/data/examples/world-population-demographics.d.ts
@@ -0,0 +1,5 @@
+export type WorldPopulationDemographicsData = {
+  age: string;
+  male: number;
+  female: number;
+}[];
diff --git a/packages/layerchart/tailwind.config.cjs b/packages/layerchart/tailwind.config.cjs
index 42e4d37d8..513003c32 100644
--- a/packages/layerchart/tailwind.config.cjs
+++ b/packages/layerchart/tailwind.config.cjs
@@ -1,7 +1,7 @@
 const colors = require('tailwindcss/colors');
 const plugin = require('tailwindcss/plugin');
 
-const svelteUx = require('svelte-ux/plugins/tailwind.cjs');
+const svelteUx = require('@layerstack/tailwind/plugin');
 
 module.exports = {
   content: ['./src/**/*.{html,svelte,md}', './node_modules/svelte-ux/**/*.{svelte,js,md}'],
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7283f7b3..819fb7e08 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,18 @@ importers:
 
   packages/layerchart:
     dependencies:
+      '@layerstack/svelte-actions':
+        specifier: ^0.0.3
+        version: 0.0.3
+      '@layerstack/svelte-stores':
+        specifier: ^0.0.3
+        version: 0.0.3
+      '@layerstack/tailwind':
+        specifier: ^0.0.5
+        version: 0.0.5
+      '@layerstack/utils':
+        specifier: ^0.0.3
+        version: 0.0.3
       d3-array:
         specifier: ^3.2.4
         version: 3.2.4
@@ -95,9 +107,6 @@ importers:
       shapefile:
         specifier: ^0.6.6
         version: 0.6.6
-      svelte-ux:
-        specifier: ^0.74.4
-        version: 0.74.4(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)
       topojson-client:
         specifier: ^3.1.0
         version: 3.1.0
@@ -233,13 +242,16 @@ importers:
         version: 4.2.18
       svelte-check:
         specifier: ^3.8.5
-        version: 3.8.5(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)
+        version: 3.8.5(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)
       svelte-json-tree:
         specifier: ^2.2.0
         version: 2.2.0(svelte@4.2.18)
       svelte-preprocess:
         specifier: ^6.0.2
-        version: 6.0.2(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
+        version: 6.0.2(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
+      svelte-ux:
+        specifier: ^0.74.4
+        version: 0.74.4(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)
       svelte2tsx:
         specifier: ^0.7.15
         version: 0.7.15(svelte@4.2.18)(typescript@5.5.4)
@@ -264,6 +276,9 @@ importers:
       vite:
         specifier: ^5.4.0
         version: 5.4.0(@types/node@22.3.0)
+      vitest:
+        specifier: ^2.0.5
+        version: 2.0.5(@types/node@22.3.0)
 
 packages:
 
@@ -706,6 +721,18 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
+  '@layerstack/svelte-actions@0.0.3':
+    resolution: {integrity: sha512-StExYf7MRSecjUrYIAIzgkw5NzvSNJJYiK+/daVAjCEyX/JS6zW541MkoFM+XfafA57jZ0Ryz70rG5wNKJJj4Q==}
+
+  '@layerstack/svelte-stores@0.0.3':
+    resolution: {integrity: sha512-tkSzYhoecDvhbev6VbCJk8vPCRSnFB44IDa3gNZ2esU0k6Fxgz1vcboGDUvGJtZ+Q8IcJV05MeGA89ViW6nBQA==}
+
+  '@layerstack/tailwind@0.0.5':
+    resolution: {integrity: sha512-FB2r00fUXxACAh0q1MRJFEitTPBdavK1HPs/PbgTkaKHVu/2uF8coKhTFE/cUnYA7qxHgpt1lFvlzo1twK3IYg==}
+
+  '@layerstack/utils@0.0.3':
+    resolution: {integrity: sha512-OmqtoBsC8Xfp2lYUDBp05kLrEc5jNkLmVFSOWlrs5p5lFG9JemkQZOhdBN6JwubcaQGwOzrflJ4QeSFC5PAd2A==}
+
   '@manypkg/find-root@1.1.0':
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
 
@@ -1013,6 +1040,24 @@ packages:
   '@types/unist@3.0.2':
     resolution: {integrity: sha512-dqId9J8K/vGi5Zr7oo212BGii5m3q5Hxlkwy3WpYuKPklmBEvsbMYYyLxAQpSffdLl/gdW0XUpKWFvYmyoWCoQ==}
 
+  '@vitest/expect@2.0.5':
+    resolution: {integrity: sha512-yHZtwuP7JZivj65Gxoi8upUN2OzHTi3zVfjwdpu2WrvCZPLwsJ2Ey5ILIPccoW23dd/zQBlJ4/dhi7DWNyXCpA==}
+
+  '@vitest/pretty-format@2.0.5':
+    resolution: {integrity: sha512-h8k+1oWHfwTkyTkb9egzwNMfJAEx4veaPSnMeKbVSjp4euqGSbQlm5+6VHwTr7u4FJslVVsUG5nopCaAYdOmSQ==}
+
+  '@vitest/runner@2.0.5':
+    resolution: {integrity: sha512-TfRfZa6Bkk9ky4tW0z20WKXFEwwvWhRY+84CnSEtq4+3ZvDlJyY32oNTJtM7AW9ihW90tX/1Q78cb6FjoAs+ig==}
+
+  '@vitest/snapshot@2.0.5':
+    resolution: {integrity: sha512-SgCPUeDFLaM0mIUHfaArq8fD2WbaXG/zVXjRupthYfYGzc8ztbFbu6dUNOblBG7XLMR1kEhS/DNnfCZ2IhdDew==}
+
+  '@vitest/spy@2.0.5':
+    resolution: {integrity: sha512-c/jdthAhvJdpfVuaexSrnawxZz6pywlTPe84LUB2m/4t3rl2fTo9NFGBG4oWgaD+FTgDDV8hJ/nibT7IfH3JfA==}
+
+  '@vitest/utils@2.0.5':
+    resolution: {integrity: sha512-d8HKbqIcya+GR67mkZbrzhS5kKhtp8dQLcmRZLGTscGVg7yImT82cIrhtn2L8+VujWcy6KZweApgNmPsTAO/UQ==}
+
   acorn-walk@8.3.3:
     resolution: {integrity: sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==}
     engines: {node: '>=0.4.0'}
@@ -1077,6 +1122,10 @@ packages:
   as-table@1.0.55:
     resolution: {integrity: sha512-xvsWESUJn0JN421Xb9MQw6AsMHRCUknCe0Wjlxvjud80mU4E6hQf1A6NzQKcYNmYw62MfzEtXc+badstZP3JpQ==}
 
+  assertion-error@2.0.1:
+    resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
+    engines: {node: '>=12'}
+
   autoprefixer@10.4.20:
     resolution: {integrity: sha512-XY25y5xSv/wEoqzDyXXME4AFfkZI0P23z6Fs3YgymDnKJkCGOnkL0iTxCa85UTqaSgfcqyf3UA6+c7wUvx/16g==}
     engines: {node: ^10 || ^12 || >=14}
@@ -1128,6 +1177,10 @@ packages:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
     engines: {node: '>=6'}
 
+  cac@6.7.14:
+    resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==}
+    engines: {node: '>=8'}
+
   camelcase-css@2.0.1:
     resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
     engines: {node: '>= 6'}
@@ -1138,6 +1191,10 @@ packages:
   capnp-ts@0.7.0:
     resolution: {integrity: sha512-XKxXAC3HVPv7r674zP0VC3RTXz+/JKhfyw94ljvF80yynK6VkTnqE3jMuN8b3dUVmmc43TjyxjW4KTsmB3c86g==}
 
+  chai@5.1.1:
+    resolution: {integrity: sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==}
+    engines: {node: '>=12'}
+
   chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
     engines: {node: '>=4'}
@@ -1145,6 +1202,10 @@ packages:
   chardet@0.7.0:
     resolution: {integrity: sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==}
 
+  check-error@2.1.1:
+    resolution: {integrity: sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==}
+    engines: {node: '>= 16'}
+
   chokidar@3.6.0:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
@@ -1360,6 +1421,10 @@ packages:
   dedent-js@1.0.1:
     resolution: {integrity: sha512-OUepMozQULMLUmhxS95Vudo0jb0UchLimi3+pQ2plj61Fcy8axbP9hbiD4Sz6DPqn6XG3kfmziVfQ1rSys5AJQ==}
 
+  deep-eql@5.0.2:
+    resolution: {integrity: sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==}
+    engines: {node: '>=6'}
+
   deepmerge@4.3.1:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
@@ -1456,6 +1521,10 @@ packages:
   estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
 
+  execa@8.0.1:
+    resolution: {integrity: sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==}
+    engines: {node: '>=16.17'}
+
   exit-hook@2.2.1:
     resolution: {integrity: sha512-eNTPlAD67BmP31LDINZ3U7HSF8l57TxOY2PmBJ1shpCvpnxBF93mWCE8YHBnXs8qiUZJc9WDcWIeC3a2HIAMfw==}
     engines: {node: '>=6'}
@@ -1525,9 +1594,16 @@ packages:
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
+  get-func-name@2.0.2:
+    resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
+
   get-source@2.0.12:
     resolution: {integrity: sha512-X5+4+iD+HoSeEED+uwrQ07BOQr0kEDFMVqqpBuI+RaZBpBpHCuXxo70bjar6f0b0u/DQJsJ7ssurpP0V60Az+w==}
 
+  get-stream@8.0.1:
+    resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
+    engines: {node: '>=16'}
+
   github-slugger@2.0.0:
     resolution: {integrity: sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==}
 
@@ -1585,6 +1661,10 @@ packages:
   human-id@1.0.2:
     resolution: {integrity: sha512-UNopramDEhHJD+VR+ehk8rOslwSfByxPIZyJRfV739NDhN5LF1fa1MqnzKm2lGTQRjNrjK19Q5fhkgIfjlVUKw==}
 
+  human-signals@5.0.0:
+    resolution: {integrity: sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==}
+    engines: {node: '>=16.17.0'}
+
   iconv-lite@0.4.24:
     resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==}
     engines: {node: '>=0.10.0'}
@@ -1651,6 +1731,10 @@ packages:
   is-reference@3.0.2:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
 
+  is-stream@3.0.0:
+    resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   is-subdir@1.2.0:
     resolution: {integrity: sha512-2AT6j+gXe/1ueqbW6fLZJiIw3F8iXGJtt0yDrZaBhAZEG1raiTxKWU+IPqMCzQAXOUCKdA4UDMgacKH25XG2Cw==}
     engines: {node: '>=4'}
@@ -1731,6 +1815,9 @@ packages:
   lodash.startcase@4.4.0:
     resolution: {integrity: sha512-+WKqsK294HMSc2jEbNgpHpd0JfIBhp7rEV4aqXWqFr6AlXov+SlcgB1Fv01y2kGe3Gc8nMW7VA0SrGuSkRfIEg==}
 
+  loupe@3.1.1:
+    resolution: {integrity: sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==}
+
   lower-case@2.0.2:
     resolution: {integrity: sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==}
 
@@ -1766,6 +1853,9 @@ packages:
     peerDependencies:
       svelte: ^3.56.0 || ^4.0.0 || ^5.0.0-next.120
 
+  merge-stream@2.0.0:
+    resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
+
   merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1783,6 +1873,10 @@ packages:
     engines: {node: '>=10.0.0'}
     hasBin: true
 
+  mimic-fn@4.0.0:
+    resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
+    engines: {node: '>=12'}
+
   min-indent@1.0.1:
     resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==}
     engines: {node: '>=4'}
@@ -1867,6 +1961,10 @@ packages:
     resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==}
     engines: {node: '>=0.10.0'}
 
+  npm-run-path@5.3.0:
+    resolution: {integrity: sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+
   object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
@@ -1878,6 +1976,10 @@ packages:
   once@1.4.0:
     resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
 
+  onetime@6.0.0:
+    resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
+    engines: {node: '>=12'}
+
   os-tmpdir@1.0.2:
     resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
     engines: {node: '>=0.10.0'}
@@ -1931,6 +2033,10 @@ packages:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
 
+  path-key@4.0.0:
+    resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
+    engines: {node: '>=12'}
+
   path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
 
@@ -1955,6 +2061,10 @@ packages:
   pathe@1.1.2:
     resolution: {integrity: sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==}
 
+  pathval@2.0.0:
+    resolution: {integrity: sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==}
+    engines: {node: '>= 14.16'}
+
   periscopic@3.1.0:
     resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==}
 
@@ -2005,24 +2115,6 @@ packages:
       ts-node:
         optional: true
 
-  postcss-load-config@6.0.1:
-    resolution: {integrity: sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==}
-    engines: {node: '>= 18'}
-    peerDependencies:
-      jiti: '>=1.21.0'
-      postcss: '>=8.0.9'
-      tsx: ^4.8.1
-      yaml: ^2.4.2
-    peerDependenciesMeta:
-      jiti:
-        optional: true
-      postcss:
-        optional: true
-      tsx:
-        optional: true
-      yaml:
-        optional: true
-
   postcss-nested@6.2.0:
     resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==}
     engines: {node: '>=12.0'}
@@ -2222,6 +2314,9 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  siginfo@2.0.0:
+    resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
+
   signal-exit@3.0.7:
     resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==}
 
@@ -2265,9 +2360,15 @@ packages:
   sprintf-js@1.0.3:
     resolution: {integrity: sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==}
 
+  stackback@0.0.2:
+    resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
+
   stacktracey@2.1.8:
     resolution: {integrity: sha512-Kpij9riA+UNg7TnphqjH7/CzctQ/owJGNbFkfEeve4Z4uxT5+JapVLFXcsurIfN34gnTWZNJ/f7NMG0E8JDzTw==}
 
+  std-env@3.7.0:
+    resolution: {integrity: sha512-JPbdCEQLj1w5GilpiHAx3qJvFndqybBysA3qUOnznweH4QbNYUsW/ea8QzSrnh0vNsezMMw5bcVool8lM0gwzg==}
+
   stoppable@1.1.0:
     resolution: {integrity: sha512-KXDYZ9dszj6bzvnEMRYvxgeTHU74QBFL54XKtP3nyMuJ81CFYtABZ3bAzL2EdFUaEwJOBOgENyFj3R7oTzDyyw==}
     engines: {node: '>=4', npm: '>=6'}
@@ -2295,6 +2396,10 @@ packages:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
     engines: {node: '>=4'}
 
+  strip-final-newline@3.0.0:
+    resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
+    engines: {node: '>=12'}
+
   strip-indent@3.0.0:
     resolution: {integrity: sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==}
     engines: {node: '>=8'}
@@ -2448,6 +2553,21 @@ packages:
   tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
 
+  tinybench@2.9.0:
+    resolution: {integrity: sha512-0+DUvqWMValLmha6lr4kD8iAMK1HzV0/aKnCtWb9v9641TnP/MFb7Pc2bxoxQjTXAErryXVgUOfv2YqNllqGeg==}
+
+  tinypool@1.0.1:
+    resolution: {integrity: sha512-URZYihUbRPcGv95En+sz6MfghfIc2OJ1sv/RmhWZLouPY0/8Vo80viwPvg3dlaS9fuq7fQMEfgRRK7BBZThBEA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+
+  tinyrainbow@1.2.0:
+    resolution: {integrity: sha512-weEDEq7Z5eTHPDh4xjX789+fHfF+P8boiFB+0vbWzpbnbsEr/GRaohi/uMKxg8RZMXnl1ItAi/IUHWMsjDV7kQ==}
+    engines: {node: '>=14.0.0'}
+
+  tinyspy@3.0.0:
+    resolution: {integrity: sha512-q5nmENpTHgiPVd1cJDDc9cVoYN5x4vCvwT3FMilvKPKneCBZAxn2YWQjDF0UMcE9k0Cay1gBiDfTMU0g+mPMQA==}
+    engines: {node: '>=14.0.0'}
+
   tmp@0.0.33:
     resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
     engines: {node: '>=0.6.0'}
@@ -2533,6 +2653,11 @@ packages:
   vfile-message@2.0.4:
     resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==}
 
+  vite-node@2.0.5:
+    resolution: {integrity: sha512-LdsW4pxj0Ot69FAoXZ1yTnA9bjGohr2yNBU7QKRxpz8ITSkhuDl6h3zS/tvgz4qrNjeRnvrWeXQ8ZF7Um4W00Q==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+
   vite@5.4.0:
     resolution: {integrity: sha512-5xokfMX0PIiwCMCMb9ZJcMyh5wbBun0zUzKib+L65vAZ8GY9ePZMXxFrHbr/Kyll2+LSCY7xtERPpxkBDKngwg==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -2572,6 +2697,31 @@ packages:
       vite:
         optional: true
 
+  vitest@2.0.5:
+    resolution: {integrity: sha512-8GUxONfauuIdeSl5f9GTgVEpg5BTOlplET4WEDaeY2QBiN8wSm68vxN/tb5z405OwppfoCavnwXafiaYBC/xOA==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@edge-runtime/vm': '*'
+      '@types/node': ^18.0.0 || >=20.0.0
+      '@vitest/browser': 2.0.5
+      '@vitest/ui': 2.0.5
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@edge-runtime/vm':
+        optional: true
+      '@types/node':
+        optional: true
+      '@vitest/browser':
+        optional: true
+      '@vitest/ui':
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+
   web-vitals@4.2.3:
     resolution: {integrity: sha512-/CFAm1mNxSmOj6i0Co+iGFJ58OS4NRGVP+AWS/l509uIK5a1bSoIVaHz/ZumpHTfHSZBpgrJ+wjfpAOrTHok5Q==}
 
@@ -2594,6 +2744,11 @@ packages:
     engines: {node: '>= 8'}
     hasBin: true
 
+  why-is-node-running@2.3.0:
+    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
+    engines: {node: '>=8'}
+    hasBin: true
+
   workerd@1.20240806.0:
     resolution: {integrity: sha512-yyNtyzTMgVY0sgYijHBONqZFVXsOFGj2jDjS8MF/RbO2ZdGROvs4Hkc/9QnmqFWahE0STxXeJ1yW1yVotdF0UQ==}
     engines: {node: '>=16'}
@@ -3053,6 +3208,43 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@layerstack/svelte-actions@0.0.3':
+    dependencies:
+      '@floating-ui/dom': 1.6.10
+      '@layerstack/utils': 0.0.3
+      d3-array: 3.2.4
+      d3-scale: 4.0.2
+      date-fns: 3.6.0
+      lodash-es: 4.17.21
+
+  '@layerstack/svelte-stores@0.0.3':
+    dependencies:
+      '@layerstack/utils': 0.0.3
+      d3-array: 3.2.4
+      date-fns: 3.6.0
+      immer: 10.1.1
+      lodash-es: 4.17.21
+      zod: 3.23.8
+
+  '@layerstack/tailwind@0.0.5':
+    dependencies:
+      '@layerstack/utils': 0.0.3
+      clsx: 2.1.1
+      culori: 4.0.1
+      d3-array: 3.2.4
+      date-fns: 3.6.0
+      lodash-es: 4.17.21
+      tailwind-merge: 2.5.2
+      tailwindcss: 3.4.10
+    transitivePeerDependencies:
+      - ts-node
+
+  '@layerstack/utils@0.0.3':
+    dependencies:
+      d3-array: 3.2.4
+      date-fns: 3.6.0
+      lodash-es: 4.17.21
+
   '@manypkg/find-root@1.1.0':
     dependencies:
       '@babel/runtime': 7.24.7
@@ -3365,6 +3557,39 @@ snapshots:
 
   '@types/unist@3.0.2': {}
 
+  '@vitest/expect@2.0.5':
+    dependencies:
+      '@vitest/spy': 2.0.5
+      '@vitest/utils': 2.0.5
+      chai: 5.1.1
+      tinyrainbow: 1.2.0
+
+  '@vitest/pretty-format@2.0.5':
+    dependencies:
+      tinyrainbow: 1.2.0
+
+  '@vitest/runner@2.0.5':
+    dependencies:
+      '@vitest/utils': 2.0.5
+      pathe: 1.1.2
+
+  '@vitest/snapshot@2.0.5':
+    dependencies:
+      '@vitest/pretty-format': 2.0.5
+      magic-string: 0.30.11
+      pathe: 1.1.2
+
+  '@vitest/spy@2.0.5':
+    dependencies:
+      tinyspy: 3.0.0
+
+  '@vitest/utils@2.0.5':
+    dependencies:
+      '@vitest/pretty-format': 2.0.5
+      estree-walker: 3.0.3
+      loupe: 3.1.1
+      tinyrainbow: 1.2.0
+
   acorn-walk@8.3.3:
     dependencies:
       acorn: 8.12.1
@@ -3414,6 +3639,8 @@ snapshots:
     dependencies:
       printable-characters: 1.0.42
 
+  assertion-error@2.0.1: {}
+
   autoprefixer@10.4.20(postcss@8.4.41):
     dependencies:
       browserslist: 4.23.3
@@ -3466,6 +3693,8 @@ snapshots:
 
   builtin-modules@3.3.0: {}
 
+  cac@6.7.14: {}
+
   camelcase-css@2.0.1: {}
 
   caniuse-lite@1.0.30001651: {}
@@ -3477,6 +3706,14 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  chai@5.1.1:
+    dependencies:
+      assertion-error: 2.0.1
+      check-error: 2.1.1
+      deep-eql: 5.0.2
+      loupe: 3.1.1
+      pathval: 2.0.0
+
   chalk@2.4.2:
     dependencies:
       ansi-styles: 3.2.1
@@ -3485,6 +3722,8 @@ snapshots:
 
   chardet@0.7.0: {}
 
+  check-error@2.1.1: {}
+
   chokidar@3.6.0:
     dependencies:
       anymatch: 3.1.3
@@ -3680,6 +3919,8 @@ snapshots:
 
   dedent-js@1.0.1: {}
 
+  deep-eql@5.0.2: {}
+
   deepmerge@4.3.1: {}
 
   defu@6.1.4: {}
@@ -3790,6 +4031,18 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
 
+  execa@8.0.1:
+    dependencies:
+      cross-spawn: 7.0.3
+      get-stream: 8.0.1
+      human-signals: 5.0.0
+      is-stream: 3.0.0
+      merge-stream: 2.0.0
+      npm-run-path: 5.3.0
+      onetime: 6.0.0
+      signal-exit: 4.1.0
+      strip-final-newline: 3.0.0
+
   exit-hook@2.2.1: {}
 
   extendable-error@0.1.7: {}
@@ -3867,11 +4120,15 @@ snapshots:
 
   function-bind@1.1.2: {}
 
+  get-func-name@2.0.2: {}
+
   get-source@2.0.12:
     dependencies:
       data-uri-to-buffer: 2.0.2
       source-map: 0.6.1
 
+  get-stream@8.0.1: {}
+
   github-slugger@2.0.0: {}
 
   glob-parent@5.1.2:
@@ -3942,6 +4199,8 @@ snapshots:
 
   human-id@1.0.2: {}
 
+  human-signals@5.0.0: {}
+
   iconv-lite@0.4.24:
     dependencies:
       safer-buffer: 2.1.2
@@ -3995,6 +4254,8 @@ snapshots:
     dependencies:
       '@types/estree': 1.0.5
 
+  is-stream@3.0.0: {}
+
   is-subdir@1.2.0:
     dependencies:
       better-path-resolve: 1.0.0
@@ -4070,6 +4331,10 @@ snapshots:
 
   lodash.startcase@4.4.0: {}
 
+  loupe@3.1.1:
+    dependencies:
+      get-func-name: 2.0.2
+
   lower-case@2.0.2:
     dependencies:
       tslib: 2.6.3
@@ -4107,6 +4372,8 @@ snapshots:
       svelte: 4.2.18
       vfile-message: 2.0.4
 
+  merge-stream@2.0.0: {}
+
   merge2@1.4.1: {}
 
   micromatch@4.0.5:
@@ -4121,6 +4388,8 @@ snapshots:
 
   mime@3.0.0: {}
 
+  mimic-fn@4.0.0: {}
+
   min-indent@1.0.1: {}
 
   miniflare@3.20240806.0:
@@ -4197,6 +4466,10 @@ snapshots:
 
   normalize-range@0.1.2: {}
 
+  npm-run-path@5.3.0:
+    dependencies:
+      path-key: 4.0.0
+
   object-assign@4.1.1: {}
 
   object-hash@3.0.0: {}
@@ -4205,6 +4478,10 @@ snapshots:
     dependencies:
       wrappy: 1.0.2
 
+  onetime@6.0.0:
+    dependencies:
+      mimic-fn: 4.0.0
+
   os-tmpdir@1.0.2: {}
 
   outdent@0.5.0: {}
@@ -4246,6 +4523,8 @@ snapshots:
 
   path-key@3.1.1: {}
 
+  path-key@4.0.0: {}
+
   path-parse@1.0.7: {}
 
   path-scurry@1.11.1:
@@ -4269,6 +4548,8 @@ snapshots:
 
   pathe@1.1.2: {}
 
+  pathval@2.0.0: {}
+
   periscopic@3.1.0:
     dependencies:
       '@types/estree': 1.0.5
@@ -4308,13 +4589,6 @@ snapshots:
     optionalDependencies:
       postcss: 8.4.41
 
-  postcss-load-config@6.0.1(postcss@8.4.41):
-    dependencies:
-      lilconfig: 3.1.2
-    optionalDependencies:
-      postcss: 8.4.41
-    optional: true
-
   postcss-nested@6.2.0(postcss@8.4.41):
     dependencies:
       postcss: 8.4.41
@@ -4524,6 +4798,8 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  siginfo@2.0.0: {}
+
   signal-exit@3.0.7: {}
 
   signal-exit@4.1.0: {}
@@ -4560,11 +4836,15 @@ snapshots:
 
   sprintf-js@1.0.3: {}
 
+  stackback@0.0.2: {}
+
   stacktracey@2.1.8:
     dependencies:
       as-table: 1.0.55
       get-source: 2.0.12
 
+  std-env@3.7.0: {}
+
   stoppable@1.1.0: {}
 
   stream-source@0.3.5: {}
@@ -4591,6 +4871,8 @@ snapshots:
 
   strip-bom@3.0.0: {}
 
+  strip-final-newline@3.0.0: {}
+
   strip-indent@3.0.0:
     dependencies:
       min-indent: 1.0.1
@@ -4611,7 +4893,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  sveld@0.20.0(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41):
+  sveld@0.20.0(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41):
     dependencies:
       '@rollup/plugin-node-resolve': 13.3.0(rollup@2.79.1)
       acorn: 8.12.1
@@ -4621,7 +4903,7 @@ snapshots:
       rollup: 2.79.1
       rollup-plugin-svelte: 7.2.2(rollup@2.79.1)(svelte@4.2.18)
       svelte: 4.2.18
-      svelte-preprocess: 5.1.4(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
+      svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -4634,14 +4916,14 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@3.8.5(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18):
+  svelte-check@3.8.5(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 3.6.0
       picocolors: 1.0.1
       sade: 1.8.1
       svelte: 4.2.18
-      svelte-preprocess: 5.1.4(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
+      svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4)
       typescript: 5.5.4
     transitivePeerDependencies:
       - '@babel/core'
@@ -4662,7 +4944,7 @@ snapshots:
     dependencies:
       svelte: 4.2.18
 
-  svelte-preprocess@5.1.4(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4):
+  svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
@@ -4672,18 +4954,18 @@ snapshots:
       svelte: 4.2.18
     optionalDependencies:
       postcss: 8.4.41
-      postcss-load-config: 6.0.1(postcss@8.4.41)
+      postcss-load-config: 4.0.2(postcss@8.4.41)
       typescript: 5.5.4
 
-  svelte-preprocess@6.0.2(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4):
+  svelte-preprocess@6.0.2(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18)(typescript@5.5.4):
     dependencies:
       svelte: 4.2.18
     optionalDependencies:
       postcss: 8.4.41
-      postcss-load-config: 6.0.1(postcss@8.4.41)
+      postcss-load-config: 4.0.2(postcss@8.4.41)
       typescript: 5.5.4
 
-  svelte-ux@0.74.4(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18):
+  svelte-ux@0.74.4(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)(svelte@4.2.18):
     dependencies:
       '@floating-ui/dom': 1.6.10
       '@fortawesome/fontawesome-common-types': 6.6.0
@@ -4698,7 +4980,7 @@ snapshots:
       prism-svelte: 0.5.0
       prism-themes: 1.9.0
       prismjs: 1.29.0
-      sveld: 0.20.0(postcss-load-config@6.0.1(postcss@8.4.41))(postcss@8.4.41)
+      sveld: 0.20.0(postcss-load-config@4.0.2(postcss@8.4.41))(postcss@8.4.41)
       svelte: 4.2.18
       tailwind-merge: 2.5.2
       zod: 3.23.8
@@ -4783,6 +5065,14 @@ snapshots:
       globalyzer: 0.1.0
       globrex: 0.1.2
 
+  tinybench@2.9.0: {}
+
+  tinypool@1.0.1: {}
+
+  tinyrainbow@1.2.0: {}
+
+  tinyspy@3.0.0: {}
+
   tmp@0.0.33:
     dependencies:
       os-tmpdir: 1.0.2
@@ -4867,6 +5157,24 @@ snapshots:
       '@types/unist': 2.0.10
       unist-util-stringify-position: 2.0.3
 
+  vite-node@2.0.5(@types/node@22.3.0):
+    dependencies:
+      cac: 6.7.14
+      debug: 4.3.6
+      pathe: 1.1.2
+      tinyrainbow: 1.2.0
+      vite: 5.4.0(@types/node@22.3.0)
+    transitivePeerDependencies:
+      - '@types/node'
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   vite@5.4.0(@types/node@22.3.0):
     dependencies:
       esbuild: 0.21.5
@@ -4880,6 +5188,39 @@ snapshots:
     optionalDependencies:
       vite: 5.4.0(@types/node@22.3.0)
 
+  vitest@2.0.5(@types/node@22.3.0):
+    dependencies:
+      '@ampproject/remapping': 2.3.0
+      '@vitest/expect': 2.0.5
+      '@vitest/pretty-format': 2.0.5
+      '@vitest/runner': 2.0.5
+      '@vitest/snapshot': 2.0.5
+      '@vitest/spy': 2.0.5
+      '@vitest/utils': 2.0.5
+      chai: 5.1.1
+      debug: 4.3.6
+      execa: 8.0.1
+      magic-string: 0.30.11
+      pathe: 1.1.2
+      std-env: 3.7.0
+      tinybench: 2.9.0
+      tinypool: 1.0.1
+      tinyrainbow: 1.2.0
+      vite: 5.4.0(@types/node@22.3.0)
+      vite-node: 2.0.5(@types/node@22.3.0)
+      why-is-node-running: 2.3.0
+    optionalDependencies:
+      '@types/node': 22.3.0
+    transitivePeerDependencies:
+      - less
+      - lightningcss
+      - sass
+      - sass-embedded
+      - stylus
+      - sugarss
+      - supports-color
+      - terser
+
   web-vitals@4.2.3: {}
 
   webidl-conversions@3.0.1: {}
@@ -4902,6 +5243,11 @@ snapshots:
     dependencies:
       isexe: 2.0.0
 
+  why-is-node-running@2.3.0:
+    dependencies:
+      siginfo: 2.0.0
+      stackback: 0.0.2
+
   workerd@1.20240806.0:
     optionalDependencies:
       '@cloudflare/workerd-darwin-64': 1.20240806.0