Mercurial

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