routerino 2.3.2 → 2.3.4

package/dist/routerino.js

@@ -1,54 +1,162 @@
-import { jsx as g, jsxs as W, Fragment as A } from "react/jsx-runtime";
-import { createContext as O, Component as j, useContext as M, useState as _, useEffect as z } from "react";
+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 F = O(null);
-function Y() {
-  const i = M(F);
-  if (!i)
+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"));
+}
+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 B(r) {
+  const {
+    src: e = "",
+    alt: i = "",
+    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(
+      "img",
+      {
+        src: e,
+        alt: i,
+        loading: $ || "lazy",
+        decoding: E,
+        fetchPriority: v,
+        className: p,
+        style: L,
+        ...x
+      }
+    );
+  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 {
+        }
+      }
+      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: i,
+        srcSet: A,
+        sizes: l,
+        loading: W,
+        decoding: E,
+        fetchPriority: s,
+        className: p,
+        style: L,
+        ...x
+      }
+    )
+  ] });
+}
+B.propTypes = {
+  /** Image source URL (required) */
+  src: t.string.isRequired,
+  /** Alt text for accessibility (required) */
+  alt: t.string.isRequired,
+  /** Override lazy loading for hero/LCP images */
+  priority: t.bool,
+  /** Responsive widths to generate (defaults to [480, 800, 1200, 1920]) */
+  widths: t.arrayOf(t.number),
+  /** Responsive sizes attribute (has smart default) */
+  sizes: t.string,
+  /** CSS classes (Tailwind/DaisyUI ready) */
+  className: t.string,
+  /** Inline styles */
+  style: t.object,
+  /** Loading behavior (auto-set based on priority) */
+  loading: t.oneOf(["lazy", "eager"]),
+  /** Decode timing */
+  decoding: t.oneOf(["sync", "async", "auto"]),
+  /** Fetch priority (auto-set based on priority) */
+  fetchpriority: t.oneOf(["high", "low", "auto"])
+};
+const z = _(null);
+function oe() {
+  const r = G(z);
+  if (!r)
     throw new Error(
       "useRouterino must be used within a Routerino router. Make sure your component is rendered inside a <Routerino> component."
     );
-  return i;
+  return r;
 }
