@innovastudio/contentbox 1.6.150 → 1.6.152

package/public/contentbox/contentbox.esm.js

@@ -363,7 +363,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M17 17v2a2 2 0 0 1 -2 2h-10a2 2 0 0 1 -2 -2v-10a2 2 0 0 1 2 -2h2"></path>
             </symbol>
 
-            <symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-typography" viewBox="0 0 24 24" stroke-width="1,3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <line x1="4" y1="20" x2="7" y2="20"></line>
                 <line x1="14" y1="20" x2="21" y2="20"></line>
@@ -372,12 +372,6 @@ const prepareSvgIcons$1 = builder => {
                 <polyline points="5 20 11 4 13 4 20 20"></polyline>
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
-                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
-                <line x1="12" y1="5" x2="12" y2="19"></line>
-                <line x1="5" y1="12" x2="19" y2="12"></line>
-            </symbol>
-
             <symbol id="icon-hand-move" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M8 13v-8.5a1.5 1.5 0 0 1 3 0v7.5"></path>
@@ -388,7 +382,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M14 3.458c1.32 .354 2.558 .902 3.685 1.612"></path>
             </symbol>
             
-            <symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-wand" viewBox="0 0 24 24" stroke-width="1.05" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <polyline points="6 21 21 6 18 3 3 18 6 21"></polyline>
                 <line x1="15" y1="6" x2="18" y2="9"></line>
@@ -622,7 +616,7 @@ const prepareSvgIcons$1 = builder => {
                 <path d="M6 15l6 -6l6 6"></path>
             </symbol>
 
-            <symbol id="icon-anim-timeline" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-anim-timeline" viewBox="0 0 24 24" stroke-width="1.1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                 <path d="M9.225 18.412a1.595 1.595 0 0 1 -1.225 .588c-.468 0 -.914 -.214 -1.225 -.588l-4.361 -5.248a1.844 1.844 0 0 1 0 -2.328l4.361 -5.248a1.595 1.595 0 0 1 1.225 -.588c.468 0 .914 .214 1.225 .588l4.361 5.248a1.844 1.844 0 0 1 0 2.328l-4.361 5.248z"></path>
                 <path d="M17 5l4.586 5.836a1.844 1.844 0 0 1 0 2.328l-4.586 5.836"></path>
@@ -631,6 +625,9 @@ const prepareSvgIcons$1 = builder => {
             <symbol id="icon-download" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-2" /><path d="M7 11l5 5l5 -5" /><path d="M12 4l0 12" />
             </symbol>
+            <symbol id="icon-blocks" viewBox="0 0 24 24" stroke-width="1.3" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+                <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M8 8m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" /><path d="M4 4l0 .01" /><path d="M8 4l0 .01" /><path d="M12 4l0 .01" /><path d="M16 4l0 .01" /><path d="M4 8l0 .01" /><path d="M4 12l0 .01" /><path d="M4 16l0 .01" />
+            </symbol>
 
             </defs>
         </svg>`;
@@ -979,7 +976,7 @@ class SideBar {
           '<svg class="svg-icon"><use xlink:href="#icon-plus"></use></svg>' + '</button>';
         } else if (button.name === 'snippet') {
           html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarSnippets" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<svg class="svg-icon"><use xlink:href="#icon-align-center"></use></svg>' +
-          '<svg class="svg-icon"><use xlink:href="#icon-box-multiple"></use></svg>' + '</button>';
+          '<svg class="svg-icon" style="width:20px;height:20px"><use xlink:href="#icon-blocks"></use></svg>' + '</button>';
         } else if (button.name === 'typography') {
           if (this.builder.enableContentStyle) {
             html += '<button class="is-sidebar-button" tabindex="-1" data-content="divSidebarTypography" data-command="typography" data-title="' + out(button.title) + '" title="' + out(button.title) + '">' + // '<span style="">a</span>' +
@@ -25259,12 +25256,14 @@ class Settings {
                     <option value="actual">${out('Actual')}</option>
                 </select>
 
+                ${this.builder.themes && this.builder.themes.length > 0 ? `
                 <div class="label">${out('Theme')}:</div>
                 <div class="group">
                     <button type="button" title="${out('Light')}" data-theme="light" style="background:#fff;border:rgb(132 132 132 / 16%) 1px solid;"></button>
                     <button type="button" title="${out('Dark')}" data-theme="dark" style="background:#000;border:rgba(0,0,0,0.15) 1px solid;"></button>
                 </div>
-
+                ` : ''}
+                
             </div>
         `;
     dialog.insertAdjacentHTML('beforeend', html);
@@ -31242,6 +31241,7 @@ class Util$1 {
   showRtePop(pop, onShow, btn) {
     const dom = this.dom;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     if (onShow) onShow();
     dom.removeClass(pop, 'deactive');
     dom.addClass(pop, 'active');
@@ -31306,6 +31306,7 @@ class Util$1 {
     pop.style.display = '';
     dom.removeClass(pop, 'active');
     dom.addClass(pop, 'deactive');
+    pop.setAttribute('aria-hidden', 'true');
   }
   showPopOverlay(pop, cancelCallback, btn) {
     const builderStuff = this.builder.builderStuff;
@@ -31979,12 +31980,27 @@ class Util$1 {
       if (mode === 'cell' || mode === 'cell-right') {
         dom.moveAfter(cellElement, cell);
       }
+      let element;
+      if (cellElement.childNodes && cellElement.childNodes[0]) {
+        element = cellElement.childNodes[0];
+      }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
       this.fixLayout(row);
-      cellElement.click(); //change active block to the newly created
-    }
 
+      // cellElement.click(); //change active block to the newly created
+      if (element && element.tagName.toLowerCase() === 'img') {
+        element.onload = () => {
+          element.click();
+          element.onload = null;
+          setTimeout(() => {
+            this.builder.element.image.repositionImageTool();
+          }, 100);
+        };
+      } else if (element) {
+        element.click();
+      }
+    }
     if (mode === 'row') {
       this.builder.uo.saveForUndo();
       let rowElement, cellElement;
@@ -32022,11 +32038,26 @@ class Util$1 {
       }
       row.parentNode.insertBefore(rowElement, row);
       dom.moveAfter(rowElement, row);
+      let element;
+      if (rowElement.childNodes && rowElement.childNodes[0].childNodes && rowElement.childNodes[0].childNodes) {
+        element = rowElement.childNodes[0].childNodes[0];
+      }
       let builderActive = this.builder.doc.querySelector('.builder-active');
       if (builderActive) this.builder.applyBehaviorOn(builderActive);
-      cellElement.click(); //change active block to the newly created
-    }
 
+      // cellElement.click(); //change active block to the newly created
+      if (element && element.tagName.toLowerCase() === 'img') {
+        element.onload = () => {
+          element.click();
+          element.onload = null;
+          setTimeout(() => {
+            this.builder.element.image.repositionImageTool();
+          }, 100);
+        };
+      } else if (element) {
+        element.click();
+      }
+    }
     if (mode === 'elm') {
       let elm = this.builder.activeElement; // See elementtool.js line 195-196. // document.querySelector('.elm-active');
       if (!elm) return;
@@ -32057,6 +32088,9 @@ class Util$1 {
         let checkLoad = setInterval(() => {
           if (newelement.complete) {
             newelement.click();
+            setTimeout(() => {
+              this.builder.element.image.repositionImageTool();
+            }, 100);
             clearInterval(checkLoad);
           }
         }, 30);
@@ -42263,7 +42297,7 @@ const prepareSvgIcons = builder => {
                 <circle cx="12" cy="16" r="1" />
                 <path d="M8 11v-4a4 4 0 0 1 8 0v4" />
             </symbol>
-            <symbol viewBox="0 0 24 24" id="icon-code" stroke-width="1" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol viewBox="0 0 24 24" id="icon-code" stroke-width="1.4" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                 <path stroke="none" d="M0 0h24v24H0z"/>
                 <polyline points="7 8 3 12 7 16" />
                 <polyline points="17 8 21 12 17 16" />
@@ -42551,7 +42585,7 @@ const prepareSvgIcons = builder => {
                 <path d="M17 17h2a2 2 0 0 0 2 -2v-4a2 2 0 0 0 -2 -2h-14a2 2 0 0 0 -2 2v4a2 2 0 0 0 2 2h2" /><path d="M17 9v-4a2 2 0 0 0 -2 -2h-6a2 2 0 0 0 -2 2v4" /><path d="M7 13m0 2a2 2 0 0 1 2 -2h6a2 2 0 0 1 2 2v4a2 2 0 0 1 -2 2h-6a2 2 0 0 1 -2 -2z" />
             </symbol>
 
-            <symbol id="icon-plus" viewBox="0 0 24 24" stroke-width="1.7" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+            <symbol id="icon-plus" 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>
                 <line x1="12" y1="5" x2="12" y2="19"></line>
                 <line x1="5" y1="12" x2="19" y2="12"></line>
@@ -94226,6 +94260,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -94260,6 +94295,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -95096,6 +95132,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -95422,6 +95459,7 @@ class Rte {
         const top = btn.getBoundingClientRect().top;
         const left = btn.getBoundingClientRect().left;
         pop.style.display = 'flex';
+        pop.setAttribute('aria-hidden', 'false');
         const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
         const h = pop.offsetHeight;
         if (!dom.hasClass(pop, 'active')) {
@@ -96939,6 +96977,7 @@ class Rte {
     const top = btnRteIcons.getBoundingClientRect().top;
     const left = btnRteIcons.getBoundingClientRect().left;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (!dom.hasClass(pop, 'active')) {
@@ -97026,6 +97065,7 @@ class Rte {
     });
     const pop = this.rteMoreOptions;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (this.builder.opts.toolbar === 'left') {
@@ -97102,6 +97142,7 @@ class Rte {
     const top = btnElementRteMore.getBoundingClientRect().top;
     const left = btnElementRteMore.getBoundingClientRect().left;
     pop.style.display = 'flex';
+    pop.setAttribute('aria-hidden', 'false');
     const w = pop.offsetWidth; //to get value, element must not hidden (display:none). So set display:flex before this.
     const h = pop.offsetHeight;
     if (this.builder.opts.toolbar === 'left') {
@@ -110406,6 +110447,10 @@ class Dictation {
       const inpCommandLang = this.modalConfig.querySelector('.input-command-lang');
       localStorage.setItem('_command_lang', inpCommandLang.value);
       this.builder.speechRecognitionLang = inpCommandLang.value;
+      const inpImageModelSelect = this.modalConfig.querySelector('#inpImageModelSelect');
+      localStorage.setItem('_image_model', inpImageModelSelect.value);
+      const inpImageSizeSelect = this.modalConfig.querySelector('#inpImageSizeSelect');
+      localStorage.setItem('_image_size', inpImageSizeSelect.value);
       this.builder.hideModal(this.modalConfig);
     });
     const btnConfigReset = this.modalConfig.querySelector('.input-reset');
@@ -110686,8 +110731,12 @@ class Dictation {
     let models = this.imageModels;
 
     // Default selections
-    const defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
-    const defaultSize = this.builder.imageSize || 'landscape_4_3';
+    let defaultModelId = this.builder.imageModel || 'fal-ai/flux-1/schnell';
+    let defaultSize = this.builder.imageSize || 'landscape_4_3';
+    const storedModel = localStorage.getItem('_image_model');
+    if (storedModel) defaultModelId = storedModel;
+    const storedSize = localStorage.getItem('_image_size');
+    if (storedSize) defaultSize = storedSize;
 
     // Helper: return available sizes for a model
     function getSizesForModel(modelId) {
@@ -110883,6 +110932,7 @@ class Dictation {
       return;
     }
     this.modalCommand.classList.add('active');
+    this.modalCommand.setAttribute('aria-hidden', 'false');
     inpCommand.focus();
     localStorage.setItem('_dictation', '1');
     const chkAutoSend = this.builderStuff.querySelector('#chkAutoSendCommand');
@@ -119529,6 +119579,7 @@ class ContentBuilder {
       mediaSelect: '',
       // NEW: for image & video
 
+      filePickerSize: 'medium',
       // selectIcon: '<svg class="is-icon-flex"><use xlink:href="#ion-more"></use></svg>',
       selectIcon: '<svg class="is-icon-flex" style="width:16px;height:16px;"><use xlink:href="#icon-folder"></use></svg>',
       // NEW: for any other file select. Will be visible on hyperlink dialog, image dialog (image link), and Column Settings dialog (on Click tab)
@@ -120578,7 +120629,20 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
     } else if (this.opts.videoselect !== '') {
       this.opts.videoSelect = this.opts.videoselect;
     }
-    if (this.assetPanelFullScreen) {
+    if (this.opts.filePicker) {
+      this.opts.imageSelect = this.opts.filePicker;
+      this.opts.videoSelect = this.opts.filePicker;
+      this.opts.audioSelect = this.opts.filePicker;
+      this.opts.fileSelect = this.opts.filePicker;
+      this.opts.mediaSelect = this.opts.filePicker;
+      // this.settings.otherSelect = this.settings.filePicker; // this enables additional selector button on link dialog
+
+      // backward compatible
+      this.settings.imageselect = this.settings.filePicker;
+      this.settings.fileselect = this.settings.filePicker;
+      this.settings.videoselect = this.settings.filePicker;
+    }
+    if (this.assetPanelFullScreen || this.filePickerSize === 'fullscreen') {
       this.imageSelectWidth = '100vw';
       this.imageSelectHeight = '100vh';
       this.fileSelectWidth = '100vw';
@@ -120598,6 +120662,26 @@ Add an image for each feature.`, 'Create a new content showcasing a photo galler
       this.mediaSelectMaxWidth = '100vw';
       this.otherSelectMaxWidth = '100vw';
     }
+    if (this.filePickerSize === 'large') {
+      this.imageSelectWidth = '100%';
+      this.imageSelectHeight = '90vh';
+      this.fileSelectWidth = '100%';
+      this.fileSelectHeight = '90vh';
+      this.videoSelectWidth = '100%';
+      this.videoSelectHeight = '90vh';
+      this.audioSelectWidth = '100%';
+      this.audioSelectHeight = '90vh';
+      this.mediaSelectWidth = '100%';
+      this.mediaSelectHeight = '90vh';
+      this.otherSelectWidth = '100%';
+      this.otherSelectHeight = '90vh';
+      this.imageSelectMaxWidth = '92vw';
+      this.fileSelectMaxWidth = '92vw';
+      this.videoSelectMaxWidth = '92vw';
+      this.audioSelectMaxWidth = '92vw';
+      this.mediaSelectMaxWidth = '92vw';
+      this.otherSelectMaxWidth = '92vw';
+    }
 
     // if(this.opts.largerImageHandler!=='') {
     //     this.opts.mediaHandler = this.opts.largerImageHandler;
@@ -134610,63 +134694,97 @@ class Util {
     this.builder = builder;
   }
 
-  getPageTemplate(framework) {
+  getPageTemplate(framework, options) {
     let pageTemplate = '';
 
     if (framework === '') {
-      pageTemplate = `
-            <!DOCTYPE html>
-            <html lang="en">
-            <head>
-                <meta charset="utf-8">
-                <title>Page</title>
-                <meta name="viewport" content="width=device-width, initial-scale=1">
-                <meta name="description" content="">
-                <link rel="shortcut icon" href="#">
-                
-                <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"> 
-                <link href="[%PATH%]/box/box-flex.css" rel="stylesheet">
-    
-                [%MAINCSS%]
-                [%SECTIONCSS%]
-            </head>
-            <body style="touch-action: pan-y">
-                
-            <main id="main">
-                <div class="is-wrapper">
-                    [%CONTENT%]
-                </div>
-            </main>
-            
-            <link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
-            <link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
-            <script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
-    
-            <link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet">
-            <script src="[%PATH%]/assets/scripts/navbar/navbar.min.js"></script>
+      if (options.runtime) {
+        pageTemplate = `
+<!DOCTYPE HTML>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="A drag & drop HTML editor Javascript library for web applications.">  
+    <link rel="shortcut icon" href="#"> 
+    [%MAINCSS%]
+    [%SECTIONCSS%]
+    <link href="[%PATH%]/runtime/contentbox-runtime.css" rel="stylesheet">
+</head>
+<body style="touch-action: pan-y">
+
+<div class="is-wrapper">
+    [%CONTENT%]
+</div>
+
+<script src="[%PATH%]/runtime/contentbox-runtime.min.js"></script>
+<script>
+    const libraryInstance = new ContentBoxRuntime();
+    libraryInstance.init();
+</script>
+
+<!-- Optional: smooth scrolling -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
+
+</body>
+</html>
+`;
+      } else {
+        pageTemplate = `
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <title>Page</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="">
+    <link rel="shortcut icon" href="#">
     
-            <script src="[%PATH%]/box/box-flex.js"></script>
+    <link href="[%PATH%]/assets/minimalist-blocks/content.css" rel="stylesheet"> 
+    <link href="[%PATH%]/box/box-flex.css" rel="stylesheet">
+
+    [%MAINCSS%]
+    [%SECTIONCSS%]
+</head>
+<body style="touch-action: pan-y">
     
-            <!-- Optional: if you want to add smooth scrolling -->
-            <script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
-            <script>
-            SmoothScroll({
-                frameRate: 150,
-                animationTime: 800,
-                stepSize: 120,
-                pulseAlgorithm: 1,
-                pulseScale: 4,
-                pulseNormalize: 1,
-                accelerationDelta: 300,
-                accelerationMax: 2,
-                keyboardSupport: 1,
-                arrowScroll: 50,
-                fixedBackground: 0
-            });
-            </script>
-            </body>
-            </html>
-            `;
+<main id="main">
+    <div class="is-wrapper">
+        [%CONTENT%]
+    </div>
+</main>
+
+<link href="[%PATH%]/assets/scripts/glide/css/glide.core.css" rel="stylesheet">
+<link href="[%PATH%]/assets/scripts/glide/css/glide.theme.css" rel="stylesheet">
+<script src="[%PATH%]/assets/scripts/glide/glide.js"></script>
+
+<link href="[%PATH%]/assets/scripts/navbar/navbar.css" rel="stylesheet">
+<script src="[%PATH%]/assets/scripts/navbar/navbar.min.js"></script>
+
+<script src="[%PATH%]/box/box-flex.js"></script>
+
+<!-- Optional: if you want to add smooth scrolling -->
+<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js"></script>
+<script>
+SmoothScroll({
+    frameRate: 150,
+    animationTime: 800,
+    stepSize: 120,
+    pulseAlgorithm: 1,
+    pulseScale: 4,
+    pulseNormalize: 1,
+    accelerationDelta: 300,
+    accelerationMax: 2,
+    keyboardSupport: 1,
+    arrowScroll: 50,
+    fixedBackground: 0
+});
+</script>
+</body>
+</html>
+`;
+      }
     } else if (framework === 'tailwind') {
       pageTemplate = `
             <!DOCTYPE html>
@@ -157659,64 +157777,13 @@ class ContentBox {
       maxColumns: 6,
       useLightbox: true,
       lightboxArrow: true,
-      themes: [['#ffffff', '', ''], ['#282828', 'dark', 'contentbuilder/themes/dark.css']
-      /*['#0088dc','colored','contentbuilder/themes/colored-blue.css'],
-      ['#006add','colored','contentbuilder/themes/colored-blue6.css'],
-      ['#0a4d92','colored','contentbuilder/themes/colored-darkblue.css'],
-      ['#96af16','colored','contentbuilder/themes/colored-green.css'],
-      ['#f3522b','colored','contentbuilder/themes/colored-orange.css'],
-               ['#b92ea6','colored','contentbuilder/themes/colored-magenta.css'],
-      ['#e73171','colored','contentbuilder/themes/colored-pink.css'],
-      ['#782ec5','colored','contentbuilder/themes/colored-purple.css'],
-      ['#ed2828','colored','contentbuilder/themes/colored-red.css'],
-      ['#f9930f','colored','contentbuilder/themes/colored-yellow.css'],
-      ['#13b34b','colored','contentbuilder/themes/colored-green4.css'],
-      ['#333333','colored-dark','contentbuilder/themes/colored-dark.css'], 
-      
-      ['#dbe5f5','light','contentbuilder/themes/light-blue.css'],
-      ['#fbe6f2','light','contentbuilder/themes/light-pink.css'],
-      ['#dcdaf3','light','contentbuilder/themes/light-purple.css'],
-      ['#ffe9e0','light','contentbuilder/themes/light-red.css'],
-      ['#fffae5','light','contentbuilder/themes/light-yellow.css'],
-      ['#ddf3dc','light','contentbuilder/themes/light-green.css'],
-      ['#c7ebfd','light','contentbuilder/themes/light-blue2.css'],
-      
-      ['#ffd5f2','light','contentbuilder/themes/light-pink2.css'],
-      ['#eadafb','light','contentbuilder/themes/light-purple2.css'],
-      ['#c5d4ff','light','contentbuilder/themes/light-blue3.css'],
-      ['#ffefb1','light','contentbuilder/themes/light-yellow2.css'],
-      ['#fefefe','light','contentbuilder/themes/light-gray3.css'],
-      ['#e5e5e5','light','contentbuilder/themes/light-gray2.css'],
-      ['#dadada','light','contentbuilder/themes/light-gray.css'],
-               ['#3f4ec9','colored','contentbuilder/themes/colored-blue2.css'],
-      ['#6779d9','colored','contentbuilder/themes/colored-blue4.css'],
-      ['#10b9d7','colored','contentbuilder/themes/colored-blue3.css'], 
-      ['#006add','colored','contentbuilder/themes/colored-blue5.css'],
-      ['#e92f94','colored','contentbuilder/themes/colored-pink3.css'],
-      ['#a761d9','colored','contentbuilder/themes/colored-purple2.css'],
-      ['#f9930f','colored','contentbuilder/themes/colored-yellow2.css'],
-               ['#f3522b','colored','contentbuilder/themes/colored-red3.css'],
-      ['#36b741','colored','contentbuilder/themes/colored-green2.css'],
-      ['#00c17c','colored','contentbuilder/themes/colored-green3.css'],
-      ['#fb3279','colored','contentbuilder/themes/colored-pink2.css'],
-      ['#ff6d13','colored','contentbuilder/themes/colored-orange2.css'], 
-      ['#f13535','colored','contentbuilder/themes/colored-red2.css'],
-      ['#646464','colored','contentbuilder/themes/colored-gray.css'],
-               ['#3f4ec9','dark','contentbuilder/themes/dark-blue.css'],
-      ['#0b4d92','dark','contentbuilder/themes/dark-blue2.css'],
-      ['#006add','dark','contentbuilder/themes/dark-blue3.css'],
-      ['#5f3ebf','dark','contentbuilder/themes/dark-purple.css'],
-      ['#e92f69','dark','contentbuilder/themes/dark-pink.css'],
-      ['#4c4c4c','dark','contentbuilder/themes/dark-gray.css'],
-      ['#ed2828','dark','contentbuilder/themes/dark-red.css'],
-               ['#006add','colored','contentbuilder/themes/colored-blue8.css'],
-      ['#ff7723','colored','contentbuilder/themes/colored-orange3.css'],
-      ['#ff5722','colored','contentbuilder/themes/colored-red5.css'],
-      ['#f13535','colored','contentbuilder/themes/colored-red4.css'],
-      ['#00bd79','colored','contentbuilder/themes/colored-green5.css'],
-      ['#557ae9','colored','contentbuilder/themes/colored-blue7.css'],
-      ['#fb3279','colored','contentbuilder/themes/colored-pink4.css'],*/
+
+      /*
+      themes: [ 
+          ['#ffffff','',''],
+          ['#282828','dark','contentbuilder/themes/dark.css'], 
       ],
+      */
       backgroundColor: '#f1f1f1',
       imageselect: '',
       fileselect: '',
@@ -157751,6 +157818,27 @@ class ContentBox {
       audioSelectMaxWidth: '1600px',
       mediaSelectMaxWidth: '1600px',
       otherSelectMaxWidth: '1600px',
+
+      /*
+      imageSelectWidth: '100%',
+      imageSelectHeight: '90vh',
+      fileSelectWidth: '100%',
+      fileSelectHeight: '90vh',
+      videoSelectWidth: '100%',
+      videoSelectHeight: '90vh',
+      audioSelectWidth: '100%',
+      audioSelectHeight: '90vh',
+      mediaSelectWidth: '100%',
+      mediaSelectHeight: '90vh',
+      otherSelectWidth: '100%',
+      otherSelectHeight: '90vh',
+       imageSelectMaxWidth: '90vw',
+      fileSelectMaxWidth: '90vw',
+      videoSelectMaxWidth: '90vw',
+      audioSelectMaxWidth: '90vw',
+      mediaSelectMaxWidth: '90vw',
+      otherSelectMaxWidth: '90vw',
+      */
       assetPanelFullScreen: false,
       codeEditorWidth: '80vw',
       codeEditorHeight: '80vh',
@@ -160882,6 +160970,67 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       this.settings.videoselect = this.settings.videoSelect;
     } else if (this.settings.videoselect !== '') {
       this.settings.videoSelect = this.settings.videoselect;
+    }
+
+    if (this.settings.filePicker) {
+      this.settings.imageSelect = this.settings.filePicker;
+      this.settings.videoSelect = this.settings.filePicker;
+      this.settings.audioSelect = this.settings.filePicker;
+      this.settings.fileSelect = this.settings.filePicker;
+      this.settings.mediaSelect = this.settings.filePicker; // this.settings.otherSelect = this.settings.filePicker; // this enables additional selector button on link dialog
+      // backward compatible
+
+      this.settings.imageselect = this.settings.filePicker;
+      this.settings.fileselect = this.settings.filePicker;
+      this.settings.videoselect = this.settings.filePicker;
+    }
+
+    const assetBasePath = this.settings.assetBasePath; // if set, must end with /
+
+    if (assetBasePath !== undefined) {
+      this.settings.iframeSrc = settings.iframeSrc || `${assetBasePath}blank.html`; // Base path for general assets
+
+      this.settings.assetPath = settings.assetPath || `${assetBasePath}assets/`; // Font assets path
+
+      this.settings.fontAssetPath = settings.fontAssetPath || `${assetBasePath}assets/fonts/`; // Snippet file and related paths
+
+      this.settings.snippetUrl = settings.snippetUrl || `${assetBasePath}assets/minimalist-blocks/content.js`; // Full URL to snippet file
+
+      this.settings.snippetPath = settings.snippetPath || `${assetBasePath}assets/minimalist-blocks/`; // Base path for images and resources
+
+      this.settings.snippetPathReplace = settings.snippetPathReplace || ['assets/minimalist-blocks/', `${assetBasePath}assets/minimalist-blocks/`]; // Replace local image paths with remote URLs
+      // Module and plugin paths
+
+      this.settings.modulePath = settings.modulePath || `${assetBasePath}assets/modules/`; // module files. Use local path to avoid CORS issues (e.g., public/assets/modules/)
+
+      this.settings.pluginPath = settings.pluginPath || `${assetBasePath}contentbuilder/`; // plugin files
+      // Typography styles path
+
+      this.settings.contentStylePath = settings.contentStylePath || `${assetBasePath}assets/styles/`; // Templates path
+
+      this.settings.templates = settings.templates || [{
+        url: `${assetBasePath}assets/templates-simple/templates.js`,
+        path: `${assetBasePath}assets/templates-simple/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: `${assetBasePath}assets/templates-quick/templates.js`,
+        path: `${assetBasePath}assets/templates-quick/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }, {
+        url: `${assetBasePath}assets/templates-animated/templates.js`,
+        path: `${assetBasePath}assets/templates-animated/`,
+        pathReplace: [],
+        numbering: true,
+        showNumberOnHover: true
+      }]; // Path adjustments for Form Builder
+
+      this.settings.assetsFolder = settings.assetsFolder || `${assetBasePath}assets/formfiles/`, this.settings.templatesUrl = settings.templatesUrl || `${assetBasePath}assets/templates.json`, this.settings.exampleImageUrl = settings.exampleImageUrl || `${assetBasePath}assets/formfiles/ai-V8Khk.jpg`;
+      this.settings.exampleVideoUrl = settings.exampleVideoUrl || `${assetBasePath}assets/formfiles/ai-thhyR.mp4`;
+      this.settings.exampleAudioUrl = settings.exampleAudioUrl || `${assetBasePath}assets/formfiles/ai-3EVMb.wav`;
     } // if(this.settings.largerImageHandler!=='') {
     //     this.settings.mediaHandler = this.settings.largerImageHandler;
     // } else if(this.settings.mediaHandler!='') {
@@ -160926,10 +161075,6 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
 
     if (this.controlPanel) {
       this.controlpanel = new ControlPanel(this);
-    }
-
-    if (!this.pageTemplate) {
-      this.pageTemplate = this.util.getPageTemplate(this.framework);
     } // IFRAME
 
 
@@ -161545,6 +161690,7 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
       onThemeChange: () => {
         this.refreshUIStyle();
       },
+      filePicker: this.settings.filePicker,
       fileSelect: this.settings.fileSelect,
       imageSelect: this.settings.imageSelect,
       videoSelect: this.settings.videoSelect,
@@ -165069,7 +165215,14 @@ Add an image for each feature.`, 'Create a new block showcasing a photo gallery
   }
 
   export(options = {}, shortenOutput = false) {
-    let pageTemplate = this.pageTemplate;
+    let pageTemplate;
+
+    if (this.pageTemplate) {
+      pageTemplate = this.pageTemplate;
+    } else {
+      pageTemplate = this.util.getPageTemplate(this.framework, options);
+    }
+
     let output = ''; // [%CONTENT%]
 
     this.cleanupUnused();