feat(theme-studio): expander label hovers and a view-dropdown lock indicator

Each label in the expander detail row now carries an explanatory hover (DETAIL_HOVERS), matching the table-header labels. The view dropdown prefixes a lock glyph on any view whose elements are all locked, recomputed on every lock change through updateLockToggles.

3 files changed, 108 insertions, 8 deletions

diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index a158004fc..2c1640e1a 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -208,9 +208,21 @@ function mkCheck(get,set){const c=document.createElement('input');c.type='checkb
 // inline column) inherit + height. Each control mutates FACE and calls onChange.
 // Returns the element plus the interactive controls so the row's lock cell can
 // disable them. opts.inheritOptions and opts.showInheritHeight gate the last two.
+// Hover help for each expander field, so the detail labels explain themselves the
+// way the table-header labels do. Keyed by the label text passed to add().
+const DETAIL_HOVERS={
+  'distant fg':'foreground swapped in when the text sits on a background too close to its own color to read (Emacs :distant-foreground)',
+  'family':'font family for this face; blank inherits the default (Emacs :family)',
+  'underline':'underline style and color (Emacs :underline)',
+  'overline':'a line drawn above the text (Emacs :overline)',
+  'inverse':'swap the foreground and background (Emacs :inverse-video)',
+  'extend':'extend the background past the end of the line to the window edge (Emacs :extend)',
+  'inherit':'base face this one inherits unset attributes from (Emacs :inherit)',
+  'height':'text size as a scaling factor of the inherited height, 0.1 to 2.0 (Emacs :height)'
+};
 function mkDetailEditor(face,onChange,opts={}){
   const wrap=document.createElement('div');wrap.className='detailedit';const locks=[];
-  const add=(label,el)=>{const g=document.createElement('label');g.className='detailfield';const s=document.createElement('span');s.textContent=label;g.append(s,el);wrap.appendChild(g);locks.push(el);};
+  const add=(label,el)=>{const g=document.createElement('label');g.className='detailfield';g.title=DETAIL_HOVERS[label]||'';const s=document.createElement('span');s.textContent=label;g.append(s,el);wrap.appendChild(g);locks.push(el);};
   const df=mkColorDropdown(ddList(face['distant-fg']||''),face['distant-fg']||'',h=>{face['distant-fg']=h||null;onChange();},{compact:true,defaultHex:opts.defaultHex});
   add('distant fg',df);
   const fam=document.createElement('input');fam.type='text';fam.className='detailinput';fam.placeholder='font family';fam.value=face.family||'';fam.onchange=()=>{face.family=fam.value.trim()||null;onChange();};
@@ -270,7 +282,7 @@ function updateLockToggle(tier){
   const ids={syntax:'syntaxlocktoggle',ui:'uilocktoggle',pkg:'pkglocktoggle'},b=document.getElementById(ids[tier]);if(!b)return;
   b.textContent=lockToggleLabel(tierLockKeys(tier),LOCKED);
 }
-function updateLockToggles(){updateLockToggle('syntax');updateLockToggle('ui');updateLockToggle('pkg');}
+function updateLockToggles(){updateLockToggle('syntax');updateLockToggle('ui');updateLockToggle('pkg');updateViewLockIndicators();}
 function toggleAllLocks(tier){
   const all=areAllLocked(tierLockKeys(tier),LOCKED);
   LOCKED=toggleLockSet(tierLockKeys(tier),LOCKED);
@@ -616,13 +628,25 @@ function pkgEffBg(app,face,seen){return effResolve(PKGMAP,app,face,'bg',seen);}
 // One dropdown drives the whole assignment panel: two editor entries (@code,
 // @ui) then a non-selectable "package faces" optgroup holding every app,
 // alphabetically by label. onViewChange shows exactly one of the three view blocks.
+// Lock keys for one view value (@code / @ui / a package app), so the view
+// dropdown can flag a view whose every element is locked.
+function viewLockKeys(v){
+  if(v==='@code')return syntaxLockKeys();
+  if(v==='@ui')return uiLockKeys();
+  return (APPS[v]?APPS[v].faces:[]).map(f=>'pkg:'+v+':'+f[0]);
+}
+// Prefix a lock glyph on every view whose elements are all locked; leave the rest
+// bare. The base label rides in dataset.label so re-running never stacks glyphs.
+function updateViewLockIndicators(){const s=document.getElementById('viewsel');if(!s)return;
+  for(const o of s.querySelectorAll('option')){const base=o.dataset.label||o.textContent;
+    o.textContent=(areAllLocked(viewLockKeys(o.value),LOCKED)?'🔒 ':'')+base;}}
 function buildViewSel(){const s=document.getElementById('viewsel');if(!s)return;s.innerHTML='';
-  const mk=(v,t)=>{const o=document.createElement('option');o.value=v;o.textContent=t;return o;};
+  const mk=(v,t)=>{const o=document.createElement('option');o.value=v;o.dataset.label=t;o.textContent=t;return o;};
   s.appendChild(mk('@code','color/code assignments'));
   s.appendChild(mk('@ui','ui faces'));
   const og=document.createElement('optgroup');og.label='package faces';
   for(const app of appViewKeysSorted(APPS))og.appendChild(mk(app,APPS[app].label));
-  s.appendChild(og);}
+  s.appendChild(og);updateViewLockIndicators();}
 // The ‹ › buttons flanking the dropdown step the selection by DIR and re-render
 // the view (faces table + preview), so you can walk the list without reopening it.
 function stepView(dir){
diff --git a/scripts/theme-studio/browser-gates.js b/scripts/theme-studio/browser-gates.js
index 886e9ec28..6bcb8ae86 100644
--- a/scripts/theme-studio/browser-gates.js
+++ b/scripts/theme-studio/browser-gates.js
@@ -936,6 +936,32 @@ if(location.hash==='#langtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c
  A(s.selectedIndex===s.options.length-1,'next clamps at the last language');
  document.title='LANGTEST '+(ok?'PASS':'FAIL');
  const ld=document.createElement('div');ld.id='langtest';ld.textContent='LANGTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(ld);}
+// View-lock-indicator gate (open with #viewlocktest): the view dropdown prefixes a
+// lock glyph on a view whose every element is locked, and clears it otherwise.
+if(location.hash==='#viewlocktest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ LOCKED.clear();updateViewLockIndicators();
+ const s=document.getElementById('viewsel'),codeOpt=()=>[...s.options].find(o=>o.value==='@code');
+ A(codeOpt()&&!codeOpt().textContent.startsWith('🔒'),'unlocked view shows no lock glyph: '+(codeOpt()&&codeOpt().textContent));
+ syntaxLockKeys().forEach(k=>LOCKED.add(k));updateViewLockIndicators();
+ A(codeOpt()&&codeOpt().textContent.startsWith('🔒'),'fully-locked view shows the lock glyph: '+(codeOpt()&&codeOpt().textContent));
+ A(codeOpt()&&codeOpt().textContent.includes('color/code assignments'),'glyph prefixes the base label, not replaces it');
+ LOCKED.delete(syntaxLockKeys()[0]);updateViewLockIndicators();
+ A(codeOpt()&&!codeOpt().textContent.startsWith('🔒'),'unlocking one element clears the glyph');
+ LOCKED.clear();updateViewLockIndicators();
+ document.title='VIEWLOCKTEST '+(ok?'PASS':'FAIL');
+ const vd=document.createElement('div');vd.id='viewlocktest';vd.textContent='VIEWLOCKTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(vd);}
+// Detail-hover gate (open with #detailhovertest): every label in the expander
+// detail row carries an explanatory hover, the way the table-header labels do.
+if(location.hash==='#detailhovertest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ buildUITable();
+ const f=UI_FACES[0][0],detail=document.querySelector('#uibody tr.detailrow[data-detail-for="'+f+'"]');
+ const fields=detail?[...detail.querySelectorAll('.detailfield')]:[];
+ A(fields.length>0,'detail row has fields');
+ A(fields.every(g=>g.title&&g.title.length>0),'every detail field has a hover: '+fields.map(g=>g.querySelector('span').textContent+(g.title?'+':'-')).join(' '));
+ const inh=fields.find(g=>g.querySelector('span').textContent==='inherit');
+ A(inh&&/inherit/i.test(inh.title),'inherit field hover mentions inheritance: '+(inh&&inh.title));
+ document.title='DETAILHOVERTEST '+(ok?'PASS':'FAIL');
+ const dh=document.createElement('div');dh.id='detailhovertest';dh.textContent='DETAILHOVERTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(dh);}
 // Palette default-state gate (open with #paldefaulttest): the studio opens with
 // the palette collapsed to base colors so the span tints don't crowd the first
 // view. initApp() ran at page load, so the live toggle reflects the opening state.
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index 984d90de2..b272048c7 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -1717,9 +1717,21 @@ function mkCheck(get,set){const c=document.createElement('input');c.type='checkb
 // inline column) inherit + height. Each control mutates FACE and calls onChange.
 // Returns the element plus the interactive controls so the row's lock cell can
 // disable them. opts.inheritOptions and opts.showInheritHeight gate the last two.
+// Hover help for each expander field, so the detail labels explain themselves the
+// way the table-header labels do. Keyed by the label text passed to add().
+const DETAIL_HOVERS={
+  'distant fg':'foreground swapped in when the text sits on a background too close to its own color to read (Emacs :distant-foreground)',
+  'family':'font family for this face; blank inherits the default (Emacs :family)',
+  'underline':'underline style and color (Emacs :underline)',
+  'overline':'a line drawn above the text (Emacs :overline)',
+  'inverse':'swap the foreground and background (Emacs :inverse-video)',
+  'extend':'extend the background past the end of the line to the window edge (Emacs :extend)',
+  'inherit':'base face this one inherits unset attributes from (Emacs :inherit)',
+  'height':'text size as a scaling factor of the inherited height, 0.1 to 2.0 (Emacs :height)'
+};
 function mkDetailEditor(face,onChange,opts={}){
   const wrap=document.createElement('div');wrap.className='detailedit';const locks=[];
-  const add=(label,el)=>{const g=document.createElement('label');g.className='detailfield';const s=document.createElement('span');s.textContent=label;g.append(s,el);wrap.appendChild(g);locks.push(el);};
+  const add=(label,el)=>{const g=document.createElement('label');g.className='detailfield';g.title=DETAIL_HOVERS[label]||'';const s=document.createElement('span');s.textContent=label;g.append(s,el);wrap.appendChild(g);locks.push(el);};
   const df=mkColorDropdown(ddList(face['distant-fg']||''),face['distant-fg']||'',h=>{face['distant-fg']=h||null;onChange();},{compact:true,defaultHex:opts.defaultHex});
   add('distant fg',df);
   const fam=document.createElement('input');fam.type='text';fam.className='detailinput';fam.placeholder='font family';fam.value=face.family||'';fam.onchange=()=>{face.family=fam.value.trim()||null;onChange();};
@@ -1779,7 +1791,7 @@ function updateLockToggle(tier){
   const ids={syntax:'syntaxlocktoggle',ui:'uilocktoggle',pkg:'pkglocktoggle'},b=document.getElementById(ids[tier]);if(!b)return;
   b.textContent=lockToggleLabel(tierLockKeys(tier),LOCKED);
 }
-function updateLockToggles(){updateLockToggle('syntax');updateLockToggle('ui');updateLockToggle('pkg');}
+function updateLockToggles(){updateLockToggle('syntax');updateLockToggle('ui');updateLockToggle('pkg');updateViewLockIndicators();}
 function toggleAllLocks(tier){
   const all=areAllLocked(tierLockKeys(tier),LOCKED);
   LOCKED=toggleLockSet(tierLockKeys(tier),LOCKED);
@@ -2376,13 +2388,25 @@ function pkgEffBg(app,face,seen){return effResolve(PKGMAP,app,face,'bg',seen);}
 // One dropdown drives the whole assignment panel: two editor entries (@code,
 // @ui) then a non-selectable "package faces" optgroup holding every app,
 // alphabetically by label. onViewChange shows exactly one of the three view blocks.
+// Lock keys for one view value (@code / @ui / a package app), so the view
+// dropdown can flag a view whose every element is locked.
+function viewLockKeys(v){
+  if(v==='@code')return syntaxLockKeys();
+  if(v==='@ui')return uiLockKeys();
+  return (APPS[v]?APPS[v].faces:[]).map(f=>'pkg:'+v+':'+f[0]);
+}
+// Prefix a lock glyph on every view whose elements are all locked; leave the rest
+// bare. The base label rides in dataset.label so re-running never stacks glyphs.
+function updateViewLockIndicators(){const s=document.getElementById('viewsel');if(!s)return;
+  for(const o of s.querySelectorAll('option')){const base=o.dataset.label||o.textContent;
+    o.textContent=(areAllLocked(viewLockKeys(o.value),LOCKED)?'🔒 ':'')+base;}}
 function buildViewSel(){const s=document.getElementById('viewsel');if(!s)return;s.innerHTML='';
-  const mk=(v,t)=>{const o=document.createElement('option');o.value=v;o.textContent=t;return o;};
+  const mk=(v,t)=>{const o=document.createElement('option');o.value=v;o.dataset.label=t;o.textContent=t;return o;};
   s.appendChild(mk('@code','color/code assignments'));
   s.appendChild(mk('@ui','ui faces'));
   const og=document.createElement('optgroup');og.label='package faces';
   for(const app of appViewKeysSorted(APPS))og.appendChild(mk(app,APPS[app].label));
-  s.appendChild(og);}
+  s.appendChild(og);updateViewLockIndicators();}
 // The ‹ › buttons flanking the dropdown step the selection by DIR and re-render
 // the view (faces table + preview), so you can walk the list without reopening it.
 function stepView(dir){
@@ -3949,6 +3973,32 @@ if(location.hash==='#langtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c
  A(s.selectedIndex===s.options.length-1,'next clamps at the last language');
  document.title='LANGTEST '+(ok?'PASS':'FAIL');
  const ld=document.createElement('div');ld.id='langtest';ld.textContent='LANGTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(ld);}
+// View-lock-indicator gate (open with #viewlocktest): the view dropdown prefixes a
+// lock glyph on a view whose every element is locked, and clears it otherwise.
+if(location.hash==='#viewlocktest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ LOCKED.clear();updateViewLockIndicators();
+ const s=document.getElementById('viewsel'),codeOpt=()=>[...s.options].find(o=>o.value==='@code');
+ A(codeOpt()&&!codeOpt().textContent.startsWith('🔒'),'unlocked view shows no lock glyph: '+(codeOpt()&&codeOpt().textContent));
+ syntaxLockKeys().forEach(k=>LOCKED.add(k));updateViewLockIndicators();
+ A(codeOpt()&&codeOpt().textContent.startsWith('🔒'),'fully-locked view shows the lock glyph: '+(codeOpt()&&codeOpt().textContent));
+ A(codeOpt()&&codeOpt().textContent.includes('color/code assignments'),'glyph prefixes the base label, not replaces it');
+ LOCKED.delete(syntaxLockKeys()[0]);updateViewLockIndicators();
+ A(codeOpt()&&!codeOpt().textContent.startsWith('🔒'),'unlocking one element clears the glyph');
+ LOCKED.clear();updateViewLockIndicators();
+ document.title='VIEWLOCKTEST '+(ok?'PASS':'FAIL');
+ const vd=document.createElement('div');vd.id='viewlocktest';vd.textContent='VIEWLOCKTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(vd);}
+// Detail-hover gate (open with #detailhovertest): every label in the expander
+// detail row carries an explanatory hover, the way the table-header labels do.
+if(location.hash==='#detailhovertest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ buildUITable();
+ const f=UI_FACES[0][0],detail=document.querySelector('#uibody tr.detailrow[data-detail-for="'+f+'"]');
+ const fields=detail?[...detail.querySelectorAll('.detailfield')]:[];
+ A(fields.length>0,'detail row has fields');
+ A(fields.every(g=>g.title&&g.title.length>0),'every detail field has a hover: '+fields.map(g=>g.querySelector('span').textContent+(g.title?'+':'-')).join(' '));
+ const inh=fields.find(g=>g.querySelector('span').textContent==='inherit');
+ A(inh&&/inherit/i.test(inh.title),'inherit field hover mentions inheritance: '+(inh&&inh.title));
+ document.title='DETAILHOVERTEST '+(ok?'PASS':'FAIL');
+ const dh=document.createElement('div');dh.id='detailhovertest';dh.textContent='DETAILHOVERTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(dh);}
 // Palette default-state gate (open with #paldefaulttest): the studio opens with
 // the palette collapsed to base colors so the span tints don't crowd the first
 // view. initApp() ran at page load, so the live toggle reflects the opening state.