@symbiote-native/angular 3.0.1 → 3.1.0

package/src/elements.ts

@@ -58,7 +58,6 @@ import {
 } from './change-detection-flush';
 import { SymbioteCallbackHost } from './callback-host';
 import { withholdFromRuntimeMatching } from './runtime-matching';
-import { SymbioteStyleHost } from './style-host';
 import type {
   IActivityIndicatorProps,
   IImageProps,
@@ -190,44 +189,21 @@ export abstract class SymbioteElement implements OnChanges {
   @Input() shouldRasterizeIOS?: IElementProps['shouldRasterizeIOS'];
   @Input()
   needsOffscreenAlphaCompositing?: IElementProps['needsOffscreenAlphaCompositing'];
-  // Declared, and the reason is the one `element-props.ts` used to give for NOT declaring it —
-  // reversed by measurement. `[style]` on an element with no directive input reaches Angular's own
-  // CSS styling engine (`ɵɵstyleMap`), which cannot represent an RN StyleProp: an ARRAY decomposes
-  // into numeric-index keys and a FUNCTION — the press-state callback this ecosystem writes — dies
-  // in `toStylingKeyValueArray` as "ASSERTION ERROR: Unsupported styling type: function", taking
-  // the whole enclosing template update with it. Device-reported 2026-09-11: every `ActionButton`
-  // in examples/angular painted as an empty bordered box, because the throw aborted the update
-  // before its `<text>` child was ever reached.
-  //
-  // A declared input CLAIMS the binding at compile time, so it never reaches the styling engine —
-  // the same mechanism the primitive host COMPONENTS have always relied on
-  // (`primitives/shared.ts`), which is why `<Pressable [style]>` worked and its replacement tag did
-  // not. `[style.borderWidth.px]` is a different instruction (`ɵɵstyleProp`) and is untouched: it
-  // still reaches `Renderer2.setStyle`, which merges per key.
+  // `[style]` and `[class]` are declared for the TYPE CHECK only. Withheld from run-time matching, no
+  // input claims them, so Angular's own styling engine decomposes them into `setStyle`/`addClass`
+  // exactly as on a DOM element - which is why `style` is typed as the object/string that engine can
+  // hold. An RN style ARRAY or press-state FUNCTION throws in there ("indexOf is not a function",
+  // "Unsupported styling type: function"), so it is `[styleProp]`: an ordinary property binding the
+  // renderer routes to `style` whole. A claim would cost a directive instance per element.
   //
   // The press-state callback rides the BASE type rather than `PressableElement` alone: a subclass
   // cannot widen an inherited property, and only the pressables have a `pressed` to read — so on
-  // any other tag the engine resolves it at `pressed: false` and the looseness is in the type, not
-  // in what commits.
+  // any other tag the engine resolves it at `pressed: false`.
   @Input() style?: IElementProps['style'];
+  @Input() styleProp?: IElementProps['styleProp'];
 
-  /**
-   * Declared so Angular SHADOWS the `[class]` binding into it instead of decomposing the string.
-   *
-   * A styling binding goes to a directive input when the directive declares that exact public name
-   * — `setShadowStylingInputFlags` sets `hasClassInput`/`hasStyleInput` off the input map, and
-   * `checkStylingMap` then hands the whole value over and never calls the renderer per key
-   * (`view/directives.ts`, `instructions/styling.ts`). `style` has been declared here all along and
-   * is shadowed; `class` was not, so every `[class]` reached the renderer one TOKEN at a time — on
-   * the element-directive path as much as the bare one. Measured at ~3.3 us per class binding
-   * (`adapter-create-cost.itest.ts`, "prices the class channel"), on the channel every example app
-   * uses for its static look.
-   *
-   * `[class.foo]` and `[ngClass]` are NOT shadowed and keep arriving as `addClass`, so a node can
-   * now be told its classes both ways at once; the renderer unions the two sources
-   * (`classStringFor`). Typed as a string rather than RN's `className`, because that is what
-   * `ɵɵclassMap` hands over after it concatenates any static `class=` prefix.
-   */
+  // `ɵɵclassMap` hands over a string after joining any static `class=` prefix; `[class.foo]` and
+  // `[ngClass]` arrive as `addClass`. The renderer unions both sources (`classStringFor`).
   @Input() class?: string;
 
   // The flat-bag spelling of the events below. `(press)` and `[onPress]` are both supported and
@@ -422,6 +398,7 @@ export class TextElement extends SymbioteElement {
   // initializer is what TS2612 asks for to accept a redeclaration as deliberate; `declare` would
   // be the other answer and cannot carry a decorator.
   @Input() override style?: ITextElementProps['style'] = undefined;
+  @Input() override styleProp?: ITextElementProps['styleProp'] = undefined;
   @Input() numberOfLines?: ITextElementProps['numberOfLines'];
   @Input() ellipsizeMode?: ITextElementProps['ellipsizeMode'];
   @Input() selectable?: ITextElementProps['selectable'];
@@ -927,39 +904,27 @@ export const SYMBIOTE_ELEMENTS = [
   // bind one and carries the `ChangeDetectorRef` their wrapper needs. It rides this list for the same
   // reason the accessors do, and `elements.test.ts` subtracts it from the tag-coverage check by name.
   SymbioteCallbackHost,
-  // The other attribute-matched one: it claims `[style]` and `[class]` so an RN style ARRAY never
-  // reaches Angular's styling engine, which cannot represent one and throws. See `style-host.ts`.
-  SymbioteStyleHost,
 ] as const;
 
 // THE DIRECTIVES THAT GO ON MATCHING, and the list is the exceptions rather than the rule.
 //
-// A tag directive here is, with four exceptions, nothing but `@Input()` declarations over one
-// inherited `ngOnChanges` that forwards each of them to the renderer — which is the call
-// `ɵɵproperty` makes directly on an element nothing claimed. So the instance buys a compile-time
-// check at ~8.5-9.4 us of run time per element, and `./runtime-matching` keeps the check while
-// dropping the instance.
-//
-// These four cannot go, because they DO something when they are built:
+// EVERY TAG DIRECTIVE IS WITHHELD. Each is `@Input()` declarations over one inherited `ngOnChanges`
+// forwarding to the renderer (the call `ɵɵproperty` makes directly on an unclaimed element), so the
+// instance bought a compile-time check at ~8 us of run time per element.
 //
-//   text-input, text-input-multiline, switch   `ValueChangeElement` — listens for the engine's value
-//                                              event and registers a view flush, which is what stops
-//                                              a controlled value being undone inside one microtask
-//   refresh-control                            `ReadBackElement`, the same flush for the same reason
+// The read-back tags (text-input, text-input-multiline, switch, refresh-control) need a synchronous
+// view flush; the renderer marks them at creation and the flush finds their view lazily
+// (`change-detection-flush.ts`). `[(value)]` reaches the renderer's `listen('valueChange')` bridge.
 //
-// The two form accessors and `SymbioteCallbackHost` are absent from both lists deliberately: they
-// match on an ATTRIBUTE rather than a tag, so they already land only where they are needed.
+// `[style]`/`[class]` stay unclaimed as on a DOM element (see `SymbioteElement.style`). What still
+// matches is selected on an ATTRIBUTE an app writes: the two form accessors and
+// `SymbioteCallbackHost`.
 withholdFromRuntimeMatching(
   SYMBIOTE_ELEMENTS.filter(
     directive =>
-      directive !== TextInputElement &&
-      directive !== MultilineTextInputElement &&
-      directive !== SwitchElement &&
-      directive !== RefreshControlElement &&
       directive !== TextInputValueAccessor &&
       directive !== SwitchValueAccessor &&
-      directive !== SymbioteCallbackHost &&
-      directive !== SymbioteStyleHost,
+      directive !== SymbioteCallbackHost,
   ),
 );
 

package/src/index.ts

@@ -9,8 +9,8 @@
 // `@Component`s on the `view` and `text` SELECTORS — a second mechanism on the same tags
 // `SYMBIOTE_ELEMENTS` covers, kept for one stated reason their own header gives: "Declaring `style`
 // as a real Angular input prevents Angular's CSS style engine from decomposing RN `StyleProp`
-// arrays". `SymbioteStyleHost` does exactly that now, for every tag, at a directive's cost rather
-// than a component's.
+// arrays". A tag takes an array or press-state callback as `[styleProp]`, a plain property binding
+// with no instance behind it.
 //
 // An app loses nothing it cannot spell better: `@ViewChild('ref')` on a template reference returns
 // Angular's own `ElementRef<IHostInstance>`, whose `nativeElement` IS the engine host node — the same
@@ -146,10 +146,9 @@ export { setImageSourceResolver } from './components';
 //
 // They were removed on 2026-09-18 and put back the same hour. The reason to remove them is real: a
 // withheld tag directive (`./runtime-matching`) is a compile-time declaration and nothing else, so
-// what makes `<view [style]="[a, b]">` work at RUN time is `SymbioteStyleHost`, and what makes
-// `<view [onPress]="fn">` work at all is `SymbioteCallbackHost` claiming the name before
-// `setDomProperty` throws NG0306. Both ride this array. A narrow `imports: [ViewElement]` type-checks
-// and then fails on a device the first time the app writes an array style.
+// what makes `<view [onPress]="fn">` work at all is `SymbioteCallbackHost` claiming the name before
+// `setDomProperty` throws NG0306. It rides this array, so a narrow `imports: [ViewElement]`
+// type-checks and then fails on a device the first time the app binds an `on*` prop.
 //
 // WHAT PUTS THEM BACK is NG3004: `Unable to import directive ViewElement — the symbol is not
 // exported from index.d.ts`. ngtsc resolves every directive reachable through an imported array to an
@@ -198,7 +197,6 @@ export {
   CALLBACK_ATTRIBUTE_SELECTOR,
   SymbioteCallbackHost,
 } from './callback-host';
-export { STYLE_HOST_SELECTOR, SymbioteStyleHost } from './style-host';
 export type {
   IElementProps,
   IStickyHeaderElementProps,

package/src/primitives/shared.ts

@@ -298,7 +298,11 @@ export class SymbioteHostPropsDirective {
     // Only keys the node actually carries, so the vanished-key sweep below walks a handful rather
     // than the bag's whole declared shape.
     const next: Record<string, unknown> = {};
-    for (const [key, value] of Object.entries(props)) {
+    // `Object.keys` rather than `Object.entries`: `entries` allocates a two-element array per key
+    // before the loop starts, and this walk runs once per element instance. Measured on `-O` Hermes
+    // (`object-iteration-cost.itest.ts`), 0.19 us per node over a four-key bag.
+    for (const key of Object.keys(props)) {
+      const value = props[key];
       if (value !== undefined) next[key] = value;
       if (Object.is(pushed[key], value)) continue;
       this.renderer.setProperty(

package/src/renderer/index.ts

@@ -81,9 +81,23 @@ import {
   createCallbackWrapper,
   flushViewFor,
   isWrappableCallback,
+  markReadBackNode,
   type ICallbackWrapper,
 } from '../change-detection-flush';
 
+// The tags whose behavior reads the app's answer back inside the event's own turn - the three
+// behaviors `../change-detection-flush` names, plus the multiline spelling of the input. Marked at
+// creation so a flush finds their view lazily instead of a directive instance per element.
+const READ_BACK_TAGS: ReadonlySet<string> = new Set([
+  'text-input',
+  'text-input-multiline',
+  'switch',
+  'refresh-control',
+]);
+
+// The property binding an RN StyleProp travels as; see `SymbioteElement.style`.
+const STYLE_PROP_BINDING = 'styleProp';
+
 // The app callbacks an engine behavior READS BACK inside the same microtask turn, as an Angular
 // `(event)` binding — `valueChange` is handled in `listen` on its own, since it also needs the field
 // unwrapped. Zoneless change detection is a macrotask, so without a flush the behavior reads the
@@ -253,6 +267,13 @@ export class SymbioteRenderer implements Renderer2 {
   // free of a second guard.
   private pendingStyleNode: ISymbioteNode | undefined;
   private pendingStyle: Record<string, unknown> = {};
+  // A node with no standing style is matched against a published style key by key, as Angular hands
+  // the keys over, and builds nothing while they match. Rows sharing a style then skip the
+  // accumulator and the shallow compare's two key arrays (~320 B a `view` on create). The first
+  // mismatch materializes the accumulator from the keys matched so far.
+  private matchCandidate: Record<string, unknown> | undefined;
+  private matchCandidateSize = 0;
+  private readonly matchedKeys: string[] = [];
   private pendingClassNode: ISymbioteNode | undefined;
   private readonly releaseBeforeFlush: () => void;
 
@@ -303,10 +324,20 @@ export class SymbioteRenderer implements Renderer2 {
   private flushStyling(): void {
     const styled = this.pendingStyleNode;
     if (styled !== undefined) {
-      const style = this.pendingStyle;
       this.pendingStyleNode = undefined;
-      this.pendingStyle = {};
-      routeProp(styled, 'style', this.canonicalStyle(style));
+      const candidate = this.matchCandidate;
+      if (
+        candidate !== undefined &&
+        this.matchedKeys.length === this.matchCandidateSize
+      ) {
+        this.matchCandidate = undefined;
+        routeProp(styled, 'style', candidate);
+      } else {
+        this.materializeMatch();
+        const style = this.pendingStyle;
+        this.pendingStyle = {};
+        routeProp(styled, 'style', this.canonicalStyle(style));
+      }
     }
     const classed = this.pendingClassNode;
     if (classed !== undefined) {
@@ -362,6 +393,8 @@ export class SymbioteRenderer implements Renderer2 {
    * this simply stops sharing — it never stops being correct.
    */
   private readonly publishedStyles: Record<string, unknown>[] = [];
+  // Key count of each entry above, index for index: how a key-by-key match knows it is complete.
+  private readonly publishedSizes: number[] = [];
 
   /** A published object equal to this one, or this one — which then becomes the published copy. */
   private canonicalStyle(
@@ -373,26 +406,84 @@ export class SymbioteRenderer implements Renderer2 {
       if (at > 0) {
         this.publishedStyles.splice(at, 1);
         this.publishedStyles.unshift(known);
+        this.publishedSizes.unshift(this.publishedSizes.splice(at, 1)[0]);
       }
       return known;
     }
     this.publishedStyles.unshift(style);
-    if (this.publishedStyles.length > STYLE_CACHE) this.publishedStyles.pop();
+    this.publishedSizes.unshift(Object.keys(style).length);
+    if (this.publishedStyles.length > STYLE_CACHE) {
+      this.publishedStyles.pop();
+      this.publishedSizes.pop();
+    }
     return style;
   }
 
-  /** The accumulator for this node's style run, opening one (and closing any other) if needed. */
-  private openStyleRun(el: ISymbioteNode): Record<string, unknown> {
-    if (this.pendingStyleNode === el) return this.pendingStyle;
+  /** Open this node's style run (closing any other); a no-op when it is already the open one. */
+  private openRun(el: ISymbioteNode): void {
+    if (this.pendingStyleNode === el) return;
     this.flushStyling();
+    this.pendingStyleNode = el;
     // Seeded from what is STANDING, because Angular sends only the keys that changed — an update
     // that moves one key must not drop the rest.
     const current = getExplicitStyle(el);
-    this.pendingStyle = isRecord(current) ? { ...current } : {};
-    this.pendingStyleNode = el;
+    if (isRecord(current)) {
+      this.pendingStyle = { ...current };
+      return;
+    }
+    this.isChoosingCandidate = true;
+    this.matchedKeys.length = 0;
+  }
+
+  // The FIRST key picks the candidate: a row alternates styles (row, cell, cell, input), so the
+  // front entry is usually the neighbour's.
+  private isChoosingCandidate = false;
+
+  private chooseCandidate(key: string, value: unknown): void {
+    this.isChoosingCandidate = false;
+    if (value === undefined) return;
+    for (let at = 0; at < this.publishedStyles.length; at += 1) {
+      const known = this.publishedStyles[at];
+      if (!Object.is(known[key], value)) continue;
+      this.matchCandidate = known;
+      this.matchCandidateSize = this.publishedSizes[at] ?? 0;
+      return;
+    }
+  }
+
+  /** Stop matching: write the keys matched so far into the accumulator the run goes on with. */
+  private materializeMatch(): void {
+    this.isChoosingCandidate = false;
+    const candidate = this.matchCandidate;
+    if (candidate === undefined) return;
+    this.matchCandidate = undefined;
+    for (const key of this.matchedKeys) this.pendingStyle[key] = candidate[key];
+  }
+
+  /** The accumulator for this node's style run, opening one (and closing any other) if needed. */
+  private openStyleRun(el: ISymbioteNode): Record<string, unknown> {
+    this.openRun(el);
+    this.materializeMatch();
     return this.pendingStyle;
   }
 
+  private writeStyle(el: ISymbioteNode, key: string, value: unknown): void {
+    this.openRun(el);
+    if (this.isChoosingCandidate) this.chooseCandidate(key, value);
+    const candidate = this.matchCandidate;
+    if (
+      candidate !== undefined &&
+      value !== undefined &&
+      Object.is(candidate[key], value) &&
+      !this.matchedKeys.includes(key)
+    ) {
+      this.matchedKeys.push(key);
+      return;
+    }
+    this.materializeMatch();
+    this.pendingStyle[key] = value;
+  }
+
   createElement(name: string): IHostNode {
     // `name` is the component's host tag — a symbiote intrinsic (`view`,
     // `text`, …), a public ergonomic alias (`View`, `Text`), or a raw Fabric view
@@ -442,6 +533,7 @@ export class SymbioteRenderer implements Renderer2 {
     if (isDebug()) {
       dlog(`angular createElement ${name} -> ${descriptor.component}`);
     }
+    if (READ_BACK_TAGS.has(engineName)) markReadBackNode(node);
     return toPublicInstance(node);
   }
 
@@ -653,7 +745,7 @@ export class SymbioteRenderer implements Renderer2 {
     if (isSurface(el)) return;
     countAngular('rendererWrites');
     noteAngularStyleWrite(style);
-    this.openStyleRun(el)[style] = value;
+    this.writeStyle(el, style, value);
     this.surface.requestCommit();
   }
 
@@ -709,7 +801,11 @@ export class SymbioteRenderer implements Renderer2 {
       }
     }
     this.flushStyling();
-    routeProp(el, name, this.wrapCallback(el, name, value));
+    // `[styleProp]` IS `style`, carried as a plain property so an RN array or press-state callback
+    // reaches the engine whole instead of Angular's styling engine. Binding it beside `[style]` on one
+    // element makes the later write win - they are one prop.
+    const propName = name === STYLE_PROP_BINDING ? 'style' : name;
+    routeProp(el, propName, this.wrapCallback(el, propName, value));
     this.surface.requestCommit();
   }
 

package/src/runtime-matching.ts

@@ -27,15 +27,13 @@
 //                     something marks the view. That moved to `SymbioteRenderer.setProperty`, which
 //                     every path reaches whether a directive claimed the binding or not.
 //   the style shadow  `[style]` and `[class]` are no longer claimed by an input, so `ɵɵstyleMap` and
-//                     `ɵɵclassMap` resolve them per KEY again — ~7 000 renderer calls on the bench
-//                     row where the shadow made 4 000. That is a REGRESSION and it is accepted: the
-//                     bare bench arm already pays it and is still ~86 ms ahead of the matched one.
+//                     `ɵɵclassMap` resolve them per KEY, as on a DOM element. An RN array or
+//                     press-state callback travels as `[styleProp]` instead (`SymbioteElement.style`).
+//   the view flush    the read-back tags' synchronous re-check finds the node's view lazily
+//                     (`change-detection-flush.ts`) instead of injecting a `ChangeDetectorRef`.
 //
-// WHICH IS WHY THE LIST IS NOT "ALL OF THEM". A directive with real runtime behaviour must go on
-// matching, and here that is the `ValueChangeElement` chain (`text-input`, `switch` — they listen for
-// the engine's value event and register a view flush) and `refresh-control`. `SymbioteCallbackHost`
-// and the two form accessors match on ATTRIBUTES rather than on a tag, so they land only where they
-// are needed and are never withheld.
+// Every tag directive is withheld. `SymbioteCallbackHost` and the two form accessors match on
+// ATTRIBUTES rather than on a tag, so they land only where they are needed and are never withheld.
 
 /**
  * Take these directives out of Angular's runtime matcher, leaving ngtsc's view of them untouched.
@@ -51,30 +49,8 @@ export function withholdFromRuntimeMatching(types: readonly unknown[]): void {
     if (typeof definition !== 'object' || definition === null) continue;
     const selectors: unknown = Reflect.get(definition, 'selectors');
     if (!Array.isArray(selectors)) continue;
-    // Ivy holds a `CssSelectorList` — one array per alternative, whose first entry is the tag name
-    // when the alternative names one. Recorded before the emptying, because afterwards there is
-    // nothing to read and the guard below would have no subject.
-    for (const alternative of selectors)
-      if (Array.isArray(alternative)) {
-        const tag: unknown = alternative[0];
-        if (typeof tag === 'string' && tag.length > 0) withheldTags.add(tag);
-      }
     // Emptied in place rather than replaced: the def holds this array, and reading `ɵdir` under JIT
     // is what compiles the directive, so the object in hand is the one the matcher will walk.
     selectors.length = 0;
   }
 }
-
-/**
- * Every TAG that lost its directive, for the guard that keeps `SymbioteStyleHost` covering them.
- *
- * A withheld tag whose style is claimed by nothing sends an RN style ARRAY into Angular's styling
- * engine, which throws inside change detection — a device failure with no compile-time tell. So the
- * set is recorded here at the moment it is emptied rather than maintained as a second list, and
- * `style-host-covers-withheld-tags.test.ts` reads it.
- */
-const withheldTags = new Set<string>();
-
-export function tagsWithheldFromRuntimeMatching(): ReadonlySet<string> {
-  return withheldTags;
-}

package/build/angular/style-host.d.ts

@@ -1,11 +0,0 @@
-import { type OnChanges, type SimpleChanges } from '@angular/core';
-import * as i0 from "@angular/core";
-/** Exported for the guard, which derives the same set from the withheld directives' own selectors. */
-export declare const STYLE_HOST_SELECTOR: string;
-export declare class SymbioteStyleHost implements OnChanges {
-    private readonly renderer;
-    private readonly host;
-    ngOnChanges(changes: SimpleChanges): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<SymbioteStyleHost, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<SymbioteStyleHost, "view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view", never, { "style": { "alias": "style"; "required": false; }; "class": { "alias": "class"; "required": false; }; }, {}, never, never, true, never>;
-}

package/build/angular/style-host.js

@@ -1,86 +0,0 @@
-// The directive that claims `[style]` and `[class]` on the elements that bind them.
-//
-// IT IS A CORRECTNESS REQUIREMENT BEFORE IT IS AN OPTIMISATION, which is what separates it from
-// `callback-host.ts`. An RN `StyleProp` is allowed to be an ARRAY, and Angular's own styling engine
-// cannot represent one: `ɵɵstyleMap` decomposes the value key by key, so `applyStyling` takes each
-// array MEMBER as a style key and throws inside change detection. Device-diagnosed 2026-09-02 on
-// ImageBackground, and pinned ever since by `renderer/style-input.test.ts`.
-//
-// A declared input is what keeps the value away from that engine — `checkStylingMap` hands the whole
-// value to the input instead of walking it (`render3/instructions/styling.ts:259-288`). So when the
-// tag directives were withheld from runtime matching, the claim had to come from somewhere, or an
-// array style would throw on every screen that writes one.
-//
-// AND IT IS ALSO THE FASTER PATH, which is why `class` rides the same selector. Unclaimed, a style
-// object reaches the renderer once per KEY — measured at ~7 000 renderer calls on the thousand-row
-// bench row against 4 000 when an input claims it.
-//
-// MATCHED ON THE TAG, and the first spelling of this directive matched on `[style],[class]` instead
-// — which does not work, for a reason worth keeping because it is invisible from the outside.
-//
-// `[style]` IS NOT A PROPERTY BINDING. The compiler routes it to `ɵɵstyleMap`, a styling instruction,
-// and the name never lands in the `AttributeMarker.Bindings` run that `findAttrIndexInNode` walks
-// (upstream `node_selector_matcher.ts:240-282`, where `Classes` and `Styles` markers are SKIPPED
-// outright). So a directive selected on `[style]` never matches an element that binds one, and the
-// value goes to the styling engine exactly as if no directive existed. Measured: the AOT fixture in
-// `style-input-aot.test.ts` imports `SYMBIOTE_ELEMENTS`, carries this directive, and still threw
-// `Unsupported styling type: function`. `[onPress]` and every other `on*` name DO work that way,
-// which is why `callback-host.ts` can be attribute-matched and this one cannot.
-//
-// SO IT IS A TAG DIRECTIVE, and it is instantiated per element like the ones it replaces — including
-// on elements that bind no style at all, because a tag selector is the only one that can match. What
-// is bought is its SHAPE: two inputs and two injections against the withheld classes' 279 and three.
-//
-// MEASURED, AND SMALLER THAN THE IDEA PROMISED. On the JavaScriptCore ladder, withholding a directive
-// outright is worth ~70-91 ms over ten thousand elements (`WITHHOLDING it`, 7.0-9.1 us each) — but
-// the adapter cannot take that, because this directive has to stay. What it reads against a bare tag
-// AFTER the change is 58.2 / 58.8 / 71.0 ms, against `a directive at all` at 50.2 / 55.9 / 68.3 in
-// the same runs. Those two are the same number: a directive costs what a directive costs, thin or
-// fat, and nearly all of it is matching and instantiating rather than inputs or injections.
-//
-// So the change is worth the FAT-TO-THIN difference and not the whole crossing — the ladder's own
-// `279 inputs, not 1` (~19.9 ms) plus `the ChangeDetectorRef` (~10-31 ms). Recorded at that size
-// rather than at the one the plan was aimed at.
-//
-// NO `ChangeDetectorRef` HERE. A style write is an ordinary prop write and marks nothing; the view
-// marking belongs to the callback path and lives with it.
-//
-// THE FOUR TAGS THAT KEEP THEIR OWN DIRECTIVE ARE ABSENT from the selector — `text-input`,
-// `text-input-multiline`, `switch` and `refresh-control`. Their fat directive still matches and
-// already declares `style`, and two directives claiming one input both receive it and both forward
-// it, which is the `unchanged` double write this adapter has measured before.
-import { Directive, ElementRef, Renderer2, inject, } from '@angular/core';
-import * as i0 from "@angular/core";
-/** Exported for the guard, which derives the same set from the withheld directives' own selectors. */
-export const STYLE_HOST_SELECTOR = 'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
-    'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
-    'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
-    'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
-    'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view';
-export class SymbioteStyleHost {
-    constructor() {
-        this.renderer = inject(Renderer2);
-        this.host = inject(ElementRef);
-    }
-    ngOnChanges(changes) {
-        for (const name of Object.keys(changes))
-            this.renderer.setProperty(this.host.nativeElement, name, changes[name]?.currentValue);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteStyleHost, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SymbioteStyleHost, isStandalone: true, selector: "view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view", inputs: { style: "style", class: "class" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SymbioteStyleHost, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
-                        'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
-                        'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
-                        'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
-                        'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view',
-                    // Spelled out rather than referenced: ngtsc statically evaluates decorator metadata, and a
-                    // computed selector makes it report the class as not standalone — see `callback-host.ts`.
-                    inputs: ['style', 'class'],
-                    standalone: true,
-                }]
-        }] });
-//# sourceMappingURL=style-host.js.map

package/build/angular/style-host.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"style-host.js","sourceRoot":"","sources":["../../src/style-host.ts"],"names":[],"mappings":"AAAA,oFAAoF;AACpF,EAAE;AACF,gGAAgG;AAChG,oGAAoG;AACpG,mGAAmG;AACnG,iGAAiG;AACjG,4EAA4E;AAC5E,EAAE;AACF,qGAAqG;AACrG,oGAAoG;AACpG,kGAAkG;AAClG,2DAA2D;AAC3D,EAAE;AACF,mGAAmG;AACnG,mGAAmG;AACnG,mDAAmD;AACnD,EAAE;AACF,oGAAoG;AACpG,8FAA8F;AAC9F,EAAE;AACF,sGAAsG;AACtG,kGAAkG;AAClG,iGAAiG;AACjG,mGAAmG;AACnG,oGAAoG;AACpG,iGAAiG;AACjG,iGAAiG;AACjG,gFAAgF;AAChF,EAAE;AACF,qGAAqG;AACrG,qGAAqG;AACrG,qGAAqG;AACrG,EAAE;AACF,sGAAsG;AACtG,mGAAmG;AACnG,qGAAqG;AACrG,mGAAmG;AACnG,kGAAkG;AAClG,4FAA4F;AAC5F,EAAE;AACF,kGAAkG;AAClG,iGAAiG;AACjG,gDAAgD;AAChD,EAAE;AACF,mGAAmG;AACnG,0DAA0D;AAC1D,EAAE;AACF,2FAA2F;AAC3F,gGAAgG;AAChG,mGAAmG;AACnG,8EAA8E;AAE9E,OAAO,EACL,SAAS,EACT,UAAU,EACV,SAAS,EAGT,MAAM,GACP,MAAM,eAAe,CAAC;;AAEvB,sGAAsG;AACtG,MAAM,CAAC,MAAM,mBAAmB,GAC9B,8EAA8E;IAC9E,4FAA4F;IAC5F,0FAA0F;IAC1F,yFAAyF;IACzF,wEAAwE,CAAC;AAc3E,MAAM,OAAO,iBAAiB;IAZ9B;QAamB,aAAQ,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC;QAC7B,SAAI,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC;KAU5C;IARC,WAAW,CAAC,OAAsB;QAChC,KAAK,MAAM,IAAI,IAAI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC;YACrC,IAAI,CAAC,QAAQ,CAAC,WAAW,CACvB,IAAI,CAAC,IAAI,CAAC,aAAa,EACvB,IAAI,EACJ,OAAO,CAAC,IAAI,CAAC,EAAE,YAAY,CAC5B,CAAC;IACN,CAAC;8GAXU,iBAAiB;kGAAjB,iBAAiB;;2FAAjB,iBAAiB;kBAZ7B,SAAS;mBAAC;oBACT,QAAQ,EACN,8EAA8E;wBAC9E,4FAA4F;wBAC5F,0FAA0F;wBAC1F,yFAAyF;wBACzF,wEAAwE;oBAC1E,2FAA2F;oBAC3F,0FAA0F;oBAC1F,MAAM,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;oBAC1B,UAAU,EAAE,IAAI;iBACjB"}

package/src/style-host.ts

@@ -1,94 +0,0 @@
-// The directive that claims `[style]` and `[class]` on the elements that bind them.
-//
-// IT IS A CORRECTNESS REQUIREMENT BEFORE IT IS AN OPTIMISATION, which is what separates it from
-// `callback-host.ts`. An RN `StyleProp` is allowed to be an ARRAY, and Angular's own styling engine
-// cannot represent one: `ɵɵstyleMap` decomposes the value key by key, so `applyStyling` takes each
-// array MEMBER as a style key and throws inside change detection. Device-diagnosed 2026-09-02 on
-// ImageBackground, and pinned ever since by `renderer/style-input.test.ts`.
-//
-// A declared input is what keeps the value away from that engine — `checkStylingMap` hands the whole
-// value to the input instead of walking it (`render3/instructions/styling.ts:259-288`). So when the
-// tag directives were withheld from runtime matching, the claim had to come from somewhere, or an
-// array style would throw on every screen that writes one.
-//
-// AND IT IS ALSO THE FASTER PATH, which is why `class` rides the same selector. Unclaimed, a style
-// object reaches the renderer once per KEY — measured at ~7 000 renderer calls on the thousand-row
-// bench row against 4 000 when an input claims it.
-//
-// MATCHED ON THE TAG, and the first spelling of this directive matched on `[style],[class]` instead
-// — which does not work, for a reason worth keeping because it is invisible from the outside.
-//
-// `[style]` IS NOT A PROPERTY BINDING. The compiler routes it to `ɵɵstyleMap`, a styling instruction,
-// and the name never lands in the `AttributeMarker.Bindings` run that `findAttrIndexInNode` walks
-// (upstream `node_selector_matcher.ts:240-282`, where `Classes` and `Styles` markers are SKIPPED
-// outright). So a directive selected on `[style]` never matches an element that binds one, and the
-// value goes to the styling engine exactly as if no directive existed. Measured: the AOT fixture in
-// `style-input-aot.test.ts` imports `SYMBIOTE_ELEMENTS`, carries this directive, and still threw
-// `Unsupported styling type: function`. `[onPress]` and every other `on*` name DO work that way,
-// which is why `callback-host.ts` can be attribute-matched and this one cannot.
-//
-// SO IT IS A TAG DIRECTIVE, and it is instantiated per element like the ones it replaces — including
-// on elements that bind no style at all, because a tag selector is the only one that can match. What
-// is bought is its SHAPE: two inputs and two injections against the withheld classes' 279 and three.
-//
-// MEASURED, AND SMALLER THAN THE IDEA PROMISED. On the JavaScriptCore ladder, withholding a directive
-// outright is worth ~70-91 ms over ten thousand elements (`WITHHOLDING it`, 7.0-9.1 us each) — but
-// the adapter cannot take that, because this directive has to stay. What it reads against a bare tag
-// AFTER the change is 58.2 / 58.8 / 71.0 ms, against `a directive at all` at 50.2 / 55.9 / 68.3 in
-// the same runs. Those two are the same number: a directive costs what a directive costs, thin or
-// fat, and nearly all of it is matching and instantiating rather than inputs or injections.
-//
-// So the change is worth the FAT-TO-THIN difference and not the whole crossing — the ladder's own
-// `279 inputs, not 1` (~19.9 ms) plus `the ChangeDetectorRef` (~10-31 ms). Recorded at that size
-// rather than at the one the plan was aimed at.
-//
-// NO `ChangeDetectorRef` HERE. A style write is an ordinary prop write and marks nothing; the view
-// marking belongs to the callback path and lives with it.
-//
-// THE FOUR TAGS THAT KEEP THEIR OWN DIRECTIVE ARE ABSENT from the selector — `text-input`,
-// `text-input-multiline`, `switch` and `refresh-control`. Their fat directive still matches and
-// already declares `style`, and two directives claiming one input both receive it and both forward
-// it, which is the `unchanged` double write this adapter has measured before.
-
-import {
-  Directive,
-  ElementRef,
-  Renderer2,
-  type OnChanges,
-  type SimpleChanges,
-  inject,
-} from '@angular/core';
-
-/** Exported for the guard, which derives the same set from the withheld directives' own selectors. */
-export const STYLE_HOST_SELECTOR =
-  'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
-  'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
-  'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
-  'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
-  'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view';
-
-@Directive({
-  selector:
-    'view,symbiote-view,text,symbiote-text,image,symbiote-image,image-background,' +
-    'pressable,symbiote-pressable,button,symbiote-button,touchable-opacity,touchable-highlight,' +
-    'touchable-native-feedback,touchable-without-feedback,scroll-view,horizontal-scroll-view,' +
-    'scroll-content,horizontal-scroll-content,activity-indicator,activity-indicator-spinner,' +
-    'safe-area-view,modal,symbiote-modal,sticky-header,input-accessory-view',
-  // Spelled out rather than referenced: ngtsc statically evaluates decorator metadata, and a
-  // computed selector makes it report the class as not standalone — see `callback-host.ts`.
-  inputs: ['style', 'class'],
-  standalone: true,
-})
-export class SymbioteStyleHost implements OnChanges {
-  private readonly renderer = inject(Renderer2);
-  private readonly host = inject(ElementRef);
-
-  ngOnChanges(changes: SimpleChanges): void {
-    for (const name of Object.keys(changes))
-      this.renderer.setProperty(
-        this.host.nativeElement,
-        name,
-        changes[name]?.currentValue,
-      );
-  }
-}