@saolabs/client 1.0.0 → 1.0.2

package/dist/src/core/contracts/views.d.ts

@@ -1,23 +1,2 @@
-import { HtmlInterface, OneElementChildren } from "./ElementInterface";
-import { ViewControllerInterface } from "./utils";
-export type SectionItemType = 'static' | 'dynamic' | 'async' | 'reactive';
-export type SectionContentType = 'text' | 'html';
-export type SectionContentRenderer = (parentElement?: HtmlInterface | null | undefined) => string | OneElementChildren;
-export type SectionConstruvtorArgs = {
-    ctx?: ViewControllerInterface | null;
-    name: string;
-    type: SectionItemType;
-    contentType?: SectionContentType;
-    stateKeys?: string[];
-    renderFactory: SectionContentRenderer;
-    [key: string]: any;
-};
-export interface SectionInterface {
-    ctx?: ViewControllerInterface | null;
-    name: string;
-    type: SectionItemType;
-    contentType?: SectionContentType;
-    stateKeys?: string[];
-    renderFactory?: SectionContentRenderer;
-}
+export {};
 //# sourceMappingURL=views.d.ts.map

package/dist/src/core/contracts/views.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../../../src/core/contracts/views.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACvE,OAAO,EAAE,uBAAuB,EAAE,MAAM,SAAS,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAC1E,MAAM,MAAM,kBAAkB,GAAG,MAAM,GAAG,MAAM,CAAA;AAChD,MAAM,MAAM,sBAAsB,GAAG,CAAC,aAAa,CAAC,EAAE,aAAa,GAAG,IAAI,GAAG,SAAS,KAAK,MAAM,GAAG,kBAAkB,CAAC;AACvH,MAAM,MAAM,sBAAsB,GAAG;IACjC,GAAG,CAAC,EAAE,uBAAuB,GAAG,IAAI,CAAC;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,aAAa,EAAE,sBAAsB,CAAC;IACtC,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB,CAAA;AACD,MAAM,WAAW,gBAAgB;IAC7B,GAAG,CAAC,EAAG,uBAAuB,GAAG,IAAI,CAAC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,CAAC;IACtB,WAAW,CAAC,EAAE,kBAAkB,CAAC;IACjC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;IACrB,aAAa,CAAC,EAAE,sBAAsB,CAAC;CAC1C"}
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../../../src/core/contracts/views.ts"],"names":[],"mappings":""}

package/dist/src/core/devtools/hook.d.ts

@@ -0,0 +1,66 @@
+/**
+ * DevTools runtime hook (GAP-05).
+ *
+ * Nền tảng cho MỌI UI devtools (overlay in-page, browser extension sau này):
+ * runtime chỉ phát sự kiện + cho phép đọc snapshot, KHÔNG biết gì về UI.
+ *
+ * Thiết kế:
+ *   - **Tắt mặc định, zero-cost.** `emit()` thoát ngay ở dòng đầu khi chưa bật.
+ *     Không tạo object, không serialize — không được làm chậm production.
+ *   - Bật bằng `App.devtools.enable()` hoặc đặt sẵn `window.__SAOLA_DEVTOOLS_HOOK__`
+ *     TRƯỚC khi app boot (cách extension sẽ dùng: content script inject sớm).
+ *   - Snapshot đọc từ ViewManager/ViewController, không giữ state riêng →
+ *     không có nguồn sự thật thứ hai để lệch.
+ */
+export type DevtoolsEventType = 'view:mounted' | 'view:destroyed' | 'state:changed' | 'error';
+export interface DevtoolsEvent {
+    type: DevtoolsEventType;
+    /** ms từ lúc trang load — đủ để xếp thứ tự trên timeline */
+    at: number;
+    viewId?: string;
+    path?: string;
+    /** state:changed → key nào đổi; error → phase */
+    detail?: any;
+}
+export interface DevtoolsViewNode {
+    viewId: string;
+    path: string;
+    viewType: string;
+    lifecycleState: string;
+    /** Ảnh chụp state hiện tại (đã lọc giá trị không serialize được) */
+    state: Record<string, any>;
+    /** Số element đang giữ trong registry — dò rò rỉ */
+    elementCount: number;
+    children: DevtoolsViewNode[];
+}
+type Listener = (e: DevtoolsEvent) => void;
+declare class DevtoolsHook {
+    private enabled;
+    private listeners;
+    /** Vòng đệm — devtools mở muộn vẫn xem được lịch sử gần đây */
+    private log;
+    /** ViewManager, gán lúc boot; dùng any để tránh vòng import */
+    private viewManager;
+    isEnabled(): boolean;
+    enable(): void;
+    disable(): void;
+    /** ViewManager tự đăng ký lúc init — hook không đi tìm global. */
+    attach(viewManager: any): void;
+    subscribe(fn: Listener): () => void;
+    /** Hot path — phải rẻ khi tắt. */
+    emit(type: DevtoolsEventType, data?: Omit<DevtoolsEvent, 'type' | 'at'>): void;
+    getLog(): DevtoolsEvent[];
+    clearLog(): void;
+    /** Cây view đang mount: layout chain (ngoài → trong) rồi tới page. */
+    getViewTree(): DevtoolsViewNode[];
+    private toNode;
+    /**
+     * Ảnh chụp state — mọi giá trị đi qua JSON round-trip để cắt tham chiếu
+     * DOM/hàm/vòng lặp: devtools không được giữ sống object của app, và
+     * không được nổ khi state chứa cấu trúc vòng.
+     */
+    private snapshotState;
+}
+export declare const devtools: DevtoolsHook;
+export default devtools;
+//# sourceMappingURL=hook.d.ts.map

