@symbiote-native/angular 3.0.2 → 3.1.0

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,
-      );
-  }
-}