use-scroll-animate 7.3.0 → 7.4.0

package/CHANGELOG.md

@@ -7,6 +7,24 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [7.4.0] - 2026-10-08
+
+### Added
+- **4 new components (7.4)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-message-list>` — chat thread from `<p data-from data-me data-time>` children or `push(msg)`: bubbles pop in from their side, consecutive messages group, the list sticks to the bottom (smooth) or shows a “↓ New messages” pill when you scrolled up; `typing(name)` shows animated typing dots until the next message; `messages`, `usa:message`. `role="log"` + `aria-live="polite"`.
+  - `<usa-reactions>` — emoji reaction bar (`emojis`, `counts`, `picker`): clicking toggles your reaction (emoji pop, count roll, floating copies), ＋ springs open a picker; `counts`, `mine`, `toggle()`, `usa:react`. `parseReactions()`.
+  - `<usa-notification-bell>` — bell + unread badge + dropdown (`<li data-time data-read>` children): `notify()` swings the bell, bumps the badge and slides the notice in; `markAllRead()` shrinks the badge away; `unread`, `notices`, `open`, `ring()`; Esc / outside click close; `usa:notify`, `usa:read`.
+  - `<usa-presence>` — avatar + status dot (`status` online | away | busy | offline, `name`, `src`): coming online sends a ripple, `speaking` pulses a ring, `story` spins a gradient ring; initials fallback. `PRESENCE_STATES`, `initials()`.
+- **Chat & social motion — `motionary/fx/social`** (= `motionary/components/fx-social`, `registerSocialPack()`, also in `registerEffectPacks()`): `typing-dots` (loop), `message-in` (enter), `reaction-burst` (click), `read-receipt` (enter), `mention-glow` (attention). `fanAngles()`.
+- Showcase: 6 new gallery cards with copyable code and live demos; Animation Store 305 → 311 items.
+- Note: the plan's “avatar stack” already ships as `<usa-avatar-stack>` (unchanged), so 7.4 adds `<usa-presence>` instead.
+
+### Fixed
+- `<usa-reactions>` (pre-release staging): two type errors broke `tsc` — `picker.hidden` (now `boolean | "until-found"` in the DOM lib) passed to a boolean toggle, and `.type` set on an `HTMLElement` — fixed (`=== true`, `setAttribute('type','button')`).
+
+### Accessibility
+- Message list = `log` (polite) with a labelled typing bubble; reactions = labelled `group` of `aria-pressed` toggle buttons with counts in their labels; bell = `button` with `aria-expanded` and the unread count in its label, list = labelled region, Esc returns focus; presence = labelled `img` ("Ada Lovelace, online"). Reduced motion: no pop, smooth scroll, roll, float, swing, bump, slide, ripple, pulse or ring spin; typing dots are static; `reaction-burst` does nothing, `read-receipt` / `mention-glow` show their end state.
+
 ## [7.3.0] - 2026-10-08
 
 ### Added

package/dist/components/fx-social.cjs

@@ -0,0 +1,121 @@
+'use strict';
+
+var registry = require('../chunks/registry-DehBVRDV.cjs');
+require('../chunks/base-BaQV-2ha.cjs');
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+function fanAngles(n, spread = 60) {
+    if (n <= 1)
+        return [0];
+    return Array.from({ length: n }, (_, i) => Math.round(-spread / 2 + (spread * i) / (n - 1)));
+}
+const span = (cls, text = '') => {
+    const s = document.createElement('span');
+    s.className = cls;
+    s.setAttribute('aria-hidden', 'true');
+    s.textContent = text;
+    return s;
+};
+const SOCIAL_FX = [
+    {
+        name: 'typing-dots',
+        kind: 'loop',
+        description: 'Three dots bounce in a wave inside the element — the “is typing…” indicator (`color`, `period`).',
+        defaults: { color: 'currentColor', period: 1100 },
+        run: (el, o, ctx) => {
+            const box = span('usa-fx-typing');
+            Object.assign(box.style, { display: 'inline-flex', gap: '4px', alignItems: 'center', padding: '2px 0' });
+            const dots = [0, 1, 2].map(() => {
+                const d = span('');
+                Object.assign(d.style, { width: '7px', height: '7px', borderRadius: '50%', background: o.color, opacity: '.6', display: 'inline-block' });
+                box.appendChild(d);
+                return d;
+            });
+            el.appendChild(box);
+            const anims = ctx.reduced ? [] : dots.map((d, i) => ctx.animate(d, [{ transform: 'translateY(0)', opacity: 0.4 }, { transform: 'translateY(-5px)', opacity: 1, offset: 0.3 }, { transform: 'translateY(0)', opacity: 0.4, offset: 0.6 }, { transform: 'translateY(0)', opacity: 0.4 }], { duration: o.period, delay: (i * o.period) / 6, iterations: Infinity }));
+            const stop = () => (anims.forEach((a) => a?.cancel()), box.remove());
+            ctx.onCleanup(stop);
+            return stop;
+        },
+    },
+    {
+        name: 'message-in',
+        kind: 'enter',
+        description: 'A chat bubble pops in from its side (`side` left | right, or `data-side`) with a small overshoot (`duration`).',
+        defaults: { side: '', duration: 420 },
+        run: (el, o, ctx) => {
+            const side = o.side || el.dataset.side || 'left';
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 })?.finished.catch(() => undefined);
+            el.style.transformOrigin = side === 'right' ? '100% 100%' : '0 100%';
+            return ctx.animate(el, [{ transform: `translateX(${side === 'right' ? 24 : -24}px) scale(.6)`, opacity: 0 }, { transform: 'scale(1.04)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.3,1)' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'reaction-burst',
+        kind: 'click',
+        description: 'The reaction emoji (`emoji`, default the element text) floats up in a small fan and fades (`count`, `spread`).',
+        defaults: { emoji: '', count: 5, spread: 70, duration: 900 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const r = el.getBoundingClientRect();
+            const emo = o.emoji || (el.textContent || '❤️').trim().slice(0, 2) || '❤️';
+            const parts = fanAngles(o.count, o.spread).map((deg, i) => {
+                const s = span('', emo);
+                Object.assign(s.style, { position: 'fixed', left: `${r.left + r.width / 2 - 10}px`, top: `${r.top}px`, fontSize: '20px', pointerEvents: 'none', zIndex: '2147483000' });
+                document.body.appendChild(s);
+                const rad = (deg * Math.PI) / 180;
+                const dist = 50 + (i % 2) * 18;
+                const a = ctx.animate(s, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${(Math.sin(rad) * dist * 0.5).toFixed(1)}px,${(-dist * 0.5).toFixed(1)}px) scale(1.1)`, opacity: 1, offset: 0.3 }, { transform: `translate(${(Math.sin(rad) * dist).toFixed(1)}px,${(-Math.cos(rad) * dist - 20).toFixed(1)}px) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 40, easing: 'ease-out' });
+                const end = () => s.remove();
+                if (a)
+                    a.finished.then(end, end);
+                else
+                    end();
+                ctx.onCleanup(end);
+                return a;
+            });
+            return Promise.all(parts.map((a) => a?.finished.catch(() => undefined)));
+        },
+    },
+    {
+        name: 'read-receipt',
+        kind: 'enter',
+        description: '✓✓ ticks draw in one after the other and turn `color` (blue) — “seen” (`color`).',
+        defaults: { color: '#3b82f6', duration: 600 },
+        run: (el, o, ctx) => {
+            let t = el.querySelector('.usa-fx-ticks');
+            if (!t) {
+                t = span('usa-fx-ticks', '✓✓');
+                Object.assign(t.style, { display: 'inline-block', marginLeft: '4px', letterSpacing: '-4px', fontWeight: '700' });
+                el.appendChild(t);
+            }
+            if (ctx.reduced)
+                return void (t.style.color = o.color);
+            return ctx.animate(t, [{ clipPath: 'inset(0 100% 0 0)', color: 'currentColor' }, { clipPath: 'inset(0 0 0 0)', color: 'currentColor', offset: 0.6 }, { clipPath: 'inset(0 0 0 0)', color: o.color }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'mention-glow',
+        kind: 'attention',
+        description: 'A soft highlight sweeps in behind an @mention, then settles (`color`).',
+        defaults: { color: 'rgba(250,204,21,.45)', duration: 900 },
+        run: (el, o, ctx) => {
+            el.style.backgroundImage = `linear-gradient(${o.color},${o.color})`;
+            el.style.backgroundRepeat = 'no-repeat';
+            el.style.borderRadius = el.style.borderRadius || '4px';
+            if (ctx.reduced)
+                return void (el.style.backgroundSize = '100% 100%');
+            return ctx.animate(el, [{ backgroundSize: '0% 100%' }, { backgroundSize: '100% 100%' }], { duration: o.duration, easing: 'cubic-bezier(.3,.8,.3,1)', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register the 7.4 chat & social pack (idempotent). */
+function registerSocialPack() {
+    registry.registerEffects(SOCIAL_FX);
+}
+
+exports.SOCIAL_FX = SOCIAL_FX;
+exports.fanAngles = fanAngles;
+exports.registerSocialPack = registerSocialPack;
+//# sourceMappingURL=fx-social.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-social.cjs","sources":["../../src/components/fx2/social.ts"],"sourcesContent":["/**\n * 7.4 — Chat & social motion (`motionary/fx/social`, also\n * `motionary/components/fx-social`):\n *\n * - `typing-dots` (loop) — three dots bounce in a wave inside the element.\n * - `message-in` (enter) — a chat bubble pops in from its side (`side`\n *   \"left\" | \"right\", or `data-side`), with a little overshoot.\n * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a\n *   small fan and fades.\n * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).\n * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.\n *\n * Reduced motion: typing-dots shows static dots, message-in / read-receipt\n * fade, reaction-burst does nothing, mention-glow sets a static highlight.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */\nexport function fanAngles(n: number, spread = 60): number[] {\n  if (n <= 1) return [0];\n  return Array.from({ length: n }, (_, i) => Math.round(-spread / 2 + (spread * i) / (n - 1)));\n}\n\nconst span = (cls: string, text = ''): HTMLSpanElement => {\n  const s = document.createElement('span');\n  s.className = cls;\n  s.setAttribute('aria-hidden', 'true');\n  s.textContent = text;\n  return s;\n};\n\nexport const SOCIAL_FX: EffectDefinition[] = [\n  {\n    name: 'typing-dots',\n    kind: 'loop',\n    description: 'Three dots bounce in a wave inside the element — the “is typing…” indicator (`color`, `period`).',\n    defaults: { color: 'currentColor', period: 1100 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const box = span('usa-fx-typing');\n      Object.assign(box.style, { display: 'inline-flex', gap: '4px', alignItems: 'center', padding: '2px 0' });\n      const dots = [0, 1, 2].map(() => {\n        const d = span('');\n        Object.assign(d.style, { width: '7px', height: '7px', borderRadius: '50%', background: o.color, opacity: '.6', display: 'inline-block' });\n        box.appendChild(d);\n        return d;\n      });\n      el.appendChild(box);\n      const anims = ctx.reduced ? [] : dots.map((d, i) => ctx.animate(d, [{ transform: 'translateY(0)', opacity: 0.4 }, { transform: 'translateY(-5px)', opacity: 1, offset: 0.3 }, { transform: 'translateY(0)', opacity: 0.4, offset: 0.6 }, { transform: 'translateY(0)', opacity: 0.4 }], { duration: o.period, delay: (i * o.period) / 6, iterations: Infinity }));\n      const stop = () => (anims.forEach((a) => a?.cancel()), box.remove());\n      ctx.onCleanup(stop);\n      return stop;\n    },\n  },\n  {\n    name: 'message-in',\n    kind: 'enter',\n    description: 'A chat bubble pops in from its side (`side` left | right, or `data-side`) with a small overshoot (`duration`).',\n    defaults: { side: '', duration: 420 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const side = o.side || el.dataset.side || 'left';\n      if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 })?.finished.catch(() => undefined);\n      el.style.transformOrigin = side === 'right' ? '100% 100%' : '0 100%';\n      return ctx.animate(el, [{ transform: `translateX(${side === 'right' ? 24 : -24}px) scale(.6)`, opacity: 0 }, { transform: 'scale(1.04)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.3,1)' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'reaction-burst',\n    kind: 'click',\n    description: 'The reaction emoji (`emoji`, default the element text) floats up in a small fan and fades (`count`, `spread`).',\n    defaults: { emoji: '', count: 5, spread: 70, duration: 900 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const r = el.getBoundingClientRect();\n      const emo = o.emoji || (el.textContent || '❤️').trim().slice(0, 2) || '❤️';\n      const parts = fanAngles(o.count, o.spread).map((deg, i) => {\n        const s = span('', emo);\n        Object.assign(s.style, { position: 'fixed', left: `${r.left + r.width / 2 - 10}px`, top: `${r.top}px`, fontSize: '20px', pointerEvents: 'none', zIndex: '2147483000' });\n        document.body.appendChild(s);\n        const rad = (deg * Math.PI) / 180;\n        const dist = 50 + (i % 2) * 18;\n        const a = ctx.animate(s, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${(Math.sin(rad) * dist * 0.5).toFixed(1)}px,${(-dist * 0.5).toFixed(1)}px) scale(1.1)`, opacity: 1, offset: 0.3 }, { transform: `translate(${(Math.sin(rad) * dist).toFixed(1)}px,${(-Math.cos(rad) * dist - 20).toFixed(1)}px) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 40, easing: 'ease-out' });\n        const end = () => s.remove();\n        if (a) a.finished.then(end, end);\n        else end();\n        ctx.onCleanup(end);\n        return a;\n      });\n      return Promise.all(parts.map((a) => a?.finished.catch(() => undefined)));\n    },\n  },\n  {\n    name: 'read-receipt',\n    kind: 'enter',\n    description: '✓✓ ticks draw in one after the other and turn `color` (blue) — “seen” (`color`).',\n    defaults: { color: '#3b82f6', duration: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      let t = el.querySelector('.usa-fx-ticks') as HTMLElement | null;\n      if (!t) {\n        t = span('usa-fx-ticks', '✓✓');\n        Object.assign(t.style, { display: 'inline-block', marginLeft: '4px', letterSpacing: '-4px', fontWeight: '700' });\n        el.appendChild(t);\n      }\n      if (ctx.reduced) return void (t.style.color = o.color);\n      return ctx.animate(t, [{ clipPath: 'inset(0 100% 0 0)', color: 'currentColor' }, { clipPath: 'inset(0 0 0 0)', color: 'currentColor', offset: 0.6 }, { clipPath: 'inset(0 0 0 0)', color: o.color }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'mention-glow',\n    kind: 'attention',\n    description: 'A soft highlight sweeps in behind an @mention, then settles (`color`).',\n    defaults: { color: 'rgba(250,204,21,.45)', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      el.style.backgroundImage = `linear-gradient(${o.color},${o.color})`;\n      el.style.backgroundRepeat = 'no-repeat';\n      el.style.borderRadius = el.style.borderRadius || '4px';\n      if (ctx.reduced) return void (el.style.backgroundSize = '100% 100%');\n      return ctx.animate(el, [{ backgroundSize: '0% 100%' }, { backgroundSize: '100% 100%' }], { duration: o.duration, easing: 'cubic-bezier(.3,.8,.3,1)', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register the 7.4 chat & social pack (idempotent). */\nexport function registerSocialPack(): void {\n  registerEffects(SOCIAL_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,66 @@
+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.4 — Chat & social motion (`motionary/fx/social`, also
+ * `motionary/components/fx-social`):
+ *
+ * - `typing-dots` (loop) — three dots bounce in a wave inside the element.
+ * - `message-in` (enter) — a chat bubble pops in from its side (`side`
+ *   "left" | "right", or `data-side`), with a little overshoot.
+ * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a
+ *   small fan and fades.
+ * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).
+ * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.
+ *
+ * Reduced motion: typing-dots shows static dots, message-in / read-receipt
+ * fade, reaction-burst does nothing, mention-glow sets a static highlight.
+ */
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+declare function fanAngles(n: number, spread?: number): number[];
+declare const SOCIAL_FX: EffectDefinition[];
+/** Register the 7.4 chat & social pack (idempotent). */
+declare function registerSocialPack(): void;
+
+export { SOCIAL_FX, fanAngles, registerSocialPack };

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

@@ -0,0 +1,66 @@
+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.4 — Chat & social motion (`motionary/fx/social`, also
+ * `motionary/components/fx-social`):
+ *
+ * - `typing-dots` (loop) — three dots bounce in a wave inside the element.
+ * - `message-in` (enter) — a chat bubble pops in from its side (`side`
+ *   "left" | "right", or `data-side`), with a little overshoot.
+ * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a
+ *   small fan and fades.
+ * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).
+ * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.
+ *
+ * Reduced motion: typing-dots shows static dots, message-in / read-receipt
+ * fade, reaction-burst does nothing, mention-glow sets a static highlight.
+ */
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+declare function fanAngles(n: number, spread?: number): number[];
+declare const SOCIAL_FX: EffectDefinition[];
+/** Register the 7.4 chat & social pack (idempotent). */
+declare function registerSocialPack(): void;
+
+export { SOCIAL_FX, fanAngles, registerSocialPack };

package/dist/components/fx-social.js

@@ -0,0 +1,117 @@
+import { registerEffects } from '../chunks/registry-CyKExAmE.js';
+import '../chunks/base-2-yYc93C.js';
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+function fanAngles(n, spread = 60) {
+    if (n <= 1)
+        return [0];
+    return Array.from({ length: n }, (_, i) => Math.round(-spread / 2 + (spread * i) / (n - 1)));
+}
+const span = (cls, text = '') => {
+    const s = document.createElement('span');
+    s.className = cls;
+    s.setAttribute('aria-hidden', 'true');
+    s.textContent = text;
+    return s;
+};
+const SOCIAL_FX = [
+    {
+        name: 'typing-dots',
+        kind: 'loop',
+        description: 'Three dots bounce in a wave inside the element — the “is typing…” indicator (`color`, `period`).',
+        defaults: { color: 'currentColor', period: 1100 },
+        run: (el, o, ctx) => {
+            const box = span('usa-fx-typing');
+            Object.assign(box.style, { display: 'inline-flex', gap: '4px', alignItems: 'center', padding: '2px 0' });
+            const dots = [0, 1, 2].map(() => {
+                const d = span('');
+                Object.assign(d.style, { width: '7px', height: '7px', borderRadius: '50%', background: o.color, opacity: '.6', display: 'inline-block' });
+                box.appendChild(d);
+                return d;
+            });
+            el.appendChild(box);
+            const anims = ctx.reduced ? [] : dots.map((d, i) => ctx.animate(d, [{ transform: 'translateY(0)', opacity: 0.4 }, { transform: 'translateY(-5px)', opacity: 1, offset: 0.3 }, { transform: 'translateY(0)', opacity: 0.4, offset: 0.6 }, { transform: 'translateY(0)', opacity: 0.4 }], { duration: o.period, delay: (i * o.period) / 6, iterations: Infinity }));
+            const stop = () => (anims.forEach((a) => a?.cancel()), box.remove());
+            ctx.onCleanup(stop);
+            return stop;
+        },
+    },
+    {
+        name: 'message-in',
+        kind: 'enter',
+        description: 'A chat bubble pops in from its side (`side` left | right, or `data-side`) with a small overshoot (`duration`).',
+        defaults: { side: '', duration: 420 },
+        run: (el, o, ctx) => {
+            const side = o.side || el.dataset.side || 'left';
+            if (ctx.reduced)
+                return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 })?.finished.catch(() => undefined);
+            el.style.transformOrigin = side === 'right' ? '100% 100%' : '0 100%';
+            return ctx.animate(el, [{ transform: `translateX(${side === 'right' ? 24 : -24}px) scale(.6)`, opacity: 0 }, { transform: 'scale(1.04)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.3,1)' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'reaction-burst',
+        kind: 'click',
+        description: 'The reaction emoji (`emoji`, default the element text) floats up in a small fan and fades (`count`, `spread`).',
+        defaults: { emoji: '', count: 5, spread: 70, duration: 900 },
+        reduced: 'skip',
+        run: (el, o, ctx) => {
+            const r = el.getBoundingClientRect();
+            const emo = o.emoji || (el.textContent || '❤️').trim().slice(0, 2) || '❤️';
+            const parts = fanAngles(o.count, o.spread).map((deg, i) => {
+                const s = span('', emo);
+                Object.assign(s.style, { position: 'fixed', left: `${r.left + r.width / 2 - 10}px`, top: `${r.top}px`, fontSize: '20px', pointerEvents: 'none', zIndex: '2147483000' });
+                document.body.appendChild(s);
+                const rad = (deg * Math.PI) / 180;
+                const dist = 50 + (i % 2) * 18;
+                const a = ctx.animate(s, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${(Math.sin(rad) * dist * 0.5).toFixed(1)}px,${(-dist * 0.5).toFixed(1)}px) scale(1.1)`, opacity: 1, offset: 0.3 }, { transform: `translate(${(Math.sin(rad) * dist).toFixed(1)}px,${(-Math.cos(rad) * dist - 20).toFixed(1)}px) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 40, easing: 'ease-out' });
+                const end = () => s.remove();
+                if (a)
+                    a.finished.then(end, end);
+                else
+                    end();
+                ctx.onCleanup(end);
+                return a;
+            });
+            return Promise.all(parts.map((a) => a?.finished.catch(() => undefined)));
+        },
+    },
+    {
+        name: 'read-receipt',
+        kind: 'enter',
+        description: '✓✓ ticks draw in one after the other and turn `color` (blue) — “seen” (`color`).',
+        defaults: { color: '#3b82f6', duration: 600 },
+        run: (el, o, ctx) => {
+            let t = el.querySelector('.usa-fx-ticks');
+            if (!t) {
+                t = span('usa-fx-ticks', '✓✓');
+                Object.assign(t.style, { display: 'inline-block', marginLeft: '4px', letterSpacing: '-4px', fontWeight: '700' });
+                el.appendChild(t);
+            }
+            if (ctx.reduced)
+                return void (t.style.color = o.color);
+            return ctx.animate(t, [{ clipPath: 'inset(0 100% 0 0)', color: 'currentColor' }, { clipPath: 'inset(0 0 0 0)', color: 'currentColor', offset: 0.6 }, { clipPath: 'inset(0 0 0 0)', color: o.color }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'mention-glow',
+        kind: 'attention',
+        description: 'A soft highlight sweeps in behind an @mention, then settles (`color`).',
+        defaults: { color: 'rgba(250,204,21,.45)', duration: 900 },
+        run: (el, o, ctx) => {
+            el.style.backgroundImage = `linear-gradient(${o.color},${o.color})`;
+            el.style.backgroundRepeat = 'no-repeat';
+            el.style.borderRadius = el.style.borderRadius || '4px';
+            if (ctx.reduced)
+                return void (el.style.backgroundSize = '100% 100%');
+            return ctx.animate(el, [{ backgroundSize: '0% 100%' }, { backgroundSize: '100% 100%' }], { duration: o.duration, easing: 'cubic-bezier(.3,.8,.3,1)', fill: 'forwards' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register the 7.4 chat & social pack (idempotent). */
+function registerSocialPack() {
+    registerEffects(SOCIAL_FX);
+}
+
+export { SOCIAL_FX, fanAngles, registerSocialPack };
+//# sourceMappingURL=fx-social.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-social.js","sources":["../../src/components/fx2/social.ts"],"sourcesContent":["/**\n * 7.4 — Chat & social motion (`motionary/fx/social`, also\n * `motionary/components/fx-social`):\n *\n * - `typing-dots` (loop) — three dots bounce in a wave inside the element.\n * - `message-in` (enter) — a chat bubble pops in from its side (`side`\n *   \"left\" | \"right\", or `data-side`), with a little overshoot.\n * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a\n *   small fan and fades.\n * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).\n * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.\n *\n * Reduced motion: typing-dots shows static dots, message-in / read-receipt\n * fade, reaction-burst does nothing, mention-glow sets a static highlight.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */\nexport function fanAngles(n: number, spread = 60): number[] {\n  if (n <= 1) return [0];\n  return Array.from({ length: n }, (_, i) => Math.round(-spread / 2 + (spread * i) / (n - 1)));\n}\n\nconst span = (cls: string, text = ''): HTMLSpanElement => {\n  const s = document.createElement('span');\n  s.className = cls;\n  s.setAttribute('aria-hidden', 'true');\n  s.textContent = text;\n  return s;\n};\n\nexport const SOCIAL_FX: EffectDefinition[] = [\n  {\n    name: 'typing-dots',\n    kind: 'loop',\n    description: 'Three dots bounce in a wave inside the element — the “is typing…” indicator (`color`, `period`).',\n    defaults: { color: 'currentColor', period: 1100 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const box = span('usa-fx-typing');\n      Object.assign(box.style, { display: 'inline-flex', gap: '4px', alignItems: 'center', padding: '2px 0' });\n      const dots = [0, 1, 2].map(() => {\n        const d = span('');\n        Object.assign(d.style, { width: '7px', height: '7px', borderRadius: '50%', background: o.color, opacity: '.6', display: 'inline-block' });\n        box.appendChild(d);\n        return d;\n      });\n      el.appendChild(box);\n      const anims = ctx.reduced ? [] : dots.map((d, i) => ctx.animate(d, [{ transform: 'translateY(0)', opacity: 0.4 }, { transform: 'translateY(-5px)', opacity: 1, offset: 0.3 }, { transform: 'translateY(0)', opacity: 0.4, offset: 0.6 }, { transform: 'translateY(0)', opacity: 0.4 }], { duration: o.period, delay: (i * o.period) / 6, iterations: Infinity }));\n      const stop = () => (anims.forEach((a) => a?.cancel()), box.remove());\n      ctx.onCleanup(stop);\n      return stop;\n    },\n  },\n  {\n    name: 'message-in',\n    kind: 'enter',\n    description: 'A chat bubble pops in from its side (`side` left | right, or `data-side`) with a small overshoot (`duration`).',\n    defaults: { side: '', duration: 420 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const side = o.side || el.dataset.side || 'left';\n      if (ctx.reduced) return ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 200 })?.finished.catch(() => undefined);\n      el.style.transformOrigin = side === 'right' ? '100% 100%' : '0 100%';\n      return ctx.animate(el, [{ transform: `translateX(${side === 'right' ? 24 : -24}px) scale(.6)`, opacity: 0 }, { transform: 'scale(1.04)', opacity: 1, offset: 0.65 }, { transform: 'none', opacity: 1 }], { duration: o.duration, easing: 'cubic-bezier(.2,.9,.3,1)' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'reaction-burst',\n    kind: 'click',\n    description: 'The reaction emoji (`emoji`, default the element text) floats up in a small fan and fades (`count`, `spread`).',\n    defaults: { emoji: '', count: 5, spread: 70, duration: 900 },\n    reduced: 'skip',\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      const r = el.getBoundingClientRect();\n      const emo = o.emoji || (el.textContent || '❤️').trim().slice(0, 2) || '❤️';\n      const parts = fanAngles(o.count, o.spread).map((deg, i) => {\n        const s = span('', emo);\n        Object.assign(s.style, { position: 'fixed', left: `${r.left + r.width / 2 - 10}px`, top: `${r.top}px`, fontSize: '20px', pointerEvents: 'none', zIndex: '2147483000' });\n        document.body.appendChild(s);\n        const rad = (deg * Math.PI) / 180;\n        const dist = 50 + (i % 2) * 18;\n        const a = ctx.animate(s, [{ transform: 'translate(0,0) scale(.4)', opacity: 0 }, { transform: `translate(${(Math.sin(rad) * dist * 0.5).toFixed(1)}px,${(-dist * 0.5).toFixed(1)}px) scale(1.1)`, opacity: 1, offset: 0.3 }, { transform: `translate(${(Math.sin(rad) * dist).toFixed(1)}px,${(-Math.cos(rad) * dist - 20).toFixed(1)}px) scale(.9)`, opacity: 0 }], { duration: o.duration, delay: i * 40, easing: 'ease-out' });\n        const end = () => s.remove();\n        if (a) a.finished.then(end, end);\n        else end();\n        ctx.onCleanup(end);\n        return a;\n      });\n      return Promise.all(parts.map((a) => a?.finished.catch(() => undefined)));\n    },\n  },\n  {\n    name: 'read-receipt',\n    kind: 'enter',\n    description: '✓✓ ticks draw in one after the other and turn `color` (blue) — “seen” (`color`).',\n    defaults: { color: '#3b82f6', duration: 600 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      let t = el.querySelector('.usa-fx-ticks') as HTMLElement | null;\n      if (!t) {\n        t = span('usa-fx-ticks', '✓✓');\n        Object.assign(t.style, { display: 'inline-block', marginLeft: '4px', letterSpacing: '-4px', fontWeight: '700' });\n        el.appendChild(t);\n      }\n      if (ctx.reduced) return void (t.style.color = o.color);\n      return ctx.animate(t, [{ clipPath: 'inset(0 100% 0 0)', color: 'currentColor' }, { clipPath: 'inset(0 0 0 0)', color: 'currentColor', offset: 0.6 }, { clipPath: 'inset(0 0 0 0)', color: o.color }], { duration: o.duration, easing: 'ease-out', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'mention-glow',\n    kind: 'attention',\n    description: 'A soft highlight sweeps in behind an @mention, then settles (`color`).',\n    defaults: { color: 'rgba(250,204,21,.45)', duration: 900 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      el.style.backgroundImage = `linear-gradient(${o.color},${o.color})`;\n      el.style.backgroundRepeat = 'no-repeat';\n      el.style.borderRadius = el.style.borderRadius || '4px';\n      if (ctx.reduced) return void (el.style.backgroundSize = '100% 100%');\n      return ctx.animate(el, [{ backgroundSize: '0% 100%' }, { backgroundSize: '100% 100%' }], { duration: o.duration, easing: 'cubic-bezier(.3,.8,.3,1)', fill: 'forwards' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register the 7.4 chat & social pack (idempotent). */\nexport function registerSocialPack(): void {\n  registerEffects(SOCIAL_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx2.cjs

@@ -13,6 +13,7 @@ var components_fxFocus = require('./fx-focus.cjs');
 var components_fxMusic = require('./fx-music.cjs');
 var components_fxChart = require('./fx-chart.cjs');
 var components_fxShop = require('./fx-shop.cjs');
+var components_fxSocial = require('./fx-social.cjs');
 require('../chunks/registry-DehBVRDV.cjs');
 require('../chunks/base-BaQV-2ha.cjs');
 require('../chunks/generative-BHIj-NU0.cjs');
@@ -33,6 +34,7 @@ const EFFECT_PACKS = {
     music: components_fxMusic.MUSIC_FX,
     chart: components_fxChart.CHART_FX,
     shop: components_fxShop.SHOP_FX,
+    social: components_fxSocial.SOCIAL_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -48,6 +50,7 @@ function registerEffectPacks() {
     components_fxMusic.registerMusicPack();
     components_fxChart.registerChartPack();
     components_fxShop.registerShopPack();
+    components_fxSocial.registerSocialPack();
 }
 
 exports.EFFECT_PACK_FORMAT = components_marketplace.EFFECT_PACK_FORMAT;
@@ -99,6 +102,9 @@ exports.registerChartPack = components_fxChart.registerChartPack;
 exports.SHOP_FX = components_fxShop.SHOP_FX;
 exports.arcPath = components_fxShop.arcPath;
 exports.registerShopPack = components_fxShop.registerShopPack;
+exports.SOCIAL_FX = components_fxSocial.SOCIAL_FX;
+exports.fanAngles = components_fxSocial.fanAngles;
+exports.registerSocialPack = components_fxSocial.registerSocialPack;
 exports.EFFECT_PACKS = EFFECT_PACKS;
 exports.registerEffectPacks = registerEffectPacks;
 //# sourceMappingURL=fx2.cjs.map

package/dist/components/fx2.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA8CA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;;AAGf;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AACpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"fx2.cjs","sources":["../../src/components/fx2/index.ts"],"sourcesContent":["/**\n * The 6.x effect packs, one entry each (`motionary/components/fx-gpu`, …) so\n * their size budgets stay separate. This module (`registerFx2()`) registers\n * them all — used by dist/widgets.umd.js and the showcase.\n */\nimport type { EffectDefinition } from '../fx/registry';\nexport { EFFECT_PACK_FORMAT, packManifest, validateManifest, loadEffectPack } from './manifest';\nexport type { EffectPackManifest } from './manifest';\nimport { GPU_FX, registerGpuPack } from './gpu';\nimport { TEXT3_FX, registerTextPack, splitChars } from './text3';\nimport { LIGHT_FX, registerLightPack, trackPointer } from './light';\nimport { DEPTH3_FX, register3dPack } from './depth3';\nimport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath } from './morph2';\nimport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions } from './transitions2';\nimport { WEATHER_FX, registerWeatherPack, skyAt } from './weather';\nimport { PHYSICS2_FX, registerPhysicsPack, VerletWorld } from './physics2';\nimport { FOCUS_FX, registerFocusPack } from './focus';\nimport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample } from './music';\nimport { CHART_FX, registerChartPack, parseFigure } from './chart';\nimport { SHOP_FX, registerShopPack, arcPath } from './shop';\nimport { SOCIAL_FX, registerSocialPack, fanAngles } from './social';\n\nexport { GPU_FX, registerGpuPack, TEXT3_FX, registerTextPack, splitChars };\nexport { shaderBackground, supportsWebGL2, fieldFallback, GLSL_HEAD } from './gl';\nexport { supportsWebGPU, glslToWgsl, wgslModule, webgpuBackground, WGSL_HEAD } from './webgpu';\nexport type { ShaderSpec } from './gl';\n\nexport { LIGHT_FX, registerLightPack, trackPointer };\n\nexport { DEPTH3_FX, register3dPack };\n\nexport { MORPH2_FX, registerMorphPack, samplePath, pointsToPath };\n\nexport { TRANSITIONS2_FX, registerTransitionsPack, pageTransition, crossDocumentTransitions };\n\nexport { WEATHER_FX, registerWeatherPack, skyAt };\n\nexport { PHYSICS2_FX, registerPhysicsPack, VerletWorld };\n\nexport { FOCUS_FX, registerFocusPack };\n\nexport { MUSIC_FX, registerMusicPack, syntheticSample, musicSample };\n\nexport { CHART_FX, registerChartPack, parseFigure };\n\nexport { SHOP_FX, registerShopPack, arcPath };\n\nexport { SOCIAL_FX, registerSocialPack, fanAngles };\n\n/** The 6.x effect packs by name. */\nexport const EFFECT_PACKS: Record<string, EffectDefinition[]> = {\n  gpu: GPU_FX,\n  text: TEXT3_FX,\n  light: LIGHT_FX,\n  depth: DEPTH3_FX,\n  morph: MORPH2_FX,\n  transitions: TRANSITIONS2_FX,\n  weather: WEATHER_FX,\n  physics: PHYSICS2_FX,\n  focus: FOCUS_FX,\n  music: MUSIC_FX,\n  chart: CHART_FX,\n  shop: SHOP_FX,\n  social: SOCIAL_FX,\n};\n\n/** Register every 6.x effect pack (idempotent). */\nexport function registerEffectPacks(): void {\n  registerGpuPack();\n  registerTextPack();\n  registerLightPack();\n  register3dPack();\n  registerMorphPack();\n  registerTransitionsPack();\n  registerWeatherPack();\n  registerPhysicsPack();\n  registerFocusPack();\n  registerMusicPack();\n  registerChartPack();\n  registerShopPack();\n  registerSocialPack();\n}\n\n\n"],"names":["GPU_FX","TEXT3_FX","LIGHT_FX","DEPTH3_FX","MORPH2_FX","TRANSITIONS2_FX","WEATHER_FX","PHYSICS2_FX","FOCUS_FX","MUSIC_FX","CHART_FX","SHOP_FX","SOCIAL_FX","registerGpuPack","registerTextPack","registerLightPack","register3dPack","registerMorphPack","registerTransitionsPack","registerWeatherPack","registerPhysicsPack","registerFocusPack","registerMusicPack","registerChartPack","registerShopPack","registerSocialPack"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAiDA;AACO,MAAM,YAAY,GAAuC;AAC9D,IAAA,GAAG,EAAEA,uBAAM;AACX,IAAA,IAAI,EAAEC,0BAAQ;AACd,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,yBAAS;AAChB,IAAA,KAAK,EAAEC,4BAAS;AAChB,IAAA,WAAW,EAAEC,wCAAe;AAC5B,IAAA,OAAO,EAAEC,+BAAU;AACnB,IAAA,OAAO,EAAEC,gCAAW;AACpB,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,KAAK,EAAEC,2BAAQ;AACf,IAAA,IAAI,EAAEC,yBAAO;AACb,IAAA,MAAM,EAAEC,6BAAS;;AAGnB;SACgB,mBAAmB,GAAA;AACjC,IAAAC,gCAAe,EAAE;AACjB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,8BAAc,EAAE;AAChB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,gDAAuB,EAAE;AACzB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,wCAAmB,EAAE;AACrB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,oCAAiB,EAAE;AACnB,IAAAC,kCAAgB,EAAE;AAClB,IAAAC,sCAAkB,EAAE;AACtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/fx2.d.cts

@@ -467,6 +467,28 @@ declare const SHOP_FX: EffectDefinition[];
 /** Register the 7.3 e-commerce pack (idempotent). */
 declare function registerShopPack(): void;
 
+/**
+ * 7.4 — Chat & social motion (`motionary/fx/social`, also
+ * `motionary/components/fx-social`):
+ *
+ * - `typing-dots` (loop) — three dots bounce in a wave inside the element.
+ * - `message-in` (enter) — a chat bubble pops in from its side (`side`
+ *   "left" | "right", or `data-side`), with a little overshoot.
+ * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a
+ *   small fan and fades.
+ * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).
+ * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.
+ *
+ * Reduced motion: typing-dots shows static dots, message-in / read-receipt
+ * fade, reaction-burst does nothing, mention-glow sets a static highlight.
+ */
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+declare function fanAngles(n: number, spread?: number): number[];
+declare const SOCIAL_FX: EffectDefinition[];
+/** Register the 7.4 chat & social pack (idempotent). */
+declare function registerSocialPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -576,5 +598,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerTextPack, registerTransitionsPack, registerWeatherPack, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, trackPointer, validateManifest, webgpuBackground, wgslModule };
 export type { EffectPackManifest, ShaderSpec };

package/dist/components/fx2.d.ts

@@ -467,6 +467,28 @@ declare const SHOP_FX: EffectDefinition[];
 /** Register the 7.3 e-commerce pack (idempotent). */
 declare function registerShopPack(): void;
 
+/**
+ * 7.4 — Chat & social motion (`motionary/fx/social`, also
+ * `motionary/components/fx-social`):
+ *
+ * - `typing-dots` (loop) — three dots bounce in a wave inside the element.
+ * - `message-in` (enter) — a chat bubble pops in from its side (`side`
+ *   "left" | "right", or `data-side`), with a little overshoot.
+ * - `reaction-burst` (click) — the element's emoji (`emoji`) floats up in a
+ *   small fan and fades.
+ * - `read-receipt` (enter) — ✓✓ ticks draw in and turn blue (`color`).
+ * - `mention-glow` (attention) — a soft highlight sweeps behind an @mention.
+ *
+ * Reduced motion: typing-dots shows static dots, message-in / read-receipt
+ * fade, reaction-burst does nothing, mention-glow sets a static highlight.
+ */
+
+/** Fan-out angles (deg) for `n` floating emoji, centred on straight up (7.4). */
+declare function fanAngles(n: number, spread?: number): number[];
+declare const SOCIAL_FX: EffectDefinition[];
+/** Register the 7.4 chat & social pack (idempotent). */
+declare function registerSocialPack(): void;
+
 /**
  * 5.5 — generative backgrounds on Canvas 2D, registered through
  * `registerEffect()` (kind `background`): `flow-field`, `voronoi`,
@@ -576,5 +598,5 @@ declare const EFFECT_PACKS: Record<string, EffectDefinition[]>;
 /** Register every 6.x effect pack (idempotent). */
 declare function registerEffectPacks(): void;
 
-export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerTextPack, registerTransitionsPack, registerWeatherPack, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, trackPointer, validateManifest, webgpuBackground, wgslModule };
+export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, EFFECT_PACK_FORMAT, FOCUS_FX, GLSL_HEAD, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, VerletWorld, WEATHER_FX, WGSL_HEAD, arcPath, crossDocumentTransitions, fanAngles, fieldFallback, glslToWgsl, loadEffectPack, musicSample, packManifest, pageTransition, parseFigure, pointsToPath, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack, samplePath, shaderBackground, skyAt, splitChars, supportsWebGL2, supportsWebGPU, syntheticSample, trackPointer, validateManifest, webgpuBackground, wgslModule };
 export type { EffectPackManifest, ShaderSpec };

package/dist/components/fx2.js

@@ -21,6 +21,8 @@ import { CHART_FX, registerChartPack } from './fx-chart.js';
 export { parseFigure } from './fx-chart.js';
 import { SHOP_FX, registerShopPack } from './fx-shop.js';
 export { arcPath } from './fx-shop.js';
+import { SOCIAL_FX, registerSocialPack } from './fx-social.js';
+export { fanAngles } from './fx-social.js';
 import '../chunks/registry-CyKExAmE.js';
 import '../chunks/base-2-yYc93C.js';
 import '../chunks/generative-2LhxG5BJ.js';
@@ -41,6 +43,7 @@ const EFFECT_PACKS = {
     music: MUSIC_FX,
     chart: CHART_FX,
     shop: SHOP_FX,
+    social: SOCIAL_FX,
 };
 /** Register every 6.x effect pack (idempotent). */
 function registerEffectPacks() {
@@ -56,7 +59,8 @@ function registerEffectPacks() {
     registerMusicPack();
     registerChartPack();
     registerShopPack();
+    registerSocialPack();
 }
 
-export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, FOCUS_FX, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerTextPack, registerTransitionsPack, registerWeatherPack };
+export { CHART_FX, DEPTH3_FX, EFFECT_PACKS, FOCUS_FX, GPU_FX, LIGHT_FX, MORPH2_FX, MUSIC_FX, PHYSICS2_FX, SHOP_FX, SOCIAL_FX, TEXT3_FX, TRANSITIONS2_FX, WEATHER_FX, register3dPack, registerChartPack, registerEffectPacks, registerFocusPack, registerGpuPack, registerLightPack, registerMorphPack, registerMusicPack, registerPhysicsPack, registerShopPack, registerSocialPack, registerTextPack, registerTransitionsPack, registerWeatherPack };
 //# sourceMappingURL=fx2.js.map