@ahnseungchan/webviewkit 1.3.0 → 2.1.0

package/dist/index.mjs

@@ -0,0 +1,1574 @@
+// src/constants.ts
+var STACK_TRANSITION_MS = 500;
+var TRANSITION_END_GRACE_MS = 50;
+var BACK_TIMEOUT_MS = 1e3;
+var BRIDGE_TIMEOUT_MS = 5e3;
+var BRIDGE_HOST_WAIT_MS = 3e3;
+var BRIDGE_HOST_POLL_MS = 100;
+
+// src/bridge/detect-host.ts
+var FLUTTER_READY_EVENT = "flutterInAppWebViewPlatformReady";
+function detectBridgeHost() {
+  var _a, _b;
+  if (typeof window === "undefined") return "unknown";
+  if ((_a = window.ReactNativeWebView) == null ? void 0 : _a.postMessage) {
+    return "react-native";
+  }
+  if ((_b = window.flutter_inappwebview) == null ? void 0 : _b.callHandler) {
+    return "flutter";
+  }
+  return "browser";
+}
+function isNativeBridgeHost(host) {
+  return host === "react-native" || host === "flutter";
+}
+function waitForBridgeHost({
+  timeoutMs = BRIDGE_HOST_WAIT_MS,
+  signal
+} = {}) {
+  const host = detectBridgeHost();
+  if (isNativeBridgeHost(host) || host === "unknown") {
+    return Promise.resolve(host);
+  }
+  return new Promise((resolve) => {
+    const finish = () => {
+      clearInterval(poll);
+      clearTimeout(timer);
+      window.removeEventListener(FLUTTER_READY_EVENT, check);
+      signal == null ? void 0 : signal.removeEventListener("abort", finish);
+      resolve(detectBridgeHost());
+    };
+    const check = () => {
+      if (isNativeBridgeHost(detectBridgeHost())) finish();
+    };
+    const poll = setInterval(check, BRIDGE_HOST_POLL_MS);
+    const timer = setTimeout(finish, timeoutMs);
+    window.addEventListener(FLUTTER_READY_EVENT, check);
+    signal == null ? void 0 : signal.addEventListener("abort", finish);
+  });
+}
+
+// src/bridge/errors.ts
+var BRIDGE_ERROR_CODES = {
+  TIMEOUT: "TIMEOUT",
+  BRIDGE_UNAVAILABLE: "BRIDGE_UNAVAILABLE",
+  INVALID_PAYLOAD: "INVALID_PAYLOAD",
+  URL_NOT_ALLOWED: "URL_NOT_ALLOWED",
+  UNKNOWN_METHOD: "UNKNOWN_METHOD",
+  HANDLER_ERROR: "HANDLER_ERROR"
+};
+var BridgeError = class extends Error {
+  constructor(code, message, cause) {
+    super(message);
+    Object.setPrototypeOf(this, new.target.prototype);
+    this.name = "BridgeError";
+    this.code = code;
+    if (cause !== void 0) {
+      this.cause = cause;
+    }
+  }
+  toBody() {
+    return { code: this.code, message: this.message };
+  }
+};
+function toBridgeError(error, fallbackCode) {
+  if (error instanceof BridgeError) return error;
+  const message = error instanceof Error ? error.message : String(error);
+  return new BridgeError(fallbackCode, message, error);
+}
+
+// src/bridge/pending-responses.ts
+var pending = /* @__PURE__ */ new Map();
+function waitForResponse(requestId, timeoutMs) {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => {
+      pending.delete(requestId);
+      reject(
+        new BridgeError(
+          BRIDGE_ERROR_CODES.TIMEOUT,
+          `No response for ${requestId} within ${timeoutMs}ms`
+        )
+      );
+    }, timeoutMs);
+    pending.set(requestId, { resolve, reject, timer });
+  });
+}
+function settleResponse(envelope) {
+  if (!envelope.replyTo) return false;
+  const request = pending.get(envelope.replyTo);
+  if (!request) return false;
+  clearTimeout(request.timer);
+  pending.delete(envelope.replyTo);
+  if (envelope.error) {
+    request.reject(
+      new BridgeError(envelope.error.code, envelope.error.message)
+    );
+  } else {
+    request.resolve(envelope);
+  }
+  return true;
+}
+function cancelResponse(requestId) {
+  const request = pending.get(requestId);
+  if (!request) return;
+  clearTimeout(request.timer);
+  pending.delete(requestId);
+}
+
+// src/bridge/protocol.ts
+var BRIDGE_PROTOCOL_VERSION = 1;
+var BRIDGE_NAMESPACE = "webviewkit";
+var STACK_BRIDGE_METHODS = {
+  PUSH: "stack.push",
+  REPLACE: "stack.replace",
+  POP: "stack.pop",
+  RESET: "stack.reset",
+  /** web → native: 웹 스택 깊이 변경 알림 */
+  CHANGED: "stack.changed"
+};
+var BACK_REQUEST_METHOD = "back.request";
+var BRIDGE_RESPONSE_METHOD = "bridge.response";
+function createBridgeId() {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
+    return crypto.randomUUID();
+  }
+  return `wv-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+}
+function createBridgeEnvelope(method, payload, id) {
+  return {
+    v: BRIDGE_PROTOCOL_VERSION,
+    ns: BRIDGE_NAMESPACE,
+    id: id != null ? id : createBridgeId(),
+    method,
+    ...payload !== void 0 ? { payload } : {}
+  };
+}
+function createBridgeResponse(request, result) {
+  return {
+    ...createBridgeEnvelope(BRIDGE_RESPONSE_METHOD, result.payload),
+    replyTo: request.id,
+    ...result.error ? { error: result.error } : {}
+  };
+}
+function isBridgeEnvelope(value) {
+  if (!value || typeof value !== "object") return false;
+  const o = value;
+  return o.v === BRIDGE_PROTOCOL_VERSION && o.ns === BRIDGE_NAMESPACE && typeof o.id === "string" && typeof o.method === "string";
+}
+function parseBridgeMessage(raw) {
+  try {
+    const parsed = typeof raw === "string" ? JSON.parse(raw) : raw;
+    return isBridgeEnvelope(parsed) ? parsed : null;
+  } catch (e) {
+    return null;
+  }
+}
+function serializeBridgeMessage(msg) {
+  return JSON.stringify(msg);
+}
+var FLUTTER_LEGACY_STACK_HANDLERS = {
+  push: "stackPush",
+  replace: "stackReplace",
+  pop: "stackPop",
+  reset: "stackReset"
+};
+var FLUTTER_UNIFIED_HANDLER = "webviewkitBridge";
+var RN_BRIDGE_HANDLER = "webviewkitBridge";
+
+// src/bridge/transport.ts
+var LEGACY_HANDLER_BY_METHOD = {
+  [STACK_BRIDGE_METHODS.PUSH]: FLUTTER_LEGACY_STACK_HANDLERS.push,
+  [STACK_BRIDGE_METHODS.REPLACE]: FLUTTER_LEGACY_STACK_HANDLERS.replace,
+  [STACK_BRIDGE_METHODS.POP]: FLUTTER_LEGACY_STACK_HANDLERS.pop,
+  [STACK_BRIDGE_METHODS.RESET]: FLUTTER_LEGACY_STACK_HANDLERS.reset
+};
+function unavailable(host) {
+  throw new Error(`${host} bridge is not available`);
+}
+function createReactNativeTransport() {
+  return {
+    host: "react-native",
+    async send(envelope) {
+      var _a;
+      try {
+        const bridge = (_a = window.ReactNativeWebView) != null ? _a : unavailable("react-native");
+        bridge.postMessage(serializeBridgeMessage(envelope));
+        return void 0;
+      } catch (error) {
+        throw toBridgeError(error, BRIDGE_ERROR_CODES.BRIDGE_UNAVAILABLE);
+      }
+    }
+  };
+}
+function createFlutterTransport(options) {
+  const useLegacy = options.flutterLegacyHandlers !== false;
+  return {
+    host: "flutter",
+    async send(envelope) {
+      var _a, _b;
+      const bridge = window.flutter_inappwebview;
+      if (!(bridge == null ? void 0 : bridge.callHandler)) {
+        throw toBridgeError(
+          new Error("flutter bridge is not available"),
+          BRIDGE_ERROR_CODES.BRIDGE_UNAVAILABLE
+        );
+      }
+      const call = bridge.callHandler.bind(bridge);
+      const handler = useLegacy ? LEGACY_HANDLER_BY_METHOD[envelope.method] : null;
+      if (!handler) {
+        return call(FLUTTER_UNIFIED_HANDLER, serializeBridgeMessage(envelope));
+      }
+      if (envelope.method === STACK_BRIDGE_METHODS.POP) {
+        return call(handler);
+      }
+      const payload = envelope.payload;
+      return call(handler, (_a = payload == null ? void 0 : payload.url) != null ? _a : "", (_b = payload == null ? void 0 : payload.meta) != null ? _b : null);
+    }
+  };
+}
+var browserTransport = {
+  host: "browser",
+  async send() {
+    return void 0;
+  }
+};
+function createBridgeTransport(host = detectBridgeHost(), options = {}) {
+  if (host === "react-native") return createReactNativeTransport();
+  if (host === "flutter") return createFlutterTransport(options);
+  return browserTransport;
+}
+
+// src/bridge/url-policy.ts
+function isSafeStackUrl(url) {
+  if (url.startsWith("/"))
+    return !url.startsWith("//") && !url.startsWith("/\\");
+  if (typeof window === "undefined") return false;
+  try {
+    const parsed = new URL(url);
+    return (parsed.protocol === "http:" || parsed.protocol === "https:") && parsed.origin === window.location.origin;
+  } catch (e) {
+    return false;
+  }
+}
+function toStackPath(url) {
+  if (url.startsWith("/") || typeof window === "undefined") return url;
+  try {
+    const parsed = new URL(url);
+    if (parsed.origin !== window.location.origin) return url;
+    return parsed.pathname + parsed.search + parsed.hash;
+  } catch (e) {
+    return url;
+  }
+}
+function assertStackUrl(payload, allowUrl = isSafeStackUrl) {
+  const url = payload == null ? void 0 : payload.url;
+  if (typeof url !== "string" || url.trim().length === 0) {
+    throw new BridgeError(
+      BRIDGE_ERROR_CODES.INVALID_PAYLOAD,
+      "payload.url must be a non-empty string"
+    );
+  }
+  if (!allowUrl(url)) {
+    throw new BridgeError(
+      BRIDGE_ERROR_CODES.URL_NOT_ALLOWED,
+      `url is not allowed: ${url}`
+    );
+  }
+  return toStackPath(url);
+}
+
+// src/bridge/client.ts
+function withTimeout(promise, timeoutMs, method) {
+  let timer;
+  const timeout = new Promise((_, reject) => {
+    timer = setTimeout(
+      () => reject(
+        new BridgeError(
+          BRIDGE_ERROR_CODES.TIMEOUT,
+          `${method} timed out after ${timeoutMs}ms`
+        )
+      ),
+      timeoutMs
+    );
+  });
+  return Promise.race([promise, timeout]).finally(() => clearTimeout(timer));
+}
+var WebViewBridgeClient = class {
+  constructor(options = {}) {
+    var _a, _b, _c, _d;
+    this.host = (_b = (_a = options.transport) == null ? void 0 : _a.host) != null ? _b : detectBridgeHost();
+    this.transport = (_c = options.transport) != null ? _c : createBridgeTransport(this.host, options);
+    this.allowUrl = options.allowUrl;
+    this.timeoutMs = (_d = options.timeoutMs) != null ? _d : BRIDGE_TIMEOUT_MS;
+  }
+  /** 응답을 기다리지 않는 단방향 전송 */
+  async send(envelope) {
+    return this.transport.send(envelope);
+  }
+  async request(method, payload, options = {}) {
+    var _a;
+    const envelope = createBridgeEnvelope(method, payload);
+    const timeoutMs = (_a = options.timeoutMs) != null ? _a : this.timeoutMs;
+    const waitsForReply = options.expectResponse === true && this.host === "react-native";
+    const reply2 = waitsForReply ? waitForResponse(envelope.id, timeoutMs) : null;
+    try {
+      const sent = await withTimeout(this.send(envelope), timeoutMs, method);
+      if (!reply2) return { envelope, result: sent };
+      const response = await reply2;
+      return { envelope, result: response.payload };
+    } catch (error) {
+      cancelResponse(envelope.id);
+      throw error;
+    }
+  }
+  async stackRequest(method, url, meta, options) {
+    const path = assertStackUrl({ url }, this.allowUrl);
+    return this.request(method, { url: path, meta }, options);
+  }
+  stackPush(url, meta = null, options) {
+    return this.stackRequest(STACK_BRIDGE_METHODS.PUSH, url, meta, options);
+  }
+  stackReplace(url, meta = null, options) {
+    return this.stackRequest(STACK_BRIDGE_METHODS.REPLACE, url, meta, options);
+  }
+  stackPop(options) {
+    return this.request(STACK_BRIDGE_METHODS.POP, void 0, options);
+  }
+  async stackReset(url, meta = null, options) {
+    const path = assertStackUrl({ url }, this.allowUrl);
+    return this.request(
+      STACK_BRIDGE_METHODS.RESET,
+      { url: path, meta },
+      options
+    );
+  }
+  /** web → native 웹 스택 변경 알림 (응답 없음) */
+  notifyStackChanged(payload) {
+    return this.send(
+      createBridgeEnvelope(STACK_BRIDGE_METHODS.CHANGED, payload)
+    );
+  }
+};
+function createWebViewBridgeClient(options) {
+  return new WebViewBridgeClient(options);
+}
+
+// src/bridge/stack-router-bridge.ts
+var cachedBridge = null;
+function createStackRouterBridge(options) {
+  const host = detectBridgeHost();
+  if (!isNativeBridgeHost(host)) return null;
+  const client = createWebViewBridgeClient(options);
+  return {
+    push: (url, meta, requestOptions) => client.stackPush(url, meta != null ? meta : null, requestOptions),
+    replace: (url, meta, requestOptions) => client.stackReplace(url, meta != null ? meta : null, requestOptions),
+    pop: (requestOptions) => client.stackPop(requestOptions),
+    reset: (url, meta, requestOptions) => client.stackReset(url, meta != null ? meta : null, requestOptions)
+  };
+}
+function getStackRouterBridge() {
+  if (typeof window === "undefined") return null;
+  if (window.stackRouterBridge) return window.stackRouterBridge;
+  if (!cachedBridge) cachedBridge = createStackRouterBridge();
+  return cachedBridge;
+}
+function installStackRouterBridge(options) {
+  if (typeof window === "undefined") return null;
+  const bridge = createStackRouterBridge(options);
+  if (bridge) {
+    window.stackRouterBridge = bridge;
+  }
+  return bridge;
+}
+function resetStackRouterBridgeCache() {
+  cachedBridge = null;
+}
+
+// src/bridge/host.ts
+var STACK_URL_METHODS = {
+  [STACK_BRIDGE_METHODS.PUSH]: "push",
+  [STACK_BRIDGE_METHODS.REPLACE]: "replace",
+  [STACK_BRIDGE_METHODS.RESET]: "reset"
+};
+async function route(envelope, options) {
+  var _a, _b, _c;
+  const custom = (_a = options.handlers) == null ? void 0 : _a[envelope.method];
+  if (custom) return Boolean(await custom(envelope.payload, envelope));
+  if (envelope.method === BACK_REQUEST_METHOD) {
+    return Boolean(await ((_b = options.onBackRequest) == null ? void 0 : _b.call(options)));
+  }
+  const stack = options.stack;
+  const urlMethod = STACK_URL_METHODS[envelope.method];
+  if (stack && urlMethod) {
+    const url = assertStackUrl(envelope.payload, options.allowUrl);
+    const meta = (_c = envelope.payload.meta) != null ? _c : null;
+    return Boolean(await stack[urlMethod](url, meta));
+  }
+  if (stack && envelope.method === STACK_BRIDGE_METHODS.POP) {
+    return Boolean(await stack.pop());
+  }
+  throw new BridgeError(
+    BRIDGE_ERROR_CODES.UNKNOWN_METHOD,
+    `No handler for ${envelope.method}`
+  );
+}
+async function reply(request, result, options) {
+  var _a, _b;
+  const host = detectBridgeHost();
+  if (!isNativeBridgeHost(host)) return;
+  const response = createBridgeResponse(request, {
+    payload: { handled: result.handled },
+    error: (_a = result.error) == null ? void 0 : _a.toBody()
+  });
+  try {
+    await createBridgeTransport(host, options.transport).send(response);
+  } catch (error) {
+    (_b = options.onError) == null ? void 0 : _b.call(
+      options,
+      toBridgeError(error, BRIDGE_ERROR_CODES.BRIDGE_UNAVAILABLE),
+      response
+    );
+  }
+}
+async function dispatchEnvelope(envelope, options) {
+  var _a, _b;
+  if (envelope.method === BRIDGE_RESPONSE_METHOD) {
+    return settleResponse(envelope);
+  }
+  (_a = options.onMessage) == null ? void 0 : _a.call(options, envelope);
+  let handled = false;
+  let failure;
+  try {
+    handled = await route(envelope, options);
+  } catch (error) {
+    failure = toBridgeError(error, BRIDGE_ERROR_CODES.HANDLER_ERROR);
+    (_b = options.onError) == null ? void 0 : _b.call(options, failure, envelope);
+  }
+  if (options.replyToNative || envelope.method === BACK_REQUEST_METHOD) {
+    await reply(envelope, { handled, error: failure }, options);
+  }
+  return handled;
+}
+function handleBridgeMessage(raw, options) {
+  const envelope = parseBridgeMessage(raw);
+  if (!envelope) return Promise.resolve(false);
+  return dispatchEnvelope(envelope, options);
+}
+var isDev = () => {
+  var _a;
+  return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production";
+};
+function legacyCall(method, payload, options) {
+  return dispatchEnvelope(createBridgeEnvelope(method, payload), {
+    ...options,
+    replyToNative: false
+  });
+}
+function installBridgeHost(options) {
+  if (typeof window === "undefined") {
+    return () => void 0;
+  }
+  const installed = {};
+  const target = window;
+  const install = (key, value) => {
+    if (isDev() && target[key] !== void 0) {
+      console.warn(`[webviewkit] window.${key} is being overwritten`);
+    }
+    target[key] = value;
+    installed[key] = value;
+  };
+  install("webviewkitBridge", {
+    postMessage: (raw) => {
+      void handleBridgeMessage(raw, options);
+    }
+  });
+  if (options.legacyInboundHandlers !== false && options.stack) {
+    install(
+      "stackPush",
+      (url, meta) => legacyCall(STACK_BRIDGE_METHODS.PUSH, { url, meta }, options)
+    );
+    install(
+      "stackReplace",
+      (url, meta) => legacyCall(STACK_BRIDGE_METHODS.REPLACE, { url, meta }, options)
+    );
+    install(
+      "stackPop",
+      () => legacyCall(STACK_BRIDGE_METHODS.POP, void 0, options)
+    );
+    install(
+      "stackReset",
+      (url, meta) => legacyCall(STACK_BRIDGE_METHODS.RESET, { url, meta }, options)
+    );
+  }
+  const outbound = options.exposeStackRouterBridge === true ? createStackRouterBridge(options.transport) : options.exposeStackRouterBridge || null;
+  if (outbound) install("stackRouterBridge", outbound);
+  return () => {
+    Object.keys(installed).forEach((key) => {
+      if (target[key] === installed[key]) delete target[key];
+    });
+  };
+}
+function emitBridgeEnvelope(method, payload) {
+  return createBridgeEnvelope(method, payload);
+}
+
+// src/bridge/WebViewBridgeProvider.tsx
+import { useEffect, useRef } from "react";
+import { Fragment, jsx } from "@emotion/react/jsx-runtime";
+function WebViewBridgeProvider({
+  children = null,
+  stack,
+  transport,
+  enableOutboundBridge = true,
+  hostOptions
+}) {
+  const latest = useRef({ stack, transport, hostOptions });
+  latest.current = { stack, transport, hostOptions };
+  const hasStack = Boolean(stack);
+  useEffect(() => {
+    const call = (key) => (...args) => {
+      var _a;
+      const handler = (_a = latest.current.stack) == null ? void 0 : _a[key];
+      return handler ? handler(...args) : false;
+    };
+    const options = latest.current.hostOptions;
+    const cleanups = [];
+    cleanups.push(
+      installBridgeHost({
+        ...options,
+        onMessage: (envelope) => {
+          var _a, _b;
+          return (_b = (_a = latest.current.hostOptions) == null ? void 0 : _a.onMessage) == null ? void 0 : _b.call(_a, envelope);
+        },
+        onError: (error, envelope) => {
+          var _a, _b;
+          return (_b = (_a = latest.current.hostOptions) == null ? void 0 : _a.onError) == null ? void 0 : _b.call(_a, error, envelope);
+        },
+        onBackRequest: () => {
+          var _a, _b, _c;
+          return (_c = (_b = (_a = latest.current.hostOptions) == null ? void 0 : _a.onBackRequest) == null ? void 0 : _b.call(_a)) != null ? _c : false;
+        },
+        stack: hasStack ? {
+          push: call("push"),
+          replace: call("replace"),
+          pop: call("pop"),
+          reset: call("reset")
+        } : void 0,
+        legacyInboundHandlers: hasStack
+      })
+    );
+    const abort = new AbortController();
+    if (enableOutboundBridge) {
+      void waitForBridgeHost({ signal: abort.signal }).then(() => {
+        if (abort.signal.aborted) return;
+        const outbound = createStackRouterBridge(latest.current.transport);
+        if (!outbound) return;
+        window.stackRouterBridge = outbound;
+        cleanups.push(() => {
+          if (window.stackRouterBridge === outbound)
+            delete window.stackRouterBridge;
+        });
+      });
+    }
+    return () => {
+      abort.abort();
+      cleanups.forEach((cleanup) => cleanup());
+    };
+  }, [enableOutboundBridge, hasStack]);
+  return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+// src/type.ts
+var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["FORWARD"] = "forward";
+  Direction2["BACKWARD"] = "backward";
+  return Direction2;
+})(Direction || {});
+var HistoryAction = /* @__PURE__ */ ((HistoryAction2) => {
+  HistoryAction2["PUSH"] = "PUSH";
+  HistoryAction2["POP"] = "POP";
+  HistoryAction2["REPLACE"] = "REPLACE";
+  return HistoryAction2;
+})(HistoryAction || {});
+
+// src/history.ts
+var isBrowser = () => typeof window !== "undefined";
+var listeners = /* @__PURE__ */ new Set();
+var currentPath = () => window.location.pathname + window.location.search;
+var onPopState = (event) => {
+  var _a;
+  const state = {
+    path: currentPath(),
+    ...(_a = event.state) != null ? _a : {},
+    action: "POP" /* POP */
+  };
+  listeners.forEach((listener) => listener(state));
+};
+var history = {
+  push: (path, state = {}) => {
+    if (!isBrowser()) return;
+    window.history.pushState(
+      { ...state, path, action: "PUSH" /* PUSH */ },
+      "",
+      path
+    );
+  },
+  replace: (path, state = {}) => {
+    if (!isBrowser()) return;
+    window.history.replaceState(
+      { ...state, path, action: "REPLACE" /* REPLACE */ },
+      "",
+      path
+    );
+  },
+  /** `history.go(delta)` 후 popstate 가 오면 true, BACK_TIMEOUT_MS 안에 오지 않으면 false */
+  travel: (delta) => {
+    if (!isBrowser()) return Promise.resolve(false);
+    return new Promise((resolve) => {
+      const finish = (popped) => {
+        window.clearTimeout(timer);
+        window.removeEventListener("popstate", onPop);
+        resolve(popped);
+      };
+      const onPop = () => finish(true);
+      const timer = window.setTimeout(() => finish(false), BACK_TIMEOUT_MS);
+      window.addEventListener("popstate", onPop);
+      window.history.go(delta);
+    });
+  },
+  back: () => history.travel(-1),
+  forward: () => {
+    if (!isBrowser()) return;
+    window.history.forward();
+  },
+  go: (delta) => {
+    if (!isBrowser()) return;
+    window.history.go(delta);
+  },
+  getCurrentState: () => {
+    if (!isBrowser()) return { path: "/" };
+    const state = window.history.state;
+    return (state == null ? void 0 : state.path) ? state : { path: currentPath() };
+  },
+  addListener: (listener) => {
+    if (!isBrowser()) return () => false;
+    if (listeners.size === 0) {
+      window.addEventListener("popstate", onPopState);
+    }
+    listeners.add(listener);
+    return () => {
+      const removed = listeners.delete(listener);
+      if (listeners.size === 0) {
+        window.removeEventListener("popstate", onPopState);
+      }
+      return removed;
+    };
+  }
+};
+
+// src/stack-dev/stack-dev-roadmap.tsx
+import React2 from "react";
+import { jsx as jsx2, jsxs } from "@emotion/react/jsx-runtime";
+function StackDevRoadmap({
+  pages,
+  currentPath: currentPath2,
+  visible = true
+}) {
+  if (!visible || pages.length === 0) return null;
+  const depth = pages.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": `WebViewKit stack depth ${depth}`,
+      style: {
+        position: "fixed",
+        bottom: 12,
+        right: 12,
+        zIndex: 2147483646,
+        minWidth: 200,
+        maxWidth: 320,
+        padding: "10px 12px",
+        borderRadius: 10,
+        background: "rgba(7, 11, 18, 0.92)",
+        border: "1px solid rgba(0, 232, 184, 0.35)",
+        color: "#e8eef4",
+        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace',
+        fontSize: 11,
+        lineHeight: 1.45,
+        boxShadow: "0 8px 24px rgba(0,0,0,0.35)",
+        pointerEvents: "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", gap: 8 }, children: [
+          /* @__PURE__ */ jsx2("span", { style: { color: "#00e8b8", fontWeight: 700 }, children: "WebViewKit" }),
+          /* @__PURE__ */ jsxs("span", { style: { color: "#94a3b8" }, children: [
+            "stack \xD7 ",
+            depth
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 0,
+              marginTop: 10,
+              padding: "4px 0"
+            },
+            children: pages.map((page, index) => {
+              const isCurrent = page.path === currentPath2;
+              const isLast = index === pages.length - 1;
+              return /* @__PURE__ */ jsxs(React2.Fragment, { children: [
+                index > 0 && /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    style: {
+                      width: 14,
+                      height: 2,
+                      background: isLast ? "linear-gradient(90deg,#334155,#00e8b8)" : "#334155",
+                      flexShrink: 0
+                    }
+                  }
+                ),
+                /* @__PURE__ */ jsx2(
+                  "span",
+                  {
+                    title: page.path,
+                    style: {
+                      width: isCurrent ? 12 : 8,
+                      height: isCurrent ? 12 : 8,
+                      borderRadius: "50%",
+                      flexShrink: 0,
+                      background: isCurrent ? "#00e8b8" : "#475569",
+                      boxShadow: isCurrent ? "0 0 10px rgba(0,232,184,0.85)" : "none",
+                      transition: "all 0.2s ease"
+                    }
+                  }
+                )
+              ] }, `${page.path}-${index}`);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx2("ol", { style: { margin: "8px 0 0", paddingLeft: 18, color: "#cbd5e1" }, children: pages.map((page, index) => {
+          const isCurrent = index === pages.length - 1;
+          return /* @__PURE__ */ jsxs(
+            "li",
+            {
+              style: {
+                fontWeight: isCurrent ? 600 : 400,
+                color: isCurrent ? "#00e8b8" : "#94a3b8"
+              },
+              children: [
+                page.path,
+                isCurrent ? " \u2190 top" : ""
+              ]
+            },
+            `${page.path}-${index}`
+          );
+        }) })
+      ]
+    }
+  );
+}
+
+// src/stack-router/_components/back-router.tsx
+import styled4 from "@emotion/styled";
+
+// src/stack-router/stack-router-provider.tsx
+import styled3 from "@emotion/styled";
+import { createContext as createContext2, useContext as useContext2, useMemo } from "react";
+
+// src/stack-router/_components/header.tsx
+import styled from "@emotion/styled";
+import { jsx as jsx3, jsxs as jsxs2 } from "@emotion/react/jsx-runtime";
+var Header = ({ title }) => {
+  const { currentPath: currentPath2, canGoBack } = useStackRouter();
+  return /* @__PURE__ */ jsxs2(StyledHeader, { children: [
+    canGoBack && /* @__PURE__ */ jsx3(back_router_default, {}),
+    /* @__PURE__ */ jsx3(StyledTitle, { children: title != null ? title : currentPath2 })
+  ] });
+};
+var StyledHeader = styled.header`
+  width: 100%;
+  height: 64px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  background-color: var(--wvk-header-bg, #ffffff);
+  border-bottom: 1px solid var(--wvk-header-border, #e5e7eb);
+  display: flex;
+  align-items: center;
+  padding: 0 1rem;
+`;
+var StyledTitle = styled.h1`
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--wvk-header-color, #111827);
+`;
+var header_default = Header;
+
+// src/stack-router/_components/stack-page.tsx
+import { css, keyframes } from "@emotion/react";
+import styled2 from "@emotion/styled";
+import { useLayoutEffect, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "@emotion/react/jsx-runtime";
+var IOS_EASING = "cubic-bezier(0.32, 0.72, 0, 1)";
+var FADE_EASING = "ease";
+var PARALLAX_OFFSET = "-30%";
+var coverIn = keyframes`
+  from { transform: translate3d(100%, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+`;
+var coverOut = keyframes`
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(100%, 0, 0); }
+`;
+var parallaxOut = keyframes`
+  from { transform: translate3d(0, 0, 0); }
+  to { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+`;
+var parallaxIn = keyframes`
+  from { transform: translate3d(${PARALLAX_OFFSET}, 0, 0); }
+  to { transform: translate3d(0, 0, 0); }
+`;
+var dimIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var dimOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+var fadeIn = keyframes`
+  from { opacity: 0; }
+  to { opacity: 1; }
+`;
+var fadeOut = keyframes`
+  from { opacity: 1; }
+  to { opacity: 0; }
+`;
+var layerOf = (direction, pageState) => direction === "push" === (pageState === "enter") ? "upper" : "lower";
+function slideStyles(direction, pageState, duration) {
+  const timing = `${duration}ms ${IOS_EASING} forwards`;
+  if (layerOf(direction, pageState) === "upper") {
+    return css`
+      animation: ${direction === "push" ? coverIn : coverOut} ${timing};
+      box-shadow: var(--wvk-edge-shadow, -6px 0 24px rgba(0, 0, 0, 0.12));
+    `;
+  }
+  return css`
+    animation: ${direction === "push" ? parallaxOut : parallaxIn} ${timing};
+    &::after {
+      content: "";
+      /* transform 중인 페이지 기준 fixed = 스크롤과 무관하게 페이지 전체를 덮음 */
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background: var(--wvk-dim-color, rgba(0, 0, 0, 0.12));
+      animation: ${direction === "push" ? dimIn : dimOut} ${timing};
+    }
+  `;
+}
+var PageWrapper = styled2.div`
+  position: absolute;
+  inset: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  background: var(--wvk-page-bg, #ffffff);
+  z-index: ${({ zIndex }) => zIndex};
+  visibility: ${({ pageState }) => pageState === "covered" ? "hidden" : "visible"};
+  ${({ pageState, direction, transitionType, duration }) => {
+  if (pageState !== "enter" && pageState !== "exit") return "";
+  if (transitionType === "none" || duration === 0) return "";
+  if (transitionType === "fade") {
+    return css`
+        will-change: opacity;
+        animation: ${pageState === "enter" ? fadeIn : fadeOut} ${duration}ms
+          ${FADE_EASING} forwards;
+      `;
+  }
+  return css`
+      will-change: transform;
+      ${slideStyles(direction, pageState, duration)}
+    `;
+}}
+`;
+function StackPage({
+  isTop,
+  onAnimationEnd,
+  children,
+  ...wrapperProps
+}) {
+  const ref = useRef2(null);
+  useLayoutEffect(() => {
+    var _a;
+    (_a = ref.current) == null ? void 0 : _a.toggleAttribute("inert", !isTop);
+  }, [isTop]);
+  return /* @__PURE__ */ jsx4(
+    PageWrapper,
+    {
+      ref,
+      ...wrapperProps,
+      "data-state": wrapperProps.pageState,
+      "aria-hidden": isTop ? void 0 : true,
+      onAnimationEnd: (event) => {
+        if (event.target === event.currentTarget && !event.pseudoElement) {
+          onAnimationEnd == null ? void 0 : onAnimationEnd();
+        }
+      },
+      children
+    }
+  );
+}
+
+// src/stack-router/activity-context.tsx
+import { createContext, useContext } from "react";
+var ActivityContext = createContext(null);
+function useActivity() {
+  const context = useContext(ActivityContext);
+  if (!context) {
+    throw new Error(
+      "useActivity must be used inside a StackRouterProvider page"
+    );
+  }
+  return context;
+}
+function useParams() {
+  return useActivity().params;
+}
+
+// src/stack-router/stack-reducer.ts
+var topOf = (entries) => entries[entries.length - 1];
+function createStackState(entry) {
+  return { entries: [entry], leaving: [], transition: null };
+}
+function stackReducer(state, action) {
+  switch (action.type) {
+    case "PUSH": {
+      const previousTop = topOf(state.entries);
+      return {
+        entries: [...state.entries, action.entry],
+        leaving: [],
+        transition: action.animate ? {
+          type: "push",
+          enterKey: action.entry.key,
+          exitKey: previousTop.key
+        } : null
+      };
+    }
+    case "REPLACE":
+      return {
+        ...state,
+        entries: [...state.entries.slice(0, -1), action.entry]
+      };
+    case "POP_TO": {
+      const index = Math.max(0, action.index);
+      if (index >= state.entries.length - 1) return state;
+      const entries = state.entries.slice(0, index + 1);
+      const leaving = state.entries.slice(index + 1);
+      if (!action.animate) {
+        return { entries, leaving: [], transition: null };
+      }
+      return {
+        entries,
+        leaving,
+        transition: {
+          type: "pop",
+          enterKey: topOf(entries).key,
+          exitKeys: leaving.map((entry) => entry.key)
+        }
+      };
+    }
+    case "RESET":
+      return createStackState(action.entry);
+    case "RESTORE":
+      return { entries: action.entries, leaving: [], transition: null };
+    case "END_TRANSITION":
+      if (!state.transition && state.leaving.length === 0) return state;
+      return { ...state, leaving: [], transition: null };
+    default:
+      return state;
+  }
+}
+function getRenderedPages(state) {
+  const { entries, leaving, transition } = state;
+  const top = topOf(entries);
+  return [...entries, ...leaving].map((entry) => {
+    const isTop = entry.key === top.key;
+    let pageState = isTop ? "idle" : "covered";
+    if ((transition == null ? void 0 : transition.type) === "push") {
+      if (entry.key === transition.enterKey) pageState = "enter";
+      if (entry.key === transition.exitKey) pageState = "exit";
+    }
+    if ((transition == null ? void 0 : transition.type) === "pop") {
+      if (entry.key === transition.enterKey) pageState = "enter";
+      if (transition.exitKeys.includes(entry.key)) pageState = "exit";
+    }
+    return { entry, pageState, isTop };
+  });
+}
+
+// src/stack-router/use-prefers-reduced-motion.ts
+import { useEffect as useEffect2, useState } from "react";
+var QUERY = "(prefers-reduced-motion: reduce)";
+var getMediaQuery = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(QUERY) : null;
+function usePrefersReducedMotion() {
+  const [reduced, setReduced] = useState(
+    () => {
+      var _a, _b;
+      return (_b = (_a = getMediaQuery()) == null ? void 0 : _a.matches) != null ? _b : false;
+    }
+  );
+  useEffect2(() => {
+    var _a;
+    const mediaQuery = getMediaQuery();
+    if (!mediaQuery) return;
+    const onChange = () => setReduced(mediaQuery.matches);
+    (_a = mediaQuery.addEventListener) == null ? void 0 : _a.call(mediaQuery, "change", onChange);
+    return () => {
+      var _a2;
+      return (_a2 = mediaQuery.removeEventListener) == null ? void 0 : _a2.call(mediaQuery, "change", onChange);
+    };
+  }, []);
+  return reduced;
+}
+
+// src/stack-router/use-stack-bridge-sync.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+function useStackBridgeSync(bridge, router, onBackAtRoot) {
+  const enabled = Boolean(bridge);
+  const options = typeof bridge === "object" ? bridge : {};
+  const latest = useRef3({ router, options, onBackAtRoot });
+  latest.current = { router, options, onBackAtRoot };
+  useEffect3(() => {
+    if (!enabled) return;
+    return installBridgeHost({
+      allowUrl: latest.current.options.allowUrl,
+      onError: (error, envelope) => {
+        var _a, _b;
+        return (_b = (_a = latest.current.options).onError) == null ? void 0 : _b.call(_a, error, envelope);
+      },
+      stack: {
+        push: (url) => latest.current.router.push(url),
+        replace: (url) => latest.current.router.replace(url),
+        reset: (url) => latest.current.router.reset(url),
+        pop: () => latest.current.router.back()
+      },
+      onBackRequest: () => {
+        var _a;
+        const current = latest.current;
+        if (current.router.canGoBack) return current.router.back();
+        (_a = current.onBackAtRoot) == null ? void 0 : _a.call(current);
+        return false;
+      }
+    });
+  }, [enabled]);
+  const { depth, currentPath: currentPath2 } = router;
+  const emit = enabled && options.emitStackChanged !== false;
+  useEffect3(() => {
+    if (!emit || !isNativeBridgeHost(detectBridgeHost())) return;
+    createWebViewBridgeClient().notifyStackChanged({ depth, path: currentPath2 }).catch((error) => {
+      var _a, _b;
+      return (_b = (_a = latest.current.options).onError) == null ? void 0 : _b.call(_a, error);
+    });
+  }, [emit, depth, currentPath2]);
+}
+
+// src/stack-router/use-stack-navigation.ts
+import { useCallback, useEffect as useEffect4, useReducer, useRef as useRef4 } from "react";
+
+// src/stack-router/match-path.ts
+var splitSegments = (pathname) => pathname.split("/").filter((segment) => segment.length > 0);
+var safeDecode = (value) => {
+  try {
+    return decodeURIComponent(value);
+  } catch (e) {
+    return value;
+  }
+};
+function parseQuery(search) {
+  const query = {};
+  new URLSearchParams(search).forEach((value, key) => {
+    query[key] = value;
+  });
+  return query;
+}
+function matchPath(pattern, url) {
+  const [withoutHash] = url.split("#");
+  const queryIndex = withoutHash.indexOf("?");
+  const pathname = queryIndex === -1 ? withoutHash : withoutHash.slice(0, queryIndex);
+  const search = queryIndex === -1 ? "" : withoutHash.slice(queryIndex);
+  const patternSegments = splitSegments(pattern);
+  const pathSegments = splitSegments(pathname);
+  if (patternSegments.length !== pathSegments.length) return null;
+  const params = {};
+  for (let i = 0; i < patternSegments.length; i += 1) {
+    const expected = patternSegments[i];
+    const actual = pathSegments[i];
+    if (expected.startsWith(":")) {
+      params[expected.slice(1)] = safeDecode(actual);
+    } else if (expected !== actual) {
+      return null;
+    }
+  }
+  return { params, query: parseQuery(search) };
+}
+function findActivity(activities, url) {
+  for (const activity of activities) {
+    const match = matchPath(activity.path, url);
+    if (match) return { activity, match };
+  }
+  return null;
+}
+
+// src/stack-router/use-stack-navigation.ts
+var isDev2 = () => {
+  var _a;
+  return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) !== "production";
+};
+function createEntry(hit, path, data, key = createBridgeId()) {
+  return {
+    key,
+    path,
+    pattern: hit.activity.path,
+    params: hit.match.params,
+    query: hit.match.query,
+    data
+  };
+}
+var currentUrl = () => window.location.pathname + window.location.search;
+function useStackNavigation(options) {
+  const optionsRef = useRef4(options);
+  optionsRef.current = options;
+  const [state, dispatch] = useReducer(stackReducer, void 0, () => {
+    const { initialActivity } = options;
+    return createStackState(
+      createEntry(
+        { activity: initialActivity, match: { params: {}, query: {} } },
+        initialActivity.path
+      )
+    );
+  });
+  const stateRef = useRef4(state);
+  stateRef.current = state;
+  const busyRef = useRef4(false);
+  const resolve = useCallback((path) => {
+    const { activities, initialActivity } = optionsRef.current;
+    return findActivity([...activities, initialActivity], path);
+  }, []);
+  const resolveOrNotify = useCallback(
+    (path) => {
+      var _a, _b;
+      const hit = resolve(path);
+      if (!hit) {
+        if (isDev2()) {
+          console.warn(`[webviewkit] No activity matches "${path}"`);
+        }
+        (_b = (_a = optionsRef.current).onNotFound) == null ? void 0 : _b.call(_a, path);
+      }
+      return hit;
+    },
+    [resolve]
+  );
+  const animate = () => optionsRef.current.duration > 0;
+  const push = useCallback(
+    (path, data) => {
+      if (busyRef.current) return false;
+      const hit = resolveOrNotify(path);
+      if (!hit) return false;
+      const entry = createEntry(hit, path, data);
+      busyRef.current = true;
+      history.push(path, {
+        key: entry.key,
+        index: stateRef.current.entries.length,
+        data
+      });
+      dispatch({ type: "PUSH", entry, animate: animate() });
+      return true;
+    },
+    [resolveOrNotify]
+  );
+  const replace = useCallback(
+    (path, data) => {
+      if (busyRef.current) return false;
+      const hit = resolveOrNotify(path);
+      if (!hit) return false;
+      const entry = createEntry(hit, path, data);
+      history.replace(path, {
+        key: entry.key,
+        index: stateRef.current.entries.length - 1,
+        data
+      });
+      dispatch({ type: "REPLACE", entry });
+      return true;
+    },
+    [resolveOrNotify]
+  );
+  const reset = useCallback(
+    (path, data) => {
+      if (busyRef.current) return false;
+      const hit = resolveOrNotify(path);
+      if (!hit) return false;
+      const entry = createEntry(hit, path, data);
+      history.replace(path, { key: entry.key, index: 0, data });
+      dispatch({ type: "RESET", entry });
+      return true;
+    },
+    [resolveOrNotify]
+  );
+  const pop = useCallback((count = 1) => {
+    var _a, _b;
+    if (busyRef.current) return false;
+    const { entries } = stateRef.current;
+    if (entries.length <= 1) {
+      (_b = (_a = optionsRef.current).onBackAtRoot) == null ? void 0 : _b.call(_a);
+      return false;
+    }
+    const delta = Math.min(Math.max(1, count), entries.length - 1);
+    const targetIndex = entries.length - 1 - delta;
+    busyRef.current = true;
+    dispatch({ type: "POP_TO", index: targetIndex, animate: animate() });
+    void history.travel(-delta);
+    return true;
+  }, []);
+  const back = useCallback(() => pop(1), [pop]);
+  const popTo = useCallback(
+    (path) => {
+      const { entries } = stateRef.current;
+      for (let i = entries.length - 2; i >= 0; i -= 1) {
+        if (entries[i].path === path || entries[i].pattern === path) {
+          return pop(entries.length - 1 - i);
+        }
+      }
+      return false;
+    },
+    [pop]
+  );
+  const endTransition = useCallback(() => {
+    dispatch({ type: "END_TRANSITION" });
+  }, []);
+  useEffect4(() => {
+    const onPop = (historyState) => {
+      const { entries } = stateRef.current;
+      const index = historyState.key ? entries.findIndex((entry2) => entry2.key === historyState.key) : -1;
+      if (index !== -1) {
+        if (index < entries.length - 1) {
+          busyRef.current = true;
+          dispatch({ type: "POP_TO", index, animate: animate() });
+        }
+        return;
+      }
+      const hit = resolveOrNotify(historyState.path);
+      if (!hit) {
+        busyRef.current = false;
+        return;
+      }
+      const entry = createEntry(
+        hit,
+        historyState.path,
+        historyState.data,
+        historyState.key
+      );
+      if (typeof historyState.index === "number" && historyState.index === entries.length) {
+        busyRef.current = true;
+        dispatch({ type: "PUSH", entry, animate: animate() });
+        return;
+      }
+      dispatch({ type: "RESET", entry });
+    };
+    const removeListener = history.addListener(onPop);
+    return () => {
+      removeListener();
+    };
+  }, [resolveOrNotify]);
+  const restoredRef = useRef4(false);
+  useEffect4(() => {
+    if (restoredRef.current) return;
+    restoredRef.current = true;
+    const root = stateRef.current.entries[0];
+    const url = currentUrl();
+    const hit = url === root.path ? null : resolve(url);
+    if (!hit || hit.activity === optionsRef.current.initialActivity) {
+      history.replace(root.path, { key: root.key, index: 0 });
+      return;
+    }
+    const savedData = history.getCurrentState().data;
+    const top = createEntry(hit, url, savedData);
+    if (optionsRef.current.restoreStack === "top-only") {
+      history.replace(url, { key: top.key, index: 0, data: savedData });
+      dispatch({ type: "RESTORE", entries: [top] });
+      return;
+    }
+    history.replace(root.path, { key: root.key, index: 0 });
+    history.push(url, { key: top.key, index: 1, data: savedData });
+    dispatch({ type: "RESTORE", entries: [root, top] });
+  }, [resolve]);
+  useEffect4(() => {
+    if (!state.transition) {
+      busyRef.current = false;
+      return;
+    }
+    const timer = setTimeout(
+      endTransition,
+      optionsRef.current.duration + TRANSITION_END_GRACE_MS
+    );
+    return () => clearTimeout(timer);
+  }, [state, endTransition]);
+  return { state, push, replace, reset, back, pop, popTo, endTransition };
+}
+
+// src/stack-router/stack-router-provider.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "@emotion/react/jsx-runtime";
+var StackRouterContext = createContext2(null);
+var useStackRouter = () => {
+  const context = useContext2(StackRouterContext);
+  if (!context) {
+    throw new Error("useStackRouter must be used within a StackRouterProvider");
+  }
+  return context;
+};
+var isDevEnv = () => {
+  var _a;
+  return typeof process !== "undefined" && ((_a = process.env) == null ? void 0 : _a.NODE_ENV) === "development";
+};
+var StackRouterProvider = ({
+  initialActivity,
+  Activities = [],
+  maxWidth = "600px",
+  isShowHeader = false,
+  enableDevTools,
+  transition = "slide",
+  duration = STACK_TRANSITION_MS,
+  restoreStack = "with-root",
+  safeArea = false,
+  onBackAtRoot,
+  onNotFound,
+  bridge
+}) => {
+  var _a, _b;
+  const reducedMotion = usePrefersReducedMotion();
+  const effectiveDuration = transition === "none" || reducedMotion ? 0 : duration;
+  const navigation = useStackNavigation({
+    initialActivity,
+    activities: Activities,
+    duration: effectiveDuration,
+    restoreStack,
+    onBackAtRoot,
+    onNotFound
+  });
+  const { state, endTransition } = navigation;
+  const elementFor = (pattern) => {
+    var _a2, _b2;
+    return (_b2 = (_a2 = Activities.find((activity) => activity.path === pattern)) == null ? void 0 : _a2.element) != null ? _b2 : initialActivity.path === pattern ? initialActivity.element : null;
+  };
+  const top = state.entries[state.entries.length - 1];
+  const value = useMemo(
+    () => ({
+      currentPath: top.path,
+      currentState: {
+        path: top.path,
+        data: top.data,
+        key: top.key,
+        index: state.entries.length - 1
+      },
+      depth: state.entries.length,
+      canGoBack: state.entries.length > 1,
+      isTransitioning: state.transition !== null,
+      entries: state.entries,
+      visiblePages: state.entries.map((entry) => ({
+        path: entry.path,
+        element: elementFor(entry.pattern)
+      })),
+      Activities,
+      initialActivity,
+      push: navigation.push,
+      replace: navigation.replace,
+      reset: navigation.reset,
+      back: navigation.back,
+      pop: navigation.pop,
+      popTo: navigation.popTo,
+      forward: () => window.history.forward()
+    }),
+    [state, Activities, initialActivity, navigation]
+  );
+  useStackBridgeSync(bridge, value, onBackAtRoot);
+  const direction = (_b = (_a = state.transition) == null ? void 0 : _a.type) != null ? _b : "push";
+  const pages = getRenderedPages(state);
+  const showDevTools = enableDevTools != null ? enableDevTools : isDevEnv();
+  return /* @__PURE__ */ jsxs3(StackRouterContext.Provider, { value, children: [
+    /* @__PURE__ */ jsx5(LayoutContainer, { safeArea, children: /* @__PURE__ */ jsxs3(Layout, { maxWidth, "data-testid": "layout", children: [
+      isShowHeader && /* @__PURE__ */ jsx5(header_default, {}),
+      /* @__PURE__ */ jsx5(PageContainer, { children: pages.map(({ entry, pageState, isTop }, index) => /* @__PURE__ */ jsx5(
+        ActivityContext.Provider,
+        {
+          value: {
+            key: entry.key,
+            path: entry.path,
+            pattern: entry.pattern,
+            params: entry.params,
+            query: entry.query,
+            data: entry.data,
+            index,
+            isTop
+          },
+          children: /* @__PURE__ */ jsx5(
+            StackPage,
+            {
+              pageState,
+              direction,
+              transitionType: transition,
+              duration: effectiveDuration,
+              zIndex: index,
+              isTop,
+              onAnimationEnd: pageState === "enter" ? endTransition : void 0,
+              children: elementFor(entry.pattern)
+            }
+          )
+        },
+        entry.key
+      )) })
+    ] }) }),
+    /* @__PURE__ */ jsx5(
+      StackDevRoadmap,
+      {
+        visible: showDevTools,
+        pages: state.entries.map((entry) => ({ path: entry.path })),
+        currentPath: top.path
+      }
+    )
+  ] });
+};
+var stack_router_provider_default = StackRouterProvider;
+var LayoutContainer = styled3.div`
+  width: 100%;
+  height: 100vh;
+  height: 100dvh;
+  display: flex;
+  justify-content: center;
+  background: var(--wvk-page-bg, #ffffff);
+  box-sizing: border-box;
+  ${({ safeArea }) => safeArea ? `padding: env(safe-area-inset-top) env(safe-area-inset-right)
+    env(safe-area-inset-bottom) env(safe-area-inset-left);` : ""}
+`;
+var Layout = styled3.div`
+  width: 100%;
+  max-width: ${({ maxWidth }) => maxWidth};
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  overflow: hidden;
+`;
+var PageContainer = styled3.div`
+  position: relative;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+`;
+
+// src/stack-router/_components/back-router.tsx
+import { jsx as jsx6 } from "@emotion/react/jsx-runtime";
+var BackRouter = ({ label = "\uB4A4\uB85C \uAC00\uAE30" }) => {
+  const { back } = useStackRouter();
+  return /* @__PURE__ */ jsx6(BackButton, { type: "button", "aria-label": label, onClick: () => back(), children: /* @__PURE__ */ jsx6(BackIcon, {}) });
+};
+var back_router_default = BackRouter;
+var BackButton = styled4.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  padding: 8px;
+  border-radius: 50%;
+  transition: all 0.2s;
+  color: var(--wvk-back-color, #000000);
+
+  &:hover {
+    color: var(--wvk-back-hover-color, #666666);
+  }
+
+  &:active {
+    color: var(--wvk-back-active-color, #999999);
+  }
+`;
+var BackIcon = () => /* @__PURE__ */ jsx6(
+  "svg",
+  {
+    width: "32",
+    height: "32",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-hidden": "true",
+    children: /* @__PURE__ */ jsx6(
+      "path",
+      {
+        d: "M12 20L4 12L12 4",
+        stroke: "currentColor",
+        strokeWidth: "2.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+export {
+  BACK_REQUEST_METHOD,
+  BACK_TIMEOUT_MS,
+  BRIDGE_ERROR_CODES,
+  BRIDGE_NAMESPACE,
+  BRIDGE_PROTOCOL_VERSION,
+  BRIDGE_RESPONSE_METHOD,
+  BRIDGE_TIMEOUT_MS,
+  back_router_default as BackRouter,
+  BridgeError,
+  Direction,
+  FLUTTER_LEGACY_STACK_HANDLERS,
+  FLUTTER_READY_EVENT,
+  FLUTTER_UNIFIED_HANDLER,
+  HistoryAction,
+  RN_BRIDGE_HANDLER,
+  STACK_BRIDGE_METHODS,
+  STACK_TRANSITION_MS,
+  StackDevRoadmap,
+  header_default as StackHeader,
+  stack_router_provider_default as StackRouterProvider,
+  WebViewBridgeClient,
+  WebViewBridgeProvider,
+  assertStackUrl,
+  createBridgeEnvelope,
+  createBridgeId,
+  createBridgeResponse,
+  createBridgeTransport,
+  createStackRouterBridge,
+  createWebViewBridgeClient,
+  detectBridgeHost,
+  emitBridgeEnvelope,
+  findActivity,
+  getStackRouterBridge,
+  handleBridgeMessage,
+  history,
+  installBridgeHost,
+  installStackRouterBridge,
+  isBridgeEnvelope,
+  isNativeBridgeHost,
+  isSafeStackUrl,
+  matchPath,
+  parseBridgeMessage,
+  parseQuery,
+  resetStackRouterBridgeCache,
+  serializeBridgeMessage,
+  toStackPath,
+  useActivity,
+  useParams,
+  useStackRouter,
+  waitForBridgeHost
+};
+//# sourceMappingURL=index.mjs.map