@atezer/figma-mcp-bridge 1.7.11 → 1.7.13
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/CHANGELOG.md +21 -0
- package/README.md +1 -1
- package/dist/core/plugin-bridge-server.js +1 -1
- package/dist/local-plugin-only.js +1 -1
- package/dist/local.js +1 -1
- package/f-mcp-plugin/ui.html +191 -48
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -12,6 +12,27 @@ Bu dosya [Keep a Changelog](https://keepachangelog.com/tr/1.1.0/) biçimine uygu
|
|
|
12
12
|
|
|
13
13
|
Bu changelog'a ekleme öncesi sürümlerin tam ayrıntıları için `git log` kullanılabilir.
|
|
14
14
|
|
|
15
|
+
## [1.7.13] - 2026-04-07
|
|
16
|
+
|
|
17
|
+
### Plugin UI: Dark/Light Tema Uyumu ve Font Okunabilirliği
|
|
18
|
+
|
|
19
|
+
**Kök neden düzeltmesi:**
|
|
20
|
+
- **`@media (prefers-color-scheme: light)` kaldırıldı:** Figma plugin iframe'inde bu media query çalışmıyor. Figma `themeColors: true` ile `<html>` elementine `.figma-light` / `.figma-dark` class ekler — artık resmi Figma tema sistemi kullanılıyor.
|
|
21
|
+
- **`@media` fallback eklendi:** Browser preview ve Figma dışı ortamlarda da light tema çalışır (`:root:not(.figma-dark)` selector ile).
|
|
22
|
+
|
|
23
|
+
**Renk düzeltmeleri:**
|
|
24
|
+
- **17 CSS custom property tanımlandı:** `--fmcp-bg-subtle`, `--fmcp-text-secondary`, `--fmcp-border-light` vb. Dark tema varsayılan, `.figma-light` ve `@media light` ile override.
|
|
25
|
+
- **Tüm hardcoded `rgba(255,255,255,...)` inline renkler** CSS variable'lara çevrildi — light temada artık okunaklı.
|
|
26
|
+
- **Tüm `color: inherit` ve `color: #fff`** kaldırıldı, tema-uyumlu `var()` fallback'lere çevrildi.
|
|
27
|
+
- **Figma `--figma-color-*` variable fallback'leri** `var(--fmcp-*)` ile değiştirildi — Figma variable inject etmediğinde bile doğru renk.
|
|
28
|
+
- **3 JS dinamik renk** (`updateTokenUI`, `updatePortLabel`) `fmcpVar()` helper ile tema-uyumlu.
|
|
29
|
+
|
|
30
|
+
**Font okunabilirliği:**
|
|
31
|
+
- **Tüm font boyutları +2px büyütüldü:** body 11→13, label/toggle 10→12, info 9→11, note 8→10, icon 7→9.
|
|
32
|
+
- **Icon boyutları da +2px:** info butonları 13→15px, rate-limit info 11→13px (line-height uyumlu).
|
|
33
|
+
|
|
34
|
+
**Etkilenen alanlar:** Status bar, Advanced panel, Host/Port input, Port switcher, API Token section, Rate limit bar, Connections panel — tümü dark ve light temada okunaklı.
|
|
35
|
+
|
|
15
36
|
## [1.7.10] - 2026-04-05
|
|
16
37
|
|
|
17
38
|
### Doküman: Kapsamlı Güncelleme Rehberi
|
package/README.md
CHANGED
|
@@ -175,7 +175,7 @@ Detaylı sorun giderme: [TROUBLESHOOTING.md](docs/TROUBLESHOOTING.md)
|
|
|
175
175
|
|
|
176
176
|
| Bilgi | Kaynak |
|
|
177
177
|
|-------|--------|
|
|
178
|
-
| Güncel sürüm | **1.7.
|
|
178
|
+
| Güncel sürüm | **1.7.13** ([package.json](package.json)) |
|
|
179
179
|
| Değişiklik geçmişi | [CHANGELOG.md](CHANGELOG.md) |
|
|
180
180
|
| GitHub sürümleri | [Releases](https://github.com/atezer/FMCP/releases) |
|
|
181
181
|
| npm paketi | [@atezer/figma-mcp-bridge](https://www.npmjs.com/package/@atezer/figma-mcp-bridge) |
|
|
@@ -326,7 +326,7 @@ export class PluginBridgeServer {
|
|
|
326
326
|
logger.info({ clientId, fileKey: incomingFileKey, fileName: incomingFileName }, "Plugin bridge: client registered (fileKey=%s, fileName=%s)", incomingFileKey, incomingFileName);
|
|
327
327
|
ws.send(JSON.stringify({
|
|
328
328
|
type: "welcome",
|
|
329
|
-
bridgeVersion: "1.7.
|
|
329
|
+
bridgeVersion: "1.7.13",
|
|
330
330
|
port: this.port,
|
|
331
331
|
clientId,
|
|
332
332
|
multiClient: true,
|
|
@@ -89,7 +89,7 @@ export async function main() {
|
|
|
89
89
|
bridge.start();
|
|
90
90
|
const server = new McpServer({
|
|
91
91
|
name: "F-MCP ATezer Bridge (Plugin-only)",
|
|
92
|
-
version: "1.7.
|
|
92
|
+
version: "1.7.13",
|
|
93
93
|
});
|
|
94
94
|
// ---- figma_list_connected_files (multi-client discovery) ----
|
|
95
95
|
server.registerTool("figma_list_connected_files", {
|
package/dist/local.js
CHANGED
package/f-mcp-plugin/ui.html
CHANGED
|
@@ -3,6 +3,25 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<style>
|
|
6
|
+
:root {
|
|
7
|
+
--fmcp-bg-subtle: rgba(255,255,255,0.06);
|
|
8
|
+
--fmcp-bg-panel: rgba(255,255,255,0.04);
|
|
9
|
+
--fmcp-bg-tip: rgba(255,255,255,0.05);
|
|
10
|
+
--fmcp-border-light: rgba(255,255,255,0.1);
|
|
11
|
+
--fmcp-border-subtle: rgba(255,255,255,0.08);
|
|
12
|
+
--fmcp-border-faint: rgba(255,255,255,0.25);
|
|
13
|
+
--fmcp-text-input: #fff;
|
|
14
|
+
--fmcp-text-secondary: rgba(255,255,255,0.5);
|
|
15
|
+
--fmcp-text-tertiary: rgba(255,255,255,0.4);
|
|
16
|
+
--fmcp-text-muted: rgba(255,255,255,0.35);
|
|
17
|
+
--fmcp-text-dim: rgba(255,255,255,0.3);
|
|
18
|
+
--fmcp-text-ghost: rgba(255,255,255,0.2);
|
|
19
|
+
--fmcp-text-select: rgba(255,255,255,0.6);
|
|
20
|
+
--fmcp-clear-bg: rgba(255,100,100,0.15);
|
|
21
|
+
--fmcp-clear-border: rgba(255,100,100,0.2);
|
|
22
|
+
--fmcp-clear-text: rgba(255,100,100,0.8);
|
|
23
|
+
}
|
|
24
|
+
|
|
6
25
|
* {
|
|
7
26
|
box-sizing: border-box;
|
|
8
27
|
margin: 0;
|
|
@@ -18,9 +37,9 @@
|
|
|
18
37
|
|
|
19
38
|
body {
|
|
20
39
|
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
21
|
-
font-size:
|
|
40
|
+
font-size: 13px;
|
|
22
41
|
background: var(--figma-color-bg, #2c2c2c);
|
|
23
|
-
color: var(--figma-color-text,
|
|
42
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
24
43
|
width: 100%;
|
|
25
44
|
max-width: 100%;
|
|
26
45
|
height: auto;
|
|
@@ -85,11 +104,11 @@
|
|
|
85
104
|
}
|
|
86
105
|
|
|
87
106
|
.status-text .label {
|
|
88
|
-
color: var(--figma-color-text-secondary,
|
|
107
|
+
color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
|
|
89
108
|
}
|
|
90
109
|
|
|
91
110
|
.status-text .state {
|
|
92
|
-
color: var(--figma-color-text,
|
|
111
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
93
112
|
margin-left: 4px;
|
|
94
113
|
}
|
|
95
114
|
|
|
@@ -103,16 +122,16 @@
|
|
|
103
122
|
.advanced-toggle {
|
|
104
123
|
border: 1px solid var(--figma-color-border, #4a4a4a);
|
|
105
124
|
background: transparent;
|
|
106
|
-
color:
|
|
125
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
107
126
|
border-radius: 6px;
|
|
108
|
-
font-size:
|
|
127
|
+
font-size: 12px;
|
|
109
128
|
padding: 4px 8px;
|
|
110
129
|
cursor: pointer;
|
|
111
130
|
}
|
|
112
131
|
|
|
113
132
|
.advanced-state {
|
|
114
|
-
font-size:
|
|
115
|
-
color: var(--figma-color-text-secondary,
|
|
133
|
+
font-size: 12px;
|
|
134
|
+
color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
|
|
116
135
|
}
|
|
117
136
|
|
|
118
137
|
.advanced-panel {
|
|
@@ -133,10 +152,10 @@
|
|
|
133
152
|
display: flex;
|
|
134
153
|
align-items: center;
|
|
135
154
|
gap: 6px;
|
|
136
|
-
font-size:
|
|
155
|
+
font-size: 12px;
|
|
137
156
|
}
|
|
138
157
|
.bridge-host label, .bridge-port label {
|
|
139
|
-
color: var(--figma-color-text-secondary,
|
|
158
|
+
color: var(--figma-color-text-secondary, var(--fmcp-text-secondary));
|
|
140
159
|
}
|
|
141
160
|
.bridge-host input {
|
|
142
161
|
width: 90px;
|
|
@@ -144,8 +163,8 @@
|
|
|
144
163
|
background: var(--figma-color-bg-tertiary, #1e1e1e);
|
|
145
164
|
border: 1px solid var(--figma-color-border, #4a4a4a);
|
|
146
165
|
border-radius: 3px;
|
|
147
|
-
color:
|
|
148
|
-
font-size:
|
|
166
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
167
|
+
font-size: 13px;
|
|
149
168
|
}
|
|
150
169
|
.bridge-port input {
|
|
151
170
|
width: 56px;
|
|
@@ -153,17 +172,17 @@
|
|
|
153
172
|
background: var(--figma-color-bg-tertiary, #1e1e1e);
|
|
154
173
|
border: 1px solid var(--figma-color-border, #4a4a4a);
|
|
155
174
|
border-radius: 3px;
|
|
156
|
-
color:
|
|
157
|
-
font-size:
|
|
175
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
176
|
+
font-size: 13px;
|
|
158
177
|
}
|
|
159
178
|
|
|
160
179
|
.auto-port-reset {
|
|
161
180
|
align-self: flex-start;
|
|
162
181
|
border: 1px solid var(--figma-color-border, #4a4a4a);
|
|
163
182
|
background: transparent;
|
|
164
|
-
color:
|
|
183
|
+
color: var(--figma-color-text, var(--fmcp-text-input));
|
|
165
184
|
border-radius: 6px;
|
|
166
|
-
font-size:
|
|
185
|
+
font-size: 12px;
|
|
167
186
|
padding: 4px 8px;
|
|
168
187
|
cursor: pointer;
|
|
169
188
|
}
|
|
@@ -172,26 +191,143 @@
|
|
|
172
191
|
opacity: 0.9;
|
|
173
192
|
}
|
|
174
193
|
|
|
175
|
-
/* Light theme
|
|
194
|
+
/* Light theme — .figma-light: Figma injects on <html> when themeColors:true
|
|
195
|
+
@media fallback: browser preview & non-Figma environments */
|
|
196
|
+
.figma-light,
|
|
197
|
+
.fmcp-light {
|
|
198
|
+
--fmcp-bg-subtle: rgba(0,0,0,0.05);
|
|
199
|
+
--fmcp-bg-panel: rgba(0,0,0,0.03);
|
|
200
|
+
--fmcp-bg-tip: rgba(0,0,0,0.04);
|
|
201
|
+
--fmcp-border-light: rgba(0,0,0,0.12);
|
|
202
|
+
--fmcp-border-subtle: rgba(0,0,0,0.08);
|
|
203
|
+
--fmcp-border-faint: rgba(0,0,0,0.2);
|
|
204
|
+
--fmcp-text-input: #222;
|
|
205
|
+
--fmcp-text-secondary: #555;
|
|
206
|
+
--fmcp-text-tertiary: #666;
|
|
207
|
+
--fmcp-text-muted: #777;
|
|
208
|
+
--fmcp-text-dim: #888;
|
|
209
|
+
--fmcp-text-ghost: #999;
|
|
210
|
+
--fmcp-text-select: #444;
|
|
211
|
+
--fmcp-clear-bg: rgba(220,50,50,0.1);
|
|
212
|
+
--fmcp-clear-border: rgba(220,50,50,0.2);
|
|
213
|
+
--fmcp-clear-text: rgba(200,50,50,0.85);
|
|
214
|
+
}
|
|
176
215
|
@media (prefers-color-scheme: light) {
|
|
177
|
-
|
|
216
|
+
:root:not(.figma-dark) {
|
|
217
|
+
--fmcp-bg-subtle: rgba(0,0,0,0.05);
|
|
218
|
+
--fmcp-bg-panel: rgba(0,0,0,0.03);
|
|
219
|
+
--fmcp-bg-tip: rgba(0,0,0,0.04);
|
|
220
|
+
--fmcp-border-light: rgba(0,0,0,0.12);
|
|
221
|
+
--fmcp-border-subtle: rgba(0,0,0,0.08);
|
|
222
|
+
--fmcp-border-faint: rgba(0,0,0,0.2);
|
|
223
|
+
--fmcp-text-input: #222;
|
|
224
|
+
--fmcp-text-secondary: #555;
|
|
225
|
+
--fmcp-text-tertiary: #666;
|
|
226
|
+
--fmcp-text-muted: #777;
|
|
227
|
+
--fmcp-text-dim: #888;
|
|
228
|
+
--fmcp-text-ghost: #999;
|
|
229
|
+
--fmcp-text-select: #444;
|
|
230
|
+
--fmcp-clear-bg: rgba(220,50,50,0.1);
|
|
231
|
+
--fmcp-clear-border: rgba(220,50,50,0.2);
|
|
232
|
+
--fmcp-clear-text: rgba(200,50,50,0.85);
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
.figma-light body,
|
|
236
|
+
.fmcp-light body {
|
|
237
|
+
background: var(--figma-color-bg, #f5f5f5);
|
|
238
|
+
color: var(--figma-color-text, #333);
|
|
239
|
+
}
|
|
240
|
+
@media (prefers-color-scheme: light) {
|
|
241
|
+
:root:not(.figma-dark) body {
|
|
178
242
|
background: #f5f5f5;
|
|
179
243
|
color: #333;
|
|
180
244
|
}
|
|
181
|
-
|
|
245
|
+
}
|
|
246
|
+
.figma-light .bridge-status,
|
|
247
|
+
.fmcp-light .bridge-status {
|
|
248
|
+
background: var(--figma-color-bg-secondary, #fff);
|
|
249
|
+
border-color: var(--figma-color-border, #e0e0e0);
|
|
250
|
+
}
|
|
251
|
+
.figma-light .advanced-panel,
|
|
252
|
+
.fmcp-light .advanced-panel {
|
|
253
|
+
background: var(--figma-color-bg-secondary, #fff);
|
|
254
|
+
border-color: var(--figma-color-border, #e0e0e0);
|
|
255
|
+
}
|
|
256
|
+
.figma-light .advanced-toggle,
|
|
257
|
+
.fmcp-light .advanced-toggle {
|
|
258
|
+
border-color: var(--figma-color-border, #ccc);
|
|
259
|
+
}
|
|
260
|
+
.figma-light .status-text .label,
|
|
261
|
+
.fmcp-light .status-text .label {
|
|
262
|
+
color: var(--figma-color-text-secondary, #666);
|
|
263
|
+
}
|
|
264
|
+
.figma-light .status-text .state,
|
|
265
|
+
.fmcp-light .status-text .state {
|
|
266
|
+
color: var(--figma-color-text, #333);
|
|
267
|
+
}
|
|
268
|
+
.figma-light .bridge-host input,
|
|
269
|
+
.figma-light .bridge-port input,
|
|
270
|
+
.fmcp-light .bridge-host input,
|
|
271
|
+
.fmcp-light .bridge-port input {
|
|
272
|
+
background: var(--figma-color-bg-tertiary, #f0f0f0);
|
|
273
|
+
border-color: var(--figma-color-border, #ccc);
|
|
274
|
+
color: var(--figma-color-text, #333);
|
|
275
|
+
}
|
|
276
|
+
.figma-light .auto-port-reset,
|
|
277
|
+
.fmcp-light .auto-port-reset {
|
|
278
|
+
border-color: var(--figma-color-border, #ccc);
|
|
279
|
+
}
|
|
280
|
+
.figma-light .advanced-state,
|
|
281
|
+
.fmcp-light .advanced-state {
|
|
282
|
+
color: var(--figma-color-text-secondary, #666);
|
|
283
|
+
}
|
|
284
|
+
.figma-light .advanced-toggle,
|
|
285
|
+
.fmcp-light .advanced-toggle {
|
|
286
|
+
color: var(--figma-color-text, #333);
|
|
287
|
+
}
|
|
288
|
+
.figma-light .bridge-host label,
|
|
289
|
+
.figma-light .bridge-port label,
|
|
290
|
+
.fmcp-light .bridge-host label,
|
|
291
|
+
.fmcp-light .bridge-port label {
|
|
292
|
+
color: var(--figma-color-text-secondary, #666);
|
|
293
|
+
}
|
|
294
|
+
@media (prefers-color-scheme: light) {
|
|
295
|
+
:root:not(.figma-dark) .bridge-status {
|
|
182
296
|
background: #fff;
|
|
183
|
-
border-color: #
|
|
297
|
+
border-color: #e0e0e0;
|
|
184
298
|
}
|
|
185
|
-
.advanced-panel {
|
|
299
|
+
:root:not(.figma-dark) .advanced-panel {
|
|
186
300
|
background: #fff;
|
|
187
|
-
border-color: #
|
|
301
|
+
border-color: #e0e0e0;
|
|
302
|
+
}
|
|
303
|
+
:root:not(.figma-dark) .advanced-toggle {
|
|
304
|
+
border-color: #ccc;
|
|
305
|
+
}
|
|
306
|
+
:root:not(.figma-dark) .status-text .label {
|
|
307
|
+
color: #666;
|
|
308
|
+
}
|
|
309
|
+
:root:not(.figma-dark) .status-text .state {
|
|
310
|
+
color: #333;
|
|
311
|
+
}
|
|
312
|
+
:root:not(.figma-dark) .bridge-host input,
|
|
313
|
+
:root:not(.figma-dark) .bridge-port input {
|
|
314
|
+
background: #f0f0f0;
|
|
315
|
+
border-color: #ccc;
|
|
316
|
+
color: #333;
|
|
317
|
+
}
|
|
318
|
+
:root:not(.figma-dark) .auto-port-reset {
|
|
319
|
+
border-color: #ccc;
|
|
188
320
|
}
|
|
189
|
-
.
|
|
321
|
+
:root:not(.figma-dark) .advanced-state {
|
|
190
322
|
color: #666;
|
|
191
323
|
}
|
|
192
|
-
.
|
|
324
|
+
:root:not(.figma-dark) .advanced-toggle {
|
|
193
325
|
color: #333;
|
|
194
326
|
}
|
|
327
|
+
:root:not(.figma-dark) .bridge-host label,
|
|
328
|
+
:root:not(.figma-dark) .bridge-port label {
|
|
329
|
+
color: #666;
|
|
330
|
+
}
|
|
195
331
|
}
|
|
196
332
|
</style>
|
|
197
333
|
</head>
|
|
@@ -202,10 +338,10 @@
|
|
|
202
338
|
<div class="status-text">
|
|
203
339
|
<span class="label">MCP</span>
|
|
204
340
|
<span class="state" id="status-state">connecting</span>
|
|
205
|
-
<span id="status-info-btn" onclick="var p=document.getElementById('connections-panel');if(p){p.style.display=p.style.display==='block'?'none':'block';requestUiResize();}" style="display:none;cursor:pointer;margin-left:4px;font-size:
|
|
341
|
+
<span id="status-info-btn" onclick="var p=document.getElementById('connections-panel');if(p){p.style.display=p.style.display==='block'?'none':'block';requestUiResize();}" style="display:none;cursor:pointer;margin-left:4px;font-size:11px;width:15px;height:15px;border-radius:50%;border:1px solid var(--fmcp-border-faint);color:var(--fmcp-text-tertiary);text-align:center;line-height:15px;user-select:none;">i</span>
|
|
206
342
|
</div>
|
|
207
343
|
</div>
|
|
208
|
-
<div id="connections-panel" style="display:none;padding:6px 10px;background:
|
|
344
|
+
<div id="connections-panel" style="display:none;padding:6px 10px;background:var(--fmcp-bg-panel);border-radius:5px;font-size:11px;color:var(--fmcp-text-tertiary);line-height:1.6;">
|
|
209
345
|
<div id="connections-panel-list">—</div>
|
|
210
346
|
</div>
|
|
211
347
|
<div class="advanced-wrap">
|
|
@@ -222,53 +358,60 @@
|
|
|
222
358
|
<input type="number" id="mcp-port" min="5454" max="5470" value="5454" aria-label="MCP bridge port (auto fallback 5454-5470)" title="Elle değiştirirseniz tek porta kilitlenir; Otomatik tara veya Advanced'ı kapatın." />
|
|
223
359
|
</div>
|
|
224
360
|
<div id="port-switcher" style="display:flex;align-items:center;gap:4px;margin-top:4px;">
|
|
225
|
-
<button type="button" id="port-prev" onclick="switchActivePort(-1)" style="font-size:
|
|
226
|
-
<span id="port-label" style="font-size:
|
|
227
|
-
<button type="button" id="port-next" onclick="switchActivePort(1)" style="font-size:
|
|
361
|
+
<button type="button" id="port-prev" onclick="switchActivePort(-1)" style="font-size:12px;padding:1px 5px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-secondary);cursor:pointer;">◀</button>
|
|
362
|
+
<span id="port-label" style="font-size:12px;color:var(--fmcp-text-tertiary);flex:1;text-align:center;">—</span>
|
|
363
|
+
<button type="button" id="port-next" onclick="switchActivePort(1)" style="font-size:12px;padding:1px 5px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-secondary);cursor:pointer;">▶</button>
|
|
228
364
|
</div>
|
|
229
|
-
<div class="api-token-section" style="margin-top:8px;border-top:1px solid
|
|
365
|
+
<div class="api-token-section" style="margin-top:8px;border-top:1px solid var(--fmcp-border-subtle);padding-top:8px;">
|
|
230
366
|
<div style="display:flex;align-items:center;gap:6px;">
|
|
231
|
-
<label for="figma-token" style="font-size:
|
|
232
|
-
<input type="password" id="figma-token" placeholder="figd_..." style="flex:1;min-width:0;font-size:
|
|
233
|
-
<select id="token-expiry" style="font-size:
|
|
367
|
+
<label for="figma-token" style="font-size:13px;color:var(--fmcp-text-secondary);white-space:nowrap;">API Token</label>
|
|
368
|
+
<input type="password" id="figma-token" placeholder="figd_..." style="flex:1;min-width:0;font-size:13px;padding:3px 6px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:4px;color:var(--fmcp-text-input);outline:none;" aria-label="Figma REST API token" />
|
|
369
|
+
<select id="token-expiry" style="font-size:12px;padding:2px 3px;background:var(--fmcp-bg-subtle);border:1px solid var(--fmcp-border-light);border-radius:3px;color:var(--fmcp-text-select);outline:none;" title="Token süresi (Figma'da seçtiğiniz süre)">
|
|
234
370
|
<option value="90">90g</option>
|
|
235
371
|
<option value="30">30g</option>
|
|
236
372
|
<option value="7">7g</option>
|
|
237
373
|
<option value="1">1g</option>
|
|
238
374
|
</select>
|
|
239
|
-
<button type="button" id="clear-token" style="font-size:
|
|
375
|
+
<button type="button" id="clear-token" style="font-size:12px;padding:2px 6px;background:var(--fmcp-clear-bg);border:1px solid var(--fmcp-clear-border);border-radius:3px;color:var(--fmcp-clear-text);cursor:pointer;" title="Token'ı temizle">x</button>
|
|
240
376
|
</div>
|
|
241
|
-
<div id="token-status" style="font-size:
|
|
242
|
-
<div id="token-expiry-info" style="font-size:
|
|
243
|
-
<div id="token-expiry-note" style="font-size:
|
|
377
|
+
<div id="token-status" style="font-size:12px;color:var(--fmcp-text-muted);margin-top:3px;display:none;"></div>
|
|
378
|
+
<div id="token-expiry-info" style="font-size:11px;color:var(--fmcp-text-dim);margin-top:2px;display:none;"></div>
|
|
379
|
+
<div id="token-expiry-note" style="font-size:10px;color:var(--fmcp-text-ghost);margin-top:1px;display:none;">Figma'daki token suresiyle eslestiginden emin olun</div>
|
|
244
380
|
<div id="rate-limit-bar" style="display:none;margin-top:4px;">
|
|
245
|
-
<div style="display:flex;justify-content:space-between;align-items:center;font-size:
|
|
246
|
-
<span style="display:flex;align-items:center;gap:3px;">API Limit <span id="rate-limit-info" onclick="var t=document.getElementById('rate-limit-tip');if(t)t.style.display=t.style.display==='block'?'none':'block';" style="cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:
|
|
381
|
+
<div style="display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--fmcp-text-tertiary);">
|
|
382
|
+
<span style="display:flex;align-items:center;gap:3px;">API Limit <span id="rate-limit-info" onclick="var t=document.getElementById('rate-limit-tip');if(t)t.style.display=t.style.display==='block'?'none':'block';" style="cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;border-radius:50%;border:1px solid var(--fmcp-border-faint);font-size:9px;color:var(--fmcp-text-tertiary);user-select:none;">i</span></span>
|
|
247
383
|
<span id="rate-limit-text">—</span>
|
|
248
384
|
</div>
|
|
249
|
-
<div id="rate-limit-tip" style="display:none;font-size:
|
|
250
|
-
<div style="margin-bottom:3px;color:
|
|
385
|
+
<div id="rate-limit-tip" style="display:none;font-size:10px;color:var(--fmcp-text-muted);margin-top:3px;padding:4px 6px;background:var(--fmcp-bg-tip);border-radius:3px;line-height:1.5;">
|
|
386
|
+
<div style="margin-bottom:3px;color:var(--fmcp-text-secondary);">Limiti ne tuketir?</div>
|
|
251
387
|
<div>○ Yorum okuma/yazma</div>
|
|
252
388
|
<div>○ Versiyon gecmisi</div>
|
|
253
389
|
<div>○ Gorsel export (REST ile)</div>
|
|
254
390
|
<div>○ Dosya bilgisi (REST ile)</div>
|
|
255
|
-
<div style="margin-top:3px;color:
|
|
391
|
+
<div style="margin-top:3px;color:var(--fmcp-text-secondary);">Limiti tuketmeyen (sinirsiz):</div>
|
|
256
392
|
<div>● Dosya okuma, yazma, silme</div>
|
|
257
393
|
<div>● Variable/token yonetimi</div>
|
|
258
394
|
<div>● Bilesen arama, export (plugin)</div>
|
|
259
395
|
<div>● Screenshot, frame olusturma</div>
|
|
260
396
|
</div>
|
|
261
|
-
<div style="height:3px;background:
|
|
397
|
+
<div style="height:3px;background:var(--fmcp-border-subtle);border-radius:2px;overflow:hidden;margin-top:2px;">
|
|
262
398
|
<div id="rate-limit-fill" style="height:100%;background:#4ecdc4;border-radius:2px;transition:width 0.3s;width:100%;"></div>
|
|
263
399
|
</div>
|
|
264
|
-
<div id="rate-limit-note" style="font-size:
|
|
265
|
-
<div id="rate-limit-warning" style="display:none;font-size:
|
|
400
|
+
<div id="rate-limit-note" style="font-size:10px;color:var(--fmcp-text-ghost);margin-top:2px;display:none;">REST API cagrisi sonrasi guncellenir</div>
|
|
401
|
+
<div id="rate-limit-warning" style="display:none;font-size:11px;margin-top:2px;font-weight:600;"></div>
|
|
266
402
|
</div>
|
|
267
403
|
</div>
|
|
268
404
|
</div>
|
|
269
405
|
</div>
|
|
270
406
|
|
|
271
407
|
<script>
|
|
408
|
+
// ============================================================================
|
|
409
|
+
// THEME HELPER — read CSS custom properties for dark/light compat
|
|
410
|
+
// ============================================================================
|
|
411
|
+
function fmcpVar(name) {
|
|
412
|
+
return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
|
|
413
|
+
}
|
|
414
|
+
|
|
272
415
|
// ============================================================================
|
|
273
416
|
// GLOBAL STATE - Data storage for Puppeteer/MCP access
|
|
274
417
|
// ============================================================================
|
|
@@ -972,7 +1115,7 @@
|
|
|
972
1115
|
if (statusEl) {
|
|
973
1116
|
statusEl.style.display = 'block';
|
|
974
1117
|
statusEl.textContent = hasToken ? 'Token aktif' : 'Token yok';
|
|
975
|
-
statusEl.style.color = hasToken ? 'rgba(78,205,196,0.8)' : '
|
|
1118
|
+
statusEl.style.color = hasToken ? 'rgba(78,205,196,0.8)' : fmcpVar('--fmcp-text-muted');
|
|
976
1119
|
}
|
|
977
1120
|
// Expiry countdown
|
|
978
1121
|
if (expiryEl) {
|
|
@@ -988,7 +1131,7 @@
|
|
|
988
1131
|
expiryEl.style.display = 'block';
|
|
989
1132
|
var expDate = new Date(expiresAt);
|
|
990
1133
|
expiryEl.textContent = daysLeft + ' gun kaldi (' + expDate.toLocaleDateString('tr-TR') + ')';
|
|
991
|
-
expiryEl.style.color = daysLeft <= 7 ? 'rgba(249,193,79,0.8)' : '
|
|
1134
|
+
expiryEl.style.color = daysLeft <= 7 ? 'rgba(249,193,79,0.8)' : fmcpVar('--fmcp-text-muted');
|
|
992
1135
|
}
|
|
993
1136
|
} else {
|
|
994
1137
|
expiryEl.style.display = 'none';
|
|
@@ -1740,7 +1883,7 @@
|
|
|
1740
1883
|
});
|
|
1741
1884
|
if (ports.length === 0) {
|
|
1742
1885
|
label.textContent = '—';
|
|
1743
|
-
label.style.color = '
|
|
1886
|
+
label.style.color = fmcpVar('--fmcp-text-dim');
|
|
1744
1887
|
} else if (ports.length === 1) {
|
|
1745
1888
|
label.textContent = ports[0].port + ' (' + ports[0].clientName + ')';
|
|
1746
1889
|
label.style.color = 'rgba(78,205,196,0.8)';
|
package/package.json
CHANGED