@ssgoi/react 3.2.2 → 4.0.0

package/README.md

@@ -33,15 +33,13 @@ pnpm add @ssgoi/react
 ### 1. Wrap your app
 
 ```tsx
-import { Ssgoi } from '@ssgoi/react';
-import { fade } from '@ssgoi/react/view-transitions';
+import { Ssgoi } from "@ssgoi/react";
+import { fade } from "@ssgoi/react/view-transitions";
 
 export default function App() {
   return (
     <Ssgoi config={{ defaultTransition: fade() }}>
-      <div style={{ position: 'relative' }}>
-        {/* Your app */}
-      </div>
+      <div style={{ position: "relative" }}>{/* Your app */}</div>
     </Ssgoi>
   );
 }
@@ -50,7 +48,7 @@ export default function App() {
 ### 2. Wrap your pages
 
 ```tsx
-import { SsgoiTransition } from '@ssgoi/react';
+import { SsgoiTransition } from "@ssgoi/react";
 
 export default function HomePage() {
   return (
@@ -74,16 +72,20 @@ Define different transitions for different routes:
 const config = {
   transitions: [
     // Scroll between tabs
-    { from: '/home', to: '/about', transition: scroll({ direction: 'up' }) },
-    { from: '/about', to: '/home', transition: scroll({ direction: 'down' }) },
-    
+    { 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' }) },
-    
+    {
+      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(),
 };
 ```
 
@@ -94,7 +96,7 @@ Automatically create bidirectional transitions:
 ```tsx
 {
   from: '/home',
-  to: '/about', 
+  to: '/about',
   transition: scroll({ direction: 'up' }),
   symmetric: true  // Automatically creates reverse transition
 }
@@ -105,37 +107,138 @@ Automatically create bidirectional transitions:
 Animate specific elements during mount/unmount:
 
 ```tsx
-import { transition } from '@ssgoi/react';
-import { fadeIn, slideUp } from '@ssgoi/react/transitions';
+import { transition } from "@ssgoi/react";
+import { fade, slide } from "@ssgoi/react/transitions";
 
 function Card() {
   return (
-    <div ref={transition({
-      key: 'card',
-      in: fadeIn(),
-      out: slideUp()
-    })}>
+    <div
+      ref={transition({
+        key: "card",
+        in: fade(),
+        out: slide({ direction: "up" }),
+      })}
+    >
       <h2>Animated Card</h2>
     </div>
   );
 }
 ```
 
+### Auto Key Plugin
+
+The Auto Key Plugin automatically generates unique keys for your transitions based on the file location (`file:line:column`), eliminating the need to manually provide keys.
+
+**Benefits:**
+
+- **Automatic Key Generation**: No need to manually specify `key` in `transition()` calls
+- **Collision-Free**: Keys are based on exact code location
+- **Cleaner Code**: Less boilerplate in your components
+
+**⚠️ Important**: For list items rendered with `.map()`, just use JSX key prop - the plugin automatically appends it to generate unique keys.
+
+#### Setup with Next.js
+
+```tsx
+// next.config.ts
+import type { NextConfig } from "next";
+import SsgoiAutoKey from "@ssgoi/react/unplugin/webpack";
+
+const nextConfig: NextConfig = {
+  webpack: (config) => {
+    config.plugins.push(SsgoiAutoKey());
+    return config;
+  },
+};
+
+export default nextConfig;
+```
+
+#### Setup with Vite
+
+```ts
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import SsgoiAutoKey from "@ssgoi/react/unplugin/vite";
+
+export default defineConfig({
+  plugins: [react(), SsgoiAutoKey()],
+});
+```
+
+#### Usage Examples
+
+**WITH Auto Key Plugin (Recommended):**
+
+```tsx
+import { transition } from "@ssgoi/react";
+import { fade, slide } from "@ssgoi/react/transitions";
+
+function SimpleCard() {
+  return (
+    <div ref={transition(fade())}>
+      <h2>Fades in on mount</h2>
+    </div>
+  );
+}
+```
+
+**WITHOUT Auto Key Plugin:**
+
+```tsx
+// Explicit key required for transition state tracking
+function Card() {
+  return (
+    <div
+      ref={transition({
+        key: "my-card",
+        ...fade(),
+      })}
+    >
+      <h2>Animated Card</h2>
+    </div>
+  );
+}
+```
+
+**List Items:**
+
+```tsx
+// In .map() lists, just use JSX key - the plugin appends it automatically
+function List() {
+  return (
+    <ul>
+      {items.map((item) => (
+        <li
+          key={item.id} // JSX key is enough - plugin generates file:line:col:${key}
+          ref={transition(fade())}
+        >
+          {item.name}
+        </li>
+      ))}
+    </ul>
+  );
+}
+```
+
 ## Next.js App Router Example
 
 ```tsx
 // app/layout.tsx
-import { Ssgoi } from '@ssgoi/react';
-import { scroll } from '@ssgoi/react/view-transitions';
+import { Ssgoi } from "@ssgoi/react";
+import { scroll } from "@ssgoi/react/view-transitions";
 
 export default function RootLayout({ children }) {
   return (
     <html>
       <body>
-        <Ssgoi config={{
-          defaultTransition: scroll({ direction: 'up' })
-        }}>
-          <div style={{ position: 'relative', minHeight: '100vh' }}>
+        <Ssgoi
+          config={{
+            defaultTransition: scroll({ direction: "up" }),
+          }}
+        >
+          <div style={{ position: "relative", minHeight: "100vh" }}>
             {children}
           </div>
         </Ssgoi>
@@ -145,14 +248,10 @@ export default function RootLayout({ children }) {
 }
 
 // app/page.tsx
-import { SsgoiTransition } from '@ssgoi/react';
+import { SsgoiTransition } from "@ssgoi/react";
 
 export default function Page() {
-  return (
-    <SsgoiTransition id="/">
-      {/* Your page content */}
-    </SsgoiTransition>
-  );
+  return <SsgoiTransition id="/">{/* Your page content */}</SsgoiTransition>;
 }
 ```
 
@@ -161,26 +260,25 @@ export default function Page() {
 ### Components
 
 #### `<Ssgoi>`
+
 The provider component that manages transition context.
 
 ```tsx
-<Ssgoi config={ssgoiConfig}>
-  {children}
-</Ssgoi>
+<Ssgoi config={ssgoiConfig}>{children}</Ssgoi>
 ```
 
 #### `<SsgoiTransition>`
+
 Wrapper component for pages that should transition.
 
 ```tsx
-<SsgoiTransition id="/page-id">
-  {children}
-</SsgoiTransition>
+<SsgoiTransition id="/page-id">{children}</SsgoiTransition>
 ```
 
 ### Hooks
 
 #### `useTransition()`
+
 Access transition state and controls.
 
 ```tsx
@@ -190,14 +288,17 @@ const { isTransitioning, direction } = useTransition();
 ### Functions
 
 #### `transition()`
+
 Apply transitions to individual elements.
 
 ```tsx
-<div ref={transition({
-  key: 'unique-key',
-  in: fadeIn(),
-  out: fadeOut()
-})}>
+<div
+  ref={transition({
+    key: "unique-key",
+    in: fade(),
+    out: fade(),
+  })}
+>
   Content
 </div>
 ```
@@ -205,6 +306,7 @@ Apply transitions to individual elements.
 ## Built-in Transitions
 
 ### Page Transitions (`@ssgoi/react/view-transitions`)
+
 - `fade()` - Smooth opacity transition
 - `scroll()` - Vertical scrolling (up/down)
 - `drill()` - Drill in/out effect (enter/exit)
@@ -212,12 +314,14 @@ Apply transitions to individual elements.
 - `pinterest()` - Pinterest-style expand effect
 
 ### Element Transitions (`@ssgoi/react/transitions`)
-- `fadeIn()` / `fadeOut()`
-- `slideUp()` / `slideDown()` / `slideLeft()` / `slideRight()`
-- `scaleIn()` / `scaleOut()`
-- `bounce()`
-- `blur()`
-- `rotate()`
+
+- `fade()` - Fade in/out
+- `scale()` - Scale in/out
+- `slide()` - Slide (direction: up/down/left/right)
+- `rotate()` - Rotate
+- `bounce()` - Bounce
+- `blur()` - Blur
+- `fly()` - Fly (custom x, y position)
 
 ## Spring Physics Configuration
 
@@ -225,12 +329,12 @@ All transitions use spring physics for natural motion:
 
 ```tsx
 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
@@ -238,7 +342,7 @@ slide({
 SSGOI is written in TypeScript and provides full type definitions:
 
 ```tsx
-import type { SsgoiConfig, TransitionConfig } from '@ssgoi/react';
+import type { SsgoiConfig, TransitionConfig } from "@ssgoi/react";
 
 const config: SsgoiConfig = {
   // Full type safety
@@ -262,6 +366,7 @@ const config: SsgoiConfig = {
 ## Documentation
 
 Visit [https://ssgoi.dev](https://ssgoi.dev) for:
+
 - Complete API reference
 - Interactive examples
 - Advanced patterns
@@ -273,4 +378,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/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e){return("tick"in e||"css"in e)&&!("springs"in e)}function s(e){return"springs"in e}function o(e){return"css"in e&&typeof e.css=="function"}function a(e){return"tick"in e&&typeof e.tick=="function"}function c(e){if(o(e)&&a(e))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(e){if(e.tick&&e.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function m(e){const n=await e;return s(n)?(n.springs.forEach(l),n):(c(n),{prepare:n.prepare,wait:n.wait,onStart:n.onStart,onEnd:n.onEnd,springs:[{spring:n.spring,tick:n.tick,css:n.css}],schedule:"parallel"})}function S(e,n){const u=e.schedule??"parallel",f=e.springs.map(r=>{let t;switch(u){case"parallel":t=0;break;case"sequential":t=1;break;case"stagger":t=Math.max(0,Math.min(1,r.offset??0));break;default:t=0}const{css:i,offset:w,...g}=r,d=i?typeof i=="function"?n?{element:n,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...g,css:d,normalizedOffset:t}}),{schedule:k,...p}=e;return{...p,springs:f}}exports.isCssAnimation=o;exports.isMultiSpring=s;exports.isSingleSpring=h;exports.isTickAnimation=a;exports.normalizeMultiSpringSchedule=S;exports.normalizeToMultiSpring=m;exports.validateAnimationMode=c;exports.validateSpringItem=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function h(e){return("tick"in e||"css"in e)&&!("springs"in e)}function r(e){return"springs"in e}function o(e){return"css"in e&&typeof e.css=="function"}function c(e){return"tick"in e&&typeof e.tick=="function"}function a(e){if(o(e)&&c(e))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function l(e){if(e.tick&&e.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}async function m(e){const t=await e;return r(t)?(t.springs.forEach(l),t):(a(t),{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,springs:[{physics:t.physics,tick:t.tick,css:t.css}],schedule:"parallel"})}function S(e,t){const u=e.schedule??"parallel",f=e.springs.map(s=>{let n;switch(u){case"parallel":n=0;break;case"sequential":n=1;break;case"stagger":n=Math.max(0,Math.min(1,s.offset??0));break;default:n=0}const{css:i,offset:y,...d}=s,g=i?typeof i=="function"?t?{element:t,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...d,css:g,normalizedOffset:n}}),{schedule:k,...p}=e;return{...p,springs:f}}exports.isCssAnimation=o;exports.isMultiSpring=r;exports.isSingleSpring=h;exports.isTickAnimation=c;exports.normalizeMultiSpringSchedule=S;exports.normalizeToMultiSpring=m;exports.validateAnimationMode=a;exports.validateSpringItem=l;

package/dist/core/dist/types.js

@@ -10,7 +10,7 @@ function p(n) {
 function u(n) {
   return "tick" in n && typeof n.tick == "function";
 }
-function g(n) {
+function h(n) {
   if (p(n) && u(n))
     throw new Error(
       "SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
@@ -24,14 +24,14 @@ function d(n) {
 }
 async function S(n) {
   const e = await n;
-  return f(e) ? (e.springs.forEach(d), e) : (g(e), {
+  return f(e) ? (e.springs.forEach(d), e) : (h(e), {
     prepare: e.prepare,
     wait: e.wait,
     onStart: e.onStart,
     onEnd: e.onEnd,
     springs: [
       {
-        spring: e.spring,
+        physics: e.physics,
         tick: e.tick,
         css: e.css
       }
@@ -39,7 +39,7 @@ async function S(n) {
     schedule: "parallel"
   });
 }
-function w(n, e) {
+function y(n, e) {
   const r = n.schedule ?? "parallel", a = n.springs.map(
     (s) => {
       let t;
@@ -59,7 +59,7 @@ function w(n, e) {
       const { css: i, offset: m, ...c } = s, l = i ? typeof i == "function" ? e ? { element: e, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
       return { ...c, css: l, normalizedOffset: t };
     }
-  ), { schedule: h, ...o } = n;
+  ), { schedule: g, ...o } = n;
   return {
     ...o,
     springs: a
@@ -70,8 +70,8 @@ export {
   f as isMultiSpring,
   k as isSingleSpring,
   u as isTickAnimation,
-  w as normalizeMultiSpringSchedule,
+  y as normalizeMultiSpringSchedule,
   S as normalizeToMultiSpring,
-  g as validateAnimationMode,
+  h as validateAnimationMode,
   d as validateSpringItem
 };

package/dist/index.d.ts

@@ -1,5 +1,2 @@
-export { transition } from './transition';
-export * from './types';
-export { Ssgoi } from './ssgoi';
-export { SsgoiTransition } from './ssgoi-transition';
-export { TransitionScope } from './transition-scope';
+export * from './lib/index'
+export {}

package/dist/lib/index.d.ts

@@ -0,0 +1,5 @@
+export { transition } from './transition';
+export * from './types';
+export { Ssgoi } from './ssgoi';
+export { SsgoiTransition } from './ssgoi-transition';
+export { TransitionScope } from './transition-scope';

package/dist/lib/presets/index.d.ts

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

package/dist/{transition.d.ts → lib/transition.d.ts}

@@ -2,7 +2,6 @@ import { Transition, TransitionKey, TransitionScope } from '@ssgoi/core';
 type TransitionOptions = Transition<undefined> & {
     key?: TransitionKey;
     scope?: TransitionScope;
-    ref?: object;
 };
 /**
  * React ref callback for element transitions
@@ -13,6 +12,9 @@ type TransitionOptions = Transition<undefined> & {
  * The returned ref callback has a stable reference (cached by key),
  * so it won't cause unnecessary re-renders when used with React refs.
  *
+ * Note: key is optional in the type signature because it can be auto-injected
+ * by babel-plugin-ssgoi at build time. However, it is required at runtime.
+ *
  * @example
  * ```tsx
  * <div ref={transition({

package/dist/lib/transitions/index.d.ts

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

package/dist/lib/types.d.ts

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

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

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

package/dist/presets/index.d.ts

@@ -1 +1,2 @@
-export * from '@ssgoi/core/presets';
+export * from '../lib/presets/index'
+export {}

package/dist/react/src/lib/transition.cjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@ssgoi/core"),e=t=>r.transition(t,"auto");exports.transition=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@ssgoi/core"),t=e=>{if(!e.key)throw new Error("[ssgoi] transition() requires a 'key' property. Either provide it manually or use plugin for auto-injection. import plugin from @ssgoi/react/unplugin/webpack; see: https://ssgoi.dev/en/docs/core-concepts/react-plugin");return r.transition(e,"auto")};exports.transition=t;

package/dist/react/src/lib/transition.js

@@ -1,6 +1,15 @@
 "use client";
-import { transition as n } from "@ssgoi/core";
-const r = (t) => n(t, "auto");
+import { transition as t } from "@ssgoi/core";
+const o = (r) => {
+  if (!r.key)
+    throw new Error(
+      "[ssgoi] transition() requires a 'key' property. Either provide it manually or use plugin for auto-injection. import plugin from @ssgoi/react/unplugin/webpack; see: https://ssgoi.dev/en/docs/core-concepts/react-plugin"
+    );
+  return t(
+    r,
+    "auto"
+  );
+};
 export {
-  r as transition
+  o as transition
 };

package/dist/transitions/index.d.ts

@@ -1 +1,2 @@
-export * from '@ssgoi/core/transitions';
+export * from '../lib/transitions/index'
+export {}

package/dist/types.d.ts

@@ -1 +1,2 @@
-export * from '@ssgoi/core/types';
+export * from './lib/types'
+export {}

package/dist/unplugin/esbuild.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.cjs"),u=e.unplugin.esbuild;exports.default=u;

package/dist/unplugin/esbuild.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options?: import('./index').SsgoiAutoKeyOptions | undefined) => import('esbuild').Plugin;
+export default _default;

package/dist/unplugin/esbuild.js

@@ -0,0 +1,5 @@
+import { unplugin as u } from "./index.js";
+const i = u.esbuild;
+export {
+  i as default
+};

package/dist/unplugin/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("unplugin"),j=require("@babel/core"),P={include:[".tsx",".jsx"],exclude:[/node_modules/]};function h(){return function({types:e}){return{name:"babel-plugin-ssgoi-auto-key",visitor:{CallExpression(r,l){const n=r.node.callee;if(!e.isIdentifier(n)||n.name!=="transition"||r.node._ssgoiProcessed)return;r.node._ssgoiProcessed=!0;const a=r.node.arguments;if(a.length===0)return;const s=a[0];if(e.isObjectExpression(s)&&s.properties.length>=2&&e.isSpreadElement(s.properties[0])&&e.isObjectProperty(s.properties[s.properties.length-1])&&e.isIdentifier(s.properties[s.properties.length-1].key)&&s.properties[s.properties.length-1].key.name==="key")return;const d=l.filename||"unknown",x=d.split("/").pop()||d,m=r.node.loc,b=m?.start?.line??0,k=m?.start?.column??0,c=`${x}:${b}:${k}`;let u=null;const p=r.findParent(i=>i.isJSXElement()||i.isJSXFragment());if(p&&e.isJSXElement(p.node)){const i=p.node.openingElement.attributes.find(t=>e.isJSXAttribute(t)&&e.isJSXIdentifier(t.name)&&t.name.name==="key");i&&(e.isJSXExpressionContainer(i.value)?e.isJSXEmptyExpression(i.value.expression)||(u=i.value.expression):e.isStringLiteral(i.value)&&(u=i.value))}let f;u?f=e.templateLiteral([e.templateElement({raw:`${c}:`,cooked:`${c}:`}),e.templateElement({raw:"",cooked:""},!0)],[u]):f=e.stringLiteral(c);const g=e.objectProperty(e.identifier("key"),f);if(e.isObjectExpression(s)){if(s.properties.some(t=>e.isObjectProperty(t)&&e.isIdentifier(t.key)&&t.key.name==="key"))return;s.properties.push(g)}else e.isExpression(s)&&!e.isSpreadElement(s)&&(a[0]=e.objectExpression([e.spreadElement(s),g]))}}}}}function y(o,e){return e.include.some(n=>o.endsWith(n))?!e.exclude.some(n=>typeof n=="string"?o.includes(n):n.test(o)):!1}const v=o=>{const e={...P,...o};return{name:"unplugin-ssgoi-auto-key",enforce:"pre",transformInclude(r){return y(r,e)},transform(r,l){if(!y(l,e))return null;try{const n=j.transformSync(r,{filename:l,plugins:[h()],parserOpts:{plugins:["jsx","typescript"]},generatorOpts:{retainLines:!0},sourceMaps:!0,configFile:!1,babelrc:!1});if(n&&n.code)return{code:n.code,map:n.map}}catch(n){console.error(`[unplugin-ssgoi-auto-key] Error transforming ${l}:`,n)}return null}}},E=S.createUnplugin(v);exports.default=E;exports.unplugin=E;

package/dist/unplugin/index.d.ts

@@ -0,0 +1,14 @@
+export interface SsgoiAutoKeyOptions {
+    /**
+     * File extensions to process
+     * @default ['.tsx', '.jsx']
+     */
+    include?: string[];
+    /**
+     * File patterns to exclude
+     * @default [/node_modules/]
+     */
+    exclude?: (string | RegExp)[];
+}
+export declare const unplugin: import('unplugin').UnpluginInstance<SsgoiAutoKeyOptions | undefined, boolean>;
+export default unplugin;

package/dist/unplugin/index.js

@@ -0,0 +1,116 @@
+import { createUnplugin as b } from "unplugin";
+import { transformSync as S } from "@babel/core";
+const j = {
+  include: [".tsx", ".jsx"],
+  exclude: [/node_modules/]
+};
+function P() {
+  return function({
+    types: e
+  }) {
+    return {
+      name: "babel-plugin-ssgoi-auto-key",
+      visitor: {
+        CallExpression(r, l) {
+          const n = r.node.callee;
+          if (!e.isIdentifier(n) || n.name !== "transition" || r.node._ssgoiProcessed)
+            return;
+          r.node._ssgoiProcessed = !0;
+          const a = r.node.arguments;
+          if (a.length === 0)
+            return;
+          const s = a[0];
+          if (e.isObjectExpression(s) && s.properties.length >= 2 && e.isSpreadElement(s.properties[0]) && e.isObjectProperty(
+            s.properties[s.properties.length - 1]
+          ) && e.isIdentifier(
+            s.properties[s.properties.length - 1].key
+          ) && s.properties[s.properties.length - 1].key.name === "key")
+            return;
+          const m = l.filename || "unknown", x = m.split("/").pop() || m, d = r.node.loc, E = d?.start?.line ?? 0, k = d?.start?.column ?? 0, c = `${x}:${E}:${k}`;
+          let u = null;
+          const p = r.findParent(
+            (i) => i.isJSXElement() || i.isJSXFragment()
+          );
+          if (p && e.isJSXElement(p.node)) {
+            const i = p.node.openingElement.attributes.find(
+              (t) => e.isJSXAttribute(t) && e.isJSXIdentifier(t.name) && t.name.name === "key"
+            );
+            i && (e.isJSXExpressionContainer(i.value) ? e.isJSXEmptyExpression(i.value.expression) || (u = i.value.expression) : e.isStringLiteral(i.value) && (u = i.value));
+          }
+          let f;
+          u ? f = e.templateLiteral(
+            [
+              e.templateElement({
+                raw: `${c}:`,
+                cooked: `${c}:`
+              }),
+              e.templateElement({ raw: "", cooked: "" }, !0)
+            ],
+            [u]
+          ) : f = e.stringLiteral(c);
+          const g = e.objectProperty(e.identifier("key"), f);
+          if (e.isObjectExpression(s)) {
+            if (s.properties.some(
+              (t) => e.isObjectProperty(t) && e.isIdentifier(t.key) && t.key.name === "key"
+            ))
+              return;
+            s.properties.push(g);
+          } else e.isExpression(s) && !e.isSpreadElement(s) && (a[0] = e.objectExpression([
+            e.spreadElement(s),
+            g
+          ]));
+        }
+      }
+    };
+  };
+}
+function y(o, e) {
+  return e.include.some((n) => o.endsWith(n)) ? !e.exclude.some((n) => typeof n == "string" ? o.includes(n) : n.test(o)) : !1;
+}
+const h = (o) => {
+  const e = {
+    ...j,
+    ...o
+  };
+  return {
+    name: "unplugin-ssgoi-auto-key",
+    enforce: "pre",
+    transformInclude(r) {
+      return y(r, e);
+    },
+    transform(r, l) {
+      if (!y(l, e))
+        return null;
+      try {
+        const n = S(r, {
+          filename: l,
+          plugins: [P()],
+          parserOpts: {
+            plugins: ["jsx", "typescript"]
+          },
+          generatorOpts: {
+            retainLines: !0
+          },
+          sourceMaps: !0,
+          configFile: !1,
+          babelrc: !1
+        });
+        if (n && n.code)
+          return {
+            code: n.code,
+            map: n.map
+          };
+      } catch (n) {
+        console.error(
+          `[unplugin-ssgoi-auto-key] Error transforming ${l}:`,
+          n
+        );
+      }
+      return null;
+    }
+  };
+}, X = /* @__PURE__ */ b(h);
+export {
+  X as default,
+  X as unplugin
+};

package/dist/unplugin/rollup.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.cjs"),u=e.unplugin.rollup;exports.default=u;

package/dist/unplugin/rollup.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options?: import('./index').SsgoiAutoKeyOptions | undefined) => import('rollup').Plugin<any> | import('rollup').Plugin<any>[];
+export default _default;

package/dist/unplugin/rollup.js

@@ -0,0 +1,5 @@
+import { unplugin as l } from "./index.js";
+const p = l.rollup;
+export {
+  p as default
+};

package/dist/unplugin/vite.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.cjs"),t=e.unplugin.vite;exports.default=t;

package/dist/unplugin/vite.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options?: import('./index').SsgoiAutoKeyOptions | undefined) => import('vite').Plugin<any> | import('vite').Plugin<any>[];
+export default _default;

package/dist/unplugin/vite.js

@@ -0,0 +1,5 @@
+import { unplugin as t } from "./index.js";
+const i = t.vite;
+export {
+  i as default
+};

package/dist/unplugin/webpack.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("./index.cjs"),u=e.unplugin.webpack;exports.default=u;

package/dist/unplugin/webpack.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (options?: import('./index').SsgoiAutoKeyOptions | undefined) => import('webpack').WebpackPluginInstance;
+export default _default;

package/dist/unplugin/webpack.js

@@ -0,0 +1,5 @@
+import { unplugin as p } from "./index.js";
+const e = p.webpack;
+export {
+  e as default
+};

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

@@ -1 +1,2 @@
-export * from '@ssgoi/core/view-transitions';
+export * from '../lib/view-transitions/index'
+export {}

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ssgoi/react",
-  "version": "3.2.2",
+  "version": "4.0.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
   "files": [
     "dist",
+    "plugin",
     "!dist/**/*.test.*",
     "!dist/**/*.spec.*"
   ],
@@ -42,12 +43,45 @@
       "import": "./dist/presets/index.js",
       "require": "./dist/presets/index.cjs",
       "default": "./dist/presets/index.js"
+    },
+    "./unplugin": {
+      "types": "./dist/unplugin/index.d.ts",
+      "import": "./dist/unplugin/index.js",
+      "require": "./dist/unplugin/index.cjs",
+      "default": "./dist/unplugin/index.js"
+    },
+    "./unplugin/webpack": {
+      "types": "./dist/unplugin/webpack.d.ts",
+      "import": "./dist/unplugin/webpack.js",
+      "require": "./dist/unplugin/webpack.cjs",
+      "default": "./dist/unplugin/webpack.js"
+    },
+    "./unplugin/vite": {
+      "types": "./dist/unplugin/vite.d.ts",
+      "import": "./dist/unplugin/vite.js",
+      "require": "./dist/unplugin/vite.cjs",
+      "default": "./dist/unplugin/vite.js"
+    },
+    "./unplugin/rollup": {
+      "types": "./dist/unplugin/rollup.d.ts",
+      "import": "./dist/unplugin/rollup.js",
+      "require": "./dist/unplugin/rollup.cjs",
+      "default": "./dist/unplugin/rollup.js"
+    },
+    "./unplugin/esbuild": {
+      "types": "./dist/unplugin/esbuild.d.ts",
+      "import": "./dist/unplugin/esbuild.js",
+      "require": "./dist/unplugin/esbuild.cjs",
+      "default": "./dist/unplugin/esbuild.js"
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^3.2.2"
+    "unplugin": "^2.3.2",
+    "@babel/core": "^7.26.10",
+    "@ssgoi/core": "^4.0.0"
   },
   "devDependencies": {
+    "@types/babel__core": "^7.20.5",
     "@eslint/js": "^9.30.1",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",