routerino 2.3.4-rc9 → 2.4.0

package/README.md

@@ -91,6 +91,7 @@ This simple configuration automatically handles routing, meta tags, and SEO opti
 - Enhanced User Experience
   - Support for sharing and social preview metadata
   - Snappy page transitions with automatic scroll reset, eliminating the jarring experience of landing mid-page when navigating
+  - Hash link support: SPA navigation to `/page#section` correctly scrolls to the target element, mimicking native browser behavior
 
 ## Installation
 
@@ -812,6 +813,20 @@ This creates an engaging Twitter preview with a large image, title, and descript
 
 By following these practices, you'll improve your site's SEO performance and social media presence when using Routerino.
 
+### Hash Links
+
+Routerino supports standard `<a href="/page#section">` links for SPA navigation — after React renders the new page, it finds the element with the matching `id` and scrolls it into view.
+
+**Sticky headers**: If your site has a fixed header, use the CSS [`scroll-margin-top`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin-top) property to offset the scroll target so content isn't hidden behind the header:
+
+```css
+[id] {
+  scroll-margin-top: 80px; /* match your header height */
+}
+```
+
+This works for SPA navigation, native browser hash navigation, and direct page loads — no extra props or router changes needed.
+
 ## Sitemap and robots.txt Generation
 
 When using Routerino Forge for static site generation, `sitemap.xml` and `robots.txt` files are automatically generated during the build process:

package/dist/routerino.js

@@ -1,12 +1,12 @@
-import { jsx as g, jsxs as q, Fragment as V } from "react/jsx-runtime";
-import { useState as M, useEffect as z, useMemo as J, createContext as N, Component as Q, useContext as X } from "react";
+import { jsx as g, jsxs as B, Fragment as G } from "react/jsx-runtime";
+import { useState as z, useEffect as _, useMemo as J, createContext as N, Component as Q, useContext as X } from "react";
 import o from "prop-types";
 const Y = [480, 800, 1200, 1920], ee = "(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px", H = /* @__PURE__ */ new Map();
 function te(i, e = "") {
   const r = i.toLowerCase(), n = e.toLowerCase();
   return !!(r.includes("hero") || r.includes("banner") || n.includes("hero") || n.includes("banner") || n.includes("h-screen") || n.includes("h-full"));
 }
