@creaditor/web-starterkit 1.0.39 → 1.0.40

package/dist/7209.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[2590,7209],{93967(e,t,s){s.d(t,{T:()=>r});const r=s(59929).AH`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[2590,7209],{93967(e,t,s){s.d(t,{T:()=>i});const i=s(59929).AH`
   :host {
     direction: var(--direction-locale, ltr);
   }
@@ -27,7 +27,7 @@
   }
   .moved {
     position: absolute;
-    left: 0;
+    inset-inline-start: 0;
     top: 0;
     width: 100%;
     background: #fff;
@@ -88,6 +88,8 @@
     background: var(--color-bg-subtle, var(--alpha));
     height: 100vh;
     max-width: 210px;
+    box-sizing: border-box;
+    padding-inline: var(--space-4, 16px);
   }
   .search {
     --cdtr-input-height: 36px;
@@ -110,7 +112,7 @@
     width: 100%;
     top: 100%;
     transform: translateY(-100%);
-    left: 0;
+    inset-inline-start: 0;
   }
   .scroll-body::-webkit-scrollbar {
     width: var(--scrollbar-width, 6px);
@@ -146,7 +148,7 @@
   .gallery-container {
     padding: var(--space-8, 32px) var(--space-5, 20px);
   }
-`},27209(e,t,s){s.r(t),s.d(t,{CreaditorGalleryWrapper:()=>g});var r=s(59929),i=s(5441),o=s(86319),a=s(49549),l=s(91597),n=s(21421),d=s(93967);function c(e){try{localStorage.setItem("creaditor-gallery-folder",e)}catch(e){console.warn("Could not write to localStorage:",e)}}class p extends r.WF{constructor(){super(),this.newFolderModalRef=(0,n._)(),this.newFolderInputRef=(0,n._)(),this.drop=this.drop.bind(this),this.controls=!0,this.folderName=o.M.get("lang","myImages")||"My Images",this.sendFiles=this.sendFiles.bind(this),this.onSearch=this.onSearch.bind(this),this.coverEl=document.createElement("div"),this.sortItems=[{index:0,text:"fromNewToOld",value:{filter:"date",sortBy:"ASC"},checked:!0},{index:1,text:"fromOldToNew",value:{filter:"date",sortBy:"DESC"},checked:!1},{index:2,text:o.M.get("lang","aToZ"),value:{filter:"name",sortBy:"ASC"},checked:!1},{index:3,text:o.M.get("lang","zToA"),value:{filter:"name",sortBy:"DESC"},checked:!1}],this.filterItems=[{index:0,text:o.M.get("lang","folders"),value:"folders",checked:!0},{index:1,text:o.M.get("lang","images"),value:"images",checked:!0}]}openNewFolderModal(e){const t=this.newFolderModalRef.value;t&&(t.positionTarget=e.target,t.open(),this.newFolderInputRef.value.focus())}sendFiles(){const e={detail:this.files.filter(e=>e.selected),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onLiked(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("like",t))}onClickFolder(e,t){this.freeImages=!1,this.controls=t;const s={detail:e,bubbles:!1,composed:!1};this.folderName=e.name,this.dispatchEvent(new CustomEvent("folder",s))}onSelectFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onSelectPexelsImage(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onUpload(){const e=(0,i.A)("input",{hidden:!0,type:"file",accept:"image/*"});e.onchange=e=>{const t=e.target;if(t.files&&t.files[0]){const e=new FileReader,s=t.files[0];e.onload=e=>{const t={detail:s,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("upload",t))},e.readAsDataURL(s)}},e.click()}onCreateNewFolder(){const e=this.newFolderInputRef.value.value;if(e.length<=30){const t={detail:e,bubbles:!1,composed:!1};this.newFolderModalRef.value.close(),this.dispatchEvent(new CustomEvent("newFolder",t)),this.newFolderInputRef.value.value=""}}onClickCategory(){}onReset(){c(null),this.freeImages=!1,this._favorites=!1,this.folderName=o.M.get("lang","myImages"),this.filterItems=this.filterItems.map(e=>"folders"===e.value?{...e,checked:!0}:e),this.dispatchEvent(new CustomEvent("reset",{}))}onFavorites(){c(null),this.freeImages=!1,this._favorites=!0,this.folderName="",this.filterItems=this.filterItems.map(e=>"folders"===e.value?{...e,checked:!1}:e),this.dispatchEvent(new CustomEvent("search",{detail:{value:"",isLiked:!0},bubbles:!1,composed:!1}))}onSearch(e,t){c(null),this.freeImages=!1;let s=!1;"object"==typeof t&&t.isLiked&&(s=!0);const r=e.target?.value||"";(0,l.A)(()=>{const e={detail:{value:r,isLiked:s},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("search",e))})}drop(e,t){e.preventDefault();const s=e.dataTransfer.getData("fileId"),r=(e.dataTransfer.getData("folderId"),{detail:{fileId:s,folderId:t},bubbles:!1,composed:!1});this.dispatchEvent(new CustomEvent("moveFile",r))}onFilterMedia(e){const t=e.detail.value,s=t.index,r=[...this.filterItems];r[s].checked=!r[s].checked,this.filterItems=r}onSort(e){const t=e.detail.value,s={detail:t,bubbles:!1,composed:!1},r=t.index,i=[...this.sortItems];i.forEach((e,t)=>{e.checked=r===t}),this.sortItems=i,this.dispatchEvent(new CustomEvent("filter",s))}onDeleteFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFile",t))}onDeleteFolder(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFolder",t))}dragStart(e,t){e.dataTransfer.setData("fileId",t)}dragOver(e,t){e.dataTransfer.setData("folderId",t),e.preventDefault()}onFreeImages(){this.freeImages=!0,c("freeImages"),s.e(767).then(s.bind(s,70767))}onScroll(e){const t=e.target;if(t.scrollTop+t.offsetHeight>=t.scrollHeight-50){const e={detail:{folderId:this.folderId,page:this.page},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("loadMore",e))}}connectedCallback(){super.connectedCallback(),s.e(5156).then(s.bind(s,85156));"freeImages"===function(){try{return localStorage.getItem("creaditor-gallery-folder")}catch(e){return console.warn("Could not read from localStorage:",e),null}}()&&(this.freeImages=!0,s.e(767).then(s.bind(s,70767)))}render(){Array.isArray(this.files)||(this.files=[]),Array.isArray(this.folders)||(this.folders=[]);const e=this.folders.filter(e=>"public"!==e.visibility),t=this.folders.filter(e=>"public"===e.visibility);return r.qy` <cdtr-row>
+`},27209(e,t,s){s.r(t),s.d(t,{CreaditorGalleryWrapper:()=>b,DEFAULT_LABELS:()=>g});var i=s(59929),r=s(5441),o=s(86319),a=s(49549),l=s(91597),n=s(21421),d=s(93967);function c(e){try{localStorage.setItem("creaditor-gallery-folder",e)}catch(e){console.warn("Could not write to localStorage:",e)}}class p extends i.WF{constructor(){super(),this.newFolderModalRef=(0,n._)(),this.newFolderInputRef=(0,n._)(),this.drop=this.drop.bind(this),this.controls=!0,this.folderName=o.M.get("lang","myImages")||"My Images",this.sendFiles=this.sendFiles.bind(this),this.onSearch=this.onSearch.bind(this),this.coverEl=document.createElement("div"),this.sortItems=[{index:0,text:"fromNewToOld",value:{filter:"date",sortBy:"ASC"},checked:!0},{index:1,text:"fromOldToNew",value:{filter:"date",sortBy:"DESC"},checked:!1},{index:2,text:o.M.get("lang","aToZ"),value:{filter:"name",sortBy:"ASC"},checked:!1},{index:3,text:o.M.get("lang","zToA"),value:{filter:"name",sortBy:"DESC"},checked:!1}],this.filterItems=[{index:0,text:o.M.get("lang","folders"),value:"folders",checked:!0},{index:1,text:o.M.get("lang","images"),value:"images",checked:!0}]}openNewFolderModal(e){const t=this.newFolderModalRef.value;t&&(t.positionTarget=e.target,t.open(),this.newFolderInputRef.value.focus())}sendFiles(){const e={detail:this.files.filter(e=>e.selected),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onLiked(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("like",t))}onClickFolder(e,t){this.freeImages=!1,this.controls=t;const s={detail:e,bubbles:!1,composed:!1};this.folderName=e.name,this.dispatchEvent(new CustomEvent("folder",s))}onSelectFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onSelectPexelsImage(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}onUpload(){const e=(0,r.A)("input",{hidden:!0,type:"file",accept:"image/*"});e.onchange=e=>{const t=e.target;if(t.files&&t.files[0]){const e=new FileReader,s=t.files[0];e.onload=e=>{const t={detail:s,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("upload",t))},e.readAsDataURL(s)}},e.click()}onCreateNewFolder(){const e=this.newFolderInputRef.value.value;if(e.length<=30){const t={detail:e,bubbles:!1,composed:!1};this.newFolderModalRef.value.close(),this.dispatchEvent(new CustomEvent("newFolder",t)),this.newFolderInputRef.value.value=""}}onClickCategory(){}onReset(){c(null),this.freeImages=!1,this._favorites=!1,this.folderName=o.M.get("lang","myImages"),this.filterItems=this.filterItems.map(e=>"folders"===e.value?{...e,checked:!0}:e),this.dispatchEvent(new CustomEvent("reset",{}))}onFavorites(){c(null),this.freeImages=!1,this._favorites=!0,this.folderName="",this.filterItems=this.filterItems.map(e=>"folders"===e.value?{...e,checked:!1}:e),this.dispatchEvent(new CustomEvent("search",{detail:{value:"",isLiked:!0},bubbles:!1,composed:!1}))}onSearch(e,t){c(null),this.freeImages=!1;let s=!1;"object"==typeof t&&t.isLiked&&(s=!0);const i=e.target?.value||"";(0,l.A)(()=>{const e={detail:{value:i,isLiked:s},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("search",e))})}drop(e,t){e.preventDefault();const s=e.dataTransfer.getData("fileId"),i=(e.dataTransfer.getData("folderId"),{detail:{fileId:s,folderId:t},bubbles:!1,composed:!1});this.dispatchEvent(new CustomEvent("moveFile",i))}onFilterMedia(e){const t=e.detail.value,s=t.index,i=[...this.filterItems];i[s].checked=!i[s].checked,this.filterItems=i}onSort(e){const t=e.detail.value,s={detail:t,bubbles:!1,composed:!1},i=t.index,r=[...this.sortItems];r.forEach((e,t)=>{e.checked=i===t}),this.sortItems=r,this.dispatchEvent(new CustomEvent("filter",s))}onDeleteFile(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFile",t))}onDeleteFolder(e){const t={detail:e,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("deleteFolder",t))}dragStart(e,t){e.dataTransfer.setData("fileId",t)}dragOver(e,t){e.dataTransfer.setData("folderId",t),e.preventDefault()}onFreeImages(){this.freeImages=!0,c("freeImages"),s.e(767).then(s.bind(s,70767))}onScroll(e){const t=e.target;if(t.scrollTop+t.offsetHeight>=t.scrollHeight-50){const e={detail:{folderId:this.folderId,page:this.page},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("loadMore",e))}}connectedCallback(){super.connectedCallback(),s.e(5156).then(s.bind(s,85156));"freeImages"===function(){try{return localStorage.getItem("creaditor-gallery-folder")}catch(e){return console.warn("Could not read from localStorage:",e),null}}()&&(this.freeImages=!0,s.e(767).then(s.bind(s,70767)))}render(){Array.isArray(this.files)||(this.files=[]),Array.isArray(this.folders)||(this.folders=[]);const e=this.folders.filter(e=>"public"!==e.visibility),t=this.folders.filter(e=>"public"===e.visibility);return i.qy` <cdtr-row>
       <cdtr-col class="list" sm="3">
         <cdtr-row alignItems="center" class="upload-container">
           <paper-button @click=${this.onUpload} class="upload">
@@ -162,17 +164,17 @@
             ><lang-text text="favorites"></lang-text
           ></paper-item>
           <paper-item @click=${this.onFreeImages}> <lang-text text="freeImages"></lang-text> </paper-item>
-          ${Array.isArray(t)?t.map(e=>r.qy`<paper-item
+          ${Array.isArray(t)?t.map(e=>i.qy`<paper-item
                     @click=${()=>this.onClickFolder(e,!1)}
                     ><lang-text text="${e.name}"></lang-text
                   ></paper-item>`):null}
         </paper-listbox>
       </cdtr-col>
-      ${this.freeImages?r.qy`<cdtr-col>
+      ${this.freeImages?i.qy`<cdtr-col>
             <cdtr-pexels-gallery
               @file=${e=>this.onSelectPexelsImage(e.detail)}
             ></cdtr-pexels-gallery>
-          </cdtr-col>`:r.qy`<cdtr-col>
+          </cdtr-col>`:i.qy`<cdtr-col>
             <div class="gallery-container">
               <cdtr-row alignItems="center">
                 <cdtr-input
@@ -193,7 +195,7 @@
                 ></paper-button>
               </cdtr-row>
               <cdtr-row mt="1">
-                ${this.folderName?r.qy`
+                ${this.folderName?i.qy`
                       <cdtr-title style="font-size:14px"
                         ><lang-text text="main"></lang-text
                       ></cdtr-title>
@@ -207,7 +209,7 @@
                     `:null}
               </cdtr-row>
               <cdtr-row mt="2" justify="space-between">
-                ${this.filterItems[0].checked?r.qy` <cdtr-col sm="2">
+                ${this.filterItems[0].checked?i.qy` <cdtr-col sm="2">
                       <cdtr-row
                         spacing="2px"
                         class="scroll-body"
@@ -221,7 +223,7 @@
                             name=${o.M.get("lang","myImages")}
                           ></cdtr-editor-media-card>
                         </cdtr-col>
-                        ${(0,a.u)(e||[],e=>e.id,(e,t)=>r.qy`<cdtr-col sm="12">
+                        ${(0,a.u)(e||[],e=>e.id,(e,t)=>i.qy`<cdtr-col sm="12">
                               <cdtr-editor-media-card
                                 @deleteFolder=${()=>this.onDeleteFolder(e)}
                                 @deleteFile=${()=>this.onDeleteFile(e)}
@@ -237,19 +239,19 @@
                             </cdtr-col>`)}
                       </cdtr-row>
                     </cdtr-col>`:null}
-                ${this.filterItems[1].checked?r.qy` <cdtr-col sm="10">
+                ${this.filterItems[1].checked?i.qy` <cdtr-col sm="10">
                       <cdtr-row
                         @scroll=${this.onScroll}
                         class="scroll-body"
                         justify="space-evenly"
                       >
-                        ${this.files&&0!==this.files.length||this.filterItems[0].checked?null:r.qy`<cdtr-empty-state
+                        ${this.files&&0!==this.files.length||this.filterItems[0].checked?null:i.qy`<cdtr-empty-state
                               icon="image"
                               heading="noImagesYet"
                               description="uploadOrPickImages"
                             ></cdtr-empty-state>`}
-                        ${(0,a.u)(this.files||[],e=>e.id,(e,t)=>r.qy`<cdtr-col class="file-col" sm="3">
-                              ${e.moved?r.qy` <div class="moved"></div> `:null}
+                        ${(0,a.u)(this.files||[],e=>e.id,(e,t)=>i.qy`<cdtr-col class="file-col" sm="3">
+                              ${e.moved?i.qy` <div class="moved"></div> `:null}
                               <cdtr-editor-media-card
                                 @deleteFile=${()=>this.onDeleteFile(e)}
                                 @deleteFolder=${()=>this.onDeleteFolder(e)}
@@ -306,7 +308,7 @@
           </cdtr-row>
         </form>
       </paper-dialog>
-    </cdtr-row>`}}p.styles=d.T,p.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},folderName:{type:String},filterItems:{type:Array},multi:{type:Boolean},controls:{type:Boolean},freeImages:{type:Boolean}},customElements.define("cdtr-gallery-files",p);class h extends r.WF{constructor(){super(),this.uploads={}}connectedCallback(){super.connectedCallback(),this.addEventListener("upload-start",this.handleUploadStart.bind(this)),this.addEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.addEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.addEventListener("upload-error",this.handleUploadError.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("upload-start",this.handleUploadStart.bind(this)),this.removeEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.removeEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.removeEventListener("upload-error",this.handleUploadError.bind(this))}handleUploadStart(e){const{uploadId:t,fileName:s}=e.detail;this.uploads[t]={fileName:s,status:"uploading",progress:0,error:null},this.requestUpdate()}handleUploadProgress(e){const{uploadId:t,progress:s}=e.detail;this.uploads[t]&&(this.uploads[t].progress=s,this.requestUpdate())}handleUploadComplete(e){const{uploadId:t}=e.detail;this.uploads[t]&&(this.uploads[t].status="completed",this.uploads[t].progress=100,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},3e3))}handleUploadError(e){const{uploadId:t,error:s}=e.detail;this.uploads[t]&&(this.uploads[t].status="error",this.uploads[t].error=s,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},5e3))}removeUpload(e){delete this.uploads[e],this.requestUpdate()}getStatusIcon(e){switch(e){case"uploading":default:return r.qy`<div class="status-icon uploading"></div>`;case"completed":return r.qy`<div class="status-icon completed"></div>`;case"error":return r.qy`<div class="status-icon error"></div>`}}getProgressFillClass(e){switch(e){case"completed":return"progress-fill completed";case"error":return"progress-fill error";default:return"progress-fill"}}render(){const e=Object.entries(this.uploads).map(e=>{let[t,s]=e;return r.qy`
+    </cdtr-row>`}}p.styles=d.T,p.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},folderName:{type:String},filterItems:{type:Array},multi:{type:Boolean},controls:{type:Boolean},freeImages:{type:Boolean}},customElements.define("cdtr-gallery-files",p);class h extends i.WF{constructor(){super(),this.uploads={}}connectedCallback(){super.connectedCallback(),this.addEventListener("upload-start",this.handleUploadStart.bind(this)),this.addEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.addEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.addEventListener("upload-error",this.handleUploadError.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("upload-start",this.handleUploadStart.bind(this)),this.removeEventListener("upload-progress",this.handleUploadProgress.bind(this)),this.removeEventListener("upload-complete",this.handleUploadComplete.bind(this)),this.removeEventListener("upload-error",this.handleUploadError.bind(this))}handleUploadStart(e){const{uploadId:t,fileName:s}=e.detail;this.uploads[t]={fileName:s,status:"uploading",progress:0,error:null},this.requestUpdate()}handleUploadProgress(e){const{uploadId:t,progress:s}=e.detail;this.uploads[t]&&(this.uploads[t].progress=s,this.requestUpdate())}handleUploadComplete(e){const{uploadId:t}=e.detail;this.uploads[t]&&(this.uploads[t].status="completed",this.uploads[t].progress=100,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},3e3))}handleUploadError(e){const{uploadId:t,error:s}=e.detail;this.uploads[t]&&(this.uploads[t].status="error",this.uploads[t].error=s,this.requestUpdate(),setTimeout(()=>{this.removeUpload(t)},5e3))}removeUpload(e){delete this.uploads[e],this.requestUpdate()}getStatusIcon(e){switch(e){case"uploading":default:return i.qy`<div class="status-icon uploading"></div>`;case"completed":return i.qy`<div class="status-icon completed"></div>`;case"error":return i.qy`<div class="status-icon error"></div>`}}getProgressFillClass(e){switch(e){case"completed":return"progress-fill completed";case"error":return"progress-fill error";default:return"progress-fill"}}render(){const e=Object.entries(this.uploads).map(e=>{let[t,s]=e;return i.qy`
         <div class="upload-item">
           <div class="upload-header">
             <span class="file-name" title="${s.fileName}">${s.fileName}</span>
@@ -331,22 +333,22 @@
             ${"uploading"===s.status?`${s.progress}%`:"completed"===s.status?"Upload completed":"error"===s.status?"Upload failed":""}
           </div>
           
-          ${s.error?r.qy`
+          ${s.error?i.qy`
             <div class="error-message">
               ${s.error.message||s.error}
             </div>
           `:""}
         </div>
-      `});return r.qy`
+      `});return i.qy`
       <div>
         ${e}
       </div>
-    `}}h.styles=r.AH`
+    `}}h.styles=i.AH`
     :host {
       display: block;
       position: fixed;
       top: 20px;
-      right: 20px;
+      inset-inline-end: 20px;
       z-index: 9999;
       max-width: 300px;
     }
@@ -447,7 +449,7 @@
     .progress-text {
       font-size: 12px;
       color: #666;
-      text-align: right;
+      text-align: end;
     }
     
     .error-message {
@@ -473,7 +475,7 @@
     .close-btn:hover {
       color: #666;
     }
-  `,h.properties={uploads:{type:Object}},customElements.define("cdtr-upload-loading",h);s(2590);class u extends r.WF{constructor(){super(),this.isVisible=!1,this.fileName="",this.status="uploading",this.progress=0,this.timeElapsed=0,this.pollInterval=null,this.timeoutId=null,this.progressInterval=null,this.startTime=null,this.maxDuration=3e4,this.pollFrequency=7e3}connectedCallback(){super.connectedCallback(),window.addEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.cleanup(),window.removeEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}handleUploadStart(e){console.log("Upload monitor received event:",e.detail);const{fileName:t,file:s}=e.detail;this.startUploadMonitor(t,s)}startUploadMonitor(e,t){console.log("Starting upload monitor for:",e),this.fileName=e,this.isVisible=!0,this.status="uploading",this.progress=0,this.timeElapsed=0,this.startTime=Date.now(),this.uploadedFile=t,console.log("Component should be visible now, isVisible:",this.isVisible),this.requestUpdate(),this.simulateUploadProgress(),setTimeout(()=>{this.status="checking",this.startPolling(),this.startTimeout()},this.pollFrequency)}simulateUploadProgress(){let e=0;this.progressInterval=setInterval(()=>{e+=15*Math.random(),e>=90&&(e=90,clearInterval(this.progressInterval),this.progressInterval=null),this.progress=Math.floor(e),this.requestUpdate()},300)}startPolling(){this.progress=100,this.status="completed",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},5e3)}startTimeout(){this.timeoutId=setTimeout(()=>{"completed"!==this.status&&this.handleTimeout()},this.maxDuration)}handleUploadSuccess(){this.cleanup(),this.status="completed",this.progress=100,this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},2e3)}handleTimeout(){this.cleanup(),this.status="timeout",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},1e4)}cleanup(){this.pollInterval&&(clearInterval(this.pollInterval),this.pollInterval=null),this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.progressInterval&&(clearInterval(this.progressInterval),this.progressInterval=null)}getCircleProgress(){const e=2*Math.PI*26;return e-this.progress/100*e}renderContent(){switch(this.status){case"uploading":return r.qy`
+  `,h.properties={uploads:{type:Object}},customElements.define("cdtr-upload-loading",h);s(2590);class u extends i.WF{constructor(){super(),this.isVisible=!1,this.fileName="",this.status="uploading",this.progress=0,this.timeElapsed=0,this.pollInterval=null,this.timeoutId=null,this.progressInterval=null,this.startTime=null,this.maxDuration=3e4,this.pollFrequency=7e3}connectedCallback(){super.connectedCallback(),window.addEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}disconnectedCallback(){super.disconnectedCallback(),this.cleanup(),window.removeEventListener("cdtr-upload-start",this.handleUploadStart.bind(this))}handleUploadStart(e){console.log("Upload monitor received event:",e.detail);const{fileName:t,file:s}=e.detail;this.startUploadMonitor(t,s)}startUploadMonitor(e,t){console.log("Starting upload monitor for:",e),this.fileName=e,this.isVisible=!0,this.status="uploading",this.progress=0,this.timeElapsed=0,this.startTime=Date.now(),this.uploadedFile=t,console.log("Component should be visible now, isVisible:",this.isVisible),this.requestUpdate(),this.simulateUploadProgress(),setTimeout(()=>{this.status="checking",this.startPolling(),this.startTimeout()},this.pollFrequency)}simulateUploadProgress(){let e=0;this.progressInterval=setInterval(()=>{e+=15*Math.random(),e>=90&&(e=90,clearInterval(this.progressInterval),this.progressInterval=null),this.progress=Math.floor(e),this.requestUpdate()},300)}startPolling(){this.progress=100,this.status="completed",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},5e3)}startTimeout(){this.timeoutId=setTimeout(()=>{"completed"!==this.status&&this.handleTimeout()},this.maxDuration)}handleUploadSuccess(){this.cleanup(),this.status="completed",this.progress=100,this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},2e3)}handleTimeout(){this.cleanup(),this.status="timeout",this.requestUpdate(),setTimeout(()=>{this.isVisible=!1,this.requestUpdate()},1e4)}cleanup(){this.pollInterval&&(clearInterval(this.pollInterval),this.pollInterval=null),this.timeoutId&&(clearTimeout(this.timeoutId),this.timeoutId=null),this.progressInterval&&(clearInterval(this.progressInterval),this.progressInterval=null)}getCircleProgress(){const e=2*Math.PI*26;return e-this.progress/100*e}renderContent(){switch(this.status){case"uploading":return i.qy`
           <div class="progress-circle">
             <svg class="progress-ring" width="60" height="60">
               <circle class="progress-ring-bg" cx="30" cy="30" r="26"></circle>
@@ -491,31 +493,31 @@
             <lang-text text="uploading"></lang-text>
           </div>
           <div class="file-name" title="${this.fileName}">${this.fileName}</div>
-        `;case"checking":return r.qy`
+        `;case"checking":return i.qy`
           <div class="spinner"></div>
           <div class="status-text">
             <lang-text text="verifying"></lang-text>
           </div>
           <div class="file-name" title="${this.fileName}">${this.fileName}</div>
-        `;case"completed":return r.qy`
+        `;case"completed":return i.qy`
           <div class="success-icon"></div>
           <div class="status-text">
             <lang-text text="completed"></lang-text>
           </div>
           <div class="file-name" title="${this.fileName}">${this.fileName}</div>
-        `;case"timeout":return r.qy`
+        `;case"timeout":return i.qy`
           <div class="error-icon"></div>
           <div class="status-text"><lang-text text="timeout"></lang-text></div>
           <div class="file-name" title="${this.fileName}">${this.fileName}</div>
           <div style="font-size: 10px; color: #666; margin-top: 4px;">
             File may be uploaded. Refresh gallery.
           </div>
-        `;default:return r.qy``}}render(){return console.log("Render called - isVisible:",this.isVisible,"status:",this.status,"progress:",this.progress),this.isVisible?r.qy` <div class="upload-card">${this.renderContent()}</div> `:r.qy``}}u.styles=r.AH`
+        `;default:return i.qy``}}render(){return console.log("Render called - isVisible:",this.isVisible,"status:",this.status,"progress:",this.progress),this.isVisible?i.qy` <div class="upload-card">${this.renderContent()}</div> `:i.qy``}}u.styles=i.AH`
     :host {
       display: block;
       position: fixed;
       bottom: 20px;
-      left: 20px;
+      inset-inline-start: 20px;
       z-index: 10000;
     }
 
@@ -575,7 +577,7 @@
     .progress-text {
       position: absolute;
       top: 50%;
-      left: 50%;
+      inset-inline-start: 50%;
       transform: translate(-50%, -50%);
       font-size: 14px;
       font-weight: 600;
@@ -665,7 +667,7 @@
       color: white;
       font-weight: bold;
     }
-  `,u.properties={isVisible:{type:Boolean},fileName:{type:String},status:{type:String},progress:{type:Number},timeElapsed:{type:Number}},customElements.define("cdtr-upload-progress-monitor",u);var f=s(18396),m=s(13681);class g extends r.WF{constructor(){super(),this.sortBy="ASC",this.files=[],this.folders=[],this.uploadStatus={},this.onSearch=this.onSearch.bind(this),this.close=this.close.bind(this),this.reset=this.reset.bind(this);const e=new f.A;this.eventEmitter=e;const t=o.M.get("config","editor","configure","mediaGalleryManager");e.files=this.files,e.close=this.close,"function"==typeof t&&(e.render=this.reset,console.log("init mediaGalleryManager"),t(e)),this.reset()}reset(){this.dirId=null,this.eventEmitter.dispatch("load-folders",{resolve:e=>{this.folders=e}}),this.eventEmitter.dispatch("load-files",{resolve:e=>{this.files=Array.isArray(e)?[...e]:[]}})}uploadFile(e){this.folders||(this.folders=[]);const t=e.detail,s=this.folders.find(e=>e.selected),r=`${t.name}-${Date.now()}`;this.uploadStatus[r]={fileName:t.name,status:"uploading",progress:0,error:null},console.log("Dispatching cdtr-upload-start event for:",t.name),this.dispatchEvent(new CustomEvent("cdtr-upload-start",{detail:{uploadId:r,fileName:t.name,file:t},bubbles:!0,composed:!0})),console.log("Event dispatched"),this.eventEmitter.dispatch("upload-file",{file:t,dirId:s?s.id:null,uploadId:r,execCommand:(e,t)=>{o.M.get("editor").store().execCommand(e,t)},options:{},onProgress:e=>{this.uploadStatus[r]&&(this.uploadStatus[r].progress=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("upload-progress",{detail:{uploadId:r,fileName:t.name,progress:e},bubbles:!0,composed:!0})))},onComplete:e=>{this.uploadStatus[r]&&(this.uploadStatus[r].status="completed",this.uploadStatus[r].progress=100,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-complete",{detail:{uploadId:r,fileName:t.name,result:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[r],this.requestUpdate("uploadStatus")},3e3))},onError:e=>{this.uploadStatus[r]&&(this.uploadStatus[r].status="error",this.uploadStatus[r].error=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-error",{detail:{uploadId:r,fileName:t.name,error:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[r],this.requestUpdate("uploadStatus")},5e3))}}),this.opened=!1}onSearch(e){const{value:t,isLiked:s}=e.detail;s?this.eventEmitter.dispatch("load-files",{isLiked:s,resolve:e=>{Array.isArray(e)?this.files=[...e]:console.error("files is not array",e)}}):t.trim().length>2?this.eventEmitter.dispatch("load-files",{filter:"name",search:t,resolve:e=>{this.files=Array.isArray(e)?[...e]:[]}}):0===t.trim().length&&this.reset()}onFilter(e){const t=e.detail;this.eventEmitter.dispatch("load-files",{filter:"name",search:t.value})}onSelectFolder(e){const t=e.detail,s=this.sortBy,r=t.id;this.dirId=r,this.eventEmitter.dispatch("load-files",{filter:"dir",dirId:r,sortBy:s,resolve:e=>{this.files=e}})}oncreateNewFolder(e){const t=e.detail;this.eventEmitter.dispatch("create-folder",{name:t,resolve:e=>{this.folders||(this.folders=[]);const t=[...this.folders];t.forEach(e=>e.selected=!1),e.selected=!0,t.unshift(e),this.folders=t,this.onSelectFolder({detail:e})}})}onMoveFile(e){const t=e.detail;this.eventEmitter.dispatch("on-move-file",{data:t,resolve:e=>{if(this.folders||(this.folders=[]),this.dirId===t.folderId)return;const s=this.files.findIndex(e=>e.id===t.fileId);if(-1!==s){const e=[...this.files];e[s].moved=!0,this.files=e}const r=this.folders.findIndex(e=>e.id===t.folderId);if(-1!==r){const e=[...this.folders];e[r].file_count+=1,this.folders=e}}})}onLike(e){const t=e.detail;this.eventEmitter.dispatch("on-like",{fileId:t.id,resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e[s].isLiked=!e[s].isLiked,this.files=e}}})}onselectFile(e){const t={detail:e.detail,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}close(){this.dispatchEvent(new CustomEvent("close",{}))}onDleteFile(e){const t=e.detail;this.eventEmitter.dispatch("delete-file",{id:t.id,type:"image",resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e.splice(s,1),this.files=e}}})}onLoadMore(){this.eventEmitter.dispatch("lazy-load-files-on-scroll",{resolve:e=>{if(Array.isArray(e)&&e.length>0){const t=[...this.files,...e];this.files=t}}})}onDeleteFolder(e){const t=e.detail;this.eventEmitter.dispatch("delete-folder",{id:t.id,resolve:e=>{this.folders||(this.folders=[]);const s=this.folders.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.folders];e.splice(s,1),this.folders=e}}})}connectedCallback(){super.connectedCallback(),m.vP.on("on:upload-file","gallery:on:upload-file",async e=>{let{image:t,type:s}=e;if("base64"===s){const e=t.split(",")[1]||t,s=atob(e),r=new Array(s.length);for(let e=0;e<s.length;e++)r[e]=s.charCodeAt(e);const i=new Uint8Array(r),o=new Blob([i],{type:"image/png"}),a=new File([o],"uploaded-image.png",{type:"image/png"});this.uploadFile({detail:a})}else if("url"===s){const e=await fetch(t),s=await e.blob(),r=new File([s],"uploaded-image.png",{type:s.type||"image/png"});this.uploadFile({detail:r})}})}render(){return r.qy` 
+  `,u.properties={isVisible:{type:Boolean},fileName:{type:String},status:{type:String},progress:{type:Number},timeElapsed:{type:Number}},customElements.define("cdtr-upload-progress-monitor",u);var m=s(18396),f=s(13681);const g={upload:"Upload Image",myImages:"My Images",favorites:"Favorites",freeImages:"Free images",search:"Search",newFolder:"New Folder",main:"Main",noImagesYet:"No images yet",uploadOrPickImages:"Upload an image or browse free stock.",choose:"Choose",addFolder:"Add folder",folderName:"Folder name","yes,Create":"Yes, Create",aToZ:"A-Z",zToA:"Z-A",folders:"Folders",images:"Images",savedSuccess:"Saved successfully",refresh:"Refresh",loading:"Loading…",loadingMore:"Loading more images...",uploading:"Uploading...",verifying:"Verifying...",completed:"Completed!",timeout:"Upload timeout"};let v=!1;class b extends i.WF{constructor(){super(),function(){if(v)return;v=!0;const e=o.M.get("lang")||{};Object.keys(g).some(t=>!(t in e))&&o.M.set({lang:{...g,...e}})}(),this.sortBy="ASC",this.files=[],this.folders=[],this.uploadStatus={},this.onSearch=this.onSearch.bind(this),this.close=this.close.bind(this),this.reset=this.reset.bind(this);const e=new m.A;this.eventEmitter=e,e.files=this.files,e.close=this.close;const t=this._manager||o.M.get("config","editor","configure","mediaGalleryManager");this._wireManager(t),this.reset()}get manager(){return this._manager}set manager(e){this._manager=e,this._wireManager(e),this.eventEmitter&&this.reset()}_wireManager(e){"function"==typeof e&&(this.eventEmitter.render=this.reset,console.log("init mediaGalleryManager"),e(this.eventEmitter))}get labels(){return this._labels}set labels(e){this._labels=e,e&&Object.keys(e).length>0&&o.M.set({lang:{...o.M.get("lang")||{},...e}})}reset(){this.dirId=null,this.eventEmitter.dispatch("load-folders",{resolve:e=>{this.folders=e}}),this.eventEmitter.dispatch("load-files",{resolve:e=>{this.files=Array.isArray(e)?[...e]:[]}})}uploadFile(e){this.folders||(this.folders=[]);const t=e.detail,s=this.folders.find(e=>e.selected),i=`${t.name}-${Date.now()}`;this.uploadStatus[i]={fileName:t.name,status:"uploading",progress:0,error:null},console.log("Dispatching cdtr-upload-start event for:",t.name),this.dispatchEvent(new CustomEvent("cdtr-upload-start",{detail:{uploadId:i,fileName:t.name,file:t},bubbles:!0,composed:!0})),console.log("Event dispatched"),this.eventEmitter.dispatch("upload-file",{file:t,dirId:s?s.id:null,uploadId:i,execCommand:(e,t)=>{const s=o.M.get("editor");s&&"function"==typeof s.store&&s.store().execCommand(e,t)},options:{},onProgress:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].progress=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("upload-progress",{detail:{uploadId:i,fileName:t.name,progress:e},bubbles:!0,composed:!0})))},onComplete:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].status="completed",this.uploadStatus[i].progress=100,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-complete",{detail:{uploadId:i,fileName:t.name,result:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[i],this.requestUpdate("uploadStatus")},3e3))},onError:e=>{this.uploadStatus[i]&&(this.uploadStatus[i].status="error",this.uploadStatus[i].error=e,this.requestUpdate("uploadStatus"),this.dispatchEvent(new CustomEvent("cdtr-upload-error",{detail:{uploadId:i,fileName:t.name,error:e},bubbles:!0,composed:!0})),setTimeout(()=>{delete this.uploadStatus[i],this.requestUpdate("uploadStatus")},5e3))}}),this.opened=!1}onSearch(e){const{value:t,isLiked:s}=e.detail;s?this.eventEmitter.dispatch("load-files",{isLiked:s,resolve:e=>{Array.isArray(e)?this.files=[...e]:console.error("files is not array",e)}}):t.trim().length>2?this.eventEmitter.dispatch("load-files",{filter:"name",search:t,resolve:e=>{this.files=Array.isArray(e)?[...e]:[]}}):0===t.trim().length&&this.reset()}onFilter(e){const t=e.detail;this.eventEmitter.dispatch("load-files",{filter:"name",search:t.value})}onSelectFolder(e){const t=e.detail,s=this.sortBy,i=t.id;this.dirId=i,this.eventEmitter.dispatch("load-files",{filter:"dir",dirId:i,sortBy:s,resolve:e=>{this.files=e}})}oncreateNewFolder(e){const t=e.detail;this.eventEmitter.dispatch("create-folder",{name:t,resolve:e=>{this.folders||(this.folders=[]);const t=[...this.folders];t.forEach(e=>e.selected=!1),e.selected=!0,t.unshift(e),this.folders=t,this.onSelectFolder({detail:e})}})}onMoveFile(e){const t=e.detail;this.eventEmitter.dispatch("on-move-file",{data:t,resolve:e=>{if(this.folders||(this.folders=[]),this.dirId===t.folderId)return;const s=this.files.findIndex(e=>e.id===t.fileId);if(-1!==s){const e=[...this.files];e[s].moved=!0,this.files=e}const i=this.folders.findIndex(e=>e.id===t.folderId);if(-1!==i){const e=[...this.folders];e[i].file_count+=1,this.folders=e}}})}onLike(e){const t=e.detail;this.eventEmitter.dispatch("on-like",{fileId:t.id,resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e[s].isLiked=!e[s].isLiked,this.files=e}}})}onselectFile(e){const t={detail:e.detail,bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",t))}close(){this.dispatchEvent(new CustomEvent("close",{}))}onDleteFile(e){const t=e.detail;this.eventEmitter.dispatch("delete-file",{id:t.id,type:"image",resolve:e=>{const s=this.files.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.files];e.splice(s,1),this.files=e}}})}onLoadMore(){this.eventEmitter.dispatch("lazy-load-files-on-scroll",{resolve:e=>{if(Array.isArray(e)&&e.length>0){const t=[...this.files,...e];this.files=t}}})}onDeleteFolder(e){const t=e.detail;this.eventEmitter.dispatch("delete-folder",{id:t.id,resolve:e=>{this.folders||(this.folders=[]);const s=this.folders.findIndex(e=>e.id===t.id);if(-1!==s){const e=[...this.folders];e.splice(s,1),this.folders=e}}})}connectedCallback(){super.connectedCallback(),f.vP.on("on:upload-file","gallery:on:upload-file",async e=>{let{image:t,type:s}=e;if("base64"===s){const e=t.split(",")[1]||t,s=atob(e),i=new Array(s.length);for(let e=0;e<s.length;e++)i[e]=s.charCodeAt(e);const r=new Uint8Array(i),o=new Blob([r],{type:"image/png"}),a=new File([o],"uploaded-image.png",{type:"image/png"});this.uploadFile({detail:a})}else if("url"===s){const e=await fetch(t),s=await e.blob(),i=new File([s],"uploaded-image.png",{type:s.type||"image/png"});this.uploadFile({detail:i})}})}render(){return i.qy` 
       <cdtr-upload-loading></cdtr-upload-loading>
       <cdtr-upload-progress-monitor></cdtr-upload-progress-monitor>
       <cdtr-drawer
@@ -693,9 +695,9 @@
           .multi=${this.multi}
           .folders=${this.folders}
         ></cdtr-gallery-files>
-      </cdtr-drawer>`}}g.styles=r.AH``,g.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},opened:{type:Boolean},multi:{type:Boolean},uploadStatus:{type:Object}},customElements.define("cdtr-gallery",g)},2590(e,t,s){s.r(t),s.d(t,{TitleEditor:()=>o});var r=s(59929),i=s(86319);class o extends r.WF{constructor(){super(),this.text="",this.whiteSpace="pre"}connectedCallback(){super.connectedCallback(),this.style.fontFamily="var(--font-sans)",this.bold&&(this.style.fontWeight="bold"),this._onStoreChange=()=>this.requestUpdate(),i.M.connect(["lang","theme"],this._onStoreChange)}disconnectedCallback(){this._onStoreChange&&(i.M.disconnect(this._onStoreChange),this._onStoreChange=null),super.disconnectedCallback()}render(){const e=i.M.get("theme");e&&(this.style.direction=e.direction,this.style.textAlign=this.textAlign||e.textAlign);const t=i.M.get("lang",this.text);return r.qy`<slot
+      </cdtr-drawer>`}}b.styles=i.AH``,b.properties={folders:{type:Array},files:{type:Array},pageCount:{type:Number},prevUrl:{type:String},nextUrl:{type:String},opened:{type:Boolean},multi:{type:Boolean},uploadStatus:{type:Object}},customElements.define("cdtr-gallery",b)},2590(e,t,s){s.r(t),s.d(t,{TitleEditor:()=>o});var i=s(59929),r=s(86319);class o extends i.WF{constructor(){super(),this.text="",this.whiteSpace="pre"}connectedCallback(){super.connectedCallback(),this.style.fontFamily="var(--font-sans)",this.bold&&(this.style.fontWeight="bold"),this._onStoreChange=()=>this.requestUpdate(),r.M.connect(["lang","theme"],this._onStoreChange)}disconnectedCallback(){this._onStoreChange&&(r.M.disconnect(this._onStoreChange),this._onStoreChange=null),super.disconnectedCallback()}render(){const e=r.M.get("theme");e&&(this.style.direction=e.direction,this.style.textAlign=this.textAlign||e.textAlign);const t=r.M.get("lang",this.text);return i.qy`<slot
       ><span
         style="-webkit-font-smoothing: antialiased;display:inline-block;direction:var(--direction-locale);text-align:var(--text-align-locale);white-space:${this.whiteSpace}"
         >${t||this.text}</span
       ></slot
-    >`}}o.properties={text:{type:String,reflect:!1},whiteSpace:{type:String},textAlign:{type:String},bold:{type:Boolean}},customElements.get("lang-text")||customElements.define("lang-text",o)},13681(e,t,s){s.d(t,{vP:()=>c});const r=window.cdtrSignalKey||`___${Math.random().toString(36).substr(2,9)}`;window.cdtrSignalKey=r,window[r]||(window[r]={});const i=window[r],o=window.__cdtrEvents||{};function a(e){return crypto.subtle.digest("SHA-256",(new TextEncoder).encode(e)).then(e=>Array.from(new Uint8Array(e)).map(e=>e.toString(16).padStart(2,"0")).join(""))}function l(e){if(e.length%2!=0)throw new Error("Invalid hex string");const t=new Uint8Array(e.length/2);for(let s=0;s<e.length;s+=2)t[s/2]=parseInt(e.substr(s,2),16);return t}async function n(e){const t=await a(e),s=i[t];if(s){const e=await crypto.subtle.importKey("raw",l(t),{name:"AES-GCM"},!1,["encrypt","decrypt"]),r=await async function(e,t,s){const r=await crypto.subtle.decrypt({name:"AES-GCM",iv:t},e,s);return(new TextDecoder).decode(r)}(e,s.iv,s.encrypted);return JSON.parse(r)}return null}function d(e,t){if(o[e])for(const s in o[e])Object.prototype.hasOwnProperty.call(o[e],s)&&o[e][s].forEach(e=>e(t));Array.isArray(o["*"])&&o["*"].forEach(e=>e(t))}window.__cdtrEvents=o;const c={set:async function(e,t){const s=JSON.parse(JSON.stringify(t)),r=await a(e),n=await crypto.subtle.importKey("raw",l(r),{name:"AES-GCM"},!1,["encrypt","decrypt"]),c=await async function(e,t){const s=crypto.getRandomValues(new Uint8Array(12)),r=(new TextEncoder).encode(t),i=await crypto.subtle.encrypt({name:"AES-GCM",iv:s},e,r);return{iv:s,encrypted:new Uint8Array(i)}}(n,JSON.stringify(s));i[r]=c,o.set&&o.set[r]&&o.set[r].forEach(e=>e(s)),Array.isArray(o["*"])&&o["*"].forEach(e=>e(s)),d(e,s)},get:n,remove:async function(e){const t=await a(e);delete i[t]},on:async function(e,t,s){o[e]||(o[e]={});const r=await a(t);o[e][r]||(o[e][r]=[]),o[e][r].push(e=>{!function(){const e=(new Error).stack;if(e&&e.indexOf(" at <anonymous>:1")>-1)throw console.warn("Function call blocked: Detected console execution."),new Error("Function call blocked: Detected console execution.")}(),s(e)});const i=await n(t);return i&&s(i),r},off:function(e,t){o[e]&&o[e][t]&&delete o[e][t]},dispatch:d,OPTIONS:{SET:"set"}}}}]);
+    >`}}o.properties={text:{type:String,reflect:!1},whiteSpace:{type:String},textAlign:{type:String},bold:{type:Boolean}},customElements.get("lang-text")||customElements.define("lang-text",o)},13681(e,t,s){s.d(t,{vP:()=>c});const i=window.cdtrSignalKey||`___${Math.random().toString(36).substr(2,9)}`;window.cdtrSignalKey=i,window[i]||(window[i]={});const r=window[i],o=window.__cdtrEvents||{};function a(e){return crypto.subtle.digest("SHA-256",(new TextEncoder).encode(e)).then(e=>Array.from(new Uint8Array(e)).map(e=>e.toString(16).padStart(2,"0")).join(""))}function l(e){if(e.length%2!=0)throw new Error("Invalid hex string");const t=new Uint8Array(e.length/2);for(let s=0;s<e.length;s+=2)t[s/2]=parseInt(e.substr(s,2),16);return t}async function n(e){const t=await a(e),s=r[t];if(s){const e=await crypto.subtle.importKey("raw",l(t),{name:"AES-GCM"},!1,["encrypt","decrypt"]),i=await async function(e,t,s){const i=await crypto.subtle.decrypt({name:"AES-GCM",iv:t},e,s);return(new TextDecoder).decode(i)}(e,s.iv,s.encrypted);return JSON.parse(i)}return null}function d(e,t){if(o[e])for(const s in o[e])Object.prototype.hasOwnProperty.call(o[e],s)&&o[e][s].forEach(e=>e(t));Array.isArray(o["*"])&&o["*"].forEach(e=>e(t))}window.__cdtrEvents=o;const c={set:async function(e,t){const s=JSON.parse(JSON.stringify(t)),i=await a(e),n=await crypto.subtle.importKey("raw",l(i),{name:"AES-GCM"},!1,["encrypt","decrypt"]),c=await async function(e,t){const s=crypto.getRandomValues(new Uint8Array(12)),i=(new TextEncoder).encode(t),r=await crypto.subtle.encrypt({name:"AES-GCM",iv:s},e,i);return{iv:s,encrypted:new Uint8Array(r)}}(n,JSON.stringify(s));r[i]=c,o.set&&o.set[i]&&o.set[i].forEach(e=>e(s)),Array.isArray(o["*"])&&o["*"].forEach(e=>e(s)),d(e,s)},get:n,remove:async function(e){const t=await a(e);delete r[t]},on:async function(e,t,s){o[e]||(o[e]={});const i=await a(t);o[e][i]||(o[e][i]=[]),o[e][i].push(e=>{!function(){const e=(new Error).stack;if(e&&e.indexOf(" at <anonymous>:1")>-1)throw console.warn("Function call blocked: Detected console execution."),new Error("Function call blocked: Detected console execution.")}(),s(e)});const r=await n(t);return r&&s(r),i},off:function(e,t){o[e]&&o[e][t]&&delete o[e][t]},dispatch:d,OPTIONS:{SET:"set"}}}}]);

package/dist/767.creaditor.bundle.js

@@ -1,4 +1,4 @@
-"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[767],{70767(e,t,r){r.r(t),r.d(t,{PexelsGallery:()=>c});var o=r(59929),a=r(49549),s=r(93967),l=r(86959);function i(e){e||(e={query:"nature",per_page:1});const t=`${l.XW.agent_url}pexels/search/?query=${e.query||"marketing"}&per_page=${e.per_page||1}`;return fetch(t).then(e=>e.json()).then(e=>{if("success"===e.status&&e.data)return e.data.photos;throw new Error("Invalid response from backend")}).catch(e=>{throw console.error("Error fetching images:",e),e})}class c extends o.WF{constructor(){super(),this.images=[],this.loading=!1,this.searchQuery="",this.page=1,this.hasMore=!0,this.perPage=20,this.multi=!0,this.selectedColor="",this.defaultSearchTerms=["nature","landscape","city","people","technology","food","architecture","travel","business","art"],this.colorOptions=[{name:"Red",value:"red",hex:"#ff0000"},{name:"Orange",value:"orange",hex:"#ff8000"},{name:"Yellow",value:"yellow",hex:"#ffff00"},{name:"Green",value:"green",hex:"#00ff00"},{name:"Blue",value:"blue",hex:"#0000ff"},{name:"Purple",value:"purple",hex:"#8000ff"},{name:"Pink",value:"pink",hex:"#ff0080"},{name:"Brown",value:"brown",hex:"#8b4513"},{name:"Black",value:"black",hex:"#000000"},{name:"White",value:"white",hex:"#ffffff"},{name:"Gray",value:"gray",hex:"#808080"},{name:"Teal",value:"teal",hex:"#008080"},{name:"Navy",value:"navy",hex:"#000080"},{name:"Maroon",value:"maroon",hex:"#800000"},{name:"Olive",value:"olive",hex:"#808000"},{name:"Lime",value:"lime",hex:"#00ff00"},{name:"Aqua",value:"aqua",hex:"#00ffff"},{name:"Silver",value:"silver",hex:"#c0c0c0"},{name:"Fuchsia",value:"fuchsia",hex:"#ff00ff"},{name:"Coral",value:"coral",hex:"#ff7f50"},{name:"Gold",value:"gold",hex:"#ffd700"},{name:"Indigo",value:"indigo",hex:"#4b0082"},{name:"Violet",value:"violet",hex:"#ee82ee"},{name:"Cyan",value:"cyan",hex:"#00ffff"},{name:"Magenta",value:"magenta",hex:"#ff00ff"}],this.cacheKey="pexels-gallery-cache",this.cacheExpiry=864e5,this.isTyping=!1,this.lastSearchQuery="",this.searchTimeout=null}connectedCallback(){super.connectedCallback(),this.loadFromCache()}getCacheData(){try{const e=localStorage.getItem(this.cacheKey);if(!e)return null;const t=JSON.parse(e),r=Date.now();return t.timestamp&&r-t.timestamp>this.cacheExpiry?(localStorage.removeItem(this.cacheKey),null):t}catch(e){return console.error("Error reading cache:",e),null}}saveToCache(){if(!this.isTyping)try{const e={images:this.images,searchQuery:this.searchQuery,selectedColor:this.selectedColor,page:this.page,hasMore:this.hasMore,timestamp:Date.now()};localStorage.setItem(this.cacheKey,JSON.stringify(e))}catch(e){console.error("Error saving to cache:",e)}}loadFromCache(){const e=this.getCacheData();e?(this.images=e.images||[],this.searchQuery=e.searchQuery||"",this.selectedColor=e.selectedColor||"",this.page=e.page||1,this.hasMore=void 0===e.hasMore||e.hasMore,console.log("Gallery state restored from cache"),this.requestUpdate(),this.updateComplete.then(()=>{this.updateSearchInput()})):this.loadRandomImages()}updateSearchInput(){const e=this.shadowRoot?.querySelector('cdtr-input[type="search"]');e&&(e.value=this.searchQuery)}async loadRandomImages(){this.loading=!0;try{const e=this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)],t=await i({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.searchQuery="",this.selectedColor="",this.page=1,this.saveToCache()):(console.error("Failed to load images from Pexels"),this.images=[])}catch(e){console.error("Error loading images:",e),this.images=[]}finally{this.loading=!1}}async searchImages(e){if(!e.trim())return this.loadRandomImages();this.loading=!0,this.searchQuery=e,this.page=1;try{const t=await i({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.saveToCache()):(console.error("Failed to search images from Pexels"),this.images=[])}catch(e){console.error("Error searching images:",e),this.images=[]}finally{this.loading=!1}}async loadMoreImages(){if(!this.loading&&this.hasMore){this.loading=!0,this.page++;try{let e;if(this.selectedColor&&"all"!==this.selectedColor){let t=this.removeColorFilters(this.searchQuery);e=t.trim()?`${t} ${this.selectedColor}`:this.selectedColor}else{e=this.removeColorFilters(this.searchQuery)||this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)]}const t=await i({query:e,per_page:this.perPage});if(t.ok){const e=(await t.json()).photos||[];this.images=[...this.images,...e],this.hasMore=e.length===this.perPage,this.saveToCache()}}catch(e){console.error("Error loading more images:",e)}finally{this.loading=!1}}}onSearch(e){const t=e.target.value;this.isTyping=!0,t!==this.lastSearchQuery&&(this.lastSearchQuery=t,this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.isTyping=!1,this.searchWithColor(t,this.selectedColor)},500))}onSelectImage(e){const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`,o={detail:{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",o))}sendSelectedImages(){const e={detail:this.images.filter(e=>e.selected).map(e=>{const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`;return{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r}}),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onScroll(e){const t=e.target;t.scrollTop+t.offsetHeight>=t.scrollHeight-50&&this.loadMoreImages()}clearCache(){localStorage.removeItem(this.cacheKey),console.log("Gallery cache cleared")}onColorChange(e){console.log("Color change event:",e);const t=e.target.value;console.log("Selected color:",t),this.selectedColor="all"===t?"":t;const r=this.searchQuery||"";this.searchWithColor(r,this.selectedColor)}searchWithColor(e,t){if(t&&"all"!==t){let r=this.removeColorFilters(e),o=r.trim()?`${r} ${t}`:t;this.searchImages(o)}else{let t=this.removeColorFilters(e);this.searchImages(t)}}removeColorFilters(e){if(!e)return"";const t=this.colorOptions.map(e=>e.value);return e.split(" ").filter(e=>{const r=e.toLowerCase().trim();return!t.includes(r)}).join(" ").trim()}getSelectedColorName(){if(!this.selectedColor)return"Filter by color";const e=this.colorOptions.find(e=>e.value===this.selectedColor);return e?e.name:"Filter by color"}getSelectedColorHex(){if(!this.selectedColor)return"#666";const e=this.colorOptions.find(e=>e.value===this.selectedColor);return e?e.hex:"#666"}render(){return o.qy`
+"use strict";(("undefined"!=typeof self?self:this).webpackChunkCreaditor=("undefined"!=typeof self?self:this).webpackChunkCreaditor||[]).push([[767],{70767(e,t,r){r.r(t),r.d(t,{PexelsGallery:()=>n});var a=r(59929),s=r(49549),o=r(93967),i=r(86959);function l(e){e||(e={query:"nature",per_page:1});const t=`${i.XW.agent_url}pexels/search/?query=${e.query||"marketing"}&per_page=${e.per_page||1}`;return fetch(t).then(e=>e.json()).then(e=>{if("success"===e.status&&e.data)return e.data.photos;throw new Error("Invalid response from backend")}).catch(e=>{throw console.error("Error fetching images:",e),e})}class n extends a.WF{constructor(){super(),this.images=[],this.loading=!1,this.searchQuery="",this.page=1,this.hasMore=!0,this.perPage=20,this.multi=!0,this.defaultSearchTerms=["nature","landscape","city","people","technology","food","architecture","travel","business","art"],this.cacheKey="pexels-gallery-cache",this.cacheExpiry=864e5,this.isTyping=!1,this.lastSearchQuery="",this.searchTimeout=null}connectedCallback(){super.connectedCallback(),this.loadFromCache()}getCacheData(){try{const e=localStorage.getItem(this.cacheKey);if(!e)return null;const t=JSON.parse(e),r=Date.now();return t.timestamp&&r-t.timestamp>this.cacheExpiry?(localStorage.removeItem(this.cacheKey),null):t}catch(e){return console.error("Error reading cache:",e),null}}saveToCache(){if(!this.isTyping)try{const e={images:this.images,searchQuery:this.searchQuery,page:this.page,hasMore:this.hasMore,timestamp:Date.now()};localStorage.setItem(this.cacheKey,JSON.stringify(e))}catch(e){console.error("Error saving to cache:",e)}}loadFromCache(){const e=this.getCacheData();e?(this.images=e.images||[],this.searchQuery=e.searchQuery||"",this.page=e.page||1,this.hasMore=void 0===e.hasMore||e.hasMore,console.log("Gallery state restored from cache"),this.requestUpdate(),this.updateComplete.then(()=>{this.updateSearchInput()})):this.loadRandomImages()}updateSearchInput(){const e=this.shadowRoot?.querySelector('cdtr-input[type="search"]');e&&(e.value=this.searchQuery)}async loadRandomImages(){this.loading=!0;try{const e=this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)],t=await l({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.searchQuery="",this.page=1,this.saveToCache()):(console.error("Failed to load images from Pexels"),this.images=[])}catch(e){console.error("Error loading images:",e),this.images=[]}finally{this.loading=!1}}async searchImages(e){if(!e.trim())return this.loadRandomImages();this.loading=!0,this.searchQuery=e,this.page=1;try{const t=await l({query:e,per_page:this.perPage});t?(this.images=t||[],this.hasMore=t&&t.length===this.perPage,this.saveToCache()):(console.error("Failed to search images from Pexels"),this.images=[])}catch(e){console.error("Error searching images:",e),this.images=[]}finally{this.loading=!1}}async loadMoreImages(){if(!this.loading&&this.hasMore){this.loading=!0,this.page++;try{const e=this.searchQuery||this.defaultSearchTerms[Math.floor(Math.random()*this.defaultSearchTerms.length)],t=await l({query:e,per_page:this.perPage});if(t.ok){const e=(await t.json()).photos||[];this.images=[...this.images,...e],this.hasMore=e.length===this.perPage,this.saveToCache()}}catch(e){console.error("Error loading more images:",e)}finally{this.loading=!1}}}onSearch(e){const t=e.target.value;this.isTyping=!0,t!==this.lastSearchQuery&&(this.lastSearchQuery=t,this.searchTimeout&&clearTimeout(this.searchTimeout),this.searchTimeout=setTimeout(()=>{this.isTyping=!1,this.searchImages(t)},500))}onSelectImage(e){const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`,a={detail:{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r},bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",a))}sendSelectedImages(){const e={detail:this.images.filter(e=>e.selected).map(e=>{const t=`Photo by ${e.photographer} on Pexels`,r=`Photo by <a href="${e.photographer_url}" target="_blank" rel="noopener noreferrer">${e.photographer}</a> on <a href="${e.url}" target="_blank" rel="noopener noreferrer">Pexels</a>`;return{id:e.id,src:e.src.medium||e.src.large||e.src.original,name:`Pexels Image ${e.id}`,size:`${e.width}x${e.height}`,photographer:e.photographer,photographerUrl:e.photographer_url,pexelsUrl:e.url,alt:e.alt||`Photo by ${e.photographer} on Pexels`,attributionText:t,attributionHtml:r}}),bubbles:!1,composed:!1};this.dispatchEvent(new CustomEvent("file",e))}onScroll(e){const t=e.target;t.scrollTop+t.offsetHeight>=t.scrollHeight-50&&this.loadMoreImages()}clearCache(){localStorage.removeItem(this.cacheKey),console.log("Gallery cache cleared")}render(){return a.qy`
       <div class="gallery-container">
         <cdtr-row alignItems="center">
           <cdtr-input
@@ -10,48 +10,14 @@
 
           <div class="divider-y"></div>
 
-          <!-- Color Filter Dropdown -->
-          <div class="color-dropdown">
-            <cdtr-dropdown
-              .value=${this.selectedColor||""}
-              @change=${this.onColorChange}
-            >
-              <paper-button slot="trigger">
-                <div
-                  class="color-preview"
-                  style="background-color: ${this.getSelectedColorHex()}"
-                ></div>
-              </paper-button>
-              <div slot="content">
-                <cdtr-dropdown-item
-                  value="all"
-                  .selected=${!this.selectedColor}
-                >
-                  <div
-                    class="color-circle"
-                    style="background-color: transparent; border: 2px dashed #ccc;"
-                  ></div>
-                  <span style="margin-left: 8px; font-size: 12px;">All Colors</span>
-                </cdtr-dropdown-item>
-                ${this.colorOptions.map(e=>o.qy`
-                    <cdtr-dropdown-item
-                      value="${e.value}"
-                      .selected=${this.selectedColor===e.value}
-                    >
-                      <div
-                        class="color-circle"
-                        style="background-color: ${e.hex}"
-                      ></div>
-                      <span style="margin-left: 8px; font-size: 12px;">${e.name}</span>
-                    </cdtr-dropdown-item>
-                  `)}
-              </div>
-            </cdtr-dropdown>
-          </div>
-
           <paper-button @click=${this.loadRandomImages} class="icon-btn">
             <cdtr-tooltip delay="500,0" arrow=${!1} content="refresh">
-              <cdtr-refresh-icon></cdtr-refresh-icon>
+              <!-- cdtr-refresh-icon has no definition anywhere in this
+                   codebase — a plain inline SVG in its place. -->
+              <svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                <path d="M21 12a9 9 0 1 1-2.64-6.36" />
+                <path d="M21 3v6h-6" />
+              </svg>
             </cdtr-tooltip>
           </paper-button>
         </cdtr-row>
@@ -82,12 +48,12 @@
               class="scroll-body"
               justify="space-evenly"
             >
-              ${this.loading&&0===this.images.length?o.qy`<cdtr-col sm="12">
+              ${this.loading&&0===this.images.length?a.qy`<cdtr-col sm="12">
                     <cdtr-row justify="center">
-                      <cdtr-spinner></cdtr-spinner>
+                      <div class="fallback-spinner"></div>
                       <lang-text text="loading"></lang-text>
                     </cdtr-row>
-                  </cdtr-col>`:(0,a.u)(this.images||[],e=>e.id,(e,t)=>o.qy`<cdtr-col class="file-col" sm="3">
+                  </cdtr-col>`:(0,s.u)(this.images||[],e=>e.id,(e,t)=>a.qy`<cdtr-col class="file-col" sm="3">
                         <cdtr-editor-media-card
                           @dblclick=${()=>this.onSelectImage(e)}
                           @click=${t=>{t.shiftKey&&this.multi||this.images.forEach(e=>e.selected=!1),e.selected=!e.selected,this.images=[...this.images],this.isTyping||this.saveToCache()}}
@@ -118,9 +84,9 @@
                           </div>
                         </cdtr-editor-media-card>
                       </cdtr-col>`)}
-              ${this.loading&&this.images.length>0?o.qy`<cdtr-col sm="12">
+              ${this.loading&&this.images.length>0?a.qy`<cdtr-col sm="12">
                     <cdtr-row justify="center">
-                      <cdtr-spinner></cdtr-spinner>
+                      <div class="fallback-spinner"></div>
                       <lang-text text="loadingMore"></lang-text>
                     </cdtr-row>
                   </cdtr-col>`:null}
@@ -134,38 +100,28 @@
           </paper-button>
         </cdtr-row>
       </div>
-    `}}c.styles=[s.T,o.AH`
+    `}}n.styles=[o.T,a.AH`
       :host {
         --alpha: rgba(0, 123, 255, 0.1);
         --primary: #007bff;
       }
 
-      .color-dropdown {
-        display: inline-block;
-      }
-
-      .color-preview {
-        width: 20px;
-        height: 20px;
+      /* cdtr-spinner has no definition anywhere in this codebase — a plain
+         CSS spinner in its place, scoped to this component only. */
+      .fallback-spinner {
+        width: 18px;
+        height: 18px;
         border-radius: 50%;
-        border: 2px solid white;
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-        display: inline-block;
+        border: 2px solid var(--alpha);
+        border-top-color: var(--primary);
+        animation: cdtr-fallback-spin 0.7s linear infinite;
       }
-
-      .color-circle {
-        width: 20px;
-        height: 20px;
-        border-radius: 50%;
-        border: 2px solid white;
-        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
-        display: inline-block;
+      @keyframes cdtr-fallback-spin {
+        to {
+          transform: rotate(360deg);
+        }
       }
 
-      .clear-color {
-        color: #666;
-        font-style: italic;
-      }
       .pexels-credit {
         position: absolute;
         bottom: 5px;
@@ -271,4 +227,4 @@
       .pexels-header-link:hover {
         color: #2563eb;
       }
-    `],c.properties={images:{type:Array},loading:{type:Boolean},searchQuery:{type:String},page:{type:Number},hasMore:{type:Boolean},multi:{type:Boolean},selectedColor:{type:String}},customElements.define("cdtr-pexels-gallery",c)}}]);
+    `],n.properties={images:{type:Array},loading:{type:Boolean},searchQuery:{type:String},page:{type:Number},hasMore:{type:Boolean},multi:{type:Boolean}},customElements.define("cdtr-pexels-gallery",n)}}]);