@lightspeed/crane 0.0.1-beta.23

package/bin/crane.js

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+// eslint-disable-next-line import/extensions
+import('../dist/cli.mjs');

package/dist/app.d.mts

@@ -0,0 +1,130 @@
+import { App, Ref, Component } from 'vue';
+
+interface AppBaseContext {
+    readonly appName: string;
+    readonly blockName: string;
+    readonly version: string;
+    readonly scriptUrl: string;
+    readonly imageBuckets: Record<string, string>;
+    readonly globalDesign: Record<string, Record<string, unknown>>;
+}
+interface AppBaseData<C, D> {
+    readonly content: C;
+    readonly design: D;
+    readonly defaults: Record<string, unknown>;
+}
+interface AppBaseState<C, D> {
+    readonly context: AppBaseContext;
+    readonly data: AppBaseData<C, D>;
+}
+
+interface VueBaseProps<CONTENT, DESIGN> {
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN) => void;
+    readonly context: Ref<AppBaseContext>;
+    readonly content: Ref<CONTENT>;
+    readonly design: Ref<DESIGN>;
+    readonly defaults: Ref<Record<string, unknown>>;
+}
+declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
+
+declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+};
+
+declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+};
+
+declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: boolean | undefined;
+};
+
+declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: undefined;
+};
+
+declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    font: string | undefined;
+    size: number | GlobalTextSizeString | undefined;
+    bold: boolean | undefined;
+    italic: boolean | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    appearance: ButtonAppearance | undefined;
+    font: string | undefined;
+    size: ButtonSize | undefined;
+    style: ButtonStyle | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    overlay: Overlay | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    enabled: boolean | undefined;
+};
+
+declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    value: string | undefined;
+};
+
+declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    background: Background | undefined;
+};
+
+interface VueServerAppExtensions {
+    init?: (app: App<Element>) => void;
+    render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
+}
+interface VueRenderResult {
+    readonly html: string;
+    readonly state: unknown;
+}
+declare function createVueServerApp<C, D>(appComponent: Component, extensions?: VueServerAppExtensions): {
+    init: () => {
+        render: (context: AppBaseContext, data: AppBaseData<C, D>) => Promise<VueRenderResult>;
+    };
+};
+
+interface VueClientAppExtensions {
+    init?: (app: App<Element>) => void;
+    mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
+    update?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, state: S) => void;
+    unmount?: (app: App<Element>) => void;
+}
+declare function createVueClientApp<C, D>(appComponent: Component, extensions?: VueClientAppExtensions): {
+    init: () => {
+        mount: <S extends AppBaseState<C, D>>(rootContainer: string, state: S) => void;
+        update: <S_1 extends AppBaseState<C, D>>(state: S_1) => void;
+        unmount: () => void;
+    };
+};
+
+export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.d.ts

@@ -0,0 +1,130 @@
+import { App, Ref, Component } from 'vue';
+
+interface AppBaseContext {
+    readonly appName: string;
+    readonly blockName: string;
+    readonly version: string;
+    readonly scriptUrl: string;
+    readonly imageBuckets: Record<string, string>;
+    readonly globalDesign: Record<string, Record<string, unknown>>;
+}
+interface AppBaseData<C, D> {
+    readonly content: C;
+    readonly design: D;
+    readonly defaults: Record<string, unknown>;
+}
+interface AppBaseState<C, D> {
+    readonly context: AppBaseContext;
+    readonly data: AppBaseData<C, D>;
+}
+
+interface VueBaseProps<CONTENT, DESIGN> {
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN) => void;
+    readonly context: Ref<AppBaseContext>;
+    readonly content: Ref<CONTENT>;
+    readonly design: Ref<DESIGN>;
+    readonly defaults: Ref<Record<string, unknown>>;
+}
+declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
+
+declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+};
+
+declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+};
+
+declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: boolean | undefined;
+};
+
+declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    value: undefined;
+};
+
+declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    font: string | undefined;
+    size: number | GlobalTextSizeString | undefined;
+    bold: boolean | undefined;
+    italic: boolean | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    appearance: ButtonAppearance | undefined;
+    font: string | undefined;
+    size: ButtonSize | undefined;
+    style: ButtonStyle | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    overlay: Overlay | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    enabled: boolean | undefined;
+};
+
+declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    value: string | undefined;
+};
+
+declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    background: Background | undefined;
+};
+
+interface VueServerAppExtensions {
+    init?: (app: App<Element>) => void;
+    render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
+}
+interface VueRenderResult {
+    readonly html: string;
+    readonly state: unknown;
+}
+declare function createVueServerApp<C, D>(appComponent: Component, extensions?: VueServerAppExtensions): {
+    init: () => {
+        render: (context: AppBaseContext, data: AppBaseData<C, D>) => Promise<VueRenderResult>;
+    };
+};
+
+interface VueClientAppExtensions {
+    init?: (app: App<Element>) => void;
+    mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
+    update?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, state: S) => void;
+    unmount?: (app: App<Element>) => void;
+}
+declare function createVueClientApp<C, D>(appComponent: Component, extensions?: VueClientAppExtensions): {
+    init: () => {
+        mount: <S extends AppBaseState<C, D>>(rootContainer: string, state: S) => void;
+        update: <S_1 extends AppBaseState<C, D>>(state: S_1) => void;
+        unmount: () => void;
+    };
+};
+
+export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.mjs

