netjes 0.0.0-stage → 0.0.2

package/dist/router.js

@@ -0,0 +1,938 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Suspense, createContext, startTransition, use, useContext, useEffect, useLayoutEffect, useMemo, useState, } from 'react';
+import { actionRequest, expectActionClient, fetchAction, setActionClient } from './actions.js';
+import { deferredRegistry, revivePayload } from './deferred.js';
+import { MissingModuleError } from './modules.js';
+import { COOKIES_HEADER, DATA_HEADER, SEGMENTS_HEADER, SERVER_TIME_HEADER, parseAntiforgery, parseNavigationPayload, } from './payload.js';
+import { ErrorBoundary, LayoutDepthContext, RouteTree } from './route-tree.js';
+import { parseLenient, parseWith } from './schema.js';
+function isLoaded(result) {
+    return 'payload' in result;
+}
+const IDLE = { state: 'idle' };
+const ANTIFORGERY_URL = '/_netjes/antiforgery';
+const NONE = { kind: 'none' };
+const TOP = { kind: 'top' };
+const STATE_KEY = '__netjes';
+const PREFETCH_TTL_MS = 30_000;
+const MAX_REDIRECTS = 10;
+const MAX_REMEMBERED_ENTRIES = 50;
+/** What a tab posts to the app's other tabs when one of its calls or posts changed cookies. */
+const COOKIES_CHANGED_MESSAGE = 'cookies-changed';
+/**
+ * The channel the tabs of one app share: same origin (BroadcastChannel's own scope) and same base path, as cookie
+ * authentication scopes its cookie to the base path by default.
+ */
+const channelName = (basePath) => `netjes:${basePath || '/'}`;
+let keyCounter = 0;
+const createKey = () => `${Date.now().toString(36)}-${(keyCounter++).toString(36)}`;
+function readKey(state) {
+    if (typeof state !== 'object' || state === null || !(STATE_KEY in state))
+        return undefined;
+    const value = state[STATE_KEY];
+    return typeof value === 'string' ? value : undefined;
+}
+/**
+ * Records how far the browser clock is from the server's, given a server time for "now": the `X-Netjes-Now` header
+ * of a data response, or for the initial document the payload's `renderedAt` (so the browser judges seeded data
+ * as fresh as the server did when it rendered, and hydration matches).
+ */
+export function withClockOffset(payload, serverNow, now = Date.now()) {
+    return serverNow === undefined || !Number.isFinite(serverNow) ? payload : { ...payload, clockOffset: now - serverNow };
+}
+/**
+ * Root-relative hrefs (`/about`, not `//host` or `https://…`) are written as if the app were mounted at the root.
+ * One that already starts with the base path (built from it on purpose) is left as it is.
+ */
+export function withBasePath(href, basePath) {
+    if (!basePath || !href.startsWith('/') || href.startsWith('//') || href.startsWith('/\\'))
+        return href;
+    const alreadyThere = href === basePath || href.startsWith(`${basePath}/`) || href.startsWith(`${basePath}?`) || href.startsWith(`${basePath}#`);
+    return alreadyThere ? href : basePath + href;
+}
+function withoutBasePath(pathname, basePath) {
+    if (!basePath || !pathname.startsWith(basePath))
+        return pathname;
+    const rest = pathname.slice(basePath.length);
+    return rest === '' ? '/' : rest.startsWith('/') ? rest : pathname;
+}
+const samePage = (a, b) => a.pathname === b.pathname && a.search === b.search;
+/** Only http(s) URLs are ever navigated to; `javascript:` and friends would run script in the page. */
+const isWebUrl = (url) => url.protocol === 'http:' || url.protocol === 'https:';
+/**
+ * The URL of a page the server sent (`payload.url`, the request's path and query), on the base's origin. That path
+ * can start with `//` (a request for `https://app//evil.example/x`), which `new URL(path, base)` reads as a host.
+ */
+function pageUrl(path, base) {
+    return path.startsWith('/') ? new URL(new URL(base).origin + path) : new URL(path, base);
+}
+/**
+ * The first page's URL. Its url is the path the browser requested, so one on another origin is not where the browser
+ * is: the router then goes by the browser's location, which refresh() reloads.
+ */
+function initialUrl(path) {
+    if (typeof window === 'undefined')
+        return pageUrl(path, 'http://localhost');
+    const url = pageUrl(path, window.location.href);
+    return url.origin === window.location.origin ? url : withHash(new URL(window.location.href), '');
+}
+function withHash(url, hash) {
+    const copy = new URL(url);
+    copy.hash = hash;
+    return copy;
+}
+function attachmentName(disposition) {
+    const encoded = /filename\*=UTF-8''([^;]+)/i.exec(disposition)?.[1];
+    if (encoded) {
+        try {
+            return decodeURIComponent(encoded);
+        }
+        catch {
+            // Fall through to the plain filename.
+        }
+    }
+    return /filename="?([^";]+)"?/i.exec(disposition)?.[1] ?? 'download';
+}
+async function fetchPayload(url, request, signal, segmentKeys = [], token, onCookiesChanged) {
+    const headers = { [DATA_HEADER]: '1', Accept: 'application/json' };
+    if (request.method === 'POST' && token?.headerName && token.requestToken)
+        headers[token.headerName] = token.requestToken;
+    if (request.method === 'GET' && segmentKeys.length > 0)
+        headers[SEGMENTS_HEADER] = segmentKeys.join(',');
+    if (request.method === 'POST' && request.contentType)
+        headers['Content-Type'] = request.contentType;
+    const init = { method: request.method, headers, credentials: 'same-origin', signal };
+    if (request.method === 'POST' && request.body !== undefined)
+        init.body = request.body;
+    const response = await fetch(url.href, init);
+    // A form post that signed someone in or out; script cannot read Set-Cookie itself.
+    if (request.method === 'POST' && response.headers.get(COOKIES_HEADER) === 'changed')
+        onCookiesChanged?.();
+    const type = response.headers.get('content-type') ?? '';
+    if (type.includes('application/x-ndjson') && response.body) {
+        // Page.Defer: the payload first, then a line per deferred value as the server completes it.
+        const registry = deferredRegistry();
+        const lines = readLines(response.body, signal);
+        const first = await lines.next();
+        if (first.done)
+            throw new Error('netjes: the server sent an empty page stream');
+        const payload = parseNavigationPayload(JSON.parse(first.value));
+        void (async () => {
+            try {
+                for await (const line of { [Symbol.asyncIterator]: () => lines }) {
+                    const item = JSON.parse(line);
+                    if (typeof item.error === 'string')
+                        registry.reject(item.id, item.error);
+                    else
+                        registry.resolve(item.id, item.value);
+                }
+            }
+            catch (error) {
+                if (!signal.aborted)
+                    console.error('netjes: reading deferred values failed', error);
+            }
+            finally {
+                // Whatever the stream did not deliver will not come: fail it, so its Suspense boundary does not wait forever.
+                registry.rejectPending((id) => `netjes: the page stream ended before deferred value ${id} arrived`);
+            }
+        })();
+        if (payload.kind !== 'page')
+            return payload;
+        const serverNow = Number(response.headers.get(SERVER_TIME_HEADER) ?? Number.NaN);
+        return withClockOffset(revivePayload(payload, registry.source), Number.isFinite(serverNow) ? serverNow : undefined);
+    }
+    if (type.includes('application/json')) {
+        const payload = parseNavigationPayload(await response.json());
+        if (payload.kind !== 'page')
+            return payload;
+        // Without the header (a cache in front of UseNetjes) there is no fresh server time: take the timestamps as they
+        // are. Falling back to renderedAt would make a cached payload look brand new.
+        const serverNow = Number(response.headers.get(SERVER_TIME_HEADER) ?? Number.NaN);
+        return withClockOffset(payload, Number.isFinite(serverNow) ? serverNow : undefined);
+    }
+    // Something other than a Netjes page answered. A GET can simply be loaded by the browser instead.
+    if (request.method === 'GET')
+        return null;
+    // A POST must not be sent again. Show what a native submission would have shown, where that is safe.
+    if (!response.ok)
+        return { failed: response.status };
+    if (type.includes('text/html'))
+        return { html: await response.text(), url: response.url || url.href };
+    const disposition = response.headers.get('content-disposition') ?? '';
+    if (/^\s*attachment/i.test(disposition))
+        return { file: await response.blob(), name: attachmentName(disposition) };
+    return { failed: response.status };
+}
+/** The lines of a streamed body, as they arrive. */
+async function* readLines(body, signal) {
+    const reader = body.getReader();
+    const decoder = new TextDecoder();
+    let buffered = '';
+    try {
+        while (!signal.aborted) {
+            const { value, done } = await reader.read();
+            if (done)
+                break;
+            buffered += decoder.decode(value, { stream: true });
+            let newline = buffered.indexOf('\n');
+            while (newline >= 0) {
+                const line = buffered.slice(0, newline).trim();
+                buffered = buffered.slice(newline + 1);
+                if (line)
+                    yield line;
+                newline = buffered.indexOf('\n');
+            }
+        }
+        const rest = (buffered + decoder.decode()).trim();
+        if (rest)
+            yield rest;
+    }
+    finally {
+        reader.releaseLock();
+    }
+}
+/** Client-side navigation: fetches page payloads from the server, keeps history in sync, restores scroll. */
+class Navigator {
+    active = null;
+    prefetched = new Map();
+    entries = new Map();
+    scrollPositions = new Map();
+    currentKey = createKey();
+    /** The page on screen is from before cookies changed: kept for no history entry until one comes from the server. */
+    currentIsStale = false;
+    /** Shared with the app's other tabs, where the browser has BroadcastChannel; null until started, and once stopped. */
+    channel = null;
+    deps;
+    current;
+    constructor(deps, current) {
+        this.deps = deps;
+        this.current = current;
+    }
+    start() {
+        window.history.scrollRestoration = 'manual';
+        const existing = readKey(window.history.state);
+        if (existing)
+            this.currentKey = existing;
+        else
+            window.history.replaceState({ ...(window.history.state ?? {}), [STATE_KEY]: this.currentKey }, '');
+        this.remember(this.currentKey, this.current);
+        let frame = 0;
+        const onScroll = () => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                this.rememberScroll();
+            });
+        };
+        const onPopState = (event) => this.onPopState(event);
+        window.addEventListener('popstate', onPopState);
+        window.addEventListener('scroll', onScroll, { passive: true });
+        const channel = typeof BroadcastChannel === 'function' ? new BroadcastChannel(channelName(this.deps.basePath)) : null;
+        if (channel) {
+            channel.onmessage = (event) => {
+                if (event.data === COOKIES_CHANGED_MESSAGE)
+                    this.cookiesChangedInAnotherTab();
+            };
+        }
+        this.channel = channel;
+        return () => {
+            window.removeEventListener('popstate', onPopState);
+            window.removeEventListener('scroll', onScroll);
+            cancelAnimationFrame(frame);
+            this.stopListeningToOtherTabs();
+        };
+    }
+    stopListeningToOtherTabs() {
+        this.channel?.close();
+        this.channel = null;
+    }
+    async navigate(href, history, scroll) {
+        const url = new URL(withBasePath(href, this.deps.basePath), window.location.href);
+        if (!isWebUrl(url)) {
+            console.error(`netjes: refusing to navigate to ${url.protocol} URL`);
+            return;
+        }
+        if (url.origin !== window.location.origin) {
+            this.hard(url);
+            return;
+        }
+        if (url.hash && samePage(url, this.current.url)) {
+            // Same document, different fragment: no fetch, just history and scroll. It supersedes any pending navigation.
+            this.cancelActive();
+            this.rememberScroll();
+            const key = createKey();
+            window.history[history === 'push' ? 'pushState' : 'replaceState']({ [STATE_KEY]: key }, '', url.href);
+            this.setCurrent(key, { ...this.current, url });
+            this.deps.commit(this.current, scroll ? { kind: 'hash', hash: url.hash } : NONE);
+            return;
+        }
+        await this.go(url, { method: 'GET' }, {
+            history,
+            scroll: !scroll ? NONE : url.hash ? { kind: 'hash', hash: url.hash } : TOP,
+            pending: 'loading',
+            usePrefetch: true,
+            reuseSegments: true,
+        });
+    }
+    submit(action, body) {
+        return this.go(action, { method: 'POST', ...body }, { history: 'auto', scroll: 'auto', pending: 'submitting', usePrefetch: false, reuseSegments: false });
+    }
+    /**
+     * Loads the page on screen again, in place: same history entry, fragment and scroll position. `keepPrefetched` after
+     * cookies changed: the prefetched pages left are all from after the change.
+     */
+    refresh({ keepPrefetched = false } = {}) {
+        if (!keepPrefetched)
+            this.prefetched.clear();
+        // In a modal (an intercepted page), as in Next.js: the modal stays open over the page it opened on.
+        const base = this.current.base;
+        return this.go(this.current.url, { method: 'GET' }, {
+            history: 'replace',
+            scroll: NONE,
+            pending: 'loading',
+            usePrefetch: false,
+            reuseSegments: false,
+            ...(base ? { interceptOver: withHash(base.url, '') } : {}),
+        });
+    }
+    /** The current page: actions send its token and URL, and refresh it when they revalidate. */
+    get page() {
+        return this.current;
+    }
+    tokenRequest = null;
+    /**
+     * A token for pages that carry none (output-cached pages leave it out so they can be shared): fetched once from
+     * the server, which also sets the antiforgery cookie, then reused.
+     */
+    fetchedToken() {
+        this.tokenRequest ??= fetch(withBasePath(ANTIFORGERY_URL, this.deps.basePath), { credentials: 'same-origin', headers: { Accept: 'application/json' } })
+            .then(async (response) => (response.ok ? parseAntiforgery(await response.json()) : undefined))
+            .catch(() => {
+            this.tokenRequest = null;
+            return undefined;
+        });
+        return this.tokenRequest;
+    }
+    /** Whether a navigation is on its way (fetching or about to commit). */
+    get navigating() {
+        return this.active !== null;
+    }
+    /** Drops the fetched token; the next action or post fetches a new one (an action may have signed the user in or out). */
+    forgetToken() {
+        this.tokenRequest = null;
+    }
+    /** After a server action: the data behind any page may have changed, so prefetched pages are dropped. */
+    forgetPrefetched() {
+        this.prefetched.clear();
+    }
+    /** The page on screen is from before cookies last changed, and no page has come from the server since. */
+    get fromBeforeCookieChange() {
+        return this.currentIsStale;
+    }
+    /**
+     * An action or post of this tab changed cookies (signed someone in or out). The app's other tabs share the cookies,
+     * so they are told, and forget the previous user's pages too.
+     */
+    cookiesChanged(from) {
+        this.forgetPagesBeforeCookieChange(from);
+        this.channel?.postMessage(COOKIES_CHANGED_MESSAGE);
+    }
+    /**
+     * Another tab of the app changed cookies: this tab forgets the same as that one did, and loads the page on screen
+     * from the server, as that tab does after its call, unless a navigation on its way (started over) shows a page
+     * soon. It posts nothing back, so tabs never answer each other's messages.
+     */
+    cookiesChangedInAnotherTab() {
+        this.forgetToken();
+        this.forgetPagesBeforeCookieChange();
+        if (!this.navigating)
+            void this.refresh({ keepPrefetched: true });
+    }
+    /**
+     * After cookies changed (signing in or out, like Next.js's rule for cookies set by an action): the pages kept for
+     * back and forward, and prefetched ones, show the app as it was before, so they are loaded from the server again.
+     * Requests still on their way went out with the old cookies: a navigation and the prefetches in flight start over.
+     * A form post (`from`, when its own response said so) is never sent twice. The page on screen stays until a page
+     * comes from the server, and is kept for no history entry, not even one a fragment link on it adds.
+     */
+    forgetPagesBeforeCookieChange(from) {
+        this.entries.clear();
+        const loading = [...this.prefetched].filter(([, prefetch]) => prefetch.loading);
+        this.prefetched.clear();
+        for (const [href, prefetch] of loading) {
+            prefetch.controller.abort();
+            this.startPrefetch(new URL(href));
+        }
+        this.currentIsStale = true;
+        const active = this.active;
+        if (active === from) {
+            if (from)
+                from.changedCookies = true;
+        }
+        else if (active?.again) {
+            active.again();
+        }
+        else if (active) {
+            active.stale = true;
+        }
+        for (const listener of this.cookieListeners)
+            listener();
+    }
+    cookieListeners = new Set();
+    onCookiesChanged(listener) {
+        this.cookieListeners.add(listener);
+        return () => this.cookieListeners.delete(listener);
+    }
+    prefetch(href) {
+        const url = new URL(withBasePath(href, this.deps.basePath), window.location.href);
+        if (url.origin !== window.location.origin)
+            return;
+        url.hash = '';
+        const now = Date.now();
+        for (const [key, entry] of this.prefetched)
+            if (now - entry.at >= PREFETCH_TTL_MS)
+                this.prefetched.delete(key);
+        if (this.prefetched.has(url.href))
+            return;
+        this.startPrefetch(url);
+    }
+    startPrefetch(url) {
+        const controller = new AbortController();
+        const prefetch = { at: Date.now(), result: this.load(url, { method: 'GET' }, controller.signal, true), controller, loading: true };
+        prefetch.result.then(() => {
+            prefetch.loading = false;
+        }, () => {
+            prefetch.loading = false;
+            // A prefetch started over has taken its place.
+            if (this.prefetched.get(url.href) === prefetch)
+                this.prefetched.delete(url.href);
+        });
+        this.prefetched.set(url.href, prefetch);
+    }
+    onPopState(event) {
+        const url = new URL(window.location.href);
+        const key = readKey(event.state) ?? createKey();
+        const saved = this.scrollPositions.get(key);
+        const scroll = saved ? { kind: 'restore', ...saved } : url.hash ? { kind: 'hash', hash: url.hash } : TOP;
+        const cached = this.entries.get(key);
+        const known = cached && samePage(cached.url, url) ? cached : samePage(url, this.current.url) ? this.current : null;
+        if (known) {
+            this.active?.controller.abort();
+            this.setCurrent(key, { ...known, url });
+            this.deps.commit(this.current, scroll);
+            return;
+        }
+        void this.go(url, { method: 'GET' }, { history: 'none', scroll, pending: 'loading', key, usePrefetch: false, reuseSegments: true });
+    }
+    async go(url, request, options) {
+        if (url.origin !== window.location.origin) {
+            // navigate() and Form hand other origins to the browser, and every page URL the router keeps is on this one.
+            // Refuse one that gets here all the same: a failed load would send the browser to it.
+            console.error(`netjes: refusing to load ${url.origin} in the client router`);
+            return;
+        }
+        this.active?.controller.abort();
+        const controller = new AbortController();
+        const navigation = {
+            controller,
+            again: request.method === 'GET'
+                ? () => {
+                    navigation.restarted = this.go(url, request, options);
+                }
+                : null,
+            stale: false,
+            changedCookies: false,
+        };
+        this.active = navigation;
+        this.deps.setPending({ state: options.pending, location: withoutBasePath(url.pathname, this.deps.basePath) + url.search });
+        let committed = false;
+        let failure;
+        try {
+            const prefetched = options.usePrefetch ? this.takePrefetched(url, controller.signal) : undefined;
+            const under = options.interceptOver ? this.load(options.interceptOver, { method: 'GET' }, controller.signal, false) : undefined;
+            under?.catch(() => { });
+            const result = await (prefetched ?? this.load(url, request, controller.signal, options.reuseSegments, () => this.cookiesChanged(navigation)));
+            // Superseded by another navigation, or started over because cookies changed: then it ends with the new attempt.
+            if (controller.signal.aborted)
+                return navigation.restarted;
+            // A post may have changed what other pages show; do not serve them from before it. One that changed cookies has
+            // dropped them already, and started those in flight over.
+            if (request.method === 'POST' && !navigation.changedCookies)
+                this.prefetched.clear();
+            if ('hard' in result) {
+                this.hard(result.hard);
+                return;
+            }
+            if ('document' in result) {
+                // The tab belongs to that document: another tab's sign-in or sign-out must not load a page into it.
+                this.stopListeningToOtherTabs();
+                this.deps.showDocument(result.document, result.url);
+                return;
+            }
+            if ('file' in result) {
+                this.deps.download(result.file, result.name);
+                return;
+            }
+            if ('failed' in result) {
+                // Keep the page, and what the user typed, as it is; useNavigation() tells the page.
+                console.error(`netjes: the form submission failed with status ${result.failed}`);
+                failure = { status: result.failed, action: withoutBasePath(url.pathname, this.deps.basePath) + url.search };
+                return;
+            }
+            const base = under ? await under.catch(() => null) : null;
+            const shown = options.reuseSegments && request.method === 'GET'
+                ? await this.intercepted(result)
+                : base && isLoaded(base)
+                    ? await this.intercepted(result, base)
+                    : result;
+            if (controller.signal.aborted)
+                return navigation.restarted;
+            const previous = this.current.url;
+            const history = options.history === 'auto' ? (samePage(shown.url, previous) ? 'replace' : 'push') : options.history;
+            let key = options.key ?? createKey();
+            if (history === 'none') {
+                if (!options.key)
+                    window.history.replaceState({ [STATE_KEY]: key }, '');
+            }
+            else {
+                this.rememberScroll();
+                key = createKey();
+                window.history[history === 'push' ? 'pushState' : 'replaceState']({ [STATE_KEY]: key }, '', shown.url.href);
+            }
+            this.currentIsStale = navigation.stale;
+            this.setCurrent(key, shown);
+            this.forgetToken();
+            committed = true;
+            const scroll = shown.base ? NONE : options.scroll === 'auto' ? (shown.url.pathname === previous.pathname ? NONE : TOP) : options.scroll;
+            this.deps.commit(shown, scroll);
+        }
+        catch (error) {
+            if (controller.signal.aborted)
+                return navigation.restarted;
+            if (request.method === 'POST') {
+                // Never turn a failed submission into a GET: keep the page, and what the user typed, as it is.
+                console.error('netjes: the form could not be submitted', error);
+                failure = { status: null, action: withoutBasePath(url.pathname, this.deps.basePath) + url.search };
+                return;
+            }
+            console.error('netjes: navigation failed, loading the page from the server instead', error);
+            this.hard(url);
+        }
+        finally {
+            if (this.active === navigation) {
+                this.active = null;
+                if (!committed)
+                    this.deps.setPending(failure ? { state: 'idle', error: failure } : IDLE);
+            }
+        }
+    }
+    async load(url, request, signal, reuseSegments, onCookiesChanged = () => this.cookiesChanged()) {
+        let target = url;
+        let current = request;
+        // After a form post everything is loaded again: the post may have changed what any layout shows.
+        let keys = reuseSegments && request.method === 'GET' ? this.heldSegmentKeys() : [];
+        // Output-cached pages carry no token; a post from one needs a fetched one (as a header).
+        const token = request.method === 'POST' && !this.current.payload.antiforgery ? await this.fetchedToken() : undefined;
+        for (let hop = 0; hop <= MAX_REDIRECTS; hop++) {
+            let payload = await fetchPayload(target, current, signal, keys, current.method === 'POST' ? token : undefined, onCookiesChanged);
+            if (payload !== null && 'kind' in payload && payload.kind === 'page' && keys.length > 0) {
+                const resolved = this.withReusedSegments(payload);
+                // The server reused a segment this page no longer has (it changed meanwhile): load it in full.
+                payload = resolved ?? (await fetchPayload(target, current, signal));
+            }
+            if (payload === null)
+                return { hard: target };
+            if ('html' in payload)
+                return { document: payload.html, url: payload.url };
+            if ('file' in payload || 'failed' in payload)
+                return payload;
+            if (payload.kind === 'redirect') {
+                target = new URL(payload.location, target);
+                if (!isWebUrl(target))
+                    throw new Error(`netjes: refusing to follow a redirect to a ${target.protocol} URL`);
+                if (target.origin !== window.location.origin)
+                    return { hard: target };
+                if (current.method !== 'GET')
+                    keys = [];
+                current = { method: 'GET' };
+                continue;
+            }
+            const finalUrl = pageUrl(payload.url, target);
+            if (finalUrl.origin !== window.location.origin)
+                throw new Error(`netjes: the page payload names another origin (${finalUrl.origin})`);
+            if (hop === 0)
+                finalUrl.hash = url.hash;
+            if (payload.version !== this.deps.version)
+                return { hard: finalUrl };
+            try {
+                return { payload, modules: await this.deps.loader.loadRoute(payload), url: finalUrl };
+            }
+            catch (error) {
+                if (error instanceof MissingModuleError)
+                    return { hard: finalUrl };
+                throw error;
+            }
+        }
+        throw new Error('netjes: too many redirects');
+    }
+    /**
+     * Intercepting routes: when the new page can be shown in a slot of a segment the current page is inside (a photo
+     * opening in a modal over the feed), keep the current page and render the intercepting page in that slot.
+     */
+    async intercepted(loaded, base = this.current.base ?? this.current) {
+        const intercepts = loaded.payload.intercepts;
+        if (!intercepts?.length)
+            return loaded;
+        const intercept = intercepts.find((i) => base.payload.segments.some((s) => s.id === i.segment));
+        if (!intercept)
+            return loaded;
+        const Page = (await this.deps.loader.load(intercept.page));
+        const { props } = loaded.payload;
+        // The intercepting page's own route values: its parameters can be named differently from the page's.
+        const params = intercept.params ?? loaded.payload.params;
+        function InterceptedSlot() {
+            return _jsx(Page, { ...props, params: params });
+        }
+        const segments = base.modules.segments.map((segment) => segment.id === intercept.segment ? { ...segment, slots: { ...segment.slots, [intercept.slot]: InterceptedSlot } } : segment);
+        return {
+            payload: { ...base.payload, url: loaded.payload.url },
+            modules: { ...base.modules, segments },
+            url: loaded.url,
+            pageKey: base.pageKey ?? base.url.pathname,
+            base,
+        };
+    }
+    /** Keys of the current page's layout segments whose props the client holds. */
+    heldSegmentKeys() {
+        return this.current.payload.segments.flatMap((segment) => (segment.key && segment.props && !segment.reused ? [segment.key] : []));
+    }
+    /** Fills in the props of segments the server marked reused from the current page, or null if one is missing. */
+    withReusedSegments(payload) {
+        if (!payload.segments.some((segment) => segment.reused))
+            return payload;
+        const held = this.current.payload.segments;
+        const segments = [];
+        for (const segment of payload.segments) {
+            if (!segment.reused) {
+                segments.push(segment);
+                continue;
+            }
+            const known = held.find((h) => h.id === segment.id && h.key === segment.key && h.props);
+            if (!known)
+                return null;
+            segments.push({ ...segment, props: known.props, reused: undefined });
+        }
+        return { ...payload, segments };
+    }
+    hard(url) {
+        if (isWebUrl(url))
+            this.deps.hardNavigate(url.href);
+        else
+            console.error(`netjes: refusing to navigate to ${url.protocol} URL`);
+    }
+    cancelActive() {
+        if (!this.active)
+            return;
+        this.active.controller.abort();
+        this.active = null;
+        this.deps.setPending(IDLE);
+    }
+    takePrefetched(url, signal) {
+        const key = withHash(url, '').href;
+        const hit = this.prefetched.get(key);
+        if (!hit)
+            return undefined;
+        this.prefetched.delete(key);
+        if (Date.now() - hit.at >= PREFETCH_TTL_MS)
+            return undefined;
+        return hit.result.then((result) => 'payload' in result ? { ...result, url: samePage(result.url, url) ? withHash(result.url, url.hash) : result.url } : result, () => this.load(url, { method: 'GET' }, signal, true));
+    }
+    setCurrent(key, loaded) {
+        this.currentKey = key;
+        this.current = loaded;
+        if (!this.currentIsStale)
+            this.remember(key, loaded);
+    }
+    remember(key, loaded) {
+        this.entries.delete(key);
+        this.entries.set(key, loaded);
+        while (this.entries.size > MAX_REMEMBERED_ENTRIES) {
+            const oldest = this.entries.keys().next().value;
+            if (oldest === undefined)
+                break;
+            this.entries.delete(oldest);
+        }
+    }
+    rememberScroll() {
+        this.scrollPositions.set(this.currentKey, { x: window.scrollX, y: window.scrollY });
+    }
+}
+function elementForFragment(fragment) {
+    let decoded = fragment;
+    try {
+        decoded = decodeURIComponent(fragment);
+    }
+    catch {
+        // Not valid percent-encoding (e.g. "#100%"): look the fragment up as written.
+    }
+    return document.getElementById(decoded) ?? document.getElementById(fragment);
+}
+function applyScroll(intent) {
+    switch (intent.kind) {
+        case 'none':
+            return;
+        case 'top':
+            window.scrollTo(0, 0);
+            return;
+        case 'restore':
+            window.scrollTo(intent.x, intent.y);
+            return;
+        case 'hash': {
+            const target = elementForFragment(intent.hash.slice(1));
+            if (target)
+                target.scrollIntoView();
+            else
+                window.scrollTo(0, 0);
+            return;
+        }
+        default: {
+            const exhaustive = intent;
+            return exhaustive;
+        }
+    }
+}
+const RouterContext = createContext(null);
+const ViewContext = createContext(null);
+const NavigationContext = createContext(IDLE);
+function PassThrough({ children }) {
+    return children;
+}
+const defaultHardNavigate = (href) => window.location.assign(href);
+/** Shows an HTML response to a form post the way the browser would have after a native submission. */
+function defaultShowDocument(html, url) {
+    window.history.pushState(null, '', url);
+    document.open();
+    document.write(html);
+    document.close();
+    // document.open() removed the router's listeners; let the browser load whatever back/forward lands on.
+    window.addEventListener('popstate', () => window.location.reload());
+}
+function defaultDownload(file, name) {
+    const href = URL.createObjectURL(file);
+    const link = document.createElement('a');
+    link.href = href;
+    link.download = name;
+    document.body.append(link);
+    link.click();
+    link.remove();
+    setTimeout(() => URL.revokeObjectURL(href), 10_000);
+}
+export function RouterProvider({ initial, initialModules, loader, errorPage, hardNavigate = defaultHardNavigate, showDocument = defaultShowDocument, download = defaultDownload, shell: Shell = PassThrough, }) {
+    const [view, setView] = useState(() => ({
+        loaded: {
+            payload: initial,
+            modules: initialModules,
+            url: initialUrl(initial.url),
+        },
+        id: 0,
+        scroll: NONE,
+    }));
+    const [navigation, setNavigation] = useState(IDLE);
+    const [navigator] = useState(() => {
+        // Server actions called before the effect below registers this router wait for it (the server runs no effects).
+        if (typeof document !== 'undefined')
+            expectActionClient();
+        return new Navigator({
+            loader,
+            version: initial.version,
+            basePath: initial.basePath ?? '',
+            hardNavigate,
+            showDocument,
+            download,
+            setPending: setNavigation,
+            commit: (loaded, scroll) => startTransition(() => {
+                setView((previous) => ({ loaded, id: previous.id + 1, scroll }));
+                setNavigation(IDLE);
+            }),
+        }, view.loaded);
+    });
+    // In the commit that shows the page, before the browser dispatches the clicks that came in while React hydrated it:
+    // a fragment link followed then must find this history entry keyed, to come back to.
+    useLayoutEffect(() => navigator.start(), [navigator]);
+    const [actionListeners] = useState(() => new Set());
+    useEffect(() => setActionClient({
+        tokenField: () => navigator.page.payload.antiforgery?.formFieldName ?? '__RequestVerificationToken',
+        async invoke(name, url, input) {
+            const page = navigator.page;
+            const returnUrl = page.url.pathname + page.url.search;
+            const token = page.payload.antiforgery ?? (await navigator.fetchedToken());
+            const actionUrl = withBasePath(url, page.payload.basePath ?? '');
+            let cookiesChanged = false;
+            const onCookiesChanged = () => {
+                cookiesChanged = true;
+                navigator.cookiesChanged();
+            };
+            let call = await fetchAction(name, actionUrl, actionRequest(input, token, returnUrl), onCookiesChanged);
+            navigator.forgetToken();
+            // Tokens belong to the signed-in user: after signing in or out (on any tab) the page's one is stale. Only a
+            // call the server marks as refused for its token did not run, so only that one is sent again, once, with a
+            // fresh token. Any other 400 may come from an action that changed data first.
+            if (call.tokenRefused) {
+                const fresh = await navigator.fetchedToken();
+                if (fresh?.requestToken && fresh.requestToken !== token?.requestToken) {
+                    call = await fetchAction(name, actionUrl, actionRequest(input, fresh, returnUrl), onCookiesChanged);
+                }
+                navigator.forgetToken();
+            }
+            const { response } = call;
+            // Changed cookies dropped the prefetched pages already, and started those in flight over.
+            if (!cookiesChanged)
+                navigator.forgetPrefetched();
+            for (const listener of actionListeners)
+                listener(response);
+            // The user may have moved on while the action ran: then neither pull them back (redirect) nor reload the
+            // page they left (refresh, which would also cancel their navigation).
+            const movedOn = navigator.page !== page || navigator.navigating;
+            if (!movedOn && response.redirect)
+                await navigator.navigate(response.redirect, 'push', true);
+            else if (!movedOn && response.revalidate)
+                await navigator.refresh();
+            // After signing in or out (an action that set or deleted a cookie), the page on screen shows whoever was
+            // signed in before until a page comes from the server: refresh it, like Next.js. That is the action's page
+            // when it neither redirected nor revalidated, or redirected to a fragment of itself (which loads nothing),
+            // or one the user moved on to that loaded with the old cookies while the action ran. A navigation still on
+            // its way has started over already. A redirect that left the page as it was went to another site (to sign
+            // in there, say), which the browser loads instead, or ended in a download: neither refreshes it.
+            const handedOver = !movedOn && Boolean(response.redirect) && navigator.page === page;
+            if (navigator.fromBeforeCookieChange && !navigator.navigating && !handedOver) {
+                await navigator.refresh({ keepPrefetched: cookiesChanged });
+            }
+            return response;
+        },
+    }), [navigator, actionListeners]);
+    useLayoutEffect(() => {
+        if (view.id > 0)
+            applyScroll(view.scroll);
+    }, [view]);
+    const router = useMemo(() => ({
+        push: (href, options) => navigator.navigate(href, 'push', options?.scroll ?? true),
+        replace: (href, options) => navigator.navigate(href, 'replace', options?.scroll ?? true),
+        prefetch: (href) => navigator.prefetch(href),
+        refresh: () => navigator.refresh(),
+        back: () => window.history.back(),
+        forward: () => window.history.forward(),
+        submit: (action, body) => navigator.submit(action, body),
+        onActionResponse: (listener) => {
+            actionListeners.add(listener);
+            return () => actionListeners.delete(listener);
+        },
+        onCookiesChanged: (listener) => navigator.onCookiesChanged(listener),
+    }), [navigator, actionListeners]);
+    const { payload, modules, url } = view.loaded;
+    const viewValue = useMemo(() => ({ payload, url }), [payload, url]);
+    return (_jsx(RouterContext, { value: router, children: _jsx(ViewContext, { value: viewValue, children: _jsx(NavigationContext, { value: navigation, children: _jsx(Shell, { children: _jsx(ErrorBoundary, { resetKey: view.id, fallback: (error) => _jsx(ErrorFallback, { error: error, errorPage: errorPage, loader: loader, payload: payload }), children: _jsx(RouteTree, { modules: modules, segments: payload.segments, props: payload.props, params: payload.params, status: payload.status, pageKind: payload.pageKind, pageKey: view.loaded.pageKey ?? url.pathname, retry: () => void router.refresh(), metadata: payload.metadata }) }) }) }) }) }));
+}
+const errorPageModules = new WeakMap();
+function ErrorFallback({ error, errorPage, loader, payload }) {
+    const props = { status: 500, message: error instanceof Error ? error.message : 'Something went wrong' };
+    const builtIn = _jsx(RouteTree, { modules: { page: null, segments: [] }, props: props, params: payload.params, status: 500, pageKey: "error" });
+    if (!errorPage)
+        return builtIn;
+    let modules = errorPageModules.get(loader);
+    if (!modules) {
+        modules = loader.loadRoute(errorPage);
+        errorPageModules.set(loader, modules);
+    }
+    return (_jsx(ErrorBoundary, { resetKey: 0, fallback: () => builtIn, children: _jsx(Suspense, { fallback: null, children: _jsx(LoadedErrorPage, { modules: modules, props: props, payload: payload }) }) }));
+}
+function LoadedErrorPage({ modules, props, payload }) {
+    return _jsx(RouteTree, { modules: use(modules), props: props, params: payload.params, status: 500, pageKind: "error", pageKey: "error" });
+}
+/** The router's contexts without the router: for the test harness (netjes/testing), which fakes navigation. */
+export function RouterContexts({ router, payload, url, navigation, children, }) {
+    const view = useMemo(() => ({ payload, url }), [payload, url]);
+    return (_jsx(RouterContext, { value: router, children: _jsx(ViewContext, { value: view, children: _jsx(NavigationContext, { value: navigation, children: children }) }) }));
+}
+function useView() {
+    const view = useContext(ViewContext);
+    if (!view)
+        throw new Error('netjes: this hook must be used inside a Netjes page');
+    return view;
+}
+export function useInternalRouter() {
+    const router = useContext(RouterContext);
+    if (!router)
+        throw new Error('netjes: this hook must be used inside a Netjes page');
+    return router;
+}
+/** The client router: `push`, `replace`, `prefetch`, `refresh`, `back` and `forward`. Throws outside a Netjes page. */
+export function useRouter() {
+    return useInternalRouter();
+}
+/** The path without the base path, as the app's routes see it (like Next.js's `usePathname` with `basePath`). */
+export function usePathname() {
+    const { url, payload } = useView();
+    return withoutBasePath(url.pathname, payload.basePath ?? '');
+}
+/** An href for a plain `<a>` or attribute, under the base path: what `<Link>` does for its own. */
+export function useHref(href) {
+    return withBasePath(href, useBasePath());
+}
+/** `UsePathBase`'s base path for this page, or '' when the app is mounted at the root. */
+export function useBasePath() {
+    return useView().payload.basePath ?? '';
+}
+/** Search values as Next.js passes them: a string, or an array of strings when the key repeats. */
+function searchObject(search) {
+    const result = {};
+    for (const key of new Set(search.keys())) {
+        const values = search.getAll(key);
+        result[key] = values.length === 1 ? values[0] : values;
+    }
+    return result;
+}
+export function useSearchParams(schema) {
+    const { search } = useView().url;
+    return useMemo(() => {
+        const params = new URLSearchParams(search);
+        return schema ? parseLenient(schema, searchObject(params), 'search params') : params;
+    }, [search, schema]);
+}
+export function useParams(schema) {
+    const { params } = useView().payload;
+    return useMemo(() => (schema ? parseWith(schema, params, 'route params') : params), [params, schema]);
+}
+export function useSharedProps(schema) {
+    const { shared } = useView().payload;
+    return useMemo(() => (schema ? parseWith(schema, shared, 'shared props') : shared), [shared, schema]);
+}
+function decodeSegment(segment) {
+    try {
+        return decodeURIComponent(segment);
+    }
+    catch {
+        return segment;
+    }
+}
+/**
+ * In a layout: the URL segments below it, decoded (route groups do not appear in URLs). Next.js
+ * `useSelectedLayoutSegments`. Outside layouts, the whole path.
+ */
+export function useSelectedLayoutSegments() {
+    const depth = useContext(LayoutDepthContext);
+    const pathname = usePathname();
+    return useMemo(() => pathname.split('/').filter(Boolean).slice(depth).map(decodeSegment), [pathname, depth]);
+}
+/** In a layout: the active segment one level below it (e.g. the selected tab), or null at the layout's own page. */
+export function useSelectedLayoutSegment() {
+    return useSelectedLayoutSegments()[0] ?? null;
+}
+export function usePagePayload() {
+    return useView().payload;
+}
+/** The router's state: `loading` during a navigation, `submitting` during a form post, else `idle` (with `error` after a post that produced no page). */
+export function useNavigation() {
+    return useContext(NavigationContext);
+}
+//# sourceMappingURL=router.js.map