aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCraig Jennings <c@cjennings.net>2026-06-16 09:09:24 -0500
committerCraig Jennings <c@cjennings.net>2026-06-16 09:09:24 -0500
commit92538504f829ca49643ed0212e0af823cce9167a (patch)
treeb47dde15fb43a6a0bb35b624d31170f3b05b290b
parentb10a1b7a33772c744abfd11ff1e4aef8b33e519b (diff)
downloaddotemacs-92538504f829ca49643ed0212e0af823cce9167a.tar.gz
dotemacs-92538504f829ca49643ed0212e0af823cce9167a.zip
fix(theme-studio): open the palette collapsed to base colors
The studio opened with every column's span tints expanded, so the first view was crowded with colors the user hadn't asked to see. I set paletteShowFull to false in initApp, so the palette opens showing one tile per column and the existing arrow control expands the spans. The flip lives in the boot path rather than the module default, so the palette gates keep their full-palette baseline. The two that assert span tiles (#counttest, #paltoggletest) now opt into full mode explicitly. A new #paldefaulttest gate asserts the opening collapsed state.
-rw-r--r--scripts/theme-studio/app.js1
-rw-r--r--scripts/theme-studio/browser-gates.js11
-rw-r--r--scripts/theme-studio/theme-studio.html12
-rw-r--r--todo.org6
4 files changed, 30 insertions, 0 deletions
diff --git a/scripts/theme-studio/app.js b/scripts/theme-studio/app.js
index 126926fec..fea46f227 100644
--- a/scripts/theme-studio/app.js
+++ b/scripts/theme-studio/app.js
@@ -1128,6 +1128,7 @@ function cellVal(td){if(!td)return '';const dd=td.querySelector('.cdd');if(dd)re
function srtTable(tbId,col){tableSort[tbId]={col,asc:!(tableSort[tbId]&&tableSort[tbId].col===col&&tableSort[tbId].asc)};applyTableSort(tbId);}
function applyTableSort(tbId){const s=tableSort[tbId];if(!s)return;const tb=document.getElementById(tbId);if(!tb)return;const dir=s.asc?1:-1;const r=[...tb.rows];r.sort((a,b)=>{const x=cellVal(a.cells[s.col]),y=cellVal(b.cells[s.col]);return ((typeof x==='number'&&typeof y==='number')?x-y:(x<y?-1:x>y?1:0))*dir;});r.forEach(x=>tb.appendChild(x));}
function initApp(){
+ paletteShowFull=false; // open collapsed to base colors; the arrow expands the spans
buildLangSel();buildViewSel();renderPalette();rebuildColorTables();renderCode();applyGround();
initGeneratorControls();
updateTitle();initPicker();buildPkgPreview();syncMockHeight();syncPkgHeight();
diff --git a/scripts/theme-studio/browser-gates.js b/scripts/theme-studio/browser-gates.js
index e474cd4e5..de11bc3ee 100644
--- a/scripts/theme-studio/browser-gates.js
+++ b/scripts/theme-studio/browser-gates.js
@@ -569,6 +569,7 @@ if(location.hash==='#columntest'){let ok=true;const notes=[];const A=(c,n)=>{if(
// is left on its old (now-gone) hex.
if(location.hash==='#counttest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
const saveP=PALETTE.slice(),saveM=Object.assign({},MAP),saveU=JSON.parse(JSON.stringify(UIMAP)),saveSel=selectedIdx;
+ paletteShowFull=true; // this gate asserts span tiles, so render the full palette
setSyntaxFg('bg','#204060');setSyntaxFg('p','#f0fef0');
PALETTE=[['#204060','bg'],['#f0fef0','fg']];
setGroundSpan(2);
@@ -839,10 +840,20 @@ 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 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.
+if(location.hash==='#paldefaulttest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ const tg=document.getElementById('paltoggle');
+ A(!!tg,'palette toggle present after boot');
+ A(tg&&tg.textContent==='▶','palette opens collapsed to base colors (arrow shows right-pointing ▶)');
+ document.title='PALDEFAULTTEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='paldefaulttest';d.textContent='PALDEFAULTTEST '+(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);
+ paletteShowFull=true; // start expanded so the first click collapses to base-only
setSyntaxFg('bg','#101010');setSyntaxFg('p','#f0f0f0');
PALETTE=[['#101010','bg','ground'],['#f0f0f0','fg','ground']];
regenColumn('#67809c',2,{ground:groundPair()}).members.forEach(m=>PALETTE.push([m.hex,m.offset===0?'blue':'blue'+(m.offset>0?'+'+m.offset:m.offset),'blue']));
diff --git a/scripts/theme-studio/theme-studio.html b/scripts/theme-studio/theme-studio.html
index 6459960dd..8b8a5f75c 100644
--- a/scripts/theme-studio/theme-studio.html
+++ b/scripts/theme-studio/theme-studio.html
@@ -2747,6 +2747,7 @@ function cellVal(td){if(!td)return '';const dd=td.querySelector('.cdd');if(dd)re
function srtTable(tbId,col){tableSort[tbId]={col,asc:!(tableSort[tbId]&&tableSort[tbId].col===col&&tableSort[tbId].asc)};applyTableSort(tbId);}
function applyTableSort(tbId){const s=tableSort[tbId];if(!s)return;const tb=document.getElementById(tbId);if(!tb)return;const dir=s.asc?1:-1;const r=[...tb.rows];r.sort((a,b)=>{const x=cellVal(a.cells[s.col]),y=cellVal(b.cells[s.col]);return ((typeof x==='number'&&typeof y==='number')?x-y:(x<y?-1:x>y?1:0))*dir;});r.forEach(x=>tb.appendChild(x));}
function initApp(){
+ paletteShowFull=false; // open collapsed to base colors; the arrow expands the spans
buildLangSel();buildViewSel();renderPalette();rebuildColorTables();renderCode();applyGround();
initGeneratorControls();
updateTitle();initPicker();buildPkgPreview();syncMockHeight();syncPkgHeight();
@@ -3325,6 +3326,7 @@ if(location.hash==='#columntest'){let ok=true;const notes=[];const A=(c,n)=>{if(
// is left on its old (now-gone) hex.
if(location.hash==='#counttest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
const saveP=PALETTE.slice(),saveM=Object.assign({},MAP),saveU=JSON.parse(JSON.stringify(UIMAP)),saveSel=selectedIdx;
+ paletteShowFull=true; // this gate asserts span tiles, so render the full palette
setSyntaxFg('bg','#204060');setSyntaxFg('p','#f0fef0');
PALETTE=[['#204060','bg'],['#f0fef0','fg']];
setGroundSpan(2);
@@ -3595,10 +3597,20 @@ 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 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.
+if(location.hash==='#paldefaulttest'){let ok=true;const notes=[];const A=(c,n)=>{if(!c){ok=false;notes.push(n);}};
+ const tg=document.getElementById('paltoggle');
+ A(!!tg,'palette toggle present after boot');
+ A(tg&&tg.textContent==='▶','palette opens collapsed to base colors (arrow shows right-pointing ▶)');
+ document.title='PALDEFAULTTEST '+(ok?'PASS':'FAIL');
+ const d=document.createElement('div');d.id='paldefaulttest';d.textContent='PALDEFAULTTEST '+(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);
+ paletteShowFull=true; // start expanded so the first click collapses to base-only
setSyntaxFg('bg','#101010');setSyntaxFg('p','#f0f0f0');
PALETTE=[['#101010','bg','ground'],['#f0f0f0','fg','ground']];
regenColumn('#67809c',2,{ground:groundPair()}).members.forEach(m=>PALETTE.push([m.hex,m.offset===0?'blue':'blue'+(m.offset>0?'+'+m.offset:m.offset),'blue']));
diff --git a/todo.org b/todo.org
index 0a10a738c..a78d17afc 100644
--- a/todo.org
+++ b/todo.org
@@ -44,6 +44,12 @@ Tags are additive. For example, a small wrong-behavior fix can be
=:bug:quick:=, and a feature that requires internal restructuring can be
=:feature:refactor:=.
* Emacs Open Work
+** DONE [#C] theme-studio: open with the palette collapsed to base colors :feature:studio:next:
+CLOSED: [2026-06-16 Tue]
+Every time theme-studio opens, the palette shows all colors including the span tints. Instead it should open showing the base colors only, and the user expands the spans by clicking the left-side arrow menu. From the roam inbox 2026-06-16. Craig: "just do it. :)"
+Done 2026-06-16: initApp sets paletteShowFull=false before the first render, so the studio opens collapsed (arrow ▶); the existing toggle expands the spans. New #paldefaulttest gate asserts the opening collapsed state; #counttest and #paltoggletest now opt into full mode explicitly since they assert span tiles. Full suite green.
+** TODO [#C] theme-studio: custom view-assignment dropdown with lock indicators :feature:studio:next:
+The view-assignment dropdown is a plain HTML menu. Make it a custom menu colored like the other custom menus, and have it indicate which assignment views have all their elements locked, so the user knows when a view's assignments are done. From the roam inbox 2026-06-16.
** DONE [#C] theme-studio: realistic markdown-mode preview :feature:studio:
CLOSED: [2026-06-16 Tue]
markdown-mode fell back to the generic preview (face names in their own colors). Built renderMarkdownPreview (app.js): a realistic README exercising 28 markdown faces in context (front matter, H1-H3, bold/italic, inline + fenced code with a language tag, links + bare URLs, lists + GFM checkboxes, blockquote + footnote, table, hr, strikethrough, highlight, math, inline HTML, comment). Routed via a PREVIEW_KEYS map in app_inventory.py (markdown-mode -> markdown). #mdtest gate validates every data-face is a real markdown face; full theme-studio suite green. Commit =0682b24f=, pushed. Visual sign-off is a VERIFY under Manual testing and validation.