@lightspeed/crane-api 1.0.2 → 1.1.0

package/dist/index.d.mts

@@ -1,262 +1,41 @@
 import * as vue 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;
-    value: string | 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;
-} | {
-    hasContent: boolean;
-    lowResolutionMobileImage: string;
-    highResolutionMobileImage: string;
-    lowResolutionDesktopImage: string;
-    highResolutionDesktopImage: string;
-} | {
-    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;
-};
+import { Reactive, ComputedRef, Component, App, Ref } from 'vue';
 
 /**
- * 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
+ * Menu item with action link.
  *
- * @example
- * ```ts
- * import { useTranslation } from '@lightspeed/crane';
+ * Used in buttons and navigation menus. The `performAction` method triggers
+ * the appropriate navigation based on the link type.
  *
- * const { t } = useTranslation();
- * const title = t('$label.shared.title');
- * ```
+ * @see {@link MenuContent}
+ * @see {@link useButtonElementContent}
  */
-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;
-};
+interface ActionLink {
+    /** Unique identifier */
+    id: string;
+    /** Menu item text displayed to the user */
+    title?: string;
+    /** Action type (e.g., 'HYPER_LINK', 'SCROLL_TO_TILE', 'GO_TO_PAGE') */
+    type?: string;
+    /** URL for hyperlinks */
+    link?: string;
+    /** Email address for mailto links */
+    email?: string;
+    /** Phone number for tel links */
+    phone?: string;
+    /** Section ID for scroll-to-section links */
+    tileIdForScroll?: string;
+    /** Page ID for page navigation */
+    pageIdForNavigate?: string;
+    /** Whether to show store categories submenu */
+    showStoreCategories?: boolean;
+    /** Whether submenu is currently open */
+    isSubmenuOpened?: boolean;
+    /** Category ID for category links */
+    categoryId?: number;
+    /** Triggers the navigation action */
+    performAction?: () => void;
+}
 
 declare enum ButtonTypeEnum {
     SCROLL_TO_TILE = "SCROLL_TO_TILE",
@@ -357,6 +136,12 @@ declare enum TemplatePageEnum {
     HOME = "HOME",
     CUSTOM = "CUSTOM"
 }
+declare enum ReservedTemplatePageNameEnum {
+    HOME = "home",
+    CATALOG = "catalog",
+    CATEGORY = "category",
+    PRODUCT = "product"
+}
 
 declare enum ValidationTypeEnum {
     CONTENT = "Content",
@@ -366,78 +151,406 @@ declare enum ValidationTypeEnum {
 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;
+/**
+ * Return type for `useButtonElementContent` composable.
+ *
+ * Represents a button with action link from the editor.
+ * The `type` field determines which action fields are used.
+ *
+ * @see {@link useButtonElementContent}
+ * @see {@link ButtonTypeEnum}
+ */
+interface ButtonContentData {
+    /** Button text displayed to the user */
+    title: string;
+    /** Action type determining button behavior */
+    type: ButtonTypeEnum;
+    /** URL for HYPER_LINK type */
+    link?: string;
+    /** Email address for MAIL_LINK type */
+    email?: string;
+    /** Phone number for TEL_LINK type */
+    phone?: string;
+    /** Section ID for SCROLL_TO_TILE type */
+    tileId?: string;
+    /** Page ID for GO_TO_PAGE type */
+    pageId?: string;
+    /** Page URL for GO_TO_PAGE type */
+    pageUrl?: string;
+    hasTitle?: boolean;
+    hasLink?: boolean;
+    performAction?: () => void;
 }
-interface ImageBorderInfoData {
-    readonly homogeneity?: boolean;
-    readonly color?: {
-        readonly r: number;
-        readonly g: number;
-        readonly b: number;
-        readonly a: number;
+
+/**
+ * Raw category selector data from the editor.
+ *
+ * @see {@link CategorySelector}
+ */
+interface CategorySelectorData {
+    readonly categories: {
+        /** Array of selected category IDs */
+        readonly categoryIds: Array<number>;
+        /** Array of category items with custom settings */
+        readonly items: Array<CategoryItemData>;
+        /** Selection mode: 'ROOT' for all root categories, 'MANUAL' for user-selected */
+        readonly selectionType: CategorySelectionType;
     };
 }
-interface Frame {
-    visible: boolean;
-    width: number | undefined;
-    color: string | GlobalColorsString$1 | undefined;
+/**
+ * Return type for `useCategorySelectorElementContent` composable.
+ *
+ * Represents store categories selected by the user in the editor.
+ *
+ * @see {@link useCategorySelectorElementContent}
+ * @see {@link CategorySelectorData}
+ */
+interface CategorySelector {
+    /** Array of selected category objects with id, name, imageUrl, etc. */
+    categories: CategoryListComponentItem[];
+    /** `true` if at least one category is selected */
+    hasCategories: boolean;
+    /** Array of selected category IDs */
+    categoryIds: Array<number>;
+    /** `true` if selector data exists */
+    hasContent: boolean;
 }
-interface TransformedFrame extends Omit<Frame, 'color'> {
-    color?: Color$1 | undefined;
+
+declare enum EditorTypes {
+    INPUTBOX = "INPUTBOX",
+    TEXTAREA = "TEXTAREA",
+    BUTTON = "BUTTON",
+    IMAGE = "IMAGE",
+    TOGGLE = "TOGGLE",
+    SELECTBOX = "SELECTBOX"
+}
+/** Gets a reactive reference to a field within a DECK card. */
+declare function getReactiveRef(card: Card | undefined, editorType: EditorTypes, contentElementName: string): {
+    readonly hasContent: boolean;
+    readonly value: string | undefined;
+} | {
+    readonly hasContent: boolean;
+    readonly lowResolutionMobileImage: string | undefined;
+    readonly highResolutionMobileImage: string | undefined;
+    readonly lowResolutionDesktopImage: string | undefined;
+    readonly highResolutionDesktopImage: string | undefined;
+} | {
+    readonly hasContent: boolean;
+    readonly value: boolean | undefined;
+} | {
+    title?: string | undefined;
+    type?: ButtonTypeEnum | undefined;
+    link?: string | undefined;
+    email?: string | undefined;
+    phone?: string | undefined;
+    tileId?: string | undefined;
+    pageId?: string | undefined;
+    pageUrl?: string | undefined;
+    hasTitle?: boolean | undefined;
+    hasLink?: boolean | undefined;
+    performAction?: (() => void) | undefined;
+} | undefined;
+/**
+ * Composable for accessing DECK content (card collection, up to 10 items).
+ *
+ * Used for sliders, carousels, feature lists, and repeatable content blocks.
+ * Each card in the deck has its own settings that can be accessed via `getReactiveRef`.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the DECK element in content settings
+ *
+ * @returns `Reactive<DeckContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if deck has at least one card
+ * - `cards: ComputedRef<ReadonlyArray<Card> | undefined>` — array of Card objects
+ * - `getReactiveRef: (card, editorType, fieldName) => Reactive<...>` — get reactive content from a card field
+ *
+ * Card interface:
+ * - `title: string` — card title
+ * - `settings: ContentSettings` — card content settings
+ *
+ * @see {@link DeckContent}
+ * @see {@link Card}
+ * @see {@link Deck}
+ * @see {@link EditorTypes} — enum for accessing card fields
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   slides: {
+ *     type: 'DECK',
+ *     label: '$label.slides',
+ *     max: 5,
+ *     item: {
+ *       title: { type: 'INPUTBOX', label: '$label.slide_title' },
+ *       image: { type: 'IMAGE', label: '$label.slide_image' },
+ *       button: { type: 'BUTTON', label: '$label.slide_button' },
+ *     },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * import { useDeckElementContent, EditorTypes } from '@lightspeed/crane-api';
+ *
+ * const slides = useDeckElementContent<ContentType>('slides');
+ *
+ * // Template
+ * <div v-if="slides.hasContent" class="slider">
+ *   <div v-for="card in slides.cards" :key="card.title" class="slide">
+ *     <template v-if="slides.getReactiveRef(card, EditorTypes.INPUTBOX, 'title')?.hasContent">
+ *       {{ slides.getReactiveRef(card, EditorTypes.INPUTBOX, 'title').value }}
+ *     </template>
+ *   </div>
+ * </div>
+ * ```
+ */
+declare function useDeckElementContent<CONTENT>(elementName: keyof CONTENT): Reactive<DeckContent>;
+
+/**
+ * A single card within a DECK collection.
+ *
+ * Each card has its own content settings that can be accessed
+ * via `getReactiveRef` method.
+ *
+ * @see {@link DeckContent}
+ */
+interface Card {
+    /** Card title (used as identifier in the editor) */
+    title: string;
+    /** Card content settings containing all field values */
+    settings: ContentSettings;
+}
+/**
+ * Raw DECK data from the editor.
+ *
+ * @see {@link Card}
+ */
+interface Deck {
+    /** Array of cards in the deck (up to 10) */
+    readonly cards: ReadonlyArray<Card>;
+}
+/**
+ * Return type for `useDeckElementContent` composable.
+ *
+ * Represents a collection of cards (up to 10 items).
+ * Use `getReactiveRef` to access individual card fields.
+ *
+ * @see {@link useDeckElementContent}
+ * @see {@link Card}
+ */
+interface DeckContent {
+    /** `true` if deck has at least one card */
+    readonly hasContent: ComputedRef<boolean>;
+    /** Array of Card objects */
+    readonly cards: ComputedRef<ReadonlyArray<Card> | undefined>;
+    /** Get reactive content from a card field */
+    readonly getReactiveRef: typeof getReactiveRef;
 }
 
+/**
+ * HSL color representation with alpha channel.
+ *
+ * @see {@link Color}
+ */
 interface HSLColor {
+    /** Hue (0-360) */
     h: number;
+    /** Saturation (0-100) */
     s: number;
+    /** Lightness (0-100) */
     l: number;
+    /** Alpha/opacity (0-1) */
     a: number;
 }
+/**
+ * RGBA color representation.
+ *
+ * @see {@link Color}
+ */
 interface RGBAColor {
+    /** Red (0-255) */
     r: number;
+    /** Green (0-255) */
     g: number;
+    /** Blue (0-255) */
     b: number;
+    /** Alpha/opacity (0-1) */
     a: number;
 }
-interface Color$1 {
+/**
+ * Color value from the editor.
+ *
+ * Can be a global color reference or a structured color with multiple formats.
+ *
+ * @see {@link HSLColor}
+ * @see {@link RGBAColor}
+ */
+interface Color$1 {
+    /** Color type: 'GLOBAL_COLOR' for theme colors, 'STRUCTURED_COLOR' for custom */
     type: 'GLOBAL_COLOR' | 'STRUCTURED_COLOR';
+    /** Raw color string (e.g., '#ffffff', 'rgba(0,0,0,0.5)') */
     raw?: string;
+    /** Hex color value (e.g., '#ffffff') */
     hex?: string;
+    /** HSL representation */
     hsl?: HSLColor;
+    /** RGBA representation */
     rgba?: RGBAColor;
+    /** Whether color was auto-calculated */
     auto?: boolean;
 }
 
-type GlobalColorsString$1 = 'global.color.title' | 'global.color.body' | 'global.color.button' | 'global.color.link' | 'global.color.background';
+/**
+ * Global color reference strings.
+ *
+ * Use these to reference theme colors that update automatically
+ * when the site theme changes.
+ */
+type GlobalColorsString = 'global.color.title' | 'global.color.body' | 'global.color.button' | 'global.color.link' | 'global.color.background';
+/**
+ * Global font reference strings.
+ *
+ * Use these to reference theme fonts that update automatically
+ * when the site theme changes.
+ */
 type GlobalFontsString = 'global.fontFamily.title' | 'global.fontFamily.body';
-type GlobalTextSizeString$1 = 'global.textSize.title' | 'global.textSize.subtitle' | 'global.textSize.body';
+/**
+ * Global text size reference strings.
+ *
+ * Use these to reference theme text sizes that update automatically
+ * when the site theme changes.
+ */
+type GlobalTextSizeString = 'global.textSize.title' | 'global.textSize.subtitle' | 'global.textSize.body';
+/**
+ * Font configuration.
+ *
+ * @see {@link GlobalFontsString}
+ */
 interface Font {
+    /** Font type: 'GLOBAL_FONT' for theme fonts, 'PRESET_FONT' for custom */
     type: 'GLOBAL_FONT' | 'PRESET_FONT';
+    /** Font family name */
     font: string;
 }
+/**
+ * Text size configuration.
+ *
+ * @see {@link GlobalTextSizeString}
+ */
 interface TextSize {
+    /** Size type: 'GLOBAL_TEXT_SIZE' for theme sizes, 'NUMERIC_TEXT_SIZE' for custom */
     type: 'GLOBAL_TEXT_SIZE' | 'NUMERIC_TEXT_SIZE';
+    /** Size value (string for global, number for custom) */
     size: string | number;
 }
+/**
+ * Text capitalization/transform type.
+ *
+ * - 'none' — no transformation
+ * - 'all' — UPPERCASE
+ * - 'small' — Capitalize First Letter
+ */
 type CapitalizationType = 'none' | 'all' | 'small';
 
+/**
+ * Global design settings from the site theme.
+ *
+ * Contains font families, text sizes, and colors that can be
+ * referenced using global strings (e.g., 'global.fontFamily.title').
+ *
+ * @see {@link GlobalFontsString}
+ * @see {@link GlobalTextSizeString}
+ * @see {@link GlobalColorsString}
+ */
 interface GlobalDesign$1 {
+    /** Font family mappings (e.g., { title: 'Roboto', body: 'Open Sans' }) */
     readonly fontFamily: Record<string, string>;
+    /** Text size mappings in pixels (e.g., { title: 48, subtitle: 32, body: 16 }) */
     readonly textSize: Record<string, number>;
+    /** Color mappings (e.g., { title: Color, body: Color, background: Color }) */
     readonly color: Record<string, Color$1>;
 }
 
+/**
+ * Image resolution variants.
+ *
+ * Used to access different image sizes from `ImageContentData.set`.
+ *
+ * @see {@link ImageContentData}
+ */
+declare enum ImageSet {
+    /** Original uploaded image */
+    ORIGINAL = "original",
+    /** Low resolution WebP (200x200) for placeholders */
+    WEBP_LOW_RES = "webp-200x200",
+    /** High resolution WebP (2000x2000) for desktop */
+    WEBP_HI_2X_RES = "webp-2000x2000",
+    /** Low resolution mobile WebP (100x200) for placeholders */
+    MOBILE_WEBP_LOW_RES = "cropped-webp-100x200",
+    /** High resolution mobile WebP (1000x2000) */
+    MOBILE_WEBP_HI_RES = "cropped-webp-1000x2000"
+}
+/**
+ * Image information for a specific resolution.
+ *
+ * @see {@link ImageSet}
+ */
+interface ImageInfoData {
+    /** Image URL */
+    readonly url?: string;
+    /** Image width in pixels */
+    readonly width?: number;
+    /** Image height in pixels */
+    readonly height?: number;
+}
+/**
+ * Image border/edge detection information.
+ *
+ * Used for determining if image has uniform edges.
+ */
+interface ImageBorderInfoData {
+    /** Whether the image border is homogeneous */
+    readonly homogeneity?: boolean;
+    /** Border color (if homogeneous) */
+    readonly color?: {
+        readonly r: number;
+        readonly g: number;
+        readonly b: number;
+        readonly a: number;
+    };
+}
+/**
+ * Logo frame/border configuration.
+ *
+ * @see {@link LogoDesignData}
+ */
+interface Frame {
+    /** Whether frame is visible */
+    visible: boolean;
+    /** Frame width in pixels */
+    width: number | undefined;
+    /** Frame color */
+    color: string | GlobalColorsString | undefined;
+}
+/**
+ * Transformed frame with resolved color.
+ *
+ * @see {@link Frame}
+ */
+interface TransformedFrame extends Omit<Frame, 'color'> {
+    /** Resolved color value */
+    color?: Color$1 | undefined;
+}
+
+/**
+ * Instantsite JavaScript API events.
+ *
+ * Used with `useInstantsiteJsApi` composable for lifecycle events.
+ */
 declare enum InstantsiteJsEvent {
+    /** Fired when a section (tile) is loaded and visible */
     TILE_LOADED = "tile-loaded",
+    /** Fired when a section (tile) is unloaded/hidden */
     TILE_UNLOADED = "tile-unloaded"
 }
 interface InstantsiteTilePromise$1 {
@@ -503,39 +616,241 @@ interface InstantsiteJSAPI$1 {
     openSearchPage: (keyword: string | undefined) => void;
 }
 
-interface TemplateSettings {
-    readonly metadata: TemplateMetadata;
-    readonly sections: TemplateSection[];
+/**
+ * Return type for `useImageElementContent` composable.
+ *
+ * Provides responsive image URLs for different resolutions and devices.
+ * Use low-resolution images as placeholders while high-resolution loads.
+ *
+ * @see {@link useImageElementContent}
+ */
+interface ImageContent {
+    /** `true` if an image has been uploaded */
+    readonly hasContent: ComputedRef<boolean>;
+    /** Mobile placeholder image URL (low resolution) */
+    readonly lowResolutionMobileImage: ComputedRef<string | undefined>;
+    /** Mobile full quality image URL */
+    readonly highResolutionMobileImage: ComputedRef<string | undefined>;
+    /** Desktop placeholder image URL (low resolution) */
+    readonly lowResolutionDesktopImage: ComputedRef<string | undefined>;
+    /** Desktop full quality image URL */
+    readonly highResolutionDesktopImage: ComputedRef<string | undefined>;
 }
-
-declare const TemplateCategoriesList: {
-    readonly apparel_footwear: "apparel_footwear";
-    readonly vape_smoke: "vape_smoke";
-    readonly home_garden: "home_garden";
-    readonly sport_outdoor: "sport_outdoor";
-    readonly jewelry_accessories: "jewelry_accessories";
-    readonly pet_animals: "pet_animals";
-    readonly bikes: "bikes";
-    readonly health_beauty: "health_beauty";
-    readonly gift_shop: "gift_shop";
-    readonly electronics: "electronics";
-    readonly other: "other";
-};
-type TemplateCategory = typeof TemplateCategoriesList[keyof typeof TemplateCategoriesList];
-
+/**
+ * Raw image data from the editor.
+ *
+ * Contains image set with different resolutions and border info.
+ *
+ * @see {@link ImageSet}
+ * @see {@link ImageInfoData}
+ */
 interface ImageContentData {
+    /** Border/edge detection info for the image */
     readonly borderInfo?: ImageBorderInfoData;
+    /** Image URLs for different resolutions */
     readonly set: {
         [key in ImageSet]?: ImageInfoData;
     };
 }
 
-interface TemplateMetadata {
-    readonly name: string;
-    readonly description?: string;
-    readonly preview_url?: string;
-    readonly cover_image?: ImageContentData;
-    readonly categories?: TemplateCategory[];
+/**
+ * Return type for `useInputboxElementContent` composable.
+ *
+ * Represents a single-line text input field from the editor.
+ *
+ * @see {@link useInputboxElementContent}
+ */
+interface InputBoxContent {
+    /** `true` if the field has non-empty text */
+    readonly hasContent: ComputedRef<boolean>;
+    /** The text string entered by the user */
+    readonly value: ComputedRef<string | undefined>;
+}
+
+/** Logo display type: text-based or image-based */
+type LogoType = 'TEXT' | 'IMAGE';
+/**
+ * Return type for `useLogoElementContent` composable.
+ *
+ * Represents site logo in headers/footers.
+ * Can be either text-based or image-based depending on `type`.
+ *
+ * @see {@link useLogoElementContent}
+ * @see {@link LogoType}
+ */
+interface LogoContent {
+    /** Logo type: 'TEXT' or 'IMAGE' */
+    readonly type: ComputedRef<LogoType | undefined>;
+    /** Text content (when type is 'TEXT') */
+    readonly text: ComputedRef<string | undefined>;
+    /** Image URLs (when type is 'IMAGE') */
+    readonly image: ComputedRef<{
+        lowResolutionMobileImage: string | undefined;
+        highResolutionMobileImage: string | undefined;
+        lowResolutionDesktopImage: string | undefined;
+        highResolutionDesktopImage: string | undefined;
+    } | undefined>;
+}
+/**
+ * Raw logo data from the editor.
+ *
+ * @see {@link LogoContent}
+ */
+interface LogoContentData {
+    /** Logo type: 'TEXT' or 'IMAGE' */
+    readonly type: LogoType;
+    /** Text content for text logo */
+    readonly text: string;
+    /** Image data for image logo */
+    readonly image: ImageContentData;
+}
+
+/**
+ * Return type for `useMenuElementContent` and `useNavigationMenuElementContent` composables.
+ *
+ * Represents a navigation menu with action links.
+ *
+ * @see {@link useMenuElementContent}
+ * @see {@link useNavigationMenuElementContent}
+ * @see {@link ActionLink}
+ */
+interface MenuContent {
+    /** `true` if menu has at least one item */
+    readonly hasContent: ComputedRef<boolean>;
+    /** Array of menu items with title, type, link, and performAction */
+    readonly items: ComputedRef<ActionLink[]>;
+}
+/**
+ * Raw menu data from the editor.
+ *
+ * @see {@link MenuContent}
+ * @see {@link ActionLink}
+ */
+interface MenuContentData {
+    /** Array of menu items */
+    readonly items: ReadonlyArray<ActionLink>;
+}
+
+/**
+ * Raw product selector data from the editor.
+ *
+ * @see {@link ProductSelector}
+ */
+interface ProductSelectorData {
+    /** Single product selection (legacy) */
+    readonly product?: {
+        readonly id: number;
+    };
+    /** Multiple products selection */
+    readonly products?: {
+        /** Array of selected product IDs */
+        readonly productIds: Array<number>;
+        /** Selection mode */
+        readonly selectionType: keyof typeof ProductSelectionType;
+    };
+    /** Category ID for category-based selection */
+    readonly categoryId?: string;
+}
+/**
+ * Return type for `useProductSelectorElementContent` composable.
+ *
+ * Represents store products selected by the user in the editor.
+ *
+ * @see {@link useProductSelectorElementContent}
+ * @see {@link ProductSelectorData}
+ */
+interface ProductSelector {
+    /** Array of selected product objects with id, name, price, imageUrl, etc. */
+    products: ProductListComponentItem[];
+    /** `true` if at least one product is selected */
+    hasProducts: boolean;
+    /** Array of categories (when using category selection) */
+    categories: CategoryListComponentItem[];
+    /** Selected category ID (when using category selection) */
+    categoryId?: number;
+    /** `true` if selector data exists */
+    hasContent: boolean;
+}
+
+/**
+ * Return type for `useSelectboxElementContent` composable.
+ *
+ * Represents a dropdown selection from the editor.
+ *
+ * @see {@link useSelectboxElementContent}
+ */
+interface SelectBoxContent {
+    /** `true` if a selection has been made */
+    readonly hasContent: ComputedRef<boolean>;
+    /** The selected option value */
+    readonly value: ComputedRef<string | undefined>;
+}
+
+/**
+ * Return type for `useTextareaElementContent` composable.
+ *
+ * Represents a multi-line text input field from the editor.
+ * Preserves line breaks entered by the user.
+ *
+ * @see {@link useTextareaElementContent}
+ */
+interface TextAreaContent {
+    /** `true` if the field has non-empty text */
+    readonly hasContent: ComputedRef<boolean>;
+    /** The multi-line text string entered by the user */
+    readonly value: ComputedRef<string | undefined>;
+}
+
+/**
+ * Return type for `useToggleElementContent` composable.
+ *
+ * Represents a boolean toggle switch from the editor.
+ *
+ * @see {@link useToggleElementContent}
+ */
+interface ToggleContent {
+    /** `true` if toggle data exists */
+    readonly hasContent: ComputedRef<boolean>;
+    /** The toggle state: `true` if enabled, `false` if disabled */
+    readonly value: ComputedRef<boolean | undefined>;
+}
+/**
+ * Raw toggle data from the editor.
+ */
+interface ToggleContentData {
+    /** Whether the toggle is enabled */
+    readonly enabled: boolean;
+}
+
+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;
+    readonly text?: string;
+}
+interface ProductSelectorContentEditorDefaults {
+    readonly maxProducts: number;
+}
+interface CategorySelectorContentEditorDefaults {
+    readonly maxCategories: number;
 }
 
 interface InputboxContentEditor {
@@ -611,119 +926,23 @@ interface CategorySelectorContentEditor {
 }
 type ContentEditor = TextareaContentEditor | InputboxContentEditor | ButtonContentEditor | ImageContentEditor | ToggleContentEditor | SelectboxContentEditor | DeckContentEditor | MenuContentEditor | NavigationMenuContentEditor | LogoContentEditor | ProductSelectorContentEditor | CategorySelectorContentEditor;
 
-interface InputboxContentEditorDefaults {
-    readonly text: string;
+type ContentSettings = Record<string, ContentEditor>;
+type MandatoryContentSettings = {
+    menu: NavigationMenuContentEditor;
+    logo: LogoContentEditor;
+} | Record<string, never>;
+
+interface TextDesignEditor {
+    readonly type: 'TEXT';
+    readonly label: string | Record<string, string>;
+    readonly colors: ReadonlyArray<string>;
+    readonly sizes: ReadonlyArray<number>;
+    defaults?: TextDesignEditorDefaults;
 }
-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 {
-    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 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 ButtonDesignEditor {
+    readonly type: 'BUTTON';
+    readonly label: string | Record<string, string>;
+    defaults?: ButtonDesignEditorDefaults;
 }
 interface ImageDesignEditor {
     readonly type: 'IMAGE';
@@ -812,7 +1031,7 @@ interface TextDesignEditorDefaultsTransformed {
     readonly size?: TextSize | string;
 }
 interface ImageDesignEditorDefaultsTransformed {
-    readonly overlay: Overlay$1;
+    readonly overlay: Overlay;
 }
 interface ColorPickerDesignEditorDefaultsTransformed {
     readonly color?: Color$1;
@@ -826,7 +1045,7 @@ interface ButtonDesignEditorDefaultsTransformed {
     readonly visible?: boolean;
 }
 interface BackgroundDesignEditorDefaultsTransformed {
-    readonly background: Background$1;
+    readonly background: Background;
 }
 interface LogoDesignEditorDefaultsTransformed {
     readonly font?: Font;
@@ -836,85 +1055,245 @@ interface LogoDesignEditorDefaultsTransformed {
 }
 type DesignEditorDefaultsTransformed = TextDesignEditorDefaultsTransformed | ButtonDesignEditorDefaultsTransformed | ImageDesignEditorDefaultsTransformed | BackgroundDesignEditorDefaultsTransformed | ColorPickerDesignEditorDefaultsTransformed | LogoDesignEditorDefaultsTransformed;
 
+/** Background type: solid color or gradient */
 type BackgroundType = 'solid' | 'gradient';
+/**
+ * Solid color configuration.
+ *
+ * @see {@link Background}
+ */
 interface SolidColor {
+    /** The solid color value */
     color: Color$1 | undefined;
 }
+/**
+ * Gradient color configuration.
+ *
+ * @see {@link Background}
+ */
 interface GradientColor {
+    /** Gradient start color */
     fromColor: Color$1 | undefined;
+    /** Gradient end color */
     toColor: Color$1 | undefined;
 }
-interface Background$1 {
+/**
+ * Background configuration with solid or gradient options.
+ *
+ * @see {@link BackgroundDesignData}
+ * @see {@link BackgroundType}
+ */
+interface Background {
+    /** Background type: 'solid' or 'gradient' */
     type: BackgroundType | undefined;
+    /** Solid color configuration */
     solid: SolidColor | undefined;
+    /** Gradient color configuration */
     gradient: GradientColor | undefined;
 }
-interface BackgroundDesignData {
-    background: Background$1 | undefined;
+/**
+ * Return type for `useBackgroundElementDesign` composable.
+ *
+ * Provides background styling options from the design settings.
+ *
+ * @see {@link useBackgroundElementDesign}
+ * @see {@link Background}
+ */
+interface BackgroundDesignData$1 {
+    /** Background configuration */
+    background: Background | undefined;
 }
 
-type ButtonAppearance$1 = 'solid-button' | 'outline-button' | 'text-link';
-type ButtonSize$1 = 'small' | 'medium' | 'large';
-type ButtonStyle$1 = 'round-corner' | 'rectangle' | 'pill';
+/** Button fill style */
+type ButtonAppearance = 'solid-button' | 'outline-button' | 'text-link';
+/** Button size */
+type ButtonSize = 'small' | 'medium' | 'large';
+/** Button shape/corner style */
+type ButtonStyle = 'round-corner' | 'rectangle' | 'pill';
+/**
+ * Return type for `useButtonElementDesign` composable.
+ *
+ * Provides button styling options from the design settings.
+ *
+ * @see {@link useButtonElementDesign}
+ * @see {@link ButtonAppearance}
+ * @see {@link ButtonSize}
+ * @see {@link ButtonStyle}
+ */
 interface ButtonDesignData {
-    appearance: ButtonAppearance$1 | undefined;
+    /** Button fill style: 'solid-button', 'outline-button', or 'text-link' */
+    appearance: ButtonAppearance | undefined;
+    /** Font family name */
     font: string | GlobalFontsString | undefined;
-    size: ButtonSize$1 | undefined;
-    style: ButtonStyle$1 | undefined;
-    color: Color$1 | GlobalColorsString$1 | undefined;
-    visible: boolean;
+    /** Button size: 'small', 'medium', or 'large' */
+    size: ButtonSize | undefined;
+    /** Button shape: 'round-corner', 'rectangle', or 'pill' */
+    style: ButtonStyle | undefined;
+    /** Button color */
+    color: Color | GlobalColorsString | undefined;
+    /** `true` if button should be displayed */
+    visible?: boolean;
 }
 
+/** Overlay type: solid color, gradient, or none */
 type OverlayType = 'solid' | 'gradient' | 'none';
-interface Overlay$1 {
+/**
+ * Image overlay configuration.
+ *
+ * Used to add color or gradient overlay on top of images.
+ *
+ * @see {@link ImageDesignData}
+ * @see {@link OverlayType}
+ */
+interface Overlay {
+    /** Overlay type: 'solid', 'gradient', or 'none' */
     type: OverlayType | undefined;
+    /** Solid color overlay (with alpha for transparency) */
     solid: SolidColor | undefined;
+    /** Gradient overlay */
     gradient: GradientColor | undefined;
 }
-interface ImageDesignData {
-    overlay: Overlay$1 | undefined;
-    visible: boolean;
+/**
+ * Return type for `useImageElementDesign` composable.
+ *
+ * Provides image overlay styling options from the design settings.
+ *
+ * @see {@link useImageElementDesign}
+ * @see {@link Overlay}
+ */
+interface ImageDesignData$1 {
+    /** Overlay configuration */
+    overlay: Overlay | undefined;
+    /** `true` if image should be displayed */
+    visible?: boolean;
 }
 
-interface TextDesignData {
+/**
+ * Return type for `useTextElementDesign` composable.
+ *
+ * Provides text styling options from the design settings.
+ * Supports global design references (e.g., 'global.fontFamily.title').
+ *
+ * @see {@link useTextElementDesign}
+ * @see {@link GlobalFontsString}
+ * @see {@link GlobalTextSizeString}
+ */
+interface TextDesignData$1 {
+    /** Font family name (can be global reference) */
     font: string | GlobalFontsString | undefined;
-    size: number | GlobalTextSizeString$1 | undefined;
+    /** Font size in pixels (can be global reference) */
+    size: number | GlobalTextSizeString | undefined;
+    /** `true` if text should be bold */
     bold: boolean | undefined;
+    /** `true` if text should be italic */
     italic: boolean | undefined;
+    /** Text color */
     color: Color$1 | undefined;
-    visible: boolean;
+    /** `true` if element should be displayed */
+    visible?: boolean;
 }
-interface TextareaDesignData extends TextDesignData {
+/**
+ * Return type for `useTextareaElementDesign` composable.
+ *
+ * Extends TextDesignData with whiteSpace for preserving line breaks.
+ *
+ * @see {@link useTextareaElementDesign}
+ * @see {@link TextDesignData}
+ */
+interface TextareaDesignData$1 extends TextDesignData$1 {
+    /** Always 'pre-wrap' to preserve line breaks */
     readonly whiteSpace: string;
 }
 
+/**
+ * Return type for `useToggleElementDesign` composable.
+ *
+ * Provides toggle state from the design settings.
+ *
+ * @see {@link useToggleElementDesign}
+ */
 interface ToggleDesignData {
+    /** `true` if the toggle is enabled */
     enabled: boolean | undefined;
 }
 
+/**
+ * Return type for `useSelectboxElementDesign` composable.
+ *
+ * Provides selected value from the design settings.
+ *
+ * @see {@link useSelectboxElementDesign}
+ */
 interface SelectboxDesignData {
+    /** The selected option value */
     value: string | undefined;
 }
 
+/**
+ * Return type for `useLayoutElementDesign` composable.
+ *
+ * Provides layout identifier from the design settings.
+ * Used for sections with multiple layout variants.
+ *
+ * @see {@link useLayoutElementDesign}
+ */
 interface LayoutDesignData {
+    /** Layout identifier string (e.g., 'default', 'compact', 'wide') */
     layout: string | undefined;
 }
 
+/**
+ * Return type for `useLogoElementDesign` composable.
+ *
+ * Provides logo styling options from the design settings.
+ * Includes text styling and logo-specific options like spacing and capitalization.
+ *
+ * @see {@link useLogoElementDesign}
+ * @see {@link CapitalizationType}
+ * @see {@link TransformedFrame}
+ */
 interface LogoDesignData$1 {
+    /** Font family name */
     font: string | undefined;
+    /** Font size in pixels */
     size: number | undefined;
+    /** `true` if text should be bold */
     bold: boolean | undefined;
+    /** `true` if text should be italic */
     italic: boolean | undefined;
+    /** Text/logo color */
     color: Color$1 | undefined;
+    /** `true` if logo should be displayed */
     visible: boolean | undefined;
+    /** Letter spacing value */
     spacing: number | undefined;
+    /** Text transform: 'none', 'all' (uppercase), or 'small' (capitalize) */
     capitalization: CapitalizationType | undefined;
+    /** Logo frame/border style */
     frame: TransformedFrame | undefined;
 }
 
 type DesignSettings = Record<string, DesignEditor>;
 type MandatoryDesignSettings = Record<'logo', LogoDesignEditor> | Record<string, never>;
 
+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[];
+}
+
+interface StorePageConfiguration {
+    readonly sections: [TemplateStorefrontSection];
+}
+
 interface MenuItem {
     readonly id: string;
     readonly title?: string;
@@ -946,7 +1325,7 @@ interface ShowcaseDeckContentEditorDefaults {
 }
 interface ShowcaseLogoContentEditorDefaults {
     readonly type: 'LOGO';
-    readonly logoType?: LogoType$1;
+    readonly logoType?: LogoType;
     readonly text?: string;
     readonly imageData?: ImageContentEditorDefaults;
 }
@@ -973,6 +1352,34 @@ interface Showcase {
 }
 type ShowcaseOverride = Omit<Showcase, 'showcaseId' | 'previewImage'>;
 
+interface TemplateSettings {
+    readonly metadata: TemplateMetadata;
+    readonly sections: TemplateSection[];
+}
+
+declare const TemplateCategoriesList: {
+    readonly apparel_footwear: "apparel_footwear";
+    readonly vape_smoke: "vape_smoke";
+    readonly home_garden: "home_garden";
+    readonly sport_outdoor: "sport_outdoor";
+    readonly jewelry_accessories: "jewelry_accessories";
+    readonly pet_animals: "pet_animals";
+    readonly bikes: "bikes";
+    readonly health_beauty: "health_beauty";
+    readonly gift_shop: "gift_shop";
+    readonly electronics: "electronics";
+    readonly other: "other";
+};
+type TemplateCategory = typeof TemplateCategoriesList[keyof typeof TemplateCategoriesList];
+
+interface TemplateMetadata {
+    readonly name: string;
+    readonly description?: string;
+    readonly preview_url?: string;
+    readonly cover_image?: ImageContentData;
+    readonly categories?: TemplateCategory[];
+}
+
 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';
@@ -999,8 +1406,12 @@ type TemplateSection = TemplateDefaultSection | TemplateCustomSection | Template
 interface TemplatePage {
     id: string;
     type: TemplatePageEnum;
+    readonly metadata?: CustomPageMetadata;
     readonly sections: TemplateSection[];
 }
+interface CustomPageMetadata {
+    title: string;
+}
 
 interface TemplateConfiguration {
     metadata: TemplateMetadata;
@@ -1015,26 +1426,30 @@ interface TemplateMultiPageConfiguration extends TemplateConfiguration {
 }
 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>>;
 
+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";
+};
+
 interface AppBaseContext {
     readonly appName: string;
     readonly blockName: string;
@@ -1131,6 +1546,7 @@ interface InstantsiteJSAPI {
     openSearchPage: (keyword: string | undefined) => void;
 }
 
+/** Composable for Instantsite JS API. Returns `window.instantsite` for platform interaction. */
 declare function useInstantsiteJsApi(): InstantsiteJSAPI | undefined;
 
 interface GlobalColors {
@@ -1160,6 +1576,7 @@ interface GlobalLayout {
     tileMargin: number;
     appearanceEffect: AppearanceEffectType;
 }
+/** Global design settings from site theme. Referenced via 'global.xxx' syntax. */
 interface GlobalDesign {
     color?: GlobalColors;
     fontFamily?: GlobalFonts;
@@ -1197,27 +1614,857 @@ declare function createVueServerApp<C, D>(appComponent: Component, extensions?:
     };
 };
 
-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";
+/**
+ * Composable for accessing BUTTON content with action link.
+ *
+ * Used for CTA buttons, links, and navigation elements defined in `settings/content.ts`.
+ * Supports various action types: hyperlinks, email, phone, scroll to section, page navigation.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<ButtonContentData>` — reactive object with:
+ * - `title: ComputedRef<string>` — button text label
+ * - `type: ComputedRef<ButtonTypeEnum>` — action type
+ * - `link: ComputedRef<string | undefined>` — URL for hyperlinks
+ * - `email: ComputedRef<string | undefined>` — email address for mail links
+ * - `phone: ComputedRef<string | undefined>` — phone number for tel links
+ * - `tileDivId: ComputedRef<string | null>` — tile div ID for scroll-to-tile action
+ * - `pageId: ComputedRef<string | undefined>` — page ID for navigation
+ * - `pageUrl: ComputedRef<string | undefined>` — page URL for navigation
+ * - `hasTitle: ComputedRef<boolean>` — `true` if button has text
+ * - `hasLink: ComputedRef<boolean>` — `true` if button has a link
+ * - `performAction: () => void` — triggers the button action (navigation, scroll, etc.)
+ *
+ * @see {@link ButtonContentData}
+ * @see {@link ButtonTypeEnum}
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   cta_button: { type: 'BUTTON', label: '$label.cta_button' },
+ * };
+ *
+ * // Section.vue
+ * const ctaButton = useButtonElementContent<ContentType>('cta_button');
+ *
+ * // Template
+ * <button v-if="ctaButton.hasTitle" @click="ctaButton.performAction">
+ *   {{ ctaButton.title }}
+ * </button>
+ * ```
+ */
+declare function useButtonElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<Partial<ButtonContentData>>;
+
+/**
+ * Composable for accessing CATEGORY_SELECTOR content.
+ *
+ * Used for displaying store categories selected by the user in the editor.
+ * Supports both manual selection and root category selection modes.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ *
+ * @returns `Reactive<CategorySelector>` — reactive object with:
+ * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of category objects with `id`, `name`, `url`, `imageUrl`, etc.
+ * - `categoryIds: ComputedRef<Array<number>>` — array of selected category IDs
+ * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
+ * - `hasCategories: ComputedRef<boolean>` — `true` if at least one category is selected
+ *
+ * @see {@link CategorySelector}
+ * @see {@link CategorySelectorData} — raw data type from editor
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   shop_categories: {
+ *     type: 'CATEGORY_SELECTOR',
+ *     label: '$label.categories',
+ *     defaults: { maxCategories: 6 },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const categories = useCategorySelectorElementContent<ContentType>('shop_categories');
+ *
+ * // Template
+ * <div v-if="categories.hasCategories" class="category-grid">
+ *   <a v-for="cat in categories.categories" :key="cat.id" :href="cat.url">
+ *     <img :src="cat.imageUrl" :alt="cat.name" />
+ *     <span>{{ cat.name }}</span>
+ *   </a>
+ * </div>
+ * ```
+ */
+declare function useCategorySelectorElementContent<CONTENT>(elementName: string): Reactive<CategorySelector>;
+
+/**
+ * Composable for accessing IMAGE content with multiple resolutions.
+ *
+ * Used for background images, hero images, and media defined in `settings/content.ts`.
+ * Provides URLs for different screen sizes and resolutions (mobile/desktop, low/high res).
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<ImageContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if an image is uploaded
+ * - `lowResolutionMobileImage: ComputedRef<string | undefined>` — URL for mobile placeholder (100x200)
+ * - `highResolutionMobileImage: ComputedRef<string | undefined>` — URL for mobile full quality (1000x2000)
+ * - `lowResolutionDesktopImage: ComputedRef<string | undefined>` — URL for desktop placeholder (200x200)
+ * - `highResolutionDesktopImage: ComputedRef<string | undefined>` — URL for desktop full quality (2000x2000)
+ *
+ * @see {@link ImageContent}
+ * @see {@link ImageContentData} — raw data type from editor
+ * @see {@link ImageBorderInfoData} — border info data
+ * @see {@link ImageInfoData} — image info data
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   background_image: { type: 'IMAGE', label: '$label.background_image' },
+ * };
+ *
+ * // Section.vue
+ * const bgImage = useImageElementContent<ContentType>('background_image');
+ *
+ * // Template with responsive images
+ * <picture v-if="bgImage.hasContent">
+ *   <source media="(max-width: 700px)" :srcset="bgImage.highResolutionMobileImage" />
+ *   <img :src="bgImage.highResolutionDesktopImage" alt="Background" />
+ * </picture>
+ * ```
+ */
+declare function useImageElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<ImageContent>;
+
+/**
+ * Composable for accessing INPUTBOX content (single-line text).
+ *
+ * Used for titles, labels, and short text fields defined in `settings/content.ts`.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<InputBoxContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if the field has non-empty text
+ * - `value: ComputedRef<string | undefined>` — the text string
+ *
+ * @see {@link InputBoxContent}
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   title: { type: 'INPUTBOX', label: '$label.title', placeholder: '$label.placeholder' },
+ * };
+ *
+ * // Section.vue
+ * const title = useInputboxElementContent<ContentType>('title');
+ *
+ * // Template
+ * <h1 v-if="title.hasContent">{{ title.value }}</h1>
+ * ```
+ */
+declare function useInputboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<InputBoxContent>;
+
+/**
+ * Composable for accessing LOGO content in headers/footers.
+ *
+ * Used for site logo display. The logo can be either text-based or image-based,
+ * determined by the `type` field.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ *
+ * @returns `Reactive<LogoContent>` — reactive object with:
+ * - `type: ComputedRef<LogoType | undefined>` — logo type: 'TEXT' or 'IMAGE'
+ * - `text: ComputedRef<string | undefined>` — text content (when type is 'TEXT')
+ * - `image: ComputedRef<{...} | undefined>` — image URLs object (when type is 'IMAGE'):
+ *   - `lowResolutionMobileImage: string | undefined` — mobile placeholder URL
+ *   - `highResolutionMobileImage: string | undefined` — mobile full quality URL
+ *   - `lowResolutionDesktopImage: string | undefined` — desktop placeholder URL
+ *   - `highResolutionDesktopImage: string | undefined` — desktop full quality URL
+ *
+ * @see {@link LogoContent}
+ * @see {@link LogoContentData} — raw data type from editor
+ * @see {@link LogoType} — 'TEXT' | 'IMAGE'
+ *
+ * @example
+ * ```typescript
+ * // Header.vue
+ * const logo = useLogoElementContent<ContentType>();
+ *
+ * // Template
+ * <div class="logo">
+ *   <template v-if="logo.type === 'TEXT'">
+ *     <span>{{ logo.text }}</span>
+ *   </template>
+ *   <template v-else>
+ *     <img :src="logo.image.highResolutionDesktopImage" alt="Logo" />
+ *   </template>
+ * </div>
+ * ```
+ */
+declare function useLogoElementContent<CONTENT>(): Reactive<LogoContent>;
+
+/**
+ * Composable for accessing MENU content.
+ *
+ * Used for navigation menus with action links. Each menu item has a `performAction`
+ * method that triggers navigation.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the menu element in content settings
+ *
+ * @returns `Reactive<MenuContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if menu data exists
+ * - `items: ComputedRef<ActionLink[]>` — array of menu items, each with:
+ *   - `title: string` — menu item text
+ *   - `type: string` — action type
+ *   - `link: string` — URL (for hyperlinks)
+ *   - `performAction: () => void` — triggers navigation
+ *
+ * @see {@link MenuContent}
+ * @see {@link MenuContentData} — raw data type from editor
+ * @see {@link ActionLink} — menu item type
+ *
+ * @example
+ * ```typescript
+ * // Section.vue
+ * const menu = useMenuElementContent<ContentType>('navigation');
+ *
+ * // Template
+ * <nav v-if="menu.hasContent">
+ *   <a v-for="item in menu.items" :key="item.title" @click="item.performAction">
+ *     {{ item.title }}
+ *   </a>
+ * </nav>
+ * ```
+ */
+declare function useMenuElementContent<CONTENT>(elementName: keyof CONTENT): Reactive<MenuContent>;
+
+/**
+ * Composable for accessing NAVIGATION_MENU content in headers/footers.
+ *
+ * A convenience wrapper around `useMenuElementContent` that uses the default 'menu' property.
+ * Used for the main site navigation in headers and footers.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ *
+ * @returns `Reactive<MenuContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if menu data exists
+ * - `items: ComputedRef<ActionLink[]>` — array of menu items with `title`, `type`, `link`, `performAction()`
+ *
+ * @see {@link MenuContent}
+ * @see {@link useMenuElementContent} — underlying composable
+ *
+ * @example
+ * ```typescript
+ * // Header.vue
+ * const menu = useNavigationMenuElementContent<ContentType>();
+ *
+ * // Template
+ * <nav v-if="menu.hasContent" class="main-nav">
+ *   <a v-for="item in menu.items" :key="item.title" @click="item.performAction">
+ *     {{ item.title }}
+ *   </a>
+ * </nav>
+ * ```
+ */
+declare function useNavigationMenuElementContent<CONTENT>(): {
+    readonly hasContent: boolean;
+    readonly items: ActionLink[];
 };
-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";
+
+/**
+ * Composable for accessing PRODUCT_SELECTOR content.
+ *
+ * Used for displaying store products selected by the user in the editor.
+ * Supports both manual selection and category-based selection modes.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ *
+ * @returns `Reactive<ProductSelector>` — reactive object with:
+ * - `products: ComputedRef<ProductListComponentItem[]>` — array of product objects with `id`, `name`, `price`, `imageUrl`, etc.
+ * - `categories: ComputedRef<CategoryListComponentItem[]>` — array of categories (when using category selection)
+ * - `categoryId: ComputedRef<number>` — selected category ID (when using category selection)
+ * - `hasContent: ComputedRef<boolean>` — `true` if selector data exists
+ * - `hasProducts: ComputedRef<boolean>` — `true` if at least one product is selected
+ *
+ * @see {@link ProductSelector}
+ * @see {@link ProductSelectorData} — raw data type from editor
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   featured_products: {
+ *     type: 'PRODUCT_SELECTOR',
+ *     label: '$label.products',
+ *     defaults: { maxProducts: 8 },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const products = useProductSelectorElementContent<ContentType>('featured_products');
+ *
+ * // Template
+ * <div v-if="products.hasProducts" class="product-grid">
+ *   <div v-for="product in products.products" :key="product.id">
+ *     <img :src="product.imageUrl" :alt="product.name" />
+ *     <h3>{{ product.name }}</h3>
+ *     <span>{{ product.price }}</span>
+ *   </div>
+ * </div>
+ * ```
+ */
+declare function useProductSelectorElementContent<CONTENT>(elementName: string): Reactive<ProductSelector>;
+
+/**
+ * Composable for accessing SELECTBOX content (dropdown).
+ *
+ * Used for dropdown menus and option selectors defined in `settings/content.ts`.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<SelectBoxContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if a value is selected
+ * - `value: ComputedRef<string | undefined>` — the selected option value
+ *
+ * @see {@link SelectBoxContent}
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   layout_type: {
+ *     type: 'SELECTBOX',
+ *     label: '$label.layout_type',
+ *     options: [
+ *       { value: 'grid', label: 'Grid' },
+ *       { value: 'list', label: 'List' },
+ *     ],
+ *     defaults: { value: 'grid' },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const layoutType = useSelectboxElementContent<ContentType>('layout_type');
+ *
+ * // Template
+ * <div :class="layoutType.value">...</div>
+ * ```
+ */
+declare function useSelectboxElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<SelectBoxContent>;
+
+/**
+ * Composable for accessing TEXTAREA content (multi-line text).
+ *
+ * Used for descriptions, paragraphs, and long text fields defined in `settings/content.ts`.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<TextAreaContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if the field has text
+ * - `value: ComputedRef<string | undefined>` — the text string (may contain newlines)
+ *
+ * @see {@link TextAreaContent}
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   description: { type: 'TEXTAREA', label: '$label.description', placeholder: '' },
+ * };
+ *
+ * // Section.vue
+ * const description = useTextareaElementContent<ContentType>('description');
+ *
+ * // Template
+ * <p v-if="description.hasContent" style="white-space: pre-wrap">
+ *   {{ description.value }}
+ * </p>
+ * ```
+ */
+declare function useTextareaElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<TextAreaContent>;
+
+/**
+ * Composable for accessing TOGGLE content (boolean switch).
+ *
+ * Used for on/off switches, visibility toggles, and feature flags defined in `settings/content.ts`.
+ *
+ * @template CONTENT - The content type from `type.ts`
+ * @param elementName - The name of the element in content settings
+ * @param externalContent - Optional external content (used internally for DECK cards)
+ *
+ * @returns `Reactive<ToggleContent>` — reactive object with:
+ * - `hasContent: ComputedRef<boolean>` — `true` if toggle data exists
+ * - `value: ComputedRef<boolean | undefined>` — `true` when enabled, `false` when disabled
+ *
+ * @see {@link ToggleContent}
+ * @see {@link ToggleContentData} — raw data type from editor
+ *
+ * @example
+ * ```typescript
+ * // settings/content.ts
+ * const content = {
+ *   show_price: { type: 'TOGGLE', label: '$label.show_price', defaults: { enabled: true } },
+ * };
+ *
+ * // Section.vue
+ * const showPrice = useToggleElementContent<ContentType>('show_price');
+ *
+ * // Template
+ * <span v-if="showPrice.value" class="price">{{ product.price }}</span>
+ * ```
+ */
+declare function useToggleElementContent<CONTENT>(elementName: string, externalContent?: Record<string, unknown>): Reactive<ToggleContent>;
+
+/**
+ * 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>;
 };
 
-export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, SectionTypeEnum, TemplateCategoriesList, 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, TemplateCategory, 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 };
+/**
+ * Composable for accessing BACKGROUND design settings.
+ *
+ * Used for section backgrounds with solid color or gradient options.
+ * Supports global color references (e.g., 'global.primary', 'global.secondary').
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<BackgroundDesignData>` — reactive object with:
+ * - `background: Background | undefined` — background configuration object:
+ *   - `type: BackgroundType | undefined` — 'solid' or 'gradient'
+ *   - `solid: SolidColor | undefined` — solid background color object
+ *     - `color: Color | undefined` — the color value
+ *   - `gradient: GradientColor | undefined` — gradient color object
+ *     - `fromColor: Color | undefined` — gradient start color
+ *     - `toColor: Color | undefined` — gradient end color
+ *
+ * @see {@link BackgroundDesignData}
+ * @see {@link Background}
+ * @see {@link BackgroundType} — 'solid' | 'gradient'
+ * @see {@link SolidColor}
+ * @see {@link GradientColor}
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   section_background: {
+ *     type: 'BACKGROUND',
+ *     label: '$label.background',
+ *     colors: ['#ffffff', '#f5f5f5', 'global.primary', 'global.secondary'],
+ *     defaults: { background: { type: 'COLOR', solid: { color: '#ffffff' } } },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const bg = useBackgroundElementDesign<DesignType>('section_background');
+ *
+ * const backgroundStyle = computed(() => {
+ *   if (bg.background?.type === 'gradient') {
+ *     return `linear-gradient(${bg.background.gradient?.fromColor}, ${bg.background.gradient?.toColor})`;
+ *   }
+ *   return bg.background?.solid?.color;
+ * });
+ *
+ * // Template
+ * <section :style="{ background: backgroundStyle }">...</section>
+ * ```
+ */
+declare function useBackgroundElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<BackgroundDesignData>;
+
+/**
+ * Composable for accessing BUTTON design settings.
+ *
+ * Used for styling button elements with appearance, size, shape, and color options.
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<ButtonDesignData>` — reactive object with:
+ * - `appearance: ButtonAppearance | undefined` — button fill style: 'solid-button', 'outline-button', or 'text-link'
+ * - `font: string | GlobalFontsString | undefined` — font family name
+ * - `size: ButtonSize | undefined` — button size: 'small', 'medium', or 'large'
+ * - `style: ButtonStyle | undefined` — button shape: 'pill', 'rectangle', or 'round-corner'
+ * - `color: Color | GlobalColorsString | undefined` — button color
+ * - `visible: boolean` — `true` if button should be displayed
+ *
+ * @see {@link ButtonDesignData}
+ * @see {@link ButtonAppearance} — 'solid-button' | 'outline-button' | 'text-link'
+ * @see {@link ButtonSize} — 'small' | 'medium' | 'large'
+ * @see {@link ButtonStyle} — 'round-corner' | 'rectangle' | 'pill'
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   button_style: {
+ *     type: 'BUTTON',
+ *     label: '$label.button_style',
+ *     defaults: { appearance: 'SOLID', size: 'MEDIUM', shape: 'PILL', color: '#000000', visible: true },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const buttonStyle = useButtonElementDesign<DesignType>('button_style');
+ *
+ * // Template
+ * <button
+ *   v-if="buttonStyle.visible"
+ *   :class="[
+ *     `btn-${buttonStyle.appearance?.toLowerCase()}`,
+ *     `btn-${buttonStyle.size?.toLowerCase()}`,
+ *     `btn-${buttonStyle.style?.toLowerCase()}`,
+ *   ]"
+ *   :style="{ backgroundColor: buttonStyle.color }"
+ * >
+ *   {{ button.title }}
+ * </button>
+ * ```
+ */
+declare function useButtonElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ButtonDesignData>;
+
+/**
+ * Composable for accessing IMAGE design settings.
+ *
+ * Used for image overlay styling (color or gradient overlay on top of images).
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<ImageDesignData>` — reactive object with:
+ * - `overlay: Overlay | undefined` — overlay configuration object:
+ *   - `type: OverlayType | undefined` — 'solid', 'gradient', or 'none'
+ *   - `solid: SolidColor | undefined` — solid overlay color object
+ *     - `color: Color | undefined` — the color value (with alpha for transparency)
+ *   - `gradient: GradientColor | undefined` — gradient color object
+ *     - `fromColor: Color | undefined` — gradient start color
+ *     - `toColor: Color | undefined` — gradient end color
+ * - `visible: boolean` — `true` if image should be displayed
+ *
+ * @see {@link ImageDesignData}
+ * @see {@link Overlay}
+ * @see {@link OverlayType} — 'solid' | 'gradient' | 'none'
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   image_style: {
+ *     type: 'IMAGE',
+ *     label: '$label.image_style',
+ *     colors: ['#000000', '#1a1a1a', '#2d2d2d', '#666666', '#999999'],
+ *     defaults: { overlay: { type: 'COLOR', solid: { color: '#000000' } }, visible: true },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const imageStyle = useImageElementDesign<DesignType>('image_style');
+ *
+ * // Template with overlay
+ * <div v-if="imageStyle.visible" class="image-container">
+ *   <img :src="image.highResolutionDesktopImage" />
+ *   <div
+ *     v-if="imageStyle.overlay?.type !== 'none'"
+ *     class="overlay"
+ *     :style="{ backgroundColor: imageStyle.overlay?.solid?.color }"
+ *   />
+ * </div>
+ * ```
+ */
+declare function useImageElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ImageDesignData>;
+
+/**
+ * Composable for accessing layout design settings.
+ *
+ * Used for layout selection in sections that support multiple layout variants.
+ * The layout value is a string identifier that can be used to conditionally render
+ * different layouts.
+ *
+ * @returns `Reactive<LayoutDesignData>` — reactive object with:
+ * - `layout: string | undefined` — layout identifier string (e.g., 'default', 'compact', 'wide')
+ *
+ * @see {@link LayoutDesignData}
+ *
+ * @example
+ * ```typescript
+ * // settings/layout.ts
+ * const layout = [
+ *   {
+ *     layoutId: 'layout_1',
+ *     selectedContentSettings: [], <-- default setting from content.ts
+ *     selectedDesignSettings: [], <-- default setting from design.ts
+ *   },
+ *   {
+ *     layoutId: 'layout_2',
+ *     selectedContentSettings: [
+ *       { ... }, <-- custom setting for layout 2
+ *     ],
+ *     selectedDesignSettings: [
+ *       { ... }, <-- custom setting for layout 2
+ *     ],
+ *   },
+ * ];
+ *
+ * // Section.vue
+ * const layoutDesign = useLayoutElementDesign();
+ *
+ * // Template
+ * <div :class="`layout-${layoutDesign.layout}`">
+ *   <template v-if="layoutDesign.layout === 'compact'">
+ *     <!-- Compact layout -->
+ *   </template>
+ *   <template v-else>
+ *     <!-- Default layout -->
+ *   </template>
+ * </div>
+ * ```
+ */
+declare function useLayoutElementDesign(): Reactive<LayoutDesignData>;
+
+/**
+ * Composable for accessing LOGO design settings in headers/footers.
+ *
+ * Used for styling the site logo (text or image). Provides text styling options
+ * and additional logo-specific settings like spacing and capitalization.
+ *
+ * @template DESIGN - The design type from `type.ts`
+ *
+ * @returns `ComputedRef<LogoDesignData>` — computed ref with:
+ * - `font: string | undefined` — font family name
+ * - `size: number | undefined` — font size in pixels
+ * - `bold: boolean | undefined` — `true` if text is bold
+ * - `italic: boolean | undefined` — `true` if text is italic
+ * - `color: Color | undefined` — text/logo color
+ * - `visible: boolean | undefined` — `true` if logo should be displayed
+ * - `spacing: number | undefined` — letter spacing value
+ * - `capitalization: CapitalizationType | undefined` — text transform: 'NONE', 'UPPERCASE', 'LOWERCASE', 'CAPITALIZE'
+ * - `frame: Frame | TransformedFrame | undefined` — logo frame style (if applicable)
+ *
+ * @see {@link LogoDesignData}
+ * @see {@link CapitalizationType}
+ * @see {@link Frame}
+ * @see {@link TransformedFrame}
+ *
+ * @example
+ * ```typescript
+ * // Header.vue
+ * const logoDesign = useLogoElementDesign<DesignType>();
+ *
+ * // Template
+ * <div
+ *   v-if="logoDesign.visible"
+ *   class="logo"
+ *   :style="{
+ *     fontFamily: logoDesign.font,
+ *     fontSize: logoDesign.size + 'px',
+ *     color: logoDesign.color,
+ *     letterSpacing: logoDesign.spacing + 'px',
+ *     textTransform: logoDesign.capitalization?.toLowerCase(),
+ *   }"
+ * >
+ *   {{ logo.text }}
+ * </div>
+ * ```
+ */
+declare function useLogoElementDesign<DESIGN>(): ComputedRef<LogoDesignData>;
+
+/**
+ * Composable for accessing SELECTBOX design settings.
+ *
+ * Used for design-level dropdown selections (e.g., layout variants, alignment options).
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<SelectboxDesignData>` — reactive object with:
+ * - `value: string | undefined` — the selected option value
+ *
+ * @see {@link SelectboxDesignData}
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   text_alignment: {
+ *     type: 'SELECTBOX',
+ *     label: '$label.alignment',
+ *     options: [
+ *       { value: 'left', label: 'Left' },
+ *       { value: 'center', label: 'Center' },
+ *       { value: 'right', label: 'Right' },
+ *     ],
+ *     defaults: { value: 'center' },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const alignment = useSelectboxElementDesign<DesignType>('text_alignment');
+ *
+ * // Template
+ * <div :style="{ textAlign: alignment.value }">...</div>
+ * ```
+ */
+declare function useSelectboxElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<SelectboxDesignData>;
+
+/**
+ * Composable for accessing TEXT design settings.
+ *
+ * Used for styling text elements (titles, descriptions, labels).
+ * Supports global design references (e.g., 'global.heading', 'global.primary').
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<TextDesignData>` — reactive object with:
+ * - `font: string | GlobalFontsString | undefined` — font family name (resolved from global if prefixed with 'global.')
+ * - `size: number | GlobalTextSizeString | undefined` — font size in pixels (resolved from global if prefixed with 'global.')
+ * - `bold: boolean | undefined` — `true` if text is bold
+ * - `italic: boolean | undefined` — `true` if text is italic
+ * - `color: Color | undefined` — text color (resolved from global if prefixed with 'global.')
+ * - `visible: boolean` — `true` if element should be displayed
+ *
+ * @see {@link TextDesignData}
+ * @see {@link Color}
+ * @see {@link GlobalFontsString}
+ * @see {@link GlobalTextSizeString}
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   title_style: {
+ *     type: 'TEXT',
+ *     label: '$label.title_style',
+ *     colors: ['#000000', '#333333', 'global.primary'],
+ *     sizes: [24, 32, 48, 'global.heading'],
+ *     defaults: { font: 'global.heading', size: 32, bold: true, color: '#000000', visible: true },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const titleStyle = useTextElementDesign<DesignType>('title_style');
+ *
+ * // Template
+ * <h1
+ *   v-if="titleStyle.visible"
+ *   :style="{
+ *     fontFamily: titleStyle.font,
+ *     fontSize: titleStyle.size + 'px',
+ *     fontWeight: titleStyle.bold ? 'bold' : 'normal',
+ *     fontStyle: titleStyle.italic ? 'italic' : 'normal',
+ *     color: titleStyle.color,
+ *   }"
+ * >
+ *   {{ title.value }}
+ * </h1>
+ * ```
+ */
+declare function useTextElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<TextDesignData>;
+
+/**
+ * Composable for accessing TEXTAREA design settings.
+ *
+ * Similar to TEXT design but includes `whiteSpace: 'pre-wrap'` for preserving line breaks.
+ * Used for styling multi-line text elements (descriptions, paragraphs).
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<TextareaDesignData>` — reactive object with:
+ * - `font: string | GlobalFontsString | undefined` — font family name
+ * - `size: number | GlobalTextSizeString | undefined` — font size in pixels
+ * - `bold: boolean | undefined` — `true` if text is bold
+ * - `italic: boolean | undefined` — `true` if text is italic
+ * - `color: Color | undefined` — text color
+ * - `visible: boolean` — `true` if element should be displayed
+ * - `whiteSpace: string` — always 'pre-wrap' (preserves line breaks)
+ *
+ * @see {@link TextareaDesignData}
+ * @see {@link TextDesignData} — base type
+ *
+ * @example
+ * ```typescript
+ * // Section.vue
+ * const descStyle = useTextareaElementDesign<DesignType>('description_style');
+ *
+ * // Template
+ * <p
+ *   v-if="descStyle.visible"
+ *   :style="{
+ *     fontFamily: descStyle.font,
+ *     fontSize: descStyle.size + 'px',
+ *     color: descStyle.color,
+ *     whiteSpace: descStyle.whiteSpace,
+ *   }"
+ * >
+ *   {{ description.value }}
+ * </p>
+ * ```
+ */
+declare function useTextareaElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<TextareaDesignData>;
+
+/**
+ * Composable for accessing TOGGLE design settings.
+ *
+ * Used for design-level toggle switches (e.g., enable/disable a design feature).
+ *
+ * @template DESIGN - The design type from `type.ts`
+ * @param elementName - The name of the element in design settings
+ *
+ * @returns `Reactive<ToggleDesignData>` — reactive object with:
+ * - `enabled: boolean | undefined` — `true` if the toggle is enabled
+ *
+ * @see {@link ToggleDesignData}
+ *
+ * @example
+ * ```typescript
+ * // settings/design.ts
+ * const design = {
+ *   show_shadow: {
+ *     type: 'TOGGLE',
+ *     label: '$label.show_shadow',
+ *     defaults: { enabled: true },
+ *   },
+ * };
+ *
+ * // Section.vue
+ * const showShadow = useToggleElementDesign<DesignType>('show_shadow');
+ *
+ * // Template
+ * <div :class="{ 'with-shadow': showShadow.enabled }">...</div>
+ * ```
+ */
+declare function useToggleElementDesign<DESIGN>(elementName: keyof DESIGN): Reactive<ToggleDesignData>;
+
+export { ActionLinkTypeEnum, BackgroundStyleEnum, ButtonAppearanceEnum, ButtonShapeEnum, ButtonSizeEnum, ButtonTypeEnum, CatalogLayoutSlot, CategoryLayoutSlot, ConfigTypeEnum, DesignEditorType, EditorTypes, ImageSet, InstantsiteJsEvent, OverlayTypeEnum, PluginTypeEnum, ProductLayoutSlot, ReservedTemplatePageNameEnum, SectionTypeEnum, TemplateCategoriesList, 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, BackgroundDesignData$1 as BackgroundDesignData, BackgroundDesignEditor, BackgroundDesignEditorDefaults, BackgroundDesignEditorDefaultsTransformed, BackgroundType, ButtonAppearance, ButtonContentData, ButtonContentEditor, ButtonDesignData, ButtonDesignEditor, ButtonDesignEditorDefaults, ButtonDesignEditorDefaultsTransformed, ButtonSize, ButtonStyle, CapitalizationType, Card, CategorySelector, CategorySelectorContentEditor, CategorySelectorContentEditorDefaults, CategorySelectorData, Color$1 as Color, ColorPickerDesignEditor, ColorPickerDesignEditorDefaults, ColorPickerDesignEditorDefaultsTransformed, ContentEditor, ContentSettings, CustomPageMetadata, Deck, DeckContent, DeckContentEditor, DefaultSectionId, DesignEditor, DesignEditorDefaults, DesignEditorDefaultsTransformed, DesignSettings, DividerDesignEditor, Font, Frame, GlobalColorsString, GlobalDesign$1 as GlobalDesign, GlobalFontsString, GlobalTextSizeString, GradientColor, HSLColor, ImageBorderInfoData, ImageContent, ImageContentData, ImageContentEditor, ImageContentEditorDefaults, ImageDesignData$1 as 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, MandatoryContentSettings, MandatoryDesignSettings, MenuContent, MenuContentData, MenuContentEditor, NavigationMenuContentEditor, Overlay, OverlayType, ProductSelector, ProductSelectorContentEditor, ProductSelectorContentEditorDefaults, ProductSelectorData, RGBAColor, SelectBoxContent, SelectboxContentEditor, SelectboxContentOption, SelectboxDesignData, SelectboxDesignEditor, Showcase, ShowcaseOverride, SolidColor, StorePageConfiguration, StorefrontSectionId, TemplateCategory, TemplateConfiguration, TemplateConfigurationType, TemplateCustomSection, TemplateDefaultSection, TemplateMetadata, TemplateMultiPageConfiguration, TemplatePage, TemplateSection, TemplateSettings, TemplateSinglePageConfiguration, TemplateStorefrontSection, TextAreaContent, TextDesignData$1 as TextDesignData, TextDesignEditor, TextDesignEditorDefaults, TextDesignEditorDefaultsTransformed, TextSize, TextareaContentEditor, TextareaContentEditorDefaults, TextareaDesignData$1 as TextareaDesignData, ToggleContent, ToggleContentData, ToggleContentEditor, ToggleDesignData, ToggleDesignEditor, TransformedFrame, TranslationSettings, VuegaPageId };