@iyulab/router 0.4.0 → 0.5.0

package/dist/{main.d.ts → index.d.ts}

@@ -29,7 +29,7 @@ declare interface BaseRouteConfig {
      * }
      * ```
      */
-    render: (info: RouteInfo) => HTMLElement | ReactElement | TemplateResult<1>;
+    render?: (info: RouteInfo) => Promise<RenderResult> | RenderResult;
     /**
      * 중첩 라우트
      */
@@ -150,9 +150,11 @@ declare interface PathRouteConfig extends BaseRouteConfig {
 declare interface RenderOption {
     id?: string;
     force?: boolean;
-    content: HTMLElement | ReactElement | TemplateResult<1>;
+    content: RenderResult;
 }
 
+declare type RenderResult = HTMLElement | ReactElement | TemplateResult<1>;
+
 /**
  * 라우트 시작 이벤트
  */

package/dist/{main.js → index.js}

@@ -835,7 +835,8 @@ class Router {
       let title = void 0;
       for (const route of routes) {
         if (this._requestID !== requestID) return;
-        const content = route.render(routeInfo);
+        if (!route.render) continue;
+        const content = await route.render(routeInfo);
         const element = await outlet.renderContent({ id: route.id, content, force: route.force });
         outlet = findOutlet(element) || outlet;
         title = route.title || title;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iyulab/router",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "A modern client-side router for web applications with support for Lit and React components",
   "keywords": [
     "lit",
@@ -24,12 +24,11 @@
     "LICENSE"
   ],
   "type": "module",
-  "types": "dist/main.d.ts",
+  "types": "dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./dist/main.d.ts",
-      "import": "./dist/main.js",
-      "require": "./dist/main.cjs.js"
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
     }
   },
   "scripts": {
@@ -42,9 +41,9 @@
   },
   "devDependencies": {
     "@lit/react": "^1.0.8",
-    "@types/node": "^24.10.0",
-    "@types/react": "^19.2.2",
-    "@types/react-dom": "^19.2.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.3",
+    "@types/react-dom": "^19.2.3",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "vite": "^7.2.2",

package/dist/main.cjs.js

@@ -1,882 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const React = require("react");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const client = require("react-dom/client");
-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: {}
-  };
-}
-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 lit.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 lit.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 = lit.css`
-    :host {
-      display: inline-flex;
-      cursor: pointer;
-    }
-
-    a {
-      display: contents;
-      text-decoration: none;
-      color: inherit;
-    }
-  `;
-let Link = _Link;
-__decorateClass$1([
-  decorators_js.state()
-], Link.prototype, "anchorHref");
-__decorateClass$1([
-  decorators_js.property({ type: String })
-], Link.prototype, "href");
-class Outlet extends lit.LitElement {
-  /** 쉐도우를 사용하지 않고, 직접 렌더링합니다. */
-  createRenderRoot() {
-    return this;
-  }
-  render() {
-    return lit.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 = lit.render(content, this.container);
-    } else if ("$$typeof" in content) {
-      this.content = client.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);
-    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 });
-    this.routeInfo = routeInfo;
-    this.timestamp = (/* @__PURE__ */ new Date()).toISOString();
-  }
-  /** 이벤트가 취소되었는지 확인 */
-  get cancelled() {
-    return this.defaultPrevented;
-  }
-  /** 이벤트 취소 */
-  cancel() {
-    if (this.cancelable) {
-      this.preventDefault();
-    }
-  }
-}
-class RouteBeginEvent extends RouteEvent {
-  constructor(routeInfo) {
-    super("route-begin", routeInfo, false);
-  }
-}
-class RouteDoneEvent extends RouteEvent {
-  constructor(routeInfo) {
-    super("route-done", routeInfo, false);
-  }
-}
-class RouteErrorEvent extends RouteEvent {
-  constructor(error, routeInfo) {
-    super("route-error", routeInfo, false);
-    this.error = error;
-  }
-}
-const styles = lit.css`
-  :host {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    min-height: 100vh;
-    width: 100%;
-    padding: 2rem;
-    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: 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;
-  }
-
-  @keyframes slideUp {
-    from {
-      opacity: 0;
-      transform: translateY(30px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .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));
-  }
-
-  @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);
-    }
-  }
-
-  .code {
-    font-size: 2rem;
-    font-weight: 700;
-    margin-bottom: 1rem;
-    color: var(--route-error-code-color, #4a5568);
-    letter-spacing: -0.025em;
-  }
-
-  .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 {
-    display: flex;
-    gap: 1rem;
-    justify-content: center;
-    flex-wrap: wrap;
-  }
-
-  .button {
-    position: relative;
-    padding: 0.875rem 2rem;
-    border: none;
-    border-radius: 12px;
-    font-size: 0.95rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    text-decoration: none;
-    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: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:first-child:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 8px 25px 0 rgba(102, 126, 234, 0.5);
-  }
-
-  .button:first-child:active {
-    transform: translateY(0);
-  }
-
-  .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);
-  }
-
-  .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);
-  }
-
-  .button:focus-visible {
-    outline: 2px solid var(--route-error-focus-color, #667eea);
-    outline-offset: 2px;
-  }
-
-  .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;
-  }
-
-  .button:hover::before {
-    left: 100%;
-  }
-
-  @media (max-width: 640px) {
-    :host {
-      padding: 1rem;
-    }
-
-    .container {
-      padding: 2rem 1.5rem;
-      border-radius: 20px;
-    }
-
-    .icon {
-      font-size: 4rem;
-    }
-
-    .code {
-      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: 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 {
-      background: var(--route-error-dark-background, linear-gradient(135deg, #1a202c 0%, #2d3748 100%));
-      color: var(--route-error-dark-color, #e2e8f0);
-    }
-
-    .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));
-    }
-
-    .code {
-      color: var(--route-error-dark-code-color, #f7fafc);
-    }
-
-    .message {
-      color: var(--route-error-dark-message-color, #a0aec0);
-    }
-
-    .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:first-child:hover {
-      box-shadow: 0 8px 25px 0 rgba(85, 60, 154, 0.5);
-    }
-
-    .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));
-    }
-
-    .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));
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .container {
-      animation: none;
-    }
-    
-    .icon {
-      animation: none;
-    }
-    
-    .button::before {
-      display: none;
-    }
-    
-    .button {
-      transition: none;
-    }
-  }
-`;
-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 ErrorPage = class extends lit.LitElement {
-  render() {
-    const error = this.error || this.getDefaultError();
-    const icon = this.getErrorIcon(error.code);
-    return lit.html`
-      <div class="container" role="alert" aria-live="polite">
-        <div class="icon" aria-hidden="true">${icon}</div>
-        <div class="code" aria-label="Error code">${error.code}</div>
-        <div class="message">${error.message}</div>
-        
-        <div class="actions">
-          <button 
-            class="button"
-            @click=${this.handleGoBack}
-            title="Go back to previous page"
-            aria-label="Go back to previous page">
-            ← Go Back
-          </button>
-          
-          <button 
-            class="button"
-            @click=${this.handleRefresh}
-            title="Refresh the current page"
-            aria-label="Refresh the current page">
-            🔄 Refresh
-          </button>
-        </div>
-      </div>
-    `;
-  }
-  /** 기본 에러 정보 반환 */
-  getDefaultError() {
-    return new RouteError(500, "Something went wrong. Please try again or contact support if the problem persists.");
-  }
-  /** 에러 코드에 따른 기본 아이콘 반환 */
-  getErrorIcon(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:
-      default:
-        return "⚠️";
-    }
-  }
-  /** 뒤로가기 */
-  handleGoBack() {
-    window.history.back();
-  }
-  /** 새로고침 */
-  handleRefresh() {
-    window.location.reload();
-  }
-};
-ErrorPage.styles = styles;
-__decorateClass([
-  decorators_js.property({ type: Object })
-], ErrorPage.prototype, "error", 2);
-ErrorPage = __decorateClass([
-  decorators_js.customElement("u-error-page")
-], ErrorPage);
-function getRandomID() {
-  return window.isSecureContext ? window.crypto.randomUUID() : window.crypto.getRandomValues(new Uint32Array(1))[0].toString(16);
-}
-function 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 = 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 = findOutlet(child);
-      if (outlet) return outlet;
-    }
-  }
-  return void 0;
-}
-function findOutletOrThrow(element) {
-  const outlet = findOutlet(element);
-  if (!outlet) {
-    throw new Error("No Outlet component found in the root element.");
-  }
-  return outlet;
-}
-function findAnchorFromEvent(e2) {
-  const targets = e2.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;
-  if (!tgt) return null;
-  const anchor = tgt.closest("a");
-  return anchor;
-}
-function setRoutes(routes, basepath) {
-  for (const route of routes) {
-    route.id ||= getRandomID();
-    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 = setRoutes(route.children, childBasepath);
-      route.force ||= false;
-    } else {
-      route.force ||= true;
-    }
-  }
-  return routes;
-}
-function getRoutes(pathname, routes) {
-  for (const route of routes) {
-    if (route.children) {
-      const childRoutes = getRoutes(pathname, route.children);
-      if (childRoutes.length > 0) {
-        return [route, ...childRoutes];
-      }
-    }
-    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 [];
-}
-class Router {
-  constructor(config) {
-    this.handleWindowPopstate = async () => {
-      const href = window.location.href;
-      await this.go(href);
-    };
-    this.handleRootClick = (e2) => {
-      try {
-        if (e2.defaultPrevented) return;
-        if (e2.button !== 0 || e2.metaKey || e2.ctrlKey || e2.shiftKey) return;
-        const anchor = findAnchorFromEvent(e2);
-        if (!anchor) return;
-        const href = anchor.getAttribute("href") || anchor.href;
-        if (!href) return;
-        if (isExternalUrl(href)) return;
-        if (anchor.hasAttribute("download")) return;
-        if (anchor.getAttribute("rel") === "external") return;
-        if (anchor.target && anchor.target !== "") return;
-        e2.preventDefault();
-        void this.go(anchor.href);
-      } catch {
-      }
-    };
-    this._rootElement = config.root;
-    this._basepath = absolutePath(config.basepath || "/");
-    this._routes = setRoutes(config.routes, this._basepath);
-    this.waitConnected();
-    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);
-    }
-  }
-  /** 초기 라우팅 처리, TODO: 제거 */
-  async waitConnected() {
-    let outlet = findOutlet(this._rootElement);
-    let count = 0;
-    while (!outlet && count < 20) {
-      await new Promise((resolve) => setTimeout(resolve, 50));
-      outlet = findOutlet(this._rootElement);
-      count++;
-    }
-    this.handleWindowPopstate();
-  }
-  /** 객체를 정리하고 이벤트 리스너를 제거합니다. */
-  destroy() {
-    window.removeEventListener("popstate", this.handleWindowPopstate);
-    this._rootElement.removeEventListener("click", this.handleRootClick);
-    this._routeInfo = void 0;
-    this._requestID = void 0;
-  }
-  /** 라우터의 기본 경로 반환 */
-  get basepath() {
-    return this._basepath;
-  }
-  /** 등록된 라우트 반환 */
-  get routes() {
-    return this._routes;
-  }
-  /** 현재 라우팅 정보 반환 */
-  get routeInfo() {
-    return this._routeInfo;
-  }
-  /**
-   * 지정한 경로의 클라이언트 라우팅을 수행합니다. 상대경로일 경우 basepath와 조합되어 이동합니다.
-   * @param href 이동할 경로
-   */
-  async go(href) {
-    const requestID = getRandomID();
-    this._requestID = requestID;
-    const routeInfo = parseUrl(href, this._basepath);
-    if (routeInfo.href === this._routeInfo?.href) return;
-    try {
-      if (this._requestID !== requestID) return;
-      window.dispatchEvent(new RouteBeginEvent(routeInfo));
-      const routes = getRoutes(routeInfo.pathname, this._routes);
-      const lastRoute = routes[routes.length - 1];
-      if (lastRoute && "path" in lastRoute && lastRoute.path instanceof URLPattern) {
-        routeInfo.params = lastRoute.path.exec({ pathname: routeInfo.pathname })?.pathname.groups || {};
-      }
-      this._routeInfo = routeInfo;
-      window.route = routeInfo;
-      if (this._requestID !== requestID) return;
-      if (routes.length === 0) {
-        throw new NotFoundRouteError(routeInfo.href);
-      }
-      let outlet = findOutletOrThrow(this._rootElement);
-      let title = void 0;
-      for (const route of routes) {
-        if (this._requestID !== requestID) return;
-        const content = route.render(routeInfo);
-        const element = await outlet.renderContent({ id: route.id, content, force: route.force });
-        outlet = 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 {
-        window.history.replaceState({ basepath: routeInfo.basepath }, "", routeInfo.href);
-      }
-      window.dispatchEvent(new RouteDoneEvent(routeInfo));
-    } catch (error) {
-      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;
-        document.body.innerHTML = "";
-        document.body.appendChild(errorEl);
-      } catch (pageError) {
-        console.error("Failed to render error component:", pageError);
-        console.error("Original error:", error);
-      }
-    }
-  }
-}
-exports.Link = Link;
-exports.NotFoundRouteError = NotFoundRouteError;
-exports.Outlet = Outlet;
-exports.RouteBeginEvent = RouteBeginEvent;
-exports.RouteDoneEvent = RouteDoneEvent;
-exports.RouteError = RouteError;
-exports.RouteErrorEvent = RouteErrorEvent;
-exports.Router = Router;
-exports.ULink = ULink;
-exports.UOutlet = UOutlet;