@iyulab/router 0.5.3 → 0.6.1

package/README.md

@@ -6,13 +6,9 @@ A modern, lightweight client-side router for web applications with support for b
 
 - 🚀 **Modern URLPattern-based routing** - Uses native URLPattern API for powerful path matching
 - 🔧 **Unified Framework Support** - Works with both Lit and React components using render functions
-- 📱 **Client-side Navigation** - History API integration with browser back/forward support
+- 📱 **Client-Side Navigation** - History API integration with browser back/forward support
 - 🎯 **Nested Routing** - Support for deeply nested route hierarchies with index and path routes
-- 🔗 **Smart Link Component** - Automatic external link detection and handling
 - 📊 **Route Events** - Track navigation progress with route-begin, route-done, and route-error events
-- 🎨 **Flexible Outlet System** - Unified rendering with renderContent method
-- 🌐 **Global Route Access** - Access current route information anywhere via `window.route`
-- 🔄 **Force Re-rendering** - Control component re-rendering on route changes
 - ⚠️ **Enhanced Error Handling** - Built-in ErrorPage component with improved styling
 
 ## Installation
@@ -30,43 +26,18 @@ import { Router } from '@iyulab/router';
 import { html } from 'lit';
 
 const router = new Router({
-  root: document.getElementById('app')!,
-  basepath: '/app',
+  basepath: '/',
   routes: [
     {
       index: true,
       render: () => html`<home-page></home-page>`
     },
     {
-      path: '/user/:id',
+      path: '/user/:id', // URLPattern route
       render: (routeInfo) => html`<user-page .userId=${routeInfo.params.id}></user-page>`
     }
-  ]
+  ],
 });
-
-// Start routing
-router.go(window.location.href);
-```
-
-### Nested Routes
-
-```typescript
-const routes = [
-  {
-    path: '/dashboard',
-    render: () => html`<dashboard-layout><u-outlet></u-outlet></dashboard-layout>`,
-    children: [
-      {
-        index: true, // Matches /dashboard exactly
-        render: () => html`<dashboard-home></dashboard-home>`
-      },
-      {
-        path: 'settings',
-        render: () => html`<dashboard-settings></dashboard-settings>`
-      }
-    ]
-  }
-];
 ```
 
 ### Mixed Framework Support
@@ -78,12 +49,16 @@ const routes = [
   // Lit component
   {
     path: '/lit-page',
-    render: (routeInfo) => html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+    render: (routeInfo) => {
+      return html`<my-lit-component .routeInfo=${routeInfo}></my-lit-component>`
+    }
   },
   // React component
   {
     path: '/react-page',
-    render: (routeInfo) => React.createElement(MyReactComponent, { routeInfo })
+    render: (routeInfo) => {
+      return ( <MyComponent></MyComponent> )
+    }
   },
   // HTML element
   {
@@ -97,14 +72,39 @@ const routes = [
 ];
 ```
 
+### Nested Routes
+
+```typescript
+import { RouteConfig } from '@iyulab/router';
+
+const routes: RouteConfig[] = [
+  {
+    path: '/dashboard',
+    render: () => html`<dashboard-layout><u-outlet></u-outlet></dashboard-layout>`,
+    children: [
+      {
+        index: true, // Matches '/dashboard'
+        render: () => html`<dashboard-home></dashboard-home>`
+      },
+      {
+        path: 'settings', // Matches '/dashboard/settings'
+        render: () => html`<dashboard-settings></dashboard-settings>`
+      }
+    ]
+  }
+];
+```
+
 ## Usage Examples
 
-### Using with Lit Components
+### Using with Lit Elements
 
 ```typescript
 import { LitElement, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
+import "@iyulab/router";
+
 @customElement('app-root')
 export class AppRoot extends LitElement {
   render() {
@@ -126,38 +126,24 @@ export class AppRoot extends LitElement {
 
 ```tsx
 import React from 'react';
