Mercurial

comparison 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
comparison
equal deleted inserted replaced
272:41a49c29a28f 273:e02e2036ef84
34 34
35 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))"> 35 <link rel="preload" href="/public/jrpg/background-frame-2.webp" as="image" media="not ((max-width: 52rem) and (orientation: portrait))">
36 <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)"> 36 <link rel="preload" href="/public/jrpg/background-frame-mobile.webp" as="image" media="(max-width: 52rem) and (orientation: portrait)">
37 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image"> 37 <link rel="preload" href="/public/jrpg/bar-ink.webp" as="image">
38 <link rel="stylesheet" href="/public/mjj-composer.css"> 38 <link rel="stylesheet" href="/public/mjj-composer.css">
39 <link rel="stylesheet" href="/public/mjj-modal.css">
39 <link rel="stylesheet" href="/jrpg/jrpg.css"> 40 <link rel="stylesheet" href="/jrpg/jrpg.css">
40 <script type="module" src="/public/mjj-composer.js"></script> 41 <script type="module" src="/public/mjj-composer.js"></script>
42 <script type="module" src="/public/mjj-modal.js"></script>
41 <script type="module" src="/jrpg/jrpg.js"></script> 43 <script type="module" src="/jrpg/jrpg.js"></script>
42 </head> 44 </head>
43 <body class="jrpg-page"> 45 <body class="jrpg-page">
44 <main class="jrpg-main"> 46 <main class="jrpg-main">
45 <mjj-jrpg-shell class="jrpg-shell"> 47 <mjj-jrpg-shell
48 class="jrpg-shell"
49 data-initial-panel="resume"
50 >
46 <div class="jrpg-workspace"> 51 <div class="jrpg-workspace">
47 <div class="jrpg-brand"> 52 <div class="jrpg-brand">
48 <header> 53 <header>
49 <h1> 54 <h1>
50 <a href="/" data-zen-link-effect="none">MrJuneJune</a> 55 <a href="/" data-zen-link-effect="none">MrJuneJune</a>
76 <a href="/" aria-label="Close interface and return home"> 81 <a href="/" aria-label="Close interface and return home">
77 <zen-icon name="close"></zen-icon> 82 <zen-icon name="close"></zen-icon>
78 </a> 83 </a>
79 </zen-button> 84 </zen-button>
80 </nav> 85 </nav>
81 <zen-dialog 86 <mjj-window-modal
82 class="jrpg-mobile-destination-owner" 87 class="jrpg-mobile-destination-owner"
83 data-mobile-destination-owner 88 data-mobile-destination-owner
84 > 89 >
85 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs"> 90 <zen-dialog>
86 <button 91 <zen-button class="jrpg-mobile-menu-btn" appearance="plain" size="xs">
87 type="button" 92 <button
88 data-zen-trigger 93 type="button"
89 data-mobile-menu-toggle 94 data-zen-trigger
90 aria-label="Open destination menu" 95 data-mobile-menu-toggle
96 aria-label="Open destination menu"
97 >
98 <zen-icon name="menu"></zen-icon>
99 </button>
100 </zen-button>
101 <dialog
102 class="jrpg-mobile-destination-dialog"
103 data-mobile-destination-dialog
91 > 104 >
92 <zen-icon name="menu"></zen-icon> 105 <header class="jrpg-mobile-destination-header" data-modal-header>
93 </button> 106 <zen-button
94 </zen-button> 107 appearance="plain"
95 <dialog 108 size="sm"
96 class="jrpg-mobile-destination-dialog" 109 data-mobile-destination-back-owner
97 data-mobile-destination-dialog 110 hidden
98 aria-labelledby="jrpg-mobile-destination-title"
99 >
100 <header class="jrpg-mobile-destination-header">
101 <zen-button
102 appearance="plain"
103 size="sm"
104 data-mobile-destination-back-owner
105 hidden
106 >
107 <button
108 type="button"
109 data-mobile-destination-back
110 aria-label="Back to destination menu"
111 > 111 >
112 <zen-icon name="chevron-left"></zen-icon> 112 <button
113 Menu 113 type="button"
114 </button> 114 data-mobile-destination-back
115 </zen-button> 115 aria-label="Back to destination menu"
116 <h2 116 >
117 id="jrpg-mobile-destination-title" 117 <zen-icon name="chevron-left"></zen-icon>
118 data-mobile-destination-title 118 Menu
119 >Menu</h2> 119 </button>
120 <zen-button appearance="plain" size="sm"> 120 </zen-button>
121 <button 121 <h2
122 type="button" 122 id="jrpg-mobile-destination-title"
123 data-zen-close 123 data-mobile-destination-title
124 aria-label="Close destination menu" 124 data-modal-title
125 > 125 >Menu</h2>
126 <zen-icon name="close"></zen-icon> 126 <zen-button appearance="plain" size="sm">
127 </button> 127 <button
128 </zen-button> 128 type="button"
129 </header> 129 data-zen-close
130 <div 130 aria-label="Close destination menu"
131 class="jrpg-mobile-destination-content" 131 >
132 data-mobile-destination-content 132 <zen-icon name="close"></zen-icon>
133 ></div> 133 </button>
134 </dialog> 134 </zen-button>
135 </zen-dialog> 135 </header>
136 <zen-scroll-area
137 class="jrpg-mobile-destination-content"
138 data-mobile-destination-content
139 data-modal-body
140 data-cyber-scroll
141 tabindex="0"
142 aria-label="Destination content"
143 ></zen-scroll-area>
144 </dialog>
145 </zen-dialog>
146 </mjj-window-modal>
136 <footer class="jrpg-frame-telemetry" aria-label="System telemetry"> 147 <footer class="jrpg-frame-telemetry" aria-label="System telemetry">
137 <span aria-label="Temperature unavailable">N/A</span> 148 <span aria-label="Temperature unavailable">N/A</span>
138 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span> 149 <span data-frame-account aria-live="polite"><a href="/login?next=/jrpg">LOGIN</a></span>
139 <span data-frame-network aria-label="Status online">ONLINE</span> 150 <span data-frame-network aria-label="Status online">ONLINE</span>
140 <time data-frame-uptime aria-label="Uptime">00:00:00</time> 151 <time data-frame-uptime aria-label="Uptime">00:00:00</time>
176 </section> 187 </section>
177 188
178 <section class="jrpg-utility" aria-label="Selected destination"> 189 <section class="jrpg-utility" aria-label="Selected destination">
179 <mjj-jrpg-preview data-selection="resume"> 190 <mjj-jrpg-preview data-selection="resume">
180 <article class="jrpg-preview-panel" aria-live="polite"> 191 <article class="jrpg-preview-panel" aria-live="polite">
181 <div class="jrpg-preview-content" data-preview-content> 192 <div
193 class="jrpg-preview-content"
194 data-preview-content
195
196 >
182 <zen-heading size="xl"> 197 <zen-heading size="xl">
183 <h2 data-preview-title>Resume</h2> 198 <h2 data-preview-title>Resume</h2>
184 </zen-heading> 199 </zen-heading>
185 <p data-preview-copy> 200 <p data-preview-copy>
186 Member of Technical Staff and engineering leader with 10+ years building AI agent platforms and production systems. 201 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.
187 </p> 202 </p>
188 <ul class="jrpg-work-showcase" data-work-showcase> 203 <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>
189 <li> 204 <mjj-content-modal data-detail-modal-owner>
190 <a href="https://www.microsoft.com/en-us/microsoft-copilot/blog/2026/02/26/copilot-tasks-from-answers-to-actions/"> 205 <zen-dialog class="jrpg-preview-dialog">
191 <span>Copilot Tasks</span> 206 <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden>
192 <small>Agentic execution</small> 207 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
193 </a> 208 </zen-button>
194 </li> 209 <dialog class="jrpg-detail-dialog">
195 <li> 210 <header class="jrpg-dialog-heading" data-modal-header>
196 <a href="https://www.cio.com/article/3977098/microsoft-doubles-down-on-multi-model-ai-as-it-builds-a-copilot-super-app.html"> 211 <div data-modal-heading>
197 <span>Copilot SuperApp</span> 212 <p data-modal-kicker>DESTINATION DATA</p>
198 <small>AI platform</small> 213 <h2
199 </a> 214 id="jrpg-dialog-title"
200 </li> 215 data-dialog-title
201 </ul> 216 data-modal-title
202 <zen-dialog class="jrpg-preview-dialog"> 217 >Resume</h2>
203 <zen-button appearance="plain" size="xs" data-dialog-trigger-owner hidden> 218 </div>
204 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
205 </zen-button>
206 <dialog class="jrpg-detail-dialog" aria-labelledby="jrpg-dialog-title">
207 <div class="jrpg-dialog-heading">
208 <p>DESTINATION DATA</p>
209 <div class="jrpg-dialog-heading-actions"> 219 <div class="jrpg-dialog-heading-actions">
210 <zen-button appearance="plain" size="md"> 220 <zen-button
211 <a href="/resume" data-preview-link> 221 appearance="plain"
212 Open page 222 size="sm"
213 <zen-icon name="external"></zen-icon> 223 data-resume-download
224 >
225 <a href="/public/resume.pdf">
226 Download PDF
227 <zen-icon name="download"></zen-icon>
214 </a> 228 </a>
215 </zen-button> 229 </zen-button>
216 <zen-button appearance="plain" size="md"> 230 <zen-button appearance="plain" size="sm">
217 <button type="button" data-zen-close aria-label="Close destination details"> 231 <button type="button" data-zen-close aria-label="Close destination details">
218 <zen-icon name="close"></zen-icon> 232 <zen-icon name="close"></zen-icon>
219 </button> 233 </button>
220 </zen-button> 234 </zen-button>
221 </div> 235 </div>
222 </div> 236 </header>
223 <h2 id="jrpg-dialog-title" data-dialog-title>Resume</h2> 237 <zen-scroll-area
224 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p> 238 class="jrpg-detail-body"
239 data-modal-body
240 data-cyber-scroll
241 tabindex="0"
242 aria-label="Destination details"
243 >
244 <div class="jrpg-detail-content" data-modal-article>
245 <p data-dialog-copy>Experience, projects, and the systems I have helped build.</p>
225 <section 246 <section
226 class="jrpg-resume-dossier" 247 class="jrpg-resume-dossier"
227 data-resume-dossier 248 data-resume-dossier
228 aria-label="Resume dossier" 249 aria-label="Resume dossier"
229 > 250 >
256 <article> 277 <article>
257 <p data-tool-status>Select a tool to inspect.</p> 278 <p data-tool-status>Select a tool to inspect.</p>
258 <div data-tool-content></div> 279 <div data-tool-content></div>
259 </article> 280 </article>
260 </section> 281 </section>
261 <div class="jrpg-dialog-actions" data-dialog-actions> 282 </div>
262 <zen-button appearance="plain" size="lg" data-resume-download> 283 </zen-scroll-area>
263 <a href="/public/resume.pdf"> 284 </dialog>
264 Download PDF 285 </zen-dialog>
265 <zen-icon name="download"></zen-icon> 286 </mjj-content-modal>
266 </a>
267 </zen-button>
268 </div>
269 </dialog>
270 </zen-dialog>
271 </div> 287 </div>
272 <mjj-conversation-archive hidden aria-label="Conversations"> 288 <mjj-conversation-archive
289 hidden
290 aria-label="Conversations"
291 >
273 <div class="jrpg-archive-heading"> 292 <div class="jrpg-archive-heading">
274 <h2>Archive</h2> 293 <h2>Archive</h2>
275 <zen-button appearance="plain" size="xs"> 294 <zen-button appearance="plain" size="xs">
276 <button type="button" data-archive-close aria-label="Close conversations"> 295 <button type="button" data-archive-close aria-label="Close conversations">
277 <zen-icon name="close"></zen-icon> 296 <zen-icon name="close"></zen-icon>
290 </ol> 309 </ol>
291 <zen-button appearance="plain" size="sm" data-archive-load-more-owner hidden> 310 <zen-button appearance="plain" size="sm" data-archive-load-more-owner hidden>
292 <button type="button" data-archive-load-more>Load more</button> 311 <button type="button" data-archive-load-more>Load more</button>
293 </zen-button> 312 </zen-button>
294 <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p> 313 <p class="jrpg-archive-status" data-archive-status aria-live="polite">Loading conversations...</p>
295 <dialog 314 <mjj-content-modal data-archive-delete-owner>
296 class="jrpg-archive-dialog" 315 <zen-dialog>
297 data-archive-delete-dialog 316 <zen-button appearance="plain" size="xs" hidden>
298 aria-labelledby="archive-delete-title" 317 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
299 aria-modal="true" 318 </zen-button>
300 > 319 <dialog
301 <p id="archive-delete-title" class="jrpg-archive-dialog-title">Delete this conversation?</p> 320 class="jrpg-archive-dialog"
302 <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p> 321 data-archive-delete-dialog
303 <div class="jrpg-archive-dialog-actions"> 322 >
304 <zen-button appearance="plain" size="md"> 323 <header data-modal-header>
305 <button type="button" data-archive-delete-cancel>Cancel</button> 324 <h2
306 </zen-button> 325 id="archive-delete-title"
307 <zen-button appearance="plain" size="md"> 326 class="jrpg-archive-dialog-title"
308 <button type="button" data-archive-delete-confirm>Delete</button> 327 data-modal-title
309 </zen-button> 328 >Delete this conversation?</h2>
310 </div> 329 </header>
311 </dialog> 330 <div data-modal-body>
312 <dialog 331 <div data-modal-article>
313 class="jrpg-archive-dialog" 332 <p data-archive-delete-name class="jrpg-archive-dialog-subtitle"></p>
314 data-archive-rename-dialog 333 </div>
315 aria-labelledby="archive-rename-title" 334 </div>
316 aria-modal="true" 335 <footer class="jrpg-archive-dialog-actions" data-modal-footer>
317 > 336 <zen-button appearance="plain" size="md">
318 <p id="archive-rename-title" class="jrpg-archive-dialog-title">Rename conversation</p> 337 <button type="button" data-archive-delete-cancel>Cancel</button>
319 <form data-archive-rename-form novalidate> 338 </zen-button>
320 <zen-field appearance="plain" size="md"> 339 <zen-button appearance="plain" size="md">
321 <label for="archive-rename-input">New title</label> 340 <button type="button" data-archive-delete-confirm>Delete</button>
322 <input 341 </zen-button>
323 id="archive-rename-input" 342 </footer>
324 data-archive-rename-input 343 </dialog>
325 type="text" 344 </zen-dialog>
326 maxlength="200" 345 </mjj-content-modal>
327 required 346 <mjj-window-modal data-archive-rename-owner>
328 autocomplete="off" 347 <zen-dialog>
348 <zen-button appearance="plain" size="xs" hidden>
349 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
350 </zen-button>
351 <dialog
352 class="jrpg-archive-dialog"
353 data-archive-rename-dialog
354 >
355 <header data-modal-header>
356 <h2
357 id="archive-rename-title"
358 class="jrpg-archive-dialog-title"
359 data-modal-title
360 >Rename conversation</h2>
361 </header>
362 <form
363 id="archive-rename-form"
364 data-modal-body
365 data-archive-rename-form
366 novalidate
329 > 367 >
330 </zen-field> 368 <zen-field appearance="plain" size="md">
331 <div class="jrpg-archive-dialog-actions"> 369 <label for="archive-rename-input">New title</label>
370 <input
371 id="archive-rename-input"
372 data-archive-rename-input
373 type="text"
374 maxlength="200"
375 required
376 autocomplete="off"
377 >
378 </zen-field>
379 </form>
380 <footer class="jrpg-archive-dialog-actions" data-modal-footer>
332 <zen-button appearance="plain" size="md"> 381 <zen-button appearance="plain" size="md">
333 <button type="button" data-archive-rename-cancel>Cancel</button> 382 <button type="button" data-archive-rename-cancel>Cancel</button>
334 </zen-button> 383 </zen-button>
335 <zen-button appearance="plain" size="md"> 384 <zen-button appearance="plain" size="md">
336 <button type="submit">Save</button> 385 <button type="submit" form="archive-rename-form">Save</button>
337 </zen-button> 386 </zen-button>
338 </div> 387 </footer>
339 </form> 388 </dialog>
340 </dialog> 389 </zen-dialog>
390 </mjj-window-modal>
341 </mjj-conversation-archive> 391 </mjj-conversation-archive>
342 </article> 392 </article>
343 </mjj-jrpg-preview> 393 </mjj-jrpg-preview>
344 </section> 394 </section>
345 395
433 </li> 483 </li>
434 </ul> 484 </ul>
435 </nav> 485 </nav>
436 </mjj-jrpg-menu> 486 </mjj-jrpg-menu>
437 487
438 <zen-dialog class="jrpg-login-dialog-owner" data-login-dialog-owner> 488 <mjj-window-modal class="jrpg-login-dialog-owner" data-login-dialog-owner>
439 <zen-button appearance="plain" size="md" hidden> 489 <zen-dialog>
440 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button> 490 <zen-button appearance="plain" size="md" hidden>
441 </zen-button> 491 <button type="button" data-zen-trigger tabindex="-1" aria-hidden="true"></button>
442 <dialog 492 </zen-button>
443 class="jrpg-login-dialog" 493 <dialog
444 data-login-dialog 494 class="jrpg-login-dialog"
445 aria-labelledby="jrpg-login-title" 495 data-login-dialog
446 aria-modal="true" 496 >
447 > 497 <header class="jrpg-login-dialog-header" data-modal-header>
448 <div class="jrpg-login-dialog-header"> 498 <h2 id="jrpg-login-title" data-modal-title>SIGN IN</h2>
449 <h2 id="jrpg-login-title">SIGN IN</h2> 499 <zen-button appearance="plain" size="md">
450 <zen-button appearance="plain" size="md"> 500 <button type="button" data-zen-close aria-label="Close sign-in dialog">
451 <button type="button" data-zen-close aria-label="Close sign-in dialog"> 501 <zen-icon name="close"></zen-icon>
452 <zen-icon name="close"></zen-icon> 502 </button>
453 </button> 503 </zen-button>
454 </zen-button> 504 </header>
455 </div> 505 <form
456 <div role="alert" data-login-error aria-live="assertive" hidden></div> 506 id="jrpg-login-form"
457 <form data-login-form novalidate> 507 data-login-form
508 data-modal-body
509 novalidate
510 >
511 <div role="alert" data-login-error aria-live="assertive" hidden></div>
458 <zen-field appearance="plain" size="md"> 512 <zen-field appearance="plain" size="md">
459 <label for="jrpg-login-username">Username</label> 513 <label for="jrpg-login-username">Username</label>
460 <input 514 <input
461 id="jrpg-login-username" 515 id="jrpg-login-username"
462 name="username" 516 name="username"
478 required 532 required
479 minlength="12" 533 minlength="12"
480 maxlength="1024" 534 maxlength="1024"
481 > 535 >
482 </zen-field> 536 </zen-field>
483 <div class="jrpg-login-dialog-actions"> 537 </form>
538 <footer class="jrpg-login-dialog-actions" data-modal-footer>
484 <zen-button appearance="plain" size="md"> 539 <zen-button appearance="plain" size="md">
485 <button type="button" data-login-cancel data-zen-close>Cancel</button> 540 <button type="button" data-login-cancel data-zen-close>Cancel</button>
486 </zen-button> 541 </zen-button>
487 <zen-button appearance="plain" size="md"> 542 <zen-button appearance="plain" size="md">
488 <button type="submit" data-login-submit>Sign in</button> 543 <button
489 </zen-button> 544 type="submit"
490 </div> 545 form="jrpg-login-form"
491 </form> 546 data-login-submit
492 </dialog> 547 >Sign in</button>
493 </zen-dialog> 548 </zen-button>
549 </footer>
550 </dialog>
551 </zen-dialog>
552 </mjj-window-modal>
494 </div> 553 </div>
495 </mjj-jrpg-shell> 554 </mjj-jrpg-shell>
496 </main> 555 </main>
497 </body> 556 </body>
498 </html> 557 </html>