@@ -0,0 +1 @@
+import{getCurrentInstance as k,ref as b,computed as o,reactive as d,createSSRApp as E}from"vue";import{renderToString as C}from"vue/server-renderer";const m=new Map;function c(){const n=(r,a,i,u,g)=>{m.set(r._uid,{context:b(a),content:b(i),design:b(u),defaults:b(g)})},t=(r,a,i)=>{const u=m.get(r._uid);u!==void 0&&(u.content.value=a,u.design.value=i)},e=k()?.appContext.app._uid??-1,l=m.get(e);return{init:n,update:t,context:l?.context,content:l?.content,design:l?.design,defaults:l?.defaults}}function x(n){const t=c(),e=o(()=>{const a=t.content.value[n];if(a!==void 0){if(typeof a=="string")return a;throw new Error(`Element ${n} is not inputbox`)}}),l=o(()=>e.value!==void 0),r=o(()=>e.value);return d({hasContent:l,value:r})}function h(n){const t=c(),e=o(()=>{const a=t.content.value[n];if(a!==void 0){if(typeof a=="string")return a;throw new Error(`Element ${n} is not textarea`)}}),l=o(()=>e.value!==void 0),r=o(()=>e.value);return d({hasContent:l,value:r})}function I(n){return"title"in n&&"type"in n}function $(n){const t=c(),e=o(()=>{const u=t.content.value[n];if(u!==void 0){if(I(u))return u;throw new Error(`Element ${n} is not action link`)}}),l=o(()=>e.value?.title),r=o(()=>e.value?.link),a=o(()=>!!l.value),i=o(()=>!!r.value);return d({title:l,link:r,hasTitle:a,hasLink:i,performAction:()=>{if(e.value!==void 0)switch(e.value.type){case"HYPER_LINK":e.value.link&&window.open(e.value.link,"_blank");break;case"GO_TO_STORE_LINK":window.open("/products");break;case"MAIL_LINK":e.value.email&&window.open(`mailto:${e.value.email}`,"_self");break;case"TEL_LINK":e.value.phone&&window.open(`tel:${e.value.phone}`,"_self");break;case"SCROLL_TO_TILE":{if(typeof document>"u")return;const u=e.value.tileId;document.getElementById(`tile-${u}`)?.scrollIntoView();break}default:throw new Error("Unknown ButtonType: ")}}})}function _(n){return"bucket"in n&&"borderInfo"in n&&"set"in n}function T(n){const t=c(),e=o(()=>{const s=t.content.value[n];if(s!==void 0){if(_(s))return s;throw new Error(`Element ${n} is not image`)}}),l=o(()=>e.value===void 0?"":t.context.value.imageBuckets?.[e.value?.bucket]),r=o(()=>e.value!==void 0),a=o(()=>`${l.value}/${e.value?.set?.["cropped-webp-100x200"]?.url}`),i=o(()=>`${l.value}/${e.value?.set?.["cropped-webp-1000x2000"]?.url}`),u=o(()=>`${l.value}/${e.value?.set?.["webp-200x200"]?.url}`),g=o(()=>`${l.value}/${e.value?.set?.["webp-2000x2000"]?.url}`);return d({hasContent:r,lowResolutionMobileImage:a,highResolutionMobileImage:i,lowResolutionDesktopImage:u,highResolutionDesktopImage:g})}function z(n){return"enabled"in n}function D(n){const t=c(),e=o(()=>{const a=t.content.value[n];if(a!==void 0){if(z(a))return a;throw new Error(`Element ${n} is not toggle`)}}),l=o(()=>e.value!==void 0),r=o(()=>e.value?.enabled);return d({hasContent:l,value:r})}function L(n){const t=c(),e=o(()=>{const a=t.content.value[n];if(a!==void 0){if(typeof a=="string")return a;throw new Error(`Element ${n} is not selectbox`)}}),l=o(()=>e.value!==void 0),r=o(()=>e.value);return d({hasContent:l,value:r})}function y(n,t){if(t===void 0)return;if(!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.fontFamily[e]}function S(n,t){if(t===void 0)return;if(typeof t!="string"||!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.textSize[e]}function f(n,t){if(t===void 0)return;if(typeof t!="string"||!t.startsWith("global."))return t;const e=t.split(".").at(2);if(e!==void 0)return n.color[e]}function R(n){const t=c(),e=o(()=>{const s=t.design.value[n],v=t.defaults.value[n],p=t.context.value.globalDesign;return{font:s?.font??y(p,v?.font),size:s?.size??S(p,v?.size),bold:s?.bold??v?.bold,italic:s?.italic??v?.italic,color:s?.color??f(p,v?.color),visible:s?.visible??v?.visible??!1}}),l=o(()=>e.value?.font),r=o(()=>e.value?.size),a=o(()=>e.value?.bold),i=o(()=>e.value?.italic),u=o(()=>e.value?.color),g=o(()=>e.value?.visible);return d({font:l,size:r,bold:a,italic:i,color:u,visible:g})}function B(n){const t=c(),e=o(()=>{const s=t.design.value[n],v=t.defaults.value[n],p=t.context.value.globalDesign;return{appearance:s?.appearance??v?.appearance,font:s?.font??y(p,v?.font),size:s?.size??v?.size,style:s?.style??v?.style,color:s?.color??f(p,v?.color),visible:s?.visible??v?.visible??!1}}),l=o(()=>e.value?.appearance),r=o(()=>e.value?.font),a=o(()=>e.value?.size),i=o(()=>e.value?.style),u=o(()=>e.value?.color),g=o(()=>e.value?.visible);return d({appearance:l,font:r,size:a,style:i,color:u,visible:g})}function A(n){const t=c(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n],u=t.context.value.globalDesign;return{overlay:{type:a?.overlay?.type??i?.overlay?.type,solid:{color:a?.overlay?.solid?.color??f(u,i?.overlay?.solid?.color)},gradient:{fromColor:a?.overlay?.gradient?.fromColor??f(u,i?.overlay?.gradient?.fromColor),toColor:a?.overlay?.gradient?.toColor??f(u,i?.overlay?.gradient?.toColor)}},visible:a?.visible??i?.visible??!1}}),l=o(()=>e.value?.overlay),r=o(()=>e.value?.visible);return d({overlay:l,visible:r})}function O(n){const t=c(),e=o(()=>{const r=t.design.value[n],a=t.defaults.value[n];return{enabled:r?.enabled??a?.enabled}}),l=o(()=>e.value?.enabled);return d({enabled:l})}function G(n){const t=c(),e=o(()=>{const r=t.design.value[n],a=t.defaults.value[n];return{value:r?.value??a?.value}}),l=o(()=>e.value?.value);return d({value:l})}function K(n){const t=c(),e=o(()=>{const r=t.design.value[n],a=t.defaults.value[n],i=t.context.value.globalDesign;return{background:{type:r?.background?.type??a?.background?.type,solid:{color:r?.background?.solid?.color??f(i,a?.background?.solid?.color)},gradient:{fromColor:r?.background?.gradient?.fromColor??f(i,a?.background?.gradient?.fromColor),toColor:r?.background?.gradient?.toColor??f(i,a?.background?.gradient?.toColor)}}}}),l=o(()=>e.value?.background);return d({background:l})}function w(n){return{app:E(n)}}function M(n,t){return{init:()=>{const{app:e}=w(n);return t?.init?.(e),{render:async(l,r)=>(c().init(e,l,r.content,r.design,r.defaults),t?.render?.(e,l,r),{html:await C(e,{context:l}),state:{context:l,data:r}})}}}}function N(n,t){return{init:()=>{const{app:e}=w(n);return t?.init?.(e),{mount:(l,r)=>{c().init(e,r.context,r.data.content,r.data.design,r.data.defaults),t?.mount?.(e,l,r),e.mount(l)},update:l=>{c().update(e,l.data.content,l.data.design),t?.update?.(e,l)},unmount:()=>{t?.unmount?.(e),e.unmount()}}}}}export{N as createVueClientApp,M as createVueServerApp,K as useBackgroundElementDesign,$ as useButtonElementContent,B as useButtonElementDesign,T as useImageElementContent,A as useImageElementDesign,x as useInputboxElementContent,L as useSelectboxElementContent,G as useSelectboxElementDesign,R as useTextElementDesign,h as useTextareaElementContent,D as useToggleElementContent,O as useToggleElementDesign,c as useVueBaseProps};

