diff --git a/.changeset/clear-pears-tickle.md b/.changeset/clear-pears-tickle.md
new file mode 100644
index 000000000..9a12ea4f4
--- /dev/null
+++ b/.changeset/clear-pears-tickle.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking: Change `defaultChartPadding(axis, legend)` to `defaultChartPadding({ axis, legend })` and support overrides (ex. `defaultChartPadding({ left: 50 })`)
diff --git a/.changeset/fair-phones-wink.md b/.changeset/fair-phones-wink.md
new file mode 100644
index 000000000..9092c22e9
--- /dev/null
+++ b/.changeset/fair-phones-wink.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+refactor: Rename simplified charts `renderContext` prop to `layer`
diff --git a/.changeset/flat-cases-enter.md b/.changeset/flat-cases-enter.md
new file mode 100644
index 000000000..6f4f9633c
--- /dev/null
+++ b/.changeset/flat-cases-enter.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+refactor: Move contexts to separate `$lib/contexts` module
diff --git a/.changeset/four-lizards-win.md b/.changeset/four-lizards-win.md
new file mode 100644
index 000000000..1cf12426b
--- /dev/null
+++ b/.changeset/four-lizards-win.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Layer): Allow `type` to be optional, fallbacking back to `settings.layer` type
diff --git a/.changeset/full-times-guess.md b/.changeset/full-times-guess.md
new file mode 100644
index 000000000..513e967a7
--- /dev/null
+++ b/.changeset/full-times-guess.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat: Support global settings (layer type, debug, etc)
diff --git a/.changeset/good-glasses-design.md b/.changeset/good-glasses-design.md
new file mode 100644
index 000000000..ca4c21b2f
--- /dev/null
+++ b/.changeset/good-glasses-design.md
@@ -0,0 +1,12 @@
+---
+'shadcn-svelte-1': patch
+'svelteux-2': patch
+'skeleton-3': patch
+'skeleton4': patch
+'standalone': patch
+'layerchart': patch
+'daisyui-5': patch
+'docs': patch
+---
+
+Removed lodash-es dependency
diff --git a/.changeset/green-poems-drop.md b/.changeset/green-poems-drop.md
new file mode 100644
index 000000000..b175555ba
--- /dev/null
+++ b/.changeset/green-poems-drop.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+fix(Bar): Fix browser lockup when switching between group and stack layouts
diff --git a/.changeset/hot-dots-stick.md b/.changeset/hot-dots-stick.md
new file mode 100644
index 000000000..e1b9dbd87
--- /dev/null
+++ b/.changeset/hot-dots-stick.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Circle|Rect): Support passing children snippet for Html layers
diff --git a/.changeset/icy-llamas-jump.md b/.changeset/icy-llamas-jump.md
new file mode 100644
index 000000000..939058469
--- /dev/null
+++ b/.changeset/icy-llamas-jump.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Support passing explicit `width` and `height` instead of requiring parent dimensions
diff --git a/.changeset/spicy-gifts-float.md b/.changeset/spicy-gifts-float.md
new file mode 100644
index 000000000..915bbcc77
--- /dev/null
+++ b/.changeset/spicy-gifts-float.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Chart): Support `class` prop
diff --git a/.changeset/three-cities-chew.md b/.changeset/three-cities-chew.md
new file mode 100644
index 000000000..c45795950
--- /dev/null
+++ b/.changeset/three-cities-chew.md
@@ -0,0 +1,5 @@
+---
+'layerchart': minor
+---
+
+breaking: Extract `Path` primitive component from `Spline` for better separation of concerns
diff --git a/.changeset/twenty-bushes-hope.md b/.changeset/twenty-bushes-hope.md
new file mode 100644
index 000000000..b17071a78
--- /dev/null
+++ b/.changeset/twenty-bushes-hope.md
@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+feat(Layer): Support showing chart and full frame boundaries with `settings.debug`
diff --git a/.github/workflows/build-preview.yml b/.github/workflows/build-preview.yml
index f12ab9899..da5083df2 100644
--- a/.github/workflows/build-preview.yml
+++ b/.github/workflows/build-preview.yml
@@ -23,12 +23,15 @@ jobs:
- name: Install dependencies
run: pnpm install
+ - name: Build packages
+ run: pnpm package
+
- name: Build site
- run: pnpm build:packages
+ run: pnpm --filter docs build
- name: Upload build artifact
uses: actions/upload-artifact@v4
with:
name: preview-build
- path: packages/layerchart/.svelte-kit
+ path: docs/.svelte-kit
include-hidden-files: true
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 219ffa361..d1e72d3b4 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -27,6 +27,8 @@ jobs:
- run: pnpm install --frozen-lockfile
+ - run: pnpm --filter docs exec playwright install chromium
+
- run: pnpm check:packages
- run: pnpm lint:packages
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
index 7623b3057..9697e305a 100644
--- a/.github/workflows/deploy-prod.yml
+++ b/.github/workflows/deploy-prod.yml
@@ -5,7 +5,7 @@ on:
branches:
- main
paths:
- - packages/layerchart/**
+ - docs/**
jobs:
deploy-production:
@@ -25,8 +25,11 @@ jobs:
- name: Install dependencies
run: pnpm install
+ - name: Build packages
+ run: pnpm package
+
- name: Build site
- run: pnpm build:packages
+ run: pnpm --filter docs build
- name: Deploy to Cloudflare Pages
uses: AdrianGonz97/refined-cf-pages-action@v1
@@ -36,5 +39,5 @@ jobs:
githubToken: ${{ secrets.GITHUB_TOKEN }}
projectName: layerchart
directory: ./.svelte-kit/cloudflare
- workingDirectory: packages/layerchart
+ workingDirectory: docs
deploymentName: Production
diff --git a/.gitignore b/.gitignore
index e3bb08413..4e1d30598 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,6 +14,9 @@ test-*
# Content Collections
.content-collections
+# mdsx live code
+.live-code/
+
# Generated API documentation
**/generated/api/*.json
diff --git a/.vscode/launch.json b/.vscode/launch.json
new file mode 100644
index 000000000..6f3c990b6
--- /dev/null
+++ b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+ // Use IntelliSense to learn about possible attributes.
+ // Hover to view descriptions of existing attributes.
+ // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+ "version": "0.2.0",
+ "configurations": [
+ {
+ "type": "chrome",
+ "request": "launch",
+ "name": "Launch Chrome against localhost",
+ "url": "http://localhost:8080",
+ "webRoot": "${workspaceFolder}"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/docs/ TODO FIXES.md b/docs/ TODO FIXES.md
new file mode 100644
index 000000000..30c898e0f
--- /dev/null
+++ b/docs/ TODO FIXES.md
@@ -0,0 +1,777 @@
+# TODO
+
+## GLOBAL
+
+1. Sticky header allows for examples to scroll under and allowing for adjustments of svg/canvas/etc layers for debugging w/o scrolling. NOTE: if stickyheader then can remove debug from individual example page controls.
+
+```css
+:root {
+ --header-height: 140px;
+}
+header {
+ position: sticky;
+ top: 0;
+ height: var(--header-height);
+}
+section {
+ scroll-margin-top: var(--header-height);
+}
+```
+
+or tailwind
+
+```html
+
+
+
+
+
+```
+
+1. [ ] Go to top overlay
+
+```html
+
+
+
+```
+
+1. [ ] For related examples/components in md file instead of pointing to main file point to the directely related example for clarity. Ie "components/Labels" currently relates to "components/Spline" instead have it point to "components/Spline#basic-start-and-end-snippets" (ie 1st use example using the related on page). Only thing I don't like it quite long url, but better for user.
+
+1. [ ] Export data from example when coming from API even when large? consitency, shows user schema expected, use in open in Playground/Stackblitz, performance?
+
+1. [ ] Within Examples only, example like "SubmarineCablesGlobe" rename to "Submarine Cables Globe"?
+
+1. [ ] Blockquote multiline text is odd: larger x-gap, less line-height: add "leading-tight break-keep” reduced line-height and prevents breaks on ?/?.
+
+1. [ ] SVG/Canvas/HTML toggle - user-select:none or TW "select-none"
+
+1. [ ] script section imports order/sectioning w/empty lines for consistency? svelte -> d3 -> layerchart -> other libs -> local imports?
+
+1. [ ] script order for consistency?
+ - imports
+ - var assignments
+ - functions
+ - deriveds
+ - export {data}
+
+1. [ ] Titles for examples - normalize all for Capitalize initial, rest lowercase unless its a component?
+
+1. [ ] Break out all controls to separate files for simpler examples. I have most of these already, in $lib/components. They are named like ArcControls.svelte. I haven't updated examples to use them yet. Note the ??Controls.svelte file you can copy out the calling HTML such as ``.
+
+1. [ ] Choosing inspect on an example could be a little confusing, I see the "Return to examples" at the top of the page, but some other indication might help. I am not sure what that might be: Large Modal instead? Dim sidebar? Maybe it's just me and it's fine.
+
+1. [ ] For fruit examples define css var corresponding to expected color. Something about non corresponding colors feels off
+
+```css
+banana {
+ --color: yellow;
+}
+apple {
+ --color: green;
+}
+cherry {
+ --color: red;
+}
+grape {
+ --color: purple;
+}
+```
+
+- searched references for grapes:
+ docs/src/examples/BarChart/group-series-bar-click.svelte
+ docs/src/examples/BarChart/group-series-horizontal.svelte
+ docs/src/examples/BarChart/group-series-labels.svelte
+ docs/src/examples/BarChart/group-series-series-long-data.svelte
+ docs/src/examples/BarChart/group-series.svelte
+ docs/src/examples/BarChart/legend-custom-labels.svelte
+ docs/src/examples/BarChart/legend-group-series.svelte
+ docs/src/examples/BarChart/legend-placement.svelte
+ docs/src/examples/BarChart/legend-stack-series.svelte
+ docs/src/examples/BarChart/stack-series-expand.svelte
+ docs/src/examples/BarChart/stack-series-horizontal.svelte
+ docs/src/examples/BarChart/stack-series-padded.svelte
+ docs/src/examples/BarChart/stack-series.svelte
+ examples/daisyui-5/src/routes/+page.svelte
+ examples/shadcn-svelte-1/src/routes/+page.svelte
+ examples/skeleton-3/src/routes/+page.svelte
+ examples/standalone/src/routes/+page.svelte
+ examples/svelte-ux-2/src/routes/+page.svelte
+
+## Examples
+
+### Arc 11/2/25
+
+- [ ] Description - "Visualizes data using curved segments to represent proportions or relationships within a circular layout"
+- [ ] Show controls broken out - ShowControls.svelte
+
+### Area 11/2/25
+
+- [ ] Description - "Shaded region under a line chart to emphasize magnitude and trend of data over a range"
+- [ ] Breakout controls for "Clip tween on mount" - ShowControls.svelte
+
+### Bar Chart (Horizontal) 11/2/25
+
+- [ ] Description - "Creates horizontal bars to represent and compare discrete data values visually"
+- [ ] Breakout controls for "Tween on mount", "Stagger tween on mount", "Stagger tween on mount (rounded edge) - ShowControls.svelte
+- [ ] "Tooltip and click handlers for indvidual stack/grouped bar", Group stacked, group & stacked mode is broken
+
+### Bar Chart (Vertical) 11/2/25
+
+- [ ] Description - "Creates vertical bars to represent and compare discrete data values visually"
+- [ ] Breakout controls for "Tween on mount", "Tween in mount (rounded edge), "Stagger tween on mount", "Stagger tween on mount (rounded edge) - ShowControls.svelte
+- [ ] "Tooltip and click handlers for indvidual stack/grouped bar", Group stacked, group & stacked mode is broken
+
+### Candlestick 11/2/25
+
+- [ ] Description - "Visualizes price movements over time using candles that show opening, closing, high, and low values for each period."
+- [ ] Canvas cut off top of Y axis labels x 2 examples, needs padding
+
+### Compound 11/2/25
+
+- [ ] Description - "Combines multiple chart types or multiple of same chart types to provide a more comprehensive view of the related data."
+- [ ] "Separate scales with stacked charts and overridden marks" colors change when switching Canvas to SVG
+- [ ] Drop in my 3 axis example (w/Tariffs)
+- [ ] Related examples/Bars -nothing
+
+### Duration 11/2/25
+
+- [ ] Description - "Visualizes time intervals or durations on a chart to represent events, activities, or processes over a specified period."
+- [ ] "Bars (dense lanes)" add identify data "World Events"?
+- [ ] Export data?
+
+### Histogram 11/2/25
+
+- [ ] Description - "Groups continuous data into bins and displays their frequencies as bars to show data distribution"
+- [ ] All examples broken - Referencing Duration not Histogram
+
+### Line 10/31/2025
+
+- [ ] Description - "Connects data points with straight lines to show trends, patterns, or relationships over a continuous range"
+
+### Lollipop 11/2/25
+
+- [ ] Description - "Combines lines and markers to represent data points, highlighting individual values along a vertical or horizontal axis"
+
+### Oscilloscope 11/2/25
+
+- [ ] Description - "Visualizes real-time waveform or signal data to display changes in amplitude over time."
+- [ ] New example x2 Time-live and Oscilloscope-live using the microphone.
+
+### PunchCard 11/2/25
+
+- [ ] Description - "Displays data in a grid format where the size or color of each cell represents the magnitude of values, often used to show patterns over time."
+
+### RadialLine 11/2/25
+
+- [ ] Description - "Plots data points in a circular layout, connecting them with lines to reveal patterns or trends radiating from a central point."
+
+### Scatter 11/2/25
+
+- [ ] Description - "plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines"
+
+### Sparkbar 11/2/25
+
+- [ ] Description "Very small, simple bar chart used to show data over time within a compact space"
+- [ ] "fixed position tooltip" and "Basic within a paragraph with Tooltip and Highlight" too many decimal places shown
+
+### Sparkline 11/2/25
+
+- [ ] Description - "Quite small, simple line used to show a trend in data over time within a compact space"
+
+- [ ] "fixed position tooltip" and "Within a paragraph with Tooltip and Highlight" too many decimal places shown
+
+### Threshold
+
+- [ ] Description "visualizes data relative to predefined limits, highlighting values that exceed or fall below set thresholds"
+- [ ] no need to breakout, single controls
+
+### Hierarchy
+
+- [ ] Description - "Visualizes hierarchical data structures using nested shapes to represent parent-child relationships and proportions."
+- [ ] Build out examples
+- [ ] Split out controls - not done
+
+## Pack
+
+- [ ] Description - "Represents hierarchical data as a set of nested circles, where each circle's size corresponds to a data value."
+
+## Partition
+
+- [ ] "Filterable" move apply partial filter to controls
+- [x] controls separated
+
+## Sunburst
+
+- [x] controls separated
+
+## Tree
+
+- [ ] Control for Curve (now in $lib/components/TreeControls.svelte) overflows, need 2 col span (was same in old docs)
+- [x] controls separated
+
+## Treemap
+
+- [x] controls separated
+
+### Dagre
+
+- [ ] Description - "Visualizes directed graphs using a layered approach to represent relationships between nodes."
+- [ ] Split out controls - not done
+
+### Sankey 11/2/25
+
+- [ ] Description - "Visualizes flow and distribution of resources or data between different stages or categories using proportional arrows."
+- [ ] Build out examples
+
+### Beeswarm 11/2/25
+
+- [ ] Description - "Displays individual data points along a single axis while avoiding overlap, revealing distribution and clustering patterns"
+
+### Collision Detection 11/2/25
+
+- [ ] Description - "Manages overlapping elements in a visualization by adjusting their positions to ensure clarity and readability."
+
+### Force DisjointGraph 11/2/25
+
+- [x] Description
+- [ ] Broken link for "basic"
+
+### ForceDrag 11/2/25
+
+- [ ] did not break out sticky, single setting.
+
+### ForceGraph 11/2/25
+
+- [ ] Description - "Creates interactive force-directed graphs to visualize relationships and connections between nodes dynamically."
+
+### ForceGroup 11/2/25
+
+- [ ] Description - "Groups nodes in a force-directed graph to visualize clusters and relationships effectively."
+
+### ForceLattice 11/2/25
+
+- [ ] Description - "Generates a lattice structure using force-directed layout to visualize relationships in a grid-like pattern."
+
+### ForceText 11/2/25
+
+- [ ] Description - "Positions text elements within a force-directed layout to visualize relationships and connections dynamically."
+- [ ] broke out controls to ForceTextControls.svelte
+
+### ForceTree 11/2/25
+
+- [ ] Description - "Visualizes hierarchical data structures using a force-directed layout to illustrate parent-child relationships dynamically."
+
+### Animated Globe 11/2/25
+
+- [ ] Description - "Creates an interactive 3D globe visualization with animated features to represent geographical data dynamically."
+- [ ] controls at right are easy to miss, move to left?
+
+### BubbleMap 11/2/25
+
+- [ ] Description - "Displays data points on a geographical map using bubbles to represent values or magnitudes at specific locations."
+
+### Choropleth 11/2/25
+
+- [ ] Description - "Visualizes data by shading geographical regions on a map according to specific values or categories."
+
+### Bubble Map 11/2/25
+
+- [ ] Description - "Displays data points on a geographical map using bubbles to represent values or magnitudes at specific locations."
+- [ ]
+
+### CountryMap 11/2/25
+
+- [ ] Description - "Displays data points on a geographical map using country boundaries to represent values or magnitudes at specific locations."
+- [ ] fix example
+
+### EarthquakeGlobe
+
+- [ ] Description - "Creates an interactive 3D globe visualization to represent earthquake data dynamically."
+- [ ] broken out controls - EarthquakeEclipsesGlobeControls.svelte
+
+### ExclipsesGlobe 11/2/25
+
+- [ ] Description - "Visualizes solar and lunar eclipses on a 3D globe, showing their paths and visibility across the Earth."
+- [ ] broken out controls - EarthquakeEclipsesGlobeControls.svelte
+
+### GeoPath 11/2/25
+
+- [ ] Description - "Renders geographical features on a map using path data to represent shapes like countries, states, or regions."
+
+### GeoPoint 11/2/25
+
+- [ ] Description - "Plots individual geographical points on a map to represent locations, events, or data tied to specific coordinates." vs CURRENT "GeoPoint examples demonstrating geographic point placement with various datasets"
+- [ ] Broken examples
+
+### GeoProjection
+
+- [ ] Description - "Transforms geographical coordinates into a flat map representation using various projection techniques." vs CURRENT "Geographic projection examples demonstrating various map projections with interactive controls"
+- [ ] Broken examples
+
+### GeoTile
+
+- [ ] Description - "Renders map tiles to display geographical data efficiently, allowing for zooming and panning across different regions." vs CURRENT "GeoTile examples demonstrating tile-based mapping with interactive controls"
+
+### LoftedArcs 11/2/25
+
+- [ ] Description - "Draws elevated arcs on a globe or map to represent connections or flows between geographical locations."
+- [ ] "Draggable globe with EdgeFade" switch between svg/canvas seems to change lofts?
+
+### SketchyGlobe 11/2/25
+
+- [ ] Description - "Creates a hand-drawn, sketch-like representation of a 3D globe to visualize geographical data."
+- [ ] broken "basic link
+
+### SpikeMap 11/2/25
+
+- [ ] Description - "Visualizes data on a geographical map using spikes to represent values or magnitudes at specific locations."
+
+### StateMap 11/2/25
+
+- [ ] Description - "Displays data on a geographical map using state or regional boundaries to represent values or magnitudes at specific locations."
+- [ ] broke out StateMapControls.svelte
+
+### SubmarineCablesGlobe 11/2/25
+
+- [ ] Description - "Visualizes submarine communication cables on a 3D globe to represent global connectivity and data flow."
+- [ ] broken out controls - use EarthquakeEclipsesGlobeControls.svelte
+
+### Timezones 11/2/25
+
+- [ ] Description - "Displays global time zones on a 3D globe, illustrating the division of time across different regions of the Earth."
+- [ ] fix broken example link
+- [ ] broken out controls - use TimezonesControls.svelte
+- [ ] remove wrapping div and add height to Chart
+
+### Translucent Globe 11/2/25
+
+- [ ] Description - "Creates a semi-transparent 3D globe visualization to represent geographical data with a focus on underlying structures."
+- [ ] broken out controls - use EarthquakeEclipsesGlobeControls.svelte
+
+### Zoomable Map 11/2/25
+
+- [ ] Description - "Creates an interactive map that allows users to zoom in and out to explore geographical data at different scales."
+- [ ] remove wrapping div and add height to Chart
+- [ ] broke out controls - ZoomableMapControls.svelte
+
+### Zoomable Tile Map 11/2/25
+
+- [ ] Description - "Implements an interactive map with zoomable tiles to efficiently display geographical data at various levels of detail."
+- [ ] fix broken examples
+- [ ] broke out controls - ZoomableTileMapControls.svelte
+
+## Components
+
+### ArcChart 11/2/25
+
+- [ ] Description - "draws a curved segment on a chart to represent portions of a circle, such as in pie or radial charts."
+- [ ] "Gradient with text" missing export
+- [ ] Related components/Chart 404
+
+### AreaChart 11/2/25
+
+- [ ] "Gradient" apply gradient for visibility
+- [ ] Move "Stack series with separate data" under stack series, calling attention to 2 ways to provide data?
+- [ ] Sparkline needs more padding-top or overflow for tooltip
+- [ ] "Markers" add "Click to Add" Marker to bottom of moving tooltip (remove Blockquote)
+- [ ] "locking and clickable tooltip", nothing in console?
+- [ ] "Tooltip below chart and hide delay", more padding-bottom or overlfow needed
+
+### Area Simple Chart 11/2/25
+
+- [ ] Should this be here? redundant for AreaChart?
+
+### BarChart 11/2/25
+
+- [ ] "Horizontal" Y Axis Labels needs padding, clipped on Canvas
+- [ ] Sparkline tooltips clipped, needs overflow
+- [ ] "Single dimension" needs padding-top or overflow for tooltiips
+- [ ] Move all radials to bottom? preserve like examples
+- [ ] Point Annotations Larger Point
+- [ ] "Group series (labels)" more space b/w items of each group so labels don't abut
+- [ ] Stacked, stacked & grouped, etc not working
+- [ ] "Range annotation (value)" - no range seen
+- [ ] Custom Chart emptying shows
+- [ ] Related: components/Chart 404
+
+### LineChart 11/2/25
+
+- [ ] "Sparkline" tooltip clipped, allow overlflow like "Sparkline"
+- [ ] Move Radars x3, "Large radial series" to bottom? interrupts similar examples
+- [ ] "Axis label inside" add axis y rule to better demonstrate, also add y rule to example above for comparison
+- [ ] "Draw turning" off show collapses chart, move {#if show} inside chart
+- [ ] On this page missing?
+- [ ] Show control broken out ShowControl.svelte.
+- [ ] components/Chart 404
+
+### Piechart 11/2/25
+
+- [ ] "Legend placement" seems like a default, move it to somewhere unexpect like top/vertical
+- [ ] "Segments" move controls to top for consistency, broken out controls PieChartControls.svelte.
+- [ ] Broken out ShowControls.svelte for "Motion tween", "Motion spring"
+
+### ScatterChart 11/2/25
+
+- [ ] Description "plots individual data points on two axes to reveal relationships, patterns, or correlations between variables" vs CURRENT "Streamlined Chart configuration for Scatter charts"
+- [ ] Missing On This page?
+
+### Chart
+
+- [ ] Description - "Base Components of Layerchart providing chart dimensions and contexts such as TooltipContext, GeoContext, and TransformContext. See also simplified charts such as `AreaChart` and `BarChart` for streamline configuration" vs CURRENT "Sets up chart context, including dimension scales and additional contexts such as `TooltipContext`, `GeoContext`, and `TransformContext`. See also simplified charts such as `AreaChart` and `BarChart` for streamline configuration" if stays REMOVE BACKTICKS
+- [ ] Feature doesn't jive with any other pages, Remove?
+
+### Axis 11/2/25
+
+- [ ] description - "displays the scale and reference lines on a chart, providing context for interpreting data values."
+
+### Frame 11/2/25
+
+- [ ] consider changing "Border" Frame to different Color call attention vs Rule - [ ] stroke-danger/5?
+
+### Grid 11/2/25
+
+- [ ] Description minor tweak "draws horizontal and vertical lines respecting scales across a chart to enhance readability and help align data points with axis values" vs CURRENT "Draw x and/or y axis lines respecting scales"
+- [ ] "Dashed lines" too opaque, closely spaced dashes to see. Probaly add more travel b/w dashes
+- [ ] Radials to bottom, interrupts similar examples
+
+### Legend 11/2/25
+
+- [ ] Description - "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."
+- [ ] Click handler nothing in console. Change to alert? If leave as console, add some text "Check console after clicking"
+- [ ] No related, at least add examples/Spline#series-individual-tooltip-with-highlight (double check correct path here)
+
+### Rule 11/2/25
+
+- [ ] Description - "A visual guideline on a chart that helps align and measure data values along the axis.
+- [ ] Thicker lines for data driven examples x4?
+
+### Arc 11/2/25
+
+- [ ] Description - "draws a curved segment on a chart to represent portions of a whole or highlight specific data ranges"
+- [ ] "Label Direction" too compact, 3 per line?
+- [ ] Less data shown w/Canvas - suspect its inherit to canvas?
+- [ ] broken out playground controls ArcPlaygroundControls.svelte
+
+### Bar
+
+- [ ] description "creates individual rectangular bars on a chart to represent and compare discrete data values"
+- [ ] Related all 3 locking
+
+### Circle 11/2/25
+
+- [ ] Description "draws a circular shape on a chart to mark specific points or emphasize data visually." better than CURRENT " element with tweened properties using motionStore"
+- [ ] rightmost circle changes depending on svg/Canvas/HTML layer?
+- [ ] Related components/Pack 404
+
+### Connector 11/2/25
+
+- [ ] Description - "draws a line or curve between two points on a chart to illustrate relationships or connections in the data"
+- [ ] points dissapear when Canvas layer chosen
+- [ ] Related example/Tree 404
+
+### Ellipse 11/2/25
+
+- [ ] description "draws an oval shape on a chart to highlight areas, emphasize points, or decorate visual elements" better than CURRENT " element with tweened properties using motionStore"
+
+### Group 11/2/25
+
+- [ ] description "clusters multiple chart elements together, allowing them to be managed, styled, or transformed as a single unit" better than CURRRENT " element with convenient x/y and center placement along with tweened properties using motionStore"
+- [ ] Related: examples/Pack, exmaples/Partition, examples/Sunburst, examples/Tree, exmaples/Treemap 404
+
+### Line 11/2/25
+
+- [ ] desription "draws a straight line on a chart to represent trends, connections, or boundaries between points." better than CURRENT " element with tweened properties using motionStore"
+
+### Marker
+
+- [ ] Missing Show toggle for "spline", "spline-with-thicker-stroke", "styling", "orientation"
+- [ ] controls not breakout control, lots of variations. Can do later.
+
+### Polygon - 11/2/25
+
+- [ ] Description - "Renders a multi-sided shape on a chart to represent complex areas, boundaries, or regions of interest."
+- [ ] Controls broken out - PolygonPlaygroundControls.svelte and PolygonControls.svelte
+
+### Rect
+
+- [ ] Description "Draws a rectangle on a chart to highlight areas, ranges, or specific regions of interest"
+
+### Text 11/2/25
+
+- [ ] Missing description - "adds custom text directly onto a chart as a basic element for labeling, annotation, or commentary"
+- [ ] "Word wrap with explicit \n" - for HTML need to use `
` tags? if so, change label from "\n" to "Line Breaks"
+- [ ] Relate inpage link examples/Area#explicit-axis-ticks-min-max
+- [ ] Breakout TextControls.svelte, created
+
+### Area 11/2/25
+
+- [ ] Description "Shades the space under a line on a chart to emphasize the magnitude and trend of data over a range.
+- [ ] Why are there 19 files unnder components/Area ? when playground is only one on md?
+- [ ] Related in page links examples/Area#gradient
+
+### Bars (Marker) 11/2/25
+
+- [ ] Description - "horizontal bars on a chart to represent and compare discrete data values visually.
+- [ ] BarChart Link Broken
+- [ ] Related components/Bar locks
+- [ ] Related in page links examples/Bar#vertical, examples/Columns#basic, examples/Histogram#basic
+
+### Calendar 11/2/25
+
+- [ ] Description - "highlights specific dates or time periods on a chart to emphasize events, milestones, or temporal patterns"
+- [ ] Weird rendering in svg/canvas and html - maybe start over
+- [ ] Multiple years, less empty years?
+- [ ] Weird rendering if returning from inspect
+
+### Hull 11/2/25
+
+- [ ] Description - "encloses a set of data points within a convex boundary to highlight clusters or groupings on a chart"
+- [ ] Missing examples
+
+### Labels 11/2/25
+
+- [ ] Description - "displays text directly on a chart to identify or annotate specific data points"
+- [ ] Related examples/Bars - nothing/locks
+- [ ] Related in page links examples/Area#with-labels, examples/Bars#outside-labels-default, examples/Columns#outside-labels-default, examples/Line#with-labels, examples/Scatter#with-labels, examples/Threshold#with-labels
+
+### Link 11/2/25
+
+- [ ] Desciption - "highlights or connects specific data points on a chart to emphasize relationships or sequences"
+- [ ] Related examples/Tree 404
+
+### Pie 11/2/25
+
+- [ ] Description - "Represents data as proportional slices of a circle, showing the relative contribution of each category to the whole."
+- [ ] Same static data for "basic" and "disable sorting". Clarifies the difference between the two without this it's unclear.
+- [ ] "Partial range (Chart xRange)" example same size pie as others
+- [ ] Use > for info to trigger Blockquote (Inner radius x3), need spacing b/w these too
+- [ ] broke out "Tweened" Show control - ``
+- [ ] Labels "Centroid" and "Centroid Multiple" need more spacing b/w examples
+- [ ] Placement (Left, Center, Right) combined to Single "placement.svelte
+- [ ] "Placement" controls broken out - PieLeftCenterRightControls.svelte
+
+### Points 11/2/25
+
+- [ ] Description - "plots individual data points on a graph to show distribution, relationships, or clusters without connecting lines"
+- [ ] components/Zoom 404, conponents/DotPlot 404
+
+### Spline 11/2/25
+
+- [ ] Description "data points connected by smooth, curved lines to show trends or patterns over a continuous range." or CURRENT "`` using `d3-shape` line generator to support `curve` and `defined`. Works as data-driven via context or `data` prop, or pre-made `pathData`. Adding tweening via `d3-interpolate-path`" REMOVE BACKTICKS
+- [ ] remove show from all except "tweened", "end snippet with draw", "end slot with draw with value" examples
+- [ ] Change comment for - to >
+- [ ] Controls broken out - SplineControls.svelte - nonbound prop includeShow allows no show toggle for examples w/o tween/draw
+- [ ] Controls broken out - SplinePlaygroundControls.svelte
+
+### Threshold 11/2/25
+
+- [ ] Description "visualizes data relative to predefined limits, highlighting values that exceed or fall below set thresholds" CURRENT "Areas between two values (`y={["value", "baseline"]}`) depending on which is greater (ex. green/red)" REMOVE BACKTICKS
+- [ ] remove components/Threshold - referencing self
+- [ ] components/AreaChart - nothing shown
+
+### Annotation Line 11/2/25
+
+- [ ] Not loading anymore
+- [ ] Description - "Draws a straight marker across the chart to indicate a specific value, trend, or threshold"
+- [ ] Complete examples
+- [ ] Controls for Horizontal placement.vertical placement
+
+### Annotation Point 11/2/25
+
+- [ ] Not loading anymore
+- [ ] Description - "Marks a specific data value or coordinate on a chart to highlight key events or notable points."
+- [ ] Build out examples
+- [ ] AnnonationPointControls
+
+### AnnotationRange 11/2/25
+
+- [ ] Not loading anymore
+- [ ] Description - "Highlights a continuous span or interval on a chart to emphasize specific data ranges or thresholds"
+- [ ] Change range appearance to be w little more noticeable
+- [ ] Build out missing examples
+- [ ] Annotationrangecontrols
+
+### BrushContext 11/2/25
+
+- [ ] Description - "Providies an interactive brush context for charts, allowing selection, adjustment, and resetting of x/y domains with draggable handles and event callbacks."
+- [ ] Selection not selectin anything
+- [ ] Minimap rendering issue - data left squished
+- [ ] export data?
+- [ ] No Related?
+
+### Highlight 11/2/25
+
+- [ ] Description - "Renders configurable visual highlights (points, lines, bars, or areas) on chart data for emphasis and interaction"
+
+### Tooltip 11/2/25
+
+- [ ] Description - "Provides a Svelte context to manage and display tooltips within charts, enabling dynamic information display based on user interactions. Typically used indirectly via the tooltip prop on Chart." Current "Setup tooltip context, include mode to identify related data based on pointer position. Typically used indirectly via the `tooltip` prop Chart" REMOVE BACKTICKS
+- [ ] Chart Types/Area, Stacked Area, Single Date/Time, Duration, Multi (Overlapping) Durations, simple bars, Multiple overlapping Bars, Scatterplot use > for Blockquote
+- [ ] Spacing of b/w 4 Position examples
+
+### Tooltip Context 11/2/25
+
+- [ ] Ok
+- [ ] components/Chart 404
+
+### TransformContext 11/2/25
+
+- [ ] Description - "Provides a Svelte context to enable panning, zooming, and drag interactions for charts or SVG/canvas elements"
+- [ ] Playground - Tweened working? curve not changing anything, Playground div in div? full width
+- [ ] Playground Controls broken out - issues above before extraction
+- [ ] components/Chart, examples/Pack, examples/Tree, examples/LoftedArcsGlobe 404
+
+### Voronoi 11/2/25
+
+- [ ] Description - "Generates Voronoi diagrams to partition a plane based on proximity to a set of points, useful for spatial analysis and visualization."
+- [ ] padding-bottom to controls, already split out
+
+### GeoCircle 11/2/25
+
+- [ ] Description
+- [ ] export data?
+- [ ] Controls broken out (new since email)
+
+### GeoContext 11/2/25
+
+- [ ] update description - "provides geographic projection and scaling context to children for accurate rendering of geographic data."
+ current "Setup geo context, particularly the projection used by other geo components. Typically used indirectly via the `geo` prop on Chart" REMOVE BACKTICKS
+- [ ] components/Chart 404
+
+### GeoEdgeFade 11/2/25
+
+- [ ] Description - "Visualizes geographic connections or flows with edges that gradually fade, emphasizing direction and intensity across a map"
+- [ ] example/LoftedArcsGlobe 404
+
+### GeoPath 11/2/25
+
+- [ ] Description - "Renders geographic shapes such as countries, states, or regions by drawing their boundaries based on coordinate data"
+- [ ] examples/BubbleMap, examples/Choropleth. examples/SpikeMap nothing shown
+- [ ] examples/GeoPath, examples/LoftedArcsGlobe, ex 404
+
+### GeoPoint 11/2/25
+
+- [ ] Description - "Plots individual geographic locations as points on a map to visualize spatial distributions or events"
+
+### GeoSpline 11/2/25
+
+- [ ] Description - "Smooth, curved lines connecting geographic points to represent paths or flows on a map"
+- [ ] examples/LoftedArcGlove 404
+
+### GeoTile 11/2/25
+
+- [ ] Description - "visualizes geographic data by rendering map tiles in a grid, supporting efficient zooming and panning for large-scale maps"
+- [ ] examples/ZoomableTileMap - nothing shown
+
+### GeoVisible 11/2/25
+
+- [ ] Description - "determines and renders only the geographic features currently within the visible map viewport to optimize performance and clarity"
+
+### Graticule 11/2/25
+
+- [ ] Description - "Overlays latitude and longitude lines on a map to provide geographic reference and context"
+- [ ] examples/LoftedArcGlove 404
+
+### Tile Image 11/2/25
+
+- [ ] Description - "Geography chart renders map tiles as a background layer, enabling zoomable and pannable geographic visualizations."
+
+### Dagre 11/2/25
+
+- [ ] Description - "layout arranges directed graphs in layers, positioning nodes to minimize edge crossings and create a clear, hierarchical flow"
+
+### Force Simulation 11/2/25
+
+- [ ] Description - "Layout chart positions nodes using physics-based forces, simulating attraction, repulsion, and link constraints to create an intuitive, collision-free network visualization."
+- [ ] Examples/Beeswarm, examples/ForceGroup 404
+
+### Pack 11/2/25
+
+- [ ] Description - "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."
+- [ ] examples/Pack 404
+
+#### Partition 11/2/25
+
+- [ ] Description - "divides a hierarchical dataset into nested, space-filling rectangles or arcs to represent the structure and relative sizes of each node"
+- [ ] examples/Partition, examples/Sunburst 404
+
+### Sankey 11/2/25
+
+- [ ] Description - "chart layout 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"
+
+### Tree 11/2/25
+
+- [ ] NOT RENDERING
+- [ ] Description - "layout organizes hierarchical data into a branching structure with parent nodes connected to child nodes, visually representing relationships and levels of the hierarchy"
+
+### Treemap 11/2/25
+
+- [ ] NOT RENDERING
+- [ ] Description - "visualizes hierarchical data as nested rectangles, where each rectangle’s size represents a quantitative value and nesting reflects the hierarchy."
+- [ ] "Playground" broken controls
+- [ ] Build out missing examples
+- [ ] Basic to top
+
+### Linear Gradient
+
+- [ ] Tailwind colors overflows x, horizontal scroll? or smaller width for each
+- [ ] Description “Configurable linear gradient for usage as a reusable fill for chart elements.”
+
+### Pattern - 10/30/24
+
+- [ ] Description - "Configurable line or circle-based patterns for chart elements."
+
+### Radial Gradient 11/2/25
+
+- [ ] Description - "Configurable radial gradient for usage as a reusable fill for chart elements."
+
+### ChartClipPath 11/2/25
+
+- [ ] description - "rectangular SVG clip path to constrain chart elements while optionally allowing others (like tooltips) to overflow."
+- [ ] examples/Area, examples/Treemap 404
+
+### CircleClipPath 11/2/25
+
+- [ ] description - "defines an SVG clip path that conditionally applies circular clipping to its child elements based on the rendering context and provided properties."
+
+### ClipPath 11/2/25
+
+- [ ] Add description - "Applies mask or clip parts of SVG graphics — e.g., to hide content outside a chart’s bounds or apply shape-based visibility limits.
+- [ ] To 1st of aside Clipping category?
+ It works inside the LayerChart rendering context (getLayerContext())"
+
+### RectClipPath 11/2/25
+
+- [ ] desciption update - "defines an SVG clip path that conditionally applies clipping to its child elements based on the rendering context and provided properties.
+
+### Blur 11/2/25
+
+- [ ] Description - "Applies a Gaussian blur effect to chart elements, softening their appearance for visual emphasis or stylistic purposes."
+- [ ] Remove TODO for example?
+- [ ] Related broken examples/Parition, examples/Treemap
+
+### Bounds 11/2/25
+
+- [ ] Description - “Provides reactive, animated coordinate scaling for chart layouts, passing live x/y scales to its children within a shared chart context.”
+
+### ColorRamp 11/2/25
+
+- [ ] Description - "Generates a color ramp (gradient) based on specified colors and stops, useful for mapping data values to colors in visualizations."
+
+### MotionPath 11/2/25
+
+- [ ] Description - "Animates an object along a specified path using configurable motion parameters such as speed, duration, and easing."
+- [ ] convert "Repeat indefinitely" to same square of "Rotation object with path" to call attention to difference in rotate object along path vs moving along path
+- [ ] "Repeat indefinitely" same speed as "Rotation object with path"?
+- [ ] Breakout controls
diff --git a/docs/.gitignore b/docs/.gitignore
new file mode 100644
index 000000000..45e973bb2
--- /dev/null
+++ b/docs/.gitignore
@@ -0,0 +1,35 @@
+test-results
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Content Collections
+.content-collections
+
+# Generated API documentation
+src/generated/api.json
+src/generated/api/*.json
+!src/generated/api/README.md
+
+# Generated StackBlitz files
+static/stackblitz-files.json
\ No newline at end of file
diff --git a/docs/.npmrc b/docs/.npmrc
new file mode 100644
index 000000000..b6f27f135
--- /dev/null
+++ b/docs/.npmrc
@@ -0,0 +1 @@
+engine-strict=true
diff --git a/docs/.prettierignore b/docs/.prettierignore
new file mode 100644
index 000000000..d9ce81cad
--- /dev/null
+++ b/docs/.prettierignore
@@ -0,0 +1,12 @@
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
+
+# Generated catalog files
+src/examples/catalog/*.json
diff --git a/docs/.prettierrc b/docs/.prettierrc
new file mode 100644
index 000000000..3f7802c37
--- /dev/null
+++ b/docs/.prettierrc
@@ -0,0 +1,15 @@
+{
+ "useTabs": true,
+ "singleQuote": true,
+ "trailingComma": "none",
+ "printWidth": 100,
+ "plugins": ["prettier-plugin-svelte"],
+ "overrides": [
+ {
+ "files": "*.svelte",
+ "options": {
+ "parser": "svelte"
+ }
+ }
+ ]
+}
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..75842c404
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,38 @@
+# sv
+
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```sh
+# create a new project in the current directory
+npx sv create
+
+# create a new project in my-app
+npx sv create my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```sh
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```sh
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
diff --git a/docs/content-collections.ts b/docs/content-collections.ts
new file mode 100644
index 000000000..93a957315
--- /dev/null
+++ b/docs/content-collections.ts
@@ -0,0 +1,185 @@
+import { defineCollection, defineConfig } from '@content-collections/core';
+import { compileMarkdown } from '@content-collections/markdown';
+import { toPascalCase } from '@layerstack/utils';
+import { z } from 'zod';
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const components = defineCollection({
+ name: 'components',
+ directory: 'src/content/components',
+ include: '**/*.md',
+ schema: z.object({
+ name: z.string().optional(),
+ description: z.string().optional(),
+ category: z.string().optional(),
+ layers: z.array(z.string()).default([]),
+ related: z.array(z.string()).default([]),
+ resize: z.boolean().optional(),
+ tableOfContents: z.boolean().default(true),
+ order: z.number().optional(),
+ content: z.string()
+ }),
+ transform: async (doc) => {
+ const { filePath, fileName, directory, path } = doc._meta;
+
+ const name = doc.name ?? toPascalCase(fileName.replace('.md', ''));
+
+ // Read the source file from the layerchart package
+ const sourcePath = join(
+ process.cwd(),
+ `../packages/layerchart/src/lib/components/${doc.category === 'charts' && name != 'Chart' ? 'charts/' : ''}${path}.svelte`
+ );
+
+ let source = '';
+ let sourceUrl = '';
+ try {
+ source = readFileSync(sourcePath, 'utf-8');
+ sourceUrl = `https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/components/${path}.svelte`;
+ } catch (error) {
+ // console.warn(
+ // `Could not read source file for ${filePath}: ${error instanceof Error ? error.message : String(error)}`
+ // );
+ }
+
+ // Extract the first Example component's name from the markdown content
+ // Support both and :example{name="..."} syntax
+ const usageExample =
+ doc.content.match(/]*name=["']([^"']+)["'][^>]*>/)?.[1] ||
+ doc.content.match(/:example\{[^}]*name=["']([^"']+)["'][^}]*\}/)?.[1];
+
+ return {
+ ...doc,
+ name,
+ slug: path,
+ source,
+ sourceUrl,
+ usageExample
+ // html: await compileMarkdown(context, doc)
+ };
+ }
+});
+
+const examples = defineCollection({
+ name: 'examples',
+ directory: 'src/content/examples',
+ include: '**/*.md',
+ schema: z.object({
+ name: z.string().optional(),
+ description: z.string().optional(),
+ category: z.string().optional(),
+ layers: z.array(z.string()).default([]),
+ related: z.array(z.string()).default([]),
+ resize: z.boolean().default(true),
+ tableOfContents: z.boolean().default(true),
+ order: z.number().optional(),
+ content: z.string()
+ }),
+ transform: async (doc) => {
+ const { filePath, fileName, directory, path } = doc._meta;
+
+ // Read the source file from the layerchart package
+ // const sourcePath = join(
+ // process.cwd(),
+ // `../packages/layerchart/src/lib/components/${doc.section === 'charts' ? 'charts/' : ''}${path}.svelte`
+ // );
+
+ // let source = '';
+ // let sourceUrl = '';
+ // try {
+ // source = readFileSync(sourcePath, 'utf-8');
+ // sourceUrl = `https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/components/${path}.svelte`;
+ // } catch (error) {
+ // // console.warn(
+ // // `Could not read source file for ${filePath}: ${error instanceof Error ? error.message : String(error)}`
+ // // );
+ // }
+
+ return {
+ ...doc,
+ name: doc.name ?? toPascalCase(fileName.replace('.md', '')),
+ slug: path
+ // source,
+ // sourceUrl
+ // html: await compileMarkdown(context, doc)
+ };
+ }
+});
+
+const utils = defineCollection({
+ name: 'utils',
+ directory: 'src/content/utils',
+ include: '**/*.md',
+ schema: z.object({
+ name: z.string().optional(),
+ description: z.string().optional(),
+ category: z.string().optional(),
+ layers: z.array(z.string()).default([]),
+ related: z.array(z.string()).default([]),
+ resize: z.boolean().optional(),
+ tableOfContents: z.boolean().default(true),
+ order: z.number().optional(),
+ content: z.string()
+ }),
+ transform: async (doc) => {
+ const { filePath, fileName, directory, path } = doc._meta;
+
+ // Read the source file from the layerchart package
+ const sourcePath = join(process.cwd(), `../packages/layerchart/src/lib/utils/${path}.ts`);
+
+ let source = '';
+ let sourceUrl = '';
+ try {
+ source = readFileSync(sourcePath, 'utf-8');
+ sourceUrl = `https://github.com/techniq/layerchart/blob/next/packages/layerchart/src/lib/utils/${path}.ts`;
+ } catch (error) {
+ // console.warn(
+ // `Could not read source file for ${filePath}: ${error instanceof Error ? error.message : String(error)}`
+ // );
+ }
+
+ // Extract the first Example component's name from the markdown content
+ // Support both and :example{name="..."} syntax
+ const usageExample =
+ doc.content.match(/]*name=["']([^"']+)["'][^>]*>/)?.[1] ||
+ doc.content.match(/:example\{[^}]*name=["']([^"']+)["'][^}]*\}/)?.[1];
+
+ return {
+ ...doc,
+ name: doc.name ?? fileName.replace('.md', ''),
+ slug: fileName.replace('.md', '').toLowerCase(), // Use lowercase for utils slugs
+ source,
+ sourceUrl,
+ usageExample
+ };
+ }
+});
+
+const releases = defineCollection({
+ name: 'releases',
+ directory: 'src/content/releases',
+ include: '**/*.md',
+ schema: z.object({
+ title: z.string(),
+ tag: z.string(),
+ date: z.coerce.date(),
+ url: z.string(),
+ draft: z.boolean().default(false),
+ prerelease: z.boolean().default(false),
+ author: z.string(),
+ content: z.string()
+ }),
+ transform: async (doc, context) => {
+ const { fileName } = doc._meta;
+
+ return {
+ ...doc,
+ slug: fileName.replace('.md', ''),
+ html: await compileMarkdown(context, doc)
+ };
+ }
+});
+
+export default defineConfig({
+ collections: [components, examples, utils, releases]
+});
diff --git a/docs/e2e/demo.test.ts b/docs/e2e/demo.test.ts
new file mode 100644
index 000000000..9985ce113
--- /dev/null
+++ b/docs/e2e/demo.test.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+ await page.goto('/');
+ await expect(page.locator('h1')).toBeVisible();
+});
diff --git a/docs/eslint.config.js b/docs/eslint.config.js
new file mode 100644
index 000000000..1baf87baf
--- /dev/null
+++ b/docs/eslint.config.js
@@ -0,0 +1,45 @@
+import prettier from 'eslint-config-prettier';
+import { fileURLToPath } from 'node:url';
+import { includeIgnoreFile } from '@eslint/compat';
+import js from '@eslint/js';
+import svelte from 'eslint-plugin-svelte';
+import { defineConfig } from 'eslint/config';
+import globals from 'globals';
+import ts from 'typescript-eslint';
+import svelteConfig from './svelte.config.js';
+
+const gitignorePath = fileURLToPath(new URL('./.gitignore', import.meta.url));
+
+export default defineConfig(
+ includeIgnoreFile(gitignorePath),
+ js.configs.recommended,
+ ...ts.configs.recommended,
+ ...svelte.configs.recommended,
+ prettier,
+ ...svelte.configs.prettier,
+ {
+ languageOptions: {
+ globals: { ...globals.browser, ...globals.node }
+ },
+ rules: {
+ // typescript-eslint strongly recommend that you do not use the no-undef lint rule on TypeScript projects.
+ // see: https://typescript-eslint.io/troubleshooting/faqs/eslint/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors
+ 'no-undef': 'off',
+ '@typescript-eslint/no-unused-vars': 'off',
+ '@typescript-eslint/no-explicit-any': 'off',
+ 'svelte/require-each-key': 'off',
+ 'svelte/no-navigation-without-resolve': 'off'
+ }
+ },
+ {
+ files: ['**/*.svelte', '**/*.svelte.ts', '**/*.svelte.js'],
+ languageOptions: {
+ parserOptions: {
+ projectService: true,
+ extraFileExtensions: ['.svelte'],
+ parser: ts.parser,
+ svelteConfig
+ }
+ }
+ }
+);
diff --git a/docs/mdsx.config.js b/docs/mdsx.config.js
new file mode 100644
index 000000000..dd76b8cea
--- /dev/null
+++ b/docs/mdsx.config.js
@@ -0,0 +1,34 @@
+import { defineConfig } from 'mdsx';
+
+import rehypeSlug from 'rehype-slug';
+import remarkGfm from 'remark-gfm';
+import remarkMDC from 'remark-mdc';
+import rehypePrettyCode from 'rehype-pretty-code';
+
+import {
+ prettyCodeOptions,
+ rehypeCodeBlocks,
+ remarkLiveCode,
+ remarkComponents
+} from './src/lib/markdown/config/index.js';
+
+export const mdsxConfig = defineConfig({
+ extensions: ['.md'],
+ remarkPlugins: [
+ remarkGfm,
+ remarkMDC, // Parse MDC syntax (::component, :::component)
+ remarkComponents, // Transform MDC components to Svelte components
+ remarkLiveCode
+ ],
+ rehypePlugins: [
+ rehypeSlug,
+ // rehypeComponentExample,
+ [rehypePrettyCode, prettyCodeOptions],
+ rehypeCodeBlocks
+ ],
+ blueprints: {
+ default: {
+ path: 'src/lib/markdown/blueprints/default/blueprint.svelte'
+ }
+ }
+});
diff --git a/docs/package.json b/docs/package.json
new file mode 100644
index 000000000..28c1d3f52
--- /dev/null
+++ b/docs/package.json
@@ -0,0 +1,133 @@
+{
+ "name": "docs",
+ "private": true,
+ "version": "0.0.1",
+ "type": "module",
+ "scripts": {
+ "dev": "vite dev --port 3002",
+ "build": "vite build",
+ "prebuild": "pnpm generate:api && pnpm generate:stackblitz",
+ "preview": "vite preview",
+ "prepare": "svelte-kit sync || echo ''",
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+ "format": "prettier --write .",
+ "lint": "prettier --check . && eslint .",
+ "test:unit": "vitest",
+ "test": "pnpm test:unit -- --run && pnpm test:e2e",
+ "test:e2e": "playwright test",
+ "generate:api": "tsx scripts/generate-component-api.ts",
+ "generate:screenshots": "tsx scripts/generate-screenshots.ts",
+ "generate:catalog": "tsx scripts/generate-example-catalog.ts",
+ "generate:stackblitz": "tsx scripts/build-stackblitz-files.ts",
+ "generate:releases": "tsx scripts/generate-releases.ts",
+ "generate:all": "pnpm generate:api && pnpm generate:screenshots && pnpm generate:catalog && pnpm generate:stackblitz"
+ },
+ "devDependencies": {
+ "@content-collections/core": "^0.13.1",
+ "@content-collections/markdown": "^0.1.4",
+ "@content-collections/vite": "^0.2.8",
+ "@eslint/compat": "^1.4.1",
+ "@eslint/js": "^9.39.2",
+ "@fontsource-variable/inter": "^5.2.8",
+ "@iconify-json/logos": "^1.2.10",
+ "@iconify-json/lucide": "^1.2.83",
+ "@iconify-json/simple-icons": "^1.2.65",
+ "@iconify-json/vscode-icons": "^1.2.37",
+ "@layerstack/svelte-actions": "1.0.1-next.18",
+ "@layerstack/svelte-state": "0.1.0-next.23",
+ "@layerstack/svelte-table": "1.0.1-next.18",
+ "@layerstack/tailwind": "2.0.0-next.21",
+ "@layerstack/utils": "2.0.0-next.18",
+ "@playwright/test": "^1.57.0",
+ "@shikijs/transformers": "^3.21.0",
+ "@sveltejs/adapter-cloudflare": "^7.2.4",
+ "@sveltejs/kit": "^2.49.3",
+ "@sveltejs/svelte-json-tree": "^2.2.1",
+ "@sveltejs/vite-plugin-svelte": "^6.2.3",
+ "@tailwindcss/vite": "^4.1.18",
+ "@types/d3-array": "^3.2.2",
+ "@types/d3-color": "^3.1.3",
+ "@types/d3-dsv": "^3.0.7",
+ "@types/d3-force": "^3.0.10",
+ "@types/d3-geo": "^3.1.0",
+ "@types/d3-hierarchy": "^3.1.7",
+ "@types/d3-interpolate": "^3.0.4",
+ "@types/d3-random": "^3.0.3",
+ "@types/d3-sankey": "^0.12.5",
+ "@types/d3-scale": "^4.0.9",
+ "@types/d3-scale-chromatic": "^3.1.0",
+ "@types/d3-shape": "^3.1.7",
+ "@types/d3-time": "^3.0.4",
+ "@types/hast": "^3.0.4",
+ "@types/node": "^25.0.3",
+ "@types/shapefile": "^0.6.4",
+ "@types/sharp": "^0.32.0",
+ "@types/topojson-client": "^3.1.5",
+ "@types/topojson-simplify": "^3.0.3",
+ "@types/topojson-specification": "^1.0.5",
+ "@types/unist": "^3.0.3",
+ "@vitest/browser": "^4.0.16",
+ "@vitest/browser-playwright": "^4.0.16",
+ "d3-array": "^3.2.4",
+ "d3-color": "^3.1.0",
+ "d3-dsv": "^3.0.1",
+ "d3-force": "^3.0.0",
+ "d3-geo": "^3.1.1",
+ "d3-hierarchy": "^3.1.2",
+ "d3-interpolate": "^3.0.1",
+ "d3-random": "^3.0.1",
+ "d3-sankey": "^0.12.3",
+ "d3-scale": "^4.0.2",
+ "d3-scale-chromatic": "^3.1.0",
+ "d3-shape": "^3.2.0",
+ "d3-time": "^3.1.0",
+ "eslint": "^9.39.2",
+ "eslint-config-prettier": "^10.1.8",
+ "eslint-plugin-svelte": "^3.14.0",
+ "globals": "^16.5.0",
+ "layerchart": "workspace:*",
+ "mdsx": "^0.0.7",
+ "paneforge": "^1.0.2",
+ "playwright": "^1.57.0",
+ "posthog-js": "^1.315.1",
+ "prettier": "^3.7.4",
+ "prettier-plugin-svelte": "^3.4.1",
+ "rehype-pretty-code": "^0.14.1",
+ "rehype-slug": "^6.0.0",
+ "remark-gfm": "^4.0.1",
+ "remark-mdc": "^3.10.0",
+ "runed": "^0.37.1",
+ "sharp": "^0.34.5",
+ "shiki": "^3.21.0",
+ "solar-calculator": "^0.3.0",
+ "svelte": "5.46.1",
+ "svelte-check": "^4.3.5",
+ "svelte-ux": "2.0.0-next.20",
+ "tailwindcss": "^4.1.18",
+ "topojson-client": "^3.1.0",
+ "topojson-simplify": "^3.0.3",
+ "tsx": "^4.21.0",
+ "typescript": "^5.9.3",
+ "typescript-eslint": "^8.52.0",
+ "unist-builder": "^4.0.0",
+ "unist-util-visit": "^5.0.0",
+ "unplugin-icons": "^22.5.0",
+ "vite": "^7.3.1",
+ "vite-plugin-devtools-json": "^1.0.0",
+ "vitest": "^4.0.16",
+ "vitest-browser-svelte": "^2.0.1",
+ "zod": "^4.3.5"
+ },
+ "dependencies": {
+ "@codemirror/lang-css": "^6.3.1",
+ "@codemirror/lang-html": "^6.4.11",
+ "@codemirror/lang-javascript": "^6.2.4",
+ "@codemirror/state": "^6.5.3",
+ "@stackblitz/sdk": "^1.11.0",
+ "@uiw/codemirror-theme-github": "^4.25.4",
+ "@webcontainer/api": "^1.6.1",
+ "ansi_up": "^6.0.6",
+ "codemirror": "^6.0.2"
+ }
+}
diff --git a/docs/playwright.config.ts b/docs/playwright.config.ts
new file mode 100644
index 000000000..f6c81af8a
--- /dev/null
+++ b/docs/playwright.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+ webServer: {
+ command: 'npm run build && npm run preview',
+ port: 4173
+ },
+ testDir: 'e2e'
+});
diff --git a/docs/scripts/README.md b/docs/scripts/README.md
new file mode 100644
index 000000000..5cb0615d2
--- /dev/null
+++ b/docs/scripts/README.md
@@ -0,0 +1,167 @@
+# Component API Extraction Script
+
+This directory contains a script to automatically extract TypeScript type definitions and JSDoc comments from LayerChart Svelte components.
+
+## Overview
+
+The `generate-component-api.ts` script scans all Svelte components in `packages/layerchart/src/lib/components` and extracts their prop types (specifically `*PropsWithoutHTML` types) along with JSDoc documentation.
+
+## Usage
+
+Run the script from the docs directory:
+
+```bash
+pnpm extract:api
+```
+
+This will generate:
+
+- Individual component API files in `docs/src/generated/api/` (e.g., `api/Rect.json`, `api/Circle.json`)
+- An index file `src/generated/api/index.json` listing all available components
+- A combined `api.json` file at `src/generated/api.json`
+
+## Output Format
+
+### Index File (`docs/src/generated/api/index.json`)
+
+A quick reference listing all available components:
+
+```json
+{
+ "generatedAt": "2025-11-02T00:33:10.394Z",
+ "components": [
+ {
+ "component": "Rect",
+ "propsType": "RectPropsWithoutHTML",
+ "propertyCount": 16,
+ "file": "Rect.json"
+ }
+ ]
+}
+```
+
+### Individual Component Files (`docs/src/generated/api/{Component}.json`)
+
+Each component gets its own JSON file:
+
+```json
+{
+ "generatedAt": "2025-11-02T00:33:10.394Z",
+ "component": "Rect",
+ "propsType": "RectPropsWithoutHTML",
+ "properties": [
+ {
+ "name": "x",
+ "type": "number",
+ "required": false,
+ "description": "The x-coordinate of the rectangle",
+ "default": "0",
+ "tags": {
+ "bindable": ""
+ }
+ }
+ ]
+}
+```
+
+### Combined File (`docs/src/generated/api.json`)
+
+The generated `api.json` file has the following structure:
+
+```json
+{
+ "generatedAt": "2025-11-02T00:33:10.394Z",
+ "components": [
+ {
+ "component": "Rect",
+ "propsType": "RectPropsWithoutHTML",
+ "properties": [
+ {
+ "name": "x",
+ "type": "number",
+ "required": false,
+ "description": "The x-coordinate of the rectangle",
+ "default": "0",
+ "tags": {
+ "bindable": ""
+ }
+ }
+ ]
+ }
+ ]
+}
+```
+
+### Property Fields
+
+- **name**: The property name
+- **type**: TypeScript type as a string
+- **required**: Whether the property is required (inverse of optional)
+- **description**: JSDoc description (if available)
+- **default**: Default value from `@default` tag (if specified)
+- **tags**: Other JSDoc tags like `@bindable`, `@required`, etc.
+- **properties**: Nested properties for object types
+
+## How It Works
+
+1. **File Discovery**: Scans for all `.svelte` files in the components directory
+2. **Type Extraction**: For each component, looks for a `*PropsWithoutHTML` type definition
+3. **Script Parsing**: Extracts the `
+
+
+ %sveltekit.body%
+
+