@mihaifanache/js-ui-sdk/index.esm.js

JS-UI SDK - Complete editor components library for PublicAI

var d=class{constructor(t,e={}){this.container=typeof t=="string"?document.querySelector(t):t,this.currentSlide=0,this.options={cardsVisible:2.5,scrollBy:1,configUrl:"",slides:[],...e},this.slidesData=[],this.init()}async init(){this.track=this.container.querySelector(".carousel-track"),this.cardWidth=160,console.log("[SimpleCarouselEditor] \u{1F3A0} Initializing editor mode..."),await this.loadConfig(),this.generateSlides(),this.slides=[...this.track.children],console.log(`[SimpleCarouselEditor] \u{1F4CA} Rendering ${this.slidesData.length} slides from config`),console.log(`[SimpleCarouselEditor] \u2699\uFE0F Settings: ${this.options.cardsVisible} cards visible, scroll by ${this.options.scrollBy}`),this.updateSlidePosition(),console.log("[SimpleCarouselEditor] \u2705 Editor initialization complete")}async loadConfig(){try{console.log("[SimpleCarouselEditor] \u{1F50D} Loading config from backend API...");let t=this.container.getAttribute("data-js-ui-component")||"simple-carousel";try{let i=await fetch(`/api/vibe/comp/${t}/config`);if(i.ok){let o=await i.json();if(o.success&&o.data&&o.data.config){let s=o.data.config;this.slidesData=s.slides||[],console.log(`[SimpleCarouselEditor] \u2705 Loaded ${this.slidesData.length} slides from backend API`),s.carouselSettings&&(this.options={...this.options,...s.carouselSettings},console.log("[SimpleCarouselEditor] \u2699\uFE0F Applied carousel settings from API:",s.carouselSettings));return}}console.warn("[SimpleCarouselEditor] \u26A0\uFE0F Failed to load config from backend API"),console.log("[SimpleCarouselEditor] \u{1F50D} Response status:",i.status)}catch(i){console.warn("[SimpleCarouselEditor] \u274C Backend API error:",i.message)}let e=this.container.getAttribute("data-widget-uuid");if(e&&window.storyDataService)try{let i=`data/${e}.json`;console.log("[SimpleCarouselEditor] \u{1F50D} Fallback: Loading config from:",i);let o=await window.storyDataService.getFileManager().readFile(i);if(o){let s=JSON.parse(o);this.slidesData=s.slides||[],console.log(`[SimpleCarouselEditor] \u2705 Loaded ${this.slidesData.length} slides from ${i}`),s.carouselSettings&&(this.options={...this.options,...s.carouselSettings},console.log("[SimpleCarouselEditor] \u2699\uFE0F Applied carousel settings:",s.carouselSettings));return}}catch(i){console.warn("[SimpleCarouselEditor] \u274C Failed to load config from file:",i.message)}console.log("[SimpleCarouselEditor] \u{1F3AF} Using default slides"),this.useDefaultSlides()}catch(t){console.error("[SimpleCarouselEditor] \u274C Error loading config:",t),this.useDefaultSlides()}}getConfigUrl(){let t=this.container.getAttribute("data-widget-uuid");return t&&t.trim()?`./data_${t.trim()}.json`:this.container.getAttribute("data-config-url")||this.options.configUrl}useDefaultSlides(){console.log("[SimpleCarouselEditor] \u{1F3AF} Using default slides as fallback"),this.slidesData=[{id:"default-1",image:"",title:"Sample Slide 1",description:"This is a sample slide",location:"Sample Location",date:"Today",cta:{text:"Learn More",url:"#",style:"primary"}},{id:"default-2",image:"",title:"Sample Slide 2",description:"Another sample slide",location:"Another Location",date:"Tomorrow",cta:{text:"View Details",url:"#",style:"secondary"}}]}generateSlides(){if(!this.slidesData||this.slidesData.length===0){console.warn("[SimpleCarouselEditor] No slides data available");return}this.track.innerHTML="",this.slidesData.forEach((t,e)=>{let i=this.createSlideElement(t,e);this.track.appendChild(i)})}createSlideElement(t,e){let i=document.createElement("div");i.className="carousel-slide flex-shrink-0 w-36",i.setAttribute("data-slide-id",t.id||`slide-${e}`);let o=t.cta?this.createCtaButton(t.cta):"";return i.innerHTML=`
      <div class="bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700 overflow-hidden shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
        <!-- Photo area -->
        <div class="h-28 bg-gray-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
          ${t.image?`<img src="${t.image}" alt="${t.title}" class="w-full h-full object-cover" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
             <svg class="w-8 h-8 text-gray-400 dark:text-neutral-500 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
             </svg>`:`<svg class="w-8 h-8 text-gray-400 dark:text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
             </svg>`}
        </div>
        <!-- Content area -->
        <div class="p-3 flex-1 flex flex-col">
          <h4 class="font-medium text-sm text-gray-800 dark:text-neutral-300 mb-2 line-clamp-2">
            ${t.title||"Untitled"}
          </h4>
          ${t.description?`<p class="text-xs text-gray-600 dark:text-neutral-400 mb-2 line-clamp-2">${t.description}</p>`:""}
          <div class="space-y-1 text-xs flex-grow">
            ${t.location?`
              <div class="flex justify-between items-center">
                <span class="text-gray-600 dark:text-neutral-400">Location:</span>
                <span class="font-medium text-gray-800 dark:text-white">${t.location}</span>
              </div>
            `:""}
            ${t.date?`
              <div class="flex justify-between items-center">
                <span class="text-gray-600 dark:text-neutral-400">Date:</span>
                <span class="font-medium text-gray-800 dark:text-white">${t.date}</span>
              </div>
            `:""}
          </div>
          ${o}
        </div>
      </div>
    `,i}createCtaButton(t){if(!t||!t.text)return"";let e={primary:"bg-blue-600 hover:bg-blue-700 text-white",secondary:"bg-gray-600 hover:bg-gray-700 text-white",outline:"border border-gray-300 hover:border-gray-400 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-neutral-800"},i=e[t.style]||e.primary;return`
      <div class="mt-3 pt-2 border-t border-gray-100 dark:border-neutral-700">
        <a href="${t.url||"#"}" 
           class="inline-block w-full text-center px-3 py-2 rounded-md text-xs font-medium transition-colors ${i}"
           ${t.url&&t.url.startsWith("#")?"":'target="_blank" rel="noopener noreferrer"'}>
          ${t.text}
        </a>
      </div>
    `}goToSlide(t){let e=Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible));return this.currentSlide=Math.max(0,Math.min(t,e)),this.updateSlidePosition(),this.currentSlide}nextSlide(){return this.goToSlide(this.currentSlide+this.options.scrollBy)}prevSlide(){return this.goToSlide(this.currentSlide-this.options.scrollBy)}updateSlidePosition(){if(this.track){let t=-(this.currentSlide*this.cardWidth);this.track.style.transform=`translateX(${t}px)`}}getCurrentSlide(){return this.currentSlide}getTotalSlides(){return this.slides.length}getMaxSlide(){return Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible))}getCardsVisible(){return this.options.cardsVisible}setCardsVisible(t){this.options.cardsVisible=t,this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide()))}setScrollBy(t){this.options.scrollBy=t}async updateConfig(t){t.slides&&(this.slidesData=t.slides,this.generateSlides(),this.slides=[...this.track.children]),t.carouselSettings&&(this.options={...this.options,...t.carouselSettings}),this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide()))}async loadConfigFromUrl(t){try{let e=await fetch(t);if(e.ok){let i=await e.json();await this.updateConfig(i)}else console.error("[SimpleCarouselEditor] Failed to load config from URL:",t)}catch(e){console.error("[SimpleCarouselEditor] Error loading config from URL:",e)}}getConfig(){return{slides:this.slidesData,carouselSettings:{currentSlide:this.currentSlide,totalSlides:this.slides.length,maxSlide:this.getMaxSlide(),cardsVisible:this.options.cardsVisible,scrollBy:this.options.scrollBy,configUrl:this.options.configUrl}}}setConfig(t){t.cardsVisible!==void 0&&(this.options.cardsVisible=t.cardsVisible),t.scrollBy!==void 0&&(this.options.scrollBy=t.scrollBy),t.currentSlide!==void 0&&this.goToSlide(t.currentSlide),t.carouselSettings&&(t.carouselSettings.cardsVisible!==void 0&&(this.options.cardsVisible=t.carouselSettings.cardsVisible),t.carouselSettings.scrollBy!==void 0&&(this.options.scrollBy=t.carouselSettings.scrollBy),t.carouselSettings.configUrl!==void 0&&(this.options.configUrl=t.carouselSettings.configUrl),t.carouselSettings.currentSlide!==void 0&&this.goToSlide(t.carouselSettings.currentSlide)),t.slides&&(this.slidesData=t.slides,this.generateSlides(),this.slides=[...this.track.children],this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide())))}addSlide(t,e=-1){e===-1||e>=this.slidesData.length?this.slidesData.push(t):this.slidesData.splice(e,0,t),this.generateSlides(),this.slides=[...this.track.children]}updateSlide(t,e){t>=0&&t<this.slidesData.length&&(this.slidesData[t]={...this.slidesData[t],...e},this.generateSlides(),this.slides=[...this.track.children])}removeSlide(t){t>=0&&t<this.slidesData.length&&(this.slidesData.splice(t,1),this.generateSlides(),this.slides=[...this.track.children],this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide())))}refresh(){this.slides=[...this.track.children],this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide()))}destroy(){console.log("[SimpleCarousel] Editor destroyed")}};var c=class{constructor(t,e={}){this.container=typeof t=="string"?document.querySelector(t):t,this.currentSlide=0,this.options={cardsVisible:2.5,scrollBy:1,configUrl:"",slides:[],...e},this.slidesData=[],this.init()}async init(){this.track=this.container.querySelector(".carousel-track"),this.prevBtn=this.container.querySelector(".carousel-prev"),this.nextBtn=this.container.querySelector(".carousel-next"),this.dotsContainer=this.container.querySelector(".carousel-dots"),this.cardWidth=160,await this.loadConfig(),this.generateSlides(),this.slides=[...this.track.children],this.createDots(),this.setupEvents(),this.updateSlide(),this.updateButtonStates()}async loadConfig(){try{console.log("[SimpleCarouselClient] \u{1F50D} Loading config from JSON file...");let t=this.getConfigUrl();if(t)try{let e=await fetch(t);if(e.ok){let i=await e.json();this.slidesData=i.slides||[],console.log(`[SimpleCarouselClient] \u2705 Loaded ${this.slidesData.length} slides from ${t}`),i.carouselSettings&&(this.options={...this.options,...i.carouselSettings},console.log("[SimpleCarouselClient] \u2699\uFE0F Applied carousel settings:",i.carouselSettings));return}else console.warn("[SimpleCarouselClient] \u274C Failed to load config from URL:",t,"Status:",e.status)}catch(e){console.warn("[SimpleCarouselClient] \u274C JSON file fetch failed:",e.message)}console.log("[SimpleCarouselClient] \u{1F3AF} Using default slides"),this.useDefaultSlides()}catch(t){console.error("[SimpleCarouselClient] \u274C Error loading config:",t),this.useDefaultSlides()}}getConfigUrl(){let t=this.container.getAttribute("data-widget-uuid");return t&&t.trim()?`./data_${t.trim()}.json`:this.container.getAttribute("data-config-url")||this.options.configUrl}useDefaultSlides(){this.slidesData=[{id:"default-1",image:"",title:"Sample Slide 1",description:"This is a sample slide",location:"Sample Location",date:"Today",cta:{text:"Learn More",url:"#",style:"primary"}},{id:"default-2",image:"",title:"Sample Slide 2",description:"Another sample slide",location:"Another Location",date:"Tomorrow",cta:{text:"View Details",url:"#",style:"secondary"}}]}generateSlides(){if(!this.slidesData||this.slidesData.length===0){console.warn("[SimpleCarousel] No slides data available");return}this.track.innerHTML="",this.slidesData.forEach((t,e)=>{let i=this.createSlideElement(t,e);this.track.appendChild(i)})}createSlideElement(t,e){let i=document.createElement("div");i.className="carousel-slide flex-shrink-0 w-36",i.setAttribute("data-slide-id",t.id||`slide-${e}`);let o=t.cta?this.createCtaButton(t.cta):"";return i.innerHTML=`
      <div class="bg-white border border-gray-200 rounded-lg dark:bg-neutral-900 dark:border-neutral-700 overflow-hidden shadow-sm hover:shadow-md transition-shadow h-full flex flex-col">
        <!-- Photo area -->
        <div class="h-28 bg-gray-100 dark:bg-neutral-800 flex items-center justify-center overflow-hidden">
          ${t.image?`<img src="${t.image}" alt="${t.title}" class="w-full h-full object-cover" loading="lazy" onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
             <svg class="w-8 h-8 text-gray-400 dark:text-neutral-500 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
             </svg>`:`<svg class="w-8 h-8 text-gray-400 dark:text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
             </svg>`}
        </div>
        <!-- Content area -->
        <div class="p-3 flex-1 flex flex-col">
          <h4 class="font-medium text-sm text-gray-800 dark:text-neutral-300 mb-2 line-clamp-2">
            ${t.title||"Untitled"}
          </h4>
          ${t.description?`<p class="text-xs text-gray-600 dark:text-neutral-400 mb-2 line-clamp-2">${t.description}</p>`:""}
          <div class="space-y-1 text-xs flex-grow">
            ${t.location?`
              <div class="flex justify-between items-center">
                <span class="text-gray-600 dark:text-neutral-400">Location:</span>
                <span class="font-medium text-gray-800 dark:text-white">${t.location}</span>
              </div>
            `:""}
            ${t.date?`
              <div class="flex justify-between items-center">
                <span class="text-gray-600 dark:text-neutral-400">Date:</span>
                <span class="font-medium text-gray-800 dark:text-white">${t.date}</span>
              </div>
            `:""}
          </div>
          ${o}
        </div>
      </div>
    `,i}createCtaButton(t){if(!t||!t.text)return"";let e={primary:"bg-blue-600 hover:bg-blue-700 text-white",secondary:"bg-gray-600 hover:bg-gray-700 text-white",outline:"border border-gray-300 hover:border-gray-400 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-neutral-800"},i=e[t.style]||e.primary;return`
      <div class="mt-3 pt-2 border-t border-gray-100 dark:border-neutral-700">
        <a href="${t.url||"#"}" 
           class="inline-block w-full text-center px-3 py-2 rounded-md text-xs font-medium transition-colors ${i}"
           ${t.url&&t.url.startsWith("#")?"":'target="_blank" rel="noopener noreferrer"'}>
          ${t.text}
        </a>
      </div>
    `}createDots(){if(!this.dotsContainer)return;this.dotsContainer.innerHTML="";let t=Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible)),e=Math.min(this.slides.length,t+1);for(let i=0;i<e;i++){let o=document.createElement("button");o.className="w-2 h-2 bg-gray-300 hover:bg-gray-400 rounded-full transition-colors",o.setAttribute("data-slide",i.toString()),o.addEventListener("click",()=>this.goToSlide(i)),this.dotsContainer.appendChild(o)}}setupEvents(){this.prevBtn&&this.prevBtn.addEventListener("click",()=>this.prevSlide()),this.nextBtn&&this.nextBtn.addEventListener("click",()=>this.nextSlide());let t=0,e=!1;this.track.addEventListener("touchstart",i=>{t=i.touches[0].clientX,e=!0}),this.track.addEventListener("touchmove",i=>{e&&i.preventDefault()}),this.track.addEventListener("touchend",i=>{if(!e)return;e=!1;let o=i.changedTouches[0].clientX,s=t-o;Math.abs(s)>50&&(s>0?this.nextSlide():this.prevSlide())})}goToSlide(t){let e=Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible));this.currentSlide=Math.max(0,Math.min(t,e)),this.updateSlide(),this.updateButtonStates()}prevSlide(){this.goToSlide(this.currentSlide-this.options.scrollBy)}nextSlide(){this.goToSlide(this.currentSlide+this.options.scrollBy)}updateSlide(){let t=-(this.currentSlide*this.cardWidth);this.track.style.transform=`translateX(${t}px)`,this.dotsContainer&&[...this.dotsContainer.children].forEach((e,i)=>{i===this.currentSlide?e.className="w-2 h-2 bg-gray-600 dark:bg-neutral-300 rounded-full transition-colors":e.className="w-2 h-2 bg-gray-300 hover:bg-gray-400 dark:bg-neutral-600 dark:hover:bg-neutral-500 rounded-full transition-colors"})}updateButtonStates(){if(this.prevBtn&&(this.currentSlide<=0?(this.prevBtn.style.opacity="0.5",this.prevBtn.style.cursor="not-allowed"):(this.prevBtn.style.opacity="1",this.prevBtn.style.cursor="pointer")),this.nextBtn){let t=Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible));this.currentSlide>=t?(this.nextBtn.style.opacity="0.5",this.nextBtn.style.cursor="not-allowed"):(this.nextBtn.style.opacity="1",this.nextBtn.style.cursor="pointer")}}getCurrentSlide(){return this.currentSlide}getTotalSlides(){return this.slides.length}getMaxSlide(){return Math.max(0,this.slides.length-Math.floor(this.options.cardsVisible))}async updateConfig(t){t.slides&&(this.slidesData=t.slides,this.generateSlides(),this.slides=[...this.track.children]),t.carouselSettings&&(this.options={...this.options,...t.carouselSettings}),this.createDots(),this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide()))}async loadConfigFromUrl(t){try{let e=await fetch(t);if(e.ok){let i=await e.json();await this.updateConfig(i)}else console.error("[SimpleCarousel] Failed to load config from URL:",t)}catch(e){console.error("[SimpleCarousel] Error loading config from URL:",e)}}getConfig(){return{slides:this.slidesData,carouselSettings:{cardsVisible:this.options.cardsVisible,scrollBy:this.options.scrollBy,configUrl:this.options.configUrl}}}refresh(){this.slides=[...this.track.children],this.createDots(),this.goToSlide(Math.min(this.currentSlide,this.getMaxSlide()))}destroy(){this.prevBtn&&this.prevBtn.removeEventListener("click",this.prevSlide),this.nextBtn&&this.nextBtn.removeEventListener("click",this.nextSlide),console.log("[SimpleCarousel] Client destroyed")}};var g={"simple-carousel":{name:"Photo Carousel",description:"Beautiful multi-card carousel perfect for photo galleries and content showcases",category:"layout",version:"2.0.0",editor:d,client:c,manifest:{name:"simple-carousel",displayName:"Photo Carousel",description:"Beautiful multi-card carousel perfect for photo galleries and content showcases",version:"2.0.0",category:"layout",tags:["carousel","photos","cards","multi-view","gallery"],status:"stable",features:["Multi-card view (shows 2.5 cards at once)","Smooth scrolling with easing","Touch/swipe support for mobile","Smart navigation buttons with disabled states","Dynamic dot indicators","Photo card design with descriptions","Dark mode support","Responsive design"],props:{configUrl:{type:"string",default:"",description:"URL to JSON configuration file for slides data"},cardsVisible:{type:"number",default:2.5,description:"How many cards to show at once"},scrollBy:{type:"number",default:1,description:"How many cards to scroll by"},slides:{type:"array",default:[],description:"Array of slide objects with image, title, description, and CTA",items:{type:"object",properties:{id:{type:"string",description:"Unique identifier for the slide"},image:{type:"string",description:"Image URL or path for the slide"},title:{type:"string",description:"Slide title text"},description:{type:"string",description:"Slide description text"},location:{type:"string",description:"Location information"},date:{type:"string",description:"Date information"},cta:{type:"object",description:"Call-to-action button configuration",properties:{text:{type:"string",description:"CTA button text"},url:{type:"string",description:"CTA button URL"},style:{type:"enum",options:["primary","secondary","outline"],default:"primary",description:"CTA button style variant"}}}}}}},events:{slideChange:"Fired when slide position changes",swipe:"Fired when user swipes on mobile"},dependencies:{css:["tailwindcss"],js:[]},usage:{html:'<div id="photo-carousel"></div>',js:"new SimpleCarouselClient('#photo-carousel', { cardsVisible: 2.5, scrollBy: 1 })"}}}};var h=class{constructor(){this.components=g,this.instances=new Map,this.instanceCounter=0}getComponents(){return Object.keys(this.components)}getComponent(t){return this.components[t]||null}createEditor(t,e,i={}){console.log(`        \u{1F3A8} [JSUISDKManager] Creating editor for ${t}`);let o=this.getComponent(t);if(!o||!o.editor)throw console.error(`        \u274C Editor not found for component: ${t}`),console.log("        \u{1F4CB} Component registry:",o),new Error(`Editor not found for component: ${t}`);console.log(`        \u26A1 Instantiating editor class for ${t}`);let s=new o.editor(e,i),r=this.registerInstance(t,"editor",s,e);return console.log(`        \u2705 Editor instance created with ID: ${r}`),s}createClient(t,e,i={}){console.log(`        \u{1F5A5}\uFE0F [JSUISDKManager] Creating client for ${t}`);let o=this.getComponent(t);if(!o||!o.client)throw console.error(`        \u274C Client not found for component: ${t}`),console.log("        \u{1F4CB} Component registry:",o),new Error(`Client not found for component: ${t}`);console.log(`        \u26A1 Instantiating client class for ${t}`);let s=new o.client(e,i),r=this.registerInstance(t,"client",s,e);return console.log(`        \u2705 Client instance created with ID: ${r}`),s}initializeFromElement(t,e="client"){let i=t.getAttribute("data-js-ui-component"),o=t.getAttribute("data-js-ui-metadata"),s=t.getAttribute("data-js-ui-editor-class"),r=t.getAttribute("data-js-ui-client-class");if(console.log("      \u{1F50D} [JSUISDKManager] Initializing from element:",{componentName:i,mode:e,editorClass:s,clientClass:r,hasMetadata:!!o,elementId:t.id,tagName:t.tagName.toLowerCase()}),!i)return console.warn("      \u26A0\uFE0F Element missing data-js-ui-component attribute"),null;if(!this.getComponent(i))return console.error(`      \u274C Component '${i}' not found in registry`),console.log("      \u{1F4CB} Available components:",Object.keys(this.components)),null;try{let l=o?JSON.parse(o):{};if(console.log("      \u2699\uFE0F Component options:",l),e==="editor"){console.log(`      \u{1F3A8} Creating editor instance for ${i}`);let a=this.createEditor(i,t,l);return console.log("      \u2705 Editor instance created:",!!a),a}else{console.log(`      \u{1F5A5}\uFE0F Creating client instance for ${i}`);let a=this.createClient(i,t,l);return console.log("      \u2705 Client instance created:",!!a),a}}catch(l){return console.error(`      \u274C Failed to initialize ${i}:`,l),null}}autoInitializeAll(t="client",e="[data-js-ui-component]"){console.log(`\u{1F3A8} [JSUISDKManager] Starting auto-initialization in ${t} mode with selector: ${e}`);let i=document.querySelectorAll(e);console.log(`\u{1F50D} [JSUISDKManager] Found ${i.length} elements matching selector`);let o=[];return i.forEach((s,r)=>{let n=s.getAttribute("data-js-ui-component"),l=s.id||`unnamed-${r}`;if(console.log(`   \u{1F50D} Element ${r+1}: ${n} (id: ${l})`),s.hasAttribute("data-js-ui-initialized")){console.log(`   \u23ED\uFE0F  Skipping ${n} - already initialized`);return}s.id||(s.id=`js-ui-${n}-${Date.now()}-${r}`,console.log(`   \u{1F194} Generated ID for ${n}: ${s.id}`)),console.log(`   \u{1F680} Initializing ${n} in ${t} mode...`);let a=this.initializeFromElement(s,t);a?(s.setAttribute("data-js-ui-initialized","true"),s.setAttribute("data-js-ui-mode",t),o.push({element:s,instance:a,componentName:s.getAttribute("data-js-ui-component"),id:s.id}),console.log(`   \u2705 Successfully initialized ${n} (id: ${s.id})`)):console.log(`   \u274C Failed to initialize ${n}`)}),console.log(`\u{1F389} [JSUISDKManager] Auto-initialization complete: ${o.length}/${i.length} components initialized in ${t} mode`),o.length>0&&console.log("\u{1F4CB} [JSUISDKManager] Initialized components:",o.map(s=>({component:s.componentName,id:s.id,mode:t,element:s.element.tagName.toLowerCase()}))),o}initializeComponent(t,e,i={},o="client"){let s=typeof e=="string"?document.querySelector(e):e;if(!s)throw new Error(`Container not found: ${e}`);return s.id||(s.id=`js-ui-${t}-${Date.now()}`),s.hasAttribute("data-js-ui-component")||(s.setAttribute("data-js-ui-component",t),s.setAttribute("data-js-ui-multi-instance","true"),s.classList.add("js-ui-component",`js-ui-${t}`)),o==="editor"?this.createEditor(t,s,i):this.createClient(t,s,i)}getInstances(t=null){return t?Array.from(this.instances.values()).filter(e=>e.componentName===t):Array.from(this.instances.values())}destroyInstance(t){let e=this.instances.get(t);return e?(e.instance.destroy&&e.instance.destroy(),e.container&&(e.container.removeAttribute("data-js-ui-initialized"),e.container.removeAttribute("data-js-ui-mode")),this.instances.delete(t),!0):!1}destroyAllInstances(t=null){let e=t?this.getInstances(t):Array.from(this.instances.values()),i=0;return e.forEach(o=>{this.destroyInstance(o.id)&&i++}),i}registerInstance(t,e,i,o){let s=`${t}-${e}-${++this.instanceCounter}`;return this.instances.set(s,{id:s,componentName:t,mode:e,instance:i,container:o,createdAt:new Date}),s}getComponentsByCategory(t){return Object.entries(this.components).filter(([e,i])=>i.category===t).map(([e,i])=>({name:e,...i}))}searchComponents(t){let e=t.toLowerCase();return Object.entries(this.components).filter(([i,o])=>i.toLowerCase().includes(e)||o.name.toLowerCase().includes(e)||o.description.toLowerCase().includes(e)).map(([i,o])=>({name:i,...o}))}},y=h,b="1.0.24",x="2025-09-19T13:28:19.136Z",C=1;export{g as COMPONENT_REGISTRY,h as JSUISDKManager,x as SDK_BUILD_DATE,C as SDK_COMPONENTS_COUNT,b as SDK_VERSION,c as SimpleCarouselClient,d as SimpleCarouselEditor,y as default};
//# sourceMappingURL=index.esm.js.map