npm - @atezer/figma-mcp-bridge - Versions diffs - 1.1.1 - Mend

@atezer/figma-mcp-bridge 1.1.1

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 (123) hide show

package/LICENSE +21 -0
package/README.md +241 -0
package/dist/browser/base.d.ts +50 -0
package/dist/browser/base.d.ts.map +1 -0
package/dist/browser/base.js +6 -0
package/dist/browser/base.js.map +1 -0
package/dist/browser/local.d.ts +81 -0
package/dist/browser/local.d.ts.map +1 -0
package/dist/browser/local.js +283 -0
package/dist/browser/local.js.map +1 -0
package/dist/cloudflare/browser/base.js +5 -0
package/dist/cloudflare/browser/cloudflare.js +156 -0
package/dist/cloudflare/browser-manager.js +157 -0
package/dist/cloudflare/core/audit-log.js +62 -0
package/dist/cloudflare/core/config.js +163 -0
package/dist/cloudflare/core/console-monitor.js +427 -0
package/dist/cloudflare/core/design-system-manifest.js +260 -0
package/dist/cloudflare/core/enrichment/enrichment-service.js +272 -0
package/dist/cloudflare/core/enrichment/index.js +7 -0
package/dist/cloudflare/core/enrichment/relationship-mapper.js +351 -0
package/dist/cloudflare/core/enrichment/style-resolver.js +326 -0
package/dist/cloudflare/core/figma-api.js +273 -0
package/dist/cloudflare/core/figma-desktop-connector.js +1029 -0
package/dist/cloudflare/core/figma-reconstruction-spec.js +402 -0
package/dist/cloudflare/core/figma-style-extractor.js +311 -0
package/dist/cloudflare/core/figma-tools.js +2883 -0
package/dist/cloudflare/core/logger.js +53 -0
package/dist/cloudflare/core/plugin-bridge-connector.js +154 -0
package/dist/cloudflare/core/plugin-bridge-server.js +174 -0
package/dist/cloudflare/core/snippet-injector.js +96 -0
package/dist/cloudflare/core/types/enriched.js +5 -0
package/dist/cloudflare/core/types/index.js +4 -0
package/dist/cloudflare/index.js +1061 -0
package/dist/cloudflare/test-browser.js +88 -0
package/dist/core/audit-log.d.ts +26 -0
package/dist/core/audit-log.d.ts.map +1 -0
package/dist/core/audit-log.js +63 -0
package/dist/core/audit-log.js.map +1 -0
package/dist/core/config.d.ts +17 -0
package/dist/core/config.d.ts.map +1 -0
package/dist/core/config.js +164 -0
package/dist/core/config.js.map +1 -0
package/dist/core/console-monitor.d.ts +82 -0
package/dist/core/console-monitor.d.ts.map +1 -0
package/dist/core/console-monitor.js +428 -0
package/dist/core/console-monitor.js.map +1 -0
package/dist/core/design-system-manifest.d.ts +272 -0
package/dist/core/design-system-manifest.d.ts.map +1 -0
package/dist/core/design-system-manifest.js +261 -0
package/dist/core/design-system-manifest.js.map +1 -0
package/dist/core/enrichment/enrichment-service.d.ts +52 -0
package/dist/core/enrichment/enrichment-service.d.ts.map +1 -0
package/dist/core/enrichment/enrichment-service.js +273 -0
package/dist/core/enrichment/enrichment-service.js.map +1 -0
package/dist/core/enrichment/index.d.ts +8 -0
package/dist/core/enrichment/index.d.ts.map +1 -0
package/dist/core/enrichment/index.js +8 -0
package/dist/core/enrichment/index.js.map +1 -0
package/dist/core/enrichment/relationship-mapper.d.ts +106 -0
package/dist/core/enrichment/relationship-mapper.d.ts.map +1 -0
package/dist/core/enrichment/relationship-mapper.js +352 -0
package/dist/core/enrichment/relationship-mapper.js.map +1 -0
package/dist/core/enrichment/style-resolver.d.ts +80 -0
package/dist/core/enrichment/style-resolver.d.ts.map +1 -0
package/dist/core/enrichment/style-resolver.js +327 -0
package/dist/core/enrichment/style-resolver.js.map +1 -0
package/dist/core/figma-api.d.ts +137 -0
package/dist/core/figma-api.d.ts.map +1 -0
package/dist/core/figma-api.js +274 -0
package/dist/core/figma-api.js.map +1 -0
package/dist/core/figma-desktop-connector.d.ts +238 -0
package/dist/core/figma-desktop-connector.d.ts.map +1 -0
package/dist/core/figma-desktop-connector.js +1030 -0
package/dist/core/figma-desktop-connector.js.map +1 -0
package/dist/core/figma-reconstruction-spec.d.ts +166 -0
package/dist/core/figma-reconstruction-spec.d.ts.map +1 -0
package/dist/core/figma-reconstruction-spec.js +403 -0
package/dist/core/figma-reconstruction-spec.js.map +1 -0
package/dist/core/figma-style-extractor.d.ts +76 -0
package/dist/core/figma-style-extractor.d.ts.map +1 -0
package/dist/core/figma-style-extractor.js +312 -0
package/dist/core/figma-style-extractor.js.map +1 -0
package/dist/core/figma-tools.d.ts +21 -0
package/dist/core/figma-tools.d.ts.map +1 -0
package/dist/core/figma-tools.js +2884 -0
package/dist/core/figma-tools.js.map +1 -0
package/dist/core/logger.d.ts +22 -0
package/dist/core/logger.d.ts.map +1 -0
package/dist/core/logger.js +54 -0
package/dist/core/logger.js.map +1 -0
package/dist/core/plugin-bridge-connector.d.ts +133 -0
package/dist/core/plugin-bridge-connector.d.ts.map +1 -0
package/dist/core/plugin-bridge-connector.js +155 -0
package/dist/core/plugin-bridge-connector.js.map +1 -0
package/dist/core/plugin-bridge-server.d.ts +42 -0
package/dist/core/plugin-bridge-server.d.ts.map +1 -0
package/dist/core/plugin-bridge-server.js +175 -0
package/dist/core/plugin-bridge-server.js.map +1 -0
package/dist/core/snippet-injector.d.ts +24 -0
package/dist/core/snippet-injector.d.ts.map +1 -0
package/dist/core/snippet-injector.js +97 -0
package/dist/core/snippet-injector.js.map +1 -0
package/dist/core/types/enriched.d.ts +213 -0
package/dist/core/types/enriched.d.ts.map +1 -0
package/dist/core/types/enriched.js +6 -0
package/dist/core/types/enriched.js.map +1 -0
package/dist/core/types/index.d.ts +116 -0
package/dist/core/types/index.d.ts.map +1 -0
package/dist/core/types/index.js +5 -0
package/dist/core/types/index.js.map +1 -0
package/dist/local-plugin-only.d.ts +13 -0
package/dist/local-plugin-only.d.ts.map +1 -0
package/dist/local-plugin-only.js +567 -0
package/dist/local-plugin-only.js.map +1 -0
package/dist/local.d.ts +73 -0
package/dist/local.d.ts.map +1 -0
package/dist/local.js +2466 -0
package/dist/local.js.map +1 -0
package/f-mcp-plugin/README.md +280 -0
package/f-mcp-plugin/code.js +2222 -0
package/f-mcp-plugin/manifest.json +14 -0
package/f-mcp-plugin/ui.html +877 -0
package/package.json +82 -0

