routerino 2.3.4 → 2.4.0

package/dist/routerino.js

@@ -1,177 +1,226 @@
-import { jsx as g, jsxs as q, Fragment as F } from "react/jsx-runtime";
-import { useState as I, useEffect as O, createContext as _, Component as V, useContext as G } from "react";
-import t from "prop-types";
-const K = [480, 800, 1200, 1920], Z = "(max-width: 480px) 100vw, (max-width: 800px) 800px, (max-width: 1200px) 1200px, 1920px";
-function J(r, e = "") {
-  const i = r.toLowerCase(), n = e.toLowerCase();
-  return !!(i.includes("hero") || i.includes("banner") || n.includes("hero") || n.includes("banner") || n.includes("h-screen") || n.includes("h-full"));
+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 H(r, e, i = null) {
-  const n = r.replace(/\.(jpe?g|png|webp)$/i, ""), h = i ? `.${i}` : r.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
-  return e.map((l) => `${n}-${l}w${h} ${l}w`).join(", ");
+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(", ");
 }
-function B(r) {
+function oe(i) {
   const {
     src: e = "",
-    alt: i = "",
+    alt: r = "",
     priority: n,
-    widths: h = K,
-    sizes: l = Z,
-    className: p = "",
-    style: L = {},
-    loading: $,
-    decoding: E = "async",
-    fetchpriority: v,
-    ...x
-  } = r || {};
-  if (typeof window < "u" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"))
+    widths: u = Y,
+    sizes: a = ee,
+    className: m = "",
+    style: O = {},
+    width: E,
+    height: S,
+    loading: I,
+    decoding: L = "async",
+    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 h = new window.Image();
+    h.onload = () => {
+      s({
+        width: h.naturalWidth,
+        height: h.naturalHeight
+      });
+    }, h.src = e;
+  }, [e, b, R]);
+  const v = J(() => y ? u.filter((h) => y.width >= h) : u, [y, u]), [j, F] = z(null);
+  _(() => {
+    if (!b || R) return;
+    let h = !1;
+    return (async () => {
+      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(M);
+          continue;
+        }
+        try {
+          const V = await fetch(C, { method: "HEAD" });
+          H.set(C, V.ok), V.ok && D.push(M);
+        } catch {
+          H.set(C, !1);
+        }
+      }
+      h || F(
+        D.length > 0 ? D : v
+      );
+    })(), () => {
+      h = !0;
+    };
+  }, [e, v, b, R]);
+  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",
+    ...O
+  };
+  if (R)
     return /* @__PURE__ */ g(
       "img",
       {
         src: e,
-        alt: i,
-        loading: $ || "lazy",
-        decoding: E,
-        fetchPriority: v,
-        className: p,
-        style: L,
-        ...x
+        alt: r,
+        loading: k,
+        decoding: L,
+        fetchPriority: P,
+        className: m,
+        style: l,
+        ...t,
+        ...T
       }
     );
-  const [T, D] = I(null), S = e && typeof window < "u";
-  O(() => {
-    if (!S) return;
-    const y = new B();
-    y.onload = () => {
-      D({
-        width: y.naturalWidth,
-        height: y.naturalHeight
-      });
-    }, y.src = e;
-  }, [e, S]);
-  const b = T ? h.filter((y) => T.width >= y) : h, [c, k] = I(b);
-  O(() => {
-    (async () => {
-      if (typeof window > "u") {
-        k(b);
-        return;
-      }
-      const U = e.replace(/\.(jpe?g|png|webp)$/i, ""), o = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", a = [];
-      for (const w of b) {
-        const f = `${U}-${w}w${o}`;
-        try {
-          (await fetch(f, { method: "HEAD" })).ok && a.push(w);
-        } catch {
+  if (W)
+    return /* @__PURE__ */ B("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+      /* @__PURE__ */ g(
+        "source",
+        {
+          srcSet: q(e, u, "webp"),
+          type: "image/webp",
+          sizes: a
         }
-      }
-      a.length === 0 && b.length > 0 && a.push(Math.min(...b)), k(a);
-    })();
-  }, [e, b]);
-  const P = n ?? J(e, p), W = $ || (P ? "eager" : "lazy"), s = v || (P ? "high" : void 0), j = H(e, c, "webp"), A = H(e, c);
-  return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
-    /* @__PURE__ */ g("source", { srcSet: j, type: "image/webp", sizes: l }),
+      ),
+      /* @__PURE__ */ g(
+        "img",
+        {
+          src: e,
+          alt: r,
+          srcSet: q(e, u),
+          sizes: a,
+          loading: k,
+          decoding: "async",
+          fetchPriority: P,
+          className: m,
+          style: l,
+          ...t,
+          ...T
+        }
+      )
+    ] });
+  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: i,
-        srcSet: A,
-        sizes: l,
-        loading: W,
-        decoding: E,
-        fetchPriority: s,
-        className: p,
-        style: L,
-        ...x
+        alt: r,
+        srcSet: d,
+        sizes: a,
+        loading: k,
+        decoding: L,
+        fetchPriority: P,
+        className: m,
+        style: l,
+        ...t,
+        ...T
       }
     )
   ] });
 }
