@zakkster/lite-ui-fx 1.5.0 → 1.7.0

package/CHANGELOG.md

@@ -5,6 +5,92 @@ All notable changes to `@zakkster/lite-ui-fx` are documented here.
 The format follows Keep a Changelog; this project adheres to Semantic
 Versioning.
 
+## [1.7.0] -- 2026-09-07
+
+Host integration (roadmap U5). Two host-clock modes plus reduced-motion and a
+frame-budget signal, applied to BOTH mount modes (`mountUIFX` and `decorateUIFX`).
+Additive: a default mount is byte-identical to 1.6.0.
+
+### Added
+
+- `{ ticker }` mount option (both modes): a caller-supplied ticker
+  (`{ add(fn) -> removeFn }`, e.g. `@zakkster/lite-ticker`) drives the component
+  instead of the shared ref-counted ticker. `destroy()` unregisters the
+  component's frame but never destroys the caller's ticker (ownership stays with
+  the caller).
+- `{ driven: true }` mount option (both modes): no ticker and no RAF; the host
+  drives each frame via `instance.tick(dtMs)`. `instance.tick` is the internal
+  frame body in driven mode and throws otherwise. `{ ticker }` and `{ driven }`
+  are mutually exclusive; a non-boolean `driven` or a ticker without `.add()`
+  throws at mount.
+- `state.reducedMotion` (both modes): read from
+  `matchMedia('(prefers-reduced-motion: reduce)')` before `recipe.init` and
+  watched via the AbortController; absent `matchMedia` is a no-op (stays `false`).
+  Calm paths for six recipes -- `SwarmToggle`, `PasswordStrength`,
+  `TypewriterField`, `FocusHalo`, `ErrorShake`, `SuccessBloom`: under reduced
+  motion `ErrorShake` stops displacing, `SuccessBloom` spawns no particles, and
+  `SwarmToggle` rests its particles at formation.
+- `state.budget` (0..1, both modes): a per-frame frame-budget number (1 at
+  ~60fps, lower as frames lengthen), computed in place with no allocation, for
+  budget-aware recipes to shed work.
+- `mountRecipe` emits a `console.warn` (not a throw) when mounting a
+  `motionSafe:false` recipe while the user prefers reduced motion.
+- TypeScript: `HostTicker`, `HostClockOptions`, `state.reducedMotion` /
+  `state.budget`, and `instance.tick(dtMs)` on both instance types.
+- `decisions/0005-host-clock.md`. U5 coverage: t5 caller-ticker ownership +
+  driven determinism, t3 reduced-motion churn, and two t9 controls (`fake-calm`,
+  `ticker-ownership`). 177 -> 196 node:test tests; 5 -> 7 torture controls.
+
+### Changed
+
+- The per-mount frame loop is one named function shared by all three clock modes;
+  the default (shared-ticker) path is byte-identical to 1.6.0.
+- `RECIPE_META.motionSafe` is now `true` for six recipes (previously `false` for
+  all 56): it marks exactly the recipes that ship a reduced-motion calm path.
+
+## [1.6.0] -- 2026-09-07
+
+Decorate mode (U4b, the second half of roadmap U4). A second public mount mode
+alongside the hijack `mountUIFX`: `decorateUIFX` positions a canvas AROUND an
+existing visible element instead of hijacking it. Additive: a bare `mountUIFX`
+mount is byte-identical to 1.5.0; 53 -> 56 recipes.
+
+### Added
+
+- `decorateUIFX(el, recipeFactory, options)`: a canvas overlay AROUND a live
+  element -- no `opacity:0`, no reparent. The overlay is a sibling placed from the
+  host's offset box and removed on `destroy()`, so the host is byte-identical
+  before and after (additive-only). Recipe `state` is wired from the host's own
+  events; for a form-control host `state.text` and `state.valid` mirror `el.value`
+  and `el.validity`, read at event time (never per frame). `setValue`/`setChecked`
+  are hijack-only and throw. Options are a subset (`padding`, `seed`, `colors`,
+  `theme`, `text`, `font`); the hijack-only keys throw in decorate mode.
+- Three decorate recipes, born themed and t3-gated: `FocusHalo`, `ErrorShake`,
+  `SuccessBloom` (generic form feedback, reading `state.focused` / `state.valid`).
+  Registered in `RECIPES` / `RECIPE_META` (type `'decorate'`) / the default export
+  / a new `UIFXRecipes5` barrel.
+- `'decorate'` as a `RECIPE_META.type` routing tag: `mountRecipe(el, id)` routes a
+  decorate recipe to `decorateUIFX`. `VALID_META_TYPES` gains exactly this one
+  non-`UIType` tag; `mountUIFX` still rejects it (the two paths cannot cross).
+- Optional `state.text` / `state.valid` fields (decorate mode only). TypeScript
+  `DecorateOptions`, `DecorateInstance`, and `decorateUIFX` in the d.ts.
+- `decisions/0004-decorate-mode.md`; decorate coverage across the suite: t0 host
+  byte-identical DOM diff + a t9 `decorate-host-mutation` control, t1 fail-closed +
+  degenerate sweep, t2 A14-A16 (state wiring, host untouched, non-input host), t3
+  zero-alloc churn, t5 decorate on the shared ticker. 164 -> 177 node:test tests.
+
+### Changed
+
+- `PasswordStrength` and `TypewriterField` re-homed from their U4a-era fake types
+  (slider / toggle) onto decorate mode (`RECIPE_META.type` `'decorate'`). Unlike
+  the U4a re-homes these are behaviour ports: they now read the live host input --
+  PasswordStrength derives strength from `state.text` (zero-alloc `charCodeAt`
+  scan, recomputed only on change); TypewriterField animates an underline that
+  grows with the typed text (no `measureText`). Both stay `themeable`.
+- RECIPE_META covers 56 recipes; `themeable` true for all 56, `motionSafe` false
+  for all 56. All 56 stay zero-GC under the t3 frame-alloc gate (default AND
+  themed). `mountUIFX` and every hijack mount are unchanged.
+
 ## [1.5.0] -- 2026-09-07
 
 New native element types (U4a, the first half of roadmap U4). Vol.3 faked