-import { Outlet, Link } from '@iyulab/router';
+import { UOutlet, ULink } from '@iyulab/router/react';
 
 export function AppRoot() {
   return (
     <div>
       <nav>
-        <Link href="/">Home</Link>
-        <Link href="/about">About</Link>
-        <Link href="/user/123">User Profile</Link>
+        <ULink href="/">Home</ULink>
+        <ULink href="/about">About</ULink>
+        <ULink href="/user/123">User Profile</ULink>
       </nav>
       <main>
-        <Outlet />
+        <UOutlet />
       </main>
     </div>
   );
 }
 ```
 
-## Browser Support
-
-- **URLPattern API**: Required for routing functionality
-- **Modern browsers**: Chrome 95+, Firefox 106+, Safari 16.4+
-- **Polyfill**: Consider using [urlpattern-polyfill](https://www.npmjs.com/package/urlpattern-polyfill) for older browsers
-
-## Contributing
-
-1. Fork the repository
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
-
 ## License
 
-MIT License - see [LICENSE](LICENSE) file for details.
+MIT License - see [LICENSE](LICENSE) file for details.

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSResult } from 'lit';
 import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
 import { ReactElement } from 'react';
-import { ReactWebComponent } from '@lit/react';
 import { TemplateResult } from 'lit';
 import { TemplateResult as TemplateResult_2 } from 'lit-html';
 
@@ -119,47 +119,6 @@ declare interface IndexRouteConfig extends BaseRouteConfig {
     index: true;
 }
 
-/**
- * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
- * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 새로운 페이지로 이동합니다.
- * - 마우스 중간 버튼 클릭 또는 Ctrl 키를 누르면 새로운 탭에서 엽니다.
- */
-export declare class Link extends LitElement {
-    /** 외부 링크 여부 */
-    private isExternal;
-    /** a 태그의 href 속성 및 새로운 페이지로 이동할 때 사용될 링크입니다. */
-    anchorHref: string;
-    /**
-     * - 속성을 정의하지 않으면 basepath로 이동합니다.
-     * - http 로 시작하면 새로운 페이지를 로드합니다.
-     * - 절대경로일 경우 basepath로 시작하면 클라이언트 라우팅을 합니다. 그렇지 않으면 새로운 페이지를 로드합니다.
-     * - 상대경로로 시작하면 (현재의 basepath + 상대경로)로 클라이언트 라우팅을 합니다.
-     * - ?로 시작하면 현재 경로에 쿼리스트링을 추가하고, 클라이언트 라우팅을 합니다.
-     * - #으로 시작하면 현재 경로에 해시를 추가하고, hashchange 이벤트를 발생시킵니다.
-     */
-    href?: string;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected updated(changedProperties: any): Promise<void>;
-    render(): TemplateResult_2<1>;
-    /**
-     * 링크 엘리먼트의 마우스 이벤트 핸들러
-     * - 새로운 탭에서 열기: 마우스 중간 버튼 또는 Ctrl 키를 누릅니다.
-     * - 새로운 페이지로 이동: http로 시작하거나 절대경로일 경우 새로운 페이지로 이동합니다.
-     * - 클라이언트 라우팅: 상대경로로 시작하면 클라이언트 라우팅을 합니다.
-     */
-    private handleMouseDown;
-    /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
-    private dispatchPopstate;
-    /** 클라이언트 라우팅을 위해 hashchange 이벤트를 발생시킵니다. */
-    private dispatchHashchange;
-    /** 기본 a 태그의 클릭 이벤트를 막습니다. */
-    private preventClickEvent;
-    /** a 태그에 주입할 href 값을 계산합니다. */
-    private getAnchorHref;
-    static styles: CSSResult;
-}
-
 declare interface NonIndexRouteConfig extends BaseRouteConfig {
     /**
      * 인덱스 라우트가 아님을 나타냅니다.
@@ -179,28 +138,6 @@ export declare class NotFoundError extends RouteError {
     constructor(path: string, original?: Error | any);
 }
 
-/**
- * 라우트 아웃렛 컴포넌트
- * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
- */
-export declare class Outlet extends LitElement {
-    private routeId?;
-    private container?;
-    private content?;
-    /** 쉐도우를 사용하지 않고, 직접 렌더링합니다. */
-    protected createRenderRoot(): this;
-    render(): TemplateResult<1>;
-    /**
-     * render 함수의 결과를 렌더링합니다.
-     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
-     */
-    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
-    /**
-     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
-     */
-    clear(): void;
-}
-
 /**
  * u-outlet 요소를 찾을 수 없을 때 발생하는 에러
  */
@@ -360,7 +297,7 @@ export declare class RouteProgressEvent extends RouteEvent {
 }
 
 /**
- * `lit-element`와 `react-component` 기반의 클라이언트 사이드 라우터
+ * `lit-element`, `react`를 지원하는 클라이언트 사이드 라우터
  */
 export declare class Router {
     private readonly _rootElement;
@@ -388,7 +325,7 @@ export declare class Router {
     /** 브라우저 히스토리 이벤트가 발생시 라우팅 처리 */
     private handleWindowPopstate;
     /** 클릭 이벤트에서 라우터로 처리할 앵커를 찾아 클라이언트 라우팅 수행 */
-    private handleRootClick;
+    private handleDocumentClick;
 }
 
 /**
@@ -429,9 +366,67 @@ export declare interface RouterConfig {
     initialLoad?: boolean;
 }
 
-export declare const ULink: ReactWebComponent<Link, {}>;
+/**
+ * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
+ * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
+ * - Ctrl/Meta/Shift/Alt, 중클릭/우클릭 등은 브라우저 기본 동작(새 탭, 컨텍스트 메뉴 등)을 그대로 유지합니다.
+ */
+export declare class ULink extends LitElement {
+    /** 외부 링크 여부 */
+    private isExternal;
+    /**
+     * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
+     * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
+     */
+    target?: string;
+    /**
+     * - 속성을 정의하지 않으면 basepath로 이동합니다.
+     * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
+     * - 절대경로(/...)일 경우 basepath로 시작하면 SPA 라우팅 대상이 될 수 있습니다.
+     * - 상대경로는 (basepath + 상대경로)로 SPA 라우팅 대상이 될 수 있습니다.
+     * - ?로 시작하면 현재 pathname에 쿼리스트링을 붙여 SPA 라우팅합니다.
+     * - #으로 시작하면 현재 URL에 해시만 바꾸고(브라우저 기본) 동작합니다.
+     */
+    href?: string;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult_2<1>;
+    /** basepath를 state에서 꺼내는 헬퍼 */
+    private getBasepath;
+    /** a 태그에 주입할 href 값을 계산합니다. */
+    private computeHref;
+    /**
+     * 클릭 가로채기 규칙
+     * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
+     * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
+     */
+    private handleAnchorClick;
+    /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
+    private dispatchPopstate;
+    static styles: CSSResult;
+}
 
-export declare const UOutlet: ReactWebComponent<Outlet, {}>;
+/**
+ * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
+ */
+export declare class UOutlet extends LitElement {
+    private routeId?;
+    private container?;
+    private content?;
+    /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
+    protected createRenderRoot(): this;
+    /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+    connectedCallback(): void;
+    render(): TemplateResult<1>;
+    /**
+     * render 함수의 결과를 렌더링합니다.
+     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+     */
+    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
+    /**
+     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+     */
+    clear(): void;
+}
 
 export { }
 
@@ -442,9 +437,4 @@ declare global {
     'route-done': RouteDoneEvent;
     'route-error': RouteErrorEvent;
   }
-
-  interface HTMLElementTagNameMap {
-    'u-link': Link;
-    'u-outlet': Outlet;
-  }
 }

package/dist/index.js

@@ -1,269 +1,8 @@
-import React from "react";
-import { LitElement, html, css, render } from "lit";
-import { state, property, customElement } from "lit/decorators.js";
-import { createRoot } from "react-dom/client";
+import { a as absolutePath, i as isExternalUrl, p as parseUrl } from "./share-SPj-xl6y.js";
+import { b, U } from "./share-SPj-xl6y.js";
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
 import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
-const e = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), n = /* @__PURE__ */ new WeakMap(), t = (e2, t2, o2, l, a) => {
-  const s = a?.[t2];
-  void 0 === s ? (e2[t2] = o2, null == o2 && t2 in HTMLElement.prototype && e2.removeAttribute(t2)) : o2 !== l && ((e3, t3, o3) => {
-    let l2 = n.get(e3);
-    void 0 === l2 && n.set(e3, l2 = /* @__PURE__ */ new Map());
-    let a2 = l2.get(t3);
-    void 0 !== o3 ? void 0 === a2 ? (l2.set(t3, a2 = { handleEvent: o3 }), e3.addEventListener(t3, a2)) : a2.handleEvent = o3 : void 0 !== a2 && (l2.delete(t3), e3.removeEventListener(t3, a2));
-  })(e2, s, o2);
-}, o = ({ react: n2, tagName: o2, elementClass: l, events: a, displayName: s }) => {
-  const c = new Set(Object.keys(a ?? {})), r = n2.forwardRef(((s2, r2) => {
-    const i = n2.useRef(/* @__PURE__ */ new Map()), d = n2.useRef(null), f = {}, u = {};
-    for (const [n3, t2] of Object.entries(s2)) e.has(n3) ? f["className" === n3 ? "class" : n3] = t2 : c.has(n3) || n3 in l.prototype ? u[n3] = t2 : f[n3] = t2;
-    return n2.useLayoutEffect((() => {
-      if (null === d.current) return;
-      const e2 = /* @__PURE__ */ new Map();
-      for (const n3 in u) t(d.current, n3, s2[n3], i.current.get(n3), a), i.current.delete(n3), e2.set(n3, s2[n3]);
-      for (const [e3, n3] of i.current) t(d.current, e3, void 0, n3, a);
-      i.current = e2;
-    })), n2.useLayoutEffect((() => {
-      d.current?.removeAttribute("defer-hydration");
-    }), []), f.suppressHydrationWarning = true, n2.createElement(o2, { ...f, ref: n2.useCallback(((e2) => {
-      d.current = e2, "function" == typeof r2 ? r2(e2) : null !== r2 && (r2.current = e2);
-    }), [r2]) });
-  }));
-  return r.displayName = s ?? l.name, r;
-};
-function isExternalUrl(url) {
-  if (!url) return false;
-  const s = url.trim();
-  if (/^(?:mailto:|tel:|javascript:)/i.test(s)) return true;
-  if (s.startsWith("//")) return true;
-  try {
-    const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
-    const parsed = new URL(s, base);
-    if (/^(?:ftp:|ftps:|data:|ws:|wss:)/i.test(parsed.protocol)) return true;
-    return parsed.origin !== new URL(base).origin;
-  } catch {
-    return false;
-  }
-}
-function parseUrl(url, basepath) {
-  let urlObj;
-  basepath = catchBasePath(basepath);
-  if (url.startsWith("http")) {
-    urlObj = new URL(url);
-  } else if (url.startsWith("/")) {
-    urlObj = new URL(url, window.location.origin);
-  } else if (url.startsWith("?")) {
-    urlObj = new URL(window.location.pathname + url, window.location.origin);
-  } else if (url.startsWith("#")) {
-    urlObj = new URL(window.location.pathname + window.location.search + url, window.location.origin);
-  } else {
-    urlObj = new URL(absolutePath(basepath, url), window.location.origin);
-  }
-  return {
-    href: urlObj.href,
-    origin: urlObj.origin,
-    basepath,
-    path: urlObj.href.replace(urlObj.origin, ""),
-    pathname: urlObj.pathname,
-    query: new URLSearchParams(urlObj.search),
-    hash: urlObj.hash,
-    params: {},
-    progress: () => {
-    }
-  };
-}
-function absolutePath(...paths) {
-  paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
-  if (paths.length === 0) return "/";
-  return "/" + paths.join("/");
-}
-function catchBasePath(basepath) {
-  if (basepath === "/") return basepath;
-  let pattern = new URLPattern({ pathname: basepath + "/*" });
-  let match = pattern.exec({ pathname: window.location.pathname });
-  if (match) {
-    const rawPath = match.pathname.input;
-    const restPath = match.pathname.groups?.["0"];
-    return restPath ? rawPath.replace("/" + restPath, "") : rawPath.slice(0, -1);
-  }
-  pattern = new URLPattern({ pathname: `${basepath}{/}?` });
-  match = pattern.exec({ pathname: window.location.pathname });
-  if (match) {
-    return match.pathname.input;
-  }
-  return basepath;
-}
-var __defProp$1 = Object.defineProperty;
-var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = void 0;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = decorator(target, key, result) || result;
-  if (result) __defProp$1(target, key, result);
-  return result;
-};
-const _Link = class _Link extends LitElement {
-  constructor() {
-    super(...arguments);
-    this.isExternal = false;
-    this.anchorHref = "#";
-    this.handleMouseDown = (event) => {
-      const isNonNavigationClick = event.button === 2 || event.metaKey || event.shiftKey || event.altKey;
-      if (event.defaultPrevented || isNonNavigationClick) return;
-      event.preventDefault();
-      event.stopPropagation();
-      const basepath = window.history.state?.basepath || "";
-      if (event.button === 1 || event.ctrlKey) {
-        window.open(this.anchorHref, "_blank");
-      } else if (!this.href) {
-        this.dispatchPopstate(basepath, basepath);
-      } else if (this.isExternal || this.href.startsWith("/") && !this.href.startsWith(basepath)) {
-        window.location.href = this.href;
-      } else if (this.href.startsWith("#")) {
-        const url = window.location.pathname + window.location.search + this.href;
-        this.dispatchHashchange(basepath, url);
-      } else if (this.href.startsWith("?")) {
-        const url = window.location.pathname + this.href;
-        this.dispatchPopstate(basepath, url);
-      } else {
-        const url = absolutePath(basepath, this.href);
-        this.dispatchPopstate(basepath, url);
-      }
-    };
-    this.preventClickEvent = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.addEventListener("mousedown", this.handleMouseDown);
-  }
-  disconnectedCallback() {
-    this.removeEventListener("mousedown", this.handleMouseDown);
-    super.disconnectedCallback();
-  }
-  async updated(changedProperties) {
-    super.updated(changedProperties);
-    await this.updateComplete;
-    if (changedProperties.has("href")) {
-      this.isExternal = isExternalUrl(this.href || "");
-      this.anchorHref = this.getAnchorHref(this.href);
-    }
-  }
-  render() {
-    return html`
-      <a href=${this.anchorHref} @click=${this.preventClickEvent}>
-        <slot></slot>
-      </a>
-    `;
-  }
-  /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
-  dispatchPopstate(basepath, url) {
-    window.history.pushState({ basepath }, "", url);
-    window.dispatchEvent(new PopStateEvent("popstate"));
-  }
-  /** 클라이언트 라우팅을 위해 hashchange 이벤트를 발생시킵니다. */
-  dispatchHashchange(basepath, url) {
-    window.history.pushState({ basepath }, "", url);
-    window.dispatchEvent(new HashChangeEvent("hashchange"));
-  }
-  /** a 태그에 주입할 href 값을 계산합니다. */
-  getAnchorHref(href) {
-    const basepath = window.history.state?.basepath || "";
-    if (!href) {
-      return window.location.origin + basepath;
-    }
-    if (this.isExternal || href.startsWith("/") || href.startsWith("#") || href.startsWith("?")) {
-      return href;
-    }
-    return absolutePath(basepath, href);
-  }
-};
-_Link.styles = css`
-    :host {
-      display: inline-flex;
-      cursor: pointer;
-    }
-
-    a {
-      display: contents;
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-let Link = _Link;
-__decorateClass$1([
-  state()
-], Link.prototype, "anchorHref");
-__decorateClass$1([
-  property({ type: String })
-], Link.prototype, "href");
-class Outlet extends LitElement {
-  /** 쉐도우를 사용하지 않고, 직접 렌더링합니다. */
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return html`${this.container}`;
-  }
-  /**
-   * render 함수의 결과를 렌더링합니다.
-   * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
-   */
-  async renderContent({ id, content, force }) {
-    if (this.routeId === id && force === false && this.container) {
-      return this.container;
-    }
-    this.routeId = id;
-    this.clear();
-    if (!this.container) {
-      throw new Error("Outlet container is not initialized.");
-    }
-    if (typeof content !== "object") {
-      throw new Error("Content is not a valid renderable object.");
-    }
-    if (content instanceof HTMLElement) {
-      this.container.appendChild(content);
-    } else if ("_$litType$" in content) {
-      this.content = render(content, this.container);
-    } else if ("$$typeof" in content) {
-      this.content = createRoot(this.container);
-      this.content.render(content);
-    } else {
-      throw new Error("not supported content type for Outlet rendering.");
-    }
-    this.requestUpdate();
-    await this.updateComplete;
-    return this.container;
-  }
-  /**
-   * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
-   */
-  clear() {
-    if (this.content) {
-      if ("unmount" in this.content) {
-        this.content.unmount();
-      }
-      if ("setConnected" in this.content) {
-        this.content.setConnected(false);
-      }
-      this.content = void 0;
-    }
-    this.container = document.createElement("div");
-    this.container.style.display = "contents";
-  }
-}
-customElements.define("u-link", Link);
-customElements.define("u-outlet", Outlet);
-const ULink = o({
-  react: React,
-  tagName: "u-link",
-  elementClass: Link
-});
-const UOutlet = o({
-  react: React,
-  tagName: "u-outlet",
-  elementClass: Outlet
-});
 class RouteError extends Error {
   constructor(code, message, original) {
     super(message);
@@ -335,100 +74,51 @@ class RouteErrorEvent extends RouteEvent {
     this.error = error;
   }
 }
-const ban = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"/>\n</svg>';
+const ban = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M15 8a6.97 6.97 0 0 0-1.71-4.584l-9.874 9.875A7 7 0 0 0 15 8M2.71 12.584l9.874-9.875a7 7 0 0 0-9.874 9.874ZM16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0"/>\n</svg>';
 const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: ban
 }, Symbol.toStringTag, { value: "Module" }));
