xbintsc 0.3.25 → 0.3.35

package/dist/tests/e2e/gui-helpers.js

@@ -0,0 +1,74 @@
+/**
+ * Shared helpers for the `gui` extension e2e suites.
+ *
+ * Each suite compiles TypeScript programs that import `gui`, links them against
+ * the prebuilt `runtime/lib/<os>-<arch>/gui.a` and runs them. Programs close
+ * themselves through the `XT_GUI_AUTOCLOSE_MS` hook, so the tests never block on
+ * a real window. The suites are skipped when the GUI archive has not been built
+ * (run `npm run gui` first) and on Windows, where the archive is not produced
+ * yet.
+ *
+ * `createGuiHarness()` owns one temp directory per suite plus the shared 4x4
+ * test PNG; the suite calls `setup()` in `beforeAll` and `cleanup()` in
+ * `afterAll`.
+ */
+import { existsSync, mkdtempSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { spawnSync } from "node:child_process";
+import { expect } from "vitest";
+import { build } from "../../src/driver/compiler.js";
+import { createDefaultRegistry } from "../../src/extensions/registry.js";
+import { guiExtension } from "../../src/extensions/gui/index.js";
+import { findRuntimeDir, platformSlug } from "../../src/driver/paths.js";
+const archivePath = join(findRuntimeDir(), "lib", platformSlug(), "gui.a");
+/** True when the GUI archive exists and we are not on Windows. */
+export const guiAvailable = existsSync(archivePath) && process.platform !== "win32";
+/** A 4x4 PNG: left half red, right half blue (base64-encoded inline). */
+const LOGO_PNG_BASE64 = "iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFElEQVR42mP4z8DwH4Sh1H8G0gUALFAf4eNWqTEAAAAASUVORK5CYII=";
+export function createGuiHarness() {
+    let workdir = "";
+    let logoPath = "";
+    const compileAndRun = (name, source, extraFiles = {}) => {
+        for (const [fileName, contents] of Object.entries(extraFiles)) {
+            writeFileSync(join(workdir, fileName), contents);
+        }
+        const entry = join(workdir, `${name}.ts`);
+        writeFileSync(entry, source);
+        const extensions = createDefaultRegistry().register(guiExtension);
+        const result = build(entry, {
+            emit: "exe",
+            outDir: join(workdir, `out-${name}`),
+            cacheDir: join(workdir, `.cache-${name}`),
+            extensions,
+        });
+        expect(result.diagnostics.filter((diagnostic) => diagnostic.category === "error")).toEqual([]);
+        const executed = spawnSync(result.outputPath, [], {
+            encoding: "utf8",
+            env: { ...process.env, XT_GUI_AUTOCLOSE_MS: "400" },
+        });
+        expect(executed.status, executed.stderr).toBe(0);
+        const stdout = executed.stdout;
+        const value = (label) => {
+            const line = stdout.split("\n").find((entry) => entry.startsWith(`${label}=`));
+            expect(line, `missing ${label} in:\n${stdout}`).toBeDefined();
+            return line.slice(label.length + 1).trim();
+        };
+        return { stdout, status: executed.status, value };
+    };
+    return {
+        get logoPath() {
+            return logoPath;
+        },
+        setup() {
+            workdir = mkdtempSync(join(tmpdir(), "xbintsc-gui-"));
+            logoPath = join(workdir, "logo.png");
+            writeFileSync(logoPath, Buffer.from(LOGO_PNG_BASE64, "base64"));
+        },
+        cleanup() {
+            rmSync(workdir, { recursive: true, force: true });
+        },
+        compileAndRun,
+    };
+}
+//# sourceMappingURL=gui-helpers.js.map

package/dist/tests/e2e/gui-helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-helpers.js","sourceRoot":"","sources":["../../../tests/e2e/gui-helpers.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-layout.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * End-to-end tests for the `gui` extension — box layout and text measurement.
+ */
+export {};

package/dist/tests/e2e/gui-layout.test.js

@@ -0,0 +1,88 @@
+/**
+ * End-to-end tests for the `gui` extension — box layout and text measurement.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — layout", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("lays out block, inline and flex boxes", () => {
+        const { value } = harness.compileAndRun("layout", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box { width: 200px; height: 100px; padding: 10px; border: 2px solid #000; margin: 5px; }
+        #row { display: flex; width: 300px; gap: 10px; }
+        #row .a { width: 50px; height: 20px; }
+        #row .b { flex: 1; height: 20px; }
+        #wrap { width: 60px; font-size: 10px; }
+      </style></head><body>
+        <div id="box">hello</div>
+        <div id="row"><div class="a"></div><div class="b"></div></div>
+        <div id="wrap">aaaa bbbb cccc dddd</div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "layout", width: 800, height: 600 });
+      win.on("ready", () => {
+        const rect = (selector) => {
+          const r = win.getBoundingClientRect(selector);
+          return r.x + "," + r.y + "," + r.width + "," + r.height;
+        };
+        console.log("box=" + rect("#box"));
+        console.log("a=" + rect("#row .a"));
+        console.log("b=" + rect("#row .b"));
+        console.log("wrap=" + rect("#wrap"));
+        console.log("lh=" + win.fontMetrics(10).lineHeight);
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // Border box = content + padding (20) + border (4); margin offsets by 5.
+        expect(value("box")).toBe("5,5,224,124");
+        // Flex row: `.a` keeps 50px, `.b` grows into the remaining 240px after a 10px gap.
+        expect(value("a")).toBe("0,134,50,20");
+        expect(value("b")).toBe("60,134,240,20");
+        // 60px-wide box wraps "aaaa bbbb" / "cccc dddd" onto two lines. The line
+        // height comes from the real font metrics, so assert against them rather
+        // than hard-coding a pixel value (fonts differ per platform).
+        const wrap = value("wrap").split(",").map(Number);
+        expect(wrap.slice(0, 3)).toEqual([0, 154, 60]);
+        expect(wrap[3]).toBeCloseTo(2 * Number(value("lh")), 1);
+    });
+    it("shapes and measures text with the font stack", () => {
+        const { value } = harness.compileAndRun("text", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "text", width: 400, height: 300 });
+      win.on("ready", () => {
+        const fm16 = win.fontMetrics(16);
+        console.log("ready=" + fm16.ready);
+        console.log("lh16=" + fm16.lineHeight);
+        console.log("ascent16=" + fm16.ascent);
+        console.log("m16=" + win.measureText("Hello", 16));
+        console.log("m32=" + win.measureText("Hello", 32));
+        console.log("empty=" + win.measureText("", 16));
+        console.log("wide=" + (win.measureText("WWWW", 16) > win.measureText("iiii", 16)));
+        win.close();
+      });
+      win.loadHTML("<html><body></body></html>");
+      run();
+      `);
+        // Metrics are positive and scale ~linearly with the font size (this holds
+        // for both the real shaper and the no-font fallback).
+        const m16 = Number(value("m16"));
+        const m32 = Number(value("m32"));
+        expect(m16).toBeGreaterThan(0);
+        expect(m32).toBeGreaterThan(m16 * 1.8);
+        expect(m32).toBeLessThan(m16 * 2.2);
+        expect(Number(value("lh16"))).toBeGreaterThan(0);
+        expect(Number(value("ascent16"))).toBeGreaterThan(0);
+        expect(value("empty")).toBe("0");
+        expect(value("wide")).toBe("true");
+    });
+});
+//# sourceMappingURL=gui-layout.test.js.map

package/dist/tests/e2e/gui-layout.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-layout.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-layout.test.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;AAEnC,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,wBAAwB,EAAE,GAAG,EAAE;IAC5D,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAElC,EAAE,CAAC,uCAAuC,EAAE,GAAG,EAAE;QAC/C,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CACrC,QAAQ,EACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgCC,CACF,CAAC;QAEF,yEAAyE;QACzE,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACzC,mFAAmF;QACnF,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QACzC,yEAAyE;QACzE,yEAAyE;QACzE,8DAA8D;QAC9D,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC;QAClD,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,EAAE,CAAC,CAAC,CAAC;QAC/C,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,GAAG,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;IAC1D,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8CAA8C,EAAE,GAAG,EAAE;QACtD,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CACrC,MAAM,EACN;;;;;;;;;;;;;;;;;OAiBC,CACF,CAAC;QAEF,0EAA0E;QAC1E,sDAAsD;QACtD,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACjC,MAAM,GAAG,GAAG,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC;QACjC,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QAC/B,MAAM,CAAC,GAAG,CAAC,CAAC,eAAe,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QACvC,MAAM,CAAC,GAAG,CAAC,CAAC,YAAY,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;QACpC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC;QACrD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/tests/e2e/gui-lifecycle.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * End-to-end tests for the `gui` extension — window lifecycle and the frame
+ * loop (`requestAnimationFrame` / `cancelAnimationFrame`).
+ */
+export {};

package/dist/tests/e2e/gui-lifecycle.test.js

@@ -0,0 +1,58 @@
+/**
+ * End-to-end tests for the `gui` extension — window lifecycle and the frame
+ * loop (`requestAnimationFrame` / `cancelAnimationFrame`).
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — lifecycle", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("opens a GPU-backed window and delivers lifecycle events", () => {
+        const { stdout } = harness.compileAndRun("window", `
+      import { createWindow, run } from "gui";
+      const win = createWindow({ title: "test window", width: 320, height: 240 });
+      win.on("ready", () => console.log("gui ready"));
+      win.on("close", () => console.log("gui closed"));
+      win.setBackground("#101010");
+      win.loadHTML("<h1>hi</h1>");
+      run();
+      console.log("gui exited");
+      `);
+        const lines = stdout.trim().split("\n");
+        expect(lines).toContain("gui ready");
+        expect(lines).toContain("gui closed");
+        expect(lines).toContain("gui exited");
+    });
+    it("runs requestAnimationFrame callbacks each frame and honours cancelAnimationFrame", () => {
+        const { stdout, value } = harness.compileAndRun("raf", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "raf", width: 320, height: 240 });
+      let frames = 0;
+      const tick = (t: number) => {
+        frames = frames + 1;
+        win.document.getElementById("label").textContent = String(frames);
+        if (frames < 3) win.requestAnimationFrame(tick);
+        else {
+          console.log("frames=" + frames + ":" + (t > 0));
+          console.log("label=" + win.document.getElementById("label").textContent);
+          win.close();
+        }
+      };
+      win.on("ready", () => {
+        const cancelled = win.requestAnimationFrame(() => console.log("cancelled-ran"));
+        win.cancelAnimationFrame(cancelled);
+        const id = win.requestAnimationFrame(tick);
+        console.log("id=" + (id > 0));
+      });
+      win.loadHTML("<div id='label'>0</div>");
+      run();
+      `);
+        expect(value("id")).toBe("true");
+        expect(value("frames")).toBe("3:true"); // callback receives a timestamp
+        expect(value("label")).toBe("3"); // the DOM write was visible on the next read
+        expect(stdout).not.toContain("cancelled-ran");
+    });
+});
+//# sourceMappingURL=gui-lifecycle.test.js.map

package/dist/tests/e2e/gui-lifecycle.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-lifecycle.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-lifecycle.test.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;AAEnC,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,2BAA2B,EAAE,GAAG,EAAE;IAC/D,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAElC,EAAE,CAAC,yDAAyD,EAAE,GAAG,EAAE;QACjE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CACtC,QAAQ,EACR;;;;;;;;;OASC,CACF,CAAC;QACF,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC;QACxC,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kFAAkF,EAAE,GAAG,EAAE;QAC1F,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,KAAK,EACL;;;;;;;;;;;;;;;;;;;;;;;OAuBC,CACF,CAAC;QACF,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,gCAAgC;QACxE,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,6CAA6C;QAC/E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/tests/e2e/gui-paint.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * End-to-end tests for the `gui` extension — the paint/display list: backgrounds,
+ * borders, shaped text runs and images.
+ */
+export {};

package/dist/tests/e2e/gui-paint.test.js

@@ -0,0 +1,111 @@
+/**
+ * End-to-end tests for the `gui` extension — the paint/display list: backgrounds,
+ * borders, shaped text runs and images.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — paint", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("sizes and paints images (intrinsic and explicit)", () => {
+        const { stdout } = harness.compileAndRun("image", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #logo { width: 40px; height: 40px; }
+      </style></head><body>
+        <img id="logo" src="${harness.logoPath}">
+        <img id="natural" src="${harness.logoPath}">
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "image", width: 400, height: 300 });
+      win.on("ready", () => {
+        const logo = win.getBoundingClientRect("#logo");
+        console.log("logo=" + logo.width + "x" + logo.height);
+        const natural = win.getBoundingClientRect("#natural");
+        console.log("natural=" + natural.width + "x" + natural.height);
+        console.log(win.paintList().trim());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // Explicit CSS size wins; without one the intrinsic 4x4 size is used.
+        expect(stdout).toContain("logo=40x40");
+        expect(stdout).toContain("natural=4x4");
+        expect(stdout).toContain(`image x=0.0 y=0.0 w=40.0 h=40.0 src=${harness.logoPath}`);
+        expect(stdout).toContain(`image x=0.0 y=40.0 w=4.0 h=4.0 src=${harness.logoPath}`);
+    });
+    it("builds a display list of backgrounds and borders", () => {
+        const { value, stdout } = harness.compileAndRun("paint", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; background-color: #123456; }
+        #box { width: 100px; height: 40px; background: #ff0000; border: 4px solid #00ff00; border-radius: 8px; }
+      </style></head><body>
+        <div id="box">x</div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "paint", width: 800, height: 600 });
+      win.on("ready", () => {
+        const r = win.getBoundingClientRect("#box");
+        console.log("box-rect=" + r.x + "," + r.y + "," + r.width + "," + r.height);
+        console.log("paint-count=" + win.paintCount());
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        const occurrences = (needle) => list.split(needle).length - 1;
+        // Border box = 100x40 content + 4px border on every side.
+        expect(value("box-rect")).toBe("0,0,108,48");
+        // body background + #box background + 4 border edges.
+        expect(value("paint-count")).toBe("6");
+        expect(occurrences("#123456ff")).toBe(1); // body background
+        expect(occurrences("#ff0000ff")).toBe(1); // #box background
+        expect(occurrences("#00ff00ff")).toBe(4); // four border edges
+        // The background rectangle carries the 8px corner radius.
+        expect(list).toContain("r=8.0 color=#ff0000ff");
+    });
+    it("emits shaped text runs into the display list", () => {
+        const { stdout } = harness.compileAndRun("text-runs", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #t { font-size: 20px; color: #0000ff; }
+      </style></head><body>
+        <div id="t">Hi</div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "text-runs", width: 400, height: 300 });
+      win.on("ready", () => {
+        const r = win.getBoundingClientRect("#t");
+        console.log("rect=" + r.x + "," + r.y + "," + r.width + "," + r.height);
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        // The text fragment carries the resolved font size and colour.
+        expect(list).toContain('text x=0.0');
+        expect(list).toContain('size=20.0');
+        expect(list).toContain('color=#0000ffff "Hi"');
+    });
+});
+//# sourceMappingURL=gui-paint.test.js.map

package/dist/tests/e2e/gui-paint.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-paint.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-paint.test.ts"],"names":[],"mappings":"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"}

package/dist/tests/e2e/gui-script.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * End-to-end tests for the `gui` extension — compiling and running `<script>`
+ * bodies (inline and external, with imports) from loaded HTML.
+ */
+export {};

package/dist/tests/e2e/gui-script.test.js

@@ -0,0 +1,78 @@
+/**
+ * End-to-end tests for the `gui` extension — compiling and running `<script>`
+ * bodies (inline and external, with imports) from loaded HTML.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — scripts", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("compiles inline <script> bodies from an imported .html asset", () => {
+        const { value } = harness.compileAndRun("script", `
+      import { createWindow, run } from "gui";
+      import page from "./page.html";
+
+      const win = createWindow({ title: "script", width: 320, height: 240 });
+      win.on("ready", () => {
+        const button = win.document.getElementById("b");
+        button.click();
+        button.click();
+        console.log("after=" + win.document.getElementById("count").textContent);
+        console.log("button=" + button.textContent);
+        win.close();
+      });
+      win.loadHTML(page);
+      run();
+      `, {
+            "page.html": `<html><body>
+  <div id="count">0</div>
+  <button id="b">0</button>
+  <script lang="ts">
+    const button = document.getElementById("b");
+    const label = document.getElementById("count");
+    let n = 0;
+    button.addEventListener("click", () => {
+      n = n + 1;
+      button.textContent = String(n);
+      label.textContent = String(n);
+    });
+  </script>
+</body></html>`,
+        });
+        expect(value("after")).toBe("2");
+        expect(value("button")).toBe("2");
+    });
+    it("runs external <script src> modules with imports at load time", () => {
+        const { value } = harness.compileAndRun("scriptsrc", `
+      import { createWindow, run } from "gui";
+      import page from "./page-src.html";
+
+      const win = createWindow({ title: "scriptsrc", width: 320, height: 240 });
+      win.on("ready", () => {
+        const button = win.document.getElementById("b");
+        button.click();
+        button.click();
+        console.log("srcAfter=" + win.document.getElementById("b").textContent);
+        win.close();
+      });
+      win.loadHTML(page);
+      run();
+      `, {
+            "page-src.html": `<html><body><button id="b">0</button><script src="./counter.ts"></script></body></html>`,
+            "counter.ts": `
+import { double } from "./helper";
+const button = document.getElementById("b");
+let n = 0;
+button.addEventListener("click", () => {
+  n = double(n) + 1;
+  button.textContent = String(n);
+});
+`,
+            "helper.ts": "export function double(n: number) { return n * 2; }",
+        });
+        /* 0 -> 1 -> 3 proves the hoisted import (double) is linked. */
+        expect(value("srcAfter")).toBe("3");
+    });
+});
+//# sourceMappingURL=gui-script.test.js.map

