Mercurial

annotate mrjunejune/src/public/composer-lab.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 41a49c29a28f
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
272
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 <!doctype html>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 <html lang="en" data-zen-theme="cyberpunk">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 <head>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 <meta charset="UTF-8">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 <title>Composer Lab | MrJuneJune</title>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 <link rel="stylesheet" href="/public/design-system/styles/tokens.css">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 <link rel="stylesheet" href="/public/design-system/styles/themes.css">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 <link rel="stylesheet" href="/public/design-system/styles/components.css">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 <script type="module" src="/public/design-system/components/index.js"></script>
273
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
11 <script type="module">
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
12 const version = Date.now();
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
13 const link = document.createElement("link");
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
14 link.rel = "stylesheet";
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
15 link.href = `/public/mjj-composer.css?sandbox=${version}`;
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
16 await new Promise((resolve, reject) => {
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
17 link.addEventListener("load", resolve, { once: true });
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
18 link.addEventListener("error", reject, { once: true });
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
19 document.head.append(link);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
20 });
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
21 await import(`/public/mjj-composer.js?sandbox=${version}`);
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
22 void navigator.serviceWorker?.getRegistration()
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
23 .then(registration => registration?.update());
e02e2036ef84 add Layer 2 JRPG component system
MrJuneJune <me@mrjunejune.com>
parents: 272
diff changeset
24 </script>
272
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 <style>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 body {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 box-sizing: border-box;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 min-height: 100vh;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 margin: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 padding: var(--zenbu-sys-padding-xl);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 background: var(--zenbu-sys-color-surface-page);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 color: var(--zenbu-sys-color-text-primary);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 font-family: var(--zenbu-sys-font-family-ui);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 main {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 display: grid;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 gap: var(--zenbu-sys-space-container);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 width: min(100%, 48rem);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 margin-inline: auto;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 section {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 display: grid;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 gap: var(--zenbu-sys-space-group);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 h1,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 h2,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 p {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 margin: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 mjj-composer {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 min-height: 10rem;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 mjj-composer[compact] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 min-height: 7rem;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 output {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 min-height: 1.5em;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 color: var(--zenbu-sys-color-text-secondary);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 </style>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 </head>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 <body>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 <main>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 <header>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 <h1>Composer Lab</h1>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 <p>Edit the public composer module or stylesheet, then refresh this page.</p>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 </header>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 <section aria-labelledby="default-composer-title">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 <h2 id="default-composer-title">Default</h2>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 <mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 <form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 <div data-composer-control>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 <zen-field size="lg">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 <label data-composer-label>Message</label>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 <textarea rows="4" placeholder="Write a message..." required></textarea>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 </zen-field>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 <div data-composer-actions>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 <zen-button size="sm">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86 <button type="submit">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 Send
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 <zen-icon name="arrow-right"></zen-icon>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 </button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 </zen-button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 <p data-composer-meta>Enter to send / Shift + Enter for a new line</p>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 </form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 </mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 <output data-output>Ready.</output>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 </section>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 <section aria-labelledby="compact-composer-title">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 <h2 id="compact-composer-title">Compact</h2>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 <mjj-composer compact>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 <form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 <div data-composer-control>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 <zen-field size="lg">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 <label data-composer-label>Message</label>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 <textarea rows="3" placeholder="Ask Epi..." required></textarea>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 </zen-field>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 <div data-composer-actions>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 <zen-button size="sm">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 <button type="submit" aria-label="Send message">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 <span data-composer-action-label>Send</span>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 <zen-icon name="arrow-right"></zen-icon>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 </button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 </zen-button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 </form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 </mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 <output data-output>Ready.</output>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 </section>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 </main>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 <script type="module">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 for (const composer of document.querySelectorAll("mjj-composer")) {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 composer.addEventListener("mjj-composer-submit", event => {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 composer.nextElementSibling.textContent =
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 `Submitted: ${event.detail.message}`;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 });
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 </script>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 </body>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 </html>