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

package/dist/ui-engine/ua-stylesheet.js

@@ -1,11 +1,70 @@
 // ---------------------------------------------------------------------------
 // UA (User-Agent) default stylesheet.
 // Applied before user CSS so elements have sensible built-in behavior without
-// requiring explicit CSS. User CSS overrides (cascade: last-wins).
-// Minimal and embedded-oriented, not a browser clone.
+// requiring explicit CSS. Author CSS overrides it (cascade: the UA layer loses
+// to any author rule; see style-resolver.ts).
+//
+// The sheet is display-anchored, like a browser's per-device-class defaults:
+// the root type size (what a browser fixes at 16px on desktop) scales with the
+// target display — 16px on large color panels, ~14px on 320×240 TFTs, ~12px on
+// tiny panels — and every UA size derives from that root, so heading ratios
+// and touch-target minimums stay web-familiar at every pixel budget.
+// Monochrome displays additionally snap sizes to the stock font's buckets
+// (only ~4 distinct rendered sizes exist there).
 // ---------------------------------------------------------------------------
 import { parseCss } from "./css-parser.js";
-const UA_CSS = `
+import { getDisplayProfile } from "@typecad/cuttlefish/stores/display-profile-store";
+import { DEFAULT_FONT_FAMILY, DEFAULT_MONO_FAMILY, defaultFontApplies } from "./default-font.js";
+/** Derive the UA type scale from the display class. Height is the portrait
+ *  dimension the profile reports; an unbound profile gets the color/large
+ *  default (root 16 — the classic browser default). */
+export function uaScaleFor(height, mono) {
+    if (mono) {
+        // Stock font buckets: ≤12 → size 1, 13–20 → 2, 21–28 → 3. Snap UA sizes
+        // to 12/20/28 so every declared size renders at a DISTINCT bucket.
+        const tall = (height ?? 128) >= 96;
+        return {
+            root: 12,
+            mono: true,
+            h: tall ? [28, 20, 20, 12, 12, 12] : [20, 20, 12, 12, 12, 12],
+            blockMargin: 6,
+            controlMinHeight: 32,
+            buttonPadV: 6,
+            buttonPadH: 12,
+        };
+    }
+    const root = height === undefined ? 16 : height >= 300 ? 16 : height >= 150 ? 14 : 12;
+    const r = (m) => Math.round(root * m);
+    return {
+        root,
+        mono: false,
+        h: [r(1.5), r(1.25), r(1.125), r(1), r(0.875), r(0.75)],
+        blockMargin: r(0.5),
+        controlMinHeight: Math.max(32, Math.min(48, r(3))),
+        buttonPadV: r(0.625),
+        buttonPadH: r(1),
+    };
+}
+/** Read the active display profile (null when unbound — the default scale). */
+function profileFor() {
+    try {
+        const p = getDisplayProfile();
+        return {
+            height: p.height,
+            mono: p.colorFormat === "mono",
+            colorFormat: p.colorFormat,
+        };
+    }
+    catch {
+        return { height: undefined, mono: false, colorFormat: undefined };
+    }
+}
+/** Build the UA stylesheet text for a scale. Sizes interpolate as concrete px
+ *  so the CSS pipeline stays unit-simple. */
+function uaCssFor(s, useDefaultFont) {
+    const gap = Math.round(s.root * 0.625);
+    const headerGap = Math.round(s.root * 0.5);
+    return `
 /* Browser-like light defaults: dark text on a near-white background.
    A dark theme overrides these via user CSS (e.g. screen { color: #f0f0f0;
    background: #1a1a1a }). Without these, screen fg defaults to white
@@ -14,7 +73,7 @@ screen {
   display: flex;
   flex-direction: column;
   color: #1a1a1a;
-  background: #ffffff;
+  background: #ffffff;${useDefaultFont ? `\n  /* Bundled default font: AA + continuous sizes out of the box. */\n  font-family: "${DEFAULT_FONT_FAMILY}";` : ""}
 }
 body {
   display: flex;
@@ -27,40 +86,41 @@ view {
   flex-direction: column;
 }
 /* Scrollable content area — the standard pattern for multi-screen apps.
-   align-items:center + gap give readable card-style layouts out of the box. */
-.scrollBody {
+   align-items:center + gap give readable card-style layouts out of the box.
+   .ui-scroll-body / .ui-screen-header are the framework-prefixed spellings. */
+.scrollBody, .ui-scroll-body {
   overflow: scroll;
   flex: 1;
   align-items: center;
-  gap: 10px;
+  gap: ${gap}px;
 }
 /* Header bar (back link + title). flex-direction:row is the expected layout;
    without it the back link and title stack vertically. */
-.screenHeader {
+.screenHeader, .ui-screen-header {
   flex-direction: row;
   align-items: center;
-  gap: 8px;
+  gap: ${headerGap}px;
 }
 button {
-  padding: 10px 16px;
+  padding: ${s.buttonPadV}px ${s.buttonPadH}px;
   border: 1px solid;
-  min-height: 48px;
+  min-height: ${s.controlMinHeight}px;
   text-align: center;
 }
 input {
-  padding: 8px;
+  padding: ${Math.round(s.root * 0.5)}px;
   border: 1px solid;
 }
 select {
-  padding: 10px 12px;
+  padding: ${s.buttonPadV}px ${s.buttonPadH}px;
   border: 1px solid;
-  min-height: 48px;
+  min-height: ${s.controlMinHeight}px;
 }
 check, radio {
-  min-height: 48px;
+  min-height: ${s.controlMinHeight}px;
 }
 range {
-  height: 40px;
+  height: ${Math.round(s.root * 2.5)}px;
 }
 list {
   overflow: scroll;
@@ -72,17 +132,35 @@ a {
 label {
   text-align: left;
 }
-/* h3 is non-bold by default: the runtime bumps textSize for bold text
-   (roughly doubling per-char advance), which wraps multi-word captions
-   like "width / height / min / max" to 3 lines. Normal weight keeps
-   them readable. Users can override with font-weight:bold if needed. */
-h1 { font-size: 24px; font-weight: bold; }
-h2 { font-size: 20px; font-weight: bold; }
-h3 { font-size: 18px; font-weight: normal; }
-h4 { font-size: 16px; font-weight: bold; }
-h5 { font-size: 14px; }
-h6 { font-size: 12px; }
-p { font-size: 16px; }
+/* Headings and paragraphs carry browser-like margins so a bare heading stack
+   doesn't render glued together. Sizes derive from the display-anchored root
+   (see uaScaleFor). */
+h1 { font-size: ${s.h[0]}px; font-weight: bold; margin: ${s.blockMargin}px 0; }
+h2 { font-size: ${s.h[1]}px; font-weight: bold; margin: ${s.blockMargin}px 0; }
+h3 { font-size: ${s.h[2]}px; font-weight: bold; margin: ${s.blockMargin}px 0; }
+h4 { font-size: ${s.h[3]}px; font-weight: bold; margin: ${s.blockMargin}px 0; }
+h5 { font-size: ${s.h[4]}px; margin: ${s.blockMargin}px 0; }
+h6 { font-size: ${s.h[5]}px; margin: ${s.blockMargin}px 0; }
+p { font-size: ${s.root}px; margin: ${s.blockMargin}px 0; }
+small { font-size: ${Math.round(s.root * 0.8)}px; }
+hr { height: 1px; background: #808080; margin: ${s.blockMargin}px 0; }
+/* Definition lists: bold term, indented description — the settings-screen
+   idiom web authors reach for. */
+dt { font-weight: bold; }
+dd { margin-left: ${Math.round(s.root * 0.75)}px; }
+/* Tables: the equal-width flex approximation — tr is a row, td/th are
+   stretched cells (flex:1 basis 0), th bold + centered like browsers.
+   No auto column sizing; set widths/flex-grow on cells for custom columns. */
+table { gap: 1px; }
+tr { flex-direction: row; align-items: stretch; gap: 1px; }
+td { flex: 1; padding: ${Math.round(s.root * 0.3)}px; text-align: left; }
+th { flex: 1; padding: ${Math.round(s.root * 0.3)}px; text-align: center; font-weight: bold; }
+caption { text-align: center; margin: ${Math.round(s.root * 0.25)}px 0; }
+/* Grouped form chrome. */
+fieldset { border: 1px solid; padding: ${s.blockMargin}px; }
+/* Preformatted text keeps its whitespace (engine white-space modes); the
+   monospace family rides on the bundled DejaVu Sans Mono when available. */
+pre { white-space: pre; }${useDefaultFont ? `\npre, code, kbd, samp { font-family: "${DEFAULT_MONO_FAMILY}"; }` : ""}
 /* Keyboard structural defaults (the OSK is runtime-generated, not
    user-authored HTML). Border keeps keys visually separated. Colors
    are design choices left to user CSS. */
@@ -90,10 +168,19 @@ p { font-size: 16px; }
   border: 1px solid;
 }
 `;