package/dist/cli.d.mts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/cli.d.ts

@@ -0,0 +1,2 @@
+
+export {  }

package/dist/cli.mjs

@@ -0,0 +1,5 @@
+import D from"cac";import a from"node:fs";import l from"node:path";import{fileURLToPath as v}from"node:url";import{red as I,yellow as A,green as _}from"kolorist";import{resolve as i,dirname as U,sep as F}from"path";import{glob as d}from"glob";import{build as g,defineConfig as E}from"vite";import{builtinModules as S}from"module";import k from"@vitejs/plugin-vue";import $ from"vite-tsconfig-paths";import B from"vite-plugin-checker";import{viteExternalsPlugin as G}from"vite-plugin-externals";import{writeFileSync as x,createReadStream as h}from"fs";import{readFile as C}from"fs/promises";import z from"axios";import{inc as M}from"semver";import*as c from"process";import P from"tinycolor2";function N(t,e){a.statSync(t).isDirectory()?(a.mkdirSync(e,{recursive:!0}),a.readdirSync(t).forEach(n=>{const o=l.resolve(t,n),r=l.resolve(e,n);N(o,r)})):a.copyFileSync(t,e)}function j(t,e,n,o){const r=l.join(t,o?.[n]??n);N(l.join(e,n),r)}const f={error:t=>console.log(I(t)),warn:t=>console.log(A(t)),info:t=>console.log(_(t))};async function K(t){try{const e=t,n=process.cwd(),o=l.join(n,e),r=["templates"],s={_gitignore:".gitignore"};a.existsSync(o)||a.mkdirSync(o);const p=l.resolve(v(import.meta.url),"../..","template");a.readdirSync(p).filter(w=>w!=="package.json").filter(w=>!r.includes(w)).forEach(async w=>j(o,p,w,s));const u=JSON.parse(a.readFileSync(l.join(p,"package.json"),"utf-8"));u.name=t;const L=l.join(o,"package.json");a.writeFileSync(L,`${JSON.stringify(u,null,2)}
+`),f.info(`App ${t} created`)}catch(e){f.error(`Error while creating app: ${e.message}`)}}async function X(t){try{const e=t,n=process.cwd(),o=l.join(n,"sections",e);a.existsSync(o)||a.mkdirSync(o);const r=l.resolve(v(import.meta.url),"../..","template/sections/block-example");a.readdirSync(r).forEach(async s=>j(o,r,s)),f.info(`Block ${t} created`)}catch(e){f.error(`Error while creating block: ${e.message}`)}}async function J(t){try{const e=process.cwd(),n=l.join(e,"templates"),o={"template.json":`${t}.json`};a.existsSync(n)||a.mkdirSync(n);const r=l.resolve(v(import.meta.url),"../..","template/templates");a.readdirSync(r).forEach(async s=>j(n,r,s,o)),f.info(`Template descriptor file [${t}.json] has been created`)}catch(e){f.error(`Error while creating template descriptors: ${e.message}`)}}function T(){const t=process.env.npm_lifecycle_event;return B({typescript:!0,vueTsc:!1,eslint:{lintCommand:`eslint --max-warnings=0 "./sections/**/*.{js,ts,vue}" --cache --cache-location "./build/eslintcache/${t}.json"`}})}function W(t,e){return{plugins:[k(),$(),T(),G({vue:"EcVue"})],define:{"process.env":{NODE_ENV:"production"}},resolve:{alias:{"@":"/src"}},build:{outDir:`./dist/${t}`,emptyOutDir:!1,rollupOptions:{preserveEntrySignatures:"strict",input:i(process.cwd(),e),output:{validate:!0,entryFileNames:"js/[name].js",chunkFileNames:"js/[name].js",assetFileNames:"assets/[name].[ext]"}}}}}function H(t,e){return{plugins:[k(),$()],define:{"process.env":{NODE_ENV:"production"}},resolve:{alias:{"@":"/src"}},ssr:{noExternal:!0},build:{ssr:!0,outDir:`./dist/${t}`,emptyOutDir:!0,rollupOptions:{external:[...S,...S.map(n=>`node:${n}`)],preserveEntrySignatures:"strict",input:i(process.cwd(),e),output:{validate:!0,entryFileNames:"js/[name].js"}}}}}function O(t,e){return{plugins:[$(),T()],resolve:{alias:{"@":"/src"}},build:{outDir:`./dist/${t}`,emptyOutDir:!1,rollupOptions:{preserveEntrySignatures:"strict",input:i(process.cwd(),e),output:{validate:!0,entryFileNames:"js/settings/[name].mjs"}}}}}async function V(){const t=await d("**/server.{js,ts}",{ignore:["node_modules/**","dist/**"]});return Promise.all(t.map(async e=>{const n=U(e).split(F).pop()??"default",o=await d(`**/${n}/client.{js,ts}`,{ignore:["node_modules/**","dist/**"]}),r=await d(`**/${n}/settings/content.{js,ts}`,{ignore:["node_modules/**","dist/**"]}),s=await d(`**/${n}/settings/design.{js,ts}`,{ignore:["node_modules/**","dist/**"]}),p=await d(`**/${n}/settings/translations.{js,ts}`,{ignore:["node_modules/**","dist/**"]});return{name:n,serverEntrypoint:e,clientEntrypoint:o.at(0),contentSettingsEntrypoint:r.at(0),designSettingsEntrypoint:s.at(0),translationsEntrypoint:p.at(0)}}))}async function Z(){try{const t=await V();for(const e of t){const{name:n,serverEntrypoint:o,clientEntrypoint:r,contentSettingsEntrypoint:s,designSettingsEntrypoint:p,translationsEntrypoint:u}=e;await g({configFile:!1,...E(H(n,o))}),r!==void 0&&await g({configFile:!1,...E(W(n,r))}),s!==void 0&&await g({configFile:!1,...E(O(n,s))}),p!==void 0&&await g({configFile:!1,...E(O(n,p))}),u!==void 0&&await g({configFile:!1,...E(O(n,u))})}f.info("Build successful. For deploy run: npm run deploy")}catch(t){f.error(`Error while building: ${t.message}`)}}function R(t){if(t!==void 0)return t.startsWith("global.")?{type:"GLOBAL_FONT",font:t}:{type:"PRESET_FONT",font:t}}function y(t){if(t===void 0)return;if(t.startsWith("global."))return{type:"GLOBAL_COLOR",raw:t};const e=P(t);return{type:"STRUCTURED_COLOR",raw:t,hex:e.toHex8String(),hsl:e.toHsl(),rgba:e.toRgb(),auto:!1}}function q(t){if(t!==void 0)return typeof t=="string"&&t.startsWith("global.")?{type:"GLOBAL_TEXT_SIZE",size:t}:{type:"NUMERIC_TEXT_SIZE",size:t}}const Q={COLOR:"COLOR",GRADIENT:"GRADIENT"};function Y(t){switch(t){case"COLOR":return"solid";case"GRADIENT":return"gradient";default:throw new Error(`Unknown background type: ${t}. Right options: ${Object.keys(Q)}`)}}function tt(t){const e=t.style,n=t.color,o=Array.isArray(n)?n:[n,n];return t.background={type:Y(e),solid:{color:y(o.at(0))},gradient:{fromColor:y(o.at(0)),toColor:y(o.at(1))}},t.style=void 0,t.color=void 0,t}const et={SOLID:"SOLID",OUTLINE:"OUTLINE",TEXT:"TEXT"};function nt(t){switch(t){case"SOLID":return"solid-button";case"OUTLINE":return"outline-button";case"TEXT":return"text-link";default:throw new Error(`Unknown button appearance: ${t}. Right options: ${Object.keys(et)}`)}}const ot={SMALL:"SMALL",MEDIUM:"MEDIUM",LARGE:"LARGE"};function rt(t){switch(t){case"SMALL":return"small";case"MEDIUM":return"medium";case"LARGE":return"large";default:throw new Error(`Unknown button size: ${t}. Right options: ${Object.keys(ot)}`)}}const st={ROUND_CORNER:"ROUND_CORNER",RECTANGLE:"RECTANGLE",PILL:"PILL"};function it(t){switch(t){case"ROUND_CORNER":return"round-corner";case"RECTANGLE":return"rectangle";case"PILL":return"pill";default:throw new Error(`Unknown button shape: ${t}. Right options: ${Object.keys(st)}`)}}function at(t){const e=t.appearance;e!==void 0&&(t.appearance=nt(e));const n=t.size;n!==void 0&&(t.size=rt(n));const o=t.shape;o!==void 0&&(t.style=it(o),t.shape=void 0);const r=t.font;t.font=R(r);const s=t.color;return t.color=y(s),t}const ct={COLOR:"COLOR",GRADIENT:"GRADIENT",NONE:"NONE"};function pt(t){switch(t){case"COLOR":return"solid";case"GRADIENT":return"gradient";case"NONE":return"none";default:throw new Error(`Unknown image overlay type: ${t}. Right options: ${Object.keys(ct)}`)}}function lt(t){const e=t.overlay,n=t.color,o=Array.isArray(n)?n:[n,n];return t.overlay={type:pt(e),solid:{color:y(o.at(0))},gradient:{fromColor:y(o.at(0)),toColor:y(o.at(1))}},t.color=void 0,t}function ut(t){const e=t.font;t.font=R(e);const n=t.color;t.color=y(n);const o=t.size;return t.size=q(o),t}function dt(t){Object.keys(t).forEach(e=>{const n=t[e],o=n.type;switch(o){case"TEXT":{n.defaults=ut(n.defaults);break}case"BUTTON":{n.defaults=at(n.defaults);break}case"IMAGE":{n.defaults=lt(n.defaults);break}case"BACKGROUND":{n.defaults=tt(n.defaults);break}case"TOGGLE":case"SELECTBOX":break;default:throw new Error(`Unknown design editor type: ${o}`)}})}const ft="https://blockbuster.ecwid.com";async function mt(){const t=await C(i(c.cwd(),"crane.config.json")),e=JSON.parse(t.toString());return{appClientId:e.app_client_id,appSecretKey:btoa(e.app_secret_key)}}async function yt(){const t=await C(i(c.cwd(),"package.json")),e=JSON.parse(t.toString()),n=M(e.version,"patch");return e.version=n,x(i(c.cwd(),"package.json"),`${JSON.stringify(e,null,2)}
+`),e.version}async function wt(t,e){try{const n=(await import(i(c.cwd(),`dist/${t}/js/settings/content.mjs`))).default;return b(n,e),n}catch{throw new Error("Content settings is invalid or undefined")}}async function gt(t,e){try{const n=(await import(i(c.cwd(),`dist/${t}/js/settings/design.mjs`))).default;return dt(n),b(n,e),n}catch(n){throw new Error(`Design settings is invalid or undefined. Error ${n}`)}}async function Et(t){const e=(await import(i(c.cwd(),`dist/${t}/js/settings/translations.mjs`))).default;return vt(e)}function b(t,e){if(t&&typeof t=="object"){const n=t;for(let o in n){const r=n[o];typeof r=="string"&&r.startsWith("$")&&(n[o]=ht(e,r)),typeof r=="object"&&b(r,e)}}}function ht(t,e){if(!e)return;const n=t[e];return n===void 0?{en:e}:n}function vt(t){const e={};for(let n in t){const o=t[n];for(let r in o){const s=e[r],p=o[r];if(s===void 0){const u={};u[n]=p,e[r]=u}else s[n]=p}}return e}async function $t(){const t=await d("*/",{cwd:i(c.cwd(),"dist/")});return Promise.all(t.map(async e=>{const n=await Et(e),o=await wt(e,n),r=await gt(e,n);return{id:e,name:{en:e},contentEditors:o,designEditors:r}}))}async function jt(t,e,n,o){const r=(await d("server.js",{cwd:i(c.cwd(),`dist/${o}/js/`)})).at(0);r!==void 0&&await t.post("/api/v1/app/resource/upload",{file:h(i(c.cwd(),`dist/${o}/js/server.js`))},{params:{appClientId:e.appClientId,type:"server_js",version:n,block:o,fileName:r},headers:{"Content-Type":"multipart/form-data",Authorization:`Bearer ${e.appSecretKey}`}})}async function Ot(t,e,n,o){(await d("*.js",{cwd:i(c.cwd(),`dist/${o}/js/`),ignore:"**/server.js"})).forEach(async r=>{await t.post("/api/v1/app/resource/upload",{file:h(i(c.cwd(),`dist/${o}/js/${r}`))},{params:{appClientId:e.appClientId,type:"client_js",version:n,block:o,fileName:r},headers:{"Content-Type":"multipart/form-data",Authorization:`Bearer ${e.appSecretKey}`}})})}async function bt(t,e,n,o){(await d("*",{cwd:i(c.cwd(),`dist/${o}/assets/`)})).forEach(async r=>{await t.post("/api/v1/app/resource/upload",{file:h(i(c.cwd(),`dist/${o}/assets/${r}`))},{params:{appClientId:e.appClientId,type:"assets",version:n,block:o,fileName:r},headers:{"Content-Type":"multipart/form-data",Authorization:`Bearer ${e.appSecretKey}`}})})}async function St(t,e,n){(await d("package.json")).at(0)!==void 0&&await t.post("/api/v1/app/resource/upload",{file:h(i(c.cwd(),"package.json"))},{params:{appClientId:e.appClientId,type:"dependencies",version:n},headers:{"Content-Type":"multipart/form-data",Authorization:`Bearer ${e.appSecretKey}`}})}async function kt(t,e,n,o){o.forEach(async r=>{await jt(t,e,n,r.id),await Ot(t,e,n,r.id),await bt(t,e,n,r.id),await St(t,e,n)})}async function Ct(t,e,n,o){await t.post("/api/v1/app/manifest",{version:n,name:"Custom Block App",blocks:o},{params:{appClientId:e.appClientId},headers:{Authorization:`Bearer ${e.appSecretKey}`}})}async function Nt(t){try{const e=t??ft,n=z.create({baseURL:e}),o=await mt(),r=await yt(),s=await $t();await Ct(n,o,r,s),await kt(n,o,r,s);const p=s.map(u=>u.id);f.info(`Deploy to ${e} successful
+Current app version: ${r}
+Deployed blocks: ${p.join(", ")}`)}catch(e){f.error(`Error while deploying: ${e.message}`)}}const Tt="0.0.1-beta.22",m=D("crane");function Rt(){m.command("create-app <appName>","Create app with custom blocks").action(K),m.command("create-block <blockName>","Create custom block").action(X),m.command("create-template <templateName>","Create custom template descriptor").action(J),m.command("build","Build app with custom blocks").action(Z),m.command("deploy","Deploy app with custom blocks").option("--url <url>","Custom deploy url").action(t=>Nt(t.url)),m.help(),m.version(Tt),m.parse()}try{Rt()}catch{m.outputHelp(),process.exit(1)}

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@lightspeed/crane",
+  "version": "0.0.1-beta.23",
+  "type": "module",
+  "bin": "bin/crane.js",
+  "main": "./dist/app.mjs",
+  "types": "./dist/app.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/app.mjs",
+      "types": "./dist/app.d.ts"
+    },
+    "./types": {
+      "types": "./types.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "bin",
+    "dist",
+    "template",
+    "types.d.ts"
+  ],
+  "scripts": {
+    "dev": "unbuild --stub",
+    "build": "unbuild",
+    "lint": "eslint \"./{src,test}/**/*.{js,ts}\""
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.1",
+    "@types/node": "^20.4.5",
+    "unbuild": "^2.0.0",
+    "vite-plugin-dts": "^3.4.0",
+    "vite-plugin-static-copy": "^0.17.0"
+  },
+  "dependencies": {
+    "@lightspeed/eslint-config-crane": "0.0.1-beta.2",
+    "@vitejs/plugin-vue": "^4.1.0",
+    "axios": "^1.4.0",
+    "cac": "^6.7.14",
+    "eslint": "~8.15.0",
+    "fs-extra": "^11.1.1",
+    "glob": "^10.3.3",
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2",
+    "semver": "^7.5.4",
+    "tinycolor2": "^1.6.0",
+    "typescript": "^5.3.0",
+    "vite": "^5.1.0",
+    "vite-plugin-checker": "^0.6.1",
+    "vite-plugin-externals": "^0.6.2",
+    "vite-tsconfig-paths": "^4.2.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^1.8.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  }
+}

