@ssgoi/vue 7.4.0 → 7.5.0-beta.0

package/README.md

@@ -1,6 +1,6 @@
 # @ssgoi/vue
 
-Vue and Nuxt bindings for SSGOI.
+Native app-like page transitions for Vue and Nuxt. Make a web app, PWA or WebView app (Capacitor, Tauri, Ionic) feel like a native app without replacing your router.
 
 [![SSGOI live showcase](https://ssgoi.dev/readme.png)](https://ssgoi.dev)
 
@@ -12,15 +12,59 @@ npm install @ssgoi/vue
 
 Agent setup guide: https://ssgoi.dev/llms/vue.txt
 
-## Router helpers
+## Layout boundary
 
-Install this framework package once; router helpers are optional subpaths.
-These router helpers are experimental APIs and may change.
+Pass a reactive route getter to `<Ssgoi>` once, then wrap routed content in
+`SsgoiLayoutBoundary`.
 
-| Router     | Import                  | API                  |
-| ---------- | ----------------------- | -------------------- |
-| Vue Router | `@ssgoi/vue/vue-router` | `SsgoiRouteBoundary` |
-| Nuxt       | `@ssgoi/vue/nuxt`       | `SsgoiRouteBoundary` |
+```vue
+<script setup lang="ts">
+import { useRouter } from "vue-router"; // Nuxt: auto-imported
+import { Ssgoi, SsgoiLayoutBoundary } from "@ssgoi/vue";
+
+const router = useRouter();
+const framework = {
+  getRoute: () => ({ pathname: router.currentRoute.value.path }),
+};
+</script>
+
+<template>
+  <Ssgoi :config="config" :framework="framework">
+    <SsgoiLayoutBoundary>
+      <RouterView />
+    </SsgoiLayoutBoundary>
+  </Ssgoi>
+</template>
+```
+
+Each boundary marks the current path with `data-ssgoi-transition`. Nest them
+freely: depth is automatic. Declare which paths share a layout in
+`config.layouts`; the scope matched at a boundary's depth keeps its DOM, and
+past the declared scopes a boundary remounts on every path change (the default
+without `layouts`).
+
+```ts
+const TOP_LEVEL = ["/home", "/search", "/profile"];
+const config = {
+  layouts: [
+    { paths: TOP_LEVEL }, // tabs share one depth-0 layout
+    {
+      paths: "/**",
+      except: TOP_LEVEL,
+      layouts: [{ paths: "/products/**" }], // depth-1 scope inside details
+    },
+  ],
+  transitions: [/* ... */],
+};
+```
+
+The first matching scope at each level wins. Single-segment captures (`*`,
+`:id`, `[id]`) split instances, so `/projects/:id/**` keeps one layout per
+project; `**` tails do not. `SsgoiLayoutBoundary` takes no SSGOI props (`as`
+sets the element) and throws without `framework` on `<Ssgoi>`.
+
+`SsgoiRouteBoundary` from `@ssgoi/vue/vue-router` and `@ssgoi/vue/nuxt` is
+deprecated; use `SsgoiLayoutBoundary` with `framework` instead.
 
 See the [framework guide](https://ssgoi.dev/docs/frameworks/vue) for wiring and limits.
 
@@ -31,6 +75,10 @@ See the [framework guide](https://ssgoi.dev/docs/frameworks/vue) for wiring and
 import { Ssgoi } from "@ssgoi/vue";
 import { drill } from "@ssgoi/vue/view-transitions";
 
+const router = useRouter();
+const framework = {
+  getRoute: () => ({ pathname: router.currentRoute.value.path }),
+};
 const config = {
   transitions: [{ on: "/posts/**", except: "/posts", transition: drill() }],
 };
@@ -38,7 +86,7 @@ const config = {
 
 <template>
   <main class="ssgoi-shell">
-    <Ssgoi :config="config">
+    <Ssgoi :config="config" :framework="framework">
       <NuxtPage />
     </Ssgoi>
   </main>

package/dist/context.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),t=Symbol("ssgoi-context"),s=o=>{e.provide(t,o)},i=()=>{const o=e.inject(t);if(!o)throw new Error("useSsgoi must be used within Ssgoi component");return o};exports.provideSsgoi=s;exports.useSsgoi=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),i=Symbol("ssgoi-context"),r=Symbol("ssgoi-layout"),u=Symbol("ssgoi-layout-depth"),a=(o,e)=>{t.provide(i,o),t.provide(r,e)},S=()=>t.inject(r,void 0),g=()=>{const o=t.inject(u,0);return t.provide(u,o+1),o},l=()=>{const o=t.inject(i);if(!o)throw new Error("useSsgoi must be used within Ssgoi component");return o},y=()=>{const o=t.inject(i);if(!o)throw new Error("useSsgoiTransition must be used within Ssgoi component");const e=t.shallowRef(o.value.getTransitionState());let s;return t.watch(o,n=>{s?.(),e.value=n.getTransitionState(),s=n.subscribe(c=>{e.value=c})},{immediate:!0}),t.onScopeDispose(()=>s?.()),t.shallowReadonly(e)};exports.provideSsgoi=a;exports.useLayoutDepth=g;exports.useSsgoi=l;exports.useSsgoiLayout=S;exports.useSsgoiTransition=y;

package/dist/context.d.ts

@@ -1,6 +1,26 @@
-import { ComputedRef } from 'vue';
-import { SsgoiContext } from './types';
+import { ComputedRef, ShallowRef } from 'vue';
+import { SsgoiContext, SsgoiTransitionState } from './types';
+/** Route state `<Ssgoi>` resolves once for every layout boundary below it. */
+export interface SsgoiLayoutState {
+    routePath: string;
+    chain: string[];
+}
 type SsgoiContextRef = ComputedRef<SsgoiContext>;
-export declare const provideSsgoi: (context: SsgoiContextRef) => void;
+type SsgoiLayoutRef = ComputedRef<SsgoiLayoutState | undefined>;
+export declare const provideSsgoi: (context: SsgoiContextRef, layout: SsgoiLayoutRef) => void;
+/** Layout state of the nearest `<Ssgoi>`; undefined without a framework. */
+export declare const useSsgoiLayout: () => SsgoiLayoutRef | undefined;
+/** Depth of the calling layout boundary; its descendants see one deeper. */
+export declare const useLayoutDepth: () => number;
 export declare const useSsgoi: () => SsgoiContextRef;
+/**
+ * Ref of the provider's transition lifecycle: whether a page transition is
+ * preparing or playing, and which routes it joins.
+ *
+ * Use it to defer work that would fight the animation, such as a programmatic
+ * scroll on the arriving page, until the status returns to `"idle"`.
+ *
+ * Must be called in `setup()`, under `<Ssgoi>`.
+ */
+export declare const useSsgoiTransition: () => Readonly<ShallowRef<SsgoiTransitionState>>;
 export {};

package/dist/context.js

@@ -1,13 +1,36 @@
-import { provide as e, inject as s } from "vue";
-const t = Symbol("ssgoi-context"), n = (o) => {
-  e(t, o);
-}, r = () => {
-  const o = s(t);
+import { inject as e, provide as n, shallowRef as S, watch as g, onScopeDispose as l, shallowReadonly as y } from "vue";
+const i = Symbol("ssgoi-context"), c = Symbol("ssgoi-layout"), u = Symbol("ssgoi-layout-depth"), h = (o, t) => {
+  n(i, o), n(c, t);
+}, m = () => e(c, void 0), b = () => {
+  const o = e(u, 0);
+  return n(u, o + 1), o;
+}, d = () => {
+  const o = e(i);
   if (!o)
     throw new Error("useSsgoi must be used within Ssgoi component");
   return o;
+}, w = () => {
+  const o = e(i);
+  if (!o)
+    throw new Error("useSsgoiTransition must be used within Ssgoi component");
+  const t = S(
+    o.value.getTransitionState()
+  );
+  let s;
+  return g(
+    o,
+    (r) => {
+      s?.(), t.value = r.getTransitionState(), s = r.subscribe((a) => {
+        t.value = a;
+      });
+    },
+    { immediate: !0 }
+  ), l(() => s?.()), y(t);
 };
 export {
-  n as provideSsgoi,
-  r as useSsgoi
+  h as provideSsgoi,
+  b as useLayoutDepth,
+  d as useSsgoi,
+  m as useSsgoiLayout,
+  w as useSsgoiTransition
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.vue.cjs"),s=require("./ssgoi-transition.vue.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.default;exports.SsgoiTransition=s.default;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("@ssgoi/core/types"),o=require("./ssgoi.vue.cjs"),s=require("./context.cjs"),u=require("./layout-boundary.cjs"),i=require("./legacy/ssgoi-transition.vue.cjs"),r=require("@ssgoi/core");exports.Ssgoi=o.default;exports.useSsgoiTransition=s.useSsgoiTransition;exports.SsgoiLayoutBoundary=u.SsgoiLayoutBoundary;exports.SsgoiTransition=i.default;Object.keys(t).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>t[e]})});Object.keys(r).forEach(e=>{e!=="default"&&!Object.prototype.hasOwnProperty.call(exports,e)&&Object.defineProperty(exports,e,{enumerable:!0,get:()=>r[e]})});

package/dist/index.d.ts

@@ -1,5 +1,8 @@
 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 { useSsgoiTransition } from './context';
+export { SsgoiLayoutBoundary } from './layout-boundary';
+export type { SsgoiLayoutBoundaryProps } from './layout-boundary';
+/** @deprecated Will be removed in 8.0.0. */
+export { default as SsgoiTransition } from './routers/ssgoi-transition.vue';
 export * from '@ssgoi/core';

package/dist/index.js

@@ -1,8 +1,12 @@
 export * from "@ssgoi/core/types";
 import { default as e } from "./ssgoi.vue.js";
-import { default as a } from "./ssgoi-transition.vue.js";
+import { useSsgoiTransition as a } from "./context.js";
+import { SsgoiLayoutBoundary as i } from "./layout-boundary.js";
+import { default as p } from "./legacy/ssgoi-transition.vue.js";
 export * from "@ssgoi/core";
 export {
   e as Ssgoi,
-  a as SsgoiTransition
+  i as SsgoiLayoutBoundary,
+  p as SsgoiTransition,
+  a as useSsgoiTransition
 };

package/dist/layout-boundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),n=require("./context.cjs");function i(o,u,{attrs:e,slots:r}){const t=a.computed(o);return()=>a.h(u(),{...e,key:t.value.key,"data-ssgoi-transition":t.value.id},r.default?.())}function s(){throw new Error('SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi :framework="{ getRoute }">.')}const d=a.defineComponent({name:"SsgoiLayoutBoundary",inheritAttrs:!1,props:{as:{type:String,default:"div"}},setup(o,u){const e=n.useSsgoiLayout();e?.value||s();const r=n.useLayoutDepth();return i(()=>{const{routePath:t,chain:y}=e.value??s();return{id:t,key:y[r]??t}},()=>o.as,u)}});exports.SsgoiLayoutBoundary=d;exports.setupRouteBoundary=i;

