@ssgoi/react 3.0.0 → 3.2.0

package/dist/core/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function p(n){return("tick"in n||"css"in n)&&!("springs"in n)}function r(n){return"springs"in n}function s(n){return"css"in n&&typeof n.css=="function"}function e(n){return"tick"in n&&typeof n.tick=="function"}function o(n){if(s(n)&&e(n))throw new Error("SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other.")}function a(n){if(n.tick&&n.css)throw new Error("SpringItem cannot have both 'tick' and 'css' defined. Use one or the other.")}function f(n){return r(n)?(n.springs.forEach(a),n):(o(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 g(n){const c=n.schedule??"parallel",l=n.springs.map(t=>{let i;switch(c){case"parallel":i=0;break;case"sequential":i=1;break;case"stagger":i=Math.max(0,Math.min(1,t.offset??0));break;default:i=0}return{...t,normalizedOffset:i}}),{schedule:d,...u}=n;return{...u,springs:l}}exports.isCssAnimation=s;exports.isMultiSpring=r;exports.isSingleSpring=p;exports.isTickAnimation=e;exports.normalizeMultiSpringSchedule=g;exports.normalizeToMultiSpring=f;exports.validateAnimationMode=o;exports.validateSpringItem=a;
+"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;

package/dist/core/dist/types.js

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

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("@ssgoi/core"),i=require("./core/dist/types.cjs"),e=require("./react/src/lib/ssgoi.cjs"),t=require("./react/src/lib/ssgoi-transition.cjs");Object.defineProperty(exports,"transition",{enumerable:!0,get:()=>n.transition});exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=e.Ssgoi;exports.SsgoiTransition=t.SsgoiTransition;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./react/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),t=require("./react/src/lib/ssgoi.cjs"),o=require("./react/src/lib/ssgoi-transition.cjs"),e=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiSpring=i.isMultiSpring;exports.isSingleSpring=i.isSingleSpring;exports.isTickAnimation=i.isTickAnimation;exports.normalizeMultiSpringSchedule=i.normalizeMultiSpringSchedule;exports.normalizeToMultiSpring=i.normalizeToMultiSpring;exports.validateAnimationMode=i.validateAnimationMode;exports.validateSpringItem=i.validateSpringItem;exports.Ssgoi=t.Ssgoi;exports.SsgoiTransition=o.SsgoiTransition;exports.TransitionScope=e.TransitionScope;

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export { transition } from './transition';
 export * from './types';
 export { Ssgoi } from './ssgoi';
 export { SsgoiTransition } from './ssgoi-transition';
+export { TransitionScope } from './transition-scope';

package/dist/index.js

@@ -1,17 +1,19 @@
-import { transition as n } from "@ssgoi/core";
-import { isCssAnimation as t, isMultiSpring as e, isSingleSpring as a, isTickAnimation as m, normalizeMultiSpringSchedule as s, normalizeToMultiSpring as l, validateAnimationMode as p, validateSpringItem as S } from "./core/dist/types.js";
-import { Ssgoi as d } from "./react/src/lib/ssgoi.js";
-import { SsgoiTransition as u } from "./react/src/lib/ssgoi-transition.js";
+import { transition as n } from "./react/src/lib/transition.js";
+import { isCssAnimation as t, isMultiSpring as e, isSingleSpring as a, isTickAnimation as m, normalizeMultiSpringSchedule as p, normalizeToMultiSpring as s, validateAnimationMode as S, validateSpringItem as l } from "./core/dist/types.js";
+import { Ssgoi as f } from "./react/src/lib/ssgoi.js";
+import { SsgoiTransition as d } from "./react/src/lib/ssgoi-transition.js";
+import { TransitionScope as M } from "./react/src/lib/transition-scope.js";
 export {
-  d as Ssgoi,
-  u as SsgoiTransition,
+  f as Ssgoi,
+  d as SsgoiTransition,
+  M as TransitionScope,
   t as isCssAnimation,
   e as isMultiSpring,
   a as isSingleSpring,
   m as isTickAnimation,
-  s as normalizeMultiSpringSchedule,
-  l as normalizeToMultiSpring,
+  p as normalizeMultiSpringSchedule,
+  s as normalizeToMultiSpring,
   n as transition,
-  p as validateAnimationMode,
-  S as validateSpringItem
+  S as validateAnimationMode,
+  l as validateSpringItem
 };

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),a=require("@ssgoi/core"),u=require("./context.cjs"),g=({children:n,id:t,as:o,className:e,...i})=>{const s=u.useSsgoi(),r=o||"div";return c.jsx(r,{ref:a.transition(s(t)),"data-ssgoi-transition":t,className:e,...i,children:n})};exports.SsgoiTransition=g;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),c=require("./transition.cjs"),u=require("./context.cjs"),g=({children:n,id:t,as:i,className:o,...s})=>{const e=u.useSsgoi(),r=i||"div";return a.jsx(r,{ref:c.transition(e(t)),"data-ssgoi-transition":t,className:o,...s,children:n})};exports.SsgoiTransition=g;

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

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as m } from "react/jsx-runtime";
-import { transition as e } from "@ssgoi/core";
+import { transition as e } from "./transition.js";
 import { useSsgoi as a } from "./context.js";
 const u = ({
   children: t,

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

@@ -1,2 +1,2 @@
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),c=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),s=require("react"),i=require("./context.cjs"),n=require("@ssgoi/core"),u=({config:e,children:t})=>{const o=s.useMemo(()=>n.createSggoiTransitionContext(e,{outFirst:!1}),[e]);return r.jsx(i.SsgoiProvider,{value:o,children:t})};exports.Ssgoi=u;

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

