From cc1b10a4f2d1804b1fa4ada7aaf765a54302e473 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Fri, 10 Oct 2025 13:15:47 -0400
Subject: [PATCH] docs: add modal shell examples

---
 docs/kitchen-sink.html | 268 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 268 insertions(+)

diff --git a/docs/kitchen-sink.html b/docs/kitchen-sink.html
index b9c020b8..866ae400 100644
--- a/docs/kitchen-sink.html
+++ b/docs/kitchen-sink.html
@@ -268,6 +268,274 @@
           </div>
         </section>
 
+        <section class="space-y-md">
+          <div class="space-y-xs">
+            <h2 class="text-xl font-semibold text-text-strong">
+              Profile &amp; Edit Modal Shells
+            </h2>
+            <p class="text-sm text-muted">
+              Both shells share the `.bv-modal` overlay and tokenized
+              primitives (`.card`, `.btn`, `.btn-ghost`, `.badge`, `.grid-stack`,
+              `.focus-ring`). Compatibility hooks like `modal-content` remain on
+              the panels so legacy CSS selectors keep working alongside the new
+              primitives.
+            </p>
+          </div>
+          <div class="grid gap-lg lg:grid-cols-2">
+            <div class="space-y-sm">
+              <h3 class="text-lg font-semibold">Profile Modal</h3>
+              <p class="text-sm text-muted">
+                Static scaffold that mirrors `components/profile-modal.html`.
+                Tab buttons keep their `aria-controls`/`data-state` attributes
+                so designers can map the layout to controller behaviour.
+              </p>
+              <div
+                class="relative isolate overflow-hidden rounded-xl bg-surface-alt p-lg text-text shadow-inner"
+              >
+                <div class="absolute inset-0" style="position: relative">
+                  <div
+                    id="profileModal"
+                    class="bv-modal items-start"
+                    style="position: absolute; inset: 0"
+                  >
+                    <div class="bv-modal-backdrop"></div>
+                    <div
+                      class="bv-modal__panel modal-content flex max-h-[80vh] flex-col gap-lg"
+                      role="dialog"
+                      aria-labelledby="profileModalTitle"
+                    >
+                      <header class="card flex items-center justify-between gap-sm p-md">
+                        <div>
+                          <p class="text-xs uppercase tracking-wide text-muted">
+                            Modal header
+                          </p>
+                          <h4 id="profileModalTitle" class="text-lg font-semibold">
+                            Active profile
+                          </h4>
+                        </div>
+                        <button
+                          class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full"
+                          type="button"
+                          aria-label="Close profile modal"
+                        >
+                          &times;
+                        </button>
+                      </header>
+                      <div class="flex flex-1 flex-col gap-lg lg:flex-row">
+                        <nav
+                          class="grid gap-xs sm:grid-cols-3 lg:w-56 lg:flex lg:flex-col"
+                          aria-label="Profile sections"
+                        >
+                          <button
+                            class="btn-ghost focus-ring justify-start"
+                            type="button"
+                            data-state="active"
+                            aria-controls="profilePaneAccount"
+                          >
+                            Account
+                          </button>
+                          <button
+                            class="btn-ghost focus-ring justify-start"
+                            type="button"
+                            aria-controls="profilePaneRelays"
+                          >
+                            Relays
+                          </button>
+                          <button
+                            class="btn-ghost focus-ring justify-start"
+                            type="button"
+                            aria-controls="profilePaneBlocked"
+                          >
+                            Blocked users
+                          </button>
+                        </nav>
+                        <div class="grid-stack flex-1 gap-md" data-variant="cards">
+                          <article
+                            id="profilePaneAccount"
+                            class="card space-y-sm p-md"
+                            data-profile-pane
+                          >
+                            <div class="flex items-start justify-between gap-sm">
+                              <div>
+                                <p class="text-xs uppercase tracking-wide text-muted">
+                                  Current identity
+                                </p>
+                                <h5 class="text-base font-semibold">npub1example...</h5>
+                              </div>
+                              <span class="badge" data-variant="info">Active</span>
+                            </div>
+                            <p class="text-sm text-muted">
+                              `.grid-stack` arranges saved identities with
+                              responsive gutters. Cards inherit `.focus-ring`
+                              styles when they become actionable.
+                            </p>
+                            <footer class="flex flex-wrap gap-sm">
+                              <button class="btn">Switch</button>
+                              <button class="btn-ghost">Manage keys</button>
+                            </footer>
+                          </article>
+                          <article class="card space-y-sm p-md" data-profile-pane>
+                            <h5 class="text-base font-semibold">Relay presets</h5>
+                            <p class="text-sm text-muted">
+                              Use badges to indicate status (e.g.
+                              <span class="badge" data-variant="neutral">New</span>)
+                              while keeping content spacing consistent with the
+                              production modal.
+                            </p>
+                            <ul class="space-y-xs text-sm text-muted">
+                              <li data-relay-row>relay.example.com</li>
+                              <li data-relay-row>wss://nostr.tools</li>
+                              <li data-relay-row>wss://bitvid.relays</li>
+                            </ul>
+                          </article>
+                        </div>
+                      </div>
+                      <footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
+                        <p class="text-xs text-muted">
+                          Footer keeps shared spacing tokens while exposing
+                          legacy hooks like `data-profile-action` for scripts if
+                          needed.
+                        </p>
+                        <div class="flex gap-sm">
+                          <button class="btn-ghost" data-profile-action="cancel">
+                            Cancel
+                          </button>
+                          <button class="btn" data-profile-action="save">
+                            Save changes
+                          </button>
+                        </div>
+                      </footer>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="space-y-sm">
+              <h3 class="text-lg font-semibold">Edit Video Modal</h3>
+              <p class="text-sm text-muted">
+                Layout reflects `components/edit-video-modal.html`. The
+                `.bv-modal__panel.modal-content` pairing keeps backwards
+                selectors alive while new primitives manage spacing and
+                typography.
+              </p>
+              <div
+                class="relative isolate overflow-hidden rounded-xl bg-surface-alt p-lg text-text shadow-inner"
+              >
+                <div class="absolute inset-0" style="position: relative">
+                  <div
+                    id="editVideoModal"
+                    class="bv-modal items-start"
+                    style="position: absolute; inset: 0"
+                    role="dialog"
+                    aria-labelledby="editVideoModalTitle"
+                  >
+                    <div class="bv-modal-backdrop"></div>
+                    <div
+                      class="bv-modal__panel modal-content flex max-h-[80vh] flex-col gap-lg"
+                      data-modal="edit"
+                    >
+                      <header class="card flex items-center justify-between gap-sm p-md">
+                        <div class="space-y-xs">
+                          <p class="text-xs uppercase tracking-wide text-muted">
+                            Edit metadata
+                          </p>
+                          <h4 id="editVideoModalTitle" class="text-lg font-semibold">
+                            Update video note
+                          </h4>
+                        </div>
+                        <button
+                          class="focus-ring inline-flex h-10 w-10 items-center justify-center rounded-full"
+                          type="button"
+                          aria-label="Close edit modal"
+                        >
+                          &times;
+                        </button>
+                      </header>
+                      <div class="space-y-lg px-md">
+                        <p class="text-sm text-muted">
+                          Form rows reuse `.card` groupings and `.btn-ghost`
+                          action chips. Locked fields can keep
+                          `data-edit-target` attributes to stay compatible with
+                          controller toggles.
+                        </p>
+                        <div class="card space-y-md p-md">
+                          <div class="space-y-xs">
+                            <label class="text-sm font-medium text-text" for="editTitleDemo">
+                              Title
+                            </label>
+                            <div class="flex flex-wrap gap-sm sm:flex-nowrap">
+                              <input
+                                id="editTitleDemo"
+                                class="input flex-1"
+                                type="text"
+                                placeholder="Bitvid Weekly Update"
+                              />
+                              <button
+                                class="btn-ghost focus-ring"
+                                type="button"
+                                data-edit-target="title"
+                              >
+                                Edit field
+                              </button>
+                            </div>
+                          </div>
+                          <div class="grid gap-md md:grid-cols-2" data-nip71-grid>
+                            <div class="space-y-xs">
+                              <label class="text-sm font-medium text-text" for="editKindDemo">
+                                NIP-71 kind
+                              </label>
+                              <div class="card space-y-xs p-sm" data-nip71-fieldset>
+                                <label class="flex items-center gap-xs text-sm">
+                                  <input class="focus-ring" type="radio" name="editKindDemo" checked />
+                                  Kind 21 — Full video
+                                </label>
+                                <label class="flex items-center gap-xs text-sm">
+                                  <input class="focus-ring" type="radio" name="editKindDemo" />
+                                  Kind 22 — Short
+                                </label>
+                              </div>
+                            </div>
+                            <div class="space-y-xs">
+                              <label class="text-sm font-medium text-text" for="editPublishDemo">
+                                Published at
+                              </label>
+                              <input
+                                id="editPublishDemo"
+                                class="input"
+                                type="datetime-local"
+                                value="2024-05-01T15:00"
+                              />
+                              <p class="text-xs text-muted">
+                                Shared input tokens handle spacing; legacy
+                                scripts can read the timestamp via
+                                `data-nip71-input` if needed.
+                              </p>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <footer class="card flex flex-wrap items-center justify-between gap-sm p-md">
+                        <p class="text-xs text-muted">
+                          Footer actions mix `.btn` variants while referencing
+                          `data-submit-state` for controller hand-offs.
+                        </p>
+                        <div class="flex gap-sm">
+                          <button class="btn-ghost" data-submit-state="idle">
+                            Cancel
+                          </button>
+                          <button class="btn" data-submit-state="pending">
+                            Save draft
+                          </button>
+                        </div>
+                      </footer>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         <section class="space-y-md">
           <div class="space-y-xs">
             <h2 class="text-xl font-semibold text-text-strong">Grid Stack</h2>