Upload 8 files

frontend/studio.css

@@ -51,25 +51,17 @@
 .ms-quick-downloads a[aria-disabled="true"], .ms-track-controls a[aria-disabled="true"] { pointer-events: none; opacity: .28; }
 
 .ms-progress { --progress-color: var(--ms-warm); display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,.42fr); align-items: center; gap: 16px; padding: 12px 13px; border: 1px solid rgba(238,173,104,.3); border-left: 4px solid var(--ms-warning); border-radius: 6px; background: linear-gradient(105deg,rgba(238,173,104,.09),rgba(238,173,104,.025) 62%); box-shadow: inset 0 1px rgba(255,255,255,.025), 0 8px 24px rgba(0,0,0,.12); }
+.ms-progress[data-mode="score"] { grid-template-columns: minmax(0,1fr); }
 .ms-progress > div { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 10px; color: var(--ms-soft); font-size: .71rem; }
 .ms-progress > div::before { width: 9px; height: 9px; flex: none; border-radius: 50%; content: ""; background: var(--ms-warning); box-shadow: 0 0 0 4px rgba(238,173,104,.1),0 0 15px rgba(238,173,104,.45); animation: ms-status-pulse 1.25s ease-in-out infinite; }
 .ms-progress > div > span { overflow: hidden; flex: 1; font-weight: 620; text-overflow: ellipsis; white-space: nowrap; }
 .ms-progress > div > b { flex: none; color: #ffd5a3; font: 650 .67rem var(--ms-mono); }
 .ms-progress i { display: block; min-width: 0; height: 8px; }
 .ms-progress-segments { display: grid; width: 100%; height: 100%; grid-template-columns: repeat(var(--segment-count,10),minmax(2px,1fr)); gap: clamp(1px,.22vw,3px); }
-.ms-progress-segments > b { display: block; overflow: hidden; min-width: 0; border-radius: 2px; background: rgba(255,255,255,.065); box-shadow: inset 0 1px rgba(255,255,255,.035); }
-.ms-progress-segments > b > span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--progress-color); box-shadow: 0 0 10px color-mix(in srgb,var(--progress-color) 52%,transparent); transition: width 220ms ease; }
-.ms-progress-segments > b[data-complete="true"] { background: color-mix(in srgb,var(--progress-color) 18%,rgba(255,255,255,.065)); }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b { background: rgba(255,255,255,.055); animation: ms-progress-segment 1.2s ease-in-out infinite; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(2) { animation-delay: .08s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(3) { animation-delay: .16s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(4) { animation-delay: .24s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(5) { animation-delay: .32s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(6) { animation-delay: .4s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(7) { animation-delay: .48s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(8) { animation-delay: .56s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(9) { animation-delay: .64s; }
-.ms-progress[data-indeterminate="true"] .ms-progress-segments > b:nth-child(10) { animation-delay: .72s; }
+.ms-progress-segments > b { display: block; overflow: hidden; min-width: 0; border: 1px solid rgba(255,255,255,.035); border-radius: 2px; background: #252b2a; box-shadow: inset 0 1px rgba(255,255,255,.025); transition: background 180ms ease,border-color 180ms ease,box-shadow 180ms ease; }
+.ms-progress-segments > b > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #f1b16c; transition: width 180ms ease; }
+.ms-progress-segments > b[data-complete="true"] { border-color: rgba(255,211,158,.72); background: #f1b16c; box-shadow: 0 0 9px rgba(238,173,104,.52),inset 0 1px rgba(255,255,255,.3); }
+.ms-progress-segments > b[data-complete="true"] > span { background: #ffd39e; }
 .ms-root[data-state="error"] .ms-progress, .ms-root[data-state="notation_error"] .ms-progress { --progress-color: var(--ms-danger); border-color: rgba(251,113,133,.35); border-left-color: var(--ms-danger); background: linear-gradient(105deg,rgba(251,113,133,.1),rgba(251,113,133,.025) 62%); }
 .ms-root[data-state="error"] .ms-progress > div::before, .ms-root[data-state="notation_error"] .ms-progress > div::before { background: var(--ms-danger); box-shadow: 0 0 0 4px rgba(251,113,133,.1),0 0 15px rgba(251,113,133,.38); animation: none; }
 .ms-root[data-state="error"] .ms-progress > div > b, .ms-root[data-state="notation_error"] .ms-progress > div > b { color: #ffc1cb; }
@@ -227,7 +219,6 @@
 
 @keyframes ms-blink { 0%,100% { opacity:.35; } 50% { opacity:1; } }
 @keyframes ms-status-pulse { 0%,100% { opacity:.55; transform: scale(.82); } 50% { opacity:1; transform: scale(1); } }
-@keyframes ms-progress-segment { 0%,100% { background: rgba(255,255,255,.055); box-shadow: none; } 42% { background: var(--progress-color); box-shadow: 0 0 11px color-mix(in srgb,var(--progress-color) 45%,transparent); } }
 @keyframes ms-score-pulse { 0%,100% { opacity:.45; transform: translateY(0); } 50% { opacity:1; transform: translateY(-4px); } }
 
 @container (max-width: 1030px) {

frontend/studio.js

@@ -1,8 +1,8 @@
 const root = element.querySelector('.ms-root');
 const $ = (selector) => root.querySelector(selector);
 const $$ = (selector) => Array.from(root.querySelectorAll(selector));
-const LIVE_REVEAL_STEP_SECONDS = .5;
-const LIVE_REVEAL_INTERVAL_MS = 500;
+const LIVE_REVEAL_STEP_SECONDS = .1;
+const LIVE_REVEAL_INTERVAL_MS = 100;
 const LIVE_WINDOW_SECONDS = 5;
 const LIVE_REVEAL_MIN_START_DELAY_MS = 1800;
 const LIVE_REVEAL_MAX_START_DELAY_MS = 6500;
@@ -1113,9 +1113,10 @@ function switchTab(tab) {
 }
 
 function renderProgressSegments(data, indeterminate) {
+  if (indeterminate) return { completed: 0, total: 0 };
   const inferredTotal = Math.max(0, Math.ceil((Number(data.duration) || 0) / LIVE_WINDOW_SECONDS));
   const totalWindows = Math.max(0, Number(data.total_windows) || inferredTotal);
-  const segmentCount = indeterminate ? 10 : Math.max(1, totalWindows || 10);
+  const segmentCount = Math.max(1, totalWindows || 10);
   if (ui.progressBar.children.length !== segmentCount) {
     const fragment = document.createDocumentFragment();
     for (let index = 0; index < segmentCount; index += 1) {
@@ -1131,7 +1132,7 @@ function renderProgressSegments(data, indeterminate) {
     ? clamp(Number(data.completed_windows) || 0, 0, totalWindows)
     : clamp((Number(data.progress) || 0) * segmentCount, 0, segmentCount);
   Array.from(ui.progressBar.children).forEach((segment, index) => {
-    const fill = indeterminate ? 0 : clamp(exactCompleted - index, 0, 1) * 100;
+    const fill = clamp(exactCompleted - index, 0, 1) * 100;
     const fillElement = segment.firstElementChild;
     if (fillElement) fillElement.style.width = `${fill}%`;
     segment.dataset.complete = String(fill >= 100);
@@ -1186,6 +1187,8 @@ function render(data, { silent = false } = {}) {
   const indeterminate = data.state === 'generating_score';
   const progressPercent = failed ? 100 : Math.round(data.progress * 100);
   ui.progress.hidden = !(active || failed); ui.progress.dataset.indeterminate = String(indeterminate);
+  ui.progress.dataset.mode = indeterminate ? 'score' : 'windows';
+  ui.progressTrack.hidden = indeterminate;
   ui.progressLabel.textContent = data.status;
   ui.progressValue.textContent = failed ? (data.state === 'notation_error' ? 'Score issue' : 'Failed') : indeterminate ? 'Rendering…' : `${progressPercent}%`;
   const progressWindows = renderProgressSegments(data, indeterminate);