aberdeen 1.0.12 → 1.1.0

package/dist/dispatcher.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Symbol to return when a custom {@link Dispatcher.addRoute} matcher cannot match a segment.
+ */
+export declare const matchFailed: unique symbol;
+/**
+ * Special {@link Dispatcher.addRoute} matcher that matches the rest of the segments as an array of strings.
+ */
+export declare const matchRest: unique symbol;
+type Matcher = string | ((segment: string) => any) | typeof matchRest;
+type ExtractParamType<M> = M extends string ? never : (M extends ((segment: string) => infer R) ? Exclude<R, typeof matchFailed> : (M extends typeof matchRest ? string[] : never));
+type ParamsFromMatchers<T extends Matcher[]> = T extends [infer M1, ...infer Rest] ? (M1 extends Matcher ? (ExtractParamType<M1> extends never ? ParamsFromMatchers<Rest extends Matcher[] ? Rest : []> : [ExtractParamType<M1>, ...ParamsFromMatchers<Rest extends Matcher[] ? Rest : []>]) : never) : [];
+/**
+ * Simple route matcher and dispatcher.
+ *
+ * Example usage:
+ *
+ * ```ts
+ * const dispatcher = new Dispatcher();
+ *
+ * dispatcher.addRoute("user", Number, "stream", String, (id, stream) => {
+ *    console.log(`User ${id}, stream ${stream}`);
+ * });
+ *
+ * dispatcher.dispatch(["user", "42", "stream", "music"]);
+ * // Logs: User 42, stream music
+ *
+ * dispatcher.addRoute("search", matchRest, (terms: string[]) => {
+ *     console.log("Search terms:", terms);
+ * });
+ *
+ * dispatcher.dispatch(["search", "classical", "piano"]);
+ * // Logs: Search terms: [ 'classical', 'piano' ]
+ * ```
+ */
+export declare class Dispatcher {
+    private routes;
+    /**
+     * Add a route with matchers and a handler function.
+     * @param args An array of matchers followed by a handler function. Each matcher can be:
+     * - A string: matches exactly that string.
+     * - A function: takes a string segment and returns a value (of any type) if it matches, or {@link matchFailed} if it doesn't match. The return value (if not `matchFailed` and not `NaN`) is passed as a parameter to the handler function. The built-in functions `Number` and `String` can be used to match numeric and string segments respectively.
+     * - The special {@link matchRest} symbol: matches the rest of the segments as an array of strings. Only one `matchRest` is allowed, and it must be the last matcher.
+     * @template T - Array of matcher types.
+     * @template H - Handler function type, inferred from the matchers.
+     */
+    addRoute<T extends Matcher[], H extends (...args: ParamsFromMatchers<T>) => void>(...args: [...T, H]): void;
+    /**
+     * Dispatches the given segments to the first route handler that matches.
+     * @param segments Array of string segments to match against the added routes. When using this class with the Aberdeen `route` module, one would typically pass `route.current.p`.
+     * @returns True if a matching route was found and handled, false otherwise.
+     */
+    dispatch(segments: string[]): boolean;
+}
+export {};

package/dist/dispatcher.js

