@rsc-kit/core 0.20.6 → 0.20.8

package/dist/js/PageTransition.d.ts

@@ -0,0 +1,27 @@
+import type { ReactNode } from "react";
+/**
+ * Whether this browser rasterises a transition snapshot at full element
+ * height. Apple's vendor string is WebKit's, wherever WebKit runs: Safari,
+ * every iOS browser, and WebKitGTK (Epiphany) too - all of them charge by
+ * snapshot size, so all of them are right to skip. Not a bug to "fix".
+ */
+export declare function snapshotsWholePage(): boolean;
+/** Whether the visitor asked for no motion; a transition then costs a snapshot for nothing. */
+export declare function prefersReducedMotion(): boolean;
+/** The rules a page fade needs, for the class the navigation carries. */
+export declare function pageTransitionCss(transition: string, durationMs: number): string;
+export declare function PageTransition({ children, className, transition, duration, webkit, }: {
+    children: ReactNode;
+    /** On the wrapper element the pair is made of; carry the body's layout here. */
+    className?: string;
+    /** The view-transition class a navigation gets, for CSS of your own on top. */
+    transition?: string;
+    /** How long the fade runs, in milliseconds. The group and root pairs match it. */
+    duration?: number;
+    /**
+     * What WebKit gets. `skip` for an app with long pages - the default,
+     * since a landing page usually is one; `run` for an app whose pages are
+     * a screen tall, where the snapshot is small and the fade is fine.
+     */
+    webkit?: "skip" | "run";
+}): import("react").JSX.Element;

package/dist/js/PageTransition.js

@@ -0,0 +1,57 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * The page-level view transition, with WebKit left out of it.
+ *
+ * WebKit - Safari, and every browser on iOS, Chrome included - rasterises
+ * the outgoing snapshot at the element's full height rather than the
+ * viewport's. A landing page 12,000 px tall is 44 megapixels at 3×: a port
+ * measured 600-900 ms with the screen frozen on every navigation away from
+ * it, and the memory can have iOS discard the tab, which comes back as a
+ * reload nobody asked for. Chromium caps the snapshot, so a desktop never
+ * shows it. Other sites' transitions work on the same phone because they
+ * name the root, which the spec clips to the viewport; React's
+ * <ViewTransition> names the element it wraps, and the page is tall.
+ *
+ * So the cross-fade runs where it is cheap and is skipped where it is not.
+ * Decided after mount, from navigator.vendor - a server render has no
+ * navigator, and a transition class only matters on an update, so the
+ * first render agrees with the server either way. Skipped, React starts
+ * no transition at all: no snapshot, no overlay, nothing to wait for.
+ *
+ * The CSS the fade needs travels with it, because every app rediscovered
+ * the same three lines on a phone: the group and root pairs keep the
+ * browser's 250 ms whatever the page pair is set to, so a "120 ms" fade
+ * ran 290; the pseudo-element tree sits over the document while it runs
+ * and swallows a second tap; and reduced motion should mean none.
+ */
+import { ViewTransition, useEffect, useState } from "react";
+/**
+ * Whether this browser rasterises a transition snapshot at full element
+ * height. Apple's vendor string is WebKit's, wherever WebKit runs: Safari,
+ * every iOS browser, and WebKitGTK (Epiphany) too - all of them charge by
+ * snapshot size, so all of them are right to skip. Not a bug to "fix".
+ */
+export function snapshotsWholePage() {
+    return typeof navigator !== "undefined" && navigator.vendor === "Apple Computer, Inc.";
+}
+/** Whether the visitor asked for no motion; a transition then costs a snapshot for nothing. */
+export function prefersReducedMotion() {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+/** The rules a page fade needs, for the class the navigation carries. */
+export function pageTransitionCss(transition, durationMs) {
+    return (`::view-transition-old(.${transition}),::view-transition-new(.${transition}),` +
+        `::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation-duration:${durationMs}ms}` +
+        `::view-transition{pointer-events:none}` +
+        `@media (prefers-reduced-motion:reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation:none}}`);
+}
+export function PageTransition({ children, className, transition = "page", duration = 120, webkit = "skip", }) {
+    const [skip, setSkip] = useState(false);
+    useEffect(() => {
+        if ((webkit === "skip" && snapshotsWholePage()) || prefersReducedMotion())
+            setSkip(true);
+    }, [webkit]);
+    return (_jsx(ViewTransition, { default: { "rsc-navigation": skip ? "none" : transition, default: "none" }, children: _jsxs("div", { className: className, children: [_jsx("style", { href: `rsc-kit-page-transition-${transition}`, precedence: "rsc-kit", children: pageTransitionCss(transition, duration) }), children] }) }));
+}
+//# sourceMappingURL=PageTransition.js.map

package/dist/js/PageTransition.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTransition.js","sourceRoot":"","sources":["../../src/js/PageTransition.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AAEH,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAG5D;;;;;GAKG;AACH,MAAM,UAAU,kBAAkB;IAChC,OAAO,OAAO,SAAS,KAAK,WAAW,IAAI,SAAS,CAAC,MAAM,KAAK,sBAAsB,CAAC;AACzF,CAAC;AAED,+FAA+F;AAC/F,MAAM,UAAU,oBAAoB;IAClC,OAAO,OAAO,MAAM,KAAK,WAAW,IAAI,OAAO,MAAM,CAAC,UAAU,KAAK,UAAU,IAAI,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACnJ,CAAC;AAED,yEAAyE;AACzE,MAAM,UAAU,iBAAiB,CAAC,UAAkB,EAAE,UAAkB;IACtE,OAAO,CACL,0BAA0B,UAAU,4BAA4B,UAAU,IAAI;QAC9E,yGAAyG,UAAU,KAAK;QACxH,wCAAwC;QACxC,sIAAsI,CACvI,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,cAAc,CAAC,EAC7B,QAAQ,EACR,SAAS,EACT,UAAU,GAAG,MAAM,EACnB,QAAQ,GAAG,GAAG,EACd,MAAM,GAAG,MAAM,GAehB;IACC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,MAAM,KAAK,MAAM,IAAI,kBAAkB,EAAE,CAAC,IAAI,oBAAoB,EAAE;YAAE,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3F,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,KAAC,cAAc,IAAC,OAAO,EAAE,EAAE,gBAAgB,EAAE,IAAI,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,UAAU,EAAE,OAAO,EAAE,MAAM,EAAE,YACxF,eAAK,SAAS,EAAE,SAAS,aACvB,gBAAO,IAAI,EAAE,2BAA2B,UAAU,EAAE,EAAE,UAAU,EAAC,SAAS,YACvE,iBAAiB,CAAC,UAAU,EAAE,QAAQ,CAAC,GAClC,EACP,QAAQ,IACL,GACS,CAClB,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\n/**\n * The page-level view transition, with WebKit left out of it.\n *\n * WebKit - Safari, and every browser on iOS, Chrome included - rasterises\n * the outgoing snapshot at the element's full height rather than the\n * viewport's. A landing page 12,000 px tall is 44 megapixels at 3×: a port\n * measured 600-900 ms with the screen frozen on every navigation away from\n * it, and the memory can have iOS discard the tab, which comes back as a\n * reload nobody asked for. Chromium caps the snapshot, so a desktop never\n * shows it. Other sites' transitions work on the same phone because they\n * name the root, which the spec clips to the viewport; React's\n * <ViewTransition> names the element it wraps, and the page is tall.\n *\n * So the cross-fade runs where it is cheap and is skipped where it is not.\n * Decided after mount, from navigator.vendor - a server render has no\n * navigator, and a transition class only matters on an update, so the\n * first render agrees with the server either way. Skipped, React starts\n * no transition at all: no snapshot, no overlay, nothing to wait for.\n *\n * The CSS the fade needs travels with it, because every app rediscovered\n * the same three lines on a phone: the group and root pairs keep the\n * browser's 250 ms whatever the page pair is set to, so a \"120 ms\" fade\n * ran 290; the pseudo-element tree sits over the document while it runs\n * and swallows a second tap; and reduced motion should mean none.\n */\n\nimport { ViewTransition, useEffect, useState } from \"react\";\nimport type { ReactNode } from \"react\";\n\n/**\n * Whether this browser rasterises a transition snapshot at full element\n * height. Apple's vendor string is WebKit's, wherever WebKit runs: Safari,\n * every iOS browser, and WebKitGTK (Epiphany) too - all of them charge by\n * snapshot size, so all of them are right to skip. Not a bug to \"fix\".\n */\nexport function snapshotsWholePage(): boolean {\n  return typeof navigator !== \"undefined\" && navigator.vendor === \"Apple Computer, Inc.\";\n}\n\n/** Whether the visitor asked for no motion; a transition then costs a snapshot for nothing. */\nexport function prefersReducedMotion(): boolean {\n  return typeof window !== \"undefined\" && typeof window.matchMedia === \"function\" && window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\n/** The rules a page fade needs, for the class the navigation carries. */\nexport function pageTransitionCss(transition: string, durationMs: number): string {\n  return (\n    `::view-transition-old(.${transition}),::view-transition-new(.${transition}),` +\n    `::view-transition-group(*),::view-transition-old(root),::view-transition-new(root){animation-duration:${durationMs}ms}` +\n    `::view-transition{pointer-events:none}` +\n    `@media (prefers-reduced-motion:reduce){::view-transition-old(*),::view-transition-new(*),::view-transition-group(*){animation:none}}`\n  );\n}\n\nexport function PageTransition({\n  children,\n  className,\n  transition = \"page\",\n  duration = 120,\n  webkit = \"skip\",\n}: {\n  children: ReactNode;\n  /** On the wrapper element the pair is made of; carry the body's layout here. */\n  className?: string;\n  /** The view-transition class a navigation gets, for CSS of your own on top. */\n  transition?: string;\n  /** How long the fade runs, in milliseconds. The group and root pairs match it. */\n  duration?: number;\n  /**\n   * What WebKit gets. `skip` for an app with long pages - the default,\n   * since a landing page usually is one; `run` for an app whose pages are\n   * a screen tall, where the snapshot is small and the fade is fine.\n   */\n  webkit?: \"skip\" | \"run\";\n}) {\n  const [skip, setSkip] = useState(false);\n\n  useEffect(() => {\n    if ((webkit === \"skip\" && snapshotsWholePage()) || prefersReducedMotion()) setSkip(true);\n  }, [webkit]);\n\n  return (\n    <ViewTransition default={{ \"rsc-navigation\": skip ? \"none\" : transition, default: \"none\" }}>\n      <div className={className}>\n        <style href={`rsc-kit-page-transition-${transition}`} precedence=\"rsc-kit\">\n          {pageTransitionCss(transition, duration)}\n        </style>\n        {children}\n      </div>\n    </ViewTransition>\n  );\n}\n"]}

