@ssgoi/vue 6.3.0 → 6.5.0

package/README.md

@@ -6,6 +6,16 @@ try this: [ssgoi.dev](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.
@@ -35,7 +45,8 @@ pnpm add @ssgoi/vue
 ```vue
 <template>
   <Ssgoi :config="config">
-    <div style="position: relative">
+    <!-- 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>
@@ -52,19 +63,15 @@ const config = {
 </script>
 ```
 
-### 2. Wrap your pages
+### 2. Mark your pages
 
 ```vue
 <template>
-  <SsgoiTransition id="/">
+  <main data-ssgoi-transition="/">
     <h1>Welcome</h1>
     <!-- Page content -->
-  </SsgoiTransition>
+  </main>
 </template>
-
-<script setup>
-import { SsgoiTransition } from "@ssgoi/vue";
-</script>
 ```
 
 **That's it!** Your pages now transition smoothly with the configured effect.
@@ -98,7 +105,7 @@ The route helpers return path transition groups, so nested arrays are accepted i
 <!-- app.vue -->
 <template>
   <Ssgoi :config="config">
-    <div style="position: relative; min-height: 100vh">
+    <div style="position: relative; z-index: 0; min-height: 100vh">
       <NuxtPage />
     </div>
   </Ssgoi>
@@ -115,14 +122,10 @@ const config = {
 
 <!-- pages/index.vue -->
 <template>
-  <SsgoiTransition id="/">
+  <main data-ssgoi-transition="/">
     <!-- Your page content -->
-  </SsgoiTransition>
+  </main>
 </template>
-
-<script setup>
-import { SsgoiTransition } from "@ssgoi/vue";
-</script>
 ```
 
 ## API Reference
@@ -144,30 +147,34 @@ Props:
 - `config` - Transition configuration object
 - `host` - Optional external playback host for debug tooling
 
-#### `<SsgoiTransition>`
+#### `data-ssgoi-transition`
 
-Wrapper component for pages that should transition.
+Attribute for pages that should transition. Set it on the page boundary element
+inside `<Ssgoi>`.
 
 ```vue
-<SsgoiTransition id="/page-id">
+<main data-ssgoi-transition="/page-id">
   <!-- children -->
-</SsgoiTransition>
+</main>
 ```
 
-Props:
-
-- `id` - Unique identifier for the page (required)
-
 ## Built-in Transitions
 
 ### Page Transitions (`@ssgoi/vue/view-transitions`)
 
-- `fade()` - Smooth opacity transition
-- `scroll()` - Vertical scrolling (up/down)
-- `drill()` - Drill in/out effect (enter/exit)
-- `hero()` - Shared element transitions
-- `slide()` - Ordered horizontal page transitions
-- `zoom()` - Shared element zoom 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
 
 ## Typed Preset Configuration
 

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 export * from './types';
 export { default as Ssgoi } from './ssgoi.vue';
+/** @deprecated Set `data-ssgoi-transition` directly on an element inside `<Ssgoi>` instead. */
 export { default as SsgoiTransition } from './ssgoi-transition.vue';
 export * from '@ssgoi/core';

package/dist/ssgoi-transition.vue.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Set `data-ssgoi-transition` directly on the page boundary
+ * element inside `<Ssgoi>` instead.
+ */
 interface Props {
     id: string;
     as?: keyof HTMLElementTagNameMap;

package/dist/ssgoi.vue.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),s=require("./context.cjs"),i=require("@ssgoi/core/internal"),c=e.defineComponent({__name:"ssgoi",props:{config:{},host:{}},setup(o){const t=o,n=e.computed(()=>i.createSggoiTransitionContext(t.config,{host:t.host}));return s.provideSsgoi(n),(r,u)=>e.renderSlot(r.$slots,"default")}});exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("./context.cjs"),i=require("@ssgoi/core/internal"),l=e.defineComponent({__name:"ssgoi",props:{config:{},host:{}},setup(c){const s=c,t=e.computed(()=>i.createSggoiTransitionContext(s.config,{host:s.host}));a.provideSsgoi(t);const n=e.ref(null);let o;const r=()=>{o?.(),o=void 0,n.value&&(o=i.observeSsgoiTransitions(n.value,t.value))};return e.onMounted(r),e.watch(t,r),e.onBeforeUnmount(()=>o?.()),(u,d)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:n,"data-ssgoi-root":"",style:{display:"contents"}},[e.renderSlot(u.$slots,"default")],512))}});exports.default=l;

package/dist/ssgoi.vue.d.ts

@@ -9,11 +9,15 @@ declare function __VLS_template(): {
     slots: {
         default?(_: {}): any;
     };
-    refs: {};
-    rootEl: any;
+    refs: {
+        root: HTMLDivElement;
+    };
+    rootEl: HTMLDivElement;
 };
 type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_component: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    root: HTMLDivElement;
+}, HTMLDivElement>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {

package/dist/ssgoi.vue.js

@@ -1,19 +1,32 @@
-import { defineComponent as n, computed as s, renderSlot as i } from "vue";
-import { provideSsgoi as p } from "./context.js";
-import { createSggoiTransitionContext as c } from "@ssgoi/core/internal";
-const d = /* @__PURE__ */ n({
+import { defineComponent as a, computed as c, ref as l, onMounted as p, watch as f, onBeforeUnmount as u, createElementBlock as m, openBlock as d, renderSlot as g } from "vue";
+import { provideSsgoi as v } from "./context.js";
+import { createSggoiTransitionContext as _, observeSsgoiTransitions as h } from "@ssgoi/core/internal";
+const y = /* @__PURE__ */ a({
   __name: "ssgoi",
   props: {
     config: {},
     host: {}
   },
-  setup(t) {
-    const o = t, e = s(
-      () => c(o.config, { host: o.host })
+  setup(r) {
+    const n = r, t = c(
+      () => _(n.config, { host: n.host })
     );
-    return p(e), (r, m) => i(r.$slots, "default");
+    v(t);
+    const e = l(null);
+    let o;
+    const s = () => {
+      o?.(), o = void 0, e.value && (o = h(e.value, t.value));
+    };
+    return p(s), f(t, s), u(() => o?.()), (i, S) => (d(), m("div", {
+      ref_key: "root",
+      ref: e,
+      "data-ssgoi-root": "",
+      style: { display: "contents" }
+    }, [
+      g(i.$slots, "default")
+    ], 512));
   }
 });
 export {
-  d as default
+  y as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/vue",
-  "version": "6.3.0",
+  "version": "6.5.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.3.0"
+    "@ssgoi/core": "^6.5.0"
   },
   "peerDependencies": {
     "vue": "^3.5.0"