package/README.md

@@ -21,7 +21,7 @@ https://cdpn.io/pen/debug/yyaPKpB
 ## Live Demo (UI-FX vol3.)
 https://cdpn.io/pen/debug/YPGEaYY
 
-**53 recipes** across UI element categories:
+**56 recipes** across UI element categories:
 
 - **Toggles** -- Swarm, Liquid, Neon Pulse, Pendulum, Circuit, Lightning, DNA
 - **Buttons** -- Magnetic, Shatter, Confetti, Glitch, Heartbeat, Breathing, Ink Splash, Pixel Dissolve, Firework
@@ -29,18 +29,19 @@ https://cdpn.io/pen/debug/YPGEaYY
 - **Knobs** -- Volume dial, Compass needle
 - **Progress** -- Ring, Battery, Signal meter, Liquid Fill
 - **Controls** -- Pill tabs, Stepper, Radio orbit
-- **Indicators** -- Password strength, Water level, Heat map
+- **Indicators** -- Water level, Heat map
 - **Mood** -- Day/night, Reaction picker, Notification bell
-- **Feedback** -- Typewriter, Sound wave, Upload progress
+- **Feedback** -- Sound wave, Upload progress
 - **Fun** -- Scratch reveal, Timer countdown, Pull refresh
 - **Checkboxes** -- Ripple, Morph (X to check), Tick Draw, Indeterminate Scan
 - **Loaders** -- Orbit planets, DNA helix
 - **Counters** -- Flame heat, Glitch signal
 - **Rating** -- Bubble inflate
+- **Form (decorate)** -- Focus halo, Error shake, Success bloom, Password strength, Typewriter field (mounted via `decorateUIFX`, around a live element)
 
 Every recipe is zero-GC, uses `dt`-based animation, and includes accessibility indicators (focus rings, state labels).
 
-All 53 recipes ship in the package on the `./recipes` subpath -- versioned,
+All 56 recipes ship in the package on the `./recipes` subpath -- versioned,
 typed, and tree-shakeable. With `sideEffects: false`, importing one recipe pulls
 in only that recipe, so a controller-only install stays tiny.
 
