@lolyjs/core 0.2.0-alpha.3 → 0.2.0-alpha.30

package/dist/runtime.js

@@ -3,15 +3,40 @@ import { hydrateRoot } from "react-dom/client";
 
 // modules/runtime/client/constants.ts
 var WINDOW_DATA_KEY = "__FW_DATA__";
+var ROUTER_DATA_KEY = "__LOLY_ROUTER_DATA__";
 var APP_CONTAINER_ID = "__app";
+var ROUTER_NAVIGATE_KEY = "__LOLY_ROUTER_NAVIGATE__";
 
 // modules/runtime/client/window-data.ts
+var LAYOUT_PROPS_KEY = "__FW_LAYOUT_PROPS__";
 function getWindowData() {
   if (typeof window === "undefined") {
     return null;
   }
   return window[WINDOW_DATA_KEY] ?? null;
 }
+function getPreservedLayoutProps() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window[LAYOUT_PROPS_KEY] ?? null;
+}
+function setPreservedLayoutProps(props) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  if (props === null) {
+    delete window[LAYOUT_PROPS_KEY];
+  } else {
+    window[LAYOUT_PROPS_KEY] = props;
+  }
+}
+function getRouterData() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window[ROUTER_DATA_KEY] ?? null;
+}
 function setWindowData(data) {
   window[WINDOW_DATA_KEY] = data;
   if (typeof window !== "undefined") {
@@ -22,6 +47,16 @@ function setWindowData(data) {
     );
   }
 }
+function setRouterData(data) {
+  window[ROUTER_DATA_KEY] = data;
+  if (typeof window !== "undefined") {
+    window.dispatchEvent(
+      new CustomEvent("fw-router-data-refresh", {
+        detail: { data }
+      })
+    );
+  }
+}
 function getCurrentTheme() {
   return getWindowData()?.theme ?? null;
 }
@@ -67,22 +102,158 @@ function matchRouteClient(pathWithSearch, routes) {
 }
 
 // modules/runtime/client/metadata.ts
