@dimina-kit/devtools 0.4.0-dev.20260624040247 → 0.4.0-dev.20260624084417

package/dist/main/services/render-inspect/index.js

@@ -2,11 +2,47 @@ import { readFileSync } from 'node:fs';
 import path from 'node:path';
 import { devtoolsPackageRoot } from '../../utils/paths.js';
 const DEFAULT_SOURCE_PATH = 'dist/render-host/render-inspect.js';
+/**
+ * Chrome DevTools' default Elements-panel highlight palette (content / padding /
+ * border / margin tints + the size tooltip). Mirroring it makes the WXML panel's
+ * hover box visually identical to the embedded Elements panel's.
+ */
+const HIGHLIGHT_CONFIG = {
+    showInfo: true,
+    showRulers: false,
+    showExtensionLines: false,
+    contentColor: { r: 111, g: 168, b: 220, a: 0.66 },
+    paddingColor: { r: 147, g: 196, b: 125, a: 0.55 },
+    borderColor: { r: 255, g: 229, b: 153, a: 0.66 },
+    marginColor: { r: 246, g: 178, b: 107, a: 0.66 },
+};
+/** Object group for the per-hover `Runtime.evaluate` reference, released after the draw. */
+const HOVER_OBJECT_GROUP = 'render-inspect-hover';
+/**
+ * Upper bound on awaiting the `DOM.enable → Overlay.enable` handshake before
+ * highlighting. A hung `DOM.enable` then degrades to a missed paint instead of a
+ * stuck hover.
+ */
+const ENABLE_HANDSHAKE_TIMEOUT_MS = 500;
+/** Resolve when `p` settles or `ms` elapses, whichever comes first (never rejects). */
+function withTimeout(p, ms) {
+    return new Promise((resolve) => {
+        const timer = setTimeout(resolve, ms);
+        p.then(() => { clearTimeout(timer); resolve(); }, () => { clearTimeout(timer); resolve(); });
+    });
+}
 export function createRenderInspector(options = {}) {
     const loadSource = options.loadSource ??
         (() => readFileSync(path.join(devtoolsPackageRoot, DEFAULT_SOURCE_PATH), 'utf8'));
     let cachedSource = null;
     const injected = new Set();
+    // Debugger sessions THIS service attached itself (nobody else owned one). Only
+    // these are detached on guest-destroy; sessions safe-area / Elements-forward
+    // own are never touched (single-owner per wc).
+    const selfAttached = new Set();
+    // Per-wc `DOM.enable → Overlay.enable` handshake, started once and reused so a
+    // burst of hovers shares one enable. Cleared when the guest is destroyed.
+    const enablePromises = new Map();
     function source() {
         if (cachedSource === null)
             cachedSource = loadSource();
@@ -37,11 +73,15 @@ export function createRenderInspector(options = {}) {
         // Consolidate the per-wc bookkeeping teardown onto the connection layer
         // (foundation.md §4 / P2) when a registry is available; fall back to the
         // bespoke `once('destroyed')` only when omitted (focused unit tests).
+        const forget = () => {
+            injected.delete(wc.id);
+            enablePromises.delete(wc.id);
+        };
         if (options.connections) {
-            options.connections.acquire(wc).own(() => injected.delete(wc.id));
+            options.connections.acquire(wc).own(forget);
         }
         else {
-            wc.once('destroyed', () => injected.delete(wc.id));
+            wc.once('destroyed', forget);
         }
         return true;
     }
@@ -63,21 +103,157 @@ export function createRenderInspector(options = {}) {
             return null;
         if (!(await ensureInjected(wc)))
             return null;
+        let inspection;
         try {
             const result = await wc.executeJavaScript(`window.__diminaRenderInspect ? window.__diminaRenderInspect.highlightElement(${JSON.stringify(sid)}) : null`);
-            return result ?? null;
+            inspection = result ?? null;
         }
         catch {
             return null;
         }
+        // No geometry → nothing to draw; never touch the debugger.
+        if (!inspection)
+            return null;
+        // Draw the native overlay best-effort: the inspection data must survive even
+        // if the CDP draw fails, so a rejected debugger step never propagates.
+        await drawNativeHighlight(wc, sid).catch(() => { });
+        return inspection;
     }
-    async function unhighlight(wc) {
+    /**
+     * Paint the Chrome-style native highlight over the guest via CDP — the same
+     * `Overlay.highlightNode` the embedded Elements panel uses, so the WXML panel's
+     * hover box matches it exactly. Reuses the guest's existing debugger session
+     * (single-owner per wc; safe-area / Elements-forward has usually already
+     * attached it) and only attaches itself when nobody has.
+     *
+     * `Overlay.highlightNode` paints only while the Overlay domain is enabled, and
+     * Chromium rejects `Overlay.enable` with "DOM should be enabled first" unless
+     * DOM is enabled first. On a cold/self-attached session (WXML hovered without
+     * the Elements panel ever enabling Overlay) the highlight would silently no-op
+     * if the command raced ahead of the enable, so we AWAIT the `DOM.enable →
+     * Overlay.enable` handshake before highlighting — but only up to
+     * `ENABLE_HANDSHAKE_TIMEOUT_MS`, so a hung `DOM.enable` degrades to a missed
+     * paint rather than a stuck hover.
+     *
+     * The `Runtime.evaluate` runs in a named object group whose remote references
+     * are released in `finally`; otherwise every hover would leak a live DOM
+     * wrapper into the guest's execution context.
+     */
+    async function drawNativeHighlight(wc, sid) {
         if (wc.isDestroyed())
             return;
-        if (!(await ensureInjected(wc)))
+        if (!ensureGuestDebugger(wc))
+            return;
+        await withTimeout(ensureDomainsEnabled(wc), ENABLE_HANDSHAKE_TIMEOUT_MS);
+        if (wc.isDestroyed())
+            return;
+        const expression = `window.__diminaRenderInspect && window.__diminaRenderInspect.elementFor(${JSON.stringify(sid)})`;
+        try {
+            const evaluated = await wc.debugger.sendCommand('Runtime.evaluate', {
+                expression,
+                returnByValue: false,
+                objectGroup: HOVER_OBJECT_GROUP,
+            });
+            const objectId = evaluated?.result?.objectId;
+            if (!objectId)
+                return;
+            await wc.debugger.sendCommand('Overlay.highlightNode', {
+                objectId,
+                highlightConfig: HIGHLIGHT_CONFIG,
+            });
+        }
+        finally {
+            // Drop the hover's remote DOM reference so repeated hovers don't accumulate
+            // live wrappers in the guest context.
+            wc.debugger
+                .sendCommand('Runtime.releaseObjectGroup', { objectGroup: HOVER_OBJECT_GROUP })
+                .catch(() => { });
+        }
+    }
+    /**
+     * Ensure the guest's debugger is usable WITHOUT opening a second session: a
+     * webContents debugger is single-owner, so reuse the already-attached session
+     * (Elements-forward / safe-area) and only `attach('1.3')` when nobody has. The
+     * sessions we open ourselves are tracked so guest-destroy detaches only ours.
+     * Returns false when the debugger can't be made usable.
+     */
+    function ensureGuestDebugger(wc) {
+        try {
+            if (wc.debugger.isAttached())
+                return true;
+        }
+        catch {
+            return false;
+        }
+        try {
+            wc.debugger.attach('1.3');
+            trackSelfAttached(wc);
+            return true;
+        }
+        catch {
+            // A concurrent attach (race) leaves it usable; anything else is a failure.
+            try {
+                return wc.debugger.isAttached();
+            }
+            catch {
+                return false;
+            }
+        }
+    }
+    /** Record a self-attached session and detach it when the guest is destroyed. */
+    function trackSelfAttached(wc) {
+        if (selfAttached.has(wc.id))
+            return;
+        selfAttached.add(wc.id);
+        const detach = () => {
+            selfAttached.delete(wc.id);
+            try {
+                if (!wc.isDestroyed() && wc.debugger.isAttached())
+                    wc.debugger.detach();
+            }
+            catch { /* already gone */ }
+        };
+        if (options.connections)
+            options.connections.acquire(wc).own(detach);
+        else {
+            try {
+                wc.once('destroyed', () => selfAttached.delete(wc.id));
+            }
+            catch { /* fake wc */ }
+        }
+    }
+    /**
+     * Enable the DOM + Overlay render domains in dependency order, ONCE per guest
+     * (the promise is cached + reused across hovers). `Overlay.enable` is sent ONLY
+     * AFTER `DOM.enable` resolves (Chromium rejects it otherwise). Resolves when
+     * Overlay is enabled; a rejection at any step is swallowed (the guest may be
+     * mid-teardown) and the cache entry is dropped so a later hover can retry.
+     */
+    function ensureDomainsEnabled(wc) {
+        const cached = enablePromises.get(wc.id);
+        if (cached)
+            return cached;
+        wc.debugger.sendCommand('CSS.enable').catch(() => { });
+        const handshake = wc.debugger
+            .sendCommand('DOM.enable')
+            .then(() => {
+            if (wc.isDestroyed())
+                return;
+            return wc.debugger.sendCommand('Overlay.enable');
+        })
+            .then(() => undefined)
+            .catch(() => {
+            // Allow a retry on the next hover (e.g. the guest was mid-destroy).
+            enablePromises.delete(wc.id);
+        });
+        enablePromises.set(wc.id, handshake);
+        return handshake;
+    }
+    async function unhighlight(wc) {
+        if (wc.isDestroyed())
             return;
         try {
-            await wc.executeJavaScript('window.__diminaRenderInspect && window.__diminaRenderInspect.unhighlightElement && window.__diminaRenderInspect.unhighlightElement()');
+            await wc.debugger.sendCommand('Overlay.hideHighlight');
         }
         catch {
             // best-effort

package/dist/main/services/views/devtools-tabs.d.ts

@@ -35,7 +35,10 @@
  */
 /**
  * Canonical DevTools panel view ids kept in the DEFAULT tab bar (stable front-end
- * ids, unchanged for many Chromium releases): `elements`, `console`, `network`.
+ * ids, unchanged for many Chromium releases): `elements`, `console`, `network`,
+ * `sources`. Sources stays so a source-link click that isn't routed to Monaco
+ * (build/runtime chunks, framework frames) still has a panel to reveal in instead
+ * of silently no-op'ing.
  */
 export declare const DEVTOOLS_KEPT_VIEW_IDS: readonly string[];
 /**

package/dist/main/services/views/devtools-tabs.js

@@ -35,9 +35,12 @@
  */
 /**
  * Canonical DevTools panel view ids kept in the DEFAULT tab bar (stable front-end
- * ids, unchanged for many Chromium releases): `elements`, `console`, `network`.
+ * ids, unchanged for many Chromium releases): `elements`, `console`, `network`,
+ * `sources`. Sources stays so a source-link click that isn't routed to Monaco
+ * (build/runtime chunks, framework frames) still has a panel to reveal in instead
+ * of silently no-op'ing.
  */
-export const DEVTOOLS_KEPT_VIEW_IDS = ['elements', 'console', 'network'];
+export const DEVTOOLS_KEPT_VIEW_IDS = ['elements', 'console', 'network', 'sources'];
 /**
  * Build the `executeJavaScript` source injected into the DevTools front-end
  * WebContents. The kept ids + display names are carried as JSON data literals
@@ -48,13 +51,19 @@ export function buildCustomizeTabsScript(keptIds = DEVTOOLS_KEPT_VIEW_IDS) {
     // fallback path); the DevTools UI may be EN or ZH, so include both.
     const NAME_MAP = {
         elements: ['Elements', '元素'], console: ['Console', '控制台'], network: ['Network', '网络'],
+        sources: ['Sources', '来源', '源代码'],
     };
     const keepNames = keptIds.flatMap((id) => NAME_MAP[id] ?? [id]);
     const keepIdsJson = JSON.stringify(JSON.stringify([...keptIds]));
     const keepNamesJson = JSON.stringify(JSON.stringify(keepNames));
+    const srcNamesJson = JSON.stringify(JSON.stringify(NAME_MAP.sources));
+    const netNamesJson = JSON.stringify(JSON.stringify(NAME_MAP.network));
     return `(function(){try{
     var KEEPID = new Set(JSON.parse(${keepIdsJson}));
     var KEEPNAME = new Set(JSON.parse(${keepNamesJson}));
+    var SRCNAME = new Set(JSON.parse(${srcNamesJson}));
+    var NETNAME = new Set(JSON.parse(${netNamesJson}));
+    var WANT_SOURCES_LAST = KEEPID.has('sources');
     // (1) Locale infobar — official host-preference suppression (NOT localStorage).
     try { var IFH=globalThis.InspectorFrontendHost; if(IFH&&typeof IFH.setPreference==='function'){ IFH.setPreference('disable-locale-info-bar','true'); } }catch(_){}
     function deepCollect(sel,cap){ var out=[],seen=0,stack=[document]; while(stack.length&&seen<(cap||40000)){ var root=stack.pop(); try{var m=root.querySelectorAll?root.querySelectorAll(sel):[];for(var i=0;i<m.length;i++)out.push(m[i]);}catch(_){} try{var all=root.querySelectorAll?root.querySelectorAll('*'):[];for(var j=0;j<all.length;j++){seen++;if(all[j].shadowRoot)stack.push(all[j].shadowRoot);}}catch(_){} } return out; }
@@ -82,9 +91,18 @@ export function buildCustomizeTabsScript(keptIds = DEVTOOLS_KEPT_VIEW_IDS) {
           handled=true;
         }catch(_){} }
         // fallback: registrations not enumerable -> at least clear the bar by id
-        if(!handled){ var FALL=['timeline','resources','heap-profiler','sources','security','lighthouse','chrome-recorder','coverage','linear-memory-inspector','sensors','rendering','animations','autofill-view','medias','issues-pane']; for(var fr=0;fr<FALL.length;fr++){ try{ if(!KEEPID.has(FALL[fr])) maybeRemove(FALL[fr]); }catch(_){} } }
+        if(!handled){ var FALL=['timeline','resources','heap-profiler','security','lighthouse','chrome-recorder','coverage','linear-memory-inspector','sensors','rendering','animations','autofill-view','medias','issues-pane']; for(var fr=0;fr<FALL.length;fr++){ try{ if(!KEEPID.has(FALL[fr])) maybeRemove(FALL[fr]); }catch(_){} } }
       } else { domFallback(); }
     })();
+    // Keep Sources LAST in the bar (after Network). Default DevTools order puts
+    // Sources between Console and Network; nudge it to just after Network. Runs in
+    // BOTH paths (registry removal leaves the kept tabs in default order). Self-
+    // stable: once Sources follows Network the condition no longer holds.
+    if(WANT_SOURCES_LAST){ var ro=0,rt=setInterval(function(){ ro++; try{
+      var tabs=deepCollect('[role="tab"]'),src=null,net=null;
+      for(var i=0;i<tabs.length;i++){ var n=txt(tabs[i]); if(SRCNAME.has(n))src=tabs[i]; else if(NETNAME.has(n))net=tabs[i]; }
+      if(src&&net&&src.parentElement&&src.parentElement===net.parentElement&&(src.compareDocumentPosition(net)&Node.DOCUMENT_POSITION_FOLLOWING)){ net.parentElement.insertBefore(src,net.nextSibling); }
+    }catch(_){} if(ro>120)clearInterval(rt); },60); }
     // DOM fallback: only if the ESM module couldn't be resolved at all.
     function domFallback(){ var cachedBar=null;
       function findBar(){ if(cachedBar&&cachedBar.isConnected)return cachedBar; cachedBar=null; var tabs=deepCollect('[role="tab"]'); var a=null; for(var i=0;i<tabs.length;i++){if(KEEPNAME.has(txt(tabs[i]))){a=tabs[i];break;}} if(!a)return null; var p=a.parentElement; while(p){try{if(p.querySelectorAll('[role="tab"]').length>1){cachedBar=p;return p;}}catch(_){} p=p.parentElement;} cachedBar=a.parentElement; return cachedBar; }

package/dist/main/services/views/view-manager.js

@@ -462,12 +462,13 @@ export function createViewManager(ctx) {
     // map to a project-relative path, and broadcast to the renderer's Monaco.
     const openInEditorWiredWcIds = new Set();
     function injectOpenResourceHandler(serviceWc, devtoolsWc) {
-        // `setOpenResourceHandler` is the official Chromium DevTools hook IDEs use
-        // to route source-link clicks to an external editor. We poll for the host
-        // (it appears once the front-end finishes bootstrapping, like `UI` above)
-        // and register a handler that re-emits an encoded sentinel via
-        // `openInNewTab` → Electron `devtools-open-url`. Best-effort: wrapped in
-        // try/catch and a bounded poll so a missing API never throws.
+        // Inject the front-end glue that routes a project source-link click to our
+        // Monaco editor instead of the DevTools Sources panel: a capture-phase click
+        // interceptor re-emits an encoded sentinel via
+        // `InspectorFrontendHost.openInNewTab` → Electron `devtools-open-url`. (The
+        // legacy `setOpenResourceHandler` hook this used to rely on is gone in
+        // current Chromium, so the script keeps it only as a fallback.) Best-effort:
+        // the script is fully try/catch-wrapped so a missing API never throws.
         const sourceContext = projectSourceContextFromServiceHostUrl(serviceWc.getURL(), ctx.workspace?.getProjectPath?.());
         if (!sourceContext)
             return;

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

@@ -4,16 +4,24 @@ const INTERNAL_CLASSES = new Set([
     'dd-picker-overlay', 'dd-picker-container', 'dd-picker-header', 'dd-picker-body',
 ]);
 const FRAMEWORK_TEMPLATE_RE = /^(taro_tmpl|tmpl_\d+)/;
+/**
+ * Strip the `dd-` registration prefix and the `tpl-` prefix dimina adds to
+ * compiled template components (`app.component('dd-tpl-taro_tmpl', …)`), so a
+ * framework template wrapper normalizes to its bare name (`taro_tmpl`,
+ * `tmpl_0_3`) and `FRAMEWORK_TEMPLATE_RE` recognizes it.
+ */
+function normalizeRegisteredName(regName) {
+    const base = regName.startsWith('dd-') ? regName.slice(3) : regName;
+    return base.startsWith('tpl-') ? base.slice(4) : base;
+}
 function resolveTemplateNameFromParent(instance) {
     const parent = instance.parent;
-    if (!parent)
-        return null;
-    const parentType = parent.type;
+    const parentType = parent?.type;
     const components = parentType?.components;
     if (components) {
         for (const [regName, comp] of Object.entries(components)) {
             if (comp === instance.type)
-                return regName.startsWith('dd-') ? regName.slice(3) : regName;
+                return normalizeRegisteredName(regName);
         }
     }
     const appComponents = instance.appContext?.components;
@@ -21,7 +29,7 @@ function resolveTemplateNameFromParent(instance) {
         return null;
     for (const [regName, comp] of Object.entries(appComponents)) {
         if (comp === instance.type)
-            return regName.startsWith('dd-') ? regName.slice(3) : regName;
+            return normalizeRegisteredName(regName);
     }
     return null;
 }
@@ -53,6 +61,29 @@ function resolvePagePath(instance) {
         return null;
     return path.startsWith('/') ? path.slice(1) : path;
 }
+/**
+ * A NATIVE dimina custom component (a `usingComponents` entry) calls
+ * `provide('path', componentPath)` in its setup (render runtime), so its
+ * provided `path` DIFFERS from its parent's. A plain descendant inherits the
+ * same provides object (identical `path`) and is not a boundary; a Taro template
+ * wrapper (`dd-tpl-*`) never provides, so it never differs either. Comparing
+ * against the parent's provided path therefore isolates exactly the native
+ * component roots — matching WeChat, which shows each custom component as a node
+ * tagged with its full registered path (with a synthetic `#shadow-root` added by
+ * `wrapInShadowRoot` since the path contains `/`). Pages are handled earlier via
+ * their authoritative `__page__` marker, so this only fires for components.
+ */
+function resolveComponentPath(instance) {
+    const provides = instance.provides;
+    const path = provides?.path;
+    if (typeof path !== 'string' || !path)
+        return null;
+    const parent = instance.parent;
+    const parentProvides = parent?.provides;
+    if (path === parentProvides?.path)
+        return null;
+    return path.startsWith('/') ? path.slice(1) : path;
+}
 function resolveTagName(instance) {
     const type = instance.type;
     if (!type)
@@ -63,12 +94,22 @@ function resolveTagName(instance) {
     const pagePath = resolvePagePath(instance);
     if (pagePath)
         return pagePath;
+    // Native custom-component boundary → tag with its full registered path (WeChat
+    // parity). Must precede the __tagName/__name/dd- shortening below, which would
+    // otherwise collapse `dd-foo` to the bare `foo` and lose the path.
+    const componentPath = resolveComponentPath(instance);
+    if (componentPath)
+        return componentPath;
     if (typeof type.__tagName === 'string')
         return type.__tagName;
     const name = (type.__name || type.name);
     if (!name) {
-        if (type.__scopeId && type.components)
-            return 'page';
+        // A nameless component carrying a `__scopeId` is a compiled page, custom
+        // component, or framework template wrapper. The page is already resolved
+        // above via its authoritative `__page__` marker, so by here it is NOT a
+        // page — recover the registered tag (e.g. a Taro `taro_tmpl`/`tmpl_0_3`
+        // wrapper) and fall back to `template`. Defaulting to `page` here would
+        // mislabel every such wrapper as a second page root.
         if (type.__scopeId)
             return resolveTemplateNameFromParent(instance) || 'template';
         return 'unknown';
@@ -132,6 +173,11 @@ function getElementSid(instance) {
 function isTransparentComponent(instance, tagName) {
     if (tagName === 'unknown')
         return true;
+    // A framework template wrapper (Taro `taro_tmpl` / `tmpl_0_3`, whether named
+    // via `props.is` or recovered from its registration) is compiler scaffolding,
+    // not user content — pass its children straight through.
+    if (FRAMEWORK_TEMPLATE_RE.test(tagName))
+        return true;
     if (tagName === 'template') {
         const props = instance.props;
         const is = props?.is;

package/dist/render-host/render-inspect.js

@@ -40,20 +40,23 @@
     "dd-picker-body"
   ]);
   var FRAMEWORK_TEMPLATE_RE = /^(taro_tmpl|tmpl_\d+)/;
+  function normalizeRegisteredName(regName) {
+    const base = regName.startsWith("dd-") ? regName.slice(3) : regName;
+    return base.startsWith("tpl-") ? base.slice(4) : base;
+  }
   function resolveTemplateNameFromParent(instance) {
     const parent = instance.parent;
-    if (!parent) return null;
-    const parentType = parent.type;
+    const parentType = parent?.type;
     const components = parentType?.components;
     if (components) {
       for (const [regName, comp] of Object.entries(components)) {
-        if (comp === instance.type) return regName.startsWith("dd-") ? regName.slice(3) : regName;
+        if (comp === instance.type) return normalizeRegisteredName(regName);
       }
     }
     const appComponents = instance.appContext?.components;
     if (!appComponents) return null;
     for (const [regName, comp] of Object.entries(appComponents)) {
-      if (comp === instance.type) return regName.startsWith("dd-") ? regName.slice(3) : regName;
+      if (comp === instance.type) return normalizeRegisteredName(regName);
     }
     return null;
   }
@@ -68,15 +71,25 @@
     if (typeof path !== "string" || !path) return null;
     return path.startsWith("/") ? path.slice(1) : path;
   }
+  function resolveComponentPath(instance) {
+    const provides = instance.provides;
+    const path = provides?.path;
+    if (typeof path !== "string" || !path) return null;
+    const parent = instance.parent;
+    const parentProvides = parent?.provides;
+    if (path === parentProvides?.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;
+    const componentPath = resolveComponentPath(instance);
+    if (componentPath) return componentPath;
     if (typeof type.__tagName === "string") return type.__tagName;
     const name = type.__name || type.name;
     if (!name) {
-      if (type.__scopeId && type.components) return "page";
       if (type.__scopeId) return resolveTemplateNameFromParent(instance) || "template";
       return "unknown";
     }
@@ -120,6 +133,7 @@
   }
   function isTransparentComponent(instance, tagName) {
     if (tagName === "unknown") return true;
+    if (FRAMEWORK_TEMPLATE_RE.test(tagName)) return true;
     if (tagName === "template") {
       const props = instance.props;
       const is = props?.is;
@@ -250,26 +264,14 @@
       if (!tree) return null;
       return Array.isArray(tree) ? { tagName: "#fragment", attrs: {}, children: tree } : tree;
     };
-    let overlay = null;
-    const ensureOverlay = () => {
-      if (overlay && overlay.ownerDocument === document) return overlay;
-      overlay = document.createElement("div");
-      overlay.id = "__simulator-highlight";
-      overlay.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;";
-      document.body.appendChild(overlay);
-      return overlay;
+    const elementFor = (sid) => {
+      if (!sid) return null;
+      return findElementBySid(document, sid);
     };
     const highlightElement = (sid) => {
-      if (!sid) return null;
-      const el = findElementBySid(document, sid);
+      const el = elementFor(sid);
       if (!el) return null;
       const rect = el.getBoundingClientRect();
-      const box = ensureOverlay();
-      box.style.left = `${rect.left}px`;
-      box.style.top = `${rect.top}px`;
-      box.style.width = `${rect.width}px`;
-      box.style.height = `${rect.height}px`;
-      box.style.display = "block";
       const style = el.ownerDocument.defaultView?.getComputedStyle(el);
       if (!style) return null;
       return {
@@ -288,8 +290,7 @@
       };
     };
     const unhighlightElement = () => {
-      if (overlay) overlay.style.display = "none";
     };
-    g.__diminaRenderInspect = { getWxml, highlightElement, unhighlightElement };
+    g.__diminaRenderInspect = { getWxml, highlightElement, elementFor, unhighlightElement };
   }
 })();