xbintsc 0.5.20 → 0.5.22

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

@@ -159,6 +159,165 @@ describe.skipIf(!guiAvailable)("gui extension — canvas", () => {
         expect(value("fill")).toBe("#ff0000");
         expect(value("text")).toBe("true");
     });
+    it("supports gradients, ellipses, rounded rects, dashes and line styles", () => {
+        const { value } = harness.compileAndRun("canvas-modern", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>body { margin: 0; }</style></head><body>
+        <canvas id="c" width="240" height="260"></canvas>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "canvas-modern", width: 400, height: 300 });
+      win.on("ready", () => {
+        const canvas: any = win.document.getElementById("c");
+        const ctx: any = canvas.getContext("2d");
+        const px = (x: number, y: number): string => {
+          const d = ctx.getImageData(x, y, 1, 1).data;
+          return d[0] + "," + d[1] + "," + d[2] + "," + d[3];
+        };
+
+        ctx.fillStyle = "#ffffff";
+        ctx.fillRect(0, 0, 240, 260);
+
+        // A horizontal red -> blue gradient, sampled well inside both ends.
+        const linear = ctx.createLinearGradient(0, 0, 100, 0);
+        linear.addColorStop(0, "#ff0000");
+        linear.addColorStop(1, "#0000ff");
+        ctx.fillStyle = linear;
+        ctx.fillRect(0, 0, 100, 20);
+        console.log("grad-left=" + px(5, 10));
+        console.log("grad-right=" + px(95, 10));
+        // The getter returns the same handle, not a copy.
+        console.log("same-gradient=" + (ctx.fillStyle === linear));
+
+        // A stop added after assignment is live: the right side turns blue.
+        const live = ctx.createLinearGradient(0, 0, 100, 0);
+        live.addColorStop(0, "#ff0000");
+        ctx.fillStyle = live;
+        live.addColorStop(1, "#0000ff");
+        ctx.fillRect(0, 30, 100, 20);
+        console.log("live-right=" + px(95, 40));
+
+        const radial = ctx.createRadialGradient(50, 70, 0, 50, 70, 35);
+        radial.addColorStop(0, "#ffffff");
+        radial.addColorStop(1, "#000000");
+        ctx.fillStyle = radial;
+        ctx.fillRect(0, 60, 100, 40);
+        console.log("radial-centre=" + px(50, 70));
+        console.log("radial-edge=" + px(88, 70));
+
+        ctx.fillStyle = "#00ff00";
+        ctx.beginPath();
+        ctx.ellipse(170, 70, 40, 15, 0, 0, Math.PI * 2);
+        ctx.fill();
+        console.log("ellipse-centre=" + px(170, 70));
+        console.log("ellipse-outside=" + px(170, 40));
+
+        ctx.fillStyle = "#ff00ff";
+        ctx.beginPath();
+        ctx.roundRect(10, 100, 70, 50, 14);
+        ctx.fill();
+        console.log("roundrect-centre=" + px(45, 125));
+        console.log("roundrect-corner=" + px(11, 101));
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 4;
+        ctx.lineCap = "butt";
+        ctx.setLineDash([10, 10]);
+        ctx.lineDashOffset = 0;
+        console.log("cap=" + ctx.lineCap);
+        console.log("join=" + ctx.lineJoin);
+        console.log("miter=" + ctx.miterLimit);
+        console.log("dash=" + ctx.getLineDash().join(","));
+        ctx.beginPath();
+        ctx.moveTo(120, 150);
+        ctx.lineTo(230, 150);
+        ctx.stroke();
+        console.log("dash-on=" + px(124, 150));
+        console.log("dash-off=" + px(136, 150));
+
+        ctx.setLineDash([]);
+        ctx.strokeStyle = "#ff0000";
+        ctx.lineWidth = 10;
+        ctx.lineCap = "square";
+        ctx.beginPath();
+        ctx.moveTo(120, 190);
+        ctx.lineTo(180, 190);
+        ctx.stroke();
+        console.log("square-cap=" + px(115, 190));
+        console.log("square-cap-far=" + px(105, 190));
+
+        // A miter fills the outer corner right to the tip; a bevel cuts it off.
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 20;
+        ctx.lineCap = "butt";
+        ctx.lineJoin = "miter";
+        ctx.beginPath();
+        ctx.moveTo(120, 215);
+        ctx.lineTo(120, 245);
+        ctx.lineTo(160, 245);
+        ctx.stroke();
+        console.log("miter-join=" + px(111, 254));
+        ctx.lineJoin = "bevel";
+        ctx.beginPath();
+        ctx.moveTo(180, 215);
+        ctx.lineTo(180, 245);
+        ctx.lineTo(220, 245);
+        ctx.stroke();
+        console.log("bevel-join=" + px(171, 254));
+
+        ctx.save();
+        ctx.translate(100, 100);
+        ctx.rotate(Math.PI / 2);
+        const t = ctx.getTransform();
+        console.log("nested-transform=" + Math.round(t.e) + "," + Math.round(t.f));
+        // Post-multiplied: the square sits at (90,100)..(100,110), not at the
+        // rotated origin. A pre-multiplied transform would put it elsewhere.
+        ctx.fillStyle = "#ff8800";
+        ctx.fillRect(0, 0, 10, 10);
+        console.log("rotated-rect=" + px(95, 105));
+        ctx.restore();
+        const r = ctx.getTransform();
+        console.log("restored-transform=" + r.a + "," + r.e + "," + r.f);
+
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const channels = (label) => value(label).split(",").map(Number);
+        const left = channels("grad-left");
+        expect(left[0]).toBeGreaterThan(200);
+        expect(left[2]).toBeLessThan(60);
+        const right = channels("grad-right");
+        expect(right[0]).toBeLessThan(60);
+        expect(right[2]).toBeGreaterThan(200);
+        expect(value("same-gradient")).toBe("true");
+        expect(channels("live-right")[2]).toBeGreaterThan(200);
+        // The radial gradient is white at its centre and black at its edge.
+        expect(channels("radial-centre")[0]).toBeGreaterThan(230);
+        expect(channels("radial-edge")[0]).toBeLessThan(40);
+        expect(channels("ellipse-centre")).toEqual([0, 255, 0, 255]);
+        expect(channels("ellipse-outside")).toEqual([255, 255, 255, 255]);
+        expect(channels("roundrect-centre")).toEqual([255, 0, 255, 255]);
+        expect(channels("roundrect-corner")).toEqual([255, 255, 255, 255]);
+        expect(value("cap")).toBe("butt");
+        expect(value("join")).toBe("miter");
+        expect(value("miter")).toBe("10");
+        expect(value("dash")).toBe("10,10");
+        expect(channels("dash-on")).toEqual([0, 0, 0, 255]);
+        expect(channels("dash-off")).toEqual([255, 255, 255, 255]);
+        // A square cap extends half a line width past the endpoint.
+        expect(channels("square-cap")).toEqual([255, 0, 0, 255]);
+        expect(channels("square-cap-far")).toEqual([255, 255, 255, 255]);
+        expect(channels("miter-join")).toEqual([0, 0, 0, 255]);
+        expect(channels("bevel-join")).toEqual([255, 255, 255, 255]);
+        expect(value("nested-transform")).toBe("100,100");
+        expect(channels("rotated-rect")).toEqual([255, 136, 0, 255]);
+        expect(value("restored-transform")).toBe("1,0,0");
+    });
     it("draws an image onto a canvas with drawImage", () => {
         const src = harness.imageSrc(harness.logoPath);
         const { value } = harness.compileAndRun("canvas-drawimage", `

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

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

package/dist/tests/e2e/gui-example-canvas.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * End-to-end smoke test for `examples/gui/pelican-canvas` — the animated
+ * `<canvas>` drawing.
+ *
+ * The drawing lives in `scene.js`, loaded by `index.html` through a plain
+ * `<script src>`: a browser runs it as-is, while xbintsc AOT-compiles the same
+ * body via the gui `.html` loader. `main.ts` only hosts the native window and
+ * reports deterministic pixel probes, so this test can assert that the
+ * gradients, paths and text really rasterised.
+ */
+export {};

package/dist/tests/e2e/gui-example-canvas.test.js

@@ -0,0 +1,70 @@
+/**
+ * End-to-end smoke test for `examples/gui/pelican-canvas` — the animated
+ * `<canvas>` drawing.
+ *
+ * The drawing lives in `scene.js`, loaded by `index.html` through a plain
+ * `<script src>`: a browser runs it as-is, while xbintsc AOT-compiles the same
+ * body via the gui `.html` loader. `main.ts` only hosts the native window and
+ * reports deterministic pixel probes, so this test can assert that the
+ * gradients, paths and text really rasterised.
+ */
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { dirname, join, resolve } from "node:path";
+import { spawnSync } from "node:child_process";
+import { Script } from "node:vm";
+import { fileURLToPath } from "node:url";
+import { afterAll, beforeAll, describe, expect, it } 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 { guiAvailable } from "./gui-helpers.js";
+/** The example lives at <repo>/examples/gui/pelican-canvas. */
+const exampleDir = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..", "examples", "gui", "pelican-canvas");
+let workdir = "";
+describe("pelican canvas example — browser entry", () => {
+    it("loads the shared scene as a classic script", () => {
+        const html = readFileSync(join(exampleDir, "index.html"), "utf8");
+        expect(html).toContain('<script src="./scene.js"></script>');
+        const script = readFileSync(join(exampleDir, "scene.js"), "utf8");
+        // A browser compiles this as a classic script: no ESM, no TypeScript.
+        expect(() => new Script(script)).not.toThrow();
+    });
+});
+describe.skipIf(!guiAvailable)("gui example — pelican canvas", () => {
+    beforeAll(() => {
+        workdir = mkdtempSync(join(tmpdir(), "xbintsc-pelican-canvas-"));
+        for (const file of ["index.html", "main.ts", "scene.js"]) {
+            writeFileSync(join(workdir, file), readFileSync(join(exampleDir, file), "utf8"));
+        }
+    });
+    afterAll(() => {
+        rmSync(workdir, { recursive: true, force: true });
+    });
+    it("compiles the canvas drawing and reports pixels", () => {
+        const extensions = createDefaultRegistry().register(guiExtension);
+        const result = build(join(workdir, "main.ts"), {
+            emit: "exe",
+            outDir: join(workdir, "out"),
+            cacheDir: join(workdir, ".cache"),
+            extensions,
+        });
+        expect(result.diagnostics.filter((diagnostic) => diagnostic.category === "error")).toEqual([]);
+        const executed = spawnSync(result.outputPath, [], {
+            encoding: "utf8",
+            env: { ...process.env, XT_GUI_AUTOCLOSE_MS: "2000" },
+        });
+        expect(executed.status, executed.stderr).toBe(0);
+        const stdout = executed.stdout ?? "";
+        expect(stdout).toContain("window=1000x640 (gui extension, SDL_GPU)");
+        expect(stdout).toContain("canvas-box=x=0 y=0 1000x640");
+        expect(stdout).toContain("canvas-size=1000x640");
+        // The title is white text on the gradient sky.
+        expect(stdout).toContain("pixel-title=255,255,255,255");
+        // The road gradient, and the pelican body (not the sky colour).
+        expect(stdout).toMatch(/pixel-road=\d+,\d+,\d+,255/);
+        expect(stdout).toMatch(/pixel-pelican=\d+,\d+,\d+,255/);
+        expect(stdout).toContain("gui exited");
+    });
+});
+//# sourceMappingURL=gui-example-canvas.test.js.map

package/dist/tests/e2e/gui-example-canvas.test.js.map

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

package/dist/tests/e2e/gui-inline-svg.test.d.ts

@@ -0,0 +1,11 @@
+/**
+ * End-to-end tests for the `gui` extension — inline `<svg>` elements.
+ *
+ * An inline `<svg>` tree is not an SVG *file*: the document already holds the
+ * nodes, so the engine serializes the subtree back into an SVG document and
+ * rasterises it exactly like `<img src="logo.svg">`. These tests pin the
+ * replaced-element sizing, the display-list entry, the serializer's canonical
+ * SVG names (the HTML parser lowercases `viewBox`/`linearGradient`) and the
+ * fact that a DOM mutation re-serializes the artwork.
+ */
+export {};

package/dist/tests/e2e/gui-inline-svg.test.js

@@ -0,0 +1,160 @@
+/**
+ * End-to-end tests for the `gui` extension — inline `<svg>` elements.
+ *
+ * An inline `<svg>` tree is not an SVG *file*: the document already holds the
+ * nodes, so the engine serializes the subtree back into an SVG document and
+ * rasterises it exactly like `<img src="logo.svg">`. These tests pin the
+ * replaced-element sizing, the display-list entry, the serializer's canonical
+ * SVG names (the HTML parser lowercases `viewBox`/`linearGradient`) and the
+ * fact that a DOM mutation re-serializes the artwork.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — inline svg", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("sizes and paints an inline svg as a replaced element", () => {
+        const { stdout, stderr } = harness.compileAndRun("inline-svg", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #scaled { width: 64px; height: 48px; }
+      </style></head><body>
+        <svg id="natural" width="8" height="6" viewBox="0 0 8 6">
+          <rect width="8" height="6" fill="#ff0000"/>
+          <circle cx="4" cy="3" r="2" fill="#0000ff"/>
+        </svg>
+        <svg id="viewbox" viewBox="0 0 20 10">
+          <rect width="20" height="10" fill="#00ff00"/>
+        </svg>
+        <svg id="scaled" width="8" height="6" viewBox="0 0 8 6">
+          <rect width="8" height="6" fill="#ff0000"/>
+        </svg>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "inline-svg", width: 400, height: 300 });
+      win.on("ready", () => {
+        const natural = win.getBoundingClientRect("#natural");
+        console.log("natural=" + natural.width + "x" + natural.height);
+        const viewbox = win.getBoundingClientRect("#viewbox");
+        console.log("viewbox=" + viewbox.width + "x" + viewbox.height);
+        const scaled = win.getBoundingClientRect("#scaled");
+        console.log("scaled=" + scaled.width + "x" + scaled.height);
+        console.log("display=" + win.computedStyle("#natural", "display"));
+        console.log("hit=" + win.hitTest(4, 3));
+        console.log("no-rects=" + (win.layoutTree().indexOf("<rect>") < 0));
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+        const info = win.inlineSvg("#natural");
+        console.log("markup=" + info.markup);
+        console.log("parsed=" + info.width + "x" + info.height + " shapes=" + info.shapes);
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // width/height attributes give the intrinsic size; a bare viewBox is the
+        // fallback; an explicit CSS size wins over both.
+        expect(stdout).toContain("natural=8x6");
+        expect(stdout).toContain("viewbox=20x10");
+        expect(stdout).toContain("scaled=64x48");
+        // The `<svg>` box itself is the hit-test target; its children are vector
+        // art, not HTML boxes, so the walk stays at the svg element.
+        expect(stdout).toContain("hit=svg#natural");
+        expect(stdout).toContain("display=inline-block");
+        // The svg subtree produces no HTML boxes: only the replaced box is laid out.
+        expect(stdout).toContain("no-rects=true");
+        // A source newline between two inline elements is a hard line break in this
+        // engine (like `<br>`), so the three boxes stack in document order.
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        expect(list).toContain("image x=0.0 y=0.0 w=8.0 h=6.0 inline-svg=");
+        expect(list).toContain("image x=0.0 y=6.0 w=20.0 h=10.0 inline-svg=");
+        expect(list).toContain("image x=0.0 y=16.0 w=64.0 h=48.0 inline-svg=");
+        // The serialized document restores the case-sensitive SVG names the HTML
+        // parser lowercased, and only the svg subtree is included.
+        const markup = stdout
+            .split("\n")
+            .find((line) => line.startsWith("markup="))
+            .slice("markup=".length);
+        expect(markup.startsWith('<svg xmlns="http://www.w3.org/2000/svg" id="natural" width="8" height="6" viewBox="0 0 8 6">')).toBe(true);
+        expect(markup).toContain('<rect width="8" height="6" fill="#ff0000"></rect>');
+        expect(markup).toContain('<circle cx="4" cy="3" r="2" fill="#0000ff"></circle>');
+        expect(markup).not.toContain("viewbox=");
+        expect(stdout).toContain("parsed=8x6 shapes=2");
+        // Rasterising a parsed document must actually succeed.
+        expect(stderr).not.toContain("could not rasterise inline SVG");
+    });
+    it("parses gradients, re-serializes on mutation and restyles the box", () => {
+        const { stdout, stderr } = harness.compileAndRun("inline-svg-mutate", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #icon { background: #123456; border: 2px solid #00ff00; }
+      </style></head><body>
+        <svg id="icon" width="24" height="24" viewBox="0 0 24 24">
+          <defs>
+            <linearGradient id="grad" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="24" y2="24">
+              <stop offset="0%" stop-color="#ff0000"/>
+              <stop offset="100%" stop-color="#0000ff"/>
+            </linearGradient>
+          </defs>
+          <rect id="box" width="24" height="24" fill="url(#grad)"/>
+        </svg>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "inline-svg-mutate", width: 400, height: 300 });
+      win.on("ready", () => {
+        const first = win.inlineSvg("#icon");
+        console.log("shapes=" + first.shapes);
+        console.log("gradient=" + (first.markup.indexOf("linearGradient") >= 0));
+        console.log("units=" + (first.markup.indexOf('gradientUnits="userSpaceOnUse"') >= 0));
+        console.log("stops=" + first.markup.split("<stop").length);
+
+        const icon = win.document.getElementById("icon");
+        icon.setAttribute("width", "48");
+        const rect = win.document.querySelector("rect");
+        rect.setAttribute("fill", "#00ff00");
+        const grown = win.getBoundingClientRect("#icon");
+        const second = win.inlineSvg("#icon");
+        console.log("grown=" + grown.width + "x" + grown.height);
+        console.log("moved=" + (second.markup.indexOf('fill="#00ff00"') >= 0));
+
+        icon.innerHTML = '<circle cx="12" cy="12" r="10" fill="#ffff00"/>';
+        const third = win.inlineSvg("#icon");
+        console.log("replaced=" + (third.markup.indexOf("<circle") >= 0) + " shapes=" + third.shapes);
+        console.log("paint-list-start");
+        console.log(win.paintList());
+        console.log("paint-list-end");
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(stdout).toContain("shapes=1");
+        // The HTML parser lowercases `linearGradient`; the serializer restores it,
+        // or NanoSVG would silently drop the gradient definition.
+        expect(stdout).toContain("gradient=true");
+        expect(stdout).toContain("units=true");
+        // start + two stops = three occurrences of "<stop".
+        expect(stdout).toContain("stops=3");
+        // A presentation-attribute mutation changes the intrinsic size, and a paint
+        // mutation changes the serialized document the renderer rasterises.
+        expect(stdout).toContain("grown=52x28");
+        expect(stdout).toContain("moved=true");
+        // `innerHTML` swaps the artwork for a new subtree.
+        expect(stdout).toContain("replaced=true shapes=1");
+        const list = stdout.slice(stdout.indexOf("paint-list-start"), stdout.indexOf("paint-list-end"));
+        // The svg element is still an ordinary styled box: background + 4 borders.
+        expect(list).toContain("color=#123456ff");
+        expect((list.match(/#00ff00ff/g) ?? []).length).toBe(4);
+        expect(list).toContain("w=48.0 h=24.0 inline-svg=");
+        expect(stderr).not.toContain("could not rasterise inline SVG");
+    });
+});
+//# sourceMappingURL=gui-inline-svg.test.js.map

package/dist/tests/e2e/gui-inline-svg.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gui-inline-svg.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-inline-svg.test.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;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,4BAA4B,EAAE,GAAG,EAAE;IAChE,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,sDAAsD,EAAE,GAAG,EAAE;QAC9D,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC9C,YAAY,EACZ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAyCC,CACF,CAAC;QACF,yEAAyE;QACzE,iDAAiD;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAC1C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACzC,yEAAyE;QACzE,6DAA6D;QAC7D,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;QACjD,6EAA6E;QAC7E,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAC1C,4EAA4E;QAC5E,oEAAoE;QACpE,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAChG,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,2CAA2C,CAAC,CAAC;QACpE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,6CAA6C,CAAC,CAAC;QACtE,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,8CAA8C,CAAC,CAAC;QACvE,yEAAyE;QACzE,2DAA2D;QAC3D,MAAM,MAAM,GAAG,MAAM;aAClB,KAAK,CAAC,IAAI,CAAC;aACX,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAE;aAC3C,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;QAC3B,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,8FAA8F,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrI,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,mDAAmD,CAAC,CAAC;QAC9E,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,sDAAsD,CAAC,CAAC;QACjF,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACzC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,qBAAqB,CAAC,CAAC;QAChD,uDAAuD;QACvD,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,gCAAgC,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,kEAAkE,EAAE,GAAG,EAAE;QAC1E,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC9C,mBAAmB,EACnB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA8CC,CACF,CAAC;QACF,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACrC,2EAA2E;QAC3E,0DAA0D;QAC1D,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;QAC1C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACvC,oDAAoD;QACpD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,SAAS,CAAC,CAAC;QACpC,4EAA4E;QAC5E,oEAAoE;QACpE,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;QACxC,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;QACvC,mDAAmD;QACnD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACnD,MAAM,IAAI,GAAG,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAAC,CAAC,CAAC;QAChG,2EAA2E;QAC3E,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC1C,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QACxD,MAAM,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QACpD,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,gCAAgC,CAAC,CAAC;IACjE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/doc/ai/contributing.md

@@ -110,7 +110,8 @@ diff scratch/ref.ll scratch/gen2.ll
   therefore never allocate per access.
 - The GC is a non-moving mark-sweep collector: new heap objects go through
   `xt_alloc`, and a value must be reachable from an explicit root slot, a
-  registered root provider (the event loop, the microtask queue) or the
+  registered root provider (the event loop, the microtask queue, the async I/O
+  job roots) or the
   conservative C-stack scan while it is live. A value held only in a C local that
   is not on the scanned stack is a bug.
 

package/doc/ai/extensions.md

@@ -36,7 +36,7 @@ resolve to the same implementation.
 | Module | Notes |
 | --- | --- |
 | `fs` | **synchronous API only** (`readFileSync`, `writeFileSync`, …); `fs/promises` is separate |
-| `fs/promises` | promise-based file APIs |
+| `fs/promises` | promise-based file APIs; the blocking I/O runs on the async I/O worker pool and settles on the reactor |
 | `path` | also hooks namespace dispatch, so `path.join(...)` works |
 | `os` | |
 | `process` | `process.cwd()`, `argv`, `env`, …; namespace dispatch too |
@@ -54,8 +54,9 @@ Coverage per module (exact functions and options) is in
 [../unimplemented/node.md](../unimplemented/node.md).
 
 Remember the runtime model before building on `net`/`http`: the event loop runs
-**after** the program body, but `async`/`await` now suspends on pending promises,
-so a promise settled from a socket callback can be awaited. See
+**after** the program body, but `async`/`await` suspends on pending promises, so a
+promise settled from a socket callback, a timer or an offloaded file/HTTP job can
+be awaited. `net.connect` itself is still blocking. See
 [language-support.md](./language-support.md).
 
 ### `gui` — HTML/CSS window
@@ -75,9 +76,10 @@ media API (`play`/`pause`/`currentTime`/`volume`/…) plus the
 program drive playback. There are no built-in controls — draw your own chrome
 with elements and CSS (see `examples/gui/media.ts`). Video frames and audio PCM
 are decoded on the main thread. `<canvas>` is supported too: `getContext("2d")`
-returns a context whose fills, paths, text and `drawImage` are rasterised by a
-self-written CPU rasteriser, and element handles expose `canvas` drawing plus
-`width`/`height`. CSS `transform`/`transform-origin` work as paint-time
+returns a context whose fills, paths, gradients, text and `drawImage` are
+rasterised by a self-written CPU rasteriser (plus line caps/joins, dashed
+strokes, `ellipse` and `roundRect`), and element handles expose `canvas` drawing
+plus `width`/`height`. CSS `transform`/`transform-origin` work as paint-time
 effects, so a box (and the text, images and children in it) can be translated,
 scaled and rotated without reflowing anything — animate it per frame from
 `requestAnimationFrame` or with `transition: transform` (see

package/doc/ai/language-support.md

@@ -75,7 +75,8 @@ Canonical detail (always current, much longer):
 | `setTimeout` and callbacks | ✅ | timers run on the core event loop; `await new Promise(r => setTimeout(r, ms))` works |
 | `queueMicrotask` / `setImmediate` / `performance.now` | ✅ | microtasks share the promise FIFO queue; `setImmediate` is a zero-delay timer with numeric ids; `performance.now` is monotonic fractional milliseconds |
 | Sockets / servers (`http`, `net`, `dgram`) | ✅ | callbacks run on the event loop and can settle a promise you await (`net` / `http` examples included in the tests) |
-| `fs/promises` | ⚠️ | awaitable, but each call performs its I/O synchronously before settling, so it does not yield while the I/O runs |
+| `fs/promises` | ✅ | file, directory and `FileHandle` operations run on the async I/O worker pool and settle on the reactor, so timers and sockets keep running while they wait |
+| Global `fetch` | ✅ | HTTP/1.1 client whose connect/send/receive runs on the same worker pool; `await fetch(...)` yields and redirects are followed on the reactor. `http://` only (no TLS) and the body is buffered before resolving |
 | Worker threads | 🚫 | workers are child processes |
 | `async` generators | ✅ | suspend at `await` and `yield`; every `.next()` returns a promise; `for await...of` supported |
 

package/doc/ai/zh-CN/contributing.md

@@ -93,7 +93,7 @@ diff scratch/ref.ll scratch/gen2.ll
 - 字符串字面量会被驻留：每个不同字面量只在 `main` 中创建一次，存入 GC 根全局，
   每次使用只做一次 load；属性名因此不再逐次分配。
 - GC 是非移动标记清扫：新堆对象走 `xt_alloc`；值存活期间必须能从显式根槽、已注册的
-  根提供者（事件循环、微任务队列）或 C 栈保守扫描到达。只存在于未被扫描的 C 局部
+  根提供者（事件循环、微任务队列、异步 I/O job 根）或 C 栈保守扫描到达。只存在于未被扫描的 C 局部
   变量里的值就是 bug。
 
 ## 修改运行时

package/doc/ai/zh-CN/extensions.md

@@ -35,7 +35,7 @@ xbintsc run app.ts --ext node
 | 模块 | 说明 |
 | --- | --- |
 | `fs` | **仅同步 API**（`readFileSync`、`writeFileSync` 等）；`fs/promises` 是独立模块 |
-| `fs/promises` | 基于 Promise 的文件 API |
+| `fs/promises` | 基于 Promise 的文件 API；阻塞 I/O 跑在异步 I/O 线程池上并在 reactor 上 settle |
 | `path` | 同时接入命名空间分发，`path.join(...)` 可用 |
 | `os` | |
 | `process` | `process.cwd()`、`argv`、`env` 等；也接入命名空间分发 |
@@ -53,8 +53,9 @@ xbintsc run app.ts --ext node
 [../../zh-CN/unimplemented/node.md](../../zh-CN/unimplemented/node.md)。
 
 在 `net`/`http` 上搭东西之前，先记住运行时模型：事件循环在**程序主体之后**才运行，
-但 `async`/`await` 现在会在 pending Promise 上挂起，因此由套接字回调 settle 的 Promise
-可以被 await。见 [language-support.md](./language-support.md)。
+但 `async`/`await` 会在 pending Promise 上挂起，因此由套接字回调、定时器或 offload 的
+文件/HTTP job settle 的 Promise 都可以 await。`net.connect` 本身仍是阻塞的。见
+[language-support.md](./language-support.md)。
 
 ### `gui` —— HTML/CSS 窗口
 
@@ -70,7 +71,8 @@ import { createWindow, run } from "gui";
 `loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error` 事件可让程序驱动播放。
 没有内置控件——用元素和 CSS 自绘控件（见 `examples/gui/media.ts`）；视频帧与音频 PCM
 都在主线程解码。也支持 `<canvas>`：`getContext("2d")` 返回的上下文，其填充、路径、
-文本与 `drawImage` 由自研 CPU 光栅器处理，元素句柄还暴露 `width`/`height`。CSS
+渐变、文本与 `drawImage` 由自研 CPU 光栅器处理（另有线段端点/连接、虚线描边、
+`ellipse` 与 `roundRect`），元素句柄还暴露 `width`/`height`。CSS
 `transform`/`transform-origin` 作为绘制期效果可用，因此一个盒子（以及其中的文本、
 图像与子元素）可以被平移、缩放与旋转而不触发任何重排——可以用
 `requestAnimationFrame` 逐帧驱动，或写成 `transition: transform`（见

package/doc/ai/zh-CN/language-support.md

@@ -72,7 +72,8 @@ xbintsc 编译 TypeScript 的一个**实用子集**。本页用来判断你能
 | `setTimeout` 与回调 | ✅ | 定时器运行在核心事件循环上；`await new Promise(r => setTimeout(r, ms))` 可用 |
 | `queueMicrotask` / `setImmediate` / `performance.now` | ✅ | 微任务与 Promise 共用 FIFO 队列；`setImmediate` 是零延迟定时器，返回数字 id；`performance.now` 返回单调递增的毫秒小数 |
 | 套接字/服务端（`http`、`net`、`dgram`） | ✅ | 回调在事件循环上执行，可以 settle 你正在 await 的 Promise（测试含 `net`/`http` 示例） |
-| `fs/promises` | ⚠️ | 可以 await，但每次调用仍先同步完成 I/O 再 settle，I/O 期间不会让出 |
+| `fs/promises` | ✅ | 文件、目录与 `FileHandle` 操作跑在异步 I/O 线程池上，并在 reactor 上 settle，等待期间定时器与套接字继续运行 |
+| 全局 `fetch` | ✅ | HTTP/1.1 客户端，connect/send/receive 跑在同一线程池；`await fetch(...)` 会让出，重定向在 reactor 上处理。仅 `http://`（无 TLS），resolve 前缓冲整个响应体 |
 | worker 线程 | 🚫 | worker 是子进程 |
 | `async` 生成器 | ✅ | 可在 `await` 与 `yield` 处挂起；每次 `.next()` 返回 Promise；支持 `for await...of` |
 

package/doc/gui/api.md

@@ -65,6 +65,7 @@ win.documentTree()                     // serialized DOM (debugging)
 win.layoutTree()                       // serialized layout boxes (debugging)
 win.paintCount()                       // number of shapes in the display list
 win.paintList()                        // serialized display list (debugging)
+win.inlineSvg(selector)                // serialized inline <svg>: { markup, width, height, shapes }
 win.measureText(text, fontSize?, family?)  // shaped advance width in pixels
 win.fontMetrics(fontSize?, family?)    // { ascent, descent, lineHeight, ready }
 win.hitTest(x, y)                      // deepest element descriptor, or ""
@@ -73,6 +74,13 @@ win.advance(ms)                        // step the CSS transition clock (testing
 win.stats()                            // engine/runtime counters (memory debugging)
 ```
 
+`win.inlineSvg(selector)` returns the standalone SVG document the engine builds
+from the first `<svg>` element matching `selector` (`markup`), together with the
+intrinsic size and shape count NanoSVG parses out of it; it is `undefined` when
+nothing matches or the element is not an `<svg>`. It makes the serializer's
+canonical casing (`viewBox`, `linearGradient`, `gradientUnits`, …) testable
+without a GPU — the HTML parser delivers those names lowercased.
+
 `win.stats()` returns `{ heapBytes, heapAllocations, treeNodes, detachedRoots,`
 `detachedNodes, handles, handleSlots, listeners }`: the live runtime heap, the
 size of the DOM tree, the detached-node pool, and the element-handle tables. In a