@ssgoi/svelte 5.2.0 → 6.1.0

package/README.md

@@ -16,7 +16,7 @@ SSGOI brings native app-like page transitions to the web. Transform your static
 - **🚀 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 with actions and stores
+- **🧩 Svelte Native** - Built specifically for Svelte components
 
 ## Installation
 
@@ -37,9 +37,13 @@ pnpm add @ssgoi/svelte
 <script>
   import { Ssgoi } from "@ssgoi/svelte";
   import { fade } from "@ssgoi/svelte/view-transitions";
+
+  const config = {
+    transitions: [fade({ paths: ["/", "/about"] })],
+  };
 </script>
 
-<Ssgoi config={{ defaultTransition: fade() }}>
+<Ssgoi {config}>
   <!-- ⚠️ Important: position: relative is required! -->
   <div style="position: relative; min-height: 100vh;">
     <slot />
@@ -62,7 +66,7 @@ pnpm add @ssgoi/svelte
 </SsgoiTransition>
 ```
 
-**That's it!** Your pages now transition smoothly with a fade effect.
+**That's it!** Your pages now transition smoothly with the configured effect.
 
 ## Advanced Transitions
 
@@ -73,34 +77,19 @@ Define different transitions for different routes:
 ```svelte
 <script>
   import { Ssgoi } from "@ssgoi/svelte";
-  import {
-    scroll,
-    fade,
-    drill,
-    pinterest,
-  } from "@ssgoi/svelte/view-transitions";
+  import { scroll, drill, zoom } from "@ssgoi/svelte/view-transitions";
 
   const config = {
     transitions: [
       // Scroll between tabs
-      { from: "/home", to: "/about", transition: scroll({ direction: "up" }) },
-      {
-        from: "/about",
-        to: "/home",
-        transition: scroll({ direction: "down" }),
-      },
+      scroll({ paths: ["/home", "/about"] }),
 
       // Drill in when entering details
-      {
-        from: "/products",
-        to: "/products/*",
-        transition: drill({ direction: "enter" }),
-      },
-
-      // Pinterest-style image transitions
-      { from: "/gallery", to: "/photo/*", transition: pinterest() },
+      drill({ enter: "/products/*", exit: "/products" }),
+
+      // Shared element image transitions
+      zoom({ paths: ["/gallery", "/photo/*"], type: "expand" }),
     ],
-    defaultTransition: fade(),
   };
 </script>
 
@@ -109,39 +98,7 @@ Define different transitions for different routes:
 </Ssgoi>
 ```
 
-### Symmetric Transitions
-
-Automatically create bidirectional transitions:
-
-```svelte
-{
-  from: '/home',
-  to: '/about',
-  transition: scroll({ direction: 'up' }),
-  symmetric: true  // Automatically creates reverse transition
-}
-```
-
-### Individual Element Animations
-
-Animate specific elements during mount/unmount:
-
-```svelte
-<script>
-  import { transition } from "@ssgoi/svelte";
-  import { fade, slide } from "@ssgoi/svelte/transitions";
-</script>
-
-<div
-  use:transition={{
-    key: "card",
-    in: fade(),
-    out: slide({ direction: 'up' }),
-  }}
->
-  <h2>Animated Card</h2>
-</div>
-```
+The route helpers return path transition groups, so nested arrays are accepted in `config.transitions`.
 
 ## SvelteKit App Example
 
@@ -150,11 +107,13 @@ Animate specific elements during mount/unmount:
 <script>
   import { Ssgoi } from '@ssgoi/svelte';
   import { scroll } from '@ssgoi/svelte/view-transitions';
+
+  const config = {
+    transitions: [scroll({ paths: ['/', '/about', '/products'] })]
+  };
 </script>
 
-<Ssgoi config={{
-  defaultTransition: scroll({ direction: 'up' })
-}}>
+<Ssgoi {config}>
   <div style="position: relative; min-height: 100vh;">
     <nav>
       <a href="/">Home</a>
@@ -190,6 +149,11 @@ The provider component that manages transition context.
 </Ssgoi>
 ```
 
+Props:
+
+- `config` - Transition configuration object
+- `host` - Optional external playback host for debug tooling
+
 #### `<SsgoiTransition>`
 
 Wrapper component for pages that should transition.
