routerino 2.3.4 → 2.5.0

package/dist/routerino.js

@@ -1,93 +1,138 @@
-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 { jsx as m, jsxs as q, Fragment as V } from "react/jsx-runtime";
+import { useState as M, useEffect as _, useMemo as X, createContext as Z, Component as J, useContext as Q } 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"));
+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 c = i.toLowerCase(), n = e.toLowerCase();
+  return !!(c.includes("hero") || c.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 O(i, e, c = null) {
+  const n = i.replace(/\.(jpe?g|png|webp)$/i, ""), f = c ? `.${c}` : i.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
+  return e.map((l) => `${n}-${l}w${f} ${l}w`).join(", ");
 }
-function B(r) {
+function oe(i) {
   const {
     src: e = "",
-    alt: i = "",
+    alt: c = "",
     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"))
-    return /* @__PURE__ */ g(
+    widths: f = Y,
+    sizes: l = ee,
+    className: u = "",
+    style: F = {},
+    width: v,
+    height: $,
+    loading: A,
+    decoding: j = "async",
+    fetchpriority: d,
+    ...k
+  } = i || {}, U = typeof window > "u", S = !U && typeof document < "u" && typeof HTMLElement < "u" && document.createElement("div") instanceof HTMLElement, x = S && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1"), W = n ?? te(e, u), a = A || (W ? "eager" : "lazy"), P = d || (W ? "high" : void 0), [E, C] = M(null);
+  _(() => {
+    if (!S || x || !e) return;
+    const r = new window.Image();
+    r.onload = () => {
+      C({
+        width: r.naturalWidth,
+        height: r.naturalHeight
+      });
+    }, r.src = e;
+  }, [e, S, x]);
+  const s = X(() => E ? f.filter((r) => E.width >= r) : f, [E, f]), [B, D] = M(null);
+  _(() => {
+    if (!S || x) return;
+    let r = !1;
+    return (async () => {
+      const y = e.replace(/\.(jpe?g|png|webp)$/i, ""), T = e.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg", R = [];
+      for (const L of s) {
+        const I = `${y}-${L}w${T}`;
+        if (H.has(I)) {
+          H.get(I) && R.push(L);
+          continue;
+        }
+        try {
+          const K = await fetch(I, { method: "HEAD" });
+          H.set(I, K.ok), K.ok && R.push(L);
+        } catch {
+          H.set(I, !1);
+        }
+      }
+      r || D(
+        R.length > 0 ? R : s
+      );
+    })(), () => {
+      r = !0;
+    };
+  }, [e, s, S, x]);
+  const z = B ?? s, b = {};
+  v != null && (b.width = v), $ != null && (b.height = $), E && v == null && $ == null && (b.width = E.width, b.height = E.height);
+  const o = {
+    maxWidth: "100%",
+    height: "auto",
+    ...F
+  };
+  if (x)
+    return /* @__PURE__ */ m(
       "img",
       {
         src: e,
-        alt: i,
-        loading: $ || "lazy",
-        decoding: E,
-        fetchPriority: v,
-        className: p,
-        style: L,
-        ...x
+        alt: c,
+        loading: a,
+        decoding: j,
+        fetchPriority: P,
+        className: u,
+        style: o,
+        ...b,
+        ...k
       }
     );
-  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 (U)
+    return /* @__PURE__ */ q("picture", { "data-routerino-image": "true", "data-original-src": e, children: [
+      /* @__PURE__ */ m(
+        "source",
+        {
+          srcSet: O(e, f, "webp"),
+          type: "image/webp",
+          sizes: l
         }
-      }
-      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);
+      ),
+      /* @__PURE__ */ m(
+        "img",
+        {
+          src: e,
+          alt: c,
+          srcSet: O(e, f),
+          sizes: l,
+          loading: a,
+          decoding: "async",
+          fetchPriority: P,
+          className: u,
+          style: o,
+          ...b,
+          ...k
+        }
+      )
+    ] });
+  const p = O(e, z, "webp"), g = O(e, z);
   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(
+    /* @__PURE__ */ m("source", { srcSet: p, type: "image/webp", sizes: l }),
+    /* @__PURE__ */ m(
       "img",
       {
         src: e,
-        alt: i,
-        srcSet: A,
+        alt: c,
+        srcSet: g,
         sizes: l,
-        loading: W,
-        decoding: E,
-        fetchPriority: s,
-        className: p,
-        style: L,
-        ...x
+        loading: a,
+        decoding: j,
+        fetchPriority: P,
+        className: u,
+        style: o,
+        ...b,
+        ...k
       }
     )
   ] });
 }
