@iyulab/router 0.2.1 → 0.3.0

package/dist/main.es.js

@@ -1,7 +1,7 @@
-import { LitElement, html, css, render, nothing } from "lit";
+import { css, LitElement, html, render } from "lit";
+import { property, customElement, state } from "lit/decorators.js";
 import { createComponent } from "@lit/react";
-import React, { createElement } from "react";
-import { state, property, customElement } from "lit/decorators.js";
+import React from "react";
 import { createRoot } from "react-dom/client";
 function absolutePath(...paths) {
   paths = paths.map((p) => p.replace(/^\/|\/$/g, "")).filter((p) => p.length > 0);
@@ -52,6 +52,27 @@ function catchBasepath(basepath) {
 function getRandomID() {
   return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
 }
+class RouteError extends Error {
+  constructor(code, message, original) {
+    super(message);
+    this.name = "RouteError";
+    this.code = code;
+    this.original = original;
+    this.timestamp = (/* @__PURE__ */ new Date()).toISOString();
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, RouteError);
+    }
+  }
+}
+class NotFoundRouteError extends RouteError {
+  constructor(path, original) {
+    super(404, `Page not found: ${path}`, original);
+    this.name = "NotFoundError";
+    if (Error.captureStackTrace) {
+      Error.captureStackTrace(this, NotFoundRouteError);
+    }
+  }
+}
 class RouteEvent extends Event {
   constructor(type, routeInfo, cancelable = false) {
     super(type, { bubbles: true, composed: true, cancelable });
@@ -69,14 +90,14 @@ class RouteEvent extends Event {
     }
   }
 }
