@typecad/ui 1.0.0-alpha.7 → 1.0.0-alpha.9

package/README.md

@@ -1123,6 +1123,12 @@ display: {
   rst: 22,
   backlight: 17,       // optional — pin number for backlight
 
+  // Experimental and opt-in: use only after verifying the controller's
+  // GET_SCANLINE (0x45) readback and wiring SDO/MISO in spiPins. Some ST7796S
+  // modules stop scanning when this command is read, so the default is off.
+  // scanlineSync: true,
+  // spiPins: { mosi: 11, sck: 12, miso: 13 },
+
   // Antialiasing (optional)
   antialias: true,       // smooths shapes and text; text can opt out with font-smoothing:none
 

package/dist/engine-index.js

@@ -14,7 +14,6 @@ import { resolveColor, resolveColorInternal } from "./ui-engine/color.js";
 import { emitRuntimeHeader } from "./ui-engine/runtime-header.js";
 import { emitCuttlefishGfx } from "./ui-engine/runtime-header/cuttlefish-gfx.js";
 import { splitUiFile } from "./ui-engine/ui-file-splitter.js";
-import { analyzeScrollMemory } from "./ui-engine/scroll-memory-diagnostics.js";
 /**
  * Build and return the TranspilerUIHook — the object cuttlefish core uses
  * to access all UI capabilities (parsing, layout, lowering, emission).
@@ -38,6 +37,5 @@ export function registerTranspilerUI() {
         emitCuttlefishGfx,
         splitUiFile,
         generateProjectUITypeDeclarations,
-        analyzeScrollMemory,
     };
 }

package/dist/preview/host-ui-runtime.d.ts

@@ -187,6 +187,7 @@ export declare class PreviewUIRuntime {
      *  sequence is supported — same constraint as bindList item expressions. */
     private runCanvasBody;
     private drawButtonNode;
+    private drawSelectNode;
     private drawCheckNode;
     private drawRadioNode;
     private drawProgressNode;

package/dist/preview/host-ui-runtime.js

@@ -1062,7 +1062,7 @@ export class PreviewUIRuntime {
         const shadow = this.shadowExtents(node);
         let faceW = node.box.w;
         let faceH = node.box.h;
-        if (node.kind === "text" || node.kind === "check" || node.kind === "radio") {
+        if (node.kind === "text" || node.kind === "check" || node.kind === "radio" || node.kind === "select") {
             if (node.lastTextWidth > faceW)
                 faceW = node.lastTextWidth;
             if ((node.lastTextHeight ?? 0) > faceH)
@@ -1090,7 +1090,7 @@ export class PreviewUIRuntime {
         const displayText = node.hasTextBinding ? node.textBuffer : node.text;
         const ts = this.nodeTextSize(node);
         let textMaxW = node.box.w;
-        if (node.kind === "text" || node.kind === "button") {
+        if (node.kind === "text" || node.kind === "button" || node.kind === "select") {
             const insets = this.textInsets(node);
             textMaxW = Math.max(0, node.box.w - insets.left - insets.right);
         }
@@ -1100,7 +1100,7 @@ export class PreviewUIRuntime {
         const metrics = this.textLayout(node, displayText, textMaxW, ts);
         let paintTextW = metrics.width;
         let paintTextH = metrics.height;
-        if (node.kind === "text") {
+        if (node.kind === "text" || node.kind === "select") {
             const insets = this.textInsets(node);
             paintTextW += insets.left + insets.right;
             paintTextH += insets.top + insets.bottom;
@@ -1226,13 +1226,20 @@ export class PreviewUIRuntime {
         const displayText = node.hasTextBinding ? node.textBuffer : node.text;
         const ts = this.nodeTextSize(node);
         let textMaxW = node.box.w;
-        if (node.kind === "text" || node.kind === "button") {
+        if (node.kind === "text" || node.kind === "button" || node.kind === "select") {
             const insets = this.textInsets(node);
             textMaxW = Math.max(0, node.box.w - insets.left - insets.right);
         }
         const metrics = this.textLayout(node, displayText, textMaxW, ts);
-        const insets = node.kind === "text" ? this.textInsets(node) : { left: 0, right: 0, top: 0, bottom: 0 };
-        const rect = this.nodePaintRect(node, this.baseDrawXForNode(node.index), this.baseDrawYForNode(node.index), this.drawXForNode(node.index), this.drawYForNode(node.index), metrics.width + insets.left + insets.right, metrics.height + insets.top + insets.bottom);
+        const insets = (node.kind === "text" || node.kind === "select") ? this.textInsets(node) : { left: 0, right: 0, top: 0, bottom: 0 };
+        let clearW = metrics.width + insets.left + insets.right;
+        let clearH = metrics.height + insets.top + insets.bottom;
+        if (node.kind === "check" || node.kind === "radio") {
+            clearW += 22;
+            if (clearH < 16)
+                clearH = 16;
+        }
+        const rect = this.nodePaintRect(node, this.baseDrawXForNode(node.index), this.baseDrawYForNode(node.index), this.drawXForNode(node.index), this.drawYForNode(node.index), clearW, clearH);
         this.clearNodePaintRect(node, rect);
     }
     tryRepairGeometryFill(node, oldRect) {
@@ -1845,6 +1852,9 @@ export class PreviewUIRuntime {
                     case "button":
                         this.drawButtonNode(node, displayText, bColor, fillBg, drawY, ts);
                         break;
+                    case "select":
+                        this.drawSelectNode(node, displayText, bColor, fillBg, drawY, ts);
+                        break;
                     case "check":
                         this.drawCheckNode(node, displayText, drawY, ts);
                         break;
@@ -2318,6 +2328,35 @@ export class PreviewUIRuntime {
         const glyphBg = node.opacity < 100 ? blendRuntime(node.bg, this.parentClearColor(node), node.opacity) : (node.hasBg ? node.bg : node.clearColor);
         this.drawTextLines(node, displayText, textX, top, textW, ts, node.fg, glyphBg, node.textAlign);
     }
+    // <select>: bordered box with its current option text VERTICALLY CENTERED
+    // (unlike drawTextNode, which top-aligns). Mirrors the C++ NODE_SELECT case
+    // so preview and device agree. The label is dynamic (auto-bound to the
+    // selected option), so clear the previous text rect before redrawing.
+    drawSelectNode(node, displayText, bColor, fillBg, drawY, ts) {
+        const insets = this.textInsets(node);
+        const contentW = Math.max(1, node.box.w - insets.left - insets.right);
+        const layout = this.textLayout(node, displayText, contentW, ts);
+        const clearW = Math.max(node.box.w, node.lastTextWidth ?? 0, layout.width + insets.left + insets.right);
+        const clearH = Math.max(node.box.h, node.lastTextHeight ?? 0, layout.height + insets.top + insets.bottom);
+        const clearCol = node.hasBg ? node.bg : node.clearColor;
+        this.gfx.fillRect(node.box.x, drawY, clearW, clearH, clearCol);
+        node.lastTextWidth = layout.width;
+        node.lastTextHeight = layout.height;
+        if (node.borderRadius > 0 && node.hasBg)
+            this.gfx.fillRoundRect(node.box.x, drawY, node.box.w, node.box.h, node.borderRadius, fillBg);
+        else if (node.hasBg)
+            this.gfx.fillRect(node.box.x, drawY, node.box.w, node.box.h, fillBg);
+        this.drawNodeShadow(node, drawY, true);
+        if (node.borderStyle)
+            this.drawNodeBorder(node, node.box.x, drawY, bColor);
+        const textX = node.box.x + insets.left;
+        const textY = drawY + insets.top;
+        const textW = Math.max(1, node.box.w - insets.left - insets.right);
+        const textH = Math.max(1, node.box.h - insets.top - insets.bottom);
+        const top = textY + Math.trunc((textH - layout.height) / 2);
+        const glyphBg = node.opacity < 100 ? blendRuntime(node.bg, this.parentClearColor(node), node.opacity) : (node.hasBg ? node.bg : node.clearColor);
+        this.drawTextLines(node, displayText, textX, top, textW, ts, node.fg, glyphBg, node.textAlign);
+    }
     drawCheckNode(node, displayText, drawY, ts) {
         const layout = this.textLayout(node, displayText, Math.max(0, node.box.w - 22), ts);
         const clearW = Math.max(node.box.w, node.lastTextWidth);
@@ -2326,7 +2365,11 @@ export class PreviewUIRuntime {
         node.lastTextWidth = 22 + layout.width;
         node.lastTextHeight = Math.max(layout.height, 16);
         const cbX = node.box.x;
-        const cbY = drawY;
+        // Vertically center the 16px indicator within the box so a tall
+        // (touch-friendly) checkbox doesn't pin the indicator to the top.
+        // (box.h - 16) / 2 is 0 for the default 16px-tall box.
+        const checkOff = Math.max(0, ((node.box.h - 16) / 2) | 0);
+        const cbY = drawY + checkOff;
         if (node.value) {
             this.gfx.fillRect(cbX, cbY, 16, 16, node.fg);
             const inv = node.hasBg ? node.bg : node.clearColor;
@@ -2340,7 +2383,7 @@ export class PreviewUIRuntime {
         else {
             this.gfx.drawRect(cbX, cbY, 16, 16, node.fg);
         }
-        this.drawTextLines(node, displayText, node.box.x + 22, drawY, Math.max(0, node.box.w - 22), ts, node.fg, node.hasBg ? node.bg : node.clearColor, 0);
+        this.drawTextLines(node, displayText, node.box.x + 22, drawY + checkOff, Math.max(0, node.box.w - 22), ts, node.fg, node.hasBg ? node.bg : node.clearColor, 0);
     }
     drawRadioNode(node, displayText, drawY, ts) {
         const layout = this.textLayout(node, displayText, Math.max(0, node.box.w - 22), ts);
@@ -2350,7 +2393,9 @@ export class PreviewUIRuntime {
         node.lastTextWidth = 22 + layout.width;
         node.lastTextHeight = Math.max(layout.height, 16);
         const cbX = node.box.x;
-        const cbY = drawY;
+        // Vertically center the 16px indicator within the box (see drawCheckNode).
+        const radioOff = Math.max(0, ((node.box.h - 16) / 2) | 0);
+        const cbY = drawY + radioOff;
         if (node.value) {
             this.gfx.fillCircle(cbX + 8, cbY + 8, 7, node.fg);
             this.gfx.fillCircle(cbX + 8, cbY + 8, 3, node.hasBg ? node.bg : node.clearColor);
@@ -2358,7 +2403,7 @@ export class PreviewUIRuntime {
         else {
             this.gfx.drawCircle(cbX + 8, cbY + 8, 7, node.fg);
         }
-        this.drawTextLines(node, displayText, node.box.x + 22, drawY, Math.max(0, node.box.w - 22), ts, node.fg, node.hasBg ? node.bg : node.clearColor, 0);
+        this.drawTextLines(node, displayText, node.box.x + 22, drawY + radioOff, Math.max(0, node.box.w - 22), ts, node.fg, node.hasBg ? node.bg : node.clearColor, 0);
     }
     drawProgressNode(node, drawY) {
         const bx = node.box.x;
@@ -2788,7 +2833,7 @@ export class PreviewUIRuntime {
             this.markDirty(nodeIndex);
         }
         else if (node.tag === "select") {
-            const count = Math.max(node.options?.length ?? 0, 2);
+            const count = Math.max(node.options?.length ?? 0, 1);
             node.value = (node.value + 1) % count;
             this.markDirty(nodeIndex);
         }

package/dist/ui-engine/font-assets.d.ts

@@ -46,5 +46,13 @@ export declare function selectFontAssetForStyle(fontAssets: UIFontAssetModel[],
  *  Characters missing from the asset's subset fall back to half the line height
  *  (matching the runtime's ui_asset_text_width fallback). */
 export declare function assetTextWidth(text: string, style: CSSProperty, fontAssets: UIFontAssetModel[]): number | undefined;
+/** The line height the runtime will render a custom-font node at
+ *  (ui_asset_text_height → face->lineHeight), or undefined when the node uses
+ *  the default font. Layout must use this for the glyph-cell height instead of
+ *  the 8*ts GFX bitmap default, otherwise the laid-out box is shorter than the
+ *  drawn glyphs and the text overflows its container (e.g. a bold @font-face
+ *  title spilling past its header's padded box). Mirrors the preview's
+ *  textHeight(size, fontFace) = asset.lineHeight ?? gfx.textHeight(size). */
+export declare function assetLineHeight(style: CSSProperty, fontAssets: UIFontAssetModel[]): number | undefined;
 export declare function buildUIFontAssets(root: StyledNode, fontFaces: CSSFontFace[], baseDir: string): UIFontAssetModel[];
 export declare function planUIFontAssets(root: StyledNode, fontFaces: CSSFontFace[], baseDir: string): UIFontAssetPlan[];

package/dist/ui-engine/font-assets.js

@@ -97,6 +97,19 @@ export function assetTextWidth(text, style, fontAssets) {
     }
     return w;
 }
+/** The line height the runtime will render a custom-font node at
+ *  (ui_asset_text_height → face->lineHeight), or undefined when the node uses
+ *  the default font. Layout must use this for the glyph-cell height instead of
+ *  the 8*ts GFX bitmap default, otherwise the laid-out box is shorter than the
+ *  drawn glyphs and the text overflows its container (e.g. a bold @font-face
+ *  title spilling past its header's padded box). Mirrors the preview's
+ *  textHeight(size, fontFace) = asset.lineHeight ?? gfx.textHeight(size). */
+export function assetLineHeight(style, fontAssets) {
+    const asset = selectFontAssetForStyle(fontAssets, style);
+    if (!asset || asset.lineHeight <= 0)
+        return undefined;
+    return asset.lineHeight;
+}
 export function buildUIFontAssets(root, fontFaces, baseDir) {
     const plans = planUIFontAssets(root, fontFaces, baseDir);
     const parsedFonts = new Map();

package/dist/ui-engine/layout-engine.js

@@ -12,7 +12,7 @@
 // ---------------------------------------------------------------------------
 import { layoutText } from "./text-layout.js";
 import { layoutRuns } from "./rich-layout.js";
-import { assetTextWidth } from "./font-assets.js";
+import { assetTextWidth, assetLineHeight } from "./font-assets.js";
 /** Static display:none predicate shared by layout engines and lowering. */
 export function isDisplayNone(node) {
     return node.style.display?.trim().toLowerCase() === "none";
@@ -113,12 +113,16 @@ export function measure(node, availableWidth, fontAssets = []) {
             const rs = { ...node.style, ...r.style };
             const rTs = gfxTextSizeOf({ ...node, style: rs });
             const rAdvance = 6 * rTs + letterSpacingOf({ ...node, style: rs });
+            // Run glyph height: prefer the asset's lineHeight for custom fonts (see
+            // charH below); fall back to the 8*rTs GFX bitmap default.
+            const rAssetH = assetLineHeight(rs, fontAssets);
+            const rHeight = rAssetH ?? (8 * rTs);
             return {
                 text: applyTextTransform(r.text, { ...node, style: rs }),
                 hardBreak: r.hardBreak,
                 measureText: (s) => assetTextWidth(s, rs, fontAssets) ?? textWidthOf(s, rAdvance),
-                height: 8 * rTs,
-                ascent: 7 * rTs,
+                height: rHeight,
+                ascent: rAssetH ?? (7 * rTs),
             };
         });
         const layout = layoutRuns(layoutInput, { maxWidth: availableWidth, whiteSpace: node.style.whiteSpace });
@@ -127,7 +131,13 @@ export function measure(node, availableWidth, fontAssets = []) {
     // Per-node text size (from font-size + font-weight CSS).
     const ts = gfxTextSizeOf(node);
     const advance = 6 * ts + letterSpacingOf(node);
-    const charH = 8 * ts;
+    // Glyph-cell height: the runtime draws a custom @font-face at its real
+    // lineHeight (ui_asset_text_height → face->lineHeight), NOT the 8*ts GFX
+    // bitmap default. Use the asset's lineHeight when one matches so the box
+    // matches the drawn height (otherwise bold @font-face titles overflow their
+    // header). Falls back to 8*ts for the default font. Mirrors the preview.
+    const assetH = assetLineHeight(node.style, fontAssets);
+    const charH = assetH ?? (8 * ts);
     // For interpolation text (e.g. "taps: {count}"), strip the braces so layout
     // measures "taps: count" — closer to the resolved runtime width than the
     // literal "{count}". The braces are an authoring delimiter, not rendered.
@@ -175,10 +185,13 @@ export function measure(node, availableWidth, fontAssets = []) {
         return { w: 200, h: 20 };
     }
     if (node.tag === "input") {
-        // Input field: sized to the placeholder or a default width, 20px tall.
+        // Input field: sized to the placeholder or a default width. Height defaults
+        // to 20px but an explicit `height` style overrides it (the UA input rule no
+        // longer forces a min-height, so the author's height wins).
         const text = node.placeholder ?? "";
         const textW = text.length > 0 ? text.length * GFX_ADVANCE_PER_CHAR : 120;
-        return { w: Math.max(textW + 16, 120), h: 20 };
+        const explicitH = node.style.height ? parseInt(String(node.style.height), 10) : NaN;
+        return { w: Math.max(textW + 16, 120), h: Number.isNaN(explicitH) ? 20 : explicitH };
     }
     if (node.tag === "img") {
         return { w: node.imgWidth ?? 32, h: node.imgHeight ?? 32 };

package/dist/ui-engine/model.d.ts

@@ -4,7 +4,7 @@ import type { UIImageAsset } from "./image-assets.js";
 import { type Box } from "./layout-engine.js";
 import type { StyledNode } from "./style-resolver.js";
 export { easeCurveLerpK, TIMING_EASE, TIMING_EASE_IN, TIMING_EASE_IN_OUT, TIMING_EASE_OUT, TIMING_LINEAR, timingFunctionCode, } from "./easing.js";
-export type UINodeKindModel = "fill" | "text" | "button" | "check" | "radio" | "progress" | "range" | "input" | "img" | "list" | "canvas";
+export type UINodeKindModel = "fill" | "text" | "button" | "check" | "radio" | "progress" | "range" | "input" | "img" | "list" | "canvas" | "select";
 export type UIPropertyModel = "background" | "color" | "text" | "visible" | "borderColor";
 export interface UINodeModel {
     index: number;

package/dist/ui-engine/model.js

@@ -2,7 +2,7 @@ import { effectiveDisplaySize } from "@typecad/cuttlefish/api/shared";
 import { deriveCapabilities } from "@typecad/cuttlefish/api/shared";
 import { resolveColorInternal } from "./color.js";
 import { parseAnimation } from "./css-parser.js";
-import { selectFontAssetForStyle, assetTextWidth } from "./font-assets.js";
+import { selectFontAssetForStyle, assetTextWidth, assetLineHeight } from "./font-assets.js";
 import { isDisplayNone } from "./layout-engine.js";
 import { whiteSpaceMode } from "./text-layout.js";
 import { layoutRuns } from "./rich-layout.js";
@@ -34,6 +34,8 @@ function nodeKind(tag) {
         return "list";
     if (tag === "canvas")
         return "canvas";
+    if (tag === "select")
+        return "select";
     return "text";
 }
 function intAttr(value, fallback) {
@@ -725,14 +727,18 @@ export function lowerUIToModel(root, boxes, colorFormat, display, fontAssets = [
                 const rs = runStyleOf(r);
                 const rTextSize = textSizeOf(rs);
                 const rLetterSpacing = letterSpacingOf(rs);
+                const rAssetH = assetLineHeight(rs, fontAssets);
                 return {
                     text: applyTextTransform(r.text, rs) ?? "",
                     hardBreak: r.hardBreak,
                     // Per-glyph asset advance when the run has a custom font, else the
                     // flat 6*textSize + letterSpacing per-char default-font advance.
                     measureText: (s) => assetTextWidth(s, rs, fontAssets) ?? textWidthOfDefault(s, rTextSize, rLetterSpacing),
-                    height: 8 * rTextSize,
-                    ascent: 7 * rTextSize,
+                    // Asset lineHeight when the run has a custom font, else 8*textSize.
+                    // Must match layout-engine.ts's rich-run height (so the baked
+                    // runLines geometry matches the measured box).
+                    height: rAssetH ?? (8 * rTextSize),
+                    ascent: rAssetH ?? (7 * rTextSize),
                 };
             });
             const layout = layoutRuns(layoutInput, { maxWidth: box.w, whiteSpace: node.style.whiteSpace });
@@ -797,7 +803,7 @@ export function lowerUIToModel(root, boxes, colorFormat, display, fontAssets = [
             hasBg,
             textAlign: textAlign(node.style),
             textSize,
-            lineHeight: lineHeightOf(node.style, textSize),
+            lineHeight: assetLineHeight(node.style, fontAssets) ?? lineHeightOf(node.style, textSize),
             letterSpacing: letterSpacingOf(node.style),
             fontAntialias: fontAntialiasOf(node.style, display),
             fontFace: fontFaceOf(node.style, fontAssets),

package/dist/ui-engine/runtime-header/antialiasing.js

@@ -12,10 +12,18 @@ export function emitAntialiasing() {
 // then pushed to the display. The ILI9341 has no efficient SPI read-back, so
 // all blending happens in RAM.
 #ifdef UI_AA
+#include <math.h>  // fabs, floor, ceil, sqrtf for AA coverage math
+
+// AA is only useful on RAM-backed targets. Direct SPI targets have no safe
+// read/modify/write surface for coverage blending; callers still get the
+// regular primitive path instead of an allocation plus many tiny pushes.
+static inline uint8_t ui_aa_target_is_ram() {
+  return !ui_display_is_default_target();
+}
 
 // Get (or allocate) a canvas sized to the element being drawn.
 static inline CuttlefishCanvas16* ui_aa_begin(int16_t w, int16_t h, UI_COLOR_T bg) {
-  if (w <= 0 || h <= 0) return nullptr;
+  if (w <= 0 || h <= 0 || !ui_aa_target_is_ram()) return nullptr;
   if (!__ui_aa_canvas || display_canvasWidth(__ui_aa_canvas) < w || display_canvasHeight(__ui_aa_canvas) < h) {
     display_deleteCanvas(__ui_aa_canvas);
     __ui_aa_canvas = display_createCanvas(w > 0 ? w : 1, h > 0 ? h : 1);
@@ -33,7 +41,7 @@ static inline void ui_aa_push(CuttlefishCanvas16* c, int16_t dx, int16_t dy) {
   // or the display directly when not. Row-by-row drawRGBBitmap (no transparent
   // alpha — the AA canvas already has the blended pixels).
   for (int16_t row = 0; row < h; row++) {
-    ui_display_draw_rgb_bitmap(dx, dy + row, display_canvasBuffer(c) + (int32_t)row * w, w, 1);
+    ui_display_draw_rgb_bitmap(dx, dy + row, display_canvasBuffer(c) + static_cast<int32_t>(row) * w, w, 1);
   }
 }
 
@@ -44,16 +52,16 @@ static inline void ui_aa_pixel(CuttlefishCanvas16* c, int16_t x, int16_t y, UI_C
   if (x < 0 || y < 0 || x >= display_canvasWidth(c) || y >= display_canvasHeight(c)) return;
   if (cov >= 255) { display_targetDrawPixel((CuttlefishDisplayTarget*)c, x, y, color); return; }
   UI_COLOR_T bg = display_canvasGetPixel(c, x, y);
-  uint8_t op = (uint8_t)((uint16_t)cov * 100 / 255);
+  uint8_t op = static_cast<uint8_t>(static_cast<uint16_t>(cov) * 100 / 255);
   display_targetDrawPixel((CuttlefishDisplayTarget*)c, x, y, ui_blend(color, bg, op));
 }
 
 // Xiaolin Wu antialiased line. Coordinates are in canvas-local space.
 static inline void ui_aa_line(CuttlefishCanvas16* c, float x0, float y0, float x1, float y1, UI_COLOR_T color) {
   if (!c || !display_canvasBuffer(c)) return;
-  auto ipart = [](float f) { return (int16_t)f; };
-  auto round_f = [](float f) { return (int16_t)(f + 0.5f); };
-  auto fpart = [](float f) { return f - (float)(int16_t)f; };
+  auto ipart = [](float f) { return static_cast<int16_t>(f); };
+  auto round_f = [](float f) { return static_cast<int16_t>(f + 0.5f); };
+  auto fpart = [](float f) { return f - static_cast<float>(static_cast<int16_t>(f)); };
   auto rfpart = [&](float f) { return 1.0f - fpart(f); };
 
   bool steep = fabs(y1 - y0) > fabs(x1 - x0);
@@ -63,17 +71,29 @@ static inline void ui_aa_line(CuttlefishCanvas16* c, float x0, float y0, float x
   float dx = x1 - x0, dy = y1 - y0;
   float gradient = (dx == 0) ? 1.0f : dy / dx;
 
-  int16_t xpx1 = round_f(x0);
-  float xend = x0 + 0.5f * (xpx1 - x0) * (xpx1 - x0 < 0 ? -1 : 0); // simplified
-  float intery = y0 + gradient * (xpx1 - x0);
+  // Handle first endpoint.
+  float xend = static_cast<float>(round_f(x0));
+  float yend = y0 + gradient * (xend - x0);
+  float xgap = rfpart(x0);
+  int16_t xpx1 = static_cast<int16_t>(xend);
+  int16_t ypx1 = ipart(yend);
+  if (steep) {
+    ui_aa_pixel(c, ypx1, xpx1, color, static_cast<uint8_t>(rfpart(yend) * xgap * 255));
+    ui_aa_pixel(c, ypx1 + 1, xpx1, color, static_cast<uint8_t>(fpart(yend) * xgap * 255));
+  } else {
+    ui_aa_pixel(c, xpx1, ypx1, color, static_cast<uint8_t>(rfpart(yend) * xgap * 255));
+    ui_aa_pixel(c, xpx1, ypx1 + 1, color, static_cast<uint8_t>(fpart(yend) * xgap * 255));
+  }
+  float intery = yend + gradient;
 
-  for (int16_t x = xpx1; x <= ipart(x1); x++) {
+  // Main loop.
+  for (int16_t x = xpx1 + 1; x <= static_cast<int16_t>(round_f(x1)) - 1; x++) {
     if (steep) {
-      ui_aa_pixel(c, ipart(intery), x, color, (uint8_t)(rfpart(intery) * 255));
-      ui_aa_pixel(c, ipart(intery) + 1, x, color, (uint8_t)(fpart(intery) * 255));
+      ui_aa_pixel(c, ipart(intery), x, color, static_cast<uint8_t>(rfpart(intery) * 255));
+      ui_aa_pixel(c, ipart(intery) + 1, x, color, static_cast<uint8_t>(fpart(intery) * 255));
     } else {
-      ui_aa_pixel(c, x, ipart(intery), color, (uint8_t)(rfpart(intery) * 255));
-      ui_aa_pixel(c, x, ipart(intery) + 1, color, (uint8_t)(fpart(intery) * 255));
+      ui_aa_pixel(c, x, ipart(intery), color, static_cast<uint8_t>(rfpart(intery) * 255));
+      ui_aa_pixel(c, x, ipart(intery) + 1, color, static_cast<uint8_t>(fpart(intery) * 255));
     }
     intery += gradient;
   }
@@ -84,24 +104,24 @@ static inline void ui_aa_circle(CuttlefishCanvas16* c, int16_t cx, int16_t cy, f
   if (!c || !display_canvasBuffer(c)) return;
   if (r <= 0) return;
   // Walk each scanline from top to bottom of the bounding box.
-  int16_t y0 = (int16_t)floor(cy - r);
-  int16_t y1 = (int16_t)ceil(cy + r);
+  int16_t y0 = static_cast<int16_t>(floor(cy - r));
+  int16_t y1 = static_cast<int16_t>(ceil(cy + r));
   for (int16_t y = y0; y <= y1; y++) {
-    float dy = (float)y - cy;
+    float dy = static_cast<float>(y) - cy;
     float dx = r * r - dy * dy;
     if (dx < 0) continue;
     float halfW = sqrtf(dx);
-    float leftX = (float)cx - halfW;
-    float rightX = (float)cx + halfW;
+    float leftX = static_cast<float>(cx) - halfW;
+    float rightX = static_cast<float>(cx) + halfW;
     // Left edge: blend two pixels at the coverage split.
-    int16_t lx = (int16_t)floor(leftX);
+    int16_t lx = static_cast<int16_t>(floor(leftX));
     float lfrac = leftX - lx;
-    ui_aa_pixel(c, lx, y, color, (uint8_t)((1.0f - lfrac) * 255));
+    ui_aa_pixel(c, lx, y, color, static_cast<uint8_t>((1.0f - lfrac) * 255));
     ui_aa_pixel(c, lx + 1, y, color, 0);  // interior starts here (drawn solid below)
     // Right edge.
-    int16_t rx = (int16_t)floor(rightX);
+    int16_t rx = static_cast<int16_t>(floor(rightX));
     float rfrac = rightX - rx;
-    ui_aa_pixel(c, rx, y, color, (uint8_t)(rfrac * 255));
+    ui_aa_pixel(c, rx, y, color, static_cast<uint8_t>(rfrac * 255));
     ui_aa_pixel(c, rx + 1, y, color, 0);
     // Solid fill between edges (skip the edge pixels already blended).
     for (int16_t x = lx + 1; x < rx; x++) {
@@ -114,21 +134,21 @@ static inline void ui_aa_circle(CuttlefishCanvas16* c, int16_t cx, int16_t cy, f
 static inline void ui_aa_fill_circle(CuttlefishCanvas16* c, int16_t cx, int16_t cy, float r, UI_COLOR_T color) {
   if (!c || !display_canvasBuffer(c)) return;
   if (r <= 0) return;
-  int16_t y0 = (int16_t)floor(cy - r);
-  int16_t y1 = (int16_t)ceil(cy + r);
+  int16_t y0 = static_cast<int16_t>(floor(cy - r));
+  int16_t y1 = static_cast<int16_t>(ceil(cy + r));
   for (int16_t y = y0; y <= y1; y++) {
-    float dy = (float)y - cy;
+    float dy = static_cast<float>(y) - cy;
     float dx = r * r - dy * dy;
     if (dx < 0) continue;
     float halfW = sqrtf(dx);
-    float leftX = (float)cx - halfW;
-    float rightX = (float)cx + halfW;
-    int16_t lx = (int16_t)floor(leftX);
-    int16_t rx = (int16_t)ceil(rightX);
+    float leftX = static_cast<float>(cx) - halfW;
+    float rightX = static_cast<float>(cx) + halfW;
+    int16_t lx = static_cast<int16_t>(floor(leftX));
+    int16_t rx = static_cast<int16_t>(ceil(rightX));
     // Blend left edge.
-    ui_aa_pixel(c, lx, y, color, (uint8_t)((1.0f - (leftX - lx)) * 255));
+    ui_aa_pixel(c, lx, y, color, static_cast<uint8_t>((1.0f - (leftX - lx)) * 255));
     // Blend right edge.
-    ui_aa_pixel(c, rx, y, color, (uint8_t)((rightX - (rx - 1)) * 255));
+    ui_aa_pixel(c, rx, y, color, static_cast<uint8_t>((rightX - (rx - 1)) * 255));
     // Solid interior.
     for (int16_t x = lx + 1; x < rx; x++) {
       if (x >= 0 && x < display_canvasWidth(c) && y >= 0 && y < display_canvasHeight(c)) display_targetDrawPixel((CuttlefishDisplayTarget*)c, x, y, color);

package/dist/ui-engine/runtime-header/blend-bodies.js

@@ -15,9 +15,9 @@ static inline uint16_t ui_blend565(uint16_t fg, uint16_t bg, uint8_t opacity) {
   // Unpack to 8-bit (5-bit → 8-bit: (v << 3) | (v >> 2)).
   uint16_t fr8 = (fr << 3) | (fr >> 2), fg8 = (fg5 << 2) | (fg5 >> 4), fb8 = (fb << 3) | (fb >> 2);
   uint16_t br8 = (br << 3) | (br >> 2), bg8 = (bg5 << 2) | (bg5 >> 4), bb8 = (bb << 3) | (bb >> 2);
-  uint16_t r = (uint16_t)((fr8 * opacity + br8 * (100 - opacity)) / 100);
-  uint16_t g = (uint16_t)((fg8 * opacity + bg8 * (100 - opacity)) / 100);
-  uint16_t b = (uint16_t)((fb8 * opacity + bb8 * (100 - opacity)) / 100);
+  uint16_t r = static_cast<uint16_t>((fr8 * opacity + br8 * (100 - opacity)) / 100);
+  uint16_t g = static_cast<uint16_t>((fg8 * opacity + bg8 * (100 - opacity)) / 100);
+  uint16_t b = static_cast<uint16_t>((fb8 * opacity + bb8 * (100 - opacity)) / 100);
   return ((r >> 3) << 11) | ((g >> 2) << 5) | (b >> 3);
 }
 
@@ -33,7 +33,7 @@ static inline uint32_t ui_blend888(uint32_t fg, uint32_t bg, uint8_t opacity) {
   uint8_t r = (fr * opacity + br * (100 - opacity)) / 100;
   uint8_t g = (fg8 * opacity + bg8 * (100 - opacity)) / 100;
   uint8_t b = (fb * opacity + bb * (100 - opacity)) / 100;
-  return ((uint32_t)r << 16) | ((uint32_t)g << 8) | b;
+  return (static_cast<uint32_t>(r) << 16) | (static_cast<uint32_t>(g) << 8) | b;
 }
 `;
 }