Compact Song Brief inputs and add saved option lists

index.html

@@ -7,12 +7,30 @@
 <body><main class="app-shell">
 <header class="topbar"><div><p class="eyebrow">NASMIX</p><h1>مشاريع التوزيع الموسيقي</h1></div><div class="topbar-actions"><button id="themeToggle" class="icon-button" type="button"><span id="themeIcon">☾</span><span id="themeLabel">داكن</span></button><button id="installButton" class="secondary-button" type="button" hidden>تثبيت</button><span id="dataStatus" class="status">جاري تحميل البيانات…</span></div></header>
 <section id="projectPanel" class="project-panel" aria-label="مشروع الأغنية">
-<div class="project-toolbar"><div class="project-selector-group"><label>المشروع<select id="projectSelect"></select></label><label>اسم المشروع<input id="projectNameInput" type="text" placeholder="اسم الأغنية"></label></div><div class="project-actions"><button id="newProjectButton" type="button">مشروع أغنية جديد</button><button id="saveProjectButton" class="secondary-button" type="button">حفظ</button><button id="exportProjectButton" class="secondary-button" type="button">تصدير JSON</button><label class="file-button secondary-button" for="importProjectInput">استيراد</label><input id="importProjectInput" type="file" accept="application/json,.json" hidden><button id="deleteProjectButton" class="danger-button" type="button">حذف</button></div></div>
+<div class="project-toolbar"><div class="project-selector-group"><label>المشروع<select id="projectSelect"></select></label><label>اسم المشروع<input id="projectNameInput" type="text" placeholder="اسم الأغنية"></label></div><div class="project-actions"><button id="newProjectButton" type="button">مشروع جديد</button><button id="saveProjectButton" class="secondary-button" type="button">حفظ</button><button id="exportProjectButton" class="secondary-button" type="button">تصدير JSON</button><label class="file-button secondary-button" for="importProjectInput">استيراد</label><input id="importProjectInput" type="file" accept="application/json,.json" hidden><button id="deleteProjectButton" class="danger-button" type="button">حذف</button></div></div>
 <div class="stage-strip"><span class="stage-chip active">01 Song Brief</span><span class="stage-chip">02 Structure</span><span class="stage-chip">03 Track Plan</span><span class="stage-chip">04 Suno Reference</span><span class="stage-chip">05 Generate</span><span class="stage-chip">06 Review</span><span class="stage-chip">07 Cubase</span><span class="stage-chip">08 Mix</span><span class="stage-chip">09 Export</span></div>
 <div class="project-summary"><div><span>التقدم</span><strong id="projectProgress">0 / 9</strong></div><p id="briefGateStatus" class="gate-status blocked">أدخل بيانات الأغنية لفتح المشروع</p><p id="projectStatus" class="project-status">تهيئة المشروع…</p></div>