package/dist/js/PathnameProvider.d.ts

@@ -1,7 +1,20 @@
 import type { ReactNode } from "react";
+/**
+ * `value` is null where the url is not known: the shell of a route that
+ * listed no urls, rendered once for every url it matches, the holes that
+ * resume it, and the payload a document served from that shell boots from.
+ * The hooks answer "" then - no link active, no breadcrumb - and
+ * usePathname, a useSyncExternalStore, moves to the browser's url the
+ * moment hydration is done. The three renders agree with each other, which
+ * is what hydration needs; the browser knows the rest.
+ */
 export declare function PathnameProvider({ value, children }: {
-    value: string;
+    value: string | null;
     children: ReactNode;
 }): import("react").JSX.Element;
-/** What the server rendered. On the client this is the url it was hydrated with. */
+/**
+ * What the server rendered, or "" where it could not know. On the client
+ * this is what the payload said, so hydration matches the document; the
+ * live url is usePathname's, from the browser.
+ */
 export declare function useRenderedPathname(): string;

package/dist/js/PathnameProvider.js

@@ -13,7 +13,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * in the same process, and a variable would hand one page the other's url.
  */
 import { createContext, useContext, useEffect } from "react";
+// "/" with no provider at all - a component rendered outside the tree, a test.
+// null from a provider means the url is not known: see below.
 const PathnameContext = createContext("/");
+/**
+ * `value` is null where the url is not known: the shell of a route that
+ * listed no urls, rendered once for every url it matches, the holes that
+ * resume it, and the payload a document served from that shell boots from.
+ * The hooks answer "" then - no link active, no breadcrumb - and
+ * usePathname, a useSyncExternalStore, moves to the browser's url the
+ * moment hydration is done. The three renders agree with each other, which
+ * is what hydration needs; the browser knows the rest.
+ */
 export function PathnameProvider({ value, children }) {
     // The outermost client component on every page with a runtime, so its
     // first effect is the moment hydration has committed - the moment a
@@ -30,8 +41,12 @@ export function PathnameProvider({ value, children }) {
     }, []);
     return _jsx(PathnameContext.Provider, { value: value, children: children });
 }
-/** What the server rendered. On the client this is the url it was hydrated with. */
+/**
+ * What the server rendered, or "" where it could not know. On the client
+ * this is what the payload said, so hydration matches the document; the
+ * live url is usePathname's, from the browser.
+ */
 export function useRenderedPathname() {
-    return useContext(PathnameContext);
+    return useContext(PathnameContext) ?? "";
 }
 //# sourceMappingURL=PathnameProvider.js.map

