@lightspeed/crane 1.2.1 → 1.2.3

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Changelog
 
+## 1.2.3 - 2025-05-15
+
+### Changed
+
+- Update the custom header's 'Navigation' component to display a hover-activated category dropdown.
+
+### Fixed
+
+- Fix the image validation for custom section and template configuration files during the 'build' command.
+
+## 1.2.2 - 2025-05-12
+
+_If you are upgrading: please see [UPGRADE.md](UPGRADE.md)._
+
+### Added
+
+- **Storefront (experimental):** add multipage support for Custom Templates.
+- Add image validation for custom section and template configuration files during the 'build' command.
+- Provide icon URL for 'Made With' component through the external content. 
+
+### Changed
+
+- **Breaking:** Change minimal supported Node.js version to 22 LTS.
+- **Breaking:** Upgrade ESLint dependency to version 9.
+
+### Removed
+
+- **Breaking:** Remove unused image resolutions from the templating files across all sections.
+
 ## 1.2.1 - 2025-04-17
 
 ### Added

package/README.md

@@ -22,6 +22,10 @@ permissions granted, as well as an optional test site in order to verify the cha
 
 ```For both the test site and the permission, please contact your Partner Manager!```
 
+### Recommended Node.js Version
+
+For the best compatibility and performance, it is recommended to use **Node.js 22.x**
+
 ### Installation
 
 The following commands need to be performed to install the required dependencies and Crane utility, along with our linter:
@@ -111,3 +115,10 @@ npm install
 
 3. HTTP 403 during deployment:
    Insufficient permissions, please contact your Partner Manager regarding the necessary permissions.
+
+### More information
+
+For more information regarding the notable changes for each versioned release and the upgrade guide, please refer to the following files:
+
+- [CHANGELOG](CHANGELOG.md)
+- [UPGRADE](UPGRADE.md)

package/UPGRADE.md

@@ -0,0 +1,30 @@
+# Upgrades
+
+## 1.2.1 to 1.2.2
+
+### Node.js Version Upgrade
+
+The required Node.js version has been updated from **20 LTS** to **22 LTS**. 
+Ensure that your environment is running Node.js 22 LTS to maintain compatibility with the latest dependencies.
+
+### Restriction on Image Resolutions
+
+As of this update, a new limitation on the types of image resolutions that can be uploaded has been added. 
+The build will fail if any resolutions other than the ones specified below are used:
+
+- **MOBILE_WEBP_HI_RES**: 1000px x 2000px
+- **WEBP_LOW_RES**: 200px x 200px
+- **WEBP_HI_2X_RES**: 2000px x 2000px
+- **MOBILE_WEBP_LOW_RES**: 100px x 200px
+- **ORIGINAL**: The original version of the image, not resized.
+
+Ensure that all images conform to these resolutions to prevent build failures.
+
+### ESLint upgrade from 8 to 9
+
+1. Create a file named ```eslint.config.cjs``` in custom app root directory.
+2. Add the following content to the file:
+```js
+module.exports = require('@lightspeed/eslint-config-crane');
+```
+3. Remove existing ```.eslintrc.cjs``` file

package/dist/app.d.mts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { App, Ref, Component } from 'vue';
+import type { Ref, App, Component } from 'vue';
 
 interface AppBaseContext {
     readonly appName: string;
@@ -56,6 +56,8 @@ interface GlobalDesign {
     customCss?: string;
 }
 
+
+
 interface VueBaseProps<CONTENT, DESIGN> {
     init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData, globalDesignValue: GlobalDesign) => void;
     update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData, globalDesignValue: GlobalDesign) => void;
