fix(theme-studio): keep an expander open across a table rebuild

A package edit rebuilds the whole table, which collapsed any open expander under the user mid-edit. Track open rows in a module-level EXPANDED set, keyed by element/face, and reopen them on rebuild. Editing a value inside an open expander now leaves the row open. The expand-all/collapse-all and per-row toggles keep the set in sync.

1 files changed, 32 insertions, 5 deletions

diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index fe09d1900..8f23d52f1 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -1751,8 +1751,14 @@ function mkDetailEditor(face,onChange,opts={}){
 // across the table) holding mkDetailEditor. The caller drops the button into a
 // cell, adds the returned locks to the row's lock cell, and inserts detailRow
 // right after the main row.
+// Which rows have their detail expanded, keyed by the row's element/face key.
+// Held outside the DOM so a table rebuild (a package edit rebuilds the whole
+// table) re-opens the rows that were open, instead of collapsing them under the
+// user — editing a value in an open expander must not close it.
+let EXPANDED=new Set();
 function mkExpander(face,colspan,onChange,opts={}){
   const detail=document.createElement('tr');detail.className='detailrow';detail.style.display='none';
+  if(opts.expandKey&&EXPANDED.has(opts.expandKey))detail.style.display='';
   const btn=document.createElement('button');btn.className='exptoggle';
   // The disclosure triangle shows the row's state: ▶ collapsed, ▼ expanded.
   const setGlyph=()=>{const open=detail.style.display!=='none';btn.textContent=open?'▼':'▶';btn.classList.toggle('on',open);};
@@ -1763,13 +1769,15 @@ function mkExpander(face,colspan,onChange,opts={}){
   const refreshNd=()=>{const nd=ndCheck();btn.classList.toggle('exp-nd',nd);btn.title=nd?'more attributes (some differ from default)':'more attributes';};
   const wrapped=()=>{onChange();refreshNd();};
   const td=document.createElement('td');td.colSpan=colspan;const {el,locks}=mkDetailEditor(face,wrapped,opts);td.appendChild(el);detail.appendChild(td);
-  btn.onclick=()=>{detail.style.display=detail.style.display==='none'?'':'none';setGlyph();syncExpandAllBtns();};
+  btn.onclick=()=>{const willOpen=detail.style.display==='none';detail.style.display=willOpen?'':'none';
+    if(opts.expandKey){willOpen?EXPANDED.add(opts.expandKey):EXPANDED.delete(opts.expandKey);}
+    setGlyph();syncExpandAllBtns();};
   refreshNd();setGlyph();
   return {btn,detail,locks};}
 // Expand/collapse every row in a table at once, then sync the per-row triangles.
 function setAllExpanded(tableId,expand){
   const tb=document.getElementById(tableId);if(!tb)return;
-  tb.querySelectorAll('tr.detailrow').forEach(d=>{d.style.display=expand?'':'none';});
+  tb.querySelectorAll('tr.detailrow').forEach(d=>{d.style.display=expand?'':'none';const k=d.dataset.detailFor;if(k){expand?EXPANDED.add(k):EXPANDED.delete(k);}});
   tb.querySelectorAll('.exptoggle').forEach(b=>{b.textContent=expand?'▼':'▶';b.classList.toggle('on',expand);});
 }
 // The header-level expand/collapse-all toggle for a table. Its label and triangle
@@ -1862,7 +1870,7 @@ function buildTable(){
     const c0=document.createElement('td');c0.appendChild(dd);
     const cB=document.createElement('td');cB.appendChild(bgd);
     const cX=document.createElement('td');const boxCtl=mkBoxControl(()=>syntaxFace(kind).box,b=>{syntaxFace(kind).box=b;styleEx();renderCode();},{compact:true});cX.appendChild(boxCtl);
-    const exp=mkExpander(syntaxFace(kind),tableColCount('legtable'),()=>{styleEx();renderCode();},{showInheritHeight:true,inheritOptions:[''].concat(BASE_INHERITS),defaultHex:rowFg(),ndCheck:()=>overflowNonDefault(syntaxFace(kind),DEFAULT_SYNTAX[kind],true)});
+    const exp=mkExpander(syntaxFace(kind),tableColCount('legtable'),()=>{styleEx();renderCode();},{expandKey:kind,showInheritHeight:true,inheritOptions:[''].concat(BASE_INHERITS),defaultHex:rowFg(),ndCheck:()=>overflowNonDefault(syntaxFace(kind),DEFAULT_SYNTAX[kind],true)});
     exp.detail.dataset.detailFor=kind;
     const lkTd=mkLockCell(kind,[dd,bgd,...stCtls,boxCtl,...exp.locks]);
     const c2=document.createElement('td');c2.className='cat';c2.title=composeHoverTitle(SYNTAX_DOCS[kind],c2.title);c2.appendChild(exp.btn);
@@ -2461,7 +2469,7 @@ function buildPkgTable(){
     const nd=faceBoxNonDefaults(
       {fg:nameToHex(f.fg,PALETTE),bg:nameToHex(f.bg,PALETTE),weight:f.weight,slant:f.slant,underline:f.underline,strike:f.strike,inherit:f.inherit,height:f.height,box:f.box},
       {fg:nameToHex(def.fg,PALETTE),bg:nameToHex(def.bg,PALETTE),weight:def.weight,slant:def.slant,underline:def.underline,strike:def.strike,inherit:def.inherit,height:def.height,box:def.box});
-    const exp=mkExpander(f,tableColCount('pkgtable'),()=>{f.source='user';pkgChanged();},{showInheritHeight:true,inheritOptions:inh,defaultHex:effFg(pkgEffFg(app,face)),ndCheck:()=>overflowNonDefault(f,def,true)});
+    const exp=mkExpander(f,tableColCount('pkgtable'),()=>{f.source='user';pkgChanged();},{expandKey:face,showInheritHeight:true,inheritOptions:inh,defaultHex:effFg(pkgEffFg(app,face)),ndCheck:()=>overflowNonDefault(f,def,true)});
     exp.detail.dataset.detailFor=face;
     const c0=document.createElement('td');c0.className='cat';c0.title=composeHoverTitle(FACE_DOCS[face],face);c0.appendChild(exp.btn);
     const c0lbl=document.createElement('span');c0lbl.textContent=' '+label;c0lbl.style.cursor='pointer';c0lbl.onclick=()=>flashPkgPreview(face);c0.appendChild(c0lbl);
@@ -3013,7 +3021,7 @@ function buildUITable(){
   const tb=document.getElementById('uibody');tb.innerHTML='';
   for(const [face,label,ex] of UI_FACES){
     const tr=document.createElement('tr');tr.dataset.face=face;
-    const exp=mkExpander(UIMAP[face],tableColCount('uitable'),()=>{paintUI(face);buildMockFrame();},{showInheritHeight:true,inheritOptions:[''].concat(BASE_INHERITS),defaultHex:effFg(UIMAP[face].fg),ndCheck:()=>overflowNonDefault(UIMAP[face],DEFAULT_UIMAP[face],true)});
+    const exp=mkExpander(UIMAP[face],tableColCount('uitable'),()=>{paintUI(face);buildMockFrame();},{expandKey:face,showInheritHeight:true,inheritOptions:[''].concat(BASE_INHERITS),defaultHex:effFg(UIMAP[face].fg),ndCheck:()=>overflowNonDefault(UIMAP[face],DEFAULT_UIMAP[face],true)});
     exp.detail.dataset.detailFor=face;
     const c0=document.createElement('td');c0.className='cat';c0.title=composeHoverTitle(FACE_DOCS[face],c0.title);c0.appendChild(exp.btn);
     const c0lbl=document.createElement('span');c0lbl.textContent=' '+label;c0lbl.style.cursor='pointer';c0lbl.title='flash this face in the live preview';c0lbl.onclick=()=>flashUiPreview(face);c0.appendChild(c0lbl);
@@ -4043,6 +4051,25 @@ if(location.hash==='#expandalltest'){let ok=true;const notes=[];const A=(c,n)=>{
  A(btn.textContent.indexOf('▼')===0,'button reflects a single open row as ▼ collapse all');
  document.title='EXPANDALLTEST '+(ok?'PASS':'FAIL');
  const ea=document.createElement('div');ea.id='expandalltest';ea.textContent='EXPANDALLTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(ea);}
+// Expander-persistence gate (open with #expandpersisttest): a package edit rebuilds
+// the whole table, so an open expander must reopen instead of collapsing under the
+// user. Editing a value inside the open expander must not close the row.
+if(location.hash==='#expandpersisttest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ EXPANDED.clear();
+ const app=curApp(),face=APPS[app].faces[0][0];buildPkgTable();
+ const row=()=>document.querySelector('#pkgbody tr[data-face="'+face+'"]');
+ const detail=()=>document.querySelector('#pkgbody tr.detailrow[data-detail-for="'+face+'"]');
+ A(detail()&&detail().style.display==='none','expander starts collapsed');
+ row().querySelector('.exptoggle').click();
+ A(detail()&&detail().style.display!=='none','expander opens on toggle');
+ const hin=detail().querySelector('.hstep');hin.value='1.4';hin.dispatchEvent(new Event('change'));
+ A(detail()&&detail().style.display!=='none','expander stays open after an in-expander edit rebuilds the row');
+ A(PKGMAP[app][face].height===1.4,'the in-expander edit still wrote the model');
+ row().querySelector('.exptoggle').click();buildPkgTable();
+ A(detail()&&detail().style.display==='none','a collapsed expander stays collapsed across a rebuild');
+ EXPANDED.clear();buildPkgTable();
+ document.title='EXPANDPERSISTTEST '+(ok?'PASS':'FAIL');
+ const ep=document.createElement('div');ep.id='expandpersisttest';ep.textContent='EXPANDPERSISTTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(ep);}
 // 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.