@ng-annotate/angular 0.2.1 → 0.2.3

package/dist/fesm2022/ng-annotate-angular.mjs

@@ -0,0 +1,702 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, NgZone, ChangeDetectorRef, HostListener, ViewChild, ChangeDetectionStrategy, Component, isDevMode, provideAppInitializer, ApplicationRef, EnvironmentInjector, createComponent, NgModule, makeEnvironmentProviders } from '@angular/core';
+import { BehaviorSubject } from 'rxjs';
+import { JsonPipe } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+
+const DOM_SNAPSHOT_MAX = 5000;
+class InspectorService {
+    getComponentContext(element) {
+        const component = this.findNearestComponent(element);
+        if (!component)
+            return null;
+        const componentName = component.constructor.name;
+        const { component: componentFilePath, template: templateFilePath } = this.resolveFilePaths(componentName);
+        const selector = this.getSelector(component);
+        const inputs = this.getInputs(component);
+        const domSnapshot = this.snapshot(element);
+        const componentTreePath = this.buildTreePath(element);
+        return {
+            componentName,
+            componentFilePath,
+            ...(templateFilePath ? { templateFilePath } : {}),
+            selector,
+            inputs,
+            domSnapshot,
+            componentTreePath,
+        };
+    }
+    findNearestComponent(element) {
+        let current = element;
+        while (current) {
+            try {
+                const comp = ng.getComponent(current);
+                if (comp)
+                    return comp;
+            }
+            catch {
+                // ignore
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+    getSelector(component) {
+        try {
+            const cmp = component.constructor.ɵcmp;
+            if (!cmp?.selectors?.length)
+                return 'unknown-selector';
+            const first = cmp.selectors[0];
+            if (!first.length)
+                return 'unknown-selector';
+            // Element selector: [['app-foo']]
+            // Attribute selector: [['', 'appFoo', '']]
+            if (first[0] === '') {
+                // Attribute selector — find non-empty entries
+                const attrParts = [];
+                for (let i = 1; i < first.length; i += 2) {
+                    if (typeof first[i] === 'string' && first[i]) {
+                        attrParts.push(`[${String(first[i])}]`);
+                    }
+                }
+                return attrParts.join('') || 'unknown-selector';
+            }
+            return String(first[0]);
+        }
+        catch {
+            return 'unknown-selector';
+        }
+    }
+    getInputs(component) {
+        try {
+            const cmp = component.constructor.ɵcmp;
+            if (!cmp?.inputs)
+                return {};
+            const result = {};
+            for (const [propName] of Object.entries(cmp.inputs)) {
+                if (typeof propName === 'symbol')
+                    continue;
+                if (propName.startsWith('ɵ'))
+                    continue;
+                result[propName] = component[propName];
+            }
+            return result;
+        }
+        catch {
+            return {};
+        }
+    }
+    buildTreePath(element) {
+        const path = [];
+        let current = element.parentElement;
+        while (current) {
+            try {
+                const comp = ng.getComponent(current);
+                if (comp) {
+                    path.unshift(comp.constructor.name);
+                }
+            }
+            catch {
+                // ignore
+            }
+            current = current.parentElement;
+        }
+        return path;
+    }
+    snapshot(element) {
+        const html = element.outerHTML;
+        if (html.length <= DOM_SNAPSHOT_MAX)
+            return html;
+        return html.slice(0, DOM_SNAPSHOT_MAX) + '<!-- truncated -->';
+    }
+    resolveFilePaths(componentName) {
+        try {
+            const manifest = window
+                .__NG_ANNOTATE_MANIFEST__;
+            const entry = manifest?.[componentName];
+            if (entry)
+                return entry;
+        }
+        catch {
+            // ignore
+        }
+        return { component: `(unresolved: ${componentName})` };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InspectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InspectorService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: InspectorService, decorators: [{
+            type: Injectable
+        }] });
+
+class BridgeService {
+    session$ = new BehaviorSubject(null);
+    annotations$ = new BehaviorSubject([]);
+    connected$ = new BehaviorSubject(false);
+    zone = inject(NgZone);
+    ws = null;
+    reconnectTimer = null;
+    init() {
+        this.connect();
+    }
+    connect() {
+        const wsUrl = `ws://${location.host}/__annotate`;
+        this.ws = new WebSocket(wsUrl);
+        this.ws.onopen = () => {
+            this.zone.run(() => {
+                this.connected$.next(true);
+            });
+        };
+        this.ws.onmessage = (event) => {
+            this.zone.run(() => {
+                try {
+                    const data = JSON.parse(event.data);
+                    if (data.type === 'session:created') {
+                        this.session$.next(data.session);
+                    }
+                    else if (data.type === 'annotations:sync') {
+                        this.annotations$.next(data.annotations);
+                    }
+                    else if (data.type === 'annotation:created') {
+                        const annotation = data.annotation;
+                        const current = this.annotations$.getValue();
+                        this.annotations$.next([...current, annotation]);
+                    }
+                }
+                catch {
+                    // ignore malformed messages
+                }
+            });
+        };
+        this.ws.onclose = () => {
+            this.zone.run(() => {
+                this.connected$.next(false);
+                this.reconnectTimer = setTimeout(() => { this.connect(); }, 3000);
+            });
+        };
+        this.ws.onerror = (event) => {
+            console.warn('[ng-annotate] WebSocket error', event);
+        };
+    }
+    createAnnotation(payload) {
+        this.send({ type: 'annotation:create', payload });
+    }
+    replyToAnnotation(id, message) {
+        this.send({ type: 'annotation:reply', id, message });
+    }
+    deleteAnnotation(id) {
+        this.send({ type: 'annotation:delete', id });
+    }
+    send(msg) {
+        if (this.ws?.readyState === WebSocket.OPEN) {
+            this.ws.send(JSON.stringify(msg));
+        }
+    }
+    ngOnDestroy() {
+        if (this.reconnectTimer !== null) {
+            clearTimeout(this.reconnectTimer);
+            this.reconnectTimer = null;
+        }
+        this.ws?.close();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BridgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BridgeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: BridgeService, decorators: [{
+            type: Injectable
+        }] });
+
+class OverlayComponent {
+    textArea;
+    mode = 'hidden';
+    hoveredContext = null;
+    highlightRect = null;
+    selectedContext = null;
+    annotationText = '';
+    selectionText = '';
+    threadAnnotation = null;
+    replyText = '';
+    badges = [];
+    inspector = inject(InspectorService);
+    bridge = inject(BridgeService);
+    cdr = inject(ChangeDetectorRef);
+    ngOnInit() {
+        this.bridge.annotations$.subscribe((annotations) => {
+            this.updateBadges(annotations);
+            this.cdr.markForCheck();
+        });
+    }
+    toggleInspect(event) {
+        event?.preventDefault();
+        if (this.mode === 'hidden')
+            this.mode = 'inspect';
+        else if (this.mode === 'inspect')
+            this.mode = 'hidden';
+        else if (this.mode === 'annotate')
+            this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    onEscape() {
+        if (this.mode === 'annotate')
+            this.mode = 'inspect';
+        else if (this.mode === 'inspect')
+            this.mode = 'hidden';
+        else if (this.mode === 'thread')
+            this.mode = 'hidden';
+        this.cdr.markForCheck();
+    }
+    onScrollOrResize() {
+        if (this.badges.length > 0) {
+            this.refreshBadgePositions();
+            this.cdr.markForCheck();
+        }
+    }
+    onMouseMove(event) {
+        if (this.mode !== 'inspect')
+            return;
+        const target = event.target;
+        if (target.closest('nga-overlay'))
+            return;
+        const context = this.inspector.getComponentContext(target);
+        this.hoveredContext = context;
+        if (context) {
+            const rect = target.getBoundingClientRect();
+            this.highlightRect = {
+                top: `${rect.top.toString()}px`,
+                left: `${rect.left.toString()}px`,
+                width: `${rect.width.toString()}px`,
+                height: `${rect.height.toString()}px`,
+            };
+        }
+        else {
+            this.highlightRect = null;
+        }
+        this.cdr.markForCheck();
+    }
+    onClick(event) {
+        if (this.mode !== 'inspect')
+            return;
+        const target = event.target;
+        if (target.closest('nga-overlay'))
+            return;
+        const context = this.inspector.getComponentContext(target);
+        if (!context)
+            return;
+        event.preventDefault();
+        event.stopPropagation();
+        this.selectedContext = context;
+        this.annotationText = '';
+        this.selectionText = window.getSelection()?.toString() ?? '';
+        this.mode = 'annotate';
+        this.cdr.markForCheck();
+        setTimeout(() => { this.textArea?.nativeElement.focus(); }, 0);
+    }
+    submit() {
+        if (!this.selectedContext || !this.annotationText.trim())
+            return;
+        this.bridge.createAnnotation({
+            ...this.selectedContext,
+            annotationText: this.annotationText.trim(),
+            selectionText: this.selectionText || undefined,
+        });
+        this.selectedContext = null;
+        this.annotationText = '';
+        this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    cancel() {
+        this.mode = 'inspect';
+        this.cdr.markForCheck();
+    }
+    openThread(annotation) {
+        this.threadAnnotation = annotation;
+        this.mode = 'thread';
+        this.cdr.markForCheck();
+    }
+    closeThread() {
+        this.threadAnnotation = null;
+        this.mode = 'hidden';
+        this.cdr.markForCheck();
+    }
+    sendReply() {
+        if (!this.threadAnnotation || !this.replyText.trim())
+            return;
+        this.bridge.replyToAnnotation(this.threadAnnotation.id, this.replyText.trim());
+        this.replyText = '';
+        this.cdr.markForCheck();
+    }
+    inputEntries() {
+        if (!this.selectedContext)
+            return [];
+        return Object.entries(this.selectedContext.inputs)
+            .slice(0, 5)
+            .map(([key, value]) => ({ key, value }));
+    }
+    updateBadges(annotations) {
+        this.badges = annotations
+            .map((annotation) => {
+            const el = this.findComponentElement(annotation.componentName, annotation.selector);
+            if (!el)
+                return null;
+            const rect = el.getBoundingClientRect();
+            return {
+                annotation,
+                top: `${rect.top.toString()}px`,
+                left: `${(rect.left + rect.width - 12).toString()}px`,
+                icon: this.badgeIcon(annotation.status),
+                label: `${annotation.componentName}: ${annotation.annotationText.slice(0, 40)}`,
+            };
+        })
+            .filter((b) => b !== null);
+    }
+    refreshBadgePositions() {
+        this.badges = this.badges.map((badge) => {
+            const el = this.findComponentElement(badge.annotation.componentName, badge.annotation.selector);
+            if (!el)
+                return badge;
+            const rect = el.getBoundingClientRect();
+            return {
+                ...badge,
+                top: `${rect.top.toString()}px`,
+                left: `${(rect.left + rect.width - 12).toString()}px`,
+            };
+        });
+    }
+    findComponentElement(componentName, selector) {
+        const bySelector = document.querySelector(selector);
+        if (bySelector)
+            return bySelector;
+        const all = document.querySelectorAll('*');
+        for (const el of Array.from(all)) {
+            try {
+                const comp = window
+                    .ng;
+                if (comp?.getComponent(el)?.constructor.name === componentName)
+                    return el;
+            }
+            catch {
+                // ignore
+            }
+        }
+        return null;
+    }
+    badgeIcon(status) {
+        const icons = {
+            pending: '●',
+            acknowledged: '◐',
+            resolved: '✓',
+            dismissed: '✕',
+        };
+        return icons[status];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: OverlayComponent, isStandalone: true, selector: "nga-overlay", host: { listeners: { "document:keydown.alt.shift.a": "toggleInspect($event)", "document:keydown.escape": "onEscape()", "window:scroll": "onScrollOrResize()", "window:resize": "onScrollOrResize()", "document:mousemove": "onMouseMove($event)", "document:click": "onClick($event)" } }, viewQueries: [{ propertyName: "textArea", first: true, predicate: ["textArea"], descendants: true }], ngImport: i0, template: `
+    <!-- Keyboard hint -->
+    @if (mode === 'hidden') {
+      <div class="nga-keyboard-hint">
+        <kbd>Alt+Shift+A</kbd> to annotate
+      </div>
+    }
+    @if (mode === 'inspect') {
+      <div class="nga-keyboard-hint">
+        Click a component &nbsp; <kbd>Esc</kbd> to cancel
+      </div>
+    }
+
+    <!-- Inspect highlight rect -->
+    @if (mode === 'inspect' && hoveredContext !== null && highlightRect !== null) {
+      <div
+        class="nga-highlight-rect"
+        [style.top]="highlightRect.top"
+        [style.left]="highlightRect.left"
+        [style.width]="highlightRect.width"
+        [style.height]="highlightRect.height"
+      >
+        <span class="nga-component-label">{{ hoveredContext.componentName }}</span>
+      </div>
+    }
+
+    <!-- Annotate panel -->
+    @if (mode === 'annotate' && selectedContext !== null) {
+      <div class="nga-annotate-panel">
+        <h3 class="nga-panel-title">{{ selectedContext.componentName }}</h3>
+
+        @if (inputEntries().length > 0) {
+          <div class="nga-inputs">
+            @for (entry of inputEntries(); track entry.key) {
+              <div class="nga-input-row">
+                <span class="nga-input-key">{{ entry.key }}:</span>
+                <span class="nga-input-val">{{ entry.value | json }}</span>
+              </div>
+            }
+          </div>
+        }
+
+        @if (selectionText) {
+          <div class="nga-selection">
+            <em>"{{ selectionText }}"</em>
+          </div>
+        }
+
+        <textarea
+          #textArea
+          class="nga-textarea"
+          [(ngModel)]="annotationText"
+          placeholder="Describe the change..."
+          rows="4"
+        ></textarea>
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="submit()" [disabled]="annotationText.trim() === ''">
+            Submit
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="cancel()">Cancel</button>
+        </div>
+      </div>
+    }
+
+    <!-- Thread panel -->
+    @if (mode === 'thread' && threadAnnotation !== null) {
+      <div class="nga-thread-panel">
+        <h3 class="nga-panel-title">{{ threadAnnotation.componentName }}</h3>
+
+        <div class="nga-replies">
+          @for (reply of threadAnnotation.replies; track reply.message) {
+            <div class="nga-reply">
+              <span class="nga-reply-author nga-reply-author--{{ reply.author }}">{{ reply.author }}</span>
+              <span class="nga-reply-text">{{ reply.message }}</span>
+            </div>
+          }
+        </div>
+
+        <input
+          class="nga-reply-input"
+          type="text"
+          [(ngModel)]="replyText"
+          placeholder="Reply..."
+          (keydown.enter)="sendReply()"
+        />
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="sendReply()" [disabled]="replyText.trim() === ''">
+            Send
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="closeThread()">Close</button>
+        </div>
+      </div>
+    }
+
+    <!-- Annotation badges -->
+    @for (badge of badges; track badge.annotation.id) {
+      <div
+        class="nga-badge nga-badge--{{ badge.annotation.status }}"
+        [style.top]="badge.top"
+        [style.left]="badge.left"
+        (click)="openThread(badge.annotation)"
+        [title]="badge.label"
+      >
+        {{ badge.icon }}
+      </div>
+    }
+  `, isInline: true, styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.nga-highlight-rect{position:fixed;border:2px solid #3b82f6;background:#3b82f61a;pointer-events:none;transition:top .05s,left .05s,width .05s,height .05s}.nga-component-label{position:absolute;top:-22px;left:0;background:#1e293b;color:#f8fafc;font-family:monospace;font-size:11px;padding:2px 6px;border-radius:3px;white-space:nowrap}.nga-annotate-panel,.nga-thread-panel{pointer-events:all;position:fixed;right:16px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 24px #00000026;padding:16px;min-width:320px;max-width:400px}.nga-panel-title{margin:0 0 12px;font-size:14px;font-weight:600;color:#1e293b;font-family:monospace}.nga-inputs{margin-bottom:10px}.nga-input-row{display:flex;gap:8px;font-size:12px;font-family:monospace;margin-bottom:4px}.nga-input-key{color:#64748b;min-width:80px}.nga-input-val{color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nga-selection{font-size:12px;color:#475569;margin-bottom:8px;font-style:italic}.nga-textarea,.nga-reply-input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:4px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;margin-bottom:10px}.nga-textarea:focus,.nga-reply-input:focus{outline:none;border-color:#3b82f6}.nga-actions{display:flex;gap:8px}.nga-btn{padding:6px 14px;border-radius:4px;font-size:13px;cursor:pointer;border:none;transition:opacity .15s}.nga-btn:disabled{opacity:.4;cursor:not-allowed}.nga-btn-submit{background:#3b82f6;color:#fff}.nga-btn-cancel{background:#f1f5f9;color:#475569}.nga-replies{max-height:200px;overflow-y:auto;margin-bottom:10px}.nga-reply{display:flex;gap:8px;margin-bottom:8px;font-size:13px}.nga-reply-author{font-weight:600;min-width:48px}.nga-reply-author--agent{color:#7c3aed}.nga-reply-author--user{color:#2563eb}.nga-badge{pointer-events:all;position:fixed;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transform:translate(-50%,-50%)}.nga-badge--pending{background:#3b82f6;color:#fff}.nga-badge--acknowledged{background:#f59e0b;color:#fff}.nga-badge--resolved{background:#22c55e;color:#fff}.nga-badge--dismissed{background:#94a3b8;color:#fff}.nga-keyboard-hint{pointer-events:none;position:fixed;bottom:16px;right:16px;background:#0f172ab3;color:#f8fafc;font-size:12px;padding:6px 10px;border-radius:6px}.nga-keyboard-hint kbd{background:#ffffff26;border-radius:3px;padding:1px 5px;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: OverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'nga-overlay', changeDetection: ChangeDetectionStrategy.OnPush, imports: [JsonPipe, FormsModule], template: `
+    <!-- Keyboard hint -->
+    @if (mode === 'hidden') {
+      <div class="nga-keyboard-hint">
+        <kbd>Alt+Shift+A</kbd> to annotate
+      </div>
+    }
+    @if (mode === 'inspect') {
+      <div class="nga-keyboard-hint">
+        Click a component &nbsp; <kbd>Esc</kbd> to cancel
+      </div>
+    }
+
+    <!-- Inspect highlight rect -->
+    @if (mode === 'inspect' && hoveredContext !== null && highlightRect !== null) {
+      <div
+        class="nga-highlight-rect"
+        [style.top]="highlightRect.top"
+        [style.left]="highlightRect.left"
+        [style.width]="highlightRect.width"
+        [style.height]="highlightRect.height"
+      >
+        <span class="nga-component-label">{{ hoveredContext.componentName }}</span>
+      </div>
+    }
+
+    <!-- Annotate panel -->
+    @if (mode === 'annotate' && selectedContext !== null) {
+      <div class="nga-annotate-panel">
+        <h3 class="nga-panel-title">{{ selectedContext.componentName }}</h3>
+
+        @if (inputEntries().length > 0) {
+          <div class="nga-inputs">
+            @for (entry of inputEntries(); track entry.key) {
+              <div class="nga-input-row">
+                <span class="nga-input-key">{{ entry.key }}:</span>
+                <span class="nga-input-val">{{ entry.value | json }}</span>
+              </div>
+            }
+          </div>
+        }
+
+        @if (selectionText) {
+          <div class="nga-selection">
+            <em>"{{ selectionText }}"</em>
+          </div>
+        }
+
+        <textarea
+          #textArea
+          class="nga-textarea"
+          [(ngModel)]="annotationText"
+          placeholder="Describe the change..."
+          rows="4"
+        ></textarea>
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="submit()" [disabled]="annotationText.trim() === ''">
+            Submit
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="cancel()">Cancel</button>
+        </div>
+      </div>
+    }
+
+    <!-- Thread panel -->
+    @if (mode === 'thread' && threadAnnotation !== null) {
+      <div class="nga-thread-panel">
+        <h3 class="nga-panel-title">{{ threadAnnotation.componentName }}</h3>
+
+        <div class="nga-replies">
+          @for (reply of threadAnnotation.replies; track reply.message) {
+            <div class="nga-reply">
+              <span class="nga-reply-author nga-reply-author--{{ reply.author }}">{{ reply.author }}</span>
+              <span class="nga-reply-text">{{ reply.message }}</span>
+            </div>
+          }
+        </div>
+
+        <input
+          class="nga-reply-input"
+          type="text"
+          [(ngModel)]="replyText"
+          placeholder="Reply..."
+          (keydown.enter)="sendReply()"
+        />
+
+        <div class="nga-actions">
+          <button class="nga-btn nga-btn-submit" (click)="sendReply()" [disabled]="replyText.trim() === ''">
+            Send
+          </button>
+          <button class="nga-btn nga-btn-cancel" (click)="closeThread()">Close</button>
+        </div>
+      </div>
+    }
+
+    <!-- Annotation badges -->
+    @for (badge of badges; track badge.annotation.id) {
+      <div
+        class="nga-badge nga-badge--{{ badge.annotation.status }}"
+        [style.top]="badge.top"
+        [style.left]="badge.left"
+        (click)="openThread(badge.annotation)"
+        [title]="badge.label"
+      >
+        {{ badge.icon }}
+      </div>
+    }
+  `, styles: [":host{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}.nga-highlight-rect{position:fixed;border:2px solid #3b82f6;background:#3b82f61a;pointer-events:none;transition:top .05s,left .05s,width .05s,height .05s}.nga-component-label{position:absolute;top:-22px;left:0;background:#1e293b;color:#f8fafc;font-family:monospace;font-size:11px;padding:2px 6px;border-radius:3px;white-space:nowrap}.nga-annotate-panel,.nga-thread-panel{pointer-events:all;position:fixed;right:16px;top:50%;transform:translateY(-50%);background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 24px #00000026;padding:16px;min-width:320px;max-width:400px}.nga-panel-title{margin:0 0 12px;font-size:14px;font-weight:600;color:#1e293b;font-family:monospace}.nga-inputs{margin-bottom:10px}.nga-input-row{display:flex;gap:8px;font-size:12px;font-family:monospace;margin-bottom:4px}.nga-input-key{color:#64748b;min-width:80px}.nga-input-val{color:#1e293b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nga-selection{font-size:12px;color:#475569;margin-bottom:8px;font-style:italic}.nga-textarea,.nga-reply-input{width:100%;box-sizing:border-box;border:1px solid #cbd5e1;border-radius:4px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;margin-bottom:10px}.nga-textarea:focus,.nga-reply-input:focus{outline:none;border-color:#3b82f6}.nga-actions{display:flex;gap:8px}.nga-btn{padding:6px 14px;border-radius:4px;font-size:13px;cursor:pointer;border:none;transition:opacity .15s}.nga-btn:disabled{opacity:.4;cursor:not-allowed}.nga-btn-submit{background:#3b82f6;color:#fff}.nga-btn-cancel{background:#f1f5f9;color:#475569}.nga-replies{max-height:200px;overflow-y:auto;margin-bottom:10px}.nga-reply{display:flex;gap:8px;margin-bottom:8px;font-size:13px}.nga-reply-author{font-weight:600;min-width:48px}.nga-reply-author--agent{color:#7c3aed}.nga-reply-author--user{color:#2563eb}.nga-badge{pointer-events:all;position:fixed;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;cursor:pointer;transform:translate(-50%,-50%)}.nga-badge--pending{background:#3b82f6;color:#fff}.nga-badge--acknowledged{background:#f59e0b;color:#fff}.nga-badge--resolved{background:#22c55e;color:#fff}.nga-badge--dismissed{background:#94a3b8;color:#fff}.nga-keyboard-hint{pointer-events:none;position:fixed;bottom:16px;right:16px;background:#0f172ab3;color:#f8fafc;font-size:12px;padding:6px 10px;border-radius:6px}.nga-keyboard-hint kbd{background:#ffffff26;border-radius:3px;padding:1px 5px;font-family:monospace}\n"] }]
+        }], propDecorators: { textArea: [{
+                type: ViewChild,
+                args: ['textArea']
+            }], toggleInspect: [{
+                type: HostListener,
+                args: ['document:keydown.alt.shift.a', ['$event']]
+            }], onEscape: [{
+                type: HostListener,
+                args: ['document:keydown.escape']
+            }], onScrollOrResize: [{
+                type: HostListener,
+                args: ['window:scroll']
+            }, {
+                type: HostListener,
+                args: ['window:resize']
+            }], onMouseMove: [{
+                type: HostListener,
+                args: ['document:mousemove', ['$event']]
+            }], onClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class -- required by NgModule pattern
+class NgAnnotateModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgAnnotateModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: NgAnnotateModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgAnnotateModule, providers: isDevMode()
+            ? [
+                InspectorService,
+                BridgeService,
+                provideAppInitializer(() => {
+                    const bridge = inject(BridgeService);
+                    const appRef = inject(ApplicationRef);
+                    const envInjector = inject(EnvironmentInjector);
+                    bridge.init();
+                    const overlayRef = createComponent(OverlayComponent, { environmentInjector: envInjector });
+                    appRef.attachView(overlayRef.hostView);
+                    document.body.appendChild(overlayRef.location.nativeElement);
+                }),
+            ]
+            : [] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: NgAnnotateModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    providers: isDevMode()
+                        ? [
+                            InspectorService,
+                            BridgeService,
+                            provideAppInitializer(() => {
+                                const bridge = inject(BridgeService);
+                                const appRef = inject(ApplicationRef);
+                                const envInjector = inject(EnvironmentInjector);
+                                bridge.init();
+                                const overlayRef = createComponent(OverlayComponent, { environmentInjector: envInjector });
+                                appRef.attachView(overlayRef.hostView);
+                                document.body.appendChild(overlayRef.location.nativeElement);
+                            }),
+                        ]
+                        : [],
+                }]
+        }] });
+
+function provideNgAnnotate() {
+    return makeEnvironmentProviders([
+        InspectorService,
+        BridgeService,
+        provideAppInitializer(() => {
+            if (!isDevMode())
+                return;
+            const bridge = inject(BridgeService);
+            const appRef = inject(ApplicationRef);
+            const envInjector = inject(EnvironmentInjector);
+            bridge.init();
+            const overlayRef = createComponent(OverlayComponent, { environmentInjector: envInjector });
+            appRef.attachView(overlayRef.hostView);
+            document.body.appendChild(overlayRef.location.nativeElement);
+        }),
+    ]);
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BridgeService, InspectorService, NgAnnotateModule, OverlayComponent, provideNgAnnotate };
+//# sourceMappingURL=ng-annotate-angular.mjs.map