xbintsc 0.5.42 → 0.5.43

package/dist/src/cli/help.d.ts

@@ -4,4 +4,4 @@
  * It lives apart from the command dispatch so the executable entry point stays
  * under the repository's per-file line budget; the text is data, not logic.
  */
-export declare const HELP = "xbintsc 0.5.42 - TypeScript binary compiler\n\nUsage:\n  xbintsc build <file.ts> [options]   Compile to a native binary\n  xbintsc run <file.ts> [-- args]     Compile and execute\n  xbintsc check <file.ts>             Parse, bind and check without linking\n  xbintsc watch <file.ts> [options]   Rebuild whenever the source tree changes\n  xbintsc emit <file.ts>              Print LLVM IR\n  xbintsc doctor                      Report the resolved toolchain\n  xbintsc version                     Print the version\n  xbintsc help                        Show this message\n\nOptions:\n  -o, --output <path>   Output path\n      --out <dir>       Output directory (default: build/)\n      --emit <kind>     exe | obj | ir (default: exe)\n  -O0..-O3              Optimization level (default: -O2)\n      --ext <names>     Comma separated extensions (e.g. node,gui,media)\n      --ext-native <m>  Register a C++/Rust extension from a JSON manifest\n                        (comma separated for several)\n      --config <path>   Use a project config (default: auto-detect\n                        xbintsc.config.json)\n      --no-config       Do not read any project config\n      --icon <path>     Embed an application icon (PNG/ICO/ICNS)\n      --bundle          macOS: also produce a .app bundle\n      --app-name <name> Bundle / display name\n      --app-id <id>     macOS bundle identifier (e.g. com.example.demo)\n      --force           Ignore the incremental cache\n      --verbose         Print progress information\n      --time            Print per-phase build timings\n      --debug           Emit debug info (DWARF/CodeView) and keep frame pointers\n      --check           Run the semantic checker (default)\n      --no-check        Skip the semantic checker; only erase type syntax\n      --lto             Compile program and runtime to LTO bitcode; link with lld\n      --pgo-generate [dir]  Build an instrumented binary writing profiles to dir\n      --pgo-use [dir]   Build with the profiles collected from --pgo-generate\n      --json            Print diagnostics as a JSON array on stdout\n      --no-hints        Do not append the \"hint: \u2026 see <doc>\" line to failures\n\nxbintsc compiles a subset of TypeScript to a native binary. Types are erased;\nonly inference-free facts (names, redeclarations, call arity) are checked.\nNode built-ins need --ext node, packages in node_modules are bundled at build\ntime, and clang 16+ is required to link.\n\nInstalled as a project dependency (npm):\n  npx xbintsc doctor\n  npx xbintsc build <entry.ts> --out build\n  npx xbintsc run <entry.ts>\nThe first build compiles the C runtime; later builds reuse the cache.\n\nDocs: doc/ai/README.md (task guide) - doc/ai/language-support.md (subset) -\ndoc/ai/troubleshooting.md (failures) - llms.txt (index of every document).\nWhen installed from npm, these live under node_modules/xbintsc/doc/ and\nnode_modules/xbintsc/doc/npm-package.md is the project guide.\n";
+export declare const HELP = "xbintsc 0.5.43 - TypeScript binary compiler\n\nUsage:\n  xbintsc build <file.ts> [options]   Compile to a native binary\n  xbintsc run <file.ts> [-- args]     Compile and execute\n  xbintsc check <file.ts>             Parse, bind and check without linking\n  xbintsc watch <file.ts> [options]   Rebuild whenever the source tree changes\n  xbintsc emit <file.ts>              Print LLVM IR\n  xbintsc doctor                      Report the resolved toolchain\n  xbintsc version                     Print the version\n  xbintsc help                        Show this message\n\nOptions:\n  -o, --output <path>   Output path\n      --out <dir>       Output directory (default: build/)\n      --emit <kind>     exe | obj | ir (default: exe)\n  -O0..-O3              Optimization level (default: -O2)\n      --ext <names>     Comma separated extensions (e.g. node,gui,media)\n      --ext-native <m>  Register a C++/Rust extension from a JSON manifest\n                        (comma separated for several)\n      --config <path>   Use a project config (default: auto-detect\n                        xbintsc.config.json)\n      --no-config       Do not read any project config\n      --icon <path>     Embed an application icon (PNG/ICO/ICNS)\n      --bundle          macOS: also produce a .app bundle\n      --app-name <name> Bundle / display name\n      --app-id <id>     macOS bundle identifier (e.g. com.example.demo)\n      --force           Ignore the incremental cache\n      --verbose         Print progress information\n      --time            Print per-phase build timings\n      --debug           Emit debug info (DWARF/CodeView) and keep frame pointers\n      --check           Run the semantic checker (default)\n      --no-check        Skip the semantic checker; only erase type syntax\n      --lto             Compile program and runtime to LTO bitcode; link with lld\n      --pgo-generate [dir]  Build an instrumented binary writing profiles to dir\n      --pgo-use [dir]   Build with the profiles collected from --pgo-generate\n      --json            Print diagnostics as a JSON array on stdout\n      --no-hints        Do not append the \"hint: \u2026 see <doc>\" line to failures\n\nxbintsc compiles a subset of TypeScript to a native binary. Types are erased;\nonly inference-free facts (names, redeclarations, call arity) are checked.\nNode built-ins need --ext node, packages in node_modules are bundled at build\ntime, and clang 16+ is required to link.\n\nInstalled as a project dependency (npm):\n  npx xbintsc doctor\n  npx xbintsc build <entry.ts> --out build\n  npx xbintsc run <entry.ts>\nThe first build compiles the C runtime; later builds reuse the cache.\n\nDocs: doc/ai/README.md (task guide) - doc/ai/language-support.md (subset) -\ndoc/ai/troubleshooting.md (failures) - llms.txt (index of every document).\nWhen installed from npm, these live under node_modules/xbintsc/doc/ and\nnode_modules/xbintsc/doc/npm-package.md is the project guide.\n";

package/dist/src/driver/version.d.ts

@@ -9,4 +9,4 @@
  * `main`/`master` only (see `.githooks/pre-commit`), so feature branches never
  * change this line and merging two of them cannot conflict here.
  */
-export declare const COMPILER_VERSION = "0.5.42";
+export declare const COMPILER_VERSION = "0.5.43";

package/dist/src/driver/version.js

@@ -9,5 +9,5 @@
  * `main`/`master` only (see `.githooks/pre-commit`), so feature branches never
  * change this line and merging two of them cannot conflict here.
  */
-export const COMPILER_VERSION = "0.5.42";
+export const COMPILER_VERSION = "0.5.43";
 //# sourceMappingURL=version.js.map

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

