motionary 7.1.0 → 7.3.0

package/docs/ROADMAP.md

@@ -3,8 +3,8 @@
 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.3** — 电商动效：飞入购物车、价格翻牌、库存脉冲、优惠券撕开；新组件 购物车抽屉、商品图库、限时倒计时。
+- ✅ **v7.2** — 数据可视化动效：柱状 / 折线 / 环形 / 桑基图入场与数值过渡；新组件 仪表盘（Gauge）、迷你走势图（Sparkline）、KPI 指标卡。
+- ✅ **v7.3** — 电商动效：飞入购物车、价格翻牌、库存脉冲、优惠券撕开；新组件 购物车抽屉、商品图库、限时倒计时。
 - **v7.4** — 聊天 / 社交：输入中气泡、表情回应飘升、已读回执、消息撤回；新组件 消息列表、头像叠放、通知铃铛。
 - **v7.5** — 游戏化：成就解锁、经验条、宝箱开启、幸运转盘；新组件 排行榜、徽章墙、抽奖机。
 - **v7.6** — 地图与地理：路线绘制、旋转地球、标记脉冲、飞线；新组件 3D 地球、位置卡片。

package/docs/components.md

@@ -753,6 +753,56 @@ 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)`.
+
+### v7.3 Widgets: add-to-cart, cart drawer, product gallery, countdown (`components/widgets`) + e-commerce motion (`motionary/fx/shop`)
+
+```html
+<usa-cart-drawer id="cart" currency="$"></usa-cart-drawer>
+<div data-product>
+  <img src="shoe.jpg" alt="Sneaker">
+  <usa-add-to-cart cart="#cart" item='{"name":"Sneaker","price":89}'></usa-add-to-cart>
+</div>
+<usa-product-gallery zoom="2"><img src="front.jpg" alt="Front"><img src="side.jpg" alt="Side"></usa-product-gallery>
+<usa-countdown to="2026-12-24T00:00:00" units="d,h,m,s"></usa-countdown>
+
+<usa-fx effect="fly-to-cart" trigger="click" options='{"to":"#cart"}'><img src="shoe.jpg" alt=""></usa-fx>
+<usa-fx effect="price-flip" trigger="enter"><span data-from="129.00">$89.00</span></usa-fx>
+```
+```js
+import { defineWidgets } from 'motionary/components/widgets';
+import { registerShopPack } from 'motionary/fx/shop';
+defineWidgets(); registerShopPack();
+cart.add({ id: 'tee', name: 'T-shirt', price: 24, img: 'tee.jpg' }); cart.toggle(true);
+```
+- `<usa-add-to-cart cart item from label added hold>`: `add()`; `usa:add`.
+- `<usa-cart-drawer currency label items>`: `items`, `total`, `count`, `open`, `add()`, `removeItem(id)`, `toggle()`; `cartTotal(items)`.
+- `<usa-product-gallery index zoom nozoom>`: `index`, `count`, `go()`, `next()`, `prev()`; `wrapIndex(i, n)`.
+- `<usa-countdown to seconds units labels label>`: `left`, `start()`, `stop()`; `usa:tick`, `usa:done`; `splitTime(sec)`.
+- Shop: `fly-to-cart` (`to`, `duration`, `lift`) · `price-flip` (`stagger`, `duration`; `data-from`) · `stock-pulse` (`color`, `period`) · `sale-shine` · `badge-pop`; `arcPath(ax, ay, bx, by, lift, steps)`.
+
 ## 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.3.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,26 @@
         "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"
+      }
+    },
+    "./fx/shop": {
+      "import": {
+        "types": "./dist/components/fx-shop.d.ts",
+        "default": "./dist/components/fx-shop.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-shop.d.cts",
+        "default": "./dist/components/fx-shop.cjs"
+      }
+    },
     "./components/reveal": {
       "import": {
         "types": "./dist/components/reveal.d.ts",
@@ -648,6 +668,26 @@
         "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/fx-shop": {
+      "import": {
+        "types": "./dist/components/fx-shop.d.ts",
+        "default": "./dist/components/fx-shop.js"
+      },
+      "require": {
+        "types": "./dist/components/fx-shop.d.cts",
+        "default": "./dist/components/fx-shop.cjs"
+      }
+    },
     "./components/lite": {
       "import": {
         "types": "./dist/components/lite.d.ts",