Mercurial

diff mrjunejune/test/snapshots/jrpg.snapshot @ 273:e02e2036ef84 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Layer 2 JRPG component system Add reusable content and window modals, an isolated component sandbox, shared cyberpunk scroll areas, production-safe cache freshness, and server-rendered JRPG panel state. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Sat, 08 Aug 2026 02:08:08 -0700
parents 41a49c29a28f
children
line wrap: on
line diff
--- a/mrjunejune/test/snapshots/jrpg.snapshot	Fri Aug 07 16:05:29 2026 -0700
+++ b/mrjunejune/test/snapshots/jrpg.snapshot	Sat Aug 08 02:08:08 2026 -0700
@@ -36,13 +36,18 @@
     <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)">
     <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
     <link rel="stylesheet" href="/public/mjj-composer.css">
+    <link rel="stylesheet" href="/public/mjj-modal.css">
     <link rel="stylesheet" href="/jrpg/jrpg.css">
     <script type="module" src="/public/mjj-composer.js"></script>
+    <script type="module" src="/public/mjj-modal.js"></script>
     <script type="module" src="/jrpg/jrpg.js"></script>
   </head>
   <body class="jrpg-page">
     <main class="jrpg-main">
-      <mjj-jrpg-shell class="jrpg-shell">
+      <mjj-jrpg-shell
+        class="jrpg-shell"
+        data-initial-panel="resume"
+      >
         <div class="jrpg-workspace">
           <div class="jrpg-brand">
             <header>
@@ -78,61 +83,67 @@
               </a>
             </zen-button>
           </nav>
-          <zen-dialog
+          <mjj-window-modal
             class="jrpg-mobile-destination-owner"
             data-mobile-destination-owner
           >
-            <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
-              <button
-                type="button"
-                data-zen-trigger
-                data-mobile-menu-toggle
-                aria-label="Open destination menu"
-              >
-                <zen-icon name="menu"></zen-icon>
-              </button>
-            </zen-button>
-            <dialog
-              class="jrpg-mobile-destination-dialog"
-              data-mobile-destination-dialog
-              aria-labelledby="jrpg-mobile-destination-title"
-            >
-              <header class="jrpg-mobile-destination-header">
-                <zen-button
-                  appearance="plain"
-                  size="sm"
-                  data-mobile-destination-back-owner
-                  hidden
+            <zen-dialog>
+              <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
+                <button
+                  type="button"
+                  data-zen-trigger
+                  data-mobile-menu-toggle
+                  aria-label="Open destination menu"
                 >
-                  <button
-                    type="button"
-                    data-mobile-destination-back
-                    aria-label="Back to destination menu"
+                  <zen-icon name="menu"></zen-icon>
+                </button>
+              </zen-button>
+              <dialog
+                class="jrpg-mobile-destination-dialog"
+                data-mobile-destination-dialog
+              >
+                <header class="jrpg-mobile-destination-header" data-modal-header>
+                  <zen-button
+                    appearance="plain"
+                    size="sm"
+                    data-mobile-destination-back-owner
+                    hidden
                   >
-                    <zen-icon name="chevron-left"></zen-icon>
-                    Menu
-                  </button>
-                </zen-button>
-                <h2
-                  id="jrpg-mobile-destination-title"
-                  data-mobile-destination-title
-                >Menu</h2>
-                <zen-button appearance="plain" size="sm">
-                  <button
-                    type="button"
-                    data-zen-close
-                    aria-label="Close destination menu"
-                  >
-                    <zen-icon name="close"></zen-icon>
-                  </button>
-                </zen-button>
-              </header>
-              <div
-                class="jrpg-mobile-destination-content"
-                data-mobile-destination-content
-              ></div>
-            </dialog>
-          </zen-dialog>
+                    <button
+                      type="button"
+                      data-mobile-destination-back
+                      aria-label="Back to destination menu"
+                    >
+                      <zen-icon name="chevron-left"></zen-icon>
+                      Menu
+                    </button>
+                  </zen-button>
+                  <h2
+                    id="jrpg-mobile-destination-title"
+                    data-mobile-destination-title
+                    data-modal-title
+                  >Menu</h2>
+                  <zen-button appearance="plain" size="sm">
+                    <button
+                      type="button"
+                      data-zen-close
+                      aria-label="Close destination menu"
+                    >
+                      <zen-icon name="close"></zen-icon>
+                    </button>
+                  </zen-button>
+                </header>
+                <zen-scroll-area
+                  class="jrpg-mobile-destination-content"
+                  data-mobile-destination-content
+                  data-modal-body
+                  data-cyber-scroll
+                  tabindex="0"
+                  aria-label="Destination content"
+                ></zen-scroll-area>
+              </dialog>
+            </zen-dialog>
+          </mjj-window-modal>
           <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
             <span aria-label="Temperature unavailable">N/A</span>
             <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