-class RouteStartEvent extends RouteEvent {
+class RouteBeginEvent extends RouteEvent {
   constructor(routeInfo) {
-    super("route-start", routeInfo, false);
+    super("route-begin", routeInfo, false);
   }
 }
-class RouteEndEvent extends RouteEvent {
+class RouteDoneEvent extends RouteEvent {
   constructor(routeInfo) {
-    super("route-end", routeInfo, false);
+    super("route-done", routeInfo, false);
   }
 }
 class RouteErrorEvent extends RouteEvent {
@@ -85,248 +106,82 @@ class RouteErrorEvent extends RouteEvent {
     this.error = error;
   }
 }
-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 EXTERNAL_LINK_PATTERNS = [
-  /^http/,
-  /^\/\//,
-  /^mailto:/,
-  /^tel:/,
-  /^javascript:/,
-  /^ftp:/,
-  /^data:/,
-  /^ws:/,
-  /^wss:/
-];
-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 = this.checkExternalLink(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"));
-  }
-  /** 외부 링크인지 확인합니다. */
-  checkExternalLink(href) {
-    return EXTERNAL_LINK_PATTERNS.some((pattern) => pattern.test(href));
-  }
-  /** 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}`;
-  }
-  /**
-   * 기존 렌더링된 DOM을 제거하고, LitElement를 삽입합니다.
-   * - 이전 ID와 동일하고, 강제 렌더링이 아닌 경우, 이전 DOM을 반환합니다.
-   */
-  async renderElement({ id, element, force }) {
-    if (this.routeId === id && !force) {
-      return this.container?.firstElementChild;
-    }
-    this.routeId = id;
-    this.clear();
-    const template = typeof element === "string" ? document.createElement(element) : element.prototype instanceof LitElement ? new element() : void 0;
-    if (!template || !this.container) {
-      throw new Error("DOM이 초기화되지 않았습니다.");
-    }
-    this.litRoot = render(html`${template}`, this.container);
-    this.requestUpdate();
-    await this.updateComplete;
-    return template;
-  }
-  /**
-   * 기존 렌더링된 DOM을 제거하고, React 컴포넌트를 삽입합니다.
-   * - 이전 ID와 동일하고, 강제 렌더링이 아닌 경우, 이전 DOM을 반환합니다.
-   */
-  async renderComponent({ id, component, force }) {
-    if (this.routeId === id && !force) {
-      return this.container;
-    }
-    this.routeId = id;
-    this.clear();
-    const template = createElement(component);
-    if (!template || !this.container) {
-      throw new Error("DOM이 초기화되지 않았습니다.");
-    }
-    this.reactRoot = createRoot(this.container);
-    this.reactRoot.render(template);
-    this.requestUpdate();
-    await this.updateComplete;
-    return this.container;
-  }
-  /**
-   * 기존 DOM을 라이프 사이클에 맞게 제거합니다.
-   */
-  clear() {
-    if (this.reactRoot) {
-      this.reactRoot.unmount();
-      this.reactRoot = void 0;
-    }
-    if (this.litRoot) {
-      this.litRoot.setConnected(false);
-      this.litRoot = void 0;
-    }
-    this.container = document.createElement("div");
-    this.container.style.width = "100%";
-    this.container.style.height = "100%";
-  }
-}
 const styles = css`
   :host {
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 100vw;
-    height: 100vh;
+    min-height: 100vh;
+    width: 100%;
     padding: 2rem;
-    text-align: center;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-    color: var(--route-error-color, #333);
-    background: var(--route-error-background, #fff);
-    border-radius: var(--route-error-border-radius, 8px);
-    box-shadow: var(--route-error-box-shadow, 0 2px 8px rgba(0, 0, 0, 0.1));
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--route-error-background, linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%));
+    color: var(--route-error-color, #2d3748);
+    line-height: 1.6;
   }
 
   .container {
-    max-width: 600px;
+    max-width: 520px;
     margin: 0 auto;
+    text-align: center;
+    background: var(--route-error-container-bg, rgba(255, 255, 255, 0.95));
+    backdrop-filter: blur(10px);
+    border-radius: var(--route-error-border-radius, 24px);
+    padding: 3rem 2rem;
+    box-shadow: var(--route-error-box-shadow, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
+    border: 1px solid var(--route-error-border, rgba(255, 255, 255, 0.2));
+    animation: slideUp 0.6s ease-out;
   }
 
-  .icon {
-    font-size: 4rem;
-    margin-bottom: 1rem;
-    color: var(--route-error-icon-color, #f44336);
+  @keyframes slideUp {
+    from {
+      opacity: 0;
+      transform: translateY(30px);
+    }
+    to {
+      opacity: 1;
+      transform: translateY(0);
+    }
   }
 
-  .code {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-    color: var(--route-error-code-color, #f44336);
+  .icon {
+    font-size: 5rem;
+    margin-bottom: 1.5rem;
+    animation: bounce 0.8s ease-out 0.2s both;
+    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
   }
 
-  .message {
-    font-size: 1.25rem;
-    margin-bottom: 1rem;
-    color: var(--route-error-message-color, #666);
+  @keyframes bounce {
+    0%, 20%, 53%, 80%, 100% {
+      transform: translate3d(0, 0, 0);
+    }
+    40%, 43% {
+      transform: translate3d(0, -10px, 0);
+    }
+    70% {
+      transform: translate3d(0, -5px, 0);
+    }
+    90% {
+      transform: translate3d(0, -2px, 0);
+    }
   }
 
-  .detail {
-    font-size: 0.875rem;
-    margin-bottom: 2rem;
-    color: var(--route-error-detail-color, #999);
-    padding: 1rem;
-    background: var(--route-error-detail-background, #f5f5f5);
-    border-radius: 4px;
-    font-family: monospace;
-    text-align: left;
-    overflow-x: auto;
+  .code {
+    font-size: 2rem;
+    font-weight: 700;
+    margin-bottom: 1rem;
+    color: var(--route-error-code-color, #4a5568);
+    letter-spacing: -0.025em;
   }
 
-  .path {
-    font-size: 0.875rem;
-    margin-bottom: 1rem;
-    color: var(--route-error-path-color, #999);
-    font-family: monospace;
+  .message {
+    font-size: 1.125rem;
+    margin-bottom: 2.5rem;
+    color: var(--route-error-message-color, #718096);
+    font-weight: 400;
+    max-width: 400px;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .actions {
@@ -337,145 +192,187 @@ const styles = css`
   }
 
   .button {
-    padding: 0.75rem 1.5rem;
+    position: relative;
+    padding: 0.875rem 2rem;
     border: none;
-    border-radius: 4px;
-    font-size: 1rem;
+    border-radius: 12px;
+    font-size: 0.95rem;
+    font-weight: 600;
     cursor: pointer;
-    transition: all 0.2s ease;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     text-decoration: none;
-    display: inline-block;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
     font-family: inherit;
+    min-width: 120px;
+    overflow: hidden;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
   }
 