-let UA_RULES = null;
-/** Get the parsed UA default rules. Lazily computed, cached. */
+}
+const cache = new Map();
+/** Get the parsed UA default rules for the active display profile. Lazily
+ *  computed, cached per scale (profile changes pick up a new scale key). */
 export function getUARules() {
-    if (!UA_RULES)
-        UA_RULES = parseCss(UA_CSS);
-    return UA_RULES;
+    const profile = profileFor();
+    const scale = uaScaleFor(profile.height, profile.mono);
+    const useDefaultFont = defaultFontApplies(profile.colorFormat);
+    const key = `${scale.root}|${scale.mono}|${useDefaultFont}|${scale.h.join(",")}`;
+    let rules = cache.get(key);
+    if (!rules) {
+        rules = parseCss(uaCssFor(scale, useDefaultFont));
+        cache.set(key, rules);
+    }
+    return rules;
 }

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

@@ -13,6 +13,7 @@
 // ---------------------------------------------------------------------------
 import { lowerUIToModel } from "./model.js";
 import { resolveColor } from "./color.js";
+import { defaultFontAttribution } from "./default-font.js";
 import { DEFAULT_ALPHA_KEYBOARD, DEFAULT_NUMBER_KEYBOARD } from "./default-keyboards.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 = []) {