@@ -130,13 +130,56 @@ describe.skipIf(!guiAvailable)("gui extension — effects", () => {
         const list = stdout.slice(stdout.indexOf("list-start"), stdout.indexOf("list-end"));
         expect(value("image")).toContain("radial-gradient()");
         expect(value("image")).toContain("linear-gradient()");
-        // Both layers are painted: the red radial core and its green outer ring
-        // (the linear blue layer is underneath them).
+        // The radial layer is one rasterised gradient carrying its stops; the linear
+        // layer is still painted as solid bands.
+        expect(list).toContain("gradient=radial");
         expect(list).toContain("#ff0000ff");
         expect(list).toContain("#00ff00ff");
         expect(list).toMatch(/#0000[0-9a-f]{2}ff/);
-        // Radial bands plus the linear strips.
-        expect(Number(value("count"))).toBeGreaterThan(30);
+        // Eighteen linear strips plus the background colour: the gradient image is
+        // not a stack of rectangles.
+        expect(Number(value("count"))).toBe(19);
+    });
+    it("rasterises a translucent radial vignette as one gradient image", () => {
+        const { value, stdout } = harness.compileAndRun("vignette", `
+      import { createWindow, run } from "gui";
+
+      const HTML = \`
+      <html><head><style>
+        body { margin: 0; }
+        #scene { position: relative; width: 200px; height: 100px; background: #3366cc; }
+        #dim {
+          position: absolute; inset: -5%; z-index: 2; pointer-events: none;
+          background: radial-gradient(ellipse at center,
+            transparent 45%, rgba(0, 0, 0, 0.46) 76%, rgba(0, 0, 0, 0.88) 100%);
+        }
+      </style></head><body>
+        <div id="scene"><div id="dim"></div></div>
+      </body></html>
+      \`;
+
+      const win = createWindow({ title: "vignette", width: 400, height: 300 });
+      win.on("ready", () => {
+        console.log("image=" + win.computedStyle("#dim", "background-image"));
+        console.log("count=" + win.paintCount());
+        console.log("list-start");
+        console.log(win.paintList());
+        console.log("list-end");
+        win.close();
+      });
+      win.loadHTML(HTML);
+      run();
+      `);
+        const list = stdout.slice(stdout.indexOf("list-start"), stdout.indexOf("list-end"));
+        expect(value("image")).toContain("radial-gradient()");
+        // A single op whose stops keep the alpha ramp. Painting this as nested
+        // translucent ellipses composited the alpha once per band and turned the
+        // whole scene solid black.
+        expect((list.match(/gradient=radial/g) ?? []).length).toBe(1);
+        expect(list).toContain("#00000000@0.4500");
+        expect(list).toContain("#000000e0@1.0000");
+        // Only the scene background is a rectangle; the vignette is not bands.
+        expect(value("count")).toBe("1");
     });
     it("tiles repeating gradients across the whole box", () => {
         const { value, stdout } = harness.compileAndRun("repeating-gradient", `
@@ -231,6 +274,7 @@ describe.skipIf(!guiAvailable)("gui extension — effects", () => {
       `);
         const list = stdout.slice(stdout.indexOf("list-start"), stdout.indexOf("list-end"));
         expect(value("image")).toBe("repeating-radial-gradient()");
+        expect(list).toContain("gradient=repeating-radial");
         expect(list).toContain("#ff0000ff");
         expect(list).toContain("#0000ffff");
     });

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

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

package/doc/gui/api.md

@@ -187,7 +187,7 @@ win.queryCount(selector)               // number of matching elements
 win.getBoundingClientRect(selector)    // { x, y, width, height } (border box, transformed)
 win.documentTree()                     // serialized DOM (debugging)
 win.layoutTree()                       // serialized layout boxes (debugging)
-win.paintCount()                       // number of shapes in the display list
+win.paintCount()                       // number of filled rectangles 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

package/doc/gui/known-issues.md

@@ -72,9 +72,11 @@
   silhouettes; at most two nested `clip-path` shapes are intersected (deeper
   nesting keeps the outer two); and images/canvases are not colour-filtered
   except for the brightness/opacity tint the image shader can carry. Canvas
-  textures are sampled nearest-neighbour. Background gradients remain solid
-  bands (18 for linear, 32 concentric ellipses for radial; 64 for repeating
-  gradients), so a soft gradient may show slight banding.
+  textures are sampled nearest-neighbour. A background linear gradient remains
+  solid bands (18 strips, 64 while repeating), so a large soft ramp may show
+  slight banding; a radial gradient is rasterised per pixel into a texture
+  (capped at 1024 px per edge, then stretched, so a hard stop in a very large
+  box comes out slightly soft).
 - **SVG is NanoSVG's subset.** SVG *files* (`<img src="logo.svg">`) and inline
   `<svg>` trees share the vendored NanoSVG parser/rasteriser
   (`runtime/ext_gui/svg.cpp`, `inline_svg.cpp`), which renders

package/doc/gui/rendering.md

@@ -87,12 +87,16 @@ topmost), and both gradient kinds are supported:
   length (`px`/`em`/…) offsets, the `color <start> <end>` shorthand and
   multi-stop colours work (the band walk is axis-aligned, so an oblique angle
   uses the nearest axis);
-- a **radial** gradient is 32 concentric ellipses (64 when repeating). Each is a
-  unit-radius rounded rectangle mapped through the shape pipeline's transform
-  slot, so a circle or ellipse keeps the distance-field antialiasing.
-  Shape/size keywords (`circle`/`ellipse`, `closest-side`/`farthest-side`/
-  `closest-corner`/`farthest-corner`, explicit radii) and `at <position>` are
-  parsed.
+- a **radial** gradient is resolved per pixel in `renderer_gradient.cpp` into one
+  RGBA texture that is drawn as a single image quad (`PaintGradient`). Nesting the
+  bands instead would composite their alpha once per band — since every band
+  covers the whole interior — so a vignette whose stops fade to `transparent`
+  painted an opaque disc over the scene. Shape/size keywords
+  (`circle`/`ellipse`, `closest-side`/`farthest-side`/`closest-corner`/
+  `farthest-corner`, explicit radii) and `at <position>` are parsed; a
+  keyword-sized ellipse keeps the box's aspect ratio and is scaled until it meets
+  the side or corner, as CSS does. Stops interpolate in premultiplied alpha, and
+  the last stop extends past the ending shape over the rest of the box.
 
 `repeating-linear-gradient()` and `repeating-radial-gradient()` tile the stop
 pattern from 0 to the last stop's offset across the whole box; the stop list is
@@ -101,8 +105,8 @@ gradient whose last stop is below 100% holds that colour for the rest of the box
 as in CSS.
 
 The background colour sits under every layer. Gradients are partially