@@ -178,50 +189,60 @@
           <section class="jrpg-utility" aria-label="Selected destination">
             <mjj-jrpg-preview data-selection="resume">
               <article class="jrpg-preview-panel" aria-live="polite">
-                <div class="jrpg-preview-content" data-preview-content>
+                <div
+                  class="jrpg-preview-content"
+                  data-preview-content
+                  
+                >
                   <zen-heading size="xl">
                     <h2 data-preview-title>Resume</h2>
                   </zen-heading>
                   <p data-preview-copy>
-                    Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems.
+                    Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems across Microsoft, Meta, Google, and growth-stage companies.
                   </p>
-                  <ul class="jrpg-work-showcase" data-work-showcase>
-                    <li>
-                      <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/">
-                        <span>Copilot Tasks</span>
-                        <small>Agentic execution</small>
-                      </a>
-                    </li>
-                    <li>
-                      <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html">
-                        <span>Copilot SuperApp</span>
-                        <small>AI platform</small>
-                      </a>
-                    </li>
-                  </ul>
-                  <zen-dialog class="jrpg-preview-dialog">
-                    <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
-                      <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
-                    </zen-button>
-                    <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
-                      <div class="jrpg-dialog-heading">
-                        <p>DESTINATION DATA</p>
+                  <ul class="jrpg-work-showcase" data-work-showcase><li><a href="/resume" data-resume-modal><span>Full resume</span><small>Career dossier</small></a></li><li><a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/"><span>Copilot Tasks</span><small>Agentic execution</small></a></li></ul>
+                  <mjj-content-modal data-detail-modal-owner>
+                    <zen-dialog class="jrpg-preview-dialog">
+                      <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
+                        <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
+                      </zen-button>
+                      <dialog class="jrpg-detail-dialog">
+                        <header class="jrpg-dialog-heading" data-modal-header>
+                          <div data-modal-heading>
+                            <p data-modal-kicker>DESTINATION DATA</p>
+                            <h2
+                              id="jrpg-dialog-title"
+                              data-dialog-title
+                              data-modal-title
+                            >Resume</h2>
+                          </div>
                         <div class="jrpg-dialog-heading-actions">
-                          <zen-button appearance="plain" size="md">
-                            <a href="/resume" data-preview-link>
-                              Open page
-                              <zen-icon name="external"></zen-icon>
+                          <zen-button
+                            appearance="plain"
+                            size="sm"
+                            data-resume-download
+                          >
+                            <a href="/public/resume.pdf">
+                              Download PDF
+                              <zen-icon name="download"></zen-icon>
                             </a>
                           </zen-button>
-                          <zen-button appearance="plain" size="md">
+                          <zen-button appearance="plain" size="sm">
                             <button type="button" data-zen-close aria-label="Close destination details">
                               <zen-icon name="close"></zen-icon>
                             </button>
                           </zen-button>
-                        </div>
-                      </div>
-                      <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2>
-                      <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
+                          </div>
+                        </header>
+                        <zen-scroll-area
+                          class="jrpg-detail-body"
+                          data-modal-body
+                          data-cyber-scroll
+                          tabindex="0"
+                          aria-label="Destination details"
+                        >
+                          <div class="jrpg-detail-content" data-modal-article>
+                            <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
                       <section
                         class="jrpg-resume-dossier"
                         data-resume-dossier
