feat: 🎸 wxWidgets dialog/frame DOM header

tests/e2e/modal.spec.ts

@@ -128,6 +128,20 @@ test.describe('Modal dialog border + drag (pcbjam #22)', () => {
     expect(await tryLoadApp(page), 'App should load').toBe(true);
     await waitForRegistry(page);
 
+    // The bare test shell lays out #window-container BELOW the full-size main
+    // canvas, so the modal (and its DOM title bar) render off the bottom of the
+    // viewport — the real app shells overlay it. Overlay it here so the DOM title
+    // bar is reachable by the pointer (the old canvas bar was reached indirectly
+    // via #canvas registry coords; the DOM bar must be clicked where it renders).
+    await page.evaluate(() => {
+      const wc = document.getElementById('window-container');
+      if (wc) {
+        wc.style.position = 'absolute';
+        wc.style.top = '0';
+        wc.style.left = '0';
+      }
+    });
+
     await clickByLabel(page, 'Custom Dialog');
     await waitForModalRect(page); // wait for the .window.toplevel to exist
     await page.waitForTimeout(400);
@@ -147,12 +161,16 @@ test.describe('Modal dialog border + drag (pcbjam #22)', () => {
     );
     await page.screenshot({ path: 'test-results/modal-02-before-drag.png', fullPage: true });
 
-    // Grab the title-bar strip (top TITLE_BAR_HEIGHT=22px), away from the close
-    // button at top-right. The wasm pointer-move handler is asyncified, so dwell
-    // after the first move to let the hovered window settle before pressing
-    // (same pattern the GAL draw tests need).
-    const startX = dlgBefore.centerX;
-    const startY = dlgBefore.screenY + 8;
+    // The dialog now drags via its real DOM title bar (`.window-titlebar`):
+    // pointer events on it → wx_window_move → wxWindow::Move. So grab the element
+    // at its actual on-screen position (getBoundingClientRect), NOT the registry
+    // coords the old canvas title bar needed. Center is over the title text, clear
+    // of the close × at the right.
+    const titlebar = page.locator(`${MODAL_SEL} .window-titlebar`);
+    const tbox = await titlebar.boundingBox();
+    expect(tbox, 'modal should have a DOM title bar').not.toBeNull();
+    const startX = tbox!.x + tbox!.width / 2;
+    const startY = tbox!.y + tbox!.height / 2;
     await page.mouse.move(startX, startY);
     await page.waitForTimeout(350);
     await page.mouse.down();

tests/e2e/secondary-frame-chrome.spec.ts

@@ -0,0 +1,100 @@
+import { test, expect, waitForApp } from './utils/fixtures';
+import { clickByLabel, waitForRegistry } from './utils/element-tracker';
+
+/**
+ * Validates the real-DOM title bar for secondary (non-main) wxFrames in the WASM
+ * DOM port — the fix for the "3D-viewer can't be dragged / can't be X-closed" bug.
+ *
+ * Root cause (confirmed): a non-main window's title bar used to be canvas-painted
+ * and pointer-events:none, so its clicks had to reach the central #canvas mouse
+ * router; an overlapping pointer-events:auto DOM control from another frame stole
+ * them. The fix gives ALL non-main top-level windows (secondary frames AND
+ * dialogs) a real DOM `.window-titlebar` (drag + `.window-titlebar-close`) that
+ * wins hit-testing via normal stacking.
+ *
+ * Drag dispatches real pointer events on the title bar (→ wx_window_move →
+ * wxWindow::Move); close clicks the × (→ wx_window_close → wx Close(); for a
+ * modal dialog this ends the modal loop via EndModal).
+ */
+
+const URL = '/standalone/secondary-frame-chrome/secondary-frame-chrome_test.html';
+
+test.describe('secondary-frame DOM title bar (drag / close)', () => {
+    test('frames and dialogs get a draggable, closable DOM title bar', async ({ page }) => {
+        await page.goto(URL);
+        await waitForApp(page);
+        await waitForRegistry(page);
+
+        const listWindows = () =>
+            page.evaluate(() =>
+                Array.from(document.querySelectorAll('#window-container [id^="window-"]')).map((e) => e.id));
+
+        const styleRect = (id: string) =>
+            page.evaluate((wid) => {
+                const el = document.getElementById(wid) as HTMLElement | null;
+                if (!el) return null;
+                const n = (v: string) => parseInt(v || '0', 10) || 0;
+                return { left: n(el.style.left), top: n(el.style.top), width: n(el.style.width), height: n(el.style.height) };
+            }, id);
+
+        async function openWindow(buttonLabel: string): Promise<string> {
+            const before = await listWindows();
+            expect(await clickByLabel(page, buttonLabel), `"${buttonLabel}" should be clickable`).toBe(true);
+            await page.waitForFunction(
+                (b: string[]) => Array.from(document.querySelectorAll('#window-container [id^="window-"]')).some((e) => !b.includes(e.id)),
+                before, { timeout: 15000 });
+            const after = await listWindows();
+            const id = after.find((w) => !before.includes(w));
+            expect(id, `${buttonLabel} should open a new window`).toBeTruthy();
+            await page.waitForTimeout(200);
+            return id as string;
+        }
+
+        // Returns true if the window moved after a title-bar drag.
+        async function dragViaTitlebar(winId: string): Promise<boolean> {
+            const bar = page.locator(`#${winId} .window-titlebar`);
+            const box = await bar.boundingBox();
+            if (!box) return false;
+            const before = await styleRect(winId);
+            const sx = box.x + box.width / 2;
+            const sy = box.y + box.height / 2;
+            await page.mouse.move(sx, sy);
+            await page.mouse.down();
+            await page.mouse.move(sx, sy + 90, { steps: 10 });
+            await page.mouse.up();
+            await page.waitForTimeout(250);
+            const after = await styleRect(winId);
+            return !!before && !!after && (Math.abs(after.top - before.top) > 5 || Math.abs(after.left - before.left) > 5);
+        }
+
+        async function closeViaTitlebar(winId: string): Promise<boolean> {
+            await page.locator(`#${winId} .window-titlebar-close`).click();
+            await page.waitForTimeout(400);
+            return page.evaluate((wid) => {
+                const el = document.getElementById(wid);
+                return !el || getComputedStyle(el).display === 'none';
+            }, winId);
+        }
+
+        // All non-main top-level windows — secondary frames AND dialogs — must
+        // have a DOM title bar, be draggable by it, and close via its × button.
+        for (const label of [
+            'Open Full GL Frame',
+            'Open Rich GL Frame',
+            'Open Small Frame',
+            'Open Modeless Dialog',
+        ]) {
+            const id = await openWindow(label);
+            const hasBar = await page.locator(`#${id} .window-titlebar`).count();
+            expect(hasBar, `${label} should have a DOM title bar`).toBe(1);
+
+            // Root-cause check: even with main-frame DOM controls present, the title
+            // bar is the top hit-test element at its own location.
+            const moved = await dragViaTitlebar(id);
+            expect(moved, `${label} should be draggable by its DOM title bar`).toBe(true);
+
+            const closed = await closeViaTitlebar(id);
+            expect(closed, `${label} should close via its × button`).toBe(true);
+        }
+    });
+});