@symbo.ls/connect 3.2.7

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 (77) hide show
  1. package/build.js +205 -0
  2. package/dist/assets/1024x1024.png +0 -0
  3. package/dist/assets/128x128.png +0 -0
  4. package/dist/assets/144x144.png +0 -0
  5. package/dist/assets/192x192.png +0 -0
  6. package/dist/assets/48x48.png +0 -0
  7. package/dist/assets/512x512.png +0 -0
  8. package/dist/assets/72x72.png +0 -0
  9. package/dist/assets/96x96.png +0 -0
  10. package/dist/assets/active_cursor.png +0 -0
  11. package/dist/assets/favicon.svg +6 -0
  12. package/dist/assets/old/144x144.png +0 -0
  13. package/dist/assets/old/192x192.png +0 -0
  14. package/dist/assets/old/48x48.png +0 -0
  15. package/dist/assets/old/48x48_faint.png +0 -0
  16. package/dist/assets/old/512x512.png +0 -0
  17. package/dist/assets/old/72x72.png +0 -0
  18. package/dist/assets/old/96x96.png +0 -0
  19. package/dist/auth.js +373 -0
  20. package/dist/content.css +46 -0
  21. package/dist/content.js +1171 -0
  22. package/dist/content.js.map +7 -0
  23. package/dist/devtools.html +7 -0
  24. package/dist/devtools.js +5 -0
  25. package/dist/manifest.json +87 -0
  26. package/dist/page-agent.js +727 -0
  27. package/dist/panel.css +2239 -0
  28. package/dist/panel.html +235 -0
  29. package/dist/panel.js +4973 -0
  30. package/dist/picker.html +111 -0
  31. package/dist/picker.js +300 -0
  32. package/dist/service_worker.js +219 -0
  33. package/dist/service_worker.js.map +7 -0
  34. package/dist/settings.css +128 -0
  35. package/dist/settings.html +26 -0
  36. package/dist/settings_ui.js +57 -0
  37. package/dist/settings_ui.js.map +7 -0
  38. package/package.json +20 -0
  39. package/src/content.js +104 -0
  40. package/src/grabber/clean.js +605 -0
  41. package/src/grabber/computed.js +78 -0
  42. package/src/grabber/parse.js +268 -0
  43. package/src/grabber/stylesheets.js +117 -0
  44. package/src/grabber/utils.js +238 -0
  45. package/src/service_worker.js +246 -0
  46. package/src/settings/settings_ui.js +52 -0
  47. package/src/settings/settings_utils.js +70 -0
  48. package/static/assets/1024x1024.png +0 -0
  49. package/static/assets/128x128.png +0 -0
  50. package/static/assets/144x144.png +0 -0
  51. package/static/assets/192x192.png +0 -0
  52. package/static/assets/48x48.png +0 -0
  53. package/static/assets/512x512.png +0 -0
  54. package/static/assets/72x72.png +0 -0
  55. package/static/assets/96x96.png +0 -0
  56. package/static/assets/active_cursor.png +0 -0
  57. package/static/assets/favicon.svg +6 -0
  58. package/static/assets/old/144x144.png +0 -0
  59. package/static/assets/old/192x192.png +0 -0
  60. package/static/assets/old/48x48.png +0 -0
  61. package/static/assets/old/48x48_faint.png +0 -0
  62. package/static/assets/old/512x512.png +0 -0
  63. package/static/assets/old/72x72.png +0 -0
  64. package/static/assets/old/96x96.png +0 -0
  65. package/static/auth.js +373 -0
  66. package/static/content.css +46 -0
  67. package/static/devtools.html +7 -0
  68. package/static/devtools.js +5 -0
  69. package/static/manifest.json +56 -0
  70. package/static/page-agent.js +727 -0
  71. package/static/panel.css +2239 -0
  72. package/static/panel.html +235 -0
  73. package/static/panel.js +4973 -0
  74. package/static/picker.html +111 -0
  75. package/static/picker.js +300 -0
  76. package/static/settings.css +128 -0
  77. package/static/settings.html +26 -0