+function getOrCreateMeta(selector, attributes) {
+  let meta = document.querySelector(selector);
+  if (!meta) {
+    meta = document.createElement("meta");
+    if (attributes.name) meta.name = attributes.name;
+    if (attributes.property) meta.setAttribute("property", attributes.property);
+    if (attributes.httpEquiv) meta.httpEquiv = attributes.httpEquiv;
+    document.head.appendChild(meta);
+  }
+  return meta;
+}
+function getOrCreateLink(rel, href) {
+  const selector = `link[rel="${rel}"]`;
+  let link = document.querySelector(selector);
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = rel;
+    link.href = href;
+    document.head.appendChild(link);
+  } else {
+    link.href = href;
+  }
+  return link;
+}
 function applyMetadata(md) {
   if (!md) return;
   if (md.title) {
     document.title = md.title;
   }
   if (md.description) {
-    let meta = document.querySelector(
-      'meta[name="description"]'
-    );
-    if (!meta) {
-      meta = document.createElement("meta");
-      meta.name = "description";
-      document.head.appendChild(meta);
-    }
+    const meta = getOrCreateMeta('meta[name="description"]', { name: "description" });
     meta.content = md.description;
   }
+  if (md.robots) {
+    const meta = getOrCreateMeta('meta[name="robots"]', { name: "robots" });
+    meta.content = md.robots;
+  }
+  if (md.themeColor) {
+    const meta = getOrCreateMeta('meta[name="theme-color"]', { name: "theme-color" });
+    meta.content = md.themeColor;
+  }
+  if (md.viewport) {
+    const meta = getOrCreateMeta('meta[name="viewport"]', { name: "viewport" });
+    meta.content = md.viewport;
+  }
+  if (md.canonical) {
+    getOrCreateLink("canonical", md.canonical);
+  }
+  if (md.openGraph) {
+    const og = md.openGraph;
+    if (og.title) {
+      const meta = getOrCreateMeta('meta[property="og:title"]', { property: "og:title" });
+      meta.content = og.title;
+    }
+    if (og.description) {
+      const meta = getOrCreateMeta('meta[property="og:description"]', { property: "og:description" });
+      meta.content = og.description;
+    }
+    if (og.type) {
+      const meta = getOrCreateMeta('meta[property="og:type"]', { property: "og:type" });
+      meta.content = og.type;
+    }
+    if (og.url) {
+      const meta = getOrCreateMeta('meta[property="og:url"]', { property: "og:url" });
+      meta.content = og.url;
+    }
+    if (og.image) {
+      if (typeof og.image === "string") {
+        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+        meta.content = og.image;
+      } else {
+        const meta = getOrCreateMeta('meta[property="og:image"]', { property: "og:image" });
+        meta.content = og.image.url;
+        if (og.image.width) {
+          const metaWidth = getOrCreateMeta('meta[property="og:image:width"]', { property: "og:image:width" });
+          metaWidth.content = String(og.image.width);
+        }
+        if (og.image.height) {
+          const metaHeight = getOrCreateMeta('meta[property="og:image:height"]', { property: "og:image:height" });
+          metaHeight.content = String(og.image.height);
+        }
+        if (og.image.alt) {
+          const metaAlt = getOrCreateMeta('meta[property="og:image:alt"]', { property: "og:image:alt" });
+          metaAlt.content = og.image.alt;
+        }
+      }
+    }
+    if (og.siteName) {
+      const meta = getOrCreateMeta('meta[property="og:site_name"]', { property: "og:site_name" });
+      meta.content = og.siteName;
+    }
+    if (og.locale) {
+      const meta = getOrCreateMeta('meta[property="og:locale"]', { property: "og:locale" });
+      meta.content = og.locale;
+    }
+  }
+  if (md.twitter) {
+    const twitter = md.twitter;
+    if (twitter.card) {
+      const meta = getOrCreateMeta('meta[name="twitter:card"]', { name: "twitter:card" });
+      meta.content = twitter.card;
+    }
+    if (twitter.title) {
+      const meta = getOrCreateMeta('meta[name="twitter:title"]', { name: "twitter:title" });
+      meta.content = twitter.title;
+    }
+    if (twitter.description) {
+      const meta = getOrCreateMeta('meta[name="twitter:description"]', { name: "twitter:description" });
+      meta.content = twitter.description;
+    }
+    if (twitter.image) {
+      const meta = getOrCreateMeta('meta[name="twitter:image"]', { name: "twitter:image" });
+      meta.content = twitter.image;
+    }
+    if (twitter.imageAlt) {
+      const meta = getOrCreateMeta('meta[name="twitter:image:alt"]', { name: "twitter:image:alt" });
+      meta.content = twitter.imageAlt;
+    }
+    if (twitter.site) {
+      const meta = getOrCreateMeta('meta[name="twitter:site"]', { name: "twitter:site" });
+      meta.content = twitter.site;
+    }
+    if (twitter.creator) {
+      const meta = getOrCreateMeta('meta[name="twitter:creator"]', { name: "twitter:creator" });
+      meta.content = twitter.creator;
+    }
+  }
+  if (md.metaTags && Array.isArray(md.metaTags)) {
+    md.metaTags.forEach((tag) => {
+      let selector = "";
+      if (tag.name) {
+        selector = `meta[name="${tag.name}"]`;
+      } else if (tag.property) {
+        selector = `meta[property="${tag.property}"]`;
+      } else if (tag.httpEquiv) {
+        selector = `meta[http-equiv="${tag.httpEquiv}"]`;
+      }
+      if (selector) {
+        const meta = getOrCreateMeta(selector, {
+          name: tag.name,
+          property: tag.property,
+          httpEquiv: tag.httpEquiv
+        });
+        meta.content = tag.content;
+      }
+    });
+  }
+  if (md.links && Array.isArray(md.links)) {
+    md.links.forEach((link) => {
+      getOrCreateLink(link.rel, link.href);
+    });
+  }
 }
 
 // modules/runtime/client/AppShell.tsx