package/dist/src/core/devtools/hook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.d.ts","sourceRoot":"","sources":["../../../../src/core/devtools/hook.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,iBAAiB,GACvB,cAAc,GAAG,gBAAgB,GACjC,eAAe,GACf,OAAO,CAAC;AAEd,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,iBAAiB,CAAC;IACxB,4DAA4D;IAC5D,EAAE,EAAE,MAAM,CAAC;IACX,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,iDAAiD;IACjD,MAAM,CAAC,EAAE,GAAG,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,cAAc,EAAE,MAAM,CAAC;IACvB,oEAAoE;IACpE,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,oDAAoD;IACpD,YAAY,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;CAChC;AAED,KAAK,QAAQ,GAAG,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;AAI3C,cAAM,YAAY;IACd,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,SAAS,CAAkB;IACnC,+DAA+D;IAC/D,OAAO,CAAC,GAAG,CAAuB;IAClC,+DAA+D;IAC/D,OAAO,CAAC,WAAW,CAAa;IAEhC,SAAS,IAAI,OAAO;IAEpB,MAAM,IAAI,IAAI;IACd,OAAO,IAAI,IAAI;IAEf,kEAAkE;IAClE,MAAM,CAAC,WAAW,EAAE,GAAG,GAAG,IAAI;IAE9B,SAAS,CAAC,EAAE,EAAE,QAAQ,GAAG,MAAM,IAAI;IAKnC,kCAAkC;IAClC,IAAI,CAAC,IAAI,EAAE,iBAAiB,EAAE,IAAI,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI;IAU9E,MAAM,IAAI,aAAa,EAAE;IACzB,QAAQ,IAAI,IAAI;IAEhB,sEAAsE;IACtE,WAAW,IAAI,gBAAgB,EAAE;IAUjC,OAAO,CAAC,MAAM;IAYd;;;;OAIG;IACH,OAAO,CAAC,aAAa;CAaxB;AAED,eAAO,MAAM,QAAQ,cAAqB,CAAC;AAiB3C,eAAe,QAAQ,CAAC"}

package/dist/src/core/devtools/hook.js

