@storepecker/editor-bridge 1.0.1

package/dist/index.js

@@ -0,0 +1,587 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  CSS_VAR_MAP: () => CSS_VAR_MAP,
+  EditorContext: () => EditorContext,
+  EditorProvider: () => EditorProvider,
+  SectionWrapper: () => SectionWrapper,
+  syncCSSVars: () => syncCSSVars,
+  useBranding: () => useBranding,
+  useColorScheme: () => useColorScheme,
+  useEditorMode: () => useEditorMode,
+  useFontStyles: () => useFontStyles,
+  useFooterConfig: () => useFooterConfig,
+  useHeroConfig: () => useHeroConfig,
+  useLandingConfig: () => useLandingConfig,
+  useNavbarConfig: () => useNavbarConfig,
+  useSectionById: () => useSectionById,
+  useSections: () => useSections,
+  useSocialLinks: () => useSocialLinks
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/provider/EditorProvider.tsx
+var import_react2 = require("react");
+
+// src/provider/EditorContext.ts
+var import_react = require("react");
+var EditorContext = (0, import_react.createContext)(null);
+
+// src/provider/config-reducer.ts
+function toReducerAction(msg) {
+  switch (msg.type) {
+    case "editor:init":
+    case "editor:full-replace":
+      return { type: "FULL_REPLACE", config: msg.payload.config };
+    case "editor:update":
+      return { type: "UPDATE_PATH", path: msg.payload.path, value: msg.payload.value };
+    case "editor:hero-update":
+      return { type: "HERO_UPDATE", data: msg.payload };
+    case "editor:hero-slide-add":
+      return { type: "HERO_SLIDE_ADD", slide: msg.payload.slide, position: msg.payload.position };
+    case "editor:hero-slide-remove":
+      return { type: "HERO_SLIDE_REMOVE", slideId: msg.payload.slideId };
+    case "editor:hero-slides-reorder":
+      return { type: "HERO_SLIDES_REORDER", slideIds: msg.payload.slideIds };
+    case "editor:hero-slide-update":
+      return { type: "HERO_SLIDE_UPDATE", slideId: msg.payload.slideId, data: msg.payload.data };
+    case "editor:sections-reorder":
+      return { type: "SECTIONS_REORDER", sectionIds: msg.payload.sectionIds };
+    case "editor:section-add":
+      return { type: "SECTION_ADD", section: msg.payload.section, position: msg.payload.position };
+    case "editor:section-remove":
+      return { type: "SECTION_REMOVE", sectionId: msg.payload.sectionId };
+    case "editor:section-toggle":
+      return { type: "SECTION_TOGGLE", sectionId: msg.payload.sectionId, enabled: msg.payload.enabled };
+    case "editor:section-update":
+      return { type: "SECTION_UPDATE", sectionId: msg.payload.sectionId, data: msg.payload.data };
+    case "editor:navbar-update":
+      return { type: "NAVBAR_UPDATE", data: msg.payload };
+    case "editor:navbar-ribbon-update":
+      return { type: "NAVBAR_RIBBON_UPDATE", data: msg.payload };
+    case "editor:navbar-ribbon-message-add":
+      return { type: "NAVBAR_RIBBON_MSG_ADD", message: msg.payload.message, position: msg.payload.position };
+    case "editor:navbar-ribbon-message-remove":
+      return { type: "NAVBAR_RIBBON_MSG_REMOVE", index: msg.payload.index };
+    case "editor:navbar-ribbon-messages-reorder":
+      return { type: "NAVBAR_RIBBON_MSGS_REORDER", messages: msg.payload.messages };
+    case "editor:navbar-element-update":
+      return { type: "NAVBAR_ELEMENT_UPDATE", key: msg.payload.key, data: msg.payload.data };
+    case "editor:navbar-element-add":
+      return { type: "NAVBAR_ELEMENT_ADD", element: msg.payload.element, position: msg.payload.position };
+    case "editor:navbar-element-remove":
+      return { type: "NAVBAR_ELEMENT_REMOVE", key: msg.payload.key };
+    case "editor:navbar-elements-reorder":
+      return { type: "NAVBAR_ELEMENTS_REORDER", elements: msg.payload.elements };
+    case "editor:footer-update":
+      return { type: "FOOTER_UPDATE", data: msg.payload };
+    case "editor:color-scheme-update":
+      return { type: "COLOR_SCHEME_UPDATE", data: msg.payload };
+    case "editor:font-styles-update":
+      return { type: "FONT_STYLES_UPDATE", data: msg.payload };
+    case "editor:social-links-update":
+      return { type: "SOCIAL_LINKS_UPDATE", data: msg.payload };
+    case "editor:branding-update":
+      return { type: "BRANDING_UPDATE", data: msg.payload };
+    case "editor:advanced-update":
+      return { type: "ADVANCED_UPDATE", data: msg.payload };
+    default:
+      return null;
+  }
+}
+function configReducer(state, action) {
+  switch (action.type) {
+    case "FULL_REPLACE":
+      return action.config;
+    case "UPDATE_PATH":
+      return setByPath(state, action.path, action.value);
+    // ── Hero ──
+    case "HERO_UPDATE":
+      return { ...state, hero: { ...state.hero, ...action.data } };
+    case "HERO_SLIDE_ADD": {
+      const slides = [...state.hero.sliderSettings];
+      slides.splice(action.position, 0, action.slide);
+      return { ...state, hero: { ...state.hero, sliderSettings: slides } };
+    }
+    case "HERO_SLIDE_REMOVE":
+      return {
+        ...state,
+        hero: {
+          ...state.hero,
+          sliderSettings: state.hero.sliderSettings.filter((s) => s.id !== action.slideId)
+        }
+      };
+    case "HERO_SLIDES_REORDER": {
+      const reordered = action.slideIds.map((id) => state.hero.sliderSettings.find((s) => s.id === id)).filter(Boolean);
+      return { ...state, hero: { ...state.hero, sliderSettings: reordered } };
+    }
+    case "HERO_SLIDE_UPDATE":
+      return {
+        ...state,
+        hero: {
+          ...state.hero,
+          sliderSettings: state.hero.sliderSettings.map(
+            (s) => s.id === action.slideId ? { ...s, ...action.data } : s
+          )
+        }
+      };
+    // ── Sections ──
+    case "SECTIONS_REORDER": {
+      const reordered = action.sectionIds.map((id) => state.sections.find((s) => s.id === id)).filter(Boolean);
+      return { ...state, sections: reordered };
+    }
+    case "SECTION_ADD": {
+      const sections = [...state.sections];
+      sections.splice(action.position, 0, action.section);
+      return { ...state, sections };
+    }
+    case "SECTION_REMOVE":
+      return { ...state, sections: state.sections.filter((s) => s.id !== action.sectionId) };
+    case "SECTION_TOGGLE":
+      return {
+        ...state,
+        sections: state.sections.map(
+          (s) => s.id === action.sectionId ? { ...s, enabled: action.enabled } : s
+        )
+      };
+    case "SECTION_UPDATE":
+      return {
+        ...state,
+        sections: state.sections.map(
+          (s) => s.id === action.sectionId ? { ...s, ...action.data } : s
+        )
+      };
+    // ── Navbar ──
+    case "NAVBAR_UPDATE": {
+      const { ribbonbar, navElements, ...rest } = action.data;
+      let navbar = { ...state.navbar, ...rest };
+      if (ribbonbar) navbar = { ...navbar, ribbonbar: { ...navbar.ribbonbar, ...ribbonbar } };
+      if (navElements) navbar = { ...navbar, navElements };
+      return { ...state, navbar };
+    }
+    case "NAVBAR_RIBBON_UPDATE":
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          ribbonbar: { ...state.navbar.ribbonbar, ...action.data }
+        }
+      };
+    case "NAVBAR_RIBBON_MSG_ADD": {
+      const messages = [...state.navbar.ribbonbar.messages];
+      messages.splice(action.position, 0, action.message);
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          ribbonbar: { ...state.navbar.ribbonbar, messages }
+        }
+      };
+    }
+    case "NAVBAR_RIBBON_MSG_REMOVE": {
+      const messages = state.navbar.ribbonbar.messages.filter((_, i) => i !== action.index);
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          ribbonbar: { ...state.navbar.ribbonbar, messages }
+        }
+      };
+    }
+    case "NAVBAR_RIBBON_MSGS_REORDER":
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          ribbonbar: { ...state.navbar.ribbonbar, messages: action.messages }
+        }
+      };
+    case "NAVBAR_ELEMENT_UPDATE":
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          navElements: state.navbar.navElements.map(
+            (el) => el.key === action.key ? { ...el, ...action.data } : el
+          )
+        }
+      };
+    case "NAVBAR_ELEMENT_ADD": {
+      const navElements = [...state.navbar.navElements];
+      navElements.splice(action.position, 0, action.element);
+      return { ...state, navbar: { ...state.navbar, navElements } };
+    }
+    case "NAVBAR_ELEMENT_REMOVE":
+      return {
+        ...state,
+        navbar: {
+          ...state.navbar,
+          navElements: state.navbar.navElements.filter((el) => el.key !== action.key)
+        }
+      };
+    case "NAVBAR_ELEMENTS_REORDER":
+      return { ...state, navbar: { ...state.navbar, navElements: action.elements } };
+    // ── Top-level ──
+    case "FOOTER_UPDATE":
+      return { ...state, footer: { ...state.footer, ...action.data } };
+    case "COLOR_SCHEME_UPDATE":
+      return { ...state, color_scheme: { ...state.color_scheme, ...action.data } };
+    case "FONT_STYLES_UPDATE": {
+      const font_styles = { ...state.font_styles };
+      if (action.data.body) font_styles.body = { ...font_styles.body, ...action.data.body };
+      if (action.data.heading) font_styles.heading = { ...font_styles.heading, ...action.data.heading };
+      return { ...state, font_styles };
+    }
+    case "SOCIAL_LINKS_UPDATE":
+      return { ...state, social_links: { ...state.social_links, ...action.data } };
+    case "BRANDING_UPDATE":
+      return { ...state, ...action.data };
+    case "ADVANCED_UPDATE":
+      return { ...state, ...action.data };
+    default:
+      return state;
+  }
+}
+function setByPath(obj, path, value) {
+  const keys = path.split(".");
+  if (keys.length === 1) return { ...obj, [keys[0]]: value };
+  const [head, ...tail] = keys;
+  return { ...obj, [head]: setByPath(obj[head] ?? {}, tail.join("."), value) };
+}
+
+// src/css/css-var-sync.ts
+var CSS_VAR_MAP = {
+  primary: "--primary",
+  secondary: "--secondary",
+  btnText: "--btn-text",
+  textPrimary: "--text-primary",
+  textSecondary: "--text-secondary",
+  bodyBackground: "--bg-primary",
+  bodyBackground1: "--bg-primary-smoke",
+  bodyBackgroundSecondary: "--bg-secondary-color",
+  bodyBackgroundDark: "--bg-dark",
+  borderBackground: "--bg-border",
+  headerbg: "--header-bg",
+  textColor: "--text-color",
+  footerBgColor: "--footer-bg",
+  footerTextColor: "--footer-text"
+};
+function syncCSSVars(colorScheme, fontStyles, overrides) {
+  const root = document.documentElement;
+  const varMap = overrides ? { ...CSS_VAR_MAP, ...overrides } : CSS_VAR_MAP;
+  for (const [configKey, cssVar] of Object.entries(varMap)) {
+    const value = colorScheme[configKey];
+    if (value !== void 0 && value !== null && value !== "") {
+      root.style.setProperty(cssVar, value);
+    }
+  }
+  if (fontStyles?.heading) {
+    root.style.setProperty("--heading-font", `'${fontStyles.heading.font_family}'`);
+    root.style.setProperty("--heading-weight", String(fontStyles.heading.font_weight));
+    loadGoogleFont(fontStyles.heading.font_url);
+  }
+  if (fontStyles?.body) {
+    root.style.setProperty("--body-font", `'${fontStyles.body.font_family}'`);
+    root.style.setProperty("--body-weight", String(fontStyles.body.font_weight));
+    loadGoogleFont(fontStyles.body.font_url);
+  }
+}
+function loadGoogleFont(url) {
+  if (!url) return;
+  if (document.querySelector(`link[href="${url}"]`)) return;
+  const link = document.createElement("link");
+  link.rel = "stylesheet";
+  link.href = url;
+  document.head.appendChild(link);
+}
+
+// src/provider/EditorProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function EditorProvider({
+  initialConfig,
+  editorOrigin = "*",
+  cssVarOverrides,
+  children
+}) {
+  const [isEditorMode, setIsEditorMode] = (0, import_react2.useState)(false);
+  const [config, dispatch] = (0, import_react2.useReducer)(configReducer, initialConfig);
+  const positionTimerRef = (0, import_react2.useRef)(null);
+  const prevColorRef = (0, import_react2.useRef)(initialConfig.color_scheme);
+  const prevFontRef = (0, import_react2.useRef)(initialConfig.font_styles);
+  (0, import_react2.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    const inIframe = window.self !== window.top;
+    if (inIframe && params.get("editor") === "true") {
+      setIsEditorMode(true);
+      document.body.classList.add("editor-mode-active");
+    }
+    return () => {
+      document.body.classList.remove("editor-mode-active");
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!isEditorMode) return;
+    const handler = (event) => {
+      if (editorOrigin !== "*" && event.origin !== editorOrigin) return;
+      const msg = event.data;
+      if (!msg?.type?.startsWith("editor:")) return;
+      if (msg.type === "editor:navigate") {
+        const url = new URL(msg.payload.url, window.location.origin);
+        url.searchParams.set("editor", "true");
+        window.location.href = url.toString();
+        return;
+      }
+      if (msg.type === "editor:highlight-section") {
+        document.querySelectorAll("[data-section-id]").forEach((el) => {
+          el.classList.toggle(
+            "editor-section-highlight",
+            el.getAttribute("data-section-id") === msg.payload.sectionId
+          );
+        });
+        return;
+      }
+      const action = toReducerAction(msg);
+      if (action) dispatch(action);
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [isEditorMode, editorOrigin]);
+  (0, import_react2.useEffect)(() => {
+    if (!isEditorMode) return;
+    const timer = setTimeout(() => {
+      sendToEditor({
+        type: "store:ready",
+        payload: { sections: getSectionPositions() }
+      });
+    }, 600);
+    return () => clearTimeout(timer);
+  }, [isEditorMode]);
+  (0, import_react2.useEffect)(() => {
+    if (!isEditorMode) return;
+    if (config.color_scheme !== prevColorRef.current || config.font_styles !== prevFontRef.current) {
+      syncCSSVars(config.color_scheme, config.font_styles, cssVarOverrides);
+      prevColorRef.current = config.color_scheme;
+      prevFontRef.current = config.font_styles;
+    }
+  }, [isEditorMode, config.color_scheme, config.font_styles, cssVarOverrides]);
+  (0, import_react2.useEffect)(() => {
+    if (!isEditorMode) return;
+    if (positionTimerRef.current) clearTimeout(positionTimerRef.current);
+    positionTimerRef.current = setTimeout(() => {
+      sendToEditor({
+        type: "store:sections-updated",
+        payload: { sections: getSectionPositions() }
+      });
+    }, 300);
+  }, [config.sections, config.hero, isEditorMode]);
+  const value = (0, import_react2.useMemo)(
+    () => ({ isEditorMode, config }),
+    [isEditorMode, config]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(EditorContext.Provider, { value, children: [
+    isEditorMode && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EditorStylesInline, {}),
+    children
+  ] });
+}
+function sendToEditor(message) {
+  if (typeof window === "undefined" || window.self === window.top) return;
+  window.parent.postMessage(message, "*");
+}
+function getSectionPositions() {
+  return Array.from(document.querySelectorAll("[data-section-id]")).map((el) => ({
+    id: el.getAttribute("data-section-id"),
+    type: el.getAttribute("data-section-type") || "",
+    rect: el.getBoundingClientRect()
+  }));
+}
+function EditorStylesInline() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+      [data-section-id] {
+        position: relative;
+        transition: outline 0.15s ease;
+      }
+      [data-section-id]:hover {
+        outline: 2px solid rgba(59, 130, 246, 0.5);
+        outline-offset: -2px;
+        cursor: pointer;
+      }
+      .editor-section-highlight {
+        outline: 2px solid #3b82f6 !important;
+        outline-offset: -2px;
+      }
+      .editor-section-disabled {
+        opacity: 0.35;
+      }
+      .editor-mode-active a,
+      .editor-mode-active button:not([data-editor-control]),
+      .editor-mode-active input,
+      .editor-mode-active select,
+      .editor-mode-active form,
+      .editor-mode-active textarea {
+        pointer-events: none !important;
+      }
+      [data-section-id] > .editor-click-overlay {
+        pointer-events: auto !important;
+      }
+    ` });
+}
+
+// src/hooks/useEditorMode.ts
+var import_react3 = require("react");
+function useEditorMode() {
+  const ctx = (0, import_react3.useContext)(EditorContext);
+  return { isEditorMode: ctx?.isEditorMode ?? false };
+}
+
+// src/hooks/useLandingConfig.ts
+var import_react4 = require("react");
+function useLandingConfig() {
+  return (0, import_react4.useContext)(EditorContext)?.config ?? null;
+}
+
+// src/hooks/useHeroConfig.ts
+var import_react5 = require("react");
+function useHeroConfig() {
+  return (0, import_react5.useContext)(EditorContext)?.config?.hero ?? null;
+}
+
+// src/hooks/useSections.ts
+var import_react6 = require("react");
+function useSections() {
+  const ctx = (0, import_react6.useContext)(EditorContext);
+  return (0, import_react6.useMemo)(() => ctx?.config?.sections ?? [], [ctx?.config?.sections]);
+}
+
+// src/hooks/useSectionById.ts
+var import_react7 = require("react");
+function useSectionById(sectionId) {
+  const ctx = (0, import_react7.useContext)(EditorContext);
+  return (0, import_react7.useMemo)(
+    () => ctx?.config?.sections.find((s) => s.id === sectionId),
+    [ctx?.config?.sections, sectionId]
+  );
+}
+
+// src/hooks/useNavbarConfig.ts
+var import_react8 = require("react");
+function useNavbarConfig() {
+  return (0, import_react8.useContext)(EditorContext)?.config?.navbar ?? null;
+}
+
+// src/hooks/useFooterConfig.ts
+var import_react9 = require("react");
+function useFooterConfig() {
+  return (0, import_react9.useContext)(EditorContext)?.config?.footer ?? null;
+}
+
+// src/hooks/useColorScheme.ts
+var import_react10 = require("react");
+function useColorScheme() {
+  return (0, import_react10.useContext)(EditorContext)?.config?.color_scheme ?? null;
+}
+
+// src/hooks/useFontStyles.ts
+var import_react11 = require("react");
+function useFontStyles() {
+  return (0, import_react11.useContext)(EditorContext)?.config?.font_styles ?? null;
+}
+
+// src/hooks/useBranding.ts
+var import_react12 = require("react");
+function useBranding() {
+  const ctx = (0, import_react12.useContext)(EditorContext);
+  return (0, import_react12.useMemo)(() => {
+    if (!ctx?.config) return null;
+    const c = ctx.config;
+    return {
+      logo: c.logo,
+      secondary_logo: c.secondary_logo,
+      favicon: c.favicon,
+      store_name: c.store_name,
+      store_description: c.store_description
+    };
+  }, [
+    ctx?.config?.logo,
+    ctx?.config?.secondary_logo,
+    ctx?.config?.favicon,
+    ctx?.config?.store_name,
+    ctx?.config?.store_description
+  ]);
+}
+
+// src/hooks/useSocialLinks.ts
+var import_react13 = require("react");
+function useSocialLinks() {
+  return (0, import_react13.useContext)(EditorContext)?.config?.social_links ?? null;
+}
+
+// src/components/SectionWrapper.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function SectionWrapper({
+  sectionId,
+  sectionType,
+  enabled = true,
+  className = "",
+  children
+}) {
+  const { isEditorMode } = useEditorMode();
+  if (!enabled && !isEditorMode) return null;
+  const handleClick = isEditorMode ? (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    window.parent.postMessage(
+      { type: "store:section-clicked", payload: { sectionId } },
+      "*"
+    );
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "div",
+    {
+      "data-section-id": sectionId,
+      "data-section-type": sectionType,
+      className: `${!enabled && isEditorMode ? "editor-section-disabled" : ""} ${className}`.trim(),
+      onClick: handleClick,
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  CSS_VAR_MAP,
+  EditorContext,
+  EditorProvider,
+  SectionWrapper,
+  syncCSSVars,
+  useBranding,
+  useColorScheme,
+  useEditorMode,
+  useFontStyles,
+  useFooterConfig,
+  useHeroConfig,
+  useLandingConfig,
+  useNavbarConfig,
+  useSectionById,
+  useSections,
+  useSocialLinks
+});
+//# sourceMappingURL=index.js.map