-function I(i, e, r = null) {
+function q(i, e, r = null) {
   const n = i.replace(/\.(jpe?g|png|webp)$/i, ""), u = r ? `.${r}` : i.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
   return e.map((a) => `${n}-${a}w${u} ${a}w`).join(", ");
 }
@@ -17,53 +17,53 @@ function oe(i) {
     priority: n,
     widths: u = Y,
     sizes: a = ee,
-    className: w = "",
+    className: m = "",
     style: O = {},
-    width: S,
-    height: E,
-    loading: j,
+    width: E,
+    height: S,
+    loading: I,
     decoding: L = "async",
-    fetchpriority: h,
-    ...x
-  } = i || {}, U = typeof window > "u", b = !U && typeof document < "u" && typeof HTMLElement < "u" && document.createElement("div") instanceof HTMLElement, R = b && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"), c = n ?? te(e, w), T = j || (c ? "eager" : "lazy"), k = h || (c ? "high" : void 0), [y, s] = M(null);
-  z(() => {
+    fetchpriority: f,
+    ...T
+  } = i || {}, W = typeof window > "u", b = !W && typeof document < "u" && typeof HTMLElement < "u" && document.createElement("div") instanceof HTMLElement, R = b && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"), c = n ?? te(e, m), k = I || (c ? "eager" : "lazy"), P = f || (c ? "high" : void 0), [y, s] = z(null);
+  _(() => {
     if (!b || R || !e) return;
-    const d = new window.Image();
-    d.onload = () => {
+    const h = new window.Image();
+    h.onload = () => {
       s({
-        width: d.naturalWidth,
-        height: d.naturalHeight
+        width: h.naturalWidth,
+        height: h.naturalHeight
       });
-    }, d.src = e;
+    }, h.src = e;
   }, [e, b, R]);
-  const v = J(() => y ? u.filter((d) => y.width >= d) : u, [y, u]), [A, B] = M(null);
-  z(() => {
+  const v = J(() => y ? u.filter((h) => y.width >= h) : u, [y, u]), [j, F] = z(null);
+  _(() => {
     if (!b || R) return;
-    let d = !1;
+    let h = !1;
     return (async () => {
-      const W = e.replace(/\.(jpe?g|png|webp)$/i, ""), Z = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", D = [];
-      for (const F of v) {
-        const C = `${W}-${F}w${Z}`;
+      const x = e.replace(/\.(jpe?g|png|webp)$/i, ""), A = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", D = [];
+      for (const M of v) {
+        const C = `${x}-${M}w${A}`;
         if (H.has(C)) {
-          H.get(C) && D.push(F);
+          H.get(C) && D.push(M);
           continue;
         }
         try {
-          const _ = await fetch(C, { method: "HEAD" });
-          H.set(C, _.ok), _.ok && D.push(F);
+          const V = await fetch(C, { method: "HEAD" });
+          H.set(C, V.ok), V.ok && D.push(M);
         } catch {
           H.set(C, !1);
         }
       }
-      d || B(
+      h || F(
         D.length > 0 ? D : v
       );
     })(), () => {
-      d = !0;
+      h = !0;
     };
   }, [e, v, b, R]);
-  const P = A ?? v, t = {};
-  S != null && (t.width = S), E != null && (t.height = E), y && S == null && E == null && (t.width = y.width, t.height = y.height);
+  const U = j ?? v, t = {};
+  E != null && (t.width = E), S != null && (t.height = S), y && E == null && S == null && (t.width = y.width, t.height = y.height);
   const l = {
     maxWidth: "100%",
     height: "auto",
@@ -75,21 +75,21 @@ function oe(i) {
       {
         src: e,
         alt: r,
-        loading: T,
+        loading: k,
         decoding: L,
-        fetchPriority: k,
-        className: w,
+        fetchPriority: P,
+        className: m,
         style: l,
         ...t,
-        ...x
+        ...T
       }
     );
-  if (U)
-    return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+  if (W)
+    return /* @__PURE__ */ B("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
       /* @__PURE__ */ g(
         "source",
         {
-          srcSet: I(e, u, "webp"),
+          srcSet: q(e, u, "webp"),
           type: "image/webp",
           sizes: a
         }
@@ -99,35 +99,35 @@ function oe(i) {
         {
           src: e,
           alt: r,
-          srcSet: I(e, u),
+          srcSet: q(e, u),
           sizes: a,
-          loading: T,
+          loading: k,
           decoding: "async",
-          fetchPriority: k,
-          className: w,
+          fetchPriority: P,
+          className: m,
           style: l,
           ...t,
-          ...x
+          ...T
         }
       )
     ] });
-  const m = I(e, P, "webp"), f = I(e, P);
-  return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
-    /* @__PURE__ */ g("source", { srcSet: m, type: "image/webp", sizes: a }),
+  const w = q(e, U, "webp"), d = q(e, U);
+  return /* @__PURE__ */ B("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+    /* @__PURE__ */ g("source", { srcSet: w, type: "image/webp", sizes: a }),
     /* @__PURE__ */ g(
       "img",
       {
         src: e,
         alt: r,
-        srcSet: f,
+        srcSet: d,
         sizes: a,
-        loading: T,
+        loading: k,
         decoding: L,
-        fetchPriority: k,
-        className: w,
+        fetchPriority: P,
+        className: m,
         style: l,
         ...t,
-        ...x
+        ...T
       }
     )
   ] });
@@ -158,9 +158,9 @@ oe.propTypes = {
   /** Fetch priority (auto-set based on priority) */
   fetchpriority: o.oneOf(["high", "low", "auto"])
 };
-const G = N(null);
+const K = N(null);
 function le() {
-  const i = X(G);
+  const i = X(K);
   if (!i)
     throw new Error(
       "useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component."
@@ -182,11 +182,11 @@ function p({ tag: i = "meta", soft: e = !1, ...r }) {
 }
 function ne({ routePattern: i, currentRoute: e }) {
   let r = {}, n = i.split("/"), u = e.split("/");
-  return n.forEach((a, w) => {
-    a.startsWith(":") && (r[a.slice(1)] = u[w]);
+  return n.forEach((a, m) => {
+    a.startsWith(":") && (r[a.slice(1)] = u[m]);
   }), r;
 }
-class K extends Q {
+class Z extends Q {
   constructor(e) {
     super(e), this.state = { hasError: !1 };
   }
@@ -205,7 +205,7 @@ class K extends Q {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-K.propTypes = {
+Z.propTypes = {
   /** The child components to render when there's no error */
   children: o.node,
   /** The fallback UI to display when an error is caught */
@@ -229,30 +229,30 @@ function re({
       tags: [{ property: "og:locale", content: "en_US" }]
     }
   ],
-  notFoundTemplate: e = /* @__PURE__ */ q(V, { children: [
+  notFoundTemplate: e = /* @__PURE__ */ B(G, { children: [
     /* @__PURE__ */ g("p", { children: "No page found for this URL. [404]" }),
     /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
   ] }),
   notFoundTitle: r = "Page not found [404]",
-  errorTemplate: n = /* @__PURE__ */ q(V, { children: [
+  errorTemplate: n = /* @__PURE__ */ B(G, { children: [
     /* @__PURE__ */ g("p", { children: "Page failed to load. [500]" }),
     /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
   ] }),
   errorTitle: u = "Page error [500]",
   useTrailingSlash: a = !0,
-  usePrerenderTags: w = !1,
+  usePrerenderTags: m = !1,
   baseUrl: O = null,
-  title: S = "",
-  separator: E = " | ",
-  imageUrl: j = null,
+  title: E = "",
+  separator: S = " | ",
+  imageUrl: I = null,
   touchIconUrl: L = null,
-  debug: h = !1
+  debug: f = !1
 }) {
-  const x = `${u}${E}${S}`, U = `${r}${E}${S}`;
+  const T = `${u}${S}${E}`, W = `${r}${S}${E}`;
   try {
-    if (h) {
-      const t = i.map((m) => m.path), l = t.filter(
-        (m, f) => t.indexOf(m) !== f
+    if (f) {
+      const t = i.map((w) => w.path), l = t.filter(
+        (w, d) => t.indexOf(w) !== d
       );
       l.length > 0 && (console.warn(
         "%c[Routerino]%c Duplicate route paths detected:",
@@ -265,79 +265,88 @@ function re({
         ""
       ));
     }
-    const [b, R] = M(window?.location?.href ?? "/");
-    z(() => {
+    const [b, R] = z(window?.location?.href ?? "/");
+    _(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
-      const t = (m) => {
-        h && console.debug(
+      const t = (w) => {
+        f && console.debug(
           "%c[Routerino]%c click occurred",
           "color: #6b7280; font-weight: bold",
           ""
         );
-        let f = m.target;
-        for (; f.tagName !== "A" && f.parentElement; )
-          f = f.parentElement;
-        if (f.tagName !== "A") {
-          h && console.debug(
+        let d = w.target;
+        for (; d.tagName !== "A" && d.parentElement; )
+          d = d.parentElement;
+        if (d.tagName !== "A") {
+          f && console.debug(
             "%c[Routerino]%c no anchor tag found during click",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        const d = f.getAttribute("href") || f.href;
-        if (!d) {
-          h && console.debug(
+        const h = d.getAttribute("href") || d.href;
+        if (!h) {
+          f && console.debug(
             "%c[Routerino]%c anchor tag has no href",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(d)) {
-          h && console.debug(
+        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(h)) {
+          f && console.debug(
             "%c[Routerino]%c skipping non-http URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            d
+            h
           );
           return;
         }
-        h && console.debug(
+        f && console.debug(
           "%c[Routerino]%c click target href:",
           "color: #6b7280; font-weight: bold",
           "",
-          d
+          h
         );
         let $;
         try {
-          $ = new URL(d, window.location.href);
-        } catch (W) {
-          h && console.debug(
+          $ = new URL(h, window.location.href);
+        } catch (x) {
+          f && console.debug(
             "%c[Routerino]%c Invalid URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            d,
-            W
+            h,
+            x
           );
           return;
         }
-        h && console.debug(
+        if (f && console.debug(
           "%c[Routerino]%c targetUrl:",
           "color: #6b7280; font-weight: bold",
           "",
           $,
           "current:",
           window.location
-        ), $ && window.location.origin === $.origin ? (h && console.debug(
-          "%c[Routerino]%c target link is same origin, will use push-state transitioning",
-          "color: #6b7280; font-weight: bold",
-          ""
-        ), m.preventDefault(), f.href !== window.location.href && (R(f.href), window.history.pushState({}, "", f.href)), f.hash || window.scrollTo({
-          top: 0,
-          behavior: "auto"
-        })) : h && console.debug(
+        ), $ && window.location.origin === $.origin)
+          if (f && console.debug(
+            "%c[Routerino]%c target link is same origin, will use push-state transitioning",
+            "color: #6b7280; font-weight: bold",
+            ""
+          ), w.preventDefault(), d.href !== window.location.href && (R(d.href), window.history.pushState({}, "", d.href)), d.hash) {
+            const x = decodeURIComponent(d.hash.slice(1));
+            setTimeout(() => {
+              const A = document.getElementById(x);
+              A ? A.scrollIntoView({ behavior: "auto" }) : window.scrollTo({ top: 0, behavior: "auto" });
+            }, 0);
+          } else
+            window.scrollTo({
+              top: 0,
+              behavior: "auto"
+            });
+        else f && console.debug(
           "%c[Routerino]%c target link does not share an origin, standard browser link handling applies",
           "color: #6b7280; font-weight: bold",
           ""
@@ -345,7 +354,7 @@ function re({
       };
       document.addEventListener("click", t);
       const l = () => {
-        h && console.debug(
+        f && console.debug(
           "%c[Routerino]%c route change ->",
           "color: #6b7280; font-weight: bold",
           "",
@@ -358,19 +367,19 @@ function re({
     }, [b]);
     let c = window?.location?.pathname ?? "/";
     (c === "/index.html" || c === "") && (c = "/");
-    const T = i.find((t) => t.path === c), k = i.find(
+    const k = i.find((t) => t.path === c), P = i.find(
       (t) => `${t.path}/` === c || t.path === `${c}/`
     ), y = i.find((t) => {
-      const l = t.path.endsWith("/") ? t.path.slice(0, -1) : t.path, m = c.endsWith("/") ? c.slice(0, -1) : c, f = l.split("/").filter(Boolean), d = m.split("/").filter(Boolean);
-      return f.length !== d.length ? !1 : f.every(($, W) => $.startsWith(":") ? !0 : $ === d[W]);
-    }), s = T ?? k ?? y;
-    if (h && console.debug(
+      const l = t.path.endsWith("/") ? t.path.slice(0, -1) : t.path, w = c.endsWith("/") ? c.slice(0, -1) : c, d = l.split("/").filter(Boolean), h = w.split("/").filter(Boolean);
+      return d.length !== h.length ? !1 : d.every(($, x) => $.startsWith(":") ? !0 : $ === h[x]);
+    }), s = k ?? P ?? y;
+    if (f && console.debug(
       "%c[Routerino]%c Route matching:",
       "color: #6b7280; font-weight: bold",
       "",
-      { match: s, exactMatch: T, addSlashMatch: k, paramsMatch: y }
+      { match: s, exactMatch: k, addSlashMatch: P, paramsMatch: y }
     ), !s)
-      return h && (console.group(
+      return f && (console.group(
         "%c[Routerino]%c 404 - No matching route",
         "color: #f59e0b; font-weight: bold",
         ""
@@ -384,8 +393,8 @@ function re({
         "color: #f59e0b; font-weight: bold",
         "",
         i.map((t) => t.path)
-      ), console.groupEnd()), document.title = U, w && p({ name: "prerender-status-code", content: "404" }), e;
-    if (w) {
+      ), console.groupEnd()), document.title = W, m && p({ name: "prerender-status-code", content: "404" }), e;
+    if (m) {
       const t = document.querySelector(
         'meta[name="prerender-status-code"]'
       );
@@ -395,27 +404,27 @@ function re({
       );
       l && l.remove();
     }
-    const v = a && !c.endsWith("/") && c !== "/", A = !a && c.endsWith("/") && c !== "/", B = v ? `${c}/` : A ? c.slice(0, -1) : c, P = `${O ?? window?.location?.origin ?? ""}${B}`;
+    const v = a && !c.endsWith("/") && c !== "/", j = !a && c.endsWith("/") && c !== "/", F = v ? `${c}/` : j ? c.slice(0, -1) : c, U = `${O ?? window?.location?.origin ?? ""}${F}`;
     if (s.title) {
-      const t = `${s.title}${E}${S}`;
+      const t = `${s.title}${S}${E}`;
       document.title = t, p({
         tag: "link",
         rel: "canonical",
-        href: P
+        href: U
       }), s.tags?.find(({ property: l }) => l === "og:title") || p({
         property: "og:title",
         content: t
       }), s.tags?.find(({ property: l }) => l === "og:url") || p({
         property: "og:url",
-        content: P
+        content: U
       });
     }
     if (s.description && (p({ name: "description", content: s.description }), s.tags?.find(({ property: t }) => t === "og:description") || p({
       property: "og:description",
       content: s.description
-    })), (j || s.imageUrl) && p({
+    })), (I || s.imageUrl) && p({
       property: "og:image",
-      content: s.imageUrl ?? j
+      content: s.imageUrl ?? I
     }), s.tags?.find(({ property: t }) => t === "twitter:card") || p({
       name: "twitter:card",
       content: "summary_large_image"
@@ -423,9 +432,9 @@ function re({
       tag: "link",
       rel: "apple-touch-icon",
       href: L
-    }), w && (v || A) && (p({ name: "prerender-status-code", content: "301" }), p({
+    }), m && (v || j) && (p({ name: "prerender-status-code", content: "301" }), p({
       name: "prerender-header",
-      content: `Location: ${P}`
+      content: `Location: ${U}`
     })), s.tags && s.tags.length ? (s.tags.find(({ property: t }) => t === "og:type") || p({ property: "og:type", content: "website" }), s.tags.forEach((t) => p(t))) : p({ property: "og:type", content: "website" }), s.element) {
       const t = ne({
         routePattern: s.path,
@@ -436,26 +445,26 @@ function re({
         routePattern: s.path,
         updateHeadTag: p
       };
-      return /* @__PURE__ */ g(G.Provider, { value: l, children: /* @__PURE__ */ g(
-        K,
+      return /* @__PURE__ */ g(K.Provider, { value: l, children: /* @__PURE__ */ g(
+        Z,
         {
           fallback: n,
-          errorTitleString: x,
-          usePrerenderTags: w,
+          errorTitleString: T,
+          usePrerenderTags: m,
           routePath: c,
-          debug: h,
+          debug: f,
           children: s.element
         }
       ) });
     }
-    return h && console.error(
+    return f && console.error(
       "%c[Routerino]%c No route found for",
       "color: #ff6b6b; font-weight: bold",
       "",
       c
-    ), document.title = U, w && p({ name: "prerender-status-code", content: "404" }), e;
+    ), document.title = W, m && p({ name: "prerender-status-code", content: "404" }), e;
   } catch (b) {
-    return h && (console.group(
+    return f && (console.group(
       "%c[Routerino]%c Fatal Error",
       "color: #ff6b6b; font-weight: bold",
       ""
@@ -472,7 +481,7 @@ function re({
       "%c[Routerino]%c This typically means an issue with route configuration or router setup",
       "color: #ff6b6b; font-weight: bold",
       ""
-    ), console.groupEnd()), w && p({ name: "prerender-status-code", content: "500" }), document.title = x, n;
+    ), console.groupEnd()), m && p({ name: "prerender-status-code", content: "500" }), document.title = T, n;
   }
 }
 const ie = o.exact({
@@ -521,7 +530,7 @@ re.propTypes = {
   debug: o.bool
 };
 export {
-  K as ErrorBoundary,
+  Z as ErrorBoundary,
   oe as Image,
   re as Routerino,
   re as default,

package/dist/routerino.umd.cjs

@@ -1 +1 @@
-(function(w,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],c):(w=typeof globalThis<"u"?globalThis:w||self,c(w.routerino={},w["react/jsx-runtime"],w.React,w.PropTypes))})(this,(function(w,c,b,o){"use strict";const N=[480,800,1200,1920],Q="(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px",D=new Map;function X(i,e=""){const r=i.toLowerCase(),n=e.toLowerCase();return!!(r.includes("hero")||r.includes("banner")||n.includes("hero")||n.includes("banner")||n.includes("h-screen")||n.includes("h-full"))}function I(i,e,r=null){const n=i.replace(/\.(jpe?g|png|webp)$/i,""),f=r?`.${r}`:i.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg";return e.map(s=>`${n}-${s}w${f} ${s}w`).join(", ")}function K(i){const{src:e="",alt:r="",priority:n,widths:f=N,sizes:s=Q,className:m="",style:z={},width:R,height:x,loading:O,decoding:q="async",fetchpriority:g,...L}=i||{},C=typeof window>"u",S=!C&&typeof document<"u"&&typeof HTMLElement<"u"&&document.createElement("div")instanceof HTMLElement,y=S&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),a=n??X(e,m),U=O||(a?"eager":"lazy"),W=g||(a?"high":void 0),[E,l]=b.useState(null);b.useEffect(()=>{if(!S||y||!e)return;const h=new window.Image;h.onload=()=>{l({width:h.naturalWidth,height:h.naturalHeight})},h.src=e},[e,S,y]);const k=b.useMemo(()=>E?f.filter(h=>E.width>=h):f,[E,f]),[B,V]=b.useState(null);b.useEffect(()=>{if(!S||y)return;let h=!1;return(async()=>{const H=e.replace(/\.(jpe?g|png|webp)$/i,""),ee=e.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg",F=[];for(const G of k){const A=`${H}-${G}w${ee}`;if(D.has(A)){D.get(A)&&F.push(G);continue}try{const J=await fetch(A,{method:"HEAD"});D.set(A,J.ok),J.ok&&F.push(G)}catch{D.set(A,!1)}}h||V(F.length>0?F:k)})(),()=>{h=!0}},[e,k,S,y]);const j=B??k,t={};R!=null&&(t.width=R),x!=null&&(t.height=x),E&&R==null&&x==null&&(t.width=E.width,t.height=E.height);const u={maxWidth:"100%",height:"auto",...z};if(y)return c.jsx("img",{src:e,alt:r,loading:U,decoding:q,fetchPriority:W,className:m,style:u,...t,...L});if(C)return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:I(e,f,"webp"),type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:I(e,f),sizes:s,loading:U,decoding:"async",fetchPriority:W,className:m,style:u,...t,...L})]});const $=I(e,j,"webp"),p=I(e,j);return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:$,type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:p,sizes:s,loading:U,decoding:q,fetchPriority:W,className:m,style:u,...t,...L})]})}K.propTypes={src:o.string.isRequired,alt:o.string.isRequired,priority:o.bool,widths:o.arrayOf(o.number),sizes:o.string,className:o.string,style:o.object,width:o.number,height:o.number,loading:o.oneOf(["lazy","eager"]),decoding:o.oneOf(["sync","async","auto"]),fetchpriority:o.oneOf(["high","low","auto"])};const Z=b.createContext(null);function Y(){const i=b.useContext(Z);if(!i)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return i}function d({tag:i="meta",soft:e=!1,...r}){const n=Object.keys(r);if(n.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${i} tag`);let f=null;for(let s=0;s<n.length&&(n[s]!=="content"&&(f=document.querySelector(`${i}[${n[s]}='${r[n[s]]}']`)),!f);s++);f&&e||(f||(f=document.createElement(i)),n.forEach(s=>f.setAttribute(s,r[s])),document.querySelector("head").appendChild(f))}function T({routePattern:i,currentRoute:e}){let r={},n=i.split("/"),f=e.split("/");return n.forEach((s,m)=>{s.startsWith(":")&&(r[s.slice(1)]=f[m])}),r}class M extends b.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,r){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",e),console.error("[Routerino] Component Stack:",r.componentStack),this.props.routePath&&console.error("[Routerino] Failed Route:",this.props.routePath),console.error("[Routerino] Error occurred at:",new Date().toISOString()),console.groupEnd()),document.title=this.props.errorTitleString,this.props.usePrerenderTags&&d({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}M.propTypes={children:o.node,fallback:o.node,errorTitleString:o.string.isRequired,usePrerenderTags:o.bool,routePath:o.string,debug:o.bool};function _({routes:i=[{path:"/",element:c.jsx("p",{children:"This is the default route. Pass an array of routes to the Routerino component in order to configure your own pages. Each route is a dictionary with at least `path` and `element` defined."}),title:"Routerino default route example",description:"The default route example description.",tags:[{property:"og:locale",content:"en_US"}]}],notFoundTemplate:e=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"No page found for this URL. [404]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:r="Page not found [404]",errorTemplate:n=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"Page failed to load. [500]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:f="Page error [500]",useTrailingSlash:s=!0,usePrerenderTags:m=!1,baseUrl:z=null,title:R="",separator:x=" | ",imageUrl:O=null,touchIconUrl:q=null,debug:g=!1}){const L=`${f}${x}${R}`,C=`${r}${x}${R}`;try{if(g){const t=i.map($=>$.path),u=t.filter(($,p)=>t.indexOf($)!==p);u.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(u)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[S,y]=b.useState(window?.location?.href??"/");b.useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;const t=$=>{g&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let p=$.target;for(;p.tagName!=="A"&&p.parentElement;)p=p.parentElement;if(p.tagName!=="A"){g&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}const h=p.getAttribute("href")||p.href;if(!h){g&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(h)){g&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",h);return}g&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",h);let v;try{v=new URL(h,window.location.href)}catch(H){g&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",h,H);return}g&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",v,"current:",window.location),v&&window.location.origin===v.origin?(g&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),$.preventDefault(),p.href!==window.location.href&&(y(p.href),window.history.pushState({},"",p.href)),p.hash||window.scrollTo({top:0,behavior:"auto"})):g&&console.debug("%c[Routerino]%c target link does not share an origin, standard browser link handling applies","color: #6b7280; font-weight: bold","")};document.addEventListener("click",t);const u=()=>{g&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),y(window.location.href)};return window.addEventListener("popstate",u),()=>{document.removeEventListener("click",t),window.removeEventListener("popstate",u)}},[S]);let a=window?.location?.pathname??"/";(a==="/index.html"||a==="")&&(a="/");const U=i.find(t=>t.path===a),W=i.find(t=>`${t.path}/`===a||t.path===`${a}/`),E=i.find(t=>{const u=t.path.endsWith("/")?t.path.slice(0,-1):t.path,$=a.endsWith("/")?a.slice(0,-1):a,p=u.split("/").filter(Boolean),h=$.split("/").filter(Boolean);return p.length!==h.length?!1:p.every((v,H)=>v.startsWith(":")?!0:v===h[H])}),l=U??W??E;if(g&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:l,exactMatch:U,addSlashMatch:W,paramsMatch:E}),!l)return g&&(console.group("%c[Routerino]%c 404 - No matching route","color: #f59e0b; font-weight: bold",""),console.warn("%c[Routerino]%c Requested path:","color: #f59e0b; font-weight: bold","",a),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",i.map(t=>t.path)),console.groupEnd()),document.title=C,m&&d({name:"prerender-status-code",content:"404"}),e;if(m){const t=document.querySelector('meta[name="prerender-status-code"]');t&&t.remove();const u=document.querySelector('meta[name="prerender-header"]');u&&u.remove()}const k=s&&!a.endsWith("/")&&a!=="/",B=!s&&a.endsWith("/")&&a!=="/",V=k?`${a}/`:B?a.slice(0,-1):a,j=`${z??window?.location?.origin??""}${V}`;if(l.title){const t=`${l.title}${x}${R}`;document.title=t,d({tag:"link",rel:"canonical",href:j}),l.tags?.find(({property:u})=>u==="og:title")||d({property:"og:title",content:t}),l.tags?.find(({property:u})=>u==="og:url")||d({property:"og:url",content:j})}if(l.description&&(d({name:"description",content:l.description}),l.tags?.find(({property:t})=>t==="og:description")||d({property:"og:description",content:l.description})),(O||l.imageUrl)&&d({property:"og:image",content:l.imageUrl??O}),l.tags?.find(({property:t})=>t==="twitter:card")||d({name:"twitter:card",content:"summary_large_image"}),q&&d({tag:"link",rel:"apple-touch-icon",href:q}),m&&(k||B)&&(d({name:"prerender-status-code",content:"301"}),d({name:"prerender-header",content:`Location: ${j}`})),l.tags&&l.tags.length?(l.tags.find(({property:t})=>t==="og:type")||d({property:"og:type",content:"website"}),l.tags.forEach(t=>d(t))):d({property:"og:type",content:"website"}),l.element){const t=T({routePattern:l.path,currentRoute:a}),u={currentRoute:a,params:t,routePattern:l.path,updateHeadTag:d};return c.jsx(Z.Provider,{value:u,children:c.jsx(M,{fallback:n,errorTitleString:L,usePrerenderTags:m,routePath:a,debug:g,children:l.element})})}return g&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",a),document.title=C,m&&d({name:"prerender-status-code",content:"404"}),e}catch(S){return g&&(console.group("%c[Routerino]%c Fatal Error","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c An error occurred in the router itself (not in a route component)","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c Error:","color: #ff6b6b; font-weight: bold","",S),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),m&&d({name:"prerender-status-code",content:"500"}),document.title=L,n}}const P=o.exact({path:(i,e,r)=>{const n=i[e];return n==null?new Error(`The prop \`${e}\` is marked as required in \`${r}\`, but its value is \`${n}\`.`):typeof n!="string"?new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`):n.startsWith("/")?null:new Error(`Invalid prop \`${e}\` value \`${n}\` supplied to \`${r}\`. Route paths must start with a forward slash (/).`)},element:o.element.isRequired,title:o.string,description:o.string,tags:o.arrayOf(o.object),imageUrl:o.string});_.propTypes={routes:o.arrayOf(P),title:o.string,separator:o.string,notFoundTemplate:o.element,notFoundTitle:o.string,errorTemplate:o.element,errorTitle:o.string,useTrailingSlash:o.bool,usePrerenderTags:o.bool,baseUrl:(i,e,r)=>{const n=i[e];if(n!=null){if(typeof n!="string")return new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`);if(n.endsWith("/"))return new Error(`Invalid prop \`${e}\` supplied to \`${r}\`. The baseUrl should not end with a slash. Got: "${n}"`)}return null},imageUrl:o.string,touchIconUrl:o.string,debug:o.bool},w.ErrorBoundary=M,w.Image=K,w.Routerino=_,w.default=_,w.updateHeadTag=d,w.useRouterino=Y,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
+(function(w,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react"),require("prop-types")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react","prop-types"],c):(w=typeof globalThis<"u"?globalThis:w||self,c(w.routerino={},w["react/jsx-runtime"],w.React,w.PropTypes))})(this,(function(w,c,b,o){"use strict";const Q=[480,800,1200,1920],X="(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px",A=new Map;function Y(i,e=""){const r=i.toLowerCase(),n=e.toLowerCase();return!!(r.includes("hero")||r.includes("banner")||n.includes("hero")||n.includes("banner")||n.includes("h-screen")||n.includes("h-full"))}function D(i,e,r=null){const n=i.replace(/\.(jpe?g|png|webp)$/i,""),f=r?`.${r}`:i.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg";return e.map(s=>`${n}-${s}w${f} ${s}w`).join(", ")}function Z(i){const{src:e="",alt:r="",priority:n,widths:f=Q,sizes:s=X,className:m="",style:V={},width:R,height:x,loading:B,decoding:C="async",fetchpriority:p,...L}=i||{},q=typeof window>"u",S=!q&&typeof document<"u"&&typeof HTMLElement<"u"&&document.createElement("div")instanceof HTMLElement,y=S&&(window.location.hostname==="localhost"||window.location.hostname==="127.0.0.1"),a=n??Y(e,m),W=B||(a?"eager":"lazy"),I=p||(a?"high":void 0),[E,l]=b.useState(null);b.useEffect(()=>{if(!S||y||!e)return;const g=new window.Image;g.onload=()=>{l({width:g.naturalWidth,height:g.naturalHeight})},g.src=e},[e,S,y]);const k=b.useMemo(()=>E?f.filter(g=>E.width>=g):f,[E,f]),[O,G]=b.useState(null);b.useEffect(()=>{if(!S||y)return;let g=!1;return(async()=>{const U=e.replace(/\.(jpe?g|png|webp)$/i,""),F=e.match(/\.(jpe?g|png|webp)$/i)?.[0]||".jpg",M=[];for(const K of k){const H=`${U}-${K}w${F}`;if(A.has(H)){A.get(H)&&M.push(K);continue}try{const N=await fetch(H,{method:"HEAD"});A.set(H,N.ok),N.ok&&M.push(K)}catch{A.set(H,!1)}}g||G(M.length>0?M:k)})(),()=>{g=!0}},[e,k,S,y]);const j=O??k,t={};R!=null&&(t.width=R),x!=null&&(t.height=x),E&&R==null&&x==null&&(t.width=E.width,t.height=E.height);const u={maxWidth:"100%",height:"auto",...V};if(y)return c.jsx("img",{src:e,alt:r,loading:W,decoding:C,fetchPriority:I,className:m,style:u,...t,...L});if(q)return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:D(e,f,"webp"),type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:D(e,f),sizes:s,loading:W,decoding:"async",fetchPriority:I,className:m,style:u,...t,...L})]});const $=D(e,j,"webp"),h=D(e,j);return c.jsxs("picture",{"data-routerino-image":"true","data-original-src":e,children:[c.jsx("source",{srcSet:$,type:"image/webp",sizes:s}),c.jsx("img",{src:e,alt:r,srcSet:h,sizes:s,loading:W,decoding:C,fetchPriority:I,className:m,style:u,...t,...L})]})}Z.propTypes={src:o.string.isRequired,alt:o.string.isRequired,priority:o.bool,widths:o.arrayOf(o.number),sizes:o.string,className:o.string,style:o.object,width:o.number,height:o.number,loading:o.oneOf(["lazy","eager"]),decoding:o.oneOf(["sync","async","auto"]),fetchpriority:o.oneOf(["high","low","auto"])};const J=b.createContext(null);function T(){const i=b.useContext(J);if(!i)throw new Error("useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component.");return i}function d({tag:i="meta",soft:e=!1,...r}){const n=Object.keys(r);if(n.length<1)return console.error(`[Routerino] updateHeadTag() received no attributes to set for ${i} tag`);let f=null;for(let s=0;s<n.length&&(n[s]!=="content"&&(f=document.querySelector(`${i}[${n[s]}='${r[n[s]]}']`)),!f);s++);f&&e||(f||(f=document.createElement(i)),n.forEach(s=>f.setAttribute(s,r[s])),document.querySelector("head").appendChild(f))}function P({routePattern:i,currentRoute:e}){let r={},n=i.split("/"),f=e.split("/");return n.forEach((s,m)=>{s.startsWith(":")&&(r[s.slice(1)]=f[m])}),r}class _ extends b.Component{constructor(e){super(e),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e,r){this.props.debug&&(console.group("%c[Routerino]%c Error Boundary Caught an Error","color: #ff6b6b; font-weight: bold","",e),console.error("[Routerino] Component Stack:",r.componentStack),this.props.routePath&&console.error("[Routerino] Failed Route:",this.props.routePath),console.error("[Routerino] Error occurred at:",new Date().toISOString()),console.groupEnd()),document.title=this.props.errorTitleString,this.props.usePrerenderTags&&d({name:"prerender-status-code",content:"500"})}render(){return this.state.hasError?this.props.fallback:this.props.children}}_.propTypes={children:o.node,fallback:o.node,errorTitleString:o.string.isRequired,usePrerenderTags:o.bool,routePath:o.string,debug:o.bool};function z({routes:i=[{path:"/",element:c.jsx("p",{children:"This is the default route. Pass an array of routes to the Routerino component in order to configure your own pages. Each route is a dictionary with at least `path` and `element` defined."}),title:"Routerino default route example",description:"The default route example description.",tags:[{property:"og:locale",content:"en_US"}]}],notFoundTemplate:e=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"No page found for this URL. [404]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),notFoundTitle:r="Page not found [404]",errorTemplate:n=c.jsxs(c.Fragment,{children:[c.jsx("p",{children:"Page failed to load. [500]"}),c.jsx("p",{children:c.jsx("a",{href:"/",children:"Home"})})]}),errorTitle:f="Page error [500]",useTrailingSlash:s=!0,usePrerenderTags:m=!1,baseUrl:V=null,title:R="",separator:x=" | ",imageUrl:B=null,touchIconUrl:C=null,debug:p=!1}){const L=`${f}${x}${R}`,q=`${r}${x}${R}`;try{if(p){const t=i.map($=>$.path),u=t.filter(($,h)=>t.indexOf($)!==h);u.length>0&&(console.warn("%c[Routerino]%c Duplicate route paths detected:","color: #f59e0b; font-weight: bold","",[...new Set(u)]),console.warn("%c[Routerino]%c The first matching route will be used","color: #f59e0b; font-weight: bold",""))}const[S,y]=b.useState(window?.location?.href??"/");b.useEffect(()=>{if(typeof window>"u"||typeof document>"u")return;const t=$=>{p&&console.debug("%c[Routerino]%c click occurred","color: #6b7280; font-weight: bold","");let h=$.target;for(;h.tagName!=="A"&&h.parentElement;)h=h.parentElement;if(h.tagName!=="A"){p&&console.debug("%c[Routerino]%c no anchor tag found during click","color: #6b7280; font-weight: bold","");return}const g=h.getAttribute("href")||h.href;if(!g){p&&console.debug("%c[Routerino]%c anchor tag has no href","color: #6b7280; font-weight: bold","");return}if(!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(g)){p&&console.debug("%c[Routerino]%c skipping non-http URL:","color: #6b7280; font-weight: bold","",g);return}p&&console.debug("%c[Routerino]%c click target href:","color: #6b7280; font-weight: bold","",g);let v;try{v=new URL(g,window.location.href)}catch(U){p&&console.debug("%c[Routerino]%c Invalid URL:","color: #6b7280; font-weight: bold","",g,U);return}if(p&&console.debug("%c[Routerino]%c targetUrl:","color: #6b7280; font-weight: bold","",v,"current:",window.location),v&&window.location.origin===v.origin)if(p&&console.debug("%c[Routerino]%c target link is same origin, will use push-state transitioning","color: #6b7280; font-weight: bold",""),$.preventDefault(),h.href!==window.location.href&&(y(h.href),window.history.pushState({},"",h.href)),h.hash){const U=decodeURIComponent(h.hash.slice(1));setTimeout(()=>{const F=document.getElementById(U);F?F.scrollIntoView({behavior:"auto"}):window.scrollTo({top:0,behavior:"auto"})},0)}else window.scrollTo({top:0,behavior:"auto"});else p&&console.debug("%c[Routerino]%c target link does not share an origin, standard browser link handling applies","color: #6b7280; font-weight: bold","")};document.addEventListener("click",t);const u=()=>{p&&console.debug("%c[Routerino]%c route change ->","color: #6b7280; font-weight: bold","",window.location.pathname),y(window.location.href)};return window.addEventListener("popstate",u),()=>{document.removeEventListener("click",t),window.removeEventListener("popstate",u)}},[S]);let a=window?.location?.pathname??"/";(a==="/index.html"||a==="")&&(a="/");const W=i.find(t=>t.path===a),I=i.find(t=>`${t.path}/`===a||t.path===`${a}/`),E=i.find(t=>{const u=t.path.endsWith("/")?t.path.slice(0,-1):t.path,$=a.endsWith("/")?a.slice(0,-1):a,h=u.split("/").filter(Boolean),g=$.split("/").filter(Boolean);return h.length!==g.length?!1:h.every((v,U)=>v.startsWith(":")?!0:v===g[U])}),l=W??I??E;if(p&&console.debug("%c[Routerino]%c Route matching:","color: #6b7280; font-weight: bold","",{match:l,exactMatch:W,addSlashMatch:I,paramsMatch:E}),!l)return p&&(console.group("%c[Routerino]%c 404 - No matching route","color: #f59e0b; font-weight: bold",""),console.warn("%c[Routerino]%c Requested path:","color: #f59e0b; font-weight: bold","",a),console.warn("%c[Routerino]%c Available routes:","color: #f59e0b; font-weight: bold","",i.map(t=>t.path)),console.groupEnd()),document.title=q,m&&d({name:"prerender-status-code",content:"404"}),e;if(m){const t=document.querySelector('meta[name="prerender-status-code"]');t&&t.remove();const u=document.querySelector('meta[name="prerender-header"]');u&&u.remove()}const k=s&&!a.endsWith("/")&&a!=="/",O=!s&&a.endsWith("/")&&a!=="/",G=k?`${a}/`:O?a.slice(0,-1):a,j=`${V??window?.location?.origin??""}${G}`;if(l.title){const t=`${l.title}${x}${R}`;document.title=t,d({tag:"link",rel:"canonical",href:j}),l.tags?.find(({property:u})=>u==="og:title")||d({property:"og:title",content:t}),l.tags?.find(({property:u})=>u==="og:url")||d({property:"og:url",content:j})}if(l.description&&(d({name:"description",content:l.description}),l.tags?.find(({property:t})=>t==="og:description")||d({property:"og:description",content:l.description})),(B||l.imageUrl)&&d({property:"og:image",content:l.imageUrl??B}),l.tags?.find(({property:t})=>t==="twitter:card")||d({name:"twitter:card",content:"summary_large_image"}),C&&d({tag:"link",rel:"apple-touch-icon",href:C}),m&&(k||O)&&(d({name:"prerender-status-code",content:"301"}),d({name:"prerender-header",content:`Location: ${j}`})),l.tags&&l.tags.length?(l.tags.find(({property:t})=>t==="og:type")||d({property:"og:type",content:"website"}),l.tags.forEach(t=>d(t))):d({property:"og:type",content:"website"}),l.element){const t=P({routePattern:l.path,currentRoute:a}),u={currentRoute:a,params:t,routePattern:l.path,updateHeadTag:d};return c.jsx(J.Provider,{value:u,children:c.jsx(_,{fallback:n,errorTitleString:L,usePrerenderTags:m,routePath:a,debug:p,children:l.element})})}return p&&console.error("%c[Routerino]%c No route found for","color: #ff6b6b; font-weight: bold","",a),document.title=q,m&&d({name:"prerender-status-code",content:"404"}),e}catch(S){return p&&(console.group("%c[Routerino]%c Fatal Error","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c An error occurred in the router itself (not in a route component)","color: #ff6b6b; font-weight: bold",""),console.error("%c[Routerino]%c Error:","color: #ff6b6b; font-weight: bold","",S),console.error("%c[Routerino]%c This typically means an issue with route configuration or router setup","color: #ff6b6b; font-weight: bold",""),console.groupEnd()),m&&d({name:"prerender-status-code",content:"500"}),document.title=L,n}}const ee=o.exact({path:(i,e,r)=>{const n=i[e];return n==null?new Error(`The prop \`${e}\` is marked as required in \`${r}\`, but its value is \`${n}\`.`):typeof n!="string"?new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`):n.startsWith("/")?null:new Error(`Invalid prop \`${e}\` value \`${n}\` supplied to \`${r}\`. Route paths must start with a forward slash (/).`)},element:o.element.isRequired,title:o.string,description:o.string,tags:o.arrayOf(o.object),imageUrl:o.string});z.propTypes={routes:o.arrayOf(ee),title:o.string,separator:o.string,notFoundTemplate:o.element,notFoundTitle:o.string,errorTemplate:o.element,errorTitle:o.string,useTrailingSlash:o.bool,usePrerenderTags:o.bool,baseUrl:(i,e,r)=>{const n=i[e];if(n!=null){if(typeof n!="string")return new Error(`Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`);if(n.endsWith("/"))return new Error(`Invalid prop \`${e}\` supplied to \`${r}\`. The baseUrl should not end with a slash. Got: "${n}"`)}return null},imageUrl:o.string,touchIconUrl:o.string,debug:o.bool},w.ErrorBoundary=_,w.Image=Z,w.Routerino=z,w.default=z,w.updateHeadTag=d,w.useRouterino=T,Object.defineProperties(w,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "routerino",
-  "version": "2.3.4-rc9",
+  "version": "2.4.0",
   "description": "A lightweight, SEO-optimized React router for modern web applications",
   "repository": {
     "type": "git",