-const boxSeam = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z"/>\n</svg>';
+const boxSeam = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2zm3.564 1.426L5.596 5 8 5.961 14.154 3.5zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464z"/>\n</svg>';
 const __vite_glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: boxSeam
 }, Symbol.toStringTag, { value: "Module" }));
-const exclamationTriangle = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>\n  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>\n</svg>';
+const exclamationTriangle = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.15.15 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.2.2 0 0 1-.054.06.1.1 0 0 1-.066.017H1.146a.1.1 0 0 1-.066-.017.2.2 0 0 1-.054-.06.18.18 0 0 1 .002-.183L7.884 2.073a.15.15 0 0 1 .054-.057m1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767z"/>\n  <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>\n</svg>';
 const __vite_glob_0_2 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: exclamationTriangle
 }, Symbol.toStringTag, { value: "Module" }));
-const palette = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>\n  <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/>\n</svg>';
+const palette = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>\n  <path d="M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7"/>\n</svg>';
 const __vite_glob_0_3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: palette
 }, Symbol.toStringTag, { value: "Module" }));
-const personLock = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 5.996V14H3s-1 0-1-1 1-4 6-4q.845.002 1.544.107a4.5 4.5 0 0 0-.803.918A11 11 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664zM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1"/>\n</svg>';
+const personLock = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m0 5.996V14H3s-1 0-1-1 1-4 6-4q.845.002 1.544.107a4.5 4.5 0 0 0-.803.918A11 11 0 0 0 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664zM9 13a1 1 0 0 1 1-1v-1a2 2 0 1 1 4 0v1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-4a1 1 0 0 1-1-1zm3-3a1 1 0 0 0-1 1v1h2v-1a1 1 0 0 0-1-1"/>\n</svg>';
 const __vite_glob_0_4 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: personLock
 }, Symbol.toStringTag, { value: "Module" }));
