fix(export): render all diagrams in PDF and image output

desktop-app/resources/index.html

@@ -699,38 +699,46 @@ <h2 id="document-sidebar-title">Explorer</h2>
             <div class="modal-body">
               <p class="share-modal-description">Choose how the PDF should be generated.</p>
               <div class="live-share-section-title mb-2">Generation Method</div>
-              <div class="share-mode-cards mb-3">
-                <label class="share-mode-card is-selected" id="pdf-export-card-vector" for="pdf-export-mode-vector">
+              <div class="pdf-export-method-cards">
+                <label class="pdf-export-method-card is-selected" id="pdf-export-card-vector" for="pdf-export-mode-vector">
                   <input type="radio" id="pdf-export-mode-vector" name="pdf-export-mode" value="vector" checked />
-                  <span class="share-card-icon"><i class="lucide lucide-file-text"></i></span>
-                  <span class="share-card-body">
-                    <span class="share-card-title">Browser Print (Recommended)</span>
-                    <span class="share-card-desc">Faster, suggested for large documents. Note: images, diagrams, etc. might break.</span>
+                  <span class="pdf-export-method-radio" aria-hidden="true"></span>
+                  <span class="pdf-export-method-content">
+                    <span class="pdf-export-method-heading">
+                      <span class="pdf-export-method-title">Browser Print</span>
+                      <span class="pdf-export-method-badge">Recommended</span>
+                    </span>
+                    <span class="pdf-export-method-description">Fast export using your browser print dialog.</span>
                   </span>
-                  <span class="share-card-check"><i class="lucide lucide-check"></i></span>
                 </label>
-                <label class="share-mode-card" id="pdf-export-card-raster" for="pdf-export-mode-raster">
+                <label class="pdf-export-method-card" id="pdf-export-card-raster" for="pdf-export-mode-raster">
                   <input type="radio" id="pdf-export-mode-raster" name="pdf-export-mode" value="raster" />
-                  <span class="share-card-icon"><i class="lucide lucide-file-text"></i></span>
-                  <span class="share-card-body">
-                    <span class="share-card-title">Legacy Raster PDF</span>
-                    <span class="share-card-desc">Intelligently plans page breaks to keep images, tables, equations, and diagrams together. Blocks move to the next page when there is not enough space. Recommended for short documents.</span>
+                  <span class="pdf-export-method-radio" aria-hidden="true"></span>
+                  <span class="pdf-export-method-content">
+                    <span class="pdf-export-method-heading">
+                      <span class="pdf-export-method-title">Precision PDF</span>
+                    </span>
+                    <span class="pdf-export-method-description">Keeps tables, diagrams, and equations together.</span>
                   </span>
-                  <span class="share-card-check"><i class="lucide lucide-check"></i></span>
                 </label>
               </div>
-              <div class="live-share-section-title mb-2">Appearance</div>
-              <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
-                <label class="export-theme-option segmented-control-btn is-active is-selected" id="pdf-export-theme-card-light" for="pdf-export-theme-light">
-                  <input type="radio" id="pdf-export-theme-light" name="pdf-export-theme" value="light" checked />
-                  <i class="lucide lucide-sun"></i>
-                  <span>Light</span>
-                </label>
-                <label class="export-theme-option segmented-control-btn" id="pdf-export-theme-card-dark" for="pdf-export-theme-dark">
-                  <input type="radio" id="pdf-export-theme-dark" name="pdf-export-theme" value="dark" />
-                  <i class="lucide lucide-moon"></i>
-                  <span>Dark</span>
-                </label>
+              <div class="export-appearance-setting">
+                <span class="export-appearance-label">
+                  <span class="export-appearance-title">Appearance</span>
+                  <span class="export-appearance-memory"><i class="lucide lucide-check" aria-hidden="true"></i>Remembered</span>
+                </span>
+                <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
+                  <label class="export-theme-option segmented-control-btn is-active is-selected" id="pdf-export-theme-card-light" for="pdf-export-theme-light">
+                    <input type="radio" id="pdf-export-theme-light" name="pdf-export-theme" value="light" checked />
+                    <i class="lucide lucide-sun"></i>
+                    <span>Light</span>
+                  </label>
+                  <label class="export-theme-option segmented-control-btn" id="pdf-export-theme-card-dark" for="pdf-export-theme-dark">
+                    <input type="radio" id="pdf-export-theme-dark" name="pdf-export-theme" value="dark" />
+                    <i class="lucide lucide-moon"></i>
+                    <span>Dark</span>
+                  </label>
+                </div>
               </div>
             </div>
             <div class="reset-modal-actions">
@@ -742,7 +750,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
 
         <!-- HTML Export Options Modal -->
         <div id="html-export-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="html-export-title" aria-hidden="true" style="display:none;">
