@ssgoi/svelte 2.1.2 → 2.2.0

package/README.md

@@ -35,8 +35,8 @@ pnpm add @ssgoi/svelte
 ```svelte
 <!-- +layout.svelte -->
 <script>
-  import { Ssgoi } from '@ssgoi/svelte';
-  import { fade } from '@ssgoi/svelte/view-transitions';
+  import { Ssgoi } from "@ssgoi/svelte";
+  import { fade } from "@ssgoi/svelte/view-transitions";
 </script>
 
 <Ssgoi config={{ defaultTransition: fade() }}>
@@ -52,8 +52,8 @@ pnpm add @ssgoi/svelte
 ```svelte
 <!-- +page.svelte -->
 <script>
-  import { SsgoiTransition } from '@ssgoi/svelte';
-  import { page } from '$app/stores';
+  import { SsgoiTransition } from "@ssgoi/svelte";
+  import { page } from "$app/stores";
 </script>
 
 <SsgoiTransition id={$page.url.pathname}>
@@ -72,22 +72,35 @@ Define different transitions for different routes:
 
 ```svelte
 <script>
-  import { Ssgoi } from '@ssgoi/svelte';
-  import { slide, fade, scale, pinterest } from '@ssgoi/svelte/view-transitions';
+  import { Ssgoi } from "@ssgoi/svelte";
+  import {
+    scroll,
+    fade,
+    drill,
+    pinterest,
+  } from "@ssgoi/svelte/view-transitions";
 
   const config = {
     transitions: [
-      // Slide between tabs
-      { from: '/home', to: '/about', transition: slide({ direction: 'left' }) },
-      { from: '/about', to: '/home', transition: slide({ direction: 'right' }) },
-      
-      // Scale up when entering details
-      { from: '/products', to: '/products/*', transition: scale() },
-      
+      // Scroll between tabs
+      { from: "/home", to: "/about", transition: scroll({ direction: "up" }) },
+      {
+        from: "/about",
+        to: "/home",
+        transition: scroll({ direction: "down" }),
+      },
+
+      // Drill in when entering details
+      {
+        from: "/products",
+        to: "/products/*",
+        transition: drill({ direction: "enter" }),
+      },
+
       // Pinterest-style image transitions
-      { from: '/gallery', to: '/photo/*', transition: pinterest() }
+      { from: "/gallery", to: "/photo/*", transition: pinterest() },
     ],
-    defaultTransition: fade()
+    defaultTransition: fade(),
   };
 </script>
 
@@ -103,8 +116,8 @@ Automatically create bidirectional transitions:
 ```svelte
 {
   from: '/home',
-  to: '/about', 
-  transition: slide({ direction: 'left' }),
+  to: '/about',
+  transition: scroll({ direction: 'up' }),
   symmetric: true  // Automatically creates reverse transition
 }
 ```
@@ -115,15 +128,17 @@ Animate specific elements during mount/unmount:
 
 ```svelte
 <script>
-  import { transition } from '@ssgoi/svelte';
-  import { fadeIn, slideUp } from '@ssgoi/svelte/transitions';
+  import { transition } from "@ssgoi/svelte";
+  import { fadeIn, slideUp } from "@ssgoi/svelte/transitions";
 </script>
 
-<div use:transition={{
-  key: 'card',
-  in: fadeIn(),
-  out: slideUp()
-}}>
+<div
+  use:transition={{
+    key: "card",
+    in: fadeIn(),
+    out: slideUp(),
+  }}
+>
   <h2>Animated Card</h2>
 </div>
 ```
@@ -134,11 +149,11 @@ Animate specific elements during mount/unmount:
 <!-- +layout.svelte -->
 <script>
   import { Ssgoi } from '@ssgoi/svelte';
-  import { slide } from '@ssgoi/svelte/view-transitions';
+  import { scroll } from '@ssgoi/svelte/view-transitions';
 </script>
 
 <Ssgoi config={{
-  defaultTransition: slide({ direction: 'left' })
+  defaultTransition: scroll({ direction: 'up' })
 }}>
   <div style="position: relative; min-height: 100vh;">
     <nav>
@@ -166,6 +181,7 @@ Animate specific elements during mount/unmount:
 ### Components
 
 #### `<Ssgoi>`
+
 The provider component that manages transition context.
 
 ```svelte
