@ray-js/components 1.7.56-beta.5 → 1.7.56-beta.7

package/lib/Animated/index.d.ts

@@ -1,12 +1,5 @@
 /**
  * Animated - 纯净底层动画组件
- *
- * 只提供三个核心方法：
- * - setProperty(property, value): 设置动画属性
- * - setStyle(style): 设置样式
- * - setText(text): 设置文本内容
- *
- * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
  */
 import React from 'react';
 import type { AnimatedViewRef, AnimatedTextRef, AnimatedProps } from './types';

package/lib/Animated/index.js

@@ -5,17 +5,11 @@ import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
+/* eslint-disable import/no-named-as-default */
 /**
  * Animated - 纯净底层动画组件
- *
- * 只提供三个核心方法：
- * - setProperty(property, value): 设置动画属性
- * - setStyle(style): 设置样式
- * - setText(text): 设置文本内容
- *
- * 可以配合任何动画库使用（GSAP、Anime.js、Framer Motion 等）
  */
-import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useMemo, useCallback, useEffect } from 'react';
 import TyAnimatedComponent from './native/ty-animated';
 
 // 小程序 API 声明
@@ -43,14 +37,40 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     mode = 'view',
     onAnimationStart,
     onAnimationEnd,
-    // 核心触摸事件（只保留最常用的三个）
+    // 核心触摸事件
     onClick,
     onTouchStart,
-    onTouchEnd
+    onTouchEnd,
+    onTouchMove,
+    onTouchCancel,
+    // onLongPress,
+    lockOnClick
+    // lockOnLongPress,
   } = props;
-  const callbackRef = useRef(onAnimationEnd);
+
+  // 使用队列管理多个 play() 的回调
+  // 因为基础库会触发多次 finish 事件（旧动画被打断 + 新动画完成）
+  // 当前动画的回调
+  // 同一时间只有一个动画在执行，新动画会打断旧动画
+  const currentCallbackRef = useRef(null);
   const componentIdRef = useRef(id || "animated-".concat(Math.random().toString(36).slice(2, 11)));
 
+  // 组件卸载时清理未完成的动画 Promise
+  useEffect(() => {
+    return () => {
+      const callback = currentCallbackRef.current;
+      if (callback) {
+        // console.log(`[Animated][${Date.now()}] 组件卸载，resolve 未完成的动画 Promise`)
+        callback({
+          detail: {
+            unmounted: true
+          }
+        });
+        currentCallbackRef.current = null;
+      }
+    };
+  }, []);
+
   // 提取文本内容（当 mode='text' 时）
   const textContent = useMemo(() => {
     if (mode !== 'text' || !children) return undefined;
@@ -59,23 +79,24 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     }
     return undefined;
   }, [mode, children]);
