No variables found in the document.

';\n return;\n }\n \n let html = '';\n \n for (const collection of existingVariables) {\n html += `\n

${collection.name}

\n ${collection.modes.map(mode => mode.name).join(', ')}\n

\n `;\n \n for (const variable of collection.variables) {\n const firstModeKey = Object.keys(variable.modes)[0];\n const value = variable.modes[firstModeKey];\n \n let valueDisplay = '';\n \n // Format value based on type\n if (variable.type === 'COLOR') {\n const color = value;\n const rgbValue = `rgb(${Math.round(color.r * 255)}, ${Math.round(color.g * 255)}, ${Math.round(color.b * 255)})`;\n valueDisplay = `\n \n ${rgbValue}\n `;\n } else if (variable.type === 'FLOAT') {\n valueDisplay = value.toFixed(2);\n } else {\n valueDisplay = String(value);\n }\n \n html += `\n

${variable.name}

${variable.type}

${valueDisplay}

\n `;\n }\n \n html += `\n

\n `;\n }\n \n variablesList.innerHTML = html;\n}\n\n// Load config from stored values\nfunction loadConfig() {\n if (!config) return;\n \n // Set form values based on config\n if (config.source === 'notion') {\n notionDatabaseId.value = config.databaseId || '';\n \n if (config.mappingConfig) {\n notionNameField.value = config.mappingConfig.nameField || 'Name';\n notionTypeField.value = config.mappingConfig.typeField || 'Type';\n notionValueField.value = config.mappingConfig.valueField || 'Value';\n notionCollectionField.value = config.mappingConfig.collectionField || 'Collection';\n notionModeField.value = config.mappingConfig.modeField || 'Mode';\n notionDescriptionField.value = config.mappingConfig.descriptionField || 'Description';\n notionDefaultCollection.value = config.mappingConfig.defaultCollection || 'Design System';\n notionDefaultMode.value = config.mappingConfig.defaultMode || 'Default';\n }\n \n // Switch to Notion tab\n switchTab('notion');\n } else if (config.source === 'coda') {\n codaDocId.value = config.docId || '';\n codaTableId.value = config.tableId || '';\n \n if (config.mappingConfig) {\n codaNameField.value = config.mappingConfig.nameField || 'Name';\n codaTypeField.value = config.mappingConfig.typeField || 'Type';\n codaValueField.value = config.mappingConfig.valueField || 'Value';\n codaCollectionField.value = config.mappingConfig.collectionField || 'Collection';\n codaModeField.value = config.mappingConfig.modeField || 'Mode';\n codaDescriptionField.value = config.mappingConfig.descriptionField || 'Description';\n codaDefaultCollection.value = config.mappingConfig.defaultCollection || 'Design System';\n codaDefaultMode.value = config.mappingConfig.defaultMode || 'Default';\n }\n \n // Switch to Coda tab\n switchTab('coda');\n }\n \n // Load settings\n const settingsStr = localStorage.getItem('variables-sync-settings');\n if (settingsStr) {\n try {\n const settings = JSON.parse(settingsStr);\n \n // Apply settings\n autoSyncEnabled.checked = settings.autoSync?.enabled || false;\n autoSyncInterval.value = String(settings.autoSync?.interval || 30);\n createMissingCollections.checked = settings.syncOptions?.createMissingCollections !== false;\n createMissingModes.checked = settings.syncOptions?.createMissingModes !== false;\n updateExistingVariables.checked = settings.syncOptions?.updateExistingVariables !== false;\n } catch (error) {\n console.error('Error parsing settings:', error);\n }\n }\n}\n\n// Handle messages from the plugin code\nwindow.onmessage = (event) => {\n const message = event.data.pluginMessage as PluginMessage;\n \n if (!message) return;\n \n switch (message.type) {\n case 'init':\n // Store variables and config\n existingVariables = message.existingVariables || [];\n config = message.config;\n \n // Render variables list\n renderVariablesList();\n \n // Load config\n loadConfig();\n break;\n \n case 'sync-complete':\n // Update variables\n existingVariables = message.existingVariables || [];\n \n // Render variables list\n renderVariablesList();\n \n // Hide sync status\n hideSyncStatus();\n \n // Show success message\n showSuccess('Variables synced successfully!');\n \n // Switch to variables tab\n switchTab('variables');\n break;\n \n case 'sync-error':\n // Hide sync status\n hideSyncStatus();\n \n // Show error message\n showError(message.error || 'An error occurred during sync');\n break;\n }\n};\n\n// Initialize UI when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', initializeUI);","deleted","label",[167,149],"ui","permalink","https://www.val.town/x/humbl/figma-variables-manager/code/ui/ui.ts","extension","actionData","errors"]