@@ -65,7 +66,7 @@ Part of the [@zakkster/lite-*](https://www.npmjs.com/org/zakkster) ecosystem.
 npm i @zakkster/lite-ui-fx
 ```
 
-> The 53 recipes ship in the same package on the `./recipes` subpath and
+> The 56 recipes ship in the same package on the `./recipes` subpath and
 > tree-shake, so importing one adds only that one.
 
 
@@ -97,7 +98,7 @@ instance.destroy();
 // Controller (always needed)
 import { mountUIFX, UIType } from '@zakkster/lite-ui-fx';
 
-// All 53 recipes ship on the ./recipes subpath (tree-shakeable) -- import by name:
+// All 56 recipes ship on the ./recipes subpath (tree-shakeable) -- import by name:
 import { SwarmToggle, MagneticButton, SparkSlider } from '@zakkster/lite-ui-fx/recipes';
 import { PendulumToggle, HeartbeatButton, RippleCheck } from '@zakkster/lite-ui-fx/recipes';
 import { VolumeKnob, WaterLevel, TimerCountdown } from '@zakkster/lite-ui-fx/recipes';
@@ -158,6 +159,36 @@ Returns `{ el, canvas, wrapper, state, setValue(v), setChecked(b), destroy() }`.
 - `setChecked(b)` -- TOGGLE/CHECKBOX: set checked (updates the element +
   `state.toggled`, fires `onToggle` once).
 
+### `decorateUIFX(el, recipeFactory, options?)` -- the second mount mode
+
+Where `mountUIFX` **hijacks** (creates a hidden native element under a canvas),
+`decorateUIFX` **decorates**: it positions a canvas *around* an existing, visible
+element without hijacking it -- no `opacity:0`, no reparenting. The overlay is a
+sibling placed from the host's offset box and removed on `destroy()`, so the host
+is byte-identical before and after. Recipe `state` is wired from the host's own
+events; for a form-control host, `state.text` and `state.valid` mirror `el.value`
+and `el.validity` (read at event time, never per frame). This is the honest home
+for a decoration over a real input.
+
+```javascript
+import { decorateUIFX } from '@zakkster/lite-ui-fx';
+import { PasswordStrength } from '@zakkster/lite-ui-fx/recipes';
+
+const input = document.querySelector('#password');
+const deco = decorateUIFX(input, PasswordStrength, { theme });
+// ... input stays fully usable; the meter tracks what the user types ...
+deco.destroy(); // removes ONLY the overlay; the input is untouched
+```
+
+`options` is a subset: `padding`, `seed`, `colors`, `theme`, `text`, `font`. The
+hijack-only keys (`width`/`height`/`value`/`checked`/`disabled`/`knobMode`/
+`announce`/`label`) throw in decorate mode. Returns
+`{ el, canvas, state, setValue, setChecked, destroy() }`, where `setValue` and
+`setChecked` are hijack-only and throw (a decoration reflects the host; it does
+not drive it). Built-in decorate recipes: `FocusHalo`, `ErrorShake`,
+`SuccessBloom`, `PasswordStrength`, `TypewriterField` (`RECIPE_META.type` =
+`'decorate'`, so `mountRecipe(el, id)` routes them here automatically).
+
 ### Element Types
 
 | Type | Native Element | Recipe Hooks | Key State |
@@ -168,6 +199,10 @@ Returns `{ el, canvas, wrapper, state, setValue(v), setChecked(b), destroy() }`.
 | `UIType.CHECKBOX` | `<input type="checkbox">` (no `role=switch`) | `onToggle(checked)` | `state.toggled`, `state.indeterminate` |
 | `UIType.PROGRESS` | `<progress>` (non-interactive) | (driven by `setValue`) | `state.val` (0-1) |
 | `UIType.KNOB` | `<input type="range">` | `onDrag(val, velocity)` | `state.val` (0-1) |
+| *(decorate)* | none -- a canvas AROUND a live host (`decorateUIFX`) | host events -> state | `state.focused`, `state.text`, `state.valid` |
+
+*(decorate)* is a mount mode, not a `UIType`: it creates no native element. A recipe
+with `RECIPE_META.type === 'decorate'` is mounted via `decorateUIFX`.
 
 ### State Object (provided to `tick()` every frame)
 
@@ -184,6 +219,8 @@ Returns `{ el, canvas, wrapper, state, setValue(v), setChecked(b), destroy() }`.
     h: number;           // Element height
     padding: number;     // Canvas padding
     dpr: number;         // Device pixel ratio
+    text?: string;       // decorate mode only: the host value string
+    valid?: boolean;     // decorate mode only: the host validity
 }
 ```
 
@@ -194,7 +231,7 @@ Returns `{ el, canvas, wrapper, state, setValue(v), setChecked(b), destroy() }`.
 | Framer Motion | ~45 KB | React HOC | 0 | Via React | `npm i framer-motion` |
 | GSAP | ~25 KB | Timeline | 0 | Manual | `npm i gsap` |
 | Lottie | ~55 KB | JSON animation | After Effects | Manual | `npm i lottie-web` |
-| **lite-ui-fx** | **< 5 KB** | **Canvas hijack** | **53 built-in** | **Native + visual** | **`npm i @zakkster/lite-ui-fx`** |
+| **lite-ui-fx** | **< 5 KB** | **Canvas hijack + decorate** | **56 built-in** | **Native + visual** | **`npm i @zakkster/lite-ui-fx`** |
 
 ## Writing Custom Recipes
 
@@ -227,6 +264,7 @@ export function MyButton() {
 Full TypeScript declarations are included for:
 
 - `mountUIFX`
+- `decorateUIFX` (+ `DecorateOptions`, `DecorateInstance`)
 - `UIType`
 - `UIFXState`
 - `UIFXPointer`

package/UIFX-RECIPE-GUIDE.md

@@ -63,15 +63,51 @@ The controller provides this every frame:
     hover: boolean,     // Pointer is inside the element
     active: boolean,    // Pointer is pressed down
     focused: boolean,   // Element has keyboard focus
-    toggled: boolean,   // Checkbox checked state (toggles)
-    val: number,        // 0--1 slider value (sliders)
+    toggled: boolean,   // Checkbox checked state (toggles/checkboxes)
+    indeterminate: boolean, // CHECKBOX only: native indeterminate (setValue(null))
+    val: number,        // 0--1 value (sliders/knobs/progress)
     w: number,          // Element width in CSS pixels
     h: number,          // Element height
     padding: number,    // Canvas overflow padding
     dpr: number,        // Device pixel ratio
+    reducedMotion: boolean, // U5: user prefers reduced motion (see below)
+    budget: number,     // U5: 0--1 frame budget (1 at ~60fps, lower under load)
+    // Decorate mode only (decorateUIFX): the live host's value + validity.
+    text: string,       // the host form-control's value string ('' if none)
+    valid: boolean,     // the host's validity (el.validity.valid, else true)
 }
 ```
 
+## Reduced Motion & Frame Budget (U5)
+
+Two state fields let a recipe be a good citizen without changing the interface.
+
+- **`state.reducedMotion`** is `true` when the user has set
+  `prefers-reduced-motion: reduce`. A recipe that animates should read it and
+  render a **static** alternative -- no continuous motion, no bursts, no shakes.
+  Fades and instant state changes are fine; sustained or positional motion is not.
+  When your recipe ships such a calm path, set its `RECIPE_META.motionSafe: true`;
+  that flag is a promise the calm path exists, so keep them in sync.
+
+  ```javascript
+  tick(c, dt, now, st) {
+      // full motion vs. a steady, motion-free render
+      const wobble = st.reducedMotion ? 0 : Math.sin(now / 200) * 4;
+      // ... draw using `wobble` (0 = no motion) ...
+  }
+  ```
+
+- **`state.budget`** is `1` when frames are healthy and drops toward `0` as they
+  lengthen. A budget-aware recipe scales expensive work by it (fewer particles,
+  less glow) so it degrades before the host drops frames. Consuming it is optional.
+
+  ```javascript
+  const live = (this.count = Math.floor(MAX_PARTICLES * st.budget));
+  ```
+
+Both are read-only per-frame numbers -- never write them, never allocate to honour
+them (a branch on a boolean/number is free; a new array per frame is not).
+
 ## The Pointer Object
 
 ```javascript
@@ -121,13 +157,65 @@ const instance = mountUIFX(
 instance.destroy();
 ```
 
-## Three Element Types
+## Element Types & Mount Modes
+
+`mountUIFX` HIJACKS -- it creates one of six native elements (opacity:0) under the
+canvas:
 
 | Type | Native Element | Recipe Gets | Key State |
 |------|----------------|-------------|-----------|
 | `UIType.TOGGLE` | `<input type="checkbox" role="switch">` | `onToggle(checked)` | `state.toggled` |
 | `UIType.BUTTON` | `<button>` | `onClick(x, y, state)` | `state.active` |
 | `UIType.SLIDER` | `<input type="range">` | `onDrag(val, velocity)` | `state.val` (0--1) |
+| `UIType.CHECKBOX` | `<input type="checkbox">` (no `role=switch`) | `onToggle(checked)` | `state.toggled`, `state.indeterminate` |
+| `UIType.PROGRESS` | `<progress>` (non-interactive) | (driven by `setValue`) | `state.val` |
+| `UIType.KNOB` | `<input type="range">` | `onDrag(val, velocity)` | `state.val`, `knobMode` |
+
+## Decorate-Mode Recipes (a canvas AROUND a live element)
+
+`decorateUIFX(el, factory, options)` is the SECOND mount mode: instead of creating
+a hidden element, it positions a canvas around an EXISTING, visible element (a real
+`<input>`, a button, any element). Same recipe interface, same coordinate system --
+`(0,0)` is the host's top-left, `state.w/h` are the host's size -- but three rules
+differ, and breaking them is caught by the torture t0 decorate DOM-diff:
+
+1. **Never touch the host.** A decoration paints ONLY its overlay canvas. Do not
+   write `el.style`, set an attribute, or read/move the host in `init`/`tick`. The
+   host must be byte-identical after `destroy()` (additive-only). The controller
+   never sets `opacity:0` and never reparents the host -- neither may your recipe.
+2. **Read host content from `state`, at frame time, allocation-free.** For a
+   form-control host, `state.text` (the value string) and `state.valid` (validity)
+   are updated by the controller at EVENT time (input/change/invalid) -- never per
+   frame. Your `tick` reads them; scan `state.text` with `charCodeAt` (no allocating
+   string ops), and edge-detect `state.valid` against a closure-cached previous.
+   There is NO new hook: a decoration reacts by polling `state` in `tick`.
+3. **`setValue`/`setChecked` are hijack-only.** A decoration reflects the host; it
+   does not drive it. Both throw in decorate mode.
+
+```javascript
+import { decorateUIFX } from './UIFXController.js';
+// A decoration reads state.focused / state.valid / state.text; it never draws the
+// host's own text (the real element already shows it).
+export function Underline() {
+    let fill = 0;
+    return {
+        tick(ctx, dt, now, state) {
+            const len = (state.text || '').length;           // number, no alloc
+            fill += ((len ? Math.min(len / 24, 1) : 0) - fill) * dt * 8;
+            ctx.strokeStyle = state.focused ? '#6ee7b6' : '#556';
+            ctx.lineWidth = 2;
+            ctx.beginPath();
+            ctx.moveTo(2, state.h - 3);
+            ctx.lineTo(2 + (state.w - 4) * fill, state.h - 3);
+            ctx.stroke();
+        },
+    };
+}
+const deco = decorateUIFX(document.querySelector('#field'), Underline);
+```
+
+Register a decorate recipe with `RECIPE_META.type: 'decorate'` -- then
+`mountRecipe(el, id)` routes it to `decorateUIFX` automatically.
 
 ## Using @zakkster Libraries in Recipes
 

package/UIFXController.d.ts

@@ -27,6 +27,17 @@ export interface UIFXState {
     h: number;
     padding: number;
     dpr: number;
+    /** U5: true when the user prefers reduced motion (matchMedia). Calm-path
+     *  recipes render statically when set; recipes that ignore it animate. */
+    reducedMotion: boolean;
+    /** U5: frame budget in 0..1 -- 1 at ~60fps, lower as frames lengthen.
+     *  Budget-aware recipes shed work (particles/glow) when it drops. */
+    budget: number;
+    /** Decorate mode only (decorateUIFX): the host form-control's current value.
+     *  Absent for hijack mounts and for a non-form host (then ''). */
+    text?: string;
+    /** Decorate mode only: the host's validity (el.validity.valid, else true). */
+    valid?: boolean;
 }
 
 export interface UIFXPointer {
@@ -56,7 +67,30 @@ export interface UIFXRecipe {
 
 export type RecipeFactory = () => UIFXRecipe;
 
-export interface MountOptions {
+/**
+ * A caller-supplied clock for the { ticker } host-clock mode (U5). Duck-typed to
+ * @zakkster/lite-ticker: it must expose add(fn) returning a remove function. The
+ * component registers its frame on it and, on destroy, removes that frame but
+ * NEVER destroys the ticker -- ownership stays with the caller.
+ */
+export interface HostTicker {
+    add(fn: (dtMs: number) => void): () => void;
+}
+
+/**
+ * Host-clock options (U5, decisions/0005), shared by both mount modes. Three
+ * mutually-exclusive modes: omit both for the shared ref-counted ticker (default);
+ * `ticker` to ride a caller-supplied clock; `driven: true` for no clock at all
+ * (the host calls instance.tick(dtMs)). Passing both throws.
+ */
+export interface HostClockOptions {
+    /** Ride a caller-supplied ticker instead of the shared one. Mutually exclusive with `driven`. */
+    ticker?: HostTicker;
+    /** No ticker/RAF: the host drives frames via instance.tick(dtMs). Mutually exclusive with `ticker`. */
+    driven?: boolean;
+}
+
+export interface MountOptions extends HostClockOptions {
     width?: number;
     height?: number;
     padding?: number;
@@ -86,12 +120,36 @@ export interface MountOptions {
     announce?: boolean;
 }
 
+/**
+ * Options accepted by decorateUIFX. A subset of MountOptions: a decoration
+ * inherits the host's geometry (offset box) and value (read from the host), so
+ * the hijack-only options (width/height/value/checked/disabled/knobMode/announce/
+ * label) are rejected -- passing one throws (fail closed).
+ */
+export interface DecorateOptions extends HostClockOptions {
+    /** Overlay padding around the host, in px (default 40). */
+    padding?: number;
+    seed?: number;
+    colors?: string[];
+    theme?: { light: string; mid: string; dark: string };
+    text?: string;
+    font?: string;
+}
+
 export interface UIFXInstance {
     el: HTMLElement;
     canvas: HTMLCanvasElement;
     wrapper: HTMLDivElement;
     state: UIFXState;
 
+    /**
+     * Drive one frame by hand (U5). Callable ONLY when mounted with { driven: true }
+     * -- it is the internal frame body, so a driven host pays exactly the internal
+     * per-frame cost. On a ticker-driven component it throws (that component owns
+     * its own clock).
+     */
+    tick(dtMs: number): void;
+
     /**
      * Set a valued control (SLIDER/KNOB/PROGRESS) to v in [0,1]: updates the
      * native element, state.val, any PROGRESS announcer, and fires onDrag once.
@@ -117,4 +175,44 @@ export declare function mountUIFX(
     options?: MountOptions
 ): UIFXInstance;
 
+/**
+ * The instance returned by decorateUIFX. Like UIFXInstance but WITHOUT `wrapper`
+ * (there is none -- the overlay is a sibling of the host, not a wrapper around
+ * it), and setValue/setChecked are hijack-only: a decoration reflects the host,
+ * it does not drive it, so both throw.
+ */
+export interface DecorateInstance {
+    /** The decorated host element (unchanged -- decorate never mutates it). */
+    el: HTMLElement;
+    /** The overlay canvas (the only DOM node decorate adds). */
+    canvas: HTMLCanvasElement;
+    state: UIFXState;
+    /** Drive one frame by hand (U5). Callable ONLY with { driven: true }; a
+     *  ticker-driven decoration throws. */
+    tick(dtMs: number): void;
+    /** Hijack-only. Throws in decorate mode. */
+    setValue(v?: number | null): void;
+    /** Hijack-only. Throws in decorate mode. */
+    setChecked(b?: boolean): void;
+    /** Remove the overlay + every listener decorate added; the host is left
+     *  byte-identical to before decorate. Idempotent. */
+    destroy(): void;
+}
+
+/**
+ * Decorate an EXISTING visible element with a canvas recipe WITHOUT hijacking it:
+ * no native element is created, opacity is never set, and the host is never
+ * reparented. An overlay canvas is added as a sibling and removed on destroy, so
+ * the host is byte-identical before and after. Recipe state is wired from the
+ * host's own events; for a form-control host, state.text/state.valid mirror
+ * el.value/el.validity (read at event time, never per frame). This is the honest
+ * home for a decoration over a real input (PasswordStrength, TypewriterField) and
+ * for generic form feedback (FocusHalo, ErrorShake, SuccessBloom). See 0004.
+ */
+export declare function decorateUIFX(
+    el: HTMLElement,
+    recipeFactory: RecipeFactory,
+    options?: DecorateOptions
+): DecorateInstance;
+
 export default mountUIFX;