@emkodev/emroute 1.7.2 → 1.8.0-beta.1

package/dist/emroute.js

@@ -1,7 +1,32 @@
-// dist/src/util/html.util.js
+// dist/core/util/html.util.js
 var SSR_ATTR = "ssr";
 var LAZY_ATTR = "lazy";
-var SsrShadowRoot = class {
+var BLOCKED_PROTOCOLS = /^(javascript|data|vbscript):/i;
+function assertSafeRedirect(url) {
+  if (BLOCKED_PROTOCOLS.test(url.trim())) {
+    throw new Error(`Unsafe redirect URL blocked: ${url}`);
+  }
+}
+function escapeHtml(text) {
+  return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;").replaceAll("`", "&#96;");
+}
+function unescapeHtml(text) {
+  return text.replaceAll("&#96;", "`").replaceAll("&#39;", "'").replaceAll("&quot;", '"').replaceAll("&gt;", ">").replaceAll("&lt;", "<").replaceAll("&amp;", "&");
+}
+function scopeWidgetCss(css, widgetName) {
+  return `@scope (widget-${widgetName}) {
+${css}
+}`;
+}
+var STATUS_MESSAGES = {
+  401: "Unauthorized",
+  403: "Forbidden",
+  404: "Not Found",
+  500: "Internal Server Error"
+};
+
+// dist/src/util/html.util.js
+class SsrShadowRoot {
   host;
   _innerHTML = "";
   constructor(host) {
@@ -16,8 +41,7 @@ var SsrShadowRoot = class {
   setHTMLUnsafe(html, _options) {
     this._innerHTML = html;
   }
-  append(..._nodes) {
-  }
+  append(..._nodes) {}
   querySelector(_selector) {
     return null;
   }
@@ -30,12 +54,12 @@ var SsrShadowRoot = class {
   get firstChild() {
     return null;
   }
-};
-var SsrHTMLElement = class {
+}
+
+class SsrHTMLElement {
   _innerHTML = "";
   _shadowRoot = null;
-  _attributes = /* @__PURE__ */ new Map();
-  // Accept any CSS property assignment without error
+  _attributes = new Map;
   style = new Proxy({}, {
     set(_target, _prop, _value) {
       return true;
@@ -43,7 +67,7 @@ var SsrHTMLElement = class {
     get(_target, prop) {
       if (typeof prop === "string")
         return "";
-      return void 0;
+      return;
     }
   });
   get innerHTML() {
@@ -90,73 +114,41 @@ var SsrHTMLElement = class {
   querySelectorAll(_selector) {
     return [];
   }
-  append(..._nodes) {
-  }
+  append(..._nodes) {}
   appendChild(node) {
     return node;
   }
-};
-var HTMLElementBase = globalThis.HTMLElement ?? SsrHTMLElement;
-function escapeHtml(text) {
-  return text.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;").replaceAll("`", "&#96;");
-}
-function unescapeHtml(text) {
-  return text.replaceAll("&#96;", "`").replaceAll("&#39;", "'").replaceAll("&quot;", '"').replaceAll("&gt;", ">").replaceAll("&lt;", "<").replaceAll("&amp;", "&");
-}
-function scopeWidgetCss(css, widgetName) {
-  return `@scope (widget-${widgetName}) {
-${css}
-}`;
 }
-var STATUS_MESSAGES = {
-  401: "Unauthorized",
-  403: "Forbidden",
-  404: "Not Found",
-  500: "Internal Server Error"
-};
+var HTMLElementBase = globalThis.HTMLElement ?? SsrHTMLElement;
 
 // dist/src/element/slot.element.js
-var RouterSlot = class extends HTMLElementBase {
-};
+class RouterSlot extends HTMLElementBase {
+}
 
 // dist/src/element/markdown.element.js
-var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
+class MarkdownElement extends HTMLElementBase {
   static renderer = null;
   static rendererInitPromise = null;
   abortController = null;
-  /**
-   * Set the markdown renderer.
-   * Must be called before any <mark-down> elements are connected.
-   *
-   * @example
-   * ```ts
-   * import { createEmkoRenderer } from './emko.renderer.ts';
-   * MarkdownElement.setRenderer(await createEmkoRenderer());
-   * ```
-   */
   static setRenderer(renderer) {
-    _MarkdownElement.renderer = renderer;
-    _MarkdownElement.rendererInitPromise = renderer.init ? renderer.init() : null;
+    MarkdownElement.renderer = renderer;
+    MarkdownElement.rendererInitPromise = renderer.init ? renderer.init() : null;
   }
-  /** Get the current renderer (if set). Used by bootEmrouteApp to pass through to createEmrouteServer. */
   static getConfiguredRenderer() {
-    return _MarkdownElement.renderer;
+    return MarkdownElement.renderer;
   }
-  /**
-   * Get the current renderer, waiting for init if needed.
-   */
   static async getRenderer() {
-    const renderer = _MarkdownElement.renderer;
+    const renderer = MarkdownElement.renderer;
     if (!renderer) {
       throw new Error("No markdown renderer configured. Call MarkdownElement.setRenderer() before using <mark-down> elements.");
     }
-    if (_MarkdownElement.rendererInitPromise) {
-      await _MarkdownElement.rendererInitPromise;
+    if (MarkdownElement.rendererInitPromise) {
+      await MarkdownElement.rendererInitPromise;
     }
     return renderer;
   }
   async connectedCallback() {
-    this.abortController = new AbortController();
+    this.abortController = new AbortController;
     await this.loadContent();
   }
   disconnectedCallback() {
@@ -177,7 +169,7 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
   async loadFromSrc(src) {
     const signal = this.abortController?.signal;
     try {
-      const response = await fetch(src, { signal });
+      const response = await fetch(src, signal ? { signal } : {});
       if (!response.ok) {
         throw new Error(`Failed to fetch ${src}: ${response.status}`);
       }
@@ -192,7 +184,7 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
   }
   async renderContent(markdown) {
     try {
-      const renderer = await _MarkdownElement.getRenderer();
+      const renderer = await MarkdownElement.getRenderer();
       this.innerHTML = renderer.render(markdown);
     } catch (error) {
       this.showError(error);
@@ -202,21 +194,26 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
     const message = error instanceof Error ? error.message : String(error);
     this.innerHTML = `<div>Markdown Error: ${escapeHtml(message)}</div>`;
   }
-};
+}
 
 // dist/src/element/component.element.js
-var ComponentElement = class _ComponentElement extends HTMLElementBase {
-  /** Shared file content cache — deduplicates fetches across all widget instances. */
-  static fileCache = /* @__PURE__ */ new Map();
-  /** Lazy module loaders keyed by tag name — set by registerLazy(). */
-  static lazyLoaders = /* @__PURE__ */ new Map();
-  /** Cached module promises for lazy-loaded widgets — avoids re-fetching. */
-  static lazyModules = /* @__PURE__ */ new Map();
-  /** App-level context provider set once during router initialization. */
+function filterUndefined(obj) {
+  const result = {};
+  let hasValue = false;
+  for (const [k, v] of Object.entries(obj)) {
+    if (v !== undefined) {
+      result[k] = v;
+      hasValue = true;
+    }
+  }
+  return hasValue ? result : undefined;
+}
+
+class ComponentElement extends HTMLElementBase {
+  static lazyLoaders = new Map;
   static extendContext;
-  /** Register (or clear) the context provider that enriches every widget's ComponentContext. */
   static setContextProvider(provider) {
-    _ComponentElement.extendContext = provider;
+    ComponentElement.extendContext = provider;
   }
   component;
   effectiveFiles;
@@ -228,7 +225,6 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
   deferred = null;
   abortController = null;
   intersectionObserver = null;
-  /** Promise that resolves with fetched data (available after loadData starts) */
   dataPromise = null;
   constructor(component, files) {
     super();
@@ -238,52 +234,36 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
       this.attachShadow({ mode: "open" });
     }
   }
-  /**
-   * Register a widget as a custom element: `widget-{name}`.
-   * Creates a fresh widget instance per DOM element (per-element state).
-   * Optional `files` parameter provides discovered file paths without mutating
-   * the component instance.
-   */
   static register(component, files) {
     const tagName = `widget-${component.name}`;
     if (!globalThis.customElements || customElements.get(tagName)) {
       return;
     }
     const WidgetClass = component.constructor;
-    const BoundElement = class extends _ComponentElement {
+    const BoundElement = class extends ComponentElement {
       constructor() {
-        super(new WidgetClass(), files);
+        super(new WidgetClass, files);
       }
     };
     customElements.define(tagName, BoundElement);
   }
-  /**
-   * Register a widget class (not instance) as a custom element: `widget-{name}`.
-   * Used for manifest-based registration where classes are loaded dynamically.
-   */
   static registerClass(WidgetClass, name, files) {
     const tagName = `widget-${name}`;
     if (!globalThis.customElements || customElements.get(tagName)) {
       return;
     }
-    const BoundElement = class extends _ComponentElement {
+    const BoundElement = class extends ComponentElement {
       constructor() {
-        super(new WidgetClass(), files);
+        super(new WidgetClass, files);
       }
     };
     customElements.define(tagName, BoundElement);
   }
-  /**
-   * Register a widget lazily: define the custom element immediately (so SSR
-   * content via Declarative Shadow DOM is adopted), but defer loading the
-   * module until connectedCallback fires. Once loaded, the real component
-   * replaces the placeholder and hydration proceeds normally.
-   */
   static registerLazy(name, files, loader) {
     const tagName = `widget-${name}`;
     if (!globalThis.customElements || customElements.get(tagName))
       return;
-    _ComponentElement.lazyLoaders.set(tagName, loader);
+    ComponentElement.lazyLoaders.set(tagName, loader);
     const placeholder = {
       name,
       getData: () => Promise.resolve(null),
@@ -292,17 +272,13 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
       renderError: () => "",
       renderMarkdownError: () => ""
     };
-    const BoundElement = class extends _ComponentElement {
+    const BoundElement = class extends ComponentElement {
       constructor() {
         super(placeholder, files);
       }
     };
     customElements.define(tagName, BoundElement);
   }
-  /**
-   * Promise that resolves when component is ready (data loaded and rendered).
-   * Used by router to wait for async components.
-   */
   get ready() {
     if (this.state === "ready") {
       return Promise.resolve();
@@ -312,23 +288,18 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
   }
   async connectedCallback() {
     const tagName = this.tagName.toLowerCase();
-    const lazyLoader = _ComponentElement.lazyLoaders.get(tagName);
+    const lazyLoader = ComponentElement.lazyLoaders.get(tagName);
     if (lazyLoader) {
       try {
-        let modulePromise = _ComponentElement.lazyModules.get(tagName);
-        if (!modulePromise) {
-          modulePromise = lazyLoader();
-          _ComponentElement.lazyModules.set(tagName, modulePromise);
-        }
-        const mod = await modulePromise;
+        const mod = await lazyLoader();
         for (const exp of Object.values(mod)) {
           if (exp && typeof exp === "object" && "getData" in exp) {
             const WidgetClass = exp.constructor;
-            this.component = new WidgetClass();
+            this.component = new WidgetClass;
             break;
           }
           if (typeof exp === "function" && exp.prototype?.getData) {
-            this.component = new exp();
+            this.component = new exp;
             break;
           }
         }
@@ -342,7 +313,7 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     }
     this.component.element = this;
     this.style.contentVisibility = "auto";
-    this.abortController = new AbortController();
+    this.abortController = new AbortController;
     const signal = this.abortController.signal;
     const params = {};
     for (const attr of this.attributes) {
@@ -367,22 +338,22 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     if (signal.aborted)
       return;
     const currentUrl = globalThis.location ? new URL(location.href) : new URL("http://localhost/");
+    const filteredFiles = filterUndefined(files);
     const base = {
       url: currentUrl,
       pathname: currentUrl.pathname,
       searchParams: currentUrl.searchParams,
       params: this.params ?? {},
-      files: files.html || files.md || files.css ? files : void 0
+      ...filteredFiles ? { files: filteredFiles } : {}
     };
-    this.context = _ComponentElement.extendContext ? _ComponentElement.extendContext(base) : base;
+    this.context = ComponentElement.extendContext ? ComponentElement.extendContext(base) : base;
     if (this.hasAttribute(SSR_ATTR)) {
       this.removeAttribute(SSR_ATTR);
       const lightText = this.textContent?.trim();
       if (lightText) {
         try {
           this.data = JSON.parse(lightText);
-        } catch {
-        }
+        } catch {}
       }
       this.textContent = "";
       this.state = "ready";
@@ -410,56 +381,42 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
   }
   disconnectedCallback() {
     this.component.destroy?.();
-    this.component.element = void 0;
+    this.component.element = undefined;
     this.intersectionObserver?.disconnect();
     this.intersectionObserver = null;
     this.abortController?.abort();
     this.abortController = null;
     this.state = "idle";
     this.data = null;
-    this.context = void 0;
+    this.context = undefined;
     this.dataPromise = null;
     this.errorMessage = "";
     this.signalReady();
     this.deferred = null;
   }
-  /**
-   * Reload component data. Aborts any in-flight request first.
-   */
   async reload() {
     if (this.params === null)
       return;
     this.abortController?.abort();
-    this.abortController = new AbortController();
+    this.abortController = new AbortController;
     await this.loadData();
   }
-  /**
-   * Fetch a single file by path, with caching.
-   * Absolute URLs (http/https) pass through; relative paths get '/' prefix.
-   */
   static loadFile(path) {
-    const cached = _ComponentElement.fileCache.get(path);
-    if (cached)
-      return cached;
     const url = path.startsWith("http://") || path.startsWith("https://") ? path : path.startsWith("/") ? path : "/" + path;
-    const promise = fetch(url).then((res) => res.ok ? res.text() : void 0, () => void 0);
-    _ComponentElement.fileCache.set(path, promise);
-    return promise;
+    return fetch(url).then((res) => res.ok ? res.text() : undefined, () => {
+      return;
+    });
   }
-  /**
-   * Load all companion files for this widget instance.
-   * Uses effectiveFiles (from registration) falling back to component.files.
-   */
   async loadFiles() {
     const filePaths = this.effectiveFiles ?? this.component.files;
     if (!filePaths)
       return {};
     const [html, md, css] = await Promise.all([
-      filePaths.html ? _ComponentElement.loadFile(filePaths.html) : void 0,
-      filePaths.md ? _ComponentElement.loadFile(filePaths.md) : void 0,
-      filePaths.css ? _ComponentElement.loadFile(filePaths.css) : void 0
+      filePaths.html ? ComponentElement.loadFile(filePaths.html) : undefined,
+      filePaths.md ? ComponentElement.loadFile(filePaths.md) : undefined,
+      filePaths.css ? ComponentElement.loadFile(filePaths.css) : undefined
     ]);
-    return { html, md, css };
+    return filterUndefined({ html, md, css }) ?? {};
   }
   async loadData() {
     if (this.params === null)
@@ -470,7 +427,7 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     try {
       const promise = this.component.getData({
         params: this.params,
-        signal,
+        ...signal ? { signal } : {},
         context: this.context
       });
       this.dataPromise = promise;
@@ -523,189 +480,235 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
       });
     }
   }
-};
+}
 
-// dist/src/widget/widget.registry.js
-var WidgetRegistry = class {
-  widgets = /* @__PURE__ */ new Map();
-  /** Register a widget by its name. */
+// dist/core/widget/widget.registry.js
+class WidgetRegistry {
+  widgets = new Map;
   add(widget) {
     this.widgets.set(widget.name, widget);
   }
-  /** Look up a widget by name. */
   get(name) {
     return this.widgets.get(name);
   }
-  /** Iterate all registered widgets. */
   [Symbol.iterator]() {
     return this.widgets.values();
   }
-  /** Emit a WidgetsManifest from registered widgets. */
-  toManifest() {
-    const widgets = [];
-    const moduleLoaders = {};
-    for (const [name, widget] of this.widgets) {
-      const entry = {
-        name,
-        modulePath: name,
-        tagName: `widget-${name}`,
-        files: widget.files
-      };
-      widgets.push(entry);
-      moduleLoaders[name] = () => Promise.resolve({ default: widget.constructor });
+}
+
+// dist/core/router/route.trie.js
+class RouteTrie {
+  tree;
+  constructor(tree) {
+    this.tree = tree;
+  }
+  match(pathname) {
+    pathname = this.normalizePath(pathname);
+    if (pathname === "/") {
+      if (this.tree.files || this.tree.redirect) {
+        return { node: this.tree, pattern: "/", params: {} };
+      }
+      return;
     }
-    return { widgets, moduleLoaders };
+    return this.walk(this.tree, this.splitSegments(pathname), 0, {}, "/");
   }
-};
-
-// dist/src/route/route.core.js
-var __rewriteRelativeImportExtension = function(path, preserveJsx) {
-  if (typeof path === "string" && /^\.\.?\//.test(path)) {
-    return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function(m, tsx, d, ext, cm) {
-      return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : d + ext + "." + cm.toLowerCase() + "js";
-    });
+  findErrorBoundary(pathname) {
+    pathname = this.normalizePath(pathname);
+    if (pathname === "/")
+      return this.tree.errorBoundary;
+    return this.walkForBoundary(this.tree, this.splitSegments(pathname), 0, this.tree.errorBoundary);
   }
-  return path;
-};
-var DEFAULT_BASE_PATH = { html: "/html", md: "/md", app: "/app" };
-var BLOCKED_PROTOCOLS = /^(javascript|data|vbscript):/i;
-function assertSafeRedirect(url) {
-  if (BLOCKED_PROTOCOLS.test(url.trim())) {
-    throw new Error(`Unsafe redirect URL blocked: ${url}`);
+  findRoute(pattern) {
+    if (pattern === "/") {
+      return this.tree.files || this.tree.redirect ? this.tree : undefined;
+    }
+    const segments = this.splitSegments(pattern);
+    let node = this.tree;
+    for (const segment of segments) {
+      let child;
+      if (segment.startsWith(":") && segment.endsWith("*")) {
+        child = node.wildcard?.child;
+      } else if (segment.startsWith(":")) {
+        child = node.dynamic?.child;
+      } else {
+        child = node.children?.[segment];
+      }
+      if (!child)
+        return;
+      node = child;
+    }
+    return node.files || node.redirect ? node : undefined;
+  }
+  safeDecode(segment) {
+    try {
+      return decodeURIComponent(segment);
+    } catch {
+      return segment;
+    }
+  }
+  splitSegments(pathname) {
+    return pathname.substring(1).split("/");
+  }
+  normalizePath(pathname) {
+    if (pathname.length > 1 && pathname.endsWith("/")) {
+      pathname = pathname.slice(0, -1);
+    }
+    if (!pathname.startsWith("/")) {
+      pathname = "/" + pathname;
+    }
+    return pathname;
+  }
+  walk(node, segments, index, params, pattern) {
+    if (index === segments.length) {
+      if (node.files || node.redirect) {
+        return { node, pattern, params: { ...params } };
+      }
+      if (node.wildcard && (node.wildcard.child.files || node.wildcard.child.redirect)) {
+        const wp = pattern === "/" ? `/:${node.wildcard.param}*` : `${pattern}/:${node.wildcard.param}*`;
+        return {
+          node: node.wildcard.child,
+          pattern: wp,
+          params: { ...params, [node.wildcard.param]: "" }
+        };
+      }
+      return;
+    }
+    const segment = segments[index];
+    const staticChild = node.children?.[segment];
+    if (staticChild) {
+      const childPattern = pattern === "/" ? `/${segment}` : `${pattern}/${segment}`;
+      const result = this.walk(staticChild, segments, index + 1, params, childPattern);
+      if (result)
+        return result;
+    }
+    if (node.dynamic) {
+      const { param, child } = node.dynamic;
+      params[param] = this.safeDecode(segment);
+      const childPattern = pattern === "/" ? `/:${param}` : `${pattern}/:${param}`;
+      const result = this.walk(child, segments, index + 1, params, childPattern);
+      if (result)
+        return result;
+      delete params[param];
+    }
+    if (node.wildcard && (node.wildcard.child.files || node.wildcard.child.redirect)) {
+      const { param, child } = node.wildcard;
+      let rest = this.safeDecode(segments[index]);
+      for (let i = index + 1;i < segments.length; i++) {
+        rest += "/" + this.safeDecode(segments[i]);
+      }
+      const wp = pattern === "/" ? `/:${param}*` : `${pattern}/:${param}*`;
+      return {
+        node: child,
+        pattern: wp,
+        params: { ...params, [param]: rest }
+      };
+    }
+    return;
   }
+  walkForBoundary(node, segments, index, deepest) {
+    if (index === segments.length) {
+      return node.errorBoundary ?? deepest;
+    }
+    const segment = segments[index];
+    const staticChild = node.children?.[segment];
+    if (staticChild) {
+      return this.walkForBoundary(staticChild, segments, index + 1, staticChild.errorBoundary ?? deepest);
+    }
+    if (node.dynamic) {
+      return this.walkForBoundary(node.dynamic.child, segments, index + 1, node.dynamic.child.errorBoundary ?? deepest);
+    }
+    if (node.wildcard) {
+      return node.wildcard.child.errorBoundary ?? deepest;
+    }
+    return deepest;
+  }
+}
+
+// dist/core/runtime/abstract.runtime.js
+var ROUTES_MANIFEST_PATH = "/routes.manifest.json";
+var WIDGETS_MANIFEST_PATH = "/widgets.manifest.json";
+var ELEMENTS_MANIFEST_PATH = "/elements.manifest.json";
+
+// dist/core/type/logger.type.js
+var noop = () => {};
+var defaultLogger = { error: noop, warn: noop };
+function setLogger(_logger) {
+  console.warn("[emroute] setLogger() is deprecated. Pass `logger` in Emroute.create() config instead.");
 }
+
+// dist/core/pipeline/pipeline.js
 var DEFAULT_ROOT_ROUTE = {
   pattern: "/",
   type: "page",
   modulePath: "__default_root__"
 };
-function toRouteConfig(resolved) {
-  const node = resolved.node;
+function toRouteConfig(node, pattern) {
   return {
-    pattern: resolved.pattern,
+    pattern,
     type: node.redirect ? "redirect" : "page",
     modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-    files: node.files
+    ...node.files ? { files: node.files } : {}
   };
 }
-var RouteCore = class {
-  resolver;
-  /** Registered context provider (if any). Exposed so renderers can apply it to inline contexts. */
+
+class Pipeline {
+  runtime;
   contextProvider;
-  listeners = /* @__PURE__ */ new Set();
-  moduleCache = /* @__PURE__ */ new Map();
-  widgetFileCache = /* @__PURE__ */ new Map();
+  logger;
   moduleLoaders;
-  currentRoute = null;
-  readFile;
-  constructor(resolver, options = {}) {
-    this.resolver = resolver;
-    this.readFile = options.fileReader ?? ((path) => fetch(path, { headers: { Accept: "text/plain" } }).then((r) => r.text()));
-    this.contextProvider = options.extendContext;
+  constructor(options) {
+    this.runtime = options.runtime;
+    this.contextProvider = options.contextProvider;
+    this.logger = options.logger ?? defaultLogger;
     this.moduleLoaders = options.moduleLoaders ?? {};
   }
-  /**
-   * Get current route parameters.
-   */
-  getParams() {
-    return this.currentRoute?.params ?? {};
-  }
-  /**
-   * Add event listener for router events.
-   */
-  addEventListener(listener) {
-    this.listeners.add(listener);
-    return () => this.listeners.delete(listener);
-  }
-  /**
-   * Emit router event to listeners.
-   */
-  emit(event) {
-    for (const listener of this.listeners) {
-      try {
-        listener(event);
-      } catch (e) {
-        console.error("[Router] Event listener error:", e);
-      }
-    }
+  async getResolver() {
+    const response = await this.runtime.query(ROUTES_MANIFEST_PATH);
+    const tree = response.status === 404 ? {} : await response.json();
+    return new RouteTrie(tree);
   }
-  /**
-   * Match a URL to a route.
-   * Falls back to the default root route for '/'.
-   */
-  match(url) {
-    const pathname = url.pathname;
-    const resolved = this.resolver.match(pathname);
+  async match(url) {
+    const resolver = await this.getResolver();
+    const resolved = resolver.match(url.pathname);
     if (resolved) {
-      return {
-        route: toRouteConfig(resolved),
-        params: resolved.params
-      };
+      return { route: toRouteConfig(resolved.node, resolved.pattern), params: resolved.params };
     }
-    if (pathname === "/" || pathname === "") {
-      return {
-        route: DEFAULT_ROOT_ROUTE,
-        params: {}
-      };
+    if (url.pathname === "/" || url.pathname === "") {
+      return { route: DEFAULT_ROOT_ROUTE, params: {} };
     }
-    return void 0;
+    return;
   }
-  /** Get status-specific page (404, 401, 403). */
-  getStatusPage(status) {
-    const node = this.resolver.findRoute(`/${status}`);
+  async findRoute(pattern) {
+    const resolver = await this.getResolver();
+    const node = resolver.findRoute(pattern);
     if (!node)
-      return void 0;
-    return {
-      pattern: `/${status}`,
-      type: "page",
-      modulePath: node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-      files: node.files
-    };
-  }
-  /** Get global error handler (root errorBoundary). */
-  getErrorHandler() {
-    const modulePath = this.resolver.findErrorBoundary("/");
-    if (!modulePath)
-      return void 0;
-    return { pattern: "/", type: "error", modulePath };
+      return;
+    return toRouteConfig(node, pattern);
   }
-  /**
-   * Find error boundary for a given pathname.
-   * Note: pattern is the input pathname, not the boundary's own pattern.
-   * Callers should only rely on modulePath.
-   */
-  findErrorBoundary(pathname) {
-    const modulePath = this.resolver.findErrorBoundary(pathname);
+  async findErrorBoundary(pathname) {
+    const resolver = await this.getResolver();
+    const modulePath = resolver.findErrorBoundary(pathname);
     if (!modulePath)
-      return void 0;
+      return;
     return { pattern: pathname, modulePath };
   }
-  /**
-   * Find a route by its exact pattern.
-   * Used for building route hierarchy.
-   */
-  findRoute(pattern) {
-    const node = this.resolver.findRoute(pattern);
+  async getStatusPage(status) {
+    const resolver = await this.getResolver();
+    const node = resolver.findRoute(`/${status}`);
     if (!node)
-      return void 0;
-    return {
-      pattern,
-      type: node.redirect ? "redirect" : "page",
-      modulePath: node.redirect ?? node.files?.ts ?? node.files?.js ?? node.files?.html ?? node.files?.md ?? "",
-      files: node.files
-    };
+      return;
+    return toRouteConfig(node, `/${status}`);
+  }
+  async getErrorHandler() {
+    const resolver = await this.getResolver();
+    const modulePath = resolver.findErrorBoundary("/");
+    if (!modulePath)
+      return;
+    return { pattern: "/", type: "error", modulePath };
   }
-  /**
-   * Build route hierarchy from a pattern.
-   * Patterns are always unprefixed (no basePath).
-   *
-   * e.g., '/projects/:id/tasks'
-   *   → ['/', '/projects', '/projects/:id', '/projects/:id/tasks']
-   */
   buildRouteHierarchy(pattern) {
-    if (pattern === "/") {
+    if (pattern === "/")
       return ["/"];
-    }
     const segments = pattern.split("/").filter(Boolean);
     const hierarchy = ["/"];
     let current = "";
@@ -715,318 +718,100 @@ var RouteCore = class {
     }
     return hierarchy;
   }
-  /**
-   * Normalize URL by removing trailing slashes (except bare '/').
-   */
-  normalizeUrl(url) {
-    if (url.length > 1 && url.endsWith("/")) {
-      return url.slice(0, -1);
-    }
-    return url;
-  }
-  /**
-   * Convert relative path to absolute path.
-   */
-  toAbsolutePath(path) {
-    return path.startsWith("/") ? path : "/" + path;
-  }
-  /**
-   * Load a module with caching.
-   * Uses pre-bundled loaders when available, falls back to dynamic import.
-   */
   async loadModule(modulePath) {
-    if (this.moduleCache.has(modulePath)) {
-      return this.moduleCache.get(modulePath);
-    }
-    let module;
     const loader = this.moduleLoaders[modulePath];
     if (loader) {
-      module = await loader();
-    } else {
-      const absolutePath = this.toAbsolutePath(modulePath);
-      module = await import(__rewriteRelativeImportExtension(absolutePath));
+      return await loader();
     }
-    this.moduleCache.set(modulePath, module);
-    return module;
+    const abs = modulePath.startsWith("/") ? modulePath : "/" + modulePath;
+    return await this.runtime.loadModule(abs);
+  }
+  getModuleFiles(mod) {
+    if (!mod || typeof mod !== "object")
+      return;
+    const files = mod.__files;
+    if (!files || typeof files !== "object")
+      return;
+    return files;
   }
-  /**
-   * Load widget file contents with caching.
-   */
-  async loadWidgetFiles(widgetFiles) {
+  async loadFiles(files) {
     const load = async (path) => {
-      const absPath = this.toAbsolutePath(path);
-      const cached = this.widgetFileCache.get(absPath);
-      if (cached !== void 0)
-        return cached;
+      const abs = path.startsWith("/") ? path : "/" + path;
       try {
-        const content = await this.readFile(absPath);
-        this.widgetFileCache.set(absPath, content);
-        return content;
+        return await this.runtime.query(abs, { as: "text" });
       } catch (e) {
-        console.warn(`[RouteCore] Failed to load widget file ${path}:`, e instanceof Error ? e.message : e);
-        return void 0;
+        console.warn(`[Pipeline] Failed to load file ${path}:`, e instanceof Error ? e.message : e);
+        return;
       }
     };
     const [html, md, css] = await Promise.all([
-      widgetFiles.html ? load(widgetFiles.html) : void 0,
-      widgetFiles.md ? load(widgetFiles.md) : void 0,
-      widgetFiles.css ? load(widgetFiles.css) : void 0
+      files.html ? load(files.html) : undefined,
+      files.md ? load(files.md) : undefined,
+      files.css ? load(files.css) : undefined
     ]);
-    return { html, md, css };
+    const result = {};
+    if (html !== undefined)
+      result.html = html;
+    if (md !== undefined)
+      result.md = md;
+    if (css !== undefined)
+      result.css = css;
+    return result;
   }
-  /**
-   * Build a RouteInfo from a matched route and the resolved URL pathname.
-   * Called once per navigation; the result is reused across the route hierarchy.
-   */
   toRouteInfo(matched, url) {
-    return {
-      url,
-      params: matched.params
-    };
-  }
-  /**
-   * Get inlined `__files` from a cached module (merged module pattern).
-   * Returns undefined if the module isn't cached or has no __files.
-   */
-  getModuleFiles(modulePath) {
-    const cached = this.moduleCache.get(modulePath);
-    if (!cached || typeof cached !== "object")
-      return void 0;
-    const files = cached.__files;
-    if (!files || typeof files !== "object")
-      return void 0;
-    return files;
+    return { url, params: matched.params };
   }
-  /**
-   * Build a ComponentContext by extending RouteInfo with loaded file contents.
-   *
-   * When the route module is a merged module (contains `__files`), uses
-   * inlined content directly. Otherwise falls back to reading companion files.
-   */
-  async buildComponentContext(routeInfo, route, signal, isLeaf) {
+  async buildContext(routeInfo, route, signal, isLeaf, loadedModule) {
     const rf = route.files;
-    const modulePath = rf?.ts ?? rf?.js;
-    const inlined = modulePath ? this.getModuleFiles(modulePath) : void 0;
-    let html;
-    let md;
-    let css;
+    const inlined = loadedModule ? this.getModuleFiles(loadedModule) : undefined;
+    let files;
     if (inlined) {
-      html = inlined.html;
-      md = inlined.md;
-      css = inlined.css;
+      files = inlined;
+    } else if (rf) {
+      const filePaths = {};
+      if (rf.html)
+        filePaths.html = rf.html;
+      if (rf.md)
+        filePaths.md = rf.md;
+      if (rf.css)
+        filePaths.css = rf.css;
+      files = await this.loadFiles(filePaths);
     } else {
-      const fetchFile = (filePath) => this.readFile(this.toAbsolutePath(filePath));
-      [html, md, css] = await Promise.all([
-        rf?.html ? fetchFile(rf.html) : void 0,
-        rf?.md ? fetchFile(rf.md) : void 0,
-        rf?.css ? fetchFile(rf.css) : void 0
-      ]);
+      files = {};
     }
     const base = {
       ...routeInfo,
       pathname: routeInfo.url.pathname,
       searchParams: routeInfo.url.searchParams,
-      files: { html, md, css },
-      signal,
-      isLeaf
+      files,
+      ...signal ? { signal } : {},
+      ...isLeaf !== undefined ? { isLeaf } : {}
     };
     return this.contextProvider ? this.contextProvider(base) : base;
   }
-};
-
-// dist/src/route/route.trie.js
-function createNode() {
-  return { static: /* @__PURE__ */ new Map() };
-}
-function safeDecode(segment) {
-  try {
-    return decodeURIComponent(segment);
-  } catch {
-    return segment;
-  }
 }
-function splitSegments(pathname) {
-  return pathname.substring(1).split("/");
-}
-function convertNode(source, pattern) {
-  const node = createNode();
-  if (source.files || source.redirect) {
-    node.route = source;
-    node.pattern = pattern;
-  }
-  if (source.errorBoundary) {
-    node.errorBoundary = source.errorBoundary;
-  }
-  if (source.children) {
-    for (const [segment, child] of Object.entries(source.children)) {
-      const childPattern = pattern === "/" ? `/${segment}` : `${pattern}/${segment}`;
-      node.static.set(segment, convertNode(child, childPattern));
-    }
-  }
-  if (source.dynamic) {
-    const { param, child } = source.dynamic;
-    const childPattern = pattern === "/" ? `/:${param}` : `${pattern}/:${param}`;
-    node.dynamic = { param, node: convertNode(child, childPattern) };
-  }
-  if (source.wildcard) {
-    const { param, child } = source.wildcard;
-    const childPattern = pattern === "/" ? `/:${param}*` : `${pattern}/:${param}*`;
-    node.wildcard = { param, node: convertNode(child, childPattern) };
+
+// dist/core/util/widget-resolve.util.js
+var MAX_WIDGET_DEPTH = 10;
+async function resolveRecursively(content, parse, resolve, replace, depth = 0, logger = defaultLogger) {
+  if (depth >= MAX_WIDGET_DEPTH) {
+    logger.warn(`Widget nesting depth limit reached (${MAX_WIDGET_DEPTH}). ` + "Possible circular dependency or excessive nesting.");
+    return content;
   }
-  return node;
+  const widgets = parse(content);
+  if (widgets.length === 0)
+    return content;
+  const replacements = new Map;
+  await Promise.all(widgets.map(async (widget) => {
+    let rendered = await resolve(widget);
+    rendered = await resolveRecursively(rendered, parse, resolve, replace, depth + 1, logger);
+    replacements.set(widget, rendered);
+  }));
+  return replace(content, replacements);
 }
-var RouteTrie = class {
-  root;
-  constructor(tree) {
-    this.root = convertNode(tree, "/");
-  }
-  match(pathname) {
-    if (pathname.length > 1 && pathname.endsWith("/")) {
-      pathname = pathname.slice(0, -1);
-    }
-    if (!pathname.startsWith("/")) {
-      pathname = "/" + pathname;
-    }
-    if (pathname === "/") {
-      if (this.root.route) {
-        return { node: this.root.route, pattern: "/", params: {} };
-      }
-      return void 0;
-    }
-    const segments = splitSegments(pathname);
-    return this.walk(this.root, segments, 0, {});
-  }
-  findErrorBoundary(pathname) {
-    if (pathname.length > 1 && pathname.endsWith("/")) {
-      pathname = pathname.slice(0, -1);
-    }
-    if (!pathname.startsWith("/")) {
-      pathname = "/" + pathname;
-    }
-    if (pathname === "/")
-      return this.root.errorBoundary;
-    const segments = splitSegments(pathname);
-    return this.walkForBoundary(this.root, segments, 0, this.root.errorBoundary);
-  }
-  findRoute(pattern) {
-    if (pattern === "/") {
-      return this.root.route;
-    }
-    const segments = splitSegments(pattern);
-    let node = this.root;
-    for (const segment of segments) {
-      let child;
-      if (segment.startsWith(":") && segment.endsWith("*")) {
-        child = node.wildcard?.node;
-      } else if (segment.startsWith(":")) {
-        child = node.dynamic?.node;
-      } else {
-        child = node.static.get(segment);
-      }
-      if (!child)
-        return void 0;
-      node = child;
-    }
-    return node.route;
-  }
-  // ── Private matching ──────────────────────────────────────────────────
-  walk(node, segments, index, params) {
-    if (index === segments.length) {
-      if (node.route) {
-        return { node: node.route, pattern: node.pattern, params: { ...params } };
-      }
-      if (node.wildcard?.node.route) {
-        return {
-          node: node.wildcard.node.route,
-          pattern: node.wildcard.node.pattern,
-          params: { ...params, [node.wildcard.param]: "" }
-        };
-      }
-      return void 0;
-    }
-    const segment = segments[index];
-    const staticChild = node.static.get(segment);
-    if (staticChild) {
-      const result = this.walk(staticChild, segments, index + 1, params);
-      if (result)
-        return result;
-    }
-    if (node.dynamic) {
-      const { param, node: dynamicNode } = node.dynamic;
-      params[param] = safeDecode(segment);
-      const result = this.walk(dynamicNode, segments, index + 1, params);
-      if (result)
-        return result;
-      delete params[param];
-    }
-    if (node.wildcard?.node.route) {
-      const { param, node: wildcardNode } = node.wildcard;
-      let rest = safeDecode(segments[index]);
-      for (let i = index + 1; i < segments.length; i++) {
-        rest += "/" + safeDecode(segments[i]);
-      }
-      return {
-        node: wildcardNode.route,
-        pattern: wildcardNode.pattern,
-        params: { ...params, [param]: rest }
-      };
-    }
-    return void 0;
-  }
-  /**
-   * Walk for error boundary. Follows the same priority as match
-   * (static → dynamic → wildcard) without backtracking across branches.
-   * Returns the deepest error boundary module path found along the path.
-   */
-  walkForBoundary(node, segments, index, deepest) {
-    if (index === segments.length) {
-      return node.errorBoundary ?? deepest;
-    }
-    const segment = segments[index];
-    const staticChild = node.static.get(segment);
-    if (staticChild) {
-      return this.walkForBoundary(staticChild, segments, index + 1, staticChild.errorBoundary ?? deepest);
-    }
-    if (node.dynamic) {
-      return this.walkForBoundary(node.dynamic.node, segments, index + 1, node.dynamic.node.errorBoundary ?? deepest);
-    }
-    if (node.wildcard) {
-      return node.wildcard.node.errorBoundary ?? deepest;
-    }
-    return deepest;
-  }
-};
-
-// dist/src/type/logger.type.js
-var noop = () => {
-};
-var logger = { error: noop, warn: noop };
-function setLogger(impl) {
-  logger.error = impl.error.bind(impl);
-  logger.warn = impl.warn.bind(impl);
-}
-
-// dist/src/util/widget-resolve.util.js
-var MAX_WIDGET_DEPTH = 10;
-async function resolveRecursively(content, parse, resolve, replace, depth = 0) {
-  if (depth >= MAX_WIDGET_DEPTH) {
-    logger.warn(`Widget nesting depth limit reached (${MAX_WIDGET_DEPTH}). Possible circular dependency or excessive nesting.`);
-    return content;
-  }
-  const widgets = parse(content);
-  if (widgets.length === 0)
-    return content;
-  const replacements = /* @__PURE__ */ new Map();
-  await Promise.all(widgets.map(async (widget) => {
-    let rendered = await resolve(widget);
-    rendered = await resolveRecursively(rendered, parse, resolve, replace, depth + 1);
-    replacements.set(widget, rendered);
-  }));
-  return replace(content, replacements);
-}
-function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider) {
+function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider, logger = defaultLogger) {
   const tagPattern = /<widget-(?<name>[a-z][a-z0-9-]*)(?<attrs>\s[^>]*)?>(?<content>.*?)<\/widget-\k<name>>/gis;
-  const wrappers = /* @__PURE__ */ new Map();
+  const wrappers = new Map;
   const ssrAttrPattern = new RegExp(`\\s${SSR_ATTR}(?:\\s|=|$)`);
   const parse = (content) => {
     const matches = content.matchAll(tagPattern).toArray();
@@ -1051,7 +836,7 @@ function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider
         ...routeInfo,
         pathname: routeInfo.url.pathname,
         searchParams: routeInfo.url.searchParams,
-        files
+        ...files ? { files } : {}
       };
       const context = contextProvider ? contextProvider(baseContext) : baseContext;
       const data = await widget.getData({ params, context });
@@ -1063,7 +848,7 @@ function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider
       });
       return rendered;
     } catch (e) {
-      logger.error(`[SSR HTML] Widget "${widgetName}" render failed`, e instanceof Error ? e : void 0);
+      logger.error(`[SSR HTML] Widget "${widgetName}" render failed`, e instanceof Error ? e : undefined);
       return match[0];
     }
   };
@@ -1080,7 +865,7 @@ function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider
     }
     return result;
   };
-  return resolveRecursively(html, parse, resolve, replace);
+  return resolveRecursively(html, parse, resolve, replace, 0, logger);
 }
 function parseAttrsToParams(attrsString) {
   const params = {};
@@ -1093,7 +878,7 @@ function parseAttrsToParams(attrsString) {
       continue;
     const key = attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
     const rawValue = dq ?? sq ?? uq;
-    if (rawValue === void 0) {
+    if (rawValue === undefined) {
       params[key] = "";
       continue;
     }
@@ -1110,32 +895,11 @@ function escapeAttr(value) {
   return value.replaceAll("&", "&amp;").replaceAll("'", "&#39;");
 }
 
-// dist/src/component/abstract.component.js
-var Component = class {
-  /** Host element reference, set by ComponentElement in the browser. */
+// dist/core/component/abstract.component.js
+class Component {
   element;
-  /** Associated file paths for pre-loaded content (html, md, css). */
   files;
-  /**
-   * When true, SSR serializes the getData() result into the element's
-   * light DOM so the client can access it immediately in hydrate()
-   * without re-fetching.
-   *
-   * Default is false — hydrate() receives `data: null`. Most widgets
-   * don't need this because the rendered Shadow DOM already contains
-   * the visual representation of the data.
-   *
-   * If you find yourself parsing the shadow DOM in hydrate() trying to
-   * reconstruct the original data object, set this to true instead.
-   * The server-fetched data will be available as `args.data` in hydrate().
-   */
   exposeSsrData;
-  /**
-   * Render as HTML for browser context.
-   *
-   * Default implementation converts renderMarkdown() output to HTML.
-   * Override for custom HTML rendering with rich styling/interactivity.
-   */
   renderHTML(args) {
     if (args.data === null) {
       return `<div data-component="${this.name}">Loading...</div>`;
@@ -1147,56 +911,23 @@ var Component = class {
     });
     return `<div data-component="${this.name}" data-markdown>${escapeHtml(markdown)}</div>`;
   }
-  /**
-   * Render error state.
-   */
   renderError(args) {
     const msg = args.error instanceof Error ? args.error.message : String(args.error);
     return `<div data-component="${this.name}">Error: ${escapeHtml(msg)}</div>`;
   }
-  /**
-   * Render error as markdown.
-   */
   renderMarkdownError(error) {
     const msg = error instanceof Error ? error.message : String(error);
     return `> **Error** (\`${this.name}\`): ${msg}`;
   }
-};
+}
 
-// dist/src/component/page.component.js
-var PageComponent = class extends Component {
+// dist/core/component/page.component.js
+class PageComponent extends Component {
   name = "page";
-  /** Route pattern this page handles (optional — set by subclasses) */
   pattern;
-  /**
-   * Fetch or compute page data. Override in subclasses.
-   * Default: returns null (no data needed).
-   *
-   * @example
-   * ```ts
-   * override getData({ params, context }: this['DataArgs']) {
-   *   return fetch(`/api/${params.id}`, { signal: context?.signal });
-   * }
-   * ```
-   */
   getData(_args) {
     return Promise.resolve(null);
   }
-  /**
-   * Render page as HTML.
-   *
-   * Fallback chain:
-   * 1. html file content from context
-   * 2. md file content wrapped in `<mark-down>`
-   * 3. `<router-slot />` (bare slot for child routes)
-   *
-   * @example
-   * ```ts
-   * override renderHTML({ data, params, context }: this['RenderArgs']) {
-   *   return `<h1>${params.id}</h1><p>${context?.files?.html ?? ''}</p>`;
-   * }
-   * ```
-   */
   renderHTML(args) {
     const files = args.context.files;
     const style = files?.css ? `<style>${files.css}</style>
@@ -1210,25 +941,12 @@ var PageComponent = class extends Component {
     }
     if (files?.md) {
       const hasSlot = files.md.includes("```router-slot");
-      const slot = args.context.isLeaf || hasSlot ? "" : "\n<router-slot></router-slot>";
+      const slot = args.context.isLeaf || hasSlot ? "" : `
+<router-slot></router-slot>`;
       return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>${slot}`;
     }
     return args.context.isLeaf ? "" : "<router-slot></router-slot>";
   }
-  /**
-   * Render page as Markdown.
-   *
-   * Fallback chain:
-   * 1. md file content from context
-   * 2. `` ```router-slot\n``` `` (slot placeholder in markdown — newline required)
-   *
-   * @example
-   * ```ts
-   * override renderMarkdown({ data, params, context }: this['RenderArgs']) {
-   *   return `# ${params.id}\n\n${context?.files?.md ?? ''}`;
-   * }
-   * ```
-   */
   renderMarkdown(args) {
     const files = args.context.files;
     if (files?.md) {
@@ -1236,53 +954,41 @@ var PageComponent = class extends Component {
     }
     return args.context.isLeaf ? "" : "```router-slot\n```";
   }
-  /**
-   * Page title. Override in subclasses.
-   * Default: undefined (no title).
-   *
-   * @example
-   * ```ts
-   * override getTitle({ data, params }: this['RenderArgs']) {
-   *   return `Project ${params.id}`;
-   * }
-   * ```
-   */
   getTitle(_args) {
-    return void 0;
+    return;
   }
-};
-var page_component_default = new PageComponent();
+}
+var page_component_default = new PageComponent;
 
-// dist/src/renderer/ssr/ssr.renderer.js
-var SsrRenderer = class _SsrRenderer {
-  core;
+// dist/core/renderer/ssr.renderer.js
+class SsrRenderer {
+  pipeline;
   widgets;
   widgetFiles;
-  constructor(resolver, options = {}) {
-    this.core = new RouteCore(resolver, options);
+  logger;
+  constructor(pipeline, options = {}) {
+    this.pipeline = pipeline;
+    this.logger = pipeline.logger;
     this.widgets = options.widgets ?? null;
     this.widgetFiles = options.widgetFiles ?? {};
   }
-  /**
-   * Render a URL to a content string.
-   */
   async render(url, signal) {
-    const matched = this.core.match(url);
+    const matched = await this.pipeline.match(url);
     if (!matched) {
-      const statusPage = this.core.getStatusPage(404);
+      const statusPage = await this.pipeline.getStatusPage(404);
       if (statusPage) {
         try {
           const ri = { url, params: {} };
-          const result = await this.renderRouteContent(ri, statusPage, void 0, signal);
-          return { content: this.stripSlots(result.content), status: 404, title: result.title };
+          const result = await this.renderRouteContent(ri, statusPage, undefined, signal);
+          return { content: this.stripSlots(result.content), status: 404, ...result.title !== undefined ? { title: result.title } : {} };
         } catch (e) {
-          logger.error(`[${this.label}] Failed to render 404 status page for ${url.pathname}`, e instanceof Error ? e : void 0);
+          this.logger.error(`[${this.label}] Failed to render 404 status page for ${url.pathname}`, e instanceof Error ? e : undefined);
         }
       }
       return { content: this.renderStatusPage(404, url), status: 404 };
     }
     if (matched.route.type === "redirect") {
-      const module = await this.core.loadModule(matched.route.modulePath);
+      const module = await this.pipeline.loadModule(matched.route.modulePath);
       const redirectConfig = module.default;
       assertSafeRedirect(redirectConfig.to);
       return {
@@ -1291,36 +997,36 @@ var SsrRenderer = class _SsrRenderer {
         redirect: redirectConfig.to
       };
     }
-    const routeInfo = this.core.toRouteInfo(matched, url);
+    const routeInfo = this.pipeline.toRouteInfo(matched, url);
     try {
       const { content, title } = await this.renderPage(routeInfo, matched, signal);
-      return { content, status: 200, title };
+      return { content, status: 200, ...title !== undefined ? { title } : {} };
     } catch (error) {
       if (error instanceof Response) {
-        const statusPage = this.core.getStatusPage(error.status);
+        const statusPage = await this.pipeline.getStatusPage(error.status);
         if (statusPage) {
           try {
             const ri = { url, params: {} };
-            const result = await this.renderRouteContent(ri, statusPage, void 0, signal);
+            const result = await this.renderRouteContent(ri, statusPage, undefined, signal);
             return {
               content: this.stripSlots(result.content),
               status: error.status,
-              title: result.title
+              ...result.title !== undefined ? { title: result.title } : {}
             };
           } catch (e) {
-            logger.error(`[${this.label}] Failed to render ${error.status} status page for ${url.pathname}`, e instanceof Error ? e : void 0);
+            this.logger.error(`[${this.label}] Failed to render ${error.status} status page for ${url.pathname}`, e instanceof Error ? e : undefined);
           }
         }
         return { content: this.renderStatusPage(error.status, url), status: error.status };
       }
-      logger.error(`[${this.label}] Error rendering ${url.pathname}:`, error instanceof Error ? error : void 0);
-      const boundary = this.core.findErrorBoundary(url.pathname);
+      this.logger.error(`[${this.label}] Error rendering ${url.pathname}:`, error instanceof Error ? error : undefined);
+      const boundary = await this.pipeline.findErrorBoundary(url.pathname);
       if (boundary) {
         const result = await this.tryRenderErrorModule(boundary.modulePath, url, "boundary");
         if (result)
           return result;
       }
-      const errorHandler = this.core.getErrorHandler();
+      const errorHandler = await this.pipeline.getErrorHandler();
       if (errorHandler) {
         const result = await this.tryRenderErrorModule(errorHandler.modulePath, url, "handler");
         if (result)
@@ -1329,15 +1035,12 @@ var SsrRenderer = class _SsrRenderer {
       return { content: this.renderErrorPage(error, url), status: 500 };
     }
   }
-  /**
-   * Render a matched page by composing the route hierarchy.
-   */
   async renderPage(routeInfo, matched, signal) {
-    const hierarchy = this.core.buildRouteHierarchy(matched.route.pattern);
+    const hierarchy = this.pipeline.buildRouteHierarchy(matched.route.pattern);
     const segments = [];
-    for (let i = 0; i < hierarchy.length; i++) {
+    for (let i = 0;i < hierarchy.length; i++) {
       const routePattern = hierarchy[i];
-      let route = this.core.findRoute(routePattern);
+      let route = await this.pipeline.findRoute(routePattern);
       if (!route && routePattern === "/") {
         route = DEFAULT_ROOT_ROUTE;
       }
@@ -1351,7 +1054,7 @@ var SsrRenderer = class _SsrRenderer {
     let result = "";
     let pageTitle;
     let lastRenderedPattern = "";
-    for (let i = 0; i < segments.length; i++) {
+    for (let i = 0;i < segments.length; i++) {
       const { content, title } = results[i];
       if (title) {
         pageTitle = title;
@@ -1361,59 +1064,57 @@ var SsrRenderer = class _SsrRenderer {
       } else {
         const injected = this.injectSlot(result, content, lastRenderedPattern);
         if (injected === result) {
-          logger.warn(`[${this.label}] Route "${lastRenderedPattern}" has no <router-slot> for child route "${hierarchy[i]}" to render into. Add <router-slot></router-slot> to the parent template.`);
+          this.logger.warn(`[${this.label}] Route "${lastRenderedPattern}" has no <router-slot> ` + `for child route "${hierarchy[i]}" to render into. ` + `Add <router-slot></router-slot> to the parent template.`);
         }
         result = injected;
       }
       lastRenderedPattern = segments[i].route.pattern;
     }
     result = this.stripSlots(result);
-    return { content: result, title: pageTitle };
+    return { content: result, ...pageTitle !== undefined ? { title: pageTitle } : {} };
   }
-  /** Load component, build context, get data, render content, get title. */
   async loadRouteContent(routeInfo, route, isLeaf, signal) {
     const files = route.files ?? {};
     const tsModule = files.ts ?? files.js;
-    const component = tsModule ? (await this.core.loadModule(tsModule)).default : page_component_default;
-    const context = await this.core.buildComponentContext(routeInfo, route, signal, isLeaf);
-    const data = await component.getData({ params: routeInfo.params, signal, context });
+    const loadedModule = tsModule ? await this.pipeline.loadModule(tsModule) : undefined;
+    const component = loadedModule?.default ?? page_component_default;
+    const context = await this.pipeline.buildContext(routeInfo, route, signal, isLeaf, loadedModule);
+    const data = await component.getData({ params: routeInfo.params, ...signal ? { signal } : {}, context });
     const content = this.renderContent(component, { data, params: routeInfo.params, context });
     const title = component.getTitle({ data, params: routeInfo.params, context });
-    return { content, title };
+    return { content, ...title !== undefined ? { title } : {} };
   }
-  /** Render a component for error boundary/handler with minimal context. */
   renderComponent(component, data, context) {
     return this.renderContent(component, { data, params: {}, context });
   }
   static EMPTY_URL = new URL("http://error");
-  /** Try to load and render an error boundary or handler module. Returns null on failure. */
   async tryRenderErrorModule(modulePath, url, kind) {
     try {
-      const module = await this.core.loadModule(modulePath);
+      const module = await this.pipeline.loadModule(modulePath);
       const component = module.default;
       const minCtx = {
-        url: _SsrRenderer.EMPTY_URL,
+        url: SsrRenderer.EMPTY_URL,
         params: {},
         pathname: "",
-        searchParams: new URLSearchParams()
+        searchParams: new URLSearchParams
       };
       const data = await component.getData({ params: {}, context: minCtx });
       const content = this.renderComponent(component, data, minCtx);
       return { content, status: 500 };
     } catch (e) {
-      logger.error(`[${this.label}] Error ${kind} failed for ${url.pathname}`, e instanceof Error ? e : void 0);
+      this.logger.error(`[${this.label}] Error ${kind} failed for ${url.pathname}`, e instanceof Error ? e : undefined);
       return null;
     }
   }
-};
+}
 
-// dist/src/renderer/ssr/html.renderer.js
-var SsrHtmlRouter = class extends SsrRenderer {
+// dist/core/renderer/html.renderer.js
+class SsrHtmlRenderer extends SsrRenderer {
   label = "SSR HTML";
   markdownRenderer;
   markdownReady = null;
-  constructor(resolver, options = {}) {
-    super(resolver, options);
+  constructor(pipeline, options = {}) {
+    super(pipeline, options);
     this.markdownRenderer = options.markdownRenderer ?? null;
     if (this.markdownRenderer?.init) {
       this.markdownReady = this.markdownRenderer.init();
@@ -1426,9 +1127,6 @@ var SsrHtmlRouter = class extends SsrRenderer {
   stripSlots(result) {
     return result.replace(/<router-slot[^>]*><\/router-slot>/g, "");
   }
-  /**
-   * Render a single route's content.
-   */
   async renderRouteContent(routeInfo, route, isLeaf, signal) {
     if (route.modulePath === DEFAULT_ROOT_ROUTE.modulePath) {
       return { content: `<router-slot pattern="${route.pattern}"></router-slot>` };
@@ -1440,10 +1138,10 @@ var SsrHtmlRouter = class extends SsrRenderer {
     if (this.widgets) {
       content = await resolveWidgetTags(content, this.widgets, routeInfo, (name, declared) => {
         const files = this.widgetFiles[name] ?? declared;
-        return files ? this.core.loadWidgetFiles(files) : Promise.resolve({});
-      }, this.core.contextProvider);
+        return files ? this.pipeline.loadFiles(files) : Promise.resolve({});
+      }, this.pipeline.contextProvider, this.logger);
     }
-    return { content, title };
+    return { content, ...title !== undefined ? { title } : {} };
   }
   renderContent(component, args) {
     return component.renderHTML(args);
@@ -1465,14 +1163,9 @@ var SsrHtmlRouter = class extends SsrRenderer {
       <p>${escapeHtml(message)}</p>
     `;
   }
-  /** Add pattern attribute to bare <router-slot> tags. */
   attributeSlots(content, routePattern) {
     return content.replace(/<router-slot(?![^>]*\bpattern=)([^>]*)><\/router-slot>/g, `<router-slot pattern="${routePattern}"$1></router-slot>`);
   }
-  /**
-   * Expand <mark-down> tags by rendering markdown to HTML server-side.
-   * Leaves content unchanged if no markdown renderer is configured.
-   */
   async expandMarkdown(content) {
     if (!this.markdownRenderer)
       return content;
@@ -1485,13 +1178,12 @@ var SsrHtmlRouter = class extends SsrRenderer {
     const pattern = /<mark-down>([\s\S]*?)<\/mark-down>/g;
     return content.replace(pattern, (_match, escaped) => {
       const markdown = unescapeHtml(escaped);
-      const rendered = renderer.render(markdown);
-      return rendered;
+      return renderer.render(markdown);
     });
   }
-};
+}
 
-// dist/src/widget/widget.parser.js
+// dist/core/widget/widget.parser.js
 var WIDGET_PATTERN = /```widget:(?<name>[a-z][a-z0-9-]*)\n(?<params>.*?)```/gs;
 function parseWidgetBlocks(markdown) {
   const blocks = [];
@@ -1534,17 +1226,18 @@ function replaceWidgetBlocks(markdown, replacements) {
   return result;
 }
 
-// dist/src/renderer/ssr/md.renderer.js
+// dist/core/renderer/md.renderer.js
 var BARE_SLOT_BLOCK = "```router-slot\n```";
 function routerSlotBlock(pattern) {
   return `\`\`\`router-slot
 {"pattern":"${pattern}"}
 \`\`\``;
 }
-var SsrMdRouter = class extends SsrRenderer {
+
+class SsrMdRenderer extends SsrRenderer {
   label = "SSR MD";
-  constructor(resolver, options = {}) {
-    super(resolver, options);
+  constructor(pipeline, options = {}) {
+    super(pipeline, options);
   }
   injectSlot(parent, child, parentPattern) {
     return parent.replace(routerSlotBlock(parentPattern), child);
@@ -1552,9 +1245,6 @@ var SsrMdRouter = class extends SsrRenderer {
   stripSlots(result) {
     return result.replace(/```router-slot\n(?:\{[^}]*\}\n)?```/g, "").trim();
   }
-  /**
-   * Render a single route's content to Markdown.
-   */
   async renderRouteContent(routeInfo, route, isLeaf, signal) {
     if (route.modulePath === DEFAULT_ROOT_ROUTE.modulePath) {
       return { content: routerSlotBlock(route.pattern) };
@@ -1565,7 +1255,7 @@ var SsrMdRouter = class extends SsrRenderer {
     if (this.widgets) {
       content = await this.resolveWidgets(content, routeInfo);
     }
-    return { content, title };
+    return { content, ...title !== undefined ? { title } : {} };
   }
   renderContent(component, args) {
     return component.renderMarkdown(args);
@@ -1583,10 +1273,6 @@ Path: \`${url.pathname}\``;
 
 Path: \`${url.pathname}\``;
   }
-  /**
-   * Resolve fenced widget blocks in markdown content.
-   * Replaces ```widget:name blocks with rendered markdown output.
-   */
   resolveWidgets(content, routeInfo) {
     return resolveRecursively(content, parseWidgetBlocks, async (block) => {
       if (block.parseError || !block.params) {
@@ -1600,33 +1286,34 @@ Path: \`${url.pathname}\``;
         let files;
         const filePaths = this.widgetFiles[block.widgetName] ?? widget.files;
         if (filePaths) {
-          files = await this.core.loadWidgetFiles(filePaths);
+          files = await this.pipeline.loadFiles(filePaths);
         }
         const baseContext = {
           ...routeInfo,
           pathname: routeInfo.url.pathname,
           searchParams: routeInfo.url.searchParams,
-          files
+          ...files ? { files } : {}
         };
-        const context = this.core.contextProvider ? this.core.contextProvider(baseContext) : baseContext;
+        const context = this.pipeline.contextProvider ? this.pipeline.contextProvider(baseContext) : baseContext;
         const data = await widget.getData({ params: block.params, context });
         return widget.renderMarkdown({ data, params: block.params, context });
       } catch (e) {
         return widget.renderMarkdownError(e);
       }
-    }, replaceWidgetBlocks);
+    }, replaceWidgetBlocks, 0, this.logger);
   }
-};
+}
 
-// dist/src/util/md.util.js
+// dist/core/util/md.util.js
 function rewriteMdLinks(markdown, base, skipPrefixes) {
   const prefix = base + "/";
   const skip = skipPrefixes.map((p) => p.slice(1) + "/").join("|");
   const inlineRe = new RegExp(`\\]\\(\\/(?!${skip})`, "g");
   const refRe = new RegExp(`^(\\[[^\\]]+\\]:\\s+)\\/(?!${skip})`, "g");
-  const lines = markdown.split("\n");
+  const lines = markdown.split(`
+`);
   let inCodeBlock = false;
-  for (let i = 0; i < lines.length; i++) {
+  for (let i = 0;i < lines.length; i++) {
     if (lines[i].startsWith("```")) {
       inCodeBlock = !inCodeBlock;
       continue;
@@ -1636,10 +1323,239 @@ function rewriteMdLinks(markdown, base, skipPrefixes) {
     lines[i] = lines[i].replaceAll(inlineRe, `](${prefix}`);
     lines[i] = lines[i].replaceAll(refRe, `$1${prefix}`);
   }
-  return lines.join("\n");
+  return lines.join(`
+`);
+}
+
+// dist/core/server/emroute.server.js
+var DEFAULT_BASE_PATH = { html: "/html", md: "/md", app: "/app" };
+
+class Emroute {
+  runtime;
+  htmlBase;
+  mdBase;
+  appBase;
+  spa;
+  title;
+  htmlRenderer;
+  mdRenderer;
+  shell;
+  constructor(htmlRenderer, mdRenderer, shell, runtime, htmlBase, mdBase, appBase, spa, title) {
+    this.runtime = runtime;
+    this.htmlBase = htmlBase;
+    this.mdBase = mdBase;
+    this.appBase = appBase;
+    this.spa = spa;
+    this.title = title;
+    this.htmlRenderer = htmlRenderer;
+    this.mdRenderer = mdRenderer;
+    this.shell = shell;
+  }
+  static async create(config, runtime) {
+    const { spa = "root" } = config;
+    const { html: htmlBase, md: mdBase, app: appBase } = config.basePath ?? DEFAULT_BASE_PATH;
+    const manifestResponse = await runtime.query(ROUTES_MANIFEST_PATH);
+    if (manifestResponse.status === 404 && !config.routeTree) {
+      throw new Error(`[emroute] ${ROUTES_MANIFEST_PATH} not found in runtime. ` + "Provide routeTree in config or ensure the runtime produces it.");
+    }
+    if (config.routeTree && manifestResponse.status === 404) {
+      await runtime.command(ROUTES_MANIFEST_PATH, {
+        body: JSON.stringify(config.routeTree)
+      });
+    }
+    const pipeline = new Pipeline({
+      runtime,
+      ...config.extendContext ? { contextProvider: config.extendContext } : {},
+      ...config.moduleLoaders ? { moduleLoaders: config.moduleLoaders } : {}
+    });
+    let widgets = config.widgets;
+    let widgetFiles = {};
+    const widgetsResponse = await runtime.query(WIDGETS_MANIFEST_PATH);
+    if (widgetsResponse.status !== 404) {
+      const entries = await widgetsResponse.json();
+      if (config.widgets) {
+        widgets = config.widgets;
+        for (const entry of entries) {
+          if (entry.files)
+            widgetFiles[entry.name] = entry.files;
+        }
+      } else {
+        const imported = await Emroute.importWidgets(entries, runtime);
+        widgets = imported.registry;
+        widgetFiles = imported.widgetFiles;
+      }
+    }
+    let ssrHtmlRenderer = null;
+    let ssrMdRenderer = null;
+    if (spa !== "only") {
+      ssrHtmlRenderer = new SsrHtmlRenderer(pipeline, {
+        ...config.markdownRenderer ? { markdownRenderer: config.markdownRenderer } : {},
+        ...widgets ? { widgets } : {},
+        widgetFiles
+      });
+      ssrMdRenderer = new SsrMdRenderer(pipeline, {
+        ...widgets ? { widgets } : {},
+        widgetFiles
+      });
+    }
+    const title = config.title ?? "emroute";
+    const shellBase = spa === "root" || spa === "only" ? appBase : htmlBase;
+    let shell = await Emroute.resolveShell(runtime, title, shellBase);
+    if ((await runtime.query("/main.css")).status !== 404) {
+      shell = shell.replace("</head>", `  <link rel="stylesheet" href="/main.css">
+</head>`);
+    }
+    return new Emroute(ssrHtmlRenderer, ssrMdRenderer, shell, runtime, htmlBase, mdBase, appBase, spa, title);
+  }
+  async handleRequest(req) {
+    const url = new URL(req.url);
+    const pathname = url.pathname;
+    const mdPrefix = this.mdBase + "/";
+    const htmlPrefix = this.htmlBase + "/";
+    const appPrefix = this.appBase + "/";
+    if (this.mdRenderer && (pathname.startsWith(mdPrefix) || pathname === this.mdBase)) {
+      const routePath = pathname === this.mdBase ? "/" : pathname.slice(this.mdBase.length);
+      if (routePath.length > 1 && routePath.endsWith("/")) {
+        const canonical = this.mdBase + routePath.slice(0, -1) + (url.search || "");
+        return Response.redirect(new URL(canonical, url.origin), 301);
+      }
+      try {
+        const routeUrl = new URL(routePath + url.search, url.origin);
+        const { content, status, redirect } = await this.mdRenderer.render(routeUrl, req.signal);
+        if (redirect) {
+          const target = redirect.startsWith("/") ? this.mdBase + redirect : redirect;
+          return Response.redirect(new URL(target, url.origin), status);
+        }
+        return new Response(rewriteMdLinks(content, this.mdBase, [this.mdBase, this.htmlBase]), {
+          status,
+          headers: { "Content-Type": "text/markdown; charset=utf-8; variant=CommonMark" }
+        });
+      } catch (e) {
+        console.error(`[emroute] Error rendering ${pathname}:`, e);
+        return new Response("Internal Server Error", { status: 500 });
+      }
+    }
+    if (this.htmlRenderer && (pathname.startsWith(htmlPrefix) || pathname === this.htmlBase)) {
+      const routePath = pathname === this.htmlBase ? "/" : pathname.slice(this.htmlBase.length);
+      if (routePath.length > 1 && routePath.endsWith("/")) {
+        const canonical = this.htmlBase + routePath.slice(0, -1) + (url.search || "");
+        return Response.redirect(new URL(canonical, url.origin), 301);
+      }
+      try {
+        const routeUrl = new URL(routePath + url.search, url.origin);
+        const result = await this.htmlRenderer.render(routeUrl, req.signal);
+        if (result.redirect) {
+          const target = result.redirect.startsWith("/") ? this.htmlBase + result.redirect : result.redirect;
+          return Response.redirect(new URL(target, url.origin), result.status);
+        }
+        const ssrTitle = result.title ?? this.title;
+        const html = Emroute.injectSsrContent(this.shell, result.content, ssrTitle, pathname);
+        return new Response(html, {
+          status: result.status,
+          headers: { "Content-Type": "text/html; charset=utf-8" }
+        });
+      } catch (e) {
+        console.error(`[emroute] Error rendering ${pathname}:`, e);
+        return new Response("Internal Server Error", { status: 500 });
+      }
+    }
+    if (pathname.startsWith(appPrefix) || pathname === this.appBase) {
+      return new Response(this.shell, {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    }
+    if (pathname.startsWith(htmlPrefix) || pathname === this.htmlBase || pathname.startsWith(mdPrefix) || pathname === this.mdBase) {
+      return new Response(this.shell, {
+        status: 200,
+        headers: { "Content-Type": "text/html; charset=utf-8" }
+      });
+    }
+    const lastSegment = pathname.split("/").pop() ?? "";
+    if (lastSegment.includes(".")) {
+      const fileResponse = await this.runtime.handle(pathname);
+      if (fileResponse.status === 200)
+        return fileResponse;
+      return null;
+    }
+    const base = this.spa === "root" || this.spa === "only" ? this.appBase : this.htmlBase;
+    const bare = pathname === "/" ? "" : pathname.slice(1).replace(/\/$/, "");
+    return Response.redirect(new URL(`${base}/${bare}`, url.origin), 302);
+  }
+  static extractWidgetExport(mod) {
+    for (const value of Object.values(mod)) {
+      if (!value)
+        continue;
+      if (typeof value === "object" && "getData" in value) {
+        return value;
+      }
+      if (typeof value === "function" && value.prototype?.getData) {
+        return new value;
+      }
+    }
+    return null;
+  }
+  static async importWidgets(entries, runtime) {
+    const registry = new WidgetRegistry;
+    const widgetFiles = {};
+    for (const entry of entries) {
+      try {
+        const runtimePath = entry.modulePath.startsWith("/") ? entry.modulePath : `/${entry.modulePath}`;
+        const mod = await runtime.loadModule(runtimePath);
+        const instance = Emroute.extractWidgetExport(mod);
+        if (!instance)
+          continue;
+        registry.add(instance);
+        const inlined = mod.__files;
+        if (inlined && typeof inlined === "object") {
+          widgetFiles[entry.name] = inlined;
+        } else if (entry.files) {
+          widgetFiles[entry.name] = entry.files;
+        }
+      } catch (e) {
+        console.error(`[emroute] Failed to load widget ${entry.modulePath}:`, e);
+        if (entry.files)
+          widgetFiles[entry.name] = entry.files;
+      }
+    }
+    return { registry, widgetFiles };
+  }
+  static buildHtmlShell(title, htmlBase) {
+    const baseTag = htmlBase ? `
+  <base href="${escapeHtml(htmlBase)}/">` : "";
+    return `<!DOCTYPE html>
+<html>
+<head>${baseTag}
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${escapeHtml(title)}</title>
+  <style>@view-transition { navigation: auto; } router-slot { display: contents; }</style>
+</head>
+<body>
+  <router-slot></router-slot>
+</body>
+</html>`;
+  }
+  static injectSsrContent(html, content, title, ssrRoute) {
+    const slotPattern = /<router-slot\b[^>]*>.*?<\/router-slot>/s;
+    if (!slotPattern.test(html))
+      return html;
+    const ssrAttr = ssrRoute ? ` data-ssr-route="${ssrRoute}"` : "";
+    html = html.replace(slotPattern, `<router-slot${ssrAttr}>${content}</router-slot>`);
+    if (title) {
+      html = html.replace(/<title>[^<]*<\/title>/, `<title>${escapeHtml(title)}</title>`);
+    }
+    return html;
+  }
+  static async resolveShell(runtime, title, htmlBase) {
+    const response = await runtime.query("/index.html");
+    if (response.status !== 404)
+      return await response.text();
+    return Emroute.buildHtmlShell(title, htmlBase);
+  }
 }
 
-// dist/src/route/route-tree.util.js
+// dist/core/util/route-tree.util.js
 function resolveTargetNode(node, name, isRoot) {
   if (name === "index") {
     if (isRoot)
@@ -1658,34 +1574,81 @@ function resolveTargetNode(node, name, isRoot) {
 }
 
 // dist/runtime/abstract.runtime.js
+var CONTENT_TYPES = new Map([
+  [".html", "text/html; charset=utf-8"],
+  [".css", "text/css; charset=utf-8"],
+  [".js", "application/javascript; charset=utf-8"],
+  [".mjs", "application/javascript; charset=utf-8"],
+  [".ts", "text/typescript; charset=utf-8"],
+  [".json", "application/json; charset=utf-8"],
+  [".md", "text/plain; charset=utf-8"],
+  [".txt", "text/plain; charset=utf-8"],
+  [".wasm", "application/wasm"],
+  [".map", "application/json; charset=utf-8"],
+  [".png", "image/png"],
+  [".jpg", "image/jpeg"],
+  [".jpeg", "image/jpeg"],
+  [".gif", "image/gif"],
+  [".svg", "image/svg+xml"],
+  [".ico", "image/x-icon"],
+  [".webp", "image/webp"],
+  [".avif", "image/avif"],
+  [".woff", "font/woff"],
+  [".woff2", "font/woff2"],
+  [".ttf", "font/ttf"]
+]);
 var DEFAULT_ROUTES_DIR = "/routes";
 var DEFAULT_WIDGETS_DIR = "/widgets";
-var ROUTES_MANIFEST_PATH = "/routes.manifest.json";
-var WIDGETS_MANIFEST_PATH = "/widgets.manifest.json";
-var Runtime = class {
+var DEFAULT_ELEMENTS_DIR = "/elements";
+class Runtime {
   config;
   constructor(config = {}) {
     this.config = config;
     this.config = config;
   }
-  /** Write. Defaults to PUT; pass `{ method: "DELETE" }` etc. to override. */
   command(resource, options) {
     const path = typeof resource === "string" ? resource : new URL(resource instanceof Request ? resource.url : resource.toString()).pathname;
-    const result = this.handle(resource, { method: "PUT", ...options });
+    const method = options?.method ?? "PUT";
+    const isDelete = method === "DELETE";
+    const result = this.handle(resource, { method, ...options });
     const routesDir = this.config.routesDir ?? DEFAULT_ROUTES_DIR;
+    const widgetsDir = this.config.widgetsDir ?? DEFAULT_WIDGETS_DIR;
+    const elementsDir = this.config.elementsDir ?? DEFAULT_ELEMENTS_DIR;
     if (path.startsWith(routesDir + "/")) {
       return result.then(async (res) => {
-        await this.mergeRouteIntoManifest(path, routesDir);
+        if (isDelete) {
+          await this.pruneRouteFromManifest(path, routesDir);
+        } else {
+          await this.mergeRouteIntoManifest(path, routesDir);
+          await this.retranspileIfNeeded(path, routesDir, "route");
+        }
+        return res;
+      });
+    }
+    if (path.startsWith(widgetsDir + "/")) {
+      return result.then(async (res) => {
+        if (isDelete) {
+          await this.pruneWidgetFromManifest(path, widgetsDir);
+        } else {
+          await this.mergeWidgetIntoManifest(path, widgetsDir);
+          await this.retranspileIfNeeded(path, widgetsDir, "widget");
+        }
+        return res;
+      });
+    }
+    if (path.startsWith(elementsDir + "/")) {
+      return result.then(async (res) => {
+        if (isDelete) {
+          await this.pruneElementFromManifest(path, elementsDir);
+        } else {
+          await this.mergeElementIntoManifest(path, elementsDir);
+          await this.retranspileIfNeeded(path, elementsDir, "element");
+        }
         return res;
       });
     }
     return result;
   }
-  /**
-   * Parse a single route file path and merge it into the stored manifest.
-   * Avoids a full directory rescan — just reads the current manifest,
-   * inserts the new entry, and writes it back.
-   */
   async mergeRouteIntoManifest(filePath, routesDir) {
     const relativePath = filePath.slice(routesDir.length + 1);
     const parts = relativePath.split("/");
@@ -1694,64 +1657,336 @@ var Runtime = class {
     const match = filename.match(/^(.+?)\.(page|error|redirect)\.(ts|js|html|md|css)$/);
     if (!match)
       return;
-    const [, name, kind, ext] = match;
-    const response = await this.handle(ROUTES_MANIFEST_PATH);
-    const tree = response.status === 404 ? {} : await response.json();
-    let node = tree;
-    for (const dir of dirSegments) {
-      if (dir.startsWith("[") && dir.endsWith("]")) {
-        const param = dir.slice(1, -1);
-        node.dynamic ??= { param, child: {} };
-        node = node.dynamic.child;
+    const [, name, kind, ext] = match;
+    const response = await this.handle(ROUTES_MANIFEST_PATH);
+    const tree = response.status === 404 ? {} : await response.json();
+    let node = tree;
+    for (const dir of dirSegments) {
+      if (dir.startsWith("[") && dir.endsWith("]")) {
+        const param = dir.slice(1, -1);
+        node.dynamic ??= { param, child: {} };
+        node = node.dynamic.child;
+      } else {
+        node.children ??= {};
+        node.children[dir] ??= {};
+        node = node.children[dir];
+      }
+    }
+    if (kind === "error") {
+      node.errorBoundary = filePath;
+    } else {
+      const target = resolveTargetNode(node, name, dirSegments.length === 0);
+      if (kind === "redirect") {
+        target.redirect = filePath;
+      } else {
+        target.files ??= {};
+        target.files[ext] = filePath;
+      }
+    }
+    this.routesManifestCache = null;
+    await this.handle(ROUTES_MANIFEST_PATH, {
+      method: "PUT",
+      body: JSON.stringify(tree)
+    });
+  }
+  async pruneRouteFromManifest(filePath, routesDir) {
+    const relativePath = filePath.slice(routesDir.length + 1);
+    const parts = relativePath.split("/");
+    const filename = parts[parts.length - 1];
+    const dirSegments = parts.slice(0, -1);
+    const match = filename.match(/^(.+?)\.(page|error|redirect)\.(ts|js|html|md|css)$/);
+    if (!match)
+      return;
+    const [, name, kind, ext] = match;
+    const response = await this.handle(ROUTES_MANIFEST_PATH);
+    if (response.status === 404)
+      return;
+    const tree = await response.json();
+    const ancestors = [];
+    let node = tree;
+    for (const dir of dirSegments) {
+      if (dir.startsWith("[") && dir.endsWith("]")) {
+        if (!node.dynamic)
+          return;
+        ancestors.push({ node, key: dir, via: "dynamic" });
+        node = node.dynamic.child;
+      } else {
+        if (!node.children?.[dir])
+          return;
+        ancestors.push({ node, key: dir, via: "children" });
+        node = node.children[dir];
+      }
+    }
+    if (kind === "error") {
+      if (node.errorBoundary === filePath)
+        delete node.errorBoundary;
+    } else {
+      const isRoot = dirSegments.length === 0;
+      const target = this.findTargetNode(node, name, isRoot);
+      if (!target)
+        return;
+      if (kind === "redirect") {
+        if (target.redirect === filePath)
+          delete target.redirect;
+      } else {
+        if (target.files?.[ext] === filePath) {
+          delete target.files[ext];
+          if (Object.keys(target.files).length === 0)
+            delete target.files;
+        }
+      }
+      if (target !== node && this.isEmptyNode(target)) {
+        if (name === "index" && !isRoot) {
+          delete node.wildcard;
+        } else if (name.startsWith("[") && name.endsWith("]")) {
+          delete node.dynamic;
+        } else if (node.children) {
+          delete node.children[name];
+          if (Object.keys(node.children).length === 0)
+            delete node.children;
+        }
+      }
+    }
+    for (let i = ancestors.length - 1;i >= 0; i--) {
+      const { node: parent, key, via } = ancestors[i];
+      const child = via === "dynamic" ? parent.dynamic?.child : parent.children?.[key];
+      if (child && this.isEmptyNode(child)) {
+        if (via === "dynamic") {
+          delete parent.dynamic;
+        } else if (parent.children) {
+          delete parent.children[key];
+          if (Object.keys(parent.children).length === 0)
+            delete parent.children;
+        }
+      }
+    }
+    this.routesManifestCache = null;
+    await this.handle(ROUTES_MANIFEST_PATH, {
+      method: "PUT",
+      body: JSON.stringify(tree)
+    });
+  }
+  findTargetNode(node, name, isRoot) {
+    if (name === "index") {
+      return isRoot ? node : node.wildcard?.child ?? null;
+    }
+    if (name.startsWith("[") && name.endsWith("]")) {
+      return node.dynamic?.child ?? null;
+    }
+    return node.children?.[name] ?? null;
+  }
+  isEmptyNode(node) {
+    return !node.files && !node.errorBoundary && !node.redirect && !node.children && !node.dynamic && !node.wildcard;
+  }
+  async pruneWidgetFromManifest(filePath, widgetsDir) {
+    const relativePath = filePath.slice(widgetsDir.length + 1);
+    const parts = relativePath.split("/");
+    if (parts.length !== 2)
+      return;
+    const [dirName, filename] = parts;
+    const match = filename.match(/^(.+?)\.widget\.(ts|js|html|md|css)$/);
+    if (!match)
+      return;
+    const [, name, ext] = match;
+    if (name !== dirName)
+      return;
+    const response = await this.handle(WIDGETS_MANIFEST_PATH);
+    if (response.status === 404)
+      return;
+    const entries = await response.json();
+    if (ext === "ts" || ext === "js") {
+      const idx = entries.findIndex((e) => e.name === name);
+      if (idx === -1)
+        return;
+      entries.splice(idx, 1);
+    } else {
+      const entry = entries.find((e) => e.name === name);
+      if (!entry?.files)
+        return;
+      delete entry.files[ext];
+      if (Object.keys(entry.files).length === 0)
+        delete entry.files;
+    }
+    this.widgetsManifestCache = null;
+    await this.handle(WIDGETS_MANIFEST_PATH, {
+      method: "PUT",
+      body: JSON.stringify(entries)
+    });
+  }
+  async pruneElementFromManifest(filePath, elementsDir) {
+    const relativePath = filePath.slice(elementsDir.length + 1);
+    const parts = relativePath.split("/");
+    if (parts.length !== 2)
+      return;
+    const [dirName, filename] = parts;
+    const match = filename.match(/^(.+?)\.element\.(ts|js)$/);
+    if (!match)
+      return;
+    const [, name] = match;
+    if (name !== dirName)
+      return;
+    const response = await this.handle(ELEMENTS_MANIFEST_PATH);
+    if (response.status === 404)
+      return;
+    const entries = await response.json();
+    const idx = entries.findIndex((e) => e.name === name);
+    if (idx === -1)
+      return;
+    entries.splice(idx, 1);
+    this.elementsManifestCache = null;
+    await this.handle(ELEMENTS_MANIFEST_PATH, {
+      method: "PUT",
+      body: JSON.stringify(entries)
+    });
+  }
+  async retranspileIfNeeded(filePath, dir, kind) {
+    if (filePath.endsWith(".js"))
+      return;
+    const relativePath = filePath.slice(dir.length + 1);
+    const parts = relativePath.split("/");
+    const filename = parts[parts.length - 1];
+    let jsPath;
+    if (kind === "route") {
+      const match = filename.match(/^(.+?)\.(page)\.(ts|html|md|css)$/);
+      if (!match)
+        return;
+      const [, name] = match;
+      jsPath = `${dir}/${parts.slice(0, -1).join("/")}${parts.length > 1 ? "/" : ""}${name}.page.js`;
+    } else if (kind === "widget") {
+      const match = filename.match(/^(.+?)\.(widget)\.(ts|html|md|css)$/);
+      if (!match)
+        return;
+      const [, name] = match;
+      jsPath = `${dir}/${name}/${name}.widget.js`;
+    } else {
+      const match = filename.match(/^(.+?)\.(element)\.ts$/);
+      if (!match)
+        return;
+      const [, name] = match;
+      jsPath = `${dir}/${name}/${name}.element.js`;
+    }
+    const jsResponse = await this.handle(jsPath);
+    if (jsResponse.status === 404)
+      return;
+    const tsPath = jsPath.replace(/\.js$/, ".ts");
+    let tsSource;
+    try {
+      tsSource = await this.query(tsPath, { as: "text" });
+    } catch {
+      return;
+    }
+    const companionExts = kind === "element" ? [] : ["html", "md", "css"];
+    const files = {};
+    for (const ext of companionExts) {
+      const companionPath = tsPath.replace(/\.ts$/, `.${ext}`);
+      try {
+        files[ext] = await this.query(companionPath, { as: "text" });
+      } catch {}
+    }
+    let jsCode;
+    try {
+      jsCode = await this.transpile(tsSource);
+    } catch {
+      return;
+    }
+    if (Object.keys(files).length > 0) {
+      const entries = Object.entries(files).map(([k, v]) => `${k}: \`${v.replace(/\\/g, "\\\\").replace(/`/g, "\\`").replace(/\$/g, "\\$")}\``).join(", ");
+      jsCode += `
+export const __files = { ${entries} };
+`;
+    }
+    await this.handle(jsPath, { method: "PUT", body: jsCode });
+  }
+  loadModule(_path) {
+    throw new Error(`loadModule not implemented for ${this.constructor.name}`);
+  }
+  transpile(_source) {
+    throw new Error(`transpile not implemented for ${this.constructor.name}`);
+  }
+  async mergeWidgetIntoManifest(filePath, widgetsDir) {
+    const relativePath = filePath.slice(widgetsDir.length + 1);
+    const parts = relativePath.split("/");
+    if (parts.length !== 2)
+      return;
+    const [dirName, filename] = parts;
+    const match = filename.match(/^(.+?)\.widget\.(ts|js|html|md|css)$/);
+    if (!match)
+      return;
+    const [, name, ext] = match;
+    if (name !== dirName)
+      return;
+    const response = await this.handle(WIDGETS_MANIFEST_PATH);
+    const entries = response.status === 404 ? [] : await response.json();
+    const prefix = widgetsDir.replace(/^\//, "");
+    if (ext === "ts" || ext === "js") {
+      let entry = entries.find((e) => e.name === name);
+      if (!entry) {
+        entry = {
+          name,
+          modulePath: `${prefix}/${name}/${filename}`,
+          tagName: `widget-${name}`
+        };
+        entries.push(entry);
+        entries.sort((a, b) => a.name.localeCompare(b.name));
       } else {
-        node.children ??= {};
-        node.children[dir] ??= {};
-        node = node.children[dir];
+        entry.modulePath = `${prefix}/${name}/${filename}`;
       }
-    }
-    if (kind === "error") {
-      node.errorBoundary = filePath;
     } else {
-      const target = resolveTargetNode(node, name, dirSegments.length === 0);
-      if (kind === "redirect") {
-        target.redirect = filePath;
-      } else {
-        target.files ??= {};
-        target.files[ext] = filePath;
-      }
+      const entry = entries.find((e) => e.name === name);
+      if (!entry)
+        return;
+      entry.files ??= {};
+      entry.files[ext] = `${prefix}/${name}/${filename}`;
     }
-    this.routesManifestCache = null;
-    await this.handle(ROUTES_MANIFEST_PATH, {
+    this.widgetsManifestCache = null;
+    await this.handle(WIDGETS_MANIFEST_PATH, {
       method: "PUT",
-      body: JSON.stringify(tree)
+      body: JSON.stringify(entries)
     });
   }
-  /**
-   * Dynamically import a module from this runtime's storage.
-   * Used by the server for SSR imports of `.page.ts` and `.widget.ts` files.
-   */
-  loadModule(_path) {
-    throw new Error(`loadModule not implemented for ${this.constructor.name}`);
-  }
-  /**
-   * Transpile TypeScript source to JavaScript.
-   * Used by the build step to produce browser-loadable .js modules.
-   */
-  transpile(_source) {
-    throw new Error(`transpile not implemented for ${this.constructor.name}`);
+  async mergeElementIntoManifest(filePath, elementsDir) {
+    const relativePath = filePath.slice(elementsDir.length + 1);
+    const parts = relativePath.split("/");
+    if (parts.length !== 2)
+      return;
+    const [dirName, filename] = parts;
+    const match = filename.match(/^(.+?)\.element\.(ts|js)$/);
+    if (!match)
+      return;
+    const [, name] = match;
+    if (name !== dirName)
+      return;
+    if (!name.includes("-"))
+      return;
+    const response = await this.handle(ELEMENTS_MANIFEST_PATH);
+    const entries = response.status === 404 ? [] : await response.json();
+    const prefix = elementsDir.replace(/^\//, "");
+    let entry = entries.find((e) => e.name === name);
+    if (!entry) {
+      entry = {
+        name,
+        modulePath: `${prefix}/${name}/${filename}`,
+        tagName: name
+      };
+      entries.push(entry);
+      entries.sort((a, b) => a.name.localeCompare(b.name));
+    } else {
+      entry.modulePath = `${prefix}/${name}/${filename}`;
+    }
+    this.elementsManifestCache = null;
+    await this.handle(ELEMENTS_MANIFEST_PATH, {
+      method: "PUT",
+      body: JSON.stringify(entries)
+    });
   }
-  // ── Manifest resolution ─────────────────────────────────────────────
   routesManifestCache = null;
   widgetsManifestCache = null;
-  /** Clear cached manifests so the next query triggers a fresh scan. */
+  elementsManifestCache = null;
   invalidateManifests() {
     this.routesManifestCache = null;
     this.widgetsManifestCache = null;
+    this.elementsManifestCache = null;
   }
-  /**
-   * Resolve the routes manifest. Called when the concrete runtime returns
-   * 404 for ROUTES_MANIFEST_PATH. Scans `config.routesDir` (or default).
-   */
   async resolveRoutesManifest() {
     if (this.routesManifestCache)
       return this.routesManifestCache.clone();
@@ -1764,10 +1999,6 @@ var Runtime = class {
     this.routesManifestCache = Response.json(tree);
     return this.routesManifestCache.clone();
   }
-  /**
-   * Resolve the widgets manifest. Called when the concrete runtime returns
-   * 404 for WIDGETS_MANIFEST_PATH. Scans `config.widgetsDir` (or default).
-   */
   async resolveWidgetsManifest() {
     if (this.widgetsManifestCache)
       return this.widgetsManifestCache.clone();
@@ -1780,8 +2011,19 @@ var Runtime = class {
     this.widgetsManifestCache = Response.json(entries);
     return this.widgetsManifestCache.clone();
   }
-  // ── Scanning ──────────────────────────────────────────────────────────
-  async *walkDirectory(dir) {
+  async resolveElementsManifest() {
+    if (this.elementsManifestCache)
+      return this.elementsManifestCache.clone();
+    const elementsDir = this.config.elementsDir ?? DEFAULT_ELEMENTS_DIR;
+    const dirResponse = await this.query(elementsDir + "/");
+    if (dirResponse.status === 404) {
+      return new Response("Not Found", { status: 404 });
+    }
+    const entries = await this.scanElements(elementsDir, elementsDir.replace(/^\//, ""));
+    this.elementsManifestCache = Response.json(entries);
+    return this.elementsManifestCache.clone();
+  }
+  async* walkDirectory(dir) {
     const trailingDir = dir.endsWith("/") ? dir : dir + "/";
     const response = await this.query(trailingDir);
     const entries = await response.json();
@@ -1794,10 +2036,6 @@ var Runtime = class {
       }
     }
   }
-  /**
-   * Scan a routes directory and build a RouteNode tree.
-   * The filesystem structure maps directly to the tree — no intermediate array.
-   */
   async scanRoutes(routesDir) {
     const root = {};
     const allFiles = [];
@@ -1880,271 +2118,41 @@ var Runtime = class {
     entries.sort((a, b) => a.name.localeCompare(b.name));
     return entries;
   }
-};
-
-// dist/server/emroute.server.js
-function createModuleLoaders(tree, runtime) {
-  const paths = /* @__PURE__ */ new Set();
-  function walk(node) {
-    const modulePath = node.files?.ts ?? node.files?.js;
-    if (modulePath)
-      paths.add(modulePath);
-    if (node.redirect)
-      paths.add(node.redirect);
-    if (node.errorBoundary)
-      paths.add(node.errorBoundary);
-    if (node.children) {
-      for (const child of Object.values(node.children))
-        walk(child);
-    }
-    if (node.dynamic)
-      walk(node.dynamic.child);
-    if (node.wildcard)
-      walk(node.wildcard.child);
-  }
-  walk(tree);
-  const loaders = {};
-  for (const path of paths) {
-    loaders[path] = () => runtime.loadModule(path);
-  }
-  return loaders;
-}
-function extractWidgetExport(mod) {
-  for (const value of Object.values(mod)) {
-    if (!value)
-      continue;
-    if (typeof value === "object" && "getData" in value) {
-      return value;
-    }
-    if (typeof value === "function" && value.prototype?.getData) {
-      return new value();
-    }
-  }
-  return null;
-}
-async function importWidgets(entries, runtime, manual) {
-  const registry = new WidgetRegistry();
-  const widgetFiles = {};
-  for (const entry of entries) {
-    try {
-      const runtimePath = entry.modulePath.startsWith("/") ? entry.modulePath : `/${entry.modulePath}`;
-      const mod = await runtime.loadModule(runtimePath);
-      const instance = extractWidgetExport(mod);
-      if (!instance)
+  async scanElements(elementsDir, pathPrefix) {
+    const entries = [];
+    const trailingDir = elementsDir.endsWith("/") ? elementsDir : elementsDir + "/";
+    const response = await this.query(trailingDir);
+    const listing = await response.json();
+    for (const item of listing) {
+      if (!item.endsWith("/"))
+        continue;
+      const name = item.slice(0, -1);
+      if (!name.includes("-")) {
+        console.warn(`[emroute] Skipping element "${name}": custom element names must contain a hyphen (e.g. "my-element")`);
         continue;
-      registry.add(instance);
-      const inlined = mod.__files;
-      if (inlined && typeof inlined === "object") {
-        widgetFiles[entry.name] = inlined;
-      } else if (entry.files) {
-        widgetFiles[entry.name] = entry.files;
-      }
-    } catch (e) {
-      console.error(`[emroute] Failed to load widget ${entry.modulePath}:`, e);
-      if (entry.files)
-        widgetFiles[entry.name] = entry.files;
-    }
-  }
-  if (manual) {
-    for (const widget of manual) {
-      registry.add(widget);
-    }
-  }
-  return { registry, widgetFiles };
-}
-function buildHtmlShell(title, htmlBase) {
-  const baseTag = htmlBase ? `
-  <base href="${escapeHtml(htmlBase)}/">` : "";
-  return `<!DOCTYPE html>
-<html>
-<head>${baseTag}
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>${escapeHtml(title)}</title>
-  <style>@view-transition { navigation: auto; } router-slot { display: contents; }</style>
-</head>
-<body>
-  <router-slot></router-slot>
-</body>
-</html>`;
-}
-function injectSsrContent(html, content, title, ssrRoute) {
-  const slotPattern = /<router-slot\b[^>]*>.*?<\/router-slot>/s;
-  if (!slotPattern.test(html))
-    return html;
-  const ssrAttr = ssrRoute ? ` data-ssr-route="${ssrRoute}"` : "";
-  html = html.replace(slotPattern, `<router-slot${ssrAttr}>${content}</router-slot>`);
-  if (title) {
-    html = html.replace(/<title>[^<]*<\/title>/, `<title>${escapeHtml(title)}</title>`);
-  }
-  return html;
-}
-async function resolveShell(runtime, title, htmlBase) {
-  const response = await runtime.query("/index.html");
-  if (response.status !== 404)
-    return await response.text();
-  return buildHtmlShell(title, htmlBase);
-}
-async function createEmrouteServer(config, runtime) {
-  const { spa = "root" } = config;
-  const { html: htmlBase, md: mdBase, app: appBase } = config.basePath ?? DEFAULT_BASE_PATH;
-  let routeTree;
-  if (config.routeTree) {
-    routeTree = config.routeTree;
-  } else {
-    const manifestResponse = await runtime.query(ROUTES_MANIFEST_PATH);
-    if (manifestResponse.status === 404) {
-      throw new Error(`[emroute] ${ROUTES_MANIFEST_PATH} not found in runtime. Provide routeTree in config or ensure the runtime produces it.`);
-    }
-    routeTree = await manifestResponse.json();
-  }
-  const moduleLoaders = config.moduleLoaders ?? createModuleLoaders(routeTree, runtime);
-  const resolver = new RouteTrie(routeTree);
-  let widgets = config.widgets;
-  let widgetFiles = {};
-  let discoveredWidgetEntries = [];
-  const widgetsResponse = await runtime.query(WIDGETS_MANIFEST_PATH);
-  if (widgetsResponse.status !== 404) {
-    discoveredWidgetEntries = await widgetsResponse.json();
-    if (config.widgets) {
-      widgets = config.widgets;
-      for (const entry of discoveredWidgetEntries) {
-        if (entry.files)
-          widgetFiles[entry.name] = entry.files;
-      }
-    } else {
-      const imported = await importWidgets(discoveredWidgetEntries, runtime);
-      widgets = imported.registry;
-      widgetFiles = imported.widgetFiles;
-    }
-  }
-  let ssrHtmlRouter = null;
-  let ssrMdRouter = null;
-  function buildSsrRouters() {
-    if (spa === "only") {
-      ssrHtmlRouter = null;
-      ssrMdRouter = null;
-      return;
-    }
-    ssrHtmlRouter = new SsrHtmlRouter(resolver, {
-      fileReader: (path) => runtime.query(path, { as: "text" }),
-      moduleLoaders,
-      markdownRenderer: config.markdownRenderer,
-      extendContext: config.extendContext,
-      widgets,
-      widgetFiles
-    });
-    ssrMdRouter = new SsrMdRouter(resolver, {
-      fileReader: (path) => runtime.query(path, { as: "text" }),
-      moduleLoaders,
-      extendContext: config.extendContext,
-      widgets,
-      widgetFiles
-    });
-  }
-  buildSsrRouters();
-  const title = config.title ?? "emroute";
-  let shell = await resolveShell(runtime, title, htmlBase);
-  if ((await runtime.query("/main.css")).status !== 404) {
-    shell = shell.replace("</head>", '  <link rel="stylesheet" href="/main.css">\n</head>');
-  }
-  async function handleRequest(req) {
-    const url = new URL(req.url);
-    const pathname = url.pathname;
-    const mdPrefix = mdBase + "/";
-    const htmlPrefix = htmlBase + "/";
-    const appPrefix = appBase + "/";
-    if (ssrMdRouter && (pathname.startsWith(mdPrefix) || pathname === mdBase)) {
-      const routePath = pathname === mdBase ? "/" : pathname.slice(mdBase.length);
-      if (routePath.length > 1 && routePath.endsWith("/")) {
-        const canonical = mdBase + routePath.slice(0, -1) + (url.search || "");
-        return Response.redirect(new URL(canonical, url.origin), 301);
-      }
-      try {
-        const routeUrl = new URL(routePath + url.search, url.origin);
-        const { content, status, redirect } = await ssrMdRouter.render(routeUrl, req.signal);
-        if (redirect) {
-          const target = redirect.startsWith("/") ? mdBase + redirect : redirect;
-          return Response.redirect(new URL(target, url.origin), status);
-        }
-        return new Response(rewriteMdLinks(content, mdBase, [mdBase, htmlBase]), {
-          status,
-          headers: { "Content-Type": "text/markdown; charset=utf-8; variant=CommonMark" }
-        });
-      } catch (e) {
-        console.error(`[emroute] Error rendering ${pathname}:`, e);
-        return new Response("Internal Server Error", { status: 500 });
-      }
-    }
-    if (ssrHtmlRouter && (pathname.startsWith(htmlPrefix) || pathname === htmlBase)) {
-      const routePath = pathname === htmlBase ? "/" : pathname.slice(htmlBase.length);
-      if (routePath.length > 1 && routePath.endsWith("/")) {
-        const canonical = htmlBase + routePath.slice(0, -1) + (url.search || "");
-        return Response.redirect(new URL(canonical, url.origin), 301);
       }
-      try {
-        const routeUrl = new URL(routePath + url.search, url.origin);
-        const result = await ssrHtmlRouter.render(routeUrl, req.signal);
-        if (result.redirect) {
-          const target = result.redirect.startsWith("/") ? htmlBase + result.redirect : result.redirect;
-          return Response.redirect(new URL(target, url.origin), result.status);
-        }
-        const ssrTitle = result.title ?? title;
-        const html = injectSsrContent(shell, result.content, ssrTitle, pathname);
-        return new Response(html, {
-          status: result.status,
-          headers: { "Content-Type": "text/html; charset=utf-8" }
-        });
-      } catch (e) {
-        console.error(`[emroute] Error rendering ${pathname}:`, e);
-        return new Response("Internal Server Error", { status: 500 });
+      let moduleFile = `${name}.element.ts`;
+      let modulePath = `${trailingDir}${name}/${moduleFile}`;
+      if ((await this.query(modulePath)).status === 404) {
+        moduleFile = `${name}.element.js`;
+        modulePath = `${trailingDir}${name}/${moduleFile}`;
+        if ((await this.query(modulePath)).status === 404)
+          continue;
       }
-    }
-    if (pathname.startsWith(appPrefix) || pathname === appBase) {
-      return new Response(shell, {
-        status: 200,
-        headers: { "Content-Type": "text/html; charset=utf-8" }
-      });
-    }
-    if (pathname.startsWith(htmlPrefix) || pathname === htmlBase || pathname.startsWith(mdPrefix) || pathname === mdBase) {
-      return new Response(shell, {
-        status: 200,
-        headers: { "Content-Type": "text/html; charset=utf-8" }
+      const prefix = pathPrefix ? `${pathPrefix}/` : "";
+      entries.push({
+        name,
+        modulePath: `${prefix}${name}/${moduleFile}`,
+        tagName: name
       });
     }
-    const lastSegment = pathname.split("/").pop() ?? "";
-    if (lastSegment.includes(".")) {
-      const fileResponse = await runtime.handle(pathname);
-      if (fileResponse.status === 200)
-        return fileResponse;
-      return null;
-    }
-    const base = spa === "root" || spa === "only" ? appBase : htmlBase;
-    const bare = pathname === "/" ? "" : pathname.slice(1).replace(/\/$/, "");
-    return Response.redirect(new URL(`${base}/${bare}`, url.origin), 302);
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    return entries;
   }
-  return {
-    handleRequest,
-    get htmlRouter() {
-      return ssrHtmlRouter;
-    },
-    get mdRouter() {
-      return ssrMdRouter;
-    },
-    get routeTree() {
-      return routeTree;
-    },
-    get widgetEntries() {
-      return discoveredWidgetEntries;
-    },
-    get shell() {
-      return shell;
-    }
-  };
 }
 
 // dist/runtime/fetch.runtime.js
-var __rewriteRelativeImportExtension2 = function(path, preserveJsx) {
+var __rewriteRelativeImportExtension = function(path, preserveJsx) {
   if (typeof path === "string" && /^\.\.?\//.test(path)) {
     return path.replace(/\.(tsx)$|((?:\.d)?)((?:\.[^./]+?)?)\.([cm]?)ts$/i, function(m, tsx, d, ext, cm) {
       return tsx ? preserveJsx ? ".jsx" : ".js" : d && (!ext || !cm) ? m : d + ext + "." + cm.toLowerCase() + "js";
@@ -2152,11 +2160,9 @@ var __rewriteRelativeImportExtension2 = function(path, preserveJsx) {
   }
   return path;
 };
-var FetchRuntime = class extends Runtime {
+
+class FetchRuntime extends Runtime {
   origin;
-  /**
-   * @param origin — Server origin, e.g. `'http://localhost:4100'` or `location.origin`.
-   */
   constructor(origin, config = {}) {
     super(config);
     this.origin = origin.endsWith("/") ? origin.slice(0, -1) : origin;
@@ -2176,7 +2182,7 @@ var FetchRuntime = class extends Runtime {
     const response = await fetch(url);
     const js = await response.text();
     const blob = new Blob([js], { type: "application/javascript" });
-    return import(__rewriteRelativeImportExtension2(URL.createObjectURL(blob)));
+    return import(__rewriteRelativeImportExtension(URL.createObjectURL(blob)));
   }
   toUrl(resource) {
     if (typeof resource === "string")
@@ -2185,10 +2191,10 @@ var FetchRuntime = class extends Runtime {
       return `${this.origin}${resource.pathname}${resource.search}`;
     return `${this.origin}${new URL(resource.url).pathname}`;
   }
-};
+}
 
-// dist/src/renderer/spa/thin-client.js
-var EmrouteApp = class {
+// dist/src/renderer/spa/emroute.app.js
+class EmrouteApp {
   server;
   appBase;
   slot = null;
@@ -2208,7 +2214,7 @@ var EmrouteApp = class {
       console.warn("[EmrouteApp] Navigation API not available");
       return;
     }
-    this.abortController = new AbortController();
+    this.abortController = new AbortController;
     const { signal } = this.abortController;
     navigation.addEventListener("navigate", (event) => {
       if (!event.canIntercept)
@@ -2264,12 +2270,12 @@ var EmrouteApp = class {
     return pathname;
   }
   async handleNavigation(url, signal) {
-    if (!this.slot || !this.server.htmlRouter)
+    if (!this.slot || !this.server.htmlRenderer)
       return;
     const routePath = this.stripAppBase(url.pathname);
     const routeUrl = new URL(routePath + url.search, url.origin);
     try {
-      const { content, title, redirect } = await this.server.htmlRouter.render(routeUrl, signal);
+      const { content, title, redirect } = await this.server.htmlRenderer.render(routeUrl, signal);
       if (signal.aborted)
         return;
       if (redirect) {
@@ -2299,7 +2305,7 @@ var EmrouteApp = class {
       }
     }
   }
-};
+}
 async function createEmrouteApp(server, options) {
   const g = globalThis;
   if (g.__emroute_app) {
@@ -2321,21 +2327,37 @@ async function bootEmrouteApp(options) {
   const routeTree = await routesResponse.json();
   const widgetsResponse = await runtime.handle(WIDGETS_MANIFEST_PATH);
   const widgetEntries = widgetsResponse.ok ? await widgetsResponse.json() : [];
-  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, runtime);
-  const widgets = new WidgetRegistry();
+  const elementsResponse = await runtime.handle(ELEMENTS_MANIFEST_PATH);
+  const elementEntries = elementsResponse.ok ? await elementsResponse.json() : [];
+  const moduleLoaders = buildLazyLoaders(routeTree, widgetEntries, elementEntries, runtime);
+  const widgets = new WidgetRegistry;
   for (const entry of widgetEntries) {
     ComponentElement.registerLazy(entry.name, entry.files, moduleLoaders[entry.modulePath]);
   }
-  const server = await createEmrouteServer({
+  for (const entry of elementEntries) {
+    const loader = moduleLoaders[entry.modulePath];
+    if (loader) {
+      loader().then((mod) => {
+        const cls = mod.default;
+        if (typeof cls === "function" && !customElements.get(entry.tagName)) {
+          customElements.define(entry.tagName, cls);
+        }
+      }).catch((e) => {
+        console.error(`[emroute] Failed to load element ${entry.tagName}:`, e);
+      });
+    }
+  }
+  const mdRenderer = MarkdownElement.getConfiguredRenderer();
+  const server = await Emroute.create({
     routeTree,
     widgets,
     moduleLoaders,
-    markdownRenderer: MarkdownElement.getConfiguredRenderer() ?? void 0
+    ...mdRenderer ? { markdownRenderer: mdRenderer } : {}
   }, runtime);
   return createEmrouteApp(server, options);
 }
-function buildLazyLoaders(tree, widgetEntries, runtime) {
-  const paths = /* @__PURE__ */ new Set();
+function buildLazyLoaders(tree, widgetEntries, elementEntries, runtime) {
+  const paths = new Set;
   function walk(node) {
     const modulePath = node.files?.ts ?? node.files?.js;
     if (modulePath)
@@ -2356,6 +2378,8 @@ function buildLazyLoaders(tree, widgetEntries, runtime) {
   walk(tree);
   for (const entry of widgetEntries)
     paths.add(entry.modulePath);
+  for (const entry of elementEntries)
+    paths.add(entry.modulePath);
   const loaders = {};
   for (const path of paths) {
     const absolute = path.startsWith("/") ? path : "/" + path;
@@ -2363,24 +2387,8 @@ function buildLazyLoaders(tree, widgetEntries, runtime) {
   }
   return loaders;
 }
-
-// dist/src/component/widget.component.js
-var WidgetComponent = class extends Component {
-  /**
-   * Render widget as HTML.
-   *
-   * Fallback chain:
-   * 1. html file content from context
-   * 2. md file content wrapped in `<mark-down>`
-   * 3. base Component default (markdown→HTML conversion)
-   *
-   * @example
-   * ```ts
-   * override renderHTML({ data, params }: this['RenderArgs']) {
-   *   return `<span>${params.coin}: $${data?.price}</span>`;
-   * }
-   * ```
-   */
+// dist/core/component/widget.component.js
+class WidgetComponent extends Component {
   renderHTML(args) {
     const files = args.context.files;
     const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>
@@ -2396,20 +2404,6 @@ var WidgetComponent = class extends Component {
     }
     return super.renderHTML(args);
   }
-  /**
-   * Render widget as Markdown.
-   *
-   * Fallback chain:
-   * 1. md file content from context
-   * 2. empty string
-   *
-   * @example
-   * ```ts
-   * override renderMarkdown({ data, params }: this['RenderArgs']) {
-   *   return `**${params.coin}**: $${data?.price}`;
-   * }
-   * ```
-   */
   renderMarkdown(args) {
     const files = args.context.files;
     if (files?.md) {
@@ -2417,12 +2411,9 @@ var WidgetComponent = class extends Component {
     }
     return "";
   }
-};
-
+}
 // dist/src/overlay/overlay.css.js
-var overlayCSS = (
-  /* css */
-  `
+var overlayCSS = `
 :root {
   --overlay-backdrop: oklch(0% 0 0 / 0.5);
   --overlay-surface: oklch(100% 0 0);
@@ -2583,8 +2574,7 @@ dialog[data-overlay-modal][data-dismissing]::backdrop {
   opacity: 0;
   scale: 0.95;
 }
-`
-);
+`;
 
 // dist/src/overlay/overlay.service.js
 var ANIMATION_SAFETY_TIMEOUT = 300;
@@ -2626,7 +2616,7 @@ function createOverlayService() {
     document.body.appendChild(dialog);
     dialog.addEventListener("click", (e) => {
       if (e.target === dialog) {
-        closeModal(void 0);
+        closeModal(undefined);
       }
     });
     return dialog;
@@ -2657,12 +2647,12 @@ function createOverlayService() {
     if (d.open) {
       d.close();
       if (modalResolve) {
-        modalResolve(void 0);
+        modalResolve(undefined);
         modalResolve = null;
       }
       if (modalOnClose) {
         modalOnClose();
-        modalOnClose = void 0;
+        modalOnClose = undefined;
       }
     }
     d.innerHTML = "";
@@ -2680,7 +2670,7 @@ function createOverlayService() {
     const onClose = modalOnClose;
     const dialogRef = dialog;
     modalResolve = null;
-    modalOnClose = void 0;
+    modalOnClose = undefined;
     animateDismiss(dialogRef, () => {
       if (dialogRef && dialogRef.open) {
         dialogRef.close();
@@ -2726,8 +2716,7 @@ function createOverlayService() {
     cleanupPopoverAnchorObserver();
     try {
       el.hidePopover();
-    } catch {
-    }
+    } catch {}
     el.removeAttribute("data-dismissing");
     el.innerHTML = "";
     options.render(el);
@@ -2766,8 +2755,7 @@ function createOverlayService() {
       return;
     try {
       popoverEl.hidePopover();
-    } catch {
-    }
+    } catch {}
     popoverEl.removeAttribute("data-dismissing");
   }
   function cleanupPopoverAnchorObserver() {
@@ -2791,8 +2779,7 @@ function createOverlayService() {
     animateDismiss(popoverEl, () => {
       try {
         popoverEl.hidePopover();
-      } catch {
-      }
+      } catch {}
     });
   }
   function dismissAll() {
@@ -2800,11 +2787,11 @@ function createOverlayService() {
       const resolve = modalResolve;
       const onClose = modalOnClose;
       modalResolve = null;
-      modalOnClose = void 0;
+      modalOnClose = undefined;
       dialog.removeAttribute("data-dismissing");
       dialog.close();
       if (resolve)
-        resolve(void 0);
+        resolve(undefined);
       if (onClose)
         onClose();
     }
@@ -2818,8 +2805,7 @@ function createOverlayService() {
       for (const el of document.querySelectorAll(":popover-open")) {
         el.hidePopover();
       }
-    } catch {
-    }
+    } catch {}
     for (const el of document.querySelectorAll("dialog[open]")) {
       if (el !== dialog)
         el.close();
@@ -2834,9 +2820,8 @@ function createOverlayService() {
     dismissAll
   };
 }
-
 // dist/src/widget/page-title.widget.js
-var PageTitleWidget = class extends WidgetComponent {
+class PageTitleWidget extends WidgetComponent {
   name = "page-title";
   getData(args) {
     return Promise.resolve({ title: args.params.title });
@@ -2855,14 +2840,14 @@ var PageTitleWidget = class extends WidgetComponent {
     if (!params.title || typeof params.title !== "string") {
       return 'page-title widget requires a "title" string param';
     }
-    return void 0;
+    return;
   }
-};
-
+}
 // dist/src/widget/breadcrumb.widget.js
-var DEFAULT_HTML_SEPARATOR = " \u203A ";
+var DEFAULT_HTML_SEPARATOR = " › ";
 var DEFAULT_MD_SEPARATOR = " > ";
-var BreadcrumbWidget = class extends WidgetComponent {
+
+class BreadcrumbWidget extends WidgetComponent {
   name = "breadcrumb";
   getData(args) {
     const pathname = args.context.pathname || "/";
@@ -2900,8 +2885,7 @@ var BreadcrumbWidget = class extends WidgetComponent {
     const sep = args.params.separator ?? DEFAULT_MD_SEPARATOR;
     return args.data.segments.map((seg, i, arr) => i === arr.length - 1 ? `**${seg.label}**` : `[${seg.label}](${seg.href})`).join(sep);
   }
-};
-
+}
 // dist/src/renderer/spa/mod.js
 if (globalThis.customElements) {
   if (!customElements.get("router-slot"))
@@ -2910,25 +2894,27 @@ if (globalThis.customElements) {
     customElements.define("mark-down", MarkdownElement);
 }
 export {
-  BreadcrumbWidget,
-  Component,
-  ComponentElement,
-  DEFAULT_BASE_PATH,
-  EmrouteApp,
-  FetchRuntime,
-  MarkdownElement,
-  PageComponent,
-  PageTitleWidget,
-  RouteTrie,
-  RouterSlot,
-  WidgetComponent,
-  WidgetRegistry,
-  bootEmrouteApp,
-  createEmrouteApp,
-  createEmrouteServer,
-  createOverlayService,
-  escapeHtml,
+  setLogger,
   scopeWidgetCss,
-  setLogger
+  escapeHtml,
+  createOverlayService,
+  createEmrouteApp,
+  bootEmrouteApp,
+  WidgetRegistry,
+  WidgetComponent,
+  RouterSlot,
+  RouteTrie,
+  PageTitleWidget,
+  PageComponent,
+  MarkdownElement,
+  FetchRuntime,
+  EmrouteApp,
+  Emroute,
+  DEFAULT_BASE_PATH,
+  ComponentElement,
+  Component,
+  BreadcrumbWidget
 };
+
+//# debugId=90218169F64D555264756E2164756E21
 //# sourceMappingURL=emroute.js.map