ng-directive-zero 1.0.5

package/lib/services/component-walker.service.d.ts

@@ -0,0 +1,109 @@
+import { ComponentNode } from '../models/component-node.interface';
+import * as i0 from "@angular/core";
+/**
+ * ComponentWalkerService
+ *
+ * 核心服務：從 DOM 元素獲取 Angular 組件資訊
+ * 使用 Angular 的 ng.getComponent() 等開發模式 API
+ *
+ * 效能要求：執行時間 < 16ms (1 frame)
+ */
+export declare class ComponentWalkerService {
+    private uidCounter;
+    /**
+     * 檢查是否在開發模式下且 ng API 可用
+     */
+    isAvailable(): boolean;
+    /**
+     * 從 DOM 元素獲取 Angular 組件節點資訊
+     *
+     * @param element - 目標 DOM 元素
+     * @returns ComponentNode 或 null（如果不是 Angular 組件）
+     */
+    getComponentNode(element: HTMLElement): ComponentNode | null;
+    /**
+     * 創建 DOM 節點組件資訊 (用於 Root Component 內的普通元素)
+     */
+    private createDomNode;
+    /**
+     * 獲取組件定義 (ɵcmp)
+     */
+    private getComponentDef;
+    /**
+     * 從組件定義提取 selector
+     */
+    private extractSelector;
+    /**
+     * 提取 @Input 綁定的當前值
+     */
+    private extractInputValues;
+    /**
+     * 提取 @Output 事件名稱
+     */
+    private extractOutputNames;
+    /**
+     * 提取非 Input/Output 的公開屬性
+     */
+    private extractPublicProperties;
+    /**
+     * 清理值以便序列化
+     */
+    private sanitizeValue;
+    /**
+     * 檢查是否為 RxJS Observable
+     */
+    private isObservable;
+    /**
+     * 獲取父組件資訊
+     */
+    private getParentInfo;
+    /**
+     * 找到組件的 host 元素
+     */
+    private findComponentHost;
+    /**
+     * 計算 DOM 路徑
+     */
+    private computeDomPath;
+    /**
+     * 提取關鍵 computed styles
+     */
+    private extractComputedStyles;
+    /**
+     * 生成唯一 ID
+     */
+    private generateUid;
+    /**
+     * 獲取元素的祖先鏈（從當前元素到根）
+     * 用於層級麵包屑導航
+     *
+     * @param element - 起始 DOM 元素
+     * @param maxDepth - 最大深度（預設 10，避免過長）
+     * @returns ComponentNode 陣列，索引 0 為當前元素，依次向上
+     */
+    getAncestorChain(element: HTMLElement, maxDepth?: number): ComponentNode[];
+    /**
+     * 簡化版：僅獲取祖先元素的基本資訊（用於麵包屑顯示）
+     * 效能更佳，不需要完整的 ComponentNode
+     *
+     * @param element - 起始 DOM 元素
+     * @param maxDepth - 最大深度
+     * @returns 簡化的祖先資訊陣列
+     */
+    getAncestorBreadcrumbs(element: HTMLElement, maxDepth?: number): AncestorBreadcrumb[];
+    static ɵfac: i0.ɵɵFactoryDeclaration<ComponentWalkerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ComponentWalkerService>;
+}
+/**
+ * 祖先麵包屑項目（輕量版）
+ */
+export interface AncestorBreadcrumb {
+    /** 顯示標籤 */
+    label: string;
+    /** 對應的 DOM 元素 */
+    element: HTMLElement;
+    /** 是否為 Angular 組件 */
+    isComponent: boolean;
+    /** 深度（0 = 當前元素） */
+    depth: number;
+}

package/lib/services/data-sanitizer.service.d.ts

@@ -0,0 +1,65 @@
+import * as i0 from "@angular/core";
+/**
+ * DataSanitizerService
+ *
+ * 資料清洗服務：將組件資料轉換為 AI 友好的格式
+ *
+ * 清洗規則：
+ * 1. 移除 Angular 內部屬性 (__ngContext__, ɵcmp 等)
+ * 2. 將 Function 類型轉為描述字串
+ * 3. 過濾 Observable/Subject（只保留類型名稱）
+ * 4. 過濾大型資料（Base64 > 1KB）
+ * 5. 避免循環引用
+ */
+export declare class DataSanitizerService {
+    /** Angular 內部屬性前綴 */
+    private readonly INTERNAL_PREFIXES;
+    /** 最大字串長度 */
+    private readonly MAX_STRING_LENGTH;
+    /** 最大陣列長度 */
+    private readonly MAX_ARRAY_LENGTH;
+    /** 最大物件深度 */
+    private readonly MAX_DEPTH;
+    /**
+     * 清洗單一值
+     */
+    sanitize(value: unknown, depth?: number): unknown;
+    /**
+     * 清洗字串
+     */
+    private sanitizeString;
+    /**
+     * 清洗函數
+     */
+    private sanitizeFunction;
+    /**
+     * 清洗陣列
+     */
+    private sanitizeArray;
+    /**
+     * 清洗物件
+     */
+    private sanitizeObject;
+    /**
+     * 檢查是否為內部屬性
+     */
+    private isInternalProperty;
+    /**
+     * 檢查是否為 RxJS Observable
+     */
+    private isObservable;
+    /**
+     * 檢查是否為 RxJS Subject
+     */
+    private isSubject;
+    /**
+     * 檢查是否為 Promise
+     */
+    private isPromise;
+    /**
+     * 批量清洗 Record
+     */
+    sanitizeRecord(record: Record<string, unknown>): Record<string, unknown>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<DataSanitizerService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<DataSanitizerService>;
+}

