@lightspeed/crane 1.0.3 → 1.1.1

package/dist/app.d.mts

@@ -12,6 +12,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
+    readonly externalContent: Record<string, unknown>;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -19,26 +20,42 @@ interface AppBaseState<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, defaultsValue: Record<string, unknown>) => void;
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
     readonly context: Ref<AppBaseContext>;
     readonly content: Ref<CONTENT>;
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
+    readonly externalContent: Ref<Record<string, unknown>>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
-declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface TextAreaContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ButtonContent {
+    title: string;
+    link: string;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+}
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
     link: string | undefined;
     hasTitle: boolean;
@@ -46,7 +63,14 @@ declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
     performAction: () => void;
 };
 
-declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ImageContent {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+}
+declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     lowResolutionMobileImage: string;
     highResolutionMobileImage: string;
@@ -54,16 +78,64 @@ declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
     highResolutionDesktopImage: string;
 };
 
-declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: boolean | undefined;
 };
 
-declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface SelectBoxContent {
     hasContent: boolean;
-    value: undefined;
+    value: string;
+}
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: string | undefined;
 };
 
+interface Card {
+    title: string;
+    settings: Record<string, unknown>;
+}
+interface Deck {
+    cards: Card[];
+}
+declare enum EditorTypes {
+    INPUTBOX = "INPUTBOX",
+    TEXTAREA = "TEXTAREA",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX"
+}
+declare function useDeckElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    cards: Card[] | undefined;
+    getReactiveRef: typeof getReactiveRef;
+};
+declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes, contentElementName: string): {
+    hasContent: boolean;
+    value: string | undefined;
+} | {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+} | {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+} | {
+    hasContent: boolean;
+    value: boolean | undefined;
+} | undefined;
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -141,4 +213,69 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+interface InstantsiteTilePromise {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI {
+    /**
+     * Retrieves the current site ID.
+     *
+     * @returns {number} The site ID.
+     */
+    getSiteId: () => number;
+    /**
+     * Retrieves the public token for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public token, or `undefined` if not found.
+     */
+    getAppPublicToken: (appId: string) => string | undefined;
+    /**
+     * Retrieves the public configuration for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
+     */
+    getAppPublicConfig: (appId: string) => string | undefined;
+    /**
+     * An event that triggers when a tile is loaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
+     *
+     * tileLoadedPromise?.add((tileId) => {
+     *     console.log('Tile loaded:', tileId);
+     * });
+     * ```
+     */
+    onTileLoaded: InstantsiteTilePromise;
+    /**
+     * An event that triggers when a tile is unloaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
+     *
+     * tileUnloadedPromise?.add((tileId) => {
+     *     console.log('Tile unloaded:', tileId);
+     * });
+     * ```
+     */
+    onTileUnloaded: InstantsiteTilePromise;
+    /**
+     * Opens the search page with the specified keyword.
+     *
+     * @param {string | undefined} keyword - The keyword to search for.
+     * @returns {void}
+     */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
+
+export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.d.ts

@@ -12,6 +12,7 @@ interface AppBaseData<C, D> {
     readonly content: C;
     readonly design: D;
     readonly defaults: Record<string, unknown>;
+    readonly externalContent: Record<string, unknown>;
 }
 interface AppBaseState<C, D> {
     readonly context: AppBaseContext;
@@ -19,26 +20,42 @@ interface AppBaseState<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, defaultsValue: Record<string, unknown>) => void;
+    init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
+    update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: Record<string, unknown>) => void;
     readonly context: Ref<AppBaseContext>;
     readonly content: Ref<CONTENT>;
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
+    readonly externalContent: Ref<Record<string, unknown>>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
-declare function useInputboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useTextareaElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface TextAreaContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: string | undefined;
 };
 
-declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ButtonContent {
+    title: string;
+    link: string;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+}
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     title: string | undefined;
     link: string | undefined;
     hasTitle: boolean;
@@ -46,7 +63,14 @@ declare function useButtonElementContent<CONTENT>(elementName: keyof CONTENT): {
     performAction: () => void;
 };
 
-declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ImageContent {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+}
+declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     lowResolutionMobileImage: string;
     highResolutionMobileImage: string;
