react-native-flux-desktop 0.0.0-stage → 0.1.4

package/README.md

@@ -1,3 +1,172 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+# react-native-flux-desktop
+
+> 🖥️ A self-drawn desktop render stack — build desktop apps in React (JSX); every pixel is painted by Skia onto a window from our self-developed native base. No Electron, no Qt, no native controls.
+
+![version](https://img.shields.io/badge/version-0.1.3-blue) ![license](https://img.shields.io/badge/license-MIT-green) ![runtime](https://img.shields.io/badge/pure%20React%C2%B7native%20pixels%C2%B7no%20Electron-ff69b4)
+
+**Depends on:** `@napi-rs/canvas` (Skia raster) · `react-reconciler` · `yoga-layout` · `react` (peer)
+**This is the UI core** — the `-chart` / `-pro` / `-dev` / `-web3` / `-webview` packages all take it as a peer dependency to pull core symbols back.
+
+> 📦 This repo is the **compiled distribution**: `index.js` (napi loader) + `*.node` (native binary) + `dist/src` (built library JS + type declarations). Source lives in a separate repo; only the ready-to-`require` artifact is published here.
+
+[中文文档](./README.zh-CN.md)
+
+---
+
+## Gallery
+
+<table>
+  <tr>
+    <td align="center"><b>Welcome · dark</b><br/><img src="./shots/gallery-dark.png" alt="Gallery hero (dark)" /></td>
+    <td align="center"><b>Welcome · light</b><br/><img src="./shots/gallery-light.png" alt="Gallery hero (light)" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Design tokens</b><br/><img src="./shots/theme.png" alt="Theme token system" /></td>
+    <td align="center"><b>Charts · Dendrogram</b><br/><img src="./shots/dendrogram.png" alt="Dendrogram chart" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Web3 · CoinIcon</b><br/><img src="./shots/coinicon.png" alt="Coin icon grid" /></td>
+    <td align="center"><b>Web3 · Crypto live dashboard</b><br/><img src="./shots/crypto-live.png" alt="Crypto live dashboard" /></td>
+  </tr>
+</table>
+
+*The screenshots above span the whole ecosystem (core UI + chart + web3), rendered entirely by this self-drawn stack — no browser involved.*
+
+> 🎮 **See it live.** Every screenshot above — and 100+ more interactive demos — run in the gallery showcase app. Browse its source at **[react-native-flux-desktop-gallery](https://github.com/keyonByIos/react-native-flux-desktop-gallery)**.
+
+## What it is
+
+`react-native-flux-desktop` is a **custom React Renderer**: it implements the `react-reconciler` host interface, maps the element tree into a self-managed **scene graph**, lays it out with **Yoga**, rasterizes every pixel with **Skia**, and blits the result onto a window driven by our **self-developed native base** (`napi-rs` layer). It ships with 80+ self-drawn components aligned with Ant Design v5's API & token model, a full theme system, and an animation library.
+
+## Highlights
+
+- **80+ self-drawn components** — `Button` / `Input` / `Select` / `Menu` / `Table` / `Modal` / `Drawer` / `Tabs` / `DatePicker` / `Tree` / `Upload` …
+- **Token theme system** — light / dark × density (compact / loose) × primary color, three orthogonal stackable axes, one `useToken` call to read them.
+- **Animation library** — tween (`useTween`), spring (`useSpring`), enter presets (`FadeIn` / `MoveIn` / `ScaleIn`), stagger (`Stagger`), FLIP, sequence orchestration.
+- **Multi-window + tray** — many windows per process, system tray, single-instance lock with "wake the old window".
+- **Lightweight persistence** — a built-in KV store (`Application.user` / `kv`), no external database needed.
+- **CPU / GPU backends** — the same drawing code, switchable presentation tier per machine / scenario, with DPR capping.
+- **Zero embedded browser** — the core has no WebView; opt in via the separate `-webview` package when you need it.
+
+## Install
+
+```bash
+npm install react-native-flux-desktop
+```
+
+Pulls in `@napi-rs/canvas` / `react-reconciler` / `yoga-layout`; `react@18` is a peer. The native binary is published per platform (currently: Windows x64 MSVC).
+
+## Usage
+
+Declare a window with `<Window>` at the root, then commit the whole tree with `render()`:
+
+```tsx
+import React from 'react';
+import { render, Window, View, Text, Pressable } from 'react-native-flux-desktop';
+
+function App() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <Window title="Hello Flux" width={520} height={420}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text style={{ fontSize: 22 }}>count: {count}</Text>
+        <Pressable onPress={() => setCount((c) => c + 1)}
+          style={{ marginTop: 16, padding: 12, borderRadius: 8, backgroundColor: '#1677ff' }}>
+          <Text style={{ color: '#fff' }}>+1</Text>
+        </Pressable>
+      </View>
+    </Window>
+  );
+}
+
+render(React.createElement(App));
+```
+
+Wrap the component tree with the token theme provider:
+
+```tsx
+import { FluxProvider } from 'react-native-flux-desktop';
+render(<FluxProvider dark><MyApp /></FluxProvider>);
+```
+
+## Capabilities
+
+**Native layer (napi)**
+- Windows: create / close / multi-window, title, size / position, maximize / minimize / restore, borderless / transparent, DPR, cursor, taskbar icon (AUMID)
+- System tray: create / swap icon / tooltip, event callbacks · clipboard read/write · offscreen capture (`grabPixels`)
+- Key-value persistence: `kvOpen` / `kvPut` / `kvGet` / `kvDel` / `kvKeys` / `kvCompact`
+
+**JS layer (`dist/src`)**
+- `render` / `hotReload` / `grabAll` · `Window` / `View` / `Text` / `Image` / `Pressable` / `ScrollView`
+- `Application` global singleton: window registry · `config` (theme / prefs / render tier) · `user` (persistence) · `relaunch` · `log`
+- Theme: `FluxProvider` / `useToken` / `createTheme` · Animation: `useTween` / `useSpring` / `FadeIn` / `Stagger` / `Flip` …
+- Fonts: `registerFonts` / `listFontFamilies` · Logging: `configureLogger` / `readLogTail` · Runtime metrics: `systemStats` · Single instance: `acquireSingleInstance` / `onSecondInstance`
+
+See `index.d.ts` and `dist/src/index.d.ts` for the full symbol list.
+
+## Renderer modes: CPU / GPU
+
+The same drawing code supports two presentation paths, switchable at runtime (persisted via `Application.config`; takes effect after restart):
+
+- **CPU** — `softbuffer` per-frame blit; best compatibility, no GPU-driver dependency.
+- **GPU** — Skia Ganesh + GL `flush/swap` direct present; cheaper for large / frequently-repainted scenes.
+
+DPR (resolution multiple) can be capped to control cost; in GPU mode the window size is bound to the native scale.
+
+## Fonts & assets
+
+Fonts are declared as app resources in **`app.json`**, injected via env at entry, and registered before the first frame by `registerFonts()`:
+
+```jsonc
+{
+  "defaultFont": "",                 // global default family (empty = built-in)
+  "fonts": [
+    { "family": "Arial", "file": "C:/Windows/Fonts/arial.ttf", "bold": "C:/Windows/Fonts/arialbd.ttf" },
+    { "family": "MySans", "file": "assets/fonts/my-sans.ttf" } // relative path is auto-embedded with assets/
+  ]
+}
+```
+
+- **Global font**: `Application.setFont(family)` → writes the preference + restart (affects global layout metrics).
+- **Local font**: `<Text style={{ fontFamily: 'Arial' }}>` → hot-swaps just that subtree, immediately.
+- **Tofu fallback chain**: when the primary font lacks a glyph, it falls back to a built-in CJK-capable font, so Chinese still renders under a Latin-only font.
+
+## Ecosystem (separated packages)
+
+Component families are split into independently published packages, all taking this package as an **optional peerDependency** to pull core symbols back — keeping the core lean, opt-in, and sharing a single React instance:
+
+| Package | Role | Deps |
+| --- | --- | --- |
+| **react-native-flux-desktop** | Render stack + base UI kit + theme + animation + native capabilities (this repo) | — |
+| **react-native-flux-desktop-chart** | Chart suite (Skia-drawn, `@ant-design/charts`-style data model) | core |
+| **react-native-flux-desktop-pro** | Higher-order composites (ProTable / ProForm / ProCard / TrendCard …) | core + chart |
+| **react-native-flux-desktop-dev** | Developer / diagnostic components (CodeBlock / Markdown / JsonViewer / DiffViewer / Terminal / MemMonitor …) | core + chart |
+| **react-native-flux-desktop-web3** | Web3 / crypto UI (CoinIcon / Address / TokenPrice / NFTCard …) | core |
+| **react-native-flux-desktop-webview** | Optional WebView (Chromium / WebView2, view-only + JS bridge; ships its own `.node`) | core |
+| **react-native-flux-desktop-ffi** | Optional native-library calls (`libloading` + `libffi`: declarative signatures → call any C-ABI DLL/dylib/.so export; ships its own `.node`) | core (optional) |
+| **react-native-flux-desktop-packer** | Packaging CLI (`flux-pack`: Go launcher + `go:embed` → self-contained `.exe`) | devDependency |
+| **react-native-flux-desktop-gallery** | Runnable demo showcase app (100+ demos) consuming all of the above — [view demos here](https://github.com/keyonByIos/react-native-flux-desktop-gallery) | all packages |
+
+All repos live at `github.com/keyonByIos/<package-name>`.
+
+## Package into .exe
+
+Use `react-native-flux-desktop-packer`: install as a devDependency, set `output` / `main` in `app.json`, then:
+
+```bash
+npx flux-pack
+```
+
+Produces a self-contained Windows `.exe` (Go launcher + embedded payload, including the `assets/` tree).
+
+## Notes
+
+- **Platform**: the native binary currently targets **Windows x64 (MSVC)**; Node `>= 18`.
+- The `-webview` child surface is based on WebView2 (Chromium); Windows needs the **WebView2 Runtime** installed. It is a separate opt-in package — the core never bundles it.
+- This repo is a compiled artifact; `dist/` and `*.node` are the published content (kept out of `.gitignore` intentionally so `git add` includes them).
+
+## License
+
+MIT
+
+> 中文文档见 [README.zh-CN.md](./README.zh-CN.md)。

package/README.zh-CN.md

@@ -0,0 +1,172 @@
+# react-native-flux-desktop（中文文档）
+
+> 🖥️ 纯自绘的桌面渲染栈 —— 用 React（JSX）写桌面应用，每一个像素都由 Skia 直接绘制在自研底座的窗口上。不依赖 Electron / Qt / 任何系统原生控件。
+
+![版本](https://img.shields.io/badge/version-0.1.3-blue) ![许可证](https://img.shields.io/badge/license-MIT-green) ![运行时](https://img.shields.io/badge/%E7%BA%AFReact%C2%B7%E5%8E%9F%E7%94%9F%E5%83%8F%E7%B4%A0%C2%B7%E9%9D%9EElectron-ff69b4)
+
+**依赖：** `@napi-rs/canvas`（Skia 光栅）· `react-reconciler` · `yoga-layout` · `react`（peer）
+**本包即 UI 核心** —— `-chart` / `-pro` / `-dev` / `-web3` / `-webview` 等独立包都以它为 peer 依赖回取核心符号。
+
+> 📦 本仓库为**编译分发产物**：`index.js`（napi 装载器）+ `*.node`（原生二进制）+ `dist/src`（编译后的库 JS + 类型声明）。源码在独立仓库，此处只发布可直接 `require` / `npm install` 的成品。
+
+[English](./README.md)
+
+---
+
+## 界面一览
+
+<table>
+  <tr>
+    <td align="center"><b>欢迎页 · 暗色</b><br/><img src="./shots/gallery-dark.png" alt="Gallery 首页（暗色）" /></td>
+    <td align="center"><b>欢迎页 · 亮色</b><br/><img src="./shots/gallery-light.png" alt="Gallery 首页（亮色）" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>设计 Token</b><br/><img src="./shots/theme.png" alt="主题 Token 体系" /></td>
+    <td align="center"><b>图表 · 水平生态树</b><br/><img src="./shots/dendrogram.png" alt="水平生态树图" /></td>
+  </tr>
+  <tr>
+    <td align="center"><b>Web3 · 币种图标</b><br/><img src="./shots/coinicon.png" alt="币种图标墙" /></td>
+    <td align="center"><b>Web3 · 币价实时看板</b><br/><img src="./shots/crypto-live.png" alt="币价实时看板" /></td>
+  </tr>
+</table>
+
+*以上截图横跨整个生态（核心 UI + 图表 + Web3），全部由这套自绘栈渲染 —— 全程无浏览器参与。*
+
+> 🎮 **看实际运行效果。** 以上每一张截图 —— 以及 100+ 个可交互 demo —— 都跑在 gallery 展示应用里。源码见 **[react-native-flux-desktop-gallery](https://github.com/keyonByIos/react-native-flux-desktop-gallery)**。
+
+## 它是什么
+
+`react-native-flux-desktop` 是一个**自绘的 React Renderer**：它实现 `react-reconciler` 的宿主接口，把元素树映射成自定义**场景树**，经 **Yoga** 布局、由 **Skia** 逐像素光栅化，最后 blit 到**自研底座**（`napi-rs` 原生层）驱动的窗口上屏。内置 80+ 自绘组件（对齐 Ant Design v5 的 API 与 token）、完整的主题系统与动画库。
+
+## 特性亮点
+
+- **纯自绘组件族** 80+：`Button` / `Input` / `Select` / `Menu` / `Table` / `Modal` / `Drawer` / `Tabs` / `DatePicker` / `Tree` / `Upload` …
+- **token 主题系统**：明 / 暗 × 密度（紧凑 / 宽松）× 主色，三维正交可叠加，`useToken` 一处取色。
+- **动画库**：补间 `useTween` · 弹簧 `useSpring` · 进场 `FadeIn` / `MoveIn` / `ScaleIn` · 错峰 `Stagger` · FLIP · 序列编排 · 预设墙。
+- **多窗口 + 托盘**：一进程多窗、系统托盘、单实例锁与「次实例唤起老窗」。
+- **轻量持久化**：内置 KV 存储（`Application.user` / `kv`），无需外部数据库。
+- **CPU / GPU 双后端**：同一套绘制，按机器 / 场景切换上屏档位，支持 DPR 封顶。
+- **零内嵌浏览器**：核心不含 WebView，需要时以独立可选包 `-webview` 引入。
+
+## 安装
+
+```bash
+npm install react-native-flux-desktop
+```
+
+自动带来 `@napi-rs/canvas` / `react-reconciler` / `yoga-layout`；`react@18` 为 peer。原生二进制按平台随包发布（当前：Windows x64 MSVC）。
+
+## 用法
+
+根节点用 `<Window>` 声明一扇窗，`render()` 提交整棵树：
+
+```tsx
+import React from 'react';
+import { render, Window, View, Text, Pressable } from 'react-native-flux-desktop';
+
+function App() {
+  const [count, setCount] = React.useState(0);
+  return (
+    <Window title="Hello Flux" width={520} height={420}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
+        <Text style={{ fontSize: 22 }}>点我：{count}</Text>
+        <Pressable onPress={() => setCount((c) => c + 1)}
+          style={{ marginTop: 16, padding: 12, borderRadius: 8, backgroundColor: '#1677ff' }}>
+          <Text style={{ color: '#fff' }}>+1</Text>
+        </Pressable>
+      </View>
+    </Window>
+  );
+}
+
+render(React.createElement(App));
+```
+
+用 token 主题包裹组件族：
+
+```tsx
+import { FluxProvider } from 'react-native-flux-desktop';
+render(<FluxProvider dark><MyApp /></FluxProvider>);
+```
+
+## 能力清单
+
+**原生层（napi）**
+- 窗口：创建 / 关闭 / 多窗、标题、尺寸 / 位置、最大化 / 最小化 / 还原、无边框 / 透明、DPR、光标、任务栏图标（AUMID）
+- 系统托盘：建 / 换图标 / 提示、事件回抛 · 剪贴板读写 · 离屏抓帧（`grabPixels`）
+- 键值持久化：`kvOpen` / `kvPut` / `kvGet` / `kvDel` / `kvKeys` / `kvCompact`
+
+**JS 层（`dist/src`）**
+- `render` / `hotReload` / `grabAll` · `Window` / `View` / `Text` / `Image` / `Pressable` / `ScrollView`
+- `Application` 全局单例：窗口注册表 · `config`（主题 / 偏好 / 渲染档位）· `user`（持久化）· `relaunch` · `log`
+- 主题：`FluxProvider` / `useToken` / `createTheme` · 动画：`useTween` / `useSpring` / `FadeIn` / `Stagger` / `Flip` …
+- 字体：`registerFonts` / `listFontFamilies` · 日志：`configureLogger` / `readLogTail` · 运行时取数：`systemStats` · 单实例：`acquireSingleInstance` / `onSecondInstance`
+
+完整符号见 `index.d.ts` 与 `dist/src/index.d.ts`。
+
+## 渲染档位：CPU / GPU
+
+同一套绘制支持两种上屏方式，运行时可切换（`Application.config` 持久化偏好，切换后重启生效）：
+
+- **CPU** — `softbuffer` 逐帧 blit，兼容性最好、无 GPU 驱动依赖。
+- **GPU** — Skia Ganesh + GL `flush/swap` 直呈，大画面 / 高频重绘更省。
+
+DPR（分辨率倍数）可封顶以控成本；GPU 模式下窗口尺寸恒绑原生 scale。
+
+## 字体与资源
+
+字体在 **`app.json`** 里声明为应用资源，经入口注入环境变量，首帧前由 `registerFonts()` 注册：
+
+```jsonc
+{
+  "defaultFont": "",                 // 全局默认族（留空走内置）
+  "fonts": [
+    { "family": "Arial", "file": "C:/Windows/Fonts/arial.ttf", "bold": "C:/Windows/Fonts/arialbd.ttf" },
+    { "family": "MySans", "file": "assets/fonts/my-sans.ttf" } // 相对路径随包 assets/ 自动内嵌
+  ]
+}
+```
+
+- **全局字体**：`Application.setFont(family)` → 写偏好 + 重启（影响全局布局度量）。
+- **局部字体**：`<Text style={{ fontFamily: 'Arial' }}>` → 该子树热更新，即时生效。
+- **豆腐兜底链**：主字体缺字时自动回落内置含 CJK 的字体，纯拉丁字体下中文仍正常显示。
+
+## 生态（已拆分的独立包）
+
+组件族按能力拆成若干**独立发布包**，均以本包为 **peerDependency**（可选）回取核心符号 —— 保持核心精简、按需引入、共享单一 React 实例：
+
+| 包 | 角色 | 依赖 |
+| --- | --- | --- |
+| **react-native-flux-desktop** | 渲染栈 + 基础 UI 组件族 + 主题 + 动画 + 原生能力（本仓库） | — |
+| **react-native-flux-desktop-chart** | 图表族（Skia 自绘，`@ant-design/charts` 风格数据模型） | core |
+| **react-native-flux-desktop-pro** | 高阶复合组件（ProTable / ProForm / ProCard / TrendCard …） | core + chart |
+| **react-native-flux-desktop-dev** | 开发者 / 诊断组件（CodeBlock / Markdown / JsonViewer / DiffViewer / Terminal / MemMonitor …） | core + chart |
+| **react-native-flux-desktop-web3** | Web3 / 加密 UI（CoinIcon / Address / TokenPrice / NFTCard …） | core |
+| **react-native-flux-desktop-webview** | 可选 WebView（Chromium / WebView2，view-only + JS 双向桥；自带 `.node`） | core |
+| **react-native-flux-desktop-ffi** | 可选原生库调用（`libloading` + `libffi`：声明式签名 → 调用任意 C ABI 的 DLL/dylib/so 导出；自带 `.node`） | core（可选） |
+| **react-native-flux-desktop-packer** | 打包 CLI（`flux-pack`：Go launcher + `go:embed` → 自包含 `.exe`） | devDependency |
+| **react-native-flux-desktop-gallery** | 可运行的 demo 展示应用（100+ 个）消费以上全部包 —— [在此查看示例](https://github.com/keyonByIos/react-native-flux-desktop-gallery) | 全部包 |
+
+各仓库均在 `github.com/keyonByIos/<包名>`。
+
+## 打包成 exe
+
+用 `react-native-flux-desktop-packer`：装为 devDependency，在 `app.json` 配 `output` / `main`，运行：
+
+```bash
+npx flux-pack
+```
+
+产出自包含的 Windows `.exe`（Go 启动器 + 内嵌 payload，含 `assets/` 资源树）。
+
+## 说明
+
+- **平台**：当前原生二进制面向 **Windows x64（MSVC）**；Node `>= 18`。
+- `-webview` 子面基于 WebView2（Chromium），Windows 需系统装有 **WebView2 Runtime**；它是独立可选包，主包默认不含。
+- 本仓库为编译产物，`dist/` 与 `*.node` 即发布内容（已从 `.gitignore` 放开，`git add` 会纳入）。
+
+## 许可证
+
+MIT
+
+> English 版见 [README.md](./README.md)。

package/dist/src/anim/FadeIn.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from '../types';
+export declare function useEnter(duration?: number): number;
+export interface FadeInProps {
+    children: React.ReactNode;
+    duration?: number;
+    style?: StyleProp<ViewStyle>;
+    /** 透传给内部容器：供浮层实测自身尺寸（如 Tooltip 居中对齐触发器） */
+    onLayout?: (e: {
+        nativeEvent: {
+            layout: {
+                x: number;
+                y: number;
+                w: number;
+                h: number;
+            };
+        };
+    }) => void;
+}
+export declare function FadeIn(props: FadeInProps): React.ReactElement;
+export default FadeIn;

package/dist/src/anim/FadeIn.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useEnter=useEnter,exports.FadeIn=FadeIn;const react_1=__importDefault(require("react")),react_2=require("react"),components_1=require("../components"),ticker_1=require("./ticker"),ConfigContext_1=require("../theme/ConfigContext"),easing_1=require("./easing");function useEnter(e=240){const t=(0,ConfigContext_1.useAnimationEnabled)(),[r,n]=(0,react_2.useState)(t?0:1);return(0,react_2.useEffect)(()=>{if(!t)return void n(1);let r=null,u=(0,ticker_1.subscribe)(t=>{null==r&&(r=t);const o=e<=0?1:(t-r)/e;o>=1?(n(1),u()):n((0,easing_1.easeOutCubic)(o))});return()=>u()},[e,t]),t?r:1}function FadeIn(e){const{children:t,duration:r=240,style:n,onLayout:u}=e,o=useEnter(r);return react_1.default.createElement(components_1.View,{style:[{opacity:o},n],onLayout:u},t)}exports.default=FadeIn;

package/dist/src/anim/easing.d.ts

@@ -0,0 +1,21 @@
+export type Easing = (t: number) => number;
+export declare const linear: Easing;
+export declare const easeInQuad: Easing;
+export declare const easeOutQuad: Easing;
+export declare const easeOutCubic: Easing;
+export declare const easeInOutCubic: Easing;
+/** 先快后慢带回弹，适合入场。 */
+export declare const easeOutBack: Easing;
+/** 正弦脉冲：0→1→0，适合呼吸/闪烁。 */
+export declare const sinePulse: Easing;
+/** 弹性出场（欠阻尼振荡逼近），末端多次回弹，适合俏皮入场。 */
+export declare const easeOutElastic: Easing;
+/**
+ * 阻尼弹簧闭合解（欠阻尼）：输出可 >1（过冲后回摆），t=1 强制收敛到 1。
+ * dampingRatio<1 振荡（越小越弹）；>=1 走临界阻尼无过冲。frequency 为每秒振荡周期数（越大越快到位）。
+ * 用于「一次性入场/切换」的弹簧感；实时交互/手势跟随请用 useSpring（物理积分，帧率无关）。
+ */
+export declare function spring(options?: {
+    dampingRatio?: number;
+    frequency?: number;
+}): Easing;

package/dist/src/anim/easing.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.easeOutElastic=exports.sinePulse=exports.easeOutBack=exports.easeInOutCubic=exports.easeOutCubic=exports.easeOutQuad=exports.easeInQuad=exports.linear=void 0,exports.spring=spring;const linear=e=>e;exports.linear=linear;const easeInQuad=e=>e*e;exports.easeInQuad=easeInQuad;const easeOutQuad=e=>e*(2-e);exports.easeOutQuad=easeOutQuad;const easeOutCubic=e=>1-Math.pow(1-e,3);exports.easeOutCubic=easeOutCubic;const easeInOutCubic=e=>e<.5?4*e*e*e:1-Math.pow(-2*e+2,3)/2;exports.easeInOutCubic=easeInOutCubic;const easeOutBack=e=>1+2.70158*Math.pow(e-1,3)+1.70158*Math.pow(e-1,2);exports.easeOutBack=easeOutBack;const sinePulse=e=>.5-.5*Math.cos(e*Math.PI*2);exports.sinePulse=sinePulse;const easeOutElastic=e=>{const t=2*Math.PI/3;return e<=0?0:e>=1?1:Math.pow(2,-10*e)*Math.sin((10*e-.75)*t)+1};function spring(e={}){const t=e.dampingRatio??.6,s=(e.frequency??3)*Math.PI*2;if(t>=1)return e=>e<=0?0:e>=1?1:1-Math.exp(-s*e)*(1+s*e);const a=s*Math.sqrt(1-t*t);return e=>e<=0?0:e>=1?1:1-Math.exp(-t*s*e)*(Math.cos(a*e)+t*s/a*Math.sin(a*e))}exports.easeOutElastic=easeOutElastic;

package/dist/src/anim/entrance.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from '../types';
+interface Base {
+    children: React.ReactNode;
+    duration?: number;
+    fade?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+/** 平移入场。direction = 元素「进入时的来向」：up=从下方上移落位，left=从右方左移落位。 */
+export declare function MoveIn(props: Base & {
+    direction?: 'up' | 'down' | 'left' | 'right';
+    distance?: number;
+}): React.ReactElement;
+/** 缩放入场：from → 1。 */
+export declare function ScaleIn(props: Base & {
+    from?: number;
+}): React.ReactElement;
+/** 旋转入场：from(度) → 0。 */
+export declare function RotateIn(props: Base & {
+    from?: number;
+}): React.ReactElement;
+export {};

package/dist/src/anim/entrance.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.MoveIn=MoveIn,exports.ScaleIn=ScaleIn,exports.RotateIn=RotateIn;const react_1=__importDefault(require("react")),components_1=require("../components"),FadeIn_1=require("./FadeIn");function MoveIn(e){const{children:t,direction:n="up",distance:r=24,duration:o=280,fade:a=!0,style:c}=e,s=(0,FadeIn_1.useEnter)(o),l=1-s;let u=0,i=0;"up"===n?i=r*l:"down"===n?i=-r*l:u="left"===n?r*l:-r*l;const d=[{translateX:u},{translateY:i}];return react_1.default.createElement(components_1.View,{style:[{transform:d,opacity:a?s:1},c]},t)}function ScaleIn(e){const{children:t,from:n=.8,duration:r=240,fade:o=!0,style:a}=e,c=(0,FadeIn_1.useEnter)(r),s=n+(1-n)*c;return react_1.default.createElement(components_1.View,{style:[{transform:[{scale:s}],opacity:o?c:1},a]},t)}function RotateIn(e){const{children:t,from:n=-90,duration:r=320,fade:o=!0,style:a}=e,c=(0,FadeIn_1.useEnter)(r),s=n*(1-c);return react_1.default.createElement(components_1.View,{style:[{transform:[{rotate:`${s}deg`}],opacity:o?c:1},a]},t)}

package/dist/src/anim/index.d.ts

@@ -0,0 +1,22 @@
+export { subscribe } from './ticker';
+export type { TickerCallback } from './ticker';
+export * as Easing from './easing';
+export type { Easing as EasingFn } from './easing';
+export { useAnimation } from './useAnimation';
+export type { AnimationOptions } from './useAnimation';
+export { useTween } from './useTween';
+export { FadeIn, useEnter } from './FadeIn';
+export type { FadeInProps } from './FadeIn';
+export { MoveIn, ScaleIn, RotateIn } from './entrance';
+export { useMotionValue, useSpring, useTransformTween } from './motion';
+export type { MotionOptions, TransformSpec } from './motion';
+export { Flip, useFlip } from './layout';
+export type { FlipProps, FlipOptions } from './layout';
+export { presets, styleAt } from './presets';
+export type { AnimPreset, AnimState, PresetName } from './presets';
+export { Stagger, StaggerItem } from './stagger';
+export type { StaggerProps, StaggerItemProps } from './stagger';
+export { Transition, useTransition } from './transition';
+export type { TransitionProps, TransitionOptions } from './transition';
+export { runSequence } from './sequence';
+export type { SequenceStep, SequenceHandle } from './sequence';

package/dist/src/anim/index.js

@@ -0,0 +1 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(){var e=function(t){return e=Object.getOwnPropertyNames||function(e){var t=[];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[t.length]=r);return t},e(t)};return function(t){if(t&&t.__esModule)return t;var r={};if(null!=t)for(var n=e(t),o=0;o<n.length;o++)"default"!==n[o]&&__createBinding(r,t,n[o]);return __setModuleDefault(r,t),r}}();Object.defineProperty(exports,"__esModule",{value:!0}),exports.runSequence=exports.useTransition=exports.Transition=exports.StaggerItem=exports.Stagger=exports.styleAt=exports.presets=exports.useFlip=exports.Flip=exports.useTransformTween=exports.useSpring=exports.useMotionValue=exports.RotateIn=exports.ScaleIn=exports.MoveIn=exports.useEnter=exports.FadeIn=exports.useTween=exports.useAnimation=exports.Easing=exports.subscribe=void 0;var ticker_1=require("./ticker");Object.defineProperty(exports,"subscribe",{enumerable:!0,get:function(){return ticker_1.subscribe}}),exports.Easing=__importStar(require("./easing"));var useAnimation_1=require("./useAnimation");Object.defineProperty(exports,"useAnimation",{enumerable:!0,get:function(){return useAnimation_1.useAnimation}});var useTween_1=require("./useTween");Object.defineProperty(exports,"useTween",{enumerable:!0,get:function(){return useTween_1.useTween}});var FadeIn_1=require("./FadeIn");Object.defineProperty(exports,"FadeIn",{enumerable:!0,get:function(){return FadeIn_1.FadeIn}}),Object.defineProperty(exports,"useEnter",{enumerable:!0,get:function(){return FadeIn_1.useEnter}});var entrance_1=require("./entrance");Object.defineProperty(exports,"MoveIn",{enumerable:!0,get:function(){return entrance_1.MoveIn}}),Object.defineProperty(exports,"ScaleIn",{enumerable:!0,get:function(){return entrance_1.ScaleIn}}),Object.defineProperty(exports,"RotateIn",{enumerable:!0,get:function(){return entrance_1.RotateIn}});var motion_1=require("./motion");Object.defineProperty(exports,"useMotionValue",{enumerable:!0,get:function(){return motion_1.useMotionValue}}),Object.defineProperty(exports,"useSpring",{enumerable:!0,get:function(){return motion_1.useSpring}}),Object.defineProperty(exports,"useTransformTween",{enumerable:!0,get:function(){return motion_1.useTransformTween}});var layout_1=require("./layout");Object.defineProperty(exports,"Flip",{enumerable:!0,get:function(){return layout_1.Flip}}),Object.defineProperty(exports,"useFlip",{enumerable:!0,get:function(){return layout_1.useFlip}});var presets_1=require("./presets");Object.defineProperty(exports,"presets",{enumerable:!0,get:function(){return presets_1.presets}}),Object.defineProperty(exports,"styleAt",{enumerable:!0,get:function(){return presets_1.styleAt}});var stagger_1=require("./stagger");Object.defineProperty(exports,"Stagger",{enumerable:!0,get:function(){return stagger_1.Stagger}}),Object.defineProperty(exports,"StaggerItem",{enumerable:!0,get:function(){return stagger_1.StaggerItem}});var transition_1=require("./transition");Object.defineProperty(exports,"Transition",{enumerable:!0,get:function(){return transition_1.Transition}}),Object.defineProperty(exports,"useTransition",{enumerable:!0,get:function(){return transition_1.useTransition}});var sequence_1=require("./sequence");Object.defineProperty(exports,"runSequence",{enumerable:!0,get:function(){return sequence_1.runSequence}});

package/dist/src/anim/layout.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { StyleProp, ViewStyle, TransformArray } from '../types';
+import { type Easing } from './easing';
+export interface FlipOptions {
+    duration?: number;
+    /** 传入 spring() 结果可让 FLIP 带过冲回弹 */
+    easing?: Easing;
+}
+/**
+ * 测量宿主盒绝对位置，检测跳变并产出「反演→恒等」的补间 transform。
+ * 用法：把 onLayoutAbs 挂到元素上、transform + transformOrigin:'0 0' 塞进 style。
+ */
+export declare function useFlip(options?: FlipOptions): {
+    onLayoutAbs: (e: any) => void;
+    transform: TransformArray;
+};
+export interface FlipProps extends FlipOptions {
+    children: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * 声明式 FLIP 容器：包一层 View，自动测盒 + 反演补间。
+ * transformOrigin 固定 '0 0'（左上角），使缩放把「旧盒」精确套到「新盒」上（左对齐、按比例）；
+ * 纯位移场景（尺寸不变）缩放分量恒为 1，不会拉伸子内容。
+ */
+export declare function Flip(props: FlipProps): React.ReactElement;

package/dist/src/anim/layout.js

@@ -0,0 +1 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.useFlip=useFlip,exports.Flip=Flip;const react_1=__importDefault(require("react")),react_2=require("react"),components_1=require("../components"),ticker_1=require("./ticker"),ConfigContext_1=require("../theme/ConfigContext"),easing_1=require("./easing");function useFlip(e={}){const t=e.duration??320,r=(0,ConfigContext_1.useAnimationEnabled)(),n=(0,react_2.useRef)(e.easing??easing_1.easeOutCubic);n.current=e.easing??easing_1.easeOutCubic;const a=(0,react_2.useRef)(null),[s,u]=(0,react_2.useState)([]),i=(0,react_2.useRef)(()=>{});return(0,react_2.useEffect)(()=>()=>i.current(),[]),{onLayoutAbs:e=>{const s=e.nativeEvent.layout,o=a.current;if(a.current=s,!o)return;if(!r)return i.current(),void u([]);const c=o.x-s.x,l=o.y-s.y,_=s.w>0?o.w/s.w:1,f=s.h>0?o.h/s.h:1;if(Math.abs(c)<.5&&Math.abs(l)<.5&&Math.abs(_-1)<.01&&Math.abs(f-1)<.01)return;i.current();let p=null;i.current=(0,ticker_1.subscribe)(e=>{null==p&&(p=e);const r=t<=0?1:(e-p)/t;if(r>=1)return u([]),void i.current();const a=1-n.current(r),s=[];(Math.abs(c*a)>.1||Math.abs(l*a)>.1)&&s.push({translateX:c*a},{translateY:l*a}),(Math.abs(_-1)>.01||Math.abs(f-1)>.01)&&s.push({scaleX:1+(_-1)*a},{scaleY:1+(f-1)*a}),u(s)})},transform:s}}function Flip(e){const{children:t,style:r,duration:n,easing:a}=e,{onLayoutAbs:s,transform:u}=useFlip({duration:n,easing:a});return react_1.default.createElement(components_1.View,{style:[{transform:u,transformOrigin:"0 0"},r],onLayoutAbs:s},t)}

package/dist/src/anim/motion.d.ts

@@ -0,0 +1,40 @@
+import { type Easing } from './easing';
+import { TransformArray } from '../types';
+export interface MotionOptions {
+    /** 'tween' 定时补间（默认）| 'spring' 物理弹簧 */
+    mode?: 'tween' | 'spring';
+    /** tween 时长（ms） */
+    duration?: number;
+    /** tween 缓动函数 */
+    easing?: Easing;
+    /** spring 刚度（越大越快越硬） */
+    stiffness?: number;
+    /** spring 阻尼（越大越少回弹） */
+    damping?: number;
+    /** spring 质量 */
+    mass?: number;
+}
+/**
+ * 单一订阅循环内按 mode 分支：tween 走定时缓动，spring 走半隐式欧拉积分（子步保稳）。
+ * 只在 hook 顶层调用一次 subscribe，规避「条件调用 hook」。静止即退订，不空转。
+ */
+export declare function useMotionValue(target: number, options?: MotionOptions): number;
+/** 物理弹簧值：target 变化时从当前速度继续，适合交互/手势。config 用原始值传入避免每帧换引用重启。 */
+export declare function useSpring(target: number, config?: {
+    stiffness?: number;
+    damping?: number;
+    mass?: number;
+}): number;
+/** 变换目标（各分量可选，缺省按恒等：位移 0、缩放 1、旋转 0）。 */
+export interface TransformSpec {
+    translateX?: number;
+    translateY?: number;
+    scale?: number;
+    rotate?: number;
+}
+/**
+ * 把目标变换逐分量平滑到最新值，返回可直接用于 style.transform 的数组。
+ * 分量固定调用 4 次 useMotionValue（不随 target 键增减而变），符合 hook 规则。
+ * 全部落回恒等时 parseTransform 返回 null → painter 走快速路径，静止零开销。
+ */
+export declare function useTransformTween(target: TransformSpec, options?: MotionOptions): TransformArray;

package/dist/src/anim/motion.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.useMotionValue=useMotionValue,exports.useSpring=useSpring,exports.useTransformTween=useTransformTween;const react_1=require("react"),ticker_1=require("./ticker"),ConfigContext_1=require("../theme/ConfigContext"),easing_1=require("./easing");function useMotionValue(e,t={}){const{mode:r="tween",duration:n=220,easing:u=easing_1.easeOutCubic,stiffness:s=170,damping:a=20,mass:o=1}=t,i=(0,ConfigContext_1.useAnimationEnabled)(),[c,l]=(0,react_1.useState)(e),f=(0,react_1.useRef)(c);f.current=c;const _=(0,react_1.useRef)(0),M=(0,react_1.useRef)(u);return M.current=u,(0,react_1.useEffect)(()=>{if(!i)return l(e),f.current=e,void(_.current=0);const t=f.current;if(Math.abs(t-e)<1e-4)return void l(e);let u=()=>{};if("tween"===r){let r=null;u=(0,ticker_1.subscribe)(s=>{null==r&&(r=s);const a=n<=0?1:(s-r)/n;a>=1?(l(e),f.current=e,_.current=0,u()):l(t+(e-t)*M.current(a))})}else{let t=null;u=(0,ticker_1.subscribe)(r=>{if(null==t)return void(t=r);let n=(r-t)/1e3;t=r,n>.064&&(n=.064);const i=Math.max(1,Math.ceil(n/.008)),c=n/i;let M=f.current,g=_.current;for(let t=0;t<i;t++)g+=(-s*(M-e)-a*g)/o*c,M+=g*c;f.current=M,_.current=g,Math.abs(g)<.01&&Math.abs(M-e)<.01?(l(e),f.current=e,_.current=0,u()):l(M)})}return()=>u()},[e,r,n,s,a,o,i]),i?c:e}function useSpring(e,t={}){return useMotionValue(e,{mode:"spring",...t})}function useTransformTween(e,t={}){return[{translateX:useMotionValue(e.translateX??0,t)},{translateY:useMotionValue(e.translateY??0,t)},{scale:useMotionValue(e.scale??1,t)},{rotate:`${useMotionValue(e.rotate??0,t)}deg`}]}

package/dist/src/anim/presets.d.ts

@@ -0,0 +1,98 @@
+import { TransformArray } from '../types';
+import { type Easing } from './easing';
+export interface AnimState {
+    opacity?: number;
+    translateX?: number;
+    translateY?: number;
+    scale?: number;
+    rotate?: number;
+}
+export interface AnimPreset {
+    /** 入场/退场共用时长（ms） */
+    duration: number;
+    easing: Easing;
+    /** 隐藏态（进度 0） */
+    from: AnimState;
+}
+declare const IDLE: AnimState;
+/** 按进度 p∈[0,1] 把预设插值成绘制样式（p=1 落位、p=0 隐藏态）。 */
+export declare function styleAt(preset: AnimPreset, p: number): {
+    opacity: number;
+    transform: TransformArray;
+};
+/** 预设库：命名对齐 framer-motion / antd 惯例。 */
+export declare const presets: {
+    /** 纯淡入淡出 */
+    fade: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+        };
+    };
+    /** 从下方上滑落位（最常用入场） */
+    slideUp: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            translateY: number;
+        };
+    };
+    /** 从上方下滑落位（下拉面板/通知） */
+    slideDown: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            translateY: number;
+        };
+    };
+    /** 从右侧滑入（抽屉/侧栏） */
+    slideLeft: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            translateX: number;
+        };
+    };
+    /** 从左侧滑入 */
+    slideRight: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            translateX: number;
+        };
+    };
+    /** 缩放弹出：略过冲回弹，适合气泡/弹窗 */
+    pop: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            scale: number;
+        };
+    };
+    /** 弹性放大：多次回弹，适合俏皮场合 */
+    bounce: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            scale: number;
+        };
+    };
+    /** 弹簧落位（ζ=0.7 近似不过冲） */
+    springUp: {
+        duration: number;
+        easing: Easing;
+        from: {
+            opacity: number;
+            translateY: number;
+        };
+    };
+};
+export type PresetName = keyof typeof presets;
+export { IDLE };

