zero-query 0.8.6 → 0.8.8

package/README.md

@@ -65,7 +65,7 @@ The dev server includes a **full-screen error overlay** that surfaces errors dir
 
 #### Floating Toolbar & Inspector
 
-A compact toolbar appears in the bottom-right corner showing live request/render counters and a DOM button. Click any counter to open a **dark-themed DevTools inspector** as a popup — or visit `http://localhost:<port>/_devtools` for a standalone split-view panel with four tabs: **Elements** (live DOM tree with component badges, source viewer, expand/collapse), **Network** (fetch log with JSON viewer), **Components** (live state cards), and **Performance** (render timeline with timing metrics).
+A compact expandable toolbar appears in the bottom-right corner. In its **collapsed** state it shows live render and request counters. Click the chevron to **expand** and reveal the route indicator (color-coded by the last navigation event — navigate, pop, replace, hashchange, substate), registered component count, and DOM element count. Click any stat to open a **dark-themed DevTools inspector** as a popup — or visit `http://localhost:<port>/_devtools` for a standalone split-view panel with five tabs: **Router** (live route state, guards, history timeline), **Components** (live state cards), **Performance** (render timeline with timing metrics), **Network** (fetch log with JSON viewer), and **Elements** (live DOM tree with component badges, source viewer, expand/collapse).
 
 ### Alternative: Manual Setup (No npm)
 
@@ -189,13 +189,12 @@ Output goes to `dist/` next to your `index.html`:
 dist/
   server/               ← deploy to your web server (<base href="/"> for SPA routes)
     index.html
