motionary 7.1.0 → 7.2.0

package/docs/ROADMAP.md

@@ -3,7 +3,7 @@
 7.0 已发布：移除 6.9 弃用项、按效果包拆分入口（`motionary/fx/*`）、着色器背景默认 WebGPU（自动回退 WebGL2 → Canvas 2D），`motionary` 与 `use-scroll-animate` 同时成为 npm `latest`。下面是 7.1 → 8.0 的计划，每个版本一个特效主题 + 一组新的动画组件。
 
 - ✅ **v7.1** — 音乐可视化：频谱柱、波形、节拍脉冲、唱片旋转；新组件 音乐播放器、音量旋钮、均衡器。
-- **v7.2** — 数据可视化动效：柱状 / 折线 / 环形 / 桑基图入场与数值过渡；新组件 仪表盘（Gauge）、迷你走势图（Sparkline）、KPI 指标卡。
+- ✅ **v7.2** — 数据可视化动效：柱状 / 折线 / 环形 / 桑基图入场与数值过渡；新组件 仪表盘（Gauge）、迷你走势图（Sparkline）、KPI 指标卡。
 - **v7.3** — 电商动效：飞入购物车、价格翻牌、库存脉冲、优惠券撕开；新组件 购物车抽屉、商品图库、限时倒计时。
 - **v7.4** — 聊天 / 社交：输入中气泡、表情回应飘升、已读回执、消息撤回；新组件 消息列表、头像叠放、通知铃铛。
 - **v7.5** — 游戏化：成就解锁、经验条、宝箱开启、幸运转盘；新组件 排行榜、徽章墙、抽奖机。

package/docs/components.md

@@ -753,6 +753,30 @@ enableAudio(document.querySelector('audio'));   // optional: without it the visu
 - `<usa-lyrics for time>`: `time`, `lines`; `usa:seek` (`{ time }`); `parseLRC(text)`.
 - Music: `waveform-scope` · `radial-spectrum` (`bars`) · `spectrum-mirror` (`bars`, `gap`) · `sound-particles` (`max`) · `beat-bounce` (`amount`) · `vinyl-spin` (`rpm`); `syntheticSample(t)`, `musicSample(t)`.
 
+### v7.2 Widgets: bar chart, gauge, sparkline, KPI (`components/widgets`) + data-viz motion (`motionary/fx/chart`)
+
+```html
+<usa-bar-chart values="12,19,8,15,22" labels="Mon,Tue,Wed,Thu,Fri" unit="k"></usa-bar-chart>
+<usa-gauge value="72" unit="%" label="CPU" zones="60:#22c55e,85:#f59e0b,100:#ef4444"></usa-gauge>
+<usa-sparkline values="3,5,4,8,6,9,12" variant="area"></usa-sparkline>
+<usa-kpi label="Revenue" value="$48.2k" delta="+12.5%" trend="4,6,5,9,8,12" caption="vs last month"></usa-kpi>
+
+<usa-fx effect="bars-grow" trigger="enter"><svg>…</svg></usa-fx>
+<usa-fx effect="line-draw" trigger="enter"><svg>…</svg></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerChartPack } from 'motionary/fx/chart';
+defineWidgets(); registerChartPack();
+chart.data = [{ label: 'Mon', value: 18 }, { label: 'Tue', value: 9 }];   // glides
+gauge.value = 91; kpi.value = '$52.0k'; spark.data = [4, 8, 6, 12];
+```
+- `<usa-bar-chart values labels unit max horizontal>`: `data`.
+- `<usa-gauge value min max unit label zones>`: `value`, `zoneColor(v)`.
+- `<usa-sparkline values variant color label>`: `data`; `SPARK_VARIANTS`, `sparkPoints(values, w, h, pad)`.
+- `<usa-kpi label value delta invert trend caption locale>`: `value`.
+- Chart: `bars-grow` (`axis`, `stagger`, `duration`) · `line-draw` (`duration`, `stagger`) · `ring-sweep` · `dots-pop` · `number-roll` · `sankey-flow` (loop); `parseFigure(text)`.
+
 ## Frameworks
 
 Custom elements work in every framework. Register once (e.g. in your entry file), then use the tags.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "motionary",
-  "version": "7.1.0",
+  "version": "7.2.0",
   "description": "Motionary (formerly use-scroll-animate): dependency-free scroll animations + 94 animated Web Components — 214 scroll-reveal presets, card/click/button morphs, physics, page transitions, generative & sound-reactive backgrounds, cursor/gesture effects, themes, micro-interactions, <usa-player>, WebGL. React, Vue, Svelte, Solid, Angular or plain HTML.",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -208,6 +208,16 @@
         "default": "./dist/components/fx-music.cjs"
       }
     },
+    "./fx/chart": {
+      "import": {
+        "types": "./dist/components/fx-chart.d.ts",
+        "default": "./dist/components/fx-chart.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-chart.d.cts",
+        "default": "./dist/components/fx-chart.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -648,6 +658,16 @@
         "default": "./dist/components/fx-music.cjs"
       }
     },
+    "./components/fx-chart": {
+      "import": {
+        "types": "./dist/components/fx-chart.d.ts",
+        "default": "./dist/components/fx-chart.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-chart.d.cts",
+        "default": "./dist/components/fx-chart.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",