@symbiote-native/svelte 1.0.0 → 2.0.0

package/build/dom-shim/canonical-prop-names.js

@@ -0,0 +1,320 @@
+// The prop names an app may write on a bare intrinsic tag, DERIVED — never hand-maintained.
+//
+// Why the shim needs a list of names at all. Svelte's compiler destroys two things a bare tag
+// carries, and both are settled before any code of ours runs:
+//
+//   `<view testID="x">`        `fix_attribute_casing` lowercases every STATIC attribute name
+//                              (transform-template/fix-attribute-casing.js) — `testid` reaches
+//                              Fabric, which declares no such prop, and it is dropped on device.
+//   `<pressable testID={v}>`   the same, for a DYNAMIC name, on any tag that is not an SVG
+//                              element name (`get_attribute_name` -> `normalize_attribute`).
+//   `<text-input multiline={false}>`
+//                              a hyphenated tag takes `set_custom_element_data`, which stringifies
+//                              a scalar and drops an object unless `get_setters(node)` finds a real
+//                              prototype setter for that exact name (attributes.js:245-265).
+//
+// One list answers all three: an accessor per name defeats the stringifier, and the same names
+// keyed by their lowercased spelling recover the casing in `setAttribute`. See `element.ts`.
+//
+// GENERATED from this adapter's own barrel — every `I*Props` type it exports, unioned through the
+// TypeScript checker. That is the authoritative per-tag prop surface (`IViewProps` and its
+// siblings), and it grows on its own when a primitive gains a prop or the barrel gains a type.
+// `canonical-prop-names.test.ts` re-derives it and fails on any drift; regenerate with the snippet
+// in that file's header rather than editing this array by hand.
+//
+// Deriving it from `react-native`'s own ViewConfig `validAttributes` was measured and rejected:
+// it covers the NATIVE surface only, missing 110 of the 255 camelCase names our shared layer
+// reads — `readOnly`, `inputMode`, `enterKeyHint`, `activeOpacity`, `delayLongPress`,
+// `pressRetentionOffset` and the rest of what our behaviors fold in JS.
+export const CANONICAL_PROP_NAMES = [
+    'accessibilityActions',
+    'accessibilityElementsHidden',
+    'accessibilityHint',
+    'accessibilityIgnoresInvertColors',
+    'accessibilityLabel',
+    'accessibilityLabelledBy',
+    'accessibilityLanguage',
+    'accessibilityLargeContentTitle',
+    'accessibilityLiveRegion',
+    'accessibilityRespondsToUserInteraction',
+    'accessibilityRole',
+    'accessibilityShowsLargeContentViewer',
+    'accessibilityState',
+    'accessibilityValue',
+    'accessibilityViewIsModal',
+    'accessible',
+    'activeOpacity',
+    'adjustsFontSizeToFit',
+    'allowFontScaling',
+    'allowSwipeDismissal',
+    'alt',
+    'alwaysBounceHorizontal',
+    'alwaysBounceVertical',
+    'android_disableSound',
+    'android_ripple',
+    'animated',
+    'animating',
+    'animationType',
+    'aria-busy',
+    'aria-checked',
+    'aria-disabled',
+    'aria-expanded',
+    'aria-hidden',
+    'aria-label',
+    'aria-labelledby',
+    'aria-live',
+    'aria-modal',
+    'aria-selected',
+    'aria-valuemax',
+    'aria-valuemin',
+    'aria-valuenow',
+    'aria-valuetext',
+    'autoCapitalize',
+    'autoComplete',
+    'autoCorrect',
+    'autoFocus',
+    'automaticallyAdjustKeyboardInsets',
+    'backdropColor',
+    'background',
+    'backgroundColor',
+    'barStyle',
+    'behavior',
+    'blurOnSubmit',
+    'blurRadius',
+    'bounces',
+    'bouncesZoom',
+    'cancelable',
+    'capInsets',
+    'centerContent',
+    'children',
+    'class',
+    'collapsable',
+    'color',
+    'colors',
+    'columnWrapperStyle',
+    'contentContainerStyle',
+    'contentInset',
+    'contentInsetAdjustmentBehavior',
+    'contentOffset',
+    'crossOrigin',
+    'cursorColor',
+    'data',
+    'decelerationRate',
+    'defaultSource',
+    'defaultValue',
+    'delayHoverIn',
+    'delayHoverOut',
+    'delayLongPress',
+    'delayPressIn',
+    'delayPressOut',
+    'directionalLockEnabled',
+    'disableIntervalMomentum',
+    'disabled',
+    'editable',
+    'ellipsizeMode',
+    'empty',
+    'enabled',
+    'endFillColor',
+    'enterKeyHint',
+    'extraData',
+    'fadeDuration',
+    'fadingEdgeLength',
+    'focusable',
+    'footer',
+    'getItem',
+    'getItemCount',
+    'getItemLayout',
+    'hardwareAccelerated',
+    'hasTVPreferredFocus',
+    'header',
+    'height',
+    'hidden',
+    'hidesWhenStopped',
+    'highlighted',
+    'hitSlop',
+    'horizontal',
+    'id',
+    'imageStyle',
+    'importantForAccessibility',
+    'indicatorStyle',
+    'initialNumToRender',
+    'initialScrollIndex',
+    'inputAccessoryViewID',
+    'inputMode',
+    'invertStickyHeaders',
+    'inverted',
+    'ios_backgroundColor',
+    'item',
+    'keyExtractor',
+    'keyboardDismissMode',
+    'keyboardShouldPersistTaps',
+    'keyboardType',
+    'keyboardVerticalOffset',
+    'leadingItem',
+    'loadingIndicatorSource',
+    'maintainVisibleContentPosition',
+    'maxFontSizeMultiplier',
+    'maxLength',
+    'maxToRenderPerBatch',
+    'maximumZoomScale',
+    'minPressDuration',
+    'minimumFontScale',
+    'minimumZoomScale',
+    'mount',
+    'multiline',
+    'nativeID',
+    'navigationBarTranslucent',
+    'needsOffscreenAlphaCompositing',
+    'nestedScrollEnabled',
+    'networkActivityIndicatorVisible',
+    'nextFocusDown',
+    'nextFocusForward',
+    'nextFocusLeft',
+    'nextFocusRight',
+    'nextFocusUp',
+    'numColumns',
+    'numberOfLines',
+    'onAccessibilityAction',
+    'onAccessibilityEscape',
+    'onAccessibilityTap',
+    'onBlur',
+    'onContentSizeChange',
+    'onDismiss',
+    'onEndEditing',
+    'onEndReached',
+    'onEndReachedThreshold',
+    'onError',
+    'onFocus',
+    'onHideUnderlay',
+    'onHoverIn',
+    'onHoverOut',
+    'onKeyPress',
+    'onLayout',
+    'onLoad',
+    'onLoadEnd',
+    'onLoadStart',
+    'onLongPress',
+    'onMagicTap',
+    'onMomentumScrollBegin',
+    'onMomentumScrollEnd',
+    'onMoveShouldSetResponder',
+    'onMoveShouldSetResponderCapture',
+    'onOrientationChange',
+    'onPartialLoad',
+    'onPress',
+    'onPressIn',
+    'onPressMove',
+    'onPressOut',
+    'onProgress',
+    'onRefresh',
+    'onRequestClose',
+    'onResponderEnd',
+    'onResponderGrant',
+    'onResponderMove',
+    'onResponderReject',
+    'onResponderRelease',
+    'onResponderStart',
+    'onResponderTerminate',
+    'onResponderTerminationRequest',
+    'onScroll',
+    'onScrollBeginDrag',
+    'onScrollEndDrag',
+    'onScrollToIndexFailed',
+    'onScrollToTop',
+    'onSelectionChange',
+    'onShow',
+    'onShowUnderlay',
+    'onStartReached',
+    'onStartReachedThreshold',
+    'onStartShouldSetResponder',
+    'onStartShouldSetResponderCapture',
+    'onSubmitEditing',
+    'onTextLayout',
+    'onValueChange',
+    'onViewableItemsChanged',
+    'overScrollMode',
+    'pagingEnabled',
+    'persistentScrollbar',
+    'pinchGestureEnabled',
+    'placeholder',
+    'placeholderTextColor',
+    'pointerEvents',
+    'presentationStyle',
+    'pressRetentionOffset',
+    'progressBackgroundColor',
+    'progressViewOffset',
+    'progressiveRenderingEnabled',
+    'readOnly',
+    'referrerPolicy',
+    'refreshControl',
+    'refreshing',
+    'removeClippedSubviews',
+    'renderToHardwareTextureAndroid',
+    'resizeMethod',
+    'resizeMode',
+    'returnKeyType',
+    'role',
+    'screenReaderFocusable',
+    'scrollEnabled',
+    'scrollEventThrottle',
+    'scrollIndicatorInsets',
+    'section',
+    'sectionFooter',
+    'sectionHeader',
+    'sectionSeparator',
+    'sections',
+    'secureTextEntry',
+    'selectTextOnFocus',
+    'selectable',
+    'selection',
+    'selectionColor',
+    'selectionHandleColor',
+    'separator',
+    'shouldRasterizeIOS',
+    'showSoftInputOnFocus',
+    'showsHorizontalScrollIndicator',
+    'showsVerticalScrollIndicator',
+    'size',
+    'snapToAlignment',
+    'snapToEnd',
+    'snapToInterval',
+    'snapToOffsets',
+    'snapToStart',
+    'source',
+    'src',
+    'srcSet',
+    'statusBarTranslucent',
+    'stickyHeaderIndices',
+    'stickySectionHeadersEnabled',
+    'style',
+    'submitBehavior',
+    'supportedOrientations',
+    'testID',
+    'textAlign',
+    'textContentType',
+    'thumbColor',
+    'tintColor',
+    'title',
+    'titleColor',
+    'touchSoundDisabled',
+    'trackColor',
+    'trailingItem',
+    'translucent',
+    'transparent',
+    'underlayColor',
+    'underlineColorAndroid',
+    'unstable_pressDelay',
+    'updateCellsBatchingPeriod',
+    'useForeground',
+    'value',
+    'viewabilityConfig',
+    'viewabilityConfigCallbackPairs',
+    'visible',
+    'width',
+    'windowSize',
+    'zoomScale',
+];
+// Lowercased spelling -> the name the author wrote. Built once, at module load. No entry can
+// collide: the derivation asserts it (`canonical-prop-names.test.ts`), because two props whose
+// names differ only in case would make the repair a coin toss.
+export const CANONICAL_BY_LOWER = new Map(CANONICAL_PROP_NAMES.map(name => [name.toLowerCase(), name]));