-    z-app.<hash>.js
     z-app.<hash>.min.js
     global.<hash>.min.css
     assets/
   local/                ← open from disk (file://) — no server needed
     index.html
-    z-app.<hash>.js
+    z-app.<hash>.min.js
     ...
 ```
 
@@ -217,7 +216,7 @@ dist/
    4. **Convention fallbacks** — `app/app.js`, `scripts/app.js`, `src/app.js`, `js/app.js`, `app.js`, `main.js`.
 2. Resolves all `import` statements and topologically sorts dependencies
 3. Strips `import`/`export` syntax, wraps in an IIFE
-4. Embeds zQuery library and inlines `templateUrl` / `styleUrl` / `pages` files
+4. Embeds zQuery library and inlines `templateUrl` / `styleUrl` files
 5. Rewrites HTML, copies assets, produces hashed filenames
 
 ---
@@ -277,7 +276,7 @@ location / {
 | CLI Command | Description |
 | --- | --- |
 | `zquery create [dir]` | Scaffold a new project (index.html, components, store, styles) |
-| `zquery dev [root]` | Dev server with live-reload, CSS hot-swap, error overlay, floating toolbar &amp; inspector panel (port 3100). Visit `/_devtools` for the standalone panel. `--index` for custom HTML, `--bundle` for bundled mode, `--no-intercept` to skip CDN intercept. |
+| `zquery dev [root]` | Dev server with live-reload, CSS hot-swap, error overlay, expandable floating toolbar &amp; five-tab inspector panel (port 3100). Visit `/_devtools` for the standalone panel. `--index` for custom HTML, `--bundle` for bundled mode, `--no-intercept` to skip CDN intercept. |
 | `zquery bundle [dir\|file]` | Bundle app into a single IIFE file. Accepts dir or direct entry file. |
 | `zquery build` | Build the zQuery library (`dist/zquery.min.js`) |
 | `zquery --help` | Show CLI usage |

package/cli/commands/bundle.js

@@ -353,7 +353,7 @@ function _collapseTemplateCSS(tpl) {
 
 /**
  * Scan bundled source files for external resource references
- * (pages config, templateUrl, styleUrl) and return a map of
+ * (templateUrl, styleUrl) and return a map of
  * { relativePath: fileContent } for inlining.
  */
 function collectInlineResources(files, projectRoot) {
@@ -363,33 +363,6 @@ function collectInlineResources(files, projectRoot) {
     const code    = fs.readFileSync(file, 'utf-8');
     const fileDir = path.dirname(file);
 
-    // pages: config
-    const pagesMatch = code.match(/pages\s*:\s*\{[^}]*dir\s*:\s*['"]([^'"]+)['"]/s);
-    if (pagesMatch) {
-      const pagesDir = pagesMatch[1];
-      const ext = (code.match(/pages\s*:\s*\{[^}]*ext\s*:\s*['"]([^'"]+)['"]/s) || [])[1] || '.html';
-      const itemsMatch = code.match(/items\s*:\s*\[([\s\S]*?)\]/);
-      if (itemsMatch) {
-        const itemsBlock = itemsMatch[1];
-        const ids = [];
-        let m;
-        const strRe = /['"]([^'"]+)['"]/g;
-        while ((m = strRe.exec(itemsBlock)) !== null) {
-          const before = itemsBlock.substring(Math.max(0, m.index - 20), m.index);
-          if (/label\s*:\s*$/.test(before)) continue;
-          ids.push(m[1]);
-        }
-        const absPagesDir = path.join(fileDir, pagesDir);
-        for (const id of ids) {
-          const pagePath = path.join(absPagesDir, id + ext);
-          if (fs.existsSync(pagePath)) {
-            const relKey = path.relative(projectRoot, pagePath).replace(/\\/g, '/');
-            inlineMap[relKey] = fs.readFileSync(pagePath, 'utf-8');
-          }
-        }
-      }
-    }
-
     // styleUrl:
     const styleUrlRe = /styleUrl\s*:\s*['"]([^'"]+)['"]/g;
     const styleMatch = styleUrlRe.exec(code);
@@ -409,6 +382,25 @@ function collectInlineResources(files, projectRoot) {
         const relKey = path.relative(projectRoot, tmplPath).replace(/\\/g, '/');
         inlineMap[relKey] = fs.readFileSync(tmplPath, 'utf-8');
       }
+    } else if (/templateUrl\s*:/.test(code)) {
+      // Dynamic templateUrl (e.g. Object.fromEntries, computed map) —
+      // inline all .html files in the component's directory tree so
+      // the runtime __zqInline lookup can resolve them by suffix.
+      (function scanHtml(dir) {
+        try {
+          for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+            const full = path.join(dir, entry.name);
+            if (entry.isFile() && entry.name.endsWith('.html')) {
+              const relKey = path.relative(projectRoot, full).replace(/\\/g, '/');
+              if (!inlineMap[relKey]) {
+                inlineMap[relKey] = fs.readFileSync(full, 'utf-8');
+              }
+            } else if (entry.isDirectory()) {
+              scanHtml(full);
+            }
+          }
+        } catch { /* permission error — skip */ }
+      })(fileDir);
     }
   }
 

package/cli/commands/dev/devtools/panel.html

@@ -9,7 +9,7 @@
       <button class="viewport-btn" data-width="768" title="Tablet (768px)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="2" width="16" height="20" rx="2" ry="2"/><line x1="12" y1="18" x2="12" y2="18"/></svg></button>
       <button class="viewport-btn active" data-width="0" title="Desktop (fill)"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></button>
       <span class="divider-sep"></span>
-      <button id="btn-route" title="Current route"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="2" x2="17" y2="22"/></svg></button>
+      <button id="btn-route" title="Current route"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="17" y1="2" x2="7" y2="22"/></svg></button>
       <span class="route-label" id="route-label">/</span>
     </div>
   </div>

package/cli/commands/dev/overlay.js

@@ -558,6 +558,7 @@ const OVERLAY_SCRIPT = `<script>
     if (__zqChannel) {
       try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
     }
+    updateDevBar();
   };
 
   var _origReplaceState = history.replaceState;
@@ -576,6 +577,7 @@ const OVERLAY_SCRIPT = `<script>
     if (__zqChannel) {
       try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
     }
+    updateDevBar();
   };
 
   window.addEventListener('popstate', function(e) {
@@ -593,6 +595,7 @@ const OVERLAY_SCRIPT = `<script>
     if (__zqChannel) {
       try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
     }
