effectweb 0.2.3 → 0.3.1

package/dist/dom.js

@@ -1,22 +1,53 @@
+import { compiledSlots } from './slotIdentity.js';
+import attributeData from './dom-attributes.json' with { type: 'json' };
+import { validateIdentities } from './collection.js';
 import { runAll, reportError, reportSafely } from './errors.js';
 import { eventEffects } from './effectEvent.js';
 import { traceBinding } from './diagnostics.js';
-import { shareValue } from './share.js';
+import { shareData } from './sharing.js';
+import { jsxComponent } from './jsx.js';
+import { Settlement } from './settlement.js';
 import { startMount } from './mount.js';
 const equal = (a, b) => a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
+// A model publication reconciles DOM first and controlled dependent properties second.
+// Nested child scopes join the same synchronous commit; there is no reactive graph.
+let commitDepth = 0;
+const controlCommits = new Set();
+function commitDom(work) {
+    commitDepth++;
+    try {
+        return work();
+    }
+    finally {
+        if (--commitDepth === 0) {
+            for (const apply of controlCommits) {
+                controlCommits.delete(apply);
+                apply();
+            }
+        }
+    }
+}
+function afterDom(apply) {
+    if (commitDepth)
+        controlCommits.add(apply);
+    else
+        apply();
+}
 /** Compiler implementation. No implicit tracking, proxies, or per-binding subscriptions. */
 export class Scope {
     value;
     send;
     report;
+    settlement;
     jobs = [];
     cleanups = [];
     disposed = false;
     revision = 0;
-    constructor(value, send, report = reportError) {
+    constructor(value, send, report = reportError, settlement = new Settlement()) {
         this.value = value;
         this.send = send;
         this.report = report;
+        this.settlement = settlement;
     }
     derive(dependencies, compute, source) {
         let previous;
@@ -27,7 +58,7 @@ export class Scope {
                 return value;
             const next = dependencies();
             if (!previous || !equal(previous, next)) {
-                value = previous ? shareValue(value, compute()) : compute();
+                value = previous ? shareData(value, compute()) : compute();
                 traceBinding(source, previous, next, 'derive');
                 previous = next;
             }
@@ -54,18 +85,20 @@ export class Scope {
     set(value) {
         if (this.disposed)
             return;
-        this.value = value;
-        this.revision++;
-        for (const job of this.jobs) {
-            if (this.disposed)
-                break;
-            try {
-                job();
-            }
-            catch (error) {
-                reportSafely(this.report, error);
+        commitDom(() => {
+            this.value = value;
+            this.revision++;
+            for (const job of this.jobs) {
+                if (this.disposed)
+                    break;
+                try {
+                    job();
+                }
+                catch (error) {
+                    reportSafely(this.report, error);
+                }
             }
-        }
+        });
     }
     dispose() {
         if (this.disposed)
@@ -75,6 +108,14 @@ export class Scope {
         runAll(this.cleanups.splice(0).reverse(), this.report);
     }
 }
+/** Compiler marker for mounting a view with an explicit model and message dispatcher. */
+export const ViewBinding = /* @__PURE__ */ Object.assign(function ViewBinding(_props) {
+    throw new Error('ViewBinding reached runtime without the EffectWeb JSX compiler');
+}, { [jsxComponent]: true });
+/** Untyped callers get an actionable failure instead of silently losing child messages. */
+export function unboundSend(_message) {
+    throw new Error('This view needs a dispatcher. Mount it through ViewBinding with model and send.');
+}
 const contentBrand = Symbol('compiled content');
 /** Compiler marker: declare inside view(), or directly in a compiled component prop. */
 export function slot(_render) {
@@ -108,10 +149,10 @@ export function compiledSlot(owner, build) {
         placements.clear();
     });
     const definition = {
-        mount(parent, before, value) {
+        mount(parent, before, value, report, settlement) {
             if (owner.disposed)
                 throw new Error('Cannot mount content after its declaring view disposed');
-            const scope = new Scope(value, owner.send, owner.report);
+            const scope = new Scope(value, owner.send, report, settlement);
             const fragment = buildFragment(parent);
             const range = markers(fragment, null);
             scope.cleanups.push(() => remove(range.start, range.end));
@@ -136,10 +177,12 @@ export function compiledSlot(owner, build) {
             };
         },
     };
-    return Object.assign((value) => new SlotPlacement(definition, value), {
+    const slot = Object.assign((value) => new SlotPlacement(definition, value), {
         [contentBrand]: true,
         definition,
     });
+    compiledSlots.add(slot);
+    return slot;
 }
 /** This declaration is a compiler marker, never a component setup callback. */
 export function view(_render) {
@@ -148,8 +191,14 @@ export function view(_render) {
 export function compiled(build) {
     return Object.assign(() => {
         throw new Error('Mount compiled views with mountView or inside another compiled view');
-    }, { build });
+    }, { build, [jsxComponent]: true });
 }
+/** Owned content in an element target, defaulting to the document body. */
+export const Portal = /* @__PURE__ */ compiled((scope) => {
+    portal(scope, (child, parent, before) => {
+        text(child, parent, before, () => [child.value.children], () => child.value.children);
+    }, () => scope.value.mount);
+});
 function markers(parent, before) {
     const start = document.createComment('');
     const end = document.createComment('');
@@ -210,25 +259,34 @@ function buildFragment(parent) {
     return fragment;
 }
 export function mountView(parent, definition, source, options = {}) {
-    const { start, end } = markers(parent, null);
-    const scope = new Scope(source.model(), source.send, options.onError);
-    let unsubscribe = () => { };
-    try {
-        const fragment = buildFragment(parent);
-        definition.build(scope, fragment, null);
-        parent.insertBefore(fragment, end);
-        unsubscribe = source.subscribe((model) => scope.set(model));
-    }
-    catch (error) {
-        scope.dispose();
-        remove(start, end);
-        throw error;
-    }
-    return () => {
-        if (scope.disposed)
-            return;
-        runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
-    };
+    return commitDom(() => {
+        const { start, end } = markers(parent, null);
+        const scope = new Scope(source.model(), source.send, options.onError);
+        let unsubscribe = () => { };
+        try {
+            const fragment = buildFragment(parent);
+            definition.build(scope, fragment, null);
+            parent.insertBefore(fragment, end);
+            unsubscribe = source.subscribe((model) => scope.set(model));
+        }
+        catch (error) {
+            scope.dispose();
+            remove(start, end);
+            throw error;
+        }
+        const dispose = () => {
+            if (scope.disposed)
+                return;
+            runAll([unsubscribe, () => scope.dispose(), () => remove(start, end)], scope.report);
+        };
+        return Object.assign(dispose, {
+            dispose,
+            close: () => {
+                dispose();
+                return scope.settlement.wait();
+            },
+        });
+    });
 }
 export function element(parent, before, tag) {
     const doc = parent.ownerDocument ?? document;
@@ -239,6 +297,7 @@ export function element(parent, before, tag) {
     return node;
 }
 const classTokens = new WeakMap();
+let booleanAttributes;
 const styleProperties = new WeakMap();
 function scalar(value) {
     if (value == null)
@@ -251,7 +310,11 @@ function scalar(value) {
     throw new Error('DOM values must be scalar. Render objects as compiled child views or domain collections.');
 }
 export function attribute(element, name, value) {
-    const key = name === 'className' ? 'class' : name === 'tabIndex' ? 'tabindex' : name;
+    const aliases = attributeData.aliases;
+    const key = aliases[name] ?? name;
+    const booleanValues = attributeData.booleanValues;
+    if (typeof value === 'boolean')
+        value = booleanValues[key]?.[String(value)] ?? value;
     if (name === 'classList') {
         const tokens = (value ?? {});
         const next = new Set();
@@ -287,31 +350,19 @@ export function attribute(element, name, value) {
         if (element.value !== next)
             element.value = next;
     }
-    else if ([
-        'checked',
-        'selected',
-        'disabled',
-        'multiple',
-        'hidden',
-        'autofocus',
-        'controls',
-        'autoplay',
-        'loop',
-        'muted',
-        'playsinline',
-        'readonly',
-        'required',
-        'open',
-        'inert',
-        'download',
-    ].includes(name) &&
-        typeof value === 'boolean') {
-        element.toggleAttribute(name, Boolean(value));
-        if (name in element)
-            Reflect.set(element, name, Boolean(value));
+    else if ((typeof value === 'boolean' || value == null) &&
+        (booleanAttributes ??= new Set(attributeData.boolean)).has(key)) {
+        element.toggleAttribute(key, Boolean(value));
+        const properties = attributeData.properties;
+        const property = properties[key] ?? key;
+        if (typeof Reflect.get(element, property) === 'boolean')
+            Reflect.set(element, property, Boolean(value));
     }
     else if (value == null ||
-        (value === false && !name.startsWith('aria-') && !name.startsWith('data-'))) {
+        (value === false &&
+            !attributeData.booleanish.includes(key) &&
+            !name.startsWith('aria-') &&
+            !name.startsWith('data-'))) {
         element.removeAttribute(key);
     }
     else {
@@ -322,8 +373,12 @@ export function attribute(element, name, value) {
     if (key === 'class')
         for (const token of classTokens.get(element) ?? [])
             element.classList.add(token);
-    if (name === 'style' && (value == null || typeof value !== 'object'))
-        styleProperties.delete(element);
+    if (name === 'style' && (value == null || typeof value !== 'object')) {
+        if (value == null)
+            styleProperties.delete(element);
+        else if ('style' in element)
+            styleProperties.set(element, new Set(Array.from(element.style)));
+    }
 }
 /** Compiler output for attributes whose unchanged value needs no DOM refresh. */
 export function bindAttribute(scope, element, name, dependencies, read, source) {
@@ -348,13 +403,124 @@ export function bindAttribute(scope, element, name, dependencies, read, source)
         previous = next;
     });
 }
+const controlRestorations = new WeakMap();
+/** Handled edits can change a control even when dispatch publishes no new model. */
+export function bindControl(scope, element, name, dependencies, read, source) {
+    let composing = false;
+    let deferred = false;
+    let pending;
+    const select = element.tagName === 'SELECT' && name === 'value';
+    const write = () => {
+        if (scope.disposed)
+            return;
+        try {
+            if (composing)
+                deferred = true;
+            else
+                attribute(element, name, read());
+        }
+        catch (error) {
+            reportSafely(scope.report, error);
+        }
+    };
+    const apply = () => {
+        if (select)
+            afterDom(write);
+        else
+            write();
+    };
+    let initialized = false;
+    let published;
+    scope.watch(dependencies, () => {
+        const next = read();
+        // A coarse dependency can change while this field's published value stays equal.
+        // Preserve unfinished blur drafts; handled edits still restore through apply below.
+        if (!initialized || !Object.is(published, next)) {
+            initialized = true;
+            published = next;
+            apply();
+        }
+    }, source);
+    if (select) {
+        // The selected value may stay equal while its options change on this publication.
+        scope.jobs.push(apply);
+        // Options may also belong to a separately updating component or a DOM host.
+        // Observe only option-affecting mutations; setting selectedness does not mutate attributes.
+        const observer = new MutationObserver(apply);
+        observer.observe(element, {
+            childList: true,
+            subtree: true,
+            characterData: true,
+            attributes: true,
+            attributeFilter: ['value', 'selected', 'disabled'],
+        });
+        scope.cleanups.push(() => {
+            observer.disconnect();
+            controlCommits.delete(write);
+        });
+    }
+    const restore = () => {
+        if (composing) {
+            deferred = true;
+            return;
+        }
+        if (pending !== undefined || scope.disposed)
+            return;
+        // Native dispatch may run microtasks between listeners. A task waits for all
+        // handlers (including ancestors) before restoring the latest model value.
+        pending = setTimeout(() => {
+            pending = undefined;
+            if (!scope.disposed) {
+                try {
+                    apply();
+                }
+                catch (error) {
+                    reportSafely(scope.report, error);
+                }
+            }
+        }, 0);
+    };
+    const start = () => {
+        composing = true;
+    };
+    const end = () => {
+        composing = false;
+        if (deferred) {
+            deferred = false;
+            restore();
+        }
+    };
+    const handled = (type) => {
+        // Clicking a text control must not commit its unfinished blur draft.
+        if (type !== 'click' || name === 'checked')
+            restore();
+    };
+    let restorations = controlRestorations.get(element);
+    if (!restorations)
+        controlRestorations.set(element, (restorations = new Set()));
+    restorations.add(handled);
+    element.addEventListener('compositionstart', start);
+    element.addEventListener('compositionend', end);
+    scope.cleanups.push(() => {
+        clearTimeout(pending);
+        restorations.delete(handled);
+        if (!restorations.size)
+            controlRestorations.delete(element);
+        element.removeEventListener('compositionstart', start);
+        element.removeEventListener('compositionend', end);
+    });
+}
 export function text(scope, parent, before, dependencies, read, source) {
     const node = document.createTextNode('');
     parent.insertBefore(node, before);
     let start;
     let content;
     scope.watch(dependencies, () => {
-        const value = read();
+        let value = read();
+        if (Array.isArray(value)) {
+            validateContent(value);
+            value = { [contentBrand]: true, definition: arrayContent, value };
+        }
         if (isContent(value)) {
             node.data = '';
             if (content?.definition === value.definition) {
@@ -372,38 +538,112 @@ export function text(scope, parent, before, dependencies, read, source) {
             }
             content = {
                 definition: value.definition,
-                mounted: value.definition.mount(node.parentNode, node, value.value),
+                mounted: value.definition.mount(node.parentNode, node, value.value, scope.report, scope.settlement),
             };
             return;
         }
+        if (value != null && typeof value === 'object')
+            throw new Error('Unsupported JSX content. Use compiled views or slots for markup, collections for entities, and an owned DOM host for native nodes.');
+        const next = value == null || typeof value === 'boolean' ? '' : scalar(value);
         if (content) {
             content.mounted.dispose();
             content = undefined;
             clear(start, node);
         }
-        if (value != null && typeof value === 'object')
-            throw new Error('Object rendered as text. Use collection(...).from(items).map(...) for entity lists.');
-        const next = value == null || typeof value === 'boolean' ? '' : scalar(value);
         if (node.data !== next)
             node.data = next;
     }, source);
 }
+function validateContent(value, active = new Set()) {
+    if (Array.isArray(value)) {
+        if (active.has(value))
+            throw new TypeError('JSX content arrays cannot contain cycles.');
+        active.add(value);
+        for (const child of value)
+            validateContent(child, active);
+        active.delete(value);
+    }
+    else if (!isContent(value) &&
+        value != null &&
+        !['string', 'number', 'boolean'].includes(typeof value)) {
+        throw new TypeError('Unsupported JSX content. Use an owned DOM host for native nodes and compiled views for objects.');
+    }
+}
+const arrayContent = {
+    mount: (_parent, before, value, report, settlement) => mountArray(report, before, value, settlement),
+};
+/** Runtime content arrays are positional; domain lists retain the explicit collection contract. */
+function mountArray(report, before, initial, settlement) {
+    const cells = [];
+    const disposeCell = (cell) => {
+        cell.scope.dispose();
+        remove(cell.start, cell.end);
+    };
+    const set = (input) => {
+        const values = input;
+        validateContent(values);
+        while (cells.length > values.length)
+            disposeCell(cells.pop());
+        for (let index = 0; index < values.length; index++) {
+            const cell = cells[index];
+            if (cell) {
+                if (!Object.is(cell.scope.value, values[index]))
+                    cell.scope.set(values[index]);
+                continue;
+            }
+            const scope = new Scope(values[index], unboundSend, report, settlement);
+            const fragment = buildFragment(before.parentNode);
+            const range = markers(fragment, null);
+            try {
+                text(scope, fragment, range.end, () => [scope.value], () => scope.value);
+                before.parentNode.insertBefore(fragment, before);
+                cells.push({ scope, ...range });
+            }
+            catch (error) {
+                scope.dispose();
+                throw error;
+            }
+        }
+    };
+    const dispose = () => {
+        for (const cell of cells.splice(0))
+            disposeCell(cell);
+    };
+    try {
+        set(initial);
+    }
+    catch (error) {
+        dispose();
+        throw error;
+    }
+    return { set, dispose };
+}
 export function event(scope, element, name, handler) {
     let effects;
-    const capture = name.endsWith('Capture');
-    const type = name.slice(2, capture ? -7 : undefined).toLowerCase();
+    const capture = name.endsWith('Capture') && name !== 'onGotPointerCapture' && name !== 'onLostPointerCapture';
+    const nativeName = name.slice(2, capture ? -7 : undefined);
+    const type = nativeName === 'Begin' || nativeName === 'End' || nativeName === 'Repeat'
+        ? `${nativeName.toLowerCase()}Event`
+        : nativeName.toLowerCase();
     const listener = (event) => {
         if (!scope.disposed) {
             try {
                 const result = handler(event);
                 if (result !== null && typeof result === 'object' && !scope.disposed) {
-                    effects ??= eventEffects(scope.report);
+                    effects ??= eventEffects(scope.report, scope.settlement);
                     effects.accept(result);
                 }
             }
             catch (error) {
                 reportSafely(scope.report, error);
             }
+            finally {
+                // Restore only after an application handler commits or rejects an edit.
+                // The target also covers handlers delegated to an ancestor.
+                if (event.target && ['input', 'change', 'blur', 'focusout', 'click'].includes(type))
+                    for (const restore of controlRestorations.get(event.target) ?? [])
+                        restore(type);
+            }
         }
     };
     element.addEventListener(type, listener, capture);
@@ -412,6 +652,84 @@ export function event(scope, element, name, handler) {
         effects?.dispose();
     });
 }
+/** One handler identity owns its requests, regardless of the JSX attribute spelling. */
+export function bindEvent(scope, element, name, dependencies, read) {
+    let current;
+    let owned;
+    scope.cleanups.push(() => owned?.dispose());
+    scope.watch(dependencies, () => {
+        const next = read();
+        if (next != null && typeof next !== 'function')
+            throw new TypeError(`Event ${name} must be a synchronous handler.`);
+        if (Object.is(current, next))
+            return;
+        owned?.dispose();
+        owned = undefined;
+        current = next;
+        if (typeof next === 'function') {
+            const handler = next;
+            owned = new Scope(next, scope.send, scope.report, scope.settlement);
+            event(owned, element, name, handler);
+        }
+    });
+}
+/** Reconcile merged JSX attributes. Each host, event and control owns its cleanup. */
+export function bindAttributes(scope, element, dependencies, read) {
+    const bindings = new Map();
+    let previous = {};
+    const isEvent = (name) => /^on[A-Z]/u.test(name);
+    const isControl = (name) => (name === 'value' && ['INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName)) ||
+        (name === 'checked' && element.tagName === 'INPUT');
+    scope.cleanups.push(() => {
+        runAll([...bindings.values()].reverse().map((binding) => () => binding.dispose()), scope.report);
+        bindings.clear();
+    });
+    scope.watch(dependencies, () => {
+        const next = read();
+        for (const name of Object.keys(next)) {
+            if (['key', 'ref', 'innerHTML', 'children'].includes(name))
+                throw new Error(`Spread attribute ${name} is unsupported. Use collections, DOM hosts, or JSX children.`);
+            if (isEvent(name) && next[name] != null && typeof next[name] !== 'function')
+                throw new Error(`Spread event ${name} must be a synchronous handler.`);
+        }
+        for (const name of Object.keys(previous)) {
+            if (Object.hasOwn(next, name))
+                continue;
+            bindings.get(name)?.dispose();
+            bindings.delete(name);
+            if (name !== 'use' && !isEvent(name))
+                attribute(element, name, undefined);
+        }
+        for (const [name, value] of Object.entries(next)) {
+            if (name !== 'use' && !isEvent(name) && !isControl(name)) {
+                attribute(element, name, value);
+                continue;
+            }
+            let binding = bindings.get(name);
+            if (binding && Object.is(binding.value, value))
+                continue;
+            if (binding) {
+                binding.set(value);
+                continue;
+            }
+            const owned = new Scope(value, scope.send, scope.report, scope.settlement);
+            bindings.set(name, owned);
+            if (name === 'use')
+                attach(owned, element, () => [owned.value], () => owned.value);
+            else if (isControl(name))
+                bindControl(owned, element, name, () => [owned.value], () => owned.value);
+            else
+                bindEvent(owned, element, name, () => [owned.value], () => owned.value);
+        }
+        previous = next;
+    });
+    if (element.tagName === 'SELECT')
+        scope.jobs.push(() => {
+            const binding = bindings.get('value');
+            if (binding)
+                binding.set(binding.value);
+        });
+}
 export function branch(scope, parent, before, choose, yes, no) {
     const { start, end } = markers(parent, before);
     let child;
@@ -421,7 +739,7 @@ export function branch(scope, parent, before, choose, yes, no) {
         if (active !== next) {
             child?.dispose();
             clear(start, end);
-            child = new Scope(scope.value, scope.send, scope.report);
+            child = new Scope(scope.value, scope.send, scope.report, scope.settlement);
             const fragment = buildFragment(end.parentNode);
             try {
                 (next ? yes : no)(child, fragment, null);
@@ -478,15 +796,13 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
             previousIdentities = [];
             return;
         }
-        const identities = items.map((item, index) => {
+        const identities = validateIdentities(items, (item, index) => {
             const key = collection ? collection.identity(item, index) : item;
             if (typeof key !== 'string' && typeof key !== 'number')
                 throw new Error('Object lists need domain identity. Declare collection(identity) once; do not add JSX keys.');
             return key;
         });
         const keep = new Set(identities);
-        if (keep.size !== identities.length)
-            throw new Error('Duplicate collection identity. Identity must be unique within the rendered collection.');
         for (const [key, row] of rows) {
             if (keep.has(key))
                 continue;
@@ -497,11 +813,11 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
         for (let index = 0; index < items.length; index++) {
             const key = identities[index];
             const row = rows.get(key);
-            const item = row ? shareValue(row.scope.value[0], items[index]) : items[index];
+            const item = row ? shareData(row.scope.value[0], items[index]) : items[index];
             if (!row) {
                 const fragment = buildFragment(target);
                 const range = markers(fragment, null);
-                const child = new Scope([item, index], scope.send, scope.report);
+                const child = new Scope([item, index], scope.send, scope.report, scope.settlement);
                 try {
                     build(child, fragment, range.end);
                 }
@@ -577,7 +893,7 @@ export function each(scope, parent, before, read, outer, indexUsed, build) {
     update();
 }
 export function invoke(scope, parent, before, dependencies, read, build) {
-    const child = new Scope(read(), scope.send, scope.report);
+    const child = new Scope(read(), scope.send, scope.report, scope.settlement);
     scope.cleanups.push(() => child.dispose());
     build(child, parent, before);
     scope.watch(dependencies, () => {
@@ -587,7 +903,7 @@ export function invoke(scope, parent, before, dependencies, read, build) {
     });
 }
 export function child(scope, parent, before, definition, dependencies, model, send) {
-    const child = new Scope(model(), send, scope.report);
+    const child = new Scope(model(), send, scope.report, scope.settlement);
     scope.cleanups.push(() => child.dispose());
     definition.build(child, parent, before);
     scope.watch(dependencies, () => {
@@ -596,6 +912,54 @@ export function child(scope, parent, before, definition, dependencies, model, se
             child.set(next);
     });
 }
+/** A late-bound compiled definition owns one replaceable DOM region. */
+export function viewRegion(scope, parent, before, options = {}) {
+    const { start, end } = markers(parent, before);
+    let active;
+    let definition;
+    if (!options.manual)
+        scope.jobs.push(() => active?.set(scope.value));
+    scope.cleanups.push(() => {
+        active?.dispose();
+        remove(start, end);
+    });
+    return (next) => commitDom(() => {
+        if (scope.disposed)
+            return;
+        if (definition === next) {
+            active?.set(scope.value);
+            return;
+        }
+        const previous = active;
+        active = undefined;
+        definition = undefined;
+        previous?.dispose();
+        if (scope.disposed)
+            return;
+        clear(start, end);
+        if (!next)
+            return;
+        const child = new Scope(scope.value, scope.send, options.report ?? scope.report, scope.settlement);
+        const fragment = buildFragment(end.parentNode);
+        active = child;
+        definition = next;
+        try {
+            next.build(child, fragment, null);
+            if (scope.disposed || active !== child)
+                child.dispose();
+            else
+                end.parentNode.insertBefore(fragment, end);
+        }
+        catch (error) {
+            child.dispose();
+            if (active === child) {
+                active = undefined;
+                definition = undefined;
+            }
+            throw error;
+        }
+    });
+}
 export function attach(scope, element, dependencies, read) {
     let generation = 0;
     let active;
@@ -615,27 +979,66 @@ export function attach(scope, element, dependencies, read) {
             return;
         queueMicrotask(() => {
             if (!scope.disposed && token === generation) {
+                const finished = scope.settlement.begin();
                 try {
-                    active = startMount(element, mount, scope.report);
+                    const acquired = startMount(element, mount, scope.report);
+                    acquired.closed.then(finished, finished);
+                    if (scope.disposed || token !== generation)
+                        acquired.dispose();
+                    else
+                        active = acquired;
                 }
                 catch (error) {
+                    finished();
                     reportSafely(scope.report, error);
                 }
             }
         });
     });
 }
-export function portal(scope, build) {
-    const host = document.createElement('div');
-    host.style.display = 'contents';
-    document.body.appendChild(host);
-    const child = new Scope(scope.value, scope.send, scope.report);
+export function portal(scope, build, mount = () => undefined) {
+    let host;
+    let child;
     scope.cleanups.push(() => {
-        child.dispose();
-        host.remove();
+        child?.dispose();
+        host?.remove();
     });
-    build(child, host, null);
-    scope.jobs.push(() => child.set(scope.value));
+    const update = () => {
+        const target = mount() ?? document.body;
+        const svg = svgChildren(target);
+        if (!host || (host.namespaceURI === svgNamespace) !== svg) {
+            child?.dispose();
+            host?.remove();
+            if (scope.disposed)
+                return;
+            host = svg
+                ? target.ownerDocument.createElementNS(svgNamespace, 'g')
+                : target.ownerDocument.createElement('div');
+            host.style.display = 'contents';
+            child = new Scope(scope.value, scope.send, scope.report, scope.settlement);
+            target.appendChild(host);
+            build(child, host, null);
+            return;
+        }
+        if (host.parentNode !== target) {
+            const focused = host.ownerDocument.activeElement;
+            const move = Reflect.get(target, 'moveBefore');
+            if (typeof move === 'function' &&
+                target.isConnected &&
+                host.isConnected &&
+                target.ownerDocument === host.ownerDocument)
+                move.call(target, host, null);
+            else
+                target.appendChild(host);
+            if (focused instanceof HTMLElement &&
+                focused.isConnected &&
+                focused.ownerDocument.activeElement !== focused)
+                focused.focus({ preventScroll: true });
+        }
+        child.set(scope.value);
+    };
+    scope.jobs.push(update);
+    update();
 }
 // HTML parsing supplies the initial nodes. Unusual placements, such as mounting
 // an HTML-named view inside SVG, still follow the same namespace rules as element().
@@ -703,3 +1106,4 @@ export function template(build, depth = 0) {
 export function literal(parent, before, value) {
     parent.insertBefore((parent.ownerDocument ?? document).createTextNode(value), before);
 }
+export { intrinsic } from './intrinsic.js';