@mp3wizard/figma-console-mcp 1.25.1 → 1.27.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.
Files changed (205) hide show
  1. package/README.md +49 -33
  2. package/dist/cloudflare/core/config.js +0 -8
  3. package/dist/cloudflare/core/console-monitor.js +3 -3
  4. package/dist/cloudflare/core/diagnose-tool.js +96 -0
  5. package/dist/cloudflare/core/figma-tools.js +69 -229
  6. package/dist/cloudflare/core/identity.js +96 -0
  7. package/dist/cloudflare/core/tokens/alias-resolver.js +98 -0
  8. package/dist/cloudflare/core/tokens/config.js +284 -0
  9. package/dist/cloudflare/core/tokens/figma-converter.js +195 -0
  10. package/dist/cloudflare/core/tokens/formatters/css-vars.js +329 -0
  11. package/dist/cloudflare/core/tokens/formatters/dtcg.js +300 -0
  12. package/dist/cloudflare/core/tokens/formatters/index.js +45 -0
  13. package/dist/cloudflare/core/tokens/formatters/json.js +7 -0
  14. package/dist/cloudflare/core/tokens/formatters/less.js +4 -0
  15. package/dist/cloudflare/core/tokens/formatters/scss.js +4 -0
  16. package/dist/cloudflare/core/tokens/formatters/stubs.js +11 -0
  17. package/dist/cloudflare/core/tokens/formatters/style-dictionary-v3.js +4 -0
  18. package/dist/cloudflare/core/tokens/formatters/tailwind-v3.js +4 -0
  19. package/dist/cloudflare/core/tokens/formatters/tailwind-v4.js +4 -0
  20. package/dist/cloudflare/core/tokens/formatters/tokens-studio.js +4 -0
  21. package/dist/cloudflare/core/tokens/formatters/ts-module.js +4 -0
  22. package/dist/cloudflare/core/tokens/index.js +15 -0
  23. package/dist/cloudflare/core/tokens/parsers/css-vars.js +4 -0
  24. package/dist/cloudflare/core/tokens/parsers/dtcg.js +253 -0
  25. package/dist/cloudflare/core/tokens/parsers/index.js +138 -0
  26. package/dist/cloudflare/core/tokens/parsers/json.js +7 -0
  27. package/dist/cloudflare/core/tokens/parsers/scss.js +4 -0
  28. package/dist/cloudflare/core/tokens/parsers/stubs.js +13 -0
  29. package/dist/cloudflare/core/tokens/parsers/style-dictionary-v3.js +4 -0
  30. package/dist/cloudflare/core/tokens/parsers/tailwind-v3.js +4 -0
  31. package/dist/cloudflare/core/tokens/parsers/tailwind-v4.js +4 -0
  32. package/dist/cloudflare/core/tokens/parsers/tokens-studio.js +4 -0
  33. package/dist/cloudflare/core/tokens/schemas.js +148 -0
  34. package/dist/cloudflare/core/tokens/transforms/color.js +12 -0
  35. package/dist/cloudflare/core/tokens/transforms/index.js +29 -0
  36. package/dist/cloudflare/core/tokens/transforms/size.js +7 -0
  37. package/dist/cloudflare/core/tokens/types.js +18 -0
  38. package/dist/cloudflare/core/tokens-tools.js +849 -0
  39. package/dist/cloudflare/core/websocket-server.js +5 -55
  40. package/dist/cloudflare/index.js +37 -26
  41. package/dist/core/config.d.ts.map +1 -1
  42. package/dist/core/config.js +0 -8
  43. package/dist/core/config.js.map +1 -1
  44. package/dist/core/console-monitor.d.ts +2 -2
  45. package/dist/core/console-monitor.d.ts.map +1 -1
  46. package/dist/core/console-monitor.js +3 -3
  47. package/dist/core/console-monitor.js.map +1 -1
  48. package/dist/core/diagnose-tool.d.ts +33 -0
  49. package/dist/core/diagnose-tool.d.ts.map +1 -0
  50. package/dist/core/diagnose-tool.js +97 -0
  51. package/dist/core/diagnose-tool.js.map +1 -0
  52. package/dist/core/figma-connector.d.ts +1 -1
  53. package/dist/core/figma-connector.d.ts.map +1 -1
  54. package/dist/core/figma-tools.d.ts +1 -2
  55. package/dist/core/figma-tools.d.ts.map +1 -1
  56. package/dist/core/figma-tools.js +69 -229
  57. package/dist/core/figma-tools.js.map +1 -1
  58. package/dist/core/identity.d.ts +41 -0
  59. package/dist/core/identity.d.ts.map +1 -0
  60. package/dist/core/identity.js +97 -0
  61. package/dist/core/identity.js.map +1 -0
  62. package/dist/core/tokens/alias-resolver.d.ts +40 -0
  63. package/dist/core/tokens/alias-resolver.d.ts.map +1 -0
  64. package/dist/core/tokens/alias-resolver.js +99 -0
  65. package/dist/core/tokens/alias-resolver.js.map +1 -0
  66. package/dist/core/tokens/config.d.ts +352 -0
  67. package/dist/core/tokens/config.d.ts.map +1 -0
  68. package/dist/core/tokens/config.js +285 -0
  69. package/dist/core/tokens/config.js.map +1 -0
  70. package/dist/core/tokens/figma-converter.d.ts +81 -0
  71. package/dist/core/tokens/figma-converter.d.ts.map +1 -0
  72. package/dist/core/tokens/figma-converter.js +196 -0
  73. package/dist/core/tokens/figma-converter.js.map +1 -0
  74. package/dist/core/tokens/formatters/css-vars.d.ts +24 -0
  75. package/dist/core/tokens/formatters/css-vars.d.ts.map +1 -0
  76. package/dist/core/tokens/formatters/css-vars.js +330 -0
  77. package/dist/core/tokens/formatters/css-vars.js.map +1 -0
  78. package/dist/core/tokens/formatters/dtcg.d.ts +28 -0
  79. package/dist/core/tokens/formatters/dtcg.d.ts.map +1 -0
  80. package/dist/core/tokens/formatters/dtcg.js +301 -0
  81. package/dist/core/tokens/formatters/dtcg.js.map +1 -0
  82. package/dist/core/tokens/formatters/index.d.ts +30 -0
  83. package/dist/core/tokens/formatters/index.d.ts.map +1 -0
  84. package/dist/core/tokens/formatters/index.js +46 -0
  85. package/dist/core/tokens/formatters/index.js.map +1 -0
  86. package/dist/core/tokens/formatters/json.d.ts +5 -0
  87. package/dist/core/tokens/formatters/json.d.ts.map +1 -0
  88. package/dist/core/tokens/formatters/json.js +8 -0
  89. package/dist/core/tokens/formatters/json.js.map +1 -0
  90. package/dist/core/tokens/formatters/less.d.ts +4 -0
  91. package/dist/core/tokens/formatters/less.d.ts.map +1 -0
  92. package/dist/core/tokens/formatters/less.js +5 -0
  93. package/dist/core/tokens/formatters/less.js.map +1 -0
  94. package/dist/core/tokens/formatters/scss.d.ts +4 -0
  95. package/dist/core/tokens/formatters/scss.d.ts.map +1 -0
  96. package/dist/core/tokens/formatters/scss.js +5 -0
  97. package/dist/core/tokens/formatters/scss.js.map +1 -0
  98. package/dist/core/tokens/formatters/stubs.d.ts +9 -0
  99. package/dist/core/tokens/formatters/stubs.d.ts.map +1 -0
  100. package/dist/core/tokens/formatters/stubs.js +12 -0
  101. package/dist/core/tokens/formatters/stubs.js.map +1 -0
  102. package/dist/core/tokens/formatters/style-dictionary-v3.d.ts +4 -0
  103. package/dist/core/tokens/formatters/style-dictionary-v3.d.ts.map +1 -0
  104. package/dist/core/tokens/formatters/style-dictionary-v3.js +5 -0
  105. package/dist/core/tokens/formatters/style-dictionary-v3.js.map +1 -0
  106. package/dist/core/tokens/formatters/tailwind-v3.d.ts +4 -0
  107. package/dist/core/tokens/formatters/tailwind-v3.d.ts.map +1 -0
  108. package/dist/core/tokens/formatters/tailwind-v3.js +5 -0
  109. package/dist/core/tokens/formatters/tailwind-v3.js.map +1 -0
  110. package/dist/core/tokens/formatters/tailwind-v4.d.ts +4 -0
  111. package/dist/core/tokens/formatters/tailwind-v4.d.ts.map +1 -0
  112. package/dist/core/tokens/formatters/tailwind-v4.js +5 -0
  113. package/dist/core/tokens/formatters/tailwind-v4.js.map +1 -0
  114. package/dist/core/tokens/formatters/tokens-studio.d.ts +4 -0
  115. package/dist/core/tokens/formatters/tokens-studio.d.ts.map +1 -0
  116. package/dist/core/tokens/formatters/tokens-studio.js +5 -0
  117. package/dist/core/tokens/formatters/tokens-studio.js.map +1 -0
  118. package/dist/core/tokens/formatters/ts-module.d.ts +4 -0
  119. package/dist/core/tokens/formatters/ts-module.d.ts.map +1 -0
  120. package/dist/core/tokens/formatters/ts-module.js +5 -0
  121. package/dist/core/tokens/formatters/ts-module.js.map +1 -0
  122. package/dist/core/tokens/index.d.ts +17 -0
  123. package/dist/core/tokens/index.d.ts.map +1 -0
  124. package/dist/core/tokens/index.js +16 -0
  125. package/dist/core/tokens/index.js.map +1 -0
  126. package/dist/core/tokens/parsers/css-vars.d.ts +3 -0
  127. package/dist/core/tokens/parsers/css-vars.d.ts.map +1 -0
  128. package/dist/core/tokens/parsers/css-vars.js +5 -0
  129. package/dist/core/tokens/parsers/css-vars.js.map +1 -0
  130. package/dist/core/tokens/parsers/dtcg.d.ts +21 -0
  131. package/dist/core/tokens/parsers/dtcg.d.ts.map +1 -0
  132. package/dist/core/tokens/parsers/dtcg.js +254 -0
  133. package/dist/core/tokens/parsers/dtcg.js.map +1 -0
  134. package/dist/core/tokens/parsers/index.d.ts +37 -0
  135. package/dist/core/tokens/parsers/index.d.ts.map +1 -0
  136. package/dist/core/tokens/parsers/index.js +139 -0
  137. package/dist/core/tokens/parsers/index.js.map +1 -0
  138. package/dist/core/tokens/parsers/json.d.ts +4 -0
  139. package/dist/core/tokens/parsers/json.d.ts.map +1 -0
  140. package/dist/core/tokens/parsers/json.js +8 -0
  141. package/dist/core/tokens/parsers/json.js.map +1 -0
  142. package/dist/core/tokens/parsers/scss.d.ts +3 -0
  143. package/dist/core/tokens/parsers/scss.d.ts.map +1 -0
  144. package/dist/core/tokens/parsers/scss.js +5 -0
  145. package/dist/core/tokens/parsers/scss.js.map +1 -0
  146. package/dist/core/tokens/parsers/stubs.d.ts +11 -0
  147. package/dist/core/tokens/parsers/stubs.d.ts.map +1 -0
  148. package/dist/core/tokens/parsers/stubs.js +14 -0
  149. package/dist/core/tokens/parsers/stubs.js.map +1 -0
  150. package/dist/core/tokens/parsers/style-dictionary-v3.d.ts +3 -0
  151. package/dist/core/tokens/parsers/style-dictionary-v3.d.ts.map +1 -0
  152. package/dist/core/tokens/parsers/style-dictionary-v3.js +5 -0
  153. package/dist/core/tokens/parsers/style-dictionary-v3.js.map +1 -0
  154. package/dist/core/tokens/parsers/tailwind-v3.d.ts +3 -0
  155. package/dist/core/tokens/parsers/tailwind-v3.d.ts.map +1 -0
  156. package/dist/core/tokens/parsers/tailwind-v3.js +5 -0
  157. package/dist/core/tokens/parsers/tailwind-v3.js.map +1 -0
  158. package/dist/core/tokens/parsers/tailwind-v4.d.ts +3 -0
  159. package/dist/core/tokens/parsers/tailwind-v4.d.ts.map +1 -0
  160. package/dist/core/tokens/parsers/tailwind-v4.js +5 -0
  161. package/dist/core/tokens/parsers/tailwind-v4.js.map +1 -0
  162. package/dist/core/tokens/parsers/tokens-studio.d.ts +3 -0
  163. package/dist/core/tokens/parsers/tokens-studio.d.ts.map +1 -0
  164. package/dist/core/tokens/parsers/tokens-studio.js +5 -0
  165. package/dist/core/tokens/parsers/tokens-studio.js.map +1 -0
  166. package/dist/core/tokens/schemas.d.ts +152 -0
  167. package/dist/core/tokens/schemas.d.ts.map +1 -0
  168. package/dist/core/tokens/schemas.js +149 -0
  169. package/dist/core/tokens/schemas.js.map +1 -0
  170. package/dist/core/tokens/transforms/color.d.ts +9 -0
  171. package/dist/core/tokens/transforms/color.d.ts.map +1 -0
  172. package/dist/core/tokens/transforms/color.js +13 -0
  173. package/dist/core/tokens/transforms/color.js.map +1 -0
  174. package/dist/core/tokens/transforms/index.d.ts +36 -0
  175. package/dist/core/tokens/transforms/index.d.ts.map +1 -0
  176. package/dist/core/tokens/transforms/index.js +30 -0
  177. package/dist/core/tokens/transforms/index.js.map +1 -0
  178. package/dist/core/tokens/transforms/size.d.ts +7 -0
  179. package/dist/core/tokens/transforms/size.d.ts.map +1 -0
  180. package/dist/core/tokens/transforms/size.js +8 -0
  181. package/dist/core/tokens/transforms/size.js.map +1 -0
  182. package/dist/core/tokens/types.d.ts +228 -0
  183. package/dist/core/tokens/types.d.ts.map +1 -0
  184. package/dist/core/tokens/types.js +19 -0
  185. package/dist/core/tokens/types.js.map +1 -0
  186. package/dist/core/tokens-tools.d.ts +42 -0
  187. package/dist/core/tokens-tools.d.ts.map +1 -0
  188. package/dist/core/tokens-tools.js +850 -0
  189. package/dist/core/tokens-tools.js.map +1 -0
  190. package/dist/core/types/index.d.ts +0 -8
  191. package/dist/core/types/index.d.ts.map +1 -1
  192. package/dist/core/websocket-connector.d.ts +1 -1
  193. package/dist/core/websocket-connector.d.ts.map +1 -1
  194. package/dist/core/websocket-server.d.ts +4 -3
  195. package/dist/core/websocket-server.d.ts.map +1 -1
  196. package/dist/core/websocket-server.js +5 -55
  197. package/dist/core/websocket-server.js.map +1 -1
  198. package/dist/local.d.ts +0 -12
  199. package/dist/local.d.ts.map +1 -1
  200. package/dist/local.js +959 -3406
  201. package/dist/local.js.map +1 -1
  202. package/figma-desktop-bridge/code.js +11 -63
  203. package/figma-desktop-bridge/ui.html +72 -11
  204. package/package.json +10 -9
  205. package/figma-desktop-bridge/ui-full.html +0 -1353