-transparent if their stops are, and the band approximation can show banding and
-alpha stacking on a very translucent multi-stop gradient.
+transparent if their stops are; a radial gradient is exact per pixel, while a
+linear one still samples 18 bands and can show banding on a large soft ramp.
 
 **Generated content** needs no new display-list kind: `::before`/`::after` are
 ordinary layout boxes owned by the per-restyle arena in `style.cpp`, so their

package/doc/gui.md

@@ -336,8 +336,9 @@ engine were Rust.
     - Generated content: `::before`/`::after` selectors, inherited pseudo styles,
       `content` strings/escapes/`attr()`, and synthetic layout boxes that never
       leak into DOM traversal.
-    - Multi-layer `background-image` with linear and radial gradients, painted
-      bottom-up as solid bands (18 strips / 32 concentric ellipses).
+    - Multi-layer `background-image` with linear gradients painted bottom-up as
+      solid bands (18 strips) and radial gradients rasterised per pixel into one
+      image texture (`renderer_gradient.cpp`).
     - `text-shadow` as shadow text runs, including a nine-tap blur approximate.
     - `clip-path` polygons (`inset`/`circle`/`ellipse`/`polygon`) resolved to
       device space, ear-clipped and intersected with shape geometry in
@@ -503,8 +504,10 @@ engine were Rust.
   pseudo styles into a per-restyle arena, resolves `content`, and layout inserts
   their boxes before/after the DOM children. `gradient_values.cpp` models a
   background layer list (linear/radial, shape/size/position/stops),
-  `paint_background.cpp` paints it, `paint_effects.cpp` applies filter colour
-  functions plus nine-tap blur/drop-shadow and emits `text-shadow` runs, and
+  `paint_background.cpp` resolves and paints it (radial layers become one
+  `PaintGradient`, which `renderer_gradient.cpp` rasterises into a texture),
+  `paint_effects.cpp` applies filter colour functions plus nine-tap
+  blur/drop-shadow and emits `text-shadow` runs, and
   `paint_clip.cpp`/`renderer_clip.cpp` clip geometry against triangulated
   `clip-path` polygons. E2E: `tests/e2e/gui-effects.test.ts`.
 - **M20** ✅ rendering performance. `@media` is evaluated once per rule per

package/doc/zh-CN/gui/api.md

@@ -175,7 +175,7 @@ win.queryCount(selector)               // 匹配元素的数量
 win.getBoundingClientRect(selector)    // { x, y, width, height }（边框盒，含变换）
 win.documentTree()                     // 序列化的 DOM（调试用）
 win.layoutTree()                       // 序列化的布局盒（调试用）
-win.paintCount()                       // 显示列表中图形的数量
+win.paintCount()                       // 显示列表中填充矩形的数量
 win.paintList()                        // 序列化的显示列表（调试用）
 win.inlineSvg(selector)                // 序列化的内联 <svg>：{ markup, width, height, shapes }
 win.measureText(text, fontSize?, family?)  // 整形后的推进宽度（像素）

package/doc/zh-CN/gui/known-issues.md

@@ -51,8 +51,9 @@
   `filter: blur()` 是按图形做九次偏移的近似，而不是真正的组模糊，重叠的子元素会加深；
   `drop-shadow` 用盒子轮廓近似；最多只交叉两层嵌套 `clip-path`（更深时保留外侧两层）；
   图像/画布除图像着色器能携带的亮度与透明度染色外不做颜色滤镜。Canvas 纹理使用
-  最近邻采样。背景渐变仍是纯色带（线性 18 条、径向 32 个同心椭圆；重复渐变
-  64 条），柔和渐变可能出现轻微条带。
+  最近邻采样。背景线性渐变仍是纯色带（18 条，重复渐变 64 条），较大的柔和渐变
+  可能出现轻微条带；径向渐变则逐像素光栅化成纹理（每边最大 1024 px，超出后拉伸，
+  因此超大盒子上的硬色标会略微变软）。
 - **SVG 是 NanoSVG 的子集。** SVG *文件*（`<img src="logo.svg">`）与内联
   `<svg>` 子树共用 vendored 的 NanoSVG 解析/光栅化器（`runtime/ext_gui/svg.cpp`、
   `inline_svg.cpp`），它会渲染 `path`/`rect`/`circle`/`ellipse`/`line`/

package/doc/zh-CN/gui/rendering.md

@@ -72,18 +72,21 @@
   `to <side>`、`deg`/`grad`/`rad`/`turn`、百分比或长度（`px`/`em`/…）偏移、
   `color <start> <end>` 简写与多色标（色带沿最近轴行走，因此斜角会退化为
   最近的轴向）；
-- **径向**渐变是 32 个同心椭圆（重复渐变 64 个）。每个都是单位半径的圆角矩形，
-  经图形管线的 transform 槽映射，因此圆/椭圆仍保留距离场抗锯齿。支持形状/尺寸
-  关键字（`circle`/`ellipse`、`closest-side`/`farthest-side`/`closest-corner`/
-  `farthest-corner`、显式半径）与 `at <position>`。
+- **径向**渐变由 `renderer_gradient.cpp` 逐像素解算成一张 RGBA 纹理，作为单个
+  图像四边形绘制（`PaintGradient`）。若沿用嵌套色带，由于每条色带都会覆盖整个
+  内部区域，alpha 会叠加多次——淡出到 `transparent` 的暗角会把整个场景涂成实心
+  黑盘。支持形状/尺寸关键字（`circle`/`ellipse`、`closest-side`/`farthest-side`/
+  `closest-corner`/`farthest-corner`、显式半径）与 `at <position>`；关键字尺寸
+  的椭圆保持盒子的宽高比并缩放到刚好接触对应边或角，与 CSS 一致。色标在预乘
+  alpha 空间中插值，最后一个色标会延伸覆盖结束形状之外的剩余盒子。
 
 `repeating-linear-gradient()` 与 `repeating-radial-gradient()` 会在整个盒子上
 从 0 平铺到最后一个色标的偏移量；色标列表不会被强制结束在 100%，因此
 `red 0%, blue 10%` 每 10% 重复一次。普通渐变的最后一个色标若小于 100%，则剩余
 区域保持该颜色，与 CSS 一致。
 
-背景色位于所有层下方。若渐变色标带透明度，渐变也会半透明；色带近似可能产生
-轻微条带，非常透明的多色标渐变会出现 alpha 叠加。
+背景色位于所有层下方。若渐变色标带透明度，渐变也会半透明；径向渐变逐像素精确，
+线性渐变仍采样 18 条色带，较大的柔和渐变可能出现条带。
 
 **生成内容**不需要新的显示列表类型：`::before`/`::after` 是 `style.cpp` 中
 每次重算样式时重建的普通布局盒，因此其背景、边框、文本与 transform 都走同一条

package/doc/zh-CN/gui.md

