motionary 0.0.0-stage → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +803 -0
- package/LICENSE +21 -0
- package/README.md +218 -2
- package/README_ja.md +219 -0
- package/README_zh.md +219 -0
- package/bin/usa-codemod-5.mjs +79 -0
- package/bin/usa-codemod-6.mjs +146 -0
- package/dist/chunks/base-BaQV-2ha.cjs +436 -0
- package/dist/chunks/base-BaQV-2ha.cjs.map +1 -0
- package/dist/chunks/base-C_3cAoRz.js +404 -0
- package/dist/chunks/base-C_3cAoRz.js.map +1 -0
- package/dist/chunks/bind-B_CTL6Qn.js +22 -0
- package/dist/chunks/bind-B_CTL6Qn.js.map +1 -0
- package/dist/chunks/bind-Ui43-n2d.cjs +25 -0
- package/dist/chunks/bind-Ui43-n2d.cjs.map +1 -0
- package/dist/chunks/core-B5T0dhFH.cjs +920 -0
- package/dist/chunks/core-B5T0dhFH.cjs.map +1 -0
- package/dist/chunks/core-BGAyaY6L.cjs +265 -0
- package/dist/chunks/core-BGAyaY6L.cjs.map +1 -0
- package/dist/chunks/core-D7cVumUu.js +909 -0
- package/dist/chunks/core-D7cVumUu.js.map +1 -0
- package/dist/chunks/core-VEBw36QK.js +260 -0
- package/dist/chunks/core-VEBw36QK.js.map +1 -0
- package/dist/chunks/core-ps8uvYuN.js +181 -0
- package/dist/chunks/core-ps8uvYuN.js.map +1 -0
- package/dist/chunks/core-zq17EeCI.cjs +185 -0
- package/dist/chunks/core-zq17EeCI.cjs.map +1 -0
- package/dist/chunks/fx-Bs6IrV4Q.js +109 -0
- package/dist/chunks/fx-Bs6IrV4Q.js.map +1 -0
- package/dist/chunks/fx-lBGVtQO1.cjs +114 -0
- package/dist/chunks/fx-lBGVtQO1.cjs.map +1 -0
- package/dist/chunks/generative-D2YyhaeO.js +336 -0
- package/dist/chunks/generative-D2YyhaeO.js.map +1 -0
- package/dist/chunks/generative-DzIZq-_g.cjs +348 -0
- package/dist/chunks/generative-DzIZq-_g.cjs.map +1 -0
- package/dist/chunks/gpu-Bu7qwugO.js +380 -0
- package/dist/chunks/gpu-Bu7qwugO.js.map +1 -0
- package/dist/chunks/gpu-CenK2l6b.cjs +387 -0
- package/dist/chunks/gpu-CenK2l6b.cjs.map +1 -0
- package/dist/chunks/index-tags-DucKMQr_.js +26 -0
- package/dist/chunks/index-tags-DucKMQr_.js.map +1 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs +28 -0
- package/dist/chunks/index-tags-wv0R_vkO.cjs.map +1 -0
- package/dist/chunks/presets-BYBVJVeP.js +226 -0
- package/dist/chunks/presets-BYBVJVeP.js.map +1 -0
- package/dist/chunks/presets-CUHys3sK.cjs +233 -0
- package/dist/chunks/presets-CUHys3sK.cjs.map +1 -0
- package/dist/chunks/registry-CKNLQpwd.js +121 -0
- package/dist/chunks/registry-CKNLQpwd.js.map +1 -0
- package/dist/chunks/registry-DehBVRDV.cjs +131 -0
- package/dist/chunks/registry-DehBVRDV.cjs.map +1 -0
- package/dist/chunks/spring-CbvHfVtP.js +219 -0
- package/dist/chunks/spring-CbvHfVtP.js.map +1 -0
- package/dist/chunks/spring-Dgx187Vh.cjs +232 -0
- package/dist/chunks/spring-Dgx187Vh.cjs.map +1 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs +86 -0
- package/dist/chunks/stagger-CCFyhzSw.cjs.map +1 -0
- package/dist/chunks/stagger-DtMKo2SK.js +84 -0
- package/dist/chunks/stagger-DtMKo2SK.js.map +1 -0
- package/dist/chunks/variants-BhjyddG8.cjs +39 -0
- package/dist/chunks/variants-BhjyddG8.cjs.map +1 -0
- package/dist/chunks/variants-DRlKVHvu.js +35 -0
- package/dist/chunks/variants-DRlKVHvu.js.map +1 -0
- package/dist/components/a11y.cjs +276 -0
- package/dist/components/a11y.cjs.map +1 -0
- package/dist/components/a11y.d.cts +131 -0
- package/dist/components/a11y.d.ts +131 -0
- package/dist/components/a11y.js +259 -0
- package/dist/components/a11y.js.map +1 -0
- package/dist/components/angular.cjs +76 -0
- package/dist/components/angular.cjs.map +1 -0
- package/dist/components/angular.d.cts +1734 -0
- package/dist/components/angular.d.ts +1734 -0
- package/dist/components/angular.js +70 -0
- package/dist/components/angular.js.map +1 -0
- package/dist/components/background.cjs +659 -0
- package/dist/components/background.cjs.map +1 -0
- package/dist/components/background.css +9 -0
- package/dist/components/background.d.cts +166 -0
- package/dist/components/background.d.ts +166 -0
- package/dist/components/background.js +647 -0
- package/dist/components/background.js.map +1 -0
- package/dist/components/bridge.cjs +154 -0
- package/dist/components/bridge.cjs.map +1 -0
- package/dist/components/bridge.d.cts +63 -0
- package/dist/components/bridge.d.ts +63 -0
- package/dist/components/bridge.js +147 -0
- package/dist/components/bridge.js.map +1 -0
- package/dist/components/cards.cjs +561 -0
- package/dist/components/cards.cjs.map +1 -0
- package/dist/components/cards.css +6 -0
- package/dist/components/cards.d.cts +115 -0
- package/dist/components/cards.d.ts +115 -0
- package/dist/components/cards.js +554 -0
- package/dist/components/cards.js.map +1 -0
- package/dist/components/click.cjs +877 -0
- package/dist/components/click.cjs.map +1 -0
- package/dist/components/click.css +9 -0
- package/dist/components/click.d.cts +218 -0
- package/dist/components/click.d.ts +218 -0
- package/dist/components/click.js +863 -0
- package/dist/components/click.js.map +1 -0
- package/dist/components/depth.cjs +250 -0
- package/dist/components/depth.cjs.map +1 -0
- package/dist/components/depth.css +3 -0
- package/dist/components/depth.d.cts +86 -0
- package/dist/components/depth.d.ts +86 -0
- package/dist/components/depth.js +242 -0
- package/dist/components/depth.js.map +1 -0
- package/dist/components/effects.cjs +2258 -0
- package/dist/components/effects.cjs.map +1 -0
- package/dist/components/effects.d.cts +545 -0
- package/dist/components/effects.d.ts +545 -0
- package/dist/components/effects.js +2200 -0
- package/dist/components/effects.js.map +1 -0
- package/dist/components/feedback.cjs +442 -0
- package/dist/components/feedback.cjs.map +1 -0
- package/dist/components/feedback.css +7 -0
- package/dist/components/feedback.d.cts +144 -0
- package/dist/components/feedback.d.ts +144 -0
- package/dist/components/feedback.js +433 -0
- package/dist/components/feedback.js.map +1 -0
- package/dist/components/fx-gpu.cjs +12 -0
- package/dist/components/fx-gpu.cjs.map +1 -0
- package/dist/components/fx-gpu.d.cts +63 -0
- package/dist/components/fx-gpu.d.ts +63 -0
- package/dist/components/fx-gpu.js +5 -0
- package/dist/components/fx-gpu.js.map +1 -0
- package/dist/components/fx.cjs +169 -0
- package/dist/components/fx.cjs.map +1 -0
- package/dist/components/fx.css +3 -0
- package/dist/components/fx.d.cts +114 -0
- package/dist/components/fx.d.ts +114 -0
- package/dist/components/fx.js +156 -0
- package/dist/components/fx.js.map +1 -0
- package/dist/components/fx2.cjs +25 -0
- package/dist/components/fx2.cjs.map +1 -0
- package/dist/components/fx2.d.cts +136 -0
- package/dist/components/fx2.d.ts +136 -0
- package/dist/components/fx2.js +17 -0
- package/dist/components/fx2.js.map +1 -0
- package/dist/components/gesture.cjs +209 -0
- package/dist/components/gesture.cjs.map +1 -0
- package/dist/components/gesture.css +3 -0
- package/dist/components/gesture.d.cts +134 -0
- package/dist/components/gesture.d.ts +134 -0
- package/dist/components/gesture.js +203 -0
- package/dist/components/gesture.js.map +1 -0
- package/dist/components/interaction.cjs +424 -0
- package/dist/components/interaction.cjs.map +1 -0
- package/dist/components/interaction.css +8 -0
- package/dist/components/interaction.d.cts +115 -0
- package/dist/components/interaction.d.ts +115 -0
- package/dist/components/interaction.js +416 -0
- package/dist/components/interaction.js.map +1 -0
- package/dist/components/jsx.cjs +3 -0
- package/dist/components/jsx.cjs.map +1 -0
- package/dist/components/jsx.d.cts +53 -0
- package/dist/components/jsx.d.ts +53 -0
- package/dist/components/jsx.js +2 -0
- package/dist/components/jsx.js.map +1 -0
- package/dist/components/layout.cjs +257 -0
- package/dist/components/layout.cjs.map +1 -0
- package/dist/components/layout.css +3 -0
- package/dist/components/layout.d.cts +99 -0
- package/dist/components/layout.d.ts +99 -0
- package/dist/components/layout.js +249 -0
- package/dist/components/layout.js.map +1 -0
- package/dist/components/lazy.cjs +92 -0
- package/dist/components/lazy.cjs.map +1 -0
- package/dist/components/lazy.d.cts +48 -0
- package/dist/components/lazy.d.ts +48 -0
- package/dist/components/lazy.js +87 -0
- package/dist/components/lazy.js.map +1 -0
- package/dist/components/lite.cjs +11095 -0
- package/dist/components/lite.cjs.map +1 -0
- package/dist/components/lite.d.cts +4 -0
- package/dist/components/lite.d.ts +4 -0
- package/dist/components/lite.js +10827 -0
- package/dist/components/lite.js.map +1 -0
- package/dist/components/packs.cjs +192 -0
- package/dist/components/packs.cjs.map +1 -0
- package/dist/components/packs.css +3 -0
- package/dist/components/packs.d.cts +72 -0
- package/dist/components/packs.d.ts +72 -0
- package/dist/components/packs.js +184 -0
- package/dist/components/packs.js.map +1 -0
- package/dist/components/page.cjs +824 -0
- package/dist/components/page.cjs.map +1 -0
- package/dist/components/page.css +11 -0
- package/dist/components/page.d.cts +249 -0
- package/dist/components/page.d.ts +249 -0
- package/dist/components/page.js +799 -0
- package/dist/components/page.js.map +1 -0
- package/dist/components/perf.cjs +120 -0
- package/dist/components/perf.cjs.map +1 -0
- package/dist/components/perf.d.cts +98 -0
- package/dist/components/perf.d.ts +98 -0
- package/dist/components/perf.js +110 -0
- package/dist/components/perf.js.map +1 -0
- package/dist/components/physics.cjs +448 -0
- package/dist/components/physics.cjs.map +1 -0
- package/dist/components/physics.css +5 -0
- package/dist/components/physics.d.cts +189 -0
- package/dist/components/physics.d.ts +189 -0
- package/dist/components/physics.js +430 -0
- package/dist/components/physics.js.map +1 -0
- package/dist/components/react.cjs +96 -0
- package/dist/components/react.cjs.map +1 -0
- package/dist/components/react.d.cts +18 -0
- package/dist/components/react.d.ts +18 -0
- package/dist/components/react.js +91 -0
- package/dist/components/react.js.map +1 -0
- package/dist/components/reveal.cjs +362 -0
- package/dist/components/reveal.cjs.map +1 -0
- package/dist/components/reveal.css +5 -0
- package/dist/components/reveal.d.cts +105 -0
- package/dist/components/reveal.d.ts +105 -0
- package/dist/components/reveal.js +353 -0
- package/dist/components/reveal.js.map +1 -0
- package/dist/components/solid.cjs +86 -0
- package/dist/components/solid.cjs.map +1 -0
- package/dist/components/solid.d.cts +1751 -0
- package/dist/components/solid.d.ts +1751 -0
- package/dist/components/solid.js +82 -0
- package/dist/components/solid.js.map +1 -0
- package/dist/components/svelte.cjs +68 -0
- package/dist/components/svelte.cjs.map +1 -0
- package/dist/components/svelte.d.cts +1733 -0
- package/dist/components/svelte.d.ts +1733 -0
- package/dist/components/svelte.js +64 -0
- package/dist/components/svelte.js.map +1 -0
- package/dist/components/svg.cjs +359 -0
- package/dist/components/svg.cjs.map +1 -0
- package/dist/components/svg.css +3 -0
- package/dist/components/svg.d.cts +113 -0
- package/dist/components/svg.d.ts +113 -0
- package/dist/components/svg.js +347 -0
- package/dist/components/svg.js.map +1 -0
- package/dist/components/text.cjs +968 -0
- package/dist/components/text.cjs.map +1 -0
- package/dist/components/text.css +8 -0
- package/dist/components/text.d.cts +342 -0
- package/dist/components/text.d.ts +342 -0
- package/dist/components/text.js +947 -0
- package/dist/components/text.js.map +1 -0
- package/dist/components/timeline.cjs +109 -0
- package/dist/components/timeline.cjs.map +1 -0
- package/dist/components/timeline.css +3 -0
- package/dist/components/timeline.d.cts +155 -0
- package/dist/components/timeline.d.ts +155 -0
- package/dist/components/timeline.js +103 -0
- package/dist/components/timeline.js.map +1 -0
- package/dist/components/tokens.cjs +226 -0
- package/dist/components/tokens.cjs.map +1 -0
- package/dist/components/tokens.d.cts +74 -0
- package/dist/components/tokens.d.ts +74 -0
- package/dist/components/tokens.js +211 -0
- package/dist/components/tokens.js.map +1 -0
- package/dist/components/transitions.cjs +430 -0
- package/dist/components/transitions.cjs.map +1 -0
- package/dist/components/transitions.css +5 -0
- package/dist/components/transitions.d.cts +126 -0
- package/dist/components/transitions.d.ts +126 -0
- package/dist/components/transitions.js +423 -0
- package/dist/components/transitions.js.map +1 -0
- package/dist/components/ui.cjs +1050 -0
- package/dist/components/ui.cjs.map +1 -0
- package/dist/components/ui.css +14 -0
- package/dist/components/ui.d.cts +224 -0
- package/dist/components/ui.d.ts +224 -0
- package/dist/components/ui.js +1034 -0
- package/dist/components/ui.js.map +1 -0
- package/dist/components/vue.cjs +67 -0
- package/dist/components/vue.cjs.map +1 -0
- package/dist/components/vue.d.cts +1722 -0
- package/dist/components/vue.d.ts +1722 -0
- package/dist/components/vue.js +64 -0
- package/dist/components/vue.js.map +1 -0
- package/dist/components/webgl.cjs +459 -0
- package/dist/components/webgl.cjs.map +1 -0
- package/dist/components/webgl.css +3 -0
- package/dist/components/webgl.d.cts +133 -0
- package/dist/components/webgl.d.ts +133 -0
- package/dist/components/webgl.js +442 -0
- package/dist/components/webgl.js.map +1 -0
- package/dist/components/widgets.cjs +591 -0
- package/dist/components/widgets.cjs.map +1 -0
- package/dist/components/widgets.d.cts +110 -0
- package/dist/components/widgets.d.ts +110 -0
- package/dist/components/widgets.js +581 -0
- package/dist/components/widgets.js.map +1 -0
- package/dist/components.cjs +351 -0
- package/dist/components.cjs.map +1 -0
- package/dist/components.css +75 -0
- package/dist/components.d.cts +2997 -0
- package/dist/components.d.ts +2997 -0
- package/dist/components.js +106 -0
- package/dist/components.js.map +1 -0
- package/dist/components.umd.js +23 -0
- package/dist/components.umd.js.map +1 -0
- package/dist/element.cjs +97 -0
- package/dist/element.cjs.map +1 -0
- package/dist/element.d.cts +215 -0
- package/dist/element.d.ts +215 -0
- package/dist/element.js +95 -0
- package/dist/element.js.map +1 -0
- package/dist/element.umd.js +2 -0
- package/dist/element.umd.js.map +1 -0
- package/dist/index.cjs +149 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +425 -0
- package/dist/index.d.ts +425 -0
- package/dist/index.js +131 -0
- package/dist/index.js.map +1 -0
- package/dist/index.umd.js +15 -0
- package/dist/index.umd.js.map +1 -0
- package/dist/presets/extended.cjs +243 -0
- package/dist/presets/extended.cjs.map +1 -0
- package/dist/presets/extended.d.cts +37 -0
- package/dist/presets/extended.d.ts +37 -0
- package/dist/presets/extended.js +239 -0
- package/dist/presets/extended.js.map +1 -0
- package/dist/presets-extended.umd.js +2 -0
- package/dist/presets-extended.umd.js.map +1 -0
- package/dist/react.cjs +68 -0
- package/dist/react.cjs.map +1 -0
- package/dist/react.d.cts +158 -0
- package/dist/react.d.ts +158 -0
- package/dist/react.js +65 -0
- package/dist/react.js.map +1 -0
- package/dist/solid.cjs +93 -0
- package/dist/solid.cjs.map +1 -0
- package/dist/solid.d.cts +249 -0
- package/dist/solid.d.ts +249 -0
- package/dist/solid.js +89 -0
- package/dist/solid.js.map +1 -0
- package/dist/svelte.cjs +66 -0
- package/dist/svelte.cjs.map +1 -0
- package/dist/svelte.d.cts +243 -0
- package/dist/svelte.d.ts +243 -0
- package/dist/svelte.js +63 -0
- package/dist/svelte.js.map +1 -0
- package/dist/vue.cjs +62 -0
- package/dist/vue.cjs.map +1 -0
- package/dist/vue.d.cts +158 -0
- package/dist/vue.d.ts +158 -0
- package/dist/vue.js +60 -0
- package/dist/vue.js.map +1 -0
- package/dist/widgets.umd.js +2 -0
- package/dist/widgets.umd.js.map +1 -0
- package/docs/API.md +147 -0
- package/docs/ROADMAP.md +14 -0
- package/docs/accessibility.md +60 -0
- package/docs/components.md +564 -0
- package/docs/deprecations.md +30 -0
- package/docs/frameworks-ssr.md +100 -0
- package/docs/hybrid-apps.md +145 -0
- package/docs/images/showcase-detail.png +0 -0
- package/docs/images/showcase-grid.png +0 -0
- package/docs/images/showcase-mobile.png +0 -0
- package/docs/migration-from-aos.md +67 -0
- package/docs/migration-from-gsap-scrolltrigger.md +80 -0
- package/docs/motion-tokens.css +31 -0
- package/docs/motion-tokens.md +46 -0
- package/docs/motion.tokens.json +132 -0
- package/docs/performance.md +24 -0
- package/docs/presets.md +310 -0
- package/docs/upgrading-3.md +21 -0
- package/docs/upgrading-4.md +65 -0
- package/docs/upgrading-5.md +31 -0
- package/docs/upgrading-6.md +32 -0
- package/docs/windows-apps.md +119 -0
- package/package.json +562 -4
|
@@ -0,0 +1,249 @@
|
|
|
1
|
+
import { p as prefersReducedMotion, y as EASE_OUT, m as motionScale, x as defineElement } from '../chunks/base-C_3cAoRz.js';
|
|
2
|
+
|
|
3
|
+
/** FLIP keyframes from a previous box to the current one (pure). */
|
|
4
|
+
function flipFrames(from, to, scale = true) {
|
|
5
|
+
const dx = from.left - to.left;
|
|
6
|
+
const dy = from.top - to.top;
|
|
7
|
+
const sx = scale && to.width ? from.width / to.width : 1;
|
|
8
|
+
const sy = scale && to.height ? from.height / to.height : 1;
|
|
9
|
+
return [
|
|
10
|
+
{ transformOrigin: '0 0', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` },
|
|
11
|
+
{ transformOrigin: '0 0', transform: 'none' },
|
|
12
|
+
];
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Auto-animate a container: children that are added fade / scale in, removed
|
|
16
|
+
* ones fade out in place, and moved ones (re-sort, filter, reflow, resize)
|
|
17
|
+
* glide to their new spot — no extra code at the call site. Returns
|
|
18
|
+
* `{ disable, enable, stop }`. Reduced motion: changes apply instantly.
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* const ctl = autoAnimate(document.querySelector('ul'));
|
|
22
|
+
* list.append(item); // animates
|
|
23
|
+
*/
|
|
24
|
+
function autoAnimate(parent, o = {}) {
|
|
25
|
+
let on = true;
|
|
26
|
+
const boxes = new WeakMap();
|
|
27
|
+
const rel = (el) => {
|
|
28
|
+
const r = el.getBoundingClientRect();
|
|
29
|
+
const p = parent.getBoundingClientRect();
|
|
30
|
+
return { left: r.left - p.left, top: r.top - p.top, width: r.width, height: r.height };
|
|
31
|
+
};
|
|
32
|
+
const snap = () => Array.from(parent.children).forEach((c) => boxes.set(c, rel(c)));
|
|
33
|
+
const dur = () => (o.duration ?? 300) * motionScale();
|
|
34
|
+
const timing = () => ({ duration: dur(), easing: o.easing ?? EASE_OUT });
|
|
35
|
+
const animate = (el, frames, t = timing()) => (typeof el.animate === 'function' ? el.animate(frames, t) : null);
|
|
36
|
+
const mo = typeof MutationObserver === 'function'
|
|
37
|
+
? new MutationObserver((records) => {
|
|
38
|
+
if (!on || prefersReducedMotion() || dur() <= 0)
|
|
39
|
+
return snap();
|
|
40
|
+
const added = new Set();
|
|
41
|
+
for (const r of records) {
|
|
42
|
+
r.addedNodes.forEach((n) => n instanceof Element && n.parentElement === parent && added.add(n));
|
|
43
|
+
r.removedNodes.forEach((n) => {
|
|
44
|
+
if (!(n instanceof HTMLElement) || n.isConnected)
|
|
45
|
+
return;
|
|
46
|
+
const b = boxes.get(n);
|
|
47
|
+
if (!b)
|
|
48
|
+
return;
|
|
49
|
+
// put a ghost back at its old place and fade it out
|
|
50
|
+
n.style.position = 'absolute';
|
|
51
|
+
n.style.left = `${b.left}px`;
|
|
52
|
+
n.style.top = `${b.top}px`;
|
|
53
|
+
n.style.width = `${b.width}px`;
|
|
54
|
+
n.style.height = `${b.height}px`;
|
|
55
|
+
n.style.margin = '0';
|
|
56
|
+
n.style.pointerEvents = 'none';
|
|
57
|
+
if (getComputedStyle(parent).position === 'static')
|
|
58
|
+
parent.style.position = 'relative';
|
|
59
|
+
parent.appendChild(n);
|
|
60
|
+
n.__usaGhost = true;
|
|
61
|
+
const a = animate(n, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'scale(0.96)' }]);
|
|
62
|
+
const drop = () => {
|
|
63
|
+
n.remove();
|
|
64
|
+
for (const k of ['position', 'left', 'top', 'width', 'height', 'margin', 'pointerEvents'])
|
|
65
|
+
n.style[k] = '';
|
|
66
|
+
};
|
|
67
|
+
if (a)
|
|
68
|
+
a.finished.then(drop, drop);
|
|
69
|
+
else
|
|
70
|
+
drop();
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
Array.from(parent.children).forEach((c) => {
|
|
74
|
+
if (c.__usaGhost)
|
|
75
|
+
return;
|
|
76
|
+
if (added.has(c))
|
|
77
|
+
return void animate(c, [{ opacity: 0, transform: 'scale(0.96)' }, { opacity: 1, transform: 'none' }]);
|
|
78
|
+
const prev = boxes.get(c);
|
|
79
|
+
if (!prev)
|
|
80
|
+
return;
|
|
81
|
+
const now = rel(c);
|
|
82
|
+
if (Math.abs(prev.left - now.left) + Math.abs(prev.top - now.top) + Math.abs(prev.width - now.width) + Math.abs(prev.height - now.height) < 1)
|
|
83
|
+
return;
|
|
84
|
+
animate(c, flipFrames(prev, now, o.scale !== false));
|
|
85
|
+
});
|
|
86
|
+
snap();
|
|
87
|
+
})
|
|
88
|
+
: null;
|
|
89
|
+
mo?.observe(parent, { childList: true });
|
|
90
|
+
const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(() => snap()) : null;
|
|
91
|
+
ro?.observe(parent);
|
|
92
|
+
snap();
|
|
93
|
+
// capture boxes right before any change in the same task (events, timers)
|
|
94
|
+
const capture = () => snap();
|
|
95
|
+
parent.addEventListener('pointerdown', capture, true);
|
|
96
|
+
return {
|
|
97
|
+
enable: () => ((on = true), snap()),
|
|
98
|
+
disable: () => (on = false),
|
|
99
|
+
stop: () => {
|
|
100
|
+
mo?.disconnect();
|
|
101
|
+
ro?.disconnect();
|
|
102
|
+
parent.removeEventListener('pointerdown', capture, true);
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
/** Masonry placement: shortest-column-first positions for item heights (pure). */
|
|
107
|
+
function masonryLayout(heights, columns, columnWidth, gap) {
|
|
108
|
+
const cols = Array(Math.max(1, columns)).fill(0);
|
|
109
|
+
const out = heights.map((h) => {
|
|
110
|
+
const c = cols.indexOf(Math.min(...cols));
|
|
111
|
+
const pos = { x: c * (columnWidth + gap), y: cols[c] };
|
|
112
|
+
cols[c] += h + gap;
|
|
113
|
+
return pos;
|
|
114
|
+
});
|
|
115
|
+
out.height = Math.max(0, Math.max(...cols) - gap);
|
|
116
|
+
return out;
|
|
117
|
+
}
|
|
118
|
+
/**
|
|
119
|
+
* Shared-element transition between two states of the page: every element
|
|
120
|
+
* with `data-shared="id"` before `update()` flies to the element with the
|
|
121
|
+
* same id afterwards (size and position), the rest cross-fades. Uses the
|
|
122
|
+
* View Transitions API when present (with `view-transition-name` per id),
|
|
123
|
+
* otherwise a FLIP fallback. Reduced motion: just runs `update()`.
|
|
124
|
+
*/
|
|
125
|
+
async function sharedTransition(update, root = document, o = {}) {
|
|
126
|
+
if (prefersReducedMotion() || typeof document === 'undefined')
|
|
127
|
+
return void (await update());
|
|
128
|
+
const collect = () => new Map(Array.from(root.querySelectorAll('[data-shared]')).map((el) => [el.dataset.shared, el]));
|
|
129
|
+
const doc = document;
|
|
130
|
+
if (typeof doc.startViewTransition === 'function') {
|
|
131
|
+
const named = (m) => m.forEach((el, id) => (el.style.viewTransitionName = `usa-${id.replace(/[^\w-]/g, '_')}`));
|
|
132
|
+
const clear = (m) => m.forEach((el) => (el.style.viewTransitionName = ''));
|
|
133
|
+
const before = collect();
|
|
134
|
+
named(before);
|
|
135
|
+
let after = new Map();
|
|
136
|
+
const vt = doc.startViewTransition(async () => {
|
|
137
|
+
clear(before);
|
|
138
|
+
await update();
|
|
139
|
+
after = collect();
|
|
140
|
+
named(after);
|
|
141
|
+
});
|
|
142
|
+
await vt.finished.catch(() => undefined);
|
|
143
|
+
clear(after);
|
|
144
|
+
return;
|
|
145
|
+
}
|
|
146
|
+
const before = new Map(Array.from(collect()).map(([id, el]) => [id, el.getBoundingClientRect()]));
|
|
147
|
+
await update();
|
|
148
|
+
const anims = [];
|
|
149
|
+
collect().forEach((el, id) => {
|
|
150
|
+
const a = before.get(id);
|
|
151
|
+
if (!a || typeof el.animate !== 'function')
|
|
152
|
+
return;
|
|
153
|
+
const b = el.getBoundingClientRect();
|
|
154
|
+
if (!b.width || !b.height)
|
|
155
|
+
return;
|
|
156
|
+
anims.push(el.animate(flipFrames(a, b), { duration: (o.duration ?? 450) * motionScale(), easing: o.easing ?? EASE_OUT }).finished.catch(() => undefined));
|
|
157
|
+
});
|
|
158
|
+
await Promise.all(anims);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
var css = "usa-auto-animate{display:block}usa-masonry{display:block;column-width:220px;column-gap:16px}usa-masonry>*{break-inside:avoid;margin-bottom:16px}usa-masonry[data-js]{position:relative;columns:auto}usa-masonry[data-js]>*{position:absolute;left:0;top:0;margin:0;box-sizing:border-box;transition:transform 0.45s cubic-bezier(0.22,1,0.36,1)}@media (prefers-reduced-motion:reduce){usa-masonry[data-js]>*{transition:none}}";
|
|
162
|
+
|
|
163
|
+
function defineAutoAnimate(tag = 'usa-auto-animate') {
|
|
164
|
+
return defineElement(tag, (Base) => class UsaAutoAnimate extends Base {
|
|
165
|
+
constructor() {
|
|
166
|
+
super(...arguments);
|
|
167
|
+
this._c = null;
|
|
168
|
+
}
|
|
169
|
+
enable() {
|
|
170
|
+
this._c?.enable();
|
|
171
|
+
}
|
|
172
|
+
disable() {
|
|
173
|
+
this._c?.disable();
|
|
174
|
+
}
|
|
175
|
+
mount() {
|
|
176
|
+
const c = (this._c = autoAnimate(this, { duration: this.num('duration', 300), scale: !this.flag('no-scale') }));
|
|
177
|
+
this.onCleanup(() => c.stop());
|
|
178
|
+
}
|
|
179
|
+
}, { id: 'layout', text: css });
|
|
180
|
+
}
|
|
181
|
+
function defineMasonry(tag = 'usa-masonry') {
|
|
182
|
+
return defineElement(tag, (Base) => class UsaMasonry extends Base {
|
|
183
|
+
static get observedAttributes() {
|
|
184
|
+
return ['columns', 'min', 'gap'];
|
|
185
|
+
}
|
|
186
|
+
changed() {
|
|
187
|
+
this.layout();
|
|
188
|
+
}
|
|
189
|
+
layout() {
|
|
190
|
+
const items = Array.from(this.children).filter((c) => !c.__usaGhost);
|
|
191
|
+
const w = this.clientWidth;
|
|
192
|
+
if (!w)
|
|
193
|
+
return;
|
|
194
|
+
const gap = this.num('gap', 16);
|
|
195
|
+
const cols = this.num('columns', 0) || Math.max(1, Math.floor((w + gap) / (this.num('min', 220) + gap)));
|
|
196
|
+
const cw = (w - gap * (cols - 1)) / cols;
|
|
197
|
+
items.forEach((el) => (el.style.width = `${cw}px`));
|
|
198
|
+
const pos = masonryLayout(items.map((el) => el.offsetHeight), cols, cw, gap);
|
|
199
|
+
items.forEach((el, i) => (el.style.transform = `translate(${pos[i].x}px, ${pos[i].y}px)`));
|
|
200
|
+
this.style.height = `${pos.height}px`;
|
|
201
|
+
this.style.setProperty('--usa-masonry-cols', String(cols));
|
|
202
|
+
}
|
|
203
|
+
mount() {
|
|
204
|
+
this.setAttribute('data-js', '');
|
|
205
|
+
this.onCleanup(() => this.removeAttribute('data-js'));
|
|
206
|
+
let id = 0;
|
|
207
|
+
const queue = () => {
|
|
208
|
+
if (id)
|
|
209
|
+
return;
|
|
210
|
+
id = requestAnimationFrame(() => {
|
|
211
|
+
id = 0;
|
|
212
|
+
this.layout();
|
|
213
|
+
});
|
|
214
|
+
};
|
|
215
|
+
if (typeof ResizeObserver === 'function') {
|
|
216
|
+
const ro = new ResizeObserver(queue);
|
|
217
|
+
ro.observe(this);
|
|
218
|
+
Array.from(this.children).forEach((c) => ro.observe(c));
|
|
219
|
+
const mo = new MutationObserver((recs) => {
|
|
220
|
+
recs.forEach((r) => r.addedNodes.forEach((n) => n instanceof Element && ro.observe(n)));
|
|
221
|
+
queue();
|
|
222
|
+
});
|
|
223
|
+
mo.observe(this, { childList: true });
|
|
224
|
+
this.onCleanup(() => (ro.disconnect(), mo.disconnect()));
|
|
225
|
+
}
|
|
226
|
+
this.listen(this, 'load', queue, { capture: true });
|
|
227
|
+
this.layout();
|
|
228
|
+
}
|
|
229
|
+
unmount() {
|
|
230
|
+
this.style.height = '';
|
|
231
|
+
Array.from(this.children).forEach((c) => (c.style.transform = '', c.style.width = ''));
|
|
232
|
+
}
|
|
233
|
+
}, { id: 'layout', text: css });
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
/**
|
|
237
|
+
* motionary/components/layout — layout animation (v3.6).
|
|
238
|
+
* `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),
|
|
239
|
+
* `<usa-masonry>`, and `sharedTransition()` for shared-element transitions
|
|
240
|
+
* (View Transitions API with a FLIP fallback).
|
|
241
|
+
*/
|
|
242
|
+
/** Register every component of this category under its default tag. */
|
|
243
|
+
function defineLayoutComponents() {
|
|
244
|
+
defineAutoAnimate();
|
|
245
|
+
defineMasonry();
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
export { autoAnimate, defineAutoAnimate, defineLayoutComponents, defineMasonry, flipFrames, masonryLayout, sharedTransition };
|
|
249
|
+
//# sourceMappingURL=layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"layout.js","sources":["../../src/components/layout/core.ts","../../src/components/layout/elements.ts","../../src/components/layout/index.ts"],"sourcesContent":["import { prefersReducedMotion, motionScale, EASE_OUT } from '../base';\n\ntype Box = { left: number; top: number; width: number; height: number };\n\n/** FLIP keyframes from a previous box to the current one (pure). */\nexport function flipFrames(from: Box, to: Box, scale = true): Keyframe[] {\n const dx = from.left - to.left;\n const dy = from.top - to.top;\n const sx = scale && to.width ? from.width / to.width : 1;\n const sy = scale && to.height ? from.height / to.height : 1;\n return [\n { transformOrigin: '0 0', transform: `translate(${dx}px, ${dy}px) scale(${sx}, ${sy})` },\n { transformOrigin: '0 0', transform: 'none' },\n ];\n}\n\nexport interface AutoAnimateOptions {\n duration?: number;\n easing?: string;\n /** Also animate size changes (default true). */\n scale?: boolean;\n}\n\n/**\n * Auto-animate a container: children that are added fade / scale in, removed\n * ones fade out in place, and moved ones (re-sort, filter, reflow, resize)\n * glide to their new spot — no extra code at the call site. Returns\n * `{ disable, enable, stop }`. Reduced motion: changes apply instantly.\n *\n * @example\n * const ctl = autoAnimate(document.querySelector('ul'));\n * list.append(item); // animates\n */\nexport function autoAnimate(parent: HTMLElement, o: AutoAnimateOptions = {}): { enable(): void; disable(): void; stop(): void } {\n let on = true;\n const boxes = new WeakMap<Element, Box>();\n const rel = (el: Element): Box => {\n const r = el.getBoundingClientRect();\n const p = parent.getBoundingClientRect();\n return { left: r.left - p.left, top: r.top - p.top, width: r.width, height: r.height };\n };\n const snap = () => Array.from(parent.children).forEach((c) => boxes.set(c, rel(c)));\n const dur = () => (o.duration ?? 300) * motionScale();\n const timing = (): KeyframeAnimationOptions => ({ duration: dur(), easing: o.easing ?? EASE_OUT });\n const animate = (el: Element, frames: Keyframe[], t = timing()) => (typeof (el as HTMLElement).animate === 'function' ? (el as HTMLElement).animate(frames, t) : null);\n\n const mo =\n typeof MutationObserver === 'function'\n ? new MutationObserver((records) => {\n if (!on || prefersReducedMotion() || dur() <= 0) return snap();\n const added = new Set<Element>();\n for (const r of records) {\n r.addedNodes.forEach((n) => n instanceof Element && n.parentElement === parent && added.add(n));\n r.removedNodes.forEach((n) => {\n if (!(n instanceof HTMLElement) || n.isConnected) return;\n const b = boxes.get(n);\n if (!b) return;\n // put a ghost back at its old place and fade it out\n n.style.position = 'absolute';\n n.style.left = `${b.left}px`;\n n.style.top = `${b.top}px`;\n n.style.width = `${b.width}px`;\n n.style.height = `${b.height}px`;\n n.style.margin = '0';\n n.style.pointerEvents = 'none';\n if (getComputedStyle(parent).position === 'static') parent.style.position = 'relative';\n parent.appendChild(n);\n (n as any).__usaGhost = true;\n const a = animate(n, [{ opacity: 1, transform: 'none' }, { opacity: 0, transform: 'scale(0.96)' }]);\n const drop = () => {\n n.remove();\n for (const k of ['position', 'left', 'top', 'width', 'height', 'margin', 'pointerEvents'] as const) n.style[k] = '';\n };\n if (a) a.finished.then(drop, drop);\n else drop();\n });\n }\n Array.from(parent.children).forEach((c) => {\n if ((c as any).__usaGhost) return;\n if (added.has(c)) return void animate(c, [{ opacity: 0, transform: 'scale(0.96)' }, { opacity: 1, transform: 'none' }]);\n const prev = boxes.get(c);\n if (!prev) return;\n const now = rel(c);\n if (Math.abs(prev.left - now.left) + Math.abs(prev.top - now.top) + Math.abs(prev.width - now.width) + Math.abs(prev.height - now.height) < 1) return;\n animate(c, flipFrames(prev, now, o.scale !== false));\n });\n snap();\n })\n : null;\n mo?.observe(parent, { childList: true });\n const ro = typeof ResizeObserver === 'function' ? new ResizeObserver(() => snap()) : null;\n ro?.observe(parent);\n snap();\n // capture boxes right before any change in the same task (events, timers)\n const capture = () => snap();\n parent.addEventListener('pointerdown', capture, true);\n return {\n enable: () => ((on = true), snap()),\n disable: () => (on = false),\n stop: () => {\n mo?.disconnect();\n ro?.disconnect();\n parent.removeEventListener('pointerdown', capture, true);\n },\n };\n}\n\n/** Masonry placement: shortest-column-first positions for item heights (pure). */\nexport function masonryLayout(heights: number[], columns: number, columnWidth: number, gap: number): { x: number; y: number }[] & { height?: number } {\n const cols = Array(Math.max(1, columns)).fill(0);\n const out = heights.map((h) => {\n const c = cols.indexOf(Math.min(...cols));\n const pos = { x: c * (columnWidth + gap), y: cols[c] };\n cols[c] += h + gap;\n return pos;\n }) as { x: number; y: number }[] & { height?: number };\n out.height = Math.max(0, Math.max(...cols) - gap);\n return out;\n}\n\nexport interface SharedOptions {\n duration?: number;\n easing?: string;\n}\n\n/**\n * Shared-element transition between two states of the page: every element\n * with `data-shared=\"id\"` before `update()` flies to the element with the\n * same id afterwards (size and position), the rest cross-fades. Uses the\n * View Transitions API when present (with `view-transition-name` per id),\n * otherwise a FLIP fallback. Reduced motion: just runs `update()`.\n */\nexport async function sharedTransition(update: () => void | Promise<void>, root: ParentNode = document, o: SharedOptions = {}): Promise<void> {\n if (prefersReducedMotion() || typeof document === 'undefined') return void (await update());\n const collect = () => new Map(Array.from(root.querySelectorAll<HTMLElement>('[data-shared]')).map((el) => [el.dataset.shared!, el]));\n const doc = document as any;\n if (typeof doc.startViewTransition === 'function') {\n const named = (m: Map<string, HTMLElement>) => m.forEach((el, id) => (el.style.viewTransitionName = `usa-${id.replace(/[^\\w-]/g, '_')}`));\n const clear = (m: Map<string, HTMLElement>) => m.forEach((el) => (el.style.viewTransitionName = ''));\n const before = collect();\n named(before);\n let after = new Map<string, HTMLElement>();\n const vt = doc.startViewTransition(async () => {\n clear(before);\n await update();\n after = collect();\n named(after);\n });\n await vt.finished.catch(() => undefined);\n clear(after);\n return;\n }\n const before = new Map(Array.from(collect()).map(([id, el]) => [id, el.getBoundingClientRect()]));\n await update();\n const anims: Promise<unknown>[] = [];\n collect().forEach((el, id) => {\n const a = before.get(id);\n if (!a || typeof el.animate !== 'function') return;\n const b = el.getBoundingClientRect();\n if (!b.width || !b.height) return;\n anims.push(el.animate(flipFrames(a, b), { duration: (o.duration ?? 450) * motionScale(), easing: o.easing ?? EASE_OUT }).finished.catch(() => undefined));\n });\n await Promise.all(anims);\n}\n","import { defineElement, type UsaElement } from '../base';\nimport { autoAnimate, masonryLayout } from './core';\nimport css from './layout.css?raw';\n\n/**\n * `<usa-auto-animate>` — wraps `autoAnimate()`: any change to its children\n * (add, remove, re-order, filter, size) animates. Attributes `duration`\n * (300), `no-scale`. Works for lists and CSS grids alike.\n */\nexport interface UsaAutoAnimateElement extends UsaElement {\n enable(): void;\n disable(): void;\n}\n\nexport function defineAutoAnimate(tag = 'usa-auto-animate'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaAutoAnimate extends Base {\n private _c: ReturnType<typeof autoAnimate> | null = null;\n enable(): void {\n this._c?.enable();\n }\n disable(): void {\n this._c?.disable();\n }\n mount(): void {\n const c = (this._c = autoAnimate(this, { duration: this.num('duration', 300), scale: !this.flag('no-scale') }));\n this.onCleanup(() => c.stop());\n }\n },\n { id: 'layout', text: css }\n );\n}\n\n/**\n * `<usa-masonry>` — a masonry (Pinterest-style) grid: children are placed in\n * the shortest column and glide to new spots when the width, the items or\n * their sizes change. Attributes `columns` (fixed count) or `min` (min\n * column width px, 220), `gap` (16). Without JS layout support it is a\n * plain CSS multi-column flow. Reduced motion: no glide.\n */\nexport interface UsaMasonryElement extends UsaElement {\n layout(): void;\n}\n\nexport function defineMasonry(tag = 'usa-masonry'): CustomElementConstructor | undefined {\n return defineElement(\n tag,\n (Base) =>\n class UsaMasonry extends Base {\n static get observedAttributes(): string[] {\n return ['columns', 'min', 'gap'];\n }\n changed(): void {\n this.layout();\n }\n layout(): void {\n const items = Array.from(this.children).filter((c) => !(c as any).__usaGhost) as HTMLElement[];\n const w = this.clientWidth;\n if (!w) return;\n const gap = this.num('gap', 16);\n const cols = this.num('columns', 0) || Math.max(1, Math.floor((w + gap) / (this.num('min', 220) + gap)));\n const cw = (w - gap * (cols - 1)) / cols;\n items.forEach((el) => (el.style.width = `${cw}px`));\n const pos = masonryLayout(items.map((el) => el.offsetHeight), cols, cw, gap);\n items.forEach((el, i) => (el.style.transform = `translate(${pos[i].x}px, ${pos[i].y}px)`));\n this.style.height = `${pos.height}px`;\n this.style.setProperty('--usa-masonry-cols', String(cols));\n }\n mount(): void {\n this.setAttribute('data-js', '');\n this.onCleanup(() => this.removeAttribute('data-js'));\n let id = 0;\n const queue = () => {\n if (id) return;\n id = requestAnimationFrame(() => {\n id = 0;\n this.layout();\n });\n };\n if (typeof ResizeObserver === 'function') {\n const ro = new ResizeObserver(queue);\n ro.observe(this);\n Array.from(this.children).forEach((c) => ro.observe(c));\n const mo = new MutationObserver((recs) => {\n recs.forEach((r) => r.addedNodes.forEach((n) => n instanceof Element && ro.observe(n)));\n queue();\n });\n mo.observe(this, { childList: true });\n this.onCleanup(() => (ro.disconnect(), mo.disconnect()));\n }\n this.listen(this, 'load', queue, { capture: true });\n this.layout();\n }\n unmount(): void {\n this.style.height = '';\n Array.from(this.children).forEach((c) => ((c as HTMLElement).style.transform = '', (c as HTMLElement).style.width = ''));\n }\n },\n { id: 'layout', text: css }\n );\n}\n","/**\n * motionary/components/layout — layout animation (v3.6).\n * `autoAnimate()` / `<usa-auto-animate>` (list & grid reflow),\n * `<usa-masonry>`, and `sharedTransition()` for shared-element transitions\n * (View Transitions API with a FLIP fallback).\n */\nimport { defineAutoAnimate, defineMasonry, type UsaAutoAnimateElement, type UsaMasonryElement } from './elements';\n\nexport { defineAutoAnimate, defineMasonry };\nexport { autoAnimate, masonryLayout, sharedTransition, flipFrames } from './core';\nexport type { AutoAnimateOptions, SharedOptions } from './core';\nexport type { UsaAutoAnimateElement, UsaMasonryElement };\n\n/** Register every component of this category under its default tag. */\nexport function defineLayoutComponents(): void {\n defineAutoAnimate();\n defineMasonry();\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'usa-auto-animate': UsaAutoAnimateElement;\n 'usa-masonry': UsaMasonryElement;\n }\n}\n"],"names":[],"mappings":";;AAIA;AACM,SAAU,UAAU,CAAC,IAAS,EAAE,EAAO,EAAE,KAAK,GAAG,IAAI,EAAA;IACzD,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,EAAE,CAAC,IAAI;IAC9B,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,EAAE,CAAC,GAAG;IAC5B,MAAM,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,KAAK,GAAG,CAAC;IACxD,MAAM,EAAE,GAAG,KAAK,IAAI,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC,MAAM,GAAG,CAAC;IAC3D,OAAO;AACL,QAAA,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,CAAA,UAAA,EAAa,EAAE,CAAA,IAAA,EAAO,EAAE,CAAA,UAAA,EAAa,EAAE,CAAA,EAAA,EAAK,EAAE,GAAG,EAAE;AACxF,QAAA,EAAE,eAAe,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,EAAE;KAC9C;AACH;AASA;;;;;;;;;AASG;SACa,WAAW,CAAC,MAAmB,EAAE,IAAwB,EAAE,EAAA;IACzE,IAAI,EAAE,GAAG,IAAI;AACb,IAAA,MAAM,KAAK,GAAG,IAAI,OAAO,EAAgB;AACzC,IAAA,MAAM,GAAG,GAAG,CAAC,EAAW,KAAS;AAC/B,QAAA,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE;AACpC,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,qBAAqB,EAAE;AACxC,QAAA,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,CAAC,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE;AACxF,IAAA,CAAC;AACD,IAAA,MAAM,IAAI,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AACnF,IAAA,MAAM,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,QAAQ,IAAI,GAAG,IAAI,WAAW,EAAE;IACrD,MAAM,MAAM,GAAG,OAAiC,EAAE,QAAQ,EAAE,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC;AAClG,IAAA,MAAM,OAAO,GAAG,CAAC,EAAW,EAAE,MAAkB,EAAE,CAAC,GAAG,MAAM,EAAE,MAAM,OAAQ,EAAkB,CAAC,OAAO,KAAK,UAAU,GAAI,EAAkB,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC,GAAG,IAAI,CAAC;AAEtK,IAAA,MAAM,EAAE,GACN,OAAO,gBAAgB,KAAK;AAC1B,UAAE,IAAI,gBAAgB,CAAC,CAAC,OAAO,KAAI;YAC/B,IAAI,CAAC,EAAE,IAAI,oBAAoB,EAAE,IAAI,GAAG,EAAE,IAAI,CAAC;gBAAE,OAAO,IAAI,EAAE;AAC9D,YAAA,MAAM,KAAK,GAAG,IAAI,GAAG,EAAW;AAChC,YAAA,KAAK,MAAM,CAAC,IAAI,OAAO,EAAE;gBACvB,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,OAAO,IAAI,CAAC,CAAC,aAAa,KAAK,MAAM,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;gBAC/F,CAAC,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;oBAC3B,IAAI,EAAE,CAAC,YAAY,WAAW,CAAC,IAAI,CAAC,CAAC,WAAW;wBAAE;oBAClD,MAAM,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AACtB,oBAAA,IAAI,CAAC,CAAC;wBAAE;;AAER,oBAAA,CAAC,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;oBAC7B,CAAC,CAAC,KAAK,CAAC,IAAI,GAAG,GAAG,CAAC,CAAC,IAAI,CAAA,EAAA,CAAI;oBAC5B,CAAC,CAAC,KAAK,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,CAAA,EAAA,CAAI;oBAC1B,CAAC,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,KAAK,CAAA,EAAA,CAAI;oBAC9B,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,CAAC,CAAC,MAAM,CAAA,EAAA,CAAI;AAChC,oBAAA,CAAC,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG;AACpB,oBAAA,CAAC,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM;AAC9B,oBAAA,IAAI,gBAAgB,CAAC,MAAM,CAAC,CAAC,QAAQ,KAAK,QAAQ;AAAE,wBAAA,MAAM,CAAC,KAAK,CAAC,QAAQ,GAAG,UAAU;AACtF,oBAAA,MAAM,CAAC,WAAW,CAAC,CAAC,CAAC;AACpB,oBAAA,CAAS,CAAC,UAAU,GAAG,IAAI;AAC5B,oBAAA,MAAM,CAAC,GAAG,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;oBACnG,MAAM,IAAI,GAAG,MAAK;wBAChB,CAAC,CAAC,MAAM,EAAE;AACV,wBAAA,KAAK,MAAM,CAAC,IAAI,CAAC,UAAU,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,eAAe,CAAU;AAAE,4BAAA,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,EAAE;AACrH,oBAAA,CAAC;AACD,oBAAA,IAAI,CAAC;wBAAE,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;;AAC7B,wBAAA,IAAI,EAAE;AACb,gBAAA,CAAC,CAAC;YACJ;AACA,YAAA,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAI;gBACxC,IAAK,CAAS,CAAC,UAAU;oBAAE;AAC3B,gBAAA,IAAI,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;oBAAE,OAAO,KAAK,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,aAAa,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;gBACvH,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC;AACzB,gBAAA,IAAI,CAAC,IAAI;oBAAE;AACX,gBAAA,MAAM,GAAG,GAAG,GAAG,CAAC,CAAC,CAAC;gBAClB,IAAI,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,GAAG,GAAG,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC;oBAAE;AAC/I,gBAAA,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,CAAC;AACtD,YAAA,CAAC,CAAC;AACF,YAAA,IAAI,EAAE;AACR,QAAA,CAAC;UACD,IAAI;IACV,EAAE,EAAE,OAAO,CAAC,MAAM,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;IACxC,MAAM,EAAE,GAAG,OAAO,cAAc,KAAK,UAAU,GAAG,IAAI,cAAc,CAAC,MAAM,IAAI,EAAE,CAAC,GAAG,IAAI;AACzF,IAAA,EAAE,EAAE,OAAO,CAAC,MAAM,CAAC;AACnB,IAAA,IAAI,EAAE;;AAEN,IAAA,MAAM,OAAO,GAAG,MAAM,IAAI,EAAE;IAC5B,MAAM,CAAC,gBAAgB,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC;IACrD,OAAO;AACL,QAAA,MAAM,EAAE,OAAO,CAAC,EAAE,GAAG,IAAI,GAAG,IAAI,EAAE,CAAC;QACnC,OAAO,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC;QAC3B,IAAI,EAAE,MAAK;YACT,EAAE,EAAE,UAAU,EAAE;YAChB,EAAE,EAAE,UAAU,EAAE;YAChB,MAAM,CAAC,mBAAmB,CAAC,aAAa,EAAE,OAAO,EAAE,IAAI,CAAC;QAC1D,CAAC;KACF;AACH;AAEA;AACM,SAAU,aAAa,CAAC,OAAiB,EAAE,OAAe,EAAE,WAAmB,EAAE,GAAW,EAAA;AAChG,IAAA,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC;IAChD,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAI;AAC5B,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,CAAC;QACzC,MAAM,GAAG,GAAG,EAAE,CAAC,EAAE,CAAC,IAAI,WAAW,GAAG,GAAG,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE;AACtD,QAAA,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,GAAG;AAClB,QAAA,OAAO,GAAG;AACZ,IAAA,CAAC,CAAqD;AACtD,IAAA,GAAG,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC;AACjD,IAAA,OAAO,GAAG;AACZ;AAOA;;;;;;AAMG;AACI,eAAe,gBAAgB,CAAC,MAAkC,EAAE,IAAA,GAAmB,QAAQ,EAAE,CAAA,GAAmB,EAAE,EAAA;AAC3H,IAAA,IAAI,oBAAoB,EAAE,IAAI,OAAO,QAAQ,KAAK,WAAW;AAAE,QAAA,OAAO,MAAM,MAAM,MAAM,EAAE,CAAC;AAC3F,IAAA,MAAM,OAAO,GAAG,MAAM,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAc,eAAe,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,MAAO,EAAE,EAAE,CAAC,CAAC,CAAC;IACpI,MAAM,GAAG,GAAG,QAAe;AAC3B,IAAA,IAAI,OAAO,GAAG,CAAC,mBAAmB,KAAK,UAAU,EAAE;AACjD,QAAA,MAAM,KAAK,GAAG,CAAC,CAA2B,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,OAAO,EAAE,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAA,CAAE,CAAC,CAAC;QACzI,MAAM,KAAK,GAAG,CAAC,CAA2B,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,kBAAkB,GAAG,EAAE,CAAC,CAAC;AACpG,QAAA,MAAM,MAAM,GAAG,OAAO,EAAE;QACxB,KAAK,CAAC,MAAM,CAAC;AACb,QAAA,IAAI,KAAK,GAAG,IAAI,GAAG,EAAuB;QAC1C,MAAM,EAAE,GAAG,GAAG,CAAC,mBAAmB,CAAC,YAAW;YAC5C,KAAK,CAAC,MAAM,CAAC;YACb,MAAM,MAAM,EAAE;YACd,KAAK,GAAG,OAAO,EAAE;YACjB,KAAK,CAAC,KAAK,CAAC;AACd,QAAA,CAAC,CAAC;QACF,MAAM,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC;QACxC,KAAK,CAAC,KAAK,CAAC;QACZ;IACF;AACA,IAAA,MAAM,MAAM,GAAG,IAAI,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE,EAAE,CAAC,qBAAqB,EAAE,CAAC,CAAC,CAAC;IACjG,MAAM,MAAM,EAAE;IACd,MAAM,KAAK,GAAuB,EAAE;IACpC,OAAO,EAAE,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,KAAI;QAC3B,MAAM,CAAC,GAAG,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC;QACxB,IAAI,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,OAAO,KAAK,UAAU;YAAE;AAC5C,QAAA,MAAM,CAAC,GAAG,EAAE,CAAC,qBAAqB,EAAE;QACpC,IAAI,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,CAAC,MAAM;YAAE;QAC3B,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,QAAQ,IAAI,GAAG,IAAI,WAAW,EAAE,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,IAAI,QAAQ,EAAE,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,SAAS,CAAC,CAAC;AAC3J,IAAA,CAAC,CAAC;AACF,IAAA,MAAM,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC;AAC1B;;;;ACrJM,SAAU,iBAAiB,CAAC,GAAG,GAAG,kBAAkB,EAAA;AACxD,IAAA,OAAO,aAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,cAAe,SAAQ,IAAI,CAAA;AAAjC,QAAA,WAAA,GAAA;;YACU,IAAA,CAAA,EAAE,GAA0C,IAAI;QAW1D;QAVE,MAAM,GAAA;AACJ,YAAA,IAAI,CAAC,EAAE,EAAE,MAAM,EAAE;QACnB;QACA,OAAO,GAAA;AACL,YAAA,IAAI,CAAC,EAAE,EAAE,OAAO,EAAE;QACpB;QACA,KAAK,GAAA;AACH,YAAA,MAAM,CAAC,IAAI,IAAI,CAAC,EAAE,GAAG,WAAW,CAAC,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,GAAG,CAAC,UAAU,EAAE,GAAG,CAAC,EAAE,KAAK,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,EAAE,CAAC,CAAC;YAC/G,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,CAAC;QAChC;KACD,EACH,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAC5B;AACH;AAaM,SAAU,aAAa,CAAC,GAAG,GAAG,aAAa,EAAA;AAC/C,IAAA,OAAO,aAAa,CAClB,GAAG,EACH,CAAC,IAAI,KACH,MAAM,UAAW,SAAQ,IAAI,CAAA;AAC3B,QAAA,WAAW,kBAAkB,GAAA;AAC3B,YAAA,OAAO,CAAC,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC;QAClC;QACA,OAAO,GAAA;YACL,IAAI,CAAC,MAAM,EAAE;QACf;QACA,MAAM,GAAA;YACJ,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAE,CAAS,CAAC,UAAU,CAAkB;AAC9F,YAAA,MAAM,CAAC,GAAG,IAAI,CAAC,WAAW;AAC1B,YAAA,IAAI,CAAC,CAAC;gBAAE;YACR,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC;AAC/B,YAAA,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,GAAG,KAAK,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC;AACxG,YAAA,MAAM,EAAE,GAAG,CAAC,CAAC,GAAG,GAAG,IAAI,IAAI,GAAG,CAAC,CAAC,IAAI,IAAI;YACxC,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,KAAK,CAAC,KAAK,GAAG,CAAA,EAAG,EAAE,CAAA,EAAA,CAAI,CAAC,CAAC;YACnD,MAAM,GAAG,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,GAAG,CAAC;AAC5E,YAAA,KAAK,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,UAAA,EAAa,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,IAAA,EAAO,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA,GAAA,CAAK,CAAC,CAAC;YAC1F,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,MAAM,CAAA,EAAA,CAAI;AACrC,YAAA,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,oBAAoB,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC;QAC5D;QACA,KAAK,GAAA;AACH,YAAA,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,EAAE,CAAC;AAChC,YAAA,IAAI,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,CAAC;YACrD,IAAI,EAAE,GAAG,CAAC;YACV,MAAM,KAAK,GAAG,MAAK;AACjB,gBAAA,IAAI,EAAE;oBAAE;AACR,gBAAA,EAAE,GAAG,qBAAqB,CAAC,MAAK;oBAC9B,EAAE,GAAG,CAAC;oBACN,IAAI,CAAC,MAAM,EAAE;AACf,gBAAA,CAAC,CAAC;AACJ,YAAA,CAAC;AACD,YAAA,IAAI,OAAO,cAAc,KAAK,UAAU,EAAE;AACxC,gBAAA,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,KAAK,CAAC;AACpC,gBAAA,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC;gBAChB,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;gBACvD,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,CAAC,IAAI,KAAI;AACvC,oBAAA,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,OAAO,IAAI,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;AACvF,oBAAA,KAAK,EAAE;AACT,gBAAA,CAAC,CAAC;gBACF,EAAE,CAAC,OAAO,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;AACrC,gBAAA,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC,UAAU,EAAE,EAAE,EAAE,CAAC,UAAU,EAAE,CAAC,CAAC;YAC1D;AACA,YAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;YACnD,IAAI,CAAC,MAAM,EAAE;QACf;QACA,OAAO,GAAA;AACL,YAAA,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,EAAE;AACtB,YAAA,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAO,CAAiB,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,EAAG,CAAiB,CAAC,KAAK,CAAC,KAAK,GAAG,EAAE,CAAC,CAAC;QAC1H;KACD,EACH,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,GAAG,EAAE,CAC5B;AACH;;ACtGA;;;;;AAKG;AAQH;SACgB,sBAAsB,GAAA;AACpC,IAAA,iBAAiB,EAAE;AACnB,IAAA,aAAa,EAAE;AACjB;;;;"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var indexTags = require('../chunks/index-tags-wv0R_vkO.cjs');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* motionary/components/lazy — lazy, per-category registration (v2.9).
|
|
7
|
+
*
|
|
8
|
+
* `lazyDefine()` scans the page (and watches it with a MutationObserver) for
|
|
9
|
+
* `<usa-*>` tags that are not registered yet and dynamically imports only the
|
|
10
|
+
* categories they belong to. Bundlers split each category into its own chunk,
|
|
11
|
+
* so a page that only uses `<usa-button>` loads just the click category.
|
|
12
|
+
*
|
|
13
|
+
* ```js
|
|
14
|
+
* import { lazyDefine } from 'motionary/components/lazy';
|
|
15
|
+
* lazyDefine(); // returns a stop() function
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
const LOADERS = {
|
|
19
|
+
reveal: () => Promise.resolve().then(function () { return require('./reveal.cjs'); }),
|
|
20
|
+
text: () => Promise.resolve().then(function () { return require('./text.cjs'); }),
|
|
21
|
+
interaction: () => Promise.resolve().then(function () { return require('./interaction.cjs'); }),
|
|
22
|
+
feedback: () => Promise.resolve().then(function () { return require('./feedback.cjs'); }),
|
|
23
|
+
background: () => Promise.resolve().then(function () { return require('./background.cjs'); }),
|
|
24
|
+
transitions: () => Promise.resolve().then(function () { return require('./transitions.cjs'); }),
|
|
25
|
+
physics: () => Promise.resolve().then(function () { return require('./physics.cjs'); }),
|
|
26
|
+
cards: () => Promise.resolve().then(function () { return require('./cards.cjs'); }),
|
|
27
|
+
click: () => Promise.resolve().then(function () { return require('./click.cjs'); }),
|
|
28
|
+
ui: () => Promise.resolve().then(function () { return require('./ui.cjs'); }),
|
|
29
|
+
page: () => Promise.resolve().then(function () { return require('./page.cjs'); }),
|
|
30
|
+
timeline: () => Promise.resolve().then(function () { return require('./timeline.cjs'); }),
|
|
31
|
+
gesture: () => Promise.resolve().then(function () { return require('./gesture.cjs'); }),
|
|
32
|
+
svg: () => Promise.resolve().then(function () { return require('./svg.cjs'); }),
|
|
33
|
+
webgl: () => Promise.resolve().then(function () { return require('./webgl.cjs'); }),
|
|
34
|
+
depth: () => Promise.resolve().then(function () { return require('./depth.cjs'); }),
|
|
35
|
+
layout: () => Promise.resolve().then(function () { return require('./layout.cjs'); }),
|
|
36
|
+
packs: () => Promise.resolve().then(function () { return require('./packs.cjs'); }),
|
|
37
|
+
fx: () => Promise.resolve().then(function () { return require('./fx.cjs'); }),
|
|
38
|
+
};
|
|
39
|
+
const TAG_TO_CAT = new Map();
|
|
40
|
+
for (const [cat, tags] of Object.entries(indexTags.COMPONENT_CATEGORIES))
|
|
41
|
+
for (const t of tags)
|
|
42
|
+
TAG_TO_CAT.set(t, cat);
|
|
43
|
+
const loaded = new Map();
|
|
44
|
+
/** Category of a tag (`usa-button` → `click`), or `null`. */
|
|
45
|
+
const categoryOfTag = (tag) => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;
|
|
46
|
+
/** Load and register one category (once). */
|
|
47
|
+
function loadCategory(cat) {
|
|
48
|
+
let p = loaded.get(cat);
|
|
49
|
+
if (!p) {
|
|
50
|
+
p = LOADERS[cat]().then((m) => {
|
|
51
|
+
const fn = Object.keys(m).find((k) => /^define[A-Z]\w*Components$/.test(k));
|
|
52
|
+
if (fn)
|
|
53
|
+
m[fn]();
|
|
54
|
+
});
|
|
55
|
+
loaded.set(cat, p);
|
|
56
|
+
}
|
|
57
|
+
return p;
|
|
58
|
+
}
|
|
59
|
+
/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
|
|
60
|
+
async function defineUsed(root = document) {
|
|
61
|
+
if (typeof customElements === 'undefined')
|
|
62
|
+
return [];
|
|
63
|
+
const cats = new Set();
|
|
64
|
+
const scan = (el) => {
|
|
65
|
+
const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;
|
|
66
|
+
if (c)
|
|
67
|
+
cats.add(c);
|
|
68
|
+
};
|
|
69
|
+
if (root.localName)
|
|
70
|
+
scan(root);
|
|
71
|
+
root.querySelectorAll('*').forEach(scan);
|
|
72
|
+
await Promise.all([...cats].map(loadCategory));
|
|
73
|
+
return [...cats];
|
|
74
|
+
}
|
|
75
|
+
/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
|
|
76
|
+
function lazyDefine(root = typeof document !== 'undefined' ? document : undefined) {
|
|
77
|
+
if (!root || typeof MutationObserver === 'undefined')
|
|
78
|
+
return () => undefined;
|
|
79
|
+
defineUsed(root);
|
|
80
|
+
const mo = new MutationObserver((records) => {
|
|
81
|
+
for (const r of records)
|
|
82
|
+
r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n));
|
|
83
|
+
});
|
|
84
|
+
mo.observe(root, { childList: true, subtree: true });
|
|
85
|
+
return () => mo.disconnect();
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
exports.categoryOfTag = categoryOfTag;
|
|
89
|
+
exports.defineUsed = defineUsed;
|
|
90
|
+
exports.lazyDefine = lazyDefine;
|
|
91
|
+
exports.loadCategory = loadCategory;
|
|
92
|
+
//# sourceMappingURL=lazy.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lazy.cjs","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * motionary/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'motionary/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n reveal: () => import('./reveal/index'),\n text: () => import('./text/index'),\n interaction: () => import('./interaction/index'),\n feedback: () => import('./feedback/index'),\n background: () => import('./background/index'),\n transitions: () => import('./transitions/index'),\n physics: () => import('./physics/index'),\n cards: () => import('./cards/index'),\n click: () => import('./click/index'),\n ui: () => import('./ui/index'),\n page: () => import('./page/index'),\n timeline: () => import('./timeline/index'),\n gesture: () => import('./gesture/index'),\n svg: () => import('./svg/index'),\n webgl: () => import('./webgl/index'),\n depth: () => import('./depth/index'),\n layout: () => import('./layout/index'),\n packs: () => import('./packs/index'),\n fx: () => import('./fx/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n let p = loaded.get(cat);\n if (!p) {\n p = LOADERS[cat]().then((m) => {\n const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n if (fn) m[fn]();\n });\n loaded.set(cat, p);\n }\n return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n if (typeof customElements === 'undefined') return [];\n const cats = new Set<ComponentCategory>();\n const scan = (el: Element) => {\n const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n if (c) cats.add(c);\n };\n if ((root as Element).localName) scan(root as Element);\n root.querySelectorAll('*').forEach(scan);\n await Promise.all([...cats].map(loadCategory));\n return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n defineUsed(root);\n const mo = new MutationObserver((records) => {\n for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n });\n mo.observe(root as Node, { childList: true, subtree: true });\n return () => mo.disconnect();\n}\n"],"names":["COMPONENT_CATEGORIES"],"mappings":"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"}
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/** The component categories and their default tags. */
|
|
2
|
+
declare const COMPONENT_CATEGORIES: {
|
|
3
|
+
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
4
|
+
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
5
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
6
|
+
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
7
|
+
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
8
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
9
|
+
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
10
|
+
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
11
|
+
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
12
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
13
|
+
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
14
|
+
readonly timeline: readonly ["usa-timeline"];
|
|
15
|
+
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
16
|
+
readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
|
|
17
|
+
readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid", "usa-post-fx"];
|
|
18
|
+
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
19
|
+
readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
|
|
20
|
+
readonly packs: readonly ["usa-pack"];
|
|
21
|
+
readonly fx: readonly ["usa-fx"];
|
|
22
|
+
};
|
|
23
|
+
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* motionary/components/lazy — lazy, per-category registration (v2.9).
|
|
27
|
+
*
|
|
28
|
+
* `lazyDefine()` scans the page (and watches it with a MutationObserver) for
|
|
29
|
+
* `<usa-*>` tags that are not registered yet and dynamically imports only the
|
|
30
|
+
* categories they belong to. Bundlers split each category into its own chunk,
|
|
31
|
+
* so a page that only uses `<usa-button>` loads just the click category.
|
|
32
|
+
*
|
|
33
|
+
* ```js
|
|
34
|
+
* import { lazyDefine } from 'motionary/components/lazy';
|
|
35
|
+
* lazyDefine(); // returns a stop() function
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
/** Category of a tag (`usa-button` → `click`), or `null`. */
|
|
40
|
+
declare const categoryOfTag: (tag: string) => ComponentCategory | null;
|
|
41
|
+
/** Load and register one category (once). */
|
|
42
|
+
declare function loadCategory(cat: ComponentCategory): Promise<void>;
|
|
43
|
+
/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
|
|
44
|
+
declare function defineUsed(root?: ParentNode): Promise<ComponentCategory[]>;
|
|
45
|
+
/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
|
|
46
|
+
declare function lazyDefine(root?: ParentNode): () => void;
|
|
47
|
+
|
|
48
|
+
export { categoryOfTag, defineUsed, lazyDefine, loadCategory };
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
/** The component categories and their default tags. */
|
|
2
|
+
declare const COMPONENT_CATEGORIES: {
|
|
3
|
+
readonly reveal: readonly ["usa-reveal", "usa-stagger", "usa-scroll-progress", "usa-scrolly"];
|
|
4
|
+
readonly text: readonly ["usa-typewriter", "usa-split-text", "usa-scramble", "usa-counter", "usa-shimmer-text", "usa-text-rotate", "usa-wave-text", "usa-glitch", "usa-gradient-text", "usa-handwriting", "usa-scroll-highlight"];
|
|
5
|
+
readonly interaction: readonly ["usa-ripple", "usa-magnetic", "usa-tilt", "usa-spotlight", "usa-press", "usa-toggle"];
|
|
6
|
+
readonly feedback: readonly ["usa-spinner", "usa-skeleton", "usa-progress", "usa-toaster", "usa-check"];
|
|
7
|
+
readonly background: readonly ["usa-aurora", "usa-particles", "usa-grain", "usa-marquee", "usa-acrylic", "usa-grid-glow", "usa-blobs", "usa-water-ripple", "usa-dot-network"];
|
|
8
|
+
readonly transitions: readonly ["usa-dialog", "usa-accordion", "usa-view-switch"];
|
|
9
|
+
readonly physics: readonly ["usa-spring", "usa-draggable", "usa-overscroll"];
|
|
10
|
+
readonly cards: readonly ["usa-card", "usa-card-stack", "usa-sticky-stack", "usa-carousel-3d"];
|
|
11
|
+
readonly click: readonly ["usa-click", "usa-button", "usa-icon-morph", "usa-like", "usa-hold", "usa-double-tap", "usa-checkbox"];
|
|
12
|
+
readonly ui: readonly ["usa-tabs", "usa-drawer", "usa-bottom-sheet", "usa-pull-refresh", "usa-fab", "usa-navbar", "usa-slider", "usa-rating", "usa-tooltip", "usa-popover", "usa-badge", "usa-avatar-stack"];
|
|
13
|
+
readonly page: readonly ["usa-cursor", "usa-fullpage", "usa-loading-bar", "usa-back-to-top", "usa-ambient", "usa-splash", "usa-auto-skeleton", "usa-motion-switch"];
|
|
14
|
+
readonly timeline: readonly ["usa-timeline"];
|
|
15
|
+
readonly gesture: readonly ["usa-swipeable", "usa-pinch-zoom"];
|
|
16
|
+
readonly svg: readonly ["usa-draw", "usa-morph", "usa-mask-reveal", "usa-anim-icon"];
|
|
17
|
+
readonly webgl: readonly ["usa-shader", "usa-distort", "usa-liquid", "usa-post-fx"];
|
|
18
|
+
readonly depth: readonly ["usa-cube", "usa-depth"];
|
|
19
|
+
readonly layout: readonly ["usa-auto-animate", "usa-masonry"];
|
|
20
|
+
readonly packs: readonly ["usa-pack"];
|
|
21
|
+
readonly fx: readonly ["usa-fx"];
|
|
22
|
+
};
|
|
23
|
+
type ComponentCategory = keyof typeof COMPONENT_CATEGORIES;
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* motionary/components/lazy — lazy, per-category registration (v2.9).
|
|
27
|
+
*
|
|
28
|
+
* `lazyDefine()` scans the page (and watches it with a MutationObserver) for
|
|
29
|
+
* `<usa-*>` tags that are not registered yet and dynamically imports only the
|
|
30
|
+
* categories they belong to. Bundlers split each category into its own chunk,
|
|
31
|
+
* so a page that only uses `<usa-button>` loads just the click category.
|
|
32
|
+
*
|
|
33
|
+
* ```js
|
|
34
|
+
* import { lazyDefine } from 'motionary/components/lazy';
|
|
35
|
+
* lazyDefine(); // returns a stop() function
|
|
36
|
+
* ```
|
|
37
|
+
*/
|
|
38
|
+
|
|
39
|
+
/** Category of a tag (`usa-button` → `click`), or `null`. */
|
|
40
|
+
declare const categoryOfTag: (tag: string) => ComponentCategory | null;
|
|
41
|
+
/** Load and register one category (once). */
|
|
42
|
+
declare function loadCategory(cat: ComponentCategory): Promise<void>;
|
|
43
|
+
/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
|
|
44
|
+
declare function defineUsed(root?: ParentNode): Promise<ComponentCategory[]>;
|
|
45
|
+
/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
|
|
46
|
+
declare function lazyDefine(root?: ParentNode): () => void;
|
|
47
|
+
|
|
48
|
+
export { categoryOfTag, defineUsed, lazyDefine, loadCategory };
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { C as COMPONENT_CATEGORIES } from '../chunks/index-tags-DucKMQr_.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* motionary/components/lazy — lazy, per-category registration (v2.9).
|
|
5
|
+
*
|
|
6
|
+
* `lazyDefine()` scans the page (and watches it with a MutationObserver) for
|
|
7
|
+
* `<usa-*>` tags that are not registered yet and dynamically imports only the
|
|
8
|
+
* categories they belong to. Bundlers split each category into its own chunk,
|
|
9
|
+
* so a page that only uses `<usa-button>` loads just the click category.
|
|
10
|
+
*
|
|
11
|
+
* ```js
|
|
12
|
+
* import { lazyDefine } from 'motionary/components/lazy';
|
|
13
|
+
* lazyDefine(); // returns a stop() function
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
const LOADERS = {
|
|
17
|
+
reveal: () => import('./reveal.js'),
|
|
18
|
+
text: () => import('./text.js'),
|
|
19
|
+
interaction: () => import('./interaction.js'),
|
|
20
|
+
feedback: () => import('./feedback.js'),
|
|
21
|
+
background: () => import('./background.js'),
|
|
22
|
+
transitions: () => import('./transitions.js'),
|
|
23
|
+
physics: () => import('./physics.js'),
|
|
24
|
+
cards: () => import('./cards.js'),
|
|
25
|
+
click: () => import('./click.js'),
|
|
26
|
+
ui: () => import('./ui.js'),
|
|
27
|
+
page: () => import('./page.js'),
|
|
28
|
+
timeline: () => import('./timeline.js'),
|
|
29
|
+
gesture: () => import('./gesture.js'),
|
|
30
|
+
svg: () => import('./svg.js'),
|
|
31
|
+
webgl: () => import('./webgl.js'),
|
|
32
|
+
depth: () => import('./depth.js'),
|
|
33
|
+
layout: () => import('./layout.js'),
|
|
34
|
+
packs: () => import('./packs.js'),
|
|
35
|
+
fx: () => import('./fx.js'),
|
|
36
|
+
};
|
|
37
|
+
const TAG_TO_CAT = new Map();
|
|
38
|
+
for (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES))
|
|
39
|
+
for (const t of tags)
|
|
40
|
+
TAG_TO_CAT.set(t, cat);
|
|
41
|
+
const loaded = new Map();
|
|
42
|
+
/** Category of a tag (`usa-button` → `click`), or `null`. */
|
|
43
|
+
const categoryOfTag = (tag) => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;
|
|
44
|
+
/** Load and register one category (once). */
|
|
45
|
+
function loadCategory(cat) {
|
|
46
|
+
let p = loaded.get(cat);
|
|
47
|
+
if (!p) {
|
|
48
|
+
p = LOADERS[cat]().then((m) => {
|
|
49
|
+
const fn = Object.keys(m).find((k) => /^define[A-Z]\w*Components$/.test(k));
|
|
50
|
+
if (fn)
|
|
51
|
+
m[fn]();
|
|
52
|
+
});
|
|
53
|
+
loaded.set(cat, p);
|
|
54
|
+
}
|
|
55
|
+
return p;
|
|
56
|
+
}
|
|
57
|
+
/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */
|
|
58
|
+
async function defineUsed(root = document) {
|
|
59
|
+
if (typeof customElements === 'undefined')
|
|
60
|
+
return [];
|
|
61
|
+
const cats = new Set();
|
|
62
|
+
const scan = (el) => {
|
|
63
|
+
const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;
|
|
64
|
+
if (c)
|
|
65
|
+
cats.add(c);
|
|
66
|
+
};
|
|
67
|
+
if (root.localName)
|
|
68
|
+
scan(root);
|
|
69
|
+
root.querySelectorAll('*').forEach(scan);
|
|
70
|
+
await Promise.all([...cats].map(loadCategory));
|
|
71
|
+
return [...cats];
|
|
72
|
+
}
|
|
73
|
+
/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */
|
|
74
|
+
function lazyDefine(root = typeof document !== 'undefined' ? document : undefined) {
|
|
75
|
+
if (!root || typeof MutationObserver === 'undefined')
|
|
76
|
+
return () => undefined;
|
|
77
|
+
defineUsed(root);
|
|
78
|
+
const mo = new MutationObserver((records) => {
|
|
79
|
+
for (const r of records)
|
|
80
|
+
r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n));
|
|
81
|
+
});
|
|
82
|
+
mo.observe(root, { childList: true, subtree: true });
|
|
83
|
+
return () => mo.disconnect();
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
export { categoryOfTag, defineUsed, lazyDefine, loadCategory };
|
|
87
|
+
//# sourceMappingURL=lazy.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"lazy.js","sources":["../../src/components/lazy.ts"],"sourcesContent":["/**\n * motionary/components/lazy — lazy, per-category registration (v2.9).\n *\n * `lazyDefine()` scans the page (and watches it with a MutationObserver) for\n * `<usa-*>` tags that are not registered yet and dynamically imports only the\n * categories they belong to. Bundlers split each category into its own chunk,\n * so a page that only uses `<usa-button>` loads just the click category.\n *\n * ```js\n * import { lazyDefine } from 'motionary/components/lazy';\n * lazyDefine(); // returns a stop() function\n * ```\n */\nimport { COMPONENT_CATEGORIES, type ComponentCategory } from './index-tags';\n\nconst LOADERS: Record<ComponentCategory, () => Promise<Record<string, any>>> = {\n reveal: () => import('./reveal/index'),\n text: () => import('./text/index'),\n interaction: () => import('./interaction/index'),\n feedback: () => import('./feedback/index'),\n background: () => import('./background/index'),\n transitions: () => import('./transitions/index'),\n physics: () => import('./physics/index'),\n cards: () => import('./cards/index'),\n click: () => import('./click/index'),\n ui: () => import('./ui/index'),\n page: () => import('./page/index'),\n timeline: () => import('./timeline/index'),\n gesture: () => import('./gesture/index'),\n svg: () => import('./svg/index'),\n webgl: () => import('./webgl/index'),\n depth: () => import('./depth/index'),\n layout: () => import('./layout/index'),\n packs: () => import('./packs/index'),\n fx: () => import('./fx/index'),\n};\n\nconst TAG_TO_CAT = new Map<string, ComponentCategory>();\nfor (const [cat, tags] of Object.entries(COMPONENT_CATEGORIES)) for (const t of tags) TAG_TO_CAT.set(t, cat as ComponentCategory);\nconst loaded = new Map<ComponentCategory, Promise<void>>();\n\n/** Category of a tag (`usa-button` → `click`), or `null`. */\nexport const categoryOfTag = (tag: string): ComponentCategory | null => TAG_TO_CAT.get(tag.toLowerCase()) ?? null;\n\n/** Load and register one category (once). */\nexport function loadCategory(cat: ComponentCategory): Promise<void> {\n let p = loaded.get(cat);\n if (!p) {\n p = LOADERS[cat]().then((m) => {\n const fn = Object.keys(m).find((k) => /^define[A-Z]\\w*Components$/.test(k));\n if (fn) m[fn]();\n });\n loaded.set(cat, p);\n }\n return p;\n}\n\n/** Register the categories needed by the `<usa-*>` tags under `root`. Resolves when they are defined. */\nexport async function defineUsed(root: ParentNode = document): Promise<ComponentCategory[]> {\n if (typeof customElements === 'undefined') return [];\n const cats = new Set<ComponentCategory>();\n const scan = (el: Element) => {\n const c = el.localName.startsWith('usa-') && !customElements.get(el.localName) ? categoryOfTag(el.localName) : null;\n if (c) cats.add(c);\n };\n if ((root as Element).localName) scan(root as Element);\n root.querySelectorAll('*').forEach(scan);\n await Promise.all([...cats].map(loadCategory));\n return [...cats];\n}\n\n/** `defineUsed()` now and whenever new `<usa-*>` elements are added. Returns a stop function. */\nexport function lazyDefine(root: ParentNode = typeof document !== 'undefined' ? document : (undefined as any)): () => void {\n if (!root || typeof MutationObserver === 'undefined') return () => undefined;\n defineUsed(root);\n const mo = new MutationObserver((records) => {\n for (const r of records) r.addedNodes.forEach((n) => n.nodeType === 1 && defineUsed(n as Element));\n });\n mo.observe(root as Node, { childList: true, subtree: true });\n return () => mo.disconnect();\n}\n"],"names":[],"mappings":"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"}
|