@ssgoi/svelte 6.6.6 → 7.0.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,245 +1,131 @@
 # @ssgoi/svelte
 
-Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit.
+Svelte and SvelteKit 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 SvelteKit. No hydration issues, SEO-friendly
-- **🎯 Use Your Router** - Keep your existing routing. SvelteKit's built-in router works seamlessly
-- **💾 State Persistence** - Remembers animation state during navigation, even with browser back/forward
-- **🧩 Svelte Native** - Built specifically for Svelte components
-
-## 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/svelte
-# or
-yarn add @ssgoi/svelte
-# or
-pnpm add @ssgoi/svelte
 ```
 
-## Quick Start
+Agent setup guide: https://ssgoi.dev/llms/svelte.txt
 
-### 1. Wrap your app layout
+## Root
 
 ```svelte
-<!-- +layout.svelte -->
-<script>
+<!-- src/routes/+layout.svelte -->
+<script lang="ts">
   import { Ssgoi } from "@ssgoi/svelte";
-  import { fade } from "@ssgoi/svelte/view-transitions";
+  import { drill } from "@ssgoi/svelte/view-transitions";
+
+  let { children } = $props();
 
   const config = {
-    transitions: [fade({ paths: ["/", "/about"] })],
+    transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
   };
 </script>
 
-<Ssgoi {config}>
-  <!-- ⚠️ Important: position: relative + z-index: 0 are required (the outgoing page is cloned with position:absolute). Add overflow-x-clip if you use horizontal transitions. -->
-  <div style="position: relative; z-index: 0; min-height: 100vh;">
-    <slot />
-  </div>
-</Ssgoi>
-```
-
-### 2. Mark your pages
-
-```svelte
-<!-- +page.svelte -->
-<script>
-  import { page } from "$app/stores";
-</script>
-
-<main data-ssgoi-transition={$page.url.pathname}>
-  <h1>Welcome</h1>
-  <!-- Page content -->
+<main class="ssgoi-shell">
+  <Ssgoi {config}>
+    {@render children()}
+  </Ssgoi>
 </main>
 ```
 
-**That's it!** Your pages now transition smoothly with the configured effect.
-
-## Advanced Transitions
-
-### Route-based Transitions
-
-Define different transitions for different routes:
-
-```svelte
-<script>
-  import { Ssgoi } from "@ssgoi/svelte";
-  import { scroll, drill, zoom } from "@ssgoi/svelte/view-transitions";
-
-  const config = {
-    transitions: [
-      // Scroll between tabs
-      scroll({ paths: ["/home", "/about"] }),
-
-      // Drill in when entering details
-      drill({ enter: "/products/*", exit: "/products" }),
-
-      // Shared element image transitions
-      zoom({ paths: ["/gallery", "/photo/*"], type: "expand" }),
-    ],
-  };
-</script>
-
-<Ssgoi {config}>
-  <slot />
-</Ssgoi>
+```css
+.ssgoi-shell {
+  position: relative;
+  z-index: 0;
+  min-height: 100dvh;
+  overflow-x: clip;
+}
 ```
 
-The route helpers return path transition groups, so nested arrays are accepted in `config.transitions`.
+## Route boundary
 
-## SvelteKit App Example
+Mark each route root:
 
 ```svelte
-<!-- +layout.svelte -->
-<script>
-  import { Ssgoi } from '@ssgoi/svelte';
-  import { scroll } from '@ssgoi/svelte/view-transitions';
-
-  const config = {
-    transitions: [scroll({ paths: ['/', '/about', '/products'] })]
-  };
-</script>
-
-<Ssgoi {config}>
-  <div style="position: relative; z-index: 0; min-height: 100vh;">
-    <nav>
-      <a href="/">Home</a>
-      <a href="/about">About</a>
-      <a href="/products">Products</a>
-    </nav>
-    <slot />
-  </div>
-</Ssgoi>
-
-<!-- +page.svelte -->
-<script>
-  import { page } from '$app/stores';
-</script>
-
-<main data-ssgoi-transition={$page.url.pathname}>
-  <!-- Your page content -->
-</main>
+<!-- src/routes/posts/+page.svelte -->
+<div data-ssgoi-transition="/posts">Posts</div>
 ```
 