@@ -64,6 +66,7 @@ interface VueBaseProps<CONTENT, DESIGN> {
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
     readonly site: Ref<SiteContent>;
+    readonly category?: Ref<Category | undefined>;
     readonly globalDesign: Ref<GlobalDesign>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
@@ -152,7 +155,7 @@ declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
         performAction: (() => void) | undefined;
         id: string;
         title?: string | undefined;
-        type?: string | undefined;
+        type?: ActionLinkType | undefined;
         link?: string | undefined;
         email?: string | undefined;
         phone?: string | undefined;
@@ -170,7 +173,7 @@ declare function useNavigationMenuElementContent<CONTENT>(): {
         performAction: (() => void) | undefined;
         id: string;
         title?: string | undefined;
-        type?: string | undefined;
+        type?: ActionLinkType | undefined;
         link?: string | undefined;
         email?: string | undefined;
         phone?: string | undefined;
@@ -239,6 +242,15 @@ declare function useLogoElementContent<CONTENT>(): {
     };
 };
 
+
+
+
+
+
+
+
+
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -290,6 +302,10 @@ declare function useLayoutElementDesign(): {
 
 declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
 
+
+
+
+
 interface VueServerAppExtensions {
     init?: (app: App<Element>) => void;
     render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
@@ -304,6 +320,10 @@ declare function createVueServerApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
+
+
+
+
 interface VueClientAppExtensions {
     init?: (app: App<Element>) => void;
     mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
@@ -383,5 +403,14 @@ interface InstantsiteJSAPI {
 
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
+
+
+
+
+
+
+
+
+
 export { EditorTypes, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
 export type { ButtonContent, Card, Deck, ImageContent, InputBoxContent, SelectBoxContent, TextAreaContent, ToggleContent };

package/dist/app.d.ts

@@ -1,5 +1,5 @@
 import * as vue from 'vue';
-import { App, Ref, Component } from 'vue';
+import type { Ref, App, Component } from 'vue';
 
 interface AppBaseContext {
     readonly appName: string;
@@ -56,6 +56,8 @@ interface GlobalDesign {
     customCss?: string;
 }
 
+
+
 interface VueBaseProps<CONTENT, DESIGN> {
     init: (app: App<Element>, contextValue: AppBaseContext, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData, globalDesignValue: GlobalDesign) => void;
     update: (app: App<Element>, contentValue: CONTENT, designValue: DESIGN, defaultsValue: Record<string, unknown>, externalContent: ExternalContentData, globalDesignValue: GlobalDesign) => void;
@@ -64,6 +66,7 @@ interface VueBaseProps<CONTENT, DESIGN> {
     readonly design: Ref<DESIGN>;
     readonly defaults: Ref<Record<string, unknown>>;
     readonly site: Ref<SiteContent>;
+    readonly category?: Ref<Category | undefined>;
     readonly globalDesign: Ref<GlobalDesign>;
 }
 declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
@@ -152,7 +155,7 @@ declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
         performAction: (() => void) | undefined;
         id: string;
         title?: string | undefined;
-        type?: string | undefined;
+        type?: ActionLinkType | undefined;
         link?: string | undefined;
         email?: string | undefined;
         phone?: string | undefined;
@@ -170,7 +173,7 @@ declare function useNavigationMenuElementContent<CONTENT>(): {
         performAction: (() => void) | undefined;
         id: string;
         title?: string | undefined;
-        type?: string | undefined;
+        type?: ActionLinkType | undefined;
         link?: string | undefined;
         email?: string | undefined;
         phone?: string | undefined;
@@ -239,6 +242,15 @@ declare function useLogoElementContent<CONTENT>(): {
     };
 };
 
+
+
+
+
+
+
+
+
+
 declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): {
     font: string | undefined;
     size: number | GlobalTextSizeString | undefined;
@@ -290,6 +302,10 @@ declare function useLayoutElementDesign(): {
 
 declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
 
+
+
+
+
 interface VueServerAppExtensions {
     init?: (app: App<Element>) => void;
     render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
@@ -304,6 +320,10 @@ declare function createVueServerApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
+
+
+
+
 interface VueClientAppExtensions {
     init?: (app: App<Element>) => void;
     mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
@@ -383,5 +403,14 @@ interface InstantsiteJSAPI {
 
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
+
+
+
+
+
+
+
+
+
 export { EditorTypes, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useVueBaseProps };
 export type { ButtonContent, Card, Deck, ImageContent, InputBoxContent, SelectBoxContent, TextAreaContent, ToggleContent };

package/dist/app.mjs

@@ -1 +1 @@
-import{getCurrentInstance as K,ref as m,computed as i,reactive as d,createSSRApp as P}from"vue";import{renderToString as U}from"vue/server-renderer";const y=new Map;function c(){const e=(l,r,a,v,g,s,u)=>{y.set(l._uid,{context:m(r),content:m(a),design:m(v),defaults:m(g),site:m(s?.site??{}),globalDesign:m(u)})},n=(l,r,a,v,g,s)=>{const u=y.get(l._uid);u!==void 0&&(u.content.value=r,u.design.value=a,u.defaults.value=v,u.site.value=g.site??{},u.globalDesign.value=s)},t=K()?.appContext.app._uid??-1,o=y.get(t);return{init:e,update:n,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,site:o?.site,globalDesign:o?.globalDesign}}function O(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return X(o,e)}function X(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not inputbox`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}function C(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return F(o,e)}function F(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not textarea`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}const b={HYPER_LINK:"HYPER_LINK",SCROLL_TO_TILE:"SCROLL_TO_TILE",MAIL_LINK:"MAIL_LINK",TEL_LINK:"TEL_LINK",GO_TO_STORE:"GO_TO_STORE",GO_TO_STORE_LINK:"GO_TO_STORE_LINK",GO_TO_PAGE:"GO_TO_PAGE"};function W(e){if("tileId"in e)return e.tileId;if("tileIdForScroll"in e)return e.tileIdForScroll}function V(e){if("pageId"in e)return e.pageId;if("pageIdForNavigate"in e)return e.pageIdForNavigate}function H(e){if("pageUrl"in e)return e.pageUrl;switch(V(e)){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}}const L=(e,n)=>{if(!e||n)return;const{type:t,link:o,email:l,phone:r}=e,a=H(e);switch(t){case b.HYPER_LINK:if(o)return()=>window.open(o,"_blank");break;case b.GO_TO_STORE:case b.GO_TO_STORE_LINK:return()=>window.open("/products","_self");case b.MAIL_LINK:if(l)return()=>window.open(`mailto:${l}`,"_self");break;case b.TEL_LINK:if(r)return()=>window.open(`tel:${r}`,"_self");break;case b.SCROLL_TO_TILE:if(typeof document<"u")return()=>{const v=W(e);document.getElementById(`tile-${v}`)?.scrollIntoView()};break;case b.GO_TO_PAGE:if(a)return()=>window.open(a,"_self");break;default:console.error(`Unknown type of ActionLink: ${t}`)}};function Y(e){return"title"in e&&"type"in e}function j(e,n,t){const o=i(()=>{const I=e.value[n];if(I!==void 0){if(Y(I))return I;throw new Error(`Element ${n} is not action link`)}}),l=i(()=>o.value?.title),r=i(()=>o.value?.type),a=i(()=>o.value?.link),v=i(()=>o.value?.email),g=i(()=>o.value?.phone),s=i(()=>o.value?.tileId?`tile-${o.value?.tileId}`:null),u=i(()=>o.value?.type==="GO_TO_STORE_LINK"?"products":o.value?.pageId),f=i(()=>o.value?.pageUrl),E=i(()=>!!l.value),B=i(()=>!!a.value),M=L(o.value,t);return d({title:l,type:r,link:a,email:v,phone:g,tileDivId:s,pageId:u,pageUrl:f,hasTitle:E,hasLink:B,performAction:M})}function x(e,n){const t=c(),o=i(()=>!!t.site?.value?.isPreviewMode),l=i(()=>n!==void 0?n:t.content.value!==void 0?t.content.value:{});return j(l,e,o.value)}function J(e){return"bucket"in e&&"borderInfo"in e&&"set"in e}function w(e,n){const t=new RegExp(/^https?:\/\//);return e!=null&&t.test(e)?e:`${n}/${e}`}function k(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return q(o,e)}function q(e,n){const t=i(()=>{const s=e.value[n];if(s!==void 0){if(J(s))return s;throw new Error(`Element ${n} is not image`)}}),o=i(()=>t.value===void 0?"":c().context.value.imageBuckets?.[t.value?.bucket]),l=i(()=>t.value!==void 0),r=i(()=>w(t.value?.set?.["cropped-webp-100x200"]?.url,o.value)),a=i(()=>w(t.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),v=i(()=>w(t.value?.set?.["webp-200x200"]?.url,o.value)),g=i(()=>w(t.value?.set?.["webp-2000x2000"]?.url,o.value));return d({hasContent:l,lowResolutionMobileImage:r,highResolutionMobileImage:a,lowResolutionDesktopImage:v,highResolutionDesktopImage:g})}function Q(e){return"enabled"in e}function D(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return Z(o,e)}function Z(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(Q(r))return r;throw new Error(`Element ${n} is not toggle`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value?.enabled);return d({hasContent:o,value:l})}function R(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return ee(o,e)}function ee(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not selectbox`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}function te(e){return e!==null&&"items"in e}function A(e){const n=c(),t=i(()=>{const a=n.content.value[e];if(a!==void 0){if(te(a))return a;throw new Error(`Element ${e} is not an menu`)}}),o=i(()=>!!n.site?.value?.isPreviewMode),l=i(()=>t.value!==void 0),r=i(()=>t.value?.items?t.value.items.map(a=>({...a,performAction:L(a,o.value)})):[]);return d({hasContent:l,items:r})}const ne="menu";function oe(){return A(ne)}var G=(e=>(e.INPUTBOX="INPUTBOX",e.TEXTAREA="TEXTAREA",e.BUTTON="BUTTON",e.IMAGE="IMAGE",e.TOGGLE="TOGGLE",e.SELECTBOX="SELECTBOX",e))(G||{});function ie(e){if(typeof e!="object"||e===null)return!1;const n=e;return Array.isArray(n.cards)&&n.cards.every(t=>typeof t.settings=="object"&&t.settings!==null)}function le(e){const n=c(),t=i(()=>{const r=n.content.value[e];if(r!==void 0){if(ie(r))return r;throw new Error(`Element ${e} is not of DECK type`)}}),o=i(()=>t.value!==void 0&&t.value.cards.length>0),l=i(()=>t.value?.cards);return d({hasContent:o,cards:l,getReactiveRef:re})}function re(e,n,t){if(e==null)throw Error("Could not get a reactive ref for undefined Card");const o=e.settings[t];if(o===void 0)return o;switch(n){case"TEXTAREA":return C(t,e.settings);case"INPUTBOX":return O(t,e.settings);case"SELECTBOX":return R(t,e.settings);case"IMAGE":return k(t,e.settings);case"TOGGLE":return D(t,e.settings);case"BUTTON":return x(t,e.settings);default:return}}function ae(e){return"type"in e&&("text"in e||"image"in e)}function T(e,n){const t=new RegExp(/^https?:\/\//);return e!==void 0&&t.test(e)?e:`${n}/${e}`}function ue(){const e=c(),n=i(()=>{const a=e.content.value.logo;if(a!==void 0){if(ae(a))return a;throw new Error("Element logo is not LOGO")}}),t=i(()=>n.value?.type),o=i(()=>n.value?.text),l=i(()=>n.value?.image===void 0?"":e.context.value.imageBuckets?.[n.value.image.bucket]),r=i(()=>({lowResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-100x200"]?.url,l.value),highResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-1000x2000"]?.url,l.value),lowResolutionDesktopImage:T(n.value?.image?.set?.["webp-200x200"]?.url,l.value),highResolutionDesktopImage:T(n.value?.image?.set?.["webp-2000x2000"]?.url,l.value)}));return d({type:t,text:o,image:r})}function S(e,n){if(n===void 0)return;if(!n.startsWith("global."))return n.replaceAll("_"," ");const t=n.split(".").at(2);if(t!==void 0)return e.fontFamily?e.fontFamily[t].replaceAll("_"," "):void 0}function h(e,n,t){return n?S(e,n):S(e,t)}function $(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.textSize?e.textSize[t]:void 0}function _(e,n,t){return n?$(e,n):$(e,t)}function z(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.color?e.color[t]:void 0}function p(e,n,t){return n?z(e,n):z(e,t)}function se(e,n,t){return{visible:n?.visible??t?.visible??!1,width:n?.width??t?.width??1,color:p(e,n?.color,t?.color)}}function ce(e){const n=c(),t=i(()=>{const s=n.design.value[e],u=n.defaults.value[e],f=n.globalDesign.value;return{font:h(f,s?.font,u?.font),size:_(f,s?.size,u?.size),bold:s?.bold??u?.bold,italic:s?.italic??u?.italic,color:p(f,s?.color,u?.color),visible:s?.visible??u?.visible??!1}}),o=i(()=>t.value?.font),l=i(()=>t.value?.size),r=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({font:o,size:l,bold:r,italic:a,color:v,visible:g})}function ve(e){const n=c(),t=i(()=>{const u=n.design.value[e],f=n.defaults.value[e],E=n.globalDesign.value;return{font:h(E,u?.font,f?.font),size:_(E,u?.size,f?.size),bold:u?.bold??f?.bold,italic:u?.italic??f?.italic,color:p(E,u?.color,f?.color),visible:u?.visible??f?.visible??!1,whiteSpace:"pre-wrap"}}),o=i(()=>t.value?.font),l=i(()=>t.value?.size),r=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible),s=i(()=>t.value?.whiteSpace);return d({font:o,size:l,bold:r,italic:a,color:v,visible:g,whiteSpace:s})}function de(e){const n=c(),t=i(()=>{const s=n.design.value[e],u=n.defaults.value[e],f=n.globalDesign.value;return{appearance:s?.appearance??u?.appearance,font:h(f,s?.font,u?.font),size:s?.size??u?.size,style:s?.style??u?.style,color:p(f,s?.color,u?.color),visible:s?.visible??u?.visible??!1}}),o=i(()=>t.value?.appearance),l=i(()=>t.value?.font),r=i(()=>t.value?.size),a=i(()=>t.value?.style),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({appearance:o,font:l,size:r,style:a,color:v,visible:g})}function fe(e){const n=c(),t=i(()=>{const r=n.design.value[e],a=n.defaults.value[e],v=n.globalDesign.value;return{overlay:{type:r?.overlay?.type??a?.overlay?.type,solid:{color:p(v,r?.overlay?.solid?.color,a?.overlay?.solid?.color)},gradient:{fromColor:p(v,r?.overlay?.gradient?.fromColor,a?.overlay?.gradient?.fromColor),toColor:p(v,r?.overlay?.gradient?.toColor,a?.overlay?.gradient?.toColor)}},visible:r?.visible??a?.visible??!1}}),o=i(()=>t.value?.overlay),l=i(()=>t.value?.visible);return d({overlay:o,visible:l})}function ge(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e];return{enabled:l?.enabled??r?.enabled}}),o=i(()=>t.value?.enabled);return d({enabled:o})}function pe(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e];return{value:l?.value??r?.value}}),o=i(()=>t.value?.value);return d({value:o})}function be(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e],a=n.globalDesign.value;return{background:{type:l?.background?.type??r?.background?.type,solid:{color:p(a,l?.background?.solid?.color,r?.background?.solid?.color)},gradient:{fromColor:p(a,l?.background?.gradient?.fromColor,r?.background?.gradient?.fromColor),toColor:p(a,l?.background?.gradient?.toColor,r?.background?.gradient?.toColor)}}}}),o=i(()=>t.value?.background);return d({background:o})}function me(){const e=c(),n=i(()=>e.design.value.layout),t=i(()=>n.value);return d({layout:t})}function Ee(){const e=c();return i(()=>{const n=e.design.value.logo,t=e.defaults.value.logo,o=e.globalDesign.value;return{font:h(o,n?.font,t?.font),size:_(o,n?.size,t?.size),bold:n?.bold??t?.bold,italic:n?.italic??t?.italic,color:p(o,n?.color,t?.color),visible:n?.visible??t?.visible??!1,spacing:n?.spacing??t?.spacing??0,capitalization:n?.capitalization??t?.capitalization??"none",frame:se(o,n?.frame,t?.frame)}})}function N(e){return{app:P(e)}}function we(e,n){return{init:()=>{const{app:t}=N(e);return n?.init?.(t),{render:async(o,l)=>(c().init(t,o,l.content,l.design,l.defaults,l.externalContent,o.globalDesign),n?.render?.(t,o,l),{html:await U(t,{context:o}),state:{context:o,data:l}})}}}}function Te(e,n){return{init:()=>{const{app:t}=N(e);return n?.init?.(t),{mount:(o,l)=>{c().init(t,l.context,l.data.content,l.data.design,l.data.defaults,l.data.externalContent,l.context.globalDesign),n?.mount?.(t,o,l),t.mount(o)},update:o=>{c().update(t,o.data.content,o.data.design,o.data.defaults,o.data.externalContent,o.context.globalDesign),n?.update?.(t,o)},unmount:()=>{n?.unmount?.(t),t.unmount()}}}}}function he(){return globalThis.window.instantsite}export{G as EditorTypes,Te as createVueClientApp,we as createVueServerApp,be as useBackgroundElementDesign,x as useButtonElementContent,de as useButtonElementDesign,le as useDeckElementContent,k as useImageElementContent,fe as useImageElementDesign,O as useInputboxElementContent,he as useInstantsiteJsApi,me as useLayoutElementDesign,ue as useLogoElementContent,Ee as useLogoElementDesign,A as useMenuElementContent,oe as useNavigationMenuElementContent,R as useSelectboxElementContent,pe as useSelectboxElementDesign,ce as useTextElementDesign,C as useTextareaElementContent,ve as useTextareaElementDesign,D as useToggleElementContent,ge as useToggleElementDesign,c as useVueBaseProps};
+import{getCurrentInstance as K,ref as b,computed as i,reactive as d,createSSRApp as P}from"vue";import{renderToString as U}from"vue/server-renderer";const I=new Map;function c(){const e=(l,r,a,v,g,s,u)=>{I.set(l._uid,{context:b(r),content:b(a),design:b(v),defaults:b(g),site:b(s?.site??{}),category:b(s?.category),globalDesign:b(u)})},n=(l,r,a,v,g,s)=>{const u=I.get(l._uid);u!==void 0&&(u.content.value=r,u.design.value=a,u.defaults.value=v,u.site.value=g.site??{},u.category.value=g.category,u.globalDesign.value=s)},t=K()?.appContext.app._uid??-1,o=I.get(t);return{init:e,update:n,context:o?.context,content:o?.content,design:o?.design,defaults:o?.defaults,site:o?.site,category:o?.category,globalDesign:o?.globalDesign}}function O(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return X(o,e)}function X(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not inputbox`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}function C(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return F(o,e)}function F(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not textarea`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}const m={HYPER_LINK:"HYPER_LINK",SCROLL_TO_TILE:"SCROLL_TO_TILE",MAIL_LINK:"MAIL_LINK",TEL_LINK:"TEL_LINK",GO_TO_STORE:"GO_TO_STORE",GO_TO_STORE_LINK:"GO_TO_STORE_LINK",GO_TO_PAGE:"GO_TO_PAGE"};function W(e){if("tileId"in e)return e.tileId;if("tileIdForScroll"in e)return e.tileIdForScroll}function V(e){if("pageId"in e)return e.pageId;if("pageIdForNavigate"in e)return e.pageIdForNavigate}function H(e){if("pageUrl"in e)return e.pageUrl;switch(V(e)){case"products":return"/products";case"cart":return"/cart";case"account":return"/account";case"search":return"/search";case"home":default:return"/"}}const L=(e,n)=>{if(!e||n)return;const{type:t,link:o,email:l,phone:r}=e,a=H(e);switch(t){case m.HYPER_LINK:if(o)return()=>window.open(o,"_blank");break;case m.GO_TO_STORE:case m.GO_TO_STORE_LINK:return()=>window.open("/products","_self");case m.MAIL_LINK:if(l)return()=>window.open(`mailto:${l}`,"_self");break;case m.TEL_LINK:if(r)return()=>window.open(`tel:${r}`,"_self");break;case m.SCROLL_TO_TILE:if(typeof document<"u")return()=>{const v=W(e);document.getElementById(`tile-${v}`)?.scrollIntoView()};break;case m.GO_TO_PAGE:if(a)return()=>window.open(a,"_self");break;default:console.error(`Unknown type of ActionLink: ${t}`)}};function Y(e){return"title"in e&&"type"in e}function j(e,n,t){const o=i(()=>{const h=e.value[n];if(h!==void 0){if(Y(h))return h;throw new Error(`Element ${n} is not action link`)}}),l=i(()=>o.value?.title),r=i(()=>o.value?.type),a=i(()=>o.value?.link),v=i(()=>o.value?.email),g=i(()=>o.value?.phone),s=i(()=>o.value?.tileId?`tile-${o.value?.tileId}`:null),u=i(()=>o.value?.type==="GO_TO_STORE_LINK"?"products":o.value?.pageId),f=i(()=>o.value?.pageUrl),E=i(()=>!!l.value),B=i(()=>!!a.value),M=L(o.value,t);return d({title:l,type:r,link:a,email:v,phone:g,tileDivId:s,pageId:u,pageUrl:f,hasTitle:E,hasLink:B,performAction:M})}function x(e,n){const t=c(),o=i(()=>!!t.site?.value?.isPreviewMode),l=i(()=>n!==void 0?n:t.content.value!==void 0?t.content.value:{});return j(l,e,o.value)}function J(e){return"bucket"in e&&"borderInfo"in e&&"set"in e}function w(e,n){const t=new RegExp(/^https?:\/\//);return e!=null&&t.test(e)?e:`${n}/${e}`}function k(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return q(o,e)}function q(e,n){const t=i(()=>{const s=e.value[n];if(s!==void 0){if(J(s))return s;throw new Error(`Element ${n} is not image`)}}),o=i(()=>t.value===void 0?"":c().context.value.imageBuckets?.[t.value?.bucket]),l=i(()=>t.value!==void 0),r=i(()=>w(t.value?.set?.["cropped-webp-100x200"]?.url,o.value)),a=i(()=>w(t.value?.set?.["cropped-webp-1000x2000"]?.url,o.value)),v=i(()=>w(t.value?.set?.["webp-200x200"]?.url,o.value)),g=i(()=>w(t.value?.set?.["webp-2000x2000"]?.url,o.value));return d({hasContent:l,lowResolutionMobileImage:r,highResolutionMobileImage:a,lowResolutionDesktopImage:v,highResolutionDesktopImage:g})}function Q(e){return"enabled"in e}function D(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return Z(o,e)}function Z(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(Q(r))return r;throw new Error(`Element ${n} is not toggle`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value?.enabled);return d({hasContent:o,value:l})}function R(e,n){const t=c(),o=i(()=>n!==void 0?n:t.content.value);return ee(o,e)}function ee(e,n){const t=i(()=>{const r=e.value[n];if(r!==void 0){if(typeof r=="string")return r;throw new Error(`Element ${n} is not selectbox`)}}),o=i(()=>t.value!==void 0),l=i(()=>t.value);return d({hasContent:o,value:l})}function te(e){return e!==null&&"items"in e}function A(e){const n=c(),t=i(()=>{const a=n.content.value[e];if(a!==void 0){if(te(a))return a;throw new Error(`Element ${e} is not an menu`)}}),o=i(()=>!!n.site?.value?.isPreviewMode),l=i(()=>t.value!==void 0),r=i(()=>t.value?.items?t.value.items.map(a=>({...a,performAction:L(a,o.value)})):[]);return d({hasContent:l,items:r})}const ne="menu";function oe(){return A(ne)}var G=(e=>(e.INPUTBOX="INPUTBOX",e.TEXTAREA="TEXTAREA",e.BUTTON="BUTTON",e.IMAGE="IMAGE",e.TOGGLE="TOGGLE",e.SELECTBOX="SELECTBOX",e))(G||{});function ie(e){if(typeof e!="object"||e===null)return!1;const n=e;return Array.isArray(n.cards)&&n.cards.every(t=>typeof t.settings=="object"&&t.settings!==null)}function le(e){const n=c(),t=i(()=>{const r=n.content.value[e];if(r!==void 0){if(ie(r))return r;throw new Error(`Element ${e} is not of DECK type`)}}),o=i(()=>t.value!==void 0&&t.value.cards.length>0),l=i(()=>t.value?.cards);return d({hasContent:o,cards:l,getReactiveRef:re})}function re(e,n,t){if(e==null)throw Error("Could not get a reactive ref for undefined Card");const o=e.settings[t];if(o===void 0)return o;switch(n){case"TEXTAREA":return C(t,e.settings);case"INPUTBOX":return O(t,e.settings);case"SELECTBOX":return R(t,e.settings);case"IMAGE":return k(t,e.settings);case"TOGGLE":return D(t,e.settings);case"BUTTON":return x(t,e.settings);default:return}}function ae(e){return"type"in e&&("text"in e||"image"in e)}function T(e,n){const t=new RegExp(/^https?:\/\//);return e!==void 0&&t.test(e)?e:`${n}/${e}`}function ue(){const e=c(),n=i(()=>{const a=e.content.value.logo;if(a!==void 0){if(ae(a))return a;throw new Error("Element logo is not LOGO")}}),t=i(()=>n.value?.type),o=i(()=>n.value?.text),l=i(()=>n.value?.image===void 0?"":e.context.value.imageBuckets?.[n.value.image.bucket]),r=i(()=>({lowResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-100x200"]?.url,l.value),highResolutionMobileImage:T(n.value?.image?.set?.["cropped-webp-1000x2000"]?.url,l.value),lowResolutionDesktopImage:T(n.value?.image?.set?.["webp-200x200"]?.url,l.value),highResolutionDesktopImage:T(n.value?.image?.set?.["webp-2000x2000"]?.url,l.value)}));return d({type:t,text:o,image:r})}function S(e,n){if(n===void 0)return;if(!n.startsWith("global."))return n.replaceAll("_"," ");const t=n.split(".").at(2);if(t!==void 0)return e.fontFamily?e.fontFamily[t].replaceAll("_"," "):void 0}function y(e,n,t){return n?S(e,n):S(e,t)}function $(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.textSize?e.textSize[t]:void 0}function _(e,n,t){return n?$(e,n):$(e,t)}function z(e,n){if(n===void 0)return;if(typeof n!="string"||!n.startsWith("global."))return n;const t=n.split(".").at(2);if(t!==void 0)return e.color?e.color[t]:void 0}function p(e,n,t){return n?z(e,n):z(e,t)}function se(e,n,t){return{visible:n?.visible??t?.visible??!1,width:n?.width??t?.width??1,color:p(e,n?.color,t?.color)}}function ce(e){const n=c(),t=i(()=>{const s=n.design.value[e],u=n.defaults.value[e],f=n.globalDesign.value;return{font:y(f,s?.font,u?.font),size:_(f,s?.size,u?.size),bold:s?.bold??u?.bold,italic:s?.italic??u?.italic,color:p(f,s?.color,u?.color),visible:s?.visible??u?.visible??!1}}),o=i(()=>t.value?.font),l=i(()=>t.value?.size),r=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({font:o,size:l,bold:r,italic:a,color:v,visible:g})}function ve(e){const n=c(),t=i(()=>{const u=n.design.value[e],f=n.defaults.value[e],E=n.globalDesign.value;return{font:y(E,u?.font,f?.font),size:_(E,u?.size,f?.size),bold:u?.bold??f?.bold,italic:u?.italic??f?.italic,color:p(E,u?.color,f?.color),visible:u?.visible??f?.visible??!1,whiteSpace:"pre-wrap"}}),o=i(()=>t.value?.font),l=i(()=>t.value?.size),r=i(()=>t.value?.bold),a=i(()=>t.value?.italic),v=i(()=>t.value?.color),g=i(()=>t.value?.visible),s=i(()=>t.value?.whiteSpace);return d({font:o,size:l,bold:r,italic:a,color:v,visible:g,whiteSpace:s})}function de(e){const n=c(),t=i(()=>{const s=n.design.value[e],u=n.defaults.value[e],f=n.globalDesign.value;return{appearance:s?.appearance??u?.appearance,font:y(f,s?.font,u?.font),size:s?.size??u?.size,style:s?.style??u?.style,color:p(f,s?.color,u?.color),visible:s?.visible??u?.visible??!1}}),o=i(()=>t.value?.appearance),l=i(()=>t.value?.font),r=i(()=>t.value?.size),a=i(()=>t.value?.style),v=i(()=>t.value?.color),g=i(()=>t.value?.visible);return d({appearance:o,font:l,size:r,style:a,color:v,visible:g})}function fe(e){const n=c(),t=i(()=>{const r=n.design.value[e],a=n.defaults.value[e],v=n.globalDesign.value;return{overlay:{type:r?.overlay?.type??a?.overlay?.type,solid:{color:p(v,r?.overlay?.solid?.color,a?.overlay?.solid?.color)},gradient:{fromColor:p(v,r?.overlay?.gradient?.fromColor,a?.overlay?.gradient?.fromColor),toColor:p(v,r?.overlay?.gradient?.toColor,a?.overlay?.gradient?.toColor)}},visible:r?.visible??a?.visible??!1}}),o=i(()=>t.value?.overlay),l=i(()=>t.value?.visible);return d({overlay:o,visible:l})}function ge(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e];return{enabled:l?.enabled??r?.enabled}}),o=i(()=>t.value?.enabled);return d({enabled:o})}function pe(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e];return{value:l?.value??r?.value}}),o=i(()=>t.value?.value);return d({value:o})}function be(e){const n=c(),t=i(()=>{const l=n.design.value[e],r=n.defaults.value[e],a=n.globalDesign.value;return{background:{type:l?.background?.type??r?.background?.type,solid:{color:p(a,l?.background?.solid?.color,r?.background?.solid?.color)},gradient:{fromColor:p(a,l?.background?.gradient?.fromColor,r?.background?.gradient?.fromColor),toColor:p(a,l?.background?.gradient?.toColor,r?.background?.gradient?.toColor)}}}}),o=i(()=>t.value?.background);return d({background:o})}function me(){const e=c(),n=i(()=>e.design.value.layout),t=i(()=>n.value);return d({layout:t})}function Ee(){const e=c();return i(()=>{const n=e.design.value.logo,t=e.defaults.value.logo,o=e.globalDesign.value;return{font:y(o,n?.font,t?.font),size:_(o,n?.size,t?.size),bold:n?.bold??t?.bold,italic:n?.italic??t?.italic,color:p(o,n?.color,t?.color),visible:n?.visible??t?.visible??!1,spacing:n?.spacing??t?.spacing??0,capitalization:n?.capitalization??t?.capitalization??"none",frame:se(o,n?.frame,t?.frame)}})}function N(e){return{app:P(e)}}function we(e,n){return{init:()=>{const{app:t}=N(e);return n?.init?.(t),{render:async(o,l)=>(c().init(t,o,l.content,l.design,l.defaults,l.externalContent,o.globalDesign),n?.render?.(t,o,l),{html:await U(t,{context:o}),state:{context:o,data:l}})}}}}function Te(e,n){return{init:()=>{const{app:t}=N(e);return n?.init?.(t),{mount:(o,l)=>{c().init(t,l.context,l.data.content,l.data.design,l.data.defaults,l.data.externalContent,l.context.globalDesign),n?.mount?.(t,o,l),t.mount(o)},update:o=>{c().update(t,o.data.content,o.data.design,o.data.defaults,o.data.externalContent,o.context.globalDesign),n?.update?.(t,o)},unmount:()=>{n?.unmount?.(t),t.unmount()}}}}}function ye(){return globalThis.window.instantsite}export{G as EditorTypes,Te as createVueClientApp,we as createVueServerApp,be as useBackgroundElementDesign,x as useButtonElementContent,de as useButtonElementDesign,le as useDeckElementContent,k as useImageElementContent,fe as useImageElementDesign,O as useInputboxElementContent,ye as useInstantsiteJsApi,me as useLayoutElementDesign,ue as useLogoElementContent,Ee as useLogoElementDesign,A as useMenuElementContent,oe as useNavigationMenuElementContent,R as useSelectboxElementContent,pe as useSelectboxElementDesign,ce as useTextElementDesign,C as useTextareaElementContent,ve as useTextareaElementDesign,D as useToggleElementContent,ge as useToggleElementDesign,c as useVueBaseProps};