@@ -3,13 +3,17 @@ import { jsx as e } from "react/jsx-runtime";
 import { useMemo as i } from "react";
 import { SsgoiProvider as m } from "./context.js";
 import { createSggoiTransitionContext as s } from "@ssgoi/core";
-const x = ({ config: o, children: r }) => {
+const f = ({ config: o, children: r }) => {
   const t = i(
-    () => s(o),
+    () => s(o, {
+      // React uses MutationObserver for unmount detection,
+      // so OUT and IN can arrive in any order
+      outFirst: !1
+    }),
     [o]
   );
   return /* @__PURE__ */ e(m, { value: t, children: r });
 };
 export {
-  x as Ssgoi
+  f as Ssgoi
 };

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),n=require("@ssgoi/core");function r({children:e}){return t.jsx("div",{ref:n.createTransitionScope(),style:{display:"contents"},children:e})}exports.TransitionScope=r;

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

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { createTransitionScope as t } from "@ssgoi/core";
+function n({ children: o }) {
+  return /* @__PURE__ */ r("div", { ref: t(), style: { display: "contents" }, children: o });
+}
+export {
+  n as TransitionScope
+};

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

@@ -0,0 +1,2 @@
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("@ssgoi/core"),c=i=>{const r=o.transition(i);return t=>{if(t){const n=r(t);n&&o.watchUnmount(t,n)}}};exports.transition=c;

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

@@ -0,0 +1,14 @@
+"use client";
+import { transition as a, watchUnmount as r } from "@ssgoi/core";
+const s = (o) => {
+  const i = a(o);
+  return (t) => {
+    if (t) {
+      const n = i(t);
+      n && r(t, n);
+    }
+  };
+};
+export {
+  s as transition
+};

package/dist/transition-scope.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+type TransitionScopeProps = {
+    children: ReactNode;
+};
+/**
+ * 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
+ *
+ * This is useful for:
+ * - Page transitions where child elements shouldn't animate individually
+ * - Modal/dialog content that appears/disappears with the container
+ * - List items that shouldn't animate when the entire list mounts/unmounts
+ *
+ * @example
+ * ```tsx
+ * <TransitionScope>
+ *   <div ref={transition(fadeIn(), { scope: 'local' })}>
+ *     This will only animate when added/removed independently,
+ *     not when the entire scope mounts/unmounts.
+ *   </div>
+ * </TransitionScope>
+ * ```
+ */
+export declare function TransitionScope({ children }: TransitionScopeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/transition.d.ts

@@ -1 +1,23 @@
-export { transition } from '@ssgoi/core';
+import { Transition, TransitionKey, TransitionScope } from '@ssgoi/core';
+type TransitionOptions = Transition<undefined> & {
+    key?: TransitionKey;
+    scope?: TransitionScope;
+    ref?: object;
+};
+/**
+ * React ref callback for element transitions
+ *
+ * OUT transition is automatically triggered by MutationObserver
+ * when the element is removed from the DOM - works with React 18+
+ *
+ * @example
+ * ```tsx
+ * <div ref={transition({
+ *   key: 'fade',
+ *   in: (el) => ({ tick: (p) => el.style.opacity = String(p) }),
+ *   out: (el) => ({ tick: (p) => el.style.opacity = String(p) }),
+ * })} />
+ * ```
+ */
+export declare const transition: (options: TransitionOptions) => (element: HTMLElement | null) => void;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "3.0.0",
+  "version": "3.2.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -45,11 +45,11 @@
     }
   },
   "dependencies": {
-    "@ssgoi/core": "^3.0.0"
+    "@ssgoi/core": "^3.2.0"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.30.1",