package/dist/layout-boundary.d.ts

@@ -0,0 +1,26 @@
+import { PropType, SetupContext } from 'vue';
+export interface SsgoiLayoutBoundaryProps {
+    as?: keyof HTMLElementTagNameMap;
+}
+/** Shared setup; renders an element keyed by `state().key`. */
+export declare function setupRouteBoundary(state: () => {
+    id: string;
+    key: string | number;
+}, as: () => keyof HTMLElementTagNameMap, { attrs, slots }: Pick<SetupContext, "attrs" | "slots">): () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;
+export declare const SsgoiLayoutBoundary: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    as: {
+        type: PropType<keyof HTMLElementTagNameMap>;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    as: keyof HTMLElementTagNameMap;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/layout-boundary.js

@@ -0,0 +1,46 @@
+import { defineComponent as s, computed as i, h as y } from "vue";
+import { useSsgoiLayout as d, useLayoutDepth as p } from "./context.js";
+function f(e, r, { attrs: t, slots: a }) {
+  const o = i(e);
+  return () => y(
+    r(),
+    {
+      ...t,
+      key: o.value.key,
+      "data-ssgoi-transition": o.value.id
+    },
+    a.default?.()
+  );
+}
+function u() {
+  throw new Error(
+    'SSGOI: SsgoiLayoutBoundary requires a framework. Pass it to <Ssgoi :framework="{ getRoute }">.'
+  );
+}
+const g = s({
+  name: "SsgoiLayoutBoundary",
+  inheritAttrs: !1,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    }
+  },
+  setup(e, r) {
+    const t = d();
+    t?.value || u();
+    const a = p();
+    return f(
+      () => {
+        const { routePath: o, chain: n } = t.value ?? u();
+        return { id: o, key: n[a] ?? o };
+      },
+      () => e.as,
+      r
+    );
+  }
+});
+export {
+  g as SsgoiLayoutBoundary,
+  f as setupRouteBoundary
+};

