feat(26-05): synthesize inlined __rozieDisplay fn + delegating class method (gated)

- emitAngular appends a module-scope `function __rozieDisplay(v)` to the
  module-decls bucket AND a delegating class method `rozieDisplay(v) { return
  __rozieDisplay(v); }` to the class body, BOTH gated on tmplResult.hasDisplayWrap
- byte-equivalent algorithm to the runtime-package helper (null->'' / string
  passthrough / object->JSON.stringify(v,null,2) / else String(v))
- NO @rozie/runtime-angular import (package does not exist; convention forbids;
  spreadBinding test guard still green)
- non-wrapping components stay byte-identical to pre-phase (SPEC-3) — only the
  two wrapping fixtures (Modal/TodoList) carry the synthesis
- rebless target-angular suite for the wrapping cases (TodoList/Modal/TreeNode/
  model-sigil); update Uppy :accept double-read test to the wrapped form,
  matching React's landed accept={rozieDisplay(...)} cross-target behavior
- dist-parity rebless deferred to Plan 07 (cold-gate); cross-target match-*
  snapshots unaffected (curated fixtures do not exercise the wrap path)

Author: serpentblade

packages/targets/angular/fixtures/Modal.template.snap

@@ -1,7 +1,7 @@
 
 @if (open()) {
 <div class="modal-backdrop" #backdropEl (click)="_guardedHandler0($event)">
-  <div #dialogEl class="modal-dialog" role="dialog" aria-modal="true" [attr.aria-label]="title() || undefined" tabindex="-1">
+  <div #dialogEl class="modal-dialog" role="dialog" aria-modal="true" [attr.aria-label]="rozieDisplay(title() || undefined)" tabindex="-1">
     @if (title() || (headerTpl ?? templates()?.['header'])) {
 <header>
       @if ((headerTpl ?? templates()?.['header'])) {

packages/targets/angular/fixtures/Modal.ts.snap

@@ -17,6 +17,13 @@ interface FooterCtx {
   close: any;
 }
 
+function __rozieDisplay(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') return JSON.stringify(v, null, 2);
+  return String(v);
+}
+
 @Component({
   selector: 'rozie-modal',
   standalone: true,
@@ -25,7 +32,7 @@ interface FooterCtx {
 
     @if (open()) {
     <div class="modal-backdrop" #backdropEl (click)="_guardedHandler0($event)">
-      <div #dialogEl class="modal-dialog" role="dialog" aria-modal="true" [attr.aria-label]="title() || undefined" tabindex="-1">
+      <div #dialogEl class="modal-dialog" role="dialog" aria-modal="true" [attr.aria-label]="rozieDisplay(title() || undefined)" tabindex="-1">
         @if (title() || (headerTpl ?? templates()?.['header'])) {
     <header>
           @if ((headerTpl ?? templates()?.['header'])) {
@@ -174,6 +181,8 @@ export class Modal {
     if ($event.target !== $event.currentTarget) return;
     this.closeOnBackdrop() && this._close();
   };
+
+  rozieDisplay(v: unknown): string { return __rozieDisplay(v); }
 }
 
 export default Modal;

packages/targets/angular/fixtures/TodoList.template.snap

@@ -6,7 +6,7 @@
 } @else {
 
       
-      <h3>{{ title() }} ({{ remaining() }} remaining)</h3>
+      <h3>{{ title() }} ({{ rozieDisplay(remaining()) }} remaining)</h3>
     
 }
   </header>
@@ -25,7 +25,7 @@
 <ng-container *ngTemplateOutlet="(defaultTpl ?? templates()?.['defaultSlot']); context: _defaultSlot_ctx_3(item)" />
 } @else {
 
-        <label><input type="checkbox" [checked]="item.done" (change)="toggle(item.id)" /><span>{{ item.text }}</span></label>
+        <label><input type="checkbox" [checked]="item.done" (change)="toggle(item.id)" /><span>{{ rozieDisplay(item.text) }}</span></label>
         <button aria-label="Remove" (click)="removeItem(item.id)">×</button>
 
 }

packages/targets/angular/fixtures/TodoList.ts.snap

@@ -17,6 +17,13 @@ interface DefaultCtx {
 
 interface EmptyCtx {}
 
+function __rozieDisplay(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') return JSON.stringify(v, null, 2);
+  return String(v);
+}
+
 @Component({
   selector: 'rozie-todo-list',
   standalone: true,
@@ -30,7 +37,7 @@ interface EmptyCtx {}
     } @else {
 
           
-          <h3>{{ title() }} ({{ remaining() }} remaining)</h3>
+          <h3>{{ title() }} ({{ rozieDisplay(remaining()) }} remaining)</h3>
         
     }
       </header>
@@ -49,7 +56,7 @@ interface EmptyCtx {}
     <ng-container *ngTemplateOutlet="(defaultTpl ?? templates()?.['defaultSlot']); context: _defaultSlot_ctx_3(item)" />
     } @else {
 
-            <label><input type="checkbox" [checked]="item.done" (change)="_toggle(item.id)" /><span>{{ item.text }}</span></label>
+            <label><input type="checkbox" [checked]="item.done" (change)="_toggle(item.id)" /><span>{{ rozieDisplay(item.text) }}</span></label>
             <button aria-label="Remove" (click)="removeItem(item.id)">×</button>
           
     }
@@ -285,6 +292,8 @@ export class TodoList {
   };
 
   private _defaultSlot_ctx_3 = (item: any) => ({ $implicit: { item: item, toggle: () => this._toggle(item.id), remove: () => this.removeItem(item.id) }, item: item, toggle: () => this._toggle(item.id), remove: () => this.removeItem(item.id) });
+
+  rozieDisplay(v: unknown): string { return __rozieDisplay(v); }
 }
 
 export default TodoList;

packages/targets/angular/fixtures/composition/TreeNode.angular.ts.snap

@@ -1,13 +1,20 @@
 import { Component, DestroyRef, ElementRef, Renderer2, ViewEncapsulation, afterRenderEffect, effect, forwardRef, inject, viewChild } from '@angular/core';
 
+function __rozieDisplay(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') return JSON.stringify(v, null, 2);
+  return String(v);
+}
+
 @Component({
   selector: 'rozie-tree-node',
   standalone: true,
   imports: [forwardRef(() => TreeNode)],
   template: `
 
       <li #rozieSpread_0 #rozieListenersTarget_1>
-        <span>{{ $props.label }}</span>
+        <span>{{ rozieDisplay($props.label) }}</span>
         <rozie-tree-node [node]="$props.children"></rozie-tree-node>
       </li>
 
@@ -139,6 +146,8 @@ export class TreeNode {
       });
     }
   });
+
+  rozieDisplay(v: unknown): string { return __rozieDisplay(v); }
 }
 
 export default TreeNode;

packages/targets/angular/src/__tests__/template-double-read-accessor.test.ts

@@ -93,8 +93,13 @@ describe('Angular template double-read accessor — Uppy :accept', () => {
     const { code } = emitAngular(ir, { filename, source: src });
     const template = templateOf(code);
 
-    // Attribute now binds to the getter, not an inline ternary.
-    expect(template).toContain('[accept]="__accept"');
+    // Attribute now binds to the getter, not an inline ternary. Phase 26
+    // (SPEC-4): `accept` is an Array-typed (`any` element) ternary value, not
+    // provably primitive, so the binding additionally wraps the getter read in
+    // the synthesized `rozieDisplay` class method — matching React's landed
+    // `accept={rozieDisplay(...)}` cross-target behavior. The double-read
+    // getter hoist (`__accept`) is unaffected; the wrap composes over it.
+    expect(template).toContain('[accept]="rozieDisplay(__accept)"');
 
     // The getter exists, reads the signal exactly once into a local, and
     // performs the guard-and-use against the narrowed local.

packages/targets/angular/src/emitAngular.ts

@@ -158,6 +158,49 @@ export interface EmitAngularResult {
   diagnostics: Diagnostic[];
 }
 
+/**
+ * Phase 26 (SPEC-1/SPEC-2/SPEC-4, D-01/D-02 via RESEARCH Pitfall 4) — the
+ * INLINED, module-scope `rozieDisplay` helper for the Angular target.
+ *
+ * There is NO `@rozie/runtime-angular` package and project convention forbids
+ * one (`emitAngular.ts` header + `collectAngularImports`; `spreadBinding.test.ts`
+ * asserts `not.toContain('@rozie/runtime-angular')`). So unlike the other four
+ * non-Vue targets — which import `rozieDisplay` from their `@rozie/runtime-*`
+ * package — Angular emits the helper body verbatim at module scope.
+ *
+ * The body is algorithmically byte-equivalent to the runtime-package helper
+ * (`packages/runtime/{react,solid,svelte,lit}/src/rozieDisplay.ts`): null/
+ * undefined → '', string passthrough, object (incl. arrays) → 2-space JSON,
+ * else `String(v)`.
+ *
+ * Angular templates cannot call a module-scope free function (AOT resolves
+ * interpolation/binding identifiers against the COMPONENT instance), so the
+ * template never calls `__rozieDisplay` directly — it calls the delegating
+ * CLASS METHOD synthesized in `DISPLAY_CLASS_METHOD`, which forwards to this fn.
+ *
+ * Both are emitted ONLY when at least one interpolation actually wrapped
+ * (`tmplResult.hasDisplayWrap`), keeping non-wrapping components byte-identical
+ * to pre-phase (SPEC-3).
+ */
+const INLINE_DISPLAY_FN = [
+  'function __rozieDisplay(v: unknown): string {',
+  "  if (v == null) return '';",
+  "  if (typeof v === 'string') return v;",
+  "  if (typeof v === 'object') return JSON.stringify(v, null, 2);",
+  '  return String(v);',
+  '}',
+].join('\n');
+
+/**
+ * Phase 26 (D-02) — the delegating class method synthesized into the component
+ * body (via the `allFieldInjections` / classBodyParts mechanism, the same path
+ * the `$expose` methods + listener field initializers use). The template calls
+ * `rozieDisplay(expr)` against `this`; this method forwards to the inlined
+ * module-scope `__rozieDisplay`. Gated on `tmplResult.hasDisplayWrap`.
+ */
+const DISPLAY_CLASS_METHOD =
+  'rozieDisplay(v: unknown): string { return __rozieDisplay(v); }';
+
 export function emitAngular(
   ir: IRComponent,
   opts: EmitAngularOptions = {},
@@ -435,6 +478,12 @@ export function emitAngular(
     // as component members so Angular's `strictTemplates` resolves them
     // against the class instead of failing TS2339.
     ...tmplResult.usedGlobals.map((g) => `protected readonly ${g} = ${g};`),
+    // Phase 26 (D-02) — the delegating `rozieDisplay` class method, synthesized
+    // ONLY when an interpolation wrapped. The template calls it against `this`;
+    // it forwards to the inlined module-scope `__rozieDisplay` (emitted below
+    // via the interfaceDecls bucket). Both gated on the same flag so a
+    // non-wrapping component stays byte-identical to pre-phase (SPEC-3).
+    ...(tmplResult.hasDisplayWrap ? [DISPLAY_CLASS_METHOD] : []),
   ];
 
   // Find the constructor block and splice the listener effects + renderer
@@ -508,9 +557,19 @@ export function emitAngular(
       ? componentImportsLines.join('\n') + '\n'
       : '';
 
+  // Phase 26 (D-01-correction/D-02) — when any interpolation wrapped, append the
+  // inlined module-scope `function __rozieDisplay(v)` to the module-scope decls
+  // bucket (rendered above the @Component class by the shell). NO
+  // `@rozie/runtime-angular` import is emitted (the package does not exist;
+  // convention forbids it). When nothing wrapped, the bucket is unchanged so the
+  // emitted file is byte-identical to pre-phase (SPEC-3).
+  const moduleDecls = tmplResult.hasDisplayWrap
+    ? [...scriptResult.interfaceDecls, INLINE_DISPLAY_FN]
+    : scriptResult.interfaceDecls;
+
   const { ms, scriptOutputOffset, scriptMap: shellScriptMap, userCodeLineOffset } = buildShell({
     importLines: imports.render(),
-    interfaceDecls: scriptResult.interfaceDecls,
+    interfaceDecls: moduleDecls,
     decorator,
     componentName: ir.name,
     classBody,

packages/targets/angular/tests/__snapshots__/model-sigil.test.ts.snap

@@ -4,12 +4,19 @@ exports[`Angular $model producer-side two-way-write sigil > emitted model fixtur
 "import { Component, DestroyRef, ElementRef, Renderer2, ViewEncapsulation, afterRenderEffect, effect, forwardRef, inject, model, signal, viewChild } from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 
+function __rozieDisplay(v: unknown): string {
+  if (v == null) return '';
+  if (typeof v === 'string') return v;
+  if (typeof v === 'object') return JSON.stringify(v, null, 2);
+  return String(v);
+}
+
 @Component({
   selector: 'rozie-model-sigil',
   standalone: true,
   template: \`
 
-      <button [title]="__title" #rozieSpread_0 (click)="value.set(value() + 1), __rozieCvaOnChange(value() + 1)" #rozieListenersTarget_1>{{ value() }}</button>
+      <button [title]="rozieDisplay(__title)" #rozieSpread_0 (click)="value.set(value() + 1), __rozieCvaOnChange(value() + 1)" #rozieListenersTarget_1>{{ value() }}</button>
 
   \`,
   providers: [
@@ -201,6 +208,8 @@ export class ModelSigil {
       });
     }
   });
+
+  rozieDisplay(v: unknown): string { return __rozieDisplay(v); }
 }
 
 export default ModelSigil;