@typecad/ui 0.1.0-alpha.2 → 1.0.0-alpha.10

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

@@ -14,16 +14,14 @@
 import { lowerUIToModel } from "./model.js";
 import { resolveColor } from "./color.js";
 import { DEFAULT_ALPHA_KEYBOARD, DEFAULT_NUMBER_KEYBOARD } from "./default-keyboards.js";
-import { analyzeScrollMemory } from "./scroll-memory-diagnostics.js";
 import { getListBindings } from "@typecad/cuttlefish/ir/transformers/ui-reactive";
-export function lowerUIToCpp(root, boxes, colorFormat, storage, keyboards = [], rules = [], display, fontAssets = [], allScreens = [], imageAssetIds = new Map(), keyframeSets = [], scrollCanvasBudgetBytes) {
+export function lowerUIToCpp(root, boxes, colorFormat, storage, keyboards = [], rules = [], display, fontAssets = [], allScreens = [], imageAssetIds = new Map(), keyframeSets = []) {
     void storage;
     const model = lowerUIToModel(root, boxes, colorFormat, display, fontAssets, allScreens, imageAssetIds, keyframeSets);
-    const scrollMemoryDiagnostics = analyzeScrollMemory(model.nodes, scrollCanvasBudgetBytes);
     // Tables are mutable RAM (ui_tick updates bg/dirty/elapsed/active each
     // frame), so no PROGMEM/flash storage keyword — those imply read-only.
     const fontTables = emitFontTables(model);
-    const nodeTable = emitNodeTable(model) + "\n" + emitScrollNodeIdLookup(model);
+    const nodeTable = emitNodeTable(model);
     const transitionTable = emitTransitionTable(model);
     const typeDecl = emitTypeDecl(root);
     // Keyboard loaders + dispatch: collect input nodes in tree order, resolve
@@ -63,7 +61,7 @@ export function lowerUIToCpp(root, boxes, colorFormat, storage, keyboards = [],
     const screenCount = model.nodes.length > 0 ? Math.max(...model.nodes.map(n => n.screenId)) + 1 : 1;
     const imageTables = "const UIImage __ui_images[] = {};\nconst uint16_t __ui_image_count = 0;";
     const keyframeTables = emitKeyframeTables(model);
-    return { fontTables, nodeTable, transitionTable, typeDecl, keyboardLoaders, keyboardDispatch, screenCount, imageTables, keyframeTables, scrollMemoryDiagnostics, diagnostics: [] };
+    return { fontTables, nodeTable, transitionTable, typeDecl, keyboardLoaders, keyboardDispatch, screenCount, imageTables, keyframeTables, diagnostics: [] };
 }
 function sanitizedId(id) {
     return id.replace(/[^a-zA-Z0-9_]/g, "_");
@@ -145,7 +143,20 @@ function emitKeyboardLoader(name, kb, rules, colorFormat) {
 }
 /** Emit one key's keys[] + styles[] lines, resolving CSS classes to colors. */
 function emitKeyLine(key, kbClasses, rules, colorFormat) {
-    const chEsc = key.ch === "\\" ? "\\\\" : key.ch === "'" ? "\\'" : key.ch;
+    // The C++ UIKey.ch field is a single `char`. Special keys (shift=1, bs=2,
+    // ok=3, page=4) use the `special` field for their behavior and label — the
+    // `ch` value is never read. Their label strings ("OK", "123", "⇧", "⌫") are
+    // multi-char or multi-byte and would overflow `char` if emitted as literals.
+    // Emit a space placeholder for any key whose ch isn't a single ASCII byte.
+    const isSingleAscii = key.special === 0 && key.ch.length === 1 && key.ch.charCodeAt(0) < 128;
+    if (key.special === 0 && !isSingleAscii) {
+        console.warn(`[cuttlefish] keyboard key ch="${key.ch}" is non-ASCII and will be emitted as ` +
+            `a space placeholder. The native C++ UIKey.ch field is a single char and ` +
+            `cannot hold multi-byte codepoints. Use a custom keyboard layout or the ` +
+            `Adafruit path for full Unicode key labels.`);
+    }
+    const chRaw = isSingleAscii ? key.ch : ' ';
+    const chEsc = chRaw === "\\" ? "\\\\" : chRaw === "'" ? "\\'" : chRaw;
     const style = resolveKeyStyle(key.classes, kbClasses, rules);
     const bg = style.background ? resolveColor(style.background, colorFormat) : DEFAULT_KEY_BG;
     const fg = style.color ? resolveColor(style.color, colorFormat) : DEFAULT_KEY_FG;
@@ -164,6 +175,7 @@ function cppKind(kind) {
         case "img": return "NODE_IMG";
         case "list": return "NODE_LIST";
         case "canvas": return "NODE_CANVAS";
+        case "select": return "NODE_SELECT";
         case "text": return "NODE_TEXT";
     }
 }
@@ -213,24 +225,6 @@ function emitFontTables(model) {
     lines.push(`const uint16_t __ui_font_face_count = ${assets.length};`);
     return lines.join("\n");
 }
-function emitScrollNodeIdLookup(model) {
-    const cases = [];
-    for (const n of model.nodes) {
-        if (!n.scrollable || n.contentHeight <= n.box.h || !n.id)
-            continue;
-        const id = n.id.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
-        cases.push(`  if (idx == ${n.index}) return "${id}";`);
-    }
-    if (cases.length === 0) {
-        return "static inline const char* __ui_scroll_node_id(uint16_t idx) { (void)idx; return nullptr; }";
-    }
-    return [
-        "static inline const char* __ui_scroll_node_id(uint16_t idx) {",
-        ...cases,
-        "  return nullptr;",
-        "}",
-    ].join("\n");
-}
 function emitNodeTable(model) {
     // Map node index → list binding so virtualized nodes carry their count/item/
     // tap function pointers on-node (no UIListBinding side table at runtime).

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

@@ -25,7 +25,6 @@ import { selectEngine } from "./select-engine.js";
 import { measureWithFonts } from "./layout-engine.js";
 import { lowerUIToCpp } from "./ui-lowering.js";
 import { getDisplayProfile } from "@typecad/cuttlefish/stores/display-profile-store";
-import { resolveScrollConfig } from "@typecad/cuttlefish/api/shared";
 import { buildUIFontAssets } from "./font-assets.js";
 import { emitImageTables, loadImageAssets } from "./image-assets.js";
 import { splitUiFile } from "./ui-file-splitter.js";
@@ -145,11 +144,7 @@ export function lowerOnMount(htmlPath, opts) {
     const keyframeSets = buildKeyframeSets(mod.rawKeyframes || [], opts.colorFormat);
     // Load image assets before lowering so imgDataId can be set.
     const imageAssets = loadImageAssets(allStyled.length > 0 ? allStyled : [mod.styled], path.dirname(abs));
-    const scrollBudget = resolveScrollConfig(getDisplayProfile(), { buildTarget: getDisplayProfile()._buildTarget }).scrollCanvasBudgetBytes;
-    const result = lowerUIToCpp(mod.styled, allBoxes, opts.colorFormat, opts.storage, mod.keyboards, mod.rules, getDisplayProfile(), mod.fontAssets, allStyled, imageAssets.nodeIdToAssetIndex, keyframeSets, scrollBudget);
-    for (const d of result.scrollMemoryDiagnostics) {
-        mod.mountDiagnostics.push({ ...d, source: d.source ?? path.basename(mod.htmlPath) });
-    }
+    const result = lowerUIToCpp(mod.styled, allBoxes, opts.colorFormat, opts.storage, mod.keyboards, mod.rules, getDisplayProfile(), mod.fontAssets, allStyled, imageAssets.nodeIdToAssetIndex, keyframeSets);
     // Layout diagnostics: viewport-overflow (node bottom past the viewport) and
     // text-overflow (node right edge past its parent). Both reference the node by
     // a human-label (#id / <tag "text"> / <tag>) so the author can find it in

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typecad/ui",
-  "version": "0.1.0-alpha.2",
+  "version": "1.0.0-alpha.10",
   "description": "TypeCAD UI authoring library — HTML/CSS-driven graphics for microcontrollers",
   "type": "module",
   "main": "./dist/index.js",
@@ -33,7 +33,7 @@
     "src"
   ],
   "peerDependencies": {
-    "@typecad/cuttlefish": "0.1.0-alpha.2"
+    "@typecad/cuttlefish": "1.0.0-alpha.10"
   },
   "dependencies": {
     "css-tree": "^3.2.1",

package/src/engine-index.ts

@@ -19,8 +19,8 @@ import {
 } from "./ui-engine/ui-registry.js";
 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";
 
 export type { TranspilerUIHook };
 
@@ -44,8 +44,8 @@ export function registerTranspilerUI(): TranspilerUIHook {
     resolveColor,
     resolveColorInternal,
     emitRuntimeHeader,
+    emitCuttlefishGfx,
     splitUiFile,
     generateProjectUITypeDeclarations,
-    analyzeScrollMemory,
   };
 }

package/src/preview/host-ui-runtime.ts

@@ -1121,7 +1121,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) faceH = node.lastTextHeight;
       if (textW > faceW) faceW = textW;
@@ -1147,7 +1147,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);
     }
@@ -1157,7 +1157,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;
@@ -1277,20 +1277,26 @@ 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 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),
-      metrics.width + insets.left + insets.right,
-      metrics.height + insets.top + insets.bottom,
+      clearW,
+      clearH,
     );
     this.clearNodePaintRect(node, rect);
   }