-const search = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>\n</svg>';
+const search = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>\n</svg>';
 const __vite_glob_0_5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: search
 }, Symbol.toStringTag, { value: "Module" }));
-const stopwatch = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5z"/>\n  <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64l.012-.013.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5M8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3"/>\n</svg>';
+const stopwatch = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M8.5 5.6a.5.5 0 1 0-1 0v2.9h-3a.5.5 0 0 0 0 1H8a.5.5 0 0 0 .5-.5z"/>\n  <path d="M6.5 1A.5.5 0 0 1 7 .5h2a.5.5 0 0 1 0 1v.57c1.36.196 2.594.78 3.584 1.64l.012-.013.354-.354-.354-.353a.5.5 0 0 1 .707-.708l1.414 1.415a.5.5 0 1 1-.707.707l-.353-.354-.354.354-.013.012A7 7 0 1 1 7 2.071V1.5a.5.5 0 0 1-.5-.5M8 3a6 6 0 1 0 .001 12A6 6 0 0 0 8 3"/>\n</svg>';
 const __vite_glob_0_6 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: stopwatch
 }, Symbol.toStringTag, { value: "Module" }));
-const wifiOff = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M10.706 3.294A12.6 12.6 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4q.946 0 1.852.148zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.45 8.45 0 0 1 3.51-1.27zm2.596 1.404.785-.785q.947.362 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.5 8.5 0 0 0-1.98-.932zM8 10l.933-.933a6.5 6.5 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.53.53 0 0 1-.611.09A5.5 5.5 0 0 0 8 10m4.905-4.905.747-.747q.886.451 1.685 1.03a.485.485 0 0 1 .047.737.52.52 0 0 1-.668.05 11.5 11.5 0 0 0-1.811-1.07M9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A2 2 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75z"/>\n</svg>';
+const wifiOff = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M10.706 3.294A12.6 12.6 0 0 0 8 3C5.259 3 2.723 3.882.663 5.379a.485.485 0 0 0-.048.736.52.52 0 0 0 .668.05A11.45 11.45 0 0 1 8 4q.946 0 1.852.148zM8 6c-1.905 0-3.68.56-5.166 1.526a.48.48 0 0 0-.063.745.525.525 0 0 0 .652.065 8.45 8.45 0 0 1 3.51-1.27zm2.596 1.404.785-.785q.947.362 1.785.907a.482.482 0 0 1 .063.745.525.525 0 0 1-.652.065 8.5 8.5 0 0 0-1.98-.932zM8 10l.933-.933a6.5 6.5 0 0 1 2.013.637c.285.145.326.524.1.75l-.015.015a.53.53 0 0 1-.611.09A5.5 5.5 0 0 0 8 10m4.905-4.905.747-.747q.886.451 1.685 1.03a.485.485 0 0 1 .047.737.52.52 0 0 1-.668.05 11.5 11.5 0 0 0-1.811-1.07M9.02 11.78c.238.14.236.464.04.66l-.707.706a.5.5 0 0 1-.707 0l-.707-.707c-.195-.195-.197-.518.04-.66A2 2 0 0 1 8 11.5c.374 0 .723.102 1.021.28zm4.355-9.905a.53.53 0 0 1 .75.75l-10.75 10.75a.53.53 0 0 1-.75-.75z"/>\n</svg>';
 const __vite_glob_0_7 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: wifiOff
 }, Symbol.toStringTag, { value: "Module" }));
