ng-directive-zero 1.0.5

package/lib/components/annotation-panel/annotation-panel.component.d.ts

@@ -0,0 +1,84 @@
+import { EventEmitter } from '@angular/core';
+import { ComponentNode } from '../../models/component-node.interface';
+import { PromptGeneratorService } from '../../services/prompt-generator.service';
+/**
+ * AnnotationPanelComponent
+ *
+ * 標註面板：顯示選中組件的詳細資訊，並提供使用者輸入意圖的介面
+ */
+import { McpService, McpStatus } from '../../services/mcp.service';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+export declare class AnnotationPanelComponent {
+    private promptGenerator;
+    private mcpService;
+    /** 選中的組件節點 */
+    selectedNode: ComponentNode | null;
+    /** 面板關閉時觸發 */
+    closed: EventEmitter<void>;
+    /** 使用者輸入的意圖 */
+    userIntent: string;
+    /** 是否已複製到剪貼板 */
+    copied: boolean;
+    /** 是否已發送到 MCP */
+    sent: boolean;
+    /** 展開的區塊 */
+    expandedSections: Record<'inputs' | 'outputs' | 'properties' | 'styles', boolean>;
+    mcpStatus$: Observable<McpStatus>;
+    constructor(promptGenerator: PromptGeneratorService, mcpService: McpService);
+    /**
+     * 發送標註給 Agent (MCP)
+     */
+    sendToAgent(): Promise<void>;
+    /**
+     * 複製 Markdown 到剪貼板
+     */
+    copyToClipboard(): Promise<void>;
+    /**
+     * 僅複製組件資訊（不含使用者意圖）
+     */
+    copyComponentInfo(): Promise<void>;
+    /**
+     * 清除選擇
+     */
+    clearSelection(): void;
+    /**
+     * 切換區塊展開狀態
+     */
+    toggleSection(section: 'inputs' | 'outputs' | 'properties' | 'styles'): void;
+    /**
+     * 獲取 Input 的條目
+     */
+    getInputEntries(): Array<{
+        key: string;
+        value: unknown;
+    }>;
+    /**
+     * 獲取公開屬性條目
+     */
+    getPropertyEntries(): Array<{
+        key: string;
+        value: unknown;
+    }>;
+    /**
+     * 獲取樣式條目
+     */
+    getStyleEntries(): Array<{
+        key: string;
+        value: string;
+    }>;
+    /**
+     * 格式化值為顯示字串
+     */
+    formatValue(value: unknown): string;
+    /**
+     * 獲取值的類型顏色
+     */
+    getValueColor(value: unknown): string;
+    /**
+     * Fallback 複製方式
+     */
+    private fallbackCopy;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AnnotationPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AnnotationPanelComponent, "ag-annotation-panel", never, { "selectedNode": { "alias": "selectedNode"; "required": false; }; }, { "closed": "closed"; }, never, never, false, never>;
+}

package/lib/components/inline-editor/inline-editor.component.d.ts

@@ -0,0 +1,53 @@
+import { EventEmitter } from '@angular/core';
+import { MarkerAnnotation } from '../../models/component-node.interface';
+import * as i0 from "@angular/core";
+/**
+ * InlineEditorComponent
+ *
+ * 內嵌編輯器：用於編輯已標記元素的 intent
+ * 參考 React Agentation 的設計
+ */
+export declare class InlineEditorComponent {
+    /** 正在編輯的標記 */
+    marker: MarkerAnnotation | null;
+    /** 編輯器位置 */
+    position: {
+        top: number;
+        left: number;
+    };
+    /** 儲存時觸發 */
+    save: EventEmitter<{
+        index: number;
+        intent: string;
+    }>;
+    /** 刪除時觸發 */
+    delete: EventEmitter<number>;
+    /** 取消時觸發 */
+    cancel: EventEmitter<void>;
+    /** 暫存的 intent 值 */
+    tempIntent: string;
+    /** 樣式面板是否展開 */
+    isStyleExpanded: boolean;
+    ngOnChanges(): void;
+    /** 儲存 */
+    onSave(): void;
+    /** 刪除 */
+    onDelete(): void;
+    /** 取消 */
+    onCancel(): void;
+    /** 獲取編輯器樣式 */
+    getEditorStyle(): Record<string, string>;
+    /** 獲取元素描述 */
+    getElementDescription(): string;
+    /** 切換樣式面板 */
+    toggleStylePanel(): void;
+    /** 獲取樣式條目 */
+    getStyleEntries(): Array<{
+        key: string;
+        value: string;
+    }>;
+    /** 格式化值為顯示字串 */
+    formatValue(value: string): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<InlineEditorComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<InlineEditorComponent, "ag-inline-editor", never, { "marker": { "alias": "marker"; "required": false; }; "position": { "alias": "position"; "required": false; }; }, { "save": "save"; "delete": "delete"; "cancel": "cancel"; }, never, never, false, never>;
+}

