From be62ae5ba244043a8eafbc9db04e36875abaf3c4 Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sat, 20 Jun 2026 05:33:44 -0400
Subject: feat(theme-studio): sort the language dropdown and add nav arrows
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Sort the language list alphabetically and pin Elisp as the default selection. Add the ‹ › arrows flanking the dropdown that step the selection (clamped, no wrap), reusing the view-dropdown's stepViewIndex so you can walk languages without reopening the menu.
---
 scripts/theme-studio/app.js | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

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

diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index e21e48fe0..d6375eee4 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -47,7 +47,7 @@ function effBg(v){return v||MAP['bg'];}
 // fg:MAP['p']} repeated across app.js, palette-actions.js, and the browser gates.
 function groundPair(){return {bg:MAP['bg'],fg:MAP['p']};}
 function cid(l){return l.replace(/\W/g,'');}
-function buildLangSel(){const s=document.getElementById('langsel');s.innerHTML='';for(const lang in SAMPLES){const o=document.createElement('option');o.value=lang;o.textContent=lang;s.appendChild(o);}}
+function buildLangSel(){const s=document.getElementById('langsel');s.innerHTML='';for(const lang of Object.keys(SAMPLES).sort((a,b)=>a.localeCompare(b))){const o=document.createElement('option');o.value=lang;o.textContent=lang;s.appendChild(o);}if(SAMPLES['Elisp'])s.value='Elisp';}
 function renderCode(){
   const lang=document.getElementById('langsel').value;let html='';
   for(const line of SAMPLES[lang]){
@@ -605,6 +605,13 @@ function stepView(dir){
   const i=stepViewIndex(s.selectedIndex,s.options.length,dir);
   if(i!==s.selectedIndex){s.selectedIndex=i;onViewChange();}
 }
+// The ‹ › buttons flanking the language dropdown step the selection by DIR and
+// re-render the code sample + package preview, mirroring the view-dropdown nav.
+function stepLang(dir){
+  const s=document.getElementById('langsel');if(!s)return;
+  const i=stepViewIndex(s.selectedIndex,s.options.length,dir);
+  if(i!==s.selectedIndex){s.selectedIndex=i;renderCode();buildPkgPreview();}
+}
 function onViewChange(){const s=document.getElementById('viewsel');const v=(s&&s.value)||'@code';
   const show=(id,on)=>{const e=document.getElementById(id);if(e)e.style.display=on?'':'none';};
   show('view-code',v==='@code');show('view-ui',v==='@ui');show('view-pkg',v[0]!=='@');
-- 
cgit v1.2.3