@@ -200,40 +164,6 @@ Wrapper component for pages that should transition.
 </SsgoiTransition>
 ```
 
-### Actions
-
-#### `use:transition`
-
-Apply transitions to individual elements.
-
-```svelte
-<div
-  use:transition={{
-    key: "unique-key",
-    in: fade(),
-    out: fade(),
-  }}
->
-  Content
-</div>
-```
-
-### Stores
-
-#### `transitioning`
-
-Access transition state.
-
-```svelte
-<script>
-  import { transitioning } from "@ssgoi/svelte";
-</script>
-
-{#if $transitioning}
-  <p>Transitioning...</p>
-{/if}
-```
-
 ## Built-in Transitions
 
 ### Page Transitions (`@ssgoi/svelte/view-transitions`)
@@ -242,28 +172,16 @@ Access transition state.
 - `scroll()` - Vertical scrolling (up/down)
 - `drill()` - Drill in/out effect (enter/exit)
 - `hero()` - Shared element transitions
-- `pinterest()` - Pinterest-style expand effect
-
-### Element Transitions (`@ssgoi/svelte/transitions`)
-
-- `fade()`
-- `slide({ direction: 'up' | 'down' | 'left' | 'right' })`
-- `scale()`
-- `bounce()`
-- `blur()`
-- `rotate()`
+- `slide()` - Ordered horizontal page transitions
+- `zoom()` - Shared element zoom transitions
 
-## Spring Physics Configuration
+## Typed Preset Configuration
 
-All transitions use spring physics for natural motion:
+Transition presets are fully typed and use the core animation engine internally:
 
 ```javascript
 slide({
-  direction: "left",
-  spring: {
-    stiffness: 300, // 1-1000, higher = faster
-    damping: 30, // 0-100, higher = less oscillation
-  },
+  paths: ["/products/all", "/products/fashion"],
 });
 ```
 

package/dist/index.d.ts

@@ -1,5 +1,4 @@
-export { transition } from "./transition.js";
 export { default as Ssgoi } from "./ssgoi.svelte";
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
-export { default as TransitionScope } from "./transition-scope.svelte";
 export * from "./types.js";
+export * from "@ssgoi/core";

package/dist/index.js

@@ -1,5 +1,4 @@
-export { transition } from "./transition.js";
 export { default as Ssgoi } from "./ssgoi.svelte";
 export { default as SsgoiTransition } from "./ssgoi-transition.svelte";
-export { default as TransitionScope } from "./transition-scope.svelte";
 export * from "./types.js";
+export * from "@ssgoi/core";

package/dist/ssgoi-transition.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
-  import { transition } from "./transition";
+  import type { Snippet } from "svelte";
   import { getSsgoiContext } from "./context";
 
   interface Props {
     id: string;
-    children: () => any;
+    children: Snippet;
     as?: keyof HTMLElementTagNameMap;
     class?: string;
+    [key: string]: unknown;
   }
 
-  let { id, children, as = "div", class: className }: Props = $props();
+  let { id, children, as = "div", class: className, ...rest }: Props = $props();
 
-  const getTransition = getSsgoiContext();
+  const ssgoi = getSsgoiContext();
+
+  function ssgoiRef(node: HTMLElement) {
+    ssgoi.refFor(id)(node);
+  }
 </script>
 
 <svelte:element
   this={as}
-  use:transition={getTransition(id)}
+  use:ssgoiRef
   data-ssgoi-transition={id}
   class={className}
+  {...rest}
 >
   {@render children()}
 </svelte:element>

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

@@ -1,8 +1,10 @@
+import type { Snippet } from "svelte";
 interface Props {
     id: string;
-    children: () => any;
+    children: Snippet;
     as?: keyof HTMLElementTagNameMap;
     class?: string;
+    [key: string]: unknown;
 }
 declare const SsgoiTransition: import("svelte").Component<Props, {}, "">;
 type SsgoiTransition = ReturnType<typeof SsgoiTransition>;

package/dist/ssgoi.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+  import type { Snippet } from "svelte";
   import type { SsgoiConfig } from "@ssgoi/core/types";
+  import type { HostAnimation } from "@ssgoi/core/internal";
   import { setSsgoiContext } from "./context";
-  import { createSggoiTransitionContext } from "@ssgoi/core";
+  import { createSggoiTransitionContext } from "@ssgoi/core/internal";
 
   interface Props {
     config: SsgoiConfig;
-    children: () => any;
+    host?: HostAnimation;
+    children: Snippet;
   }
 
-  let { config, children }: Props = $props();
+  let { config, host, children }: Props = $props();
 
-  const contextValue = createSggoiTransitionContext(config);
+  const contextValue = createSggoiTransitionContext(config, { host });
   setSsgoiContext(contextValue);
 </script>
 

package/dist/ssgoi.svelte.d.ts

@@ -1,7 +1,10 @@
+import type { Snippet } from "svelte";
 import type { SsgoiConfig } from "@ssgoi/core/types";
+import type { HostAnimation } from "@ssgoi/core/internal";
 interface Props {
     config: SsgoiConfig;
-    children: () => any;
+    host?: HostAnimation;
+    children: Snippet;
 }
 declare const Ssgoi: import("svelte").Component<Props, {}, "">;
 type Ssgoi = ReturnType<typeof Ssgoi>;

package/dist/view-transitions.d.ts

@@ -0,0 +1 @@
+export * from "@ssgoi/core";

package/dist/view-transitions.js

@@ -0,0 +1 @@
+export * from "@ssgoi/core";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "5.2.0",
+  "version": "6.1.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": "^5.2.0"
+    "@ssgoi/core": "^6.1.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
@@ -77,25 +77,15 @@
       "svelte": "./dist/index.js",
       "import": "./dist/index.js"
     },
-    "./transitions": {
-      "types": "./dist/transitions/index.d.ts",
-      "svelte": "./dist/transitions/index.js",
-      "import": "./dist/transitions/index.js"
-    },
-    "./view-transitions": {
-      "types": "./dist/view-transitions/index.d.ts",
-      "svelte": "./dist/view-transitions/index.js",
-      "import": "./dist/view-transitions/index.js"
-    },
     "./types": {
       "types": "./dist/types.d.ts",
       "svelte": "./dist/types.js",
       "import": "./dist/types.js"
     },
-    "./presets": {
-      "types": "./dist/presets/index.d.ts",
-      "svelte": "./dist/presets/index.js",
-      "import": "./dist/presets/index.js"
+    "./view-transitions": {
+      "types": "./dist/view-transitions.d.ts",
+      "svelte": "./dist/view-transitions.js",
+      "import": "./dist/view-transitions.js"
     }
   },
   "scripts": {

package/dist/presets/index.d.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/presets";

package/dist/presets/index.js

@@ -1 +0,0 @@
-export * from "@ssgoi/core/presets";

package/dist/transition-scope.svelte

@@ -1,30 +0,0 @@
-<script lang="ts">
-  import { createTransitionScope } from "@ssgoi/core";
-
-  interface Props {
-    children: () => any;
-  }
-
-  let { children }: Props = $props();
-</script>
-
-<!--
-  TransitionScope creates a boundary for local-scoped transitions.
-
-  Child elements with `scope: 'local'` will:
-  - Skip IN animation when mounted simultaneously with the scope
-  - Skip OUT animation when unmounted simultaneously with the scope
-
-  @example
-  ```svelte
-  <TransitionScope>
-    <div use:transition={[fadeIn(), { scope: 'local' }]}>
-      This will only animate when added/removed independently,
-      not when the entire scope mounts/unmounts.
-    </div>
-  </TransitionScope>
-  ```
--->
-<div use:createTransitionScope style="display: contents;">
-  {@render children()}
-</div>

package/dist/transition-scope.svelte.d.ts

@@ -1,6 +0,0 @@
-interface Props {
-    children: () => any;
-}
-declare const TransitionScope: import("svelte").Component<Props, {}, "">;
-type TransitionScope = ReturnType<typeof TransitionScope>;
-export default TransitionScope;

package/dist/transition.d.ts

@@ -1,17 +0,0 @@
-import { type Transition, type TransitionKey, type TransitionScope } from "@ssgoi/core";
-type TransitionParams = Transition<undefined> & {
-    key: TransitionKey;
-    scope?: TransitionScope;
-};
-/**
- * Svelte action for element transitions
- *
- * Uses Svelte's destroy callback for OUT transition detection.
- * This ensures the correct transition config is used even when
- * params are updated (e.g., during SvelteKit page navigation).
- */
-export declare const transition: (node: HTMLElement, params: TransitionParams) => {
-    update(newParams: TransitionParams): void;
-    destroy(): void;
-};
-export {};

package/dist/transition.js

@@ -1,33 +0,0 @@
-import { transition as _transition, } from "@ssgoi/core";
-/**
- * Svelte action for element transitions
- *
- * Uses Svelte's destroy callback for OUT transition detection.
- * This ensures the correct transition config is used even when
- * params are updated (e.g., during SvelteKit page navigation).
- */
-export var transition = function (node, params) {
-    var callback = _transition({
-        key: params.key,
-        in: params.in,
-        out: params.out,
-        scope: params.scope,
-    });
-    var cleanup = callback(node);
-    return {
-        update: function (newParams) {
-            callback = _transition({
-                key: newParams.key,
-                in: newParams.in,
-                out: newParams.out,
-                scope: newParams.scope,
-            });
-            cleanup = callback(node);
-        },
-        destroy: function () {
-            // Call cleanup to trigger OUT transition with the correct config
-            // The cleanup function captures the transition config at registration time
-            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-        },
-    };
-};

package/dist/transitions/index.d.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/transitions";

package/dist/transitions/index.js

@@ -1 +0,0 @@
-export * from "@ssgoi/core/transitions";

package/dist/view-transitions/index.d.ts

@@ -1 +0,0 @@
-export * from "@ssgoi/core/view-transitions";

package/dist/view-transitions/index.js

@@ -1 +0,0 @@
-export * from "@ssgoi/core/view-transitions";