+    updateDevBar();
   });
 
   window.addEventListener('hashchange', function() {
@@ -606,36 +609,62 @@ const OVERLAY_SCRIPT = `<script>
     if (__zqChannel) {
       try { __zqChannel.postMessage({ type: 'router', data: evt }); } catch(e) {}
     }
+    updateDevBar();
   });
 
   // =====================================================================
-  // Dev Toolbar — floating bar with DOM viewer button & request counter
+  // Dev Toolbar — expandable floating bar with stats
   // =====================================================================
   var devBar;
+  var __zqBarExpanded = false;
+  var __zqRouteColors = {
+    navigate:     { bg: 'rgba(63,185,80,0.12)',  fg: '#3fb950' },
+    replace:      { bg: 'rgba(210,153,34,0.12)', fg: '#d29922' },
+    pop:          { bg: 'rgba(248,81,73,0.12)',  fg: '#f85149' },
+    'pop-substate':{ bg: 'rgba(248,81,73,0.12)', fg: '#f85149' },
+    substate:     { bg: 'rgba(168,130,255,0.12)', fg: '#a882ff' },
+    hashchange:   { bg: 'rgba(88,166,255,0.12)', fg: '#58a6ff' }
+  };
+  var __zqRouteDefault = { bg: 'rgba(227,155,55,0.12)', fg: '#e39b37' };
+  var __zqRouteFadeTimer = null;
 
   function createDevBar() {
     devBar = document.createElement('div');
     devBar.id = '__zq_devbar';
     devBar.setAttribute('style',
       'position:fixed;bottom:12px;right:12px;z-index:2147483646;' +
-      'display:flex;align-items:center;gap:6px;' +
+      'display:flex;align-items:center;gap:4px;' +
       'background:rgba(22,27,34,0.92);border:1px solid rgba(48,54,61,0.8);' +
       'border-radius:8px;padding:4px 6px;backdrop-filter:blur(8px);' +
       'font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;' +
       'font-size:11px;color:#8b949e;user-select:none;cursor:default;' +
-      'box-shadow:0 4px 12px rgba(0,0,0,0.4);'
+      'box-shadow:0 4px 12px rgba(0,0,0,0.4);transition:all .25s cubic-bezier(.22,1,.36,1);'
     );
+
+    var statStyle = 'padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;white-space:nowrap;';
+    var expandedStyle = statStyle + 'display:none;transform:scale(0);opacity:0;transform-origin:left center;will-change:transform,opacity;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease;';
+
     devBar.innerHTML =
       '<span style="color:#58a6ff;font-weight:700;padding:0 4px;font-size:10px;letter-spacing:.5px">zQ</span>' +
-      '<span id="__zq_bar_reqs" title="Network requests" style="padding:2px 6px;border-radius:4px;' +
-        'background:rgba(88,166,255,0.1);color:#58a6ff;cursor:pointer;font-size:10px;font-weight:600;">0 req</span>' +
-      '<span id="__zq_bar_morphs" title="Render operations" style="padding:2px 6px;border-radius:4px;' +
-        'background:rgba(188,140,255,0.1);color:#bc8cff;cursor:pointer;font-size:10px;font-weight:600;">0 render</span>' +
-      '<button id="__zq_bar_dom" title="Open DevTools (/_devtools)" style="' +
-        'padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;' +
-        'background:rgba(63,185,80,0.15);color:#3fb950;border:1px solid rgba(63,185,80,0.3);' +
-        'cursor:pointer;font-family:inherit;transition:all .15s;' +
-      '">DOM</button>' +
+      // Expanded-only stats
+      '<span id="__zq_bar_route" class="__zq_ex" title="Current route" style="' + expandedStyle +
+        'background:rgba(227,155,55,0.12);color:#e39b37;outline-offset:1px;transition:transform .25s cubic-bezier(.22,1,.36,1),opacity .2s ease,background .3s ease,color .3s ease,outline-color .6s ease;">/</span>' +
+      '<span id="__zq_bar_comps" class="__zq_ex" title="Registered components" style="' + expandedStyle +
+        'background:rgba(168,130,255,0.1);color:#a882ff;">0 comps</span>' +
+      // Always-visible stats
+      '<span id="__zq_bar_morphs" title="Render operations" style="' + statStyle +
+        'background:rgba(188,140,255,0.1);color:#bc8cff;">0 render</span>' +
+      '<span id="__zq_bar_reqs" title="Network requests" style="' + statStyle +
+        'background:rgba(88,166,255,0.1);color:#58a6ff;">0 req</span>' +
+      // Expanded-only stats
+      '<span id="__zq_bar_els" class="__zq_ex" title="DOM elements" style="' + expandedStyle +
+        'background:rgba(63,185,80,0.1);color:#3fb950;">0 els</span>' +
+      // Toggle expand/collapse
+      '<button id="__zq_bar_toggle" title="Expand toolbar" style="' +
+        'padding:2px 6px;border-radius:4px;font-size:10px;font-weight:600;' +
+        'background:rgba(88,166,255,0.08);color:#58a6ff;border:1px solid rgba(88,166,255,0.2);' +
+        'cursor:pointer;font-family:inherit;transition:all .15s;line-height:1;' +
+      '"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg></button>' +
       '<button id="__zq_bar_close" title="Close toolbar" style="' +
         'padding:0 4px;color:#484f58;cursor:pointer;font-size:14px;border:none;' +
         'background:none;font-family:inherit;line-height:1;' +
@@ -657,28 +686,9 @@ const OVERLAY_SCRIPT = `<script>
       }
     }
 