@@ -0,0 +1,114 @@
+/**
+ * DevTools runtime hook (GAP-05).
+ *
+ * Nền tảng cho MỌI UI devtools (overlay in-page, browser extension sau này):
+ * runtime chỉ phát sự kiện + cho phép đọc snapshot, KHÔNG biết gì về UI.
+ *
+ * Thiết kế:
+ *   - **Tắt mặc định, zero-cost.** `emit()` thoát ngay ở dòng đầu khi chưa bật.
+ *     Không tạo object, không serialize — không được làm chậm production.
+ *   - Bật bằng `App.devtools.enable()` hoặc đặt sẵn `window.__SAOLA_DEVTOOLS_HOOK__`
+ *     TRƯỚC khi app boot (cách extension sẽ dùng: content script inject sớm).
+ *   - Snapshot đọc từ ViewManager/ViewController, không giữ state riêng →
+ *     không có nguồn sự thật thứ hai để lệch.
+ */
+const MAX_LOG = 200;
+class DevtoolsHook {
+    constructor() {
+        this.enabled = false;
+        this.listeners = [];
+        /** Vòng đệm — devtools mở muộn vẫn xem được lịch sử gần đây */
+        this.log = [];
+        /** ViewManager, gán lúc boot; dùng any để tránh vòng import */
+        this.viewManager = null;
+    }
+    isEnabled() { return this.enabled; }
+    enable() { this.enabled = true; }
+    disable() { this.enabled = false; this.log = []; }
+    /** ViewManager tự đăng ký lúc init — hook không đi tìm global. */
+    attach(viewManager) { this.viewManager = viewManager; }
+    subscribe(fn) {
+        this.listeners.push(fn);
+        return () => { this.listeners = this.listeners.filter(l => l !== fn); };
+    }
+    /** Hot path — phải rẻ khi tắt. */
+    emit(type, data) {
+        if (!this.enabled)
+            return;
+        const event = { type, at: Math.round(performance.now()), ...data };
+        this.log.push(event);
+        if (this.log.length > MAX_LOG)
+            this.log.shift();
+        for (const fn of this.listeners) {
+            try {
+                fn(event);
+            }
+            catch (e) {
+                console.error('[Devtools] listener error:', e);
+            }
+        }
+    }
+    getLog() { return [...this.log]; }
+    clearLog() { this.log = []; }
+    /** Cây view đang mount: layout chain (ngoài → trong) rồi tới page. */
+    getViewTree() {
+        const vm = this.viewManager;
+        if (!vm)
+            return [];
+        const roots = [...(vm.getLayoutChain?.() ?? []), vm.getCurrentView?.()].filter(Boolean);
+        // Layout chain và page nối nhau theo thứ tự mount, không phải quan hệ
+        // parent/children (quan hệ đó chỉ dùng cho @include) → dựng phẳng ở
+        // gốc, rồi mỗi node mở rộng theo ctrl.children thật.
+        return roots.map(v => this.toNode(v.__ctrl__));
+    }
+    toNode(ctrl) {
+        return {
+            viewId: ctrl.viewId,
+            path: ctrl.path,
+            viewType: ctrl.viewType,
+            lifecycleState: ctrl.lifecycleState,
+            state: this.snapshotState(ctrl),
+            elementCount: ctrl.elements?.size ?? 0,
+            children: (ctrl.children ?? []).map((c) => this.toNode(c)),
+        };
+    }
+    /**
+     * Ảnh chụp state — mọi giá trị đi qua JSON round-trip để cắt tham chiếu
+     * DOM/hàm/vòng lặp: devtools không được giữ sống object của app, và
+     * không được nổ khi state chứa cấu trúc vòng.
+     */
+    snapshotState(ctrl) {
+        const out = {};
+        const states = ctrl.states?.__?.states ?? {};
+        for (const key of Object.keys(states)) {
+            try {
+                const value = states[key]?.value; // computed: getter → tính lại ở đây
+                out[key] = value === undefined ? undefined : JSON.parse(JSON.stringify(value));
+            }
+            catch {
+                out[key] = '[không serialize được]';
+            }
+        }
+        return out;
+    }
+}
+export const devtools = new DevtoolsHook();
+/**
+ * Nếu môi trường đã cắm sẵn `window.__SAOLA_DEVTOOLS_HOOK__` trước khi app boot
+ * (browser extension làm vậy), tự bật và nối sự kiện sang đó.
+ */
+if (typeof window !== 'undefined') {
+    const external = window.__SAOLA_DEVTOOLS_HOOK__;
+    if (external) {
+        devtools.enable();
+        devtools.subscribe((e) => { try {
+            external.onEvent?.(e);
+        }
+        catch { /* của bên thứ 3 */ } });
+        external.getViewTree = () => devtools.getViewTree();
+        external.getLog = () => devtools.getLog();
+    }
+    window.__SAOLA_DEVTOOLS__ = devtools;
+}
+export default devtools;
+//# sourceMappingURL=hook.js.map