@@ -262,8 +262,8 @@ FFmpeg `7.1`（供可选的 `media` 归档使用；可用 `SDL3_TAG` /
       特性）；`matchMedia()` 使用同一个求值器。
     - 生成内容：`::before`/`::after` 选择器、继承的伪样式、`content` 字符串/
       转义/`attr()`，以及不会泄漏到 DOM 遍历的合成布局盒。
-    - 多层 `background-image` 的线性与径向渐变，自下而上按纯色带绘制
-      （线性 18 条、径向 32 个同心椭圆）。
+    - 多层 `background-image`：线性渐变自下而上按纯色带绘制（18 条），径向渐变
+      逐像素光栅化成一张图像纹理（`renderer_gradient.cpp`）。
     - `text-shadow` 作为阴影文本 run，并带九次采样模糊近似。
     - `clip-path` 多边形（`inset`/`circle`/`ellipse`/`polygon`）解析到设备空间，
       用耳切法三角化，并在 `renderer_clip.cpp` 中与图形几何求交——不需要模板/
@@ -408,9 +408,10 @@ FFmpeg `7.1`（供可选的 `media` 归档使用；可用 `SDL3_TAG` /
   识别 `::before`/`::after`。`style.cpp` 把伪样式算进每次重算样式时重建的
   arena、解析 `content`，布局在真实子元素前后插入它们的盒子。
   `gradient_values.cpp` 建模背景层列表（线性/径向、形状/尺寸/位置/色标），
-  `paint_background.cpp` 绘制它，`paint_effects.cpp` 应用滤镜颜色函数与九次
-  采样模糊/投影并生成 `text-shadow` run，`paint_clip.cpp`/`renderer_clip.cpp`
-  对三角化的 `clip-path` 多边形裁剪几何。e2e 见
+  `paint_background.cpp` 解算并绘制它（径向层变成一个 `PaintGradient`，由
+  `renderer_gradient.cpp` 光栅化成纹理），`paint_effects.cpp` 应用滤镜颜色函数
+  与九次采样模糊/投影并生成 `text-shadow` run，`paint_clip.cpp`/
+  `renderer_clip.cpp` 对三角化的 `clip-path` 多边形裁剪几何。e2e 见
   `tests/e2e/gui-effects.test.ts`。
 - **M20** ✅ 渲染性能。`@media` 每次重算样式时每条规则只求值一次；没有
   `::before`/`::after` 的样式表完全跳过生成内容；只有样式表包含

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xbintsc",
-  "version": "0.5.42",
+  "version": "0.5.43",
   "description": "xbintsc - a TypeScript binary compiler (TypeScript -> LLVM IR -> native binary)",
   "type": "module",
   "license": "MIT",
