@dimina-kit/devtools 0.4.0-dev.20260612152115 → 0.4.0-dev.20260615083030

package/dist/main/index.bundle.js

@@ -365,7 +365,14 @@ var WorkbenchSettingsChannel = {
   SetTheme: "workbenchSettings:setTheme",
   GetCdpStatus: "workbenchSettings:getCdpStatus",
   GetMcpStatus: "workbenchSettings:getMcpStatus",
-  Init: "workbenchSettings:init"
+  Init: "workbenchSettings:init",
+  // Main → renderer push: the active color scheme flipped (OS change or in-app
+  // SetTheme). Payload is `isDark: boolean`. The app's CSS reacts to
+  // `prefers-color-scheme` automatically; this exists for the few JS consumers
+  // (Monaco's theme) that can't observe that media change — Electron does NOT
+  // dispatch the renderer's `matchMedia('(prefers-color-scheme)')` change event
+  // for programmatic `nativeTheme.themeSource` assignments.
+  ThemeChanged: "workbenchSettings:themeChanged"
 };
 var ProjectChannel = {
   Open: "project:open",
@@ -795,12 +802,21 @@ import { toDisposable } from "@dimina-kit/electron-deck/main";
 function themeBg() {
   return nativeTheme2.shouldUseDarkColors ? "#1a1a1a" : "#fafafa";
 }
+function simDeskBg() {
+  return nativeTheme2.shouldUseDarkColors ? "#121212" : "#e8e8e8";
+}
 function installThemeBackgroundSync() {
   const apply = () => {
     const bg = themeBg();
+    const isDark = nativeTheme2.shouldUseDarkColors;
     for (const win of BrowserWindow.getAllWindows()) {
-      if (!win.isDestroyed()) {
+      if (win.isDestroyed()) continue;
+      try {
         win.setBackgroundColor(bg);
+        if (!win.webContents.isDestroyed()) {
+          win.webContents.send(WorkbenchSettingsChannel.ThemeChanged, isDark);
+        }
+      } catch {
       }
     }
   };
@@ -1018,7 +1034,7 @@ function createRendererNotifier(ctx) {
 }
 
 // src/main/services/views/view-manager.ts
-import { ipcMain as ipcMain2, shell as shell2, WebContentsView as WebContentsView2, webContents } from "electron";
+import { ipcMain as ipcMain2, nativeTheme as nativeTheme3, shell as shell2, WebContentsView as WebContentsView2, webContents } from "electron";
 import path7 from "path";
 
 // src/shared/open-in-editor.ts
@@ -1075,22 +1091,23 @@ function resourceUrlToProjectRelativePath(resourceUrl, expectedOrigin) {
 }
 
 // src/main/services/safe-area/index.ts
-function guestInsets(device) {
+function guestInsets(device, isTabPage2) {
   const top = device?.safeAreaInsets.top ?? 0;
-  return { top, topMax: top, right: 0, rightMax: 0, bottom: 0, bottomMax: 0, left: 0, leftMax: 0 };
+  const bottom = isTabPage2 ? 0 : device?.safeAreaInsets.bottom ?? 0;
+  return { top, topMax: top, right: 0, rightMax: 0, bottom, bottomMax: bottom, left: 0, leftMax: 0 };
 }
 function createSafeAreaController(options = {}) {
-  const attached = /* @__PURE__ */ new Set();
-  function override(wc, device) {
+  const attached = /* @__PURE__ */ new Map();
+  function override(wc, device, isTabPage2) {
     if (wc.isDestroyed()) return;
-    void wc.debugger.sendCommand("Emulation.setSafeAreaInsetsOverride", { insets: guestInsets(device) }).catch((err) => {
+    void wc.debugger.sendCommand("Emulation.setSafeAreaInsetsOverride", { insets: guestInsets(device, isTabPage2) }).catch((err) => {
       console.warn("[safe-area] setSafeAreaInsetsOverride failed:", err instanceof Error ? err.message : err);
     });
   }
   return {
-    applyToGuest: (wc, device) => {
+    applyToGuest: (wc, device, isTabPage2) => {
       if (!wc || wc.isDestroyed() || attached.has(wc)) {
-        if (wc && !wc.isDestroyed() && attached.has(wc)) override(wc, device);
+        if (wc && !wc.isDestroyed() && attached.has(wc)) override(wc, device, isTabPage2);
         return;
       }
       try {
@@ -1099,19 +1116,19 @@ function createSafeAreaController(options = {}) {
         console.warn("[safe-area] debugger.attach failed; env(safe-area-inset-*) stays 0:", err instanceof Error ? err.message : err);
         return;
       }
-      attached.add(wc);
+      attached.set(wc, isTabPage2);
       if (options.connections) {
         options.connections.acquire(wc).own(() => attached.delete(wc));
       } else {
         wc.once("destroyed", () => attached.delete(wc));
       }
-      override(wc, device);
+      override(wc, device, isTabPage2);
     },
     reapplyAll: (device) => {
-      for (const wc of attached) override(wc, device);
+      for (const [wc, isTabPage2] of attached) override(wc, device, isTabPage2);
     },
     dispose: () => {
-      for (const wc of attached) {
+      for (const wc of attached.keys()) {
         try {
           if (!wc.isDestroyed()) wc.debugger.detach();
         } catch {
@@ -2313,22 +2330,38 @@ function createViewManager(ctx) {
       }
     });
     nativeSimulatorView = view;
-    view.setBackgroundColor("#121212");
+    view.setBackgroundColor(simDeskBg());
     const simWc = view.webContents;
+    const syncDeskBg = () => {
+      try {
+        if (!simWc.isDestroyed()) view.setBackgroundColor(simDeskBg());
+      } catch {
+      }
+    };
+    nativeTheme3.on("updated", syncDeskBg);
+    ctx.connections.acquire(simWc).own(() => nativeTheme3.removeListener("updated", syncDeskBg));
     attachNativeCustomApiBridge(simWc);
+    const pendingGuestIsTab = [];
     simWc.on("will-attach-webview", (_event, webPreferences, params) => {
       ;
       webPreferences.partition = partition;
       params.partition = partition;
       webPreferences.contextIsolation = false;
       webPreferences.sandbox = false;
+      let isTab = false;
+      try {
+        isTab = new URL(params.src).searchParams.get("isTab") === "1";
+      } catch {
+      }
+      pendingGuestIsTab.push(isTab);
     });
     simWc.on("did-attach-webview", (_event, guestWc) => {
       try {
         guestWc.setZoomFactor(currentZoomFactor);
       } catch {
       }
-      safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null);
+      const isTabGuest = pendingGuestIsTab.shift() ?? false;
+      safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null, isTabGuest);
       guestWc.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
       guestWc.on("will-navigate", (e, url) => {
         try {
@@ -3258,7 +3291,6 @@ var SimulatorSetDeviceInfoSchema = z3.tuple([
     screenWidth: z3.number().int().min(100).max(4e3),
     screenHeight: z3.number().int().min(100).max(4e3),
     statusBarHeight: z3.number().finite().min(0).max(400),
-    safeAreaBottom: z3.number().finite().min(0).max(400),
     notchType: z3.enum(["none", "notch", "dynamic-island"]),
     safeAreaInsets: z3.object({
       top: z3.number().finite().min(0).max(400),

package/dist/main/services/safe-area/index.d.ts

@@ -3,10 +3,12 @@ import type { ConnectionRegistry } from '@dimina-kit/electron-deck/main';
 import type { NativeDeviceInfo } from '../../../shared/ipc-channels.js';
 export interface SafeAreaController {
     /** Attach the debugger to a freshly-attached render-host guest and push the
-     *  current device's insets. No-op (warn) if the guest is already claimed by an
-     *  external CDP client — env then stays 0 rather than throwing. */
-    applyToGuest(guestWc: WebContents, device: NativeDeviceInfo | null): void;
-    /** Re-push insets to every still-attached guest after a device change. */
+     *  current device's insets. `isTabPage` selects the bottom-inset policy (0 for
+     *  tab pages, the real inset for full-bleed non-tab pages). No-op (warn) if the
+     *  guest is already claimed by an external CDP client — env then stays 0. */
+    applyToGuest(guestWc: WebContents, device: NativeDeviceInfo | null, isTabPage: boolean): void;
+    /** Re-push insets to every still-attached guest after a device change (each
+     *  guest keeps the page type it attached with). */
     reapplyAll(device: NativeDeviceInfo | null): void;
     /** Detach from all guests (teardown). */
     dispose(): void;

package/dist/main/services/safe-area/index.js

@@ -1,25 +1,31 @@
-function guestInsets(device) {
+function guestInsets(device, isTabPage) {
     const top = device?.safeAreaInsets.top ?? 0;
-    return { top, topMax: top, right: 0, rightMax: 0, bottom: 0, bottomMax: 0, left: 0, leftMax: 0 };
+    // A tab page's content sits above the shell-drawn tabBar (which fills the
+    // bottom safe area), so it never borders the bottom unsafe zone. A non-tab
+    // page is full-bleed to the device bottom, so surface the real inset for its
+    // own `env(safe-area-inset-bottom)` opt-in.
+    const bottom = isTabPage ? 0 : (device?.safeAreaInsets.bottom ?? 0);
+    return { top, topMax: top, right: 0, rightMax: 0, bottom, bottomMax: bottom, left: 0, leftMax: 0 };
 }
 export function createSafeAreaController(options = {}) {
-    // Guests we successfully attached `wc.debugger` to (so we don't re-attach,
-    // which throws). Pruned on guest destroy.
-    const attached = new Set();
-    function override(wc, device) {
+    // Guests we successfully attached `wc.debugger` to (value = the page's
+    // `isTabPage`, fixed for the guest's life — it's one page). So we don't
+    // re-attach (throws), and a device-change reapply reuses the same policy.
+    const attached = new Map();
+    function override(wc, device, isTabPage) {
         if (wc.isDestroyed())
             return;
         void wc.debugger
-            .sendCommand('Emulation.setSafeAreaInsetsOverride', { insets: guestInsets(device) })
+            .sendCommand('Emulation.setSafeAreaInsetsOverride', { insets: guestInsets(device, isTabPage) })
             .catch((err) => {
             console.warn('[safe-area] setSafeAreaInsetsOverride failed:', err instanceof Error ? err.message : err);
         });
     }
     return {
-        applyToGuest: (wc, device) => {
+        applyToGuest: (wc, device, isTabPage) => {
             if (!wc || wc.isDestroyed() || attached.has(wc)) {
                 if (wc && !wc.isDestroyed() && attached.has(wc))
-                    override(wc, device);
+                    override(wc, device, isTabPage);
                 return;
             }
             try {
@@ -31,21 +37,21 @@ export function createSafeAreaController(options = {}) {
                 console.warn('[safe-area] debugger.attach failed; env(safe-area-inset-*) stays 0:', err instanceof Error ? err.message : err);
                 return;
             }
-            attached.add(wc);
+            attached.set(wc, isTabPage);
             if (options.connections) {
                 options.connections.acquire(wc).own(() => attached.delete(wc));
             }
             else {
                 wc.once('destroyed', () => attached.delete(wc));
             }
-            override(wc, device);
+            override(wc, device, isTabPage);
         },
         reapplyAll: (device) => {
-            for (const wc of attached)
-                override(wc, device);
+            for (const [wc, isTabPage] of attached)
+                override(wc, device, isTabPage);
         },
         dispose: () => {
-            for (const wc of attached) {
+            for (const wc of attached.keys()) {
                 try {
                     if (!wc.isDestroyed())
                         wc.debugger.detach();

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

@@ -403,8 +403,10 @@ export function setupSimulatorStorage(host, options) {
             const filtered = prefix
                 ? result.entries.filter(([key]) => key.startsWith(prefix))
                 : result.entries;
-            // Keys are returned with their `${appId}_` prefix intact; stripping is
-            // a follow-up so the panel UI can stay compatible with the raw keys.
+            // Keys are returned with their `${appId}_` prefix intact: every write
+            // path (Set/Remove) keys off the raw storage key. The Storage panel
+            // display-strips the prefix for readability (storage-panel.tsx), so the
+            // wire keys stay raw while the UI shows clean, Chrome-like keys.
             return filtered.map(([key, value]) => ({ key, value }));
         });
     }

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

@@ -1,6 +1,7 @@
-import { ipcMain, shell, WebContentsView, webContents } from 'electron';
+import { ipcMain, nativeTheme, shell, WebContentsView, webContents } from 'electron';
 import path from 'path';
 import { cjsSiblingPreloadPath, mainPreloadPath } from '../../utils/paths.js';
+import { simDeskBg } from '../../utils/theme.js';
 import { applyNavigationHardening, handleWindowOpenExternal, } from '../../windows/navigation-hardening.js';
 import { SimulatorCustomApiBridgeChannel } from '../../../shared/ipc-channels.js';
 import { OPEN_IN_EDITOR_SCHEME, decodeOpenInEditorUrl, resourceUrlToProjectRelativePath, } from '../../../shared/open-in-editor.js';
@@ -806,12 +807,27 @@ export function createViewManager(ctx) {
             },
         });
         nativeSimulatorView = view;
-        // Paint the WCV surface the simulator-panel background (≈ --color-sim-bg
-        // hsl(0 0% 7%)) so a height-resize that grows the region never flashes white
-        // in the newly-exposed strip before DeviceShell's desk repaints — the WCV,
-        // the desk, and the renderer placeholder behind it are all the same color.
-        view.setBackgroundColor('#121212');
+        // Paint the WCV surface the themed desk color (simDeskBg(): dark #121212 /
+        // light #e8e8e8) so a height-resize that grows the region never flashes a
+        // mismatched strip before DeviceShell's desk repaints — the WCV, the desk,
+        // and the renderer placeholder behind it are all the same color.
+        view.setBackgroundColor(simDeskBg());
         const simWc = view.webContents;
+        // Keep the WCV surface in sync with the active color scheme. The
+        // process-wide installThemeBackgroundSync() re-syncs BrowserWindows on a
+        // theme switch, but this top-level WebContentsView is not a window, so its
+        // creation-time backgroundColor would otherwise freeze. Mirror simDeskBg()
+        // here on every nativeTheme `updated`; the listener is owned by the wc's
+        // connection so it detaches when the simulator view is torn down.
+        const syncDeskBg = () => {
+            try {
+                if (!simWc.isDestroyed())
+                    view.setBackgroundColor(simDeskBg());
+            }
+            catch { /* view/wc gone */ }
+        };
+        nativeTheme.on('updated', syncDeskBg);
+        ctx.connections.acquire(simWc).own(() => nativeTheme.removeListener('updated', syncDeskBg));
         // Service the simulator-side `__diminaCustomApis` bridge: this top-level
         // WebContentsView has no embedder renderer to proxy through, so dispatch its
         // `sendToHost` requests straight to `ctx.simulatorApis` from main.
@@ -822,12 +838,23 @@ export function createViewManager(ctx) {
         // them with contextIsolation/sandbox off so the render runtime + its preload
         // share the page realm. (A top-level WebContentsView can host these guests; a
         // `<webview>` guest cannot — that's the whole point of Option A.)
+        // Page type (`isTab`) of each attaching guest, captured from its render-host
+        // URL in will-attach (where `params.src` carries the full URL) and consumed
+        // FIFO in the matching did-attach — `guestWc.getURL()` is still empty there.
+        // Per-attach scope: a fresh simWc + handlers are built on every (re)attach.
+        const pendingGuestIsTab = [];
         simWc.on('will-attach-webview', (_event, webPreferences, params) => {
             ;
             webPreferences.partition = partition;
             params.partition = partition;
             webPreferences.contextIsolation = false;
             webPreferences.sandbox = false;
+            let isTab = false;
+            try {
+                isTab = new URL(params.src).searchParams.get('isTab') === '1';
+            }
+            catch { /* keep false */ }
+            pendingGuestIsTab.push(isTab);
         });
         simWc.on('did-attach-webview', (_event, guestWc) => {
             // Scale the nested render-host page with the device zoom. The host WCV is
@@ -841,8 +868,13 @@ export function createViewManager(ctx) {
             }
             catch { /* guest not ready; setNativeSimulatorViewBounds re-applies */ }
             // Simulate this device's CSS env(safe-area-inset-*) on the fresh guest
-            // before it paints, so notch-aware page layout resolves correctly.
-            safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null);
+            // before it paints, so notch-aware page layout resolves correctly. The
+            // bottom inset is page-type-dependent (see services/safe-area): a tab
+            // page's content sits above the shell tabBar (bottom 0); a non-tab page
+            // is full-bleed (real bottom inset). The page type was captured from the
+            // render-host URL in will-attach (FIFO).
+            const isTabGuest = pendingGuestIsTab.shift() ?? false;
+            safeArea.applyToGuest(guestWc, ctx.bridge?.getDevice() ?? null, isTabGuest);
             guestWc.setWindowOpenHandler(({ url }) => handleWindowOpenExternal(url));
             guestWc.on('will-navigate', (e, url) => {
                 try {

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

@@ -8,6 +8,21 @@ import { type Disposable } from '@dimina-kit/electron-deck/main';
  * Light: hsl(0 0% 98%) ≈ #fafafa  (--color-bg)
  */
 export declare function themeBg(): string;
+/**
+ * Backdrop ("desk") color for the native simulator WebContentsView — the
+ * surface the simulated phone sits on. Unlike {@link themeBg} (the window bg),
+ * the desk is a neutral grey kept a touch off the window so the light-colored
+ * phone keeps contrast against it in BOTH schemes.
+ *
+ * Dark:  hsl(0 0% 7%)  ≈ #121212  (the long-standing desk color — unchanged)
+ * Light: hsl(0 0% 91%) ≈ #e8e8e8  (neutral grey; the white phone reads on it)
+ *
+ * MUST stay equal to the renderer's `--color-sim-bg` (design.css) and the
+ * simulator page's `.device-shell-root` background (device-shell.css): the WCV,
+ * the desk, and the placeholder behind it are the same color so a height-resize
+ * never flashes a mismatched strip. Update all three together.
+ */
+export declare function simDeskBg(): string;
 /**
  * Install a single process-wide listener that keeps every window's native
  * `backgroundColor` in sync with the active color scheme.

package/dist/main/utils/theme.js

@@ -1,5 +1,6 @@
 import { BrowserWindow, nativeTheme } from 'electron';
 import { toDisposable } from '@dimina-kit/electron-deck/main';
+import { WorkbenchSettingsChannel } from '../../shared/ipc-channels.js';
 /**
  * Background color that matches the current system color scheme.
  * Pass as `backgroundColor` when creating BrowserWindows to prevent
@@ -11,6 +12,23 @@ import { toDisposable } from '@dimina-kit/electron-deck/main';
 export function themeBg() {
     return nativeTheme.shouldUseDarkColors ? '#1a1a1a' : '#fafafa';
 }
+/**
+ * Backdrop ("desk") color for the native simulator WebContentsView — the
+ * surface the simulated phone sits on. Unlike {@link themeBg} (the window bg),
+ * the desk is a neutral grey kept a touch off the window so the light-colored
+ * phone keeps contrast against it in BOTH schemes.
+ *
+ * Dark:  hsl(0 0% 7%)  ≈ #121212  (the long-standing desk color — unchanged)
+ * Light: hsl(0 0% 91%) ≈ #e8e8e8  (neutral grey; the white phone reads on it)
+ *
+ * MUST stay equal to the renderer's `--color-sim-bg` (design.css) and the
+ * simulator page's `.device-shell-root` background (device-shell.css): the WCV,
+ * the desk, and the placeholder behind it are the same color so a height-resize
+ * never flashes a mismatched strip. Update all three together.
+ */
+export function simDeskBg() {
+    return nativeTheme.shouldUseDarkColors ? '#121212' : '#e8e8e8';
+}
 /**
  * Install a single process-wide listener that keeps every window's native
  * `backgroundColor` in sync with the active color scheme.
@@ -36,10 +54,25 @@ export function themeBg() {
 export function installThemeBackgroundSync() {
     const apply = () => {
         const bg = themeBg();
+        const isDark = nativeTheme.shouldUseDarkColors;
         for (const win of BrowserWindow.getAllWindows()) {
-            if (!win.isDestroyed()) {
+            if (win.isDestroyed())
+                continue;
+            // Isolate each window: a window closing mid-loop (or a renderer torn down
+            // between the isDestroyed() check and the send) must not abort the sync
+            // for the remaining windows.
+            try {
                 win.setBackgroundColor(bg);
+                // Notify renderer JS consumers that can't observe the CSS
+                // `prefers-color-scheme` change (Monaco's theme). Electron does not
+                // dispatch the renderer's matchMedia change event for programmatic
+                // `nativeTheme.themeSource` flips, so push it from here — the one place
+                // that already centralizes color-scheme reactions.
+                if (!win.webContents.isDestroyed()) {
+                    win.webContents.send(WorkbenchSettingsChannel.ThemeChanged, isDark);
+                }
             }
+            catch { /* window/webContents gone mid-loop */ }
         }
     };
     nativeTheme.on('updated', apply);

package/dist/preload/runtime/native-host.d.ts

@@ -4,6 +4,9 @@ export interface RenderHostUrlOptions {
     bridgeId: string;
     appId: string;
     pagePath: string;
+    /** Whether this page is a tabBar page. Surfaced on the URL so main can pick
+     *  the bottom safe-area policy at `did-attach-webview` (services/safe-area). */
+    isTab?: boolean;
 }
 export interface DiminaNativeHostBridge {
     enabled: boolean;

package/dist/preload/runtime/native-host.js

@@ -55,6 +55,8 @@ function buildBridge(cfg) {
             url.searchParams.set('bridgeId', opts.bridgeId);
             url.searchParams.set('appId', opts.appId);
             url.searchParams.set('pagePath', opts.pagePath);
+            if (opts.isTab)
+                url.searchParams.set('isTab', '1');
             return url.toString();
         },
         renderPreloadUrl: cfg.renderPreloadUrl,