@emkodev/emroute 1.6.6-beta.4 → 1.7.0

package/dist/emroute.js

@@ -138,6 +138,10 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
     _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;
+  }
   /**
    * Get the current renderer, waiting for init if needed.
    */
@@ -204,6 +208,10 @@ var MarkdownElement = class _MarkdownElement extends HTMLElementBase {
 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. */
   static extendContext;
   /** Register (or clear) the context provider that enriches every widget's ComponentContext. */
@@ -265,6 +273,32 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     };
     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);
+    const placeholder = {
+      name,
+      getData: () => Promise.resolve(null),
+      renderHTML: () => "",
+      renderMarkdown: () => "",
+      renderError: () => "",
+      renderMarkdownError: () => ""
+    };
+    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.
@@ -277,6 +311,35 @@ var ComponentElement = class _ComponentElement extends HTMLElementBase {
     return this.deferred.promise;
   }
   async connectedCallback() {
+    const tagName = this.tagName.toLowerCase();
+    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;
+        for (const exp of Object.values(mod)) {
+          if (exp && typeof exp === "object" && "getData" in exp) {
+            const WidgetClass = exp.constructor;
+            this.component = new WidgetClass();
+            break;
+          }
+          if (typeof exp === "function" && exp.prototype?.getData) {
+            this.component = new exp();
+            break;
+          }
+        }
+      } catch {
+        if (this.hasAttribute(SSR_ATTR)) {
+          this.removeAttribute(SSR_ATTR);
+          this.signalReady();
+          return;
+        }
+      }
+    }
     this.component.element = this;
     this.style.contentVisibility = "auto";
     this.abortController = new AbortController();
@@ -771,172 +834,323 @@ var RouteCore = class {
   }
 };
 
-// dist/src/renderer/spa/thin-client.js
-var EmrouteApp = class {
-  server;
-  appBase;
-  slot = null;
-  abortController = null;
-  constructor(server, options) {
-    const bp = options?.basePath ?? DEFAULT_BASE_PATH;
-    this.server = server;
-    this.appBase = bp.app;
+// dist/src/route/route.trie.js
+function createNode() {
+  return { static: /* @__PURE__ */ new Map() };
+}
+function safeDecode(segment) {
+  try {
+    return decodeURIComponent(segment);
+  } catch {
+    return segment;
   }
-  async initialize(slotSelector = "router-slot") {
-    this.slot = document.querySelector(slotSelector);
-    if (!this.slot) {
-      console.error("[EmrouteApp] Slot not found:", slotSelector);
-      return;
-    }
-    if (!("navigation" in globalThis)) {
-      console.warn("[EmrouteApp] Navigation API not available");
-      return;
-    }
-    this.abortController = new AbortController();
-    const { signal } = this.abortController;
-    navigation.addEventListener("navigate", (event) => {
-      if (!event.canIntercept)
-        return;
-      if (event.hashChange)
-        return;
-      if (event.downloadRequest !== null)
-        return;
-      const url = new URL(event.destination.url);
-      if (!this.isAppPath(url.pathname))
-        return;
-      event.intercept({
-        scroll: "manual",
-        handler: async () => {
-          await this.handleNavigation(url, event.signal);
-          event.scroll();
-        }
-      });
-    }, { signal });
-    const ssrRoute = this.slot.getAttribute("data-ssr-route");
-    if (ssrRoute && (location.pathname === ssrRoute || location.pathname === ssrRoute + "/")) {
-      this.slot.removeAttribute("data-ssr-route");
-      return;
-    }
-    await this.handleNavigation(new URL(location.href), this.abortController.signal);
+}
+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;
   }
-  dispose() {
-    this.abortController?.abort();
-    this.abortController = null;
-    this.slot = null;
+  if (source.errorBoundary) {
+    node.errorBoundary = source.errorBoundary;
   }
-  async navigate(url, options = {}) {
-    try {
-      const { finished } = navigation.navigate(url, {
-        state: options.state,
-        history: options.replace ? "replace" : "auto"
-      });
-      await finished;
-    } catch (e) {
-      if (e instanceof DOMException && e.name === "AbortError")
-        return;
-      throw e;
+  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));
     }
   }
-  isAppPath(pathname) {
-    return pathname === this.appBase || pathname.startsWith(this.appBase + "/");
+  if (source.dynamic) {
+    const { param, child } = source.dynamic;
+    const childPattern = pattern === "/" ? `/:${param}` : `${pattern}/:${param}`;
+    node.dynamic = { param, node: convertNode(child, childPattern) };
   }
-  stripAppBase(pathname) {
-    if (pathname === this.appBase)
-      return "/";
-    if (pathname.startsWith(this.appBase + "/"))
-      return pathname.slice(this.appBase.length);
-    return pathname;
+  if (source.wildcard) {
+    const { param, child } = source.wildcard;
+    const childPattern = pattern === "/" ? `/:${param}*` : `${pattern}/:${param}*`;
+    node.wildcard = { param, node: convertNode(child, childPattern) };
   }
-  async handleNavigation(url, signal) {
-    if (!this.slot || !this.server.htmlRouter)
-      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);
-      if (signal.aborted)
-        return;
-      if (redirect) {
-        assertSafeRedirect(redirect);
-        const target = redirect.startsWith("/") ? this.appBase + redirect : redirect;
-        navigation.navigate(target, { history: "replace" });
-        return;
-      }
-      if (document.startViewTransition) {
-        const transition = document.startViewTransition(() => {
-          this.slot.setHTMLUnsafe(content);
-        });
-        signal.addEventListener("abort", () => transition.skipTransition(), { once: true });
-        await transition.updateCallbackDone;
-      } else {
-        this.slot.setHTMLUnsafe(content);
-      }
-      if (title)
-        document.title = title;
-    } catch (error) {
-      if (signal.aborted)
-        return;
-      console.error("[EmrouteApp] Navigation error:", error);
-      if (this.slot) {
-        const message = error instanceof Error ? error.message : String(error);
-        this.slot.setHTMLUnsafe(`<h1>Error</h1><p>${escapeHtml(message)}</p>`);
+  return node;
+}
+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, {});
   }
-};
-async function createEmrouteApp(server, options) {
-  const g = globalThis;
-  if (g.__emroute_app) {
-    console.warn("eMroute: App already initialized.");
-    return g.__emroute_app;
+  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);
   }
-  const app = new EmrouteApp(server, options);
-  await app.initialize();
-  g.__emroute_app = app;
-  return app;
-}
-
-// dist/src/component/abstract.component.js
-var Component = class {
-  /** Host element reference, set by ComponentElement in the browser. */
-  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>`;
+  findRoute(pattern) {
+    if (pattern === "/") {
+      return this.root.route;
     }
-    const markdown = this.renderMarkdown({
-      data: args.data,
-      params: args.params,
-      context: args.context
-    });
-    return `<div data-component="${this.name}" data-markdown>${escapeHtml(markdown)}</div>`;
+    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;
   }
-  /**
-   * Render error state.
-   */
-  renderError(args) {
+  // ── 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) {
+  const tagPattern = /<widget-(?<name>[a-z][a-z0-9-]*)(?<attrs>\s[^>]*)?>(?<content>.*?)<\/widget-\k<name>>/gis;
+  const wrappers = /* @__PURE__ */ new Map();
+  const ssrAttrPattern = new RegExp(`\\s${SSR_ATTR}(?:\\s|=|$)`);
+  const parse = (content) => {
+    const matches = content.matchAll(tagPattern).toArray();
+    return matches.filter((match) => {
+      const attrsString = match.groups.attrs || "";
+      return !ssrAttrPattern.test(attrsString);
+    });
+  };
+  const resolve = async (match) => {
+    const widgetName = match.groups.name;
+    const attrsString = match.groups.attrs?.trim() ?? "";
+    const widget = registry.get(widgetName);
+    if (!widget)
+      return match[0];
+    const params = parseAttrsToParams(attrsString);
+    try {
+      let files;
+      if (loadFiles) {
+        files = await loadFiles(widgetName, widget.files);
+      }
+      const baseContext = {
+        ...routeInfo,
+        pathname: routeInfo.url.pathname,
+        searchParams: routeInfo.url.searchParams,
+        files
+      };
+      const context = contextProvider ? contextProvider(baseContext) : baseContext;
+      const data = await widget.getData({ params, context });
+      const rendered = widget.renderHTML({ data, params, context });
+      wrappers.set(match, {
+        tagName: `widget-${widgetName}`,
+        attrs: attrsString ? ` ${attrsString}` : "",
+        ssrData: widget.exposeSsrData ? escapeAttr(JSON.stringify(data)) : ""
+      });
+      return rendered;
+    } catch (e) {
+      logger.error(`[SSR HTML] Widget "${widgetName}" render failed`, e instanceof Error ? e : void 0);
+      return match[0];
+    }
+  };
+  const replace = (content, replacements) => {
+    let result = content;
+    const entries = [...replacements.entries()].sort((a, b) => b[0].index - a[0].index);
+    for (const [match, innerHtml] of entries) {
+      const start = match.index;
+      const end = start + match[0].length;
+      const wrap = wrappers.get(match);
+      const lightDomData = wrap?.ssrData ? wrap.ssrData : "";
+      const replacement = wrap ? `<${wrap.tagName}${wrap.attrs} ${SSR_ATTR}><template shadowrootmode="open">${innerHtml}</template>${lightDomData}</${wrap.tagName}>` : innerHtml;
+      result = result.slice(0, start) + replacement + result.slice(end);
+    }
+    return result;
+  };
+  return resolveRecursively(html, parse, resolve, replace);
+}
+function parseAttrsToParams(attrsString) {
+  const params = {};
+  if (!attrsString)
+    return params;
+  const attrPattern = /(?<attr>[a-z][a-z0-9-]*)(?:="(?<dq>[^"]*)"|='(?<sq>[^']*)'|=(?<uq>[^\s>]+))?/gi;
+  for (const match of attrsString.matchAll(attrPattern)) {
+    const { attr: attrName, dq, sq, uq } = match.groups;
+    if (attrName === SSR_ATTR || attrName === LAZY_ATTR)
+      continue;
+    const key = attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
+    const rawValue = dq ?? sq ?? uq;
+    if (rawValue === void 0) {
+      params[key] = "";
+      continue;
+    }
+    const raw = rawValue.replaceAll("&amp;", "&").replaceAll("&#39;", "'").replaceAll("&quot;", '"');
+    try {
+      params[key] = JSON.parse(raw);
+    } catch {
+      params[key] = raw;
+    }
+  }
+  return params;
+}
+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. */
+  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>`;
+    }
+    const markdown = this.renderMarkdown({
+      data: args.data,
+      params: args.params,
+      context: args.context
+    });
+    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>`;
   }
@@ -1039,1700 +1253,1608 @@ var PageComponent = class extends Component {
 };
 var page_component_default = new PageComponent();
 
-// dist/src/component/widget.component.js
-var WidgetComponent = class extends Component {
+// dist/src/renderer/ssr/ssr.renderer.js
+var SsrRenderer = class _SsrRenderer {
+  core;
+  widgets;
+  widgetFiles;
+  constructor(resolver, options = {}) {
+    this.core = new RouteCore(resolver, options);
+    this.widgets = options.widgets ?? null;
+    this.widgetFiles = options.widgetFiles ?? {};
+  }
   /**
-   * 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>`;
-   * }
-   * ```
+   * Render a URL to a content string.
    */
-  renderHTML(args) {
-    const files = args.context.files;
-    const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>
-` : "";
-    if (files?.html) {
-      return style + files.html;
-    }
-    if (files?.md) {
-      return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
+  async render(url, signal) {
+    const matched = this.core.match(url);
+    if (!matched) {
+      const statusPage = this.core.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 };
+        } catch (e) {
+          logger.error(`[${this.label}] Failed to render 404 status page for ${url.pathname}`, e instanceof Error ? e : void 0);
+        }
+      }
+      return { content: this.renderStatusPage(404, url), status: 404 };
     }
