@ng-annotate/angular 0.2.1 → 0.2.3

package/dist/overlay/overlay.component.d.ts

@@ -1,51 +0,0 @@
-import { OnInit, ElementRef } from '@angular/core';
-import type { Annotation, ComponentContext } from '../types.js';
-type OverlayMode = 'hidden' | 'inspect' | 'annotate' | 'thread';
-interface HighlightRect {
-    top: string;
-    left: string;
-    width: string;
-    height: string;
-}
-interface AnnotationBadge {
-    annotation: Annotation;
-    top: string;
-    left: string;
-    icon: string;
-    label: string;
-}
-export declare class OverlayComponent implements OnInit {
-    textArea?: ElementRef<HTMLTextAreaElement>;
-    mode: OverlayMode;
-    hoveredContext: ComponentContext | null;
-    highlightRect: HighlightRect | null;
-    selectedContext: ComponentContext | null;
-    annotationText: string;
-    selectionText: string;
-    threadAnnotation: Annotation | null;
-    replyText: string;
-    badges: AnnotationBadge[];
-    private readonly inspector;
-    private readonly bridge;
-    private readonly cdr;
-    ngOnInit(): void;
-    toggleInspect(event?: Event): void;
-    onEscape(): void;
-    onScrollOrResize(): void;
-    onMouseMove(event: MouseEvent): void;
-    onClick(event: MouseEvent): void;
-    submit(): void;
-    cancel(): void;
-    openThread(annotation: Annotation): void;
-    closeThread(): void;
-    sendReply(): void;
-    inputEntries(): {
-        key: string;
-        value: unknown;
-    }[];
-    private updateBadges;
-    private refreshBadgePositions;
-    private findComponentElement;
-    private badgeIcon;
-}
-export {};

package/dist/overlay/overlay.component.js

@@ -1,430 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __metadata = (this && this.__metadata) || function (k, v) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
-};
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, HostListener, ViewChild, ElementRef, inject, } from '@angular/core';
-import { JsonPipe } from '@angular/common';
-import { FormsModule } from '@angular/forms';
-import { InspectorService } from '../inspector.service.js';
-import { BridgeService } from '../bridge.service.js';
-let OverlayComponent = class OverlayComponent {
-    constructor() {
-        this.mode = 'hidden';
-        this.hoveredContext = null;
-        this.highlightRect = null;
-        this.selectedContext = null;
-        this.annotationText = '';
-        this.selectionText = '';
-        this.threadAnnotation = null;
-        this.replyText = '';
-        this.badges = [];
-        this.inspector = inject(InspectorService);
-        this.bridge = inject(BridgeService);
-        this.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];
-    }
-};
-__decorate([
-    ViewChild('textArea'),
-    __metadata("design:type", ElementRef)
-], OverlayComponent.prototype, "textArea", void 0);
-__decorate([
-    HostListener('document:keydown.alt.shift.a', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [Event]),
-    __metadata("design:returntype", void 0)
-], OverlayComponent.prototype, "toggleInspect", null);
-__decorate([
-    HostListener('document:keydown.escape'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], OverlayComponent.prototype, "onEscape", null);
-__decorate([
-    HostListener('window:scroll'),
-    HostListener('window:resize'),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], OverlayComponent.prototype, "onScrollOrResize", null);
-__decorate([
-    HostListener('document:mousemove', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", void 0)
-], OverlayComponent.prototype, "onMouseMove", null);
-__decorate([
-    HostListener('document:click', ['$event']),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", [MouseEvent]),
-    __metadata("design:returntype", void 0)
-], OverlayComponent.prototype, "onClick", null);
-OverlayComponent = __decorate([
-    Component({
-        selector: 'nga-overlay',
-        changeDetection: ChangeDetectionStrategy.OnPush,
-        imports: [JsonPipe, FormsModule],
-        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: rgba(59,130,246,0.1); pointer-events: none;
-      transition: top 0.05s, left 0.05s, width 0.05s, height 0.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: #ffffff; border: 1px solid #e2e8f0;
-      border-radius: 8px; box-shadow: 0 4px 24px rgba(0,0,0,0.15);
-      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 0.15s;
-    }
-    .nga-btn:disabled { opacity: 0.4; cursor: not-allowed; }
-    .nga-btn-submit { background: #3b82f6; color: #ffffff; }
-    .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: #ffffff; }
-    .nga-badge--acknowledged { background: #f59e0b; color: #ffffff; }
-    .nga-badge--resolved { background: #22c55e; color: #ffffff; }
-    .nga-badge--dismissed { background: #94a3b8; color: #ffffff; }
-    .nga-keyboard-hint {
-      pointer-events: none; position: fixed; bottom: 16px; right: 16px;
-      background: rgba(15,23,42,0.7); color: #f8fafc; font-size: 12px;
-      padding: 6px 10px; border-radius: 6px;
-    }
-    .nga-keyboard-hint kbd {
-      background: rgba(255,255,255,0.15); border-radius: 3px;
-      padding: 1px 5px; font-family: monospace;
-    }
-  `],
-        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>
-    }
-  `,
-    })
-], OverlayComponent);
-export { OverlayComponent };

package/dist/provide-ng-annotate.d.ts

@@ -1 +0,0 @@
-export declare function provideNgAnnotate(): import("@angular/core").EnvironmentProviders;

package/dist/provide-ng-annotate.js

@@ -1,21 +0,0 @@
-import { ApplicationRef, EnvironmentInjector, createComponent, inject, isDevMode, makeEnvironmentProviders, provideAppInitializer, } from '@angular/core';
-import { InspectorService } from './inspector.service.js';
-import { BridgeService } from './bridge.service.js';
-import { OverlayComponent } from './overlay/overlay.component.js';
-export 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);
-        }),
-    ]);
-}

package/dist/types.d.ts

@@ -1,39 +0,0 @@
-export type AnnotationStatus = 'pending' | 'acknowledged' | 'resolved' | 'dismissed';
-export interface AnnotationReply {
-    id: string;
-    createdAt: string;
-    author: 'agent' | 'user';
-    message: string;
-}
-export interface Annotation {
-    id: string;
-    sessionId: string;
-    createdAt: string;
-    status: AnnotationStatus;
-    replies: AnnotationReply[];
-    componentName: string;
-    componentFilePath: string;
-    templateFilePath?: string;
-    selector: string;
-    inputs: Record<string, unknown>;
-    domSnapshot: string;
-    componentTreePath: string[];
-    annotationText: string;
-    selectionText?: string;
-}
-export interface Session {
-    id: string;
-    createdAt: string;
-    lastSeenAt: string;
-    active: boolean;
-    url: string;
-}
-export interface ComponentContext {
-    componentName: string;
-    componentFilePath: string;
-    templateFilePath?: string;
-    selector: string;
-    inputs: Record<string, unknown>;
-    domSnapshot: string;
-    componentTreePath: string[];
-}

package/dist/types.js

@@ -1 +0,0 @@
-export {};