@ssgoi/react 4.0.0 → 4.2.0

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 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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function m(e){return("tick"in e||"css"in e)&&!("items"in e)}function a(e){return"items"in e}function f(e){return"css"in e&&typeof e.css=="function"}function p(e){return"tick"in e&&typeof e.tick=="function"}async function d(e){const t=await e;return a(t)?{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,items:t.items,schedule:t.schedule}:{prepare:t.prepare,wait:t.wait,onStart:t.onStart,onEnd:t.onEnd,items:[{physics:t.physics,tick:t.tick,css:t.css}],schedule:"parallel"}}function h(e,t){const c=e.schedule??"parallel",o=e.items.map(s=>{let n;switch(c){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:k,...l}=s,u=i?typeof i=="function"?t?{element:t,style:i}:void 0:{element:i.element,style:i.style}:void 0;return{...l,css:u,normalizedOffset:n}}),{schedule:y,...r}=e;return{...r,items:o}}exports.isCssAnimation=f;exports.isMultiAnimation=a;exports.isSingleAnimation=m;exports.isTickAnimation=p;exports.normalizeSchedule=h;exports.normalizeToMultiAnimation=d;

package/dist/core/dist/types.js

@@ -1,49 +1,44 @@
-function k(n) {
-  return ("tick" in n || "css" in n) && !("springs" in n);
+function p(e) {
+  return ("tick" in e || "css" in e) && !("items" in e);
 }
-function f(n) {
-  return "springs" in n;
+function u(e) {
+  return "items" in e;
 }
-function p(n) {
-  return "css" in n && typeof n.css == "function";
+function d(e) {
+  return "css" in e && typeof e.css == "function";
 }
-function u(n) {
-  return "tick" in n && typeof n.tick == "function";
+function h(e) {
+  return "tick" in e && typeof e.tick == "function";
 }
-function h(n) {
-  if (p(n) && u(n))
-    throw new Error(
-      "SingleSpringConfig cannot have both 'tick' and 'css' defined. Use one or the other."
-    );
-}
-function d(n) {
-  if (n.tick && n.css)
-    throw new Error(
-      "SpringItem cannot have both 'tick' and 'css' defined. Use one or the other."
-    );
-}
-async function S(n) {
-  const e = await n;
-  return f(e) ? (e.springs.forEach(d), e) : (h(e), {
-    prepare: e.prepare,
-    wait: e.wait,
-    onStart: e.onStart,
-    onEnd: e.onEnd,
-    springs: [
+async function k(e) {
+  const n = await e;
+  return u(n) ? {
+    prepare: n.prepare,
+    wait: n.wait,
+    onStart: n.onStart,
+    onEnd: n.onEnd,
+    items: n.items,
+    schedule: n.schedule
+  } : {
+    prepare: n.prepare,
+    wait: n.wait,
+    onStart: n.onStart,
+    onEnd: n.onEnd,
+    items: [
       {
-        physics: e.physics,
-        tick: e.tick,
-        css: e.css
+        physics: n.physics,
+        tick: n.tick,
+        css: n.css
       }
     ],
     schedule: "parallel"
-  });
+  };
 }
-function y(n, e) {
-  const r = n.schedule ?? "parallel", a = n.springs.map(
+function y(e, n) {
+  const a = e.schedule ?? "parallel", c = e.items.map(
     (s) => {
       let t;
-      switch (r) {
+      switch (a) {
         case "parallel":
           t = 0;
           break;
@@ -56,22 +51,20 @@ function y(n, e) {
         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 };
+      const { css: i, offset: f, ...r } = s, l = i ? typeof i == "function" ? n ? { element: n, style: i } : void 0 : { element: i.element, style: i.style } : void 0;
+      return { ...r, css: l, normalizedOffset: t };
     }
-  ), { schedule: g, ...o } = n;
+  ), { schedule: m, ...o } = e;
   return {
     ...o,
-    springs: a
+    items: c
   };
 }
 export {
-  p as isCssAnimation,
-  f as isMultiSpring,
-  k as isSingleSpring,
-  u as isTickAnimation,
-  y as normalizeMultiSpringSchedule,
-  S as normalizeToMultiSpring,
-  h as validateAnimationMode,
-  d as validateSpringItem
+  d as isCssAnimation,
+  u as isMultiAnimation,
+  p as isSingleAnimation,
+  h as isTickAnimation,
+  y as normalizeSchedule,
+  k as normalizeToMultiAnimation
 };

package/dist/index.cjs

@@ -1 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./react/src/lib/transition.cjs"),i=require("./core/dist/types.cjs"),o=require("./react/src/lib/ssgoi.cjs"),t=require("./react/src/lib/ssgoi-transition.cjs"),s=require("./react/src/lib/transition-scope.cjs");exports.transition=n.transition;exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;exports.Ssgoi=o.Ssgoi;exports.SsgoiTransition=t.SsgoiTransition;exports.TransitionScope=s.TransitionScope;

package/dist/index.js

@@ -1,19 +1,17 @@
 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 { isCssAnimation as r, isMultiAnimation as m, isSingleAnimation as e, isTickAnimation as s, normalizeSchedule as a, normalizeToMultiAnimation 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";
+import { SsgoiTransition as A } from "./react/src/lib/ssgoi-transition.js";
+import { TransitionScope as T } from "./react/src/lib/transition-scope.js";
 export {
   f as Ssgoi,
-  d as SsgoiTransition,
-  M as TransitionScope,
-  t as isCssAnimation,
-  e as isMultiSpring,
-  a as isSingleSpring,
-  m as isTickAnimation,
-  p as normalizeMultiSpringSchedule,
-  s as normalizeToMultiSpring,
-  n as transition,
-  S as validateAnimationMode,
-  l as validateSpringItem
+  A as SsgoiTransition,
+  T as TransitionScope,
+  r as isCssAnimation,
+  m as isMultiAnimation,
+  e as isSingleAnimation,
+  s as isTickAnimation,
+  a as normalizeSchedule,
+  l as normalizeToMultiAnimation,
+  n as transition
 };

package/dist/lib/context.d.ts

@@ -1,3 +1,3 @@
-import { SsgoiContext } from './types';
-export declare const SsgoiProvider: import('react').Provider<SsgoiContext | null>;
-export declare const useSsgoi: () => SsgoiContext;
+import { ReactSsgoiContext } from './types';
+export declare const SsgoiProvider: import('react').Provider<ReactSsgoiContext | null>;
+export declare const useSsgoi: () => ReactSsgoiContext;

package/dist/lib/ssgoi.d.ts

@@ -3,6 +3,13 @@ import { SsgoiConfig } from './types';
 interface SsgoiProps {
     config: SsgoiConfig;
     children: ReactNode;
+    /**
+     * Hook to get current pathname (e.g., Next.js usePathname)
+     * @example
+     * import { usePathname } from 'next/navigation';
+     * <Ssgoi config={config} usePathname={usePathname}>
+     */
+    usePathname?: () => string;
 }
 export declare const Ssgoi: React.FC<SsgoiProps>;
 export {};

package/dist/lib/types.d.ts

@@ -1 +1,23 @@
+import { CSSProperties } from 'react';
+import { SsgoiContext } from '@ssgoi/core/types';
 export * from '@ssgoi/core/types';
+/**
+ * Navigation info containing from/to paths
+ */
+export type NavigationInfo = {
+    from: string | null;
+    to: string;
+};
+/**
+ * React-specific context type with style control
+ */
+export type ReactSsgoiContext = {
+    /** Get transition config for a path */
+    getTransition: SsgoiContext;
+    /**
+     * Get initial style for an element
+     * Returns { visibility: "hidden" } on first call if transition is configured, {} otherwise
+     * Subsequent calls always return {} to prevent re-hiding on rerender
+     */
+    getInitialStyle: () => CSSProperties;
+};

package/dist/lib/utils.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+/**
+ * Combines multiple ref callbacks into one
+ */
+export declare function combineRefs<T>(...refs: Array<((el: T | null) => void) | null | undefined>): (el: T | null) => void;
+/**
+ * Forks style from element.style based on initialStyle keys
+ * Returns the current DOM style values for keys that were in initialStyle
+ */
+export declare function forkStyleFromElement(element: HTMLElement, initialStyle: CSSProperties): CSSProperties;

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

@@ -1,2 +1,2 @@
 "use client";
-"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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),r=require("react"),q=require("./transition.cjs"),b=require("./context.cjs"),o=require("./utils.cjs"),T=({children:c,id:i,as:u,className:l,...f})=>{const{getTransition:a,getInitialStyle:R}=b.useSsgoi(),S=u||"div",t=r.useRef(null),s=r.useRef(!0),e=r.useRef(null);e.current===null&&(e.current=R());let n;s.current?n=e.current:t.current&&e.current&&(n=o.forkStyleFromElement(t.current,e.current));const g=q.transition(a(i)),m=o.combineRefs(y=>{t.current=y,s.current=!1},g);return d.jsx(S,{ref:m,"data-ssgoi-transition":i,className:l,style:n,...f,children:c})};exports.SsgoiTransition=T;

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

@@ -1,26 +1,38 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { transition as e } from "./transition.js";
-import { useSsgoi as a } from "./context.js";
-const u = ({
-  children: t,
+import { jsx as g } from "react/jsx-runtime";
+import { useRef as n } from "react";
+import { transition as y } from "./transition.js";
+import { useSsgoi as d } from "./context.js";
+import { forkStyleFromElement as b, combineRefs as x } from "./utils.js";
+const C = ({
+  children: s,
   id: o,
-  as: n,
-  className: i,
-  ...r
+  as: c,
+  className: f,
+  ...l
 }) => {
-  const s = a();
-  return /* @__PURE__ */ m(
-    n || "div",
+  const { getTransition: u, getInitialStyle: m } = d(), a = c || "div", r = n(null), i = n(!0), t = n(null);
+  t.current === null && (t.current = m());
+  let e;
+  i.current ? e = t.current : r.current && t.current && (e = b(
+    r.current,
+    t.current
+  ));
+  const R = y(u(o)), p = x((S) => {
+    r.current = S, i.current = !1;
+  }, R);
+  return /* @__PURE__ */ g(
+    a,
     {
-      ref: e(s(o)),
+      ref: p,
       "data-ssgoi-transition": o,
-      className: i,
-      ...r,
-      children: t
+      className: f,
+      style: e,
+      ...l,
+      children: s
     }
   );
 };
 export {
-  u as SsgoiTransition
+  C as SsgoiTransition
 };

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"),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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),o=require("react"),v=require("./context.cjs"),s=require("@ssgoi/core");function R(t){const n=o.useRef(null),e=o.useRef(null);t!==null&&n.current!==t&&(e.current=n.current,n.current=t);const r=o.useRef({from:null,to:""});return t!==null&&(r.current={from:e.current,to:t}),o.useCallback(()=>r.current,[])}function S(t){return{trigger(){},get(n){const{from:e,to:r}=t();return!e||!r||e===r?Promise.resolve(null):Promise.resolve({from:e,to:r})}}}const y=o.memo(({config:t,children:n,usePathname:e})=>{const r=e?.()??null,i=R(r),l=o.useMemo(()=>{const{getTransition:g,hasMatchingTransition:f}=s.createSggoiTransitionContext(t,{createNavigationDetector:e?()=>S(i):s.createAnyOrderDetector});return{getTransition:g,getInitialStyle:()=>{if(!e)return{};const{from:u,to:c}=i();return!u||u===c?{}:f(u,c)?{visibility:"hidden"}:{}}}},[t,e,i]);return a.jsx(v.SsgoiProvider,{value:l,children:n})});exports.Ssgoi=y;

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

@@ -1,19 +1,43 @@
 "use client";
-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 f = ({ config: o, children: r }) => {
-  const t = i(
-    () => 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 });
-};
+import { jsx as g } from "react/jsx-runtime";
+import a, { useMemo as m, useRef as c, useCallback as v } from "react";
+import { SsgoiProvider as y } from "./context.js";
+import { createSggoiTransitionContext as R, createAnyOrderDetector as S } from "@ssgoi/core";
+function d(t) {
+  const n = c(null), r = c(null);
+  t !== null && n.current !== t && (r.current = n.current, n.current = t);
+  const e = c({ from: null, to: "" });
+  return t !== null && (e.current = { from: r.current, to: t }), v(() => e.current, []);
+}
+function p(t) {
+  return {
+    trigger() {
+    },
+    get(n) {
+      const { from: r, to: e } = t();
+      return !r || !e || r === e ? Promise.resolve(null) : Promise.resolve({ from: r, to: e });
+    }
+  };
+}
+const C = a.memo(
+  ({ config: t, children: n, usePathname: r }) => {
+    const e = r?.() ?? null, o = d(e), l = m(() => {
+      const { getTransition: s, hasMatchingTransition: f } = R(t, {
+        createNavigationDetector: r ? () => p(o) : S
+      });
+      return {
+        getTransition: s,
+        getInitialStyle: () => {
+          if (!r)
+            return {};
+          const { from: i, to: u } = o();
+          return !i || i === u ? {} : f(i, u) ? { visibility: "hidden" } : {};
+        }
+      };
+    }, [t, r, o]);
+    return /* @__PURE__ */ g(y, { value: l, children: n });
+  }
+);
 export {
-  f as Ssgoi
+  C as Ssgoi
 };

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

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function f(...t){return o=>{t.forEach(e=>e?.(o))}}function c(t,o){const e={};for(const n of Object.keys(o)){const r=t.style[n];r&&(e[n]=r)}return e}exports.combineRefs=f;exports.forkStyleFromElement=c;

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

@@ -0,0 +1,17 @@
+function f(...o) {
+  return (t) => {
+    o.forEach((e) => e?.(t));
+  };
+}
+function c(o, t) {
+  const e = {};
+  for (const n of Object.keys(t)) {
+    const r = o.style[n];
+    r && (e[n] = r);
+  }
+  return e;
+}
+export {
+  f as combineRefs,
+  c as forkStyleFromElement
+};

package/dist/types.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core/dist/types.cjs");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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("./core/dist/types.cjs");exports.isCssAnimation=i.isCssAnimation;exports.isMultiAnimation=i.isMultiAnimation;exports.isSingleAnimation=i.isSingleAnimation;exports.isTickAnimation=i.isTickAnimation;exports.normalizeSchedule=i.normalizeSchedule;exports.normalizeToMultiAnimation=i.normalizeToMultiAnimation;

package/dist/types.js

@@ -1,11 +1,9 @@
-import { isCssAnimation as e, isMultiSpring as t, isSingleSpring as a, isTickAnimation as l, normalizeMultiSpringSchedule as o, normalizeToMultiSpring as r, validateAnimationMode as m, validateSpringItem as S } from "./core/dist/types.js";
+import { isCssAnimation as o, isMultiAnimation as m, isSingleAnimation as t, isTickAnimation as a, normalizeSchedule as e, normalizeToMultiAnimation as l } from "./core/dist/types.js";
 export {
-  e as isCssAnimation,
-  t as isMultiSpring,
-  a as isSingleSpring,
-  l as isTickAnimation,
-  o as normalizeMultiSpringSchedule,
-  r as normalizeToMultiSpring,
-  m as validateAnimationMode,
-  S as validateSpringItem
+  o as isCssAnimation,
+  m as isMultiAnimation,
+  t as isSingleAnimation,
+  a as isTickAnimation,
+  e as normalizeSchedule,
+  l as normalizeToMultiAnimation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ssgoi/react",
-  "version": "4.0.0",
+  "version": "4.2.0",
   "description": "React bindings for SSGOI - Native app-like page transitions for React applications",
   "private": false,
   "type": "module",
@@ -78,7 +78,7 @@
   "dependencies": {
     "unplugin": "^2.3.2",
     "@babel/core": "^7.26.10",
-    "@ssgoi/core": "^4.0.0"
+    "@ssgoi/core": "^4.2.0"
   },
   "devDependencies": {
     "@types/babel__core": "^7.20.5",