diff --git a/docs/package.json b/docs/package.json
index 5f2eea16b..10e93cfe5 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -19,8 +19,9 @@
 		"generate:api": "tsx scripts/generate-component-api.ts",
 		"generate:screenshots": "tsx scripts/generate-screenshots.ts",
 		"generate:catalog": "tsx scripts/generate-example-catalog.ts",
+		"generate:mini-docs": "tsx scripts/generate-mini-docs.ts",
 		"generate:stackblitz": "tsx scripts/build-stackblitz-files.ts",
-		"generate:all": "pnpm generate:api && pnpm generate:screenshots && pnpm generate:catalog && pnpm generate:stackblitz"
+		"generate:all": "pnpm generate:api && pnpm generate:screenshots && pnpm generate:catalog && pnpm generate:mini-docs && pnpm generate:stackblitz"
 	},
 	"devDependencies": {
 		"@content-collections/core": "^0.11.1",
diff --git a/docs/scripts/generate-mini-docs.ts b/docs/scripts/generate-mini-docs.ts
new file mode 100644
index 000000000..cdff5164e
--- /dev/null
+++ b/docs/scripts/generate-mini-docs.ts
@@ -0,0 +1,300 @@
+/**
+ * LayerChart Mini Docs Generator
+ *
+ * This script generates mini-docs component files for all components in the layerchart library.
+ * It extracts API properties from the generated/api/*.json files.
+ * It extracts metadata from the docs/src/content/*.md files.
+ * It extracts 1st usage example from the docs/src/examples/components/*.svelte files.
+ * It trims the code to remove module exports and data export statement.
+ * It applies the appropriate indentation to the code to preserve the indentation of the code in mini-docs.
+ * It generates the mini-docs content and saves it as a svelte file in docs/src/generated/mini-docs/*.svelte.
+ * Once the components imported to the Layerchart components, you can hover over the component
+ * in the IDE to see mini docs for each component.
+ *
+ * @description
+ * Scans all .md files in docs/src/content and extracts:
+ * - Component name
+ * - Component URL
+ * - Description
+ * - Category
+ * - Layers
+ * - Related
+ * - Usage example
+ *
+ *
+ * @output
+ * Generates individual ts files in generated/mini-docs/ for each component
+ *
+ * @usage
+ * pnpm extract:mini-docs
+ *
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { toTitleCase } from '@layerstack/utils';
+import type { ComponentAPI } from '../src/lib/api-types.js';
+
+interface MiniDocsMetadata {
+	componentName: string;
+	componentUrl: string;
+	description: string;
+	category: string;
+	layers: string[];
+	related: string[];
+	exampleName: string;
+}
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const MARKDOWN_DIR = path.resolve(__dirname, '../src/content');
+const API_DIR = path.resolve(__dirname, '../src/generated/api');
+const EXAMPLES_DIR = path.resolve(__dirname, '../src/examples');
+const CATEGORIES_DIR = path.resolve(__dirname, '../src/content/components');
+const OUTPUT_DIR = path.resolve(__dirname, '../src/generated/mini-docs');
+
+// Note: Identing of template is needed to preserve indentation of the code content.
+// See https://www.youtube.com/watch?v=sY1Hqi5TENA&lc=UgyOIe4CX9hMxIywKEV4AaABAg
+const miniDocsTemplate = `
+<!--
+	@component
+	## <COMPONENT_NAME>
+
+	<DESCRIPTION>
+
+	<CATEGORY>
+
+	<LAYERS>
+
+	Full Documentation: [<COMPONENT_NAME>](<COMPONENT_URL>)
+
+	<API>
+
+	<RELATED>
+
+	<EXAMPLE>
+-->
+`;
+
+/**
+ * Get all files with a specific extension in a directory (recursively), supporting files to ignore
+ */
+export function getFilesOfType(dir: string, ext: string, ignore: string[] = []): string[] {
+	const files: string[] = [];
+	const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+	for (const entry of entries) {
+		const fullPath = path.join(dir, entry.name);
+		if (entry.isDirectory()) {
+			// Recursively scan subdirectories
+			files.push(...getFilesOfType(fullPath, ext, ignore));
+		} else if (entry.isFile() && entry.name.endsWith(ext)) {
+			// Check if file should be ignored
+			const shouldIgnore = ignore.some((i) => fullPath.includes(i));
+			if (!shouldIgnore) {
+				files.push(fullPath);
+			}
+		}
+	}
+
+	return files;
+}
+
+/**
+ * Extract component name, component URL, description, category, layers, related and usage example metadata from a markdown file
+ */
+function extractMiniDocsMetadata(filePath: string): MiniDocsMetadata {
+	const content = fs.readFileSync(filePath, 'utf-8');
+
+	const componentName = path.basename(filePath, '.md');
+	const componentUrl = `/docs/components/${componentName}`;
+
+	// Extract the description, categories, layers, and related metadatafrom the markdown file
+	const descriptionMatch = content.match(/^description:\s*(.*?)\s*$/ms);
+	const categoryMatch = content.match(/^category:\s*(.*?)\s*$/ms);
+	const layersMatch = content.match(/^layers:\s*\[(.*?)\]\s*$/ms);
+	const relatedMatch = content.match(/^related:\s*\[(.*?)\]\s*$/ms);
+	const exampleNameMatch = content.match(/^:example\{\s*name=["|'](.*?)["'].*\}$/ms);
+
+	const description = descriptionMatch?.[1]?.trim() || '';
+	const category = toTitleCase(categoryMatch?.[1]?.trim() || '');
+	const layers = layersMatch?.[1]?.split(',').map((l) => l.trim()) || [];
+	const related = relatedMatch?.[1]?.split(',').map((r) => r.trim()) || [];
+	const exampleName = exampleNameMatch?.[1]?.trim() || '';
+
+	return { componentName, componentUrl, description, category, layers, related, exampleName };
+}
+
+/**
+ * Trim code to remove module exports and data export statement
+ * Note indentation included because it is required to preserve the indentation of the code in mini-docs
+ */
+function trimCode(code: string, indentLevel: number = 1): string {
+	return code
+		.replace(/<script\s+module>[\s\S]*?<\/script>/g, '') /* remove module exports section */
+		.replace(
+			/\n+\s*export \{ data \};\s*\n+\s*<\/script>/gm,
+			'\n</script>'
+		) /* remove data export statement */
+		.replaceAll(
+			/\n(?=.)/g,
+			indentLevel > 0 ? '\n' + '\t'.repeat(indentLevel) : '\n'
+		) /* apply indent only to lines with content (postiive lookahead)*/
+		.trim();
+}
+
+/**
+ * Get URL for component documentation page
+ */
+function getComponentUrl(component: string): string {
+	return `/docs/components/${component}`;
+}
+
+/**
+ * Main function
+ */
+function main() {
+	console.warn(
+		'WARNING: This script assumes API files have already been generated by the generate-component-api.ts script.'
+	);
+	console.log('\n\nExtracting component metadata from markdown files...');
+
+	const mdFiles = getFilesOfType(MARKDOWN_DIR, '.md', ['async', 'promise', 'source-plugin']);
+	console.log(`\nFound ${mdFiles.length} markdown files`);
+
+	const mdMetadata: MiniDocsMetadata[] = [];
+
+	for (const filePath of mdFiles) {
+		const mdName = path.basename(filePath, '.md');
+		console.log(`Processing ${mdName}...`);
+
+		const metadata = extractMiniDocsMetadata(filePath);
+		mdMetadata.push(metadata);
+	}
+
+	// Sort by component name
+	mdMetadata.sort((a, b) => a.componentName.localeCompare(b.componentName));
+
+	console.log('\nLoading corresponding component APIs from generated JSON files...');
+
+	const apiFiles = getFilesOfType(API_DIR, '.json');
+	console.log(`Found ${apiFiles.length} API files\n`);
+
+	const apis: ComponentAPI[] = [];
+
+	for (const filePath of apiFiles) {
+		const componentName = path.basename(filePath, '.json');
+		if (componentName === 'index') continue;
+		console.log(`Loading API for ${componentName}...`);
+
+		try {
+			const apiContent = fs.readFileSync(filePath, 'utf-8');
+			const api: ComponentAPI = JSON.parse(apiContent);
+			apis.push(api);
+			console.log(`  ✓ Loaded ${api.properties.length} properties`);
+		} catch (error) {
+			console.log(`  ⚠ Error loading API for ${componentName}:`, error);
+		}
+	}
+
+	// Create output directory if it doesn't exist
+	if (!fs.existsSync(OUTPUT_DIR)) {
+		fs.mkdirSync(OUTPUT_DIR, { recursive: true });
+	}
+
+	// Write individual mini-docs files
+	console.log(`\nWriting individual mini-docs files...`);
+
+	for (const md of mdMetadata) {
+		const miniDocsFile = path.join(OUTPUT_DIR, `${md.componentName}.svelte`);
+
+		// Find matching API for the component
+		const api = apis.find((a) => a.component === md.componentName);
+		if (!api) {
+			console.log(`  ⚠ No API found for ${md.componentName}`);
+			continue;
+		}
+
+		// Get content of example file
+		console.log(`  ⏳ Getting example content for example ${md.componentName}: ${md.exampleName}`);
+		let exampleContent = '';
+		if (md.exampleName) {
+			const exampleFile = path.join(
+				EXAMPLES_DIR,
+				'components',
+				md.componentName,
+				`${md.exampleName}.svelte`
+			);
+			try {
+				exampleContent = fs.readFileSync(exampleFile, 'utf-8');
+			} catch (error) {
+				console.log(`  ⚠ No example file found for ${md.componentName}: ${error}`);
+			}
+			exampleContent = trimCode(exampleContent);
+		}
+
+		// Generate mini-docs content
+		const miniDocsContent = miniDocsTemplate
+			.replaceAll('<COMPONENT_NAME>', md.componentName)
+			.replaceAll('<COMPONENT_URL>', md.componentUrl)
+			.replace('<DESCRIPTION>', md.description ? '## Description\n\n\t' + md.description : '')
+			.replace(
+				'<CATEGORY>',
+				md.category
+					? `## Category\n\n\t[[${md.category}](${CATEGORIES_DIR}/${md.category}.md)]`
+					: ''
+			)
+			.replace(
+				'<LAYERS>',
+				md.layers
+					.map((l, i) => {
+						const h2 = i === 0 ? '## Layers\n\n\t' : '';
+						return `${h2}[${l === 'html' || l === 'svg' ? l.toUpperCase() : toTitleCase(l)}](${getComponentUrl(l)})`;
+					})
+					.join(', ')
+			)
+			.replace(
+				'<API>',
+				api.properties
+					.map((p, i) => {
+						const h2 = i === 0 ? '## API Properties\n\n\t' : '';
+						return `${h2}* ${p.name}:<${p.type}>${p.default ? `=${p.default}` : ''} - ${p.description} ${p.required ? ' (REQUIRED)' : ''}`;
+					})
+					.join('\n\t')
+			)
+			.replace(
+				'<RELATED>',
+				md.related
+					.map((r, i) => {
+						const h2 = i === 0 ? '## Related\n\n\t' : '';
+						return `${h2}[${r}](${getComponentUrl(r)})`;
+					})
+					.join('\n\t')
+			)
+			.replace(
+				'<EXAMPLE>',
+				exampleContent ? '@example\n\t```svelte\n\t' + exampleContent + '\n\t```' : ''
+			);
+
+		fs.writeFileSync(miniDocsFile, miniDocsContent);
+		console.log(`  ✓ Generated mini-docs for ${md.componentName}`);
+	}
+
+	// // Write index file with list of all mini-docs components
+	// const indexFile = path.join(OUTPUT_DIR, 'index.json');
+	// const indexOutput = {
+	// 	generatedAt: new Date().toISOString(),
+	// 	components: mdMetadata.map((md) => ({
+	// 		component: md.componentName,
+	// 		file: `${md.componentName}.svelte`
+	// 	}))
+	// };
+	// fs.writeFileSync(indexFile, JSON.stringify(indexOutput, null, 2));
+
+	console.log(`\n✅ Generated ${mdMetadata.length} component mini docs files in ${OUTPUT_DIR}`);
+	// console.log(`✅ Generated index file: ${indexFile}`);
+}
+
+main();
diff --git a/docs/src/generated/mini-docs/AnnotationLine.svelte b/docs/src/generated/mini-docs/AnnotationLine.svelte
new file mode 100644
index 000000000..c8c9b5f8b
--- /dev/null
+++ b/docs/src/generated/mini-docs/AnnotationLine.svelte
@@ -0,0 +1,63 @@
+
+<!--
+	@component
+	## AnnotationLine
+
+	## Description
+
+	Annotation component drawing a straight marker across the chart to indicate a specific value, trend, or threshold.
+
+	## Category
+
+	[[Annotations](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Annotations.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [AnnotationLine](/docs/components/AnnotationLine)
+
+	## API Properties
+
+	* x:<SingleDomainType> - x value of the point 
+	* y:<SingleDomainType> - y value of the point 
+	* label:<string> - Label to display for line 
+	* labelPlacement:<Placement> - Placement of the label 
+	* labelXOffset:<number> - X offset of the label 
+	* labelYOffset:<number> - Y offset of the label 
+	* props:<{ label?: Partial<ComponentProps<typeof Text>>; line?: Partial<ComponentProps<typeof Line>>; }> - Classes for inner elements 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[AnnotationPoint](/docs/components/AnnotationPoint)
+	[AnnotationRange](/docs/components/AnnotationRange)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { AnnotationLine, LineChart } from 'layerchart';
+		import { getAppleStock } from '$lib/data.remote';
+
+		const data = await getAppleStock();
+	</script>
+
+	<LineChart {data} x="date" y="value" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>
+		{#snippet aboveMarks({ context })}
+			<AnnotationLine
+				y={500}
+				label="Max"
+				props={{
+					line: { class: '[stroke-dasharray:2,2] stroke-danger' },
+					label: { class: 'fill-danger' }
+				}}
+			/>
+		{/snippet}
+	</LineChart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/AnnotationPoint.svelte b/docs/src/generated/mini-docs/AnnotationPoint.svelte
new file mode 100644
index 000000000..352f0fd2e
--- /dev/null
+++ b/docs/src/generated/mini-docs/AnnotationPoint.svelte
@@ -0,0 +1,141 @@
+
+<!--
+	@component
+	## AnnotationPoint
+
+	## Description
+
+	Annotation component marking a specific data value or coordinate on a chart to highlight key events or notable points.
+
+	## Category
+
+	[[Annotations](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Annotations.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [AnnotationPoint](/docs/components/AnnotationPoint)
+
+	## API Properties
+
+	* x:<SingleDomainType> - x value of the point 
+	* y:<SingleDomainType> - y value of the point 
+	* r:<number> - Radius of the circle 
+	* label:<string> - Label to display on circle 
+	* labelPlacement:<Placement> - Placement of the label 
+	* labelXOffset:<number> - X offset of the label 
+	* labelYOffset:<number> - Y offset of the label 
+	* details:<any> - Details (description, etc) useful to display in tooltip 
+	* props:<{ label?: Partial<ComponentProps<typeof Text>>; circle?: Partial<ComponentProps<typeof Circle>>; }> - Classes for inner elements 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[AnnotationLine](/docs/components/AnnotationLine)
+	[AnnotationRange](/docs/components/AnnotationRange)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { AnnotationLine, AnnotationPoint, LineChart, Tooltip, Text } from 'layerchart';
+		import { format } from '@layerstack/utils';
+		import { getAppleStock } from '$lib/data.remote';
+
+		const data = await getAppleStock();
+
+		const annotations = [
+			{
+				x: new Date('June 29, 2007'),
+				y: 121.89,
+				label: 'A',
+				details: 'iPhone (1st Gen)'
+			},
+			{
+				x: new Date('July 11, 2008'),
+				y: 175.16,
+				label: 'B',
+				details: 'iPhone 3G'
+			},
+			{
+				x: new Date('April 3, 2010'),
+				y: 232.39,
+				label: 'C',
+				details: 'iPad (1st Gen)'
+			},
+			{
+				x: new Date('June 24, 2010'),
+				y: 254.28,
+				label: 'D',
+				details: 'iPhone 4'
+			},
+			{
+				x: new Date('September 1, 2010'),
+				y: 258.77,
+				label: 'E',
+				details: 'Apple TV (2nd Gen)'
+			},
+			{
+				x: new Date('March 11, 2011'),
+				y: 352.47,
+				label: 'F',
+				details: 'iPad (2nd Gen)'
+			},
+			{
+				x: new Date('March 7, 2012'),
+				y: 545.18,
+				label: 'G',
+				details: 'Apple TV (3rd Gen)'
+			}
+		];
+	</script>
+
+	<LineChart {data} x="date" y="value" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>
+		{#snippet aboveMarks({ context })}
+			<Text x={context.width / 2} y={10} textAnchor="middle" value="Apple Stock" />
+			{#each annotations as annotation}
+				<AnnotationLine
+					x={annotation.x}
+					y={annotation.y}
+					props={{ line: { class: '[stroke-dasharray:4,4] opacity-50' } }}
+				/>
+
+				<AnnotationPoint
+					x={annotation.x}
+					y={annotation.y}
+					r={8}
+					label={annotation.label}
+					details={annotation.details}
+					props={{
+						circle: { class: 'fill-secondary' },
+						label: { class: 'text-[10px] fill-secondary-content font-bold' }
+					}}
+				/>
+			{/each}
+		{/snippet}
+		{#snippet tooltip({ context })}
+			<Tooltip.Root>
+				{#snippet children({ data })}
+					{#if data.annotation}
+						<!-- Annotation -->
+						<div class="whitespace-nowrap">
+							{data.annotation.details}
+						</div>
+					{:else}
+						<!-- Normal tooltip -->
+						<Tooltip.Header>{format(context.x(data), 'daytime')}</Tooltip.Header>
+						<Tooltip.List>
+							<Tooltip.Item label="value" value={context.y(data)} />
+						</Tooltip.List>
+					{/if}
+				{/snippet}
+			</Tooltip.Root>
+		{/snippet}
+	</LineChart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/AnnotationRange.svelte b/docs/src/generated/mini-docs/AnnotationRange.svelte
new file mode 100644
index 000000000..6df31ca48
--- /dev/null
+++ b/docs/src/generated/mini-docs/AnnotationRange.svelte
@@ -0,0 +1,75 @@
+
+<!--
+	@component
+	## AnnotationRange
+
+	## Description
+
+	Annotation component highlighting a continuous span or interval on a chart to emphasize specific data ranges or thresholds.
+
+	## Category
+
+	[[Annotations](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Annotations.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [AnnotationRange](/docs/components/AnnotationRange)
+
+	## API Properties
+
+	* x:<[ SingleDomainType, SingleDomainType ] | SingleDomainType[]> - x values of the range 
+	* y:<[ SingleDomainType, SingleDomainType ] | SingleDomainType[]> - y values of the range 
+	* label:<string> - Label to display for line 
+	* labelPlacement:<Placement> - Placement of the label 
+	* labelXOffset:<number> - X offset of the label 
+	* labelYOffset:<number> - Y offset of the label 
+	* fill:<string> - Add Rect with fill 
+	* class:<string> - Add Rect with class 
+	* gradient:<ComponentProps<typeof LinearGradient>> - Add Rect with gradient 
+	* pattern:<ComponentProps<typeof Pattern>> - Add Rect with pattern 
+	* props:<{ label?: Partial<ComponentProps<typeof Text>>; rect?: Partial<ComponentProps<typeof Rect>>; }> - Classes for inner elements 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[AnnotationLine](/docs/components/AnnotationLine)
+	[AnnotationPoint](/docs/components/AnnotationPoint)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
+		import { getAppleStock } from '$lib/data.remote';
+
+		const data = await getAppleStock();
+	</script>
+
+	<LineChart
+		{data}
+		x="date"
+		y="value"
+		height={300}
+		padding={defaultChartPadding({ left: 25, bottom: 15 })}
+	>
+		{#snippet belowMarks({ context })}
+			<AnnotationRange
+				x={[new Date('2010-01-01'), new Date('2010-12-31')]}
+				pattern={{
+					size: 8,
+					lines: {
+						rotate: -45,
+						opacity: 0.2
+					}
+				}}
+			/>
+		{/snippet}
+	</LineChart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Arc.svelte b/docs/src/generated/mini-docs/Arc.svelte
new file mode 100644
index 000000000..bae3322fe
--- /dev/null
+++ b/docs/src/generated/mini-docs/Arc.svelte
@@ -0,0 +1,117 @@
+
+<!--
+	@component
+	## Arc
+
+	## Description
+
+	Primitive component which draws a curved segment on a chart to represent portions of a whole or highlight specific data ranges.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Arc](/docs/components/Arc)
+
+	## API Properties
+
+	* value:<number> - undefined 
+	* initialValue:<number> - undefined 
+	* domain:<[ number, number ]>=[0, 100]; - Domain [min,max] in degrees 
+	* range:<[ number, number ]>=[0, 360] - Range [min,max] in degrees. See also startAngle/endAngle 
+	* startAngle:<number> - Start angle in radians 
+	* endAngle:<number> - End angle in radians 
+	* innerRadius:<number> - Define innerRadius. Defaults to yRange min
+  • value >= 1: discrete value
+  • value < 1: percent of `outerRadius`
+  • value < 0: offset of `outerRadius` 
+	* outerRadius:<number> - Define outerRadius. Defaults to smallest width (xRange) or height (yRange) dimension (/2)
+  • value >= 1: discrete value
+  • value < 1: percent of chart width or height (smallest) / 2
+  • value < 0: offset of chart width or height (smallest) / 2 
+	* cornerRadius:<number>=0 - Corner radius of the arc 
+	* padAngle:<number>=0 - Angle between the arcs 
+	* trackStartAngle:<number> - Start angle in radians 
+	* trackEndAngle:<number> - End angle in radians 
+	* trackInnerRadius:<number> - Define innerRadius. Defaults to yRange min
+  • value >= 1: discrete value
+  • value < 1: percent of `outerRadius`
+  • value < 0: offset of `outerRadius` 
+	* trackOuterRadius:<number> - Define outerRadius. Defaults to smallest width (xRange) or height (yRange) dimension (/2)
+  • value >= 1: discrete value
+  • value < 1: percent of chart width or height (smallest) / 2
+  • value < 0: offset of chart width or height (smallest) / 2 
+	* trackCornerRadius:<number>=0 - Corner radius of the arc 
+	* trackPadAngle:<number>=0 - Angle between the arcs 
+	* offset:<number>=0 - Offset arc from center 
+	* tooltipContext:<TooltipContextValue> - Tooltip context to setup pointer events to show tooltip for related data.
+
+**Must set `data` prop as well** 
+	* data:<any> - Data to set when showing tooltip 
+	* track:<boolean | Partial<ComponentProps<typeof Path>>> - Pass true to enable the track with default props, or pass an object
+of props to enable the track. 
+	* trackRef:<SVGPathElement> - A reference to the track element 
+	* ref:<SVGPathElement> - A reference to the arc element 
+	* children:<Snippet<[ { centroid: [ number, number ]; boundingBox: DOMRect; value: number; getTrackTextProps: GetArcTextProps; getArcTextProps: GetArcTextProps; } ]>> - undefined 
+	* motion:<MotionProp> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[Pie](/docs/components/Pie)
+	[ArcChart](/docs/components/ArcChart)
+	[PieChart](/docs/components/PieChart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Arc, Chart, Group, Layer, LinearGradient, Text } from 'layerchart';
+		import ArcControls from '$lib/components/controls/ArcControls.svelte';
+
+		let value = $state(75);
+
+		export { value as data };
+	</script>
+
+	<ArcControls bind:value />
+
+	<Chart height={120} padding={20}>
+		<Layer center>
+			<Group y={16}>
+				<LinearGradient class="from-secondary to-primary">
+					{#snippet children({ gradient })}
+						<Arc
+							{value}
+							range={[-120, 120]}
+							outerRadius={60}
+							innerRadius={50}
+							cornerRadius={5}
+							motion="spring"
+							fill={gradient}
+							track={{ class: 'fill-none stroke-surface-content/10' }}
+						>
+							{#snippet children({ value })}
+								<Text
+									value={Math.round(value) + '%'}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class="text-3xl tabular-nums"
+								/>
+							{/snippet}
+						</Arc>
+					{/snippet}
+				</LinearGradient>
+			</Group>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/ArcChart.svelte b/docs/src/generated/mini-docs/ArcChart.svelte
new file mode 100644
index 000000000..c72b3c044
--- /dev/null
+++ b/docs/src/generated/mini-docs/ArcChart.svelte
@@ -0,0 +1,58 @@
+
+<!--
+	@component
+	## ArcChart
+
+	## Description
+
+	Streamlined visualization which draws curved segment of a chart to represent portions of a circle, such as in pie or radial charts.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [ArcChart](/docs/components/ArcChart)
+
+	## API Properties
+
+	* key:<Accessor<TData>>='key' - Key accessor 
+	* label:<Accessor<TData>>='label' - Label accessor 
+	* value:<Accessor<TData>>='value' - Value accessor 
+	* c:<Accessor<TData>>=key - Color accessor 
+	* maxValue:<number> - Maximum possible value, useful when `data` is single item 
+	* props:<ArcChartPropsObjProp> - undefined 
+	* placement:<'left' | 'center' | 'right'>='center' - Placement of the ArcChart 
+	* center:<boolean>=placement === 'center' - Center the chart.
+
+Override and use `props.group` for more control. 
+	* onArcClick:<(e: MouseEvent, detail: { data: any; series: SeriesData<TData, typeof Arc>; }) => void> - A callback function triggered when the arc is clicked. 
+	* arc:<SimplifiedChartSnippet<TData, typeof Arc, ArcChartExtraSnippetProps<TData> & { props: ComponentProps<typeof Arc>; seriesIndex: number; }>> - undefined 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Pie](/docs/components/Pie)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { ArcChart } from 'layerchart';
+
+		const data = [{ key: 'Example', value: 70 }];
+	</script>
+
+	<ArcChart
+		{data}
+		key="key"
+		value="value"
+		maxValue={100}
+		innerRadius={-20}
+		cornerRadius={10}
+		height={160}
+	/>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Area.svelte b/docs/src/generated/mini-docs/Area.svelte
new file mode 100644
index 000000000..39308d750
--- /dev/null
+++ b/docs/src/generated/mini-docs/Area.svelte
@@ -0,0 +1,61 @@
+
+<!--
+	@component
+	## Area
+
+	## Description
+
+	Marking component which shades the space under a line on a chart to emphasize the magnitude and trend of data over a range.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Area](/docs/components/Area)
+
+	## API Properties
+
+	* data:<any> - Override data instead of using context 
+	* pathData:<string | null> - Pass `<path d={...} />` explicitly instead of calculating from data / context 
+	* x:<Accessor> - Override x accessor 
+	* y0:<Accessor> - Override y0 accessor. Defaults to max($yRange) 
+	* y1:<Accessor> - Override y1 accessor. Defaults to y accessor 
+	* motion:<MotionProp> - Whether to tween the interpolated path data using d3-interpolate-path 
+	* clipPath:<string> - undefined 
+	* curve:<CurveFactory> - undefined 
+	* defined:<Parameters<D3Area<any>['defined']>[0]> - undefined 
+	* line:<boolean | Partial<ComponentProps<typeof Spline>>>=false - Enable showing line 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Area, Axis, Chart, Layer } from 'layerchart';
+
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+	</script>
+
+	<Chart {data} x="date" y="value" yDomain={[0, null]} yNice padding={20} height={300}>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/30" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/AreaChart.svelte b/docs/src/generated/mini-docs/AreaChart.svelte
new file mode 100644
index 000000000..16674a7c5
--- /dev/null
+++ b/docs/src/generated/mini-docs/AreaChart.svelte
@@ -0,0 +1,43 @@
+
+<!--
+	@component
+	## AreaChart
+
+	## Description
+
+	Visualization of quantitative data over a continuous interval, with filled areas beneath a line to emphasize magnitude or cumulative values.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [AreaChart](/docs/components/AreaChart)
+
+	## API Properties
+
+	* onPointClick:<(e: MouseEvent, details: { data: HighlightPointData; series: SeriesData<TData, typeof Area>; }) => void> - A callback function called when a point in the chart is clicked. 
+	* props:<AreaChartPropsObjProp> - Additional props to be passed to the components rendered internally by the
+`AreaChart` component. This is useful for customizing the behavior of the individual
+components, without having to fully override them via a snippet. 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Area](/docs/components/Area)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { AreaChart, defaultChartPadding } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+	</script>
+
+	<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300} />
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Axis.svelte b/docs/src/generated/mini-docs/Axis.svelte
new file mode 100644
index 000000000..5502ac326
--- /dev/null
+++ b/docs/src/generated/mini-docs/Axis.svelte
@@ -0,0 +1,73 @@
+
+<!--
+	@component
+	## Axis
+
+	## Description
+
+	Commonly used component displays the scale and reference lines on a chart, providing context for interpreting data values.
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Axis](/docs/components/Axis)
+
+	## API Properties
+
+	* placement:<'top' | 'bottom' | 'left' | 'right' | 'angle' | 'radius'> - Location of axis  (REQUIRED)
+	* label:<string | Snippet<[ { props: ComponentProps<typeof Text>; } ]>> - The label for the axis.
+
+Can either be a string or a snippet to render custom content.
+The snippet receives spreadable props to apply to the label. 
+	* labelPlacement:<'start' | 'middle' | 'end'>='middle' - Location of axis label 
+	* labelProps:<Partial<ComponentProps<typeof Text>>> - Props applied to label Text 
+	* rule:<boolean | Partial<ComponentProps<typeof Rule>>>=false - Draw a rule line. Use Rule component for greater rendering order control 
+	* grid:<boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>>=false - Draw grid lines 
+	* ticks:<TicksConfig> - Control the number of ticks 
+	* tickSpacing:<number> - Width or height of each tick in pixels (enabling responsive count) 
+	* tickMultiline:<boolean>=false - Whether to render tick labels on multiple lines for additional context 
+	* tickLength:<number>=4 - Length of the tick line 
+	* tickMarks:<boolean>=true - Whether to render tick marks. 
+	* format:<FormatType | FormatConfig> - Format tick labels 
+	* tickLabelProps:<Partial<ComponentProps<typeof Text>>> - Props to apply to each tick label 
+	* tickLabel:<Snippet<[ { props: ComponentProps<typeof Text>; index: number; } ]>> - A snippet to render your own custom tick label. 
+	* transitionIn:<In>=defaults to fade if the motion prop is set to tweened - Transition function for entering elements 
+	* transitionInParams:<TransitionParams<In>>={ easing: cubicIn } - Parameters for the transitionIn function 
+	* scale:<any> - Override scale for the axis 
+	* classes:<{ root?: string; label?: string; rule?: string; tick?: string; tickLabel?: string; }>={} - Classes for styling various parts of the axis 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[Grid](/docs/components/Grid)
+	[Rule](/docs/components/Rule)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Layer } from 'layerchart';
+		import { timeDay } from 'd3-time';
+		import { startOfInterval } from '@layerstack/utils';
+
+		const today = startOfInterval('day', new Date());
+	</script>
+
+	<Chart
+		xDomain={[timeDay.offset(today, -10), today]}
+		yDomain={[0, 100]}
+		yNice
+		padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" />
+			<Axis placement="left" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Bar.svelte b/docs/src/generated/mini-docs/Bar.svelte
new file mode 100644
index 000000000..44f64ee06
--- /dev/null
+++ b/docs/src/generated/mini-docs/Bar.svelte
@@ -0,0 +1,55 @@
+
+<!--
+	@component
+	## Bar
+
+	## Description
+
+	Primitive component creating individual rectangular bars to represent and compare discrete data values.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Bar](/docs/components/Bar)
+
+	## API Properties
+
+	* data:<Object> - data to render the bar from  (REQUIRED)
+	* x:<Accessor>=ctx.x - Override `x` from context. Useful for multiple Bar instances 
+	* y:<Accessor>=ctx.y - Override `y` from context. Useful for multiple Bar instances 
+	* x1:<Accessor>=ctx.x1 - Override `x1` from context. Useful for multiple Bar instances 
+	* y1:<Accessor>=ctx.y1 - Override `y1` from context. Useful for multiple Bar instances 
+	* radius:<number> - undefined 
+	* insets:<Insets> - undefined 
+	* initialX:<number> - undefined 
+	* initialY:<number> - undefined 
+	* initialHeight:<number> - undefined 
+	* initialWidth:<number> - undefined 
+	* rounded:<'all' | 'none' | 'edge' | 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'> - Control which corners are rounded with radius. Uses <path> instead of <rect> when not set
+to `all` 
+	* motion:<MotionProp<'x' | 'y' | 'width' | 'height'>> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+	* onclick:<MouseEventHandler<Element> | null> - Click event handler 
+	* ondblclick:<MouseEventHandler<Element> | null> - Double click event handler 
+	* onpointerenter:<PointerEventHandler<Element> | null> - Pointer enter event handler 
+	* onpointermove:<PointerEventHandler<Element> | null> - Pointer move event handler 
+	* onpointerleave:<PointerEventHandler<Element> | null> - Pointer leave event handler 
+	* onpointerover:<PointerEventHandler<Element> | null> - Pointer over event handler 
+	* onpointerout:<PointerEventHandler<Element> | null> - Pointer out event handler 
+
+	## Related
+
+	[Bars](/docs/components/Bars)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/BarChart.svelte b/docs/src/generated/mini-docs/BarChart.svelte
new file mode 100644
index 000000000..c0179e8b5
--- /dev/null
+++ b/docs/src/generated/mini-docs/BarChart.svelte
@@ -0,0 +1,52 @@
+
+<!--
+	@component
+	## BarChart
+
+	## Description
+
+	Streamlined visualization displaying categorical data using rectangular bars whose lengths represent the values of each category.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [BarChart](/docs/components/BarChart)
+
+	## API Properties
+
+	* bandPadding:<number>=0.4 - Padding between primary x or y bands/bars, applied to scaleBand().padding() 
+	* groupPadding:<number>=0 - Padding between group/series items when using 'seriesLayout="group"', applied to scaleBand().padding() 
+	* stackPadding:<number>=0 - Padding between series items within bars when using 'seriesLayout="stack"' 
+	* orientation:<'vertical' | 'horizontal'>='vertical' - The orientation of the bar chart. 
+	* props:<BarChartPropsObjProp<TData>> - undefined 
+	* onBarClick:<(event: MouseEvent, detail: { data: any; series: SeriesData<TData, typeof Bars>; }) => void> - A callback function that is called when a bar is clicked. 
+	* seriesLayout:<SimplifiedChartProps<TData, typeof Bars, BarChartExtraSnippetProps<TData>>['seriesLayout'] | 'group'>='overlap' - The layout of the series. 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Bars](/docs/components/Bars)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { BarChart } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({
+			count: 10,
+			min: 20,
+			max: 100,
+			value: 'integer',
+			keys: ['value', 'baseline']
+		});
+	</script>
+
+	<BarChart {data} x="date" y="value" height={300} />
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Bars.svelte b/docs/src/generated/mini-docs/Bars.svelte
new file mode 100644
index 000000000..e4914b04b
--- /dev/null
+++ b/docs/src/generated/mini-docs/Bars.svelte
@@ -0,0 +1,63 @@
+
+<!--
+	@component
+	## Bars
+
+	## Description
+
+	Marking component which applies horizontal bars to represent and visually compare discrete data values.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Bars](/docs/components/Bars)
+
+	## API Properties
+
+	* data:<any> - Override the data from the context. 
+	* key:<(d: any, index: number) => any>=(d, index) => index - Define unique value for {#each} `(key)` expressions
+to improve transitions. 
+	* onBarClick:<(e: MouseEvent, detail: { data: any; }) => void> - Event dispatched when an individual bar is clicked. 
+	* children:<Snippet> - undefined 
+
+	## Related
+
+	[Bar](/docs/components/Bar)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { scaleBand } from 'd3-scale';
+		import { Axis, Bar, Bars, Chart, Highlight, Layer, Tooltip } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({
+			count: 20,
+			min: 20,
+			max: 100
+		});
+	</script>
+
+	<Chart
+		{data}
+		x="date"
+		xScale={scaleBand().padding(0.4)}
+		y="value"
+		yDomain={[0, null]}
+		yNice
+		padding={{ left: 24, bottom: 20, top: 8 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			<Bars strokeWidth={1} class="fill-primary" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Blur.svelte b/docs/src/generated/mini-docs/Blur.svelte
new file mode 100644
index 000000000..b539ce9bd
--- /dev/null
+++ b/docs/src/generated/mini-docs/Blur.svelte
@@ -0,0 +1,32 @@
+
+<!--
+	@component
+	## Blur
+
+	## Description
+
+	Component applies a Gaussian blur effect to chart elements, softening their appearance for visual emphasis or stylistic purposes.
+
+	## Category
+
+	[[Other](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Other.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [Blur](/docs/components/Blur)
+
+	## API Properties
+
+	* id:<string> - A unique id for the filter. 
+	* stdDeviation:<number>=5 - The standard deviation for the blur effect. 
+	* children:<Snippet> - The default children snippet which provides
+the id for the filter. 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Bounds.svelte b/docs/src/generated/mini-docs/Bounds.svelte
new file mode 100644
index 000000000..777003d66
--- /dev/null
+++ b/docs/src/generated/mini-docs/Bounds.svelte
@@ -0,0 +1,32 @@
+
+<!--
+	@component
+	## Bounds
+
+	## Description
+
+	Component provides reactive, animated coordinate scaling for chart layouts, passing live x/y scales to its children within a shared chart context.
+
+	## Category
+
+	[[Other](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Other.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Bounds](/docs/components/Bounds)
+
+	## API Properties
+
+	* domain:<BoundsExtents | BoundsExtentsAccessor | null> - undefined 
+	* range:<BoundsExtents | BoundsExtentsAccessor | null> - undefined 
+	* children:<Snippet<[ { xScale: AnyScale; yScale: AnyScale; } ]>> - undefined 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/BrushContext.svelte b/docs/src/generated/mini-docs/BrushContext.svelte
new file mode 100644
index 000000000..773adf72c
--- /dev/null
+++ b/docs/src/generated/mini-docs/BrushContext.svelte
@@ -0,0 +1,66 @@
+
+<!--
+	@component
+	## BrushContext
+
+	## Description
+
+	Interaction component providing an interactive brush context allowing selection, adjustment, and resetting of x/y domains with draggable handles and event callbacks.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [BrushContext](/docs/components/BrushContext)
+
+	## API Properties
+
+	* axis:<'x' | 'y' | 'both'>='x' - The axis to apply brushing 
+	* handleSize:<number>=5 - Size of the draggable handles (width/height) 
+	* resetOnEnd:<boolean>=false - Only show range while actively brushing.
+Useful with `brushEnd` event 
+	* ignoreResetClick:<boolean>=false - Ignore click to reset.
+Useful to add click handlers to marks.  Requires external resetting (button, another chart, etc) 
+	* xDomain:<DomainType> - undefined 
+	* yDomain:<DomainType> - undefined 
+	* mode:<'integrated' | 'separated'>='integrated' - Mode of operation
+ - `integrated`: use with single chart
+ - `separated`: use with separate (typically smaller) chart and state can be managed
+externally (sync with other charts, etc).  Show active selection when domain does not equal
+original 
+	* disabled:<boolean>=false - Disable brush 
+	* range:<Partial<HTMLAttributes<HTMLElement>>> - Attributes passed to the range <div> element 
+	* handle:<Partial<HTMLAttributes<HTMLElement>>> - Attributes passed to the handle <div> elements 
+	* classes:<{ root?: string; frame?: string; range?: string; handle?: string; labels?: string; }>={} - Classes to apply to the various elements rendered 
+	* onChange:<(detail: BrushEventPayload) => void> - undefined 
+	* onBrushStart:<(detail: BrushEventPayload) => void> - undefined 
+	* onBrushEnd:<(detail: BrushEventPayload) => void> - undefined 
+	* onReset:<(detail: BrushEventPayload) => void> - undefined 
+	* brushContext:<BrushContextValue> - A reference to this brush's context for use in parent
+components. 
+	* children:<Snippet<[ { brushContext: BrushContextValue; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Area, Chart, Layer } from 'layerchart';
+		import { getAppleStock } from '$lib/data.remote';
+
+		const data = await getAppleStock();
+	</script>
+
+	<Chart {data} x="date" y="value" brush height={40}>
+		<Layer>
+			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Calendar.svelte b/docs/src/generated/mini-docs/Calendar.svelte
new file mode 100644
index 000000000..0686ed86c
--- /dev/null
+++ b/docs/src/generated/mini-docs/Calendar.svelte
@@ -0,0 +1,81 @@
+
+<!--
+	@component
+	## Calendar
+
+	## Description
+
+	Marking component which highlights specific dates or time periods on a chart to emphasize events, milestones, or temporal patterns.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Calendar](/docs/components/Calendar)
+
+	## API Properties
+
+	* start:<Date> - The start date of the calendar.  (REQUIRED)
+	* end:<Date> - The end date of the calendar.  (REQUIRED)
+	* cellSize:<number | [ number, number ]> - Size of the cell in the calendar.
+
+- `number`: sets width/height as same value (square).
+- `array`: sets as [width,height].
+- `undefined/omitted`: is derived from Chart width/height 
+	* monthPath:<boolean | Partial<ComponentProps<typeof MonthPath>>>=false - Enable drawing path around each month.  If object, pass as props to underlying <path> 
+	* monthLabel:<boolean | Partial<ComponentProps<typeof Text>>> - Props to pass to the `<text>` element for month labels. 
+	* tooltipContext:<TooltipContextValue> - Tooltip context to setup mouse events to show tooltip for related data 
+	* children:<Snippet<[ { cells: CalendarCell[]; cellSize: [ number, number ]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { scaleThreshold } from 'd3-scale';
+		import { timeYear } from 'd3-time';
+		import { Calendar, Chart, Layer } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+		import { endOfInterval } from '@layerstack/utils';
+
+		const now = new Date();
+		const firstDayOfYear = timeYear.floor(now);
+		const lastDayOfYear = endOfInterval('year', now);
+
+		const data = createDateSeries({ count: 365 * 4, min: 10, max: 100, value: 'integer' }).map(
+			(d) => {
+				return {
+					...d,
+					value: Math.random() > 0.2 ? d.value : null // set null for some values
+				};
+			}
+		);
+	</script>
+
+	<Chart
+		{data}
+		x="date"
+		c="value"
+		cScale={scaleThreshold().unknown('transparent')}
+		cDomain={[25, 50, 75]}
+		cRange={[
+			'var(--color-primary-100)',
+			'var(--color-primary-300)',
+			'var(--color-primary-500)',
+			'var(--color-primary-700)'
+		]}
+		padding={{ top: 20 }}
+		height={140}
+	>
+		<Layer>
+			<Calendar start={firstDayOfYear} end={lastDayOfYear} monthPath />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Canvas.svelte b/docs/src/generated/mini-docs/Canvas.svelte
new file mode 100644
index 000000000..85f249446
--- /dev/null
+++ b/docs/src/generated/mini-docs/Canvas.svelte
@@ -0,0 +1,47 @@
+
+<!--
+	@component
+	## Canvas
+
+	## Description
+
+	Canvas layer
+
+	## Category
+
+	[[Layers](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layers.md)]
+
+	## Layers
+
+	[](/docs/components/)
+
+	Full Documentation: [Canvas](/docs/components/Canvas)
+
+	## API Properties
+
+	* ref:<HTMLCanvasElement> - The `<canvas>` tag. Useful for bindings. 
+	* canvasContext:<CanvasRenderingContext2D> - The `<canvas>`'s 2d context. Useful for bindings. 
+	* willReadFrequently:<boolean>=false - Force the use of a software (instead of hardware accelerated) 2D canvas, which can
+save memory when calling getImageData() frequently. 
+	* zIndex:<number>=0 - The `z-index` style to apply to the layer. 
+	* pointerEvents:<boolean>=true - 
+Whether pointer events should be enabled on the canvas.
+
+- `false`: `pointer-events: none;` will be set on the entire layer.
+- `true`: pointer events will operate normally. 
+	* fallback:<string | Snippet> - The content to display if canvas is not supported or cannot be rendered.
+This can either be a string or a snippet with custom markup. 
+	* center:<boolean | 'x' | 'y'>=false - Translate children to center of the canvas (useful for radial layouts). 
+	* ignoreTransform:<boolean>=false - Ignore TransformContext.
+
+Useful to add static elements such as legends. 
+	* disableHitCanvas:<boolean>=false - Disable the hit canvas (useful when animations are playing) 
+	* debug:<boolean>=false - Show the hit canvas for debugging purposes. 
+	* children:<Snippet<[ { ref: HTMLCanvasElement; canvasContext: CanvasRenderingContext2D | undefined; } ]>> - undefined 
+
+	## Related
+
+	[Layer](/docs/components/Layer)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Chart.svelte b/docs/src/generated/mini-docs/Chart.svelte
new file mode 100644
index 000000000..5c51c0bda
--- /dev/null
+++ b/docs/src/generated/mini-docs/Chart.svelte
@@ -0,0 +1,216 @@
+
+<!--
+	@component
+	## Chart
+
+	## Description
+
+	Base component providing chart dimensions and contexts such as TooltipContext, GeoContext, and TransformContext. See also simplified charts such as AreaChart and BarChart for streamlined implementations.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Chart](/docs/components/Chart)
+
+	## API Properties
+
+	* ssr:<boolean>=false - Whether this chart should be rendered server side 
+	* pointerEvents:<boolean>=true - Whether to allow pointer events via CSS.
+Set this to `false` to set `pointer-events: none;` on all components, disabling
+all mouse interactions. 
+	* position:<string>='relative' - Determine the positioning of the wrapper div.
+Set this to `'absolute'` when you want to stack layers. 
+	* percentRange:<boolean>=false - If `true`, set all scale ranges to `[0, 100]`.
+Ranges reversed via `xReverse`, `yReverse`, or `rReverse` props will
+continue to be reversed as usual. 
+	* ref:<HTMLElement> - A bindable reference to the root container element. 
+	* data:<T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>> - If `data` is not a flat array of objects and you want to use any of the scales, set a flat
+version of the data via the `flatData` prop. 
+	* flatData:<T[] | readonly T[] | HierarchyNode<T> | SankeyGraph<any, any>> - A flat version of data. 
+	* x:<Accessor<T>> - The x accessor. The key in each row of data that corresponds to the x-field. This can be a
+string, an accessor function, a number or an array of any combination of those types. This
+property gets converted to a function when you access it through the context. 
+	* y:<Accessor<T>> - The y accessor. The key in each row of data that corresponds to the y-field. This can be a
+string, an accessor function, a number or an array of any combination of those types. This
+property gets converted to a function when you access it through the context. 
+	* z:<Accessor<T>> - The z accessor. The key in each row of data that corresponds to the z-field. This can be a
+string, an accessor function, a number or an array of any combination of those types. This
+property gets converted to a function when you access it through the context. 
+	* r:<Accessor<T>> - 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. 
+	* x1:<Accessor<T>> - 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. 
+	* y1:<Accessor<T>> - 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. 
+	* c:<Accessor<T>> - 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. 
+	* xDomain:<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. 
+	* yDomain:<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. 
+	* 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 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. 
+	* cDomain:<DomainType> - Set the list of color values. 
+	* xNice:<Nice>=false - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the x domain. 
+	* yNice:<Nice>=false - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the y domain. 
+	* zNice:<Nice>=false - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the z domain. 
+	* rNice:<Nice>=false - Applies D3's [scale.nice()](https://github.com/d3/d3-scale#continuous_nice) to the r domain. 
+	* xPadding:<PaddingArray> - 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:<PaddingArray> - 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:<PaddingArray> - 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:<PaddingArray> - 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. 
+	* xScale:<XScale>=autoScale - 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. 
+	* yScale:<YScale>=autoScale - 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. 
+	* zScale:<AnyScale>=autoScale - 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. 
+	* rScale:<AnyScale>=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. 
+	* x1Scale:<AnyScale>=autoScale - 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. 
+	* y1Scale:<AnyScale>=autoScale - 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. 
+	* cScale:<AnyScale>=scaleOrdinal - 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. 
+	* xRange:<BaseRange> - 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
+[scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* yRange:<BaseRange> - Override the default y range of `[0, height]` by setting an array or function with argument
+`({ width, height})` that returns an array. Setting this prop overrides `yReverse`. This can
+also be a list of numbers or strings for scales with discrete ranges like
+[scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* zRange:<BaseRange> - Override the default z range of `[0, width]` by setting an array or function with argument
+`({ width, height})` that returns an array. Setting this prop overrides `zReverse`. This can
+also be a list of numbers or strings for scales with discrete ranges like
+[scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* rRange:<BaseRange> - Override the default r range of `[1, 25]` by setting an array or function with argument
+`({ width, height})` that returns an array. Setting this prop overrides `rReverse`. This can
+also be a list of numbers or strings for scales with discrete ranges like
+[scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* x1Range:<XRangeWithScale<XScale>> - 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* y1Range:<YRangeWithScale<YScale>> - 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 [scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* cRange:<string[] | readonly 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
+[scaleThreshold](https://github.com/d3/d3-scale#threshold-scales) or
+[scaleQuantize](https://github.com/d3/d3-scale#quantize-scales). 
+	* xReverse:<boolean>=false - Reverse the default x range. By default this is `false` and the range is `[0, width]`.
+Ignored if you set the xRange prop. 
+	* yReverse:<boolean>=true - 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. 
+	* zReverse:<boolean>=false - Reverse the default z range. By default this is `false` and the range is `[0, width]`.
+Ignored if you set the zRange prop. 
+	* rReverse:<boolean>=false - Reverse the default r range. By default this is `false` and the range is `[1, 25]`.
+Ignored if you set the rRange prop. 
+	* xDomainSort:<boolean>=false - ***Only used when scale is ordinal.***
+Set whether the calculated unique items come back sorted. 
+	* yDomainSort:<boolean>=false - ***Only used when scale is ordinal.***
+Set whether the calculated unique items come back sorted. 
+	* zDomainSort:<boolean>=false - ***Only used when scale is ordinal.***
+Set whether the calculated unique items come back sorted. 
+	* rDomainSort:<boolean>=false - ***Only used when scale is ordinal.***
+Set whether the calculated unique items come back sorted. 
+	* padding:<{ top?: number; right?: number; bottom?: number; left?: number; } | number> - 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).
+
+If a number is passed, it will be applied to all sides. 
+	* extents:<{ x?: [ min: number, max: number ]; y?: [ min: number, max: number ]; r?: [ min: number, max: number ]; z?: [ min: number, max: number ]; }> - Manually set the extents of the x, y or r scale as a two-dimensional array of the min and
+max you want. Setting values here will skip any dynamic extent calculation of the data for
+that dimension. 
+	* meta:<Record<string, any>> - Any extra configuration values you want available on the Chart context.
+This could be useful for color lookups or additional constants. 
+	* debug:<boolean>=false - Enable debug printing to the console.
+Useful to inspect your scales and dimensions. 
+	* verbose:<boolean>=true - Show warnings in the console. 
+	* xBaseline:<number | null>=null - x value guaranteed to be visible in xDomain.  Useful with optional negative values since
+`xDomain={[0, null]}` would ignore negative values 
+	* yBaseline:<number | null>=null - y value guaranteed to be visible in yDomain.  Useful with optional negative values since
+`yDomain={[0, null]}` would ignore negative values 
+	* xInterval:<TimeInterval | null> - Time interval to use for the x-axis when using a time scale. 
+	* yInterval:<TimeInterval | null> - Time interval to use for the y-axis when using a time scale. 
+	* radial:<boolean>=false - 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 
+	* children:<Snippet<[ { context: ChartContextValue<T, XScale, YScale>; } ]>> - undefined 
+	* context:<ChartContextValue<T, XScale, YScale>> - A bindable reference to the chart context. 
+	* geo:<Partial<ComponentProps<typeof GeoContext>>> - Props passed to GeoContext 
+	* tooltip:<Partial<ComponentProps<typeof TooltipContext>> | boolean> - Props passed to the `TooltipContext` component. 
+	* transform:<Partial<ComponentProps<typeof TransformContext>>> - Props passed to TransformContext 
+	* brush:<Partial<ComponentProps<typeof BrushContext>> | boolean> - Props passed to BrushContext 
+	* onResize:<(e: ChartResizeDetail) => void> - A callback function that is called when the chart is resized. 
+	* ondragstart:<ComponentProps<typeof TransformContext>['ondragstart']> - undefined 
+	* ondragend:<ComponentProps<typeof TransformContext>['ondragend']> - undefined 
+	* onTransform:<ComponentProps<typeof TransformContext>['onTransform']> - undefined 
+	* width:<number> - Sets width of the chart container.  Uses parent width if not set (bind:clientWidth) 
+	* height:<number> - Sets height of the chart container.  Uses parent height if not set (bind:clientHeight) 
+
+	## Related
+
+	[ArcChart](/docs/components/ArcChart)
+	[AreaChart](/docs/components/AreaChart)
+	[BarChart](/docs/components/BarChart)
+	[LineChart](/docs/components/LineChart)
+	[PieChart](/docs/components/PieChart)
+	[ScatterChart](/docs/components/ScatterChart)
+	[TooltipContext](/docs/components/TooltipContext)
+	[GeoContext](/docs/components/GeoContext)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/ChartClipPath.svelte b/docs/src/generated/mini-docs/ChartClipPath.svelte
new file mode 100644
index 000000000..38a333e67
--- /dev/null
+++ b/docs/src/generated/mini-docs/ChartClipPath.svelte
@@ -0,0 +1,32 @@
+
+<!--
+	@component
+	## ChartClipPath
+
+	## Description
+
+	Clipping component which applies a rectangular clip path for specific components (axis labels, etc) within chart while still allowing some to overflow (tooltips, etc).
+
+	## Category
+
+	[[Clipping](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Clipping.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [ChartClipPath](/docs/components/ChartClipPath)
+
+	## API Properties
+
+	* full:<boolean>=false - Include padding area (ex. axis) 
+	* disabled:<boolean>=false - Disable clipping (show all) 
+	* children:<Snippet> - undefined 
+
+	## Related
+
+	[RectClipPath](/docs/components/RectClipPath)
+	[Rect](/docs/components/Rect)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Circle.svelte b/docs/src/generated/mini-docs/Circle.svelte
new file mode 100644
index 000000000..5479ec239
--- /dev/null
+++ b/docs/src/generated/mini-docs/Circle.svelte
@@ -0,0 +1,69 @@
+
+<!--
+	@component
+	## Circle
+
+	## Description
+
+	Primitive component which draws a circular shape to mark specific points or emphasize data visually.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Circle](/docs/components/Circle)
+
+	## API Properties
+
+	* cx:<number>=0 - The center x position of the circle. 
+	* initialCx:<number>=cx - The initial center x position of the circle. 
+	* cy:<number>=0 - The center y position of the circle. 
+	* initialCy:<number>=cy - The initial center y position of the circle. 
+	* r:<number>=1 - The radius of the circle. 
+	* initialR:<number>=r - The initial radius of the circle. 
+	* ref:<SVGCircleElement> - A bindable reference to the `<circle>` element 
+	* motion:<MotionProp> - undefined 
+	* children:<Snippet> - Children content to render.  Note: Only works for Html layers 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[Points](/docs/components/Points)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Circle, Layer } from 'layerchart';
+	</script>
+
+	<Chart
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 10, bottom: 20, left: 24, right: 10 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+			<Circle cx={100} cy={100} r={20} />
+			<Circle cx={200} cy={200} r={20} class="fill-primary bg-primary" />
+			<Circle cx={200} cy={50} r={20} fill="var(--color-secondary)" />
+			<Circle
+				cx={300}
+				cy={150}
+				r={20}
+				class="stroke-2 stroke-primary fill-primary/10 bg-primary/10 border-2 border-primary"
+			/>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/CircleClipPath.svelte b/docs/src/generated/mini-docs/CircleClipPath.svelte
new file mode 100644
index 000000000..ee5314b90
--- /dev/null
+++ b/docs/src/generated/mini-docs/CircleClipPath.svelte
@@ -0,0 +1,36 @@
+
+<!--
+	@component
+	## CircleClipPath
+
+	## Description
+
+	Clipping component which conditionally applies a circular clip region to its child elements based on the rendering context and provided properties.
+
+	## Category
+
+	[[Clipping](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Clipping.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [CircleClipPath](/docs/components/CircleClipPath)
+
+	## API Properties
+
+	* id:<string> - A unique id for the clipPath. 
+	* cx:<number>=0 - The center x position of the circle. 
+	* cy:<number>=0 - The center y position of the circle. 
+	* r:<number> - The radius of the circle.  (REQUIRED)
+	* disabled:<boolean>=false - Whether to disable clipping (show all). 
+	* ref:<SVGCircleElement> - A bindable reference to the underlying `<circle>` element' 
+	* children:<ClipPathPropsWithoutHTML['children']> - The children snippet to render content inside the clipPath. 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/ClipPath.svelte b/docs/src/generated/mini-docs/ClipPath.svelte
new file mode 100644
index 000000000..2e4bf9843
--- /dev/null
+++ b/docs/src/generated/mini-docs/ClipPath.svelte
@@ -0,0 +1,38 @@
+
+<!--
+	@component
+	## ClipPath
+
+	## Description
+
+	Clipping component which defines a clipping region to constrain the rendering of chart elements within a specified shape or boundary.
+
+	## Category
+
+	[[Clipping](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Clipping.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [ClipPath](/docs/components/ClipPath)
+
+	## API Properties
+
+	* id:<string> - A unique id for the clipPath. 
+	* useId:<string> - Use existing path or shape (by id) for clipPath 
+	* disabled:<boolean>=false - Whether to disable clipping (show all). 
+	* clip:<Snippet<[ { id: string; } ]>> - A snippet to insert content into the clipPath.
+Provides the id for the clipPath as a snippet prop. 
+	* children:<Snippet<[ { id: string; url: string; useId?: string; } ]>> - Children to render in the `<g>` element that links to the clipPath (if not disabled).
+Provides the id, url, and useId for the clipPath as snippet props. 
+
+	## Related
+
+	[components/ChartClipPath](/docs/components/components/ChartClipPath)
+	[components/CircleClipPath](/docs/components/components/CircleClipPath)
+	[components/RectClipPath](/docs/components/components/RectClipPath)
+	[components/Threshold](/docs/components/components/Threshold)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/ColorRamp.svelte b/docs/src/generated/mini-docs/ColorRamp.svelte
new file mode 100644
index 000000000..70f7b0d14
--- /dev/null
+++ b/docs/src/generated/mini-docs/ColorRamp.svelte
@@ -0,0 +1,64 @@
+
+<!--
+	@component
+	## ColorRamp
+
+	## Description
+
+	Component generates a color ramp (gradient) based on specified colors and stops, useful for mapping data values to colors in visualizations.
+
+	## Category
+
+	[[Other](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Other.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [ColorRamp](/docs/components/ColorRamp)
+
+	## API Properties
+
+	* interpolator:<(t: number) => string>=(t: number) => `hsl(${t * 360}, 100%, 50%)` - The interpolator function to use for the color ramp. 
+	* steps:<number>=10 - The number of steps in the color ramp. 
+	* height:<string | number>='20px' - The height of the color ramp. 
+	* width:<string | number>='100%' - The width of the color ramp. 
+	* ref:<SVGImageElement> - A bindable reference to the underlying `<image>` element. 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { interpolateRgb, interpolateLab, interpolateHclLong } from 'd3-interpolate';
+		import * as d3chromatic from 'd3-scale-chromatic';
+
+		import { ColorRamp } from 'layerchart';
+		import { entries } from '@layerstack/utils';
+
+		let width = $state('100%');
+		let height = $state(20);
+
+		const interpolators: [string, (value: number) => string][] = entries<any, any>(
+			d3chromatic
+		).filter(([key]) => key.startsWith('interpolate'));
+		interpolators.push([`interpolateRgb('red', 'blue')`, interpolateRgb('red', 'blue')]);
+		interpolators.push([`interpolateLab('red', 'blue')`, interpolateLab('red', 'blue')]);
+		interpolators.push([`interpolateHclLong('red', 'blue')`, interpolateHclLong('red', 'blue')]);
+	</script>
+
+	<div class="grid gap-4 h-100 overflow-auto pr-2">
+		{#each interpolators as [name, interpolator]}
+			<div>
+				<div class="text-sm">{name}</div>
+				<svg {width} {height}>
+					<ColorRamp {interpolator} {width} {height} />
+				</svg>
+			</div>
+		{/each}
+		<div class="h-1"></div>
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Connector.svelte b/docs/src/generated/mini-docs/Connector.svelte
new file mode 100644
index 000000000..7eae807af
--- /dev/null
+++ b/docs/src/generated/mini-docs/Connector.svelte
@@ -0,0 +1,92 @@
+
+<!--
+	@component
+	## Connector
+
+	## Description
+
+	Primitive component which draws a line or curve between two points on a chart to illustrate relationships or connections in the data.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Connector](/docs/components/Connector)
+
+	## API Properties
+
+	* source:<ConnectorCoords>={ x: 0, y: 0 } - The coordinates of the start point of the connector.  (REQUIRED)
+	* target:<ConnectorCoords>={ x: 100, y: 100 } - The coordinates of the end point of the connector.  (REQUIRED)
+	* sweep:<ConnectorSweep>='horizontal-vertical' - The sweep direction of the connector. 
+	* type:<ConnectorType>='rounded' - The type of the connector.
+
+Set to `'d3'` to use a D3 curve function via the `curve` prop. 
+	* radius:<number>=20 - The radius of the connector.
+
+Only used when type is `'beveled'` or `'rounded'` 
+	* curve:<CurveFactory>=`d3.curveLinear` - The D3 curve function to use for the connector.
+
+Only used when type is `'d3'` 
+
+	## Related
+
+	[Link](/docs/components/Link)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { Connector, Chart, Layer } from 'layerchart';
+		import ConnectorPlaygroundControls from '$lib/components/controls/ConnectorControls.svelte';
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+		import type { ConnectorSweep, ConnectorType } from '$lib/utils/connectorUtils.js';
+
+		import { movable } from '$lib/actions/movable.js';
+
+		let source = $state({ x: 300, y: 150 });
+		let target = $state({ x: 500, y: 300 });
+
+		let type: ConnectorType = $state('rounded');
+		let curve: ComponentProps<typeof CurveMenuField>['value'] = $state(undefined);
+		let sweep: ConnectorSweep = $state('horizontal-vertical');
+		let radius = $state(60);
+	</script>
+
+	<ConnectorPlaygroundControls bind:type bind:curve bind:sweep bind:radius />
+
+	<Chart padding={{ left: 16, bottom: 24 }} height={400}>
+		<Layer>
+			<Connector {source} {target} {sweep} {type} {radius} {curve} class="stroke-primary stroke-4" />
+			<circle
+				cx={source.x}
+				cy={source.y}
+				r="10"
+				class="cursor-grab fill-info stroke-2 stroke-info"
+				use:movable={{
+					onMove: (e) => {
+						source.x += e.detail.dx;
+						source.y += e.detail.dy;
+					}
+				}}
+			/>
+
+			<circle
+				cx={target.x}
+				cy={target.y}
+				r="10"
+				class="cursor-grab fill-accent stroke-2 stroke-accent"
+				use:movable={{
+					onMove: (e) => {
+						target.x += e.detail.dx;
+						target.y += e.detail.dy;
+					}
+				}}
+			/>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Dagre.svelte b/docs/src/generated/mini-docs/Dagre.svelte
new file mode 100644
index 000000000..f689c516a
--- /dev/null
+++ b/docs/src/generated/mini-docs/Dagre.svelte
@@ -0,0 +1,151 @@
+
+<!--
+	@component
+	## Dagre
+
+	## Description
+
+	Layout component which arranges directed graphs in layers, positioning nodes to minimize edge crossings and create a clear, hierarchical flow.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Dagre](/docs/components/Dagre)
+
+	## API Properties
+
+	* data:<DagreGraphData> - Data of nodes and edges to build graph  (REQUIRED)
+	* nodes:<(d: any) => any>=(d: any) => d.nodes - Function to extract nodes from data 
+	* nodeId:<(d: any) => any>=(d: any) => d.id - Function to extract node ID from node data 
+	* edges:<(d: any) => any>=(d: any) => d.edges - Function to extract edges from data 
+	* directed:<boolean>=true - Set graph as directed (true, default) or undirected (false),
+which does not treat the order of nodes in an edge as significant 
+	* multigraph:<boolean>=false - Allow a graph to have multiple edges between the same pair of nodes 
+	* compound:<boolean>=false - Allow a graph to have compound nodes - nodes which can be the
+`parent` of other nodes 
+	* ranker:<'network-simplex' | 'tight-tree' | 'longest-path'>='network-simplex' - Type of algorithm to assigns a rank to each node in the input graph 
+	* direction:<keyof typeof RankDir>='top-bottom' - Direction for rank nodes 
+	* align:<keyof typeof Align | undefined>=undefined - Alignment for rank nodes 
+	* rankSeparation:<number>=50 - Number of pixels between each rank in the layout 
+	* nodeSeparation:<number>=50 - Number of pixels that separate nodes horizontally in the layout 
+	* edgeSeparation:<number>=10 - Number of pixels that separate edges horizontally in the layout 
+	* nodeWidth:<number>=100 - Default node width if not defined on node 
+	* nodeHeight:<number>=50 - Default node height if not defined on node 
+	* edgeLabelWidth:<number>=100 - Default link label width if not defined on edge 
+	* edgeLabelHeight:<number>=20 - Default edge label height if not defined on edge 
+	* edgeLabelPosition:<keyof typeof EdgeLabelPosition>='center' - Default edge label position 
+	* edgeLabelOffset:<number>=10 - Default pixels to move the label away from the edge if not defined on edge
+Applies only when labelpos is l or r 
+	* filterNodes:<(nodeId: string, graph: dagre.graphlib.Graph) => boolean>=() => true - Filter nodes 
+	* graph:<dagre.graphlib.Graph> - Exposed to access to Dagre Graph instance via `bind:graph` 
+	* children:<Snippet<[ { nodes: Array<dagre.Node>; edges: Array<Edge & EdgeConfig & GraphEdge>; graph: dagre.graphlib.Graph; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { curveBasis } from 'd3-shape';
+		import { cubicOut } from 'svelte/easing';
+		import { slide } from 'svelte/transition';
+		import { cls } from '@layerstack/tailwind';
+		import { Chart, Dagre, Group, Layer, Rect, Spline, Text } from 'layerchart';
+		import DagreControls from '$lib/components/controls/DagreControls.svelte';
+		import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+		import ShowControls from '$lib/components/controls/fields/ShowField.svelte';
+		import { getSimpleGraph } from '$lib/graph.remote';
+
+		let data = await getSimpleGraph();
+		export { data };
+
+		let settings = $state({
+			ranker: 'network-simplex',
+			direction: 'left-right',
+			align: 'up-left',
+			nodeSeparation: 50,
+			rankSeparation: 50,
+			edgeSeparation: 10,
+			edgeLabelPosition: 'center',
+			edgeLabelOffset: 10,
+			curve: curveBasis,
+			arrow: 'arrow'
+		}) satisfies ComponentProps<typeof DagreControls>['settings'];
+
+		let showSettings = $state(false);
+	</script>
+
+	<ShowControls bind:show={showSettings} label="Show Settings" />
+
+	<div class="flex gap-2 pt-6">
+		<div class="flex-1 p-4 border rounded-sm overflow-hidden">
+			<Chart
+				transform={{
+					mode: 'canvas',
+					initialScrollMode: 'scale',
+					motion: { type: 'tween', duration: 800, easing: cubicOut }
+				}}
+				height={500}
+			>
+				<TransformContextControls />
+
+				<Layer>
+					<Dagre data={data as any} edges={(d) => d.links} {...settings}>
+						{#snippet children({ nodes, edges })}
+							<g class="edges">
+								{#each edges as edge, i (edge.v + '-' + edge.w)}
+									<Spline
+										data={edge.points}
+										x="x"
+										y="y"
+										class="stroke-surface-content opacity-30"
+										motion="tween"
+										curve={settings.curve}
+										markerEnd={settings.arrow}
+									/>
+								{/each}
+							</g>
+
+							<g class="nodes">
+								{#each nodes as node (node.label)}
+									<Group x={node.x - node.width / 2} y={node.y - node.height / 2} motion="tween">
+										<Rect
+											width={node.width}
+											height={node.height}
+											class="fill-surface-200 stroke-2 stroke-primary/50"
+											rx={10}
+										/>
+
+										<Text
+											value={node.label}
+											x={node.width / 2}
+											y={node.height / 2}
+											dy={-2}
+											textAnchor="middle"
+											verticalAnchor="middle"
+											class={cls('text-xs pointer-events-none')}
+										/>
+									</Group>
+								{/each}
+							</g>
+						{/snippet}
+					</Dagre>
+				</Layer>
+			</Chart>
+		</div>
+
+		{#if showSettings}
+			<div transition:slide={{ axis: 'x' }}>
+				<DagreControls bind:settings />
+			</div>
+		{/if}
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Ellipse.svelte b/docs/src/generated/mini-docs/Ellipse.svelte
new file mode 100644
index 000000000..b79d146e4
--- /dev/null
+++ b/docs/src/generated/mini-docs/Ellipse.svelte
@@ -0,0 +1,71 @@
+
+<!--
+	@component
+	## Ellipse
+
+	## Description
+
+	Primitive component which draws an oval shape  to highlight areas, emphasize points, or decorate visual elements.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Ellipse](/docs/components/Ellipse)
+
+	## API Properties
+
+	* cx:<number>=0 - The center x position of the ellipse. 
+	* initialCx:<number>=cx - The initial center x position of the ellipse. 
+	* cy:<number>=0 - The center y position of the ellipse. 
+	* initialCy:<number>=cy - The initial center y position of the ellipse. 
+	* rx:<number>=1 - The radius of the ellipse on the x-axis. 
+	* initialRx:<number>=rx - The initial radius of the ellipse on the x-axis. 
+	* ry:<number>=1 - The radius of the ellipse on the y-axis. 
+	* initialRy:<number>=ry - The initial radius of the ellipse on the y-axis. 
+	* ref:<SVGEllipseElement> - A bindable reference to the `<ellipse>` element 
+	* motion:<MotionProp> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Ellipse, Layer } from 'layerchart';
+	</script>
+
+	<Chart
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 10, bottom: 20, left: 24, right: 10 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+			<Ellipse cx={100} cy={100} rx={20} ry={10} />
+			<Ellipse cx={200} cy={200} rx={20} ry={10} class="fill-primary bg-primary" />
+			<Ellipse cx={200} cy={50} rx={20} ry={10} fill="var(--color-secondary)" />
+			<Ellipse
+				cx={300}
+				cy={150}
+				rx={20}
+				ry={10}
+				class="stroke-2 stroke-primary fill-primary/10 bg-primary/10 border-2 border-primary"
+			/>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/ForceSimulation.svelte b/docs/src/generated/mini-docs/ForceSimulation.svelte
new file mode 100644
index 000000000..6f2488777
--- /dev/null
+++ b/docs/src/generated/mini-docs/ForceSimulation.svelte
@@ -0,0 +1,124 @@
+
+<!--
+	@component
+	## ForceSimulation
+
+	## Description
+
+	Layout components which positions nodes using physics-based forces, simulating attraction, repulsion, and link constraints to create an intuitive, collision-free network visualization.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [ForceSimulation](/docs/components/ForceSimulation)
+
+	## API Properties
+
+	* forces:<Forces<NodeDatum, LinkDatum>> - Force simulation parameters  (REQUIRED)
+	* data:<Data<NodeDatum, LinkDatum>> - An object with arrays of nodes and links,
+to be used for position calculation.  (REQUIRED)
+	* alpha:<number>=DEFAULT_ALPHA - Current alpha value of the simulation 
+	* alphaTarget:<number>=DEFAULT_ALPHA_TARGET - Target alpha value for the simulation 
+	* alphaDecay:<number>=DEFAULT_ALPHA_DECAY - Alpha decay rate per tick 
+	* alphaMin:<number>=DEFAULT_ALPHA_MIN - Minimum alpha value at which simulation stops 
+	* velocityDecay:<number>=DEFAULT_VELOCITY_DECAY - Velocity decay factor applied to nodes each tick 
+	* stopped:<boolean>=false - Stop simulation 
+	* static:<boolean>=false - If true, will only update nodes after simulation has completed 
+	* cloneNodes:<boolean>=false - Clone nodes since simulation mutates original 
+	* onStart:<(e: OnStartEvent<NodeDatum, LinkDatum | undefined>) => void> - Callback function triggered when simulation starts 
+	* onNodesChange:<(e: OnNodesChangeEvent<NodeDatum, LinkDatum | undefined>) => void> - Callback function triggered right before nodes get passed to the simulation 
+	* onTick:<(e: OnTickEvent<NodeDatum, LinkDatum | undefined>) => void> - Callback function triggered on each simulation tick 
+	* onEnd:<(e: OnEndEvent<NodeDatum, LinkDatum | undefined>) => void> - Callback function triggered when simulation ends 
+	* children:<Snippet<[ { nodes: NodeDatum[]; links: LinkDatum[]; linkPositions: LinkPosition[]; simulation: Simulation<NodeDatum, LinkDatum>; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { hierarchy, type HierarchyLink, type HierarchyNode } from 'd3-hierarchy';
+		import { forceX, forceY, forceManyBody, forceLink, type SimulationNodeDatum } from 'd3-force';
+
+		import { Chart, Circle, ForceSimulation, Link, Layer, Tooltip } from 'layerchart';
+		import { cls } from '@layerstack/tailwind';
+		import { getFlare } from '$lib/data.remote';
+
+		import type { Prettify } from '@layerstack/utils';
+		type NodeDatum = { name: string; value: number };
+		type MySimulationNodeDatum = Prettify<NodeDatum & SimulationNodeDatum>;
+
+		const data = await getFlare();
+
+		const root: HierarchyNode<MySimulationNodeDatum> = hierarchy<MySimulationNodeDatum>(data);
+		const nodes: HierarchyNode<MySimulationNodeDatum>[] = root.descendants();
+		const links: HierarchyLink<MySimulationNodeDatum>[] = root.links();
+
+		const linkForce = forceLink<
+			HierarchyNode<MySimulationNodeDatum>,
+			HierarchyLink<MySimulationNodeDatum>
+		>(links)
+			.distance(0)
+			.strength(1);
+		const chargeForce = forceManyBody<HierarchyNode<MySimulationNodeDatum>>().strength(-50);
+		const xForce = forceX<HierarchyNode<MySimulationNodeDatum>>();
+		const yForce = forceY<HierarchyNode<MySimulationNodeDatum>>();
+	</script>
+
+	<Chart height={600}>
+		{#snippet children({ context })}
+			<ForceSimulation
+				forces={{
+					link: linkForce,
+					charge: chargeForce,
+					x: xForce,
+					y: yForce
+				}}
+				data={{ nodes, links }}
+				cloneNodes
+			>
+				{#snippet children({ nodes, linkPositions })}
+					<Layer center>
+						{#each links as link, i}
+							<Link data={link} explicitCoords={linkPositions[i]} class="stroke-surface-content/20" />
+						{/each}
+
+						{#each nodes as node ([node.data.name, node.parent?.data?.name].join('-'))}
+							<Circle
+								cx={node.x}
+								cy={node.y}
+								r={3}
+								class={cls(
+									node?.children ? 'fill-surface-100 stroke-surface-content' : 'fill-surface-content'
+								)}
+								onpointermove={(e) => context.tooltip.show(e, node)}
+								onpointerleave={context.tooltip.hide}
+							/>
+						{/each}
+					</Layer>
+				{/snippet}
+			</ForceSimulation>
+
+			<Tooltip.Root>
+				{#snippet children({ data })}
+					<Tooltip.Header>{data.data.name}</Tooltip.Header>
+					<Tooltip.List>
+						{#if data.children}
+							<Tooltip.Item label="children" value={data.children.length} />
+						{/if}
+						{#if data.data.value}
+							<Tooltip.Item label="value" value={data.data.value} format="integer" />
+						{/if}
+					</Tooltip.List>
+				{/snippet}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Frame.svelte b/docs/src/generated/mini-docs/Frame.svelte
new file mode 100644
index 000000000..10d3bebdd
--- /dev/null
+++ b/docs/src/generated/mini-docs/Frame.svelte
@@ -0,0 +1,47 @@
+
+<!--
+	@component
+	## Frame
+
+	## Description
+
+	Commonly used component representing a rectangular Chart bounding box and respecting padding or full size.
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Frame](/docs/components/Frame)
+
+	## API Properties
+
+	* full:<boolean>=false - Whether to include padding area 
+
+	## Related
+
+	[Rect](/docs/components/Rect)
+
+	@example
+	```svelte
+	<script>
+		import { Axis, Chart, Frame, Layer } from 'layerchart';
+	</script>
+
+	<Chart
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 20, bottom: 20, left: 20, right: 20 }}
+		height={300}
+	>
+		<Layer>
+			<Frame class="fill-danger/5" />
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoCircle.svelte b/docs/src/generated/mini-docs/GeoCircle.svelte
new file mode 100644
index 000000000..3be04baf4
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoCircle.svelte
@@ -0,0 +1,125 @@
+
+<!--
+	@component
+	## GeoCircle
+
+	## Description
+
+	Geographic component which displays circular areas on a map to represent a specific geographic region or radius around a point.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoCircle](/docs/components/GeoCircle)
+
+	## API Properties
+
+	* radius:<number>=90 - The radius of the circle in degrees. 
+	* center:<[ number, number ]>=[0, 0] - The center point of the circle in degrees ([longitude, latitude]). 
+	* precision:<number>=6 - The precision of the circle in degrees. 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, GeoCircle, GeoPath, Graticule, Layer, defaultChartPadding } from 'layerchart';
+		import {
+			geoAlbersUsa,
+			geoAlbers,
+			geoEqualEarth,
+			geoEquirectangular,
+			geoMercator,
+			geoNaturalEarth1,
+			geoOrthographic
+		} from 'd3-geo';
+		import { range } from 'd3-array';
+		import { feature } from 'topojson-client';
+		import { getCountriesTopology } from '$lib/geo.remote';
+
+		import GeoCircleControls from '$lib/components/controls/GeoCirclePlaygroundControls.svelte';
+
+		let config = $state({
+			example: 'single' as 'single' | 'multi',
+			latitude: 0,
+			longitude: 0,
+			radius: 600,
+			precision: 6,
+			projection: geoNaturalEarth1
+		});
+
+		const projections = [
+			{ label: 'Albers', value: geoAlbers },
+			{ label: 'Albers USA', value: geoAlbersUsa },
+			{ label: 'Equal Earth', value: geoEqualEarth },
+			{ label: 'Equirectangular', value: geoEquirectangular },
+			{ label: 'Mercator', value: geoMercator },
+			{ label: 'Natural Earth', value: geoNaturalEarth1 },
+			{ label: 'Orthographic', value: geoOrthographic }
+		];
+
+		const topology = await getCountriesTopology();
+		const geojson = $derived(feature(topology, topology.objects.countries));
+		const features = $derived(
+			config.projection === geoAlbersUsa
+				? geojson.features.filter((f) => f.properties.name === 'United States of America')
+				: geojson.features
+		);
+
+		const step = 10;
+		const coordinates = range(-80, 80 + step, step).flatMap((y) => {
+			return range(-180, 180 + step, step).map((x) => {
+				return [x, y];
+			});
+		});
+	</script>
+
+	<GeoCircleControls bind:config {projections} />
+
+	<Chart
+		geo={{
+			projection: config.projection,
+			fitGeojson: geojson
+		}}
+		padding={{ ...defaultChartPadding, left: 10, right: 10 }}
+		height={600}
+	>
+		<Layer>
+			<GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content/30" id="globe" />
+			<Graticule class="stroke-surface-content/20" />
+
+			{#each features as feature}
+				<GeoPath
+					geojson={feature}
+					class="stroke-surface-content/30 fill-surface-content/20 pointer-events-none"
+				/>
+			{/each}
+
+			{#if config.example === 'single'}
+				<GeoCircle
+					center={[config.longitude, config.latitude]}
+					radius={(config.radius / (6371 * Math.PI * 2)) * 360}
+					precision={config.precision}
+					class="fill-danger stroke-none"
+				/>
+			{:else if config.example === 'multi'}
+				{#each coordinates as coords}
+					<GeoCircle
+						center={[coords[0], coords[1]]}
+						radius={step / 4}
+						precision={config.precision}
+						class="stroke-danger"
+					/>
+				{/each}
+			{/if}
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoContext.svelte b/docs/src/generated/mini-docs/GeoContext.svelte
new file mode 100644
index 000000000..b8b65a891
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoContext.svelte
@@ -0,0 +1,136 @@
+
+<!--
+	@component
+	## GeoContext
+
+	## Description
+
+	Geographic component which provides geographic projection and scaling context to children for accurate rendering of geographic data.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoContext](/docs/components/GeoContext)
+
+	## API Properties
+
+	* projection:<() => GeoProjection> - A d3 projection function. Pass this in as an uncalled function, e.g.
+`projection={geoAlbersUsa}`. 
+	* fitGeojson:<GeoPermissibleObjects> - undefined 
+	* fixedAspectRatio:<number> - By default, the map fills to fit the $width and $height. If instead you want a
+fixed-aspect ratio, like for a server-side rendered map, set that here. 
+	* clipAngle:<number> - undefined 
+	* clipExtent:<[ [ number, number ], [ number, number ] ]> - undefined 
+	* rotate:<{ yaw: number; pitch: number; roll: number; }> - undefined 
+	* scale:<number> - undefined 
+	* translate:<[ number, number ]> - undefined 
+	* center:<[ number, number ]> - undefined 
+	* applyTransform:<('scale' | 'translate' | 'rotate')[]> - Apply TransformContext to the selected properties.  Typically `translate` or `rotate` are
+mutually selected 
+	* reflectX:<boolean> - undefined 
+	* reflectY:<boolean> - undefined 
+	* geoContext:<GeoContextValue> - Exposed to allow binding in Chart 
+	* children:<Snippet<[ { geoContext: GeoContextValue; } ]>> - undefined  (REQUIRED)
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import {
+			geoAlbersUsa,
+			geoAlbers,
+			geoEqualEarth,
+			geoEquirectangular,
+			geoMercator,
+			geoNaturalEarth1,
+			geoOrthographic,
+			geoStereographic,
+			geoGnomonic
+		} from 'd3-geo';
+		import { feature } from 'topojson-client';
+
+		import { Chart, GeoPath, Graticule, Layer, Tooltip } from 'layerchart';
+		import { getCountriesTopology, getCountriesDetailTopology } from '$lib/geo.remote';
+		import GeoContextPlaygroundControls from '$lib/components/controls/GeoContextPlaygroundControls.svelte';
+
+		let config = $state({
+			projection: geoOrthographic,
+			detailed: false,
+			rotate: {
+				yaw: 0,
+				pitch: 0,
+				roll: 0
+			},
+			scale: 0
+		});
+
+		const projections = [
+			{ label: 'Albers', value: geoAlbers },
+			{ label: 'Albers USA', value: geoAlbersUsa },
+			{ label: 'Equal Earth', value: geoEqualEarth },
+			{ label: 'Equirectangular', value: geoEquirectangular },
+			{ label: 'Mercator', value: geoMercator },
+			{ label: 'Natural Earth', value: geoNaturalEarth1 },
+			{ label: 'Orthographic', value: geoOrthographic },
+			{ label: 'Stereographic', value: geoStereographic },
+			{ label: 'Gnomonic', value: geoGnomonic }
+		];
+
+		const topology = $derived(
+			await (config.detailed ? getCountriesDetailTopology() : getCountriesTopology())
+		);
+		const geojson = $derived(feature(topology, topology.objects.countries));
+		const features = $derived(
+			config.projection === geoAlbersUsa
+				? geojson.features.filter((f) => f.properties.name === 'United States of America')
+				: geojson.features
+		);
+	</script>
+
+	<GeoContextPlaygroundControls
+		{projections}
+		bind:projection={config.projection}
+		bind:scale={config.scale}
+		bind:detailed={config.detailed}
+		bind:rotate={config.rotate}
+	/>
+
+	<Chart
+		geo={{
+			projection: config.projection,
+			fitGeojson: geojson,
+			rotate: config.rotate,
+			scale: config.scale
+			// applyTransform: ['rotate'],
+		}}
+		padding={{ left: 100, right: 100 }}
+		height={600}
+	>
+		{#snippet children({ context })}
+			<Layer>
+				<GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content fill-blue-400/50" />
+				<Graticule class="stroke-surface-content/20 pointer-events-none" />
+				{#each features as feature}
+					<GeoPath
+						geojson={feature}
+						tooltipContext={context.tooltip}
+						class="stroke-surface-content/50 fill-white hover:fill-gray-300"
+					/>
+				{/each}
+			</Layer>
+
+			<Tooltip.Root>
+				{context.tooltip.data?.properties.name}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoEdgeFade.svelte b/docs/src/generated/mini-docs/GeoEdgeFade.svelte
new file mode 100644
index 000000000..e593d6646
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoEdgeFade.svelte
@@ -0,0 +1,31 @@
+
+<!--
+	@component
+	## GeoEdgeFade
+
+	## Description
+
+	Geographic component which visualizes connections or flows with edges that gradually fade, emphasizing direction and intensity across a map.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoEdgeFade](/docs/components/GeoEdgeFade)
+
+	## API Properties
+
+	* link:<{ source: [ number, number ]; target: [ number, number ]; }> - undefined  (REQUIRED)
+	* ref:<SVGGElement> - A bindable reference to the underlying `<g>` element. 
+	* children:<Snippet> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/GeoPath.svelte b/docs/src/generated/mini-docs/GeoPath.svelte
new file mode 100644
index 000000000..bad846f06
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoPath.svelte
@@ -0,0 +1,103 @@
+
+<!--
+	@component
+	## GeoPath
+
+	## Description
+
+	Geographic component which renders shapes such as countries, states, or regions by drawing their boundaries based on coordinate data.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoPath](/docs/components/GeoPath)
+
+	## API Properties
+
+	* geojson:<GeoPermissibleObjects | null> - GeoJSON data to render 
+	* tooltipContext:<TooltipContextValue | undefined> - Tooltip context to setup pointer events to show tooltip for related data 
+	* onclick:<((e: MouseEvent, geoPath: ReturnType<typeof geoCurvePath> | undefined) => void) | undefined> - Click event handler 
+	* curve:<CurveFactory | CurveFactoryLineOnly>=curveLinearClosed - Curve of path drawn. Imported via d3-shape. 
+	* geoTransform:<(projection: GeoProjection | GeoIdentityTransform) => GeoTransformPrototype> - Apply geo transform to projection.
+Useful to draw straight lines with `geoMercator` projection. 
+	* ref:<SVGPathElement> - A reference to the underlying `<path>` element 
+	* children:<Snippet<[ { geoPath: ReturnType<typeof geoCurvePath> | undefined; } ]>> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[Graticule](/docs/components/Graticule)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { geoAlbersUsa } from 'd3-geo';
+		import { Chart, GeoPath, getSettings, Layer, Tooltip } from 'layerchart';
+		import { getUsCountiesTopology } from '$lib/geo.remote';
+		import { feature } from 'topojson-client';
+
+		const settings = getSettings();
+
+		let topology = $state(await getUsCountiesTopology());
+		const states = feature(topology, topology.objects.states);
+		const counties = feature(topology, topology.objects.counties);
+	</script>
+
+	<Chart
+		geo={{
+			projection: geoAlbersUsa,
+			fitGeojson: states
+		}}
+		height={600}
+	>
+		{#snippet children({ context })}
+			<Layer>
+				{#each states.features as feature}
+					<GeoPath
+						geojson={feature}
+						class="stroke-surface-content fill-surface-100 hover:fill-surface-content/20"
+						tooltipContext={context.tooltip}
+					/>
+				{/each}
+
+				<GeoPath geojson={counties} class="fill-none stroke-surface-content/10 pointer-events-none" />
+			</Layer>
+
+			<!-- Draw tooltip path for canvas since hover: not supported -->
+			<!-- Provides better performance by rendering tooltip path on separate <Canvas> layer -->
+			{#if settings.layer === 'canvas'}
+				<Layer pointerEvents={false}>
+					{#if context.tooltip.data}
+						<GeoPath
+							geojson={context.tooltip.data}
+							class="stroke-surface-content fill-surface-content/20"
+						/>
+					{/if}
+				</Layer>
+			{/if}
+
+			<Tooltip.Root>
+				{#snippet children({ data })}
+					{@const [longitude, latitude] =
+						context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
+					<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>
+				{/snippet}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoPoint.svelte b/docs/src/generated/mini-docs/GeoPoint.svelte
new file mode 100644
index 000000000..11f4b7113
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoPoint.svelte
@@ -0,0 +1,96 @@
+
+<!--
+	@component
+	## GeoPoint
+
+	## Description
+
+	Geographic component which plots individual geographic locations as points on a map to visualize spatial distributions or events.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoPoint](/docs/components/GeoPoint)
+
+	## API Properties
+
+	* lat:<number> - Latitude of the point.  (REQUIRED)
+	* long:<number> - Longitude of the point.  (REQUIRED)
+	* ref:<Element> - A bindable reference to the underlying element, which
+can be a `<circle>` or `<g>` element. 
+	* children:<Snippet<[ { x: number; y: number; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { geoAlbersUsa } from 'd3-geo';
+		import { feature } from 'topojson-client';
+
+		import { Chart, Circle, GeoPath, GeoPoint, getSettings, Layer, Text } from 'layerchart';
+		import { getUsStatesTopology, getUsCapitals } from '$lib/geo.remote';
+
+		const [usData, capitalsData] = await Promise.all([getUsStatesTopology(), getUsCapitals()]);
+		const data = $state({ us: { topology: usData, capitals: capitalsData } });
+
+		const states = feature(data.us.topology, data.us.topology.objects.states);
+
+		let settings = getSettings();
+	</script>
+
+	<Chart
+		geo={{
+			projection: geoAlbersUsa,
+			fitGeojson: states
+		}}
+		height={600}
+	>
+		<Layer>
+			{#each states.features as feature}
+				<GeoPath
+					geojson={feature}
+					class="fill-surface-content/10 stroke-surface-100 hover:fill-surface-content/20"
+				/>
+			{/each}
+
+			<g class="points pointer-events-none">
+				{#each data.us.capitals as capital}
+					<!-- TODO: Improve GeoPoint to standardize svg/canvas -->
+					{#if settings.layer === 'svg'}
+						<GeoPoint lat={capital.latitude} long={capital.longitude}>
+							<Circle r={2} class="fill-white stroke-danger" />
+							<Text
+								y="-6"
+								value={capital.description}
+								textAnchor="middle"
+								class="text-[8px] stroke-surface-100 [stroke-width:2px]"
+							/>
+						</GeoPoint>
+					{:else if settings.layer === 'canvas'}
+						<GeoPoint lat={capital.latitude} long={capital.longitude}>
+							{#snippet children({ x, y })}
+								<Circle cx={x} cy={y} r={2} class="fill-white stroke-danger" />
+								<Text
+									{x}
+									y={y - 6}
+									value={capital.description}
+									textAnchor="middle"
+									class="text-[8px] stroke-surface-100 [stroke-width:2px]"
+								/>
+							{/snippet}
+						</GeoPoint>
+					{/if}
+				{/each}
+			</g>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoSpline.svelte b/docs/src/generated/mini-docs/GeoSpline.svelte
new file mode 100644
index 000000000..cee10e346
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoSpline.svelte
@@ -0,0 +1,81 @@
+
+<!--
+	@component
+	## GeoSpline
+
+	## Description
+
+	Geographic component which renders smooth, curved lines connecting geographic points to represent paths or flows on a map.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoSpline](/docs/components/GeoSpline)
+
+	## API Properties
+
+	* link:<{ source: [ number, number ]; target: [ number, number ]; }> - Link between two points on the globe.  (REQUIRED)
+	* loft:<number>=1.0 - The amount of loft to apply to the middle of the curve. 
+	* curve:<CurveFactory | CurveFactoryLineOnly>=curveNatural - Curve of spline drawn. Imported via d3-shape. 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { geoNaturalEarth1 } from 'd3-geo';
+		import { flatRollup } from 'd3-array';
+		import { feature } from 'topojson-client';
+
+		import { Chart, GeoPath, GeoPoint, GeoSpline, Graticule, Layer } from 'layerchart';
+
+		import { getWorldLinks, getCountriesTopology } from '$lib/geo.remote.js';
+
+		const topology = await getCountriesTopology();
+		const worldLinks = await getWorldLinks();
+
+		const countries = feature(topology, topology.objects.countries);
+
+		// Use a single link per source
+		const singleLinks = flatRollup(
+			worldLinks,
+			(values) => {
+				return values[1];
+			},
+			(d) => d.sourceId
+		).map((d) => d[1]);
+
+		const data = { countries, singleLinks };
+	</script>
+
+	<Chart
+		geo={{
+			projection: geoNaturalEarth1,
+			fitGeojson: countries
+		}}
+		padding={{ top: 16, bottom: 16, left: 16, right: 16 }}
+		height={600}
+	>
+		<Layer>
+			<GeoPath geojson={{ type: 'Sphere' }} class="fill-blue-400/50" />
+			<Graticule class="stroke-surface-content/20" />
+			{#each countries.features as country}
+				<GeoPath geojson={country} class="stroke-surface-content/50 fill-white" />
+			{/each}
+			{#each singleLinks as link}
+				<GeoSpline {link} class="stroke-gray-500/30 stroke-2" />
+				<GeoSpline {link} class="stroke-danger stroke-2" loft={1.3} />
+				<GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class="fill-black" />
+				<GeoPoint lat={link.target[1]} long={link.target[0]} r={2} class="fill-black" />
+			{/each}
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoTile.svelte b/docs/src/generated/mini-docs/GeoTile.svelte
new file mode 100644
index 000000000..a8d107a7a
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoTile.svelte
@@ -0,0 +1,104 @@
+
+<!--
+	@component
+	## GeoTile
+
+	## Description
+
+	Geographic component which renders map tiles in a grid supporting efficient zooming and panning for larger scale maps.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoTile](/docs/components/GeoTile)
+
+	## API Properties
+
+	* url:<(x: number, y: number, z: number) => string> - undefined  (REQUIRED)
+	* zoomDelta:<number>=0 - The zoom delta for the tile. 
+	* tileSize:<number>=256 - The tile size for the tile. 
+	* disableCache:<boolean>=false - Whether to disable the cache for the tile. 
+	* group:<Partial<ComponentProps<typeof Group>>> - Additional props to apply to the `Group` component. 
+	* debug:<boolean>=false - Whether to enable debug mode for the tile. 
+	* children:<Snippet<[ { tiles: any[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { geoMercator } from 'd3-geo';
+		import { feature } from 'topojson-client';
+
+		import { Chart, GeoPath, GeoTile, Layer, Tooltip, getSettings } from 'layerchart';
+		import GeoTileControls from '$lib/components/controls/GeoTileControls.svelte';
+		import { getUsStatesTopology } from '$lib/geo.remote';
+
+		const topology = await getUsStatesTopology();
+		const states = feature(topology, topology.objects.states);
+
+		const filteredStates = {
+			...states,
+			features: states.features.filter(
+				(d) => Number(d.id) < 60 && d.properties.name !== 'Alaska' && d.properties.name !== 'Hawaii'
+			)
+		};
+
+		let selectedFeature: typeof filteredStates | (typeof filteredStates.features)[0] =
+			$state(filteredStates);
+
+		// Simple tile service URL function for OpenStreetMap
+		let serviceUrl = $state<ComponentProps<typeof GeoTile>['url']>(
+			(x: number, y: number, z: number) => `https://tile.openstreetmap.org/${z}/${x}/${y}.png`
+		);
+
+		let zoomDelta = $state(0);
+		let settings = getSettings();
+	</script>
+
+	<GeoTileControls bind:serviceUrl bind:doubleScale={zoomDelta} />
+
+	<Chart
+		geo={{
+			projection: geoMercator,
+			fitGeojson: selectedFeature
+		}}
+		height={600}
+	>
+		{#snippet children({ context })}
+			<Layer>
+				<GeoTile url={serviceUrl} {zoomDelta} debug={settings.debug} />
+				{#each filteredStates.features as feature}
+					<!-- TODO: Renders on canvas if put on separate Layer  -->
+					<GeoPath
+						geojson={feature}
+						tooltipContext={context.tooltip}
+						class="stroke-black/20 hover:fill-white/30"
+						onclick={() => (selectedFeature = selectedFeature === feature ? filteredStates : feature)}
+					/>
+				{/each}
+			</Layer>
+
+			<Tooltip.Root>
+				{#snippet children({ data })}
+					{@const [longitude, latitude] =
+						context.geo.projection?.invert?.([context.tooltip.x, context.tooltip.y]) ?? []}
+					<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>
+				{/snippet}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/GeoVisible.svelte b/docs/src/generated/mini-docs/GeoVisible.svelte
new file mode 100644
index 000000000..37145aefc
--- /dev/null
+++ b/docs/src/generated/mini-docs/GeoVisible.svelte
@@ -0,0 +1,31 @@
+
+<!--
+	@component
+	## GeoVisible
+
+	## Description
+
+	Geographic component which determines and renders only the geographic features currently within the visible map viewport to optimize performance and clarity.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [GeoVisible](/docs/components/GeoVisible)
+
+	## API Properties
+
+	* lat:<number> - Latitude  (REQUIRED)
+	* long:<number> - Longitude  (REQUIRED)
+	* children:<Snippet> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Graticule.svelte b/docs/src/generated/mini-docs/Graticule.svelte
new file mode 100644
index 000000000..025cc8d9f
--- /dev/null
+++ b/docs/src/generated/mini-docs/Graticule.svelte
@@ -0,0 +1,106 @@
+
+<!--
+	@component
+	## Graticule
+
+	## Description
+
+	Geographic component which overlays latitude and longitude lines on a map to provide geographic reference and context.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Graticule](/docs/components/Graticule)
+
+	## API Properties
+
+	* lines:<Partial<ComponentProps<typeof GeoPath>> | boolean | undefined> - undefined 
+	* outline:<Partial<ComponentProps<typeof GeoPath>> | boolean | undefined> - undefined 
+	* stepX:<number> - undefined 
+	* stepY:<number> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import {
+			geoAlbersUsa,
+			geoAlbers,
+			geoEqualEarth,
+			geoEquirectangular,
+			geoMercator,
+			geoNaturalEarth1,
+			geoOrthographic,
+			geoStereographic,
+			geoGnomonic
+		} from 'd3-geo';
+		import { feature } from 'topojson-client';
+
+		import { Chart, GeoPath, Graticule, Layer, Tooltip } from 'layerchart';
+		import GraticuleControls from '$lib/components/controls/GraticuleControls.svelte';
+		import { getCountriesTopology } from '$lib/geo.remote';
+
+		let config = $state({
+			stepX: 10,
+			stepY: 10,
+			projection: geoOrthographic,
+			rotate: {
+				yaw: 0,
+				pitch: -30,
+				roll: 20
+			},
+			scale: 0
+		});
+
+		const projections = [
+			{ label: 'Albers', value: geoAlbers },
+			{ label: 'Albers USA', value: geoAlbersUsa },
+			{ label: 'Equal Earth', value: geoEqualEarth },
+			{ label: 'Equirectangular', value: geoEquirectangular },
+			{ label: 'Mercator', value: geoMercator },
+			{ label: 'Natural Earth', value: geoNaturalEarth1 },
+			{ label: 'Orthographic', value: geoOrthographic },
+			{ label: 'Stereographic', value: geoStereographic },
+			{ label: 'Gnomonic', value: geoGnomonic }
+		];
+
+		const topology = await getCountriesTopology();
+		const geojson = $derived(feature(topology, topology.objects.countries));
+	</script>
+
+	<GraticuleControls bind:config {projections} />
+
+	<Chart
+		geo={{
+			projection: config.projection,
+			fitGeojson: geojson,
+			rotate: config.rotate
+		}}
+		padding={{ top: 10, bottom: 10 }}
+		height={600}
+	>
+		{#snippet children({ context })}
+			<Layer>
+				<GeoPath geojson={{ type: 'Sphere' }} class="stroke-surface-content" />
+				<Graticule
+					stepX={config.stepX}
+					stepY={config.stepY}
+					class="stroke-surface-content/20 pointer-events-none"
+				/>
+			</Layer>
+
+			<Tooltip.Root>
+				{context.tooltip.data?.properties.name}
+			</Tooltip.Root>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Grid.svelte b/docs/src/generated/mini-docs/Grid.svelte
new file mode 100644
index 000000000..dc4b99e1b
--- /dev/null
+++ b/docs/src/generated/mini-docs/Grid.svelte
@@ -0,0 +1,51 @@
+
+<!--
+	@component
+	## Grid
+
+	## Description
+
+	Commonly used component which draws horizontal and vertical lines respecting scales across a chart to enhance readability and help align data points with axis values.
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Grid](/docs/components/Grid)
+
+	## API Properties
+
+	* x:<boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>>=false - Draw a x-axis lines 
+	* y:<boolean | Pick<SVGAttributes<SVGElement>, 'class' | 'style'>>=false - Draw a y-axis lines 
+	* xTicks:<TicksConfig> - Control the number of x-axis ticks 
+	* yTicks:<TicksConfig>=!isScaleBand(ctx.yScale) ? 4 : undefined - Control the number of y-axis ticks 
+	* bandAlign:<'center' | 'between'>='center' - Line alignment when band scale is used (x or y axis) 
+	* radialY:<'circle' | 'linear'>='circle' - Render `y` lines with circles or linear splines 
+	* classes:<{ root?: string; line?: string; }>={} - Classes to apply to the rendered elements. 
+	* transitionIn:<In>=defaults to fade if motion is tweened - Transition function for entering elements 
+	* transitionInParams:<TransitionParams<In>>={ easing: cubicIn } - Parameters for the transitionIn function 
+	* ref:<SVGGElement> - A reference to the underlying outermost `<g>` element. 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[Axis](/docs/components/Axis)
+	[Rule](/docs/components/Rule)
+
+	@example
+	```svelte
+	<script>
+		import { Chart, Grid, Layer } from 'layerchart';
+	</script>
+
+	<Chart xDomain={[0, 100]} yDomain={[0, 100]} height={300}>
+		<Layer>
+			<Grid x y />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Group.svelte b/docs/src/generated/mini-docs/Group.svelte
new file mode 100644
index 000000000..11ec026f5
--- /dev/null
+++ b/docs/src/generated/mini-docs/Group.svelte
@@ -0,0 +1,62 @@
+
+<!--
+	@component
+	## Group
+
+	## Description
+
+	Primitive component which clusters multiple chart elements together, allowing them to be managed, styled, or transformed as a single unit.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [HTML](/docs/components/html)
+
+	Full Documentation: [Group](/docs/components/Group)
+
+	## API Properties
+
+	* x:<number> - Translate x 
+	* initialX:<number>=x - Initial translate x 
+	* y:<number> - Translate y 
+	* initialY:<number>=y - Initial translate y 
+	* center:<boolean | 'x' | 'y'>=false - Center within chart 
+	* preventTouchMove:<boolean>=false - Prevent `touchmove` default, which can interfere with `pointermove` when
+used with `Tooltip`, for example. 
+	* opacity:<number> - The opacity of the element. (0 to 1) 
+	* children:<Snippet> - undefined 
+	* ref:<Element> - A reference to the rendered DOM element, which could be
+either nothing, a `<g>` element (when using `<Svg>`), or a `<div>` element
+(when using `<Html>`). 
+	* motion:<MotionProp> - undefined 
+	* transitionIn:<In>=defaults to fade if the motion prop is set to tweened - Transition function for entering elements 
+	* transitionInParams:<TransitionParams<In>>={ easing: cubicIn } - Parameters for the transitionIn function 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Circle, Group, Text, Layer } from 'layerchart';
+	</script>
+
+	<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={{ bottom: 20, left: 20 }} height={300}>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+			<Group center>
+				<Circle r={20} class="fill-surface-content" />
+			</Group>
+			<Group x={100} y={100}>
+				<Circle r={10} class="fill-surface-content" />
+				<Text value="point" textAnchor="middle" verticalAnchor="start" class="text-xs" dy={12} />
+			</Group>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Highlight.svelte b/docs/src/generated/mini-docs/Highlight.svelte
new file mode 100644
index 000000000..45f49ef9e
--- /dev/null
+++ b/docs/src/generated/mini-docs/Highlight.svelte
@@ -0,0 +1,44 @@
+
+<!--
+	@component
+	## Highlight
+
+	## Description
+
+	Interaction component manages and displays tooltips allowing dynamic information to appear in response to user interactions.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Highlight](/docs/components/Highlight)
+
+	## API Properties
+
+	* data:<any> - Highlight specific data (annotate), especte uses tooltip data 
+	* x:<Accessor> - Override `x` from context 
+	* y:<Accessor> - Override `y` from context 
+	* axis:<'x' | 'y' | 'both' | 'none'> - undefined 
+	* points:<boolean | Partial<ComponentProps<typeof Circle>> | Snippet<[ { points: { x: number; y: number; fill: string; data: HighlightPointData; }[]; } ]>>=false - Show points and pass props to Circles 
+	* lines:<boolean | Partial<ComponentProps<typeof Line>> | Snippet<[ { lines: { x1: number; y1: number; x2: number; y2: number; }[]; } ]>>=false - Show lines and pass props to Lines 
+	* area:<boolean | Partial<ComponentProps<typeof Rect>> | Snippet<[ { area: { x: number; y: number; width: number; height: number; }; } ]>>=false - Show area and pass props to Rect 
+	* bar:<boolean | Partial<ComponentProps<typeof Bar>> | Snippet>=false - Show bar and pass props to Rect 
+	* motion:<MotionProp>=true - Set to false to disable spring transitions 
+	* opacity:<number> - The opacity of the element. (0 to 1) 
+	* onAreaClick:<(e: MouseEvent, detail: { data: any; }) => void> - undefined 
+	* onBarClick:<(e: MouseEvent, detail: { data: any; }) => void> - undefined 
+	* onPointClick:<(e: MouseEvent, detail: { point: HighlightPoint; data: any; }) => void> - undefined 
+	* onPointEnter:<(e: MouseEvent, detail: { point: HighlightPoint; data: any; }) => void> - undefined 
+	* onPointLeave:<(e: MouseEvent, detail: { point: HighlightPoint; data: any; }) => void> - undefined 
+
+	## Related
+
+	[Tooltip](/docs/components/Tooltip)
+	[TooltipContext](/docs/components/TooltipContext)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Html.svelte b/docs/src/generated/mini-docs/Html.svelte
new file mode 100644
index 000000000..1213de849
--- /dev/null
+++ b/docs/src/generated/mini-docs/Html.svelte
@@ -0,0 +1,37 @@
+
+<!--
+	@component
+	## Html
+
+	## Description
+
+	Html layer
+
+	## Category
+
+	[[Layers](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layers.md)]
+
+	## Layers
+
+	[](/docs/components/)
+
+	Full Documentation: [Html](/docs/components/Html)
+
+	## API Properties
+
+	* ref:<HTMLElement> - A reference to the layer's outermost `<div>` tag. 
+	* zIndex:<number> - The layer's z-index. 
+	* pointerEvents:<boolean> - Set this to `false` to set `pointer-events: none;` on the entire layer. 
+	* role:<string> - A string passed to the `aria-role` on the `<div>` tag.
+This is `undefined` by default but will be set by default to `'figure'`
+if `label`, `labelledby` or `describedby` is set. That default will be overridden by whatever is passed in. 
+	* center:<boolean | 'x' | 'y'> - Translate children to center (useful for radial layouts) 
+	* ignoreTransform:<boolean> - Ignore TransformContext.  Useful to add static elements such as legends. 
+	* children:<Snippet<[ { ref: HTMLElement; } ]>> - undefined 
+
+	## Related
+
+	[Layer](/docs/components/Layer)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Hull.svelte b/docs/src/generated/mini-docs/Hull.svelte
new file mode 100644
index 000000000..2c1c8dbe4
--- /dev/null
+++ b/docs/src/generated/mini-docs/Hull.svelte
@@ -0,0 +1,87 @@
+
+<!--
+	@component
+	## Hull
+
+	## Description
+
+	Marking component which encloses a set of data points within a convex boundary to highlight clusters or groupings on a chart.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Hull](/docs/components/Hull)
+
+	## API Properties
+
+	* data:<any> - Override data instead of using context 
+	* curve:<ComponentProps<typeof Spline>['curve']>=curveLinearClosed - The curve factory to use for the hull 
+	* classes:<{ root?: string; path?: string; }> - Classes to apply to the elements. 
+	* onpointermove:<(e: PointerEvent, details: { points: [ number, number ][]; polygon: Delaunay.Polygon; }) => void> - undefined 
+	* onclick:<(e: MouseEvent, details: { points: [ number, number ][]; polygon: Delaunay.Polygon; }) => void> - undefined 
+	* onpointerleave:<(e: PointerEvent) => void> - undefined 
+	* ref:<SVGGElement> - A bindable reference to the wrapping `<g>` element. 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { group } from 'd3-array';
+		import { scaleOrdinal } from 'd3-scale';
+		import { curveLinearClosed } from 'd3-shape';
+		import { Axis, Chart, Hull, Layer, Points } from 'layerchart';
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+		import { getGroupData } from '$lib/data.remote';
+
+		let data = $state(await getGroupData());
+		let curve = $state(curveLinearClosed);
+
+		const groupColor = scaleOrdinal([
+			'var(--color-info)',
+			'var(--color-warning)',
+			'var(--color-danger)'
+		]);
+	</script>
+
+	<CurveMenuField bind:value={curve} showOpenClosed />
+
+	<Chart
+		{data}
+		x="x"
+		xNice
+		xPadding={[10, 10]}
+		y="y"
+		yPadding={[10, 10]}
+		yNice
+		padding={20}
+		height={300}
+	>
+		{@const dataByGroup = group(data, (d: any) => d.group)}
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			{#each dataByGroup as [group, data]}
+				{@const color = groupColor(group)}
+				<Points r={3} {data} fill={color} />
+				<!-- TODO: handle group color differently to work with Canvas -->
+				<Hull
+					{data}
+					{curve}
+					style="--group-color:{color}"
+					classes={{
+						path: 'pointer-events-none stroke-[var(--group-color)] fill-[var(--group-color)] [fill-opacity:0.1]'
+					}}
+				/>
+			{/each}
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Labels.svelte b/docs/src/generated/mini-docs/Labels.svelte
new file mode 100644
index 000000000..08d3304ae
--- /dev/null
+++ b/docs/src/generated/mini-docs/Labels.svelte
@@ -0,0 +1,42 @@
+
+<!--
+	@component
+	## Labels
+
+	## Description
+
+	Marking component which displays text directly on a chart to identify or annotate specific data points.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Labels](/docs/components/Labels)
+
+	## API Properties
+
+	* data:<T> - Override data instead of using context 
+	* value:<Accessor<T>> - Override display value accessor.  By default, uses `y` unless yScale is band scale 
+	* fill:<string | Accessor<T>> - The fill color of the label, which can either be a string or an accessor function
+that returns a valid `fill` color value.
+
+The accessor is useful for dynamic fill colors based on the data the label represents. 
+	* x:<Accessor<T>> - Override `x` accessor from Chart context 
+	* y:<Accessor<T>> - Override `y` accessor from Chart context 
+	* placement:<'inside' | 'outside' | 'center'>='outside' - The placement of the label relative to the point 
+	* offset:<number>=placement === 'center' ? 0 : 4 - The offset of the label from the point 
+	* format:<FormatType | FormatConfig> - The format of the label 
+	* key:<(d: T, index: number) => any>=(d, index) => index - Define unique value for {#each} `(key)` expressions to improve transitions.
+`index` position used by default 
+	* children:<Snippet<[ { data: Point; textProps: ComponentProps<typeof Text>; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Layer.svelte b/docs/src/generated/mini-docs/Layer.svelte
new file mode 100644
index 000000000..2da7c93b0
--- /dev/null
+++ b/docs/src/generated/mini-docs/Layer.svelte
@@ -0,0 +1,31 @@
+
+<!--
+	@component
+	## Layer
+
+	## Description
+
+	Convientent wrapper to use Svg, Canvas, or Html layer
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Layer](/docs/components/Layer)
+
+	## API Properties
+
+	* onpointermove:<(e: PointerEvent) => void> - undefined 
+
+	## Related
+
+	[Canvas](/docs/components/Canvas)
+	[Html](/docs/components/Html)
+	[Svg](/docs/components/Svg)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Legend.svelte b/docs/src/generated/mini-docs/Legend.svelte
new file mode 100644
index 000000000..552cbfb44
--- /dev/null
+++ b/docs/src/generated/mini-docs/Legend.svelte
@@ -0,0 +1,64 @@
+
+<!--
+	@component
+	## Legend
+
+	## Description
+
+	Commonly used component which explains the symbols, colors, or patterns used in a chart, helping interpret the represented data categories. Filtering and toggling visibility of data series can be enabled for interactivity.
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[HTML](/docs/components/html)
+
+	Full Documentation: [Legend](/docs/components/Legend)
+
+	## API Properties
+
+	* scale:<AnyScale> - undefined 
+	* title:<string>='' - The title of the legend. 
+	* width:<number>=320 - The width of the legend. 
+	* height:<number>=10 - The height of the legend. 
+	* ticks:<number>=width / 64 - The number of ticks to show on the scale. 
+	* tickFormat:<FormatType | FormatConfig> - undefined 
+	* tickValues:<any[]> - undefined 
+	* tickFontSize:<number>=10 - The font size of the tick labels. 
+	* tickLength:<number>=4 - The length of the tick marks. 
+	* placement:<Placement> - The placement of the legend. 
+	* orientation:<'horizontal' | 'vertical'>='horizontal' - The orientation of the legend. 
+	* variant:<'ramp' | 'swatches'>='ramp' - Determine display ramp (individual color swatches or continuous ramp) 
+	* selected:<string[]> - An array of selected items. If provided, the legend fades unselected items. 
+	* classes:<{ root?: string; title?: string; label?: string; tick?: string; items?: string; swatch?: string; item?: string | ((item: LegendItem) => string); }>={} - Classes to apply to the elements. 
+	* onclick:<(e: MouseEvent, detail: LegendItem) => any> - undefined 
+	* onpointerenter:<(e: MouseEvent, detail: LegendItem) => any> - undefined 
+	* onpointerleave:<(e: MouseEvent, detail: LegendItem) => any> - undefined 
+	* ref:<HTMLElement> - A bindable reference to the wrapping `<div>` element. 
+	* children:<Snippet<[ { values: any[]; scale: AnyScale | null; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script>
+		import { Legend } from 'layerchart';
+		import { scaleSequential } from 'd3-scale';
+		import { interpolateViridis } from 'd3-scale-chromatic';
+	</script>
+
+	<div class="grid gap-6">
+		<Legend scale={scaleSequential([0, 100], interpolateViridis)} title="Temperature (°F)" />
+
+		<Legend
+			scale={scaleSequential([0, 100], interpolateViridis)}
+			title="Temperature (°F)"
+			variant="swatches"
+		/>
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Line.svelte b/docs/src/generated/mini-docs/Line.svelte
new file mode 100644
index 000000000..efdab7c4b
--- /dev/null
+++ b/docs/src/generated/mini-docs/Line.svelte
@@ -0,0 +1,76 @@
+
+<!--
+	@component
+	## Line
+
+	## Description
+
+	Primitive component which draws a straight line on a chart to represent trends, connections, or boundaries between data points.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Line](/docs/components/Line)
+
+	## API Properties
+
+	* x1:<number> - The x-coordinate of the line's starting point  (REQUIRED)
+	* initialX1:<number>=x1 - The initial x-coordinate of the line's starting point (defaults to x1 if not provided) 
+	* y1:<number> - The y-coordinate of the line's starting point  (REQUIRED)
+	* initialY1:<number>=y1 - The initial y-coordinate of the line's starting point (defaults to y1 if not provided) 
+	* x2:<number> - The x-coordinate of the line's ending point  (REQUIRED)
+	* initialX2:<number>=x2 - The initial x-coordinate of the line's ending point (defaults to x2 if not provided) 
+	* y2:<number>=y2 - The y-coordinate of the line's ending point  (REQUIRED)
+	* initialY2:<number>=y2 - The initial y-coordinate of the line's ending point (defaults to y2 if not provided) 
+	* marker:<MarkerOptions> - Marker to attach to both start and end points of the line 
+	* markerStart:<MarkerOptions> - Marker to attach to the start point of the line 
+	* markerMid:<MarkerOptions> - Marker to attach to the mid point of the line 
+	* markerEnd:<MarkerOptions> - Marker to attach to the end point of the line 
+	* motion:<MotionProp> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[Rule](/docs/components/Rule)
+	[Spline](/docs/components/Spline)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Line, Layer } from 'layerchart';
+	</script>
+
+	<Chart
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 10, bottom: 20, left: 20, right: 10 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+			<Line x1={100} y1={100} x2={200} y2={200} strokeWidth={10} class="stroke-primary bg-primary" />
+			<Line x1={50} y1={150} x2={400} y2={150} class="stroke-2 stroke-secondary bg-secondary" />
+			<Line
+				x1={50}
+				y1={10}
+				x2={400}
+				y2={50}
+				class="stroke-2 stroke-accent bg-accent"
+				markerStart="circle"
+				markerEnd="arrow"
+			/>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/LineChart.svelte b/docs/src/generated/mini-docs/LineChart.svelte
new file mode 100644
index 000000000..5a463dff3
--- /dev/null
+++ b/docs/src/generated/mini-docs/LineChart.svelte
@@ -0,0 +1,43 @@
+
+<!--
+	@component
+	## LineChart
+
+	## Description
+
+	Streamlined visualization of data points connected by lines to visualize trends or changes over time.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [LineChart](/docs/components/LineChart)
+
+	## API Properties
+
+	* orientation:<'vertical' | 'horizontal'>='horizontal' - The orientation of the line chart. 
+	* props:<LineChartPropsObjProp> - undefined 
+	* spline:<SimplifiedChartSnippet<TData, typeof Spline, LineChartExtraSnippetProps<TData> & { props: ComponentProps<typeof Spline>; seriesIndex: number; }>> - undefined 
+	* onPointClick:<(e: MouseEvent, details: { data: HighlightPointData; series: SeriesData<TData, typeof Spline>; }) => void> - The event to be dispatched when the point is clicked. 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Spline](/docs/components/Spline)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { LineChart, defaultChartPadding } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+	</script>
+
+	<LineChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300} />
+	```
+-->
diff --git a/docs/src/generated/mini-docs/LinearGradient.svelte b/docs/src/generated/mini-docs/LinearGradient.svelte
new file mode 100644
index 000000000..eba1fab19
--- /dev/null
+++ b/docs/src/generated/mini-docs/LinearGradient.svelte
@@ -0,0 +1,70 @@
+
+<!--
+	@component
+	## LinearGradient
+
+	## Description
+
+	Fill component providing a linear gradient fill pattern for chart elements.
+
+	## Category
+
+	[[Fill](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Fill.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [LinearGradient](/docs/components/LinearGradient)
+
+	## API Properties
+
+	* id:<string> - Unique id for linearGradient 
+	* stops:<string[] | [ string | number, string ][]>=`['var(--tw-gradient-from)', 'var(--tw-gradient-to)']` - Array array of strings (colors), will equally distributed from 0-100%.
+If array of tuples, will use first value as the offset, and second as color 
+	* vertical:<boolean>=false - Apply color stops top-to-bottom (true) or left-to-right (false) 
+	* x1:<string>='0%' - undefined 
+	* y1:<string>='0%' - undefined 
+	* x2:<string>=vertical ? '0%' : '100%' - undefined 
+	* y2:<string>=vertical ? '100%' : '0%' - undefined 
+	* rotate:<number> - Rotate the gradient by a given angle in degrees 
+	* units:<'objectBoundingBox' | 'userSpaceOnUse'>='objectBoundingBox' - Define the coordinate system for attributes (i.e. gradientUnits) 
+	* ref:<SVGLinearGradientElement> - A bindable reference to the underlying `<linearGradient>` element 
+	* stopsContent:<Snippet> - Render as a child of the gradient and will opt out of the default stops
+being rendered. 
+	* children:<Snippet<[ { id: string; gradient: string; } ]>> - undefined 
+
+	## Related
+
+	[RadialGradient](/docs/components/RadialGradient)
+	[Pattern](/docs/components/Pattern)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Layer, LinearGradient, Rect } from 'layerchart';
+	</script>
+
+	<Chart height={300}>
+		<Layer>
+			<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} rotate={45}>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 1} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+
+			<LinearGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} vertical>
+				{#snippet children({ gradient })}
+					<Rect x={120 * 2} y={0} width={100} height={300} rx={8} fill={gradient} />
+				{/snippet}
+			</LinearGradient>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Link.svelte b/docs/src/generated/mini-docs/Link.svelte
new file mode 100644
index 000000000..36f3c2418
--- /dev/null
+++ b/docs/src/generated/mini-docs/Link.svelte
@@ -0,0 +1,44 @@
+
+<!--
+	@component
+	## Link
+
+	## Description
+
+	Marking component which highlights or connects specific data points on a chart to emphasize relationships or sequences.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Link](/docs/components/Link)
+
+	## API Properties
+
+	* data:<any> - undefined 
+	* sankey:<boolean>=false - Update source and target accessors to be compatible with d3-sankey.  see: https://github.com/d3/d3-sankey#sankeyLinkHorizontal 
+	* source:<(d: any) => any> - undefined 
+	* target:<(d: any) => any> - undefined 
+	* orientation:<'vertical' | 'horizontal'> - Convenient property to swap x/y accessor logic 
+	* x:<(d: any) => any> - undefined 
+	* y:<(d: any) => any> - undefined 
+	* curve:<CurveFactory> - undefined 
+	* marker:<MarkerOptions> - Marker to attach to both start and end points of the line 
+	* markerMid:<MarkerOptions> - Marker to attach to the middle point of the line 
+	* markerStart:<MarkerOptions> - Marker to attach to the start point of the line 
+	* markerEnd:<MarkerOptions> - Marker to attach to the end point of the line 
+	* explicitCoords:<{ x1: number; y1: number; x2: number; y2: number; }> - Apply explicit coordinates to the line. Useful when dealing with
+force simulation links. 
+	* motion:<MotionTweenOption | MotionNoneOption> - undefined 
+
+	## Related
+
+	[Connector](/docs/components/Connector)
+	[Points](/docs/components/Points)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Marker.svelte b/docs/src/generated/mini-docs/Marker.svelte
new file mode 100644
index 000000000..7d6e646ed
--- /dev/null
+++ b/docs/src/generated/mini-docs/Marker.svelte
@@ -0,0 +1,99 @@
+
+<!--
+	@component
+	## Marker
+
+	## Description
+
+	Primitive component which draws visual symbols like circles, squares, or custom shapes at individual data points.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [Marker](/docs/components/Marker)
+
+	## API Properties
+
+	* type:<'arrow' | 'triangle' | 'line' | 'circle' | 'circle-stroke' | 'dot'> - The type of marker to render (e.g., arrow, triangle, etc.)
+
+Pass `children` to render a custom element/component inside the marker instead. 
+	* id:<string> - Unique identifier for the marker 
+	* size:<number>=10 - Size of the marker
+(used as default for width and height if not overridden) 
+	* markerWidth:<string | number>=size - Width of the marker (can be a string or number) 
+	* markerHeight:<string | number>=size - Height of the marker (can be a string or number) 
+	* markerUnits:<'userSpaceOnUse' | 'strokeWidth'>='userSpaceOnUse' - Units for marker dimensions ('userSpaceOnUse' or 'strokeWidth') 
+	* orient:<'auto' | 'auto-start-reverse' | number>='auto-start-reverse' - Orientation of the marker
+('auto', 'auto-start-reverse', or a specific angle in degrees) 
+	* refX:<string | number>=9 if type is 'arrow' or 'triangle', otherwise 5 - X-coordinate offset of the marker's reference point 
+	* refY:<string | number>=5 - Y-coordinate offset of the marker's reference point 
+	* viewBox:<string>='0 0 10 10' - Viewbox defining the coordinate system for the marker (e.g., '0 0 10 10') 
+
+	## Related
+
+	[Spline](/docs/components/Spline)
+	[Line](/docs/components/Line)
+	[Rule](/docs/components/Rule)
+	[GeoSpline](/docs/components/GeoSpline)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { Chart, Spline, Layer } from 'layerchart';
+		import MarkerControls from '$lib/components/controls/MarkerControls.svelte';
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+
+		let config = $state({
+			show: true,
+			markerStart: true,
+			markerEnd: true,
+			tweened: true,
+			pathGenerator: (x: number) => x,
+			curve: undefined as ComponentProps<typeof CurveMenuField>['value'],
+			pointCount: 10,
+			amplitude: 1,
+			frequency: 10,
+			phase: 0
+		});
+
+		const markerTypes = ['arrow', 'triangle', 'dot', 'circle', 'circle-stroke', 'line'] as const;
+
+		const motion = $derived(config.tweened ? 'tween' : 'none');
+		const data = $derived(
+			Array.from({ length: config.pointCount }).map((_, i) => {
+				return {
+					x: i + 1,
+					y: config.pathGenerator(i / config.pointCount) ?? i
+				};
+			})
+		);
+	</script>
+
+	<MarkerControls bind:config />
+
+	<div class="grid gap-2">
+		{#each markerTypes as marker}
+			<div>{marker}</div>
+			<Chart {data} x="x" y="y" height={100}>
+				<Layer>
+					{#if config.show}
+						<Spline
+							curve={config.curve}
+							class="stroke-primary"
+							markerStart={config.markerStart ? marker : undefined}
+							markerEnd={config.markerEnd ? marker : undefined}
+							{motion}
+						/>
+					{/if}
+				</Layer>
+			</Chart>
+		{/each}
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/MotionPath.svelte b/docs/src/generated/mini-docs/MotionPath.svelte
new file mode 100644
index 000000000..512db416d
--- /dev/null
+++ b/docs/src/generated/mini-docs/MotionPath.svelte
@@ -0,0 +1,96 @@
+
+<!--
+	@component
+	## MotionPath
+
+	## Description
+
+	Component animates an object along a specified path using configurable motion parameters such as speed, duration, and easing.
+
+	## Category
+
+	[[Other](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Other.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [MotionPath](/docs/components/MotionPath)
+
+	## API Properties
+
+	* pathId:<string> - Id of path to move object along 
+	* objectId:<string> - Id of object to move along path 
+	* duration:<string> - Duration of the animation  (REQUIRED)
+	* repeatCount:<number | 'indefinite'> - Number of times the animation will occur 
+	* fill:<'freeze' | 'remove'>='freeze' - Final state of the animation.  Freeze (last frame) or remove (first frame)
+https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill#animate 
+	* rotate:<number | 'auto' | 'auto-reverse'> - Rotation applied to the element animated along a path, usually to make it pointing
+in the direction of the animation 
+	* ref:<SVGAnimateMotionElement> - A bindable reference to the underlying `<animateMotion>` element. 
+	* children:<Snippet<[ { pathId: string; objectId: string; } ]>> - undefined 
+
+	## Related
+
+	[Spline](/docs/components/Spline)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+
+		import { Axis, Chart, Layer, MotionPath, Polygon, Spline } from 'layerchart';
+
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+		import MotionPathControls from '$lib/components/controls/MotionPathControls.svelte';
+
+		let config = $state({
+			pointCount: 100,
+			pathGenerator: (x: number) => x,
+			curve: undefined as ComponentProps<typeof CurveMenuField>['value'],
+			amplitude: 1,
+			frequency: 10,
+			phase: 0,
+			show: true,
+			duration: '5s',
+			repeatCount: 'indefinite' as number | 'indefinite',
+			start: undefined as string | undefined
+		});
+
+		const data = $derived(
+			Array.from({ length: config.pointCount }).map((_, i) => {
+				return {
+					x: i + 1,
+					y: config.pathGenerator(i / config.pointCount) ?? i
+				};
+			})
+		);
+	</script>
+
+	<MotionPathControls bind:config />
+
+	<Chart {data} x="x" y="y" yNice padding={{ left: 16, bottom: 24 }} height={300}>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			{#if config.show}
+				<MotionPath
+					duration={config.duration}
+					repeatCount={config.repeatCount}
+					{...config.start ? { begin: config.start } : {}}
+				>
+					{#snippet children({ pathId, objectId })}
+						<Spline id={pathId} curve={config.curve} />
+						<Polygon
+							id={objectId}
+							r={10}
+							points={3}
+							class="stroke-surface-content fill-surface-100"
+						/>
+					{/snippet}
+				</MotionPath>
+			{/if}
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Pack.svelte b/docs/src/generated/mini-docs/Pack.svelte
new file mode 100644
index 000000000..2da874716
--- /dev/null
+++ b/docs/src/generated/mini-docs/Pack.svelte
@@ -0,0 +1,187 @@
+
+<!--
+	@component
+	## Pack
+
+	## Description
+
+	Layout component which creates a space-efficient, circular layout to represent hierarchical data, where each node is depicted as a circle sized according to its value and nested within its parent node.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Pack](/docs/components/Pack)
+
+	## API Properties
+
+	* hierarchy:<HierarchyNode<T>> - d3 hierarchy node  (REQUIRED)
+	* size:<[ number, number ]> - The size of the pack layout. 
+	* padding:<number> - The padding between nodes in the pack layout. 
+	* nodes:<HierarchyCircularNode<T>[]> - A bindable reference to the computed packed nodes. 
+	* children:<Snippet<[ { nodes: HierarchyCircularNode<T>[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { cubicOut } from 'svelte/easing';
+		import { fade } from 'svelte/transition';
+		import { hierarchy, type HierarchyCircularNode, type HierarchyNode } from 'd3-hierarchy';
+		import { scaleSequential, scaleOrdinal } from 'd3-scale';
+		import * as chromatic from 'd3-scale-chromatic';
+		import { hsl } from 'd3-color';
+
+		import {
+			Chart,
+			Circle,
+			Group,
+			Pack,
+			Layer,
+			Text,
+			findAncestor,
+			type ChartContextValue
+		} from 'layerchart';
+		import { Breadcrumb, Button } from 'svelte-ux';
+		import { format, sortFunc } from '@layerstack/utils';
+		import PackControls from '$lib/components/controls/PackControls.svelte';
+		import { getFlare } from '$lib/data.remote';
+
+		let colorBy: 'depth' | 'parent' | 'children' = $state('parent');
+		let padding = $state(3);
+		let nodes = $state.raw<HierarchyCircularNode<any>[]>([]);
+		let selected = $state.raw<HierarchyCircularNode<any>>();
+		let context = $state<ChartContextValue>(null!);
+
+		// Move until https://github.com/sveltejs/svelte/issues/17090 is resolved
+		let data = await getFlare();
+
+		const complexHierarchy = hierarchy(data)
+			.sum((d) => d.value)
+			.sort(sortFunc('value', 'desc')) as HierarchyCircularNode<any>;
+
+		$effect(() => {
+			if (context?.transform && selected) {
+				const node = findSelectedNodeInHierarchy(selected, nodes);
+				const diameter = node.r * 2;
+				context.transform.zoomTo({ x: node.x, y: node.y }, { width: diameter, height: diameter });
+			}
+		});
+
+		const sequentialColor = scaleSequential([4, -1], chromatic.interpolateGnBu);
+		// filter out hard to see yellow and green
+		const ordinalColor = scaleOrdinal(
+			chromatic.schemeSpectral[9].filter((c) => hsl(c).h < 60 || hsl(c).h > 90)
+		);
+		// const ordinalColor = scaleOrdinal(chromatic.schemeCategory10)
+
+		function getNodeColor(node: HierarchyNode<any>, colorBy: string) {
+			switch (colorBy) {
+				case 'children':
+					return node.children ? '#ccc' : '#ddd';
+				case 'depth':
+					return sequentialColor(node.depth).toString();
+				case 'parent':
+					const colorParent = findAncestor(node, (n) => n.depth === 1);
+					return colorParent
+						? hsl(ordinalColor(colorParent.data.name))
+								.brighter(node.depth * 0.3)
+								.toString()
+						: '#ddd';
+			}
+			return '';
+		}
+
+		function findSelectedNodeInHierarchy(
+			selectedNode: HierarchyCircularNode<any>,
+			hierarchy: HierarchyCircularNode<any>[]
+		): HierarchyCircularNode<any> {
+			for (const node of hierarchy) {
+				if (node.data.name === selectedNode.data.name) {
+					return node;
+				}
+			}
+			return selectedNode;
+		}
+	</script>
+
+	<PackControls bind:padding bind:colorBy />
+
+	<Breadcrumb
+		items={selected ? selected?.ancestors().reverse() : (nodes[0]?.ancestors().reverse() ?? [])}
+		class="mb-2"
+	>
+		<Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
+			<div class="text-left">
+				<div class="text-sm">{item.data.name}</div>
+				<div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>
+			</div>
+		</Button>
+	</Breadcrumb>
+
+	<Chart
+		transform={{
+			mode: 'canvas',
+			disablePointer: true,
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		bind:context
+		height={600}
+		class="overflow-hidden"
+	>
+		<Layer onclick={() => (selected = complexHierarchy)}>
+			<Pack {padding} hierarchy={complexHierarchy} bind:nodes>
+				{#each nodes as node ([node.data.name, node.parent?.data.name].join('-'))}
+					<Group
+						x={node.x}
+						y={node.y}
+						onclick={(e) => {
+							e.stopPropagation();
+							selected = node;
+						}}
+						class="cursor-pointer hover:contrast-[1.2]"
+					>
+						{@const nodeColor = getNodeColor(node, colorBy)}
+						<Circle
+							r={node.r}
+							stroke={hsl(nodeColor)
+								.darker(colorBy === 'children' ? 0.5 : 1)
+								.toString()}
+							strokeWidth={1 / context.transform.scale}
+							fill={nodeColor}
+						/>
+					</Group>
+				{/each}
+
+				{@const selectedNodes = selected
+					? (selected.children ?? [selected])
+					: nodes[0]
+						? (nodes[0].children ?? [nodes[0]])
+						: []}
+
+				{#each selectedNodes as node ([node.data.name, node.parent?.data.name].join('-'))}
+					{@const trueNode = findSelectedNodeInHierarchy(node, nodes)}
+					{@const fontSize = 1 / context.transform.scale}
+					<g in:fade|local>
+						<Text
+							value={trueNode.data.name}
+							x={trueNode.x}
+							y={trueNode.y}
+							dy={fontSize * 8}
+							style="font-size: {fontSize}rem; stroke-width: {fontSize * 2}px"
+							class="fill-black stroke-white/70 pointer-events-none [text-anchor:middle] [paint-order:stroke]"
+						/>
+					</g>
+				{/each}
+			</Pack>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Partition.svelte b/docs/src/generated/mini-docs/Partition.svelte
new file mode 100644
index 000000000..b48ff6d7c
--- /dev/null
+++ b/docs/src/generated/mini-docs/Partition.svelte
@@ -0,0 +1,185 @@
+
+<!--
+	@component
+	## Partition
+
+	## Description
+
+	Layout component which divides a hierarchical dataset into nested, space-filling rectangles or arcs to represent the structure and relative sizes of each node.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Partition](/docs/components/Partition)
+
+	## API Properties
+
+	* hierarchy:<HierarchyNode<T>> - d3 hierarchy node  (REQUIRED)
+	* orientation:<'vertical' | 'horizontal'>='horizontal' - The orientation of the partition layout. 
+	* size:<[ number, number ]> - The size of the partition layout. 
+	* padding:<number> - The padding between nodes in the partition layout.
+see: https://github.com/d3/d3-hierarchy#tree_nodeSize 
+	* round:<boolean> - The round property of the partition layout.
+see: https://github.com/d3/d3-hierarchy#tree_nodeSize 
+	* nodes:<HierarchyRectangularNode<T>[]> - A bindable reference to the descendants of the partition layout. 
+	* children:<Snippet<[ { nodes: HierarchyRectangularNode<T>[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { cubicOut } from 'svelte/easing';
+		import { fade } from 'svelte/transition';
+		import {
+			hierarchy as d3Hierarchy,
+			type HierarchyNode,
+			type HierarchyRectangularNode
+		} from 'd3-hierarchy';
+		import { scaleSequential, scaleOrdinal } from 'd3-scale';
+		import * as chromatic from 'd3-scale-chromatic';
+		import { hsl } from 'd3-color';
+		import { getFlare } from '$lib/data.remote';
+		import {
+			Bounds,
+			Chart,
+			ChartClipPath,
+			Group,
+			Partition,
+			Rect,
+			RectClipPath,
+			Layer,
+			findAncestor
+		} from 'layerchart';
+		import { Breadcrumb, Button } from 'svelte-ux';
+		import { format, sortFunc } from '@layerstack/utils';
+		import { cls } from '@layerstack/tailwind';
+		import PartitionControls, {
+			type PartitionControlsProps
+		} from '$lib/components/controls/PartitionControls.svelte';
+
+		let colorBy = $state<PartitionControlsProps['colorBy']>('children');
+		let padding = $state(0);
+		let round = $state(false);
+		let fullSizeLeafNodes = $state(false);
+
+		let data = await getFlare();
+		const hierarchy = d3Hierarchy(data)
+			.sum((d) => d.value)
+			.sort(sortFunc('value', 'desc')) as HierarchyRectangularNode<any>;
+		let nodes = $state<HierarchyRectangularNode<any>[]>([]);
+		let selected = $state<HierarchyRectangularNode<any>>(); // select root initially
+
+		const sequentialColor = scaleSequential([4, -1], chromatic.interpolateGnBu);
+		const ordinalColor = scaleOrdinal(
+			// filter out hard to see yellow and green
+			chromatic.schemeSpectral[9].filter((c) => hsl(c).h < 60 || hsl(c).h > 90)
+		);
+
+		function getNodeColor(node: HierarchyNode<any>, colorBy: PartitionControlsProps['colorBy']) {
+			switch (colorBy) {
+				case 'children':
+					return node.children ? 'var(--color-primary)' : 'var(--color-primary-600)';
+				case 'depth':
+					return sequentialColor(node.depth).toString();
+				case 'parent':
+					const colorParent = findAncestor(node, (n) => n.depth === 1);
+					return colorParent
+						? hsl(ordinalColor(colorParent.data.name))
+								.brighter(node.depth * 0.3)
+								.toString()
+						: '#ddd';
+			}
+			return '';
+		}
+
+		const breadcrumbItems = $derived(
+			selected ? selected?.ancestors().reverse() : (nodes[0]?.ancestors().reverse() ?? [])
+		);
+	</script>
+
+	<PartitionControls bind:padding bind:fullSizeLeafNodes bind:round bind:colorBy />
+
+	<Breadcrumb items={breadcrumbItems} class="mb-2">
+		<Button slot="item" let:item on:click={() => (selected = item)} base class="px-2 py-1 rounded-sm">
+			<div class="text-left">
+				<div class="text-sm">{item.data.name}</div>
+				<div class="text-xs text-surface-content/50">{format(item.value ?? 0, 'integer')}</div>
+			</div>
+		</Button>
+	</Breadcrumb>
+
+	<Chart height={600}>
+		{#snippet children({ context })}
+			<Layer>
+				<Bounds
+					domain={{
+						x0: selected?.y0,
+						y0: selected?.x0,
+						y1: selected?.x1
+					}}
+					motion={{ type: 'tween', duration: 800, easing: cubicOut }}
+				>
+					{#snippet children({ xScale, yScale })}
+						<ChartClipPath>
+							<Partition {padding} {round} {hierarchy} bind:nodes>
+								{#snippet children({ nodes })}
+									{#each nodes as node}
+										{@const nodeWidth =
+											node.children || !fullSizeLeafNodes
+												? xScale(node.y1) - xScale(node.y0)
+												: context.width - xScale(node.y0)}
+										{@const nodeHeight = yScale(node.x1) - yScale(node.x0)}
+										<Group x={xScale(node.y0)} y={yScale(node.x0)} onclick={() => (selected = node)}>
+											<RectClipPath width={nodeWidth} height={nodeHeight}>
+												{@const nodeColor = getNodeColor(node, colorBy)}
+												<g transition:fade={{ duration: 600 }}>
+													<Rect
+														width={nodeWidth}
+														height={nodeHeight}
+														stroke={colorBy === 'children'
+															? 'var(--color-primary-content)'
+															: hsl(nodeColor).darker(1).toString()}
+														stroke-opacity={colorBy === 'children' ? 0.2 : 1}
+														fill={nodeColor}
+														rx={5}
+													/>
+													<text
+														x={4}
+														y={16 * 0.6 + 4}
+														class={cls(
+															'text-[10px] font-medium',
+															colorBy === 'children' ? 'fill-primary-content' : 'fill-black'
+														)}
+													>
+														<tspan>{node.data.name}</tspan>
+														<tspan
+															class={cls(
+																'text-[8px] font-extralight',
+																colorBy === 'children' ? 'fill-primary-content' : 'fill-black'
+															)}
+														>
+															{format(node.value ?? 0, 'integer')}
+														</tspan>
+													</text>
+												</g>
+											</RectClipPath>
+										</Group>
+									{/each}
+								{/snippet}
+							</Partition>
+						</ChartClipPath>
+					{/snippet}
+				</Bounds>
+			</Layer>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Path.svelte b/docs/src/generated/mini-docs/Path.svelte
new file mode 100644
index 000000000..59c5ca975
--- /dev/null
+++ b/docs/src/generated/mini-docs/Path.svelte
@@ -0,0 +1,59 @@
+
+<!--
+	@component
+	## Path
+
+	## Description
+
+	Primitive component for rendering path elements with support for animation, markers, and custom content at path endpoints.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Path](/docs/components/Path)
+
+	## API Properties
+
+	* pathData:<string | undefined | null> - Pass `<path d={...} />` explicitly instead of calculating
+from data / context 
+	* draw:<boolean | Parameters<typeof _drawTransition>[1]> - Whether to animate the drawing of the path over time.
+Pass either `true` or an object with transition options to
+enable the transition.
+
+Works best with `tweened` disabled. 
+	* marker:<MarkerOptions> - Marker to attach to both start and end points of the line 
+	* markerMid:<MarkerOptions> - Marker to attach to the middle point of the line 
+	* markerStart:<MarkerOptions> - Marker to attach to the start point of the line 
+	* markerEnd:<MarkerOptions> - Marker to attach to the end point of the line 
+	* startContent:<Snippet<[ { point: DOMPoint; value: { x: number; y: number; }; } ]>> - Add additional content at the start of the line.
+
+Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop. 
+	* endContent:<Snippet<[ { point: DOMPoint; value: { x: number; y: number; }; } ]>> - Add additional content at the end of the line.
+
+Receives `{ point: DOMPoint; value: { x: number; y: number } }` as a snippet prop. 
+	* pathRef:<SVGPathElement> - A reference to the `<path>` element. 
+	* motion:<MotionProp> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[Arc](/docs/components/Arc)
+	[Area](/docs/components/Area)
+	[Bar](/docs/components/Bar)
+	[Connector](/docs/components/Connector)
+	[GeoPath](/docs/components/GeoPath)
+	[MotionPath](/docs/components/MotionPath)
+	[Spline](/docs/components/Spline)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Pattern.svelte b/docs/src/generated/mini-docs/Pattern.svelte
new file mode 100644
index 000000000..522200445
--- /dev/null
+++ b/docs/src/generated/mini-docs/Pattern.svelte
@@ -0,0 +1,131 @@
+
+<!--
+	@component
+	## Pattern
+
+	## Description
+
+	Fill component which provides a line or circle-based fill pattern for chart elements.
+
+	## Category
+
+	[[Fill](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Fill.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Pattern](/docs/components/Pattern)
+
+	## API Properties
+
+	* id:<string> - The id of the pattern 
+	* size:<number> - The size of the pattern (sets `width` and `height` as same value). 
+	* width:<number> - The width of the pattern for custom patterns (set by `lines`, etc) 
+	* height:<number> - The height of the pattern for custom patterns (set by `lines`, etc) 
+	* lines:<boolean | PatternLineDef | PatternLineDef[]> - The number of lines to render 
+	* circles:<boolean | PatternCircleDef | PatternCircleDef[]> - The number of circles to render 
+	* background:<string> - The background color of the pattern 
+	* patternContent:<Snippet> - Render as a child of the pattern 
+	* children:<Snippet<[ { id: string; pattern: string; } ]>> - undefined 
+
+	## Related
+
+	[LinearGradient](/docs/components/LinearGradient)
+	[RadialGradient](/docs/components/RadialGradient)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Layer, Pattern, Rect } from 'layerchart';
+	</script>
+
+	<Chart height={300}>
+		<Layer>
+			<Pattern size={4} lines>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 0}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+
+			<Pattern size={4} lines={{ rotate: 90 }}>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 1}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+
+			<Pattern size={5} lines={[{ rotate: 0 }, { rotate: 90 }]}>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 2}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+
+			<Pattern size={5} lines={{ rotate: -45 }}>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 3}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+
+			<Pattern size={5} lines={{ rotate: 45 }}>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 4}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+
+			<Pattern size={6} lines={[{ rotate: 45 }, { rotate: -45 }]}>
+				{#snippet children({ pattern })}
+					<Rect
+						x={120 * 5}
+						y={0}
+						width={100}
+						height={300}
+						rx={8}
+						fill={pattern}
+						class="stroke-surface-content"
+					/>
+				{/snippet}
+			</Pattern>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Pie.svelte b/docs/src/generated/mini-docs/Pie.svelte
new file mode 100644
index 000000000..b1ef1fe6a
--- /dev/null
+++ b/docs/src/generated/mini-docs/Pie.svelte
@@ -0,0 +1,84 @@
+
+<!--
+	@component
+	## Pie
+
+	## Description
+
+	Marking component which represents data as proportional slices of a circle, showing the relative contribution of each category to the whole.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Pie](/docs/components/Pie)
+
+	## API Properties
+
+	* data:<any[]> - undefined 
+	* range:<[ number, number ] | number[]>=[0, 360] - Range [min,max] in degrees.  See also startAngle/endAngle 
+	* startAngle:<number> - Start angle in radians 
+	* endAngle:<number> - End angle in radians 
+	* innerRadius:<number> - Define innerRadius.
+  value >= 1: discrete value
+  value >  0: percent of `outerRadius`
+  value <  0: offset of `outerRadius`
+  default: yRange min 
+	* outerRadius:<number> - Define outerRadius.  Defaults to yRange max/2 (ie. chart height / 2) 
+	* cornerRadius:<number>=0 - Corner radius of the arc 
+	* padAngle:<number>=0 - Angle between the arcs 
+	* offset:<number>=0 - Offset all arcs from center 
+	* tooltipContext:<TooltipContextValue> - Tooltip context to setup pointer events to show tooltip for related data 
+	* sort:<((a: any, b: any) => number) | null> - Sort function to sort the arcs 
+	* children:<Snippet<[ { arcs: PieArcDatum<any>[]; } ]>> - undefined 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[Arc](/docs/components/Arc)
+	[PieChart](/docs/components/PieChart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Layer, Pie } from 'layerchart';
+
+		// fixed data (same as disable-sorting example to call attention to what sorting does)
+		const data = [
+			{
+				date: '2025-11-04T05:00:00.000Z',
+				value: 99
+			},
+			{
+				date: '2025-11-06T05:00:00.000Z',
+				value: 30
+			},
+			{
+				date: '2025-11-05T05:00:00.000Z',
+				value: 14
+			},
+			{
+				date: '2025-11-07T05:00:00.000Z',
+				value: 67
+			}
+		];
+
+		const keyColors = [
+			'var(--color-info)',
+			'var(--color-success)',
+			'var(--color-warning)',
+			'var(--color-danger)'
+		];
+	</script>
+
+	<Chart {data} x="value" c="date" cRange={keyColors} height={300}>
+		<Layer center>
+			<Pie />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/PieChart.svelte b/docs/src/generated/mini-docs/PieChart.svelte
new file mode 100644
index 000000000..e7473ad2a
--- /dev/null
+++ b/docs/src/generated/mini-docs/PieChart.svelte
@@ -0,0 +1,67 @@
+
+<!--
+	@component
+	## PieChart
+
+	## Description
+
+	Streamlined visualization of data as proportional slices of a circle to represent parts of a whole.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [PieChart](/docs/components/PieChart)
+
+	## API Properties
+
+	* key:<Accessor<TData>>='key' - Key accessor 
+	* label:<Accessor<TData>>='label' - Label accessor 
+	* value:<Accessor<TData>>='value' - Value accessor 
+	* c:<Accessor<TData>>=key - Color accessor 
+	* maxValue:<number> - Maximum possible value, useful when `data` is single item 
+	* range:<[ number, number ]>=[0, 360] - Range [min, max] in degrees.
+
+See also `startAngle`/`endAngle` 
+	* props:<PieChartPropsObjProp> - undefined 
+	* innerRadius:<number> - Inner radius of the arc.
+  value >= 1: discrete value
+  value >  0: percent of `outerRadius`
+  value <  0: offset of `outerRadius` 
+	* outerRadius:<number> - Outer radius of the arc. 
+	* cornerRadius:<number>=0 - Corner radius of the arc 
+	* padAngle:<number>=0 - Angle between the arcs 
+	* placement:<'left' | 'center' | 'right'>='center' - Placement of the PieChart 
+	* center:<boolean>=placement === 'center' - Center the chart.
+
+Override and use `props.group` for more control. 
+	* pie:<SimplifiedChartSnippet<TData, typeof Arc, PieChartExtraSnippetProps<TData> & { props: ComponentProps<typeof Pie>; index: number; }>> - Replace the default rendering of the `<Pie>` component internally with your own.
+
+Use the `props` snippet prop to access the default props. 
+	* arc:<SimplifiedChartSnippet<TData, typeof Arc, PieChartExtraSnippetProps<TData> & { props: ComponentProps<typeof Arc>; index: number; seriesIndex: number; }>> - Replace the default rendering of the `<Arc>` component internally with your own.
+
+Use the `props` snippet prop to access the default props. 
+	* onArcClick:<(e: MouseEvent, detail: { data: any; series: SeriesData<TData, typeof Arc>; }) => void> - A callback function triggered when the arc is clicked. 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Pie](/docs/components/Pie)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { PieChart } from 'layerchart';
+		import { longData } from '$lib/utils/data';
+		import { fruitColors } from '$lib/utils/fruits';
+
+		const data = longData.filter((d) => d.year === 2019);
+	</script>
+
+	<PieChart {data} key="fruit" value="value" cRange={fruitColors} height={300} />
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Point.svelte b/docs/src/generated/mini-docs/Point.svelte
new file mode 100644
index 000000000..e3d947e6e
--- /dev/null
+++ b/docs/src/generated/mini-docs/Point.svelte
@@ -0,0 +1,64 @@
+
+<!--
+	@component
+	## Point
+
+	## Description
+
+	Primitive components which provides a convenient way to translate a data to x/y coordinates.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Point](/docs/components/Point)
+
+	## API Properties
+
+	* d:<any> - Single data point to translate to x/y  (REQUIRED)
+	* children:<Snippet<[ { x: number; y: number; } ]>> - Children containing the x and y values 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Circle, Point, Layer } from 'layerchart';
+
+		let data: Array<{ x: number; y: number }> = [];
+	</script>
+
+	<Chart
+		{data}
+		x={(d) => d.x}
+		y={(d) => d.y}
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 10, bottom: 20, left: 24, right: 10 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+
+			<Point d={{ x: 50, y: 50 }}>
+				{#snippet children({ x, y })}
+					<Circle cx={x} cy={y} r={10} />
+				{/snippet}
+			</Point>
+
+			<Point d={{ x: 20, y: 20 }}>
+				{#snippet children({ x, y })}
+					<Circle cx={x} cy={y} r={15} class="fill-primary bg-primary" />
+				{/snippet}
+			</Point>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Points.svelte b/docs/src/generated/mini-docs/Points.svelte
new file mode 100644
index 000000000..3c18bd834
--- /dev/null
+++ b/docs/src/generated/mini-docs/Points.svelte
@@ -0,0 +1,57 @@
+
+<!--
+	@component
+	## Points
+
+	## Description
+
+	Marking component which plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Points](/docs/components/Points)
+
+	## API Properties
+
+	* data:<any> - Override data instead of using context 
+	* x:<Accessor> - Override `x` accessor from Chart context 
+	* y:<Accessor> - Override `y` accessor from Chart context 
+	* r:<number>=5 - Override `r` accessor from Chart context 
+	* offsetX:<Offset> - The offset of the point in the x direction 
+	* offsetY:<Offset> - The offset of the point in the y direction 
+	* children:<Snippet<[ { points: Point[]; } ]>> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[ScatterChart](/docs/components/ScatterChart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Layer, Points } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({ min: 10, max: 100, value: 'integer' });
+	</script>
+
+	<Chart {data} x="date" y="value" yDomain={[0, null]} yNice padding={20} height={300}>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			<Points class="fill-primary/10 stroke-primary" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Polygon.svelte b/docs/src/generated/mini-docs/Polygon.svelte
new file mode 100644
index 000000000..5e42f5c1a
--- /dev/null
+++ b/docs/src/generated/mini-docs/Polygon.svelte
@@ -0,0 +1,81 @@
+
+<!--
+	@component
+	## Polygon
+
+	## Description
+
+	Primitive component which renders a multi-sided shape on a chart to represent complex areas, boundaries, or regions of interest.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Polygon](/docs/components/Polygon)
+
+	## API Properties
+
+	* cx:<number>=0 - The center x position of the polygon. 
+	* initialCx:<number>=cx - The initial center x position of the polygon. 
+	* cy:<number>=0 - The center y position of the polygon. 
+	* initialCy:<number>=cy - The initial center y position of the polygon. 
+	* r:<number>=1 - The radius of the polygon. 
+	* initialR:<number>=r - The initial radius of the polygon. 
+	* points:<number | { x: number; y: number; }[]>=4 - The number of points or explicit points to create the polygon. 
+	* cornerRadius:<number>=0 - The radius of the curve for rounded corners. 
+	* rotate:<number>=0 - The rotation of the polygon. 
+	* inset:<number>=0 - The percent to inset the odd points of the star (<1 inset, >1 outset) 
+	* scaleX:<number>=1 - The horizontal stretch factor of the polygon. 
+	* scaleY:<number>=1 - The vertical stretch factor of the polygon. 
+	* skewX:<number>=0 - The skew angle in degrees along the X axis. 
+	* skewY:<number>=0 - The skew angle in degrees along the Y axis. 
+	* tiltX:<number>=1 - The tilt factor for x-coordinates. 
+	* tiltY:<number>=1 - The tilt factor for y-coordinates. 
+	* ref:<SVGPathElement> - A bindable reference to the `<path>` element 
+	* motion:<MotionProp> - undefined 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Layer, Polygon } from 'layerchart';
+		import PolygonPlaygroundControls from '$lib/components/controls/PolygonPlaygroundControls.svelte';
+
+		let config = $state({
+			points: 8,
+			cornerRadius: 0,
+			inset: 0,
+			rotate: 0,
+			scaleX: 1,
+			scaleY: 1,
+			skewX: 0,
+			skewY: 0,
+			tiltX: 0,
+			tiltY: 0
+		});
+	</script>
+
+	<PolygonPlaygroundControls bind:config />
+
+	<Chart height={300}>
+		{#snippet children({ context })}
+			<Layer>
+				<Polygon cx={context.width / 2} cy={context.height / 2} r={100} {...config} />
+			</Layer>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/RadialGradient.svelte b/docs/src/generated/mini-docs/RadialGradient.svelte
new file mode 100644
index 000000000..afd669d48
--- /dev/null
+++ b/docs/src/generated/mini-docs/RadialGradient.svelte
@@ -0,0 +1,73 @@
+
+<!--
+	@component
+	## RadialGradient
+
+	## Description
+
+	Fill component which provides a radial gradient fill pattern for  chart elements.
+
+	## Category
+
+	[[Fill](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Fill.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [RadialGradient](/docs/components/RadialGradient)
+
+	## API Properties
+
+	* id:<string> - Unique id for radialGradient 
+	* stops:<string[] | [ string | number, string ][]>=['var(--tw-gradient-from)', 'var(--tw-gradient-to)'] - Array array of strings (colors), will equally distributed from 0-100%.
+If array of tuples, will use first value as the offset, and second as color 
+	* cx:<string>='50%' - The x coordinate of the center of the gradient 
+	* cy:<string>='50%' - The y coordinate of the center of the gradient 
+	* fx:<string>=cx - The x coordinate of the focal point of the gradient 
+	* fy:<string>=cy - The y coordinate of the focal point of the gradient 
+	* r:<string> - The radius of the gradient 
+	* spreadMethod:<'pad' | 'reflect' | 'repeat'>='pad' - Indicates how the gradient behaves if it starts or ends inside the bounds
+of the shape containing the gradient 
+	* transform:<string | null> - Transform attribute for the gradient 
+	* units:<'objectBoundingBox' | 'userSpaceOnUse'>='objectBoundingBox' - Define the coordinate system for attributes (i.e. gradientUnits) 
+	* children:<Snippet<[ { id: string; gradient: string; } ]>> - undefined 
+	* stopsContent:<Snippet> - Render as a child of the gradient and will opt out of the default stops
+being rendered. 
+
+	## Related
+
+	[LinearGradient](/docs/components/LinearGradient)
+	[Pattern](/docs/components/Pattern)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Circle, Layer, RadialGradient } from 'layerchart';
+
+		const radius = 50;
+	</script>
+
+	<Chart height={100}>
+		<Layer>
+			<RadialGradient stops={['hsl(60 100% 50%)', 'hsl(30 100% 40%)']}>
+				{#snippet children({ gradient })}
+					<Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />
+				{/snippet}
+			</RadialGradient>
+
+			<RadialGradient stops={['hsl(60 100% 50%)', 'hsl(140 100% 40%)']} fx="20%" fy="20%">
+				{#snippet children({ gradient })}
+					<Circle cx={radius + 1 * 120} cy={radius} r={radius} fill={gradient} />
+				{/snippet}
+			</RadialGradient>
+
+			<RadialGradient stops={['hsl(195 100% 50%)', 'hsl(270 100% 30%)']} r="30%">
+				{#snippet children({ gradient })}
+					<Circle cx={radius + 2 * 120} cy={radius} r={radius} fill={gradient} />
+				{/snippet}
+			</RadialGradient>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Rect.svelte b/docs/src/generated/mini-docs/Rect.svelte
new file mode 100644
index 000000000..404e0ef1f
--- /dev/null
+++ b/docs/src/generated/mini-docs/Rect.svelte
@@ -0,0 +1,80 @@
+
+<!--
+	@component
+	## Rect
+
+	## Description
+
+	Primitive component which draws a rectangle to highlight areas, ranges, or specific regions of interest.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Rect](/docs/components/Rect)
+
+	## API Properties
+
+	* x:<number>=0 - undefined 
+	* initialX:<number>=x - undefined 
+	* y:<number>=0 - undefined 
+	* initialY:<number>=y - undefined 
+	* width:<number> - undefined  (REQUIRED)
+	* initialWidth:<number> - undefined 
+	* height:<number> - undefined  (REQUIRED)
+	* initialHeight:<number> - undefined 
+	* ref:<SVGRectElement> - Underlying `<rect>` tag when using <Svg>. Useful for bindings. 
+	* motion:<MotionProp<'x' | 'y' | 'width' | 'height'>> - undefined 
+	* children:<Snippet> - Children content to render.  Note: Only works for Html layers 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+	* onclick:<MouseEventHandler<Element> | null> - Click event handler 
+	* ondblclick:<MouseEventHandler<Element> | null> - Double click event handler 
+	* onpointerenter:<PointerEventHandler<Element> | null> - Pointer enter event handler 
+	* onpointermove:<PointerEventHandler<Element> | null> - Pointer move event handler 
+	* onpointerleave:<PointerEventHandler<Element> | null> - Pointer leave event handler 
+	* onpointerover:<PointerEventHandler<Element> | null> - Pointer over event handler 
+	* onpointerout:<PointerEventHandler<Element> | null> - Pointer out event handler 
+
+	## Related
+
+	[Bars](/docs/components/Bars)
+	[Highlight](/docs/components/Highlight)
+	[RectClipPath](/docs/components/RectClipPath)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Rect, Layer } from 'layerchart';
+	</script>
+
+	<Chart
+		xDomain={[0, 100]}
+		yDomain={[0, 100]}
+		padding={{ top: 10, bottom: 20, left: 24, right: 10 }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="bottom" rule />
+			<Axis placement="left" rule />
+			<Rect x={50} y={50} width={100} height={150} />
+			<Rect x={90} y={80} width={200} height={100} class="fill-primary bg-primary" />
+			<Rect
+				x={125}
+				y={40}
+				width={200}
+				height={100}
+				class="stroke-primary fill-none border border-primary bg-transparent"
+			/>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/RectClipPath.svelte b/docs/src/generated/mini-docs/RectClipPath.svelte
new file mode 100644
index 000000000..6e7442c3d
--- /dev/null
+++ b/docs/src/generated/mini-docs/RectClipPath.svelte
@@ -0,0 +1,44 @@
+
+<!--
+	@component
+	## RectClipPath
+
+	## Description
+
+	Clipping component which defines a rectangular clip region  to constrain the rendering of chart elements within a specified shape or boundary.
+
+	## Category
+
+	[[Clipping](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Clipping.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [RectClipPath](/docs/components/RectClipPath)
+
+	## API Properties
+
+	* id:<string> - A unique id for the clipPath. 
+	* x:<number>=0 - The x position of the clipPath. 
+	* y:<number>=0 - The y position of the clipPath. 
+	* width:<number> - The width of the clipPath.  (REQUIRED)
+	* height:<number> - The height of the clipPath.  (REQUIRED)
+	* disabled:<boolean>=false - Whether to disable clipping (show all). 
+	* children:<Snippet<[ { id: string; url: string; } ]>> - The default children snippet which provides
+the id and url for the clipPath. 
+	* motion:<MotionProp<'x' | 'y' | 'width' | 'height'>> - undefined 
+	* onclick:<MouseEventHandler<Element> | null> - Click event handler 
+	* ondblclick:<MouseEventHandler<Element> | null> - Double click event handler 
+	* onpointerenter:<PointerEventHandler<Element> | null> - Pointer enter event handler 
+	* onpointermove:<PointerEventHandler<Element> | null> - Pointer move event handler 
+	* onpointerleave:<PointerEventHandler<Element> | null> - Pointer leave event handler 
+	* onpointerover:<PointerEventHandler<Element> | null> - Pointer over event handler 
+	* onpointerout:<PointerEventHandler<Element> | null> - Pointer out event handler 
+
+	## Related
+
+	[ChartClipPath](/docs/components/ChartClipPath)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Rule.svelte b/docs/src/generated/mini-docs/Rule.svelte
new file mode 100644
index 000000000..29c965095
--- /dev/null
+++ b/docs/src/generated/mini-docs/Rule.svelte
@@ -0,0 +1,56 @@
+
+<!--
+	@component
+	## Rule
+
+	## Description
+
+	Commonly used component acting as a visual guideline on a chart that helps align and measure data values along an axis.
+
+	## Category
+
+	[[Common](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Common.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Rule](/docs/components/Rule)
+
+	## API Properties
+
+	* data:<any> - Override the data from the context. 
+	* x:<number | Date | boolean | '$left' | '$right' | Accessor>=false - Create a vertical `x` line
+- If true or 'left', will draw at chart left (xRange[0])
+- If 'right', will draw at chart right (xRange[1])
+- Use `0` for baseline (yScale(0))
+- Use number | Date value for annotation (yScale(value)) 
+	* xOffset:<number>=0 - Pixel offset to apply to `x` coordinate 
+	* y:<number | Date | boolean | '$top' | '$bottom' | Accessor>=false - Create a horizontal `y` line
+- If true or 'bottom', will draw at chart bottom (yRange[0])
+- If 'top', will draw at chart top (yRange[1])
+- Use `0` for baseline (xScale(0))
+- Use number | Date value for annotation (xScale(value)) 
+	* yOffset:<number>=0 - Pixel offset to apply to `y` coordinate 
+
+	## Related
+
+	[Axis](/docs/components/Axis)
+	[Line](/docs/components/Line)
+	[AnnotationLine](/docs/components/AnnotationLine)
+
+	@example
+	```svelte
+	<script>
+		import { Axis, Chart, Layer, Rule } from 'layerchart';
+	</script>
+
+	<Chart xDomain={[0, 100]} yDomain={[0, 100]} padding={20} height={300}>
+		<Layer>
+			<Axis placement="bottom" />
+			<Axis placement="left" />
+			<Rule x y />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Sankey.svelte b/docs/src/generated/mini-docs/Sankey.svelte
new file mode 100644
index 000000000..ab3c9bc55
--- /dev/null
+++ b/docs/src/generated/mini-docs/Sankey.svelte
@@ -0,0 +1,72 @@
+
+<!--
+	@component
+	## Sankey
+
+	## Description
+
+	Layout component which arranges nodes and links to visualize flow magnitude between categories, with link widths proportional to the flow and nodes positioned to minimize overlap and crossings.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Sankey](/docs/components/Sankey)
+
+	## API Properties
+
+	* nodes:<(d: any) => any>=(d: any) => d.nodes - The function to get the nodes from the data. 
+	* nodeId:<(d: any) => any>=(d: any) => d.index - The function to get the node ID from the node data. 
+	* nodeAlign:<((node: SankeyNode<any, any>, n: number) => number) | 'left' | 'right' | 'center' | 'justify'>=sankeyJustify - undefined 
+	* nodeWidth:<number>=4 - The width of the nodes. 
+	* nodePadding:<number>=10 - The padding between nodes. 
+	* nodeSort:<(a: SankeyNode<any, any>, b: SankeyNode<any, any>) => number | undefined> - The function to sort the nodes. 
+	* links:<(d: any) => any>=(d: any) => d.links - The function to get the links from the data. 
+	* linkSort:<(a: SankeyLink<any, any>, b: SankeyLink<any, any>) => number | undefined> - The function to sort the links. 
+	* onUpdate:<(data: SankeyGraph<{}, {}>) => void> - A function to be called when the data is updated. 
+	* children:<Snippet<[ { nodes: SankeyNode<NodeExtraProperties, any>[]; links: SankeyNode<NodeExtraProperties, any>[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { getSimpleGraph } from '$lib/graph.remote';
+		import { Chart, Group, Link, Rect, Sankey, Layer, Text } from 'layerchart';
+
+		const data = await getSimpleGraph();
+	</script>
+
+	<Chart {data} flatData={[]} height={400}>
+		<Layer>
+			<Sankey nodeId={(d) => d.id}>
+				{#snippet children({ links, nodes })}
+					{#each links as link ([link.value, link.source.id, link.target.id].join('-'))}
+						<Link sankey data={link} strokeWidth={link.width} class="stroke-surface-content/10" />
+					{/each}
+					{#each nodes as node (node.id)}
+						{@const nodeWidth = (node.x1 ?? 0) - (node.x0 ?? 0)}
+						{@const nodeHeight = (node.y1 ?? 0) - (node.y0 ?? 0)}
+						<Group x={node.x0} y={node.y0}>
+							<Rect width={nodeWidth} height={nodeHeight} class="fill-primary" />
+							<Text
+								value={node.id}
+								x={node.height === 0 ? -4 : nodeWidth + 4}
+								y={nodeHeight / 2}
+								textAnchor={node.height === 0 ? 'end' : 'start'}
+								verticalAnchor="middle"
+							/>
+						</Group>
+					{/each}
+				{/snippet}
+			</Sankey>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/ScatterChart.svelte b/docs/src/generated/mini-docs/ScatterChart.svelte
new file mode 100644
index 000000000..051c2b7d9
--- /dev/null
+++ b/docs/src/generated/mini-docs/ScatterChart.svelte
@@ -0,0 +1,42 @@
+
+<!--
+	@component
+	## ScatterChart
+
+	## Description
+
+	Streamlined visualization of data with individual data points on two axes to reveal relationships, patterns, or correlations between variables.
+
+	## Category
+
+	[[Charts](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Charts.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [ScatterChart](/docs/components/ScatterChart)
+
+	## API Properties
+
+	* props:<ScatterChartPropsObjProp> - undefined 
+	* yDomain:<ComponentProps<typeof BrushContext>['yDomain']> - undefined 
+	* yScale:<AnyScale> - undefined 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Points](/docs/components/Points)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { ScatterChart } from 'layerchart';
+		import { getSpiral } from '$lib/utils/data.js';
+
+		const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
+	</script>
+
+	<ScatterChart {data} xNice x="x" y="y" padding={24} height={400} />
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Spline.svelte b/docs/src/generated/mini-docs/Spline.svelte
new file mode 100644
index 000000000..9643c6268
--- /dev/null
+++ b/docs/src/generated/mini-docs/Spline.svelte
@@ -0,0 +1,50 @@
+
+<!--
+	@component
+	## Spline
+
+	## Description
+
+	Marking component which applies data points connected by smooth, curved lines to show trends or patterns over a continuous range.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Spline](/docs/components/Spline)
+
+	## API Properties
+
+	* data:<any> - Override data instead of using context 
+	* x:<Accessor> - Override `x` accessor from Chart context 
+	* y:<Accessor> - Override `y` accessor from Chart context 
+	* defined:<Parameters<Line<any>['defined']>[0]> - Function to determine if a point is defined 
+	* curve:<CurveFactory | CurveFactoryLineOnly> - Curve of path drawn. Imported via d3-shape. 
+
+	## Related
+
+	[Path](/docs/components/Path)
+	[LineChart](/docs/components/LineChart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Axis, Chart, Layer, Spline } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+	</script>
+
+	<Chart {data} x="date" y="value" yDomain={[0, null]} yNice padding={25} height={300}>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			<Spline class="stroke-2 stroke-primary" />
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Svg.svelte b/docs/src/generated/mini-docs/Svg.svelte
new file mode 100644
index 000000000..1f7baf68a
--- /dev/null
+++ b/docs/src/generated/mini-docs/Svg.svelte
@@ -0,0 +1,40 @@
+
+<!--
+	@component
+	## Svg
+
+	## Description
+
+	Svg layer
+
+	## Category
+
+	[[Layers](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layers.md)]
+
+	## Layers
+
+	[](/docs/components/)
+
+	Full Documentation: [Svg](/docs/components/Svg)
+
+	## API Properties
+
+	* ref:<SVGSVGElement> - A reference to the layer's `<svg>` tag. 
+	* innerRef:<SVGGElement> - A reference to the layer's `<g>` tag. 
+	* zIndex:<number> - The layer's z-index. 
+	* pointerEvents:<boolean> - Set this to `false` to set `pointer-events: none;` on the entire layer. 
+	* viewBox:<string> - A string passed to the `viewBox` property on the `<svg>` tag. 
+	* title:<string | Snippet> - Shorthand to set the contents of `<title></title>` for accessibility.
+You can also set arbitrary HTML via the title snippet but this is a convenient shorthand. 
+	* defs:<Snippet> - The inner content of the `<defs>` tag. 
+	* center:<boolean | 'x' | 'y'> - Translate children to center (useful for radial layouts) 
+	* ignoreTransform:<boolean> - Ignore TransformContext.
+Useful to add static elements such as legends. 
+	* children:<Snippet<[ { ref: SVGElement; } ]>> - undefined 
+
+	## Related
+
+	[Layer](/docs/components/Layer)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Text.svelte b/docs/src/generated/mini-docs/Text.svelte
new file mode 100644
index 000000000..a378033f3
--- /dev/null
+++ b/docs/src/generated/mini-docs/Text.svelte
@@ -0,0 +1,118 @@
+
+<!--
+	@component
+	## Text
+
+	## Description
+
+	Primitive component which adds custom text for labeling, annotation, or commentary.
+
+	## Category
+
+	[[Primitives](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Primitives.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [Text](/docs/components/Text)
+
+	## API Properties
+
+	* value:<string | number>=0 - text value 
+	* fill:<string> - The fill color of the text 
+	* width:<number> - Maximum width to occupy (approximate as words are not split) 
+	* x:<string | number>=0 - x position of the text 
+	* initialX:<string | number>=x - Initial x position of the text 
+	* y:<string | number>=0 - y position of the text 
+	* initialY:<string | number>=y - Initial y position of the text 
+	* dx:<string | number>=0 - dx offset of the text 
+	* dy:<string | number>=0 - dy offset of the text 
+	* lineHeight:<string>="1em" - Desired "line height" of the text, implemented as y offsets 
+	* capHeight:<string>='0.71em' - Cap height of the text 
+	* scaleToFit:<boolean>=false - Whether to scale the fontSize to accommodate the specified width 
+	* textAnchor:<'start' | 'middle' | 'end' | 'inherit'>='start' - Horizontal text anchor 
+	* verticalAnchor:<'start' | 'middle' | 'end' | 'inherit'>='end' - Vertical text anchor 
+	* dominantBaseline:<'auto' | 'text-before-edge' | 'text-after-edge' | 'middle' | 'hanging' | 'ideographic' | 'mathematical'>='auto' - The dominant baseline of the text.  Useful for aligning text to the baseline of the axis. 
+	* rotate:<number> - Rotational angle of the text 
+	* svgRef:<SVGElement> - A bindable reference to the wrapping `<svg>` element. 
+	* svgProps:<Omit<SVGAttributes<SVGElement>, 'children'>> - Props to pass to the wrapping `<svg>` element. 
+	* ref:<SVGTextElement> - A bindable reference to the inner `<text>` element 
+	* motion:<MotionProp> - undefined 
+	* truncate:<boolean | TruncateTextOptions> - Whether to enable text truncation 
+	* pathId:<string> - A unique identifier for the SVG path element.
+One is generated by default if not provided. 
+	* path:<string | null> - The path to render the text along. 
+	* startOffset:<string | number>='0%' - Specify the offset for the start of the text along the path.
+Can be a percentage ('50%') or a length value. 
+	* fill:<string> - Fill color 
+	* fillOpacity:<number> - Fill opacity (0-1) 
+	* stroke:<string> - Stroke color 
+	* strokeWidth:<number> - Stroke width in pixels 
+	* strokeOpacity:<number> - Stroke opacity (0-1) 
+	* opacity:<number> - Overall opacity (0-1) 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, Layer, Text, Circle } from 'layerchart';
+		import type { ComponentProps } from 'svelte';
+		import TextPlaygroundControls from '$lib/components/controls/TextPlaygroundControls.svelte';
+		import { toTitleCase } from '@layerstack/utils';
+
+		let config = $state({
+			x: 0,
+			y: 0,
+			value: 'This is really long text',
+			width: 300,
+			textAnchor: 'start' as ComponentProps<typeof Text>['textAnchor'],
+			verticalAnchor: 'start' as ComponentProps<typeof Text>['verticalAnchor'],
+			lineHeight: '1em',
+			rotate: 0,
+			scaleToFit: false,
+			showAnchor: true,
+			resizeSvg: true
+		});
+
+		let truncate = $state(false);
+
+		type TruncateOptions = Exclude<ComponentProps<typeof Text>['truncate'], undefined | boolean>;
+		const truncateOptions = $state<TruncateOptions>({
+			maxChars: 22,
+			ellipsis: '…',
+			position: 'end'
+		});
+
+		const data = undefined;
+	</script>
+
+	<TextPlaygroundControls bind:config />
+
+	<div class="grid grid-cols-3">
+		{#each ['svg', 'canvas', 'html'] as const as type}
+			<div>
+				<h2 class="text-center">{toTitleCase(type)}</h2>
+				<div class="flex items-center justify-center bg-surface-100 p-4">
+					<div
+						class="h-56 border border-surface-content/10"
+						style:width="{config.resizeSvg ? config.width : 300}px"
+					>
+						<Chart height={224}>
+							<Layer {type}>
+								<Text {...config} truncate={truncate ? truncateOptions : false} />
+								{#if config.showAnchor}
+									<Circle cx={config.x} cy={config.y} r={2} fill="red" />
+								{/if}
+							</Layer>
+						</Chart>
+					</div>
+				</div>
+			</div>
+		{/each}
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Threshold.svelte b/docs/src/generated/mini-docs/Threshold.svelte
new file mode 100644
index 000000000..889e72c62
--- /dev/null
+++ b/docs/src/generated/mini-docs/Threshold.svelte
@@ -0,0 +1,80 @@
+
+<!--
+	@component
+	## Threshold
+
+	## Description
+
+	Marking component visualizing data relative to predefined limits, highlighting values that exceed or fall below set thresholds.
+
+	## Category
+
+	[[Marks](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Marks.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg)
+
+	Full Documentation: [Threshold](/docs/components/Threshold)
+
+	## API Properties
+
+	* curve:<CurveFactory> - The curve factory to use for the area. 
+	* defined:<ComponentProps<typeof Area>['defined']> - Function to determine if a point is defined. 
+	* above:<Snippet<[ ThresholdSnippetProps ]>> - Content to render above the threshold area. 
+	* below:<Snippet<[ ThresholdSnippetProps ]>> - Content to render below the threshold area. 
+	* children:<Snippet<[ ThresholdSnippetProps ]>> - undefined 
+
+	## Related
+
+	[Threshold](/docs/components/Threshold)
+	[AreaChart](/docs/components/AreaChart)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { curveStepAfter } from 'd3-shape';
+		import { AreaChart, Area, Spline, Threshold } from 'layerchart';
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		let selectedCurve = $state(curveStepAfter);
+
+		const data = createDateSeries({
+			count: 30,
+			min: 50,
+			max: 100,
+			value: 'integer',
+			keys: ['value', 'baseline']
+		});
+	</script>
+
+	<CurveMenuField bind:value={selectedCurve} class="mb-6" />
+
+	<AreaChart
+		{data}
+		x="date"
+		y={['value', 'baseline']}
+		padding={{ left: 16, bottom: 24 }}
+		tooltip={false}
+		height={300}
+	>
+		{#snippet marks()}
+			<Threshold curve={selectedCurve}>
+				{#snippet above({ curve })}
+					<Area y0="value" y1="baseline" {curve} class="fill-success/30" />
+				{/snippet}
+
+				{#snippet children({ curve })}
+					<Spline y="baseline" {curve} class="[stroke-dasharray:4]" />
+					<Spline y="value" {curve} class="stroke-[1.5]" />
+				{/snippet}
+
+				{#snippet below({ curve })}
+					<Area y0="value" y1="baseline" {curve} class="fill-danger/30" />
+				{/snippet}
+			</Threshold>
+		{/snippet}
+	</AreaChart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/TileImage.svelte b/docs/src/generated/mini-docs/TileImage.svelte
new file mode 100644
index 000000000..791b91fb4
--- /dev/null
+++ b/docs/src/generated/mini-docs/TileImage.svelte
@@ -0,0 +1,37 @@
+
+<!--
+	@component
+	## TileImage
+
+	## Description
+
+	Geographic component which renders map tiles as a background layer, enabling zoomable and pannable visualizations.
+
+	## Category
+
+	[[Geo](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Geo.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [TileImage](/docs/components/TileImage)
+
+	## API Properties
+
+	* x:<number> - x position of the tile  (REQUIRED)
+	* y:<number> - y position of the tile  (REQUIRED)
+	* z:<number> - z position of the tile  (REQUIRED)
+	* tx:<number> - translate x  (REQUIRED)
+	* ty:<number> - translate y  (REQUIRED)
+	* scale:<number> - scale of the tile  (REQUIRED)
+	* disableCache:<boolean>=false - Whether to disable cache 
+	* debug:<boolean>=false - Whether to enable debug mode 
+	* url:<(x: number, y: number, z: number) => string> - URL function to get the tile image  (REQUIRED)
+
+	## Related
+
+	[GeoTile](/docs/components/GeoTile)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/Tooltip.svelte b/docs/src/generated/mini-docs/Tooltip.svelte
new file mode 100644
index 000000000..d2d6d1298
--- /dev/null
+++ b/docs/src/generated/mini-docs/Tooltip.svelte
@@ -0,0 +1,88 @@
+
+<!--
+	@component
+	## Tooltip
+
+	## Description
+
+	Interaction component manages and displays tooltips allowing dynamic information to appear in response to user interactions.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Tooltip](/docs/components/Tooltip)
+
+	## API Properties
+
+	* x:<'pointer' | 'data' | number>='pointer' - `x` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+explicit fixed position. 
+	* y:<'pointer' | 'data' | number>='pointer' - `y` position of tooltip.  By default uses the pointer/mouse, can also snap to data or an
+explicit fixed position. 
+	* xOffset:<number>=x === 'pointer' ? 10 : 0 - Offset added to `x` position 
+	* yOffset:<number>=y === 'pointer' ? 10 : 0 - Offset added to `y` position 
+	* anchor:<Placement>='top-left' - Align based on edge of tooltip 
+	* motion:<MotionProp>="spring" - The default motion state of the tooltip. 
+	* pointerEvents:<boolean>=false - Allow pointer events.  Disabled by default to reduce accidental selection, but useful to
+enable to allow interactive tooltips (using `locked`) 
+	* contained:<'container' | 'window' | false>='container' - Include padding area (ex. axis) 
+	* variant:<'default' | 'invert' | 'none'>='default' - Tooltip variant 
+	* classes:<{ root?: string; container?: string; content?: string; header?: string; }>={} - Classes to apply to the various elements of the tooltip. 
+	* children:<Snippet<[ { data: T; payload: TooltipPayload[]; } ]>> - undefined 
+	* rootRef:<HTMLElement> - A reference to the tooltip's outermost `<div>` tag. 
+	* props:<{ root?: HTMLAttributes<HTMLElement>; container?: HTMLAttributes<HTMLElement>; content?: HTMLAttributes<HTMLElement>; }> - Props to pass to the underlying elements rendered
+by the Tooltip component 
+	* context:<ChartContextValue<T, any, any>> - Optionally pass the chart's context to the tooltip to get
+type inference for the data. 
+
+	## Related
+
+	[TooltipContext](/docs/components/TooltipContext)
+	[Highlight](/docs/components/Highlight)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Area, Axis, Chart, Layer, Highlight, Tooltip, defaultChartPadding } from 'layerchart';
+		import { createDateSeries } from '$lib/utils/data.js';
+
+		const data = createDateSeries({
+			count: 30,
+			min: 20,
+			max: 100,
+			value: 'integer',
+			keys: ['value', 'baseline']
+		});
+	</script>
+
+	<Chart
+		{data}
+		x="date"
+		y="value"
+		yDomain={[0, null]}
+		yNice
+		padding={defaultChartPadding({ top: 5, left: 28, bottom: 24, right: 15 })}
+		tooltip={{ mode: 'quadtree-x' }}
+		height={300}
+	>
+		<Layer>
+			<Axis placement="left" grid rule />
+			<Axis placement="bottom" rule />
+			<Area class="fill-primary/30" line={{ class: 'stroke-primary stroke-2' }} />
+			<Highlight points lines />
+		</Layer>
+		<Tooltip.Root>
+			{#snippet children({ data })}
+				<Tooltip.Header value={data.date} format="day" />
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} />
+				</Tooltip.List>
+			{/snippet}
+		</Tooltip.Root>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/TooltipContext.svelte b/docs/src/generated/mini-docs/TooltipContext.svelte
new file mode 100644
index 000000000..99c17f67a
--- /dev/null
+++ b/docs/src/generated/mini-docs/TooltipContext.svelte
@@ -0,0 +1,45 @@
+
+<!--
+	@component
+	## TooltipContext
+
+	## Description
+
+	Interaction component manages and provides the data and behavior needed to display dynamic tooltips within a chart.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [TooltipContext](/docs/components/TooltipContext)
+
+	## API Properties
+
+	* mode:<TooltipMode>='manual' - The tooltip interaction mode 
+	* findTooltipData:<'closest' | 'left' | 'right'>='closest' - Method to find tooltip data 
+	* raiseTarget:<boolean>=false - Similar to d3-selection's raise, re-insert the e.target as the last child of its parent, so
+to be the top-most element 
+	* locked:<boolean>=false - Lock tooltip (keep open, do not update on mouse movement). Allows for clicking on tooltip 
+	* touchEvents:<'none' | 'pan-x' | 'pan-y' | 'auto'>='pan-y' - Controls the touch event behavior on the tooltip container.
+By default uses `pan-y` to allow verticle scrolling but horizontal scrubbing.
+Use `none` to disable all touch events (useful for improved transform/geo charts interactions) 
+	* radius:<number>=Infinity - quadtree search or voronoi clip radius 
+	* debug:<boolean>=false - Enable debug view (show hit targets, etc) 
+	* onclick:<(e: MouseEvent, { data }: { data: any; }) => any>=() => {} - Click handler for the tooltip 
+	* tooltipContext:<TooltipContextValue<T>>={ x: 0, y: 0, data: null, show: showTooltip, hide: hideTooltip, mode } - Exposed to allow binding in Chart 
+	* hideDelay:<number>=0 - Delay in ms before hiding tooltip 
+	* ref:<HTMLElement> - A reference to the tooltip container element. 
+	* children:<Snippet<[ { tooltipContext: TooltipContextValue<T>; } ]>> - undefined 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Tooltip](/docs/components/Tooltip)
+	[Highlight](/docs/components/Highlight)
+
+	
+-->
diff --git a/docs/src/generated/mini-docs/TransformContext.svelte b/docs/src/generated/mini-docs/TransformContext.svelte
new file mode 100644
index 000000000..3542eb441
--- /dev/null
+++ b/docs/src/generated/mini-docs/TransformContext.svelte
@@ -0,0 +1,122 @@
+
+<!--
+	@component
+	## TransformContext
+
+	## Description
+
+	Interaction component which provides context to support panning, zooming, and dragging interactions for chart elements.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas), [HTML](/docs/components/html)
+
+	Full Documentation: [TransformContext](/docs/components/TransformContext)
+
+	## API Properties
+
+	* mode:<TransformMode> - undefined 
+	* processTranslate:<(x: number, y: number, deltaX: number, deltaY: number) => { x: number; y: number; }> - undefined 
+	* disablePointer:<boolean>=false - Disable pointer events including move/dragging.  Useful for `mode="canvas" but only want
+zoomTo() interactions 
+	* transformContext:<TransformContextValue> - A bindable reference to the transform context value. 
+	* initialScrollMode:<TransformScrollMode>='none' - Initial scroll mode.
+This is set to `none` by default, but can be set to `scale` or `translate` 
+	* clickDistance:<number>=10 - Distance/threshold to consider drag vs click (disable click propagation) 
+	* initialTranslate:<{ x: number; y: number; }> - Initial translate value 
+	* initialScale:<number> - Initial scale value 
+	* onTransform:<(details: { scale: number; translate: { x: number; y: number; }; }) => void> - A callback function that is called when the transform is applied. 
+	* ondragstart:<() => void> - undefined 
+	* ondragend:<() => void> - undefined 
+	* ref:<HTMLElement> - undefined 
+	* children:<Snippet<[ { transformContext: TransformContextValue; } ]>> - undefined 
+	* motion:<MotionProp> - undefined 
+
+	## Related
+
+	[Chart](/docs/components/Chart)
+	[Pack/basic](/docs/components/Pack/basic)
+	[Tree/basic](/docs/components/Tree/basic)
+	[GeoPath/transform-canvas](/docs/components/GeoPath/transform-canvas)
+	[GeoPath/transform-projection](/docs/components/GeoPath/transform-projection)
+	[GeoTile/zoomable](/docs/components/GeoTile/zoomable)
+	[GeoSpline/draggable-globe](/docs/components/GeoSpline/draggable-globe)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { cubicOut } from 'svelte/easing';
+
+		import { Chart, Circle, Layer, Points, Spline } from 'layerchart';
+		import TransformContextPlaygroundControls from '$lib/components/controls/TransformContextPlaygroundControls.svelte';
+		import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+		import CurveMenuField from '$lib/components/controls/fields/CurveMenuField.svelte';
+
+		import { getSpiral } from '$lib/utils/data';
+
+		let config = $state({
+			pointCount: 500,
+			angle: 137.5,
+			showPoints: true,
+			showPath: false,
+			tweened: true,
+			curve: undefined as ComponentProps<typeof CurveMenuField>['value']
+		});
+
+		const data = $derived(
+			getSpiral({
+				angle: config.angle,
+				radius: 10,
+				count: config.pointCount,
+				width: 500,
+				height: 500
+			})
+		);
+	</script>
+
+	<TransformContextPlaygroundControls bind:config />
+
+	<div class="grid place-items-center">
+		<Chart
+			{data}
+			x="x"
+			y="y"
+			transform={{
+				mode: 'canvas',
+				motion: config.tweened ? { type: 'tween', duration: 800, easing: cubicOut } : undefined,
+				initialScrollMode: 'scale'
+			}}
+			padding={50}
+			width={500}
+			height={500}
+		>
+			<TransformContextControls />
+			<Layer class="overflow-hidden">
+				{#if config.showPath}
+					<Spline curve={config.curve} motion="tween" />
+				{/if}
+				{#if config.showPoints}
+					<Points>
+						{#snippet children({ points })}
+							{#each points as point, index}
+								<Circle
+									cx={point.x}
+									cy={point.y}
+									r={2}
+									class={index % 2 ? 'fill-primary' : 'fill-secondary'}
+									motion={config.tweened ? 'tween' : undefined}
+								/>
+							{/each}
+						{/snippet}
+					</Points>
+				{/if}
+			</Layer>
+		</Chart>
+	</div>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Tree.svelte b/docs/src/generated/mini-docs/Tree.svelte
new file mode 100644
index 000000000..d95fee42c
--- /dev/null
+++ b/docs/src/generated/mini-docs/Tree.svelte
@@ -0,0 +1,169 @@
+
+<!--
+	@component
+	## Tree
+
+	## Description
+
+	Layout component which organizes hierarchical data into a branching structure with parent nodes connected to child nodes, visually representing relationships and levels of the hierarchy.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Tree](/docs/components/Tree)
+
+	## API Properties
+
+	* hierarchy:<HierarchyNode<T>> - d3 hierarchy node  (REQUIRED)
+	* nodeSize:<[ number, number ]> - Sets this tree layout’s node size to the specified two-element array of numbers `[width, height]`.
+If unset, layout size is used instead.  When a node size is specified, the root node is always
+positioned at `⟨0, 0⟩`.
+
+see: https://github.com/d3/d3-hierarchy#tree_nodeSize 
+	* separation:<(a: HierarchyPointNode<any>, b: HierarchyPointNode<any>) => number> - see: https://github.com/d3/d3-hierarchy#tree_separation 
+	* orientation:<'vertical' | 'horizontal'>='horizontal' - Orientation of the tree layout. 
+	* children:<Snippet<[ { nodes: HierarchyPointNode<any>[]; links: HierarchyPointLink<any>[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import type { ComponentProps } from 'svelte';
+		import { cubicOut } from 'svelte/easing';
+		import { hierarchy as d3Hierarchy, type HierarchyNode } from 'd3-hierarchy';
+		import { curveBumpX } from 'd3-shape';
+
+		import { Chart, Group, Link, Layer, Rect, Text, Tree } from 'layerchart';
+		import TransformContextControls from '$lib/components/controls/TransformContextControls.svelte';
+		import TreeControls from '$lib/components/controls/TreeControls.svelte';
+		import { getFlare } from '$lib/data.remote';
+		import { cls } from '@layerstack/tailwind';
+		import type { ConnectorSweep, ConnectorType } from '$lib/utils/connectorUtils.js';
+
+		let config = $state({
+			orientation: 'horizontal' as 'horizontal' | 'vertical',
+			layout: 'chart' as 'chart' | 'node',
+			type: 'd3' as ConnectorType,
+			sweep: 'none' as ConnectorSweep,
+			curve: curveBumpX,
+			radius: 60
+		});
+
+		let data = await getFlare();
+
+		let expandedNodeNames = $state(['flare']);
+		const hierarchy = $derived(
+			d3Hierarchy(data, (d) => (expandedNodeNames.includes(d.name) ? d.children : null))
+		);
+		// .sum((d) => d.value)
+		// .sort(sortFunc('value', 'desc'));
+		let selected = $state();
+
+		function getNodeKey(node: HierarchyNode<{ name: string }>) {
+			return node.data.name + node.depth;
+		}
+
+		const nodeWidth = 120;
+		const nodeHeight = 20;
+		const nodeSiblingGap = 20;
+		const nodeParentGap = 100;
+		const nodeSize = $derived(
+			config.orientation === 'horizontal'
+				? ([nodeHeight + nodeSiblingGap, nodeWidth + nodeParentGap] as [number, number])
+				: ([nodeWidth + nodeSiblingGap, nodeHeight + nodeParentGap] as [number, number])
+		);
+	</script>
+
+	<TreeControls bind:config />
+
+	<Chart
+		padding={{ top: 24, left: nodeWidth / 2, right: nodeWidth / 2 }}
+		transform={{
+			mode: 'canvas',
+			motion: { type: 'tween', duration: 800, easing: cubicOut }
+		}}
+		height={800}
+	>
+		{#snippet children()}
+			<TransformContextControls orientation="horizontal" class="-m-2" />
+
+			<Tree
+				{hierarchy}
+				orientation={config.orientation}
+				nodeSize={config.layout === 'node' ? nodeSize : undefined}
+			>
+				{#snippet children({ nodes, links })}
+					<Layer>
+						{#each links as link (getNodeKey(link.source) + '_' + getNodeKey(link.target))}
+							<Link
+								data={link}
+								orientation={config.orientation}
+								curve={config.curve}
+								type={config.type}
+								sweep={config.sweep}
+								radius={config.radius}
+								motion="tween"
+								class="stroke-surface-content opacity-20"
+							/>
+						{/each}
+
+						{#each nodes as node (getNodeKey(node))}
+							<Group
+								x={(config.orientation === 'horizontal' ? node.y : node.x) - nodeWidth / 2}
+								y={(config.orientation === 'horizontal' ? node.x : node.y) - nodeHeight / 2}
+								motion="tween"
+								onclick={() => {
+									if (expandedNodeNames.includes(node.data.name)) {
+										expandedNodeNames = expandedNodeNames.filter((name) => name !== node.data.name);
+									} else {
+										expandedNodeNames = [...expandedNodeNames, node.data.name];
+									}
+									selected = node;
+
+									// transform.zoomTo({
+									//   x: orientation === 'horizontal' ? selected.y : selected.x,
+									//   y: orientation === 'horizontal' ? selected.x : selected.y,
+									// });
+								}}
+								class={cls(node.data.children && 'cursor-pointer')}
+							>
+								<Rect
+									width={nodeWidth}
+									height={nodeHeight}
+									class={cls(
+										'fill-surface-100',
+										node.data.children
+											? 'stroke-primary hover:stroke-2'
+											: 'stroke-secondary [stroke-dasharray:1]'
+									)}
+									rx={10}
+								/>
+								<Text
+									value={node.data.name}
+									x={nodeWidth / 2}
+									y={nodeHeight / 2}
+									dy={-2}
+									textAnchor="middle"
+									verticalAnchor="middle"
+									class={cls(
+										'text-xs pointer-events-none',
+										node.data.children ? 'fill-primary' : 'fill-secondary'
+									)}
+								/>
+							</Group>
+						{/each}
+					</Layer>
+				{/snippet}
+			</Tree>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Treemap.svelte b/docs/src/generated/mini-docs/Treemap.svelte
new file mode 100644
index 000000000..c8d566eca
--- /dev/null
+++ b/docs/src/generated/mini-docs/Treemap.svelte
@@ -0,0 +1,102 @@
+
+<!--
+	@component
+	## Treemap
+
+	## Description
+
+	Layout component which visualizes hierarchical data as nested rectangles, where each rectangle’s size represents a quantitative value and nesting reflects the hierarchy.
+
+	## Category
+
+	[[Layout](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Layout.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Treemap](/docs/components/Treemap)
+
+	## API Properties
+
+	* hierarchy:<HierarchyNode<T>> - d3 hierarchy node  (REQUIRED)
+	* tile:<typeof treemapSquarify | 'binary' | 'squarify' | 'resquarify' | 'dice' | 'slice' | 'sliceDice'>=treemapSquarify - The tile function to use for the treemap layout. 
+	* padding:<number | ((node: HierarchyRectangularNode<T>) => number)>=0 - The padding between nodes. 
+	* paddingInner:<number | ((node: HierarchyRectangularNode<T>) => number)>=0 - The inner padding between nodes. 
+	* paddingOuter:<number | ((node: HierarchyRectangularNode<T>) => number)>=0 - The outer padding between nodes. 
+	* paddingTop:<number | ((node: HierarchyRectangularNode<T>) => number)>=0 - The top padding between nodes. 
+	* paddingBottom:<number | ((node: HierarchyRectangularNode<T>) => number)>=0 - The bottom padding between nodes. 
+	* paddingLeft:<number | ((node: HierarchyRectangularNode<T>) => number)> - The left padding between nodes. 
+	* paddingRight:<number | ((node: HierarchyRectangularNode<T>) => number)> - The right padding between nodes. 
+	* maintainAspectRatio:<boolean>=false - Modify tiling function for approapriate aspect ratio when treemap is zoomed in 
+	* children:<Snippet<[ { nodes: HierarchyRectangularNode<T>[]; } ]>> - undefined 
+
+	## Related
+
+	[](/docs/components/)
+
+	@example
+	```svelte
+	<script>
+		import { Chart, Group, Layer, Rect, Text, Treemap } from 'layerchart';
+		import { scaleOrdinal } from 'd3-scale';
+		import { schemeSpectral } from 'd3-scale-chromatic';
+		import { hsl } from 'd3-color';
+		import { hierarchy } from 'd3-hierarchy';
+
+		const data = hierarchy({
+			name: 'root',
+			children: [
+				{ name: 'A', value: 1000 },
+				{ name: 'B', value: 900 },
+				{ name: 'C', value: 800 },
+				{ name: 'D', value: 700 },
+				{ name: 'E', value: 600 },
+				{ name: 'F', value: 500 },
+				{ name: 'G', value: 400 },
+				{ name: 'H', value: 300 },
+				{ name: 'I', value: 200 },
+				{ name: 'J', value: 100 },
+				{ name: 'K', value: 100 }
+			]
+		}).sum((d) => {
+			// @ts-expect-error
+			return d.value;
+		});
+		export { data };
+
+		const simpleOrdinalColor = scaleOrdinal(
+			schemeSpectral[11].filter((c) => hsl(c).h < 60 || hsl(c).h > 90) // filter out hard to see yellow and green
+		);
+	</script>
+
+	<Chart height={400}>
+		<Layer>
+			<Treemap hierarchy={data}>
+				{#snippet children({ nodes })}
+					{#each nodes.filter((n) => n.depth > 0) as node}
+						<Group x={node.x0} y={node.y0}>
+							{@const nodeWidth = node.x1 - node.x0}
+							{@const nodeHeight = node.y1 - node.y0}
+							<Rect
+								width={nodeWidth}
+								height={nodeHeight}
+								stroke="rgb(0, 0, 0, 0.2)"
+								fill={simpleOrdinalColor(node.data.name)}
+							/>
+							<Text
+								x={nodeWidth / 2}
+								y={nodeHeight / 2}
+								value={node.data.name}
+								fill="rgb(0, 0, 0, 0.8)"
+								textAnchor="middle"
+								verticalAnchor="middle"
+							/>
+						</Group>
+					{/each}
+				{/snippet}
+			</Treemap>
+		</Layer>
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/Voronoi.svelte b/docs/src/generated/mini-docs/Voronoi.svelte
new file mode 100644
index 000000000..4a3a046fa
--- /dev/null
+++ b/docs/src/generated/mini-docs/Voronoi.svelte
@@ -0,0 +1,76 @@
+
+<!--
+	@component
+	## Voronoi
+
+	## Description
+
+	Interaction component which creates Voronoi diagrams to divide a plane according to the nearest points, aiding spatial analysis and visualization.
+
+	## Category
+
+	[[Interactions](/Users/sjr/dev/Svelte/layerchart/docs/src/content/components/Interactions.md)]
+
+	## Layers
+
+	[SVG](/docs/components/svg), [Canvas](/docs/components/canvas)
+
+	Full Documentation: [Voronoi](/docs/components/Voronoi)
+
+	## API Properties
+
+	* data:<any> - Override data instead of using context 
+	* r:<number> - Radius to clip voronoi cells.  `0` or `undefined` to disables clipping 
+	* classes:<{ root?: string; path?: string; }>== {} - Classes to apply to the root and path elements 
+	* onclick:<(e: MouseEvent, details: { data: any; point?: [ number, number ]; feature?: GeoPermissibleObjects; }) => void> - undefined 
+	* onpointerenter:<(e: PointerEvent, details: { data: any; point?: [ number, number ]; feature?: GeoPermissibleObjects; }) => void> - undefined 
+	* onpointermove:<(e: PointerEvent, details: { data: any; point?: [ number, number ]; feature?: GeoPermissibleObjects; }) => void> - undefined 
+	* onpointerdown:<(e: PointerEvent, details: { data: any; point?: [ number, number ]; feature?: GeoPermissibleObjects; }) => void> - undefined 
+
+	## Related
+
+	[TooltipContext](/docs/components/TooltipContext)
+
+	@example
+	```svelte
+	<script lang="ts">
+		import { Chart, ChartClipPath, Circle, Layer, Points, Voronoi } from 'layerchart';
+		import { getSpiral } from '$lib/utils/data.js';
+		import VoronoiControls from '$lib/components/controls/VoronoiControls.svelte';
+
+		const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
+
+		let point = $state({ x: 0, y: 0 });
+		function onPointerMove(e: PointerEvent) {
+			point = {
+				x: e.offsetX,
+				y: e.offsetY
+			};
+		}
+		let radius = $state(0);
+	</script>
+
+	<VoronoiControls bind:radius />
+
+	<Chart {data} x="x" y="y" height={400}>
+		{#snippet children({ context })}
+			<Layer onpointermove={onPointerMove}>
+				<ChartClipPath>
+					<Points r={2} class="fill-primary stroke-primary" />
+					<Voronoi
+						data={[
+							{ x: context.xScale?.invert?.(point.x), y: context.yScale?.invert?.(point.y) },
+							...data
+						]}
+						r={radius}
+						classes={{
+							path: 'pointer-events-none stroke-primary fill-primary/10 first:fill-primary/50'
+						}}
+					/>
+					<Circle cx={point.x} cy={point.y} r={4} class="fill-primary" />
+				</ChartClipPath>
+			</Layer>
+		{/snippet}
+	</Chart>
+	```
+-->
diff --git a/docs/src/generated/mini-docs/index.json b/docs/src/generated/mini-docs/index.json
new file mode 100644
index 000000000..8fe3585ed
--- /dev/null
+++ b/docs/src/generated/mini-docs/index.json
@@ -0,0 +1,329 @@
+{
+  "generatedAt": "2026-01-03T18:37:21.934Z",
+  "components": [
+    {
+      "component": "AnnotationLine",
+      "file": "AnnotationLine.svelte"
+    },
+    {
+      "component": "AnnotationPoint",
+      "file": "AnnotationPoint.svelte"
+    },
+    {
+      "component": "AnnotationRange",
+      "file": "AnnotationRange.svelte"
+    },
+    {
+      "component": "Arc",
+      "file": "Arc.svelte"
+    },
+    {
+      "component": "ArcChart",
+      "file": "ArcChart.svelte"
+    },
+    {
+      "component": "Area",
+      "file": "Area.svelte"
+    },
+    {
+      "component": "AreaChart",
+      "file": "AreaChart.svelte"
+    },
+    {
+      "component": "Axis",
+      "file": "Axis.svelte"
+    },
+    {
+      "component": "Bar",
+      "file": "Bar.svelte"
+    },
+    {
+      "component": "BarChart",
+      "file": "BarChart.svelte"
+    },
+    {
+      "component": "Bars",
+      "file": "Bars.svelte"
+    },
+    {
+      "component": "Blur",
+      "file": "Blur.svelte"
+    },
+    {
+      "component": "Bounds",
+      "file": "Bounds.svelte"
+    },
+    {
+      "component": "BrushContext",
+      "file": "BrushContext.svelte"
+    },
+    {
+      "component": "Calendar",
+      "file": "Calendar.svelte"
+    },
+    {
+      "component": "Canvas",
+      "file": "Canvas.svelte"
+    },
+    {
+      "component": "Chart",
+      "file": "Chart.svelte"
+    },
+    {
+      "component": "ChartClipPath",
+      "file": "ChartClipPath.svelte"
+    },
+    {
+      "component": "Circle",
+      "file": "Circle.svelte"
+    },
+    {
+      "component": "CircleClipPath",
+      "file": "CircleClipPath.svelte"
+    },
+    {
+      "component": "ClipPath",
+      "file": "ClipPath.svelte"
+    },
+    {
+      "component": "cls",
+      "file": "cls.svelte"
+    },
+    {
+      "component": "ColorRamp",
+      "file": "ColorRamp.svelte"
+    },
+    {
+      "component": "Connector",
+      "file": "Connector.svelte"
+    },
+    {
+      "component": "Dagre",
+      "file": "Dagre.svelte"
+    },
+    {
+      "component": "direct",
+      "file": "direct.svelte"
+    },
+    {
+      "component": "Ellipse",
+      "file": "Ellipse.svelte"
+    },
+    {
+      "component": "ForceSimulation",
+      "file": "ForceSimulation.svelte"
+    },
+    {
+      "component": "format",
+      "file": "format.svelte"
+    },
+    {
+      "component": "Frame",
+      "file": "Frame.svelte"
+    },
+    {
+      "component": "GeoCircle",
+      "file": "GeoCircle.svelte"
+    },
+    {
+      "component": "GeoContext",
+      "file": "GeoContext.svelte"
+    },
+    {
+      "component": "GeoEdgeFade",
+      "file": "GeoEdgeFade.svelte"
+    },
+    {
+      "component": "GeoPath",
+      "file": "GeoPath.svelte"
+    },
+    {
+      "component": "GeoPoint",
+      "file": "GeoPoint.svelte"
+    },
+    {
+      "component": "GeoSpline",
+      "file": "GeoSpline.svelte"
+    },
+    {
+      "component": "GeoTile",
+      "file": "GeoTile.svelte"
+    },
+    {
+      "component": "GeoVisible",
+      "file": "GeoVisible.svelte"
+    },
+    {
+      "component": "Graticule",
+      "file": "Graticule.svelte"
+    },
+    {
+      "component": "Grid",
+      "file": "Grid.svelte"
+    },
+    {
+      "component": "Group",
+      "file": "Group.svelte"
+    },
+    {
+      "component": "Highlight",
+      "file": "Highlight.svelte"
+    },
+    {
+      "component": "Html",
+      "file": "Html.svelte"
+    },
+    {
+      "component": "Hull",
+      "file": "Hull.svelte"
+    },
+    {
+      "component": "Labels",
+      "file": "Labels.svelte"
+    },
+    {
+      "component": "Layer",
+      "file": "Layer.svelte"
+    },
+    {
+      "component": "Legend",
+      "file": "Legend.svelte"
+    },
+    {
+      "component": "Line",
+      "file": "Line.svelte"
+    },
+    {
+      "component": "LinearGradient",
+      "file": "LinearGradient.svelte"
+    },
+    {
+      "component": "LineChart",
+      "file": "LineChart.svelte"
+    },
+    {
+      "component": "Link",
+      "file": "Link.svelte"
+    },
+    {
+      "component": "Marker",
+      "file": "Marker.svelte"
+    },
+    {
+      "component": "MotionPath",
+      "file": "MotionPath.svelte"
+    },
+    {
+      "component": "Pack",
+      "file": "Pack.svelte"
+    },
+    {
+      "component": "Partition",
+      "file": "Partition.svelte"
+    },
+    {
+      "component": "Path",
+      "file": "Path.svelte"
+    },
+    {
+      "component": "Pattern",
+      "file": "Pattern.svelte"
+    },
+    {
+      "component": "Pie",
+      "file": "Pie.svelte"
+    },
+    {
+      "component": "PieChart",
+      "file": "PieChart.svelte"
+    },
+    {
+      "component": "pivot",
+      "file": "pivot.svelte"
+    },
+    {
+      "component": "Point",
+      "file": "Point.svelte"
+    },
+    {
+      "component": "Points",
+      "file": "Points.svelte"
+    },
+    {
+      "component": "Polygon",
+      "file": "Polygon.svelte"
+    },
+    {
+      "component": "RadialGradient",
+      "file": "RadialGradient.svelte"
+    },
+    {
+      "component": "Rect",
+      "file": "Rect.svelte"
+    },
+    {
+      "component": "RectClipPath",
+      "file": "RectClipPath.svelte"
+    },
+    {
+      "component": "Rule",
+      "file": "Rule.svelte"
+    },
+    {
+      "component": "Sankey",
+      "file": "Sankey.svelte"
+    },
+    {
+      "component": "ScatterChart",
+      "file": "ScatterChart.svelte"
+    },
+    {
+      "component": "Spline",
+      "file": "Spline.svelte"
+    },
+    {
+      "component": "string",
+      "file": "string.svelte"
+    },
+    {
+      "component": "Svg",
+      "file": "Svg.svelte"
+    },
+    {
+      "component": "Text",
+      "file": "Text.svelte"
+    },
+    {
+      "component": "Threshold",
+      "file": "Threshold.svelte"
+    },
+    {
+      "component": "TileImage",
+      "file": "TileImage.svelte"
+    },
+    {
+      "component": "Tooltip",
+      "file": "Tooltip.svelte"
+    },
+    {
+      "component": "TooltipContext",
+      "file": "TooltipContext.svelte"
+    },
+    {
+      "component": "TransformContext",
+      "file": "TransformContext.svelte"
+    },
+    {
+      "component": "Tree",
+      "file": "Tree.svelte"
+    },
+    {
+      "component": "Treemap",
+      "file": "Treemap.svelte"
+    },
+    {
+      "component": "Voronoi",
+      "file": "Voronoi.svelte"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/docs/svelte.config.js b/docs/svelte.config.js
index 312e1a5e5..b439ef890 100644
--- a/docs/svelte.config.js
+++ b/docs/svelte.config.js
@@ -11,6 +11,7 @@ const config = {
 		adapter: adapter(),
 		alias: {
 			$examples: './src/examples',
+			$miniDocs: './src/generated/mini-docs',
 			'$static/*': 'static/*',
 			'content-collections': './.content-collections/generated'
 		},