foldkit 0.100.1 → 0.102.0

package/dist/html/index.js

@@ -1,9 +1,30 @@
-import { Array, Context, Data, Effect, Fiber, Function, Match, Option, Predicate, Ref, Stream, String, pipe, } from 'effect';
+import { Array, Context, Data, Effect, Fiber, Function, Match, Option, Predicate, Stream, String, pipe, } from 'effect';
 import { h } from 'snabbdom';
 import { MountTracker } from '../mount/index.js';
-import { Dispatch } from '../runtime/index.js';
+import { isChildAttribute } from './childAttribute.js';
 import { checkScheduledLeave, clearDragZoneAfterDrop, getDragZoneState, processDragEnter, processDragLeave, } from './dragZoneTracking.js';
+import { clearRuntime, requireDispatch, requireRuntimeContext, setRuntime, } from './runtimeSingleton.js';
+import { submodel } from './submodel.js';
 export { createKeyedLazy, createLazy } from './lazy.js';
+export { beginRender as __beginRender, createBoundaryRegistry as __createBoundaryRegistry, } from './boundary.js';
+export { childAttributes } from './childAttribute.js';
+export { defineView, submodel } from './submodel.js';
+/** Pushes a dispatch and runtime context frame for the duration of a render.
+ *  The runtime calls this immediately before invoking a user `view` and
+ *  matches it with {@link __clearRuntime} in a `finally` so an exception
+ *  inside view code does not leak the frame to the next render. Test
+ *  scaffolding that builds VNodes outside of a real program (Scene, Canvas
+ *  view-only tests, Mount tests) uses the same pair. Nested frames are
+ *  supported via an internal stack. */
+export const __setRuntime = setRuntime;
+/** Pops the current dispatch and runtime context frame. Must be paired with a
+ *  prior {@link __setRuntime} on the same call stack. */
+export const __clearRuntime = clearRuntime;
+/** Returns the current dispatch function. Foldkit's `Canvas.view` reads this
+ *  to build its synchronous pointer handlers, since it builds VNodes directly
+ *  rather than going through the html factory. Most application code never
+ *  needs to call this. */
+export const __requireDispatch = requireDispatch;
 /**
  * The `id` of the DOM element that hosts the Foldkit DevTools shadow root.
  * Lives here (not in `devTools/`) because the `OnBlur` handler below uses it
@@ -16,7 +37,7 @@ export const DEVTOOLS_HOST_ID = 'foldkit-devtools';
  * Tag symbol attached to file-aware event handler functions so Scene test
  * helpers can distinguish `OnFileChange` from `OnChange` (both register on
  * the DOM `change` event) and `OnDropFiles` from `OnDrop` (both register on
- * the DOM `drop` event). Internal implementation detail — consumer code
+ * the DOM `drop` event). Internal implementation detail. Consumer code
  * should never need to reference this directly.
  */
 /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
@@ -41,580 +62,614 @@ const onMountStates = new WeakMap();
 export const FOLDKIT_MOUNT_KEY = 'foldkitMount';
 const { Key, Class, Id, Title, Lang, Dir, Tabindex, Hidden, Contenteditable, Draggable, Accesskey, Translate, Inert, Popover, Popovertarget, Popovertargetaction, OnClick, OnDoubleClick, OnMouseDown, OnMouseUp, OnMouseEnter, OnMouseLeave, OnMouseOver, OnMouseOut, OnMouseMove, OnPointerMove, OnPointerLeave, OnPointerDown, OnPointerUp, OnKeyDown, OnKeyDownPreventDefault, OnKeyUp, OnKeyUpPreventDefault, OnKeyPress, OnFocus, OnBlur, OnInput, OnChange, OnFileChange, OnSubmit, OnReset, OnScroll, OnWheel, OnCopy, OnCut, OnPaste, OnCancel, OnToggle, OnContextMenu, OnDragStart, OnDrag, OnDragEnd, OnDragEnter, OnDragLeave, OnDragOver, AllowDrop, OnDrop, OnDropFiles, OnTouchStart, OnTouchEnd, OnTouchMove, OnTouchCancel, OnAnimationStart, OnAnimationEnd, OnAnimationIteration, OnTransitionEnd, OnLoad, OnError, OnPlay, OnPause, OnEnded, OnTimeUpdate, OnVolumeChange, OnSelect, Value, Checked, Selected, Open, Placeholder, Name, Disabled, Readonly, Required, Autofocus, Spellcheck, Autocorrect, Autocapitalize, InputMode, EnterKeyHint, Multiple, Type, Accept, Autocomplete, Pattern, Maxlength, Minlength, Size, Cols, Rows, Max, Min, Step, For, Href, Src, Alt, Target, Rel, Download, Action, Method, Enctype, Novalidate, Formaction, Formmethod, Formnovalidate, Formtarget, Formenctype, Colspan, Rowspan, Scope, Headers, Span, Start, Reversed, CiteAttr, Datetime, Wrap, List, FormAttr, LabelAttr, ContentAttr, Charset, HttpEquiv, Srcset, Sizes, Loading, Decoding, Fetchpriority, Crossorigin, Referrerpolicy, Integrity, Hreflang, Ping, Sandbox, Allow, Srcdoc, Autoplay, Controls, Loop, Muted, Poster, Preload, Playsinline, High, Low, Optimum, Usemap, Ismap, Role, AriaLabel, AriaLabelledBy, AriaDescribedBy, AriaHidden, AriaExpanded, AriaSelected, AriaChecked, AriaDisabled, AriaRequired, AriaInvalid, AriaLive, AriaControls, AriaCurrent, AriaOrientation, AriaPressed, AriaHasPopup, AriaActiveDescendant, AriaSort, AriaMultiSelectable, AriaModal, AriaBusy, AriaErrorMessage, AriaRoleDescription, AriaAtomic, AriaAutocomplete, AriaColcount, AriaColindex, AriaColspan, AriaDescription, AriaDetails, AriaFlowto, AriaKeyshortcuts, AriaLevel, AriaOwns, AriaPlaceholder, AriaPosinset, AriaReadonly, AriaRelevant, AriaRowcount, AriaRowindex, AriaRowspan, AriaSetsize, AriaValuemax, AriaValuemin, AriaValuenow, AriaValuetext, Attribute, DataAttribute, Style, InnerHTML, ViewBox, Xmlns, Fill, FillRule, ClipRule, Stroke, StrokeWidth, StrokeLinecap, StrokeLinejoin, D, Cx, Cy, R, X, Y, Width, Height, X1, Y1, X2, Y2, Points, Transform, Opacity, StrokeDasharray, StrokeDashoffset, Prop, OnCustomEvent, OnMount, } = Data.taggedEnum();
 export { Prop, OnCustomEvent };
