xbintsc 0.3.69 → 0.3.81

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

@@ -0,0 +1,119 @@
+/**
+ * End-to-end tests for `<video>` / `<audio>` support in the `gui` extension.
+ *
+ * These exercise the real decoding path (vendored FFmpeg + SDL audio) and the
+ * DOM media API. The fixtures live in `examples/resources`; when they are
+ * absent (a trim checkout) the suite is skipped rather than failing.
+ */
+import { existsSync, 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 { 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 { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const root = resolve(dirname(fileURLToPath(import.meta.url)), "..", "..");
+const resourceDir = join(root, "examples", "resources");
+const moviePath = join(resourceDir, "movie.mp4");
+const soundPath = join(resourceDir, "sounds.mp3");
+const exampleDir = join(root, "examples", "gui");
+/** A local path safe to embed in an HTML attribute (no percent-encoding: the
+ * media loader hands the string straight to FFmpeg). */
+function mediaSrc(absolutePath) {
+    return absolutePath.split("\\").join("/");
+}
+const resourcesAvailable = existsSync(moviePath) && existsSync(soundPath);
+describe.skipIf(!guiAvailable || !resourcesAvailable)("gui extension — media", () => {
+    const harness = createGuiHarness();
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("decodes video/audio and drives playback through the DOM API", () => {
+        const movie = mediaSrc(moviePath);
+        const sound = mediaSrc(soundPath);
+        const { value, stdout } = harness.compileAndRun("media", `
+      import { createWindow, run } from "gui";
+
+      const win = createWindow({ title: "media", width: 400, height: 300 });
+      win.on("ready", () => {
+        win.loadHTML(\`<html><body style="margin:0">
+          <video id="v" src="${movie}" autoplay muted></video>
+          <audio id="a" src="${sound}"></audio>
+        </body></html>\`);
+
+        const v: any = win.document.getElementById("v");
+        const a: any = win.document.getElementById("a");
+        let ticks = 0;
+
+        v.addEventListener("loadedmetadata", () => {
+          console.log("duration=" + (v.duration > 0) + ":" + (a.duration > 0));
+          console.log("dims=" + (v.videoWidth > 0) + ":" + (v.videoHeight > 0));
+          console.log("ready=" + v.readyState);
+          v.pause();
+          console.log("paused=" + v.paused);
+          v.currentTime = 2.5;
+          console.log("seek=" + (v.currentTime >= 2.4));
+          v.volume = 0.25;
+          console.log("volume=" + v.volume);
+          v.muted = true;
+          console.log("muted=" + v.muted);
+          v.play();
+          console.log("playing=" + (v.paused === false));
+        });
+        v.addEventListener("error", () => console.log("video-error"));
+        a.addEventListener("error", () => console.log("audio-error"));
+        v.addEventListener("timeupdate", () => {
+          ticks = ticks + 1;
+          if (ticks >= 2) {
+            console.log("advanced=" + (v.currentTime > 2.4));
+            win.close();
+          }
+        });
+      });
+
+      run();
+      `, { autocloseMs: 8000 });
+        expect(stdout).not.toContain("video-error");
+        expect(stdout).not.toContain("audio-error");
+        expect(value("duration")).toBe("true:true");
+        expect(value("dims")).toBe("true:true");
+        expect(value("paused")).toBe("true");
+        expect(value("seek")).toBe("true");
+        expect(value("volume")).toBe("0.25");
+        expect(value("muted")).toBe("true");
+        expect(value("playing")).toBe("true");
+        expect(value("advanced")).toBe("true");
+    });
+    it("runs the media example from the repository root", () => {
+        const workdir = mkdtempSync(join(tmpdir(), "xbintsc-media-"));
+        try {
+            writeFileSync(join(workdir, "media.html"), readFileSync(join(exampleDir, "media.html"), "utf8"));
+            writeFileSync(join(workdir, "media.ts"), readFileSync(join(exampleDir, "media.ts"), "utf8"));
+            const extensions = createDefaultRegistry().register(guiExtension);
+            const result = build(join(workdir, "media.ts"), {
+                emit: "exe",
+                outDir: join(workdir, "out"),
+                cacheDir: join(workdir, ".cache"),
+                extensions,
+            });
+            expect(result.diagnostics.filter((diagnostic) => diagnostic.category === "error")).toEqual([]);
+            // The example's `src` paths are relative to the working directory.
+            const executed = spawnSync(result.outputPath, [], {
+                cwd: root,
+                encoding: "utf8",
+                env: { ...process.env, XT_GUI_AUTOCLOSE_MS: "8000" },
+            });
+            expect(executed.status, executed.stderr).toBe(0);
+            expect(executed.stdout).toMatch(/video = \d+x\d+ duration=\d/);
+            expect(executed.stdout).toMatch(/audio duration=\d/);
+            expect(executed.stdout).toContain("play paused=false");
+            expect(executed.stdout).toContain("closed");
+        }
+        finally {
+            rmSync(workdir, { recursive: true, force: true });
+        }
+    });
+});
+//# sourceMappingURL=gui-media.test.js.map

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

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

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

@@ -41,6 +41,46 @@ describe.skipIf(!guiAvailable)("gui extension — paint", () => {
         expect(stdout).toContain(`image x=0.0 y=0.0 w=40.0 h=40.0 src=${src}`);
         expect(stdout).toContain(`image x=0.0 y=40.0 w=4.0 h=4.0 src=${src}`);
     });
+    it("sizes and paints an SVG (intrinsic and explicit)", () => {
+        // An SVG is a vector source: the image loader detects it and rasterises it
+        // at the drawn size instead of failing like `stb_image` alone would.
+        const src = harness.writeAsset("logo.svg", `<svg xmlns="http://www.w3.org/2000/svg" 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>`);
+        const { stdout, stderr } = harness.compileAndRun("svg", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #scaled { width: 64px; height: 48px; }
+      </style></head><body>
+        <img id="natural" src="${src}">
+        <img id="scaled" src="${src}">
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "svg", width: 400, height: 300 });
+      win.on("ready", () => {
+        const natural = win.getBoundingClientRect("#natural");
+        console.log("natural=" + natural.width + "x" + natural.height);
+        const scaled = win.getBoundingClientRect("#scaled");
+        console.log("scaled=" + scaled.width + "x" + scaled.height);
+        console.log(win.paintList().trim());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // Intrinsic size comes from the SVG's width/height; the explicit CSS size
+        // wins for the second image.
+        expect(stdout).toContain("natural=8x6");
+        expect(stdout).toContain("scaled=64x48");
+        expect(stdout).toContain(`image x=0.0 y=0.0 w=8.0 h=6.0 src=${src}`);
+        expect(stdout).toContain(`image x=0.0 y=6.0 w=64.0 h=48.0 src=${src}`);
+        // The SVG must actually rasterise, not just lay out.
+        expect(stderr).not.toContain("could not decode image");
+    });
     it("builds a display list of backgrounds and borders", () => {
         const { value, stdout } = harness.compileAndRun("paint", `
       import { createWindow, run } from "gui";

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

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

@@ -0,0 +1,7 @@
+/**
+ * End-to-end tests for the `gui` extension — CSS `transform` and
+ * `transform-origin`: parsing/computed style, the matrix the paint list carries,
+ * transformed geometry (`getBoundingClientRect`), hit testing, and animating a
+ * transform through a CSS transition.
+ */
+export {};

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

@@ -0,0 +1,198 @@
+/**
+ * End-to-end tests for the `gui` extension — CSS `transform` and
+ * `transform-origin`: parsing/computed style, the matrix the paint list carries,
+ * transformed geometry (`getBoundingClientRect`), hit testing, and animating a
+ * transform through a CSS transition.
+ */
+import { afterAll, beforeAll, describe, expect, it } from "vitest";
+import { createGuiHarness, guiAvailable } from "./gui-helpers.js";
+const harness = createGuiHarness();
+describe.skipIf(!guiAvailable)("gui extension — transform", () => {
+    beforeAll(() => harness.setup());
+    afterAll(() => harness.cleanup());
+    it("composes translate/rotate/scale into one matrix", () => {
+        const { stdout, value } = harness.compileAndRun("transform-matrix", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #moved {
+          position: absolute; left: 100px; top: 100px; width: 100px; height: 50px;
+          background-color: #ff0000;
+          transform-origin: 0 0;
+          transform: rotate(90deg) translate(10px, 0px);
+        }
+        #grew {
+          position: absolute; left: 100px; top: 200px; width: 40px; height: 20px;
+          background-color: #00ff00;
+          transform: scale(2, 3);
+        }
+      </style></head><body>
+        <div id="moved"></div><div id="grew"></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "transform", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("computed=" + win.computedStyle("#moved", "transform"));
+        console.log("origin=" + win.computedStyle("#moved", "transform-origin"));
+        console.log("default-origin=" + win.computedStyle("#grew", "transform-origin"));
+        const moved = win.getBoundingClientRect("#moved");
+        console.log("moved=" + moved.x.toFixed(1) + "," + moved.y.toFixed(1) + "," +
+                    moved.width.toFixed(1) + "," + moved.height.toFixed(1));
+        const grew = win.getBoundingClientRect("#grew");
+        console.log("grew=" + grew.x.toFixed(1) + "," + grew.y.toFixed(1) + "," +
+                    grew.width.toFixed(1) + "," + grew.height.toFixed(1));
+        console.log(win.paintList().trim());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("computed")).toBe("rotate(90deg) translate(10px, 0px)");
+        expect(value("origin")).toBe("0px 0px");
+        // `transform-origin` defaults to the centre of the border box.
+        expect(value("default-origin")).toBe("50% 50%");
+        /* rotate(90deg) about the top-left corner turns the 100x50 box into a
+         * 50x100 one; the local `translate(10px, 0)` moves it 10px down. */
+        expect(value("moved")).toBe("50.0,110.0,50.0,100.0");
+        // `scale(2, 3)` about the centre: 40x20 -> 80x60, centred on the same point.
+        expect(value("grew")).toBe("80.0,180.0,80.0,60.0");
+        // Paint keeps the untransformed layout geometry and carries the matrix.
+        expect(stdout).toContain("rect x=100.0 y=100.0 w=100.0 h=50.0 r=0.0 color=#ff0000ff transform=matrix(");
+        expect(stdout).toContain("transform=matrix(2,0,0,3,-120,-420)");
+    });
+    it("parses the 3d spellings and drops unsupported functions", () => {
+        const { stdout, value } = harness.compileAndRun("transform-parse", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #a {
+          position: absolute; left: 0px; top: 0px; width: 40px; height: 20px;
+          background-color: #ff0000; transform-origin: 0 0;
+          transform: translate3d(10px, 4px, 0) scale3d(2, 3, 1) rotateZ(0.5turn);
+        }
+        #b {
+          position: absolute; left: 0px; top: 100px; width: 40px; height: 20px;
+          background-color: #00ff00; transform: skewX(10deg);
+        }
+        #c {
+          position: absolute; left: 100px; top: 100px; width: 100px; height: 50px;
+          background-color: #0000ff; transform-origin: 0 0;
+          transform: translate(50%, 50%);
+        }
+        #d { transform-origin: top; }
+        #e { transform-origin: bottom right; }
+        #f { transform-origin: 10px; }
+      </style></head><body><div id="a"></div><div id="b"></div><div id="c"></div>
+      <div id="d"></div><div id="e"></div><div id="f"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "parse", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("a=" + win.computedStyle("#a", "transform"));
+        console.log("b=" + win.computedStyle("#b", "transform"));
+        console.log("c=" + win.computedStyle("#c", "transform"));
+        /* translate(50%, 50%) resolves against the box: 50px, 25px. */
+        console.log("c-rect=" + win.getBoundingClientRect("#c").x.toFixed(1) + "," +
+                    win.getBoundingClientRect("#c").y.toFixed(1));
+        /* A vertical keyword keeps x centred; bottom-right is right-bottom. */
+        console.log("d-origin=" + win.computedStyle("#d", "transform-origin"));
+        console.log("e-origin=" + win.computedStyle("#e", "transform-origin"));
+        console.log("f-origin=" + win.computedStyle("#f", "transform-origin"));
+        console.log(win.paintList().trim());
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        // `translate3d`/`scale3d` keep their x/y and drop `z`; `rotateZ` is `rotate`.
+        expect(value("a")).toBe("translate(10px, 4px) scale(2, 3) rotate(180deg)");
+        // An unsupported function invalidates the whole declaration.
+        expect(value("b")).toBe("none");
+        // Percentages stay unresolved in the computed value and resolve in layout.
+        expect(value("c")).toBe("translate(50%, 50%)");
+        expect(value("c-rect")).toBe("150.0,125.0");
+        expect(value("d-origin")).toBe("50% 0%");
+        expect(value("e-origin")).toBe("100% 100%");
+        expect(value("f-origin")).toBe("10px 50%");
+        expect(stdout).toContain("transform=matrix(1,0,0,1,50,25)");
+    });
+    it("hit tests through the transform", () => {
+        const { value } = harness.compileAndRun("transform-hit", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box {
+          position: absolute; left: 100px; top: 100px; width: 100px; height: 50px;
+          background-color: #ff0000;
+          transform-origin: 0 0;
+          transform: rotate(90deg);
+        }
+      </style></head><body><div id="box"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "hit", width: 400, height: 300 });
+      win.on("ready", () => {
+        /* The rotated box covers x 50..150, y 100..200 and no longer covers the
+         * area it occupied before the rotation (x 100..200). */
+        console.log("rotated=" + win.hitTest(60, 190));
+        console.log("vacated=" + win.hitTest(190, 110));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("rotated")).toBe("div#box");
+        expect(value("vacated")).toBe("");
+    });
+    it("animates `transform` through a CSS transition", () => {
+        const { value } = harness.compileAndRun("transform-transition", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #box {
+          position: absolute; left: 20px; top: 200px; width: 60px; height: 30px;
+          background-color: #0000ff;
+          transform: translateX(0px) rotate(0deg);
+          transition: transform 400ms linear;
+        }
+        #box:hover { transform: translateX(40px) rotate(90deg); }
+      </style></head><body><div id="box"></div></body></html>
+      \`;
+
+      const win = createWindow({ title: "transition", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("start=" + win.computedStyle("#box", "transform"));
+        win.sendEvent("mousemove", { x: 50, y: 215 });
+        win.advance(100);
+        console.log("q1=" + win.computedStyle("#box", "transform"));
+        win.advance(200);
+        console.log("q3=" + win.computedStyle("#box", "transform"));
+        win.advance(200);
+        console.log("end=" + win.computedStyle("#box", "transform"));
+        const end = win.getBoundingClientRect("#box");
+        console.log("end-rect=" + end.x.toFixed(1) + "," + end.y.toFixed(1) + "," +
+                    end.width.toFixed(1) + "," + end.height.toFixed(1));
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        expect(value("start")).toBe("translateX(0px) rotate(0deg)");
+        // 100/400 and 300/400 of the way between the two lists, linearly.
+        expect(value("q1")).toBe("translateX(10px) rotate(22.5deg)");
+        expect(value("q3")).toBe("translateX(30px) rotate(67.5deg)");
+        expect(value("end")).toBe("translateX(40px) rotate(90deg)");
+        // Moved 40px right and rotated a quarter turn about its centre.
+        expect(value("end-rect")).toBe("75.0,185.0,30.0,60.0");
+    });
+});
+//# sourceMappingURL=gui-transform.test.js.map

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

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

package/doc/ai/cli.md

@@ -46,6 +46,11 @@ Parsing details that occasionally surprise:
   `run`, or is a positional for the other commands.
 - `-o` consumes the next argument unconditionally; the other value flags leave
   the value unset when the next argument starts with `-`.
+- `-o`/`output` may name a directory that does not exist yet: the driver creates
+  the parent directories of the output path. (`--out` likewise creates its
+  directory.) Without that, an explicit path such as `-o dist/app.exe` where
+  `dist/` was missing used to fail inside the linker, since clang — not xbintsc —
+  is what writes the executable.
 
 ## Project config
 

package/doc/ai/extensions.md

@@ -67,10 +67,27 @@ import { createWindow, run } from "gui";
 
 It is a self-contained GPU-accelerated renderer (own HTML parser, CSS cascade,
 layout and compositor) — not a system WebView. It ships as a per-platform
-prebuilt `gui.a`/`gui.lib` because it is C++. If that archive is missing for
+prebuilt `gui.a`/`gui.lib` because it is C++. `<img>`, `<video>` and `<audio>`
+really decode: a minimal static FFmpeg is bundled into the archive, and the DOM
+media API (`play`/`pause`/`currentTime`/`volume`/…) plus the
+`loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error` events let a
+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
+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
+`examples/gui/pelican-svg`). If that archive is missing for
 your platform, the build fails with an actionable message; design and roadmap
-live in [../gui.md](../gui.md), and the scripting surface in
-[../gui-scripts.md](../gui-scripts.md).
+live in [../gui.md](../gui.md) (overview; the engine is documented by function
+under [`doc/gui/`](../gui/)), and the scripting surface in
+[../gui-scripts.md](../gui-scripts.md). Media playback is the one part that
+Windows does not get: the Windows `gui.a` is built without FFmpeg and media
+slots are inert. See [../gui/canvas.md](../gui/canvas.md) for the canvas API and
+its limits.
 
 ## Third-party npm packages
 

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

@@ -64,9 +64,20 @@ import { createWindow, run } from "gui";
 ```
 
 它是自带渲染引擎的 GPU 加速实现（自己的 HTML 解析器、CSS 级联、布局与合成器），不是
-系统 WebView。因为主体是 C++，它以各平台预编译的 `gui.a`/`gui.lib` 形式分发。如果该
-平台的归档不存在，构建会以明确的提示失败；设计与路线图见 [../../zh-CN/gui.md](../../zh-CN/gui.md)，
-脚本接口见 [../../zh-CN/gui-scripts.md](../../zh-CN/gui-scripts.md)。
+系统 WebView。`<img>`、`<video>`、`<audio>` 都是真正解码：归档内打入一个最小化的
+静态 FFmpeg，DOM 媒体 API（`play`/`pause`/`currentTime`/`volume`/…）与
+`loadedmetadata`/`play`/`pause`/`ended`/`timeupdate`/`error` 事件可让程序驱动播放。
+没有内置控件——用元素和 CSS 自绘控件（见 `examples/gui/media.ts`）；视频帧与音频 PCM
+都在主线程解码。也支持 `<canvas>`：`getContext("2d")` 返回的上下文，其填充、路径、
+文本与 `drawImage` 由自研 CPU 光栅器处理，元素句柄还暴露 `width`/`height`。CSS
+`transform`/`transform-origin` 作为绘制期效果可用，因此一个盒子（以及其中的文本、
+图像与子元素）可以被平移、缩放与旋转而不触发任何重排——可以用
+`requestAnimationFrame` 逐帧驱动，或写成 `transition: transform`（见
+`examples/gui/pelican-svg`）。因为主体是 C++，它以各平台预编译的 `gui.a`/`gui.lib` 形式分发。如果该
+平台的归档不存在，构建会以明确的提示失败；设计与路线图见 [../../zh-CN/gui.md](../../zh-CN/gui.md)（总览；引擎按功能拆分在 [`doc/zh-CN/gui/`](../../zh-CN/gui/) 下），
+脚本接口见 [../../zh-CN/gui-scripts.md](../../zh-CN/gui-scripts.md)。媒体播放是
+Windows 唯一不支持的：Windows 的 `gui.a` 不构建 FFmpeg，媒体槽位为空操作。Canvas API
+及其限制见 [../../zh-CN/gui/canvas.md](../../zh-CN/gui/canvas.md)。
 
 ## 第三方 npm 包
 

package/doc/gui/animation.md

@@ -0,0 +1,97 @@
+# Animation: frames and transitions
+
+> Part of the [GUI extension](../gui.md); the engine overview, locked
+> decisions and roadmap live there.
+
+## Animation frames (M10)
+
+`requestAnimationFrame` runs a callback once on the next frame; the callback
+receives the frame timestamp (ms) and may mutate the DOM, which is restyled and
+repainted in the same frame. Re-queue from inside the callback to animate:
+
+```ts
+const win = createWindow({ title: "anim", width: 320, height: 240 });
+let n = 0;
+const tick = (t: number) => {
+  win.document.getElementById("label").textContent = String(n++);
+  if (n < 120) win.requestAnimationFrame(tick); // id returned; cancelAnimationFrame(id) drops it
+};
+win.on("ready", () => win.requestAnimationFrame(tick));
+win.loadHTML("<div id='label'>0</div>");
+run();
+```
+
+## CSS transitions (M6b)
+
+`XtDocument` runs CSS transitions between the *target* computed styles (the
+cascade for the current `:hover`/`:focus` state) and the *displayed* styles used
+for layout and paint. When a state change alters a transitioned property, a
+running transition is recorded and re-applied every frame until it finishes;
+the engine advances the clock with real frame deltas (`XtDocument::advance`),
+and `win.advance(ms)` lets tests step it deterministically.
+
+- Supported properties: `background-color`, `color`, `border-color`,
+  `border-radius` and `transform`; `transition: all` covers them. A
+  layout-affecting property (width, position, …) is still not animated — that
+  would reflow every frame — but `transform` is paint-time, so animating it costs
+  one matrix per animated box per frame ([Layout](./layout.md#transforms-m15)).
+- Both the `transition` shorthand and the `transition-property` / `-duration` /
+  `-delay` / `-timing-function` longhands are parsed; time values accept `s` and
+  `ms`; timing functions are `linear`, `ease`, `ease-in`, `ease-out` and
+  `ease-in-out` (`ease` is a smoothstep approximation).
+- Retargeting mid-flight starts a new transition from the current interpolated
+  value, so reversing a hover animates smoothly from wherever it was.
+- `computedStyle()` reports the displayed (interpolated) value, so transitions
+  are directly observable in tests.
+
+`transform` lists interpolate **element-wise** (`document.cpp`,
+`xt_transform_interpolate`), which is what makes the common pair
+`translateY(-4px) rotate(-0.35deg)` <-> `none` glide instead of jumping: the
+missing side is filled with identity ops of the same kind. Two lists whose shapes
+or units do not line up (`rotate(10deg)` vs `rotate(10rad)`, or a different number
+of functions) are not interpolated at all — the transition snaps to the target,
+which is CSS's discrete fallback rather than a wrong-looking sweep.
+
+## CSS transforms (M15)
+
+`transform` and `transform-origin` are supported as *paint-time* effects
+(`translate`/`translate3d`/`translateX`/`translateY`,
+`scale`/`scale3d`/`scaleX`/`scaleY`, `rotate`/`rotateZ`, `matrix`; the `3d`
+spellings' `z` argument is parsed and dropped, since the engine is 2D;
+`deg`/`rad`/`grad`/`turn`; `%`, `px`, `em`, `rem`, `vw`, `vh`). Layout
+is not affected: geometry stays where flow put it, and only the painted result
+moves, so a size, a scroll position or a sibling's position never depends on an
+animation frame. See [Layout](./layout.md#transforms-m15) for the composition
+rules and [Rendering](./rendering.md) for how it reaches the GPU.
+
+Two ways to drive one:
+
+```ts
+// 1. Per frame — a pose from the frame clock. Nothing reflows: the string is
+//    parsed into matrices and the display list picks them up in the same frame.
+const tick = (t: number): void => {
+  const s = t / 1000;
+  art.style.setProperty(
+    "transform",
+    "translateY(" + (Math.sin(s * 2.4) * 5).toFixed(2) + "px) " +
+      "rotate(" + (Math.sin(s * 1.15) * 1.1).toFixed(2) + "deg)",
+  );
+  win.requestAnimationFrame(tick);
+};
+```
+
+```css
+/* 2. From a state change — a transitioned transform, like any other property. */
+#caption {
+  transform-origin: 50% 100%;
+  transition: transform 260ms ease-out;
+}
+#caption:hover { transform: translateY(-2px) scale(1.03); }
+```
+
+Both are exercised by `examples/gui/pelican-svg` (per-frame sway plus a
+hover transition on the caption) and pinned by
+`tests/e2e/gui-transform.test.ts`.
+
+Still to do for animation: `@keyframes` animations and `cubic-bezier(...)`.
+