-const wrenchAdjustable = '<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 16 16">\n  <path d="M16 4.5a4.5 4.5 0 0 1-1.703 3.526L13 5l2.959-1.11q.04.3.041.61"/>\n  <path d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.5 4.5 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>\n</svg>';
+const wrenchAdjustable = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">\n  <path d="M16 4.5a4.5 4.5 0 0 1-1.703 3.526L13 5l2.959-1.11q.04.3.041.61"/>\n  <path d="M11.5 9c.653 0 1.273-.139 1.833-.39L12 5.5 11 3l3.826-1.53A4.5 4.5 0 0 0 7.29 6.092l-6.116 5.096a2.583 2.583 0 1 0 3.638 3.638L9.908 8.71A4.5 4.5 0 0 0 11.5 9m-1.292-4.361-.596.893.809-.27a.25.25 0 0 1 .287.377l-.596.893.809-.27.158.475-1.5.5a.25.25 0 0 1-.287-.376l.596-.893-.809.27a.25.25 0 0 1-.287-.377l.596-.893-.809.27-.158-.475 1.5-.5a.25.25 0 0 1 .287.376M3 14a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>\n</svg>';
 const __vite_glob_0_8 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,
   default: wrenchAdjustable
 }, Symbol.toStringTag, { value: "Module" }));
-const styles = css`
-  :host {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    width: 100%;
-    text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    overflow: auto;
-    user-select: none;
-  }
-
-  .icon {
-    display: contents;
-    font-size: 6rem;
-    color: var(--route-error-color, #4a5568);
-    opacity: 0.85;
-  }
-
-  .code {
-    font-size: 2rem;
-    font-weight: 700;
-    margin: 1rem 0;
-    color: var(--route-error-code-color, #1a202c);
-    letter-spacing: -0.5px;
-  }
-
-  .message {
-    font-size: 1rem;
-    color: var(--route-error-message-color, #718096);
-    max-width: 600px;
-    line-height: 1.6;
-  }
-
-  @media (prefers-color-scheme: dark) {
-    .icon {
-      color: var(--route-error-dark-color, #a0aec0);
-      opacity: 0.9;
-    }
-    .code {
-      color: var(--route-error-dark-code-color, #f7fafc);
-    }
-    .message {
-      color: var(--route-error-dark-message-color, #cbd5e0);
-    }
-  }
-`;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -454,7 +144,7 @@ const icons = Object.entries(/* @__PURE__ */ Object.assign({
   acc[name] = content.default;
   return acc;
 }, {});
-let ErrorPage = class extends LitElement {
+let UErrorPage = class extends LitElement {
   render() {
     const error = this.error || this.getDefaultError();
     const icon = this.getErrorIcon(error.code);
@@ -496,13 +186,73 @@ let ErrorPage = class extends LitElement {
     }
   }
 };
-ErrorPage.styles = styles;
+UErrorPage.styles = css`
+    :host {
+      --route-icon-color: #4a5568;
+      --route-code-color: #1a202c;
+      --route-message-color: #718096;
+    }
+    :host-context([theme="dark"]) {
+      --route-icon-color: #a0aec0;
+      --route-code-color: #f7fafc;
+      --route-message-color: #cbd5e0;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :host {
+        --route-icon-color: #a0aec0;
+        --route-code-color: #f7fafc;
+        --route-message-color: #cbd5e0;
+      }
+    }
+
+    :host {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      width: 100%;
+      text-align: center;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      overflow: auto;
+      user-select: none;
+    }
+
+    .icon {
+      display: contents;
+      font-size: 6rem;
+      color: var(--route-icon-color);
+      opacity: 0.85;
+    }
+
+    svg {
+      width: 1em;
+      height: 1em;
+      fill: currentColor;
+    }
+
+    .code {
+      font-size: 2rem;
+      font-weight: 700;
+      margin: 1rem 0;
+      color: var(--route-code-color);
+      letter-spacing: -0.5px;
+    }
+
+    .message {
+      font-size: 1rem;
+      color: var(--route-message-color);
+      max-width: 600px;
+      line-height: 1.6;
+    }
+  `;
 __decorateClass([
   property({ type: Object })
-], ErrorPage.prototype, "error", 2);
-ErrorPage = __decorateClass([
+], UErrorPage.prototype, "error", 2);
+UErrorPage = __decorateClass([
   customElement("u-error-page")
-], ErrorPage);
+], UErrorPage);
 function getRandomID() {
   return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
 }