package/template/.eslintrc.cjs

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: '@lightspeed/eslint-config-crane',
+};

package/template/_gitignore

@@ -0,0 +1,25 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+crane.config.json
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/template/crane.config.json

@@ -0,0 +1,4 @@
+{
+    "app_client_id": "test",
+    "app_secret_key": "secret"
+}

package/template/index.d.ts

@@ -0,0 +1 @@
+/// <reference types="@lightspeed/crane/types" />

package/template/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "__placeholder__",
+  "private": true,
+  "version": "0.0.0",
+  "scripts": {
+    "build": "crane build",
+    "deploy": "crane build && crane deploy"
+  },
+  "dependencies": {
+    "@lightspeed/crane": "0.0.1-beta.23",
+    "@lightspeed/eslint-config-crane": "0.0.1-beta.2",
+    "vue": "^3.4.0"
+  }
+}

package/template/sections/block-example/CustomBlock.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import {
+  useInputboxElementContent,
+  useTextareaElementContent,
+  useButtonElementContent,
+  useImageElementContent,
+  useToggleElementContent,
+  useSelectboxElementContent,
+} from '@lightspeed/crane';
+import { Content } from './type';
+
+const inputboxContent = useInputboxElementContent<Content>('inputbox');
+const textareaContent = useTextareaElementContent<Content>('textarea');
+const buttonContent = useButtonElementContent<Content>('button');
+const imageContent = useImageElementContent<Content>('image');
+const toggleContent = useToggleElementContent<Content>('toggle');
+const selectboxContent = useSelectboxElementContent<Content>('selectbox');
+</script>
+
+<template>
+  <div>
+    <div>
+      <h1 v-if="inputboxContent.hasContent">
+        {{ inputboxContent.value }}
+      </h1>
+    </div>
+    <div>
+      <h1 v-if="textareaContent.hasContent">
+        {{ textareaContent.value }}
+      </h1>
+    </div>
+    <div>
+      <button
+        v-if="buttonContent.hasTitle"
+        @click="buttonContent.performAction"
+      >
+        {{ buttonContent.title }}
+      </button>
+    </div>
+    <div>
+      <img
+        v-if="imageContent.hasContent"
+        :src="imageContent.highResolutionDesktopImage"
+      >
+    </div>
+    <div>
+      <input
+        type="checkbox"
+        disabled="true"
+        :checked="toggleContent.value"
+      >
+    </div>
+    <div>
+      <h1>{{ selectboxContent.value }}</h1>
+    </div>
+  </div>
+</template>