@@ -175,6 +191,7 @@ The provider component that manages transition context.
 ```
 
 #### `<SsgoiTransition>`
+
 Wrapper component for pages that should transition.
 
 ```svelte
@@ -186,14 +203,17 @@ Wrapper component for pages that should transition.
 ### Actions
 
 #### `use:transition`
+
 Apply transitions to individual elements.
 
 ```svelte
-<div use:transition={{
-  key: 'unique-key',
-  in: fadeIn(),
-  out: fadeOut()
-}}>
+<div
+  use:transition={{
+    key: "unique-key",
+    in: fadeIn(),
+    out: fadeOut(),
+  }}
+>
   Content
 </div>
 ```
@@ -201,11 +221,12 @@ Apply transitions to individual elements.
 ### Stores
 
 #### `transitioning`
+
 Access transition state.
 
 ```svelte
 <script>
-  import { transitioning } from '@ssgoi/svelte';
+  import { transitioning } from "@ssgoi/svelte";
 </script>
 
 {#if $transitioning}
@@ -216,14 +237,15 @@ Access transition state.
 ## Built-in Transitions
 
 ### Page Transitions (`@ssgoi/svelte/view-transitions`)
+
 - `fade()` - Smooth opacity transition
-- `slide()` - Directional sliding (left/right/up/down)
-- `scale()` - Zoom in/out effect
+- `scroll()` - Vertical scrolling (up/down)
+- `drill()` - Drill in/out effect (enter/exit)
 - `hero()` - Shared element transitions
 - `pinterest()` - Pinterest-style expand effect
-- `ripple()` - Material Design ripple effect
 
 ### Element Transitions (`@ssgoi/svelte/transitions`)
+
 - `fadeIn()` / `fadeOut()`
 - `slideUp()` / `slideDown()` / `slideLeft()` / `slideRight()`
 - `scaleIn()` / `scaleOut()`
@@ -237,12 +259,12 @@ All transitions use spring physics for natural motion:
 
 ```javascript
 slide({
-  direction: 'left',
+  direction: "left",
   spring: {
-    stiffness: 300,  // 1-1000, higher = faster
-    damping: 30      // 0-100, higher = less oscillation
-  }
-})
+    stiffness: 300, // 1-1000, higher = faster
+    damping: 30, // 0-100, higher = less oscillation
+  },
+});
 ```
 
 ## TypeScript Support
@@ -250,7 +272,7 @@ slide({
 SSGOI is written in TypeScript and provides full type definitions:
 
 ```typescript
