diff --git a/docs/package.json b/docs/package.json
index a23bfb7e39..b22350faa1 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -33,7 +33,7 @@
 		"@iconify-json/lucide": "^1.2.111",
 		"@iconify-json/simple-icons": "^1.2.85",
 		"@iconify-json/vscode-icons": "^1.2.53",
-		"@layerstack/docs": "1.0.0-next.4",
+		"@layerstack/docs": "1.0.0-next.6",
 		"@layerstack/svelte-actions": "1.0.1-next.20",
 		"@layerstack/svelte-state": "0.1.0-next.25",
 		"@layerstack/svelte-table": "1.0.1-next.20",
@@ -109,18 +109,22 @@
 		"zod": "^4.4.3"
 	},
 	"dependencies": {
+		"@codemirror/autocomplete": "^6.20.1",
+		"@codemirror/commands": "^6.10.0",
 		"@codemirror/lang-css": "^6.3.1",
 		"@codemirror/lang-html": "^6.4.11",
 		"@codemirror/lang-javascript": "^6.2.5",
+		"@codemirror/language": "^6.12.2",
+		"@codemirror/lint": "^6.9.5",
 		"@codemirror/state": "^6.6.0",
+		"@codemirror/view": "^6.40.0",
 		"@fontsource/inter": "^5.2.8",
+		"@lezer/highlight": "^1.2.3",
+		"@replit/codemirror-lang-svelte": "^6.0.0",
 		"@resvg/resvg-js": "^2.6.2",
 		"@stackblitz/sdk": "^1.11.0",
-		"@uiw/codemirror-theme-github": "^4.25.10",
-		"@webcontainer/api": "^1.6.4",
-		"ansi_up": "^6.0.6",
-		"codemirror": "^6.0.2",
 		"d3-geo-projection": "^4.0.0",
+		"es-module-lexer": "^2.1.0",
 		"satori": "^0.26.0",
 		"satori-html": "^0.3.2"
 	}
diff --git a/docs/src/examples/catalog/AnnotationLine.json b/docs/src/examples/catalog/AnnotationLine.json
index 695204be73..8fb9aaab49 100644
--- a/docs/src/examples/catalog/AnnotationLine.json
+++ b/docs/src/examples/catalog/AnnotationLine.json
@@ -16,7 +16,57 @@
           "lineNumber": 18,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
+    },
+    {
+      "name": "custom-label",
+      "title": "custom label",
+      "path": "/docs/components/AnnotationLine/custom-label",
+      "components": [
+        {
+          "component": "LineChart",
+          "lineNumber": 12,
+          "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 14,
+          "line": "<Layer type=\"html\" class=\"pointer-events-none\">"
+        },
+        {
+          "component": "AnnotationLine",
+          "lineNumber": 15,
+          "line": "<AnnotationLine"
+        }
+      ],
+      "createdAt": "2026-10-13T12:30:26.000Z",
+      "updatedAt": "2026-10-13T12:30:26.000Z"
+    },
+    {
+      "name": "custom-line",
+      "title": "custom line",
+      "path": "/docs/components/AnnotationLine/custom-line",
+      "components": [
+        {
+          "component": "LineChart",
+          "lineNumber": 12,
+          "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+        },
+        {
+          "component": "AnnotationLine",
+          "lineNumber": 14,
+          "line": "<AnnotationLine y={400} label=\"Target\" props={{ label: { fill: 'var(--color-danger)' } }}>"
+        },
+        {
+          "component": "Line",
+          "lineNumber": 17,
+          "line": "<Line {...props} stroke=\"var(--color-surface-100)\" strokeWidth={6} />"
+        }
+      ],
+      "createdAt": "2026-10-13T12:30:26.000Z",
+      "updatedAt": "2026-10-13T12:30:26.000Z"
     },
     {
       "name": "horizontal",
@@ -33,7 +83,9 @@
           "lineNumber": 14,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "horizontal-placement",
@@ -50,7 +102,9 @@
           "lineNumber": 21,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal-with-range",
@@ -72,7 +126,9 @@
           "lineNumber": 25,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -94,7 +150,9 @@
           "lineNumber": 107,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-04-21T13:52:18.000Z",
+      "updatedAt": "2026-04-21T13:52:18.000Z"
     },
     {
       "name": "sloped",
@@ -111,7 +169,9 @@
           "lineNumber": 21,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-04-21T12:53:10.000Z",
+      "updatedAt": "2026-04-30T15:33:59.000Z"
     },
     {
       "name": "vertical",
@@ -128,7 +188,9 @@
           "lineNumber": 14,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-placement",
@@ -145,7 +207,9 @@
           "lineNumber": 21,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-with-rotation",
@@ -162,7 +226,9 @@
           "lineNumber": 14,
           "line": "<AnnotationLine"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
@@ -173,6 +239,20 @@
       "lineNumber": 18,
       "line": "<AnnotationLine"
     },
+    {
+      "example": "custom-label",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-label",
+      "lineNumber": 15,
+      "line": "<AnnotationLine"
+    },
+    {
+      "example": "custom-line",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-line",
+      "lineNumber": 14,
+      "line": "<AnnotationLine y={400} label=\"Target\" props={{ label: { fill: 'var(--color-danger)' } }}>"
+    },
     {
       "example": "horizontal",
       "component": "AnnotationLine",
@@ -349,5 +429,5 @@
       "line": "<AnnotationLine"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:21.362Z"
+  "updatedAt": "2026-10-16T16:15:12.598Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AnnotationPoint.json b/docs/src/examples/catalog/AnnotationPoint.json
index 6d4b92fe07..233ea7551a 100644
--- a/docs/src/examples/catalog/AnnotationPoint.json
+++ b/docs/src/examples/catalog/AnnotationPoint.json
@@ -21,7 +21,9 @@
           "lineNumber": 19,
           "line": "<AnnotationPoint"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "band-scale-on-value",
@@ -43,7 +45,33 @@
           "lineNumber": 19,
           "line": "<AnnotationPoint"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
+    },
+    {
+      "name": "custom-marker",
+      "title": "custom marker",
+      "path": "/docs/components/AnnotationPoint/custom-marker",
+      "components": [
+        {
+          "component": "LineChart",
+          "lineNumber": 20,
+          "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+        },
+        {
+          "component": "AnnotationPoint",
+          "lineNumber": 23,
+          "line": "<AnnotationPoint"
+        },
+        {
+          "component": "Circle",
+          "lineNumber": 37,
+          "line": "<Circle {...props} r={r + 4} class=\"fill-primary/20 stroke-primary\" />"
+        }
+      ],
+      "createdAt": "2026-10-13T12:30:26.000Z",
+      "updatedAt": "2026-10-13T12:30:26.000Z"
     },
     {
       "name": "line-to-point",
@@ -75,7 +103,9 @@
           "lineNumber": 82,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "link-callouts",
@@ -92,7 +122,9 @@
           "lineNumber": 59,
           "line": "<AnnotationPoint {...annotation} />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-20T20:21:36.000Z",
+      "updatedAt": "2026-08-04T17:36:56.000Z"
     },
     {
       "name": "on-axis-with-tooltip",
@@ -119,7 +151,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "on-series-with-line-and-tooltip",
@@ -151,7 +185,9 @@
           "lineNumber": 56,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "on-series-with-tooltip",
@@ -178,7 +214,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -200,7 +238,9 @@
           "lineNumber": 246,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-04-20T20:21:36.000Z",
+      "updatedAt": "2026-08-04T17:36:56.000Z"
     },
     {
       "name": "series-annotation",
@@ -217,7 +257,9 @@
           "lineNumber": 21,
           "line": "<AnnotationPoint"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-cities",
@@ -244,7 +286,9 @@
           "lineNumber": 103,
           "line": "<AnnotationPoint {...annotation} x={annotation.lon} y={annotation.lat} r={4} link />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-21T11:18:12.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "world-landmarks",
@@ -271,7 +315,9 @@
           "lineNumber": 116,
           "line": "<AnnotationPoint {...annotation} x={annotation.lon} y={annotation.lat} r={4} link />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-21T11:18:12.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
@@ -289,6 +335,13 @@
       "lineNumber": 19,
       "line": "<AnnotationPoint"
     },
+    {
+      "example": "custom-marker",
+      "component": "AnnotationPoint",
+      "path": "/docs/components/AnnotationPoint/custom-marker",
+      "lineNumber": 23,
+      "line": "<AnnotationPoint"
+    },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
@@ -360,5 +413,5 @@
       "line": "<AnnotationPoint"
     }
   ],
-  "updatedAt": "2026-08-06T13:53:29.292Z"
+  "updatedAt": "2026-10-16T16:15:12.621Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AnnotationRange.json b/docs/src/examples/catalog/AnnotationRange.json
index 20130da5ea..23e2fffe97 100644
--- a/docs/src/examples/catalog/AnnotationRange.json
+++ b/docs/src/examples/catalog/AnnotationRange.json
@@ -16,7 +16,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "bar-chart-(single)",
@@ -33,7 +35,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "bar-chart-(value)",
@@ -50,7 +54,33 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
+    },
+    {
+      "name": "custom-label",
+      "title": "custom label",
+      "path": "/docs/components/AnnotationRange/custom-label",
+      "components": [
+        {
+          "component": "LineChart",
+          "lineNumber": 12,
+          "line": "<LineChart"
+        },
+        {
+          "component": "Layer",
+          "lineNumber": 20,
+          "line": "<Layer type=\"html\" class=\"pointer-events-none\">"
+        },
+        {
+          "component": "AnnotationRange",
+          "lineNumber": 21,
+          "line": "<AnnotationRange"
+        }
+      ],
+      "createdAt": "2026-10-13T12:30:26.000Z",
+      "updatedAt": "2026-10-13T12:30:26.000Z"
     },
     {
       "name": "hide-tooltip",
@@ -67,7 +97,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal-with-fill-multiple",
@@ -84,7 +116,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange y={[0, 400]} class=\"fill-success/10\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal-with-pattern-lower-bound",
@@ -101,7 +135,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal-with-pattern-range",
@@ -118,7 +154,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal-with-pattern-upper-bound",
@@ -135,7 +173,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "label-placement",
@@ -152,7 +192,9 @@
           "lineNumber": 38,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-with-gradient-range",
@@ -169,7 +211,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-with-pattern-lower-bound",
@@ -186,7 +230,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-with-pattern-range",
@@ -203,7 +249,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical-with-pattern-upper-bound",
@@ -220,7 +268,9 @@
           "lineNumber": 20,
           "line": "<AnnotationRange"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
@@ -252,6 +302,13 @@
       "lineNumber": 20,
       "line": "<AnnotationRange"
     },
+    {
+      "example": "custom-label",
+      "component": "AnnotationRange",
+      "path": "/docs/components/AnnotationRange/custom-label",
+      "lineNumber": 21,
+      "line": "<AnnotationRange"
+    },
     {
       "example": "hide-tooltip",
       "component": "AnnotationRange",
@@ -337,5 +394,5 @@
       "line": "<AnnotationRange"
     }
   ],
-  "updatedAt": "2026-04-30T15:36:21.604Z"
+  "updatedAt": "2026-10-16T16:15:12.643Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Arc.json b/docs/src/examples/catalog/Arc.json
index 7a7aa33893..be0f6ae5da 100644
--- a/docs/src/examples/catalog/Arc.json
+++ b/docs/src/examples/catalog/Arc.json
@@ -36,7 +36,9 @@
           "lineNumber": 63,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T04:29:26.000Z",
+      "updatedAt": "2026-04-01T04:29:26.000Z"
     },
     {
       "name": "color-wheel",
@@ -63,7 +65,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "concentric",
@@ -85,7 +89,9 @@
           "lineNumber": 17,
           "line": "<Arc"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "draggable-arc",
@@ -112,7 +118,9 @@
           "lineNumber": 66,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "gauge",
@@ -159,7 +167,9 @@
           "lineNumber": 89,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T04:29:26.000Z",
+      "updatedAt": "2026-04-01T04:29:26.000Z"
     },
     {
       "name": "gauge-gradient",
@@ -201,7 +211,9 @@
           "lineNumber": 135,
           "line": "<Circle r={6} class=\"fill-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T05:14:50.000Z",
+      "updatedAt": "2026-04-01T13:14:47.000Z"
     },
     {
       "name": "label-direction",
@@ -233,7 +245,9 @@
           "lineNumber": 67,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "partial-arc",
@@ -270,7 +284,9 @@
           "lineNumber": 28,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "playground",
@@ -302,7 +318,9 @@
           "lineNumber": 43,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "segmented-arc",
@@ -329,7 +347,9 @@
           "lineNumber": 34,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "segmented-arc-clip-mask",
@@ -361,7 +381,9 @@
           "lineNumber": 39,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "speedometer",
@@ -403,7 +425,9 @@
           "lineNumber": 107,
           "line": "<Circle r={5} class=\"fill-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T04:29:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tween-value-on-mount",
@@ -425,7 +449,9 @@
           "lineNumber": 23,
           "line": "<Arc"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/ArcChart.json b/docs/src/examples/catalog/ArcChart.json
index 07dea08a67..392ad76e4b 100644
--- a/docs/src/examples/catalog/ArcChart.json
+++ b/docs/src/examples/catalog/ArcChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color",
@@ -23,7 +25,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "gradient-with-text",
@@ -55,7 +59,9 @@
           "lineNumber": 21,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-fixed",
@@ -67,7 +73,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-offset",
@@ -79,7 +87,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-percent",
@@ -91,7 +101,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series",
@@ -103,7 +115,9 @@
           "lineNumber": 10,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-arc",
@@ -115,7 +129,9 @@
           "lineNumber": 10,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-individual",
@@ -127,7 +143,9 @@
           "lineNumber": 12,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-labels",
@@ -139,7 +157,9 @@
           "lineNumber": 12,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-08T04:18:23.000Z"
     },
     {
       "name": "series-motion-spring",
@@ -151,7 +171,9 @@
           "lineNumber": 20,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "series-motion-tween",
@@ -163,7 +185,9 @@
           "lineNumber": 20,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "series-start-180",
@@ -175,7 +199,9 @@
           "lineNumber": 10,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-start-90",
@@ -187,7 +213,9 @@
           "lineNumber": 10,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-track-color",
@@ -199,7 +227,9 @@
           "lineNumber": 10,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "track-size",
@@ -211,7 +241,9 @@
           "lineNumber": 8,
           "line": "<ArcChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Area.json b/docs/src/examples/catalog/Area.json
index c59277968a..6c0aeb1c37 100644
--- a/docs/src/examples/catalog/Area.json
+++ b/docs/src/examples/catalog/Area.json
@@ -26,7 +26,9 @@
           "lineNumber": 15,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "clip-tween-on-mount",
@@ -58,7 +60,9 @@
           "lineNumber": 25,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "clipped-area-on-tooltip",
@@ -105,7 +109,9 @@
           "lineNumber": 52,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T14:23:23.000Z"
     },
     {
       "name": "explicit-axis-ticks-min-max",
@@ -137,7 +143,9 @@
           "lineNumber": 18,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "fade-mask",
@@ -174,7 +182,9 @@
           "lineNumber": 28,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T19:08:33.000Z",
+      "updatedAt": "2026-09-03T19:08:33.000Z"
     },
     {
       "name": "gradient",
@@ -206,7 +216,9 @@
           "lineNumber": 16,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "gradient-separate-stroke",
@@ -238,7 +250,9 @@
           "lineNumber": 18,
           "line": "<Area line={{ stroke: strokeGradient, class: 'stroke-2' }} fill={fillGradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "highlight-color-based-on-value-using-color-scale",
@@ -285,7 +299,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "highlight-color-based-on-value-using-tooltip-slot-prop",
@@ -332,7 +348,9 @@
           "lineNumber": 58,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "multiple-series",
@@ -384,7 +402,9 @@
           "lineNumber": 78,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-highlight-on-hover",
@@ -436,7 +456,9 @@
           "lineNumber": 82,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-tweened",
@@ -463,7 +485,9 @@
           "lineNumber": 51,
           "line": "<Area fill=\"fruit\" fillOpacity={0.3} line={{ class: 'stroke-2' }} motion=\"tween\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T19:08:33.000Z",
+      "updatedAt": "2026-09-03T19:08:33.000Z"
     },
     {
       "name": "multiple-series-using-overrides",
@@ -500,7 +524,9 @@
           "lineNumber": 67,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-with-labels",
@@ -542,7 +568,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "oscilloscope-ridgeline",
@@ -569,7 +597,9 @@
           "lineNumber": 151,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "oscilloscope-ridgeline-isometric",
@@ -591,7 +621,9 @@
           "lineNumber": 147,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "playground",
@@ -623,7 +655,9 @@
           "lineNumber": 46,
           "line": "<Points {motion} r={3} class=\"fill-surface-100 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "ridgeline",
@@ -660,7 +694,9 @@
           "lineNumber": 105,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "ridgeline-kde",
@@ -697,7 +733,9 @@
           "lineNumber": 195,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "stack",
@@ -734,7 +772,9 @@
           "lineNumber": 74,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "stack-with-gradient",
@@ -766,7 +806,9 @@
           "lineNumber": 56,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "threshold-with-lineargradient",
@@ -803,7 +845,9 @@
           "lineNumber": 40,
           "line": "<Area line={{ stroke: gradient, class: 'stroke-2' }} fill={gradient} fillOpacity={0.2} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "threshold-with-lineargradient-over-under",
@@ -840,7 +884,9 @@
           "lineNumber": 40,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "threshold-with-rectclippath",
@@ -877,7 +923,9 @@
           "lineNumber": 30,
           "line": "<Area line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "threshold-with-rectclippath-over-under",
@@ -914,7 +962,9 @@
           "lineNumber": 30,
           "line": "<Area line={{ class: 'stroke-2 stroke-success' }} class=\"fill-success/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tween-on-mount",
@@ -941,7 +991,9 @@
           "lineNumber": 18,
           "line": "<Area motion=\"tween\" line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/30\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "with-labels",
@@ -973,7 +1025,9 @@
           "lineNumber": 15,
           "line": "<Labels format=\"integer\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "with-tooltip-and-highlight",
@@ -1010,7 +1064,9 @@
           "lineNumber": 26,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
@@ -1522,8 +1578,8 @@
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 29,
-      "line": "<Area y1=\"value\" class=\"fill-secondary/20\" line={{ class: 'stroke-secondary' }} />"
+      "lineNumber": 31,
+      "line": "<Area"
     },
     {
       "example": "facet-brush-overview",
@@ -1736,5 +1792,5 @@
       "line": "<Area"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:42.866Z"
+  "updatedAt": "2026-10-16T16:15:12.779Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/AreaChart.json b/docs/src/examples/catalog/AreaChart.json
index e6f451f8a6..212c1556dd 100644
--- a/docs/src/examples/catalog/AreaChart.json
+++ b/docs/src/examples/catalog/AreaChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 11,
           "line": "<AreaChart {data} x=\"date\" y=\"value\" height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "band-scale",
@@ -23,7 +25,9 @@
           "lineNumber": 10,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "basic",
@@ -35,7 +39,9 @@
           "lineNumber": 9,
           "line": "<AreaChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "brush",
@@ -47,7 +53,9 @@
           "lineNumber": 11,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "brush-sync",
@@ -59,7 +67,9 @@
           "lineNumber": 23,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "curve",
@@ -71,7 +81,9 @@
           "lineNumber": 10,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom",
@@ -108,7 +120,9 @@
           "lineNumber": 27,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom-tooltip",
@@ -125,7 +139,9 @@
           "lineNumber": 12,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "default-series-label",
@@ -137,7 +153,9 @@
           "lineNumber": 14,
           "line": "<AreaChart {data} x=\"date\" y=\"visits\" padding={defaultChartPadding({ right: 10 })} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "funnel",
@@ -164,7 +182,9 @@
           "lineNumber": 82,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "gradient",
@@ -186,7 +206,9 @@
           "lineNumber": 13,
           "line": "<Area line={{ class: 'stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels",
@@ -198,7 +220,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "line-annotation",
@@ -210,7 +234,9 @@
           "lineNumber": 12,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "markers",
@@ -237,7 +263,9 @@
           "lineNumber": 49,
           "line": "<Layer type=\"html\">"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "motion-tween",
@@ -249,7 +277,9 @@
           "lineNumber": 16,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "null-gaps",
@@ -261,7 +291,9 @@
           "lineNumber": 14,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "point-annotations",
@@ -278,7 +310,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "point-scale",
@@ -290,7 +324,9 @@
           "lineNumber": 10,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "points",
@@ -302,7 +338,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial",
@@ -319,7 +357,9 @@
           "lineNumber": 48,
           "line": "<Spline y=\"avg\" curve={curveCatmullRom} class=\"stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "range-annotation",
@@ -331,7 +371,9 @@
           "lineNumber": 12,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "series",
@@ -343,7 +385,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-individual-tooltip",
@@ -370,7 +414,9 @@
           "lineNumber": 75,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "series-overlap",
@@ -382,7 +428,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-19T14:08:02.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "series-point-annotations",
@@ -394,7 +442,9 @@
           "lineNumber": 38,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-point-click",
@@ -406,7 +456,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-separate-data",
@@ -418,7 +470,9 @@
           "lineNumber": 20,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-stack",
@@ -430,7 +484,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-diverging",
@@ -442,7 +498,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-expand",
@@ -454,7 +512,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-stack-gradient",
@@ -476,7 +536,9 @@
           "lineNumber": 42,
           "line": "<Area seriesKey={s.key} line={{ stroke: s.color }} fill={gradient} fillOpacity={0.3} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-legend",
@@ -488,7 +550,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-legend-labels",
@@ -500,7 +564,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-legend-placement",
@@ -512,7 +578,9 @@
           "lineNumber": 15,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-separate-data",
@@ -524,7 +592,9 @@
           "lineNumber": 20,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-tooltip-click",
@@ -536,7 +606,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-x",
@@ -548,7 +620,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-y",
@@ -560,7 +634,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkline",
@@ -572,7 +648,9 @@
           "lineNumber": 9,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "threshold",
@@ -604,7 +682,9 @@
           "lineNumber": 51,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "threshold-gradient",
@@ -636,7 +716,9 @@
           "lineNumber": 52,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tooltip-external",
@@ -648,7 +730,9 @@
           "lineNumber": 27,
           "line": "<AreaChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "tooltip-fixed-with-hide-delay",
@@ -665,7 +749,9 @@
           "lineNumber": 29,
           "line": "<Tooltip.Root x=\"data\" y={context.height + 24} pointerEvents>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "tooltip-locking",
@@ -682,7 +768,9 @@
           "lineNumber": 38,
           "line": "<Tooltip.Root pointerEvents>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Axis.json b/docs/src/examples/catalog/Axis.json
index 2137f84d11..c6a20ce635 100644
--- a/docs/src/examples/catalog/Axis.json
+++ b/docs/src/examples/catalog/Axis.json
@@ -21,7 +21,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"left\" grid rule={{ markerEnd: { type: 'arrow' } }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "axis-label-placement-left-right",
@@ -43,7 +45,9 @@
           "lineNumber": 7,
           "line": "<Axis label=\"left start\" placement=\"left\" labelPlacement=\"start\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "axis-label-placement-top-bottom",
@@ -65,7 +69,9 @@
           "lineNumber": 15,
           "line": "<Axis label=\"top start\" placement=\"top\" labelPlacement=\"start\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "barchart-tickspacing",
@@ -77,7 +83,9 @@
           "lineNumber": 76,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T23:39:34.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "barchart-xinterval-xinset",
@@ -89,7 +97,9 @@
           "lineNumber": 25,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "explicit-ticks",
@@ -111,7 +121,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule ticks={[0, 50, 100]} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "extent-ticks-only",
@@ -138,7 +150,9 @@
           "lineNumber": 23,
           "line": "<Text {...props} textAnchor={index === 0 ? 'start' : 'end'} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "grid",
@@ -160,7 +174,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"bottom\" grid />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "grid-dashed",
@@ -182,7 +198,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"bottom\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "hide-zero-filter",
@@ -204,7 +222,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule ticks={(scale) => scale.ticks?.().filter((d) => d !== 0)} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "hide-zero-format",
@@ -226,7 +246,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule format={(v) => v || ''} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "inject-ticks",
@@ -248,7 +270,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "integer-only-filter",
@@ -270,7 +294,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule ticks={(scale) => scale.ticks?.().filter(Number.isInteger)} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "integer-only-format",
@@ -292,7 +318,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule format=\"integer\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels-next-hash",
@@ -314,7 +342,9 @@
           "lineNumber": 12,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "linechart-tickspacing",
@@ -326,7 +356,9 @@
           "lineNumber": 23,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "log-scale",
@@ -348,7 +380,9 @@
           "lineNumber": 8,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiline-tick-labels",
@@ -370,7 +404,9 @@
           "lineNumber": 15,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiple-axis-grid-and-rules",
@@ -397,7 +433,9 @@
           "lineNumber": 19,
           "line": "<Rule x=\"$left\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiple-axis-grid-and-rules-separate-grid",
@@ -424,7 +462,9 @@
           "lineNumber": 18,
           "line": "<Axis placement=\"left\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiple-axis-grid-with-single-rule",
@@ -446,7 +486,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"left\" grid />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiple-axis-same-placement-bottom",
@@ -468,7 +510,9 @@
           "lineNumber": 15,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "multiple-axis-same-placement-right",
@@ -477,20 +521,22 @@
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 7,
+          "lineNumber": 6,
           "line": "<Chart yDomain={[0, 100]} padding={defaultChartPadding({ right: 90 })} height={300}>"
         },
         {
           "component": "Layer",
-          "lineNumber": 9,
+          "lineNumber": 7,
           "line": "<Layer>"
         },
         {
           "component": "Axis",
-          "lineNumber": 10,
-          "line": "<Axis"
+          "lineNumber": 8,
+          "line": "<Axis label=\"Celsius\" placement=\"right\" rule labelProps={{ dx: -60 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "override-axis-ticks-scale",
@@ -512,7 +558,9 @@
           "lineNumber": 12,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-bottom-left",
@@ -534,7 +582,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"bottom\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-bottom-left-rule",
@@ -556,7 +606,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-top-right",
@@ -578,7 +630,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"top\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-top-right-rule",
@@ -600,7 +654,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"top\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-grid",
@@ -622,7 +678,9 @@
           "lineNumber": 18,
           "line": "<Axis placement=\"radius\" grid />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-rule",
@@ -644,7 +702,9 @@
           "lineNumber": 18,
           "line": "<Axis placement=\"radius\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "remove-tick-marks",
@@ -666,7 +726,9 @@
           "lineNumber": 15,
           "line": "<Axis placement=\"bottom\" rule tickMarks={false} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "rotate-labels",
@@ -688,7 +750,9 @@
           "lineNumber": 15,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tick-count",
@@ -710,7 +774,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule ticks={20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tick-label-styling",
@@ -732,7 +798,9 @@
           "lineNumber": 11,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tick-occlusion",
@@ -744,7 +812,9 @@
           "lineNumber": 40,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T14:19:28.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "tick-occlusion-explicit-ticks",
@@ -771,7 +841,9 @@
           "lineNumber": 23,
           "line": "<Spline />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T14:19:28.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "tick-occlusion-priority",
@@ -798,7 +870,9 @@
           "lineNumber": 43,
           "line": "<Spline />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T14:19:28.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "tick-occlusion-rotated",
@@ -810,7 +884,9 @@
           "lineNumber": 33,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T14:19:28.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "tick-occlusion-vs-tick-spacing",
@@ -822,7 +898,9 @@
           "lineNumber": 33,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T14:19:28.000Z",
+      "updatedAt": "2026-09-03T14:19:28.000Z"
     },
     {
       "name": "tick-spacing",
@@ -844,7 +922,9 @@
           "lineNumber": 7,
           "line": "<Axis placement=\"bottom\" rule tickSpacing={200} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-auto",
@@ -866,7 +946,9 @@
           "lineNumber": 120,
           "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-auto-format-filtering",
@@ -888,7 +970,9 @@
           "lineNumber": 120,
           "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} format={example.format} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-auto-multiline",
@@ -910,7 +994,9 @@
           "lineNumber": 121,
           "line": "<Axis placement=\"top\" rule grid tickMultiline {tickSpacing} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-brush",
@@ -932,7 +1018,9 @@
           "lineNumber": 30,
           "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "time-scale-brush-multiline",
@@ -954,7 +1042,9 @@
           "lineNumber": 30,
           "line": "<Axis placement=\"bottom\" rule grid {tickSpacing} tickMultiline />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "time-scale-explicit",
@@ -976,7 +1066,9 @@
           "lineNumber": 115,
           "line": "<Axis placement=\"bottom\" rule grid ticks={{ interval: example.interval }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-explicit-multiline",
@@ -998,7 +1090,9 @@
           "lineNumber": 115,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "utc-scale",
@@ -1020,7 +1114,9 @@
           "lineNumber": 20,
           "line": "<Axis placement=\"bottom\" format={{ type: 'day', options: { variant: 'short' } }} rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-11T20:14:44.000Z",
+      "updatedAt": "2026-08-11T20:14:44.000Z"
     }
   ],
   "usage": [
@@ -1644,14 +1740,14 @@
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
       "path": "/docs/components/Axis/multiple-axis-same-placement-right",
-      "lineNumber": 10,
-      "line": "<Axis"
+      "lineNumber": 8,
+      "line": "<Axis label=\"Celsius\" placement=\"right\" rule labelProps={{ dx: -60 }} />"
     },
     {
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
       "path": "/docs/components/Axis/multiple-axis-same-placement-right",
-      "lineNumber": 17,
+      "lineNumber": 9,
       "line": "<Axis"
     },
     {
@@ -1927,6 +2023,27 @@
       "lineNumber": 20,
       "line": "<Axis placement=\"bottom\" rule />"
     },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 54,
+      "line": "<Axis placement=\"left\" rule label=\"Energy / Peak power\" labelPlacement=\"middle\" />"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 55,
+      "line": "<Axis"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 63,
+      "line": "<Axis placement=\"bottom\" />"
+    },
     {
       "example": "language-race",
       "component": "BarChart",
@@ -3373,56 +3490,56 @@
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 28,
+      "lineNumber": 27,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 36,
+      "lineNumber": 35,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 45,
+      "lineNumber": 44,
       "line": "<Axis placement=\"bottom\" format=\"none\" rule />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 24,
+      "lineNumber": 26,
       "line": "<Axis"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 32,
+      "lineNumber": 34,
       "line": "<Axis placement=\"bottom\" format=\"none\" rule />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 47,
+      "lineNumber": 49,
       "line": "<Axis"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 68,
+      "lineNumber": 69,
       "line": "<Axis placement=\"left\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 70,
+      "lineNumber": 71,
       "line": "<Axis"
     },
     {
@@ -5785,5 +5902,5 @@
       "line": "<Axis"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:42.908Z"
+  "updatedAt": "2026-10-16T16:15:12.838Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/BarChart.json b/docs/src/examples/catalog/BarChart.json
index 77cd5ef990..6e74885255 100644
--- a/docs/src/examples/catalog/BarChart.json
+++ b/docs/src/examples/catalog/BarChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "axis-labels-inside-bars-using-labels",
@@ -28,7 +30,9 @@
           "lineNumber": 26,
           "line": "<Labels x={(d) => 0} value=\"date\" class=\"text-sm fill-surface-300 stroke-none\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "both-axis-grid",
@@ -40,7 +44,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" grid={{ x: true }} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "both-axis-grid-align-between",
@@ -52,7 +58,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" grid={{ x: true, bandAlign: 'between' }} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "brush",
@@ -64,7 +72,9 @@
           "lineNumber": 16,
           "line": "<BarChart {data} x=\"date\" y=\"value\" xInterval={timeDay} brush height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "brush-band",
@@ -76,7 +86,9 @@
           "lineNumber": 9,
           "line": "<BarChart {data} x=\"state\" y=\"value\" brush height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T23:27:44.000Z",
+      "updatedAt": "2026-04-01T23:27:44.000Z"
     },
     {
       "name": "brush-pan-zoom",
@@ -88,7 +100,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "brush-pan-zoom-band",
@@ -100,7 +114,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T23:27:44.000Z",
+      "updatedAt": "2026-04-01T23:27:44.000Z"
     },
     {
       "name": "color-bars-class",
@@ -112,7 +128,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" props={{ bars: { class: 'fill-secondary' } }} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-per-value",
@@ -124,7 +142,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-threshold",
@@ -136,7 +156,9 @@
           "lineNumber": 10,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-using-scale",
@@ -148,7 +170,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" cRange={['var(--color-secondary)']} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "company-race",
@@ -190,7 +214,9 @@
           "lineNumber": 244,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T13:14:35.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "custom-chart",
@@ -227,7 +253,9 @@
           "lineNumber": 25,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom-tooltip",
@@ -244,7 +272,9 @@
           "lineNumber": 18,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration",
@@ -261,7 +291,9 @@
           "lineNumber": 85,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration-bars",
@@ -278,7 +310,9 @@
           "lineNumber": 36,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration-bars-color",
@@ -295,7 +329,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration-bars-dense",
@@ -312,7 +348,9 @@
           "lineNumber": 27,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "duration-bars-dense-lanes",
@@ -329,7 +367,9 @@
           "lineNumber": 30,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "duration-bars-lanes",
@@ -346,7 +386,9 @@
           "lineNumber": 49,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration-civilization-timeline",
@@ -363,7 +405,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "duration-civilization-timeline-dense",
@@ -380,7 +424,9 @@
           "lineNumber": 48,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "duration-labels",
@@ -397,7 +443,9 @@
           "lineNumber": 100,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "duration-points",
@@ -424,7 +472,9 @@
           "lineNumber": 48,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "duration-points-color",
@@ -451,7 +501,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "dynamic-height",
@@ -463,7 +515,9 @@
           "lineNumber": 44,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "facet-stack-long-data",
@@ -475,7 +529,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T18:45:44.000Z",
+      "updatedAt": "2026-08-25T17:48:30.000Z"
     },
     {
       "name": "gradient",
@@ -497,7 +553,9 @@
           "lineNumber": 20,
           "line": "<Bars fill={gradient} radius={4} rounded=\"top\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "group-long-data",
@@ -509,7 +567,9 @@
           "lineNumber": 13,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-18T18:09:40.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "group-series",
@@ -521,7 +581,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "group-series-bar-click",
@@ -533,7 +595,33 @@
           "lineNumber": 11,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
+    },
+    {
+      "name": "group-series-dual-axis",
+      "title": "group series dual axis",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "components": [
+        {
+          "component": "BarChart",
+          "lineNumber": 34,
+          "line": "<BarChart"
+        },
+        {
+          "component": "Axis",
+          "lineNumber": 54,
+          "line": "<Axis placement=\"left\" rule label=\"Energy / Peak power\" labelPlacement=\"middle\" />"
+        },
+        {
+          "component": "Tooltip",
+          "lineNumber": 67,
+          "line": "<Tooltip.Root {context}>"
+        }
+      ],
+      "createdAt": "2026-10-12T02:24:42.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "group-series-horizontal",
@@ -545,7 +633,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "group-series-labels",
@@ -557,7 +647,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "group-series-series-long-data",
@@ -569,7 +661,9 @@
           "lineNumber": 11,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "group-stack-long-data",
@@ -581,7 +675,9 @@
           "lineNumber": 10,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T18:45:44.000Z",
+      "updatedAt": "2026-08-20T18:45:44.000Z"
     },
     {
       "name": "group-stack-series",
@@ -593,7 +689,9 @@
           "lineNumber": 25,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "group-stack-series-horizontal",
@@ -605,7 +703,9 @@
           "lineNumber": 21,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "highlight-below-marks",
@@ -622,7 +722,9 @@
           "lineNumber": 17,
           "line": "<Highlight area={{ class: 'fill-surface-content/10' }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "histogram-date-time-count",
@@ -644,7 +746,9 @@
           "lineNumber": 53,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "histogram-date-time-interval",
@@ -666,7 +770,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "histogram-horizontal",
@@ -688,7 +794,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "histogram-random-distribution",
@@ -710,7 +818,9 @@
           "lineNumber": 36,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "histogram-vertical",
@@ -732,7 +842,9 @@
           "lineNumber": 44,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "horizontal",
@@ -744,7 +856,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels",
@@ -756,7 +870,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" labels height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels-inside-placement",
@@ -768,7 +884,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" labels={{ placement: 'inside' }} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels-placement",
@@ -780,7 +898,9 @@
           "lineNumber": 35,
           "line": "<BarChart {data} x=\"date\" y=\"value\" labels={{ placement }} yPadding={[20, 20]} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T19:59:54.000Z",
+      "updatedAt": "2026-04-07T19:59:54.000Z"
     },
     {
       "name": "language-race",
@@ -827,7 +947,9 @@
           "lineNumber": 247,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T13:14:35.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "legend-custom-labels",
@@ -839,7 +961,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-group-series",
@@ -851,7 +975,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-placement",
@@ -863,7 +989,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-stack-series",
@@ -875,7 +1003,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "line-annotation",
@@ -887,7 +1017,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "motion-tween",
@@ -899,7 +1031,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "oscilloscope-frequency",
@@ -921,7 +1055,9 @@
           "lineNumber": 120,
           "line": "<Bars radius={1} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "override-axis-ticks-with-custom-scale",
@@ -933,7 +1069,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pan-zoom",
@@ -945,7 +1083,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "pan-zoom-band",
@@ -957,7 +1097,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T23:27:44.000Z",
+      "updatedAt": "2026-04-03T03:59:28.000Z"
     },
     {
       "name": "pan-zoom-domain-extent",
@@ -969,7 +1111,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "pan-zoom-scale-extent",
@@ -981,7 +1125,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "point-annotation",
@@ -993,7 +1139,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-horizontal",
@@ -1005,7 +1153,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-horizontal-color-per-value",
@@ -1017,7 +1167,9 @@
           "lineNumber": 14,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-horizontal-duration",
@@ -1029,7 +1181,9 @@
           "lineNumber": 57,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-horizontal-grid-between",
@@ -1041,7 +1195,9 @@
           "lineNumber": 14,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-vertical",
@@ -1053,7 +1209,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-vertical-arcpadding",
@@ -1065,7 +1223,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-vertical-yrange",
@@ -1077,7 +1237,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-weather",
@@ -1089,7 +1251,9 @@
           "lineNumber": 26,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-multiple",
@@ -1101,7 +1265,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-single",
@@ -1113,7 +1279,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-value",
@@ -1125,7 +1293,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "remove-rounding",
@@ -1137,7 +1307,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" props={{ bars: { rounded: 'none' } }} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "scale-override",
@@ -1149,7 +1321,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series",
@@ -1161,7 +1335,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-data",
@@ -1173,7 +1349,9 @@
           "lineNumber": 18,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-diverging",
@@ -1185,7 +1363,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-horizontal",
@@ -1197,7 +1377,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-horizontal-diverging",
@@ -1214,7 +1396,9 @@
           "lineNumber": 56,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "series-horizontal-diverging-as-percent",
@@ -1231,7 +1415,9 @@
           "lineNumber": 57,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "series-horizontal-diverging-label-gap",
@@ -1268,7 +1454,9 @@
           "lineNumber": 83,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-07-22T16:51:29.000Z",
+      "updatedAt": "2026-07-22T16:51:29.000Z"
     },
     {
       "name": "series-horizontal-diverging-split-scale",
@@ -1295,7 +1483,9 @@
           "lineNumber": 118,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-07-22T16:51:29.000Z",
+      "updatedAt": "2026-07-22T16:51:29.000Z"
     },
     {
       "name": "series-horizontal-labels",
@@ -1307,7 +1497,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "series-stack-separate-data",
@@ -1319,7 +1511,9 @@
           "lineNumber": 12,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "single-axis-x",
@@ -1331,7 +1525,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" axis=\"x\" height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-y",
@@ -1343,7 +1539,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-dimension",
@@ -1360,7 +1558,9 @@
           "lineNumber": 37,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-05-06T16:36:52.000Z"
     },
     {
       "name": "single-stack-with-indicator",
@@ -1395,7 +1595,9 @@
       ],
       "tags": [
         "gauge"
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-19T13:24:57.000Z"
     },
     {
       "name": "sparkbar",
@@ -1407,7 +1609,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkbar-fixed-position-tooltip",
@@ -1424,7 +1628,9 @@
           "lineNumber": 22,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkbar-negative-data",
@@ -1436,7 +1642,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkbar-within-a-paragraph",
@@ -1448,7 +1656,9 @@
           "lineNumber": 12,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkbar-within-a-paragraph-with-tooltip-and-highlight",
@@ -1465,7 +1675,9 @@
           "lineNumber": 26,
           "line": "<Tooltip.Root {context} class=\"text-xs\" contained={false} y={context.height + 4} xOffset={0}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "stack-long-data",
@@ -1477,7 +1689,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-19T14:08:02.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "stack-series",
@@ -1489,7 +1703,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "stack-series-diverging",
@@ -1501,7 +1717,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "stack-series-expand",
@@ -1513,7 +1731,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "stack-series-horizontal",
@@ -1525,7 +1745,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "stack-series-padded",
@@ -1537,7 +1759,9 @@
           "lineNumber": 9,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "time-scale-interval",
@@ -1549,7 +1773,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-interval-horizontal",
@@ -1561,7 +1787,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "time-scale-interval-with-inset",
@@ -1573,7 +1801,9 @@
           "lineNumber": 16,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tooltip-click",
@@ -1585,7 +1815,9 @@
           "lineNumber": 15,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-default",
@@ -1597,7 +1829,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-fixed-width",
@@ -1609,7 +1843,9 @@
           "lineNumber": 15,
           "line": "<BarChart {data} x=\"date\" y=\"value\" height={300} props={{ bars: { width: 20 } }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "waterfall",
@@ -1636,7 +1872,9 @@
           "lineNumber": 110,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T05:00:55.000Z",
+      "updatedAt": "2026-08-17T23:27:26.000Z"
     }
   ],
   "usage": [
@@ -1941,6 +2179,13 @@
       "lineNumber": 11,
       "line": "<BarChart"
     },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 34,
+      "line": "<BarChart"
+    },
     {
       "example": "group-series-horizontal",
       "component": "BarChart",
@@ -2421,35 +2666,35 @@
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 19,
+      "lineNumber": 20,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 14,
+      "lineNumber": 21,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 29,
+      "lineNumber": 38,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 17,
+      "lineNumber": 18,
       "line": "<BarChart"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 34,
+      "lineNumber": 35,
       "line": "<BarChart"
     },
     {
@@ -2502,5 +2747,5 @@
       "line": "<BarChart"
     }
   ],
-  "updatedAt": "2026-09-03T20:00:05.808Z"
+  "updatedAt": "2026-10-16T16:15:12.894Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Bars.json b/docs/src/examples/catalog/Bars.json
index 8c07fd4ac7..4603234f15 100644
--- a/docs/src/examples/catalog/Bars.json
+++ b/docs/src/examples/catalog/Bars.json
@@ -36,7 +36,9 @@
           "lineNumber": 41,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "horizontal-basic",
@@ -63,7 +65,9 @@
           "lineNumber": 30,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-calculated-value-domain-negative",
@@ -90,7 +94,9 @@
           "lineNumber": 23,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-calculated-value-domain-positive",
@@ -117,7 +123,9 @@
           "lineNumber": 23,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-candlestick-bars",
@@ -154,7 +162,9 @@
           "lineNumber": 36,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "horizontal-click-handler",
@@ -186,7 +196,9 @@
           "lineNumber": 37,
           "line": "<Highlight area />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-customize-individual-styles",
@@ -218,7 +230,9 @@
           "lineNumber": 32,
           "line": "<Bar"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-gradient",
@@ -250,7 +264,9 @@
           "lineNumber": 32,
           "line": "<Bars strokeWidth={1} fill={gradient} class=\"stroke-blue-900\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-grouped",
@@ -287,7 +303,9 @@
           "lineNumber": 53,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-grouped-and-stacked",
@@ -324,7 +342,9 @@
           "lineNumber": 58,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-grouped-stacked-or-both-transition",
@@ -361,7 +381,9 @@
           "lineNumber": 118,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-highlight-individual-bar",
@@ -398,7 +420,9 @@
           "lineNumber": 39,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-highlight-individual-bar-line",
@@ -430,7 +454,9 @@
           "lineNumber": 31,
           "line": "<Highlight"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "horizontal-inside-labels",
@@ -467,7 +493,9 @@
           "lineNumber": 25,
           "line": "<Labels placement=\"inside\" format=\"integer\" class=\"fill-black\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-limit-ticks-count",
@@ -494,7 +522,9 @@
           "lineNumber": 30,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-limit-ticks-second-scale",
@@ -521,7 +551,9 @@
           "lineNumber": 34,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-multiple-diverging",
@@ -563,7 +595,9 @@
           "lineNumber": 36,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-multiple-overlapping",
@@ -600,7 +634,9 @@
           "lineNumber": 35,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-outside-labels-default",
@@ -637,7 +673,9 @@
           "lineNumber": 26,
           "line": "<Labels format=\"integer\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-rounded-right-only",
@@ -664,7 +702,9 @@
           "lineNumber": 30,
           "line": "<Bars radius={4} rounded=\"right\" strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-stacked",
@@ -701,7 +741,9 @@
           "lineNumber": 50,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-stacked-percent",
@@ -738,7 +780,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-stagger-tween-on-mount",
@@ -765,7 +809,9 @@
           "lineNumber": 38,
           "line": "<Bar"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "horizontal-time-scale-with-inset",
@@ -792,7 +838,9 @@
           "lineNumber": 30,
           "line": "<Bars class=\"fill-primary\" insets={{ y: 2 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-time-scale-with-interval",
@@ -819,7 +867,9 @@
           "lineNumber": 30,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-time-scale-with-missing-data",
@@ -846,7 +896,9 @@
           "lineNumber": 30,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-tooltip-and-bar-highlight",
@@ -883,7 +935,9 @@
           "lineNumber": 35,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
@@ -915,7 +969,9 @@
           "lineNumber": 121,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-tooltip-and-clipped-highlight",
@@ -957,7 +1013,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-tooltip-and-highlight",
@@ -994,7 +1052,9 @@
           "lineNumber": 34,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal-tween-on-mount",
@@ -1021,7 +1081,9 @@
           "lineNumber": 37,
           "line": "<Bars"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "horizontal-with-grid-on-top",
@@ -1048,7 +1110,9 @@
           "lineNumber": 29,
           "line": "<Axis placement=\"bottom\" grid={{ class: 'stroke-surface-100' }} rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "horizontal-with-grid-on-top-mix-blend",
@@ -1075,7 +1139,9 @@
           "lineNumber": 29,
           "line": "<Axis placement=\"bottom\" grid={{ class: 'mix-blend-multiply' }} rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-average-annotation-rule",
@@ -1112,7 +1178,9 @@
           "lineNumber": 39,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "vertical-basic",
@@ -1139,7 +1207,9 @@
           "lineNumber": 27,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-calculated-value-domain-negative",
@@ -1166,7 +1236,9 @@
           "lineNumber": 26,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-calculated-value-domain-positive",
@@ -1193,7 +1265,9 @@
           "lineNumber": 26,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-click-handler",
@@ -1225,7 +1299,9 @@
           "lineNumber": 34,
           "line": "<Highlight area />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-customize-individual-styles",
@@ -1257,7 +1333,9 @@
           "lineNumber": 29,
           "line": "<Bar"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-fixed-width",
@@ -1284,7 +1362,9 @@
           "lineNumber": 27,
           "line": "<Bars width={20} strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-gradient",
@@ -1316,7 +1396,9 @@
           "lineNumber": 25,
           "line": "<Bars strokeWidth={1} fill={gradient} class=\"stroke-blue-900\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-grouped",
@@ -1353,7 +1435,9 @@
           "lineNumber": 44,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-grouped-and-stacked",
@@ -1390,7 +1474,9 @@
           "lineNumber": 49,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-grouped-stacked-or-both-transition",
@@ -1427,7 +1513,9 @@
           "lineNumber": 113,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-highlight-individual-bar",
@@ -1464,7 +1552,9 @@
           "lineNumber": 36,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-highlight-individual-bar-line",
@@ -1496,7 +1586,9 @@
           "lineNumber": 24,
           "line": "<Highlight"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "vertical-inside-labels",
@@ -1533,7 +1625,9 @@
           "lineNumber": 25,
           "line": "<Labels placement=\"inside\" format=\"integer\" class=\"fill-black\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-limit-ticks-count",
@@ -1560,7 +1654,9 @@
           "lineNumber": 27,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-limit-ticks-second-scale",
@@ -1587,7 +1683,9 @@
           "lineNumber": 31,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-multiple-diverging",
@@ -1629,7 +1727,9 @@
           "lineNumber": 34,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-multiple-diverging-rounded-specific",
@@ -1671,7 +1771,9 @@
           "lineNumber": 46,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-multiple-overlapping",
@@ -1708,7 +1810,9 @@
           "lineNumber": 33,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-outside-labels-default",
@@ -1745,7 +1849,9 @@
           "lineNumber": 26,
           "line": "<Labels format=\"integer\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-rounded-top-only",
@@ -1772,7 +1878,9 @@
           "lineNumber": 28,
           "line": "<Bars radius={4} rounded=\"top\" strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-stacked",
@@ -1809,7 +1917,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-stacked-percent",
@@ -1846,7 +1956,9 @@
           "lineNumber": 45,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-stagger-tween-on-mount",
@@ -1873,7 +1985,9 @@
           "lineNumber": 35,
           "line": "<Bar"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "vertical-stagger-tween-on-mount-rounded-edge",
@@ -1900,7 +2014,9 @@
           "lineNumber": 35,
           "line": "<Bar"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "vertical-time-scale-with-inset",
@@ -1927,7 +2043,9 @@
           "lineNumber": 25,
           "line": "<Bars class=\"fill-primary\" insets={{ x: 2 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-time-scale-with-interval",
@@ -1954,7 +2072,9 @@
           "lineNumber": 25,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-time-scale-with-interval-months",
@@ -1981,7 +2101,9 @@
           "lineNumber": 25,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-time-scale-with-missing-data",
@@ -2008,7 +2130,9 @@
           "lineNumber": 25,
           "line": "<Bars strokeWidth={1} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-tooltip-and-bar-highlight",
@@ -2045,7 +2169,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-tooltip-and-click-handlers-for-individual-stack-grouped-bar",
@@ -2077,7 +2203,9 @@
           "lineNumber": 121,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-tooltip-and-clipped-highlight",
@@ -2119,7 +2247,9 @@
           "lineNumber": 40,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-tooltip-and-highlight",
@@ -2156,7 +2286,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "vertical-tween-on-mount",
@@ -2183,7 +2315,9 @@
           "lineNumber": 34,
           "line": "<Bars"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "vertical-tween-on-mount-rounded-edge",
@@ -2210,7 +2344,9 @@
           "lineNumber": 34,
           "line": "<Bars"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "vertical-with-grid-on-top",
@@ -2237,7 +2373,9 @@
           "lineNumber": 25,
           "line": "<Axis placement=\"left\" grid={{ class: 'stroke-surface-100' }} rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-with-grid-on-top-mix-blend",
@@ -2264,7 +2402,9 @@
           "lineNumber": 25,
           "line": "<Axis placement=\"left\" grid={{ class: 'mix-blend-multiply' }} rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/BoxPlot.json b/docs/src/examples/catalog/BoxPlot.json
index a967456460..668a8ecb64 100644
--- a/docs/src/examples/catalog/BoxPlot.json
+++ b/docs/src/examples/catalog/BoxPlot.json
@@ -26,7 +26,9 @@
           "lineNumber": 40,
           "line": "<BoxPlot data={item} values=\"values\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "horizontal",
@@ -53,7 +55,9 @@
           "lineNumber": 41,
           "line": "<BoxPlot data={item} values=\"values\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "pre-computed",
@@ -80,7 +84,9 @@
           "lineNumber": 41,
           "line": "<BoxPlot"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "styled",
@@ -107,7 +113,9 @@
           "lineNumber": 49,
           "line": "<BoxPlot"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "with-tooltip",
@@ -144,7 +152,9 @@
           "lineNumber": 59,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "with-violin",
@@ -186,7 +196,9 @@
           "lineNumber": 95,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Brush.json b/docs/src/examples/catalog/Brush.json
index 67e252d394..636593ab61 100644
--- a/docs/src/examples/catalog/Brush.json
+++ b/docs/src/examples/catalog/Brush.json
@@ -31,7 +31,9 @@
           "lineNumber": 44,
           "line": "<Brush bind:state={brush} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "html",
@@ -63,7 +65,9 @@
           "lineNumber": 48,
           "line": "<Brush bind:state={brush} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "programmatic",
@@ -95,7 +99,9 @@
           "lineNumber": 52,
           "line": "<Brush bind:state={brush} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "region",
@@ -127,7 +133,9 @@
           "lineNumber": 53,
           "line": "<Brush"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "two-dimensional",
@@ -164,7 +172,9 @@
           "lineNumber": 61,
           "line": "<Brush bind:state={brush} axis=\"both\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "vertical",
@@ -196,7 +206,9 @@
           "lineNumber": 44,
           "line": "<Brush bind:state={brush} axis=\"y\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/BrushContext.json b/docs/src/examples/catalog/BrushContext.json
index 89d2a7ab60..01e5af8b8b 100644
--- a/docs/src/examples/catalog/BrushContext.json
+++ b/docs/src/examples/catalog/BrushContext.json
@@ -21,7 +21,9 @@
           "lineNumber": 14,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "constant-labels",
@@ -48,7 +50,9 @@
           "lineNumber": 19,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "flame-chart",
@@ -100,7 +104,9 @@
           "lineNumber": 194,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-07-21T18:21:59.000Z",
+      "updatedAt": "2026-07-21T18:21:59.000Z"
     },
     {
       "name": "handle-arrows",
@@ -127,7 +133,9 @@
           "lineNumber": 27,
           "line": "<rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "handle-labels",
@@ -154,7 +162,9 @@
           "lineNumber": 18,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "integrated-brush-(both-axis-area)",
@@ -191,7 +201,9 @@
           "lineNumber": 47,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "integrated-brush-(x-axis)",
@@ -228,7 +240,9 @@
           "lineNumber": 44,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "integrated-brush-(y-axis)",
@@ -265,7 +279,9 @@
           "lineNumber": 44,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "max-window",
@@ -297,7 +313,9 @@
           "lineNumber": 52,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-07-01T16:26:01.000Z",
+      "updatedAt": "2026-07-01T16:26:01.000Z"
     },
     {
       "name": "min-max-extent",
@@ -324,7 +342,9 @@
           "lineNumber": 47,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-07-01T16:26:01.000Z",
+      "updatedAt": "2026-07-01T16:26:01.000Z"
     },
     {
       "name": "minimap",
@@ -361,7 +381,9 @@
           "lineNumber": 89,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-14T04:35:33.000Z"
     },
     {
       "name": "programmatic-control",
@@ -388,7 +410,9 @@
           "lineNumber": 55,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "selection",
@@ -420,7 +444,9 @@
           "lineNumber": 32,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-14T04:35:33.000Z"
     },
     {
       "name": "separate-chart-(clip-data-y-axis)",
@@ -457,7 +483,9 @@
           "lineNumber": 48,
           "line": "<LinearGradient class=\"from-primary/50 to-primary/1\" vertical>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "separate-chart-(clip-data)",
@@ -494,7 +522,9 @@
           "lineNumber": 38,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "separate-chart-(filter-data)",
@@ -526,7 +556,9 @@
           "lineNumber": 36,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-14T04:35:33.000Z"
     },
     {
       "name": "simple-styling",
@@ -548,7 +580,9 @@
           "lineNumber": 20,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "snap-to-month",
@@ -575,7 +609,9 @@
           "lineNumber": 54,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-07-01T16:26:01.000Z",
+      "updatedAt": "2026-07-01T16:26:01.000Z"
     },
     {
       "name": "striped-background",
@@ -597,7 +633,9 @@
           "lineNumber": 14,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "synced-brushes",
@@ -639,7 +677,9 @@
           "lineNumber": 71,
           "line": "<Area line={{ class: 'stroke-2 stroke-(--chart-color)' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-27T02:37:19.000Z"
     },
     {
       "name": "tooltip-interop",
@@ -686,7 +726,9 @@
           "lineNumber": 56,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     }
   ],
   "usage": [],
diff --git a/docs/src/examples/catalog/Calendar.json b/docs/src/examples/catalog/Calendar.json
index 04965fda33..0724ec248b 100644
--- a/docs/src/examples/catalog/Calendar.json
+++ b/docs/src/examples/catalog/Calendar.json
@@ -26,7 +26,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "basic",
@@ -48,7 +50,9 @@
           "lineNumber": 40,
           "line": "<Calendar start={firstDayOfYear} end={lastDayOfYear} monthPath />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "fixed-cell-size",
@@ -75,7 +79,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "html-with-padding",
@@ -102,7 +108,9 @@
           "lineNumber": 63,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "isometric",
@@ -129,7 +137,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "last-month",
@@ -156,7 +166,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-years",
@@ -193,7 +205,9 @@
           "lineNumber": 54,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "responsive-cell-size-default",
@@ -220,7 +234,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "rounded-cells",
@@ -252,7 +268,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Cell.json b/docs/src/examples/catalog/Cell.json
index c9bcbc0829..cf232cf392 100644
--- a/docs/src/examples/catalog/Cell.json
+++ b/docs/src/examples/catalog/Cell.json
@@ -26,7 +26,9 @@
           "lineNumber": 44,
           "line": "<Cell x=\"day\" y=\"hour\" fill=\"value\" insets={{ all: 1 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "circle",
@@ -53,7 +55,9 @@
           "lineNumber": 42,
           "line": "<Cell x=\"day\" y=\"hour\" shape=\"circle\" fill=\"value\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-scale",
@@ -80,7 +84,9 @@
           "lineNumber": 42,
           "line": "<Cell x=\"day\" y=\"hour\" fill=\"value\" insets={{ all: 1 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "punchcard",
@@ -112,7 +118,9 @@
           "lineNumber": 31,
           "line": "<Cell"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T11:30:54.000Z"
     },
     {
       "name": "rounded-insets",
@@ -139,7 +147,9 @@
           "lineNumber": 42,
           "line": "<Cell x=\"col\" y=\"row\" fill=\"value\" insets={{ all: 2 }} rx={4} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Chart.json b/docs/src/examples/catalog/Chart.json
index 06af049852..5ec2e8f6d5 100644
--- a/docs/src/examples/catalog/Chart.json
+++ b/docs/src/examples/catalog/Chart.json
@@ -8,20 +8,22 @@
       "components": [
         {
           "component": "BarChart",
-          "lineNumber": 19,
+          "lineNumber": 20,
           "line": "<BarChart"
         },
         {
           "component": "Area",
-          "lineNumber": 29,
-          "line": "<Area y1=\"value\" class=\"fill-secondary/20\" line={{ class: 'stroke-secondary' }} />"
+          "lineNumber": 31,
+          "line": "<Area"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 33,
+          "lineNumber": 40,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "compound-dual-axis-with-single-chart-using-remapped-scale",
@@ -30,116 +32,139 @@
       "components": [
         {
           "component": "Chart",
-          "lineNumber": 14,
+          "lineNumber": 13,
           "line": "<Chart"
         },
         {
           "component": "Layer",
-          "lineNumber": 27,
+          "lineNumber": 26,
           "line": "<Layer>"
         },
         {
           "component": "Axis",
-          "lineNumber": 28,
+          "lineNumber": 27,
           "line": "<Axis"
         },
         {
           "component": "Spline",
-          "lineNumber": 46,
+          "lineNumber": 45,
           "line": "<Spline class=\"stroke-2 stroke-primary\" />"
         },
         {
           "component": "Highlight",
-          "lineNumber": 48,
+          "lineNumber": 47,
           "line": "<Highlight lines points />"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 52,
+          "lineNumber": 51,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "compound-dual-axis-with-stacked-charts",
       "title": "compound dual axis with stacked charts",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
       "components": [
+        {
+          "component": "ChartGroup",
+          "lineNumber": 13,
+          "line": "<ChartGroup pointer={{ tooltip: false }}>"
+        },
         {
           "component": "Chart",
-          "lineNumber": 14,
+          "lineNumber": 16,
           "line": "<Chart"
         },
         {
           "component": "Layer",
-          "lineNumber": 23,
+          "lineNumber": 25,
           "line": "<Layer>"
         },
         {
           "component": "Axis",
-          "lineNumber": 24,
+          "lineNumber": 26,
           "line": "<Axis"
         },
         {
           "component": "Spline",
-          "lineNumber": 33,
+          "lineNumber": 35,
           "line": "<Spline class=\"stroke-2 stroke-primary\" />"
         },
         {
           "component": "Highlight",
-          "lineNumber": 34,
+          "lineNumber": 36,
           "line": "<Highlight lines points />"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 59,
+          "lineNumber": 60,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "title": "compound separate scales with stacked charts and overridden marks",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "components": [
+        {
+          "component": "ChartGroup",
+          "lineNumber": 18,
+          "line": "<ChartGroup pointer={{ tooltip: false }}>"
+        },
         {
           "component": "BarChart",
-          "lineNumber": 14,
+          "lineNumber": 21,
           "line": "<BarChart"
         },
         {
           "component": "Spline",
-          "lineNumber": 43,
-          "line": "<Spline y=\"open\" class=\"stroke-primary\" />"
+          "lineNumber": 54,
+          "line": "<Spline x={midday} y=\"open\" class=\"stroke-primary\" />"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 48,
+          "lineNumber": 59,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "title": "compound separate scales with stacked charts with inverted range top down",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "components": [
+        {
+          "component": "ChartGroup",
+          "lineNumber": 15,
+          "line": "<ChartGroup pointer={{ tooltip: false }}>"
+        },
         {
           "component": "BarChart",
-          "lineNumber": 17,
+          "lineNumber": 18,
           "line": "<BarChart"
         },
         {
           "component": "Axis",
-          "lineNumber": 68,
+          "lineNumber": 69,
           "line": "<Axis placement=\"left\" />"
         },
         {
           "component": "Tooltip",
-          "lineNumber": 83,
+          "lineNumber": 84,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "data-chart-multi",
@@ -156,7 +181,9 @@
           "lineNumber": 16,
           "line": "<Spline y=\"apples\" stroke=\"var(--color-apples)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "data-chart-single",
@@ -173,7 +200,9 @@
           "lineNumber": 16,
           "line": "<Spline />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "data-mark-data",
@@ -190,7 +219,9 @@
           "lineNumber": 25,
           "line": "<Spline x=\"date\" y=\"value\" data={temperatureData} stroke=\"var(--color-apples)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "data-primitive-data",
@@ -212,7 +243,9 @@
           "lineNumber": 26,
           "line": "<Circle cx=\"date\" cy=\"value\" data={temperatureData} r={5} fill=\"var(--color-apples)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "data-series-chart-data",
@@ -229,7 +262,9 @@
           "lineNumber": 25,
           "line": "<Spline seriesKey=\"apples\" stroke=\"var(--color-apples)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "data-series-separate-data",
@@ -246,7 +281,9 @@
           "lineNumber": 33,
           "line": "<Spline seriesKey=\"apples\" stroke=\"var(--color-apples)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "facet-annotation",
@@ -268,7 +305,9 @@
           "lineNumber": 41,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "facet-bars",
@@ -280,7 +319,9 @@
           "lineNumber": 36,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-18T18:09:40.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-brush",
@@ -302,7 +343,9 @@
           "lineNumber": 44,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-brush-band",
@@ -314,7 +357,9 @@
           "lineNumber": 37,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T12:46:36.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-brush-overview",
@@ -346,7 +391,9 @@
           "lineNumber": 76,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T12:46:36.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-brush-summary",
@@ -378,7 +425,9 @@
           "lineNumber": 84,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T12:46:36.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-brush-zoom",
@@ -395,7 +444,9 @@
           "lineNumber": 32,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T12:46:36.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-click",
@@ -407,7 +458,9 @@
           "lineNumber": 37,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-25T19:51:23.000Z",
+      "updatedAt": "2026-08-25T19:51:23.000Z"
     },
     {
       "name": "facet-click-panel",
@@ -429,7 +482,9 @@
           "lineNumber": 45,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-25T19:51:23.000Z",
+      "updatedAt": "2026-08-25T19:51:23.000Z"
     },
     {
       "name": "facet-color",
@@ -446,7 +501,9 @@
           "lineNumber": 27,
           "line": "<Circle cx=\"flipper_length_mm\" cy=\"body_mass_g\" r={2.5} fill=\"species\" fillOpacity={0.6} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-16T14:55:58.000Z"
     },
     {
       "name": "facet-composed",
@@ -488,7 +545,9 @@
           "lineNumber": 30,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-17T04:05:16.000Z"
     },
     {
       "name": "facet-grid",
@@ -505,7 +564,9 @@
           "lineNumber": 25,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-16T14:55:58.000Z"
     },
     {
       "name": "facet-lines",
@@ -522,7 +583,9 @@
           "lineNumber": 26,
           "line": "<Spline stroke=\"fruit\" class=\"stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-16T14:55:58.000Z"
     },
     {
       "name": "facet-non-faceted-marks",
@@ -544,7 +607,9 @@
           "lineNumber": 29,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "facet-spacing",
@@ -561,7 +626,9 @@
           "lineNumber": 35,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-16T14:55:58.000Z"
     },
     {
       "name": "facet-tooltip",
@@ -608,7 +675,9 @@
           "lineNumber": 34,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-26T18:20:53.000Z"
     },
     {
       "name": "facet-two-dimensional",
@@ -630,7 +699,9 @@
           "lineNumber": 30,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-15T17:24:19.000Z"
     },
     {
       "name": "facet-wrap",
@@ -657,7 +728,9 @@
           "lineNumber": 80,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T02:01:54.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "facet-x",
@@ -674,7 +747,9 @@
           "lineNumber": 24,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-15T17:24:19.000Z"
     },
     {
       "name": "facet-y",
@@ -691,7 +766,9 @@
           "lineNumber": 24,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:24:19.000Z",
+      "updatedAt": "2026-08-16T14:55:58.000Z"
     },
     {
       "name": "isometric-areas",
@@ -728,7 +805,9 @@
           "lineNumber": 71,
           "line": "<Area"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-columns",
@@ -760,7 +839,9 @@
           "lineNumber": 38,
           "line": "<Cell"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-heatmap",
@@ -792,7 +873,9 @@
           "lineNumber": 37,
           "line": "<Cell"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-pan-zoom",
@@ -834,7 +917,9 @@
           "lineNumber": 50,
           "line": "<Circle cx=\"x\" cy=\"y\" r={4} viewport class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-playground",
@@ -866,7 +951,9 @@
           "lineNumber": 116,
           "line": "<Cell x=\"x\" y=\"y\" fill=\"value\" insets={{ all: 1 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-scatter",
@@ -878,7 +965,9 @@
           "lineNumber": 13,
           "line": "<ScatterChart {data} x=\"x\" y=\"y\" xNice yNice view={isometric} padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-scatter-3d",
@@ -925,7 +1014,9 @@
           "lineNumber": 83,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-stacked-columns",
@@ -977,7 +1068,9 @@
           "lineNumber": 62,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "isometric-treemap",
@@ -1014,7 +1107,9 @@
           "lineNumber": 138,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "mixed-marks-with-stack",
@@ -1061,7 +1156,9 @@
           "lineNumber": 57,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T03:04:59.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "mixed-marks-with-stack-long-data",
@@ -1108,7 +1205,9 @@
           "lineNumber": 76,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T03:04:59.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     }
   ],
   "usage": [
@@ -1550,7 +1649,7 @@
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
       "path": "/docs/components/Axis/multiple-axis-same-placement-right",
-      "lineNumber": 7,
+      "lineNumber": 6,
       "line": "<Chart yDomain={[0, 100]} padding={defaultChartPadding({ right: 90 })} height={300}>"
     },
     {
@@ -2656,21 +2755,21 @@
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 14,
+      "lineNumber": 13,
       "line": "<Chart"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 14,
+      "lineNumber": 16,
       "line": "<Chart"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 39,
+      "lineNumber": 41,
       "line": "<Chart"
     },
     {
@@ -5754,5 +5853,5 @@
       "line": "<Chart"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:43.133Z"
+  "updatedAt": "2026-10-16T16:15:13.143Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/ChartGroup.json b/docs/src/examples/catalog/ChartGroup.json
index 33add86e30..82756c250a 100644
--- a/docs/src/examples/catalog/ChartGroup.json
+++ b/docs/src/examples/catalog/ChartGroup.json
@@ -16,7 +16,9 @@
           "lineNumber": 31,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-13T18:02:33.000Z",
+      "updatedAt": "2026-08-13T18:02:33.000Z"
     },
     {
       "name": "coordinated-views",
@@ -48,7 +50,9 @@
           "lineNumber": 47,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-18T18:09:40.000Z",
+      "updatedAt": "2026-08-18T18:09:40.000Z"
     },
     {
       "name": "faceted-group",
@@ -70,7 +74,9 @@
           "lineNumber": 58,
           "line": "<Tooltip.Root facetAll>"
         }
-      ]
+      ],
+      "createdAt": "2026-08-16T14:55:58.000Z",
+      "updatedAt": "2026-08-20T12:46:36.000Z"
     },
     {
       "name": "highlight-only",
@@ -87,7 +93,9 @@
           "lineNumber": 36,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-13T18:02:33.000Z",
+      "updatedAt": "2026-08-13T18:02:33.000Z"
     },
     {
       "name": "minimap",
@@ -129,7 +137,9 @@
           "lineNumber": 70,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-08-14T04:35:33.000Z",
+      "updatedAt": "2026-08-14T04:35:33.000Z"
     },
     {
       "name": "programmatic-control",
@@ -141,7 +151,9 @@
           "lineNumber": 87,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-13T18:02:33.000Z",
+      "updatedAt": "2026-08-13T18:02:33.000Z"
     },
     {
       "name": "synced-brushes",
@@ -188,7 +200,9 @@
           "lineNumber": 66,
           "line": "<Area line={{ class: 'stroke-2 stroke-(--chart-color)' }} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-14T04:35:33.000Z",
+      "updatedAt": "2026-08-27T02:37:19.000Z"
     },
     {
       "name": "synced-legend",
@@ -210,7 +224,9 @@
           "lineNumber": 26,
           "line": "<AreaChart {data} x=\"date\" {series} {padding} height={200} legend />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-14T17:22:22.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "synced-zoom",
@@ -227,10 +243,33 @@
           "lineNumber": 32,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-14T04:35:33.000Z",
+      "updatedAt": "2026-08-14T04:35:33.000Z"
     }
   ],
   "usage": [
+    {
+      "example": "compound-dual-axis-with-stacked-charts",
+      "component": "Chart",
+      "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
+      "lineNumber": 13,
+      "line": "<ChartGroup pointer={{ tooltip: false }}>"
+    },
+    {
+      "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "component": "Chart",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
+      "lineNumber": 18,
+      "line": "<ChartGroup pointer={{ tooltip: false }}>"
+    },
+    {
+      "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "component": "Chart",
+      "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
+      "lineNumber": 15,
+      "line": "<ChartGroup pointer={{ tooltip: false }}>"
+    },
     {
       "example": "facet-brush-overview",
       "component": "Chart",
@@ -302,5 +341,5 @@
       "line": "<ChartGroup>"
     }
   ],
-  "updatedAt": "2026-09-03T20:00:06.232Z"
+  "updatedAt": "2026-10-16T16:15:13.253Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Chord.json b/docs/src/examples/catalog/Chord.json
index 555cd80076..b75ae32668 100644
--- a/docs/src/examples/catalog/Chord.json
+++ b/docs/src/examples/catalog/Chord.json
@@ -36,7 +36,9 @@
           "lineNumber": 47,
           "line": "<ArcLabel"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "directed",
@@ -73,7 +75,9 @@
           "lineNumber": 48,
           "line": "<ArcLabel"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "gradient",
@@ -120,7 +124,9 @@
           "lineNumber": 134,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "hover",
@@ -162,7 +168,9 @@
           "lineNumber": 145,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "ticks",
@@ -204,7 +212,9 @@
           "lineNumber": 69,
           "line": "<text"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Circle.json b/docs/src/examples/catalog/Circle.json
index 4a34b93f40..be2202501e 100644
--- a/docs/src/examples/catalog/Circle.json
+++ b/docs/src/examples/catalog/Circle.json
@@ -26,7 +26,9 @@
           "lineNumber": 29,
           "line": "<Circle cx=\"date\" cy=\"value\" r={5} fill=\"category\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -58,7 +60,9 @@
           "lineNumber": 44,
           "line": "<Circle cx=\"date\" cy=\"value\" r={5} fill=\"value\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-mode",
@@ -85,7 +89,9 @@
           "lineNumber": 27,
           "line": "<Circle cx=\"date\" cy=\"value\" r={5} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "styling-using-attributes",
@@ -112,7 +118,9 @@
           "lineNumber": 14,
           "line": "<Circle cx={100} cy={100} r={20} fill=\"var(--color-surface-content)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-classes",
@@ -139,7 +147,9 @@
           "lineNumber": 14,
           "line": "<Circle cx={100} cy={100} r={20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-css-variables",
@@ -166,7 +176,9 @@
           "lineNumber": 14,
           "line": "<Circle cx={100} cy={100} r={20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
@@ -184,6 +196,20 @@
       "lineNumber": 121,
       "line": "<Circle"
     },
+    {
+      "example": "custom-marker",
+      "component": "AnnotationPoint",
+      "path": "/docs/components/AnnotationPoint/custom-marker",
+      "lineNumber": 37,
+      "line": "<Circle {...props} r={r + 4} class=\"fill-primary/20 stroke-primary\" />"
+    },
+    {
+      "example": "custom-marker",
+      "component": "AnnotationPoint",
+      "path": "/docs/components/AnnotationPoint/custom-marker",
+      "lineNumber": 38,
+      "line": "<Circle {...props} class=\"fill-primary stroke-surface-100\" strokeWidth={2} />"
+    },
     {
       "example": "playground",
       "component": "AnnotationPoint",
@@ -1242,5 +1268,5 @@
       "line": "<Circle cx={point.x} cy={point.y} r={4} class=\"fill-primary\" />"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:43.257Z"
+  "updatedAt": "2026-10-16T16:15:13.291Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/CircleLegend.json b/docs/src/examples/catalog/CircleLegend.json
index 5e9de9f1c9..4c9a14f85e 100644
--- a/docs/src/examples/catalog/CircleLegend.json
+++ b/docs/src/examples/catalog/CircleLegend.json
@@ -16,7 +16,9 @@
           "lineNumber": 7,
           "line": "<CircleLegend title=\"Population\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-08T22:40:53.000Z"
     },
     {
       "name": "label-placement",
@@ -28,7 +30,9 @@
           "lineNumber": 9,
           "line": "<CircleLegend {scale} title=\"Population\" tickFormat=\"metric\" labelPlacement=\"right\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-08T22:40:53.000Z"
     },
     {
       "name": "scale-types",
@@ -40,7 +44,9 @@
           "lineNumber": 12,
           "line": "<CircleLegend scale={sqrt} title=\"Sqrt\" tickFormat=\"metric\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-08T22:40:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/ClipPath.json b/docs/src/examples/catalog/ClipPath.json
index dccae10b92..b6574c72b3 100644
--- a/docs/src/examples/catalog/ClipPath.json
+++ b/docs/src/examples/catalog/ClipPath.json
@@ -31,7 +31,9 @@
           "lineNumber": 15,
           "line": "<Frame fill={pattern} class=\"stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-14T21:40:56.000Z",
+      "updatedAt": "2026-04-14T21:40:56.000Z"
     },
     {
       "name": "clip-snippet",
@@ -73,7 +75,9 @@
           "lineNumber": 15,
           "line": "<Frame fill={pattern} class=\"stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-15T15:23:20.000Z",
+      "updatedAt": "2026-04-15T15:23:20.000Z"
     },
     {
       "name": "inverted",
@@ -105,7 +109,9 @@
           "lineNumber": 15,
           "line": "<Frame fill={pattern} class=\"stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-14T21:40:56.000Z",
+      "updatedAt": "2026-04-14T21:40:56.000Z"
     },
     {
       "name": "use-id",
@@ -142,7 +148,9 @@
           "lineNumber": 23,
           "line": "<Frame fill={pattern} class=\"stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-15T15:23:20.000Z",
+      "updatedAt": "2026-04-15T15:23:20.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/ColorRamp.json b/docs/src/examples/catalog/ColorRamp.json
index 278736fe9e..eb7bcb352f 100644
--- a/docs/src/examples/catalog/ColorRamp.json
+++ b/docs/src/examples/catalog/ColorRamp.json
@@ -16,7 +16,9 @@
           "lineNumber": 24,
           "line": "<ColorRamp {interpolator} {width} {height} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pixelated",
@@ -33,7 +35,9 @@
           "lineNumber": 28,
           "line": "<ColorRamp {interpolator} {width} {height} {steps} class=\"[image-rendering:pixelated]\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "schemes",
@@ -50,7 +54,9 @@
           "lineNumber": 21,
           "line": "<ColorRamp"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Contour.json b/docs/src/examples/catalog/Contour.json
index 2e2e581326..b2363ccb29 100644
--- a/docs/src/examples/catalog/Contour.json
+++ b/docs/src/examples/catalog/Contour.json
@@ -26,7 +26,9 @@
           "lineNumber": 17,
           "line": "<Contour value={(x, y) => Math.sin(x) * Math.cos(y)} thresholds={20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "sampled-interactive",
@@ -53,7 +55,9 @@
           "lineNumber": 26,
           "line": "<Contour value={(x, y) => Math.sin(x) * Math.cos(y)} {thresholds} {blur} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "volcano-filled",
@@ -80,7 +84,9 @@
           "lineNumber": 20,
           "line": "<Contour data={volcano.values} width={volcano.width} height={volcano.height} thresholds={20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "volcano-filled-interactive",
@@ -107,7 +113,9 @@
           "lineNumber": 29,
           "line": "<Contour"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "volcano-isometric",
@@ -129,7 +137,9 @@
           "lineNumber": 57,
           "line": "<Contour"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "volcano-lines",
@@ -156,7 +166,9 @@
           "lineNumber": 14,
           "line": "<Contour"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/CustomMarksChart.json b/docs/src/examples/catalog/CustomMarksChart.json
new file mode 100644
index 0000000000..2436a13412
--- /dev/null
+++ b/docs/src/examples/catalog/CustomMarksChart.json
@@ -0,0 +1,6 @@
+{
+  "component": "CustomMarksChart",
+  "examples": [],
+  "usage": [],
+  "updatedAt": "2026-10-16T16:15:13.423Z"
+}
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Dagre.json b/docs/src/examples/catalog/Dagre.json
index b2b5eac687..e2cbefe3be 100644
--- a/docs/src/examples/catalog/Dagre.json
+++ b/docs/src/examples/catalog/Dagre.json
@@ -41,7 +41,9 @@
           "lineNumber": 76,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -83,7 +85,9 @@
           "lineNumber": 75,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "software-user-flow",
@@ -125,7 +129,9 @@
           "lineNumber": 81,
           "line": "<Rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tcp-state-diagram",
@@ -167,7 +173,9 @@
           "lineNumber": 80,
           "line": "<Rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Density.json b/docs/src/examples/catalog/Density.json
index 0879fed7d8..8b5afc7e25 100644
--- a/docs/src/examples/catalog/Density.json
+++ b/docs/src/examples/catalog/Density.json
@@ -31,7 +31,9 @@
           "lineNumber": 32,
           "line": "<Points r={1.5} class=\"fill-surface-content/50\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "basic",
@@ -63,7 +65,9 @@
           "lineNumber": 25,
           "line": "<Points r={1.5} class=\"fill-surface-content/50\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "stroke-only",
@@ -95,7 +99,9 @@
           "lineNumber": 31,
           "line": "<Points r={1.5} class=\"fill-surface-content/50\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "thresholds",
@@ -127,7 +133,9 @@
           "lineNumber": 32,
           "line": "<Points r={1.5} class=\"fill-surface-content/50\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "walmart",
@@ -164,7 +172,9 @@
           "lineNumber": 74,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "weighted",
@@ -201,7 +211,9 @@
           "lineNumber": 37,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Dodge.json b/docs/src/examples/catalog/Dodge.json
index 24b56daa9c..a94cca5570 100644
--- a/docs/src/examples/catalog/Dodge.json
+++ b/docs/src/examples/catalog/Dodge.json
@@ -26,7 +26,9 @@
           "lineNumber": 42,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "bank-failures",
@@ -58,7 +60,9 @@
           "lineNumber": 69,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "beeswarm",
@@ -85,7 +89,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "duration-bars-dense-lanes",
@@ -112,7 +118,9 @@
           "lineNumber": 57,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "grouped-horizontal",
@@ -139,7 +147,9 @@
           "lineNumber": 68,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "grouped-vertical",
@@ -166,7 +176,9 @@
           "lineNumber": 67,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "image-beeswarm",
@@ -193,7 +205,9 @@
           "lineNumber": 39,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "penguins",
@@ -220,7 +234,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "tech-layoffs",
@@ -252,7 +268,9 @@
           "lineNumber": 63,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "text-beeswarm",
@@ -279,7 +297,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "timeline",
@@ -316,7 +336,9 @@
           "lineNumber": 81,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "timeline-bidirectional",
@@ -348,7 +370,9 @@
           "lineNumber": 101,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "variable-radius",
@@ -375,7 +399,9 @@
           "lineNumber": 79,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Ellipse.json b/docs/src/examples/catalog/Ellipse.json
index 886b91d533..0411c5d948 100644
--- a/docs/src/examples/catalog/Ellipse.json
+++ b/docs/src/examples/catalog/Ellipse.json
@@ -26,7 +26,9 @@
           "lineNumber": 29,
           "line": "<Ellipse cx=\"date\" cy=\"value\" rx={12} ry={6} fill=\"category\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -58,7 +60,9 @@
           "lineNumber": 44,
           "line": "<Ellipse cx=\"date\" cy=\"value\" rx={12} ry={6} fill=\"value\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-mode",
@@ -85,7 +89,9 @@
           "lineNumber": 27,
           "line": "<Ellipse cx=\"date\" cy=\"value\" rx={12} ry={6} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "styling-using-attributes",
@@ -112,7 +118,9 @@
           "lineNumber": 14,
           "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} fill=\"var(--color-surface-content)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-classes",
@@ -139,7 +147,9 @@
           "lineNumber": 14,
           "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-css-variables",
@@ -166,7 +176,9 @@
           "lineNumber": 14,
           "line": "<Ellipse cx={100} cy={100} rx={20} ry={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/ForceSimulation.json b/docs/src/examples/catalog/ForceSimulation.json
index ec4307c5b8..e96f33e4f6 100644
--- a/docs/src/examples/catalog/ForceSimulation.json
+++ b/docs/src/examples/catalog/ForceSimulation.json
@@ -36,7 +36,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "collision-detection",
@@ -68,7 +70,9 @@
           "lineNumber": 60,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "disjoint-graph",
@@ -100,7 +104,9 @@
           "lineNumber": 78,
           "line": "<Circle cx={node.x} cy={node.y} r={3} fill={colorScale(node.group.toString())} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "games-industry-layoffs",
@@ -142,7 +148,9 @@
           "lineNumber": 86,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "graph-drag",
@@ -179,7 +187,9 @@
           "lineNumber": 141,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "graph-playground",
@@ -216,7 +226,9 @@
           "lineNumber": 196,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "group",
@@ -243,7 +255,9 @@
           "lineNumber": 73,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "lattice",
@@ -275,7 +289,9 @@
           "lineNumber": 47,
           "line": "<Circle cx={node.x} cy={node.y} r={3} class=\"fill-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "layoffs-by-industry",
@@ -312,7 +328,9 @@
           "lineNumber": 132,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-05T17:25:23.000Z",
+      "updatedAt": "2026-05-05T17:51:04.000Z"
     },
     {
       "name": "text",
@@ -339,7 +357,9 @@
           "lineNumber": 104,
           "line": "<Points data={nodes.slice(1)} r={config.radius} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tree",
@@ -376,7 +396,9 @@
           "lineNumber": 68,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Frame.json b/docs/src/examples/catalog/Frame.json
index 02e4ae2a16..47740bf9bb 100644
--- a/docs/src/examples/catalog/Frame.json
+++ b/docs/src/examples/catalog/Frame.json
@@ -26,7 +26,9 @@
           "lineNumber": 13,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "border",
@@ -53,7 +55,9 @@
           "lineNumber": 13,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "full",
@@ -80,7 +84,9 @@
           "lineNumber": 13,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "gradient",
@@ -112,7 +118,9 @@
           "lineNumber": 17,
           "line": "<Axis placement=\"bottom\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoCircle.json b/docs/src/examples/catalog/GeoCircle.json
index b9b0a81498..9ab7f13a59 100644
--- a/docs/src/examples/catalog/GeoCircle.json
+++ b/docs/src/examples/catalog/GeoCircle.json
@@ -36,7 +36,9 @@
           "lineNumber": 83,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -68,7 +70,9 @@
           "lineNumber": 78,
           "line": "<GeoCircle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoClipPath.json b/docs/src/examples/catalog/GeoClipPath.json
index 0044946aa1..c2f090364f 100644
--- a/docs/src/examples/catalog/GeoClipPath.json
+++ b/docs/src/examples/catalog/GeoClipPath.json
@@ -31,7 +31,9 @@
           "lineNumber": 29,
           "line": "<GeoPath geojson={feature} class=\"fill-none stroke-surface-content/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-12T22:42:54.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoLegend.json b/docs/src/examples/catalog/GeoLegend.json
index dd324e1316..8e5136c8e9 100644
--- a/docs/src/examples/catalog/GeoLegend.json
+++ b/docs/src/examples/catalog/GeoLegend.json
@@ -26,7 +26,9 @@
           "lineNumber": 34,
           "line": "<GeoLegend title=\"Miles\" units=\"mi\" placement=\"bottom-left\" class=\"m-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "canvas-mode",
@@ -53,7 +55,9 @@
           "lineNumber": 34,
           "line": "<GeoLegend units=\"mi\" placement=\"bottom-left\" class=\"m-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "stacked-units",
@@ -80,7 +84,9 @@
           "lineNumber": 32,
           "line": "<GeoLegend units=\"km\" labelPlacement=\"top\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tick-format",
@@ -107,7 +113,9 @@
           "lineNumber": 31,
           "line": "<GeoLegend units=\"km\" tickFormat=\"metric\" placement=\"bottom-left\" class=\"m-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "ticks",
@@ -134,7 +142,9 @@
           "lineNumber": 31,
           "line": "<GeoLegend units=\"mi\" ticks={1} placement=\"bottom-left\" class=\"m-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "variants",
@@ -161,7 +171,9 @@
           "lineNumber": 30,
           "line": "<GeoLegend {variant} units=\"mi\" placement=\"bottom-left\" class=\"m-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T22:40:53.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoPath.json b/docs/src/examples/catalog/GeoPath.json
index 0fd6bfb4f4..de8f8e9ebd 100644
--- a/docs/src/examples/catalog/GeoPath.json
+++ b/docs/src/examples/catalog/GeoPath.json
@@ -36,7 +36,9 @@
           "lineNumber": 161,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "bubble-map",
@@ -83,7 +85,9 @@
           "lineNumber": 142,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "choropleth",
@@ -115,7 +119,9 @@
           "lineNumber": 109,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "eclipses-globe",
@@ -152,7 +158,9 @@
           "lineNumber": 94,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "election-isometric",
@@ -179,7 +187,9 @@
           "lineNumber": 81,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "interpolating-projections",
@@ -206,7 +216,9 @@
           "lineNumber": 183,
           "line": "<Graticule class=\"stroke-surface-content/10\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-03T05:11:09.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "paint-brush-selection",
@@ -243,7 +255,9 @@
           "lineNumber": 451,
           "line": "<Path"
         }
-      ]
+      ],
+      "createdAt": "2026-04-14T03:50:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "sketchy-globe",
@@ -270,7 +284,9 @@
           "lineNumber": 58,
           "line": "<Graticule class=\"stroke-surface-content/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "spike-map",
@@ -302,7 +318,9 @@
           "lineNumber": 119,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "submarine-cables-globe",
@@ -344,7 +362,9 @@
           "lineNumber": 96,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "timezones",
@@ -391,7 +411,9 @@
           "lineNumber": 137,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tooltip",
@@ -423,7 +445,9 @@
           "lineNumber": 48,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "transform-canvas",
@@ -450,7 +474,9 @@
           "lineNumber": 126,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "transform-canvas-scale-extent",
@@ -472,7 +498,9 @@
           "lineNumber": 38,
           "line": "<GeoPath"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "transform-globe-constrain",
@@ -499,7 +527,9 @@
           "lineNumber": 39,
           "line": "<Graticule class=\"stroke-surface-content/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "transform-globe-inertia",
@@ -526,7 +556,9 @@
           "lineNumber": 53,
           "line": "<Graticule class=\"stroke-surface-content/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "transform-projection",
@@ -553,7 +585,9 @@
           "lineNumber": 124,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "transform-world-canvas",
@@ -585,7 +619,9 @@
           "lineNumber": 117,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "transform-world-projection",
@@ -617,7 +653,9 @@
           "lineNumber": 127,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "translucent-globe",
@@ -654,7 +692,9 @@
           "lineNumber": 80,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-country-map",
@@ -681,7 +721,9 @@
           "lineNumber": 40,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-09-03T14:20:08.000Z"
     },
     {
       "name": "us-state",
@@ -703,7 +745,9 @@
           "lineNumber": 48,
           "line": "<GeoPath geojson={selectedStateFeature} class=\"stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-state-with-counties",
@@ -730,7 +774,9 @@
           "lineNumber": 66,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-state-with-surrounding-states",
@@ -762,7 +808,9 @@
           "lineNumber": 71,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoPoint.json b/docs/src/examples/catalog/GeoPoint.json
index f22c2a936f..76c2acd089 100644
--- a/docs/src/examples/catalog/GeoPoint.json
+++ b/docs/src/examples/catalog/GeoPoint.json
@@ -41,7 +41,9 @@
           "lineNumber": 58,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-airports",
@@ -73,7 +75,9 @@
           "lineNumber": 64,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-state-capitals",
@@ -110,7 +114,9 @@
           "lineNumber": 40,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "world-airports",
@@ -142,7 +148,9 @@
           "lineNumber": 61,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "world-capitals",
@@ -179,7 +187,9 @@
           "lineNumber": 68,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoProjection.json b/docs/src/examples/catalog/GeoProjection.json
index 0c94e0d79c..cfed14ce01 100644
--- a/docs/src/examples/catalog/GeoProjection.json
+++ b/docs/src/examples/catalog/GeoProjection.json
@@ -31,7 +31,9 @@
           "lineNumber": 127,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "projection-playground",
@@ -63,7 +65,9 @@
           "lineNumber": 85,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "satellite",
@@ -90,7 +94,9 @@
           "lineNumber": 57,
           "line": "<Graticule class=\"stroke-surface-content/10\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "shapefile-preview",
@@ -112,7 +118,9 @@
           "lineNumber": 125,
           "line": "<GeoPath {geojson} fill=\"white\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-06T14:51:07.000Z"
     },
     {
       "name": "topojson-preview",
@@ -144,7 +152,9 @@
           "lineNumber": 134,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "true-size",
@@ -171,7 +181,9 @@
           "lineNumber": 292,
           "line": "<GeoPath geojson={feature} class=\"stroke-surface-content/20 fill-surface-200\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-02T13:05:35.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "true-size-globe",
@@ -208,7 +220,9 @@
           "lineNumber": 422,
           "line": "<GeoProjection"
         }
-      ]
+      ],
+      "createdAt": "2026-04-13T20:16:01.000Z",
+      "updatedAt": "2026-08-25T17:48:30.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoRaster.json b/docs/src/examples/catalog/GeoRaster.json
index fbb74560a5..1f0c5e2475 100644
--- a/docs/src/examples/catalog/GeoRaster.json
+++ b/docs/src/examples/catalog/GeoRaster.json
@@ -31,7 +31,9 @@
           "lineNumber": 45,
           "line": "<Graticule class=\"stroke-surface-content/15\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T16:43:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "planets",
@@ -63,7 +65,9 @@
           "lineNumber": 96,
           "line": "<Graticule class=\"stroke-surface-content/10\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T16:43:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "projections",
@@ -95,7 +99,9 @@
           "lineNumber": 62,
           "line": "<Graticule class=\"stroke-surface-content/15\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T16:43:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "textures",
@@ -127,7 +133,9 @@
           "lineNumber": 173,
           "line": "<Graticule class=\"stroke-surface-content/10\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T16:43:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tiles-globe",
@@ -159,7 +167,9 @@
           "lineNumber": 113,
           "line": "<Graticule class=\"stroke-surface-content/15\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-07T16:43:26.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoSpline.json b/docs/src/examples/catalog/GeoSpline.json
index 0eed21f705..98078e1e9a 100644
--- a/docs/src/examples/catalog/GeoSpline.json
+++ b/docs/src/examples/catalog/GeoSpline.json
@@ -41,7 +41,9 @@
           "lineNumber": 38,
           "line": "<GeoSpline {link} class=\"stroke-gray-500/30 stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "world-map",
@@ -78,7 +80,9 @@
           "lineNumber": 48,
           "line": "<GeoPoint lat={link.source[1]} long={link.source[0]} r={2} class=\"fill-black\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/GeoTile.json b/docs/src/examples/catalog/GeoTile.json
index 23e6b2749e..3e62f7c5c1 100644
--- a/docs/src/examples/catalog/GeoTile.json
+++ b/docs/src/examples/catalog/GeoTile.json
@@ -31,7 +31,9 @@
           "lineNumber": 59,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "clipped",
@@ -68,7 +70,9 @@
           "lineNumber": 58,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "zoomable",
@@ -100,7 +104,9 @@
           "lineNumber": 82,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "zoomable-seamless-layers",
@@ -132,7 +138,9 @@
           "lineNumber": 89,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "zoomable-with-padding",
@@ -164,7 +172,9 @@
           "lineNumber": 88,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Graticule.json b/docs/src/examples/catalog/Graticule.json
index 51b3eeef32..e1291c6e71 100644
--- a/docs/src/examples/catalog/Graticule.json
+++ b/docs/src/examples/catalog/Graticule.json
@@ -31,7 +31,9 @@
           "lineNumber": 71,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Grid.json b/docs/src/examples/catalog/Grid.json
index bbb9ee377d..ce899f86e2 100644
--- a/docs/src/examples/catalog/Grid.json
+++ b/docs/src/examples/catalog/Grid.json
@@ -26,7 +26,9 @@
           "lineNumber": 12,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "band-scale-default",
@@ -53,7 +55,9 @@
           "lineNumber": 12,
           "line": "<Axis placement=\"bottom\" rule />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "basic",
@@ -75,7 +79,9 @@
           "lineNumber": 7,
           "line": "<Grid x y />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "dashed-lines",
@@ -97,7 +103,9 @@
           "lineNumber": 7,
           "line": "<Grid y={{ dashArray: [6, 4] }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "explicit-ticks",
@@ -124,7 +132,9 @@
           "lineNumber": 8,
           "line": "<Axis placement=\"left\" rule ticks={[0, 50, 100]} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "inject-tick-value",
@@ -151,7 +161,9 @@
           "lineNumber": 8,
           "line": "<Axis placement=\"left\" rule ticks={(scale) => [45, ...(scale.ticks?.() ?? [])]} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "integer-only",
@@ -178,7 +190,9 @@
           "lineNumber": 8,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "padding",
@@ -200,7 +214,9 @@
           "lineNumber": 12,
           "line": "<Grid x y />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial",
@@ -222,7 +238,9 @@
           "lineNumber": 7,
           "line": "<Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radial-linear",
@@ -244,7 +262,9 @@
           "lineNumber": 7,
           "line": "<Grid x xTicks={(scale) => scale.ticks?.().splice(1)} y radialY=\"linear\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tick-count",
@@ -271,7 +291,9 @@
           "lineNumber": 8,
           "line": "<Axis placement=\"left\" rule ticks={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tick-count-null",
@@ -298,7 +320,9 @@
           "lineNumber": 8,
           "line": "<Axis placement=\"left\" rule ticks={null} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "x-only",
@@ -320,7 +344,9 @@
           "lineNumber": 7,
           "line": "<Grid x />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "y-only",
@@ -342,7 +368,9 @@
           "lineNumber": 7,
           "line": "<Grid y />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Group.json b/docs/src/examples/catalog/Group.json
index cc1ef6b52b..4c39d3b875 100644
--- a/docs/src/examples/catalog/Group.json
+++ b/docs/src/examples/catalog/Group.json
@@ -36,7 +36,9 @@
           "lineNumber": 14,
           "line": "<Text value=\"point\" textAnchor=\"middle\" verticalAnchor=\"start\" class=\"text-xs\" dy={12} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "data-mode",
@@ -73,7 +75,9 @@
           "lineNumber": 27,
           "line": "<Text value=\"label\" textAnchor=\"middle\" dy={-8} class=\"text-xs fill-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "series-state",
@@ -100,7 +104,9 @@
           "lineNumber": 35,
           "line": "<Text value={s.key} dx={8} dy={4} class=\"text-xs fill-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-09T14:47:19.000Z",
+      "updatedAt": "2026-09-09T14:47:19.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Highlight.json b/docs/src/examples/catalog/Highlight.json
index dbe1c74216..94985a5a8f 100644
--- a/docs/src/examples/catalog/Highlight.json
+++ b/docs/src/examples/catalog/Highlight.json
@@ -342,29 +342,29 @@
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 48,
+      "lineNumber": 47,
       "line": "<Highlight lines points />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 49,
+      "lineNumber": 48,
       "line": "<Highlight points={{ class: 'fill-secondary' }} y={(d) => context.y1Scale?.(d.efficiency)} />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 34,
+      "lineNumber": 36,
       "line": "<Highlight lines points />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 56,
-      "line": "<Highlight lines />"
+      "lineNumber": 57,
+      "line": "<Highlight points={{ class: 'fill-secondary' }} />"
     },
     {
       "example": "facet-tooltip",
@@ -703,5 +703,5 @@
       "line": "<Highlight lines axis=\"x\" />"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:43.721Z"
+  "updatedAt": "2026-10-16T16:15:13.997Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Hull.json b/docs/src/examples/catalog/Hull.json
index e5669ccac5..7273a10d2f 100644
--- a/docs/src/examples/catalog/Hull.json
+++ b/docs/src/examples/catalog/Hull.json
@@ -41,7 +41,9 @@
           "lineNumber": 49,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "scatter",
@@ -73,7 +75,9 @@
           "lineNumber": 41,
           "line": "<Hull"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T13:13:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Image.json b/docs/src/examples/catalog/Image.json
index b845a49061..ce22b2593a 100644
--- a/docs/src/examples/catalog/Image.json
+++ b/docs/src/examples/catalog/Image.json
@@ -36,7 +36,9 @@
           "lineNumber": 95,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "country-flags",
@@ -63,7 +65,9 @@
           "lineNumber": 29,
           "line": "<Image"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "pixel-mode",
@@ -85,7 +89,9 @@
           "lineNumber": 7,
           "line": "<Image"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "planets",
@@ -112,7 +118,9 @@
           "lineNumber": 66,
           "line": "<Image"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "sports-logos",
@@ -139,7 +147,9 @@
           "lineNumber": 80,
           "line": "<Image"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "us-presidents",
@@ -166,7 +176,9 @@
           "lineNumber": 23,
           "line": "<Image"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Labels.json b/docs/src/examples/catalog/Labels.json
index aa9c678221..3fa4f93423 100644
--- a/docs/src/examples/catalog/Labels.json
+++ b/docs/src/examples/catalog/Labels.json
@@ -31,7 +31,9 @@
           "lineNumber": 71,
           "line": "<Labels"
         }
-      ]
+      ],
+      "createdAt": "2026-08-06T00:21:20.000Z",
+      "updatedAt": "2026-08-06T00:21:20.000Z"
     },
     {
       "name": "voronoi-geo",
@@ -63,7 +65,9 @@
           "lineNumber": 101,
           "line": "<Labels"
         }
-      ]
+      ],
+      "createdAt": "2026-08-06T00:21:20.000Z",
+      "updatedAt": "2026-08-06T02:50:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Layer.json b/docs/src/examples/catalog/Layer.json
index 7fd268eba1..5c9023bba5 100644
--- a/docs/src/examples/catalog/Layer.json
+++ b/docs/src/examples/catalog/Layer.json
@@ -26,10 +26,19 @@
           "lineNumber": 12,
           "line": "<Arc"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
+    {
+      "example": "custom-label",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-label",
+      "lineNumber": 14,
+      "line": "<Layer type=\"html\" class=\"pointer-events-none\">"
+    },
     {
       "example": "band-scale-on-axis",
       "component": "AnnotationPoint",
@@ -79,6 +88,13 @@
       "lineNumber": 110,
       "line": "<Layer>"
     },
+    {
+      "example": "custom-label",
+      "component": "AnnotationRange",
+      "path": "/docs/components/AnnotationRange/custom-label",
+      "lineNumber": 20,
+      "line": "<Layer type=\"html\" class=\"pointer-events-none\">"
+    },
     {
       "example": "clock",
       "component": "Arc",
@@ -517,7 +533,7 @@
       "example": "multiple-axis-same-placement-right",
       "component": "Axis",
       "path": "/docs/components/Axis/multiple-axis-same-placement-right",
-      "lineNumber": 9,
+      "lineNumber": 7,
       "line": "<Layer>"
     },
     {
@@ -1595,21 +1611,21 @@
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 27,
+      "lineNumber": 26,
       "line": "<Layer>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 23,
+      "lineNumber": 25,
       "line": "<Layer>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 46,
+      "lineNumber": 48,
       "line": "<Layer>"
     },
     {
@@ -4546,5 +4562,5 @@
       "line": "<Layer onpointermove={onPointerMove}>"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:43.809Z"
+  "updatedAt": "2026-10-16T16:15:14.129Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Legend.json b/docs/src/examples/catalog/Legend.json
index 386e3d30ff..59406617d4 100644
--- a/docs/src/examples/catalog/Legend.json
+++ b/docs/src/examples/catalog/Legend.json
@@ -16,7 +16,9 @@
           "lineNumber": 13,
           "line": "<Legend title=\"I am Legend\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "chart-placement",
@@ -33,7 +35,9 @@
           "lineNumber": 13,
           "line": "<Legend title=\"Top-Left\" placement=\"top-left\" variant=\"swatches\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "children-override",
@@ -45,7 +49,9 @@
           "lineNumber": 7,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "click-handler",
@@ -57,7 +63,9 @@
           "lineNumber": 7,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "diverging",
@@ -69,7 +77,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "diverging-sqrt",
@@ -81,7 +91,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "ordinal",
@@ -93,7 +105,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T06:44:56.000Z"
     },
     {
       "name": "quantile",
@@ -105,7 +119,9 @@
           "lineNumber": 12,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "quantize",
@@ -117,7 +133,9 @@
           "lineNumber": 8,
           "line": "<Legend scale={scaleQuantize([1, 10], schemePurples[9])} title=\"Unemployment rate (%)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "responsive-swatches",
@@ -129,7 +147,9 @@
           "lineNumber": 7,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sequential",
@@ -141,7 +161,9 @@
           "lineNumber": 8,
           "line": "<Legend scale={scaleSequential([0, 100], interpolateViridis)} title=\"Temperature (°F)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sequential-log",
@@ -153,7 +175,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sequential-quantile",
@@ -165,7 +189,9 @@
           "lineNumber": 11,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sequential-sqrt",
@@ -177,7 +203,9 @@
           "lineNumber": 8,
           "line": "<Legend scale={scaleSequentialSqrt([0, 1], interpolateTurbo)} title=\"Speed (kts)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sqrt",
@@ -189,7 +217,9 @@
           "lineNumber": 7,
           "line": "<Legend scale={scaleSqrt([-100, 0, 100], ['blue', 'white', 'red'])} title=\"Temperature (°C)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "square-swatch",
@@ -201,7 +231,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling",
@@ -213,7 +245,9 @@
           "lineNumber": 7,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "threshold",
@@ -225,7 +259,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical-orientation",
@@ -237,7 +273,9 @@
           "lineNumber": 8,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Line.json b/docs/src/examples/catalog/Line.json
index 977d33b24c..d5cdb3c57c 100644
--- a/docs/src/examples/catalog/Line.json
+++ b/docs/src/examples/catalog/Line.json
@@ -31,7 +31,9 @@
           "lineNumber": 31,
           "line": "<Circle cx=\"date\" cy=\"value\" r={4} fill=\"category\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -68,7 +70,9 @@
           "lineNumber": 45,
           "line": "<Circle cx=\"date\" cy=\"value\" r={4} fill=\"value\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-mode",
@@ -100,7 +104,9 @@
           "lineNumber": 29,
           "line": "<Circle cx=\"date\" cy=\"value\" r={4} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "styling-using-attributes",
@@ -127,7 +133,9 @@
           "lineNumber": 14,
           "line": "<Line x1={100} y1={100} x2={200} y2={200} strokeWidth={10} stroke=\"var(--color-primary)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-classes",
@@ -154,7 +162,9 @@
           "lineNumber": 14,
           "line": "<Line x1={100} y1={100} x2={200} y2={200} strokeWidth={10} class=\"stroke-primary bg-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-css-variables",
@@ -181,10 +191,26 @@
           "lineNumber": 14,
           "line": "<Line"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
+    {
+      "example": "custom-line",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-line",
+      "lineNumber": 17,
+      "line": "<Line {...props} stroke=\"var(--color-surface-100)\" strokeWidth={6} />"
+    },
+    {
+      "example": "custom-line",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-line",
+      "lineNumber": 18,
+      "line": "<Line {...props} stroke=\"var(--color-danger)\" strokeWidth={2} dashArray={[6, 4]} />"
+    },
     {
       "example": "clock",
       "component": "Arc",
@@ -473,5 +499,5 @@
       "line": "<line x1={0} y1={0} x2={0} y2={-len} class=\"stroke-success\" stroke-width={2} />"
     }
   ],
-  "updatedAt": "2026-05-05T17:36:02.034Z"
+  "updatedAt": "2026-10-16T16:15:14.178Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/LineChart.json b/docs/src/examples/catalog/LineChart.json
index b0b7901ee7..314b77cc8c 100644
--- a/docs/src/examples/catalog/LineChart.json
+++ b/docs/src/examples/catalog/LineChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "basic",
@@ -23,7 +25,9 @@
           "lineNumber": 9,
           "line": "<LineChart {data} x=\"date\" y=\"value\" padding={defaultChartPadding({ right: 10 })} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "brush",
@@ -35,7 +39,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "brush-pan-zoom",
@@ -47,7 +53,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "bump-state-population-ranks",
@@ -89,7 +97,9 @@
           "lineNumber": 160,
           "line": "<text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-02T19:13:52.000Z",
+      "updatedAt": "2026-04-02T19:13:52.000Z"
     },
     {
       "name": "curve",
@@ -101,7 +111,9 @@
           "lineNumber": 10,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom",
@@ -138,7 +150,9 @@
           "lineNumber": 27,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom-tooltip",
@@ -155,7 +169,9 @@
           "lineNumber": 12,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "default-series-label",
@@ -167,7 +183,9 @@
           "lineNumber": 14,
           "line": "<LineChart {data} x=\"date\" y=\"visits\" padding={defaultChartPadding({ right: 10 })} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "draw",
@@ -179,7 +197,9 @@
           "lineNumber": 18,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "dynamic-data",
@@ -191,7 +211,9 @@
           "lineNumber": 17,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "gradient-encoding",
@@ -213,7 +235,9 @@
           "lineNumber": 29,
           "line": "<Spline stroke={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "gradient-threshold",
@@ -245,7 +269,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "labels",
@@ -257,7 +283,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels-with-points",
@@ -269,7 +297,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels-within-points",
@@ -281,7 +311,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "large-radial-series",
@@ -293,7 +325,9 @@
           "lineNumber": 13,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "large-series",
@@ -305,7 +339,9 @@
           "lineNumber": 13,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "legend",
@@ -317,7 +353,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "line-annotation",
@@ -329,7 +367,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "long-data",
@@ -341,7 +381,9 @@
           "lineNumber": 16,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-19T14:08:02.000Z",
+      "updatedAt": "2026-08-19T14:08:02.000Z"
     },
     {
       "name": "motion-tween",
@@ -353,7 +395,9 @@
           "lineNumber": 16,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "null-dashed-gaps",
@@ -370,7 +414,9 @@
           "lineNumber": 17,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-25T17:48:30.000Z"
     },
     {
       "name": "null-gaps",
@@ -382,7 +428,9 @@
           "lineNumber": 14,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "oscilloscope-time",
@@ -414,7 +462,9 @@
           "lineNumber": 118,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "override-color",
@@ -426,7 +476,9 @@
           "lineNumber": 14,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pan-zoom",
@@ -438,7 +490,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "pan-zoom-custom-constrain",
@@ -450,7 +504,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "pan-zoom-domain-extent",
@@ -462,7 +518,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "pan-zoom-dynamic-data",
@@ -474,7 +532,9 @@
           "lineNumber": 56,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "pan-zoom-with-overview",
@@ -501,7 +561,9 @@
           "lineNumber": 54,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "perf-dimension-arrays",
@@ -513,7 +575,9 @@
           "lineNumber": 55,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "perf-dimension-arrays-processed",
@@ -525,7 +589,9 @@
           "lineNumber": 61,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "perf-series-arrays",
@@ -537,7 +603,9 @@
           "lineNumber": 54,
           "line": "<LineChart data={data.cpu} x=\"x\" y=\"y\" props={chartProps} brush profile />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "perf-streaming",
@@ -549,7 +617,9 @@
           "lineNumber": 131,
           "line": "<LineChart x=\"date\" y=\"value\" data={chartData} brush />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "perf-wide-data",
@@ -561,7 +631,9 @@
           "lineNumber": 54,
           "line": "<LineChart {data} x=\"epoch\" y={(d) => 100 - d.idl} props={chartProps} brush profile />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "perf-wide-data-processed",
@@ -573,7 +645,9 @@
           "lineNumber": 61,
           "line": "<LineChart data={chartData} x=\"date\" y=\"cpu\" props={chartProps} brush profile />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-07-01T13:37:08.000Z"
     },
     {
       "name": "persist-brush-zoom",
@@ -600,7 +674,9 @@
           "lineNumber": 86,
           "line": "<Area line={{ class: 'stroke-2 stroke-primary' }} class=\"fill-primary/20\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-09T04:27:28.000Z",
+      "updatedAt": "2026-08-17T18:59:37.000Z"
     },
     {
       "name": "persist-series",
@@ -612,7 +688,9 @@
           "lineNumber": 44,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-09T04:27:28.000Z",
+      "updatedAt": "2026-04-09T04:27:28.000Z"
     },
     {
       "name": "point-annotations",
@@ -629,7 +707,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "points",
@@ -641,7 +721,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radar",
@@ -653,7 +735,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radar-rounded",
@@ -665,7 +749,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radar-series",
@@ -677,7 +763,9 @@
           "lineNumber": 40,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation",
@@ -689,7 +777,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     },
     {
       "name": "series",
@@ -701,7 +791,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-brush",
@@ -713,7 +805,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-custom-highlight-point",
@@ -725,7 +819,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-individual-tooltip",
@@ -752,7 +848,9 @@
           "lineNumber": 64,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "series-labels-hover",
@@ -769,7 +867,9 @@
           "lineNumber": 34,
           "line": "<Labels seriesKey={context.series.highlightKey} offset={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "series-point-annotations",
@@ -781,7 +881,9 @@
           "lineNumber": 38,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-point-click",
@@ -793,7 +895,9 @@
           "lineNumber": 15,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-programmatic-control",
@@ -805,7 +909,9 @@
           "lineNumber": 44,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "series-separate-data",
@@ -817,7 +923,9 @@
           "lineNumber": 20,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-separate-data-diff-length",
@@ -829,7 +937,9 @@
           "lineNumber": 20,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-vertical",
@@ -841,7 +951,9 @@
           "lineNumber": 16,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-with-nulls",
@@ -858,7 +970,9 @@
           "lineNumber": 37,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "single-axis-x",
@@ -870,7 +984,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-y",
@@ -882,7 +998,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "smart-labels-with-points",
@@ -894,7 +1012,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T14:27:49.000Z",
+      "updatedAt": "2026-04-01T14:27:49.000Z"
     },
     {
       "name": "sparkline",
@@ -906,7 +1026,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkline-fixed-position-tooltip",
@@ -923,7 +1045,9 @@
           "lineNumber": 24,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkline-within-a-paragraph",
@@ -935,7 +1059,9 @@
           "lineNumber": 12,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkline-within-a-paragraph-with-tooltip-and-highlight",
@@ -952,7 +1078,9 @@
           "lineNumber": 29,
           "line": "<Tooltip.Root {context} class=\"text-xs\" contained={false} y={context.height + 4} xOffset={0}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "sparkline-zero-axis",
@@ -964,7 +1092,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "svelte-milestones",
@@ -986,7 +1116,9 @@
           "lineNumber": 100,
           "line": "<AnnotationPoint"
         }
-      ]
+      ],
+      "createdAt": "2026-04-23T03:41:53.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "threshold",
@@ -1018,7 +1150,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tooltip-click",
@@ -1030,7 +1164,9 @@
           "lineNumber": 9,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "vertical",
@@ -1042,10 +1178,26 @@
           "lineNumber": 10,
           "line": "<LineChart {data} x=\"value\" y=\"date\" orientation=\"vertical\" width={400} height={600} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
+    {
+      "example": "custom-label",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-label",
+      "lineNumber": 12,
+      "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+    },
+    {
+      "example": "custom-line",
+      "component": "AnnotationLine",
+      "path": "/docs/components/AnnotationLine/custom-line",
+      "lineNumber": 12,
+      "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+    },
     {
       "example": "horizontal",
       "component": "AnnotationLine",
@@ -1102,6 +1254,13 @@
       "lineNumber": 12,
       "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
     },
+    {
+      "example": "custom-marker",
+      "component": "AnnotationPoint",
+      "path": "/docs/components/AnnotationPoint/custom-marker",
+      "lineNumber": 20,
+      "line": "<LineChart {data} x=\"date\" y=\"value\" height={300} padding={{ top: 10, bottom: 20, left: 25 }}>"
+    },
     {
       "example": "line-to-point",
       "component": "AnnotationPoint",
@@ -1144,6 +1303,13 @@
       "lineNumber": 12,
       "line": "<LineChart"
     },
+    {
+      "example": "custom-label",
+      "component": "AnnotationRange",
+      "path": "/docs/components/AnnotationRange/custom-label",
+      "lineNumber": 12,
+      "line": "<LineChart"
+    },
     {
       "example": "hide-tooltip",
       "component": "AnnotationRange",
@@ -1817,5 +1983,5 @@
       "line": "<LineChart"
     }
   ],
-  "updatedAt": "2026-09-25T04:42:18.095Z"
+  "updatedAt": "2026-10-16T16:15:14.213Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/LinearGradient.json b/docs/src/examples/catalog/LinearGradient.json
index 1cb4df5499..b59f3befc9 100644
--- a/docs/src/examples/catalog/LinearGradient.json
+++ b/docs/src/examples/catalog/LinearGradient.json
@@ -26,7 +26,9 @@
           "lineNumber": 9,
           "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "explicit-offsets",
@@ -53,7 +55,9 @@
           "lineNumber": 14,
           "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tailwind-colors",
@@ -80,7 +84,9 @@
           "lineNumber": 10,
           "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "units",
@@ -107,7 +113,9 @@
           "lineNumber": 11,
           "line": "<Rect x={0 + i * 120} y={0} width={100} height={140} rx={8} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Link.json b/docs/src/examples/catalog/Link.json
index 7ad7903c70..f28e7d1760 100644
--- a/docs/src/examples/catalog/Link.json
+++ b/docs/src/examples/catalog/Link.json
@@ -36,7 +36,9 @@
           "lineNumber": 74,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-20T01:53:46.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "curves",
@@ -64,7 +66,9 @@
           "line": "<Circle cx={x1} cy={y1} r={4} class=\"fill-info\" />"
         }
       ],
-      "description": "When "
+      "description": "When ",
+      "createdAt": "2026-04-19T23:06:20.000Z",
+      "updatedAt": "2026-04-20T20:21:36.000Z"
     },
     {
       "name": "playground",
@@ -91,7 +95,9 @@
           "lineNumber": 77,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-05-09T00:54:24.000Z"
     },
     {
       "name": "types",
@@ -119,7 +125,9 @@
           "line": "<Circle cx={x1} cy={y1} r={4} class=\"fill-info\" />"
         }
       ],
-      "description": "Link supports several path types across cartesian and radial orientations."
+      "description": "Link supports several path types across cartesian and radial orientations.",
+      "createdAt": "2026-04-19T23:06:20.000Z",
+      "updatedAt": "2026-04-20T20:21:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Marker.json b/docs/src/examples/catalog/Marker.json
index 83e6ebb9f7..7923df527b 100644
--- a/docs/src/examples/catalog/Marker.json
+++ b/docs/src/examples/catalog/Marker.json
@@ -21,7 +21,9 @@
           "lineNumber": 41,
           "line": "<Line"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "orientation",
@@ -43,7 +45,9 @@
           "lineNumber": 37,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "spline",
@@ -65,7 +69,9 @@
           "lineNumber": 52,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "spline-w-thicker-stroke",
@@ -87,7 +93,9 @@
           "lineNumber": 44,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling",
@@ -109,7 +117,9 @@
           "lineNumber": 35,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [],
diff --git a/docs/src/examples/catalog/Month.json b/docs/src/examples/catalog/Month.json
index 00288ca2bd..718a874640 100644
--- a/docs/src/examples/catalog/Month.json
+++ b/docs/src/examples/catalog/Month.json
@@ -26,7 +26,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     },
     {
       "name": "basic",
@@ -53,7 +55,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     },
     {
       "name": "custom-cell-size",
@@ -80,7 +84,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     },
     {
       "name": "multiple-years",
@@ -107,7 +113,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     },
     {
       "name": "without-day-numbers",
@@ -134,7 +142,9 @@
           "lineNumber": 42,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     },
     {
       "name": "without-month-labels",
@@ -161,7 +171,9 @@
           "lineNumber": 42,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T17:24:28.000Z",
+      "updatedAt": "2026-04-01T17:24:28.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/MotionPath.json b/docs/src/examples/catalog/MotionPath.json
index 569fd4706b..c50b7b9cbb 100644
--- a/docs/src/examples/catalog/MotionPath.json
+++ b/docs/src/examples/catalog/MotionPath.json
@@ -36,7 +36,9 @@
           "lineNumber": 48,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "rotate-object-with-path",
@@ -73,7 +75,9 @@
           "lineNumber": 50,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "sync-with-draw",
@@ -110,7 +114,9 @@
           "lineNumber": 51,
           "line": "<Circle id={objectId} r={5} class=\"fill-surface-100 stroke-surface-content\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Pack.json b/docs/src/examples/catalog/Pack.json
index c7f8f37206..d85f5a45c3 100644
--- a/docs/src/examples/catalog/Pack.json
+++ b/docs/src/examples/catalog/Pack.json
@@ -36,7 +36,9 @@
           "lineNumber": 134,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Partition.json b/docs/src/examples/catalog/Partition.json
index 5086dd8c19..138ecfc1da 100644
--- a/docs/src/examples/catalog/Partition.json
+++ b/docs/src/examples/catalog/Partition.json
@@ -51,7 +51,9 @@
           "lineNumber": 145,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "flame-graph",
@@ -108,7 +110,9 @@
           "lineNumber": 176,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-07-21T18:21:59.000Z",
+      "updatedAt": "2026-07-21T18:23:36.000Z"
     },
     {
       "name": "horizontal",
@@ -160,7 +164,9 @@
           "lineNumber": 123,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "sunburst",
@@ -207,7 +213,9 @@
           "lineNumber": 136,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "vertical",
@@ -259,7 +267,9 @@
           "lineNumber": 123,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Path.json b/docs/src/examples/catalog/Path.json
index 4773e76163..e7a3460514 100644
--- a/docs/src/examples/catalog/Path.json
+++ b/docs/src/examples/catalog/Path.json
@@ -21,7 +21,9 @@
           "lineNumber": 7,
           "line": "<Path pathData=\"M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80\" strokeWidth={2} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Pattern.json b/docs/src/examples/catalog/Pattern.json
index 792d6f2fbd..a570c2e307 100644
--- a/docs/src/examples/catalog/Pattern.json
+++ b/docs/src/examples/catalog/Pattern.json
@@ -26,7 +26,9 @@
           "lineNumber": 9,
           "line": "<Rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-17T13:19:47.000Z"
     },
     {
       "name": "circles-custom-pattern-svg-only",
@@ -58,7 +60,9 @@
           "lineNumber": 52,
           "line": "<rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "lineargradient-as-pattern",
@@ -90,7 +94,9 @@
           "lineNumber": 11,
           "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "lines",
@@ -117,7 +123,9 @@
           "lineNumber": 9,
           "line": "<Rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-17T13:19:47.000Z"
     },
     {
       "name": "lines-custom-pattern-svg-only",
@@ -149,7 +157,9 @@
           "lineNumber": 13,
           "line": "<rect"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "rects",
@@ -176,7 +186,9 @@
           "lineNumber": 10,
           "line": "<Rect"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "with-fill-color",
@@ -203,7 +215,9 @@
           "lineNumber": 9,
           "line": "<Rect x={120 * 0} y={0} width={100} height={300} rx={8} fill={pattern} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "with-lineargradient",
@@ -235,7 +249,9 @@
           "lineNumber": 11,
           "line": "<Pattern size={4} circles={{ color: 'white', opacity: 0.5 }}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Pie.json b/docs/src/examples/catalog/Pie.json
index 0439509500..2606121803 100644
--- a/docs/src/examples/catalog/Pie.json
+++ b/docs/src/examples/catalog/Pie.json
@@ -21,7 +21,9 @@
           "lineNumber": 36,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "default-slot-render-each-arc",
@@ -48,7 +50,9 @@
           "lineNumber": 40,
           "line": "<Arc"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "disable-sorting",
@@ -70,7 +74,9 @@
           "lineNumber": 36,
           "line": "<Pie sort={null} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "inner-radius-negative",
@@ -92,7 +98,9 @@
           "lineNumber": 19,
           "line": "<Pie innerRadius={0.9} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "inner-radius-positive",
@@ -114,7 +122,9 @@
           "lineNumber": 19,
           "line": "<Pie innerRadius={100} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "inner-radius-zero-one",
@@ -136,7 +146,9 @@
           "lineNumber": 19,
           "line": "<Pie innerRadius={100} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "isometric",
@@ -173,7 +185,9 @@
           "lineNumber": 104,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels",
@@ -205,7 +219,9 @@
           "lineNumber": 31,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels-centroid",
@@ -237,7 +253,9 @@
           "lineNumber": 31,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels-centroid-multiple",
@@ -269,7 +287,9 @@
           "lineNumber": 35,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels-outer",
@@ -301,7 +321,9 @@
           "lineNumber": 31,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels-outer-radial",
@@ -333,7 +355,9 @@
           "lineNumber": 31,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "labels-outer-with-padding",
@@ -365,7 +389,9 @@
           "lineNumber": 31,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "multiple-data-prop",
@@ -387,7 +413,9 @@
           "lineNumber": 20,
           "line": "<Pie innerRadius={100} {data} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "offset",
@@ -409,7 +437,9 @@
           "lineNumber": 19,
           "line": "<Pie offset={4} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "outer-radius",
@@ -431,7 +461,9 @@
           "lineNumber": 19,
           "line": "<Pie outerRadius={100} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pad-angle",
@@ -453,7 +485,9 @@
           "lineNumber": 19,
           "line": "<Pie padAngle={0.05} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pad-angle-with-inner-radius",
@@ -475,7 +509,9 @@
           "lineNumber": 19,
           "line": "<Pie innerRadius={100} padAngle={0.03} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "partial-range-chart-xrange",
@@ -497,7 +533,9 @@
           "lineNumber": 19,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "partial-range-range-prop",
@@ -519,7 +557,9 @@
           "lineNumber": 19,
           "line": "<Pie range={[-90, 90]} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement",
@@ -541,7 +581,9 @@
           "lineNumber": 19,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-center",
@@ -563,7 +605,9 @@
           "lineNumber": 19,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-left",
@@ -590,7 +634,9 @@
           "lineNumber": 21,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-right",
@@ -617,7 +663,9 @@
           "lineNumber": 21,
           "line": "<Pie />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tooltip",
@@ -644,7 +692,9 @@
           "lineNumber": 23,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "tooltip-with-arcs-slot",
@@ -686,7 +736,9 @@
           "lineNumber": 69,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "tweened",
@@ -708,7 +760,9 @@
           "lineNumber": 25,
           "line": "<Pie motion=\"tween\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/PieChart.json b/docs/src/examples/catalog/PieChart.json
index 78f9f35739..75500e347e 100644
--- a/docs/src/examples/catalog/PieChart.json
+++ b/docs/src/examples/catalog/PieChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "arc-props",
@@ -23,7 +25,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "basic",
@@ -35,7 +39,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "colors-data-prop",
@@ -47,7 +53,9 @@
           "lineNumber": 21,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" c=\"color\" height={300} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "colors-interpolator",
@@ -59,7 +67,9 @@
           "lineNumber": 11,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={quantize(interpolateRainbow, 5)} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "colors-scheme",
@@ -71,7 +81,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={schemeTableau10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "colors-variables",
@@ -83,7 +95,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" height={300} cRange={fruitColors} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "donut",
@@ -95,7 +109,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "donut-with-text",
@@ -112,7 +128,9 @@
           "lineNumber": 23,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels",
@@ -124,7 +142,9 @@
           "lineNumber": 35,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T04:18:23.000Z",
+      "updatedAt": "2026-04-08T04:26:03.000Z"
     },
     {
       "name": "labels-callout",
@@ -136,7 +156,9 @@
           "lineNumber": 21,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-04-08T04:18:23.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "legend",
@@ -148,7 +170,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} legend />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-custom-label",
@@ -160,7 +184,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-placement",
@@ -172,7 +198,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} legend />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-programmatic-control",
@@ -184,7 +212,9 @@
           "lineNumber": 47,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-18T12:14:54.000Z",
+      "updatedAt": "2026-08-18T12:14:54.000Z"
     },
     {
       "name": "legend-responsive",
@@ -196,7 +226,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "legend-with-padding",
@@ -208,7 +240,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "motion-spring",
@@ -220,7 +254,9 @@
           "lineNumber": 17,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "motion-tween",
@@ -232,7 +268,9 @@
           "lineNumber": 17,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "offset-slice",
@@ -249,7 +287,9 @@
           "lineNumber": 12,
           "line": "<Arc {...props} offset={index === 1 ? 16 : undefined} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-custom",
@@ -261,7 +301,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-left",
@@ -273,7 +315,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "placement-right",
@@ -285,7 +329,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-fixed",
@@ -297,7 +343,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={100} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-offset",
@@ -309,7 +357,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={-20} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-percent",
@@ -321,7 +371,9 @@
           "lineNumber": 10,
           "line": "<PieChart {data} key=\"fruit\" value=\"value\" cRange={fruitColors} height={300} outerRadius={0.8} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "segments",
@@ -338,7 +390,9 @@
           "lineNumber": 37,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "series",
@@ -350,7 +404,9 @@
           "lineNumber": 11,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-click",
@@ -362,7 +418,9 @@
           "lineNumber": 11,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-props",
@@ -374,7 +432,9 @@
           "lineNumber": 11,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tooltip-click",
@@ -386,7 +446,9 @@
           "lineNumber": 10,
           "line": "<PieChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Point.json b/docs/src/examples/catalog/Point.json
index 5def4e6aa7..5ad5414e65 100644
--- a/docs/src/examples/catalog/Point.json
+++ b/docs/src/examples/catalog/Point.json
@@ -31,7 +31,9 @@
           "lineNumber": 24,
           "line": "<Circle cx={x} cy={y} r={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Points.json b/docs/src/examples/catalog/Points.json
index f479a97143..de6966b2ba 100644
--- a/docs/src/examples/catalog/Points.json
+++ b/docs/src/examples/catalog/Points.json
@@ -26,7 +26,9 @@
           "lineNumber": 14,
           "line": "<Points class=\"fill-primary/10 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-via-class",
@@ -53,7 +55,9 @@
           "lineNumber": 15,
           "line": "<Points class=\"fill-red-500\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-via-fill",
@@ -80,7 +84,9 @@
           "lineNumber": 15,
           "line": "<Points fill=\"red\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-via-ordinal-scale",
@@ -112,7 +118,9 @@
           "lineNumber": 31,
           "line": "<Points />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -144,7 +152,9 @@
           "lineNumber": 39,
           "line": "<Points />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "with-labels",
@@ -176,7 +186,9 @@
           "lineNumber": 15,
           "line": "<Labels format=\"integer\" offset={10} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "with-tooltip-and-highlight",
@@ -213,7 +225,9 @@
           "lineNumber": 27,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Polygon.json b/docs/src/examples/catalog/Polygon.json
index 922e55a462..ded926697c 100644
--- a/docs/src/examples/catalog/Polygon.json
+++ b/docs/src/examples/catalog/Polygon.json
@@ -21,7 +21,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "12-point-star",
@@ -43,7 +45,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "14-point-star",
@@ -65,7 +69,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "16-point-star",
@@ -87,7 +93,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "18-point-star",
@@ -109,7 +117,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "20-point-star",
@@ -131,7 +141,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "6-point-star",
@@ -153,7 +165,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "8-point-star",
@@ -175,7 +189,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "arrow",
@@ -202,7 +218,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "color-via-ordinal-scale",
@@ -229,7 +247,9 @@
           "lineNumber": 27,
           "line": "<Polygon cx=\"date\" cy=\"value\" r={8} points={6} fill=\"category\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -261,7 +281,9 @@
           "lineNumber": 42,
           "line": "<Polygon cx=\"date\" cy=\"value\" r={8} points={6} fill=\"value\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "cross",
@@ -288,7 +310,9 @@
           "lineNumber": 18,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "data-mode",
@@ -315,7 +339,9 @@
           "lineNumber": 25,
           "line": "<Polygon cx=\"date\" cy=\"value\" r={8} points={6} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "diamond",
@@ -337,7 +363,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "hexagon",
@@ -359,7 +387,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "octagon",
@@ -381,7 +411,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "parallelogram",
@@ -403,7 +435,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "pentagon",
@@ -425,7 +459,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "playground",
@@ -447,7 +483,9 @@
           "lineNumber": 24,
           "line": "<Polygon cx={context.width / 2} cy={context.height / 2} r={100} {...config} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "rectangle",
@@ -469,7 +507,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "rhombus",
@@ -491,7 +531,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "square",
@@ -513,7 +555,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "trapezoid",
@@ -535,7 +579,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "triangle",
@@ -557,7 +603,9 @@
           "lineNumber": 14,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/RadialGradient.json b/docs/src/examples/catalog/RadialGradient.json
index a1d3b29a23..9f79942cd3 100644
--- a/docs/src/examples/catalog/RadialGradient.json
+++ b/docs/src/examples/catalog/RadialGradient.json
@@ -26,7 +26,9 @@
           "lineNumber": 11,
           "line": "<Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "spreadmethod",
@@ -53,7 +55,9 @@
           "lineNumber": 11,
           "line": "<Circle cx={radius + 0 * 120} cy={radius} r={radius} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "tailwind-colors",
@@ -80,7 +84,9 @@
           "lineNumber": 19,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "units",
@@ -107,7 +113,9 @@
           "lineNumber": 12,
           "line": "<Circle cx={radius + i * 120} cy={radius} r={radius} fill={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Raster.json b/docs/src/examples/catalog/Raster.json
index 3b1d4da48f..5645c41a0b 100644
--- a/docs/src/examples/catalog/Raster.json
+++ b/docs/src/examples/catalog/Raster.json
@@ -26,7 +26,9 @@
           "lineNumber": 25,
           "line": "<Raster value={mandelbrot} pixelSize={2} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "math-functions",
@@ -58,7 +60,9 @@
           "lineNumber": 112,
           "line": "<Contour"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:45:20.000Z"
     },
     {
       "name": "sampled",
@@ -85,7 +89,9 @@
           "lineNumber": 17,
           "line": "<Raster value={(x, y) => Math.sin(x) * Math.cos(y)} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "us-water-vapor",
@@ -127,7 +133,9 @@
           "lineNumber": 66,
           "line": "<GeoPath geojson={nation} class=\"fill-none stroke-[#2f2f2f]\" strokeWidth={1.25} />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-01T03:22:51.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "volcano",
@@ -154,7 +162,9 @@
           "lineNumber": 20,
           "line": "<Raster data={volcano.values} width={volcano.width} height={volcano.height} />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "with-contour-overlay",
@@ -186,7 +196,9 @@
           "lineNumber": 21,
           "line": "<Contour"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Rect.json b/docs/src/examples/catalog/Rect.json
index 05709d9a3f..473044e839 100644
--- a/docs/src/examples/catalog/Rect.json
+++ b/docs/src/examples/catalog/Rect.json
@@ -26,7 +26,9 @@
           "lineNumber": 33,
           "line": "<Rect x0=\"x0\" y0={(d: any) => 0} x1=\"x1\" y1=\"count\" insets={{ x: 1 }} fill=\"group\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -58,7 +60,9 @@
           "lineNumber": 47,
           "line": "<Rect x0=\"x0\" y0={(d: any) => 0} x1=\"x1\" y1=\"count\" insets={{ x: 1 }} fill=\"count\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-mode-edge",
@@ -85,7 +89,9 @@
           "lineNumber": 30,
           "line": "<Rect x0=\"x0\" y0={(d: any) => 0} x1=\"x1\" y1=\"count\" insets={{ x: 1 }} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -112,7 +118,9 @@
           "lineNumber": 151,
           "line": "<Rect {...pixelPosition} {corners} fill=\"var(--color-primary)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-05-09T15:35:17.000Z",
+      "updatedAt": "2026-05-09T15:35:17.000Z"
     },
     {
       "name": "styling-using-attributes",
@@ -139,7 +147,9 @@
           "lineNumber": 14,
           "line": "<Rect x={50} y={50} width={100} height={150} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-classes",
@@ -166,7 +176,9 @@
           "lineNumber": 14,
           "line": "<Rect x={50} y={50} width={100} height={150} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "styling-using-css-variables",
@@ -193,7 +205,9 @@
           "lineNumber": 14,
           "line": "<Rect x={50} y={50} width={100} height={150} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Rule.json b/docs/src/examples/catalog/Rule.json
index eab7615198..7f76002596 100644
--- a/docs/src/examples/catalog/Rule.json
+++ b/docs/src/examples/catalog/Rule.json
@@ -26,7 +26,9 @@
           "lineNumber": 9,
           "line": "<Rule"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "annotation-y",
@@ -53,7 +55,9 @@
           "lineNumber": 9,
           "line": "<Rule"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "baseline-top-right",
@@ -80,7 +84,9 @@
           "lineNumber": 9,
           "line": "<Rule x=\"$right\" y=\"$top\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "baseline-x-negative",
@@ -107,7 +113,9 @@
           "lineNumber": 9,
           "line": "<Rule x={0} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "baseline-x-y",
@@ -134,7 +142,9 @@
           "lineNumber": 9,
           "line": "<Rule x y />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "baseline-y-negative",
@@ -161,7 +171,9 @@
           "lineNumber": 9,
           "line": "<Rule y={0} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "candlestick",
@@ -198,7 +210,9 @@
           "lineNumber": 34,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "candlestick-open-close-line-color",
@@ -235,7 +249,9 @@
           "lineNumber": 34,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "candlestick-with-brushing",
@@ -277,7 +293,9 @@
           "lineNumber": 70,
           "line": "<Bars insets={{ x: 0.5 }} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-x-band",
@@ -304,7 +322,9 @@
           "lineNumber": 44,
           "line": "<Rule class=\"stroke-2 stroke-primary stroke-4\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "data-x-date",
@@ -331,7 +351,9 @@
           "lineNumber": 14,
           "line": "<Rule class=\"stroke-4 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "data-x-range",
@@ -358,7 +380,9 @@
           "lineNumber": 20,
           "line": "<Rule class=\"stroke-4 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "data-y-range",
@@ -385,7 +409,9 @@
           "lineNumber": 14,
           "line": "<Rule class=\"stroke-4 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "lollipop",
@@ -427,7 +453,9 @@
           "lineNumber": 31,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-12T21:37:32.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Sankey.json b/docs/src/examples/catalog/Sankey.json
index 5aab5d0149..488a0c9914 100644
--- a/docs/src/examples/catalog/Sankey.json
+++ b/docs/src/examples/catalog/Sankey.json
@@ -46,7 +46,9 @@
           "lineNumber": 125,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "hierarchy",
@@ -88,7 +90,9 @@
           "lineNumber": 108,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "node-select",
@@ -130,7 +134,9 @@
           "lineNumber": 53,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "simple",
@@ -172,7 +178,9 @@
           "lineNumber": 23,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "tooltip",
@@ -219,7 +227,9 @@
           "lineNumber": 56,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/ScatterChart.json b/docs/src/examples/catalog/ScatterChart.json
index 9cdee64145..806a9502fc 100644
--- a/docs/src/examples/catalog/ScatterChart.json
+++ b/docs/src/examples/catalog/ScatterChart.json
@@ -11,7 +11,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "brush",
@@ -23,7 +25,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom",
@@ -60,7 +64,9 @@
           "lineNumber": 19,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "custom-tooltip",
@@ -77,7 +83,9 @@
           "lineNumber": 12,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "date-series-color-scale",
@@ -89,7 +97,9 @@
           "lineNumber": 10,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "domain-baseline",
@@ -101,7 +111,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart {data} x=\"x\" y=\"y\" xBaseline={0} yBaseline={0} padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "domain-nice",
@@ -113,7 +125,9 @@
           "lineNumber": 18,
           "line": "<ScatterChart {data} x=\"x\" y=\"y\" xNice={applyNice} yNice={applyNice} padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "domain-padding",
@@ -125,7 +139,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "labels",
@@ -137,7 +153,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" labels padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "line-annotation",
@@ -149,7 +167,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "point-annotations",
@@ -161,7 +181,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "punchcard",
@@ -183,7 +205,9 @@
           "lineNumber": 39,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "radius-scale",
@@ -195,7 +219,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-both",
@@ -207,7 +233,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-horizontal",
@@ -219,7 +247,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "range-annotation-vertical",
@@ -231,7 +261,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series",
@@ -243,7 +275,9 @@
           "lineNumber": 17,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-custom-labels",
@@ -255,7 +289,9 @@
           "lineNumber": 17,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-legend",
@@ -267,7 +303,9 @@
           "lineNumber": 17,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-tween",
@@ -279,7 +317,9 @@
           "lineNumber": 17,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "series-with-radius",
@@ -291,7 +331,9 @@
           "lineNumber": 17,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-x",
@@ -303,7 +345,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart {data} x=\"x\" y=\"y\" axis=\"x\" padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-axis-y",
@@ -315,7 +359,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart {data} xNice x=\"x\" y=\"y\" axis=\"y\" padding={24} height={400} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "single-dimension",
@@ -332,7 +378,9 @@
           "lineNumber": 24,
           "line": "<Tooltip.Root x=\"data\" y=\"data\" yOffset={12} anchor=\"top\">"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "tooltip-click",
@@ -344,7 +392,9 @@
           "lineNumber": 9,
           "line": "<ScatterChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "zoomable-bubble",
@@ -371,7 +421,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Spline.json b/docs/src/examples/catalog/Spline.json
index dda5ca0db1..4f71f80c7a 100644
--- a/docs/src/examples/catalog/Spline.json
+++ b/docs/src/examples/catalog/Spline.json
@@ -26,7 +26,9 @@
           "lineNumber": 14,
           "line": "<Spline class=\"stroke-2 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "basic-start-and-end-snippets",
@@ -58,7 +60,9 @@
           "lineNumber": 38,
           "line": "<Circle r={5} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "draw",
@@ -85,7 +89,9 @@
           "lineNumber": 36,
           "line": "<Spline curve={config.curve} draw class=\"stroke-primary stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "end-slot-with-draw-with-value",
@@ -122,7 +128,9 @@
           "lineNumber": 45,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "end-snippet-with-draw",
@@ -154,7 +162,9 @@
           "lineNumber": 38,
           "line": "<Circle r={5} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "geo-routes",
@@ -186,7 +196,9 @@
           "lineNumber": 34,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "gradient-encoding",
@@ -223,7 +235,9 @@
           "lineNumber": 30,
           "line": "<Legend"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "gradient-threshold",
@@ -255,7 +269,9 @@
           "lineNumber": 27,
           "line": "<Spline class=\"stroke-2\" stroke={gradient} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "label-using-start-end-snippets",
@@ -292,7 +308,9 @@
           "lineNumber": 39,
           "line": "<Text value=\"start\" textAnchor=\"start\" verticalAnchor=\"middle\" dx={8} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "markers-arrows",
@@ -319,7 +337,9 @@
           "lineNumber": 36,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "math-formula",
@@ -346,7 +366,9 @@
           "lineNumber": 167,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-13T12:45:20.000Z",
+      "updatedAt": "2026-04-13T13:08:22.000Z"
     },
     {
       "name": "missing-data-dashed",
@@ -378,7 +400,9 @@
           "lineNumber": 77,
           "line": "<Legend placement=\"bottom\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-08T14:15:24.000Z",
+      "updatedAt": "2026-09-08T14:15:24.000Z"
     },
     {
       "name": "missing-data-with-markers",
@@ -415,7 +439,9 @@
           "lineNumber": 65,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-09-08T14:15:24.000Z",
+      "updatedAt": "2026-09-08T14:15:24.000Z"
     },
     {
       "name": "multiple-series",
@@ -462,7 +488,9 @@
           "lineNumber": 72,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-highlight-on-hover",
@@ -509,7 +537,9 @@
           "lineNumber": 75,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-tweened",
@@ -536,7 +566,9 @@
           "lineNumber": 51,
           "line": "<Spline motion=\"tween\" class=\"stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-09-03T19:08:33.000Z",
+      "updatedAt": "2026-09-03T19:08:33.000Z"
     },
     {
       "name": "multiple-series-using-overrides",
@@ -573,7 +605,9 @@
           "lineNumber": 38,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-series-with-labels",
@@ -615,7 +649,9 @@
           "lineNumber": 44,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "parallel-coordinates",
@@ -652,7 +688,9 @@
           "lineNumber": 81,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-08-14T22:11:51.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "parallel-coordinates-brush",
@@ -689,7 +727,9 @@
           "lineNumber": 106,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-08-17T18:59:37.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "parallel-coordinates-faceted",
@@ -716,7 +756,9 @@
           "lineNumber": 80,
           "line": "<Spline stroke=\"species\" strokeWidth={1} opacity={0.4} />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-15T17:38:38.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "parallel-coordinates-mixed",
@@ -748,7 +790,9 @@
           "lineNumber": 114,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-08-18T03:33:51.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "playground",
@@ -780,7 +824,9 @@
           "lineNumber": 46,
           "line": "<Points"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "radial-line-with-areas",
@@ -812,7 +858,9 @@
           "lineNumber": 38,
           "line": "<Axis placement=\"angle\" grid tickLength={0} format={'month'} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "radial-multi-year-lines",
@@ -839,7 +887,9 @@
           "lineNumber": 40,
           "line": "<Axis placement=\"angle\" tickLength={0} grid format={'month'} />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "radial-radar",
@@ -871,7 +921,9 @@
           "lineNumber": 39,
           "line": "<Points class=\"fill-primary stroke-surface-200\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "stroke-grouping",
@@ -898,7 +950,9 @@
           "lineNumber": 21,
           "line": "<Spline stroke={(d) => yearColor(d.date.getFullYear())} class=\"stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-02T19:13:52.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "stroke-grouping-with-legend",
@@ -930,7 +984,9 @@
           "lineNumber": 42,
           "line": "<Legend placement=\"bottom\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T07:11:37.000Z",
+      "updatedAt": "2026-08-20T07:11:37.000Z"
     },
     {
       "name": "tween-on-mount",
@@ -957,7 +1013,9 @@
           "lineNumber": 18,
           "line": "<Spline motion=\"tween\" class=\"stroke-primary stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "tweened",
@@ -984,7 +1042,9 @@
           "lineNumber": 36,
           "line": "<Spline curve={config.curve} motion=\"tween\" class=\"stroke-primary stroke-2\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "vertical",
@@ -1021,7 +1081,9 @@
           "lineNumber": 28,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "with-labels",
@@ -1053,7 +1115,9 @@
           "lineNumber": 15,
           "line": "<Labels format=\"integer\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "with-tooltip-and-highlight",
@@ -1090,7 +1154,9 @@
           "lineNumber": 27,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
@@ -1133,43 +1199,43 @@
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 46,
+      "lineNumber": 45,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 47,
+      "lineNumber": 46,
       "line": "<Spline y={(d) => context.y1Scale?.(d.efficiency)} class=\"stroke-2 stroke-secondary\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 33,
+      "lineNumber": 35,
       "line": "<Spline class=\"stroke-2 stroke-primary\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 54,
+      "lineNumber": 56,
       "line": "<Spline class=\"stroke-2 stroke-secondary\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 43,
-      "line": "<Spline y=\"open\" class=\"stroke-primary\" />"
+      "lineNumber": 54,
+      "line": "<Spline x={midday} y=\"open\" class=\"stroke-primary\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 44,
-      "line": "<Spline y=\"close\" class=\"stroke-secondary\" />"
+      "lineNumber": 55,
+      "line": "<Spline x={midday} y=\"close\" class=\"stroke-secondary\" />"
     },
     {
       "example": "data-chart-multi",
@@ -1753,5 +1819,5 @@
       "line": "<Spline curve={config.curve} motion=\"tween\" />"
     }
   ],
-  "updatedAt": "2026-10-05T16:56:46.250Z"
+  "updatedAt": "2026-10-16T16:15:15.002Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Text.json b/docs/src/examples/catalog/Text.json
index d48442954f..072589a617 100644
--- a/docs/src/examples/catalog/Text.json
+++ b/docs/src/examples/catalog/Text.json
@@ -31,7 +31,9 @@
           "lineNumber": 28,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "color-via-threshold-scale",
@@ -68,7 +70,9 @@
           "lineNumber": 43,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "data-mode",
@@ -100,7 +104,9 @@
           "lineNumber": 26,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-08-06T12:20:24.000Z"
     },
     {
       "name": "playground",
@@ -127,7 +133,9 @@
           "lineNumber": 48,
           "line": "<Circle cx={config.x} cy={config.y} r={2} fill=\"red\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "segments",
@@ -149,7 +157,9 @@
           "lineNumber": 7,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-12T23:31:48.000Z",
+      "updatedAt": "2026-04-17T13:51:25.000Z"
     },
     {
       "name": "truncate-axis-labels",
@@ -161,7 +171,9 @@
           "lineNumber": 28,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "word-wrap-axis-labels",
@@ -173,7 +185,9 @@
           "lineNumber": 23,
           "line": "<BarChart"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     },
     {
       "name": "word-wrap-with-explicit-newline",
@@ -195,7 +209,9 @@
           "lineNumber": 10,
           "line": "<Text value={'March\\n2025'} verticalAnchor=\"start\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Threshold.json b/docs/src/examples/catalog/Threshold.json
index bcbcdef3f4..75c9b16e79 100644
--- a/docs/src/examples/catalog/Threshold.json
+++ b/docs/src/examples/catalog/Threshold.json
@@ -26,7 +26,9 @@
           "lineNumber": 37,
           "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "with-labels",
@@ -53,7 +55,9 @@
           "lineNumber": 42,
           "line": "<Spline y=\"baseline\" {curve} class=\"[stroke-dasharray:4]\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "with-tooltip-and-highlight",
@@ -85,7 +89,9 @@
           "lineNumber": 51,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Tooltip.json b/docs/src/examples/catalog/Tooltip.json
index a7ccc14cc3..26136c3d3b 100644
--- a/docs/src/examples/catalog/Tooltip.json
+++ b/docs/src/examples/catalog/Tooltip.json
@@ -36,7 +36,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-13T14:38:57.000Z"
     },
     {
       "name": "area",
@@ -73,7 +75,9 @@
           "lineNumber": 50,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "basic",
@@ -110,7 +114,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "color-swatch",
@@ -147,7 +153,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "color-swatch-using-theme",
@@ -184,7 +192,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "custom-content",
@@ -221,7 +231,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>Anything can go here test</Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "data-snapping",
@@ -258,7 +270,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root x=\"data\" y=\"data\" xOffset={8} yOffset={8}>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "default-mouse-position-with-offset",
@@ -295,7 +309,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "disable-motion",
@@ -332,7 +348,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root motion=\"none\">"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "duration",
@@ -374,7 +392,9 @@
           "lineNumber": 62,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "externally-access-tooltip-data",
@@ -411,7 +431,9 @@
           "lineNumber": 56,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "invert-variant",
@@ -448,7 +470,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root variant=\"invert\">"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-overlapping-bars",
@@ -485,7 +509,9 @@
           "lineNumber": 60,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-overlapping-durations",
@@ -527,7 +553,9 @@
           "lineNumber": 61,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "multiple-tooltips-with-fixed-single-axis",
@@ -564,7 +592,9 @@
           "lineNumber": 35,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "multiple-tooltips-with-fixed-single-axis-scaleband",
@@ -601,7 +631,9 @@
           "lineNumber": 38,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "portal-overflow",
@@ -638,7 +670,9 @@
           "lineNumber": 41,
           "line": "<Tooltip.Root {portal} contained={false}>"
         }
-      ]
+      ],
+      "createdAt": "2026-04-13T14:38:57.000Z",
+      "updatedAt": "2026-04-13T14:38:57.000Z"
     },
     {
       "name": "programmatic-control",
@@ -650,7 +684,9 @@
           "lineNumber": 70,
           "line": "<LineChart"
         }
-      ]
+      ],
+      "createdAt": "2026-08-20T16:29:32.000Z",
+      "updatedAt": "2026-08-20T16:29:32.000Z"
     },
     {
       "name": "scatter-plot",
@@ -687,7 +723,9 @@
           "lineNumber": 47,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "simple-bars",
@@ -724,7 +762,9 @@
           "lineNumber": 55,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "single-date-time",
@@ -761,7 +801,9 @@
           "lineNumber": 50,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-14T17:26:37.000Z"
     },
     {
       "name": "stacked-area",
@@ -798,7 +840,9 @@
           "lineNumber": 78,
           "line": "<Tooltip.Root"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     }
   ],
   "usage": [
@@ -1381,7 +1425,7 @@
       "component": "AreaChart",
       "path": "/docs/components/AreaChart/tooltip-fixed-with-hide-delay",
       "lineNumber": 39,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key}>"
     },
     {
       "example": "tooltip-locking",
@@ -1409,13 +1453,13 @@
       "component": "AreaChart",
       "path": "/docs/components/AreaChart/tooltip-locking",
       "lineNumber": 48,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key}>"
     },
     {
       "example": "tooltip-locking",
       "component": "AreaChart",
       "path": "/docs/components/AreaChart/tooltip-locking",
-      "lineNumber": 72,
+      "lineNumber": 67,
       "line": "<Tooltip.Separator />"
     },
     {
@@ -2013,6 +2057,48 @@
       "lineNumber": 70,
       "line": "<Tooltip.Item label=\"duration\" valueAlign=\"right\">"
     },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 67,
+      "line": "<Tooltip.Root {context}>"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 69,
+      "line": "<Tooltip.Header value={data.month} />"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 70,
+      "line": "<Tooltip.List>"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 71,
+      "line": "<Tooltip.Item seriesKey=\"energy\" format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 72,
+      "line": "<Tooltip.Item seriesKey=\"peakPower\" format=\"integer\" valueAlign=\"right\" />"
+    },
+    {
+      "example": "group-series-dual-axis",
+      "component": "BarChart",
+      "path": "/docs/components/BarChart/group-series-dual-axis",
+      "lineNumber": 74,
+      "line": "<Tooltip.Item seriesKey=\"efficiency\" value={data.efficiency} valueAlign=\"right\" />"
+    },
     {
       "example": "histogram-date-time-count",
       "component": "BarChart",
@@ -2249,7 +2335,7 @@
       "component": "BarChart",
       "path": "/docs/components/BarChart/series-horizontal-diverging",
       "lineNumber": 63,
-      "line": "<Tooltip.Item label={s.key} color={s.color}>"
+      "line": "<Tooltip.Item seriesKey={s.key}>"
     },
     {
       "example": "series-horizontal-diverging-as-percent",
@@ -2277,7 +2363,7 @@
       "component": "BarChart",
       "path": "/docs/components/BarChart/series-horizontal-diverging-as-percent",
       "lineNumber": 64,
-      "line": "<Tooltip.Item label={s.key} color={s.color}>"
+      "line": "<Tooltip.Item seriesKey={s.key}>"
     },
     {
       "example": "series-horizontal-diverging-label-gap",
@@ -3760,210 +3846,210 @@
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 33,
+      "lineNumber": 40,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 35,
+      "lineNumber": 42,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 36,
+      "lineNumber": 43,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 37,
+      "lineNumber": 44,
       "line": "<Tooltip.Item label=\"baseline\" value={data.baseline} color=\"var(--color-primary)\" />"
     },
     {
       "example": "compound-common-scale-with-extra-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-common-scale-with-extra-marks",
-      "lineNumber": 38,
+      "lineNumber": 45,
       "line": "<Tooltip.Item label=\"value\" value={data.value} color=\"var(--color-secondary)\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 52,
+      "lineNumber": 51,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 54,
+      "lineNumber": 53,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 55,
+      "lineNumber": 54,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 56,
+      "lineNumber": 55,
       "line": "<Tooltip.Item label=\"sales\" value={data.sales} format=\"currencyRound\" />"
     },
     {
       "example": "compound-dual-axis-with-single-chart-using-remapped-scale",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-      "lineNumber": 57,
+      "lineNumber": 56,
       "line": "<Tooltip.Item label=\"efficiency\" value={data.efficiency} />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 59,
+      "lineNumber": 60,
       "line": "<Tooltip.Root>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 61,
+      "lineNumber": 62,
       "line": "<Tooltip.Header>{data.year}</Tooltip.Header>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 62,
+      "lineNumber": 63,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 63,
+      "lineNumber": 64,
       "line": "<Tooltip.Item label=\"sales\" value={data.sales} format=\"currencyRound\" />"
     },
     {
       "example": "compound-dual-axis-with-stacked-charts",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-dual-axis-with-stacked-charts",
-      "lineNumber": 64,
+      "lineNumber": 65,
       "line": "<Tooltip.Item label=\"efficiency\" value={data.efficiency} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 48,
+      "lineNumber": 59,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 50,
-      "line": "<Tooltip.Header value={data.date} format=\"day\" />"
+      "lineNumber": 61,
+      "line": "<Tooltip.Header value={data.date} format={{ type: 'day', options: { utc: true } }} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 51,
+      "lineNumber": 62,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 52,
+      "lineNumber": 63,
       "line": "<Tooltip.Item label=\"open\" value={data.open} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 53,
+      "lineNumber": 64,
       "line": "<Tooltip.Item label=\"close\" value={data.close} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 54,
+      "lineNumber": 65,
       "line": "<Tooltip.Item label=\"high\" value={data.high} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 55,
+      "lineNumber": 66,
       "line": "<Tooltip.Item label=\"low\" value={data.low} format=\"currency\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-      "lineNumber": 56,
+      "lineNumber": 67,
       "line": "<Tooltip.Item label=\"volume\" value={data.volume} format=\"integer\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 83,
+      "lineNumber": 84,
       "line": "<Tooltip.Root {context}>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 85,
+      "lineNumber": 86,
       "line": "<Tooltip.Header value={data.date} format=\"day\" />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 86,
+      "lineNumber": 87,
       "line": "<Tooltip.List>"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 87,
+      "lineNumber": 88,
       "line": "<Tooltip.Item label=\"rain\" color=\"hsl(200 100% 50%)\" value={data.rain} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 88,
+      "lineNumber": 89,
       "line": "<Tooltip.Item"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 93,
+      "lineNumber": 94,
       "line": "<Tooltip.Item label=\"dirtyh2o\" color=\"hsl(0, 84%, 60%)\" value={data.dirtyh2o} />"
     },
     {
       "example": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
       "component": "Chart",
       "path": "/docs/components/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-      "lineNumber": 94,
+      "lineNumber": 95,
       "line": "<Tooltip.Item"
     },
     {
@@ -4118,27 +4204,27 @@
       "component": "Chart",
       "path": "/docs/components/Chart/mixed-marks-with-stack",
       "lineNumber": 62,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "mixed-marks-with-stack",
       "component": "Chart",
       "path": "/docs/components/Chart/mixed-marks-with-stack",
-      "lineNumber": 71,
+      "lineNumber": 65,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "mixed-marks-with-stack",
       "component": "Chart",
       "path": "/docs/components/Chart/mixed-marks-with-stack",
-      "lineNumber": 73,
+      "lineNumber": 67,
       "line": "<Tooltip.Item"
     },
     {
       "example": "mixed-marks-with-stack",
       "component": "Chart",
       "path": "/docs/components/Chart/mixed-marks-with-stack",
-      "lineNumber": 79,
+      "lineNumber": 73,
       "line": "<Tooltip.Item label=\"target\" value={data.target} format=\"integer\" valueAlign=\"right\" />"
     },
     {
@@ -7926,20 +8012,20 @@
       "component": "Waffle",
       "path": "/docs/components/Waffle/custom-symbol",
       "lineNumber": 68,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "custom-symbol",
       "component": "Waffle",
       "path": "/docs/components/Waffle/custom-symbol",
-      "lineNumber": 76,
+      "lineNumber": 70,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "custom-symbol",
       "component": "Waffle",
       "path": "/docs/components/Waffle/custom-symbol",
-      "lineNumber": 77,
+      "lineNumber": 71,
       "line": "<Tooltip.Item"
     },
     {
@@ -8080,20 +8166,20 @@
       "component": "Waffle",
       "path": "/docs/components/Waffle/olympians-weight-by-sex",
       "lineNumber": 56,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "olympians-weight-by-sex",
       "component": "Waffle",
       "path": "/docs/components/Waffle/olympians-weight-by-sex",
-      "lineNumber": 64,
+      "lineNumber": 58,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "olympians-weight-by-sex",
       "component": "Waffle",
       "path": "/docs/components/Waffle/olympians-weight-by-sex",
-      "lineNumber": 65,
+      "lineNumber": 59,
       "line": "<Tooltip.Item"
     },
     {
@@ -8122,20 +8208,20 @@
       "component": "Waffle",
       "path": "/docs/components/Waffle/penguins",
       "lineNumber": 55,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "penguins",
       "component": "Waffle",
       "path": "/docs/components/Waffle/penguins",
-      "lineNumber": 63,
+      "lineNumber": 57,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "penguins",
       "component": "Waffle",
       "path": "/docs/components/Waffle/penguins",
-      "lineNumber": 64,
+      "lineNumber": 58,
       "line": "<Tooltip.Item"
     },
     {
@@ -8164,20 +8250,20 @@
       "component": "Waffle",
       "path": "/docs/components/Waffle/stacked",
       "lineNumber": 48,
-      "line": "<Tooltip.Item"
+      "line": "<Tooltip.Item seriesKey={s.key} format=\"integer\" valueAlign=\"right\" />"
     },
     {
       "example": "stacked",
       "component": "Waffle",
       "path": "/docs/components/Waffle/stacked",
-      "lineNumber": 56,
+      "lineNumber": 50,
       "line": "<Tooltip.Separator />"
     },
     {
       "example": "stacked",
       "component": "Waffle",
       "path": "/docs/components/Waffle/stacked",
-      "lineNumber": 57,
+      "lineNumber": 51,
       "line": "<Tooltip.Item"
     },
     {
@@ -8209,5 +8295,5 @@
       "line": "<Tooltip.Item label=\"Count\" value={data.count} format=\"integer\" />"
     }
   ],
-  "updatedAt": "2026-10-08T16:54:44.376Z"
+  "updatedAt": "2026-10-16T16:15:15.158Z"
 }
\ No newline at end of file
diff --git a/docs/src/examples/catalog/Trail.json b/docs/src/examples/catalog/Trail.json
index eed94711bb..67f9784321 100644
--- a/docs/src/examples/catalog/Trail.json
+++ b/docs/src/examples/catalog/Trail.json
@@ -26,7 +26,9 @@
           "lineNumber": 25,
           "line": "<Trail r=\"value\" class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-04-03T20:04:05.000Z",
+      "updatedAt": "2026-04-03T20:04:05.000Z"
     },
     {
       "name": "curves",
@@ -54,7 +56,9 @@
           "line": "<Spline curve={curve.value} class=\"stroke-surface-content/40 stroke-1\" />"
         }
       ],
-      "description": "The trail mark supports round and butt capping and different interpolation methods."
+      "description": "The trail mark supports round and butt capping and different interpolation methods.",
+      "createdAt": "2026-04-03T20:04:05.000Z",
+      "updatedAt": "2026-04-03T20:04:05.000Z"
     },
     {
       "name": "playground",
@@ -86,7 +90,9 @@
           "lineNumber": 52,
           "line": "<Spline"
         }
-      ]
+      ],
+      "createdAt": "2026-04-03T20:04:05.000Z",
+      "updatedAt": "2026-04-13T12:19:51.000Z"
     },
     {
       "name": "tdf-stage",
@@ -119,7 +125,9 @@
           "line": "<Spline class=\"stroke-1 stroke-surface-content\" />"
         }
       ],
-      "description": "Elevation profile of a Tour de France stage using trail width to encode elevation."
+      "description": "Elevation profile of a Tour de France stage using trail width to encode elevation.",
+      "createdAt": "2026-04-03T20:04:05.000Z",
+      "updatedAt": "2026-04-12T22:28:43.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/TransformContext.json b/docs/src/examples/catalog/TransformContext.json
index ccac7528c2..0ccd418b1c 100644
--- a/docs/src/examples/catalog/TransformContext.json
+++ b/docs/src/examples/catalog/TransformContext.json
@@ -31,7 +31,9 @@
           "lineNumber": 53,
           "line": "<Axis"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-19T13:24:57.000Z"
     },
     {
       "name": "pan-zoom-html-image",
@@ -51,7 +53,9 @@
       ],
       "tags": [
         "tiger"
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-19T13:24:57.000Z"
     },
     {
       "name": "pan-zoom-svg-image",
@@ -76,7 +80,9 @@
       ],
       "tags": [
         "tiger"
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-19T13:24:57.000Z"
     },
     {
       "name": "planet-distances",
@@ -123,7 +129,9 @@
           "lineNumber": 270,
           "line": "<Tooltip.Root x=\"data\" y={0} anchor=\"top\">"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-05-05T17:25:23.000Z"
     },
     {
       "name": "playground",
@@ -155,7 +163,9 @@
           "lineNumber": 58,
           "line": "<Circle"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "scroll-activation-key",
@@ -180,7 +190,9 @@
       ],
       "tags": [
         "tiger"
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-19T13:24:57.000Z"
     }
   ],
   "usage": [],
diff --git a/docs/src/examples/catalog/Tree.json b/docs/src/examples/catalog/Tree.json
index 75f8257808..d44d4d1422 100644
--- a/docs/src/examples/catalog/Tree.json
+++ b/docs/src/examples/catalog/Tree.json
@@ -41,7 +41,9 @@
           "lineNumber": 44,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "html-nodes",
@@ -73,7 +75,9 @@
           "lineNumber": 95,
           "line": "<Group"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-08-20T03:04:59.000Z"
     },
     {
       "name": "isometric",
@@ -110,7 +114,9 @@
           "lineNumber": 70,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-10-08T16:43:08.000Z",
+      "updatedAt": "2026-10-08T16:43:08.000Z"
     },
     {
       "name": "playground",
@@ -152,7 +158,9 @@
           "lineNumber": 166,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-04-16T17:18:31.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Treemap.json b/docs/src/examples/catalog/Treemap.json
index 0448569c3e..de2902ccab 100644
--- a/docs/src/examples/catalog/Treemap.json
+++ b/docs/src/examples/catalog/Treemap.json
@@ -36,7 +36,9 @@
           "lineNumber": 49,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "complex",
@@ -83,7 +85,9 @@
           "lineNumber": 148,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "nested-filter",
@@ -125,7 +129,9 @@
           "lineNumber": 163,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "nested-zoom",
@@ -182,7 +188,9 @@
           "lineNumber": 184,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "playground",
@@ -229,7 +237,9 @@
           "lineNumber": 194,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "stacked-zoom",
@@ -281,7 +291,9 @@
           "lineNumber": 115,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Vector.json b/docs/src/examples/catalog/Vector.json
index 32e5e53019..f2d924d766 100644
--- a/docs/src/examples/catalog/Vector.json
+++ b/docs/src/examples/catalog/Vector.json
@@ -31,7 +31,9 @@
           "lineNumber": 24,
           "line": "<Vector x={100} y={150} length={40} width={5} {rotate} anchor=\"start\" class=\"stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "basic",
@@ -53,7 +55,9 @@
           "lineNumber": 23,
           "line": "<Vector x={v.cx} y={v.cy} length={30} width={5} rotate={v.rotate} class=\"stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "data-mode",
@@ -80,7 +84,9 @@
           "lineNumber": 38,
           "line": "<Vector"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "election-wind-map",
@@ -112,7 +118,9 @@
           "lineNumber": 114,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "shapes",
@@ -154,7 +162,9 @@
           "lineNumber": 81,
           "line": "<Polygon"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-03-31T15:09:10.000Z"
     },
     {
       "name": "wind-map",
@@ -186,7 +196,9 @@
           "lineNumber": 52,
           "line": "<Tooltip.Root {context}>"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Violin.json b/docs/src/examples/catalog/Violin.json
index 59841966f9..fcccd338f6 100644
--- a/docs/src/examples/catalog/Violin.json
+++ b/docs/src/examples/catalog/Violin.json
@@ -26,7 +26,9 @@
           "lineNumber": 59,
           "line": "<Violin"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "basic",
@@ -53,7 +55,9 @@
           "lineNumber": 52,
           "line": "<Violin data={item} values=\"values\" class=\"fill-primary/20 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "horizontal",
@@ -80,7 +84,9 @@
           "lineNumber": 53,
           "line": "<Violin data={item} values=\"values\" box median class=\"fill-primary/20 stroke-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     },
     {
       "name": "with-box-median",
@@ -107,7 +113,9 @@
           "lineNumber": 52,
           "line": "<Violin"
         }
-      ]
+      ],
+      "createdAt": "2026-03-31T15:09:10.000Z",
+      "updatedAt": "2026-04-27T16:10:53.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Voronoi.json b/docs/src/examples/catalog/Voronoi.json
index 428a3d6d77..cb10a330d5 100644
--- a/docs/src/examples/catalog/Voronoi.json
+++ b/docs/src/examples/catalog/Voronoi.json
@@ -36,7 +36,9 @@
           "lineNumber": 37,
           "line": "<Circle cx={point.x} cy={point.y} r={4} class=\"fill-primary\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-02-18T13:27:36.000Z",
+      "updatedAt": "2026-02-18T13:27:36.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/examples/catalog/Waffle.json b/docs/src/examples/catalog/Waffle.json
index 5c37241fd7..fe98983be3 100644
--- a/docs/src/examples/catalog/Waffle.json
+++ b/docs/src/examples/catalog/Waffle.json
@@ -16,7 +16,9 @@
           "lineNumber": 23,
           "line": "<Waffle axis=\"x\" fill=\"var(--color-primary)\" />"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "band-padding",
@@ -38,7 +40,9 @@
           "lineNumber": 54,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "basic",
@@ -60,7 +64,9 @@
           "lineNumber": 30,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "circular-cells",
@@ -82,7 +88,9 @@
           "lineNumber": 32,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "custom-symbol",
@@ -124,7 +132,9 @@
           "lineNumber": 63,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "horizontal",
@@ -146,7 +156,9 @@
           "lineNumber": 31,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "months",
@@ -168,7 +180,9 @@
           "lineNumber": 51,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "olympians-by-birth-year",
@@ -190,7 +204,9 @@
           "lineNumber": 63,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "olympians-by-sex",
@@ -212,7 +228,9 @@
           "lineNumber": 38,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "olympians-weight-by-sex",
@@ -239,7 +257,9 @@
           "lineNumber": 51,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "penguins",
@@ -266,7 +286,9 @@
           "lineNumber": 50,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "stacked",
@@ -288,7 +310,9 @@
           "lineNumber": 43,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-10-12T02:24:42.000Z"
     },
     {
       "name": "survey",
@@ -315,7 +339,9 @@
           "lineNumber": 47,
           "line": "<Text"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     },
     {
       "name": "unit-multiple",
@@ -337,7 +363,9 @@
           "lineNumber": 62,
           "line": "<Tooltip.Root>"
         }
-      ]
+      ],
+      "createdAt": "2026-05-08T16:22:57.000Z",
+      "updatedAt": "2026-05-08T16:22:57.000Z"
     }
   ],
   "usage": [
diff --git a/docs/src/hooks.server.ts b/docs/src/hooks.server.ts
deleted file mode 100644
index 630ccfa011..0000000000
--- a/docs/src/hooks.server.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import type { Handle } from '@sveltejs/kit';
-
-export const handle: Handle = async ({ event, resolve }) => {
-	const response = await resolve(event);
-
-	// Set Cross-Origin headers for WebContainer support (SharedArrayBuffer requirement)
-	// Only apply to the playground page to minimize impact
-	if (event.url.pathname.startsWith('/docs/playground')) {
-		response.headers.set('Cross-Origin-Embedder-Policy', 'require-corp');
-		response.headers.set('Cross-Origin-Opener-Policy', 'same-origin');
-	}
-
-	return response;
-};
diff --git a/docs/src/lib/components/DocsMenu.svelte b/docs/src/lib/components/DocsMenu.svelte
index 07436c6956..080f1e9263 100644
--- a/docs/src/lib/components/DocsMenu.svelte
+++ b/docs/src/lib/components/DocsMenu.svelte
@@ -19,7 +19,6 @@
 	import LucideFileCode2 from '~icons/lucide/file-code-2';
 	import LucideCirclePlay from '~icons/lucide/circle-play';
 	import LucideParentheses from '~icons/lucide/parentheses';
-	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz';
 
 	let { onItemClick, class: className }: { onItemClick?: () => void; class?: string } = $props();
 
@@ -64,11 +63,6 @@
 			path: '/docs/examples',
 			icon: LucideFileCode2
 		})}
-		<!-- {@render navItem({
-			label: 'Playground',
-			path: '/docs/playground',
-			icon: SimpleIconsStackblitz
-		})} -->
 		{@render navItem({ label: 'Showcase', path: '/docs/showcase', icon: LucideGalleryVertical })}
 		{@render navItem({
 			label: 'Releases',
diff --git a/docs/src/lib/components/Example.svelte b/docs/src/lib/components/Example.svelte
index aec89ab4e1..148f99204c 100644
--- a/docs/src/lib/components/Example.svelte
+++ b/docs/src/lib/components/Example.svelte
@@ -20,12 +20,16 @@
 	import { resolveExamplePath } from '@layerstack/docs/content';
 	import { exampleViewTransitionName } from '@layerstack/docs/utils';
 	import { untrack } from 'svelte';
-	import { Code, Json } from '@layerstack/docs/components';
+	import { MediaQuery } from 'svelte/reactivity';
+	import { Json } from '@layerstack/docs/components';
+	import CodePanel from '$lib/sandbox/CodePanel.svelte';
+	import PreviewError from '$lib/sandbox/PreviewError.svelte';
+	import { createSandbox } from '$lib/sandbox/state.svelte';
+	import { exposeData } from '$lib/utils/exampleSource';
 
 	import LucideCode from '~icons/lucide/code';
 	import LucideFullscreen from '~icons/lucide/fullscreen';
 	import LucideTable from '~icons/lucide/table';
-	import LucideFilePen from '~icons/lucide/file-pen';
 	import LucideGripVertical from '~icons/lucide/grip-vertical';
 	import LucideImageDown from '~icons/lucide/image-down';
 	import LucideCopy from '~icons/lucide/copy';
@@ -100,6 +104,24 @@
 		});
 	});
 
+	/**
+	 * Code beside the preview rather than below it. Only offered with room for both, and
+	 * only while the code is showing; the toggle is in the code panel's menu.
+	 */
+	let splitPreferred = $state(false);
+	const wide = new MediaQuery('min-width: 768px');
+	const split = $derived(splitPreferred && showCode && wide.current);
+
+	/** Loaded on first use, and only then switched to, so there's no half-loaded state. */
+	let SplitLayout = $state<typeof import('$lib/sandbox/SplitLayout.svelte').default | null>(null);
+	async function setSplit(next: boolean) {
+		if (next) SplitLayout ??= (await import('$lib/sandbox/SplitLayout.svelte')).default;
+		splitPreferred = next;
+	}
+
+	/** Kept here, not in `CodePanel`, so it survives the panel remounting on a layout change. */
+	let lineNumbers = $state(untrack(() => showLineNumbers));
+
 	let containerEl = $state<HTMLElement | null>(null);
 	let containerWidth = $state<number | undefined>(undefined);
 	const minWidth = 200;
@@ -128,9 +150,20 @@
 	}
 
 	let ref = $state<SvelteComponent | null>(null);
+
+	/**
+	 * In-page editing. `example.source` resolves asynchronously, so the sandbox seeds
+	 * itself from the getter rather than a constructor argument.
+	 */
+	const sandbox = createSandbox(() => example?.source ?? '', {
+		transform: exposeData,
+		base: () => (component ? `/src/examples/components/${component}/` : undefined)
+	});
+
 	let data = $derived.by(() => {
 		try {
-			return ref?.data;
+			// Once edited, the chart on screen is the sandbox's, so `Data` must read from it.
+			return sandbox.showing ? sandbox.instance?.data : ref?.data;
 		} catch {
 			return undefined;
 		}
@@ -253,70 +286,115 @@
 
 <div class={cls('example relative', clip && 'overflow-clip', className)}>
 	{#if example}
-		<div
-			class={cls(
-				variant === 'default' && 'border rounded-t-sm bg-surface-300',
-				!showCode && 'rounded-b-sm'
-			)}
-		>
+		{#snippet previewBlock()}
 			<div
 				class={cls(
-					'relative max-w-full',
-					variant === 'default' && 'p-4 rounded bg-surface-100 dark:bg-surface-200 shadow-lg'
+					variant === 'default' && 'bg-surface-300',
+					// Beside the code, the pane group draws the border and the preview fills its pane.
+					split
+						? 'h-full'
+						: variant === 'default' && ['border rounded-t-sm', !showCode && 'rounded-b-sm']
 				)}
-				bind:this={containerEl}
-				style:width={containerWidth ? `${containerWidth}px` : undefined}
-				style:view-transition-name={viewTransitionName}
 			>
-				{#if isVisible}
-					<svelte:boundary>
-						<example.component bind:this={ref} />
-						{#snippet failed(error, reset)}
-							<div class="border border-danger rounded-md bg-danger/5 p-4 text-sm">
-								<div class="font-semibold text-danger mb-2">
-									Example error{#if component && name}: {component}/{name}{/if}
+				<div
+					class={cls(
+						'relative max-w-full',
+						variant === 'default' && 'p-4 rounded bg-surface-100 dark:bg-surface-200 shadow-lg'
+					)}
+					bind:this={containerEl}
+					style:width={!split && containerWidth ? `${containerWidth}px` : undefined}
+					style:view-transition-name={viewTransitionName}
+				>
+					{#if isVisible}
+						<svelte:boundary>
+							{#if sandbox.live}
+								<!--
+									Edited: render the user's source instead of the shipped component. Each
+									build mounts hidden in here and is swapped in once it has rendered, so
+									the shipped component stays up until the first one is ready.
+								-->
+								<div
+									class={cls('relative', sandbox.error && 'opacity-40')}
+									{@attach sandbox.preview}
+								></div>
+							{/if}
+							{#if !sandbox.showing && example}
+								<example.component bind:this={ref} />
+							{/if}
+							{#snippet failed(error, reset)}
+								<div class="border border-danger rounded-md bg-danger/5 p-4 text-sm">
+									<div class="font-semibold text-danger mb-2">
+										Example error{#if component && name}: {component}/{name}{/if}
+									</div>
+									<pre
+										class="text-danger/80 whitespace-pre-wrap break-words overflow-auto max-h-60">{error}</pre>
+									<Button variant="outline" color="danger" size="sm" class="mt-2" on:click={reset}
+										>Retry</Button
+									>
 								</div>
-								<pre
-									class="text-danger/80 whitespace-pre-wrap break-words overflow-auto max-h-60">{error}</pre>
-								<Button variant="outline" color="danger" size="sm" class="mt-2" on:click={reset}
-									>Retry</Button
-								>
-							</div>
-						{/snippet}
-						{#snippet pending()}
-							<div class="min-h-80 flex items-center justify-center text-surface-content/30">
-								Loading...
-							</div>
-						{/snippet}
-					</svelte:boundary>
-				{:else}
-					<div bind:this={sentinelEl} class="min-h-80"></div>
-				{/if}
-
-				{#if canResize}
-					<div
-						class="absolute top-0 right-0 bottom-0 flex items-center w-3 cursor-ew-resize select-none hover:bg-surface-content/5 transition-opacity screenshot-hidden"
-						title="Drag to resize"
-						use:movable={{
-							axis: 'x',
-							onMove: (e) => {
-								const newWidth = (containerWidth ?? containerEl?.offsetWidth ?? 0) + e.detail.dx;
-								if (newWidth >= minWidth) {
-									containerWidth = newWidth;
+							{/snippet}
+							{#snippet pending()}
+								<div class="min-h-80 flex items-center justify-center text-surface-content/30">
+									Loading...
+								</div>
+							{/snippet}
+						</svelte:boundary>
+					{:else}
+						<div bind:this={sentinelEl} class="min-h-80"></div>
+					{/if}
+
+					<!-- Beside the code, the pane divider sets the width instead. -->
+					{#if canResize && !split}
+						<div
+							class="absolute top-0 right-0 bottom-0 flex items-center w-3 cursor-ew-resize select-none hover:bg-surface-content/5 transition-opacity screenshot-hidden"
+							title="Drag to resize"
+							use:movable={{
+								axis: 'x',
+								onMove: (e) => {
+									const newWidth = (containerWidth ?? containerEl?.offsetWidth ?? 0) + e.detail.dx;
+									if (newWidth >= minWidth) {
+										containerWidth = newWidth;
+									}
 								}
-							}
-						}}
-					>
-						<LucideGripVertical class="text-surface-content/50" />
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		{#if showCode}
-			<div transition:slide class={cls('border border-t-0', showCode && 'rounded-b-sm')}>
-				<Code source={example.source} {showLineNumbers} {highlight} class="outline-none" />
+							}}
+						>
+							<LucideGripVertical class="text-surface-content/50" />
+						</div>
+					{/if}
+
+					{#if sandbox.error}
+						<PreviewError {...sandbox.error} />
+					{/if}
+				</div>
 			</div>
+		{/snippet}
+
+		{#snippet codeBlock()}
+			<CodePanel
+				{sandbox}
+				bind:lineNumbers
+				{highlight}
+				onopenstackblitz={component && name
+					? () => openInStackBlitz(component, name, sandbox.dirty ? sandbox.source : undefined)
+					: undefined}
+				{split}
+				onsplitchange={wide.current ? setSplit : undefined}
+			/>
+		{/snippet}
+
+		{#if split && SplitLayout}
+			<SplitLayout>
+				{#snippet code()}{@render codeBlock()}{/snippet}
+				{#snippet preview()}{@render previewBlock()}{/snippet}
+			</SplitLayout>
+		{:else}
+			{@render previewBlock()}
+
+			{#if showCode}
+				<div transition:slide class={cls('border border-t-0', showCode && 'rounded-b-sm')}>
+					{@render codeBlock()}
+				</div>
+			{/if}
 		{/if}
 
 		{#if variant === 'default'}
@@ -376,16 +454,6 @@
 					</Button>
 				{/if}
 
-				{#if component && name}
-					<Button
-						icon={LucideFilePen}
-						class="text-surface-content/70 py-1"
-						on:click={() => openInStackBlitz(component, name)}
-					>
-						Edit
-					</Button>
-				{/if}
-
 				<Toggle let:on={open} let:toggle let:toggleOff>
 					<Button icon={LucideImageDown} class="text-surface-content/70 py-1" on:click={toggle}>
 						Export
diff --git a/docs/src/lib/sandbox/CodeEditor.svelte b/docs/src/lib/sandbox/CodeEditor.svelte
new file mode 100644
index 0000000000..faedeefac5
--- /dev/null
+++ b/docs/src/lib/sandbox/CodeEditor.svelte
@@ -0,0 +1,302 @@
+<script lang="ts">
+	import { untrack } from 'svelte';
+	import {
+		EditorView,
+		keymap,
+		drawSelection,
+		dropCursor,
+		rectangularSelection,
+		crosshairCursor,
+		highlightSpecialChars,
+		lineNumbers as lineNumbersExt
+	} from '@codemirror/view';
+	import { EditorState, Compartment } from '@codemirror/state';
+	import { defaultKeymap, history, historyKeymap, indentWithTab } from '@codemirror/commands';
+	import {
+		indentOnInput,
+		indentUnit,
+		bracketMatching,
+		syntaxHighlighting,
+		HighlightStyle
+	} from '@codemirror/language';
+	import { tags as t } from '@lezer/highlight';
+	import { closeBrackets, closeBracketsKeymap } from '@codemirror/autocomplete';
+	import { setDiagnostics, lintKeymap } from '@codemirror/lint';
+	import { svelte } from '@replit/codemirror-lang-svelte';
+	import { getSettings } from 'svelte-ux';
+	import type { Diagnostic } from './compile';
+
+	let {
+		value = $bindable(''),
+		diagnostics = [],
+		autofocus = false,
+		/**
+		 * Mirrors the `Code` block's `showLineNumbers`, so the gutter is there in Edit
+		 * exactly when it was in View — adding or dropping one shifts every line sideways.
+		 * Reactive, so it can be toggled without rebuilding the editor.
+		 */
+		lineNumbers = false,
+		caretAt = null
+	}: {
+		value?: string;
+		diagnostics?: Diagnostic[];
+		autofocus?: boolean;
+		lineNumbers?: boolean;
+		/**
+		 * Where to put the caret when the editor opens, relative to its top-left corner (ex.
+		 * where the read-only code was clicked — it lays out identically, so the same point
+		 * lands on the same character).
+		 */
+		caretAt?: { x: number; y: number } | null;
+	} = $props();
+
+	let container = $state<HTMLDivElement | null>(null);
+	// `$state` so the theme/diagnostics effects below re-run once the view exists.
+	let view = $state<EditorView | null>(null);
+
+	const themeCompartment = new Compartment();
+	const gutterCompartment = new Compartment();
+	const gutter = (show: boolean) => (show ? lineNumbersExt() : []);
+	const { currentTheme } = getSettings();
+
+	/**
+	 * GitHub Primer token colours — the same palette shiki's `github-light-default` /
+	 * `github-dark-default` themes use, which is what the read-only `Code` component
+	 * renders with. Keeping these in step is what makes View and Edit look like the same
+	 * block of code rather than two different editors.
+	 */
+	const palette = {
+		light: {
+			plain: '#1f2328',
+			comment: '#6e7781',
+			keyword: '#cf222e',
+			constant: '#0550ae',
+			string: '#0a3069',
+			func: '#8250df',
+			tag: '#116329',
+			variable: '#953800',
+			invalid: '#82071e'
+		},
+		dark: {
+			plain: '#e6edf3',
+			comment: '#8b949e',
+			keyword: '#ff7b72',
+			constant: '#79c0ff',
+			string: '#a5d6ff',
+			func: '#d2a8ff',
+			tag: '#7ee787',
+			variable: '#ffa657',
+			invalid: '#ffa198'
+		}
+	};
+
+	function highlightStyle(c: (typeof palette)['light']) {
+		return HighlightStyle.define([
+			{ tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: c.comment },
+			{
+				tag: [
+					t.keyword,
+					t.moduleKeyword,
+					t.controlKeyword,
+					t.operatorKeyword,
+					t.definitionKeyword,
+					t.modifier,
+					t.self,
+					t.null
+				],
+				color: c.keyword
+			},
+			{
+				tag: [t.bool, t.number, t.integer, t.float, t.atom, t.constant(t.variableName)],
+				color: c.constant
+			},
+			{ tag: [t.string, t.special(t.string), t.attributeValue], color: c.string },
+			{ tag: [t.regexp], color: c.string },
+			{
+				tag: [t.function(t.variableName), t.function(t.propertyName), t.macroName],
+				color: c.func
+			},
+			// `className` is what lezer-svelte gives a capitalised markup tag (`<AreaChart>`),
+			// which shiki renders as a tag; `typeName` stays separate for TS annotations.
+			{
+				tag: [t.tagName, t.standard(t.tagName), t.special(t.tagName), t.className],
+				color: c.tag
+			},
+			{ tag: [t.attributeName], color: c.constant },
+			{ tag: [t.typeName, t.namespace], color: c.variable },
+			{ tag: [t.propertyName, t.variableName, t.definition(t.variableName)], color: c.plain },
+			{
+				tag: [t.operator, t.punctuation, t.separator, t.bracket, t.angleBracket, t.meta],
+				color: c.plain
+			},
+			{ tag: [t.invalid], color: c.invalid },
+			{ tag: [t.link], color: c.constant, textDecoration: 'underline' },
+			{ tag: [t.heading], color: c.constant, fontWeight: 'bold' },
+			{ tag: [t.emphasis], fontStyle: 'italic' },
+			{ tag: [t.strong], fontWeight: 'bold' }
+		]);
+	}
+
+	const styles = { light: highlightStyle(palette.light), dark: highlightStyle(palette.dark) };
+
+	/** Editor chrome (caret, selection, matching bracket) drawn from the docs surface tokens. */
+	function chrome(dark: boolean) {
+		return EditorView.theme(
+			{
+				'&': { color: dark ? palette.dark.plain : palette.light.plain },
+				'.cm-cursor, .cm-dropCursor': {
+					borderLeftColor: dark ? palette.dark.plain : palette.light.plain
+				},
+				'&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
+					backgroundColor: 'color-mix(in oklab, var(--color-primary) 22%, transparent)'
+				},
+				'.cm-matchingBracket, .cm-nonmatchingBracket': {
+					backgroundColor: 'color-mix(in oklab, currentColor 12%, transparent)',
+					outline: 'none'
+				}
+			},
+			{ dark }
+		);
+	}
+
+	const theme = (dark: boolean) => [
+		chrome(dark),
+		syntaxHighlighting(styles[dark ? 'dark' : 'light'])
+	];
+
+	/**
+	 * Matched to the read-only `Code` component so swapping one for the other doesn't
+	 * move a single character: same mono stack, `text-sm` metrics (14px/20px), the same
+	 * 1rem padding, and `tab-size: 2`. The background is left transparent so the
+	 * surrounding panel supplies it.
+	 *
+	 * The gutter copies `Code`'s `.show-line-numbers` numbers: a right-aligned 2rem column
+	 * with a 1rem gap, inside the same 1rem padding, so the code starts 4rem in for both.
+	 * These are hand-copied from `Code`, so they need re-checking if its highlighter changes.
+	 */
+	const appearance = EditorView.theme({
+		'&.cm-focused': { outline: 'none' },
+		'.cm-scroller': {
+			overflow: 'auto',
+			fontFamily:
+				'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+			fontSize: '14px',
+			lineHeight: '20px'
+		},
+		'.cm-content': { padding: '1rem', tabSize: '2' },
+		'.cm-line': { padding: '0' },
+		'.cm-gutters': {
+			// CodeMirror's base theme paints the gutter (`#f5f5f5` / `#333338`) at the same
+			// specificity; the panel has to show through, as it does behind `Code`'s numbers.
+			backgroundColor: 'transparent !important',
+			border: 'none',
+			paddingLeft: '1rem',
+			color: 'rgba(115, 138, 148, 0.4)'
+		},
+		'.cm-lineNumbers .cm-gutterElement': { minWidth: '2rem', padding: '0' }
+	});
+
+	/**
+	 * `basicSetup` minus the fold gutter, active-line highlight and search panel (line
+	 * numbers live in their own compartment) — the things that would either shift the
+	 * layout or bloat the chunk. Lint state isn't listed because `setDiagnostics` appends
+	 * it on first use.
+	 */
+	const setup = [
+		highlightSpecialChars(),
+		history(),
+		drawSelection(),
+		dropCursor(),
+		EditorState.allowMultipleSelections.of(true),
+		indentOnInput(),
+		// The examples are tab-indented; `Code` renders those at 2 columns via
+		// `[tab-size:2]`. CodeMirror measures tabs itself, so the CSS alone isn't enough.
+		EditorState.tabSize.of(2),
+		indentUnit.of('\t'),
+		bracketMatching(),
+		closeBrackets(),
+		rectangularSelection(),
+		crosshairCursor(),
+		keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap, ...lintKeymap])
+	];
+
+	/**
+	 * Build the editor exactly once per container. Everything this reads to seed the
+	 * initial state (`value`, the theme) is untracked — otherwise typing a character
+	 * would re-run the effect and tear the whole editor down mid-keystroke. Ongoing
+	 * changes are pushed in by the effects below instead.
+	 */
+	$effect(() => {
+		if (!container) return;
+
+		const parent = container;
+		const instance = new EditorView({
+			parent,
+			state: EditorState.create({
+				doc: untrack(() => value),
+				extensions: [
+					setup,
+					svelte(),
+					keymap.of([indentWithTab]),
+					themeCompartment.of(theme(untrack(() => $currentTheme.dark))),
+					gutterCompartment.of(gutter(untrack(() => lineNumbers))),
+					appearance,
+					EditorView.updateListener.of((update) => {
+						if (update.docChanged) value = update.state.doc.toString();
+					})
+				]
+			})
+		});
+		view = instance;
+
+		const at = untrack(() => caretAt);
+		if (at) {
+			const rect = parent.getBoundingClientRect();
+			const pos = instance.posAtCoords({ x: rect.left + at.x, y: rect.top + at.y });
+			if (pos != null) instance.dispatch({ selection: { anchor: pos } });
+		}
+		if (untrack(() => autofocus)) instance.focus();
+
+		return () => {
+			instance.destroy();
+			if (view === instance) view = null;
+		};
+	});
+
+	// External edits (ex. a "reset" button). Typing already matches, so this is a no-op then.
+	$effect(() => {
+		const next = value;
+		if (view && next !== view.state.doc.toString()) {
+			view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: next } });
+		}
+	});
+
+	$effect(() => {
+		const dark = $currentTheme.dark;
+		view?.dispatch({ effects: themeCompartment.reconfigure(theme(dark)) });
+	});
+
+	$effect(() => {
+		const show = lineNumbers;
+		view?.dispatch({ effects: gutterCompartment.reconfigure(gutter(show)) });
+	});
+
+	$effect(() => {
+		if (!view) return;
+		const length = view.state.doc.length;
+		view.dispatch(
+			setDiagnostics(
+				view.state,
+				// Positions come from a possibly-stale compile; clamp so CodeMirror doesn't throw.
+				diagnostics.map((d) => ({
+					from: Math.min(d.from, length),
+					to: Math.min(Math.max(d.to, d.from), length),
+					severity: d.severity,
+					message: d.message
+				}))
+			)
+		);
+	});
+</script>
+
+<div bind:this={container}></div>
diff --git a/docs/src/lib/sandbox/CodePanel.svelte b/docs/src/lib/sandbox/CodePanel.svelte
new file mode 100644
index 0000000000..977c89bdba
--- /dev/null
+++ b/docs/src/lib/sandbox/CodePanel.svelte
@@ -0,0 +1,227 @@
+<script lang="ts">
+	import { Code } from '@layerstack/docs/components';
+	import {
+		Button,
+		CopyButton,
+		Menu,
+		MenuItem,
+		Toggle,
+		ToggleGroup,
+		ToggleOption,
+		Tooltip
+	} from 'svelte-ux';
+	import { cls } from '@layerstack/tailwind';
+	import LucideCode from '~icons/lucide/code';
+	import LucideColumns2 from '~icons/lucide/columns-2';
+	import LucideEllipsisVertical from '~icons/lucide/ellipsis-vertical';
+	import LucideFilePen from '~icons/lucide/file-pen';
+	import LucideListOrdered from '~icons/lucide/list-ordered';
+	import LucideLoaderCircle from '~icons/lucide/loader-circle';
+	import LucideRotateCcw from '~icons/lucide/rotate-ccw';
+	import LucideRows2 from '~icons/lucide/rows-2';
+	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz';
+	import type { Sandbox } from './state.svelte';
+
+	let {
+		sandbox,
+		lineNumbers = $bindable(false),
+		highlight,
+		onopenstackblitz,
+		split = false,
+		onsplitchange
+	}: {
+		sandbox: Sandbox;
+		/**
+		 * One setting for View and Edit, so switching modes never adds or drops the gutter.
+		 * Bindable so the host keeps it when it remounts this panel (ex. changing layout).
+		 */
+		lineNumbers?: boolean;
+		highlight?: string;
+		/** Adds "Open in StackBlitz" to the menu when set. */
+		onopenstackblitz?: () => Promise<void>;
+		/** Whether the host shows this beside the preview rather than below it. */
+		split?: boolean;
+		/** Shows the layout toggle when set. */
+		onsplitchange?: (split: boolean) => void;
+	} = $props();
+
+	let opening = $state(false);
+
+	// `surface-content` rather than a surface shade, so the hover reads on the translucent
+	// toolbar in both themes.
+	const iconButton =
+		'text-surface-content/70 hover:text-surface-content hover:bg-surface-content/10 p-0.5';
+
+	/**
+	 * Clicking into the read-only code switches to Edit, with the caret where you clicked.
+	 * Only a real click counts: a drag that moved the pointer or selected text stays in
+	 * View (so code can still be copied), and a touch scroll never produces a click at all.
+	 */
+	let down: { x: number; y: number } | null = null;
+	let caret = $state<{ x: number; y: number } | null>(null);
+
+	function onpointerdown(e: PointerEvent) {
+		if (sandbox.mode === 'edit' || e.button !== 0) return;
+		down = { x: e.clientX, y: e.clientY };
+		// Start fetching the editor as the click begins. Not for touch, where this is as
+		// likely the start of a scroll.
+		if (e.pointerType === 'mouse') sandbox.load();
+	}
+
+	function onclick(e: MouseEvent) {
+		if (sandbox.mode === 'edit' || !down) return;
+		const moved = Math.hypot(e.clientX - down.x, e.clientY - down.y) > 4;
+		down = null;
+		if (moved || !getSelection()?.isCollapsed) return;
+		const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
+		caret = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+		sandbox.setMode('edit');
+	}
+
+	async function openStackBlitz() {
+		opening = true;
+		await onopenstackblitz?.().finally(() => (opening = false));
+	}
+</script>
+
+<!--
+	The panel owns the background in both modes. In view mode `Code` paints its own
+	`bg-surface-200 dark:bg-surface-300`, but the editor is deliberately transparent (so it
+	can't disagree with `Code`), so without this the background disappears on switching to
+	Edit anywhere the host didn't happen to supply one.
+-->
+<div class="code-panel relative bg-surface-200 dark:bg-surface-300">
+	<!--
+		Sits where `Code` puts its copy button, and is identical in both modes so nothing
+		moves when they swap. `pointerenter` starts fetching the editor chunk before the
+		click lands. `screenshot-hidden` keeps it out of generated screenshots.
+
+		Sticky, so a long source keeps its controls in view while the page scrolls: held
+		just below the docs header (`--code-toolbar-top`, 4rem by default; a host that
+		scrolls the panel itself sets it to 0), and only as far as the panel's bottom. The
+		row keeps its real height so that limit holds; the code is pulled up under it
+		instead (`-mt-9`), and the row ignores the pointer outside the toolbar so it doesn't
+		block the lines beneath.
+	-->
+	<div
+		class="screenshot-hidden pointer-events-none sticky top-[var(--code-toolbar-top,4rem)] z-10 flex h-9 justify-end"
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div
+			class="pointer-events-auto mt-1 mr-1 flex h-fit items-center gap-0.5 rounded-sm bg-surface-200/80 dark:bg-surface-300/80 p-0.5 backdrop-blur-sm"
+			onpointerenter={() => sandbox.load()}
+		>
+			{#if sandbox.dirty}
+				<Tooltip title="Revert to the original example">
+					<Button
+						icon={LucideRotateCcw}
+						size="sm"
+						iconOnly
+						class={iconButton}
+						on:click={() => sandbox.reset()}
+					/>
+				</Tooltip>
+			{/if}
+
+			<Tooltip title="Copy source">
+				<CopyButton value={sandbox.source} size="sm" iconOnly class={iconButton} />
+			</Tooltip>
+
+			<!--
+				Kept deliberately short: this floats over the code, and every extra pixel of
+				height hides another line. At ~30px it clears everything below line one.
+			-->
+			<ToggleGroup
+				value={sandbox.mode}
+				variant="outline"
+				size="xs"
+				inset
+				on:change={(e) => {
+					caret = null;
+					sandbox.setMode(e.detail.value);
+				}}
+				classes={{ root: 'ml-1.5', option: 'px-1.5 py-0 leading-5 flex items-center gap-1' }}
+			>
+				<ToggleOption value="view">
+					<LucideCode class="size-3" />
+					View
+				</ToggleOption>
+				<ToggleOption value="edit">
+					<!--
+						Same-size icon swap rather than a text change: the label is inside an
+						auto-width toggle, so "Edit" -> "Loading…" resized the whole toolbar and
+						visibly shifted it left mid-hover.
+					-->
+					{#if sandbox.pending}
+						<LucideLoaderCircle class="size-3 animate-spin" />
+					{:else}
+						<LucideFilePen class="size-3" />
+					{/if}
+					Edit
+				</ToggleOption>
+			</ToggleGroup>
+
+			<!-- Occasional actions and set-once preferences, kept off the strip that covers the code. -->
+			<Toggle let:on={open} let:toggle let:toggleOff>
+				<Button
+					icon={LucideEllipsisVertical}
+					size="sm"
+					iconOnly
+					loading={opening}
+					aria-label="More options"
+					class={cls(iconButton, 'ml-0.5')}
+					on:click={toggle}
+				>
+					<Menu {open} on:close={toggleOff} placement="bottom-end" classes={{ menu: 'p-1' }}>
+						{#if onsplitchange}
+							<MenuItem
+								icon={split ? LucideRows2 : LucideColumns2}
+								on:click={() => onsplitchange(!split)}
+							>
+								{split ? 'Show code below' : 'Show code on left'}
+							</MenuItem>
+						{/if}
+						<MenuItem icon={LucideListOrdered} on:click={() => (lineNumbers = !lineNumbers)}>
+							{lineNumbers ? 'Hide line numbers' : 'Show line numbers'}
+						</MenuItem>
+						{#if onopenstackblitz}
+							<MenuItem icon={SimpleIconsStackblitz} on:click={openStackBlitz}>
+								{sandbox.dirty ? 'Open edits in StackBlitz' : 'Open in StackBlitz'}
+							</MenuItem>
+						{/if}
+					</Menu>
+				</Button>
+			</Toggle>
+		</div>
+	</div>
+	<!-- Keyboard users switch with the View/Edit toggle; this is a shortcut for pointers. -->
+	<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+	<div class="-mt-9" {onpointerdown} onpointercancel={() => (down = null)} {onclick}>
+		{#if sandbox.mode === 'edit' && sandbox.module}
+			<sandbox.module.CodeEditor
+				bind:value={sandbox.source}
+				diagnostics={sandbox.diagnostics}
+				{lineNumbers}
+				caretAt={caret}
+				autofocus
+			/>
+		{:else}
+			<!-- `Code`'s own copy button is off; the toolbar above serves both modes. -->
+			<Code
+				source={sandbox.source}
+				showLineNumbers={lineNumbers}
+				{highlight}
+				copyButton={false}
+				class="outline-none"
+			/>
+		{/if}
+	</div>
+
+	{#if sandbox.loadError}
+		<div
+			class="absolute inset-x-2 bottom-2 rounded-sm border border-danger bg-danger/10 p-2 text-xs text-danger"
+		>
+			Couldn't load the editor: {sandbox.loadError}
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/lib/sandbox/PreviewError.svelte b/docs/src/lib/sandbox/PreviewError.svelte
new file mode 100644
index 0000000000..27f62208fa
--- /dev/null
+++ b/docs/src/lib/sandbox/PreviewError.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	let {
+		kind,
+		message,
+		line,
+		column
+	}: {
+		/** A compile error, or one thrown while mounting the build. */
+		kind: 'compile' | 'runtime';
+		message: string;
+		line?: number;
+		column?: number;
+	} = $props();
+</script>
+
+<!--
+	Sits over the preview rather than replacing it: the last successful build stays mounted
+	underneath (dimmed, to read as stale) so you can still see what you were working on while
+	fixing the typo. `pointer-events-none` keeps the stale chart's tooltips from responding to
+	a hover it can no longer answer correctly.
+-->
+<div
+	class="absolute inset-0 z-20 overflow-auto border-t-2 border-danger bg-surface-100/80 dark:bg-surface-200/80 p-4 backdrop-blur-[1px] pointer-events-none screenshot-hidden"
+	role="alert"
+>
+	<div class="text-base font-semibold text-surface-content">
+		Error {kind === 'compile' ? 'compiling' : 'running'} Example.svelte
+	</div>
+
+	<pre
+		class="mt-2 max-w-full overflow-auto rounded-sm bg-surface-300/80 p-2 font-mono text-xs whitespace-pre-wrap text-danger">{message}</pre>
+
+	{#if line != null}
+		<div class="mt-1 text-[10px] text-surface-content/50">
+			line {line}{#if column != null}&nbsp;column {column}{/if}
+		</div>
+	{/if}
+</div>
diff --git a/docs/src/lib/sandbox/SplitLayout.svelte b/docs/src/lib/sandbox/SplitLayout.svelte
new file mode 100644
index 0000000000..20cdbc51c0
--- /dev/null
+++ b/docs/src/lib/sandbox/SplitLayout.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import { Pane, PaneGroup, PaneResizer } from 'paneforge';
+
+	let { code, preview }: { code: Snippet; preview: Snippet } = $props();
+</script>
+
+<!--
+	Editor left, preview right. The divider position is remembered (`autoSaveId`) across
+	examples and reloads. The code scrolls inside its pane, capped to the viewport, so its
+	toolbar sticks to the pane's top rather than under the header.
+
+	Its own component so `Example` can load it (and paneforge) only when someone picks this
+	layout, rather than on every page that shows an example.
+-->
+<PaneGroup
+	direction="horizontal"
+	autoSaveId="layerchart-example-split"
+	class="border rounded-sm overflow-hidden"
+>
+	<Pane defaultSize={50} minSize={25} class="bg-surface-200 dark:bg-surface-300">
+		<div class="h-full max-h-[80dvh] overflow-auto [--code-toolbar-top:0px]">
+			{@render code()}
+		</div>
+	</Pane>
+	<PaneResizer
+		class="w-1 bg-surface-content/10 hover:bg-primary/40 data-[active]:bg-primary/60 transition-colors"
+	/>
+	<Pane defaultSize={50} minSize={25}>
+		{@render preview()}
+	</Pane>
+</PaneGroup>
diff --git a/docs/src/lib/sandbox/compile-options.ts b/docs/src/lib/sandbox/compile-options.ts
new file mode 100644
index 0000000000..707d1eff97
--- /dev/null
+++ b/docs/src/lib/sandbox/compile-options.ts
@@ -0,0 +1,15 @@
+import type { CompileOptions } from 'svelte/compiler';
+
+/**
+ * Matches the docs app's own config — examples use top-level `await` for their data.
+ * Shared with `registry-plugin.ts`, which compiles every example the same way to learn
+ * which Svelte runtime functions the sandbox has to offer.
+ */
+export const compileOptions = {
+	filename: 'Example.svelte',
+	generate: 'client',
+	css: 'injected',
+	runes: true,
+	dev: false,
+	experimental: { async: true }
+} satisfies CompileOptions;
diff --git a/docs/src/lib/sandbox/compile.ts b/docs/src/lib/sandbox/compile.ts
new file mode 100644
index 0000000000..de53a166f1
--- /dev/null
+++ b/docs/src/lib/sandbox/compile.ts
@@ -0,0 +1,105 @@
+import { compile } from 'svelte/compiler';
+import { compileOptions } from './compile-options';
+import { link } from './link';
+
+export type Diagnostic = {
+	from: number;
+	to: number;
+	severity: 'error' | 'warning';
+	message: string;
+	/** 1-based, for the error overlay. Absent when the compiler gave no position. */
+	line?: number;
+	column?: number;
+};
+
+export type CompileResult = {
+	/** Blob URL of the linked module, or `null` when compilation failed. */
+	url: string | null;
+	diagnostics: Diagnostic[];
+};
+
+/** Strip the trailing `https://svelte.dev/e/...` docs link the compiler appends. */
+function cleanMessage(message: string) {
+	return message.replace(/\s*https:\/\/svelte\.dev\/[ew]\/\S+\s*$/, '');
+}
+
+/** `base` is the example's directory, so relative imports of sibling modules resolve. */
+export async function compileSource(
+	source: string,
+	{ base }: { base?: string } = {}
+): Promise<CompileResult> {
+	const diagnostics: Diagnostic[] = [];
+
+	let js: string;
+	let warnings: { message: string; start?: { character: number }; end?: { character: number } }[];
+
+	try {
+		const result = compile(source, compileOptions);
+		js = result.js.code;
+		warnings = result.warnings ?? [];
+	} catch (err: any) {
+		// `position` is a `[from, to]` character-offset pair, which is what the editor wants;
+		// `start` carries the line/column the overlay reports.
+		const [from, to] = err.position ?? [0, 0];
+		return {
+			url: null,
+			diagnostics: [
+				{
+					from,
+					to,
+					severity: 'error',
+					message: cleanMessage(err.message ?? String(err)),
+					line: err.start?.line,
+					column: err.start?.column != null ? err.start.column + 1 : undefined
+				}
+			]
+		};
+	}
+
+	for (const warning of warnings) {
+		diagnostics.push({
+			from: warning.start?.character ?? 0,
+			to: warning.end?.character ?? 0,
+			severity: 'warning',
+			message: cleanMessage(warning.message)
+		});
+	}
+
+	const linked = await link(js, base);
+	if (!linked.ok) {
+		const problems = [
+			...linked.unresolved.map((specifier) => ({
+				specifier,
+				message: `'${specifier}' is not available in the sandbox`
+			})),
+			...linked.failed.map(({ specifier, message }) => ({
+				specifier,
+				message: `Couldn't load '${specifier}': ${message}`
+			})),
+			...linked.missing.map(({ specifier, names }) =>
+				specifier === 'svelte/internal/client'
+					? {
+							specifier: '',
+							message: `Uses Svelte features no example uses, so the sandbox doesn't include them (${names.map((name) => `$.${name}`).join(', ')})`
+						}
+					: {
+							specifier: names[0],
+							message: `'${specifier}' doesn't provide ${names.map((name) => `'${name}'`).join(', ')} in the sandbox, which only offers what the examples use`
+						}
+			)
+		];
+		// No source position for an import problem — pin it to the offending specifier.
+		for (const { specifier, message } of problems) {
+			const at = source.indexOf(specifier);
+			diagnostics.push({
+				from: at === -1 ? 0 : at,
+				to: at === -1 ? 0 : at + specifier.length,
+				severity: 'error',
+				message
+			});
+		}
+		return { url: null, diagnostics };
+	}
+
+	return { url: linked.url, diagnostics };
+}
diff --git a/docs/src/lib/sandbox/lazy.ts b/docs/src/lib/sandbox/lazy.ts
new file mode 100644
index 0000000000..1132eeddfd
--- /dev/null
+++ b/docs/src/lib/sandbox/lazy.ts
@@ -0,0 +1,9 @@
+/**
+ * Single dynamic-import boundary for the sandbox.
+ *
+ * Everything reachable from here — `svelte/compiler`, CodeMirror, and the module
+ * registry — must only ever be loaded via `import('./lazy')`, so that docs pages
+ * that are never edited don't pay for any of it. Don't import this module statically.
+ */
+export { compileSource, type Diagnostic, type CompileResult } from './compile';
+export { default as CodeEditor } from './CodeEditor.svelte';
diff --git a/docs/src/lib/sandbox/link.ts b/docs/src/lib/sandbox/link.ts
new file mode 100644
index 0000000000..56cd4223dd
--- /dev/null
+++ b/docs/src/lib/sandbox/link.ts
@@ -0,0 +1,138 @@
+import { init, parse } from 'es-module-lexer';
+import { resolve, type Namespace } from './registry';
+
+const GLOBAL_KEY = '__layerchartSandboxRegistry';
+
+/** Loaded namespaces by module id, read by the shims through `globalThis`. */
+const loaded: Record<string, Namespace> = ((globalThis as any)[GLOBAL_KEY] ??= {});
+
+/** Blob URL per module id — a module's export shape never changes, so build each shim once. */
+const shimUrls = new Map<string, string>();
+
+/**
+ * Build an ES module that re-exports a loaded namespace.
+ *
+ * Export names are read off the live namespace object, so this covers reserved
+ * words (`default`, `class`) and anything else that isn't a bare identifier.
+ */
+function shimFor(id: string): string {
+	const cached = shimUrls.get(id);
+	if (cached) return cached;
+
+	const names = Object.keys(loaded[id]);
+	const lines = [`const m = globalThis[${JSON.stringify(GLOBAL_KEY)}][${JSON.stringify(id)}];`];
+	const exports: string[] = [];
+	names.forEach((name, i) => {
+		lines.push(`const _${i} = m[${JSON.stringify(name)}];`);
+		exports.push(`_${i} as ${JSON.stringify(name)}`);
+	});
+	lines.push(exports.length ? `export { ${exports.join(', ')} };` : 'export {};');
+
+	const url = URL.createObjectURL(new Blob([lines.join('\n')], { type: 'text/javascript' }));
+	shimUrls.set(id, url);
+	return url;
+}
+
+/**
+ * Imports with a known specifier: static `import`/`export … from` (`d === -1`) and
+ * `import('literal')`. `import.meta` (`d === -2`) and computed `import(expr)` (no `n`)
+ * are left alone.
+ */
+async function moduleImports(js: string) {
+	await init;
+	const [imports] = parse(js);
+	return imports.filter((entry) => entry.n && entry.d !== -2);
+}
+
+/** Every module specifier compiled output imports, without duplicates. */
+export async function importSpecifiers(js: string) {
+	return [...new Set((await moduleImports(js)).map((entry) => entry.n!))];
+}
+
+/**
+ * The names a static import asks of its module, or `null` when it can't tell. A
+ * namespace import (`import * as $ from …`) asks for whatever is read off the namespace,
+ * which is how compiled output uses the Svelte runtime.
+ */
+function requestedNames(js: string, statement: string): string[] | null {
+	const namespace = statement.match(/^import\s*\*\s*as\s+([\w$]+)/);
+	if (namespace) {
+		const alias = namespace[1].replace(/\$/g, '\\$');
+		const members = js.matchAll(new RegExp(`(?<![\\w$.])${alias}\\.([A-Za-z_$][\\w$]*)`, 'g'));
+		return [...new Set(Array.from(members, (match) => match[1]))];
+	}
+	const clause = statement.match(/^import\s*([\w$]+)?\s*,?\s*(?:\{([^}]*)\})?\s*from\b/);
+	if (!clause) return null;
+	const names = clause[1] ? ['default'] : [];
+	for (const part of (clause[2] ?? '').split(',')) {
+		const name = part.trim().split(/\s+as\s+/)[0];
+		if (name) names.push(name.replace(/^['"]|['"]$/g, ''));
+	}
+	return names;
+}
+
+export type LinkResult =
+	| { ok: true; url: string }
+	| {
+			ok: false;
+			unresolved: string[];
+			failed: { specifier: string; message: string }[];
+			/** Names the sandbox's copy of a module doesn't offer (see `registry-plugin.ts`). */
+			missing: { specifier: string; names: string[] }[];
+	  };
+
+/**
+ * Load every module the compiled output imports, rewrite its specifiers to shims, and
+ * return a blob URL for the result. `base` is the example's directory, for relative imports.
+ */
+export async function link(js: string, base?: string): Promise<LinkResult> {
+	const imports = await moduleImports(js);
+	const unresolved: string[] = [];
+	const failed: { specifier: string; message: string }[] = [];
+	const ids = new Map<string, string>();
+
+	await Promise.all(
+		[...new Set(imports.map((entry) => entry.n!))].map(async (specifier) => {
+			const module = resolve(specifier, base);
+			if (!module) {
+				unresolved.push(specifier);
+				return;
+			}
+			try {
+				loaded[module.id] ??= await module.load();
+				ids.set(specifier, module.id);
+			} catch (err) {
+				failed.push({ specifier, message: err instanceof Error ? err.message : String(err) });
+			}
+		})
+	);
+
+	// Modules are offered with only the names the examples use, so check before the
+	// browser fails on a blob URL it can't name.
+	const missing: { specifier: string; names: string[] }[] = [];
+	for (const entry of imports) {
+		const id = ids.get(entry.n!);
+		if (!id || entry.d !== -1) continue;
+		const names = requestedNames(js, js.slice(entry.ss, entry.se));
+		const absent = names?.filter((name) => !(name in loaded[id])) ?? [];
+		if (absent.length) missing.push({ specifier: entry.n!, names: absent });
+	}
+
+	if (unresolved.length || failed.length || missing.length) {
+		return { ok: false, unresolved, failed, missing };
+	}
+
+	// Splice from the end so earlier positions stay valid.
+	let rewritten = js;
+	for (const entry of imports.toReversed()) {
+		const url = shimFor(ids.get(entry.n!)!);
+		// A static import's range is the bare specifier; a dynamic one's includes the quotes.
+		const replacement = entry.d === -1 ? url : JSON.stringify(url);
+		rewritten = rewritten.slice(0, entry.s) + replacement + rewritten.slice(entry.e);
+	}
+
+	return {
+		ok: true,
+		url: URL.createObjectURL(new Blob([rewritten], { type: 'text/javascript' }))
+	};
+}
diff --git a/docs/src/lib/sandbox/registry-plugin.ts b/docs/src/lib/sandbox/registry-plugin.ts
new file mode 100644
index 0000000000..c9e3c62c27
--- /dev/null
+++ b/docs/src/lib/sandbox/registry-plugin.ts
@@ -0,0 +1,231 @@
+import { existsSync, globSync, readFileSync } from 'node:fs';
+import { dirname, join, posix, relative, resolve } from 'node:path';
+import { compile, parse } from 'svelte/compiler';
+import type { Plugin } from 'vite';
+import { exposeData } from '../utils/exampleSource';
+import { compileOptions } from './compile-options';
+
+/**
+ * Generates `virtual:sandbox-registry`: everything edited examples may import, as loaders
+ * — packages, `$lib` modules, and the helper files that sit next to an example.
+ *
+ * Each module is offered with only the names some example imports, through a small
+ * re-export module, not as its whole namespace. Exposing a whole namespace (`import('layerchart')`)
+ * stops the bundler dropping unused exports, and the extra code lands in chunks every docs
+ * page loads. Names an example already imports are already in the build, so offering
+ * them costs pages nothing.
+ *
+ * The Svelte runtime is treated the same way. Compiled components import all of
+ * `svelte/internal/client`, so every example is compiled here to learn which of its
+ * functions they call.
+ *
+ * An edit can use any name, or any template feature, some example uses. `link.ts`
+ * reports anything else by name rather than letting the browser fail on it.
+ */
+
+const REGISTRY_ID = 'virtual:sandbox-registry';
+const EXPORTS_PREFIX = 'virtual:sandbox-exports/';
+
+/**
+ * The key in a virtual id, in base64url. Written plainly, `$lib/…/Controls.svelte` or
+ * `$lib/geo.remote.js` would end the id with that extension, and the Svelte and SvelteKit
+ * plugins would pick the re-export module up as a component or a remote-functions file.
+ */
+const toId = (key: string) => EXPORTS_PREFIX + Buffer.from(key).toString('base64url');
+const fromId = (id: string) =>
+	Buffer.from(id.slice(EXPORTS_PREFIX.length + 1), 'base64url').toString();
+const RUNTIME = 'svelte/internal/client';
+
+/**
+ * Compiled output's own runtime imports: `svelte/internal/client` is gathered from compiled
+ * examples below, and its side-effect-only siblings are listed by hand in `registry.ts`.
+ */
+const isRuntime = (specifier: string) =>
+	specifier === 'svelte/internal' || specifier.startsWith('svelte/internal/');
+
+/** `target` is what the generated loader imports; it differs from the key for sibling files. */
+type Usage = { names: Set<string>; whole: boolean; target: string };
+
+type Example = { dir: string; source: string };
+
+/** Compiled output imports the runtime as `import * as $ from 'svelte/internal/client'`. */
+const RUNTIME_MEMBER = /(?<![\w$.])\$\.([A-Za-z_$][\w$]*)/g;
+
+/** `dir` is the example's folder as the app sees it (`/src/examples/components/GeoPath/`). */
+function readExamples(root: string, examplesDir: string): Example[] {
+	return globSync('**/*.svelte', { cwd: examplesDir }).map((path) => {
+		const file = join(examplesDir, path);
+		const dir = '/' + relative(root, dirname(file)).split('\\').join('/') + '/';
+		return { dir, source: readFileSync(file, 'utf8') };
+	});
+}
+
+/**
+ * The registry key and loader target for an import. Packages and `$lib` modules are keyed
+ * as written. A relative import is keyed by the path it points to (what `registry.ts`
+ * rebuilds from the example's folder), and targets the file that's actually there, since
+ * examples write `./timings.js` for a `.ts` file.
+ */
+function locate(root: string, dir: string, specifier: string) {
+	if (!/^\.\.?\//.test(specifier)) return { key: specifier, target: specifier };
+	const key = posix.join(dir, specifier);
+	const candidates = [key, key.replace(/\.js$/, '.ts'), `${key}.ts`, `${key}.js`];
+	const target = candidates.find((candidate) => existsSync(join(root, candidate)));
+	return target ? { key, target } : undefined;
+}
+
+/** Every import across the examples, with the names each one uses. */
+function scanImports(root: string, examples: Example[]) {
+	const usage = new Map<string, Usage>();
+	const use = (dir: string, specifier: string) => {
+		const located = locate(root, dir, specifier);
+		if (!located) return; // a missing file fails that example's own build
+		let entry = usage.get(located.key);
+		if (!entry) {
+			entry = { names: new Set(), whole: false, target: located.target };
+			usage.set(located.key, entry);
+		}
+		return entry;
+	};
+
+	for (const { dir, source } of examples) {
+		let ast;
+		try {
+			ast = parse(source, { modern: true });
+		} catch {
+			continue; // a broken example fails its own build; nothing to offer from it
+		}
+
+		for (const script of [ast.instance, ast.module]) {
+			if (!script) continue;
+			for (const node of script.content.body as any[]) {
+				if (node.type !== 'ImportDeclaration' || node.importKind === 'type') continue;
+				const specifier: string = node.source.value;
+				if (isRuntime(specifier)) continue;
+				const entry = use(dir, specifier);
+				if (!entry) continue;
+				for (const spec of node.specifiers) {
+					if (spec.importKind === 'type') continue;
+					if (spec.type === 'ImportNamespaceSpecifier') entry.whole = true;
+					else if (spec.type === 'ImportDefaultSpecifier') entry.names.add('default');
+					else entry.names.add(spec.imported.name ?? spec.imported.value);
+				}
+			}
+
+			// `import('pkg')` hands back the whole namespace.
+			const text = source.slice(script.start, script.end);
+			for (const match of text.matchAll(/\bimport\(\s*(['"])([^'"]+)\1\s*\)/g)) {
+				const entry = isRuntime(match[2]) ? undefined : use(dir, match[2]);
+				if (entry) entry.whole = true;
+			}
+		}
+	}
+	return usage;
+}
+
+/** The runtime functions compiled examples call. Compiles every example, so only on demand. */
+function scanRuntime(examples: Example[]) {
+	const names = new Set<string>();
+	for (const { source } of examples) {
+		try {
+			// Compiled exactly as the sandbox compiles, so these are the calls it makes.
+			const { js } = compile(exposeData(source), compileOptions);
+			for (const match of js.code.matchAll(RUNTIME_MEMBER)) names.add(match[1]);
+		} catch {
+			// a broken example fails its own build
+		}
+	}
+	return names;
+}
+
+/** What the editor chunk imports (`lazy.ts`), so Vite doesn't discover it mid-edit. */
+const EDITOR_DEPS = [
+	'@codemirror/autocomplete',
+	'@codemirror/commands',
+	'@codemirror/language',
+	'@codemirror/lint',
+	'@codemirror/state',
+	'@codemirror/view',
+	'@lezer/highlight',
+	'@replit/codemirror-lang-svelte',
+	'es-module-lexer',
+	'svelte/compiler'
+];
+
+export function sandboxRegistry(): Plugin {
+	let root = '';
+	let examplesDir = '';
+	let read: Example[] | null = null;
+	let usage: Map<string, Usage> | null = null;
+	let runtime: Set<string> | null = null;
+	const examples = () => (read ??= readExamples(root, examplesDir));
+	const imports = () => (usage ??= scanImports(root, examples()));
+	const runtimeNames = () => (runtime ??= scanRuntime(examples()));
+
+	return {
+		name: 'layerchart-docs:sandbox-registry',
+
+		config(config, { command }) {
+			root = resolve(config.root ?? '');
+			examplesDir = join(root, 'src/examples/components');
+			if (command !== 'serve') return;
+			// Everything here loads lazily on first edit. Undiscovered, each one makes the dev
+			// server re-optimize and reload the page in the middle of that edit. Only npm
+			// packages can be pre-bundled; the workspace `layerchart` and `svelte` never are.
+			const packages = [...imports().keys()].filter(
+				(specifier) => !/^(\$|~|\/|svelte(\/|$)|layerchart(\/|$))/.test(specifier)
+			);
+			return { optimizeDeps: { include: [...EDITOR_DEPS, ...packages] } };
+		},
+
+		resolveId(id) {
+			if (id === REGISTRY_ID || id.startsWith(EXPORTS_PREFIX)) return '\0' + id;
+		},
+
+		async load(id) {
+			if (id === '\0' + REGISTRY_ID) {
+				const entries: [string, Usage][] = [
+					...imports(),
+					[RUNTIME, { names: new Set(), whole: false, target: RUNTIME }]
+				];
+				const lines = entries
+					.sort(([a], [b]) => a.localeCompare(b))
+					.map(([key, { whole, target }]) => {
+						const source = whole ? target : toId(key);
+						return `\t${JSON.stringify(key)}: () => import(${JSON.stringify(source)}),`;
+					});
+				return `export default {\n${lines.join('\n')}\n};\n`;
+			}
+
+			if (id.startsWith('\0' + EXPORTS_PREFIX)) {
+				const key = fromId(id);
+				const entry = imports().get(key);
+				let names = [...(entry?.names ?? [])];
+				if (key === RUNTIME) {
+					// `$.` read off compiled output; drop anything that only looked like a call.
+					// @ts-expect-error - no declarations for 'svelte/internal/client'
+					const exported = await import('svelte/internal/client'); // eslint-disable-line svelte/no-svelte-internal -- reads what it exports
+					names = [...runtimeNames()].filter((name) => name in exported);
+				}
+				names = names
+					.sort()
+					.map((name) =>
+						/^[\p{ID_Start}$_][\p{ID_Continue}$]*$/u.test(name) ? name : JSON.stringify(name)
+					);
+				return `export { ${names.join(', ')} } from ${JSON.stringify(entry?.target ?? key)};\n`;
+			}
+		},
+
+		// An edited, added or removed example can change what's offered.
+		hotUpdate({ file }) {
+			if (!file.endsWith('.svelte') || relative(examplesDir, file).startsWith('..')) return;
+			read = usage = runtime = null;
+			for (const id of this.environment.moduleGraph.idToModuleMap.keys()) {
+				if (id === '\0' + REGISTRY_ID || id.startsWith('\0' + EXPORTS_PREFIX)) {
+					const module = this.environment.moduleGraph.getModuleById(id);
+					if (module) this.environment.moduleGraph.invalidateModule(module);
+				}
+			}
+		}
+	};
+}
diff --git a/docs/src/lib/sandbox/registry.test.ts b/docs/src/lib/sandbox/registry.test.ts
new file mode 100644
index 0000000000..ebbd8995e5
--- /dev/null
+++ b/docs/src/lib/sandbox/registry.test.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it } from 'vitest';
+import { compile } from 'svelte/compiler';
+import { exposeData } from '$lib/utils/exampleSource';
+import { compileOptions } from './compile-options';
+import { importSpecifiers } from './link';
+import { resolve } from './registry';
+
+const examples = import.meta.glob<string>('/src/examples/components/**/*.svelte', {
+	query: '?raw',
+	import: 'default',
+	eager: true
+});
+
+describe('sandbox registry', () => {
+	it('resolves every import of every example', async () => {
+		const unresolved: string[] = [];
+
+		for (const [path, source] of Object.entries(examples)) {
+			// Compiled exactly as the sandbox does, so type-only imports (erased) and the
+			// runtime's own `svelte/internal/*` imports are checked as the browser sees them.
+			const { js } = compile(exposeData(source), compileOptions);
+			const base = path.slice(0, path.lastIndexOf('/') + 1);
+			for (const specifier of await importSpecifiers(js.code)) {
+				if (!resolve(specifier, base)) unresolved.push(`${path}: ${specifier}`);
+			}
+		}
+
+		// Add the module to `registry.ts` — otherwise editing these examples fails.
+		expect(unresolved).toEqual([]);
+	});
+});
+
+describe('importSpecifiers', () => {
+	it('finds imports that span several lines', async () => {
+		// Compiled output keeps the source's formatting, so long import lists wrap.
+		const js =
+			"import * as $ from 'svelte/internal/client';\nimport {\n\tArea,\n\tChart\n} from 'layerchart';\n";
+		expect(await importSpecifiers(js)).toEqual(['svelte/internal/client', 'layerchart']);
+	});
+});
diff --git a/docs/src/lib/sandbox/registry.ts b/docs/src/lib/sandbox/registry.ts
new file mode 100644
index 0000000000..539b75ce8a
--- /dev/null
+++ b/docs/src/lib/sandbox/registry.ts
@@ -0,0 +1,40 @@
+/**
+ * Modules the sandbox exposes to user code.
+ *
+ * These are the *same* instances the docs app itself is built with, so an edited
+ * example runs against the workspace build of `layerchart` (not a published copy
+ * fetched from a CDN) and shares a single Svelte runtime with the host page.
+ *
+ * Every entry is a loader, so an edit only fetches what that example imports. They come
+ * from `virtual:sandbox-registry` (see `registry-plugin.ts`), generated from the
+ * examples' own imports: packages, `$lib` modules and sibling files, each offering only
+ * the names the examples use, so the sandbox doesn't make docs pages load more.
+ * `registry.test.ts` checks every example's imports resolve here.
+ */
+import generated from 'virtual:sandbox-registry';
+
+export type Namespace = Record<string, unknown>;
+type Loader = () => Promise<Namespace>;
+
+/** Side-effect-only imports in compiled output — the host runtime has already run them. */
+const empty: Loader = async () => ({});
+
+const modules: Record<string, Loader> = {
+	...generated,
+	// Side-effect-only modules compiled components import. `svelte/internal/client` itself
+	// is generated, with only the functions compiled examples call.
+	'svelte/internal/disclose-version': empty,
+	'svelte/internal/flags/async': empty,
+	'svelte/internal/flags/legacy': empty
+};
+
+/**
+ * Finds the module for an import specifier. `base` is the example's directory
+ * (`/src/examples/components/GeoPath/`), which turns a relative import into the path the
+ * registry keys it by. `id` is stable across examples, so callers can cache per module.
+ */
+export function resolve(specifier: string, base?: string) {
+	const id =
+		base && /^\.\.?\//.test(specifier) ? new URL(specifier, `file://${base}`).pathname : specifier;
+	return Object.hasOwn(modules, id) ? { id, load: modules[id] } : undefined;
+}
diff --git a/docs/src/lib/sandbox/state.svelte.ts b/docs/src/lib/sandbox/state.svelte.ts
new file mode 100644
index 0000000000..472046aed4
--- /dev/null
+++ b/docs/src/lib/sandbox/state.svelte.ts
@@ -0,0 +1,304 @@
+import { mount, settled, unmount, untrack } from 'svelte';
+import type { Attachment } from 'svelte/attachments';
+import { normalizeSource } from '$lib/utils/exampleSource';
+import type { Diagnostic } from './compile';
+
+type SandboxModule = typeof import('./lazy');
+
+/**
+ * Everything `Example` needs to turn a read-only example into an editable one.
+ *
+ * Must be called during component initialisation — it registers effects.
+ */
+export function createSandbox(
+	getSource: () => string,
+	{
+		transform,
+		base
+	}: {
+		/** Applied to the source before compiling only — never shown in the editor. */
+		transform?: (source: string) => string;
+		/** The example's directory (`/src/examples/components/GeoPath/`), for relative imports. */
+		base?: () => string | undefined;
+	} = {}
+) {
+	let module = $state<SandboxModule | null>(null);
+	let pending = $state(false);
+	let loadError = $state<string | null>(null);
+
+	let mode = $state<'view' | 'edit'>('view');
+	let live = $state(false);
+
+	/**
+	 * `Example` resolves its source asynchronously, so these are seeded when a non-empty
+	 * source arrives rather than at construction. Normalised so the editor starts from
+	 * exactly the text `Code` displays — otherwise Edit shows a trailing blank line View
+	 * doesn't have.
+	 */
+	const seed = () => normalizeSource(getSource());
+	const initial = untrack(seed);
+	let original = $state(initial);
+	let editorValue = $state(initial);
+	let debounced = $state(initial);
+
+	let diagnostics = $state<Diagnostic[]>([]);
+	let runtimeError = $state<string | null>(null);
+	/**
+	 * `$state.raw` — `mount()` returns an exports object whose properties are getters onto
+	 * the component's reactive state. Wrapping that in a `$state` proxy breaks them, so
+	 * `instance.data` reads back `undefined` and the Data dialog vanishes after an edit.
+	 */
+	let instance = $state.raw<Record<string, any> | null>(null);
+
+	/**
+	 * A different source is a different example: SvelteKit keeps the same `Example` when
+	 * navigating between examples, so start over rather than keep showing (and running)
+	 * the previous one. Edits never change `getSource()`, so typing can't land here.
+	 */
+	$effect(() => {
+		const next = seed();
+		untrack(() => {
+			if (!next || next === original) return;
+			original = editorValue = debounced = next;
+			live = false;
+			build = null;
+			diagnostics = [];
+			runtimeError = null;
+			instance = null;
+		});
+	});
+
+	/**
+	 * The real example keeps rendering until the source actually changes. Compiling on
+	 * activation instead would remount the chart the moment the editor opens, and examples
+	 * built on `createDateSeries` and friends draw fresh `Math.random()` data every mount —
+	 * so merely looking at the source would appear to redraw the chart. Latched, because
+	 * toggling back on undo would reshuffle again.
+	 */
+	$effect(() => {
+		if (editorValue !== untrack(() => original)) live = true;
+	});
+
+	$effect(() => {
+		const next = editorValue;
+		const timer = setTimeout(() => (debounced = next), 120);
+		return () => clearTimeout(timer);
+	});
+
+	/**
+	 * Returns the in-flight promise rather than bailing out when a fetch is already running:
+	 * a click landing mid-prefetch has to await the *same* load, otherwise it resolves
+	 * immediately and switches to a mode whose editor doesn't exist yet.
+	 */
+	let inFlight: Promise<void> | null = null;
+	function load() {
+		// Constant per build, so the server build drops the editor chunk entirely. It only
+		// ever loads on a click, and server-side it would pull the compiler, CodeMirror and
+		// every package an edit can import into the Cloudflare Worker.
+		if (import.meta.env.SSR) return Promise.resolve();
+		if (module) return Promise.resolve();
+		inFlight ??= import('./lazy')
+			.then((m) => {
+				module = m;
+			})
+			.catch((err) => {
+				loadError = err instanceof Error ? err.message : String(err);
+			});
+		return inFlight;
+	}
+
+	async function setMode(next: 'view' | 'edit') {
+		if (next === 'edit' && !module) {
+			// Only for a load the user asked for: the hover prefetch shows no progress, since
+			// a spinner for a fetch nobody requested is just noise.
+			pending = true;
+			await load();
+			pending = false;
+		}
+		mode = next;
+	}
+
+	/**
+	 * Compiling and mounting are deliberately separate.
+	 *
+	 * Compiling on every keystroke but only publishing *successful* builds means a broken
+	 * edit leaves the last good render on screen instead of blanking the preview — you can
+	 * still see what you were working on while you fix the typo, which is the whole point
+	 * of a live editor.
+	 */
+	let build = $state<string | null>(null);
+
+	$effect(() => {
+		const sb = module;
+		const src = debounced;
+		if (!sb || !live) return;
+
+		// Compiling is async (imports load on demand), so a slow build can finish after a
+		// newer one — drop it rather than let it replace what the user typed since.
+		let stale = false;
+		sb.compileSource(transform ? transform(src) : src, { base: base?.() }).then((result) => {
+			if (stale) {
+				if (result.url) URL.revokeObjectURL(result.url);
+				return;
+			}
+			diagnostics = result.diagnostics;
+			if (result.url) {
+				build = result.url;
+				runtimeError = null;
+			}
+		});
+		return () => {
+			stale = true;
+		};
+	});
+
+	/** Whether an edited build is on screen. Until then `Example` keeps the real example up. */
+	let showing = $state(false);
+
+	/**
+	 * Mounts each successful build without blanking the preview.
+	 *
+	 * Unmounting the old component and then mounting the new one leaves the preview empty
+	 * for a frame or more (the module import is async, and charts draw only after
+	 * measuring their container), and the collapsed height makes the page jump. Instead
+	 * the new component mounts into a hidden layer the preview's width, gets time to
+	 * finish (async data, then a couple of frames to measure and draw), and replaces
+	 * what's on screen in one step. A build that throws while mounting leaves the last
+	 * one up.
+	 */
+	const preview: Attachment<HTMLElement> = (el) => {
+		let current: Mounted | null = null;
+
+		$effect(() => {
+			const url = build;
+			if (!url) return;
+			let superseded = false;
+
+			(async () => {
+				const layer = document.createElement('div');
+				layer.style.cssText = HIDDEN_LAYER;
+				let next: Mounted | null = null;
+				try {
+					const mod = await import(/* @vite-ignore */ url);
+					if (superseded) return;
+					el.append(layer);
+					next = { layer, component: mount(mod.default, { target: layer }) };
+					await Promise.race([settled(), delay(1000)]);
+					await frames(2);
+				} catch (err) {
+					dispose(next);
+					layer.remove();
+					if (!superseded) runtimeError = err instanceof Error ? err.message : String(err);
+					return;
+				} finally {
+					URL.revokeObjectURL(url);
+				}
+				if (superseded) return dispose(next);
+
+				dispose(current);
+				layer.style.cssText = '';
+				current = next;
+				instance = next.component;
+				runtimeError = null;
+				showing = true;
+			})();
+
+			return () => {
+				superseded = true;
+			};
+		});
+
+		return () => {
+			dispose(current);
+			current = null;
+			instance = null;
+			showing = false;
+		};
+	};
+
+	const errors = $derived(diagnostics.filter((d) => d.severity === 'error'));
+
+	/**
+	 * The one thing worth surfacing over the preview, or `null` when the build is good. A
+	 * compile error wins: it's about the source as typed now, while a runtime error belongs
+	 * to the last build that compiled.
+	 */
+	const error = $derived.by(() => {
+		const first = errors[0];
+		if (first) {
+			return {
+				kind: 'compile' as const,
+				message: first.message,
+				line: first.line,
+				column: first.column
+			};
+		}
+		return runtimeError ? { kind: 'runtime' as const, message: runtimeError } : null;
+	});
+
+	return {
+		preview,
+		load,
+		setMode,
+		reset: () => (editorValue = original),
+
+		get module() {
+			return module;
+		},
+		get mode() {
+			return mode;
+		},
+		get live() {
+			return live;
+		},
+		get pending() {
+			return pending;
+		},
+		get loadError() {
+			return loadError;
+		},
+		get diagnostics() {
+			return diagnostics;
+		},
+		get instance() {
+			return instance;
+		},
+		get showing() {
+			return showing;
+		},
+		get dirty() {
+			return editorValue !== original;
+		},
+		get source() {
+			return editorValue;
+		},
+		set source(next: string) {
+			editorValue = next;
+		},
+		get error() {
+			return error;
+		}
+	};
+}
+
+export type Sandbox = ReturnType<typeof createSandbox>;
+
+type Mounted = { layer: HTMLElement; component: Record<string, any> };
+
+/** Laid out at the preview's width so charts measure correctly, but not seen or hit. */
+const HIDDEN_LAYER = 'position:absolute;inset-inline:0;top:0;visibility:hidden;pointer-events:none';
+
+function dispose(mounted: Mounted | null) {
+	if (!mounted) return;
+	unmount(mounted.component);
+	mounted.layer.remove();
+}
+
+const delay = (ms: number) => new Promise((done) => setTimeout(done, ms));
+
+function frames(count: number) {
+	return new Promise<void>((done) => {
+		const step = (left: number) => (left ? requestAnimationFrame(() => step(left - 1)) : done());
+		step(count);
+	});
+}
diff --git a/docs/src/lib/sandbox/virtual.d.ts b/docs/src/lib/sandbox/virtual.d.ts
new file mode 100644
index 0000000000..47ad4b3f32
--- /dev/null
+++ b/docs/src/lib/sandbox/virtual.d.ts
@@ -0,0 +1,4 @@
+declare module 'virtual:sandbox-registry' {
+	const packages: Record<string, () => Promise<Record<string, unknown>>>;
+	export default packages;
+}
diff --git a/docs/src/lib/stackblitz.remote.ts b/docs/src/lib/stackblitz.remote.ts
index d048d62426..01e389bd0b 100644
--- a/docs/src/lib/stackblitz.remote.ts
+++ b/docs/src/lib/stackblitz.remote.ts
@@ -1,4 +1,4 @@
-import { query, getRequestEvent } from '$app/server';
+import { command, getRequestEvent } from '$app/server';
 import { z } from 'zod';
 import stackblitzFiles from '$static/stackblitz-files.json';
 import remoteSources from '$static/remote-sources.json';
@@ -160,22 +160,28 @@ ${functionBodies.join('\n\n')}
 `;
 }
 
-export const getExample = query(
+// A `command` rather than a `query` so the edited source travels in a POST body: queries
+// put their arguments in the URL, and large examples exceed URL length limits.
+export const getExample = command(
 	z.object({
 		component: z.string(),
-		name: z.string()
+		name: z.string(),
+		/** In-page edits, used in place of the example file (supporting files follow its imports) */
+		source: z.string().optional()
 	}),
-	async ({ component, name }) => {
+	async ({ component, name, source }) => {
 		// Construct the path to match import.meta.glob pattern
 		const examplePath = `/src/examples/components/${component}/${name}.svelte`;
 
 		// Get the source code from the pre-loaded modules
-		const code = exampleModules[examplePath] as string | undefined;
+		const exampleCode = exampleModules[examplePath] as string | undefined;
 
-		if (!code) {
+		if (!exampleCode) {
 			throw new Error('Example not found');
 		}
 
+		const code = source ?? exampleCode;
+
 		// Remove `export { data };` from the code
 		const cleanCode = code.replace(/(\n\s*)*^.*export .*;.*$(\n\s*)*/gm, '\n');
 
diff --git a/docs/src/lib/utils/exampleSource.ts b/docs/src/lib/utils/exampleSource.ts
new file mode 100644
index 0000000000..33ac507a01
--- /dev/null
+++ b/docs/src/lib/utils/exampleSource.ts
@@ -0,0 +1,41 @@
+const CLOSE_SCRIPT = '</' + 'script>';
+
+/**
+ * Mirrors what `Code` actually renders — it displays `stripIndent(source)`, which strips
+ * the common leading indent and trims both ends. Seeding the editor with the raw source
+ * instead leaves the file's trailing newline as a visible empty last line, so Edit shows
+ * one more line than View.
+ *
+ * Kept in step by hand: `stripIndent` lives in `@layerstack/docs` but isn't re-exported
+ * from its public `utils` entry.
+ */
+export function normalizeSource(text: string) {
+	const lines = text.split('\n');
+	const minIndent = lines
+		.filter((line) => line.trim().length > 0)
+		.reduce((min, line) => Math.min(min, line.match(/^(\s*)/)?.[1].length ?? 0), Infinity);
+	return lines
+		.map((line) => line.slice(minIndent))
+		.join('\n')
+		.trim();
+}
+
+/**
+ * Examples end in `export { data };` on disk, but the docs pipeline strips it from the
+ * source it hands `Example` — it exists purely so the Data dialog can read the example's
+ * data, and showing it would just confuse readers. Put it back before compiling an edited
+ * example, or the Data button disappears the moment anyone types.
+ *
+ * Deliberately narrow: only when the source declares a top-level `data`, doesn't already
+ * export it, and has exactly one closing script tag to append to (a `<script module>`
+ * block would otherwise receive the export, where `data` isn't in scope).
+ *
+ * Lives here rather than inside `Example.svelte` because a literal closing-script string
+ * in a component's `<script>` ends the block early and breaks the parse.
+ */
+export function exposeData(source: string) {
+	if (/export\s*\{[^}]*\bdata\b|export\s+(?:const|let|var)\s+data\b/.test(source)) return source;
+	if (!/^[ \t]*(?:const|let|var)\s+data\b/m.test(source)) return source;
+	if (source.split(CLOSE_SCRIPT).length !== 2) return source;
+	return source.replace(CLOSE_SCRIPT, `\texport { data };\n${CLOSE_SCRIPT}`);
+}
diff --git a/docs/src/lib/utils/stackblitz.svelte.ts b/docs/src/lib/utils/stackblitz.svelte.ts
index 33bee7b688..5aacb3c5eb 100644
--- a/docs/src/lib/utils/stackblitz.svelte.ts
+++ b/docs/src/lib/utils/stackblitz.svelte.ts
@@ -1,9 +1,10 @@
 import sdk from '@stackblitz/sdk';
 import { getExample } from '$lib/stackblitz.remote';
 
-export async function openInStackBlitz(component: string, name: string) {
+/** `source` opens in-page edits instead of the original example. */
+export async function openInStackBlitz(component: string, name: string, source?: string) {
 	try {
-		const { code: exampleCode, files } = await getExample({ component, name });
+		const { code: exampleCode, files } = await getExample({ component, name, source });
 
 		sdk.openProject(
 			{
diff --git a/docs/src/routes/+page.svelte b/docs/src/routes/+page.svelte
index 173dfd0399..9d21fba419 100644
--- a/docs/src/routes/+page.svelte
+++ b/docs/src/routes/+page.svelte
@@ -59,14 +59,23 @@
 			component: 'Chart',
 			example: 'compound-separate-scales-with-stacked-charts-and-overridden-marks'
 		},
+		{ component: 'Chart', example: 'facet-lines' },
+		{ component: 'Chart', example: 'isometric-treemap' },
+		{ component: 'Chart', example: 'isometric-stacked-columns' },
+		{ component: 'Chart', example: 'isometric-areas' },
+		{ component: 'Chart', example: 'isometric-scatter-3d' },
 		{ component: 'LineChart', example: 'gradient-encoding' },
 		{ component: 'Trail', example: 'tdf-stage' },
 		{ component: 'Spline', example: 'stroke-grouping' },
+		{ component: 'Spline', example: 'parallel-coordinates' },
+		{ component: 'Spline', example: 'parallel-coordinates-mixed' },
+		{ component: 'Spline', example: 'parallel-coordinates-faceted' },
 		{ component: 'LineChart', example: 'bump-state-population-ranks' },
 		{ component: 'LineChart', example: 'large-radial-series' },
 		{ component: 'LineChart', example: 'large-series' },
 		{ component: 'Density', example: 'weighted' },
 		{ component: 'Contour', example: 'volcano-filled-interactive' },
+		{ component: 'Contour', example: 'volcano-isometric' },
 		{ component: 'Vector', example: 'wind-map' },
 		{ component: 'LineChart', example: 'radar' },
 		{ component: 'LineChart', example: 'radar-series' },
@@ -90,6 +99,7 @@
 		{ component: 'Image', example: 'us-presidents' },
 		// Marks
 		{ component: 'Calendar', example: 'rounded-cells' },
+		{ component: 'Calendar', example: 'isometric' },
 		// Statistics
 		{ component: 'BoxPlot', example: 'with-tooltip' },
 		// Interations
@@ -107,6 +117,7 @@
 		{ component: 'GeoCircle', example: 'playground' },
 		{ component: 'GeoPath', example: 'bubble-map' },
 		{ component: 'GeoPath', example: 'choropleth' },
+		{ component: 'GeoPath', example: 'election-isometric' },
 		{ component: 'GeoPath', example: 'spike-map' },
 		{ component: 'Density', example: 'walmart' },
 		{ component: 'Raster', example: 'us-water-vapor' },
@@ -126,6 +137,7 @@
 		{ component: 'GeoPoint', example: 'icons' },
 		{ component: 'GeoPoint', example: 'us-airports' },
 		{ component: 'GeoPoint', example: 'world-airports' },
+		{ component: 'Labels', example: 'voronoi-geo' },
 		{ component: 'GeoSpline', example: 'draggable-globe' },
 		{ component: 'GeoSpline', example: 'world-map' },
 		{ component: 'GeoTile', example: 'clipped' },
@@ -144,8 +156,10 @@
 		{ component: 'Pack', example: 'basic' },
 		{ component: 'Partition', example: 'vertical' },
 		{ component: 'Partition', example: 'sunburst' },
+		{ component: 'Partition', example: 'flame-graph' },
 		{ component: 'Sankey', example: 'hierarchy' },
 		{ component: 'Tree', example: 'basic' },
+		{ component: 'Tree', example: 'isometric' },
 		{ component: 'Treemap', example: 'nested-zoom' },
 		// Annotation
 		{ component: 'AnnotationLine', example: 'horizontal-with-range' },
diff --git a/docs/src/routes/docs/examples/+page.server.ts b/docs/src/routes/docs/examples/+page.server.ts
index ea8a1fd0da..d9fd162aa2 100644
--- a/docs/src/routes/docs/examples/+page.server.ts
+++ b/docs/src/routes/docs/examples/+page.server.ts
@@ -8,6 +8,8 @@ interface ExampleInfo {
 		name: string;
 		title: string;
 		path: string;
+		/** The commit that first added the example's file (absent until it's committed) */
+		createdAt?: string;
 	}>;
 }
 
@@ -34,7 +36,8 @@ export async function load() {
 			examples: catalog.examples.map((example) => ({
 				name: example.name,
 				title: example.title,
-				path: `/example/${catalog.component}/${example.name}`
+				path: `/example/${catalog.component}/${example.name}`,
+				createdAt: example.createdAt
 			}))
 		}))
 		.sort((a, b) => a.component.localeCompare(b.component));
diff --git a/docs/src/routes/docs/examples/+page.svelte b/docs/src/routes/docs/examples/+page.svelte
index 866f34200b..7011efda40 100644
--- a/docs/src/routes/docs/examples/+page.svelte
+++ b/docs/src/routes/docs/examples/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Button, MenuField, ScrollingValue, TextField } from 'svelte-ux';
-	import { sum } from 'd3-array';
+	import { group, sum } from 'd3-array';
 	import { sortFunc } from '@layerstack/utils';
 	import { useSearchParams } from 'runed/kit';
 	import { z } from 'zod';
@@ -21,7 +21,9 @@
 	);
 	export const schema = z.object({
 		filter: stringParam,
-		category: stringParam
+		category: stringParam,
+		/** `null` groups by component; `newest` groups by the month each example was added */
+		sort: stringParam
 	});
 	let params = useSearchParams(schema);
 
@@ -82,6 +84,62 @@
 			.filter((item) => item !== null);
 	});
 
+	const sortOptions = [
+		{ label: 'By component', value: null },
+		{ label: 'Newest', value: 'newest' }
+	];
+
+	const monthFormat = new Intl.DateTimeFormat('en-US', {
+		month: 'long',
+		year: 'numeric',
+		timeZone: 'UTC'
+	});
+
+	/**
+	 * The filtered examples as headed groups: one per component, or with `newest`, one per
+	 * month an example was added, newest first. Git history for most examples starts when they moved into this repo,
+	 * so the oldest month also holds everything older and says so.
+	 */
+	let groups = $derived.by(() => {
+		if (params.sort !== 'newest') {
+			return visibleExamples.map(({ component, examples }) => ({
+				key: component,
+				heading: component,
+				examples: examples.map((example) => ({ ...example, component, label: example.title }))
+			}));
+		}
+
+		const examples = visibleExamples
+			.flatMap(({ component, examples }) =>
+				examples.map((example) => ({
+					...example,
+					component,
+					label: `${component} · ${example.title}`,
+					date: example.createdAt
+				}))
+			)
+			.sort(
+				(a, b) =>
+					// Not yet committed (no date) first, as the newest of all
+					(b.date ?? '9999').localeCompare(a.date ?? '9999') ||
+					a.component.localeCompare(b.component) ||
+					a.name.localeCompare(b.name)
+			);
+
+		const oldest = examples.at(-1)?.date?.slice(0, 7);
+		// Insertion-ordered, so months stay newest first
+		const byMonth = group(examples, (example) => example.date?.slice(0, 7) ?? 'uncommitted');
+		return Array.from(byMonth, ([month, examples]) => {
+			const name =
+				month === 'uncommitted' ? 'Not yet committed' : monthFormat.format(new Date(`${month}-01`));
+			return {
+				key: month,
+				heading: month === oldest && byMonth.size > 1 ? `${name} and earlier` : name,
+				examples
+			};
+		});
+	});
+
 	let totalVisibleExamples = $derived.by(
 		() => sum(visibleExamples.map(({ examples }) => examples.length)) ?? 0
 	);
@@ -153,7 +211,7 @@
 
 <div
 	class={cls(
-		'sticky top-16 grid grid-cols-1 sm:grid-cols-[1fr_200px_auto] items-center gap-3 py-2 z-1',
+		'sticky top-16 grid grid-cols-1 sm:grid-cols-[1fr_200px_180px_auto] items-center gap-3 py-2 z-1',
 		// dot background
 		'bg-radial from-black/0 from-[1px] to-surface-200/90 to-[1px] bg-size-[6px_6px] backdrop-blur-lg'
 	)}
@@ -166,6 +224,7 @@
 
 	<div class="flex gap-3 sm:contents">
 		<MenuField options={categoryOptions} bind:value={params.category} class="flex-1" />
+		<MenuField options={sortOptions} bind:value={params.sort} class="flex-1" />
 
 		<div class="flex gap-2">
 			<Button
@@ -187,15 +246,15 @@
 </div>
 
 <div class="grid gap-10">
-	{#each visibleExamples as { component, examples } (component)}
+	{#each groups as { key, heading, examples } (key)}
 		<div>
-			<H2 id={component} class="sticky top-42 sm:top-29 pt-2 pb-1">{component}</H2>
+			<H2 id={key} class="sticky top-42 sm:top-29 pt-2 pb-1">{heading}</H2>
 			<div
 				style:--column-count="repeat({columnCount}, 1fr)"
 				class="grid grid-cols-(--column-count) gap-4"
 			>
-				{#each examples as example (example.name)}
-					<ExampleLink {component} example={example.name} title={example.title} />
+				{#each examples as example (`${example.component}/${example.name}`)}
+					<ExampleLink component={example.component} example={example.name} title={example.label} />
 				{/each}
 			</div>
 		</div>
diff --git a/docs/src/routes/docs/playground/+page.server.ts b/docs/src/routes/docs/playground/+page.server.ts
deleted file mode 100644
index 3363075e00..0000000000
--- a/docs/src/routes/docs/playground/+page.server.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { PageServerLoad } from './$types';
-import { buildWebContainerFiles } from '@layerstack/docs/node/stackblitz';
-
-// Import source files for the playground examples
-import dataTs from '../../../lib/utils/data.ts?raw';
-
-// Dynamically import all template files using Vite's import.meta.glob
-const templateFiles = import.meta.glob('./template/**/*', {
-	query: '?raw',
-	import: 'default',
-	eager: true
-});
-
-// Build flat file structure using imported template files
-function generatePlaygroundFiles(): Record<string, string> {
-	const files: Record<string, string> = {};
-
-	// Process all template files
-	for (const [path, content] of Object.entries(templateFiles)) {
-		// Extract relative path from the full import path
-		// Example: "./template/package.json" -> "package.json"
-		const relativePath = path.replace('./template/', '');
-
-		files[relativePath] = content as string;
-	}
-
-	// Add utility data file
-	files['src/lib/utils/data.ts'] = dataTs;
-
-	return files;
-}
-
-// Convert to WebContainer nested structure
-const templateProjectFiles = buildWebContainerFiles(generatePlaygroundFiles());
-
-export const load: PageServerLoad = () => {
-	return {
-		templateProjectFiles
-	};
-};
diff --git a/docs/src/routes/docs/playground/+page.svelte b/docs/src/routes/docs/playground/+page.svelte
deleted file mode 100644
index 6377bf7437..0000000000
--- a/docs/src/routes/docs/playground/+page.svelte
+++ /dev/null
@@ -1,558 +0,0 @@
-<script lang="ts" module>
-	import { WebContainer } from '@webcontainer/api';
-	import { PaneGroup, Pane, PaneResizer } from 'paneforge';
-	import { Icon, Button, Tooltip } from 'svelte-ux';
-	import { slide } from 'svelte/transition';
-	import FileTree from './FileTree/FileTree.svelte';
-	import SimpleIconsStackblitz from '~icons/simple-icons/stackblitz';
-	import SimpleIconsTerminal from '~icons/simple-icons/windowsterminal';
-	import SimpleIconsSvelte from '~icons/simple-icons/svelte';
-	import VscodeIconsFileTypeSvelte from '~icons/vscode-icons/file-type-svelte';
-	import VscodeIconsFileTypeTypescript from '~icons/vscode-icons/file-type-typescript';
-	import VscodeIconsFileTypeJavascript from '~icons/vscode-icons/file-type-js';
-	import VscodeIconsFileTypeCss from '~icons/vscode-icons/file-type-css';
-	import RefreshCcwIcon from '~icons/lucide/refresh-ccw';
-	import ChevronDown from '~icons/lucide/chevron-down';
-	import ChevronUp from '~icons/lucide/chevron-up';
-	import TrashIcon from '~icons/lucide/trash';
-	import Download from '~icons/lucide/download';
-	// Singleton instance stored in globalThis to persist across hot reloads
-	const WEBCONTAINER_KEY = '__webcontainer_instance__';
-
-	declare global {
-		interface Window {
-			[WEBCONTAINER_KEY]?: Promise<WebContainer>;
-		}
-	}
-</script>
-
-<script lang="ts">
-	import { onMount, tick } from 'svelte';
-	import type { PageData } from './$types';
-	import CodeEditor from './CodeEditor.svelte';
-	import { Overlay, ProgressCircle } from 'svelte-ux';
-	import { AnsiUp } from 'ansi_up';
-
-	/* TODO:
-	- incase you didn't see it you can click console to expand/collapse.
-	- second pass background colors, etc. I'm always open for revisions.
-	- console output seems to missing some later stage loading state - "load preview..."
-	- filter blank \n going to console output?
-	- collapse console when loaded is working, but performing too early.
-	- Refresh correct, or something thru webcontainer?
-	- Buttons from Svelte-UX w/Icons - icons not centered vertically.
-	- Code - Open Project in StackBlitz
-	- Code - Open Project in Svelte REPL
-	- Code - Download Project
-	*/
-
-	let { data }: { data: PageData } = $props();
-	const ansiUp = new AnsiUp();
-
-	// Container, Pane, and Elements state
-	let webcontainerInstance = $state<WebContainer | null>(null);
-	let iframeEl = $state<HTMLIFrameElement | null>(null);
-	let fileSelectorEl = $state<HTMLDivElement | null>(null);
-	let previewPaneGroup = $state<ReturnType<typeof PaneGroup>>(); // Preview and Console Pane Groups
-	let consolePane = $state<ReturnType<typeof Pane>>();
-	let consoleOutput = $state('Provisioning...\n\n');
-	let consoleScrollContainer = $state<HTMLDivElement>();
-	let isConsoleScrollAtBottom = $state(true);
-	let fileTreeShowing = $state<boolean>(false);
-
-	// File editing state
-	let selectedFile = $state<string>('src/routes/+page.svelte');
-	let fileContent = $state<string>('');
-	let editableFiles = $state<string[]>([]);
-	let isLoadingFile = $state(false);
-
-	// Loading state
-	let loadingStatus = $state<string | null>('Initializing WebContainer...');
-	let isReady = $state(false);
-	let viteConnected = $state(false);
-	let viteTimeoutId: number | null = null;
-
-	function isScrolledToBottom() {
-		if (!consoleScrollContainer) return false;
-		const threshold = 5; // pixels threshold to account for rounding
-		return (
-			consoleScrollContainer.scrollHeight - consoleScrollContainer.scrollTop <=
-			consoleScrollContainer.clientHeight + threshold
-		);
-	}
-
-	// Track scroll position changes to know if user has manually scrolled
-	function handleConsoleScroll() {
-		isConsoleScrollAtBottom = isScrolledToBottom();
-	}
-
-	async function scrollConsoleToBottom() {
-		await tick();
-		consoleScrollContainer?.scrollTo({
-			top: consoleScrollContainer.scrollHeight,
-			behavior: 'instant'
-		});
-	}
-
-	// Auto-scroll console when output changes, only if we were at the bottom
-	$effect(() => {
-		if (consoleOutput && consolePane && !consolePane.isCollapsed() && isConsoleScrollAtBottom) {
-			scrollConsoleToBottom();
-		}
-	});
-
-	let fileIcon = $derived.by(() => {
-		if (selectedFile.endsWith('.svelte')) {
-			return VscodeIconsFileTypeSvelte;
-		} else if (selectedFile.endsWith('.ts')) {
-			return VscodeIconsFileTypeTypescript;
-		} else if (selectedFile.endsWith('.js')) {
-			return VscodeIconsFileTypeJavascript;
-		} else if (selectedFile.endsWith('.css')) {
-			return VscodeIconsFileTypeCss;
-		}
-	});
-
-	async function getWebContainerInstance() {
-		if (typeof window !== 'undefined') {
-			if (!window[WEBCONTAINER_KEY]) {
-				window[WEBCONTAINER_KEY] = WebContainer.boot();
-			}
-			return window[WEBCONTAINER_KEY];
-		}
-		throw new Error('WebContainer can only be initialized in browser');
-	}
-
-	// Get list of editable files from the template
-	function getEditableFiles(): string[] {
-		const files: string[] = [];
-		function traverse(obj: any, prefix = '') {
-			for (const [key, value] of Object.entries(obj)) {
-				if (value && typeof value === 'object') {
-					if ('file' in value) {
-						files.push(prefix + key);
-					} else if ('directory' in value) {
-						traverse(value.directory, prefix + key + '/');
-					}
-				}
-			}
-		}
-		traverse(data.templateProjectFiles);
-		return files.filter(
-			(f) => f.endsWith('.svelte') || f.endsWith('.ts') || f.endsWith('.js') || f.endsWith('.css')
-		);
-	}
-
-	// Load file content
-	async function loadFileContent(filepath: string) {
-		if (!webcontainerInstance) return;
-
-		isLoadingFile = true;
-		try {
-			const content = await webcontainerInstance.fs.readFile(filepath, 'utf-8');
-			fileContent = content;
-		} catch (err) {
-			console.error('Failed to read file:', err);
-			fileContent = '// Error loading file';
-		} finally {
-			isLoadingFile = false;
-		}
-	}
-
-	// Save selected file content
-	async function saveFileContent() {
-		if (!webcontainerInstance || !selectedFile) return;
-
-		try {
-			await webcontainerInstance.fs.writeFile(selectedFile, fileContent);
-		} catch (err) {
-			console.error('Failed to save file:', err);
-		}
-	}
-
-	// Handle file selection change
-	async function handleFileSelect(filepath: string) {
-		selectedFile = filepath;
-		await loadFileContent(filepath);
-	}
-
-	// Save Project Locally
-	async function saveProject() {
-		// This needs wired up
-	}
-
-	// Open Project in StackBlitz
-	async function openInStackBlitz() {
-		// This needs wired up
-	}
-
-	// Open Project in REPL
-	async function openInREPL() {
-		// This needs wired up
-	}
-
-	onMount(async () => {
-		try {
-			loadingStatus = 'Booting WebContainer...';
-			webcontainerInstance = await getWebContainerInstance();
-
-			if (!webcontainerInstance) {
-				throw new Error('Failed to boot WebContainer');
-			}
-
-			loadingStatus = 'Mounting project files...';
-			await webcontainerInstance.mount(data.templateProjectFiles);
-
-			// Get editable files list
-			editableFiles = getEditableFiles();
-
-			loadingStatus = 'Loading editor...';
-			await loadFileContent(selectedFile);
-
-			// Listen for messages from the iframe to detect Vite connection and console logs
-			const handleMessage = (event: MessageEvent) => {
-				// Only process messages from our iframe
-				if (event.source !== iframeEl?.contentWindow) return;
-
-				// Check if message is from Vite client
-				if (event.data && typeof event.data === 'object') {
-					const data = event.data;
-
-					// Handle console logs from iframe
-					if (data.type === 'console') {
-						const logType = data.level || 'log';
-						const args = data.args || [];
-						const logText = args
-							.map((arg: any) => {
-								if (typeof arg === 'object') {
-									return JSON.stringify(arg, null, 2);
-								}
-								return String(arg);
-							})
-							.join(' ');
-
-						const colorMap: Record<string, string> = {
-							log: '#e5e7eb',
-							warn: '#fbbf24',
-							error: '#ef4444',
-							info: '#3b82f6'
-						};
-						const color = colorMap[logType] || colorMap.log;
-
-						consoleOutput += `<span style="color: ${color}">[${logType}] ${logText}</span>\n`;
-					}
-
-					// Vite HMR sends various message types - we'll clear loading on any HMR activity
-					if (data.type && (data.type.includes('vite') || data.type === 'connected')) {
-						if (!viteConnected) {
-							viteConnected = true;
-							if (viteTimeoutId) {
-								clearTimeout(viteTimeoutId);
-								viteTimeoutId = null;
-							}
-							loadingStatus = null;
-							isReady = true;
-						}
-					}
-				}
-			};
-
-			window.addEventListener('message', handleMessage);
-
-			webcontainerInstance.on('server-ready', (port, url) => {
-				if (iframeEl) {
-					loadingStatus = 'Loading preview...';
-					iframeEl.src = url;
-				}
-			});
-
-			await startDevServer();
-		} catch (error) {
-			loadingStatus = 'Error: ' + (error instanceof Error ? error.message : 'Unknown error');
-		}
-	});
-
-	async function startDevServer() {
-		if (!webcontainerInstance) {
-			throw new Error('WebContainer instance not initialized');
-		}
-
-		// Install dependencies
-		loadingStatus = 'Installing dependencies...';
-		const installProcess = await webcontainerInstance.spawn('pnpm', ['install']);
-
-		// Capture install output
-		installProcess.output.pipeTo(
-			new WritableStream({
-				write(data) {
-					const text = data.toString();
-					console.log('[WebContainer install]:', text);
-					consoleOutput += ansiUp.ansi_to_html(text);
-				}
-			})
-		);
-
-		const installExitCode = await installProcess.exit;
-
-		if (installExitCode !== 0) {
-			throw new Error('Unable to run pnpm install');
-		}
-
-		// Start dev server
-		loadingStatus = 'Starting dev server...';
-		const devProcess = await webcontainerInstance.spawn('pnpm', ['run', 'dev']);
-
-		// Listen to output to detect when Vite is building
-		devProcess.output.pipeTo(
-			new WritableStream({
-				write(data) {
-					const text = data.toString();
-
-					// Skip large amount of blank lines
-					if (
-						text ===
-						'\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n'
-					) {
-						return;
-					}
-
-					console.log('[WebContainer]:', text);
-
-					// Append to console output (converting ANSI codes to HTML)
-					consoleOutput += ansiUp.ansi_to_html(text);
-
-					// Update status based on Vite output
-					if (text.includes('VITE') && text.includes('ready')) {
-						loadingStatus = 'Ready! Loading preview...';
-						// TODO: Consider reeanbling auto-hiding once the timing is better
-						// consolePane?.collapse();
-					} else if (text.includes('build started') || text.includes('building')) {
-						loadingStatus = 'Building application...';
-					}
-				}
-			})
-		);
-	}
-
-	function toggleConsole() {
-		if (consolePane?.isCollapsed()) {
-			consolePane.expand();
-		} else {
-			consolePane?.collapse();
-		}
-	}
-
-	// Handle click outside of file tree to close it
-	function handleClickOutside(event: MouseEvent) {
-		// Don't close if clicking on SVG icons (folder toggles)
-		const target = event.target as Element;
-		if (target instanceof SVGElement) return;
-
-		if (fileTreeShowing && fileSelectorEl && !fileSelectorEl.contains(event.target as Node)) {
-			fileTreeShowing = false;
-		}
-	}
-</script>
-
-<svelte:window onclick={handleClickOutside} />
-
-<div class="h-[calc(100vh-64px)] flex bg-surface-100">
-	<!-- Editor Panel -->
-	<PaneGroup direction="horizontal">
-		<Pane defaultSize={50} minSize={5}>
-			<div class="flex flex-col h-full border-r border-surface-content/10">
-				<div
-					class="relative flex items-center gap-4 p-2 border-b border-surface-content/10 bg-transparent"
-				>
-					<!-- File Selector -->
-					<div bind:this={fileSelectorEl} class="flex-1">
-						{#if fileTreeShowing}
-							<div
-								transition:slide={{ duration: 200 }}
-								class="absolute left-0 right-0 top-full z-10 bg-surface-100 border-t border-surface-content/10 shadow-lg"
-							>
-								<FileTree
-									class="w-full py-2 pl-4 pr-2 bg-surface-100 overlow-x-clip overflow-y-auto"
-									filePaths={editableFiles}
-									{selectedFile}
-									onSelect={(path: any) => {
-										handleFileSelect(path);
-										fileTreeShowing = false;
-									}}
-								/>
-							</div>
-						{/if}
-						<Button
-							class="border py-1 px-2 w-full justify-between bg-surface-100"
-							on:click={() => (fileTreeShowing = !fileTreeShowing)}
-						>
-							<span class="flex items-center gap-2 flex-1 text-left">
-								<Icon data={fileIcon} />
-								{selectedFile}
-							</span>
-							{#key fileTreeShowing}
-								<Icon
-									data={fileTreeShowing ? ChevronUp : ChevronDown}
-									class="text-surface-content/50"
-								/>
-							{/key}</Button
-						>
-					</div>
-					<Tooltip title="Open in StackBlitz" placement="top" offset={6}>
-						<Button
-							href="https://stackblitz.com"
-							icon={SimpleIconsStackblitz}
-							size="sm"
-							variant="fill-light"
-							target="_blank"
-							onclick={openInStackBlitz()}
-						/>
-					</Tooltip>
-					<Tooltip title="Open in REPL" placement="top" offset={6}>
-						<Button
-							href="https://svelte.dev/playground"
-							icon={SimpleIconsSvelte}
-							size="sm"
-							variant="fill-light"
-							target="_blank"
-							onclick={openInREPL()}
-						/>
-					</Tooltip>
-					<Tooltip title="Download" placement="top" offset={6}>
-						<Button
-							icon={Download}
-							size="sm"
-							variant="fill-light"
-							target="_blank"
-							onclick={saveProject}
-						/>
-					</Tooltip>
-				</div>
-
-				<!-- Code Editor -->
-				<div class="flex-1 overflow-hidden">
-					{#if isLoadingFile}
-						<div class="flex items-center justify-center h-full">
-							<div class="text-surface-content/50">Loading...</div>
-						</div>
-					{:else}
-						<CodeEditor
-							bind:value={fileContent}
-							filename={selectedFile}
-							oninput={saveFileContent}
-						/>
-					{/if}
-				</div>
-			</div>
-		</Pane>
-
-		<PaneResizer class="w-0.5 bg-surface-content/10" />
-
-		<!-- Preview Panel -->
-		<Pane defaultSize={50} minSize={5}>
-			<PaneGroup direction="vertical" bind:this={previewPaneGroup}>
-				<Pane defaultSize={70}>
-					<div class="relative h-full bg-surface-100 pt-[47px]">
-						{#if loadingStatus}
-							<Overlay class="flex flex-col gap-4 bg-surface-100/50" center>
-								<ProgressCircle width={2} />
-								<div class="text-lg font-medium">{loadingStatus}</div>
-							</Overlay>
-						{:else}
-							<button
-								class="absolute top-2 right-2"
-								onclick={async () => {
-									// await startDevServer();
-									window.location.reload();
-								}}
-							>
-								<Tooltip title="Reload">
-									<Button icon={RefreshCcwIcon} size="sm" variant="fill-light" target="_blank"
-									></Button>
-								</Tooltip>
-							</button>
-						{/if}
-						<iframe
-							bind:this={iframeEl}
-							title="LayerChart Playground"
-							class="w-full h-[calc(100%-20px)]"
-							allowfullscreen
-							onload={() => {
-								// Wait for Vite to connect before clearing loading status
-								if (iframeEl?.src && !viteConnected) {
-									loadingStatus = 'Connecting to Vite...';
-									// Fallback: clear after 3 seconds if Vite doesn't connect
-									viteTimeoutId = window.setTimeout(() => {
-										if (loadingStatus === 'Connecting to Vite...') {
-											loadingStatus = null;
-											isReady = true;
-											viteConnected = true;
-										}
-									}, 3000);
-								} else if (viteConnected) {
-									loadingStatus = null;
-									isReady = true;
-								}
-							}}
-						></iframe>
-					</div>
-				</Pane>
-
-				<PaneResizer class="h-0.5 bg-surface-content/10" />
-
-				<!-- Console Header Pane (fixed size, always visible) -->
-				<Pane defaultSize={5} minSize={0} maxSize={100} class="!flex-none !h-8">
-					<div
-						role="button"
-						tabindex="-1"
-						class="h-full flex justify-between items-center bg-surface-300/30 px-1 cursor-pointer group/header select-none"
-						onclick={toggleConsole}
-						onkeydown={(e) => {
-							if (e.key === 'Enter' || e.key === ' ') {
-								e.preventDefault();
-								toggleConsole();
-							}
-						}}
-					>
-						<div class="flex items-center gap-2 text-sm font-mono">
-							<Icon data={SimpleIconsTerminal} class="text-surface-content/50" />
-							<span class="group-hover/header:underline group-hover/header:decoration-current/50"
-								>Console</span
-							>
-						</div>
-						<button
-							type="button"
-							class="text-xs font-mono relative py-1 px-2 outline outline-primary/10 rounded-sm flex items-center gap-2"
-							onclick={(e) => {
-								e.stopPropagation();
-								consoleOutput = '';
-							}}>Clear <Icon data={TrashIcon} class="text-surface-content/50" /></button
-						>
-					</div>
-				</Pane>
-
-				<!-- Console Content Pane (collapsible) -->
-				<Pane
-					bind:this={consolePane as Pane}
-					defaultSize={25}
-					collapsedSize={0}
-					minSize={0}
-					maxSize={65}
-					collapsible={true}
-					class="[transition:flex-grow_200ms_ease-out]"
-				>
-					<div class="h-full flex flex-col">
-						<!-- Scrolling content area -->
-						<div
-							bind:this={consoleScrollContainer}
-							onscroll={handleConsoleScroll}
-							class="flex-1 overflow-auto text-xs font-mono p-1 whitespace-pre-wrap bg-surface-100/50"
-						>
-							{@html consoleOutput}
-						</div>
-					</div>
-				</Pane>
-			</PaneGroup>
-		</Pane>
-	</PaneGroup>
-</div>
diff --git a/docs/src/routes/docs/playground/+page.ts b/docs/src/routes/docs/playground/+page.ts
deleted file mode 100644
index 46c88bbfaf..0000000000
--- a/docs/src/routes/docs/playground/+page.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export const load = async ({ data }) => {
-	return {
-		...data,
-		meta: {
-			fullWidth: true,
-			hideEditLink: true
-		}
-	};
-};
diff --git a/docs/src/routes/docs/playground/CodeEditor.svelte b/docs/src/routes/docs/playground/CodeEditor.svelte
deleted file mode 100644
index 4659e112d9..0000000000
--- a/docs/src/routes/docs/playground/CodeEditor.svelte
+++ /dev/null
@@ -1,131 +0,0 @@
-<script lang="ts">
-	import { onMount, onDestroy } from 'svelte';
-	import { EditorView, basicSetup } from 'codemirror';
-	import { javascript } from '@codemirror/lang-javascript';
-	import { html } from '@codemirror/lang-html';
-	import { css } from '@codemirror/lang-css';
-	import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
-	import { EditorState, Compartment } from '@codemirror/state';
-	import { getSettings } from 'svelte-ux';
-
-	let {
-		value = $bindable(''),
-		filename = '',
-		oninput = () => {}
-	}: {
-		value?: string;
-		filename?: string;
-		oninput?: (value: string) => void;
-	} = $props();
-
-	let editorContainer: HTMLDivElement;
-	let editorView: EditorView | null = null;
-	let updating = false;
-
-	// Use Compartments for reconfigurable extensions
-	const languageCompartment = new Compartment();
-	const themeCompartment = new Compartment();
-
-	// Get current theme mode from svelte-ux settings
-	const { currentTheme } = getSettings();
-
-	// Determine language based on file extension
-	function getLanguageExtension(filename: string) {
-		if (filename.endsWith('.svelte') || filename.endsWith('.html')) {
-			return html();
-		} else if (filename.endsWith('.ts') || filename.endsWith('.js')) {
-			return javascript({ typescript: filename.endsWith('.ts') });
-		} else if (filename.endsWith('.css')) {
-			return css();
-		}
-		return javascript();
-	}
-
-	// Get theme based on current mode
-	function getCurrentTheme() {
-		// TODO: read from
-		console.log({ $currentTheme });
-		return $currentTheme.dark ? githubDark : githubLight;
-		// return githubDark;
-	}
-
-	onMount(() => {
-		const startState = EditorState.create({
-			doc: value,
-			extensions: [
-				basicSetup,
-				languageCompartment.of(getLanguageExtension(filename)),
-				themeCompartment.of(getCurrentTheme()),
-				EditorView.updateListener.of((update) => {
-					if (update.docChanged && !updating) {
-						const newValue = update.state.doc.toString();
-						value = newValue;
-						oninput(newValue);
-					}
-				}),
-				EditorView.theme({
-					'&': {
-						height: '100%',
-						background: 'var(--color-surface-100)'
-					},
-					'.cm-scroller': {
-						overflow: 'auto'
-					},
-					'.cm-gutters': {
-						backgroundColor: 'var(--color-surface-300)',
-						color: 'var(--color-surface-content)',
-						border: 'none'
-					}
-				})
-			]
-		});
-
-		editorView = new EditorView({
-			state: startState,
-			parent: editorContainer
-		});
-	});
-
-	// Update editor when value changes externally
-	$effect(() => {
-		if (editorView && value !== editorView.state.doc.toString()) {
-			updating = true;
-			editorView.dispatch({
-				changes: {
-					from: 0,
-					to: editorView.state.doc.length,
-					insert: value
-				}
-			});
-			updating = false;
-		}
-	});
-
-	// Reconfigure language when filename changes
-	$effect(() => {
-		if (editorView && filename) {
-			editorView.dispatch({
-				effects: languageCompartment.reconfigure(getLanguageExtension(filename))
-			});
-		}
-	});
-
-	// Reconfigure theme when mode changes
-	$effect(() => {
-		if (editorView) {
-			// Access $currentTheme to create reactive dependency
-			const theme = $currentTheme;
-			editorView.dispatch({
-				effects: themeCompartment.reconfigure(getCurrentTheme())
-			});
-		}
-	});
-
-	onDestroy(() => {
-		if (editorView) {
-			editorView.destroy();
-		}
-	});
-</script>
-
-<div bind:this={editorContainer} class="h-full"></div>
diff --git a/docs/src/routes/docs/playground/FileTree/FileTree.svelte b/docs/src/routes/docs/playground/FileTree/FileTree.svelte
deleted file mode 100644
index c9cf53650a..0000000000
--- a/docs/src/routes/docs/playground/FileTree/FileTree.svelte
+++ /dev/null
@@ -1,98 +0,0 @@
-<script lang="ts">
-	import { cls } from '@layerstack/tailwind';
-	import * as TreeView from './TreeView';
-
-	type FileTreeProps = {
-		filePaths: string[];
-		selectedFile?: string;
-		openAllNodes?: boolean;
-		alphabetize?: boolean;
-		class?: string;
-		onSelect?: (path: string) => void;
-	};
-
-	let {
-		filePaths,
-		selectedFile = $bindable(''),
-		openAllNodes = false,
-		alphabetize = true,
-		class: className = '',
-		onSelect
-	}: FileTreeProps = $props();
-
-	type TreeNode = {
-		name: string;
-		path: string;
-		open: boolean;
-		children: TreeNode[];
-	};
-
-	function sortNodes(nodes: TreeNode[]): TreeNode[] {
-		nodes.sort((a, b) => {
-			const aIsFolder = a.children.length > 0;
-			const bIsFolder = b.children.length > 0;
-			if (aIsFolder !== bIsFolder) return aIsFolder ? -1 : 1;
-			return a.name.localeCompare(b.name);
-		});
-		nodes.forEach((node) => sortNodes(node.children));
-		return nodes;
-	}
-
-	let tree = $derived.by(() => {
-		const result: TreeNode[] = [];
-
-		function createNode(filePath: string, isOpen = false): void {
-			const parts = filePath.split('/');
-			let currentLevel = result;
-			let currentPath = '';
-
-			parts.forEach((part, i) => {
-				currentPath = currentPath ? `${currentPath}/${part}` : part;
-				const isLastPart = i === parts.length - 1;
-
-				let existingNode = currentLevel.find((node) => node.name === part);
-
-				if (!existingNode) {
-					const newNode: TreeNode = {
-						name: part,
-						path: currentPath,
-						open: isOpen && !isLastPart,
-						children: []
-					};
-					currentLevel.push(newNode);
-					existingNode = newNode;
-				} else if (isOpen && !isLastPart) {
-					existingNode.open = true;
-				}
-
-				currentLevel = existingNode.children;
-			});
-		}
-
-		filePaths.forEach((file) => createNode(file, file === selectedFile || openAllNodes));
-		return alphabetize ? sortNodes(result) : result;
-	});
-</script>
-
-<div class={cls(className, 'group')}>
-	{#snippet renderNodes(nodes: TreeNode[])}
-		{#each nodes as node (node.path)}
-			<TreeView.Node
-				name={node.name}
-				path={node.path}
-				open={node.open}
-				selected={!!selectedFile && selectedFile === node.path}
-				onSelect={(path: string) => {
-					selectedFile = path;
-					onSelect?.(path);
-				}}
-			>
-				{@render renderNodes(node.children)}
-			</TreeView.Node>
-		{/each}
-	{/snippet}
-
-	<TreeView.Root>
-		{@render renderNodes(tree)}
-	</TreeView.Root>
-</div>
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte b/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte
deleted file mode 100644
index fd6f1307eb..0000000000
--- a/docs/src/routes/docs/playground/FileTree/TreeView/TreeView.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script lang="ts">
-	import { cls } from '@layerstack/tailwind';
-	import type { TreeViewRootProps } from './types';
-
-	let { children, class: className }: TreeViewRootProps = $props();
-</script>
-
-<div class={cls('flex flex-col', className)}>
-	{@render children?.()}
-</div>
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte b/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte
deleted file mode 100644
index 7ff41afb6c..0000000000
--- a/docs/src/routes/docs/playground/FileTree/TreeView/TreeViewNode.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-<script lang="ts">
-	import { slide } from 'svelte/transition';
-	import { cls } from '@layerstack/tailwind';
-	import VscodeIconsFileTypeSvelte from '~icons/vscode-icons/file-type-svelte';
-	import VscodeIconsFileTypeTypescript from '~icons/vscode-icons/file-type-typescript';
-	import VscodeIconsFileTypeJavascript from '~icons/vscode-icons/file-type-js';
-	import VscodeIconsFileTypeCss from '~icons/vscode-icons/file-type-css';
-	import File from '~icons/lucide/file';
-	import Folder from '~icons/lucide/folder';
-	import FolderOpen from '~icons/lucide/folder-open';
-	import type { TreeViewNodeProps } from './types';
-	import { Icon } from 'svelte-ux';
-
-	let {
-		name,
-		path,
-		open = $bindable(true),
-		selected = false,
-		onSelect,
-		class: className,
-		icon,
-		children,
-		type = 'button',
-		onclick,
-		...rest
-	}: TreeViewNodeProps = $props();
-
-	function handleClick() {
-		if (path && onSelect) {
-			onSelect(path);
-		}
-	}
-
-	function toggleOpen() {
-		open = !open;
-	}
-
-	let fileIcon = $derived.by(() => {
-		if (name.endsWith('.svelte')) {
-			return VscodeIconsFileTypeSvelte;
-		} else if (name.endsWith('.ts')) {
-			return VscodeIconsFileTypeTypescript;
-		} else if (name.endsWith('.js')) {
-			return VscodeIconsFileTypeJavascript;
-		} else if (name.endsWith('.css')) {
-			return VscodeIconsFileTypeCss;
-		} else {
-			return File;
-		}
-	});
-</script>
-
-{#if name.includes('.')}
-	<!-- It's a file! -->
-	<button
-		{type}
-		class={cls(
-			'flex place-items-center gap-2 pl-[3px] hover:text-primary/80',
-			selected && 'text-primary/80 group-hover:text-inherit',
-			className
-		)}
-		onclick={handleClick}
-		{...rest}
-	>
-		{#if icon}
-			<!-- Custom icon -->
-			{@render icon({ name, open })}
-		{:else}
-			<!-- Icon based on file extension -->
-			<Icon data={fileIcon} class="size-4" />
-		{/if}
-		<span>{name}</span>
-	</button>
-{:else}
-	<!-- It's a folder! -->
-	<div>
-		<button
-			type="button"
-			class={cls('flex place-items-center gap-2 group/folder', className)}
-			onclick={toggleOpen}
-		>
-			{#if icon}
-				<!-- Custom icon -->
-				{@render icon({ name, open })}
-			{:else if open}
-				<!-- Folder open icon -->
-				<FolderOpen class="size-4 text-surface-content" />
-			{:else}
-				<!-- Folder closed icon -->
-				<Folder class="size-4 text-surface-content" />
-			{/if}
-			<span class="group-hover/folder:text-primary/80">{name}</span>
-		</button>
-		{#if open}
-			<div class="mx-2 border-l" transition:slide={{ duration: 150 }}>
-				<div class="relative flex place-items-start">
-					<!-- Alignment Line -->
-					<div class="bg-border mx-2 h-full w-px"></div>
-					<div class="flex flex-col">
-						{@render children?.()}
-					</div>
-				</div>
-			</div>
-		{/if}
-	</div>
-{/if}
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/index.ts b/docs/src/routes/docs/playground/FileTree/TreeView/index.ts
deleted file mode 100644
index c723f13884..0000000000
--- a/docs/src/routes/docs/playground/FileTree/TreeView/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import TreeView from './TreeView.svelte';
-import TreeViewNode from './TreeViewNode.svelte';
-
-export { TreeView, TreeViewNode, TreeView as Root, TreeViewNode as Node };
diff --git a/docs/src/routes/docs/playground/FileTree/TreeView/types.ts b/docs/src/routes/docs/playground/FileTree/TreeView/types.ts
deleted file mode 100644
index 65b202bd20..0000000000
--- a/docs/src/routes/docs/playground/FileTree/TreeView/types.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import type { WithChildren } from 'bits-ui';
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes, HTMLButtonAttributes } from 'svelte/elements';
-
-export type TreeViewRootProps = HTMLAttributes<HTMLDivElement>;
-
-export type TreeViewNodeProps = WithChildren<
-	Omit<HTMLButtonAttributes, 'children'> & {
-		name: string;
-		path?: string;
-		open?: boolean;
-		selected?: boolean;
-		onSelect?: (path: string) => void;
-		icon?: Snippet<[{ name: string; open: boolean }]>;
-	}
->;
diff --git a/docs/src/routes/docs/playground/template/package.json b/docs/src/routes/docs/playground/template/package.json
deleted file mode 100644
index 6df53fce39..0000000000
--- a/docs/src/routes/docs/playground/template/package.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
-	"name": "layerchart-example",
-	"type": "module",
-	"private": true,
-	"version": "0.0.1",
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview"
-	},
-	"devDependencies": {
-		"@layerstack/tailwind": "2.0.0-next.21",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.15.3",
-		"@sveltejs/vite-plugin-svelte": "^6.2.1",
-		"@tailwindcss/vite": "^4.1.16",
-		"@types/d3-geo": "^3.1.0",
-		"@types/topojson-client": "^3.1.5",
-		"d3-array": "^3.2.4",
-		"d3-geo": "^3.1.1",
-		"d3-random": "^3.0.1",
-		"d3-time": "^3.1.0",
-		"topojson-client": "^3.1.0",
-		"svelte": "^5.39.13",
-		"tailwindcss": "^4.1.16",
-		"vite": "^7.1.12"
-	},
-	"dependencies": {
-		"layerchart": "https://pkg.pr.new/layerchart@659"
-	}
-}
diff --git a/docs/src/routes/docs/playground/template/src/app.css b/docs/src/routes/docs/playground/template/src/app.css
deleted file mode 100644
index 3c3d8926b2..0000000000
--- a/docs/src/routes/docs/playground/template/src/app.css
+++ /dev/null
@@ -1,4 +0,0 @@
-@import 'tailwindcss';
-@import '@layerstack/tailwind/core.css';
-@import '@layerstack/tailwind/utils.css';
-@import '@layerstack/tailwind/themes/basic.css';
diff --git a/docs/src/routes/docs/playground/template/src/app.html b/docs/src/routes/docs/playground/template/src/app.html
deleted file mode 100644
index f93d787940..0000000000
--- a/docs/src/routes/docs/playground/template/src/app.html
+++ /dev/null
@@ -1,56 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%sveltekit.head%
-		<script>
-			// Intercept console methods and send to parent window
-			(function () {
-				const originalConsole = {
-					log: console.log,
-					warn: console.warn,
-					error: console.error,
-					info: console.info
-				};
-
-				['log', 'warn', 'error', 'info'].forEach((level) => {
-					console[level] = function (...args) {
-						// Call original console method
-						originalConsole[level].apply(console, args);
-
-						// Send to parent window if in iframe
-						if (window.parent !== window) {
-							try {
-								window.parent.postMessage(
-									{
-										type: 'console',
-										level: level,
-										args: args.map((arg) => {
-											// Handle objects/arrays
-											if (typeof arg === 'object' && arg !== null) {
-												try {
-													return JSON.parse(JSON.stringify(arg));
-												} catch (e) {
-													return String(arg);
-												}
-											}
-											return arg;
-										})
-									},
-									'*'
-								);
-							} catch (e) {
-								// Ignore errors posting message
-							}
-						}
-					};
-				});
-			})();
-		</script>
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>
diff --git a/docs/src/routes/docs/playground/template/src/routes/+layout.svelte b/docs/src/routes/docs/playground/template/src/routes/+layout.svelte
deleted file mode 100644
index c5cd34fcca..0000000000
--- a/docs/src/routes/docs/playground/template/src/routes/+layout.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script lang="ts">
-	import '../app.css';
-
-	let { children } = $props();
-</script>
-
-<main class="p-4">
-	{@render children?.()}
-</main>
diff --git a/docs/src/routes/docs/playground/template/src/routes/+page.svelte b/docs/src/routes/docs/playground/template/src/routes/+page.svelte
deleted file mode 100644
index c2670ec795..0000000000
--- a/docs/src/routes/docs/playground/template/src/routes/+page.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<script lang="ts">
-	import { LineChart } 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" height={300} />
diff --git a/docs/src/routes/docs/playground/template/svelte.config.js b/docs/src/routes/docs/playground/template/svelte.config.js
deleted file mode 100644
index f571400f54..0000000000
--- a/docs/src/routes/docs/playground/template/svelte.config.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import adapter from '@sveltejs/adapter-auto';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	kit: {
-		adapter: adapter(),
-		alias: {
-			'$static/*': 'static/*'
-		},
-		experimental: {
-			remoteFunctions: true
-		}
-	},
-	compilerOptions: {
-		experimental: {
-			async: true
-		}
-	}
-};
-
-export default config;
diff --git a/docs/src/routes/docs/playground/template/vite.config.js b/docs/src/routes/docs/playground/template/vite.config.js
deleted file mode 100644
index 2f222dba34..0000000000
--- a/docs/src/routes/docs/playground/template/vite.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-import tailwindcss from '@tailwindcss/vite';
-
-export default defineConfig({
-	plugins: [tailwindcss(), sveltekit()]
-});
diff --git a/docs/src/routes/docs/search/searchContent.ts b/docs/src/routes/docs/search/searchContent.ts
index 3a423597e3..418a723ba9 100644
--- a/docs/src/routes/docs/search/searchContent.ts
+++ b/docs/src/routes/docs/search/searchContent.ts
@@ -48,13 +48,6 @@ const topLevelPages: SearchEntry[] = [
 		content: 'Browse example charts and visualizations',
 		type: 'page'
 	},
-	{
-		title: 'Playground',
-		slug: 'docs/playground',
-		content:
-			'Interactive playground to experiment with LayerChart components. Try code examples in StackBlitz.',
-		type: 'page'
-	},
 	{
 		title: 'Showcase',
 		slug: 'docs/showcase',
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-dark-240w.webp b/docs/static/screenshots/AnnotationLine/custom-label-dark-240w.webp
new file mode 100644
index 0000000000..46d5ef59cb
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-dark-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-dark-400w.webp b/docs/static/screenshots/AnnotationLine/custom-label-dark-400w.webp
new file mode 100644
index 0000000000..f68e310a7a
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-dark-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-dark-800w.webp b/docs/static/screenshots/AnnotationLine/custom-label-dark-800w.webp
new file mode 100644
index 0000000000..c0c1f75b04
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-dark-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-light-240w.webp b/docs/static/screenshots/AnnotationLine/custom-label-light-240w.webp
new file mode 100644
index 0000000000..3e727dc919
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-light-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-light-400w.webp b/docs/static/screenshots/AnnotationLine/custom-label-light-400w.webp
new file mode 100644
index 0000000000..459d0d5296
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-light-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-label-light-800w.webp b/docs/static/screenshots/AnnotationLine/custom-label-light-800w.webp
new file mode 100644
index 0000000000..1a3b80ae87
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-label-light-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-dark-240w.webp b/docs/static/screenshots/AnnotationLine/custom-line-dark-240w.webp
new file mode 100644
index 0000000000..01338d8287
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-dark-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-dark-400w.webp b/docs/static/screenshots/AnnotationLine/custom-line-dark-400w.webp
new file mode 100644
index 0000000000..a60a46dd39
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-dark-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-dark-800w.webp b/docs/static/screenshots/AnnotationLine/custom-line-dark-800w.webp
new file mode 100644
index 0000000000..507d18bf76
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-dark-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-light-240w.webp b/docs/static/screenshots/AnnotationLine/custom-line-light-240w.webp
new file mode 100644
index 0000000000..dd94b379fc
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-light-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-light-400w.webp b/docs/static/screenshots/AnnotationLine/custom-line-light-400w.webp
new file mode 100644
index 0000000000..84a3fd973a
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-light-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationLine/custom-line-light-800w.webp b/docs/static/screenshots/AnnotationLine/custom-line-light-800w.webp
new file mode 100644
index 0000000000..c43e755c15
Binary files /dev/null and b/docs/static/screenshots/AnnotationLine/custom-line-light-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-dark-240w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-240w.webp
new file mode 100644
index 0000000000..a14c7c989f
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-dark-400w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-400w.webp
new file mode 100644
index 0000000000..6a60be0e1f
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-dark-800w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-800w.webp
new file mode 100644
index 0000000000..5069c05107
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-dark-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-light-240w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-light-240w.webp
new file mode 100644
index 0000000000..84f8693736
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-light-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-light-400w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-light-400w.webp
new file mode 100644
index 0000000000..cdffe591ba
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-light-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationPoint/custom-marker-light-800w.webp b/docs/static/screenshots/AnnotationPoint/custom-marker-light-800w.webp
new file mode 100644
index 0000000000..d168724937
Binary files /dev/null and b/docs/static/screenshots/AnnotationPoint/custom-marker-light-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-dark-240w.webp b/docs/static/screenshots/AnnotationRange/custom-label-dark-240w.webp
new file mode 100644
index 0000000000..39d18699e5
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-dark-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-dark-400w.webp b/docs/static/screenshots/AnnotationRange/custom-label-dark-400w.webp
new file mode 100644
index 0000000000..1e1af15104
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-dark-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-dark-800w.webp b/docs/static/screenshots/AnnotationRange/custom-label-dark-800w.webp
new file mode 100644
index 0000000000..349beaaabb
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-dark-800w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-light-240w.webp b/docs/static/screenshots/AnnotationRange/custom-label-light-240w.webp
new file mode 100644
index 0000000000..154b4258da
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-light-240w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-light-400w.webp b/docs/static/screenshots/AnnotationRange/custom-label-light-400w.webp
new file mode 100644
index 0000000000..3c034db16c
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-light-400w.webp differ
diff --git a/docs/static/screenshots/AnnotationRange/custom-label-light-800w.webp b/docs/static/screenshots/AnnotationRange/custom-label-light-800w.webp
new file mode 100644
index 0000000000..bd9150c95a
Binary files /dev/null and b/docs/static/screenshots/AnnotationRange/custom-label-light-800w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-240w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-240w.webp
index 193b947ec3..9b10d64742 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-240w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-240w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-400w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-400w.webp
index 4b4f16a773..8f6a779d59 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-400w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-400w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-800w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-800w.webp
index 46d7502d1d..2ec83ad511 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-800w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-dark-800w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-240w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-240w.webp
index 05b0598684..0961cccf68 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-240w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-240w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-400w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-400w.webp
index dfd7c51c6e..2ba5eecdc6 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-400w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-400w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-800w.webp b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-800w.webp
index 7466ac5803..9f0c055b45 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-800w.webp and b/docs/static/screenshots/AreaChart/tooltip-fixed-with-hide-delay-light-800w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-dark-240w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-dark-240w.webp
index 3bef2f6950..d281c7bdb7 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-dark-240w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-dark-240w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-dark-400w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-dark-400w.webp
index e4914193fb..6df931cfab 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-dark-400w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-dark-400w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-dark-800w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-dark-800w.webp
index 16def957c7..d423d05303 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-dark-800w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-dark-800w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-light-240w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-light-240w.webp
index 4878eb0543..1b3a41fd77 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-light-240w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-light-240w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-light-400w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-light-400w.webp
index 55d317c555..9b97babf6e 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-light-400w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-light-400w.webp differ
diff --git a/docs/static/screenshots/AreaChart/tooltip-locking-light-800w.webp b/docs/static/screenshots/AreaChart/tooltip-locking-light-800w.webp
index 05e04fc22f..6462eba2ec 100644
Binary files a/docs/static/screenshots/AreaChart/tooltip-locking-light-800w.webp and b/docs/static/screenshots/AreaChart/tooltip-locking-light-800w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-dark-240w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-240w.webp
new file mode 100644
index 0000000000..813914efe0
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-240w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-dark-400w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-400w.webp
new file mode 100644
index 0000000000..1328470224
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-400w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-dark-800w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-800w.webp
new file mode 100644
index 0000000000..65f761f29a
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-dark-800w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-light-240w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-light-240w.webp
new file mode 100644
index 0000000000..4ff5168f4c
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-light-240w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-light-400w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-light-400w.webp
new file mode 100644
index 0000000000..3c40849162
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-light-400w.webp differ
diff --git a/docs/static/screenshots/BarChart/group-series-dual-axis-light-800w.webp b/docs/static/screenshots/BarChart/group-series-dual-axis-light-800w.webp
new file mode 100644
index 0000000000..6c1c9e3028
Binary files /dev/null and b/docs/static/screenshots/BarChart/group-series-dual-axis-light-800w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-240w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-240w.webp
index e715ea13f9..2eaa8dd2bc 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-240w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-240w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-400w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-400w.webp
index 2206f31de7..2060d89c3b 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-400w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-400w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-800w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-800w.webp
index b465bc82b0..14c0dbdc73 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-800w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-dark-800w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-240w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-240w.webp
index fef533f0c7..0d5aaeec4e 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-240w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-240w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-400w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-400w.webp
index 633db5326f..f9b71c4e14 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-400w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-400w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-800w.webp b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-800w.webp
index 5551c0dd39..b2181ebabf 100644
Binary files a/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-800w.webp and b/docs/static/screenshots/Chart/compound-common-scale-with-extra-marks-light-800w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-240w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-240w.webp
index 300b2d173d..c9a775d258 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-240w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-240w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-400w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-400w.webp
index 82889aeab5..86d556fcaf 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-400w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-400w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-800w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-800w.webp
index 892ed99f8d..c4038eea61 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-800w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-dark-800w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-240w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-240w.webp
index a18c2275ec..07c63a4c53 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-240w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-240w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-400w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-400w.webp
index f1914ce2cb..d1444376eb 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-400w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-400w.webp differ
diff --git a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-800w.webp b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-800w.webp
index ff1e66f7b1..a07a3d4885 100644
Binary files a/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-800w.webp and b/docs/static/screenshots/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks-light-800w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-dark-240w.webp b/docs/static/screenshots/GeoPath/election-isometric-dark-240w.webp
new file mode 100644
index 0000000000..a493b6cfd4
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-dark-240w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-dark-400w.webp b/docs/static/screenshots/GeoPath/election-isometric-dark-400w.webp
new file mode 100644
index 0000000000..397cd59718
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-dark-400w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-dark-800w.webp b/docs/static/screenshots/GeoPath/election-isometric-dark-800w.webp
new file mode 100644
index 0000000000..ef546ffcb1
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-dark-800w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-light-240w.webp b/docs/static/screenshots/GeoPath/election-isometric-light-240w.webp
new file mode 100644
index 0000000000..a493b6cfd4
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-light-240w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-light-400w.webp b/docs/static/screenshots/GeoPath/election-isometric-light-400w.webp
new file mode 100644
index 0000000000..397cd59718
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-light-400w.webp differ
diff --git a/docs/static/screenshots/GeoPath/election-isometric-light-800w.webp b/docs/static/screenshots/GeoPath/election-isometric-light-800w.webp
new file mode 100644
index 0000000000..ef546ffcb1
Binary files /dev/null and b/docs/static/screenshots/GeoPath/election-isometric-light-800w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-dark-240w.webp b/docs/static/screenshots/GeoPath/us-country-map-dark-240w.webp
index c358c8f960..5183ea144d 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-dark-240w.webp and b/docs/static/screenshots/GeoPath/us-country-map-dark-240w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-dark-400w.webp b/docs/static/screenshots/GeoPath/us-country-map-dark-400w.webp
index d91eeddd88..4b516e5664 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-dark-400w.webp and b/docs/static/screenshots/GeoPath/us-country-map-dark-400w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-dark-800w.webp b/docs/static/screenshots/GeoPath/us-country-map-dark-800w.webp
index 77690329d1..7689ed23d5 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-dark-800w.webp and b/docs/static/screenshots/GeoPath/us-country-map-dark-800w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-light-240w.webp b/docs/static/screenshots/GeoPath/us-country-map-light-240w.webp
index 54651ec5f3..ab42ab8193 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-light-240w.webp and b/docs/static/screenshots/GeoPath/us-country-map-light-240w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-light-400w.webp b/docs/static/screenshots/GeoPath/us-country-map-light-400w.webp
index 4c0eecf23d..fafa0e2cd8 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-light-400w.webp and b/docs/static/screenshots/GeoPath/us-country-map-light-400w.webp differ
diff --git a/docs/static/screenshots/GeoPath/us-country-map-light-800w.webp b/docs/static/screenshots/GeoPath/us-country-map-light-800w.webp
index 98851b804e..65619bdf14 100644
Binary files a/docs/static/screenshots/GeoPath/us-country-map-light-800w.webp and b/docs/static/screenshots/GeoPath/us-country-map-light-800w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-dark-240w.webp b/docs/static/screenshots/Waffle/stacked-dark-240w.webp
index 734f50ae52..5cf28bdc47 100644
Binary files a/docs/static/screenshots/Waffle/stacked-dark-240w.webp and b/docs/static/screenshots/Waffle/stacked-dark-240w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-dark-400w.webp b/docs/static/screenshots/Waffle/stacked-dark-400w.webp
index 90d2dcddc6..4de6e30d77 100644
Binary files a/docs/static/screenshots/Waffle/stacked-dark-400w.webp and b/docs/static/screenshots/Waffle/stacked-dark-400w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-dark-800w.webp b/docs/static/screenshots/Waffle/stacked-dark-800w.webp
index d775bb6aee..9e3ccdf2db 100644
Binary files a/docs/static/screenshots/Waffle/stacked-dark-800w.webp and b/docs/static/screenshots/Waffle/stacked-dark-800w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-light-240w.webp b/docs/static/screenshots/Waffle/stacked-light-240w.webp
index 0a8ba94643..1a40075e9d 100644
Binary files a/docs/static/screenshots/Waffle/stacked-light-240w.webp and b/docs/static/screenshots/Waffle/stacked-light-240w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-light-400w.webp b/docs/static/screenshots/Waffle/stacked-light-400w.webp
index c9dc01d926..207b7fc1f3 100644
Binary files a/docs/static/screenshots/Waffle/stacked-light-400w.webp and b/docs/static/screenshots/Waffle/stacked-light-400w.webp differ
diff --git a/docs/static/screenshots/Waffle/stacked-light-800w.webp b/docs/static/screenshots/Waffle/stacked-light-800w.webp
index d9ca32af0c..71b8b42054 100644
Binary files a/docs/static/screenshots/Waffle/stacked-light-800w.webp and b/docs/static/screenshots/Waffle/stacked-light-800w.webp differ
diff --git a/docs/static/screenshots/index.json b/docs/static/screenshots/index.json
index 0540d6f97f..768a42444c 100644
--- a/docs/static/screenshots/index.json
+++ b/docs/static/screenshots/index.json
@@ -1,7 +1,7 @@
 {
-  "generatedAt": "2026-10-08T16:54:42.290Z",
+  "generatedAt": "2026-10-16T16:32:33.350Z",
   "totalComponents": 80,
-  "totalExamples": 1008,
+  "totalExamples": 1013,
   "components": [
     {
       "component": "AnnotationLine",
@@ -11,6 +11,16 @@
           "path": "/example/AnnotationLine/bar-chart",
           "checksum": "b08237abe0d6ca9833cf95441d942a48"
         },
+        {
+          "name": "custom-label",
+          "path": "/example/AnnotationLine/custom-label",
+          "checksum": "d0219776e4bd15faffec143c8e503faf"
+        },
+        {
+          "name": "custom-line",
+          "path": "/example/AnnotationLine/custom-line",
+          "checksum": "3cfe9ea9220db7fdcddeada02c680db5"
+        },
         {
           "name": "horizontal",
           "path": "/example/AnnotationLine/horizontal",
@@ -66,6 +76,11 @@
           "path": "/example/AnnotationPoint/band-scale-on-value",
           "checksum": "33a0d2b715cf2ca654d8baa54849bbb8"
         },
+        {
+          "name": "custom-marker",
+          "path": "/example/AnnotationPoint/custom-marker",
+          "checksum": "f6f825df80bf0240bd712d4746154567"
+        },
         {
           "name": "line-to-point",
           "path": "/example/AnnotationPoint/line-to-point",
@@ -131,6 +146,11 @@
           "path": "/example/AnnotationRange/bar-chart-(value)",
           "checksum": "283526e34b111e6601ff2697f20bd5c0"
         },
+        {
+          "name": "custom-label",
+          "path": "/example/AnnotationRange/custom-label",
+          "checksum": "d8b3e6ef7651a2049885872f968cd699"
+        },
         {
           "name": "hide-tooltip",
           "path": "/example/AnnotationRange/hide-tooltip",
@@ -699,12 +719,12 @@
         {
           "name": "tooltip-fixed-with-hide-delay",
           "path": "/example/AreaChart/tooltip-fixed-with-hide-delay",
-          "checksum": "95120b8297e3a6c762b8cd8be972469e"
+          "checksum": "8b7be96fca0f59b649cb12be4c48d1dd"
         },
         {
           "name": "tooltip-locking",
           "path": "/example/AreaChart/tooltip-locking",
-          "checksum": "d38c62564f3fb61bb21d122b5e8a5c65"
+          "checksum": "6c0dd00b9d5694451df04de2c2eaedfd"
         }
       ]
     },
@@ -824,7 +844,7 @@
         {
           "name": "multiple-axis-same-placement-right",
           "path": "/example/Axis/multiple-axis-same-placement-right",
-          "checksum": "e2f9d61193404363955864300caa384c"
+          "checksum": "6e21f7c7f80bf48a07c40ba2a1550b1d"
         },
         {
           "name": "override-axis-ticks-scale",
@@ -1116,6 +1136,11 @@
           "path": "/example/BarChart/group-series-bar-click",
           "checksum": "48ae43258950da0eda36fdd6ce0bac66"
         },
+        {
+          "name": "group-series-dual-axis",
+          "path": "/example/BarChart/group-series-dual-axis",
+          "checksum": "7aee480f70365c6158fa2b3a12320e49"
+        },
         {
           "name": "group-series-horizontal",
           "path": "/example/BarChart/group-series-horizontal",
@@ -1354,12 +1379,12 @@
         {
           "name": "series-horizontal-diverging",
           "path": "/example/BarChart/series-horizontal-diverging",
-          "checksum": "5b3084d1f66cb11ce39d8c9c89c15aa9"
+          "checksum": "3587db93ad38e36d626be8f635cf6a57"
         },
         {
           "name": "series-horizontal-diverging-as-percent",
           "path": "/example/BarChart/series-horizontal-diverging-as-percent",
-          "checksum": "a45af53ba921d1867507ff7ba433b9b8"
+          "checksum": "296f5ab63ff507225431eb349d2a837a"
         },
         {
           "name": "series-horizontal-diverging-label-gap",
@@ -2114,27 +2139,27 @@
         {
           "name": "compound-common-scale-with-extra-marks",
           "path": "/example/Chart/compound-common-scale-with-extra-marks",
-          "checksum": "dc2936a1a1d61bed133357124c858a4f"
+          "checksum": "c1549f98fab112da545cb54a35dc3358"
         },
         {
           "name": "compound-dual-axis-with-single-chart-using-remapped-scale",
           "path": "/example/Chart/compound-dual-axis-with-single-chart-using-remapped-scale",
-          "checksum": "f0c5c6823e677c270998ff660fa1b89e"
+          "checksum": "054d28930158cc4196471e31b012afec"
         },
         {
           "name": "compound-dual-axis-with-stacked-charts",
           "path": "/example/Chart/compound-dual-axis-with-stacked-charts",
-          "checksum": "0b3080353b317c8b59128a12708dae9a"
+          "checksum": "764bad8831633d7cd0a16960407eabd3"
         },
         {
           "name": "compound-separate-scales-with-stacked-charts-and-overridden-marks",
           "path": "/example/Chart/compound-separate-scales-with-stacked-charts-and-overridden-marks",
-          "checksum": "840780a42729a6bf43f6da0dd9d646c4"
+          "checksum": "d303e883a3a52372b6afbbe178337e46"
         },
         {
           "name": "compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
           "path": "/example/Chart/compound-separate-scales-with-stacked-charts-with-inverted-range-top-down",
-          "checksum": "bc400cfba22fef3d56536edc14c652cb"
+          "checksum": "1cba09903f6ec5a0831b086bcc65e857"
         },
         {
           "name": "data-chart-multi",
@@ -2314,7 +2339,7 @@
         {
           "name": "mixed-marks-with-stack",
           "path": "/example/Chart/mixed-marks-with-stack",
-          "checksum": "02e00237acf4bdd1ce8cc96e9ca53cee"
+          "checksum": "2e99871e82016041671da7924026ae69"
         },
         {
           "name": "mixed-marks-with-stack-long-data",
@@ -2874,7 +2899,7 @@
         {
           "name": "election-isometric",
           "path": "/example/GeoPath/election-isometric",
-          "checksum": ""
+          "checksum": "b5395a813621a834506b9eea31d43b63"
         },
         {
           "name": "interpolating-projections",
@@ -2954,7 +2979,7 @@
         {
           "name": "us-country-map",
           "path": "/example/GeoPath/us-country-map",
-          "checksum": "d1d2accdb59624b0f354b21da88c5c20"
+          "checksum": "073c23e416688f7492bcd8daf6d8b1b6"
         },
         {
           "name": "us-state",
@@ -5394,7 +5419,7 @@
         {
           "name": "custom-symbol",
           "path": "/example/Waffle/custom-symbol",
-          "checksum": "4a8e5402f981105751da2b6731bef6d4"
+          "checksum": "24bc52e3476bfdccda674d21ce680a48"
         },
         {
           "name": "horizontal",
@@ -5419,17 +5444,17 @@
         {
           "name": "olympians-weight-by-sex",
           "path": "/example/Waffle/olympians-weight-by-sex",
-          "checksum": "c734584751a3757ff5e2c83c06705062"
+          "checksum": "81a9d1f981a45f406a71349f95a5a87e"
         },
         {
           "name": "penguins",
           "path": "/example/Waffle/penguins",
-          "checksum": "37ef784a8bbe188e85fa55277f51b28d"
+          "checksum": "c1c3a9c8ac9b2aa6423a27dae044af0a"
         },
         {
           "name": "stacked",
           "path": "/example/Waffle/stacked",
-          "checksum": "b000d9cb4abd3055da6e49186bb39e65"
+          "checksum": "9d9d0a1d2cdef2949bf135dc68c88aa3"
         },
         {
           "name": "survey",
diff --git a/docs/vite.config.ts b/docs/vite.config.ts
index 718325941a..ff306f0b7e 100644
--- a/docs/vite.config.ts
+++ b/docs/vite.config.ts
@@ -4,6 +4,7 @@ import tailwindcss from '@tailwindcss/vite';
 import { sveltekit } from '@sveltejs/kit/vite';
 import contentCollections from '@content-collections/vite';
 import Icons from 'unplugin-icons/vite';
+import { sandboxRegistry } from './src/lib/sandbox/registry-plugin';
 // import devtoolsJson from 'vite-plugin-devtools-json';
 
 const isTest = process.env.VITEST === 'true';
@@ -31,6 +32,7 @@ export default defineConfig({
 	plugins: [
 		tailwindcss(),
 		sveltekit(),
+		sandboxRegistry(),
 		!isTest && contentCollections(),
 		Icons({
 			compiler: 'svelte',
@@ -50,10 +52,6 @@ export default defineConfig({
 		// allowedHosts: ['.trycloudflare.com'],
 		fs: {
 			allow: ['.live-code']
-		},
-		headers: {
-			'Cross-Origin-Embedder-Policy': 'require-corp',
-			'Cross-Origin-Opener-Policy': 'same-origin'
 		}
 	},
 	test: {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 54e9136fef..f3d5421aed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -50,6 +50,12 @@ importers:
 
   docs:
     dependencies:
+      '@codemirror/autocomplete':
+        specifier: ^6.20.1
+        version: 6.20.1
+      '@codemirror/commands':
+        specifier: ^6.10.0
+        version: 6.10.0
       '@codemirror/lang-css':
         specifier: ^6.3.1
         version: 6.3.1
@@ -59,33 +65,39 @@ importers:
       '@codemirror/lang-javascript':
         specifier: ^6.2.5
         version: 6.2.5
+      '@codemirror/language':
+        specifier: ^6.12.2
+        version: 6.12.2
+      '@codemirror/lint':
+        specifier: ^6.9.5
+        version: 6.9.5
       '@codemirror/state':
         specifier: ^6.6.0
         version: 6.6.0
+      '@codemirror/view':
+        specifier: ^6.40.0
+        version: 6.40.0
       '@fontsource/inter':
         specifier: ^5.2.8
         version: 5.2.8
+      '@lezer/highlight':
+        specifier: ^1.2.3
+        version: 1.2.3
+      '@replit/codemirror-lang-svelte':
+        specifier: ^6.0.0
+        version: 6.0.0(@codemirror/autocomplete@6.20.1)(@codemirror/lang-css@6.3.1)(@codemirror/lang-html@6.4.11)(@codemirror/lang-javascript@6.2.5)(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/javascript@1.5.4)(@lezer/lr@1.4.8)
       '@resvg/resvg-js':
         specifier: ^2.6.2
         version: 2.6.2
       '@stackblitz/sdk':
         specifier: ^1.11.0
         version: 1.11.0
-      '@uiw/codemirror-theme-github':
-        specifier: ^4.25.10
-        version: 4.25.10(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)
-      '@webcontainer/api':
-        specifier: ^1.6.4
-        version: 1.6.4
-      ansi_up:
-        specifier: ^6.0.6
-        version: 6.0.6
-      codemirror:
-        specifier: ^6.0.2
-        version: 6.0.2
       d3-geo-projection:
         specifier: ^4.0.0
         version: 4.0.0
+      es-module-lexer:
+        specifier: ^2.1.0
+        version: 2.1.0
       satori:
         specifier: ^0.26.0
         version: 0.26.0
@@ -118,8 +130,8 @@ importers:
         specifier: ^1.2.53
         version: 1.2.53
       '@layerstack/docs':
-        specifier: 1.0.0-next.4
-        version: 1.0.0-next.4(@sveltejs/kit@2.62.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.1(@typescript-eslint/types@8.60.1))(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0))(postcss@8.5.15)(svelte@5.56.1(@typescript-eslint/types@8.60.1))
+        specifier: 1.0.0-next.6
+        version: 1.0.0-next.6(@sveltejs/kit@2.62.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.1(@typescript-eslint/types@8.60.1))(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0))(postcss@8.5.15)(svelte@5.56.1(@typescript-eslint/types@8.60.1))
       '@layerstack/svelte-actions':
         specifier: 1.0.1-next.20
         version: 1.0.1-next.20
@@ -951,7 +963,7 @@ importers:
         version: 5.57.1(@typescript-eslint/types@8.60.1)
       svelte-check:
         specifier: ^4.5.0
-        version: 4.5.0(picomatch@4.0.4)(svelte@5.57.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)
+        version: 4.5.0(picomatch@4.0.5)(svelte@5.57.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)
       svelte2tsx:
         specifier: ^0.7.56
         version: 0.7.56(svelte@5.57.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)
@@ -1095,9 +1107,6 @@ packages:
   '@cloudflare/workers-types@4.20260219.0':
     resolution: {integrity: sha512-jL2BNnDqbKXDrxhtKx+wVmQpv/P6w8J4WVFiuT9OMEPsw8V2TfTozoWTcCZ2AhE09yK406xQFE4mBq9IIgobuw==}
 
-  '@codemirror/autocomplete@6.20.0':
-    resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==}
-
   '@codemirror/autocomplete@6.20.1':
     resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==}
 
@@ -1113,27 +1122,15 @@ packages:
   '@codemirror/lang-javascript@6.2.5':
     resolution: {integrity: sha512-zD4e5mS+50htS7F+TYjBPsiIFGanfVqg4HyUz6WNFikgOPf2BgKlx+TQedI1w6n/IqRBVBbBWmGFdLB/7uxO4A==}
 
-  '@codemirror/language@6.11.3':
-    resolution: {integrity: sha512-9HBM2XnwDj7fnu0551HkGdrUrrqmYq/WC5iv6nbY2WdicXdGbhR/gfbZOH73Aqj4351alY1+aoG9rCNfiwS1RA==}
-
   '@codemirror/language@6.12.2':
     resolution: {integrity: sha512-jEPmz2nGGDxhRTg3lTpzmIyGKxz3Gp3SJES4b0nAuE5SWQoKdT5GoQ69cwMmFd+wvFUhYirtDTr0/DRHpQAyWg==}
 
-  '@codemirror/lint@6.9.2':
-    resolution: {integrity: sha512-sv3DylBiIyi+xKwRCJAAsBZZZWo82shJ/RTMymLabAdtbkV5cSKwWDeCgtUq3v8flTaXS2y1kKkICuRYtUswyQ==}
-
   '@codemirror/lint@6.9.5':
     resolution: {integrity: sha512-GElsbU9G7QT9xXhpUg1zWGmftA/7jamh+7+ydKRuT0ORpWS3wOSP0yT1FOlIZa7mIJjpVPipErsyvVqB9cfTFA==}
 
-  '@codemirror/search@6.5.11':
-    resolution: {integrity: sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==}
-
   '@codemirror/state@6.6.0':
     resolution: {integrity: sha512-4nbvra5R5EtiCzr9BTHiTLc+MLXK2QGiAVYMyi8PkQd3SR+6ixar/Q/01Fa21TBIDOZXgeWV4WppsQolSreAPQ==}
 
-  '@codemirror/view@6.38.8':
-    resolution: {integrity: sha512-XcE9fcnkHCbWkjeKyi0lllwXmBLtyYb5dt89dJyx23I9+LSh5vZDIuk7OLG4VM1lgrXZQcY6cxyZyk5WVPRv/A==}
-
   '@codemirror/view@6.40.0':
     resolution: {integrity: sha512-WA0zdU7xfF10+5I3HhUUq3kqOx3KjqmtQ9lqZjfK7jtYk4G72YW9rezcSywpaUMCWOMlq+6E0pO1IWg1TNIhtg==}
 
@@ -1935,8 +1932,8 @@ packages:
   '@jridgewell/trace-mapping@0.3.9':
     resolution: {integrity: sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==}
 
-  '@layerstack/docs@1.0.0-next.4':
-    resolution: {integrity: sha512-dZobd515uH01ph9iX+rLv6hl61sZ3pxLEuorHvX7SgEmcC9aZRYZWqv5KRJaRA4jpXNrnqveRA5S464VwZNFGw==}
+  '@layerstack/docs@1.0.0-next.6':
+    resolution: {integrity: sha512-rCaNfk4tgDqm9QtvrT6AAoKpf9lonfIPHUWjO0LO2q05qIIZYxcHRqRYn8DaEYKi/7Fo0uhDTOlNU9oow7qstQ==}
     hasBin: true
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
@@ -1978,6 +1975,9 @@ packages:
   '@layerstack/tailwind@2.0.0-next.22':
     resolution: {integrity: sha512-IRp2yvZE7rPPKIt7rWcfm7PtSUAorpqexP73Set39iRS0POOHFqfD6pbV5If1eHMewAdk3xgEQ5QLoz3CPUiHQ==}
 
+  '@layerstack/tailwind@2.0.0-next.23':
+    resolution: {integrity: sha512-D002PeovPVZZu+2q7N+3OJ/yJCAZokTtqDJTxzGv9fzxkIeevoE1Mh3gzekIIoZkpWMPB9UfgPNmZH49PlFojA==}
+
   '@layerstack/utils@2.0.0-next.14':
     resolution: {integrity: sha512-1I2CS0Cwgs53W35qVg1eBdYhB/CiPvL3s0XE61b8jWkTHxgjBF65yYNgXjW74kv7WI7GsJcWMNBufPd0rnu9kA==}
 
@@ -2005,9 +2005,6 @@ packages:
   '@lezer/javascript@1.5.4':
     resolution: {integrity: sha512-vvYx3MhWqeZtGPwDStM2dwgljd5smolYD2lR2UyFcHfxbBQebqx8yjmFmxtJ/E6nN6u1D9srOiVWm3Rb4tmcUA==}
 
-  '@lezer/lr@1.4.4':
-    resolution: {integrity: sha512-LHL17Mq0OcFXm1pGQssuGTQFPPdxARjKM8f7GA5+sGtHi0K3R84YaSbmche0+RKWHnCsx9asEe5OWOI4FHfe4A==}
-
   '@lezer/lr@1.4.8':
     resolution: {integrity: sha512-bPWa0Pgx69ylNlMlPvBPryqeLYQjyJjqPx+Aupm5zydLIF3NE+6MMLT8Yi23Bd9cif9VS00aUebn+6fDIGBcDA==}
 
@@ -2366,6 +2363,21 @@ packages:
   '@quansync/fs@1.0.0':
     resolution: {integrity: sha512-4TJ3DFtlf1L5LDMaM6CanJ/0lckGNtJcMjQ1NAV6zDmA0tEHKZtxNKin8EgPaVX1YzljbxckyT2tJrpQKAtngQ==}
 
+  '@replit/codemirror-lang-svelte@6.0.0':
+    resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
+    peerDependencies:
+      '@codemirror/autocomplete': ^6.0.0
+      '@codemirror/lang-css': ^6.0.1
+      '@codemirror/lang-html': ^6.2.0
+      '@codemirror/lang-javascript': ^6.1.1
+      '@codemirror/language': ^6.0.0
+      '@codemirror/state': ^6.0.0
+      '@codemirror/view': ^6.0.0
+      '@lezer/common': ^1.0.0
+      '@lezer/highlight': ^1.0.0
+      '@lezer/javascript': ^1.2.0
+      '@lezer/lr': ^1.0.0
+
   '@resvg/resvg-js-android-arm-eabi@2.6.2':
     resolution: {integrity: sha512-FrJibrAk6v29eabIPgcTUMPXiEz8ssrAk7TXxsiZzww9UTQ1Z5KAbFJs+Z0Ez+VZTYgnE5IQJqBcoSiMebtPHA==}
     engines: {node: '>= 10'}
@@ -3190,16 +3202,6 @@ packages:
     resolution: {integrity: sha512-EbGRQg4FhrmwLodl+t3JNAnXHWVr9Vp+Zl1QBZVPY4ByfkzIT8cX3K6QWODHtkIZqqJVEWvhHSx3v5PDHsaQag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@uiw/codemirror-theme-github@4.25.10':
-    resolution: {integrity: sha512-iMM2QT4FaebJMO4W7lXmxNkRPIjKzgY26wL0QG0Ugy0gzsnxoNz4zgNeFIblPA8rvrN3vOIhNNh4nk9UOlFKxA==}
-
-  '@uiw/codemirror-themes@4.25.10':
-    resolution: {integrity: sha512-Fqiz1HIuDlDftcL+/O53V333UOH6MqQ84VbiQB5egn6u+uDwAqACp1FrdAoi4wgpR3b3TGW4Gr0wIYcrJSSz1A==}
-    peerDependencies:
-      '@codemirror/language': '>=6.0.0'
-      '@codemirror/state': '>=6.0.0'
-      '@codemirror/view': '>=6.0.0'
-
   '@ungap/structured-clone@1.3.0':
     resolution: {integrity: sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==}
     deprecated: Potential CWE-502 - Update to 1.3.1 or higher
@@ -3741,9 +3743,6 @@ packages:
     resolution: {integrity: sha512-4Dj6M28JB+oAH8kFkTLUo+a2jwOFkuqb3yucU0CANcRRUbxS0cP0nZYCGjcc3BNXwRIsUVmDGgzawme7zvJHvg==}
     engines: {node: '>=12'}
 
-  ansi_up@6.0.6:
-    resolution: {integrity: sha512-yIa1x3Ecf8jWP4UWEunNjqNX6gzE4vg2gGz+xqRGY+TBSucnYp6RRdPV4brmtg6bQ1ljD48mZ5iGSEj7QEpRKA==}
-
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
 
@@ -3874,9 +3873,6 @@ packages:
   code-red@1.0.4:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
-  codemirror@6.0.2:
-    resolution: {integrity: sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==}
-
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -6495,13 +6491,6 @@ snapshots:
 
   '@cloudflare/workers-types@4.20260219.0': {}
 
-  '@codemirror/autocomplete@6.20.0':
-    dependencies:
-      '@codemirror/language': 6.11.3
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-      '@lezer/common': 1.4.0
-
   '@codemirror/autocomplete@6.20.1':
     dependencies:
       '@codemirror/language': 6.12.2
@@ -6511,27 +6500,27 @@ snapshots:
 
   '@codemirror/commands@6.10.0':
     dependencies:
-      '@codemirror/language': 6.11.3
+      '@codemirror/language': 6.12.2
       '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-      '@lezer/common': 1.4.0
+      '@codemirror/view': 6.40.0
+      '@lezer/common': 1.5.1
 
   '@codemirror/lang-css@6.3.1':
     dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/language': 6.11.3
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/language': 6.12.2
       '@codemirror/state': 6.6.0
       '@lezer/common': 1.4.0
       '@lezer/css': 1.3.0
 
   '@codemirror/lang-html@6.4.11':
     dependencies:
-      '@codemirror/autocomplete': 6.20.0
+      '@codemirror/autocomplete': 6.20.1
       '@codemirror/lang-css': 6.3.1
       '@codemirror/lang-javascript': 6.2.5
-      '@codemirror/language': 6.11.3
+      '@codemirror/language': 6.12.2
       '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
+      '@codemirror/view': 6.40.0
       '@lezer/common': 1.4.0
       '@lezer/css': 1.3.0
       '@lezer/html': 1.3.12
@@ -6546,15 +6535,6 @@ snapshots:
       '@lezer/common': 1.5.1
       '@lezer/javascript': 1.5.4
 
-  '@codemirror/language@6.11.3':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-      '@lezer/common': 1.4.0
-      '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.4
-      style-mod: 4.1.3
-
   '@codemirror/language@6.12.2':
     dependencies:
       '@codemirror/state': 6.6.0
@@ -6564,35 +6544,16 @@ snapshots:
       '@lezer/lr': 1.4.8
       style-mod: 4.1.3
 
-  '@codemirror/lint@6.9.2':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-      crelt: 1.0.6
-
   '@codemirror/lint@6.9.5':
     dependencies:
       '@codemirror/state': 6.6.0
       '@codemirror/view': 6.40.0
       crelt: 1.0.6
 
-  '@codemirror/search@6.5.11':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-      crelt: 1.0.6
-
   '@codemirror/state@6.6.0':
     dependencies:
       '@marijn/find-cluster-break': 1.0.2
 
-  '@codemirror/view@6.38.8':
-    dependencies:
-      '@codemirror/state': 6.6.0
-      crelt: 1.0.6
-      style-mod: 4.1.3
-      w3c-keyname: 2.2.8
-
   '@codemirror/view@6.40.0':
     dependencies:
       '@codemirror/state': 6.6.0
@@ -7165,14 +7126,14 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.5
 
-  '@layerstack/docs@1.0.0-next.4(@sveltejs/kit@2.62.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.1(@typescript-eslint/types@8.60.1))(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0))(postcss@8.5.15)(svelte@5.56.1(@typescript-eslint/types@8.60.1))':
+  '@layerstack/docs@1.0.0-next.6(@sveltejs/kit@2.62.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.1(@typescript-eslint/types@8.60.1))(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(postcss-load-config@6.0.1(jiti@2.7.0)(postcss@8.5.15)(tsx@4.22.4)(yaml@2.9.0))(postcss@8.5.15)(svelte@5.56.1(@typescript-eslint/types@8.60.1))':
     dependencies:
       '@content-collections/core': 0.14.3(typescript@5.9.3)
       '@content-collections/markdown': 0.1.4(@content-collections/core@0.14.3(typescript@6.0.3))
       '@iconify-json/lucide': 1.2.111
       '@iconify-json/simple-icons': 1.2.85
-      '@layerstack/tailwind': 2.0.0-next.22
-      '@layerstack/utils': 2.0.0-next.18
+      '@layerstack/tailwind': 2.0.0-next.23
+      '@layerstack/utils': 2.0.0-next.19
       '@shikijs/transformers': 4.3.1
       '@sveltejs/kit': 2.62.0(@opentelemetry/api@1.9.1)(@sveltejs/vite-plugin-svelte@7.1.2(svelte@5.56.1(@typescript-eslint/types@8.60.1))(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0)))(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3)(vite@8.0.16(@types/node@25.9.1)(esbuild@0.28.0)(jiti@2.7.0)(tsx@4.22.4)(yaml@2.9.0))
       '@sveltejs/svelte-json-tree': 2.2.1(svelte@5.56.1(@typescript-eslint/types@8.60.1))
@@ -7282,6 +7243,13 @@ snapshots:
       d3-array: 3.2.4
       tailwind-merge: 3.6.0
 
+  '@layerstack/tailwind@2.0.0-next.23':
+    dependencies:
+      '@layerstack/utils': 2.0.0-next.19
+      clsx: 2.1.1
+      d3-array: 3.2.4
+      tailwind-merge: 3.6.0
+
   '@layerstack/utils@2.0.0-next.14':
     dependencies:
       d3-array: 3.2.4
@@ -7307,19 +7275,19 @@ snapshots:
 
   '@lezer/css@1.3.0':
     dependencies:
-      '@lezer/common': 1.4.0
+      '@lezer/common': 1.5.1
       '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.4
+      '@lezer/lr': 1.4.8
 
   '@lezer/highlight@1.2.3':
     dependencies:
-      '@lezer/common': 1.4.0
+      '@lezer/common': 1.5.1
 
   '@lezer/html@1.3.12':
     dependencies:
-      '@lezer/common': 1.4.0
+      '@lezer/common': 1.5.1
       '@lezer/highlight': 1.2.3
-      '@lezer/lr': 1.4.4
+      '@lezer/lr': 1.4.8
 
   '@lezer/javascript@1.5.4':
     dependencies:
@@ -7327,10 +7295,6 @@ snapshots:
       '@lezer/highlight': 1.2.3
       '@lezer/lr': 1.4.8
 
-  '@lezer/lr@1.4.4':
-    dependencies:
-      '@lezer/common': 1.4.0
-
   '@lezer/lr@1.4.8':
     dependencies:
       '@lezer/common': 1.5.1
@@ -7617,6 +7581,20 @@ snapshots:
     dependencies:
       quansync: 1.0.0
 
+  '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.20.1)(@codemirror/lang-css@6.3.1)(@codemirror/lang-html@6.4.11)(@codemirror/lang-javascript@6.2.5)(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)(@lezer/common@1.5.1)(@lezer/highlight@1.2.3)(@lezer/javascript@1.5.4)(@lezer/lr@1.4.8)':
+    dependencies:
+      '@codemirror/autocomplete': 6.20.1
+      '@codemirror/lang-css': 6.3.1
+      '@codemirror/lang-html': 6.4.11
+      '@codemirror/lang-javascript': 6.2.5
+      '@codemirror/language': 6.12.2
+      '@codemirror/state': 6.6.0
+      '@codemirror/view': 6.40.0
+      '@lezer/common': 1.5.1
+      '@lezer/highlight': 1.2.3
+      '@lezer/javascript': 1.5.4
+      '@lezer/lr': 1.4.8
+
   '@resvg/resvg-js-android-arm-eabi@2.6.2':
     optional: true
 
@@ -8454,20 +8432,6 @@ snapshots:
       '@typescript-eslint/types': 8.60.1
       eslint-visitor-keys: 5.0.1
 
-  '@uiw/codemirror-theme-github@4.25.10(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)':
-    dependencies:
-      '@uiw/codemirror-themes': 4.25.10(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)
-    transitivePeerDependencies:
-      - '@codemirror/language'
-      - '@codemirror/state'
-      - '@codemirror/view'
-
-  '@uiw/codemirror-themes@4.25.10(@codemirror/language@6.12.2)(@codemirror/state@6.6.0)(@codemirror/view@6.40.0)':
-    dependencies:
-      '@codemirror/language': 6.12.2
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.40.0
-
   '@ungap/structured-clone@1.3.0': {}
 
   '@unocss/cli@66.7.0':
@@ -9570,8 +9534,6 @@ snapshots:
 
   ansi-styles@6.2.3: {}
 
-  ansi_up@6.0.6: {}
-
   argparse@1.0.10:
     dependencies:
       sprintf-js: 1.0.3
@@ -9679,16 +9641,6 @@ snapshots:
       estree-walker: 3.0.3
       periscopic: 3.1.0
 
-  codemirror@6.0.2:
-    dependencies:
-      '@codemirror/autocomplete': 6.20.0
-      '@codemirror/commands': 6.10.0
-      '@codemirror/language': 6.11.3
-      '@codemirror/lint': 6.9.2
-      '@codemirror/search': 6.5.11
-      '@codemirror/state': 6.6.0
-      '@codemirror/view': 6.38.8
-
   color-name@1.1.4: {}
 
   colorette@2.0.20: {}
@@ -10721,7 +10673,7 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
       micromark-util-normalize-identifier: 2.0.1
     transitivePeerDependencies:
@@ -10730,7 +10682,7 @@ snapshots:
   mdast-util-gfm-strikethrough@2.0.0:
     dependencies:
       '@types/mdast': 4.0.4
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
@@ -10740,7 +10692,7 @@ snapshots:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
       markdown-table: 3.0.4
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
@@ -10749,14 +10701,14 @@ snapshots:
     dependencies:
       '@types/mdast': 4.0.4
       devlop: 1.1.0
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-to-markdown: 2.1.2
     transitivePeerDependencies:
       - supports-color
 
   mdast-util-gfm@3.1.0:
     dependencies:
-      mdast-util-from-markdown: 2.0.2
+      mdast-util-from-markdown: 2.0.3
       mdast-util-gfm-autolink-literal: 2.0.1
       mdast-util-gfm-footnote: 2.1.0
       mdast-util-gfm-strikethrough: 2.0.0
@@ -11844,26 +11796,26 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@4.5.0(picomatch@4.0.4)(svelte@5.57.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3):
+  svelte-check@4.5.0(picomatch@4.0.5)(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
-      fdir: 6.5.0(picomatch@4.0.4)
+      fdir: 6.5.0(picomatch@4.0.5)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.57.1(@typescript-eslint/types@8.60.1)
+      svelte: 5.56.1(@typescript-eslint/types@8.60.1)
       typescript: 6.0.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-check@4.5.0(picomatch@4.0.5)(svelte@5.56.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3):
+  svelte-check@4.5.0(picomatch@4.0.5)(svelte@5.57.1(@typescript-eslint/types@8.60.1))(typescript@6.0.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.31
       chokidar: 4.0.3
       fdir: 6.5.0(picomatch@4.0.5)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.56.1(@typescript-eslint/types@8.60.1)
+      svelte: 5.57.1(@typescript-eslint/types@8.60.1)
       typescript: 6.0.3
     transitivePeerDependencies:
       - picomatch