package/template/sections/block-example/client.ts

@@ -0,0 +1,5 @@
+import { createVueClientApp } from '@lightspeed/crane';
+import CustomBlock from './CustomBlock.vue';
+import { Content, Design } from './type';
+
+export default createVueClientApp<Content, Design>(CustomBlock);

package/template/sections/block-example/server.ts

@@ -0,0 +1,5 @@
+import { createVueServerApp } from '@lightspeed/crane';
+import CustomBlock from './CustomBlock.vue';
+import { Content, Design } from './type';
+
+export default createVueServerApp<Content, Design>(CustomBlock);

package/template/sections/block-example/settings/content.ts

@@ -0,0 +1,41 @@
+export default {
+  inputbox: {
+    type: 'INPUTBOX',
+    label: '$label.inputbox.label',
+    placeholder: '$label.inputbox.placeholder',
+  },
+  textarea: {
+    type: 'TEXTAREA',
+    label: '$label.textarea.label',
+    placeholder: '$label.textarea.placeholder',
+  },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button.label',
+  },
+  image: {
+    type: 'IMAGE',
+    label: '$label.image.label',
+  },
+  toggle: {
+    type: 'TOGGLE',
+    label: '$label.toggle.label',
+    description: '$label.toggle.description',
+  },
+  selectbox: {
+    type: 'SELECTBOX',
+    label: '$label.selectbox.label',
+    placeholder: '$label.selectbox.placeholder',
+    description: '$label.selectbox.description',
+    options: [
+      {
+        value: 'one',
+        label: '$label.selectbox.one.label',
+      },
+      {
+        value: 'two',
+        label: '$label.selectbox.two.label',
+      },
+    ],
+  },
+} as const;