package/f-mcp-plugin/ui.html ADDED Viewed

@@ -0,0 +1,877 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <style>
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+    body {
+      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 11px;
+      background: var(--figma-color-bg, #2c2c2c);
+      color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 6px 8px;
+      user-select: none;
+    }
+    .bridge-status {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      background: var(--figma-color-bg-secondary, #383838);
+      border: 1px solid var(--figma-color-border, #4a4a4a);
+      border-radius: 4px;
+      white-space: nowrap;
+    }
+    .status-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+    .status-indicator.loading {
+      background: #f5a623;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    .status-indicator.active {
+      background: #18a957;
+      box-shadow: 0 0 6px rgba(24, 169, 87, 0.6);
+      animation: glow 2s ease-in-out infinite;
+    }
+    .status-indicator.error {
+      background: #f24822;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+    @keyframes glow {
+      0%, 100% { box-shadow: 0 0 4px rgba(24, 169, 87, 0.4); }
+      50% { box-shadow: 0 0 8px rgba(24, 169, 87, 0.8); }
+    }
+    .status-text {
+      font-weight: 500;
+      letter-spacing: 0.2px;
+    }
+    .status-text .label {
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
+    }
+    .status-text .state {
+      color: var(--figma-color-text, rgba(255, 255, 255, 0.9));
+      margin-left: 4px;
+    }
+    .bridge-row {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      width: 100%;
+    }
+    .bridge-port {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 10px;
+    }
+    .bridge-port label {
+      color: var(--figma-color-text-secondary, rgba(255, 255, 255, 0.7));
+    }
+    .bridge-port input {
+      width: 56px;
+      padding: 2px 4px;
+      background: var(--figma-color-bg-tertiary, #1e1e1e);
+      border: 1px solid var(--figma-color-border, #4a4a4a);
+      border-radius: 3px;
+      color: inherit;
+      font-size: 11px;
+    }
+    /* Light theme support */
+    @media (prefers-color-scheme: light) {
+      body {
+        background: #f5f5f5;
+        color: #333;
+      }
+      .bridge-status {
+        background: #fff;
+        border-color: #e5e5e5;
+      }
+      .status-text .label {
+        color: #666;
+      }
+      .status-text .state {
+        color: #333;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="bridge-row">
+    <div class="bridge-status" id="status-container" title="When 'no server': run MCP server (e.g. npm run dev:local) or set correct port">
+      <div class="status-indicator loading" id="status-dot"></div>
+      <div class="status-text">
+        <span class="label">MCP</span>
+        <span class="state" id="status-state">connecting</span>
+      </div>
+    </div>
+    <div class="bridge-port" title="Port (multi-instance: her kullanici farkli port)">
+      <label for="mcp-port">Port</label>
+      <input type="number" id="mcp-port" min="5454" max="5470" value="5454" />
+    </div>
+  </div>
+  <script>
+    // ============================================================================
+    // GLOBAL STATE - Data storage for Puppeteer/MCP access
+    // ============================================================================
+    window.__figmaVariablesData = null;
+    window.__figmaVariablesReady = false;
+    window.__figmaComponentData = null;
+    window.__figmaComponentRequests = new Map();
+    window.__figmaPendingRequests = new Map();
+    let requestIdCounter = 0;
+    // UI update helper
+    function updateStatus(state, isActive, isError) {
+      const dot = document.getElementById('status-dot');
+      const stateText = document.getElementById('status-state');
+      dot.className = 'status-indicator ' + (isError ? 'error' : (isActive ? 'active' : 'loading'));
+      stateText.textContent = state;
+    }
+    // ============================================================================
+    // COMMAND INFRASTRUCTURE - Generic plugin command sender
+    // ============================================================================
+    window.sendPluginCommand = (type, params, timeoutMs) => {
+      timeoutMs = timeoutMs || 15000;
+      return new Promise((resolve, reject) => {
+        const requestId = type.toLowerCase() + '_' + (++requestIdCounter) + '_' + Date.now();
+        const timeoutId = setTimeout(() => {
+          if (window.__figmaPendingRequests.has(requestId)) {
+            window.__figmaPendingRequests.delete(requestId);
+            reject(new Error(type + ' request timed out after ' + timeoutMs + 'ms'));
+          }
+        }, timeoutMs);
+        window.__figmaPendingRequests.set(requestId, { resolve: resolve, reject: reject, type: type, timeoutId: timeoutId });
+        var message = { type: type, requestId: requestId };
+        for (var key in params) {
+          if (params.hasOwnProperty(key)) {
+            message[key] = params[key];
+          }
+        }
+        parent.postMessage({ pluginMessage: message }, '*');
+        console.log('[F-MCP ATezer Bridge] Sent:', type);
+      });
+    };
+    // ============================================================================
+    // VARIABLE OPERATIONS
+    // ============================================================================
+    window.executeCode = (code, timeout) => {
+      return window.sendPluginCommand('EXECUTE_CODE', { code: code, timeout: timeout || 5000 }, (timeout || 5000) + 2000)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.updateVariable = (variableId, modeId, value) => {
+      return window.sendPluginCommand('UPDATE_VARIABLE', { variableId: variableId, modeId: modeId, value: value })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.createVariable = (name, collectionId, resolvedType, options) => {
+      var params = { name: name, collectionId: collectionId, resolvedType: resolvedType };
+      if (options) {
+        if (options.valuesByMode) params.valuesByMode = options.valuesByMode;
+        if (options.description) params.description = options.description;
+        if (options.scopes) params.scopes = options.scopes;
+      }
+      return window.sendPluginCommand('CREATE_VARIABLE', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.createVariableCollection = (name, options) => {
+      var params = { name: name };
+      if (options) {
+        if (options.initialModeName) params.initialModeName = options.initialModeName;
+        if (options.additionalModes) params.additionalModes = options.additionalModes;
+      }
+      return window.sendPluginCommand('CREATE_VARIABLE_COLLECTION', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.deleteVariable = (variableId) => {
+      return window.sendPluginCommand('DELETE_VARIABLE', { variableId: variableId })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.deleteVariableCollection = (collectionId) => {
+      return window.sendPluginCommand('DELETE_VARIABLE_COLLECTION', { collectionId: collectionId })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.renameVariable = (variableId, newName) => {
+      return window.sendPluginCommand('RENAME_VARIABLE', { variableId: variableId, newName: newName })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.addMode = (collectionId, modeName) => {
+      return window.sendPluginCommand('ADD_MODE', { collectionId: collectionId, modeName: modeName })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.renameMode = (collectionId, modeId, newName) => {
+      return window.sendPluginCommand('RENAME_MODE', { collectionId: collectionId, modeId: modeId, newName: newName })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.refreshVariables = () => {
+      return window.sendPluginCommand('REFRESH_VARIABLES', {})
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // ============================================================================
+    // COMPONENT OPERATIONS
+    // ============================================================================
+    window.getLocalComponents = () => {
+      return window.sendPluginCommand('GET_LOCAL_COMPONENTS', {}, 300000)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.instantiateComponent = (componentKey, options) => {
+      var params = { componentKey: componentKey };
+      if (options) {
+        if (options.nodeId) params.nodeId = options.nodeId;
+        if (options.position) params.position = options.position;
+        if (options.size) params.size = options.size;
+        if (options.overrides) params.overrides = options.overrides;
+        if (options.variant) params.variant = options.variant;
+        if (options.parentId) params.parentId = options.parentId;
+      }
+      return window.sendPluginCommand('INSTANTIATE_COMPONENT', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    window.requestComponentData = (nodeId) => {
+      return new Promise((resolve, reject) => {
+        const requestId = 'component_' + (++requestIdCounter) + '_' + Date.now();
+        window.__figmaComponentRequests.set(requestId, { resolve: resolve, reject: reject });
+        parent.postMessage({ pluginMessage: { type: 'GET_COMPONENT', requestId: requestId, nodeId: nodeId } }, '*');
+        setTimeout(() => {
+          if (window.__figmaComponentRequests.has(requestId)) {
+            window.__figmaComponentRequests.delete(requestId);
+            reject(new Error('Component request timed out'));
+          }
+        }, 10000);
+      });
+    };
+    // ============================================================================
+    // NEW: COMPONENT PROPERTY MANAGEMENT
+    // ============================================================================
+    // Set component/node description
+    window.setNodeDescription = (nodeId, description, descriptionMarkdown) => {
+      return window.sendPluginCommand('SET_NODE_DESCRIPTION', {
+        nodeId: nodeId,
+        description: description,
+        descriptionMarkdown: descriptionMarkdown
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Add a component property (BOOLEAN, TEXT, INSTANCE_SWAP, VARIANT)
+    // Note: We use 'propertyType' instead of 'type' to avoid collision with message type field
+    window.addComponentProperty = (nodeId, propertyName, type, defaultValue, options) => {
+      var params = { nodeId: nodeId, propertyName: propertyName, propertyType: type, defaultValue: defaultValue };
+      if (options) {
+        if (options.preferredValues) params.preferredValues = options.preferredValues;
+      }
+      return window.sendPluginCommand('ADD_COMPONENT_PROPERTY', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Edit an existing component property
+    window.editComponentProperty = (nodeId, propertyName, newValue) => {
+      return window.sendPluginCommand('EDIT_COMPONENT_PROPERTY', {
+        nodeId: nodeId,
+        propertyName: propertyName,
+        newValue: newValue
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Delete a component property
+    window.deleteComponentProperty = (nodeId, propertyName) => {
+      return window.sendPluginCommand('DELETE_COMPONENT_PROPERTY', {
+        nodeId: nodeId,
+        propertyName: propertyName
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // ============================================================================
+    // NEW: NODE MANIPULATION
+    // ============================================================================
+    // Resize any node
+    window.resizeNode = (nodeId, width, height, withConstraints) => {
+      return window.sendPluginCommand('RESIZE_NODE', {
+        nodeId: nodeId,
+        width: width,
+        height: height,
+        withConstraints: withConstraints !== false
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Move/position a node
+    window.moveNode = (nodeId, x, y) => {
+      return window.sendPluginCommand('MOVE_NODE', { nodeId: nodeId, x: x, y: y })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set node fills (colors)
+    window.setNodeFills = (nodeId, fills) => {
+      return window.sendPluginCommand('SET_NODE_FILLS', { nodeId: nodeId, fills: fills })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set node strokes
+    window.setNodeStrokes = (nodeId, strokes, strokeWeight) => {
+      var params = { nodeId: nodeId, strokes: strokes };
+      if (strokeWeight !== undefined) params.strokeWeight = strokeWeight;
+      return window.sendPluginCommand('SET_NODE_STROKES', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set node opacity
+    window.setNodeOpacity = (nodeId, opacity) => {
+      return window.sendPluginCommand('SET_NODE_OPACITY', { nodeId: nodeId, opacity: opacity })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set node corner radius
+    window.setNodeCornerRadius = (nodeId, radius) => {
+      return window.sendPluginCommand('SET_NODE_CORNER_RADIUS', { nodeId: nodeId, radius: radius })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Clone a node
+    window.cloneNode = (nodeId) => {
+      return window.sendPluginCommand('CLONE_NODE', { nodeId: nodeId })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Delete a node
+    window.deleteNode = (nodeId) => {
+      return window.sendPluginCommand('DELETE_NODE', { nodeId: nodeId })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Rename a node
+    window.renameNode = (nodeId, newName) => {
+      return window.sendPluginCommand('RENAME_NODE', { nodeId: nodeId, newName: newName })
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set text content (for text nodes)
+    window.setTextContent = (nodeId, text, options) => {
+      var params = { nodeId: nodeId, text: text };
+      if (options) {
+        if (options.fontSize) params.fontSize = options.fontSize;
+        if (options.fontWeight) params.fontWeight = options.fontWeight;
+        if (options.fontFamily) params.fontFamily = options.fontFamily;
+      }
+      return window.sendPluginCommand('SET_TEXT_CONTENT', params)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Create a new node as child
+    window.createChildNode = (parentId, nodeType, properties) => {
+      return window.sendPluginCommand('CREATE_CHILD_NODE', {
+        parentId: parentId,
+        nodeType: nodeType,
+        properties: properties || {}
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // ============================================================================
+    // NEW: SCREENSHOT & INSTANCE PROPERTIES (Fix for visual validation loop)
+    // ============================================================================
+    // Capture screenshot using plugin's exportAsync (reads current plugin state, not cloud)
+    // This solves the race condition where REST API screenshots show stale state
+    window.captureScreenshot = (nodeId, options) => {
+      var params = { nodeId: nodeId };
+      if (options) {
+        if (options.format) params.format = options.format;  // PNG, JPG, SVG
+        if (options.scale) params.scale = options.scale;      // 1, 2, 4, etc.
+      }
+      return window.sendPluginCommand('CAPTURE_SCREENSHOT', params, 30000)
+        .catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // Set component instance properties (TEXT, BOOLEAN, INSTANCE_SWAP, VARIANT)
+    // This is the correct way to update component instances vs direct text node editing
+    window.setInstanceProperties = (nodeId, properties) => {
+      return window.sendPluginCommand('SET_INSTANCE_PROPERTIES', {
+        nodeId: nodeId,
+        properties: properties
+      }).catch(function(err) { return { success: false, error: err.message || String(err) }; });
+    };
+    // ============================================================================
+    // MESSAGE HANDLER - Process responses from plugin worker
+    // ============================================================================
+    window.onmessage = (event) => {
+      const msg = event.data.pluginMessage;
+      if (!msg) return;
+      // Generic result handler
+      const handleResult = (resultType, dataKey) => {
+        const request = window.__figmaPendingRequests.get(msg.requestId);
+        if (request) {
+          if (request.timeoutId) clearTimeout(request.timeoutId);
+          if (msg.success) {
+            var result = { success: true };
+            if (dataKey && msg[dataKey] !== undefined) result[dataKey] = msg[dataKey];
+            if (msg.data !== undefined) result.data = msg.data;
+            request.resolve(result);
+          } else {
+            request.resolve({ success: false, error: msg.error || 'Unknown error' });
+          }
+          window.__figmaPendingRequests.delete(msg.requestId);
+        }
+      };
+      // Handle message types
+      switch (msg.type) {
+        case 'VARIABLES_DATA':
+          window.__figmaVariablesData = msg.data;
+          window.__figmaVariablesReady = true;
+          updateStatus('ready', true, false);
+          console.log('[F-MCP ATezer Bridge] Active - ' + (msg.data.variables?.length || 0) + ' vars');
+          break;
+        case 'COMPONENT_DATA':
+          window.__figmaComponentData = msg.data;
+          var req = window.__figmaComponentRequests.get(msg.requestId);
+          if (req) { req.resolve(msg.data); window.__figmaComponentRequests.delete(msg.requestId); }
+          break;
+        case 'COMPONENT_ERROR':
+          var req2 = window.__figmaComponentRequests.get(msg.requestId);
+          if (req2) { req2.reject(new Error(msg.error)); window.__figmaComponentRequests.delete(msg.requestId); }
+          break;
+        case 'ERROR':
+          window.__figmaVariablesReady = false;
+          updateStatus('error', false, true);
+          console.error('[F-MCP ATezer Bridge] Error:', msg.error);
+          break;
+        // Variable operations
+        case 'EXECUTE_CODE_RESULT':
+          handleResult('EXECUTE_CODE', 'result');
+          break;
+        case 'UPDATE_VARIABLE_RESULT':
+          handleResult('UPDATE_VARIABLE', 'variable');
+          break;
+        case 'CREATE_VARIABLE_RESULT':
+          handleResult('CREATE_VARIABLE', 'variable');
+          break;
+        case 'CREATE_VARIABLE_COLLECTION_RESULT':
+          handleResult('CREATE_VARIABLE_COLLECTION', 'collection');
+          break;
+        case 'DELETE_VARIABLE_RESULT':
+          handleResult('DELETE_VARIABLE', 'deleted');
+          break;
+        case 'DELETE_VARIABLE_COLLECTION_RESULT':
+          handleResult('DELETE_VARIABLE_COLLECTION', 'deleted');
+          break;
+        case 'REFRESH_VARIABLES_RESULT':
+          handleResult('REFRESH_VARIABLES', null);
+          break;
+        case 'RENAME_VARIABLE_RESULT':
+          handleResult('RENAME_VARIABLE', 'variable');
+          break;
+        case 'ADD_MODE_RESULT':
+          handleResult('ADD_MODE', 'collection');
+          break;
+        case 'RENAME_MODE_RESULT':
+          handleResult('RENAME_MODE', 'collection');
+          break;
+        case 'GET_LOCAL_COMPONENTS_RESULT':
+          handleResult('GET_LOCAL_COMPONENTS', null);
+          break;
+        case 'INSTANTIATE_COMPONENT_RESULT':
+          handleResult('INSTANTIATE_COMPONENT', 'instance');
+          break;
+        // NEW: Component property operations
+        case 'SET_NODE_DESCRIPTION_RESULT':
+          handleResult('SET_NODE_DESCRIPTION', 'node');
+          break;
+        case 'ADD_COMPONENT_PROPERTY_RESULT':
+          handleResult('ADD_COMPONENT_PROPERTY', 'propertyName');
+          break;
+        case 'EDIT_COMPONENT_PROPERTY_RESULT':
+          handleResult('EDIT_COMPONENT_PROPERTY', 'propertyName');
+          break;
+        case 'DELETE_COMPONENT_PROPERTY_RESULT':
+          handleResult('DELETE_COMPONENT_PROPERTY', null);
+          break;
+        // NEW: Node manipulation operations
+        case 'RESIZE_NODE_RESULT':
+          handleResult('RESIZE_NODE', 'node');
+          break;
+        case 'MOVE_NODE_RESULT':
+          handleResult('MOVE_NODE', 'node');
+          break;
+        case 'SET_NODE_FILLS_RESULT':
+          handleResult('SET_NODE_FILLS', 'node');
+          break;
+        case 'SET_NODE_STROKES_RESULT':
+          handleResult('SET_NODE_STROKES', 'node');
+          break;
+        case 'SET_NODE_OPACITY_RESULT':
+          handleResult('SET_NODE_OPACITY', 'node');
+          break;
+        case 'SET_NODE_CORNER_RADIUS_RESULT':
+          handleResult('SET_NODE_CORNER_RADIUS', 'node');
+          break;
+        case 'CLONE_NODE_RESULT':
+          handleResult('CLONE_NODE', 'node');
+          break;
+        case 'DELETE_NODE_RESULT':
+          handleResult('DELETE_NODE', 'deleted');
+          break;
+        case 'RENAME_NODE_RESULT':
+          handleResult('RENAME_NODE', 'node');
+          break;
+        case 'SET_TEXT_CONTENT_RESULT':
+          handleResult('SET_TEXT_CONTENT', 'node');
+          break;
+        case 'CREATE_CHILD_NODE_RESULT':
+          handleResult('CREATE_CHILD_NODE', 'node');
+          break;
+        // NEW: Screenshot and instance properties (visual validation loop fix)
+        case 'CAPTURE_SCREENSHOT_RESULT':
+          handleResult('CAPTURE_SCREENSHOT', 'image');
+          break;
+        case 'SET_INSTANCE_PROPERTIES_RESULT':
+          handleResult('SET_INSTANCE_PROPERTIES', 'instance');
+          break;
+        case 'GET_DOCUMENT_STRUCTURE_RESULT':
+          handleResult('GET_DOCUMENT_STRUCTURE', null);
+          break;
+        case 'GET_LOCAL_STYLES_RESULT':
+          handleResult('GET_LOCAL_STYLES', null);
+          break;
+        case 'CONSOLE_LOGS_RESULT':
+          handleResult('GET_CONSOLE_LOGS', 'data');
+          break;
+        case 'CLEAR_CONSOLE_RESULT':
+          handleResult('CLEAR_CONSOLE', null);
+          break;
+        case 'BATCH_CREATE_VARIABLES_RESULT':
+          handleResult('BATCH_CREATE_VARIABLES', 'data');
+          break;
+        case 'BATCH_UPDATE_VARIABLES_RESULT':
+          handleResult('BATCH_UPDATE_VARIABLES', 'data');
+          break;
+        case 'SETUP_DESIGN_TOKENS_RESULT':
+          handleResult('SETUP_DESIGN_TOKENS', 'data');
+          break;
+        case 'ARRANGE_COMPONENT_SET_RESULT':
+          handleResult('ARRANGE_COMPONENT_SET', 'data');
+          break;
+      }
+    };
+    window.getDocumentStructure = (depth, verbosity) => {
+      return window.sendPluginCommand('GET_DOCUMENT_STRUCTURE', { depth: depth || 1, verbosity: verbosity || 'summary' }, 30000).then(function(r) {
+        if (r && r.success === false) return r;
+        return r && r.data !== undefined ? r.data : r;
+      });
+    };
+    window.getLocalStyles = (verbosity) => {
+      return window.sendPluginCommand('GET_LOCAL_STYLES', { verbosity: verbosity || 'summary' }, 15000).then(function(r) { return r.data; });
+    };
+    window.getConsoleLogs = (limit) => {
+      return window.sendPluginCommand('GET_CONSOLE_LOGS', { limit: limit || 50 }, 5000).then(function(r) {
+        if (r && r.success === false) return r;
+        return r && r.data ? r.data : { logs: [], total: 0 };
+      });
+    };
+    window.clearConsole = () => {
+      return window.sendPluginCommand('CLEAR_CONSOLE', {}, 3000).then(function(r) { return r || { success: true }; });
+    };
+    window.batchCreateVariables = (items) => {
+      return window.sendPluginCommand('BATCH_CREATE_VARIABLES', { items: items || [] }, 60000).then(function(r) { return r && r.data ? r.data : r; });
+    };
+    window.batchUpdateVariables = (items) => {
+      return window.sendPluginCommand('BATCH_UPDATE_VARIABLES', { items: items || [] }, 60000).then(function(r) { return r && r.data ? r.data : r; });
+    };
+    window.setupDesignTokens = (payload) => {
+      return window.sendPluginCommand('SETUP_DESIGN_TOKENS', {
+        collectionName: payload.collectionName,
+        modes: payload.modes,
+        tokens: payload.tokens
+      }, 30000).then(function(r) { return r; });
+    };
+    window.arrangeComponentSet = (nodeIds) => {
+      return window.sendPluginCommand('ARRANGE_COMPONENT_SET', { nodeIds: nodeIds || [] }, 15000).then(function(r) { return r && r.data ? r.data : r; });
+    };
+    // ============================================================================
+    // MCP PLUGIN BRIDGE - WebSocket client (no Figma debug port needed)
+    // Port configurable for multi-instance: her kullanici kendi portunu secer (5454-5470)
+    // ============================================================================
+    var MCP_BRIDGE_STORAGE_KEY = 'f-mcp-bridge-port';
+    var mcpBridgeWs = null;
+    var mcpBridgeReconnectTimer = null;
+    function getMcpBridgePort() {
+      var el = document.getElementById('mcp-port');
+      if (!el) return 5454;
+      var n = parseInt(el.value, 10);
+      if (isNaN(n) || n < 5454 || n > 5470) return 5454;
+      return n;
+    }
+    function initMcpPortInput() {
+      try {
+        var stored = localStorage.getItem(MCP_BRIDGE_STORAGE_KEY);
+        if (stored) {
+          var n = parseInt(stored, 10);
+          if (n >= 5454 && n <= 5470) {
+            var el = document.getElementById('mcp-port');
+            if (el) { el.value = n; }
+          }
+        }
+      } catch (e) {}
+      var el = document.getElementById('mcp-port');
+      if (el) {
+        el.addEventListener('change', function() {
+          var port = getMcpBridgePort();
+          try { localStorage.setItem(MCP_BRIDGE_STORAGE_KEY, String(port)); } catch (e) {}
+          if (mcpBridgeWs) {
+            mcpBridgeWs.close();
+            mcpBridgeWs = null;
+          }
+          connectMcpBridge();
+        });
+      }
+    }
+    function connectMcpBridge() {
+      if (mcpBridgeWs && mcpBridgeWs.readyState === 1) return;
+      var port = getMcpBridgePort();
+      var url = 'ws://localhost:' + port;
+      try {
+        mcpBridgeWs = new WebSocket(url);
+        mcpBridgeWs.onopen = function() {
+          console.log('[F-MCP ATezer Bridge] Connected to MCP server on port ' + port);
+          updateStatus('ready', true, false);
+          mcpBridgeWs.send(JSON.stringify({ type: 'ready' }));
+        };
+        mcpBridgeWs.onmessage = function(event) {
+          try {
+            var msg = JSON.parse(event.data);
+            if (!msg.id || !msg.method) return;
+            var id = msg.id;
+            var method = msg.method;
+            var params = msg.params || {};
+            var run = function() {
+              if (method === 'getVariablesFromPluginUI') {
+                if (!window.__figmaVariablesReady || !window.__figmaVariablesData)
+                  return { success: false, error: 'Variables not loaded yet' };
+                return { success: true, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
+              }
+              if (method === 'getComponentFromPluginUI') {
+                return window.requestComponentData(params.nodeId).then(function(data) {
+                  return { success: true, component: data };
+                });
+              }
+              if (method === 'getComponentByNodeId') {
+                return window.requestComponentData(params.nodeId).then(function(data) {
+                  return { success: true, component: data };
+                });
+              }
+              if (method === 'getVariables') {
+                if (!window.__figmaVariablesReady || !window.__figmaVariablesData)
+                  return { success: false, error: 'Variables not loaded yet' };
+                return { success: true, timestamp: Date.now(), fileMetadata: {}, variables: window.__figmaVariablesData.variables, variableCollections: window.__figmaVariablesData.variableCollections };
+              }
+              if (method === 'executeCodeViaUI') {
+                return window.executeCode(params.code, params.timeout);
+              }
+              if (method === 'updateVariable') {
+                return window.updateVariable(params.variableId, params.modeId, params.value);
+              }
+              if (method === 'createVariable') {
+                return window.createVariable(params.name, params.collectionId, params.resolvedType, params.options);
+              }
+              if (method === 'createVariableCollection') {
+                return window.createVariableCollection(params.name, params.options);
+              }
+              if (method === 'deleteVariable') {
+                return window.deleteVariable(params.variableId);
+              }
+              if (method === 'deleteVariableCollection') {
+                return window.deleteVariableCollection(params.collectionId);
+              }
+              if (method === 'renameVariable') {
+                return window.renameVariable(params.variableId, params.newName);
+              }
+              if (method === 'addMode') {
+                return window.addMode(params.collectionId, params.modeName);
+              }
+              if (method === 'renameMode') {
+                return window.renameMode(params.collectionId, params.modeId, params.newName);
+              }
+              if (method === 'refreshVariables') {
+                return window.refreshVariables();
+              }
+              if (method === 'getLocalComponents') {
+                return window.getLocalComponents();
+              }
+              if (method === 'instantiateComponent') {
+                return window.instantiateComponent(params.componentKey, params.options);
+              }
+              if (method === 'setNodeDescription') {
+                return window.setNodeDescription(params.nodeId, params.description, params.descriptionMarkdown);
+              }
+              if (method === 'addComponentProperty') {
+                return window.addComponentProperty(params.nodeId, params.propertyName, params.type, params.defaultValue, params.options);
+              }
+              if (method === 'editComponentProperty') {
+                return window.editComponentProperty(params.nodeId, params.propertyName, params.newValue);
+              }
+              if (method === 'deleteComponentProperty') {
+                return window.deleteComponentProperty(params.nodeId, params.propertyName);
+              }
+              if (method === 'resizeNode') {
+                return window.resizeNode(params.nodeId, params.width, params.height, params.withConstraints);
+              }
+              if (method === 'moveNode') {
+                return window.moveNode(params.nodeId, params.x, params.y);
+              }
+              if (method === 'setNodeFills') {
+                return window.setNodeFills(params.nodeId, params.fills);
+              }
+              if (method === 'setNodeStrokes') {
+                return window.setNodeStrokes(params.nodeId, params.strokes, params.strokeWeight);
+              }
+              if (method === 'setNodeOpacity') {
+                return window.setNodeOpacity(params.nodeId, params.opacity);
+              }
+              if (method === 'setNodeCornerRadius') {
+                return window.setNodeCornerRadius(params.nodeId, params.radius);
+              }
+              if (method === 'cloneNode') {
+                return window.cloneNode(params.nodeId);
+              }
+              if (method === 'deleteNode') {
+                return window.deleteNode(params.nodeId);
+              }
+              if (method === 'renameNode') {
+                return window.renameNode(params.nodeId, params.newName);
+              }
+              if (method === 'setTextContent') {
+                return window.setTextContent(params.nodeId, params.text, params.options);
+              }
+              if (method === 'createChildNode') {
+                return window.createChildNode(params.parentId, params.nodeType, params.properties);
+              }
+              if (method === 'captureScreenshot') {
+                return window.captureScreenshot(params.nodeId, params.options);
+              }
+              if (method === 'setInstanceProperties') {
+                return window.setInstanceProperties(params.nodeId, params.properties);
+              }
+              if (method === 'getDocumentStructure') {
+                return window.getDocumentStructure(params.depth, params.verbosity);
+              }
+              if (method === 'getLocalStyles') {
+                return window.getLocalStyles(params.verbosity);
+              }
+              if (method === 'getConsoleLogs') {
+                return window.getConsoleLogs(params.limit);
+              }
+              if (method === 'clearConsole') {
+                return window.clearConsole();
+              }
+              if (method === 'batchCreateVariables') {
+                return window.batchCreateVariables(params.items);
+              }
+              if (method === 'batchUpdateVariables') {
+                return window.batchUpdateVariables(params.items);
+              }
+              if (method === 'setupDesignTokens') {
+                return window.setupDesignTokens(params);
+              }
+              if (method === 'arrangeComponentSet') {
+                return window.arrangeComponentSet(params.nodeIds);
+              }
+              return { success: false, error: 'Unknown method: ' + method };
+            };
+            Promise.resolve(run()).then(function(result) {
+              mcpBridgeWs.send(JSON.stringify({ id: id, result: result }));
+            }).catch(function(err) {
+              mcpBridgeWs.send(JSON.stringify({ id: id, error: err.message || String(err) }));
+            });
+          } catch (e) {
+            if (mcpBridgeWs && mcpBridgeWs.readyState === 1 && msg && msg.id)
+              mcpBridgeWs.send(JSON.stringify({ id: msg.id, error: e.message || String(e) }));
+          }
+        };
+        mcpBridgeWs.onclose = function() {
+          mcpBridgeWs = null;
+          updateStatus('no server', false, true);
+          if (mcpBridgeReconnectTimer) clearTimeout(mcpBridgeReconnectTimer);
+          mcpBridgeReconnectTimer = setTimeout(connectMcpBridge, 2000);
+        };
+        mcpBridgeWs.onerror = function() {
+          mcpBridgeWs = null;
+          updateStatus('no server', false, true);
+          if (mcpBridgeReconnectTimer) clearTimeout(mcpBridgeReconnectTimer);
+          mcpBridgeReconnectTimer = setTimeout(connectMcpBridge, 2000);
+        };
+      } catch (e) {
+        updateStatus('no server', false, true);
+        if (mcpBridgeReconnectTimer) clearTimeout(mcpBridgeReconnectTimer);
+        mcpBridgeReconnectTimer = setTimeout(connectMcpBridge, 2000);
+      }
+    }
+    if (typeof WebSocket !== 'undefined') {
+      initMcpPortInput();
+      connectMcpBridge();
+    }
+  </script>
+</body>
+</html>