+
+  /**
+   * 获取 DOM 实例
+   */
+  const getDomInstance = () => {
+    try {
+      var _getCurrentPages;
+      const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
+      if (!pages || pages.length === 0) return null;
+      const currentPage = pages[pages.length - 1];
+      if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
+      return currentPage.selectComponent("#".concat(componentIdRef.current));
+    } catch (error) {
+      console.error('[Animated] 获取组件实例失败:', error);
+      return null;
+    }
+  };
   useImperativeHandle(ref, () => {
-    /**
-     * 获取 DOM 实例
-     */
-    const getDomInstance = () => {
-      try {
-        var _getCurrentPages;
-        const pages = (_getCurrentPages = getCurrentPages) === null || _getCurrentPages === void 0 ? void 0 : _getCurrentPages();
-        if (!pages || pages.length === 0) return null;
-        const currentPage = pages[pages.length - 1];
-        if (!(currentPage !== null && currentPage !== void 0 && currentPage.selectComponent)) return null;
-        return currentPage.selectComponent("#".concat(componentIdRef.current));
-      } catch (error) {
-        console.error('[Animated] 获取组件实例失败:', error);
-        return null;
-      }
-    };
     return {
       /**
        * 设置样式（直通通道）
@@ -84,13 +105,12 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
        * ref.current.setStyle({ color: 'red', fontSize: '16px', border: '1px solid #ccc' })
        */
       setStyle(styleValue, callback) {
-        return new Promise(resolve => {
+        return new Promise((resolve, reject) => {
           var _inst$setCustomStyle;
           const inst = getDomInstance();
           if (!inst) {
             console.warn('No DOM instance found');
-            resolve();
-            if (callback) callback();
+            reject();
             return;
           }
 
@@ -109,6 +129,19 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             return;
           }
 
+          // 如果有动画在执行，setStyle 会清空 transition，打断动画
+          // 主动 resolve 当前 Promise
+          const animCallback = currentCallbackRef.current;
+          if (animCallback) {
+            console.log("[Animated][".concat(Date.now(), "] setStyle \u6253\u65AD\u52A8\u753B\uFF0Cresolve Promise"));
+            animCallback({
+              detail: {
+                interruptedBySetStyle: true
+              }
+            });
+            currentCallbackRef.current = null;
+          }
+
           // setData 完成后的回调
           (_inst$setCustomStyle = inst.setCustomStyle) === null || _inst$setCustomStyle === void 0 || _inst$setCustomStyle.call(inst, styleString, () => {
             // 调用用户回调
@@ -192,14 +225,23 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
         animation.play = () => {
           return new Promise(resolve => {
             var _inst$__applyAnimData;
-            // 导出动画数据
-            const animationData = animation.export();
+            // 如果有旧的 Promise，主动 resolve 它（被新动画打断）
+            const oldCallback = currentCallbackRef.current;
+            if (oldCallback) {
+              console.log("[Animated][".concat(Date.now(), "] \u65B0\u52A8\u753B\u5F00\u59CB\uFF0C\u628A\u4E4B\u524D\u7684\u52A8\u753B\u7ED9\u4E2D\u65AD\u6389"));
+              oldCallback({
+                detail: {
+                  interrupted: true
+                }
+              });
+            }
 
-            // 包装完成回调
+            // 保存新的 callback
+            currentCallbackRef.current = resolve;
+            console.log("[Animated][".concat(Date.now(), "] play() \u8C03\u7528"));
 
-            callbackRef.current = event => {
-              resolve(event);
-            };
+            // 导出动画数据
+            const animationData = animation.export();
             (_inst$__applyAnimData = inst.__applyAnimData) === null || _inst$__applyAnimData === void 0 || _inst$__applyAnimData.call(inst, animationData);
           });
         };
@@ -221,7 +263,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             const query = ty.createSelectorQuery();
             query.select("#".concat(componentIdRef.current)).boundingClientRect(rect => {
               resolve(rect || null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getBoundingClientRect 执行失败:', error);
             resolve(null);
@@ -244,7 +288,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
             const query = ty.createSelectorQuery();
             query.select("#".concat(componentIdRef.current)).fields(fields, res => {
               resolve(res || null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getFields 执行失败:', error);
             resolve(null);
@@ -281,7 +327,9 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
                 }
               });
               resolve(Object.keys(styles).length > 0 ? styles : null);
-            }).exec();
+            }).exec(() => {
+              // exec callback
+            });
           } catch (error) {
             console.error('[Animated] getComputedStyle 执行失败:', error);
             resolve(null);
@@ -294,22 +342,73 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
   // 处理 customStyle，避免传入 undefined
   const customStyleValue = useMemo(() => {
     if (!style) return undefined;
+    console.log('customStyle', style, typeof style === 'object' ? styleToString(style) : style);
     return typeof style === 'object' ? styleToString(style) : style;
-  }, []);
+  }, [style]);
   const handleAnimationEnd = useCallback(event => {
-    if (callbackRef.current && typeof callbackRef.current === 'function') {
-      const temp = callbackRef.current;
-      callbackRef.current = null;
-      temp(event);
+    const callback = currentCallbackRef.current;
+    if (callback) {
+      callback(event);
+      currentCallbackRef.current = null;
     }
     if (onAnimationEnd) {
       onAnimationEnd();
     }
-  }, [onAnimationEnd, callbackRef.current]);
+  }, [onAnimationEnd]);
+
+  // 包装 onClick，如果启用了 lockOnClick
+  const wrappedOnClick = useMemo(() => {
+    console.log('wrappedOnClick', !!onClick);
+    if (!onClick) return undefined;
+    if (lockOnClick) {
+      // 声明式锁：包装 onClick，完成后通过 setData 触发解锁
+      return async event => {
+        const startTime = Date.now();
+        console.log("[Animated.React][".concat(startTime, "] \uD83C\uDFAF onClick \u5F00\u59CB\u6267\u884C"));
+        try {
+          await onClick(event);
+          // console.log(
+          //   `[Animated.React][${Date.now()}] onClick 执行完成，耗时: ${Date.now() - startTime}ms`
+          // )
+        } catch (error) {
+          console.error("[Animated.React][".concat(Date.now(), "] onClick \u6267\u884C\u5931\u8D25:"), error);
+          throw error;
+        } finally {
+          // 等待事件执行完成，自动解锁
+          await new Promise(resolve => {
+            const inst = getDomInstance();
+            inst.__unlockEvent('click', resolve);
+          });
+          // console.log('click 已解锁')
+        }
+      };
+    }
+    return onClick;
+  }, [onClick, lockOnClick]);
+
+  // 自动检测哪些事件需要加锁
+  const autoLockEvents = useMemo(() => {
+    const events = [];
+
+    // 通过 prop 声明
+    if (lockOnClick) {
+      events.push('click');
+    }
+    // if (lockOnLongPress) {
+    //   events.push('longPress')
+    // }
+
+    if (events.length > 0) {
+      console.log("[Animated][".concat(Date.now(), "] \u81EA\u52A8\u52A0\u9501\u4E8B\u4EF6:"), events);
+    }
+    return events;
+  }, [onClick, lockOnClick]);
   const eventBindings = {};
-  if (onClick) eventBindings['bind:click'] = onClick;
+  if (wrappedOnClick) eventBindings['bind:click'] = wrappedOnClick;
   if (onTouchStart) eventBindings['bind:touchstart'] = onTouchStart;
   if (onTouchEnd) eventBindings['bind:touchend'] = onTouchEnd;
+  if (onTouchMove) eventBindings['bind:touchmove'] = onTouchMove;
+  if (onTouchCancel) eventBindings['bind:touchcancel'] = onTouchCancel;
   if (onAnimationStart) eventBindings['bind:animationbegin'] = onAnimationStart;
   eventBindings['bind:animationfinish'] = handleAnimationEnd;
   return (
@@ -317,14 +416,17 @@ const AnimatedBase = /*#__PURE__*/forwardRef((props, ref) => {
     // @ts-ignore - 小程序自定义组件
     React.createElement(TyAnimatedComponent, _extends({
       id: componentIdRef.current,
-      __mode: mode
+      __mode: mode,
+      __componentId: componentIdRef.current
     }, className ? {
-      customClass: className
+      __className: className
     } : {}, customStyleValue ? {
-      customStyle: customStyleValue
+      __style: customStyleValue
     } : {}, mode === 'text' && textContent !== undefined ? {
       __text: textContent
-    } : {}, eventBindings), mode === 'view' ? children : null)
+    } : {}, autoLockEvents ? {
+      __autoLockEvents: autoLockEvents
+    } : [], eventBindings), mode === 'view' ? children : null)
   );
 });
 AnimatedBase.displayName = 'AnimatedBase';
@@ -356,4 +458,4 @@ const Animated = {
 };
 export default Animated;
 
-// 导出类型
+// 导出类型和工具函数

package/lib/Animated/native/ty-animated/index.js

@@ -2,6 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import "core-js/modules/es.string.trim.js";
 import "core-js/modules/esnext.iterator.constructor.js";
 import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
 import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.dom-collections.iterator.js";
 // @ts-nocheck
@@ -28,20 +29,6 @@ Component({
       type: String,
       value: ''
     },
-    // 兼容 FastView 接口
-    customStyle: {
-      type: String,
-      value: ''
-    },
-    customClass: {
-      type: String,
-      value: '',
-      observer: function (v) {
-        this.setData({
-          __className: v
-        });
-      }
-    },
     onAnimationStart: {
       type: null,
       value: null
@@ -62,26 +49,40 @@ Component({
   },
   lifetimes: {
     attached() {
-      // 组件初始化：将 customStyle 的初始值复制到 __style
-      const initialStyle = this.properties.customStyle || '';
-      if (initialStyle) {
-        this.setData({
-          __style: initialStyle
-        });
-      }
+      // 初始化
+      // 为每个事件类型维护独立的锁
+      this._locks = {};
+      this._componentId = this.data.__componentId || this.id;
+      this._excludedTouchStartIdentifier = new Set();
     },
     detached() {
-      // 清理工作
+      //
     }
   },
   methods: {
+    /**
+     * 原生层事件锁：解锁（支持指定事件类型）
+     * @param eventType - 事件类型，如 'click', 'longPress'
+     * @param resolve - Promise resolve 函数
+     */
+    __unlockEvent(eventType, resolve) {
+      if (!eventType) {
+        console.warn('[TyAnimated] __unlockEvent: eventType is required');
+        resolve();
+        return;
+      }
+
+      // 清除内部事件锁状态
+      this._locks[eventType] = false;
+      resolve();
+    },
     /**
      * 事件处理器
      */
     __handleTiggerEvent(eventName, e) {
       // 触发自定义事件，让外部可以监听
       this.triggerEvent(eventName, e, {
-        // bubbles: true,
+        bubbles: false,
         composed: true
       });
     },
@@ -120,7 +121,7 @@ Component({
       if (!styleString) return {};
       const result = {};
       const styles = styleString.split(';').filter(Boolean);
-      for (const style of styles) {
+      styles.forEach(style => {
         const colonIndex = style.indexOf(':');
         if (colonIndex > 0) {
           const key = style.substring(0, colonIndex).trim();
@@ -129,7 +130,7 @@ Component({
             result[key] = value;
           }
         }
-      }
+      });
       return result;
     },
     /**
@@ -151,20 +152,20 @@ Component({
 
       // 合并样式
       const currentStyle = this._parseStyle(this.data.__style || '');
+      console.log('_style', this.data.__style);
+      console.log('currentStyle', currentStyle);
       const newStyle = this._parseStyle(value);
       const mergedStyle = _objectSpread(_objectSpread({}, currentStyle), newStyle);
       let mergedStyleString = this._styleToString(mergedStyle);
       if (mergedStyleString === this.data.__style && this.data.__animData !== null) {
-        console.log('[TyAnimated] 样式值相同但有动画数据，添加时间戳强制更新');
         // 添加一个不影响渲染的注释，使样式字符串不同
         mergedStyleString = "".concat(mergedStyleString, ";/* ").concat(Date.now(), " */");
       }
-
-      // 一次性 setData，不嵌套
       this.setData({
-        __style: mergedStyleString,
-        __animData: null // 总是清空动画数据
-      }, callback);
+        __style: mergedStyleString
+      }, () => {
+        if (callback) callback();
+      });
     },
     /**
      * 设置文本内容（__mode='text' 时使用）
@@ -213,15 +214,57 @@ Component({
         __animData: animData
       });
     },
-    // 核心触摸事件处理（只保留最常用的）
-    __onClick(e) {
-      this.__handleTiggerEvent('click', e);
-    },
     __onTouchStart(e) {
+      /**
+       * 因为end事件会合成tap事件的原因，可能会出现
+       * click -> lock -> 执行内部逻辑 ---- 过程中可能会有touchstart事件(identifier: 1) -> unlock -> click完成 -> touchend(identifier: 1) -> 合成了tap -> click(额外的异常点击)
+       * 逻辑层的锁 锁不住视图层的事件监听
+       *
+       * 方案：将在click事件锁住后的所有touchStart保存起来，在tap的时候对比set中是否有相同的序列id，有的话就直接return，并重置set
+       */
+
+      // 只有在锁住的状态下存储 touchStart 的序列值
+      if (this._locks['click']) {
+        const touchId = e.touches[0].identifier; // 每个触摸序列的唯一ID
+        // console.log('------1-1--1-1-1-1-:::', touchId)
+        this._excludedTouchStartIdentifier.add(touchId);
+      }
       this.__handleTiggerEvent('touchstart', e);
     },
+    __onTouchMove(e) {
+      this.__handleTiggerEvent('touchmove', e);
+    },
     __onTouchEnd(e) {
+      // console.log('=====2---22-2-2-::::', e.changedTouches[0].identifier)
+
       this.__handleTiggerEvent('touchend', e);
+    },
+    __onTouchCancel(e) {
+      this.__handleTiggerEvent('touchcancel', e);
+    },
+    // 核心触摸事件处理（只保留最常用的）
+    __onClick(e) {
+      Date.now();
+      const eventType = 'click';
+      // console.log('---3----3-3--:::', e.changedTouches[0].identifier)
+      // 对比set中是否有相同的序列id，有的话就直接return，并重置set
+      e.changedTouches[0].identifier;
+      const isExceptiontrigger = this._excludedTouchStartIdentifier.has(e.changedTouches[0].identifier);
+      if (isExceptiontrigger) {
+        this._excludedTouchStartIdentifier.clear();
+        return;
+      }
+
+      // 检查该事件类型是否已加锁，锁住直接return
+      if (this._locks[eventType]) {
+        // console.log(`[TyAnimated][${now}] ⚠️ 事件被锁拦截: ${eventType}`)
+        return;
+      }
+      // 如果发现click事件需要自动开解锁，在第一次click的时候就自动加上锁
+      if (this.data.__autoLockEvents.includes(eventType)) {
+        this._locks[eventType] = true;
+      }
+      this.__handleTiggerEvent(eventType, e);
     }
   }
 });

