@symbiote-native/svelte 0.3.0 → 2.0.0

package/build/dom-shim/element.js

@@ -1,19 +1,38 @@
-// The workhorse of the shim. Every Symbiote intrinsic (`symbiote-view`, `symbiote-text`, …)
-// is a hyphenated tag, so Svelte compiles it down the CUSTOM-ELEMENT codegen path (§3g):
-// attributes go through `set_custom_element_data`, which stringifies scalars and hard-excludes
-// `style`. The resolution (§3g(c)) is a single object-bag PROPERTY, not a spread of
-// attributes — an object always satisfies `value && typeof value === 'object'`, so it lands as
-// a real property SET (`node.p = bag`), untouched by stringification. `p`'s setter (below)
-// unpacks the bag into `routeProp`, the same entry point React's flat bag and Vue's patchProp
-// already use.
+// The workhorse of the shim, and it has FIVE doors, not one — svelte decides which by tag name,
+// by compiled namespace and by whether the attribute starts with `on`, so an element cannot
+// choose its own:
+//
+//   set_custom_element_data   hyphenated tags (`text-input`, …). Stringifies a scalar; an OBJECT
+//                             lands as a real property set, which is what makes `p={{…}}` work.
+//   set_attribute             every other tag, and the hyphenated ones for a non-string value.
+//   set_class                 -> `setAttribute('class')` in the svg namespace, `dom.className`
+//                             in html. Both spellings land in the same bag key.
+//   set_style                 -> `dom.style.cssText`, STRINGIFIED, plus the authored value under
+//                             a private Symbol. See `style-cache.ts`.
+//   addEventListener          any `on<Name>` attribute, via `$.event()`, with the `on` stripped.
+//
+// All five converge on one folded bag and out through `routeProp`, the entry point React's flat
+// bag and Vue's patchProp already use — because only `routeProp` knows which `on*` names the
+// node's ViewConfig declares as events and which are ordinary callback props a behavior reads.
+// `p` is ours to name (§3g(c)); a component forwarding a whole bag emits it, app code need not.
+//
+// They converge, they do not merge: `p` owns its key SET, since a key dropped from the bag has to
+// reset the prop, while the other four own a key each. Hence `doorBag` / `pBag` below.
 //
 // A per-key diff in the setter is MANDATORY (§3g(c)), not an optimization: Svelte's
 // `set_custom_element_data` has no early-out guard and runs on every effect re-fire, so
 // without the diff every prop gets rewritten whenever any one of them changes.
-import { createElement, dlog, isDebug, routeProp, setEventListener, toPublicInstance, } from '@symbiote-native/engine';
+import { createElement, dlog, routeProp, toPublicInstance, } from '@symbiote-native/engine';
 import { descriptorFor } from '@symbiote-native/components';
 import { normalizeSvelteClass } from '../class-value.js';
+import { CANONICAL_BY_LOWER, CANONICAL_PROP_NAMES, } from './canonical-prop-names.js';
+import { foldHostBag } from './fold-host-bag.js';
 import { ShimNode } from './shim-node.js';
+import { discoverStyleCacheKey } from './style-cache.js';
+// The bag a not-yet-live element is diffed against in onMadeLive. A module constant rather than a
+// fresh `{}` per node: it is only ever read, and the identity lets applyBagDiff skip its second
+// pass outright on the create path.
+const EMPTY_BAG = Object.freeze({});
 // Diagnostic-only: a process-wide sequence so every `set p` call across every shim element in a
 // log dump is individually orderable against AnimatedProps reconcile#N / AnimatedView reduced#N
 // / hostShim identity-change#N, to see which one is driving which.
@@ -21,12 +40,32 @@ let globalSetPSeq = 0;
 // `on<Name>` handlers ride inside the prop bag (idiomatic Svelte 5 callback props — see the
 // skill's §3g(c) "most of §5 collapses" note) — they are not addEventListener-style DOM
 // listeners, so they are diffed and routed exactly like any other bag key, through routeProp.