package/figma-desktop-bridge/ui-full.html DELETED
@@ -1,1353 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
- <head>
4
- <meta charset="UTF-8">
5
- <style>
6
- * {
7
- box-sizing: border-box;
8
- margin: 0;
9
- padding: 0;
10
- }
11
-
12
- body {
13
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14
- font-size: 11px;
15
- background: var(--figma-color-bg, #2c2c2c);
16
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
17
- height: 100%;
18
- display: flex;
19
- align-items: center;
20
- justify-content: center;
21
- padding: 6px 8px;
22
- user-select: none;
23
- }
24
-
25
- .bridge-status {
26
- display: flex;
27
- align-items: center;
28
- gap: 6px;
29
- padding: 4px 8px;
30
- background: var(--figma-color-bg-secondary, #383838);
31
- border: 1px solid var(--figma-color-border, #4a4a4a);
32
- border-radius: 4px;
33
- white-space: nowrap;
34
- }
35
-
36
- .status-indicator {
37
- width: 8px;
38
- height: 8px;
39
- border-radius: 50%;
40
- flex-shrink: 0;
41
- }
42
-
43
- .status-indicator.loading {
44
- background: #f5a623;
45
- animation: pulse 1.5s ease-in-out infinite;
46
- }
47
-
48
- .status-indicator.active {
49
- background: #18a957;
50
- box-shadow: 0 0 6px rgba(24, 169, 87, 0.6);
51
- animation: glow 2s ease-in-out infinite;
52
- }
53
-
54
- .status-indicator.error {
55
- background: #f24822;
56
- }
57
-
58
- @keyframes pulse {
59
- 0%, 100% { opacity: 0.4; }
60
- 50% { opacity: 1; }
61
- }
62
-
63
- @keyframes glow {
64
- 0%, 100% { box-shadow: 0 0 4px rgba(24, 169, 87, 0.4); }
65
- 50% { box-shadow: 0 0 8px rgba(24, 169, 87, 0.8); }
66
- }
67
-
68
- .status-text {
69
- font-weight: 500;
70
- letter-spacing: 0.2px;
71
- }
72
-
73
- .status-text .label {
74
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
75
- }
76
-
77
- .status-text .state {
78
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
79
- margin-left: 4px;
80
- }
81
-
82
- /* Cloud Mode toggle */
83
- .cloud-section {
84
- display: none;
85
- width: 100%;
86
- }
87
-
88
- .cloud-section.visible {
89
- display: flex;
90
- flex-direction: column;
91
- gap: 6px;
92
- margin-top: 6px;
93
- }
94
-
95
- .cloud-toggle {
96
- display: flex;
97
- align-items: center;
98
- gap: 3px;
99
- cursor: pointer;
100
- font-size: 10px;
101
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
102
- user-select: none;
103
- margin-top: 2px;
104
- }
105
-
106
- .cloud-toggle:hover {
107
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
108
- }
109
-
110
- .cloud-toggle .chevron {
111
- display: inline-block;
112
- font-size: 8px;
113
- transition: transform 0.15s ease;
114
- }
115
-
116
- .cloud-toggle.expanded .chevron {
117
- transform: rotate(90deg);
118
- }
119
-
120
- .cloud-input-row input {
121
- width: 100%;
122
- background: var(--figma-color-bg, #2c2c2c);
123
- border: 1px solid var(--figma-color-border, #4a4a4a);
124
- border-radius: 3px;
125
- color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
126
- font-family: monospace;
127
- font-size: 12px;
128
- padding: 4px 6px;
129
- text-transform: uppercase;
130
- letter-spacing: 3px;
131
- text-align: center;
132
- box-sizing: border-box;
133
- }
134
-
135
- .cloud-input-row input::placeholder {
136
- text-transform: none;
137
- letter-spacing: normal;
138
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
139
- font-size: 10px;
140
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.3));
141
- }
142
-
143
- .cloud-input-row button {
144
- width: 100%;
145
- background: var(--figma-color-bg-brand, #0d99ff);
146
- color: #fff;
147
- border: none;
148
- border-radius: 3px;
149
- font-size: 10px;
150
- font-weight: 500;
151
- padding: 5px 8px;
152
- cursor: pointer;
153
- }
154
-
155
- .cloud-input-row button:disabled {
156
- opacity: 0.5;
157
- cursor: default;
158
- }
159
-
160
- .cloud-status {
161
- font-size: 9px;
162
- color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.5));
163
- text-align: center;
164
- }
165
-
166
- .cloud-status.connected {
167
- color: #18a957;
168
- }
169
-
170
- .cloud-status.error {
171
- color: #f24822;
172
- }
173
-
174
- /* Light theme support */
175
- @media (prefers-color-scheme: light) {
176
- body {
177
- background: #f5f5f5;
178
- color: #333;
179
- }
180
- .bridge-status {
181
- background: #fff;
182
- border-color: #e5e5e5;
183
- }
184
- .status-text .label {
185
- color: #666;
186
- }
187
- .status-text .state {
188
- color: #333;
189
- }
190
- }
191
- </style>
192
- </head>
193
- <body>
194
- <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
195
- <div class="bridge-status" id="status-container">
196
- <div class="status-indicator loading" id="status-dot"></div>
197
- <div class="status-text">
198
- <span class="label">MCP</span>
199
- <span class="state" id="status-state">connecting</span>
200
- </div>
201
- </div>
202
-
203
- <div class="cloud-toggle" id="cloud-toggle" onclick="toggleCloudSection()">
204
- <span class="chevron">▶</span> Cloud Mode
205
- </div>
206
-
207
- <div class="cloud-section" id="cloud-section">
208
- <div class="cloud-input-row">
209
- <input type="text" id="cloud-code" maxlength="6" placeholder="Pairing code" autocomplete="off" />
210
- </div>
211
- <div class="cloud-input-row">
212
- <button id="cloud-btn" onclick="cloudConnect()">Connect</button>
213
- </div>
214
- <div class="cloud-status" id="cloud-status"></div>
215
- </div>
216
- </div>
217
-
218
- <script>
219
- // ============================================================================
220
- // GLOBAL STATE - Data storage for Puppeteer/MCP access
221
- // ============================================================================
222
- window.__figmaVariablesData = null;
223
- window.__figmaVariablesReady = false;
224
- window.__figmaComponentData = null;
225
- window.__figmaComponentRequests = new Map();
226
- window.__figmaPendingRequests = new Map();
227
-
228
- let requestIdCounter = 0;
229
-
230
- // UI update helper
231
- function updateStatus(state, isActive, isError) {
232
- const dot = document.getElementById('status-dot');
233
- const stateText = document.getElementById('status-state');
234
-
235
- dot.className = 'status-indicator ' + (isError ? 'error' : (isActive ? 'active' : 'loading'));
236
- stateText.textContent = state;
237
- }
238
-
239
- // ============================================================================
240
- // COMMAND INFRASTRUCTURE - Generic plugin command sender
241
- // ============================================================================
242
- window.sendPluginCommand = (type, params, timeoutMs) => {
243
- timeoutMs = timeoutMs || 15000;
244
- return new Promise((resolve, reject) => {
245
- const requestId = type.toLowerCase() + '_' + (++requestIdCounter) + '_' + Date.now();
246
-
247
- const timeoutId = setTimeout(() => {
248
- if (window.__figmaPendingRequests.has(requestId)) {
249
- window.__figmaPendingRequests.delete(requestId);
250
- reject(new Error(type + ' request timed out after ' + timeoutMs + 'ms'));
251
- }
252
- }, timeoutMs);
253
-
254
- window.__figmaPendingRequests.set(requestId, { resolve: resolve, reject: reject, type: type, timeoutId: timeoutId });
255
-
256
- var message = { type: type, requestId: requestId };
257
- for (var key in params) {
258
- if (params.hasOwnProperty(key)) {
259
- message[key] = params[key];
260
- }
261
- }
262
-
263
- parent.postMessage({ pluginMessage: message }, '*');
264
- console.log('[MCP Bridge] Sent:', type);
265
- });
266
- };
267
-
268
- // ============================================================================
269
- // VARIABLE OPERATIONS
270
- // ============================================================================
271
-
272
- window.executeCode = (code, timeout) => {
273
- return window.sendPluginCommand('EXECUTE_CODE', { code: code, timeout: timeout || 5000 }, (timeout || 5000) + 2000)
274
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
275
- };
276
-
277
- window.updateVariable = (variableId, modeId, value) => {
278
- return window.sendPluginCommand('UPDATE_VARIABLE', { variableId: variableId, modeId: modeId, value: value })
279
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
280
- };
281
-
282
- window.createVariable = (name, collectionId, resolvedType, options) => {
283
- var params = { name: name, collectionId: collectionId, resolvedType: resolvedType };
284
- if (options) {
285
- if (options.valuesByMode) params.valuesByMode = options.valuesByMode;
286
- if (options.description) params.description = options.description;
287
- if (options.scopes) params.scopes = options.scopes;
288
- }
289
- return window.sendPluginCommand('CREATE_VARIABLE', params)
290
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
291
- };
292
-
293
- window.createVariableCollection = (name, options) => {
294
- var params = { name: name };
295
- if (options) {
296
- if (options.initialModeName) params.initialModeName = options.initialModeName;
297
- if (options.additionalModes) params.additionalModes = options.additionalModes;
298
- }
299
- return window.sendPluginCommand('CREATE_VARIABLE_COLLECTION', params)
300
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
301
- };
302
-
303
- window.deleteVariable = (variableId) => {
304
- return window.sendPluginCommand('DELETE_VARIABLE', { variableId: variableId })
305
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
306
- };
307
-
308
- window.deleteVariableCollection = (collectionId) => {
309
- return window.sendPluginCommand('DELETE_VARIABLE_COLLECTION', { collectionId: collectionId })
310
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
311
- };
312
-
313
- window.renameVariable = (variableId, newName) => {
314
- return window.sendPluginCommand('RENAME_VARIABLE', { variableId: variableId, newName: newName })
315
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
316
- };
317
-
318
- window.setVariableDescription = (variableId, description) => {
319
- return window.sendPluginCommand('SET_VARIABLE_DESCRIPTION', { variableId: variableId, description: description })
320
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
321
- };
322
-
323
- window.addMode = (collectionId, modeName) => {
324
- return window.sendPluginCommand('ADD_MODE', { collectionId: collectionId, modeName: modeName })
325
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
326
- };
327
-
328
- window.renameMode = (collectionId, modeId, newName) => {
329
- return window.sendPluginCommand('RENAME_MODE', { collectionId: collectionId, modeId: modeId, newName: newName })
330
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
331
- };
332
-
333
- window.refreshVariables = () => {
334
- return window.sendPluginCommand('REFRESH_VARIABLES', {}, 300000)
335
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
336
- };
337
-
338
- // ============================================================================
339
- // COMPONENT OPERATIONS
340
- // ============================================================================
341
-
342
- window.getLocalComponents = () => {
343
- return window.sendPluginCommand('GET_LOCAL_COMPONENTS', {}, 300000)
344
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
345
- };
346
-
347
- window.instantiateComponent = (componentKey, options) => {
348
- var params = { componentKey: componentKey };
349
- if (options) {
350
- if (options.nodeId) params.nodeId = options.nodeId;
351
- if (options.position) params.position = options.position;
352
- if (options.size) params.size = options.size;
353
- if (options.overrides) params.overrides = options.overrides;
354
- if (options.variant) params.variant = options.variant;
355
- if (options.parentId) params.parentId = options.parentId;
356
- }
357
- return window.sendPluginCommand('INSTANTIATE_COMPONENT', params)
358
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
359
- };
360
-
361
- window.requestComponentData = (nodeId) => {
362
- return new Promise((resolve, reject) => {
363
- const requestId = 'component_' + (++requestIdCounter) + '_' + Date.now();
364
- window.__figmaComponentRequests.set(requestId, { resolve: resolve, reject: reject });
365
- parent.postMessage({ pluginMessage: { type: 'GET_COMPONENT', requestId: requestId, nodeId: nodeId } }, '*');
366
- setTimeout(() => {
367
- if (window.__figmaComponentRequests.has(requestId)) {
368
- window.__figmaComponentRequests.delete(requestId);
369
- reject(new Error('Component request timed out'));
370
- }
371
- }, 10000);
372
- });
373
- };
374
-
375
- // ============================================================================
376
- // NEW: COMPONENT PROPERTY MANAGEMENT
377
- // ============================================================================
378
-
379
- // Set component/node description
380
- window.setNodeDescription = (nodeId, description, descriptionMarkdown) => {
381
- return window.sendPluginCommand('SET_NODE_DESCRIPTION', {
382
- nodeId: nodeId,
383
- description: description,
384
- descriptionMarkdown: descriptionMarkdown
385
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
386
- };
387
-
388
- // Add a component property (BOOLEAN, TEXT, INSTANCE_SWAP, VARIANT)
389
- // Note: We use 'propertyType' instead of 'type' to avoid collision with message type field
390
- window.addComponentProperty = (nodeId, propertyName, type, defaultValue, options) => {
391
- var params = { nodeId: nodeId, propertyName: propertyName, propertyType: type, defaultValue: defaultValue };
392
- if (options) {
393
- if (options.preferredValues) params.preferredValues = options.preferredValues;
394
- }
395
- return window.sendPluginCommand('ADD_COMPONENT_PROPERTY', params)
396
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
397
- };
398
-
399
- // Edit an existing component property
400
- window.editComponentProperty = (nodeId, propertyName, newValue) => {
401
- return window.sendPluginCommand('EDIT_COMPONENT_PROPERTY', {
402
- nodeId: nodeId,
403
- propertyName: propertyName,
404
- newValue: newValue
405
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
406
- };
407
-
408
- // Delete a component property
409
- window.deleteComponentProperty = (nodeId, propertyName) => {
410
- return window.sendPluginCommand('DELETE_COMPONENT_PROPERTY', {
411
- nodeId: nodeId,
412
- propertyName: propertyName
413
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
414
- };
415
-
416
- // ============================================================================
417
- // NEW: NODE MANIPULATION
418
- // ============================================================================
419
-
420
- // Resize any node
421
- window.resizeNode = (nodeId, width, height, withConstraints) => {
422
- return window.sendPluginCommand('RESIZE_NODE', {
423
- nodeId: nodeId,
424
- width: width,
425
- height: height,
426
- withConstraints: withConstraints !== false
427
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
428
- };
429
-
430
- // Move/position a node
431
- window.moveNode = (nodeId, x, y) => {
432
- return window.sendPluginCommand('MOVE_NODE', { nodeId: nodeId, x: x, y: y })
433
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
434
- };
435
-
436
- // Set node fills (colors)
437
- window.setNodeFills = (nodeId, fills) => {
438
- return window.sendPluginCommand('SET_NODE_FILLS', { nodeId: nodeId, fills: fills })
439
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
440
- };
441
-
442
- // Set node strokes
443
- window.setNodeStrokes = (nodeId, strokes, strokeWeight) => {
444
- var params = { nodeId: nodeId, strokes: strokes };
445
- if (strokeWeight !== undefined) params.strokeWeight = strokeWeight;
446
- return window.sendPluginCommand('SET_NODE_STROKES', params)
447
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
448
- };
449
-
450
- // Set node opacity
451
- window.setNodeOpacity = (nodeId, opacity) => {
452
- return window.sendPluginCommand('SET_NODE_OPACITY', { nodeId: nodeId, opacity: opacity })
453
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
454
- };
455
-
456
- // Set node corner radius
457
- window.setNodeCornerRadius = (nodeId, radius) => {
458
- return window.sendPluginCommand('SET_NODE_CORNER_RADIUS', { nodeId: nodeId, radius: radius })
459
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
460
- };
461
-
462
- // Clone a node
463
- window.cloneNode = (nodeId) => {
464
- return window.sendPluginCommand('CLONE_NODE', { nodeId: nodeId })
465
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
466
- };
467
-
468
- // Delete a node
469
- window.deleteNode = (nodeId) => {
470
- return window.sendPluginCommand('DELETE_NODE', { nodeId: nodeId })
471
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
472
- };
473
-
474
- // Rename a node
475
- window.renameNode = (nodeId, newName) => {
476
- return window.sendPluginCommand('RENAME_NODE', { nodeId: nodeId, newName: newName })
477
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
478
- };
479
-
480
- // Set text content (for text nodes)
481
- window.setTextContent = (nodeId, text, options) => {
482
- var params = { nodeId: nodeId, text: text };
483
- if (options) {
484
- if (options.fontSize) params.fontSize = options.fontSize;
485
- if (options.fontWeight) params.fontWeight = options.fontWeight;
486
- if (options.fontFamily) params.fontFamily = options.fontFamily;
487
- }
488
- return window.sendPluginCommand('SET_TEXT_CONTENT', params)
489
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
490
- };
491
-
492
- // Create a new node as child
493
- window.createChildNode = (parentId, nodeType, properties) => {
494
- return window.sendPluginCommand('CREATE_CHILD_NODE', {
495
- parentId: parentId,
496
- nodeType: nodeType,
497
- properties: properties || {}
498
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
499
- };
500
-
501
- // ============================================================================
502
- // NEW: SCREENSHOT & INSTANCE PROPERTIES (Fix for visual validation loop)
503
- // ============================================================================
504
-
505
- // Capture screenshot using plugin's exportAsync (reads current plugin state, not cloud)
506
- // This solves the race condition where REST API screenshots show stale state
507
- window.captureScreenshot = (nodeId, options) => {
508
- var params = { nodeId: nodeId };
509
- if (options) {
510
- if (options.format) params.format = options.format; // PNG, JPG, SVG
511
- if (options.scale) params.scale = options.scale; // 1, 2, 4, etc.
512
- }
513
- return window.sendPluginCommand('CAPTURE_SCREENSHOT', params, 30000)
514
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
515
- };
516
-
517
- // Set image fill on nodes — decodes base64 in browser context (atob available here)
518
- // then sends raw bytes to plugin where figma.createImage() is called
519
- window.setImageFill = (nodeIds, imageData, scaleMode) => {
520
- // Decode base64 to Uint8Array in browser context where atob() is available
521
- var binaryStr = atob(imageData);
522
- var bytes = new Uint8Array(binaryStr.length);
523
- for (var i = 0; i < binaryStr.length; i++) {
524
- bytes[i] = binaryStr.charCodeAt(i);
525
- }
526
- // Send as plain Array (postMessage can't always transfer typed arrays cleanly)
527
- return window.sendPluginCommand('SET_IMAGE_FILL', {
528
- nodeIds: Array.isArray(nodeIds) ? nodeIds : [nodeIds],
529
- imageBytes: Array.from(bytes),
530
- scaleMode: scaleMode || 'FILL'
531
- }, 60000)
532
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
533
- };
534
-
535
- // Set component instance properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT)
536
- // This is the correct way to update component instances vs direct text node editing
537
- window.setInstanceProperties = (nodeId, properties) => {
538
- return window.sendPluginCommand('SET_INSTANCE_PROPERTIES', {
539
- nodeId: nodeId,
540
- properties: properties
541
- }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
542
- };
543
-
544
- // Lint design for accessibility and quality issues
545
- window.lintDesign = (nodeId, rules, maxDepth, maxFindings) => {
546
- var params = {};
547
- if (nodeId) params.nodeId = nodeId;
548
- if (rules) params.rules = rules;
549
- if (maxDepth !== undefined) params.maxDepth = maxDepth;
550
- if (maxFindings !== undefined) params.maxFindings = maxFindings;
551
- return window.sendPluginCommand('LINT_DESIGN', params, 120000)
552
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
553
- };
554
-
555
- // Audit component accessibility (deep a11y scorecard with color-blind simulation)
556
- window.auditComponentAccessibility = function(nodeId, targetSize) {
557
- var params = {};
558
- if (nodeId) params.nodeId = nodeId;
559
- if (targetSize !== undefined) params.targetSize = targetSize;
560
- return window.sendPluginCommand('AUDIT_COMPONENT_ACCESSIBILITY', params, 120000)
561
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
562
- };
563
-
564
- // Analyze component set (variant state machine + cross-variant diff)
565
- window.analyzeComponentSet = (nodeId) => {
566
- return window.sendPluginCommand('ANALYZE_COMPONENT_SET', {
567
- nodeId: nodeId
568
- }, 30000)
569
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
570
- };
571
-
572
- // Deep component extraction (full visual props, tokens, interactions at every level)
573
- window.deepGetComponent = (nodeId, depth) => {
574
- return window.sendPluginCommand('DEEP_GET_COMPONENT', {
575
- nodeId: nodeId,
576
- depth: depth || 10
577
- }, 30000)
578
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
579
- };
580
-
581
- // Get annotations from a node (and optionally its children)
582
- window.getAnnotations = (nodeId, includeChildren, depth) => {
583
- return window.sendPluginCommand('GET_ANNOTATIONS', {
584
- nodeId: nodeId,
585
- includeChildren: includeChildren,
586
- depth: depth
587
- }, 10000)
588
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
589
- };
590
-
591
- // Set annotations on a node
592
- window.setAnnotations = (nodeId, annotations, mode) => {
593
- return window.sendPluginCommand('SET_ANNOTATIONS', {
594
- nodeId: nodeId,
595
- annotations: annotations,
596
- mode: mode || 'replace'
597
- }, 10000)
598
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
599
- };
600
-
601
- // Get available annotation categories
602
- window.getAnnotationCategories = () => {
603
- return window.sendPluginCommand('GET_ANNOTATION_CATEGORIES', {}, 5000)
604
- .catch(function(err) { return { success: false, error: err.message || String(err) }; });
605
- };
606
-
607
- // ============================================================================
608
- // WEBSOCKET BRIDGE CLIENT - Fallback transport when CDP is unavailable
609
- // ============================================================================
610
- (function() {
611
- // Port range for multi-instance support (matches server's port-discovery.ts)
612
- var WS_PORT_RANGE_START = 9223;
613
- var WS_PORT_RANGE_END = 9232;
614
-
615
- // Multi-connection state: plugin connects to ALL active MCP servers
616
- // so that every Claude tab/CLI instance gets Figma access.
617
- var activeConnections = []; // Array of { port, ws }
618
- var wsReconnectDelay = 500;
619
- var wsMaxReconnectDelay = 5000;
620
- var wsReconnectAttempts = 0;
621
- var wsMaxReconnectAttempts = 50;
622
- var isScanning = false;
623
-
624
- // Backward-compat: ws and wsConnected reflect "at least one connection"
625
- var ws = null;
626
- var wsPort = null;
627
- var wsConnected = false;
628
-
629
- // Method-to-function mapping
630
- var methodMap = {
631
- 'EXECUTE_CODE': function(params) { return window.executeCode(params.code, params.timeout); },
632
- 'UPDATE_VARIABLE': function(params) { return window.updateVariable(params.variableId, params.modeId, params.value); },
633
- 'CREATE_VARIABLE': function(params) { return window.createVariable(params.name, params.collectionId, params.resolvedType, params); },
634
- 'DELETE_VARIABLE': function(params) { return window.deleteVariable(params.variableId); },
635
- 'DELETE_VARIABLE_COLLECTION': function(params) { return window.deleteVariableCollection(params.collectionId); },
636
- 'RENAME_VARIABLE': function(params) { return window.renameVariable(params.variableId, params.newName); },
637
- 'SET_VARIABLE_DESCRIPTION': function(params) { return window.setVariableDescription(params.variableId, params.description); },
638
- 'ADD_MODE': function(params) { return window.addMode(params.collectionId, params.modeName); },
639
- 'RENAME_MODE': function(params) { return window.renameMode(params.collectionId, params.modeId, params.newName); },
640
- 'REFRESH_VARIABLES': function() { return window.refreshVariables(); },
641
- 'CREATE_VARIABLE_COLLECTION': function(params) { return window.createVariableCollection(params.name, params); },
642
- 'GET_LOCAL_COMPONENTS': function() { return window.getLocalComponents(); },
643
- 'INSTANTIATE_COMPONENT': function(params) { return window.instantiateComponent(params.componentKey, params); },
644
- 'GET_COMPONENT': function(params) { return window.requestComponentData(params.nodeId); },
645
- 'SET_NODE_DESCRIPTION': function(params) { return window.setNodeDescription(params.nodeId, params.description, params.descriptionMarkdown); },
646
- 'ADD_COMPONENT_PROPERTY': function(params) { return window.addComponentProperty(params.nodeId, params.propertyName, params.propertyType, params.defaultValue, params); },
647
- 'EDIT_COMPONENT_PROPERTY': function(params) { return window.editComponentProperty(params.nodeId, params.propertyName, params.newValue); },
648
- 'DELETE_COMPONENT_PROPERTY': function(params) { return window.deleteComponentProperty(params.nodeId, params.propertyName); },
649
- 'RESIZE_NODE': function(params) { return window.resizeNode(params.nodeId, params.width, params.height, params.withConstraints); },
650
- 'MOVE_NODE': function(params) { return window.moveNode(params.nodeId, params.x, params.y); },
651
- 'SET_NODE_FILLS': function(params) { return window.setNodeFills(params.nodeId, params.fills); },
652
- 'SET_NODE_STROKES': function(params) { return window.setNodeStrokes(params.nodeId, params.strokes, params.strokeWeight); },
653
- 'SET_NODE_OPACITY': function(params) { return window.setNodeOpacity(params.nodeId, params.opacity); },
654
- 'SET_NODE_CORNER_RADIUS': function(params) { return window.setNodeCornerRadius(params.nodeId, params.radius); },
655
- 'CLONE_NODE': function(params) { return window.cloneNode(params.nodeId); },
656
- 'DELETE_NODE': function(params) { return window.deleteNode(params.nodeId); },
657
- 'RENAME_NODE': function(params) { return window.renameNode(params.nodeId, params.newName); },
658
- 'SET_TEXT_CONTENT': function(params) { return window.setTextContent(params.nodeId, params.text, params); },
659
- 'CREATE_CHILD_NODE': function(params) { return window.createChildNode(params.parentId, params.nodeType, params.properties); },
660
- 'CAPTURE_SCREENSHOT': function(params) { return window.captureScreenshot(params.nodeId, params); },
661
- 'SET_IMAGE_FILL': function(params) { return window.setImageFill(params.nodeIds || params.nodeId, params.imageData, params.scaleMode); },
662
- 'SET_INSTANCE_PROPERTIES': function(params) { return window.setInstanceProperties(params.nodeId, params.properties); },
663
- 'LINT_DESIGN': function(params) { return window.lintDesign(params.nodeId, params.rules, params.maxDepth, params.maxFindings); },
664
- 'AUDIT_COMPONENT_ACCESSIBILITY': function(params) { return window.auditComponentAccessibility(params.nodeId, params.targetSize); },
665
- 'GET_VARIABLES_DATA': function() {
666
- // Return the cached variables data directly
667
- if (window.__figmaVariablesReady && window.__figmaVariablesData) {
668
- return Promise.resolve(window.__figmaVariablesData);
669
- }
670
- return Promise.reject(new Error('Variables data not ready. Make sure the Desktop Bridge plugin has loaded.'));
671
- },
672
- 'GET_FILE_INFO': function() {
673
- return window.sendPluginCommand('GET_FILE_INFO', {});
674
- },
675
- 'CLEAR_CONSOLE': function() {
676
- // Console buffer is maintained server-side; this is a no-op ack
677
- return Promise.resolve({ cleared: true });
678
- },
679
- 'RELOAD_UI': function() {
680
- return window.sendPluginCommand('RELOAD_UI', {});
681
- },
682
- // Annotation tools — forward to plugin code.js
683
- 'ANALYZE_COMPONENT_SET': function(params) {
684
- return window.analyzeComponentSet(params.nodeId);
685
- },
686
- 'DEEP_GET_COMPONENT': function(params) {
687
- return window.deepGetComponent(params.nodeId, params.depth);
688
- },
689
- 'GET_ANNOTATIONS': function(params) {
690
- return window.sendPluginCommand('GET_ANNOTATIONS', params, 10000);
691
- },
692
- 'SET_ANNOTATIONS': function(params) {
693
- return window.sendPluginCommand('SET_ANNOTATIONS', params, 10000);
694
- },
695
- 'GET_ANNOTATION_CATEGORIES': function(params) {
696
- return window.sendPluginCommand('GET_ANNOTATION_CATEGORIES', params || {}, 5000);
697
- }
698
- };
699
-
700
- /**
701
- * Check if we already have a connection to a specific port.
702
- */
703
- function isPortConnected(port) {
704
- for (var i = 0; i < activeConnections.length; i++) {
705
- if (activeConnections[i].port === port && activeConnections[i].ws.readyState === 1) {
706
- return true;
707
- }
708
- }
709
- return false;
710
- }
711
-
712
- /**
713
- * Remove a connection from the active list and update compat state.
714
- */
715
- function removeConnection(port) {
716
- activeConnections = activeConnections.filter(function(c) { return c.port !== port; });
717
- updateCompatState();
718
- }
719
-
720
- /**
721
- * Update backward-compat variables (ws, wsPort, wsConnected).
722
- */
723
- function updateCompatState() {
724
- var live = activeConnections.filter(function(c) { return c.ws.readyState === 1; });
725
- wsConnected = live.length > 0;
726
- if (live.length > 0) {
727
- ws = live[0].ws;
728
- wsPort = live[0].port;
729
- } else {
730
- ws = null;
731
- wsPort = null;
732
- }
733
- }
734
-
735
- /**
736
- * Initialize a new connection to a server: send FILE_INFO, variables, attach handlers.
737
- */
738
- function initializeConnection(connWs, port) {
739
- // Forward cached variables if available
740
- if (window.__figmaVariablesReady && window.__figmaVariablesData) {
741
- connWs.send(JSON.stringify({
742
- type: 'VARIABLES_DATA',
743
- data: window.__figmaVariablesData
744
- }));
745
- }
746
-
747
- // Proactively report file identity to this server
748
- window.sendPluginCommand('GET_FILE_INFO', {})
749
- .then(function(info) {
750
- if (connWs.readyState === 1 && info && info.success !== false) {
751
- connWs.send(JSON.stringify({ type: 'FILE_INFO', data: info.fileInfo || info }));
752
- }
753
- })
754
- .catch(function() { /* non-critical */ });
755
- }
756
-
757
- /**
758
- * Scan the port range and connect to ALL active MCP servers.
759
- * Each server (e.g., Chat tab on 9223, Code tab on 9224) gets its own
760
- * independent WebSocket connection so every Claude instance has Figma access.
761
- * Falls back to retry with backoff if no servers found at all.
762
- */
763
- // Maximum scan attempts on initial load (prevents infinite error loops).
764
- // After connecting, disconnect-triggered retries have their own limit.
765
- var initialScanAttempts = 0;
766
- var MAX_INITIAL_SCANS = 3;
767
-
768
- function wsScanAndConnect() {
769
- if (isScanning) return;
770
- isScanning = true;
771
-
772
- var portsToTry = [];
773
- for (var p = WS_PORT_RANGE_START; p <= WS_PORT_RANGE_END; p++) {
774
- if (!isPortConnected(p)) portsToTry.push(p);
775
- }
776
-
777
- if (portsToTry.length === 0) { isScanning = false; return; }
778
-
779
- console.log('[MCP Bridge] Scanning ports ' + WS_PORT_RANGE_START + '-' + WS_PORT_RANGE_END + ' for MCP servers...');
780
-
781
- var foundAny = false;
782
- var pending = portsToTry.length;
783
-
784
- portsToTry.forEach(function(port) {
785
- try {
786
- var testWs = new WebSocket('ws://localhost:' + port);
787
-
788
- var timeout = setTimeout(function() {
789
- if (testWs.readyState !== 1) testWs.close();
790
- }, 3000);
791
-
792
- testWs.onopen = function() {
793
- clearTimeout(timeout);
794
- foundAny = true;
795
- activeConnections.push({ port: port, ws: testWs });
796
- updateCompatState();
797
- console.log('[MCP Bridge] WebSocket connected to port ' + port + ' (' + activeConnections.length + ' server(s) total)');
798
- attachWsHandlers(testWs, port);
799
- initializeConnection(testWs, port);
800
- pending--;
801
- if (pending <= 0) {
802
- isScanning = false;
803
- wsReconnectDelay = 500;
804
- wsReconnectAttempts = 0;
805
- }
806
- };
807
-
808
- testWs.onerror = function() {
809
- clearTimeout(timeout);
810
- };
811
-
812
- testWs.onclose = function() {
813
- clearTimeout(timeout);
814
- pending--;
815
- if (pending <= 0) {
816
- isScanning = false;
817
- // Retry with backoff if no servers found, up to MAX_INITIAL_SCANS
818
- if (!foundAny && activeConnections.length === 0) {
819
- initialScanAttempts++;
820
- if (initialScanAttempts < MAX_INITIAL_SCANS) {
821
- var delay = 3000 * initialScanAttempts; // 3s, 6s
822
- console.log('[MCP Bridge] No servers found, retry ' + initialScanAttempts + '/' + MAX_INITIAL_SCANS + ' in ' + (delay/1000) + 's');
823
- setTimeout(wsScanAndConnect, delay);
824
- } else {
825
- console.log('[MCP Bridge] No MCP servers found after ' + MAX_INITIAL_SCANS + ' scans. Restart plugin to retry.');
826
- }
827
- }
828
- }
829
- };
830
- } catch (e) {
831
- pending--;
832
- }
833
- });
834
- }
835
-
836
- /**
837
- * Reconnect a specific port that disconnected.
838
- * Tries the same port first (server may have just restarted),
839
- * then does a full rescan to pick up any new servers.
840
- */
841
- // Long-interval reconnect timers — keyed by port to avoid duplicates
842
- var longIntervalTimers = {};
843
-
844
- function wsReconnectPort(port) {
845
- try {
846
- var testWs = new WebSocket('ws://localhost:' + port);
847
- var timeout = setTimeout(function() {
848
- if (testWs.readyState !== 1) testWs.close();
849
- }, 2000);
850
-
851
- testWs.onopen = function() {
852
- clearTimeout(timeout);
853
- activeConnections.push({ port: port, ws: testWs });
854
- updateCompatState();
855
- // Reset reconnect counter on ANY successful connect (fixes global counter bug)
856
- wsReconnectAttempts = 0;
857
- // Cancel long-interval retry for this port
858
- if (longIntervalTimers[port]) {
859
- clearInterval(longIntervalTimers[port]);
860
- delete longIntervalTimers[port];
861
- }
862
- console.log('[MCP Bridge] Reconnected to port ' + port + ' (' + activeConnections.length + ' server(s) total)');
863
- attachWsHandlers(testWs, port);
864
- initializeConnection(testWs, port);
865
- };
866
-
867
- testWs.onerror = function() {
868
- clearTimeout(timeout);
869
- };
870
- } catch (e) {
871
- // Port gone — no further scanning to avoid console spam
872
- }
873
- }
874
-
875
- /**
876
- * Attach message/close/error handlers to an established WebSocket connection.
877
- */
878
- function attachWsHandlers(activeWs, port) {
879
- activeWs.onmessage = function(event) {
880
- try {
881
- var message = JSON.parse(event.data);
882
-
883
- // Handle server identity messages
884
- if (message.type === 'SERVER_HELLO' && message.data) {
885
- console.log('[MCP Bridge] Connected to server on port ' + message.data.port + ' (PID: ' + message.data.pid + ', v' + message.data.serverVersion + ')');
886
- var conn = activeConnections.find(function(c) { return c.ws === activeWs; });
887
- if (conn) conn.serverInfo = message.data;
888
- return;
889
- }
890
-
891
- if (!message.id || !message.method) {
892
- console.log('[MCP Bridge] WS:' + port + ': Ignoring malformed message');
893
- return;
894
- }
895
-
896
- var handler = methodMap[message.method];
897
- if (!handler) {
898
- activeWs.send(JSON.stringify({ id: message.id, error: 'Unknown method: ' + message.method }));
899
- return;
900
- }
901
-
902
- // Call the handler (returns a Promise) and send back the result
903
- Promise.resolve(handler(message.params || {}))
904
- .then(function(result) {
905
- if (activeWs.readyState === 1) {
906
- activeWs.send(JSON.stringify({ id: message.id, result: result }));
907
- }
908
- })
909
- .catch(function(err) {
910
- if (activeWs.readyState === 1) {
911
- activeWs.send(JSON.stringify({ id: message.id, error: err.message || String(err) }));
912
- }
913
- });
914
- } catch (e) {
915
- console.error('[MCP Bridge] WS:' + port + ': Failed to process message:', e);
916
- }
917
- };
918
-
919
- activeWs.onclose = function(event) {
920
- removeConnection(port);
921
- console.log('[MCP Bridge] WebSocket disconnected from port ' + port + ' (' + activeConnections.length + ' server(s) remaining)');
922
-
923
- // If replaced by same file reconnecting (e.g., plugin reloaded), stop
924
- var wasReplaced = (event.code === 1000 && (
925
- event.reason === 'Replaced by new connection' ||
926
- event.reason === 'Replaced by same file reconnection'
927
- ));
928
- if (wasReplaced) {
929
- console.log('[MCP Bridge] WebSocket:' + port + ': replaced by newer connection, stopping reconnect');
930
- return;
931
- }
932
-
933
- // Retry the specific port with limited attempts (no full rescan)
934
- wsReconnectAttempts++;
935
- if (wsReconnectAttempts <= 5) {
936
- var delay = Math.min(1000 * wsReconnectAttempts, 5000);
937
- setTimeout(function() { wsReconnectPort(port); }, delay);
938
- } else if (!longIntervalTimers[port]) {
939
- // After rapid retries exhausted, start a low-frequency background retry.
940
- // One attempt every 30s — if the MCP server restarts, we'll find it
941
- // without requiring the user to manually reopen the plugin.
942
- console.log('[MCP Bridge] Rapid retries exhausted for port ' + port + '. Starting 30s background retry.');
943
- longIntervalTimers[port] = setInterval(function() {
944
- if (isPortConnected(port)) {
945
- // Already reconnected (e.g., via another path) — stop retrying
946
- clearInterval(longIntervalTimers[port]);
947
- delete longIntervalTimers[port];
948
- return;
949
- }
950
- wsReconnectPort(port);
951
- }, 30000);
952
- }
953
- };
954
-
955
- activeWs.onerror = function() {
956
- // onclose will fire after this, triggering reconnect
957
- };
958
- }
959
-
960
- /**
961
- * Broadcast a message to ALL active WebSocket connections.
962
- * Events like variable changes, selections, document changes need to
963
- * reach every MCP server instance so they all have current state.
964
- */
965
- function broadcastToAll(message) {
966
- var json = JSON.stringify(message);
967
- activeConnections.forEach(function(conn) {
968
- if (conn.ws.readyState === 1) {
969
- try { conn.ws.send(json); } catch(e) { /* ignore send errors */ }
970
- }
971
- });
972
- }
973
-
974
- // Forward VARIABLES_DATA to all connected MCP servers
975
- window.__wsForwardVariables = function(data) {
976
- if (wsConnected) {
977
- broadcastToAll({ type: 'VARIABLES_DATA', data: data });
978
- }
979
- };
980
-
981
- // Forward DOCUMENT_CHANGE events to all servers for cache invalidation
982
- window.__wsForwardDocumentChange = function(data) {
983
- if (wsConnected) {
984
- broadcastToAll({ type: 'DOCUMENT_CHANGE', data: data });
985
- }
986
- };
987
-
988
- // Forward CONSOLE_CAPTURE events to all servers for console monitoring
989
- window.__wsForwardConsoleCapture = function(data) {
990
- if (wsConnected) {
991
- broadcastToAll({ type: 'CONSOLE_CAPTURE', data: data });
992
- }
993
- };
994
-
995
- // Forward SELECTION_CHANGE events to all servers for selection tracking
996
- window.__wsForwardSelectionChange = function(data) {
997
- if (wsConnected) {
998
- broadcastToAll({ type: 'SELECTION_CHANGE', data: data });
999
- }
1000
- };
1001
-
1002
- // Forward PAGE_CHANGE events to all servers for page tracking
1003
- window.__wsForwardPageChange = function(data) {
1004
- if (wsConnected) {
1005
- broadcastToAll({ type: 'PAGE_CHANGE', data: data });
1006
- }
1007
- };
1008
-
1009
- // Expose functions for Cloud Mode to add connections to the same pool
1010
- window.__wsAddCloudConnection = function(cloudWs, label, onDisconnect) {
1011
- activeConnections.push({ port: label, ws: cloudWs });
1012
- updateCompatState();
1013
- attachWsHandlers(cloudWs, label);
1014
- // Chain cloud disconnect callback after attachWsHandlers' onclose
1015
- if (onDisconnect) {
1016
- var origOnClose = cloudWs.onclose;
1017
- cloudWs.onclose = function(event) {
1018
- if (origOnClose) origOnClose.call(cloudWs, event);
1019
- onDisconnect();
1020
- };
1021
- }
1022
- initializeConnection(cloudWs, label);
1023
- };
1024
-
1025
- window.__wsGetActiveConnections = function() { return activeConnections; };
1026
-
1027
- // Single scan on load — no periodic rescanning to avoid console spam.
1028
- // If no server found, retries up to MAX_INITIAL_SCANS times then stops.
1029
- // On disconnect, retries the specific port up to 5 times then stops.
1030
- wsScanAndConnect();
1031
- })();
1032
-
1033
- // ============================================================================
1034
- // CLOUD MODE — Connect to remote relay via pairing code
1035
- // ============================================================================
1036
- var cloudWs = null;
1037
- var CLOUD_RELAY_HOST = 'wss://figma-console-mcp.southleft.com';
1038
-
1039
- function toggleCloudSection() {
1040
- var section = document.getElementById('cloud-section');
1041
- var toggle = document.getElementById('cloud-toggle');
1042
- var isExpanding = !section.classList.contains('visible');
1043
- section.classList.toggle('visible');
1044
- toggle.classList.toggle('expanded');
1045
-
1046
- // Resize plugin window to fit content
1047
- var height = isExpanding ? 130 : 50;
1048
- parent.postMessage({ pluginMessage: { type: 'RESIZE_UI', width: 140, height: height } }, '*');
1049
- }
1050
-
1051
- function resetCloudUI() {
1052
- var statusEl = document.getElementById('cloud-status');
1053
- var btn = document.getElementById('cloud-btn');
1054
- if (statusEl) {
1055
- statusEl.textContent = 'Disconnected';
1056
- statusEl.className = 'cloud-status';
1057
- }
1058
- if (btn) {
1059
- btn.disabled = false;
1060
- btn.textContent = 'Connect';
1061
- btn.onclick = cloudConnect;
1062
- }
1063
- cloudWs = null;
1064
- }
1065
-
1066
- function cloudConnect() {
1067
- var codeInput = document.getElementById('cloud-code');
1068
- var btn = document.getElementById('cloud-btn');
1069
- var statusEl = document.getElementById('cloud-status');
1070
- var code = (codeInput.value || '').trim().toUpperCase();
1071
-
1072
- if (!code || code.length < 4) {
1073
- statusEl.textContent = 'Enter pairing code';
1074
- statusEl.className = 'cloud-status error';
1075
- return;
1076
- }
1077
-
1078
- btn.disabled = true;
1079
- statusEl.textContent = 'Connecting...';
1080
- statusEl.className = 'cloud-status';
1081
-
1082
- // Close existing cloud connection if any
1083
- if (cloudWs && cloudWs.readyState <= 1) {
1084
- cloudWs.close();
1085
- }
1086
-
1087
- try {
1088
- cloudWs = new WebSocket(CLOUD_RELAY_HOST + '/ws/pair?code=' + code);
1089
-
1090
- cloudWs.onopen = function() {
1091
- statusEl.textContent = 'Connected to cloud relay';
1092
- statusEl.className = 'cloud-status connected';
1093
- btn.disabled = false;
1094
- btn.textContent = 'Disconnect';
1095
- btn.onclick = cloudDisconnect;
1096
-
1097
- // Add to the shared connection pool (uses same handlers as localhost).
1098
- // Pass resetCloudUI as disconnect callback — attachWsHandlers overwrites
1099
- // onclose, so this callback ensures cloud UI resets on server-initiated close.
1100
- if (window.__wsAddCloudConnection) {
1101
- window.__wsAddCloudConnection(cloudWs, 'cloud', resetCloudUI);
1102
- }
1103
-
1104
- // Persist cloud config via code.js clientStorage
1105
- parent.postMessage({ pluginMessage: {
1106
- type: 'STORE_CLOUD_CONFIG',
1107
- code: code
1108
- }}, '*');
1109
- };
1110
-
1111
- cloudWs.onerror = function() {
1112
- statusEl.textContent = 'Connection failed — check code';
1113
- statusEl.className = 'cloud-status error';
1114
- btn.disabled = false;
1115
- };
1116
-
1117
- // Note: onclose here handles pre-connection close (e.g., bad code).
1118
- // After onopen, attachWsHandlers overwrites this — resetCloudUI callback
1119
- // handles post-connection close instead.
1120
- cloudWs.onclose = function(event) {
1121
- resetCloudUI();
1122
- };
1123
- } catch (e) {
1124
- statusEl.textContent = 'Failed: ' + e.message;
1125
- statusEl.className = 'cloud-status error';
1126
- btn.disabled = false;
1127
- }
1128
- }
1129
-
1130
- function cloudDisconnect() {
1131
- if (cloudWs) {
1132
- cloudWs.close();
1133
- }
1134
- // Reset UI immediately — don't rely on onclose (may be overwritten)
1135
- resetCloudUI();
1136
- }
1137
-
1138
- // ============================================================================
1139
- // MESSAGE HANDLER - Process responses from plugin worker
1140
- // ============================================================================
1141
- window.onmessage = (event) => {
1142
- const msg = event.data.pluginMessage;
1143
- if (!msg) return;
1144
-
1145
- // Generic result handler
1146
- const handleResult = (resultType, dataKey) => {
1147
- const request = window.__figmaPendingRequests.get(msg.requestId);
1148
- if (request) {
1149
- if (request.timeoutId) clearTimeout(request.timeoutId);
1150
- if (msg.success) {
1151
- var result = { success: true };
1152
- if (dataKey && msg[dataKey] !== undefined) result[dataKey] = msg[dataKey];
1153
- if (msg.data !== undefined) result.data = msg.data;
1154
- if (msg.oldName !== undefined) result.oldName = msg.oldName;
1155
- if (msg.instance !== undefined) result.instance = msg.instance;
1156
- request.resolve(result);
1157
- } else {
1158
- request.resolve({ success: false, error: msg.error || 'Unknown error' });
1159
- }
1160
- window.__figmaPendingRequests.delete(msg.requestId);
1161
- }
1162
- };
1163
-
1164
- // Handle message types
1165
- switch (msg.type) {
1166
- case 'VARIABLES_DATA':
1167
- window.__figmaVariablesData = msg.data;
1168
- window.__figmaVariablesReady = true;
1169
- updateStatus('ready', true, false);
1170
- console.log('[MCP Bridge] Active - ' + (msg.data.variables?.length || 0) + ' vars');
1171
- // Forward to WebSocket client if connected
1172
- if (window.__wsForwardVariables) window.__wsForwardVariables(msg.data);
1173
- break;
1174
-
1175
- case 'COMPONENT_DATA':
1176
- window.__figmaComponentData = msg.data;
1177
- var req = window.__figmaComponentRequests.get(msg.requestId);
1178
- if (req) { req.resolve(msg.data); window.__figmaComponentRequests.delete(msg.requestId); }
1179
- break;
1180
-
1181
- case 'COMPONENT_ERROR':
1182
- var req2 = window.__figmaComponentRequests.get(msg.requestId);
1183
- if (req2) { req2.reject(new Error(msg.error)); window.__figmaComponentRequests.delete(msg.requestId); }
1184
- break;
1185
-
1186
- case 'ERROR':
1187
- window.__figmaVariablesReady = false;
1188
- updateStatus('error', false, true);
1189
- console.error('[MCP Bridge] Error:', msg.error);
1190
- break;
1191
-
1192
- // Variable operations
1193
- case 'EXECUTE_CODE_RESULT':
1194
- handleResult('EXECUTE_CODE', 'result');
1195
- break;
1196
- case 'UPDATE_VARIABLE_RESULT':
1197
- handleResult('UPDATE_VARIABLE', 'variable');
1198
- break;
1199
- case 'CREATE_VARIABLE_RESULT':
1200
- handleResult('CREATE_VARIABLE', 'variable');
1201
- break;
1202
- case 'CREATE_VARIABLE_COLLECTION_RESULT':
1203
- handleResult('CREATE_VARIABLE_COLLECTION', 'collection');
1204
- break;
1205
- case 'DELETE_VARIABLE_RESULT':
1206
- handleResult('DELETE_VARIABLE', 'deleted');
1207
- break;
1208
- case 'DELETE_VARIABLE_COLLECTION_RESULT':
1209
- handleResult('DELETE_VARIABLE_COLLECTION', 'deleted');
1210
- break;
1211
- case 'REFRESH_VARIABLES_RESULT':
1212
- handleResult('REFRESH_VARIABLES', null);
1213
- break;
1214
- case 'RENAME_VARIABLE_RESULT':
1215
- handleResult('RENAME_VARIABLE', 'variable');
1216
- break;
1217
- case 'SET_VARIABLE_DESCRIPTION_RESULT':
1218
- handleResult('SET_VARIABLE_DESCRIPTION', 'variable');
1219
- break;
1220
- case 'ADD_MODE_RESULT':
1221
- handleResult('ADD_MODE', 'collection');
1222
- break;
1223
- case 'RENAME_MODE_RESULT':
1224
- handleResult('RENAME_MODE', 'collection');
1225
- break;
1226
- case 'GET_LOCAL_COMPONENTS_RESULT':
1227
- handleResult('GET_LOCAL_COMPONENTS', null);
1228
- break;
1229
- case 'INSTANTIATE_COMPONENT_RESULT':
1230
- handleResult('INSTANTIATE_COMPONENT', 'instance');
1231
- break;
1232
-
1233
- // NEW: Component property operations
1234
- case 'SET_NODE_DESCRIPTION_RESULT':
1235
- handleResult('SET_NODE_DESCRIPTION', 'node');
1236
- break;
1237
- case 'ADD_COMPONENT_PROPERTY_RESULT':
1238
- handleResult('ADD_COMPONENT_PROPERTY', 'propertyName');
1239
- break;
1240
- case 'EDIT_COMPONENT_PROPERTY_RESULT':
1241
- handleResult('EDIT_COMPONENT_PROPERTY', 'propertyName');
1242
- break;
1243
- case 'DELETE_COMPONENT_PROPERTY_RESULT':
1244
- handleResult('DELETE_COMPONENT_PROPERTY', null);
1245
- break;
1246
-
1247
- // NEW: Node manipulation operations
1248
- case 'RESIZE_NODE_RESULT':
1249
- handleResult('RESIZE_NODE', 'node');
1250
- break;
1251
- case 'MOVE_NODE_RESULT':
1252
- handleResult('MOVE_NODE', 'node');
1253
- break;
1254
- case 'SET_NODE_FILLS_RESULT':
1255
- handleResult('SET_NODE_FILLS', 'node');
1256
- break;
1257
- case 'SET_NODE_STROKES_RESULT':
1258
- handleResult('SET_NODE_STROKES', 'node');
1259
- break;
1260
- case 'SET_NODE_OPACITY_RESULT':
1261
- handleResult('SET_NODE_OPACITY', 'node');
1262
- break;
1263
- case 'SET_NODE_CORNER_RADIUS_RESULT':
1264
- handleResult('SET_NODE_CORNER_RADIUS', 'node');
1265
- break;
1266
- case 'CLONE_NODE_RESULT':
1267
- handleResult('CLONE_NODE', 'node');
1268
- break;
1269
- case 'DELETE_NODE_RESULT':
1270
- handleResult('DELETE_NODE', 'deleted');
1271
- break;
1272
- case 'RENAME_NODE_RESULT':
1273
- handleResult('RENAME_NODE', 'node');
1274
- break;
1275
- case 'SET_TEXT_CONTENT_RESULT':
1276
- handleResult('SET_TEXT_CONTENT', 'node');
1277
- break;
1278
- case 'CREATE_CHILD_NODE_RESULT':
1279
- handleResult('CREATE_CHILD_NODE', 'node');
1280
- break;
1281
-
1282
- // NEW: Screenshot and instance properties (visual validation loop fix)
1283
- case 'CAPTURE_SCREENSHOT_RESULT':
1284
- handleResult('CAPTURE_SCREENSHOT', 'image');
1285
- break;
1286
- case 'SET_IMAGE_FILL_RESULT':
1287
- handleResult('SET_IMAGE_FILL', 'imageHash');
1288
- break;
1289
- case 'SET_INSTANCE_PROPERTIES_RESULT':
1290
- handleResult('SET_INSTANCE_PROPERTIES', 'instance');
1291
- break;
1292
- case 'LINT_DESIGN_RESULT':
1293
- handleResult('LINT_DESIGN', 'data');
1294
- break;
1295
- case 'AUDIT_COMPONENT_ACCESSIBILITY_RESULT':
1296
- handleResult('AUDIT_COMPONENT_ACCESSIBILITY', 'data');
1297
- break;
1298
-
1299
- // File info
1300
- case 'GET_FILE_INFO_RESULT':
1301
- handleResult('GET_FILE_INFO', 'fileInfo');
1302
- break;
1303
-
1304
- // Plugin UI reload
1305
- case 'RELOAD_UI_RESULT':
1306
- handleResult('RELOAD_UI', null);
1307
- break;
1308
-
1309
- // Component set analysis
1310
- case 'ANALYZE_COMPONENT_SET_RESULT':
1311
- handleResult('ANALYZE_COMPONENT_SET', null);
1312
- break;
1313
-
1314
- // Deep component extraction
1315
- case 'DEEP_GET_COMPONENT_RESULT':
1316
- handleResult('DEEP_GET_COMPONENT', null);
1317
- break;
1318
-
1319
- // Annotation tools (data flows via msg.data, no top-level dataKey needed)
1320
- case 'GET_ANNOTATIONS_RESULT':
1321
- handleResult('GET_ANNOTATIONS', null);
1322
- break;
1323
- case 'SET_ANNOTATIONS_RESULT':
1324
- handleResult('SET_ANNOTATIONS', null);
1325
- break;
1326
- case 'GET_ANNOTATION_CATEGORIES_RESULT':
1327
- handleResult('GET_ANNOTATION_CATEGORIES', null);
1328
- break;
1329
-
1330
- // Document change events (for cache invalidation via WebSocket)
1331
- case 'DOCUMENT_CHANGE':
1332
- if (window.__wsForwardDocumentChange) window.__wsForwardDocumentChange(msg.data);
1333
- break;
1334
-
1335
- // Console capture events (for console monitoring via WebSocket)
1336
- case 'CONSOLE_CAPTURE':
1337
- if (window.__wsForwardConsoleCapture) window.__wsForwardConsoleCapture(msg);
1338
- break;
1339
-
1340
- // Selection change events (for selection tracking via WebSocket)
1341
- case 'SELECTION_CHANGE':
1342
- if (window.__wsForwardSelectionChange) window.__wsForwardSelectionChange(msg.data);
1343
- break;
1344
-
1345
- // Page change events (for page tracking via WebSocket)
1346
- case 'PAGE_CHANGE':
1347
- if (window.__wsForwardPageChange) window.__wsForwardPageChange(msg.data);
1348
- break;
1349
- }
1350
- };
1351
- </script>
1352
- </body>
1353
- </html>