Mercurial

annotate mrjunejune/src/public/component-sandbox.html @ 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
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
273
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 <!doctype html>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 <html lang="en" data-zen-theme="cyberpunk">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 <head>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 <meta charset="UTF-8">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 <title>AI Component Sandbox | MrJuneJune</title>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 <link rel="stylesheet" href="/public/design-system/styles/tokens.css">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 <link rel="stylesheet" href="/public/design-system/styles/themes.css">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 <link rel="stylesheet" href="/public/design-system/styles/components.css">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 <script type="module" src="/public/design-system/components/index.js"></script>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 <script type="module">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 const version = Date.now();
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 const styles = [
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 "/public/mjj-modal.css",
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 "/public/component-sandbox.css",
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 ];
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 await Promise.all(styles.map(href => new Promise((resolve, reject) => {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 const link = document.createElement("link");
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 link.rel = "stylesheet";
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 link.href = `${href}?sandbox=${version}`;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 link.addEventListener("load", resolve, { once: true });
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 link.addEventListener("error", reject, { once: true });
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 document.head.append(link);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 })));
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 await import(`/public/mjj-modal.js?sandbox=${version}`);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 void navigator.serviceWorker?.getRegistration()
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 .then(registration => registration?.update());
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 </script>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 </head>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 <body>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 <main>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 <header class="sandbox-heading">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 <p class="sandbox-muted">Isolated browser fixture</p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 <h1>AI Component Sandbox</h1>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 Edit one component family, refresh this page, and inspect desktop or
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 mobile behavior without application chrome.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 <dl class="sandbox-layers" aria-label="Component dependency layers">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 <div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 <dt>Layer 0 · Foundation</dt>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 <dd>API mapping, i18n, and semantic themes.</dd>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 <div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 <dt>Layer 1 · Primitives</dt>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 <dd>Zenbu icons, fields, buttons, and dialog behavior.</dd>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 <div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 <dt>Layer 2 · Composites</dt>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 <dd>MrJuneJune composers and modal families.</dd>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 </dl>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 <p class="sandbox-rule">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 Dependency rule: Layer 2 may consume Layers 1 and 0. Application
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 routes, persistence, and business state stay above this sandbox.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 </header>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 <section class="sandbox-grid" aria-label="Modal component variants">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 <article class="sandbox-card">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 <h2>Content modal</h2>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 Editorial reading surface for blogs, notes, release details, and
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 long-form content.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 <mjj-content-modal data-component-layer="2">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 <zen-dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 <zen-button size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 <button type="button" data-zen-trigger>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 Open article
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 <zen-icon name="external"></zen-icon>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 </button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 <dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 <header data-modal-header>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 <div data-modal-heading>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 <p data-modal-kicker>Engineering note · 8 min read</p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 <h2 data-modal-title>Designing durable agent interfaces</h2>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 <div data-modal-header-actions>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 <zen-button variant="quiet" size="sm">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 <button type="button" data-zen-close aria-label="Close article">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 <zen-icon name="close"></zen-icon>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 </button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 </header>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 <zen-scroll-area
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 data-modal-body
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 data-cyber-scroll
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 tabindex="0"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 aria-label="Article content"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 >
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 <article data-modal-article>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 <p data-modal-description>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 A content modal should feel like a focused reading room:
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 enough structure to orient the reader, but no window chrome
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 competing with the article.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 <h2>Start with a strict shell</h2>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 Header, body, and footer are stable regions. The article
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 owns its semantic headings, paragraphs, lists, and code.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 The modal only supplies rhythm, containment, scrolling,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 and depth.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 <blockquote>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 Content should remain ordinary HTML even when the
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 presentation becomes cinematic.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 </blockquote>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 <h3>Keep the body readable</h3>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 The reading column stays bounded while the dialog itself
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 can grow. This avoids very long lines on desktop and keeps
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 padding deliberate on small screens.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 <h3>Use a visible scroll channel</h3>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 Cyan marks the active rail, violet separates the track,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 and magenta appears on hover. Keyboard users can focus the
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 region and scroll without moving the modal chrome.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 The header and footer stay fixed while this article moves.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 That stable frame keeps context visible during longer blog
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 posts, documentation, and generated explanations.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 Layer 2 only chooses layout and presentation. The Layer 1
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 scroll primitive still owns the native overflow behavior.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 <pre><code>&lt;mjj-content-modal&gt;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 &lt;header data-modal-header&gt;...&lt;/header&gt;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 &lt;zen-scroll-area data-modal-body data-cyber-scroll&gt;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 ...
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 &lt;/zen-scroll-area&gt;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137 &lt;footer data-modal-footer&gt;...&lt;/footer&gt;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 &lt;/mjj-content-modal&gt;</code></pre>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139 </article>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 </zen-scroll-area>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 <footer data-modal-footer>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 <p>Updated August 7, 2026</p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143 <div data-modal-footer-actions>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144 <zen-button variant="quiet" size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 <button type="button" data-zen-close>Done reading</button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 </footer>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 </dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 </zen-dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151 </mjj-content-modal>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152 </article>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 <article class="sandbox-card">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 <h2>Window modal</h2>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 <p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157 Structured workspace for tools and multi-region interfaces with
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158 fixed chrome and a bounded scrolling body.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 <mjj-window-modal data-component-layer="2">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 <zen-dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 <zen-button size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163 <button type="button" data-zen-trigger>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164 Open workspace
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 <zen-icon name="external"></zen-icon>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 </button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 <dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 <header data-modal-header>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 <div data-modal-heading>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 <p data-modal-kicker>Workspace · Read only</p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 <h2 data-modal-title>Component inspector</h2>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 <div data-modal-header-actions>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 <zen-button variant="quiet" size="sm">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 <button type="button" aria-label="Component settings">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 <zen-icon name="settings"></zen-icon>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
178 </button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
179 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180 <zen-button variant="quiet" size="sm">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 <button type="button" data-zen-close aria-label="Close workspace">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 <zen-icon name="close"></zen-icon>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 </button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 </header>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 <zen-scroll-area
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 data-modal-body
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189 data-modal-layout="split"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 data-cyber-scroll
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 tabindex="0"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192 aria-label="Workspace content"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
193 >
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 <zen-scroll-area
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 data-modal-pane
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196 data-cyber-scroll
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 tabindex="0"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198 aria-label="Inspector regions"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199 >
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200 <aside class="sandbox-pane">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 <h3>Regions</h3>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202 <ul class="sandbox-list">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203 <li>Header</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 <li>Body</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 <li>Footer</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 </ul>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 </aside>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
208 </zen-scroll-area>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209 <zen-scroll-area
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 data-modal-pane="primary"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211 data-cyber-scroll
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 tabindex="0"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 aria-label="Inspector body content"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 >
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 <article class="sandbox-pane">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 <h3>Body content</h3>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217 <p data-modal-description>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 The window body can host split panes, editors, previews,
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 or tools without changing the surrounding contract.
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 </p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 <zen-field size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222 <label for="sandbox-component-name">Component name</label>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 <input
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 id="sandbox-component-name"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 value="mjj-window-modal"
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
226 readonly
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 >
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 <small>The active light-DOM fixture.</small>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229 </zen-field>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 <ol class="sandbox-audit">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231 <li><strong>01</strong> Header region validated</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 <li><strong>02</strong> Title association generated</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233 <li><strong>03</strong> Body region bounded</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 <li><strong>04</strong> Scroll primitive connected</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
235 <li><strong>05</strong> Footer actions discovered</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
236 <li><strong>06</strong> Pixel typography inherited</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 <li><strong>07</strong> Cyberpunk theme resolved</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238 <li><strong>08</strong> Keyboard scrolling enabled</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
239 <li><strong>09</strong> Responsive split verified</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240 <li><strong>10</strong> Layer contract ready</li>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 </ol>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
242 </article>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
243 </zen-scroll-area>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244 </zen-scroll-area>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245 <footer data-modal-footer>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246 <p>3 required regions · contract valid</p>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247 <div data-modal-footer-actions>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 <zen-button variant="quiet" size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 <button type="button" data-zen-close>Cancel</button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 <zen-button size="md">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252 <button type="button" data-zen-close>Apply</button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 </zen-button>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254 </div>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255 </footer>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 </dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 </zen-dialog>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258 </mjj-window-modal>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259 </article>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 </section>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261 </main>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262 </body>
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
263 </html>