-## API Reference
-
-### Components
-
-#### `<Ssgoi>`
-
-The provider component that manages transition context.
+For dynamic routes, use the real path:
 
 ```svelte
-<Ssgoi config={ssgoiConfig}>
-  <slot />
-</Ssgoi>
+<div data-ssgoi-transition="/posts/{postId}">...</div>
 ```
 
-Props:
+## Persistent layouts
 
-- `config` - Transition configuration object
-- `host` - Optional external playback host for debug tooling
-
-#### `data-ssgoi-transition`
-
-Attribute for pages that should transition. Set it on the page boundary element
-inside `<Ssgoi>`.
+A persistent `+layout.svelte` may own an outer boundary while child pages own
+inner boundaries:
 
 ```svelte
-<main data-ssgoi-transition="/page-id">
-  <slot />
-</main>
+<div data-ssgoi-transition={$page.url.pathname}>
+  <ProductTabs />
+  {@render children()}
+</div>
 ```
 
-## Built-in Transitions
-
-### Page Transitions (`@ssgoi/svelte/view-transitions`)
+SvelteKit keeps the layout DOM during child navigation. Leaving the layout
+uses the outer boundary; changing a child route uses the child boundary.
 
-- `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
+Use a keyed block only when the router reuses the same DOM node and a new
+boundary must be forced:
 
-## Typed Preset Configuration
-
-Transition presets are fully typed and use the core animation engine internally:
-
-```javascript
-slide({
-  paths: ["/products/all", "/products/fashion"],
-});
+```svelte
+{#key resolveKey($page.url.pathname)}
+  <div data-ssgoi-transition={$page.url.pathname}>
+    {@render children()}
+  </div>
+{/key}
 ```
 
-## TypeScript Support
-
-SSGOI is written in TypeScript and provides full type definitions:
-
-```typescript
-import type { SsgoiConfig, TransitionConfig } from "@ssgoi/svelte";
-
-const config: SsgoiConfig = {
-  // Full type safety
+## Config
+
+```ts
+import { drill, slide, zoom } from "@ssgoi/svelte/view-transitions";
+
+const config = {
+  transitions: [
+    {
+      on: "/posts/**",
+      except: "/posts",
+      transition: drill(),
+    },
+    {
+      from: "/gallery",
+      to: "/gallery/*",
+      transition: zoom(),
+    },
+    {
+      ordered: ["/tabs/a", "/tabs/b"],
+      transition: slide(),
+    },
+  ],
 };
 ```
 
-## Browser Support
-
-- Chrome/Edge 88+
-- Firefox 78+
-- Safari 14+
-- All modern mobile browsers
-
-## Performance
-
-- Minimal bundle size (~8kb gzipped)
-- Hardware-accelerated animations
-- Automatic cleanup and memory management
-- Smart preloading for instant transitions
-
-## Documentation
+Scroll is automatic: `on` and `from`/`to` restore `from` and reset `to`;
+`ordered` restores both. Override with
+`preserveScroll: { from: boolean, to: boolean }`.
 
-Visit [https://ssgoi.dev](https://ssgoi.dev) for:
+## Effect index
 
-- Complete API reference
-- Interactive examples
-- Advanced patterns
-- Migration guides
+- `fade`: unrelated pages.
+- `drill`: list → detail.
+- `slide` or `axis`: ordered tabs.
+- `sheet`: modal-like routes.
+- `zoom` or `hero`: shared-element details.
+- `scroll`: vertical sequences.
 
-## Contributing
+All effects: https://ssgoi.dev/llms.txt#7-transition-index
 
-We welcome contributions! Please see our [contributing guide](https://github.com/meursyphus/ssgoi/blob/main/CONTRIBUTING.md) for details.
+`SsgoiTransition` is deprecated. Use the data attribute directly.
 
 ## License
 
-MIT © [MeurSyphus](https://github.com/meursyphus)
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "6.6.6",
+  "version": "7.0.0",
   "description": "Svelte bindings for SSGOI - Native app-like page transitions for Svelte and SvelteKit applications",
   "private": false,
   "main": "./dist/index.js",
@@ -14,7 +14,7 @@
   "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "@ssgoi/core": "^6.6.6"
+    "@ssgoi/core": "^7.0.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"