package/dist/src/core/devtools/hook.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hook.js","sourceRoot":"","sources":["../../../../src/core/devtools/hook.ts"],"names":[],"mappings":"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"}

package/dist/src/core/devtools/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * DevTools — API công khai, gắn vào DI container dưới tên `Devtools`
+ * (dùng `app('Devtools')` hoặc `App.devtools`).
+ *
+ * Tắt hoàn toàn mặc định: `emit()` thoát ngay ở dòng đầu khi chưa bật, nên
+ * production không trả phí gì ngoài vài hàm không bao giờ chạy.
+ *
+ * @example
+ * App.devtools.open();              // bật + mở panel
+ * App.devtools.enableShortcut();    // Ctrl+Shift+D bật/tắt panel
+ * App.devtools.getViewTree();       // đọc cây view bằng code
+ */
+import devtools from './hook.js';
+import inspector from './inspector.js';
+export declare const Devtools: {
+    /** Bật thu thập sự kiện (chưa mở UI) — dùng khi chỉ cần đọc bằng code. */
+    enable: () => void;
+    disable: () => void;
+    isEnabled: () => boolean;
+    /** Bật + mở panel in-page. */
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    isOpen: () => boolean;
+    enableShortcut: () => void;
+    getViewTree: () => import("./hook.js").DevtoolsViewNode[];
+    getLog: () => import("./hook.js").DevtoolsEvent[];
+    clearLog: () => void;
+    subscribe: (fn: Parameters<typeof devtools.subscribe>[0]) => () => void;
+};
+export { devtools, inspector };
+export type { DevtoolsEvent, DevtoolsEventType, DevtoolsViewNode } from './hook.js';
+export default Devtools;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/core/devtools/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/core/devtools/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,SAAmC,MAAM,gBAAgB,CAAC;AAEjE,eAAO,MAAM,QAAQ;IACjB,0EAA0E;;;;IAK1E,8BAA8B;;;;;;;;;oBAWd,UAAU,CAAC,OAAO,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;CAC3D,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAC/B,YAAY,EAAE,aAAa,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,WAAW,CAAC;AACpF,eAAe,QAAQ,CAAC"}

package/dist/src/core/devtools/index.js

@@ -0,0 +1,33 @@
+/**
+ * DevTools — API công khai, gắn vào DI container dưới tên `Devtools`
+ * (dùng `app('Devtools')` hoặc `App.devtools`).
+ *
+ * Tắt hoàn toàn mặc định: `emit()` thoát ngay ở dòng đầu khi chưa bật, nên
+ * production không trả phí gì ngoài vài hàm không bao giờ chạy.
+ *
+ * @example
+ * App.devtools.open();              // bật + mở panel
+ * App.devtools.enableShortcut();    // Ctrl+Shift+D bật/tắt panel
+ * App.devtools.getViewTree();       // đọc cây view bằng code
+ */
+import devtools from './hook.js';
+import inspector, { bindDevtoolsShortcut } from './inspector.js';
+export const Devtools = {
+    /** Bật thu thập sự kiện (chưa mở UI) — dùng khi chỉ cần đọc bằng code. */
+    enable: () => devtools.enable(),
+    disable: () => { inspector.close(); devtools.disable(); },
+    isEnabled: () => devtools.isEnabled(),
+    /** Bật + mở panel in-page. */
+    open: () => inspector.open(),
+    close: () => inspector.close(),
+    toggle: () => inspector.toggle(),
+    isOpen: () => inspector.isOpen(),
+    enableShortcut: () => bindDevtoolsShortcut(),
+    getViewTree: () => devtools.getViewTree(),
+    getLog: () => devtools.getLog(),
+    clearLog: () => devtools.clearLog(),
+    subscribe: (fn) => devtools.subscribe(fn),
+};
+export { devtools, inspector };
+export default Devtools;
+//# sourceMappingURL=index.js.map