@@ -54,16 +78,64 @@ declare function useImageElementContent<CONTENT>(elementName: keyof CONTENT): {
     highResolutionDesktopImage: string;
 };
 
-declare function useToggleElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
     hasContent: boolean;
     value: boolean | undefined;
 };
 
-declare function useSelectboxElementContent<CONTENT>(elementName: keyof CONTENT): {
+interface SelectBoxContent {
     hasContent: boolean;
-    value: undefined;
+    value: string;
+}
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: string | undefined;
 };
 
+interface Card {
+    title: string;
+    settings: Record<string, unknown>;
+}
+interface Deck {
+    cards: Card[];
+}
+declare enum EditorTypes {
+    INPUTBOX = "INPUTBOX",
+    TEXTAREA = "TEXTAREA",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX"
+}
+declare function useDeckElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    cards: Card[] | undefined;
+    getReactiveRef: typeof getReactiveRef;
+};
+declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes, contentElementName: string): {
+    hasContent: boolean;
+    value: string | undefined;
+} | {
+    title: string | undefined;
+    link: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+} | {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+} | {
+    hasContent: boolean;
+    value: boolean | undefined;
+} | undefined;
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -141,4 +213,69 @@ declare function createVueClientApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-export { createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useImageElementContent, useImageElementDesign, useInputboxElementContent, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
+interface InstantsiteTilePromise {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI {
+    /**
+     * Retrieves the current site ID.
+     *
+     * @returns {number} The site ID.
+     */
+    getSiteId: () => number;
+    /**
+     * Retrieves the public token for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public token, or `undefined` if not found.
+     */
+    getAppPublicToken: (appId: string) => string | undefined;
+    /**
+     * Retrieves the public configuration for a given app.
+     *
+     * @param {string} appId - The ID of the app.
+     * @returns {string | undefined} The app's public configuration, or `undefined` if not found.
+     */
+    getAppPublicConfig: (appId: string) => string | undefined;
+    /**
+     * An event that triggers when a tile is loaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileLoadedPromise = instantsiteJsApi?.onTileLoaded;
+     *
+     * tileLoadedPromise?.add((tileId) => {
+     *     console.log('Tile loaded:', tileId);
+     * });
+     * ```
+     */
+    onTileLoaded: InstantsiteTilePromise;
+    /**
+     * An event that triggers when a tile is unloaded.
+     *
+     * @type {InstantsiteTilePromise}
+     *
+     * @example
+     * ```ts
+     * const tileUnloadedPromise = instantsiteJsApi?.onTileUnloaded;
+     *
+     * tileUnloadedPromise?.add((tileId) => {
+     *     console.log('Tile unloaded:', tileId);
+     * });
+     * ```
+     */
+    onTileUnloaded: InstantsiteTilePromise;
+    /**
+     * Opens the search page with the specified keyword.
+     *
+     * @param {string | undefined} keyword - The keyword to search for.
+     * @returns {void}
+     */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
+
+export { type ButtonContent, type Card, type Deck, EditorTypes, type ImageContent, type InputBoxContent, type SelectBoxContent, type TextAreaContent, type ToggleContent, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };

package/dist/app.mjs

@@ -1 +1 @@
-import{getCurrentInstance as h,ref as b,computed as o,reactive as f,createSSRApp as C}from"vue";import{renderToString as I}from"vue/server-renderer";const y=new Map;function v(){const n=(a,i,r,u,d)=>{y.set(a._uid,{context:b(i),content:b(r),design:b(u),defaults:b(d)})},t=(a,i,r,u)=>{const d=y.get(a._uid);d!==void 0&&(d.content.value=i,d.design.value=r,d.defaults.value=u)},e=h()?.appContext.app._uid??-1,l=y.get(e);return{init:n,update:t,context:l?.context,content:l?.content,design:l?.design,defaults:l?.defaults}}function z(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not inputbox`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function _(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not textarea`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function D(n){return"title"in n&&"type"in n}function T(n){const t=v(),e=o(()=>{const u=t.content.value[n];if(u!==void 0){if(D(u))return u;throw new Error(`Element ${n} is not action link`)}}),l=o(()=>e.value?.title),a=o(()=>e.value?.link),i=o(()=>!!l.value),r=o(()=>!!a.value);return f({title:l,link:a,hasTitle:i,hasLink:r,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 S(n){return"bucket"in n&&"borderInfo"in n&&"set"in n}function m(n,t){const e=new RegExp(/^https?:\/\//);return n!=null&&e.test(n)?n:`${t}/${n}`}function L(n){const t=v(),e=o(()=>{const c=t.content.value[n];if(c!==void 0){if(S(c))return c;throw new Error(`Element ${n} is not image`)}}),l=o(()=>e.value===void 0?"":t.context.value.imageBuckets?.[e.value?.bucket]),a=o(()=>e.value!==void 0),i=o(()=>m(e.value?.set?.["cropped-webp-100x200"]?.url,l.value)),r=o(()=>m(e.value?.set?.["cropped-webp-1000x2000"]?.url,l.value)),u=o(()=>m(e.value?.set?.["webp-200x200"]?.url,l.value)),d=o(()=>m(e.value?.set?.["webp-2000x2000"]?.url,l.value));return f({hasContent:a,lowResolutionMobileImage:i,highResolutionMobileImage:r,lowResolutionDesktopImage:u,highResolutionDesktopImage:d})}function $(n){return"enabled"in n}function R(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if($(i))return i;throw new Error(`Element ${n} is not toggle`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value?.enabled);return f({hasContent:l,value:a})}function A(n){const t=v(),e=o(()=>{const i=t.content.value[n];if(i!==void 0){if(typeof i=="string")return i;throw new Error(`Element ${n} is not selectbox`)}}),l=o(()=>e.value!==void 0),a=o(()=>e.value);return f({hasContent:l,value:a})}function E(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 k(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 p(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 B(n){const t=v(),e=o(()=>{const c=t.design.value[n],s=t.defaults.value[n],g=t.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??E(g,s?.font),size:c?.size??k(g,s?.size),bold:c?.bold??s?.bold,italic:c?.italic??s?.italic,color:c?.color??p(g,s?.color),visible:c?.visible??s?.visible??!1}}),l=o(()=>e.value?.font),a=o(()=>e.value?.size),i=o(()=>e.value?.bold),r=o(()=>e.value?.italic),u=o(()=>e.value?.color),d=o(()=>e.value?.visible);return f({font:l,size:a,bold:i,italic:r,color:u,visible:d})}function O(n){const t=v(),e=o(()=>{const s=t.design.value[n],g=t.defaults.value[n],w=t.context.value.globalDesign;return{font:s?.font?.replaceAll("_"," ")??E(w,g?.font),size:s?.size??k(w,g?.size),bold:s?.bold??g?.bold,italic:s?.italic??g?.italic,color:s?.color??p(w,g?.color),visible:s?.visible??g?.visible??!1,whiteSpace:"pre-wrap"}}),l=o(()=>e.value?.font),a=o(()=>e.value?.size),i=o(()=>e.value?.bold),r=o(()=>e.value?.italic),u=o(()=>e.value?.color),d=o(()=>e.value?.visible),c=o(()=>e.value?.whiteSpace);return f({font:l,size:a,bold:i,italic:r,color:u,visible:d,whiteSpace:c})}function G(n){const t=v(),e=o(()=>{const c=t.design.value[n],s=t.defaults.value[n],g=t.context.value.globalDesign;return{appearance:c?.appearance??s?.appearance,font:c?.font??E(g,s?.font),size:c?.size??s?.size,style:c?.style??s?.style,color:c?.color??p(g,s?.color),visible:c?.visible??s?.visible??!1}}),l=o(()=>e.value?.appearance),a=o(()=>e.value?.font),i=o(()=>e.value?.size),r=o(()=>e.value?.style),u=o(()=>e.value?.color),d=o(()=>e.value?.visible);return f({appearance:l,font:a,size:i,style:r,color:u,visible:d})}function K(n){const t=v(),e=o(()=>{const i=t.design.value[n],r=t.defaults.value[n],u=t.context.value.globalDesign;return{overlay:{type:i?.overlay?.type??r?.overlay?.type,solid:{color:i?.overlay?.solid?.color??p(u,r?.overlay?.solid?.color)},gradient:{fromColor:i?.overlay?.gradient?.fromColor??p(u,r?.overlay?.gradient?.fromColor),toColor:i?.overlay?.gradient?.toColor??p(u,r?.overlay?.gradient?.toColor)}},visible:i?.visible??r?.visible??!1}}),l=o(()=>e.value?.overlay),a=o(()=>e.value?.visible);return f({overlay:l,visible:a})}function M(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n];return{enabled:a?.enabled??i?.enabled}}),l=o(()=>e.value?.enabled);return f({enabled:l})}function N(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n];return{value:a?.value??i?.value}}),l=o(()=>e.value?.value);return f({value:l})}function V(n){const t=v(),e=o(()=>{const a=t.design.value[n],i=t.defaults.value[n],r=t.context.value.globalDesign;return{background:{type:a?.background?.type??i?.background?.type,solid:{color:a?.background?.solid?.color??p(r,i?.background?.solid?.color)},gradient:{fromColor:a?.background?.gradient?.fromColor??p(r,i?.background?.gradient?.fromColor),toColor:a?.background?.gradient?.toColor??p(r,i?.background?.gradient?.toColor)}}}}),l=o(()=>e.value?.background);return f({background:l})}function W(){const n=v(),t=o(()=>n.design.value.layout),e=o(()=>t.value);return f({layout:e})}function x(n){return{app:C(n)}}function F(n,t){return{init:()=>{const{app:e}=x(n);return t?.init?.(e),{render:async(l,a)=>(v().init(e,l,a.content,a.design,a.defaults),t?.render?.(e,l,a),{html:await I(e,{context:l}),state:{context:l,data:a}})}}}}function P(n,t){return{init:()=>{const{app:e}=x(n);return t?.init?.(e),{mount:(l,a)=>{v().init(e,a.context,a.data.content,a.data.design,a.data.defaults),t?.mount?.(e,l,a),e.mount(l)},update:l=>{v().update(e,l.data.content,l.data.design,l.data.defaults),t?.update?.(e,l)},unmount:()=>{t?.unmount?.(e),e.unmount()}}}}}export{P as createVueClientApp,F as createVueServerApp,V as useBackgroundElementDesign,T as useButtonElementContent,G as useButtonElementDesign,L as useImageElementContent,K as useImageElementDesign,z as useInputboxElementContent,W as useLayoutElementDesign,A as useSelectboxElementContent,N as useSelectboxElementDesign,B as useTextElementDesign,_ as useTextareaElementContent,O as useTextareaElementDesign,R as useToggleElementContent,M as useToggleElementDesign,v as useVueBaseProps};
+import{getCurrentInstance as z,ref as b,computed as r,reactive as f,createSSRApp as D}from"vue";import{renderToString as L}from"vue/server-renderer";const w=new Map;function v(){const n=(a,l,u,d,s,i)=>{w.set(a._uid,{context:b(l),content:b(u),design:b(d),defaults:b(s),externalContent:b(i)})},t=(a,l,u,d,s)=>{const i=w.get(a._uid);i!==void 0&&(i.content.value=l,i.design.value=u,i.defaults.value=d,i.externalContent.value=s)},e=z()?.appContext.app._uid??-1,o=w.get(e);return{init:n,update:t,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,externalContent:o?.externalContent}}function C(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return $(o,n)}function $(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not inputbox`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}function h(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return B(o,n)}function B(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not textarea`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}function R(n){return"title"in n&&"type"in n}function T(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return S(o,n)}function S(n,t){const e=r(()=>{const s=n.value[t];if(s!==void 0){if(R(s))return s;throw new Error(`Element ${t} is not action link`)}}),o=r(()=>e.value?.title),a=r(()=>e.value?.link),l=r(()=>!!o.value),u=r(()=>!!a.value),d=s=>{if(s?.pageUrl)return s.pageUrl;switch(s?.pageId){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}};return f({title:o,link:a,hasTitle:l,hasLink:u,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"GO_TO_PAGE":window.open(d(e.value));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 s=e.value.tileId;document.getElementById(`tile-${s}`)?.scrollIntoView();break}default:throw new Error(`Unknown ButtonType: ${e.value.type}`)}}})}function G(n){return"bucket"in n&&"borderInfo"in n&&"set"in n}function m(n,t){const e=new RegExp(/^https?:\/\//);return n!=null&&e.test(n)?n:`${t}/${n}`}function x(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return N(o,n)}function N(n,t){const e=r(()=>{const i=n.value[t];if(i!==void 0){if(G(i))return i;throw new Error(`Element ${t} is not image`)}}),o=r(()=>e.value===void 0?"":v().context.value.imageBuckets?.[e.value?.bucket]),a=r(()=>e.value!==void 0),l=r(()=>m(e.value?.set?.["cropped-webp-100x200"]?.url,o.value)),u=r(()=>m(e.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),d=r(()=>m(e.value?.set?.["webp-200x200"]?.url,o.value)),s=r(()=>m(e.value?.set?.["webp-2000x2000"]?.url,o.value));return f({hasContent:a,lowResolutionMobileImage:l,highResolutionMobileImage:u,lowResolutionDesktopImage:d,highResolutionDesktopImage:s})}function U(n){return"enabled"in n}function k(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return X(o,n)}function X(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(U(l))return l;throw new Error(`Element ${t} is not toggle`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value?.enabled);return f({hasContent:o,value:a})}function I(n,t){const e=v(),o=r(()=>t!==void 0?t:e.content.value);return M(o,n)}function M(n,t){const e=r(()=>{const l=n.value[t];if(l!==void 0){if(typeof l=="string")return l;throw new Error(`Element ${t} is not selectbox`)}}),o=r(()=>e.value!==void 0),a=r(()=>e.value);return f({hasContent:o,value:a})}var A=(n=>(n.INPUTBOX="INPUTBOX",n.TEXTAREA="TEXTAREA",n.BUTTON="BUTTON",n.IMAGE="IMAGE",n.TOGGLE="TOGGLE",n.SELECTBOX="SELECTBOX",n))(A||{});function P(n){if(typeof n!="object"||n===null)return!1;const t=n;return Array.isArray(t.cards)&&t.cards.every(e=>typeof e.settings=="object"&&e.settings!==null)}function K(n){const t=v(),e=r(()=>{const l=t.content.value[n];if(l!==void 0){if(P(l))return l;throw new Error(`Element ${n} is not of DECK type`)}}),o=r(()=>e.value!==void 0&&e.value.cards.length>0),a=r(()=>e.value?.cards);return f({hasContent:o,cards:a,getReactiveRef:V})}function V(n,t,e){if(n==null)throw Error("Could not get a reactive ref for undefined Card");const o=n.settings[e];if(o===void 0)return o;switch(t){case"TEXTAREA":return h(e,n.settings);case"INPUTBOX":return C(e,n.settings);case"SELECTBOX":return I(e,n.settings);case"IMAGE":return x(e,n.settings);case"TOGGLE":return k(e,n.settings);case"BUTTON":return T(e,n.settings);default:return}}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 O(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 p(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 W(n){const t=v(),e=r(()=>{const i=t.design.value[n],c=t.defaults.value[n],g=t.context.value.globalDesign;return{font:i?.font?.replaceAll("_"," ")??y(g,c?.font),size:i?.size??O(g,c?.size),bold:i?.bold??c?.bold,italic:i?.italic??c?.italic,color:i?.color??p(g,c?.color),visible:i?.visible??c?.visible??!1}}),o=r(()=>e.value?.font),a=r(()=>e.value?.size),l=r(()=>e.value?.bold),u=r(()=>e.value?.italic),d=r(()=>e.value?.color),s=r(()=>e.value?.visible);return f({font:o,size:a,bold:l,italic:u,color:d,visible:s})}function j(n){const t=v(),e=r(()=>{const c=t.design.value[n],g=t.defaults.value[n],E=t.context.value.globalDesign;return{font:c?.font?.replaceAll("_"," ")??y(E,g?.font),size:c?.size??O(E,g?.size),bold:c?.bold??g?.bold,italic:c?.italic??g?.italic,color:c?.color??p(E,g?.color),visible:c?.visible??g?.visible??!1,whiteSpace:"pre-wrap"}}),o=r(()=>e.value?.font),a=r(()=>e.value?.size),l=r(()=>e.value?.bold),u=r(()=>e.value?.italic),d=r(()=>e.value?.color),s=r(()=>e.value?.visible),i=r(()=>e.value?.whiteSpace);return f({font:o,size:a,bold:l,italic:u,color:d,visible:s,whiteSpace:i})}function F(n){const t=v(),e=r(()=>{const i=t.design.value[n],c=t.defaults.value[n],g=t.context.value.globalDesign;return{appearance:i?.appearance??c?.appearance,font:i?.font??y(g,c?.font),size:i?.size??c?.size,style:i?.style??c?.style,color:i?.color??p(g,c?.color),visible:i?.visible??c?.visible??!1}}),o=r(()=>e.value?.appearance),a=r(()=>e.value?.font),l=r(()=>e.value?.size),u=r(()=>e.value?.style),d=r(()=>e.value?.color),s=r(()=>e.value?.visible);return f({appearance:o,font:a,size:l,style:u,color:d,visible:s})}function H(n){const t=v(),e=r(()=>{const l=t.design.value[n],u=t.defaults.value[n],d=t.context.value.globalDesign;return{overlay:{type:l?.overlay?.type??u?.overlay?.type,solid:{color:l?.overlay?.solid?.color??p(d,u?.overlay?.solid?.color)},gradient:{fromColor:l?.overlay?.gradient?.fromColor??p(d,u?.overlay?.gradient?.fromColor),toColor:l?.overlay?.gradient?.toColor??p(d,u?.overlay?.gradient?.toColor)}},visible:l?.visible??u?.visible??!1}}),o=r(()=>e.value?.overlay),a=r(()=>e.value?.visible);return f({overlay:o,visible:a})}function J(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n];return{enabled:a?.enabled??l?.enabled}}),o=r(()=>e.value?.enabled);return f({enabled:o})}function Y(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n];return{value:a?.value??l?.value}}),o=r(()=>e.value?.value);return f({value:o})}function q(n){const t=v(),e=r(()=>{const a=t.design.value[n],l=t.defaults.value[n],u=t.context.value.globalDesign;return{background:{type:a?.background?.type??l?.background?.type,solid:{color:a?.background?.solid?.color??p(u,l?.background?.solid?.color)},gradient:{fromColor:a?.background?.gradient?.fromColor??p(u,l?.background?.gradient?.fromColor),toColor:a?.background?.gradient?.toColor??p(u,l?.background?.gradient?.toColor)}}}}),o=r(()=>e.value?.background);return f({background:o})}function Q(){const n=v(),t=r(()=>n.design.value.layout),e=r(()=>t.value);return f({layout:e})}function _(n){return{app:D(n)}}function Z(n,t){return{init:()=>{const{app:e}=_(n);return t?.init?.(e),{render:async(o,a)=>(v().init(e,o,a.content,a.design,a.defaults,a.externalContent),t?.render?.(e,o,a),{html:await L(e,{context:o}),state:{context:o,data:a}})}}}}function ee(n,t){return{init:()=>{const{app:e}=_(n);return t?.init?.(e),{mount:(o,a)=>{v().init(e,a.context,a.data.content,a.data.design,a.data.defaults,a.data.externalContent),t?.mount?.(e,o,a),e.mount(o)},update:o=>{v().update(e,o.data.content,o.data.design,o.data.defaults,o.data.externalContent),t?.update?.(e,o)},unmount:()=>{t?.unmount?.(e),e.unmount()}}}}}function te(){return globalThis.window.instantsite}export{A as EditorTypes,ee as createVueClientApp,Z as createVueServerApp,q as useBackgroundElementDesign,T as useButtonElementContent,F as useButtonElementDesign,K as useDeckElementContent,x as useImageElementContent,H as useImageElementDesign,C as useInputboxElementContent,te as useInstantsiteJsApi,Q as useLayoutElementDesign,I as useSelectboxElementContent,Y as useSelectboxElementDesign,W as useTextElementDesign,h as useTextareaElementContent,j as useTextareaElementDesign,k as useToggleElementContent,J as useToggleElementDesign,v as useVueBaseProps};