@@ -1879,6 +1885,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;
@@ -2343,6 +2352,35 @@ export class PreviewUIRuntime {
     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.
+  private drawSelectNode(node: MutableNode, displayText: string | undefined, bColor: number, fillBg: number, drawY: number, ts: number): void {
+    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);
+  }
+
   private drawCheckNode(node: MutableNode, displayText: string | undefined, drawY: number, ts: number): void {
     const layout = this.textLayout(node, displayText, Math.max(0, node.box.w - 22), ts);
     const clearW = Math.max(node.box.w, node.lastTextWidth);
@@ -2352,7 +2390,11 @@ export class PreviewUIRuntime {
     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;
@@ -2365,7 +2407,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);
   }
 
   private drawRadioNode(node: MutableNode, displayText: string | undefined, drawY: number, ts: number): void {
@@ -2377,14 +2419,16 @@ export class PreviewUIRuntime {
     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);
     } 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);
   }
 
   private drawProgressNode(node: MutableNode, drawY: number): void {
@@ -2790,7 +2834,7 @@ export class PreviewUIRuntime {
       node.value = node.value > 0 ? 0 : 1;
       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);
     } else if (node.tag === "radio") {

package/src/ui-engine/font-assets.ts

@@ -158,6 +158,19 @@ export function assetTextWidth(text: string, style: CSSProperty, fontAssets: UIF
   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: CSSProperty, fontAssets: UIFontAssetModel[]): number | undefined {
+  const asset = selectFontAssetForStyle(fontAssets, style);
+  if (!asset || asset.lineHeight <= 0) return undefined;
+  return asset.lineHeight;
+}
+
 export function buildUIFontAssets(
   root: StyledNode,
   fontFaces: CSSFontFace[],

package/src/ui-engine/layout-engine.ts

@@ -14,7 +14,7 @@
 import { StyledNode } from "./style-resolver.js";
 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";
 import type { UIFontAssetModel } from "./font-assets.js";
 
 export interface Box { x: number; y: number; w: number; h: number; }
@@ -135,12 +135,16 @@ export function measure(node: StyledNode, availableWidth?: number, fontAssets: U
       const rs = { ...node.style, ...r.style } as typeof node.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: string) => 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 });
