diff --git a/index.html b/index.html
new file mode 100644
index 0000000..0690f85
--- /dev/null
+++ b/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ TRMNL YML Form Builder - Web Component Test
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/trmnl-form-builder.js b/trmnl-form-builder.js
new file mode 100644
index 0000000..86dcd89
--- /dev/null
+++ b/trmnl-form-builder.js
@@ -0,0 +1,2148 @@
+/**
+ * TRMNL YML Form Builder Web Component
+ *
+ * A standalone, dependency-free Web Component for building TRMNL custom plugin forms.
+ * Requires only Tailwind CSS for styling.
+ *
+ * Usage:
+ *
+ *
+ * Attributes:
+ * - accent-color: Hex color for accent elements (default: #F8654B)
+ * - theme: 'light' or 'dark' (default: 'light')
+ */
+
+class TRMLYamlForm extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: 'open' });
+
+ // State management
+ this.fields = [];
+ this.selectedFieldId = null;
+ this.draggedFieldId = null;
+ this.draggedFromIndex = null;
+ this.nextFieldId = 1;
+
+ // Configuration
+ this.accentColor = this.getAttribute('accent-color') || '#F8654B';
+ this.theme = this.getAttribute('theme') || 'light';
+
+ // Categories cache
+ this.categories = [];
+ this.loadCategories();
+
+ // supported locales (based on trmnl-i18n)
+ this.locales = [
+ { code: 'de', label: 'Deutsch' },
+ { code: 'es-ES', label: 'Español' },
+ { code: 'fr', label: 'Français' },
+ { code: 'it', label: 'Italiano' },
+ { code: 'nl', label: 'Nederlands' },
+ { code: 'pt-BR', label: 'Português' },
+ { code: 'uk', label: 'український' }
+ ];
+
+ // --- Property Definitions (How to render each setting) ---
+ this.propertyDefinitions = {
+ // Common
+ keyname: { label: 'Keyname', type: 'text', help: 'Lowercase alphanumeric + underscores only' },
+ name: { label: 'Name', type: 'text', placeholder: 'About This Plugin' },
+ description: { label: 'Description', type: 'textarea', placeholder: 'Main description (HTML-friendly)' },
+ help_text: { label: 'Help Text', type: 'textarea', placeholder: 'Sub-label / hint (HTML-friendly)' },
+ optional: { label: 'Optional field', type: 'checkbox' },
+
+ // Inputs
+ default: { label: 'Default Value', type: 'text', placeholder: 'Pre-selected value' },
+ placeholder: { label: 'Placeholder', type: 'text', placeholder: 'Example value' },
+ min: { label: 'Minimum Value', type: 'number', placeholder: '0' },
+ max: { label: 'Maximum Value', type: 'number', placeholder: '100' },
+ maxlength: { label: 'Maximum Length', type: 'number', placeholder: '12' },
+ rows: { label: 'Rows', type: 'number', placeholder: '10' },
+
+ // Selection
+ options: { label: 'Options (one per line)', type: 'textarea', placeholder: 'Option 1\nOption 2', help: 'Enter one option per line' },
+ multiple: { label: 'Allow multiple selection', type: 'checkbox' },
+ endpoint: { label: 'Endpoint *', type: 'text', placeholder: 'https://api.example.com/options' },
+ http_verb: {
+ label: 'HTTP Method',
+ type: 'select',
+ default: 'GET',
+ options: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH', 'HEAD', 'OPTIONS', 'TRACE', 'CONNECT'],
+ placeholder: 'GET'
+ },
+
+ // Special
+ value: { label: 'Value', type: 'text', placeholder: 'sk_live_abc123xyz' },
+
+ // Author Bio Specifics
+ categories: { label: 'Categories (Max 2)', type: 'custom_categories' },
+ github_url: { label: 'GitHub URL', type: 'url', placeholder: 'https://github.com/username' },
+ email_address: { label: 'Email Address', type: 'text', placeholder: 'user@example.com' },
+ learn_more_url: { label: 'Learn More URL', type: 'url', placeholder: 'https://thesatanictemple.com/' },
+ youtube_url: { label: 'YouTube URL', type: 'url', placeholder: 'https://www.youtube.com/@useTRMNL' },
+
+ // The Translation Manager
+ i18n_descriptions: { label: 'Description Translations', type: 'i18n_map', help: 'Add translated descriptions for specific locales.' },
+
+ // Conditional Logic
+ conditional_validation: { label: 'Conditional Logic', type: 'conditional_builder', help: 'Hide other fields based on this field\'s value' }
+ };
+
+ // --- Field Types (Added 'properties' array to each) ---
+ this.fieldTypes = {
+ // Text Input
+ author_bio: {
+ category: 'TEXT INPUT', name: 'Author Bio', description: 'Plugin information',
+ properties: [{
+ key: 'name',
+ default: 'About This Plugin'
+ }, 'categories', 'github_url', 'email_address', 'learn_more_url', 'youtube_url'] // Note: Common props are handled automatically
+ },
+ url: {
+ category: 'TEXT INPUT', name: 'Url', description: 'URL input',
+ properties: ['default', 'placeholder', 'optional']
+ },
+ string: {
+ category: 'TEXT INPUT', name: 'String', description: 'Single-line text',
+ properties: ['default', 'placeholder', 'maxlength', 'optional', 'conditional_validation']
+ },
+ multi_string: {
+ category: 'TEXT INPUT', name: 'Multi String', description: 'Comma-separated',
+ properties: ['default', 'placeholder', 'optional']
+ },
+ text: {
+ category: 'TEXT INPUT', name: 'Text', description: 'Multi-line textarea',
+ properties: ['default', 'placeholder', 'rows', 'optional', 'conditional_validation']
+ },
+ code: {
+ category: 'TEXT INPUT', name: 'Code', description: 'Monospace code',
+ properties: ['default', 'placeholder', 'rows', 'optional']
+ },
+ password: {
+ category: 'TEXT INPUT', name: 'Password', description: 'Masked input',
+ properties: ['default', 'placeholder', 'optional']
+ },
+
+ // Numeric
+ number: {
+ category: 'NUMERIC', name: 'Number', description: 'Numeric input',
+ properties: ['default', 'placeholder', 'min', 'max', 'optional', 'conditional_validation']
+ },
+
+ // Date & Time
+ date: {
+ category: 'DATE & TIME', name: 'Date', description: 'Date picker',
+ // We use an object to override the generic 'default' definition
+ properties: [
+ {
+ key: 'default', // The property key we are targeting
+ placeholder: 'YYYY-MM-DD',
+ help: 'Can also be set to "today" to use the current date automatically.'
+ },
+ 'optional'
+ ]
+ },
+ time: { category: 'DATE & TIME', name: 'Time', description: 'Time picker', properties: ['default', 'optional'] },
+ timezone: { category: 'DATE & TIME', name: 'Time Zone', description: 'Timezone selector', properties: ['default', 'optional'] },
+
+ // Selection
+ select: {
+ category: 'SELECTION', name: 'Select', description: 'Dropdown',
+ properties: ['options', 'default', 'multiple', 'optional', 'conditional_validation']
+ },
+ xhrSelect: {
+ category: 'SELECTION', name: 'XhrSelect', description: 'Dynamic dropdown',
+ properties: ['endpoint', 'http_verb', 'multiple', 'optional']
+ },
+ xhrSelectSearch: {
+ category: 'SELECTION', name: 'XhrSelectSearch', description: 'Searchable dynamic',
+ properties: ['endpoint', 'http_verb', 'multiple', 'optional']
+ },
+
+ // Special
+ copyable: { category: 'SPECIAL', name: 'Copyable', description: 'Click-to-copy', properties: ['value'] },
+ copyable_webhook_url: { category: 'SPECIAL', name: 'Copyable Webhook', description: 'Click-to-copy webhook', properties: ['value'] },
+ };
+ }
+
+ connectedCallback() {
+ this.render();
+ this.setupEventListeners();
+ }
+
+ async loadCategories() {
+ try {
+ const response = await fetch('https://usetrmnl.com/api/categories');
+ if (response.ok) {
+ const data = await response.json();
+ // Handle both array and object with data property
+ this.categories = Array.isArray(data) ? data : (data.data || this.getFallbackCategories());
+ // Extract just the names if they're objects
+ if (this.categories.length > 0 && typeof this.categories[0] === 'object') {
+ this.categories = this.categories.map(cat => cat.name || cat.title || cat);
+ }
+ } else {
+ this.categories = this.getFallbackCategories();
+ }
+ } catch (error) {
+ console.warn('Failed to load categories from API, using fallback:', error);
+ this.categories = this.getFallbackCategories();
+ }
+ }
+
+ getFallbackCategories() {
+ return [
+ "analytics",
+ "art",
+ "calendar",
+ "comics",
+ "crm",
+ "custom",
+ "discovery",
+ "ecommerce",
+ "education",
+ "email",
+ "entertainment",
+ "environment",
+ "finance",
+ "games",
+ "humor",
+ "images",
+ "kpi",
+ "life",
+ "marketing",
+ "nature",
+ "news",
+ "personal",
+ "productivity",
+ "programming",
+ "sales",
+ "sports",
+ "travel"
+ ];
+ }
+
+ render() {
+ const html = `
+
+
+
+
+
+
+
+
+
+
+
+
No fields yet
+
Select a field type from the left panel to start building your form.
+
You can drag fields to reorder them, or click to edit properties.
+
+
+
+
+
+
${category}
`;
+
+ fields.forEach(field => {
+ html += `
+
+ `;
+ });
+
+ html += '
Loading categories...
';
+ }
+
+ let html = '';
+
+ this.categories.forEach(category => {
+ const isSelected = selectedCategories.includes(category);
+ html += `
+
+ `;
+ });
+
+ html += '
';
+ return html;
+ }
+
+ setupEventListeners() {
+ // Field type buttons
+ this.shadowRoot.querySelectorAll('.field-type-button').forEach(btn => {
+ btn.addEventListener('dragstart', (e) => this.handleFieldTypeDragStart(e));
+ btn.addEventListener('click', (e) => this.addField(e.currentTarget.dataset.fieldType));
+ });
+
+ // Canvas drop zone
+ const canvas = this.shadowRoot.getElementById('canvas');
+ canvas.addEventListener('dragover', (e) => this.handleCanvasDragOver(e));
+ canvas.addEventListener('drop', (e) => this.handleCanvasDrop(e));
+ canvas.addEventListener('dragleave', (e) => this.handleCanvasDragLeave(e));
+
+ // Tabs
+ this.shadowRoot.querySelectorAll('.tab').forEach(tab => {
+ tab.addEventListener('click', (e) => this.switchTab(e.currentTarget.dataset.tab));
+ });
+
+ // YAML buttons
+ this.shadowRoot.getElementById('copyBtn').addEventListener('click', () => this.copyYaml());
+ this.shadowRoot.getElementById('importBtn').addEventListener('click', () => this.importYaml());
+
+ // Reset button listener
+ const resetBtn = this.shadowRoot.getElementById('resetBtn');
+ if (resetBtn) {
+ resetBtn.addEventListener('click', () => {
+ if (confirm('Are you sure you want to reset the form? All fields will be lost.')) {
+ this.clear();
+ }
+ });
+ }
+ }
+
+ handleFieldTypeDragStart(e) {
+ e.dataTransfer.effectAllowed = 'copy';
+ e.dataTransfer.setData('fieldType', e.currentTarget.dataset.fieldType);
+ }
+
+ handleCanvasDragOver(e) {
+ e.preventDefault();
+ e.dataTransfer.dropEffect = 'copy';
+ this.shadowRoot.getElementById('canvas').classList.add('drag-over');
+ }
+
+ handleCanvasDragLeave(e) {
+ if (e.target === this.shadowRoot.getElementById('canvas')) {
+ this.shadowRoot.getElementById('canvas').classList.remove('drag-over');
+ }
+ }
+
+ handleCanvasDrop(e) {
+ e.preventDefault();
+ this.shadowRoot.getElementById('canvas').classList.remove('drag-over');
+ const fieldType = e.dataTransfer.getData('fieldType');
+ if (fieldType) {
+ this.addField(fieldType);
+ }
+ }
+
+ addField(fieldType) {
+ if (fieldType === 'author_bio' && this.fields.some(f => f.field_type === 'author_bio')) {
+ this.showToast('Only one Author Bio field is allowed');
+ return;
+ }
+
+ const fieldKeyname = fieldType === 'author_bio'
+ ? fieldType
+ : `${fieldType}_${Date.now().toString().slice(-4)}`;
+
+ const typeConfig = this.fieldTypes[fieldType];
+
+ // Create new field object with minimal defaults
+ const field = {
+ id: `field_${this.nextFieldId++}`,
+ keyname: fieldKeyname,
+ field_type: fieldType,
+ };
+
+ // Only set 'name' if there's a default specified in the type config
+ let hasNameDefault = false;
+ if (typeConfig && Array.isArray(typeConfig.properties)) {
+ typeConfig.properties.forEach(prop => {
+ if (typeof prop === 'object' && prop.key === 'name' && prop.default) {
+ field.name = prop.default;
+ hasNameDefault = true;
+ }
+ });
+ }
+
+ // Fallback to type name if no custom default was set
+ if (!hasNameDefault) {
+ field.name = this.fieldTypes[fieldType]?.name || fieldType;
+ }
+
+ // Update state
+ this.fields.push(field);
+ this.selectedFieldId = field.id;
+
+ this.switchTab('config');
+ this.updateConfigPanel();
+ this.updateCanvasView();
+ this.updateYamlOutput();
+ this.updateAuthorBioState();
+ }
+
+ updateCanvasView() {
+ const canvas = this.shadowRoot.getElementById('canvas');
+
+ if (this.fields.length === 0) {
+ canvas.innerHTML = `
+
+
+
+
No fields yet
+
Select a field type from the left panel to start building your form.
+
You can drag fields to reorder them, or click to edit properties.
+
`;
+
+ this.fields.forEach((field, index) => {
+ const isSelected = field.id === this.selectedFieldId;
+ html += `
+
+
+
${field.keyname}${field.field_type}
+
${field.name}
+
+
+ `;
+ if (field.field_type != 'author_bio'){
+ html += ``;
+ }
+ html += `
+
+
+
+ `;
+ });
+
+ html += '
Select a field to edit its properties
';
+ return;
+ }
+
+ const typeConfig = this.fieldTypes[field.field_type];
+
+ // 1. Define Standard Properties
+ let visibleProps = ['keyname', 'field_type_display', 'name', 'description', 'i18n_descriptions', 'help_text'];
+
+ // 2. Add Type-Specific Properties (These can now be strings OR objects)
+ if (typeConfig && Array.isArray(typeConfig.properties)) {
+ visibleProps = [...visibleProps, ...typeConfig.properties];
+ }
+
+ // 3. Generate HTML
+ let html = '';
+ visibleProps.forEach(propEntry => { // propEntry is now string or object
+
+ // Determine the base key (string or object.key)
+ const propKey = typeof propEntry === 'string' ? propEntry : propEntry.key;
+
+ // Special case for static display of field type
+ if (propKey === 'field_type_display') {
+ html += `
+ `;
+ return;
+ }
+
+ let propDef = this.propertyDefinitions[propKey];
+
+ // --- NEW LOGIC: Merge Overrides ---
+ if (typeof propEntry === 'object' && propDef) {
+ // Create a new definition by merging the base definition with the specific overrides
+ propDef = {...propDef, ...propEntry};
+ }
+
+ if (propDef) {
+ // Pass the key and the potentially merged definition to the renderer
+ html += this.renderPropertyInput(propKey, propDef, field);
+ }
+ });
+
+ this.shadowRoot.getElementById('configContent').innerHTML = html;
+
+ // 4. Re-attach Event Listeners
+ this.attachConfigListeners(field);
+ }
+
+ renderPropertyInput(key, def, field) {
+ const value = field[key] !== undefined ? field[key] : (def.default || '');
+
+ if (def.type === 'custom_categories') {
+ const selectedCategories = field.category ? field.category.split(',').map(c => c.trim()).filter(c => c) : [];
+ return `
+
+ `;
+ }
+
+ if (def.type === 'checkbox') {
+ return `
+
+
+
`;
+ }
+
+ if (def.type === 'textarea') {
+ // Convert array options to string for display
+ let displayValue = value;
+ let useLabelValue = false;
+
+ if (key === 'options' && Array.isArray(value)) {
+ // Check if any option is an object (label:value pair)
+ useLabelValue = value.some(opt => typeof opt === 'object');
+
+ if (useLabelValue) {
+ // Convert objects to "Label: value" format
+ displayValue = value.map(opt => {
+ if (typeof opt === 'object') {
+ const [label, val] = Object.entries(opt)[0];
+ return `${label}: ${val}`;
+ }
+ return opt;
+ }).join('\n');
+ } else {
+ // Simple string array
+ displayValue = value.join('\n');
+ }
+ }
+
+ // Add toggle for options field
+ const optionsToggle = key === 'options' ? `
+
+
+ ${useLabelValue ? 'Enter one per line in format "Label: value"' : 'Enter one option per line'}
+
+ ` : '';
+
+ return `
+ `;
+ }
+
+ // --- i18n_map Renderer ---
+ if (def.type === 'i18n_map') {
+ // 1. Find existing translations in the field object
+ const existingTranslations = Object.keys(field)
+ .filter(k => k.startsWith('description-'))
+ .map(k => {
+ const code = k.replace('description-', '');
+ return { code, value: field[k] };
+ });
+
+ // 2. Build the list of existing translation inputs
+ let rowsHtml = existingTranslations.map(item => `
+
+
+ ${item.code}
+
+
+
+
+
+
+
+ `;
+ }
+
+ return `
+ `;
+ }
+
+ // --- Handle generic Select inputs (including http_verb) ---
+ if (def.options && Array.isArray(def.options)) {
+ // Determine the current value, falling back to default if not set
+ const currentValue = field[key] !== undefined ? field[key] : (def.default || '');
+
+ const optionsHtml = def.options.map(option => {
+ // The option value is the method name itself (GET, POST, etc.)
+ const selected = currentValue === option ? 'selected' : '';
+ return ``;
+ }).join('');
+
+ return `
+ `;
+ }
+
+ // --- Conditional Builder Renderer ---
+ if (def.type === 'conditional_builder') {
+ const conditions = field.conditional_validation || [];
+
+ // Get list of other fields for checkboxes
+ const otherFields = this.fields.filter(f => f.id !== field.id);
+
+ let conditionsHtml = conditions.map((condition, idx) => {
+ const hiddenSet = new Set(condition.hidden || []);
+
+ const checkboxesHtml = otherFields.map(f => {
+ const checked = hiddenSet.has(f.keyname) ? 'checked' : '';
+ return `
+
+ `;
+ }).join('');
+
+ return `
+
+
+
+ When equals:
+
+
+
+
+
Hide these fields:
+
+ ${checkboxesHtml || '
No other fields available
'}
+
+
Import YAML
+
+
+
+
+
+ `;
+
+ modal.appendChild(modalContent);
+ document.body.appendChild(modal);
+
+ const textarea = modalContent.querySelector('#yamlImportTextarea');
+ const cancelBtn = modalContent.querySelector('#cancelImportBtn');
+ const confirmBtn = modalContent.querySelector('#confirmImportBtn');
+
+ // Focus textarea
+ textarea.focus();
+
+ // Cancel handler
+ const closeModal = () => {
+ document.body.removeChild(modal);
+ };
+
+ cancelBtn.addEventListener('click', closeModal);
+ modal.addEventListener('click', (e) => {
+ if (e.target === modal) closeModal();
+ });
+
+ // Import handler
+ confirmBtn.addEventListener('click', () => {
+ const yamlText = textarea.value;
+
+ if (!yamlText || !yamlText.trim()) {
+ closeModal();
+ return;
+ }
+
+ try {
+ const fields = this.parseYaml(yamlText);
+ // console.log('Parsed fields:', fields);
+ if (fields.length === 0) {
+ this.showToast('No fields found in YAML');
+ closeModal();
+ return;
+ }
+
+ // Clear existing fields and import new ones
+ this.fields = fields.map((fieldData, index) => {
+ const field = {
+ id: `field_${this.nextFieldId++}`,
+ keyname: fieldData.keyname || `field_${index}`,
+ field_type: fieldData.field_type || 'string',
+ name: fieldData.name || '',
+ };
+
+ // Copy over all other properties
+ Object.keys(fieldData).forEach(key => {
+ if (key !== 'id') {
+ field[key] = fieldData[key];
+ }
+ });
+
+ return field;
+ });
+
+ this.selectedFieldId = this.fields[0]?.id || null;
+ this.updateCanvasView();
+ this.updateConfigPanel();
+ this.updateYamlOutput();
+ this.updateAuthorBioState();
+ this.switchTab('config');
+ this.showToast(`Imported ${fields.length} field(s)`);
+ closeModal();
+ } catch (error) {
+ alert(`Error parsing YAML: ${error.message}`);
+ }
+ });
+ }
+
+ parseYaml(yamlText) {
+ const fields = [];
+ const lines = yamlText.split('\n');
+ let currentField = null;
+ let currentArray = null;
+ let currentArrayKey = null;
+ let currentCondition = null;
+ let currentNestedKey = null; // Helper to track if we are in hidden/required
+
+ lines.forEach(line => {
+ // Skip comments and empty lines
+ if (line.trim().startsWith('#') || !line.trim()) {
+ return;
+ }
+
+ // 1. New field (starts with - keyname:)
+ if (line.match(/^-\s+keyname:/)) {
+ if (currentField) {
+ fields.push(currentField);
+ }
+ currentField = {};
+ currentArray = null;
+ currentArrayKey = null;
+ currentCondition = null;
+ currentNestedKey = null;
+ const value = line.split('keyname:')[1].trim();
+ currentField.keyname = this.unescapeYaml(value);
+ }
+
+ // 2. Field properties (2 spaces indentation)
+ else if (currentField && line.match(/^\s{2}[a-z_-]+:/)) {
+ const match = line.match(/^\s{2}([a-z_-]+):\s*(.*)$/);
+ if (match) {
+ const key = match[1];
+ const value = match[2].trim();
+
+ // Handle array start (value is empty)
+ if (!value || value === '') {
+ currentArrayKey = key;
+ currentArray = [];
+
+ if (key === 'conditional_validation') {
+ currentField[key] = [];
+ } else {
+ currentField[key] = currentArray;
+ }
+ } else {
+ // Scalar values
+ currentArrayKey = null;
+ currentArray = null;
+ currentField[key] = this.unescapeYaml(value);
+
+ // Convert string booleans
+ if (value === 'true') currentField[key] = true;
+ if (value === 'false') currentField[key] = false;
+
+ // Convert numbers (but not empty strings!)
+ if (!isNaN(value) && value !== '' && value !== '""') {
+ currentField[key] = Number(value);
+ }
+ }
+ }
+ }
+
+ // 3. Nested properties in conditions (e.g., " hidden:")
+ // We check this BEFORE array items to set context
+ else if (currentCondition && line.match(/^\s{4}[a-z_-]+:/)) {
+ const match = line.match(/^\s{4}([a-z_]+):\s*(.*)$/);
+ if (match) {
+ const key = match[1];
+ // Initialize the nested array
+ currentCondition[key] = [];
+ currentNestedKey = key; // Track that we are currently filling this key
+ }
+ }
+
+ // 4. Nested Array Items (Deep indentation: 4 or more spaces + dash)
+ // IMPORTANT: This must come BEFORE the generic array check
+ else if (currentCondition && line.match(/^\s{4,}-\s+/)) {
+ const value = line.replace(/^\s{4,}-\s+/, '').trim();
+
+ // Add to the currently active nested array (hidden or required)
+ if (currentNestedKey && Array.isArray(currentCondition[currentNestedKey])) {
+ currentCondition[currentNestedKey].push(value);
+ }
+ }
+
+ // 5. Top-Level Array items (Exactly 2 spaces + dash)
+ // Regex changed from {2,} to {2} to avoid eating nested items
+ else if (line.match(/^\s{2}-\s+/)) {
+ const value = line.replace(/^\s{2}-\s+/, '').trim();
+
+ // If we're in conditional_validation, this is a NEW condition object
+ if (currentArrayKey === 'conditional_validation') {
+ currentCondition = {};
+ currentField.conditional_validation.push(currentCondition);
+ currentNestedKey = null; // Reset nested context for new object
+
+ // Parse the "when" value
+ if (value.startsWith('when:')) {
+ currentCondition.when = this.unescapeYaml(value.split('when:')[1].trim());
+ }
+ }
+ // Otherwise it's a regular array item (like options)
+ else if (currentArray) {
+ const colonIndex = value.indexOf(':');
+ if (currentArrayKey === 'options' && colonIndex > -1) {
+ const label = value.substring(0, colonIndex).trim();
+ const val = value.substring(colonIndex + 1).trim();
+ currentArray.push({ [this.unescapeYaml(label)]: this.unescapeYaml(val) });
+ } else {
+ currentArray.push(this.unescapeYaml(value));
+ }
+ }
+ }
+ });
+
+ // Don't forget the last field
+ if (currentField) {
+ fields.push(currentField);
+ }
+
+ return fields;
+ }
+
+ unescapeYaml(value) {
+ if (!value && value !== 0) return '';
+
+ // If it's not a string, just return it as-is
+ if (typeof value !== 'string') return value;
+
+ // Remove surrounding quotes
+ value = value.replace(/^["'](.*)["']$/, '$1');
+
+ // Unescape escaped quotes
+ value = value.replace(/\\"/g, '"');
+
+ return value;
+ }
+
+ showToast(message) {
+ const toast = document.createElement('div');
+ toast.className = 'toast';
+ toast.textContent = message;
+ toast.style.cssText = `
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ padding: 12px 16px;
+ background: ${this.theme === 'dark' ? '#e0e0e0' : '#1a1a1a'};
+ color: ${this.theme === 'dark' ? '#1a1a1a' : '#e0e0e0'};
+ border-radius: 4px;
+ font-size: 150%;
+ font-weight: 500;
+ z-index: 1000;
+ animation: slideIn 0.3s ease-out;
+ `;
+ document.body.appendChild(toast);
+ setTimeout(() => toast.remove(), 2000);
+ }
+
+ // Public API methods
+ getYaml() {
+ return this.generateYaml();
+ }
+
+ getFields() {
+ return JSON.parse(JSON.stringify(this.fields));
+ }
+
+ setFields(fields) {
+ this.fields = JSON.parse(JSON.stringify(fields));
+ this.selectedFieldId = this.fields[0]?.id || null;
+ this.updateCanvasView();
+ this.updateConfigPanel();
+ this.updateYamlOutput();
+ this.updateAuthorBioState(); // Check immediately on render
+ }
+
+ clear() {
+ this.fields = [];
+ this.selectedFieldId = null;
+ this.draggedFieldId = null;
+ this.draggedFromIndex = null;
+ this.nextFieldId = 1;
+ this.render();
+ this.setupEventListeners();
+ this.updateCanvasView();
+ this.updateConfigPanel();
+ this.updateYamlOutput();
+ this.updateAuthorBioState(); // Check immediately on render
+ }
+}
+
+// Register the custom element
+customElements.define('trmnl-form-builder', TRMLYamlForm);