xbintsc 0.5.36 → 0.5.37

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

@@ -98,5 +98,220 @@ describe.skipIf(!guiAvailable)("gui extension — dom", () => {
         expect(value("winCompat")).toBe("win:div#inner.warm");
         expect(value("stopped")).toBe("inner");
     });
+    it("mutates the tree with append/prepend/replaceChildren/insertAdjacentHTML and namespaces", () => {
+        const { value } = harness.compileAndRun("dom-mutation", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><body style="margin:0">
+        <div id="host"></div>
+      </body></html>\`;
+
+      const SVG_NS = "http://www.w3.org/2000/svg";
+      const win = createWindow({ title: "dom-mutation", width: 400, height: 300 });
+      win.on("ready", () => {
+        const doc = win.document;
+        const host: any = doc.getElementById("host");
+
+        // append/prepend mix nodes and strings, like the DOM.
+        host.append("a", doc.createElement("b"));
+        console.log("append=" + host.textContent + ":" + host.children.length + ":" +
+                    host.lastElementChild.tagName);
+        host.prepend("z", doc.createElement("i"));
+        console.log("prepend=" + host.textContent + ":" + host.firstElementChild.tagName);
+
+        // insertAdjacentHTML at all four positions.
+        host.insertAdjacentHTML("beforebegin", "<p id='pre'>pre</p>");
+        host.insertAdjacentHTML("afterbegin", "<b>head</b>");
+        host.insertAdjacentHTML("beforeend", "<u>tail</u>");
+        host.insertAdjacentHTML("afterend", "<p id='post'>post</p>");
+        console.log("adjacent=" + doc.getElementById("pre").textContent + ":" +
+                    doc.getElementById("post").textContent + ":" +
+                    host.firstElementChild.tagName + ":" + host.lastElementChild.tagName);
+
+        // replaceChildren keeps a node argument that used to be a child.
+        const keep: any = doc.createElement("em");
+        keep.textContent = "keep";
+        host.append(keep);
+        host.replaceChildren("t", keep);
+        console.log("replace=" + host.textContent + ":" + host.children.length + ":" +
+                    host.firstElementChild.tagName);
+
+        // createElementNS records the namespace and preserves SVG's case.
+        const gradient: any = doc.createElementNS(SVG_NS, "svg:linearGradient");
+        console.log("ns=" + gradient.namespaceURI + ":" + gradient.localName + ":" +
+                    gradient.prefix + ":" + gradient.tagName);
+        const rect: any = doc.createElementNS(SVG_NS, "rect");
+        console.log("svg-case=" + rect.tagName + ":" + rect.localName + ":" + rect.prefix);
+        const html: any = doc.createElementNS("http://www.w3.org/1999/xhtml", "DIV");
+        console.log("html-ns=" + html.localName + ":" + html.namespaceURI + ":" + html.tagName);
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("append")).toBe("a:1:B");
+        expect(value("prepend")).toBe("za:I");
+        expect(value("adjacent")).toBe("pre:post:B:U");
+        expect(value("replace")).toBe("tkeep:1:EM");
+        expect(value("ns")).toBe("http://www.w3.org/2000/svg:linearGradient:svg:linearGradient");
+        expect(value("svg-case")).toBe("rect:rect:null");
+        expect(value("html-ns")).toBe("div:http://www.w3.org/1999/xhtml:DIV");
+    });
+    it("honours the style object, computed style and geometry arguments", () => {
+        const { value } = harness.compileAndRun("dom-style-args", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box { width: 100px; height: 40px; margin-top: 10px; }
+        #box::before { content: "hi"; color: #123456; }
+      </style></head><body>
+        <div id="box">x</div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "dom-style-args", width: 400, height: 300 });
+      win.on("ready", () => {
+        const doc = win.document;
+        const box: any = doc.getElementById("box");
+        const cl = box.classList;
+
+        // toggle(name, force) is idempotent; toggle(name) still flips.
+        console.log("t1=" + cl.toggle("on", true) + ":" + box.className);
+        console.log("t2=" + cl.toggle("on", true) + ":" + box.className);
+        console.log("t3=" + cl.toggle("on", false) + ":" + box.className);
+        console.log("t4=" + cl.toggle("on", false) + ":" + box.className);
+        console.log("t5=" + cl.toggle("on") + ":" + box.className);
+
+        box.style.setProperty("color", "#ff0000", "important");
+        console.log("p1=" + box.style.getPropertyValue("color") + ":" + box.style.getPropertyPriority("color"));
+        box.style.setProperty("color", "#0000ff");
+        console.log("p2=" + box.style.getPropertyPriority("color") + ":" + getComputedStyle(box).getPropertyValue("color"));
+        // An invalid priority makes the call a no-op, as in the CSSOM.
+        box.style.setProperty("color", "#00ff00", "urgent");
+        console.log("p3=" + box.style.getPropertyValue("color"));
+        console.log("rm=" + box.style.removeProperty("color") + ":" + box.style.getPropertyValue("color"));
+
+        box.style.cssText = "background-color: #010203; width: 55px";
+        console.log("ct=" + box.style.getPropertyValue("width") + ":" + box.style.getPropertyValue("background-color"));
+
+        const cs: any = getComputedStyle(box);
+        console.log("cs=" + cs.getPropertyValue("display") + ":" + cs.getPropertyValue("width") +
+                    ":" + cs.getPropertyPriority("width") + ":" + cs.getPropertyValue("margin-top"));
+        const before: any = getComputedStyle(box, "::before");
+        console.log("before=" + before.getPropertyValue("content") + ":" + before.getPropertyValue("color"));
+        console.log("unsupported-pseudo=" + getComputedStyle(box, "::marker").getPropertyValue("color"));
+
+        doc.title = "changed";
+        console.log("title=" + doc.title);
+
+        const rect: any = box.getBoundingClientRect();
+        console.log("rect=" + rect.x + "," + rect.y + "," + rect.top + "," + rect.right + "," +
+                    rect.bottom + "," + rect.left + "," + rect.width);
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("t1")).toBe("true:on");
+        expect(value("t2")).toBe("true:on");
+        expect(value("t3")).toBe("false:");
+        expect(value("t4")).toBe("false:");
+        expect(value("t5")).toBe("true:on");
+        expect(value("p1")).toBe("#ff0000:important");
+        expect(value("p2")).toBe(":rgb(0, 0, 255)");
+        expect(value("p3")).toBe("#0000ff");
+        expect(value("rm")).toBe("#0000ff:");
+        expect(value("ct")).toBe("55px:#010203");
+        expect(value("cs")).toBe("block:55px::10px");
+        expect(value("before")).toBe('"hi":rgb(18, 52, 86)');
+        expect(value("unsupported-pseudo")).toBe("");
+        expect(value("title")).toBe("changed");
+        expect(value("rect")).toBe("0,10,10,55,50,0,55");
+    });
+    it("writes style and dataset properties through named access", () => {
+        const { value } = harness.compileAndRun("dom-properties", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box { width: 100px; height: 40px; margin-top: 10px; }
+        #box::before { content: "hi"; color: #123456; }
+      </style></head><body>
+        <div id="box" data-role="lead" data-user-id="7">x</div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "dom-properties", width: 400, height: 300 });
+      win.on("ready", () => {
+        const doc = win.document;
+        const box: any = doc.getElementById("box");
+
+        // Property assignment used to park a dead field on the JS object.
+        box.style.width = "50%";
+        box.style.height = "30px";
+        console.log("width=" + box.style.width + ":" + win.computedStyle("#box", "width"));
+        console.log("rect=" + box.getBoundingClientRect().width + "x" + box.getBoundingClientRect().height);
+        box.style.backgroundColor = "#ff0000";
+        console.log("bg=" + box.style.backgroundColor + ":" + win.computedStyle("#box", "background-color"));
+        box.style.display = "none";
+        console.log("hidden=" + win.computedStyle("#box", "display"));
+        box.style.display = "";
+        console.log("shown=" + win.computedStyle("#box", "display"));
+        box.style.zIndex = "5";
+        console.log("z=" + win.computedStyle("#box", "z-index"));
+
+        // setProperty and named access address the same declaration block.
+        box.style.setProperty("color", "#00ff00");
+        console.log("color=" + box.style.color + ":" + box.style.getPropertyValue("color") +
+                    ":" + win.computedStyle("#box", "color"));
+        box.style.setProperty("--accent", "#abcdef");
+        console.log("custom=" + box.style.getPropertyValue("--accent") + ":" + box.style["--accent"]);
+        console.log("decl=" + box.style.length + ":" + box.style.item(0) + ":" + box.style.item(5));
+        box.style.removeProperty("z-index");
+        console.log("removed=" + ("zIndex" in box.style) + ":" + box.style.zIndex);
+
+        // dataset maps camelCase keys to data-* attributes, both ways.
+        console.log("dataset=" + box.dataset.role + ":" + box.dataset.userId);
+        box.dataset.count = "3";
+        console.log("data-set=" + box.getAttribute("data-count") + ":" + ("count" in box.dataset) +
+                    ":" + box.dataset.hasOwnProperty("count"));
+        box.dataset.role = "hero";
+        console.log("data-write=" + box.getAttribute("data-role"));
+        delete box.dataset.count;
+        console.log("data-delete=" + box.hasAttribute("data-count") + ":" + (box.dataset.count === undefined));
+        console.log("data-keys=" + Object.keys(box.dataset).join(","));
+
+        // getComputedStyle answers named properties from the cascade too.
+        const cs: any = getComputedStyle(box);
+        console.log("cs=" + cs.width + ":" + cs.height + ":" + cs.backgroundColor + ":" +
+                    cs.marginTop + ":" + cs.getPropertyValue("background-color") +
+                    ":" + cs.getPropertyValue("--accent"));
+        const before: any = getComputedStyle(box, "::before");
+        console.log("before=" + before.content + ":" + before.color);
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("width")).toBe("50%:50%");
+        expect(value("rect")).toBe("200x30");
+        expect(value("bg")).toBe("#ff0000:rgb(255, 0, 0)");
+        expect(value("hidden")).toBe("none");
+        expect(value("shown")).toBe("block");
+        expect(value("z")).toBe("5");
+        expect(value("color")).toBe("#00ff00:#00ff00:rgb(0, 255, 0)");
+        expect(value("custom")).toBe("#abcdef:#abcdef");
+        expect(value("decl")).toBe("6:width:--accent");
+        expect(value("removed")).toBe("false:");
+        expect(value("dataset")).toBe("lead:7");
+        expect(value("data-set")).toBe("3:true:true");
+        expect(value("data-write")).toBe("hero");
+        expect(value("data-delete")).toBe("false:true");
+        expect(value("data-keys")).toBe("role,userId");
+        expect(value("cs")).toBe("50%:30px:rgb(255, 0, 0):10px:rgb(255, 0, 0):#abcdef");
+        expect(value("before")).toBe('"hi":rgb(18, 52, 86)');
+    });
 });
 //# sourceMappingURL=gui-dom.test.js.map

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

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

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

@@ -88,5 +88,117 @@ describe.skipIf(!guiAvailable)("gui extension — events", () => {
         expect(stdout).not.toContain("web-event=click:");
         expect(stdout).toContain("web-event=key:a");
     });
+    it("honours listener options, event init fields and dispatch identity", () => {
+        const { value } = harness.compileAndRun("event-options", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><body style="margin:0">
+        <div id="outer"><div id="inner">x</div></div>
+      </body></html>\`;
+
+      const win = createWindow({ title: "event-options", width: 300, height: 200 });
+      win.on("ready", () => {
+        const doc = win.document;
+        const outer: any = doc.getElementById("outer");
+        const inner: any = doc.getElementById("inner");
+
+        // once
+        let once = 0;
+        inner.addEventListener("click", () => { once++; }, { once: true });
+        inner.click();
+        inner.click();
+        console.log("once=" + once);
+
+        // passive: preventDefault is ignored, a normal listener still cancels
+        let passive = false;
+        inner.addEventListener("click", (e: any) => {
+          e.preventDefault();
+          passive = e.defaultPrevented;
+        }, { passive: true });
+        inner.click();
+        console.log("passive=" + passive);
+        let active = false;
+        inner.addEventListener("click", (e: any) => {
+          e.preventDefault();
+          active = e.defaultPrevented;
+        });
+        inner.click();
+        console.log("active=" + active);
+
+        // signal removes the listener, including an already-aborted one
+        const controller = new AbortController();
+        let signaled = 0;
+        inner.addEventListener("click", () => { signaled++; }, { signal: controller.signal });
+        inner.click();
+        controller.abort();
+        inner.click();
+        console.log("signal=" + signaled + ":" + controller.signal.aborted);
+        const abortEvent = new AbortController();
+        let onAbort = 0;
+        abortEvent.signal.addEventListener("abort", () => { onAbort++; });
+        abortEvent.abort();
+        console.log("abort-event=" + onAbort + ":" + abortEvent.signal.aborted +
+                    ":" + (abortEvent.signal.reason instanceof Error));
+        const pre = new AbortController();
+        pre.abort();
+        let never = 0;
+        inner.addEventListener("click", () => { never++; }, { signal: pre.signal });
+        inner.click();
+        console.log("pre-aborted=" + never);
+
+        // window listeners take the same options
+        let winOnce = 0;
+        win.addEventListener("custom", () => { winOnce++; }, { once: true });
+        win.sendEvent("custom", {});
+        win.sendEvent("custom", {});
+        console.log("win-once=" + winOnce);
+        const winAbort = new AbortController();
+        let winSignaled = 0;
+        win.addEventListener("custom2", () => { winSignaled++; }, { signal: winAbort.signal });
+        win.sendEvent("custom2", {});
+        winAbort.abort();
+        win.sendEvent("custom2", {});
+        console.log("win-signal=" + winSignaled);
+
+        // EventInit fields survive construction
+        const custom: any = new CustomEvent("ping", { detail: 42, bubbles: true, composed: true });
+        console.log("event=" + custom.type + ":" + custom.detail + ":" + custom.bubbles +
+                    ":" + custom.composed + ":" + custom.isTrusted + ":" + custom.eventPhase);
+        const mouse: any = new MouseEvent("click", { clientX: 7, clientY: 8, button: 2, bubbles: true });
+        console.log("mouse=" + mouse.clientX + "," + mouse.clientY + "," + mouse.button);
+
+        // dispatchEvent keeps the event identity and exposes the path/phases
+        const phases: string[] = [];
+        outer.addEventListener("click", (e: any) => {
+          phases.push("capture" + e.eventPhase + ":" + (e.composedPath()[0] === inner));
+        }, true);
+        inner.addEventListener("click", (e: any) => {
+          phases.push("target" + e.eventPhase + ":" + (e.composedPath().length > 1));
+        });
+        const dispatched: any = new CustomEvent("click", { bubbles: true });
+        let seen = false;
+        inner.addEventListener("click", (e: any) => { seen = e === dispatched; });
+        inner.dispatchEvent(dispatched);
+        console.log("path=" + phases.join("|") + ":identity=" + seen + ":target=" + (dispatched.target === inner));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("once")).toBe("1");
+        expect(value("passive")).toBe("false");
+        expect(value("active")).toBe("true");
+        expect(value("signal")).toBe("1:true");
+        expect(value("abort-event")).toBe("1:true:true");
+        expect(value("pre-aborted")).toBe("0");
+        expect(value("win-once")).toBe("1");
+        expect(value("win-signal")).toBe("1");
+        expect(value("event")).toBe("ping:42:true:true:false:0");
+        expect(value("mouse")).toBe("7,8,2");
+        // Capture runs ancestor-first (phase 1), the target runs at phase 2, the
+        // dispatched object keeps its identity and gains its target.
+        expect(value("path")).toBe("capture1:true|target2:true:identity=true:target=true");
+    });
 });
 //# sourceMappingURL=gui-events.test.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gui-events.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-events.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,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,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,OAAO,EACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCC,CACF,CAAC;QAEF,2DAA2D;QAC3D,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,2EAA2E;QAC3E,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACnD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gFAAgF,EAAE,GAAG,EAAE;QACxF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,YAAY,EACZ;YACE,0CAA0C;YAC1C,EAAE;YACF,sEAAsE;YACtE,iBAAiB;YACjB,uDAAuD;YACvD,gDAAgD;YAChD,yCAAyC;YACzC,yCAAyC;YACzC,4CAA4C;YAC5C,EAAE;YACF,sFAAsF;YACtF,uCAAuC;YACvC,+CAA+C;YAC/C,sDAAsD;YACtD,yDAAyD;YACzD,6DAA6D;YAC7D,gBAAgB;YAChB,KAAK;YACL,0CAA0C;YAC1C,QAAQ;YACR,4CAA4C;SAC7C,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAC;QACF,8CAA8C;QAC9C,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACnD,6EAA6E;QAC7E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"file":"gui-events.test.js","sourceRoot":"","sources":["../../../tests/e2e/gui-events.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,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,0DAA0D,EAAE,GAAG,EAAE;QAClE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,OAAO,EACP;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAmCC,CACF,CAAC;QAEF,2DAA2D;QAC3D,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACzC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QACrC,2EAA2E;QAC3E,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,sBAAsB,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACnD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,2BAA2B,CAAC,CAAC;QACtD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;QAC5C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,mBAAmB,CAAC,CAAC;IAChD,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,gFAAgF,EAAE,GAAG,EAAE;QACxF,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,aAAa,CAC7C,YAAY,EACZ;YACE,0CAA0C;YAC1C,EAAE;YACF,sEAAsE;YACtE,iBAAiB;YACjB,uDAAuD;YACvD,gDAAgD;YAChD,yCAAyC;YACzC,yCAAyC;YACzC,4CAA4C;YAC5C,EAAE;YACF,sFAAsF;YACtF,uCAAuC;YACvC,+CAA+C;YAC/C,sDAAsD;YACtD,yDAAyD;YACzD,6DAA6D;YAC7D,gBAAgB;YAChB,KAAK;YACL,0CAA0C;YAC1C,QAAQ;YACR,4CAA4C;SAC7C,CAAC,IAAI,CAAC,IAAI,CAAC,CACb,CAAC;QACF,8CAA8C;QAC9C,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QAC7C,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC3C,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,wBAAwB,CAAC,CAAC;QACnD,6EAA6E;QAC7E,MAAM,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,kBAAkB,CAAC,CAAC;QACjD,MAAM,CAAC,MAAM,CAAC,CAAC,SAAS,CAAC,iBAAiB,CAAC,CAAC;IAC9C,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,mEAAmE,EAAE,GAAG,EAAE;QAC3E,MAAM,EAAE,KAAK,EAAE,GAAG,OAAO,CAAC,aAAa,CACrC,eAAe,EACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAgGC,CACF,CAAC;QAEF,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAChC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QACrC,MAAM,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QACjD,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACvC,MAAM,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACtC,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,CAAC;QACzD,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACrC,yEAAyE;QACzE,6DAA6D;QAC7D,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,sDAAsD,CAAC,CAAC;IACrF,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}

package/doc/gui/api.md

@@ -21,13 +21,41 @@ Methods implemented on a window handle: `setTitle` / `setSize` / `loadHTML` /
 `getHTML` / `setBackground` / `close` / `isOpen` / `on` / `off`, plus `driver()`,
 which reports the SDL_GPU backend in use (`"vulkan"`, `"direct3d12"`, `"metal"`,
 … — SDL picks the best one the device supports). The Web spellings are available
-too: `addEventListener` / `removeEventListener` are aliases of `on` / `off` (their
-`options` argument is accepted and ignored) and the `closed` getter mirrors
-`isOpen()`, so a document written against the browser API runs unchanged.
-Events emitted:
-`ready` (after the first presented frame), `load`, `close`, `resize` and the
-input events `mousemove`, `mousedown`, `mouseup`, `click`, `wheel`, `keydown`,
-`keyup`.
+too: `addEventListener` / `removeEventListener` take the standard options bag
+(`capture`, `once`, `passive`, `signal`), and `closed` mirrors `isOpen()`, so a
+document written against the browser API runs unchanged.
+
+Element listeners accept the same options: `{ once }` drops the listener after
+its first call, `{ passive: true }` makes `preventDefault()` a no-op, and
+`{ signal }` (an `AbortSignal` from `new AbortController()`) removes it on
+abort, including a signal that was already aborted when the listener was added.
+`element.dispatchEvent(event)` dispatches the *same* event object (identity is
+observable), fills in `target` / `currentTarget` / `eventPhase` and records the
+path for `event.composedPath()`. `new Event(...)`, `new CustomEvent(...)`,
+`new MouseEvent(...)`, `new KeyboardEvent(...)`, `new PointerEvent(...)`,
+`new WheelEvent(...)`, `new FocusEvent(...)`, `new InputEvent(...)` and
+`new SubmitEvent(...)` keep every field of their `init` object (`detail`,
+`composed`, the mouse/keyboard members, …). Window listeners take the same bag
+(capture is part of listener identity; window delivery has no capture phase).
+
+Window navigation is real: `scrollTo(x, y)` / `scrollTo({ left, top })` /
+`scrollBy(...)` move the page viewport (clamped to the content bounds; painting
+and hit testing follow it), and `scrollX` / `scrollY` / `pageXOffset` /
+`pageYOffset` report it. `focus()` raises the OS window and sets
+`document.hasFocus()`; `blur()` clears it. Events emitted:
+`ready` (after the first presented frame), `load`, `close`, `resize`, `scroll`,
+`focus`, `blur` and the input events `mousemove`, `mousedown`, `mouseup`,
+`click`, `wheel`, `keydown`, `keyup`.
+
+`createWindow(options)` honours more than the title and size:
+`{ title, width, height, highDensity, resizable, borderless, alwaysOnTop,
+hidden, fullscreen, x, y, opacity, maximized, minimized }` map to the matching
+SDL window flags/calls instead of being ignored.
+
+`window.confirm(message)` / `window.prompt(message, defaultValue)` never drop
+their arguments: with `XT_GUI_DIALOGS=1` and a live window they show a native
+message box; otherwise the message goes to stderr and the documented default is
+returned (`confirm` → `false`, `prompt` → `defaultValue` or `""`).
 
 On Windows a GUI program is linked as a **Windows-subsystem** executable, so
 launching it does not flash a console window. That also means stdout/stderr go
@@ -63,12 +91,13 @@ requestAnimationFrame(frame);
 | `navigator` | `userAgent` (a desktop Chrome string ending in `xbintsc`), `platform`, `vendor`, `language(s)`, `hardwareConcurrency`, `maxTouchPoints`, `onLine`, `vibrate()` |
 | `localStorage` | an in-memory `getItem` / `setItem` / `removeItem` / `clear` / `key` / `length` store |
 | `AudioContext`, `webkitAudioContext` | a Web Audio graph with a real mixer and decoder (see below) |
-| `Event`, `CustomEvent`, `ProgressEvent`, … | event constructors |
+| `Event`, `CustomEvent`, `ProgressEvent`, `MouseEvent`, `KeyboardEvent`, `PointerEvent`, `WheelEvent`, `FocusEvent`, `InputEvent`, `SubmitEvent` | event constructors; the `init` argument is kept as given (`detail`, `composed`, mouse/keyboard fields, …) |
+| `AbortController`, `AbortSignal` | a real controller/signal pair for `{ signal }` listener removal, with `abort()`, `aborted`, `reason`, `onabort` and `throwIfAborted()` |
 | `HTMLCanvasElement`, `HTMLImageElement`, `WebGLRenderingContext`, `WebGL2RenderingContext`, `WebGLBuffer`/`WebGLTexture`/`WebGLShader`/`WebGLProgram`/`WebGLFramebuffer`/`WebGLRenderbuffer`/`WebGLUniformLocation`/`WebGLActiveInfo`/`WebGLVertexArrayObject`/`WebGLSampler`/`WebGLQuery`/`WebGLSync`/`WebGLTransformFeedback` | real constructor values. `canvas.getContext("webgl")` and `getContext("webgl2")` return GPU contexts (see [WebGL](./webgl.md)). |
 | `ImageBitmap`, `createImageBitmap(source)` | immutable bitmaps backed by decoded pixels (`<img>`, `<canvas>`, `<video>` frames and `ImageData` shapes); the promise resolves immediately and `texImage2D` accepts the result |
 | `ImageData`, `OffscreenCanvas`, `XRWebGL*`, `Request`, `Headers`, `Response`, `ReadableStream`, `DOMParser` | `typeof` probes answer `"undefined"` (no XR/fetch/streaming backend), which lets a page take its "unsupported" branch instead of calling a no-op stub. Three.js pages use its real renderer on this backend (see [Known issues](./known-issues.md)). |
 | `requestAnimationFrame` / `cancelAnimationFrame` | queued on the window's frame list; see [Runtime integration](./runtime.md) |
-| `alert` / `confirm` / `prompt`, `matchMedia`, `getComputedStyle`, `escape` | host implementations (Annex B `escape` encodes per UTF-16 code unit, matching `decodeURIComponent(escape(bytes))`) |
+| `alert` / `confirm` / `prompt`, `matchMedia`, `getComputedStyle`, `escape` | host implementations. `matchMedia` returns a **live** list (cached per query): `matches` is re-evaluated on resize and `change` listeners fire when it flips. `confirm`/`prompt` use a native dialog only with `XT_GUI_DIALOGS=1`; otherwise they report the message on stderr and return the documented default (Annex B `escape` encodes per UTF-16 code unit, matching `decodeURIComponent(escape(bytes))`) |
 
 `getElementById` / `querySelector` are answered even before `loadHTML` runs: the
 handle is *pending* and binds to the real node the first time it is used, so a

package/doc/gui/canvas.md

@@ -36,12 +36,20 @@ a shared prototype. The handle is cached on the element, so every call returns
 the **same** object and the drawing state (transform, styles, path) is per
 canvas, not per call. `ctx.canvas` is the owning element handle.
 
+`getContext("2d", attributes)` honours `alpha` on the first call: with
+`{ alpha: false }` the bitmap starts (and clears) opaque black. The other
+attributes are reported by `getContextAttributes()` at their specification
+defaults (`antialias: true`, `depth: true`, `stencil: false`,
+`premultipliedAlpha: true`, `preserveDrawingBuffer: false`, `colorSpace:
+"srgb"`, …), so a feature test gets an honest answer.
+
 ## Drawing model
 
 The rasteriser is deliberately small and self-written (no Skia/Cairo). It
 anti-aliases with **4 vertical sub-scanlines** per pixel row and an **analytic
 horizontal coverage** pass, and fills paths with the **non-zero winding rule**
-(so `arc`-shaped holes work when wound the other way). An axis-aligned rectangle
+(so `arc`-shaped holes work when wound the other way) unless
+`fill("evenodd")` selects the even-odd rule. An axis-aligned rectangle
 (`b == 0 && c == 0` in the transform) takes a direct coverage fast path.
 Blending is non-premultiplied source-over, scaled by `globalAlpha`.
 
@@ -63,10 +71,11 @@ matching GPU texture.
 
 State and transforms: `save` / `restore` (which restore the transform, line
 width, alpha, font/text settings **and** the fill/stroke styles),
-`translate`, `rotate`, `scale`, `transform(a,b,c,d,e,f)`, `setTransform`,
-`resetTransform`, `getTransform` (returns an object with `a`…`f` and `is2D`).
-Transforms compose in canvas order: `translate(x, y); rotate(a)` rotates around
-the translated origin.
+`translate`, `rotate`, `scale`, `transform(a,b,c,d,e,f)` / `transform(matrix)`,
+`setTransform(a,b,c,d,e,f)` / `setTransform(matrix)`, `resetTransform`,
+`getTransform` (returns an object with `a`…`f` and `is2D`). A matrix is a
+`{ a, b, c, d, e, f }` object or a six-element array. Transforms compose in
+canvas order: `translate(x, y); rotate(a)` rotates around the translated origin.
 
 Styles and settings: `fillStyle` / `strokeStyle` (CSS colors understood by the
 cascade's color parser, or a `CanvasGradient`), `lineWidth`, `globalAlpha`,
@@ -86,10 +95,18 @@ distance from the **outer** circle's centre (`x1, y1`), so `x0`/`y0` are
 currently ignored: use concentric circles (`x0 == x1`, `y0 == y1`).
 
 Paths: `beginPath`, `closePath`, `moveTo`, `lineTo`, `rect`, `roundRect`,
-`arc`, `ellipse`, `quadraticCurveTo`, `bezierCurveTo`, then `fill` (multi-loop,
-non-zero winding) or `stroke`. Bezier and quadratic segments are flattened into
-line segments; arcs and ellipses are flattened too. `roundRect` accepts one
-radius number (the array form is not implemented).
+`arc`, `ellipse`, `quadraticCurveTo`, `bezierCurveTo`, then
+`fill(fillRule?)` / `fill(path, fillRule?)` (multi-loop; `"nonzero"` or
+`"evenodd"`) or `stroke(path?)`. Bezier and quadratic segments are flattened
+into line segments; arcs and ellipses are flattened too. `roundRect` accepts a
+single radius number or the CSS radius list (`[all]`, `[tl, br]`,
+`[tl, tr, br]`, `[tl, tr, br, bl]`, numbers or `{ x, y }` pairs; corners are
+drawn circular).
+
+`Path2D` is implemented with the same path commands (`moveTo`, `lineTo`,
+`closePath`, `rect`, `roundRect`, `arc`, `ellipse`, `quadraticCurveTo`,
+`bezierCurveTo`, `addPath`) and can be passed to `fill`/`stroke`, so a path can
+be built once and replayed under different transforms.
 
 Rectangles: `clearRect`, `fillRect`, `strokeRect`.
 
@@ -97,9 +114,12 @@ Dashes: `setLineDash(segments)` / `getLineDash()` / `lineDashOffset` implement
 the standard pattern rules (an odd-length list is duplicated, negative or
 non-finite entries are ignored, an all-zero list means a solid line).
 
-Text: `measureText(text)` (returns `{ width }`), `fillText(text, x, y)` and
-`strokeText(text, x, y)`. Text is shaped with HarfBuzz and rasterised with
-FreeType (the same stack as HTML text) at the transform's approximate scale.
+Text: `measureText(text)` (returns `{ width }`), `fillText(text, x, y,
+maxWidth?)` and `strokeText(text, x, y, maxWidth?)`. Text is shaped with
+HarfBuzz and rasterised with FreeType (the same stack as HTML text) at the
+transform's approximate scale. A positive `maxWidth` condenses advances and
+glyph bitmaps horizontally so the run is at most that wide (as the canvas API
+specifies) instead of being ignored.
 **Only translation and uniform scale are honoured** — a rotated or skewed
 transform still places each glyph at its transformed baseline point but does not
 rotate the glyph bitmaps. `strokeText` currently fills with the stroke style
@@ -119,14 +139,25 @@ Test hook: `getImageData(x, y, w, h)` copies a region to
 `{ width, height, data }` where `data` is a row-major RGBA8 byte array.
 Out-of-bounds pixels are transparent.
 
+Patterns: `createPattern(source, repetition?)` accepts an `<img>` or another
+`<canvas>` and tiles it in user space (`repeat`, `repeat-x`, `repeat-y`,
+`no-repeat`), so the tiles follow the current transform. Assign the result to
+`fillStyle`/`strokeStyle`; assigning a colour replaces it.
+
+Image data and export: `createImageData(width, height)` allocates a blank
+`{ width, height, data }`, and `putImageData(imageData, dx, dy[, dirtyX, dirtyY,
+dirtyWidth, dirtyHeight])` copies bytes straight into the bitmap (no transform,
+blending or `globalAlpha`). `canvas.toDataURL(type?)` exports a PNG data URL and
+`canvas.toBlob(callback, type?)` delivers a Blob-shaped `{ type, size }` from a
+microtask (the bytes are on `__xt_gui_blob_data`; there is no
+`URL.createObjectURL`).
+
 ## Not implemented
 
-Patterns (`createPattern`), shadows, `clip()`, `globalCompositeOperation`,
-`putImageData`, `createImageData`, `isPointInPath`, `setTransform` with a
-`DOMMatrix`, `drawImage` with an image smoothing toggle, `toDataURL`/`toBlob`,
-`<canvas>` as a CSS `background-image`, and offscreen canvases
-(`OffscreenCanvas`, `transferControlToOffscreen`). `roundRect` takes a single
-radius, and radial gradients ignore the inner circle's offset.
+Shadows, `clip()`, `globalCompositeOperation`, `isPointInPath`, `drawImage` with
+an image smoothing toggle, `<canvas>` as a CSS `background-image`, and offscreen
+canvases (`OffscreenCanvas`, `transferControlToOffscreen`).
+Radial gradients ignore the inner circle's offset.
 
 See also [Media](./media.md) for the image/video/audio decode stack that
 `drawImage` and the texture upload share.

package/doc/gui/dom.md

@@ -72,18 +72,65 @@ created.textContent = "added";
 box.appendChild(created);
 box.removeChild(created);
 
+// Parent/child helpers accept nodes and strings in one call.
+box.append("text", doc.createElement("span"));
+box.prepend(doc.createElement("b"));
+box.insertAdjacentHTML("beforeend", "<i>tail</i>"); // beforebegin/afterbegin/beforeend/afterend
+box.replaceChildren("fresh", doc.createElement("em"));
+
+// Namespaces are recorded; foreign (SVG) element names keep their case.
+const gradient = doc.createElementNS("http://www.w3.org/2000/svg", "svg:linearGradient");
+console.log(gradient.namespaceURI, gradient.localName, gradient.prefix);
+
 inner.addEventListener("click", (e) => console.log(e.target.id, e.currentTarget.id));
 inner.click();                          // synthesise a click at the element
 console.log(box.offsetWidth, box.offsetHeight);   // rounded border box
 console.log(box.contains(inner));                 // descendant test
 ```
 
+### Style properties, dataset, computed style and geometry
+
+The inline `style` object is a CSSOM declaration block. Named access reads and
+writes the same block as `setProperty` (`el.style.display = "none"`,
+`el.style.backgroundColor = "#f00"`, camelCase mapped to the CSS spelling, and
+`el.style["--accent"]` for custom properties); `setProperty(name, value,
+priority)` stores `!important` when `priority` is `"important"` (any other
+priority makes the call a no-op, and an empty value removes the property).
+`getPropertyValue` / `getPropertyPriority` read it back, `removeProperty`
+returns the previous value, `cssText` gets or replaces the whole block,
+`style.length` / `style.item(i)` enumerate it, and an unset property answers
+`""`.
+
+`el.dataset` is a live `DOMStringMap` over the element's `data-*` attributes:
+`dataset.fooBar` reads `data-foo-bar`, assignment writes the attribute, `delete`
+removes it, and `Object.keys(dataset)` / `for...in` list only the data keys.
+
+`getComputedStyle(el, pseudoElt)` answers from the **cascade** — the UA sheet,
+author rules, inheritance and the inline declarations — rather than echoing the
+inline block, so a stylesheet rule is visible. It exposes `getPropertyValue`,
+`getPropertyPriority` and named properties (`cs.width`, `cs.backgroundColor`,
+`cs["--accent"]`). Pass `"::before"`/`"::after"` to read generated content; any
+other pseudo-element answers empty values. Every read flushes a pending restyle,
+so a handle created early stays live after later mutations.
+
+`getBoundingClientRect()` carries the legacy `top` / `right` / `bottom` / `left`
+members next to `x` / `y` / `width` / `height`, and `document.title = …` writes
+the document's `<title>` (creating the element, and a `<head>`, when the page
+has none).
+
 Mutations mark the document dirty; the engine restyles + relayouts lazily (before
 the next read or frame). `inner = …`/`innerHTML = …` do **not** run scripts.
-Element events support capture and bubble phases, `stopPropagation`, `once`, and
-bubble up to `document`/`window`. The legacy `win.on(type, fn)` payload keeps its
-**string** `e.target` (`div#id.class`); the element `Event.target` is a handle
-whose descriptor matches the same string.
+Element events support capture and bubble phases, `stopPropagation`, `once`,
+`passive` and `signal` (an `AbortController`'s signal removes the listener), and
+bubble up to `document`/`window`. `dispatchEvent` dispatches the same event
+object and fills in `target`/`currentTarget`/`eventPhase`/`composedPath()`. The
+legacy `win.on(type, fn)` payload keeps its **string** `e.target`
+(`div#id.class`); the element `Event.target` is a handle whose descriptor
+matches the same string.
+
+`element.focus()` scrolls the element into view (pass `{ preventScroll: true }`
+to keep the page offset), and `document.hasFocus()` reports the window state
+toggled by `window.focus()` / `window.blur()`.
 
 ### Node lifetime