@storepecker/editor-bridge 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,556 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import React__default from 'react';
+
+interface LandingPageConfig {
+    store: number;
+    theme: ThemeInfo;
+    navbar: NavbarConfig;
+    color_scheme: ColorSchemeConfig;
+    hero: HeroConfig;
+    sections: SectionItem[];
+    footer: FooterConfig;
+    social_links: SocialLinksConfig;
+    font_styles: FontStylesConfig;
+    logo: string;
+    secondary_logo: string;
+    favicon: string;
+    social_image?: string;
+    store_name: string;
+    store_description: string;
+    store_url: string;
+    custom_css: string;
+    custom_js: string;
+    start_head_tag: string;
+    end_head_tag: string;
+    start_body_tag: string;
+    end_body_tag: string;
+    google_tag_manager_id: string;
+    facebook_pixel_id: string;
+    video_banners?: any[];
+    privacy_policy?: string;
+    terms_and_condition?: string;
+    refund_policy?: string;
+}
+interface ThemeInfo {
+    id: number;
+    name: string;
+    slug: string;
+    color_scheme?: Record<string, string>;
+    is_active?: boolean;
+}
+interface NavbarConfig {
+    cart: boolean;
+    wishlist: boolean;
+    headerbg: string;
+    textColor: string;
+    logoPosition: string;
+    ribbonbar: RibbonBarConfig;
+    navElements: NavElement[];
+}
+interface RibbonBarConfig {
+    id: string;
+    type: string;
+    messages: Array<{
+        link: string;
+        message: string;
+    }>;
+    position: string;
+    animation: string;
+    textColor: string;
+    switchInterval: number;
+}
+interface NavElement {
+    key: string;
+    link?: string;
+    title: string;
+    enabled: boolean;
+    description?: string;
+    is_dropdown: boolean;
+}
+interface ColorSchemeConfig {
+    primary: string;
+    secondary: string;
+    btnText: string;
+    palette?: string;
+    headerbg: string;
+    textColor: string;
+    textPrimary: string;
+    textPrimaryLight?: string;
+    textSecondary: string;
+    bodyBackground: string;
+    bodyBackground1?: string;
+    bodyBackgroundSecondary: string;
+    bodyBackgroundDark?: string;
+    borderBackground: string;
+    footerBgColor: string;
+    footerTextColor: string;
+    enableDarkMode: boolean;
+    themeBackground?: {
+        mobile: string;
+        desktop: string;
+    };
+}
+interface HeroConfig {
+    cta: string;
+    title: string;
+    ctaLink: string;
+    showCTA: boolean;
+    heroImage: string;
+    showTitle: boolean;
+    bannerLink: string;
+    enableSlider: boolean;
+    showHeroBanner: boolean;
+    heroImageMobile: string;
+    sliderSettings: SliderSlide[];
+    switchInterval: number;
+}
+interface SliderSlide {
+    id: string;
+    cta: string;
+    title: string;
+    ctaLink: string;
+    bannerImage: string;
+    bannerImageMobile?: string;
+    description?: string;
+    showContents: boolean;
+}
+interface FooterConfig {
+    showSocialLinks: boolean;
+    showNameWithLogo: boolean;
+    showContactDetails: boolean;
+    showWhatsappBubble: boolean;
+    showMadeWithStorepecker: boolean;
+}
+interface SocialLinksConfig {
+    twitter?: string;
+    youtube?: string;
+    facebook?: string;
+    instagram?: string;
+}
+interface FontStylesConfig {
+    body: FontConfig;
+    heading: FontConfig;
+}
+interface FontConfig {
+    name: string;
+    font_family: string;
+    font_weight: number;
+    font_url: string;
+    label?: string;
+    value?: string;
+}
+/**
+ * A section in the landing page sections[] array.
+ * The `type` field determines which component renders it.
+ * Each type has different additional fields — we use [key: string]: any
+ * because section types are extensible and vary by theme.
+ */
+interface SectionItem {
+    id: string;
+    type: string;
+    title?: string;
+    enabled?: boolean;
+    [key: string]: any;
+}
+
+interface EditorProviderProps {
+    /**
+     * The config fetched by the Server Component from GET /store/store_settings/.
+     * Must be the EXACT JSON shape — no transformation needed.
+     */
+    initialConfig: LandingPageConfig;
+    /**
+     * Allowed origin for postMessage. Set to the editor SPA domain in production.
+     * Default: "*" (accepts all — set NEXT_PUBLIC_EDITOR_ORIGIN in production!)
+     */
+    editorOrigin?: string;
+    /**
+     * Optional: custom CSS variable mapping. Override if your theme uses
+     * different CSS property names than the default Starter Theme.
+     * Map keys are color_scheme field names → values are CSS property names.
+     * Example: { primary: '--brand-color', secondary: '--accent-color' }
+     */
+    cssVarOverrides?: Record<string, string>;
+    children: React__default.ReactNode;
+}
+/**
+ * Core provider component that enables Visual Editor Mode in Snapstore themes.
+ *
+ * In normal mode (customer visiting the store), this provider is dormant — it passes
+ * the server-fetched initialConfig through context unchanged with zero runtime overhead.
+ *
+ * In editor mode (?editor=true + loaded inside an iframe), it:
+ * 1. Activates editor mode and adds 'editor-mode-active' class to <body>
+ * 2. Listens for postMessage events from the parent editor SPA
+ * 3. Dispatches config changes through the reducer for immutable state updates
+ * 4. Syncs CSS custom properties on <html> when colors/fonts change
+ * 5. Reports section DOM positions to the editor for overlay alignment
+ * 6. Injects editor-specific CSS (hover outlines, disabled interactions)
+ *
+ * @param props.initialConfig - The full LandingPageConfig from GET /store/landing_page/.
+ * @param props.editorOrigin - Allowed postMessage origin. Defaults to "*"; set in production.
+ * @param props.cssVarOverrides - Optional map to override default CSS variable name mappings.
+ * @param props.children - Child components that consume editor context via hooks.
+ */
+declare function EditorProvider({ initialConfig, editorOrigin, cssVarOverrides, children, }: EditorProviderProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Shape of the value provided by EditorContext.
+ * - isEditorMode: Whether the store is running inside the editor iframe with ?editor=true.
+ * - config: The current LandingPageConfig — either the original server-fetched config
+ *   (normal mode) or a live-updating copy managed by the config reducer (editor mode).
+ */
+interface EditorContextValue {
+    isEditorMode: boolean;
+    config: LandingPageConfig;
+}
+/**
+ * React Context that holds the editor state. Consumed by all useXxxConfig hooks.
+ * Defaults to null when no EditorProvider is present in the component tree.
+ */
+declare const EditorContext: React.Context<EditorContextValue | null>;
+
+/**
+ * Returns whether the store is currently running in editor mode.
+ * Editor mode is active when the page is loaded inside an iframe with ?editor=true.
+ * Returns { isEditorMode: false } when used outside of EditorProvider.
+ */
+declare function useEditorMode(): {
+    isEditorMode: boolean;
+};
+
+/**
+ * Returns the full LandingPageConfig object from EditorContext.
+ * In normal mode, this is the original server-fetched config.
+ * In editor mode, this is the live-updating copy that reflects changes from the editor SPA.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useLandingConfig(): LandingPageConfig | null;
+
+/**
+ * Returns the hero banner configuration (title, CTA, images, slider settings).
+ * Updates live in editor mode when the editor SPA sends hero changes.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useHeroConfig(): HeroConfig | null;
+
+/**
+ * Returns the ordered array of landing page sections from the config.
+ * Reflects live reordering, additions, removals, and toggles from the editor SPA.
+ * Memoized to prevent unnecessary re-renders when sections haven't changed.
+ * Returns an empty array when used outside of EditorProvider.
+ */
+declare function useSections(): SectionItem[];
+
+/**
+ * Finds and returns a single section by its unique ID from the sections array.
+ * Memoized to avoid re-computing on every render unless the sections array changes.
+ * Returns undefined if no section with the given ID exists.
+ *
+ * @param sectionId - The unique ID of the section to find (e.g., "categories-7kvobkg2g").
+ */
+declare function useSectionById(sectionId: string): SectionItem | undefined;
+
+/**
+ * Returns the navbar configuration (logo position, cart/wishlist toggles, ribbon bar, nav elements).
+ * Updates live in editor mode when the editor SPA sends navbar changes.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useNavbarConfig(): NavbarConfig | null;
+
+/**
+ * Returns the footer configuration (social links visibility, contact details, branding toggles).
+ * Updates live in editor mode when the editor SPA sends footer changes.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useFooterConfig(): FooterConfig | null;
+
+/**
+ * Returns the color scheme configuration (primary, secondary, background, text, footer colors).
+ * When these values change in editor mode, EditorProvider also syncs CSS custom properties
+ * on <html> for instant visual updates across all SCSS-styled components.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useColorScheme(): ColorSchemeConfig | null;
+
+/**
+ * Returns the font styles configuration (body and heading font family, weight, and Google Font URL).
+ * When fonts change in editor mode, EditorProvider syncs CSS custom properties and dynamically
+ * loads the new Google Font via <link> tag injection.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useFontStyles(): FontStylesConfig | null;
+
+/**
+ * Returns branding-related fields (logo, secondary_logo, favicon, store_name, store_description).
+ * Memoized to only re-compute when one of these specific fields changes, avoiding unnecessary
+ * re-renders when other parts of the config update.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useBranding(): {
+    logo: string;
+    secondary_logo: string;
+    favicon: string;
+    store_name: string;
+    store_description: string;
+} | null;
+
+/**
+ * Returns social media link URLs (twitter, youtube, facebook, instagram).
+ * Updates live in editor mode when the editor SPA sends social link changes.
+ * Returns null when used outside of EditorProvider.
+ */
+declare function useSocialLinks(): SocialLinksConfig | null;
+
+interface SectionWrapperProps {
+    sectionId: string;
+    sectionType: string;
+    enabled?: boolean;
+    className?: string;
+    children: React__default.ReactNode;
+}
+/**
+ * Wraps a landing page section with editor-aware behavior.
+ *
+ * In normal mode: renders children inside a <div> with data-section-id/data-section-type
+ * attributes. If enabled=false, returns null (section is hidden from customers).
+ *
+ * In editor mode: always renders (even disabled sections, shown dimmed at 0.35 opacity).
+ * Intercepts clicks and sends a 'store:section-clicked' postMessage to the parent editor SPA,
+ * allowing the editor to open the settings panel for the clicked section.
+ *
+ * @param props.sectionId - Unique section ID from the API (e.g., "categories-7kvobkg2g").
+ * @param props.sectionType - Section type string (e.g., "categories", "banner").
+ * @param props.enabled - Whether the section is visible. Defaults to true. Disabled sections
+ *   are hidden in normal mode but shown dimmed in editor mode.
+ * @param props.className - Optional additional CSS class names.
+ * @param props.children - The actual section component to render inside the wrapper.
+ */
+declare function SectionWrapper({ sectionId, sectionType, enabled, className, children, }: SectionWrapperProps): react_jsx_runtime.JSX.Element | null;
+
+interface MetaData {
+    meta_title: string;
+    meta_description: string;
+    favicon: string;
+    social_image?: string;
+    color_scheme: {
+        primary: string;
+        secondary: string;
+        bodyBackground: string;
+        bodyBackground1?: string;
+        bodyBackgroundSecondary: string;
+        bodyBackgroundDark?: string;
+        borderBackground: string;
+        textPrimary: string;
+        textPrimaryLight?: string;
+        textSecondary: string;
+        btnText: string;
+    };
+    google_tag_manager_id?: string;
+    facebook_pixel_id?: string;
+    font_styles?: FontStylesConfig;
+}
+
+type EditorMessage = {
+    type: 'editor:init';
+    payload: {
+        config: LandingPageConfig;
+    };
+} | {
+    type: 'editor:full-replace';
+    payload: {
+        config: LandingPageConfig;
+    };
+} | {
+    type: 'editor:update';
+    payload: {
+        path: string;
+        value: any;
+    };
+} | {
+    type: 'editor:hero-update';
+    payload: Partial<HeroConfig>;
+} | {
+    type: 'editor:hero-slide-add';
+    payload: {
+        slide: SliderSlide;
+        position: number;
+    };
+} | {
+    type: 'editor:hero-slide-remove';
+    payload: {
+        slideId: string;
+    };
+} | {
+    type: 'editor:hero-slides-reorder';
+    payload: {
+        slideIds: string[];
+    };
+} | {
+    type: 'editor:hero-slide-update';
+    payload: {
+        slideId: string;
+        data: Partial<SliderSlide>;
+    };
+} | {
+    type: 'editor:sections-reorder';
+    payload: {
+        sectionIds: string[];
+    };
+} | {
+    type: 'editor:section-add';
+    payload: {
+        section: SectionItem;
+        position: number;
+    };
+} | {
+    type: 'editor:section-remove';
+    payload: {
+        sectionId: string;
+    };
+} | {
+    type: 'editor:section-toggle';
+    payload: {
+        sectionId: string;
+        enabled: boolean;
+    };
+} | {
+    type: 'editor:section-update';
+    payload: {
+        sectionId: string;
+        data: Partial<SectionItem>;
+    };
+} | {
+    type: 'editor:navbar-update';
+    payload: Partial<LandingPageConfig['navbar']>;
+} | {
+    type: 'editor:navbar-ribbon-update';
+    payload: Partial<RibbonBarConfig>;
+} | {
+    type: 'editor:navbar-ribbon-message-add';
+    payload: {
+        message: {
+            link: string;
+            message: string;
+        };
+        position: number;
+    };
+} | {
+    type: 'editor:navbar-ribbon-message-remove';
+    payload: {
+        index: number;
+    };
+} | {
+    type: 'editor:navbar-ribbon-messages-reorder';
+    payload: {
+        messages: Array<{
+            link: string;
+            message: string;
+        }>;
+    };
+} | {
+    type: 'editor:navbar-element-update';
+    payload: {
+        key: string;
+        data: Partial<NavElement>;
+    };
+} | {
+    type: 'editor:navbar-element-add';
+    payload: {
+        element: NavElement;
+        position: number;
+    };
+} | {
+    type: 'editor:navbar-element-remove';
+    payload: {
+        key: string;
+    };
+} | {
+    type: 'editor:navbar-elements-reorder';
+    payload: {
+        elements: NavElement[];
+    };
+} | {
+    type: 'editor:footer-update';
+    payload: Partial<FooterConfig>;
+} | {
+    type: 'editor:color-scheme-update';
+    payload: Partial<ColorSchemeConfig>;
+} | {
+    type: 'editor:font-styles-update';
+    payload: {
+        body?: Partial<FontConfig>;
+        heading?: Partial<FontConfig>;
+    };
+} | {
+    type: 'editor:social-links-update';
+    payload: Partial<SocialLinksConfig>;
+} | {
+    type: 'editor:branding-update';
+    payload: Partial<Pick<LandingPageConfig, 'logo' | 'secondary_logo' | 'favicon' | 'store_name' | 'store_description'>>;
+} | {
+    type: 'editor:advanced-update';
+    payload: Partial<Pick<LandingPageConfig, 'custom_css' | 'custom_js' | 'start_head_tag' | 'end_head_tag' | 'start_body_tag' | 'end_body_tag' | 'google_tag_manager_id' | 'facebook_pixel_id'>>;
+} | {
+    type: 'editor:highlight-section';
+    payload: {
+        sectionId: string | null;
+    };
+} | {
+    type: 'editor:navigate';
+    payload: {
+        url: string;
+    };
+};
+type StoreMessage = {
+    type: 'store:ready';
+    payload: {
+        sections: SectionPosition[];
+    };
+} | {
+    type: 'store:section-clicked';
+    payload: {
+        sectionId: string;
+    };
+} | {
+    type: 'store:sections-updated';
+    payload: {
+        sections: SectionPosition[];
+    };
+} | {
+    type: 'store:navigated';
+    payload: {
+        url: string;
+    };
+};
+interface SectionPosition {
+    id: string;
+    type: string;
+    rect: {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+    };
+}
+
+/**
+ * Default mapping: color_scheme field name → CSS custom property name.
+ * These match what app/layout.tsx injects on <html style="...">.
+ *
+ * VERIFY against the actual layout.tsx in your theme!
+ * If your theme uses --brand-primary instead of --primary, pass
+ * cssVarOverrides to EditorProvider.
+ */
+declare const CSS_VAR_MAP: Record<string, string>;
+/**
+ * Updates CSS custom properties on document.documentElement (<html>).
+ * Called by EditorProvider when color_scheme or font_styles change.
+ *
+ * This overwrites the same vars that layout.tsx set on initial SSR,
+ * so all SCSS that references var(--primary) etc. updates immediately.
+ */
+declare function syncCSSVars(colorScheme: ColorSchemeConfig, fontStyles: FontStylesConfig, overrides?: Record<string, string>): void;
+
+export { CSS_VAR_MAP, type ColorSchemeConfig, EditorContext, type EditorContextValue, type EditorMessage, EditorProvider, type EditorProviderProps, type FontConfig, type FontStylesConfig, type FooterConfig, type HeroConfig, type LandingPageConfig, type MetaData, type NavElement, type NavbarConfig, type RibbonBarConfig, type SectionItem, type SectionPosition, SectionWrapper, type SectionWrapperProps, type SliderSlide, type SocialLinksConfig, type StoreMessage, type ThemeInfo, syncCSSVars, useBranding, useColorScheme, useEditorMode, useFontStyles, useFooterConfig, useHeroConfig, useLandingConfig, useNavbarConfig, useSectionById, useSections, useSocialLinks };