-<form id="songBriefForm" class="brief-form" autocomplete="off">
-<label>اسم الأغنية<input id="briefSongName" type="text"></label><label>السرعة BPM<input id="briefTempo" type="number" min="40" max="220" value="96"></label><label>الميزان<select id="briefTimeSignature"><option>4/4</option><option>3/4</option><option>6/8</option><option>5/4</option><option>7/8</option></select></label><label>الدرجة<input id="briefKey" type="text" value="D"></label><label>المقام<select id="briefMaqam"><option>Bayati</option><option>Rast</option><option>Hijaz</option><option>Saba</option><option>Sikah</option><option>Nahawand</option><option>Kurdi</option><option>Ajam</option></select></label><label>المدة MM:SS<input id="briefDuration" type="text" value="03:45"></label><label>الإحساس<input id="briefMood" type="text"></label><label>المرجع<input id="briefReferenceTrack" type="text"></label><label>مدى الفوكال<input id="briefVocalRange" type="text"></label><label>الآلة القائدة<input id="briefMainInstrument" type="text"></label><label>الإيقاع الأساسي<input id="briefPrimaryGroove" type="text"></label><label>قسم الذروة<input id="briefPeakSection" type="text" value="Final Chorus"></label><label>نوع النهاية<input id="briefEndingType" type="text"></label><label>نوع الجايد<select id="briefGuideType"><option>Temporary Vocal Placeholder</option><option>Scratch Vocal</option><option>Violin Melody Guide</option><option>Piano Melody Guide</option><option>MIDI Melody Guide</option></select></label>
-</form></section>
+<form id="songBriefForm" class="brief-form compact-brief" autocomplete="off">
+<label class="brief-field brief-field-wide"><span>اسم الأغنية</span><input id="briefSongName" type="text" placeholder="اسم الأغنية"></label>
+<label class="brief-field brief-field-xs"><span>BPM</span><input id="briefTempo" type="number" min="40" max="220" value="96"></label>
+<label class="brief-field brief-field-xs"><span>الميزان</span><select id="briefTimeSignature"><option>4/4</option><option>6/8</option><option>3/4</option><option>2/4</option><option>5/4</option><option>7/8</option><option>9/8</option></select></label>
+<label class="brief-field brief-field-xs"><span>الدرجة</span><select id="briefKey"><option>C</option><option>C#</option><option>D</option><option>D#</option><option>E</option><option>F</option><option>F#</option><option>G</option><option>G#</option><option>A</option><option>A#</option><option>B</option></select></label>
+<label class="brief-field"><span>المقام</span><select id="briefMaqam"><option>Bayati</option><option>Rast</option><option>Hijaz</option><option>Saba</option><option>Sikah</option><option>Nahawand</option><option>Kurdi</option><option>Ajam</option><option>Huzam</option><option>Nikriz</option><option>Hijaz Kar</option></select></label>
+<label class="brief-field brief-field-xs"><span>المدة</span><input id="briefDuration" type="text" inputmode="numeric" value="03:45" placeholder="03:45"></label>
+<label class="brief-field"><span>الإحساس</span><input id="briefMood" type="text" list="moodPresets" placeholder="اختر أو اكتب"></label>
+<label class="brief-field brief-field-wide"><span>المرجع</span><input id="briefReferenceTrack" type="text" list="referencePresets" placeholder="اسم أغنية أو وصف مرجعي"></label>
+<label class="brief-field"><span>مدى الفوكال</span><select id="briefVocalRange"><option value="">غير محدد</option><option>A2–D4</option><option>A2–F4</option><option>B2–G4</option><option>C3–A4</option><option>D3–B4</option><option>Low Male</option><option>Mid Male</option><option>High Male</option><option>Low Female</option><option>Mid Female</option><option>High Female</option></select></label>
+<label class="brief-field"><span>الآلة القائدة</span><input id="briefMainInstrument" type="text" list="instrumentPresets" placeholder="اختر أو اكتب"></label>
+<label class="brief-field brief-field-wide"><span>الإيقاع الأساسي</span><input id="briefPrimaryGroove" type="text" list="groovePresets" placeholder="اختر أو اكتب"></label>
+<label class="brief-field"><span>قسم الذروة</span><select id="briefPeakSection"><option>Final Chorus</option><option>First Chorus</option><option>Second Chorus</option><option>Bridge</option><option>Instrumental Solo</option><option>Outro</option></select></label>
+<label class="brief-field"><span>نوع النهاية</span><select id="briefEndingType"><option value="">اختر النهاية</option><option>Short Clean Stop</option><option>Long Sustained Resolution</option><option>Unresolved Instrumental Ending</option><option>Fade Out</option><option>Final Vocal Hold</option><option>Percussion Stop</option><option>Solo Instrument Ending</option></select></label>
+<label class="brief-field"><span>نوع الجايد</span><select id="briefGuideType"><option>Temporary Vocal Placeholder</option><option>Scratch Vocal</option><option>Violin Melody Guide</option><option>Piano Melody Guide</option><option>MIDI Melody Guide</option><option>No Guide</option></select></label>
+</form>
+<datalist id="moodPresets"><option value="Iraqi emotional modern pop"><option value="Iraqi sad ballad"><option value="Modern Khaleeji pop"><option value="Balkan Tallava dance"><option value="Cinematic Iraqi lament"><option value="Romantic Arabic pop"><option value="Dark dramatic"><option value="Warm nostalgic"><option value="Energetic wedding dance"><option value="Minimal intimate"></datalist>
+<datalist id="referencePresets"><option value="بدون مرجع"><option value="مرجع صوتي مرفوع إلى Suno"><option value="فوكال مؤقت فقط"><option value="لحن MIDI"><option value="تراك كامل للفهم البنيوي"></datalist>
+<datalist id="instrumentPresets"><option value="Joza"><option value="Iraqi Ney"><option value="Kawala"><option value="Arabic Violin"><option value="Clarinet"><option value="Oud"><option value="Qanun"><option value="Accordion"><option value="Acoustic Guitar"><option value="Electric Guitar"><option value="Piano"><option value="Rhodes"><option value="Synth Lead"><option value="String Section"></datalist>
+<datalist id="groovePresets"><option value="Restrained Iraqi pop groove"><option value="Modern Iraqi pop 4/4"><option value="Khaleeji pop groove"><option value="Balkan Tallava four-on-the-floor"><option value="Slow Iraqi ballad"><option value="6/8 Arabic ballad"><option value="Maqsoum"><option value="Malfouf"><option value="Saidi"><option value="Minimal pulse without percussion"><option value="No drums"></datalist>
+</section>
 <section class="workspace"><aside class="controls"><label>الوظيفة الموسيقية<select id="roleSelect"></select></label><label>نوع التراك — Suno Category<select id="categorySelect"></select></label><label>الخيار الجاهز<select id="presetSelect"></select></label><button id="customPresetToggle" class="custom-toggle" type="button" aria-expanded="false"><span aria-hidden="true">＋</span><span>خيار مخصص</span></button><section id="customPresetFields" class="custom-fields" hidden><label>اسم الخيار<input id="customNameInput" type="text"></label><label>وصف الصوت<textarea id="customPromptInput" rows="5"></textarea></label><label>Exclude إضافي<textarea id="customExcludeInput" rows="3"></textarea></label></section><label>الهوية<select id="identitySelect"></select></label><label>الإحساس<select id="emotionSelect"></select></label><label>موضع الاستخدام<select id="sectionSelect"></select></label><label>السرعة BPM<input id="tempoInput" type="number" min="40" max="220" value="96"></label></aside>
 <section class="result-panel"><div class="result-heading"><div><span class="label">القرار المقترح</span><h2 id="decisionTitle">—</h2></div></div><div class="prompt-card full-prompt-card"><div class="prompt-card-header"><div><h3>برومبت Suno الكامل</h3><p class="prompt-note safe-note">احفظه داخل مشروع الأغنية من مرحلة التوليد.</p></div><button id="copyFullButton" class="copy-icon-button" type="button"><span class="copy-glyph">⧉</span></button></div><textarea id="fullPromptOutput" readonly></textarea></div><div class="prompt-card"><div class="prompt-card-header"><div><h3>الوصف الموسيقي</h3></div><button id="copyGeneralButton" class="copy-icon-button" type="button"><span class="copy-glyph">⧉</span></button></div><textarea id="promptOutput" readonly></textarea></div><div class="prompt-card isolation-card"><div class="prompt-card-header"><div><h3>عقد العزل</h3></div><span class="locked-badge">🔒</span></div><textarea id="isolationOutput" readonly></textarea></div><div class="prompt-card"><div class="prompt-card-header"><h3>Exclude</h3></div><textarea id="excludeOutput" readonly></textarea></div><div class="settings-grid"><div><span>Category</span><strong id="categoryOutput">Custom</strong></div><div><span>Weirdness</span><strong id="weirdnessOutput">10%</strong></div><div><span>Style Influence</span><strong id="styleOutput">100%</strong></div><div><span>Audio Influence</span><strong id="audioOutput">0%</strong></div></div><p id="copyFeedback" class="copy-feedback" aria-live="polite"></p></section></section>
 </main>

