@lightspeed/crane-api 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,1207 @@
+import * as vue from 'vue';
+import { ComputedRef, App, Ref, Component } from 'vue';
+
+declare enum ButtonTypeEnum {
+    SCROLL_TO_TILE = "SCROLL_TO_TILE",
+    HYPER_LINK = "HYPER_LINK",
+    MAIL_LINK = "MAIL_LINK",
+    TEL_LINK = "TEL_LINK",
+    GO_TO_STORE_LINK = "GO_TO_STORE_LINK",
+    GO_TO_PAGE = "GO_TO_PAGE"
+}
+
+declare enum OverlayTypeEnum {
+    COLOR = "COLOR",
+    GRADIENT = "GRADIENT",
+    NONE = "NONE"
+}
+
+declare enum ButtonAppearanceEnum {
+    SOLID = "SOLID",
+    OUTLINE = "OUTLINE",
+    TEXT = "TEXT"
+}
+
+declare enum ButtonSizeEnum {
+    SMALL = "SMALL",
+    MEDIUM = "MEDIUM",
+    LARGE = "LARGE"
+}
+
+declare enum ButtonShapeEnum {
+    ROUND_CORNER = "ROUND_CORNER",
+    RECTANGLE = "RECTANGLE",
+    PILL = "PILL"
+}
+
+declare enum BackgroundStyleEnum {
+    COLOR = "COLOR",
+    GRADIENT = "GRADIENT"
+}
+
+declare enum SectionTypeEnum {
+    SECTION = "SECTION",
+    HEADER = "HEADER",
+    FOOTER = "FOOTER"
+}
+
+declare enum PluginTypeEnum {
+    Server = 0,
+    Client = 1,
+    Misc = 2,
+    Layout = 3,
+    Asset = 4,
+    SharedFiles = 5
+}
+
+declare enum ConfigTypeEnum {
+    Server = 0,
+    Client = 1,
+    SectionSetting = 2,
+    SectionShowcase = 3,
+    SectionAsset = 4,
+    TemplateDescriptor = 5,
+    PageTemplateDescriptor = 6,
+    TemplateAsset = 7,
+    Layout = 8,
+    LayoutSettings = 9,
+    LayoutAsset = 10,
+    SlotServer = 11,
+    SlotClient = 12,
+    SharedTranslation = 13
+}
+
+declare enum ActionLinkTypeEnum {
+    SCROLL_TO_TILE = "SCROLL_TO_TILE",
+    HYPER_LINK = "HYPER_LINK",
+    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"
+}
+
+declare enum DesignEditorType {
+    TEXT = "TEXT",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX",
+    BACKGROUND = "BACKGROUND",
+    COLOR_PICKER = "COLOR_PICKER",
+    LOGO = "LOGO",
+    DIVIDER = "DIVIDER"
+}
+
+declare enum TemplatePageEnum {
+    PRODUCT = "PRODUCT",
+    CATALOG = "CATALOG",
+    CATEGORY = "CATEGORY",
+    HOME = "HOME",
+    CUSTOM = "CUSTOM"
+}
+
+declare enum ValidationTypeEnum {
+    CONTENT = "Content",
+    DESIGN = "Design"
+}
+
+type StorefrontSectionId = 'catalog' | 'category' | 'product';
+type VuegaPageId = 'products' | 'category' | 'product';
+
+declare enum ImageSet {
+    ORIGINAL = "original",
+    WEBP_LOW_RES = "webp-200x200",
+    WEBP_HI_2X_RES = "webp-2000x2000",
+    MOBILE_WEBP_LOW_RES = "cropped-webp-100x200",
+    MOBILE_WEBP_HI_RES = "cropped-webp-1000x2000"
+}
+interface ImageInfoData {
+    readonly url?: string;
+    readonly width?: number;
+    readonly height?: number;
+}
+interface ImageBorderInfoData {
+    readonly homogeneity?: boolean;
+    readonly color?: {
+        readonly r: number;
+        readonly g: number;
+        readonly b: number;
+        readonly a: number;
+    };
+}
+interface Frame {
+    visible: boolean;
+    width: number | undefined;
+    color: string | GlobalColorsString$1 | undefined;
+}
+interface TransformedFrame extends Omit<Frame, 'color'> {
+    color?: Color$1 | undefined;
+}
+
+interface HSLColor {
+    h: number;
+    s: number;
+    l: number;
+    a: number;
+}
+interface RGBAColor {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+}
+interface Color$1 {
+    type: 'GLOBAL_COLOR' | 'STRUCTURED_COLOR';
+    raw?: string;
+    hex?: string;
+    hsl?: HSLColor;
+    rgba?: RGBAColor;
+    auto?: boolean;
+}
+
+type GlobalColorsString$1 = 'global.color.title' | 'global.color.body' | 'global.color.button' | 'global.color.link' | 'global.color.background';
+type GlobalFontsString = 'global.fontFamily.title' | 'global.fontFamily.body';
+type GlobalTextSizeString$1 = 'global.textSize.title' | 'global.textSize.subtitle' | 'global.textSize.body';
+interface Font {
+    type: 'GLOBAL_FONT' | 'PRESET_FONT';
+    font: string;
+}
+interface TextSize {
+    type: 'GLOBAL_TEXT_SIZE' | 'NUMERIC_TEXT_SIZE';
+    size: string | number;
+}
+type CapitalizationType = 'none' | 'all' | 'small';
+
+interface GlobalDesign$1 {
+    readonly fontFamily: Record<string, string>;
+    readonly textSize: Record<string, number>;
+    readonly color: Record<string, Color$1>;
+}
+
+declare enum InstantsiteJsEvent {
+    TILE_LOADED = "tile-loaded",
+    TILE_UNLOADED = "tile-unloaded"
+}
+interface InstantsiteTilePromise$1 {
+    add(callback: (id: string) => void): void;
+}
+interface InstantsiteJSAPI$1 {
+    /**
+     * 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$1;
+    /**
+     * 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$1;
+    /**
+     * Opens the search page with the specified keyword.
+     *
+     * @param {string | undefined} keyword - The keyword to search for.
+     * @returns {void}
+     */
+    openSearchPage: (keyword: string | undefined) => void;
+}
+
+interface TemplateSettings {
+    readonly metadata: TemplateMetadata;
+    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 InputboxContentEditor {
+    readonly type: 'INPUTBOX';
+    readonly label: string;
+    readonly placeholder: string;
+    defaults?: InputboxContentEditorDefaults;
+}
+interface TextareaContentEditor {
+    readonly type: 'TEXTAREA';
+    readonly label: string;
+    readonly placeholder: string;
+    defaults?: TextareaContentEditorDefaults;
+}
+interface ButtonContentEditor {
+    readonly type: 'BUTTON';
+    readonly label: string;
+}
+interface ImageContentEditor {
+    readonly type: 'IMAGE';
+    readonly label: string;
+    readonly static?: boolean;
+    defaults?: ImageContentEditorDefaults;
+}
+interface ToggleContentEditor {
+    readonly type: 'TOGGLE';
+    readonly label: string;
+    readonly description?: string;
+}
+interface SelectboxContentOption {
+    readonly value: string;
+    readonly label: string;
+}
+interface SelectboxContentEditor {
+    readonly type: 'SELECTBOX';
+    readonly label: string;
+    readonly placeholder: string;
+    readonly description?: string;
+    readonly options: ReadonlyArray<SelectboxContentOption>;
+}
+interface DeckContentEditor {
+    readonly type: 'DECK';
+    readonly label: string;
+    readonly addButtonLabel: string;
+    readonly maxCards: number;
+    readonly cards: {
+        [key: string]: {
+            label: string;
+            settings: ContentSettings;
+        };
+    };
+}
+interface MenuContentEditor {
+    readonly type: 'MENU';
+    readonly label?: string;
+}
+interface NavigationMenuContentEditor {
+    readonly type: 'NAVIGATION_MENU';
+}
+interface LogoContentEditor {
+    readonly type: 'LOGO';
+    readonly label?: string;
+}
+interface ProductSelectorContentEditor {
+    readonly type: 'PRODUCT_SELECTOR';
+    readonly label?: string;
+    defaults?: ProductSelectorContentEditorDefaults;
+}
+interface CategorySelectorContentEditor {
+    readonly type: 'CATEGORY_SELECTOR';
+    readonly label?: string;
+    defaults?: CategorySelectorContentEditorDefaults;
+}
+type ContentEditor = TextareaContentEditor | InputboxContentEditor | ButtonContentEditor | ImageContentEditor | ToggleContentEditor | SelectboxContentEditor | DeckContentEditor | MenuContentEditor | NavigationMenuContentEditor | LogoContentEditor | ProductSelectorContentEditor | CategorySelectorContentEditor;
+
+interface InputboxContentEditorDefaults {
+    readonly text: string;
+}
+interface TextareaContentEditorDefaults {
+    readonly text: string;
+}
+interface ImageContentEditorDefaults {
+    readonly borderInfo?: Record<string, never> | {
+        homogeneity: boolean;
+        color: {
+            r: number;
+            g: number;
+            b: number;
+            a: number;
+        };
+    };
+    readonly set: {
+        [key in keyof typeof ImageSet]?: ImageInfoData;
+    };
+}
+interface LogoContentEditorDefaults {
+    readonly type: LogoType$1;
+    readonly text?: string;
+}
+interface ProductSelectorContentEditorDefaults {
+    readonly maxProducts: number;
+}
+interface CategorySelectorContentEditorDefaults {
+    readonly maxCategories: number;
+}
+
+interface ButtonContentData {
+    readonly title: string;
+    readonly type: ButtonTypeEnum;
+    readonly link?: string;
+    readonly email?: string;
+    readonly phone?: string;
+    readonly tileId?: string;
+    readonly pageId?: string;
+    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;
+}
+interface DeckContent {
+    readonly hasContent: ComputedRef<boolean>;
+    readonly cards: ComputedRef<ReadonlyArray<Card> | undefined>;
+    readonly getReactiveRef: typeof getReactiveRef;
+}
+
+interface ToggleContentData {
+    readonly enabled: boolean;
+}
+
+interface ActionLink {
+    id: string;
+    title?: string;
+    type?: string;
+    link?: string;
+    email?: string;
+    phone?: string;
+    tileIdForScroll?: string;
+    pageIdForNavigate?: string;
+    showStoreCategories?: boolean;
+    isSubmenuOpened?: boolean;
+    categoryId?: number;
+    performAction?: () => void;
+}
+
+interface MenuContent {
+    readonly hasContent: ComputedRef<boolean>;
+    readonly items: ComputedRef<ActionLink[]>;
+}
+interface MenuContentData {
+    readonly items: ReadonlyArray<ActionLink>;
+}
+
+type LogoType$1 = 'TEXT' | 'IMAGE';
+interface LogoContent {
+    readonly type: ComputedRef<LogoType$1 | undefined>;
+    readonly text: ComputedRef<string | undefined>;
+    readonly image: ComputedRef<{
+        lowResolutionMobileImage: string | undefined;
+        highResolutionMobileImage: string | undefined;
+        lowResolutionDesktopImage: string | undefined;
+        highResolutionDesktopImage: string | undefined;
+    } | undefined>;
+}
+interface LogoContentData {
+    readonly type: LogoType$1;
+    readonly text: string;
+    readonly image: ImageContentData;
+}
+
+type ContentSettings = Record<string, ContentEditor>;
+type MandatoryContentSettings = {
+    menu: NavigationMenuContentEditor;
+    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 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>;
+}
+
+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;
+}
+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 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;
+
+interface TemplatePage {
+    id: string;
+    type: TemplatePageEnum;
+    readonly sections: TemplateSection[];
+}
+
+interface TemplateConfiguration {
+    metadata: TemplateMetadata;
+}
+interface TemplateSinglePageConfiguration extends TemplateConfiguration {
+    readonly sections: TemplateSection[];
+}
+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 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 InputBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+declare function useInputboxElementContent<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 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;
+};
+
+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 ToggleContent {
+    hasContent: boolean;
+    value: boolean;
+}
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): {
+    hasContent: boolean;
+    value: boolean | undefined;
+};
+
+interface SelectBoxContent {
+    hasContent: boolean;
+    value: string;
+}
+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>;
+};
+
+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 useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    appearance: ButtonAppearance | undefined;
+    font: string | undefined;
+    size: ButtonSize | undefined;
+    style: ButtonStyle | undefined;
+    color: Color | GlobalColorsString | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    overlay: Overlay | undefined;
+    visible: boolean | undefined;
+};
+
+declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    enabled: boolean | undefined;
+};
+
+declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    value: string | undefined;
+};
+
+declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): {
+    background: Background | undefined;
+};
+
+declare function useLayoutElementDesign(): {
+    layout: string | undefined;
+};
+
+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;
+}
+interface VueRenderResult {
+    readonly html: string;
+    readonly state: unknown;
+}
+declare function createVueServerApp<C, D>(appComponent: Component, extensions?: VueServerAppExtensions): {
+    init: () => {
+        render: (context: AppBaseContext, data: AppBaseData<C, D>) => Promise<VueRenderResult>;
+    };
+};
+
+interface VueClientAppExtensions {
+    init?: (app: App<Element>) => void;
+    mount?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, rootContainer: string, state: S) => void;
+    update?: <C, D, S extends AppBaseState<C, D>>(app: App<Element>, state: S) => void;
+    unmount?: (app: App<Element>) => void;
+}
+declare function createVueClientApp<C, D>(appComponent: Component, extensions?: VueClientAppExtensions): {
+    init: () => {
+        mount: <S extends AppBaseState<C, D>>(rootContainer: string, state: S) => void;
+        update: <S extends AppBaseState<C, D>>(state: S) => void;
+        unmount: () => void;
+    };
+};
+
+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;
+
+declare const CatalogLayoutSlot: {
+    readonly PRODUCT_LIST: "CONTROLS";
+    readonly BOTTOM_BAR: "FOOTER";
+    readonly CUSTOM_SLOT: "CUSTOM_SLOT";
+};
+declare const CategoryLayoutSlot: {
+    readonly CATEGORY_TITLE: "MAIN_TITLE";
+    readonly PRODUCT_LIST: "CONTROLS";
+    readonly BOTTOM_BAR: "FOOTER";
+    readonly CUSTOM_SLOT: "CUSTOM_SLOT";
+};
+declare const ProductLayoutSlot: {
+    readonly TOP_BAR: "TOP_BAR";
+    readonly GALLERY: "GALLERY";
+    readonly SIDEBAR: "SIDEBAR";
+    readonly DESCRIPTION: "DESCRIPTION";
+    readonly REVIEW_LIST: "REVIEW_LIST";
+    readonly RELATED_PRODUCTS: "RELATED_PRODUCTS";
+    readonly BOTTOM_BAR: "FOOTER";
+    readonly CUSTOM_SLOT: "CUSTOM_SLOT";
+};
+
+export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplatePageEnum, ValidationTypeEnum, createVueClientApp, createVueServerApp, useBackgroundElementDesign, useButtonElementContent, useButtonElementDesign, useCategorySelectorElementContent, useDeckElementContent, useImageElementContent, useImageElementDesign, useInputboxElementContent, useInstantsiteJsApi, useLayoutElementDesign, useLogoElementContent, useLogoElementDesign, useMenuElementContent, useNavigationMenuElementContent, useProductSelectorElementContent, useSelectboxElementContent, useSelectboxElementDesign, useTextElementDesign, useTextareaElementContent, useTextareaElementDesign, useToggleElementContent, useToggleElementDesign, useTranslation, useVueBaseProps };
+export type { ActionLink, AppBaseContext, AppBaseData, AppBaseState, Background$1 as Background, BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundType, ButtonAppearance$1 as ButtonAppearance, ButtonContent, ButtonContentData, ButtonContentEditor, ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize$1 as ButtonSize, ButtonStyle$1 as ButtonStyle, CapitalizationType, Card$1 as Card, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, Color$1 as Color, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentSettings, Deck, DeckContent, DeckContentEditor, DefaultSectionId, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerDesignEditor, Font, Frame, GlobalColorsString$1 as GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString$1 as GlobalTextSizeString, GradientColor, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData, ImageDesignEditor, ImageDesignEditorDefaults, ImageDesignEditorDefaultsTransformed, ImageInfoData, InputBoxContent, InputboxContentEditor, InputboxContentEditorDefaults, InstantsiteJSAPI$1 as InstantsiteJSAPI, InstantsiteTilePromise$1 as InstantsiteTilePromise, LayoutDesignData, LayoutDesignOverride, LayoutSettings, LogoContent, LogoContentData, LogoContentEditor, LogoContentEditorDefaults, LogoDesignData$1 as LogoDesignData, LogoDesignEditor, LogoDesignEditorDefaults, LogoDesignEditorDefaultsTransformed, LogoType$1 as LogoType, MandatoryContentSettings, MandatoryDesignSettings, MenuContent, MenuContentData, MenuContentEditor, NavigationMenuContentEditor, Overlay$1 as Overlay, OverlayType, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, RGBAColor, SelectBoxContent, SelectboxContentEditor, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, Showcase, ShowcaseOverride, SolidColor, StorePageConfiguration, StorefrontSectionId, TemplateConfiguration, TemplateConfigurationType, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplateMultiPageConfiguration, TemplatePage, TemplateSection, TemplateSettings, TemplateSinglePageConfiguration, TemplateStorefrontSection, TextAreaContent, TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleDesignData, ToggleDesignEditor, TransformedFrame, TranslationSettings, VuegaPageId };