package/dist/legacy/route-boundary.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),i=require("../layout-boundary.cjs"),d=u=>a.defineComponent({name:"SsgoiRouteBoundary",inheritAttrs:!1,props:{as:{type:String,default:"div"},routeKey:{type:[String,Number],default:void 0},resolve:{type:Function,default:void 0}},setup(e,r){const n=u();return i.setupRouteBoundary(()=>{const o=n.getRoute(),t=e.resolve?.(o)??{id:o.pathname};return{id:t.id,key:e.routeKey??t.key??t.id}},()=>e.as,r)}});exports.createSubpathRouteBoundary=d;

package/dist/legacy/route-boundary.js

@@ -0,0 +1,34 @@
+import { defineComponent as a } from "vue";
+import { setupRouteBoundary as i } from "../layout-boundary.js";
+const y = (r) => a({
+  name: "SsgoiRouteBoundary",
+  inheritAttrs: !1,
+  props: {
+    as: {
+      type: String,
+      default: "div"
+    },
+    routeKey: { type: [String, Number], default: void 0 },
+    resolve: {
+      type: Function,
+      default: void 0
+    }
+  },
+  setup(e, u) {
+    const n = r();
+    return i(
+      () => {
+        const o = n.getRoute(), t = e.resolve?.(o) ?? { id: o.pathname };
+        return {
+          id: t.id,
+          key: e.routeKey ?? t.key ?? t.id
+        };
+      },
+      () => e.as,
+      u
+    );
+  }
+});
+export {
+  y as createSubpathRouteBoundary
+};

