@yoamigo.com/core 0.1.0

package/dist/lib.js

@@ -0,0 +1,736 @@
+// src/lib/content-registry.ts
+var contentMap = /* @__PURE__ */ new Map();
+function registerContent(content) {
+  contentMap = new Map(Object.entries(content));
+}
+function getContent(fieldId) {
+  return contentMap.get(fieldId) ?? "";
+}
+function getAllContent() {
+  return Object.fromEntries(contentMap);
+}
+function hasContent(fieldId) {
+  return contentMap.has(fieldId);
+}
+var contentRegistry = {
+  registerContent,
+  getContent,
+  getAllContent,
+  hasContent
+};
+
+// src/lib/asset-resolver.ts
+var assetResolver = (path) => path;
+function setAssetResolver(resolver) {
+  assetResolver = resolver;
+}
+function resolveAssetUrl(path) {
+  if (!path) return "";
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+  return assetResolver(path);
+}
+
+// src/lib/builder-selection.ts
+var SELECTABLE_SELECTORS = [
+  // Interactive elements
+  "button",
+  // Buttons
+  "a[href]",
+  // Links with href
+  '[role="button"]',
+  // ARIA buttons
+  // Form elements
+  "input",
+  // Input fields (text, checkbox, etc.)
+  "textarea",
+  // Text areas
+  "select",
+  // Dropdown selects
+  "label",
+  // Form labels
+  "form",
+  // Forms as containers
+  // Media elements
+  "img",
+  // Images
+  "video",
+  // Videos
+  "audio",
+  // Audio players
+  "iframe",
+  // Embedded content
+  "svg",
+  // SVG graphics
+  "figure",
+  // Figures with captions
+  "figcaption",
+  // Figure captions
+  // Text/content elements
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  // Headings
+  "p",
+  // Paragraphs
+  "blockquote",
+  // Block quotes
+  "table",
+  // Tables
+  "tr",
+  // Table rows
+  "td",
+  // Table cells
+  "th",
+  // Table headers
+  // List elements
+  "li",
+  // List items (event cards, etc.)
+  "ol",
+  // Ordered lists
+  "ul",
+  // Unordered lists
+  // Other
+  "article",
+  // Article cards
+  "[data-mp-selectable]"
+  // Explicit selectables (backward compatible)
+];
+var CONTAINER_SELECTORS = [
+  "section",
+  "[data-mp-editable]",
+  "nav",
+  "header",
+  "footer"
+];
+var BuilderSelectionManager = class {
+  enabled = false;
+  selections = /* @__PURE__ */ new Map();
+  hoverOverlay = null;
+  currentHoveredElement = null;
+  // Cache element references for lookup when syncing selections
+  elementMap = /* @__PURE__ */ new Map();
+  // Current selections from parent (for re-rendering on mode change)
+  currentSelections = [];
+  constructor() {
+    if (window.parent === window) {
+      console.log("[BuilderSelection] Not in iframe, skipping initialization");
+      return;
+    }
+    console.log("[BuilderSelection] Initializing in iframe context");
+    this.setupMessageListener();
+    this.createHoverOverlay();
+    this.setupScrollResizeListeners();
+    this.setupKeyboardListener();
+    this.setupWheelForwarding();
+    this.notifyPageReady();
+    window.addEventListener("popstate", () => this.notifyPageReady());
+  }
+  notifyPageReady() {
+    this.sendToParent({
+      type: "PAGE_READY",
+      page: window.location.pathname
+    });
+  }
+  sendToParent(message) {
+    try {
+      window.parent.postMessage(message, "*");
+    } catch (error) {
+      console.error("[BuilderSelection] Failed to send message to parent:", error);
+    }
+  }
+  setupMessageListener() {
+    window.addEventListener("message", (event) => {
+      const data = event.data;
+      if (!data?.type) return;
+      switch (data.type) {
+        case "SELECTOR_MODE":
+          this.setEnabled(data.enabled ?? false);
+          break;
+        case "SELECTION_SYNC":
+          this.syncSelections(data.selections ?? [], data.currentPage ?? "");
+          break;
+        case "CLEAR_SELECTIONS":
+          this.clearAllSelections();
+          break;
+      }
+    });
+  }
+  setEnabled(enabled) {
+    console.log("[BuilderSelection] Selector mode:", enabled);
+    this.enabled = enabled;
+    window.__builderSelectModeEnabled = enabled;
+    if (enabled) {
+      document.body.style.cursor = "crosshair";
+      document.body.classList.add("builder-selector-active");
+      this.attachEventListeners();
+      this.renderSelectionMasks();
+    } else {
+      document.body.style.cursor = "";
+      document.body.classList.remove("builder-selector-active");
+      this.detachEventListeners();
+      this.hideHoverOverlay();
+      this.clearAllSelections();
+    }
+  }
+  attachEventListeners() {
+    document.addEventListener("mouseover", this.handleMouseOver);
+    document.addEventListener("mouseout", this.handleMouseOut);
+    document.addEventListener("click", this.handleClick, true);
+  }
+  detachEventListeners() {
+    document.removeEventListener("mouseover", this.handleMouseOver);
+    document.removeEventListener("mouseout", this.handleMouseOut);
+    document.removeEventListener("click", this.handleClick, true);
+  }
+  handleMouseOver = (e) => {
+    if (!this.enabled) return;
+    const target = this.findDeepestSelectableAt(e.target);
+    if (!target || target === this.currentHoveredElement) return;
+    this.currentHoveredElement = target;
+    this.showHoverOverlay(target);
+    const selectorId = this.generateSelectorId(target);
+    this.sendToParent({
+      type: "ELEMENT_HOVER",
+      selectorId
+    });
+  };
+  handleMouseOut = (e) => {
+    if (!this.enabled) return;
+    const relatedTarget = e.relatedTarget;
+    const stillInSelectable = relatedTarget ? this.findDeepestSelectableAt(relatedTarget) : null;
+    if (!stillInSelectable || stillInSelectable !== this.currentHoveredElement) {
+      this.currentHoveredElement = null;
+      this.hideHoverOverlay();
+      this.sendToParent({
+        type: "ELEMENT_HOVER",
+        selectorId: null
+      });
+    }
+  };
+  handleClick = (e) => {
+    if (!this.enabled) return;
+    const target = this.findDeepestSelectableAt(e.target);
+    if (!target) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const selectorId = this.generateSelectorId(target);
+    const label = this.deriveLabel(target);
+    this.elementMap.set(selectorId, target);
+    this.sendToParent({
+      type: "ELEMENT_CLICKED",
+      selectorId,
+      label,
+      page: window.location.pathname,
+      modifier: e.shiftKey ? "shift" : e.metaKey || e.ctrlKey ? "cmd" : null
+    });
+  };
+  handleKeyDown = (e) => {
+    if (e.key === "Shift") {
+      const activeElement = document.activeElement;
+      const isEditing = activeElement?.closest(".ya-text-editing") || activeElement?.closest(".ya-link-editing");
+      if (!isEditing) {
+        this.sendToParent({ type: "SHIFT_KEY_PRESSED" });
+      }
+    }
+  };
+  /**
+   * Check if element matches any selectable selector
+   */
+  isSelectableElement(el) {
+    for (const selector of SELECTABLE_SELECTORS) {
+      if (el.matches(selector)) return true;
+    }
+    for (const selector of CONTAINER_SELECTORS) {
+      if (el.matches(selector)) return true;
+    }
+    return false;
+  }
+  /**
+   * Find the deepest selectable element from the click/hover target
+   * Walks up the DOM tree and returns the first (deepest) selectable found
+   */
+  findDeepestSelectableAt(target) {
+    if (target.closest(".mp-text-editing")) {
+      return null;
+    }
+    let current = target;
+    const selectables = [];
+    while (current && current !== document.body) {
+      if (this.isSelectableElement(current)) {
+        selectables.push(current);
+      }
+      current = current.parentElement;
+    }
+    return selectables[0] || null;
+  }
+  /**
+   * Generate a unique selector ID for an element
+   * Uses data-mp-selectable if available, otherwise generates from context
+   */
+  generateSelectorId(el) {
+    if (el.dataset.mpSelectable) return el.dataset.mpSelectable;
+    if (el.id) return el.id;
+    const tag = el.tagName.toLowerCase();
+    const parent = el.closest("section, [data-mp-selectable], [data-mp-editable]");
+    const parentId = parent?.dataset?.mpSelectable || parent?.dataset?.mpEditable || parent?.id || "page";
+    const siblings = parent ? Array.from(parent.querySelectorAll(tag)) : [];
+    const index = siblings.indexOf(el);
+    return `${parentId}.${tag}${index > 0 ? `.${index}` : ""}`;
+  }
+  /**
+   * Derive a human-readable label from the element
+   */
+  deriveLabel(el) {
+    if (el.dataset.mpSelectable) {
+      return this.toTitleCase(el.dataset.mpSelectable);
+    }
+    const tag = el.tagName.toLowerCase();
+    const text = el.textContent?.trim().slice(0, 30) || "";
+    if (tag === "button" || el.getAttribute("role") === "button") {
+      return text ? `"${text}" Button` : "Button";
+    }
+    if (tag === "a") {
+      return text ? `"${text}" Link` : "Link";
+    }
+    if (tag === "img") {
+      return el.alt || "Image";
+    }
+    if (tag === "video") {
+      return "Video";
+    }
+    if (tag === "audio") {
+      return "Audio Player";
+    }
+    if (tag === "iframe") {
+      return "Embedded Content";
+    }
+    if (tag === "svg") {
+      return "SVG Graphic";
+    }
+    if (tag === "figure") {
+      const caption = el.querySelector("figcaption")?.textContent?.trim();
+      return caption ? `Figure: ${caption.slice(0, 20)}` : "Figure";
+    }
+    if (tag === "figcaption") {
+      return text ? `Caption: ${text.slice(0, 20)}` : "Caption";
+    }
+    if (tag === "input") {
+      const type = el.type || "text";
+      const placeholder = el.placeholder;
+      if (type === "submit") return "Submit Button";
+      if (type === "checkbox") return "Checkbox";
+      if (type === "radio") return "Radio Button";
+      return placeholder ? `"${placeholder}" Input` : `${type.charAt(0).toUpperCase() + type.slice(1)} Input`;
+    }
+    if (tag === "textarea") {
+      const placeholder = el.placeholder;
+      return placeholder ? `"${placeholder}" Text Area` : "Text Area";
+    }
+    if (tag === "select") {
+      return "Dropdown";
+    }
+    if (tag === "label") {
+      return text ? `Label: ${text.slice(0, 20)}` : "Label";
+    }
+    if (tag === "form") {
+      return "Form";
+    }
+    if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)) {
+      return text ? `Heading: ${text.slice(0, 25)}` : `${tag.toUpperCase()} Heading`;
+    }
+    if (tag === "p") {
+      return text ? `Paragraph: ${text.slice(0, 20)}...` : "Paragraph";
+    }
+    if (tag === "blockquote") {
+      return text ? `Quote: ${text.slice(0, 20)}...` : "Block Quote";
+    }
+    if (tag === "table") {
+      return "Table";
+    }
+    if (tag === "tr") {
+      return "Table Row";
+    }
+    if (tag === "td" || tag === "th") {
+      return text ? `Cell: ${text.slice(0, 15)}` : "Table Cell";
+    }
+    if (tag === "ol") {
+      return "Ordered List";
+    }
+    if (tag === "ul") {
+      return "Unordered List";
+    }
+    if (tag === "li") {
+      const preview = text.length > 20 ? text.slice(0, 20) + "..." : text;
+      return preview ? `List Item: ${preview}` : "List Item";
+    }
+    if (tag === "section") {
+      const heading = el.querySelector("h1, h2, h3")?.textContent?.trim();
+      return heading ? `${heading} Section` : "Section";
+    }
+    if (tag === "article") {
+      const heading = el.querySelector("h1, h2, h3, h4")?.textContent?.trim();
+      return heading ? heading : "Article";
+    }
+    if (tag === "nav") {
+      return "Navigation";
+    }
+    if (tag === "header") {
+      return "Header";
+    }
+    if (tag === "footer") {
+      return "Footer";
+    }
+    return text || this.toTitleCase(tag);
+  }
+  /**
+   * Convert kebab-case or tag names to Title Case
+   */
+  toTitleCase(str) {
+    return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  }
+  createHoverOverlay() {
+    this.hoverOverlay = document.createElement("div");
+    this.hoverOverlay.id = "builder-hover-overlay";
+    this.hoverOverlay.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      border: 2px dashed #3B82F6;
+      background: rgba(59, 130, 246, 0.05);
+      z-index: 9999;
+      display: none;
+      transition: all 0.15s ease-out;
+      border-radius: 4px;
+    `;
+    document.body.appendChild(this.hoverOverlay);
+  }
+  setupScrollResizeListeners() {
+    window.addEventListener("scroll", this.updateSelectionPositions, { passive: true });
+    window.addEventListener("resize", this.updateSelectionPositions, { passive: true });
+  }
+  setupKeyboardListener() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * Forward wheel events with ctrlKey (pinch zoom) to parent
+   * This allows pinch-to-zoom gestures inside the iframe to control
+   * the parent's zoom state instead of zooming the iframe content
+   */
+  setupWheelForwarding() {
+    document.addEventListener("wheel", (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        this.sendToParent({
+          type: "IFRAME_WHEEL",
+          deltaY: e.deltaY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          ctrlKey: true
+        });
+      }
+    }, { passive: false });
+  }
+  showHoverOverlay(element) {
+    if (!this.hoverOverlay) return;
+    const rect = element.getBoundingClientRect();
+    this.hoverOverlay.style.top = `${rect.top}px`;
+    this.hoverOverlay.style.left = `${rect.left}px`;
+    this.hoverOverlay.style.width = `${rect.width}px`;
+    this.hoverOverlay.style.height = `${rect.height}px`;
+    this.hoverOverlay.style.display = "block";
+  }
+  hideHoverOverlay() {
+    if (this.hoverOverlay) {
+      this.hoverOverlay.style.display = "none";
+    }
+  }
+  syncSelections(selections, _currentPage) {
+    console.log("[BuilderSelection] Syncing selections:", selections.length, "current page:", _currentPage);
+    this.currentSelections = selections;
+    if (!this.enabled) {
+      this.clearAllSelections();
+      return;
+    }
+    this.renderSelectionMasks();
+  }
+  /**
+   * Render selection masks for current selections (only when enabled)
+   */
+  renderSelectionMasks() {
+    this.clearAllSelections();
+    for (const sel of this.currentSelections) {
+      if (sel.page !== window.location.pathname) continue;
+      const element = this.findElementBySelectorId(sel.selectorId);
+      if (!element) {
+        console.warn(`[BuilderSelection] Element not found for selector: ${sel.selectorId}`);
+        continue;
+      }
+      this.renderSelectionIndicator(element, sel.id, sel.color);
+    }
+  }
+  /**
+   * Find element by selector ID (supports both explicit and auto-generated IDs)
+   */
+  findElementBySelectorId(selectorId) {
+    const explicit = document.querySelector(`[data-mp-selectable="${selectorId}"]`);
+    if (explicit) return explicit;
+    const byId = document.getElementById(selectorId);
+    if (byId) return byId;
+    const cached = this.elementMap.get(selectorId);
+    if (cached && document.body.contains(cached)) return cached;
+    const parts = selectorId.split(".");
+    if (parts.length >= 2) {
+      const parentId = parts[0];
+      const tag = parts[1];
+      const index = parts.length > 2 ? parseInt(parts[2], 10) : 0;
+      let parent = null;
+      if (parentId === "page") {
+        parent = document.body;
+      } else {
+        parent = document.querySelector(`[data-mp-selectable="${parentId}"]`) || document.querySelector(`[data-mp-editable="${parentId}"]`) || document.getElementById(parentId) || document.querySelector(`section#${parentId}`);
+      }
+      if (parent) {
+        const candidates = parent.querySelectorAll(tag);
+        if (candidates[index]) {
+          return candidates[index];
+        }
+      }
+    }
+    return null;
+  }
+  clearAllSelections() {
+    this.selections.forEach(({ container }) => {
+      container.remove();
+    });
+    this.selections.clear();
+  }
+  /**
+   * Update positions of selection overlays when viewport changes (scroll/resize)
+   */
+  updateSelectionPositions = () => {
+    this.selections.forEach(({ element, container }) => {
+      if (!document.body.contains(element)) {
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      container.style.top = `${rect.top}px`;
+      container.style.left = `${rect.left}px`;
+      container.style.width = `${rect.width}px`;
+      container.style.height = `${rect.height}px`;
+    });
+  };
+  renderSelectionIndicator(element, selectionId, color) {
+    const rect = element.getBoundingClientRect();
+    const container = document.createElement("div");
+    container.className = "builder-selection-container";
+    container.dataset.selectionId = selectionId;
+    container.style.cssText = `
+      position: fixed;
+      top: ${rect.top}px;
+      left: ${rect.left}px;
+      width: ${rect.width}px;
+      height: ${rect.height}px;
+      pointer-events: none;
+      z-index: 9999;
+    `;
+    const border = document.createElement("div");
+    border.className = "builder-selection-border";
+    border.style.cssText = `
+      position: absolute;
+      inset: 0;
+      border: 2px solid ${color};
+      border-radius: 4px;
+      pointer-events: none;
+    `;
+    container.appendChild(border);
+    const badge = document.createElement("div");
+    badge.textContent = selectionId;
+    badge.className = "builder-selection-badge";
+    badge.style.cssText = `
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      background: ${color};
+      color: white;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 9999px;
+      pointer-events: none;
+      font-family: system-ui, -apple-system, sans-serif;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    `;
+    container.appendChild(badge);
+    document.body.appendChild(container);
+    this.selections.set(selectionId, { element, container, badge, border });
+  }
+};
+function initBuilderSelection() {
+  if (typeof window !== "undefined" && window.parent !== window) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => new BuilderSelectionManager());
+    } else {
+      new BuilderSelectionManager();
+    }
+  }
+}
+
+// src/lib/image-cache.ts
+var cache = /* @__PURE__ */ new Map();
+function setCachedImages(images) {
+  cache.clear();
+  const timestamp = Date.now();
+  for (const img of images) {
+    cache.set(img.key, {
+      blobUrl: img.blobUrl,
+      originalUrl: img.originalUrl,
+      timestamp
+    });
+  }
+}
+function getCachedUrl(src) {
+  if (!src) return null;
+  if (src.startsWith("http://") || src.startsWith("https://")) {
+    const exact = cache.get(src);
+    if (exact) return exact.blobUrl;
+    return null;
+  }
+  const direct = cache.get(src);
+  if (direct) return direct.blobUrl;
+  const filename = src.split("/").pop();
+  if (filename) {
+    const byFilename = cache.get(filename);
+    if (byFilename) return byFilename.blobUrl;
+    const withPrefix = cache.get(`assets/${filename}`);
+    if (withPrefix) return withPrefix.blobUrl;
+    for (const [key, entry] of cache) {
+      const keyFilename = key.split("/").pop();
+      if (keyFilename === filename) {
+        return entry.blobUrl;
+      }
+    }
+  }
+  return null;
+}
+function clearImageCache() {
+  cache.clear();
+}
+function getCacheStats() {
+  return {
+    count: cache.size,
+    keys: Array.from(cache.keys())
+  };
+}
+function hasCachedImage(src) {
+  return getCachedUrl(src) !== null;
+}
+
+// src/lib/image-cache-listener.ts
+var isListening = false;
+function handleMessage(event) {
+  const data = event.data;
+  if (data?.type === "YA_IMAGE_CACHE_UPDATE") {
+    console.log("[ImageCache] Received cache update:", data.images.length, "images");
+    setCachedImages(data.images);
+  }
+  if (data?.type === "YA_IMAGE_CACHE_CLEAR") {
+    console.log("[ImageCache] Cache cleared by parent");
+    clearImageCache();
+  }
+}
+function initImageCacheListener() {
+  if (isListening) {
+    window.parent.postMessage({ type: "YA_IMAGE_CACHE_REQUEST" }, "*");
+    return () => {
+    };
+  }
+  window.addEventListener("message", handleMessage);
+  isListening = true;
+  window.parent.postMessage({ type: "YA_IMAGE_CACHE_REQUEST" }, "*");
+  return () => {
+    window.removeEventListener("message", handleMessage);
+    isListening = false;
+    clearImageCache();
+  };
+}
+
+// src/lib/api-client.ts
+function getApiUrl() {
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const apiUrl = runtimeConfig?.apiUrl || import.meta.env.YA_API_URL;
+  if (!apiUrl) {
+    throw new Error("API URL not configured (check YOAMIGO_CONFIG or YA_API_URL)");
+  }
+  return apiUrl;
+}
+function getSiteId() {
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const siteId = runtimeConfig?.siteId || import.meta.env.YA_SITE_ID;
+  if (!siteId) {
+    throw new Error("Site ID not configured (check YOAMIGO_CONFIG or YA_SITE_ID)");
+  }
+  return siteId;
+}
+async function subscribeToNewsletter(email) {
+  const apiUrl = getApiUrl();
+  const siteId = getSiteId();
+  const response = await fetch(`${apiUrl}/api/websites/${siteId}/subscribe`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({
+      email,
+      emailOptIn: true,
+      smsOptIn: false
+    })
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: "Failed to subscribe" }));
+    throw new Error(error.message || "Failed to subscribe");
+  }
+  return response.json();
+}
+async function submitContactForm(data) {
+  const apiUrl = getApiUrl();
+  const siteId = getSiteId();
+  const response = await fetch(`${apiUrl}/api/websites/${siteId}/contact`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(data)
+  });
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: "Failed to submit form" }));
+    throw new Error(error.message || "Failed to submit form");
+  }
+  return response.json();
+}
+async function getSiteMetadata() {
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  return runtimeConfig || null;
+}
+export {
+  clearImageCache,
+  contentRegistry,
+  getAllContent,
+  getCacheStats,
+  getCachedUrl,
+  getContent,
+  getSiteMetadata,
+  hasCachedImage,
+  hasContent,
+  initBuilderSelection,
+  initImageCacheListener,
+  registerContent,
+  resolveAssetUrl,
+  setAssetResolver,
+  setCachedImages,
+  submitContactForm,
+  subscribeToNewsletter
+};