-    if (style) {
-      return style + super.renderHTML(args);
+    if (matched.route.type === "redirect") {
+      const module = await this.core.loadModule(matched.route.modulePath);
+      const redirectConfig = module.default;
+      assertSafeRedirect(redirectConfig.to);
+      return {
+        content: this.renderRedirect(redirectConfig.to),
+        status: redirectConfig.status ?? 301,
+        redirect: redirectConfig.to
+      };
+    }
+    const routeInfo = this.core.toRouteInfo(matched, url);
+    try {
+      const { content, title } = await this.renderPage(routeInfo, matched, signal);
+      return { content, status: 200, title };
+    } catch (error) {
+      if (error instanceof Response) {
+        const statusPage = this.core.getStatusPage(error.status);
+        if (statusPage) {
+          try {
+            const ri = { url, params: {} };
+            const result = await this.renderRouteContent(ri, statusPage, void 0, signal);
+            return {
+              content: this.stripSlots(result.content),
+              status: error.status,
+              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);
+          }
+        }
+        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);
+      if (boundary) {
+        const result = await this.tryRenderErrorModule(boundary.modulePath, url, "boundary");
+        if (result)
+          return result;
+      }
+      const errorHandler = this.core.getErrorHandler();
+      if (errorHandler) {
+        const result = await this.tryRenderErrorModule(errorHandler.modulePath, url, "handler");
+        if (result)
+          return result;
+      }
+      return { content: this.renderErrorPage(error, url), status: 500 };
     }
-    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}`;
-   * }
-   * ```
+   * Render a matched page by composing the route hierarchy.
    */
-  renderMarkdown(args) {
-    const files = args.context.files;
-    if (files?.md) {
-      return files.md;
+  async renderPage(routeInfo, matched, signal) {
+    const hierarchy = this.core.buildRouteHierarchy(matched.route.pattern);
+    const segments = [];
+    for (let i = 0; i < hierarchy.length; i++) {
+      const routePattern = hierarchy[i];
+      let route = this.core.findRoute(routePattern);
+      if (!route && routePattern === "/") {
+        route = DEFAULT_ROOT_ROUTE;
+      }
+      if (!route)
+        continue;
+      if (route === matched.route && routePattern !== matched.route.pattern)
+        continue;
+      segments.push({ route, isLeaf: i === hierarchy.length - 1 });
     }
-    return "";
-  }
-};
-
-// dist/src/route/route.trie.js
-function createNode() {
-  return { static: /* @__PURE__ */ new Map() };
-}
-function safeDecode(segment) {
-  try {
-    return decodeURIComponent(segment);
-  } catch {
-    return segment;
+    const results = await Promise.all(segments.map(({ route, isLeaf }) => this.renderRouteContent(routeInfo, route, isLeaf, signal)));
+    let result = "";
+    let pageTitle;
+    let lastRenderedPattern = "";
+    for (let i = 0; i < segments.length; i++) {
+      const { content, title } = results[i];
+      if (title) {
+        pageTitle = title;
+      }
+      if (result === "") {
+        result = content;
+      } 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.`);
+        }
+        result = injected;
+      }
+      lastRenderedPattern = segments[i].route.pattern;
+    }
+    result = this.stripSlots(result);
+    return { content: result, title: pageTitle };
   }
-}
-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;
+  /** 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 content = this.renderContent(component, { data, params: routeInfo.params, context });
+    const title = component.getTitle({ data, params: routeInfo.params, context });
+    return { content, title };
   }
-  if (source.errorBoundary) {
-    node.errorBoundary = source.errorBoundary;
+  /** Render a component for error boundary/handler with minimal context. */
+  renderComponent(component, data, context) {
+    return this.renderContent(component, { data, params: {}, context });
   }
-  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));
+  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 component = module.default;
+      const minCtx = {
+        url: _SsrRenderer.EMPTY_URL,
+        params: {},
+        pathname: "",
+        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);
+      return null;
     }
   }
-  if (source.dynamic) {
-    const { param, child } = source.dynamic;
-    const childPattern = pattern === "/" ? `/:${param}` : `${pattern}/:${param}`;
-    node.dynamic = { param, node: convertNode(child, childPattern) };
+};
+
+// dist/src/renderer/ssr/html.renderer.js
+var SsrHtmlRouter = class extends SsrRenderer {
+  label = "SSR HTML";
+  markdownRenderer;
+  markdownReady = null;
+  constructor(resolver, options = {}) {
+    super(resolver, options);
+    this.markdownRenderer = options.markdownRenderer ?? null;
+    if (this.markdownRenderer?.init) {
+      this.markdownReady = this.markdownRenderer.init();
+    }
   }
-  if (source.wildcard) {
-    const { param, child } = source.wildcard;
-    const childPattern = pattern === "/" ? `/:${param}*` : `${pattern}/:${param}*`;
-    node.wildcard = { param, node: convertNode(child, childPattern) };
+  injectSlot(parent, child, parentPattern) {
+    const escaped = parentPattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    return parent.replace(new RegExp(`<router-slot\\b[^>]*\\bpattern="${escaped}"[^>]*></router-slot>`), child);
   }
-  return node;
-}
-var RouteTrie = class {
-  root;
-  constructor(tree) {
-    this.root = convertNode(tree, "/");
+  stripSlots(result) {
+    return result.replace(/<router-slot[^>]*><\/router-slot>/g, "");
   }
-  match(pathname) {
-    if (pathname.length > 1 && pathname.endsWith("/")) {
-      pathname = pathname.slice(0, -1);
-    }
-    if (!pathname.startsWith("/")) {
-      pathname = "/" + pathname;
+  /**
+   * 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>` };
     }
-    if (pathname === "/") {
-      if (this.root.route) {
-        return { node: this.root.route, pattern: "/", params: {} };
-      }
-      return void 0;
+    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
+    let content = rawContent;
+    content = await this.expandMarkdown(content);
+    content = this.attributeSlots(content, route.pattern);
+    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);
     }
-    const segments = splitSegments(pathname);
-    return this.walk(this.root, segments, 0, {});
+    return { content, title };
   }
-  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);
+  renderContent(component, args) {
+    return component.renderHTML(args);
   }
-  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;
+  renderRedirect(to) {
+    return `<meta http-equiv="refresh" content="0;url=${escapeHtml(to)}">`;
   }
-  // ── 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;
+  renderStatusPage(status, url) {
+    return `
+      <h1>${STATUS_MESSAGES[status] ?? "Error"}</h1>
+      <p>Path: ${escapeHtml(url.pathname)}</p>
+    `;
+  }
+  renderErrorPage(error, url) {
+    const message = error instanceof Error ? error.message : String(error);
+    return `
+      <h1>Error</h1>
+      <p>Path: ${escapeHtml(url.pathname)}</p>
+      <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>`);
   }
   /**
-   * 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.
+   * Expand <mark-down> tags by rendering markdown to HTML server-side.
+   * Leaves content unchanged if no markdown renderer is configured.
    */
-  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;
+  async expandMarkdown(content) {
+    if (!this.markdownRenderer)
+      return content;
+    if (!content.includes("<mark-down>"))
+      return content;
+    if (this.markdownReady) {
+      await this.markdownReady;
     }
-    return deepest;
+    const renderer = this.markdownRenderer;
+    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;
+    });
   }
 };
 
-// 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/overlay/overlay.css.js
-var overlayCSS = (
-  /* css */
-  `
-:root {
-  --overlay-backdrop: oklch(0% 0 0 / 0.5);
-  --overlay-surface: oklch(100% 0 0);
-  --overlay-radius: 8px;
-  --overlay-shadow: 0 8px 32px oklch(0% 0 0 / 0.2);
-  --overlay-toast-gap: 8px;
-  --overlay-toast-duration: 5s;
-  --overlay-z: 1000;
-}
-
-/* --- Modal (dialog) --- */
-
-dialog[data-overlay-modal] {
-  border: none;
-  padding: 0;
-  background: var(--overlay-surface);
-  border-radius: var(--overlay-radius);
-  box-shadow: var(--overlay-shadow);
-  max-width: min(90vw, 560px);
-  max-height: 85vh;
-  overflow: auto;
-  opacity: 1;
-  translate: 0 0;
-  transition:
-    opacity 200ms,
-    translate 200ms;
+// dist/src/widget/widget.parser.js
+var WIDGET_PATTERN = /```widget:(?<name>[a-z][a-z0-9-]*)\n(?<params>.*?)```/gs;
+function parseWidgetBlocks(markdown) {
+  const blocks = [];
+  for (const match of markdown.matchAll(WIDGET_PATTERN)) {
+    const fullMatch = match[0];
+    const { name: widgetName, params: paramsRaw } = match.groups;
+    const paramsJson = paramsRaw.trim();
+    const startIndex = match.index;
+    const block = {
+      fullMatch,
+      widgetName,
+      params: null,
+      startIndex,
+      endIndex: startIndex + fullMatch.length
+    };
+    if (paramsJson) {
+      try {
+        const parsed = JSON.parse(paramsJson);
+        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+          block.params = parsed;
+        } else {
+          block.parseError = "Params must be a JSON object";
+        }
+      } catch (e) {
+        block.parseError = `Invalid JSON: ${e instanceof Error ? e.message : String(e)}`;
+      }
+    } else {
+      block.params = {};
+    }
+    blocks.push(block);
+  }
+  return blocks;
 }
-
-dialog[data-overlay-modal][open] {
-  transition:
-    opacity 200ms,
-    translate 200ms,
-    display 200ms allow-discrete,
-    overlay 200ms allow-discrete;
-
-  @starting-style {
-    opacity: 0;
-    translate: 0 20px;
+function replaceWidgetBlocks(markdown, replacements) {
+  const sortedBlocks = [...replacements.entries()].sort(([a], [b]) => b.startIndex - a.startIndex);
+  let result = markdown;
+  for (const [block, replacement] of sortedBlocks) {
+    result = result.slice(0, block.startIndex) + replacement + result.slice(block.endIndex);
   }
+  return result;
 }
 
-dialog[data-overlay-modal]::backdrop {
-  background: var(--overlay-backdrop);
-  opacity: 1;
-  transition: opacity 200ms;
+// dist/src/renderer/ssr/md.renderer.js
+var BARE_SLOT_BLOCK = "```router-slot\n```";
+function routerSlotBlock(pattern) {
+  return `\`\`\`router-slot
+{"pattern":"${pattern}"}
+\`\`\``;
 }