@@ -72,12 +72,12 @@
     "vitest": "^2.1.8"
   },
   "optionalDependencies": {
-    "@xbintsc/linux-x64": "0.5.42",
-    "@xbintsc/linux-arm64": "0.5.42",
-    "@xbintsc/darwin-x64": "0.5.42",
-    "@xbintsc/darwin-arm64": "0.5.42",
-    "@xbintsc/win32-x64": "0.5.42",
-    "@xbintsc/win32-arm64": "0.5.42"
+    "@xbintsc/linux-x64": "0.5.43",
+    "@xbintsc/linux-arm64": "0.5.43",
+    "@xbintsc/darwin-x64": "0.5.43",
+    "@xbintsc/darwin-arm64": "0.5.43",
+    "@xbintsc/win32-x64": "0.5.43",
+    "@xbintsc/win32-arm64": "0.5.43"
   },
   "engines": {
     "node": ">=22"

package/runtime/ext_gui/paint.cpp

@@ -380,7 +380,22 @@ std::string DisplayList::dump() const {
     } else {
       const PaintImage &image = images[op.index];
       suffix = transformSuffix(image.transform);
-      if (image.media_id != 0) {
+      if (image.gradient != nullptr) {
+        const PaintGradient &gradient = *image.gradient;
+        std::snprintf(buffer, sizeof(buffer),
+                      "image x=%.1f y=%.1f w=%.1f h=%.1f gradient=%s center=%.1f,%.1f "
+                      "radius=%.1f,%.1f stops=",
+                      image.x, image.y, image.width, image.height,
+                      gradient.repeating ? "repeating-radial" : "radial", gradient.center_x,
+                      gradient.center_y, gradient.radius_x, gradient.radius_y);
+        text += prefix + buffer;
+        for (size_t stop = 0; stop < gradient.stops.size(); stop++) {
+          std::snprintf(buffer, sizeof(buffer), "%s%s@%.4f", stop == 0 ? "" : ",",
+                        formatColor(gradient.stops[stop].color).c_str(),
+                        gradient.stops[stop].offset);
+          text += buffer;
+        }
+      } else if (image.media_id != 0) {
         std::snprintf(buffer, sizeof(buffer), "image x=%.1f y=%.1f w=%.1f h=%.1f media=%llu",
                       image.x, image.y, image.width, image.height,
                       (unsigned long long)image.media_id);

package/runtime/ext_gui/paint.h

@@ -14,6 +14,7 @@
 #define XT_GUI_PAINT_H
 
 #include <cstdint>
+#include <memory>
 #include <string>
 #include <vector>
 
@@ -24,6 +25,35 @@
 
 namespace xtgui {
 
+/** One resolved colour stop of a gradient. `offset` is a fraction of the
+ * gradient line and non-decreasing, as in CSS. */
+struct GradientStop {
+  float offset = 0.0f;
+  Color color;
+};
+
+/** A radial `background-image` layer resolved by the paint pass: the renderer
+ * rasterises it into one RGBA texture and draws that as a single image quad.
+ *
+ * Nesting translucent bands instead composites every band's alpha once per band
+ * — each band covers the whole interior — so a vignette whose stops fade to
+ * `transparent` turns into an opaque disc that hides the scene behind it.
+ * Resolving the ramp per pixel composites it exactly once. */
+struct PaintGradient {
+  std::vector<GradientStop> stops;
+  /** Centre in box-local logical pixels; the drawn quad spans the whole box. */
+  float center_x = 0.0f;
+  float center_y = 0.0f;
+  float radius_x = 0.0f;
+  float radius_y = 0.0f;
+  /** `repeating-radial-gradient()`: the stop pattern restarts every `period`
+   * (the last stop's offset) instead of clamping at the outer ellipse. */
+  bool repeating = false;
+  float period = 1.0f;
+  /** Identity of the ramp (stops and geometry) for the renderer's texture cache. */
+  std::string key;
+};
+
 /** A solid, optionally rounded, rectangle. Coordinates are viewport-relative. */
 struct PaintRect {
   float x = 0;
@@ -71,6 +101,10 @@ struct PaintImage {
   /** Modulating colour for the image shader (white normally; a filter's
    * multiplicative effect may tint it). */
   Color tint{1.0f, 1.0f, 1.0f, 1.0f};
+  /** A `background-image` radial gradient: the renderer rasterises it into the
+   * quad instead of loading `src`/`svg`. Its stops already carry the colour
+   * functions of the filter chain; `tint` still carries brightness/opacity. */
+  std::shared_ptr<const PaintGradient> gradient;
 };
 
 /** One triangle of a clip path in device-space logical pixels. The paint pass
@@ -144,6 +178,18 @@ struct DisplayList {
   std::string dump() const;
 };
 
+namespace paint_detail {
+
+/** Interpolate a gradient's colour at `t` (a fraction of the gradient line; any
+ * value when `repeating`). Stops interpolate in premultiplied alpha, as CSS
+ * does, so a `transparent` stop does not darken the ramp towards an opaque
+ * colour; the result is converted back to straight alpha, which is what both the
+ * band and the texture paths blend. */
+Color gradientColorAt(const std::vector<GradientStop> &stops, bool repeating, float period,
+                      float t);
+
+}  // namespace paint_detail
+
 /** Build the display list for a laid-out tree and append it to `out`. The
  * viewport size resolves `vw`/`vh` units inside `clip-path` and shadows; pass 0
  * to take it from the root box's containing block. */

package/runtime/ext_gui/paint_background.cpp

@@ -1,18 +1,22 @@
 /*
  * xbintsc GUI engine — background layer painting.
  *
- * The renderer has one rounded-rectangle pipeline and no gradient shader, so a
- * gradient is emitted as a run of solid bands: 18 strips for a linear gradient
- * (64 while repeating) and 32 concentric ellipses for a radial one (64 while
- * repeating). Radial ellipses use the shape
- * pipeline's transform slot (a unit circle scaled to the ellipse radii), which
- * keeps the distance-field antialiasing intact.
+ * `background-color` is one rounded rectangle and a `background-image` layer is
+ * a gradient or an image. A linear gradient is emitted as a run of solid bands
+ * (18 strips, 64 while repeating). A radial gradient is emitted as a single
+ * `PaintGradient` that the renderer rasterises per pixel
+ * (`renderer_gradient.cpp`): stacking translucent radial bands composites their
+ * alpha once per band, which turns a vignette whose stops fade to `transparent`
+ * into an opaque disc.
  */
 
 #include "paint_internal.h"
 
 #include <algorithm>
 #include <cmath>
+#include <cstdio>
+#include <memory>
+#include <string>
 #include <vector>
 
 namespace xtgui {
@@ -20,21 +24,60 @@ namespace paint_detail {
 
 namespace {
 
-struct ResolvedStop {
-  float offset = 0.0f;
-  Color color;
-};
+/** Blend two stops in premultiplied alpha, as CSS specifies, and convert the
+ * result back to the straight alpha both pipelines blend. Without it a
+ * `transparent` stop (rgba(0,0,0,0)) drags the ramp towards black, so a
+ * `transparent -> white` gradient fades through grey. */
+Color mixGradientStops(const Color &from, const Color &to, float amount) {
+  float alpha = from.a + (to.a - from.a) * amount;
+  Color out;
+  out.a = alpha;
+  if (alpha > 0.00001f) {
+    out.r = (from.r * from.a + (to.r * to.a - from.r * from.a) * amount) / alpha;
+    out.g = (from.g * from.a + (to.g * to.a - from.g * from.a) * amount) / alpha;
+    out.b = (from.b * from.a + (to.b * to.a - from.b * from.a) * amount) / alpha;
+  } else {
+    out.r = from.r;
+    out.g = from.g;
+    out.b = from.b;
+  }
+  out.valid = true;
+  return out;
+}
+
+}  // namespace
+
+Color gradientColorAt(const std::vector<GradientStop> &stops, bool repeating, float period,
+                      float t) {
+  if (stops.empty()) return Color();
+  /* A repeating gradient restarts its stop pattern at the last stop's offset. */
+  if (repeating) {
+    if (period <= 0.00001f) return stops.back().color;
+    t -= std::floor(t / period) * period;
+  }
+  if (t <= stops.front().offset) return stops.front().color;
+  if (t >= stops.back().offset) return stops.back().color;
+  for (size_t i = 1; i < stops.size(); i++) {
+    if (t > stops[i].offset) continue;
+    float span = stops[i].offset - stops[i - 1].offset;
+    float u = span > 0.00001f ? (t - stops[i - 1].offset) / span : 0.0f;
+    return mixGradientStops(stops[i - 1].color, stops[i].color, u);
+  }
+  return stops.back().color;
+}
+
+namespace {
 
 /** Resolve the declaration's percentage/length offsets against the gradient
  * line, then distribute the omitted (`Unit::Auto`) ones between their
  * neighbours. The last explicit stop is preserved: for a normal gradient it
  * holds that colour, and for a repeating one it defines the period. */
-std::vector<ResolvedStop> resolveStops(const BackgroundLayer &layer, float line_length,
+std::vector<GradientStop> resolveStops(const BackgroundLayer &layer, float line_length,
                                        const XtStyle &style, float viewportWidth,
                                        float viewportHeight) {
-  std::vector<ResolvedStop> stops;
+  std::vector<GradientStop> stops;
   for (const BackgroundGradientStop &stop : layer.stops) {
-    ResolvedStop resolved;
+    GradientStop resolved;
     resolved.color = stop.color;
     resolved.offset = -1.0f;
     if (stop.offset.unit == Unit::Percent) {
@@ -51,7 +94,7 @@ std::vector<ResolvedStop> resolveStops(const BackgroundLayer &layer, float line_
 
   /* Explicit offsets are non-decreasing, as in CSS. */
   float last = -1.0f;
-  for (ResolvedStop &stop : stops) {
+  for (GradientStop &stop : stops) {
     if (stop.offset < 0.0f) continue;
     if (stop.offset < last) stop.offset = last;
     last = stop.offset;
@@ -87,33 +130,6 @@ std::vector<ResolvedStop> resolveStops(const BackgroundLayer &layer, float line_
   return stops;
 }
 
-Color gradientColorAt(const std::vector<ResolvedStop> &stops, bool repeating, float t) {
-  if (stops.empty()) return Color();
-  /* A repeating gradient restarts its stop pattern at the last stop's offset. */
-  if (repeating) {
-    float period = stops.back().offset;
-    if (period <= 0.00001f) return stops.back().color;
-    t -= std::floor(t / period) * period;
-  }
-  if (t <= stops.front().offset) return stops.front().color;
-  if (t >= stops.back().offset) return stops.back().color;
-  for (size_t i = 1; i < stops.size(); i++) {
-    if (t > stops[i].offset) continue;
-    float span = stops[i].offset - stops[i - 1].offset;
-    float u = span > 0.00001f ? (t - stops[i - 1].offset) / span : 0.0f;
-    Color a = stops[i - 1].color;
-    Color b = stops[i].color;
-    Color out;
-    out.r = a.r + (b.r - a.r) * u;
-    out.g = a.g + (b.g - a.g) * u;
-    out.b = a.b + (b.b - a.b) * u;
-    out.a = a.a + (b.a - a.a) * u;
-    out.valid = true;
-    return out;
-  }
-  return stops.back().color;
-}
-
 /** Intersect `clip` with the box's border box (backgrounds never paint outside
  * it, even when the box is not an overflow container). */
 PaintClip boxClip(const PaintClip &clip, const LayoutBox &box) {
@@ -160,11 +176,13 @@ void paintLinear(const LayoutBox &box, const XtStyle &style, const BackgroundLay
   bool reverse = (layer.angle > 260.0f && layer.angle < 280.0f) || layer.angle < 10.0f ||
                  layer.angle > 350.0f;
   const float line_length = horizontal ? box.width : box.height;
-  std::vector<ResolvedStop> stops = resolveStops(layer, line_length, style, viewportWidth,
+  std::vector<GradientStop> stops = resolveStops(layer, line_length, style, viewportWidth,
                                                  viewportHeight);
+  if (stops.size() < 2) return;
+  const float period = stops.back().offset;
   for (int i = 0; i < strips; i++) {
     float t = ((float)i + 0.5f) / (float)strips;
-    Color color = gradientColorAt(stops, layer.repeating, reverse ? 1.0f - t : t);
+    Color color = gradientColorAt(stops, layer.repeating, period, reverse ? 1.0f - t : t);
     color = filterColor(chain, color);
     if (color.a <= 0.0f) continue;
     if (horizontal) {
@@ -177,6 +195,18 @@ void paintLinear(const LayoutBox &box, const XtStyle &style, const BackgroundLay
   }
 }
 
+/** Radii of a keyword-sized ellipse: it keeps the box's aspect ratio and is
+ * scaled until it meets the corner at `(px, py)` from the centre, so the 100%
+ * stop lands on that corner as it does in CSS. Taking the side distances instead
+ * left the corners of a `farthest-corner` gradient unpainted. */
+void cornerEllipseRadii(float width, float height, float px, float py, float *rx, float *ry) {
+  float x = 2.0f * px / width;
+  float y = 2.0f * py / height;
+  float scale = std::sqrt(x * x + y * y);
+  *rx = scale * width * 0.5f;
+  *ry = scale * height * 0.5f;
+}
+
 /** Default radii for `closest-side` / `farthest-side` / corner keywords. */
 void radialRadii(const LayoutBox &box, const BackgroundLayer &layer, const XtStyle &style,
                  float viewportWidth, float viewportHeight, float *cx, float *cy, float *rx,
@@ -230,31 +260,45 @@ void radialRadii(const LayoutBox &box, const BackgroundLayer &layer, const XtSty
     *rx = *ry = radius;
   } else {
     switch (layer.size) {
-      case RadialSize::ClosestCorner:
       case RadialSize::ClosestSide:
         *rx = std::min(left, right);
         *ry = std::min(top, bottom);
         break;
       case RadialSize::FarthestSide:
-      case RadialSize::FarthestCorner:
-      default:
         *rx = std::max(left, right);
         *ry = std::max(top, bottom);
         break;
+      case RadialSize::ClosestCorner:
+        cornerEllipseRadii(box.width, box.height, std::min(left, right), std::min(top, bottom), rx,
+                           ry);
+        break;
+      case RadialSize::FarthestCorner:
+      default:
+        cornerEllipseRadii(box.width, box.height, std::max(left, right), std::max(top, bottom), rx,
+                           ry);
+        break;
     }
   }
   *cx = centerX;
   *cy = centerY;
 }
 
-/** One filled ellipse: a unit-radius rounded rect mapped by a local scale. */
-void addEllipse(DisplayList &out, float cx, float cy, float rx, float ry, const Color &color,
-                const PaintClip &clip, const Matrix2D &world) {
-  if (rx <= 0.0f || ry <= 0.0f || color.a <= 0.0f) return;
-  Matrix2D local = Matrix2D::translate(cx, cy)
-                       .multiply(Matrix2D::scale(rx, ry))
-                       .multiply(Matrix2D::translate(-cx, -cy));
-  addRect(out, cx - 1.0f, cy - 1.0f, 2.0f, 2.0f, 1.0f, color, clip, world.multiply(local));
+/** Stable identity of a rasterised gradient: the ramp plus its geometry. The
+ * renderer keys its texture cache by this string, so an unchanged declaration
+ * rasterises once. */
+std::string gradientKey(const PaintGradient &gradient) {
+  char buffer[192];
+  std::string key;
+  for (const GradientStop &stop : gradient.stops) {
+    std::snprintf(buffer, sizeof(buffer), "%.4f/%.5f,%.5f,%.5f,%.5f;", stop.offset, stop.color.r,
+                  stop.color.g, stop.color.b, stop.color.a);
+    key += buffer;
+  }
+  std::snprintf(buffer, sizeof(buffer), "%.3f,%.3f,%.3f,%.3f;%d;%.5f", gradient.center_x,
+                gradient.center_y, gradient.radius_x, gradient.radius_y,
+                gradient.repeating ? 1 : 0, gradient.period);
+  key += buffer;
+  return key;
 }
 
 void paintRadial(const LayoutBox &box, const XtStyle &style, const BackgroundLayer &layer,
@@ -267,18 +311,49 @@ void paintRadial(const LayoutBox &box, const XtStyle &style, const BackgroundLay
   float ry = 0.0f;
   radialRadii(box, layer, style, viewportWidth, viewportHeight, &cx, &cy, &rx, &ry);
   if (rx <= 0.0f || ry <= 0.0f) return;
-  std::vector<ResolvedStop> stops = resolveStops(layer, std::max(rx, ry), style, viewportWidth,
+  std::vector<GradientStop> stops = resolveStops(layer, std::max(rx, ry), style, viewportWidth,
                                                  viewportHeight);
-  const int bands = layer.repeating ? 64 : 32;
-  for (int i = bands; i >= 1; i--) {
-    float t = (float)i / (float)bands;
-    Color color = filterColor(chain, gradientColorAt(stops, layer.repeating, t));
-    if (color.a <= 0.0f) continue;
-    addEllipse(out, cx, cy, rx * t, ry * t, color, clip, box.world);
+  if (stops.size() < 2) return;
+  /* The colour functions fold into the stops (a per-stop application is exact
+   * for the linear ones); `brightness()` and `opacity()` stay out, because the
+   * image tint carries them exactly and leaving them out keeps the ramp — and
+   * therefore the texture cache key — stable while a fade animates. */
+  FilterChain stopChain = chain;
+  stopChain.opacity = 1.0f;
+  for (size_t i = stopChain.ops.size(); i-- > 0;) {
+    FilterKind kind = stopChain.ops[i].kind;
+    if (kind == FilterKind::Brightness || kind == FilterKind::Opacity) {
+      stopChain.ops.erase(stopChain.ops.begin() + (ptrdiff_t)i);
+    }
+  }
+  auto gradient = std::make_shared<PaintGradient>();
+  gradient->stops.reserve(stops.size());
+  bool visible = false;
+  for (size_t i = 0; i < stops.size(); i++) {
+    GradientStop resolved = stops[i];
+    resolved.color = filterColor(stopChain, resolved.color);
+    visible = visible || resolved.color.a > 0.0f;
+    gradient->stops.push_back(resolved);
   }
-  /* Exact centre colour (the innermost band samples just off zero). */
-  Color center = filterColor(chain, gradientColorAt(stops, layer.repeating, 0.0f));
-  addEllipse(out, cx, cy, 0.6f, 0.6f, center, clip, box.world);
+  if (!visible) return;
+  gradient->center_x = cx - box.x;
+  gradient->center_y = cy - box.y;
+  gradient->radius_x = rx;
+  gradient->radius_y = ry;
+  gradient->repeating = layer.repeating;
+  gradient->period = stops.back().offset;
+  gradient->key = gradientKey(*gradient);
+
+  /* One quad for the whole layer: the renderer resolves the ramp per pixel, so
+   * the layer composites exactly once instead of once per translucent band. */
+  PaintImage image;
+  image.x = box.x;
+  image.y = box.y;
+  image.width = box.width;
+  image.height = box.height;
+  image.transform = box.world;
+  image.gradient = gradient;
+  addImage(out, std::move(image), clip, chain);
 }
 
 void paintImage(const LayoutBox &box, const BackgroundLayer &layer, const FilterChain &chain,

package/runtime/ext_gui/renderer_gradient.cpp

@@ -0,0 +1,156 @@
+/*
+ * xbintsc GUI engine — radial `background-image` rasterisation.
+ *
+ * The shape pipeline fills one shape with one flat colour, and the bands a
+ * radial gradient used to be drawn as are nested ellipses: every band covers the
+ * whole interior, so each band's alpha composites over the previous ones and a
+ * vignette whose stops fade to `transparent` ends up opaque. The ramp is
+ * therefore resolved per pixel into an RGBA texture, which the image pipeline
+ * draws as one quad and composites exactly once.
+ */
+
+#include "renderer_internal.h"
+
+#include <algorithm>
+#include <cmath>
+#include <cstdio>
+#include <string>
+#include <unordered_map>
+
+namespace xtgui {
+namespace renderer_detail {
+
+namespace {
+
+/** A rasterised gradient, keyed by the paint pass's cache key plus the logical
+ * box size. The texture is re-rasterised in place when the device pixel size
+ * changes (a DPI change), so a resized gradient never leaves a stale texture. */
+struct GradientTexture {
+  SDL_GPUTexture *texture = nullptr;
+  int width = 0;
+  int height = 0;
+  /** Set by the upload pass that draws this gradient; see `finishGradientUpload`. */
+  bool used = false;
+};
+
+std::unordered_map<std::string, GradientTexture> g_gradient_textures;
+
+/** How many rasterised gradients that are no longer drawn are kept. A gradient's
+ * stops can animate (a `hue-rotate` loop, say), which would otherwise rasterise a
+ * fresh texture every frame and never free the old ones. */
+constexpr size_t kMaxStaleGradients = 8;
+
+/** Largest texture edge a gradient is rasterised at. A radial ramp is smooth, so
+ * a larger box is rasterised smaller and stretched: the sampled colours are
+ * unchanged (the stretch is uniform), only the resolution of the ramp drops. */
+constexpr int kMaxGradientEdge = 1024;
+
+unsigned char byteOf(float value) {
+  if (!(value > 0.0f)) return 0;  // NaN and negatives
+  if (value > 1.0f) value = 1.0f;
+  return (unsigned char)(value * 255.0f + 0.5f);
+}
+
+/** Rasterise `gradient` into `out`: the box maps 1:1 onto the texture. The ramp
+ * covers the whole box — past the ending shape CSS keeps the last stop's colour
+ * rather than fading out — so there is no shape edge to antialias; the texels
+ * are sampled with linear filtering. */
+void rasterizeGradient(const PaintGradient &gradient, float logical_width, float logical_height,
+                       int pixel_width, int pixel_height, Image *out) {
+  out->width = pixel_width;
+  out->height = pixel_height;
+  out->pixels.assign((size_t)pixel_width * (size_t)pixel_height * 4u, 0);
+  const float pixel_x = logical_width / (float)pixel_width;  // logical px per texel
+  const float pixel_y = logical_height / (float)pixel_height;
+  const float inv_rx = 1.0f / gradient.radius_x;
+  const float inv_ry = 1.0f / gradient.radius_y;
+  for (int y = 0; y < pixel_height; y++) {
+    const float local_y = ((float)y + 0.5f) * pixel_y;
+    unsigned char *row = out->pixels.data() + (size_t)y * (size_t)pixel_width * 4u;
+    for (int x = 0; x < pixel_width; x++) {
+      const float local_x = ((float)x + 0.5f) * pixel_x;
+      const float u = (local_x - gradient.center_x) * inv_rx;
+      const float v = (local_y - gradient.center_y) * inv_ry;
+      const float t = std::sqrt(u * u + v * v);
+      Color color =
+          paint_detail::gradientColorAt(gradient.stops, gradient.repeating, gradient.period, t);
+      if (color.a <= 0.0f) continue;
+      unsigned char *texel = row + (size_t)x * 4u;
+      texel[0] = byteOf(color.r);
+      texel[1] = byteOf(color.g);
+      texel[2] = byteOf(color.b);
+      texel[3] = byteOf(color.a);
+    }
+  }
+}
+
+/** The device size a gradient of `pixel_width` x `pixel_height` is rasterised at,
+ * preserving its aspect ratio under `kMaxGradientEdge`. */
+void rasterSize(int pixel_width, int pixel_height, int *width, int *height) {
+  *width = std::max(1, pixel_width);
+  *height = std::max(1, pixel_height);
+  if (*width <= kMaxGradientEdge && *height <= kMaxGradientEdge) return;
+  float shrink = (float)kMaxGradientEdge / (float)std::max(*width, *height);
+  *width = std::max(1, (int)((float)*width * shrink + 0.5f));
+  *height = std::max(1, (int)((float)*height * shrink + 0.5f));
+}
+
+}  // namespace
+
+void beginGradientUpload() {
+  for (auto &entry : g_gradient_textures) entry.second.used = false;
+}
+
+void finishGradientUpload(SDL_GPUDevice *device) {
+  if (g_gradient_textures.size() <= kMaxStaleGradients) return;
+  /* The display list of the frame being built may hold pointers to the textures
+   * it used, so only gradients it did *not* use can go. */
+  for (auto it = g_gradient_textures.begin(); it != g_gradient_textures.end();) {
+    if (it->second.used) {
+      ++it;
+      continue;
+    }
+    if (it->second.texture != nullptr) SDL_ReleaseGPUTexture(device, it->second.texture);
+    it = g_gradient_textures.erase(it);
+  }
+}
+
+SDL_GPUTexture *ensureGradientTexture(SDL_GPUDevice *device, const xtgui::PaintImage &image,
+                                      int pixel_width, int pixel_height, XtGuiUploadBatch *batch) {
+  if (image.gradient == nullptr || image.width <= 0.0f || image.height <= 0.0f) return nullptr;
+  const xtgui::PaintGradient &gradient = *image.gradient;
+  if (gradient.radius_x <= 0.0f || gradient.radius_y <= 0.0f || gradient.stops.size() < 2) {
+    return nullptr;
+  }
+  int width = 0;
+  int height = 0;
+  rasterSize(pixel_width, pixel_height, &width, &height);
+  /* The key carries the ramp, its geometry and the logical box size: two boxes
+   * of different sizes can resolve the same px radius but not the same picture. */
+  char box[64];
+  std::snprintf(box, sizeof(box), "@%.3f,%.3f", image.width, image.height);
+  std::string key = gradient.key + box;
+  GradientTexture &entry = g_gradient_textures[key];
+  entry.used = true;
+  if (entry.texture != nullptr && entry.width == width && entry.height == height) {
+    return entry.texture;
+  }
+  Image raster;
+  rasterizeGradient(gradient, image.width, image.height, width, height, &raster);
+  SDL_GPUTexture *texture = createImageTexture(device, raster, batch);
+  if (entry.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.texture);
+  entry.texture = texture;
+  entry.width = texture != nullptr ? width : 0;
+  entry.height = texture != nullptr ? height : 0;
+  return texture;
+}
+
+void releaseGradientTextures(SDL_GPUDevice *device) {
+  for (auto &entry : g_gradient_textures) {
+    if (entry.second.texture != nullptr) SDL_ReleaseGPUTexture(device, entry.second.texture);
+  }
+  g_gradient_textures.clear();
+}
+
+}  // namespace renderer_detail
+}  // namespace xtgui

package/runtime/ext_gui/renderer_image.cpp

@@ -379,6 +379,7 @@ void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
   full.v0 = 0.0f;
   full.u1 = 1.0f;
   full.v1 = 1.0f;
+  beginGradientUpload();
   for (const xtgui::PaintOp &op : list.ops) {
     if (op.kind != xtgui::PaintKind::Image || op.index >= list.images.size()) continue;
     const xtgui::PaintImage &image = list.images[op.index];
@@ -390,7 +391,9 @@ void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
     if (pixel_width < 1) pixel_width = 1;
     if (pixel_height < 1) pixel_height = 1;
     SDL_GPUTexture *texture = nullptr;
-    if (image.canvas_id != 0) {
+    if (image.gradient != nullptr) {
+      texture = ensureGradientTexture(device, image, pixel_width, pixel_height, batch);
+    } else if (image.canvas_id != 0) {
       texture = ensureCanvasTexture(device, image.canvas_id, batch);
     } else if (image.media_id != 0) {
       texture = ensureMediaTexture(device, image.media_id, batch);
@@ -405,11 +408,13 @@ void xt_gui_image_upload(SDL_GPUDevice *device, XtGuiGeometry *geometry,
     geometry->op_counts[op.index] = count;
     geometry->op_textures[op.index] = texture;
   }
+  finishGradientUpload(device);
   uploadVertices(device, geometry, verts.data(), (uint32_t)verts.size(), sizeof(TextVertex), batch);
 }
 
 void xt_gui_image_textures_destroy(SDL_GPUDevice *device) {
   using namespace xtgui::renderer_detail;
+  releaseGradientTextures(device);
   for (auto &entry : g_image_textures) {
     if (entry.second != nullptr) SDL_ReleaseGPUTexture(device, entry.second);
   }

package/runtime/ext_gui/renderer_internal.h

@@ -14,6 +14,7 @@
 #include <unordered_map>
 #include <vector>
 
+#include "image.h"
 #include "paint.h"
 #include "renderer.h"
 
@@ -147,6 +148,10 @@ void layerRendererDestroy(SDL_GPUDevice *device);
 /* -- images --------------------------------------------------------------- */
 
 SDL_GPUGraphicsPipeline *createImagePipeline(SDL_GPUDevice *device, SDL_Window *reference);
+/** Create an RGBA texture holding `image` and upload its pixels. Returns null
+ * (after reporting the SDL error) when either step fails. */
+SDL_GPUTexture *createImageTexture(SDL_GPUDevice *device, const xtgui::Image &image,
+                                   XtGuiUploadBatch *batch);
 /** Decode `src` (cached) and upload it as an RGBA texture. `pixel_width` /
  * `pixel_height` are the drawn size in device pixels; vector sources (SVG) are
  * rasterised at that size, raster sources ignore it. The texture cache is keyed
@@ -154,6 +159,23 @@ SDL_GPUGraphicsPipeline *createImagePipeline(SDL_GPUDevice *device, SDL_Window *
 SDL_GPUTexture *ensureImageTexture(SDL_GPUDevice *device, const std::string &src, int pixel_width,
                                    int pixel_height, XtGuiUploadBatch *batch);
 
+/* -- background gradients ------------------------------------------------- */
+
+/** Rasterise a `PaintImage` radial gradient into an RGBA texture and cache it by
+ * the paint pass's key. The ramp is resolved per device pixel, so a translucent
+ * gradient composites once instead of once per band. Bracket a frame's uploads
+ * with `beginGradientUpload`/`finishGradientUpload` so textures the frame no
+ * longer draws can be reclaimed; returns null when it cannot be created. */
+SDL_GPUTexture *ensureGradientTexture(SDL_GPUDevice *device, const xtgui::PaintImage &image,
+                                      int pixel_width, int pixel_height, XtGuiUploadBatch *batch);
+/** Mark every cached gradient unused; `ensureGradientTexture` marks the ones the
+ * upload pass draws. */
+void beginGradientUpload();
+/** Release cached gradients the pass did not draw, keeping the cache bounded. */
+void finishGradientUpload(SDL_GPUDevice *device);
+/** Release every rasterised gradient texture. */
+void releaseGradientTextures(SDL_GPUDevice *device);
+
 }  // namespace renderer_detail
 }  // namespace xtgui
 

package/src/driver/version.ts

@@ -9,4 +9,4 @@
  * `main`/`master` only (see `.githooks/pre-commit`), so feature branches never
  * change this line and merging two of them cannot conflict here.
  */
-export const COMPILER_VERSION = "0.5.42";
+export const COMPILER_VERSION = "0.5.43";