@ssgoi/react 7.4.0 → 7.5.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/react
 
-React bindings for SSGOI.
+Native app-like page transitions for React and Next.js. Make a web app, PWA or WebView app (Capacitor, Tauri, Ionic) feel like a native app without replacing your router.
 
 [![SSGOI live showcase](https://ssgoi.dev/readme.png)](https://ssgoi.dev)
 
@@ -12,17 +12,28 @@ npm install @ssgoi/react
 
 Agent setup guide: https://ssgoi.dev/llms.txt
 
-## Router helpers
+## Router integration
 
-Install this framework package once; router helpers are optional subpaths.
-Next.js is the only helper not marked experimental. The other router helpers are experimental APIs.
+Tell `<Ssgoi framework>` how to read your router once, describe your layout
+tree in `config.layouts`, and put a prop-less `SsgoiLayoutBoundary` from
+`@ssgoi/react` in each layout that owns routed content. The root entry imports
+no router package: `framework.useRoute` is a hook you write with your router's
+own hooks, returning `{ pathname, renderedPath? }` or `null` while the router
+isn't ready. The first boundary calls it once for every boundary inside it.
 
-| Router                  | Import                         | API                  |
-| ----------------------- | ------------------------------ | -------------------- |
-| Next.js                 | `@ssgoi/react/nextjs`          | `SsgoiRouteBoundary` |
-| Remix 2                 | `@ssgoi/react/remix`           | `SsgoiRouteBoundary` |
-| React Router            | `@ssgoi/react/react-router`    | `SsgoiRouteBoundary` |
-| TanStack Router / Start | `@ssgoi/react/tanstack-router` | `SsgoiRouteBoundary` |
+| Router                  | `useRoute`                                                       |
+| ----------------------- | ---------------------------------------------------------------- |
+| Next.js App Router      | `usePathname` + `useSelectedLayoutSegments` ([Next.js](#nextjs)) |
+| React Router / Remix 2  | `() => useLocation()`                                            |
+| TanStack Router / Start | the rendered leaf match ([TanStack Router](#tanstack-router))    |
+
+Define the object at module scope so it stays stable. `SsgoiLayoutBoundary`
+throws if the nearest `<Ssgoi>` has no `framework`.
+
+The router subpaths `@ssgoi/react/nextjs`, `@ssgoi/react/remix`,
+`@ssgoi/react/react-router` and `@ssgoi/react/tanstack-router` (and their
+`SsgoiRouteBoundary`) still work but are deprecated and will be removed in
+8.0.0.
 
 See the [framework guide](https://ssgoi.dev/docs/frameworks/react) for wiring and limits.
 
@@ -55,10 +66,21 @@ Keep one config and one `<Ssgoi>` above route boundaries.
 // app/ssgoi-provider.tsx
 "use client";
 
-import { Ssgoi } from "@ssgoi/react";
+import { usePathname, useSelectedLayoutSegments } from "next/navigation";
+import { Ssgoi, type SsgoiFramework } from "@ssgoi/react";
 import { drill, slide } from "@ssgoi/react/view-transitions";
 
+const TOP_LEVEL = ["/", "/search", "/profile"];
+
 const config = {
+  layouts: [
+    { paths: TOP_LEVEL },
+    {
+      paths: "/**",
+      except: TOP_LEVEL,
+      layouts: [{ paths: "/products/**" }],
+    },
+  ],
   transitions: [
     { on: "/posts/**", except: "/posts", transition: drill() },
     {
@@ -68,23 +90,49 @@ const config = {
   ],
 };
 
+const INTERCEPTION_PREFIX = /^(?:\(\.\.\.\)|\(\.\.\)|\(\.\))+/;
+
+const framework: SsgoiFramework = {
+  useRoute: () => {
+    const pathname = usePathname();
+    // The page the children slot renders. During a soft intercept it is still
+    // the background page, so no background boundary moves.
+    const segments = useSelectedLayoutSegments();
+    if (pathname == null) return null;
+    const renderedPath = `/${segments
+      .filter((segment) => !(segment.startsWith("(") && segment.endsWith(")")))
+      .map((segment) => segment.replace(INTERCEPTION_PREFIX, ""))
+      .filter(Boolean)
+      .join("/")}`;
+    return { pathname, renderedPath };
+  },
+};
+
 export function SsgoiProvider({ children }) {
-  return <Ssgoi config={config}>{children}</Ssgoi>;
+  return (
+    <Ssgoi config={config} framework={framework}>
+      {children}
+    </Ssgoi>
+  );
 }
 ```
 
-Build the layout shell next:
+Render the provider in the root layout with the depth-0 boundary:
 
 ```tsx
 // app/layout.tsx
+import { SsgoiLayoutBoundary } from "@ssgoi/react";
 import { SsgoiProvider } from "./ssgoi-provider";
 
-export default function RootLayout({ children }) {
+export default function RootLayout({ children, modal }) {
   return (
     <html>
       <body>
         <main className="relative z-0 min-h-dvh overflow-x-clip">
-          <SsgoiProvider>{children}</SsgoiProvider>
+          <SsgoiProvider>
+            <SsgoiLayoutBoundary>{children}</SsgoiLayoutBoundary>
+            {modal}
+          </SsgoiProvider>
         </main>
       </body>
     </html>
@@ -98,12 +146,18 @@ block, `z-0` creates the local stacking context, and `overflow-x-clip` prevents
 horizontal transition flashes. These classes belong on the shell around
 `<Ssgoi>`, not on route boundaries.
 
+Put the first `SsgoiLayoutBoundary` in the same layout as `<Ssgoi>`:
+`renderedPath` is computed relative to that layout. That boundary reads the
+route for every boundary inside it, within its own `Suspense`, so Next.js Cache
+Components can suspend on the URL. Until the route is known it renders nothing,
+while content outside it (such as `{modal}`) renders as usual.
+
 ### Route boundary
 
 A React route boundary is a keyed element marked with a route id:
 
 ```tsx
-<div key={boundary.key} data-ssgoi-transition={boundary.id}>
+<div key={key} data-ssgoi-transition={routePath}>
   {children}
 </div>
 ```
@@ -113,166 +167,131 @@ A React route boundary is a keyed element marked with a route id:
 - `<Ssgoi>` observes that lifecycle and runs OUT/IN; it does not navigate or
   change the key.
 
-The legacy `<SsgoiTransition>` wrapper only added this attribute and is
-deprecated. Set `data-ssgoi-transition` directly on the keyed application
-boundary.
-
-Use `@ssgoi/react/nextjs` for the ready-made boundary. If the application needs
-its own policy layer, the following manual example keeps route logic behind
-semantic names so layouts cannot invent inconsistent keys:
-
-```tsx
-// app/ssgoi-route-boundary.tsx
-"use client";
-
-import { type ReactNode } from "react";
-import { usePathname, useSelectedLayoutSegments } from "next/navigation";
+`SsgoiLayoutBoundary` renders that element for you and takes no SSGOI props:
+`as` picks the element (default `div`) and every other prop is forwarded.
 
-type BoundaryName = "app-shell" | "main-content" | "project-content";
-type BoundaryIdentity = { id: string; key: string };
-
-const INTERCEPTION_PREFIX = /^(?:\(\.\.\.\)|\(\.\.\)|\(\.\))+/;
-
-function isRouteGroup(segment: string) {
-  return segment.startsWith("(") && segment.endsWith(")");
-}
-
-function pathFromSegments(segments: string[]) {
-  const path = segments
-    .filter((segment) => !isRouteGroup(segment))
-    .map((segment) => segment.replace(INTERCEPTION_PREFIX, ""))
-    .filter(Boolean)
-    .join("/");
-
-  return path ? `/${path}` : null;
-}
+- Its depth is the number of boundaries above it: 0 in the root layout, 1 in a
+  layout under it, and so on.
+- `routePath` is `renderedPath ?? pathname`; it is the id of every boundary.
+- The key at depth N is the depth-N scope instance `config.layouts` resolves for
+  `routePath`, or `routePath` itself when there is none. Without
+  `config.layouts`, every boundary keys by the route.
 
-function resolveBoundary(
-  name: BoundaryName,
-  pathname: string,
-  segments: string[],
-): BoundaryIdentity {
-  const ownedRoute = pathFromSegments(segments) ?? pathname;
-
-  switch (name) {
-    case "app-shell": {
-      const routeGroup = segments.find(isRouteGroup);
-      if (routeGroup === "(main)") {
-        return { id: ownedRoute, key: "main-shell" };
-      }
-
-      const project = ownedRoute.match(/^\/projects\/[^/]+/)?.[0];
-      return { id: ownedRoute, key: project ?? ownedRoute };
-    }
-    case "project-content": {
-      const project = pathname.match(/^\/projects\/[^/]+/)?.[0];
-      const child = pathFromSegments(segments);
-      const id = project
-        ? child
-          ? `${project}${child}`
-          : project
-        : ownedRoute;
-      return { id, key: id };
-    }
-    case "main-content":
-      return { id: ownedRoute, key: ownedRoute };
-  }
-}
-
-export function SsgoiRouteBoundary({
-  children,
-  name,
-}: {
-  children: ReactNode;
-  name: BoundaryName;
-}) {
-  const pathname = usePathname();
-  const segments = useSelectedLayoutSegments("children");
-  const boundary = resolveBoundary(name, pathname, segments);
-
-  return (
-    <div key={boundary.key} data-ssgoi-transition={boundary.id}>
-      {children}
-    </div>
-  );
-}
-```
+The legacy `<SsgoiTransition>` wrapper only added this attribute and is
+deprecated (removed in 8.0.0). Set `data-ssgoi-transition` directly on the keyed
+application boundary.
 
 ## Persistent layouts
 
-Place one named boundary in the common app layout, then add child boundaries
-only around routed content that changes while its parent remains mounted.
+`config.layouts` mirrors the layouts that own boundaries. Siblings in one array
+are tried in order and the first match wins (`except` excludes paths); a scope's
+`layouts` is the next depth inside it. Patterns use the transition-rule syntax.
+`*`, `:id` and `[id]` segments make one instance per value, so
+`{ paths: "/projects/:id/**" }` keeps `/projects/1/files` and
+`/projects/1/members` in one layout and gives `/projects/2` another; `**`
+tails do not.
 
-```tsx
-// app/layout.tsx — replace the provider line from the shell example.
-<SsgoiProvider>
-  <SsgoiRouteBoundary name="app-shell">{children}</SsgoiRouteBoundary>
-</SsgoiProvider>
+```text
+app/
+  layout.tsx                  # <Ssgoi> + depth-0 boundary, {modal} outside it
+  (top-level)/layout.tsx      # depth-1 boundary + bottom nav outside it
+  (top-level)/page.tsx
+  (top-level)/search/page.tsx
+  (detail)/layout.tsx         # depth-1 boundary
+  (detail)/posts/[id]/page.tsx
+  (detail)/products/layout.tsx  # depth-2 boundary + category tabs
+  @modal/(.)posts/[id]/page.tsx
 ```
 
 ```tsx
-// app/(main)/layout.tsx
-export default function MainLayout({ children }) {
+// app/(top-level)/layout.tsx
+import { SsgoiLayoutBoundary } from "@ssgoi/react";
+
+export default function TopLevelLayout({ children }) {
   return (
     <>
-      <SsgoiRouteBoundary name="main-content">{children}</SsgoiRouteBoundary>
+      <SsgoiLayoutBoundary>{children}</SsgoiLayoutBoundary>
       <BottomNav />
     </>
   );
 }
 ```
 
-- Main → main: only the inner content boundary changes; the nav stays.
-- Main → detail: the common app-shell key changes; the nav leaves with it.
-- Project tab → project tab: the current project base-path key stays; a project
-  content boundary can change below its header and tabs.
-
-Use Next.js route groups to describe layout ownership, not to duplicate the
-outer boundary:
+With the config above:
 
-```text
-app/
-  layout.tsx                 # one <Ssgoi> + one named app-shell boundary
-  (main)/layout.tsx
-  (main)/page.tsx
-  (main)/search/page.tsx
-  (detail)/post/[id]/page.tsx
-```
-
-For Next.js parallel and intercepting routes, the browser pathname may point at
-a modal while the background `children` slot has not changed. Resolve that
-boundary’s id/key from `useSelectedLayoutSegments("children")`. In the layout
-that owns `@modal`, `useSelectedLayoutSegment("modal") !== null` is an explicit
-active-modal check. A soft intercept keeps the background key; direct entry to
-the same URL resolves to the detail slot and receives a detail key.
+- Tab → tab (`/` → `/search`): the depth-0 key stays, so the bottom nav stays;
+  only the depth-1 content changes.
+- Top level → detail (`/search` → `/posts/1`): the depth-0 key changes; the
+  whole top level, bottom nav included, leaves.
+- Detail → detail and category → category under `/products/**`: the enclosing
+  layouts stay; the boundary one level deeper changes, so `slide` moves only
+  the category content.
+- A soft intercept (`/posts/1` opened over `/search`) keeps `renderedPath` at
+  `/search`, so nothing in the background moves; the `{modal}` slot sits
+  outside every boundary and animates by itself. Direct entry to `/posts/1`
+  renders the detail page and keys it as one.
 
 Full pattern: https://ssgoi.dev/llms/bottom-nav.txt
 
 ## React Router
 
-Replace `usePathname()` with `useLocation()` and render the boundary in a
-nested layout route:
+Render `<Ssgoi>` inside the router and the boundary in a layout route:
 
 ```tsx
-const { pathname } = useLocation();
+import { Outlet, useLocation } from "react-router"; // Remix 2: "@remix-run/react"
+import { Ssgoi, SsgoiLayoutBoundary, type SsgoiFramework } from "@ssgoi/react";
 
-return (
-  <div key={pathname} data-ssgoi-transition={pathname}>
-    <Outlet />
-  </div>
-);
+const framework: SsgoiFramework = { useRoute: () => useLocation() };
+
+export default function Layout() {
+  return (
+    <Ssgoi config={config} framework={framework}>
+      <SsgoiLayoutBoundary>
+        <Outlet />
+      </SsgoiLayoutBoundary>
+    </Ssgoi>
+  );
+}
 ```
 
+Query-only navigation keeps the boundary. Nested layout routes add deeper
+boundaries, keyed by `config.layouts` as above.
+
 ## TanStack Router
 
-Read the pathname from router state and place the boundary in a parent route:
+Key by the leaf match the outlet renders, not `location`: TanStack Router moves
+`location` before pending matches render, so keying by it re-keys the boundary
+while the outgoing page is still on screen. Index routes match as "/parent/",
+so the location's own trailing-slash style wins.
 
 ```tsx
-const pathname = useRouterState({
-  select: (state) => state.location.pathname,
-});
+import { Outlet, useRouterState } from "@tanstack/react-router";
+import { Ssgoi, SsgoiLayoutBoundary, type SsgoiFramework } from "@ssgoi/react";
+
+const framework: SsgoiFramework = {
+  useRoute: () => ({
+    pathname: useRouterState({
+      select: (state) => {
+        const location = state.location.pathname;
+        const leaf = state.matches.at(-1)?.pathname;
+        if (!leaf) return location;
+        return leaf.length > 1 && leaf.endsWith("/") && !location.endsWith("/")
+          ? leaf.slice(0, -1)
+          : leaf;
+      },
+    }),
+  }),
+};
+
+<Ssgoi config={config} framework={framework}>
+  <SsgoiLayoutBoundary>
+    <Outlet />
+  </SsgoiLayoutBoundary>
+</Ssgoi>;
 ```
 
+Pathless `_layout` routes add deeper boundaries, keyed by `config.layouts`.
+
 ## Config
 
 ```ts
@@ -298,6 +317,8 @@ const config = {
 };
 ```
 
+- `layouts`: the layout tree for `SsgoiLayoutBoundary` keys (see
+  [Persistent layouts](#persistent-layouts)).
 - `on`: route family.
 - `from`/`to`: precise pair.
 - `ordered`: directional sequence.
@@ -324,8 +345,9 @@ References: https://ssgoi.dev/llms.txt#7-transition-index
 
 ## Low-level APIs
 
-`transition()` and the auto-key plugins remain available for element-level
-mount/unmount animations; they are separate from route boundaries.
+`transition()` remains available for element-level mount/unmount animations;
+it is separate from route boundaries. The `@ssgoi/react/unplugin` auto-key
+plugins are deprecated and will be removed in 8.0.0.
 
 ## License
 

package/dist/context.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),n=require("@ssgoi/core/internal"),s=e.createContext(null),o=()=>n.IDLE_TRANSITION_STATE;function i(){const t=e.useContext(s);if(!t)throw new Error("useSsgoiTransition must be used within <Ssgoi>");return e.useSyncExternalStore(t.subscribe,t.getTransitionState,o)}exports.ssgoiContext=s;exports.useSsgoiTransition=i;

package/dist/context.d.ts

@@ -0,0 +1,16 @@
+import { SsgoiContext } from '@ssgoi/core/internal';
+import { SsgoiTransitionState } from '@ssgoi/core/types';
+/** Provider-scoped dispatcher; `<Ssgoi>` owns the only value. */
+export declare const ssgoiContext: import('react').Context<SsgoiContext | null>;
+/**
+ * Reads the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins. Re-renders the caller on
+ * every change.
+ *
+ * Use it to defer work that would fight the animation, such as a
+ * programmatic scroll on the arriving page, until the status returns to
+ * `"idle"`.
+ *
+ * Must be called under `<Ssgoi>`.
+ */
+export declare function useSsgoiTransition(): SsgoiTransitionState;

package/dist/context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as o, useContext as e, useSyncExternalStore as s } from "react";
+import { IDLE_TRANSITION_STATE as n } from "@ssgoi/core/internal";
+const r = o(null), i = () => n;
+function a() {
+  const t = e(r);
+  if (!t)
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  return s(
+    t.subscribe,
+    t.getTransitionState,
+    i
+  );
+}
+export {
+  r as ssgoiContext,
+  a as useSsgoiTransition
+};

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.cjs"),i=require("./ssgoi-transition.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.Ssgoi;exports.SsgoiTransition=i.SsgoiTransition;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@ssgoi/core/types"),r=require("./ssgoi.cjs"),i=require("./context.cjs"),s=require("./legacy/ssgoi-transition.cjs"),n=require("./layout-boundary.cjs"),t=require("@ssgoi/core");exports.Ssgoi=r.Ssgoi;exports.useSsgoiTransition=i.useSsgoiTransition;exports.SsgoiTransition=s.SsgoiTransition;exports.SsgoiLayoutBoundary=n.SsgoiLayoutBoundary;Object.keys(o).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>o[e]})});Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});

package/dist/index.d.ts

@@ -1,4 +1,7 @@
 export * from './types';
 export { Ssgoi } from './ssgoi';
-export { SsgoiTransition } from './ssgoi-transition';
+export { useSsgoiTransition } from './context';
+export { SsgoiTransition } from './legacy/ssgoi-transition';
+export { SsgoiLayoutBoundary } from './layout-boundary';
+export type { SsgoiFramework, SsgoiLayoutBoundaryProps, } from './layout-boundary';
 export * from '@ssgoi/core';

package/dist/index.js

@@ -1,8 +1,12 @@
 export * from "@ssgoi/core/types";
-import { Ssgoi as e } from "./ssgoi.js";
-import { SsgoiTransition as i } from "./ssgoi-transition.js";
+import { Ssgoi as i } from "./ssgoi.js";
+import { useSsgoiTransition as s } from "./context.js";
+import { SsgoiTransition as m } from "./legacy/ssgoi-transition.js";
+import { SsgoiLayoutBoundary as x } from "./layout-boundary.js";
 export * from "@ssgoi/core";
 export {
-  e as Ssgoi,
-  i as SsgoiTransition
+  i as Ssgoi,
+  x as SsgoiLayoutBoundary,
+  m as SsgoiTransition,
+  s as useSsgoiTransition
 };

package/dist/layout-boundary.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),n=require("react"),y=require("@ssgoi/core/internal"),a=n.createContext(null),c=n.createContext(null);function m({framework:e,layouts:t,children:o}){const r=n.useMemo(()=>e?{framework:e,layouts:t}:null,[e,t]);return s.jsx(a.Provider,{value:r,children:o})}function S(e){const t=n.useContext(a),o=n.useContext(c);if(o)return s.jsx(l,{...e,state:o});if(!t)throw new Error("SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi framework={{ useRoute }}>.");return s.jsx(n.Suspense,{fallback:null,children:s.jsx(f,{...e,setup:t})})}function f({setup:{framework:e,layouts:t},...o}){const r=e.useRoute(),u=r&&(r.renderedPath??r.pathname),i=n.useMemo(()=>u==null?null:{routePath:u,chain:y.resolveLayoutChain(t,u),depth:0},[t,u]);return i?s.jsx(l,{...o,state:i}):null}function l({state:e,as:t,children:o,...r}){const u=n.useMemo(()=>({...e,depth:e.depth+1}),[e]),{routePath:i,chain:d,depth:h}=e,x=t??"div";return n.createElement(x,{...r,key:d[h]??i,"data-ssgoi-transition":i},s.jsx(c.Provider,{value:u,children:o}))}exports.SsgoiFrameworkProvider=m;exports.SsgoiLayoutBoundary=S;

package/dist/layout-boundary.d.ts

@@ -0,0 +1,35 @@
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
+import { SsgoiLayoutScope } from '@ssgoi/core/types';
+/**
+ * How `<Ssgoi>` reads the router, passed to `<Ssgoi framework>`. Keep the
+ * object stable.
+ */
+export interface SsgoiFramework {
+    /**
+     * A hook returning the current route, or `null` while the router isn't
+     * ready. `renderedPath` is the path the routed region actually shows when it
+     * differs from the URL (a soft-intercepted Next.js route); boundaries key by
+     * it instead of `pathname`.
+     */
+    useRoute: () => {
+        pathname: string;
+        renderedPath?: string;
+    } | null;
+}
+/** @internal `<Ssgoi>`'s framework and layout tree, for the first boundary. */
+export declare function SsgoiFrameworkProvider({ framework, layouts, children, }: {
+    framework: SsgoiFramework | undefined;
+    layouts: readonly SsgoiLayoutScope[] | undefined;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type SsgoiLayoutBoundaryProps<T extends ElementType = "div"> = {
+    children?: ReactNode;
+    as?: T;
+} & Omit<ComponentPropsWithoutRef<T>, "as" | "children">;
+/**
+ * A keyed route boundary for the layout that renders it. Its depth is the
+ * number of boundaries above it; it stays mounted while navigation stays in
+ * the same `config.layouts` scope at that depth, and otherwise keys by the
+ * route. The first boundary reads the route for the ones inside it.
+ */
+export declare function SsgoiLayoutBoundary<T extends ElementType = "div">(props: SsgoiLayoutBoundaryProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/layout-boundary.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as u } from "react/jsx-runtime";
+import { createContext as c, useMemo as s, useContext as a, Suspense as f, createElement as y } from "react";
+import { resolveLayoutChain as v } from "@ssgoi/core/internal";
+const l = c(null), d = c(null);
+function k({
+  framework: t,
+  layouts: e,
+  children: n
+}) {
+  const o = s(
+    () => t ? { framework: t, layouts: e } : null,
+    [t, e]
+  );
+  return /* @__PURE__ */ u(l.Provider, { value: o, children: n });
+}
+function w(t) {
+  const e = a(l), n = a(d);
+  if (n) return /* @__PURE__ */ u(p, { ...t, state: n });
+  if (!e)
+    throw new Error(
+      "SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi framework={{ useRoute }}>."
+    );
+  return (
+    // Catches URL suspension (Next.js Cache Components) outside the hook.
+    /* @__PURE__ */ u(f, { fallback: null, children: /* @__PURE__ */ u(C, { ...t, setup: e }) })
+  );
+}
+function C({
+  setup: { framework: t, layouts: e },
+  ...n
+}) {
+  const o = t.useRoute(), r = o && (o.renderedPath ?? o.pathname), i = s(
+    () => r == null ? null : {
+      routePath: r,
+      chain: v(e, r),
+      depth: 0
+    },
+    [e, r]
+  );
+  return i ? /* @__PURE__ */ u(p, { ...n, state: i }) : null;
+}
+function p({
+  state: t,
+  as: e,
+  children: n,
+  ...o
+}) {
+  const r = s(() => ({ ...t, depth: t.depth + 1 }), [t]), { routePath: i, chain: h, depth: m } = t;
+  return /* @__PURE__ */ y(
+    e ?? "div",
+    {
+      ...o,
+      key: h[m] ?? i,
+      "data-ssgoi-transition": i
+    },
+    /* @__PURE__ */ u(d.Provider, { value: r, children: n })
+  );
+}
+export {
+  k as SsgoiFrameworkProvider,
+  w as SsgoiLayoutBoundary
+};

package/dist/legacy/nextjs/index.d.ts

@@ -0,0 +1,9 @@
+import { RouteBoundaryState as RootRouteBoundaryState } from '../route-boundary';
+export { SsgoiRouteBoundary } from './ssgoi-route-boundary';
+export type { SsgoiRouteBoundaryProps, NextjsRouteLocation, } from './ssgoi-route-boundary';
+export { selectedSegmentsToPath } from './selected-segments-to-path';
+/**
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from
+ * "@ssgoi/react" with `<Ssgoi framework={...}>` instead.
+ */
+export type RouteBoundaryState = RootRouteBoundaryState;

package/dist/{routers → legacy}/nextjs/selected-segments-to-path.d.ts

@@ -2,5 +2,8 @@
  * Turn a layout's selected slot into a route id. Pass the owning layout's
  * absolute base path for nested layouts. Interception markers are stripped;
  * this does not reconstruct an intercepted destination's relative ancestry.
+ *
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from
+ * "@ssgoi/react" with `<Ssgoi framework={...}>` instead.
  */
 export declare function selectedSegmentsToPath(segments: readonly string[], basePath?: string): string;

package/dist/legacy/nextjs/ssgoi-route-boundary.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),n=require("next/navigation"),r=require("../route-boundary.cjs"),s=({parallelRoutesKey:e="children"})=>{const t=n.usePathname(),u=n.useSelectedLayoutSegments(e)??[];return t==null?null:{pathname:t,selectedSegments:u}};function a(e){return o.jsx(r.SuspendedRouteBoundary,{...e,useRoute:s})}exports.SsgoiRouteBoundary=a;

package/dist/{routers → legacy}/nextjs/ssgoi-route-boundary.d.ts

@@ -1,15 +1,28 @@
 import { ElementType, ReactNode } from 'react';
 import { RouteBoundaryProps } from '../route-boundary';
+/**
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from
+ * "@ssgoi/react" with `<Ssgoi framework={...}>` instead.
+ */
 export interface NextjsRouteLocation {
     pathname: string;
     /** Segments below the layout that renders this boundary, including groups. */
     selectedSegments: string[];
 }
+/**
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from
+ * "@ssgoi/react" with `<Ssgoi framework={...}>` instead.
+ */
 export type SsgoiRouteBoundaryProps<T extends ElementType = "div"> = RouteBoundaryProps<NextjsRouteLocation, T> & {
     /** The parallel slot to read, without @. Defaults to children. */
     parallelRoutesKey?: string;
     /** Shown while Next.js resolves URL data (including Cache Components). */
     fallback?: ReactNode;
 };
-/** App Router boundary. Import only from @ssgoi/react/nextjs. */
+/**
+ * App Router boundary. Import only from @ssgoi/react/nextjs.
+ *
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from
+ * "@ssgoi/react" with `<Ssgoi framework={...}>` instead.
+ */
 export declare function SsgoiRouteBoundary<T extends ElementType = "div">(props: SsgoiRouteBoundaryProps<T>): import("react/jsx-runtime").JSX.Element;