@@ -0,0 +1,65 @@
+// src/dispatcher.ts
+var matchFailed = Symbol("matchFailed");
+var matchRest = Symbol("matchRest");
+
+class Dispatcher {
+  routes = [];
+  addRoute(...args) {
+    const matchers = args.slice(0, -1);
+    const handler = args[args.length - 1];
+    if (typeof handler !== "function") {
+      throw new Error("Last argument should be a handler function");
+    }
+    const restCount = matchers.filter((m) => m === matchRest).length;
+    if (restCount > 1) {
+      throw new Error("Only one matchRest is allowed");
+    }
+    this.routes.push({ matchers, handler });
+  }
+  dispatch(segments) {
+    for (const route of this.routes) {
+      const args = matchRoute(route, segments);
+      if (args) {
+        route.handler(...args);
+        return true;
+      }
+    }
+    return false;
+  }
+}
+function matchRoute(route, segments) {
+  const args = [];
+  let segmentIndex = 0;
+  for (const matcher of route.matchers) {
+    if (matcher === matchRest) {
+      const len = segments.length - (route.matchers.length - 1);
+      if (len < 0)
+        return;
+      args.push(segments.slice(segmentIndex, segmentIndex + len));
+      segmentIndex += len;
+      continue;
+    }
+    if (segmentIndex >= segments.length)
+      return;
+    const segment = segments[segmentIndex];
+    if (typeof matcher === "string") {
+      if (segment !== matcher)
+        return;
+    } else if (typeof matcher === "function") {
+      const result = matcher(segment);
+      if (result === matchFailed || typeof result === "number" && isNaN(result))
+        return;
+      args.push(result);
+    }
+    segmentIndex++;
+  }
+  return args;
+}
+export {
+  matchRest,
+  matchFailed,
+  Dispatcher
+};
+
+//# debugId=30EC556B1C5E03CD64756E2164756E21
+//# sourceMappingURL=dispatcher.js.map

package/dist/dispatcher.js.map

