@symbo.ls/connect 3.4.0 → 3.4.2
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.
- package/Artboard.png +0 -0
- package/SESSION_LOG.md +190 -0
- package/dist/manifest.json +1 -1
- package/dist/panel.css +737 -171
- package/dist/panel.html +49 -13
- package/dist/panel.js +1466 -157
- package/package.json +3 -3
- package/static/panel.css +737 -171
- package/static/panel.html +49 -13
- package/static/panel.js +1466 -157
package/dist/panel.html
CHANGED
|
@@ -66,10 +66,12 @@
|
|
|
66
66
|
<!-- Main App (hidden until connected) -->
|
|
67
67
|
<div id="app" style="display:none">
|
|
68
68
|
|
|
69
|
-
<!-- Top-level mode tabs
|
|
69
|
+
<!-- Top-level mode tabs -->
|
|
70
70
|
<div id="mode-tabs">
|
|
71
71
|
<button class="mode-tab active" data-mode="editor">Editor</button>
|
|
72
72
|
<button class="mode-tab" data-mode="chat">Chat</button>
|
|
73
|
+
<button class="mode-tab" data-mode="gallery">Gallery</button>
|
|
74
|
+
<button class="mode-tab" data-mode="content">Content</button>
|
|
73
75
|
<span class="mode-tab-spacer"></span>
|
|
74
76
|
<span id="app-connection-badge"></span>
|
|
75
77
|
<button id="btn-app-disconnect" title="Disconnect">✕</button>
|
|
@@ -85,7 +87,14 @@
|
|
|
85
87
|
<button id="btn-refresh" title="Refresh element tree">Refresh</button>
|
|
86
88
|
<button id="btn-undo" title="Undo last change (Ctrl+Z)" disabled>↩</button>
|
|
87
89
|
<button id="btn-redo" title="Redo (Ctrl+Shift+Z)" disabled>↪</button>
|
|
88
|
-
<
|
|
90
|
+
<div class="btn-sync-wrap">
|
|
91
|
+
<button id="btn-sync" class="btn-sync" title="Sync changes to source" style="display:none">Sync</button>
|
|
92
|
+
<button id="btn-sync-dropdown" class="btn-sync-dropdown" title="View pending changes" style="display:none">▾</button>
|
|
93
|
+
</div>
|
|
94
|
+
<div id="sync-changes-panel" class="sync-changes-panel" style="display:none">
|
|
95
|
+
<div class="sync-changes-header">Pending Changes <button id="sync-changes-close">×</button></div>
|
|
96
|
+
<div id="sync-changes-list"></div>
|
|
97
|
+
</div>
|
|
89
98
|
<span id="status"></span>
|
|
90
99
|
<button id="btn-reload" title="Reload panel">↻</button>
|
|
91
100
|
</div>
|
|
@@ -146,21 +155,21 @@
|
|
|
146
155
|
</div>
|
|
147
156
|
</div>
|
|
148
157
|
</div>
|
|
149
|
-
<!-- Editor AI bar -->
|
|
158
|
+
<!-- Editor AI bar (bottom) -->
|
|
150
159
|
<div id="ai-bar">
|
|
151
160
|
<div id="ai-result"></div>
|
|
152
161
|
<div id="ai-input-row">
|
|
162
|
+
<input id="ai-input" type="text" placeholder="Ask AI to modify components..." />
|
|
163
|
+
<div class="ai-scope-toggle" title="Scope">
|
|
164
|
+
<button class="ai-scope-btn active" data-scope="element">Element</button>
|
|
165
|
+
<button class="ai-scope-btn" data-scope="section">Section</button>
|
|
166
|
+
</div>
|
|
153
167
|
<select id="ai-model" class="ai-model-select" title="Select AI model">
|
|
154
168
|
<option value="Starter">Starter (free)</option>
|
|
155
169
|
<option value="claude">Claude</option>
|
|
156
170
|
<option value="chrome">Chrome AI (local)</option>
|
|
157
171
|
</select>
|
|
158
172
|
<button class="ai-settings-btn" title="AI settings" data-settings="ai">⚙</button>
|
|
159
|
-
<div class="ai-scope-toggle" title="Scope">
|
|
160
|
-
<button class="ai-scope-btn active" data-scope="element">Element</button>
|
|
161
|
-
<button class="ai-scope-btn" data-scope="section">Section</button>
|
|
162
|
-
</div>
|
|
163
|
-
<input id="ai-input" type="text" placeholder="Ask AI to modify components..." />
|
|
164
173
|
<button id="ai-send">Send</button>
|
|
165
174
|
</div>
|
|
166
175
|
</div>
|
|
@@ -188,21 +197,48 @@
|
|
|
188
197
|
<button id="chat-pick-element" class="chat-pick-btn" title="Pick an element to include as context">Select Element</button>
|
|
189
198
|
</div>
|
|
190
199
|
<div id="chat-input-row">
|
|
200
|
+
<input id="chat-input" type="text" placeholder="Describe what you want to change..." />
|
|
201
|
+
<div class="ai-scope-toggle" title="Scope">
|
|
202
|
+
<button class="ai-scope-btn active" data-scope="element">Element</button>
|
|
203
|
+
<button class="ai-scope-btn" data-scope="section">Section</button>
|
|
204
|
+
</div>
|
|
191
205
|
<select id="chat-model" class="ai-model-select" title="Select AI model">
|
|
192
206
|
<option value="Starter">Starter (free)</option>
|
|
193
207
|
<option value="claude">Claude</option>
|
|
194
208
|
<option value="chrome">Chrome AI (local)</option>
|
|
195
209
|
</select>
|
|
196
210
|
<button class="ai-settings-btn" title="AI settings" data-settings="ai">⚙</button>
|
|
197
|
-
<div class="ai-scope-toggle" title="Scope">
|
|
198
|
-
<button class="ai-scope-btn active" data-scope="element">Element</button>
|
|
199
|
-
<button class="ai-scope-btn" data-scope="section">Section</button>
|
|
200
|
-
</div>
|
|
201
|
-
<input id="chat-input" type="text" placeholder="Describe what you want to change..." />
|
|
202
211
|
<button id="chat-send">Send</button>
|
|
203
212
|
</div>
|
|
204
213
|
</div>
|
|
205
214
|
|
|
215
|
+
<!-- ============================================================
|
|
216
|
+
GALLERY MODE
|
|
217
|
+
============================================================ -->
|
|
218
|
+
<div id="mode-gallery" class="mode-panel">
|
|
219
|
+
<div id="gallery-toolbar">
|
|
220
|
+
<input id="gallery-search" type="text" placeholder="Search components..." class="gallery-search" />
|
|
221
|
+
</div>
|
|
222
|
+
<div id="gallery-pages" class="gallery-pages-row"></div>
|
|
223
|
+
<div id="gallery-container" class="gallery-grid"></div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<!-- ============================================================
|
|
227
|
+
CONTENT MODE
|
|
228
|
+
============================================================ -->
|
|
229
|
+
<div id="mode-content" class="mode-panel">
|
|
230
|
+
<div id="content-toolbar">
|
|
231
|
+
<select id="content-language" class="content-lang-select">
|
|
232
|
+
<option value="en">English (en)</option>
|
|
233
|
+
</select>
|
|
234
|
+
<button id="content-add-lang" class="content-add-lang-btn" title="Add language">+ Language</button>
|
|
235
|
+
</div>
|
|
236
|
+
<div id="content-body">
|
|
237
|
+
<div id="content-sidebar"></div>
|
|
238
|
+
<div id="content-main"></div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
206
242
|
</div>
|
|
207
243
|
|
|
208
244
|
<!-- AI Settings Dialog -->
|