-    // Req counter → Network tab
-    document.getElementById('__zq_bar_reqs').addEventListener('click', function() {
-      if (isInSplitFrame()) {
-        switchDevTab('network');
-      } else {
-        openDevToolsPopup('network');
-      }
-    });
-
-    // Render counter → Performance tab
-    document.getElementById('__zq_bar_morphs').addEventListener('click', function() {
-      if (isInSplitFrame()) {
-        switchDevTab('perf');
-      } else {
-        openDevToolsPopup('perf');
-      }
-    });
-
-    // DOM button → Elements tab (in split) or open popup
+    // Open devtools popup
     var __zqPopup = null;
     function openDevToolsPopup(tab) {
-      // If popup is already open, just switch the tab via BroadcastChannel
       if (__zqPopup && !__zqPopup.closed) {
         switchDevTab(tab);
         __zqPopup.focus();
@@ -693,26 +703,60 @@ const OVERLAY_SCRIPT = `<script>
         ',resizable=yes,scrollbars=yes');
     }
 
-    document.getElementById('__zq_bar_dom').addEventListener('click', function() {
-      if (isInSplitFrame()) {
-        switchDevTab('dom');
+    function openTab(tab) {
+      if (isInSplitFrame()) { switchDevTab(tab); } else { openDevToolsPopup(tab); }
+    }
+
+    // Stat click handlers → open relevant devtools tab
+    document.getElementById('__zq_bar_route').addEventListener('click', function() { openTab('router'); });
+    document.getElementById('__zq_bar_comps').addEventListener('click', function() { openTab('components'); });
+    document.getElementById('__zq_bar_morphs').addEventListener('click', function() { openTab('perf'); });
+    document.getElementById('__zq_bar_reqs').addEventListener('click', function() { openTab('network'); });
+    document.getElementById('__zq_bar_els').addEventListener('click', function() { openTab('dom'); });
+
+    // Expand / collapse toggle
+    document.getElementById('__zq_bar_toggle').addEventListener('click', function() {
+      __zqBarExpanded = !__zqBarExpanded;
+      var items = devBar.querySelectorAll('.__zq_ex');
+      var btn = this;
+      if (__zqBarExpanded) {
+        btn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 6 15 12 9 18"/></svg>';
+        btn.title = 'Collapse toolbar';
+        for (var i = 0; i < items.length; i++) {
+          items[i].style.display = 'inline';
+          items[i].offsetWidth; // reflow
+          items[i].style.transform = 'scale(1)';
+          items[i].style.opacity = '1';
+        }
+        updateDevBar();
       } else {
-        openDevToolsPopup('dom');
+        btn.innerHTML = '<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 6 9 12 15 18"/></svg>';
+        btn.title = 'Expand toolbar';
+        for (var i = 0; i < items.length; i++) {
+          items[i].style.transform = 'scale(0)';
+          items[i].style.opacity = '0';
+        }
+        setTimeout(function() {
+          if (!__zqBarExpanded) {
+            var items = devBar.querySelectorAll('.__zq_ex');
+            for (var i = 0; i < items.length; i++) items[i].style.display = 'none';
+          }
+        }, 250);
       }
     });
 
+    // Toggle hover
+    document.getElementById('__zq_bar_toggle').addEventListener('mouseover', function() {
+      this.style.background = 'rgba(88,166,255,0.18)';
+    });
+    document.getElementById('__zq_bar_toggle').addEventListener('mouseout', function() {
+      this.style.background = 'rgba(88,166,255,0.08)';
+    });
+
     // Close button
     document.getElementById('__zq_bar_close').addEventListener('click', function() {
       devBar.style.display = 'none';
     });
-
-    // Hover effects
-    document.getElementById('__zq_bar_dom').addEventListener('mouseover', function() {
-      this.style.background = 'rgba(63,185,80,0.3)';
-    });
-    document.getElementById('__zq_bar_dom').addEventListener('mouseout', function() {
-      this.style.background = 'rgba(63,185,80,0.15)';
-    });
   }
 
   function updateDevBar() {
@@ -721,6 +765,50 @@ const OVERLAY_SCRIPT = `<script>
     var morphEl = document.getElementById('__zq_bar_morphs');
     if (reqEl) reqEl.textContent = __zqRequests.length + ' req';
     if (morphEl) morphEl.textContent = __zqMorphCount + ' render';
+
+    if (__zqBarExpanded) {
+      var routeEl = document.getElementById('__zq_bar_route');
+      var compsEl = document.getElementById('__zq_bar_comps');
+      var elsEl = document.getElementById('__zq_bar_els');
+      if (routeEl) {
+        var lastEvt = __zqRouterEvents.length ? __zqRouterEvents[__zqRouterEvents.length - 1] : null;
+        var action = lastEvt ? lastEvt.action : '';
+        var path = location.pathname + location.hash;
+        if (path.length > 16) path = path.substring(0, 14) + '…';
+        var colors = __zqRouteColors[action] || __zqRouteDefault;
+        routeEl.style.background = colors.bg;
+        routeEl.style.color = colors.fg;
+        if (action) {
+          var label = action === 'pop-substate' ? 'pop' : action;
+          routeEl.textContent = label + ' ' + path;
+          routeEl.title = action + ' → ' + location.pathname + location.hash;
+        } else {
+          routeEl.textContent = path;
+        }
+        // Flash brightness on fresh events
+        if (lastEvt && (Date.now() - lastEvt.timestamp) < 2000) {
+          routeEl.style.outline = '1px solid ' + colors.fg;
+          clearTimeout(__zqRouteFadeTimer);
+          __zqRouteFadeTimer = setTimeout(function() {
+            var el = document.getElementById('__zq_bar_route');
+            if (el) el.style.outline = 'none';
+          }, 1800);
+        } else {
+          routeEl.style.outline = 'none';
+        }
+      }
+      if (compsEl) {
+        var count = 0;
+        try {
+          if (window.$ && $.components) count = Object.keys($.components()).length;
+          else if (window.$ && $._components) count = Object.keys($._components).length;
+        } catch(e) {}
+        compsEl.textContent = count + ' comps';
+      }
+      if (elsEl) {
+        elsEl.textContent = document.querySelectorAll('*').length + ' els';
+      }
+    }
   }
 
   // Expose for devtools popup

package/dist/zquery.js

@@ -1,5 +1,5 @@
 /**
- * zQuery (zeroQuery) v0.8.6
+ * zQuery (zeroQuery) v0.8.8
  * Lightweight Frontend Library
  * https://github.com/tonywied17/zero-query
  * (c) 2026 Anthony Wiedman - MIT License
@@ -2553,7 +2553,7 @@ function _getKey(node) {
  *   - Scoped styles (inline or via styleUrl)
  *   - External templates via templateUrl (with {{expression}} interpolation)
  *   - External styles via styleUrl (fetched & scoped automatically)
- *   - Relative path resolution — templateUrl, styleUrl, and pages.dir
+ *   - Relative path resolution — templateUrl and styleUrl
  *     resolve relative to the component file automatically
  */
 
@@ -2623,16 +2623,6 @@ function _fetchResource(url) {
   return promise;
 }
 
-/**
- * Convert a kebab-case id to Title Case.
- * 'getting-started' → 'Getting Started'
- * @param {string} id
- * @returns {string}
- */
-function _titleCase(id) {
-  return id.replace(/-/g, ' ').replace(/\b\w/g, c => c.toUpperCase());
-}
-
 /**
  * Resolve a relative URL against a base.
  *
@@ -2851,47 +2841,10 @@ class Component {
   //   - string              → single stylesheet
   //   - string[]            → array of URLs → all fetched & concatenated
   //
-  // pages config (shorthand for multi-template + route-param page switching):
-  //   pages: {
-  //     dir:     'pages',             // relative to component file (or base)
-  //     param:   'section',           // route param name → this.activePage
-  //     default: 'getting-started',   // fallback when param is absent
-  //     ext:     '.html',             // file extension (default '.html')
-  //     items:   ['page-a', { id: 'page-b', label: 'Page B' }, ...]
-  //   }
-  //   Exposes this.pages (array of {id,label}), this.activePage (current id)
-  //   Pages are lazy-loaded: only the active page is fetched on first render,
-  //   remaining pages are prefetched in the background for instant navigation.
-  //
   async _loadExternals() {
     const def = this._def;
     const base = def._base; // auto-detected or explicit
 
-    // -- Pages config ---------------------------------------------
-    if (def.pages && !def._pagesNormalized) {
-      const p = def.pages;
-      const ext = p.ext || '.html';
-      const dir = _resolveUrl((p.dir || '').replace(/\/+$/, ''), base);
-
-      // Normalize items → [{id, label}, …]
-      def._pages = (p.items || []).map(item => {
-        if (typeof item === 'string') return { id: item, label: _titleCase(item) };
-        return { ...item, label: item.label || _titleCase(item.id) };
-      });
-
-      // Build URL map for lazy per-page loading.
-      // Pages are fetched on demand (active page first, rest prefetched in
-      // the background) so the component renders as soon as the visible
-      // page is ready instead of waiting for every page to download.
-      def._pageUrls = {};
-      for (const { id } of def._pages) {
-        def._pageUrls[id] = `${dir}/${id}${ext}`;
-      }
-      if (!def._externalTemplates) def._externalTemplates = {};
-
-      def._pagesNormalized = true;
-    }
-
     // -- External templates --------------------------------------
     if (def.templateUrl && !def._templateLoaded) {
       const tu = def.templateUrl;
@@ -2904,9 +2857,8 @@ class Component {
         results.forEach((html, i) => { def._externalTemplates[i] = html; });
       } else if (typeof tu === 'object') {
         const entries = Object.entries(tu);
-        // Pages config already resolved; plain objects still need resolving
         const results = await Promise.all(
-          entries.map(([, url]) => _fetchResource(def._pagesNormalized ? url : _resolveUrl(url, base)))
+          entries.map(([, url]) => _fetchResource(_resolveUrl(url, base)))
         );
         def._externalTemplates = {};
         entries.forEach(([key], i) => { def._externalTemplates[key] = results[i]; });
@@ -2935,8 +2887,7 @@ class Component {
   _render() {
     // If externals haven't loaded yet, trigger async load then re-render
     if ((this._def.templateUrl && !this._def._templateLoaded) ||
-        (this._def.styleUrl && !this._def._styleLoaded) ||
-        (this._def.pages && !this._def._pagesNormalized)) {
+        (this._def.styleUrl && !this._def._styleLoaded)) {
       this._loadExternals().then(() => {
         if (!this._destroyed) this._render();
       });
@@ -2948,43 +2899,6 @@ class Component {
       this.templates = this._def._externalTemplates;
     }
 
-    // Expose pages metadata and active page (derived from route param)
-    if (this._def._pages) {
-      this.pages = this._def._pages;
-      const pc = this._def.pages;
-      let active = (pc.param && this.props.$params?.[pc.param]) || pc.default || this._def._pages[0]?.id || '';
-
-      // Fall back to default if the param doesn't match any known page
-      if (this._def._pageUrls && !(active in this._def._pageUrls)) {
-        active = pc.default || this._def._pages[0]?.id || '';
-      }
-      this.activePage = active;
-
-      // Lazy-load: fetch only the active page's template on demand
-      if (this._def._pageUrls && !(active in this._def._externalTemplates)) {
-        const url = this._def._pageUrls[active];
-        if (url) {
-          _fetchResource(url).then(html => {
-            this._def._externalTemplates[active] = html;
-            if (!this._destroyed) this._render();
-          });
-          return; // Wait for active page before rendering
-        }
-      }
-
-      // Prefetch remaining pages in background (once, after active page is ready)
-      if (this._def._pageUrls && !this._def._pagesPrefetched) {
-        this._def._pagesPrefetched = true;
-        for (const [id, url] of Object.entries(this._def._pageUrls)) {
-          if (!(id in this._def._externalTemplates)) {
-            _fetchResource(url).then(html => {
-              this._def._externalTemplates[id] = html;
-            });
-          }
-        }
-      }
-    }
-
     // Determine HTML content
     let html;
     if (this._def.render) {
@@ -3687,7 +3601,7 @@ class Component {
 // Reserved definition keys (not user methods)
 const _reservedKeys = new Set([
   'state', 'render', 'styles', 'init', 'mounted', 'updated', 'destroyed', 'props',
-  'templateUrl', 'styleUrl', 'templates', 'pages', 'activePage', 'base',
+  'templateUrl', 'styleUrl', 'templates', 'base',
   'computed', 'watch'
 ]);
 
@@ -3710,8 +3624,8 @@ function component(name, definition) {
   }
   definition._name = name;
 
-  // Auto-detect the calling module's URL so that relative templateUrl,
-  // styleUrl, and pages.dir paths resolve relative to the component file.
+  // Auto-detect the calling module's URL so that relative templateUrl
+  // and styleUrl paths resolve relative to the component file.
   // An explicit `base` string on the definition overrides auto-detection.
   if (definition.base !== undefined) {
     definition._base = definition.base;   // explicit override
@@ -3838,23 +3752,11 @@ async function prefetch(name) {
   const def = _registry.get(name);
   if (!def) return;
 
-  // Load templateUrl, styleUrl, and normalize pages config
+  // Load templateUrl and styleUrl if not already loaded.
   if ((def.templateUrl && !def._templateLoaded) ||
-      (def.styleUrl && !def._styleLoaded) ||
-      (def.pages && !def._pagesNormalized)) {
+      (def.styleUrl && !def._styleLoaded)) {
     await Component.prototype._loadExternals.call({ _def: def });
   }
-
-  // For pages-based components, prefetch ALL page templates so any
-  // active page renders instantly on mount.
-  if (def._pageUrls && def._externalTemplates) {
-    const missing = Object.entries(def._pageUrls)
-      .filter(([id]) => !(id in def._externalTemplates));
-    if (missing.length) {
-      const results = await Promise.all(missing.map(([, url]) => _fetchResource(url)));
-      missing.forEach(([id], i) => { def._externalTemplates[id] = results[i]; });
-    }
-  }
 }
 
 
@@ -4098,7 +4000,7 @@ class Router {
 
     // Per-route fallback: register an alias path for the same component.
     // e.g. { path: '/docs/:section', fallback: '/docs', component: 'docs-page' }
-    // When matched via fallback, missing params are undefined → pages `default` kicks in.
+    // When matched via fallback, missing params are undefined.
     if (route.fallback) {
       const fbKeys = [];
       const fbPattern = route.fallback
@@ -5362,8 +5264,8 @@ $.guardCallback  = guardCallback;
 $.validate       = validate;
 
 // --- Meta ------------------------------------------------------------------
-$.version = '0.8.6';
-$.libSize = '~91 KB';
+$.version = '0.8.8';
+$.libSize = '~89 KB';
 $.meta    = {};                // populated at build time by CLI bundler
 
 $.noConflict = () => {