@@ -0,0 +1,10 @@
+{
+  "version": 3,
+  "sources": ["../src/dispatcher.ts"],
+  "sourcesContent": [
+    "/**\n * Symbol to return when a custom {@link Dispatcher.addRoute} matcher cannot match a segment.\n */\nexport const matchFailed: unique symbol = Symbol(\"matchFailed\");\n\n/**\n * Special {@link Dispatcher.addRoute} matcher that matches the rest of the segments as an array of strings.\n */\nexport const matchRest: unique symbol = Symbol(\"matchRest\");\n\ntype Matcher = string | ((segment: string) => any) | typeof matchRest;\n\ntype ExtractParamType<M> =  M extends string\n? never : (\n    M extends ((segment: string) => infer R)\n    ? Exclude<R, typeof matchFailed>\n    : (M extends typeof matchRest ? string[] : never)\n);\n\ntype ParamsFromMatchers<T extends Matcher[]> = T extends [infer M1, ...infer Rest]\n? (\n    M1 extends Matcher\n    ? (\n        ExtractParamType<M1> extends never\n        ? ParamsFromMatchers<Rest extends Matcher[] ? Rest : []>\n        : [ExtractParamType<M1>, ...ParamsFromMatchers<Rest extends Matcher[] ? Rest : []>]\n    ) : never\n) : [];\n\ninterface DispatcherRoute {\n    matchers: Matcher[];\n    handler: (...params: any[]) => void;\n}\n\n/**\n * Simple route matcher and dispatcher.\n * \n * Example usage:\n * \n * ```ts\n * const dispatcher = new Dispatcher();\n * \n * dispatcher.addRoute(\"user\", Number, \"stream\", String, (id, stream) => {\n *    console.log(`User ${id}, stream ${stream}`);\n * });\n *\n * dispatcher.dispatch([\"user\", \"42\", \"stream\", \"music\"]);\n * // Logs: User 42, stream music\n * \n * dispatcher.addRoute(\"search\", matchRest, (terms: string[]) => {\n *     console.log(\"Search terms:\", terms);\n * });\n * \n * dispatcher.dispatch([\"search\", \"classical\", \"piano\"]);\n * // Logs: Search terms: [ 'classical', 'piano' ]\n * ```\n */\nexport class Dispatcher {\n    private routes: Array<DispatcherRoute> = [];\n    \n    /**\n     * Add a route with matchers and a handler function.\n     * @param args An array of matchers followed by a handler function. Each matcher can be:\n     * - A string: matches exactly that string.\n     * - A function: takes a string segment and returns a value (of any type) if it matches, or {@link matchFailed} if it doesn't match. The return value (if not `matchFailed` and not `NaN`) is passed as a parameter to the handler function. The built-in functions `Number` and `String` can be used to match numeric and string segments respectively.\n     * - The special {@link matchRest} symbol: matches the rest of the segments as an array of strings. Only one `matchRest` is allowed, and it must be the last matcher.\n     * @template T - Array of matcher types.\n     * @template H - Handler function type, inferred from the matchers.\n     */\n    addRoute<T extends Matcher[], H extends (...args: ParamsFromMatchers<T>) => void>(...args: [...T, H]): void {\n        const matchers = args.slice(0, -1) as Matcher[];\n        const handler = args[args.length - 1] as (...args: any) => any;\n\n        if (typeof handler !== \"function\") {\n            throw new Error(\"Last argument should be a handler function\");\n        }\n        \n        const restCount = matchers.filter(m => m === matchRest).length;\n        if (restCount > 1) {\n            throw new Error(\"Only one matchRest is allowed\");\n        }\n\n        this.routes.push({ matchers, handler });\n    }\n    \n    /**\n     * Dispatches the given segments to the first route handler that matches.\n     * @param segments Array of string segments to match against the added routes. When using this class with the Aberdeen `route` module, one would typically pass `route.current.p`.\n     * @returns True if a matching route was found and handled, false otherwise.\n     */\n    dispatch(segments: string[]): boolean {\n        for (const route of this.routes) {\n            const args = matchRoute(route, segments);\n            if (args) {\n                route.handler(...args);\n                return true;\n            }\n        }\n        return false;\n    }\n}\n\nfunction matchRoute(route: DispatcherRoute, segments: string[]): any[] | undefined {\n    const args: any[] = [];\n    let segmentIndex = 0;\n\n    for (const matcher of route.matchers) {\n        if (matcher === matchRest) {\n            const len = segments.length - (route.matchers.length - 1);\n            if (len < 0) return;\n            args.push(segments.slice(segmentIndex, segmentIndex + len));\n            segmentIndex += len;\n            continue;\n        }\n\n        if (segmentIndex >= segments.length) return;\n        const segment = segments[segmentIndex];\n        \n        if (typeof matcher === \"string\") {\n            if (segment !== matcher) return;\n        } else if (typeof matcher === \"function\") {\n            const result = matcher(segment);\n            if (result === matchFailed || (typeof result === 'number' && isNaN(result))) return;\n            args.push(result);\n        }\n        \n        segmentIndex++;\n    }\n    return args; // success!\n}\n"
+  ],
+  "mappings": ";AAGO,IAAM,cAA6B,OAAO,aAAa;AAKvD,IAAM,YAA2B,OAAO,WAAW;AAAA;AAiDnD,MAAM,WAAW;AAAA,EACZ,SAAiC,CAAC;AAAA,EAW1C,QAAiF,IAAI,MAAuB;AAAA,IACxG,MAAM,WAAW,KAAK,MAAM,GAAG,EAAE;AAAA,IACjC,MAAM,UAAU,KAAK,KAAK,SAAS;AAAA,IAEnC,IAAI,OAAO,YAAY,YAAY;AAAA,MAC/B,MAAM,IAAI,MAAM,4CAA4C;AAAA,IAChE;AAAA,IAEA,MAAM,YAAY,SAAS,OAAO,OAAK,MAAM,SAAS,EAAE;AAAA,IACxD,IAAI,YAAY,GAAG;AAAA,MACf,MAAM,IAAI,MAAM,+BAA+B;AAAA,IACnD;AAAA,IAEA,KAAK,OAAO,KAAK,EAAE,UAAU,QAAQ,CAAC;AAAA;AAAA,EAQ1C,QAAQ,CAAC,UAA6B;AAAA,IAClC,WAAW,SAAS,KAAK,QAAQ;AAAA,MAC7B,MAAM,OAAO,WAAW,OAAO,QAAQ;AAAA,MACvC,IAAI,MAAM;AAAA,QACN,MAAM,QAAQ,GAAG,IAAI;AAAA,QACrB,OAAO;AAAA,MACX;AAAA,IACJ;AAAA,IACA,OAAO;AAAA;AAEf;AAEA,SAAS,UAAU,CAAC,OAAwB,UAAuC;AAAA,EAC/E,MAAM,OAAc,CAAC;AAAA,EACrB,IAAI,eAAe;AAAA,EAEnB,WAAW,WAAW,MAAM,UAAU;AAAA,IAClC,IAAI,YAAY,WAAW;AAAA,MACvB,MAAM,MAAM,SAAS,UAAU,MAAM,SAAS,SAAS;AAAA,MACvD,IAAI,MAAM;AAAA,QAAG;AAAA,MACb,KAAK,KAAK,SAAS,MAAM,cAAc,eAAe,GAAG,CAAC;AAAA,MAC1D,gBAAgB;AAAA,MAChB;AAAA,IACJ;AAAA,IAEA,IAAI,gBAAgB,SAAS;AAAA,MAAQ;AAAA,IACrC,MAAM,UAAU,SAAS;AAAA,IAEzB,IAAI,OAAO,YAAY,UAAU;AAAA,MAC7B,IAAI,YAAY;AAAA,QAAS;AAAA,IAC7B,EAAO,SAAI,OAAO,YAAY,YAAY;AAAA,MACtC,MAAM,SAAS,QAAQ,OAAO;AAAA,MAC9B,IAAI,WAAW,eAAgB,OAAO,WAAW,YAAY,MAAM,MAAM;AAAA,QAAI;AAAA,MAC7E,KAAK,KAAK,MAAM;AAAA,IACpB;AAAA,IAEA;AAAA,EACJ;AAAA,EACA,OAAO;AAAA;",
+  "debugId": "30EC556B1C5E03CD64756E2164756E21",
+  "names": []
+}

