aboutsummaryrefslogtreecommitdiff
path: root/scripts
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-06-24 19:17:23 -0400
committerCraig Jennings <c@cjennings.net>2026-06-24 19:17:23 -0400
commitd6b10d04b4d3f5a74bdb6beb001824b97fc98969 (patch)
tree1f04b3543403c59787b4bd6309196a4d961adf38 /scripts
parent70c45532f6949e6e4b30d8db2b9b2ef831a11ebb (diff)
downloaddotemacs-d6b10d04b4d3f5a74bdb6beb001824b97fc98969.tar.gz
dotemacs-d6b10d04b4d3f5a74bdb6beb001824b97fc98969.zip
refactor(theme-studio): extract control factories to controls.js, drop dead previewFaceAttrs
I split the custom dropdown, detail-editor, and expander factories out of app.js into controls.js (205 lines), spliced back at a CONTROLS_J token by generate.py. The token sits at the exact extraction point, so the assembled page is byte-identical and every gate passes unchanged. app.js drops from 927 to 721 lines. I also removed previewFaceAttrs (function, export, and test). It was test-only dead code whose docstring stalely claimed the gate calls it. The gate uses assertPreviewFaces instead.
Diffstat (limited to 'scripts')
-rw-r--r--scripts/theme-studio/app-core.js11
-rw-r--r--scripts/theme-studio/app.js206
-rw-r--r--scripts/theme-studio/controls.js209
-rw-r--r--scripts/theme-studio/generate.py4
-rw-r--r--scripts/theme-studio/test-locate.mjs11
-rw-r--r--scripts/theme-studio/theme-studio.html14
6 files changed, 221 insertions, 234 deletions
diff --git a/scripts/theme-studio/app-core.js b/scripts/theme-studio/app-core.js
index 0615faea7..94b5d7ae8 100644
--- a/scripts/theme-studio/app-core.js
+++ b/scripts/theme-studio/app-core.js
@@ -652,15 +652,6 @@ function locateFaceMeta(owner,face,registry){
return e||{owner,face,unassigned:true};
}
-// The owner-aware membership check the preview gate calls: the entry's attributes
-// when (owner, face) is a known face of that owner, null when it isn't (a bad
-// owner is rejected). A known face with no non-default attributes returns {} --
-// still truthy, so membership reads cleanly off the result.
-function previewFaceAttrs(owner,face,registry){
- const e=registry&&registry[locateKey(owner,face)];
- return e?e.attrs:null;
-}
-
// Clickable predicate: an element is on-pane only when its owner is the pane being
// viewed. Recomputed from the current view at render time (never stored in the
// registry), since switching panes changes clickability but not ownership.
@@ -708,4 +699,4 @@ function formatLocateTitle(meta){
return parts.concat(locateAttrsList(meta.attrs)).join(', ');
}
-export { nameToHex, migrateLegacyFace, cssWeight, faceDecoration, boxCss, faceCss, composeHoverTitle, normalizePkgFace, buildPkgmap, packagesForExport, mergePackagesInto, effResolve, resolveSyntaxFg, resolveUiAttr, paletteOptionList, galleryModel, appViewKeysSorted, faceBoxNonDefaults, overflowNonDefault, clampHeight, HEIGHT_MIN, HEIGHT_MAX, stepViewIndex, spanNeighborHex, slugify, fgSetFor, floor, lMax, COVERED_FACES, columnsFromPalette, usedPaletteHexes, paletteUsages, regenColumn, rankByLightness, stepRepointPlan, sortColumns, sortColumnMembers, groundRoleOfEntry, groundColumnMembersFromPalette, clearPalettePlan, deletePaletteColumnPlan, areAllLocked, lockToggleLabel, toggleLockSet, buildLocateRegistry, locateFaceMeta, formatLocateTitle, previewFaceAttrs, isLocateOnPane };
+export { nameToHex, migrateLegacyFace, cssWeight, faceDecoration, boxCss, faceCss, composeHoverTitle, normalizePkgFace, buildPkgmap, packagesForExport, mergePackagesInto, effResolve, resolveSyntaxFg, resolveUiAttr, paletteOptionList, galleryModel, appViewKeysSorted, faceBoxNonDefaults, overflowNonDefault, clampHeight, HEIGHT_MIN, HEIGHT_MAX, stepViewIndex, spanNeighborHex, slugify, fgSetFor, floor, lMax, COVERED_FACES, columnsFromPalette, usedPaletteHexes, paletteUsages, regenColumn, rankByLightness, stepRepointPlan, sortColumns, sortColumnMembers, groundRoleOfEntry, groundColumnMembersFromPalette, clearPalettePlan, deletePaletteColumnPlan, areAllLocked, lockToggleLabel, toggleLockSet, buildLocateRegistry, locateFaceMeta, formatLocateTitle, isLocateOnPane };
diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index 889d49528..d1aa2eb2c 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -68,211 +68,7 @@ function renderCode(){
cp.onclick=(e)=>{const s=e.target.closest('[data-k]');if(s)flashAssign(s.dataset.k);};
buildMockFrame();
}
-// Custom color dropdown: a real swatch + name + hex per row, since native
-// <option> background colors render unreliably on Linux Chrome. The popup is
-// fixed-positioned on <body> so a table's overflow can't clip it.
-let _ddPop=null;
-function closeColorDropdown(){if(_ddPop){_ddPop.remove();_ddPop=null;}}
-document.addEventListener('pointerdown',e=>{if(_ddPop&&!e.target.closest('.cdd')&&!e.target.closest('.cddpop'))closeColorDropdown();});
-function mkColorDropdown(options,cur,onPick,opts={}){
- const wrap=document.createElement('div');wrap.className='cstep';
- const left=document.createElement('button'),right=document.createElement('button');
- left.className='cstepbtn';right.className='cstepbtn';left.type=right.type='button';
- left.textContent='‹';right.textContent='›';left.title='move to next darker color in this column';right.title='move to next lighter color in this column';
- const t=document.createElement('div');t.className='cdd'+(opts.compact?' compact':'');t.tabIndex=0;
- const nameOf=h=>{const o=options.find(p=>p[0]===h);return o?o[1]:(h||'none');};
- function step(dir){if(wrap.dataset.locked==='1')return;const next=spanNeighborHex(cur,PALETTE,groundPair(),dir);if(!next)return;cur=next;paint();onPick(next);}
- function paintStepButtons(){
- const locked=wrap.dataset.locked==='1';
- left.disabled=locked||!spanNeighborHex(cur,PALETTE,groundPair(),-1);
- right.disabled=locked||!spanNeighborHex(cur,PALETTE,groundPair(),1);
- }
- function paint(){const shown=cur||(opts.defaultHex||''),nm=cur?nameOf(cur):(opts.defaultName||nameOf(cur)),ttl=cur?(nm+' '+cur):(nm+(shown?' -> '+shown:''));t.style.background=shown||'#161412';t.style.color=shown?textOn(shown):'#b4b1a2';t.dataset.val=cur||'';t.title=ttl;t.classList.toggle('is-default',!cur);t.classList.toggle('gone',!!cur&&nameOf(cur)==='(gone)');
- t.innerHTML=opts.compact?`<span class="cddsw" style="background:${shown||'transparent'}"></span>`:`<span class="cddsw" style="background:${shown||'transparent'}"></span>${esc(nm)}`;paintStepButtons();}
- paint();
- left.onclick=e=>{e.stopPropagation();step(-1);};
- right.onclick=e=>{e.stopPropagation();step(1);};
- t.onclick=(e)=>{e.stopPropagation();if(wrap.dataset.locked==='1')return;if(_ddPop){closeColorDropdown();return;}
- // 2D gallery: a grid of swatches in the palette-panel shape (ground strip,
- // then one row per family) instead of a long vertical list. galleryModel is
- // the shared pure layout (app-core.js).
- const pop=document.createElement('div');pop.className='cddpop cddgrid';
- const model=galleryModel(cur,PALETTE,groundPair());
- const pick=(hex)=>{cur=hex;paint();closeColorDropdown();onPick(hex);};
- const head=document.createElement('div');head.className='cddghead';
- const def=document.createElement('button');def.type='button';
- def.className='cddgdef'+(model.default.selected?' sel':'');
- def.textContent=opts.defaultName||'default';def.title='clear — use the default';
- def.onclick=(ev)=>{ev.stopPropagation();pick('');};head.appendChild(def);
- if(model.gone){const g=document.createElement('span');g.className='cddgc gone sel';
- g.style.background=model.gone.hex;g.title='(gone) '+model.gone.hex;head.appendChild(g);
- const gl=document.createElement('span');gl.className='cddglbl';gl.textContent='(gone) '+model.gone.hex;head.appendChild(gl);}
- pop.appendChild(head);
- for(const row of model.rows){const rr=document.createElement('div');rr.className='cddgrow';
- for(const c of row.cells){const sw=document.createElement('button');sw.type='button';
- sw.className='cddgc'+(c.selected?' sel':'');sw.style.background=c.hex;
- sw.dataset.hex=c.hex;sw.dataset.name=c.name;sw.title=c.name+' '+c.hex;
- sw.onclick=(ev)=>{ev.stopPropagation();pick(c.hex);};rr.appendChild(sw);}
- pop.appendChild(rr);}
- document.body.appendChild(pop);const r=t.getBoundingClientRect();
- pop.style.left=r.left+'px';pop.style.minWidth=r.width+'px';
- pop.style.top=(r.bottom+2)+'px';
- const ph=pop.getBoundingClientRect().height;
- if(r.bottom+ph>window.innerHeight-6)pop.style.top=Math.max(6,r.top-ph-2)+'px';
- const pr=pop.getBoundingClientRect();
- if(pr.right>window.innerWidth-6)pop.style.left=Math.max(6,window.innerWidth-6-pr.width)+'px';
- _ddPop=pop;};
- t.setValue=h=>{cur=h;paint();};
- wrap.setValue=h=>{cur=h;paint();};
- wrap.syncLocked=paintStepButtons;
- wrap.appendChild(left);wrap.appendChild(t);wrap.appendChild(right);paintStepButtons();
- return wrap;}
-// Standard option list for a swatch dropdown: a "default" entry, then the
-// palette in the same ground/column order as the palette panel. If cur is set
-// but no longer in the palette, surface it as a "(gone)" entry so the row still
-// shows what it points at. Shared by all three tiers.
-function ddList(cur){return paletteOptionList(cur,PALETTE,groundPair());}
-// Shared lock toggle for any table row. lockKey is namespaced per tier (bare
-// syntax kind, 'ui:'+face, 'pkg:'+app+':'+face). els are the row's editable
-// controls — native selects/buttons/inputs are disabled; the custom swatch
-// dropdown (a div) gets data-locked so its onclick refuses to open.
-function mkLockCell(lockKey,els){
- const td=document.createElement('td');td.style.textAlign='center';
- const lk=document.createElement('button');lk.className='lockbtn';
- function paint(){const on=LOCKED.has(lockKey);lk.textContent=on?'🔒':'🔓';lk.classList.toggle('on',on);
- lk.title=on?'locked — click to unlock':'click to lock this decision';
- (els||[]).forEach(el=>{if(!el)return;
- if(el.tagName==='SELECT'||el.tagName==='BUTTON'||el.tagName==='INPUT')el.disabled=on;
- else{el.dataset.locked=on?'1':'';el.classList.toggle('locked',on);if(el.syncLocked)el.syncLocked();}});}
- lk.onclick=()=>{LOCKED.has(lockKey)?LOCKED.delete(lockKey):LOCKED.add(lockKey);paint();updateLockToggles();};
- paint();td.appendChild(lk);return td;}
-// The in-row style controls, shared by the syntax / UI / package tables: a weight
-// selector, a slant selector, and box-like underline and strike controls. Each
-// edit mutates the face object and calls onChange to repaint. Returns the control
-// elements so the caller lays them out and hands them to mkLockCell.
-const WEIGHT_OPTS=[['light','light'],['normal','normal'],['medium','medium'],['semibold','semibold'],['bold','bold'],['heavy','heavy']];
-const SLANT_OPTS=[['normal','normal'],['italic','italic'],['oblique','oblique']];
-// A compact custom dropdown for an enum attribute (weight / slant), themed like
-// the color dropdown. The trigger shows the current value drawn in its own weight
-// or slant; the popup lists each option drawn with the attribute applied, so the
-// choice previews itself. opts.styleFor(value) returns the preview style props
-// ({fontWeight} / {fontStyle}); opts.placeholder is the unset-state label.
-function mkEnumDropdown(options,get,set,opts={}){
- const t=document.createElement('div');t.className='cdd enumdd';t.tabIndex=0;
- const styleFor=opts.styleFor||(()=>({}));
- const labelOf=v=>{const o=options.find(p=>p[0]===v);return o?o[1]:'';};
- function applyPreview(el,v){el.style.fontWeight='';el.style.fontStyle='';const s=styleFor(v);if(s.fontWeight)el.style.fontWeight=s.fontWeight;if(s.fontStyle)el.style.fontStyle=s.fontStyle;}
- function paint(){const v=get()||'';t.dataset.val=v;t.classList.toggle('is-default',!v);
- t.textContent=v?labelOf(v):(opts.placeholder||'set');applyPreview(t,v);t.title=opts.title||'';}
- paint();
- t.onclick=(e)=>{e.stopPropagation();if(t.dataset.locked==='1')return;if(_ddPop){closeColorDropdown();return;}
- const pop=document.createElement('div');pop.className='cddpop enumpop';const cur=get()||'';
- const pick=v=>{set(v||null);paint();closeColorDropdown();};
- const def=document.createElement('button');def.type='button';
- def.className='enumopt enumdef'+(cur===''?' sel':'');def.textContent='default';
- def.title='clear — use the default';def.onclick=ev=>{ev.stopPropagation();pick('');};pop.appendChild(def);
- for(const [v,label] of options){const b=document.createElement('button');b.type='button';
- b.className='enumopt'+(v===cur?' sel':'');b.textContent=label;applyPreview(b,v);
- b.onclick=ev=>{ev.stopPropagation();pick(v);};pop.appendChild(b);}
- document.body.appendChild(pop);const r=t.getBoundingClientRect();
- pop.style.left=r.left+'px';pop.style.minWidth=r.width+'px';pop.style.top=(r.bottom+2)+'px';
- const ph=pop.getBoundingClientRect().height;
- if(r.bottom+ph>window.innerHeight-6)pop.style.top=Math.max(6,r.top-ph-2)+'px';
- _ddPop=pop;};
- t.setValue=()=>paint();t.syncLocked=()=>paint();
- return t;}
-// Underline control: none / line / wave glyph buttons plus a color swatch shown
-// while a style is active. Mirrors mkBoxControl; get()/set() read and write the
-// underline object ({style,color}) or null.
-function mkLineStyleControl(states,get,set,opts={}){const wrap=document.createElement('div');wrap.className='boxctl';
- const cluster=document.createElement('div');cluster.className='boxcluster';const btns={};
- states.forEach(([v,title,glyph])=>{const b=document.createElement('button');b.className='boxbtn';b.dataset.style=v;b.textContent=glyph;b.title=title;
- b.onclick=()=>{const cur=get();set(v?(opts.toState?opts.toState(v,cur):Object.assign({color:(cur&&cur.color)||null},opts.styled?{style:v}:{})):null);paint();};
- cluster.appendChild(b);btns[v]=b;});
- const dd=mkColorDropdown(ddList((get()&&get().color)||''),(get()&&get().color)||'',h=>{const cur=get();if(!cur)return;set(Object.assign({},cur,{color:h||null}));paint();},{compact:true,defaultHex:opts.defaultHex});
- function paint(){const cur=get(),active=opts.styled?(cur&&cur.style?cur.style:''):(cur?'on':'');
- for(const v in btns)btns[v].classList.toggle('on',v===active);
- dd.style.display=active?'':'none';dd.setValue(cur&&cur.color?cur.color:'');
- const locked=wrap.dataset.locked==='1';for(const v in btns)btns[v].disabled=locked;
- const ddoff=locked||!active;dd.dataset.locked=ddoff?'1':'';dd.classList.toggle('locked',ddoff);if(dd.syncLocked)dd.syncLocked();}
- wrap.syncLocked=()=>paint();wrap.append(cluster,dd);paint();return wrap;}
-function mkUnderlineControl(get,set,opts={}){
- return mkLineStyleControl([['','no underline',''],['line','underline','_'],['wave','wavy underline','~']],get,set,Object.assign({styled:true},opts));}
-function mkStrikeControl(get,set,opts={}){
- return mkLineStyleControl([['','no strike',''],['on','strike-through','S']],get,set,Object.assign({styled:false},opts));}
-// In-row style controls: weight + slant selectors and a strike control. The
-// underline control lives in the per-row expander (it carries the wave/color
-// detail), keeping the row compact.
-function mkStyleControls(face,onChange,opts={}){
- const w=mkEnumDropdown(WEIGHT_OPTS,()=>face.weight,v=>{face.weight=v;onChange();},{placeholder:'weight',title:'font weight',styleFor:v=>({fontWeight:cssWeight(v)})});
- const s=mkEnumDropdown(SLANT_OPTS,()=>face.slant,v=>{face.slant=v;onChange();},{placeholder:'slant',title:'font slant',styleFor:v=>({fontStyle:v||'normal'})});
- const k=mkStrikeControl(()=>face.strike,v=>{face.strike=v;onChange();},opts);
- return [w,s,k];}
-function mkOverlineControl(get,set,opts={}){
- return mkLineStyleControl([['','no overline',''],['on','overline','O']],get,set,Object.assign({styled:false},opts));}
-function mkCheck(get,set){const c=document.createElement('input');c.type='checkbox';c.className='detailcheck';c.checked=!!get();c.onchange=()=>set(c.checked);return c;}
-// The per-row attribute editor revealed by the expander: distant-fg, family,
-// overline, inverse, extend, and (for ui/syntax, where inherit/height have no
-// 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';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();};
- add('family',fam);
- add('underline',mkUnderlineControl(()=>face.underline,v=>{face.underline=v;onChange();},opts));
- add('overline',mkOverlineControl(()=>face.overline,v=>{face.overline=v;onChange();},opts));
- add('inverse',mkCheck(()=>face.inverse,v=>{face.inverse=v;onChange();}));
- add('extend',mkCheck(()=>face.extend,v=>{face.extend=v;onChange();}));
- if(opts.showInheritHeight){
- const isel=document.createElement('select');isel.className='chip detailsel';
- (opts.inheritOptions||['']).forEach(o=>{const op=document.createElement('option');op.value=o;op.textContent=o||'— none —';isel.appendChild(op);});
- isel.value=face.inherit||'';isel.onchange=()=>{face.inherit=isel.value||null;onChange();};add('inherit',isel);
- const hin=document.createElement('input');hin.type='number';hin.min=''+HEIGHT_MIN;hin.max=''+HEIGHT_MAX;hin.step='0.05';hin.className='hstep';hin.value=face.height||1;hin.onchange=()=>{const raw=hin.value,h=clampHeight(raw);face.height=h;hin.value=h==null?1:h;if(h!=null&&parseFloat(raw)!==h)notify('height clamped to '+h+' (allowed '+HEIGHT_MIN+'–'+HEIGHT_MAX+')',false);onChange();};add('height',hin);
- }
- return {el:wrap,locks};}
-// Wire a per-row expander: a toggle button plus a hidden detail row (colspan
-// 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);};
- // Flag the toggle when collapsed and at least one hidden attribute differs from
- // the default, so a non-default attribute is never invisible. ndCheck re-runs
- // after every edit (for tiers whose onChange does not rebuild the row).
- const ndCheck=opts.ndCheck||(()=>false);
- 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=()=>{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};}
+CONTROLS_J
// 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;
diff --git a/scripts/theme-studio/controls.js b/scripts/theme-studio/controls.js
new file mode 100644
index 000000000..e98a69a5c
--- /dev/null
+++ b/scripts/theme-studio/controls.js
@@ -0,0 +1,209 @@
+// controls.js -- the custom dropdown / detail-editor / expander control
+// factories, extracted from app.js for navigability. Inlined raw at the
+// CONTROLS_J token: these are hoisting function declarations plus the
+// dropdown popup state, so the token's position preserves execution order.
+// Custom color dropdown: a real swatch + name + hex per row, since native
+// <option> background colors render unreliably on Linux Chrome. The popup is
+// fixed-positioned on <body> so a table's overflow can't clip it.
+let _ddPop=null;
+function closeColorDropdown(){if(_ddPop){_ddPop.remove();_ddPop=null;}}
+document.addEventListener('pointerdown',e=>{if(_ddPop&&!e.target.closest('.cdd')&&!e.target.closest('.cddpop'))closeColorDropdown();});
+function mkColorDropdown(options,cur,onPick,opts={}){
+ const wrap=document.createElement('div');wrap.className='cstep';
+ const left=document.createElement('button'),right=document.createElement('button');
+ left.className='cstepbtn';right.className='cstepbtn';left.type=right.type='button';
+ left.textContent='‹';right.textContent='›';left.title='move to next darker color in this column';right.title='move to next lighter color in this column';
+ const t=document.createElement('div');t.className='cdd'+(opts.compact?' compact':'');t.tabIndex=0;
+ const nameOf=h=>{const o=options.find(p=>p[0]===h);return o?o[1]:(h||'none');};
+ function step(dir){if(wrap.dataset.locked==='1')return;const next=spanNeighborHex(cur,PALETTE,groundPair(),dir);if(!next)return;cur=next;paint();onPick(next);}
+ function paintStepButtons(){
+ const locked=wrap.dataset.locked==='1';
+ left.disabled=locked||!spanNeighborHex(cur,PALETTE,groundPair(),-1);
+ right.disabled=locked||!spanNeighborHex(cur,PALETTE,groundPair(),1);
+ }
+ function paint(){const shown=cur||(opts.defaultHex||''),nm=cur?nameOf(cur):(opts.defaultName||nameOf(cur)),ttl=cur?(nm+' '+cur):(nm+(shown?' -> '+shown:''));t.style.background=shown||'#161412';t.style.color=shown?textOn(shown):'#b4b1a2';t.dataset.val=cur||'';t.title=ttl;t.classList.toggle('is-default',!cur);t.classList.toggle('gone',!!cur&&nameOf(cur)==='(gone)');
+ t.innerHTML=opts.compact?`<span class="cddsw" style="background:${shown||'transparent'}"></span>`:`<span class="cddsw" style="background:${shown||'transparent'}"></span>${esc(nm)}`;paintStepButtons();}
+ paint();
+ left.onclick=e=>{e.stopPropagation();step(-1);};
+ right.onclick=e=>{e.stopPropagation();step(1);};
+ t.onclick=(e)=>{e.stopPropagation();if(wrap.dataset.locked==='1')return;if(_ddPop){closeColorDropdown();return;}
+ // 2D gallery: a grid of swatches in the palette-panel shape (ground strip,
+ // then one row per family) instead of a long vertical list. galleryModel is
+ // the shared pure layout (app-core.js).
+ const pop=document.createElement('div');pop.className='cddpop cddgrid';
+ const model=galleryModel(cur,PALETTE,groundPair());
+ const pick=(hex)=>{cur=hex;paint();closeColorDropdown();onPick(hex);};
+ const head=document.createElement('div');head.className='cddghead';
+ const def=document.createElement('button');def.type='button';
+ def.className='cddgdef'+(model.default.selected?' sel':'');
+ def.textContent=opts.defaultName||'default';def.title='clear — use the default';
+ def.onclick=(ev)=>{ev.stopPropagation();pick('');};head.appendChild(def);
+ if(model.gone){const g=document.createElement('span');g.className='cddgc gone sel';
+ g.style.background=model.gone.hex;g.title='(gone) '+model.gone.hex;head.appendChild(g);
+ const gl=document.createElement('span');gl.className='cddglbl';gl.textContent='(gone) '+model.gone.hex;head.appendChild(gl);}
+ pop.appendChild(head);
+ for(const row of model.rows){const rr=document.createElement('div');rr.className='cddgrow';
+ for(const c of row.cells){const sw=document.createElement('button');sw.type='button';
+ sw.className='cddgc'+(c.selected?' sel':'');sw.style.background=c.hex;
+ sw.dataset.hex=c.hex;sw.dataset.name=c.name;sw.title=c.name+' '+c.hex;
+ sw.onclick=(ev)=>{ev.stopPropagation();pick(c.hex);};rr.appendChild(sw);}
+ pop.appendChild(rr);}
+ document.body.appendChild(pop);const r=t.getBoundingClientRect();
+ pop.style.left=r.left+'px';pop.style.minWidth=r.width+'px';
+ pop.style.top=(r.bottom+2)+'px';
+ const ph=pop.getBoundingClientRect().height;
+ if(r.bottom+ph>window.innerHeight-6)pop.style.top=Math.max(6,r.top-ph-2)+'px';
+ const pr=pop.getBoundingClientRect();
+ if(pr.right>window.innerWidth-6)pop.style.left=Math.max(6,window.innerWidth-6-pr.width)+'px';
+ _ddPop=pop;};
+ t.setValue=h=>{cur=h;paint();};
+ wrap.setValue=h=>{cur=h;paint();};
+ wrap.syncLocked=paintStepButtons;
+ wrap.appendChild(left);wrap.appendChild(t);wrap.appendChild(right);paintStepButtons();
+ return wrap;}
+// Standard option list for a swatch dropdown: a "default" entry, then the
+// palette in the same ground/column order as the palette panel. If cur is set
+// but no longer in the palette, surface it as a "(gone)" entry so the row still
+// shows what it points at. Shared by all three tiers.
+function ddList(cur){return paletteOptionList(cur,PALETTE,groundPair());}
+// Shared lock toggle for any table row. lockKey is namespaced per tier (bare
+// syntax kind, 'ui:'+face, 'pkg:'+app+':'+face). els are the row's editable
+// controls — native selects/buttons/inputs are disabled; the custom swatch
+// dropdown (a div) gets data-locked so its onclick refuses to open.
+function mkLockCell(lockKey,els){
+ const td=document.createElement('td');td.style.textAlign='center';
+ const lk=document.createElement('button');lk.className='lockbtn';
+ function paint(){const on=LOCKED.has(lockKey);lk.textContent=on?'🔒':'🔓';lk.classList.toggle('on',on);
+ lk.title=on?'locked — click to unlock':'click to lock this decision';
+ (els||[]).forEach(el=>{if(!el)return;
+ if(el.tagName==='SELECT'||el.tagName==='BUTTON'||el.tagName==='INPUT')el.disabled=on;
+ else{el.dataset.locked=on?'1':'';el.classList.toggle('locked',on);if(el.syncLocked)el.syncLocked();}});}
+ lk.onclick=()=>{LOCKED.has(lockKey)?LOCKED.delete(lockKey):LOCKED.add(lockKey);paint();updateLockToggles();};
+ paint();td.appendChild(lk);return td;}
+// The in-row style controls, shared by the syntax / UI / package tables: a weight
+// selector, a slant selector, and box-like underline and strike controls. Each
+// edit mutates the face object and calls onChange to repaint. Returns the control
+// elements so the caller lays them out and hands them to mkLockCell.
+const WEIGHT_OPTS=[['light','light'],['normal','normal'],['medium','medium'],['semibold','semibold'],['bold','bold'],['heavy','heavy']];
+const SLANT_OPTS=[['normal','normal'],['italic','italic'],['oblique','oblique']];
+// A compact custom dropdown for an enum attribute (weight / slant), themed like
+// the color dropdown. The trigger shows the current value drawn in its own weight
+// or slant; the popup lists each option drawn with the attribute applied, so the
+// choice previews itself. opts.styleFor(value) returns the preview style props
+// ({fontWeight} / {fontStyle}); opts.placeholder is the unset-state label.
+function mkEnumDropdown(options,get,set,opts={}){
+ const t=document.createElement('div');t.className='cdd enumdd';t.tabIndex=0;
+ const styleFor=opts.styleFor||(()=>({}));
+ const labelOf=v=>{const o=options.find(p=>p[0]===v);return o?o[1]:'';};
+ function applyPreview(el,v){el.style.fontWeight='';el.style.fontStyle='';const s=styleFor(v);if(s.fontWeight)el.style.fontWeight=s.fontWeight;if(s.fontStyle)el.style.fontStyle=s.fontStyle;}
+ function paint(){const v=get()||'';t.dataset.val=v;t.classList.toggle('is-default',!v);
+ t.textContent=v?labelOf(v):(opts.placeholder||'set');applyPreview(t,v);t.title=opts.title||'';}
+ paint();
+ t.onclick=(e)=>{e.stopPropagation();if(t.dataset.locked==='1')return;if(_ddPop){closeColorDropdown();return;}
+ const pop=document.createElement('div');pop.className='cddpop enumpop';const cur=get()||'';
+ const pick=v=>{set(v||null);paint();closeColorDropdown();};
+ const def=document.createElement('button');def.type='button';
+ def.className='enumopt enumdef'+(cur===''?' sel':'');def.textContent='default';
+ def.title='clear — use the default';def.onclick=ev=>{ev.stopPropagation();pick('');};pop.appendChild(def);
+ for(const [v,label] of options){const b=document.createElement('button');b.type='button';
+ b.className='enumopt'+(v===cur?' sel':'');b.textContent=label;applyPreview(b,v);
+ b.onclick=ev=>{ev.stopPropagation();pick(v);};pop.appendChild(b);}
+ document.body.appendChild(pop);const r=t.getBoundingClientRect();
+ pop.style.left=r.left+'px';pop.style.minWidth=r.width+'px';pop.style.top=(r.bottom+2)+'px';
+ const ph=pop.getBoundingClientRect().height;
+ if(r.bottom+ph>window.innerHeight-6)pop.style.top=Math.max(6,r.top-ph-2)+'px';
+ _ddPop=pop;};
+ t.setValue=()=>paint();t.syncLocked=()=>paint();
+ return t;}
+// Underline control: none / line / wave glyph buttons plus a color swatch shown
+// while a style is active. Mirrors mkBoxControl; get()/set() read and write the
+// underline object ({style,color}) or null.
+function mkLineStyleControl(states,get,set,opts={}){const wrap=document.createElement('div');wrap.className='boxctl';
+ const cluster=document.createElement('div');cluster.className='boxcluster';const btns={};
+ states.forEach(([v,title,glyph])=>{const b=document.createElement('button');b.className='boxbtn';b.dataset.style=v;b.textContent=glyph;b.title=title;
+ b.onclick=()=>{const cur=get();set(v?(opts.toState?opts.toState(v,cur):Object.assign({color:(cur&&cur.color)||null},opts.styled?{style:v}:{})):null);paint();};
+ cluster.appendChild(b);btns[v]=b;});
+ const dd=mkColorDropdown(ddList((get()&&get().color)||''),(get()&&get().color)||'',h=>{const cur=get();if(!cur)return;set(Object.assign({},cur,{color:h||null}));paint();},{compact:true,defaultHex:opts.defaultHex});
+ function paint(){const cur=get(),active=opts.styled?(cur&&cur.style?cur.style:''):(cur?'on':'');
+ for(const v in btns)btns[v].classList.toggle('on',v===active);
+ dd.style.display=active?'':'none';dd.setValue(cur&&cur.color?cur.color:'');
+ const locked=wrap.dataset.locked==='1';for(const v in btns)btns[v].disabled=locked;
+ const ddoff=locked||!active;dd.dataset.locked=ddoff?'1':'';dd.classList.toggle('locked',ddoff);if(dd.syncLocked)dd.syncLocked();}
+ wrap.syncLocked=()=>paint();wrap.append(cluster,dd);paint();return wrap;}
+function mkUnderlineControl(get,set,opts={}){
+ return mkLineStyleControl([['','no underline',''],['line','underline','_'],['wave','wavy underline','~']],get,set,Object.assign({styled:true},opts));}
+function mkStrikeControl(get,set,opts={}){
+ return mkLineStyleControl([['','no strike',''],['on','strike-through','S']],get,set,Object.assign({styled:false},opts));}
+// In-row style controls: weight + slant selectors and a strike control. The
+// underline control lives in the per-row expander (it carries the wave/color
+// detail), keeping the row compact.
+function mkStyleControls(face,onChange,opts={}){
+ const w=mkEnumDropdown(WEIGHT_OPTS,()=>face.weight,v=>{face.weight=v;onChange();},{placeholder:'weight',title:'font weight',styleFor:v=>({fontWeight:cssWeight(v)})});
+ const s=mkEnumDropdown(SLANT_OPTS,()=>face.slant,v=>{face.slant=v;onChange();},{placeholder:'slant',title:'font slant',styleFor:v=>({fontStyle:v||'normal'})});
+ const k=mkStrikeControl(()=>face.strike,v=>{face.strike=v;onChange();},opts);
+ return [w,s,k];}
+function mkOverlineControl(get,set,opts={}){
+ return mkLineStyleControl([['','no overline',''],['on','overline','O']],get,set,Object.assign({styled:false},opts));}
+function mkCheck(get,set){const c=document.createElement('input');c.type='checkbox';c.className='detailcheck';c.checked=!!get();c.onchange=()=>set(c.checked);return c;}
+// The per-row attribute editor revealed by the expander: distant-fg, family,
+// overline, inverse, extend, and (for ui/syntax, where inherit/height have no
+// 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';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();};
+ add('family',fam);
+ add('underline',mkUnderlineControl(()=>face.underline,v=>{face.underline=v;onChange();},opts));
+ add('overline',mkOverlineControl(()=>face.overline,v=>{face.overline=v;onChange();},opts));
+ add('inverse',mkCheck(()=>face.inverse,v=>{face.inverse=v;onChange();}));
+ add('extend',mkCheck(()=>face.extend,v=>{face.extend=v;onChange();}));
+ if(opts.showInheritHeight){
+ const isel=document.createElement('select');isel.className='chip detailsel';
+ (opts.inheritOptions||['']).forEach(o=>{const op=document.createElement('option');op.value=o;op.textContent=o||'— none —';isel.appendChild(op);});
+ isel.value=face.inherit||'';isel.onchange=()=>{face.inherit=isel.value||null;onChange();};add('inherit',isel);
+ const hin=document.createElement('input');hin.type='number';hin.min=''+HEIGHT_MIN;hin.max=''+HEIGHT_MAX;hin.step='0.05';hin.className='hstep';hin.value=face.height||1;hin.onchange=()=>{const raw=hin.value,h=clampHeight(raw);face.height=h;hin.value=h==null?1:h;if(h!=null&&parseFloat(raw)!==h)notify('height clamped to '+h+' (allowed '+HEIGHT_MIN+'–'+HEIGHT_MAX+')',false);onChange();};add('height',hin);
+ }
+ return {el:wrap,locks};}
+// Wire a per-row expander: a toggle button plus a hidden detail row (colspan
+// 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);};
+ // Flag the toggle when collapsed and at least one hidden attribute differs from
+ // the default, so a non-default attribute is never invisible. ndCheck re-runs
+ // after every edit (for tiers whose onChange does not rebuild the row).
+ const ndCheck=opts.ndCheck||(()=>false);
+ 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=()=>{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};}
diff --git a/scripts/theme-studio/generate.py b/scripts/theme-studio/generate.py
index b673caefb..797fcc28e 100644
--- a/scripts/theme-studio/generate.py
+++ b/scripts/theme-studio/generate.py
@@ -133,6 +133,9 @@ if os.path.exists(os.path.join(HERE,_FONT_WOFF2)):
STYLES=STYLES.replace('url("%s")'%_FONT_WOFF2,
'url("data:font/woff2;base64,%s")'%_FONT_B64)
APP_BODY=read_text('app.js')
+# Custom dropdown / detail-editor / expander factories, split from app.js for
+# navigability and spliced in at the CONTROLS_J token. Raw (no imports/exports).
+CONTROLS_BODY=read_text('controls.js')
# Bespoke per-package preview renderers, spliced into the page <script> via the
# PREVIEWS_J token in app.js. No imports/exports, so read raw.
PREVIEWS_BODY=read_text('previews.js')
@@ -385,6 +388,7 @@ def _build():
def fill_data(s):
return (s.replace("COLORMATH_J",COLORMATH_BODY)
.replace("APP_CORE_J",APP_CORE_BODY)
+ .replace("CONTROLS_J",CONTROLS_BODY)
.replace("PREVIEWS_J",PREVIEWS_BODY)
.replace("APP_UTIL_J",APP_UTIL_BODY)
.replace("PALETTE_GENERATOR_CORE_J",PALETTE_GENERATOR_CORE_BODY)
diff --git a/scripts/theme-studio/test-locate.mjs b/scripts/theme-studio/test-locate.mjs
index 5e36aa808..09d15b8bc 100644
--- a/scripts/theme-studio/test-locate.mjs
+++ b/scripts/theme-studio/test-locate.mjs
@@ -8,7 +8,7 @@
import { test } from 'node:test';
import assert from 'node:assert/strict';
import {
- buildLocateRegistry, locateFaceMeta, formatLocateTitle, previewFaceAttrs, isLocateOnPane,
+ buildLocateRegistry, locateFaceMeta, formatLocateTitle, isLocateOnPane,
} from './app-core.js';
// A constructed model: two package apps that BOTH own a face literally named
@@ -142,15 +142,6 @@ test('formatLocateTitle: Error — an unassigned meta reads "unassigned"', () =>
assert.equal(formatLocateTitle(locateFaceMeta('org-faces', 'ghost', reg)), 'ghost, unassigned');
});
-// --- previewFaceAttrs: owner-aware validation -------------------------------
-
-test('previewFaceAttrs: Normal — a known owner/face validates; a bad owner is rejected', () => {
- const reg = buildLocateRegistry(APPS, PKGMAP, UIMAP, MAP);
- assert.ok(previewFaceAttrs('org-faces', 'org-todo', reg), 'known face validates');
- assert.equal(previewFaceAttrs('org-mode', 'minibuffer-prompt', reg), null, 'a UI face under a package owner is rejected');
- assert.equal(previewFaceAttrs('nope', 'org-todo', reg), null, 'an unknown owner is rejected');
-});
-
// --- lifecycle + perf -------------------------------------------------------
test('buildLocateRegistry: lifecycle — a rebuild after an edit reflects the new value', () => {
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index c35be0a48..a9fe41db0 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -1209,15 +1209,6 @@ function locateFaceMeta(owner,face,registry){
return e||{owner,face,unassigned:true};
}
-// The owner-aware membership check the preview gate calls: the entry's attributes
-// when (owner, face) is a known face of that owner, null when it isn't (a bad
-// owner is rejected). A known face with no non-default attributes returns {} --
-// still truthy, so membership reads cleanly off the result.
-function previewFaceAttrs(owner,face,registry){
- const e=registry&&registry[locateKey(owner,face)];
- return e?e.attrs:null;
-}
-
// Clickable predicate: an element is on-pane only when its owner is the pane being
// viewed. Recomputed from the current view at render time (never stored in the
// registry), since switching panes changes clickability but not ownership.
@@ -1728,6 +1719,10 @@ function renderCode(){
cp.onclick=(e)=>{const s=e.target.closest('[data-k]');if(s)flashAssign(s.dataset.k);};
buildMockFrame();
}
+// controls.js -- the custom dropdown / detail-editor / expander control
+// factories, extracted from app.js for navigability. Inlined raw at the
+// CONTROLS_J token: these are hoisting function declarations plus the
+// dropdown popup state, so the token's position preserves execution order.
// Custom color dropdown: a real swatch + name + hex per row, since native
// <option> background colors render unreliably on Linux Chrome. The popup is
// fixed-positioned on <body> so a table's overflow can't clip it.
@@ -1933,6 +1928,7 @@ function mkExpander(face,colspan,onChange,opts={}){
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;