From 5ab506d9b65a0d043c08690b86976b1f97889eaf Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Mon, 15 Jun 2026 19:12:43 -0500
Subject: feat(theme-studio): add a palette display toggle for base colors vs
 full spans

I added an arrow control to the palette that collapses every column to its base color (right arrow) or expands to the full spans (down arrow), to conserve vertical space. Ground steps collapse too, leaving bg and fg. A #paltoggletest gate covers the collapse and the expand.
---
 scripts/theme-studio/browser-gates.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

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

diff --git a/scripts/theme-studio/browser-gates.js b/scripts/theme-studio/browser-gates.js
index 72aeb6153..bca2c7aff 100644
--- a/scripts/theme-studio/browser-gates.js
+++ b/scripts/theme-studio/browser-gates.js
@@ -709,3 +709,23 @@ if(location.hash==='#styletest'){let ok=true;const notes=[];const A=(c,n)=>{if(!
  A(cluster&&cluster.querySelectorAll('.sbtn').length===4,'four-style-buttons-in-cluster');
  document.title='STYLETEST '+(ok?'PASS':'FAIL');
  const d=document.createElement('div');d.id='styletest';d.textContent='STYLETEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
+// Palette display-toggle gate (open with #paltoggletest): the arrow control
+// collapses each column to its base color and expands back to full spans.
+if(location.hash==='#paltoggletest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ const saveP=PALETTE.slice(),saveM=Object.assign({},MAP);
+ setSyntaxFg('bg','#101010');setSyntaxFg('p','#f0f0f0');
+ PALETTE=[['#101010','bg','ground'],['#f0f0f0','fg','ground']];
+ regenColumn('#67809c',2,{ground:{bg:MAP['bg'],fg:MAP['p']}}).members.forEach(m=>PALETTE.push([m.hex,m.offset===0?'blue':'blue'+(m.offset>0?'+'+m.offset:m.offset),'blue']));
+ renderPalette();
+ const tg=document.getElementById('paltoggle');
+ A(!!tg,'palette-toggle-present');
+ const blueChips=()=>document.querySelectorAll('#pals .fstrip[data-column="blue"] .pchip').length;
+ A(blueChips()===5,'full-mode-shows-base-and-spans');
+ tg.click();
+ A(blueChips()===1,'base-only-shows-just-the-base');
+ A(document.getElementById('paltoggle').textContent==='▶','base-only-shows-right-arrow');
+ document.getElementById('paltoggle').click();
+ A(blueChips()===5,'toggling-back-restores-spans');
+ PALETTE=saveP;for(const k in MAP)delete MAP[k];Object.assign(MAP,saveM);syncSyntaxFromCache();renderPalette();
+ document.title='PALTOGGLETEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='paltoggletest';d.textContent='PALTOGGLETEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
-- 
cgit v1.2.3