From cb18615c1bc0f03f737b013d63b203b307d202ce Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Wed, 8 Oct 2025 12:20:27 -0400
Subject: [PATCH] Refactor NIP-71 form handling and update edit modal

---
 components/edit-video-modal.html     | 561 +++++++++++++++++++++
 js/ui/components/EditModal.js        |  60 ++-
 js/ui/components/UploadModal.js      | 525 +------------------
 js/ui/components/nip71FormManager.js | 723 +++++++++++++++++++++++++++
 4 files changed, 1355 insertions(+), 514 deletions(-)
 create mode 100644 js/ui/components/nip71FormManager.js

diff --git a/components/edit-video-modal.html b/components/edit-video-modal.html
index 9b2d9545..9822400e 100644
--- a/components/edit-video-modal.html
+++ b/components/edit-video-modal.html
@@ -73,6 +73,567 @@
             </div>
           </div>
 
+          <!-- NOTE: Keep this NIP-71 markup in sync with the upload and revert modals. -->
+          <div
+            class="space-y-4 rounded-lg border border-gray-800 bg-black/30 p-4"
+            id="editNip71EventDetails"
+            data-nip71-section="event-details"
+          >
+            <fieldset
+              id="editNip71KindFieldset"
+              class="space-y-2"
+              data-nip71-fieldset="kind"
+            >
+              <legend class="text-sm font-semibold text-gray-200">
+                NIP-71 event type
+              </legend>
+              <p class="text-xs text-gray-400">
+                Choose the video format. <span class="font-medium text-gray-300">Kind 21</span> is a full video, while
+                <span class="font-medium text-gray-300">Kind 22</span> is a short.
+              </p>
+              <div
+                class="flex flex-wrap gap-4"
+                role="radiogroup"
+                aria-labelledby="editNip71KindFieldset"
+              >
+                <label class="flex items-center gap-2 text-sm text-gray-200">
+                  <input
+                    type="radio"
+                    name="editNip71Kind"
+                    id="editNip71KindLong"
+                    value="21"
+                    checked
+                    data-nip71-input="kind"
+                    class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  />
+                  Normal video (kind 21)
+                </label>
+                <label class="flex items-center gap-2 text-sm text-gray-200">
+                  <input
+                    type="radio"
+                    name="editNip71Kind"
+                    id="editNip71KindShort"
+                    value="22"
+                    data-nip71-input="kind"
+                    class="h-4 w-4 border-gray-600 bg-gray-800 text-blue-500 focus:ring-blue-500"
+                  />
+                  Short video (kind 22)
+                </label>
+              </div>
+            </fieldset>
+
+            <div class="grid gap-4 md:grid-cols-2" data-nip71-grid="metadata">
+              <div>
+                <label for="editNip71PublishedAt" class="block text-sm font-medium text-gray-200">
+                  Published at
+                </label>
+                <input
+                  type="datetime-local"
+                  id="editNip71PublishedAt"
+                  data-nip71-input="published_at"
+                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Set the canonical publish time for cross-client ordering.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71AltText" class="block text-sm font-medium text-gray-200">
+                  Alt text
+                </label>
+                <input
+                  type="text"
+                  id="editNip71AltText"
+                  data-nip71-input="alt"
+                  placeholder="Describe the visuals for screen readers"
+                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Plain-language fallback shown when the media cannot load.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71Duration" class="block text-sm font-medium text-gray-200">
+                  Duration (seconds)
+                </label>
+                <input
+                  type="number"
+                  id="editNip71Duration"
+                  min="0"
+                  step="1"
+                  data-nip71-input="duration"
+                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Provide the runtime in whole seconds for timeline scrubbing.
+                </p>
+              </div>
+              <div>
+                <label for="editNip71ContentWarning" class="block text-sm font-medium text-gray-200">
+                  Content warning
+                </label>
+                <input
+                  type="text"
+                  id="editNip71ContentWarning"
+                  data-nip71-input="content-warning"
+                  placeholder="e.g., Flashing lights"
+                  class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                />
+                <p class="mt-1 text-xs text-gray-400">
+                  Leave blank if the video is safe for all audiences.
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <label for="editNip71Summary" class="block text-sm font-medium text-gray-200">
+                Summary
+              </label>
+              <textarea
+                id="editNip71Summary"
+                rows="3"
+                data-nip71-input="summary"
+                class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                placeholder="Short synopsis used as the Nostr content field"
+              ></textarea>
+              <p class="mt-1 text-xs text-gray-400">
+                This becomes the event content. Keep it concise for Nostr readers.
+              </p>
+            </div>
+          </div>
+
+          <fieldset
+            id="editNip71TagsFieldset"
+            class="space-y-6 rounded-lg border border-gray-800 bg-black/30 p-4"
+            data-nip71-section="tags"
+          >
+            <legend class="text-sm font-semibold text-gray-200">NIP-71 tags</legend>
+            <p class="text-xs text-gray-400">
+              Use the controls below to describe media variants, captions, chapters, participants, and references.
+            </p>
+
+            <section class="space-y-4" aria-labelledby="editNip71ImetaLabel" data-nip71-repeater="imeta">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ImetaLabel" class="text-sm font-medium text-gray-200">Image metadata (imeta)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="imeta"
+                  aria-describedby="editNip71ImetaHelp"
+                >
+                  Add variant
+                </button>
+              </div>
+              <p id="editNip71ImetaHelp" class="text-xs text-gray-400">
+                Provide dimensions, MIME type, and resource links for each variant. Nested repeaters let you attach multiple
+                <code>image</code>, <code>fallback</code>, or <code>service</code> values.
+              </p>
+              <div id="editNip71ImetaList" class="space-y-4" data-nip71-list="imeta"></div>
+              <template id="editNip71ImetaTemplate" data-nip71-template="imeta">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="imeta">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        MIME type (<code>m</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="m"
+                        placeholder="video/mp4"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">RFC 2046 media type for this encoding.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Pixel dimensions (<code>dim</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="dim"
+                        placeholder="1920x1080"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">Formatted as widthxheight.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Streaming URL (<code>url</code>)
+                      </label>
+                      <input
+                        type="url"
+                        data-nip71-field="url"
+                        placeholder="https://cdn.example.com/variant.m3u8"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">HTTPS variant URL shared across clients.</p>
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">
+                        Magnet (<code>x</code>)
+                      </label>
+                      <input
+                        type="text"
+                        data-nip71-field="x"
+                        placeholder="magnet:?xt=urn:btih:..."
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                      <p class="mt-1 text-[11px] text-gray-500">Optional magnet pointer if the variant is seeded via P2P.</p>
+                    </div>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="image">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Image values</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="image"
+                      >
+                        Add image URL
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="image"></div>
+                    <template data-nip71-nested-template="image">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="image">
+                        <input
+                          type="url"
+                          placeholder="https://cdn.example.com/poster.jpg"
+                          data-nip71-nested-field="image"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove image URL"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="fallback">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Fallback URLs</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="fallback"
+                      >
+                        Add fallback
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="fallback"></div>
+                    <template data-nip71-nested-template="fallback">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="fallback">
+                        <input
+                          type="url"
+                          placeholder="https://cdn.backup.net/video.mp4"
+                          data-nip71-nested-field="fallback"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove fallback URL"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="space-y-3" data-nip71-nested="service">
+                    <div class="flex items-center justify-between">
+                      <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-400">Services</h4>
+                      <button
+                        type="button"
+                        class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-200 hover:border-gray-500 hover:text-white"
+                        data-nip71-nested-add="service"
+                      >
+                        Add service
+                      </button>
+                    </div>
+                    <div class="space-y-2" data-nip71-nested-list="service"></div>
+                    <template data-nip71-nested-template="service">
+                      <div class="flex items-center gap-2" data-nip71-nested-entry="service">
+                        <input
+                          type="text"
+                          placeholder="https://api.example.com"
+                          data-nip71-nested-field="service"
+                          class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                        />
+                        <button
+                          type="button"
+                          class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                          data-nip71-remove="nested"
+                          aria-label="Remove service entry"
+                        >
+                          Remove
+                        </button>
+                      </div>
+                    </template>
+                  </div>
+
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="imeta"
+                    >
+                      Remove variant
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71TextTracksLabel" data-nip71-repeater="text-track">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71TextTracksLabel" class="text-sm font-medium text-gray-200">
+                  Caption &amp; subtitle tracks (text-track)
+                </h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="text-track"
+                  aria-describedby="editNip71TextTracksHelp"
+                >
+                  Add track
+                </button>
+              </div>
+              <p id="editNip71TextTracksHelp" class="text-xs text-gray-400">
+                Supply caption or subtitle URLs along with file type and language so players can surface accessibility features.
+              </p>
+              <div id="editNip71TextTrackList" class="space-y-4" data-nip71-list="text-track"></div>
+              <template id="editNip71TextTrackTemplate" data-nip71-template="text-track">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="text-track">
+                  <div class="grid gap-3 md:grid-cols-3">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Track URL</label>
+                      <input
+                        type="url"
+                        data-nip71-field="url"
+                        placeholder="https://cdn.example.com/subs.vtt"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Type</label>
+                      <input
+                        type="text"
+                        data-nip71-field="type"
+                        placeholder="text/vtt"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Language</label>
+                      <input
+                        type="text"
+                        data-nip71-field="language"
+                        placeholder="en"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="text-track"
+                    >
+                      Remove track
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71SegmentsLabel" data-nip71-repeater="segment">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71SegmentsLabel" class="text-sm font-medium text-gray-200">Chapters &amp; segments (segment)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="segment"
+                  aria-describedby="editNip71SegmentsHelp"
+                >
+                  Add segment
+                </button>
+              </div>
+              <p id="editNip71SegmentsHelp" class="text-xs text-gray-400">
+                Outline chapters with start and end times, titles, and optional thumbnails.
+              </p>
+              <div id="editNip71SegmentList" class="space-y-4" data-nip71-list="segment"></div>
+              <template id="editNip71SegmentTemplate" data-nip71-template="segment">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="segment">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Start (seconds)</label>
+                      <input
+                        type="number"
+                        data-nip71-field="start"
+                        min="0"
+                        step="1"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">End (seconds)</label>
+                      <input
+                        type="number"
+                        data-nip71-field="end"
+                        min="0"
+                        step="1"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Title</label>
+                      <input
+                        type="text"
+                        data-nip71-field="title"
+                        placeholder="Chapter title"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Thumbnail URL</label>
+                      <input
+                        type="url"
+                        data-nip71-field="thumbnail"
+                        placeholder="https://cdn.example.com/frame.jpg"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="segment"
+                    >
+                      Remove segment
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71HashtagsLabel" data-nip71-repeater="t">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71HashtagsLabel" class="text-sm font-medium text-gray-200">Hashtags (<code>t</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="t"
+                >
+                  Add hashtag
+                </button>
+              </div>
+              <div id="editNip71HashtagList" class="space-y-2" data-nip71-list="t"></div>
+              <template id="editNip71HashtagTemplate" data-nip71-template="t">
+                <div class="flex items-center gap-2" data-nip71-entry="t">
+                  <input
+                    type="text"
+                    data-nip71-field="value"
+                    placeholder="#nostr"
+                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  />
+                  <button
+                    type="button"
+                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    data-nip71-remove="t"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71ParticipantsLabel" data-nip71-repeater="p">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ParticipantsLabel" class="text-sm font-medium text-gray-200">Participants (<code>p</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="p"
+                >
+                  Add participant
+                </button>
+              </div>
+              <div id="editNip71ParticipantList" class="space-y-3" data-nip71-list="p"></div>
+              <template id="editNip71ParticipantTemplate" data-nip71-template="p">
+                <article class="space-y-3 rounded-md border border-gray-800 bg-gray-900/60 p-4" data-nip71-entry="p">
+                  <div class="grid gap-3 md:grid-cols-2">
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Participant pubkey</label>
+                      <input
+                        type="text"
+                        data-nip71-field="pubkey"
+                        placeholder="npub1... or hex"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                    <div>
+                      <label class="block text-xs font-medium text-gray-300">Relay hint</label>
+                      <input
+                        type="text"
+                        data-nip71-field="relay"
+                        placeholder="wss://relay.example.com"
+                        class="mt-1 block w-full rounded-md border-gray-700 bg-gray-800 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                      />
+                    </div>
+                  </div>
+                  <div class="flex justify-end">
+                    <button
+                      type="button"
+                      class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                      data-nip71-remove="p"
+                    >
+                      Remove participant
+                    </button>
+                  </div>
+                </article>
+              </template>
+            </section>
+
+            <section class="space-y-4" aria-labelledby="editNip71ReferencesLabel" data-nip71-repeater="r">
+              <div class="flex items-center justify-between">
+                <h3 id="editNip71ReferencesLabel" class="text-sm font-medium text-gray-200">Reference links (<code>r</code>)</h3>
+                <button
+                  type="button"
+                  class="rounded-md border border-gray-700 px-3 py-1 text-xs font-semibold text-gray-200 hover:border-gray-500 hover:text-white"
+                  data-nip71-add="r"
+                >
+                  Add reference
+                </button>
+              </div>
+              <div id="editNip71ReferenceList" class="space-y-2" data-nip71-list="r"></div>
+              <template id="editNip71ReferenceTemplate" data-nip71-template="r">
+                <div class="flex items-center gap-2" data-nip71-entry="r">
+                  <input
+                    type="url"
+                    data-nip71-field="url"
+                    placeholder="https://example.com/context"
+                    class="flex-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-2 text-gray-100 focus:border-blue-500 focus:ring-blue-500"
+                  />
+                  <button
+                    type="button"
+                    class="rounded border border-gray-700 px-2 py-1 text-[11px] text-gray-300 hover:border-gray-500 hover:text-white"
+                    data-nip71-remove="r"
+                  >
+                    Remove
+                  </button>
+                </div>
+              </template>
+            </section>
+          </fieldset>
+
           <div class="space-y-1">
             <label for="editVideoUrl" class="block text-sm font-medium text-gray-200">
               Hosted video URL (https)
diff --git a/js/ui/components/EditModal.js b/js/ui/components/EditModal.js
index 74e5abd0..c40274f8 100644
--- a/js/ui/components/EditModal.js
+++ b/js/ui/components/EditModal.js
@@ -1,4 +1,5 @@
 import { extractMagnetHints, normalizeAndAugmentMagnet } from "../../magnet.js";
+import { Nip71FormManager } from "./nip71FormManager.js";
 
 export class EditModal {
   constructor({
@@ -57,6 +58,11 @@ export class EditModal {
     this.isVisible = false;
     this.eventsBound = false;
     this.loadPromise = null;
+
+    this.nip71FormManager = new Nip71FormManager();
+    this.nip71SectionKey = "edit";
+    this.originalNip71Metadata = null;
+    this.originalNip71MetadataJson = null;
   }
 
   addEventListener(type, listener, options) {
@@ -163,6 +169,9 @@ export class EditModal {
     if (this.visibility.helper) {
       this.visibility.helperDefault = this.visibility.helper.textContent || "";
     }
+
+    const nip71Context = this.form || context;
+    this.nip71FormManager.registerSection(this.nip71SectionKey, nip71Context);
   }
 
   bindEvents() {
@@ -232,11 +241,16 @@ export class EditModal {
         this.emit("video:edit-visibility-change", detail);
       });
     }
+
+    this.nip71FormManager.bindSection(this.nip71SectionKey);
   }
 
   reset() {
     if (!this.root) {
       this.activeVideo = null;
+      this.nip71FormManager.resetSection(this.nip71SectionKey);
+      this.originalNip71Metadata = null;
+      this.originalNip71MetadataJson = null;
       return;
     }
 
@@ -277,6 +291,9 @@ export class EditModal {
 
     this.handleIsPrivateChange({ emit: false });
 
+    this.nip71FormManager.resetSection(this.nip71SectionKey);
+    this.originalNip71Metadata = null;
+    this.originalNip71MetadataJson = null;
     this.activeVideo = null;
   }
 
@@ -306,6 +323,13 @@ export class EditModal {
     };
 
     this.applyVideoToForm(editContext);
+    this.nip71FormManager.resetSection(this.nip71SectionKey);
+    if (video.nip71 && typeof video.nip71 === "object") {
+      this.nip71FormManager.hydrateSection(this.nip71SectionKey, video.nip71);
+    }
+    const initialNip71 = this.nip71FormManager.collectSection(this.nip71SectionKey);
+    this.originalNip71Metadata = this.cloneNip71Metadata(initialNip71);
+    this.originalNip71MetadataJson = JSON.stringify(this.originalNip71Metadata);
     this.activeVideo = editContext;
 
     if (this.root) {
@@ -641,6 +665,17 @@ export class EditModal {
     this.emit("video:edit-visibility-change", detail);
   }
 
+  cloneNip71Metadata(metadata) {
+    if (metadata == null) {
+      return null;
+    }
+    try {
+      return JSON.parse(JSON.stringify(metadata));
+    } catch (error) {
+      return metadata;
+    }
+  }
+
   submit() {
     if (!this.activeVideo || !this.root) {
       this.showError("No video selected for editing.");
@@ -715,6 +750,20 @@ export class EditModal {
       typeof original.enableComments === "boolean" ? original.enableComments : true;
     const originalIsPrivate = original.isPrivate === true;
 
+    const currentNip71 = this.cloneNip71Metadata(
+      this.nip71FormManager.collectSection(this.nip71SectionKey)
+    );
+    const hasImetaSource = Array.isArray(currentNip71?.imeta)
+      ? currentNip71.imeta.some((variant) => {
+          if (!variant || typeof variant !== "object") {
+            return false;
+          }
+          const hasUrl = typeof variant.url === "string" && variant.url.trim();
+          const hasMagnet = typeof variant.x === "string" && variant.x.trim();
+          return Boolean(hasUrl || hasMagnet);
+        })
+      : false;
+
     let finalEnableComments = originalEnableComments;
     if (commentsInput) {
       if (commentsInput.disabled) {
@@ -733,8 +782,10 @@ export class EditModal {
       }
     }
 
-    if (!finalTitle || (!finalUrl && !finalMagnet)) {
-      this.showError("Title and at least one of URL or Magnet is required.");
+    if (!finalTitle || (!finalUrl && !finalMagnet && !hasImetaSource)) {
+      this.showError(
+        "Title and at least one of URL, Magnet, or a NIP-71 media variant is required."
+      );
       return;
     }
 
@@ -775,6 +826,11 @@ export class EditModal {
       isPrivate: finalIsPrivate,
     };
 
+    const currentNip71Json = JSON.stringify(currentNip71);
+    const nip71Edited = currentNip71Json !== this.originalNip71MetadataJson;
+    updatedData.nip71 = currentNip71;
+    updatedData.nip71Edited = nip71Edited;
+
     const originalEvent = {
       id: this.sanitizers.text(original.id || ""),
       pubkey: this.sanitizers.text(original.pubkey || ""),
diff --git a/js/ui/components/UploadModal.js b/js/ui/components/UploadModal.js
index 01508d02..200a89f9 100644
--- a/js/ui/components/UploadModal.js
+++ b/js/ui/components/UploadModal.js
@@ -1,3 +1,7 @@
+// NOTE: Keep the Upload, Edit, and Revert modals in lockstep when updating NIP-71 form features.
+
+import { Nip71FormManager } from "./nip71FormManager.js";
+
 export class UploadModal {
   constructor({
     authService,
@@ -69,10 +73,7 @@ export class UploadModal {
     this.r2ZoneIdInput = null;
     this.r2BaseDomainInput = null;
 
-    this.nip71 = {
-      custom: null,
-      cloudflare: null,
-    };
+    this.nip71FormManager = new Nip71FormManager();
   }
 
   addEventListener(type, listener, options) {
@@ -210,244 +211,8 @@ export class UploadModal {
     this.r2ZoneIdInput = context.querySelector("#r2ZoneId") || null;
     this.r2BaseDomainInput = context.querySelector("#r2BaseDomain") || null;
 
-    this.nip71.custom = this.cacheNip71Section(this.customSection);
-    this.nip71.cloudflare = this.cacheNip71Section(this.cloudflareSection);
-  }
-
-  cacheNip71Section(section) {
-    if (!section) {
-      return null;
-    }
-
-    const repeaters = {};
-    ["imeta", "text-track", "segment", "t", "p", "r"].forEach((key) => {
-      repeaters[key] = this.cacheNip71Repeater(section, key);
-    });
-
-    return {
-      root: section,
-      kindInputs: Array.from(section.querySelectorAll('[data-nip71-input="kind"]')),
-      publishedAtInput:
-        section.querySelector('[data-nip71-input="published_at"]') || null,
-      altInput: section.querySelector('[data-nip71-input="alt"]') || null,
-      durationInput:
-        section.querySelector('[data-nip71-input="duration"]') || null,
-      contentWarningInput:
-        section.querySelector('[data-nip71-input="content-warning"]') || null,
-      summaryInput: section.querySelector('[data-nip71-input="summary"]') || null,
-      repeaters,
-      handlers: {},
-    };
-  }
-
-  cacheNip71Repeater(section, key) {
-    if (!section || !key) {
-      return null;
-    }
-
-    const repeaterRoot = section.querySelector(`[data-nip71-repeater="${key}"]`);
-    if (!repeaterRoot) {
-      return null;
-    }
-
-    return {
-      root: repeaterRoot,
-      list: repeaterRoot.querySelector(`[data-nip71-list="${key}"]`) || null,
-      template:
-        repeaterRoot.querySelector(`[data-nip71-template="${key}"]`) || null,
-    };
-  }
-
-  getNip71Store(mode) {
-    if (!mode || !this.nip71) {
-      return null;
-    }
-    return this.nip71[mode] || null;
-  }
-
-  bindNip71Events(mode) {
-    const store = this.getNip71Store(mode);
-    if (!store?.root) {
-      return;
-    }
-
-    if (store.handlers?.click) {
-      try {
-        store.root.removeEventListener("click", store.handlers.click);
-      } catch (error) {
-        console.warn("[UploadModal] Failed to detach previous NIP-71 handler", error);
-      }
-    }
-
-    const handleClick = (event) => {
-      const addTrigger = event.target?.closest?.("[data-nip71-add]");
-      if (addTrigger && store.root.contains(addTrigger)) {
-        event.preventDefault();
-        this.handleNip71Add(mode, addTrigger.dataset?.nip71Add || "");
-        return;
-      }
-
-      const nestedAddTrigger = event.target?.closest?.("[data-nip71-nested-add]");
-      if (nestedAddTrigger && store.root.contains(nestedAddTrigger)) {
-        event.preventDefault();
-        this.handleNip71NestedAdd(nestedAddTrigger);
-        return;
-      }
-
-      const removeTrigger = event.target?.closest?.("[data-nip71-remove]");
-      if (removeTrigger && store.root.contains(removeTrigger)) {
-        event.preventDefault();
-        this.handleNip71Remove(mode, removeTrigger);
-      }
-    };
-
-    store.root.addEventListener("click", handleClick);
-    store.handlers = { ...(store.handlers || {}), click: handleClick };
-  }
-
-  handleNip71Add(mode, key) {
-    if (!key) {
-      return;
-    }
-    const entry = this.addNip71RepeaterEntry(mode, key);
-    if (entry) {
-      this.focusFirstField(entry, "[data-nip71-field], [data-nip71-nested-field]");
-    }
-  }
-
-  handleNip71NestedAdd(trigger) {
-    if (!trigger) {
-      return;
-    }
-    const nestedKey = trigger.dataset?.nip71NestedAdd || "";
-    if (!nestedKey) {
-      return;
-    }
-    const container = trigger.closest(`[data-nip71-nested="${nestedKey}"]`);
-    if (!container) {
-      return;
-    }
-    const entry = this.addNip71NestedEntry(container, nestedKey);
-    if (entry) {
-      this.focusFirstField(
-        entry,
-        `[data-nip71-nested-field="${nestedKey}"]`
-      );
-    }
-  }
-
-  handleNip71Remove(mode, trigger) {
-    if (!trigger) {
-      return;
-    }
-    const targetKey = trigger.dataset?.nip71Remove || "";
-    if (!targetKey) {
-      return;
-    }
-
-    if (targetKey === "nested") {
-      const nestedEntry = trigger.closest("[data-nip71-nested-entry]");
-      this.removeNip71NestedEntry(nestedEntry);
-      return;
-    }
-
-    this.removeNip71RepeaterEntry(mode, targetKey, trigger);
-  }
-
-  addNip71RepeaterEntry(mode, key) {
-    const store = this.getNip71Store(mode);
-    if (!store?.repeaters || !key) {
-      return null;
-    }
-
-    const repeater = store.repeaters[key];
-    if (!repeater?.list || !repeater?.template) {
-      return null;
-    }
-
-    const templateNode = repeater.template;
-    const fragment = templateNode.content
-      ? templateNode.content.cloneNode(true)
-      : templateNode.cloneNode(true);
-
-    const entry =
-      fragment.querySelector?.(`[data-nip71-entry="${key}"]`) ||
-      fragment.firstElementChild ||
-      null;
-
-    repeater.list.appendChild(fragment);
-
-    return entry;
-  }
-
-  removeNip71RepeaterEntry(mode, key, trigger) {
-    if (!key || !trigger) {
-      return;
-    }
-
-    const store = this.getNip71Store(mode);
-    if (!store?.repeaters?.[key]?.list) {
-      return;
-    }
-
-    const entry = trigger.closest(`[data-nip71-entry="${key}"]`);
-    if (!entry) {
-      return;
-    }
-
-    if (entry.dataset?.nip71Primary === "true") {
-      this.resetNip71Entry(entry);
-      return;
-    }
-
-    entry.remove();
-  }
-
-  addNip71NestedEntry(container, nestedKey) {
-    if (!container || !nestedKey) {
-      return null;
-    }
-
-    const list = container.querySelector(
-      `[data-nip71-nested-list="${nestedKey}"]`
-    );
-    const template = container.querySelector(
-      `[data-nip71-nested-template="${nestedKey}"]`
-    );
-
-    if (!list || !template) {
-      return null;
-    }
-
-    const fragment = template.content
-      ? template.content.cloneNode(true)
-      : template.cloneNode(true);
-
-    const entry =
-      fragment.querySelector?.(`[data-nip71-nested-entry="${nestedKey}"]`) ||
-      fragment.firstElementChild ||
-      null;
-
-    list.appendChild(fragment);
-
-    return entry;
-  }
-
-  removeNip71NestedEntry(entry) {
-    if (!entry) {
-      return;
-    }
-    entry.remove();
-  }
-
-  focusFirstField(container, selector) {
-    if (!container) {
-      return;
-    }
-    const target = container.querySelector(selector);
-    if (target?.focus) {
-      target.focus();
-    }
+    this.nip71FormManager.registerSection("custom", this.customSection);
+    this.nip71FormManager.registerSection("cloudflare", this.cloudflareSection);
   }
 
   buildAutoGeneratedImetaVariant(file) {
@@ -470,270 +235,6 @@ export class UploadModal {
     };
   }
 
-  collectNip71Metadata(mode) {
-    const store = this.getNip71Store(mode);
-    if (!store) {
-      return null;
-    }
-
-    const kindInput = Array.isArray(store.kindInputs)
-      ? store.kindInputs.find((input) => input?.checked)
-      : null;
-    let kind = null;
-    if (kindInput?.value != null) {
-      const parsed = Number(kindInput.value);
-      kind = Number.isFinite(parsed) ? parsed : String(kindInput.value).trim();
-    }
-
-    const summary = this.getTrimmedValue(store.summaryInput);
-    const publishedAt = this.getTrimmedValue(store.publishedAtInput);
-    const alt = this.getTrimmedValue(store.altInput);
-
-    let duration = null;
-    if (store.durationInput) {
-      const value = store.durationInput.value;
-      if (value !== "" && value != null) {
-        const parsed = Number(value);
-        if (Number.isFinite(parsed)) {
-          duration = parsed;
-        }
-      }
-    }
-
-    const contentWarning = this.getTrimmedValue(store.contentWarningInput);
-
-    const imeta = this.collectNip71RepeaterValues(mode, "imeta", (entry) => {
-      const variant = {
-        m: this.getNip71FieldValue(entry, "m"),
-        dim: this.getNip71FieldValue(entry, "dim"),
-        url: this.getNip71FieldValue(entry, "url"),
-        x: this.getNip71FieldValue(entry, "x"),
-        image: this.collectNip71NestedValues(entry, "image"),
-        fallback: this.collectNip71NestedValues(entry, "fallback"),
-        service: this.collectNip71NestedValues(entry, "service"),
-      };
-
-      const hasContent =
-        variant.m ||
-        variant.dim ||
-        variant.url ||
-        variant.x ||
-        variant.image.length > 0 ||
-        variant.fallback.length > 0 ||
-        variant.service.length > 0;
-
-      return hasContent ? variant : null;
-    });
-
-    const textTracks = this.collectNip71RepeaterValues(
-      mode,
-      "text-track",
-      (entry) => {
-        const track = {
-          url: this.getNip71FieldValue(entry, "url"),
-          type: this.getNip71FieldValue(entry, "type"),
-          language: this.getNip71FieldValue(entry, "language"),
-        };
-
-        const hasContent = track.url || track.type || track.language;
-        return hasContent ? track : null;
-      }
-    );
-
-    const segments = this.collectNip71RepeaterValues(mode, "segment", (entry) => {
-      const segment = {
-        start: this.getNip71FieldValue(entry, "start"),
-        end: this.getNip71FieldValue(entry, "end"),
-        title: this.getNip71FieldValue(entry, "title"),
-        thumbnail: this.getNip71FieldValue(entry, "thumbnail"),
-      };
-
-      const hasContent =
-        segment.start || segment.end || segment.title || segment.thumbnail;
-      return hasContent ? segment : null;
-    });
-
-    const hashtags = this.collectNip71RepeaterValues(mode, "t", (entry) => {
-      const value = this.getNip71FieldValue(entry, "value");
-      return value || null;
-    });
-
-    const participants = this.collectNip71RepeaterValues(mode, "p", (entry) => {
-      const participant = {
-        pubkey: this.getNip71FieldValue(entry, "pubkey"),
-        relay: this.getNip71FieldValue(entry, "relay"),
-      };
-
-      const hasContent = participant.pubkey || participant.relay;
-      return hasContent ? participant : null;
-    });
-
-    const references = this.collectNip71RepeaterValues(mode, "r", (entry) => {
-      const url = this.getNip71FieldValue(entry, "url");
-      return url || null;
-    });
-
-    return {
-      kind,
-      summary,
-      publishedAt,
-      alt,
-      duration,
-      contentWarning,
-      imeta,
-      textTracks,
-      segments,
-      hashtags,
-      participants,
-      references,
-    };
-  }
-
-  collectNip71RepeaterValues(mode, key, mapFn) {
-    const store = this.getNip71Store(mode);
-    const repeater = store?.repeaters?.[key];
-    if (!repeater?.list) {
-      return [];
-    }
-
-    const entries = Array.from(
-      repeater.list.querySelectorAll(`[data-nip71-entry="${key}"]`)
-    );
-
-    const results = [];
-    entries.forEach((entry) => {
-      const value = typeof mapFn === "function" ? mapFn(entry) : null;
-      if (value == null) {
-        return;
-      }
-      if (typeof value === "string") {
-        if (value.trim()) {
-          results.push(value.trim());
-        }
-        return;
-      }
-      results.push(value);
-    });
-
-    return results;
-  }
-
-  collectNip71NestedValues(entry, nestedKey) {
-    if (!entry || !nestedKey) {
-      return [];
-    }
-
-    const container = entry.querySelector(`[data-nip71-nested="${nestedKey}"]`);
-    if (!container) {
-      return [];
-    }
-
-    const fields = Array.from(
-      container.querySelectorAll(`[data-nip71-nested-field="${nestedKey}"]`)
-    );
-
-    return fields
-      .map((field) => this.getTrimmedValue(field))
-      .filter((value) => Boolean(value));
-  }
-
-  getNip71FieldValue(entry, field) {
-    if (!entry || !field) {
-      return "";
-    }
-    const element = entry.querySelector(`[data-nip71-field="${field}"]`);
-    return this.getTrimmedValue(element);
-  }
-
-  getTrimmedValue(element) {
-    if (!element) {
-      return "";
-    }
-    const { value } = element;
-    if (typeof value === "number") {
-      return Number.isFinite(value) ? String(value).trim() : "";
-    }
-    if (typeof value === "string") {
-      return value.trim();
-    }
-    return String(value ?? "").trim();
-  }
-
-  resetNip71Metadata(mode) {
-    const store = this.getNip71Store(mode);
-    if (!store) {
-      return;
-    }
-
-    if (Array.isArray(store.kindInputs)) {
-      store.kindInputs.forEach((input) => {
-        if (!input) {
-          return;
-        }
-        input.checked = Boolean(input.defaultChecked);
-      });
-    }
-
-    if (store.summaryInput) {
-      store.summaryInput.value = "";
-    }
-    if (store.publishedAtInput) {
-      store.publishedAtInput.value = "";
-    }
-    if (store.altInput) {
-      store.altInput.value = "";
-    }
-    if (store.durationInput) {
-      store.durationInput.value = "";
-    }
-    if (store.contentWarningInput) {
-      store.contentWarningInput.value = "";
-    }
-
-    if (store.repeaters) {
-      Object.entries(store.repeaters).forEach(([key, repeater]) => {
-        if (!repeater?.list) {
-          return;
-        }
-        const entries = Array.from(
-          repeater.list.querySelectorAll(`[data-nip71-entry="${key}"]`)
-        );
-        entries.forEach((entry) => {
-          if (entry.dataset?.nip71Primary === "true") {
-            this.resetNip71Entry(entry);
-          } else {
-            entry.remove();
-          }
-        });
-      });
-    }
-  }
-
-  resetNip71Entry(entry) {
-    if (!entry) {
-      return;
-    }
-    const fields = entry.querySelectorAll("[data-nip71-field]");
-    fields.forEach((field) => {
-      if (field) {
-        field.value = "";
-      }
-    });
-
-    const nestedContainers = entry.querySelectorAll("[data-nip71-nested]");
-    nestedContainers.forEach((container) => {
-      if (!container?.dataset?.nip71Nested) {
-        return;
-      }
-      const list = container.querySelector(
-        `[data-nip71-nested-list="${container.dataset.nip71Nested}"]`
-      );
-      if (list) {
-        list.innerHTML = "";
-      }
-    });
-  }
-
   bindEvents() {
     if (this.closeButton) {
       this.closeButton.addEventListener("click", () => {
@@ -790,8 +291,8 @@ export class UploadModal {
       });
     }
 
-    this.bindNip71Events("custom");
-    this.bindNip71Events("cloudflare");
+    this.nip71FormManager.bindSection("custom");
+    this.nip71FormManager.bindSection("cloudflare");
   }
 
   registerR2Subscriptions() {
@@ -952,7 +453,7 @@ export class UploadModal {
       payload.isPrivate = !!this.customFormInputs.isPrivate.checked;
     }
 
-    const nip71Metadata = this.collectNip71Metadata("custom");
+    const nip71Metadata = this.nip71FormManager.collectSection("custom");
     if (nip71Metadata) {
       payload.nip71 = nip71Metadata;
     }
@@ -1132,7 +633,7 @@ export class UploadModal {
     if (this.cloudflareEnableCommentsInput)
       this.cloudflareEnableCommentsInput.checked = true;
     if (this.cloudflareFileInput) this.cloudflareFileInput.value = "";
-    this.resetNip71Metadata("cloudflare");
+    this.nip71FormManager.resetSection("cloudflare");
     this.updateCloudflareProgress(Number.NaN);
   }
 
@@ -1149,7 +650,7 @@ export class UploadModal {
       this.customFormInputs.enableComments.checked = true;
     if (this.customFormInputs.isPrivate)
       this.customFormInputs.isPrivate.checked = false;
-    this.resetNip71Metadata("custom");
+    this.nip71FormManager.resetSection("custom");
   }
 
   async loadR2Settings() {
@@ -1217,7 +718,7 @@ export class UploadModal {
         : true,
     };
 
-    const nip71Metadata = this.collectNip71Metadata("cloudflare");
+    const nip71Metadata = this.nip71FormManager.collectSection("cloudflare");
     if (nip71Metadata) {
       const imetaList = Array.isArray(nip71Metadata.imeta)
         ? [...nip71Metadata.imeta]
diff --git a/js/ui/components/nip71FormManager.js b/js/ui/components/nip71FormManager.js
new file mode 100644
index 00000000..a325a5e1
--- /dev/null
+++ b/js/ui/components/nip71FormManager.js
@@ -0,0 +1,723 @@
+// NOTE: Keep the Upload, Edit, and Revert modals in lockstep when updating NIP-71 form features.
+
+const REPEATER_KEYS = ["imeta", "text-track", "segment", "t", "p", "r"];
+
+export class Nip71FormManager {
+  constructor({ defaultFocusSelector } = {}) {
+    this.defaultFocusSelector =
+      typeof defaultFocusSelector === "string"
+        ? defaultFocusSelector
+        : "[data-nip71-field], [data-nip71-nested-field]";
+    this.sections = new Map();
+  }
+
+  registerSection(key, root) {
+    if (!key) {
+      return null;
+    }
+
+    if (!root) {
+      this.sections.delete(key);
+      return null;
+    }
+
+    const store = this.cacheSection(root);
+    this.sections.set(key, store);
+    return store;
+  }
+
+  bindSection(key) {
+    const store = this.getSection(key);
+    if (!store?.root) {
+      return;
+    }
+
+    if (store.handlers?.click) {
+      try {
+        store.root.removeEventListener("click", store.handlers.click);
+      } catch (error) {
+        console.warn("[Nip71FormManager] Failed to detach previous handler", error);
+      }
+    }
+
+    const handleClick = (event) => {
+      const addTrigger = event.target?.closest?.("[data-nip71-add]");
+      if (addTrigger && store.root.contains(addTrigger)) {
+        event.preventDefault();
+        const targetKey = addTrigger.dataset?.nip71Add || "";
+        const entry = this.addRepeaterEntry(key, targetKey);
+        if (entry) {
+          this.focusFirstField(entry, store.focusSelector);
+        }
+        return;
+      }
+
+      const nestedAddTrigger = event.target?.closest?.("[data-nip71-nested-add]");
+      if (nestedAddTrigger && store.root.contains(nestedAddTrigger)) {
+        event.preventDefault();
+        const nestedKey = nestedAddTrigger.dataset?.nip71NestedAdd || "";
+        const container = nestedAddTrigger.closest(
+          `[data-nip71-nested="${nestedKey}"]`
+        );
+        const entry = this.addNestedEntry(container, nestedKey);
+        if (entry) {
+          this.focusFirstField(
+            entry,
+            `[data-nip71-nested-field="${nestedKey}"]`
+          );
+        }
+        return;
+      }
+
+      const removeTrigger = event.target?.closest?.("[data-nip71-remove]");
+      if (removeTrigger && store.root.contains(removeTrigger)) {
+        event.preventDefault();
+        const targetKey = removeTrigger.dataset?.nip71Remove || "";
+        if (!targetKey) {
+          return;
+        }
+
+        if (targetKey === "nested") {
+          const nestedEntry = removeTrigger.closest("[data-nip71-nested-entry]");
+          this.removeNestedEntry(nestedEntry);
+          return;
+        }
+
+        this.removeRepeaterEntry(key, targetKey, removeTrigger);
+      }
+    };
+
+    store.root.addEventListener("click", handleClick);
+    store.handlers.click = handleClick;
+  }
+
+  resetSection(key) {
+    const store = this.getSection(key);
+    if (!store) {
+      return;
+    }
+
+    if (Array.isArray(store.kindInputs)) {
+      store.kindInputs.forEach((input) => {
+        if (!input) {
+          return;
+        }
+        input.checked = Boolean(input.defaultChecked);
+      });
+    }
+
+    if (store.summaryInput) {
+      store.summaryInput.value = "";
+    }
+    if (store.publishedAtInput) {
+      store.publishedAtInput.value = "";
+    }
+    if (store.altInput) {
+      store.altInput.value = "";
+    }
+    if (store.durationInput) {
+      store.durationInput.value = "";
+    }
+    if (store.contentWarningInput) {
+      store.contentWarningInput.value = "";
+    }
+
+    if (store.repeaters) {
+      Object.entries(store.repeaters).forEach(([repeaterKey, repeater]) => {
+        if (!repeater?.list) {
+          return;
+        }
+        const entries = Array.from(
+          repeater.list.querySelectorAll(
+            `[data-nip71-entry="${repeaterKey}"]`
+          )
+        );
+        entries.forEach((entry) => {
+          if (entry.dataset?.nip71Primary === "true") {
+            this.resetEntry(entry);
+          } else {
+            entry.remove();
+          }
+        });
+      });
+    }
+  }
+
+  hydrateSection(key, metadata) {
+    const store = this.getSection(key);
+    if (!store) {
+      return;
+    }
+
+    this.resetSection(key);
+
+    if (!metadata || typeof metadata !== "object") {
+      return;
+    }
+
+    if (Array.isArray(store.kindInputs)) {
+      const targetValue = metadata.kind != null ? `${metadata.kind}`.trim() : "";
+      if (targetValue) {
+        store.kindInputs.forEach((input) => {
+          if (!input) {
+            return;
+          }
+          input.checked = `${input.value}` === targetValue;
+        });
+      }
+    }
+
+    if (store.summaryInput) {
+      store.summaryInput.value = this.toInputValue(metadata.summary);
+    }
+    if (store.publishedAtInput) {
+      const value =
+        metadata.publishedAt ?? metadata.published_at ?? metadata["published-at"];
+      store.publishedAtInput.value = this.toInputValue(value);
+    }
+    if (store.altInput) {
+      store.altInput.value = this.toInputValue(metadata.alt);
+    }
+    if (store.durationInput) {
+      const duration = this.normalizeNumber(metadata.duration);
+      store.durationInput.value = duration != null ? `${duration}` : "";
+    }
+    if (store.contentWarningInput) {
+      const value =
+        metadata.contentWarning ??
+        metadata["content-warning"] ??
+        metadata.content_warning;
+      store.contentWarningInput.value = this.toInputValue(value);
+    }
+
+    this.hydrateRepeater(key, "imeta", metadata.imeta, (entry, value) => {
+      if (!value || typeof value !== "object") {
+        return;
+      }
+      this.setFieldValue(entry, "m", value.m);
+      this.setFieldValue(entry, "dim", value.dim);
+      this.setFieldValue(entry, "url", value.url);
+      this.setFieldValue(entry, "x", value.x);
+      this.hydrateNested(entry, "image", value.image);
+      this.hydrateNested(entry, "fallback", value.fallback);
+      this.hydrateNested(entry, "service", value.service);
+    });
+
+    this.hydrateRepeater(
+      key,
+      "text-track",
+      metadata.textTracks ?? metadata["text-track"] ?? metadata.text_track,
+      (entry, value) => {
+        if (!value || typeof value !== "object") {
+          return;
+        }
+        this.setFieldValue(entry, "url", value.url);
+        this.setFieldValue(entry, "type", value.type);
+        this.setFieldValue(entry, "language", value.language);
+      }
+    );
+
+    this.hydrateRepeater(key, "segment", metadata.segments, (entry, value) => {
+      if (!value || typeof value !== "object") {
+        return;
+      }
+      this.setFieldValue(entry, "start", value.start);
+      this.setFieldValue(entry, "end", value.end);
+      this.setFieldValue(entry, "title", value.title);
+      this.setFieldValue(entry, "thumbnail", value.thumbnail);
+    });
+
+    this.hydrateRepeater(key, "t", metadata.hashtags ?? metadata.t, (entry, value) => {
+      this.setFieldValue(entry, "value", value);
+    });
+
+    this.hydrateRepeater(
+      key,
+      "p",
+      metadata.participants ?? metadata.p,
+      (entry, value) => {
+        if (!value || typeof value !== "object") {
+          return;
+        }
+        this.setFieldValue(entry, "pubkey", value.pubkey ?? value["pubkey"]);
+        this.setFieldValue(entry, "relay", value.relay ?? value["relay"]);
+      }
+    );
+
+    this.hydrateRepeater(
+      key,
+      "r",
+      metadata.references ?? metadata.r,
+      (entry, value) => {
+        this.setFieldValue(entry, "url", value);
+      }
+    );
+  }
+
+  collectSection(key) {
+    const store = this.getSection(key);
+    if (!store) {
+      return null;
+    }
+
+    const kindInput = Array.isArray(store.kindInputs)
+      ? store.kindInputs.find((input) => input?.checked)
+      : null;
+    let kind = null;
+    if (kindInput?.value != null) {
+      const parsed = Number(kindInput.value);
+      kind = Number.isFinite(parsed) ? parsed : String(kindInput.value).trim();
+    }
+
+    const summary = this.getTrimmedValue(store.summaryInput);
+    const publishedAt = this.getTrimmedValue(store.publishedAtInput);
+    const alt = this.getTrimmedValue(store.altInput);
+
+    let duration = null;
+    if (store.durationInput) {
+      const rawValue = store.durationInput.value;
+      if (rawValue !== "" && rawValue != null) {
+        const parsed = Number(rawValue);
+        if (Number.isFinite(parsed)) {
+          duration = parsed;
+        }
+      }
+    }
+
+    const contentWarning = this.getTrimmedValue(store.contentWarningInput);
+
+    const imeta = this.collectRepeaterValues(key, "imeta", (entry) => {
+      const variant = {
+        m: this.getFieldValue(entry, "m"),
+        dim: this.getFieldValue(entry, "dim"),
+        url: this.getFieldValue(entry, "url"),
+        x: this.getFieldValue(entry, "x"),
+        image: this.collectNestedValues(entry, "image"),
+        fallback: this.collectNestedValues(entry, "fallback"),
+        service: this.collectNestedValues(entry, "service"),
+      };
+
+      const hasContent =
+        variant.m ||
+        variant.dim ||
+        variant.url ||
+        variant.x ||
+        variant.image.length > 0 ||
+        variant.fallback.length > 0 ||
+        variant.service.length > 0;
+
+      return hasContent ? variant : null;
+    });
+
+    const textTracks = this.collectRepeaterValues(
+      key,
+      "text-track",
+      (entry) => {
+        const track = {
+          url: this.getFieldValue(entry, "url"),
+          type: this.getFieldValue(entry, "type"),
+          language: this.getFieldValue(entry, "language"),
+        };
+
+        const hasContent = track.url || track.type || track.language;
+        return hasContent ? track : null;
+      }
+    );
+
+    const segments = this.collectRepeaterValues(key, "segment", (entry) => {
+      const segment = {
+        start: this.getFieldValue(entry, "start"),
+        end: this.getFieldValue(entry, "end"),
+        title: this.getFieldValue(entry, "title"),
+        thumbnail: this.getFieldValue(entry, "thumbnail"),
+      };
+
+      const hasContent =
+        segment.start || segment.end || segment.title || segment.thumbnail;
+      return hasContent ? segment : null;
+    });
+
+    const hashtags = this.collectRepeaterValues(key, "t", (entry) => {
+      const value = this.getFieldValue(entry, "value");
+      return value || null;
+    });
+
+    const participants = this.collectRepeaterValues(key, "p", (entry) => {
+      const participant = {
+        pubkey: this.getFieldValue(entry, "pubkey"),
+        relay: this.getFieldValue(entry, "relay"),
+      };
+
+      const hasContent = participant.pubkey || participant.relay;
+      return hasContent ? participant : null;
+    });
+
+    const references = this.collectRepeaterValues(key, "r", (entry) => {
+      const url = this.getFieldValue(entry, "url");
+      return url || null;
+    });
+
+    return {
+      kind,
+      summary,
+      publishedAt,
+      alt,
+      duration,
+      contentWarning,
+      imeta,
+      textTracks,
+      segments,
+      hashtags,
+      participants,
+      references,
+    };
+  }
+
+  collectRepeaterValues(sectionKey, repeaterKey, mapFn) {
+    const store = this.getSection(sectionKey);
+    const repeater = store?.repeaters?.[repeaterKey];
+    if (!repeater?.list) {
+      return [];
+    }
+
+    const entries = Array.from(
+      repeater.list.querySelectorAll(`[data-nip71-entry="${repeaterKey}"]`)
+    );
+
+    const results = [];
+    entries.forEach((entry) => {
+      const value = typeof mapFn === "function" ? mapFn(entry) : null;
+      if (value == null) {
+        return;
+      }
+      if (typeof value === "string") {
+        if (value.trim()) {
+          results.push(value.trim());
+        }
+        return;
+      }
+      results.push(value);
+    });
+
+    return results;
+  }
+
+  collectNestedValues(entry, nestedKey) {
+    if (!entry || !nestedKey) {
+      return [];
+    }
+
+    const container = entry.querySelector(
+      `[data-nip71-nested="${nestedKey}"]`
+    );
+    if (!container) {
+      return [];
+    }
+
+    const fields = Array.from(
+      container.querySelectorAll(`[data-nip71-nested-field="${nestedKey}"]`)
+    );
+
+    return fields
+      .map((field) => this.getTrimmedValue(field))
+      .filter((value) => Boolean(value));
+  }
+
+  addRepeaterEntry(sectionKey, repeaterKey) {
+    if (!repeaterKey) {
+      return null;
+    }
+
+    const store = this.getSection(sectionKey);
+    if (!store?.repeaters || !store.repeaters[repeaterKey]) {
+      return null;
+    }
+
+    const { list, template } = store.repeaters[repeaterKey];
+    if (!list || !template) {
+      return null;
+    }
+
+    const fragment = template.content
+      ? template.content.cloneNode(true)
+      : template.cloneNode(true);
+
+    const entry =
+      fragment.querySelector?.(`[data-nip71-entry="${repeaterKey}"]`) ||
+      fragment.firstElementChild ||
+      null;
+
+    list.appendChild(fragment);
+
+    return entry;
+  }
+
+  removeRepeaterEntry(sectionKey, repeaterKey, trigger) {
+    if (!repeaterKey || !trigger) {
+      return;
+    }
+
+    const store = this.getSection(sectionKey);
+    if (!store?.repeaters?.[repeaterKey]?.list) {
+      return;
+    }
+
+    const entry = trigger.closest(`[data-nip71-entry="${repeaterKey}"]`);
+    if (!entry) {
+      return;
+    }
+
+    if (entry.dataset?.nip71Primary === "true") {
+      this.resetEntry(entry);
+      return;
+    }
+
+    entry.remove();
+  }
+
+  addNestedEntry(container, nestedKey) {
+    if (!container || !nestedKey) {
+      return null;
+    }
+
+    const list = container.querySelector(
+      `[data-nip71-nested-list="${nestedKey}"]`
+    );
+    const template = container.querySelector(
+      `[data-nip71-nested-template="${nestedKey}"]`
+    );
+
+    if (!list || !template) {
+      return null;
+    }
+
+    const fragment = template.content
+      ? template.content.cloneNode(true)
+      : template.cloneNode(true);
+
+    const entry =
+      fragment.querySelector?.(`[data-nip71-nested-entry="${nestedKey}"]`) ||
+      fragment.firstElementChild ||
+      null;
+
+    list.appendChild(fragment);
+
+    return entry;
+  }
+
+  removeNestedEntry(entry) {
+    if (!entry) {
+      return;
+    }
+    entry.remove();
+  }
+
+  resetEntry(entry) {
+    if (!entry) {
+      return;
+    }
+
+    const fields = entry.querySelectorAll("[data-nip71-field]");
+    fields.forEach((field) => {
+      if (field) {
+        field.value = "";
+      }
+    });
+
+    const nestedContainers = entry.querySelectorAll("[data-nip71-nested]");
+    nestedContainers.forEach((container) => {
+      if (!container?.dataset?.nip71Nested) {
+        return;
+      }
+      const list = container.querySelector(
+        `[data-nip71-nested-list="${container.dataset.nip71Nested}"]`
+      );
+      if (list) {
+        list.innerHTML = "";
+      }
+    });
+  }
+
+  hydrateRepeater(sectionKey, repeaterKey, rawValues, applyValue) {
+    const values = Array.isArray(rawValues) ? rawValues : [];
+    if (!values.length) {
+      return;
+    }
+
+    const store = this.getSection(sectionKey);
+    const repeater = store?.repeaters?.[repeaterKey];
+    if (!repeater?.list) {
+      return;
+    }
+
+    let entries = Array.from(
+      repeater.list.querySelectorAll(`[data-nip71-entry="${repeaterKey}"]`)
+    );
+
+    values.forEach((value, index) => {
+      let entry = entries[index];
+      if (!entry) {
+        entry = this.addRepeaterEntry(sectionKey, repeaterKey);
+        if (entry) {
+          entries.push(entry);
+        }
+      }
+      if (!entry) {
+        return;
+      }
+      if (typeof applyValue === "function") {
+        applyValue(entry, value, index);
+      }
+    });
+  }
+
+  hydrateNested(entry, nestedKey, rawValues) {
+    if (!entry) {
+      return;
+    }
+
+    const values = Array.isArray(rawValues)
+      ? rawValues.filter((value) => this.toInputValue(value))
+      : [];
+    if (!values.length) {
+      return;
+    }
+
+    const container = entry.querySelector(`[data-nip71-nested="${nestedKey}"]`);
+    if (!container) {
+      return;
+    }
+
+    values.forEach((value) => {
+      const nestedEntry = this.addNestedEntry(container, nestedKey);
+      if (!nestedEntry) {
+        return;
+      }
+      const field = nestedEntry.querySelector(
+        `[data-nip71-nested-field="${nestedKey}"]`
+      );
+      if (field) {
+        field.value = this.toInputValue(value);
+      }
+    });
+  }
+
+  setFieldValue(entry, field, value) {
+    if (!entry || !field) {
+      return;
+    }
+    const element = entry.querySelector(`[data-nip71-field="${field}"]`);
+    if (!element) {
+      return;
+    }
+    element.value = this.toInputValue(value);
+  }
+
+  focusFirstField(container, selector) {
+    if (!container) {
+      return;
+    }
+    const targetSelector = selector || this.defaultFocusSelector;
+    const target = container.querySelector(targetSelector);
+    if (target?.focus) {
+      target.focus();
+    }
+  }
+
+  getFieldValue(entry, field) {
+    if (!entry || !field) {
+      return "";
+    }
+    const element = entry.querySelector(`[data-nip71-field="${field}"]`);
+    return this.getTrimmedValue(element);
+  }
+
+  getTrimmedValue(element) {
+    if (!element) {
+      return "";
+    }
+    const { value } = element;
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? String(value).trim() : "";
+    }
+    if (typeof value === "string") {
+      return value.trim();
+    }
+    return String(value ?? "").trim();
+  }
+
+  toInputValue(value) {
+    if (value == null) {
+      return "";
+    }
+    if (typeof value === "number") {
+      return Number.isFinite(value) ? `${value}` : "";
+    }
+    if (typeof value === "boolean") {
+      return value ? "true" : "false";
+    }
+    return `${value ?? ""}`;
+  }
+
+  normalizeNumber(value) {
+    if (typeof value === "number" && Number.isFinite(value)) {
+      return value;
+    }
+    if (typeof value === "string" && value.trim()) {
+      const parsed = Number(value.trim());
+      return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+  }
+
+  cacheSection(section) {
+    const repeaters = {};
+    REPEATER_KEYS.forEach((key) => {
+      repeaters[key] = this.cacheRepeater(section, key);
+    });
+
+    return {
+      root: section,
+      focusSelector: this.defaultFocusSelector,
+      kindInputs: Array.from(section.querySelectorAll('[data-nip71-input="kind"]')),
+      publishedAtInput:
+        section.querySelector('[data-nip71-input="published_at"]') || null,
+      altInput: section.querySelector('[data-nip71-input="alt"]') || null,
+      durationInput:
+        section.querySelector('[data-nip71-input="duration"]') || null,
+      contentWarningInput:
+        section.querySelector('[data-nip71-input="content-warning"]') || null,
+      summaryInput: section.querySelector('[data-nip71-input="summary"]') || null,
+      repeaters,
+      handlers: {},
+    };
+  }
+
+  cacheRepeater(section, key) {
+    if (!section || !key) {
+      return null;
+    }
+
+    const repeaterRoot = section.querySelector(
+      `[data-nip71-repeater="${key}"]`
+    );
+    if (!repeaterRoot) {
+      return null;
+    }
+
+    return {
+      root: repeaterRoot,
+      list: repeaterRoot.querySelector(`[data-nip71-list="${key}"]`) || null,
+      template:
+        repeaterRoot.querySelector(`[data-nip71-template="${key}"]`) || null,
+    };
+  }
+
+  getSection(key) {
+    if (!key) {
+      return null;
+    }
+    return this.sections.get(key) || null;
+  }
+}
+