package/lib/services/mcp.service.d.ts

@@ -0,0 +1,43 @@
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { UserAnnotation } from '../models/component-node.interface';
+import * as i0 from "@angular/core";
+export interface McpStatus {
+    connected: boolean;
+    sessionId?: string;
+    lastError?: string;
+}
+export interface McpAnnotation extends UserAnnotation {
+    id: string;
+    sessionId: string;
+    url: string;
+    status: 'pending' | 'acknowledged' | 'resolved' | 'dismissed';
+}
+export declare class McpService {
+    private http;
+    private readonly API_URL;
+    private _status;
+    status$: Observable<McpStatus>;
+    private _annotations;
+    annotations$: Observable<McpAnnotation[]>;
+    constructor(http: HttpClient);
+    /**
+     * Check if the MCP server is reachable
+     */
+    checkConnection(): Promise<boolean>;
+    /**
+     * Establish a new session or restore existing one
+     */
+    connect(existingSessionId?: string): Promise<string>;
+    /**
+     * Send an annotation to the MCP server
+     */
+    sendAnnotation(annotation: UserAnnotation): Promise<void>;
+    /**
+     * Poll for updates (e.g., resolve/dismiss status from agent)
+     */
+    private startPolling;
+    private updateStatus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<McpService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<McpService>;
+}

package/lib/services/prompt-generator.service.d.ts

@@ -0,0 +1,74 @@
+import { ComponentNode, UserAnnotation, OutputDetail } from '../models/component-node.interface';
+import { DataSanitizerService } from './data-sanitizer.service';
+import * as i0 from "@angular/core";
+/**
+ * PromptGeneratorService
+ *
+ * 提示生成服務：根據 OutputDetail 模式生成不同詳細程度的輸出
+ *
+ * Modes:
+ * - compact: 最簡潔，只有元素類型和 feedback
+ * - standard: 標準，包含 DOM Path、Position、基本 Styles
+ * - detailed: 詳細，包含所有屬性和上下文
+ * - forensic: 完整，包含所有可用資訊（舊版相容）
+ */
+export declare class PromptGeneratorService {
+    private dataSanitizer;
+    constructor(dataSanitizer: DataSanitizerService);
+    /**
+     * 生成 Page Feedback 輸出（多標記）
+     */
+    generatePageFeedback(markers: Array<{
+        target: ComponentNode;
+        intent: string;
+    }>, options: {
+        outputDetail: OutputDetail;
+        pageUrl?: string;
+        viewport?: {
+            width: number;
+            height: number;
+        };
+        userAgent?: string;
+        timestamp?: number;
+    }): string;
+    /**
+     * 生成單個標記的輸出
+     */
+    generateMarkerOutput(node: ComponentNode, intent: string, index: number, outputDetail: OutputDetail): string;
+    /**
+     * Compact 模式：最簡潔
+     */
+    private generateCompact;
+    /**
+     * Standard 模式：標準
+     */
+    private generateStandard;
+    /**
+     * Detailed 模式：詳細
+     */
+    private generateDetailed;
+    /**
+     * Forensic 模式：完整（舊版相容格式）
+     */
+    private generateForensic;
+    /**
+     * 生成完整的 AI Prompt（舊版兼容）
+     */
+    generatePrompt(annotation: UserAnnotation): string;
+    /**
+     * 僅生成組件資訊（舊版兼容）
+     */
+    generateComponentInfo(node: ComponentNode): string;
+    private getPathFromUrl;
+    private getElementType;
+    private formatDomPath;
+    private extractCssClasses;
+    private extractKeyStyles;
+    private formatAllStyles;
+    private getTextContent;
+    private getAccessibility;
+    private getNearbyElements;
+    private escapeMarkdown;
+    static ɵfac: i0.ɵɵFactoryDeclaration<PromptGeneratorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<PromptGeneratorService>;
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "ng-directive-zero",
+  "version": "1.0.5",
+  "description": "Angular implementation of Agentation",
+  "author": "Andy Chou",
+  "license": "MIT",
+  "keywords": [
+    "angular",
+    "agentation",
+    "annotation"
+  ],
+  "peerDependencies": {
+    "@angular/common": ">=14.0.0 <21.0.0",
+    "@angular/core": ">=14.0.0 <21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ivan9527945/ng-directive-zero"
+  },
+  "homepage": "https://github.com/ivan9527945/ng-directive-zero",
+  "bugs": {
+    "url": "https://github.com/ivan9527945/ng-directive-zero/issues"
+  },
+  "module": "fesm2022/ng-directive-zero.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/ng-directive-zero.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,13 @@
+export * from './lib/ng-directive-zero.module';
+export * from './lib/models/component-node.interface';
+export * from './lib/services/component-walker.service';
+export * from './lib/services/data-sanitizer.service';
+export * from './lib/services/prompt-generator.service';
+export * from './lib/services/mcp.service';
+export * from './lib/components/overlay/overlay.component';
+export * from './lib/components/annotation-panel/annotation-panel.component';
+export * from './lib/components/toolbar/toolbar.component';
+export * from './lib/components/settings-panel/settings-panel.component';
+export * from './lib/components/markers-panel/markers-panel.component';
+export * from './lib/components/inline-editor/inline-editor.component';
+export * from './lib/components/agentation/agentation.component';