-export class ShimElement extends ShimNode {
+// An empty layer that exists to be what `globalThis.Element` points at, and it is load-bearing.
+// Svelte's `get_setters` (internal/client/dom/elements/attributes.js) walks from the ELEMENT
+// INSTANCE up and STOPS when it reaches `Element.prototype`. While `Element` was `ShimElement`
+// itself, the first prototype step was already the stop, so the walk collected nothing and `p` —
+// which lives on `ShimElement.prototype`, one step past it — was invisible. `set_attributes` then
+// fell through to `setAttribute`, which writes an inert Map, and every prop vanished with nothing
+// red. The rule is therefore that `Element` must be a proper ANCESTOR of the class owning the
+// setters, never that class: `.claude/rules/svelte-shim-element-global-must-be-an-ancestor.md`.
+export class ShimElementBase extends ShimNode {
+}
+export class ShimElement extends ShimElementBase {
     tagName;
     namespaceURI;
-    attributes = new Map();
-    domListeners = new Map();
-    lastBag = {};
+    // LAZY, and that is a measured decision, not a style one. A primitive carrying its whole prop
+    // surface in the `p` bag never writes this on the create path — but an eager field allocated a
+    // Map per element regardless, 9 002 of them on a 1 000-row create, in a window where GC is the
+    // largest single bucket (29%).
+    attributes = undefined;
+    // The four attribute doors write `doorBag`, `set p` writes `pBag`, `lastBag` is the folded merge.
+    // Held in ONE object, `set p` deleted the `class` `from_tree` had written at clone time, so
+    // `<view p={handlers} class="x">` committed with no style at all and nothing was red. Unreachable
+    // while an element used one door, which every lowered tag and adapter component does.
+    // Both LAZY: an element touching one door still allocates one object.
+    doorBag = undefined;
+    pBag = undefined;
+    lastBag = EMPTY_BAG;
     constructor(tagName, namespaceURI) {
         super();
         this.tagName = tagName;
@@ -35,70 +74,235 @@ export class ShimElement extends ShimNode {
     get nodeName() {
         return this.tagName;
     }
+    // `set_style` writes `dom.style.cssText`, so a shim with no `.style` THROWS rather than
+    // no-opping — a `style` attribute on a bare tag crashed the mount. LAZY, for the reason
+    // `.claude/rules/svelte-shim-is-the-per-node-create-path.md` records about the two Maps below it:
+    // an eager field is one object per element, ~9 000 per create, in the window where GC is the
+    // largest bucket. Only `set_style` touches this, and no lowered element takes that path.
+    styleSlot = undefined;
+    get style() {
+        return (this.styleSlot ??= { cssText: '' });
+    }
+    // The real `style` seam, reached from the Symbol accessor below rather than from `.style`: that
+    // slot only ever sees `String(value)`. Not part of the DOM surface.
+    writeStyleValue(value) {
+        this.writeBagKey('style', value);
+    }
+    // `set_class`'s html-namespace exit. Without the setter it lands as a plain JS property, and the
+    // failure is half-silent: a static `class="card"` rides the template through `setAttribute` and
+    // keeps working, so only the dynamic spelling stops styling.
+    get className() {
+        return this.lastBag.class;
+    }
+    set className(value) {
+        this.writeBagKey('class', value);
+    }
     // The single object-bag prop. The literal name is ours to choose (§3g(c)) — the adapter's
-    // own View.svelte/Text.svelte/… emit `<symbiote-view p={bag}>`; app code never sees it.
+    // own View.svelte/Text.svelte/… emit `<view p={bag}>`; app code never sees it.
     get p() {
         return this.lastBag;
     }
     set p(bag) {
-        const next = normalizeBagClasses(bag ?? {});
+        // The fold runs HERE rather than at element creation because an alias can arrive on an update
+        // (`id` bound to a signal), and it runs before the diff so `lastBag` is always the folded shape
+        // — otherwise a seeded default would look like a change on every single set.
+        this.pBag = bag;
+        const next = this.foldedBag();
         const prev = this.lastBag;
         this.lastBag = next;
-        const changedKeys = diffKeys(prev, next);
-        dlog(`ShimElement set-p#${++globalSetPSeq} tag=${this.tagName} live=${this.engineNode !== undefined} ` +
-            `changedKeys=${changedKeys.join(',')}`);
+        // THUNK, not a string (see debug.ts's header): this setter runs once per element per create
+        // and the changed-key list is diagnostic only. Built eagerly it cost a Set, two key arrays, a
+        // join and a template literal on every one of 9 002 elements, with logging off.
+        dlog(() => `ShimElement set-p#${++globalSetPSeq} tag=${this.tagName} live=${this.engineNode !== undefined} ` +
+            `changedKeys=${diffKeys(prev, next).join(',')}`);
         if (this.engineNode === undefined)
             return; // not live yet — onMadeLive() replays `next` in full
         applyBagDiff(this.engineNode, prev, next);
         this.surface?.requestCommit();
     }
+    // A BARE tag's props arrive here, one key at a time, and they used to stop here: an inert Map,
+    // nothing routed, nothing committed, nothing red. That was survivable only while every host
+    // element in an app was produced by the lowering transform, which builds the `p` bag above —
+    // and it is exactly what made that transform load-bearing for CORRECTNESS on this adapter
+    // alone. Routing the key makes `<view testID="x">` and `<view p={{ testID: 'x' }}>` the same
+    // commit, so the transform goes back to being the optimisation it is everywhere else.
+    //
+    // `value` is `unknown`, not `string`: Svelte's `set_attribute` hands the raw value straight
+    // through for a name with no prototype setter, so an object `style` or a number arrives
+    // unstringified. The DOM would coerce it; we must not — `routeProp` wants the real value.
+    //
+    // The Map stays, and is not redundant: `getAttribute` must answer with the name the caller
+    // wrote, while the bag has been folded (`id` -> `nativeID`) by the time it is stored.
+    // `name` arrives LOWERCASED for every static attribute on every tag, and for a dynamic one on any
+    // tag whose name is not also an SVG element — the compiler settles that, so the repair has to
+    // happen here. One Map lookup per attribute write, no allocation; a name already canonical (or
+    // one we do not know) is handed on untouched. See `canonical-prop-names.ts`.
     setAttribute(name, value) {
-        this.attributes.set(name, value);
+        (this.attributes ??= new Map()).set(name, value);
+        this.writeBagKey(CANONICAL_BY_LOWER.get(name) ?? name, value);
     }
     getAttribute(name) {
-        return this.attributes.get(name) ?? null;
+        return this.attributes?.get(name) ?? null;
     }
     removeAttribute(name) {
-        this.attributes.delete(name);
+        this.attributes?.delete(name);
+        // Same repair as the write, or a removal clears a key nothing ever set.
+        this.writeBagKey(CANONICAL_BY_LOWER.get(name) ?? name, undefined);
     }
+    // One key into the same bag `set p` writes, so the three spellings cannot drift into three
+    // representations. Folded on every write because the fold is idempotent by construction
+    // (`fold-host-bag.ts` states and tests that) — a bare tag has no other pass that could do it.
+    //
+    // Not `private`: the prototype accessors installed at the bottom of this file are the third
+    // writer, and they are defined from module scope because there are ~290 of them.
+    writeBagKey(name, value) {
+        const door = { ...this.doorBag };
+        if (value === undefined)
+            delete door[name];
+        else
+            door[name] = value;
+        this.doorBag = door;
+        const prev = this.lastBag;
+        const next = this.foldedBag();
+        this.lastBag = next;
+        if (this.engineNode === undefined)
+            return; // not live yet — onMadeLive() replays in full
+        applyBagDiff(this.engineNode, prev, next);
+        this.surface?.requestCommit();
+    }
+    // A door key WINS over the same name inside `p`: fixed precedence, so the committed value does
+    // not depend on which setter svelte called last. Branched to keep a one-door element at one fold.
+    foldedBag() {
+        const door = this.doorBag;
+        const bag = this.pBag;
+        if (door === undefined)
+            return foldHostBag(this.tagName, normalizeBagClasses(bag ?? {}));
+        if (bag === undefined)
+            return foldHostBag(this.tagName, normalizeBagClasses(door));
+        return foldHostBag(this.tagName, normalizeBagClasses({ ...bag, ...door }));
+    }
+    // THE FIFTH DOOR, and it converges on the same bag as the other four. Svelte turns EVERY
+    // `on<Name>` attribute into `$.event()`, whatever the name means to us — so this receives both
+    // `Press`, which the node's ViewConfig declares as an event, and `ValueChange`, which no config
+    // declares and which `behaviors/{switch,text-input}.ts` read as `node.props.onValueChange`.
+    // Calling `setEventListener` directly answered "event" for both and stashed the second under a
+    // name nothing dispatches to: the toggle moved natively and the app's callback never ran.
+    // Only `routeProp` knows which is which, so the handler goes back through the bag under the name
+    // the author wrote.
     addEventListener(name, handler) {
-        this.domListeners.set(name, handler);
-        if (this.engineNode !== undefined)
-            setEventListener(this.engineNode, name, handler);
+        this.writeBagKey(propNameForEvent(name), handler);
     }
     removeEventListener(name) {
-        this.domListeners.delete(name);
-        if (this.engineNode !== undefined)
-            setEventListener(this.engineNode, name, undefined);
+        this.writeBagKey(propNameForEvent(name), undefined);
     }
     cloneNode(deep) {
         const clone = new ShimElement(this.tagName, this.namespaceURI);
-        for (const [key, value] of this.attributes)
-            clone.attributes.set(key, value);
+        if (this.attributes !== undefined)
+            clone.attributes = new Map(this.attributes);
+        // The bag, not just the Map — `from_tree` builds each template ONCE, writes its static
+        // attributes onto that master, and then clones per instance, so without this every attribute
+        // an app spells statically (`<view testID="x" class="card">`) is dropped from every instance.
+        // A reference copy is safe because `writeBagKey` and `set p` both publish a fresh object.
+        // `doorBag` too, or a `set p` on the CLONE re-folds without the master's static attributes.
+        clone.doorBag = this.doorBag;
+        clone.pBag = this.pBag;
+        clone.lastBag = this.lastBag;
         if (deep === true) {
             for (const child of this.children)
                 clone.appendChild(child.cloneNode(true));
         }
         return clone;
     }
-    // toPublicInstance grafts measure/measureInWindow/measureLayout/setNativeProps/focus/blur
-    // onto the node — the imperative API a `bind:this` host ref hands back, the same augmentation
-    // Vue's renderer applies at its own commit point (renderer/index.ts) and React gets from
-    // getPublicInstance. Mutates in place and returns the SAME node, so this is a safe drop-in for
-    // the previously-bare createElement() call.
+    // measure/measureInWindow/measureLayout/setNativeProps/focus/blur — the imperative API a
+    // `bind:this` host ref hands back — ride on the engine node's prototype, so toPublicInstance is
+    // the identity and this reads the same as Vue's renderer (renderer/index.ts) and React's
+    // getPublicInstance.
     createEngineNode() {
         const descriptor = descriptorFor(this.tagName);
-        return toPublicInstance(createElement(descriptor.component, descriptor.isText));
+        // The INTRINSIC TAG as the third argument, and this is the only place the tag alphabet still
+        // exists: `descriptor.component` is the Fabric view name (`view` -> `RCTView`), so a
+        // host-behavior registry keyed by tag can only be reached from here. The argument defaults to
+        // `component`, so passing it changes nothing until a behavior is registered.
+        return toPublicInstance(createElement(descriptor.component, descriptor.isText, this.tagName));
     }
+    // One replay, because a handler is an ordinary bag key now — it arrives before the node is live
+    // exactly like `class` or `style` does, and leaves through the same diff.
     onMadeLive() {
         const engineNode = this.engineNode;
         if (engineNode === undefined)
             return;
-        applyBagDiff(engineNode, {}, this.lastBag);
-        for (const [name, handler] of this.domListeners)
-            setEventListener(engineNode, name, handler);
+        applyBagDiff(engineNode, EMPTY_BAG, this.lastBag);
     }
 }
+// Svelte hands `addEventListener` the authored name minus its `on`, so `onPress` arrives as
+// `Press`. Putting it back is what lets the handler re-enter through the ordinary prop bag, where
+// `routeProp` decides event-vs-prop from the node's ViewConfig — the one decision this layer
+// cannot make. A name that was already lowercase (`onclick` -> `click`) rebuilds as `onclick`,
+// which no config declares and which therefore lands inertly in `node.props`, exactly as a DOM
+// event name should on a native host.
+//
+// A charCode test rather than `name[0] !== name[0].toUpperCase()`: this runs per handler per
+// element on the create path, and the comparison spelling allocates two strings to answer it.
+function propNameForEvent(name) {
+    const first = name.charCodeAt(0);
+    if (first >= 65 /* A */ && first <= 90 /* Z */)
+        return `on${name}`;
+    return `on${name[0].toUpperCase()}${name.slice(1)}`;
+}
+// The seam `set_style` writes the authored value to. Discovered once, at module load, because
+// svelte's key is a module-private Symbol — see `style-cache.ts` for the whole mechanism.
+Object.defineProperty(ShimElement.prototype, discoverStyleCacheKey(), {
+    get() {
+        return this.p.style;
+    },
+    set(value) {
+        this.writeStyleValue(value);
+    },
+});
+// The setters `get_setters` has to find, so `set_custom_element_data` stops guessing. Its
+// heuristic branch — reached whenever no real setter exists for the name — hands a scalar on as
+// `String(value)` and assigns an object to a plain JS property the shim never reads, so a
+// hyphenated tag committed `"false"` for `multiline={false}` and nothing at all for an object.
+// With a setter present the raw value lands in the same folded bag `set p` and `setAttribute`
+// write, and the three doors agree.
+//
+// ONE-TIME, at module load: ~290 defineProperty calls, nothing per node
+// (`svelte-shim-is-the-per-node-create-path.md`). The instance shape does not move — these live on
+// the prototype — so no element pays for them.
+//
+// A name the shim ALREADY owns is skipped rather than overwritten, and it is owned in TWO places
+// that need two different tests. On the PROTOTYPE: `style` is a `{cssText}` slot `set_style`
+// writes through, `className` is `set_class`'s html exit, `p` is the bag itself — an `in` test
+// covers those, and covers a future member of the chain the day it is added.
+//
+// On the INSTANCE is the one that cost a device crash. `children` is a canonical prop name AND
+// ShimNode's own field — the tree itself — and `in` cannot see it, because a class field lives on
+// the instance and the prototype is empty at module load. Installing an accessor over it is
+// harmless under vitest, where `useDefineForClassFields` makes `this.children = []` a
+// `defineProperty` that shadows the accessor, and FATAL under Metro, whose loose class fields
+// compile it to an assignment that the prototype setter swallows — so `this.children` read back
+// `this.p.children`, i.e. undefined, and `makeLive` died iterating it on the app's ROOT node.
+// Every one of the 328 headless tests passed.
+//
+// The probe is a real instance built before the loop, so it answers with whatever fields the
+// ACTIVE transform materialises rather than a list someone has to keep. Its fields carry explicit
+// `= undefined` initializers for the same reason: a bare declaration emits nothing under Metro and
+// the probe would not see it.
+const SHAPE_PROBE = new ShimElement('view');
+for (const name of CANONICAL_PROP_NAMES) {
+    if (name in ShimElement.prototype)
+        continue;
+    if (Object.hasOwn(SHAPE_PROBE, name))
+        continue;
+    Object.defineProperty(ShimElement.prototype, name, {
+        get() {
+            return this.p[name];
+        },
+        set(value) {
+            this.writeBagKey(name, value);
+        },
+    });
+}
 // Both spellings route through the engine's shared class+style merge (routeProp's
 // CLASS_PROP_KEYS), so both get the same clsx normalization here.
 const CLASS_BAG_KEYS = ['class', 'className'];
@@ -120,11 +324,25 @@ function normalizeBagClasses(bag) {
     }
     return next;
 }
+// Diagnostic only — the one caller is the `dlog` thunk above. The allocation-free twin below is
+// what the hot path uses; keep them in step.
 function diffKeys(prev, next) {
     const keys = new Set([...Object.keys(prev), ...Object.keys(next)]);
     return [...keys].filter(key => prev[key] !== next[key]);
 }
+// Deliberately NOT `for (const key of diffKeys(...))`: that materialized a Set, two key arrays,
+// a spread and a filtered array per element. Two direct passes route exactly the same keys —
+// changed-or-added from `next`, then dropped keys from `prev` as `undefined`, which is what
+// `next[key]` evaluated to in the old shape.
 function applyBagDiff(engineNode, prev, next) {
-    for (const key of diffKeys(prev, next))
-        routeProp(engineNode, key, next[key]);
+    for (const key of Object.keys(next)) {
+        if (prev[key] !== next[key])
+            routeProp(engineNode, key, next[key]);
+    }
+    if (prev === EMPTY_BAG)
+        return;
+    for (const key of Object.keys(prev)) {
+        if (!(key in next))
+            routeProp(engineNode, key, undefined);
+    }
 }

package/build/dom-shim/fold-host-bag.d.ts

@@ -0,0 +1 @@
+export { foldHostBag, FOLD_PLAN_BY_TAG as BY_TAG, type IHostBag, } from '@symbiote-native/components/fold-host-bag';

package/build/dom-shim/fold-host-bag.js

@@ -0,0 +1,7 @@
+// Moved to `@symbiote-native/components/fold-host-bag` (2026-09-01) and kept here as a re-export.
+//
+// It left this adapter the moment a SECOND adapter needed it: React's wrappers are being replaced
+// by bare intrinsic tags, and a bare tag has no wrapper to fold in — the same "third path" this
+// file was written for, arriving in an adapter that has no lowering transform either. A per-adapter
+// copy of a fold driven by a shared spec is the duplication `<adapters_stay_thin>` exists to stop.
+export { foldHostBag, FOLD_PLAN_BY_TAG as BY_TAG, } from '@symbiote-native/components/fold-host-bag';

package/build/dom-shim/patch-globals.js

@@ -24,7 +24,7 @@
 //
 // `customElements` IS patched, unlike the three above — see its own comment below.
 import { dlog } from '@symbiote-native/engine';
-import { ShimElement } from './element.js';
+import { ShimElement, ShimElementBase } from './element.js';
 import { ShimText } from './text.js';
 import { ShimComment } from './comment.js';
 import { ShimDocumentFragment } from './document-fragment.js';
@@ -40,6 +40,7 @@ const PATCHED_KEYS = [
     'DocumentFragment',
     'document',
     'customElements',
+    'HTMLMediaElement',
 ];
 // Real DOM's `CustomElementRegistry`. `set_custom_element_data` (svelte's
 // dom/elements/attributes.js) reads the BARE global `customElements` unconditionally, with no
@@ -48,11 +49,34 @@ const PATCHED_KEYS = [
 // pipeline (mount-pipeline.smoke.test.ts); `tsc --build` has no way to catch a missing global
 // a compiled Svelte bundle reads. RN/Hermes has no Custom Elements API of its own to collide
 // with (unlike `navigator`/`requestAnimationFrame`, verified against .vendors/react-native —
-// see the header comment above), so patching this is safe. `get()` always returns `undefined`
-// since we never call `customElements.define()`, which is exactly what steers
-// `set_custom_element_data` down the object-bag "set as property" branch every `p={bag}` prop
-// needs (skill §3g(c)).
-const FAKE_CUSTOM_ELEMENT_REGISTRY = { get: () => undefined };
+// see the header comment above), so patching this is safe.
+//
+// `get()` returns a TRUTHY stand-in, and that is the whole reason `set_custom_element_data` can be
+// made lossless. Its condition (attributes.js:245-265) is a ternary, not a fallback:
+//
+//   setters_cache.has(nodeName) || !customElements || customElements.get(nodeName)
+//     ? get_setters(node).includes(prop)     <- a real setter decides; the value passes through
+//     : value && typeof value === 'object'   <- a HEURISTIC: an object is set as a property and
+//                                               every scalar is handed on as String(value)
+//
+// Returning `undefined` — which it did until 2026-09-07 — selects the heuristic, so
+// `<text-input multiline={false}>` committed the STRING "false" and an object-valued prop with no
+// prototype setter was assigned to a plain JS property and silently lost. Anything truthy steers
+// it to `get_setters`, which reaches `ShimElement.prototype`'s accessors (see
+// `svelte-shim-element-global-must-be-an-ancestor.md` for why that walk terminates where it does).
+// One reader in the whole client runtime, so nothing else is affected.
+const FAKE_CUSTOM_ELEMENT_REGISTRY = {
+    get: () => ShimElement,
+};
+// Same class of trap as `customElements` above, found the same way — by running the pipeline
+// rather than by reading. Svelte's `event()` (dom/elements/events.js) ends its teardown check with
+// a BARE `dom instanceof HTMLMediaElement`, no `typeof` guard, so an undeclared global throws
+// ReferenceError instead of yielding `undefined`. It is reached by every `on<Name>={fn}` an app
+// writes on a bare tag, which is why nothing hit it while the lowering transform funnelled every
+// handler through the `p` bag. Nothing of ours ever derives from it, so an empty class is enough:
+// `instanceof` only has to answer false.
+class FakeHTMLMediaElement {
+}
 let previous;
 export function patchGlobals() {
     if (previous !== undefined)
@@ -68,9 +92,12 @@ export function patchGlobals() {
         DocumentFragment: g.DocumentFragment,
         document: g.document,
         customElements: g.customElements,
+        HTMLMediaElement: g.HTMLMediaElement,
     };
     g.Node = ShimNode;
-    g.Element = ShimElement;
+    // ShimElementBase, NOT ShimElement: `get_setters` stops AT `Element.prototype`, so pointing this
+    // at the class that owns `p` hides `p` from every `set_attributes` caller. See element.ts.
+    g.Element = ShimElementBase;
     // Svelte's mandatory paths never distinguish HTMLElement/SVGElement from Element (we have
     // no `<svg>` primitives), so both alias the same class — real, extensible prototypes either
     // way, which is all `init_operations()` requires (§3a).
@@ -81,6 +108,7 @@ export function patchGlobals() {
     g.DocumentFragment = ShimDocumentFragment;
     g.document = getShimDocument();
     g.customElements = FAKE_CUSTOM_ELEMENT_REGISTRY;
+    g.HTMLMediaElement = FakeHTMLMediaElement;
     dlog('svelte dom-shim: patchGlobals installed');
 }
 export function restoreGlobals() {

package/build/dom-shim/shim-node.js

@@ -69,12 +69,23 @@ export class ShimNode {
         for (const node of nodes)
             this.appendChild(node);
     }
+    // The fragment branch is the rare one — every ordinary insert is a single node — but
+    // `normalizeInsertable` allocated a one-element array for it regardless, 23 006 of them on a
+    // 1 000-row create. Test the flag first and hand the node straight to insertOne.
     appendChild(node) {
+        if (!node.isDocumentFragment) {
+            this.insertOne(node, null);
+            return node;
+        }
         for (const single of normalizeInsertable(node))
             this.insertOne(single, null);
         return node;
     }
     insertBefore(node, ref) {
+        if (!node.isDocumentFragment) {
+            this.insertOne(node, ref);
+            return node;
+        }
         for (const single of normalizeInsertable(node))
             this.insertOne(single, ref);
         return node;

package/build/dom-shim/style-cache.d.ts

@@ -0,0 +1 @@
+export declare function discoverStyleCacheKey(): symbol;

package/build/dom-shim/style-cache.js

@@ -0,0 +1,27 @@
+// Where a `style={…}` attribute really goes, and why the shim cannot read it off `cssText`.
+//
+// Every tag name takes the same path: the compiler emits `$.set_style(node, value)` for `style`,
+// on a short tag and a hyphenated one alike. `set_style` then STRINGIFIES —
+// `to_style(value, undefined)` is `String(value)` — so a React Native style object arrives at
+// `dom.style.cssText` as the literal `"[object Object]"`. Nothing downstream can recover it.
+//
+// One line later `set_style` writes the ORIGINAL value onto the element under a module-private
+// `Symbol('style')` (svelte's `internal/client/constants.js`), which it also reads back as the
+// change guard. That symbol is the only surviving copy, so intercepting it is the only way a
+// bare `<view style={obj}>` reaches `routeProp`.
+//
+// The symbol is not exported, so it is DISCOVERED by running svelte's own `set_style` against a
+// probe and reading the one own symbol it leaves behind — once per process, never per node. A
+// version that changes the shape fails loudly here rather than silently dropping every style.
+import { set_style } from 'svelte/internal/client';
+export function discoverStyleCacheKey() {
+    const probe = { style: { cssText: '' } };
+    // A non-null string: `to_style` returns it unchanged, so the probe stays on the assignment
+    // branch and never reaches `removeAttribute`, which it does not implement.
+    set_style(probe, 'probe');
+    const symbols = Object.getOwnPropertySymbols(probe);
+    if (symbols.length !== 1)
+        throw new Error(`svelte's set_style left ${symbols.length} own symbols on a probe; ` +
+            'the style-cache key cannot be identified and `style` would be dropped');
+    return symbols[0];
+}

package/build/dom-shim/text.js

@@ -36,8 +36,8 @@ const WHITESPACE_ONLY = /^[\s\u200b-\u200d\ufeff]+$/;
 // The PARENT is what makes this exact rather than a heuristic. Measured on svelte 5.56.8, a
 // stray gap and an {#each} text placeholder are the same ' ' string in the from_tree template:
 //
-//   stray gap    ['symbiote-view', null, [...], ' ', [...]]   parent takes no raw text -> drop
-//   placeholder  ['symbiote-text', null, ' ']                 parent IS a <Text>       -> keep
+//   stray gap    ['view', null, [...], ' ', [...]]   parent takes no raw text -> drop
+//   placeholder  ['text', null, ' ']                 parent IS a <Text>       -> keep
 //
 // So `<Text><Text>a</Text> <Text>b</Text></Text>` keeps its separator, correctly — there the
 // space really is a word boundary. This also covers the one shape the source preprocessor

package/build/host-instance.d.ts

@@ -1,5 +1,4 @@
 import { type IHostInstance } from '@symbiote-native/engine';
-import type { ShimElement } from './dom-shim';
 export type { IHostInstance } from '@symbiote-native/engine';
-export declare function hostInstance(shim: ShimElement | null | undefined): IHostInstance | undefined;
-export declare function findNodeHandle(componentOrHandle: ShimElement | number | null | undefined): number | null;
+export declare function hostInstance(shim: unknown): IHostInstance | undefined;
+export declare function findNodeHandle(componentOrHandle: unknown): number | null;

package/build/host-instance.js

@@ -22,13 +22,18 @@ function isShimElement(value) {
 }
 // The typed imperative handle (measure/measureInWindow/measureLayout/setNativeProps/focus/blur)
 // a `bind:this` host ref carries — the Svelte twin of a React `ref.current`/Vue template ref
-// already being an `IHostInstance`. `dom-shim/element.ts`'s `createEngineNode()` grafts
-// toPublicInstance onto every host node AT CREATION, so this call is idempotent (its own
-// isHostInstance guard short-circuits); this helper exists only to give app code a correctly
+// already being an `IHostInstance`. Every engine node carries those methods on its prototype, so
+// the toPublicInstance call below is the identity; this helper exists only to give app code a correctly
 // TYPED accessor off the SHIM value (`ShimElement`) instead of the bare `.engineNode` field,
 // with no `as` cast at the call site.
+// `unknown` rather than `ShimElement`, and the guard is what makes that sound. svelte2tsx bakes a
+// `bind:this` return type out of `lib.dom`'s tag maps — an SVG element type for `view`/`text`/
+// `image`/`switch`, `any` for the other seventeen — and neither map accepts augmentation
+// (`src/intrinsic-elements.ts` records the measurement). So an app CANNOT declare its ref as
+// `ShimElement` without a cast, and this is the accessor that exists to keep casts out of app
+// code. Declaring the parameter `unknown` moves the narrowing where it can actually be checked.
 export function hostInstance(shim) {
-    if (shim === null || shim === undefined)
+    if (!isShimElement(shim))
         return undefined;
     const node = shim.engineNode;
     return node !== undefined && isSymbioteNode(node)

package/build/index.d.ts

@@ -1,13 +1,17 @@
+import './register';
 export { mount, unmount } from './render';
 export { AppRegistry, setHostRegistrar } from './modules/app-registry';
 export type { IComponentProvider, IWrapperComponentProvider, IAppParameters, IRunnable, IHostRegistrar, IRegistry, IHeadlessTask, ITaskProvider, ITaskCanceller, ITaskCancelProvider, } from './modules/app-registry';
-export { View, Text, ActivityIndicator, Image, ImageBackground, InputAccessoryView, KeyboardAvoidingView, Switch, TextInput, Modal, SafeAreaView, RefreshControl, Pressable, TouchableOpacity, TouchableHighlight, TouchableWithoutFeedback, TouchableNativeFeedback, Button, ScrollView, ScrollViewStickyHeader, VirtualizedList, FlatList, VirtualizedSectionList, SectionList, } from './components';
-export type { IViewProps, ITextProps, IActivityIndicatorProps, IImageProps, IImageStatics, IImageBackgroundProps, IInputAccessoryViewProps, IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, ISwitchProps, ITextInputProps, ITextInputHandle, IModalProps, ISafeAreaViewProps, IRefreshControlProps, IPressableProps, ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, ITouchableNativeFeedbackProps, IButtonProps, IScrollViewProps, IScrollViewHandle, IStickyHeaderComponentProps, IVirtualizedListProps, IVirtualizedListHandle, IFlatListProps, IFlatListHandle, IVirtualizedSectionListProps, ISectionListProps, ISection, } from './components';
+export { KeyboardAvoidingView, Modal, VirtualizedList, FlatList, VirtualizedSectionList, SectionList, } from './components';
+export type { IViewProps, ITextProps, IActivityIndicatorProps, IImageProps, IImageBackgroundProps, IInputAccessoryViewProps, IKeyboardAvoidingViewProps, IKeyboardAvoidingBehavior, ISwitchProps, ISwitchChangeEvent, ITextInputProps, ITextInputHandle, ITextInputChangeEvent, IModalProps, ISafeAreaViewProps, IRefreshControlProps, IPressableProps, ITouchableOpacityProps, ITouchableHighlightProps, ITouchableWithoutFeedbackProps, ITouchableNativeFeedbackProps, IButtonProps, IScrollViewProps, IScrollViewHandle, IVirtualizedListProps, IVirtualizedListHandle, IFlatListProps, IFlatListHandle, IVirtualizedSectionListProps, ISectionListProps, ISection, } from './components';
 export type { IAccessibilityProps, IAriaProps, IAccessibilityRole, IRole, IAccessibilityStateValue, IAccessibilityValue, IAccessibilityActionInfo, IResponderProps, } from '@symbiote-native/components';
 export { setImageSourceResolver } from '@symbiote-native/components';
 export type { IImageSource, IImageSourceProp, IResizeMode, IImageSize, IImageCacheStatus, IModalAnimationType, IModalPresentationStyle, IModalOrientation, IViewToken, IViewableItemsChangedInfo, IViewabilityConfig, IViewabilityConfigCallbackPair, IPressState, ISwitchTrackColor, INativeFeedbackBackground, IThemeAttrBackground, IRippleBackground, IVirtualizedSectionListHandle, IVirtualizedSectionListHandle as ISectionListHandle, ICellLayout, ISeparatorProps, ISeparators, IModalOrientationChangeEvent, IPressableAndroidRippleConfig, IEnterKeyHint, IInputMode, ISubmitBehavior, ITextInputSelection, } from '@symbiote-native/components';
 export { Platform, StyleSheet, PlatformColor, DynamicColorIOS, processColor, setNativeViewConfigSource, setColorProcessor, setDeviceEventSource, PixelRatio, PanResponder, dlog, isDebug, } from '@symbiote-native/engine';
 export type { INativeViewConfig, INativeViewConfigSource, IPixelRatioStatic, ISymbioteEvent, ISymbioteNode, IRootTag, IPanResponderGestureState, IPanResponderCallbacks, IGestureResponderHandlers, IPanResponderInstance, IViewStyle, ITextStyle, IFlexAlign, IFlexJustify, IPlatformStatic, IPlatformOSType, IPlatformConstantsIOS, IPlatformConstantsAndroid, IPlatformSelectSpec, IColorValue, IOpaqueColorValue, IDynamicColorIOSTuple, } from '@symbiote-native/engine';
+export { Image } from './modules/image';
+export type { IImageStatics } from './modules/image';
+export { TouchableNativeFeedback } from '@symbiote-native/components';
 export { Alert, Share, ActionSheetIOS, Linking, Vibration, ToastAndroid, Settings, I18nManager, Dimensions, Appearance, AppState, Keyboard, KEYBOARD_EVENT, BackHandler, PermissionsAndroid, PERMISSIONS, RESULTS, LayoutAnimation, InteractionManager, } from '@symbiote-native/engine';
 export type { IAlertType, IAlertButtonStyle, IAlertButton, IAlertButtons, IAlertOptions, IShareContent, IShareOptions, IShareAction, IActionSheetIOSOptions, IShareActionSheetIOSOptions, IShareActionSheetError, IUrlEvent, II18nManagerConstants, IDisplayMetrics, IDisplayMetricsAndroid, IDimensionsPayload, IDimensionsSet, IDimensionsKey, IDimensionsChangeListener, IDimensionsStatic, IColorSchemeName, IColorSchemePreference, IAppStateStatus, IAppStateEvent, IKeyboardEventName, IKeyboardEvent, IKeyboardMetrics, IBackPressEventName, IBackPressHandler, IPermission, IPermissionStatus, IRationale, ILayoutAnimationType, ILayoutAnimationProperty, ILayoutAnimationConfig, ILayoutAnimationAnim, IInteractionEvent, ISimpleTask, IPromiseTask, ITask, IHandle, } from '@symbiote-native/engine';
 export { StatusBar } from './modules/status-bar';
@@ -17,6 +21,7 @@ export type { IAccessibilityChangeEvent, IAccessibilityChangeEventName, IAccessi
 export { findNodeHandle, hostInstance } from './host-instance';
 export type { IHostInstance } from './host-instance';
 export type { ShimElement } from './dom-shim';
+export type { ISymbioteIntrinsicTag, ISymbioteHostAttributes, } from './intrinsic-elements';
 export { createTunnel, TunnelIn, TunnelOut, type ITunnel, } from './create-tunnel';
 export { Portal, type IPortalProps, type IPortalTarget } from './create-portal';
 export { useWindowDimensions } from './runes/use-window-dimensions.svelte';
@@ -26,5 +31,4 @@ export { orientation, createWidthQuery } from './runes/media-query';
 export type { IOrientation, IWidthQueryBounds } from './runes/media-query';
 export type { IReactiveValue } from './runes/dimensions-value';
 export { normalizeSvelteClass, resolveSvelteClass, type ISvelteClassValue, type IClassMap, type IClassEntry, } from './class-value';
-export { Animated, createAnimatedComponent } from './modules/animated';
-export type { IAnimatedComponentProps } from './modules/animated';
+export { Animated } from './modules/animated';