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

package/src/cli.ts

@@ -1,87 +1,90 @@
-#!/usr/bin/env node
-// ---------------------------------------------------------------------------
-// @typecad/ui CLI — display integration wizard.
-//
-//   npx @typecad/ui --config    Run the interactive integration wizard
-//   npx @typecad/ui --help      Show usage
-//   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
-`.trim();
-
-function printUsage(): void {
-  console.log(USAGE);
-}
-
-async function main(argv: string[]): Promise<number> {
-  const args = argv.slice(2);
-
-  if (args.includes("--help") || args.includes("-h")) {
-    printUsage();
-    return 0;
-  }
-
-  if (args.includes("--version") || args.includes("-v")) {
-    // Lazily read the version so importing this module stays side-effect free.
-    const { readFile } = await import("node:fs/promises");
-    const { fileURLToPath } = await import("node:url");
-    const { dirname, join } = await import("node:path");
-    try {
-      const packageJson = JSON.parse(
-        await readFile(join(dirname(dirname(fileURLToPath(import.meta.url))), "package.json"), "utf-8"),
-      ) as { version?: string };
-      console.log(packageJson.version ?? "unknown");
-      return 0;
-    } catch {
-      console.log("unknown");
-      return 0;
-    }
-  }
-
-  if (args.length === 0 || (args.length === 1 && (args[0] === "--config" || args[0] === "config"))) {
-    if (!process.stdin.isTTY) {
-      console.error("The integration wizard is interactive and needs a terminal.");
-      console.error("Run `npx @typecad/ui --config` from your project directory, or configure");
-      console.error("the `display` section of cuttlefish.config.ts manually:");
-      console.error("https://github.com/justind000/typecode/tree/main/packages/ui#display-configuration");
-      return 1;
-    }
-    const result = await runIntegrationWizard(process.cwd());
-    return result.exitCode;
-  }
-
-  console.error(`Unknown option${args.length > 1 ? "s" : ""}: ${args.join(" ")}\n`);
-  printUsage();
-  return 2;
-}
-
-main(process.argv).then(
-  (code) => {
-    process.exitCode = code;
-  },
-  (error) => {
-    console.error(error instanceof Error ? error.message : error);
-    process.exitCode = 1;
-  },
-);
+#!/usr/bin/env node
+// ---------------------------------------------------------------------------
+// @typecad/ui CLI — display integration wizard.
+//
+//   npx @typecad/ui --config    Run the interactive integration wizard
+//   npx @typecad/ui --help      Show usage
+//   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
+                                  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(): void {
+  console.log(USAGE);
+}
+
+async function main(argv: string[]): Promise<number> {
+  const args = argv.slice(2);
+
+  if (args.includes("--help") || args.includes("-h")) {
+    printUsage();
+    return 0;
+  }
+
+  if (args.includes("--version") || args.includes("-v")) {
+    // Lazily read the version so importing this module stays side-effect free.
+    const { readFile } = await import("node:fs/promises");
+    const { fileURLToPath } = await import("node:url");
+    const { dirname, join } = await import("node:path");
+    try {
+      const packageJson = JSON.parse(
+        await readFile(join(dirname(dirname(fileURLToPath(import.meta.url))), "package.json"), "utf-8"),
+      ) as { version?: string };
+      console.log(packageJson.version ?? "unknown");
+      return 0;
+    } catch {
+      console.log("unknown");
+      return 0;
+    }
+  }
+
+  if (args.length === 0 || (args.length === 1 && (args[0] === "--config" || args[0] === "config"))) {
+    if (!process.stdin.isTTY) {
+      console.error("The integration wizard is interactive and needs a terminal.");
+      console.error("Run `npx @typecad/ui --config` from your project directory, or configure");
+      console.error("the `display` section of cuttlefish.config.ts manually:");
+      console.error("https://github.com/justind000/typecode/tree/main/packages/ui#display-configuration");
+      return 1;
+    }
+    const result = await runIntegrationWizard(process.cwd());
+    return result.exitCode;
+  }
+
+  console.error(`Unknown option${args.length > 1 ? "s" : ""}: ${args.join(" ")}\n`);
+  printUsage();
+  return 2;
+}
+
+main(process.argv).then(
+  (code) => {
+    process.exitCode = code;
+  },
+  (error) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exitCode = 1;
+  },
+);

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

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

package/src/ui-engine/model.ts

@@ -322,9 +322,14 @@ function borderStyle(style: CSSProperty): 0 | 1 | 2 {
 }
 
 function borderWidthOf(style: CSSProperty): number {
+  // 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

package/src/ui-engine/runtime-header/node-draw-body.ts

@@ -1237,10 +1237,16 @@ static inline uint8_t ui_render_screen_bands(int16_t rx, int16_t ry, int16_t rw,
       int16_t origBoxH = __ui_nodes[c].box.h;
       __ui_nodes[c].box.x = static_cast<int16_t>(origBoxX - rx);
       __ui_nodes[c].box.y = static_cast<int16_t>(origBoxY - ry - bandTop);
-      // Clamp the face to the scroll viewport (band-local coords). The
-      // shifted box/draw geometry stays within the candidate's clip bounds;
-      // text wrapping and layout metrics shrink with the box. Fully clipped
-      // faces drop out here.
+      // Clamp the face to the scroll viewport (band-local DRAW coords). The
+      // clamp must operate on the node's DRAW position — box.y is
+      // content-local and the ancestor scroll is subtracted later, inside
+      // ui_draw_y_for_node, so comparing box.y against display-space clip
+      // bounds passed scrolled content whose CONTENT coordinate numerically
+      // fell inside the viewport: a button scrolled up past the viewport top
+      // painted over the header, and the smearing stuck (nothing repaints
+      // the header afterwards). Clamp the draw position and shift the box by
+      // the delta; text wrapping and layout metrics shrink with the box.
+      // Fully clipped faces drop out here.
       {
         // int32 math: the unclipped sentinels are ±32767 and the band-local
         // conversion subtracts region/band offsets — int16 arithmetic wraps
@@ -1251,29 +1257,25 @@ static inline uint8_t ui_render_screen_bands(int16_t rx, int16_t ry, int16_t rw,
         int32_t clipBotL = static_cast<int32_t>(__ui_scroll_candidates[ci].clipBottom) - ry - bandTop;
         int32_t clipLeftL = static_cast<int32_t>(__ui_scroll_candidates[ci].clipLeft) - rx;
         int32_t clipRightL = static_cast<int32_t>(__ui_scroll_candidates[ci].clipRight) - rx;
-        int16_t boxY0 = __ui_nodes[c].box.y;
-        if (boxY0 < clipTopL) {
-          __ui_nodes[c].box.y = static_cast<int16_t>(clipTopL);
-          __ui_nodes[c].box.h = static_cast<int16_t>(__ui_nodes[c].box.h - (clipTopL - boxY0));
-        }
-        if (static_cast<int32_t>(__ui_nodes[c].box.y) + __ui_nodes[c].box.h > clipBotL) {
-          __ui_nodes[c].box.h = static_cast<int16_t>(clipBotL - __ui_nodes[c].box.y);
-        }
-        int16_t boxX0 = __ui_nodes[c].box.x;
-        if (boxX0 < clipLeftL) {
-          __ui_nodes[c].box.x = static_cast<int16_t>(clipLeftL);
-          __ui_nodes[c].box.w = static_cast<int16_t>(__ui_nodes[c].box.w - (clipLeftL - boxX0));
-        }
-        if (static_cast<int32_t>(__ui_nodes[c].box.x) + __ui_nodes[c].box.w > clipRightL) {
-          __ui_nodes[c].box.w = static_cast<int16_t>(clipRightL - __ui_nodes[c].box.x);
-        }
-        if (__ui_nodes[c].box.w <= 0 || __ui_nodes[c].box.h <= 0) {
+        int16_t dispY0 = ui_draw_y_for_node(c);
+        int16_t dispX0 = ui_draw_x_for_node(c);
+        int32_t y0 = dispY0 < clipTopL ? clipTopL : dispY0;
+        int32_t y1 = static_cast<int32_t>(dispY0) + __ui_nodes[c].box.h > clipBotL ? clipBotL : static_cast<int32_t>(dispY0) + __ui_nodes[c].box.h;
+        int32_t x0 = dispX0 < clipLeftL ? clipLeftL : dispX0;
+        int32_t x1 = static_cast<int32_t>(dispX0) + __ui_nodes[c].box.w > clipRightL ? clipRightL : static_cast<int32_t>(dispX0) + __ui_nodes[c].box.w;
+        if (x1 - x0 <= 0 || y1 - y0 <= 0) {
           __ui_nodes[c].box.x = origBoxX;
           __ui_nodes[c].box.y = origBoxY;
           __ui_nodes[c].box.w = origBoxW;
           __ui_nodes[c].box.h = origBoxH;
           continue;
         }
+        // box.y/box.x already carry the band shift; add the clamp delta on
+        // top (y0 - dispY0 is 0 when unclipped, preserving the shift).
+        __ui_nodes[c].box.y = static_cast<int16_t>(__ui_nodes[c].box.y + (y0 - dispY0));
+        __ui_nodes[c].box.h = static_cast<int16_t>(y1 - y0);
+        __ui_nodes[c].box.x = static_cast<int16_t>(__ui_nodes[c].box.x + (x0 - dispX0));
+        __ui_nodes[c].box.w = static_cast<int16_t>(x1 - x0);
       }
       int16_t baseDrawX = ui_base_draw_x_for_node(c);
       int16_t baseDrawY = ui_base_draw_y_for_node(c);

package/src/ui-engine/shadcn-kit.ts

@@ -136,6 +136,10 @@ export const SHADCN_KIT_CSS = `/* ----------------------------------------------
   padding: 10px 16px;
   font-weight: bold;
   transition: background 80ms;
+  /* Reset the UA's browser-default button border (shadcn's button reset):
+     ghost must be truly borderless — variants that want one (outline)
+     re-declare it themselves. */
+  border: none;
 }
 .btn:pressed { transform: translateY(1px); }
 .btn-primary { background: var(--primary); color: var(--primary-foreground); }