ui/compact-brief.css

@@ -0,0 +1,98 @@
+.compact-brief {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: 8px;
+  padding-top: 12px;
+  border-top: 1px solid var(--line);
+  align-items: end;
+}
+
+.compact-brief .brief-field {
+  grid-column: span 3;
+  min-width: 0;
+  gap: 5px;
+  padding: 8px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--input);
+}
+
+.compact-brief .brief-field-wide { grid-column: span 6; }
+.compact-brief .brief-field-xs { grid-column: span 2; }
+
+.compact-brief .brief-field > span {
+  color: var(--muted);
+  font-size: 11px;
+  line-height: 1;
+}
+
+.compact-brief input,
+.compact-brief select {
+  min-height: 34px;
+  padding: 6px 8px;
+  border-radius: 8px;
+  background: var(--panel);
+  font-size: 12px;
+}
+
+.compact-brief input[type="number"],
+.compact-brief #briefDuration,
+.compact-brief #briefKey,
+.compact-brief #briefTimeSignature {
+  direction: ltr;
+  text-align: center;
+}
+
+.project-panel {
+  padding: 12px;
+}
+
+.project-toolbar {
+  align-items: center;
+}
+
+.project-selector-group label {
+  gap: 4px;
+  font-size: 11px;
+}
+
+.project-selector-group input,
+.project-selector-group select {
+  min-height: 36px;
+  padding: 7px 9px;
+}
+
+.project-actions button,
+.project-actions .file-button {
+  min-height: 36px;
+  padding: 7px 11px;
+  font-size: 12px;
+}
+
+.stage-strip {
+  padding: 10px 0 8px;
+}
+
+.project-summary {
+  padding: 7px 0 9px;
+}
+
+@media (max-width: 1000px) {
+  .compact-brief .brief-field { grid-column: span 4; }
+  .compact-brief .brief-field-wide { grid-column: span 8; }
+  .compact-brief .brief-field-xs { grid-column: span 2; }
+}
+
+@media (max-width: 760px) {
+  .compact-brief { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+  .compact-brief .brief-field { grid-column: span 3; }
+  .compact-brief .brief-field-wide { grid-column: span 6; }
+  .compact-brief .brief-field-xs { grid-column: span 2; }
+}
+
+@media (max-width: 520px) {
+  .compact-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+  .compact-brief .brief-field,
+  .compact-brief .brief-field-wide { grid-column: span 2; }
+  .compact-brief .brief-field-xs { grid-column: span 1; }
+}

ui/prompt-safety.css

@@ -1,3 +1,5 @@
+@import url("compact-brief.css");
+
 .full-prompt-card {
   border-color: color-mix(in srgb, var(--ok) 55%, var(--line));
   box-shadow: 0 0 0 1px var(--ok-soft);
@@ -46,4 +48,4 @@
   .full-prompt-card textarea {
     min-height: 260px;
   }
-}
+}