From 59f4f54e518db3323cd7aaabfdc48ecb2bdaf40d Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sun, 14 Jun 2026 19:09:37 -0500
Subject: feat(theme-studio): auto-dim split preview

auto-dim-other-buffers is a package face, not a theme face, so build-inventory.el (it scans only elpa/straight packages) never listed it and the studio couldn't theme it. This adds it as a bespoke app.

The preview is a vertical split: the focused window on the left in real syntax colors, the same code on the right collapsed to the single auto-dim-other-buffers face, the way Emacs renders a non-selected window. Both panes follow the language selector. A trailing row shows auto-dim-other-buffers-hide, whose foreground matches the background so it vanishes when dimmed.

A #autodimtest gate covers the split, the uniform recolor, and language sync.
---
 scripts/theme-studio/app.js | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

(limited to 'scripts/theme-studio/app.js')

diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index 5056a7be8..e6951384a 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -828,7 +828,47 @@ function renderTelegaPreview(){const a='telega',L=[];
   L.push('Webpage '+os(a,'telega-webpage-title','Title')+' '+os(a,'telega-webpage-subtitle','Subtitle')+' '+os(a,'telega-webpage-header','Header')+' '+os(a,'telega-webpage-subheader','Subheader')+' '+os(a,'telega-webpage-outline','outline')+' '+os(a,'telega-webpage-fixed','fixed')+' '+os(a,'telega-webpage-preformatted','pre')+' '+os(a,'telega-webpage-marked','marked')+' '+os(a,'telega-webpage-strike-through','strike')+' '+os(a,'telega-webpage-chat-link','chat-link'));
   return `<div style="padding:12px 16px;font:12pt/1.7 monospace;white-space:pre">${L.join('\n')}</div>`;}
 function genericPreview(app){let h='<div style="padding:10px 14px;font:12pt/1.8 monospace">';for(const [face,label] of APPS[app].faces)h+=`<div data-face="${face}" style="${ofs(app,face)}">${esc(label)}</div>`;return h+'</div>';}
+// Bespoke split preview: a focused window beside its auto-dimmed twin, both
+// showing the language selected at the top of the page (kept in sync via the
+// langsel onchange, which re-runs buildPkgPreview).  The left pane carries the
+// real per-token syntax colors; the right pane shows what auto-dim does -- every
+// default/font-lock face remaps to the single `auto-dim-other-buffers' face, so
+// the same code collapses to one faded foreground on the dim background.  The
+// trailing row demonstrates `auto-dim-other-buffers-hide' (org hidden text whose
+// foreground matches the background, so it vanishes in a dimmed window).
+function renderAutodimPreview(){
+  const a='auto-dim-other-buffers';
+  const langsel=document.getElementById('langsel');
+  const lang=(langsel&&langsel.value)||Object.keys(SAMPLES)[0];
+  const lines=(SAMPLES[lang]||[]).slice(0,9);
+  let lit='';
+  for(const line of lines){
+    if(!line.length){lit+='\n';continue;}
+    for(const [k,t] of line)lit+=`<span data-k="${k}" style="${syntaxStyle(k)}">${esc(t)}</span>`;
+    lit+='\n';}
+  const dimFg=effFg(pkgEffFg(a,'auto-dim-other-buffers')),dimBg=pkgEffBg(a,'auto-dim-other-buffers')||'#000000';
+  let dim='';
+  for(const line of lines){
+    if(!line.length){dim+='\n';continue;}
+    for(const [,t] of line)dim+=esc(t);
+    dim+='\n';}
+  const hideFg=effFg(pkgEffFg(a,'auto-dim-other-buffers-hide')),hideBg=pkgEffBg(a,'auto-dim-other-buffers-hide')||dimBg;
+  const foldText='··· folded body (hidden when dimmed) ···';
+  const accent=uf('cursor').bg||'#67809c';
+  const pane=(label,body,bg,focused)=>
+    `<div style="flex:1;min-width:20ch;border:${focused?'2px solid '+accent:'1px solid #2a2a2a'};border-radius:4px;overflow:hidden">`
+    +`<div style="text-align:center;font:bold 10pt monospace;padding:4px;color:${focused?'#cdced1':'#8a8a8a'};background:${focused?'#1a1a1a':'#0a0a0a'};border-bottom:1px solid #2a2a2a">${label}</div>`
+    +`<div style="padding:10px 12px;font:12pt/1.6 monospace;white-space:pre;background:${bg}">${body}</div></div>`;
+  const litBody=lit+'\n'+`<span style="color:#5e6770">${esc(foldText)}</span>`;
+  const dimBody=`<span data-face="auto-dim-other-buffers" style="color:${dimFg}">${dim}</span>\n`
+    +`<span data-face="auto-dim-other-buffers-hide" style="color:${hideFg};background:${hideBg}">${esc(foldText)}</span>`;
+  return `<div style="display:flex;gap:12px;padding:12px 16px;background:${MAP['bg']}">`
+    +pane('normal',litBody,MAP['bg'],true)
+    +pane('auto-dim',dimBody,dimBg,false)
+    +`</div>`;
+}
 const PACKAGE_PREVIEWS={
+  autodim:renderAutodimPreview,
   org:renderOrgPreview,magit:renderMagitPreview,elfeed:renderElfeedPreview,ghostel:renderGhostelPreview,
   dashboard:renderDashboardPreview,mu4e:renderMu4ePreview,lsp:renderLspPreview,gitgutter:renderGitGutterPreview,
   flycheck:renderFlycheckPreview,dired:renderDiredPreview,dirvish:renderDirvishPreview,calibredb:renderCalibredbPreview,
-- 
cgit v1.2.3