package/dist/legacy/ssgoi-transition.vue.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("../context.cjs"),l=e.defineComponent({__name:"ssgoi-transition",props:{id:{},as:{default:"div"},class:{default:void 0}},setup(t){const n=t,i=r.useSsgoi(),c=s=>{const o=s,a=s instanceof HTMLElement?s:o?.$el;a instanceof HTMLElement&&i.value.refFor(n.id)(a)};return(s,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{ref:c,"data-ssgoi-transition":t.id,class:e.normalizeClass(n.class)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["data-ssgoi-transition","class"]))}});exports.default=l;

package/dist/{ssgoi-transition.vue.js → legacy/ssgoi-transition.vue.js}

@@ -1,5 +1,5 @@
 import { defineComponent as r, openBlock as c, createBlock as l, resolveDynamicComponent as d, normalizeClass as f, withCtx as m, renderSlot as u } from "vue";
-import { useSsgoi as p } from "./context.js";
+import { useSsgoi as p } from "../context.js";
 const C = /* @__PURE__ */ r({
   __name: "ssgoi-transition",
   props: {

package/dist/nuxt.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("nuxt/app"),r=require("./routers/route-boundary.cjs"),t=r.createRouteBoundary(()=>{const e=o.useRouter();return()=>e.currentRoute.value.path});exports.SsgoiRouteBoundary=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("nuxt/app"),o=require("./legacy/route-boundary.cjs"),u=o.createSubpathRouteBoundary(()=>{const e=t.useRouter();return{getRoute:()=>({pathname:e.currentRoute.value.path})}});exports.SsgoiRouteBoundary=u;

package/dist/nuxt.d.ts

@@ -1,2 +1 @@
-export * from './routers/nuxt'
 export {}

package/dist/nuxt.js

@@ -1,9 +1,9 @@
-import { useRouter as r } from "nuxt/app";
-import { createRouteBoundary as t } from "./routers/route-boundary.js";
-const n = t(() => {
-  const o = r();
-  return () => o.currentRoute.value.path;
+import { useRouter as o } from "nuxt/app";
+import { createSubpathRouteBoundary as e } from "./legacy/route-boundary.js";
+const a = e(() => {
+  const t = o();
+  return { getRoute: () => ({ pathname: t.currentRoute.value.path }) };
 });
 export {
-  n as SsgoiRouteBoundary
+  a as SsgoiRouteBoundary
 };

package/dist/routers/nuxt.d.ts

@@ -1,5 +1,8 @@
 export type { RouteBoundaryState, SsgoiRouteBoundaryProps, } from './route-boundary';
-/** @experimental nuxt integration. The API may change. */
+/**
+ * @experimental nuxt integration. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/vue" with `<Ssgoi :framework="{ getRoute: () => ({ pathname: router.currentRoute.value.path }) }">` (`useRouter` from "nuxt/app") instead.
+ */
 export declare const SsgoiRouteBoundary: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         type: import('vue').PropType<keyof HTMLElementTagNameMap>;

package/dist/routers/route-boundary.d.ts

@@ -1,8 +1,11 @@
 import { PropType } from 'vue';
+import { SsgoiFramework } from '../types';
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/vue" instead. */
 export interface RouteBoundaryState {
     id: string;
     key?: string | number;
 }
+/** @deprecated Will be removed in 8.0.0. Declare layout scopes in `config.layouts` and use `SsgoiLayoutBoundary` from "@ssgoi/vue" instead. */
 export interface SsgoiRouteBoundaryProps {
     as?: keyof HTMLElementTagNameMap;
     routeKey?: string | number;
@@ -10,8 +13,12 @@ export interface SsgoiRouteBoundaryProps {
         pathname: string;
     }) => RouteBoundaryState;
 }
-/** Shared rendering only; each subpath supplies its own router hook. */
-export declare function createRouteBoundary(usePathname: () => () => string): import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+/**
+ * Legacy subpath boundary; each subpath builds its framework from its own
+ * router hook instead of reading `<Ssgoi :framework>`.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/vue" instead.
+ */
+export declare const createSubpathRouteBoundary: (useFramework: () => SsgoiFramework) => import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         type: PropType<keyof HTMLElementTagNameMap>;
         default: string;

package/dist/{ssgoi-transition.vue.d.ts → routers/ssgoi-transition.vue.d.ts}

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

package/dist/routers/vue-router.d.ts

@@ -1,5 +1,8 @@
 export type { RouteBoundaryState, SsgoiRouteBoundaryProps, } from './route-boundary';
-/** @experimental vue-router integration. The API may change. */
+/**
+ * @experimental vue-router integration. The API may change.
+ * @deprecated Will be removed in 8.0.0. Use `SsgoiLayoutBoundary` from "@ssgoi/vue" with `<Ssgoi :framework="{ getRoute: () => ({ pathname: router.currentRoute.value.path }) }">` instead.
+ */
 export declare const SsgoiRouteBoundary: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
     as: {
         type: import('vue').PropType<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"),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;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),d=require("./context.cjs"),i=require("@ssgoi/core/internal"),f=e.defineComponent({__name:"ssgoi",props:{config:{},host:{},framework:{}},setup(c){const t=c,r=e.computed(()=>i.createSggoiTransitionContext(t.config,{host:t.host})),l=e.computed(()=>{const o=t.framework?.getRoute();if(!o)return;const a=o.renderedPath??o.pathname;return{routePath:a,chain:i.resolveLayoutChain(t.config.layouts,a)}});d.provideSsgoi(r,l);const s=e.ref(null);let n;const u=()=>{n?.(),n=void 0,s.value&&(n=i.observeSsgoiTransitions(s.value,r.value))};return e.onMounted(u),e.watch(r,u),e.onBeforeUnmount(()=>n?.()),(o,a)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"root",ref:s,"data-ssgoi-root":"",style:{display:"contents"}},[e.renderSlot(o.$slots,"default")],512))}});exports.default=f;

package/dist/ssgoi.vue.d.ts

@@ -1,8 +1,9 @@
-import { SsgoiConfig } from './types';
+import { SsgoiConfig, SsgoiFramework } from './types';
 import { HostAnimation } from '@ssgoi/core/internal';
 interface Props {
     config: SsgoiConfig;
     host?: HostAnimation;
+    framework?: SsgoiFramework;
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;

package/dist/ssgoi.vue.js

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

package/dist/types.d.ts

@@ -1 +1,12 @@
 export * from '@ssgoi/core/types';
+/**
+ * Router bridge for `<Ssgoi :framework>`. `getRoute` must be a reactive
+ * getter, e.g. `() => ({ pathname: router.currentRoute.value.path })`.
+ * `renderedPath`, when given, is the path the page content shows.
+ */
+export interface SsgoiFramework {
+    getRoute: () => {
+        pathname: string;
+        renderedPath?: string;
+    };
+}

package/dist/vue-router.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue-router"),r=require("./routers/route-boundary.cjs"),t=r.createRouteBoundary(()=>{const e=o.useRouter();return()=>e.currentRoute.value.path});exports.SsgoiRouteBoundary=t;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue-router"),u=require("./legacy/route-boundary.cjs"),o=u.createSubpathRouteBoundary(()=>{const e=t.useRouter();return{getRoute:()=>({pathname:e.currentRoute.value.path})}});exports.SsgoiRouteBoundary=o;

package/dist/vue-router.d.ts

@@ -1,2 +1 @@
-export * from './routers/vue-router'
 export {}

package/dist/vue-router.js

@@ -1,9 +1,9 @@
-import { useRouter as r } from "vue-router";
-import { createRouteBoundary as t } from "./routers/route-boundary.js";
-const n = t(() => {
-  const o = r();
-  return () => o.currentRoute.value.path;
+import { useRouter as o } from "vue-router";
+import { createSubpathRouteBoundary as e } from "./legacy/route-boundary.js";
+const a = e(() => {
+  const t = o();
+  return { getRoute: () => ({ pathname: t.currentRoute.value.path }) };
 });
 export {
-  n as SsgoiRouteBoundary
+  a as SsgoiRouteBoundary
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ssgoi/vue",
-  "version": "7.4.0",
-  "description": "Vue bindings for SSGOI - Native app-like page transitions for Vue applications",
+  "version": "7.5.0-beta.0",
+  "description": "Native app-like page transitions for Vue and Nuxt. Make a web app, PWA or WebView app feel native.",
   "private": false,
   "type": "module",
   "files": [
@@ -45,12 +45,12 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^7.4.0"
+    "@ssgoi/core": "^7.5.0-beta.0"
   },
   "peerDependencies": {
+    "nuxt": "*",
     "vue": "^3.5.0",
-    "vue-router": "*",
-    "nuxt": "*"
+    "vue-router": "*"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",
@@ -59,22 +59,42 @@
     "eslint": "^9.30.1",
     "eslint-plugin-vue": "^9.33.0",
     "globals": "^16.3.0",
+    "jsdom": "^26.1.0",
+    "nuxt": "^3.20.2",
     "prettier": "^3.6.2",
     "rollup-plugin-preserve-directives": "^0.4.0",
     "typescript": "~5.8.3",
     "typescript-eslint": "^8.35.1",
     "vite": "^7.0.4",
     "vite-plugin-dts": "^4.5.4",
-    "vue-tsc": "^2.2.12",
+    "vitest": "^3.2.4",
     "vue-router": "^4.6.3",
-    "nuxt": "^3.20.2"
+    "vue-tsc": "^2.2.12"
   },
   "keywords": [
     "vue",
+    "vue-router",
+    "nuxt",
     "page-transition",
+    "page-transitions",
+    "route-transition",
+    "navigation-animation",
+    "native-app",
+    "app-like",
+    "mobile-web",
+    "webview",
+    "pwa",
+    "capacitor",
+    "react-native-webview",
+    "hybrid-app",
+    "view-transitions",
+    "view-transition-api-alternative",
+    "shared-element-transition",
+    "hero-transition",
+    "spring-physics",
+    "web-animations",
     "animation",
-    "ssgoi",
-    "spring-physics"
+    "ssgoi"
   ],
   "author": "MeurSyphus <tmdeoans@snu.ac.kr>",
   "license": "MIT",
@@ -107,6 +127,7 @@
     "watch": "vite build --watch",
     "lint": "eslint .",
     "preview": "vite preview",
-    "package": "vite build"
+    "package": "vite build",
+    "test:run": "vitest run"
   }
 }

package/dist/routers/route-boundary.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const u=require("vue");function d(o){return u.defineComponent({name:"SsgoiRouteBoundary",inheritAttrs:!1,props:{as:{type:String,default:"div"},routeKey:{type:[String,Number],default:void 0},resolve:{type:Function,default:void 0}},setup(e,{attrs:a,slots:r}){const i=o(),t=u.computed(()=>{const n=i();return e.resolve?.({pathname:n})??{id:n}});return()=>u.h(e.as,{...a,key:e.routeKey??t.value.key??t.value.id,"data-ssgoi-transition":t.value.id},r.default?.())}})}exports.createRouteBoundary=d;

package/dist/routers/route-boundary.js

@@ -1,36 +0,0 @@
-import { defineComponent as i, computed as d, h as s } from "vue";
-function y(o) {
-  return i({
-    name: "SsgoiRouteBoundary",
-    inheritAttrs: !1,
-    props: {
-      as: {
-        type: String,
-        default: "div"
-      },
-      routeKey: { type: [String, Number], default: void 0 },
-      resolve: {
-        type: Function,
-        default: void 0
-      }
-    },
-    setup(e, { attrs: a, slots: r }) {
-      const u = o(), t = d(() => {
-        const n = u();
-        return e.resolve?.({ pathname: n }) ?? { id: n };
-      });
-      return () => s(
-        e.as,
-        {
-          ...a,
-          key: e.routeKey ?? t.value.key ?? t.value.id,
-          "data-ssgoi-transition": t.value.id
-        },
-        r.default?.()
-      );
-    }
-  });
-}
-export {
-  y as createRouteBoundary
-};

package/dist/ssgoi-transition.vue.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),r=require("./context.cjs"),l=e.defineComponent({__name:"ssgoi-transition",props:{id:{},as:{default:"div"},class:{default:void 0}},setup(t){const n=t,i=r.useSsgoi(),c=s=>{const o=s,a=s instanceof HTMLElement?s:o?.$el;a instanceof HTMLElement&&i.value.refFor(n.id)(a)};return(s,o)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.as),{ref:c,"data-ssgoi-transition":t.id,class:e.normalizeClass(n.class)},{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default")]),_:3},8,["data-ssgoi-transition","class"]))}});exports.default=l;