@dimina-kit/devtools 0.2.0 → 0.3.1

package/dist/main/services/default-adapter.js

@@ -1,8 +1,6 @@
 import path from 'path';
-import { fileURLToPath } from 'url';
 import { app } from 'electron';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const simulatorDir = path.resolve(__dirname, '../../simulator');
+import { simulatorDir } from '../utils/paths.js';
 export const defaultAdapter = {
     async openProject(opts) {
         const diminaKit = await import('@dimina-kit/devkit');

package/dist/main/services/projects/project-repository.js

@@ -22,6 +22,12 @@ export function listProjects() {
     return load();
 }
 export function validateProjectDir(dirPath) {
+    if (!dirPath) {
+        return '小程序目录路径为空，请选择包含小程序源码的目录';
+    }
+    if (!fs.existsSync(dirPath)) {
+        return `小程序目录不存在：${dirPath}`;
+    }
     if (!fs.existsSync(path.join(dirPath, 'app.json'))) {
         const configPath = path.join(dirPath, 'project.config.json');
         if (fs.existsSync(configPath)) {

package/dist/main/services/simulator/dir.d.ts

@@ -1,2 +1,2 @@
-export declare const simulatorDir: string;
+export { simulatorDir } from '../../utils/paths.js';
 //# sourceMappingURL=dir.d.ts.map

package/dist/main/services/simulator/dir.js

@@ -1,5 +1,2 @@
-import path from 'path';
-import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export const simulatorDir = path.join(__dirname, '../../../simulator');
+export { simulatorDir } from '../../utils/paths.js';
 //# sourceMappingURL=dir.js.map

package/dist/main/services/simulator-storage/index.js

@@ -16,7 +16,7 @@
  *     events stop flowing until they close it.
  */
 import { app, ipcMain, webContents as wcStatic } from 'electron';
-import { SimulatorStorageChannel, } from '../../../shared/ipc-channels.js';
+import { SimulatorElementChannel, SimulatorStorageChannel, } from '../../../shared/ipc-channels.js';
 let attachedWc = null;
 let hostWc = null;
 function isSimulatorWebview(wc) {
@@ -108,6 +108,43 @@ async function getSnapshot() {
         return [];
     }
 }
+// Element inspection delegates to the simulator preload's __simulatorData
+// bridge via executeJavaScript. Looked up independently from `attachedWc` so
+// it keeps working when the user opens Chrome DevTools and the storage
+// debugger detaches (debugger.attach is mutually exclusive with F12).
+function findSimulatorWebContents() {
+    for (const wc of wcStatic.getAllWebContents()) {
+        if (isSimulatorWebview(wc))
+            return wc;
+    }
+    return null;
+}
+async function inspectElement(sid) {
+    if (!sid)
+        return null;
+    const sim = findSimulatorWebContents();
+    if (!sim)
+        return null;
+    try {
+        const result = (await sim.executeJavaScript(`window.__simulatorData && window.__simulatorData.highlightElement ? window.__simulatorData.highlightElement(${JSON.stringify(sid)}) : null`));
+        return result ?? null;
+    }
+    catch (e) {
+        console.warn('[simulator-element] inspect failed:', e.message);
+        return null;
+    }
+}
+async function clearElementInspection() {
+    const sim = findSimulatorWebContents();
+    if (!sim)
+        return;
+    try {
+        await sim.executeJavaScript('window.__simulatorData && window.__simulatorData.unhighlightElement && window.__simulatorData.unhighlightElement()');
+    }
+    catch {
+        // best-effort
+    }
+}
 export function setupSimulatorStorage(host) {
     hostWc = host;
     // Attach to any simulator webview that already exists (project may have
@@ -132,5 +169,7 @@ export function setupSimulatorStorage(host) {
         });
     });
     ipcMain.handle(SimulatorStorageChannel.GetSnapshot, getSnapshot);
+    ipcMain.handle(SimulatorElementChannel.Inspect, (_event, sid) => inspectElement(sid));
+    ipcMain.handle(SimulatorElementChannel.Clear, clearElementInspection);
 }
 //# sourceMappingURL=index.js.map

package/dist/main/services/workspace/workspace-service.js

@@ -45,6 +45,18 @@ export function createWorkspaceService(ctx) {
             clearSimulatorServicewechatReferer();
             await disposeSession();
             currentProjectPath = '';
+            // Reject obviously broken projects up front so we never spin up a
+            // compile/server that the simulator will then fetch asset-by-asset.
+            // Without this guard, deleted recent-list entries and typo'd CLI paths
+            // ride all the way through to the container runtime, whose
+            // `fetch(…).then(r=>r.text()).then(JSON.parse)` pipeline dies on the
+            // dev server's HTML SPA fallback with
+            // `SyntaxError: Unexpected token '<', "<!doctype "…`.
+            const dirError = repo.validateProjectDir(projectPath);
+            if (dirError) {
+                sendStatus('error', dirError);
+                return { success: false, error: dirError };
+            }
             sendStatus('compiling', '正在编译...');
             let session;
             try {

package/dist/main/utils/paths.d.ts

@@ -1,5 +1,7 @@
+export declare const devtoolsPackageRoot: string;
 export declare const rendererDir: string;
 export declare const defaultPreloadPath: string;
+export declare const simulatorDir: string;
 export declare function getRendererDir(): string;
 export declare function getPreloadDir(): string;
 export declare function getRendererHtml(filename: string): string;

package/dist/main/utils/paths.js

@@ -1,13 +1,36 @@
+import fs from 'fs';
 import path from 'path';
 import { fileURLToPath } from 'url';
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-export const rendererDir = path.join(__dirname, '../../../dist/renderer');
-export const defaultPreloadPath = path.join(__dirname, '../../preload/windows/simulator.js');
+// Hardcoded relative jumps like '../../dist/renderer' break under the
+// esbuild single-file bundle (dist/main/index.bundle.js): every inlined
+// module ends up at the bundle's depth instead of its tsc location, so
+// the math goes off by a directory. Walk up to this package's own
+// package.json so the resolver works for tsc multi-file, the bundle,
+// npm/pnpm node_modules, and asar packaging alike.
+function resolveDevtoolsPackageRoot() {
+    let dir = path.dirname(fileURLToPath(import.meta.url));
+    const root = path.parse(dir).root;
+    while (dir !== root) {
+        const pkgPath = path.join(dir, 'package.json');
+        try {
+            const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+            if (pkg.name === '@dimina-kit/devtools')
+                return dir;
+        }
+        catch { }
+        dir = path.dirname(dir);
+    }
+    throw new Error('@dimina-kit/devtools package root not found from ' + fileURLToPath(import.meta.url));
+}
+export const devtoolsPackageRoot = resolveDevtoolsPackageRoot();
+export const rendererDir = path.join(devtoolsPackageRoot, 'dist/renderer');
+export const defaultPreloadPath = path.join(devtoolsPackageRoot, 'dist/preload/windows/simulator.js');
+export const simulatorDir = path.join(devtoolsPackageRoot, 'dist/simulator');
 export function getRendererDir() {
     return rendererDir;
 }
 export function getPreloadDir() {
-    return path.join(__dirname, '../../preload');
+    return path.join(devtoolsPackageRoot, 'dist/preload');
 }
 export function getRendererHtml(filename) {
     return path.join(rendererDir, filename);

package/dist/preload/instrumentation/wxml-extract.js

@@ -1,3 +1,4 @@
+import { registerSyntheticSid } from '../runtime/bridge.js';
 const INTERNAL_CLASSES = new Set([
     'dd-swiper-wrapper', 'dd-swiper-slides', 'dd-swiper-slide-frame', 'dd-swiper-dots',
     'dd-picker-overlay', 'dd-picker-container', 'dd-picker-header', 'dd-picker-body',
@@ -24,10 +25,44 @@ function resolveTemplateNameFromParent(instance) {
     }
     return null;
 }
+/**
+ * Convert a PascalCase / camelCase identifier to kebab-case. Matches the
+ * upstream `camelCaseToUnderscore` (dimina/fe/packages/common) so a name
+ * already normalized by `withInstall` round-trips identically.
+ * `View` -> `view`, `ScrollView` -> `scroll-view`, `CoverImage` -> `cover-image`.
+ */
+function pascalToKebab(name) {
+    return name.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+}
+/**
+ * Read the page's source path off Vue's provide/inject. dimina runtime.js 在
+ * dd-page 的 setup() 里调用 `provide('path', path)`，Vue 把它存到
+ * `instance.provides`。我们利用这个把页面节点的 tagName 从硬编码 `page`
+ * 升级为页面全路径（如 `pages/index/index`），对齐微信开发者工具。
+ */
+function resolvePagePath(instance) {
+    // dimina runtime 在 dd-page 的 setup 里 `instance.proxy.__page__ = true` 并
+    // `provide('path', path)`。两个标记同时具备才视为页面层级，避免 dd-page
+    // 的子节点继承 provides.path 后被误判（Vue 用 Object.create 链式 provides）。
+    const proxy = instance.proxy;
+    if (proxy?.__page__ !== true)
+        return null;
+    const provides = instance.provides;
+    const path = provides?.path;
+    if (typeof path !== 'string' || !path)
+        return null;
+    return path.startsWith('/') ? path.slice(1) : path;
+}
 function resolveTagName(instance) {
     const type = instance.type;
     if (!type)
         return 'unknown';
+    // 页面层级优先：dd-page 没有 __tagName/__name，且 home 页等无 usingComponents
+    // 的页面 type.components 为 undefined，会落到 resolveTemplateNameFromParent
+    // 回到 'page'。在那之前直接用 provide('path') 的路径升级 tag 名。
+    const pagePath = resolvePagePath(instance);
+    if (pagePath)
+        return pagePath;
     if (typeof type.__tagName === 'string')
         return type.__tagName;
     const name = (type.__name || type.name);
@@ -42,8 +77,16 @@ function resolveTagName(instance) {
         return 'page';
     if (name.startsWith('dd-'))
         return name.slice(3);
+    // Reverse-map Dimina component names back to their miniprogram tag names.
+    // The installer (`withInstall`) sets `__tagName = camelCaseToUnderscore(__name)`,
+    // but in dev builds, custom registrations, or when the installer hasn't run,
+    // we may only see the raw `__name`/`name` (e.g. `View`, `ScrollView`, `DdButton`).
+    // Without this fallback the WXML panel would surface the upstream Vue name
+    // verbatim, defeating the panel's purpose of showing source-level tags.
     if (name.startsWith('Dd') && name.length > 2)
-        return name.slice(2).toLowerCase();
+        return pascalToKebab(name.slice(2));
+    if (/^[A-Z]/.test(name))
+        return pascalToKebab(name);
     return name;
 }
 function extractProps(instance) {
@@ -79,7 +122,12 @@ function isInternalElement(vnode) {
 function getElementSid(instance) {
     const subTree = instance.subTree;
     const el = subTree?.el;
-    return el?.getAttribute ? el.getAttribute('data-sid') ?? undefined : undefined;
+    if (!el?.getAttribute)
+        return undefined;
+    const sid = el.getAttribute('data-sid');
+    if (sid)
+        return sid;
+    return registerSyntheticSid(el);
 }
 function isTransparentComponent(instance, tagName) {
     if (tagName === 'unknown')
@@ -97,9 +145,29 @@ function isTransparentComponent(instance, tagName) {
     }
     return false;
 }
+/**
+ * 检测 Vue 的 Comment vnode（`v-if`/`v-else`/`v-for` 占位锚点）。
+ * Vue 在条件不成立时会留下 `<!-- v-if -->` 这样的注释 vnode 用作 DOM 锚点。
+ * 这些 vnode 不是用户内容，必须从 wxml 树里剔除。
+ *
+ * - dev build：type 是 `Symbol('Comment')`，description = 'Comment' 或 'v-cmt'
+ * - prod build：description 可能丢失，但 children 一般是 'v-if'/'v-else' 等 marker
+ */
+function isCommentVNode(vnode) {
+    const type = vnode.type;
+    if (typeof type !== 'symbol')
+        return false;
+    const desc = type.description;
+    if (desc === 'Comment' || desc === 'v-cmt')
+        return true;
+    const children = typeof vnode.children === 'string' ? vnode.children : '';
+    return /^v-(if|else|else-if|for)$/.test(children);
+}
 function extractChildrenFromVNode(vnode, depth) {
     if (!vnode || depth > 50)
         return [];
+    if (isCommentVNode(vnode))
+        return [];
     if (vnode.component) {
         const result = walkInstance(vnode.component, depth + 1);
         return result ? (Array.isArray(result) ? result : [result]) : [];
@@ -157,6 +225,69 @@ function extractChildrenFromVNode(vnode, depth) {
     }
     return result;
 }
+/**
+ * Reverse-map Dimina's `<wrapper name="/components/foo/foo">` (used to host
+ * every user-defined component) back to the source-level tag the user wrote
+ * in WXML (e.g. `<foo>`).
+ *
+ * The wrapper carries the registered component path in its `name` Vue prop.
+ * By convention (also followed by miniprogram tooling), the registered key is
+ * the last path segment, optionally stripping a trailing `/index`. We can't
+ * see the page's `usingComponents` map from inside the Vue instance, so this
+ * convention-based recovery is best-effort: if the user picked a different
+ * registration key than the directory name (e.g. `usingComponents:
+ * { myCounter: '/components/counter/counter' }`), the panel will show
+ * `counter`, not `myCounter`.
+ *
+ * The path heuristic also resolves a name-collision risk: a user-written
+ * `<counter name="x">` would land in the same `attrs.name` slot as the
+ * wrapper-internal path. We only unwrap when the value looks like an absolute
+ * component path (leading `/`), which dimina always emits but a user would
+ * almost never type as a literal attr.
+ */
+function unwrapCustomComponent(node) {
+    if (node.tagName !== 'wrapper')
+        return node;
+    const path = node.attrs?.name;
+    if (typeof path !== 'string' || !path.startsWith('/'))
+        return node;
+    // 去掉前导 `/` 后保留原路径形式（保留所有斜杠，不做 kebab/dash 转换）。
+    // 仅当路径以 `/index` 结尾且剥离后仍至少剩一段时才剥（`/index` 单独存在则
+    // 退回 wrapper，避免出现空 tagName）。
+    const stripped = path.replace(/^\//, '');
+    const withoutIndex = stripped.endsWith('/index') ? stripped.slice(0, -'/index'.length) : stripped;
+    const recovered = withoutIndex || stripped;
+    if (!recovered || recovered === 'index')
+        return node;
+    const nextAttrs = {};
+    for (const [k, v] of Object.entries(node.attrs)) {
+        if (k === 'name')
+            continue;
+        nextAttrs[k] = v;
+    }
+    return { ...node, tagName: recovered, attrs: nextAttrs };
+}
+/**
+ * 把"用户授权"层级（页面 / 自定义组件，tagName 以路径形式呈现，含 `/`）
+ * 的 children 包一层合成 `#shadow-root`，对齐微信开发者工具：组件本身
+ * 与内部实现之间用 shadow-root 边界视觉分隔。
+ *
+ * 内置组件（view/text/button 等）和合成节点（#text/#fragment）tagName 都
+ * 不含 `/`，自然不会被包裹。children 为空也不插入（避免空壳）。重复调用
+ * 是幂等的：若 children[0] 已经是 #shadow-root 就跳过。
+ */
+function wrapInShadowRoot(node) {
+    if (!node.tagName.includes('/'))
+        return node;
+    if (node.children.length === 0)
+        return node;
+    if (node.children[0]?.tagName === '#shadow-root')
+        return node;
+    return {
+        ...node,
+        children: [{ tagName: '#shadow-root', attrs: {}, children: node.children }],
+    };
+}
 export function walkInstance(instance, depth) {
     if (depth > 50)
         return null;
@@ -168,6 +299,6 @@ export function walkInstance(instance, depth) {
     const sid = getElementSid(instance);
     if (sid)
         node.sid = sid;
-    return node;
+    return wrapInShadowRoot(unwrapCustomComponent(node));
 }
 //# sourceMappingURL=wxml-extract.js.map

package/dist/preload/runtime/bridge.d.ts

@@ -1,3 +1,4 @@
+import type { ElementInspection } from '../../shared/ipc-channels.js';
 export interface WxmlNode {
     tagName: string;
     attrs: Record<string, string>;
@@ -20,7 +21,8 @@ interface SimulatorBridgeState {
     wxml: Snapshot<WxmlNode | WxmlNode[] | null>;
     refreshHandler: ((type: RefreshTarget) => void) | null;
 }
-declare function highlightElement(sid: string): void;
+export declare function registerSyntheticSid(el: HTMLElement): string;
+declare function highlightElement(sid: string): ElementInspection | null;
 declare function unhighlightElement(): void;
 export { highlightElement, unhighlightElement };
 export declare const simulatorBridge: SimulatorBridgeState;

package/dist/preload/runtime/bridge.js

@@ -7,6 +7,38 @@ const state = {
 };
 let highlightOverlay = null;
 let exposedApi = null;
+// 合成 sid 注册表：用 WeakMap 把元素 ↔ sid 双向绑定，避免在源 DOM 上写
+// `data-*` 属性（提取本应只读，且属性形式会污染用户的快照/选择器）。
+// elBySyntheticSid 为反向查找用 WeakRef，元素被 GC 后下次 lookup 自动清理。
+const SYNTHETIC_SID_PREFIX = 'devtools-';
+const syntheticSidByEl = new WeakMap();
+const elBySyntheticSid = new Map();
+let nextSyntheticSid = 1;
+export function registerSyntheticSid(el) {
+    const existing = syntheticSidByEl.get(el);
+    if (existing)
+        return existing;
+    const synthetic = `${SYNTHETIC_SID_PREFIX}${nextSyntheticSid++}`;
+    syntheticSidByEl.set(el, synthetic);
+    elBySyntheticSid.set(synthetic, new WeakRef(el));
+    return synthetic;
+}
+function findElementBySid(doc, sid) {
+    if (sid.startsWith(SYNTHETIC_SID_PREFIX)) {
+        const ref = elBySyntheticSid.get(sid);
+        if (!ref)
+            return null;
+        const el = ref.deref();
+        if (!el || !el.isConnected) {
+            elBySyntheticSid.delete(sid);
+            return null;
+        }
+        if (el.ownerDocument !== doc)
+            return null;
+        return el;
+    }
+    return doc.querySelector(`[data-sid="${CSS.escape(sid)}"]`);
+}
 function clone(value) {
     try {
         return JSON.parse(JSON.stringify(value));
@@ -27,18 +59,20 @@ function ensureOverlay(doc) {
     highlightOverlay.style.cssText =
         'position:fixed;pointer-events:none;z-index:999999;' +
             'border:2px solid #1a73e8;background:rgba(26,115,232,0.12);' +
-            'transition:all 0.1s ease;display:none;border-radius:2px;';
+            'transition:all 0.1s ease;display:none;border-radius:2px;box-sizing:border-box;';
     doc.body.appendChild(highlightOverlay);
     return highlightOverlay;
 }
 function highlightElement(sid) {
+    if (!sid)
+        return null;
     const iframe = getPageIframe();
     if (!iframe?.contentDocument)
-        return;
+        return null;
     const doc = iframe.contentDocument;
-    const el = doc.querySelector(`[data-sid="${sid}"]`);
+    const el = findElementBySid(doc, sid);
     if (!el)
-        return;
+        return null;
     const rect = el.getBoundingClientRect();
     const overlay = ensureOverlay(doc);
     overlay.style.left = `${rect.left}px`;
@@ -46,6 +80,23 @@ function highlightElement(sid) {
     overlay.style.width = `${rect.width}px`;
     overlay.style.height = `${rect.height}px`;
     overlay.style.display = 'block';
+    const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+    if (!style)
+        return null;
+    return {
+        sid,
+        rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+        style: {
+            display: style.display,
+            position: style.position,
+            boxSizing: style.boxSizing,
+            margin: style.margin,
+            padding: style.padding,
+            color: style.color,
+            backgroundColor: style.backgroundColor,
+            fontSize: style.fontSize,
+        },
+    };
 }
 function unhighlightElement() {
     if (highlightOverlay)

package/dist/preload/shared/types.d.ts

@@ -5,6 +5,7 @@
  * window by our preload/instrumentation code.
  */
 import type { Snapshot, StorageSnapshot, WxmlNode } from '../runtime/bridge.js';
+import type { ElementInspection } from '../../shared/ipc-channels.js';
 /** The simulator data bridge exposed via contextBridge. */
 export interface SimulatorDataBridge {
     getAppdata: () => Record<string, unknown>;
@@ -16,7 +17,7 @@ export interface SimulatorDataBridge {
     getWxmlSnapshot: () => Snapshot<WxmlNode | WxmlNode[] | null>;
     getWxmlGen: () => number;
     refresh: (type: 'wxml' | 'appdata' | 'storage') => void;
-    highlightElement: (sid: string) => void;
+    highlightElement: (sid: string) => ElementInspection | null;
     unhighlightElement: () => void;
 }
 /** Hook interface for app data interception. */

package/dist/preload/windows/simulator.js

@@ -10,6 +10,32 @@ var state = {
 };
 var highlightOverlay = null;
 var exposedApi = null;
+var SYNTHETIC_SID_PREFIX = "devtools-";
+var syntheticSidByEl = /* @__PURE__ */ new WeakMap();
+var elBySyntheticSid = /* @__PURE__ */ new Map();
+var nextSyntheticSid = 1;
+function registerSyntheticSid(el) {
+  const existing = syntheticSidByEl.get(el);
+  if (existing) return existing;
+  const synthetic = `${SYNTHETIC_SID_PREFIX}${nextSyntheticSid++}`;
+  syntheticSidByEl.set(el, synthetic);
+  elBySyntheticSid.set(synthetic, new WeakRef(el));
+  return synthetic;
+}
+function findElementBySid(doc, sid) {
+  if (sid.startsWith(SYNTHETIC_SID_PREFIX)) {
+    const ref = elBySyntheticSid.get(sid);
+    if (!ref) return null;
+    const el = ref.deref();
+    if (!el || !el.isConnected) {
+      elBySyntheticSid.delete(sid);
+      return null;
+    }
+    if (el.ownerDocument !== doc) return null;
+    return el;
+  }
+  return doc.querySelector(`[data-sid="${CSS.escape(sid)}"]`);
+}
 function clone(value) {
   try {
     return JSON.parse(JSON.stringify(value));
@@ -25,16 +51,17 @@ function ensureOverlay(doc) {
   if (highlightOverlay && highlightOverlay.ownerDocument === doc) return highlightOverlay;
   highlightOverlay = doc.createElement("div");
   highlightOverlay.id = "__simulator-highlight";
-  highlightOverlay.style.cssText = "position:fixed;pointer-events:none;z-index:999999;border:2px solid #1a73e8;background:rgba(26,115,232,0.12);transition:all 0.1s ease;display:none;border-radius:2px;";
+  highlightOverlay.style.cssText = "position:fixed;pointer-events:none;z-index:999999;border:2px solid #1a73e8;background:rgba(26,115,232,0.12);transition:all 0.1s ease;display:none;border-radius:2px;box-sizing:border-box;";
   doc.body.appendChild(highlightOverlay);
   return highlightOverlay;
 }
 function highlightElement(sid) {
+  if (!sid) return null;
   const iframe = getPageIframe();
-  if (!iframe?.contentDocument) return;
+  if (!iframe?.contentDocument) return null;
   const doc = iframe.contentDocument;
-  const el = doc.querySelector(`[data-sid="${sid}"]`);
-  if (!el) return;
+  const el = findElementBySid(doc, sid);
+  if (!el) return null;
   const rect = el.getBoundingClientRect();
   const overlay = ensureOverlay(doc);
   overlay.style.left = `${rect.left}px`;
@@ -42,6 +69,22 @@ function highlightElement(sid) {
   overlay.style.width = `${rect.width}px`;
   overlay.style.height = `${rect.height}px`;
   overlay.style.display = "block";
+  const style = el.ownerDocument.defaultView?.getComputedStyle(el);
+  if (!style) return null;
+  return {
+    sid,
+    rect: { x: rect.x, y: rect.y, width: rect.width, height: rect.height },
+    style: {
+      display: style.display,
+      position: style.position,
+      boxSizing: style.boxSizing,
+      margin: style.margin,
+      padding: style.padding,
+      color: style.color,
+      backgroundColor: style.backgroundColor,
+      fontSize: style.fontSize
+    }
+  };
 }
 function unhighlightElement() {
   if (highlightOverlay) highlightOverlay.style.display = "none";
@@ -356,9 +399,22 @@ function resolveTemplateNameFromParent(instance) {
   }
   return null;
 }
+function pascalToKebab(name) {
+  return name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function resolvePagePath(instance) {
+  const proxy = instance.proxy;
+  if (proxy?.__page__ !== true) return null;
+  const provides = instance.provides;
+  const path = provides?.path;
+  if (typeof path !== "string" || !path) return null;
+  return path.startsWith("/") ? path.slice(1) : path;
+}
 function resolveTagName(instance) {
   const type = instance.type;
   if (!type) return "unknown";
+  const pagePath = resolvePagePath(instance);
+  if (pagePath) return pagePath;
   if (typeof type.__tagName === "string") return type.__tagName;
   const name = type.__name || type.name;
   if (!name) {
@@ -368,7 +424,8 @@ function resolveTagName(instance) {
   }
   if (name === "dd-page") return "page";
   if (name.startsWith("dd-")) return name.slice(3);
-  if (name.startsWith("Dd") && name.length > 2) return name.slice(2).toLowerCase();
+  if (name.startsWith("Dd") && name.length > 2) return pascalToKebab(name.slice(2));
+  if (/^[A-Z]/.test(name)) return pascalToKebab(name);
   return name;
 }
 function extractProps(instance) {
@@ -398,7 +455,10 @@ function isInternalElement(vnode) {
 function getElementSid(instance) {
   const subTree = instance.subTree;
   const el = subTree?.el;
-  return el?.getAttribute ? el.getAttribute("data-sid") ?? void 0 : void 0;
+  if (!el?.getAttribute) return void 0;
+  const sid = el.getAttribute("data-sid");
+  if (sid) return sid;
+  return registerSyntheticSid(el);
 }
 function isTransparentComponent(instance, tagName) {
   if (tagName === "unknown") return true;
@@ -413,8 +473,17 @@ function isTransparentComponent(instance, tagName) {
   }
   return false;
 }
+function isCommentVNode(vnode) {
+  const type = vnode.type;
+  if (typeof type !== "symbol") return false;
+  const desc = type.description;
+  if (desc === "Comment" || desc === "v-cmt") return true;
+  const children = typeof vnode.children === "string" ? vnode.children : "";
+  return /^v-(if|else|else-if|for)$/.test(children);
+}
 function extractChildrenFromVNode(vnode, depth) {
   if (!vnode || depth > 50) return [];
+  if (isCommentVNode(vnode)) return [];
   if (vnode.component) {
     const result2 = walkInstance(vnode.component, depth + 1);
     return result2 ? Array.isArray(result2) ? result2 : [result2] : [];
@@ -465,6 +534,30 @@ function extractChildrenFromVNode(vnode, depth) {
   }
   return result;
 }
+function unwrapCustomComponent(node) {
+  if (node.tagName !== "wrapper") return node;
+  const path = node.attrs?.name;
+  if (typeof path !== "string" || !path.startsWith("/")) return node;
+  const stripped = path.replace(/^\//, "");
+  const withoutIndex = stripped.endsWith("/index") ? stripped.slice(0, -"/index".length) : stripped;
+  const recovered = withoutIndex || stripped;
+  if (!recovered || recovered === "index") return node;
+  const nextAttrs = {};
+  for (const [k, v] of Object.entries(node.attrs)) {
+    if (k === "name") continue;
+    nextAttrs[k] = v;
+  }
+  return { ...node, tagName: recovered, attrs: nextAttrs };
+}
+function wrapInShadowRoot(node) {
+  if (!node.tagName.includes("/")) return node;
+  if (node.children.length === 0) return node;
+  if (node.children[0]?.tagName === "#shadow-root") return node;
+  return {
+    ...node,
+    children: [{ tagName: "#shadow-root", attrs: {}, children: node.children }]
+  };
+}
 function walkInstance(instance, depth) {
   if (depth > 50) return null;
   const tagName = resolveTagName(instance);
@@ -473,7 +566,7 @@ function walkInstance(instance, depth) {
   const node = { tagName, attrs: extractProps(instance), children };
   const sid = getElementSid(instance);
   if (sid) node.sid = sid;
-  return node;
+  return wrapInShadowRoot(unwrapCustomComponent(node));
 }
 
 // src/preload/instrumentation/wxml.ts