-B.propTypes = {
+oe.propTypes = {
   /** Image source URL (required) */
-  src: t.string.isRequired,
+  src: o.string.isRequired,
   /** Alt text for accessibility (required) */
-  alt: t.string.isRequired,
+  alt: o.string.isRequired,
   /** Override lazy loading for hero/LCP images */
-  priority: t.bool,
+  priority: o.bool,
   /** Responsive widths to generate (defaults to [480, 800, 1200, 1920]) */
-  widths: t.arrayOf(t.number),
+  widths: o.arrayOf(o.number),
   /** Responsive sizes attribute (has smart default) */
-  sizes: t.string,
+  sizes: o.string,
   /** CSS classes (Tailwind/DaisyUI ready) */
-  className: t.string,
+  className: o.string,
   /** Inline styles */
-  style: t.object,
+  style: o.object,
+  /** Explicit width for CLS prevention */
+  width: o.number,
+  /** Explicit height for CLS prevention */
+  height: o.number,
   /** Loading behavior (auto-set based on priority) */
-  loading: t.oneOf(["lazy", "eager"]),
+  loading: o.oneOf(["lazy", "eager"]),
   /** Decode timing */
-  decoding: t.oneOf(["sync", "async", "auto"]),
+  decoding: o.oneOf(["sync", "async", "auto"]),
   /** Fetch priority (auto-set based on priority) */
-  fetchpriority: t.oneOf(["high", "low", "auto"])
+  fetchpriority: o.oneOf(["high", "low", "auto"])
 };
-const z = _(null);
-function oe() {
-  const r = G(z);
-  if (!r)
+const K = N(null);
+function le() {
+  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."
     );
-  return r;
+  return i;
 }
-function u({ tag: r = "meta", soft: e = !1, ...i }) {
-  const n = Object.keys(i);
+function p({ 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 ${r} tag`
+      `[Routerino] updateHeadTag() received no attributes to set for ${i} tag`
     );
-  let h = null;
-  for (let l = 0; l < n.length && (n[l] !== "content" && (h = document.querySelector(
-    `${r}[${n[l]}='${i[n[l]]}']`
-  )), !h); l++)
+  let u = null;
+  for (let a = 0; a < n.length && (n[a] !== "content" && (u = document.querySelector(
+    `${i}[${n[a]}='${r[n[a]]}']`
+  )), !u); a++)
     ;
-  h && e || (h || (h = document.createElement(r)), n.forEach((l) => h.setAttribute(l, i[l])), document.querySelector("head").appendChild(h));
+  u && e || (u || (u = document.createElement(i)), n.forEach((a) => u.setAttribute(a, r[a])), document.querySelector("head").appendChild(u));
 }
-function N({ routePattern: r, currentRoute: e }) {
-  let i = {}, n = r.split("/"), h = e.split("/");
-  return n.forEach((l, p) => {
-    l.startsWith(":") && (i[l.slice(1)] = h[p]);
-  }), i;
+function ne({ routePattern: i, currentRoute: e }) {
+  let r = {}, n = i.split("/"), u = e.split("/");
+  return n.forEach((a, m) => {
+    a.startsWith(":") && (r[a.slice(1)] = u[m]);
+  }), r;
 }
-class M extends V {
+class Z extends Q {
   constructor(e) {
     super(e), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(e, i) {
+  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:", i.componentStack), this.props.routePath && console.error("[Routerino] Failed Route:", this.props.routePath), console.error("[Routerino] Error occurred at:", (/* @__PURE__ */ new Date()).toISOString()), console.groupEnd()), document.title = this.props.errorTitleString, this.props.usePrerenderTags && u({ name: "prerender-status-code", content: "500" });
+    ), console.error("[Routerino] Component Stack:", r.componentStack), this.props.routePath && console.error("[Routerino] Failed Route:", this.props.routePath), console.error("[Routerino] Error occurred at:", (/* @__PURE__ */ new Date()).toISOString()), console.groupEnd()), document.title = this.props.errorTitleString, this.props.usePrerenderTags && p({ name: "prerender-status-code", content: "500" });
   }
   render() {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-M.propTypes = {
+Z.propTypes = {
   /** The child components to render when there's no error */
-  children: t.node,
+  children: o.node,
   /** The fallback UI to display when an error is caught */
-  fallback: t.node,
+  fallback: o.node,
   /** The document title to set when an error occurs */
-  errorTitleString: t.string.isRequired,
+  errorTitleString: o.string.isRequired,
   /** Whether to set prerender meta tags (status code 500) on error */
-  usePrerenderTags: t.bool,
+  usePrerenderTags: o.bool,
   /** The current route path for better error context (optional) */
-  routePath: t.string,
+  routePath: o.string,
   /** Whether to log debug messages to console (optional) */
-  debug: t.bool
+  debug: o.bool
 };
-function Q({
-  routes: r = [
+function re({
+  routes: i = [
     {
       path: "/",
       element: /* @__PURE__ */ g("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." }),
@@ -180,148 +229,157 @@ function Q({
       tags: [{ property: "og:locale", content: "en_US" }]
     }
   ],
-  notFoundTemplate: e = /* @__PURE__ */ q(F, { 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: i = "Page not found [404]",
-  errorTemplate: n = /* @__PURE__ */ q(F, { children: [
+  notFoundTitle: r = "Page not found [404]",
+  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: h = "Page error [500]",
-  useTrailingSlash: l = !0,
-  usePrerenderTags: p = !1,
-  baseUrl: L = null,
-  title: $ = "",
-  separator: E = " | ",
-  imageUrl: v = null,
-  touchIconUrl: x = null,
-  debug: d = !1
+  errorTitle: u = "Page error [500]",
+  useTrailingSlash: a = !0,
+  usePrerenderTags: m = !1,
+  baseUrl: O = null,
+  title: E = "",
+  separator: S = " | ",
+  imageUrl: I = null,
+  touchIconUrl: L = null,
+  debug: f = !1
 }) {
-  const T = `${h}${E}${$}`, D = `${i}${E}${$}`;
+  const T = `${u}${S}${E}`, W = `${r}${S}${E}`;
   try {
-    if (d) {
-      const o = r.map((w) => w.path), a = o.filter(
-        (w, f) => o.indexOf(w) !== f
+    if (f) {
+      const t = i.map((w) => w.path), l = t.filter(
+        (w, d) => t.indexOf(w) !== d
       );
-      a.length > 0 && (console.warn(
+      l.length > 0 && (console.warn(
         "%c[Routerino]%c Duplicate route paths detected:",
         "color: #f59e0b; font-weight: bold",
         "",
-        [...new Set(a)]
+        [...new Set(l)]
       ), console.warn(
         "%c[Routerino]%c The first matching route will be used",
         "color: #f59e0b; font-weight: bold",
         ""
       ));
     }
-    const [S, b] = I(window?.location?.href ?? "/");
-    O(() => {
+    const [b, R] = z(window?.location?.href ?? "/");
+    _(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
-      const o = (w) => {
-        d && console.debug(
+      const t = (w) => {
+        f && console.debug(
           "%c[Routerino]%c click occurred",
           "color: #6b7280; font-weight: bold",
           ""
         );
-        let f = w.target;
-        for (; f.tagName !== "A" && f.parentElement; )
-          f = f.parentElement;
-        if (f.tagName !== "A") {
-          d && 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 m = f.getAttribute("href") || f.href;
-        if (!m) {
-          d && 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(m)) {
-          d && console.debug(
+        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(h)) {
+          f && console.debug(
             "%c[Routerino]%c skipping non-http URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            m
+            h
           );
           return;
         }
-        d && console.debug(
+        f && console.debug(
           "%c[Routerino]%c click target href:",
           "color: #6b7280; font-weight: bold",
           "",
-          m
+          h
         );
-        let R;
+        let $;
         try {
-          R = new URL(m, window.location.href);
-        } catch (C) {
-          d && console.debug(
+          $ = new URL(h, window.location.href);
+        } catch (x) {
+          f && console.debug(
             "%c[Routerino]%c Invalid URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            m,
-            C
+            h,
+            x
           );
           return;
         }
-        d && console.debug(
+        if (f && console.debug(
           "%c[Routerino]%c targetUrl:",
           "color: #6b7280; font-weight: bold",
           "",
-          R,
+          $,
           "current:",
           window.location
-        ), R && window.location.origin === R.origin ? (d && console.debug(
-          "%c[Routerino]%c target link is same origin, will use push-state transitioning",
-          "color: #6b7280; font-weight: bold",
-          ""
-        ), w.preventDefault(), f.href !== window.location.href && (b(f.href), window.history.pushState({}, "", f.href)), window.scrollTo({
-          top: 0,
-          behavior: "auto"
-        })) : d && 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",
           ""
         );
       };
-      document.addEventListener("click", o);
-      const a = () => {
-        d && console.debug(
+      document.addEventListener("click", t);
+      const l = () => {
+        f && console.debug(
           "%c[Routerino]%c route change ->",
           "color: #6b7280; font-weight: bold",
           "",
           window.location.pathname
-        ), b(window.location.href);
+        ), R(window.location.href);
       };
-      return window.addEventListener("popstate", a), () => {
-        document.removeEventListener("click", o), window.removeEventListener("popstate", a);
+      return window.addEventListener("popstate", l), () => {
+        document.removeEventListener("click", t), window.removeEventListener("popstate", l);
       };
-    }, [S]);
+    }, [b]);
     let c = window?.location?.pathname ?? "/";
     (c === "/index.html" || c === "") && (c = "/");
-    const k = r.find((o) => o.path === c), P = r.find(
-      (o) => `${o.path}/` === c || o.path === `${c}/`
-    ), W = r.find((o) => {
-      const a = o.path.endsWith("/") ? o.path.slice(0, -1) : o.path, w = c.endsWith("/") ? c.slice(0, -1) : c, f = a.split("/").filter(Boolean), m = w.split("/").filter(Boolean);
-      return f.length !== m.length ? !1 : f.every((R, C) => R.startsWith(":") ? !0 : R === m[C]);
-    }), s = k ?? P ?? W;
-    if (d && console.debug(
+    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, 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: k, addSlashMatch: P, paramsMatch: W }
+      { match: s, exactMatch: k, addSlashMatch: P, paramsMatch: y }
     ), !s)
-      return d && (console.group(
+      return f && (console.group(
         "%c[Routerino]%c 404 - No matching route",
         "color: #f59e0b; font-weight: bold",
         ""
@@ -334,79 +392,79 @@ function Q({
         "%c[Routerino]%c Available routes:",
         "color: #f59e0b; font-weight: bold",
         "",
-        r.map((o) => o.path)
-      ), console.groupEnd()), document.title = D, p && u({ name: "prerender-status-code", content: "404" }), e;
-    if (p) {
-      const o = document.querySelector(
+        i.map((t) => t.path)
+      ), 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"]'
       );
-      o && o.remove();
-      const a = document.querySelector(
+      t && t.remove();
+      const l = document.querySelector(
         'meta[name="prerender-header"]'
       );
-      a && a.remove();
+      l && l.remove();
     }
-    const j = l && !c.endsWith("/") && c !== "/", A = !l && c.endsWith("/") && c !== "/", y = j ? `${c}/` : A ? c.slice(0, -1) : c, U = `${L ?? window?.location?.origin ?? ""}${y}`;
+    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 o = `${s.title}${E}${$}`;
-      document.title = o, u({
+      const t = `${s.title}${S}${E}`;
+      document.title = t, p({
         tag: "link",
         rel: "canonical",
         href: U
-      }), s.tags?.find(({ property: a }) => a === "og:title") || u({
+      }), s.tags?.find(({ property: l }) => l === "og:title") || p({
         property: "og:title",
-        content: o
-      }), s.tags?.find(({ property: a }) => a === "og:url") || u({
+        content: t
+      }), s.tags?.find(({ property: l }) => l === "og:url") || p({
         property: "og:url",
         content: U
       });
     }
-    if (s.description && (u({ name: "description", content: s.description }), s.tags?.find(({ property: o }) => o === "og:description") || 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
-    })), (v || s.imageUrl) && u({
+    })), (I || s.imageUrl) && p({
       property: "og:image",
-      content: s.imageUrl ?? v
-    }), s.tags?.find(({ property: o }) => o === "twitter:card") || u({
+      content: s.imageUrl ?? I
+    }), s.tags?.find(({ property: t }) => t === "twitter:card") || p({
       name: "twitter:card",
       content: "summary_large_image"
-    }), x && u({
+    }), L && p({
       tag: "link",
       rel: "apple-touch-icon",
-      href: x
-    }), p && (j || A) && (u({ name: "prerender-status-code", content: "301" }), u({
+      href: L
+    }), m && (v || j) && (p({ name: "prerender-status-code", content: "301" }), p({
       name: "prerender-header",
       content: `Location: ${U}`
-    })), s.tags && s.tags.length ? (s.tags.find(({ property: o }) => o === "og:type") || u({ property: "og:type", content: "website" }), s.tags.forEach((o) => u(o))) : u({ property: "og:type", content: "website" }), s.element) {
-      const o = N({
+    })), 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,
         currentRoute: c
-      }), a = {
+      }), l = {
         currentRoute: c,
-        params: o,
+        params: t,
         routePattern: s.path,
-        updateHeadTag: u
+        updateHeadTag: p
       };
-      return /* @__PURE__ */ g(z.Provider, { value: a, children: /* @__PURE__ */ g(
-        M,
+      return /* @__PURE__ */ g(K.Provider, { value: l, children: /* @__PURE__ */ g(
+        Z,
         {
           fallback: n,
           errorTitleString: T,
-          usePrerenderTags: p,
+          usePrerenderTags: m,
           routePath: c,
-          debug: d,
+          debug: f,
           children: s.element
         }
       ) });
     }
-    return d && console.error(
+    return f && console.error(
       "%c[Routerino]%c No route found for",
       "color: #ff6b6b; font-weight: bold",
       "",
       c
-    ), document.title = D, p && u({ name: "prerender-status-code", content: "404" }), e;
-  } catch (S) {
-    return d && (console.group(
+    ), document.title = W, m && p({ name: "prerender-status-code", content: "404" }), e;
+  } catch (b) {
+    return f && (console.group(
       "%c[Routerino]%c Fatal Error",
       "color: #ff6b6b; font-weight: bold",
       ""
@@ -418,64 +476,64 @@ function Q({
       "%c[Routerino]%c Error:",
       "color: #ff6b6b; font-weight: bold",
       "",
-      S
+      b
     ), console.error(
       "%c[Routerino]%c This typically means an issue with route configuration or router setup",
       "color: #ff6b6b; font-weight: bold",
       ""
-    ), console.groupEnd()), p && u({ name: "prerender-status-code", content: "500" }), document.title = T, n;
+    ), console.groupEnd()), m && p({ name: "prerender-status-code", content: "500" }), document.title = T, n;
   }
 }
-const X = t.exact({
-  path: (r, e, i) => {
-    const n = r[e];
+const ie = o.exact({
+  path: (i, e, r) => {
+    const n = i[e];
     return n == null ? new Error(
-      `The prop \`${e}\` is marked as required in \`${i}\`, but its value is \`${n}\`.`
+      `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 \`${i}\`, expected \`string\`.`
+      `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`
     ) : n.startsWith("/") ? null : new Error(
-      `Invalid prop \`${e}\` value \`${n}\` supplied to \`${i}\`. Route paths must start with a forward slash (/).`
+      `Invalid prop \`${e}\` value \`${n}\` supplied to \`${r}\`. Route paths must start with a forward slash (/).`
     );
   },
-  element: t.element.isRequired,
-  title: t.string,
-  description: t.string,
-  tags: t.arrayOf(t.object),
-  imageUrl: t.string
+  element: o.element.isRequired,
+  title: o.string,
+  description: o.string,
+  tags: o.arrayOf(o.object),
+  imageUrl: o.string
 });