package/dist/src/core/devtools/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/core/devtools/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,QAAQ,MAAM,WAAW,CAAC;AACjC,OAAO,SAAS,EAAE,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AAEjE,MAAM,CAAC,MAAM,QAAQ,GAAG;IACpB,0EAA0E;IAC1E,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE;IAC/B,OAAO,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,KAAK,EAAE,CAAC,CAAC,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;IACzD,SAAS,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE;IAErC,8BAA8B;IAC9B,IAAI,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,EAAE;IAC5B,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,EAAE;IAC9B,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE;IAChC,MAAM,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE;IAEhC,cAAc,EAAE,GAAG,EAAE,CAAC,oBAAoB,EAAE;IAE5C,WAAW,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,WAAW,EAAE;IACzC,MAAM,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,MAAM,EAAE;IAC/B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,QAAQ,EAAE;IACnC,SAAS,EAAE,CAAC,EAA4C,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,EAAE,CAAC;CACtF,CAAC;AAEF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;AAE/B,eAAe,QAAQ,CAAC"}

package/dist/src/core/devtools/inspector.d.ts

@@ -0,0 +1,31 @@
+declare class Inspector {
+    private panel;
+    private unsubscribe;
+    private refreshQueued;
+    private selectedViewId;
+    isOpen(): boolean;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    private queueRefresh;
+    private buildPanel;
+    private button;
+    private section;
+    private refresh;
+    private muted;
+    private renderNode;
+    private renderEvent;
+    private describe;
+    /**
+     * View không có 1 element bọc ngoài (kiến trúc marker, no-VDOM) → lấy
+     * bounding box của TẤT CẢ node giữa cặp marker `<!--s:v:{viewId}-s/-e-->`.
+     */
+    private highlight;
+    private rangeOfView;
+    private clearHighlight;
+}
+export declare const inspector: Inspector;
+/** Ctrl+Shift+D bật/tắt panel — chỉ gắn khi devtools đã enable. */
+export declare function bindDevtoolsShortcut(): void;
+export default inspector;
+//# sourceMappingURL=inspector.d.ts.map

package/dist/src/core/devtools/inspector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.d.ts","sourceRoot":"","sources":["../../../../src/core/devtools/inspector.ts"],"names":[],"mappings":"AAoBA,cAAM,SAAS;IACX,OAAO,CAAC,KAAK,CAA4B;IACzC,OAAO,CAAC,WAAW,CAA6B;IAChD,OAAO,CAAC,aAAa,CAAS;IAC9B,OAAO,CAAC,cAAc,CAAuB;IAE7C,MAAM,IAAI,OAAO;IAEjB,IAAI,IAAI,IAAI;IAaZ,KAAK,IAAI,IAAI;IAQb,MAAM,IAAI,IAAI;IAEd,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,UAAU;IA4BlB,OAAO,CAAC,MAAM;IAQd,OAAO,CAAC,OAAO;IASf,OAAO,CAAC,OAAO;IAmBf,OAAO,CAAC,KAAK;IAOb,OAAO,CAAC,UAAU;IAkDlB,OAAO,CAAC,WAAW;IAwBnB,OAAO,CAAC,QAAQ;IAQhB;;;OAGG;IACH,OAAO,CAAC,SAAS;IAkBjB,OAAO,CAAC,WAAW;IAiBnB,OAAO,CAAC,cAAc;CAGzB;AAED,eAAO,MAAM,SAAS,WAAkB,CAAC;AAEzC,mEAAmE;AACnE,wBAAgB,oBAAoB,IAAI,IAAI,CAQ3C;AAED,eAAe,SAAS,CAAC"}

package/dist/src/core/devtools/inspector.js