+var SsrMdRouter = class extends SsrRenderer {
+  label = "SSR MD";
+  constructor(resolver, options = {}) {
+    super(resolver, options);
+  }
+  injectSlot(parent, child, parentPattern) {
+    return parent.replace(routerSlotBlock(parentPattern), child);
+  }
+  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) };
+    }
+    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
+    let content = rawContent;
+    content = content.replaceAll(BARE_SLOT_BLOCK, routerSlotBlock(route.pattern));
+    if (this.widgets) {
+      content = await this.resolveWidgets(content, routeInfo);
+    }
+    return { content, title };
+  }
+  renderContent(component, args) {
+    return component.renderMarkdown(args);
+  }
+  renderRedirect(to) {
+    return `Redirect to: ${to}`;
+  }
+  renderStatusPage(status, url) {
+    return `# ${STATUS_MESSAGES[status] ?? "Error"}
 
-dialog[data-overlay-modal][open]::backdrop {
-  transition:
-    opacity 200ms,
-    display 200ms allow-discrete,
-    overlay 200ms allow-discrete;
-
-  @starting-style {
-    opacity: 0;
+Path: \`${url.pathname}\``;
   }
-}
+  renderErrorPage(_error, url) {
+    return `# Internal Server Error
 
-dialog[data-overlay-modal][data-dismissing] {
-  opacity: 0;
-  translate: 0 20px;
-}
-
-dialog[data-overlay-modal][data-dismissing]::backdrop {
-  opacity: 0;
-}
-
-/* --- Toast container --- */
-
-[data-overlay-toast-container] {
-  position: fixed;
-  bottom: 16px;
-  right: 16px;
-  z-index: var(--overlay-z);
-  display: flex;
-  flex-direction: column;
-  gap: var(--overlay-toast-gap);
-  pointer-events: none;
-}
-
-/* --- Toast item --- */
-
-[data-overlay-toast] {
-  pointer-events: auto;
-  background: var(--overlay-surface);
-  border-radius: var(--overlay-radius);
-  box-shadow: var(--overlay-shadow);
-  padding: 12px 16px;
-  animation: overlay-toast-auto var(--overlay-toast-duration, 5s) ease-in-out forwards;
-}
-
-/* Manual toast (timeout: 0): no auto-dismiss, entry transition only */
-[data-overlay-toast][data-toast-manual] {
-  animation: none;
-  opacity: 1;
-  translate: 0 0;
-  transition:
-    opacity 200ms,
-    translate 200ms;
-
-  @starting-style {
-    opacity: 0;
-    translate: 20px 0;
+Path: \`${url.pathname}\``;
   }