package/build/dom-shim/document.js

@@ -14,7 +14,7 @@ export class ShimDocument {
     // Our own event names never delegate (§5c: no camelCase name matches Svelte's 23-name
     // DELEGATED_EVENTS list), but a minimal, unattached node converts any stray read into a
     // no-op instead of a crash — one line, per §4's "provide a stub anyway" call.
-    body = new ShimElement('symbiote-view');
+    body = new ShimElement('view');
     createElement(tag, options) {
         const element = new ShimElement(tag);
         if (options?.is !== undefined)

package/build/dom-shim/element.d.ts

@@ -7,7 +7,8 @@ export declare class ShimElement extends ShimElementBase {
     readonly tagName: string;
     readonly namespaceURI: string | undefined;
     private attributes;
-    private domListeners;
+    private doorBag;
+    private pBag;
     private lastBag;
     constructor(tagName: string, namespaceURI?: string);
     get nodeName(): string;
@@ -15,11 +16,16 @@ export declare class ShimElement extends ShimElementBase {
     get style(): {
         cssText: string;
     };
+    writeStyleValue(value: unknown): void;
+    get className(): unknown;
+    set className(value: unknown);
     get p(): IShimPropBag;
     set p(bag: IShimPropBag | undefined);
-    setAttribute(name: string, value: string): void;
-    getAttribute(name: string): string | null;
+    setAttribute(name: string, value: unknown): void;
+    getAttribute(name: string): unknown;
     removeAttribute(name: string): void;
+    writeBagKey(name: string, value: unknown): void;
+    private foldedBag;
     addEventListener(name: string, handler: (event: unknown) => void): void;
     removeEventListener(name: string): void;
     cloneNode(deep?: boolean): ShimElement;

package/build/dom-shim/element.js

@@ -1,20 +1,34 @@
-// 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, 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.
@@ -39,12 +53,18 @@ export class ShimElementBase extends ShimNode {
 export class ShimElement extends ShimElementBase {
     tagName;
     namespaceURI;
-    // Both LAZY, and that is a measured decision, not a style one. A lowered primitive carries its
-    // whole prop surface in the `p` bag, so neither map is ever written on the create path — but an
-    // eager field allocated two Maps per element regardless, 18 004 of them on a 1 000-row create,
-    // in a window where GC is the largest single bucket (29%).
-    attributes;
-    domListeners;
+    // 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();
@@ -59,12 +79,26 @@ export class ShimElement extends ShimElementBase {
     // `.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;
+    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;
     }
@@ -72,7 +106,8 @@ export class ShimElement extends ShimElementBase {
         // 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.
-        const next = foldHostBag(this.tagName, normalizeBagClasses(bag ?? {}));
+        this.pBag = bag;
+        const next = this.foldedBag();
         const prev = this.lastBag;
         this.lastBag = next;
         // THUNK, not a string (see debug.ts's header): this setter runs once per element per create
@@ -85,29 +120,93 @@ export class ShimElement extends ShimElementBase {
         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 ??= new Map()).set(name, value);
+        this.writeBagKey(CANONICAL_BY_LOWER.get(name) ?? name, value);
     }
     getAttribute(name) {
         return this.attributes?.get(name) ?? null;
     }
     removeAttribute(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 ??= new Map()).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);
         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));
@@ -121,22 +220,89 @@ export class ShimElement extends ShimElementBase {
     createEngineNode() {
         const descriptor = descriptorFor(this.tagName);
         // 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 (`symbiote-view` -> `RCTView`), so a
+        // 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, EMPTY_BAG, this.lastBag);
-        if (this.domListeners === undefined)
-            return;
-        for (const [name, handler] of this.domListeners)
-            setEventListener(engineNode, name, handler);
     }
 }
+// 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'];