@@ -0,0 +1,249 @@
+/**
+ * DevTools inspector — panel in-page, không cần cài extension.
+ *
+ * Vì sao overlay chứ không phải browser extension: extension cần scaffolding
+ * riêng (manifest, content script, bridge, publish store) mà vẫn hiển thị đúng
+ * dữ liệu này. Overlay chạy ngay ở mọi môi trường (kể cả máy khác, mobile
+ * webview) với chi phí nhỏ hơn nhiều. Hook (`devtools/hook.ts`) đã tách riêng
+ * nên extension vẫn dựng được sau này trên CÙNG nguồn dữ liệu.
+ *
+ * Bật:  App.devtools.open()   — hoặc Ctrl+Shift+D sau khi App.devtools.enable()
+ *
+ * Toàn bộ DOM của panel dựng bằng createElement + textContent — panel hiển thị
+ * state/đường dẫn/thông báo lỗi do người dùng kiểm soát, nội suy chuỗi vào
+ * innerHTML ở đây là đường tiêm HTML (đúng lỗi đã vá ở GAP-07).
+ */
+import devtools from './hook.js';
+const PANEL_ID = '__saola_devtools_panel__';
+const HIGHLIGHT_ID = '__saola_devtools_highlight__';
+class Inspector {
+    constructor() {
+        this.panel = null;
+        this.unsubscribe = null;
+        this.refreshQueued = false;
+        this.selectedViewId = null;
+    }
+    isOpen() { return this.panel !== null; }
+    open() {
+        if (this.panel || typeof document === 'undefined')
+            return;
+        devtools.enable();
+        this.panel = this.buildPanel();
+        document.body.appendChild(this.panel);
+        // Gom nhiều sự kiện trong cùng frame thành 1 lần vẽ — state đổi có thể
+        // bắn hàng loạt, vẽ lại từng cái sẽ tự làm chậm chính app đang debug.
+        this.unsubscribe = devtools.subscribe(() => this.queueRefresh());
+        this.refresh();
+    }
+    close() {
+        this.unsubscribe?.();
+        this.unsubscribe = null;
+        this.panel?.remove();
+        this.panel = null;
+        this.clearHighlight();
+    }
+    toggle() { this.isOpen() ? this.close() : this.open(); }
+    queueRefresh() {
+        if (this.refreshQueued)
+            return;
+        this.refreshQueued = true;
+        requestAnimationFrame(() => { this.refreshQueued = false; this.refresh(); });
+    }
+    // ── Dựng khung ────────────────────────────────────────────────
+    buildPanel() {
+        const panel = document.createElement('div');
+        panel.id = PANEL_ID;
+        panel.style.cssText = [
+            'position:fixed', 'right:12px', 'bottom:12px', 'width:380px', 'max-height:70vh',
+            'z-index:2147483647', 'display:flex', 'flex-direction:column',
+            'background:#1e1e2e', 'color:#cdd6f4', 'border:1px solid #45475a', 'border-radius:8px',
+            'font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace',
+            'box-shadow:0 8px 32px rgba(0,0,0,.4)', 'overflow:hidden',
+        ].join(';');
+        const header = document.createElement('div');
+        header.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 10px;background:#181825;border-bottom:1px solid #45475a';
+        const title = document.createElement('strong');
+        title.textContent = 'Saola DevTools';
+        title.style.cssText = 'flex:1;color:#89b4fa';
+        const btnClear = this.button('Xoá log', () => { devtools.clearLog(); this.refresh(); });
+        const btnClose = this.button('✕', () => this.close());
+        header.append(title, btnClear, btnClose);
+        const body = document.createElement('div');
+        body.setAttribute('data-role', 'body');
+        body.style.cssText = 'overflow:auto;padding:8px 10px';
+        panel.append(header, body);
+        return panel;
+    }
+    button(label, onClick) {
+        const b = document.createElement('button');
+        b.textContent = label;
+        b.style.cssText = 'background:#313244;color:#cdd6f4;border:1px solid #45475a;border-radius:4px;padding:2px 8px;cursor:pointer;font:inherit';
+        b.addEventListener('click', onClick);
+        return b;
+    }
+    section(label) {
+        const h = document.createElement('div');
+        h.textContent = label;
+        h.style.cssText = 'margin:10px 0 4px;color:#a6adc8;text-transform:uppercase;font-size:10px;letter-spacing:.08em';
+        return h;
+    }
+    // ── Vẽ nội dung ───────────────────────────────────────────────
+    refresh() {
+        const body = this.panel?.querySelector('[data-role="body"]');
+        if (!body)
+            return;
+        body.replaceChildren();
+        const tree = devtools.getViewTree();
+        body.append(this.section(`Cây view (${tree.length} gốc)`));
+        if (tree.length === 0) {
+            body.append(this.muted('Chưa có view nào mount.'));
+        }
+        else {
+            for (const node of tree)
+                body.append(this.renderNode(node, 0));
+        }
+        const log = devtools.getLog().slice(-25).reverse();
+        body.append(this.section(`Sự kiện gần đây (${log.length})`));
+        if (log.length === 0)
+            body.append(this.muted('Chưa có sự kiện.'));
+        else
+            for (const e of log)
+                body.append(this.renderEvent(e));
+    }
+    muted(text) {
+        const d = document.createElement('div');
+        d.textContent = text;
+        d.style.cssText = 'color:#6c7086;padding:2px 0';
+        return d;
+    }
+    renderNode(node, depth) {
+        const wrap = document.createElement('div');
+        wrap.style.cssText = `margin-left:${depth * 12}px`;
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;gap:6px;align-items:baseline;padding:2px 4px;border-radius:4px;cursor:pointer';
+        row.addEventListener('mouseenter', () => this.highlight(node.viewId));
+        row.addEventListener('mouseleave', () => this.clearHighlight());
+        row.addEventListener('click', () => {
+            this.selectedViewId = this.selectedViewId === node.viewId ? null : node.viewId;
+            this.refresh();
+        });
+        const path = document.createElement('span');
+        path.textContent = node.path || '(không tên)';
+        path.style.cssText = 'color:#a6e3a1;flex:1';
+        const meta = document.createElement('span');
+        meta.textContent = `${node.viewType} · ${node.lifecycleState} · ${node.elementCount}el`;
+        meta.style.cssText = `color:${node.lifecycleState === 'active' ? '#6c7086' : '#f9e2af'};font-size:10px`;
+        row.append(path, meta);
+        wrap.append(row);
+        // Bấm để mở/đóng state — mặc định đóng cho gọn khi cây lớn
+        if (this.selectedViewId === node.viewId) {
+            const keys = Object.keys(node.state);
+            if (keys.length === 0) {
+                wrap.append(this.muted('  (không có state)'));
+            }
+            else {
+                for (const key of keys) {
+                    const line = document.createElement('div');
+                    line.style.cssText = 'display:flex;gap:6px;padding-left:10px';
+                    const k = document.createElement('span');
+                    k.textContent = key + ':';
+                    k.style.cssText = 'color:#f5c2e7';
+                    const v = document.createElement('span');
+                    // textContent — state có thể chứa chuỗi do người dùng nhập
+                    v.textContent = JSON.stringify(node.state[key]) ?? 'undefined';
+                    v.style.cssText = 'color:#cdd6f4;word-break:break-all';
+                    line.append(k, v);
+                    wrap.append(line);
+                }
+            }
+        }
+        for (const child of node.children)
+            wrap.append(this.renderNode(child, depth + 1));
+        return wrap;
+    }
+    renderEvent(e) {
+        const colors = {
+            'view:mounted': '#a6e3a1', 'view:destroyed': '#f38ba8',
+            'state:changed': '#89b4fa', 'error': '#fab387',
+        };
+        const row = document.createElement('div');
+        row.style.cssText = 'display:flex;gap:6px;padding:1px 0';
+        const t = document.createElement('span');
+        t.textContent = String(e.at).padStart(6, ' ');
+        t.style.cssText = 'color:#6c7086;flex-shrink:0';
+        const type = document.createElement('span');
+        type.textContent = e.type;
+        type.style.cssText = `color:${colors[e.type] ?? '#cdd6f4'};flex-shrink:0`;
+        const detail = document.createElement('span');
+        detail.textContent = this.describe(e);
+        detail.style.cssText = 'color:#a6adc8;word-break:break-all';
+        row.append(t, type, detail);
+        return row;
+    }
+    describe(e) {
+        if (e.type === 'state:changed')
+            return `${e.path ?? ''} [${(e.detail?.keys ?? []).join(', ')}]`;
+        if (e.type === 'error')
+            return `${e.detail?.phase ?? ''} ${e.path ?? ''}: ${e.detail?.message ?? ''}`;
+        return e.path ?? '';
+    }
+    // ── Highlight vùng DOM của view theo marker ───────────────────
+    /**
+     * View không có 1 element bọc ngoài (kiến trúc marker, no-VDOM) → lấy
+     * bounding box của TẤT CẢ node giữa cặp marker `<!--s:v:{viewId}-s/-e-->`.
+     */
+    highlight(viewId) {
+        this.clearHighlight();
+        const range = this.rangeOfView(viewId);
+        if (!range)
+            return;
+        const rect = range.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0)
+            return;
+        const box = document.createElement('div');
+        box.id = HIGHLIGHT_ID;
+        box.style.cssText = [
+            'position:fixed', `left:${rect.left}px`, `top:${rect.top}px`,
+            `width:${rect.width}px`, `height:${rect.height}px`,
+            'background:rgba(137,180,250,.25)', 'border:1px solid #89b4fa',
+            'pointer-events:none', 'z-index:2147483646',
+        ].join(';');
+        document.body.appendChild(box);
+    }
+    rangeOfView(viewId) {
+        const walker = document.createTreeWalker(document.body, NodeFilter.SHOW_COMMENT);
+        let open = null;
+        let node;
+        while ((node = walker.nextNode())) {
+            const v = node.nodeValue?.trim() ?? '';
+            if (v === `s:v:${viewId}-s`) {
+                open = node;
+                continue;
+            }
+            if (open && v === `s:v:${viewId}-e`) {
+                const range = document.createRange();
+                range.setStartAfter(open);
+                range.setEndBefore(node);
+                return range;
+            }
+        }
+        return null;
+    }
+    clearHighlight() {
+        document.getElementById(HIGHLIGHT_ID)?.remove();
+    }
+}
+export const inspector = new Inspector();
+/** Ctrl+Shift+D bật/tắt panel — chỉ gắn khi devtools đã enable. */
+export function bindDevtoolsShortcut() {
+    if (typeof window === 'undefined')
+        return;
+    window.addEventListener('keydown', (e) => {
+        if (e.ctrlKey && e.shiftKey && (e.key === 'D' || e.key === 'd')) {
+            e.preventDefault();
+            inspector.toggle();
+        }
+    });
+}
+export default inspector;
+//# sourceMappingURL=inspector.js.map

