Refine Theme Lab layout controls

apps/theme_lab/static/app.js

@@ -297,16 +297,31 @@ async function playCurrentTheme() {
 }
 
 function generationPayload() {
-  return {
+  const engine = $("engineSelect").value;
+  const payload = {
     engine: $("engineSelect").value,
     samples: Number($("samplesInput").value),
     length: Number($("lengthInput").value),
     key: $("generateKey").value,
     seed: Number($("seedInput").value),
     endpoint_strength: Number($("endpointInput").value),
-    max_order: Number($("orderInput").value),
-    transformer_steps: Number($("stepsInput").value),
   };
+  if (engine === "markov") {
+    payload.max_order = Number($("orderInput").value);
+  } else {
+    payload.transformer_steps = Number($("stepsInput").value);
+  }
+  return payload;
+}
+
+function updateEngineControls() {
+  const engine = $("engineSelect").value;
+  for (const el of document.querySelectorAll(".markov-param")) {
+    el.classList.toggle("is-hidden", engine !== "markov");
+  }
+  for (const el of document.querySelectorAll(".transformer-param")) {
+    el.classList.toggle("is-hidden", engine !== "transformer");
+  }
 }
 
 async function generate() {
@@ -409,6 +424,7 @@ function bindEvents() {
   $("playTheme").addEventListener("click", playCurrentTheme);
   $("stopPlayback").addEventListener("click", stopPlayback);
   $("generateButton").addEventListener("click", generate);
+  $("engineSelect").addEventListener("change", updateEngineControls);
   $("refreshMidiOutputs").addEventListener("click", refreshMidiOutputs);
   $("midiOutputSelect").addEventListener("change", (event) => {
     state.midiOutputId = event.target.value;
@@ -420,6 +436,7 @@ function bindEvents() {
 
 async function init() {
   bindEvents();
+  updateEngineControls();
   await loadStats();
   await loadThemes();
 }

apps/theme_lab/static/index.html

@@ -106,15 +106,15 @@
                 <option value="transformer">Transformer</option>
               </select>
             </label>
-            <label>
+            <label class="generator-param common-param">
               <span>Samples</span>
               <input id="samplesInput" type="number" min="1" max="12" value="2" />
             </label>
-            <label>
+            <label class="generator-param common-param">
               <span>Length</span>
               <input id="lengthInput" type="number" min="4" max="64" value="24" />
             </label>
-            <label>
+            <label class="generator-param common-param">
               <span>Key</span>
               <select id="generateKey">
                 <option>C</option>
@@ -127,19 +127,19 @@
                 <option>Ab</option>
               </select>
             </label>
-            <label>
+            <label class="generator-param common-param">
               <span>Seed</span>
               <input id="seedInput" type="number" min="0" value="42" />
             </label>
-            <label>
+            <label class="generator-param common-param">
               <span>Endpoint</span>
               <input id="endpointInput" type="number" min="0" max="5" step="0.1" value="1.0" />
             </label>
-            <label>
+            <label class="generator-param markov-param">
               <span>Order</span>
               <input id="orderInput" type="number" min="1" max="3" value="3" />
             </label>
-            <label>
+            <label class="generator-param transformer-param">
               <span>Transformer steps</span>
               <input id="stepsInput" type="number" min="10" max="1000" value="80" />
             </label>

apps/theme_lab/static/styles.css

@@ -180,9 +180,7 @@ select {
 }
 
 .theme-list {
-  display: grid;
   flex: 1;
-  gap: 8px;
   min-height: 0;
   overflow: auto;
   padding-right: 2px;
@@ -190,16 +188,18 @@ select {
 }
 
 .theme-item {
-  display: grid;
-  gap: 5px;
+  display: block;
   width: 100%;
+  min-height: 0;
   border: 1px solid var(--line);
   border-radius: 8px;
   background: #fff;
   color: var(--ink);
-  padding: 10px;
+  padding: 9px 10px;
+  margin-bottom: 8px;
   text-align: left;
   cursor: pointer;
+  overflow: hidden;
 }
 
 .theme-item.active {
@@ -208,13 +208,30 @@ select {
 }
 
 .theme-item strong {
+  display: -webkit-box;
+  overflow: hidden;
+  font-size: 14px;
+  font-weight: 700;
   line-height: 1.25;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.theme-item p {
+  overflow: hidden;
+  margin-top: 3px;
+  font-size: 12px;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .tag-row {
   display: flex;
   flex-wrap: wrap;
   gap: 5px;
+  margin-top: 6px;
 }
 
 .tag {
@@ -327,13 +344,17 @@ select {
 
 .generator-grid {
   display: grid;
-  grid-template-columns: repeat(8, minmax(90px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
   gap: 10px;
 }
 
+.generator-param.is-hidden {
+  display: none;
+}
+
 .generated-list {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  grid-template-columns: 1fr;
   gap: 12px;
   overflow: auto;
 }
@@ -353,17 +374,20 @@ select {
 }
 
 .sample-score {
-  min-height: 150px;
+  height: clamp(260px, 38vh, 420px);
+  min-height: 260px;
   overflow: auto;
   border: 1px solid var(--line);
   border-radius: 6px;
+  background: #fff;
 }
 
 .sample-score img {
   display: block;
-  width: 100%;
-  min-width: 420px;
-  padding: 8px;
+  width: 120%;
+  min-width: 900px;
+  max-width: none;
+  padding: 12px;
 }
 
 .code-line {
@@ -408,6 +432,11 @@ select {
   .generator-grid {
     grid-template-columns: repeat(2, minmax(120px, 1fr));
   }
+
+  .sample-score img {
+    width: 140%;
+    min-width: 760px;
+  }
 }
 
 @media (max-width: 520px) {