From 5f915271f8d5da97ec86b44d6233872960092653 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Mon, 15 Jun 2026 17:20:37 -0500
Subject: refactor(theme-studio): collapse assignment views into one dropdown
 panel

The assignment area was three stacked sections (color/code, ui faces, package faces), and package faces carried its own application selector. I merged them into one panel driven by a single dropdown: color/code assignments, ui faces, then a non-selectable "package faces" optgroup holding every app in order. Picking an entry swaps the left table and right preview, so only one view shows at a time.

curApp now reads the selected app from that dropdown, and the old appsel is gone. A #viewtest browser gate locks in the dropdown order, the optgroup, and the one-view-at-a-time switching.
---
 scripts/theme-studio/browser-gates.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 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 ad7a586df..2b85fc8bb 100644
--- a/scripts/theme-studio/browser-gates.js
+++ b/scripts/theme-studio/browser-gates.js
@@ -649,3 +649,28 @@ if(location.hash==='#roundtriptest'){let ok=true;const notes=[];const A=(c,n)=>{
  PALETTE=saveP;for(const k in MAP)delete MAP[k];Object.assign(MAP,saveM);syncSyntaxFromCache();LOCKED=saveL;
  document.title='ROUNDTRIPTEST '+(ok?'PASS':'FAIL');
  const d=document.createElement('div');d.id='roundtriptest';d.textContent='ROUNDTRIPTEST '+(ok?'PASS':'FAIL')+(notes.length?' | '+notes.join(' ; '):'');document.body.appendChild(d);}
+// View-selector gate (open with #viewtest): the assignment panel is driven by a
+// single #viewsel dropdown -- two editor entries (@code, @ui) then a "package
+// faces" optgroup of every app, in order -- and switching it shows exactly one
+// of the three view blocks.
+if(location.hash==='#viewtest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ const sel=document.getElementById('viewsel');
+ A(!!sel,'viewsel-exists');
+ if(sel){
+  A(sel.options[0]&&sel.options[0].value==='@code','first-option-code');
+  A(sel.options[1]&&sel.options[1].value==='@ui','second-option-ui');
+  const og=sel.querySelector('optgroup');
+  A(og&&og.label==='package faces','package-faces-optgroup');
+  if(og){const appOpts=[...og.querySelectorAll('option')].map(o=>o.value);
+   A(JSON.stringify(appOpts)===JSON.stringify(Object.keys(APPS)),'optgroup-lists-apps-in-order');}
+  const vis=id=>{const e=document.getElementById(id);return !!e&&e.style.display!=='none';};
+  sel.value='@code';onViewChange();
+  A(vis('view-code')&&!vis('view-ui')&&!vis('view-pkg'),'code-view-only');
+  sel.value='@ui';onViewChange();
+  A(!vis('view-code')&&vis('view-ui')&&!vis('view-pkg'),'ui-view-only');
+  const firstApp=Object.keys(APPS)[0];sel.value=firstApp;onViewChange();
+  A(!vis('view-code')&&!vis('view-ui')&&vis('view-pkg'),'pkg-view-only');
+  A(curApp()===firstApp,'curApp-returns-selected-app');
+ }
+ document.title='VIEWTEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='viewtest';d.textContent='VIEWTEST '+(ok?'PASS':'FAIL')+(notes.length?' fails='+notes.join(','):'');document.body.appendChild(d);}
-- 
cgit v1.2.3