Mercurial

annotate mrjunejune/src/public/composer-lab.html @ 272:41a49c29a28f

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
polish JRPG conversation experience Integrate desktop conversations into the utility panel, simplify the mobile frame, add modal destinations and a reusable Zenbu composer lab, and preserve explicit conversation resume behavior. Co-authored-by: Copilot <[email protected]>
author MrJuneJune <me@mrjunejune.com>
date Fri, 07 Aug 2026 16:05:29 -0700
parents
children e02e2036ef84
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 <link rel="stylesheet" href="/public/mjj-composer.css">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 <script type="module" src="/public/design-system/components/index.js"></script>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 <script type="module" src="/public/mjj-composer.js"></script>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 <style>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 body {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 box-sizing: border-box;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 min-height: 100vh;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 margin: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 padding: var(--zenbu-sys-padding-xl);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 background: var(--zenbu-sys-color-surface-page);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 color: var(--zenbu-sys-color-text-primary);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 font-family: var(--zenbu-sys-font-family-ui);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 main {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 display: grid;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 gap: var(--zenbu-sys-space-container);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 width: min(100%, 48rem);
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 margin-inline: auto;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 section {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 display: grid;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 gap: var(--zenbu-sys-space-group);
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 h1,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 h2,
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 p {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 margin: 0;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 }
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 mjj-composer {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 min-height: 10rem;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 mjj-composer[compact] {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 min-height: 7rem;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 output {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 min-height: 1.5em;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 color: var(--zenbu-sys-color-text-secondary);
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 </style>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 </head>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 <body>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 <main>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 <header>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 <h1>Composer Lab</h1>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 <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
61 </header>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 <section aria-labelledby="default-composer-title">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 <h2 id="default-composer-title">Default</h2>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 <mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 <form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 <div data-composer-control>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 <zen-field size="lg">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 <label data-composer-label>Message</label>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 <textarea rows="4" placeholder="Write a message..." required></textarea>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 </zen-field>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 <div data-composer-actions>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 <zen-button size="sm">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 <button type="submit">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 Send
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 <zen-icon name="arrow-right"></zen-icon>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 </button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 </zen-button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81 <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
82 </form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 </mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 <output data-output>Ready.</output>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 </section>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 <section aria-labelledby="compact-composer-title">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 <h2 id="compact-composer-title">Compact</h2>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 <mjj-composer compact>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 <form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 <div data-composer-control>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 <zen-field size="lg">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 <label data-composer-label>Message</label>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 <textarea rows="3" placeholder="Ask Epi..." required></textarea>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 </zen-field>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 <div data-composer-actions>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 <zen-button size="sm">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 <button type="submit" aria-label="Send message">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 <span data-composer-action-label>Send</span>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 <zen-icon name="arrow-right"></zen-icon>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 </button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 </zen-button>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 </div>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 </form>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 </mjj-composer>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107 <output data-output>Ready.</output>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 </section>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 </main>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 <script type="module">
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 for (const composer of document.querySelectorAll("mjj-composer")) {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 composer.addEventListener("mjj-composer-submit", event => {
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 composer.nextElementSibling.textContent =
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 `Submitted: ${event.detail.message}`;
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 });
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 }
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 </script>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 </body>
41a49c29a28f polish JRPG conversation experience
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 </html>