@ssgoi/solid 7.4.0 → 7.5.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/solid
 
-Solid and SolidStart bindings for SSGOI.
+Native app-like page transitions for Solid and SolidStart. 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,15 +12,52 @@ npm install @ssgoi/solid
 
 Agent setup guide: https://ssgoi.dev/llms/solid.txt
 
-## Router helpers
+## Layout boundary
 
-Install this framework package once; router helpers are optional subpaths.
-These router helpers are experimental APIs and may change.
+Pass a reactive route getter to `<Ssgoi>` once (inside `<Router>`, see [Root](#root)),
+then wrap routed content in `SsgoiLayoutBoundary`.
 
-| Router       | Import                      | API                  |
-| ------------ | --------------------------- | -------------------- |
-| Solid Router | `@ssgoi/solid/solid-router` | `SsgoiRouteBoundary` |
-| SolidStart   | `@ssgoi/solid/solidstart`   | `SsgoiRouteBoundary` |
+```tsx
+import { SsgoiLayoutBoundary } from "@ssgoi/solid";
+
+export default function ProductsLayout(props) {
+  return (
+    <SsgoiLayoutBoundary as="section">
+      <div>{props.children}</div>
+    </SsgoiLayoutBoundary>
+  );
+}
+```
+
+Each boundary marks the current path with `data-ssgoi-transition`. Nest them
+freely: depth is automatic. Declare which paths share a layout in
+`config.layouts`; the scope matched at a boundary's depth keeps its DOM, and
+past the declared scopes a boundary remounts on every path change (the default
+without `layouts`).
+
+```ts
+const TOP_LEVEL = ["/home", "/search", "/profile"];
+const config = {
+  layouts: [
+    { paths: TOP_LEVEL }, // tabs share one depth-0 layout
+    {
+      paths: "/**",
+      except: TOP_LEVEL,
+      layouts: [{ paths: "/products/**" }], // depth-1 scope inside details
+    },
+  ],
+  transitions: [/* ... */],
+};
+```
+
+The first matching scope at each level wins. Single-segment captures (`*`,
+`:id`, `[id]`) split instances, so `/projects/:id/**` keeps one layout per
+project; `**` tails do not. `SsgoiLayoutBoundary` takes no SSGOI props (`as`
+sets the element) and throws without `framework` on `<Ssgoi>`.
+
+`SsgoiRouteBoundary` from `@ssgoi/solid/solid-router` and
+`@ssgoi/solid/solidstart` is deprecated; use `SsgoiLayoutBoundary` with
+`framework` instead.
 
 See the [framework guide](https://ssgoi.dev/docs/frameworks/solid) for wiring and limits.
 
@@ -29,7 +66,7 @@ See the [framework guide](https://ssgoi.dev/docs/frameworks/solid) for wiring an
 Use one `<Ssgoi>` around file routes.
 
 ```tsx
-import { Router } from "@solidjs/router";
+import { Router, useLocation, type RouteSectionProps } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Ssgoi } from "@ssgoi/solid";
 import { drill } from "@ssgoi/solid/view-transitions";
@@ -38,15 +75,24 @@ const config = {
   transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
 };
 
+function Root(props: RouteSectionProps) {
+  const location = useLocation();
+
+  return (
+    <main class="relative z-0 min-h-dvh overflow-x-clip">
+      <Ssgoi
+        config={config}
+        framework={{ getRoute: () => ({ pathname: location.pathname }) }}
+      >
+        {props.children}
+      </Ssgoi>
+    </main>
+  );
+}
+
 export default function App() {
   return (
-    <Router
-      root={(props) => (
-        <main class="relative z-0 min-h-dvh overflow-x-clip">
-          <Ssgoi config={config}>{props.children}</Ssgoi>
-        </main>
-      )}
-    >
+    <Router root={Root}>
       <FileRoutes />
     </Router>
   );

package/dist/context.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("solid-js"),t=o.createContext(null),s=t.Provider,r=()=>{const e=o.useContext(t);if(!e)throw new Error("useSsgoi must be used within SsgoiProvider");return e};exports.SsgoiProvider=s;exports.useSsgoi=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("solid-js"),e=t.createContext(null),s=t.createContext(void 0),i=t.createContext(0),a=e.Provider,c=s.Provider,S=i.Provider,g=()=>t.useContext(s),d=()=>t.useContext(i),v=()=>{const o=t.useContext(e);if(!o)throw new Error("useSsgoi must be used within SsgoiProvider");return o},x=()=>{const o=t.useContext(e);if(!o)throw new Error("useSsgoiTransition must be used within <Ssgoi>");const[n,r]=t.createSignal(o.getTransitionState());return t.onCleanup(o.subscribe(u=>r(()=>u))),n};exports.SsgoiLayoutDepthProvider=S;exports.SsgoiLayoutProvider=c;exports.SsgoiProvider=a;exports.useLayoutDepth=d;exports.useSsgoi=v;exports.useSsgoiLayout=g;exports.useSsgoiTransition=x;

package/dist/context.d.ts

@@ -1,3 +1,26 @@
-import { SsgoiContext } from './types';
+import { Accessor } from 'solid-js';
+import { SsgoiContext, SsgoiTransitionState } from './types';
+/** Route state `<Ssgoi>` resolves once for every layout boundary below it. */
+export interface SsgoiLayoutState {
+    routePath: string;
+    chain: string[];
+}
 export declare const SsgoiProvider: import('solid-js').ContextProviderComponent<SsgoiContext | null>;
+export declare const SsgoiLayoutProvider: import('solid-js').ContextProviderComponent<Accessor<SsgoiLayoutState | undefined> | undefined>;
+/** Gives descendants of a layout boundary their depth. */
+export declare const SsgoiLayoutDepthProvider: import('solid-js').ContextProviderComponent<number>;
+/** Layout state of the nearest `<Ssgoi>`; undefined without a framework. */
+export declare const useSsgoiLayout: () => Accessor<SsgoiLayoutState | undefined> | undefined;
+/** Depth of the calling layout boundary: 0 unless inside another. */
+export declare const useLayoutDepth: () => number;
 export declare const useSsgoi: () => SsgoiContext;
+/**
+ * Signal of the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins.
+ *
+ * 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 const useSsgoiTransition: () => Accessor<SsgoiTransitionState>;

package/dist/context.js

@@ -1,11 +1,22 @@
-import { createContext as e, useContext as r } from "solid-js";
-const t = e(null), n = t.Provider, i = () => {
-  const o = r(t);
-  if (!o)
+import { createContext as e, useContext as o, createSignal as a, onCleanup as S } from "solid-js";
+const s = e(null), n = e(void 0), i = e(0), d = s.Provider, v = n.Provider, x = i.Provider, h = () => o(n), P = () => o(i), p = () => {
+  const t = o(s);
+  if (!t)
     throw new Error("useSsgoi must be used within SsgoiProvider");
-  return o;
+  return t;
+}, w = () => {
+  const t = o(s);
+  if (!t)
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  const [r, u] = a(t.getTransitionState());
+  return S(t.subscribe((c) => u(() => c))), r;
 };
 export {
-  n as SsgoiProvider,
-  i as useSsgoi
+  x as SsgoiLayoutDepthProvider,
+  v as SsgoiLayoutProvider,
+  d as SsgoiProvider,
+  P as useLayoutDepth,
+  p as useSsgoi,
+  h as useSsgoiLayout,
+  w 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("./layout-boundary.cjs"),n=require("./legacy/ssgoi-transition.cjs"),t=require("@ssgoi/core");exports.Ssgoi=r.Ssgoi;exports.useSsgoiTransition=i.useSsgoiTransition;exports.SsgoiLayoutBoundary=s.SsgoiLayoutBoundary;exports.SsgoiTransition=n.SsgoiTransition;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,5 +1,8 @@
 export * from './types';
 export { Ssgoi } from './ssgoi';
-/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
-export { SsgoiTransition } from './ssgoi-transition';
+export { useSsgoiTransition } from './context';
+export { SsgoiLayoutBoundary } from './layout-boundary';
+export type { SsgoiLayoutBoundaryProps } from './layout-boundary';
+/** @deprecated Will be removed in 8.0.0. */
+export { SsgoiTransition } from './routers/ssgoi-transition';
 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 { SsgoiLayoutBoundary as m } from "./layout-boundary.js";
+import { SsgoiTransition as x } from "./legacy/ssgoi-transition.js";
 export * from "@ssgoi/core";
 export {
-  e as Ssgoi,
-  i as SsgoiTransition
+  i as Ssgoi,
+  m as SsgoiLayoutBoundary,
+  x as SsgoiTransition,
+  s as useSsgoiTransition
 };

package/dist/layout-boundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("solid-js/web"),o=require("solid-js"),u=require("./context.cjs");function l(i){const[e,n]=o.splitProps(i,["children","as","state"]),a=o.createMemo(r=>{const s=e.state().key;return r?.key===s?r:{key:s}});return t.createComponent(o.Show,{get when(){return a()},keyed:!0,children:r=>t.createComponent(t.Dynamic,t.mergeProps({get component(){return e.as??"div"}},n,{get"data-ssgoi-transition"(){return e.state().id},get children(){return e.children}}))})}function d(){throw new Error("SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi framework={{ getRoute }}>.")}function g(i){const e=u.useSsgoiLayout();e?.()||d();const n=u.useLayoutDepth(),[a,r]=o.splitProps(i,["children"]),s=o.createMemo(()=>{const{routePath:c,chain:y}=e()??d();return{id:c,key:y[n]??c}});return t.createComponent(l,t.mergeProps(r,{state:s,get children(){return t.createComponent(u.SsgoiLayoutDepthProvider,{value:n+1,get children(){return a.children}})}}))}exports.RouteBoundary=l;exports.SsgoiLayoutBoundary=g;

package/dist/layout-boundary.d.ts

@@ -0,0 +1,12 @@
+import { Accessor, JSX } from 'solid-js';
+export type SsgoiLayoutBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
+    as?: keyof JSX.IntrinsicElements;
+};
+/** Shared rendering; remounts its element whenever `state().key` changes. */
+export declare function RouteBoundary(props: SsgoiLayoutBoundaryProps & {
+    state: Accessor<{
+        id: string;
+        key: string | number;
+    }>;
+}): JSX.Element;
+export declare function SsgoiLayoutBoundary(props: SsgoiLayoutBoundaryProps): JSX.Element;

package/dist/layout-boundary.js

@@ -0,0 +1,61 @@
+import { createComponent as n, mergeProps as c, Dynamic as m } from "solid-js/web";
+import { splitProps as d, createMemo as h, Show as g } from "solid-js";
+import { useSsgoiLayout as y, useLayoutDepth as f, SsgoiLayoutDepthProvider as p } from "./context.js";
+function k(i) {
+  const [t, r] = d(i, ["children", "as", "state"]), s = h((e) => {
+    const o = t.state().key;
+    return e?.key === o ? e : {
+      key: o
+    };
+  });
+  return n(g, {
+    get when() {
+      return s();
+    },
+    keyed: !0,
+    children: (e) => n(m, c({
+      get component() {
+        return t.as ?? "div";
+      }
+    }, r, {
+      get "data-ssgoi-transition"() {
+        return t.state().id;
+      },
+      get children() {
+        return t.children;
+      }
+    }))
+  });
+}
+function u() {
+  throw new Error("SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi framework={{ getRoute }}>.");
+}
+function P(i) {
+  const t = y();
+  t?.() || u();
+  const r = f(), [s, e] = d(i, ["children"]), o = h(() => {
+    const {
+      routePath: a,
+      chain: l
+    } = t() ?? u();
+    return {
+      id: a,
+      key: l[r] ?? a
+    };
+  });
+  return n(k, c(e, {
+    state: o,
+    get children() {
+      return n(p, {
+        value: r + 1,
+        get children() {
+          return s.children;
+        }
+      });
+    }
+  }));
+}
+export {
+  k as RouteBoundary,
+  P as SsgoiLayoutBoundary
+};

package/dist/legacy/ssgoi-transition.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("solid-js/web"),a=require("solid-js"),l=require("../context.cjs"),u=t=>{const[e,o]=a.splitProps(t,["children","id","as","class"]),n=l.useSsgoi(),i=e.as||"div";return r.createComponent(r.Dynamic,r.mergeProps({component:i,ref(c){var s=n.refFor(e.id);typeof s=="function"&&s(c)},get"data-ssgoi-transition"(){return e.id},get class(){return e.class}},o,{get children(){return e.children}}))};exports.SsgoiTransition=u;

package/dist/{ssgoi-transition.js → legacy/ssgoi-transition.js}

@@ -1,6 +1,6 @@
 import { createComponent as c, Dynamic as a, mergeProps as m } from "solid-js/web";
 import { splitProps as p } from "solid-js";
-import { useSsgoi as l } from "./context.js";
+import { useSsgoi as l } from "../context.js";
 const u = (t) => {
   const [r, s] = p(t, ["children", "id", "as", "class"]), e = l(), n = r.as || "div";
   return c(a, m({

package/dist/routers/solid-router.d.ts

@@ -1,8 +1,10 @@
 import { JSX } from 'solid-js';
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
 export interface RouteBoundaryState {
     id: string;
     key?: string | number;
 }
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
 export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
     as?: keyof JSX.IntrinsicElements;
     routeKey?: string | number;
@@ -10,5 +12,8 @@ export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
         pathname: string;
     }) => RouteBoundaryState;
 };
-/** @experimental Solid Router integration, including SolidStart. The API may change. */
+/**
+ * @experimental Solid Router integration, including SolidStart. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/solid" with `<Ssgoi framework={{ getRoute: () => ({ pathname: location.pathname }) }}>` (`useLocation` from "@solidjs/router") instead.
+ */
 export declare function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps): JSX.Element;

package/dist/routers/solidstart.d.ts

@@ -1,3 +1,10 @@
-/** @experimental SolidStart integration through Solid Router. The API may change. */
+/**
+ * @experimental SolidStart integration through Solid Router. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/solid" with `<Ssgoi framework={{ getRoute: () => ({ pathname: location.pathname }) }}>` (`useLocation` from "@solidjs/router") instead.
+ */
 export { SsgoiRouteBoundary } from './solid-router';
-export type { SsgoiRouteBoundaryProps, RouteBoundaryState, } from './solid-router';
+export type { 
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+SsgoiRouteBoundaryProps, 
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+RouteBoundaryState, } from './solid-router';

package/dist/{ssgoi-transition.d.ts → routers/ssgoi-transition.d.ts}

@@ -1,13 +1,11 @@
 import { JSX, ValidComponent } from 'solid-js';
+/** @deprecated Will be removed in 8.0.0. */
 type SsgoiTransitionProps<T extends ValidComponent = "div"> = {
     children: JSX.Element;
     id: string;
     as?: T;
     class?: string;
 };
-/**
- * @deprecated Set `data-ssgoi-transition` directly on the page boundary
- * element inside `<Ssgoi>` instead.
- */
+/** @deprecated Will be removed in 8.0.0. */
 export declare const SsgoiTransition: <T extends ValidComponent = "div">(props: SsgoiTransitionProps<T>) => JSX.Element;
 export {};

package/dist/solid-router.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("solid-js/web"),l=require("@solidjs/router"),r=require("solid-js");function m(a){const n=l.useLocation(),[e,u]=r.splitProps(a,["children","as","resolve","routeKey"]),i=r.createMemo(()=>e.resolve?.({pathname:n.pathname})??{id:n.pathname}),d=r.createMemo(o=>{const c=i(),s=e.routeKey??c.key??c.id;return o?.key===s?o:{key:s}});return t.createComponent(r.Show,{get when(){return d()},keyed:!0,children:o=>t.createComponent(t.Dynamic,t.mergeProps({get component(){return e.as??"div"}},u,{get"data-ssgoi-transition"(){return i().id},get children(){return e.children}}))})}exports.SsgoiRouteBoundary=m;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("solid-js/web"),i=require("@solidjs/router"),n=require("solid-js"),c=require("./layout-boundary.cjs");function d(u){const o=i.useLocation(),[t,s]=n.splitProps(u,["resolve","routeKey"]),a=n.createMemo(()=>{const e=t.resolve?.({pathname:o.pathname})??{id:o.pathname};return{id:e.id,key:t.routeKey??e.key??e.id}});return r.createComponent(c.RouteBoundary,r.mergeProps(s,{state:a}))}exports.SsgoiRouteBoundary=d;

package/dist/solid-router.d.ts

@@ -1,2 +1 @@
-export * from './routers/solid-router'
 export {}

package/dist/solid-router.js

@@ -1,36 +1,23 @@
-import { createComponent as a, Dynamic as d, mergeProps as l } from "solid-js/web";
-import { useLocation as p } from "@solidjs/router";
-import { splitProps as h, createMemo as c, Show as y } from "solid-js";
-function v(s) {
-  const r = p(), [e, m] = h(s, ["children", "as", "resolve", "routeKey"]), o = c(() => e.resolve?.({
-    pathname: r.pathname
-  }) ?? {
-    id: r.pathname
-  }), u = c((t) => {
-    const n = o(), i = e.routeKey ?? n.key ?? n.id;
-    return t?.key === i ? t : {
-      key: i
+import { createComponent as m, mergeProps as i } from "solid-js/web";
+import { useLocation as s } from "@solidjs/router";
+import { splitProps as p, createMemo as c } from "solid-js";
+import { RouteBoundary as u } from "./layout-boundary.js";
+function h(r) {
+  const e = s(), [t, n] = p(r, ["resolve", "routeKey"]), a = c(() => {
+    const o = t.resolve?.({
+      pathname: e.pathname
+    }) ?? {
+      id: e.pathname
+    };
+    return {
+      id: o.id,
+      key: t.routeKey ?? o.key ?? o.id
     };
   });
-  return a(y, {
-    get when() {
-      return u();
-    },
-    keyed: !0,
-    children: (t) => a(d, l({
-      get component() {
-        return e.as ?? "div";
-      }
-    }, m, {
-      get "data-ssgoi-transition"() {
-        return o().id;
-      },
-      get children() {
-        return e.children;
-      }
-    }))
-  });
+  return m(u, i(n, {
+    state: a
+  }));
 }
 export {
-  v as SsgoiRouteBoundary
+  h as SsgoiRouteBoundary
 };

package/dist/solidstart.d.ts

@@ -1,2 +1 @@
-export * from './routers/solidstart'
 export {}

package/dist/ssgoi.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("solid-js/web"),n=require("solid-js"),a=require("./context.cjs"),c=require("@ssgoi/core/internal");var l=o.template("<div data-ssgoi-root style=display:contents>");const u=r=>{let t;const i=n.createMemo(()=>c.createSggoiTransitionContext(r.config,{host:r.host}));return n.createEffect(()=>{if(!t)return;const e=c.observeSsgoiTransitions(t,i());n.onCleanup(e)}),o.createComponent(a.SsgoiProvider,{get value(){return i()},get children(){var e=l(),s=t;return typeof s=="function"?o.use(s,e):t=e,o.insert(e,()=>r.children),e}})};exports.Ssgoi=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("solid-js/web"),i=require("solid-js"),s=require("./context.cjs"),a=require("@ssgoi/core/internal");var l=r.template("<div data-ssgoi-root style=display:contents>");const g=t=>{let n;const c=i.createMemo(()=>a.createSggoiTransitionContext(t.config,{host:t.host})),u=i.createMemo(()=>{const e=t.framework?.getRoute();if(!e)return;const o=e.renderedPath??e.pathname;return{routePath:o,chain:a.resolveLayoutChain(t.config.layouts,o)}});return i.createEffect(()=>{if(!n)return;const e=a.observeSsgoiTransitions(n,c());i.onCleanup(e)}),r.createComponent(s.SsgoiProvider,{get value(){return c()},get children(){return r.createComponent(s.SsgoiLayoutProvider,{value:u,get children(){var e=l(),o=n;return typeof o=="function"?r.use(o,e):n=e,r.insert(e,()=>t.children),e}})}})};exports.Ssgoi=g;

package/dist/ssgoi.d.ts

@@ -1,9 +1,10 @@
 import { JSX } from 'solid-js';
-import { SsgoiConfig } from './types';
+import { SsgoiConfig, SsgoiFramework } from './types';
 import { HostAnimation } from '@ssgoi/core/internal';
 interface SsgoiProps {
     config: SsgoiConfig;
     host?: HostAnimation;
+    framework?: SsgoiFramework;
     children: JSX.Element;
 }
 export declare const Ssgoi: (props: SsgoiProps) => JSX.Element;

package/dist/ssgoi.js

@@ -1,27 +1,40 @@
-import { createComponent as i, insert as a, template as s, use as c } from "solid-js/web";
-import { createMemo as l, createEffect as m, onCleanup as f } from "solid-js";
-import { SsgoiProvider as u } from "./context.js";
-import { createSggoiTransitionContext as g, observeSsgoiTransitions as p } from "@ssgoi/core/internal";
-var v = /* @__PURE__ */ s("<div data-ssgoi-root style=display:contents>");
-const y = (o) => {
-  let e;
-  const r = l(() => g(o.config, {
-    host: o.host
-  }));
-  return m(() => {
-    if (!e) return;
-    const t = p(e, r());
-    f(t);
-  }), i(u, {
+import { createComponent as i, insert as s, template as u, use as l } from "solid-js/web";
+import { createMemo as a, createEffect as f, onCleanup as m } from "solid-js";
+import { SsgoiProvider as g, SsgoiLayoutProvider as d } from "./context.js";
+import { createSggoiTransitionContext as v, resolveLayoutChain as h, observeSsgoiTransitions as y } from "@ssgoi/core/internal";
+var p = /* @__PURE__ */ u("<div data-ssgoi-root style=display:contents>");
+const _ = (e) => {
+  let r;
+  const n = a(() => v(e.config, {
+    host: e.host
+  })), c = a(() => {
+    const t = e.framework?.getRoute();
+    if (!t) return;
+    const o = t.renderedPath ?? t.pathname;
+    return {
+      routePath: o,
+      chain: h(e.config.layouts, o)
+    };
+  });
+  return f(() => {
+    if (!r) return;
+    const t = y(r, n());
+    m(t);
+  }), i(g, {
     get value() {
-      return r();
+      return n();
     },
     get children() {
-      var t = v(), n = e;
-      return typeof n == "function" ? c(n, t) : e = t, a(t, () => o.children), t;
+      return i(d, {
+        value: c,
+        get children() {
+          var t = p(), o = r;
+          return typeof o == "function" ? l(o, t) : r = t, s(t, () => e.children), t;
+        }
+      });
     }
   });
 };
 export {
-  y as Ssgoi
+  _ as Ssgoi
 };

package/dist/types.d.ts

@@ -1 +1,12 @@
 export * from '@ssgoi/core/types';
+/**
+ * Router bridge for `<Ssgoi framework>`. `getRoute` must be reactive, e.g.
+ * `() => ({ pathname: location.pathname })` with `useLocation()` from Solid
+ * Router. `renderedPath`, when given, is the path the page content shows.
+ */
+export interface SsgoiFramework {
+    getRoute: () => {
+        pathname: string;
+        renderedPath?: string;
+    };
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssgoi/solid",
-  "version": "7.4.0",
-  "description": "Solid.js bindings for SSGOI - Native app-like page transitions for Solid applications",
+  "version": "7.5.0-beta.0",
+  "description": "Native app-like page transitions for Solid and SolidStart. Make a web app, PWA or WebView app feel native.",
   "private": false,
   "type": "module",
   "files": [
@@ -38,14 +38,14 @@
       "default": "./dist/view-transitions.js"
     },
     "./solidstart": {
-      "solid": "./src/lib/routers/solidstart.ts",
+      "solid": "./src/lib/legacy/solidstart.ts",
       "types": "./dist/routers/solidstart.d.ts",
       "import": "./dist/solidstart.js",
       "require": "./dist/solidstart.cjs",
       "default": "./dist/solidstart.js"
     },
     "./solid-router": {
-      "solid": "./src/lib/routers/solid-router.tsx",
+      "solid": "./src/lib/legacy/solid-router.tsx",
       "types": "./dist/routers/solid-router.d.ts",
       "import": "./dist/solid-router.js",
       "require": "./dist/solid-router.cjs",
@@ -53,13 +53,15 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^7.4.0"
+    "@ssgoi/core": "^7.5.0-beta.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
+    "@solidjs/router": "^0.16.1",
     "@types/node": "^24.10.1",
     "eslint": "^9.30.1",
     "globals": "^16.3.0",
+    "jsdom": "^26.1.0",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "solid-js": "^1.9.13",
     "typescript": "~5.9.3",
@@ -67,19 +69,37 @@
     "vite": "^7.2.4",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-solid": "^2.11.10",
-    "@solidjs/router": "^0.16.1"
+    "vitest": "^3.2.4"
   },
   "peerDependencies": {
-    "solid-js": "^1.0.0",
-    "@solidjs/router": "*"
+    "@solidjs/router": "*",
+    "solid-js": "^1.0.0"
   },
   "keywords": [
     "solid",
     "solidjs",
+    "solid-router",
+    "solidstart",
     "page-transition",
+    "page-transitions",
+    "route-transition",
+    "navigation-animation",
+    "native-app",
+    "app-like",
+    "mobile-web",
+    "webview",
+    "pwa",
+    "capacitor",
+    "react-native-webview",
+    "hybrid-app",
+    "view-transitions",
+    "view-transition-api-alternative",
+    "shared-element-transition",
+    "hero-transition",
+    "spring-physics",
+    "web-animations",
     "animation",
-    "ssgoi",
-    "spring-physics"
+    "ssgoi"
   ],
   "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",
@@ -109,6 +129,7 @@
     "watch": "vite build --watch",
     "lint": "eslint .",
     "preview": "vite preview",
-    "package": "vite build"
+    "package": "vite build",
+    "test:run": "vitest run"
   }
 }

package/src/lib/context.tsx

@@ -1,9 +1,34 @@
-import { createContext, useContext } from "solid-js";
-import type { SsgoiContext } from "./types";
+import {
+  createContext,
+  createSignal,
+  onCleanup,
+  useContext,
+  type Accessor,
+} from "solid-js";
+import type { SsgoiContext, SsgoiTransitionState } from "./types";
+
+/** Route state `<Ssgoi>` resolves once for every layout boundary below it. */
+export interface SsgoiLayoutState {
+  routePath: string;
+  chain: string[];
+}
 
 const SsgoiContextInstance = createContext<SsgoiContext | null>(null);
+const SsgoiLayoutContext = createContext<
+  Accessor<SsgoiLayoutState | undefined> | undefined
+>(undefined);
+const SsgoiLayoutDepthContext = createContext(0);
 
 export const SsgoiProvider = SsgoiContextInstance.Provider;
+export const SsgoiLayoutProvider = SsgoiLayoutContext.Provider;
+/** Gives descendants of a layout boundary their depth. */
+export const SsgoiLayoutDepthProvider = SsgoiLayoutDepthContext.Provider;
+
+/** Layout state of the nearest `<Ssgoi>`; undefined without a framework. */
+export const useSsgoiLayout = () => useContext(SsgoiLayoutContext);
+
+/** Depth of the calling layout boundary: 0 unless inside another. */
+export const useLayoutDepth = () => useContext(SsgoiLayoutDepthContext);
 
 export const useSsgoi = () => {
   const context = useContext(SsgoiContextInstance);
@@ -12,3 +37,24 @@ export const useSsgoi = () => {
   }
   return context;
 };
+
+/**
+ * Signal of the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins.
+ *
+ * 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 const useSsgoiTransition = (): Accessor<SsgoiTransitionState> => {
+  const context = useContext(SsgoiContextInstance);
+  if (!context) {
+    throw new Error("useSsgoiTransition must be used within <Ssgoi>");
+  }
+  const [state, setState] = createSignal<SsgoiTransitionState>(
+    context.getTransitionState(),
+  );
+  onCleanup(context.subscribe((next) => setState(() => next)));
+  return state;
+};

package/src/lib/index.ts

@@ -1,5 +1,8 @@
 export * from "./types";
 export { Ssgoi } from "./ssgoi";
-/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
-export { SsgoiTransition } from "./ssgoi-transition";
+export { useSsgoiTransition } from "./context";
+export { SsgoiLayoutBoundary } from "./layout-boundary";
+export type { SsgoiLayoutBoundaryProps } from "./layout-boundary";
+/** @deprecated Will be removed in 8.0.0. */
+export { SsgoiTransition } from "./legacy/ssgoi-transition";
 export * from "@ssgoi/core";

package/src/lib/layout-boundary.tsx

@@ -0,0 +1,72 @@
+import {
+  createMemo,
+  Show,
+  splitProps,
+  type Accessor,
+  type JSX,
+} from "solid-js";
+import { Dynamic } from "solid-js/web";
+import {
+  SsgoiLayoutDepthProvider,
+  useLayoutDepth,
+  useSsgoiLayout,
+} from "./context";
+
+export type SsgoiLayoutBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
+  as?: keyof JSX.IntrinsicElements;
+};
+
+/** Shared rendering; remounts its element whenever `state().key` changes. */
+export function RouteBoundary(
+  props: SsgoiLayoutBoundaryProps & {
+    state: Accessor<{ id: string; key: string | number }>;
+  },
+) {
+  const [local, rest] = splitProps(props, ["children", "as", "state"]);
+  // Show uses truthiness. A token also supports valid keys such as 0 and "".
+  const lifetime = createMemo<{ key: string | number }>((previous) => {
+    const key = local.state().key;
+    return previous?.key === key ? previous : { key };
+  });
+
+  return (
+    <Show when={lifetime()} keyed>
+      {(_lifetime) => (
+        <Dynamic
+          component={local.as ?? "div"}
+          {...rest}
+          data-ssgoi-transition={local.state().id}
+        >
+          {local.children}
+        </Dynamic>
+      )}
+    </Show>
+  );
+}
+
+function throwMissingFramework(): never {
+  throw new Error(
+    "SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi framework={{ getRoute }}>.",
+  );
+}
+
+export function SsgoiLayoutBoundary(props: SsgoiLayoutBoundaryProps) {
+  const layout = useSsgoiLayout();
+  if (!layout?.()) throwMissingFramework();
+  const depth = useLayoutDepth();
+  const [local, rest] = splitProps(props, ["children"]);
+  // The config's layout scope at this depth keeps the DOM; past the declared
+  // scopes every route path remounts.
+  const state = createMemo(() => {
+    const { routePath, chain } = layout() ?? throwMissingFramework();
+    return { id: routePath, key: chain[depth] ?? routePath };
+  });
+
+  return (
+    <RouteBoundary {...rest} state={state}>
+      <SsgoiLayoutDepthProvider value={depth + 1}>
+        {local.children}
+      </SsgoiLayoutDepthProvider>
+    </RouteBoundary>
+  );
+}

package/src/lib/legacy/solid-router.tsx

@@ -0,0 +1,33 @@
+// TODO(8.0.0): remove this entry (deprecated in 7.5.0).
+import { useLocation } from "@solidjs/router";
+import { createMemo, splitProps, type JSX } from "solid-js";
+import { RouteBoundary } from "../layout-boundary";
+
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+export interface RouteBoundaryState {
+  id: string;
+  key?: string | number;
+}
+
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
+  as?: keyof JSX.IntrinsicElements;
+  routeKey?: string | number;
+  resolve?: (location: { pathname: string }) => RouteBoundaryState;
+};
+
+/**
+ * @experimental Solid Router integration, including SolidStart. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/solid" with `<Ssgoi framework={{ getRoute: () => ({ pathname: location.pathname }) }}>` (`useLocation` from "@solidjs/router") instead.
+ */
+export function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps) {
+  const location = useLocation();
+  const [local, rest] = splitProps(props, ["resolve", "routeKey"]);
+  const state = createMemo(() => {
+    const current = local.resolve?.({ pathname: location.pathname }) ?? {
+      id: location.pathname,
+    };
+    return { id: current.id, key: local.routeKey ?? current.key ?? current.id };
+  });
+  return <RouteBoundary {...rest} state={state} />;
+}

package/src/lib/legacy/solidstart.ts

@@ -0,0 +1,12 @@
+// TODO(8.0.0): remove this entry (deprecated in 7.5.0).
+/**
+ * @experimental SolidStart integration through Solid Router. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/solid" with `<Ssgoi framework={{ getRoute: () => ({ pathname: location.pathname }) }}>` (`useLocation` from "@solidjs/router") instead.
+ */
+export { SsgoiRouteBoundary } from "./solid-router";
+export type {
+  /** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+  SsgoiRouteBoundaryProps,
+  /** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/solid" instead. */
+  RouteBoundaryState,
+} from "./solid-router";

package/src/lib/{ssgoi-transition.tsx → legacy/ssgoi-transition.tsx}

@@ -1,7 +1,9 @@
+// TODO(8.0.0): remove this entry (deprecated in 7.5.0).
 import { splitProps, type JSX, type ValidComponent } from "solid-js";
 import { Dynamic } from "solid-js/web";
-import { useSsgoi } from "./context";
+import { useSsgoi } from "../context";
 
+/** @deprecated Will be removed in 8.0.0. */
 type SsgoiTransitionProps<T extends ValidComponent = "div"> = {
   children: JSX.Element;
   id: string;
@@ -9,10 +11,7 @@ type SsgoiTransitionProps<T extends ValidComponent = "div"> = {
   class?: string;
 };
 
-/**
- * @deprecated Set `data-ssgoi-transition` directly on the page boundary
- * element inside `<Ssgoi>` instead.
- */
+/** @deprecated Will be removed in 8.0.0. */
 export const SsgoiTransition = <T extends ValidComponent = "div">(
   props: SsgoiTransitionProps<T>,
 ) => {

package/src/lib/ssgoi.tsx

@@ -1,15 +1,17 @@
 import { createEffect, createMemo, onCleanup, type JSX } from "solid-js";
-import type { SsgoiConfig, SsgoiContext } from "./types";
-import { SsgoiProvider } from "./context";
+import type { SsgoiConfig, SsgoiContext, SsgoiFramework } from "./types";
+import { SsgoiLayoutProvider, SsgoiProvider } from "./context";
 import {
   createSggoiTransitionContext,
   observeSsgoiTransitions,
+  resolveLayoutChain,
 } from "@ssgoi/core/internal";
 import type { HostAnimation } from "@ssgoi/core/internal";
 
 interface SsgoiProps {
   config: SsgoiConfig;
   host?: HostAnimation;
+  framework?: SsgoiFramework;
   children: JSX.Element;
 }
 
@@ -19,6 +21,17 @@ export const Ssgoi = (props: SsgoiProps) => {
     createSggoiTransitionContext(props.config, { host: props.host }),
   );
 
+  // Resolve the route once; every SsgoiLayoutBoundary keys off this chain.
+  const layout = createMemo(() => {
+    const route = props.framework?.getRoute();
+    if (!route) return undefined;
+    const routePath = route.renderedPath ?? route.pathname;
+    return {
+      routePath,
+      chain: resolveLayoutChain(props.config.layouts, routePath),
+    };
+  });
+
   createEffect(() => {
     if (!root) return;
     const cleanup = observeSsgoiTransitions(root, contextValue());
@@ -27,9 +40,11 @@ export const Ssgoi = (props: SsgoiProps) => {
 
   return (
     <SsgoiProvider value={contextValue()}>
-      <div ref={root} data-ssgoi-root="" style={{ display: "contents" }}>
-        {props.children}
-      </div>
+      <SsgoiLayoutProvider value={layout}>
+        <div ref={root} data-ssgoi-root="" style={{ display: "contents" }}>
+          {props.children}
+        </div>
+      </SsgoiLayoutProvider>
     </SsgoiProvider>
   );
 };

package/src/lib/types.ts

@@ -1 +1,10 @@
 export * from "@ssgoi/core/types";
+
+/**
+ * Router bridge for `<Ssgoi framework>`. `getRoute` must be reactive, e.g.
+ * `() => ({ pathname: location.pathname })` with `useLocation()` from Solid
+ * Router. `renderedPath`, when given, is the path the page content shows.
+ */
+export interface SsgoiFramework {
+  getRoute: () => { pathname: string; renderedPath?: string };
+}

package/dist/ssgoi-transition.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("solid-js/web"),a=require("solid-js"),l=require("./context.cjs"),u=t=>{const[e,o]=a.splitProps(t,["children","id","as","class"]),n=l.useSsgoi(),i=e.as||"div";return r.createComponent(r.Dynamic,r.mergeProps({component:i,ref(c){var s=n.refFor(e.id);typeof s=="function"&&s(c)},get"data-ssgoi-transition"(){return e.id},get class(){return e.class}},o,{get children(){return e.children}}))};exports.SsgoiTransition=u;

package/src/lib/routers/solid-router.tsx

@@ -1,51 +0,0 @@
-import { useLocation } from "@solidjs/router";
-import { createMemo, Show, splitProps, type JSX } from "solid-js";
-import { Dynamic } from "solid-js/web";
-
-export interface RouteBoundaryState {
-  id: string;
-  key?: string | number;
-}
-
-export type SsgoiRouteBoundaryProps = JSX.HTMLAttributes<HTMLElement> & {
-  as?: keyof JSX.IntrinsicElements;
-  routeKey?: string | number;
-  resolve?: (location: { pathname: string }) => RouteBoundaryState;
-};
-
-/** @experimental Solid Router integration, including SolidStart. The API may change. */
-export function SsgoiRouteBoundary(props: SsgoiRouteBoundaryProps) {
-  const location = useLocation();
-  const [local, rest] = splitProps(props, [
-    "children",
-    "as",
-    "resolve",
-    "routeKey",
-  ]);
-  const boundary = createMemo(
-    () =>
-      local.resolve?.({ pathname: location.pathname }) ?? {
-        id: location.pathname,
-      },
-  );
-  // Show uses truthiness. A token also supports valid keys such as 0 and "".
-  const lifetime = createMemo<{ key: string | number }>((previous) => {
-    const current = boundary();
-    const key = local.routeKey ?? current.key ?? current.id;
-    return previous?.key === key ? previous : { key };
-  });
-
-  return (
-    <Show when={lifetime()} keyed>
-      {(_lifetime) => (
-        <Dynamic
-          component={local.as ?? "div"}
-          {...rest}
-          data-ssgoi-transition={boundary().id}
-        >
-          {local.children}
-        </Dynamic>
-      )}
-    </Show>
-  );
-}

package/src/lib/routers/solidstart.ts

@@ -1,6 +0,0 @@
-/** @experimental SolidStart integration through Solid Router. The API may change. */
-export { SsgoiRouteBoundary } from "./solid-router";
-export type {
-  SsgoiRouteBoundaryProps,
-  RouteBoundaryState,
-} from "./solid-router";