@innovastudio/contentbox 1.6.161 → 1.6.162

package/public/contentbox/contentbox.esm.js

@@ -12300,6 +12300,616 @@ class PanelSpacer {
 
 }
 
+/**
+ * ContentBox Settings UI Generator
+ * Automatically generates settings form based on plugin schema
+ * 
+ * Usage in ContentBox Editor:
+ * const generator = new SettingsUIGenerator(runtime);
+ * const form = generator.generateForm('logo-loop', currentElement);
+ * panel.appendChild(form);
+ */
+class SettingsUIGenerator$1 {
+  constructor(runtime, builder) {
+    this.runtime = runtime;
+    this.builder = builder;
+  }
+  /**
+   * Generate settings form for a plugin
+   * @param {string} pluginName - Plugin name
+   * @param {HTMLElement} element - Current element being edited
+   * @returns {HTMLElement} Form element
+   */
+
+
+  generateForm(pluginName, element, onChange) {
+    const plugin = this.runtime.getPlugin(pluginName);
+
+    if (!plugin || !plugin.settings) {
+      console.warn(`Plugin "${pluginName}" has no settings schema`);
+      return this.createEmptyForm();
+    }
+
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form'; // Get current values from element
+
+    const currentValues = this.getCurrentValues(element, plugin.settings); // Check if plugin has grouped settings
+
+    if (plugin.settings._groups) {
+      this.generateGroupedForm(form, plugin.settings, currentValues);
+    } else {
+      this.generateFlatForm(form, plugin.settings, currentValues);
+    } // Attach listeners for auto-update
+
+
+    if (typeof onChange === 'function') {
+      form.addEventListener('input', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+      form.addEventListener('change', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+    }
+
+    return form;
+  }
+  /**
+   * Generate flat form (no groups)
+   */
+
+
+  generateFlatForm(container, settings, currentValues) {
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return; // Skip meta keys
+
+      const field = settings[key];
+      const fieldElement = this.createField(key, field, currentValues[key]);
+      container.appendChild(fieldElement);
+    });
+  }
+  /**
+   * Generate grouped form
+   */
+
+
+  generateGroupedForm(container, settings, currentValues) {
+    const groups = settings._groups || [];
+    groups.forEach(group => {
+      const groupElement = document.createElement('div');
+      groupElement.className = 'cb-settings-group';
+      const groupTitle = document.createElement('h3');
+      groupTitle.className = 'cb-settings-group-title';
+      groupTitle.style.cssText = 'font-size: 17px;font-weight: 500;';
+      groupTitle.textContent = group.label;
+      groupElement.appendChild(groupTitle);
+      group.fields.forEach(fieldKey => {
+        const field = settings[fieldKey];
+        if (!field) return;
+        const fieldElement = this.createField(fieldKey, field, currentValues[fieldKey]);
+        groupElement.appendChild(fieldElement);
+      });
+      container.appendChild(groupElement);
+    });
+  }
+  /**
+   * Create a single form field
+   */
+
+
+  createField(name, config, value) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'cb-settings-field';
+    wrapper.style.marginBottom = '20px';
+    wrapper.setAttribute('data-field', name); // Add conditional display logic
+
+    if (config.dependsOn) {
+      wrapper.setAttribute('data-depends-on', JSON.stringify(config.dependsOn));
+      wrapper.style.display = 'none'; // Hidden by default, shown by JS
+    } // Label
+
+
+    const label = document.createElement('label');
+    label.className = 'cb-settings-label';
+    label.style.fontWeight = 500;
+    label.textContent = config.label || name; // wrapper.appendChild(label);
+    // Input based on type
+
+    const input = this.createInput(name, config, value);
+    wrapper.appendChild(input); // Description
+    // if (config.description) {
+    //     const desc = document.createElement('p');
+    //     desc.className = 'cb-settings-description';
+    //     desc.textContent = config.description;
+    //     wrapper.appendChild(desc);
+    // }
+
+    return wrapper;
+  }
+  /**
+   * Create input element based on field type
+   */
+
+
+  createInput(name, config, value) {
+    const currentValue = value !== undefined ? value : config.default;
+
+    switch (config.type) {
+      case 'number':
+        return this.createNumberInput(name, config, currentValue);
+
+      case 'boolean':
+        return this.createCheckboxInput(name, config, currentValue);
+
+      case 'select':
+        return this.createSelectInput(name, config, currentValue);
+
+      case 'radio':
+        return this.createRadioInput(name, config, currentValue);
+
+      case 'textarea':
+        return this.createTextareaInput(name, config, currentValue);
+
+      case 'color':
+        return this.createColorInput(name, config, currentValue);
+
+      case 'range':
+        return this.createRangeInput(name, config, currentValue);
+
+      case 'text':
+      default:
+        return this.createTextInput(name, config, currentValue);
+    }
+  }
+
+  createTextInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.name = name;
+    input.value = value || '';
+    if (config.placeholder) input.placeholder = config.placeholder;
+    label.appendChild(input); // Add description if exists
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createNumberInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+
+    if (config.unit) {
+      labelText.textContent += ` (${config.unit})`;
+    }
+
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.style.cssText = 'width: 100px;';
+    input.name = name;
+    input.value = value !== undefined ? value : config.default;
+    if (config.min !== undefined) input.min = config.min;
+    if (config.max !== undefined) input.max = config.max;
+    if (config.step !== undefined) input.step = config.step;
+    label.appendChild(input);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createCheckboxInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label checkbox';
+    const div = document.createElement('div');
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.name = name;
+    input.checked = value !== undefined ? value : config.default;
+    const span = document.createElement('span');
+    span.textContent = config.label || name;
+    label.appendChild(input);
+    label.appendChild(span);
+    div.appendChild(label);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      div.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createSelectInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createTextNode((config.label || name) + ':');
+    label.appendChild(labelText);
+    const select = document.createElement('select');
+    select.name = name;
+    config.options.forEach(option => {
+      const opt = document.createElement('option');
+      opt.value = option.value;
+      opt.textContent = option.label;
+      if (option.value === value) opt.selected = true;
+      select.appendChild(opt);
+    });
+    label.appendChild(select);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createRadioInput(name, config, value) {
+    const wrapper = document.createElement('div');
+    const title = document.createElement('div');
+    title.textContent = config.label || name;
+    title.style.cssText = 'margin-bottom: 8px;font-weight: 590;';
+    wrapper.appendChild(title);
+    config.options.forEach(option => {
+      const label = document.createElement('label');
+      label.className = 'label checkbox';
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = name;
+      input.value = option.value;
+      input.checked = option.value === value;
+      const span = document.createElement('span');
+      span.textContent = option.label;
+      label.appendChild(input);
+      label.appendChild(span);
+      wrapper.appendChild(label);
+    });
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      wrapper.appendChild(desc);
+    }
+
+    return wrapper;
+  }
+
+  createTextareaInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const textarea = document.createElement('textarea');
+    textarea.name = name;
+    textarea.value = value || '';
+    textarea.rows = config.rows || 4;
+    if (config.placeholder) textarea.placeholder = config.placeholder;
+    label.appendChild(textarea);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createColorInput(name, config, value) {
+    const container = document.createElement('div');
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    label.style.cursor = 'pointer';
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value || config.default || '#000000';
+    const group = document.createElement('div');
+    group.className = 'group';
+    group.style.cssText = 'width: 52px; margin:0; overflow: visible;';
+    const colorBtn = document.createElement('button');
+    colorBtn.type = 'button';
+    colorBtn.title = config.label || 'Color';
+    colorBtn.className = 'btn-color is-btn-color';
+    colorBtn.style.backgroundColor = input.value;
+    colorBtn.setAttribute('aria-label', `Choose color for ${config.label || name}`);
+
+    const openPicker = e => {
+      e.preventDefault();
+      this.builder.openColorPicker(input.value, color => {
+        input.value = color;
+        colorBtn.style.backgroundColor = color;
+        input.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
+      }, colorBtn);
+    };
+
+    colorBtn.addEventListener('click', openPicker); // Make label click trigger the button
+
+    label.addEventListener('click', e => {
+      if (e.target === label || e.target === labelText) {
+        colorBtn.click();
+      }
+    });
+    group.appendChild(colorBtn);
+    label.appendChild(input);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    container.appendChild(label);
+    container.appendChild(group);
+    return container;
+  }
+
+  createColorInput2(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.name = name;
+    input.style.cssText = 'width:40px;height:40px';
+    input.value = value || config.default || '#000000';
+    label.appendChild(input);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+
+  createRangeInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const currentVal = value !== undefined ? value : config.default;
+    const labelText = document.createElement('div');
+    labelText.textContent = (config.label || name) + ': ' + currentVal + (config.unit || '');
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'range';
+    input.className = 'is-rangeslider';
+    input.name = name;
+    input.value = currentVal;
+    if (config.min !== undefined) input.min = config.min;
+    if (config.max !== undefined) input.max = config.max;
+    if (config.step !== undefined) input.step = config.step;
+    input.addEventListener('input', () => {
+      labelText.textContent = (config.label || name) + ': ' + input.value + (config.unit || '');
+    });
+    label.appendChild(input);
+
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+
+    return label;
+  }
+  /**
+   * Get current values from element attributes
+   */
+
+
+  getCurrentValues(element, settings) {
+    const values = {};
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return;
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const attrValue = element.getAttribute(attrName);
+
+      if (attrValue !== null) {
+        values[key] = this.parseValue(attrValue, settings[key].type);
+      }
+    });
+    return values;
+  }
+  /**
+   * Parse attribute value based on type
+   */
+
+
+  parseValue(value, type) {
+    switch (type) {
+      case 'number':
+        return parseFloat(value);
+
+      case 'boolean':
+        return value === 'true';
+
+      default:
+        return value;
+    }
+  }
+  /**
+   * Get form values
+   */
+
+
+  getFormValues(form) {
+    const values = {};
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const name = input.name;
+      if (!name) return;
+
+      if (input.type === 'checkbox') {
+        values[name] = input.checked;
+      } else if (input.type === 'radio') {
+        if (input.checked) {
+          values[name] = input.value;
+        }
+      } else {
+        values[name] = input.value;
+      }
+    });
+    return values;
+  }
+  /**
+   * Apply form values to element
+   */
+
+
+  applyValues(element, values) {
+    Object.keys(values).forEach(key => {
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      element.setAttribute(attrName, values[key]);
+    });
+  }
+
+  createEmptyForm() {
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form';
+    form.innerHTML = '<p>This plugin has no configurable settings.</p>';
+    return form;
+  }
+
+}
+
+class PanelPlugin {
+  constructor(panel, builder) {
+    this.builder = builder;
+    this.panel = panel;
+    this.generator = null;
+    this.currentElement = null;
+    this.currentForm = null;
+  }
+
+  render(pluginName, currentElement, runtime) {
+    // Clear panel
+    this.panel.innerHTML = '';
+    const div = document.createElement('div');
+    div.classList.add('submain');
+    this.panel.appendChild(div); // Store references
+
+    this.currentElement = currentElement;
+    this.generator = new SettingsUIGenerator$1(runtime, this.builder); // Check if plugin has custom content editor
+
+    const plugin = runtime.getPlugin(pluginName);
+    const hasContentEditor = plugin && plugin.editor && plugin.editor.openContentEditor;
+
+    if (hasContentEditor) {
+      // Get original content for the editor to work with
+      const originalContent = currentElement.getAttribute('data-cb-original-content'); // Create a temporary element for editing (so editor can manipulate it)
+
+      let editableClone = document.querySelector('.editable-clone');
+      if (editableClone) editableClone.remove(); // editableClone = document.createElement('div');
+
+      editableClone = currentElement.cloneNode(false);
+      editableClone.innerHTML = originalContent;
+      editableClone.className = 'editable-clone';
+      editableClone.style.display = 'none'; // Hidden, just for editing
+
+      document.body.appendChild(editableClone);
+      const originalElement = editableClone.cloneNode(false); // Let plugin handle everything - pass the editable clone
+
+      const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
+        this.builder.editor.saveForUndo(); // Store edited content from clone
+
+        currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML); // Also performs similar value updates like the applyChanges()
+        // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
+
+        const getChangedDataAttributes = (el1, el2) => {
+          const changed = [];
+
+          for (const key of Object.keys(el1.dataset)) {
+            if (key in el2.dataset && el1.dataset[key] !== el2.dataset[key]) {
+              changed.push(key);
+            }
+          }
+
+          return changed;
+        };
+
+        const changedAttributes = getChangedDataAttributes(originalElement, editableClone);
+        changedAttributes.forEach(attrName => {
+          // console.log(attrName)
+          // console.log(editableClone.dataset[attrName])
+          currentElement.dataset[attrName] = editableClone.dataset[attrName];
+        }); // -------
+
+        currentElement.innerHTML = editableClone.innerHTML; // Update current content
+        // Remove temporary clone
+
+        editableClone.remove(); // Reinitialize plugin with new content
+
+        await runtime.reinitialize(currentElement.parentElement);
+        this.builder.onChange();
+      });
+      div.appendChild(editorUI);
+    } // Generate form
+
+
+    this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
+      this.builder.editor.saveForUndo();
+      this.applyChanges(runtime);
+    });
+    div.appendChild(this.currentForm);
+  }
+
+  async applyChanges(runtime) {
+    if (!this.currentElement || !this.currentForm) return; // 1. Get form values
+
+    const values = this.generator.getFormValues(this.currentForm); // 2. Apply to element attributes
+
+    this.generator.applyValues(this.currentElement, values); // 3. Reinitialize component
+
+    const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
+    await runtime.reinitialize(container);
+    this.builder.onChange(); // console.log('Settings applied and component reinitialized');
+  }
+
+}
+
 class PanelIcon {
   constructor(panel, builder) {
     this.builder = builder;
@@ -25494,6 +26104,7 @@ class ControlPanel {
                 <div class="panel-audio"></div>
                 <div class="panel-iframe"></div>
                 <div class="panel-spacer"></div>
+                <div class="panel-plugin"></div>
                 <div class="panel-column"></div>
                 <div class="panel-row"></div>
                 <div class="panel-container"></div>
@@ -25544,6 +26155,7 @@ class ControlPanel {
     this.panelAudio = controlPanel.querySelector('.panel-audio');
     this.panelIframe = controlPanel.querySelector('.panel-iframe');
     this.panelSpacer = controlPanel.querySelector('.panel-spacer');
+    this.panelPlugin = controlPanel.querySelector('.panel-plugin');
     this.panelIcon = controlPanel.querySelector('.panel-icon');
     this.panelSvg = controlPanel.querySelector('.panel-svg');
     this.panelCode = controlPanel.querySelector('.panel-code');
@@ -25584,6 +26196,7 @@ class ControlPanel {
     this.objPanelAudio = new PanelAudio(this.panelAudio, this.builder);
     this.objPanelIframe = new PanelIframe(this.panelIframe, this.builder);
     this.objPanelSpacer = new PanelSpacer(this.panelSpacer, this.builder);
+    this.objPanelPlugin = new PanelPlugin(this.panelPlugin, this.builder);
     this.objPanelIcon = new PanelIcon(this.panelIcon, this.builder);
     this.objPanelSvg = new PanelSvg(this.panelSvg, this.builder);
     this.objPanelCode = new PanelCode(this.panelCode, this.builder);
@@ -26240,6 +26853,7 @@ class ControlPanel {
     this.panelAudio.classList.remove('active');
     this.panelIframe.classList.remove('active');
     this.panelSpacer.classList.remove('active');
+    this.panelPlugin.classList.remove('active');
     this.panelIcon.classList.remove('active');
     this.panelSvg.classList.remove('active');
     this.panelCode.classList.remove('active');
@@ -26302,13 +26916,32 @@ class ControlPanel {
         this.title.innerHTML = titleHtml;
         this.panelCode.classList.add('active');
         this.objPanelCode.getState();
-      } else if (element.closest('[data-noedit]') && !element.closest('[data-html]')) {
+      } else if (element.closest('[data-noedit]') && !element.closest('[data-html]') && !element.closest('[data-cb-type]')) {
         let titleHtml = out('Locked');
         this.title.innerHTML = titleHtml;
       } else {
         if (element.querySelector('.icon') && element.childElementCount === 1) ;
 
-        if (element.tagName.toLowerCase() === 'img') {
+        if (element.closest('[data-cb-type]')) {
+          const runtime = this.builder.win.builderRuntime;
+
+          if (runtime) {
+            const pluginElement = element.closest('[data-cb-type]');
+            const pluginName = pluginElement.getAttribute('data-cb-type');
+
+            if (!pluginElement.hasAttribute('data-cb-editmode')) {
+              pluginElement.setAttribute('contentEditable', false);
+            }
+
+            const plugin = runtime.getPlugin(pluginName);
+            let titleHtml = out(plugin.displayName || plugin.name);
+            this.title.innerHTML = titleHtml; // this.title.style.cssText = 'margin-bottom: 0';
+
+            this.objPanelPlugin.render(pluginName, pluginElement, runtime);
+          }
+
+          this.panelPlugin.classList.add('active');
+        } else if (element.tagName.toLowerCase() === 'img') {
           // Image
           let titleHtml = out('Image');
           this.title.innerHTML = titleHtml;
@@ -40969,7 +41602,7 @@ class HtmlUtil {
       this.builder.opts.onRender();
 
       // Re-select
-      if (row.firstChild) row.firstChild.click();
+      // if(row.firstChild) row.firstChild.click();
       //Change to row selection
       row.classList.remove('row-outline');
       //Hide Column tool (new!)
@@ -41022,6 +41655,8 @@ class HtmlUtil {
     }
     util.clearControls(); // NEW
 
+    // Re-init plugins
+    if (this.builder.win.builderRuntime) this.builder.win.builderRuntime.reinitialize();
     this.builder.hideModal(modal);
   }
   viewHtmlExternal() {
@@ -41568,6 +42203,35 @@ class HtmlUtil {
         elm.innerHTML = '';
       });
     }
+
+    // Clean all interactive components
+    const components = tmp.querySelectorAll('[data-cb-type]');
+    components.forEach(element => {
+      const original = element.getAttribute('data-cb-original-content');
+      if (original) {
+        // Restore original HTML
+        element.innerHTML = original;
+
+        // Remove runtime-added attributes
+        element.removeAttribute('data-cb-original-content');
+        element.removeAttribute('data-cb-loaded');
+
+        // element.removeAttribute('data-cb-logo-loop-initialized');
+
+        Array.from(element.attributes).forEach(attr => {
+          const name = attr.name;
+          // Remove any attribute that starts with "data-cb-" and ends with "-initialized"
+          if (name.startsWith('data-cb-') && name.endsWith('-initialized')) {
+            element.removeAttribute(name);
+          }
+        });
+        element.removeAttribute('data-cb-editmode');
+
+        // Remove runtime-added classes
+        const type = element.getAttribute('data-cb-type');
+        element.classList.remove(`cb-${type}`);
+      }
+    });
     html = '';
     if (multiple) {
       //ContentBox
@@ -42423,7 +43087,7 @@ const prepareSvgIcons = builder => {
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
             </symbol>
-            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-folder" viewBox="0 0 24 24" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M11 19h-6a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2h4l3 3h7a2 2 0 0 1 2 2v2.5"></path>
                 <path d="M18 18m-3 0a3 3 0 1 0 6 0a3 3 0 1 0 -6 0"></path>
@@ -77235,6 +77899,817 @@ class Spacer {
   }
 }
 
+/**
+ * ContentBox Settings UI Generator
+ * Automatically generates settings form based on plugin schema
+ * 
+ * Usage in ContentBox Editor:
+ * const generator = new SettingsUIGenerator(runtime);
+ * const form = generator.generateForm('logo-loop', currentElement);
+ * panel.appendChild(form);
+ */
+
+class SettingsUIGenerator {
+  constructor(runtime, builder) {
+    this.runtime = runtime;
+    this.builder = builder;
+  }
+
+  /**
+   * Generate settings form for a plugin
+   * @param {string} pluginName - Plugin name
+   * @param {HTMLElement} element - Current element being edited
+   * @returns {HTMLElement} Form element
+   */
+  generateForm(pluginName, element, onChange) {
+    const plugin = this.runtime.getPlugin(pluginName);
+    if (!plugin || !plugin.settings) {
+      console.warn(`Plugin "${pluginName}" has no settings schema`);
+      return this.createEmptyForm();
+    }
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form';
+
+    // Get current values from element
+    const currentValues = this.getCurrentValues(element, plugin.settings);
+
+    // Check if plugin has grouped settings
+    if (plugin.settings._groups) {
+      this.generateGroupedForm(form, plugin.settings, currentValues);
+    } else {
+      this.generateFlatForm(form, plugin.settings, currentValues);
+    }
+
+    // Attach listeners for auto-update
+    if (typeof onChange === 'function') {
+      form.addEventListener('input', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+      form.addEventListener('change', () => {
+        const values = this.getFormValues(form);
+        onChange(values, element);
+      });
+    }
+    return form;
+  }
+
+  /**
+   * Generate flat form (no groups)
+   */
+  generateFlatForm(container, settings, currentValues) {
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return; // Skip meta keys
+
+      const field = settings[key];
+      const fieldElement = this.createField(key, field, currentValues[key]);
+      container.appendChild(fieldElement);
+    });
+  }
+
+  /**
+   * Generate grouped form
+   */
+  generateGroupedForm(container, settings, currentValues) {
+    const groups = settings._groups || [];
+    groups.forEach(group => {
+      const groupElement = document.createElement('div');
+      groupElement.className = 'cb-settings-group';
+      const groupTitle = document.createElement('h3');
+      groupTitle.className = 'cb-settings-group-title';
+      groupTitle.style.cssText = 'font-size: 17px;font-weight: 500;';
+      groupTitle.textContent = group.label;
+      groupElement.appendChild(groupTitle);
+      group.fields.forEach(fieldKey => {
+        const field = settings[fieldKey];
+        if (!field) return;
+        const fieldElement = this.createField(fieldKey, field, currentValues[fieldKey]);
+        groupElement.appendChild(fieldElement);
+      });
+      container.appendChild(groupElement);
+    });
+  }
+
+  /**
+   * Create a single form field
+   */
+  createField(name, config, value) {
+    const wrapper = document.createElement('div');
+    wrapper.className = 'cb-settings-field';
+    wrapper.style.marginBottom = '20px';
+    wrapper.setAttribute('data-field', name);
+
+    // Add conditional display logic
+    if (config.dependsOn) {
+      wrapper.setAttribute('data-depends-on', JSON.stringify(config.dependsOn));
+      wrapper.style.display = 'none'; // Hidden by default, shown by JS
+    }
+
+    // Label
+    const label = document.createElement('label');
+    label.className = 'cb-settings-label';
+    label.style.fontWeight = 500;
+    label.textContent = config.label || name;
+    // wrapper.appendChild(label);
+
+    // Input based on type
+    const input = this.createInput(name, config, value);
+    wrapper.appendChild(input);
+
+    // Description
+    // if (config.description) {
+    //     const desc = document.createElement('p');
+    //     desc.className = 'cb-settings-description';
+    //     desc.textContent = config.description;
+    //     wrapper.appendChild(desc);
+    // }
+
+    return wrapper;
+  }
+
+  /**
+   * Create input element based on field type
+   */
+  createInput(name, config, value) {
+    const currentValue = value !== undefined ? value : config.default;
+    switch (config.type) {
+      case 'number':
+        return this.createNumberInput(name, config, currentValue);
+      case 'boolean':
+        return this.createCheckboxInput(name, config, currentValue);
+      case 'select':
+        return this.createSelectInput(name, config, currentValue);
+      case 'radio':
+        return this.createRadioInput(name, config, currentValue);
+      case 'textarea':
+        return this.createTextareaInput(name, config, currentValue);
+      case 'color':
+        return this.createColorInput(name, config, currentValue);
+      case 'range':
+        return this.createRangeInput(name, config, currentValue);
+      case 'text':
+      default:
+        return this.createTextInput(name, config, currentValue);
+    }
+  }
+  createTextInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'text';
+    input.name = name;
+    input.value = value || '';
+    if (config.placeholder) input.placeholder = config.placeholder;
+    label.appendChild(input);
+
+    // Add description if exists
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createNumberInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    if (config.unit) {
+      labelText.textContent += ` (${config.unit})`;
+    }
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'number';
+    input.style.cssText = 'width: 100px;';
+    input.name = name;
+    input.value = value !== undefined ? value : config.default;
+    if (config.min !== undefined) input.min = config.min;
+    if (config.max !== undefined) input.max = config.max;
+    if (config.step !== undefined) input.step = config.step;
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createCheckboxInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label checkbox';
+    const div = document.createElement('div');
+    const input = document.createElement('input');
+    input.type = 'checkbox';
+    input.name = name;
+    input.checked = value !== undefined ? value : config.default;
+    const span = document.createElement('span');
+    span.textContent = config.label || name;
+    label.appendChild(input);
+    label.appendChild(span);
+    div.appendChild(label);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      div.appendChild(desc);
+    }
+    return label;
+  }
+  createSelectInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createTextNode((config.label || name) + ':');
+    label.appendChild(labelText);
+    const select = document.createElement('select');
+    select.name = name;
+    config.options.forEach(option => {
+      const opt = document.createElement('option');
+      opt.value = option.value;
+      opt.textContent = option.label;
+      if (option.value === value) opt.selected = true;
+      select.appendChild(opt);
+    });
+    label.appendChild(select);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createRadioInput(name, config, value) {
+    const wrapper = document.createElement('div');
+    const title = document.createElement('div');
+    title.textContent = config.label || name;
+    title.style.cssText = 'margin-bottom: 8px;font-weight: 590;';
+    wrapper.appendChild(title);
+    config.options.forEach(option => {
+      const label = document.createElement('label');
+      label.className = 'label checkbox';
+      const input = document.createElement('input');
+      input.type = 'radio';
+      input.name = name;
+      input.value = option.value;
+      input.checked = option.value === value;
+      const span = document.createElement('span');
+      span.textContent = option.label;
+      label.appendChild(input);
+      label.appendChild(span);
+      wrapper.appendChild(label);
+    });
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      wrapper.appendChild(desc);
+    }
+    return wrapper;
+  }
+  createTextareaInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const textarea = document.createElement('textarea');
+    textarea.name = name;
+    textarea.value = value || '';
+    textarea.rows = config.rows || 4;
+    if (config.placeholder) textarea.placeholder = config.placeholder;
+    label.appendChild(textarea);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createColorInput(name, config, value) {
+    const container = document.createElement('div');
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    label.style.cursor = 'pointer';
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'hidden';
+    input.name = name;
+    input.value = value || config.default || '#000000';
+    const group = document.createElement('div');
+    group.className = 'group';
+    group.style.cssText = 'width: 52px; margin:0; overflow: visible;';
+    const colorBtn = document.createElement('button');
+    colorBtn.type = 'button';
+    colorBtn.title = config.label || 'Color';
+    colorBtn.className = 'btn-color is-btn-color';
+    colorBtn.style.backgroundColor = input.value;
+    colorBtn.setAttribute('aria-label', `Choose color for ${config.label || name}`);
+    const openPicker = e => {
+      e.preventDefault();
+      this.builder.openColorPicker(input.value, color => {
+        input.value = color;
+        colorBtn.style.backgroundColor = color;
+        input.dispatchEvent(new Event('change', {
+          bubbles: true
+        }));
+      }, colorBtn);
+    };
+    colorBtn.addEventListener('click', openPicker);
+    // Make label click trigger the button
+    label.addEventListener('click', e => {
+      if (e.target === label || e.target === labelText) {
+        colorBtn.click();
+      }
+    });
+    group.appendChild(colorBtn);
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    container.appendChild(label);
+    container.appendChild(group);
+    return container;
+  }
+  createColorInput2(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const labelText = document.createElement('div');
+    labelText.textContent = config.label || name;
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'color';
+    input.name = name;
+    input.style.cssText = 'width:40px;height:40px';
+    input.value = value || config.default || '#000000';
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+  createRangeInput(name, config, value) {
+    const label = document.createElement('label');
+    label.className = 'label';
+    label.style.fontWeight = 500;
+    const currentVal = value !== undefined ? value : config.default;
+    const labelText = document.createElement('div');
+    labelText.textContent = (config.label || name) + ': ' + currentVal + (config.unit || '');
+    label.appendChild(labelText);
+    const input = document.createElement('input');
+    input.type = 'range';
+    input.className = 'is-rangeslider';
+    input.name = name;
+    input.value = currentVal;
+    if (config.min !== undefined) input.min = config.min;
+    if (config.max !== undefined) input.max = config.max;
+    if (config.step !== undefined) input.step = config.step;
+    input.addEventListener('input', () => {
+      labelText.textContent = (config.label || name) + ': ' + input.value + (config.unit || '');
+    });
+    label.appendChild(input);
+    if (config.description) {
+      const desc = document.createElement('small');
+      desc.style.cssText = 'display: block;margin-top: 4px;';
+      desc.textContent = config.description;
+      label.appendChild(desc);
+    }
+    return label;
+  }
+
+  /**
+   * Get current values from element attributes
+   */
+  getCurrentValues(element, settings) {
+    const values = {};
+    Object.keys(settings).forEach(key => {
+      if (key.startsWith('_')) return;
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      const attrValue = element.getAttribute(attrName);
+      if (attrValue !== null) {
+        values[key] = this.parseValue(attrValue, settings[key].type);
+      }
+    });
+    return values;
+  }
+
+  /**
+   * Parse attribute value based on type
+   */
+  parseValue(value, type) {
+    switch (type) {
+      case 'number':
+        return parseFloat(value);
+      case 'boolean':
+        return value === 'true';
+      default:
+        return value;
+    }
+  }
+
+  /**
+   * Get form values
+   */
+  getFormValues(form) {
+    const values = {};
+    const inputs = form.querySelectorAll('input, select, textarea');
+    inputs.forEach(input => {
+      const name = input.name;
+      if (!name) return;
+      if (input.type === 'checkbox') {
+        values[name] = input.checked;
+      } else if (input.type === 'radio') {
+        if (input.checked) {
+          values[name] = input.value;
+        }
+      } else {
+        values[name] = input.value;
+      }
+    });
+    return values;
+  }
+
+  /**
+   * Apply form values to element
+   */
+  applyValues(element, values) {
+    Object.keys(values).forEach(key => {
+      const attrName = 'data-cb-' + key.replace(/([A-Z])/g, '-$1').toLowerCase();
+      element.setAttribute(attrName, values[key]);
+    });
+  }
+  createEmptyForm() {
+    const form = document.createElement('div');
+    form.className = 'cb-settings-form';
+    form.innerHTML = '<p>This plugin has no configurable settings.</p>';
+    return form;
+  }
+}
+
+class Plugin {
+  constructor(builder) {
+    this.builder = builder;
+  }
+  renderTool() {
+    const builderStuff = this.builder.builderStuff;
+    const contentStuff = this.builder.contentStuff;
+    const util = this.builder.util;
+    const dom = this.builder.dom;
+    let pluginTool = builderStuff.querySelector('.is-plugin-tool');
+    if (!pluginTool) {
+      let html = `
+            <div class="is-tool is-plugin-tool">
+                <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      if (!this.builder.iframe) {
+        pluginTool = builderStuff.querySelector('.is-plugin-tool');
+      } else {
+        pluginTool = contentStuff.querySelector('.is-plugin-tool');
+      }
+      this.pluginTool = pluginTool;
+      let btn = pluginTool.querySelector('button');
+      dom.addEventListener(btn, 'click', () => {
+        // old 10317
+
+        if (this.pluginModal && this.pluginModal.classList.contains('active')) {
+          this.hidePluginEditor();
+        } else {
+          this.renderPanel();
+          this.showPluginEditor();
+        }
+        btn.setAttribute('data-focus', true);
+      });
+    }
+  }
+  renderPanel() {
+    const builderStuff = this.builder.builderStuff;
+    const util = this.builder.util;
+    const dom = this.builder.dom;
+    let pluginModal = builderStuff.querySelector('.is-modal.pluginsettings');
+    if (!pluginModal) {
+      let html = `
+            <div class="is-modal is-modal-content pluginsettings" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-bar is-draggable">
+                    <span>${util.out('Plugin Settings')}</span>
+                    <button class="is-modal-close" tabindex="-1" title="${util.out('Close')}">&#10005;</button>
+                </div>
+                <div class="is-modal-controls" style="box-sizing:border-box;padding:30px;overflow-y: auto;height: calc(100% - 30px);">
+                    <div class="is-tabs" data-group="table">
+                        <a title="${util.out('Style')}" id="tabTableGeneral" href="" data-content="divTableGeneral" class="active">${util.out('Style')}</a>
+                        <a title="${util.out('Layout')}" id="tabTableLayout" href="" data-content="divTableLayout">${util.out('Layout')}</a>
+                    </div>
+                    <div id="divTableGeneral" class="is-tab-content active" tabindex="-1" data-group="table" style="display:block">
+
+                        <div style="display:flex;padding-bottom:12px">
+                            <div style="padding-right:15px">
+                                <div>${util.out('Background')}:</div>
+                                <div>
+                                    <button title="${util.out('Background Color')}" class="input-table-bgcolor is-btn-color"></button>
+                                </div>
+                            </div>
+                            <div>
+                                <div>${util.out('Text Color')}:</div>
+                                <div>
+                                    <button title="${util.out('Text Color')}" class="input-table-textcolor is-btn-color"></button>
+                                </div>
+                            </div>
+                        </div>
+
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Border Thickness')}:</div>
+                            <div>
+                                <select id="selCellBorderWidth" style="width:120px;"><option value="0">No Border</option><option value="1">1</option><option value="2">2</option><option value="3">3</option></select>  
+                            </div>
+                        </div>
+                        
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Border Color')}:</div>
+                            <div>
+                                <button title="${util.out('Border Color')}" class="input-table-bordercolor is-btn-color"></button>
+                            </div>
+                        </div>
+                        
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Apply To')}:</div>
+                            <div>
+                                <select id="selTableApplyTo" style="width:120px;">
+                                    <option value="table">${util.out('Table')}</option>
+                                    <option value="currentrow">${util.out('Current Row')}</option>
+                                    <option value="currentcol">${util.out('Current Column')}</option>
+                                    <option value="evenrows">${util.out('Even Rows')}</option>
+                                    <option value="oddrows">${util.out('Odd Rows')}</option>  
+                                    <option value="currentcell">${util.out('Current Cell')}</option>  
+                                </select>
+                            </div>
+                        </div>
+
+                    </div>
+
+                    <div id="divTableLayout" class="is-tab-content" tabindex="-1" data-group="table">
+                    
+                        <div style="padding-bottom:12px;">
+                            <div>${util.out('Insert Row')}:</div>
+                            <div style="display:flex">
+                                <button class="classic" title="${util.out('Above')}" data-table-cmd="rowabove" title="${util.out('Above')}" style="margin-right:15px"> ${util.out('Above')} </button>
+                                <button class="classic" title="${util.out('Below')}" data-table-cmd="rowbelow" title="${util.out('Below')}" style=""> ${util.out('Below')} </button>
+                            </div> 
+                        </div>
+                        
+                        <div style="padding-bottom:15px;">
+                            <div>${util.out('Insert Column')}:</div>
+                            <div style="display:flex">
+                                <button class="classic" title="${util.out('Left')}" data-table-cmd="columnleft" title="${util.out('Left')}" style="margin-right:15px"> ${util.out('Left')} </button> 
+                                <button class="classic" title="${util.out('Right')}" data-table-cmd="columnright" title="${util.out('Right')}" style=""> ${util.out('Right')} </button> 
+                            </div> 
+                        </div>
+
+                        <div style="padding-bottom:15px;">
+                            <button class="classic" title="${util.out('Delete Row')}" data-table-cmd="delrow" title="Delete Row" style=""> ${util.out('Delete Row')} </button> 
+                        </div>
+
+                        <div style="padding-bottom:15px;">    
+                            <button class="classic" title="${util.out('Delete Column')}" data-table-cmd="delcolumn" title="Delete Column" style=""> ${util.out('Delete Column')} </button> 
+                        </div>
+                        
+                        <div>    
+                            <button class="classic" title="${util.out('Merge Cell')}" data-table-cmd="mergecell" style="">${util.out('Merge Cell')}</button> 
+                        </div>
+                    </div>
+                </div>
+            </div>
+            `;
+      dom.appendHtml(builderStuff, html);
+      pluginModal = builderStuff.querySelector('.is-modal.pluginsettings');
+      this.pluginModal = pluginModal;
+      let btnOk = pluginModal.querySelector('.input-ok');
+      dom.addEventListener(btnOk, 'click', () => {
+        this.builder.uo.saveForUndo();
+        this.builder.opts.onChange();
+        util.hideModal(pluginModal);
+      });
+      let btnCancel = pluginModal.querySelector('.input-cancel');
+      dom.addEventListener(btnCancel, 'click', () => {
+        util.hideModal(pluginModal);
+      });
+      new Tabs({
+        element: pluginModal
+      });
+      new Draggable$2({
+        selector: '.is-modal.pluginsettings .is-draggable'
+      });
+    }
+  }
+  showPluginEditor() {
+    const pluginModal = this.pluginModal;
+    this.builder.util.showModal(pluginModal);
+    this.realtime();
+    const handlePluginClick = e => {
+      const clrPicker = document.querySelector('.pop-picker.active') || document.querySelector('.pickgradientcolor.active');
+      let elm = e.target;
+      let elmRemoved = !document.contains(elm); // e.g. when deleting a card in card list plugin
+
+      if (this.builder.doc.activeElement) {
+        if (this.builder.doc.activeElement.closest('.is-modal')) {
+          // prevent modal close when mouseup outside the modal
+          return;
+        }
+      }
+      if (!elm) return;
+      if (!elm.closest('.is-plugin-tool') && !elm.closest('.is-sidebar') && !elm.closest('.is-modal') && !elm.closest('.keep-selection') && !elm.closest('[data-cb-type]') && !clrPicker && !elmRemoved) {
+        // click outside
+
+        // hide
+        this.hidePluginEditor();
+        // console.log('HIDE');
+
+        document.removeEventListener('click', handlePluginClick);
+        if (this.builder.iframeDocument) {
+          this.builder.doc.removeEventListener('click', handlePluginClick);
+        }
+        this.builder.handlePluginClick_ = false;
+      }
+      if (elm.closest('[data-cb-type]')) {
+        this.realtime();
+      }
+    };
+    if (!this.builder.handlePluginClick_) {
+      document.addEventListener('click', handlePluginClick);
+      if (this.builder.iframeDocument) {
+        this.builder.doc.addEventListener('click', handlePluginClick);
+      }
+      this.builder.handlePluginClick_ = true;
+    }
+  }
+  hidePluginEditor() {
+    const pluginModal = this.pluginModal;
+    if (pluginModal) this.builder.util.hideModal(pluginModal);
+  }
+  realtime() {
+    const util = this.builder.util;
+    const pluginModal = this.pluginModal;
+    let currentElement = this.builder.activePlugin;
+    const runtime = this.builder.win.builderRuntime;
+    if (currentElement && runtime) {
+      const pluginName = currentElement.getAttribute('data-cb-type');
+      const plugin = runtime.getPlugin(pluginName);
+      let titleHtml = util.out(plugin.displayName || plugin.name);
+      const modalBar = pluginModal.querySelector('.is-modal-bar > span');
+      modalBar.innerHTML = titleHtml;
+      const container = pluginModal.querySelector('.is-modal-controls');
+
+      // Clear panel
+      container.innerHTML = '';
+      const div = document.createElement('div');
+      div.classList.add('submain');
+      container.appendChild(div);
+
+      // Store references
+      this.currentElement = currentElement;
+      this.generator = new SettingsUIGenerator(runtime, this.builder);
+
+      // Check if plugin has custom content editor
+      const hasContentEditor = plugin && plugin.editor && plugin.editor.openContentEditor;
+      if (hasContentEditor) {
+        // Get original content for the editor to work with
+        const originalContent = currentElement.getAttribute('data-cb-original-content');
+
+        // Create a temporary element for editing (so editor can manipulate it)
+        let editableClone = document.querySelector('.editable-clone');
+        if (editableClone) editableClone.remove();
+        // editableClone = document.createElement('div');
+        editableClone = currentElement.cloneNode(false);
+        editableClone.innerHTML = originalContent;
+        editableClone.className = 'editable-clone';
+        editableClone.style.display = 'none'; // Hidden, just for editing
+        document.body.appendChild(editableClone);
+        const originalElement = editableClone.cloneNode(false);
+
+        // Let plugin handle everything - pass the editable clone
+        const editorUI = plugin.editor.openContentEditor(editableClone, this.builder, async () => {
+          this.builder.uo.saveForUndo();
+
+          // Store edited content from clone
+          currentElement.setAttribute('data-cb-original-content', editableClone.innerHTML);
+
+          // Also performs similar value updates like the applyChanges()
+          // currentElement.setAttribute('data-cb-content', editableClone.getAttribute('data-cb-content'));
+          const getChangedDataAttributes = (el1, el2) => {
+            const changed = [];
+            for (const key of Object.keys(el1.dataset)) {
+              if (key in el2.dataset && el1.dataset[key] !== el2.dataset[key]) {
+                changed.push(key);
+              }
+            }
+            return changed;
+          };
+          const changedAttributes = getChangedDataAttributes(originalElement, editableClone);
+          // let hasChange = changedAttributes.length > 0;
+          for (const attrName of changedAttributes) {
+            // console.log(attrName);
+            currentElement.dataset[attrName] = editableClone.dataset[attrName];
+            // update form (not working)
+            // const convertCbKey = (str) => {
+            //     return str.replace(/^cb/, '').replace(/^./, c => c.toLowerCase());
+            // }
+            // const name = convertCbKey(attrName);
+            // this.currentForm.querySelector(`[name="${name}"]`).value = editableClone.dataset[attrName];
+          }
+          // console.log(hasChange)
+          // -------
+
+          currentElement.innerHTML = editableClone.innerHTML; // Update current content
+
+          // Remove temporary clone
+          editableClone.remove();
+
+          // update form (working)
+          // currentElement.click();
+          // return;
+
+          // Reinitialize plugin with new content
+          await runtime.reinitialize(currentElement.parentElement);
+          this.builder.onChange();
+        });
+        div.appendChild(editorUI);
+      }
+
+      // Generate form
+      this.currentForm = this.generator.generateForm(pluginName, currentElement, () => {
+        this.builder.uo.saveForUndo();
+        this.applyChanges(runtime);
+      });
+      this.currentForm.style.marginTop = '20px';
+      div.appendChild(this.currentForm);
+    }
+  }
+  async applyChanges(runtime) {
+    if (!this.currentElement || !this.currentForm) return;
+
+    // 1. Get form values
+    const values = this.generator.getFormValues(this.currentForm);
+
+    // 2. Apply to element attributes
+    this.generator.applyValues(this.currentElement, values);
+
+    // 3. Reinitialize component
+    const container = this.currentElement.parentElement || this.currentElement.closest('.is-wrapper');
+    await runtime.reinitialize(container);
+
+    //Trigger Change event
+    this.builder.opts.onChange();
+
+    // console.log('Settings applied and component reinitialized');
+  }
+
+  click(e) {
+    const plugin = e.target.closest('[data-cb-type]');
+    if (plugin) {
+      this.builder.activePlugin = plugin;
+      if (!this.builder.isContentBox) {
+        this.renderTool();
+        this.pluginTool.style.display = 'flex';
+        let _toolwidth = this.pluginTool.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
+
+        let w = plugin.offsetWidth * this.builder.opts.zoom;
+        let top = plugin.getBoundingClientRect().top + this.builder.win.pageYOffset;
+        let left = plugin.getBoundingClientRect().left - 2;
+        left = left + (w - _toolwidth);
+
+        //Adjust left in case an element is outside the screen
+        const _screenwidth = window.innerWidth;
+        if (_toolwidth + left > _screenwidth) left = plugin.getBoundingClientRect().left;
+        this.pluginTool.style.top = top + 'px';
+        this.pluginTool.style.left = left + 'px';
+      }
+    } else {
+      this.builder.activePlugin = null;
+      if (this.pluginTool) this.pluginTool.style.display = '';
+    }
+  }
+}
+
 class Module {
   constructor(builder) {
     this.builder = builder;
@@ -79076,6 +80551,7 @@ class Element$1 {
     this.button = new Button(builder);
     this.image = new Image$1(builder);
     this.spacer = new Spacer(builder);
+    this.plugin = new Plugin(builder);
     this.module = new Module(builder);
     this.code = new Code(builder);
     this.iframe = new Iframe(builder);
@@ -79114,6 +80590,10 @@ class Element$1 {
 
     // Set contentEditable FALSE on special elements
 
+    const plugins = col.querySelectorAll('[data-cb-type]'); // plugins
+    Array.prototype.forEach.call(plugins, plugin => {
+      plugin.contentEditable = false;
+    });
     let sociallinks = col.querySelectorAll('.is-social');
     Array.prototype.forEach.call(sociallinks, sociallink => {
       sociallink.contentEditable = false;
@@ -79205,6 +80685,9 @@ class Element$1 {
         subblock = true;
       }
     }
+    if (elm.closest('[data-cb-type]')) {
+      customcode = true;
+    }
     if (!customcode && !noedit && !_protected || subblock) {
       //previously this is commented: && !noedit && !_protected
 
@@ -79275,6 +80758,9 @@ class Element$1 {
 
     // Module
     this.module.click(col, e);
+
+    // Plugin
+    this.plugin.click(e);
   }
 }
 
@@ -88430,6 +89916,12 @@ class ElementTool {
     const btnMore = elementTool.querySelector('.elm-more');
     dom.addEventListener(btnMore, 'click', () => {
       const viewportHeight = window.innerHeight;
+      const elmSettings = elementMore.querySelector('.elm-settings');
+      if (this.builder.activeElement.hasAttribute('data-cb-type')) {
+        elmSettings.style.display = 'none';
+      } else {
+        elmSettings.style.display = '';
+      }
 
       /*
       let top, left;
@@ -88695,7 +90187,10 @@ class ElementTool {
     if (dom.parentsHasClass(elm, 'is-subblock')) {
       subblock = true;
     }
-    if ((customcode || noedit || _protected) && !subblock) ; else {
+    const plugin = elm.closest('[data-cb-type]');
+    if ((customcode || noedit || _protected) && !subblock) ; else if (plugin) {
+      activeElement = plugin;
+    } else {
       const tagName = elm.tagName.toLowerCase();
       // LATER: label, code, figcaption ?
       if (!elm.classList.contains('cell-active') && (tagName === 'h1' || tagName === 'h2' || tagName === 'h3' || tagName === 'h4' || tagName === 'h5' || tagName === 'h6' || tagName === 'p' || tagName === 'div' || tagName === 'pre' || tagName === 'blockquote' || tagName === 'li' || tagName === 'img' || tagName === 'iframe')) {
@@ -88847,6 +90342,8 @@ class ElementTool {
     let elm = this.builder.activeElement;
     if (!elm) return;
     if (elm.closest('.is-dock')) return;
+    // if(elm.closest('[data-cb-type]')) return;
+
     let top, left;
     if (!this.builder.iframe) {
       top = elm.getBoundingClientRect().top + window.pageYOffset;
@@ -106495,6 +107992,9 @@ class ContentStuff$1 {
         <div class="is-tool is-iframe-tool">
             <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
         </div>
+        <div class="is-tool is-plugin-tool">
+            <button title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;background:none;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
+        </div>
         <div class="is-tool is-module-tool">
         <button class="btn-module-refresh" title="${util.out('Refresh')}" data-title="${util.out('Refresh')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-reload"></use></svg></button>
                 <button class="btn-module-settings" title="${util.out('Settings')}" data-title="${util.out('Settings')}" style="width:40px;height:40px;"><svg class="is-icon-flex"><use xlink:href="#icon-cog"></use></svg></button>
@@ -106900,20 +108400,24 @@ class ContentStuff$1 {
         /*
         .is-tool.is-video-tool,
         .is-tool.is-audio-tool,
+        .is-tool.is-plugin-tool,
         .is-tool.is-iframe-tool {
             background: rgba(0, 0, 0, 0.15);
             border: transparent 1px solid;
         }
         .is-tool.is-video-tool > div,
         .is-tool.is-audio-tool > div,
+        .is-tool.is-plugin-tool > div,
         .is-tool.is-iframe-tool > div,
         .is-tool.is-video-tool > button,
         .is-tool.is-audio-tool > button,
+        .is-tool.is-plugin-tool > button,
         .is-tool.is-iframe-tool > button {
             background: transparent;
         }
         .is-tool.is-video-tool svg,
         .is-tool.is-audio-tool svg,
+        .is-tool.is-plugin-tool svg,
         .is-tool.is-iframe-tool svg {
             fill: #fff;
         }
@@ -106923,6 +108427,7 @@ class ContentStuff$1 {
         .is-tool.is-table-tool,
         .is-tool.is-code-tool,
         .is-tool.is-module-tool,
+        .is-tool.is-plugin-tool,
         .is-tool#divLinkTool,
         .is-tool#divButtonTool,
         .is-tool.is-svg-tool { 
@@ -106936,6 +108441,7 @@ class ContentStuff$1 {
         .is-tool.is-table-tool > button,
         .is-tool.is-code-tool > button,
         .is-tool.is-module-tool > button,
+        .is-tool.is-plugin-tool > button,
         .is-tool#divLinkTool > button,
         .is-tool#divButtonTool > button,
         .is-tool.is-svg-tool > button { 
@@ -106948,6 +108454,7 @@ class ContentStuff$1 {
         .is-tool.is-table-tool > button svg,
         .is-tool.is-code-tool > button svg,
         .is-tool.is-module-tool > button svg,
+        .is-tool.is-plugin-tool > button svg,
         .is-tool#divLinkTool > button svg,
         .is-tool#divButtonTool > button svg,
         .is-tool.is-svg-tool > button svg {
@@ -106962,6 +108469,7 @@ class ContentStuff$1 {
 
         .is-tool.is-video-tool, 
         .is-tool.is-audio-tool,
+        .is-tool.is-plugin-tool,
         .is-tool.is-iframe-tool {
             background: rgba(255, 255, 255, 0.97) !important;
             border: transparent 1px solid;
@@ -106973,6 +108481,7 @@ class ContentStuff$1 {
         .is-tool.is-video-tool > button, 
         .is-tool.is-audio-tool > div, 
         .is-tool.is-audio-tool > button, 
+        .is-tool.is-plugin-tool > div, 
         .is-tool.is-iframe-tool > div, 
         .is-tool.is-iframe-tool > button {
             width: 35px !important;
@@ -106982,6 +108491,7 @@ class ContentStuff$1 {
 
         .is-tool.is-video-tool svg, 
         .is-tool.is-audio-tool svg, 
+        .is-tool.is-plugin-tool svg, 
         .is-tool.is-iframe-tool svg {
             width: 17px;
             height: 17px;
@@ -123687,6 +125197,143 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
   fromViewToActual(html) {
     return this.htmlutil.fromViewToActual(html);
   }
+  openColorPicker(currentColor, callback, btn) {
+    this.colorPicker.open(callback, currentColor, () => {}, btn);
+  }
+  openIconPicker(callback) {
+    let iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+    if (!iconModal) {
+      // Create modal with search input and event listeners once
+      let html = `
+            <style>
+                .is-modal.iconselect .icon-search-wrapper {
+                    position: sticky;
+                    top: 0;
+                    background: white;
+                    padding: 20px;
+                    border-bottom: 1px solid #ddd;
+                    z-index: 10;
+                }
+                .is-modal.iconselect .icon-search {
+                    width: 100%;
+                    padding: 10px 15px;
+                    font-size: 16px;
+                    border: 1px solid #ccc;
+                    border-radius: 4px;
+                    box-sizing: border-box;
+                }
+                .is-modal.iconselect .icon-search:focus {
+                    outline: none;
+                    border-color: #007bff;
+                }
+                .is-modal.iconselect .icon-list {
+                    display: flex;
+                    gap: 10px;
+                    flex-flow: wrap;
+                    padding: 20px;
+                }
+                .is-modal.iconselect .icon-list > button {
+                    display: flex !important;
+                    width: 80px !important;
+                    height: 80px !important;
+                    flex: none;
+                    font-size: 30px !important;
+                    box-shadow: none !important;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .is-modal.iconselect .icon-list > button.hidden {
+                    display: none !important;
+                }
+                .is-modal.iconselect .no-results {
+                    padding: 40px 20px;
+                    text-align: center;
+                    color: #666;
+                    display: none;
+                }
+                .is-modal.iconselect .no-results.show {
+                    display: block;
+                }
+            </style>
+            <div class="is-modal iconselect" tabindex="-1" role="dialog" aria-modal="true" aria-hidden="true">
+                <div class="is-modal-content scroll" style="width: 90vw; max-width: 908px; height: 70vh; min-height: 525px; padding: 0;">
+                    <div style="height: 100%; overflow-y: auto; display: flex; flex-direction: column;">
+                        <div class="icon-search-wrapper">
+                            <input type="text" class="icon-search" placeholder="Search icons... (e.g., alarm, wrench)" />
+                        </div>
+                        <div class="icon-list"></div>
+                        <div class="no-results">No icons found matching your search.</div>
+                    </div>
+                </div>
+            </div>
+            `;
+      this.dom.appendHtml(this.builderStuff, html);
+      iconModal = this.builderStuff.querySelector('.is-modal.iconselect');
+      this.iconModal = iconModal;
+      const iconList = this.builderStuff.querySelector('.icon-list');
+      const searchInput = this.builderStuff.querySelector('.icon-search');
+      const noResults = this.builderStuff.querySelector('.no-results');
+      iconList.innerHTML = this.rte.getIcons2() + this.rte.getIcons();
+      let icons = iconList.querySelectorAll('button');
+
+      // Add click handlers for icons
+      icons.forEach(icon => {
+        icon.addEventListener('click', () => {
+          // Get the current callback from the modal's data
+          const currentCallback = iconModal._currentCallback;
+          if (currentCallback) {
+            currentCallback(icon.innerHTML);
+          }
+          this.util.hideModal(iconModal);
+        });
+      });
+
+      // Add search/filter functionality
+      searchInput.addEventListener('input', e => {
+        const searchTerm = e.target.value.toLowerCase().trim();
+        let visibleCount = 0;
+        icons.forEach(icon => {
+          const iconElement = icon.querySelector('i');
+          if (!iconElement) return;
+
+          // Get class names from the icon
+          const iconClasses = iconElement.className.toLowerCase();
+
+          // Check if search term matches any part of the icon classes
+          if (searchTerm === '' || iconClasses.includes(searchTerm)) {
+            icon.classList.remove('hidden');
+            visibleCount++;
+          } else {
+            icon.classList.add('hidden');
+          }
+        });
+
+        // Show/hide no results message
+        if (visibleCount === 0 && searchTerm !== '') {
+          noResults.classList.add('show');
+        } else {
+          noResults.classList.remove('show');
+        }
+      });
+
+      // Clear search when modal is opened
+      iconModal.addEventListener('modalshow', () => {
+        searchInput.value = '';
+        searchInput.dispatchEvent(new Event('input'));
+      });
+    }
+
+    // Store the current callback and reset search
+    iconModal._currentCallback = callback;
+    const searchInput = iconModal.querySelector('.icon-search');
+    if (searchInput) {
+      searchInput.value = '';
+      searchInput.dispatchEvent(new Event('input'));
+      // Focus search input after a brief delay to ensure modal is visible
+      setTimeout(() => searchInput.focus(), 100);
+    }
+    this.util.showModal(iconModal);
+  }
   colorpicker(onPick, defaultcolor) {
     // return new ColorPicker({
     //     onPick: onPick,
@@ -124338,6 +125985,9 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       }
     });
   }
+  openFilePicker(type, callback) {
+    this.openAssetSelect(type, callback);
+  }
   openAssetSelect(targetAssetType, callback, defaultValue) {
     const inpUrl = document.createElement('input');
 
@@ -162390,7 +164040,8 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       blockContainer: '.is-box',
       slider: this.settings.slider,
       onRender: () => {
-        this.settings.onRender();
+        this.settings.onRender(); // Re-init plugins
+        // if(this.win.builderRuntime) this.win.builderRuntime.reinitialize();
       },
       onChange: () => {
         this.settings.onChange();
@@ -164137,6 +165788,18 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   } // init
 
 
+  openFilePicker(type, callback) {
+    this.editor.openAssetSelect(type, callback);
+  }
+
+  openColorPicker(currentColor, callback, btn) {
+    this.editor.openColorPicker(currentColor, callback, btn);
+  }
+
+  openIconPicker(callback) {
+    this.editor.openIconPicker(callback);
+  }
+
   openPreview() {
     this.animateScroll.openPreview();
   }
@@ -164738,7 +166401,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.markScrollTarget(this.activeSection); // adding class 'scroll-target'
   }
 
-  doUndoRedo() {
+  async doUndoRedo() {
     /*
     // Clean
     const elms = this.wrapperEl.querySelectorAll(`[data-center],[data-center-top],[data--50-bottom],
@@ -164807,6 +166470,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     if (this.controlPanel) {
       this.controlpanel.select('');
     }
+
+    const runtime = this.win.builderRuntime;
+    if (runtime) runtime.reinitialize();
   }
 
   refreshAnim() {
@@ -165051,7 +166717,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     });
     this.editor.applyBehavior(); // Re-apply 
 
-    this.settings.onRender();
+    this.settings.onRender(); // Re-init plugins
+
+    if (this.win.builderRuntime) this.win.builderRuntime.reinitialize();
     const scrollButton = this.wrapperEl.querySelectorAll('.is-arrow-down a');
     scrollButton.forEach(btn => {
       btn.addEventListener('click', e => {
@@ -165838,7 +167506,9 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
     this.pageSetupDone = true; //prevent duplicate for traditional pageSetup on init
     // Re-apply 
 
-    this.settings.onRender();
+    this.settings.onRender(); // Re-init plugins
+
+    if (this.win.builderRuntime) this.win.builderRuntime.reinitialize();
     const scrollButton = wrapper.querySelectorAll('.is-arrow-down a');
     scrollButton.forEach(btn => {
       btn.addEventListener('click', e => {