@@ -195,14 +366,16 @@ function deleteCacheEntry(key) {
 function buildDataUrl(url) {
   return url + (url.includes("?") ? "&" : "?") + "__fw_data=1";
 }
-async function fetchRouteDataOnce(url) {
+async function fetchRouteDataOnce(url, skipLayoutHooks = true) {
   const dataUrl = buildDataUrl(url);
-  const res = await fetch(dataUrl, {
-    headers: {
-      "x-fw-data": "1",
-      Accept: "application/json"
-    }
-  });
+  const headers = {
+    "x-fw-data": "1",
+    Accept: "application/json"
+  };
+  if (skipLayoutHooks) {
+    headers["x-skip-layout-hooks"] = "true";
+  }
+  const res = await fetch(dataUrl, { headers });
   let json = {};
   try {
     const text = await res.text();
@@ -228,7 +401,7 @@ async function getRouteData(url, options) {
     deleteCacheEntry(key);
   }
   const entry = dataCache.get(key);
-  if (entry) {
+  if (entry && !options?.revalidate) {
     if (entry.status === "fulfilled") {
       updateLRU(key);
       return entry.value;
@@ -237,12 +410,29 @@ async function getRouteData(url, options) {
       return entry.promise;
     }
   }
-  const promise = fetchRouteDataOnce(url).then((value) => {
-    setCacheEntry(key, { status: "fulfilled", value });
+  const skipLayoutHooks = !options?.revalidate;
+  const currentEntry = dataCache.get(key);
+  if (currentEntry && !options?.revalidate) {
+    if (currentEntry.status === "fulfilled") {
+      updateLRU(key);
+      return currentEntry.value;
+    }
+    if (currentEntry.status === "pending") {
+      return currentEntry.promise;
+    }
+  }
+  const promise = fetchRouteDataOnce(url, skipLayoutHooks).then((value) => {
+    const entryAfterFetch = dataCache.get(key);
+    if (!entryAfterFetch || entryAfterFetch.status === "pending") {
+      setCacheEntry(key, { status: "fulfilled", value });
+    }
     return value;
   }).catch((error) => {
     console.error("[client][cache] Error fetching route data:", error);
-    dataCache.set(key, { status: "rejected", error });
+    const entryAfterFetch = dataCache.get(key);
+    if (!entryAfterFetch || entryAfterFetch.status === "pending") {
+      dataCache.set(key, { status: "rejected", error });
+    }
     throw error;
   });
   dataCache.set(key, { status: "pending", promise });
@@ -267,10 +457,22 @@ async function handleErrorRoute(nextUrl, json, errorRoute, setState) {
     } else if (json.theme) {
       theme = json.theme;
     }
+    let layoutProps = {};
+    if (json.layoutProps !== void 0 && json.layoutProps !== null) {
+      layoutProps = json.layoutProps;
+      setPreservedLayoutProps(layoutProps);
+    } else {
+      const preserved = getPreservedLayoutProps();
+      if (preserved) {
+        layoutProps = preserved;
+      }
+    }
+    const pageProps = json.pageProps ?? json.props ?? {
+      error: json.message || "An error occurred"
+    };
     const errorProps = {
-      ...json.props || {
-        error: json.message || "An error occurred"
-      },
+      ...layoutProps,
+      ...pageProps,
       theme
     };
     const windowData = {
@@ -283,6 +485,13 @@ async function handleErrorRoute(nextUrl, json, errorRoute, setState) {
       error: true
     };
     setWindowData(windowData);
+    const url = new URL(nextUrl, typeof window !== "undefined" ? window.location.origin : "http://localhost");
+    const routerData = {
+      pathname: url.pathname,
+      params: json.params || {},
+      searchParams: Object.fromEntries(url.searchParams.entries())
+    };
+    setRouterData(routerData);
     setState({
       url: nextUrl,
       route: errorRoute,
@@ -292,10 +501,15 @@ async function handleErrorRoute(nextUrl, json, errorRoute, setState) {
     });
     return true;
   } catch (loadError) {
-    console.error(
-      "[client] Error loading error route components:",
-      loadError
-    );
+    console.error("\n\u274C [client] Error loading error route components:");
+    console.error(loadError);
+    if (loadError instanceof Error) {
+      console.error(`   Message: ${loadError.message}`);
+      if (loadError.stack) {
+        console.error(`   Stack: ${loadError.stack.split("\n").slice(0, 3).join("\n   ")}`);
+      }
+    }
+    console.error("\u{1F4A1} Falling back to full page reload\n");
     window.location.href = nextUrl;
     return false;
   }
@@ -315,8 +529,20 @@ async function handleNotFoundRoute(nextUrl, json, notFoundRoute, setState) {
   } else if (json.theme) {
     theme = json.theme;
   }
+  let layoutProps = {};
+  if (json.layoutProps !== void 0 && json.layoutProps !== null) {
+    layoutProps = json.layoutProps;
+    setPreservedLayoutProps(layoutProps);
+  } else {
+    const preserved = getPreservedLayoutProps();
+    if (preserved) {
+      layoutProps = preserved;
+    }
+  }
+  const pageProps = json.pageProps ?? json.props ?? {};
   const notFoundProps = {
-    ...json.props ?? {},
+    ...layoutProps,
+    ...pageProps,
     theme
   };
   const windowData = {
@@ -329,6 +555,13 @@ async function handleNotFoundRoute(nextUrl, json, notFoundRoute, setState) {
     error: false
   };
   setWindowData(windowData);
+  const url = new URL(nextUrl, typeof window !== "undefined" ? window.location.origin : "http://localhost");
+  const routerData = {
+    pathname: url.pathname,
+    params: {},
+    searchParams: Object.fromEntries(url.searchParams.entries())
+  };
+  setRouterData(routerData);
   if (notFoundRoute) {
     const components = await notFoundRoute.load();
     setState({
@@ -366,27 +599,59 @@ async function handleNormalRoute(nextUrl, json, routes, setState) {
   } else if (json.theme) {
     theme = json.theme;
   }
-  const newProps = {
-    ...json.props ?? {},
+  let layoutProps = {};
+  if (json.layoutProps !== void 0 && json.layoutProps !== null) {
+    layoutProps = json.layoutProps;
+    setPreservedLayoutProps(layoutProps);
+  } else {
+    const preserved = getPreservedLayoutProps();
+    if (preserved) {
+      layoutProps = preserved;
+    }
+  }
+  const pageProps = json.pageProps ?? json.props ?? {};
+  const combinedProps = {
+    ...layoutProps,
+    ...pageProps,
     theme
     // Always include theme
   };
-  const matched = matchRouteClient(nextUrl, routes);
+  const pathnameForMatch = json.pathname || nextUrl;
+  let matched = matchRouteClient(pathnameForMatch, routes);
   if (!matched) {
+    matched = matchRouteClient(nextUrl, routes);
+  }
+  if (!matched) {
+    console.warn(
+      `[client] Server returned data for ${nextUrl} but no route match found. Available routes:`,
+      routes.map((r) => r.pattern)
+    );
     window.location.href = nextUrl;
     return false;
   }
+  const finalPathname = json.pathname || nextUrl;
   const windowData = {
-    pathname: nextUrl,
+    pathname: finalPathname,
     params: matched.params,
-    props: newProps,
+    props: combinedProps,
     metadata: json.metadata ?? null,
     theme,
     notFound: false,
     error: false
   };
   setWindowData(windowData);
-  const components = await matched.route.load();
+  const url = new URL(nextUrl, typeof window !== "undefined" ? window.location.origin : "http://localhost");
+  const routerData = {
+    pathname: url.pathname,
+    params: matched.params,
+    searchParams: Object.fromEntries(url.searchParams.entries())
+  };
+  setRouterData(routerData);
+  const prefetched = prefetchedRoutes.get(matched.route);
+  const components = prefetched ? await prefetched : await matched.route.load();
+  if (!prefetched) {
+    prefetchedRoutes.set(matched.route, Promise.resolve(components));
+  }
   window.scrollTo({
     top: 0,
     behavior: "smooth"
@@ -396,7 +661,7 @@ async function handleNormalRoute(nextUrl, json, routes, setState) {
     route: matched.route,
     params: matched.params,
     components,
-    props: newProps
+    props: combinedProps
   });
   return true;
 }
@@ -425,7 +690,7 @@ async function navigate(nextUrl, handlers, options) {
       }
     }
     if (!ok) {
-      if (json && json.redirect) {
+      if (json?.redirect) {
         window.location.href = json.redirect.destination;
         return;
       }
@@ -446,6 +711,47 @@ async function navigate(nextUrl, handlers, options) {
     window.location.href = nextUrl;
   }
 }
+var prefetchedRoutes = /* @__PURE__ */ new WeakMap();
+function prefetchRoute(url, routes, notFoundRoute) {
+  const [pathname] = url.split("?");
+  const matched = matchRouteClient(pathname, routes);
+  if (!matched) {
+    if (notFoundRoute) {
+      const existing2 = prefetchedRoutes.get(notFoundRoute);
+      if (!existing2) {
+        const promise = notFoundRoute.load();
+        prefetchedRoutes.set(notFoundRoute, promise);
+      }
+    }
+    return;
+  }
+  const existing = prefetchedRoutes.get(matched.route);
+  if (!existing) {
+    const promise = matched.route.load();
+    prefetchedRoutes.set(matched.route, promise);
+  }
+}
+function createHoverHandler(routes, notFoundRoute) {
+  return function handleHover(ev) {
+    try {
+      const target = ev.target;
+      if (!target) return;
+      const anchor = target.closest("a[href]");
+      if (!anchor) return;
+      const href = anchor.getAttribute("href");
+      if (!href) return;
+      if (href.startsWith("#")) return;
+      const url = new URL(href, window.location.href);
+      if (url.origin !== window.location.origin) return;
+      if (anchor.target && anchor.target !== "_self") return;
+      const nextUrl = url.pathname + url.search;
+      const currentUrl = window.location.pathname + window.location.search;
+      if (nextUrl === currentUrl) return;
+      prefetchRoute(nextUrl, routes, notFoundRoute);
+    } catch (error) {
+    }
+  };
+}
 function createClickHandler(navigate2) {
   return function handleClick(ev) {
     try {
@@ -540,6 +846,14 @@ function AppShell({
     },
     []
   );
+  useEffect(() => {
+    if (typeof window !== "undefined") {
+      window[ROUTER_NAVIGATE_KEY] = handleNavigate;
+      return () => {
+        delete window[ROUTER_NAVIGATE_KEY];
+      };
+    }
+  }, [handleNavigate]);
   useEffect(() => {
     let isMounted = true;
     async function handleNavigateInternal(nextUrl, options) {
@@ -548,12 +862,37 @@ function AppShell({
     }
     const handleClick = createClickHandler(handleNavigateInternal);
     const handlePopState = createPopStateHandler(handleNavigateInternal);
+    const handleHover = createHoverHandler(routes, notFoundRoute);
     window.addEventListener("click", handleClick, false);
     window.addEventListener("popstate", handlePopState, false);
+    window.addEventListener("mouseover", handleHover, false);
     return () => {
       isMounted = false;
       window.removeEventListener("click", handleClick, false);
       window.removeEventListener("popstate", handlePopState, false);
+      window.removeEventListener("mouseover", handleHover, false);
+    };
+  }, [routes, notFoundRoute]);
+  useEffect(() => {
+    const handleDataRefresh = () => {
+      const freshData = window[WINDOW_DATA_KEY];
+      if (!freshData) return;
+      const currentPathname = window.location.pathname;
+      const freshPathname = freshData.pathname;
+      if (freshPathname === currentPathname) {
+        if (freshData.metadata !== void 0) {
+          applyMetadata(freshData.metadata);
+        }
+        setState((prevState) => ({
+          ...prevState,
+          props: freshData.props ?? prevState.props,
+          params: freshData.params ?? prevState.params
+        }));
+      }
+    };
+    window.addEventListener("fw-data-refresh", handleDataRefresh);
+    return () => {
+      window.removeEventListener("fw-data-refresh", handleDataRefresh);
     };
   }, []);
   const isError = state.route === errorRoute;
@@ -563,6 +902,89 @@ function AppShell({
   return /* @__PURE__ */ jsx2(RouterContext.Provider, { value: { navigate: handleNavigate }, children: /* @__PURE__ */ jsx2(RouterView, { state }, routeKey) });
 }
 
+// modules/runtime/client/hot-reload.ts
+function setupHotReload() {
+  const nodeEnv = process.env.NODE_ENV || "production";
+  const isDev = nodeEnv === "development";
+  if (!isDev) {
+    return;
+  }
+  console.log("[hot-reload] Setting up hot reload client...");
+  let eventSource = null;
+  let reloadTimeout = null;
+  let reconnectTimeout = null;
+  let reconnectAttempts = 0;
+  const MAX_RECONNECT_ATTEMPTS = 10;
+  const RECONNECT_DELAY = 1e3;
+  const RELOAD_DELAY = 100;
+  function connect() {
+    try {
+      if (eventSource) {
+        console.log("[hot-reload] Closing existing EventSource connection");
+        eventSource.close();
+      }
+      const endpoint = "/__fw/hot";
+      eventSource = new EventSource(endpoint);
+      eventSource.addEventListener("ping", (event) => {
+        if ("data" in event) {
+          console.log("[hot-reload] \u2705 Connected to hot reload server");
+        }
+        reconnectAttempts = 0;
+      });
+      eventSource.addEventListener("message", (event) => {
+        const data = event.data;
+        if (data && typeof data === "string" && data.startsWith("reload:")) {
+          const filePath = data.slice(7);
+          console.log(`[hot-reload] \u{1F4DD} File changed: ${filePath}, reloading...`);
+          if (reloadTimeout) {
+            clearTimeout(reloadTimeout);
+          }
+          reloadTimeout = setTimeout(() => {
+            try {
+              window.location.reload();
+            } catch (error) {
+              console.error("[hot-reload] \u274C Error reloading page:", error);
+              setTimeout(() => window.location.reload(), 100);
+            }
+          }, RELOAD_DELAY);
+        }
+      });
+      eventSource.onopen = () => {
+        reconnectAttempts = 0;
+      };
+      eventSource.onerror = (error) => {
+        const states = ["CONNECTING", "OPEN", "CLOSED"];
+        const state = states[eventSource?.readyState ?? 0] || "UNKNOWN";
+        if (eventSource?.readyState === EventSource.CONNECTING) {
+          console.log("[hot-reload] \u23F3 Still connecting...");
+          return;
+        } else if (eventSource?.readyState === EventSource.OPEN) {
+          console.warn("[hot-reload] \u26A0\uFE0F Connection error (but connection is open):", error);
+        } else {
+          console.warn(`[hot-reload] \u274C Connection closed (readyState: ${state})`);
+          if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
+            reconnectAttempts++;
+            const delay = RECONNECT_DELAY * reconnectAttempts;
+            if (reconnectTimeout) {
+              clearTimeout(reconnectTimeout);
+            }
+            reconnectTimeout = setTimeout(() => {
+              console.log(`[hot-reload] \u{1F504} Reconnecting... (attempt ${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
+              connect();
+            }, delay);
+          } else {
+            console.error("[hot-reload] \u274C Max reconnect attempts reached. Please refresh the page manually.");
+          }
+        }
+      };
+    } catch (error) {
+      console.error("[hot-reload] \u274C Failed to create EventSource:", error);
+      console.error("[hot-reload] EventSource may not be supported in this browser.");
+    }
+  }
+  connect();
+}
+
 // modules/runtime/client/bootstrap.tsx
 import { jsx as jsx3 } from "react/jsx-runtime";
 async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute, errorRoute) {
@@ -604,91 +1026,96 @@ async function loadInitialRoute(initialUrl, initialData, routes, notFoundRoute,
     props: initialData?.props ?? {}
   };
 }
-function setupHotReload() {
-  const nodeEnv = typeof process !== "undefined" && process?.env?.NODE_ENV || "production";
-  const isDev = nodeEnv !== "production";
-  if (!isDev) {
-    return;
+function initializeRouterData(initialUrl, initialData) {
+  let routerData = getRouterData();
+  if (!routerData) {
+    const url = new URL(initialUrl, window.location.origin);
+    const pathname = initialData?.pathname || url.pathname;
+    routerData = {
+      pathname,
+      params: initialData?.params || {},
+      searchParams: Object.fromEntries(url.searchParams.entries())
+    };
+    setRouterData(routerData);
   }
+}
+async function hydrateInitialRoute(container, initialUrl, initialData, routes, notFoundRoute, errorRoute) {
   try {
-    console.log("[hot-reload] Attempting to connect to /__fw/hot...");
-    const eventSource = new EventSource("/__fw/hot");
-    let reloadTimeout = null;
-    eventSource.addEventListener("message", (event) => {
-      const data = event.data;
-      if (data && data.startsWith("reload:")) {
-        const filePath = data.slice(7);
-        console.log(`[hot-reload] File changed: ${filePath}`);
-        if (reloadTimeout) {
-          clearTimeout(reloadTimeout);
-        }
-        reloadTimeout = setTimeout(() => {
-          console.log("[hot-reload] Reloading page...");
-          window.location.reload();
-        }, 500);
-      }
-    });
-    eventSource.addEventListener("ping", () => {
-      console.log("[hot-reload] \u2713 Connected to hot reload server");
-    });
-    eventSource.onopen = () => {
-      console.log("[hot-reload] \u2713 SSE connection opened");
-    };
-    eventSource.onerror = (error) => {
-      const states = ["CONNECTING", "OPEN", "CLOSED"];
-      const state = states[eventSource.readyState] || "UNKNOWN";
-      if (eventSource.readyState === EventSource.CONNECTING) {
-        console.log("[hot-reload] Connecting...");
-      } else if (eventSource.readyState === EventSource.OPEN) {
-        console.warn("[hot-reload] Connection error (but connection is open):", error);
-      } else {
-        console.log("[hot-reload] Connection closed (readyState:", state, ")");
+    const initialState = await loadInitialRoute(
+      initialUrl,
+      initialData,
+      routes,
+      notFoundRoute,
+      errorRoute
+    );
+    if (initialData?.metadata) {
+      try {
+        applyMetadata(initialData.metadata);
+      } catch (metadataError) {
+        console.warn("[client] Error applying metadata:", metadataError);
       }
-    };
+    }
+    hydrateRoot(
+      container,
+      /* @__PURE__ */ jsx3(
+        AppShell,
+        {
+          initialState,
+          routes,
+          notFoundRoute,
+          errorRoute
+        }
+      )
+    );
   } catch (error) {
-    console.log("[hot-reload] EventSource not supported or error:", error);
+    console.error(
+      "[client] Error loading initial route components for",
+      initialUrl,
+      error
+    );
+    throw error;
   }
 }
 function bootstrapClient(routes, notFoundRoute, errorRoute = null) {
-  console.log("[client] Bootstrap starting, setting up hot reload...");
   setupHotReload();
-  (async function bootstrap() {
-    const container = document.getElementById(APP_CONTAINER_ID);
-    const initialData = getWindowData();
-    if (!container) {
-      console.error(`Container #${APP_CONTAINER_ID} not found for hydration`);
-      return;
-    }
-    const initialUrl = window.location.pathname + window.location.search;
+  (async () => {
     try {
-      const initialState = await loadInitialRoute(
+      const container = document.getElementById(APP_CONTAINER_ID);
+      if (!container) {
+        console.error(`
+\u274C [client] Hydration failed: Container #${APP_CONTAINER_ID} not found`);
+        console.error("\u{1F4A1} This usually means:");
+        console.error("  \u2022 The HTML structure doesn't match what React expects");
+        console.error("  \u2022 The container was removed before hydration");
+        console.error("  \u2022 There's a mismatch between SSR and client HTML\n");
+        return;
+      }
+      const initialData = getWindowData();
+      const initialUrl = (initialData?.pathname || window.location.pathname) + window.location.search;
+      if (initialData?.props) {
+        setPreservedLayoutProps(initialData.props);
+      }
+      const routerPathname = initialData?.pathname || window.location.pathname;
+      initializeRouterData(routerPathname + window.location.search, initialData);
+      await hydrateInitialRoute(
+        container,
         initialUrl,
         initialData,
         routes,
         notFoundRoute,
         errorRoute
       );
-      if (initialData?.metadata) {
-        applyMetadata(initialData.metadata);
-      }
-      hydrateRoot(
-        container,
-        /* @__PURE__ */ jsx3(
-          AppShell,
-          {
-            initialState,
-            routes,
-            notFoundRoute,
-            errorRoute
-          }
-        )
-      );
     } catch (error) {
-      console.error(
-        "[client] Error loading initial route components for",
-        initialUrl,
-        error
-      );
+      console.error("\n\u274C [client] Fatal error during bootstrap:");
+      console.error(error);
+      if (error instanceof Error) {
+        console.error("\nError details:");
+        console.error(`  Message: ${error.message}`);
+        if (error.stack) {
+          console.error(`  Stack: ${error.stack}`);
+        }
+      }
+      console.error("\n\u{1F4A1} Attempting page reload to recover...\n");
       window.location.reload();
     }
   })();