@cesdk/engine 1.72.2 → 1.72.3-rc.0

package/plugins/index.js

@@ -0,0 +1 @@
+import CreativeEditorSDK from"@cesdk/cesdk-js";var e=class{constructor(e={}){this.config=e}name="cesdk-blur-asset-source";version=CreativeEditorSDK.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.blur":["ly.img.blur"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.blur";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import s from"@cesdk/cesdk-js";var t="ly.img.caption.presets",r=["backgroundColor/enabled","backgroundColor/color","backgroundColor/cornerRadius","backgroundColor/paddingBottom","backgroundColor/paddingLeft","backgroundColor/paddingRight","backgroundColor/paddingTop","blend/mode","dropShadow/enabled","dropShadow/color","dropShadow/offset/x","dropShadow/offset/y","dropShadow/blurRadius/x","dropShadow/blurRadius/y","dropShadow/clip","fill/enabled","fill/solid/color","opacity","stroke/enabled","stroke/color","stroke/width","stroke/style","stroke/position","stroke/cornerGeometry","{{blockType}}/typeface","{{blockType}}/fontSize","{{blockType}}/horizontalAlignment","{{blockType}}/verticalAlignment","{{blockType}}/letterSpacing","{{blockType}}/lineHeight","{{blockType}}/automaticFontSizeEnabled","{{blockType}}/maxAutomaticFontSize","{{blockType}}/minAutomaticFontSize","{{blockType}}/paragraphSpacing"];function i(e){const s=e.scene.getCurrentPage();if(null!=s)return e.block.getChildren(s).find((s=>"//ly.img.ubq/captionTrack"===e.block.getType(s)))}function o(e){const s=i(e);if(null==s)return 1;try{const t=e.block.getMetadata(s,"previousScale"),r=parseFloat(t);return Number.isNaN(r)?1:r}catch(e){return 1}}function n(e,s,t){const r=o(e),n=e.block.getTextFontSizes(s)[0]/r,a=Math.round(n*t);if(e.block.setTextFontSize(s,a),e.block.isStrokeEnabled(s)){const i=e.block.getStrokeWidth(s)/r*t;e.block.setStrokeWidth(s,i)}if(e.block.isDropShadowEnabled(s)){const i=e.block.getDropShadowOffsetX(s)/r,o=e.block.getDropShadowOffsetY(s)/r,n=e.block.getDropShadowBlurRadiusX(s)/r,a=e.block.getDropShadowBlurRadiusY(s)/r;e.block.setDropShadowOffsetX(s,i*t),e.block.setDropShadowOffsetY(s,o*t),e.block.setDropShadowBlurRadiusX(s,n*t),e.block.setDropShadowBlurRadiusY(s,a*t)}!function(e,s){const t=i(e);null!=t&&e.block.setMetadata(t,"previousScale",s.toString())}(e,t)}var a=class{engine;assets=[];customFetchImpl;baseURL;constructor(e,s,t){this.engine=e,this.baseURL=s,this.customFetchImpl=t??window.fetch.bind(window)}async initialize(){await this.fetchAssets(),this.createSource()}async fetchAssets(){const e=function(...e){return e.map(((e,s)=>0===s?e.replace(/\/$/,""):e.replace(/^\//,"").replace(/\/$/,""))).join("/")}(this.baseURL,`/${t}/content.json`);try{const s=await this.customFetchImpl(e);if(!s.ok)throw new Error(s.statusText);const r=await s.json();if(void 0===r.assets)throw new Error(`Invalid content.json for assets: ${t}`);this.assets=r.assets.map((e=>(e.meta&&Object.entries(e.meta).forEach((([s,t])=>{const r=t.toString();if(r.includes("{{base_url}}")){const t=r.replace("{{base_url}}",this.baseURL).replace(/([^:])\/\/+/g,"$1/");e.meta&&(e.meta[s]=t)}})),e)))}catch(e){console.warn("Could not load caption presets:",e),this.assets=[]}}createSource(){if(new Set(this.engine.asset.findAllSources()).has(t))return;const e={id:t,findAssets:e=>{const{page:s,perPage:r,excludeGroups:n,groups:a,locale:c="en",query:d,sortActiveFirst:l,sortKey:u,sortingOrder:g,tags:h}=e,f=i(this.engine),p=null!=f&&this.engine.block.hasMetadata(f,"activePreset")?this.engine.block.getMetadata(f,"activePreset"):void 0;let y=[...this.assets];if(a&&a.length>0&&(y=y.filter((e=>e.groups?.some((e=>a.includes(e)))))),d&&""!==d.trim()){const e=d.toLowerCase().trim();y=y.filter((s=>(s.label?.[c]?.toLowerCase()||"").includes(e)))}h&&h.length>0&&(y=y.filter((e=>(e.tags?.[c]??[]).some((e=>h.includes(e)))))),n&&n.length>0&&(y=y.filter((e=>!(e.groups??[]).some((e=>n.includes(e)))))),"label"===u&&"None"!==g&&y.sort(((e,s)=>{const t=e.label?.[c]?.toLocaleLowerCase()||"",r=s.label?.[c]?.toLocaleLowerCase()||"";return t<r?"Ascending"===g?-1:1:t>r?"Ascending"===g?1:-1:0})),l&&p&&y.sort(((e,s)=>e.id===p?-1:s.id===p?1:0));const b=y.length,m=s*r,k=m+r,A=y.slice(m,k).map((e=>{const s=e.payload?.properties?.map((e=>"caption/scale"===e.property?{...e,value:o(this.engine)}:e));return{id:e.id,label:e.label?.[c],active:e.id===p,context:{id:t},meta:e.meta,groups:e.groups,tags:e.tags?.[c],payload:{...e.payload,properties:s},locale:c}}));return Promise.resolve({assets:A,total:b,currentPage:s})},getGroups:()=>{const e=new Set;return this.assets.forEach((s=>{s.groups&&s.groups.forEach((s=>{e.add(s)}))})),Promise.resolve(Array.from(e))},removeAsset:e=>{const s=this.assets.findIndex((s=>s.id===e));-1!==s&&this.assets.splice(s,1)},addAsset:e=>{const s=this.assets.findIndex((s=>s.id===e.id));-1!==s?this.assets[s]=e:this.assets.push(e)},applyAssetToBlock:(e,s)=>this.applyPreset(e,s),applyAssetProperty:(e,s)=>this.applyProperty(e,s),fetchAsset:async(e,s)=>new Promise((t=>{const r=this.assets.find((s=>s.id===e));if(null==r)t(null);else{const e=s?.locale??"en",n=i(this.engine),a=null!=n&&this.engine.block.hasMetadata(n,"activePreset")?this.engine.block.getMetadata(n,"activePreset"):void 0,c=r.payload?.properties?.map((e=>"caption/scale"===e.property?{...e,value:o(this.engine)}:e));t({id:r.id,label:r.label?.[e],active:r.id===a,meta:r.meta,groups:r.groups,tags:r.tags?.[e],payload:{...r.payload,properties:c}})}}))};this.engine.asset.addSource(e)}async applyPreset(e,s){const o=e?.meta?.uri;if(null==o)throw new Error(`The asset ${e.id} does not have a preset block URL.`);const n=await this.customFetchImpl(o);if(!n.ok)throw new Error(`Failed to fetch the preset block from ${o}`);const a=await n.text(),[c]=await this.engine.block.loadFromString(a),d=null!=c?this.engine.block.getType(c):void 0;if("//ly.img.ubq/text"!==d&&"//ly.img.ubq/caption"!==d)return;const l=i(this.engine),u=null!=l?this.engine.block.getChildren(l):[];r.forEach((e=>{const t=e.replace("{{blockType}}","//ly.img.ubq/text"===d?"text":"caption"),r=this.engine.block.getPropertyType(t),i=e.replace("{{blockType}}","caption");switch(r){case"Int":{const e=this.engine.block.getInt(c,t);this.engine.block.setInt(s,i,e);break}case"Float":{const e=this.engine.block.getFloat(c,t);this.engine.block.setFloat(s,i,e);break}case"Double":{const e=this.engine.block.getDouble(c,t);this.engine.block.setDouble(s,i,e);break}case"Bool":{const e=this.engine.block.getBool(c,t);this.engine.block.setBool(s,i,e);break}case"Enum":{if("stroke/position"===t)break;const e=this.engine.block.getEnum(c,t);this.engine.block.setEnum(s,i,e);break}case"Color":{if("fill/solid/color"===t){const[e]=this.engine.block.getTextColors(c);this.engine.block.setColor(s,i,e),"Text"===this.engine.editor.getEditMode()&&this.engine.editor.setEditMode("Transform"),this.engine.block.setTextColor(s,e);break}const e=this.engine.block.getColor(c,t);this.engine.block.setColor(s,i,e);break}case"String":{if("text/typeface"===t||"caption/typeface"===t){const e=this.engine.block.getTypeface(c);this.engine.block.setTypeface(s,e);break}const e=this.engine.block.getString(c,t);this.engine.block.setString(s,i,e);break}}})),e.payload?.properties?.forEach((async s=>{"Color"===s.type&&await this.applyProperty(e,s)}));const[g]=this.engine.block.getTextFontWeights(c);null!=g&&this.engine.block.setTextFontWeight(s,g);const[h]=this.engine.block.getTextFontStyles(c);null!=h&&this.engine.block.setTextFontStyle(s,h),function(e,s,t){const r={in:e.block.getInAnimation(s),loop:e.block.getLoopAnimation(s),out:e.block.getOutAnimation(s)},i=(s,t)=>{const i=r[t],o=(()=>{switch(t){case"in":return e.block.getInAnimation(s);case"loop":return e.block.getLoopAnimation(s);case"out":return e.block.getOutAnimation(s);default:return}})();if(null!=o&&e.block.isValid(o)&&e.block.destroy(o),e.block.isValid(i)){const r=e.block.duplicate(i);switch(t){case"in":e.block.setInAnimation(s,r);break;case"loop":e.block.setLoopAnimation(s,r);break;case"out":e.block.setOutAnimation(s,r)}}};t.forEach((e=>{i(e,"in"),i(e,"loop"),i(e,"out")}))}(this.engine,c,u),null!=l&&this.engine.block.setMetadata(l,"activePreset",e.id),this.engine.block.destroy(c),this.engine.editor.addUndoStep(),this.engine.asset.assetSourceContentsChanged(t)}async applyProperty(e,s){const r=i(this.engine);if(null==r)return;const[o]=this.engine.block.findAllSelected(),a="//ly.img.ubq/caption"===(null!=o?this.engine.block.getType(o):void 0)?o:this.engine.block.getChildren(r)[0];if(null!=a){switch(s.type){case"Color":if("fill/solid/color"===s.property){this.engine.block.setColor(a,s.property,s.value),this.engine.block.setTextColor(a,s.value);break}this.engine.block.setColor(a,s.property,s.value);break;case"Int":this.engine.block.setInt(a,s.property,s.value);break;case"Float":if("caption/scale"===s.property){n(this.engine,a,s.value);break}this.engine.block.setFloat(a,s.property,s.value);break;case"Double":this.engine.block.setDouble(a,s.property,s.value);break;case"Boolean":this.engine.block.setBool(a,s.property,s.value);break;case"Enum":this.engine.block.setEnum(a,s.property,s.value);break;case"String":this.engine.block.setString(a,s.property,s.value)}this.assets=function(e,s,t){return e.map((e=>{if("caption/scale"===t.property){const s=e.payload?.properties?.map((e=>"caption/scale"===e.property?{...e,value:t.value}:e));return{...e,payload:{...e.payload,properties:s}}}if(e.id===s.id){const s=e.payload?.properties?.map((e=>e.property===t.property?{...e,value:t.value}:e));return{...e,payload:{...e.payload,properties:s}}}return e}))}(this.assets,e,s),this.engine.asset.assetSourceContentsChanged(t)}}},c=class{constructor(e={}){this.config=e}name="cesdk-caption-presets-asset-source";version=s.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.caption.presets":["ly.img.library.captionPresets"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new a(e,r,this.config.customFetchImpl);await i.initialize();const o="ly.img.caption.presets";if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}},d=class{constructor(e={}){this.config=e}name="cesdk-color-palette-asset-source";version="1.61";addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.color.palette":["ly.img.colors"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.color.palette";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import l from"@cesdk/cesdk-js";var u=class{constructor(e={}){this.config=e}name="cesdk-crop-presets-asset-source";version=l.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.crop.presets":["ly.img.cropPresets"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.crop.presets";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import g from"@cesdk/cesdk-js";var h=class{constructor(e={}){this.config=e}name="cesdk-demo-asset-sources";version=g.version;addedAssetSourceIds=[];globToRegex(e){const s=e.replace(/[.+^${}()|[\]\\]/g,"\\$&").replace(/\*/g,".*").replace(/\?/g,".");return new RegExp(`^${s}$`,"i")}sourceMatchesAnyPattern(e,s){return s.some((s=>{if(s===e||s.startsWith(`${e}.`))return!0;return this.globToRegex(s).test(e)}))}filterAssetSources(e,s){return e.filter((e=>this.sourceMatchesAnyPattern(e,s)))}filterMatchersForSource(e,s){return s.filter((s=>{if(s===e||s.startsWith(`${e}.`))return!0;return this.globToRegex(s).test(e)}))}getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.image":["ly.img.image"],"ly.img.video":["ly.img.video"],"ly.img.audio":["ly.img.audio"],"ly.img.templates":["ly.img.templates"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o=["ly.img.audio","ly.img.video","ly.img.image","ly.img.templates"],n=this.config.include?this.filterAssetSources(o,this.config.include):o;for(const s of n)if(!i.has(s)){const t=`${r}${s}/content.json`,i=this.config.include?this.filterMatchersForSource(s,this.config.include):void 0;await e.asset.addLocalAssetSourceFromJSONURI(t,{matcher:i}),this.addedAssetSourceIds.push(s)}if(s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));for(const e of this.addedAssetSourceIds){const t=this.getAssetLibraryEntries(e);for(const r of t)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:s})=>[...new Set([...s,e])]})}}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import f from"@cesdk/cesdk-js";var p=class{constructor(e={}){this.config=e}name="cesdk-effects-asset-source";version=f.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.effect":["ly.img.effect"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.effect";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import y from"@cesdk/cesdk-js";var b=class{constructor(e={}){this.config=e}name="cesdk-filters-asset-source";version=y.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.filter":["ly.img.filter"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.filter";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import m from"@cesdk/cesdk-js";var k=class{constructor(e={}){this.config=e}name="cesdk-page-presets-asset-source";version=m.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.page.presets":["ly.img.pagePresets"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.page.presets";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import A from"@cesdk/cesdk-js";var S=class{constructor(e={}){this.config=e}name="cesdk-sticker-asset-source";version=A.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.sticker":["ly.img.sticker"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.sticker";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import L from"@cesdk/cesdk-js";var w=class{constructor(e={}){this.config=e}name="cesdk-text-asset-source";version=L.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.text":["ly.img.text"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.text";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import I from"@cesdk/cesdk-js";var E=class{constructor(e={}){this.config=e}name="cesdk-text-component-asset-source";version=I.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.text.components":["ly.img.text"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.text.components";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import v from"@cesdk/cesdk-js";var R=class{constructor(e={}){this.config=e}name="cesdk-typeface-asset-source";version=v.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.typeface":["ly.img.typefaces"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.typeface";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};import U from"@cesdk/cesdk-js";var $=[{id:"ly.img.image.upload",mimeTypes:["image/jpeg","image/png","image/webp","image/svg+xml","image/bmp","image/gif"],assetLibraryEntries:["ly.img.image","ly.img.upload"]},{id:"ly.img.video.upload",mimeTypes:["application/json","video/mp4","video/quicktime","video/webm","video/matroska","image/gif"],assetLibraryEntries:["ly.img.video","ly.img.upload"]},{id:"ly.img.audio.upload",mimeTypes:["audio/mpeg","audio/mp3","audio/x-m4a","audio/wav"],assetLibraryEntries:["ly.img.audio","ly.img.upload"]}],C=class{constructor(e={}){this.config=e}name="cesdk-upload-asset-sources";version=U.version;addedAssetSourceIds=[];addedLibraryEntryMappings=new Map;isExplicitMode(){return this.config.include?.some((e=>"string"==typeof e))??!1}getExplicitIncludes(){return this.config.include?new Set(this.config.include.filter((e=>"string"==typeof e))):new Set}getCustomizations(){return this.config.include?this.config.include.filter((e=>"object"==typeof e)):[]}getAssetLibraryEntries(e){return e?Array.isArray(e)?e:[e]:[]}async initialize({engine:e,cesdk:s}){const t=new Set(e.asset.findAllSources()),r=this.isExplicitMode(),i=this.getExplicitIncludes(),o=this.getCustomizations(),n=new Map;if(r)for(const e of $)i.has(e.id)&&n.set(e.id,e);else for(const e of $)n.set(e.id,e);for(const e of o){const s=n.get(e.id);s?n.set(e.id,{...s,...e}):n.set(e.id,e)}const a=Array.from(n.values());for(const r of a){const{id:i,mimeTypes:o,assetLibraryEntries:n}=r;if(!t.has(i)&&(e.asset.addLocalSource(i,o),this.addedAssetSourceIds.push(i),s)){const e=this.getAssetLibraryEntries(n);this.addedLibraryEntryMappings.set(i,e);for(const t of e)s.ui.updateAssetLibraryEntry(t,{sourceIds:({currentIds:e})=>[...new Set([...e,i])]})}}s&&s.onReset((()=>this.cleanup({engine:e,cesdk:s})))}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.addedLibraryEntryMappings.get(t)??[];for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[],this.addedLibraryEntryMappings.clear()}};import x from"@cesdk/cesdk-js";var T=class{constructor(e={}){this.config=e}name="cesdk-vectorshape-asset-source";version=x.version;addedAssetSourceIds=[];getAssetLibraryEntries(e){if(this.config.assetLibraryEntries?.[e]){const s=this.config.assetLibraryEntries[e];return Array.isArray(s)?s:[s]}return{"ly.img.vector.shape":["ly.img.vector.shape","ly.img.shape.replace"]}[e]||[]}async initialize({engine:e,cesdk:s}){const t=this.config.baseURL||s?.getBaseURL()||e.editor.getSetting("basePath");if(!t)throw new Error("Cannot determine baseURL");const r=t.replace(/\/*$/,"/"),i=new Set(e.asset.findAllSources()),o="ly.img.vector.shape";if(!i.has(o)){const s=`${r}${o}/content.json`;await e.asset.addLocalAssetSourceFromJSONURI(s,{matcher:this.config.include})}if(this.addedAssetSourceIds.push(o),s){s.onReset((()=>this.cleanup({engine:e,cesdk:s})));const t=this.getAssetLibraryEntries(o);for(const e of t)s.ui.updateAssetLibraryEntry(e,{sourceIds:({currentIds:e})=>[...new Set([...e,o])]})}}cleanup({engine:e,cesdk:s}){for(const t of this.addedAssetSourceIds){if(s){const e=this.getAssetLibraryEntries(t);for(const r of e)s.ui.updateAssetLibraryEntry(r,{sourceIds:({currentIds:e})=>e.filter((e=>e!==t))})}try{e.asset.removeSource(t)}catch(e){console.warn("Unable to remove source with id: ",t)}}this.addedAssetSourceIds=[]}};export{e as BlurAssetSource,c as CaptionPresetsAssetSource,d as ColorPaletteAssetSource,u as CropPresetsAssetSource,h as DemoAssetSources,p as EffectsAssetSource,b as FiltersAssetSource,k as PagePresetsAssetSource,S as StickerAssetSource,w as TextAssetSource,E as TextComponentAssetSource,R as TypefaceAssetSource,C as UploadAssetSources,T as VectorShapeAssetSource};

package/react/index.d.ts

@@ -0,0 +1,151 @@
+/// <reference types="react" />
+
+import type { Configuration } from '@cesdk/cesdk-js';
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+/**
+ * A production-ready React wrapper for the Creative Editor SDK.
+ *
+ * Provides a React component with proper error handling, loading state callbacks,
+ * and lifecycle management for integrating the Creative Editor SDK. The component
+ * handles SDK initialization and cleanup.
+ *
+ * @example Basic Usage
+ * ```tsx
+ * import CreativeEditor from '@cesdk/cesdk-js/react';
+ * import {
+ *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
+ *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
+ *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
+ *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
+ *   VectorShapeAssetSource
+ * } from '@cesdk/cesdk-js/plugins';
+ *
+ * function MyApp() {
+ *   return (
+ *     <CreativeEditor
+ *       config={{
+ *         licenseKey: 'your-license-key',
+ *         baseURL: 'https://your-cdn-url/assets',
+ *       }}
+ *       init={async (cesdk) => {
+ *         await cesdk.addPlugin(new ColorPaletteAssetSource());
+ *         await cesdk.addPlugin(new TypefaceAssetSource());
+ *         await cesdk.addPlugin(new TextAssetSource());
+ *         await cesdk.addPlugin(new TextComponentAssetSource());
+ *         await cesdk.addPlugin(new VectorShapeAssetSource());
+ *         await cesdk.addPlugin(new StickerAssetSource());
+ *         await cesdk.addPlugin(new EffectsAssetSource());
+ *         await cesdk.addPlugin(new FiltersAssetSource());
+ *         await cesdk.addPlugin(new BlurAssetSource());
+ *         await cesdk.addPlugin(new PagePresetsAssetSource());
+ *         await cesdk.addPlugin(new CropPresetsAssetSource());
+ *         await cesdk.addPlugin(new UploadAssetSources());
+ *         await cesdk.addPlugin(new DemoAssetSources());
+ *         await cesdk.actions.run('scene.create');
+ *       }}
+ *       width="100vw"
+ *       height="100vh"
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @example With Error Handling
+ * ```tsx
+ * import CreativeEditor from '@cesdk/cesdk-js/react';
+ * import {
+ *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
+ *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
+ *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
+ *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
+ *   VectorShapeAssetSource
+ * } from '@cesdk/cesdk-js/plugins';
+ *
+ * function MyApp() {
+ *   return (
+ *     <CreativeEditor
+ *       config={{
+ *         licenseKey: 'your-license-key',
+ *         baseURL: 'https://your-cdn-url/assets',
+ *       }}
+ *       init={async (cesdk) => {
+ *         await cesdk.addPlugin(new ColorPaletteAssetSource());
+ *         await cesdk.addPlugin(new TypefaceAssetSource());
+ *         await cesdk.addPlugin(new TextAssetSource());
+ *         await cesdk.addPlugin(new TextComponentAssetSource());
+ *         await cesdk.addPlugin(new VectorShapeAssetSource());
+ *         await cesdk.addPlugin(new StickerAssetSource());
+ *         await cesdk.addPlugin(new EffectsAssetSource());
+ *         await cesdk.addPlugin(new FiltersAssetSource());
+ *         await cesdk.addPlugin(new BlurAssetSource());
+ *         await cesdk.addPlugin(new PagePresetsAssetSource());
+ *         await cesdk.addPlugin(new CropPresetsAssetSource());
+ *         await cesdk.addPlugin(new UploadAssetSources());
+ *         await cesdk.addPlugin(new DemoAssetSources());
+ *         await cesdk.actions.run('scene.create');
+ *       }}
+ *       onError={(error) => {
+ *         console.error('SDK initialization failed:', error);
+ *         // Handle error (e.g., show notification, retry logic)
+ *       }}
+ *       onLoadingStateChange={(state) => {
+ *         console.log('Loading state changed:', state);
+ *       }}
+ *       width="100vw"
+ *       height="100vh"
+ *     />
+ *   );
+ * }
+ * ```
+ * @remarks
+ * - The component automatically handles SDK cleanup on unmount
+ * - For render-time errors, we recommend using a React Error Boundary
+ * @category Framework Wrapper
+ * @public
+ */
+declare const CreativeEditor: ForwardRefExoticComponent<CreativeEditorProps & RefAttributes<HTMLDivElement>>;
+export { CreativeEditor }
+export default CreativeEditor;
+
+/**
+ * Error that occurred during Creative Editor SDK initialization.
+ * @public
+ */
+export declare interface CreativeEditorError {
+    /** The error message */
+    message: string;
+    /** The original error object */
+    cause?: unknown;
+}
+
+/**
+ * Loading state of the Creative Editor SDK.
+ * @public
+ */
+export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';
+
+/**
+ * Props for the CreativeEditor React component.
+ * @public
+ */
+export declare interface CreativeEditorProps {
+    /** Configuration object for the Creative Editor SDK */
+    config: Configuration;
+    /** Initialization function called after SDK instance is created */
+    init?: (cesdk: CreativeEditorSDK) => void | Promise<void>;
+    /** Height of the editor container */
+    height?: number | string;
+    /** Width of the editor container */
+    width?: number | string;
+    /** CSS class name for the container element */
+    className?: string;
+    /** Callback fired when loading state changes */
+    onLoadingStateChange?: (state: CreativeEditorLoadingState) => void;
+    /** Callback fired when an error occurs */
+    onError?: (error: CreativeEditorError) => void;
+}
+
+export { }

package/react/index.js

@@ -0,0 +1 @@
+import{createElement as t,forwardRef as r,useCallback as e,useEffect as n,useMemo as i,useRef as a}from"react";function o(...t){return r=>{for(const e of t)"function"==typeof e?e(r):null!=e&&(e.current=r)}}function c(t){const r=a(t);return n((()=>{r.current=t})),i((()=>(...t)=>r.current?.(...t)),[])}var u=r((function({config:r,init:u,height:d="100%",width:l="100%",className:s,onLoadingStateChange:f,onError:h},p){const v=a(null),y=a(null),g=a("idle"),m=c(h),w=c(f),E=a(r).current,C=i((()=>({height:d,width:l})),[d,l]),b=e((t=>{g.current=t,w?.(t)}),[w]),j=e(((t,r)=>{const e={message:t,cause:r};b("error"),m?.(e)}),[m,b]),N=e((()=>{if(y.current)try{y.current.dispose()}catch(t){j("Error during CreativeEditor cleanup",t)}finally{y.current=null,b("idle")}}),[j,b]),k=e((t=>{if(!t||"object"!=typeof t)throw new Error("Configuration must be a valid object")}),[]),I=e((t=>{if(!t||"function"!=typeof t)throw new Error("Init must be a valid function")}),[]);return n((()=>{let t=!0;return(async()=>{const r=v.current;if(r&&"idle"===g.current&&!y.current)try{b("loading"),k(E),I(u);const CreativeEditorSDK=(await import("@cesdk/cesdk-js")).default,e=await CreativeEditorSDK.create(r,E);if(!t)return void e.dispose();y.current=e,b("loaded");try{await(u?.(e))}catch(t){j("Initialization function failed",t)}}catch(r){if(!t)return;j("Failed to create Creative Editor SDK instance",r)}})(),()=>{t=!1,b("idle"),N()}}),[u,k,I,b,j,N,E]),t("div",{ref:o(v,p),style:C,className:s,"data-testid":"creative-editor-container"})}));u.displayName="CreativeEditor";var d=u;export{u as CreativeEditor,d as default};

package/vue/index.d.ts

@@ -0,0 +1,198 @@
+import type { Configuration } from '@cesdk/cesdk-js';
+import type CreativeEditorSDK from '@cesdk/cesdk-js';
+import { DefineComponent } from 'vue';
+import { PropType } from 'vue';
+
+/**
+ * A production-ready Vue 3 wrapper for the Creative Editor SDK.
+ *
+ * Provides a Vue component with proper error handling, loading state events,
+ * and lifecycle management for integrating the Creative Editor SDK. The component
+ * handles SDK initialization and cleanup using Vue's Composition API.
+ *
+ * @example Basic Usage
+ * ```vue
+ * <template>
+ *   <CreativeEditor
+ *     :config="{
+ *       licenseKey: 'your-license-key',
+ *       baseURL: 'https://your-cdn-url/assets',
+ *     }"
+ *     :init="initEditor"
+ *     width="100vw"
+ *     height="100vh"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import CreativeEditor from '@cesdk/cesdk-js/vue';
+ * import {
+ *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
+ *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
+ *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
+ *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
+ *   VectorShapeAssetSource
+ * } from '@cesdk/cesdk-js/plugins';
+ *
+ * const initEditor = async (cesdk) => {
+ *   await cesdk.addPlugin(new ColorPaletteAssetSource());
+ *   await cesdk.addPlugin(new TypefaceAssetSource());
+ *   await cesdk.addPlugin(new TextAssetSource());
+ *   await cesdk.addPlugin(new TextComponentAssetSource());
+ *   await cesdk.addPlugin(new VectorShapeAssetSource());
+ *   await cesdk.addPlugin(new StickerAssetSource());
+ *   await cesdk.addPlugin(new EffectsAssetSource());
+ *   await cesdk.addPlugin(new FiltersAssetSource());
+ *   await cesdk.addPlugin(new BlurAssetSource());
+ *   await cesdk.addPlugin(new PagePresetsAssetSource());
+ *   await cesdk.addPlugin(new CropPresetsAssetSource());
+ *   await cesdk.addPlugin(new UploadAssetSources());
+ *   await cesdk.addPlugin(new DemoAssetSources());
+ *   await cesdk.actions.run('scene.create');
+ * };
+ * </script>
+ * ```
+ *
+ * @example With Error Handling
+ * ```vue
+ * <template>
+ *   <CreativeEditor
+ *     :config="{
+ *       licenseKey: 'your-license-key',
+ *       baseURL: 'https://your-cdn-url/assets',
+ *     }"
+ *     :init="initEditor"
+ *     @loading-state-change="onLoadingStateChange"
+ *     @error="onError"
+ *     width="100vw"
+ *     height="100vh"
+ *   />
+ * </template>
+ *
+ * <script setup lang="ts">
+ * import CreativeEditor, {
+ *   type CreativeEditorError,
+ *   type CreativeEditorLoadingState
+ * } from '@cesdk/cesdk-js/vue';
+ * import {
+ *   BlurAssetSource, ColorPaletteAssetSource, CropPresetsAssetSource,
+ *   DemoAssetSources, EffectsAssetSource, FiltersAssetSource,
+ *   PagePresetsAssetSource, StickerAssetSource, TextAssetSource,
+ *   TextComponentAssetSource, TypefaceAssetSource, UploadAssetSources,
+ *   VectorShapeAssetSource
+ * } from '@cesdk/cesdk-js/plugins';
+ *
+ * const initEditor = async (cesdk) => {
+ *   await cesdk.addPlugin(new ColorPaletteAssetSource());
+ *   await cesdk.addPlugin(new TypefaceAssetSource());
+ *   await cesdk.addPlugin(new TextAssetSource());
+ *   await cesdk.addPlugin(new TextComponentAssetSource());
+ *   await cesdk.addPlugin(new VectorShapeAssetSource());
+ *   await cesdk.addPlugin(new StickerAssetSource());
+ *   await cesdk.addPlugin(new EffectsAssetSource());
+ *   await cesdk.addPlugin(new FiltersAssetSource());
+ *   await cesdk.addPlugin(new BlurAssetSource());
+ *   await cesdk.addPlugin(new PagePresetsAssetSource());
+ *   await cesdk.addPlugin(new CropPresetsAssetSource());
+ *   await cesdk.addPlugin(new UploadAssetSources());
+ *   await cesdk.addPlugin(new DemoAssetSources());
+ *   await cesdk.actions.run('scene.create');
+ * };
+ *
+ * const onError = (error: CreativeEditorError) => {
+ *   console.error('SDK initialization failed:', error);
+ *   // Handle error (e.g., show notification, retry logic)
+ * };
+ *
+ * const onLoadingStateChange = (state: CreativeEditorLoadingState) => {
+ *   console.log('Loading state changed:', state);
+ * };
+ * </script>
+ * ```
+ *
+ * @remarks
+ * - The component automatically handles SDK cleanup on unmount
+ * - Uses Vue 3 Composition API for optimal performance and TypeScript support
+ * - For render-time errors, we recommend using Vue's error handling mechanisms
+ * @category Framework Wrapper
+ * @public
+ */
+declare const CreativeEditor: CreativeEditorComponent;
+export { CreativeEditor }
+export default CreativeEditor;
+
+/**
+ * Component type for the CreativeEditor Vue component.
+ * @public
+ * */
+export declare type CreativeEditorComponent = DefineComponent<{
+    config: {
+        type: PropType<Configuration>;
+        required: true;
+    };
+    init: {
+        type: PropType<(cesdk: CreativeEditorSDK) => void | Promise<void>>;
+    };
+    height: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    width: {
+        type: PropType<string | number>;
+        default: string;
+    };
+    class: {
+        type: StringConstructor;
+        default: undefined;
+    };
+}, {}, {}, {}, {}, {}, {}, {
+    'loading-state-change': (state: CreativeEditorLoadingState) => void;
+    error: (error: CreativeEditorError) => void;
+}>;
+
+/**
+ * Emits for the CreativeEditor Vue component.
+ * @public
+ */
+export declare type CreativeEditorEmits = {
+    /** Emitted when loading state changes */
+    'loading-state-change': (state: CreativeEditorLoadingState) => void;
+    /** Emitted when an error occurs */
+    error: (error: CreativeEditorError) => void;
+};
+
+/**
+ * Error that occurred during Creative Editor SDK initialization.
+ * @public
+ */
+export declare interface CreativeEditorError {
+    /** The error message */
+    message: string;
+    /** The original error object */
+    cause?: unknown;
+}
+
+/**
+ * Loading state of the Creative Editor SDK.
+ * @public
+ */
+export declare type CreativeEditorLoadingState = 'idle' | 'loading' | 'loaded' | 'error';
+
+/**
+ * Props for the CreativeEditor Vue component.
+ * @public
+ */
+export declare interface CreativeEditorProps {
+    /** Configuration object for the Creative Editor SDK */
+    config: Configuration;
+    /** Initialization function called after SDK instance is created */
+    init: (cesdk: CreativeEditorSDK) => void | Promise<void>;
+    /** Height of the editor container */
+    height?: number | string;
+    /** Width of the editor container */
+    width?: number | string;
+    /** CSS class name for the container element */
+    class?: string;
+}
+
+export { }

package/vue/index.js

@@ -0,0 +1 @@
+import{defineComponent as e,h as t,onBeforeUnmount as i,onMounted as a,ref as r,shallowRef as n,watch as o}from"vue";var l=e({name:"CreativeEditor",props:{config:{type:Object,required:!0},init:{type:Function,required:!0},height:{type:[Number,String],default:"100%"},width:{type:[Number,String],default:"100%"},class:{type:String,default:void 0}},emits:{"loading-state-change":e=>["idle","loading","loaded","error"].includes(e),error:e=>e&&"object"==typeof e&&"string"==typeof e.message},setup(e,{emit:l,expose:d,attrs:c}){const s=r(null),u=n(null),g=r("idle");let f=0,p=!1;const v=(e,t)=>{const i={message:e,cause:t};g.value="error",l("loading-state-change","error"),l("error",i)},h=()=>{if(u.value)try{u.value.dispose()}catch(e){p&&v("Error during CreativeEditor cleanup",e)}finally{u.value=null}},y=async()=>{const t=++f,i=s.value;if(i)try{g.value="loading",l("loading-state-change","loading"),(e=>{if(!e||"object"!=typeof e)throw new Error("Configuration must be a valid object")})(e.config),(e=>{if(!e||"function"!=typeof e)throw new Error("Init must be a valid function")})(e.init);const CreativeEditorSDK=(await import("@cesdk/cesdk-js")).default,a=await CreativeEditorSDK.create(i,e.config);if(t!==f||!p){try{a.dispose()}catch{}return}u.value=a,g.value="loaded",l("loading-state-change","loaded");try{await(e.init?.(a))}catch(e){v("Initialization function failed",e)}}catch(e){p&&t===f&&v("Failed to create Creative Editor SDK instance",e)}};return o((()=>e.config),(()=>{s.value&&p&&(h(),y())}),{deep:!0}),o((()=>e.init),(()=>{s.value&&p&&(h(),y())})),a((()=>{p=!0,y()})),i((()=>{p=!1,f++,h()})),d({cesdk:u,loadingState:g,reinitialize:y,dispose:h}),()=>{const i={height:e.height,width:e.width};return t("div",{ref:s,class:e.class,style:i,"data-testid":"creative-editor-container",...c})}}}),d=l;export{l as CreativeEditor,d as default};