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

package/dist/wizard/starter-ui.js

@@ -0,0 +1,56 @@
+// ---------------------------------------------------------------------------
+// Starter .ui file emitted by the integration wizard when the config's entry
+// file does not exist yet. Uses only README-documented syntax: the Svelte-
+// style single-file component shape, ui.mount(screen), a ui.signal, an
+// on:click handler, and {signal} interpolation in the template.
+// ---------------------------------------------------------------------------
+export function renderStarterUi(displayWidth = 320, displayHeight = 240) {
+    // Keep text sizes sane on small mono panels (128×64 OLEDs).
+    const compact = displayWidth <= 160 || displayHeight <= 160;
+    const titleSize = compact ? 12 : 22;
+    const countSize = compact ? 10 : 16;
+    const buttonSize = compact ? 10 : 16;
+    return [
+        "<script>",
+        "  // Starter screen generated by `npx @typecad/ui --config`.",
+        "  // Edit freely — this is ordinary cuttlefish source, not generated output.",
+        "",
+        "  import { ui } from '@typecad/ui';",
+        "",
+        "  ui.mount(screen);",
+        "",
+        "  export const taps = ui.signal(0);",
+        "",
+        "  export function onTap() {",
+        "    taps.set(taps() + 1);",
+        "  }",
+        "</script>",
+        "",
+        "<style>",
+        "  screen {",
+        "    background: #101418;",
+        "    display: flex;",
+        "    flex-direction: column;",
+        "    align-items: center;",
+        "    justify-content: center;",
+        "    gap: 16px;",
+        "  }",
+        `  #title { color: #e8eef2; font-size: ${titleSize}px; }`,
+        `  #count { color: #38bdf8; font-size: ${countSize}px; }`,
+        "  #tap {",
+        `    padding: 10px 24px;`,
+        "    border-radius: 8px;",
+        "    background: #1f6feb;",
+        "    color: #ffffff;",
+        `    font-size: ${buttonSize}px;`,
+        "  }",
+        "</style>",
+        "",
+        "<screen>",
+        "  <text id=\"title\">@typecad/ui is running</text>",
+        "  <text id=\"count\">taps: {taps}</text>",
+        "  <button id=\"tap\" on:click={onTap}>Tap me</button>",
+        "</screen>",
+        "",
+    ].join("\n");
+}

package/package.json

@@ -1,10 +1,13 @@
 {
   "name": "@typecad/ui",
-  "version": "1.0.0-alpha.11",
+  "version": "1.0.0-alpha.13",
   "description": "TypeCAD UI authoring library — HTML/CSS-driven graphics for microcontrollers",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "typecad-ui": "dist/cli.js"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -22,23 +25,33 @@
       "types": "./dist/ui-engine/*.d.ts",
       "default": "./dist/ui-engine/*.js"
     },
+    "./themes/*": {
+      "default": "./themes/*"
+    },
     "./preview/*": {
       "types": "./dist/preview/*.d.ts",
       "default": "./dist/preview/*.js"
+    },
+    "./wizard": {
+      "types": "./dist/wizard/index.d.ts",
+      "default": "./dist/wizard/index.js"
     }
   },
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "assets"
   ],
-  "peerDependencies": {
-    "@typecad/cuttlefish": "1.0.0-alpha.11"
-  },
   "dependencies": {
+    "@typecad/cuttlefish": "1.0.0-alpha.13",
+    "chalk": "^4.1.2",
     "css-tree": "^3.2.1",
+    "decode-ico": "^0.4.1",
     "linkedom": "^0.18.12",
     "opentype.js": "^2.0.0",
+    "sharp": "^0.35.3",
+    "typescript": "^5.7.3",
     "yoga-layout": "^3.2.1"
   },
   "scripts": {

package/src/cli.ts

@@ -0,0 +1,87 @@
+#!/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;
+  },
+);

package/src/engine-index.ts

@@ -1,51 +1,53 @@
-// ---------------------------------------------------------------------------
-// Engine entry point for @typecad/ui.
-//
-// Cuttlefish dynamically imports this module when UI usage is detected:
-//   const engine = await import("@typecad/ui/engine");
-//   const hook = await engine.registerTranspilerUI();
-//
-// registerTranspilerUI() returns an object implementing the TranspilerUIHook
-// interface defined in @typecad/cuttlefish. This is the single runtime
-// contract between the two packages.
-// ---------------------------------------------------------------------------
-
-import type { TranspilerUIHook } from "@typecad/cuttlefish/ui-hook";
-import {
-  resetUIRegistry, loadUIModule, loadUIModuleFromText, getUIModule,
-  hasUIModule, allUIModules, allLoweredUIModules,
-  markEntryHasUI, entryHasUI, clearEntryHasUI, lowerOnMount,
-  generateProjectUITypeDeclarations,
-} 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";
-
-export type { TranspilerUIHook };
-
-/**
- * Build and return the TranspilerUIHook — the object cuttlefish core uses
- * to access all UI capabilities (parsing, layout, lowering, emission).
- */
-export function registerTranspilerUI(): TranspilerUIHook {
-  return {
-    resetUIRegistry,
-    loadUIModule,
-    loadUIModuleFromText,
-    getUIModule,
-    hasUIModule,
-    allUIModules,
-    allLoweredUIModules,
-    markEntryHasUI,
-    entryHasUI,
-    clearEntryHasUI,
-    lowerOnMount,
-    resolveColor,
-    resolveColorInternal,
-    emitRuntimeHeader,
-    emitCuttlefishGfx,
-    splitUiFile,
-    generateProjectUITypeDeclarations,
-  };
-}
+// ---------------------------------------------------------------------------
+// Engine entry point for @typecad/ui.
+//
+// Cuttlefish dynamically imports this module when UI usage is detected:
+//   const engine = await import("@typecad/ui/engine");
+//   const hook = await engine.registerTranspilerUI();
+//
+// registerTranspilerUI() returns an object implementing the TranspilerUIHook
+// interface defined in @typecad/cuttlefish. This is the single runtime
+// contract between the two packages.
+// ---------------------------------------------------------------------------
+
+import type { TranspilerUIHook } from "@typecad/cuttlefish/ui-hook";
+import {
+  resetUIRegistry, loadUIModule, loadUIModuleFromText, getUIModule,
+  hasUIModule, allUIModules, allLoweredUIModules,
+  markEntryHasUI, entryHasUI, clearEntryHasUI, lowerOnMount,
+  generateProjectUITypeDeclarations,
+} 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 { warmUpImageDecoding } from "./ui-engine/image-decode.js";
+
+export type { TranspilerUIHook };
+
+/**
+ * Build and return the TranspilerUIHook — the object cuttlefish core uses
+ * to access all UI capabilities (parsing, layout, lowering, emission).
+ */
+export function registerTranspilerUI(): TranspilerUIHook {
+  return {
+    resetUIRegistry,
+    loadUIModule,
+    loadUIModuleFromText,
+    getUIModule,
+    hasUIModule,
+    allUIModules,
+    allLoweredUIModules,
+    markEntryHasUI,
+    entryHasUI,
+    clearEntryHasUI,
+    lowerOnMount,
+    resolveColor,
+    resolveColorInternal,
+    emitRuntimeHeader,
+    emitCuttlefishGfx,
+    splitUiFile,
+    warmUpImageDecoding,
+    generateProjectUITypeDeclarations,
+  };
+}