@ssgoi/solid 6.6.10 → 7.0.1-beta.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 MeurSyphus
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,138 +1,38 @@
 # @ssgoi/solid
 
-Solid bindings for SSGOI - Native app-like page transitions for Solid and SolidStart.
+Solid and SolidStart bindings for SSGOI.
 
-try this: [ssgoi.dev](https://ssgoi.dev)
+[![SSGOI live showcase](https://ssgoi.dev/readme.png)](https://ssgoi.dev)
 
-![https://ssgoi.dev](https://ssgoi.dev/ssgoi.gif)
-
-## AI-Assisted Setup
-
-Using Claude, Cursor, ChatGPT, or another AI assistant? Point it at:
-
-```
-https://ssgoi.dev/llms.txt
-```
-
-It has the full setup guide, every transition, the API, and troubleshooting — everything an agent needs to wire SSGOI into your app.
-
-## What is SSGOI?
-
-SSGOI brings native app-like page transitions to the web. Transform your static page navigations into smooth, delightful experiences that users love.
-
-### ✨ Key Features
-
-- **🌍 Works Everywhere** - Unlike the browser's View Transition API, SSGOI works in all modern browsers (Chrome, Firefox, Safari)
-- **🚀 SSR Ready** - Perfect compatibility with SolidStart. No hydration issues, SEO-friendly
-- **🎯 Use Your Router** - Keep your existing routing. `@solidjs/router` and SolidStart work seamlessly
-- **💾 State Persistence** - Remembers animation state during navigation, even with browser back/forward
-- **⚡ Solid Native** - Built on Solid's fine-grained reactivity, so change detection stays minimal
-
-## Installation
+[Live demos](https://ssgoi.dev) · [Hero, Zoom, Film, and Sheet in motion](https://ssgoi.dev/blog/view-transition-api-limitations)
 
 ```bash
 npm install @ssgoi/solid
-# or
-yarn add @ssgoi/solid
-# or
-pnpm add @ssgoi/solid
-```
-
-## Quick Start
-
-### 1. Wrap your app
-
-```tsx
-import { Ssgoi } from "@ssgoi/solid";
-import { fade } from "@ssgoi/solid/view-transitions";
-
-const config = {
-  transitions: [fade({ paths: ["/", "/about"] })],
-};
-
-export default function App(props) {
-  return (
-    <Ssgoi config={config}>
-      {/* position: relative + z-index: 0 are required (see below) */}
-      <div style="position: relative; z-index: 0; min-height: 100vh">
-        {props.children}
-      </div>
-    </Ssgoi>
-  );
-}
 ```
 
-### 2. Mark your pages
+Agent setup guide: https://ssgoi.dev/llms/solid.txt
 
-Set `data-ssgoi-transition` on each page boundary element inside `<Ssgoi>`:
+## Root
 
-```tsx
-export default function Home() {
-  return (
-    <main data-ssgoi-transition="/">
-      <h1>Welcome</h1>
-      {/* Page content */}
-    </main>
-  );
-}
-```
-
-**That's it!** Your pages now transition smoothly with the configured effect.
-
-> **Why `position: relative; z-index: 0`?** When a page leaves, SSGOI clones it back into the DOM with `position: absolute` so it can animate out while the new page animates in. The clone needs a positioned, stacking-context ancestor or it jumps / falls behind the background. Add `overflow-x-clip` too if you use horizontal transitions (`slide`, `drill`).
-
-## Advanced Transitions
-
-Each transition factory returns a path-transition group. Drop the results straight into `config.transitions` — nested arrays are flattened automatically:
+Use one `<Ssgoi>` around file routes.
 
 ```tsx
-import { Ssgoi } from "@ssgoi/solid";
-import { fade, drill, zoom } from "@ssgoi/solid/view-transitions";
-
-const config = {
-  transitions: [
-    // Calm cross-fade between tabs
-    fade({ paths: ["/", "/about"] }),
-
-    // iOS-style drill-in when entering a detail page
-    drill({ enter: "/products/*", exit: "/products" }),
-
-    // Card-to-detail zoom (needs matching data-zoom-*-key)
-    zoom({ paths: ["/gallery", "/photo/*"], type: "expand" }),
-  ],
-};
-```
-
-Transitions 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`)
-
-## SolidStart Example
-
-Wrap your root component once, then mark each route:
-
-```tsx
-// src/app.tsx
 import { Router } from "@solidjs/router";
 import { FileRoutes } from "@solidjs/start/router";
 import { Ssgoi } from "@ssgoi/solid";
-import { scroll } from "@ssgoi/solid/view-transitions";
+import { drill } from "@ssgoi/solid/view-transitions";
 
 const config = {
-  transitions: [scroll({ paths: ["/", "/about", "/products"] })],
+  transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
 };
 
 export default function App() {
   return (
     <Router
       root={(props) => (
-        <Ssgoi config={config}>
-          <div style="position: relative; z-index: 0; min-height: 100vh">
-            {props.children}
-          </div>
-        </Ssgoi>
+        <main class="relative z-0 min-h-dvh overflow-x-clip">
+          <Ssgoi config={config}>{props.children}</Ssgoi>
+        </main>
       )}
     >
       <FileRoutes />
@@ -141,79 +41,85 @@ export default function App() {
 }
 ```
 
+## Route boundary
+
+Mark the DOM root owned by a route:
+
 ```tsx
-// src/routes/index.tsx
-export default function Index() {
-  return <main data-ssgoi-transition="/">{/* Your page content */}</main>;
+export default function Posts() {
+  return <section data-ssgoi-transition="/posts">Posts</section>;
 }
 ```
 
-## API Reference
-
-### `<Ssgoi>`
-
-The provider component that manages transition context.
+Use the real route path for dynamic pages:
 
 ```tsx
-<Ssgoi config={ssgoiConfig}>{/* children */}</Ssgoi>
+<section data-ssgoi-transition={`/posts/${props.id}`}>...</section>
 ```
 
-Props:
-
-- `config: SsgoiConfig` - transition configuration object
-- `host?: HostAnimation` - optional external playback host for debug tooling
+## Persistent layouts
 
-### `data-ssgoi-transition`
-
-Attribute for pages that should transition. Set it on the page boundary element inside `<Ssgoi>` — the value (commonly the route path) uniquely identifies the view.
+Put one marker on the persistent layout and another on its child route.
+SolidStart keeps the layout DOM while child routes change.
 
 ```tsx
-<main data-ssgoi-transition="/page-id">{/* children */}</main>
-```
+export default function ProductsLayout(props) {
+  const location = useLocation();
 
-## Built-in Transitions
-
-Import from `@ssgoi/solid/view-transitions`:
-
-- `fade()` - Calm cross-fade. Safe default for unrelated pages
-- `drill()` - iOS-style hierarchical navigation (list → detail)
-- `slide()` - Horizontal push for tabs / sequential flows
-- `scroll()` - Vertical page scroll for onboarding / paginated views
-- `axis()` - Material/Flutter shared-axis swap for sibling/tab routes
-- `sheet()` - Bottom sheet that slides up (modal-like flows)
-- `hero()` - Shared element transition (matching `data-hero-enter-key` / `data-hero-exit-key`)
-- `zoom()` - Card-to-detail expansion (matching `data-zoom-enter-key` / `data-zoom-exit-key`)
-- `strip()` - 3D Y-axis perspective flip
-- `blind()` - Window-blinds wipe reveal
-- `film()` - Cinematic shrink + tile (gallery / lightbox)
-- `rotate()` - Card flip between siblings
-- `jaemin()` - Playful rotated zoom for special moments
+  return (
+    <section data-ssgoi-transition={location.pathname}>
+      <ProductTabs />
+      <div>{props.children}</div>
+    </section>
+  );
+}
+```
 
-## TypeScript Support
+Each child route marks its own page root. Child navigation uses the child
+boundary; leaving the layout uses the outer boundary.
 
-SSGOI is written in TypeScript and provides full type definitions:
+## Config
 
-```typescript
-import type { SsgoiConfig } from "@ssgoi/solid";
+```ts
+import { drill, slide, zoom } from "@ssgoi/solid/view-transitions";
 
-const config: SsgoiConfig = {
-  // Full type safety
+const config = {
+  transitions: [
+    {
+      on: "/posts/**",
+      except: "/posts",
+      transition: drill(),
+    },
+    {
+      from: "/gallery",
+      to: "/gallery/*",
+      transition: zoom(),
+    },
+    {
+      ordered: ["/tabs/a", "/tabs/b"],
+      transition: slide(),
+    },
+  ],
 };
 ```
 
-## Browser Support
+Scroll is automatic: `on` and `from`/`to` restore `from` and reset `to`;
+`ordered` restores both. Override with
+`preserveScroll: { from: boolean, to: boolean }`.
 
-- Chrome/Edge 88+
-- Firefox 78+
-- Safari 14+
-- All modern mobile browsers
+## Effect index
 
-## License
+- `fade`: unrelated pages.
+- `drill`: list → detail.
+- `slide` or `axis`: ordered tabs.
+- `sheet`: modal-like routes.
+- `zoom` or `hero`: shared-element details.
+- `scroll`: vertical sequences.
 
-MIT © [MeurSyphus](https://github.com/meursyphus)
+All effects: https://ssgoi.dev/llms.txt#7-transition-index
 
-## Links
+`SsgoiTransition` is deprecated. Use the data attribute directly.
+
+## License
 
-- [Documentation](https://ssgoi.dev)
-- [GitHub](https://github.com/meursyphus/ssgoi)
-- [Issues](https://github.com/meursyphus/ssgoi/issues)
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/solid",
-  "version": "6.6.10",
+  "version": "7.0.1-beta.0",
   "description": "Solid.js bindings for SSGOI - Native app-like page transitions for Solid applications",
   "private": false,
   "type": "module",
@@ -39,7 +39,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^6.6.10"
+    "@ssgoi/core": "^7.0.1-beta.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",