-B.propTypes = {
+oe.propTypes = {
   /** Image source URL (required) */
   src: t.string.isRequired,
   /** Alt text for accessibility (required) */
@@ -102,6 +147,10 @@ B.propTypes = {
   className: t.string,
   /** Inline styles */
   style: t.object,
+  /** Explicit width for CLS prevention */
+  width: t.number,
+  /** Explicit height for CLS prevention */
+  height: t.number,
   /** Loading behavior (auto-set based on priority) */
   loading: t.oneOf(["lazy", "eager"]),
   /** Decode timing */
@@ -109,54 +158,121 @@ B.propTypes = {
   /** Fetch priority (auto-set based on priority) */
   fetchpriority: t.oneOf(["high", "low", "auto"])
 };
-const z = _(null);
-function oe() {
-  const r = G(z);
-  if (!r)
+const ne = [
+  ".pdf",
+  ".doc",
+  ".docx",
+  ".xls",
+  ".xlsx",
+  ".ppt",
+  ".pptx",
+  ".odt",
+  ".ods",
+  ".odp",
+  ".rtf",
+  ".csv",
+  ".txt",
+  ".md",
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".gif",
+  ".svg",
+  ".webp",
+  ".avif",
+  ".ico",
+  ".bmp",
+  ".tiff",
+  ".tif",
+  ".mp4",
+  ".webm",
+  ".ogv",
+  ".mov",
+  ".avi",
+  ".mkv",
+  ".flv",
+  ".mp3",
+  ".wav",
+  ".ogg",
+  ".flac",
+  ".aac",
+  ".m4a",
+  ".wma",
+  ".woff",
+  ".woff2",
+  ".ttf",
+  ".eot",
+  ".zip",
+  ".tar",
+  ".gz",
+  ".bz2",
+  ".7z",
+  ".rar",
+  ".xz",
+  ".zst",
+  ".epub",
+  ".mobi",
+  ".json",
+  ".xml",
+  ".yml",
+  ".yaml",
+  ".css",
+  ".js",
+  ".map",
+  ".wasm"
+], N = Z(null);
+function ue() {
+  const i = Q(N);
+  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);
-  if (n.length < 1)
+function h({
+  tag: i = "meta",
+  soft: e = !1,
+  innerHTML: c,
+  ...n
+}) {
+  const f = Object.keys(n);
+  if (f.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 l = null;
+  for (let u = 0; u < f.length && (f[u] !== "content" && (l = document.querySelector(
+    `${i}[${f[u]}='${n[f[u]]}']`
+  )), !l); u++)
     ;
-  h && e || (h || (h = document.createElement(r)), n.forEach((l) => h.setAttribute(l, i[l])), document.querySelector("head").appendChild(h));
+  l && e || (l || (l = document.createElement(i)), f.forEach((u) => l.setAttribute(u, n[u])), c !== void 0 && (l.innerHTML = c), document.querySelector("head").appendChild(l));
 }
-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 re({ routePattern: i, currentRoute: e }) {
+  let c = {}, n = i.split("/"), f = e.split("/");
+  return n.forEach((l, u) => {
+    l.startsWith(":") && (c[l.slice(1)] = f[u]);
+  }), c;
 }
-class M extends V {
+class G extends J {
   constructor(e) {
     super(e), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(e, i) {
+  componentDidCatch(e, c) {
     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:", c.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 && h({ name: "prerender-status-code", content: "500" });
   }
   render() {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-M.propTypes = {
+G.propTypes = {
   /** The child components to render when there's no error */
   children: t.node,
   /** The fallback UI to display when an error is caught */
@@ -170,66 +286,67 @@ M.propTypes = {
   /** Whether to log debug messages to console (optional) */
   debug: t.bool
 };
-function Q({
-  routes: r = [
+function ie({
+  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." }),
+      element: /* @__PURE__ */ m("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 = /* @__PURE__ */ q(F, { children: [
-    /* @__PURE__ */ g("p", { children: "No page found for this URL. [404]" }),
-    /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
+  notFoundTemplate: e = /* @__PURE__ */ q(V, { children: [
+    /* @__PURE__ */ m("p", { children: "No page found for this URL. [404]" }),
+    /* @__PURE__ */ m("p", { children: /* @__PURE__ */ m("a", { href: "/", children: "Home" }) })
   ] }),
-  notFoundTitle: i = "Page not found [404]",
-  errorTemplate: n = /* @__PURE__ */ q(F, { children: [
-    /* @__PURE__ */ g("p", { children: "Page failed to load. [500]" }),
-    /* @__PURE__ */ g("p", { children: /* @__PURE__ */ g("a", { href: "/", children: "Home" }) })
+  notFoundTitle: c = "Page not found [404]",
+  errorTemplate: n = /* @__PURE__ */ q(V, { children: [
+    /* @__PURE__ */ m("p", { children: "Page failed to load. [500]" }),
+    /* @__PURE__ */ m("p", { children: /* @__PURE__ */ m("a", { href: "/", children: "Home" }) })
   ] }),
-  errorTitle: h = "Page error [500]",
+  errorTitle: f = "Page error [500]",
   useTrailingSlash: l = !0,
-  usePrerenderTags: p = !1,
-  baseUrl: L = null,
-  title: $ = "",
-  separator: E = " | ",
-  imageUrl: v = null,
-  touchIconUrl: x = null,
-  debug: d = !1
+  usePrerenderTags: u = !1,
+  baseUrl: F = null,
+  title: v = "",
+  separator: $ = " | ",
+  imageUrl: A = null,
+  touchIconUrl: j = null,
+  debug: d = !1,
+  ignorePatterns: k = []
 }) {
-  const T = `${h}${E}${$}`, D = `${i}${E}${$}`;
+  const U = [f, v].filter(Boolean).join($), S = [c, v].filter(Boolean).join($);
   try {
     if (d) {
-      const o = r.map((w) => w.path), a = o.filter(
-        (w, f) => o.indexOf(w) !== f
+      const o = i.map((g) => g.path), p = o.filter(
+        (g, r) => o.indexOf(g) !== r
       );
-      a.length > 0 && (console.warn(
+      p.length > 0 && (console.warn(
         "%c[Routerino]%c Duplicate route paths detected:",
         "color: #f59e0b; font-weight: bold",
         "",
-        [...new Set(a)]
+        [...new Set(p)]
       ), 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 [x, W] = M(window?.location?.href ?? "/");
+    _(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
-      const o = (w) => {
+      const o = (g) => {
         d && 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") {
+        let r = g.target;
+        for (; r.tagName !== "A" && r.parentElement; )
+          r = r.parentElement;
+        if (r.tagName !== "A") {
           d && console.debug(
             "%c[Routerino]%c no anchor tag found during click",
             "color: #6b7280; font-weight: bold",
@@ -237,8 +354,10 @@ function Q({
           );
           return;
         }
-        const m = f.getAttribute("href") || f.href;
-        if (!m) {
+        if (g.defaultPrevented || g.button !== 0 || g.ctrlKey || g.metaKey || g.shiftKey || g.altKey || r.getAttribute("target") === "_blank" || r.hasAttribute("download") || r.getAttribute("rel") === "external")
+          return;
+        const w = r.getAttribute("href") || r.href;
+        if (!w) {
           d && console.debug(
             "%c[Routerino]%c anchor tag has no href",
             "color: #6b7280; font-weight: bold",
@@ -246,12 +365,12 @@ function Q({
           );
           return;
         }
-        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(m)) {
+        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(w)) {
           d && console.debug(
             "%c[Routerino]%c skipping non-http URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            m
+            w
           );
           return;
         }
@@ -259,67 +378,97 @@ function Q({
           "%c[Routerino]%c click target href:",
           "color: #6b7280; font-weight: bold",
           "",
-          m
+          w
         );
-        let R;
+        let y;
         try {
-          R = new URL(m, window.location.href);
-        } catch (C) {
+          y = new URL(w, window.location.href);
+        } catch (T) {
           d && console.debug(
             "%c[Routerino]%c Invalid URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            m,
-            C
+            w,
+            T
           );
           return;
         }
-        d && console.debug(
+        if (d && console.debug(
           "%c[Routerino]%c targetUrl:",
           "color: #6b7280; font-weight: bold",
           "",
-          R,
+          y,
           "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(
+        ), y && window.location.origin === y.origin) {
+          const T = y.pathname.toLowerCase();
+          if (ne.some((R) => T.endsWith(R))) {
+            d && console.debug(
+              "%c[Routerino]%c skipping file extension link:",
+              "color: #6b7280; font-weight: bold",
+              "",
+              w
+            );
+            return;
+          }
+          if (k.length > 0 && k.some(
+            (R) => new RegExp(R, "i").test(w)
+          )) {
+            d && console.debug(
+              "%c[Routerino]%c skipping ignored link pattern:",
+              "color: #6b7280; font-weight: bold",
+              "",
+              w
+            );
+            return;
+          }
+          if (d && console.debug(
+            "%c[Routerino]%c target link is same origin, will use push-state transitioning",
+            "color: #6b7280; font-weight: bold",
+            ""
+          ), g.preventDefault(), r.href !== window.location.href && (W(r.href), window.history.pushState({}, "", r.href)), r.hash) {
+            const R = decodeURIComponent(r.hash.slice(1));
+            setTimeout(() => {
+              const L = document.getElementById(R);
+              L ? L.scrollIntoView({ behavior: "auto" }) : window.scrollTo({ top: 0, behavior: "auto" });
+            }, 0);
+          } else
+            window.scrollTo({
+              top: 0,
+              behavior: "auto"
+            });
+        } else d && 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 = () => {
+      const p = () => {
         d && console.debug(
           "%c[Routerino]%c route change ->",
           "color: #6b7280; font-weight: bold",
           "",
           window.location.pathname
-        ), b(window.location.href);
+        ), W(window.location.href);
       };
-      return window.addEventListener("popstate", a), () => {
-        document.removeEventListener("click", o), window.removeEventListener("popstate", a);
+      return window.addEventListener("popstate", p), () => {
+        document.removeEventListener("click", o), window.removeEventListener("popstate", p);
       };
-    }, [S]);
-    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;
+    }, [x, k]);
+    let a = window?.location?.pathname ?? "/";
+    (a === "/index.html" || a === "") && (a = "/");
+    const P = i.find((o) => o.path === a), E = i.find(
+      (o) => `${o.path}/` === a || o.path === `${a}/`
+    ), C = i.find((o) => {
+      const p = o.path.endsWith("/") ? o.path.slice(0, -1) : o.path, g = a.endsWith("/") ? a.slice(0, -1) : a, r = p.split("/").filter(Boolean), w = g.split("/").filter(Boolean);
+      return r.length !== w.length ? !1 : r.every((y, T) => y.startsWith(":") ? !0 : y === w[T]);
+    }), s = P ?? E ?? C;
     if (d && console.debug(
       "%c[Routerino]%c Route matching:",
       "color: #6b7280; font-weight: bold",
       "",
-      { match: s, exactMatch: k, addSlashMatch: P, paramsMatch: W }
+      { match: s, exactMatch: P, addSlashMatch: E, paramsMatch: C }
     ), !s)
       return d && (console.group(
         "%c[Routerino]%c 404 - No matching route",
@@ -329,71 +478,71 @@ function Q({
         "%c[Routerino]%c Requested path:",
         "color: #f59e0b; font-weight: bold",
         "",
-        c
+        a
       ), console.warn(
         "%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) {
+        i.map((o) => o.path)
+      ), console.groupEnd()), document.title = S, u && h({ name: "prerender-status-code", content: "404" }), e;
+    if (u) {
       const o = document.querySelector(
         'meta[name="prerender-status-code"]'
       );
       o && o.remove();
-      const a = document.querySelector(
+      const p = document.querySelector(
         'meta[name="prerender-header"]'
       );
-      a && a.remove();
+      p && p.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}`;
-    if (s.title) {
-      const o = `${s.title}${E}${$}`;
-      document.title = o, u({
-        tag: "link",
-        rel: "canonical",
-        href: U
-      }), s.tags?.find(({ property: a }) => a === "og:title") || u({
+    const B = l && !a.endsWith("/") && a !== "/", D = !l && a.endsWith("/") && a !== "/", z = B ? `${a}/` : D ? a.slice(0, -1) : a, b = `${F ?? window?.location?.origin ?? ""}${z}`;
+    if (s.title || v) {
+      const o = [s.title, v].filter(Boolean).join($);
+      document.title = o, s.tags?.find(({ property: p }) => p === "og:title") || h({
         property: "og:title",
         content: o
-      }), s.tags?.find(({ property: a }) => a === "og:url") || u({
-        property: "og:url",
-        content: U
       });
     }
-    if (s.description && (u({ name: "description", content: s.description }), s.tags?.find(({ property: o }) => o === "og:description") || u({
+    if (h({
+      tag: "link",
+      rel: "canonical",
+      href: b
+    }), s.tags?.find(({ property: o }) => o === "og:url") || h({
+      property: "og:url",
+      content: b
+    }), s.description && (h({ name: "description", content: s.description }), s.tags?.find(({ property: o }) => o === "og:description") || h({
       property: "og:description",
       content: s.description
-    })), (v || s.imageUrl) && u({
+    })), (A || s.imageUrl) && h({
       property: "og:image",
-      content: s.imageUrl ?? v
-    }), s.tags?.find(({ property: o }) => o === "twitter:card") || u({
+      content: s.imageUrl ?? A
+    }), s.tags?.find(({ property: o }) => o === "twitter:card") || h({
       name: "twitter:card",
       content: "summary_large_image"
-    }), x && u({
+    }), j && h({
       tag: "link",
       rel: "apple-touch-icon",
-      href: x
-    }), p && (j || A) && (u({ name: "prerender-status-code", content: "301" }), u({
+      href: j
+    }), u && (B || D) && (h({ name: "prerender-status-code", content: "301" }), h({
       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({
+      content: `Location: ${b}`
+    })), s.tags && s.tags.length ? (s.tags.find(({ property: o }) => o === "og:type") || h({ property: "og:type", content: "website" }), s.tags.forEach((o) => h(o))) : h({ property: "og:type", content: "website" }), s.element) {
+      const o = re({
         routePattern: s.path,
-        currentRoute: c
-      }), a = {
-        currentRoute: c,
+        currentRoute: a
+      }), p = {
+        currentRoute: a,
         params: o,
         routePattern: s.path,
-        updateHeadTag: u
+        updateHeadTag: h
       };
-      return /* @__PURE__ */ g(z.Provider, { value: a, children: /* @__PURE__ */ g(
-        M,
+      return /* @__PURE__ */ m(N.Provider, { value: p, children: /* @__PURE__ */ m(
+        G,
         {
           fallback: n,
-          errorTitleString: T,
-          usePrerenderTags: p,
-          routePath: c,
+          errorTitleString: U,
+          usePrerenderTags: u,
+          routePath: a,
           debug: d,
           children: s.element
         }
@@ -403,9 +552,9 @@ function Q({
       "%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) {
+      a
+    ), document.title = S, u && h({ name: "prerender-status-code", content: "404" }), e;
+  } catch (x) {
     return d && (console.group(
       "%c[Routerino]%c Fatal Error",
       "color: #ff6b6b; font-weight: bold",
@@ -418,23 +567,23 @@ function Q({
       "%c[Routerino]%c Error:",
       "color: #ff6b6b; font-weight: bold",
       "",
-      S
+      x
     ), 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()), u && h({ name: "prerender-status-code", content: "500" }), document.title = U, n;
   }
 }
-const X = t.exact({
-  path: (r, e, i) => {
-    const n = r[e];
+const ce = t.exact({
+  path: (i, e, c) => {
+    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 \`${c}\`, 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 \`${c}\`, 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 \`${c}\`. Route paths must start with a forward slash (/).`
     );
   },
   element: t.element.isRequired,
@@ -443,8 +592,8 @@ const X = t.exact({
   tags: t.arrayOf(t.object),
   imageUrl: t.string
 });
-Q.propTypes = {
-  routes: t.arrayOf(X),
+ie.propTypes = {
+  routes: t.arrayOf(ce),
   title: t.string,
   separator: t.string,
   notFoundTemplate: t.element,
@@ -453,29 +602,30 @@ Q.propTypes = {
   errorTitle: t.string,
   useTrailingSlash: t.bool,
   usePrerenderTags: t.bool,
-  baseUrl: (r, e, i) => {
-    const n = r[e];
+  baseUrl: (i, e, c) => {
+    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 \`${c}\`, 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 \`${c}\`. The baseUrl should not end with a slash. Got: "${n}"`
         );
     }
     return null;
   },
   imageUrl: t.string,
   touchIconUrl: t.string,
-  debug: t.bool
+  debug: t.bool,
+  ignorePatterns: t.arrayOf(t.string)
 };
 export {
-  M as ErrorBoundary,
-  B as Image,
-  Q as Routerino,
-  Q as default,
-  u as updateHeadTag,
-  oe as useRouterino
+  G as ErrorBoundary,
+  oe as Image,
+  ie as Routerino,
+  ie as default,
+  h as updateHeadTag,
+  ue as useRouterino
 };