@@ -258,18 +279,16 @@
                           <div data-tool-content></div>
                         </article>
                       </section>
-                      <div class="jrpg-dialog-actions" data-dialog-actions>
-                        <zen-button appearance="plain" size="lg" data-resume-download>
-                          <a href="/public/resume.pdf">
-                            Download PDF
-                            <zen-icon name="download"></zen-icon>
-                          </a>
-                        </zen-button>
-                      </div>
-                    </dialog>
-                  </zen-dialog>
+                          </div>
+                        </zen-scroll-area>
+                      </dialog>
+                    </zen-dialog>
+                  </mjj-content-modal>
                 </div>
-                <mjj-conversation-archive hidden aria-label="Conversations">
+                <mjj-conversation-archive
+                  hidden
+                  aria-label="Conversations"
+                >
               <div class="jrpg-archive-heading">
                 <h2>Archive</h2>
                 <zen-button appearance="plain" size="xs">
@@ -292,52 +311,83 @@
                 <button type="button" data-archive-load-more>Load more</button>
               </zen-button>
               <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p>
-              <dialog
-                class="jrpg-archive-dialog"
-                data-archive-delete-dialog
-                aria-labelledby="archive-delete-title"
-                aria-modal="true"
-              >
-                <p id="archive-delete-title" class="jrpg-archive-dialog-title">Delete this conversation?</p>
-                <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
-                <div class="jrpg-archive-dialog-actions">
-                  <zen-button appearance="plain" size="md">
-                    <button type="button" data-archive-delete-cancel>Cancel</button>
-                  </zen-button>
-                  <zen-button appearance="plain" size="md">
-                    <button type="button" data-archive-delete-confirm>Delete</button>
+              <mjj-content-modal data-archive-delete-owner>
+                <zen-dialog>
+                  <zen-button appearance="plain" size="xs" hidden>
+                    <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
                   </zen-button>
-                </div>
-              </dialog>
-              <dialog
-                class="jrpg-archive-dialog"
-                data-archive-rename-dialog
-                aria-labelledby="archive-rename-title"
-                aria-modal="true"
-              >
-                <p id="archive-rename-title" class="jrpg-archive-dialog-title">Rename conversation</p>
-                <form data-archive-rename-form novalidate>
-                  <zen-field appearance="plain" size="md">
-                    <label for="archive-rename-input">New title</label>
-                    <input
-                      id="archive-rename-input"
-                      data-archive-rename-input
-                      type="text"
-                      maxlength="200"
-                      required
-                      autocomplete="off"
+                  <dialog
+                    class="jrpg-archive-dialog"
+                    data-archive-delete-dialog
+                  >
+                    <header data-modal-header>
+                    <h2
+                      id="archive-delete-title"
+                      class="jrpg-archive-dialog-title"
+                      data-modal-title
+                    >Delete this conversation?</h2>
+                    </header>
+                    <div data-modal-body>
+                    <div data-modal-article>
+                      <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
+                    </div>
+                    </div>
+                    <footer class="jrpg-archive-dialog-actions" data-modal-footer>
+                    <zen-button appearance="plain" size="md">
+                      <button type="button" data-archive-delete-cancel>Cancel</button>
+                    </zen-button>
+                    <zen-button appearance="plain" size="md">
+                      <button type="button" data-archive-delete-confirm>Delete</button>
+                    </zen-button>
+                    </footer>
+                  </dialog>
+                </zen-dialog>
+              </mjj-content-modal>
+              <mjj-window-modal data-archive-rename-owner>
+                <zen-dialog>
+                  <zen-button appearance="plain" size="xs" hidden>
+                    <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
+                  </zen-button>
+                  <dialog
+                    class="jrpg-archive-dialog"
+                    data-archive-rename-dialog
+                  >
+                    <header data-modal-header>
+                    <h2
+                      id="archive-rename-title"
+                      class="jrpg-archive-dialog-title"
+                      data-modal-title
+                    >Rename conversation</h2>
+                    </header>
+                    <form
+                    id="archive-rename-form"
+                    data-modal-body
+                    data-archive-rename-form
+                    novalidate
                     >