-import type { SsgoiConfig, TransitionConfig } from '@ssgoi/svelte';
+import type { SsgoiConfig, TransitionConfig } from "@ssgoi/svelte";
 
 const config: SsgoiConfig = {
   // Full type safety
@@ -274,6 +296,7 @@ const config: SsgoiConfig = {
 ## Documentation
 
 Visit [https://ssgoi.dev](https://ssgoi.dev) for:
+
 - Complete API reference
 - Interactive examples
 - Advanced patterns
@@ -285,4 +308,4 @@ We welcome contributions! Please see our [contributing guide](https://github.com
 
 ## License
 
-MIT © [MeurSyphus](https://github.com/meursyphus)
+MIT © [MeurSyphus](https://github.com/meursyphus)

package/dist/context.d.ts

@@ -1,3 +1,3 @@
-import type { SsgoiContext } from './types.js';
+import type { SsgoiContext } from "./types.js";
 export declare function setSsgoiContext(context: SsgoiContext): void;
 export declare function getSsgoiContext(): SsgoiContext;

package/dist/context.js

@@ -1,12 +1,12 @@
-import { getContext, setContext } from 'svelte';
-var SSGOI_CONTEXT_KEY = Symbol('ssgoi');
+import { getContext, setContext } from "svelte";
+var SSGOI_CONTEXT_KEY = Symbol("ssgoi");
 export function setSsgoiContext(context) {
     setContext(SSGOI_CONTEXT_KEY, context);
 }
 export function getSsgoiContext() {
     var context = getContext(SSGOI_CONTEXT_KEY);
     if (!context) {
-        throw new Error('getSsgoiContext must be called within Ssgoi component');
+        throw new Error("getSsgoiContext must be called within Ssgoi component");
     }
     return context;
 }

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/ssgoi-transition.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import { transition } from './transition';
-  import { getSsgoiContext } from './context';
+  import { transition } from "./transition";
+  import { getSsgoiContext } from "./context";
 
   interface Props {
     id: string;
@@ -9,16 +9,16 @@
     class?: string;
   }
 
-  let { id, children, as = 'div', class: className }: Props = $props();
+  let { id, children, as = "div", class: className }: Props = $props();
 
   const getTransition = getSsgoiContext();
 </script>
 
-<svelte:element 
-  this={as} 
-  use:transition={getTransition(id)} 
+<svelte:element
+  this={as}
+  use:transition={getTransition(id)}
   data-ssgoi-transition={id}
   class={className}
 >
   {@render children()}
-</svelte:element>
+</svelte:element>

package/dist/ssgoi.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-  import type { SsgoiConfig } from '@ssgoi/core/types';
-  import { setSsgoiContext } from './context';
-  import { createSggoiTransitionContext } from '@ssgoi/core';
+  import type { SsgoiConfig } from "@ssgoi/core/types";
+  import { setSsgoiContext } from "./context";
+  import { createSggoiTransitionContext } from "@ssgoi/core";
 
   interface Props {
     config: SsgoiConfig;
@@ -14,4 +14,4 @@
   setSsgoiContext(contextValue);
 </script>
 
-{@render children()}
+{@render children()}

package/dist/ssgoi.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SsgoiConfig } from '@ssgoi/core/types';
+import type { SsgoiConfig } from "@ssgoi/core/types";
 interface Props {
     config: SsgoiConfig;
     children: () => any;

package/dist/transition.d.ts

@@ -1,4 +1,4 @@
-import { type Transition, type TransitionKey } from '@ssgoi/core';
+import { type Transition, type TransitionKey } from "@ssgoi/core";
 export declare const transition: <TAnimationValue = number>(node: HTMLElement, params: Transition<undefined, TAnimationValue> & {
     key?: TransitionKey;
 }) => {

package/dist/transition.js

@@ -1,10 +1,10 @@
-import { transition as _transition } from '@ssgoi/core';
+import { transition as _transition, } from "@ssgoi/core";
 export var transition = function (node, params) {
     var callback = _transition({
         key: params === null || params === void 0 ? void 0 : params.key,
         in: params === null || params === void 0 ? void 0 : params.in,
         out: params === null || params === void 0 ? void 0 : params.out,
-        ref: node
+        ref: node,
     });
     var cleanup = callback(node);
     return {
@@ -13,12 +13,12 @@ export var transition = function (node, params) {
                 key: newParams === null || newParams === void 0 ? void 0 : newParams.key,
                 in: newParams === null || newParams === void 0 ? void 0 : newParams.in,
                 out: newParams === null || newParams === void 0 ? void 0 : newParams.out,
-                ref: node
+                ref: node,
             });
             cleanup = callback(node);
         },
         destroy: function () {
             cleanup === null || cleanup === void 0 ? void 0 : cleanup();
-        }
+        },
     };
 };

package/dist/transitions/index.d.ts

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

package/dist/transitions/index.js

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

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

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

package/dist/view-transitions/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/svelte",
-  "version": "2.1.2",
+  "version": "2.2.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": "2.1.2"
+    "@ssgoi/core": "2.2.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"