package/dist/tests/e2e/gui-script.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-script.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-script.test.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAElE,MAAM,OAAO,GAAG,gBAAgB,EAAE,CAAC;AAEnC,QAAQ,CAAC,MAAM,CAAC,CAAC,YAAY,CAAC,CAAC,yBAAyB,EAAE,GAAG,EAAE;IAC7D,SAAS,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC,CAAC;IACjC,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC,CAAC;IAElC,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CACrC,QAAQ,EACR;;;;;;;;;;;;;;;OAeC,EACD;YACE,WAAW,EAAE;;;;;;;;;;;;;eAaN;SACR,CACF,CAAC;QACF,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACjC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACpC,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,8DAA8D,EAAE,GAAG,EAAE;QACtE,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CACrC,WAAW,EACX;;;;;;;;;;;;;;OAcC,EACD;YACE,eAAe,EAAE,yFAAyF;YAC1G,YAAY,EAAE;;;;;;;;CAQrB;YACO,WAAW,EAAE,qDAAqD;SACnE,CACF,CAAC;QACF,+DAA+D;QAC/D,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/dist/tests/e2e/gui-style.test.d.ts

@@ -0,0 +1,5 @@
+/**
+ * End-to-end tests for the `gui` extension — CSS cascade, stateful selectors
+ * (`:hover` / `:focus`) and transitions.
+ */
+export {};

