@ssgoi/react 7.1.2 → 7.1.3-beta.0

package/README.md

@@ -12,6 +12,20 @@ npm install @ssgoi/react
 
 Agent setup guide: https://ssgoi.dev/llms.txt
 
+## Router helpers
+
+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.
+
+| 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` |
+
+See the [framework guide](https://ssgoi.dev/docs/frameworks/react) for wiring and limits.
+
 ## Contents
 
 - Next.js
@@ -21,6 +35,18 @@ Agent setup guide: https://ssgoi.dev/llms.txt
 - Config
 - Effect index
 
+## Tune or define motion
+
+Built-in presets accept `{ override: { forward, backward } }` as their second
+argument. Callbacks receive `{ animation, context }`, preserve the preset's
+concrete animation type, and edit named children with
+`animation.select("in").set({ integrator })`. Use `animation.set({ integrator })`
+to retune the whole group. Springs use stiffness/damping; custom integrator
+instances are accepted.
+
+[Motion overrides](https://ssgoi.dev/docs/motion) ·
+[Custom definitions and integrators](https://ssgoi.dev/docs/custom-transitions)
+
 ## Next.js
 
 Keep one config and one `<Ssgoi>` above route boundaries.
@@ -91,7 +117,8 @@ The legacy `<SsgoiTransition>` wrapper only added this attribute and is
 deprecated. Set `data-ssgoi-transition` directly on the keyed application
 boundary.
 
-Create a router-aware utility in the application. Keep its route logic behind
+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

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./lib/ssgoi.cjs"),i=require("./lib/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 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]})});

package/dist/index.d.ts

@@ -1,2 +1,4 @@
-export * from './lib/index'
-export {}
+export * from './types';
+export { Ssgoi } from './ssgoi';
+export { SsgoiTransition } from './ssgoi-transition';
+export * from '@ssgoi/core';

package/dist/index.js

@@ -1,6 +1,6 @@
 export * from "@ssgoi/core/types";
-import { Ssgoi as e } from "./lib/ssgoi.js";
-import { SsgoiTransition as i } from "./lib/ssgoi-transition.js";
+import { Ssgoi as e } from "./ssgoi.js";
+import { SsgoiTransition as i } from "./ssgoi-transition.js";
 export * from "@ssgoi/core";
 export {
   e as Ssgoi,

package/dist/nextjs.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./lib/nextjs/ssgoi-route-boundary.cjs"),t=require("./lib/nextjs/selected-segments-to-path.cjs");exports.SsgoiRouteBoundary=e.SsgoiRouteBoundary;exports.selectedSegmentsToPath=t.selectedSegmentsToPath;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./routers/nextjs/ssgoi-route-boundary.cjs"),t=require("./routers/nextjs/selected-segments-to-path.cjs");exports.SsgoiRouteBoundary=e.SsgoiRouteBoundary;exports.selectedSegmentsToPath=t.selectedSegmentsToPath;

package/dist/nextjs.d.ts

@@ -1,2 +1,2 @@
-export * from './lib/nextjs'
+export * from './routers/nextjs/index'
 export {}

package/dist/nextjs.js

@@ -1,6 +1,6 @@
 "use client";
-import { SsgoiRouteBoundary as t } from "./lib/nextjs/ssgoi-route-boundary.js";
-import { selectedSegmentsToPath as m } from "./lib/nextjs/selected-segments-to-path.js";
+import { SsgoiRouteBoundary as t } from "./routers/nextjs/ssgoi-route-boundary.js";
+import { selectedSegmentsToPath as m } from "./routers/nextjs/selected-segments-to-path.js";
 export {
   t as SsgoiRouteBoundary,
   m as selectedSegmentsToPath

package/dist/react-router.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lib/react-router/ssgoi-route-boundary.cjs");exports.SsgoiRouteBoundary=o.SsgoiRouteBoundary;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),n=require("react-router"),i=require("./routers/route-boundary.cjs");function a({resolve:e,...t}){const o=n.useLocation(),r=e?.(o)??{id:o.pathname};return u.jsx(i.RouteBoundary,{...t,boundary:r})}exports.SsgoiRouteBoundary=a;

package/dist/react-router.d.ts

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

package/dist/react-router.js

@@ -1,5 +1,14 @@
 "use client";
-import { SsgoiRouteBoundary as e } from "./lib/react-router/ssgoi-route-boundary.js";
+import { jsx as i } from "react/jsx-runtime";
+import { useLocation as u } from "react-router";
+import { RouteBoundary as a } from "./routers/route-boundary.js";
+function p({
+  resolve: t,
+  ...r
+}) {
+  const o = u(), n = t?.(o) ?? { id: o.pathname };
+  return /* @__PURE__ */ i(a, { ...r, boundary: n });
+}
 export {
-  e as SsgoiRouteBoundary
+  p as SsgoiRouteBoundary
 };

package/dist/remix.cjs

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),u=require("@remix-run/react"),i=require("./routers/route-boundary.cjs");function a({resolve:e,...t}){const o=u.useLocation(),n=e?.(o)??{id:o.pathname};return r.jsx(i.RouteBoundary,{...t,boundary:n})}exports.SsgoiRouteBoundary=a;

package/dist/remix.d.ts

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

package/dist/{lib/react-router/ssgoi-route-boundary.js → remix.js}

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import { useLocation as u } from "react-router";
-import { RouteBoundary as a } from "../route-boundary.js";
+import { useLocation as u } from "@remix-run/react";
+import { RouteBoundary as a } from "./routers/route-boundary.js";
 function p({
   resolve: t,
   ...r

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

@@ -0,0 +1,4 @@
+export { SsgoiRouteBoundary } from './ssgoi-route-boundary';
+export type { SsgoiRouteBoundaryProps, NextjsRouteLocation, } from './ssgoi-route-boundary';
+export type { RouteBoundaryState } from '../route-boundary';
+export { selectedSegmentsToPath } from './selected-segments-to-path';

package/dist/{lib/react-router/ssgoi-route-boundary.d.ts → routers/react-router.d.ts}

@@ -1,5 +1,7 @@
 import { ElementType } from 'react';
 import { Location } from 'react-router';
-import { RouteBoundaryProps } from '../route-boundary';
+import { RouteBoundaryProps } from './route-boundary';
 export type SsgoiRouteBoundaryProps<T extends ElementType = "div"> = RouteBoundaryProps<Location, T>;
+/** @experimental React Router integration. The API may change. */
 export declare function SsgoiRouteBoundary<T extends ElementType = "div">({ resolve, ...props }: SsgoiRouteBoundaryProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { RouteBoundaryState } from './route-boundary';

package/dist/routers/remix.d.ts

@@ -0,0 +1,8 @@
+import { ElementType } from 'react';
+import { useLocation } from '@remix-run/react';
+import { RouteBoundaryProps } from './route-boundary';
+export type RemixRouteLocation = ReturnType<typeof useLocation>;
+export type SsgoiRouteBoundaryProps<T extends ElementType = "div"> = RouteBoundaryProps<RemixRouteLocation, T>;
+/** @experimental Remix 2 integration. The API may change. */
+export declare function SsgoiRouteBoundary<T extends ElementType = "div">({ resolve, ...props }: SsgoiRouteBoundaryProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { RouteBoundaryState } from './route-boundary';

package/dist/{lib/tanstack-router/ssgoi-route-boundary.d.ts → routers/tanstack-router.d.ts}

@@ -1,4 +1,6 @@
 import { ElementType } from 'react';
-import { RouteBoundaryProps, RouteLocation } from '../route-boundary';
+import { RouteBoundaryProps, RouteLocation } from './route-boundary';
 export type SsgoiRouteBoundaryProps<T extends ElementType = "div"> = RouteBoundaryProps<RouteLocation, T>;
+/** @experimental TanStack Router integration. The API may change. */
 export declare function SsgoiRouteBoundary<T extends ElementType = "div">({ resolve, ...props }: SsgoiRouteBoundaryProps<T>): import("react/jsx-runtime").JSX.Element;
+export type { RouteBoundaryState } from './route-boundary';

package/dist/tanstack-router.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./lib/tanstack-router/ssgoi-route-boundary.cjs");exports.SsgoiRouteBoundary=o.SsgoiRouteBoundary;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("@tanstack/react-router"),s=require("./routers/route-boundary.cjs");function c({resolve:e,...o}){const t={pathname:a.useRouterState({select:r=>r.location.pathname})},n=e?.(t)??{id:t.pathname};return u.jsx(s.RouteBoundary,{...o,boundary:n})}exports.SsgoiRouteBoundary=c;

package/dist/tanstack-router.d.ts

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

package/dist/tanstack-router.js

@@ -1,5 +1,16 @@
 "use client";
-import { SsgoiRouteBoundary as e } from "./lib/tanstack-router/ssgoi-route-boundary.js";
+import { jsx as r } from "react/jsx-runtime";
+import { useRouterState as m } from "@tanstack/react-router";
+import { RouteBoundary as u } from "./routers/route-boundary.js";
+function d({
+  resolve: t,
+  ...n
+}) {
+  const o = { pathname: m({
+    select: (e) => e.location.pathname
+  }) }, a = t?.(o) ?? { id: o.pathname };
+  return /* @__PURE__ */ r(u, { ...n, boundary: a });
+}
 export {
-  e as SsgoiRouteBoundary
+  d as SsgoiRouteBoundary
 };

package/dist/types.d.ts

@@ -1,2 +1 @@
-export * from './lib/types'
-export {}
+export * from '@ssgoi/core/types';

package/dist/view-transitions.d.ts

@@ -1,2 +1 @@
-export * from './lib/view-transitions'
-export {}
+export * from '@ssgoi/core';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "7.1.2",
+  "version": "7.1.3-beta.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -63,28 +63,34 @@
       "default": "./dist/unplugin/esbuild.js"
     },
     "./nextjs": {
-      "types": "./dist/nextjs.d.ts",
+      "types": "./dist/routers/nextjs/index.d.ts",
       "import": "./dist/nextjs.js",
       "require": "./dist/nextjs.cjs",
       "default": "./dist/nextjs.js"
     },
     "./react-router": {
-      "types": "./dist/react-router.d.ts",
+      "types": "./dist/routers/react-router.d.ts",
       "import": "./dist/react-router.js",
       "require": "./dist/react-router.cjs",
       "default": "./dist/react-router.js"
     },
     "./tanstack-router": {
-      "types": "./dist/tanstack-router.d.ts",
+      "types": "./dist/routers/tanstack-router.d.ts",
       "import": "./dist/tanstack-router.js",
       "require": "./dist/tanstack-router.cjs",
       "default": "./dist/tanstack-router.js"
+    },
+    "./remix": {
+      "types": "./dist/routers/remix.d.ts",
+      "import": "./dist/remix.js",
+      "require": "./dist/remix.cjs",
+      "default": "./dist/remix.js"
     }
   },
   "dependencies": {
     "unplugin": "^2.3.2",
     "@babel/core": "^7.26.10",
-    "@ssgoi/core": "^7.1.2"
+    "@ssgoi/core": "^7.1.3-beta.0"
   },
   "devDependencies": {
     "@babel/traverse": "7.28.5",
@@ -107,10 +113,11 @@
     "next": "16.1.0",
     "react-router": "7.10.1",
     "@tanstack/react-router": "^1.93.0",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "vitest": "^3.2.4",
-    "jsdom": "^26.1.0"
+    "jsdom": "^26.1.0",
+    "@remix-run/react": "2.17.5"
   },
   "keywords": [
     "react",
@@ -150,7 +157,10 @@
   "peerDependencies": {
     "next": "*",
     "react-router": "*",
-    "@tanstack/react-router": "*"
+    "@tanstack/react-router": "*",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@remix-run/react": "*"
   },
   "peerDependenciesMeta": {
     "next": {
@@ -161,6 +171,9 @@
     },
     "@tanstack/react-router": {
       "optional": true
+    },
+    "@remix-run/react": {
+      "optional": true
     }
   },
   "scripts": {

package/dist/lib/index.d.ts

@@ -1,4 +0,0 @@
-export * from './types';
-export { Ssgoi } from './ssgoi';
-export { SsgoiTransition } from './ssgoi-transition';
-export * from '@ssgoi/core';

package/dist/lib/nextjs.d.ts

@@ -1,4 +0,0 @@
-export { SsgoiRouteBoundary } from './nextjs/ssgoi-route-boundary';
-export type { SsgoiRouteBoundaryProps, NextjsRouteLocation, } from './nextjs/ssgoi-route-boundary';
-export type { RouteBoundaryState } from './route-boundary';
-export { selectedSegmentsToPath } from './nextjs/selected-segments-to-path';

package/dist/lib/react-router/ssgoi-route-boundary.cjs

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),n=require("react-router"),i=require("../route-boundary.cjs");function a({resolve:e,...t}){const o=n.useLocation(),r=e?.(o)??{id:o.pathname};return u.jsx(i.RouteBoundary,{...t,boundary:r})}exports.SsgoiRouteBoundary=a;

package/dist/lib/react-router.d.ts

@@ -1,3 +0,0 @@
-export { SsgoiRouteBoundary } from './react-router/ssgoi-route-boundary';
-export type { SsgoiRouteBoundaryProps } from './react-router/ssgoi-route-boundary';
-export type { RouteBoundaryState } from './route-boundary';

package/dist/lib/tanstack-router/ssgoi-route-boundary.cjs

@@ -1,2 +0,0 @@
-"use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("react/jsx-runtime"),a=require("@tanstack/react-router"),s=require("../route-boundary.cjs");function c({resolve:e,...o}){const t={pathname:a.useRouterState({select:r=>r.location.pathname})},n=e?.(t)??{id:t.pathname};return u.jsx(s.RouteBoundary,{...o,boundary:n})}exports.SsgoiRouteBoundary=c;

package/dist/lib/tanstack-router/ssgoi-route-boundary.js

@@ -1,16 +0,0 @@
-"use client";
-import { jsx as r } from "react/jsx-runtime";
-import { useRouterState as m } from "@tanstack/react-router";
-import { RouteBoundary as u } from "../route-boundary.js";
-function d({
-  resolve: t,
-  ...n
-}) {
-  const o = { pathname: m({
-    select: (e) => e.location.pathname
-  }) }, a = t?.(o) ?? { id: o.pathname };
-  return /* @__PURE__ */ r(u, { ...n, boundary: a });
-}
-export {
-  d as SsgoiRouteBoundary
-};

package/dist/lib/tanstack-router.d.ts

@@ -1,3 +0,0 @@
-export { SsgoiRouteBoundary } from './tanstack-router/ssgoi-route-boundary';
-export type { SsgoiRouteBoundaryProps } from './tanstack-router/ssgoi-route-boundary';
-export type { RouteBoundaryState } from './route-boundary';

package/dist/lib/types.d.ts

@@ -1 +0,0 @@
-export * from '@ssgoi/core/types';

package/dist/lib/view-transitions.d.ts

@@ -1 +0,0 @@
-export * from '@ssgoi/core';