feat(theme-studio): previews render the chosen face height

heightCssValue maps a face's height to CSS from its stored kind: a relative multiplier renders as em, an absolute 1/10pt value as true pt, with legacy objects falling back to integer/fractional inference. uiCss feeds it to the mock editor, so the mode-line, mode-line-inactive, and line-number bars visibly thicken with an absolute height while the buffer text stays put; paintUI scales the UI row's sample text; the package-preview span builder swaps its em-only sizing for the same kind-aware value.

faceCss now accepts a unit-carrying string for fontSize alongside the existing em number.

1 files changed, 13 insertions, 4 deletions

diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index ab3a273a..2f74bee9 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -628,7 +628,7 @@ function faceCss(face,fg,bg,opts){
   parts.push('font-weight:'+cssWeight(face.weight),
              'font-style:'+(face.slant||'normal'),
              'text-decoration:'+faceDecoration(face));
-  if(opts.fontSize!=null)parts.push('font-size:'+opts.fontSize+'em');
+  if(opts.fontSize!=null)parts.push('font-size:'+opts.fontSize+(typeof opts.fontSize==='number'?'em':''));
   const bx=boxCss(face.box,opts.boxBg);
   if(bx)parts.push('box-shadow:'+bx);
   return parts.join(';');
@@ -1162,6 +1162,15 @@ function parseHeightEntry(kind,raw){
 }
 // The computed hint beside an absolute entry: 130 -> "= 13.0pt".
 function ptHint(height){return typeof height==='number'&&isFinite(height)?('= '+(height/10).toFixed(1)+'pt'):'';}
+// CSS font-size for a face's height: a relative multiplier renders as em, an
+// absolute 1/10pt value as true pt (the preview shows real size), unset or the
+// identity 1 as null (inherit). The stored heightMode rules; a legacy object
+// without one falls back to integer/fractional inference, same as the loader.
+function heightCssValue(f){
+  if(!f||typeof f.height!=='number'||!isFinite(f.height)||f.height===1)return null;
+  const kind=f.heightMode||(Number.isInteger(f.height)?'abs':'rel');
+  return kind==='abs'?(f.height/10)+'pt':f.height+'em';
+}
 
 // Compose an element-hover tooltip: the face's docstring on top, the existing
 // hover text (e.g. the bare face name) below it, separated by a blank line. A
@@ -2612,7 +2621,7 @@ function flashUiPreview(f){const sp=document.querySelectorAll(`#mockframe [data-
 function flashPkg(f){flashRow(document.querySelector(`#pkgbody tr[data-face="${f}"]`));}
 function flashPkgPreview(f){const sp=document.querySelectorAll(`#pkgpreview [data-face="${f}"]`);if(sp.length){flashEls(sp);return;}const row=document.querySelector(`#pkgbody tr[data-face="${f}"]`);if(row)flashEl(row.querySelector('.cat'));}
 function mockSpan(k,t){return `<span data-k="${k}" style="${syntaxStyle(k)}">${esc(t)}</span>`;}
-function uiCss(o,fgv,bgv,opts={}){const fg=fgv===undefined?effFg(o.fg):fgv,bg=bgv===undefined?o.bg:bgv;return faceCss(o,fg,bg,{noBg:opts.noBg,boxBg:bg||MAP['bg']});}
+function uiCss(o,fgv,bgv,opts={}){const fg=fgv===undefined?effFg(o.fg):fgv,bg=bgv===undefined?o.bg:bgv;return faceCss(o,fg,bg,{noBg:opts.noBg,fontSize:heightCssValue(o),boxBg:bg||MAP['bg']});}
 // Size a preview pane to its faces table, minus the label bar above it. Shared by
 // the UI mock and the package preview, which differ only in their element IDs.
 function syncPaneHeight(tableId,paneId){const t=document.getElementById(tableId),m=document.getElementById(paneId);if(!t||!m)return;const lb=m.previousElementSibling,lbh=lb?lb.getBoundingClientRect().height+10:30;m.style.height=Math.max(t.getBoundingClientRect().height-lbh,220)+'px';}
@@ -2788,7 +2797,7 @@ function buildPkgTable(){
 // app.js. Pure preview HTML builders (ofs/os/previewLines + renderXxxPreview);
 // they reference shared globals (PKGMAP, MAP, faceCss, effFg, ...) and are
 // inlined into the page's single script element via the PREVIEWS_J token in app.js.
-function ofs(app,face){const f=PKGMAP[app][face]||{},fg=effFg(pkgEffFg(app,face)),bg=pkgEffBg(app,face);return faceCss(f,fg,bg,{fontSize:(f.height||1),boxBg:bg||MAP['bg']});}
+function ofs(app,face){const f=PKGMAP[app][face]||{},fg=effFg(pkgEffFg(app,face)),bg=pkgEffBg(app,face);return faceCss(f,fg,bg,{fontSize:heightCssValue(f),boxBg:bg||MAP['bg']});}
 // The CSS for a UI-owned face rendered off any preview surface: effective fg
 // (floored to the default fg) and bg, following the built-in UI inherit chain so
 // the rendered color matches what the registry reports. The @ui counterpart to ofs.
@@ -4067,7 +4076,7 @@ function worstCellHtml(face){
 // Repaint every covered overlay face (their floors depend on the syntax palette,
 // so a syntax-color edit has to refresh them even though it doesn't rebuild the table).
 function repaintCovered(){COVERED_FACES.forEach(f=>{if(UIMAP[f]&&document.getElementById('uicr-'+f))paintUI(f);});}
-function paintUI(face){const pv=document.getElementById('uiprev-'+face);if(!pv)return;const o=UIMAP[face];pv.style.color=effFg(o.fg);pv.style.background=effBg(o.bg);pv.style.fontWeight=cssWeight(o.weight);pv.style.fontStyle=o.slant||'normal';pv.style.textDecoration=(o.underline?'underline ':'')+(o.strike?'line-through':'')||'none';pv.style.boxShadow=boxCss(o.box,effBg(o.bg));
+function paintUI(face){const pv=document.getElementById('uiprev-'+face);if(!pv)return;const o=UIMAP[face];pv.style.color=effFg(o.fg);pv.style.background=effBg(o.bg);pv.style.fontWeight=cssWeight(o.weight);pv.style.fontStyle=o.slant||'normal';pv.style.fontSize=heightCssValue(o)||'';pv.style.textDecoration=(o.underline?'underline ':'')+(o.strike?'line-through':'')||'none';pv.style.boxShadow=boxCss(o.box,effBg(o.bg));
   const report=coveredContrastReport(face);
   pv.title='';
   const cr=document.getElementById('uicr-'+face);if(cr){cr.title='';const wc=worstCellHtml(face);if(wc!==null){cr.title=report.empty?'this overlay has no syntax foreground set yet':(failureTitle(report)||'all covered text clears '+WORST_TARGET.toFixed(1));cr.innerHTML=wc;}else{const efg=effFg(o.fg),ebg=effBg(o.bg),r=contrast(efg,ebg);cr.innerHTML=crHtml(r);}}}