@ssgoi/vue 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,230 +1,133 @@
 # @ssgoi/vue
 
-Vue bindings for SSGOI - Native app-like page transitions for Vue applications.
+Vue and Nuxt 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 Nuxt. No hydration issues, SEO-friendly
-- **🎯 Use Your Router** - Keep your existing routing. Vue Router, Nuxt - all work seamlessly
-- **💾 State Persistence** - Remembers animation state during navigation, even with browser back/forward
-- **🖖 Vue Optimized** - Built specifically for Vue 3 with Composition API 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/vue
-# or
-yarn add @ssgoi/vue
-# or
-pnpm add @ssgoi/vue
 ```
 
-## Quick Start
+Agent setup guide: https://ssgoi.dev/llms/vue.txt
 
-### 1. Wrap your app
+## Root
 
 ```vue
-<template>
-  <Ssgoi :config="config">
-    <!-- position: relative + z-index: 0 are required (the outgoing page is cloned with position:absolute) -->
-    <div style="position: relative; z-index: 0">
-      <!-- Your app -->
-      <RouterView />
-    </div>
-  </Ssgoi>
-</template>
-
-<script setup>
+<script setup lang="ts">
 import { Ssgoi } from "@ssgoi/vue";
-import { fade } from "@ssgoi/vue/view-transitions";
+import { drill } from "@ssgoi/vue/view-transitions";
 
 const config = {
-  transitions: [fade({ paths: ["/", "/about"] })],
+  transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
 };
 </script>
-```
 
-### 2. Mark your pages
-
-```vue
 <template>
-  <main data-ssgoi-transition="/">
-    <h1>Welcome</h1>
-    <!-- Page content -->
+  <main class="ssgoi-shell">
+    <Ssgoi :config="config">
+      <NuxtPage />
+    </Ssgoi>
   </main>
 </template>
-```
-
-**That's it!** Your pages now transition smoothly with the configured effect.
-
-## Advanced Transitions
-
-### Route-based Transitions
-
-Define different transitions for different routes:
 
-```javascript
-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" }),
-  ],
-};
+<style>
+.ssgoi-shell {
+  position: relative;
+  z-index: 0;
+  min-height: 100dvh;
+  overflow-x: clip;
+}
+</style>
 ```
 
-The route helpers return path transition groups, so nested arrays are accepted in `config.transitions`.
+## Route boundary
 
-## Nuxt 3 Example
+Mark page roots:
 
 ```vue
-<!-- app.vue -->
 <template>
-  <Ssgoi :config="config">
-    <div style="position: relative; z-index: 0; min-height: 100vh">
-      <NuxtPage />
-    </div>
-  </Ssgoi>
-</template>
-
-<script setup>
-import { Ssgoi } from "@ssgoi/vue";
-import { scroll } from "@ssgoi/vue/view-transitions";
-
-const config = {
-  transitions: [scroll({ paths: ["/", "/about", "/products"] })],
-};
-</script>
-
-<!-- pages/index.vue -->
-<template>
-  <main data-ssgoi-transition="/">
-    <!-- Your page content -->
-  </main>
+  <section data-ssgoi-transition="/posts">Posts</section>
 </template>
 ```
 
-## API Reference
-
-### Components
-
-#### `<Ssgoi>`
-
-The provider component that manages transition context.
+Dynamic route:
 
 ```vue
-<Ssgoi :config="ssgoiConfig">
-  <!-- children -->
-</Ssgoi>
+<section :data-ssgoi-transition="`/posts/${route.params.id}`">
+  ...
+</section>
 ```
 
-Props:
-
-- `config` - Transition configuration object
-- `host` - Optional external playback host for debug tooling
-
-#### `data-ssgoi-transition`
+## Persistent layouts
 
-Attribute for pages that should transition. Set it on the page boundary element
-inside `<Ssgoi>`.
+Use the parent page/layout as the outer boundary and child page roots as inner
+boundaries:
 
 ```vue
-<main data-ssgoi-transition="/page-id">
-  <!-- children -->
-</main>
+<template>
+  <section :data-ssgoi-transition="route.path">
+    <ProductTabs />
+    <NuxtPage />
+  </section>
+</template>
 ```
 
-## Built-in Transitions
-
-### Page Transitions (`@ssgoi/vue/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
+Nuxt keeps the parent during child navigation. Leaving the parent uses the
+outer boundary; changing a child route uses the child boundary.
 
-## Typed Preset Configuration
+If a Vue Router layout reuses the same component where a fresh DOM boundary is
+required, use a resolved key:
 
-Transition presets are fully typed and use the core animation engine internally:
-
-```javascript
-slide({
-  paths: ["/products/all", "/products/fashion"],
-});
+```vue
+<section :key="resolveKey(route.path)" :data-ssgoi-transition="route.path">
+  <RouterView />
+</section>
 ```
 
-## TypeScript Support
-
-SSGOI is written in TypeScript and provides full type definitions:
+## Config
 
-```typescript
-import type { SsgoiConfig, TransitionConfig } from "@ssgoi/vue";
+```ts
+import { drill, slide, zoom } from "@ssgoi/vue/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
-
-- 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/vue",
-  "version": "6.6.6",
+  "version": "7.0.0",
   "description": "Vue bindings for SSGOI - Native app-like page transitions for Vue applications",
   "private": false,
   "type": "module",
@@ -33,7 +33,7 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^6.6.6"
+    "@ssgoi/core": "^7.0.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"