@lightspeed/crane-api 1.0.0 → 1.0.1

package/dist/index.d.mts

@@ -1,5 +1,262 @@
 import * as vue from 'vue';
-import { ComputedRef, App, Ref, Component } from 'vue';
+import { ComputedRef, Component, App, Ref } from 'vue';
+
+interface ButtonContent {
+    title: string;
+    type: ActionLinkType;
+    link?: string;
+    email?: string;
+    phone?: string;
+    tileDivId?: string;
+    pageId?: string;
+    pageUrl?: string;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: () => void;
+}
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    title: string | undefined;
+    type: ActionLinkType | undefined;
+    link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: (() => void) | undefined;
+};
+
+declare function useCategorySelectorElementContent<CONTENT>(elementName: string): {
+    categories: CategoryCollectionItemElement[];
+    categoryIds: number[];
+    hasContent: boolean;
+    hasCategories: boolean;
+};
+
+interface Card$1 {
+    title: string;
+    settings: Record<string, unknown>;
+}
+interface Deck {
+    cards: Card$1[];
+}
+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$1[] | undefined;
+    getReactiveRef: typeof getReactiveRef;
+};
+declare function getReactiveRef(card: Card$1 | undefined, editorType: EditorTypes, contentElementName: string): {
+    hasContent: boolean;
+    lowResolutionMobileImage: string;
+    highResolutionMobileImage: string;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+} | {
+    title: string | undefined;
+    type: ActionLinkType | undefined;
+    link: string | undefined;
+    email: string | undefined;
+    phone: string | undefined;
+    tileDivId: string | null;
+    pageId: string | undefined;
+    pageUrl: string | undefined;
+    hasTitle: boolean;
+    hasLink: boolean;
+    performAction: (() => void) | undefined;
+} | {
+    hasContent: boolean;
+    value: string | undefined;
+} | {
+    hasContent: boolean;
+    value: boolean | undefined;
+} | undefined;
+
+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;
+    lowResolutionDesktopImage: string;
+    highResolutionDesktopImage: string;
+};
+
+interface InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+declare function useLogoElementContent<CONTENT>(): {
+    type: LogoType | undefined;
+    text: string | undefined;
+    image: {
+        lowResolutionMobileImage: string;
+        highResolutionMobileImage: string;
+        lowResolutionDesktopImage: string;
+        highResolutionDesktopImage: string;
+    };
+};
+
+declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string;
+        type?: ActionLinkType;
+        link?: string;
+        email?: string;
+        phone?: string;
+        tileIdForScroll?: string;
+        pageIdForNavigate?: string;
+        showStoreCategories?: boolean;
+        isSubmenuOpened?: boolean;
+        categoryId?: number;
+    }[];
+};
+
+declare function useNavigationMenuElementContent<CONTENT>(): {
+    hasContent: boolean;
+    items: {
+        performAction: (() => void) | undefined;
+        id: string;
+        title?: string;
+        type?: ActionLinkType;
+        link?: string;
+        email?: string;
+        phone?: string;
+        tileIdForScroll?: string;
+        pageIdForNavigate?: string;
+        showStoreCategories?: boolean;
+        isSubmenuOpened?: boolean;
+        categoryId?: number;
+    }[];
+};
+
+declare function useProductSelectorElementContent<CONTENT>(elementName: string): {
+    products: ProductListComponentItem[];
+    categories: CategoryListComponentItem[];
+    categoryId: number | undefined;
+    hasContent: boolean;
+    hasProducts: boolean;
+};
+
+interface SelectBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+interface TextAreaContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: string | undefined;
+};
+
+interface ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: boolean | undefined;
+};
+
+/**
+ * Composable that provides translation functionality.
+ * Translations are loaded from globalThis.craneSharedTranslation injected during build.
+ * Works in both browser (client) and Node.js (server/SSR) environments.
+ *
+ * @returns An object with a `t` function that takes a translation key and returns the translated string
+ *
+ * @example
+ * ```ts
+ * import { useTranslation } from '@lightspeed/crane';
+ *
+ * const { t } = useTranslation();
+ * const title = t('$label.shared.title');
+ * ```
+ */
+declare function useTranslation(): {
+    t: (key: string) => string;
+    currentLanguageCode: vue.ComputedRef<string>;
+};
+
+declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    background: Background | 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 useLayoutElementDesign(): {
+    layout: string | undefined;
+};
+
+declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
+
+declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    value: string | 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 useTextareaElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    font: string | undefined;
+    size: number | GlobalTextSizeString | undefined;
+    bold: boolean | undefined;
+    italic: boolean | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean;
+    whiteSpace: string;
+};
+
+declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    enabled: boolean | undefined;
+};
 
 declare enum ButtonTypeEnum {
     SCROLL_TO_TILE = "SCROLL_TO_TILE",
@@ -251,221 +508,19 @@ interface TemplateSettings {
     readonly sections: TemplateSection[];
 }
 
-interface ImageContentData {
-    readonly borderInfo?: ImageBorderInfoData;
-    readonly set: {
-        [key in ImageSet]?: ImageInfoData;
-    };
-}
-
-interface TemplateMetadata {
-    readonly name: string;
-    readonly description?: string;
-    readonly preview_url?: string;
-    readonly cover_image?: ImageContentData;
-}
-
-interface TextDesignEditor {
-    readonly type: 'TEXT';
-    readonly label: string | Record<string, string>;
-    readonly colors: ReadonlyArray<string>;
-    readonly sizes: ReadonlyArray<number>;
-    defaults?: TextDesignEditorDefaults;
-}
-interface ButtonDesignEditor {
-    readonly type: 'BUTTON';
-    readonly label: string | Record<string, string>;
-    defaults?: ButtonDesignEditorDefaults;
-}
-interface ImageDesignEditor {
-    readonly type: 'IMAGE';
-    readonly label: string | Record<string, string>;
-    readonly static?: boolean;
-    readonly colors: ReadonlyArray<string>;
-    defaults?: ImageDesignEditorDefaults;
-}
-interface ToggleDesignEditor {
-    readonly type: 'TOGGLE';
-    readonly label: string | Record<string, string>;
-    defaults?: Record<string, never>;
-}
-interface SelectboxDesignEditor {
-    readonly type: 'SELECTBOX';
-    readonly label: string | Record<string, string>;
-    defaults?: Record<string, never>;
-}
-interface BackgroundDesignEditor {
-    readonly type: 'BACKGROUND';
-    readonly label: string | Record<string, string>;
-    readonly colors: ReadonlyArray<string>;
-    defaults?: BackgroundDesignEditorDefaults;
-}
-interface ColorPickerDesignEditor {
-    readonly type: 'COLOR_PICKER';
-    defaults?: ColorPickerDesignEditorDefaults;
-}
-interface LogoDesignEditor {
-    readonly type: 'LOGO';
-    readonly label?: string | Record<string, string>;
-    readonly colors?: ReadonlyArray<string>;
-    readonly sizes?: ReadonlyArray<number>;
-    defaults?: LogoDesignEditorDefaults;
-}
-interface DividerDesignEditor {
-    readonly type: 'DIVIDER';
-    readonly label: string | Record<string, string>;
-    defaults?: DesignEditorDefaults;
-}
-type DesignEditor = TextDesignEditor | ButtonDesignEditor | ImageDesignEditor | ToggleDesignEditor | SelectboxDesignEditor | ColorPickerDesignEditor | LogoDesignEditor | BackgroundDesignEditor | DividerDesignEditor;
-
-interface TextDesignEditorDefaults {
-    readonly font?: string;
-    readonly size?: number | string;
-    readonly bold?: boolean;
-    readonly italic?: boolean;
-    readonly color?: string;
-    readonly visible?: boolean;
-}
-interface ButtonDesignEditorDefaults {
-    readonly appearance?: ButtonAppearanceEnum;
-    readonly size?: ButtonSizeEnum;
-    readonly shape?: ButtonShapeEnum | undefined;
-    readonly font?: string;
-    readonly color?: string;
-    readonly visible?: boolean;
-}
-interface ImageDesignEditorDefaults {
-    readonly overlay?: keyof typeof OverlayTypeEnum;
-    readonly color?: string | string[];
-}
-interface ColorPickerDesignEditorDefaults {
-    readonly color?: string;
-}
-interface BackgroundDesignEditorDefaults {
-    readonly style?: keyof typeof BackgroundStyleEnum;
-    readonly color?: string | string[];
-}
-interface LogoDesignEditorDefaults {
-    readonly font?: string;
-    readonly size?: number | string;
-    readonly bold?: boolean;
-    readonly italic?: boolean;
-    readonly color?: string;
-    readonly visible?: boolean;
-    readonly spacing?: number;
-    readonly frame?: Frame;
-    readonly capitalization?: CapitalizationType;
-}
-type DesignEditorDefaults = TextDesignEditorDefaults | ButtonDesignEditorDefaults | ImageDesignEditorDefaults | ColorPickerDesignEditorDefaults | BackgroundDesignEditorDefaults | LogoDesignEditorDefaults | Record<string, never>;
-
-interface TextDesignEditorDefaultsTransformed {
-    readonly font?: Font;
-    readonly color?: Color$1 | string;
-    readonly size?: TextSize | string;
-}
-interface ImageDesignEditorDefaultsTransformed {
-    readonly overlay: Overlay$1;
-}
-interface ColorPickerDesignEditorDefaultsTransformed {
-    readonly color?: Color$1;
-}
-interface ButtonDesignEditorDefaultsTransformed {
-    readonly appearance?: string;
-    readonly size?: string;
-    readonly style?: string;
-    readonly font?: Font;
-    readonly color?: Color$1 | string;
-    readonly visible?: boolean;
-}
-interface BackgroundDesignEditorDefaultsTransformed {
-    readonly background: Background$1;
-}
-interface LogoDesignEditorDefaultsTransformed {
-    readonly font?: Font;
-    readonly color?: Color$1 | string;
-    readonly size?: TextSize | string;
-    readonly frame?: TransformedFrame;
-}
-type DesignEditorDefaultsTransformed = TextDesignEditorDefaultsTransformed | ButtonDesignEditorDefaultsTransformed | ImageDesignEditorDefaultsTransformed | BackgroundDesignEditorDefaultsTransformed | ColorPickerDesignEditorDefaultsTransformed | LogoDesignEditorDefaultsTransformed;
-
-type BackgroundType = 'solid' | 'gradient';
-interface SolidColor {
-    color: Color$1 | undefined;
-}
-interface GradientColor {
-    fromColor: Color$1 | undefined;
-    toColor: Color$1 | undefined;
-}
-interface Background$1 {
-    type: BackgroundType | undefined;
-    solid: SolidColor | undefined;
-    gradient: GradientColor | undefined;
-}
-interface BackgroundDesignData {
-    background: Background$1 | undefined;
-}
-
-type ButtonAppearance$1 = 'solid-button' | 'outline-button' | 'text-link';
-type ButtonSize$1 = 'small' | 'medium' | 'large';
-type ButtonStyle$1 = 'round-corner' | 'rectangle' | 'pill';
-interface ButtonDesignData {
-    appearance: ButtonAppearance$1 | undefined;
-    font: string | GlobalFontsString | undefined;
-    size: ButtonSize$1 | undefined;
-    style: ButtonStyle$1 | undefined;
-    color: Color$1 | GlobalColorsString$1 | undefined;
-    visible: boolean;
-}
-
-type OverlayType = 'solid' | 'gradient' | 'none';
-interface Overlay$1 {
-    type: OverlayType | undefined;
-    solid: SolidColor | undefined;
-    gradient: GradientColor | undefined;
-}
-interface ImageDesignData {
-    overlay: Overlay$1 | undefined;
-    visible: boolean;
-}
-
-interface TextDesignData {
-    font: string | GlobalFontsString | undefined;
-    size: number | GlobalTextSizeString$1 | undefined;
-    bold: boolean | undefined;
-    italic: boolean | undefined;
-    color: Color$1 | undefined;
-    visible: boolean;
-}
-interface TextareaDesignData extends TextDesignData {
-    readonly whiteSpace: string;
-}
-
-interface ToggleDesignData {
-    enabled: boolean | undefined;
-}
-
-interface SelectboxDesignData {
-    value: string | undefined;
-}
-
-interface LayoutDesignData {
-    layout: string | undefined;
-}
-
-interface LogoDesignData$1 {
-    font: string | undefined;
-    size: number | undefined;
-    bold: boolean | undefined;
-    italic: boolean | undefined;
-    color: Color$1 | undefined;
-    visible: boolean | undefined;
-    spacing: number | undefined;
-    capitalization: CapitalizationType | undefined;
-    frame: TransformedFrame | undefined;
-}
-
-type DesignSettings = Record<string, DesignEditor>;
-type MandatoryDesignSettings = Record<'logo', LogoDesignEditor> | Record<string, never>;
+interface ImageContentData {
+    readonly borderInfo?: ImageBorderInfoData;
+    readonly set: {
+        [key in ImageSet]?: ImageInfoData;
+    };
+}
+
+interface TemplateMetadata {
+    readonly name: string;
+    readonly description?: string;
+    readonly preview_url?: string;
+    readonly cover_image?: ImageContentData;
+}
 
 interface InputboxContentEditor {
     readonly type: 'INPUTBOX';
@@ -582,52 +637,6 @@ interface ButtonContentData {
     readonly pageUrl?: string;
 }
 
-interface Card$1 {
-    title: string;
-    settings: Record<string, unknown>;
-}
-interface Deck {
-    cards: Card$1[];
-}
-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$1[] | undefined;
-    getReactiveRef: typeof getReactiveRef;
-};
-declare function getReactiveRef(card: Card$1 | undefined, editorType: EditorTypes, contentElementName: string): {
-    hasContent: boolean;
-    value: string | undefined;
-} | {
-    hasContent: boolean;
-    lowResolutionMobileImage: string;
-    highResolutionMobileImage: string;
-    lowResolutionDesktopImage: string;
-    highResolutionDesktopImage: string;
-} | {
-    hasContent: boolean;
-    value: boolean | undefined;
-} | {
-    title: string | undefined;
-    type: ActionLinkType | undefined;
-    link: string | undefined;
-    email: string | undefined;
-    phone: string | undefined;
-    tileDivId: string | null;
-    pageId: string | undefined;
-    pageUrl: string | undefined;
-    hasTitle: boolean;
-    hasLink: boolean;
-    performAction: (() => void) | undefined;
-} | undefined;
-
 interface Card {
     title: string;
     settings: ContentSettings;
@@ -688,419 +697,346 @@ type MandatoryContentSettings = {
     logo: LogoContentEditor;
 } | Record<string, never>;
 
-interface MenuItem {
-    readonly id: string;
-    readonly title?: string;
-    readonly type?: string;
-    readonly link?: string;
-    readonly email?: string;
-    readonly phone?: string;
-    readonly tileIdForScroll?: string;
-    readonly pageIdForNavigate?: string;
-    readonly showStoreCategories?: boolean;
-    readonly isSubmenuOpened?: boolean;
-    readonly categoryId?: number;
-}
-interface ShowcaseInputboxContentEditorDefaults extends InputboxContentEditorDefaults {
-    readonly type: 'INPUTBOX';
+interface TextDesignEditor {
+    readonly type: 'TEXT';
+    readonly label: string | Record<string, string>;
+    readonly colors: ReadonlyArray<string>;
+    readonly sizes: ReadonlyArray<number>;
+    defaults?: TextDesignEditorDefaults;
 }
-interface ShowcaseTextareaContentEditorDefaults extends TextareaContentEditorDefaults {
-    readonly type: 'TEXTAREA';
+interface ButtonDesignEditor {
+    readonly type: 'BUTTON';
+    readonly label: string | Record<string, string>;
+    defaults?: ButtonDesignEditorDefaults;
 }
-interface ShowcaseImageContentEditorDefaults {
+interface ImageDesignEditor {
     readonly type: 'IMAGE';
-    readonly imageData?: ImageContentEditorDefaults;
-}
-interface ShowcaseDeckContentEditorDefaults {
-    readonly type: 'DECK';
-    readonly cards: ReadonlyArray<{
-        settings: Record<string, ShowcaseContentEditorsDefaults>;
-    }>;
-}
-interface ShowcaseLogoContentEditorDefaults {
-    readonly type: 'LOGO';
-    readonly logoType?: LogoType$1;
-    readonly text?: string;
-    readonly imageData?: ImageContentEditorDefaults;
-}
-interface ShowcaseMenuContentEditorDefaults {
-    readonly type: 'MENU';
-    readonly items?: ReadonlyArray<MenuItem>;
+    readonly label: string | Record<string, string>;
+    readonly static?: boolean;
+    readonly colors: ReadonlyArray<string>;
+    defaults?: ImageDesignEditorDefaults;
 }
-interface ShowcaseNavigationMenuContentEditorDefaults {
-    readonly type: 'NAVIGATION_MENU';
-    readonly items?: ReadonlyArray<MenuItem>;
+interface ToggleDesignEditor {
+    readonly type: 'TOGGLE';
+    readonly label: string | Record<string, string>;
+    defaults?: Record<string, never>;
 }
-
-type ShowcaseContentEditorsDefaults = ShowcaseInputboxContentEditorDefaults | ShowcaseTextareaContentEditorDefaults | ShowcaseDeckContentEditorDefaults | ShowcaseImageContentEditorDefaults | ShowcaseLogoContentEditorDefaults | ShowcaseMenuContentEditorDefaults | ShowcaseNavigationMenuContentEditorDefaults | Record<string, never>;
-
-interface Showcase {
-    readonly showcaseId: string;
-    readonly blockName?: string | Record<string, string>;
-    readonly previewImage?: unknown;
-    readonly content?: Record<string, ShowcaseContentEditorsDefaults>;
-    readonly design?: Record<string, DesignEditorDefaults & {
-        type: DesignEditor['type'];
-    }>;
-    readonly layoutId?: string;
+interface SelectboxDesignEditor {
+    readonly type: 'SELECTBOX';
+    readonly label: string | Record<string, string>;
+    defaults?: Record<string, never>;
 }
-type ShowcaseOverride = Omit<Showcase, 'showcaseId' | 'previewImage'>;
-
-type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
-type ThreeDigits = `${Digit}${Digit}${Digit}`;
-type DefaultSectionBase = 'header' | 'cover' | 'announcement_bar' | 'slider' | 'special_offer' | 'customer_review' | 'company_info' | 'shipping_payment' | 'location' | 'store' | 'footer' | 'video' | 'image_gallery' | 'contact_info' | 'contacts_widget_whatsapp' | 'contacts_widget_instagram' | 'contacts_widget_facebook' | 'contacts_widget_phone';
-type DefaultSectionId = DefaultSectionBase | `${DefaultSectionBase}_${ThreeDigits}`;
-interface TemplateDefaultSection {
-    readonly type: 'default';
-    readonly id: DefaultSectionId;
+interface BackgroundDesignEditor {
+    readonly type: 'BACKGROUND';
+    readonly label: string | Record<string, string>;
+    readonly colors: ReadonlyArray<string>;
+    defaults?: BackgroundDesignEditorDefaults;
 }
-interface TemplateCustomSection {
-    readonly type: 'custom';
-    readonly id: string;
-    readonly showcase_id?: string;
-    readonly showcase_overrides?: ShowcaseOverride;
-    readonly content?: ContentSettings;
-    readonly design?: DesignSettings;
+interface ColorPickerDesignEditor {
+    readonly type: 'COLOR_PICKER';
+    defaults?: ColorPickerDesignEditorDefaults;
 }
-interface TemplateStorefrontSection {
-    /** Section layout identifier. When not provided, the section will use the default layout. */
-    readonly id?: string;
-    readonly type: 'store';
+interface LogoDesignEditor {
+    readonly type: 'LOGO';
+    readonly label?: string | Record<string, string>;
+    readonly colors?: ReadonlyArray<string>;
+    readonly sizes?: ReadonlyArray<number>;
+    defaults?: LogoDesignEditorDefaults;
 }
-type TemplateSection = TemplateDefaultSection | TemplateCustomSection | TemplateStorefrontSection;
-
-interface TemplatePage {
-    id: string;
-    type: TemplatePageEnum;
-    readonly sections: TemplateSection[];
+interface DividerDesignEditor {
+    readonly type: 'DIVIDER';
+    readonly label: string | Record<string, string>;
+    defaults?: DesignEditorDefaults;
 }
+type DesignEditor = TextDesignEditor | ButtonDesignEditor | ImageDesignEditor | ToggleDesignEditor | SelectboxDesignEditor | ColorPickerDesignEditor | LogoDesignEditor | BackgroundDesignEditor | DividerDesignEditor;
 
-interface TemplateConfiguration {
-    metadata: TemplateMetadata;
+interface TextDesignEditorDefaults {
+    readonly font?: string;
+    readonly size?: number | string;
+    readonly bold?: boolean;
+    readonly italic?: boolean;
+    readonly color?: string;
+    readonly visible?: boolean;
 }
-interface TemplateSinglePageConfiguration extends TemplateConfiguration {
-    readonly sections: TemplateSection[];
+interface ButtonDesignEditorDefaults {
+    readonly appearance?: ButtonAppearanceEnum;
+    readonly size?: ButtonSizeEnum;
+    readonly shape?: ButtonShapeEnum | undefined;
+    readonly font?: string;
+    readonly color?: string;
+    readonly visible?: boolean;
 }
-interface TemplateMultiPageConfiguration extends TemplateConfiguration {
-    readonly header: TemplateSection;
-    readonly footer: TemplateSection;
-    readonly pages: TemplatePage[];
+interface ImageDesignEditorDefaults {
+    readonly overlay?: keyof typeof OverlayTypeEnum;
+    readonly color?: string | string[];
 }
-type TemplateConfigurationType = TemplateSinglePageConfiguration | TemplateMultiPageConfiguration | TemplatePage;
-
-interface StorePageConfiguration {
-    readonly sections: [TemplateStorefrontSection];
+interface ColorPickerDesignEditorDefaults {
+    readonly color?: string;
 }
-
-interface LayoutDesignOverride {
-    readonly fieldName: string;
-    readonly type: DesignEditor['type'];
-    defaults?: DesignEditorDefaults & {
-        type?: DesignEditor['type'];
-    };
+interface BackgroundDesignEditorDefaults {
+    readonly style?: keyof typeof BackgroundStyleEnum;
+    readonly color?: string | string[];
 }
-interface LayoutSettings {
-    readonly layoutId: string;
-    readonly layoutIcon: unknown;
-    readonly selectedContentSettings: string[];
-    readonly selectedDesignSettings: LayoutDesignOverride[];
+interface LogoDesignEditorDefaults {
+    readonly font?: string;
+    readonly size?: number | string;
+    readonly bold?: boolean;
+    readonly italic?: boolean;
+    readonly color?: string;
+    readonly visible?: boolean;
+    readonly spacing?: number;
+    readonly frame?: Frame;
+    readonly capitalization?: CapitalizationType;
 }
+type DesignEditorDefaults = TextDesignEditorDefaults | ButtonDesignEditorDefaults | ImageDesignEditorDefaults | ColorPickerDesignEditorDefaults | BackgroundDesignEditorDefaults | LogoDesignEditorDefaults | Record<string, never>;
 
-type TranslationSettings = Record<string, Record<string, string>>;
-
-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 TextDesignEditorDefaultsTransformed {
+    readonly font?: Font;
+    readonly color?: Color$1 | string;
+    readonly size?: TextSize | string;
 }
-interface AppBaseData<C, D> {
-    readonly content: C;
-    readonly design: D;
-    readonly defaults: Record<string, unknown>;
-    readonly externalContent: ExternalContentData;
+interface ImageDesignEditorDefaultsTransformed {
+    readonly overlay: Overlay$1;
 }
-interface AppBaseState<C, D> {
-    readonly context: AppBaseContext;
-    readonly data: AppBaseData<C, D>;
+interface ColorPickerDesignEditorDefaultsTransformed {
+    readonly color?: Color$1;
 }
-
-interface GlobalColors {
-    title?: Color;
-    body?: Color;
-    button?: Color;
-    link?: Color;
-    background?: Color;
+interface ButtonDesignEditorDefaultsTransformed {
+    readonly appearance?: string;
+    readonly size?: string;
+    readonly style?: string;
+    readonly font?: Font;
+    readonly color?: Color$1 | string;
+    readonly visible?: boolean;
 }
-interface GlobalFonts {
-    title: string;
-    body: string;
+interface BackgroundDesignEditorDefaultsTransformed {
+    readonly background: Background$1;
 }
-interface GlobalTextSize {
-    title: number;
-    subtitle: number;
-    body: number;
+interface LogoDesignEditorDefaultsTransformed {
+    readonly font?: Font;
+    readonly color?: Color$1 | string;
+    readonly size?: TextSize | string;
+    readonly frame?: TransformedFrame;
 }
-interface GlobalButtonSize {
-    small: number;
-    medium: number;
-    large: number;
+type DesignEditorDefaultsTransformed = TextDesignEditorDefaultsTransformed | ButtonDesignEditorDefaultsTransformed | ImageDesignEditorDefaultsTransformed | BackgroundDesignEditorDefaultsTransformed | ColorPickerDesignEditorDefaultsTransformed | LogoDesignEditorDefaultsTransformed;
+
+type BackgroundType = 'solid' | 'gradient';
+interface SolidColor {
+    color: Color$1 | undefined;
 }
-type AppearanceEffectType = 'none' | 'fade-in' | 'fade-in-up';
-interface GlobalLayout {
-    maxWidth: number;
-    tileMargin: number;
-    appearanceEffect: AppearanceEffectType;
+interface GradientColor {
+    fromColor: Color$1 | undefined;
+    toColor: Color$1 | undefined;
 }
-interface GlobalDesign {
-    color?: GlobalColors;
-    fontFamily?: GlobalFonts;
-    textSize?: GlobalTextSize;
-    buttonSize?: GlobalButtonSize;
-    layout?: GlobalLayout;
-    customCss?: string;
+interface Background$1 {
+    type: BackgroundType | undefined;
+    solid: SolidColor | undefined;
+    gradient: GradientColor | undefined;
 }
-
-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;
-    readonly context: Ref<AppBaseContext>;
-    readonly content: Ref<CONTENT>;
-    readonly design: Ref<DESIGN>;
-    readonly defaults: Ref<Record<string, unknown>>;
-    readonly site: Ref<SiteContent>;
-    readonly category?: Ref<Category | undefined>;
-    readonly storeData?: Ref<StoreData | undefined>;
-    readonly globalDesign: Ref<GlobalDesign>;
+interface BackgroundDesignData {
+    background: Background$1 | undefined;
 }
-declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
 
-interface InputBoxContent {
-    hasContent: boolean;
-    value: string;
+type ButtonAppearance$1 = 'solid-button' | 'outline-button' | 'text-link';
+type ButtonSize$1 = 'small' | 'medium' | 'large';
+type ButtonStyle$1 = 'round-corner' | 'rectangle' | 'pill';
+interface ButtonDesignData {
+    appearance: ButtonAppearance$1 | undefined;
+    font: string | GlobalFontsString | undefined;
+    size: ButtonSize$1 | undefined;
+    style: ButtonStyle$1 | undefined;
+    color: Color$1 | GlobalColorsString$1 | undefined;
+    visible: boolean;
 }
-declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    hasContent: boolean;
-    value: string | undefined;
-};
 
-interface TextAreaContent {
-    hasContent: boolean;
-    value: string;
+type OverlayType = 'solid' | 'gradient' | 'none';
+interface Overlay$1 {
+    type: OverlayType | undefined;
+    solid: SolidColor | undefined;
+    gradient: GradientColor | undefined;
 }
-declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    hasContent: boolean;
-    value: string | undefined;
-};
-
-interface ButtonContent {
-    title: string;
-    type: ActionLinkType;
-    link?: string;
-    email?: string;
-    phone?: string;
-    tileDivId?: string;
-    pageId?: string;
-    pageUrl?: string;
-    hasTitle: boolean;
-    hasLink: boolean;
-    performAction: () => void;
+interface ImageDesignData {
+    overlay: Overlay$1 | undefined;
+    visible: boolean;
 }
-declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    title: string | undefined;
-    type: ActionLinkType | undefined;
-    link: string | undefined;
-    email: string | undefined;
-    phone: string | undefined;
-    tileDivId: string | null;
-    pageId: string | undefined;
-    pageUrl: string | undefined;
-    hasTitle: boolean;
-    hasLink: boolean;
-    performAction: (() => void) | undefined;
-};
 
-interface ImageContent {
-    hasContent: boolean;
-    lowResolutionMobileImage: string;
-    highResolutionMobileImage: string;
-    lowResolutionDesktopImage: string;
-    highResolutionDesktopImage: string;
+interface TextDesignData {
+    font: string | GlobalFontsString | undefined;
+    size: number | GlobalTextSizeString$1 | undefined;
+    bold: boolean | undefined;
+    italic: boolean | undefined;
+    color: Color$1 | undefined;
+    visible: boolean;
 }
-declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    hasContent: boolean;
-    lowResolutionMobileImage: string;
-    highResolutionMobileImage: string;
-    lowResolutionDesktopImage: string;
-    highResolutionDesktopImage: string;
-};
-
-interface ToggleContent {
-    hasContent: boolean;
-    value: boolean;
+interface TextareaDesignData extends TextDesignData {
+    readonly whiteSpace: string;
 }
-declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    hasContent: boolean;
-    value: boolean | undefined;
-};
 
-interface SelectBoxContent {
-    hasContent: boolean;
-    value: string;
+interface ToggleDesignData {
+    enabled: boolean | undefined;
 }
-declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
-    hasContent: boolean;
-    value: string | undefined;
-};
-
-declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): {
-    hasContent: boolean;
-    items: {
-        performAction: (() => void) | undefined;
-        id: string;
-        title?: string;
-        type?: ActionLinkType;
-        link?: string;
-        email?: string;
-        phone?: string;
-        tileIdForScroll?: string;
-        pageIdForNavigate?: string;
-        showStoreCategories?: boolean;
-        isSubmenuOpened?: boolean;
-        categoryId?: number;
-    }[];
-};
-
-declare function useNavigationMenuElementContent<CONTENT>(): {
-    hasContent: boolean;
-    items: {
-        performAction: (() => void) | undefined;
-        id: string;
-        title?: string;
-        type?: ActionLinkType;
-        link?: string;
-        email?: string;
-        phone?: string;
-        tileIdForScroll?: string;
-        pageIdForNavigate?: string;
-        showStoreCategories?: boolean;
-        isSubmenuOpened?: boolean;
-        categoryId?: number;
-    }[];
-};
-
-declare function useLogoElementContent<CONTENT>(): {
-    type: LogoType | undefined;
-    text: string | undefined;
-    image: {
-        lowResolutionMobileImage: string;
-        highResolutionMobileImage: string;
-        lowResolutionDesktopImage: string;
-        highResolutionDesktopImage: string;
-    };
-};
-
-declare function useCategorySelectorElementContent<CONTENT>(elementName: string): {
-    categories: CategoryCollectionItemElement[];
-    categoryIds: number[];
-    hasContent: boolean;
-    hasCategories: boolean;
-};
-
-declare function useProductSelectorElementContent<CONTENT>(elementName: string): {
-    products: ProductListComponentItem[];
-    categories: CategoryListComponentItem[];
-    categoryId: number | undefined;
-    hasContent: boolean;
-    hasProducts: boolean;
-};
 
-/**
- * Composable that provides translation functionality.
- * Translations are loaded from globalThis.craneSharedTranslation injected during build.
- * Works in both browser (client) and Node.js (server/SSR) environments.
- *
- * @returns An object with a `t` function that takes a translation key and returns the translated string
- *
- * @example
- * ```ts
- * import { useTranslation } from '@lightspeed/crane';
- *
- * const { t } = useTranslation();
- * const title = t('$label.shared.title');
- * ```
- */
-declare function useTranslation(): {
-    t: (key: string) => string;
-    currentLanguageCode: vue.ComputedRef<string>;
-};
+interface SelectboxDesignData {
+    value: string | 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;
-};
+interface LayoutDesignData {
+    layout: string | undefined;
+}
 
-declare function useTextareaElementDesign<DESIGN>(elementName: keyof DESIGN): {
+interface LogoDesignData$1 {
     font: string | undefined;
-    size: number | GlobalTextSizeString | undefined;
+    size: number | undefined;
     bold: boolean | undefined;
     italic: boolean | undefined;
-    color: Color | GlobalColorsString | undefined;
-    visible: boolean;
-    whiteSpace: string;
-};
-
-declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): {
-    appearance: ButtonAppearance | undefined;
-    font: string | undefined;
-    size: ButtonSize | undefined;
-    style: ButtonStyle | undefined;
-    color: Color | GlobalColorsString | undefined;
+    color: Color$1 | undefined;
     visible: boolean | undefined;
-};
+    spacing: number | undefined;
+    capitalization: CapitalizationType | undefined;
+    frame: TransformedFrame | undefined;
+}
 
-declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): {
-    overlay: Overlay | undefined;
-    visible: boolean | undefined;
-};
+type DesignSettings = Record<string, DesignEditor>;
+type MandatoryDesignSettings = Record<'logo', LogoDesignEditor> | Record<string, never>;
 
-declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
-    enabled: boolean | undefined;
-};
+interface MenuItem {
+    readonly id: string;
+    readonly title?: string;
+    readonly type?: string;
+    readonly link?: string;
+    readonly email?: string;
+    readonly phone?: string;
+    readonly tileIdForScroll?: string;
+    readonly pageIdForNavigate?: string;
+    readonly showStoreCategories?: boolean;
+    readonly isSubmenuOpened?: boolean;
+    readonly categoryId?: number;
+}
+interface ShowcaseInputboxContentEditorDefaults extends InputboxContentEditorDefaults {
+    readonly type: 'INPUTBOX';
+}
+interface ShowcaseTextareaContentEditorDefaults extends TextareaContentEditorDefaults {
+    readonly type: 'TEXTAREA';
+}
+interface ShowcaseImageContentEditorDefaults {
+    readonly type: 'IMAGE';
+    readonly imageData?: ImageContentEditorDefaults;
+}
+interface ShowcaseDeckContentEditorDefaults {
+    readonly type: 'DECK';
+    readonly cards: ReadonlyArray<{
+        settings: Record<string, ShowcaseContentEditorsDefaults>;
+    }>;
+}
+interface ShowcaseLogoContentEditorDefaults {
+    readonly type: 'LOGO';
+    readonly logoType?: LogoType$1;
+    readonly text?: string;
+    readonly imageData?: ImageContentEditorDefaults;
+}
+interface ShowcaseMenuContentEditorDefaults {
+    readonly type: 'MENU';
+    readonly items?: ReadonlyArray<MenuItem>;
+}
+interface ShowcaseNavigationMenuContentEditorDefaults {
+    readonly type: 'NAVIGATION_MENU';
+    readonly items?: ReadonlyArray<MenuItem>;
+}
 
-declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
-    value: string | undefined;
-};
+type ShowcaseContentEditorsDefaults = ShowcaseInputboxContentEditorDefaults | ShowcaseTextareaContentEditorDefaults | ShowcaseDeckContentEditorDefaults | ShowcaseImageContentEditorDefaults | ShowcaseLogoContentEditorDefaults | ShowcaseMenuContentEditorDefaults | ShowcaseNavigationMenuContentEditorDefaults | Record<string, never>;
 
-declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
-    background: Background | undefined;
-};
+interface Showcase {
+    readonly showcaseId: string;
+    readonly blockName?: string | Record<string, string>;
+    readonly previewImage?: unknown;
+    readonly content?: Record<string, ShowcaseContentEditorsDefaults>;
+    readonly design?: Record<string, DesignEditorDefaults & {
+        type: DesignEditor['type'];
+    }>;
+    readonly layoutId?: string;
+}
+type ShowcaseOverride = Omit<Showcase, 'showcaseId' | 'previewImage'>;
 
-declare function useLayoutElementDesign(): {
-    layout: string | undefined;
-};
+type Digit = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9';
+type ThreeDigits = `${Digit}${Digit}${Digit}`;
+type DefaultSectionBase = 'header' | 'cover' | 'announcement_bar' | 'slider' | 'special_offer' | 'customer_review' | 'company_info' | 'shipping_payment' | 'location' | 'store' | 'footer' | 'video' | 'image_gallery' | 'contact_info' | 'contacts_widget_whatsapp' | 'contacts_widget_instagram' | 'contacts_widget_facebook' | 'contacts_widget_phone';
+type DefaultSectionId = DefaultSectionBase | `${DefaultSectionBase}_${ThreeDigits}`;
+interface TemplateDefaultSection {
+    readonly type: 'default';
+    readonly id: DefaultSectionId;
+}
+interface TemplateCustomSection {
+    readonly type: 'custom';
+    readonly id: string;
+    readonly showcase_id?: string;
+    readonly showcase_overrides?: ShowcaseOverride;
+    readonly content?: ContentSettings;
+    readonly design?: DesignSettings;
+}
+interface TemplateStorefrontSection {
+    /** Section layout identifier. When not provided, the section will use the default layout. */
+    readonly id?: string;
+    readonly type: 'store';
+}
+type TemplateSection = TemplateDefaultSection | TemplateCustomSection | TemplateStorefrontSection;
 
-declare function useLogoElementDesign<DESIGN>(): vue.ComputedRef<LogoDesignData>;
+interface TemplatePage {
+    id: string;
+    type: TemplatePageEnum;
+    readonly sections: TemplateSection[];
+}
 
-interface VueServerAppExtensions {
-    init?: (app: App<Element>) => void;
-    render?: <C, D>(app: App<Element>, context: AppBaseContext, data: AppBaseData<C, D>) => void;
+interface TemplateConfiguration {
+    metadata: TemplateMetadata;
 }
-interface VueRenderResult {
-    readonly html: string;
-    readonly state: unknown;
+interface TemplateSinglePageConfiguration extends TemplateConfiguration {
+    readonly sections: TemplateSection[];
 }
-declare function createVueServerApp<C, D>(appComponent: Component, extensions?: VueServerAppExtensions): {
-    init: () => {
-        render: (context: AppBaseContext, data: AppBaseData<C, D>) => Promise<VueRenderResult>;
+interface TemplateMultiPageConfiguration extends TemplateConfiguration {
+    readonly header: TemplateSection;
+    readonly footer: TemplateSection;
+    readonly pages: TemplatePage[];
+}
+type TemplateConfigurationType = TemplateSinglePageConfiguration | TemplateMultiPageConfiguration | TemplatePage;
+
+interface StorePageConfiguration {
+    readonly sections: [TemplateStorefrontSection];
+}
+
+interface LayoutDesignOverride {
+    readonly fieldName: string;
+    readonly type: DesignEditor['type'];
+    defaults?: DesignEditorDefaults & {
+        type?: DesignEditor['type'];
     };
-};
+}
+interface LayoutSettings {
+    readonly layoutId: string;
+    readonly layoutIcon: unknown;
+    readonly selectedContentSettings: string[];
+    readonly selectedDesignSettings: LayoutDesignOverride[];
+}
+
+type TranslationSettings = Record<string, Record<string, string>>;
+
+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>;
+    readonly externalContent: ExternalContentData;
+}
+interface AppBaseState<C, D> {
+    readonly context: AppBaseContext;
+    readonly data: AppBaseData<C, D>;
+}
 
 interface VueClientAppExtensions {
     init?: (app: App<Element>) => void;
@@ -1181,6 +1117,70 @@ interface InstantsiteJSAPI {
 
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
+interface GlobalColors {
+    title?: Color;
+    body?: Color;
+    button?: Color;
+    link?: Color;
+    background?: Color;
+}
+interface GlobalFonts {
+    title: string;
+    body: string;
+}
+interface GlobalTextSize {
+    title: number;
+    subtitle: number;
+    body: number;
+}
+interface GlobalButtonSize {
+    small: number;
+    medium: number;
+    large: number;
+}
+type AppearanceEffectType = 'none' | 'fade-in' | 'fade-in-up';
+interface GlobalLayout {
+    maxWidth: number;
+    tileMargin: number;
+    appearanceEffect: AppearanceEffectType;
+}
+interface GlobalDesign {
+    color?: GlobalColors;
+    fontFamily?: GlobalFonts;
+    textSize?: GlobalTextSize;
+    buttonSize?: GlobalButtonSize;
+    layout?: GlobalLayout;
+    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;
+    readonly context: Ref<AppBaseContext>;
+    readonly content: Ref<CONTENT>;
+    readonly design: Ref<DESIGN>;
+    readonly defaults: Ref<Record<string, unknown>>;
+    readonly site: Ref<SiteContent>;
+    readonly category?: Ref<Category | undefined>;
+    readonly storeData?: Ref<StoreData | undefined>;
+    readonly globalDesign: Ref<GlobalDesign>;
+}
+declare function useVueBaseProps<CONTENT, DESIGN>(): VueBaseProps<CONTENT, DESIGN>;
+
+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>;
+    };
+};
+
 declare const CatalogLayoutSlot: {
     readonly PRODUCT_LIST: "CONTROLS";
     readonly BOTTOM_BAR: "FOOTER";