package/lib/Animated/native/ty-animated/index.tyml

@@ -5,21 +5,25 @@
     class="{{__className}}"
     style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    bindtap="__onClick"
   >
     <slot></slot>
   </view>
   <text
     wx:else
     id="rootText"
-    class="{{__className}}"
+    class="container {{__className}}"
     style="{{__style}}"
     animation="{{__animData}}"
-    bindtap="__onClick"
     bindtouchstart="__onTouchStart"
     bindtouchend="__onTouchEnd"
+    bindtouchmove="__onTouchMove"
+    bindtouchcancel="__onTouchCancel"
+    bindtap="__onClick"
   >{{__text}}</text>
 </block>
 

package/lib/Animated/types.d.ts

@@ -2,13 +2,14 @@ import type React from 'react';
 /**
  * 触摸事件处理器（只保留核心事件）
  *
- * 注：只提供最常用的三个事件（onClick, onTouchStart, onTouchEnd）
- * 如需其他事件（如 onLongPress, onTouchMove 等），请在 Animated 的子元素上直接绑定
+ * 注：只提供最常用的事件 (onClick)
  */
 export interface TouchEventHandler {
     onClick?: (e: TouchEvent) => any;
     onTouchStart?: (e: TouchEvent) => any;
     onTouchEnd?: (e: TouchEvent) => any;
+    onTouchMove?: (e: TouchEvent) => any;
+    onTouchCancel?: (e: TouchEvent) => any;
 }
 interface TargetType {
     id: string;
@@ -168,29 +169,35 @@ export interface AnimatedViewRef {
      * ```
      */
     animate: (options?: TOptions) => IAnimation & {
-        play(): Promise<void>;
+        play(): Promise<{
+            detail?: {
+                interruptedBySetStyle?: boolean;
+                interrupted?: boolean;
+            };
+            [key: string]: any;
+        }>;
     };
     /**
-   * 获取元素的布局位置和尺寸信息
-   * 基于小程序 SelectorQuery.boundingClientRect API
-   *
-   * @returns Promise<BoundingClientRect | null>
-   *
-   * @example
-   * ```tsx
-   * const rect = await boxRef.current?.getBoundingClientRect()
-   * console.log(rect?.left, rect?.top, rect?.width, rect?.height)
-   *
-   * // 使用位置信息实现动画
-   * if (rect) {
-   *   const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
-   *   const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
-   *   boxRef.current?.animate((anim) => {
-   *     anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
-   *   })
-   * }
-   * ```
-   */
+     * 获取元素的布局位置和尺寸信息
+     * 基于小程序 SelectorQuery.boundingClientRect API
+     *
+     * @returns Promise<BoundingClientRect | null>
+     *
+     * @example
+     * ```tsx
+     * const rect = await boxRef.current?.getBoundingClientRect()
+     * console.log(rect?.left, rect?.top, rect?.width, rect?.height)
+     *
+     * // 使用位置信息实现动画
+     * if (rect) {
+     *   const centerX = window.innerWidth / 2 - rect.left - rect.width / 2
+     *   const centerY = window.innerHeight / 2 - rect.top - rect.height / 2
+     *   boxRef.current?.animate((anim) => {
+     *     anim.translateX(centerX).translateY(centerY).scale(2).step({ duration: 300 })
+     *   })
+     * }
+     * ```
+     */
     getBoundingClientRect: () => Promise<BoundingClientRect | null>;
     /**
      * 获取元素的详细信息（包括样式、属性等）
@@ -308,5 +315,21 @@ export interface AnimatedProps extends TouchEventHandler {
     onAnimationStart?: () => void;
     /** 动画结束回调 */
     onAnimationEnd?: () => void;
+    /**
+     * 点击事件自动加锁
+     * 防止快速点击导致的重复触发
+     *
+     * @example
+     * ```tsx
+     * <Animated.View
+     *   ref={ref}
+     *   onClick={async () => {
+     *     await doSomething()
+     *   }}
+     *   lockOnClick  // 自动加锁，回调执行完自动解锁
+     * />
+     * ```
+     */
+    lockOnClick?: boolean;
 }
 export {};

package/lib/Animated-old/animation.d.ts

@@ -0,0 +1,47 @@
+interface IAnimation {
+  // transform
+  translate(x?: number, y?: number): this
+  translateX(x?: number): this
+  translateY(y?: number): this
+  translateZ(z?: number): this
+
+  rotate(angle: number): this
+  rotateX(angle: number): this
+  rotateY(angle: number): this
+  rotateZ(angle: number): this
+  rotate3d(x: number, y: number, z: number, angle: number): this
+
+  scale(x?: number, y?: number): this
+  scaleX(x?: number): this
+  scaleY(y?: number): this
+  scaleZ(z?: number): this
+  scale3d(x?: number, y?: number, z?: number): this
+
+  skew(x?: number, y?: number): this
+  skewX(x?: number): this
+  skewY(y?: number): this
+
+  matrix(...args: number[]): this
+  matrix3d(...args: number[]): this
+
+  // style
+  opacity(opacity: number): this
+  width(value: number | string): this
+  height(value: number | string): this
+  top(value: number | string): this
+  left(value: number | string): this
+  right(value: number | string): this
+  bottom(value: number | string): this
+  backgroundColor(value: string): this
+
+  // step / export
+  step(
+    options?: Partial<{
+      transformOrigin: string
+      duration: number
+      timingFunction: string
+      delay: number
+    }>
+  ): this
+  export(): { actions: any[] }
+}