package/dist/tests/e2e/gui-style.test.js

@@ -0,0 +1,175 @@
+/**
+ * End-to-end tests for the `gui` extension — CSS cascade, stateful selectors
+ * (`:hover` / `:focus`) and transitions.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — style", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("parses HTML/CSS and cascades computed styles", () => {
+        const { value } = harness.compileAndRun("cascade", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html>
+        <head>
+          <style>
+            body { font-size: 16px; color: #111111; }
+            div { width: 10%; }
+            .box { width: 25%; }
+            #main { width: 60%; color: #222222; }
+            .box > .inner { padding-top: 3px; }
+            .box .inner { padding-top: 5px; }
+            li:first-child { color: #555555; }
+            li:nth-child(2) { color: #666666; }
+            li:not(.skip) { font-weight: bold; }
+            [data-role="lead"] { text-align: center; }
+            .em { font-size: 2em; }
+            .rem { font-size: 2rem; }
+            .imp { color: #000000; }
+            .imp { color: #ff0000 !important; }
+          </style>
+        </head>
+        <body>
+          <div id="main" class="box">
+            <div class="inner" style="color: #00ff00">x</div>
+            <div class="inner">y</div>
+          </div>
+          <ul>
+            <li>one</li>
+            <li>two</li>
+            <li class="skip">three</li>
+          </ul>
+          <p data-role="lead">lead</p>
+          <div class="em">em</div>
+          <div class="rem">rem</div>
+          <div class="imp" style="color: #0000ff">important</div>
+        </body>
+      </html>
+      \`;
+
+      const win = createWindow({ title: "cascade", width: 800, height: 600 });
+      win.on("ready", () => {
+        const out = (label, value) => console.log(label + "=" + value);
+        out("main-width", win.computedStyle("#main", "width"));
+        out("inner-padding", win.computedStyle(".inner", "padding-top"));
+        out("inner-color", win.computedStyle(".inner", "color"));
+        out("body-color", win.computedStyle("body", "color"));
+        out("li1-color", win.computedStyle("li:first-child", "color"));
+        out("li2-color", win.computedStyle("li:nth-child(2)", "color"));
+        out("li2-weight", win.computedStyle("li:nth-child(2)", "font-weight"));
+        out("skip-weight", win.computedStyle("li.skip", "font-weight"));
+        out("lead-align", win.computedStyle("[data-role=\\"lead\\"]", "text-align"));
+        out("em-size", win.computedStyle(".em", "font-size"));
+        out("rem-size", win.computedStyle(".rem", "font-size"));
+        out("imp-color", win.computedStyle(".imp", "color"));
+        out("li-count", win.queryCount("li"));
+        out("lead-count", win.queryCount("[data-role=\\"lead\\"]"));
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("main-width")).toBe("60%"); // id beats class and tag
+        expect(value("inner-padding")).toBe("5px"); // equal specificity, later rule wins
+        expect(value("inner-color")).toBe("rgb(0, 255, 0)"); // inline beats the sheet
+        expect(value("body-color")).toBe("rgb(17, 17, 17)");
+        expect(value("li1-color")).toBe("rgb(85, 85, 85)"); // :first-child
+        expect(value("li2-color")).toBe("rgb(102, 102, 102)"); // :nth-child(2)
+        expect(value("li2-weight")).toBe("700"); // :not(.skip)
+        expect(value("skip-weight")).toBe("400"); // :not(.skip) excluded it
+        expect(value("lead-align")).toBe("center"); // [data-role="lead"]
+        expect(value("em-size")).toBe("32px"); // 2em of the 16px parent
+        expect(value("rem-size")).toBe("32px"); // 2rem of the 16px root
+        expect(value("imp-color")).toBe("rgb(255, 0, 0)"); // !important beats inline
+        expect(value("li-count")).toBe("3");
+        expect(value("lead-count")).toBe("1");
+    });
+    it("applies :hover and :focus state to selector matching", () => {
+        const { value } = harness.compileAndRun("state", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box { width: 100px; height: 50px; background: #000000; }
+        #box:hover { background: #ff0000; }
+        #box:focus { background: #00ff00; }
+        #box:hover > #inner { color: #0000ff; }
+        #inner { width: 20px; height: 20px; color: #888888; }
+      </style></head><body>
+        <div id="box"><div id="inner">x</div></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "state", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("initial-bg=" + win.computedStyle("#box", "background-color"));
+        console.log("initial-color=" + win.computedStyle("#inner", "color"));
+        win.sendEvent("mousemove", { x: 50, y: 40 });
+        console.log("hover-bg=" + win.computedStyle("#box", "background-color"));
+        win.sendEvent("mousemove", { x: 5, y: 5 });
+        console.log("inner-hover-color=" + win.computedStyle("#inner", "color"));
+        win.sendEvent("mousedown", { x: 50, y: 40, button: 0 });
+        console.log("focus-bg=" + win.computedStyle("#box", "background-color"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("initial-bg")).toBe("rgb(0, 0, 0)"); // no :hover rule match
+        expect(value("initial-color")).toBe("rgb(136, 136, 136)");
+        expect(value("hover-bg")).toBe("rgb(255, 0, 0)"); // hovering #box
+        // Hover also applies to ancestors of the hovered element.
+        expect(value("inner-hover-color")).toBe("rgb(0, 0, 255)");
+        expect(value("focus-bg")).toBe("rgb(0, 255, 0)"); // :focus wins over :hover
+    });
+    it("interpolates CSS transitions as the clock advances", () => {
+        const { value } = harness.compileAndRun("transition", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box {
+          width: 100px; height: 50px; background-color: #000000; color: #888888;
+          border-radius: 0px;
+          transition: background-color 1000ms linear, color 500ms linear, border-radius 1000ms linear;
+        }
+        #box:hover { background-color: #ffffff; color: #0000ff; border-radius: 10px; }
+      </style></head><body>
+        <div id="box">hi</div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "transition", width: 400, height: 300 });
+      win.on("ready", () => {
+        win.sendEvent("mousemove", { x: 50, y: 25 });
+        console.log("start=" + win.computedStyle("#box", "background-color"));
+        win.advance(250);
+        console.log("q1-bg=" + win.computedStyle("#box", "background-color"));
+        console.log("q1-color=" + win.computedStyle("#box", "color"));
+        win.advance(250);
+        console.log("q2-bg=" + win.computedStyle("#box", "background-color"));
+        console.log("q2-color=" + win.computedStyle("#box", "color"));
+        console.log("q2-radius=" + win.computedStyle("#box", "border-radius"));
+        win.advance(500);
+        console.log("end-bg=" + win.computedStyle("#box", "background-color"));
+        console.log("end-radius=" + win.computedStyle("#box", "border-radius"));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("start")).toBe("rgb(0, 0, 0)"); // 0% progress at t=0
+        expect(value("q1-bg")).toBe("rgb(64, 64, 64)"); // 25% of black->white
+        expect(value("q1-color")).toBe("rgb(68, 68, 196)"); // 50% of the 500ms color run
+        expect(value("q2-bg")).toBe("rgb(128, 128, 128)"); // halfway
+        expect(value("q2-color")).toBe("rgb(0, 0, 255)"); // finished
+        expect(value("q2-radius")).toBe("5px");
+        expect(value("end-bg")).toBe("rgb(255, 255, 255)"); // finished
+        expect(value("end-radius")).toBe("10px");
+    });
+});
+//# sourceMappingURL=gui-style.test.js.map