package/dist/src/core/devtools/inspector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inspector.js","sourceRoot":"","sources":["../../../../src/core/devtools/inspector.ts"],"names":[],"mappings":"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"}

package/dist/src/core/elements/Block.d.ts

@@ -1,8 +1,8 @@
-import type { BlockInterface, BlockRenderFactory } from "../contracts/BlockInterface";
-import { InitMode } from "../contracts/common";
-import type { FragmentInterface, HtmlInterface } from "../contracts/ElementInterface";
-import type { ViewControllerInterface } from "../contracts/ViewControllerInterface";
-import type { OneObjectType } from "../types/utils";
+import type { BlockInterface, BlockRenderFactory } from "../contracts/BlockInterface.js";
+import { InitMode } from "../contracts/common.js";
+import type { FragmentInterface, HtmlInterface } from "../contracts/ElementInterface.js";
+import type { ViewControllerInterface } from "../contracts/ViewControllerInterface.js";
+import type { SaoObjectType } from "../types/utils.js";
 /**
  * Block — a named mounting slot used in layout views.
  *
@@ -22,11 +22,13 @@ import type { OneObjectType } from "../types/utils";
  *   4. Browser back → BlockManager restores cached content without re-render
  */
 export declare class Block implements BlockInterface {
-    oneType: OneObjectType;
+    saoType: SaoObjectType;
     id: string;
     name: string;
     ctx: ViewControllerInterface;
     viewId: string | null;
+    /** Key trả về bởi markerRegistry.register — destroy() dùng để gỡ lại */
+    private markerKey;
     fragment: FragmentInterface | null;
     contentRenderFactory: BlockRenderFactory | null;
     openTag: Comment;
@@ -35,7 +37,7 @@ export declare class Block implements BlockInterface {
     initMode?: InitMode | undefined;
     parentElement: HtmlInterface | null;
     readonly isOneBlock = true;
-    readonly isOneElement = false;
+    readonly isSaoElement = false;
     constructor({ ctx, name, viewId, contentRenderFactory, id, initMode }: {
         ctx: ViewControllerInterface;
         name: string;