@infinityfx/lively 4.0.0-beta.15 → 4.0.0-beta.16

package/dist/layout/layout-group.js

@@ -1,3 +1,3 @@
 "use client";
-import{jsx as e}from"react/jsx-runtime";import{useRef as n,useState as r,useLayoutEffect as t,Children as o,isValidElement as c,cloneElement as i}from"react";import u from"../animatable.js";import{Groups as d}from"./morph.js";function s(e,n,r=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...r,e];let c=n(t[e],o);if(c||(c=s(t[e].nodes,n,o)),c)return c}}function l(e,n){return s(e,((e,r)=>{if(e.key===n)return r}))||null}function a(e,n){let r=e[n[0]];for(let e=1;e<n.length&&r;e++)r=r.nodes[n[e]];return r}function m(e,n,r,t){var o;const c=n[n.length-1],i=n.length>1?null===(o=a(e,n.slice(0,-1)))||void 0===o?void 0:o.nodes:e;i&&(t?i.splice(c,r,t):i.splice(c,r))}function f({tree:e,nodes:n,mounting:r,partialIndex:t=[],keys:u=new Set}){return o.forEach(n,((n,o)=>{const d=c(n),s=d&&(Array.isArray(n.props.children)||c(n.props.children)),m=d&&n.type.isLively&&"id"in n.props,p=[...t,o],h=s&&!m?i(n,void 0,[]):n,y=m?n.props.id:"$l."+p.join("");if(m){const n=l(e,y);if(null===n)r.set(y,{node:h,index:p});else{const r=a(e,n);r&&(r.node=h)}}else{const n=a(e,p);n&&n.key.startsWith("$l.")?n.node=h:r.set(y,{node:h,index:p})}s&&!m&&f({tree:e,nodes:n.props.children,mounting:r,partialIndex:p,keys:u}),u.add(y)})),u}function p(e){return e.map((e=>c(e.node)?e.nodes.length?i(e.node,{key:e.key},p(e.nodes)):i(e.node,{key:e.key}):e.node))}function h({children:o,transition:c,initialMount:i=!0}){var a;const h=n(!i),y=n(null),[g,v]=r({}),k=n([]),x=n(new Map),w=n(void 0),j=n(0),E=n(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,n)=>{z.has(n)||x.current.delete(n)})),s(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&y.current){for(const e of y.current.children){const n=null===(a=e.current)||void 0===a?void 0:a.id,r=E.current.has(n);if(e.current&&(r&&z.has(n)&&(e.current.timeline.mounted=!0,E.current.delete(n)),r&&e.current.timeline.mounted)){const n=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,n),e.current.group){const n=d[e.current.group].get(e.current.timeline);n&&(n.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const n=(e=!0)=>{E.current.forEach((e=>{const n=l(k.current,e);n&&m(k.current,n,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(n,e):n(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:n},r)=>{m(k.current,n,0,{key:r,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(y.current){for(const n of y.current.children)h.current&&n.current&&(n.current.timeline.mounted=!0),(null===(e=n.current)||void 0===e?void 0:e.id)&&n.current.timeline.mounted&&n.current.adaptive&&null!==l(k.current,n.current.id)&&n.current.timeline.transition(void 0,c);h.current=!1}})),e(u,{ref:y,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
+import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,useLayoutEffect as t,Children as o,isValidElement as i,cloneElement as c}from"react";import u from"../animatable.js";import{Groups as s}from"./morph.js";function d(e,r,n=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...n,e];let i=r(t[e],o);if(i||(i=d(t[e].nodes,r,o)),i)return i}}function l(e,r){return d(e,((e,n)=>{if(e.key===r)return n}))||null}function a(e,r){let n=e[r[0]];for(let e=1;e<r.length&&n;e++)n=n.nodes[r[e]];return n}function m(e,r,n,t){var o;const i=r[r.length-1],c=r.length>1?null===(o=a(e,r.slice(0,-1)))||void 0===o?void 0:o.nodes:e;c&&(t?c.splice(i,n,t):c.splice(i,n))}function f({tree:e,nodes:r,mounting:n,partialIndex:t=[],keys:u=new Set}){return o.forEach(r,((r,o)=>{const s=i(r),d=s&&(Array.isArray(r.props.children)||i(r.props.children)),m=s&&r.type.isLively&&"id"in r.props,p=[...t,o],h=d&&!m?c(r,void 0,[]):r,g=m?r.props.id:"$l."+p.join("");if(m){const r=l(e,g);if(null===r)n.set(g,{node:h,index:p});else{const n=a(e,r);n&&(n.node=h)}}else{const r=a(e,p);r&&r.key.startsWith("$l.")?r.node=h:n.set(g,{node:h,index:p})}d&&f({tree:e,nodes:r.props.children,mounting:n,partialIndex:p,keys:u}),u.add(g)})),u}function p(e){const r=e.map((e=>i(e.node)?e.nodes.length?c(e.node,{key:e.key},p(e.nodes)):c(e.node,{key:e.key}):e.node));return r.length>1?r:r[0]}function h({children:o,transition:i,initialMount:c=!0}){var a;const h=r(!c),g=r(null),[y,v]=n({}),k=r([]),x=r(new Map),w=r(void 0),j=r(0),E=r(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,r)=>{z.has(r)||x.current.delete(r)})),d(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&g.current){for(const e of g.current.children){const r=null===(a=e.current)||void 0===a?void 0:a.id,n=E.current.has(r);if(e.current)if(n&&z.has(r))E.current.delete(r),e.current.trigger("mount",{immediate:!0}),e.current.timeline.mounted=!0;else if(n&&e.current.timeline.mounted){const r=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,r),e.current.group){const r=s[e.current.group].get(e.current.timeline);r&&(r.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const r=(e=!0)=>{E.current.forEach((e=>{const r=l(k.current,e);r&&m(k.current,r,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(r,e):r(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:r},n)=>{m(k.current,r,0,{key:n,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(!g.current)return;let r,n=g.current.children.slice();for(;r=n.pop();)h.current&&r.current&&(r.current.timeline.mounted=!0),(null===(e=r.current)||void 0===e?void 0:e.id)&&r.current.timeline.mounted&&r.current.adaptive&&null!==l(k.current,r.current.id)&&(r.current.timeline.transition(void 0,i),n.push(...r.current.children));h.current=!1})),e(u,{ref:g,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
 //# sourceMappingURL=layout-group.js.map

package/dist/types/animatable.d.ts

@@ -24,8 +24,23 @@ type SharedProps<T extends string = any> = {
     } & PlayOptions)[];
     animate?: ClipProperties | Clip;
     initial?: AnimatableInitials;
+    /**
+     * How much to stagger child elements' animations by in seconds.
+     *
+     * @default 0.1
+     */
     stagger?: number;
+    /**
+     * Integer number, after which child elements no longer stagger their animation, but play all at once.
+     *
+     * @default 10
+     */
     staggerLimit?: number;
+    /**
+     * Whether scale animations will cause artifacting to `border-radius` and/or child elements.
+     *
+     * @default true
+     */
     deform?: boolean;
     disabled?: boolean;
     paused?: boolean;
@@ -33,12 +48,43 @@ type SharedProps<T extends string = any> = {
 export type AnimatableProps<T extends string = any> = {
     ref?: React.Ref<AnimatableType>;
     children: React.ReactNode;
+    /**
+     * A unique identifier within a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group) parent.
+     */
     id?: string;
+    /**
+     * Where in the order of a cascade animation this component should play it's animations.
+     */
     order?: number;
+    /**
+     * Whether to participate in cascade animations and inherit animation properties from a parent.
+     *
+     * @default false
+     */
     inherit?: boolean;
+    /**
+     * Whether to **not** participate in cascading animations.
+     *
+     * @default false
+     */
     passthrough?: boolean;
+    /**
+     * Whether to animate layout changes when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
+     *
+     * @default false
+     */
     adaptive?: boolean;
+    /**
+     * Which properties to keep track of for layout change animations.
+     *
+     * @default ['x', 'y', 'sx', 'sy', 'rotate', 'color', 'backgroundColor', 'borderRadius', 'opacity']
+     */
     cachable?: CachableKey[];
+    /**
+     * Whether to disable automatic mount/unmount triggering.
+     *
+     * @default false
+     */
     manual?: boolean;
     onAnimationEnd?: (animation: T | 'animate') => void;
 } & SharedProps<T>;
@@ -48,6 +94,11 @@ type AnimatableContext = {
     remove: (child: React.RefObject<AnimatableType | null>) => void;
 } & SharedProps;
 export declare const AnimatableContext: import("react").Context<AnimatableContext | null>;
+/**
+ * Wrap around a react component to animate it.
+ *
+ * @see {@link https://lively.infinityfx.dev/docs/components/animatable}
+ */
 declare function Animatable<T extends string>(props: AnimatableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Animatable {
     var isLively: boolean;

package/dist/types/animate.d.ts

@@ -2,8 +2,16 @@ import { AnimatableProps } from "./animatable";
 import Clip, { ClipProperties } from "./core/clip";
 type AnimateProps = {
     animations?: (ClipProperties | Clip)[];
+    /**
+     * The number of levels to cascade down animations.
+     */
     levels?: number;
 } & Omit<AnimatableProps, 'animations' | 'animate' | 'order'>;
+/**
+ * Automated cascade animations.
+ *
+ * @see {@link https://lively.infinityfx.dev/docs/components/animate}
+ */
 declare function Animate({ children, animations, levels, ...props }: AnimateProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Animate {
     var isLively: boolean;

package/dist/types/layout/layout-group.d.ts

@@ -1,6 +1,16 @@
 import type { TransitionOptions } from "../core/track";
+/**
+ * Animate layout changes or unmounts.
+ *
+ * @see {@link https://lively.infinityfx.dev/docs/components/layout-group}
+ */
 export default function LayoutGroup({ children, transition, initialMount }: {
     children: React.ReactNode;
     transition?: Omit<TransitionOptions, 'reverse'>;
+    /**
+     * Whether to play mount mount animations on first render
+     *
+     * @default true
+     */
     initialMount?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/morph.d.ts

@@ -6,7 +6,15 @@ export declare const Groups: {
         state: 'mounted' | 'unmounted' | 'collected';
     }>;
 };
+/**
+ * Peform layout morphs between components when one mounts and unmount.
+ *
+ * @see {@link https://lively.infinityfx.dev/docs/components/morph}
+ */
 declare function Morph({ children, group, transition, ...props }: {
+    /**
+     * Global identifier, components with the same group will morph between eachother.
+     */
     group: string;
     transition?: Omit<TransitionOptions, 'reverse'>;
 } & AnimatableProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/layout/typable.d.ts

@@ -1,4 +1,9 @@
 import { AnimatableProps } from "../animatable";
+/**
+ * Wrap around text to animate it.
+ *
+ * @see {@link https://lively.infinityfx.dev/docs/components/typable}
+ */
 declare function Typable({ children, stagger, staggerLimit, ...props }: AnimatableProps): import("react/jsx-runtime").JSX.Element;
 declare namespace Typable {
     var isLively: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/lively",
-	"version": "4.0.0-beta.15",
+	"version": "4.0.0-beta.16",
 	"type": "module",
 	"description": "Feature complete, lightweight react animation library.",
 	"main": "dist/index.js",
@@ -65,8 +65,8 @@
 		"@rollup/plugin-typescript": "^11.1.6",
 		"@types/react": "npm:types-react@^19.0.0-rc.1",
 		"@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
-		"react": "^19.0.0-rc-ab2135c7-20240724",
-		"react-dom": "^19.0.0-rc-ab2135c7-20240724",
+		"react": "^19.0.0-rc-1631855f-20241023",
+		"react-dom": "^19.0.0-rc-1631855f-20241023",
 		"rollup": "^4.18.0",
 		"rollup-plugin-delete": "^2.0.0",
 		"rollup-plugin-preserve-directives": "^0.4.0",