use-scroll-animate 8.4.0 → 8.6.0

package/CHANGELOG.md

@@ -7,6 +7,39 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [8.6.0] - 2026-10-09
+
+### Added
+- **Theme system (8.6)** — five surface themes (`light`, `dark`, `neon`, `glass`, `neu` / neumorphism) driven by a `data-usa-surface` attribute; `SURFACE_THEMES`, `applySurfaceTheme(name, target?)`.
+- **2 new components (8.6)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-theme-switcher>` — segmented theme switcher: sets `data-usa-surface` on `target` (default `<html>`), sliding pill, circular View-Transition wipe from the click point (page-level), `themes`, `value`, `persist` (localStorage key); `usa:change` { theme }.
+  - `<usa-theme-surface>` — themeable card that follows the nearest `data-usa-surface` (or its own `theme`): neon glow edge that pulses, frosted glass with a sheen, soft neumorphic relief that presses; cross-fades on theme change; `theme`; `usa:theme` { theme }.
+- **Surface theme pack — `motionary/fx/surface`** (= `motionary/components/fx-surface`, `registerSurfacePack()`, also in `registerEffectPacks()`): `neon-ignite` (enter), `neon-pulse` (loop), `glass-frost` (enter), `neu-press` (attention). Names chosen not to override the existing 3.x `neon-flicker` theme effect.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- Theme switcher is a labelled `radiogroup` of `radio`s with roving tabindex and arrow keys; the swatches are `aria-hidden`. Theme surfaces keep your content and text contrast in every theme. Reduced motion: the switch is instant (no wipe, no pill slide), the neon / sheen loops stop, `neon-ignite` / `glass-frost` just show, `neon-pulse` is skipped, `neu-press` does nothing.
+
+### Fixed
+- the 5.8 theme packs (applyTheme / <usa-theme>) already own the `data-usa-theme` attribute, so the 8.6 surface themes use `data-usa-surface` instead (no clash with neon/paper/glass/retro/brutalist motion themes); effect names neon-ignite (not the 5.8 neon-flicker) and 8.5 paper-unfold (not 5.8 paper-fold) avoid overriding existing effects.
+
+## [8.5.0] - 2026-10-09
+
+### Added
+- **2 new components (8.5)** in `motionary/components/widgets` (also in `dist/widgets.umd.js`):
+  - `<usa-sticky-wall>` — wall of sticky notes: each child becomes a pinned paper note (`data-color` yellow · pink · blue · green, or cycling) with a slight tilt (`seed`); notes drop onto the wall one by one on first view; click / Enter lifts a note to the front (`pick(index)`, `usa:pick` { index }); `notes`, `label`.
+  - `<usa-sketch-chart>` — hand-drawn chart: wobbly pencil axes, hatched bars (`type="bar"`) or a sketchy line with dots (`type="line"`), sketched in stroke by stroke on first view; `values`, `labels`, `color`, `label`; `values` / `setValues()`; `usa:drawn`.
+- **Paper & hand-drawn pack — `motionary/fx/paper`** (= `motionary/components/fx-paper`, `registerPaperPack()`, also in `registerEffectPacks()`): `paper-unfold` (enter), `pencil-sketch` (enter), `watercolor` (enter), `crumple` (attention). `roughLine()`, `paperRandom()`.
+- Showcase: 4 new gallery cards with copyable code, live demos and live Store thumbnails.
+
+### Accessibility
+- Sticky wall is a `list` of focusable `listitem`s (Enter / Space picks a note). Sketch chart is an `img` whose label lists every label and value; the drawing is `aria-hidden`. Reduced motion: notes and charts are shown at once, `paper-unfold` / `watercolor` fade in, `pencil-sketch` shows the drawing, `crumple` does nothing.
+
+### Fixed
+- the 5.8 theme pack already registers a `paper-fold` effect, so the 8.5 unfold effect is named `paper-unfold` (registering it as `paper-fold` would have overridden the 5.8 theme effect).
+- the sketch chart only sketched itself once, on first view — it now re-sketches on click / `redraw()` (gallery and Store demos replay it).
+- the sticky-wall and sketch-chart gallery / Store demos only animated once on first view — demos now have "Pick a note" / "New data" buttons (wired to `pick()` / `setValues()` + `redraw()`).
+
 ## [8.4.0] - 2026-10-09
 
 ### Added

package/dist/components/fx-paper.cjs

@@ -0,0 +1,108 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+/** A deterministic PRNG in [0, 1) from a seed (8.5). */
+function paperRandom(seed) {
+    let s = Math.abs(Math.round(seed * 1000)) % 233280 || 11;
+    return () => (s = (s * 9301 + 49297) % 233280) / 233280;
+}
+/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */
+function roughLine(x1, y1, x2, y2, seed = 1, amp = 1.5) {
+    const r = paperRandom(seed);
+    const j = () => (r() - 0.5) * 2 * amp;
+    const mx = (x1 + x2) / 2 + j() * 1.5;
+    const my = (y1 + y2) / 2 + j() * 1.5;
+    const f = (n) => Math.round(n * 10) / 10;
+    return `M${f(x1 + j())} ${f(y1 + j())} Q${f(mx)} ${f(my)} ${f(x2 + j())} ${f(y2 + j())}`;
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+const PAPER_FX = [
+    {
+        name: 'paper-unfold',
+        kind: 'enter',
+        description: 'The element unfolds like a folded sheet of paper, with a soft crease shadow (`folds`).',
+        defaults: { duration: 900, folds: 2 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const n = Math.max(1, Math.min(4, Math.round(Number(o.folds) || 2)));
+            const frames = [{ transform: 'perspective(800px) rotateX(-90deg)', opacity: 0, filter: 'brightness(.7)', offset: 0 }];
+            for (let i = 1; i <= n; i++)
+                frames.push({ transform: `perspective(800px) rotateX(${i % 2 ? 25 : -12}deg) scaleY(${(0.5 + (0.5 * i) / (n + 1)).toFixed(2)})`, opacity: 1, filter: 'brightness(.85)', offset: (i / (n + 1)) * 0.9 });
+            frames.push({ transform: 'none', opacity: 1, filter: 'none', offset: 1 });
+            const prev = el.style.transformOrigin;
+            el.style.transformOrigin = 'top center';
+            ctx.onCleanup(() => (el.style.transformOrigin = prev));
+            return ctx.animate(el, frames, { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'pencil-sketch',
+        kind: 'enter',
+        description: 'SVG strokes inside are sketched in with a slightly wobbly pencil, one after another (`duration`, `stagger`).',
+        defaults: { duration: 700, stagger: 120 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const strokes = Array.from(el.querySelectorAll('path, line, polyline, rect, circle, ellipse'));
+            const runs = strokes.map((p, i) => {
+                let len = 200;
+                try {
+                    len = p.getTotalLength?.() || 200;
+                }
+                catch {
+                    /* not rendered */
+                }
+                const prev = p.style.strokeDasharray;
+                p.style.strokeDasharray = `${len}`;
+                ctx.onCleanup(() => (p.style.strokeDasharray = prev));
+                return ctx.animate(p, [{ strokeDashoffset: `${len}`, transform: 'translate(0.6px,-0.4px)' }, { transform: 'translate(-0.5px,0.5px)', offset: 0.5 }, { strokeDashoffset: '0', transform: 'none' }], { duration: o.duration, delay: i * (Number(o.stagger) || 0), easing: 'cubic-bezier(.5,.1,.4,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+            });
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'watercolor',
+        kind: 'enter',
+        description: 'The element bleeds in like wet watercolour — blurred and saturated, spreading from the middle — then dries (`duration`).',
+        defaults: { duration: 1400 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            return ctx.animate(el, [
+                { opacity: 0, filter: 'blur(10px) saturate(2.2)', clipPath: 'circle(8% at 50% 50%)' },
+                { opacity: 0.9, filter: 'blur(4px) saturate(1.8)', clipPath: 'circle(55% at 48% 52%)', offset: 0.5 },
+                { opacity: 1, filter: 'blur(0) saturate(1)', clipPath: 'circle(150% at 50% 50%)' },
+            ], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'crumple',
+        kind: 'attention',
+        description: 'The element scrunches like crumpled paper and springs back flat.',
+        defaults: { duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [
+                { transform: 'none' },
+                { transform: 'scale(.82,.9) rotate(-4deg) skewX(6deg)', filter: 'brightness(.9)', offset: 0.3 },
+                { transform: 'scale(.9,.8) rotate(3deg) skewY(-5deg)', offset: 0.5 },
+                { transform: 'scale(1.04) rotate(-1deg)', filter: 'none', offset: 0.8 },
+                { transform: 'none' },
+            ], { duration: o.duration, easing: 'ease-in-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */
+function registerPaperPack() {
+    registry.registerEffects(PAPER_FX);
+}
+
+exports.PAPER_FX = PAPER_FX;
+exports.paperRandom = paperRandom;
+exports.registerPaperPack = registerPaperPack;
+exports.roughLine = roughLine;
+//# sourceMappingURL=fx-paper.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-paper.cjs","sources":["../../src/components/fx2/paper.ts"],"sourcesContent":["/**\n * 8.5 — Paper & hand-drawn pack (`motionary/fx/paper`, also `motionary/components/fx-paper`):\n *\n * - `paper-unfold` (enter) — the element unfolds like a folded sheet of paper,\n *   top flap first, with a soft crease shadow (`folds`).\n * - `pencil-sketch` (enter) — SVG strokes inside are sketched in with a\n *   slightly wobbly pencil, one after another (`duration`, `stagger`).\n * - `watercolor` (enter) — the element bleeds in like wet watercolour:\n *   blurred, saturated, spreading from the middle, then dries (`duration`).\n * - `crumple` (attention) — the element scrunches like crumpled paper and\n *   springs back flat.\n *\n * Reduced motion: paper-unfold / watercolor fade in, pencil-sketch shows the\n * drawing, crumple does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** A deterministic PRNG in [0, 1) from a seed (8.5). */\nexport function paperRandom(seed: number): () => number {\n  let s = Math.abs(Math.round(seed * 1000)) % 233280 || 11;\n  return () => (s = (s * 9301 + 49297) % 233280) / 233280;\n}\n\n/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */\nexport function roughLine(x1: number, y1: number, x2: number, y2: number, seed = 1, amp = 1.5): string {\n  const r = paperRandom(seed);\n  const j = () => (r() - 0.5) * 2 * amp;\n  const mx = (x1 + x2) / 2 + j() * 1.5;\n  const my = (y1 + y2) / 2 + j() * 1.5;\n  const f = (n: number) => Math.round(n * 10) / 10;\n  return `M${f(x1 + j())} ${f(y1 + j())} Q${f(mx)} ${f(my)} ${f(x2 + j())} ${f(y2 + j())}`;\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const PAPER_FX: EffectDefinition[] = [\n  {\n    name: 'paper-unfold',\n    kind: 'enter',\n    description: 'The element unfolds like a folded sheet of paper, with a soft crease shadow (`folds`).',\n    defaults: { duration: 900, folds: 2 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const n = Math.max(1, Math.min(4, Math.round(Number(o.folds) || 2)));\n      const frames: Keyframe[] = [{ transform: 'perspective(800px) rotateX(-90deg)', opacity: 0, filter: 'brightness(.7)', offset: 0 }];\n      for (let i = 1; i <= n; i++) frames.push({ transform: `perspective(800px) rotateX(${i % 2 ? 25 : -12}deg) scaleY(${(0.5 + (0.5 * i) / (n + 1)).toFixed(2)})`, opacity: 1, filter: 'brightness(.85)', offset: (i / (n + 1)) * 0.9 });\n      frames.push({ transform: 'none', opacity: 1, filter: 'none', offset: 1 });\n      const prev = el.style.transformOrigin;\n      el.style.transformOrigin = 'top center';\n      ctx.onCleanup(() => (el.style.transformOrigin = prev));\n      return ctx.animate(el, frames, { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'pencil-sketch',\n    kind: 'enter',\n    description: 'SVG strokes inside are sketched in with a slightly wobbly pencil, one after another (`duration`, `stagger`).',\n    defaults: { duration: 700, stagger: 120 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const strokes = Array.from(el.querySelectorAll<SVGGeometryElement>('path, line, polyline, rect, circle, ellipse'));\n      const runs = strokes.map((p, i) => {\n        let len = 200;\n        try {\n          len = p.getTotalLength?.() || 200;\n        } catch {\n          /* not rendered */\n        }\n        const prev = p.style.strokeDasharray;\n        p.style.strokeDasharray = `${len}`;\n        ctx.onCleanup(() => (p.style.strokeDasharray = prev));\n        return ctx.animate(p, [{ strokeDashoffset: `${len}`, transform: 'translate(0.6px,-0.4px)' }, { transform: 'translate(-0.5px,0.5px)', offset: 0.5 }, { strokeDashoffset: '0', transform: 'none' }], { duration: o.duration, delay: i * (Number(o.stagger) || 0), easing: 'cubic-bezier(.5,.1,.4,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n      });\n      return Promise.all(runs).then(() => undefined);\n    },\n  },\n  {\n    name: 'watercolor',\n    kind: 'enter',\n    description: 'The element bleeds in like wet watercolour — blurred and saturated, spreading from the middle — then dries (`duration`).',\n    defaults: { duration: 1400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      return ctx.animate(\n        el,\n        [\n          { opacity: 0, filter: 'blur(10px) saturate(2.2)', clipPath: 'circle(8% at 50% 50%)' },\n          { opacity: 0.9, filter: 'blur(4px) saturate(1.8)', clipPath: 'circle(55% at 48% 52%)', offset: 0.5 },\n          { opacity: 1, filter: 'blur(0) saturate(1)', clipPath: 'circle(150% at 50% 50%)' },\n        ],\n        { duration: o.duration, easing: 'ease-out', fill: 'backwards' }\n      )?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'crumple',\n    kind: 'attention',\n    description: 'The element scrunches like crumpled paper and springs back flat.',\n    defaults: { duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(\n        el,\n        [\n          { transform: 'none' },\n          { transform: 'scale(.82,.9) rotate(-4deg) skewX(6deg)', filter: 'brightness(.9)', offset: 0.3 },\n          { transform: 'scale(.9,.8) rotate(3deg) skewY(-5deg)', offset: 0.5 },\n          { transform: 'scale(1.04) rotate(-1deg)', filter: 'none', offset: 0.8 },\n          { transform: 'none' },\n        ],\n        { duration: o.duration, easing: 'ease-in-out' }\n      )?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */\nexport function registerPaperPack(): void {\n  registerEffects(PAPER_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+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>;
+}
+
+/**
+ * 8.5 — Paper & hand-drawn pack (`motionary/fx/paper`, also `motionary/components/fx-paper`):
+ *
+ * - `paper-unfold` (enter) — the element unfolds like a folded sheet of paper,
+ *   top flap first, with a soft crease shadow (`folds`).
+ * - `pencil-sketch` (enter) — SVG strokes inside are sketched in with a
+ *   slightly wobbly pencil, one after another (`duration`, `stagger`).
+ * - `watercolor` (enter) — the element bleeds in like wet watercolour:
+ *   blurred, saturated, spreading from the middle, then dries (`duration`).
+ * - `crumple` (attention) — the element scrunches like crumpled paper and
+ *   springs back flat.
+ *
+ * Reduced motion: paper-unfold / watercolor fade in, pencil-sketch shows the
+ * drawing, crumple does nothing.
+ */
+
+/** A deterministic PRNG in [0, 1) from a seed (8.5). */
+declare function paperRandom(seed: number): () => number;
+/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */
+declare function roughLine(x1: number, y1: number, x2: number, y2: number, seed?: number, amp?: number): string;
+declare const PAPER_FX: EffectDefinition[];
+/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */
+declare function registerPaperPack(): void;
+
+export { PAPER_FX, paperRandom, registerPaperPack, roughLine };

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

@@ -0,0 +1,68 @@
+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>;
+}
+
+/**
+ * 8.5 — Paper & hand-drawn pack (`motionary/fx/paper`, also `motionary/components/fx-paper`):
+ *
+ * - `paper-unfold` (enter) — the element unfolds like a folded sheet of paper,
+ *   top flap first, with a soft crease shadow (`folds`).
+ * - `pencil-sketch` (enter) — SVG strokes inside are sketched in with a
+ *   slightly wobbly pencil, one after another (`duration`, `stagger`).
+ * - `watercolor` (enter) — the element bleeds in like wet watercolour:
+ *   blurred, saturated, spreading from the middle, then dries (`duration`).
+ * - `crumple` (attention) — the element scrunches like crumpled paper and
+ *   springs back flat.
+ *
+ * Reduced motion: paper-unfold / watercolor fade in, pencil-sketch shows the
+ * drawing, crumple does nothing.
+ */
+
+/** A deterministic PRNG in [0, 1) from a seed (8.5). */
+declare function paperRandom(seed: number): () => number;
+/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */
+declare function roughLine(x1: number, y1: number, x2: number, y2: number, seed?: number, amp?: number): string;
+declare const PAPER_FX: EffectDefinition[];
+/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */
+declare function registerPaperPack(): void;
+
+export { PAPER_FX, paperRandom, registerPaperPack, roughLine };

package/dist/components/fx-paper.js

@@ -0,0 +1,103 @@
+import { registerEffects } from '../chunks/registry-CnO7ZVPK.js';
+import '../chunks/base-CLuqlLfG.js';
+
+/** A deterministic PRNG in [0, 1) from a seed (8.5). */
+function paperRandom(seed) {
+    let s = Math.abs(Math.round(seed * 1000)) % 233280 || 11;
+    return () => (s = (s * 9301 + 49297) % 233280) / 233280;
+}
+/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */
+function roughLine(x1, y1, x2, y2, seed = 1, amp = 1.5) {
+    const r = paperRandom(seed);
+    const j = () => (r() - 0.5) * 2 * amp;
+    const mx = (x1 + x2) / 2 + j() * 1.5;
+    const my = (y1 + y2) / 2 + j() * 1.5;
+    const f = (n) => Math.round(n * 10) / 10;
+    return `M${f(x1 + j())} ${f(y1 + j())} Q${f(mx)} ${f(my)} ${f(x2 + j())} ${f(y2 + j())}`;
+}
+const fade = (el, ctx) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);
+const PAPER_FX = [
+    {
+        name: 'paper-unfold',
+        kind: 'enter',
+        description: 'The element unfolds like a folded sheet of paper, with a soft crease shadow (`folds`).',
+        defaults: { duration: 900, folds: 2 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            const n = Math.max(1, Math.min(4, Math.round(Number(o.folds) || 2)));
+            const frames = [{ transform: 'perspective(800px) rotateX(-90deg)', opacity: 0, filter: 'brightness(.7)', offset: 0 }];
+            for (let i = 1; i <= n; i++)
+                frames.push({ transform: `perspective(800px) rotateX(${i % 2 ? 25 : -12}deg) scaleY(${(0.5 + (0.5 * i) / (n + 1)).toFixed(2)})`, opacity: 1, filter: 'brightness(.85)', offset: (i / (n + 1)) * 0.9 });
+            frames.push({ transform: 'none', opacity: 1, filter: 'none', offset: 1 });
+            const prev = el.style.transformOrigin;
+            el.style.transformOrigin = 'top center';
+            ctx.onCleanup(() => (el.style.transformOrigin = prev));
+            return ctx.animate(el, frames, { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'pencil-sketch',
+        kind: 'enter',
+        description: 'SVG strokes inside are sketched in with a slightly wobbly pencil, one after another (`duration`, `stagger`).',
+        defaults: { duration: 700, stagger: 120 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const strokes = Array.from(el.querySelectorAll('path, line, polyline, rect, circle, ellipse'));
+            const runs = strokes.map((p, i) => {
+                let len = 200;
+                try {
+                    len = p.getTotalLength?.() || 200;
+                }
+                catch {
+                    /* not rendered */
+                }
+                const prev = p.style.strokeDasharray;
+                p.style.strokeDasharray = `${len}`;
+                ctx.onCleanup(() => (p.style.strokeDasharray = prev));
+                return ctx.animate(p, [{ strokeDashoffset: `${len}`, transform: 'translate(0.6px,-0.4px)' }, { transform: 'translate(-0.5px,0.5px)', offset: 0.5 }, { strokeDashoffset: '0', transform: 'none' }], { duration: o.duration, delay: i * (Number(o.stagger) || 0), easing: 'cubic-bezier(.5,.1,.4,1)', fill: 'backwards' })?.finished.catch(() => undefined);
+            });
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'watercolor',
+        kind: 'enter',
+        description: 'The element bleeds in like wet watercolour — blurred and saturated, spreading from the middle — then dries (`duration`).',
+        defaults: { duration: 1400 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return fade(el, ctx);
+            return ctx.animate(el, [
+                { opacity: 0, filter: 'blur(10px) saturate(2.2)', clipPath: 'circle(8% at 50% 50%)' },
+                { opacity: 0.9, filter: 'blur(4px) saturate(1.8)', clipPath: 'circle(55% at 48% 52%)', offset: 0.5 },
+                { opacity: 1, filter: 'blur(0) saturate(1)', clipPath: 'circle(150% at 50% 50%)' },
+            ], { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'crumple',
+        kind: 'attention',
+        description: 'The element scrunches like crumpled paper and springs back flat.',
+        defaults: { duration: 700 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            return ctx.animate(el, [
+                { transform: 'none' },
+                { transform: 'scale(.82,.9) rotate(-4deg) skewX(6deg)', filter: 'brightness(.9)', offset: 0.3 },
+                { transform: 'scale(.9,.8) rotate(3deg) skewY(-5deg)', offset: 0.5 },
+                { transform: 'scale(1.04) rotate(-1deg)', filter: 'none', offset: 0.8 },
+                { transform: 'none' },
+            ], { duration: o.duration, easing: 'ease-in-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */
+function registerPaperPack() {
+    registerEffects(PAPER_FX);
+}
+
+export { PAPER_FX, paperRandom, registerPaperPack, roughLine };
+//# sourceMappingURL=fx-paper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-paper.js","sources":["../../src/components/fx2/paper.ts"],"sourcesContent":["/**\n * 8.5 — Paper & hand-drawn pack (`motionary/fx/paper`, also `motionary/components/fx-paper`):\n *\n * - `paper-unfold` (enter) — the element unfolds like a folded sheet of paper,\n *   top flap first, with a soft crease shadow (`folds`).\n * - `pencil-sketch` (enter) — SVG strokes inside are sketched in with a\n *   slightly wobbly pencil, one after another (`duration`, `stagger`).\n * - `watercolor` (enter) — the element bleeds in like wet watercolour:\n *   blurred, saturated, spreading from the middle, then dries (`duration`).\n * - `crumple` (attention) — the element scrunches like crumpled paper and\n *   springs back flat.\n *\n * Reduced motion: paper-unfold / watercolor fade in, pencil-sketch shows the\n * drawing, crumple does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** A deterministic PRNG in [0, 1) from a seed (8.5). */\nexport function paperRandom(seed: number): () => number {\n  let s = Math.abs(Math.round(seed * 1000)) % 233280 || 11;\n  return () => (s = (s * 9301 + 49297) % 233280) / 233280;\n}\n\n/** A hand-drawn SVG path from (x1,y1) to (x2,y2): a slightly bowed, wobbly line (8.5). */\nexport function roughLine(x1: number, y1: number, x2: number, y2: number, seed = 1, amp = 1.5): string {\n  const r = paperRandom(seed);\n  const j = () => (r() - 0.5) * 2 * amp;\n  const mx = (x1 + x2) / 2 + j() * 1.5;\n  const my = (y1 + y2) / 2 + j() * 1.5;\n  const f = (n: number) => Math.round(n * 10) / 10;\n  return `M${f(x1 + j())} ${f(y1 + j())} Q${f(mx)} ${f(my)} ${f(x2 + j())} ${f(y2 + j())}`;\n}\n\nconst fade = (el: HTMLElement, ctx: EffectContext) => ctx.animate(el, [{ opacity: 0 }, { opacity: 1 }], { duration: 250 })?.finished.catch(() => undefined);\n\nexport const PAPER_FX: EffectDefinition[] = [\n  {\n    name: 'paper-unfold',\n    kind: 'enter',\n    description: 'The element unfolds like a folded sheet of paper, with a soft crease shadow (`folds`).',\n    defaults: { duration: 900, folds: 2 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      const n = Math.max(1, Math.min(4, Math.round(Number(o.folds) || 2)));\n      const frames: Keyframe[] = [{ transform: 'perspective(800px) rotateX(-90deg)', opacity: 0, filter: 'brightness(.7)', offset: 0 }];\n      for (let i = 1; i <= n; i++) frames.push({ transform: `perspective(800px) rotateX(${i % 2 ? 25 : -12}deg) scaleY(${(0.5 + (0.5 * i) / (n + 1)).toFixed(2)})`, opacity: 1, filter: 'brightness(.85)', offset: (i / (n + 1)) * 0.9 });\n      frames.push({ transform: 'none', opacity: 1, filter: 'none', offset: 1 });\n      const prev = el.style.transformOrigin;\n      el.style.transformOrigin = 'top center';\n      ctx.onCleanup(() => (el.style.transformOrigin = prev));\n      return ctx.animate(el, frames, { duration: o.duration, easing: 'ease-out', fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'pencil-sketch',\n    kind: 'enter',\n    description: 'SVG strokes inside are sketched in with a slightly wobbly pencil, one after another (`duration`, `stagger`).',\n    defaults: { duration: 700, stagger: 120 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const strokes = Array.from(el.querySelectorAll<SVGGeometryElement>('path, line, polyline, rect, circle, ellipse'));\n      const runs = strokes.map((p, i) => {\n        let len = 200;\n        try {\n          len = p.getTotalLength?.() || 200;\n        } catch {\n          /* not rendered */\n        }\n        const prev = p.style.strokeDasharray;\n        p.style.strokeDasharray = `${len}`;\n        ctx.onCleanup(() => (p.style.strokeDasharray = prev));\n        return ctx.animate(p, [{ strokeDashoffset: `${len}`, transform: 'translate(0.6px,-0.4px)' }, { transform: 'translate(-0.5px,0.5px)', offset: 0.5 }, { strokeDashoffset: '0', transform: 'none' }], { duration: o.duration, delay: i * (Number(o.stagger) || 0), easing: 'cubic-bezier(.5,.1,.4,1)', fill: 'backwards' })?.finished.catch(() => undefined);\n      });\n      return Promise.all(runs).then(() => undefined);\n    },\n  },\n  {\n    name: 'watercolor',\n    kind: 'enter',\n    description: 'The element bleeds in like wet watercolour — blurred and saturated, spreading from the middle — then dries (`duration`).',\n    defaults: { duration: 1400 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return fade(el, ctx);\n      return ctx.animate(\n        el,\n        [\n          { opacity: 0, filter: 'blur(10px) saturate(2.2)', clipPath: 'circle(8% at 50% 50%)' },\n          { opacity: 0.9, filter: 'blur(4px) saturate(1.8)', clipPath: 'circle(55% at 48% 52%)', offset: 0.5 },\n          { opacity: 1, filter: 'blur(0) saturate(1)', clipPath: 'circle(150% at 50% 50%)' },\n        ],\n        { duration: o.duration, easing: 'ease-out', fill: 'backwards' }\n      )?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'crumple',\n    kind: 'attention',\n    description: 'The element scrunches like crumpled paper and springs back flat.',\n    defaults: { duration: 700 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      return ctx.animate(\n        el,\n        [\n          { transform: 'none' },\n          { transform: 'scale(.82,.9) rotate(-4deg) skewX(6deg)', filter: 'brightness(.9)', offset: 0.3 },\n          { transform: 'scale(.9,.8) rotate(3deg) skewY(-5deg)', offset: 0.5 },\n          { transform: 'scale(1.04) rotate(-1deg)', filter: 'none', offset: 0.8 },\n          { transform: 'none' },\n        ],\n        { duration: o.duration, easing: 'ease-in-out' }\n      )?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register paper-unfold, pencil-sketch, watercolor and crumple (8.5). */\nexport function registerPaperPack(): void {\n  registerEffects(PAPER_FX);\n}\n"],"names":[],"mappings":"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"}

package/dist/components/fx-surface.cjs

@@ -0,0 +1,89 @@
+'use strict';
+
+var registry = require('../chunks/registry-BVklOepd.cjs');
+require('../chunks/base-DoRUZBy-.cjs');
+
+/** The built-in surface themes of the 8.6 theme system. */
+const SURFACE_THEMES = ['light', 'dark', 'neon', 'glass', 'neu'];
+/** Set `data-usa-surface` on `target` (default `<html>`) and return the theme actually applied (unknown → `light`) (8.6). */
+function applySurfaceTheme(name, target = typeof document !== 'undefined' ? document.documentElement : null) {
+    const t = (SURFACE_THEMES.includes(name) ? name : 'light');
+    target?.setAttribute('data-usa-surface', t);
+    return t;
+}
+const glow = (c, k) => `0 0 ${4 * k}px ${c}, 0 0 ${12 * k}px ${c}`;
+const SURFACE_FX = [
+    {
+        name: 'neon-ignite',
+        kind: 'enter',
+        description: 'The element powers on like a neon tube — stuttering flickers, then a steady glow (`color`).',
+        defaults: { color: '#f0abfc', duration: 1100 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const on = { opacity: 1, textShadow: glow(o.color, 1), filter: 'brightness(1.15)' };
+            const off = { opacity: 0.15, textShadow: 'none', filter: 'brightness(.6)' };
+            return ctx.animate(el, [{ ...off, offset: 0 }, { ...on, offset: 0.1 }, { ...off, offset: 0.14 }, { ...on, offset: 0.3 }, { ...off, offset: 0.34 }, { ...off, offset: 0.5 }, { ...on, offset: 0.56 }, { ...on, textShadow: glow(o.color, 1.6), offset: 0.8 }, { opacity: 1, textShadow: glow(o.color, 1), filter: 'none', offset: 1 }], { duration: o.duration, fill: 'backwards' })?.finished.catch(() => undefined);
+        },
+    },
+    {
+        name: 'neon-pulse',
+        kind: 'loop',
+        description: 'A slow breathing neon glow until the cleanup runs (`color`).',
+        defaults: { color: '#22d3ee', duration: 2200 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const a = ctx.animate(el, [{ boxShadow: glow(o.color, 0.6) }, { boxShadow: glow(o.color, 1.6) }, { boxShadow: glow(o.color, 0.6) }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });
+            return () => a?.cancel();
+        },
+    },
+    {
+        name: 'glass-frost',
+        kind: 'enter',
+        description: 'Frosted glass condenses: blur and transparency settle into a crisp glass panel, with a shine passing over it.',
+        defaults: { duration: 1000 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const runs = [];
+            runs.push(ctx.animate(el, [{ opacity: 0, filter: 'blur(12px)', transform: 'scale(.96)' }, { opacity: 1, filter: 'blur(0)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })?.finished.catch(() => undefined));
+            if (getComputedStyle(el).position === 'static') {
+                const prev = el.style.position;
+                el.style.position = 'relative';
+                ctx.onCleanup(() => (el.style.position = prev));
+            }
+            const s = document.createElement('span');
+            s.setAttribute('aria-hidden', 'true');
+            Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: 'linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', backgroundSize: '250% 100%' });
+            el.appendChild(s);
+            ctx.onCleanup(() => s.remove());
+            const sh = ctx.animate(s, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-60% 0' }], { duration: o.duration * 0.9, delay: o.duration * 0.4, easing: 'ease-in-out', fill: 'backwards' });
+            runs.push(sh ? sh.finished.then(() => s.remove(), () => s.remove()) : (s.remove(), undefined));
+            return Promise.all(runs).then(() => undefined);
+        },
+    },
+    {
+        name: 'neu-press',
+        kind: 'attention',
+        description: 'A soft neumorphic press: the raised shadow flips to an inset one and pops back.',
+        defaults: { duration: 450 },
+        run: (el, o, ctx) => {
+            if (ctx.reduced)
+                return;
+            const up = '6px 6px 12px rgba(163,177,198,.7), -6px -6px 12px rgba(255,255,255,.9)';
+            const down = 'inset 4px 4px 8px rgba(163,177,198,.8), inset -4px -4px 8px rgba(255,255,255,.9)';
+            return ctx.animate(el, [{ boxShadow: up, transform: 'none' }, { boxShadow: down, transform: 'scale(.97)', offset: 0.4 }, { boxShadow: up, transform: 'none' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);
+        },
+    },
+];
+/** Register neon-ignite, neon-pulse, glass-frost and neu-press (8.6). */
+function registerSurfacePack() {
+    registry.registerEffects(SURFACE_FX);
+}
+
+exports.SURFACE_FX = SURFACE_FX;
+exports.SURFACE_THEMES = SURFACE_THEMES;
+exports.applySurfaceTheme = applySurfaceTheme;
+exports.registerSurfacePack = registerSurfacePack;
+//# sourceMappingURL=fx-surface.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fx-surface.cjs","sources":["../../src/components/fx2/themefx.ts"],"sourcesContent":["/**\n * 8.6 — Surface theme pack (`motionary/fx/surface`, also `motionary/components/fx-surface`):\n *\n * - `neon-ignite` (enter) — the element powers on like a neon tube: a few\n *   stuttering flickers, then a steady glow (`color`).\n * - `neon-pulse` (loop) — a slow breathing neon glow; the cleanup stops it\n *   (`color`).\n * - `glass-frost` (enter) — frosted glass condenses: blur and transparency\n *   settle into a crisp glass panel, with a shine passing over it.\n * - `neu-press` (attention) — a soft neumorphic press: the raised shadow\n *   flips to an inset one and pops back.\n *\n * Reduced motion: neon-ignite / glass-frost just show, neon-pulse is\n * skipped, neu-press does nothing.\n */\nimport type { EffectContext, EffectDefinition } from '../fx/registry';\nimport { registerEffects } from '../fx/registry';\n\n/** The built-in surface themes of the 8.6 theme system. */\nexport const SURFACE_THEMES = ['light', 'dark', 'neon', 'glass', 'neu'] as const;\nexport type SurfaceTheme = (typeof SURFACE_THEMES)[number];\n\n/** Set `data-usa-surface` on `target` (default `<html>`) and return the theme actually applied (unknown → `light`) (8.6). */\nexport function applySurfaceTheme(name: string, target: Element | null = typeof document !== 'undefined' ? document.documentElement : null): SurfaceTheme {\n  const t = ((SURFACE_THEMES as readonly string[]).includes(name) ? name : 'light') as SurfaceTheme;\n  target?.setAttribute('data-usa-surface', t);\n  return t;\n}\n\nconst glow = (c: string, k: number) => `0 0 ${4 * k}px ${c}, 0 0 ${12 * k}px ${c}`;\n\nexport const SURFACE_FX: EffectDefinition[] = [\n  {\n    name: 'neon-ignite',\n    kind: 'enter',\n    description: 'The element powers on like a neon tube — stuttering flickers, then a steady glow (`color`).',\n    defaults: { color: '#f0abfc', duration: 1100 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const on = { opacity: 1, textShadow: glow(o.color, 1), filter: 'brightness(1.15)' };\n      const off = { opacity: 0.15, textShadow: 'none', filter: 'brightness(.6)' };\n      return ctx.animate(el, [{ ...off, offset: 0 }, { ...on, offset: 0.1 }, { ...off, offset: 0.14 }, { ...on, offset: 0.3 }, { ...off, offset: 0.34 }, { ...off, offset: 0.5 }, { ...on, offset: 0.56 }, { ...on, textShadow: glow(o.color, 1.6), offset: 0.8 }, { opacity: 1, textShadow: glow(o.color, 1), filter: 'none', offset: 1 }], { duration: o.duration, fill: 'backwards' })?.finished.catch(() => undefined);\n    },\n  },\n  {\n    name: 'neon-pulse',\n    kind: 'loop',\n    description: 'A slow breathing neon glow until the cleanup runs (`color`).',\n    defaults: { color: '#22d3ee', duration: 2200 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const a = ctx.animate(el, [{ boxShadow: glow(o.color, 0.6) }, { boxShadow: glow(o.color, 1.6) }, { boxShadow: glow(o.color, 0.6) }], { duration: o.duration, iterations: Infinity, easing: 'ease-in-out' });\n      return () => a?.cancel();\n    },\n  },\n  {\n    name: 'glass-frost',\n    kind: 'enter',\n    description: 'Frosted glass condenses: blur and transparency settle into a crisp glass panel, with a shine passing over it.',\n    defaults: { duration: 1000 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const runs: (Promise<unknown> | undefined)[] = [];\n      runs.push(ctx.animate(el, [{ opacity: 0, filter: 'blur(12px)', transform: 'scale(.96)' }, { opacity: 1, filter: 'blur(0)', transform: 'none' }], { duration: o.duration, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'backwards' })?.finished.catch(() => undefined));\n      if (getComputedStyle(el).position === 'static') {\n        const prev = el.style.position;\n        el.style.position = 'relative';\n        ctx.onCleanup(() => (el.style.position = prev));\n      }\n      const s = document.createElement('span');\n      s.setAttribute('aria-hidden', 'true');\n      Object.assign(s.style, { position: 'absolute', inset: '0', pointerEvents: 'none', borderRadius: 'inherit', background: 'linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%)', backgroundSize: '250% 100%' });\n      el.appendChild(s);\n      ctx.onCleanup(() => s.remove());\n      const sh = ctx.animate(s, [{ backgroundPosition: '120% 0' }, { backgroundPosition: '-60% 0' }], { duration: o.duration * 0.9, delay: o.duration * 0.4, easing: 'ease-in-out', fill: 'backwards' });\n      runs.push(sh ? sh.finished.then(() => s.remove(), () => s.remove()) : (s.remove(), undefined));\n      return Promise.all(runs).then(() => undefined);\n    },\n  },\n  {\n    name: 'neu-press',\n    kind: 'attention',\n    description: 'A soft neumorphic press: the raised shadow flips to an inset one and pops back.',\n    defaults: { duration: 450 },\n    run: (el: HTMLElement, o: any, ctx: EffectContext) => {\n      if (ctx.reduced) return;\n      const up = '6px 6px 12px rgba(163,177,198,.7), -6px -6px 12px rgba(255,255,255,.9)';\n      const down = 'inset 4px 4px 8px rgba(163,177,198,.8), inset -4px -4px 8px rgba(255,255,255,.9)';\n      return ctx.animate(el, [{ boxShadow: up, transform: 'none' }, { boxShadow: down, transform: 'scale(.97)', offset: 0.4 }, { boxShadow: up, transform: 'none' }], { duration: o.duration, easing: 'ease-out' })?.finished.catch(() => undefined);\n    },\n  },\n];\n\n/** Register neon-ignite, neon-pulse, glass-frost and neu-press (8.6). */\nexport function registerSurfacePack(): void {\n  registerEffects(SURFACE_FX);\n}\n"],"names":["registerEffects"],"mappings":"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"}

package/dist/components/fx-surface.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>;
+}
+
+/**
+ * 8.6 — Surface theme pack (`motionary/fx/surface`, also `motionary/components/fx-surface`):
+ *
+ * - `neon-ignite` (enter) — the element powers on like a neon tube: a few
+ *   stuttering flickers, then a steady glow (`color`).
+ * - `neon-pulse` (loop) — a slow breathing neon glow; the cleanup stops it
+ *   (`color`).
+ * - `glass-frost` (enter) — frosted glass condenses: blur and transparency
+ *   settle into a crisp glass panel, with a shine passing over it.
+ * - `neu-press` (attention) — a soft neumorphic press: the raised shadow
+ *   flips to an inset one and pops back.
+ *
+ * Reduced motion: neon-ignite / glass-frost just show, neon-pulse is
+ * skipped, neu-press does nothing.
+ */
+
+/** The built-in surface themes of the 8.6 theme system. */
+declare const SURFACE_THEMES: readonly ["light", "dark", "neon", "glass", "neu"];
+type SurfaceTheme = (typeof SURFACE_THEMES)[number];
+/** Set `data-usa-surface` on `target` (default `<html>`) and return the theme actually applied (unknown → `light`) (8.6). */
+declare function applySurfaceTheme(name: string, target?: Element | null): SurfaceTheme;
+declare const SURFACE_FX: EffectDefinition[];
+/** Register neon-ignite, neon-pulse, glass-frost and neu-press (8.6). */
+declare function registerSurfacePack(): void;
+
+export { SURFACE_FX, SURFACE_THEMES, applySurfaceTheme, registerSurfacePack };
+export type { SurfaceTheme };