chore: add default media sources to theme editor input

Resolve #9 by adding a pre-configured selection of default media sources to the theme editor's live
preview section.

The input field now includes a `datalist` element with default options for typical media scenarios.
The `datalist` element was chosen to provide a simple and native solution for suggesting media
sources, ensuring compatibility and ease of use across most browsers.

While Firefox has limited support for the `datalist` element, the decision to use it was made to
simplify the implementation and utilize native HTML5 elements when possible.

index.html

@@ -45,7 +45,16 @@ <h2>Craft your theme</h2>
       <div class="section-title-container">
         <h2>Live Canvas Preview</h2>
         <toggle-pane-button title="Change the media" label="Change the media" id="load-media-button">
-          <input id="src-input" type="text" placeholder="Enter a URN..." />
+          <div>
+            <input id="src-input" type="text" placeholder="Enter a URN..."  list="default-options" />
+            <datalist id="default-options">
+              <option value="urn:srf:video:c4927fcf-e1a0-0001-7edd-1ef01d441651">Live video</option>
+              <option value="urn:rts:video:3608506">live video (DVR)</option>
+              <option value="urn:rts:video:14318206">Video</option>
+              <option value="urn:rsi:audio:2108350">Audio</option>a
+              <option value="urn:rtr:audio:a029e818-77a5-4c2e-ad70-d573bb865e31">Live audio (DVR)</option>
+            </datalist>
+          </div>
         </toggle-pane-button>
       </div>
       <preview-box id="preview"></preview-box>