-}
-
-/* Dismissed toast: CSS exit animation */
-[data-overlay-toast][data-dismissing] {
-  animation: overlay-toast-exit 200ms ease-in forwards;
-}
-
-@keyframes overlay-toast-auto {
-  0%   { opacity: 0; translate: 20px 0; }
-  10%  { opacity: 1; translate: 0 0; }
-  80%  { opacity: 1; translate: 0 0; }
-  100% { opacity: 0; translate: 0 0; display: none; }
-}
-
-@keyframes overlay-toast-exit {
-  to { opacity: 0; translate: 20px 0; display: none; }
-}
-
-/* --- Popover --- */
-
-[data-overlay-popover] {
-  border: none;
-  padding: 0;
-  margin: 0;
-  background: var(--overlay-surface);
-  border-radius: var(--overlay-radius);
-  box-shadow: var(--overlay-shadow);
-  opacity: 1;
-  scale: 1;
-  transition:
-    opacity 200ms,
-    scale 200ms;
-}
-
-[data-overlay-popover]:popover-open {
-  position-anchor: auto;
-  inset: unset;
-  top: anchor(bottom);
-  left: anchor(start);
-  margin-top: 4px;
-  transition:
-    opacity 200ms,
-    scale 200ms,
-    display 200ms allow-discrete,
-    overlay 200ms allow-discrete;
+  /**
+   * 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) {
+        return `> **Error** (\`${block.widgetName}\`): ${block.parseError}`;
+      }
+      const widget = this.widgets.get(block.widgetName);
+      if (!widget) {
+        return `> **Error**: Unknown widget \`${block.widgetName}\``;
+      }
+      try {
+        let files;
+        const filePaths = this.widgetFiles[block.widgetName] ?? widget.files;
+        if (filePaths) {
+          files = await this.core.loadWidgetFiles(filePaths);
+        }
+        const baseContext = {
+          ...routeInfo,
+          pathname: routeInfo.url.pathname,
+          searchParams: routeInfo.url.searchParams,
+          files
+        };
+        const context = this.core.contextProvider ? this.core.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);
+  }
+};
 
-  @starting-style {
-    opacity: 0;
-    scale: 0.95;
+// dist/src/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");
+  let inCodeBlock = false;
+  for (let i = 0; i < lines.length; i++) {
+    if (lines[i].startsWith("```")) {
+      inCodeBlock = !inCodeBlock;
+      continue;
+    }
+    if (inCodeBlock)
+      continue;
+    lines[i] = lines[i].replaceAll(inlineRe, `](${prefix}`);
+    lines[i] = lines[i].replaceAll(refRe, `$1${prefix}`);
   }
+  return lines.join("\n");
 }
 
-[data-overlay-popover][data-dismissing] {
-  opacity: 0;
-  scale: 0.95;
+// dist/src/route/route-tree.util.js
+function resolveTargetNode(node, name, isRoot) {
+  if (name === "index") {
+    if (isRoot)
+      return node;
+    node.wildcard ??= { param: "rest", child: {} };
+    return node.wildcard.child;
+  }
+  if (name.startsWith("[") && name.endsWith("]")) {
+    const param = name.slice(1, -1);
+    node.dynamic ??= { param, child: {} };
+    return node.dynamic.child;
+  }
+  node.children ??= {};
+  node.children[name] ??= {};
+  return node.children[name];
 }
-`
-);
 
-// dist/src/overlay/overlay.service.js
-var ANIMATION_SAFETY_TIMEOUT = 300;
-function animateDismiss(el, onDone) {
-  el.setAttribute("data-dismissing", "");
-  let done = false;
-  const finish = () => {
-    if (done)
-      return;
-    done = true;
-    onDone();
-  };
-  el.addEventListener("transitionend", finish, { once: true });
-  setTimeout(finish, ANIMATION_SAFETY_TIMEOUT);
-}
-function createOverlayService() {
-  let styleInjected = false;
-  let dialog = null;
-  let modalResolve = null;
-  let modalOnClose;
-  let toastContainer = null;
-  let popoverEl = null;
-  let popoverAnchorObserver = null;
-  const supportsAnchor = typeof CSS !== "undefined" && CSS.supports("anchor-name", "--a");
-  function injectCSS() {
-    if (styleInjected)
-      return;
-    styleInjected = true;
-    const style = document.createElement("style");
-    style.textContent = overlayCSS;
-    document.head.appendChild(style);
+// dist/runtime/abstract.runtime.js
+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 {
+  config;
+  constructor(config = {}) {
+    this.config = config;
+    this.config = config;
   }
-  function ensureDialog() {
-    if (dialog)
-      return dialog;
-    injectCSS();
-    dialog = document.createElement("dialog");
-    dialog.setAttribute("data-overlay-modal", "");
-    document.body.appendChild(dialog);
-    dialog.addEventListener("click", (e) => {
-      if (e.target === dialog) {
-        closeModal(void 0);
-      }
-    });
-    return dialog;
+  /** Write. Defaults to PUT; pass `{ method: "DELETE" }` etc. to override. */
+  command(resource, options) {
+    return this.handle(resource, { method: "PUT", ...options });
   }
-  function ensureToastContainer() {
-    if (toastContainer)
-      return toastContainer;
-    injectCSS();
-    toastContainer = document.createElement("div");
-    toastContainer.setAttribute("data-overlay-toast-container", "");
-    document.body.appendChild(toastContainer);
-    return toastContainer;
+  /**
+   * 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}`);
   }
-  function ensurePopover() {
-    if (popoverEl)
-      return popoverEl;
-    injectCSS();
-    popoverEl = document.createElement("div");
-    popoverEl.setAttribute("data-overlay-popover", "");
-    popoverEl.setAttribute("popover", "");
-    document.body.appendChild(popoverEl);
-    return popoverEl;
+  /**
+   * 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}`);
   }
-  function modal(options) {
-    const d = ensureDialog();
-    d.removeAttribute("data-dismissing");
-    hidePopoverImmediate();
-    if (d.open) {
-      d.close();
-      if (modalResolve) {
-        modalResolve(void 0);
-        modalResolve = null;
-      }
-      if (modalOnClose) {
-        modalOnClose();
-        modalOnClose = void 0;
-      }
-    }
-    d.innerHTML = "";
-    options.render(d);
-    modalOnClose = options.onClose;
-    const { promise, resolve } = Promise.withResolvers();
-    modalResolve = resolve;
-    d.showModal();
-    return promise;
-  }
-  function closeModal(value) {
-    if (!dialog || !dialog.open)
-      return;
-    const resolve = modalResolve;
-    const onClose = modalOnClose;
-    const dialogRef = dialog;
-    modalResolve = null;
-    modalOnClose = void 0;
-    animateDismiss(dialogRef, () => {
-      if (dialogRef && dialogRef.open) {
-        dialogRef.close();
-        if (resolve)
-          resolve(value);
-        if (onClose)
-          onClose();
-      }
-    });
-  }
-  function clearDeadToasts(container) {
-    for (const child of [...container.children]) {
-      const el = child;
-      if (el.hasAttribute("data-dismissing")) {
-        el.remove();
-      }
-    }
+  // ── Manifest resolution ─────────────────────────────────────────────
+  routesManifestCache = null;
+  widgetsManifestCache = null;
+  /** Clear cached manifests so the next query triggers a fresh scan. */
+  invalidateManifests() {
+    this.routesManifestCache = null;
+    this.widgetsManifestCache = null;
   }
-  function toast(options) {
-    const container = ensureToastContainer();
-    clearDeadToasts(container);
-    const el = document.createElement("div");
-    el.setAttribute("data-overlay-toast", "");
-    const timeout = options.timeout ?? 0;
-    if (timeout === 0) {
-      el.setAttribute("data-toast-manual", "");
-    } else {
-      el.style.setProperty("--overlay-toast-duration", `${timeout}ms`);
+  /**
+   * 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();
+    const routesDir = this.config.routesDir ?? DEFAULT_ROUTES_DIR;
+    const dirResponse = await this.query(routesDir + "/");
+    if (dirResponse.status === 404) {
+      return new Response("Not Found", { status: 404 });
     }
-    options.render(el);
-    container.appendChild(el);
-    let dismissed = false;
-    const dismiss = () => {
-      if (dismissed)
-        return;
-      dismissed = true;
-      el.setAttribute("data-dismissing", "");
-    };
-    return { dismiss };
+    const tree = await this.scanRoutes(routesDir);
+    this.routesManifestCache = Response.json(tree);
+    return this.routesManifestCache.clone();
   }
-  function popover(options) {
-    const el = ensurePopover();
-    cleanupPopoverAnchorObserver();
-    try {
-      el.hidePopover();
-    } catch {
-    }
-    el.removeAttribute("data-dismissing");
-    el.innerHTML = "";
-    options.render(el);
-    if (supportsAnchor) {
-      const anchorName = "--overlay-anchor";
-      options.anchor.style.setProperty("anchor-name", anchorName);
-      el.style.setProperty("position-anchor", anchorName);
-      el.style.removeProperty("top");
-      el.style.removeProperty("left");
-    } else {
-      const rect = options.anchor.getBoundingClientRect();
-      el.style.top = `${rect.bottom + globalThis.scrollY}px`;
-      el.style.left = `${rect.left + globalThis.scrollX}px`;
-      el.style.position = "absolute";
+  /**
+   * 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();
+    const widgetsDir = this.config.widgetsDir ?? DEFAULT_WIDGETS_DIR;
+    const dirResponse = await this.query(widgetsDir + "/");
+    if (dirResponse.status === 404) {
+      return new Response("Not Found", { status: 404 });
     }
-    el.showPopover();
-    watchAnchorDisconnect(options.anchor);
+    const entries = await this.scanWidgets(widgetsDir, widgetsDir.replace(/^\//, ""));
+    this.widgetsManifestCache = Response.json(entries);
+    return this.widgetsManifestCache.clone();
   }
-  function watchAnchorDisconnect(anchor) {
-    cleanupPopoverAnchorObserver();
-    const parent = anchor.parentNode;
-    if (!parent) {
-      closePopover();
-      return;
-    }
-    popoverAnchorObserver = new MutationObserver(() => {
-      if (!document.contains(anchor)) {
-        closePopover();
+  // ── Scanning ──────────────────────────────────────────────────────────
+  async *walkDirectory(dir) {
+    const trailingDir = dir.endsWith("/") ? dir : dir + "/";
+    const response = await this.query(trailingDir);
+    const entries = await response.json();
+    for (const entry of entries) {
+      const path = `${trailingDir}${entry}`;
+      if (entry.endsWith("/")) {
+        yield* this.walkDirectory(path);
+      } else {
+        yield path;
       }
-    });
-    popoverAnchorObserver.observe(parent, { childList: true });
-  }
-  function hidePopoverImmediate() {
-    cleanupPopoverAnchorObserver();
-    if (!popoverEl)
-      return;
-    try {
-      popoverEl.hidePopover();
-    } catch {
-    }
-    popoverEl.removeAttribute("data-dismissing");
-  }
-  function cleanupPopoverAnchorObserver() {
-    if (popoverAnchorObserver) {
-      popoverAnchorObserver.disconnect();
-      popoverAnchorObserver = null;
     }
   }
-  function closePopover() {
-    cleanupPopoverAnchorObserver();
-    if (!popoverEl)
-      return;
-    let isOpen;
-    try {
-      isOpen = popoverEl.matches(":popover-open");
-    } catch {
-      isOpen = popoverEl.hasAttribute("popover") && popoverEl.style.display !== "none";
+  /**
+   * 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 = [];
+    for await (const file of this.walkDirectory(routesDir)) {
+      allFiles.push(file);
     }
-    if (!isOpen)
-      return;
-    animateDismiss(popoverEl, () => {
-      try {
-        popoverEl.hidePopover();
-      } catch {
+    for (const filePath of allFiles) {
+      const relativePath = filePath.replace(`${routesDir}/`, "");
+      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)
+        continue;
+      const [, name, kind, ext] = match;
+      let node = root;
+      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];
+        }
       }
-    });
-  }
-  function dismissAll() {
-    if (dialog && dialog.open) {
-      const resolve = modalResolve;
-      const onClose = modalOnClose;
-      modalResolve = null;
-      modalOnClose = void 0;
-      dialog.removeAttribute("data-dismissing");
-      dialog.close();
-      if (resolve)
-        resolve(void 0);
-      if (onClose)
-        onClose();
-    }
-    hidePopoverImmediate();
-    if (toastContainer) {
-      for (const child of toastContainer.children) {
-        child.setAttribute("data-dismissing", "");
+      if (kind === "error") {
+        node.errorBoundary = filePath;
+        continue;
       }
-    }
-    try {
-      for (const el of document.querySelectorAll(":popover-open")) {
-        el.hidePopover();
+      const target = resolveTargetNode(node, name, dirSegments.length === 0);
+      if (kind === "redirect") {
+        target.redirect = filePath;
+      } else {
+        target.files ??= {};
+        target.files[ext] = filePath;
       }
-    } catch {
     }
-    for (const el of document.querySelectorAll("dialog[open]")) {
-      if (el !== dialog)
-        el.close();
-    }
-  }
-  return {
-    modal,
-    closeModal,
-    toast,
-    popover,
-    closePopover,
-    dismissAll
-  };
-}
-
-// dist/src/widget/page-title.widget.js
-var PageTitleWidget = class extends WidgetComponent {
-  name = "page-title";
-  getData(args) {
-    return Promise.resolve({ title: args.params.title });
+    return root;
   }
-  renderHTML(args) {
-    const title = args.data?.title ?? args.params.title;
-    if (title && typeof document !== "undefined") {
-      document.title = title;
-    }
-    return "";
-  }
-  renderMarkdown(_args) {
-    return "";
-  }
-  validateParams(params) {
-    if (!params.title || typeof params.title !== "string") {
-      return 'page-title widget requires a "title" string param';
+  async scanWidgets(widgetsDir, pathPrefix) {
+    const COMPANION_EXTENSIONS = ["html", "md", "css"];
+    const entries = [];
+    const trailingDir = widgetsDir.endsWith("/") ? widgetsDir : widgetsDir + "/";
+    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);
+      let moduleFile = `${name}.widget.ts`;
+      let modulePath = `${trailingDir}${name}/${moduleFile}`;
+      if ((await this.query(modulePath)).status === 404) {
+        moduleFile = `${name}.widget.js`;
+        modulePath = `${trailingDir}${name}/${moduleFile}`;
+        if ((await this.query(modulePath)).status === 404)
+          continue;
+      }
+      const prefix = pathPrefix ? `${pathPrefix}/` : "";
+      const entry = {
+        name,
+        modulePath: `${prefix}${name}/${moduleFile}`,
+        tagName: `widget-${name}`
+      };
+      const files = {};
+      let hasFiles = false;
+      for (const ext of COMPANION_EXTENSIONS) {
+        const companionFile = `${name}.widget.${ext}`;
+        const companionPath = `${trailingDir}${name}/${companionFile}`;
+        if ((await this.query(companionPath)).status !== 404) {
+          files[ext] = `${prefix}${name}/${companionFile}`;
+          hasFiles = true;
+        }
+      }
+      if (hasFiles)
+        entry.files = files;
+      entries.push(entry);
     }
-    return void 0;
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    return entries;
   }
 };
 
-// dist/src/widget/breadcrumb.widget.js
-var DEFAULT_HTML_SEPARATOR = " \u203A ";
-var DEFAULT_MD_SEPARATOR = " > ";
-var BreadcrumbWidget = class extends WidgetComponent {
-  name = "breadcrumb";
-  getData(args) {
-    const pathname = args.context.pathname || "/";
-    const parts = pathname.split("/").filter(Boolean);
-    const segments = [
-      { label: "Home", href: "/" }
-    ];
-    let accumulated = "";
-    for (const part of parts) {
-      accumulated += "/" + part;
-      segments.push({
-        label: part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, " "),
-        href: accumulated
-      });
+// 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);
     }
-    return Promise.resolve({ segments });
-  }
-  renderHTML(args) {
-    if (!args.data || args.data.segments.length === 0)
-      return "";
-    const sep = args.params.separator ?? DEFAULT_HTML_SEPARATOR;
-    const segments = args.data.segments;
-    const items = segments.map((seg, i) => {
-      const escaped = escapeHtml(seg.label);
-      if (i === segments.length - 1) {
-        return `<span aria-current="page">${escaped}</span>`;
-      }
-      return `<a href="${escapeHtml(seg.href)}">${escaped}</a>`;
-    });
-    return `<nav aria-label="Breadcrumb">${items.join(escapeHtml(sep))}</nav>`;
+    if (node.dynamic)
+      walk(node.dynamic.child);
+    if (node.wildcard)
+      walk(node.wildcard.child);
   }
-  renderMarkdown(args) {
-    if (!args.data || args.data.segments.length === 0)
-      return "";
-    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);
+  walk(tree);
+  const loaders = {};
+  for (const path of paths) {
+    loaders[path] = () => runtime.loadModule(path);
   }
-};
-
-// dist/src/renderer/spa/mod.js
-if (globalThis.customElements) {
-  if (!customElements.get("router-slot"))
-    customElements.define("router-slot", RouterSlot);
-  if (!customElements.get("mark-down"))
-    customElements.define("mark-down", MarkdownElement);
+  return loaders;
 }
-
-// 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;
+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();
+    }
   }
-  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);
+  return null;
 }
-function resolveWidgetTags(html, registry, routeInfo, loadFiles, contextProvider) {
-  const tagPattern = /<widget-(?<name>[a-z][a-z0-9-]*)(?<attrs>\s[^>]*)?>(?<content>.*?)<\/widget-\k<name>>/gis;
-  const wrappers = /* @__PURE__ */ new Map();
-  const ssrAttrPattern = new RegExp(`\\s${SSR_ATTR}(?:\\s|=|$)`);
-  const parse = (content) => {
-    const matches = content.matchAll(tagPattern).toArray();
-    return matches.filter((match) => {
-      const attrsString = match.groups.attrs || "";
-      return !ssrAttrPattern.test(attrsString);
-    });
-  };
-  const resolve = async (match) => {
-    const widgetName = match.groups.name;
-    const attrsString = match.groups.attrs?.trim() ?? "";
-    const widget = registry.get(widgetName);
-    if (!widget)
-      return match[0];
-    const params = parseAttrsToParams(attrsString);
+async function importWidgets(entries, runtime, manual) {
+  const registry = new WidgetRegistry();
+  const widgetFiles = {};
+  for (const entry of entries) {
     try {
-      let files;
-      if (loadFiles) {
-        files = await loadFiles(widgetName, widget.files);
+      const runtimePath = entry.modulePath.startsWith("/") ? entry.modulePath : `/${entry.modulePath}`;
+      const mod = await runtime.loadModule(runtimePath);
+      const instance = 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;
       }
-      const baseContext = {
-        ...routeInfo,
-        pathname: routeInfo.url.pathname,
-        searchParams: routeInfo.url.searchParams,
-        files
-      };
-      const context = contextProvider ? contextProvider(baseContext) : baseContext;
-      const data = await widget.getData({ params, context });
-      const rendered = widget.renderHTML({ data, params, context });
-      wrappers.set(match, {
-        tagName: `widget-${widgetName}`,
-        attrs: attrsString ? ` ${attrsString}` : "",
-        ssrData: widget.exposeSsrData ? escapeAttr(JSON.stringify(data)) : ""
-      });
-      return rendered;
     } catch (e) {
-      logger.error(`[SSR HTML] Widget "${widgetName}" render failed`, e instanceof Error ? e : void 0);
-      return match[0];
-    }
-  };
-  const replace = (content, replacements) => {
-    let result = content;
-    const entries = [...replacements.entries()].sort((a, b) => b[0].index - a[0].index);
-    for (const [match, innerHtml] of entries) {
-      const start = match.index;
-      const end = start + match[0].length;
-      const wrap = wrappers.get(match);
-      const lightDomData = wrap?.ssrData ? wrap.ssrData : "";
-      const replacement = wrap ? `<${wrap.tagName}${wrap.attrs} ${SSR_ATTR}><template shadowrootmode="open">${innerHtml}</template>${lightDomData}</${wrap.tagName}>` : innerHtml;
-      result = result.slice(0, start) + replacement + result.slice(end);
-    }
-    return result;
-  };
-  return resolveRecursively(html, parse, resolve, replace);
-}
-function parseAttrsToParams(attrsString) {
-  const params = {};
-  if (!attrsString)
-    return params;
-  const attrPattern = /(?<attr>[a-z][a-z0-9-]*)(?:="(?<dq>[^"]*)"|='(?<sq>[^']*)'|=(?<uq>[^\s>]+))?/gi;
-  for (const match of attrsString.matchAll(attrPattern)) {
-    const { attr: attrName, dq, sq, uq } = match.groups;
-    if (attrName === SSR_ATTR || attrName === LAZY_ATTR)
-      continue;
-    const key = attrName.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    const rawValue = dq ?? sq ?? uq;
-    if (rawValue === void 0) {
-      params[key] = "";
-      continue;
+      console.error(`[emroute] Failed to load widget ${entry.modulePath}:`, e);
+      if (entry.files)
+        widgetFiles[entry.name] = entry.files;
     }
-    const raw = rawValue.replaceAll("&amp;", "&").replaceAll("&#39;", "'").replaceAll("&quot;", '"');
-    try {
-      params[key] = JSON.parse(raw);
-    } catch {
-      params[key] = raw;
+  }
+  if (manual) {
+    for (const widget of manual) {
+      registry.add(widget);
     }
   }
-  return params;
-}
-function escapeAttr(value) {
-  return value.replaceAll("&", "&amp;").replaceAll("'", "&#39;");
+  return { registry, widgetFiles };
 }
-
-// dist/src/renderer/ssr/ssr.renderer.js
-var SsrRenderer = class _SsrRenderer {
-  core;
-  widgets;
-  widgetFiles;
-  constructor(resolver, options = {}) {
-    this.core = new RouteCore(resolver, options);
-    this.widgets = options.widgets ?? null;
-    this.widgetFiles = options.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>`);
   }
-  /**
-   * Render a URL to a content string.
-   */
-  async render(url, signal) {
-    const matched = this.core.match(url);
-    if (!matched) {
-      const statusPage = this.core.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 };
-        } catch (e) {
-          logger.error(`[${this.label}] Failed to render 404 status page for ${url.pathname}`, e instanceof Error ? e : void 0);
-        }
+  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;
       }
-      return { content: this.renderStatusPage(404, url), status: 404 };
+    } else {
+      const imported = await importWidgets(discoveredWidgetEntries, runtime);
+      widgets = imported.registry;
+      widgetFiles = imported.widgetFiles;
     }
-    if (matched.route.type === "redirect") {
-      const module = await this.core.loadModule(matched.route.modulePath);
-      const redirectConfig = module.default;
-      assertSafeRedirect(redirectConfig.to);
-      return {
-        content: this.renderRedirect(redirectConfig.to),
-        status: redirectConfig.status ?? 301,
-        redirect: redirectConfig.to
-      };
+  }
+  let ssrHtmlRouter = null;
+  let ssrMdRouter = null;
+  function buildSsrRouters() {
+    if (spa === "only") {
+      ssrHtmlRouter = null;
+      ssrMdRouter = null;
+      return;
     }
-    const routeInfo = this.core.toRouteInfo(matched, url);
-    try {
-      const { content, title } = await this.renderPage(routeInfo, matched, signal);
-      return { content, status: 200, title };
-    } catch (error) {
-      if (error instanceof Response) {
-        const statusPage = this.core.getStatusPage(error.status);
-        if (statusPage) {
-          try {
-            const ri = { url, params: {} };
-            const result = await this.renderRouteContent(ri, statusPage, void 0, signal);
-            return {
-              content: this.stripSlots(result.content),
-              status: error.status,
-              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);
-          }
+    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 { content: this.renderStatusPage(error.status, url), status: error.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 });
       }
-      logger.error(`[${this.label}] Error rendering ${url.pathname}:`, error instanceof Error ? error : void 0);
-      const boundary = this.core.findErrorBoundary(url.pathname);
-      if (boundary) {
-        const result = await this.tryRenderErrorModule(boundary.modulePath, url, "boundary");
-        if (result)
-          return result;
+    }
+    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);
       }
-      const errorHandler = this.core.getErrorHandler();
-      if (errorHandler) {
-        const result = await this.tryRenderErrorModule(errorHandler.modulePath, url, "handler");
-        if (result)
-          return result;
+      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 });
       }
-      return { content: this.renderErrorPage(error, url), status: 500 };
     }
+    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 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);
+  }
+  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) {
+  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";
+    });
   }
+  return path;
+};
+var FetchRuntime = class extends Runtime {
+  origin;
   /**
-   * Render a matched page by composing the route hierarchy.
+   * @param origin — Server origin, e.g. `'http://localhost:4100'` or `location.origin`.
    */
-  async renderPage(routeInfo, matched, signal) {
-    const hierarchy = this.core.buildRouteHierarchy(matched.route.pattern);
-    const segments = [];
-    for (let i = 0; i < hierarchy.length; i++) {
-      const routePattern = hierarchy[i];
-      let route = this.core.findRoute(routePattern);
-      if (!route && routePattern === "/") {
-        route = DEFAULT_ROOT_ROUTE;
-      }
-      if (!route)
-        continue;
-      if (route === matched.route && routePattern !== matched.route.pattern)
-        continue;
-      segments.push({ route, isLeaf: i === hierarchy.length - 1 });
-    }
-    const results = await Promise.all(segments.map(({ route, isLeaf }) => this.renderRouteContent(routeInfo, route, isLeaf, signal)));
-    let result = "";
-    let pageTitle;
-    let lastRenderedPattern = "";
-    for (let i = 0; i < segments.length; i++) {
-      const { content, title } = results[i];
-      if (title) {
-        pageTitle = title;
-      }
-      if (result === "") {
-        result = content;
-      } 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.`);
-        }
-        result = injected;
-      }
-      lastRenderedPattern = segments[i].route.pattern;
-    }
-    result = this.stripSlots(result);
-    return { content: result, 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 content = this.renderContent(component, { data, params: routeInfo.params, context });
-    const title = component.getTitle({ data, params: routeInfo.params, context });
-    return { content, title };
+  constructor(origin, config = {}) {
+    super(config);
+    this.origin = origin.endsWith("/") ? origin.slice(0, -1) : origin;
   }
-  /** Render a component for error boundary/handler with minimal context. */
-  renderComponent(component, data, context) {
-    return this.renderContent(component, { data, params: {}, context });
+  handle(resource, init) {
+    const url = this.toUrl(resource);
+    return fetch(url, init);
   }
-  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 component = module.default;
-      const minCtx = {
-        url: _SsrRenderer.EMPTY_URL,
-        params: {},
-        pathname: "",
-        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);
-      return null;
+  query(resource, options) {
+    if (options?.as === "text") {
+      return fetch(this.toUrl(resource)).then((r) => r.text());
     }
+    return this.handle(resource, options);
   }
-};
-
-// dist/src/renderer/ssr/html.renderer.js
-var SsrHtmlRouter = class extends SsrRenderer {
-  label = "SSR HTML";
-  markdownRenderer;
-  markdownReady = null;
-  constructor(resolver, options = {}) {
-    super(resolver, options);
-    this.markdownRenderer = options.markdownRenderer ?? null;
-    if (this.markdownRenderer?.init) {
-      this.markdownReady = this.markdownRenderer.init();
-    }
+  async loadModule(path) {
+    const url = `${this.origin}${path}`;
+    const response = await fetch(url);
+    const js = await response.text();
+    const blob = new Blob([js], { type: "application/javascript" });
+    return import(__rewriteRelativeImportExtension2(URL.createObjectURL(blob)));
   }
-  injectSlot(parent, child, parentPattern) {
-    const escaped = parentPattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-    return parent.replace(new RegExp(`<router-slot\\b[^>]*\\bpattern="${escaped}"[^>]*></router-slot>`), child);
+  toUrl(resource) {
+    if (typeof resource === "string")
+      return `${this.origin}${resource}`;
+    if (resource instanceof URL)
+      return `${this.origin}${resource.pathname}${resource.search}`;
+    return `${this.origin}${new URL(resource.url).pathname}`;
   }
-  stripSlots(result) {
-    return result.replace(/<router-slot[^>]*><\/router-slot>/g, "");
+};
+
+// dist/src/renderer/spa/thin-client.js
+var EmrouteApp = class {
+  server;
+  appBase;
+  slot = null;
+  abortController = null;
+  constructor(server, options) {
+    const bp = options?.basePath ?? DEFAULT_BASE_PATH;
+    this.server = server;
+    this.appBase = bp.app;
   }
-  /**
-   * 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>` };
+  async initialize(slotSelector = "router-slot") {
+    this.slot = document.querySelector(slotSelector);
+    if (!this.slot) {
+      console.error("[EmrouteApp] Slot not found:", slotSelector);
+      return;
     }
-    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
-    let content = rawContent;
-    content = await this.expandMarkdown(content);
-    content = this.attributeSlots(content, route.pattern);
-    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);
+    if (!("navigation" in globalThis)) {
+      console.warn("[EmrouteApp] Navigation API not available");
+      return;
     }
-    return { content, title };
+    this.abortController = new AbortController();
+    const { signal } = this.abortController;
+    navigation.addEventListener("navigate", (event) => {
+      if (!event.canIntercept)
+        return;
+      if (event.hashChange)
+        return;
+      if (event.downloadRequest !== null)
+        return;
+      const url = new URL(event.destination.url);
+      if (!this.isAppPath(url.pathname))
+        return;
+      event.intercept({
+        scroll: "manual",
+        handler: async () => {
+          await this.handleNavigation(url, event.signal);
+          event.scroll();
+        }
+      });
+    }, { signal });
+    const ssrRoute = this.slot.getAttribute("data-ssr-route");
+    if (ssrRoute && (location.pathname === ssrRoute || location.pathname === ssrRoute + "/")) {
+      this.slot.removeAttribute("data-ssr-route");
+      return;
+    }
+    await this.handleNavigation(new URL(location.href), this.abortController.signal);
   }
-  renderContent(component, args) {
-    return component.renderHTML(args);
+  dispose() {
+    this.abortController?.abort();
+    this.abortController = null;
+    this.slot = null;
   }
-  renderRedirect(to) {
-    return `<meta http-equiv="refresh" content="0;url=${escapeHtml(to)}">`;
+  async navigate(url, options = {}) {
+    try {
+      const { finished } = navigation.navigate(url, {
+        state: options.state,
+        history: options.replace ? "replace" : "auto"
+      });
+      await finished;
+    } catch (e) {
+      if (e instanceof DOMException && e.name === "AbortError")
+        return;
+      throw e;
+    }
   }
-  renderStatusPage(status, url) {
-    return `
-      <h1>${STATUS_MESSAGES[status] ?? "Error"}</h1>
-      <p>Path: ${escapeHtml(url.pathname)}</p>
-    `;
+  isAppPath(pathname) {
+    return pathname === this.appBase || pathname.startsWith(this.appBase + "/");
   }
-  renderErrorPage(error, url) {
-    const message = error instanceof Error ? error.message : String(error);
-    return `
-      <h1>Error</h1>
-      <p>Path: ${escapeHtml(url.pathname)}</p>
-      <p>${escapeHtml(message)}</p>
-    `;
+  stripAppBase(pathname) {
+    if (pathname === this.appBase)
+      return "/";
+    if (pathname.startsWith(this.appBase + "/"))
+      return pathname.slice(this.appBase.length);
+    return pathname;
   }
-  /** 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;
-    if (!content.includes("<mark-down>"))
-      return content;
-    if (this.markdownReady) {
-      await this.markdownReady;
-    }
-    const renderer = this.markdownRenderer;
-    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;
-    });
+  async handleNavigation(url, signal) {
+    if (!this.slot || !this.server.htmlRouter)
+      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);
+      if (signal.aborted)
+        return;
+      if (redirect) {
+        assertSafeRedirect(redirect);
+        const target = redirect.startsWith("/") ? this.appBase + redirect : redirect;
+        navigation.navigate(target, { history: "replace" });
+        return;
+      }
+      if (document.startViewTransition) {
+        const transition = document.startViewTransition(() => {
+          this.slot.setHTMLUnsafe(content);
+        });
+        signal.addEventListener("abort", () => transition.skipTransition(), { once: true });
+        await transition.updateCallbackDone;
+      } else {
+        this.slot.setHTMLUnsafe(content);
+      }
+      if (title)
+        document.title = title;
+    } catch (error) {
+      if (signal.aborted)
+        return;
+      console.error("[EmrouteApp] Navigation error:", error);
+      if (this.slot) {
+        const message = error instanceof Error ? error.message : String(error);
+        this.slot.setHTMLUnsafe(`<h1>Error</h1><p>${escapeHtml(message)}</p>`);
+      }
+    }
   }
 };
-
-// dist/src/widget/widget.parser.js
-var WIDGET_PATTERN = /```widget:(?<name>[a-z][a-z0-9-]*)\n(?<params>.*?)```/gs;
-function parseWidgetBlocks(markdown) {
-  const blocks = [];
-  for (const match of markdown.matchAll(WIDGET_PATTERN)) {
-    const fullMatch = match[0];
-    const { name: widgetName, params: paramsRaw } = match.groups;
-    const paramsJson = paramsRaw.trim();
-    const startIndex = match.index;
-    const block = {
-      fullMatch,
-      widgetName,
-      params: null,
-      startIndex,
-      endIndex: startIndex + fullMatch.length
-    };
-    if (paramsJson) {
-      try {
-        const parsed = JSON.parse(paramsJson);
-        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
-          block.params = parsed;
-        } else {
-          block.parseError = "Params must be a JSON object";
-        }
-      } catch (e) {
-        block.parseError = `Invalid JSON: ${e instanceof Error ? e.message : String(e)}`;
-      }
-    } else {
-      block.params = {};
-    }
-    blocks.push(block);
-  }
-  return blocks;
-}
-function replaceWidgetBlocks(markdown, replacements) {
-  const sortedBlocks = [...replacements.entries()].sort(([a], [b]) => b.startIndex - a.startIndex);
-  let result = markdown;
-  for (const [block, replacement] of sortedBlocks) {
-    result = result.slice(0, block.startIndex) + replacement + result.slice(block.endIndex);
+async function createEmrouteApp(server, options) {
+  const g = globalThis;
+  if (g.__emroute_app) {
+    console.warn("eMroute: App already initialized.");
+    return g.__emroute_app;
   }
-  return result;
+  const app = new EmrouteApp(server, options);
+  await app.initialize();
+  g.__emroute_app = app;
+  return app;
 }
-
-// dist/src/renderer/ssr/md.renderer.js
-var BARE_SLOT_BLOCK = "```router-slot\n```";
-function routerSlotBlock(pattern) {
-  return `\`\`\`router-slot
-{"pattern":"${pattern}"}
-\`\`\``;
+async function bootEmrouteApp(options) {
+  const origin = options?.origin ?? location.origin;
+  const runtime = new FetchRuntime(origin);
+  const routesResponse = await runtime.handle(ROUTES_MANIFEST_PATH);
+  if (!routesResponse.ok) {
+    throw new Error(`[emroute] Failed to fetch ${ROUTES_MANIFEST_PATH}: ${routesResponse.status}`);
+  }
+  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();
+  for (const entry of widgetEntries) {
+    ComponentElement.registerLazy(entry.name, entry.files, moduleLoaders[entry.modulePath]);
+  }
+  const server = await createEmrouteServer({
+    routeTree,
+    widgets,
+    moduleLoaders,
+    markdownRenderer: MarkdownElement.getConfiguredRenderer() ?? void 0
+  }, runtime);
+  return createEmrouteApp(server, options);
 }
-var SsrMdRouter = class extends SsrRenderer {
-  label = "SSR MD";
-  constructor(resolver, options = {}) {
-    super(resolver, options);
-  }
-  injectSlot(parent, child, parentPattern) {
-    return parent.replace(routerSlotBlock(parentPattern), child);
+function buildLazyLoaders(tree, widgetEntries, 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);
   }
-  stripSlots(result) {
-    return result.replace(/```router-slot\n(?:\{[^}]*\}\n)?```/g, "").trim();
+  walk(tree);
+  for (const entry of widgetEntries)
+    paths.add(entry.modulePath);
+  const loaders = {};
+  for (const path of paths) {
+    const absolute = path.startsWith("/") ? path : "/" + path;
+    loaders[path] = () => runtime.loadModule(absolute);
   }
+  return loaders;
+}
+
+// dist/src/component/widget.component.js
+var WidgetComponent = class extends Component {
   /**
-   * Render a single route's content to Markdown.
+   * 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>`;
+   * }
+   * ```
    */
-  async renderRouteContent(routeInfo, route, isLeaf, signal) {
-    if (route.modulePath === DEFAULT_ROOT_ROUTE.modulePath) {
-      return { content: routerSlotBlock(route.pattern) };
+  renderHTML(args) {
+    const files = args.context.files;
+    const style = files?.css ? `<style>${scopeWidgetCss(files.css, this.name)}</style>
+` : "";
+    if (files?.html) {
+      return style + files.html;
     }
-    const { content: rawContent, title } = await this.loadRouteContent(routeInfo, route, isLeaf, signal);
-    let content = rawContent;
-    content = content.replaceAll(BARE_SLOT_BLOCK, routerSlotBlock(route.pattern));
-    if (this.widgets) {
-      content = await this.resolveWidgets(content, routeInfo);
+    if (files?.md) {
+      return `${style}<mark-down>${escapeHtml(files.md)}</mark-down>`;
     }
-    return { content, title };
-  }
-  renderContent(component, args) {
-    return component.renderMarkdown(args);
-  }
-  renderRedirect(to) {
-    return `Redirect to: ${to}`;
-  }
-  renderStatusPage(status, url) {
-    return `# ${STATUS_MESSAGES[status] ?? "Error"}
-
-Path: \`${url.pathname}\``;
-  }
-  renderErrorPage(_error, url) {
-    return `# Internal Server Error
-
-Path: \`${url.pathname}\``;
+    if (style) {
+      return style + super.renderHTML(args);
+    }
+    return super.renderHTML(args);
   }
   /**
-   * Resolve fenced widget blocks in markdown content.
-   * Replaces ```widget:name blocks with rendered markdown output.
+   * 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}`;
+   * }
+   * ```
    */
-  resolveWidgets(content, routeInfo) {
-    return resolveRecursively(content, parseWidgetBlocks, async (block) => {
-      if (block.parseError || !block.params) {
-        return `> **Error** (\`${block.widgetName}\`): ${block.parseError}`;
-      }
-      const widget = this.widgets.get(block.widgetName);
-      if (!widget) {
-        return `> **Error**: Unknown widget \`${block.widgetName}\``;
-      }
-      try {
-        let files;
-        const filePaths = this.widgetFiles[block.widgetName] ?? widget.files;
-        if (filePaths) {
-          files = await this.core.loadWidgetFiles(filePaths);
-        }
-        const baseContext = {
-          ...routeInfo,
-          pathname: routeInfo.url.pathname,
-          searchParams: routeInfo.url.searchParams,
-          files
-        };
-        const context = this.core.contextProvider ? this.core.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);
+  renderMarkdown(args) {
+    const files = args.context.files;
+    if (files?.md) {
+      return files.md;
+    }
+    return "";
   }
 };
 
-// dist/src/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");
-  let inCodeBlock = false;
-  for (let i = 0; i < lines.length; i++) {
-    if (lines[i].startsWith("```")) {
-      inCodeBlock = !inCodeBlock;
-      continue;
-    }
-    if (inCodeBlock)
-      continue;
-    lines[i] = lines[i].replaceAll(inlineRe, `](${prefix}`);
-    lines[i] = lines[i].replaceAll(refRe, `$1${prefix}`);
-  }
-  return lines.join("\n");
+// dist/src/overlay/overlay.css.js
+var overlayCSS = (
+  /* css */
+  `
+:root {
+  --overlay-backdrop: oklch(0% 0 0 / 0.5);
+  --overlay-surface: oklch(100% 0 0);
+  --overlay-radius: 8px;
+  --overlay-shadow: 0 8px 32px oklch(0% 0 0 / 0.2);
+  --overlay-toast-gap: 8px;
+  --overlay-toast-duration: 5s;
+  --overlay-z: 1000;
 }
 
-// dist/src/route/route-tree.util.js
-function resolveTargetNode(node, name, isRoot) {
-  if (name === "index") {
-    if (isRoot)
-      return node;
-    node.wildcard ??= { param: "rest", child: {} };
-    return node.wildcard.child;
-  }
-  if (name.startsWith("[") && name.endsWith("]")) {
-    const param = name.slice(1, -1);
-    node.dynamic ??= { param, child: {} };
-    return node.dynamic.child;
-  }
-  node.children ??= {};
-  node.children[name] ??= {};
-  return node.children[name];
-}
+/* --- Modal (dialog) --- */
 
-// dist/runtime/abstract.runtime.js
-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 {
-  config;
-  constructor(config = {}) {
-    this.config = config;
-    this.config = config;
-  }
-  /** Write. Defaults to PUT; pass `{ method: "DELETE" }` etc. to override. */
-  command(resource, options) {
-    return this.handle(resource, { method: "PUT", ...options });
-  }
-  /**
-   * 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}`);
-  }
-  // ── Manifest resolution ─────────────────────────────────────────────
-  routesManifestCache = null;
-  widgetsManifestCache = null;
-  /** Clear cached manifests so the next query triggers a fresh scan. */
-  invalidateManifests() {
-    this.routesManifestCache = null;
-    this.widgetsManifestCache = null;
+dialog[data-overlay-modal] {
+  border: none;
+  padding: 0;
+  background: var(--overlay-surface);
+  border-radius: var(--overlay-radius);
+  box-shadow: var(--overlay-shadow);
+  max-width: min(90vw, 560px);
+  max-height: 85vh;
+  overflow: auto;
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity 200ms,
+    translate 200ms;
+}
+
+dialog[data-overlay-modal][open] {
+  transition:
+    opacity 200ms,
+    translate 200ms,
+    display 200ms allow-discrete,
+    overlay 200ms allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    translate: 0 20px;
   }
-  /**
-   * 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();
-    const routesDir = this.config.routesDir ?? DEFAULT_ROUTES_DIR;
-    const dirResponse = await this.query(routesDir + "/");
-    if (dirResponse.status === 404) {
-      return new Response("Not Found", { status: 404 });
-    }
-    const tree = await this.scanRoutes(routesDir);
-    this.routesManifestCache = Response.json(tree);
-    return this.routesManifestCache.clone();
+}
+
+dialog[data-overlay-modal]::backdrop {
+  background: var(--overlay-backdrop);
+  opacity: 1;
+  transition: opacity 200ms;
+}
+
+dialog[data-overlay-modal][open]::backdrop {
+  transition:
+    opacity 200ms,
+    display 200ms allow-discrete,
+    overlay 200ms allow-discrete;
+
+  @starting-style {
+    opacity: 0;
   }
-  /**
-   * 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();
-    const widgetsDir = this.config.widgetsDir ?? DEFAULT_WIDGETS_DIR;
-    const dirResponse = await this.query(widgetsDir + "/");
-    if (dirResponse.status === 404) {
-      return new Response("Not Found", { status: 404 });
-    }
-    const entries = await this.scanWidgets(widgetsDir, widgetsDir.replace(/^\//, ""));
-    this.widgetsManifestCache = Response.json(entries);
-    return this.widgetsManifestCache.clone();
+}
+
+dialog[data-overlay-modal][data-dismissing] {
+  opacity: 0;
+  translate: 0 20px;
+}
+
+dialog[data-overlay-modal][data-dismissing]::backdrop {
+  opacity: 0;
+}
+
+/* --- Toast container --- */
+
+[data-overlay-toast-container] {
+  position: fixed;
+  bottom: 16px;
+  right: 16px;
+  z-index: var(--overlay-z);
+  display: flex;
+  flex-direction: column;
+  gap: var(--overlay-toast-gap);
+  pointer-events: none;
+}
+
+/* --- Toast item --- */
+
+[data-overlay-toast] {
+  pointer-events: auto;
+  background: var(--overlay-surface);
+  border-radius: var(--overlay-radius);
+  box-shadow: var(--overlay-shadow);
+  padding: 12px 16px;
+  animation: overlay-toast-auto var(--overlay-toast-duration, 5s) ease-in-out forwards;
+}
+
+/* Manual toast (timeout: 0): no auto-dismiss, entry transition only */
+[data-overlay-toast][data-toast-manual] {
+  animation: none;
+  opacity: 1;
+  translate: 0 0;
+  transition:
+    opacity 200ms,
+    translate 200ms;
+
+  @starting-style {
+    opacity: 0;
+    translate: 20px 0;
   }
-  // ── Scanning ──────────────────────────────────────────────────────────
-  async *walkDirectory(dir) {
-    const trailingDir = dir.endsWith("/") ? dir : dir + "/";
-    const response = await this.query(trailingDir);
-    const entries = await response.json();
-    for (const entry of entries) {
-      const path = `${trailingDir}${entry}`;
-      if (entry.endsWith("/")) {
-        yield* this.walkDirectory(path);
-      } else {
-        yield path;
-      }
-    }
+}
+
+/* Dismissed toast: CSS exit animation */
+[data-overlay-toast][data-dismissing] {
+  animation: overlay-toast-exit 200ms ease-in forwards;
+}
+
+@keyframes overlay-toast-auto {
+  0%   { opacity: 0; translate: 20px 0; }
+  10%  { opacity: 1; translate: 0 0; }
+  80%  { opacity: 1; translate: 0 0; }
+  100% { opacity: 0; translate: 0 0; display: none; }
+}
+
+@keyframes overlay-toast-exit {
+  to { opacity: 0; translate: 20px 0; display: none; }
+}
+
+/* --- Popover --- */
+
+[data-overlay-popover] {
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: var(--overlay-surface);
+  border-radius: var(--overlay-radius);
+  box-shadow: var(--overlay-shadow);
+  opacity: 1;
+  scale: 1;
+  transition:
+    opacity 200ms,
+    scale 200ms;
+}
+
+[data-overlay-popover]:popover-open {
+  position-anchor: auto;
+  inset: unset;
+  top: anchor(bottom);
+  left: anchor(start);
+  margin-top: 4px;
+  transition:
+    opacity 200ms,
+    scale 200ms,
+    display 200ms allow-discrete,
+    overlay 200ms allow-discrete;
+
+  @starting-style {
+    opacity: 0;
+    scale: 0.95;
   }
-  /**
-   * 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 = [];
-    for await (const file of this.walkDirectory(routesDir)) {
-      allFiles.push(file);
-    }
-    for (const filePath of allFiles) {
-      const relativePath = filePath.replace(`${routesDir}/`, "");
-      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)
-        continue;
-      const [, name, kind, ext] = match;
-      let node = root;
-      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;
-        continue;
-      }
-      const target = resolveTargetNode(node, name, dirSegments.length === 0);
-      if (kind === "redirect") {
-        target.redirect = filePath;
-      } else {
-        target.files ??= {};
-        target.files[ext] = filePath;
-      }
-    }
-    return root;
+}
+
+[data-overlay-popover][data-dismissing] {
+  opacity: 0;
+  scale: 0.95;
+}
+`
+);
+
+// dist/src/overlay/overlay.service.js
+var ANIMATION_SAFETY_TIMEOUT = 300;
+function animateDismiss(el, onDone) {
+  el.setAttribute("data-dismissing", "");
+  let done = false;
+  const finish = () => {
+    if (done)
+      return;
+    done = true;
+    onDone();
+  };
+  el.addEventListener("transitionend", finish, { once: true });
+  setTimeout(finish, ANIMATION_SAFETY_TIMEOUT);
+}
+function createOverlayService() {
+  let styleInjected = false;
+  let dialog = null;
+  let modalResolve = null;
+  let modalOnClose;
+  let toastContainer = null;
+  let popoverEl = null;
+  let popoverAnchorObserver = null;
+  const supportsAnchor = typeof CSS !== "undefined" && CSS.supports("anchor-name", "--a");
+  function injectCSS() {
+    if (styleInjected)
+      return;
+    styleInjected = true;
+    const style = document.createElement("style");
+    style.textContent = overlayCSS;
+    document.head.appendChild(style);
   }
-  async scanWidgets(widgetsDir, pathPrefix) {
-    const COMPANION_EXTENSIONS = ["html", "md", "css"];
-    const entries = [];
-    const trailingDir = widgetsDir.endsWith("/") ? widgetsDir : widgetsDir + "/";
-    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);
-      let moduleFile = `${name}.widget.ts`;
-      let modulePath = `${trailingDir}${name}/${moduleFile}`;
-      if ((await this.query(modulePath)).status === 404) {
-        moduleFile = `${name}.widget.js`;
-        modulePath = `${trailingDir}${name}/${moduleFile}`;
-        if ((await this.query(modulePath)).status === 404)
-          continue;
-      }
-      const prefix = pathPrefix ? `${pathPrefix}/` : "";
-      const entry = {
-        name,
-        modulePath: `${prefix}${name}/${moduleFile}`,
-        tagName: `widget-${name}`
-      };
-      const files = {};
-      let hasFiles = false;
-      for (const ext of COMPANION_EXTENSIONS) {
-        const companionFile = `${name}.widget.${ext}`;
-        const companionPath = `${trailingDir}${name}/${companionFile}`;
-        if ((await this.query(companionPath)).status !== 404) {
-          files[ext] = `${prefix}${name}/${companionFile}`;
-          hasFiles = true;
-        }
-      }
-      if (hasFiles)
-        entry.files = files;
-      entries.push(entry);
-    }
-    entries.sort((a, b) => a.name.localeCompare(b.name));
-    return entries;
+  function ensureDialog() {
+    if (dialog)
+      return dialog;
+    injectCSS();
+    dialog = document.createElement("dialog");
+    dialog.setAttribute("data-overlay-modal", "");
+    document.body.appendChild(dialog);
+    dialog.addEventListener("click", (e) => {
+      if (e.target === dialog) {
+        closeModal(void 0);
+      }
+    });
+    return dialog;
   }
-};
-
-// 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);
+  function ensureToastContainer() {
+    if (toastContainer)
+      return toastContainer;
+    injectCSS();
+    toastContainer = document.createElement("div");
+    toastContainer.setAttribute("data-overlay-toast-container", "");
+    document.body.appendChild(toastContainer);
+    return toastContainer;
   }
-  walk(tree);
-  const loaders = {};
-  for (const path of paths) {
-    loaders[path] = () => runtime.loadModule(path);
+  function ensurePopover() {
+    if (popoverEl)
+      return popoverEl;
+    injectCSS();
+    popoverEl = document.createElement("div");
+    popoverEl.setAttribute("data-overlay-popover", "");
+    popoverEl.setAttribute("popover", "");
+    document.body.appendChild(popoverEl);
+    return popoverEl;
   }
-  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();
+  function modal(options) {
+    const d = ensureDialog();
+    d.removeAttribute("data-dismissing");
+    hidePopoverImmediate();
+    if (d.open) {
+      d.close();
+      if (modalResolve) {
+        modalResolve(void 0);
+        modalResolve = null;
+      }
+      if (modalOnClose) {
+        modalOnClose();
+        modalOnClose = void 0;
+      }
     }
+    d.innerHTML = "";
+    options.render(d);
+    modalOnClose = options.onClose;
+    const { promise, resolve } = Promise.withResolvers();
+    modalResolve = resolve;
+    d.showModal();
+    return promise;
   }
-  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)
-        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;
+  function closeModal(value) {
+    if (!dialog || !dialog.open)
+      return;
+    const resolve = modalResolve;
+    const onClose = modalOnClose;
+    const dialogRef = dialog;
+    modalResolve = null;
+    modalOnClose = void 0;
+    animateDismiss(dialogRef, () => {
+      if (dialogRef && dialogRef.open) {
+        dialogRef.close();
+        if (resolve)
+          resolve(value);
+        if (onClose)
+          onClose();
       }
-    } 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);
+  function clearDeadToasts(container) {
+    for (const child of [...container.children]) {
+      const el = child;
+      if (el.hasAttribute("data-dismissing")) {
+        el.remove();
+      }
     }
   }
-  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.`);
+  function toast(options) {
+    const container = ensureToastContainer();
+    clearDeadToasts(container);
+    const el = document.createElement("div");
+    el.setAttribute("data-overlay-toast", "");
+    const timeout = options.timeout ?? 0;
+    if (timeout === 0) {
+      el.setAttribute("data-toast-manual", "");
+    } else {
+      el.style.setProperty("--overlay-toast-duration", `${timeout}ms`);
     }
-    routeTree = await manifestResponse.json();
+    options.render(el);
+    container.appendChild(el);
+    let dismissed = false;
+    const dismiss = () => {
+      if (dismissed)
+        return;
+      dismissed = true;
+      el.setAttribute("data-dismissing", "");
+    };
+    return { dismiss };
   }
-  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;
-      }
+  function popover(options) {
+    const el = ensurePopover();
+    cleanupPopoverAnchorObserver();
+    try {
+      el.hidePopover();
+    } catch {
+    }
+    el.removeAttribute("data-dismissing");
+    el.innerHTML = "";
+    options.render(el);
+    if (supportsAnchor) {
+      const anchorName = "--overlay-anchor";
+      options.anchor.style.setProperty("anchor-name", anchorName);
+      el.style.setProperty("position-anchor", anchorName);
+      el.style.removeProperty("top");
+      el.style.removeProperty("left");
     } else {
-      const imported = await importWidgets(discoveredWidgetEntries, runtime);
-      widgets = imported.registry;
-      widgetFiles = imported.widgetFiles;
+      const rect = options.anchor.getBoundingClientRect();
+      el.style.top = `${rect.bottom + globalThis.scrollY}px`;
+      el.style.left = `${rect.left + globalThis.scrollX}px`;
+      el.style.position = "absolute";
     }
+    el.showPopover();
+    watchAnchorDisconnect(options.anchor);
   }
-  let ssrHtmlRouter = null;
-  let ssrMdRouter = null;
-  function buildSsrRouters() {
-    if (spa === "only") {
-      ssrHtmlRouter = null;
-      ssrMdRouter = null;
+  function watchAnchorDisconnect(anchor) {
+    cleanupPopoverAnchorObserver();
+    const parent = anchor.parentNode;
+    if (!parent) {
+      closePopover();
       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
+    popoverAnchorObserver = new MutationObserver(() => {
+      if (!document.contains(anchor)) {
+        closePopover();
+      }
     });
+    popoverAnchorObserver.observe(parent, { childList: true });
   }
-  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>');
+  function hidePopoverImmediate() {
+    cleanupPopoverAnchorObserver();
+    if (!popoverEl)
+      return;
+    try {
+      popoverEl.hidePopover();
+    } catch {
+    }
+    popoverEl.removeAttribute("data-dismissing");
   }
-  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 });
-      }
+  function cleanupPopoverAnchorObserver() {
+    if (popoverAnchorObserver) {
+      popoverAnchorObserver.disconnect();
+      popoverAnchorObserver = null;
     }
-    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);
-      }
+  }
+  function closePopover() {
+    cleanupPopoverAnchorObserver();
+    if (!popoverEl)
+      return;
+    let isOpen;
+    try {
+      isOpen = popoverEl.matches(":popover-open");
+    } catch {
+      isOpen = popoverEl.hasAttribute("popover") && popoverEl.style.display !== "none";
+    }
+    if (!isOpen)
+      return;
+    animateDismiss(popoverEl, () => {
       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 });
+        popoverEl.hidePopover();
+      } catch {
       }
+    });
+  }
+  function dismissAll() {
+    if (dialog && dialog.open) {
+      const resolve = modalResolve;
+      const onClose = modalOnClose;
+      modalResolve = null;
+      modalOnClose = void 0;
+      dialog.removeAttribute("data-dismissing");
+      dialog.close();
+      if (resolve)
+        resolve(void 0);
+      if (onClose)
+        onClose();
     }
-    if (pathname.startsWith(appPrefix) || pathname === appBase) {
-      return new Response(shell, {
-        status: 200,
-        headers: { "Content-Type": "text/html; charset=utf-8" }
-      });
+    hidePopoverImmediate();
+    if (toastContainer) {
+      for (const child of toastContainer.children) {
+        child.setAttribute("data-dismissing", "");
+      }
     }
-    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" }
-      });
+    try {
+      for (const el of document.querySelectorAll(":popover-open")) {
+        el.hidePopover();
+      }
+    } catch {
     }
-    const lastSegment = pathname.split("/").pop() ?? "";
-    if (lastSegment.includes(".")) {
-      const fileResponse = await runtime.handle(pathname);
-      if (fileResponse.status === 200)
-        return fileResponse;
-      return null;
+    for (const el of document.querySelectorAll("dialog[open]")) {
+      if (el !== dialog)
+        el.close();
     }
-    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);
   }
   return {
-    handleRequest,
-    get htmlRouter() {
-      return ssrHtmlRouter;
-    },
-    get mdRouter() {
-      return ssrMdRouter;
-    },
-    get routeTree() {
-      return routeTree;
-    },
-    get widgetEntries() {
-      return discoveredWidgetEntries;
-    },
-    get shell() {
-      return shell;
-    }
+    modal,
+    closeModal,
+    toast,
+    popover,
+    closePopover,
+    dismissAll
   };
 }
 
-// dist/runtime/fetch.runtime.js
-var __rewriteRelativeImportExtension2 = 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";
-    });
+// dist/src/widget/page-title.widget.js
+var PageTitleWidget = class extends WidgetComponent {
+  name = "page-title";
+  getData(args) {
+    return Promise.resolve({ title: args.params.title });
   }
-  return path;
-};
-var FetchRuntime = class 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;
+  renderHTML(args) {
+    const title = args.data?.title ?? args.params.title;
+    if (title && typeof document !== "undefined") {
+      document.title = title;
+    }
+    return "";
   }
-  handle(resource, init) {
-    const url = this.toUrl(resource);
-    return fetch(url, init);
+  renderMarkdown(_args) {
+    return "";
   }
-  query(resource, options) {
-    if (options?.as === "text") {
-      return fetch(this.toUrl(resource)).then((r) => r.text());
+  validateParams(params) {
+    if (!params.title || typeof params.title !== "string") {
+      return 'page-title widget requires a "title" string param';
     }
-    return this.handle(resource, options);
+    return void 0;
   }
-  async loadModule(path) {
-    const url = `${this.origin}${path}`;
-    const response = await fetch(url);
-    const js = await response.text();
-    const blob = new Blob([js], { type: "application/javascript" });
-    return import(__rewriteRelativeImportExtension2(URL.createObjectURL(blob)));
+};
+
+// dist/src/widget/breadcrumb.widget.js
+var DEFAULT_HTML_SEPARATOR = " \u203A ";
+var DEFAULT_MD_SEPARATOR = " > ";
+var BreadcrumbWidget = class extends WidgetComponent {
+  name = "breadcrumb";
+  getData(args) {
+    const pathname = args.context.pathname || "/";
+    const parts = pathname.split("/").filter(Boolean);
+    const segments = [
+      { label: "Home", href: "/" }
+    ];
+    let accumulated = "";
+    for (const part of parts) {
+      accumulated += "/" + part;
+      segments.push({
+        label: part.charAt(0).toUpperCase() + part.slice(1).replace(/-/g, " "),
+        href: accumulated
+      });
+    }
+    return Promise.resolve({ segments });
   }
-  toUrl(resource) {
-    if (typeof resource === "string")
-      return `${this.origin}${resource}`;
-    if (resource instanceof URL)
-      return `${this.origin}${resource.pathname}${resource.search}`;
-    return `${this.origin}${new URL(resource.url).pathname}`;
+  renderHTML(args) {
+    if (!args.data || args.data.segments.length === 0)
+      return "";
+    const sep = args.params.separator ?? DEFAULT_HTML_SEPARATOR;
+    const segments = args.data.segments;
+    const items = segments.map((seg, i) => {
+      const escaped = escapeHtml(seg.label);
+      if (i === segments.length - 1) {
+        return `<span aria-current="page">${escaped}</span>`;
+      }
+      return `<a href="${escapeHtml(seg.href)}">${escaped}</a>`;
+    });
+    return `<nav aria-label="Breadcrumb">${items.join(escapeHtml(sep))}</nav>`;
+  }
+  renderMarkdown(args) {
+    if (!args.data || args.data.segments.length === 0)
+      return "";
+    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"))
+    customElements.define("router-slot", RouterSlot);
+  if (!customElements.get("mark-down"))
+    customElements.define("mark-down", MarkdownElement);
+}
 export {
   BreadcrumbWidget,
   Component,
@@ -2747,6 +2869,7 @@ export {
   RouterSlot,
   WidgetComponent,
   WidgetRegistry,
+  bootEmrouteApp,
   createEmrouteApp,
   createEmrouteServer,
   createOverlayService,