package/dist/src/anim/presets.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.IDLE=exports.presets=void 0,exports.styleAt=styleAt;const easing_1=require("./easing"),IDLE={opacity:1,translateX:0,translateY:0,scale:1,rotate:0};function styleAt(e,a){const t=e.from,s=(e,t)=>e+(t-e)*a;return{opacity:s(t.opacity??1,1),transform:[{translateX:s(t.translateX??0,0)},{translateY:s(t.translateY??0,0)},{scale:s(t.scale??1,1)},{rotate:`${s(t.rotate??0,0)}deg`}]}}exports.IDLE=IDLE,exports.presets={fade:{duration:240,easing:easing_1.easeOutCubic,from:{opacity:0}},slideUp:{duration:320,easing:easing_1.easeOutCubic,from:{opacity:0,translateY:24}},slideDown:{duration:320,easing:easing_1.easeOutCubic,from:{opacity:0,translateY:-24}},slideLeft:{duration:320,easing:easing_1.easeOutCubic,from:{opacity:0,translateX:24}},slideRight:{duration:320,easing:easing_1.easeOutCubic,from:{opacity:0,translateX:-24}},pop:{duration:300,easing:easing_1.easeOutBack,from:{opacity:0,scale:.8}},bounce:{duration:640,easing:easing_1.easeOutElastic,from:{opacity:0,scale:.6}},springUp:{duration:520,easing:(0,easing_1.spring)({dampingRatio:.7,frequency:2.2}),from:{opacity:0,translateY:32}}};