-                  </zen-field>
-                  <div class="jrpg-archive-dialog-actions">
+                    <zen-field appearance="plain" size="md">
+                      <label for="archive-rename-input">New title</label>
+                      <input
+                        id="archive-rename-input"
+                        data-archive-rename-input
+                        type="text"
+                        maxlength="200"
+                        required
+                        autocomplete="off"
+                      >
+                    </zen-field>
+                    </form>
+                    <footer class="jrpg-archive-dialog-actions" data-modal-footer>
                     <zen-button appearance="plain" size="md">
                       <button type="button" data-archive-rename-cancel>Cancel</button>
                     </zen-button>
                     <zen-button appearance="plain" size="md">
-                      <button type="submit">Save</button>
+                      <button type="submit" form="archive-rename-form">Save</button>
                     </zen-button>
-                  </div>
-                </form>
-              </dialog>
+                    </footer>
+                  </dialog>
+                </zen-dialog>
+              </mjj-window-modal>
                 </mjj-conversation-archive>
               </article>
             </mjj-jrpg-preview>
@@ -435,26 +485,30 @@
             </nav>
           </mjj-jrpg-menu>
 
-          <zen-dialog class="jrpg-login-dialog-owner" data-login-dialog-owner>
-            <zen-button appearance="plain" size="md" hidden>
-              <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
-            </zen-button>
-            <dialog
-              class="jrpg-login-dialog"
-              data-login-dialog
-              aria-labelledby="jrpg-login-title"
-              aria-modal="true"
-            >
-              <div class="jrpg-login-dialog-header">
-                <h2 id="jrpg-login-title">SIGN IN</h2>
-                <zen-button appearance="plain" size="md">
-                  <button type="button" data-zen-close aria-label="Close sign-in dialog">
-                    <zen-icon name="close"></zen-icon>
-                  </button>
-                </zen-button>
-              </div>
-              <div role="alert" data-login-error aria-live="assertive" hidden></div>
-              <form data-login-form novalidate>
+          <mjj-window-modal class="jrpg-login-dialog-owner" data-login-dialog-owner>
+            <zen-dialog>
+              <zen-button appearance="plain" size="md" hidden>
+                <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
+              </zen-button>
+              <dialog
+                class="jrpg-login-dialog"
+                data-login-dialog
+              >
+                <header class="jrpg-login-dialog-header" data-modal-header>
+                  <h2 id="jrpg-login-title" data-modal-title>SIGN IN</h2>
+                  <zen-button appearance="plain" size="md">
+                    <button type="button" data-zen-close aria-label="Close sign-in dialog">
+                      <zen-icon name="close"></zen-icon>
+                    </button>
+                  </zen-button>
+                </header>
+                <form
+                  id="jrpg-login-form"
+                  data-login-form
+                  data-modal-body
+                  novalidate
+                >
+                  <div role="alert" data-login-error aria-live="assertive" hidden></div>
                 <zen-field appearance="plain" size="md">
                   <label for="jrpg-login-username">Username</label>
                   <input
@@ -480,17 +534,22 @@
                     maxlength="1024"
                   >
                 </zen-field>
-                <div class="jrpg-login-dialog-actions">
+                </form>
+                <footer class="jrpg-login-dialog-actions" data-modal-footer>
                   <zen-button appearance="plain" size="md">
                     <button type="button" data-login-cancel data-zen-close>Cancel</button>
                   </zen-button>
                   <zen-button appearance="plain" size="md">
-                    <button type="submit" data-login-submit>Sign in</button>
+                    <button
+                      type="submit"
+                      form="jrpg-login-form"
+                      data-login-submit
+                    >Sign in</button>
                   </zen-button>
-                </div>
-              </form>
-            </dialog>
-          </zen-dialog>
+                </footer>
+              </dialog>
+            </zen-dialog>
+          </mjj-window-modal>
         </div>
       </mjj-jrpg-shell>
     </main>