motionary 7.1.0 → 7.3.0

package/dist/components/fx-shop.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+var registry = require('../chunks/registry-DehBVRDV.cjs');
+require('../chunks/base-BaQV-2ha.cjs');
+
+/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */
+function arcPath(ax, ay, bx, by, lift = 120, steps = 8) {
+    const cx = (ax + bx) / 2;
+    const cy = Math.min(ay, by) - lift;
+    return Array.from({ length: steps + 1 }, (_, i) => {
+        const t = i / steps;
+        const u = 1 - t;
+        return { x: u * u * ax + 2 * u * t * cx + t * t * bx, y: u * u * ay + 2 * u * t * cy + t * t * by };
+    });
+}
+const bump = (el, ctx) => el && ctx.animate(el, ctx.reduced ? [{ opacity: 0.5 }, { opacity: 1 }] : [{ transform: 'scale(1)' }, { transform: 'scale(1.25)', offset: 0.35 }, { transform: 'scale(.92)', offset: 0.7 }, { transform: 'scale(1)' }], { duration: ctx.reduced ? 250 : 480, easing: 'ease-out' });
+const SHOP_FX = [
+    {
+        name: 'fly-to-cart',
+        kind: 'click',
+        description: 'A ghost of the element (or its first `img`) flies on an arc into the cart (`to` selector, default `[data-cart]`), shrinking; the cart bumps (`duration`, `lift`).',
+        defaults: { to: '[data-cart]', duration: 750, lift: 120 },
+        run: (el, o, ctx) => {
+            const cart = document.querySelector(o.to);
+            if (!cart)
+                return;
+            if (ctx.reduced)
+                return void bump(cart, ctx);
+            const src = el.querySelector('img') || el;
+            const a = src.getBoundingClientRect();
+            const b = cart.getBoundingClientRect();
+            const ghost = src.cloneNode(true);
+            ghost.removeAttribute('id');
+            ghost.setAttribute('aria-hidden', 'true');
+            Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none', borderRadius: '12px', overflow: 'hidden' });
+            document.body.appendChild(ghost);
+            const pts = arcPath(0, 0, b.left + b.width / 2 - (a.left + a.width / 2), b.top + b.height / 2 - (a.top + a.height / 2), o.lift);
+            const s = Math.max(0.12, Math.min(1, 28 / Math.max(a.width, a.height, 1)));
+            const anim = ctx.animate(ghost, pts.map((p, i) => ({ transform: `translate(${p.x.toFixed(1)}px,${p.y.toFixed(1)}px) scale(${(1 - (1 - s) * (i / (pts.length - 1))).toFixed(3)})`, opacity: i === pts.length - 1 ? 0.6 : 1 })), { duration: o.duration, easing: 'cubic-bezier(.5,0,.75,.4)', fill: 'forwards' });
+            const done = () => (ghost.remove(), bump(cart, ctx));
+            if (anim)
+                anim.finished.then(done, () => ghost.remove());
+            else
+                done();
+            ctx.onCleanup(() => ghost.remove());
+            return anim?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'price-flip',
+        kind: 'enter',
+        description: 'The price flips character by character like a split-flap display from `data-from` (or scrambled digits) to its text (`stagger`).',
+        defaults: { stagger: 55, duration: 380 },
+        run: (el, o, ctx) => {
+            const to = el.dataset.priceTo || el.textContent || '';
+            el.dataset.priceTo = to;
+            if (ctx.reduced)
+                return void (el.textContent = to);
+            const from = (el.dataset.from || '').padStart(to.length, ' ');
+            el.textContent = '';
+            el.setAttribute('aria-label', to.trim());
+            const anims = Array.from(to).map((ch, i) => {
+                const span = document.createElement('span');
+                span.setAttribute('aria-hidden', 'true');
+                span.style.display = 'inline-block';
+                span.textContent = /\d/.test(ch) ? (from[i] && from[i] !== ' ' ? from[i] : String((Number(ch) + 5) % 10)) : ch;
+                el.appendChild(span);
+                const a = ctx.animate(span, [{ transform: 'rotateX(0)' }, { transform: 'rotateX(90deg)', offset: 0.5 }, { transform: 'rotateX(0)' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out' });
+                setTimeout(() => (span.textContent = ch), i * o.stagger + o.duration / 2);
+                return a;
+            });
+            return Promise.all(anims.map((a) => a?.finished.catch(() => undefined))).then(() => {
+                el.textContent = to;
+                el.removeAttribute('aria-label');
+            });
+        },
+    },
+    {
+        name: 'stock-pulse',
+        kind: 'loop',
+        description: 'A soft urgency pulse — a glow ring in `color` — for low stock / last items (`color`, `period`).',
+        defaults: { color: 'rgba(239,68,68,.55)', period: 1400 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const a = ctx.animate(el, [{ boxShadow: `0 0 0 0 ${o.color}` }, { boxShadow: '0 0 0 12px rgba(0,0,0,0)' }], { duration: o.period, iterations: Infinity, easing: 'ease-out' });
+            const stop = () => a?.cancel();
+            ctx.onCleanup(stop);
+            return stop;
+        },
+    },
+    {
+        name: 'sale-shine',
+        kind: 'hover',
+        description: 'A diagonal light sweep across the element (product cards, buy buttons) (`duration`).',
+        defaults: { duration: 700 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const s = document.createElement('span');
+            s.setAttribute('aria-hidden', 'true');
+            Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', background: 'linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', borderRadius: 'inherit' });
+            if (getComputedStyle(el).position === 'static')
+                el.style.position = 'relative';
+            const prev = el.style.overflow;
+            el.style.overflow = 'hidden';
+            el.appendChild(s);
+            const a = ctx.animate(s, [{ transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' }], { duration: o.duration, easing: 'ease-in-out' });
+            const end = () => (s.remove(), (el.style.overflow = prev));
+            if (a)
+                a.finished.then(end, end);
+            else
+                end();
+            return a?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'badge-pop',
+        kind: 'attention',
+        description: 'A sale badge pops in with a wobble (`duration`).',
+        defaults: { duration: 650 },
+        run: (el, o, ctx) => ctx.reduced
+            ? ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })
+            : ctx.animate(el, [{ transform: 'scale(0) rotate(-20deg)' }, { transform: 'scale(1.2) rotate(8deg)', offset: 0.5 }, { transform: 'scale(.95) rotate(-4deg)', offset: 0.75 }, { transform: 'none' }], { duration: o.duration, easing: 'ease-out' }),
+    },
+];
+/** Register the 7.3 e-commerce pack (idempotent). */
+function registerShopPack() {
+    registry.registerEffects(SHOP_FX);
+}
+
+exports.SHOP_FX = SHOP_FX;
+exports.arcPath = arcPath;
+exports.registerShopPack = registerShopPack;
+//# sourceMappingURL=fx-shop.cjs.map

package/dist/components/fx-shop.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-shop.cjs","sources":["../../src/components/fx2/shop.ts"],"sourcesContent":["/**\n * 7.3 — E-commerce motion (`motionary/fx/shop`, also\n * `motionary/components/fx-shop`):\n *\n * - `fly-to-cart` (click) — a ghost of the element (or its first `img`) flies\n *   on an arc into the cart (`to`, default `[data-cart]`), shrinking; the cart\n *   bumps when it lands.\n * - `price-flip` (enter) — the price flips like a split-flap display from\n *   `data-from` (or a scramble) to its text.\n * - `stock-pulse` (loop) — a soft urgency pulse (glow ring) for low stock.\n * - `sale-shine` (hover) — a diagonal light sweep across the element.\n * - `badge-pop` (attention) — a sale badge pops in with a wobble.\n *\n * Reduced motion: fly-to-cart only bumps the cart with a fade, price-flip\n * sets the text, stock-pulse and sale-shine do nothing, badge-pop fades.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */\nexport function arcPath(ax: number, ay: number, bx: number, by: number, lift = 120, steps = 8): { x: number; y: number }[] {\n  const cx = (ax + bx) / 2;\n  const cy = Math.min(ay, by) - lift;\n  return Array.from({ length: steps + 1 }, (_, i) => {\n    const t = i / steps;\n    const u = 1 - t;\n    return { x: u * u * ax + 2 * u * t * cx + t * t * bx, y: u * u * ay + 2 * u * t * cy + t * t * by };\n  });\n}\n\nconst bump = (el: Element | null, ctx: EffectContext) =>\n  el && ctx.animate(el, ctx.reduced ? [{ opacity: 0.5 }, { opacity: 1 }] : [{ transform: 'scale(1)' }, { transform: 'scale(1.25)', offset: 0.35 }, { transform: 'scale(.92)', offset: 0.7 }, { transform: 'scale(1)' }], { duration: ctx.reduced ? 250 : 480, easing: 'ease-out' });\n\nexport const SHOP_FX: EffectDefinition[] = [\n  {\n    name: 'fly-to-cart',\n    kind: 'click',\n    description: 'A ghost of the element (or its first `img`) flies on an arc into the cart (`to` selector, default `[data-cart]`), shrinking; the cart bumps (`duration`, `lift`).',\n    defaults: { to: '[data-cart]', duration: 750, lift: 120 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const cart = document.querySelector(o.to) as HTMLElement | null;\n      if (!cart) return;\n      if (ctx.reduced) return void bump(cart, ctx);\n      const src = (el.querySelector('img') as HTMLElement | null) || el;\n      const a = src.getBoundingClientRect();\n      const b = cart.getBoundingClientRect();\n      const ghost = src.cloneNode(true) as HTMLElement;\n      ghost.removeAttribute('id');\n      ghost.setAttribute('aria-hidden', 'true');\n      Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none', borderRadius: '12px', overflow: 'hidden' });\n      document.body.appendChild(ghost);\n      const pts = arcPath(0, 0, b.left + b.width / 2 - (a.left + a.width / 2), b.top + b.height / 2 - (a.top + a.height / 2), o.lift);\n      const s = Math.max(0.12, Math.min(1, 28 / Math.max(a.width, a.height, 1)));\n      const anim = ctx.animate(ghost, pts.map((p, i) => ({ transform: `translate(${p.x.toFixed(1)}px,${p.y.toFixed(1)}px) scale(${(1 - (1 - s) * (i / (pts.length - 1))).toFixed(3)})`, opacity: i === pts.length - 1 ? 0.6 : 1 })), { duration: o.duration, easing: 'cubic-bezier(.5,0,.75,.4)', fill: 'forwards' });\n      const done = () => (ghost.remove(), bump(cart, ctx));\n      if (anim) anim.finished.then(done, () => ghost.remove());\n      else done();\n      ctx.onCleanup(() => ghost.remove());\n      return anim?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'price-flip',\n    kind: 'enter',\n    description: 'The price flips character by character like a split-flap display from `data-from` (or scrambled digits) to its text (`stagger`).',\n    defaults: { stagger: 55, duration: 380 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const to = el.dataset.priceTo || el.textContent || '';\n      el.dataset.priceTo = to;\n      if (ctx.reduced) return void (el.textContent = to);\n      const from = (el.dataset.from || '').padStart(to.length, ' ');\n      el.textContent = '';\n      el.setAttribute('aria-label', to.trim());\n      const anims = Array.from(to).map((ch, i) => {\n        const span = document.createElement('span');\n        span.setAttribute('aria-hidden', 'true');\n        span.style.display = 'inline-block';\n        span.textContent = /\\d/.test(ch) ? (from[i] && from[i] !== ' ' ? from[i] : String((Number(ch) + 5) % 10)) : ch;\n        el.appendChild(span);\n        const a = ctx.animate(span, [{ transform: 'rotateX(0)' }, { transform: 'rotateX(90deg)', offset: 0.5 }, { transform: 'rotateX(0)' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out' });\n        setTimeout(() => (span.textContent = ch), i * o.stagger + o.duration / 2);\n        return a;\n      });\n      return Promise.all(anims.map((a) => a?.finished.catch(() => undefined))).then(() => {\n        el.textContent = to;\n        el.removeAttribute('aria-label');\n      });\n    },\n  },\n  {\n    name: 'stock-pulse',\n    kind: 'loop',\n    description: 'A soft urgency pulse — a glow ring in `color` — for low stock / last items (`color`, `period`).',\n    defaults: { color: 'rgba(239,68,68,.55)', period: 1400 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const a = ctx.animate(el, [{ boxShadow: `0 0 0 0 ${o.color}` }, { boxShadow: '0 0 0 12px rgba(0,0,0,0)' }], { duration: o.period, iterations: Infinity, easing: 'ease-out' });\n      const stop = () => a?.cancel();\n      ctx.onCleanup(stop);\n      return stop;\n    },\n  },\n  {\n    name: 'sale-shine',\n    kind: 'hover',\n    description: 'A diagonal light sweep across the element (product cards, buy buttons) (`duration`).',\n    defaults: { duration: 700 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const s = document.createElement('span');\n      s.setAttribute('aria-hidden', 'true');\n      Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', background: 'linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', borderRadius: 'inherit' });\n      if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n      const prev = el.style.overflow;\n      el.style.overflow = 'hidden';\n      el.appendChild(s);\n      const a = ctx.animate(s, [{ transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' }], { duration: o.duration, easing: 'ease-in-out' });\n      const end = () => (s.remove(), (el.style.overflow = prev));\n      if (a) a.finished.then(end, end);\n      else end();\n      return a?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'badge-pop',\n    kind: 'attention',\n    description: 'A sale badge pops in with a wobble (`duration`).',\n    defaults: { duration: 650 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) =>\n      ctx.reduced\n        ? ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })\n        : ctx.animate(el, [{ transform: 'scale(0) rotate(-20deg)' }, { transform: 'scale(1.2) rotate(8deg)', offset: 0.5 }, { transform: 'scale(.95) rotate(-4deg)', offset: 0.75 }, { transform: 'none' }], { duration: o.duration, easing: 'ease-out' }),\n  },\n];\n\n/** Register the 7.3 e-commerce pack (idempotent). */\nexport function registerShopPack(): void {\n  registerEffects(SHOP_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

package/dist/components/fx-shop.d.cts

@@ -0,0 +1,70 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 7.3 — E-commerce motion (`motionary/fx/shop`, also
+ * `motionary/components/fx-shop`):
+ *
+ * - `fly-to-cart` (click) — a ghost of the element (or its first `img`) flies
+ *   on an arc into the cart (`to`, default `[data-cart]`), shrinking; the cart
+ *   bumps when it lands.
+ * - `price-flip` (enter) — the price flips like a split-flap display from
+ *   `data-from` (or a scramble) to its text.
+ * - `stock-pulse` (loop) — a soft urgency pulse (glow ring) for low stock.
+ * - `sale-shine` (hover) — a diagonal light sweep across the element.
+ * - `badge-pop` (attention) — a sale badge pops in with a wobble.
+ *
+ * Reduced motion: fly-to-cart only bumps the cart with a fade, price-flip
+ * sets the text, stock-pulse and sale-shine do nothing, badge-pop fades.
+ */
+
+/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */
+declare function arcPath(ax: number, ay: number, bx: number, by: number, lift?: number, steps?: number): {
+    x: number;
+    y: number;
+}[];
+declare const SHOP_FX: EffectDefinition[];
+/** Register the 7.3 e-commerce pack (idempotent). */
+declare function registerShopPack(): void;
+
+export { SHOP_FX, arcPath, registerShopPack };

package/dist/components/fx-shop.d.ts

@@ -0,0 +1,70 @@
+type MotionSensitivity = 'full' | 'gentle' | 'minimal' | 'static';
+type Cleanup = () => void;
+
+/**
+ * 5.0 — unified plugin-style effect registration. Every effect (built-in or
+ * yours) is a plain object registered once and played the same way:
+ * `playEffect(el, name)`, `bindEffect(el, name, { trigger })` or
+ * `<usa-fx effect="name" trigger="click">`. Effects get a context that
+ * already applies reduced motion, motion sensitivity, intensity and the
+ * animation budget.
+ */
+
+declare const EFFECT_KINDS: readonly ["enter", "exit", "attention", "click", "hover", "card", "loop", "page", "background", "text", "cursor", "scroll"];
+type EffectKind = (typeof EFFECT_KINDS)[number];
+interface EffectContext {
+    /** Reduced motion applies (OS setting, `minimal` / `static` sensitivity). */
+    readonly reduced: boolean;
+    readonly sensitivity: MotionSensitivity;
+    /** The triggering event (pointer position for click effects), if any. */
+    readonly event?: Event;
+    /** `el.animate()` with the library's motion rules (may return `null`). */
+    animate(el: Element, keyframes: Keyframe[], options: KeyframeAnimationOptions): Animation | null;
+    /** Register teardown for long-running effects (loops, listeners). */
+    onCleanup(fn: Cleanup): void;
+}
+interface EffectDefinition<O extends Record<string, unknown> = Record<string, any>> {
+    /** Unique, kebab-case. */
+    name: string;
+    kind: EffectKind;
+    /** One line for docs and the gallery. */
+    description?: string;
+    /** Option defaults (merged under the caller's options). */
+    defaults?: Partial<O>;
+    /**
+     * Under reduced motion: `'skip'` (do nothing — default for loop, background
+     * and cursor effects) or `'run'` (run with `ctx.reduced === true`, the
+     * effect degrades itself — default for everything else).
+     */
+    reduced?: 'skip' | 'run';
+    /** Play the effect. Return an Animation / Promise to be awaited, or a cleanup. */
+    run(el: HTMLElement, options: O, ctx: EffectContext): void | Cleanup | Animation | null | Promise<unknown>;
+}
+
+/**
+ * 7.3 — E-commerce motion (`motionary/fx/shop`, also
+ * `motionary/components/fx-shop`):
+ *
+ * - `fly-to-cart` (click) — a ghost of the element (or its first `img`) flies
+ *   on an arc into the cart (`to`, default `[data-cart]`), shrinking; the cart
+ *   bumps when it lands.
+ * - `price-flip` (enter) — the price flips like a split-flap display from
+ *   `data-from` (or a scramble) to its text.
+ * - `stock-pulse` (loop) — a soft urgency pulse (glow ring) for low stock.
+ * - `sale-shine` (hover) — a diagonal light sweep across the element.
+ * - `badge-pop` (attention) — a sale badge pops in with a wobble.
+ *
+ * Reduced motion: fly-to-cart only bumps the cart with a fade, price-flip
+ * sets the text, stock-pulse and sale-shine do nothing, badge-pop fades.
+ */
+
+/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */
+declare function arcPath(ax: number, ay: number, bx: number, by: number, lift?: number, steps?: number): {
+    x: number;
+    y: number;
+}[];
+declare const SHOP_FX: EffectDefinition[];
+/** Register the 7.3 e-commerce pack (idempotent). */
+declare function registerShopPack(): void;
+
+export { SHOP_FX, arcPath, registerShopPack };

package/dist/components/fx-shop.js

@@ -0,0 +1,129 @@
+import { registerEffects } from '../chunks/registry-CyKExAmE.js';
+import '../chunks/base-2-yYc93C.js';
+
+/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */
+function arcPath(ax, ay, bx, by, lift = 120, steps = 8) {
+    const cx = (ax + bx) / 2;
+    const cy = Math.min(ay, by) - lift;
+    return Array.from({ length: steps + 1 }, (_, i) => {
+        const t = i / steps;
+        const u = 1 - t;
+        return { x: u * u * ax + 2 * u * t * cx + t * t * bx, y: u * u * ay + 2 * u * t * cy + t * t * by };
+    });
+}
+const bump = (el, ctx) => el && ctx.animate(el, ctx.reduced ? [{ opacity: 0.5 }, { opacity: 1 }] : [{ transform: 'scale(1)' }, { transform: 'scale(1.25)', offset: 0.35 }, { transform: 'scale(.92)', offset: 0.7 }, { transform: 'scale(1)' }], { duration: ctx.reduced ? 250 : 480, easing: 'ease-out' });
+const SHOP_FX = [
+    {
+        name: 'fly-to-cart',
+        kind: 'click',
+        description: 'A ghost of the element (or its first `img`) flies on an arc into the cart (`to` selector, default `[data-cart]`), shrinking; the cart bumps (`duration`, `lift`).',
+        defaults: { to: '[data-cart]', duration: 750, lift: 120 },
+        run: (el, o, ctx) => {
+            const cart = document.querySelector(o.to);
+            if (!cart)
+                return;
+            if (ctx.reduced)
+                return void bump(cart, ctx);
+            const src = el.querySelector('img') || el;
+            const a = src.getBoundingClientRect();
+            const b = cart.getBoundingClientRect();
+            const ghost = src.cloneNode(true);
+            ghost.removeAttribute('id');
+            ghost.setAttribute('aria-hidden', 'true');
+            Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none', borderRadius: '12px', overflow: 'hidden' });
+            document.body.appendChild(ghost);
+            const pts = arcPath(0, 0, b.left + b.width / 2 - (a.left + a.width / 2), b.top + b.height / 2 - (a.top + a.height / 2), o.lift);
+            const s = Math.max(0.12, Math.min(1, 28 / Math.max(a.width, a.height, 1)));
+            const anim = ctx.animate(ghost, pts.map((p, i) => ({ transform: `translate(${p.x.toFixed(1)}px,${p.y.toFixed(1)}px) scale(${(1 - (1 - s) * (i / (pts.length - 1))).toFixed(3)})`, opacity: i === pts.length - 1 ? 0.6 : 1 })), { duration: o.duration, easing: 'cubic-bezier(.5,0,.75,.4)', fill: 'forwards' });
+            const done = () => (ghost.remove(), bump(cart, ctx));
+            if (anim)
+                anim.finished.then(done, () => ghost.remove());
+            else
+                done();
+            ctx.onCleanup(() => ghost.remove());
+            return anim?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'price-flip',
+        kind: 'enter',
+        description: 'The price flips character by character like a split-flap display from `data-from` (or scrambled digits) to its text (`stagger`).',
+        defaults: { stagger: 55, duration: 380 },
+        run: (el, o, ctx) => {
+            const to = el.dataset.priceTo || el.textContent || '';
+            el.dataset.priceTo = to;
+            if (ctx.reduced)
+                return void (el.textContent = to);
+            const from = (el.dataset.from || '').padStart(to.length, ' ');
+            el.textContent = '';
+            el.setAttribute('aria-label', to.trim());
+            const anims = Array.from(to).map((ch, i) => {
+                const span = document.createElement('span');
+                span.setAttribute('aria-hidden', 'true');
+                span.style.display = 'inline-block';
+                span.textContent = /\d/.test(ch) ? (from[i] && from[i] !== ' ' ? from[i] : String((Number(ch) + 5) % 10)) : ch;
+                el.appendChild(span);
+                const a = ctx.animate(span, [{ transform: 'rotateX(0)' }, { transform: 'rotateX(90deg)', offset: 0.5 }, { transform: 'rotateX(0)' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out' });
+                setTimeout(() => (span.textContent = ch), i * o.stagger + o.duration / 2);
+                return a;
+            });
+            return Promise.all(anims.map((a) => a?.finished.catch(() => undefined))).then(() => {
+                el.textContent = to;
+                el.removeAttribute('aria-label');
+            });
+        },
+    },
+    {
+        name: 'stock-pulse',
+        kind: 'loop',
+        description: 'A soft urgency pulse — a glow ring in `color` — for low stock / last items (`color`, `period`).',
+        defaults: { color: 'rgba(239,68,68,.55)', period: 1400 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const a = ctx.animate(el, [{ boxShadow: `0 0 0 0 ${o.color}` }, { boxShadow: '0 0 0 12px rgba(0,0,0,0)' }], { duration: o.period, iterations: Infinity, easing: 'ease-out' });
+            const stop = () => a?.cancel();
+            ctx.onCleanup(stop);
+            return stop;
+        },
+    },
+    {
+        name: 'sale-shine',
+        kind: 'hover',
+        description: 'A diagonal light sweep across the element (product cards, buy buttons) (`duration`).',
+        defaults: { duration: 700 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const s = document.createElement('span');
+            s.setAttribute('aria-hidden', 'true');
+            Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', background: 'linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', borderRadius: 'inherit' });
+            if (getComputedStyle(el).position === 'static')
+                el.style.position = 'relative';
+            const prev = el.style.overflow;
+            el.style.overflow = 'hidden';
+            el.appendChild(s);
+            const a = ctx.animate(s, [{ transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' }], { duration: o.duration, easing: 'ease-in-out' });
+            const end = () => (s.remove(), (el.style.overflow = prev));
+            if (a)
+                a.finished.then(end, end);
+            else
+                end();
+            return a?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'badge-pop',
+        kind: 'attention',
+        description: 'A sale badge pops in with a wobble (`duration`).',
+        defaults: { duration: 650 },
+        run: (el, o, ctx) => ctx.reduced
+            ? ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })
+            : ctx.animate(el, [{ transform: 'scale(0) rotate(-20deg)' }, { transform: 'scale(1.2) rotate(8deg)', offset: 0.5 }, { transform: 'scale(.95) rotate(-4deg)', offset: 0.75 }, { transform: 'none' }], { duration: o.duration, easing: 'ease-out' }),
+    },
+];
+/** Register the 7.3 e-commerce pack (idempotent). */
+function registerShopPack() {
+    registerEffects(SHOP_FX);
+}
+
+export { SHOP_FX, arcPath, registerShopPack };
+//# sourceMappingURL=fx-shop.js.map

package/dist/components/fx-shop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fx-shop.js","sources":["../../src/components/fx2/shop.ts"],"sourcesContent":["/**\n * 7.3 — E-commerce motion (`motionary/fx/shop`, also\n * `motionary/components/fx-shop`):\n *\n * - `fly-to-cart` (click) — a ghost of the element (or its first `img`) flies\n *   on an arc into the cart (`to`, default `[data-cart]`), shrinking; the cart\n *   bumps when it lands.\n * - `price-flip` (enter) — the price flips like a split-flap display from\n *   `data-from` (or a scramble) to its text.\n * - `stock-pulse` (loop) — a soft urgency pulse (glow ring) for low stock.\n * - `sale-shine` (hover) — a diagonal light sweep across the element.\n * - `badge-pop` (attention) — a sale badge pops in with a wobble.\n *\n * Reduced motion: fly-to-cart only bumps the cart with a fade, price-flip\n * sets the text, stock-pulse and sale-shine do nothing, badge-pop fades.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Quadratic-bezier arc points from a to b, lifted by `lift` px (7.3). */\nexport function arcPath(ax: number, ay: number, bx: number, by: number, lift = 120, steps = 8): { x: number; y: number }[] {\n  const cx = (ax + bx) / 2;\n  const cy = Math.min(ay, by) - lift;\n  return Array.from({ length: steps + 1 }, (_, i) => {\n    const t = i / steps;\n    const u = 1 - t;\n    return { x: u * u * ax + 2 * u * t * cx + t * t * bx, y: u * u * ay + 2 * u * t * cy + t * t * by };\n  });\n}\n\nconst bump = (el: Element | null, ctx: EffectContext) =>\n  el && ctx.animate(el, ctx.reduced ? [{ opacity: 0.5 }, { opacity: 1 }] : [{ transform: 'scale(1)' }, { transform: 'scale(1.25)', offset: 0.35 }, { transform: 'scale(.92)', offset: 0.7 }, { transform: 'scale(1)' }], { duration: ctx.reduced ? 250 : 480, easing: 'ease-out' });\n\nexport const SHOP_FX: EffectDefinition[] = [\n  {\n    name: 'fly-to-cart',\n    kind: 'click',\n    description: 'A ghost of the element (or its first `img`) flies on an arc into the cart (`to` selector, default `[data-cart]`), shrinking; the cart bumps (`duration`, `lift`).',\n    defaults: { to: '[data-cart]', duration: 750, lift: 120 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const cart = document.querySelector(o.to) as HTMLElement | null;\n      if (!cart) return;\n      if (ctx.reduced) return void bump(cart, ctx);\n      const src = (el.querySelector('img') as HTMLElement | null) || el;\n      const a = src.getBoundingClientRect();\n      const b = cart.getBoundingClientRect();\n      const ghost = src.cloneNode(true) as HTMLElement;\n      ghost.removeAttribute('id');\n      ghost.setAttribute('aria-hidden', 'true');\n      Object.assign(ghost.style, { position: 'fixed', left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, margin: '0', zIndex: '2147483000', pointerEvents: 'none', borderRadius: '12px', overflow: 'hidden' });\n      document.body.appendChild(ghost);\n      const pts = arcPath(0, 0, b.left + b.width / 2 - (a.left + a.width / 2), b.top + b.height / 2 - (a.top + a.height / 2), o.lift);\n      const s = Math.max(0.12, Math.min(1, 28 / Math.max(a.width, a.height, 1)));\n      const anim = ctx.animate(ghost, pts.map((p, i) => ({ transform: `translate(${p.x.toFixed(1)}px,${p.y.toFixed(1)}px) scale(${(1 - (1 - s) * (i / (pts.length - 1))).toFixed(3)})`, opacity: i === pts.length - 1 ? 0.6 : 1 })), { duration: o.duration, easing: 'cubic-bezier(.5,0,.75,.4)', fill: 'forwards' });\n      const done = () => (ghost.remove(), bump(cart, ctx));\n      if (anim) anim.finished.then(done, () => ghost.remove());\n      else done();\n      ctx.onCleanup(() => ghost.remove());\n      return anim?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'price-flip',\n    kind: 'enter',\n    description: 'The price flips character by character like a split-flap display from `data-from` (or scrambled digits) to its text (`stagger`).',\n    defaults: { stagger: 55, duration: 380 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const to = el.dataset.priceTo || el.textContent || '';\n      el.dataset.priceTo = to;\n      if (ctx.reduced) return void (el.textContent = to);\n      const from = (el.dataset.from || '').padStart(to.length, ' ');\n      el.textContent = '';\n      el.setAttribute('aria-label', to.trim());\n      const anims = Array.from(to).map((ch, i) => {\n        const span = document.createElement('span');\n        span.setAttribute('aria-hidden', 'true');\n        span.style.display = 'inline-block';\n        span.textContent = /\\d/.test(ch) ? (from[i] && from[i] !== ' ' ? from[i] : String((Number(ch) + 5) % 10)) : ch;\n        el.appendChild(span);\n        const a = ctx.animate(span, [{ transform: 'rotateX(0)' }, { transform: 'rotateX(90deg)', offset: 0.5 }, { transform: 'rotateX(0)' }], { duration: o.duration, delay: i * o.stagger, easing: 'ease-in-out' });\n        setTimeout(() => (span.textContent = ch), i * o.stagger + o.duration / 2);\n        return a;\n      });\n      return Promise.all(anims.map((a) => a?.finished.catch(() => undefined))).then(() => {\n        el.textContent = to;\n        el.removeAttribute('aria-label');\n      });\n    },\n  },\n  {\n    name: 'stock-pulse',\n    kind: 'loop',\n    description: 'A soft urgency pulse — a glow ring in `color` — for low stock / last items (`color`, `period`).',\n    defaults: { color: 'rgba(239,68,68,.55)', period: 1400 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const a = ctx.animate(el, [{ boxShadow: `0 0 0 0 ${o.color}` }, { boxShadow: '0 0 0 12px rgba(0,0,0,0)' }], { duration: o.period, iterations: Infinity, easing: 'ease-out' });\n      const stop = () => a?.cancel();\n      ctx.onCleanup(stop);\n      return stop;\n    },\n  },\n  {\n    name: 'sale-shine',\n    kind: 'hover',\n    description: 'A diagonal light sweep across the element (product cards, buy buttons) (`duration`).',\n    defaults: { duration: 700 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const s = document.createElement('span');\n      s.setAttribute('aria-hidden', 'true');\n      Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', background: 'linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', borderRadius: 'inherit' });\n      if (getComputedStyle(el).position === 'static') el.style.position = 'relative';\n      const prev = el.style.overflow;\n      el.style.overflow = 'hidden';\n      el.appendChild(s);\n      const a = ctx.animate(s, [{ transform: 'translateX(-100%)' }, { transform: 'translateX(100%)' }], { duration: o.duration, easing: 'ease-in-out' });\n      const end = () => (s.remove(), (el.style.overflow = prev));\n      if (a) a.finished.then(end, end);\n      else end();\n      return a?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'badge-pop',\n    kind: 'attention',\n    description: 'A sale badge pops in with a wobble (`duration`).',\n    defaults: { duration: 650 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) =>\n      ctx.reduced\n        ? ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })\n        : ctx.animate(el, [{ transform: 'scale(0) rotate(-20deg)' }, { transform: 'scale(1.2) rotate(8deg)', offset: 0.5 }, { transform: 'scale(.95) rotate(-4deg)', offset: 0.75 }, { transform: 'none' }], { duration: o.duration, easing: 'ease-out' }),\n  },\n];\n\n/** Register the 7.3 e-commerce pack (idempotent). */\nexport function registerShopPack(): void {\n  registerEffects(SHOP_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx.cjs

@@ -2,9 +2,10 @@
 
 var base = require('../chunks/base-BaQV-2ha.cjs');
 var registry = require('../chunks/registry-DehBVRDV.cjs');
-var core = require('../chunks/core-BGAyaY6L.cjs');
-var fx = require('../chunks/fx-lBGVtQO1.cjs');
+var builtins = require('../chunks/builtins-xalxV2d5.cjs');
+require('../chunks/core-BGAyaY6L.cjs');
 require('./tokens.cjs');
+require('../chunks/fx-lBGVtQO1.cjs');
 
 function defineFx(tag = 'usa-fx') {
     return base.defineElement(tag, (Base) => class UsaFx extends Base {
@@ -41,100 +42,6 @@ function defineFx(tag = 'usa-fx') {
     });
 }
 
-/**
- * 5.0 built-in effects, all registered through `registerEffect()`:
- * every timeline preset as an `enter` effect, attention seekers, and the
- * click effects (burst, confetti, shake, ripple).
- */
-const enter = Object.entries(core.TIMELINE_PRESETS).map(([name, frames]) => ({
-    name,
-    kind: 'enter',
-    description: `Entrance: ${name} (same keyframes as the timeline preset).`,
-    defaults: { duration: 600, delay: 0, easing: 'cubic-bezier(0.22, 1, 0.36, 1)' },
-    run: (el, o, ctx) => ctx.animate(el, ctx.reduced ? [{ opacity: 0 }, { opacity: 1 }] : frames, { duration: o.duration, delay: o.delay, easing: o.easing, fill: 'backwards' }),
-}));
-const A = (name, description, frames, duration = 700, easing = 'ease-in-out') => ({
-    name,
-    kind: 'attention',
-    description,
-    defaults: { duration, iterations: 1 },
-    run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.6 }, { opacity: 1 }], { duration: 400 }) : ctx.animate(el, frames, { duration: o.duration, easing, iterations: o.iterations })),
-});
-const attention = [
-    A('pulse', 'Gentle scale pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.08)' }, { transform: 'scale(1)' }], 600),
-    A('pop', 'Quick overshoot pop.', [{ transform: 'scale(1)' }, { transform: 'scale(1.18)', offset: 0.4 }, { transform: 'scale(0.96)', offset: 0.7 }, { transform: 'scale(1)' }], 450, 'cubic-bezier(0.34, 1.56, 0.64, 1)'),
-    A('jelly', 'Rubbery squash-and-stretch.', [{ transform: 'scale(1,1)' }, { transform: 'scale(1.25,0.75)', offset: 0.3 }, { transform: 'scale(0.75,1.25)', offset: 0.4 }, { transform: 'scale(1.15,0.85)', offset: 0.5 }, { transform: 'scale(0.95,1.05)', offset: 0.65 }, { transform: 'scale(1.05,0.95)', offset: 0.75 }, { transform: 'scale(1,1)' }], 900),
-    A('wiggle', 'Playful rotate wiggle.', [{ transform: 'rotate(0)' }, { transform: 'rotate(-8deg)', offset: 0.2 }, { transform: 'rotate(7deg)', offset: 0.4 }, { transform: 'rotate(-5deg)', offset: 0.6 }, { transform: 'rotate(3deg)', offset: 0.8 }, { transform: 'rotate(0)' }], 650),
-    A('heartbeat', 'Double-beat heart pulse.', [{ transform: 'scale(1)' }, { transform: 'scale(1.2)', offset: 0.14 }, { transform: 'scale(1)', offset: 0.28 }, { transform: 'scale(1.2)', offset: 0.42 }, { transform: 'scale(1)', offset: 0.7 }], 1100),
-    A('bounce', 'Hop up and settle with a squash.', [{ transform: 'translateY(0) scale(1,1)' }, { transform: 'translateY(-22px) scale(0.95,1.05)', offset: 0.35 }, { transform: 'translateY(0) scale(1.08,0.92)', offset: 0.6 }, { transform: 'translateY(-6px) scale(1,1)', offset: 0.8 }, { transform: 'translateY(0) scale(1,1)' }], 800),
-    A('flash', 'Two soft flashes (well under 3 per second).', [{ opacity: 1 }, { opacity: 0.25, offset: 0.25 }, { opacity: 1, offset: 0.5 }, { opacity: 0.25, offset: 0.75 }, { opacity: 1 }], 1400),
-    A('tada', 'Scale + shake celebration.', [{ transform: 'scale(1) rotate(0)' }, { transform: 'scale(0.9) rotate(-3deg)', offset: 0.1 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.3 }, { transform: 'scale(1.1) rotate(-3deg)', offset: 0.5 }, { transform: 'scale(1.1) rotate(3deg)', offset: 0.7 }, { transform: 'scale(1) rotate(0)' }], 1000),
-];
-const click = [
-    {
-        name: 'burst',
-        kind: 'click',
-        description: 'Particle burst from the click point (or `x` / `y`, or the element center).',
-        defaults: { count: 12 },
-        run: (el, o, ctx) => {
-            if (ctx.reduced)
-                return;
-            const r = el.getBoundingClientRect();
-            const e = ctx.event;
-            fx.burst(o.x ?? e?.clientX ?? r.left + r.width / 2, o.y ?? e?.clientY ?? r.top + r.height / 2, o);
-        },
-    },
-    {
-        name: 'confetti',
-        kind: 'click',
-        description: 'Confetti cannon from the element.',
-        defaults: { count: 80 },
-        run: (el, o, ctx) => {
-            if (ctx.reduced)
-                return;
-            const r = el.getBoundingClientRect();
-            fx.confetti({ x: r.left + r.width / 2, y: r.top + r.height / 2, ...o });
-        },
-    },
-    {
-        name: 'shake',
-        kind: 'attention',
-        description: 'Horizontal "no" shake (errors, wrong password).',
-        defaults: { intensity: 8, duration: 480 },
-        run: (el, o, ctx) => (ctx.reduced ? ctx.animate(el, [{ opacity: 1 }, { opacity: 0.5 }, { opacity: 1 }], { duration: 300 }) : fx.shake(el, o.intensity, o.duration)),
-    },
-    {
-        name: 'ripple',
-        kind: 'click',
-        description: 'Material-style ink ripple from the pointer.',
-        defaults: { color: 'currentColor', duration: 600 },
-        run: (el, o, ctx) => {
-            var _a;
-            if (ctx.reduced)
-                return;
-            const r = el.getBoundingClientRect();
-            const e = ctx.event;
-            const d = Math.hypot(r.width, r.height) * 2;
-            const dot = document.createElement('span');
-            dot.setAttribute('aria-hidden', 'true');
-            Object.assign(dot.style, { position: 'absolute', left: `${(e?.clientX ?? r.left + r.width / 2) - r.left - d / 2}px`, top: `${(e?.clientY ?? r.top + r.height / 2) - r.top - d / 2}px`, width: `${d}px`, height: `${d}px`, borderRadius: '50%', background: o.color, opacity: '0.25', pointerEvents: 'none' });
-            if (getComputedStyle(el).position === 'static')
-                el.style.position = 'relative';
-            (_a = el.style).overflow || (_a.overflow = 'hidden');
-            el.appendChild(dot);
-            const a = ctx.animate(dot, [{ transform: 'scale(0)', opacity: 0.3 }, { transform: 'scale(1)', opacity: 0 }], { duration: o.duration, easing: 'ease-out' });
-            const done = () => dot.remove();
-            if (a)
-                a.finished.then(done, done);
-            else
-                done();
-            return a;
-        },
-    },
-];
-/** Every built-in 5.0 effect definition. */
-const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
-
 /**
  * motionary/components/fx — unified plugin-style effects (5.0).
  * `registerEffect({ name, kind, run })`, `playEffect(el, name)`,
@@ -145,7 +52,7 @@ const BUILTIN_EFFECTS = [...enter, ...attention, ...click];
  */
 /** Register the built-in effects (idempotent; `defineFxComponents()` calls it). */
 function registerBuiltinEffects() {
-    registry.registerEffects(BUILTIN_EFFECTS);
+    registry.registerEffects(builtins.BUILTIN_EFFECTS);
 }
 /** Register every component of this category under its default tag (+ the built-in effects). */
 function defineFxComponents() {
@@ -162,7 +69,7 @@ exports.listEffects = registry.listEffects;
 exports.playEffect = registry.playEffect;
 exports.registerEffect = registry.registerEffect;
 exports.registerEffects = registry.registerEffects;
-exports.BUILTIN_EFFECTS = BUILTIN_EFFECTS;
+exports.BUILTIN_EFFECTS = builtins.BUILTIN_EFFECTS;
 exports.defineFx = defineFx;
 exports.defineFxComponents = defineFxComponents;
 exports.registerBuiltinEffects = registerBuiltinEffects;