-  .button--primary {
-    background: var(--route-error-primary-button-bg, #2196f3);
+  .button:first-child {
+    background: var(--route-error-primary-button-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
     color: var(--route-error-primary-button-color, white);
+    box-shadow: 0 4px 15px 0 rgba(102, 126, 234, 0.4);
   }
 
-  .button--primary:hover {
-    background: var(--route-error-primary-button-hover-bg, #1976d2);
-    transform: translateY(-1px);
+  .button:first-child:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.5);
   }
 
-  .button--secondary {
-    background: var(--route-error-secondary-button-bg, #e0e0e0);
-    color: var(--route-error-secondary-button-color, #333);
+  .button:first-child:active {
+    transform: translateY(0);
   }
 
-  .button--secondary:hover {
-    background: var(--route-error-secondary-button-hover-bg, #d0d0d0);
-    transform: translateY(-1px);
+  .button:last-child {
+    background: var(--route-error-secondary-button-bg, rgba(255, 255, 255, 0.9));
+    color: var(--route-error-secondary-button-color, #4a5568);
+    border: 2px solid var(--route-error-secondary-button-border, rgba(74, 85, 104, 0.2));
+    backdrop-filter: blur(10px);
   }
 
-  .timestamp {
-    font-size: 0.75rem;
-    color: var(--route-error-timestamp-color, #ccc);
-    margin-top: 2rem;
+  .button:last-child:hover {
+    background: var(--route-error-secondary-button-hover-bg, rgba(255, 255, 255, 1));
+    border-color: var(--route-error-secondary-button-hover-border, rgba(74, 85, 104, 0.4));
+    transform: translateY(-1px);
   }
 
-  .metadata {
-    margin-top: 1rem;
-    padding: 1rem;
-    background: var(--route-error-metadata-background, #f9f9f9);
-    border-radius: 4px;
-    text-align: left;
+  .button:focus-visible {
+    outline: 2px solid var(--route-error-focus-color, #667eea);
+    outline-offset: 2px;
   }
 
-  .metadata summary {
-    cursor: pointer;
-    font-weight: bold;
-    color: var(--route-error-metadata-title-color, #666);
+  .button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+    transition: left 0.5s;
   }
 
-  .metadata pre {
-    margin: 0.5rem 0 0 0;
-    font-size: 0.75rem;
-    color: var(--route-error-metadata-content-color, #999);
-    overflow-x: auto;
+  .button:hover::before {
+    left: 100%;
   }
 
-  @media (max-width: 768px) {
+  @media (max-width: 640px) {
     :host {
       padding: 1rem;
     }
 
+    .container {
+      padding: 2rem 1.5rem;
+      border-radius: 20px;
+    }
+
     .icon {
-      font-size: 3rem;
+      font-size: 4rem;
     }
 
     .code {
-      font-size: 2rem;
+      font-size: 1.75rem;
     }
 
     .message {
       font-size: 1rem;
+      margin-bottom: 2rem;
     }
 
     .actions {
       flex-direction: column;
       align-items: center;
+      gap: 0.75rem;
     }
 
     .button {
       width: 100%;
-      max-width: 200px;
+      max-width: 280px;
+      padding: 1rem 2rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .container {
+      margin: 1rem;
+      padding: 1.5rem 1rem;
+    }
+
+    .icon {
+      font-size: 3.5rem;
     }
   }
 
   @media (prefers-color-scheme: dark) {
     :host {
-      color: var(--route-error-dark-color, #e0e0e0);
-      background: var(--route-error-dark-background, #1e1e1e);
+      background: var(--route-error-dark-background, linear-gradient(135deg, #1a202c 0%, #2d3748 100%));
+      color: var(--route-error-dark-color, #e2e8f0);
     }
 
-    .message {
-      color: var(--route-error-dark-message-color, #b0b0b0);
+    .container {
+      background: var(--route-error-dark-container-bg, rgba(45, 55, 72, 0.95));
+      border: 1px solid var(--route-error-dark-border, rgba(255, 255, 255, 0.1));
     }
 
-    .detail {
-      background: var(--route-error-dark-detail-background, #2a2a2a);
-      color: var(--route-error-dark-detail-color, #d0d0d0);
+    .code {
+      color: var(--route-error-dark-code-color, #f7fafc);
     }
 
-    .path {
-      color: var(--route-error-dark-path-color, #b0b0b0);
+    .message {
+      color: var(--route-error-dark-message-color, #a0aec0);
     }
 
-    .button--secondary {
-      background: var(--route-error-dark-secondary-button-bg, #404040);
-      color: var(--route-error-dark-secondary-button-color, #e0e0e0);
+    .button:first-child {
+      background: var(--route-error-dark-primary-button-bg, linear-gradient(135deg, #553c9a 0%, #764ba2 100%));
+      box-shadow: 0 4px 15px 0 rgba(85, 60, 154, 0.4);
     }
 
-    .button--secondary:hover {
-      background: var(--route-error-dark-secondary-button-hover-bg, #505050);
+    .button:first-child:hover {
+      box-shadow: 0 8px 25px 0 rgba(85, 60, 154, 0.5);
     }
 
-    .timestamp {
-      color: var(--route-error-dark-timestamp-color, #666);
+    .button:last-child {
+      background: var(--route-error-dark-secondary-button-bg, rgba(74, 85, 104, 0.3));
+      color: var(--route-error-dark-secondary-button-color, #e2e8f0);
+      border: 2px solid var(--route-error-dark-secondary-button-border, rgba(226, 232, 240, 0.2));
     }
 
-    .metadata {
-      background: var(--route-error-dark-metadata-background, #2a2a2a);
+    .button:last-child:hover {
+      background: var(--route-error-dark-secondary-button-hover-bg, rgba(74, 85, 104, 0.5));
+      border-color: var(--route-error-dark-secondary-button-hover-border, rgba(226, 232, 240, 0.4));
     }
+  }
 
-    .metadata summary {
-      color: var(--route-error-dark-metadata-title-color, #b0b0b0);
+  @media (prefers-reduced-motion: reduce) {
+    .container {
+      animation: none;
     }
-
-    .metadata pre {
-      color: var(--route-error-dark-metadata-content-color, #888);
+    
+    .icon {
+      animation: none;
+    }
+    
+    .button::before {
+      display: none;
+    }
+    
+    .button {
+      transition: none;
     }
   }
 `;
-var __defProp = Object.defineProperty;
+var __defProp$1 = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
+var __decorateClass$1 = (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);
+  if (kind && result) __defProp$1(target, key, result);
   return result;
 };
 let ErrorPage = class extends LitElement {
@@ -483,35 +380,25 @@ let ErrorPage = class extends LitElement {
     const error = this.error || this.getDefaultError();
     const icon = this.getErrorIcon(error.code);
     return html`
-      <div class="container">
+      <div class="container" role="alert" aria-live="polite">
         <div class="icon" aria-hidden="true">${icon}</div>
-        <div class="code">${error.code}</div>
+        <div class="code" aria-label="Error code">${error.code}</div>
         <div class="message">${error.message}</div>
         
-        ${error.path ? html`
-            <div class="path">
-              Path: <code>${error.path}</code>
-            </div>` : nothing}
-        
         <div class="actions">
           <button 
-            class="button button--primary"
-            @click=${this.handleGoHome}
-            type="button">
-            🏠 Go Home
-          </button>
-          
-          <button 
-            class="button button--secondary"
+            class="button"
             @click=${this.handleGoBack}
-            type="button">
+            title="Go back to previous page"
+            aria-label="Go back to previous page">
             ← Go Back
           </button>
           
           <button 
-            class="button button--secondary"
+            class="button"
             @click=${this.handleRefresh}
-            type="button">
+            title="Refresh the current page"
+            aria-label="Refresh the current page">
             🔄 Refresh
           </button>
         </div>
@@ -520,29 +407,27 @@ let ErrorPage = class extends LitElement {
   }
   /** 기본 에러 정보 반환 */
   getDefaultError() {
-    return {
-      code: 500,
-      message: "An unexpected error occurred",
-      timestamp: (/* @__PURE__ */ new Date()).toISOString()
-    };
+    return new RouteError(500, "Something went wrong. Please try again or contact support if the problem persists.");
   }
   /** 에러 코드에 따른 기본 아이콘 반환 */
   getErrorIcon(code) {
-    switch (code) {
+    const numericCode = typeof code === "string" ? parseInt(code) : code;
+    switch (numericCode) {
       case 404:
         return "🔍";
       case 403:
         return "🔒";
+      case 401:
+        return "🔑";
+      case 429:
+        return "⏱️";
+      case 503:
+        return "🛠️";
       case 500:
-        return "⚠️";
       default:
-        return "❌";
+        return "⚠️";
     }
   }
-  /** 홈으로 이동 */
-  handleGoHome() {
-    window.location.href = "/";
-  }
   /** 뒤로가기 */
   handleGoBack() {
     window.history.back();
@@ -553,24 +438,12 @@ let ErrorPage = class extends LitElement {
   }
 };
 ErrorPage.styles = styles;
-__decorateClass([
+__decorateClass$1([
   property({ type: Object })
 ], ErrorPage.prototype, "error", 2);
-ErrorPage = __decorateClass([
+ErrorPage = __decorateClass$1([
   customElement("u-error-page")
 ], ErrorPage);
-customElements.define("u-link", Link);
-customElements.define("u-outlet", Outlet);
-const ULink = createComponent({
-  react: React,
-  tagName: "u-link",
-  elementClass: Link
-});
-const UOutlet = createComponent({
-  react: React,
-  tagName: "u-outlet",
-  elementClass: Outlet
-});
 class Router {
   constructor(config) {
     this._counter = 0;
@@ -583,11 +456,14 @@ class Router {
     this._routes = this.setRoutes(config.routes, this._basepath);
     window.removeEventListener("popstate", this.handlePopstate);
     window.addEventListener("popstate", this.handlePopstate);
-    this.handlePopstate();
+    this.initiate();
   }
   get basepath() {
     return this._basepath;
   }
+  get routes() {
+    return this._routes;
+  }
   get routeInfo() {
     return this._routeInfo;
   }
@@ -600,54 +476,45 @@ class Router {
     this._requestID = requestID;
     const routeInfo = parseURL(href, this._basepath);
     if (routeInfo.href === this._routeInfo?.href) return;
-    if (this._requestID !== requestID) return;
-    window.dispatchEvent(new RouteStartEvent(routeInfo));
     try {
+      if (this._requestID !== requestID) return;
+      window.dispatchEvent(new RouteBeginEvent(routeInfo));
       const routes = this.getRoutes(routeInfo.pathname);
       const lastRoute = routes[routes.length - 1];
-      if (this._requestID !== requestID) return;
-      routeInfo.params = lastRoute?.pattern?.exec({ pathname: routeInfo.pathname })?.pathname.groups || {};
-      if (typeof lastRoute?.loader === "function") {
-        routeInfo.data = await lastRoute.loader(routeInfo);
+      if (lastRoute && "path" in lastRoute && lastRoute.path instanceof URLPattern) {
+        routeInfo.params = lastRoute.path.exec({ pathname: routeInfo.pathname })?.pathname.groups || {};
       }
-      if (this._requestID !== requestID) return;
       this._routeInfo = routeInfo;
       window.route = routeInfo;
-      let outlet = await this.findOutlet(this._rootElement);
+      if (this._requestID !== requestID) return;
       if (routes.length === 0) {
+        throw new NotFoundRouteError(routeInfo.href);
+      }
+      let outlet = this.findOutletOrThrow(this._rootElement);
+      let title = void 0;
+      for (const route of routes) {
         if (this._requestID !== requestID) return;
-        throw new Error(`No route matched for path: ${routeInfo.pathname}`);
+        const content = route.render(routeInfo);
+        const element = await outlet.renderContent({ id: route.id, content, force: route.force });
+        outlet = this.findOutlet(element) || outlet;
+        title = route.title || title;
+      }
+      document.title = title || document.title;
+      if (this._requestID !== requestID) return;
+      if (routeInfo.href !== window.location.href) {
+        window.history.pushState({ basepath: routeInfo.basepath }, "", routeInfo.href);
       } else {
-        for (const route of routes) {
-          if (this._requestID !== requestID) return;
-          if (route.element) {
-            const element = await outlet.renderElement({ id: route.id, element: route.element, force: route.force });
-            outlet = element?.shadowRoot?.querySelector("u-outlet") || outlet;
-          } else if (route.component) {
-            const component = await outlet.renderComponent({ id: route.id, component: route.component, force: route.force });
-            outlet = component?.querySelector("u-outlet") || outlet;
-          } else {
-            throw new Error(`Route "${route.path}" has no element or component defined.`);
-          }
-        }
-        if (this._requestID !== requestID) return;
-        if (routeInfo.href !== window.location.href) {
-          window.history.pushState({ basepath: routeInfo.basepath }, "", routeInfo.href);
-        } else {
-          window.history.replaceState({ basepath: routeInfo.basepath }, "", routeInfo.href);
-        }
-        document.title = lastRoute?.title || document.title;
-        window.dispatchEvent(new RouteEndEvent(routeInfo));
+        window.history.replaceState({ basepath: routeInfo.basepath }, "", routeInfo.href);
       }
+      window.dispatchEvent(new RouteDoneEvent(routeInfo));
     } catch (error) {
-      const routeError = {
-        code: error.status || error.code || "UNKNOWN_ERROR",
-        message: error.message || "An unexpected error occurred",
-        path: routeInfo?.pathname,
-        original: error,
-        timestamp: (/* @__PURE__ */ new Date()).toISOString()
-      };
+      const routeError = new RouteError(
+        error.status || error.code || "UNKNOWN_ERROR",
+        error.message || "An unexpected error occurred",
+        error
+      );
       window.dispatchEvent(new RouteErrorEvent(routeError, routeInfo));
+      console.error("Routing error:", error);
       try {
         const errorEl = new ErrorPage();
         errorEl.error = routeError;
@@ -659,24 +526,47 @@ class Router {
       }
     }
   }
+  /** 초기 라우팅 처리, TODO: 제거 */
+  async initiate() {
+    let outlet = await this.findOutlet(this._rootElement);
+    while (!outlet && this._counter < 20) {
+      await new Promise((resolve) => setTimeout(resolve, 50));
+      this._counter++;
+      outlet = await this.findOutlet(this._rootElement);
+    }
+    this._counter = 0;
+    this.handlePopstate();
+  }
   /** 라우트를 재설정합니다. */
   setRoutes(routes, basepath) {
     for (const route of routes) {
       route.id ||= getRandomID();
-      if (route.index)
-        route.path = "";
-      if (route.path)
-        route.path = absolutePath(basepath, route.path);
-      if (route.path && !route.pattern)
-        route.pattern = new URLPattern({ pathname: `${route.path}{/}?` });
-      if (route.children && route.children.length > 0 && route.path) {
-        route.children = this.setRoutes(route.children, route.path);
+      if ("index" in route && route.index) {
+        route.path = new URLPattern({ pathname: `${basepath}{/}?` });
+      } else if ("path" in route && route.path) {
+        if (typeof route.path === "string") {
+          const absolutePathStr = absolutePath(basepath, route.path);
+          route.path = new URLPattern({ pathname: `${absolutePathStr}{/}?` });
+        }
+      } else {
+        throw new Error('Route must have either "index" or "path" property defined.');
+      }
+      if (route.children && route.children.length > 0) {
+        let childBasepath;
+        if ("index" in route) {
+          childBasepath = basepath;
+        } else {
+          if (typeof route.path === "string") {
+            childBasepath = absolutePath(basepath, route.path);
+          } else {
+            childBasepath = route.path.pathname.replace("{/}?", "");
+          }
+        }
+        route.children = this.setRoutes(route.children, childBasepath);
         route.force ||= false;
       } else {
         route.force ||= true;
       }
-      if (!route.pattern)
-        throw new Error(`Route path is required: ${JSON.stringify(route)}`);
     }
     return routes;
   }
@@ -689,40 +579,240 @@ class Router {
           return [route, ...childRoutes];
         }
       }
-      if (route.pattern?.test({ pathname })) {
+      let matches = false;
+      if ("index" in route && route.index && route.path) {
+        matches = route.path.test({ pathname });
+      } else if ("path" in route && route.path instanceof URLPattern) {
+        matches = route.path.test({ pathname });
+      }
+      if (matches) {
         return [route];
       }
     }
     return [];
   }
   /** Outlet 엘리먼트를 찾아 반환합니다. */
-  async findOutlet(element) {
-    let outlet = element.querySelector("u-outlet");
-    if (!outlet && element.shadowRoot) {
-      if (element instanceof LitElement) {
-        await element.updateComplete;
-      }
+  findOutlet(element) {
+    let outlet = void 0;
+    if (element.shadowRoot) {
       outlet = element.shadowRoot.querySelector("u-outlet");
+      if (outlet) return outlet;
+      for (const child of Array.from(element.shadowRoot.children)) {
+        outlet = this.findOutlet(child);
+        if (outlet) return outlet;
+      }
+    } else {
+      outlet = element.querySelector("u-outlet");
+      if (outlet) return outlet;
+      for (const child of Array.from(element.children)) {
+        outlet = this.findOutlet(child);
+        if (outlet) return outlet;
+      }
     }
+    return void 0;
+  }
+  /** Outlet 엘리먼트를 찾아 반환합니다. 없으면 에러를 던집니다. */
+  findOutletOrThrow(element) {
+    const outlet = this.findOutlet(element);
     if (!outlet) {
-      if (this._counter > 100)
-        throw new Error("Outlet element not found.");
-      this._counter++;
-      await new Promise((resolve) => setTimeout(resolve, 50));
-      return this.findOutlet(element);
+      throw new Error("No Outlet component found in the root element.");
     }
-    this._counter = 0;
     return outlet;
   }
 }
+var __defProp = Object.defineProperty;
+var __decorateClass = (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(target, key, result);
+  return result;
+};
+const EXTERNAL_LINK_PATTERNS = [
+  /^http/,
+  /^\/\//,
+  /^mailto:/,
+  /^tel:/,
+  /^javascript:/,
+  /^ftp:/,
+  /^data:/,
+  /^ws:/,
+  /^wss:/
+];
+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 = this.checkExternalLink(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"));
+  }
+  /** 외부 링크인지 확인합니다. */
+  checkExternalLink(href) {
+    return EXTERNAL_LINK_PATTERNS.some((pattern) => pattern.test(href));
+  }
+  /** 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([
+  state()
+], Link.prototype, "anchorHref");
+__decorateClass([
+  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("DOM이 초기화되지 않았습니다.");
+    }
+    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 = createComponent({
+  react: React,
+  tagName: "u-link",
+  elementClass: Link
+});
+const UOutlet = createComponent({
+  react: React,
+  tagName: "u-outlet",
+  elementClass: Outlet
+});
 export {
-  ErrorPage,
   Link,
+  NotFoundRouteError,
   Outlet,
-  RouteEndEvent,
+  RouteBeginEvent,
+  RouteDoneEvent,
+  RouteError,
   RouteErrorEvent,
-  RouteEvent,
-  RouteStartEvent,
   Router,
   ULink,
   UOutlet