package/dist/js/PathnameProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"PathnameProvider.js","sourceRoot":"","sources":["../../src/js/PathnameProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,MAAM,eAAe,GAAG,aAAa,CAAS,GAAG,CAAC,CAAC;AAEnD,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAA0C;IAC1F,sEAAsE;IACtE,oEAAoE;IACpE,mEAAmE;IACnE,yEAAyE;IACzE,sEAAsE;IACtE,qBAAqB;IACrB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,MAAsE,CAAC;QAEjF,IAAI,CAAC,CAAC,cAAc;YAAE,OAAO;QAE7B,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA4B,CAAC;AACvF,CAAC;AAED,oFAAoF;AACpF,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,eAAe,CAAC,CAAC;AACrC,CAAC","sourcesContent":["\"use client\";\n\n/**\n * The url the server rendered, handed to the client hooks.\n *\n * usePathname used to answer \"/\" during a server render, because a hook has no\n * props and the module had nothing else to go on. Every prerendered page\n * therefore shipped with the wrong link marked active, corrected only once\n * hydration ran — a visible flash, and simply wrong on a route that ships no\n * client runtime at all.\n *\n * A context rather than a module-level variable: two requests render at once\n * in the same process, and a variable would hand one page the other's url.\n */\n\nimport { createContext, useContext, useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\n\nconst PathnameContext = createContext<string>(\"/\");\n\nexport function PathnameProvider({ value, children }: { value: string; children: ReactNode }) {\n  // The outermost client component on every page with a runtime, so its\n  // first effect is the moment hydration has committed - the moment a\n  // click on a <Link> is React's to handle. Until then the bootstrap\n  // script's listener holds the taps; see earlyClicks. Announced through a\n  // global rather than a module, because this component and the runtime\n  // are bundled apart.\n  useEffect(() => {\n    const w = window as { __rsc_hydrated?: boolean; __rsc_on_hydrated?: () => void };\n\n    if (w.__rsc_hydrated) return;\n\n    w.__rsc_hydrated = true;\n    w.__rsc_on_hydrated?.();\n  }, []);\n\n  return <PathnameContext.Provider value={value}>{children}</PathnameContext.Provider>;\n}\n\n/** What the server rendered. On the client this is the url it was hydrated with. */\nexport function useRenderedPathname(): string {\n  return useContext(PathnameContext);\n}\n"]}
+{"version":3,"file":"PathnameProvider.js","sourceRoot":"","sources":["../../src/js/PathnameProvider.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG7D,+EAA+E;AAC/E,8DAA8D;AAC9D,MAAM,eAAe,GAAG,aAAa,CAAgB,GAAG,CAAC,CAAC;AAE1D;;;;;;;;GAQG;AACH,MAAM,UAAU,gBAAgB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiD;IACjG,sEAAsE;IACtE,oEAAoE;IACpE,mEAAmE;IACnE,yEAAyE;IACzE,sEAAsE;IACtE,qBAAqB;IACrB,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,MAAsE,CAAC;QAEjF,IAAI,CAAC,CAAC,cAAc;YAAE,OAAO;QAE7B,CAAC,CAAC,cAAc,GAAG,IAAI,CAAC;QACxB,CAAC,CAAC,iBAAiB,EAAE,EAAE,CAAC;IAC1B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,KAAC,eAAe,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,YAAG,QAAQ,GAA4B,CAAC;AACvF,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,mBAAmB;IACjC,OAAO,UAAU,CAAC,eAAe,CAAC,IAAI,EAAE,CAAC;AAC3C,CAAC","sourcesContent":["\"use client\";\n\n/**\n * The url the server rendered, handed to the client hooks.\n *\n * usePathname used to answer \"/\" during a server render, because a hook has no\n * props and the module had nothing else to go on. Every prerendered page\n * therefore shipped with the wrong link marked active, corrected only once\n * hydration ran — a visible flash, and simply wrong on a route that ships no\n * client runtime at all.\n *\n * A context rather than a module-level variable: two requests render at once\n * in the same process, and a variable would hand one page the other's url.\n */\n\nimport { createContext, useContext, useEffect } from \"react\";\nimport type { ReactNode } from \"react\";\n\n// \"/\" with no provider at all - a component rendered outside the tree, a test.\n// null from a provider means the url is not known: see below.\nconst PathnameContext = createContext<string | null>(\"/\");\n\n/**\n * `value` is null where the url is not known: the shell of a route that\n * listed no urls, rendered once for every url it matches, the holes that\n * resume it, and the payload a document served from that shell boots from.\n * The hooks answer \"\" then - no link active, no breadcrumb - and\n * usePathname, a useSyncExternalStore, moves to the browser's url the\n * moment hydration is done. The three renders agree with each other, which\n * is what hydration needs; the browser knows the rest.\n */\nexport function PathnameProvider({ value, children }: { value: string | null; children: ReactNode }) {\n  // The outermost client component on every page with a runtime, so its\n  // first effect is the moment hydration has committed - the moment a\n  // click on a <Link> is React's to handle. Until then the bootstrap\n  // script's listener holds the taps; see earlyClicks. Announced through a\n  // global rather than a module, because this component and the runtime\n  // are bundled apart.\n  useEffect(() => {\n    const w = window as { __rsc_hydrated?: boolean; __rsc_on_hydrated?: () => void };\n\n    if (w.__rsc_hydrated) return;\n\n    w.__rsc_hydrated = true;\n    w.__rsc_on_hydrated?.();\n  }, []);\n\n  return <PathnameContext.Provider value={value}>{children}</PathnameContext.Provider>;\n}\n\n/**\n * What the server rendered, or \"\" where it could not know. On the client\n * this is what the payload said, so hydration matches the document; the\n * live url is usePathname's, from the browser.\n */\nexport function useRenderedPathname(): string {\n  return useContext(PathnameContext) ?? \"\";\n}\n"]}

package/dist/js/SegmentBoundary.js

@@ -44,7 +44,8 @@ const addTransitionType = React.addTransitionType ??
     React
         .unstable_addTransitionType;
 import { RedirectBoundary } from "./RedirectBoundary";
-import { getSegmentState, navigatedOnce, seedSegment, subscribeToSegment, } from "./segmentStore";
+import { navigationCommitted } from "./perf";
+import { getSegmentState, replaceActive, navigatedOnce, seedSegment, subscribeToSegment, } from "./segmentStore";
 export function SegmentBoundary({ depth, pageKey, children, }) {
     // The store still addresses the boundary; the render reads React state, so
     // the update can be a transition. Initialised from the store on the client
@@ -60,10 +61,22 @@ export function SegmentBoundary({ depth, pageKey, children, }) {
             setState(getSegmentState(depth));
         });
     }), [depth]);
+    // The commit that put a navigated segment on screen: the end of the
+    // navigation's measure, see perf.ts. Not on the first render, which is the
+    // seed.
+    useEffect(() => {
+        if (state !== null)
+            navigationCommitted();
+    }, [state]);
     // Record the page we arrived on, so a later navigation away and back can
     // return to it. Without this the first page is the one page you cannot keep.
+    // New children while the store already holds this depth is the document
+    // rendered again in place - revalidate("all") - and the page on screen
+    // takes them under the key it has; see replaceActive.
     useEffect(() => {
-        if (pageKey)
+        if (getSegmentState(depth))
+            replaceActive(depth, children);
+        else if (pageKey)
             seedSegment(depth, pageKey, children);
     }, [depth, pageKey, children]);
     // Wrapped here rather than around the whole app because this is the closest
