@typecad/ui 1.0.0-alpha.13 → 1.0.0-alpha.15

package/dist/cli.js

@@ -7,25 +7,28 @@
 //   npx @typecad/ui --version   Show the installed version
 // ---------------------------------------------------------------------------
 import { runIntegrationWizard } from "./wizard/integration-wizard.js";
-const USAGE = `
-@typecad/ui — HTML/CSS-driven graphics for microcontrollers
-
-Usage:
-  npx @typecad/ui --config        Configure a display (+ touch) for your
-                                  cuttlefish project interactively. Writes the
-                                  \`display\` section of cuttlefish.config.ts.
-
-Options:
-  --config            Run the integration wizard
-  --help, -h          Show this help
-  --version, -v       Print the installed @typecad/ui version
-
-The wizard asks which display module you are using (ILI9341 / ST7796S SPI TFT,
-SSD1309 I2C OLED, desktop simulator, or custom), then walks through bus pins,
-SPI/I2C speed, rotation, and touch controller wiring with hardware-aware
-defaults. It never touches the rest of your cuttlefish.config.ts.
-
-Docs: https://github.com/justind000/typecode/tree/main/packages/ui
+const USAGE = `
+@typecad/ui — HTML/CSS-driven graphics for microcontrollers
+
+Usage:
+  npx @typecad/ui --config        Configure a display (+ touch) for your
+                                  cuttlefish project interactively. Writes the
+                                  \`display\` section of cuttlefish.config.ts
+                                  and a \`preview\` npm script.
+
+Options:
+  --config            Run the integration wizard
+  --help, -h          Show this help
+  --version, -v       Print the installed @typecad/ui version
+
+The wizard asks which display module you are using (ILI9341 / ST7796S SPI TFT,
+SSD1309 I2C OLED, desktop simulator, or custom), then walks through bus pins,
+SPI/I2C speed, rotation, and touch controller wiring with hardware-aware
+defaults. It never touches the rest of your cuttlefish.config.ts, and adds a
+\`preview\` script to package.json so the desktop preview renderer starts with
+\`npm run preview\`.
+
+Docs: https://github.com/justind000/typecode/tree/main/packages/ui
 `.trim();
 function printUsage() {
     console.log(USAGE);

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

@@ -609,7 +609,6 @@ export class PreviewUIRuntime {
         return a.index - b.index;
     }
     navigate(screenIdx) {
-        this.onDiagnostics?.(`NAV -> screen ${screenIdx}`);
         const next = Math.trunc(Number(screenIdx));
         if (!Number.isFinite(next) || next < 0 || next >= this.screenCount || next === this.activeScreen)
             return;

package/dist/ui-engine/model.js

@@ -78,10 +78,16 @@ function borderStyle(style) {
     return 0;
 }
 function borderWidthOf(style) {
+    // A none-style border renders nothing and must consume no space either:
+    // the draw path subtracts borderWidth*2 from the text max width, so a
+    // residual UA width on a borderless kit button wrapped its last glyph
+    // ("Primar" / "y"). Style none wins over any declared width.
+    if (borderStyle(style) === 0)
+        return 0;
     const px = cssPx(style.borderWidth);
     if (px > 0)
         return Math.max(1, Math.min(8, px));
-    return borderStyle(style) === 0 ? 0 : 1;
+    return 1;
 }
 /** Per-side border width: the per-side field wins when set, else falls back to
  *  the uniform borderWidth. Used for border-left/top/right/bottom support. */

package/dist/ui-engine/runtime-header/canvas-scrollbar.js

@@ -2,120 +2,120 @@
 // Canvas push/draw helpers, buffered scroll canvas push, scrollbar direct.
 // See docs/superpowers/specs/2026-07-12-split-runtime-header-design.md.
 export function emitCanvasScrollbar() {
-    return `
-static inline void ui_push_canvas_rect(CuttlefishCanvas16* canvas, int16_t x, int16_t y, int16_t w, int16_t h) {
-  if (!canvas || !display_canvasBuffer(canvas)) return;
-  UI_COLOR_T* pixels = display_canvasBuffer(canvas);
-  int16_t stride = display_canvasWidth(canvas);
-  // The canvas is viewport-sized: buffer row 0 = the first row of the viewport.
-  // The display destination is (x, y) but the source buffer starts at (0, 0).
-  // When a full-screen framebuffer is the active draw target, composite into it
-  // via __ui_gfx (so the single bulk push at frame end captures everything).
-  // Otherwise write straight to the display in one SPI transaction.
-  if (__ui_fb) {
-    // The framebuffer is the composition target. Track this publish so a
-    // geometry repair or scroll-canvas repair that does not leave a node dirty
-    // still reaches the panel during the frame-end flush.
-    ui_fb_add_rect(x, y, w, h);
-    if (w == stride) {
-      ui_display_draw_rgb_bitmap(x, y, pixels, w, h);
-      return;
-    }
-    for (int16_t row = 0; row < h; row++) {
-      ui_display_draw_rgb_bitmap(x, y + row, pixels + static_cast<int32_t>(row) * stride, w, 1);
-    }
-    return;
-  }
-  display_startWrite();
-  display_setAddrWindow(x, y, w, h);
-  if (w == stride) {
-    // Full-width: contiguous in buffer, single write.
-    display_writePixels(pixels, static_cast<uint32_t>(w) * h);
-    display_endWrite();
-    return;
-  }
-  for (int16_t row = 0; row < h; row++) {
-    display_writePixels(pixels + static_cast<int32_t>(row) * stride, w);
-  }
-  display_endWrite();
-}
-
-static inline void ui_draw_canvas_rect(CuttlefishCanvas16* canvas, int16_t x, int16_t y, int16_t w, int16_t h) {
-  if (!canvas || !display_canvasBuffer(canvas)) return;
-  UI_COLOR_T* pixels = display_canvasBuffer(canvas);
-  int16_t stride = display_canvasWidth(canvas);
-  if (w == stride && h == display_canvasHeight(canvas)) {
-    ui_display_draw_rgb_bitmap(x, y, pixels, w, h);
-    return;
-  }
-  for (int16_t row = 0; row < h; row++) {
-    ui_display_draw_rgb_bitmap(x, y + row, pixels + static_cast<int32_t>(row) * stride, w, 1);
-  }
-}
-
-static inline void ui_push_buffered_scroll_canvas(CuttlefishCanvas16* bufferedScrollCanvas,
-                                                  CuttlefishCanvas16* bufferedScrollRepaintCanvas,
-                                                  int16_t bufferedScrollNode,
-                                                  int16_t bufferedScrollVX,
-                                                  int16_t bufferedScrollVY,
-                                                  int16_t bufferedScrollRepaintY,
-                                                  int16_t bufferedScrollRepaintH,
-                                                  CuttlefishDisplayTarget* drawTarget) {
-  if (bufferedScrollNode < 0 || !bufferedScrollCanvas || !display_canvasBuffer(bufferedScrollCanvas)) return;
-  // Draw scrollbar into the canvas (canvas-local coords: 0,0 = viewport top-left).
-  ui_display_set_target(bufferedScrollCanvas);
-  int16_t si = bufferedScrollNode;
-  int16_t vw = __ui_nodes[si].box.w;
-  int16_t vh = __ui_nodes[si].box.h;
-  if (bufferedScrollRepaintCanvas && bufferedScrollRepaintH > 0) {
-    ui_draw_canvas_rect(bufferedScrollRepaintCanvas, 0, bufferedScrollRepaintY, vw, bufferedScrollRepaintH);
-  }
-  int16_t tx = vw - 4;
-  uint16_t thumbH = static_cast<uint32_t>(vh) * vh / __ui_nodes[si].contentHeight;
-  if (thumbH < 8) thumbH = 8;
-  // Clamp to vh so (vh - thumbH) below can't underflow on a degenerate sub-8px
-  // viewport (which would cast a negative value to a huge uint32_t and place the
-  // thumb off-screen). Matches the guard in ui_render_scroll_bands.
-  if (thumbH > static_cast<uint16_t>(vh)) thumbH = static_cast<uint16_t>(vh);
-  int16_t maxScroll = __ui_nodes[si].contentHeight - vh;
-  uint16_t thumbY = static_cast<uint32_t>(vh - thumbH) * __ui_nodes[si].scrollY / (maxScroll > 0 ? maxScroll : 1);
-  UI_COLOR_T dimFg = (UI_COLOR_T)((__ui_nodes[si].fg >> 1) & UI_DIM_MASK);
-  // Track covers the FULL reserved gutter (4px) so child decorations that
-  // poke past the content area (e.g. outset shadows, offset up to +6px)
-  // can't leave 1px ticks in the uncovered edge column. Thumb stays 3px.
-  ui_display_fill_rect(tx, 0, 4, vh, dimFg);
-  ui_display_fill_rect(tx, thumbY, 3, thumbH, __ui_nodes[si].fg);
-  // Record the scrollY this canvas now reflects, so the next scroll frame can
-  // compute its shift delta (Mode B) from scrollY - lastPaintedScrollY.
-  __ui_nodes[si].lastPaintedScrollY = __ui_nodes[si].scrollY;
-  // Push the canvas to the draw target at the viewport position (the
-  // framebuffer when active, else the display directly).
-  ui_display_set_target(drawTarget);
-  ui_push_canvas_rect(bufferedScrollCanvas,
-    bufferedScrollVX, bufferedScrollVY,
-    vw, vh);
-}
-
-// Draw a scroll container's scrollbar directly on the display (Mode C).
-static inline void ui_draw_scrollbar_direct(int16_t si, int16_t vox, int16_t voy) {
-  if (si < 0 || si >= static_cast<int16_t>(__ui_node_count)) return;
-  int16_t vw = __ui_nodes[si].box.w;
-  int16_t vh = __ui_nodes[si].box.h;
-  if (__ui_nodes[si].contentHeight <= vh) return;
-  int16_t tx = vox + vw - 4;
-  uint16_t thumbH = static_cast<uint32_t>(vh) * vh / __ui_nodes[si].contentHeight;
-  if (thumbH < 8) thumbH = 8;
-  // Clamp to vh so (vh - thumbH) below can't underflow on a degenerate sub-8px
-  // viewport (which would cast a negative value to a huge uint32_t and place the
-  // thumb off-screen). Matches the guard in ui_render_scroll_bands.
-  if (thumbH > static_cast<uint16_t>(vh)) thumbH = static_cast<uint16_t>(vh);
-  int16_t maxScroll = __ui_nodes[si].contentHeight - vh;
-  uint16_t thumbY = static_cast<uint32_t>(vh - thumbH) * __ui_nodes[si].scrollY / (maxScroll > 0 ? maxScroll : 1);
-  UI_COLOR_T dimFg = (UI_COLOR_T)((__ui_nodes[si].fg >> 1) & UI_DIM_MASK);
-  // Full 4px gutter track (see the Mode B variant above).
-  ui_display_fill_rect(tx, voy, 4, vh, dimFg);
-  ui_display_fill_rect(tx, static_cast<int16_t>(voy + thumbY), 3, thumbH, __ui_nodes[si].fg);
-}
-
+    return `
+static inline void ui_push_canvas_rect(CuttlefishCanvas16* canvas, int16_t x, int16_t y, int16_t w, int16_t h) {
+  if (!canvas || !display_canvasBuffer(canvas)) return;
+  UI_COLOR_T* pixels = display_canvasBuffer(canvas);
+  int16_t stride = display_canvasWidth(canvas);
+  // The canvas is viewport-sized: buffer row 0 = the first row of the viewport.
+  // The display destination is (x, y) but the source buffer starts at (0, 0).
+  // When a full-screen framebuffer is the active draw target, composite into it
+  // via __ui_gfx (so the single bulk push at frame end captures everything).
+  // Otherwise write straight to the display in one SPI transaction.
+  if (__ui_fb) {
+    // The framebuffer is the composition target. Track this publish so a
+    // geometry repair or scroll-canvas repair that does not leave a node dirty
+    // still reaches the panel during the frame-end flush.
+    ui_fb_add_rect(x, y, w, h);
+    if (w == stride) {
+      ui_display_draw_rgb_bitmap(x, y, pixels, w, h);
+      return;
+    }
+    for (int16_t row = 0; row < h; row++) {
+      ui_display_draw_rgb_bitmap(x, y + row, pixels + static_cast<int32_t>(row) * stride, w, 1);
+    }
+    return;
+  }
+  display_startWrite();
+  display_setAddrWindow(x, y, w, h);
+  if (w == stride) {
+    // Full-width: contiguous in buffer, single write.
+    display_writePixels(pixels, static_cast<uint32_t>(w) * h);
+    display_endWrite();
+    return;
+  }
+  for (int16_t row = 0; row < h; row++) {
+    display_writePixels(pixels + static_cast<int32_t>(row) * stride, w);
+  }
+  display_endWrite();
+}
+
+static inline void ui_draw_canvas_rect(CuttlefishCanvas16* canvas, int16_t x, int16_t y, int16_t w, int16_t h) {
+  if (!canvas || !display_canvasBuffer(canvas)) return;
+  UI_COLOR_T* pixels = display_canvasBuffer(canvas);
+  int16_t stride = display_canvasWidth(canvas);
+  if (w == stride && h == display_canvasHeight(canvas)) {
+    ui_display_draw_rgb_bitmap(x, y, pixels, w, h);
+    return;
+  }
+  for (int16_t row = 0; row < h; row++) {
+    ui_display_draw_rgb_bitmap(x, y + row, pixels + static_cast<int32_t>(row) * stride, w, 1);
+  }
+}
+
+static inline void ui_push_buffered_scroll_canvas(CuttlefishCanvas16* bufferedScrollCanvas,
+                                                  CuttlefishCanvas16* bufferedScrollRepaintCanvas,
+                                                  int16_t bufferedScrollNode,
+                                                  int16_t bufferedScrollVX,
+                                                  int16_t bufferedScrollVY,
+                                                  int16_t bufferedScrollRepaintY,
+                                                  int16_t bufferedScrollRepaintH,
+                                                  CuttlefishDisplayTarget* drawTarget) {
+  if (bufferedScrollNode < 0 || !bufferedScrollCanvas || !display_canvasBuffer(bufferedScrollCanvas)) return;
+  // Draw scrollbar into the canvas (canvas-local coords: 0,0 = viewport top-left).
+  ui_display_set_target(bufferedScrollCanvas);
+  int16_t si = bufferedScrollNode;
+  int16_t vw = __ui_nodes[si].box.w;
+  int16_t vh = __ui_nodes[si].box.h;
+  if (bufferedScrollRepaintCanvas && bufferedScrollRepaintH > 0) {
+    ui_draw_canvas_rect(bufferedScrollRepaintCanvas, 0, bufferedScrollRepaintY, vw, bufferedScrollRepaintH);
+  }
+  int16_t tx = vw - 4;
+  uint16_t thumbH = static_cast<uint32_t>(vh) * vh / __ui_nodes[si].contentHeight;
+  if (thumbH < 8) thumbH = 8;
+  // Clamp to vh so (vh - thumbH) below can't underflow on a degenerate sub-8px
+  // viewport (which would cast a negative value to a huge uint32_t and place the
+  // thumb off-screen). Matches the guard in ui_render_scroll_bands.
+  if (thumbH > static_cast<uint16_t>(vh)) thumbH = static_cast<uint16_t>(vh);
+  int16_t maxScroll = __ui_nodes[si].contentHeight - vh;
+  uint16_t thumbY = static_cast<uint32_t>(vh - thumbH) * __ui_nodes[si].scrollY / (maxScroll > 0 ? maxScroll : 1);
+  UI_COLOR_T dimFg = (UI_COLOR_T)((__ui_nodes[si].fg >> 1) & UI_DIM_MASK);
+  // Track covers the FULL reserved gutter (4px) so child decorations that
+  // poke past the content area (e.g. outset shadows, offset up to +6px)
+  // can't leave 1px ticks in the uncovered edge column. Thumb stays 3px.
+  ui_display_fill_rect(tx, 0, 4, vh, dimFg);
+  ui_display_fill_rect(tx, thumbY, 3, thumbH, __ui_nodes[si].fg);
+  // Record the scrollY this canvas now reflects, so the next scroll frame can
+  // compute its shift delta (Mode B) from scrollY - lastPaintedScrollY.
+  __ui_nodes[si].lastPaintedScrollY = __ui_nodes[si].scrollY;
+  // Push the canvas to the draw target at the viewport position (the
+  // framebuffer when active, else the display directly).
+  ui_display_set_target(drawTarget);
+  ui_push_canvas_rect(bufferedScrollCanvas,
+    bufferedScrollVX, bufferedScrollVY,
+    vw, vh);
+}
+
+// Draw a scroll container's scrollbar directly on the display (Mode C).
+static inline void ui_draw_scrollbar_direct(int16_t si, int16_t vox, int16_t voy) {
+  if (si < 0 || si >= static_cast<int16_t>(__ui_node_count)) return;
+  int16_t vw = __ui_nodes[si].box.w;
+  int16_t vh = __ui_nodes[si].box.h;
+  if (__ui_nodes[si].contentHeight <= vh) return;
+  int16_t tx = vox + vw - 4;
+  uint16_t thumbH = static_cast<uint32_t>(vh) * vh / __ui_nodes[si].contentHeight;
+  if (thumbH < 8) thumbH = 8;
+  // Clamp to vh so (vh - thumbH) below can't underflow on a degenerate sub-8px
+  // viewport (which would cast a negative value to a huge uint32_t and place the
+  // thumb off-screen). Matches the guard in ui_render_scroll_bands.
+  if (thumbH > static_cast<uint16_t>(vh)) thumbH = static_cast<uint16_t>(vh);
+  int16_t maxScroll = __ui_nodes[si].contentHeight - vh;
+  uint16_t thumbY = static_cast<uint32_t>(vh - thumbH) * __ui_nodes[si].scrollY / (maxScroll > 0 ? maxScroll : 1);
+  UI_COLOR_T dimFg = (UI_COLOR_T)((__ui_nodes[si].fg >> 1) & UI_DIM_MASK);
+  // Full 4px gutter track (see the Mode B variant above).
+  ui_display_fill_rect(tx, voy, 4, vh, dimFg);
+  ui_display_fill_rect(tx, static_cast<int16_t>(voy + thumbY), 3, thumbH, __ui_nodes[si].fg);
+}
+
 // Per-node dirty marker (called by press handlers and binding evaluation).`;
 }