-Q.propTypes = {
-  routes: t.arrayOf(X),
-  title: t.string,
-  separator: t.string,
-  notFoundTemplate: t.element,
-  notFoundTitle: t.string,
-  errorTemplate: t.element,
-  errorTitle: t.string,
-  useTrailingSlash: t.bool,
-  usePrerenderTags: t.bool,
-  baseUrl: (r, e, i) => {
-    const n = r[e];
+re.propTypes = {
+  routes: o.arrayOf(ie),
+  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 \`${i}\`, expected \`string\`.`
+          `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${r}\`, expected \`string\`.`
         );
       if (n.endsWith("/"))
         return new Error(
-          `Invalid prop \`${e}\` supplied to \`${i}\`. The baseUrl should not end with a slash. Got: "${n}"`
+          `Invalid prop \`${e}\` supplied to \`${r}\`. The baseUrl should not end with a slash. Got: "${n}"`
         );
     }
     return null;
   },
-  imageUrl: t.string,
-  touchIconUrl: t.string,
-  debug: t.bool
+  imageUrl: o.string,
+  touchIconUrl: o.string,
+  debug: o.bool
 };
 export {
-  M as ErrorBoundary,
-  B as Image,
-  Q as Routerino,
-  Q as default,
-  u as updateHeadTag,
-  oe as useRouterino
+  Z as ErrorBoundary,
+  oe as Image,
+  re as Routerino,
+  re as default,
+  p as updateHeadTag,
+  le as useRouterino
 };