@@ -532,15 +282,24 @@ function findOutletOrThrow(element) {
   }
   return outlet;
 }
-function findAnchorFromEvent(e2) {
-  const targets = e2.composedPath() || [];
+async function waitOutlet(element, timeout = 1e4) {
+  const start = performance.now();
+  while (performance.now() - start < timeout) {
+    const outlet = findOutlet(element);
+    if (outlet) return outlet;
+    await new Promise((r) => setTimeout(r, 50));
+  }
+  throw new Error("Timed out waiting for u-outlet.");
+}
+function findAnchorFrom(event) {
+  const targets = event.composedPath() || [];
   if (targets && targets.length) {
     for (const node of targets) {
       if (!(node instanceof Element)) continue;
       if (node.tagName === "A") return node;
     }
   }
-  const tgt = e2.target;
+  const tgt = event.target;
   if (!tgt) return null;
   const anchor = tgt.closest("a");
   return anchor;
@@ -600,11 +359,11 @@ class Router {
       const href = window.location.href;
       await this.go(href);
     };
-    this.handleRootClick = (e2) => {
+    this.handleDocumentClick = (e) => {
       try {
-        if (e2.defaultPrevented) return;
-        if (e2.button !== 0 || e2.metaKey || e2.ctrlKey || e2.shiftKey) return;
-        const anchor = findAnchorFromEvent(e2);
+        if (e.defaultPrevented) return;
+        if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey) return;
+        const anchor = findAnchorFrom(e);
         if (!anchor) return;
         const href = anchor.getAttribute("href") || anchor.href;
         if (!href) return;
@@ -612,7 +371,7 @@ class Router {
         if (anchor.hasAttribute("download")) return;
         if (anchor.getAttribute("rel") === "external") return;
         if (anchor.target && anchor.target !== "") return;
-        e2.preventDefault();
+        e.preventDefault();
         void this.go(anchor.href);
       } catch {
       }
@@ -624,17 +383,19 @@ class Router {
     window.removeEventListener("popstate", this.handleWindowPopstate);
     window.addEventListener("popstate", this.handleWindowPopstate);
     if (config.useIntercept !== false) {
-      this._rootElement.removeEventListener("click", this.handleRootClick);
-      this._rootElement.addEventListener("click", this.handleRootClick);
+      document.removeEventListener("click", this.handleDocumentClick);
+      document.addEventListener("click", this.handleDocumentClick);
     }
     if (config.initialLoad !== false) {
-      void this.go(window.location.href);
+      void waitOutlet(this._rootElement).then(() => {
+        this.go(window.location.href);
+      });
     }
   }
   /** 객체를 정리하고 이벤트 리스너를 제거합니다. */
   destroy() {
     window.removeEventListener("popstate", this.handleWindowPopstate);
-    this._rootElement.removeEventListener("click", this.handleRootClick);
+    document.removeEventListener("click", this.handleDocumentClick);
     this._requestID = void 0;
     this._context = void 0;
   }
@@ -721,7 +482,7 @@ class Router {
           outlet.renderContent({ id: "#fallback", content: fallbackContent, force: true });
           document.title = this._fallback.title || document.title;
         } else {
-          const errorContent = new ErrorPage();
+          const errorContent = new UErrorPage();
           errorContent.error = error;
           if (outlet) {
             outlet.renderContent({ id: "#error", content: errorContent, force: true });
@@ -740,9 +501,7 @@ class Router {
 export {
   ContentLoadError,
   ContentRenderError,
-  Link,
   NotFoundError,
-  Outlet,
   OutletMissingError,
   RouteBeginEvent,
   RouteDoneEvent,
@@ -750,6 +509,6 @@ export {
   RouteErrorEvent,
   RouteProgressEvent,
   Router,
-  ULink,
-  UOutlet
+  b as ULink,
+  U as UOutlet
 };

package/dist/react.d.ts

@@ -0,0 +1,89 @@
+import { CSSResult } from 'lit';
+import { LitElement } from 'lit';
+import { PropertyValues } from 'lit';
+import { ReactElement } from 'react';
+import { ReactWebComponent } from '@lit/react';
+import { TemplateResult } from 'lit-html';
+import { TemplateResult as TemplateResult_2 } from 'lit';
+
+declare interface RenderOption {
+    id?: string;
+    force?: boolean;
+    content: RenderResult;
+}
+
+declare type RenderResult = HTMLElement | ReactElement | TemplateResult_2<1> | false;
+
+/**
+ * `u-link` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
+ */
+export declare const ULink: ReactWebComponent<ULink_2, {}>;
+
+/**
+ * - 클라이언트 라우팅을 지원하는 링크 엘리먼트입니다.
+ * - 내부 링크는 클라이언트 라우팅을 수행하고, 외부 링크는 브라우저 기본 네비게이션을 사용합니다.
+ * - Ctrl/Meta/Shift/Alt, 중클릭/우클릭 등은 브라우저 기본 동작(새 탭, 컨텍스트 메뉴 등)을 그대로 유지합니다.
+ */
+declare class ULink_2 extends LitElement {
+    /** 외부 링크 여부 */
+    private isExternal;
+    /**
+     * a 태그 target을 지원하고 싶으면 열어두는게 좋습니다.
+     * - _blank 등을 쓰면 무조건 브라우저 기본 동작을 따르도록 처리합니다.
+     */
+    target?: string;
+    /**
+     * - 속성을 정의하지 않으면 basepath로 이동합니다.
+     * - http(s)로 시작하면 외부 링크로 간주하고 브라우저 네비게이션을 사용합니다.
+     * - 절대경로(/...)일 경우 basepath로 시작하면 SPA 라우팅 대상이 될 수 있습니다.
+     * - 상대경로는 (basepath + 상대경로)로 SPA 라우팅 대상이 될 수 있습니다.
+     * - ?로 시작하면 현재 pathname에 쿼리스트링을 붙여 SPA 라우팅합니다.
+     * - #으로 시작하면 현재 URL에 해시만 바꾸고(브라우저 기본) 동작합니다.
+     */
+    href?: string;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    render(): TemplateResult<1>;
+    /** basepath를 state에서 꺼내는 헬퍼 */
+    private getBasepath;
+    /** a 태그에 주입할 href 값을 계산합니다. */
+    private computeHref;
+    /**
+     * 클릭 가로채기 규칙
+     * - 좌클릭(0) + 보조키 없음(ctrl/meta/shift/alt 없음) + target이 _self일 때만 SPA 라우팅 고려
+     * - 그 외(중클릭/우클릭/보조키/target=_blank 등)는 브라우저 기본 동작 유지
+     */
+    private handleAnchorClick;
+    /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
+    private dispatchPopstate;
+    static styles: CSSResult;
+}
+
+/**
+ * `u-outlet` 웹 컴포넌트를 React에서 사용할 수 있도록 래핑한 컴포넌트입니다.
+ */
+export declare const UOutlet: ReactWebComponent<UOutlet_2, {}>;
+
+/**
+ * 라우트 설정에 따라 LitElement 또는 React 컴포넌트를 렌더링합니다.
+ */
+declare class UOutlet_2 extends LitElement {
+    private routeId?;
+    private container?;
+    private content?;
+    /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
+    protected createRenderRoot(): this;
+    /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+    connectedCallback(): void;
+    render(): TemplateResult_2<1>;
+    /**
+     * render 함수의 결과를 렌더링합니다.
+     * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+     */
+    renderContent({ id, content, force }: RenderOption): Promise<HTMLDivElement>;
+    /**
+     * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+     */
+    clear(): void;
+}
+
+export { }

package/dist/react.js

@@ -0,0 +1,44 @@
+import React from "react";
+import { b as ULink$1, U as UOutlet$1 } from "./share-SPj-xl6y.js";
+const e = /* @__PURE__ */ new Set(["children", "localName", "ref", "style", "className"]), n = /* @__PURE__ */ new WeakMap(), t = (e2, t2, o2, l, a) => {
+  const s = a?.[t2];
+  void 0 === s ? (e2[t2] = o2, null == o2 && t2 in HTMLElement.prototype && e2.removeAttribute(t2)) : o2 !== l && ((e3, t3, o3) => {
+    let l2 = n.get(e3);
+    void 0 === l2 && n.set(e3, l2 = /* @__PURE__ */ new Map());
+    let a2 = l2.get(t3);
+    void 0 !== o3 ? void 0 === a2 ? (l2.set(t3, a2 = { handleEvent: o3 }), e3.addEventListener(t3, a2)) : a2.handleEvent = o3 : void 0 !== a2 && (l2.delete(t3), e3.removeEventListener(t3, a2));
+  })(e2, s, o2);
+}, o = ({ react: n2, tagName: o2, elementClass: l, events: a, displayName: s }) => {
+  const c = new Set(Object.keys(a ?? {})), r = n2.forwardRef(((s2, r2) => {
+    const i = n2.useRef(/* @__PURE__ */ new Map()), d = n2.useRef(null), f = {}, u = {};
+    for (const [n3, t2] of Object.entries(s2)) e.has(n3) ? f["className" === n3 ? "class" : n3] = t2 : c.has(n3) || n3 in l.prototype ? u[n3] = t2 : f[n3] = t2;
+    return n2.useLayoutEffect((() => {
+      if (null === d.current) return;
+      const e2 = /* @__PURE__ */ new Map();
+      for (const n3 in u) t(d.current, n3, s2[n3], i.current.get(n3), a), i.current.delete(n3), e2.set(n3, s2[n3]);
+      for (const [e3, n3] of i.current) t(d.current, e3, void 0, n3, a);
+      i.current = e2;
+    })), n2.useLayoutEffect((() => {
+      d.current?.removeAttribute("defer-hydration");
+    }), []), f.suppressHydrationWarning = true, n2.createElement(o2, { ...f, ref: n2.useCallback(((e2) => {
+      d.current = e2, "function" == typeof r2 ? r2(e2) : null !== r2 && (r2.current = e2);
+    }), [r2]) });
+  }));
+  return r.displayName = s ?? l.name, r;
+};
+const ULink = o({
+  react: React,
+  tagName: "u-link",
+  elementClass: ULink$1,
+  events: {}
+});
+const UOutlet = o({
+  react: React,
+  tagName: "u-outlet",
+  elementClass: UOutlet$1,
+  events: {}
+});
+export {
+  ULink,
+  UOutlet
+};

package/dist/share-SPj-xl6y.js

@@ -0,0 +1,255 @@
+import { LitElement, html, render, css } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { createRoot } from "react-dom/client";
+var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = decorator(result) || result;
+  return result;
+};
+let UOutlet = class extends LitElement {
+  /** 외부 스타일을 적용하기 위해 라이트 돔을사용 합니다. */
+  createRenderRoot() {
+    return this;
+  }
+  /** 컴포넌트가 DOM에 연결될 때 초기화 작업 수행 */
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent("outlet-load", {
+      bubbles: true,
+      composed: true
+    }));
+  }
+  render() {
+    return html`${this.container}`;
+  }
+  /**
+   * render 함수의 결과를 렌더링합니다.
+   * - HTMLElement, ReactElement, TemplateResult를 모두 처리할 수 있습니다.
+   */
+  async renderContent({ id, content, force }) {
+    if (this.routeId === id && force === false && this.container) {
+      return this.container;
+    }
+    this.routeId = id;
+    this.clear();
+    if (!this.container) {
+      throw new Error("Outlet container is not initialized.");
+    }
+    if (typeof content !== "object") {
+      throw new Error("Content is not a valid renderable object.");
+    }
+    if (content instanceof HTMLElement) {
+      this.container.appendChild(content);
+    } else if ("_$litType$" in content) {
+      this.content = render(content, this.container);
+    } else if ("$$typeof" in content) {
+      this.content = createRoot(this.container);
+      this.content.render(content);
+    } else {
+      throw new Error("not supported content type for Outlet rendering.");
+    }
+    this.requestUpdate();
+    await this.updateComplete;
+    return this.container;
+  }
+  /**
+   * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
+   */
+  clear() {
+    if (this.content) {
+      if ("unmount" in this.content) {
+        this.content.unmount();
+      }
+      if ("setConnected" in this.content) {
+        this.content.setConnected(false);
+      }
+      this.content = void 0;
+    }
+    this.container = document.createElement("div");
+    this.container.style.display = "contents";
+  }
+};
+UOutlet = __decorateClass$1([
+  customElement("u-outlet")
+], UOutlet);
+function isExternalUrl(url) {
+  if (!url) return false;
+  const s = url.trim();
+  if (/^(?:mailto:|tel:|javascript:)/i.test(s)) return true;
+  if (s.startsWith("//")) return true;
+  try {
+    const base = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+    const parsed = new URL(s, base);
+    if (/^(?:ftp:|ftps:|data:|ws:|wss:)/i.test(parsed.protocol)) return true;
+    return parsed.origin !== new URL(base).origin;
+  } catch {
+    return false;
+  }
+}
+function parseUrl(url, basepath) {
+  let urlObj;
+  basepath = catchBasePath(basepath);
+  if (url.startsWith("http")) {
+    urlObj = new URL(url);
+  } else if (url.startsWith("/")) {
+    urlObj = new URL(url, window.location.origin);
+  } else if (url.startsWith("?")) {
+    urlObj = new URL(window.location.pathname + url, window.location.origin);
+  } else if (url.startsWith("#")) {
+    urlObj = new URL(window.location.pathname + window.location.search + url, window.location.origin);
+  } else {
+    urlObj = new URL(absolutePath(basepath, url), window.location.origin);
+  }
+  return {
+    href: urlObj.href,
+    origin: urlObj.origin,
+    basepath,
+    path: urlObj.href.replace(urlObj.origin, ""),
+    pathname: urlObj.pathname,
+    query: new URLSearchParams(urlObj.search),
+    hash: urlObj.hash,
+    params: {},
+    progress: () => {
+    }
+  };
+}
+function absolutePath(...paths) {
+  paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
+  if (paths.length === 0) return "/";
+  return "/" + paths.join("/");
+}
+function catchBasePath(basepath) {
+  if (basepath === "/") return basepath;
+  let pattern = new URLPattern({ pathname: basepath + "/*" });
+  let match = pattern.exec({ pathname: window.location.pathname });
+  if (match) {
+    const rawPath = match.pathname.input;
+    const restPath = match.pathname.groups?.["0"];
+    return restPath ? rawPath.replace("/" + restPath, "") : rawPath.slice(0, -1);
+  }
+  pattern = new URLPattern({ pathname: `${basepath}{/}?` });
+  match = pattern.exec({ pathname: window.location.pathname });
+  if (match) {
+    return match.pathname.input;
+  }
+  return basepath;
+}
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+let ULink = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.isExternal = false;
+    this.handleAnchorClick = (event) => {
+      if (event.defaultPrevented) return;
+      if (event.button !== 0) return;
+      if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+      const target = (this.target ?? "").trim();
+      if (target && target.toLowerCase() !== "_self") return;
+      const basepath = this.getBasepath();
+      if (!this.href) {
+        event.preventDefault();
+        this.dispatchPopstate(basepath, basepath);
+        return;
+      }
+      if (this.isExternal) return;
+      if (this.href.startsWith("#")) return;
+      event.preventDefault();
+      if (this.href.startsWith("?")) {
+        const url2 = window.location.pathname + this.href;
+        this.dispatchPopstate(basepath, url2);
+        return;
+      }
+      if (this.href.startsWith("/")) {
+        if (!this.href.startsWith(basepath)) {
+          window.location.assign(this.href);
+          return;
+        }
+        this.dispatchPopstate(basepath, this.href);
+        return;
+      }
+      const url = absolutePath(basepath, this.href);
+      this.dispatchPopstate(basepath, url);
+    };
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("href")) {
+      this.isExternal = isExternalUrl(this.href || "");
+    }
+  }
+  render() {
+    return html`
+      <a 
+        target=${this.target ?? "_self"}
+        href=${this.computeHref(this.href)}
+        @click=${this.handleAnchorClick}>
+        <slot></slot>
+      </a>
+    `;
+  }
+  /** basepath를 state에서 꺼내는 헬퍼 */
+  getBasepath() {
+    return window.history.state?.basepath || "";
+  }
+  /** a 태그에 주입할 href 값을 계산합니다. */
+  computeHref(href) {
+    const basepath = this.getBasepath();
+    if (!href) {
+      return window.location.origin + basepath;
+    }
+    if (this.isExternal) return href;
+    if (href.startsWith("#") || href.startsWith("?")) return href;
+    if (href.startsWith("/")) return href;
+    return absolutePath(basepath, href);
+  }
+  /** 클라이언트 라우팅을 위해 popstate 이벤트를 발생시킵니다. */
+  dispatchPopstate(basepath, url) {
+    window.history.pushState({ basepath }, "", url);
+    window.dispatchEvent(new PopStateEvent("popstate"));
+  }
+};
+ULink.styles = css`
+    :host {
+      display: inline-flex;
+      cursor: pointer;
+    }
+
+    a {
+      display: contents;
+      text-decoration: none;
+
+      font-size: inherit;
+      font-weight: inherit;
+      font-family: inherit;
+      color: inherit;
+      cursor: inherit;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], ULink.prototype, "target", 2);
+__decorateClass([
+  property({ type: String })
+], ULink.prototype, "href", 2);
+ULink = __decorateClass([
+  customElement("u-link")
+], ULink);
+export {
+  UOutlet as U,
+  absolutePath as a,
+  ULink as b,
+  isExternalUrl as i,
+  parseUrl as p
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.5.3",
+  "version": "0.6.1",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -29,23 +29,28 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
     }
   },
   "scripts": {
+    "test": "vite",
     "build": "vite build"
   },
   "dependencies": {
-    "lit": "^3.3.1",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1"
+    "lit": "^3.3.2",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3"
   },
   "devDependencies": {
     "@lit/react": "^1.0.8",
-    "@types/node": "^24.10.1",
-    "@types/react": "^19.2.7",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.8",
     "@types/react-dom": "^19.2.3",
     "typescript": "^5.9.3",
-    "vite": "^7.2.6",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4"
   }
-}
+}