package/src/wizard/index.ts

@@ -1,38 +1,46 @@
-// ---------------------------------------------------------------------------
-// Public surface of the @typecad/ui integration wizard (`npx @typecad/ui
-// --config`). Pure helpers (catalog, rendering, config splicing, starter
-// template) are exported for tests and tooling; the interactive flow lives in
-// integration-wizard.ts.
-// ---------------------------------------------------------------------------
-
-export {
-  DISPLAY_CATALOG,
-  TOUCH_CATALOG,
-  findPinConflicts,
-} from "./display-catalog.js";
-export type {
-  DisplayCatalogEntry,
-  TouchCatalogEntry,
-  WizardBus,
-  WizardTouchKind,
-} from "./display-catalog.js";
-
-export {
-  findCuttlefishConfig,
-  findSyntaxError,
-  readConfigSection,
-  readEntryPath,
-  renderDisplayBody,
-  renderDisplayProperty,
-  upsertDisplaySection,
-} from "./config-writer.js";
-export type {
-  ConfigRecord,
-  RenderDisplayOptions,
-  UpsertDisplayResult,
-} from "./config-writer.js";
-
-export { renderStarterUi } from "./starter-ui.js";
-
-export { runIntegrationWizard } from "./integration-wizard.js";
-export type { WizardRunResult, WizardStreams } from "./integration-wizard.js";
+// ---------------------------------------------------------------------------
+// Public surface of the @typecad/ui integration wizard (`npx @typecad/ui
+// --config`). Pure helpers (catalog, rendering, config splicing, starter
+// template) are exported for tests and tooling; the interactive flow lives in
+// integration-wizard.ts.
+// ---------------------------------------------------------------------------
+
+export {
+  DISPLAY_CATALOG,
+  TOUCH_CATALOG,
+  findPinConflicts,
+} from "./display-catalog.js";
+export type {
+  DisplayCatalogEntry,
+  TouchCatalogEntry,
+  WizardBus,
+  WizardTouchKind,
+} from "./display-catalog.js";
+
+export {
+  findCuttlefishConfig,
+  findSyntaxError,
+  readConfigSection,
+  readEntryPath,
+  renderDisplayBody,
+  renderDisplayProperty,
+  upsertDisplaySection,
+} from "./config-writer.js";
+export type {
+  ConfigRecord,
+  RenderDisplayOptions,
+  UpsertDisplayResult,
+} from "./config-writer.js";
+
+export {
+  findPackageJson,
+  previewScriptCommand,
+  readPackageScript,
+  upsertPackageScript,
+} from "./package-writer.js";
+export type { UpsertScriptResult } from "./package-writer.js";
+
+export { renderStarterUi } from "./starter-ui.js";
+
+export { runIntegrationWizard } from "./integration-wizard.js";
+export type { WizardRunResult, WizardStreams } from "./integration-wizard.js";