-const buildVNodeData = (attributes) => Effect.gen(function* () {
-    const { dispatchSync } = yield* Dispatch;
-    const capturedContext = yield* Effect.context();
-    const dataRef = yield* Ref.make({});
-    const setData = (key, value) => Ref.update(dataRef, data => ({ ...data, [key]: value }));
-    const updateData = (key, value) => Ref.update(dataRef, data => ({
-        ...data,
-        [key]: { ...data[key], ...value },
-    }));
-    const updateDataProps = (props) => updateData('props', props);
-    const updateDataOn = (on) => updateData('on', on);
-    const updateDataAttrs = (attrs) => updateData('attrs', attrs);
-    const postpatchPropsRef = yield* Ref.make([]);
-    const updatePropsWithPostpatch = (propName, value) => Effect.all([
-        Ref.update(dataRef, data => ({
-            ...data,
-            props: {
-                ...data.props,
-                [propName]: value,
-            },
-        })),
-        Ref.update(postpatchPropsRef, entries => [
-            ...entries,
-            { propName, value },
-        ]),
-    ]);
-    yield* Effect.forEach(attributes, attr => Match.value(attr).pipe(Match.tagsExhaustive({
-        Key: ({ value }) => setData('key', value),
-        Class: ({ value }) => Effect.gen(function* () {
-            const classObject = pipe(value, String.split(/\s+/), Array.filter(String.isNonEmpty), Array.reduce({}, (acc, className) => ({
-                ...acc,
-                [className]: true,
-            })));
-            yield* setData('class', classObject);
-        }),
-        Id: ({ value }) => updateDataProps({ id: value }),
-        Title: ({ value }) => updateDataProps({ title: value }),
-        Lang: ({ value }) => updateDataProps({ lang: value }),
-        Dir: ({ value }) => updateDataProps({ dir: value }),
-        Tabindex: ({ value }) => updateDataProps({ tabIndex: value }),
-        Hidden: ({ value }) => updateDataProps({ hidden: value }),
-        Contenteditable: ({ value }) => updateDataAttrs({ contenteditable: value }),
-        Draggable: ({ value }) => updateDataProps({ draggable: value }),
-        Accesskey: ({ value }) => updateDataAttrs({ accesskey: value }),
-        Translate: ({ value }) => updateDataAttrs({ translate: value }),
-        Inert: ({ value }) => updateDataProps({ inert: value }),
-        Popover: ({ value }) => updateDataAttrs({ popover: value }),
-        Popovertarget: ({ value }) => updateDataAttrs({ popovertarget: value }),
-        Popovertargetaction: ({ value }) => updateDataAttrs({ popovertargetaction: value }),
-        OnClick: ({ message }) => updateDataOn({
-            click: () => dispatchSync(message),
-        }),
-        OnDoubleClick: ({ message }) => updateDataOn({
-            dblclick: () => dispatchSync(message),
-        }),
-        OnMouseDown: ({ message }) => updateDataOn({
-            mousedown: () => dispatchSync(message),
-        }),
-        OnMouseUp: ({ message }) => updateDataOn({
-            mouseup: () => dispatchSync(message),
-        }),
-        OnMouseEnter: ({ message }) => updateDataOn({
-            mouseenter: () => dispatchSync(message),
-        }),
-        OnMouseLeave: ({ message }) => updateDataOn({
-            mouseleave: () => dispatchSync(message),
-        }),
-        OnMouseOver: ({ message }) => updateDataOn({
-            mouseover: () => dispatchSync(message),
-        }),
-        OnMouseOut: ({ message }) => updateDataOn({
-            mouseout: () => dispatchSync(message),
-        }),
-        OnMouseMove: ({ message }) => updateDataOn({
-            mousemove: () => dispatchSync(message),
-        }),
-        OnPointerMove: ({ f }) => updateDataOn({
-            pointermove: (event) => {
-                const maybeMessage = f(event.screenX, event.screenY, event.pointerType);
-                if (Option.isSome(maybeMessage)) {
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnPointerLeave: ({ f }) => updateDataOn({
-            pointerleave: (event) => {
-                const maybeMessage = f(event.pointerType);
-                if (Option.isSome(maybeMessage)) {
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnPointerDown: ({ f }) => updateDataOn({
-            pointerdown: (event) => {
-                const maybeMessage = f(event.pointerType, event.button, event.screenX, event.screenY, event.timeStamp, event.clientX, event.clientY);
-                if (Option.isSome(maybeMessage)) {
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnPointerUp: ({ f }) => updateDataOn({
-            pointerup: (event) => {
-                const maybeMessage = f(event.screenX, event.screenY, event.pointerType, event.timeStamp);
-                if (Option.isSome(maybeMessage)) {
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnKeyDown: ({ f }) => updateDataOn({
-            keydown: (event) => dispatchSync(f(event.key, keyboardModifiers(event))),
-        }),
-        OnKeyDownPreventDefault: ({ f }) => updateDataOn({
-            keydown: (event) => {
-                const maybeMessage = f(event.key, keyboardModifiers(event));
-                if (Option.isSome(maybeMessage)) {
-                    event.preventDefault();
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnKeyUp: ({ f }) => updateDataOn({
-            keyup: (event) => dispatchSync(f(event.key, keyboardModifiers(event))),
-        }),
-        OnKeyUpPreventDefault: ({ f }) => updateDataOn({
-            keyup: (event) => {
-                const maybeMessage = f(event.key, keyboardModifiers(event));
-                if (Option.isSome(maybeMessage)) {
-                    event.preventDefault();
-                    dispatchSync(maybeMessage.value);
-                }
-            },
-        }),
-        OnKeyPress: ({ f }) => updateDataOn({
-            keypress: (event) => dispatchSync(f(event.key, keyboardModifiers(event))),
-        }),
-        OnFocus: ({ message }) => updateDataOn({
-            focus: () => dispatchSync(message),
-        }),
-        OnBlur: ({ message }) => updateDataOn({
-            blur: (event) => {
-                if (event.relatedTarget instanceof Element &&
-                    event.relatedTarget.id === DEVTOOLS_HOST_ID) {
-                    return;
-                }
-                dispatchSync(message);
-            },
-        }),
-        OnInput: ({ f }) => updateDataOn({
-            input: (event) => 
+const setData = (ctx, key, value) => {
+    ctx.data[key] = value;
+};
+const updateData = (ctx, key, value) => {
+    const existing = ctx.data[key];
+    if (existing === undefined) {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.data[key] = value;
+    }
+    else {
+        Object.assign(existing, value);
+    }
+};
+const updateDataProps = (ctx, props) => updateData(ctx, 'props', props);
+const updateDataAttrs = (ctx, attrs) => updateData(ctx, 'attrs', attrs);
+// Event handlers chain per DOM event in spread order. Without this,
+// `Object.assign` would silently drop earlier handlers for the same
+// event when a consumer spreads published ChildAttributes alongside
+// their own (e.g. `[...attributes.checkbox, h.OnClick(MyMsg())]` would
+// drop one of the two click handlers depending on order). Each chained
+// handler is invoked synchronously in registration order; if an
+// earlier handler throws, later handlers do not run (mirroring native
+// exception propagation, not silently swallowing bugs).
+const updateDataOn = (ctx, on) => {
+    if (ctx.data.on === undefined) {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.data.on = on;
+        return;
+    }
+    const existing = ctx.data.on;
+    for (const key of Object.keys(on)) {
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        const existingHandler = existing[key];
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        const newHandler = on[key];
+        if (existingHandler === undefined) {
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            dispatchSync(f(event.target.value)),
-        }),
-        OnChange: ({ f }) => updateDataOn({
-            change: (event) => 
+            ;
+            existing[key] = newHandler;
+        }
+        else {
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            dispatchSync(f(event.target.value)),
-        }),
-        OnFileChange: ({ f }) => updateDataOn({
-            change: tagAsFileHandler((event) => {
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                const target = event.target;
-                const files = target.files
-                    ? Array.fromIterable(target.files)
-                    : Array.empty();
-                target.value = '';
-                dispatchSync(f(files));
-            }, 'OnFileChange'),
-        }),
-        OnSubmit: ({ message }) => updateDataOn({
-            submit: (event) => {
+            ;
+            existing[key] = (...args) => {
+                existingHandler(...args);
+                newHandler(...args);
+            };
+        }
+    }
+};
+const updatePropsWithPostpatch = (ctx, propName, value) => {
+    updateDataProps(ctx, { [propName]: value });
+    ctx.postpatchProps.push({ propName, value });
+};
+// NOTE: Built once at module load. The matcher dispatches on `_tag` and
+// returns a thunk that applies the resulting mutation to a per-VNode
+// BuildContext. Per-attribute cost drops from O(matcher arms) closure
+// allocations to one thunk. `Attribute<unknown>` is the runtime-erased
+// shape. Message is purely a TypeScript parameter at this level and
+// DispatchSync already accepts unknown.
+const attributeMatcher = Match.type().pipe(Match.tagsExhaustive({
+    Key: ({ value }) => (ctx) => setData(ctx, 'key', value),
+    Class: ({ value }) => {
+        const classObject = pipe(value, String.split(/\s+/), Array.filter(String.isNonEmpty), Array.reduce({}, (acc, className) => ({
+            ...acc,
+            [className]: true,
+        })));
+        return (ctx) => setData(ctx, 'class', classObject);
+    },
+    Id: ({ value }) => (ctx) => updateDataProps(ctx, { id: value }),
+    Title: ({ value }) => (ctx) => updateDataProps(ctx, { title: value }),
+    Lang: ({ value }) => (ctx) => updateDataProps(ctx, { lang: value }),
+    Dir: ({ value }) => (ctx) => updateDataProps(ctx, { dir: value }),
+    Tabindex: ({ value }) => (ctx) => updateDataProps(ctx, { tabIndex: value }),
+    Hidden: ({ value }) => (ctx) => updateDataProps(ctx, { hidden: value }),
+    Contenteditable: ({ value }) => (ctx) => updateDataAttrs(ctx, { contenteditable: value }),
+    Draggable: ({ value }) => (ctx) => updateDataProps(ctx, { draggable: value }),
+    Accesskey: ({ value }) => (ctx) => updateDataAttrs(ctx, { accesskey: value }),
+    Translate: ({ value }) => (ctx) => updateDataAttrs(ctx, { translate: value }),
+    Inert: ({ value }) => (ctx) => updateDataProps(ctx, { inert: value }),
+    Popover: ({ value }) => (ctx) => updateDataAttrs(ctx, { popover: value }),
+    Popovertarget: ({ value }) => (ctx) => updateDataAttrs(ctx, { popovertarget: value }),
+    Popovertargetaction: ({ value }) => (ctx) => updateDataAttrs(ctx, { popovertargetaction: value }),
+    OnClick: ({ message }) => (ctx) => updateDataOn(ctx, { click: () => ctx.dispatch(message) }),
+    OnDoubleClick: ({ message }) => (ctx) => updateDataOn(ctx, { dblclick: () => ctx.dispatch(message) }),
+    OnMouseDown: ({ message }) => (ctx) => updateDataOn(ctx, { mousedown: () => ctx.dispatch(message) }),
+    OnMouseUp: ({ message }) => (ctx) => updateDataOn(ctx, { mouseup: () => ctx.dispatch(message) }),
+    OnMouseEnter: ({ message }) => (ctx) => updateDataOn(ctx, { mouseenter: () => ctx.dispatch(message) }),
+    OnMouseLeave: ({ message }) => (ctx) => updateDataOn(ctx, { mouseleave: () => ctx.dispatch(message) }),
+    OnMouseOver: ({ message }) => (ctx) => updateDataOn(ctx, { mouseover: () => ctx.dispatch(message) }),
+    OnMouseOut: ({ message }) => (ctx) => updateDataOn(ctx, { mouseout: () => ctx.dispatch(message) }),
+    OnMouseMove: ({ message }) => (ctx) => updateDataOn(ctx, { mousemove: () => ctx.dispatch(message) }),
+    OnPointerMove: ({ f }) => (ctx) => updateDataOn(ctx, {
+        pointermove: (event) => {
+            const maybeMessage = f(event.screenX, event.screenY, event.pointerType);
+            if (Option.isSome(maybeMessage)) {
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnPointerLeave: ({ f }) => (ctx) => updateDataOn(ctx, {
+        pointerleave: (event) => {
+            const maybeMessage = f(event.pointerType);
+            if (Option.isSome(maybeMessage)) {
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnPointerDown: ({ f }) => (ctx) => updateDataOn(ctx, {
+        pointerdown: (event) => {
+            const maybeMessage = f(event.pointerType, event.button, event.screenX, event.screenY, event.timeStamp, event.clientX, event.clientY);
+            if (Option.isSome(maybeMessage)) {
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnPointerUp: ({ f }) => (ctx) => updateDataOn(ctx, {
+        pointerup: (event) => {
+            const maybeMessage = f(event.screenX, event.screenY, event.pointerType, event.timeStamp);
+            if (Option.isSome(maybeMessage)) {
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnKeyDown: ({ f }) => (ctx) => updateDataOn(ctx, {
+        keydown: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    }),
+    OnKeyDownPreventDefault: ({ f }) => (ctx) => updateDataOn(ctx, {
+        keydown: (event) => {
+            const maybeMessage = f(event.key, keyboardModifiers(event));
+            if (Option.isSome(maybeMessage)) {
                 event.preventDefault();
-                dispatchSync(message);
-            },
-        }),
-        OnReset: ({ message }) => updateDataOn({
-            reset: () => dispatchSync(message),
-        }),
-        OnScroll: ({ f }) => updateDataOn({
-            scroll: (event) => 
-            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            dispatchSync(f(event.target.scrollTop)),
-        }),
-        OnWheel: ({ message }) => updateDataOn({
-            wheel: () => dispatchSync(message),
-        }),
-        OnCopy: ({ message }) => updateDataOn({
-            copy: () => dispatchSync(message),
-        }),
-        OnCut: ({ message }) => updateDataOn({
-            cut: () => dispatchSync(message),
-        }),
-        OnPaste: ({ message }) => updateDataOn({
-            paste: () => dispatchSync(message),
-        }),
-        OnCancel: ({ message }) => updateDataOn({
-            cancel: (event) => {
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnKeyUp: ({ f }) => (ctx) => updateDataOn(ctx, {
+        keyup: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    }),
+    OnKeyUpPreventDefault: ({ f }) => (ctx) => updateDataOn(ctx, {
+        keyup: (event) => {
+            const maybeMessage = f(event.key, keyboardModifiers(event));
+            if (Option.isSome(maybeMessage)) {
                 event.preventDefault();
-                dispatchSync(message);
-            },
-        }),
-        OnToggle: ({ f }) => updateDataOn({
-            toggle: event => 
+                ctx.dispatch(maybeMessage.value);
+            }
+        },
+    }),
+    OnKeyPress: ({ f }) => (ctx) => updateDataOn(ctx, {
+        keypress: (event) => ctx.dispatch(f(event.key, keyboardModifiers(event))),
+    }),
+    OnFocus: ({ message }) => (ctx) => updateDataOn(ctx, { focus: () => ctx.dispatch(message) }),
+    OnBlur: ({ message }) => (ctx) => updateDataOn(ctx, {
+        blur: (event) => {
+            if (event.relatedTarget instanceof Element &&
+                event.relatedTarget.id === DEVTOOLS_HOST_ID) {
+                return;
+            }
+            ctx.dispatch(message);
+        },
+    }),
+    OnInput: ({ f }) => (ctx) => updateDataOn(ctx, {
+        input: (event) => 
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.dispatch(f(event.target.value)),
+    }),
+    OnChange: ({ f }) => (ctx) => updateDataOn(ctx, {
+        change: (event) => 
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.dispatch(f(event.target.value)),
+    }),
+    OnFileChange: ({ f }) => (ctx) => updateDataOn(ctx, {
+        change: tagAsFileHandler((event) => {
             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-            dispatchSync(f(event.target.open)),
-        }),
-        OnContextMenu: ({ message }) => updateDataOn({
-            contextmenu: (event) => {
-                event.preventDefault();
-                dispatchSync(message);
-            },
-        }),
-        OnDragStart: ({ message }) => updateDataOn({
-            dragstart: () => dispatchSync(message),
-        }),
-        OnDrag: ({ message }) => updateDataOn({
-            drag: () => dispatchSync(message),
-        }),
-        OnDragEnd: ({ message }) => updateDataOn({
-            dragend: () => dispatchSync(message),
-        }),
-        OnDragEnter: ({ message }) => updateDataOn({
-            dragenter: (event) => {
-                event.preventDefault();
-                const zone = event.currentTarget;
-                if (!(zone instanceof Element)) {
-                    dispatchSync(message);
-                    return;
-                }
-                const state = getDragZoneState(zone);
-                if (processDragEnter(state, zone, event.target)) {
-                    dispatchSync(message);
-                }
-            },
-        }),
-        OnDragLeave: ({ message }) => updateDataOn({
-            dragleave: (event) => {
-                const zone = event.currentTarget;
-                if (!(zone instanceof Element)) {
-                    dispatchSync(message);
-                    return;
-                }
-                const state = getDragZoneState(zone);
-                if (processDragLeave(state, zone, event.target) === 'schedule') {
-                    queueMicrotask(() => {
-                        if (checkScheduledLeave(state)) {
-                            dispatchSync(message);
-                        }
-                    });
-                }
-            },
-        }),
-        OnDragOver: ({ message }) => updateDataOn({
-            dragover: (event) => {
-                event.preventDefault();
-                dispatchSync(message);
-            },
-        }),
-        AllowDrop: () => updateDataOn({
-            dragover: (event) => {
-                event.preventDefault();
-            },
-        }),
-        OnDrop: ({ message }) => updateDataOn({
-            drop: (event) => {
-                event.preventDefault();
-                const zone = event.currentTarget;
-                if (zone instanceof Element) {
-                    clearDragZoneAfterDrop(zone);
+            const target = event.target;
+            const files = target.files
+                ? Array.fromIterable(target.files)
+                : Array.empty();
+            target.value = '';
+            ctx.dispatch(f(files));
+        }, 'OnFileChange'),
+    }),
+    OnSubmit: ({ message }) => (ctx) => updateDataOn(ctx, {
+        submit: (event) => {
+            event.preventDefault();
+            ctx.dispatch(message);
+        },
+    }),
+    OnReset: ({ message }) => (ctx) => updateDataOn(ctx, { reset: () => ctx.dispatch(message) }),
+    OnScroll: ({ f }) => (ctx) => updateDataOn(ctx, {
+        scroll: (event) => 
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.dispatch(f(event.target.scrollTop)),
+    }),
+    OnWheel: ({ message }) => (ctx) => updateDataOn(ctx, { wheel: () => ctx.dispatch(message) }),
+    OnCopy: ({ message }) => (ctx) => updateDataOn(ctx, { copy: () => ctx.dispatch(message) }),
+    OnCut: ({ message }) => (ctx) => updateDataOn(ctx, { cut: () => ctx.dispatch(message) }),
+    OnPaste: ({ message }) => (ctx) => updateDataOn(ctx, { paste: () => ctx.dispatch(message) }),
+    OnCancel: ({ message }) => (ctx) => updateDataOn(ctx, {
+        cancel: (event) => {
+            event.preventDefault();
+            ctx.dispatch(message);
+        },
+    }),
+    OnToggle: ({ f }) => (ctx) => updateDataOn(ctx, {
+        toggle: event => 
+        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+        ctx.dispatch(f(event.target.open)),
+    }),
+    OnContextMenu: ({ message }) => (ctx) => updateDataOn(ctx, {
+        contextmenu: (event) => {
+            event.preventDefault();
+            ctx.dispatch(message);
+        },
+    }),
+    OnDragStart: ({ message }) => (ctx) => updateDataOn(ctx, { dragstart: () => ctx.dispatch(message) }),
+    OnDrag: ({ message }) => (ctx) => updateDataOn(ctx, { drag: () => ctx.dispatch(message) }),
+    OnDragEnd: ({ message }) => (ctx) => updateDataOn(ctx, { dragend: () => ctx.dispatch(message) }),
+    OnDragEnter: ({ message }) => (ctx) => updateDataOn(ctx, {
+        dragenter: (event) => {
+            event.preventDefault();
+            const zone = event.currentTarget;
+            if (!(zone instanceof Element)) {
+                ctx.dispatch(message);
+                return;
+            }
+            const state = getDragZoneState(zone);
+            if (processDragEnter(state, zone, event.target)) {
+                ctx.dispatch(message);
+            }
+        },
+    }),
+    OnDragLeave: ({ message }) => (ctx) => updateDataOn(ctx, {
+        dragleave: (event) => {
+            const zone = event.currentTarget;
+            if (!(zone instanceof Element)) {
+                ctx.dispatch(message);
+                return;
+            }
+            const state = getDragZoneState(zone);
+            if (processDragLeave(state, zone, event.target) === 'schedule') {
+                queueMicrotask(() => {
+                    if (checkScheduledLeave(state)) {
+                        ctx.dispatch(message);
+                    }
+                });
+            }
+        },
+    }),
+    OnDragOver: ({ message }) => (ctx) => updateDataOn(ctx, {
+        dragover: (event) => {
+            event.preventDefault();
+            ctx.dispatch(message);
+        },
+    }),
+    AllowDrop: () => (ctx) => updateDataOn(ctx, {
+        dragover: (event) => {
+            event.preventDefault();
+        },
+    }),
+    OnDrop: ({ message }) => (ctx) => updateDataOn(ctx, {
+        drop: (event) => {
+            event.preventDefault();
+            const zone = event.currentTarget;
+            if (zone instanceof Element) {
+                clearDragZoneAfterDrop(zone);
+            }
+            ctx.dispatch(message);
+        },
+    }),
+    OnDropFiles: ({ f }) => (ctx) => updateDataOn(ctx, {
+        drop: tagAsFileHandler((event) => {
+            event.preventDefault();
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            const dragEvent = event;
+            const zone = dragEvent.currentTarget;
+            if (zone instanceof Element) {
+                clearDragZoneAfterDrop(zone);
+            }
+            const files = dragEvent.dataTransfer?.files
+                ? Array.fromIterable(dragEvent.dataTransfer.files)
+                : Array.empty();
+            ctx.dispatch(f(files));
+        }, 'OnDropFiles'),
+    }),
+    OnTouchStart: ({ message }) => (ctx) => updateDataOn(ctx, { touchstart: () => ctx.dispatch(message) }),
+    OnTouchEnd: ({ message }) => (ctx) => updateDataOn(ctx, { touchend: () => ctx.dispatch(message) }),
+    OnTouchMove: ({ message }) => (ctx) => updateDataOn(ctx, { touchmove: () => ctx.dispatch(message) }),
+    OnTouchCancel: ({ message }) => (ctx) => updateDataOn(ctx, { touchcancel: () => ctx.dispatch(message) }),
+    OnAnimationStart: ({ message }) => (ctx) => updateDataOn(ctx, { animationstart: () => ctx.dispatch(message) }),
+    OnAnimationEnd: ({ message }) => (ctx) => updateDataOn(ctx, { animationend: () => ctx.dispatch(message) }),
+    OnAnimationIteration: ({ message }) => (ctx) => updateDataOn(ctx, { animationiteration: () => ctx.dispatch(message) }),
+    OnTransitionEnd: ({ message }) => (ctx) => updateDataOn(ctx, { transitionend: () => ctx.dispatch(message) }),
+    OnLoad: ({ message }) => (ctx) => updateDataOn(ctx, { load: () => ctx.dispatch(message) }),
+    OnError: ({ message }) => (ctx) => updateDataOn(ctx, { error: () => ctx.dispatch(message) }),
+    OnPlay: ({ message }) => (ctx) => updateDataOn(ctx, { play: () => ctx.dispatch(message) }),
+    OnPause: ({ message }) => (ctx) => updateDataOn(ctx, { pause: () => ctx.dispatch(message) }),
+    OnEnded: ({ message }) => (ctx) => updateDataOn(ctx, { ended: () => ctx.dispatch(message) }),
+    OnTimeUpdate: ({ message }) => (ctx) => updateDataOn(ctx, { timeupdate: () => ctx.dispatch(message) }),
+    OnVolumeChange: ({ message }) => (ctx) => updateDataOn(ctx, { volumechange: () => ctx.dispatch(message) }),
+    OnSelect: ({ message }) => (ctx) => updateDataOn(ctx, { select: () => ctx.dispatch(message) }),
+    Value: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'value', value),
+    Checked: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'checked', value),
+    Selected: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'selected', value),
+    Open: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'open', value),
+    Placeholder: ({ value }) => (ctx) => updateDataProps(ctx, { placeholder: value }),
+    Name: ({ value }) => (ctx) => updateDataProps(ctx, { name: value }),
+    Disabled: ({ value }) => (ctx) => updateDataProps(ctx, { disabled: value }),
+    Readonly: ({ value }) => (ctx) => updateDataProps(ctx, { readOnly: value }),
+    Required: ({ value }) => (ctx) => updateDataProps(ctx, { required: value }),
+    Autofocus: ({ value }) => (ctx) => updateDataProps(ctx, { autofocus: value }),
+    Spellcheck: ({ value }) => (ctx) => updateDataAttrs(ctx, { spellcheck: value.toString() }),
+    Autocorrect: ({ value }) => (ctx) => updateDataAttrs(ctx, { autocorrect: value }),
+    Autocapitalize: ({ value }) => (ctx) => updateDataAttrs(ctx, { autocapitalize: value }),
+    InputMode: ({ value }) => (ctx) => updateDataAttrs(ctx, { inputmode: value }),
+    EnterKeyHint: ({ value }) => (ctx) => updateDataAttrs(ctx, { enterkeyhint: value }),
+    Multiple: ({ value }) => (ctx) => updateDataProps(ctx, { multiple: value }),
+    Type: ({ value }) => (ctx) => updateDataProps(ctx, { type: value }),
+    Accept: ({ value }) => (ctx) => updateDataProps(ctx, { accept: value }),
+    Autocomplete: ({ value }) => (ctx) => updateDataProps(ctx, { autocomplete: value }),
+    Pattern: ({ value }) => (ctx) => updateDataProps(ctx, { pattern: value }),
+    Maxlength: ({ value }) => (ctx) => updateDataProps(ctx, { maxLength: value }),
+    Minlength: ({ value }) => (ctx) => updateDataProps(ctx, { minLength: value }),
+    Size: ({ value }) => (ctx) => updateDataProps(ctx, { size: value }),
+    Cols: ({ value }) => (ctx) => updateDataProps(ctx, { cols: value }),
+    Rows: ({ value }) => (ctx) => updateDataProps(ctx, { rows: value }),
+    Max: ({ value }) => (ctx) => updateDataProps(ctx, { max: value }),
+    Min: ({ value }) => (ctx) => updateDataProps(ctx, { min: value }),
+    Step: ({ value }) => (ctx) => updateDataProps(ctx, { step: value }),
+    For: ({ value }) => (ctx) => updateDataProps(ctx, { htmlFor: value }),
+    Href: ({ value }) => (ctx) => updateDataProps(ctx, { href: value }),
+    Src: ({ value }) => (ctx) => updateDataProps(ctx, { src: value }),
+    Alt: ({ value }) => (ctx) => updateDataProps(ctx, { alt: value }),
+    Target: ({ value }) => (ctx) => updateDataProps(ctx, { target: value }),
+    Rel: ({ value }) => (ctx) => updateDataProps(ctx, { rel: value }),
+    Download: ({ value }) => (ctx) => updateDataProps(ctx, { download: value }),
+    Action: ({ value }) => (ctx) => updateDataProps(ctx, { action: value }),
+    Method: ({ value }) => (ctx) => updateDataProps(ctx, { method: value }),
+    Enctype: ({ value }) => (ctx) => updateDataProps(ctx, { enctype: value }),
+    Novalidate: ({ value }) => (ctx) => updateDataProps(ctx, { noValidate: value }),
+    Formaction: ({ value }) => (ctx) => updateDataProps(ctx, { formAction: value }),
+    Formmethod: ({ value }) => (ctx) => updateDataProps(ctx, { formMethod: value }),
+    Formnovalidate: ({ value }) => (ctx) => updateDataProps(ctx, { formNoValidate: value }),
+    Formtarget: ({ value }) => (ctx) => updateDataProps(ctx, { formTarget: value }),
+    Formenctype: ({ value }) => (ctx) => updateDataProps(ctx, { formEnctype: value }),
+    Colspan: ({ value }) => (ctx) => updateDataProps(ctx, { colSpan: value }),
+    Rowspan: ({ value }) => (ctx) => updateDataProps(ctx, { rowSpan: value }),
+    Scope: ({ value }) => (ctx) => updateDataAttrs(ctx, { scope: value }),
+    Headers: ({ value }) => (ctx) => updateDataAttrs(ctx, { headers: value }),
+    Span: ({ value }) => (ctx) => updateDataProps(ctx, { span: value }),
+    Start: ({ value }) => (ctx) => updateDataProps(ctx, { start: value }),
+    Reversed: ({ value }) => (ctx) => updateDataProps(ctx, { reversed: value }),
+    CiteAttr: ({ value }) => (ctx) => updateDataProps(ctx, { cite: value }),
+    Datetime: ({ value }) => (ctx) => updateDataProps(ctx, { dateTime: value }),
+    Wrap: ({ value }) => (ctx) => updateDataProps(ctx, { wrap: value }),
+    List: ({ value }) => (ctx) => updateDataAttrs(ctx, { list: value }),
+    FormAttr: ({ value }) => (ctx) => updateDataAttrs(ctx, { form: value }),
+    LabelAttr: ({ value }) => (ctx) => updateDataProps(ctx, { label: value }),
+    ContentAttr: ({ value }) => (ctx) => updateDataAttrs(ctx, { content: value }),
+    Charset: ({ value }) => (ctx) => updateDataAttrs(ctx, { charset: value }),
+    HttpEquiv: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'http-equiv': value }),
+    Srcset: ({ value }) => (ctx) => updateDataAttrs(ctx, { srcset: value }),
+    Sizes: ({ value }) => (ctx) => updateDataAttrs(ctx, { sizes: value }),
+    Loading: ({ value }) => (ctx) => updateDataAttrs(ctx, { loading: value }),
+    Decoding: ({ value }) => (ctx) => updateDataAttrs(ctx, { decoding: value }),
+    Fetchpriority: ({ value }) => (ctx) => updateDataAttrs(ctx, { fetchpriority: value }),
+    Crossorigin: ({ value }) => (ctx) => updateDataAttrs(ctx, { crossorigin: value }),
+    Referrerpolicy: ({ value }) => (ctx) => updateDataAttrs(ctx, { referrerpolicy: value }),
+    Integrity: ({ value }) => (ctx) => updateDataAttrs(ctx, { integrity: value }),
+    Hreflang: ({ value }) => (ctx) => updateDataAttrs(ctx, { hreflang: value }),
+    Ping: ({ value }) => (ctx) => updateDataAttrs(ctx, { ping: value }),
+    Sandbox: ({ value }) => (ctx) => updateDataAttrs(ctx, { sandbox: value }),
+    Allow: ({ value }) => (ctx) => updateDataAttrs(ctx, { allow: value }),
+    Srcdoc: ({ value }) => (ctx) => updateDataAttrs(ctx, { srcdoc: value }),
+    Autoplay: ({ value }) => (ctx) => updateDataProps(ctx, { autoplay: value }),
+    Controls: ({ value }) => (ctx) => updateDataProps(ctx, { controls: value }),
+    Loop: ({ value }) => (ctx) => updateDataProps(ctx, { loop: value }),
+    Muted: ({ value }) => (ctx) => updatePropsWithPostpatch(ctx, 'muted', value),
+    Poster: ({ value }) => (ctx) => updateDataProps(ctx, { poster: value }),
+    Preload: ({ value }) => (ctx) => updateDataProps(ctx, { preload: value }),
+    Playsinline: ({ value }) => (ctx) => updateDataProps(ctx, { playsInline: value }),
+    High: ({ value }) => (ctx) => updateDataProps(ctx, { high: value }),
+    Low: ({ value }) => (ctx) => updateDataProps(ctx, { low: value }),
+    Optimum: ({ value }) => (ctx) => updateDataProps(ctx, { optimum: value }),
+    Usemap: ({ value }) => (ctx) => updateDataAttrs(ctx, { usemap: value }),
+    Ismap: ({ value }) => (ctx) => updateDataProps(ctx, { isMap: value }),
+    Role: ({ value }) => (ctx) => updateDataAttrs(ctx, { role: value }),
+    AriaLabel: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-label': value }),
+    AriaLabelledBy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-labelledby': value }),
+    AriaDescribedBy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-describedby': value }),
+    AriaHidden: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-hidden': value.toString() }),
+    AriaExpanded: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-expanded': value.toString() }),
+    AriaSelected: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-selected': value.toString() }),
+    AriaChecked: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-checked': value.toString() }),
+    AriaDisabled: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-disabled': value.toString() }),
+    AriaRequired: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-required': value.toString() }),
+    AriaInvalid: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-invalid': value.toString() }),
+    AriaLive: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-live': value }),
+    AriaControls: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-controls': value }),
+    AriaCurrent: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-current': value }),
+    AriaOrientation: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-orientation': value }),
+    AriaPressed: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-pressed': value }),
+    AriaHasPopup: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-haspopup': value }),
+    AriaActiveDescendant: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-activedescendant': value }),
+    AriaSort: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-sort': value }),
+    AriaMultiSelectable: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-multiselectable': value.toString() }),
+    AriaModal: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-modal': value.toString() }),
+    AriaBusy: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-busy': value.toString() }),
+    AriaErrorMessage: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-errormessage': value }),
+    AriaRoleDescription: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-roledescription': value }),
+    AriaAtomic: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-atomic': value.toString() }),
+    AriaAutocomplete: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-autocomplete': value }),
+    AriaColcount: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colcount': value.toString() }),
+    AriaColindex: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colindex': value.toString() }),
+    AriaColspan: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-colspan': value.toString() }),
+    AriaDescription: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-description': value }),
+    AriaDetails: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-details': value }),
+    AriaFlowto: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-flowto': value }),
+    AriaKeyshortcuts: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-keyshortcuts': value }),
+    AriaLevel: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-level': value.toString() }),
+    AriaOwns: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-owns': value }),
+    AriaPlaceholder: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-placeholder': value }),
+    AriaPosinset: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-posinset': value.toString() }),
+    AriaReadonly: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-readonly': value.toString() }),
+    AriaRelevant: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-relevant': value }),
+    AriaRowcount: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowcount': value.toString() }),
+    AriaRowindex: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowindex': value.toString() }),
+    AriaRowspan: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-rowspan': value.toString() }),
+    AriaSetsize: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-setsize': value.toString() }),
+    AriaValuemax: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuemax': value.toString() }),
+    AriaValuemin: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuemin': value.toString() }),
+    AriaValuenow: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuenow': value.toString() }),
+    AriaValuetext: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'aria-valuetext': value }),
+    Attribute: ({ key, value }) => (ctx) => updateDataAttrs(ctx, { [key]: value }),
+    DataAttribute: ({ key, value }) => (ctx) => updateDataAttrs(ctx, { [`data-${key}`]: value }),
+    Style: ({ value }) => (ctx) => setData(ctx, 'style', value),
+    InnerHTML: ({ value }) => (ctx) => updateDataProps(ctx, { innerHTML: value }),
+    ViewBox: ({ value }) => (ctx) => updateDataAttrs(ctx, { viewBox: value }),
+    Xmlns: ({ value }) => (ctx) => updateDataAttrs(ctx, { xmlns: value }),
+    Fill: ({ value }) => (ctx) => updateDataAttrs(ctx, { fill: value }),
+    FillRule: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'fill-rule': value }),
+    ClipRule: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'clip-rule': value }),
+    Stroke: ({ value }) => (ctx) => updateDataAttrs(ctx, { stroke: value }),
+    StrokeWidth: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-width': value }),
+    StrokeLinecap: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-linecap': value }),
+    StrokeLinejoin: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-linejoin': value }),
+    D: ({ value }) => (ctx) => updateDataAttrs(ctx, { d: value }),
+    Cx: ({ value }) => (ctx) => updateDataAttrs(ctx, { cx: value }),
+    Cy: ({ value }) => (ctx) => updateDataAttrs(ctx, { cy: value }),
+    R: ({ value }) => (ctx) => updateDataAttrs(ctx, { r: value }),
+    X: ({ value }) => (ctx) => updateDataAttrs(ctx, { x: value }),
+    Y: ({ value }) => (ctx) => updateDataAttrs(ctx, { y: value }),
+    Width: ({ value }) => (ctx) => updateDataAttrs(ctx, { width: value }),
+    Height: ({ value }) => (ctx) => updateDataAttrs(ctx, { height: value }),
+    X1: ({ value }) => (ctx) => updateDataAttrs(ctx, { x1: value }),
+    Y1: ({ value }) => (ctx) => updateDataAttrs(ctx, { y1: value }),
+    X2: ({ value }) => (ctx) => updateDataAttrs(ctx, { x2: value }),
+    Y2: ({ value }) => (ctx) => updateDataAttrs(ctx, { y2: value }),
+    Points: ({ value }) => (ctx) => updateDataAttrs(ctx, { points: value }),
+    Transform: ({ value }) => (ctx) => updateDataAttrs(ctx, { transform: value }),
+    Opacity: ({ value }) => (ctx) => updateDataAttrs(ctx, { opacity: value }),
+    StrokeDasharray: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-dasharray': value }),
+    StrokeDashoffset: ({ value }) => (ctx) => updateDataAttrs(ctx, { 'stroke-dashoffset': value }),
+    Prop: ({ key, value }) => (ctx) => updateDataProps(ctx, { [key]: value }),
+    OnCustomEvent: ({ name, f }) => (ctx) => updateDataOn(ctx, {
+        [name]: (event) => {
+            if (event instanceof CustomEvent) {
+                ctx.dispatch(f(event));
+            }
+        },
+    }),
+    OnMount: ({ action }) => (ctx) => {
+        const capturedContext = ctx.getCapturedContext();
+        const maybeTracker = Context.getOption(capturedContext, MountTracker);
+        const notifyStarted = Option.isSome(maybeTracker)
+            ? () => maybeTracker.value.started(action.name, action.args)
+            : Function.constVoid;
+        const notifyEnded = Option.isSome(maybeTracker)
+            ? () => maybeTracker.value.ended(action.name, action.args)
+            : Function.constVoid;
+        const marker = action.args === undefined
+            ? { name: action.name }
+            : { name: action.name, args: action.args };
+        ctx.data[FOLDKIT_MOUNT_KEY] = marker;
+        ctx.data.hook = {
+            ...ctx.data.hook,
+            insert: vnode => {
+                if (vnode.elm instanceof Element) {
+                    const element = vnode.elm;
+                    notifyStarted();
+                    const fiber = Effect.runForkWith(capturedContext)(Stream.runForEach(action.f(element), message => Effect.sync(() => ctx.dispatch(message))).pipe(Effect.catchCause(cause => Effect.sync(() => {
+                        console.error(`[OnMount ${action.name}] unhandled failure`, cause);
+                    }))));
+                    onMountStates.set(element, { fiber });
                 }
-                dispatchSync(message);
             },
-        }),
-        OnDropFiles: ({ f }) => updateDataOn({
-            drop: tagAsFileHandler((event) => {
-                event.preventDefault();
-                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                const dragEvent = event;
-                const zone = dragEvent.currentTarget;
-                if (zone instanceof Element) {
-                    clearDragZoneAfterDrop(zone);
-                }
-                const files = dragEvent.dataTransfer?.files
-                    ? Array.fromIterable(dragEvent.dataTransfer.files)
-                    : Array.empty();
-                dispatchSync(f(files));
-            }, 'OnDropFiles'),
-        }),
-        OnTouchStart: ({ message }) => updateDataOn({
-            touchstart: () => dispatchSync(message),
-        }),
-        OnTouchEnd: ({ message }) => updateDataOn({
-            touchend: () => dispatchSync(message),
-        }),
-        OnTouchMove: ({ message }) => updateDataOn({
-            touchmove: () => dispatchSync(message),
-        }),
-        OnTouchCancel: ({ message }) => updateDataOn({
-            touchcancel: () => dispatchSync(message),
-        }),
-        OnAnimationStart: ({ message }) => updateDataOn({
-            animationstart: () => dispatchSync(message),
-        }),
-        OnAnimationEnd: ({ message }) => updateDataOn({
-            animationend: () => dispatchSync(message),
-        }),
-        OnAnimationIteration: ({ message }) => updateDataOn({
-            animationiteration: () => dispatchSync(message),
-        }),
-        OnTransitionEnd: ({ message }) => updateDataOn({
-            transitionend: () => dispatchSync(message),
-        }),
-        OnLoad: ({ message }) => updateDataOn({
-            load: () => dispatchSync(message),
-        }),
-        OnError: ({ message }) => updateDataOn({
-            error: () => dispatchSync(message),
-        }),
-        OnPlay: ({ message }) => updateDataOn({
-            play: () => dispatchSync(message),
-        }),
-        OnPause: ({ message }) => updateDataOn({
-            pause: () => dispatchSync(message),
-        }),
-        OnEnded: ({ message }) => updateDataOn({
-            ended: () => dispatchSync(message),
-        }),
-        OnTimeUpdate: ({ message }) => updateDataOn({
-            timeupdate: () => dispatchSync(message),
-        }),
-        OnVolumeChange: ({ message }) => updateDataOn({
-            volumechange: () => dispatchSync(message),
-        }),
-        OnSelect: ({ message }) => updateDataOn({
-            select: () => dispatchSync(message),
-        }),
-        Value: ({ value }) => updatePropsWithPostpatch('value', value),
-        Checked: ({ value }) => updatePropsWithPostpatch('checked', value),
-        Selected: ({ value }) => updatePropsWithPostpatch('selected', value),
-        Open: ({ value }) => updatePropsWithPostpatch('open', value),
-        Placeholder: ({ value }) => updateDataProps({ placeholder: value }),
-        Name: ({ value }) => updateDataProps({ name: value }),
-        Disabled: ({ value }) => updateDataProps({ disabled: value }),
-        Readonly: ({ value }) => updateDataProps({ readOnly: value }),
-        Required: ({ value }) => updateDataProps({ required: value }),
-        Autofocus: ({ value }) => updateDataProps({ autofocus: value }),
-        Spellcheck: ({ value }) => updateDataAttrs({ spellcheck: value.toString() }),
-        Autocorrect: ({ value }) => updateDataAttrs({ autocorrect: value }),
-        Autocapitalize: ({ value }) => updateDataAttrs({ autocapitalize: value }),
-        InputMode: ({ value }) => updateDataAttrs({ inputmode: value }),
-        EnterKeyHint: ({ value }) => updateDataAttrs({ enterkeyhint: value }),
-        Multiple: ({ value }) => updateDataProps({ multiple: value }),
-        Type: ({ value }) => updateDataProps({ type: value }),
-        Accept: ({ value }) => updateDataProps({ accept: value }),
-        Autocomplete: ({ value }) => updateDataProps({ autocomplete: value }),
-        Pattern: ({ value }) => updateDataProps({ pattern: value }),
-        Maxlength: ({ value }) => updateDataProps({ maxLength: value }),
-        Minlength: ({ value }) => updateDataProps({ minLength: value }),
-        Size: ({ value }) => updateDataProps({ size: value }),
-        Cols: ({ value }) => updateDataProps({ cols: value }),
-        Rows: ({ value }) => updateDataProps({ rows: value }),
-        Max: ({ value }) => updateDataProps({ max: value }),
-        Min: ({ value }) => updateDataProps({ min: value }),
-        Step: ({ value }) => updateDataProps({ step: value }),
-        For: ({ value }) => updateDataProps({ htmlFor: value }),
-        Href: ({ value }) => updateDataProps({ href: value }),
-        Src: ({ value }) => updateDataProps({ src: value }),
-        Alt: ({ value }) => updateDataProps({ alt: value }),
-        Target: ({ value }) => updateDataProps({ target: value }),
-        Rel: ({ value }) => updateDataProps({ rel: value }),
-        Download: ({ value }) => updateDataProps({ download: value }),
-        Action: ({ value }) => updateDataProps({ action: value }),
-        Method: ({ value }) => updateDataProps({ method: value }),
-        Enctype: ({ value }) => updateDataProps({ enctype: value }),
-        Novalidate: ({ value }) => updateDataProps({ noValidate: value }),
-        Formaction: ({ value }) => updateDataProps({ formAction: value }),
-        Formmethod: ({ value }) => updateDataProps({ formMethod: value }),
-        Formnovalidate: ({ value }) => updateDataProps({ formNoValidate: value }),
-        Formtarget: ({ value }) => updateDataProps({ formTarget: value }),
-        Formenctype: ({ value }) => updateDataProps({ formEnctype: value }),
-        Colspan: ({ value }) => updateDataProps({ colSpan: value }),
-        Rowspan: ({ value }) => updateDataProps({ rowSpan: value }),
-        Scope: ({ value }) => updateDataAttrs({ scope: value }),
-        Headers: ({ value }) => updateDataAttrs({ headers: value }),
-        Span: ({ value }) => updateDataProps({ span: value }),
-        Start: ({ value }) => updateDataProps({ start: value }),
-        Reversed: ({ value }) => updateDataProps({ reversed: value }),
-        CiteAttr: ({ value }) => updateDataProps({ cite: value }),
-        Datetime: ({ value }) => updateDataProps({ dateTime: value }),
-        Wrap: ({ value }) => updateDataProps({ wrap: value }),
-        List: ({ value }) => updateDataAttrs({ list: value }),
-        FormAttr: ({ value }) => updateDataAttrs({ form: value }),
-        LabelAttr: ({ value }) => updateDataProps({ label: value }),
-        ContentAttr: ({ value }) => updateDataAttrs({ content: value }),
-        Charset: ({ value }) => updateDataAttrs({ charset: value }),
-        HttpEquiv: ({ value }) => updateDataAttrs({ 'http-equiv': value }),
-        Srcset: ({ value }) => updateDataAttrs({ srcset: value }),
-        Sizes: ({ value }) => updateDataAttrs({ sizes: value }),
-        Loading: ({ value }) => updateDataAttrs({ loading: value }),
-        Decoding: ({ value }) => updateDataAttrs({ decoding: value }),
-        Fetchpriority: ({ value }) => updateDataAttrs({ fetchpriority: value }),
-        Crossorigin: ({ value }) => updateDataAttrs({ crossorigin: value }),
-        Referrerpolicy: ({ value }) => updateDataAttrs({ referrerpolicy: value }),
-        Integrity: ({ value }) => updateDataAttrs({ integrity: value }),
-        Hreflang: ({ value }) => updateDataAttrs({ hreflang: value }),
-        Ping: ({ value }) => updateDataAttrs({ ping: value }),
-        Sandbox: ({ value }) => updateDataAttrs({ sandbox: value }),
-        Allow: ({ value }) => updateDataAttrs({ allow: value }),
-        Srcdoc: ({ value }) => updateDataAttrs({ srcdoc: value }),
-        Autoplay: ({ value }) => updateDataProps({ autoplay: value }),
-        Controls: ({ value }) => updateDataProps({ controls: value }),
-        Loop: ({ value }) => updateDataProps({ loop: value }),
-        Muted: ({ value }) => updatePropsWithPostpatch('muted', value),
-        Poster: ({ value }) => updateDataProps({ poster: value }),
-        Preload: ({ value }) => updateDataProps({ preload: value }),
-        Playsinline: ({ value }) => updateDataProps({ playsInline: value }),
-        High: ({ value }) => updateDataProps({ high: value }),
-        Low: ({ value }) => updateDataProps({ low: value }),
-        Optimum: ({ value }) => updateDataProps({ optimum: value }),
-        Usemap: ({ value }) => updateDataAttrs({ usemap: value }),
-        Ismap: ({ value }) => updateDataProps({ isMap: value }),
-        Role: ({ value }) => updateDataAttrs({ role: value }),
-        AriaLabel: ({ value }) => updateDataAttrs({ 'aria-label': value }),
-        AriaLabelledBy: ({ value }) => updateDataAttrs({ 'aria-labelledby': value }),
-        AriaDescribedBy: ({ value }) => updateDataAttrs({ 'aria-describedby': value }),
-        AriaHidden: ({ value }) => updateDataAttrs({ 'aria-hidden': value.toString() }),
-        AriaExpanded: ({ value }) => updateDataAttrs({ 'aria-expanded': value.toString() }),
-        AriaSelected: ({ value }) => updateDataAttrs({ 'aria-selected': value.toString() }),
-        AriaChecked: ({ value }) => updateDataAttrs({ 'aria-checked': value.toString() }),
-        AriaDisabled: ({ value }) => updateDataAttrs({ 'aria-disabled': value.toString() }),
-        AriaRequired: ({ value }) => updateDataAttrs({ 'aria-required': value.toString() }),
-        AriaInvalid: ({ value }) => updateDataAttrs({ 'aria-invalid': value.toString() }),
-        AriaLive: ({ value }) => updateDataAttrs({ 'aria-live': value }),
-        AriaControls: ({ value }) => updateDataAttrs({ 'aria-controls': value }),
-        AriaCurrent: ({ value }) => updateDataAttrs({ 'aria-current': value }),
-        AriaOrientation: ({ value }) => updateDataAttrs({ 'aria-orientation': value }),
-        AriaPressed: ({ value }) => updateDataAttrs({ 'aria-pressed': value }),
-        AriaHasPopup: ({ value }) => updateDataAttrs({ 'aria-haspopup': value }),
-        AriaActiveDescendant: ({ value }) => updateDataAttrs({ 'aria-activedescendant': value }),
-        AriaSort: ({ value }) => updateDataAttrs({ 'aria-sort': value }),
-        AriaMultiSelectable: ({ value }) => updateDataAttrs({ 'aria-multiselectable': value.toString() }),
-        AriaModal: ({ value }) => updateDataAttrs({ 'aria-modal': value.toString() }),
-        AriaBusy: ({ value }) => updateDataAttrs({ 'aria-busy': value.toString() }),
-        AriaErrorMessage: ({ value }) => updateDataAttrs({ 'aria-errormessage': value }),
-        AriaRoleDescription: ({ value }) => updateDataAttrs({ 'aria-roledescription': value }),
-        AriaAtomic: ({ value }) => updateDataAttrs({ 'aria-atomic': value.toString() }),
-        AriaAutocomplete: ({ value }) => updateDataAttrs({ 'aria-autocomplete': value }),
-        AriaColcount: ({ value }) => updateDataAttrs({ 'aria-colcount': value.toString() }),
-        AriaColindex: ({ value }) => updateDataAttrs({ 'aria-colindex': value.toString() }),
-        AriaColspan: ({ value }) => updateDataAttrs({ 'aria-colspan': value.toString() }),
-        AriaDescription: ({ value }) => updateDataAttrs({ 'aria-description': value }),
-        AriaDetails: ({ value }) => updateDataAttrs({ 'aria-details': value }),
-        AriaFlowto: ({ value }) => updateDataAttrs({ 'aria-flowto': value }),
-        AriaKeyshortcuts: ({ value }) => updateDataAttrs({ 'aria-keyshortcuts': value }),
-        AriaLevel: ({ value }) => updateDataAttrs({ 'aria-level': value.toString() }),
-        AriaOwns: ({ value }) => updateDataAttrs({ 'aria-owns': value }),
-        AriaPlaceholder: ({ value }) => updateDataAttrs({ 'aria-placeholder': value }),
-        AriaPosinset: ({ value }) => updateDataAttrs({ 'aria-posinset': value.toString() }),
-        AriaReadonly: ({ value }) => updateDataAttrs({ 'aria-readonly': value.toString() }),
-        AriaRelevant: ({ value }) => updateDataAttrs({ 'aria-relevant': value }),
-        AriaRowcount: ({ value }) => updateDataAttrs({ 'aria-rowcount': value.toString() }),
-        AriaRowindex: ({ value }) => updateDataAttrs({ 'aria-rowindex': value.toString() }),
-        AriaRowspan: ({ value }) => updateDataAttrs({ 'aria-rowspan': value.toString() }),
-        AriaSetsize: ({ value }) => updateDataAttrs({ 'aria-setsize': value.toString() }),
-        AriaValuemax: ({ value }) => updateDataAttrs({ 'aria-valuemax': value.toString() }),
-        AriaValuemin: ({ value }) => updateDataAttrs({ 'aria-valuemin': value.toString() }),
-        AriaValuenow: ({ value }) => updateDataAttrs({ 'aria-valuenow': value.toString() }),
-        AriaValuetext: ({ value }) => updateDataAttrs({ 'aria-valuetext': value }),
-        Attribute: ({ key, value }) => updateDataAttrs({ [key]: value }),
-        DataAttribute: ({ key, value }) => updateDataAttrs({ [`data-${key}`]: value }),
-        Style: ({ value }) => setData('style', value),
-        InnerHTML: ({ value }) => updateDataProps({ innerHTML: value }),
-        ViewBox: ({ value }) => updateDataAttrs({ viewBox: value }),
-        Xmlns: ({ value }) => updateDataAttrs({ xmlns: value }),
-        Fill: ({ value }) => updateDataAttrs({ fill: value }),
-        FillRule: ({ value }) => updateDataAttrs({ 'fill-rule': value }),
-        ClipRule: ({ value }) => updateDataAttrs({ 'clip-rule': value }),
-        Stroke: ({ value }) => updateDataAttrs({ stroke: value }),
-        StrokeWidth: ({ value }) => updateDataAttrs({ 'stroke-width': value }),
-        StrokeLinecap: ({ value }) => updateDataAttrs({ 'stroke-linecap': value }),
-        StrokeLinejoin: ({ value }) => updateDataAttrs({ 'stroke-linejoin': value }),
-        D: ({ value }) => updateDataAttrs({ d: value }),
-        Cx: ({ value }) => updateDataAttrs({ cx: value }),
-        Cy: ({ value }) => updateDataAttrs({ cy: value }),
-        R: ({ value }) => updateDataAttrs({ r: value }),
-        X: ({ value }) => updateDataAttrs({ x: value }),
-        Y: ({ value }) => updateDataAttrs({ y: value }),
-        Width: ({ value }) => updateDataAttrs({ width: value }),
-        Height: ({ value }) => updateDataAttrs({ height: value }),
-        X1: ({ value }) => updateDataAttrs({ x1: value }),
-        Y1: ({ value }) => updateDataAttrs({ y1: value }),
-        X2: ({ value }) => updateDataAttrs({ x2: value }),
-        Y2: ({ value }) => updateDataAttrs({ y2: value }),
-        Points: ({ value }) => updateDataAttrs({ points: value }),
-        Transform: ({ value }) => updateDataAttrs({ transform: value }),
-        Opacity: ({ value }) => updateDataAttrs({ opacity: value }),
-        StrokeDasharray: ({ value }) => updateDataAttrs({ 'stroke-dasharray': value }),
-        StrokeDashoffset: ({ value }) => updateDataAttrs({ 'stroke-dashoffset': value }),
-        Prop: ({ key, value }) => updateDataProps({ [key]: value }),
-        OnCustomEvent: ({ name, f }) => updateDataOn({
-            [name]: (event) => {
-                if (event instanceof CustomEvent) {
-                    dispatchSync(f(event));
+            destroy: vnode => {
+                if (vnode.elm instanceof Element) {
+                    const state = onMountStates.get(vnode.elm);
+                    if (state) {
+                        Effect.runFork(Fiber.interrupt(state.fiber));
+                        onMountStates.delete(vnode.elm);
+                        notifyEnded();
+                    }
                 }
             },
-        }),
-        OnMount: ({ action }) => {
-            const maybeTracker = Context.getOption(capturedContext, MountTracker);
-            const notifyStarted = Option.isSome(maybeTracker)
-                ? () => maybeTracker.value.started(action.name, action.args)
-                : Function.constVoid;
-            const notifyEnded = Option.isSome(maybeTracker)
-                ? () => maybeTracker.value.ended(action.name, action.args)
-                : Function.constVoid;
-            const marker = action.args === undefined
-                ? { name: action.name }
-                : { name: action.name, args: action.args };
-            return Ref.update(dataRef, data => ({
-                ...data,
-                [FOLDKIT_MOUNT_KEY]: marker,
-                hook: {
-                    ...data.hook,
-                    insert: vnode => {
-                        if (vnode.elm instanceof Element) {
-                            const element = vnode.elm;
-                            notifyStarted();
-                            const fiber = Effect.runForkWith(capturedContext)(Stream.runForEach(action.f(element), message => Effect.sync(() => dispatchSync(message))).pipe(Effect.catchCause(cause => Effect.sync(() => {
-                                console.error(`[OnMount ${action.name}] unhandled failure`, cause);
-                            }))));
-                            onMountStates.set(element, { fiber });
-                        }
-                    },
-                    destroy: vnode => {
-                        if (vnode.elm instanceof Element) {
-                            const state = onMountStates.get(vnode.elm);
-                            if (state) {
-                                Effect.runFork(Fiber.interrupt(state.fiber));
-                                onMountStates.delete(vnode.elm);
-                                notifyEnded();
-                            }
-                        }
-                    },
-                },
-            }));
-        },
-    })));
-    const postpatchProps = yield* Ref.get(postpatchPropsRef);
+        };
+    },
+}));
+const buildVNodeData = (attributes) => {
+    // Capture lazily, and tolerate the absence of a runtime frame. Static
+    // elements (`h.code([h.Class('x')], ['text'])`) and prose fragments built
+    // at module top level (`const fragment = inlineCode('foo')` at import
+    // time) must construct without an active render frame. They never invoke
+    // the fallback dispatcher because they have no event handlers; event-
+    // bearing Html constructed outside a render reaches the fallback only at
+    // event-fire time, which surfaces a clear error rather than failing at
+    // import time.
+    let cachedCurrentDispatch;
+    const getCurrentDispatch = () => {
+        if (cachedCurrentDispatch === undefined) {
+            try {
+                cachedCurrentDispatch = requireDispatch();
+            }
+            catch {
+                cachedCurrentDispatch = () => {
+                    throw new Error('Foldkit: an event-bearing Html attribute fired without an ' +
+                        'active runtime frame. This typically means an Html element ' +
+                        'with event handlers (OnClick, OnInput, etc.) was constructed ' +
+                        'at module top level outside of a view function.');
+                };
+            }
+        }
+        return cachedCurrentDispatch;
+    };
+    let cachedCapturedContext;
+    const getCapturedContext = () => {
+        if (cachedCapturedContext === undefined) {
+            try {
+                cachedCapturedContext = requireRuntimeContext();
+            }
+            catch {
+                cachedCapturedContext = Context.empty();
+            }
+        }
+        return cachedCapturedContext;
+    };
+    /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+    const data = {};
+    const postpatchProps = [];
+    // Most attributes route through the current frame's dispatch. ChildAttribute
+    // items carry a different dispatcher (captured by `childAttributes`
+    // in a Submodel's own boundary), so they need their own BuildContext closed
+    // over that dispatch. The matcher itself is module-level and shared.
+    // The main ctx is built lazily. Static-only attribute arrays (Class, Id,
+    // etc. with no event handlers) skip `requireDispatch` entirely so Html can
+    // be constructed at module top level.
+    let mainCtx;
+    const boundaryCtxByDispatch = new Map();
+    for (const item of attributes) {
+        if (isChildAttribute(item)) {
+            let ctx = boundaryCtxByDispatch.get(item.dispatch);
+            if (ctx === undefined) {
+                ctx = {
+                    data,
+                    postpatchProps,
+                    dispatch: item.dispatch,
+                    getCapturedContext,
+                };
+                boundaryCtxByDispatch.set(item.dispatch, ctx);
+            }
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            attributeMatcher(item.attribute)(ctx);
+        }
+        else {
+            if (mainCtx === undefined) {
+                mainCtx = {
+                    data,
+                    postpatchProps,
+                    dispatch: getCurrentDispatch(),
+                    getCapturedContext,
+                };
+            }
+            /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+            attributeMatcher(item)(mainCtx);
+        }
+    }
     if (Array.isReadonlyArrayNonEmpty(postpatchProps)) {
-        yield* Ref.update(dataRef, data => ({
-            ...data,
-            hook: {
-                ...data.hook,
-                postpatch: (_oldVnode, vnode) => {
-                    if (vnode.elm) {
-                        Array.forEach(postpatchProps, ({ propName, value }) => {
+        data.hook = {
+            ...data.hook,
+            postpatch: (_oldVnode, vnode) => {
+                if (vnode.elm) {
+                    Array.forEach(postpatchProps, ({ propName, value }) => {
+                        /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+                        if (vnode.elm[propName] !== value) {
                             /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                            if (vnode.elm[propName] !== value) {
-                                /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
-                                ;
-                                vnode.elm[propName] = value;
-                            }
-                        });
-                    }
-                },
+                            ;
+                            vnode.elm[propName] = value;
+                        }
+                    });
+                }
             },
-        }));
+        };
     }
-    return yield* Ref.get(dataRef);
-});
-const processVNodeChildren = (children) => Effect.forEach(children, (child) => Predicate.isString(child) ? Effect.succeed(child) : child).pipe(Effect.map(Array.filter(Predicate.isNotNull)));
-const createElement = (tagName, attributes = [], children = []) => Effect.gen(function* () {
-    const vnodeData = yield* buildVNodeData(attributes);
-    const vnodeChildren = yield* processVNodeChildren(children);
-    return h(tagName, vnodeData, Array.fromIterable(vnodeChildren));
-});
+    return data;
+};
+const processVNodeChildren = (children) => Array.filter(children, Predicate.isNotNull);
+const createElement = (tagName, attributes = [], children = []) => h(tagName, buildVNodeData(attributes), Array.fromIterable(processVNodeChildren(children)));
 const element = () => (tagName) => (attributes = [], children = []) => createElement(tagName, attributes, children);
 export const customElement = () => (tagName) => (attributes = [], children = []) => createElement(tagName, attributes, children);
 const voidElement = () => (tagName) => (attributes = []) => createElement(tagName, attributes, []);
@@ -1080,16 +1135,25 @@ const htmlAttributes = () => ({
     StrokeDashoffset: (value) => StrokeDashoffset({ value }),
     OnMount: (action) => OnMount({ action }),
 });
+const buildHtmlFactory = () => ({
+    ...htmlElements(),
+    ...htmlAttributes(),
+    empty: null,
+    keyed: keyed(),
+    submodel,
+});
+const cachedHtmlFactory = buildHtmlFactory();
 /**
- * Factory that returns all HTML, SVG, and MathML element constructors,
- * attribute constructors, a `keyed` helper for keyed elements, and `empty`
- * for rendering nothing.
+ * Returns all HTML, SVG, and MathML element constructors, attribute
+ * constructors, a `keyed` helper for keyed elements, and `empty` for
+ * rendering nothing.
+ *
+ * The returned object is a process-wide singleton. The `Message` type
+ * parameter is erased at runtime, and the element and attribute constructors
+ * carry no per-program state (dispatch is read from the runtime singleton at
+ * call time), so calling `html()` repeatedly from inside view functions does
+ * not allocate a fresh object.
  */
-export const html = () => {
-    return {
-        ...htmlElements(),
-        ...htmlAttributes(),
-        empty: Effect.succeed(null),
-        keyed: keyed(),
-    };
-};
+export const html = () => 
+/* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+cachedHtmlFactory;