@@ -82,8 +95,19 @@ export function SegmentBoundary({ depth, pageKey, children, }) {
     // wrapper, keyed by the page, so when the store takes over after hydration
     // the tree changes state but not shape - and React keeps the DOM instead of
     // remounting the page, which was blank, then content, on every load.
+    //
+    // The Activity is there whether or not there is a page key to hang it on.
+    // A parameterised route's PPR shell is rendered for every url it matches
+    // and so carries no key - and the boundary used to leave the Activity out
+    // then, so the shell had no <!--&--> markers where the client, hydrating
+    // from the payload for the real url, rendered one. React 19.2 does not
+    // recover from a hydration mismatch at an Activity: the boundary retries
+    // hydrating, mismatches again, and the main thread never returns. A port
+    // found /agent/tools/3 freezing the tab on every document load. The
+    // markup of an Activity does not depend on its key, so the shell and the
+    // client agree whenever both render one.
     if (!state) {
-        return pageKey ? (_jsx(Activity, { mode: "visible", children: _jsx(RedirectBoundary, { children: children }) }, pageKey)) : (_jsx(RedirectBoundary, { children: children }));
+        return (_jsx(Activity, { mode: "visible", children: _jsx(RedirectBoundary, { children: children }) }, pageKey));
     }
     return (_jsx(_Fragment, { children: state.entries.map((entry) => (_jsx(Activity, { mode: entry.key === state.activeKey ? "visible" : "hidden", children: _jsx(RedirectBoundary, { active: entry.key === state.activeKey, children: entry.tree }) }, entry.key))) }));
 }