@@ -51,6 +52,14 @@ export function lowerUIToCpp(root, boxes, colorFormat, storage, keyboards = [],
             addIfNeeded(spec.type === "number" ? DEFAULT_NUMBER_KEYBOARD : DEFAULT_ALPHA_KEYBOARD);
         }
     }
+    // The runtime header's keyboard page-swap (the 123/ABC toggle key) calls
+    // BOTH default loaders regardless of which input opened the keyboard. Emit
+    // both whenever any input exists, or a text-only project fails to link
+    // (undefined __ui_kb_load_default_number on non-Arduino linkers).
+    if (inputSpecs.length > 0) {
+        addIfNeeded(DEFAULT_ALPHA_KEYBOARD);
+        addIfNeeded(DEFAULT_NUMBER_KEYBOARD);
+    }
     const keyboardLoaders = neededKeyboards
         .map(kb => emitKeyboardLoader(loaderNameForId(kb.id), kb, rules, colorFormat))
         .join("\n\n");
@@ -204,7 +213,12 @@ function emitFontTables(model) {
     }
     const lines = [];
     for (const asset of assets) {
-        lines.push(`// Font ${asset.id}: ${asset.family} ${asset.px}px ${asset.fontWeight} ${asset.fontStyle} ${asset.subset}`);
+        lines.push(`// Font ${asset.id}: ${asset.family} ${asset.px}px ${asset.fontWeight} ${asset.fontStyle} ${asset.subset} (source: ${asset.sourcePath.split(/[\\/]/).pop()})`);
+        // Bundled DejaVu faces carry their license attribution into the binary
+        // (the Bitstream Vera License requires the notice accompany distributions).
+        const attribution = defaultFontAttribution(asset.sourcePath);
+        if (attribution)
+            lines.push(`// ${attribution}`);
         // Alpha data goes in PROGMEM (constants in flash, not RAM) - accessed via pgm_read_byte on AVR
         lines.push(`static const uint8_t __ui_font_${asset.id}_alpha[] PROGMEM = {`);
         lines.push(byteArray(asset.alpha));
@@ -231,6 +245,19 @@ function emitNodeTable(model) {
     const listBindingByNode = new Map();
     for (const lb of getListBindings())
         listBindingByNode.set(lb.nodeIndex, lb);
+    // <select> option tables: one fn per select feeding the node's optionTextFn
+    // (the modal option list reads options through it). Emitted before the node
+    // table so the initializers can reference the names.
+    const optionFnByNode = new Map();
+    const optionFns = [];
+    for (const n of model.nodes) {
+        if (n.kind !== "select" || !n.options || n.options.length === 0)
+            continue;
+        const fnName = `__ui_select_opts_${n.index}`;
+        optionFnByNode.set(n.index, fnName);
+        const cases = n.options.map((o, i) => `  if (idx == ${i}) { snprintf(buf, static_cast<size_t>(size), "%s", ${JSON.stringify(o.text)}); return; }`).join("\n");
+        optionFns.push(`static void ${fnName}(uint8_t idx, char* buf, uint8_t size) {\n${cases}\n  buf[0] = 0;\n}`);
+    }
     // Accumulate rich-text run / segment / line parallel arrays across all
     // run-bearing nodes, assigning each a contiguous slice (runStart/richSegStart/
     // richLineStart + counts). Emitted as global tables after the node table.
@@ -285,9 +312,12 @@ function emitNodeTable(model) {
         const richSegStart = rr ? rr.richSegStart : 0;
         const richSegCount = rr ? rr.richSegCount : 0;
         const richLineStart = rr ? rr.richLineStart : 0;
-        return `  { .box=${box}, .bg=${hex(n.bg)}, .fg=${hex(n.fg)}, .kind=${cppKind(n.kind)}, .text=${inputText}, .textBuffer={0}, .hasTextBinding=0, .font=${font}, .hasBg=${n.hasBg ? 1 : 0}, .textAlign=${n.textAlign}, .textSize=${n.textSize}, .lineHeight=${n.lineHeight}, .letterSpacing=${n.letterSpacing}, .fontAntialias=${n.fontAntialias ? 1 : 0}, .fontFace=${n.fontFace}, .borderColor=${hex(n.borderColor)}, .borderStyle=${n.borderStyle}, .borderWidth=${n.borderWidth}, .borderTopWidth=${n.borderTopWidth ?? n.borderWidth}, .borderRightWidth=${n.borderRightWidth ?? n.borderWidth}, .borderBottomWidth=${n.borderBottomWidth ?? n.borderWidth}, .borderLeftWidth=${n.borderLeftWidth ?? n.borderWidth}, .hasPerSideBorder=${((n.borderTopWidth ?? n.borderWidth) !== n.borderWidth || (n.borderRightWidth ?? n.borderWidth) !== n.borderWidth || (n.borderBottomWidth ?? n.borderWidth) !== n.borderWidth || (n.borderLeftWidth ?? n.borderWidth) !== n.borderWidth) ? 1 : 0}, .borderRadius=${n.borderRadius}, .paddingTop=${n.paddingTop ?? 0}, .paddingRight=${n.paddingRight ?? 0}, .paddingBottom=${n.paddingBottom ?? 0}, .paddingLeft=${n.paddingLeft ?? 0}, .gradientEnabled=${n.gradientEnabled}, .gradientColor1=${hex(n.gradientColor1)}, .gradientColor2=${hex(n.gradientColor2)}, .outlineColor=${hex(n.outlineColor)}, .outlineStyle=${n.outlineStyle}, .outlineWidth=${n.outlineWidth}, .zIndex=${n.zIndex}, .transformOffsetX=${n.transformOffsetX}, .transformOffsetY=${n.transformOffsetY}, .rotateDeg=${n.rotateDeg}, .pressedOffsetX=${n.pressedOffsetX}, .pressedOffsetY=${n.pressedOffsetY}, .shadowCount=${n.shadowCount}, .shadowOffsetX=${shArr(n.shadowOffsetX)}, .shadowOffsetY=${shArr(n.shadowOffsetY)}, .shadowBlur=${shArr(n.shadowBlur)}, .shadowColor={${n.shadowColor.slice(0, 4).map(hex).join(",")}}, .shadowAlpha=${shArr(n.shadowAlpha)}, .shadowInset=${shArr(n.shadowInset.map(v => v ? 1 : 0))}, .textShadowCount=${n.textShadowCount}, .textShadowOffsetX=${n.textShadowOffsetX}, .textShadowOffsetY=${n.textShadowOffsetY}, .textShadowBlur=${n.textShadowBlur}, .textShadowColor=${hex(n.textShadowColor)}, .textShadowAlpha=${n.textShadowAlpha}, .underline=${n.underline}, .textOverflow=${n.textOverflow ? 1 : 0}, .nowrap=${n.nowrap ? 1 : 0}, .whiteSpaceMode=${n.whiteSpaceMode}, .visible=${n.visible ? 1 : 0}, .opacity=${n.opacity}, .clearColor=${hex(n.clearColor)}, .lastTextWidth=${lastTextWidth}, .lastTextHeight=0, .layoutCacheKey=0, .layoutMetricsW=0, .layoutMetricsH=0, .scrollable=${n.scrollable ? 1 : 0}, .virtualized=${virtualized}, .scrollY=0, .contentHeight=${n.contentHeight}, .overscrollPx=0, .settling=0, .lastPaintedScrollY=0, .listCount=0, .listCountFn=${listCountFn}, .listItemFn=${listItemFn}, .listTapFn=${listTapFn}, .parent=${parent}, .subtreeEnd=${n.subtreeEnd}, .screenId=${n.screenId}, .imgDataId=${n.imgDataId ?? 255}, .objectFit=${n.objectFit ?? 1}, .listItemHeight=${n.listItemHeight ?? 0}, .rangeMin=${n.rangeMin}, .rangeMax=${n.rangeMax}, .maxlen=${n.maxlen}, .canvasW=${n.canvasW ?? 0}, .canvasH=${n.canvasH ?? 0}, .runCount=${runCount}, .richLineCount=${richLineCount}, .runStart=${runStart}, .richSegStart=${richSegStart}, .richSegCount=${richSegCount}, .richLineStart=${richLineStart}, .dirty=0, .value=${n.value} },`;
+        return `  { .box=${box}, .bg=${hex(n.bg)}, .fg=${hex(n.fg)}, .kind=${cppKind(n.kind)}, .text=${inputText}, .textBuffer={0}, .hasTextBinding=0, .font=${font}, .hasBg=${n.hasBg ? 1 : 0}, .textAlign=${n.textAlign}, .textSize=${n.textSize}, .lineHeight=${n.lineHeight}, .letterSpacing=${n.letterSpacing}, .fontAntialias=${n.fontAntialias ? 1 : 0}, .fontFace=${n.fontFace}, .borderColor=${hex(n.borderColor)}, .borderStyle=${n.borderStyle}, .borderWidth=${n.borderWidth}, .borderTopWidth=${n.borderTopWidth ?? n.borderWidth}, .borderRightWidth=${n.borderRightWidth ?? n.borderWidth}, .borderBottomWidth=${n.borderBottomWidth ?? n.borderWidth}, .borderLeftWidth=${n.borderLeftWidth ?? n.borderWidth}, .hasPerSideBorder=${((n.borderTopWidth ?? n.borderWidth) !== n.borderWidth || (n.borderRightWidth ?? n.borderWidth) !== n.borderWidth || (n.borderBottomWidth ?? n.borderWidth) !== n.borderWidth || (n.borderLeftWidth ?? n.borderWidth) !== n.borderWidth) ? 1 : 0}, .borderRadius=${Math.min(255, n.borderRadius)}, .paddingTop=${n.paddingTop ?? 0}, .paddingRight=${n.paddingRight ?? 0}, .paddingBottom=${n.paddingBottom ?? 0}, .paddingLeft=${n.paddingLeft ?? 0}, .gradientEnabled=${n.gradientEnabled}, .gradientColor1=${hex(n.gradientColor1)}, .gradientColor2=${hex(n.gradientColor2)}, .outlineColor=${hex(n.outlineColor)}, .outlineStyle=${n.outlineStyle}, .outlineWidth=${n.outlineWidth}, .zIndex=${n.zIndex}, .transformOffsetX=${n.transformOffsetX}, .transformOffsetY=${n.transformOffsetY}, .rotateDeg=${n.rotateDeg}, .pressedOffsetX=${n.pressedOffsetX}, .pressedOffsetY=${n.pressedOffsetY}, .shadowCount=${n.shadowCount}, .shadowOffsetX=${shArr(n.shadowOffsetX)}, .shadowOffsetY=${shArr(n.shadowOffsetY)}, .shadowBlur=${shArr(n.shadowBlur)}, .shadowColor={${n.shadowColor.slice(0, 4).map(hex).join(",")}}, .shadowAlpha=${shArr(n.shadowAlpha)}, .shadowInset=${shArr(n.shadowInset.map(v => v ? 1 : 0))}, .textShadowCount=${n.textShadowCount}, .textShadowOffsetX=${n.textShadowOffsetX}, .textShadowOffsetY=${n.textShadowOffsetY}, .textShadowBlur=${n.textShadowBlur}, .textShadowColor=${hex(n.textShadowColor)}, .textShadowAlpha=${n.textShadowAlpha}, .underline=${n.underline}, .textOverflow=${n.textOverflow ? 1 : 0}, .nowrap=${n.nowrap ? 1 : 0}, .whiteSpaceMode=${n.whiteSpaceMode}, .visible=${n.visible ? 1 : 0}, .opacity=${n.opacity}, .clearColor=${hex(n.clearColor)}, .lastTextWidth=${lastTextWidth}, .lastTextHeight=0, .layoutCacheKey=0, .layoutMetricsW=0, .layoutMetricsH=0, .scrollable=${n.scrollable ? 1 : 0}, .virtualized=${virtualized}, .scrollY=0, .contentHeight=${n.contentHeight}, .overscrollPx=0, .settling=0, .lastPaintedScrollY=0, .listCount=0, .listCountFn=${listCountFn}, .listItemFn=${listItemFn}, .listTapFn=${listTapFn}, .parent=${parent}, .subtreeEnd=${n.subtreeEnd}, .screenId=${n.screenId}, .imgDataId=${n.imgDataId ?? 255}, .objectFit=${n.objectFit ?? 1}, .listItemHeight=${n.listItemHeight ?? 0}, .rangeMin=${n.rangeMin}, .rangeMax=${n.rangeMax}, .maxlen=${n.maxlen}, .canvasW=${n.canvasW ?? 0}, .canvasH=${n.canvasH ?? 0}, .runCount=${runCount}, .richLineCount=${richLineCount}, .runStart=${runStart}, .richSegStart=${richSegStart}, .richSegCount=${richSegCount}, .richLineStart=${richLineStart}, .dirty=0, .value=${n.value}, .disabled=${n.disabled ? 1 : 0}, .optionCount=${n.kind === "select" && n.options ? n.options.length : 0}, .optionTextFn=${optionFnByNode.get(n.index) ?? "nullptr"}, .drawerSide=${n.drawerSide ?? -1}, .toastDuration=${n.toastDuration ?? 0}, .checkedBg=${n.checkedBg !== undefined && n.checkedBg >= 0 ? hex(n.checkedBg) : "0x0"}, .checkedFg=${n.checkedFg !== undefined && n.checkedFg >= 0 ? hex(n.checkedFg) : "0x0"}, .hasCheckedBg=${n.checkedBg !== undefined && n.checkedBg >= 0 ? 1 : 0}, .hasCheckedFg=${n.checkedFg !== undefined && n.checkedFg >= 0 ? 1 : 0}, .flowAxis=${n.flowAxis ?? 0}, .flowGap=${n.flowGap ?? 0}, .flowFlags=${n.flowFlags ?? 0} },`;
     });
     return [
+        // <select> option tables (must precede __ui_nodes[]: initializers
+        // reference the function names).
+        ...optionFns,
         // Mutable (not const) so ui_tick can update bg/dirty during transitions.
         // AVR would want PROGMEM + a shadow copy; ESP32-class has RAM to spare.
         `UINode __ui_nodes[] = {`,
@@ -310,7 +340,11 @@ function emitNodeTable(model) {
     ].join("\n");
 }
 function emitTransitionTable(model) {
-    const entries = model.transitions.map((t) => {
+    // Skip no-op transitions (pressed target equals base) — they'd never change
+    // the node's appearance and only bloat the per-tick scan.
+    const entries = model.transitions
+        .filter((t) => t.pressedTarget !== t.baseTarget)
+        .map((t) => {
         const prop = t.prop === "background" ? "PROP_BG" : "PROP_FG";
         return `  { .node=${t.node}, .prop=${prop}, .durationMs=${t.durationMs}, .pressedTarget=${hex(t.pressedTarget)}, .baseTarget=${hex(t.baseTarget)} },`;
     });

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

@@ -26,7 +26,11 @@ import { measureWithFonts } from "./layout-engine.js";
 import { lowerUIToCpp } from "./ui-lowering.js";
 import { getDisplayProfile } from "@typecad/cuttlefish/stores/display-profile-store";
 import { buildUIFontAssets } from "./font-assets.js";
-import { emitImageTables, loadImageAssets } from "./image-assets.js";
+import { injectDefaultFontFaces } from "./default-font.js";
+import { cssCompatDiagnostics } from "./compat-report.js";
+import { expandCssImports } from "./css-imports.js";
+import { SHADCN_KIT_CSS } from "./shadcn-kit.js";
+import { emitImageTables, loadImageAssets, applyDecodedImageSizes } from "./image-assets.js";
 import { splitUiFile } from "./ui-file-splitter.js";
 const modules = new Map();
 const lowered = new Map();
@@ -70,11 +74,23 @@ export function loadUIModuleFromText(htmlPath, htmlText, cssText, cssPathForFont
     const tree = parsed.tree;
     const allScreens = parsed.screens;
     const keyboards = parsed.keyboards;
-    // Merge <style> blocks from the HTML with the external CSS.
+    // Merge <style> blocks from the HTML with the external CSS, then inline any
+    // local @import statements (shared stylesheets like the shadcn preset).
     const styleBlocks = extractStyleBlocks(htmlText);
-    const fullCss = cssText + "\n" + styleBlocks;
+    const cssBaseDir = path.dirname(cssPathForFonts);
+    // Built-in shadcn kit first, user CSS after: user token blocks and recipe
+    // overrides win by cascade order. The kit has no @imports of its own.
+    const fullCss = SHADCN_KIT_CSS + "\n" + expandCssImports(cssText + "\n" + styleBlocks, cssBaseDir);
     const rules = parseCss(fullCss, moduleDiagnostics);
-    const fontFaces = parseFontFaces(fullCss);
+    // Color displays get the bundled DejaVu faces appended (unless the author
+    // registered their own face under the default family) so AA text works out
+    // of the box. The UA sheet points at the same family.
+    let profileColorFormat;
+    try {
+        profileColorFormat = getDisplayProfile().colorFormat;
+    }
+    catch { /* unbound */ }
+    const fontFaces = injectDefaultFontFaces(parseFontFaces(fullCss), profileColorFormat);
     const styled = resolveStyles(tree, rules, moduleDiagnostics);
     const allStyledScreens = allScreens.map(s => resolveStyles(s, rules, moduleDiagnostics));
     const fontRoot = { tag: "screen", classes: [], style: {}, children: allStyledScreens };
@@ -134,6 +150,11 @@ export function lowerOnMount(htmlPath, opts) {
     // Layout all screens (each gets its own Yoga layout pass; boxes concatenated).
     let allBoxes = [];
     let allStyled = [];
+    // Converted images (<img src="*.png"> etc.) contribute their natural size
+    // to layout when the author gave no explicit width/height — must land
+    // BEFORE arrange. Served from the warm-up cache primed by the transpile
+    // graph collector / preview builder before this module loaded.
+    applyDecodedImageSizes(mod.allStyledScreens.length > 0 ? mod.allStyledScreens : [mod.styled], path.dirname(abs));
     for (const screen of mod.allStyledScreens.length > 0 ? mod.allStyledScreens : [mod.styled]) {
         const engine = selectEngine(screen);
         const screenBoxes = engine.arrange(screen, viewport, measureWithFonts(mod.fontAssets));
@@ -205,6 +226,13 @@ export function lowerOnMount(htmlPath, opts) {
         result.diagnostics.push(d);
         mod.mountDiagnostics.push(d);
     }
+    // CSS compatibility report: display-anchored scale summary, ignored alpha,
+    // stock-font quantization, viewport-share sanity. Ordinary diagnostics —
+    // printed with the rest, upgradeable to errors via --strict-css.
+    for (const d of cssCompatDiagnostics(allStyled.length > 0 ? allStyled : [mod.styled], mod.fontAssets, opts.viewport, opts.colorFormat, htmlBase)) {
+        result.diagnostics.push(d);
+        mod.mountDiagnostics.push(d);
+    }
     // Emit image tables.
     result.imageTables = emitImageTables(imageAssets.assets, opts.colorFormat);
     lowered.set(abs, result);

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

@@ -10,11 +10,13 @@
 // matching the StyledNode tree, so lowerUIToCpp's flatten() can index
 // boxes[] in lockstep with the styled nodes.
 // ---------------------------------------------------------------------------
-import { isDisplayNone, parseAspectRatio } from "./layout-engine.js";
+import { isDisplayNone, parseAspectRatio, cssDimValue, cssSizeValue, dimSet, expandBoxShorthand } from "./layout-engine.js";
 import Yoga from "yoga-layout";
 /** Parse the first numeric value from a CSS string ("8px", "8px 16px" → 8). */
 /** Parse a single CSS length to device pixels.
- *  rem/em × 16 (root font size), px/bare as-is, decimals supported. */
+ *  rem/em × 16 (root font size), px/bare as-is, decimals supported.
+ *  Percentages and "auto" fold to numbers here — use cssDimValue() for the
+ *  properties (sizes, margins, paddings, insets) where they are meaningful. */
 function cssLength(val) {
     const v = val.trim();
     const remM = /^(-?[\d.]+)rem$/.exec(v);
@@ -31,22 +33,6 @@ function cssNum(val) {
         return 0;
     return cssLength(val);
 }
-/** Parse horizontal padding from shorthand ("8px 16px" → 16 for left/right). */
-function cssPadH(val) {
-    if (!val)
-        return 0;
-    const parts = val.trim().split(/\s+/);
-    if (parts.length <= 1)
-        return cssLength(parts[0] ?? "0");
-    return cssLength(parts[1] ?? parts[0]);
-}
-/** Parse vertical padding from shorthand ("8px 16px" → 8 for top/bottom). */
-function cssPadV(val) {
-    if (!val)
-        return 0;
-    const parts = val.trim().split(/\s+/);
-    return cssLength(parts[0] ?? "0");
-}
 /** Parse border width from "2px solid #808080" → 2. */
 function cssBorderWidth(val) {
     if (!val)
@@ -92,28 +78,43 @@ export class YogaLayoutEngine {
             yn.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN_REVERSE);
         else
             yn.setFlexDirection(Yoga.FLEX_DIRECTION_COLUMN);
-        // Padding (all edges from shorthand, using the vertical value for uniformity)
-        const padV = cssPadV(s.padding);
-        const padH = cssPadH(s.padding);
-        if (padV || padH) {
-            yn.setPadding(Yoga.EDGE_TOP, padV);
-            yn.setPadding(Yoga.EDGE_BOTTOM, padV);
-            yn.setPadding(Yoga.EDGE_LEFT, padH);
-            yn.setPadding(Yoga.EDGE_RIGHT, padH);
+        // Padding: full 1-4 value shorthand (TRBL rotation) with % support.
+        // "auto" is not valid padding — fold it to the default 0 via asSize.
+        const asSize = (d) => (d === "auto" ? 0 : d);
+        const [padT, padR, padB, padL] = expandBoxShorthand(s.padding);
+        if (dimSet(padT))
+            yn.setPadding(Yoga.EDGE_TOP, asSize(padT));
+        if (dimSet(padR))
+            yn.setPadding(Yoga.EDGE_RIGHT, asSize(padR));
+        if (dimSet(padB))
+            yn.setPadding(Yoga.EDGE_BOTTOM, asSize(padB));
+        if (dimSet(padL))
+            yn.setPadding(Yoga.EDGE_LEFT, asSize(padL));
+        // Scroll containers draw an overlay scrollbar at the right edge (4px
+        // strip: box.x + box.w - 4). Reserve the strip plus a 4px breathing gap
+        // as right padding so stretched children (align-items: stretch selects,
+        // cards) never lay out or paint against/under the scrollbar — browser
+        // behavior for classic scrollbars, which take layout space.
+        if (s.overflow === "scroll") {
+            const basePad = typeof padR === "number" ? padR : 0;
+            yn.setPadding(Yoga.EDGE_RIGHT, basePad + 8);
         }
-        // Margin: per-side overrides win over the `margin` shorthand when set.
-        const marginV = cssPadV(s.margin);
-        const marginH = cssPadH(s.margin);
-        const mTop = s.marginTop !== undefined ? cssLength(s.marginTop) : marginV;
-        const mBottom = s.marginBottom !== undefined ? cssLength(s.marginBottom) : marginV;
-        const mLeft = s.marginLeft !== undefined ? cssLength(s.marginLeft) : marginH;
-        const mRight = s.marginRight !== undefined ? cssLength(s.marginRight) : marginH;
-        if (mTop || mBottom || mLeft || mRight) {
+        // Margin: per-side longhands win over the `margin` shorthand when set.
+        // Full 1-4 value shorthand expansion; percentages resolve against the
+        // parent, and "auto" margins absorb free space (margin: 0 auto centers).
+        const [mgT, mgR, mgB, mgL] = expandBoxShorthand(s.margin);
+        const mTop = s.marginTop !== undefined ? cssDimValue(s.marginTop) : mgT;
+        const mBottom = s.marginBottom !== undefined ? cssDimValue(s.marginBottom) : mgB;
+        const mLeft = s.marginLeft !== undefined ? cssDimValue(s.marginLeft) : mgL;
+        const mRight = s.marginRight !== undefined ? cssDimValue(s.marginRight) : mgR;
+        if (dimSet(mTop))
             yn.setMargin(Yoga.EDGE_TOP, mTop);
+        if (dimSet(mBottom))
             yn.setMargin(Yoga.EDGE_BOTTOM, mBottom);
+        if (dimSet(mLeft))
             yn.setMargin(Yoga.EDGE_LEFT, mLeft);
+        if (dimSet(mRight))
             yn.setMargin(Yoga.EDGE_RIGHT, mRight);
-        }
         // Gap: row-gap / column-gap are applied per-axis. Uniform `gap`
         // (both equal) uses GUTTER_ALL for efficiency; mismatched values
         // set GUTTER_ROW and GUTTER_COLUMN separately.
@@ -199,24 +200,23 @@ export class YogaLayoutEngine {
         if (s.flexShrink)
             yn.setFlexShrink(cssNum(s.flexShrink));
         if (s.flexBasis) {
-            const basis = cssNum(s.flexBasis);
             if (s.flexBasis === "auto")
                 yn.setFlexBasisAuto();
             else
-                yn.setFlexBasis(basis);
+                yn.setFlexBasis(cssSizeValue(s.flexBasis));
         }
         // Order (Yoga may not expose setOrder in its types, but the runtime has it)
         if (s.order)
             yn.setOrder?.(cssNum(s.order));
-        // Min/max dimensions
+        // Min/max dimensions (px or % of the parent)
         if (s.minWidth)
-            yn.setMinWidth(cssNum(s.minWidth));
+            yn.setMinWidth(cssSizeValue(s.minWidth));
         if (s.maxWidth)
-            yn.setMaxWidth(cssNum(s.maxWidth));
+            yn.setMaxWidth(cssSizeValue(s.maxWidth));
         if (s.minHeight)
-            yn.setMinHeight(cssNum(s.minHeight));
+            yn.setMinHeight(cssSizeValue(s.minHeight));
         if (s.maxHeight)
-            yn.setMaxHeight(cssNum(s.maxHeight));
+            yn.setMaxHeight(cssSizeValue(s.maxHeight));
         // Box sizing
         if (s.boxSizing === "border-box")
             yn.setBoxSizing?.(Yoga.BOX_SIZING_BORDER_BOX);
@@ -233,18 +233,18 @@ export class YogaLayoutEngine {
         else
             yn.setPositionType(Yoga.POSITION_TYPE_STATIC);
         if (s.top !== undefined)
-            yn.setPosition(Yoga.EDGE_TOP, cssNum(s.top));
+            yn.setPosition(Yoga.EDGE_TOP, cssSizeValue(s.top));
         if (s.right !== undefined)
-            yn.setPosition(Yoga.EDGE_RIGHT, cssNum(s.right));
+            yn.setPosition(Yoga.EDGE_RIGHT, cssSizeValue(s.right));
         if (s.bottom !== undefined)
-            yn.setPosition(Yoga.EDGE_BOTTOM, cssNum(s.bottom));
+            yn.setPosition(Yoga.EDGE_BOTTOM, cssSizeValue(s.bottom));
         if (s.left !== undefined)
-            yn.setPosition(Yoga.EDGE_LEFT, cssNum(s.left));
-        // Width/height (explicit)
+            yn.setPosition(Yoga.EDGE_LEFT, cssSizeValue(s.left));
+        // Width/height (explicit; px or % of the parent)
         if (s.width)
-            yn.setWidth(cssNum(s.width));
+            yn.setWidth(cssSizeValue(s.width));
         if (s.height)
-            yn.setHeight(cssNum(s.height));
+            yn.setHeight(cssSizeValue(s.height));
         const aspectRatio = parseAspectRatio(s.aspectRatio);
         if (aspectRatio !== undefined)
             yn.setAspectRatio(aspectRatio);
@@ -271,7 +271,11 @@ export class YogaLayoutEngine {
         // Leaf nodes with text: let Yoga pass available width into measurement so
         // wrapped text can expand height under constraints.
         if (node.children.length === 0) {
-            const textLike = node.tag === "text" || node.tag === "button" || node.tag === "check" || node.tag === "radio";
+            // select is text-like too: its label is the current option, and the
+            // generic else-branch sizes the width without the UA control padding —
+            // a wider option ("Gamma" vs "Alpha" in a proportional font) then
+            // overflows the box and wraps mid-word.
+            const textLike = node.tag === "text" || node.tag === "button" || node.tag === "check" || node.tag === "radio" || node.tag === "select";
             if (textLike) {
                 yn.setMeasureFunc((width, widthMode) => {
                     const hasWidth = widthMode !== Yoga.MEASURE_MODE_UNDEFINED && Number.isFinite(width) && width > 0;
@@ -284,8 +288,9 @@ export class YogaLayoutEngine {
             }
             else {
                 const intrinsic = measureFn(node);
-                const childPadV = cssPadV(s.padding);
-                const childPadH = cssPadH(s.padding);
+                const [padTop, , , padLeft] = expandBoxShorthand(s.padding);
+                const childPadV = typeof padTop === "number" ? padTop : 0;
+                const childPadH = typeof padLeft === "number" ? padLeft : 0;
                 const childBorder = cssBorderWidth(s.border);
                 if (!s.width && intrinsic.w > 0) {
                     yn.setWidth(Math.ceil(intrinsic.w + childPadH * 2 + childBorder * 2));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@typecad/ui",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.13",
   "description": "TypeCAD UI authoring library — HTML/CSS-driven graphics for microcontrollers",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,6 +25,9 @@
       "types": "./dist/ui-engine/*.d.ts",
       "default": "./dist/ui-engine/*.js"
     },
+    "./themes/*": {
+      "default": "./themes/*"
+    },
     "./preview/*": {
       "types": "./dist/preview/*.d.ts",
       "default": "./dist/preview/*.js"
@@ -37,14 +40,17 @@
   "sideEffects": false,
   "files": [
     "dist",
-    "src"
+    "src",
+    "assets"
   ],
   "dependencies": {
-    "@typecad/cuttlefish": "1.0.0-alpha.12",
+    "@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"
   },