package/static/panel.html ADDED
@@ -0,0 +1,235 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <link rel="stylesheet" href="panel.css">
6
+ </head>
7
+ <body>
8
+
9
+ <!-- Connect Screen -->
10
+ <div id="connect-screen">
11
+ <div class="connect-inner">
12
+ <div class="connect-logo"><svg viewBox="0 0 24 24"><path d="M13.843 2.7C19.063 2.7 23 6.366 23 11.228c0 3.754-2.862 6.584-6.658 6.584-3.287 0-5.007-2.318-5.007-4.609 0-2.395 1.923-4.344 4.287-4.344.566 0 1.023.12 1.309.223a.212.212 0 01.137.229l-.016.058-.514 1.18a.223.223 0 01-.245.13 2.965 2.965 0 00-.506-.046c-1.245 0-2.258 1.027-2.258 2.288 0 1.33 1.165 2.373 2.651 2.373 2.195 0 3.913-1.777 3.913-4.046 0-3.024-2.294-5.135-5.58-5.135-4.076 0-7.393 3.36-7.393 7.491a7.519 7.519 0 002.871 5.924l-4.96 3.18A12.042 12.042 0 012 14.7c0-6.617 5.313-12 11.843-12z" fill-rule="evenodd"/></svg></div>
13
+ <h1 class="connect-title">Symbols Connect</h1>
14
+ <p class="connect-desc">Connect to a project to inspect and edit DOMQL components</p>
15
+
16
+ <div id="connect-error" class="connect-error" style="display:none"></div>
17
+
18
+ <!-- Auth section -->
19
+ <div id="auth-section">
20
+ <div id="auth-signed-out">
21
+ <div id="auth-form" class="auth-form">
22
+ <button id="btn-sign-in-browser" class="auth-btn auth-btn-primary">Sign in via symbols.app</button>
23
+ <div id="auth-status" class="auth-status" style="display:none"></div>
24
+ <div class="auth-divider"><span>or sign in with email</span></div>
25
+ <input id="auth-email" type="email" placeholder="Email" class="auth-input" />
26
+ <input id="auth-password" type="password" placeholder="Password" class="auth-input" />
27
+ <button id="btn-sign-in" class="auth-btn">Sign In</button>
28
+ <div id="auth-error" class="auth-error" style="display:none"></div>
29
+ </div>
30
+ </div>
31
+ <div id="auth-signed-in" style="display:none">
32
+ <div class="auth-user-row">
33
+ <span id="auth-user-name" class="auth-user-name"></span>
34
+ <button id="btn-sign-out" class="auth-sign-out">Sign Out</button>
35
+ </div>
36
+ </div>
37
+ </div>
38
+
39
+ <div class="connect-options">
40
+ <button id="btn-connect-local" class="connect-btn">
41
+ <span class="connect-btn-icon">&#128193;</span>
42
+ <span class="connect-btn-label">Open Local Folder</span>
43
+ <span class="connect-btn-hint">Select a folder with symbols.json</span>
44
+ </button>
45
+
46
+ <button id="btn-connect-platform" class="connect-btn" style="display:none">
47
+ <span class="connect-btn-icon">&#9729;</span>
48
+ <span class="connect-btn-label">Connect Platform</span>
49
+ <span class="connect-btn-hint">symbols.app project</span>
50
+ </button>
51
+ </div>
52
+
53
+ <!-- Platform project list -->
54
+ <div id="platform-projects" class="connect-recent" style="display:none">
55
+ <div class="section-header">Your Projects</div>
56
+ <div id="project-list"></div>
57
+ </div>
58
+
59
+ <div id="connect-recent" class="connect-recent" style="display:none">
60
+ <div class="section-header">Recent</div>
61
+ <div id="recent-list"></div>
62
+ </div>
63
+ </div>
64
+ </div>
65
+
66
+ <!-- Main App (hidden until connected) -->
67
+ <div id="app" style="display:none">
68
+
69
+ <!-- Top-level mode tabs: Chat / Editor -->
70
+ <div id="mode-tabs">
71
+ <button class="mode-tab active" data-mode="editor">Editor</button>
72
+ <button class="mode-tab" data-mode="chat">Chat</button>
73
+ <span class="mode-tab-spacer"></span>
74
+ <span id="app-connection-badge"></span>
75
+ <button id="btn-app-disconnect" title="Disconnect">&#10005;</button>
76
+ </div>
77
+
78
+ <!-- ============================================================
79
+ EDITOR MODE
80
+ ============================================================ -->
81
+ <div id="mode-editor" class="mode-panel active">
82
+ <div id="toolbar">
83
+ <button id="btn-pick" title="Pick an element on the page">Pick Element</button>
84
+ <button id="btn-inspect" title="Inspect element selected in Elements panel ($0)">Inspect $0</button>
85
+ <button id="btn-refresh" title="Refresh element tree">Refresh</button>
86
+ <button id="btn-undo" title="Undo last change (Ctrl+Z)" disabled>&#8617;</button>
87
+ <button id="btn-redo" title="Redo (Ctrl+Shift+Z)" disabled>&#8618;</button>
88
+ <button id="btn-sync" class="btn-sync" title="Sync changes to source" style="display:none">Sync</button>
89
+ <span id="status"></span>
90
+ <button id="btn-reload" title="Reload panel">&#8635;</button>
91
+ </div>
92
+ <div id="main">
93
+ <div id="tree-pane">
94
+ <div id="tree-pane-tabs">
95
+ <button class="tree-pane-tab active" data-tree="nodes">Active Nodes</button>
96
+ <button class="tree-pane-tab" data-tree="state">State Tree</button>
97
+ <button class="tree-pane-tab" data-tree="designsystem">Design System</button>
98
+ </div>
99
+ <!-- Active nodes -->
100
+ <div id="active-section" class="tree-pane-panel active">
101
+ <div id="tree-container"></div>
102
+ </div>
103
+ <!-- State tree -->
104
+ <div id="state-tree-section" class="tree-pane-panel">
105
+ <div id="state-tree-container"></div>
106
+ </div>
107
+ <!-- Design system -->
108
+ <div id="design-system-section" class="tree-pane-panel">
109
+ <div id="design-system-container"></div>
110
+ </div>
111
+ <!-- Symbols context (bottom) -->
112
+ <div id="symbols-section" style="display:none">
113
+ <span class="tree-section-label">Symbols Context</span>
114
+ <div id="symbols-container"></div>
115
+ </div>
116
+ </div>
117
+ <div id="resizer"></div>
118
+ <div id="detail-pane">
119
+ <div id="detail-header">
120
+ <span id="detail-key">No element selected</span>
121
+ <span id="detail-tag"></span>
122
+ <span id="detail-path"></span>
123
+ </div>
124
+ <div id="detail-tabs">
125
+ <button class="tab active" data-tab="props">Props</button>
126
+ <button class="tab" data-tab="state">State</button>
127
+ <button class="tab" data-tab="children">Children</button>
128
+ <button class="tab" data-tab="ref">__ref</button>
129
+ <button class="tab" data-tab="source" style="display:none">Source</button>
130
+ <span class="tab-spacer"></span>
131
+ </div>
132
+ <div id="detail-content">
133
+ <div id="tab-props" class="tab-panel active">
134
+ <div id="props-subtabs">
135
+ <button class="props-subtab active" data-propview="computed">Computed</button>
136
+ <button class="props-subtab" data-propview="original">Original</button>
137
+ </div>
138
+ <div id="props-computed" class="props-subpanel active"></div>
139
+ <div id="props-original" class="props-subpanel"></div>
140
+ </div>
141
+ <div id="tab-state" class="tab-panel"></div>
142
+ <div id="tab-children" class="tab-panel"></div>
143
+ <div id="tab-ref" class="tab-panel"></div>
144
+ <div id="tab-source" class="tab-panel"></div>
145
+ <div id="tab-methods" class="tab-panel"></div>
146
+ </div>
147
+ </div>
148
+ </div>
149
+ <!-- Editor AI bar -->
150
+ <div id="ai-bar">
151
+ <div id="ai-result"></div>
152
+ <div id="ai-input-row">
153
+ <select id="ai-model" class="ai-model-select" title="Select AI model">
154
+ <option value="Starter">Starter (free)</option>
155
+ <option value="claude">Claude</option>
156
+ <option value="chrome">Chrome AI (local)</option>
157
+ </select>
158
+ <button class="ai-settings-btn" title="AI settings" data-settings="ai">&#9881;</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
+ <button id="ai-send">Send</button>
165
+ </div>
166
+ </div>
167
+ </div>
168
+
169
+ <!-- ============================================================
170
+ CHAT MODE
171
+ ============================================================ -->
172
+ <div id="mode-chat" class="mode-panel">
173
+ <div id="chat-threads-bar">
174
+ <div id="chat-threads-list"></div>
175
+ <button id="chat-thread-history" title="Thread history">&#9776;</button>
176
+ <button id="chat-new-thread" title="New thread">+ New</button>
177
+ </div>
178
+ <div id="chat-thread-history-panel" style="display:none">
179
+ <div class="thread-history-header">
180
+ <span>Thread History</span>
181
+ <button id="chat-thread-history-close">&times;</button>
182
+ </div>
183
+ <div id="chat-thread-history-list"></div>
184
+ </div>
185
+ <div id="chat-messages"></div>
186
+ <div id="chat-context-bar">
187
+ <span id="chat-context-label" class="chat-context-label">No element selected</span>
188
+ <button id="chat-pick-element" class="chat-pick-btn" title="Pick an element to include as context">Select Element</button>
189
+ </div>
190
+ <div id="chat-input-row">
191
+ <select id="chat-model" class="ai-model-select" title="Select AI model">
192
+ <option value="Starter">Starter (free)</option>
193
+ <option value="claude">Claude</option>
194
+ <option value="chrome">Chrome AI (local)</option>
195
+ </select>
196
+ <button class="ai-settings-btn" title="AI settings" data-settings="ai">&#9881;</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
+ <button id="chat-send">Send</button>
203
+ </div>
204
+ </div>
205
+
206
+ </div>
207
+
208
+ <!-- AI Settings Dialog -->
209
+ <div id="ai-settings-dialog" class="ai-dialog-overlay" style="display:none">
210
+ <div class="ai-dialog">
211
+ <div class="ai-dialog-header">
212
+ <span>AI Settings</span>
213
+ <button id="ai-dialog-close">&times;</button>
214
+ </div>
215
+ <div class="ai-dialog-body">
216
+ <div class="ai-dialog-section">
217
+ <div class="ai-dialog-label">Claude API</div>
218
+ <p class="ai-dialog-hint">Sign in to symbols.app to use Claude via the platform, or enter your own Anthropic API key.</p>
219
+ <div id="ai-dialog-auth-status" class="ai-dialog-auth-status"></div>
220
+ <div class="ai-dialog-field">
221
+ <label>Anthropic API Key</label>
222
+ <input id="ai-key-anthropic" type="password" placeholder="sk-ant-..." class="ai-dialog-input" />
223
+ </div>
224
+ </div>
225
+ <div class="ai-dialog-actions">
226
+ <button id="ai-dialog-save" class="ai-dialog-save">Save</button>
227
+ </div>
228
+ </div>
229
+ </div>
230
+ </div>
231
+
232
+ <script src="auth.js"></script>
233
+ <script src="panel.js"></script>
234
+ </body>
235
+ </html>