package/dist/route.d.ts

@@ -1,47 +1,96 @@
+type NavType = "load" | "back" | "forward" | "go";
 /**
- * The class for the singleton `route` object.
- *
- */
-export declare class Route {
-    /** The current path of the URL split into components. For instance `/` or `/users/123/feed`. Updates will be reflected in the URL and will *push* a new entry to the browser history. */
+* The class for the global `route` object.
+*/
+export interface Route {
+    /** The current path of the URL as a string. For instance `"/"` or `"/users/123/feed"`. Paths are normalized to always start with a `/` and never end with a `/` (unless it's the root path). */
     path: string;
-    /** Array containing the path segments. For instance `[]` or `['users', 123, 'feed']`. Updates will be reflected in the URL and will *push* a new entry to the browser history. Also, the values of `p` and `path` will be synced. */
+    /** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', '123', 'feed']` (for `"/users/123/feed"`). */
     p: string[];
-    /** An observable object containing search parameters (a split up query string). For instance `{order: "date", title: "something"}` or just `{}`. By default, updates will be reflected in the URL, replacing the current history state. */
+    /** The hash fragment including the leading `#`, or an empty string. For instance `"#my_section"` or `""`. */
     hash: string;
-    /** A part of the browser history *state* that is considered part of the page *identify*, meaning changes will (by default) cause a history push, and when going *back*, it must match. */
+    /** The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y"}`. */
     search: Record<string, string>;
-    /** The `hash` interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y"}`. */
-    id: Record<string, any>;
-    /** The auxiliary part of the browser history *state*, not considered part of the page *identity*. Changes will be reflected in the browser history using a replace. */
-    aux: Record<string, any>;
+    /** An object to be used for any additional data you want to associate with the current page. Data should be JSON-compatible. */
+    state: Record<string, any>;
     /** The navigation depth of the current session. Starts at 1. Writing to this property has no effect. */
     depth: number;
     /** The navigation action that got us to this page. Writing to this property has no effect.
-        - `"load"`: An initial page load.
-        - `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
-        - `"push"`: When we added a new page on top of the stack.
-    */
-    nav: "load" | "back" | "forward" | "push";
-    /** As described above, this library takes a best guess about whether pushing an item to the browser history makes sense or not. When `mode` is...
-        - `"push"`: Force creation of a new browser history entry.
-        - `"replace"`: Update the current history entry, even when updates to other keys would normally cause a *push*.
-        - `"back"`: Unwind the history (like repeatedly pressing the *back* button) until we find a page that matches the given `path` and `id` (or that is the first page in our stack), and then *replace* that state by the full given state.
-        The `mode` key can be written to `route` but will be immediately and silently removed.
+    - `"load"`: An initial page load.
+    - `"back"` or `"forward"`: When we navigated backwards or forwards in the stack.
+    - `"go"`: When we added a new page on top of the stack.
+    Mostly useful for page transition animations. Writing to this property has no effect.
     */
-    mode: "push" | "replace" | "back" | undefined;
+    nav: NavType;
 }
 /**
- * The singleton {@link Route} object reflecting the current URL and browser history state. You can make changes to it to affect the URL and browser history. See {@link Route} for details.
+ * Configure logging on route changes.
+ * @param value `true` to enable logging to console, `false` to disable logging, or a custom logging function. Defaults to `false`.
  */
-export declare const route: Route;
+export declare function setLog(value: boolean | ((...args: any[]) => void)): void;
+type RouteTarget = string | (string | number)[] | Partial<Omit<Omit<Route, "p">, "search"> & {
+    /** An convenience array containing path segments, mapping to `path`. For instance `[]` (for `"/"`) or `['users', 123, 'feed']` (for `"/users/123/feed"`). Values may be integers but will be converted to strings.*/
+    p: (string | number)[];
+    /** The query string interpreted as search parameters. So `"a=x&b=y"` becomes `{a: "x", b: "y", c: 42}`. Values may be integers but will be converted to strings. */
+    search: Record<string, string | number>;
+}>;
 /**
- * Restore and store the vertical and horizontal scroll position for
- * the parent element to the page state.
+* Navigate to a new URL by pushing a new history entry.
+*
+* Note that this happens synchronously, immediately updating `route` and processing any reactive updates based on that.
+*
+* @param target A subset of the {@link Route} properties to navigate to. If neither `p` nor `path` is given, the current path is used. For other properties, an empty/default value is assumed if not given. For convenience:
+* - You may pass a string instead of an object, which is interpreted as the `path`.
+* - You may pass an array instead of an object, which is interpreted as the `p` array.
+* - If you pass `p`, it may contain numbers, which will be converted to strings.
+* - If you pass `search`, its values may be numbers, which will be converted to strings.
+*
+* Examples:
+* ```js
+* // Navigate to /users/123
+* route.go("/users/123");
+*
+* // Navigate to /users/123?tab=feed#top
+* route.go({p: ["users", 123], search: {tab: "feed"}, hash: "top"});
+* ```
+*/
+export declare function go(target: RouteTarget): void;
+/**
+ * Modify the current route by merging `target` into it (using {@link merge}), pushing a new history entry.
  *
- * @param {string} name - A unique (within this page) name for this
- * scrollable element. Defaults to 'main'.
+ * This is useful for things like opening modals or side panels, where you want a browser back action to return to the previous state.
  *
- * The scroll position will be persisted in `route.aux.scroll.<name>`.
+ * @param target Same as for {@link go}, but merged into the current route instead deleting all state.
  */
+export declare function push(target: RouteTarget): void;
+/**
+ * Try to go back in history to the first entry that matches the given target. If none is found, the given state will replace the current page. This is useful for "cancel" or "close" actions that should return to the previous page if possible, but create a new page if not (for instance when arriving at the current page through a direct link).
+ *
+ * Consider using {@link up} to go up in the path hierarchy.
+ *
+ * @param target The target route to go back to. May be a subset of {@link Route}, or a string (for `path`), or an array of strings (for `p`).
+ */
+export declare function back(target?: RouteTarget): void;
+/**
+* Navigate up in the path hierarchy, by going back to the first history entry
+* that has a shorter path than the current one. If there's none, we just shorten
+* the current path.
+*
+* Note that going back in browser history happens asynchronously, so `route` will not be updated immediately.
+*/
+export declare function up(stripCount?: number): void;
+/**
+* Restore and store the vertical and horizontal scroll position for
+* the parent element to the page state.
+*
+* @param {string} name - A unique (within this page) name for this
+* scrollable element. Defaults to 'main'.
+*
+* The scroll position will be persisted in `route.aux.scroll.<name>`.
+*/
 export declare function persistScroll(name?: string): void;
+/**
+* The global {@link Route} object reflecting the current URL and browser history state. Changes you make to this affect the current browser history item (modifying the URL if needed).
+*/
+export declare const current: Route;
+export {};

package/dist/route.js

@@ -1,169 +1,196 @@
 // src/route.ts
-import {
-  clean,
-  clone,
-  getParentElement,
-  immediateObserve,
-  observe,
-  proxy,
-  runQueue,
-  unproxy
-} from "./aberdeen.js";
-
-class Route {
-  path;
-  p;
-  hash;
-  search;
-  id;
-  aux;
-  depth = 1;
-  nav = "load";
-  mode;
-}
-var route = proxy(new Route);
-var stateRoute = {
-  nonce: -1,
-  depth: 0
-};
-function handleLocationUpdate(event) {
-  const state = event?.state || {};
-  let nav = "load";
-  if (state.route?.nonce == null) {
-    state.route = {
-      nonce: Math.floor(Math.random() * Number.MAX_SAFE_INTEGER),
-      depth: 1
-    };
-    history.replaceState(state, "");
-  } else if (stateRoute.nonce === state.route.nonce) {
-    nav = state.route.depth > stateRoute.depth ? "forward" : "back";
-  }
-  stateRoute = state.route;
-  if (unproxy(route).mode === "back") {
-    route.depth = stateRoute.depth;
-    updateHistory();
-    return;
-  }
-  const search = {};
-  for (const [k, v] of new URLSearchParams(location.search)) {
-    search[k] = v;
+import { clean, getParentElement, $, proxy, runQueue, unproxy, copy, merge, clone, leakScope } from "./aberdeen.js";
+var log = () => {};
+function setLog(value) {
+  if (value === true) {
+    log = console.log.bind(console, "aberdeen router");
+  } else if (value === false) {
+    log = () => {};
+  } else {
+    log = value;
   }
-  route.path = location.pathname;
-  route.p = location.pathname.slice(1).split("/");
-  route.search = search;
-  route.hash = location.hash;
-  route.id = state.id;
-  route.aux = state.aux;
-  route.depth = stateRoute.depth;
-  route.nav = nav;
-  if (event)
-    runQueue();
 }
-handleLocationUpdate();
-window.addEventListener("popstate", handleLocationUpdate);
-function updatePath() {
-  let path = route.path;
-  if (path == null && unproxy(route).p) {
-    updateP();
-    return;
+function getRouteFromBrowser() {
+  return toCanonRoute({
+    path: location.pathname,
+    hash: location.hash,
+    search: Object.fromEntries(new URLSearchParams(location.search)),
+    state: history.state?.state || {}
+  }, "load", (history.state?.stack?.length || 0) + 1);
+}
+function equal(a, b, partial) {
+  if (a === b)
+    return true;
+  if (typeof a !== "object" || !a || typeof b !== "object" || !b)
+    return false;
+  if (a.constructor !== b.constructor)
+    return false;
+  if (b instanceof Array) {
+    if (a.length !== b.length)
+      return false;
+    for (let i = 0;i < b.length; i++) {
+      if (!equal(a[i], b[i], partial))
+        return false;
+    }
+  } else {
+    for (const k of Object.keys(b)) {
+      if (!equal(a[k], b[k], partial))
+        return false;
+    }
+    if (!partial) {
+      for (const k of Object.keys(a)) {
+        if (!b.hasOwnProperty(k))
+          return false;
+      }
+    }
   }
-  path = `${path || "/"}`;
+  return true;
+}
+function getUrl(target) {
+  const search = new URLSearchParams(target.search).toString();
+  return (search ? `${target.path}?${search}` : target.path) + target.hash;
+}
+function toCanonRoute(target, nav, depth) {
+  let path = target.path || (target.p || []).join("/") || "/";
+  path = ("" + path).replace(/\/+$/, "");
   if (!path.startsWith("/"))
     path = `/${path}`;
-  route.path = path;
-  route.p = path.slice(1).split("/");
+  return {
+    path,
+    hash: target.hash && target.hash !== "#" ? target.hash.startsWith("#") ? target.hash : "#" + target.hash : "",
+    p: path.length > 1 ? path.slice(1).replace(/\/+$/, "").split("/") : [],
+    nav,
+    search: typeof target.search === "object" && target.search ? clone(target.search) : {},
+    state: typeof target.state === "object" && target.state ? clone(target.state) : {},
+    depth
+  };
 }
-immediateObserve(updatePath);
-function updateP() {
-  const p = route.p;
-  if (p == null && unproxy(route).path) {
-    updatePath();
-    return;
+function targetToPartial(target) {
+  if (typeof target === "string") {
+    target = { path: target };
+  } else if (target instanceof Array) {
+    target = { p: target };
   }
-  if (!(p instanceof Array)) {
-    console.error(`aberdeen route: 'p' must be a non-empty array, not ${JSON.stringify(p)}`);
-    route.p = [""];
-  } else if (p.length === 0) {
-    route.p = [""];
-  } else {
-    route.path = `/${p.join("/")}`;
+  if (target.p) {
+    target.p = target.p.map(String);
+  }
+  if (target.search) {
+    for (const key of Object.keys(target.search)) {
+      target.search[key] = String(target.search[key]);
+    }
   }
+  return target;
 }
-immediateObserve(updateP);
-immediateObserve(() => {
-  if (!route.search || typeof route.search !== "object")
-    route.search = {};
-});
-immediateObserve(() => {
-  if (!route.id || typeof route.id !== "object")
-    route.id = {};
-});
-immediateObserve(() => {
-  if (!route.aux || typeof route.aux !== "object")
-    route.aux = {};
-});
-immediateObserve(() => {
-  let hash = `${route.hash || ""}`;
-  if (hash && !hash.startsWith("#"))
-    hash = `#${hash}`;
-  route.hash = hash;
-});
-function isSamePage(path, state) {
-  return location.pathname === path && JSON.stringify(history.state.id || {}) === JSON.stringify(state.id || {});
+function go(target) {
+  const stack = history.state?.stack || [];
+  prevStack = stack.concat(JSON.stringify(unproxy(current)));
+  const newRoute = toCanonRoute(targetToPartial(target), "go", prevStack.length + 1);
+  copy(current, newRoute);
+  log("go", newRoute);
+  history.pushState({ state: newRoute.state, stack: prevStack }, "", getUrl(newRoute));
+  runQueue();
 }
-function updateHistory() {
-  let mode = route.mode;
-  const state = {
-    id: clone(route.id),
-    aux: clone(route.aux),
-    route: stateRoute
-  };
-  const path = route.path;
-  if (mode === "back") {
-    route.nav = "back";
-    if (!isSamePage(path, state) && (history.state.route?.depth || 0) > 1) {
-      history.back();
+function push(target) {
+  let copy2 = clone(unproxy(current));
+  merge(copy2, targetToPartial(target));
+  go(copy2);
+}
+function back(target = {}) {
+  const partial = targetToPartial(target);
+  const stack = history.state?.stack || [];
+  for (let i = stack.length - 1;i >= 0; i--) {
+    const histRoute = JSON.parse(stack[i]);
+    if (equal(histRoute, partial, true)) {
+      const pages = i - stack.length;
+      log(`back`, pages, histRoute);
+      history.go(pages);
       return;
     }
-    mode = "replace";
   }
-  if (mode)
-    route.mode = undefined;
-  const search = new URLSearchParams(route.search).toString();
-  const url = (search ? `${path}?${search}` : path) + route.hash;
-  if (mode === "push" || !mode && !isSamePage(path, state)) {
-    stateRoute.depth++;
-    history.pushState(state, "", url);
-    route.nav = "push";
-    route.depth = stateRoute.depth;
-  } else {
-    history.replaceState(state, "", url);
+  const newRoute = toCanonRoute(partial, "back", stack.length + 1);
+  log(`back not found, replacing`, partial);
+  copy(current, newRoute);
+}
+function up(stripCount = 1) {
+  const currentP = unproxy(current).p;
+  const stack = history.state?.stack || [];
+  for (let i = stack.length - 1;i >= 0; i--) {
+    const histRoute = JSON.parse(stack[i]);
+    if (histRoute.p.length < currentP.length && equal(histRoute.p, currentP.slice(0, histRoute.p.length), false)) {
+      log(`up to ${i + 1} / ${stack.length}`, histRoute);
+      history.go(i - stack.length);
+      return;
+    }
   }
+  const newRoute = toCanonRoute({ p: currentP.slice(0, currentP.length - stripCount) }, "back", stack.length + 1);
+  log(`up not found, replacing`, newRoute);
+  copy(current, newRoute);
 }
-observe(updateHistory);
 function persistScroll(name = "main") {
   const el = getParentElement();
   el.addEventListener("scroll", onScroll);
   clean(() => el.removeEventListener("scroll", onScroll));
-  const restore = unproxy(route).aux.scroll?.name;
+  const restore = unproxy(current).state.scroll?.[name];
   if (restore) {
+    log("restoring scroll", name, restore);
     Object.assign(el, restore);
   }
   function onScroll() {
-    route.mode = "replace";
-    if (!route.aux.scroll)
-      route.aux.scroll = {};
-    route.aux.scroll[name] = {
+    (current.state.scroll ||= {})[name] = {
       scrollTop: el.scrollTop,
       scrollLeft: el.scrollLeft
     };
   }
 }
+var prevStack;
+var current = proxy({});
+function reset() {
+  prevStack = history.state?.stack || [];
+  const initRoute = getRouteFromBrowser();
+  log("initial", initRoute);
+  copy(unproxy(current), initRoute);
+}
+reset();
+window.addEventListener("popstate", function(event) {
+  const newRoute = getRouteFromBrowser();
+  const stack = history.state?.stack || [];
+  if (stack.length !== prevStack.length) {
+    const maxIndex = Math.min(prevStack.length, stack.length) - 1;
+    if (maxIndex < 0 || stack[maxIndex] === prevStack[maxIndex]) {
+      newRoute.nav = stack.length < prevStack.length ? "back" : "forward";
+    }
+  }
+  prevStack = stack;
+  log("popstate", newRoute);
+  copy(current, newRoute);
+  runQueue();
+});
+leakScope(() => {
+  $(() => {
+    current.path = "/" + Array.from(current.p).join("/");
+  });
+  $(() => {
+    const stack = history.state?.stack || [];
+    const newRoute = toCanonRoute(current, unproxy(current).nav, stack.length + 1);
+    copy(current, newRoute);
+    const state = { state: newRoute.state, stack };
+    const url = getUrl(newRoute);
+    if (url !== location.pathname + location.search + location.hash || !equal(history.state, state, false)) {
+      log("replaceState", newRoute, state, url);
+      history.replaceState(state, "", url);
+    }
+  });
+});
 export {
-  route,
+  up,
+  setLog,
+  reset,
+  push,
   persistScroll,
-  Route
+  go,
+  current,
+  back
 };
 
-//# debugId=D9D83FC76589C40E64756E2164756E21
+//# debugId=A8B2D764F285F09564756E2164756E21
 //# sourceMappingURL=route.js.map