package/lib/components/markers-panel/markers-panel.component.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '@angular/core';
+import { MarkerAnnotation } from '../../models/component-node.interface';
+import * as i0 from "@angular/core";
+/**
+ * MarkersPanelComponent
+ *
+ * 已標記組件列表：顯示、編輯意圖、刪除標記
+ */
+export declare class MarkersPanelComponent {
+    /** 標記列表 */
+    markers: MarkerAnnotation[];
+    /** 面板關閉時觸發 */
+    closed: EventEmitter<void>;
+    /** 刪除標記時觸發 */
+    deleteMarker: EventEmitter<number>;
+    /** 更新標記意圖時觸發 */
+    updateIntent: EventEmitter<{
+        index: number;
+        intent: string;
+    }>;
+    /** 跳轉到標記時觸發 */
+    scrollToMarker: EventEmitter<number>;
+    /** 顏色對應的 HEX 值 */
+    readonly colorHex: Record<import("../../models/component-node.interface").MarkerColor, string>;
+    /** 當前編輯的標記索引 */
+    editingIndex: number | null;
+    /** 編輯中的意圖文字 */
+    editingIntent: string;
+    /** 開始編輯意圖 */
+    startEdit(marker: MarkerAnnotation): void;
+    /** 保存編輯 */
+    saveEdit(): void;
+    /** 取消編輯 */
+    cancelEdit(): void;
+    /** 刪除標記 */
+    onDelete(index: number): void;
+    /** 跳轉到標記 */
+    onScrollTo(index: number): void;
+    /** 關閉面板 */
+    close(): void;
+    /** 處理 Enter 鍵 */
+    onKeyDown(event: KeyboardEvent): void;
+    /** trackBy 函數 */
+    trackByIndex(index: number, marker: MarkerAnnotation): number;
+    static ɵfac: i0.ɵɵFactoryDeclaration<MarkersPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MarkersPanelComponent, "ag-markers-panel", never, { "markers": { "alias": "markers"; "required": false; }; }, { "closed": "closed"; "deleteMarker": "deleteMarker"; "updateIntent": "updateIntent"; "scrollToMarker": "scrollToMarker"; }, never, never, false, never>;
+}

package/lib/components/overlay/overlay.component.d.ts

