@excom/spa-route 0.1.0

package/support/package-meta.json

@@ -0,0 +1,789 @@
+{
+  "shortName": "spa-route",
+  "package": {
+    "name": "@excom/spa-route",
+    "version": "0.1.0",
+    "description": "<spa-route> custom element",
+    "peerDependencies": {},
+    "excom": {
+      "packageType": "kit-element"
+    }
+  },
+  "demos": {},
+  "readme": "<h1 id=\"md-spa-route\">spa-route</h1>\n<p>Build a full SPA from HTML alone — screens, links, and view transitions.</p>\n<blockquote>\n<p>This site is a live demo... inspect its HTML! Other live demos of spa-route coming soon.</p>\n</blockquote>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;spa-route route-href=\"/\" template-ref=\"/views/home.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/views/about.html\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n\n&lt;nav&gt;\n  &lt;spa-a route-href=\"/\"&gt;Home&lt;/spa-a&gt;\n  &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n&lt;/nav&gt;</template></include-content>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Pure CSS View Transitions</strong> Write CSS, get beautiful animations between routes</li>\n<li><strong>Active / was-active</strong> Style current and outgoing links &amp; screens (nav chrome, card expansion)</li>\n<li><strong>Same-route reuse / refresh</strong> Keep or rebuild the view when only params change</li>\n<li><strong>Scroll reset / restore</strong> Per-axis control for push, replace, back, forward</li>\n<li><strong>Nested layouts</strong> Keep a parent route mounted under child paths</li>\n<li><strong>404 fallbacks</strong> Catch-alls that only fire when nothing else matched</li>\n<li><strong>Per-route document title</strong> <code>document.title</code> follows the active route</li>\n<li><strong>History actions</strong> Push, replace, back, forward from a link</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Wrap screens in <code>&lt;spa-manager&gt;</code>, give each <code>&lt;spa-route&gt;</code> a <code>route-href</code>, and link with <code>&lt;spa-a&gt;</code>.</p>\n<include-content data-language=\"html\"><template>&lt;!-- Optional SPA manager for View Transitions and batched router config --&gt;\n&lt;spa-manager&gt;\n  &lt;!-- SPA routing --&gt;\n  &lt;spa-route route-href=\"/\" template-ref=\"/views/home.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/views/about.html\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n&lt;nav&gt;\n  &lt;!-- SPA links --&gt;\n  &lt;spa-a route-href=\"/\"&gt;Home&lt;/spa-a&gt;\n  &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n&lt;/nav&gt;</template></include-content>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-minimal-spa\">Minimal SPA</h4>\n<p>Three routes, three links. Active links style via <code>spa-a[is-active]</code>.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-href=\"/home\"&gt;Home&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/users\"&gt;Users&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/contact\"&gt;Contact&lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/home\"&gt;\n    &lt;template&gt;\n      &lt;h3&gt;Welcome&lt;/h3&gt;\n      &lt;p&gt;Mounted because the URL matched &lt;code&gt;/home&lt;/code&gt;.&lt;/p&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/users\"&gt;\n    &lt;template&gt;\n      &lt;h3&gt;Users&lt;/h3&gt;\n      &lt;ul&gt;\n        &lt;li&gt;Adam&lt;/li&gt;\n        &lt;li&gt;Linus&lt;/li&gt;\n        &lt;li&gt;Grace&lt;/li&gt;\n      &lt;/ul&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/this/view/is/remote.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/contact\" template-ref=\"#this-view-is-dom-selected\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n\n&lt;template id=\"this-view-is-dom-selected\"&gt;foo@bar.com&lt;/template&gt;</template></include-content>\n<include-content data-language=\"css\"><template>spa-a[is-active] {\n  font-weight: bold;\n  pointer-events: none;\n  text-decoration: none;\n}</template></include-content>\n<h4 id=\"md-nested-layout-amp-404\">Nested layout &amp; 404</h4>\n<p><code>match-nested</code> keeps a layout mounted under child paths. <code>is-fallback</code> with <code>route-regex=&quot;.*&quot;</code> is a 404 that only activates when no preceding sibling matched.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-href=\"/users\"&gt;Users list&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/users/42\"&gt;User 42&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/missing\"&gt;Missing page&lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/users\" match-nested&gt;\n    &lt;template&gt;\n      &lt;section&gt;\n        &lt;h3&gt;Users layout&lt;/h3&gt;\n        &lt;spa-manager&gt;\n          &lt;spa-route route-href=\"/users\"&gt;\n            &lt;template&gt;&lt;p&gt;List of users.&lt;/p&gt;&lt;/template&gt;\n          &lt;/spa-route&gt;\n          &lt;spa-route route-href=\"/users/:id\"&gt;\n            &lt;template&gt;&lt;p&gt;Detail for a single user.&lt;/p&gt;&lt;/template&gt;\n          &lt;/spa-route&gt;\n        &lt;/spa-manager&gt;\n      &lt;/section&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-regex=\".*?view=admin.*\" template-ref=\"/views/admin-sidebar.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-regex=\".*\" is-fallback&gt;\n    &lt;template&gt;\n      &lt;section&gt;\n        &lt;h3&gt;404&lt;/h3&gt;\n        &lt;p&gt;Catch-all — only when no preceding sibling matched.&lt;/p&gt;\n      &lt;/section&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-document-title\">Document title</h4>\n<p><code>document-title</code> sets <code>document.title</code> while its route is active. It keys off\nactivation, not clicks, so cold loads and back / forward retitle too. The\noutermost <code>&lt;spa-manager&gt;</code> applies the last active route carrying one — a\nnested route beats its ancestor — and restores the page&#39;s own <code>&lt;title&gt;</code> once\nno active route has a title.</p>\n<include-content data-language=\"html\"><template>&lt;title&gt;Nucleus · docs&lt;/title&gt;\n\n&lt;spa-manager&gt;\n  &lt;spa-route route-href=\"/\" document-title=\"My company\"&gt;\n    &lt;template&gt;&lt;p&gt;The company page.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;!-- untitled: the page's own &lt;title&gt; comes back --&gt;\n  &lt;spa-route route-href=\"/docs\"&gt;\n    &lt;template&gt;&lt;p&gt;The docs.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-history-actions\">History actions</h4>\n<p><code>route-action=&quot;back&quot;</code> / <code>&quot;forward&quot;</code> walk history; <code>&quot;replace&quot;</code> swaps the current entry instead of pushing.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-action=\"back\"&gt;‹ Back&lt;/spa-a&gt;\n    &lt;spa-a route-action=\"forward\"&gt;Forward ›&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/one\"&gt;Push /one&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/two\"&gt;Push /two&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/login\" route-action=\"replace\"&gt;\n      Replace with /login\n    &lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/one\"&gt;\n    &lt;template&gt;&lt;p&gt;You're on &lt;code&gt;/one&lt;/code&gt;.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/two\"&gt;\n    &lt;template&gt;&lt;p&gt;You're on &lt;code&gt;/two&lt;/code&gt;.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/login\"&gt;\n    &lt;template&gt;\n      &lt;p&gt;You're on &lt;code&gt;/login&lt;/code&gt; — this entry replaced the\n        previous one in history.&lt;/p&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-view-transitions\">View Transitions</h4>\n<p><code>&lt;spa-manager&gt;</code> wraps each navigation in <code>document.startViewTransition()</code> (when supported). Style with <code>::view-transition-*</code>; set per-link types via <code>transition-types</code> (e.g. card expansion); opt a route out with <code>no-transition</code>.</p>\n<include-content data-language=\"css\"><template>::view-transition-old(root),\n::view-transition-new(root) {\n  animation-duration: 0.25s;\n}</template></include-content>\n<h4 id=\"md-view-transitions-localized\">View Transitions - Localized</h4>\n<p>If you had a list of cards, and clicking on one expanded it to the detail view (and vice versa, contracting), you would achieve it similarly to the code example below. This technique relies on styling the <code>&lt;spa-a&gt;</code> with its <code>[is-active]</code> (incoming view) and <code>[was-active]</code> (outgoing view).</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;spa-route id=\"route-list\" route-href=\"/list\"&gt;\n    &lt;template&gt;\n      &lt;spa-a route-href=\"/detail/123\" transition-types=\"card-morph\" class=\"mini-card\"&gt;\n        Go to detail\n      &lt;/spa-a&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route id=\"route-detail\" route-href=\"/detail/:id\"&gt;\n    &lt;template&gt;\n      &lt;article id=\"detail-card\" class=\"card\"&gt;\n        &lt;!-- other content here --&gt;\n      &lt;/article&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<include-content data-language=\"css\"><template>html:active-view-transition-type(card-morph) {\n  #route-list spa-a[transition-types=\"card-morph\"][was-active], /* outgoing list card (forward) */\n  #route-list spa-a[transition-types=\"card-morph\"][is-active], /* incoming list card (back) */\n  #detail-card /* detail card (forward &amp; back) */ {\n    contain: layout;\n    height: fit-content;\n    view-transition-name: card-morph;\n  }\n}\n::view-transition-old(card-morph),\n::view-transition-new(card-morph) {\n  mix-blend-mode: normal;\n  height: 100%;\n  width: 100%;\n  will-change: opacity;\n  animation-fill-mode: both;\n}\n::view-transition-old(card-morph) {\n  animation-name: fade-out 1s ease;\n}\n::view-transition-new(card-morph) {\n  animation-name: fade-in 1s ease;\n}\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}</template></include-content>\n<h4 id=\"md-touch-edge-swipe\">Touch edge-swipe</h4>\n<p>On touch devices, horizontal drags from within <code>overscroll-x-threshold</code> of an edge trigger back / forward. Use <code>&quot;none&quot;</code> to block overscroll without navigating. Useful for preventing native swipes in Safari, which visually break SPAs.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager overscroll-behavior-x=\"navigate\"&gt;&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-scroll-reset-restore\">Scroll reset / restore</h4>\n<p>By default, <code>&lt;spa-route&gt;</code>:</p>\n<ul>\n<li>resets scroll to top-left on <code>push</code> / <code>replace</code></li>\n<li>restores the saved scroll position on <code>back</code> / <code>forward</code></li>\n</ul>\n<p>Override per axis with <code>scroll-reset-y</code> / <code>scroll-reset-x</code> — space-separated moves that should reset to <code>0</code> (omitted moves restore instead):</p>\n<include-content data-language=\"html\"><template>&lt;!-- also reset Y when the user hits back --&gt;\n&lt;spa-route\n  route-href=\"/article/:id\"\n  scroll-reset-y=\"push replace back\"\n&gt;&lt;/spa-route&gt;</template></include-content>\n<p>Animate with <code>scroll-reset-behavior=&quot;smooth&quot;</code>. Disable all scroll handling with <code>scroll-set-disabled</code>.</p>\n<h4 id=\"md-same-route-params\">Same-route params</h4>\n<p>When the matched route stays the same but params change (e.g. <code>/users/1</code> → <code>/users/2</code>):</p>\n<ul>\n<li><code>same-route=&quot;reuse&quot;</code> (default) — keep the rendered tree, update route data, and let <code>&lt;spa-manager&gt;</code> run a View Transition</li>\n<li><code>same-route=&quot;refresh&quot;</code> — tear down and re-render the view</li>\n</ul>\n<include-content data-language=\"html\"><template>&lt;spa-route route-href=\"/users/:id\" same-route=\"refresh\"&gt;\n  &lt;template&gt;&lt;!-- fresh tree per user id --&gt;&lt;/template&gt;\n&lt;/spa-route&gt;\n\n&lt;spa-route\n  route-href=\"/logs/:view\"\n  same-route=\"reuse\"\n  scroll-set-disabled\n&gt;\n  &lt;template&gt;&lt;!-- preserve content + scroll across view tabs --&gt;&lt;/template&gt;\n&lt;/spa-route&gt;</template></include-content>\n<h4 id=\"md-transition-delay\">Transition delay</h4>\n<p><code>transition-delay</code> on <code>&lt;spa-manager&gt;</code> waits N ms before starting the batched View Transition — useful when sibling routes need a beat to queue their render/unrender callbacks, or for last-second DOM work.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager transition-delay=\"50\"&gt;\n  &lt;!-- routes --&gt;\n&lt;/spa-manager&gt;</template></include-content>\n",
+  "docs": {
+    "readme": "<h1 id=\"md-spa-route\">spa-route</h1>\n<p>Build a full SPA from HTML alone — screens, links, and view transitions.</p>\n<blockquote>\n<p>This site is a live demo... inspect its HTML! Other live demos of spa-route coming soon.</p>\n</blockquote>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;spa-route route-href=\"/\" template-ref=\"/views/home.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/views/about.html\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n\n&lt;nav&gt;\n  &lt;spa-a route-href=\"/\"&gt;Home&lt;/spa-a&gt;\n  &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n&lt;/nav&gt;</template></include-content>\n<h2 id=\"md-features\">Features</h2>\n<ul>\n<li><strong>Pure CSS View Transitions</strong> Write CSS, get beautiful animations between routes</li>\n<li><strong>Active / was-active</strong> Style current and outgoing links &amp; screens (nav chrome, card expansion)</li>\n<li><strong>Same-route reuse / refresh</strong> Keep or rebuild the view when only params change</li>\n<li><strong>Scroll reset / restore</strong> Per-axis control for push, replace, back, forward</li>\n<li><strong>Nested layouts</strong> Keep a parent route mounted under child paths</li>\n<li><strong>404 fallbacks</strong> Catch-alls that only fire when nothing else matched</li>\n<li><strong>Per-route document title</strong> <code>document.title</code> follows the active route</li>\n<li><strong>History actions</strong> Push, replace, back, forward from a link</li>\n</ul>\n<h2 id=\"md-installation\">Installation</h2>\n<p><include-content is-active template-ref=\"/views/install-section/install-section.html\"></include-content></p>\n<h2 id=\"md-usage\">Usage</h2>\n<p>Wrap screens in <code>&lt;spa-manager&gt;</code>, give each <code>&lt;spa-route&gt;</code> a <code>route-href</code>, and link with <code>&lt;spa-a&gt;</code>.</p>\n<include-content data-language=\"html\"><template>&lt;!-- Optional SPA manager for View Transitions and batched router config --&gt;\n&lt;spa-manager&gt;\n  &lt;!-- SPA routing --&gt;\n  &lt;spa-route route-href=\"/\" template-ref=\"/views/home.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/views/about.html\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n&lt;nav&gt;\n  &lt;!-- SPA links --&gt;\n  &lt;spa-a route-href=\"/\"&gt;Home&lt;/spa-a&gt;\n  &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n&lt;/nav&gt;</template></include-content>\n<h3 id=\"md-api-reference\">API Reference</h3>\n<p><include-content is-active template-ref=\"/views/api-reference/api-reference.html\"></include-content></p>\n<h3 id=\"md-examples\">Examples</h3>\n<h4 id=\"md-minimal-spa\">Minimal SPA</h4>\n<p>Three routes, three links. Active links style via <code>spa-a[is-active]</code>.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-href=\"/home\"&gt;Home&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/users\"&gt;Users&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/about\"&gt;About&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/contact\"&gt;Contact&lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/home\"&gt;\n    &lt;template&gt;\n      &lt;h3&gt;Welcome&lt;/h3&gt;\n      &lt;p&gt;Mounted because the URL matched &lt;code&gt;/home&lt;/code&gt;.&lt;/p&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/users\"&gt;\n    &lt;template&gt;\n      &lt;h3&gt;Users&lt;/h3&gt;\n      &lt;ul&gt;\n        &lt;li&gt;Adam&lt;/li&gt;\n        &lt;li&gt;Linus&lt;/li&gt;\n        &lt;li&gt;Grace&lt;/li&gt;\n      &lt;/ul&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/about\" template-ref=\"/this/view/is/remote.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/contact\" template-ref=\"#this-view-is-dom-selected\"&gt;&lt;/spa-route&gt;\n&lt;/spa-manager&gt;\n\n&lt;template id=\"this-view-is-dom-selected\"&gt;foo@bar.com&lt;/template&gt;</template></include-content>\n<include-content data-language=\"css\"><template>spa-a[is-active] {\n  font-weight: bold;\n  pointer-events: none;\n  text-decoration: none;\n}</template></include-content>\n<h4 id=\"md-nested-layout-amp-404\">Nested layout &amp; 404</h4>\n<p><code>match-nested</code> keeps a layout mounted under child paths. <code>is-fallback</code> with <code>route-regex=&quot;.*&quot;</code> is a 404 that only activates when no preceding sibling matched.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-href=\"/users\"&gt;Users list&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/users/42\"&gt;User 42&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/missing\"&gt;Missing page&lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/users\" match-nested&gt;\n    &lt;template&gt;\n      &lt;section&gt;\n        &lt;h3&gt;Users layout&lt;/h3&gt;\n        &lt;spa-manager&gt;\n          &lt;spa-route route-href=\"/users\"&gt;\n            &lt;template&gt;&lt;p&gt;List of users.&lt;/p&gt;&lt;/template&gt;\n          &lt;/spa-route&gt;\n          &lt;spa-route route-href=\"/users/:id\"&gt;\n            &lt;template&gt;&lt;p&gt;Detail for a single user.&lt;/p&gt;&lt;/template&gt;\n          &lt;/spa-route&gt;\n        &lt;/spa-manager&gt;\n      &lt;/section&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-regex=\".*?view=admin.*\" template-ref=\"/views/admin-sidebar.html\"&gt;&lt;/spa-route&gt;\n  &lt;spa-route route-regex=\".*\" is-fallback&gt;\n    &lt;template&gt;\n      &lt;section&gt;\n        &lt;h3&gt;404&lt;/h3&gt;\n        &lt;p&gt;Catch-all — only when no preceding sibling matched.&lt;/p&gt;\n      &lt;/section&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-document-title\">Document title</h4>\n<p><code>document-title</code> sets <code>document.title</code> while its route is active. It keys off\nactivation, not clicks, so cold loads and back / forward retitle too. The\noutermost <code>&lt;spa-manager&gt;</code> applies the last active route carrying one — a\nnested route beats its ancestor — and restores the page&#39;s own <code>&lt;title&gt;</code> once\nno active route has a title.</p>\n<include-content data-language=\"html\"><template>&lt;title&gt;Nucleus · docs&lt;/title&gt;\n\n&lt;spa-manager&gt;\n  &lt;spa-route route-href=\"/\" document-title=\"My company\"&gt;\n    &lt;template&gt;&lt;p&gt;The company page.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;!-- untitled: the page's own &lt;title&gt; comes back --&gt;\n  &lt;spa-route route-href=\"/docs\"&gt;\n    &lt;template&gt;&lt;p&gt;The docs.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-history-actions\">History actions</h4>\n<p><code>route-action=&quot;back&quot;</code> / <code>&quot;forward&quot;</code> walk history; <code>&quot;replace&quot;</code> swaps the current entry instead of pushing.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;nav&gt;\n    &lt;spa-a route-action=\"back\"&gt;‹ Back&lt;/spa-a&gt;\n    &lt;spa-a route-action=\"forward\"&gt;Forward ›&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/one\"&gt;Push /one&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/two\"&gt;Push /two&lt;/spa-a&gt;\n    &lt;spa-a route-href=\"/login\" route-action=\"replace\"&gt;\n      Replace with /login\n    &lt;/spa-a&gt;\n  &lt;/nav&gt;\n  &lt;spa-route route-href=\"/one\"&gt;\n    &lt;template&gt;&lt;p&gt;You're on &lt;code&gt;/one&lt;/code&gt;.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/two\"&gt;\n    &lt;template&gt;&lt;p&gt;You're on &lt;code&gt;/two&lt;/code&gt;.&lt;/p&gt;&lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route route-href=\"/login\"&gt;\n    &lt;template&gt;\n      &lt;p&gt;You're on &lt;code&gt;/login&lt;/code&gt; — this entry replaced the\n        previous one in history.&lt;/p&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-view-transitions\">View Transitions</h4>\n<p><code>&lt;spa-manager&gt;</code> wraps each navigation in <code>document.startViewTransition()</code> (when supported). Style with <code>::view-transition-*</code>; set per-link types via <code>transition-types</code> (e.g. card expansion); opt a route out with <code>no-transition</code>.</p>\n<include-content data-language=\"css\"><template>::view-transition-old(root),\n::view-transition-new(root) {\n  animation-duration: 0.25s;\n}</template></include-content>\n<h4 id=\"md-view-transitions-localized\">View Transitions - Localized</h4>\n<p>If you had a list of cards, and clicking on one expanded it to the detail view (and vice versa, contracting), you would achieve it similarly to the code example below. This technique relies on styling the <code>&lt;spa-a&gt;</code> with its <code>[is-active]</code> (incoming view) and <code>[was-active]</code> (outgoing view).</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager&gt;\n  &lt;spa-route id=\"route-list\" route-href=\"/list\"&gt;\n    &lt;template&gt;\n      &lt;spa-a route-href=\"/detail/123\" transition-types=\"card-morph\" class=\"mini-card\"&gt;\n        Go to detail\n      &lt;/spa-a&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n  &lt;spa-route id=\"route-detail\" route-href=\"/detail/:id\"&gt;\n    &lt;template&gt;\n      &lt;article id=\"detail-card\" class=\"card\"&gt;\n        &lt;!-- other content here --&gt;\n      &lt;/article&gt;\n    &lt;/template&gt;\n  &lt;/spa-route&gt;\n&lt;/spa-manager&gt;</template></include-content>\n<include-content data-language=\"css\"><template>html:active-view-transition-type(card-morph) {\n  #route-list spa-a[transition-types=\"card-morph\"][was-active], /* outgoing list card (forward) */\n  #route-list spa-a[transition-types=\"card-morph\"][is-active], /* incoming list card (back) */\n  #detail-card /* detail card (forward &amp; back) */ {\n    contain: layout;\n    height: fit-content;\n    view-transition-name: card-morph;\n  }\n}\n::view-transition-old(card-morph),\n::view-transition-new(card-morph) {\n  mix-blend-mode: normal;\n  height: 100%;\n  width: 100%;\n  will-change: opacity;\n  animation-fill-mode: both;\n}\n::view-transition-old(card-morph) {\n  animation-name: fade-out 1s ease;\n}\n::view-transition-new(card-morph) {\n  animation-name: fade-in 1s ease;\n}\n@keyframes fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n@keyframes fade-out {\n  from { opacity: 1; }\n  to { opacity: 0; }\n}</template></include-content>\n<h4 id=\"md-touch-edge-swipe\">Touch edge-swipe</h4>\n<p>On touch devices, horizontal drags from within <code>overscroll-x-threshold</code> of an edge trigger back / forward. Use <code>&quot;none&quot;</code> to block overscroll without navigating. Useful for preventing native swipes in Safari, which visually break SPAs.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager overscroll-behavior-x=\"navigate\"&gt;&lt;/spa-manager&gt;</template></include-content>\n<h4 id=\"md-scroll-reset-restore\">Scroll reset / restore</h4>\n<p>By default, <code>&lt;spa-route&gt;</code>:</p>\n<ul>\n<li>resets scroll to top-left on <code>push</code> / <code>replace</code></li>\n<li>restores the saved scroll position on <code>back</code> / <code>forward</code></li>\n</ul>\n<p>Override per axis with <code>scroll-reset-y</code> / <code>scroll-reset-x</code> — space-separated moves that should reset to <code>0</code> (omitted moves restore instead):</p>\n<include-content data-language=\"html\"><template>&lt;!-- also reset Y when the user hits back --&gt;\n&lt;spa-route\n  route-href=\"/article/:id\"\n  scroll-reset-y=\"push replace back\"\n&gt;&lt;/spa-route&gt;</template></include-content>\n<p>Animate with <code>scroll-reset-behavior=&quot;smooth&quot;</code>. Disable all scroll handling with <code>scroll-set-disabled</code>.</p>\n<h4 id=\"md-same-route-params\">Same-route params</h4>\n<p>When the matched route stays the same but params change (e.g. <code>/users/1</code> → <code>/users/2</code>):</p>\n<ul>\n<li><code>same-route=&quot;reuse&quot;</code> (default) — keep the rendered tree, update route data, and let <code>&lt;spa-manager&gt;</code> run a View Transition</li>\n<li><code>same-route=&quot;refresh&quot;</code> — tear down and re-render the view</li>\n</ul>\n<include-content data-language=\"html\"><template>&lt;spa-route route-href=\"/users/:id\" same-route=\"refresh\"&gt;\n  &lt;template&gt;&lt;!-- fresh tree per user id --&gt;&lt;/template&gt;\n&lt;/spa-route&gt;\n\n&lt;spa-route\n  route-href=\"/logs/:view\"\n  same-route=\"reuse\"\n  scroll-set-disabled\n&gt;\n  &lt;template&gt;&lt;!-- preserve content + scroll across view tabs --&gt;&lt;/template&gt;\n&lt;/spa-route&gt;</template></include-content>\n<h4 id=\"md-transition-delay\">Transition delay</h4>\n<p><code>transition-delay</code> on <code>&lt;spa-manager&gt;</code> waits N ms before starting the batched View Transition — useful when sibling routes need a beat to queue their render/unrender callbacks, or for last-second DOM work.</p>\n<include-content data-language=\"html\"><template>&lt;spa-manager transition-delay=\"50\"&gt;\n  &lt;!-- routes --&gt;\n&lt;/spa-manager&gt;</template></include-content>\n"
+  },
+  "installation": {
+    "name": "@excom/spa-route",
+    "shortName": "spa-route",
+    "version": "0.1.0",
+    "description": "<spa-route> custom element",
+    "packageType": "kit-element",
+    "cdn": "<script src=\"https://unpkg.com/@excom/kit-utils/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/neutron/dist/index.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@excom/spa-route@0.1.0/dist/index.umd.min.js\"></script>\n<link rel=\"stylesheet\" href=\"https://unpkg.com/@excom/spa-route@0.1.0/dist/index.css\">",
+    "install": {
+      "npm": "npm install @excom/spa-route"
+    },
+    "imports": {
+      "js": "import \"@excom/spa-route\";",
+      "css": "@import \"@excom/spa-route\";",
+      "html": "<!-- import path to `node_modules` will depend on your build setup -->\n<script type=\"module\" src=\"/node_modules/@excom/spa-route\"></script>\n<link rel=\"stylesheet\" href=\"/node_modules/@excom/spa-route\">"
+    },
+    "peerDependencies": []
+  },
+  "elementApis": [
+    {
+      "tag": "spa-route",
+      "summary": "Declarative SPA screen — URL match → render.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "bypass-cache",
+          "type": "boolean",
+          "description": "Skip the in-memory response cache (URL <code>template-ref</code> only).",
+          "fieldName": "bypassCache",
+          "surface": "option",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "document-title",
+          "type": "string",
+          "description": "<code>document.title</code> while this route is active. The outermost <code>&lt;spa-manager&gt;</code> applies the last active route carrying one — so a nested route beats its ancestor — and restores the page&#39;s own <code>&lt;title&gt;</code> once no active route has one. Cold loads and back / forward retitle too: it keys off activation, not clicks.",
+          "fieldName": "documentTitle",
+          "surface": "option"
+        },
+        {
+          "name": "host-ref",
+          "type": "string",
+          "description": "Where rendered children land. Unset = this element&#39;s light DOM. <code>shadow</code> attaches an open shadow root. <code>iframe</code> paints into a child <code>&lt;iframe data-render-host&gt;</code> body (you supply the iframe — useful for sandboxed / third-party document isolation). Any other value is a portal selector.",
+          "fieldName": "hostRef",
+          "surface": "option",
+          "values": "\"shadow\" | \"iframe\" | <CSS Selector>",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "is-fallback",
+          "type": "boolean",
+          "description": "Only activate when this route matches <em>and</em> no earlier sibling <code>&lt;spa-route&gt;</code> is already active. Pair with a permissive <code>route-regex</code> (e.g. <code>.*</code>) for 404 catch-alls.",
+          "fieldName": "isFallback",
+          "surface": "option"
+        },
+        {
+          "name": "match-nested",
+          "type": "boolean",
+          "description": "Also match nested paths of <code>route-href</code> (e.g. <code>/users</code> stays active on <code>/users/42</code>). Essential for layout routes and nested SPAs.",
+          "fieldName": "matchNested",
+          "surface": "option",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "no-transition",
+          "type": "boolean",
+          "description": "Opt this route out of the parent <code>&lt;spa-manager&gt;</code> View Transition. Still renders/unrenders — just without the cross-fade.",
+          "fieldName": "noTransition",
+          "surface": "option"
+        },
+        {
+          "name": "persist-content",
+          "type": "boolean",
+          "description": "Reuse the same live nodes across unrender / render (held on <code>_persistedTree</code>) so form values, scroll position, and subtree state survive toggles.",
+          "fieldName": "persistContent",
+          "surface": "option",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "pre-fetch",
+          "type": "string",
+          "description": "When to fetch the template, independent of when it renders. <code>&quot;&quot;</code> aliases <code>eager</code>.",
+          "fieldName": "preFetch",
+          "surface": "option",
+          "default": "\"lazy\"",
+          "values": "\"\" | \"eager\" | \"idle\" | \"lazy\"",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "ready-on",
+          "type": "string",
+          "description": "Event name that marks rendered children &quot;ready&quot;. Until it fires, <code>delaying-ready</code> is set so CSS can hide the host for a coordinated paint / view transition.",
+          "fieldName": "readyOn",
+          "surface": "option",
+          "values": "<Event Name>",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "route-href",
+          "type": "string",
+          "description": "URL pattern to match. Supports named placeholders (<code>/users/:id</code>) and wildcards. Set this or <code>route-regex</code>.",
+          "fieldName": "routeHref",
+          "surface": "option",
+          "values": "<path pattern>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "route-regex",
+          "type": "string",
+          "description": "RegExp source string matched against the current URL — alternative to <code>route-href</code> for catch-alls / advanced patterns.",
+          "fieldName": "routeRegex",
+          "surface": "option",
+          "values": "<RegExp source>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "same-route",
+          "type": "string",
+          "description": "When this route matches while already active, <code>reuse</code> keeps the rendered tree and updates route data; <code>refresh</code> tears down and re-renders. Use <code>refresh</code> for param-driven screens (e.g. <code>/users/:id</code> → <code>/users/2</code>); <code>reuse</code> when only route data should change (e.g. <code>/logs/:view</code>). Pair with <code>scroll-set-disabled</code> to leave the viewport untouched.",
+          "fieldName": "sameRoute",
+          "surface": "option",
+          "default": "\"reuse\"",
+          "values": "\"reuse\" | \"refresh\""
+        },
+        {
+          "name": "scroll-reset-behavior",
+          "type": "string",
+          "description": "<code>window.scrollTo</code> behavior when this route applies a scroll reset / restore.",
+          "fieldName": "scrollResetBehavior",
+          "surface": "option",
+          "default": "\"instant\"",
+          "values": "\"auto\" | \"instant\" | \"smooth\""
+        },
+        {
+          "name": "scroll-reset-x",
+          "type": "tokenlist",
+          "description": "Navigation moves that reset scroll X to <code>0</code>. Moves omitted here restore the saved X for that history entry instead.",
+          "fieldName": "scrollResetX",
+          "surface": "option",
+          "default": "\"push replace\"",
+          "values": "\"push\" | \"replace\" | \"back\" | \"forward\""
+        },
+        {
+          "name": "scroll-reset-y",
+          "type": "tokenlist",
+          "description": "Navigation moves that reset scroll Y to <code>0</code>. Moves omitted here restore the saved Y for that history entry instead.",
+          "fieldName": "scrollResetY",
+          "surface": "option",
+          "default": "\"push replace\"",
+          "values": "\"push\" | \"replace\" | \"back\" | \"forward\""
+        },
+        {
+          "name": "scroll-set-disabled",
+          "type": "boolean",
+          "description": "Disable all scroll reset / restore for this route.",
+          "fieldName": "scrollSetDisabled",
+          "surface": "option"
+        },
+        {
+          "name": "template-ref",
+          "type": "string",
+          "description": "Source <code>&lt;template&gt;</code> — in-document selector or remote URL. Changing mid-flight aborts and reloads. Can use <code>:scope</code> to relatively select elements: e.g. <code>main:has(:scope) &gt; template</code>",
+          "fieldName": "templateRef",
+          "surface": "option",
+          "default": "\":scope > template\"",
+          "values": "<CSS Selector> | <URL>",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "is-active",
+          "type": "boolean",
+          "description": "Master switch. Set to load (if needed) and render; unset to unrender. Drive from visibility, route match, hover, etc.",
+          "fieldName": "isActive",
+          "surface": "hybrid",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "delaying-ready",
+          "type": "boolean",
+          "description": "Between <code>render</code> and the matching <code>ready-on</code> event. Hook with CSS for coordinated paints / view transitions.",
+          "fieldName": "delayingReady",
+          "surface": "state",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "did-load",
+          "type": "boolean",
+          "description": "Template resolved at least once. Stays set across <code>is-active</code> toggles so consumers know later paints are warm (URL refs reuse the shared fetch cache in kit-utils). Cleared when <code>template-ref</code> changes or <code>--reload</code> forces a fresh resolve.",
+          "fieldName": "didLoad",
+          "surface": "state",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "is-error",
+          "type": "boolean",
+          "description": "Latest template fetch rejected (excluding abort). Fires with the <code>error</code> event.",
+          "fieldName": "isError",
+          "surface": "state",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "is-loading",
+          "type": "boolean",
+          "description": "Template fetch in flight.",
+          "fieldName": "isLoading",
+          "surface": "state",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "was-active",
+          "type": "boolean",
+          "description": "Set briefly while navigating away. Style outgoing screens / card-expansion exits with <code>spa-route[was-active]</code>.",
+          "fieldName": "wasActive",
+          "surface": "state"
+        }
+      ],
+      "events": [
+        {
+          "name": "spa-route-aborted",
+          "description": "Dispatched when an in-flight load / ready wait is canceled because <code>is-active</code> was unset (via <code>startTeardown</code>).",
+          "type": "RenderableAbortedEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-aborted\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "spa-route-did-render",
+          "description": "Dispatched after the template content has actually been placed into the host.",
+          "type": "RenderableDidRenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-did-render\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "spa-route-did-unrender",
+          "description": "Dispatched after rendered children have been removed from the host.",
+          "type": "RenderableDidUnrenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-did-unrender\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "spa-route-error",
+          "description": "Dispatched when the template promise rejects with anything other than an <code>AbortError</code>.",
+          "type": "RenderableErrorEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-error\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "spa-route-provision",
+          "description": "Cancelable. Same route stayed active but params changed (<code>same-route=&quot;reuse&quot;</code>). <code>event.detail</code> is a thunk that updates route data and resolves the ready promise. <code>&lt;spa-manager&gt;</code> batches this into the View Transition like render/unrender.",
+          "type": "SpaRouteProvisionEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-route-provision\"; detail: () => void; bubbles: true; cancelable: true; composed: true }",
+          "defaultAction": "Invokes <code>event.detail()</code> to apply the new provision."
+        },
+        {
+          "name": "spa-route-render",
+          "description": "Cancelable. Dispatched when the element becomes active and is about to place template content into the host. <code>event.detail</code> is a thunk that performs the load (if not already loaded) and renders the children, returning a Promise that resolves once the corresponding <code>ready-on</code> event fires (or immediately if <code>ready-on</code> is unset). The promise rejects if the element is torn down mid-flight (<code>startTeardown</code> while loading / <code>delaying-ready</code>). Call <code>preventDefault()</code> to defer rendering and invoke <code>event.detail()</code> later.",
+          "type": "RenderableRenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-render\"; detail: () => Promise<void>; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element",
+          "defaultAction": "Invokes <code>event.detail()</code> to load (if needed) and render the template into the host."
+        },
+        {
+          "name": "spa-route-unrender",
+          "description": "Cancelable. Dispatched when the element becomes inactive and content is already painted. <code>event.detail</code> is a thunk that removes the rendered children. Call <code>preventDefault()</code> to defer the removal. Not fired when teardown cancels an in-flight load — that path emits <code>aborted</code> instead.",
+          "type": "RenderableUnrenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-unrender\"; detail: () => void; bubbles: true; cancelable: true; composed: true }",
+          "inheritedFrom": "@excom/renderable-element",
+          "defaultAction": "Invokes <code>event.detail()</code> to remove rendered children from the host."
+        }
+      ],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [
+        {
+          "name": ":--spa-route",
+          "selectors": [
+            "spa-route",
+            ".tag-spa-route"
+          ],
+          "kind": "element",
+          "description": ""
+        }
+      ],
+      "listens": [],
+      "commands": [
+        {
+          "name": "--reload",
+          "description": "Aborts any in-flight fetch and re-resolves the template, bypassing the cache for URL refs (useful after remote content changes).",
+          "inheritedFrom": "@excom/renderable-element"
+        }
+      ],
+      "defaultActions": [
+        {
+          "name": "spa-route-provision",
+          "description": "Invokes <code>event.detail()</code> to apply the new provision."
+        },
+        {
+          "name": "spa-route-render",
+          "description": "Invokes <code>event.detail()</code> to load (if needed) and render the template into the host.",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "spa-route-unrender",
+          "description": "Invokes <code>event.detail()</code> to remove rendered children from the host.",
+          "inheritedFrom": "@excom/renderable-element"
+        }
+      ],
+      "expectedChildren": [
+        {
+          "name": "child:iframe[data-render-host]",
+          "relationship": "child",
+          "selector": "iframe[data-render-host]",
+          "required": false,
+          "description": "Required when <code>host-ref=&quot;iframe&quot;</code>. Content paints into <code>iframe.contentDocument.body</code>. Provide your own iframe (e.g. with <code>srcdoc</code>); the element will not create one.",
+          "inheritedFrom": "@excom/renderable-element"
+        },
+        {
+          "name": "child:template",
+          "relationship": "child",
+          "selector": "template",
+          "required": true,
+          "description": "Screen content. Cloned (or reused with <code>persist-content</code>) on activation."
+        },
+        {
+          "name": "child:template",
+          "relationship": "child",
+          "selector": "template",
+          "required": false,
+          "description": "Optional immediate <code>&lt;template&gt;</code> child used when <code>template-ref</code> is the default <code>&quot;:scope &gt; template&quot;</code>. Not required when <code>template-ref</code> points at a selector or URL elsewhere.",
+          "inheritedFrom": "@excom/renderable-element"
+        }
+      ],
+      "provisions": [
+        {
+          "name": "provision",
+          "type": "SpaRouteProvision",
+          "typeExpanded": "{ routeHref: string; matchNested: boolean; scrollResetY: string[]; scrollResetX: string[]; scrollResetBehavior: ScrollBehavior; noTransition: boolean; active: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; }; event: { hasUAVisualTransition: boolean; }; match: Array<any> | null; move: null | \"push\" | \"replace\" | \"back\" | \"forward\"; next: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; } | null; previous: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; } | null; params: Record<string, string> | null; }",
+          "description": "Active route payload for this activation (<code>null</code> when inactive). Not reflected as an attribute.",
+          "fieldName": "provision"
+        }
+      ]
+    },
+    {
+      "tag": "spa-a",
+      "summary": "Declarative SPA link with active-state styling.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "delay-ms",
+          "type": "number",
+          "description": "Delay handling by this many milliseconds.",
+          "fieldName": "delayMs",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "document-title",
+          "type": "string",
+          "description": "Sets <code>document.title</code> after navigation.",
+          "fieldName": "documentTitle",
+          "surface": "option"
+        },
+        {
+          "name": "host-ref",
+          "type": "string",
+          "description": "Listen on another element / <code>window</code> / <code>document</code> — e.g. Escape to dismiss a dialog from a global <code>keydown</code>. Defaults to <code>:scope</code>. Used with <code>listen-for</code>. Not compatible with <code>listen-for-lifecycle</code>. The selector MUST resolve when <code>host-ref</code> is set — it will not wait for a match to appear.",
+          "fieldName": "hostRef",
+          "surface": "option",
+          "values": "<CSS Selector> | \"window\" | \"document\" | \"html\" | \"body\" | \"head\"",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "is-debounced",
+          "type": "boolean",
+          "description": "With <code>delay-ms</code>, coalesce bursts into one trailing call (debounce).",
+          "fieldName": "isDebounced",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "keycode-filter",
+          "type": "tokenlist",
+          "description": "Space-separated key filters (OR). Join modifiers with <code>+</code> (AND, any order): <code>shift+k tab</code> → Shift+K or Tab. Modifiers: <code>shift</code>, <code>alt</code>, <code>ctrl</code>/<code>control</code>, <code>meta</code>. Case-insensitive.",
+          "fieldName": "keycodeFilter",
+          "surface": "option",
+          "values": "<key | mod+key>…",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "listen-for",
+          "type": "tokenlist",
+          "description": "Space-separated event names to listen for. Defaults to <code>click</code> when unset (and no lifecycle list is set).",
+          "fieldName": "listenFor",
+          "surface": "option",
+          "values": "<EventName>…",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "listen-for-lifecycle",
+          "type": "tokenlist",
+          "description": "Space-separated element lifecycles to handle.",
+          "fieldName": "listenForLifecycle",
+          "surface": "option",
+          "values": "\"connected\" | \"disconnected\" | \"adopted\"",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "listen-once",
+          "type": "boolean",
+          "description": "Handle each distinct event name / lifecycle at most once.",
+          "fieldName": "listenOnce",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "match-hash",
+          "type": "boolean",
+          "description": "Require the URL hash to match when setting <code>is-active</code>.",
+          "fieldName": "matchHash",
+          "surface": "option"
+        },
+        {
+          "name": "match-nested",
+          "type": "boolean",
+          "description": "Also match nested paths of <code>route-href</code> (e.g. <code>/users</code> stays active on <code>/users/42</code>). Essential for layout routes and nested SPAs.",
+          "fieldName": "matchNested",
+          "surface": "option",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "pathname-filter",
+          "type": "tokenlist",
+          "description": "Only handle when <code>location.pathname</code> is one of these values — route-aware behaviors without a separate router element.",
+          "fieldName": "pathnameFilter",
+          "surface": "option",
+          "values": "<pathname>…",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "prevent-default",
+          "type": "boolean",
+          "description": "Call <code>preventDefault()</code> on matched events (ignored for lifecycles).",
+          "fieldName": "preventDefault",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "route-action",
+          "type": "string",
+          "description": "Navigation mode when activated (default click).",
+          "fieldName": "routeAction",
+          "surface": "option",
+          "default": "\"push\"",
+          "values": "\"push\" | \"replace\" | \"back\" | \"forward\""
+        },
+        {
+          "name": "route-href",
+          "type": "string",
+          "description": "URL pattern to match. Supports named placeholders (<code>/users/:id</code>) and wildcards. Set this or <code>route-regex</code>.",
+          "fieldName": "routeHref",
+          "surface": "option",
+          "values": "<path pattern>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "route-regex",
+          "type": "string",
+          "description": "RegExp source string matched against the current URL — alternative to <code>route-href</code> for catch-alls / advanced patterns.",
+          "fieldName": "routeRegex",
+          "surface": "option",
+          "values": "<RegExp source>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "selector-filter",
+          "type": "string",
+          "description": "Only handle events whose <code>event.target</code> matches this CSS selector. Does not support <code>:scope</code> in the selector.",
+          "fieldName": "selectorFilter",
+          "surface": "option",
+          "values": "<CSS Selector>",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "stop-immediate-propagation",
+          "type": "boolean",
+          "description": "Call <code>stopImmediatePropagation()</code> on matched events (ignored for lifecycles).",
+          "fieldName": "stopImmediatePropagation",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "stop-propagation",
+          "type": "boolean",
+          "description": "Call <code>stopPropagation()</code> on matched events (ignored for lifecycles).",
+          "fieldName": "stopPropagation",
+          "surface": "option",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "transition-types",
+          "type": "tokenlist",
+          "description": "Space-separated View Transition types for this navigation (CSS View Transitions API). Useful for shared-element morphs like card expansion.",
+          "fieldName": "transitionTypes",
+          "surface": "option",
+          "values": "<token>…"
+        },
+        {
+          "name": "vibrate-ms",
+          "type": "number",
+          "description": "Vibrate on handle (<code>navigator.vibrate</code>). Empty / <code>0</code> uses a 20ms pulse.",
+          "fieldName": "vibrateMs",
+          "surface": "option",
+          "default": "\"20 (when attribute is present with no value)\"",
+          "inheritedFrom": "@excom/listenable-element"
+        },
+        {
+          "name": "is-active",
+          "type": "boolean",
+          "description": "Current URL matches <code>route-href</code>. Style with <code>spa-a[is-active]</code>.",
+          "fieldName": "isActive",
+          "surface": "state"
+        },
+        {
+          "name": "was-active",
+          "type": "boolean",
+          "description": "Previous URL matched <code>route-href</code>. Style outgoing links / card-expansion exits with <code>spa-a[was-active]</code>.",
+          "fieldName": "wasActive",
+          "surface": "state"
+        }
+      ],
+      "events": [],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [
+        {
+          "name": ":--spa-a",
+          "selectors": [
+            "spa-a",
+            ".tag-spa-a"
+          ],
+          "kind": "element",
+          "description": ""
+        }
+      ],
+      "listens": [],
+      "commands": [],
+      "defaultActions": [],
+      "expectedChildren": [],
+      "provisions": []
+    },
+    {
+      "tag": "spa-manager",
+      "summary": "SPA shell — view transitions, swipe nav, route orchestration.",
+      "kind": "class",
+      "attributes": [
+        {
+          "name": "match-nested",
+          "type": "boolean",
+          "description": "Also match nested paths of <code>route-href</code> (e.g. <code>/users</code> stays active on <code>/users/42</code>). Essential for layout routes and nested SPAs.",
+          "fieldName": "matchNested",
+          "surface": "option",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "max-states",
+          "type": "number",
+          "description": "Cap retained router history states (scroll positions, transition types, etc.).",
+          "fieldName": "maxStates",
+          "surface": "option"
+        },
+        {
+          "name": "no-transition",
+          "type": "boolean",
+          "description": "Disable View Transitions for every child route.",
+          "fieldName": "noTransition",
+          "surface": "option"
+        },
+        {
+          "name": "overscroll-behavior-x",
+          "type": "string",
+          "description": "Touch edge-swipe on touch devices. <code>none</code> blocks horizontal overscroll; <code>navigate</code> also calls back / forward past the threshold.",
+          "fieldName": "overscrollBehaviorX",
+          "surface": "option",
+          "values": "\"none\" | \"navigate\""
+        },
+        {
+          "name": "overscroll-x-threshold",
+          "type": "number",
+          "description": "Edge inset (px) where a touch start counts as an edge swipe.",
+          "fieldName": "overscrollXThreshold",
+          "surface": "option",
+          "default": "40"
+        },
+        {
+          "name": "render-timeout",
+          "type": "number",
+          "description": "Max wait (ms) for child render promises before forcing the transition to resolve. Raise for slow remote templates.",
+          "fieldName": "renderTimeout",
+          "surface": "option",
+          "default": "2000"
+        },
+        {
+          "name": "route-href",
+          "type": "string",
+          "description": "URL pattern to match. Supports named placeholders (<code>/users/:id</code>) and wildcards. Set this or <code>route-regex</code>.",
+          "fieldName": "routeHref",
+          "surface": "option",
+          "values": "<path pattern>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "route-regex",
+          "type": "string",
+          "description": "RegExp source string matched against the current URL — alternative to <code>route-href</code> for catch-alls / advanced patterns.",
+          "fieldName": "routeRegex",
+          "surface": "option",
+          "values": "<RegExp source>",
+          "inheritedFrom": "@excom/routable-element"
+        },
+        {
+          "name": "transition-delay",
+          "type": "number",
+          "description": "Delay (ms) before starting the batched View Transition. Gives late sibling render/unrender events time to queue, or room for last-second DOM work. Unset / <code>null</code> starts synchronously.",
+          "fieldName": "transitionDelay",
+          "surface": "option"
+        },
+        {
+          "name": "transition-first-render",
+          "type": "boolean",
+          "description": "Animate the very first activation (cold load) with a View Transition. Off by default so the initial paint is instant.",
+          "fieldName": "transitionFirstRender",
+          "surface": "option"
+        },
+        {
+          "name": "active-url",
+          "type": "string",
+          "description": "URL of the currently active route.",
+          "fieldName": "activeUrl",
+          "surface": "state"
+        },
+        {
+          "name": "has-rendered",
+          "type": "boolean",
+          "description": "At least one render has committed. Gates <code>transition-first-render</code>; useful for hiding loading shells.",
+          "fieldName": "hasRendered",
+          "surface": "state"
+        },
+        {
+          "name": "is-transitioning",
+          "type": "boolean",
+          "description": "A View Transition is in flight.",
+          "fieldName": "isTransitioning",
+          "surface": "state"
+        },
+        {
+          "name": "last-move",
+          "type": "string",
+          "description": "Last navigation direction (<code>push</code> / <code>replace</code> / <code>back</code> / <code>forward</code>). Pick CSS transition styles from this.",
+          "fieldName": "lastMove",
+          "surface": "state",
+          "values": "\"push\" | \"replace\" | \"back\" | \"forward\""
+        }
+      ],
+      "events": [
+        {
+          "name": "spa-manager-back",
+          "description": "On <code>back</code> navigations.",
+          "type": "SpaManagerBackEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-back\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-error",
+          "description": "Re-emitted when a child fires <code>spa-route-error</code>. <code>event.detail</code> mirrors the source error.",
+          "type": "SpaManagerErrorEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-error\"; detail: unknown; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-forward",
+          "description": "On <code>forward</code> navigations.",
+          "type": "SpaManagerForwardEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-forward\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-push",
+          "description": "On <code>pushState</code> navigations.",
+          "type": "SpaManagerPushEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-push\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-rendered",
+          "description": "After the transition (or synchronous fallback) finishes and routes are settled.",
+          "type": "SpaManagerRenderedEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-rendered\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-replace",
+          "description": "On <code>replaceState</code> navigations.",
+          "type": "SpaManagerReplaceEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-replace\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-transition",
+          "description": "After <code>document.startViewTransition()</code> is called.",
+          "type": "SpaManagerTransitionEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-transition\"; detail: { transition: ViewTransition; }; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-manager-will-transition",
+          "description": "Cancelable. Once per navigation, just before the View Transition starts. <code>preventDefault()</code> skips the transition for this navigation.",
+          "type": "SpaManagerWillTransitionEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-manager-will-transition\"; detail: void; bubbles: true; cancelable: true; composed: true }",
+          "defaultAction": "Starts the batched View Transition (or synchronous update when transitions are unavailable / opted out)."
+        }
+      ],
+      "slots": [],
+      "cssProperties": [],
+      "cssClasses": [],
+      "cssAliases": [],
+      "listens": [
+        {
+          "name": "spa-route-error",
+          "description": "Falls back to a non-transitioned update and re-emits as <code>spa-manager-error</code>.",
+          "type": "RenderableErrorEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-error\"; detail: void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-route-provision",
+          "description": "Queues a same-route param update (reuse) into the next batched transition.",
+          "type": "SpaRouteProvisionEvent",
+          "typeExpanded": "CustomEvent & { type: \"spa-route-provision\"; detail: () => void; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-route-render",
+          "description": "Queues the child&#39;s render callback for the next batched transition.",
+          "type": "RenderableRenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-render\"; detail: () => Promise<void>; bubbles: true; cancelable: true; composed: true }"
+        },
+        {
+          "name": "spa-route-unrender",
+          "description": "Queues the child&#39;s unrender callback (runs before renders so the outgoing route leaves first).",
+          "type": "RenderableUnrenderEvent",
+          "typeExpanded": "CustomEvent & { type: \"{tag}-unrender\"; detail: () => void; bubbles: true; cancelable: true; composed: true }"
+        }
+      ],
+      "commands": [],
+      "defaultActions": [
+        {
+          "name": "spa-manager-will-transition",
+          "description": "Starts the batched View Transition (or synchronous update when transitions are unavailable / opted out)."
+        }
+      ],
+      "expectedChildren": [
+        {
+          "name": "descendant:spa-route",
+          "relationship": "descendant",
+          "selector": "spa-route",
+          "required": true,
+          "description": "Routes this manager coordinates. Their render lifecycle is intercepted and batched into one view transition per navigation."
+        }
+      ],
+      "provisions": [
+        {
+          "name": "provision",
+          "type": "KitRouteData",
+          "typeExpanded": "{ previous: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; } | null; active: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; }; next: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; } | null; all: { id: string; url: string; title?: string; isInit?: boolean; scrollX?: number; scrollY?: number; ttypes?: string[]; }[]; params: Record<string, string> | null; match: Array<any> | null; move: null | \"push\" | \"replace\" | \"back\" | \"forward\"; event?: { hasUAVisualTransition: boolean; }; route: KitRoute; }",
+          "description": "Current route payload. Not reflected as an attribute.",
+          "fieldName": "provision"
+        }
+      ]
+    }
+  ],
+  "exportedFiles": {}
+}