-          <div class="reset-modal-box app-modal-box modal-box">
+          <div class="reset-modal-box reset-modal-box--wide app-modal-box modal-box">
             <div class="modal-header">
               <p id="html-export-title" class="reset-modal-message">Export HTML Options</p>
               <button type="button" class="modal-close-btn" id="html-export-close" aria-label="Close HTML export dialog">
@@ -751,18 +759,23 @@ <h2 id="document-sidebar-title">Explorer</h2>
             </div>
             <div class="modal-body">
               <p class="share-modal-description">Choose how the exported HTML document should be styled.</p>
-              <div class="live-share-section-title mb-2">Appearance</div>
-              <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
-                <label class="export-theme-option segmented-control-btn is-active is-selected" id="html-export-theme-card-light" for="html-export-theme-light">
-                  <input type="radio" id="html-export-theme-light" name="html-export-theme" value="light" checked />
-                  <i class="lucide lucide-sun"></i>
-                  <span>Light</span>
-                </label>
-                <label class="export-theme-option segmented-control-btn" id="html-export-theme-card-dark" for="html-export-theme-dark">
-                  <input type="radio" id="html-export-theme-dark" name="html-export-theme" value="dark" />
-                  <i class="lucide lucide-moon"></i>
-                  <span>Dark</span>
-                </label>
+              <div class="export-appearance-setting">
+                <span class="export-appearance-label">
+                  <span class="export-appearance-title">Appearance</span>
+                  <span class="export-appearance-memory"><i class="lucide lucide-check" aria-hidden="true"></i>Remembered</span>
+                </span>
+                <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
+                  <label class="export-theme-option segmented-control-btn is-active is-selected" id="html-export-theme-card-light" for="html-export-theme-light">
+                    <input type="radio" id="html-export-theme-light" name="html-export-theme" value="light" checked />
+                    <i class="lucide lucide-sun"></i>
+                    <span>Light</span>
+                  </label>
+                  <label class="export-theme-option segmented-control-btn" id="html-export-theme-card-dark" for="html-export-theme-dark">
+                    <input type="radio" id="html-export-theme-dark" name="html-export-theme" value="dark" />
+                    <i class="lucide lucide-moon"></i>
+                    <span>Dark</span>
+                  </label>
+                </div>
               </div>
             </div>
             <div class="reset-modal-actions">
@@ -774,7 +787,7 @@ <h2 id="document-sidebar-title">Explorer</h2>
 
         <!-- PNG Export Options Modal -->
         <div id="png-export-modal" class="reset-modal-overlay modal-overlay" role="dialog" aria-modal="true" aria-labelledby="png-export-title" aria-hidden="true" style="display:none;">
-          <div class="reset-modal-box app-modal-box modal-box">
+          <div class="reset-modal-box reset-modal-box--wide app-modal-box modal-box">
             <div class="modal-header">
               <p id="png-export-title" class="reset-modal-message">Export Image Options</p>
               <button type="button" class="modal-close-btn" id="png-export-close" aria-label="Close Image export dialog">
@@ -783,18 +796,23 @@ <h2 id="document-sidebar-title">Explorer</h2>
             </div>
             <div class="modal-body">
               <p class="share-modal-description">Choose how the exported image should be styled.</p>
-              <div class="live-share-section-title mb-2">Appearance</div>
-              <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
-                <label class="export-theme-option segmented-control-btn is-active is-selected" id="png-export-theme-card-light" for="png-export-theme-light">
-                  <input type="radio" id="png-export-theme-light" name="png-export-theme" value="light" checked />
-                  <i class="lucide lucide-sun"></i>
-                  <span>Light</span>
-                </label>
-                <label class="export-theme-option segmented-control-btn" id="png-export-theme-card-dark" for="png-export-theme-dark">
-                  <input type="radio" id="png-export-theme-dark" name="png-export-theme" value="dark" />
-                  <i class="lucide lucide-moon"></i>
-                  <span>Dark</span>
-                </label>
+              <div class="export-appearance-setting">
+                <span class="export-appearance-label">
+                  <span class="export-appearance-title">Appearance</span>
+                  <span class="export-appearance-memory"><i class="lucide lucide-check" aria-hidden="true"></i>Remembered</span>
+                </span>
+                <div class="export-theme-toggle segmented-control" role="radiogroup" aria-label="Export theme">
+                  <label class="export-theme-option segmented-control-btn is-active is-selected" id="png-export-theme-card-light" for="png-export-theme-light">
+                    <input type="radio" id="png-export-theme-light" name="png-export-theme" value="light" checked />
+                    <i class="lucide lucide-sun"></i>
+                    <span>Light</span>
+                  </label>
+                  <label class="export-theme-option segmented-control-btn" id="png-export-theme-card-dark" for="png-export-theme-dark">
+                    <input type="radio" id="png-export-theme-dark" name="png-export-theme" value="dark" />
+                    <i class="lucide lucide-moon"></i>
+                    <span>Dark</span>
+                  </label>
+                </div>
               </div>
             </div>
             <div class="reset-modal-actions">