@dotvoid/stacked-router 1.0.0 → 1.1.2

package/README.md

@@ -60,6 +60,48 @@ Named layouts are named `_layout.name.tsx`.
 
 Layouts support defining named slots. This allows view components to render content which is automatically rendered inside the layout instead. This allow for styling of for example headers and footers in the layout while still allowing the views to have the logic and decide what should be rendered these slots.
 
+### Responsive design
+
+Responsive design needs extra care when working with stacked views as you need to account both for screen width and individual view widths. Stacked views already set style and class names to support container queries with vanilla CSS and Tailwind CSS. This allows you to create responsive layouts that adapt to the width of the view.
+
+Unless overridden, each individual view in the stack defines a container called `view`. Both as vanilla CSS styles and the tailwind class name `@container/view`.
+
+**Usage with vanilla CSS**
+
+```css
+.card {
+  font-size: 0.875rem;
+}
+
+@container view (min-width: 1024px) {
+  .card {
+    font-size: 1.125rem;
+  }
+}
+```
+
+```tsx
+return (
+  <div className='card'>
+    A card
+  </div>
+)
+```
+
+MDN on container queries at [CSS Container Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries)
+
+**Usage with Tailwind CSS**
+
+```tsx
+return (
+  <div className='text-sm @lg/view:text-lg'>
+    A card
+  </div>
+)
+```
+
+Tailwind CSS on container queries at [Responsive Design](https://tailwindcss.com/docs/responsive-design)
+
 ### Error Boundaries
 
 Stacked router includes automatic error boundaries around each view that catch rendering errors and display contextual error components.
@@ -107,7 +149,7 @@ export function App() {
 
 **_layout.tsx**
 
-Layouts are optional and are automatically wrapped around all views at the same level or below it in the file tree. This layout handles active state and width css using tailwind.
+Layouts are optional and are automatically wrapped around all views at the same level or below it in the file tree. This layout handles active state and view width (vw percentage) css using tailwind.
 
 ```tsx
 import { type PropsWithChildren } from 'react'
@@ -118,7 +160,7 @@ import { cn } from '@/lib/cn'
 import View from '@/components/View'
 
 export default function Layout({ children }: PropsWithChildren) {
-  const { width, isActive } = useView()
+  const { vw, isActive } = useView()
   const stackedView = cva('h-full grow transition-all group/view', {
     variants: {
       isActive: {
@@ -129,7 +171,7 @@ export default function Layout({ children }: PropsWithChildren) {
   })
 
   return (
-    <StackedView className={cn(stackedView({ isActive }))} style={{ flexBasis: `${width}vw` }}>
+    <StackedView className={cn(stackedView({ isActive }))} style={{ flexBasis: `${vw}vw` }}>
       <View.Root>
         {children}
       </View.Root>

package/dist/components/StackedView.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, PropsWithChildren } from 'react';
-export declare function StackedView({ children, style, className }: PropsWithChildren & {
+export declare function StackedView({ children, style: userlandStyle, className: userlandClassName }: PropsWithChildren & {
     className?: string;
     style?: CSSProperties;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/components/StackedView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StackedView.d.ts","sourceRoot":"","sources":["../../lib/components/StackedView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAAqB,MAAM,OAAO,CAAA;AAKrF,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAU,EAAE,SAAS,EAAE,EAAE,iBAAiB,GAAG;IACnF,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,2CAwBA"}
+{"version":3,"file":"StackedView.d.ts","sourceRoot":"","sources":["../../lib/components/StackedView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,aAAa,EAAE,KAAK,iBAAiB,EAA8B,MAAM,OAAO,CAAA;AAK9F,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAkB,EAAE,SAAS,EAAE,iBAAiB,EAAE,EAAE,iBAAiB,GAAG;IACrH,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,2CAkDA"}

package/dist/contexts/ViewContext.d.ts

@@ -2,7 +2,7 @@ import { ViewState } from '../lib/history';
 export interface ViewContextType {
     viewId: string;
     isActive: boolean;
-    width: number;
+    vw: number;
     layout?: string;
     params?: Record<string, string>;
     queryParams?: Record<string, string | number | boolean>;

package/dist/contexts/ViewContext.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewContext.d.ts","sourceRoot":"","sources":["../../lib/contexts/ViewContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACvD,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClH,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACjD,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5G,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,WAAW,0CAUtB,CAAA"}
+{"version":3,"file":"ViewContext.d.ts","sourceRoot":"","sources":["../../lib/contexts/ViewContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE/C,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACvD,cAAc,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAClH,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAA;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACjD,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,EAAE,UAAU,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;IAC5G,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,KAAK,EAAE,SAAS,CAAA;CACjB;AAED,eAAO,MAAM,WAAW,0CAUtB,CAAA"}

package/dist/contexts/ViewProvider.d.ts

@@ -1,7 +1,7 @@
 import { PropsWithChildren } from 'react';
-export declare function ViewProvider({ id: viewId, width, layout, children, params, queryParams, props }: PropsWithChildren & {
+export declare function ViewProvider({ id: viewId, vw, layout, children, params, queryParams, props }: PropsWithChildren & {
     id: string;
-    width: number;
+    vw: number;
     layout?: string;
     params?: Record<string, string>;
     queryParams?: Record<string, string | number | boolean>;

package/dist/contexts/ViewProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewProvider.d.ts","sourceRoot":"","sources":["../../lib/contexts/ViewProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAK9D,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EAAE,MAAM,EACV,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,EACN,WAAW,EACX,KAAK,EACN,EAAE,iBAAiB,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;CAClD,2CAiEA"}
+{"version":3,"file":"ViewProvider.d.ts","sourceRoot":"","sources":["../../lib/contexts/ViewProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAuB,MAAM,OAAO,CAAA;AAK9D,wBAAgB,YAAY,CAAC,EAC3B,EAAE,EAAE,MAAM,EACV,EAAE,EACF,MAAM,EACN,QAAQ,EACR,MAAM,EACN,WAAW,EACX,KAAK,EACN,EAAE,iBAAiB,GAAG;IACrB,EAAE,EAAE,MAAM,CAAA;IACV,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC,CAAA;CAClD,2CAiEA"}

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import Oe, { createContext as X, useMemo as j, useState as C, useEffect as P, useContext as I, useRef as le, useCallback as ae, Component as Ve } from "react";
+import Oe, { createContext as X, useMemo as P, useState as C, useEffect as _, useContext as I, useRef as le, useCallback as ae, Component as Ve } from "react";
 var W = { exports: {} }, V = {};
 /**
  * @license React
@@ -15,16 +15,16 @@ function Ae() {
   ie = 1;
   var t = Symbol.for("react.transitional.element"), e = Symbol.for("react.fragment");
   function n(r, o, s) {
-    var i = null;
-    if (s !== void 0 && (i = "" + s), o.key !== void 0 && (i = "" + o.key), "key" in o) {
+    var c = null;
+    if (s !== void 0 && (c = "" + s), o.key !== void 0 && (c = "" + o.key), "key" in o) {
       s = {};
-      for (var c in o)
-        c !== "key" && (s[c] = o[c]);
+      for (var i in o)
+        i !== "key" && (s[i] = o[i]);
     } else s = o;
     return o = s.ref, {
       $$typeof: t,
       type: r,
-      key: i,
+      key: c,
       ref: o !== void 0 ? o : null,
       props: s
     };
@@ -50,7 +50,7 @@ function Ce() {
         return a.$$typeof === _e ? null : a.displayName || a.name || null;
       if (typeof a == "string") return a;
       switch (a) {
-        case y:
+        case g:
           return "Fragment";
         case S:
           return "Profiler";
@@ -108,7 +108,7 @@ function Ce() {
       }
     }
     function r(a) {
-      if (a === y) return "<>";
+      if (a === g) return "<>";
       if (typeof a == "object" && a !== null && a.$$typeof === Z)
         return "<...>";
       try {
@@ -125,14 +125,14 @@ function Ce() {
     function s() {
       return Error("react-stack-top-frame");
     }
-    function i(a) {
+    function c(a) {
       if (ee.call(a, "key")) {
         var d = Object.getOwnPropertyDescriptor(a, "key").get;
         if (d && d.isReactWarning) return !1;
       }
       return a.key !== void 0;
     }
-    function c(a, d) {
+    function i(a, d) {
       function m() {
         te || (te = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
@@ -197,10 +197,10 @@ function Ce() {
         else w(R);
       if (ee.call(d, "key")) {
         R = t(a);
-        var _ = Object.keys(d).filter(function(Te) {
+        var j = Object.keys(d).filter(function(Te) {
           return Te !== "key";
         });
-        E = 0 < _.length ? "{key: someKey, " + _.join(": ..., ") + ": ...}" : "{key: someKey}", se[R + E] || (_ = 0 < _.length ? "{" + _.join(": ..., ") + ": ...}" : "{}", console.error(
+        E = 0 < j.length ? "{key: someKey, " + j.join(": ..., ") + ": ...}" : "{key: someKey}", se[R + E] || (j = 0 < j.length ? "{" + j.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -209,16 +209,16 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           E,
           R,
-          _,
+          j,
           R
         ), se[R + E] = !0);
       }
-      if (R = null, m !== void 0 && (n(m), R = "" + m), i(d) && (n(d.key), R = "" + d.key), "key" in d) {
+      if (R = null, m !== void 0 && (n(m), R = "" + m), c(d) && (n(d.key), R = "" + d.key), "key" in d) {
         m = {};
         for (var B in d)
           B !== "key" && (m[B] = d[B]);
       } else m = d;
-      return R && c(
+      return R && i(
         m,
         typeof a == "function" ? a.displayName || a.name || "Unknown" : a
       ), l(
@@ -235,19 +235,19 @@ React keys must be passed directly to JSX without using spread:
     function w(a) {
       typeof a == "object" && a !== null && a.$$typeof === h && a._store && (a._store.validated = 1);
     }
-    var g = Oe, h = Symbol.for("react.transitional.element"), x = Symbol.for("react.portal"), y = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), Ee = Symbol.for("react.context"), Re = Symbol.for("react.forward_ref"), be = Symbol.for("react.suspense"), Se = Symbol.for("react.suspense_list"), ke = Symbol.for("react.memo"), Z = Symbol.for("react.lazy"), Pe = Symbol.for("react.activity"), _e = Symbol.for("react.client.reference"), D = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, je = Array.isArray, M = console.createTask ? console.createTask : function() {
+    var y = Oe, h = Symbol.for("react.transitional.element"), x = Symbol.for("react.portal"), g = Symbol.for("react.fragment"), v = Symbol.for("react.strict_mode"), S = Symbol.for("react.profiler"), N = Symbol.for("react.consumer"), Ee = Symbol.for("react.context"), Re = Symbol.for("react.forward_ref"), be = Symbol.for("react.suspense"), Se = Symbol.for("react.suspense_list"), ke = Symbol.for("react.memo"), Z = Symbol.for("react.lazy"), Pe = Symbol.for("react.activity"), _e = Symbol.for("react.client.reference"), D = y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, ee = Object.prototype.hasOwnProperty, je = Array.isArray, M = console.createTask ? console.createTask : function() {
       return null;
     };
-    g = {
+    y = {
       react_stack_bottom_frame: function(a) {
         return a();
       }
     };
-    var te, re = {}, ne = g.react_stack_bottom_frame.bind(
-      g,
+    var te, re = {}, ne = y.react_stack_bottom_frame.bind(
+      y,
       s
     )(), oe = M(r(s)), se = {};
-    A.Fragment = y, A.jsx = function(a, d, m, E, k) {
+    A.Fragment = g, A.jsx = function(a, d, m, E, k) {
       var b = 1e4 > D.recentlyCreatedOwnerStacks++;
       return p(
         a,
@@ -307,9 +307,9 @@ function K(t = "", e = {}) {
     ...e
   }, o = new URLSearchParams(
     Object.entries(r).map(([u, l]) => [u, String(l)])
-  ).toString(), i = t.startsWith("http://") || t.startsWith("https://") ? n.origin + n.pathname : n.pathname, c = i.endsWith("/") && i.length > 1 ? i.slice(0, -1) : i;
+  ).toString(), c = t.startsWith("http://") || t.startsWith("https://") ? n.origin + n.pathname : n.pathname, i = c.endsWith("/") && c.length > 1 ? c.slice(0, -1) : c;
   return {
-    url: o ? `${c}?${o}` : c,
+    url: o ? `${i}?${o}` : i,
     path: n.pathname,
     queryParams: r
   };
@@ -376,7 +376,7 @@ function Ie(t, e) {
   if (o > -1) {
     const s = new URL(window.location.href);
     s.search = new URLSearchParams(
-      Object.entries(e).map(([i, c]) => [i, String(c)])
+      Object.entries(e).map(([c, i]) => [c, String(i)])
     ).toString(), r.views[o].url = s.toString(), T(s.toString(), r);
   }
 }
@@ -395,20 +395,20 @@ function De(t, e) {
   T(n.at(-1)?.url ?? "", r);
 }
 function Me(t, e, n, r, o, s) {
-  const i = [...o.views], c = crypto.randomUUID(), u = t.getFullPath(n), l = new URL(u, window.location.origin);
+  const c = [...o.views], i = crypto.randomUUID(), u = t.getFullPath(n), l = new URL(u, window.location.origin);
   Object.entries(r).forEach(([v, S]) => {
     l.searchParams.set(v, String(S));
   });
-  const p = l.toString(), w = t.getViewComponentByPath(l.pathname), g = w?.params || {}, h = i.find((v) => p === v.url);
+  const p = l.toString(), w = t.getViewComponentByPath(l.pathname), y = w?.params || {}, h = c.find((v) => p === v.url);
   if (s.target !== "_top" && !s.append && h?.id === o.id)
     return;
   if (!s.append) {
     if (s.target === "_top") {
       const v = h || {
-        id: c,
+        id: i,
         url: p,
         meta: w?.meta ?? void 0,
-        params: g,
+        params: y,
         queryParams: r,
         props: s.props,
         target: s?.target,
@@ -423,40 +423,40 @@ function Me(t, e, n, r, o, s) {
     if (!s.append && h) {
       T(p, {
         id: h.id,
-        views: i
+        views: c
       });
       return;
     }
   }
   if (s.append || s.target === "_void") {
-    i.push({
-      id: c,
+    c.push({
+      id: i,
       url: p,
       meta: w?.meta ?? void 0,
-      params: g,
+      params: y,
       queryParams: r,
       props: s.props,
       target: s?.target,
       layout: s?.layout
     }), H(p, {
-      id: c,
-      views: i
+      id: i,
+      views: c
     });
     return;
   }
-  const x = i.findIndex((v) => v.id === e), y = i.slice(0, x + 1);
-  y.push({
-    id: c,
+  const x = c.findIndex((v) => v.id === e), g = c.slice(0, x + 1);
+  g.push({
+    id: i,
     url: p,
     meta: w?.meta ?? void 0,
-    params: g,
+    params: y,
     queryParams: r,
     props: s.props,
     target: s?.target,
     layout: s?.layout
   }), H(p, {
-    id: c,
-    views: y
+    id: i,
+    views: g
   });
 }
 function Ye(t) {
@@ -484,7 +484,7 @@ class ze {
   }
   registerRoutes(e, n = !1) {
     e.forEach((r) => {
-      const o = [], s = r.path.replace(/\[([^\]]+)\]/g, (c, u) => (o.push(u), "([^/]+)")), i = new RegExp(`^${s}$`);
+      const o = [], s = r.path.replace(/\[([^\]]+)\]/g, (i, u) => (o.push(u), "([^/]+)")), c = new RegExp(`^${s}$`);
       if (!r.component || !(r.component instanceof Function) || r.path[0] !== "/") {
         if (n)
           throw new Error(`Invalid component for route ${r.path || "undefined path"}`);
@@ -492,10 +492,10 @@ class ze {
       }
       this.#r[r.path] = {
         component: r.component,
-        pattern: i,
+        pattern: c,
         paramKeys: o,
         originalPath: r.path,
-        layouts: r.layouts?.length ? r.layouts.map((c) => ({ component: c })) : this.#a(r.path),
+        layouts: r.layouts?.length ? r.layouts.map((i) => ({ component: i })) : this.#a(r.path),
         // Path found routes
         meta: r.meta || { breakpoints: [] }
       };
@@ -510,15 +510,15 @@ class ze {
   getViewComponentByPath(e) {
     const n = this.#n(e), r = n.length > 1 && n.at(-1) === "/" ? n.substring(0, n.length - 1) : n;
     for (const o in this.#r) {
-      const s = this.#r[o], i = r.match(s.pattern);
-      if (i) {
-        const c = Object.fromEntries(
-          s.paramKeys.map((u, l) => [u, i[l + 1]])
+      const s = this.#r[o], c = r.match(s.pattern);
+      if (c) {
+        const i = Object.fromEntries(
+          s.paramKeys.map((u, l) => [u, c[l + 1]])
         );
         return {
           Component: s.component,
           Layouts: s.layouts,
-          params: c,
+          params: i,
           meta: s.meta
         };
       }
@@ -531,9 +531,9 @@ class ze {
       return this.#t[r];
     const o = r.split("/").filter(Boolean);
     for (let s = o.length; s >= 1; s--) {
-      const i = "/" + o.slice(0, s).join("/");
-      if (this.#t[i])
-        return this.#t[i];
+      const c = "/" + o.slice(0, s).join("/");
+      if (this.#t[c])
+        return this.#t[c];
     }
     return this.#t["/"] ? this.#t["/"] : (console.log("No error component found"), null);
   }
@@ -562,56 +562,56 @@ class ze {
     const n = [], r = ["/", ...e.match(/[^/]+/g) || []];
     let o = r[0];
     for (let s = 0; s < r.length; s++) {
-      const i = [];
-      for (const c in this.#o) {
-        const [u, l] = c.split("#");
-        u === o && i.push({
+      const c = [];
+      for (const i in this.#o) {
+        const [u, l] = i.split("#");
+        u === o && c.push({
           key: l,
-          component: this.#o[c]
+          component: this.#o[i]
         });
       }
-      n.push(...i), o += r[s + 1];
+      n.push(...c), o += r[s + 1];
     }
     return n;
   }
 }
 function et({ basePath: t, config: e, external: n = [], children: r }) {
-  const o = j(() => new ze(e, t), [e, t]), [s, i] = C(U("load", o));
-  return P(() => {
-    for (const c of n ?? [])
-      import(c.url).then((u) => {
+  const o = P(() => new ze(e, t), [e, t]), [s, c] = C(U("load", o));
+  return _(() => {
+    for (const i of n ?? [])
+      import(i.url).then((u) => {
         if (!Array.isArray(u.routes))
-          throw new Error(`Invalid routes in ${c.url}`);
+          throw new Error(`Invalid routes in ${i.url}`);
         o.registerRoutes(u.routes, !0);
       }).catch((u) => {
         console.error(u.message);
       });
-  }, [n, o]), P(() => {
+  }, [n, o]), _(() => {
     t && t !== "/" && window.location.pathname === "/" && window.history.replaceState(null, "", t);
-  }, [t]), P(() => {
-    const c = () => i(U("popstate", o)), u = () => i(U("pushstate", o)), l = () => i(U("replacestate", o));
-    return $(window, "popstate", c), $(window, "pushstate", u), $(window, "replacestate", l), () => {
-      F(window, "popstate", c), F(window, "pushstate", u), F(window, "replacestate", l);
+  }, [t]), _(() => {
+    const i = () => c(U("popstate", o)), u = () => c(U("pushstate", o)), l = () => c(U("replacestate", o));
+    return $(window, "popstate", i), $(window, "pushstate", u), $(window, "replacestate", l), () => {
+      F(window, "popstate", i), F(window, "pushstate", u), F(window, "replacestate", l);
     };
   }, [o]), /* @__PURE__ */ f.jsx(fe.Provider, { value: { clientRouter: o, ...s }, children: r });
 }
 function U(t, e) {
-  const { state: n, length: r } = L(), { hash: o, host: s, hostname: i, href: c, origin: u, pathname: l, port: p, protocol: w, search: g } = window.location;
+  const { state: n, length: r } = L(), { hash: o, host: s, hostname: c, href: i, origin: u, pathname: l, port: p, protocol: w, search: y } = window.location;
   return {
     trigger: t,
     state: n,
     length: r,
     hash: o,
     host: s,
-    hostname: i,
-    href: c,
+    hostname: c,
+    href: i,
     origin: u,
     pathname: l,
     port: p,
     protocol: w,
-    search: g,
-    navigate: (h, x, y, v) => {
-      Me(e, h, x, y, n, v);
+    search: y,
+    navigate: (h, x, g, v) => {
+      Me(e, h, x, g, n, v);
     },
     close: (h) => {
       De(h, n);
@@ -651,27 +651,27 @@ function J(t, e) {
 }
 function he() {
   const { state: t, clientRouter: e } = O() || {}, n = le(void 0), r = !Be(n.current, t.views);
-  return j(() => {
-    const s = [], i = [];
-    return t.views.forEach((c) => {
-      const u = new URL(c.url, "http://dummy.base"), l = e?.getViewComponentByPath(u.pathname), p = c.params || l?.params || {}, w = c.meta || l?.meta, g = {
-        view: c,
+  return P(() => {
+    const s = [], c = [];
+    return t.views.forEach((i) => {
+      const u = new URL(i.url, "http://dummy.base"), l = e?.getViewComponentByPath(u.pathname), p = i.params || l?.params || {}, w = i.meta || l?.meta, y = {
+        view: i,
         meta: w,
         Component: l?.Component,
         Layouts: l?.Layouts,
         params: p
       };
-      c.target === "_void" ? i.push(g) : s.push(g);
+      i.target === "_void" ? c.push(y) : s.push(y);
     }), n.current = t.views, {
       viewStack: s,
-      voidViews: i
+      voidViews: c
     };
   }, [r, e]);
 }
 const me = X({
   viewId: "",
   isActive: !1,
-  width: 0,
+  vw: 0,
   queryParams: {},
   setQueryParams: () => {
   },
@@ -685,41 +685,41 @@ const me = X({
 });
 function we({
   id: t,
-  width: e,
+  vw: e,
   layout: n,
   children: r,
   params: o,
   queryParams: s,
-  props: i
+  props: c
 }) {
-  const { state: c, close: u } = O(), [l, p] = C(t === c.id), [w, g] = C(i || {});
-  return P(() => {
-    p(t === c.id);
-  }, [c.id, t]), /* @__PURE__ */ f.jsx(me.Provider, { value: {
+  const { state: i, close: u } = O(), [l, p] = C(t === i.id), [w, y] = C(c || {});
+  return _(() => {
+    p(t === i.id);
+  }, [i.id, t]), /* @__PURE__ */ f.jsx(me.Provider, { value: {
     viewId: t,
     isActive: l,
-    width: e,
+    vw: e,
     params: o,
     queryParams: s,
     props: w,
     layout: n,
-    state: c,
+    state: i,
     setProps: (h, x) => {
-      const y = x ? h || {} : { ...i, ...h };
-      for (const v in y)
-        y[v] === void 0 && delete y[v];
-      g(y), qe(t, y);
+      const g = x ? h || {} : { ...c, ...h };
+      for (const v in g)
+        g[v] === void 0 && delete g[v];
+      y(g), qe(t, g);
     },
     setQueryParams: (h, x) => {
-      const y = x !== !0 ? { ...i || {} } : {};
+      const g = x !== !0 ? { ...c || {} } : {};
       let v = !1;
       for (const S in h) {
         const N = h[S];
-        typeof N < "u" ? (y[S] = N, v = !0) : Object.prototype.hasOwnProperty.call(y, S) && (delete y[S], v = !0);
+        typeof N < "u" ? (g[S] = N, v = !0) : Object.prototype.hasOwnProperty.call(g, S) && (delete g[S], v = !0);
       }
-      (v || x === !0) && Ie(t, y);
+      (v || x === !0) && Ie(t, g);
     },
-    queryParam: (h) => i?.[h],
+    queryParam: (h) => c?.[h],
     close: () => {
       u(t);
     }
@@ -738,24 +738,24 @@ function He(t, e) {
 function Je(t, e) {
   if (e.length === 0)
     return [];
-  const r = e.map((i) => ({
-    id: i.id,
-    minVw: Ge(i, t)
+  const r = e.map((c) => ({
+    id: c.id,
+    minVw: Ge(c, t)
   })), o = r.reduce(
-    (i, c) => i + c.minVw,
+    (c, i) => c + i.minVw,
     0
   );
   if (o >= 100)
-    return r.map((i) => ({
-      id: i.id,
-      vw: i.minVw
+    return r.map((c) => ({
+      id: c.id,
+      vw: c.minVw
     }));
   const s = 100 - o;
-  return r.map((i) => {
-    const c = i.minVw / o, u = s * c;
+  return r.map((c) => {
+    const i = c.minVw / o, u = s * i;
     return {
-      id: i.id,
-      vw: Number((i.minVw + u).toFixed(0))
+      id: c.id,
+      vw: Number((c.minVw + u).toFixed(0))
       // Round to 0 decimal places
     };
   });
@@ -764,7 +764,7 @@ function Ge(t, e) {
   const r = [...t.breakpoints].sort((o, s) => s.breakpoint - o.breakpoint).find((o) => e >= o.breakpoint);
   return r ? r.minVw : 100;
 }
-function ge({ children: t }) {
+function ye({ children: t }) {
   return /* @__PURE__ */ f.jsx(f.Fragment, { children: t });
 }
 const Q = X({
@@ -772,13 +772,13 @@ const Q = X({
   },
   getSlots: () => ({})
 });
-function ye({ children: t }) {
-  const [e, n] = C({}), r = ae((s, i, c) => {
+function ge({ children: t }) {
+  const [e, n] = C({}), r = ae((s, c, i) => {
     n((u) => ({
       ...u,
       [s]: {
         ...u[s],
-        [i]: c
+        [c]: i
       }
     }));
   }, []), o = ae((s) => e[s] || {}, [e]);
@@ -791,11 +791,11 @@ function Xe({
   errorInfo: r,
   reset: o
 }) {
-  const { clientRouter: s } = O(), i = s?.getErrorComponentByPath(
+  const { clientRouter: s } = O(), c = s?.getErrorComponentByPath(
     s?.getPathFromUrl(t) ?? "/"
   );
-  return i ? /* @__PURE__ */ f.jsx(
-    i,
+  return c ? /* @__PURE__ */ f.jsx(
+    c,
     {
       error: e,
       errorCode: n ?? 0,
@@ -884,11 +884,11 @@ function tt({
   style: e = {}
 }) {
   const { viewStack: n } = he(), [r, o] = C(window.innerWidth);
-  P(() => {
+  _(() => {
     const u = () => o(window.innerWidth);
     return window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
   }, []);
-  const s = j(() => He(r, n), [r, n]), i = j(() => {
+  const s = P(() => He(r, n), [r, n]), c = P(() => {
     let u = 0, l = 0;
     for (let p = n.length - 1; p >= 0; p--)
       if (u += s[p]?.vw || 0, u > 100) {
@@ -896,15 +896,15 @@ function tt({
         break;
       }
     return n.slice(l);
-  }, [s, n]), c = j(() => {
-    const u = n.length - i.length;
-    return i.map((l, p) => s[p + u].vw);
-  }, [s, n.length, i]);
+  }, [s, n]), i = P(() => {
+    const u = n.length - c.length;
+    return c.map((l, p) => s[p + u].vw);
+  }, [s, n.length, c]);
   return /* @__PURE__ */ f.jsx(
     Ke,
     {
-      views: i,
-      widths: c,
+      views: c,
+      widths: i,
       style: e,
       className: t
     }
@@ -916,8 +916,8 @@ function Ke({
   className: n,
   style: r = {}
 }) {
-  return /* @__PURE__ */ f.jsx(ye, { children: /* @__PURE__ */ f.jsx("div", { className: n, style: r, children: t.map(({ view: o, params: s, Layouts: i, Component: c }, u) => {
-    if (!c)
+  return /* @__PURE__ */ f.jsx(ge, { children: /* @__PURE__ */ f.jsx("div", { className: n, style: r, children: t.map(({ view: o, params: s, Layouts: c, Component: i }, u) => {
+    if (!i)
       return /* @__PURE__ */ f.jsx(
         G,
         {
@@ -927,16 +927,16 @@ function Ke({
         },
         o.id
       );
-    const l = i?.length ? i.filter((p) => p.key === o.layout) : [{ component: ge }];
+    const l = c?.length ? c.filter((p) => p.key === o.layout) : [{ component: ye }];
     return /* @__PURE__ */ f.jsx(G, { viewUrl: o.url || "/", children: /* @__PURE__ */ f.jsx(
       we,
       {
         id: o.id,
-        width: e[u],
+        vw: e[u],
         params: s,
         queryParams: o.queryParams,
         props: o.props,
-        children: ve(l, c, s)
+        children: ve(l, i, s)
       },
       o.id
     ) }, o.id);
@@ -960,18 +960,18 @@ function rt({ className: t, style: e = {} }) {
   );
 }
 function Qe({ views: t, className: e, style: n = {} }) {
-  return /* @__PURE__ */ f.jsx(ye, { children: /* @__PURE__ */ f.jsx("div", { className: e, style: n, children: t.map(({ view: r, params: o, Layouts: s, Component: i }) => {
-    const c = s?.length ? s.filter((u) => u.key === r.layout) : [{ component: ge }];
+  return /* @__PURE__ */ f.jsx(ge, { children: /* @__PURE__ */ f.jsx("div", { className: e, style: n, children: t.map(({ view: r, params: o, Layouts: s, Component: c }) => {
+    const i = s?.length ? s.filter((u) => u.key === r.layout) : [{ component: ye }];
     return /* @__PURE__ */ f.jsx(G, { viewUrl: r.url || "/", children: /* @__PURE__ */ f.jsx(
       we,
       {
         id: r.id,
-        width: 0,
+        vw: 0,
         params: o,
         queryParams: r.queryParams,
         props: r.props,
         layout: r.layout,
-        children: xe(c, i, o)
+        children: xe(i, c, o)
       },
       r.id
     ) }, r.id);
@@ -990,15 +990,21 @@ function q() {
   return t;
 }
 function nt({ children: t, style: e = {}, className: n }) {
-  const { viewId: r } = q(), o = le(null);
-  return P(() => {
+  const { viewId: r } = q(), o = le(null), s = P(() => {
+    const i = { ...e };
+    return i.containerType || (i.containerType = "size"), i.containerName || (i.containerName = "view"), i;
+  }, [e]), c = P(() => {
+    let i = n ?? "";
+    return i.includes("@container") || (i += " @container/view"), i;
+  }, [n]);
+  return _(() => {
     if (!o.current)
       return;
-    const s = () => {
+    const i = () => {
       $e(r);
-    }, i = o.current;
-    return $(i, "click", s), () => F(i, "click", s);
-  }, [r, o]), /* @__PURE__ */ f.jsx("div", { ref: o, style: e, className: n, children: t });
+    }, u = o.current;
+    return $(u, "click", i), () => F(u, "click", i);
+  }, [r, o]), /* @__PURE__ */ f.jsx("div", { ref: o, style: s, className: c, children: t });
 }
 function ot({
   href: t,
@@ -1007,18 +1013,18 @@ function ot({
   className: r,
   target: o = "_self",
   onClick: s,
-  props: i,
-  layout: c
+  props: c,
+  layout: i
 }) {
-  const { navigate: u } = O(), { url: l, queryParams: p } = K(t, e), { viewId: w } = q(), g = (x) => {
+  const { navigate: u } = O(), { url: l, queryParams: p } = K(t, e), { viewId: w } = q(), y = (x) => {
     s && (s(x), x.isDefaultPrevented()) || l.startsWith("https://") || l.startsWith("http://") || o === "_blank" || x.metaKey || x.ctrlKey || (x.preventDefault(), u(w, l, p, {
       append: x.shiftKey,
       target: o,
-      props: i,
-      layout: c
+      props: c,
+      layout: i
     }));
   }, h = Ue(l) ? "noopener noreferrer" : void 0;
-  return /* @__PURE__ */ f.jsx("a", { rel: h, href: l, onClick: g, className: r, target: o, children: n });
+  return /* @__PURE__ */ f.jsx("a", { rel: h, href: l, onClick: y, className: r, target: o, children: n });
 }
 function st({ slot: t }) {
   const { viewId: e } = q(), { getSlots: n } = I(Q), r = n(e);
@@ -1026,7 +1032,7 @@ function st({ slot: t }) {
 }
 function at({ slot: t, children: e }) {
   const { viewId: n } = q(), { setSlot: r } = I(Q);
-  return P(() => (r(n, t, e), () => r(n, t, null)), [n, t, e, r]), null;
+  return _(() => (r(n, t, e), () => r(n, t, null)), [n, t, e, r]), null;
 }
 function it() {
   const { navigate: t } = O();
@@ -1046,13 +1052,13 @@ function ct(t) {
 }
 function ut(t, e) {
   const { state: n } = O();
-  return j(() => {
+  return P(() => {
     const o = [];
     return n.views.forEach((s) => {
       if (s.meta?.type === t) {
         if (e) {
-          const i = s.params || {};
-          if (!Object.entries(e).every(([u, l]) => i[u] === l))
+          const c = s.params || {};
+          if (!Object.entries(e).every(([u, l]) => c[u] === l))
             return;
         }
         o.push({
@@ -1071,28 +1077,28 @@ function ut(t, e) {
 }
 function lt(t, e = "") {
   const n = [], r = {}, o = {};
-  return Object.entries(t).forEach(([s, i]) => {
-    let c = s.replace(e, "").replace(/\.tsx$/, "").replace(/\/index$/, "").replace(/([A-Z])/g, (p) => `/${p.toLowerCase()}`).replace(/\/\//g, "/").toLowerCase() || "/";
-    c === "" || c === "index" ? c = "/" : c && !c.startsWith("/") && (c = "/" + c);
-    const u = c.match(/^(.*)\/(_error)$/);
+  return Object.entries(t).forEach(([s, c]) => {
+    let i = s.replace(e, "").replace(/\.tsx$/, "").replace(/\/index$/, "").replace(/([A-Z])/g, (p) => `/${p.toLowerCase()}`).replace(/\/\//g, "/").toLowerCase() || "/";
+    i === "" || i === "index" ? i = "/" : i && !i.startsWith("/") && (i = "/" + i);
+    const u = i.match(/^(.*)\/(_error)$/);
     if (u) {
       const [, p] = u, w = p || "/";
-      o[w] = i.default;
+      o[w] = c.default;
       return;
     }
-    const l = c.match(/^(.*)\/(_layout(?:\.([^/]+))?)$/);
+    const l = i.match(/^(.*)\/(_layout(?:\.([^/]+))?)$/);
     if (l) {
-      const [, p, , w] = l, g = p || "/";
+      const [, p, , w] = l, y = p || "/";
       if (w) {
-        const h = `${g}#${w}`;
-        r[h] = i.default;
+        const h = `${y}#${w}`;
+        r[h] = c.default;
       } else
-        r[g] = i.default;
-    } else c.includes("/_") || n.push({
-      path: c,
-      component: i.default,
+        r[y] = c.default;
+    } else i.includes("/_") || n.push({
+      path: i,
+      component: c.default,
       // @ts-expect-error meta is not defined
-      meta: i.default?.meta || { breakpoints: [] }
+      meta: c.default?.meta || { breakpoints: [] }
     });
   }), { routes: n, layouts: r, errors: o };
 }