package/template/sections/block-example/settings/design.ts

@@ -0,0 +1,85 @@
+export default {
+  inputbox: {
+    type: 'TEXT',
+    label: '$label.inputbox.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 18,
+      bold: true,
+      italic: false,
+      color: '#333',
+    },
+  },
+  textarea: {
+    type: 'TEXT',
+    label: '$label.textarea.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    sizes: [12, 13, 14, 15, 16, 17, 18, 20],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 16,
+      bold: false,
+      italic: true,
+      color: '#333',
+    },
+  },
+  button: {
+    type: 'BUTTON',
+    label: '$label.button.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    defaults: {
+      font: 'global.fontFamily.body',
+      size: 'MEDIUM',
+      appearance: 'OUTLINE',
+      shape: 'PILL',
+      color: '#333',
+    },
+  },
+  image: {
+    type: 'IMAGE',
+    label: '$label.image.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    defaults: {
+      overlay: 'COLOR',
+      color: '#333',
+    },
+  },
+  toggle: {
+    type: 'TOGGLE',
+    label: '$label.toggle.label',
+    description: '$label.toggle.description',
+    defaults: {
+      enabled: true,
+    },
+  },
+  selectbox: {
+    type: 'SELECTBOX',
+    label: '$label.selectbox.label',
+    placeholder: '$label.selectbox.placeholder',
+    description: '$label.selectbox.description',
+    options: [
+      {
+        value: 'one',
+        label: '$label.selectbox.one.label',
+      },
+      {
+        value: 'two',
+        label: '$label.selectbox.two.label',
+      },
+    ],
+    defaults: {
+      value: 'two',
+    },
+  },
+  background: {
+    type: 'BACKGROUND',
+    label: '$label.background.label',
+    colors: ['#FFFFFF66', '#0000004D', '#00000099', '#64C7FF66', '#F9947266', '#C794CD66', '#FFD17466'],
+    defaults: {
+      style: 'COLOR',
+      color: 'global.color.background',
+    },
+  },
+} as const;

package/template/sections/block-example/settings/translations.ts

@@ -0,0 +1,35 @@
+export default {
+  en: {
+    '$label.inputbox.label': 'Inputbox',
+    '$label.inputbox.placeholder': 'Input text',
+    '$label.textarea.label': 'Textarea',
+    '$label.textarea.placeholder': 'Input text',
+    '$label.button.label': 'Button',
+    '$label.image.label': 'Image',
+    '$label.toggle.label': 'Toggle',
+    '$label.toggle.description': 'On/off toggle',
+    '$label.selectbox.label': 'Selectbox',
+    '$label.selectbox.placeholder': 'Choose',
+    '$label.selectbox.description': 'Selectbox description',
+    '$label.selectbox.one.label': 'One',
+    '$label.selectbox.two.label': 'Two',
+    '$label.background.label': 'Background',
+  },
+
+  ru: {
+    '$label.inputbox.label': 'Текст',
+    '$label.inputbox.placeholder': 'Введите текст',
+    '$label.textarea.label': 'Многострочный текст',
+    '$label.textarea.placeholder': 'Введите текст',
+    '$label.button.label': 'Кнопка',
+    '$label.image.label': 'Картинка',
+    '$label.toggle.label': 'Тоггл',
+    '$label.toggle.description': 'Включить/выключить тоггл',
+    '$label.selectbox.label': 'Селектбокс',
+    '$label.selectbox.placeholder': 'Выберите',
+    '$label.selectbox.description': 'Описание селектбокса',
+    '$label.selectbox.one.label': 'Один',
+    '$label.selectbox.two.label': 'Два',
+    '$label.background.label': 'Фон',
+  },
+} as const;

