@ssgoi/react 6.6.10 → 7.0.0-beta.0

package/README.md

@@ -48,7 +48,7 @@ import { fade } from "@ssgoi/react/view-transitions";
 import { SsgoiTransitionBoundary } from "./ssgoi-transition-boundary";
 
 const config = {
-  transitions: [fade({ paths: ["/", "/about"] })],
+  transitions: [{ from: "/", to: "/about", transition: fade() }],
 };
 
 export default function App() {
@@ -137,7 +137,7 @@ route boundary marker.
 
 ### Route-based Transitions
 
-Each transition factory returns a path-transition group. Drop the results straight into `config.transitions` — nested arrays are flattened automatically:
+Transition factories return effect configs. Put each effect in a flat route rule:
 
 ```tsx
 import { fade, drill, zoom } from "@ssgoi/react/view-transitions";
@@ -145,22 +145,26 @@ import { fade, drill, zoom } from "@ssgoi/react/view-transitions";
 const config = {
   transitions: [
     // Calm cross-fade between tabs
-    fade({ paths: ["/home", "/about"] }),
+    { from: "/home", to: "/about", transition: fade() },
 
     // iOS-style drill-in when entering details
-    drill({ enter: "/products/*", exit: "/products" }),
+    { from: "/products", to: "/products/*", transition: drill() },
 
     // Card-to-detail zoom (needs matching data-zoom-*-key)
-    zoom({ paths: ["/gallery", "/photo/*"], type: "expand" }),
+    {
+      from: "/gallery",
+      to: "/photo/:id",
+      transition: zoom({ type: "expand" }),
+    },
   ],
 };
 ```
 
-Transitions come in three shapes:
+Route rules come in three shapes:
 
-- **`{ paths }`** — symmetric: every pair animates with the same physics (`fade`, `hero`, `zoom`, `blind`, `film`, `rotate`, `strip`, `jaemin`)
-- **`{ enter, exit, type? }`** — directional: enter and exit get different physics (`drill`, `sheet`)
-- **`{ paths }`** — ordered: path order decides forward / back direction (`slide`, `scroll`, `axis`)
+- **`{ on, except?, transition }`** — a route family / stack
+- **`{ from, to, transition }`** — a precise bidirectional pair
+- **`{ ordered, transition }`** — index order decides forward / backward
 
 ### Individual Element Animations
 
@@ -295,8 +299,8 @@ import { SsgoiTransitionBoundary } from "./ssgoi-transition-boundary";
 
 const config = {
   transitions: [
-    drill({ enter: "/post/*", exit: "*" }),
-    fade({ paths: ["/", "/about"] }),
+    { on: "/post/**", except: "/post", transition: drill() },
+    { from: "/", to: "/about", transition: fade() },
   ],
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "6.6.10",
+  "version": "7.0.0-beta.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -66,7 +66,7 @@
   "dependencies": {
     "unplugin": "^2.3.2",
     "@babel/core": "^7.26.10",
-    "@ssgoi/core": "^6.6.10"
+    "@ssgoi/core": "^7.0.0-beta.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",