From 65bccaed1ab56538c654919420d7977777395490 Mon Sep 17 00:00:00 2001 From: Craig Jennings Date: Fri, 19 Jun 2026 00:25:06 -0500 Subject: feat(theme-studio): add a per-row expander for the overflow face attributes Each row in the syntax, UI, and package tables gets a "more" toggle that reveals a detail row beneath it, holding the attributes that don't fit a column: distant-fg, family, overline, inverse, and extend. The syntax and UI tables also get inherit and height there, since they have no inline column for those. Packages already do, so their expander leaves them out. One mkDetailEditor builds the editor and one mkExpander wires the toggle plus the hidden detail row, both shared across the three tables. The detail controls join the row's lock cell, so locking a row disables them too. Detail rows ride along when a table is sorted: applyTableSort now sorts only the main rows and re-attaches each detail row right after its parent (matched by data-detail-for), so a sort never separates the pair. The new #expandtest browser gate covers the toggle, the field set, the model writes, and the package expander dropping inherit/height. This is the last editor piece for the face-attribute work. Every attribute the model and emitter support is now reachable from the UI. Full suite green: Python 59, Node 198, ERT 41, plus the browser hash gates. --- scripts/theme-studio/styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) (limited to 'scripts/theme-studio/styles.css') diff --git a/scripts/theme-studio/styles.css b/scripts/theme-studio/styles.css index 40f5b387b..794ebd399 100644 --- a/scripts/theme-studio/styles.css +++ b/scripts/theme-studio/styles.css @@ -21,6 +21,16 @@ .boxbtn:disabled{opacity:.3;cursor:default} .stylecluster{display:flex;flex-wrap:wrap;align-items:center;gap:4px;width:max-content;max-width:210px} select.stylesel{width:78px;padding:2px 4px;font:11px monospace;font-weight:normal} + .exptoggle{width:18px;height:18px;padding:0;border:1px solid #3a3a3a;border-radius:3px;background:#1f1c19;color:#8a9496;font:12px monospace;line-height:1;cursor:pointer;vertical-align:middle} + .exptoggle.on{background:#3a3320;border-color:#e8bd30;color:#e8bd30} + .exptoggle:disabled{opacity:.3;cursor:default} + tr.detailrow>td{background:#15120f;border-top:1px solid #2a2a2a;padding:8px 14px} + .detailedit{display:flex;flex-wrap:wrap;align-items:center;gap:14px} + .detailfield{display:flex;align-items:center;gap:5px;font:11px monospace;color:#b4b1a2} + .detailfield>span{white-space:nowrap} + input.detailinput{width:120px;padding:3px 5px;font:11px monospace;background:#1f1c19;color:#cdced1;border:1px solid #3a3a3a;border-radius:4px} + select.detailsel{width:130px;font:10pt monospace} + input.detailcheck{width:15px;height:15px;cursor:pointer} table.leg th:hover{color:#e8bd30} select.chip{appearance:none;border:1px solid #00000060;border-radius:5px;padding:5px 10px;font:bold 14px monospace;width:160px;cursor:pointer} /* Prev/next arrows flanking the view dropdown: step the selection without reopening it. -- cgit v1.2.3