package/template/sections/block-example/type.ts

@@ -0,0 +1,5 @@
+import ContentSettings from './settings/content';
+import DesignSettings from './settings/design';
+
+export type Content = InferContentType<typeof ContentSettings>;
+export type Design = InferDesignType<typeof DesignSettings>;

package/template/templates/template.json

@@ -0,0 +1,159 @@
+{
+  "$schema": "template.schema.json",
+  "metadata": {
+    "name": "Example Template :: Standard Preset",
+    "description": "Standard Preset for the Example template",
+    "url": {
+      "demo_website": "https://www.example.com",
+      "cover_image": "https://www.example.com/cover.jpg"
+    }
+  },
+  "sections": [
+    {
+      "type": "default",
+      "id": "header"
+    },
+    {
+      "type": "default",
+      "id": "slider_001"
+    },
+    {
+      "type": "custom",
+      "id": "example-block"
+    },
+    {
+      "type": "custom",
+      "id": "example-block",
+      "content": {
+        "inputbox": {
+          "type": "INPUTBOX",
+          "label": "$label.example.label",
+          "placeholder": "$label.example.placeholder"
+        },
+        "textarea": {
+          "type": "TEXTAREA",
+          "label": "$label.example.label",
+          "placeholder": "$label.example.placeholder"
+        },
+        "button": {
+          "type": "BUTTON",
+          "label": "$label.example.label"
+        },
+        "image": {
+          "type": "IMAGE",
+          "label": "$label.example.label"
+        },
+        "toggle": {
+          "type": "TOGGLE",
+          "label": "$label.example.label",
+          "description": "$label.example.description"
+        },
+        "selectBox": {
+          "type": "SELECTBOX",
+          "label": "$label.example.label",
+          "placeholder": "$label.example.placeholder",
+          "description": "$label.example.description",
+          "options": [
+            {
+              "value": "one",
+              "label": "$label.example.one.label"
+            },
+            {
+              "value": "two",
+              "label": "$label.example.two.label"
+            }
+          ]
+        }
+      },
+      "design": {
+        "inputbox": {
+          "type": "TEXT",
+          "label": "$label.example.label",
+          "colors": ["#FFFFFF66", "#0000004D", "#00000099", "#64C7FF66", "#F9947266", "#C794CD66", "#FFD17466"],
+          "sizes": [12, 13, 14, 15, 16, 17, 18, 20],
+          "defaults": {
+            "font": "global.fontFamily.body",
+            "size": 18,
+            "bold": true,
+            "italic": false,
+            "color": "#333"
+          }
+        },
+        "textarea": {
+          "type": "TEXT",
+          "label": "$label.example.label",
+          "colors": ["#FFFFFF66", "#0000004D", "#00000099", "#64C7FF66", "#F9947266", "#C794CD66", "#FFD17466"],
+          "sizes": [12, 13, 14, 15, 16, 17, 18, 20],
+          "defaults": {
+            "font": "global.fontFamily.body",
+            "size": 16,
+            "bold": false,
+            "italic": true,
+            "color": "#333"
+          }
+        },
+        "button": {
+          "type": "BUTTON",
+          "label": "$label.example.label",
+          "colors": ["#FFFFFF66", "#0000004D", "#00000099", "#64C7FF66", "#F9947266", "#C794CD66", "#FFD17466"],
+          "defaults": {
+            "font": "global.fontFamily.body",
+            "size": "MEDIUM",
+            "appearance": "OUTLINE",
+            "shape": "PILL",
+            "color": "#333"
+          }
+        },
+        "image": {
+          "type": "IMAGE",
+          "label": "$label.example.label",
+          "colors": ["#FFFFFF66", "#0000004D", "#00000099", "#64C7FF66", "#F9947266", "#C794CD66", "#FFD17466"],
+          "defaults": {
+            "overlay": "COLOR",
+            "color": "#333"
+          }
+        },
+        "toggle": {
+          "type": "TOGGLE",
+          "label": "$label.example.label",
+          "description": "$label.example.description",
+          "defaults": {
+            "enabled": true
+          }
+        },
+        "selectbox": {
+          "type": "SELECTBOX",
+          "label": "$label.example.label",
+          "placeholder": "$label.example.placeholder",
+          "description": "$label.example.description",
+          "options": [
+            {
+              "value": "one",
+              "label": "$label.example.one.label"
+            },
+            {
+              "value": "two",
+              "label": "$label.example.two.label"
+            }
+          ],
+          "defaults": {
+            "value": "two"
+          }
+        },
+        "background": {
+          "type": "BACKGROUND",
+          "label": "$label.example.label",
+          "colors": ["#FFFFFF66", "#0000004D", "#00000099", "#64C7FF66", "#F9947266", "#C794CD66", "#FFD17466"],
+          "defaults": {
+            "style": "COLOR",
+            "color": "global.color.background"
+          }
+        }
+      }
+    },
+    {
+      "type": "default",
+      "id": "footer"
+    }
+  ]
+}

package/template/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "useDefineForClassFields": true,
+    "module": "esnext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    "moduleResolution": "node",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+  },
+  "include": ["**/*.ts", "**/*.d.ts", "**/*.tsx", "**/*.vue"],
+}
+

package/types.d.ts