@@ -0,0 +1,171 @@
+import { EventEmitter, OnDestroy, OnInit, SimpleChanges, OnChanges } from '@angular/core';
+import { ComponentNode, MarkerAnnotation, MarkerColor, AgentationSettings } from '../../models/component-node.interface';
+import { ComponentWalkerService, AncestorBreadcrumb } from '../../services/component-walker.service';
+import * as i0 from "@angular/core";
+/**
+ * OverlayComponent (v2)
+ *
+ * 支援多選標記的視覺化 DOM 檢查器
+ */
+export declare class OverlayComponent implements OnInit, OnDestroy, OnChanges {
+    private componentWalker;
+    /** 已有的標記列表 */
+    markers: MarkerAnnotation[];
+    /** 當前設定 */
+    settings: AgentationSettings;
+    /** 是否處於錄製模式 */
+    isRecording: boolean;
+    /** 工具列是否最小化 */
+    isMinimized: boolean;
+    /** 新增標記時觸發（多選模式） */
+    markerAdded: EventEmitter<ComponentNode>;
+    /** 選中組件時觸發（兼容舊版） */
+    componentSelected: EventEmitter<ComponentNode>;
+    /** 懸停組件變化時觸發 */
+    componentHovered: EventEmitter<ComponentNode | null>;
+    /** 錄製模式變化時觸發 */
+    recordingChanged: EventEmitter<boolean>;
+    /** 標記被刪除時觸發 */
+    markerDeleted: EventEmitter<number>;
+    /** 高亮框樣式 */
+    highlightStyle: Record<string, string>;
+    /** Tooltip 內容 */
+    tooltipContent: string;
+    /** Tooltip 位置 */
+    tooltipStyle: Record<string, string>;
+    /** 是否顯示 tooltip */
+    showTooltip: boolean;
+    /** 當前懸停的節點 */
+    hoveredNode: ComponentNode | null;
+    /** 顏色對應的 HEX 值 */
+    readonly colorHex: Record<MarkerColor, string>;
+    /** 綁定的 click handler（用於移除監聽器） */
+    private boundClickHandler;
+    /** 正在編輯的標記 */
+    editingMarker: MarkerAnnotation | null;
+    /** 編輯器位置 */
+    editorPosition: {
+        top: number;
+        left: number;
+    };
+    /** 祖先麵包屑列表 */
+    ancestorBreadcrumbs: AncestorBreadcrumb[];
+    /** 麵包屑位置 */
+    breadcrumbStyle: Record<string, string>;
+    /** 當前選中的麵包屑索引 */
+    selectedBreadcrumbIndex: number;
+    /** 是否顯示麵包屑 */
+    showBreadcrumb: boolean;
+    /** 是否鎖定當前選取（Click-to-lock） */
+    isLocked: boolean;
+    /** 鎖定的節點 */
+    lockedNode: ComponentNode | null;
+    constructor(componentWalker: ComponentWalkerService);
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    /**
+     * 開始錄製模式
+     */
+    startRecording(): void;
+    /**
+     * 停止錄製模式
+     */
+    stopRecording(): void;
+    private cleanupRecording;
+    /**
+     * 切換錄製模式
+     */
+    toggleRecording(): void;
+    /**
+     * 處理滑鼠移動
+     */
+    onMouseMove(event: MouseEvent): void;
+    /**
+     * 處理點擊（capture phase，優先攔截）
+     */
+    /**
+     * 處理點擊（capture phase，優先攔截）
+     */
+    private onDocumentClick;
+    /**
+     * 鎖定節點
+     */
+    private lockNode;
+    /**
+     * 解鎖
+     */
+    unlock(): void;
+    /**
+     * 確認新增標記
+     */
+    private confirmMarker;
+    /**
+     * 比較兩個節點是否相同
+     */
+    private isSameNode;
+    /**
+     * 處理編輯器儲存
+     */
+    onEditorSave(event: {
+        index: number;
+        intent: string;
+    }): void;
+    /**
+     * 處理編輯器刪除
+     */
+    onEditorDelete(index: number): void;
+    /**
+     * 處理編輯器取消
+     */
+    onEditorCancel(): void;
+    /**
+     * 處理 Escape 鍵
+     */
+    onEscape(): void;
+    /**
+     * 處理快捷鍵 Ctrl+Shift+I
+     */
+    onKeyDown(event: KeyboardEvent): void;
+    /**
+     * 處理點擊標記編號
+     */
+    onMarkerClick(marker: MarkerAnnotation, event: MouseEvent): void;
+    /**
+     * 獲取標記的位置樣式
+     */
+    getMarkerStyle(marker: MarkerAnnotation): Record<string, string>;
+    /**
+     * 更新高亮框
+     */
+    private updateHighlight;
+    /**
+     * 更新 tooltip
+     */
+    private updateTooltip;
+    /**
+     * 清除高亮
+     */
+    private clearHighlight;
+    /**
+     * 更新祖先麵包屑
+     */
+    private updateBreadcrumbs;
+    /**
+     * 處理麵包屑項目點擊
+     */
+    onBreadcrumbClick(breadcrumb: AncestorBreadcrumb, index: number, event: MouseEvent): void;
+    /**
+     * 處理麵包屑項目雙擊（選取該元素）
+     */
+    /**
+     * 處理麵包屑項目雙擊（直接選取）
+     */
+    onBreadcrumbDoubleClick(breadcrumb: AncestorBreadcrumb, event: MouseEvent): void;
+    /**
+     * 檢查是否為 overlay 元素
+     */
+    private isOverlayElement;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverlayComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<OverlayComponent, "ag-overlay", never, { "markers": { "alias": "markers"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "isRecording": { "alias": "isRecording"; "required": false; }; "isMinimized": { "alias": "isMinimized"; "required": false; }; }, { "markerAdded": "markerAdded"; "componentSelected": "componentSelected"; "componentHovered": "componentHovered"; "recordingChanged": "recordingChanged"; "markerDeleted": "markerDeleted"; }, never, never, false, never>;
+}

package/lib/components/settings-panel/settings-panel.component.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '@angular/core';
+import { AgentationSettings, MarkerColor, OutputDetail } from '../../models/component-node.interface';
+import { McpService, McpStatus } from '../../services/mcp.service';
+import { Observable } from 'rxjs';
+import * as i0 from "@angular/core";
+/**
+ * SettingsPanelComponent
+ *
+ * 設定面板：顏色選擇、輸出詳細程度、選項開關等
+ */
+export declare class SettingsPanelComponent {
+    private mcpService;
+    /** 當前設定 */
+    settings: AgentationSettings;
+    /** 綁定 dark mode class 到 host */
+    get isDarkMode(): boolean;
+    /** 面板關閉時觸發 */
+    closed: EventEmitter<void>;
+    /** 設定變更時觸發 */
+    settingsChange: EventEmitter<AgentationSettings>;
+    mcpStatus$: Observable<McpStatus>;
+    constructor(mcpService: McpService);
+    connectMcp(): void;
+    /** 可用顏色列表 */
+    readonly colors: MarkerColor[];
+    /** 顏色對應的 HEX 值 */
+    readonly colorHex: Record<MarkerColor, string>;
+    /** 輸出詳細程度選項 */
+    readonly outputOptions: OutputDetail[];
+    /** 選擇顏色 */
+    selectColor(color: MarkerColor): void;
+    /** 選擇輸出詳細程度 */
+    selectOutputDetail(detail: OutputDetail): void;
+    /** 切換 Angular 組件顯示 */
+    toggleAngularComponents(): void;
+    /** 切換複製後清除 */
+    toggleClearOnCopy(): void;
+    /** 切換阻止頁面互動 */
+    toggleBlockInteractions(): void;
+    /** 切換主題（深色/淺色） */
+    toggleTheme(): void;
+    /** 關閉面板 */
+    close(): void;
+    /** 更新設定 */
+    private updateSettings;
+    static ɵfac: i0.ɵɵFactoryDeclaration<SettingsPanelComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<SettingsPanelComponent, "ag-settings-panel", never, { "settings": { "alias": "settings"; "required": false; }; }, { "closed": "closed"; "settingsChange": "settingsChange"; }, never, never, false, never>;
+}

package/lib/components/toolbar/toolbar.component.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '@angular/core';
+import { ToolbarState, RecordingSession, AgentationSettings } from '../../models/component-node.interface';
+import * as i0 from "@angular/core";
+/**
+ * ToolbarComponent
+ *
+ * 浮動工具列：提供錄製控制、檢視、複製、設定等功能
+ */
+export declare class ToolbarComponent {
+    /** 當前錄製會話 */
+    session: RecordingSession | null;
+    /** 當前設定 */
+    settings: AgentationSettings;
+    /** 綁定 dark mode class 到 host */
+    get isDarkMode(): boolean;
+    /** 工具列狀態 */
+    state: ToolbarState;
+    /** 開始錄製 */
+    startRecording: EventEmitter<void>;
+    /** 結束錄製 */
+    stopRecording: EventEmitter<void>;
+    /** 切換檢視標記列表 */
+    toggleMarkers: EventEmitter<void>;
+    /** 複製到剪貼簿 */
+    copyToClipboard: EventEmitter<void>;
+    /** 清除所有標記 */
+    clearMarkers: EventEmitter<void>;
+    /** 切換設定面板 */
+    toggleSettings: EventEmitter<void>;
+    /** 關閉工具 */
+    closeToolbar: EventEmitter<void>;
+    /** 切換最小化狀態 */
+    toggleMinimize: EventEmitter<void>;
+    /** 設定變更 */
+    settingsChange: EventEmitter<AgentationSettings>;
+    /** 標記數量 */
+    get markerCount(): number;
+    /** 是否有標記 */
+    get hasMarkers(): boolean;
+    /** 切換錄製狀態 */
+    onToggleRecording(): void;
+    /** 處理複製 */
+    onCopy(): void;
+    /** 處理清除 */
+    onClear(): void;
+    /** 處理設定切換 */
+    onToggleSettings(): void;
+    /** 處理標記列表切換 */
+    onToggleMarkers(): void;
+    /** 處理關閉 */
+    onClose(): void;
+    /** 處理最小化切換 */
+    onToggleMinimize(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ToolbarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ToolbarComponent, "ag-toolbar", never, { "session": { "alias": "session"; "required": false; }; "settings": { "alias": "settings"; "required": false; }; "state": { "alias": "state"; "required": false; }; }, { "startRecording": "startRecording"; "stopRecording": "stopRecording"; "toggleMarkers": "toggleMarkers"; "copyToClipboard": "copyToClipboard"; "clearMarkers": "clearMarkers"; "toggleSettings": "toggleSettings"; "closeToolbar": "closeToolbar"; "toggleMinimize": "toggleMinimize"; "settingsChange": "settingsChange"; }, never, never, false, never>;
+}

package/lib/models/component-node.interface.d.ts

@@ -0,0 +1,154 @@
+/**
+ * Angular Agentation - Component Node Interface
+ * 定義從 DOM 元素解析出的 Angular 組件資訊結構
+ */
+/**
+ * 組件節點資訊
+ * 包含識別、邏輯層、渲染層三個維度的資料
+ */
+export interface ComponentNode {
+    /** 唯一識別符 */
+    uid: string;
+    /** 組件類別名稱 e.g., "ProductCardComponent" */
+    displayName: string;
+    /** Angular selector e.g., "app-product-card" */
+    selector: string;
+    /** 原始檔路徑 (MVP 階段為 null，需 build-time 支援) */
+    filePath: string | null;
+    /** DOM 路徑 e.g., "html > body > app-root > app-product-card" */
+    domPath: string;
+    /** @Input 綁定值 { 'propertyName': currentValue } */
+    inputs: Record<string, unknown>;
+    /** @Output 事件名稱列表 */
+    outputs: string[];
+    /** 組件公開屬性（非 @Input 的成員變數） */
+    publicProperties: Record<string, unknown>;
+    /** 原始 DOM 元素參考 */
+    domElement: HTMLElement;
+    /** 元素的邊界矩形（用於繪製高亮框） */
+    rect: DOMRect;
+    /** 關鍵 computed styles */
+    computedStyles: Record<string, string>;
+    /** 應用的指令列表 */
+    directives: string[];
+    /** 父組件資訊（可選） */
+    parent?: ParentComponentInfo;
+}
+/**
+ * 父組件簡要資訊
+ */
+export interface ParentComponentInfo {
+    displayName: string;
+    selector: string;
+}
+/**
+ * 使用者標註
+ * 將「人類意圖」與「程式碼位置」綁定
+ */
+export interface UserAnnotation {
+    /** 目標組件節點 */
+    target: ComponentNode;
+    /** 使用者的意圖描述 */
+    intent: string;
+    /** 截圖 (Base64) - 可選 */
+    snapshotImage?: string;
+    /** 標註時間戳 */
+    timestamp: number;
+}
+/**
+ * Overlay 狀態
+ */
+export interface OverlayState {
+    /** 是否處於檢查模式 */
+    isInspecting: boolean;
+    /** 當前懸停的組件節點 */
+    hoveredNode: ComponentNode | null;
+    /** 當前選中的組件節點 */
+    selectedNode: ComponentNode | null;
+}
+/**
+ * 需要提取的關鍵 CSS 屬性列表
+ */
+export declare const KEY_COMPUTED_STYLES: readonly ["display", "position", "width", "height", "padding", "margin", "background-color", "color", "font-size", "font-family", "border", "border-radius", "opacity", "cursor", "z-index"];
+/**
+ * 標記顏色選項
+ */
+export type MarkerColor = 'purple' | 'blue' | 'cyan' | 'green' | 'yellow' | 'orange' | 'red';
+/**
+ * 標記顏色對應 HEX 值
+ */
+export declare const MARKER_COLORS: Record<MarkerColor, string>;
+/**
+ * 單個標記
+ * 代表一次點擊標記的組件
+ */
+export interface MarkerAnnotation {
+    /** 標記編號（1, 2, 3...） */
+    index: number;
+    /** 目標組件節點 */
+    target: ComponentNode;
+    /** 使用者的意圖描述 */
+    intent: string;
+    /** 標記顏色 */
+    color: MarkerColor;
+    /** 標記時間戳 */
+    timestamp: number;
+}
+/**
+ * 錄製會話
+ * 包含多個標記
+ */
+export interface RecordingSession {
+    /** 會話 ID */
+    id: string;
+    /** 會話內的標記列表 */
+    markers: MarkerAnnotation[];
+    /** 會話開始時間 */
+    startTime: number;
+    /** 會話結束時間 */
+    endTime?: number;
+    /** 是否正在錄製中 */
+    isRecording: boolean;
+}
+/**
+ * 輸出詳細程度
+ * - compact: 最簡潔，只有基本識別資訊
+ * - standard: 標準模式，包含位置和基本樣式
+ * - detailed: 詳細模式，包含所有屬性和上下文
+ * - forensic: 完整模式，包含所有可用資訊
+ */
+export type OutputDetail = 'compact' | 'standard' | 'detailed' | 'forensic';
+/**
+ * Agentation 設定
+ */
+export interface AgentationSettings {
+    /** 是否為深色模式 */
+    isDarkMode: boolean;
+    /** 輸出詳細程度 */
+    outputDetail: OutputDetail;
+    /** 是否顯示 Angular 組件資訊 */
+    showAngularComponents: boolean;
+    /** 當前標記顏色 */
+    markerColor: MarkerColor;
+    /** 複製/發送後清除標記 */
+    clearOnCopy: boolean;
+    /** 阻止頁面互動（檢查模式下） */
+    blockPageInteractions: boolean;
+}
+/**
+ * 預設設定
+ */
+export declare const DEFAULT_SETTINGS: AgentationSettings;
+/**
+ * 工具列狀態
+ */
+export interface ToolbarState {
+    /** 是否顯示設定面板 */
+    showSettings: boolean;
+    /** 是否顯示標記列表 */
+    showMarkers: boolean;
+    /** 是否正在錄製 */
+    isRecording: boolean;
+    /** 是否最小化 */
+    isMinimized: boolean;
+}

package/lib/ng-directive-zero.module.d.ts

@@ -0,0 +1,35 @@
+import { ModuleWithProviders } from '@angular/core';
+import * as i0 from "@angular/core";
+import * as i1 from "./components/overlay/overlay.component";
+import * as i2 from "./components/annotation-panel/annotation-panel.component";
+import * as i3 from "./components/toolbar/toolbar.component";
+import * as i4 from "./components/settings-panel/settings-panel.component";
+import * as i5 from "./components/markers-panel/markers-panel.component";
+import * as i6 from "./components/inline-editor/inline-editor.component";
+import * as i7 from "./components/agentation/agentation.component";
+import * as i8 from "@angular/common";
+import * as i9 from "@angular/forms";
+import * as i10 from "@angular/common/http";
+/**
+ * NgDirectiveZeroModule
+ *
+ * Angular 版本的 Agentation 工具
+ * 提供視覺化 DOM 檢查器、組件樹遍歷、AI 語意化序列化等功能
+ *
+ * 使用方式：
+ * ```typescript
+ * @NgModule({
+ *   imports: [NgDirectiveZeroModule.forRoot()]
+ * })
+ * export class AppModule {}
+ * ```
+ */
+export declare class NgDirectiveZeroModule {
+    /**
+     * 在根模組中使用，提供單例服務
+     */
+    static forRoot(): ModuleWithProviders<NgDirectiveZeroModule>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<NgDirectiveZeroModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<NgDirectiveZeroModule, [typeof i1.OverlayComponent, typeof i2.AnnotationPanelComponent, typeof i3.ToolbarComponent, typeof i4.SettingsPanelComponent, typeof i5.MarkersPanelComponent, typeof i6.InlineEditorComponent, typeof i7.AgentationComponent], [typeof i8.CommonModule, typeof i9.FormsModule, typeof i10.HttpClientModule], [typeof i1.OverlayComponent, typeof i2.AnnotationPanelComponent, typeof i3.ToolbarComponent, typeof i4.SettingsPanelComponent, typeof i5.MarkersPanelComponent, typeof i6.InlineEditorComponent, typeof i7.AgentationComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<NgDirectiveZeroModule>;
+}