-function l({ tag: i = "meta", soft: c = !1, ...a }) {
-  const o = Object.keys(a);
-  if (o.length < 1)
+function u({ tag: r = "meta", soft: e = !1, ...i }) {
+  const n = Object.keys(i);
+  if (n.length < 1)
     return console.error(
-      `[Routerino] updateHeadTag() received no attributes to set for ${i} tag`
+      `[Routerino] updateHeadTag() received no attributes to set for ${r} tag`
     );
   let h = null;
-  for (let f = 0; f < o.length && (o[f] !== "content" && (h = document.querySelector(
-    `${i}[${o[f]}='${a[o[f]]}']`
-  )), !h); f++)
+  for (let l = 0; l < n.length && (n[l] !== "content" && (h = document.querySelector(
+    `${r}[${n[l]}='${i[n[l]]}']`
+  )), !h); l++)
     ;
-  h && c || (h || (h = document.createElement(i)), o.forEach((f) => h.setAttribute(f, a[f])), document.querySelector("head").appendChild(h));
+  h && e || (h || (h = document.createElement(r)), n.forEach((l) => h.setAttribute(l, i[l])), document.querySelector("head").appendChild(h));
 }
-function G({ routePattern: i, currentRoute: c }) {
-  let a = {}, o = i.split("/"), h = c.split("/");
-  return o.forEach((f, m) => {
-    f.startsWith(":") && (a[f.slice(1)] = h[m]);
-  }), a;
+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;
 }
-class H extends j {
-  constructor(c) {
-    super(c), this.state = { hasError: !1 };
+class M extends V {
+  constructor(e) {
+    super(e), this.state = { hasError: !1 };
   }
   static getDerivedStateFromError() {
     return { hasError: !0 };
   }
-  componentDidCatch(c, a) {
+  componentDidCatch(e, i) {
     this.props.debug && (console.group(
       "%c[Routerino]%c Error Boundary Caught an Error",
       "color: #ff6b6b; font-weight: bold",
       "",
-      c
-    ), console.error("[Routerino] Component Stack:", a.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 && l({ name: "prerender-status-code", content: "500" });
+      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" });
   }
   render() {
     return this.state.hasError ? this.props.fallback : this.props.children;
   }
 }
-H.propTypes = {
+M.propTypes = {
   /** The child components to render when there's no error */
   children: t.node,
   /** The fallback UI to display when an error is caught */
@@ -62,8 +170,8 @@ H.propTypes = {
   /** Whether to log debug messages to console (optional) */
   debug: t.bool
 };
-function K({
-  routes: i = [
+function Q({
+  routes: r = [
     {
       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." }),
@@ -72,148 +180,148 @@ function K({
       tags: [{ property: "og:locale", content: "en_US" }]
     }
   ],
-  notFoundTemplate: c = /* @__PURE__ */ W(A, { children: [
+  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" }) })
   ] }),
-  notFoundTitle: a = "Page not found [404]",
-  errorTemplate: o = /* @__PURE__ */ W(A, { children: [
+  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" }) })
   ] }),
   errorTitle: h = "Page error [500]",
-  useTrailingSlash: f = !0,
-  usePrerenderTags: m = !1,
-  baseUrl: I = null,
-  title: R = "",
-  separator: y = " | ",
+  useTrailingSlash: l = !0,
+  usePrerenderTags: p = !1,
+  baseUrl: L = null,
+  title: $ = "",
+  separator: E = " | ",
   imageUrl: v = null,
-  touchIconUrl: T = null,
-  debug: s = !1
+  touchIconUrl: x = null,
+  debug: d = !1
 }) {
-  const k = `${h}${y}${R}`, x = `${a}${y}${R}`;
+  const T = `${h}${E}${$}`, D = `${i}${E}${$}`;
   try {
-    if (s) {
-      const e = i.map((w) => w.path), u = e.filter(
-        (w, d) => e.indexOf(w) !== d
+    if (d) {
+      const o = r.map((w) => w.path), a = o.filter(
+        (w, f) => o.indexOf(w) !== f
       );
-      u.length > 0 && (console.warn(
+      a.length > 0 && (console.warn(
         "%c[Routerino]%c Duplicate route paths detected:",
         "color: #f59e0b; font-weight: bold",
         "",
-        [...new Set(u)]
+        [...new Set(a)]
       ), console.warn(
         "%c[Routerino]%c The first matching route will be used",
         "color: #f59e0b; font-weight: bold",
         ""
       ));
     }
-    const [$, P] = _(window?.location?.href ?? "/");
-    z(() => {
+    const [S, b] = I(window?.location?.href ?? "/");
+    O(() => {
       if (typeof window > "u" || typeof document > "u")
         return;
-      const e = (w) => {
-        s && console.debug(
+      const o = (w) => {
+        d && console.debug(
           "%c[Routerino]%c click occurred",
           "color: #6b7280; font-weight: bold",
           ""
         );
-        let d = w.target;
-        for (; d.tagName !== "A" && d.parentElement; )
-          d = d.parentElement;
-        if (d.tagName !== "A") {
-          s && console.debug(
+        let f = w.target;
+        for (; f.tagName !== "A" && f.parentElement; )
+          f = f.parentElement;
+        if (f.tagName !== "A") {
+          d && console.debug(
             "%c[Routerino]%c no anchor tag found during click",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        const p = d.getAttribute("href") || d.href;
-        if (!p) {
-          s && console.debug(
+        const m = f.getAttribute("href") || f.href;
+        if (!m) {
+          d && console.debug(
             "%c[Routerino]%c anchor tag has no href",
             "color: #6b7280; font-weight: bold",
             ""
           );
           return;
         }
-        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(p)) {
-          s && console.debug(
+        if (!/^(https?:\/\/|\/|\.\/|\.\.\/|[^:]+$)/i.test(m)) {
+          d && console.debug(
             "%c[Routerino]%c skipping non-http URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            p
+            m
           );
           return;
         }
-        s && console.debug(
+        d && console.debug(
           "%c[Routerino]%c click target href:",
           "color: #6b7280; font-weight: bold",
           "",
-          p
+          m
         );
-        let b;
+        let R;
         try {
-          b = new URL(p, window.location.href);
-        } catch (S) {
-          s && console.debug(
+          R = new URL(m, window.location.href);
+        } catch (C) {
+          d && console.debug(
             "%c[Routerino]%c Invalid URL:",
             "color: #6b7280; font-weight: bold",
             "",
-            p,
-            S
+            m,
+            C
           );
           return;
         }
-        s && console.debug(
+        d && console.debug(
           "%c[Routerino]%c targetUrl:",
           "color: #6b7280; font-weight: bold",
           "",
-          b,
+          R,
           "current:",
           window.location
-        ), b && window.location.origin === b.origin ? (s && console.debug(
+        ), 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(), d.href !== window.location.href && (P(d.href), window.history.pushState({}, "", d.href)), window.scrollTo({
+        ), w.preventDefault(), f.href !== window.location.href && (b(f.href), window.history.pushState({}, "", f.href)), window.scrollTo({
           top: 0,
           behavior: "auto"
-        })) : s && console.debug(
+        })) : 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", e);
-      const u = () => {
-        s && console.debug(
+      document.addEventListener("click", o);
+      const a = () => {
+        d && console.debug(
           "%c[Routerino]%c route change ->",
           "color: #6b7280; font-weight: bold",
           "",
           window.location.pathname
-        ), P(window.location.href);
+        ), b(window.location.href);
       };
-      return window.addEventListener("popstate", u), () => {
-        document.removeEventListener("click", e), window.removeEventListener("popstate", u);
+      return window.addEventListener("popstate", a), () => {
+        document.removeEventListener("click", o), window.removeEventListener("popstate", a);
       };
-    }, [$]);
-    let r = window?.location?.pathname ?? "/";
-    (r === "/index.html" || r === "") && (r = "/");
-    const U = i.find((e) => e.path === r), C = i.find(
-      (e) => `${e.path}/` === r || e.path === `${r}/`
-    ), L = i.find((e) => {
-      const u = e.path.endsWith("/") ? e.path.slice(0, -1) : e.path, w = r.endsWith("/") ? r.slice(0, -1) : r, d = u.split("/").filter(Boolean), p = w.split("/").filter(Boolean);
-      return d.length !== p.length ? !1 : d.every((b, S) => b.startsWith(":") ? !0 : b === p[S]);
-    }), n = U ?? C ?? L;
-    if (s && console.debug(
+    }, [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;
+    if (d && console.debug(
       "%c[Routerino]%c Route matching:",
       "color: #6b7280; font-weight: bold",
       "",
-      { match: n, exactMatch: U, addSlashMatch: C, paramsMatch: L }
-    ), !n)
-      return s && (console.group(
+      { match: s, exactMatch: k, addSlashMatch: P, paramsMatch: W }
+    ), !s)
+      return d && (console.group(
         "%c[Routerino]%c 404 - No matching route",
         "color: #f59e0b; font-weight: bold",
         ""
@@ -221,84 +329,84 @@ function K({
         "%c[Routerino]%c Requested path:",
         "color: #f59e0b; font-weight: bold",
         "",
-        r
+        c
       ), console.warn(
         "%c[Routerino]%c Available routes:",
         "color: #f59e0b; font-weight: bold",
         "",
-        i.map((e) => e.path)
-      ), console.groupEnd()), document.title = x, m && l({ name: "prerender-status-code", content: "404" }), c;
-    if (m) {
-      const e = document.querySelector(
+        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(
         'meta[name="prerender-status-code"]'
       );
-      e && e.remove();
-      const u = document.querySelector(
+      o && o.remove();
+      const a = document.querySelector(
         'meta[name="prerender-header"]'
       );
-      u && u.remove();
+      a && a.remove();
     }
-    const q = f && !r.endsWith("/") && r !== "/", B = !f && r.endsWith("/") && r !== "/", D = q ? `${r}/` : B ? r.slice(0, -1) : r, E = `${I ?? window?.location?.origin ?? ""}${D}`;
-    if (n.title) {
-      const e = `${n.title}${y}${R}`;
-      document.title = e, l({
+    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: E
-      }), n.tags?.find(({ property: u }) => u === "og:title") || l({
+        href: U
+      }), s.tags?.find(({ property: a }) => a === "og:title") || u({
         property: "og:title",
-        content: e
-      }), n.tags?.find(({ property: u }) => u === "og:url") || l({
+        content: o
+      }), s.tags?.find(({ property: a }) => a === "og:url") || u({
         property: "og:url",
-        content: E
+        content: U
       });
     }
-    if (n.description && (l({ name: "description", content: n.description }), n.tags?.find(({ property: e }) => e === "og:description") || l({
+    if (s.description && (u({ name: "description", content: s.description }), s.tags?.find(({ property: o }) => o === "og:description") || u({
       property: "og:description",
-      content: n.description
-    })), (v || n.imageUrl) && l({
+      content: s.description
+    })), (v || s.imageUrl) && u({
       property: "og:image",
-      content: n.imageUrl ?? v
-    }), n.tags?.find(({ property: e }) => e === "twitter:card") || l({
+      content: s.imageUrl ?? v
+    }), s.tags?.find(({ property: o }) => o === "twitter:card") || u({
       name: "twitter:card",
       content: "summary_large_image"
-    }), T && l({
+    }), x && u({
       tag: "link",
       rel: "apple-touch-icon",
-      href: T
-    }), m && (q || B) && (l({ name: "prerender-status-code", content: "301" }), l({
+      href: x
+    }), p && (j || A) && (u({ name: "prerender-status-code", content: "301" }), u({
       name: "prerender-header",
-      content: `Location: ${E}`
-    })), n.tags && n.tags.length ? (n.tags.find(({ property: e }) => e === "og:type") || l({ property: "og:type", content: "website" }), n.tags.forEach((e) => l(e))) : l({ property: "og:type", content: "website" }), n.element) {
-      const e = G({
-        routePattern: n.path,
-        currentRoute: r
-      }), u = {
-        currentRoute: r,
-        params: e,
-        routePattern: n.path,
-        updateHeadTag: l
+      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({
+        routePattern: s.path,
+        currentRoute: c
+      }), a = {
+        currentRoute: c,
+        params: o,
+        routePattern: s.path,
+        updateHeadTag: u
       };
-      return /* @__PURE__ */ g(F.Provider, { value: u, children: /* @__PURE__ */ g(
-        H,
+      return /* @__PURE__ */ g(z.Provider, { value: a, children: /* @__PURE__ */ g(
+        M,
         {
-          fallback: o,
-          errorTitleString: k,
-          usePrerenderTags: m,
-          routePath: r,
-          debug: s,
-          children: n.element
+          fallback: n,
+          errorTitleString: T,
+          usePrerenderTags: p,
+          routePath: c,
+          debug: d,
+          children: s.element
         }
       ) });
     }
-    return s && console.error(
+    return d && console.error(
       "%c[Routerino]%c No route found for",
       "color: #ff6b6b; font-weight: bold",
       "",
-      r
-    ), document.title = x, m && l({ name: "prerender-status-code", content: "404" }), c;
-  } catch ($) {
-    return s && (console.group(
+      c
+    ), document.title = D, p && u({ name: "prerender-status-code", content: "404" }), e;
+  } catch (S) {
+    return d && (console.group(
       "%c[Routerino]%c Fatal Error",
       "color: #ff6b6b; font-weight: bold",
       ""
@@ -310,23 +418,23 @@ function K({
       "%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 && l({ name: "prerender-status-code", content: "500" }), document.title = k, o;
+    ), console.groupEnd()), p && u({ name: "prerender-status-code", content: "500" }), document.title = T, n;
   }
 }
-const J = t.exact({
-  path: (i, c, a) => {
-    const o = i[c];
-    return o == null ? new Error(
-      `The prop \`${c}\` is marked as required in \`${a}\`, but its value is \`${o}\`.`
-    ) : typeof o != "string" ? new Error(
-      `Invalid prop \`${c}\` of type \`${typeof o}\` supplied to \`${a}\`, expected \`string\`.`
-    ) : o.startsWith("/") ? null : new Error(
-      `Invalid prop \`${c}\` value \`${o}\` supplied to \`${a}\`. Route paths must start with a forward slash (/).`
+const X = t.exact({
+  path: (r, e, i) => {
+    const n = r[e];
+    return n == null ? new Error(
+      `The prop \`${e}\` is marked as required in \`${i}\`, but its value is \`${n}\`.`
+    ) : typeof n != "string" ? new Error(
+      `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${i}\`, expected \`string\`.`
+    ) : n.startsWith("/") ? null : new Error(
+      `Invalid prop \`${e}\` value \`${n}\` supplied to \`${i}\`. Route paths must start with a forward slash (/).`
     );
   },
   element: t.element.isRequired,
@@ -335,8 +443,8 @@ const J = t.exact({
   tags: t.arrayOf(t.object),
   imageUrl: t.string
 });
-K.propTypes = {
-  routes: t.arrayOf(J),
+Q.propTypes = {
+  routes: t.arrayOf(X),
   title: t.string,
   separator: t.string,
   notFoundTemplate: t.element,
@@ -345,16 +453,16 @@ K.propTypes = {
   errorTitle: t.string,
   useTrailingSlash: t.bool,
   usePrerenderTags: t.bool,
-  baseUrl: (i, c, a) => {
-    const o = i[c];
-    if (o != null) {
-      if (typeof o != "string")
+  baseUrl: (r, e, i) => {
+    const n = r[e];
+    if (n != null) {
+      if (typeof n != "string")
         return new Error(
-          `Invalid prop \`${c}\` of type \`${typeof o}\` supplied to \`${a}\`, expected \`string\`.`
+          `Invalid prop \`${e}\` of type \`${typeof n}\` supplied to \`${i}\`, expected \`string\`.`
         );
-      if (o.endsWith("/"))
+      if (n.endsWith("/"))
         return new Error(
-          `Invalid prop \`${c}\` supplied to \`${a}\`. The baseUrl should not end with a slash. Got: "${o}"`
+          `Invalid prop \`${e}\` supplied to \`${i}\`. The baseUrl should not end with a slash. Got: "${n}"`
         );
     }
     return null;
@@ -364,9 +472,10 @@ K.propTypes = {
   debug: t.bool
 };
 export {
-  H as ErrorBoundary,
-  K as Routerino,
-  K as default,
-  l as updateHeadTag,
-  Y as useRouterino
+  M as ErrorBoundary,
+  B as Image,
+  Q as Routerino,
+  Q as default,
+  u as updateHeadTag,
+  oe as useRouterino
 };

package/dist/routerino.umd.cjs

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

package/package.json

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

package/routerino-image.jsx

@@ -70,6 +70,28 @@ export function Image(props) {
     ...rest
   } = props || {};
 
+  // In development, skip responsive images entirely to avoid 404s
+  const isDevelopment =
+    typeof window !== "undefined" &&
+    (window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1");
+
+  if (isDevelopment) {
+    return (
+      <img
+        src={src}
+        alt={alt}
+        loading={explicitLoading || "lazy"}
+        decoding={decoding}
+        fetchPriority={explicitFetchPriority}
+        className={className}
+        style={style}
+        {...rest}
+      />
+    );
+  }
+
+  // Production mode: full responsive image functionality
   // Detect image dimensions to filter applicable widths
   const [imageDimensions, setImageDimensions] = useState(null);
 
@@ -94,6 +116,43 @@ export function Image(props) {
     ? widths.filter((width) => imageDimensions.width >= width)
     : widths; // Fallback to all widths during loading
 
+  // Check which responsive variants actually exist at runtime
+  const [availableWidths, setAvailableWidths] = useState(applicableWidths);
+
+  useEffect(() => {
+    const checkAvailableVariants = async () => {
+      if (typeof window === "undefined") {
+        setAvailableWidths(applicableWidths);
+        return;
+      }
+
+      const base = src.replace(/\.(jpe?g|png|webp)$/i, "");
+      const ext = src.match(/\.(jpe?g|png|webp)$/i)?.[0] || ".jpg";
+
+      const existingWidths = [];
+      for (const width of applicableWidths) {
+        const variantUrl = `${base}-${width}w${ext}`;
+        try {
+          const response = await fetch(variantUrl, { method: "HEAD" });
+          if (response.ok) {
+            existingWidths.push(width);
+          }
+        } catch {
+          // Variant doesn't exist, skip it
+        }
+      }
+
+      // Always include at least the smallest width if no variants exist
+      if (existingWidths.length === 0 && applicableWidths.length > 0) {
+        existingWidths.push(Math.min(...applicableWidths));
+      }
+
+      setAvailableWidths(existingWidths);
+    };
+
+    checkAvailableVariants();
+  }, [src, applicableWidths]);
+
   // Smart priority detection if not explicitly set
   const autoPriority = priority ?? shouldUsePriority(src, className);
 
@@ -102,9 +161,9 @@ export function Image(props) {
   const fetchPriority =
     explicitFetchPriority || (autoPriority ? "high" : undefined);
 
-  // Generate srcsets for different formats using applicable widths only
-  const srcSetWebP = generateSrcSet(src, applicableWidths, "webp");
-  const srcSetOriginal = generateSrcSet(src, applicableWidths);
+  // Generate srcsets for different formats using available widths only
+  const srcSetWebP = generateSrcSet(src, availableWidths, "webp");
+  const srcSetOriginal = generateSrcSet(src, availableWidths);
 
   // For SSG: This will be processed by routerino-forge.js to include LQIP
   // The data-routerino-image attribute signals to the forge to process this