@@ -0,0 +1,286 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+    import type { DefineComponent } from 'vue';
+
+    const component: DefineComponent<{}, {}, any>;
+    export default component;
+}
+
+type ButtonType =
+    'SCROLL_TO_TILE'
+    | 'HYPER_LINK'
+    | 'MAIL_LINK'
+    | 'TEL_LINK'
+    | 'GO_TO_STORE_LINK';
+
+interface ButtonContentData {
+    readonly title: string;
+    readonly type: ButtonType;
+    readonly link?: string;
+    readonly email?: string;
+    readonly phone?: string;
+    readonly tileId?: string;
+}
+
+interface ImageInfoData {
+    readonly url: string;
+    readonly width: number;
+    readonly height: number;
+}
+
+interface ImageBorderInfoData {
+    readonly homogeneity: boolean;
+    readonly color: {
+        readonly r: number;
+        readonly g: number;
+        readonly b: number;
+        readonly a: number;
+    };
+}
+
+interface ImageContentData {
+    readonly bucket: string;
+    readonly borderInfo: ImageBorderInfoData;
+    readonly set: Record<string, ImageInfoData>;
+}
+
+interface ToggleContentData {
+    readonly enabled: boolean;
+}
+
+type GlobalColorsString =
+  'global.color.title' |
+  'global.color.body' |
+  'global.color.button' |
+  'global.color.link' |
+  'global.color.background';
+
+type GlobalFontsString =
+  'global.fontFamily.title' |
+  'global.fontFamily.body';
+
+type GlobalTextSizeString =
+  'global.textSize.title' |
+  'global.textSize.subtitle' |
+  'global.textSize.body';
+
+interface HSLColor {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+interface RGBAColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+
+interface Color {
+    raw: string;
+    hex: string;
+    hsl: HSLColor;
+    rgba: RGBAColor;
+    auto?: boolean;
+}
+
+interface SolidColor {
+    color: Color | GlobalColorsString | undefined;
+}
+
+interface GradientColor {
+    fromColor: Color | GlobalColorsString| undefined;
+    toColor: Color | GlobalColorsString| undefined;
+}
+
+interface TextDesignData {
+    font: string | GlobalFontsString | undefined;
+    size: number | GlobalTextSizeString | undefined;
+    bold: boolean | undefined;
+    italic: boolean | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean;
+}
+
+type ButtonAppearance =
+    'solid-button'
+    | 'outline-button'
+    | 'text-link';
+
+type ButtonSize =
+    'small'
+    | 'medium'
+    | 'large';
+
+type ButtonStyle =
+    'round-corner'
+    | 'rectangle'
+    | 'pill';
+
+interface ButtonDesignData {
+    appearance: ButtonAppearance | undefined;
+    font: string | GlobalFontsString | undefined;
+    size: ButtonSize | undefined;
+    style: ButtonStyle | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean;
+}
+
+type OverlayType =
+    'solid'
+    | 'gradient'
+    | 'none';
+
+interface Overlay {
+    type: OverlayType | undefined;
+    solid: SolidColor | undefined;
+    gradient: GradientColor | undefined;
+}
+
+interface ImageDesignData {
+    overlay: Overlay | undefined;
+    visible: boolean;
+}
+
+interface SelectboxDesignData {
+    value: string | undefined;
+}
+
+interface ToggleDesignData {
+    enabled: boolean | undefined;
+}
+
+type BackgroundType =
+    'solid'
+    | 'gradient';
+
+interface Background {
+    type: BackgroundType | undefined;
+    solid: SolidColor | undefined;
+    gradient: GradientColor | undefined;
+}
+
+interface BackgroundDesignData {
+    background: Background | undefined;
+}
+
+type MapEditorContentTypes = {
+    readonly INPUTBOX: string;
+    readonly TEXTAREA: string;
+    readonly BUTTON: ButtonContentData;
+    readonly IMAGE: ImageContentData;
+    readonly TOGGLE: ToggleContentData;
+    readonly SELECTBOX: string;
+};
+
+interface InputboxContentEditor {
+    readonly type: 'INPUTBOX';
+    readonly label: Record<string, string>;
+    readonly placeholder: Record<string, string>;
+}
+
+interface TextareaContentEditor {
+    readonly type: 'TEXTAREA';
+    readonly label: Record<string, string>;
+    readonly placeholder: Record<string, string>;
+}
+
+interface ButtonContentEditor {
+    readonly type: 'BUTTON';
+    readonly label: Record<string, string>;
+}
+
+interface ImageContentEditor {
+    readonly type: 'IMAGE';
+    readonly label: Record<string, string>;
+}
+
+interface ToggleContentEditor {
+    readonly type: 'TOGGLE';
+    readonly label: Record<string, string>;
+    readonly description?: Record<string, string>;
+}
+
+interface SelectboxContentOption {
+    readonly value: string;
+    readonly label: Record<string, string>;
+}
+
+interface SelectboxContentEditor {
+    readonly type: 'SELECTBOX';
+    readonly label: Record<string, string>;
+    readonly placeholder: Record<string, string>;
+    readonly description?: Record<string, string>;
+    readonly options: ReadonlyArray<SelectboxOption>;
+}
+
+type ContentEditor =
+    TextContentEditor
+    | MultilineTextContentEditor
+    | ButtonContentEditor
+    | ImageContentEditor
+    | ToggleContentEditor
+    | SelectboxContentEditor;
+
+type InferContentType<T extends Record<string, ContentEditor>> = {
+    readonly [P in keyof T]: MapEditorContentTypes[T[P]['type']]
+}
+
+type MapEditorDesignTypes = {
+    readonly TEXT: string;
+    readonly BUTTON: string;
+    readonly IMAGE: string;
+    readonly TOGGLE: string;
+    readonly SELECTBOX: string;
+    readonly BACKGROUND: string;
+};
+
+interface TextDesignEditor {
+    readonly type: 'TEXT';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+interface ButtonDesignEditor {
+    readonly type: 'BUTTON';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+interface ImageDesignEditor {
+    readonly type: 'IMAGE';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+interface ToggleDesignEditor {
+    readonly type: 'TOGGLE';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+interface SelectboxDesignEditor {
+    readonly type: 'SELECTBOX';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+interface BackgroundDesignEditor {
+    readonly type: 'BACKGROUND';
+    readonly label: string | Record<string, string>;
+    defaults: Record<string, unknown>;
+}
+
+type DesignEditor =
+    TextDesignEditor
+    | ButtonDesignEditor
+    | ImageDesignEditor
+    | ToggleDesignEditor
+    | SelectboxDesignEditor
+    | BackgroundDesignEditor;
+
+type InferDesignType<T extends Record<string, DesignEditor>> = {
+    readonly [P in keyof T]: MapEditorDesignTypes[T[P]['type']]
+}