@@ -149,7 +153,13 @@ export function measure(node: StyledNode, availableWidth?: number, fontAssets: U
   // 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.
@@ -199,10 +209,13 @@ export function measure(node: StyledNode, availableWidth?: number, fontAssets: U
     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 as any).imgWidth ?? 32, h: (node as any).imgHeight ?? 32 };

package/src/ui-engine/model.ts

@@ -4,7 +4,7 @@ import { deriveCapabilities } from "@typecad/cuttlefish/api/shared";
 import { resolveColorInternal } from "./color.js";
 import { parseAnimation, type CSSProperty } from "./css-parser.js";
 import type { UIFontAssetModel } from "./font-assets.js";
-import { selectFontAssetForStyle, assetTextWidth } from "./font-assets.js";
+import { selectFontAssetForStyle, assetTextWidth, assetLineHeight } from "./font-assets.js";
 import type { UIImageAsset } from "./image-assets.js";
 import { isDisplayNone, type Box } from "./layout-engine.js";
 import type { StyledNode } from "./style-resolver.js";
@@ -21,7 +21,7 @@ export {
   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 {
@@ -264,6 +264,7 @@ function nodeKind(tag: string): UINodeKindModel {
   if (tag === "img") return "img";
   if (tag === "list") return "list";
   if (tag === "canvas") return "canvas";
+  if (tag === "select") return "select";
   return "text";
 }
 
@@ -953,6 +954,7 @@ export function lowerUIToModel(
         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,
@@ -960,8 +962,11 @@ export function lowerUIToModel(
           // flat 6*textSize + letterSpacing per-char default-font advance.
           measureText: (s: string) =>
             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 });
@@ -1029,7 +1034,7 @@ export function lowerUIToModel(
       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/src/ui-engine/runtime-header/antialiasing.ts

@@ -12,10 +12,18 @@ export function emitAntialiasing(): string {
 // 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/src/ui-engine/runtime-header/blend-bodies.ts

@@ -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;
 }
 `;
 }