package/dist/js/SegmentBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"SegmentBoundary.js","sourceRoot":"","sources":["../../src/js/SegmentBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,gBAAgB,CAAC;AAE3D,4EAA4E;AAC5E,yEAAyE;AACzE,uDAAuD;AACvD,MAAM,iBAAiB,GACpB,KAAwD,CAAC,iBAAiB;IAC1E,KAAiE;SAC/D,0BAA0B,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EACL,eAAe,EACf,aAAa,EACb,WAAW,EACX,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAExB,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,GAMT;IACC,2EAA2E;IAC3E,2EAA2E;IAC3E,+DAA+D;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqC,GAAG,EAAE,CAC1E,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAC9D,CAAC;IAEF,SAAS,CACP,GAAG,EAAE,CACH,kBAAkB,CAAC,KAAK,EAAE,GAAG,EAAE;QAC7B,eAAe,CAAC,GAAG,EAAE;YACnB,+DAA+D;YAC/D,gEAAgE;YAChE,sBAAsB;YACtB,IAAI,aAAa,EAAE;gBAAE,iBAAiB,EAAE,CAAC,0BAA0B,CAAC,CAAC;YAErE,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,yEAAyE;IACzE,6EAA6E;IAC7E,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO;YAAE,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IACrD,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,4EAA4E;IAC5E,yEAAyE;IACzE,4EAA4E;IAC5E,uEAAuE;IACvE,qEAAqE;IACrE,uEAAuE;IACvE,uEAAuE;IACvE,uEAAuE;IACvE,yEAAyE;IACzE,0EAA0E;IAC1E,QAAQ;IACR,wEAAwE;IACxE,sEAAsE;IACtE,2EAA2E;IAC3E,4EAA4E;IAC5E,qEAAqE;IACrE,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,OAAO,CAAC,CAAC,CAAC,CACf,KAAC,QAAQ,IAAe,IAAI,EAAC,SAAS,YACpC,KAAC,gBAAgB,cAAE,QAAQ,GAAoB,IADlC,OAAO,CAEX,CACZ,CAAC,CAAC,CAAC,CACF,KAAC,gBAAgB,cAAE,QAAQ,GAAoB,CAChD,CAAC;IACJ,CAAC;IAED,OAAO,CACL,4BACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,QAAQ,IAEP,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,YAE1D,KAAC,gBAAgB,IAAC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,YACpD,KAAK,CAAC,IAAiB,GACP,IALd,KAAK,CAAC,GAAG,CAML,CACZ,CAAC,GACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\n/**\n * The point in the tree a navigation can replace on its own.\n *\n * Sits between a layout and its children, so showing a different segment\n * re-renders from here down and leaves the layouts above it mounted. Server\n * components cannot be re-rendered on the client, which is why the seam has to\n * be a client component reading from a store rather than the layout itself.\n *\n * Pages it has already shown stay mounted behind <Activity mode=\"hidden\">.\n * Hidden is not unmounted: effects are torn down but state survives, so\n * returning to a page brings back the form you were filling in. Rendering only\n * the current one would throw that away, which is what replacing the root did.\n */\n\nimport * as React from \"react\";\nimport { Activity, startTransition, useEffect, useState } from \"react\";\n\n/**\n * The transition type a navigation carries.\n *\n * The engine does not animate a navigation itself; React's own\n * <ViewTransition> does, wherever an app puts one. What the app cannot do\n * from outside is tell a navigation from the seed after hydration - the\n * boundary taking over its own server-rendered children, which animated\n * would be the page fading into itself on every load. So a navigation's\n * update carries this type, and the seed's does not: a boundary keyed on it,\n * `default={{ \"rsc-navigation\": \"page\", default: \"none\" }}`, animates\n * navigations and nothing else.\n *\n * An earlier shape wrapped the segment in a boundary of the engine's own,\n * behind a flag. React names every top-level element under a boundary and\n * morphs each from where it was to where it is, so the stylesheet pulled\n * them back into one root fade - and fought React over the root, which it\n * cancels when nothing outside a boundary changed: a captured root with a\n * hidden group, a dark viewport on the first navigation. One wrapper element\n * under the app's own boundary is one snapshot pair, which is the dissolve\n * wanted, with nothing to fight.\n */\nexport const NAVIGATION_TRANSITION_TYPE = \"rsc-navigation\";\n\n// Exported by React 19.3; `unstable_` before it. Read at call time from the\n// namespace rather than imported by name, so a React that lacks it still\n// loads this module and simply does not mark the type.\nconst addTransitionType: ((type: string) => void) | undefined =\n  (React as { addTransitionType?: (type: string) => void }).addTransitionType ??\n  (React as { unstable_addTransitionType?: (type: string) => void })\n    .unstable_addTransitionType;\nimport type { ReactNode } from \"react\";\nimport { RedirectBoundary } from \"./RedirectBoundary\";\nimport {\n  getSegmentState,\n  navigatedOnce,\n  seedSegment,\n  subscribeToSegment,\n} from \"./segmentStore\";\n\nexport function SegmentBoundary({\n  depth,\n  pageKey,\n  children,\n}: {\n  depth: number;\n  /** The page these server-rendered children belong to. */\n  pageKey?: string;\n  children: ReactNode;\n}) {\n  // The store still addresses the boundary; the render reads React state, so\n  // the update can be a transition. Initialised from the store on the client\n  // and null on the server — exactly what getServerSnapshot did.\n  const [state, setState] = useState<ReturnType<typeof getSegmentState>>(() =>\n    typeof window === \"undefined\" ? null : getSegmentState(depth),\n  );\n\n  useEffect(\n    () =>\n      subscribeToSegment(depth, () => {\n        startTransition(() => {\n          // A navigation, not the seed: the seed is the page taking over\n          // its own server-rendered children, and fading that is the page\n          // fading into itself.\n          if (navigatedOnce()) addTransitionType?.(NAVIGATION_TRANSITION_TYPE);\n\n          setState(getSegmentState(depth));\n        });\n      }),\n    [depth],\n  );\n\n  // Record the page we arrived on, so a later navigation away and back can\n  // return to it. Without this the first page is the one page you cannot keep.\n  useEffect(() => {\n    if (pageKey) seedSegment(depth, pageKey, children);\n  }, [depth, pageKey, children]);\n\n  // Wrapped here rather than around the whole app because this is the closest\n  // client component above a page: a redirect thrown inside the page's own\n  // Suspense boundary surfaces at the nearest error boundary, and catching it\n  // here leaves the layouts above mounted while the navigation runs. One\n  // boundary per page, inside its Activity, not one around them all: a\n  // boundary that catches renders its fallback in place of everything it\n  // wraps, and one around them all unmounted every page being kept alive\n  // behind the one redirecting - the destination among them, when it was\n  // held - and then kept showing the fallback over the destination once it\n  // arrived. The port's report was a sidebar and a breadcrumb over an empty\n  // main.\n  // The same shape before and after the seed. The server's render and the\n  // first client render already place the children inside the retention\n  // wrapper, keyed by the page, so when the store takes over after hydration\n  // the tree changes state but not shape - and React keeps the DOM instead of\n  // remounting the page, which was blank, then content, on every load.\n  if (!state) {\n    return pageKey ? (\n      <Activity key={pageKey} mode=\"visible\">\n        <RedirectBoundary>{children}</RedirectBoundary>\n      </Activity>\n    ) : (\n      <RedirectBoundary>{children}</RedirectBoundary>\n    );\n  }\n\n  return (\n    <>\n      {state.entries.map((entry) => (\n        <Activity\n          key={entry.key}\n          mode={entry.key === state.activeKey ? \"visible\" : \"hidden\"}\n        >\n          <RedirectBoundary active={entry.key === state.activeKey}>\n            {entry.tree as ReactNode}\n          </RedirectBoundary>\n        </Activity>\n      ))}\n    </>\n  );\n}\n"]}
+{"version":3,"file":"SegmentBoundary.js","sourceRoot":"","sources":["../../src/js/SegmentBoundary.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb;;;;;;;;;;;;GAYG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEvE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,0BAA0B,GAAG,gBAAgB,CAAC;AAE3D,4EAA4E;AAC5E,yEAAyE;AACzE,uDAAuD;AACvD,MAAM,iBAAiB,GACpB,KAAwD,CAAC,iBAAiB;IAC1E,KAAiE;SAC/D,0BAA0B,CAAC;AAEhC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,WAAW,EACX,kBAAkB,GACnB,MAAM,gBAAgB,CAAC;AAExB,MAAM,UAAU,eAAe,CAAC,EAC9B,KAAK,EACL,OAAO,EACP,QAAQ,GAMT;IACC,2EAA2E;IAC3E,2EAA2E;IAC3E,+DAA+D;IAC/D,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAqC,GAAG,EAAE,CAC1E,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,eAAe,CAAC,KAAK,CAAC,CAC9D,CAAC;IAEF,SAAS,CACP,GAAG,EAAE,CACH,kBAAkB,CAAC,KAAK,EAAE,GAAG,EAAE;QAC7B,eAAe,CAAC,GAAG,EAAE;YACnB,+DAA+D;YAC/D,gEAAgE;YAChE,sBAAsB;YACtB,IAAI,aAAa,EAAE;gBAAE,iBAAiB,EAAE,CAAC,0BAA0B,CAAC,CAAC;YAErE,QAAQ,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC,CAAC;QACnC,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,EACJ,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,oEAAoE;IACpE,2EAA2E;IAC3E,QAAQ;IACR,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,KAAK,IAAI;YAAE,mBAAmB,EAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,yEAAyE;IACzE,6EAA6E;IAC7E,wEAAwE;IACxE,uEAAuE;IACvE,sDAAsD;IACtD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,eAAe,CAAC,KAAK,CAAC;YAAE,aAAa,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;aACtD,IAAI,OAAO;YAAE,WAAW,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC;IAC1D,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE/B,4EAA4E;IAC5E,yEAAyE;IACzE,4EAA4E;IAC5E,uEAAuE;IACvE,qEAAqE;IACrE,uEAAuE;IACvE,uEAAuE;IACvE,uEAAuE;IACvE,yEAAyE;IACzE,0EAA0E;IAC1E,QAAQ;IACR,wEAAwE;IACxE,sEAAsE;IACtE,2EAA2E;IAC3E,4EAA4E;IAC5E,qEAAqE;IACrE,EAAE;IACF,0EAA0E;IAC1E,yEAAyE;IACzE,0EAA0E;IAC1E,yEAAyE;IACzE,uEAAuE;IACvE,yEAAyE;IACzE,yEAAyE;IACzE,oEAAoE;IACpE,yEAAyE;IACzE,yCAAyC;IACzC,IAAI,CAAC,KAAK,EAAE,CAAC;QACX,OAAO,CACL,KAAC,QAAQ,IAAe,IAAI,EAAC,SAAS,YACpC,KAAC,gBAAgB,cAAE,QAAQ,GAAoB,IADlC,OAAO,CAEX,CACZ,CAAC;IACJ,CAAC;IAED,OAAO,CACL,4BACG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC5B,KAAC,QAAQ,IAEP,IAAI,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,YAE1D,KAAC,gBAAgB,IAAC,MAAM,EAAE,KAAK,CAAC,GAAG,KAAK,KAAK,CAAC,SAAS,YACpD,KAAK,CAAC,IAAiB,GACP,IALd,KAAK,CAAC,GAAG,CAML,CACZ,CAAC,GACD,CACJ,CAAC;AACJ,CAAC","sourcesContent":["\"use client\";\n\n/**\n * The point in the tree a navigation can replace on its own.\n *\n * Sits between a layout and its children, so showing a different segment\n * re-renders from here down and leaves the layouts above it mounted. Server\n * components cannot be re-rendered on the client, which is why the seam has to\n * be a client component reading from a store rather than the layout itself.\n *\n * Pages it has already shown stay mounted behind <Activity mode=\"hidden\">.\n * Hidden is not unmounted: effects are torn down but state survives, so\n * returning to a page brings back the form you were filling in. Rendering only\n * the current one would throw that away, which is what replacing the root did.\n */\n\nimport * as React from \"react\";\nimport { Activity, startTransition, useEffect, useState } from \"react\";\n\n/**\n * The transition type a navigation carries.\n *\n * The engine does not animate a navigation itself; React's own\n * <ViewTransition> does, wherever an app puts one. What the app cannot do\n * from outside is tell a navigation from the seed after hydration - the\n * boundary taking over its own server-rendered children, which animated\n * would be the page fading into itself on every load. So a navigation's\n * update carries this type, and the seed's does not: a boundary keyed on it,\n * `default={{ \"rsc-navigation\": \"page\", default: \"none\" }}`, animates\n * navigations and nothing else.\n *\n * An earlier shape wrapped the segment in a boundary of the engine's own,\n * behind a flag. React names every top-level element under a boundary and\n * morphs each from where it was to where it is, so the stylesheet pulled\n * them back into one root fade - and fought React over the root, which it\n * cancels when nothing outside a boundary changed: a captured root with a\n * hidden group, a dark viewport on the first navigation. One wrapper element\n * under the app's own boundary is one snapshot pair, which is the dissolve\n * wanted, with nothing to fight.\n */\nexport const NAVIGATION_TRANSITION_TYPE = \"rsc-navigation\";\n\n// Exported by React 19.3; `unstable_` before it. Read at call time from the\n// namespace rather than imported by name, so a React that lacks it still\n// loads this module and simply does not mark the type.\nconst addTransitionType: ((type: string) => void) | undefined =\n  (React as { addTransitionType?: (type: string) => void }).addTransitionType ??\n  (React as { unstable_addTransitionType?: (type: string) => void })\n    .unstable_addTransitionType;\nimport type { ReactNode } from \"react\";\nimport { RedirectBoundary } from \"./RedirectBoundary\";\nimport { navigationCommitted } from \"./perf\";\nimport {\n  getSegmentState,\n  replaceActive,\n  navigatedOnce,\n  seedSegment,\n  subscribeToSegment,\n} from \"./segmentStore\";\n\nexport function SegmentBoundary({\n  depth,\n  pageKey,\n  children,\n}: {\n  depth: number;\n  /** The page these server-rendered children belong to. */\n  pageKey?: string;\n  children: ReactNode;\n}) {\n  // The store still addresses the boundary; the render reads React state, so\n  // the update can be a transition. Initialised from the store on the client\n  // and null on the server — exactly what getServerSnapshot did.\n  const [state, setState] = useState<ReturnType<typeof getSegmentState>>(() =>\n    typeof window === \"undefined\" ? null : getSegmentState(depth),\n  );\n\n  useEffect(\n    () =>\n      subscribeToSegment(depth, () => {\n        startTransition(() => {\n          // A navigation, not the seed: the seed is the page taking over\n          // its own server-rendered children, and fading that is the page\n          // fading into itself.\n          if (navigatedOnce()) addTransitionType?.(NAVIGATION_TRANSITION_TYPE);\n\n          setState(getSegmentState(depth));\n        });\n      }),\n    [depth],\n  );\n\n  // The commit that put a navigated segment on screen: the end of the\n  // navigation's measure, see perf.ts. Not on the first render, which is the\n  // seed.\n  useEffect(() => {\n    if (state !== null) navigationCommitted();\n  }, [state]);\n\n  // Record the page we arrived on, so a later navigation away and back can\n  // return to it. Without this the first page is the one page you cannot keep.\n  // New children while the store already holds this depth is the document\n  // rendered again in place - revalidate(\"all\") - and the page on screen\n  // takes them under the key it has; see replaceActive.\n  useEffect(() => {\n    if (getSegmentState(depth)) replaceActive(depth, children);\n    else if (pageKey) seedSegment(depth, pageKey, children);\n  }, [depth, pageKey, children]);\n\n  // Wrapped here rather than around the whole app because this is the closest\n  // client component above a page: a redirect thrown inside the page's own\n  // Suspense boundary surfaces at the nearest error boundary, and catching it\n  // here leaves the layouts above mounted while the navigation runs. One\n  // boundary per page, inside its Activity, not one around them all: a\n  // boundary that catches renders its fallback in place of everything it\n  // wraps, and one around them all unmounted every page being kept alive\n  // behind the one redirecting - the destination among them, when it was\n  // held - and then kept showing the fallback over the destination once it\n  // arrived. The port's report was a sidebar and a breadcrumb over an empty\n  // main.\n  // The same shape before and after the seed. The server's render and the\n  // first client render already place the children inside the retention\n  // wrapper, keyed by the page, so when the store takes over after hydration\n  // the tree changes state but not shape - and React keeps the DOM instead of\n  // remounting the page, which was blank, then content, on every load.\n  //\n  // The Activity is there whether or not there is a page key to hang it on.\n  // A parameterised route's PPR shell is rendered for every url it matches\n  // and so carries no key - and the boundary used to leave the Activity out\n  // then, so the shell had no <!--&--> markers where the client, hydrating\n  // from the payload for the real url, rendered one. React 19.2 does not\n  // recover from a hydration mismatch at an Activity: the boundary retries\n  // hydrating, mismatches again, and the main thread never returns. A port\n  // found /agent/tools/3 freezing the tab on every document load. The\n  // markup of an Activity does not depend on its key, so the shell and the\n  // client agree whenever both render one.\n  if (!state) {\n    return (\n      <Activity key={pageKey} mode=\"visible\">\n        <RedirectBoundary>{children}</RedirectBoundary>\n      </Activity>\n    );\n  }\n\n  return (\n    <>\n      {state.entries.map((entry) => (\n        <Activity\n          key={entry.key}\n          mode={entry.key === state.activeKey ? \"visible\" : \"hidden\"}\n        >\n          <RedirectBoundary active={entry.key === state.activeKey}>\n            {entry.tree as ReactNode}\n          </RedirectBoundary>\n        </Activity>\n      ))}\n    </>\n  );\n}\n"]}

package/dist/js/activityMarkers.d.ts

@@ -0,0 +1,7 @@
+/**
+ * How many <Activity> boundaries the server put in this document.
+ *
+ * React marks each with a comment, <!--&--> to <!--/&-->; the opening ones
+ * are counted.
+ */
+export declare function activityMarkersIn(container: Element | Document): number;

package/dist/js/activityMarkers.js

@@ -0,0 +1,18 @@
+/**
+ * How many <Activity> boundaries the server put in this document.
+ *
+ * React marks each with a comment, <!--&--> to <!--/&-->; the opening ones
+ * are counted.
+ */
+export function activityMarkersIn(container) {
+    if (typeof document === "undefined" || typeof document.createTreeWalker !== "function")
+        return 1;
+    const walker = document.createTreeWalker(container, 128 /* NodeFilter.SHOW_COMMENT */);
+    let count = 0;
+    while (walker.nextNode()) {
+        if (walker.currentNode.data === "&")
+            count++;
+    }
+    return count;
+}
+//# sourceMappingURL=activityMarkers.js.map

package/dist/js/activityMarkers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activityMarkers.js","sourceRoot":"","sources":["../../src/js/activityMarkers.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,SAA6B;IAC7D,IAAI,OAAO,QAAQ,KAAK,WAAW,IAAI,OAAO,QAAQ,CAAC,gBAAgB,KAAK,UAAU;QAAE,OAAO,CAAC,CAAC;IAEjG,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,6BAA6B,CAAC,CAAC;IACvF,IAAI,KAAK,GAAG,CAAC,CAAC;IAEd,OAAO,MAAM,CAAC,QAAQ,EAAE,EAAE,CAAC;QACzB,IAAK,MAAM,CAAC,WAAuB,CAAC,IAAI,KAAK,GAAG;YAAE,KAAK,EAAE,CAAC;IAC5D,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC","sourcesContent":["/**\n * How many <Activity> boundaries the server put in this document.\n *\n * React marks each with a comment, <!--&--> to <!--/&-->; the opening ones\n * are counted.\n */\nexport function activityMarkersIn(container: Element | Document): number {\n  if (typeof document === \"undefined\" || typeof document.createTreeWalker !== \"function\") return 1;\n\n  const walker = document.createTreeWalker(container, 128 /* NodeFilter.SHOW_COMMENT */);\n  let count = 0;\n\n  while (walker.nextNode()) {\n    if ((walker.currentNode as Comment).data === \"&\") count++;\n  }\n\n  return count;\n}\n"]}

package/dist/js/createViteRscApp.js

@@ -12,14 +12,15 @@ import { caughtByLoading } from "./fallbackReport";
 import { noteNavigation } from "./segmentStore";
 import { isSafeRedirect } from "../safeUrl.js";
 import { createFromReadableStream, encodeReply, setServerCallback, } from "@vitejs/plugin-rsc/browser";
-import { createElement } from "react";
-import { hydrateRoot } from "react-dom/client";
+import { createElement, startTransition } from "react";
+import { createRoot, hydrateRoot } from "react-dom/client";
+import { activityMarkersIn } from "./activityMarkers";
 import { ActivityRoot } from "./ActivityRouter";
 import { ServerRedirectError, noteRedirected, throwForFailedAction } from "./errors";
 import { fetchPagePayload } from "./pagePayload";
 import { claimRead, setQueryCodec } from "./queryClient";
-import { clearSegments, restoreSegments, setSegment } from "./segmentStore";
-import { cancelPrefetch, isPrefetched, navigate, setApiRoutes, refresh, applyRevalidated, prefetch, retentionKey, setCallServer, setHeldLayouts, setStaticPayloads, setStaticRoutes, seedStaticChain, payloadUrl, setDeserializer, setInterceptManifest, setNavigateHandler, setRestoreHandler, setVersion, } from "./navigate";
+import { clearSegments, dropHidden, isHeld, prerenderSegment, restoreSegments, setSegment } from "./segmentStore";
+import { cancelPrefetch, isPrefetched, navigate, setApiRoutes, refresh, applyRevalidations, prefetch, retentionKey, setCallServer, setHeldLayouts, setStaticPayloads, setStaticRoutes, seedStaticChain, payloadUrl, setDeserializer, setInterceptManifest, getHeldLayouts, setNavigateHandler, setHeldHandlers, setPrerenderHandler, setReplaceRootHandler, setRestoreHandler, setVersion, } from "./navigate";
 /**
  * A redirect that travelled as an error: the digest of the error itself, or
  * of the cause React wraps it in when it reports client-rendering a boundary
@@ -72,15 +73,17 @@ export async function createViteRscApp(container = document, interceptEntries =
             body = encoded;
             realContentType = "text/plain;charset=UTF-8";
         }
+        // Where the action was invoked from. The host resolves it to the
+        // components that render the page, so anything the action says it
+        // invalidated can come back with the answer instead of being fetched
+        // afterwards - and what comes back is for this page, not whichever is
+        // showing when it lands.
+        const from = window.location.pathname + window.location.search;
         const res = await fetch("/_rsc/action", {
             method: "POST",
             headers: {
                 "X-RSC-Action": id,
-                // Where the action was invoked from. The host resolves it to the
-                // components that render the page, so anything the action says it
-                // invalidated can come back with the answer instead of being fetched
-                // afterwards.
-                "X-RSC-Referer": window.location.pathname + window.location.search,
+                "X-RSC-Referer": from,
                 "X-RSC-Content-Type": realContentType,
                 "Content-Type": "application/octet-stream",
                 "X-XSRF-TOKEN": decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ""),
@@ -120,7 +123,7 @@ export async function createViteRscApp(container = document, interceptEntries =
             throw err;
         }
         const answer = await createFromReadableStream(res.body, { callServer });
-        return unwrapRevalidated(answer);
+        return unwrapRevalidated(answer, from);
     }
     /**
      * Put anything the action re-rendered on screen, and hand back its result.
@@ -129,16 +132,14 @@ export async function createViteRscApp(container = document, interceptEntries =
      * the caller sees only what its action returned and never knows the page
      * was updated around it.
      */
-    function unwrapRevalidated(answer) {
+    function unwrapRevalidated(answer, from) {
         if (answer === null ||
             typeof answer !== "object" ||
             !("__rscRevalidated" in answer)) {
             return answer;
         }
         const envelope = answer;
-        for (const [target, tree] of Object.entries(envelope.__rscRevalidated)) {
-            applyRevalidated(target, tree);
-        }
+        applyRevalidations(from, envelope.__rscRevalidated);
         return envelope.result;
     }
     setDeserializer(createFromReadableStream);
@@ -215,68 +216,90 @@ export async function createViteRscApp(container = document, interceptEntries =
             initialTree: tree,
         })
         : tree;
-    const root = hydrateRoot(container, shell, {
-        onRecoverableError(error, errorInfo) {
-            // A client component whose chunk the server no longer has fails while
-            // hydrating, and React reports that as recoverable: the page is loaded
-            // again, with the current names.
-            if (recoverFromStaleAssets(error))
-                return;
-            // A redirect decided inside a boundary: the server's row carried it as
-            // the digest, React client-renders the boundary and reports that it
-            // did, and the RedirectBoundary is already performing it. Nothing to
-            // read in the console about a page doing what it was told.
-            if (isRedirect(error))
-                return;
-            // A PPR shell is served with its Suspense boundaries deliberately
-            // unfinished — the build aborts the render once the static part is out.
-            // React reports that as #419 and client-renders the boundary from the
-            // Flight payload, which is the intended path, not a fault to report.
-            const message = String(error?.message ?? error);
-            if (message.includes("419") ||
-                message.includes("did not finish this Suspense boundary")) {
-                return;
-            }
-            // A view transition the browser cancelled because the tab was not
-            // visible. React reports it here; the update still landed, and a tab
-            // in the background is not a fault in the page.
-            if (message.includes("Transition was aborted"))
-                return;
-            // A navigation another one overtook: its request was aborted, and a
-            // row of its payload that a component was still reading rejects with
-            // the abort. React recovers by rendering the root again synchronously
-            // and reports the recovery here as #520, with the abort as the cause.
-            // The page it recovered to is the one the second navigation asked for;
-            // the abort was the design, not a fault.
-            const cause = error?.cause;
-            if (cause?.name === "AbortError" ||
-                /\baborted\b/i.test(cause?.message ?? "") ||
-                /\baborted\b/i.test(message)) {
-                return;
-            }
-            // A page whose query string was read under a boundary carries the
-            // fallback there; React reports the recovery on hydration. Under a
-            // boundary the developer wrote, that is the designed path and nothing
-            // is said. With nothing closer than a loading.tsx, the whole segment
-            // showed the fallback until the query arrived - said here, in the
-            // page and the console, for whoever is looking at either. Production
-            // has no stack to tell the two apart; the build's note on the route is
-            // the record there.
-            if (error?.digest === SEARCH_PARAMS_FALLBACK ||
-                message.includes("useSearchParams()")) {
-                const stack = errorInfo
-                    ?.componentStack;
-                if (!caughtByLoading(stack))
-                    return;
-                const hint = "useSearchParams() was read on the server with nothing closer than a loading.tsx, so the " +
-                    "whole segment showed that fallback until the query arrived. A <Suspense> around the " +
-                    "component that reads keeps the rest of the page painted.";
-                showDevNotice(hint, stack);
-                console.error(new Error(hint), errorInfo);
+    // A document that cannot be hydrated by this tree is client-rendered
+    // instead - a repaint, not a freeze. React 19.2 does not recover from a
+    // hydration mismatch at an <Activity>: it retries hydrating the boundary,
+    // mismatches again, and never returns to the main thread. Every segment
+    // boundary is an Activity, one per layout, so a document with none where
+    // the page has layouts is that mismatch, guaranteed, before React starts.
+    // What produced one: a parameterised route's PPR shell, rendered without
+    // a page key and, by a build before this one, without the Activities too.
+    // None rather than fewer: a boundary inside a Suspense hole the shell left
+    // unfinished has no marker and is client-rendered by React on its own,
+    // which is not a mismatch. The stale-asset reload does not apply - the
+    // document would come back the same.
+    const missing = retains && getHeldLayouts().length > 0 && activityMarkersIn(container) === 0;
+    if (missing) {
+        console.warn("[rsc-kit] The document has no <Activity> boundaries where the page has layouts, so it cannot be hydrated; rendering the page instead. A PPR shell built by an earlier release lacks them - rebuild.");
+    }
+    // The payload answered with an error status - the not-found page for a
+    // url the shell was served for anyway. It is not the document on screen,
+    // so it is rendered, not hydrated: a mismatch at an Activity is the loop
+    // above, and this one is certain.
+    const disagrees = !res.ok;
+    const onRecoverableError = (error, errorInfo) => {
+        // A client component whose chunk the server no longer has fails while
+        // hydrating, and React reports that as recoverable: the page is loaded
+        // again, with the current names.
+        if (recoverFromStaleAssets(error))
+            return;
+        // A redirect decided inside a boundary: the server's row carried it as
+        // the digest, React client-renders the boundary and reports that it
+        // did, and the RedirectBoundary is already performing it. Nothing to
+        // read in the console about a page doing what it was told.
+        if (isRedirect(error))
+            return;
+        // A PPR shell is served with its Suspense boundaries deliberately
+        // unfinished — the build aborts the render once the static part is out.
+        // React reports that as #419 and client-renders the boundary from the
+        // Flight payload, which is the intended path, not a fault to report.
+        const message = String(error?.message ?? error);
+        if (message.includes("419") ||
+            message.includes("did not finish this Suspense boundary")) {
+            return;
+        }
+        // A view transition the browser cancelled because the tab was not
+        // visible. React reports it here; the update still landed, and a tab
+        // in the background is not a fault in the page.
+        if (message.includes("Transition was aborted"))
+            return;
+        // A navigation another one overtook: its request was aborted, and a
+        // row of its payload that a component was still reading rejects with
+        // the abort. React recovers by rendering the root again synchronously
+        // and reports the recovery here as #520, with the abort as the cause.
+        // The page it recovered to is the one the second navigation asked for;
+        // the abort was the design, not a fault.
+        const cause = error?.cause;
+        if (cause?.name === "AbortError" ||
+            /\baborted\b/i.test(cause?.message ?? "") ||
+            /\baborted\b/i.test(message)) {
+            return;
+        }
+        // A page whose query string was read under a boundary carries the
+        // fallback there; React reports the recovery on hydration. Under a
+        // boundary the developer wrote, that is the designed path and nothing
+        // is said. With nothing closer than a loading.tsx, the whole segment
+        // showed the fallback until the query arrived - said here, in the
+        // page and the console, for whoever is looking at either. Production
+        // has no stack to tell the two apart; the build's note on the route is
+        // the record there.
+        if (error?.digest === SEARCH_PARAMS_FALLBACK ||
+            message.includes("useSearchParams()")) {
+            const stack = errorInfo
+                ?.componentStack;
+            if (!caughtByLoading(stack))
                 return;
-            }
-            console.error(error, errorInfo);
-        },
+            const hint = "useSearchParams() was read on the server with nothing closer than a loading.tsx, so the " +
+                "whole segment showed that fallback until the query arrived. A <Suspense> around the " +
+                "component that reads keeps the rest of the page painted.";
+            showDevNotice(hint, stack);
+            console.error(new Error(hint), errorInfo);
+            return;
+        }
+        console.error(error, errorInfo);
+    };
+    const rootOptions = {
+        onRecoverableError,
         // A chunk the deploy no longer serves is not a fault in the page; the
         // document is loaded again, and the new names come with it. Anything
         // else is reported the way React would have.
@@ -293,7 +316,14 @@ export async function createViteRscApp(container = document, interceptEntries =
                 return;
             console.error(error, errorInfo);
         },
-    });
+    };
+    const root = missing || disagrees
+        ? (() => {
+            const created = createRoot(container, rootOptions);
+            created.render(shell);
+            return created;
+        })()
+        : hydrateRoot(container, shell, rootOptions);
     // Depth 0 is a whole document and replaces the root. Anything deeper is one
     // segment: handing it to the boundary at that depth leaves the layouts above
     // it mounted, which is the point of asking for a partial render at all.
@@ -308,9 +338,25 @@ export async function createViteRscApp(container = document, interceptEntries =
         clearSegments();
         root.render(newTree);
     });
+    // The whole document again, in place - revalidate("all"). Not through the
+    // handler above: that clears the boundaries and renders the tree as a new
+    // page, and a boundary emptied re-keys its Activity to the current url and
+    // remounts everything under it. A port's "added to cart" went with the
+    // form's state that way, on every product reached by a link. Here the root
+    // takes the tree in a transition and each boundary hands its page the new
+    // children under the key it has - see replaceActive.
+    setReplaceRootHandler((tree) => {
+        startTransition(() => root.render(tree));
+    });
     // Back and forward reveal a page the boundaries are still holding, with the
     // form you were filling in still filled in, and without asking the server.
     setRestoreHandler((key, maxAge) => restoreSegments(key, maxAge));
+    setHeldHandlers(isHeld, dropHidden);
+    // A touch or a settled hover: the page is rendered hidden now, and the
+    // click reveals it. See warm() in navigate.ts and prerenderSegment.
+    setPrerenderHandler((tree, key, segmentDepth) => {
+        prerenderSegment(segmentDepth, key, tree);
+    });
     window.addEventListener("popstate", () => {
         // restore: back and forward reveal the page you were on, with its state.
         // Wherever the browser just went; not a literal this app wrote.