cortico-world-canvas 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +162 -0
  3. package/package.json +52 -0
  4. package/src/ENV_PROMPT.md +63 -0
  5. package/src/GAME_GUIDE.md +20 -0
  6. package/src/RESEARCH.md +58 -0
  7. package/src/brush-renderer.ts +56 -0
  8. package/src/brushes.ts +1 -0
  9. package/src/config.ts +22 -0
  10. package/src/definition.ts +11 -0
  11. package/src/drawing.ts +238 -0
  12. package/src/engine-child.ts +23 -0
  13. package/src/game.ts +207 -0
  14. package/src/index.ts +13 -0
  15. package/src/inspect.ts +47 -0
  16. package/src/motion.ts +132 -0
  17. package/src/paint.ts +132 -0
  18. package/src/public/app.js +304 -0
  19. package/src/public/brush-alpha.js +39 -0
  20. package/src/public/brush-engine.js +40 -0
  21. package/src/public/corti-cursor.svg +213 -0
  22. package/src/public/index.html +47 -0
  23. package/src/public/styles.css +1326 -0
  24. package/src/server.ts +306 -0
  25. package/src/store.ts +286 -0
  26. package/src/tools.ts +111 -0
  27. package/src/world.ts +120 -0
package/src/public/corti-cursor.svg ADDED
@@ -0,0 +1,213 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" shape-rendering="crispEdges">
2
+ <!-- Generated by cortico-world-pvz cursor-companion/scripts/generate.mjs; edit the sprite there. -->
3
+ <rect x="5" y="5" width="1" height="1" fill="#8fd3ff"/>
4
+ <rect x="6" y="5" width="1" height="1" fill="#8fd3ff"/>
5
+ <rect x="7" y="5" width="1" height="1" fill="#8fd3ff"/>
6
+ <rect x="8" y="5" width="1" height="1" fill="#8fd3ff"/>
7
+ <rect x="4" y="6" width="1" height="1" fill="#8fd3ff"/>
8
+ <rect x="9" y="6" width="1" height="1" fill="#8fd3ff"/>
9
+ <rect x="3" y="7" width="1" height="1" fill="#8fd3ff"/>
10
+ <rect x="7" y="7" width="1" height="1" fill="#ffffff"/>
11
+ <rect x="8" y="7" width="1" height="1" fill="#ffffff"/>
12
+ <rect x="9" y="7" width="1" height="1" fill="#ffffff"/>
13
+ <rect x="10" y="7" width="1" height="1" fill="#8fd3ff"/>
14
+ <rect x="11" y="7" width="1" height="1" fill="#ffffff"/>
15
+ <rect x="12" y="7" width="1" height="1" fill="#ffffff"/>
16
+ <rect x="5" y="8" width="1" height="1" fill="#ffffff"/>
17
+ <rect x="6" y="8" width="1" height="1" fill="#ffffff"/>
18
+ <rect x="7" y="8" width="1" height="1" fill="#ffffff"/>
19
+ <rect x="8" y="8" width="1" height="1" fill="#ffffff"/>
20
+ <rect x="9" y="8" width="1" height="1" fill="#ffffff"/>
21
+ <rect x="10" y="8" width="1" height="1" fill="#ffffff"/>
22
+ <rect x="11" y="8" width="1" height="1" fill="#ffffff"/>
23
+ <rect x="12" y="8" width="1" height="1" fill="#ffffff"/>
24
+ <rect x="13" y="8" width="1" height="1" fill="#ffffff"/>
25
+ <rect x="14" y="8" width="1" height="1" fill="#ffffff"/>
26
+ <rect x="4" y="9" width="1" height="1" fill="#ffffff"/>
27
+ <rect x="5" y="9" width="1" height="1" fill="#ffffff"/>
28
+ <rect x="6" y="9" width="1" height="1" fill="#ffffff"/>
29
+ <rect x="7" y="9" width="1" height="1" fill="#ffffff"/>
30
+ <rect x="8" y="9" width="1" height="1" fill="#ffffff"/>
31
+ <rect x="9" y="9" width="1" height="1" fill="#ffffff"/>
32
+ <rect x="10" y="9" width="1" height="1" fill="#ffffff"/>
33
+ <rect x="11" y="9" width="1" height="1" fill="#ffffff"/>
34
+ <rect x="12" y="9" width="1" height="1" fill="#ffffff"/>
35
+ <rect x="13" y="9" width="1" height="1" fill="#ffffff"/>
36
+ <rect x="14" y="9" width="1" height="1" fill="#ffffff"/>
37
+ <rect x="15" y="9" width="1" height="1" fill="#ffffff"/>
38
+ <rect x="3" y="10" width="1" height="1" fill="#ffffff"/>
39
+ <rect x="4" y="10" width="1" height="1" fill="#ffffff"/>
40
+ <rect x="5" y="10" width="1" height="1" fill="#ffffff"/>
41
+ <rect x="6" y="10" width="1" height="1" fill="#ffffff"/>
42
+ <rect x="7" y="10" width="1" height="1" fill="#ffffff"/>
43
+ <rect x="8" y="10" width="1" height="1" fill="#ffffff"/>
44
+ <rect x="9" y="10" width="1" height="1" fill="#ffffff"/>
45
+ <rect x="10" y="10" width="1" height="1" fill="#ffffff"/>
46
+ <rect x="11" y="10" width="1" height="1" fill="#ffffff"/>
47
+ <rect x="12" y="10" width="1" height="1" fill="#ffffff"/>
48
+ <rect x="13" y="10" width="1" height="1" fill="#ffffff"/>
49
+ <rect x="14" y="10" width="1" height="1" fill="#ffffff"/>
50
+ <rect x="15" y="10" width="1" height="1" fill="#ffffff"/>
51
+ <rect x="16" y="10" width="1" height="1" fill="#ffffff"/>
52
+ <rect x="3" y="11" width="1" height="1" fill="#ffffff"/>
53
+ <rect x="4" y="11" width="1" height="1" fill="#ffffff"/>
54
+ <rect x="5" y="11" width="1" height="1" fill="#ffffff"/>
55
+ <rect x="6" y="11" width="1" height="1" fill="#ffffff"/>
56
+ <rect x="7" y="11" width="1" height="1" fill="#ffffff"/>
57
+ <rect x="8" y="11" width="1" height="1" fill="#ffffff"/>
58
+ <rect x="9" y="11" width="1" height="1" fill="#ffffff"/>
59
+ <rect x="10" y="11" width="1" height="1" fill="#ffffff"/>
60
+ <rect x="11" y="11" width="1" height="1" fill="#ffffff"/>
61
+ <rect x="12" y="11" width="1" height="1" fill="#ffffff"/>
62
+ <rect x="13" y="11" width="1" height="1" fill="#ffffff"/>
63
+ <rect x="14" y="11" width="1" height="1" fill="#ffffff"/>
64
+ <rect x="15" y="11" width="1" height="1" fill="#ffffff"/>
65
+ <rect x="16" y="11" width="1" height="1" fill="#ffffff"/>
66
+ <rect x="20" y="11" width="1" height="1" fill="#8fd3ff"/>
67
+ <rect x="21" y="11" width="1" height="1" fill="#8fd3ff"/>
68
+ <rect x="22" y="11" width="1" height="1" fill="#8fd3ff"/>
69
+ <rect x="2" y="12" width="1" height="1" fill="#ffffff"/>
70
+ <rect x="3" y="12" width="1" height="1" fill="#ffffff"/>
71
+ <rect x="4" y="12" width="1" height="1" fill="#ffffff"/>
72
+ <rect x="5" y="12" width="1" height="1" fill="#ffffff"/>
73
+ <rect x="6" y="12" width="1" height="1" fill="#d6efff"/>
74
+ <rect x="7" y="12" width="1" height="1" fill="#d6efff"/>
75
+ <rect x="8" y="12" width="1" height="1" fill="#ffffff"/>
76
+ <rect x="9" y="12" width="1" height="1" fill="#ffffff"/>
77
+ <rect x="10" y="12" width="1" height="1" fill="#ffffff"/>
78
+ <rect x="11" y="12" width="1" height="1" fill="#ffffff"/>
79
+ <rect x="12" y="12" width="1" height="1" fill="#ffffff"/>
80
+ <rect x="13" y="12" width="1" height="1" fill="#ffffff"/>
81
+ <rect x="14" y="12" width="1" height="1" fill="#ffffff"/>
82
+ <rect x="15" y="12" width="1" height="1" fill="#ffffff"/>
83
+ <rect x="16" y="12" width="1" height="1" fill="#ffffff"/>
84
+ <rect x="17" y="12" width="1" height="1" fill="#ffffff"/>
85
+ <rect x="19" y="12" width="1" height="1" fill="#8fd3ff"/>
86
+ <rect x="20" y="12" width="1" height="1" fill="#8fd3ff"/>
87
+ <rect x="21" y="12" width="1" height="1" fill="#8fd3ff"/>
88
+ <rect x="2" y="13" width="1" height="1" fill="#ffffff"/>
89
+ <rect x="3" y="13" width="1" height="1" fill="#ffffff"/>
90
+ <rect x="4" y="13" width="1" height="1" fill="#ffffff"/>
91
+ <rect x="5" y="13" width="1" height="1" fill="#ffffff"/>
92
+ <rect x="6" y="13" width="1" height="1" fill="#d6efff"/>
93
+ <rect x="7" y="13" width="1" height="1" fill="#fcf3f3"/>
94
+ <rect x="8" y="13" width="1" height="1" fill="#ffffff"/>
95
+ <rect x="9" y="13" width="1" height="1" fill="#ffffff"/>
96
+ <rect x="10" y="13" width="1" height="1" fill="#ffffff"/>
97
+ <rect x="11" y="13" width="1" height="1" fill="#ffffff"/>
98
+ <rect x="12" y="13" width="1" height="1" fill="#d6efff"/>
99
+ <rect x="13" y="13" width="1" height="1" fill="#fcf3f3"/>
100
+ <rect x="14" y="13" width="1" height="1" fill="#ffffff"/>
101
+ <rect x="15" y="13" width="1" height="1" fill="#ffffff"/>
102
+ <rect x="16" y="13" width="1" height="1" fill="#ffffff"/>
103
+ <rect x="17" y="13" width="1" height="1" fill="#ffffff"/>
104
+ <rect x="18" y="13" width="1" height="1" fill="#8fd3ff"/>
105
+ <rect x="19" y="13" width="1" height="1" fill="#8fd3ff"/>
106
+ <rect x="20" y="13" width="1" height="1" fill="#4d9be6"/>
107
+ <rect x="21" y="13" width="1" height="1" fill="#8fd3ff"/>
108
+ <rect x="2" y="14" width="1" height="1" fill="#ffffff"/>
109
+ <rect x="3" y="14" width="1" height="1" fill="#ffffff"/>
110
+ <rect x="4" y="14" width="1" height="1" fill="#d6efff"/>
111
+ <rect x="5" y="14" width="1" height="1" fill="#4d65b4"/>
112
+ <rect x="6" y="14" width="1" height="1" fill="#4d65b4"/>
113
+ <rect x="7" y="14" width="1" height="1" fill="#4d65b4"/>
114
+ <rect x="8" y="14" width="1" height="1" fill="#fcf3f3"/>
115
+ <rect x="9" y="14" width="1" height="1" fill="#ffffff"/>
116
+ <rect x="10" y="14" width="1" height="1" fill="#ffffff"/>
117
+ <rect x="11" y="14" width="1" height="1" fill="#d6efff"/>
118
+ <rect x="12" y="14" width="1" height="1" fill="#4d65b4"/>
119
+ <rect x="13" y="14" width="1" height="1" fill="#4d65b4"/>
120
+ <rect x="14" y="14" width="1" height="1" fill="#4d65b4"/>
121
+ <rect x="15" y="14" width="1" height="1" fill="#fcf3f3"/>
122
+ <rect x="16" y="14" width="1" height="1" fill="#ffffff"/>
123
+ <rect x="17" y="14" width="1" height="1" fill="#8fd3ff"/>
124
+ <rect x="18" y="14" width="1" height="1" fill="#8fd3ff"/>
125
+ <rect x="19" y="14" width="1" height="1" fill="#8fd3ff"/>
126
+ <rect x="20" y="14" width="1" height="1" fill="#4d9be6"/>
127
+ <rect x="2" y="15" width="1" height="1" fill="#ffffff"/>
128
+ <rect x="3" y="15" width="1" height="1" fill="#ffffff"/>
129
+ <rect x="4" y="15" width="1" height="1" fill="#4d65b4"/>
130
+ <rect x="5" y="15" width="1" height="1" fill="#8fd3ff"/>
131
+ <rect x="6" y="15" width="1" height="1" fill="#ffffff"/>
132
+ <rect x="7" y="15" width="1" height="1" fill="#4d9be6"/>
133
+ <rect x="8" y="15" width="1" height="1" fill="#fcf3f3"/>
134
+ <rect x="9" y="15" width="1" height="1" fill="#ffffff"/>
135
+ <rect x="10" y="15" width="1" height="1" fill="#d6efff"/>
136
+ <rect x="11" y="15" width="1" height="1" fill="#fcf3f3"/>
137
+ <rect x="12" y="15" width="1" height="1" fill="#8fd3ff"/>
138
+ <rect x="13" y="15" width="1" height="1" fill="#ffffff"/>
139
+ <rect x="14" y="15" width="1" height="1" fill="#4d9be6"/>
140
+ <rect x="15" y="15" width="1" height="1" fill="#4d65b4"/>
141
+ <rect x="16" y="15" width="1" height="1" fill="#8fd3ff"/>
142
+ <rect x="17" y="15" width="1" height="1" fill="#8fd3ff"/>
143
+ <rect x="18" y="15" width="1" height="1" fill="#4d9be6"/>
144
+ <rect x="19" y="15" width="1" height="1" fill="#4d9be6"/>
145
+ <rect x="20" y="15" width="1" height="1" fill="#8fd3ff"/>
146
+ <rect x="21" y="15" width="1" height="1" fill="#8fd3ff"/>
147
+ <rect x="22" y="15" width="1" height="1" fill="#8fd3ff"/>
148
+ <rect x="2" y="16" width="1" height="1" fill="#ffffff"/>
149
+ <rect x="3" y="16" width="1" height="1" fill="#d6efff"/>
150
+ <rect x="4" y="16" width="1" height="1" fill="#ffffff"/>
151
+ <rect x="5" y="16" width="1" height="1" fill="#8fd3ff"/>
152
+ <rect x="6" y="16" width="1" height="1" fill="#8fd3ff"/>
153
+ <rect x="7" y="16" width="1" height="1" fill="#4d9be6"/>
154
+ <rect x="8" y="16" width="1" height="1" fill="#fcf3f3"/>
155
+ <rect x="9" y="16" width="1" height="1" fill="#fcf3f3"/>
156
+ <rect x="10" y="16" width="1" height="1" fill="#ffffff"/>
157
+ <rect x="11" y="16" width="1" height="1" fill="#fcf3f3"/>
158
+ <rect x="12" y="16" width="1" height="1" fill="#8fd3ff"/>
159
+ <rect x="13" y="16" width="1" height="1" fill="#8fd3ff"/>
160
+ <rect x="14" y="16" width="1" height="1" fill="#4d9be6"/>
161
+ <rect x="15" y="16" width="1" height="1" fill="#ffffff"/>
162
+ <rect x="16" y="16" width="1" height="1" fill="#d6efff"/>
163
+ <rect x="17" y="16" width="1" height="1" fill="#ffffff"/>
164
+ <rect x="18" y="16" width="1" height="1" fill="#8fd3ff"/>
165
+ <rect x="19" y="16" width="1" height="1" fill="#8fd3ff"/>
166
+ <rect x="20" y="16" width="1" height="1" fill="#4d9be6"/>
167
+ <rect x="21" y="16" width="1" height="1" fill="#8fd3ff"/>
168
+ <rect x="2" y="17" width="1" height="1" fill="#d6efff"/>
169
+ <rect x="3" y="17" width="1" height="1" fill="#d6efff"/>
170
+ <rect x="4" y="17" width="1" height="1" fill="#fcf3f3"/>
171
+ <rect x="5" y="17" width="1" height="1" fill="#ffffff"/>
172
+ <rect x="6" y="17" width="1" height="1" fill="#8fd3ff"/>
173
+ <rect x="7" y="17" width="1" height="1" fill="#ffffff"/>
174
+ <rect x="8" y="17" width="1" height="1" fill="#fcf3f3"/>
175
+ <rect x="9" y="17" width="1" height="1" fill="#fcf3f3"/>
176
+ <rect x="10" y="17" width="1" height="1" fill="#fcf3f3"/>
177
+ <rect x="11" y="17" width="1" height="1" fill="#fcf3f3"/>
178
+ <rect x="12" y="17" width="1" height="1" fill="#ffffff"/>
179
+ <rect x="13" y="17" width="1" height="1" fill="#8fd3ff"/>
180
+ <rect x="14" y="17" width="1" height="1" fill="#ffffff"/>
181
+ <rect x="15" y="17" width="1" height="1" fill="#fcf3f3"/>
182
+ <rect x="16" y="17" width="1" height="1" fill="#d6efff"/>
183
+ <rect x="17" y="17" width="1" height="1" fill="#8fd3ff"/>
184
+ <rect x="18" y="17" width="1" height="1" fill="#8fd3ff"/>
185
+ <rect x="19" y="17" width="1" height="1" fill="#4d9be6"/>
186
+ <rect x="3" y="18" width="1" height="1" fill="#d6efff"/>
187
+ <rect x="5" y="18" width="1" height="1" fill="#fcf3f3"/>
188
+ <rect x="6" y="18" width="1" height="1" fill="#fcf3f3"/>
189
+ <rect x="7" y="18" width="1" height="1" fill="#fcf3f3"/>
190
+ <rect x="8" y="18" width="1" height="1" fill="#fcf3f3"/>
191
+ <rect x="9" y="18" width="1" height="1" fill="#fcf3f3"/>
192
+ <rect x="10" y="18" width="1" height="1" fill="#fcf3f3"/>
193
+ <rect x="11" y="18" width="1" height="1" fill="#fcf3f3"/>
194
+ <rect x="12" y="18" width="1" height="1" fill="#fcf3f3"/>
195
+ <rect x="13" y="18" width="1" height="1" fill="#fcf3f3"/>
196
+ <rect x="14" y="18" width="1" height="1" fill="#fcf3f3"/>
197
+ <rect x="15" y="18" width="1" height="1" fill="#d6efff"/>
198
+ <rect x="16" y="18" width="1" height="1" fill="#d6efff"/>
199
+ <rect x="17" y="18" width="1" height="1" fill="#4d9be6"/>
200
+ <rect x="18" y="18" width="1" height="1" fill="#8fd3ff"/>
201
+ <rect x="19" y="18" width="1" height="1" fill="#8fd3ff"/>
202
+ <rect x="20" y="18" width="1" height="1" fill="#8fd3ff"/>
203
+ <rect x="3" y="19" width="1" height="1" fill="#d6efff"/>
204
+ <rect x="6" y="19" width="1" height="1" fill="#fcf3f3"/>
205
+ <rect x="7" y="19" width="1" height="1" fill="#fcf3f3"/>
206
+ <rect x="8" y="19" width="1" height="1" fill="#fcf3f3"/>
207
+ <rect x="9" y="19" width="1" height="1" fill="#fcf3f3"/>
208
+ <rect x="10" y="19" width="1" height="1" fill="#fcf3f3"/>
209
+ <rect x="11" y="19" width="1" height="1" fill="#fcf3f3"/>
210
+ <rect x="12" y="19" width="1" height="1" fill="#fcf3f3"/>
211
+ <rect x="13" y="19" width="1" height="1" fill="#fcf3f3"/>
212
+ <rect x="15" y="19" width="1" height="1" fill="#d6efff"/>
213
+ </svg>
package/src/public/index.html ADDED
@@ -0,0 +1,47 @@
1
+ <!doctype html>
2
+ <html lang="zh-CN">
3
+ <head>
4
+ <meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
5
+ <title>Corti · 头像画室</title><link rel="icon" type="image/svg+xml" href="/corti-cursor.svg"><link rel="stylesheet" href="/styles.css">
6
+ </head>
7
+ <body>
8
+ <header><div class="brand"><span class="brand-mark">C</span><b id="brand-title">Corti 的头像画室</b><span id="game-badge" class="game-badge" hidden>第 <b id="game-round">0</b> 局</span></div><div class="header-actions"><span id="connection" class="pill">正在连接</span><a id="view-link" href="/overlay" target="_blank">直播画面 ↗</a></div></header>
9
+ <main>
10
+ <aside class="references panel free-only">
11
+ <div class="section-title"><h2>参考图队列</h2><span id="reference-count">0 / 64</span></div>
12
+ <label class="upload operator" id="dropzone"><span class="upload-plus">＋</span><strong>添加参考图</strong><small>点击、拖入或 Ctrl+V 粘贴图片<br>PNG / JPG · 单张 ≤ 10 MiB<br>最长边 4096 px</small><input id="files" type="file" accept="image/png,image/jpeg" multiple></label>
13
+ <div id="pending" class="pending operator"></div>
14
+ <div id="references" class="reference-list"></div>
15
+ </aside>
16
+ <section class="workspace">
17
+ <div class="board-heading"><div><h1 id="board-title">画布</h1><span id="board-meta" class="muted">尚未新建画布</span></div><div class="buttons operator"><button id="new" class="secondary">＋ 新建画布</button><button id="save" disabled>保存 PNG</button></div></div>
18
+ <div class="toolbar operator">
19
+ <label>工具<select id="brush"><option value="pen">普通笔</option><option value="marker">马克笔</option><option value="soft">软笔</option><option value="eraser">橡皮擦</option><option value="line">直线</option><option value="rect">矩形</option><option value="ellipse">椭圆</option><option value="fill">填充</option><option value="spray">喷漆</option></select></label>
20
+ <label>颜色<input id="color" type="color" value="#6d72b8"></label>
21
+ <label>笔宽<input id="size" type="range" min="1" max="128" value="8"><output id="size-value">8</output></label>
22
+ <label>透明度<input id="opacity" type="range" min="1" max="100" value="100"></label>
23
+ <label class="checkbox"><input id="filled" type="checkbox">实心图形</label>
24
+ </div>
25
+ <div id="timer" class="timer" hidden>
26
+ <div class="timer-ring"><svg viewBox="0 0 120 120" aria-hidden="true"><circle class="track" cx="60" cy="60" r="52"></circle><circle id="timer-arc" class="arc" cx="60" cy="60" r="52"></circle></svg><div id="timer-clock" class="timer-clock">5:00</div></div>
27
+ <div class="timer-side"><div id="timer-label" class="timer-label">猜猜我在画什么？</div><div id="timer-blanks" class="blanks"></div><div id="timer-hint" class="hint-chip" hidden></div></div>
28
+ </div>
29
+ <div class="stage">
30
+ <div id="empty-board"><p>请新建画布</p></div>
31
+ <div id="board-wrap" hidden><canvas id="canvas" aria-label="主画布"></canvas><div id="corti-cursor" class="cursor" data-mode="idle" hidden><span class="cursor-tip"></span><img src="/corti-cursor.svg" alt="可缇绘画光标"><span class="cursor-name">可缇</span></div></div>
32
+ <div id="reveal" class="reveal" hidden>
33
+ <div id="confetti" class="confetti" aria-hidden="true"></div>
34
+ <div class="reveal-card"><div class="reveal-kicker">本局谜底</div><div id="reveal-answer" class="reveal-answer" role="status" aria-live="polite"></div><ol id="reveal-winners" class="reveal-winners"></ol></div>
35
+ </div>
36
+ </div>
37
+ <footer class="board-footer"><span id="progress">就绪</span><span id="coordinates">左上角为 (0, 0)</span></footer>
38
+ <div id="message" role="status" aria-live="polite"></div>
39
+ </section>
40
+ <aside class="history panel free-only"><div class="section-title"><h2>绘制步骤</h2><span id="step-count">0 步</span></div><ol id="steps"></ol><p id="step-empty" class="muted empty-small">暂无绘制步骤</p></aside>
41
+ <aside class="scoreboard panel game-only"><div class="section-title"><h2>计分板</h2><span id="score-count"></span></div><ol id="ranks"></ol><p id="rank-empty" class="muted empty-small">还没有人得分<br>快在弹幕里猜吧！</p></aside>
42
+ </main>
43
+ <dialog id="new-dialog"><form id="new-form"><h2>新建画布</h2><label>作品标题<input id="title" maxlength="120" required placeholder="例如：小月的头像"></label><div class="dimension-fields"><label>宽度<input id="width" type="number" min="64" max="2048" value="1024" required></label><label>高度<input id="height" type="number" min="64" max="2048" value="1024" required></label><label>底色<input id="background" type="color" value="#ffffff"></label></div><p class="muted">当前画布会自动存档，参考图队列保留。</p><div class="buttons"><button type="button" id="cancel-new" class="secondary">取消</button><button type="submit">新建</button></div></form></dialog>
44
+ <dialog id="reference-dialog"><button id="close-reference" class="secondary close">关闭</button><h2 id="reference-title"></h2><img id="reference-image" alt="参考图原图"></dialog>
45
+ <script src="/app.js" defer></script>
46
+ </body>
47
+ </html>