package/dist/index.umd.js

@@ -6,7 +6,7 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Q;function we(){if(Q)return V;Q=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function n(r,o,s){var i=null;if(s!==void 0&&(i=""+s),o.key!==void 0&&(i=""+o.key),"key"in o){s={};for(var c in o)c!=="key"&&(s[c]=o[c])}else s=o;return o=s.ref,{$$typeof:t,type:r,key:i,ref:o!==void 0?o:null,props:s}}return V.Fragment=e,V.jsx=n,V.jsxs=n,V}var C={};/**
+ */var Q;function we(){if(Q)return V;Q=1;var t=Symbol.for("react.transitional.element"),e=Symbol.for("react.fragment");function n(r,o,s){var c=null;if(s!==void 0&&(c=""+s),o.key!==void 0&&(c=""+o.key),"key"in o){s={};for(var i in o)i!=="key"&&(s[i]=o[i])}else s=o;return o=s.ref,{$$typeof:t,type:r,key:c,ref:o!==void 0?o:null,props:s}}return V.Fragment=e,V.jsx=n,V.jsxs=n,V}var C={};/**
  * @license React
  * react-jsx-runtime.development.js
  *
@@ -14,9 +14,9 @@
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
- */var Z;function ge(){return Z||(Z=1,process.env.NODE_ENV!=="production"&&(function(){function t(a){if(a==null)return null;if(typeof a=="function")return a.$$typeof===et?null:a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case v:return"Fragment";case P:return"Profiler";case E:return"StrictMode";case Qe:return"Suspense";case Ze:return"SuspenseList";case $e:return"Activity"}if(typeof a=="object")switch(typeof a.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),a.$$typeof){case R:return"Portal";case Xe:return(a.displayName||"Context")+".Provider";case I:return(a._context.displayName||"Context")+".Consumer";case Ke:var d=a.render;return a=a.displayName,a||(a=d.displayName||d.name||"",a=a!==""?"ForwardRef("+a+")":"ForwardRef"),a;case qe:return d=a.displayName||null,d!==null?d:t(a.type)||"Memo";case ue:d=a._payload,a=a._init;try{return t(a(d))}catch{}}return null}function e(a){return""+a}function n(a){try{e(a);var d=!1}catch{d=!0}if(d){d=console;var w=d.error,S=typeof Symbol=="function"&&Symbol.toStringTag&&a[Symbol.toStringTag]||a.constructor.name||"Object";return w.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",S),e(a)}}function r(a){if(a===v)return"<>";if(typeof a=="object"&&a!==null&&a.$$typeof===ue)return"<...>";try{var d=t(a);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function o(){var a=H.A;return a===null?null:a.getOwner()}function s(){return Error("react-stack-top-frame")}function i(a){if(le.call(a,"key")){var d=Object.getOwnPropertyDescriptor(a,"key").get;if(d&&d.isReactWarning)return!1}return a.key!==void 0}function c(a,d){function w(){fe||(fe=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}w.isReactWarning=!0,Object.defineProperty(a,"key",{get:w,configurable:!0})}function u(){var a=t(this.type);return de[a]||(de[a]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),a=this.props.ref,a!==void 0?a:null}function l(a,d,w,S,j,k,J,X){return w=k.ref,a={$$typeof:m,type:a,key:d,props:k,_owner:j},(w!==void 0?w:null)!==null?Object.defineProperty(a,"ref",{enumerable:!1,get:u}):Object.defineProperty(a,"ref",{enumerable:!1,value:null}),a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(a,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(a,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(a,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a}function h(a,d,w,S,j,k,J,X){var b=d.children;if(b!==void 0)if(S)if(tt(b)){for(S=0;S<b.length;S++)g(b[S]);Object.freeze&&Object.freeze(b)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else g(b);if(le.call(d,"key")){b=t(a);var O=Object.keys(d).filter(function(rt){return rt!=="key"});S=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",me[b+S]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+ */var Z;function ye(){return Z||(Z=1,process.env.NODE_ENV!=="production"&&(function(){function t(a){if(a==null)return null;if(typeof a=="function")return a.$$typeof===et?null:a.displayName||a.name||null;if(typeof a=="string")return a;switch(a){case v:return"Fragment";case P:return"Profiler";case E:return"StrictMode";case Qe:return"Suspense";case Ze:return"SuspenseList";case $e:return"Activity"}if(typeof a=="object")switch(typeof a.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),a.$$typeof){case R:return"Portal";case Xe:return(a.displayName||"Context")+".Provider";case M:return(a._context.displayName||"Context")+".Consumer";case Ke:var d=a.render;return a=a.displayName,a||(a=d.displayName||d.name||"",a=a!==""?"ForwardRef("+a+")":"ForwardRef"),a;case qe:return d=a.displayName||null,d!==null?d:t(a.type)||"Memo";case ue:d=a._payload,a=a._init;try{return t(a(d))}catch{}}return null}function e(a){return""+a}function n(a){try{e(a);var d=!1}catch{d=!0}if(d){d=console;var w=d.error,b=typeof Symbol=="function"&&Symbol.toStringTag&&a[Symbol.toStringTag]||a.constructor.name||"Object";return w.call(d,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",b),e(a)}}function r(a){if(a===v)return"<>";if(typeof a=="object"&&a!==null&&a.$$typeof===ue)return"<...>";try{var d=t(a);return d?"<"+d+">":"<...>"}catch{return"<...>"}}function o(){var a=H.A;return a===null?null:a.getOwner()}function s(){return Error("react-stack-top-frame")}function c(a){if(le.call(a,"key")){var d=Object.getOwnPropertyDescriptor(a,"key").get;if(d&&d.isReactWarning)return!1}return a.key!==void 0}function i(a,d){function w(){fe||(fe=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",d))}w.isReactWarning=!0,Object.defineProperty(a,"key",{get:w,configurable:!0})}function u(){var a=t(this.type);return de[a]||(de[a]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),a=this.props.ref,a!==void 0?a:null}function l(a,d,w,b,j,k,J,X){return w=k.ref,a={$$typeof:m,type:a,key:d,props:k,_owner:j},(w!==void 0?w:null)!==null?Object.defineProperty(a,"ref",{enumerable:!1,get:u}):Object.defineProperty(a,"ref",{enumerable:!1,value:null}),a._store={},Object.defineProperty(a._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(a,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(a,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:J}),Object.defineProperty(a,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:X}),Object.freeze&&(Object.freeze(a.props),Object.freeze(a)),a}function h(a,d,w,b,j,k,J,X){var S=d.children;if(S!==void 0)if(b)if(tt(S)){for(b=0;b<S.length;b++)y(S[b]);Object.freeze&&Object.freeze(S)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else y(S);if(le.call(d,"key")){S=t(a);var O=Object.keys(d).filter(function(rt){return rt!=="key"});b=0<O.length?"{key: someKey, "+O.join(": ..., ")+": ...}":"{key: someKey}",me[S+b]||(O=0<O.length?"{"+O.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
-  <%s key={someKey} {...props} />`,S,b,O,b),me[b+S]=!0)}if(b=null,w!==void 0&&(n(w),b=""+w),i(d)&&(n(d.key),b=""+d.key),"key"in d){w={};for(var K in d)K!=="key"&&(w[K]=d[K])}else w=d;return b&&c(w,typeof a=="function"?a.displayName||a.name||"Unknown":a),l(a,b,k,j,o(),w,J,X)}function g(a){typeof a=="object"&&a!==null&&a.$$typeof===m&&a._store&&(a._store.validated=1)}var y=p,m=Symbol.for("react.transitional.element"),R=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),E=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),I=Symbol.for("react.consumer"),Xe=Symbol.for("react.context"),Ke=Symbol.for("react.forward_ref"),Qe=Symbol.for("react.suspense"),Ze=Symbol.for("react.suspense_list"),qe=Symbol.for("react.memo"),ue=Symbol.for("react.lazy"),$e=Symbol.for("react.activity"),et=Symbol.for("react.client.reference"),H=y.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,le=Object.prototype.hasOwnProperty,tt=Array.isArray,G=console.createTask?console.createTask:function(){return null};y={react_stack_bottom_frame:function(a){return a()}};var fe,de={},pe=y.react_stack_bottom_frame.bind(y,s)(),he=G(r(s)),me={};C.Fragment=v,C.jsx=function(a,d,w,S,j){var k=1e4>H.recentlyCreatedOwnerStacks++;return h(a,d,w,!1,S,j,k?Error("react-stack-top-frame"):pe,k?G(r(a)):he)},C.jsxs=function(a,d,w,S,j){var k=1e4>H.recentlyCreatedOwnerStacks++;return h(a,d,w,!0,S,j,k?Error("react-stack-top-frame"):pe,k?G(r(a)):he)}})()),C}var q;function ye(){return q||(q=1,process.env.NODE_ENV==="production"?N.exports=we():N.exports=ge()),N.exports}var f=ye();const $=p.createContext({trigger:"init",state:{id:"",views:[]},navigate:()=>{},close:()=>{}});function W(t,...e){t&&t.addEventListener&&t.addEventListener(...e)}function U(t,...e){t&&t.removeEventListener&&t.removeEventListener(...e)}function ee(t,e){window.dispatchEvent(new CustomEvent(t,{detail:e}))}function M(t="",e={}){const n=new URL(t,"http://dummy.base"),r={...Object.fromEntries(n.searchParams.entries()),...e},o=new URLSearchParams(Object.entries(r).map(([u,l])=>[u,String(l)])).toString(),i=t.startsWith("http://")||t.startsWith("https://")?n.origin+n.pathname:n.pathname,c=i.endsWith("/")&&i.length>1?i.slice(0,-1):i;return{url:o?`${c}?${o}`:c,path:n.pathname,queryParams:r}}function ve(t){const e={};for(const[n,r]of new URLSearchParams(t))r==="true"?e[n]=!0:r==="false"?e[n]=!1:Ee(r)?e[n]=r.includes(".")?parseFloat(r):parseInt(r,10):e[n]=r;return e}function Ee(t){return isNaN(+t)?!1:parseInt(t).toString()===t||parseFloat(t).toString()===t}const xe=t=>{try{return new URL(t,window.location.origin).origin!==window.location.origin}catch{return!1}};function A(){const{state:t,length:e}=window.history,{href:n}=window.location;return{state:_e(t)?t:Se(n),length:e}}function D(t,e){history.pushState(e,"",t),ee("pushstate",e)}function _(t,e){history.replaceState(e,"",t),ee("replacestate",e)}function Re(t){const{id:e,views:n}=A().state;if(e===t)return;const r=n.find(o=>o.id===t);r&&_(r.url,{id:r.id,views:n})}function Se(t){const e=crypto.randomUUID(),n=new URL(t),r={id:e,views:[{id:e,url:t,queryParams:ve(n.search),props:{}}]};return _(t,r),r}function be(t,e){const{state:n}=A(),r={...n};let o=-1;for(let s=0;s<r.views.length;s++)if(r.views[s].id===t){te(r.views[s].queryParams,e)||(r.views[s].queryParams=e,o=s);break}if(o>-1){const s=new URL(window.location.href);s.search=new URLSearchParams(Object.entries(e).map(([i,c])=>[i,String(c)])).toString(),r.views[o].url=s.toString(),_(s.toString(),r)}}function ke(t,e){const{state:n}=A(),r={...n};let o=-1;for(let s=0;s<r.views.length;s++)if(r.views[s].id===t){te(r.views[s].props,e)||(r.views[s].props=e,o=s);break}o>-1&&_(window.location.href,r)}function Pe(t,e){const n=[...e.views].filter(o=>o.id!==t),r={...e,views:n};_(n.at(-1)?.url??"",r)}function je(t,e,n,r,o,s){const i=[...o.views],c=crypto.randomUUID(),u=t.getFullPath(n),l=new URL(u,window.location.origin);Object.entries(r).forEach(([E,P])=>{l.searchParams.set(E,String(P))});const h=l.toString(),g=t.getViewComponentByPath(l.pathname),y=g?.params||{},m=i.find(E=>h===E.url);if(s.target!=="_top"&&!s.append&&m?.id===o.id)return;if(!s.append){if(s.target==="_top"){const E=m||{id:c,url:h,meta:g?.meta??void 0,params:y,queryParams:r,props:s.props,target:s?.target,layout:s?.layout};D(h,{id:E.id,views:[E]});return}if(!s.append&&m){_(h,{id:m.id,views:i});return}}if(s.append||s.target==="_void"){i.push({id:c,url:h,meta:g?.meta??void 0,params:y,queryParams:r,props:s.props,target:s?.target,layout:s?.layout}),D(h,{id:c,views:i});return}const R=i.findIndex(E=>E.id===e),v=i.slice(0,R+1);v.push({id:c,url:h,meta:g?.meta??void 0,params:y,queryParams:r,props:s.props,target:s?.target,layout:s?.layout}),D(h,{id:c,views:v})}function _e(t){return!t||typeof t!="object"?!1:"id"in t&&"views"in t&&Array.isArray(t.views)}function te(t,e){if(typeof t!=typeof e)return!1;if(typeof t>"u"||typeof e>"u")return!0;if(Object.keys(t).length!==Object.keys(e).length)return!1;for(const n in t)if(!(n in e)||t[n]!==e[n]||typeof t[n]!=typeof e[n])return!1;return!0}class Te{#e="/";#r={};#o={};#t={};constructor(e,n){this.#e=n?this.#s(n):"/",this.#o=e.layouts||{},this.#t=e.errors||{},this.registerRoutes(e.routes)}registerRoutes(e,n=!1){e.forEach(r=>{const o=[],s=r.path.replace(/\[([^\]]+)\]/g,(c,u)=>(o.push(u),"([^/]+)")),i=new RegExp(`^${s}$`);if(!r.component||!(r.component instanceof Function)||r.path[0]!=="/"){if(n)throw new Error(`Invalid component for route ${r.path||"undefined path"}`);return}this.#r[r.path]={component:r.component,pattern:i,paramKeys:o,originalPath:r.path,layouts:r.layouts?.length?r.layouts.map(c=>({component:c})):this.#a(r.path),meta:r.meta||{breakpoints:[]}}})}#s(e){return e.startsWith("/")||(e="/"+e),e.length>1&&e.endsWith("/")&&(e=e.slice(0,-1)),e}#n(e){return this.#e==="/"?e:e.startsWith(this.#e)?e.slice(this.#e.length)||"/":e}getViewComponentByPath(e){const n=this.#n(e),r=n.length>1&&n.at(-1)==="/"?n.substring(0,n.length-1):n;for(const o in this.#r){const s=this.#r[o],i=r.match(s.pattern);if(i){const c=Object.fromEntries(s.paramKeys.map((u,l)=>[u,i[l+1]]));return{Component:s.component,Layouts:s.layouts,params:c,meta:s.meta}}}return null}getErrorComponentByPath(e){const n=this.#n(e),r=n.length>1&&n.at(-1)==="/"?n.substring(0,n.length-1):n;if(this.#t[r])return this.#t[r];const o=r.split("/").filter(Boolean);for(let s=o.length;s>=1;s--){const i="/"+o.slice(0,s).join("/");if(this.#t[i])return this.#t[i]}return this.#t["/"]?this.#t["/"]:(console.log("No error component found"),null)}get basePath(){return this.#e}getFullPath(e){return this.#e==="/"?e:e==="/"?this.#e:e.startsWith(this.#e)?e:this.#e+e}getPathFromUrl(e){try{let r=new URL(e).pathname;return r=this.#n(r),r.length>1&&r.endsWith("/")&&(r=r.slice(0,-1)),r}catch{return this.#n(e)}}getAllViewComponents(){return Object.values(this.#r).map(e=>({Component:e.component,Layouts:e.layouts,meta:e.meta}))}#a(e){const n=[],r=["/",...e.match(/[^/]+/g)||[]];let o=r[0];for(let s=0;s<r.length;s++){const i=[];for(const c in this.#o){const[u,l]=c.split("#");u===o&&i.push({key:l,component:this.#o[c]})}n.push(...i),o+=r[s+1]}return n}}function Oe({basePath:t,config:e,external:n=[],children:r}){const o=p.useMemo(()=>new Te(e,t),[e,t]),[s,i]=p.useState(F("load",o));return p.useEffect(()=>{for(const c of n??[])import(c.url).then(u=>{if(!Array.isArray(u.routes))throw new Error(`Invalid routes in ${c.url}`);o.registerRoutes(u.routes,!0)}).catch(u=>{console.error(u.message)})},[n,o]),p.useEffect(()=>{t&&t!=="/"&&window.location.pathname==="/"&&window.history.replaceState(null,"",t)},[t]),p.useEffect(()=>{const c=()=>i(F("popstate",o)),u=()=>i(F("pushstate",o)),l=()=>i(F("replacestate",o));return W(window,"popstate",c),W(window,"pushstate",u),W(window,"replacestate",l),()=>{U(window,"popstate",c),U(window,"pushstate",u),U(window,"replacestate",l)}},[o]),f.jsx($.Provider,{value:{clientRouter:o,...s},children:r})}function F(t,e){const{state:n,length:r}=A(),{hash:o,host:s,hostname:i,href:c,origin:u,pathname:l,port:h,protocol:g,search:y}=window.location;return{trigger:t,state:n,length:r,hash:o,host:s,hostname:i,href:c,origin:u,pathname:l,port:h,protocol:g,search:y,navigate:(m,R,v,E)=>{je(e,m,R,v,n,E)},close:m=>{Pe(m,n)}}}function T(){const t=p.useContext($);if(t===void 0)throw new Error("useRouter must be used within a RouterProvider");return t}function Ve(t,e){if(!t||!e)return t===e;if(t.length!==e.length)return!1;for(let n=0;n<t.length;n++){const r=t[n],o=e[n];if(r.id!==o.id||r.url!==o.url||r.layout!==o.layout||r.target!==o.target||!Y(r.params,o.params)||!Y(r.queryParams,o.queryParams)||!Y(r.props,o.props)||r.meta!==o.meta&&(!r.meta||!o.meta||r.meta.type!==o.meta.type))return!1}return!0}function Y(t,e){if(t===e)return!0;if(!t||!e)return!1;const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(const o of n)if(t[o]!==e[o])return!1;return!0}function re(){const{state:t,clientRouter:e}=T()||{},n=p.useRef(void 0),r=!Ve(n.current,t.views);return p.useMemo(()=>{const s=[],i=[];return t.views.forEach(c=>{const u=new URL(c.url,"http://dummy.base"),l=e?.getViewComponentByPath(u.pathname),h=c.params||l?.params||{},g=c.meta||l?.meta,y={view:c,meta:g,Component:l?.Component,Layouts:l?.Layouts,params:h};c.target==="_void"?i.push(y):s.push(y)}),n.current=t.views,{viewStack:s,voidViews:i}},[r,e])}const ne=p.createContext({viewId:"",isActive:!1,width:0,queryParams:{},setQueryParams:()=>{},setProps:()=>{},queryParam:()=>{},close:()=>{},state:{id:"",views:[]}});function oe({id:t,width:e,layout:n,children:r,params:o,queryParams:s,props:i}){const{state:c,close:u}=T(),[l,h]=p.useState(t===c.id),[g,y]=p.useState(i||{});return p.useEffect(()=>{h(t===c.id)},[c.id,t]),f.jsx(ne.Provider,{value:{viewId:t,isActive:l,width:e,params:o,queryParams:s,props:g,layout:n,state:c,setProps:(m,R)=>{const v=R?m||{}:{...i,...m};for(const E in v)v[E]===void 0&&delete v[E];y(v),ke(t,v)},setQueryParams:(m,R)=>{const v=R!==!0?{...i||{}}:{};let E=!1;for(const P in m){const I=m[P];typeof I<"u"?(v[P]=I,E=!0):Object.prototype.hasOwnProperty.call(v,P)&&(delete v[P],E=!0)}(E||R===!0)&&be(t,v)},queryParam:m=>i?.[m],close:()=>{u(t)}},children:r})}function Ce(t,e){const n=e.filter(o=>o.view.target!=="_void").map(o=>({id:o.view.id,breakpoints:o.meta?.breakpoints||[]})),r=Ae(t,n);return e.map(({view:o})=>({id:o.id,vw:r.find(s=>s.id===o.id)?.vw||0}))}function Ae(t,e){if(e.length===0)return[];const r=e.map(i=>({id:i.id,minVw:Le(i,t)})),o=r.reduce((i,c)=>i+c.minVw,0);if(o>=100)return r.map(i=>({id:i.id,vw:i.minVw}));const s=100-o;return r.map(i=>{const c=i.minVw/o,u=s*c;return{id:i.id,vw:Number((i.minVw+u).toFixed(0))}})}function Le(t,e){const r=[...t.breakpoints].sort((o,s)=>s.breakpoint-o.breakpoint).find(o=>e>=o.breakpoint);return r?r.minVw:100}function se({children:t}){return f.jsx(f.Fragment,{children:t})}const z=p.createContext({setSlot:()=>{},getSlots:()=>({})});function ae({children:t}){const[e,n]=p.useState({}),r=p.useCallback((s,i,c)=>{n(u=>({...u,[s]:{...u[s],[i]:c}}))},[]),o=p.useCallback(s=>e[s]||{},[e]);return f.jsx(z.Provider,{value:{setSlot:r,getSlots:o},children:t})}function Ne({viewUrl:t,error:e,errorCode:n,errorInfo:r,reset:o}){const{clientRouter:s}=T(),i=s?.getErrorComponentByPath(s?.getPathFromUrl(t)??"/");return i?f.jsx(i,{error:e,errorCode:n??0,errorInfo:r,reset:o}):f.jsxs("div",{style:{margin:"10px",border:"2px solid #ff6b6b",borderRadius:"8px",backgroundColor:"#fff5f5",width:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"20px"},children:[f.jsx("h1",{style:{color:"#c92a2a",marginBottom:"10px",fontWeight:"bold"},children:"Unhandled error"}),f.jsx("p",{style:{marginBottom:"15px",textAlign:"center"},children:e.message}),f.jsxs("details",{style:{marginBottom:"15px",width:"100%"},children:[f.jsx("summary",{style:{cursor:"pointer",marginBottom:"10px",textAlign:"center"},children:"Technical details"}),f.jsxs("div",{style:{backgroundColor:"#f8f9fa",padding:"10px",borderRadius:"4px",overflow:"auto",maxHeight:"200px"},children:[f.jsx("h4",{style:{margin:"0 0 10px 0",fontSize:"14px"},children:"Stack Trace:"}),f.jsx("pre",{style:{fontSize:"12px",margin:0,whiteSpace:"pre-wrap"},children:e.stack}),r?.componentStack&&f.jsxs(f.Fragment,{children:[f.jsx("h4",{style:{margin:"15px 0 10px 0",fontSize:"14px"},children:"Component Stack:"}),f.jsx("pre",{style:{fontSize:"12px",margin:0,whiteSpace:"pre-wrap"},children:r.componentStack})]})]})]}),f.jsx("button",{onClick:o,style:{backgroundColor:"#228be6",color:"white",border:"none",padding:"8px 16px",borderRadius:"4px",cursor:"pointer"},children:"Try again"})]})}class B extends p.Component{constructor(e){super(e),this.state={hasError:!!e.error,errorCode:e.errorCode,error:e.error}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,n){console.error(`Error in view ${this.props.viewUrl}:`,e,n),this.setState({errorInfo:n})}reset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return!this.state.hasError||!this.state.error?this.props.children:f.jsx(Ne,{viewUrl:this.props.viewUrl,error:this.state.error,errorCode:this.state.errorCode,errorInfo:this.state.errorInfo,reset:this.reset})}}function We({className:t,style:e={}}){const{viewStack:n}=re(),[r,o]=p.useState(window.innerWidth);p.useEffect(()=>{const u=()=>o(window.innerWidth);return window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[]);const s=p.useMemo(()=>Ce(r,n),[r,n]),i=p.useMemo(()=>{let u=0,l=0;for(let h=n.length-1;h>=0;h--)if(u+=s[h]?.vw||0,u>100){l=h+1;break}return n.slice(l)},[s,n]),c=p.useMemo(()=>{const u=n.length-i.length;return i.map((l,h)=>s[h+u].vw)},[s,n.length,i]);return f.jsx(Ue,{views:i,widths:c,style:e,className:t})}function Ue({views:t,widths:e,className:n,style:r={}}){return f.jsx(ae,{children:f.jsx("div",{className:n,style:r,children:t.map(({view:o,params:s,Layouts:i,Component:c},u)=>{if(!c)return f.jsx(B,{viewUrl:o.url,errorCode:404,error:new Error("Not found")},o.id);const l=i?.length?i.filter(h=>h.key===o.layout):[{component:se}];return f.jsx(B,{viewUrl:o.url||"/",children:f.jsx(oe,{id:o.id,width:e[u],params:s,queryParams:o.queryParams,props:o.props,children:ie(l,c,s)},o.id)},o.id)})})})}function ie(t,e,n){if(t.length===0)return f.jsx(e,{...n||{}});const[r,...o]=t,s=r.component;return f.jsx(s,{children:ie(o,e,n)},r.key)}function Fe({className:t,style:e={}}){const{voidViews:n}=re();return f.jsx(Ie,{views:n,style:e,className:t})}function Ie({views:t,className:e,style:n={}}){return f.jsx(ae,{children:f.jsx("div",{className:e,style:n,children:t.map(({view:r,params:o,Layouts:s,Component:i})=>{const c=s?.length?s.filter(u=>u.key===r.layout):[{component:se}];return f.jsx(B,{viewUrl:r.url||"/",children:f.jsx(oe,{id:r.id,width:0,params:o,queryParams:r.queryParams,props:r.props,layout:r.layout,children:ce(c,i,o)},r.id)},r.id)})})})}function ce(t,e,n){if(t.length===0)return e?f.jsx(e,{...n||{}}):null;const[r,...o]=t,s=r.component;return f.jsx(s,{children:ce(o,e,n)},r.key)}function L(){const t=p.useContext(ne);if(t===void 0)throw new Error("useView must be used within a ViewProvider");return t}function Me({children:t,style:e={},className:n}){const{viewId:r}=L(),o=p.useRef(null);return p.useEffect(()=>{if(!o.current)return;const s=()=>{Re(r)},i=o.current;return W(i,"click",s),()=>U(i,"click",s)},[r,o]),f.jsx("div",{ref:o,style:e,className:n,children:t})}function De({href:t,query:e={},children:n,className:r,target:o="_self",onClick:s,props:i,layout:c}){const{navigate:u}=T(),{url:l,queryParams:h}=M(t,e),{viewId:g}=L(),y=R=>{s&&(s(R),R.isDefaultPrevented())||l.startsWith("https://")||l.startsWith("http://")||o==="_blank"||R.metaKey||R.ctrlKey||(R.preventDefault(),u(g,l,h,{append:R.shiftKey,target:o,props:i,layout:c}))},m=xe(l)?"noopener noreferrer":void 0;return f.jsx("a",{rel:m,href:l,onClick:y,className:r,target:o,children:n})}function Ye({slot:t}){const{viewId:e}=L(),{getSlots:n}=p.useContext(z),r=n(e);return f.jsx(f.Fragment,{children:r[t]})}function ze({slot:t,children:e}){const{viewId:n}=L(),{setSlot:r}=p.useContext(z);return p.useEffect(()=>(r(n,t,e),()=>r(n,t,null)),[n,t,e,r]),null}function Be(){const{navigate:t}=T();return(e,n)=>{const{state:r}=A(),{url:o,queryParams:s}=M(e);t(r.id||"",o,s,{append:!1,target:n?.target||"_self",props:n?.props,layout:n?.layout})}}function He(t){const{url:e}=M(t);return e}function Ge(t,e){const{state:n}=T();return p.useMemo(()=>{const o=[];return n.views.forEach(s=>{if(s.meta?.type===t){if(e){const i=s.params||{};if(!Object.entries(e).every(([u,l])=>i[u]===l))return}o.push({id:s.id,url:s.url,params:s.params,queryParams:s.queryParams,props:s.props,layout:s.layout,target:s.target,isActive:s.id===n.id})}}),o},[n.views,n.id,t,e])}function Je(t,e=""){const n=[],r={},o={};return Object.entries(t).forEach(([s,i])=>{let c=s.replace(e,"").replace(/\.tsx$/,"").replace(/\/index$/,"").replace(/([A-Z])/g,h=>`/${h.toLowerCase()}`).replace(/\/\//g,"/").toLowerCase()||"/";c===""||c==="index"?c="/":c&&!c.startsWith("/")&&(c="/"+c);const u=c.match(/^(.*)\/(_error)$/);if(u){const[,h]=u,g=h||"/";o[g]=i.default;return}const l=c.match(/^(.*)\/(_layout(?:\.([^/]+))?)$/);if(l){const[,h,,g]=l,y=h||"/";if(g){const m=`${y}#${g}`;r[m]=i.default}else r[y]=i.default}else c.includes("/_")||n.push({path:c,component:i.default,meta:i.default?.meta||{breakpoints:[]}})}),{routes:n,layouts:r,errors:o}}x.Fill=ze,x.Link=De,x.Outlet=Ye,x.RouterProvider=Oe,x.StackedView=Me,x.StackedViewGroup=We,x.VoidViews=Fe,x.mapRoutes=Je,x.useHref=He,x.useNavigate=Be,x.useOpenViews=Ge,x.useView=L,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,b,S,O,S),me[S+b]=!0)}if(S=null,w!==void 0&&(n(w),S=""+w),c(d)&&(n(d.key),S=""+d.key),"key"in d){w={};for(var K in d)K!=="key"&&(w[K]=d[K])}else w=d;return S&&i(w,typeof a=="function"?a.displayName||a.name||"Unknown":a),l(a,S,k,j,o(),w,J,X)}function y(a){typeof a=="object"&&a!==null&&a.$$typeof===m&&a._store&&(a._store.validated=1)}var g=p,m=Symbol.for("react.transitional.element"),R=Symbol.for("react.portal"),v=Symbol.for("react.fragment"),E=Symbol.for("react.strict_mode"),P=Symbol.for("react.profiler"),M=Symbol.for("react.consumer"),Xe=Symbol.for("react.context"),Ke=Symbol.for("react.forward_ref"),Qe=Symbol.for("react.suspense"),Ze=Symbol.for("react.suspense_list"),qe=Symbol.for("react.memo"),ue=Symbol.for("react.lazy"),$e=Symbol.for("react.activity"),et=Symbol.for("react.client.reference"),H=g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,le=Object.prototype.hasOwnProperty,tt=Array.isArray,G=console.createTask?console.createTask:function(){return null};g={react_stack_bottom_frame:function(a){return a()}};var fe,de={},pe=g.react_stack_bottom_frame.bind(g,s)(),he=G(r(s)),me={};C.Fragment=v,C.jsx=function(a,d,w,b,j){var k=1e4>H.recentlyCreatedOwnerStacks++;return h(a,d,w,!1,b,j,k?Error("react-stack-top-frame"):pe,k?G(r(a)):he)},C.jsxs=function(a,d,w,b,j){var k=1e4>H.recentlyCreatedOwnerStacks++;return h(a,d,w,!0,b,j,k?Error("react-stack-top-frame"):pe,k?G(r(a)):he)}})()),C}var q;function ge(){return q||(q=1,process.env.NODE_ENV==="production"?N.exports=we():N.exports=ye()),N.exports}var f=ge();const $=p.createContext({trigger:"init",state:{id:"",views:[]},navigate:()=>{},close:()=>{}});function W(t,...e){t&&t.addEventListener&&t.addEventListener(...e)}function U(t,...e){t&&t.removeEventListener&&t.removeEventListener(...e)}function ee(t,e){window.dispatchEvent(new CustomEvent(t,{detail:e}))}function I(t="",e={}){const n=new URL(t,"http://dummy.base"),r={...Object.fromEntries(n.searchParams.entries()),...e},o=new URLSearchParams(Object.entries(r).map(([u,l])=>[u,String(l)])).toString(),c=t.startsWith("http://")||t.startsWith("https://")?n.origin+n.pathname:n.pathname,i=c.endsWith("/")&&c.length>1?c.slice(0,-1):c;return{url:o?`${i}?${o}`:i,path:n.pathname,queryParams:r}}function ve(t){const e={};for(const[n,r]of new URLSearchParams(t))r==="true"?e[n]=!0:r==="false"?e[n]=!1:Ee(r)?e[n]=r.includes(".")?parseFloat(r):parseInt(r,10):e[n]=r;return e}function Ee(t){return isNaN(+t)?!1:parseInt(t).toString()===t||parseFloat(t).toString()===t}const xe=t=>{try{return new URL(t,window.location.origin).origin!==window.location.origin}catch{return!1}};function A(){const{state:t,length:e}=window.history,{href:n}=window.location;return{state:_e(t)?t:be(n),length:e}}function D(t,e){history.pushState(e,"",t),ee("pushstate",e)}function _(t,e){history.replaceState(e,"",t),ee("replacestate",e)}function Re(t){const{id:e,views:n}=A().state;if(e===t)return;const r=n.find(o=>o.id===t);r&&_(r.url,{id:r.id,views:n})}function be(t){const e=crypto.randomUUID(),n=new URL(t),r={id:e,views:[{id:e,url:t,queryParams:ve(n.search),props:{}}]};return _(t,r),r}function Se(t,e){const{state:n}=A(),r={...n};let o=-1;for(let s=0;s<r.views.length;s++)if(r.views[s].id===t){te(r.views[s].queryParams,e)||(r.views[s].queryParams=e,o=s);break}if(o>-1){const s=new URL(window.location.href);s.search=new URLSearchParams(Object.entries(e).map(([c,i])=>[c,String(i)])).toString(),r.views[o].url=s.toString(),_(s.toString(),r)}}function ke(t,e){const{state:n}=A(),r={...n};let o=-1;for(let s=0;s<r.views.length;s++)if(r.views[s].id===t){te(r.views[s].props,e)||(r.views[s].props=e,o=s);break}o>-1&&_(window.location.href,r)}function Pe(t,e){const n=[...e.views].filter(o=>o.id!==t),r={...e,views:n};_(n.at(-1)?.url??"",r)}function je(t,e,n,r,o,s){const c=[...o.views],i=crypto.randomUUID(),u=t.getFullPath(n),l=new URL(u,window.location.origin);Object.entries(r).forEach(([E,P])=>{l.searchParams.set(E,String(P))});const h=l.toString(),y=t.getViewComponentByPath(l.pathname),g=y?.params||{},m=c.find(E=>h===E.url);if(s.target!=="_top"&&!s.append&&m?.id===o.id)return;if(!s.append){if(s.target==="_top"){const E=m||{id:i,url:h,meta:y?.meta??void 0,params:g,queryParams:r,props:s.props,target:s?.target,layout:s?.layout};D(h,{id:E.id,views:[E]});return}if(!s.append&&m){_(h,{id:m.id,views:c});return}}if(s.append||s.target==="_void"){c.push({id:i,url:h,meta:y?.meta??void 0,params:g,queryParams:r,props:s.props,target:s?.target,layout:s?.layout}),D(h,{id:i,views:c});return}const R=c.findIndex(E=>E.id===e),v=c.slice(0,R+1);v.push({id:i,url:h,meta:y?.meta??void 0,params:g,queryParams:r,props:s.props,target:s?.target,layout:s?.layout}),D(h,{id:i,views:v})}function _e(t){return!t||typeof t!="object"?!1:"id"in t&&"views"in t&&Array.isArray(t.views)}function te(t,e){if(typeof t!=typeof e)return!1;if(typeof t>"u"||typeof e>"u")return!0;if(Object.keys(t).length!==Object.keys(e).length)return!1;for(const n in t)if(!(n in e)||t[n]!==e[n]||typeof t[n]!=typeof e[n])return!1;return!0}class Te{#e="/";#r={};#o={};#t={};constructor(e,n){this.#e=n?this.#s(n):"/",this.#o=e.layouts||{},this.#t=e.errors||{},this.registerRoutes(e.routes)}registerRoutes(e,n=!1){e.forEach(r=>{const o=[],s=r.path.replace(/\[([^\]]+)\]/g,(i,u)=>(o.push(u),"([^/]+)")),c=new RegExp(`^${s}$`);if(!r.component||!(r.component instanceof Function)||r.path[0]!=="/"){if(n)throw new Error(`Invalid component for route ${r.path||"undefined path"}`);return}this.#r[r.path]={component:r.component,pattern:c,paramKeys:o,originalPath:r.path,layouts:r.layouts?.length?r.layouts.map(i=>({component:i})):this.#a(r.path),meta:r.meta||{breakpoints:[]}}})}#s(e){return e.startsWith("/")||(e="/"+e),e.length>1&&e.endsWith("/")&&(e=e.slice(0,-1)),e}#n(e){return this.#e==="/"?e:e.startsWith(this.#e)?e.slice(this.#e.length)||"/":e}getViewComponentByPath(e){const n=this.#n(e),r=n.length>1&&n.at(-1)==="/"?n.substring(0,n.length-1):n;for(const o in this.#r){const s=this.#r[o],c=r.match(s.pattern);if(c){const i=Object.fromEntries(s.paramKeys.map((u,l)=>[u,c[l+1]]));return{Component:s.component,Layouts:s.layouts,params:i,meta:s.meta}}}return null}getErrorComponentByPath(e){const n=this.#n(e),r=n.length>1&&n.at(-1)==="/"?n.substring(0,n.length-1):n;if(this.#t[r])return this.#t[r];const o=r.split("/").filter(Boolean);for(let s=o.length;s>=1;s--){const c="/"+o.slice(0,s).join("/");if(this.#t[c])return this.#t[c]}return this.#t["/"]?this.#t["/"]:(console.log("No error component found"),null)}get basePath(){return this.#e}getFullPath(e){return this.#e==="/"?e:e==="/"?this.#e:e.startsWith(this.#e)?e:this.#e+e}getPathFromUrl(e){try{let r=new URL(e).pathname;return r=this.#n(r),r.length>1&&r.endsWith("/")&&(r=r.slice(0,-1)),r}catch{return this.#n(e)}}getAllViewComponents(){return Object.values(this.#r).map(e=>({Component:e.component,Layouts:e.layouts,meta:e.meta}))}#a(e){const n=[],r=["/",...e.match(/[^/]+/g)||[]];let o=r[0];for(let s=0;s<r.length;s++){const c=[];for(const i in this.#o){const[u,l]=i.split("#");u===o&&c.push({key:l,component:this.#o[i]})}n.push(...c),o+=r[s+1]}return n}}function Oe({basePath:t,config:e,external:n=[],children:r}){const o=p.useMemo(()=>new Te(e,t),[e,t]),[s,c]=p.useState(F("load",o));return p.useEffect(()=>{for(const i of n??[])import(i.url).then(u=>{if(!Array.isArray(u.routes))throw new Error(`Invalid routes in ${i.url}`);o.registerRoutes(u.routes,!0)}).catch(u=>{console.error(u.message)})},[n,o]),p.useEffect(()=>{t&&t!=="/"&&window.location.pathname==="/"&&window.history.replaceState(null,"",t)},[t]),p.useEffect(()=>{const i=()=>c(F("popstate",o)),u=()=>c(F("pushstate",o)),l=()=>c(F("replacestate",o));return W(window,"popstate",i),W(window,"pushstate",u),W(window,"replacestate",l),()=>{U(window,"popstate",i),U(window,"pushstate",u),U(window,"replacestate",l)}},[o]),f.jsx($.Provider,{value:{clientRouter:o,...s},children:r})}function F(t,e){const{state:n,length:r}=A(),{hash:o,host:s,hostname:c,href:i,origin:u,pathname:l,port:h,protocol:y,search:g}=window.location;return{trigger:t,state:n,length:r,hash:o,host:s,hostname:c,href:i,origin:u,pathname:l,port:h,protocol:y,search:g,navigate:(m,R,v,E)=>{je(e,m,R,v,n,E)},close:m=>{Pe(m,n)}}}function T(){const t=p.useContext($);if(t===void 0)throw new Error("useRouter must be used within a RouterProvider");return t}function Ve(t,e){if(!t||!e)return t===e;if(t.length!==e.length)return!1;for(let n=0;n<t.length;n++){const r=t[n],o=e[n];if(r.id!==o.id||r.url!==o.url||r.layout!==o.layout||r.target!==o.target||!Y(r.params,o.params)||!Y(r.queryParams,o.queryParams)||!Y(r.props,o.props)||r.meta!==o.meta&&(!r.meta||!o.meta||r.meta.type!==o.meta.type))return!1}return!0}function Y(t,e){if(t===e)return!0;if(!t||!e)return!1;const n=Object.keys(t),r=Object.keys(e);if(n.length!==r.length)return!1;for(const o of n)if(t[o]!==e[o])return!1;return!0}function re(){const{state:t,clientRouter:e}=T()||{},n=p.useRef(void 0),r=!Ve(n.current,t.views);return p.useMemo(()=>{const s=[],c=[];return t.views.forEach(i=>{const u=new URL(i.url,"http://dummy.base"),l=e?.getViewComponentByPath(u.pathname),h=i.params||l?.params||{},y=i.meta||l?.meta,g={view:i,meta:y,Component:l?.Component,Layouts:l?.Layouts,params:h};i.target==="_void"?c.push(g):s.push(g)}),n.current=t.views,{viewStack:s,voidViews:c}},[r,e])}const ne=p.createContext({viewId:"",isActive:!1,vw:0,queryParams:{},setQueryParams:()=>{},setProps:()=>{},queryParam:()=>{},close:()=>{},state:{id:"",views:[]}});function oe({id:t,vw:e,layout:n,children:r,params:o,queryParams:s,props:c}){const{state:i,close:u}=T(),[l,h]=p.useState(t===i.id),[y,g]=p.useState(c||{});return p.useEffect(()=>{h(t===i.id)},[i.id,t]),f.jsx(ne.Provider,{value:{viewId:t,isActive:l,vw:e,params:o,queryParams:s,props:y,layout:n,state:i,setProps:(m,R)=>{const v=R?m||{}:{...c,...m};for(const E in v)v[E]===void 0&&delete v[E];g(v),ke(t,v)},setQueryParams:(m,R)=>{const v=R!==!0?{...c||{}}:{};let E=!1;for(const P in m){const M=m[P];typeof M<"u"?(v[P]=M,E=!0):Object.prototype.hasOwnProperty.call(v,P)&&(delete v[P],E=!0)}(E||R===!0)&&Se(t,v)},queryParam:m=>c?.[m],close:()=>{u(t)}},children:r})}function Ce(t,e){const n=e.filter(o=>o.view.target!=="_void").map(o=>({id:o.view.id,breakpoints:o.meta?.breakpoints||[]})),r=Ae(t,n);return e.map(({view:o})=>({id:o.id,vw:r.find(s=>s.id===o.id)?.vw||0}))}function Ae(t,e){if(e.length===0)return[];const r=e.map(c=>({id:c.id,minVw:Le(c,t)})),o=r.reduce((c,i)=>c+i.minVw,0);if(o>=100)return r.map(c=>({id:c.id,vw:c.minVw}));const s=100-o;return r.map(c=>{const i=c.minVw/o,u=s*i;return{id:c.id,vw:Number((c.minVw+u).toFixed(0))}})}function Le(t,e){const r=[...t.breakpoints].sort((o,s)=>s.breakpoint-o.breakpoint).find(o=>e>=o.breakpoint);return r?r.minVw:100}function se({children:t}){return f.jsx(f.Fragment,{children:t})}const z=p.createContext({setSlot:()=>{},getSlots:()=>({})});function ae({children:t}){const[e,n]=p.useState({}),r=p.useCallback((s,c,i)=>{n(u=>({...u,[s]:{...u[s],[c]:i}}))},[]),o=p.useCallback(s=>e[s]||{},[e]);return f.jsx(z.Provider,{value:{setSlot:r,getSlots:o},children:t})}function Ne({viewUrl:t,error:e,errorCode:n,errorInfo:r,reset:o}){const{clientRouter:s}=T(),c=s?.getErrorComponentByPath(s?.getPathFromUrl(t)??"/");return c?f.jsx(c,{error:e,errorCode:n??0,errorInfo:r,reset:o}):f.jsxs("div",{style:{margin:"10px",border:"2px solid #ff6b6b",borderRadius:"8px",backgroundColor:"#fff5f5",width:"100%",display:"flex",flexDirection:"column",alignItems:"center",padding:"20px"},children:[f.jsx("h1",{style:{color:"#c92a2a",marginBottom:"10px",fontWeight:"bold"},children:"Unhandled error"}),f.jsx("p",{style:{marginBottom:"15px",textAlign:"center"},children:e.message}),f.jsxs("details",{style:{marginBottom:"15px",width:"100%"},children:[f.jsx("summary",{style:{cursor:"pointer",marginBottom:"10px",textAlign:"center"},children:"Technical details"}),f.jsxs("div",{style:{backgroundColor:"#f8f9fa",padding:"10px",borderRadius:"4px",overflow:"auto",maxHeight:"200px"},children:[f.jsx("h4",{style:{margin:"0 0 10px 0",fontSize:"14px"},children:"Stack Trace:"}),f.jsx("pre",{style:{fontSize:"12px",margin:0,whiteSpace:"pre-wrap"},children:e.stack}),r?.componentStack&&f.jsxs(f.Fragment,{children:[f.jsx("h4",{style:{margin:"15px 0 10px 0",fontSize:"14px"},children:"Component Stack:"}),f.jsx("pre",{style:{fontSize:"12px",margin:0,whiteSpace:"pre-wrap"},children:r.componentStack})]})]})]}),f.jsx("button",{onClick:o,style:{backgroundColor:"#228be6",color:"white",border:"none",padding:"8px 16px",borderRadius:"4px",cursor:"pointer"},children:"Try again"})]})}class B extends p.Component{constructor(e){super(e),this.state={hasError:!!e.error,errorCode:e.errorCode,error:e.error}}static getDerivedStateFromError(e){return{hasError:!0,error:e}}componentDidCatch(e,n){console.error(`Error in view ${this.props.viewUrl}:`,e,n),this.setState({errorInfo:n})}reset=()=>{this.setState({hasError:!1,error:void 0,errorInfo:void 0})};render(){return!this.state.hasError||!this.state.error?this.props.children:f.jsx(Ne,{viewUrl:this.props.viewUrl,error:this.state.error,errorCode:this.state.errorCode,errorInfo:this.state.errorInfo,reset:this.reset})}}function We({className:t,style:e={}}){const{viewStack:n}=re(),[r,o]=p.useState(window.innerWidth);p.useEffect(()=>{const u=()=>o(window.innerWidth);return window.addEventListener("resize",u),()=>window.removeEventListener("resize",u)},[]);const s=p.useMemo(()=>Ce(r,n),[r,n]),c=p.useMemo(()=>{let u=0,l=0;for(let h=n.length-1;h>=0;h--)if(u+=s[h]?.vw||0,u>100){l=h+1;break}return n.slice(l)},[s,n]),i=p.useMemo(()=>{const u=n.length-c.length;return c.map((l,h)=>s[h+u].vw)},[s,n.length,c]);return f.jsx(Ue,{views:c,widths:i,style:e,className:t})}function Ue({views:t,widths:e,className:n,style:r={}}){return f.jsx(ae,{children:f.jsx("div",{className:n,style:r,children:t.map(({view:o,params:s,Layouts:c,Component:i},u)=>{if(!i)return f.jsx(B,{viewUrl:o.url,errorCode:404,error:new Error("Not found")},o.id);const l=c?.length?c.filter(h=>h.key===o.layout):[{component:se}];return f.jsx(B,{viewUrl:o.url||"/",children:f.jsx(oe,{id:o.id,vw:e[u],params:s,queryParams:o.queryParams,props:o.props,children:ie(l,i,s)},o.id)},o.id)})})})}function ie(t,e,n){if(t.length===0)return f.jsx(e,{...n||{}});const[r,...o]=t,s=r.component;return f.jsx(s,{children:ie(o,e,n)},r.key)}function Fe({className:t,style:e={}}){const{voidViews:n}=re();return f.jsx(Me,{views:n,style:e,className:t})}function Me({views:t,className:e,style:n={}}){return f.jsx(ae,{children:f.jsx("div",{className:e,style:n,children:t.map(({view:r,params:o,Layouts:s,Component:c})=>{const i=s?.length?s.filter(u=>u.key===r.layout):[{component:se}];return f.jsx(B,{viewUrl:r.url||"/",children:f.jsx(oe,{id:r.id,vw:0,params:o,queryParams:r.queryParams,props:r.props,layout:r.layout,children:ce(i,c,o)},r.id)},r.id)})})})}function ce(t,e,n){if(t.length===0)return e?f.jsx(e,{...n||{}}):null;const[r,...o]=t,s=r.component;return f.jsx(s,{children:ce(o,e,n)},r.key)}function L(){const t=p.useContext(ne);if(t===void 0)throw new Error("useView must be used within a ViewProvider");return t}function Ie({children:t,style:e={},className:n}){const{viewId:r}=L(),o=p.useRef(null),s=p.useMemo(()=>{const i={...e};return i.containerType||(i.containerType="size"),i.containerName||(i.containerName="view"),i},[e]),c=p.useMemo(()=>{let i=n??"";return i.includes("@container")||(i+=" @container/view"),i},[n]);return p.useEffect(()=>{if(!o.current)return;const i=()=>{Re(r)},u=o.current;return W(u,"click",i),()=>U(u,"click",i)},[r,o]),f.jsx("div",{ref:o,style:s,className:c,children:t})}function De({href:t,query:e={},children:n,className:r,target:o="_self",onClick:s,props:c,layout:i}){const{navigate:u}=T(),{url:l,queryParams:h}=I(t,e),{viewId:y}=L(),g=R=>{s&&(s(R),R.isDefaultPrevented())||l.startsWith("https://")||l.startsWith("http://")||o==="_blank"||R.metaKey||R.ctrlKey||(R.preventDefault(),u(y,l,h,{append:R.shiftKey,target:o,props:c,layout:i}))},m=xe(l)?"noopener noreferrer":void 0;return f.jsx("a",{rel:m,href:l,onClick:g,className:r,target:o,children:n})}function Ye({slot:t}){const{viewId:e}=L(),{getSlots:n}=p.useContext(z),r=n(e);return f.jsx(f.Fragment,{children:r[t]})}function ze({slot:t,children:e}){const{viewId:n}=L(),{setSlot:r}=p.useContext(z);return p.useEffect(()=>(r(n,t,e),()=>r(n,t,null)),[n,t,e,r]),null}function Be(){const{navigate:t}=T();return(e,n)=>{const{state:r}=A(),{url:o,queryParams:s}=I(e);t(r.id||"",o,s,{append:!1,target:n?.target||"_self",props:n?.props,layout:n?.layout})}}function He(t){const{url:e}=I(t);return e}function Ge(t,e){const{state:n}=T();return p.useMemo(()=>{const o=[];return n.views.forEach(s=>{if(s.meta?.type===t){if(e){const c=s.params||{};if(!Object.entries(e).every(([u,l])=>c[u]===l))return}o.push({id:s.id,url:s.url,params:s.params,queryParams:s.queryParams,props:s.props,layout:s.layout,target:s.target,isActive:s.id===n.id})}}),o},[n.views,n.id,t,e])}function Je(t,e=""){const n=[],r={},o={};return Object.entries(t).forEach(([s,c])=>{let i=s.replace(e,"").replace(/\.tsx$/,"").replace(/\/index$/,"").replace(/([A-Z])/g,h=>`/${h.toLowerCase()}`).replace(/\/\//g,"/").toLowerCase()||"/";i===""||i==="index"?i="/":i&&!i.startsWith("/")&&(i="/"+i);const u=i.match(/^(.*)\/(_error)$/);if(u){const[,h]=u,y=h||"/";o[y]=c.default;return}const l=i.match(/^(.*)\/(_layout(?:\.([^/]+))?)$/);if(l){const[,h,,y]=l,g=h||"/";if(y){const m=`${g}#${y}`;r[m]=c.default}else r[g]=c.default}else i.includes("/_")||n.push({path:i,component:c.default,meta:c.default?.meta||{breakpoints:[]}})}),{routes:n,layouts:r,errors:o}}x.Fill=ze,x.Link=De,x.Outlet=Ye,x.RouterProvider=Oe,x.StackedView=Ie,x.StackedViewGroup=We,x.VoidViews=Fe,x.mapRoutes=Je,x.useHref=He,x.useNavigate=Be,x.useOpenViews=Ge,x.useView=L,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotvoid/stacked-router",
-  "version": "1.0.0",
+  "version": "1.1.2",
   "license": "MIT",
   "type": "module",
   "author": {