@amplifyup/sdk 0.1.0

package/dist/react.js

@@ -0,0 +1,1966 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+/* @amplifyup/sdk - https://amplifyup.ai */
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/adapters/aws.ts
+var AWSAdapter = class {
+  constructor() {
+    this.initialized = false;
+    this.config = null;
+    this.apiGatewayUrl = "";
+  }
+  async init(config) {
+    if (typeof window === "undefined") {
+      console.warn("AmplifyUp SDK: Window object not available (SSR)");
+      return;
+    }
+    if (this.initialized) {
+      return;
+    }
+    this.config = {
+      trackingId: config.trackingId,
+      debug: config.debug,
+      dev: config.dev
+    };
+    this.apiGatewayUrl = config.apiGatewayUrl || "";
+    if (!this.apiGatewayUrl) {
+      console.warn("AmplifyUp SDK: AWS API Gateway URL not configured. Tracking disabled.");
+      return;
+    }
+    this.initialized = true;
+    if (config.debug) {
+      console.log("AmplifyUp SDK: AWS adapter initialized", {
+        apiGatewayUrl: this.apiGatewayUrl
+      });
+    }
+  }
+  isInitialized() {
+    return this.initialized;
+  }
+  async sendEvent(endpoint, eventData) {
+    if (!this.apiGatewayUrl) {
+      console.warn("AmplifyUp SDK: AWS configuration missing");
+      return;
+    }
+    const url = `${this.apiGatewayUrl}${endpoint}`;
+    try {
+      const response = await fetch(url, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify(eventData)
+      });
+      if (!response.ok) {
+        if (this.config.debug) {
+          console.warn(`AmplifyUp SDK: Event tracking failed: ${response.status} ${response.statusText}`);
+        }
+      } else if (this.config.debug) {
+        const result = await response.json().catch(() => ({}));
+        console.log("AmplifyUp SDK: Event tracked", result);
+      }
+    } catch (error) {
+      if (this.config.debug) {
+        console.error("AmplifyUp SDK: Event tracking error:", error);
+      }
+    }
+  }
+  page(properties) {
+    if (!this.initialized) {
+      return;
+    }
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+        return;
+      }
+      if (window.location.pathname.includes("/api/pages/proxy")) {
+        return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+        return;
+      }
+      if (window.self !== window.top) {
+        return;
+      }
+      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
+        return;
+      }
+    }
+    const eventData = {
+      type: "page",
+      anonymousId: properties.instanceId,
+      userId: properties.userId,
+      properties: {
+        path: properties.path || properties.url,
+        referrer: properties.referrer,
+        ...properties
+      },
+      context: {
+        page: {
+          path: properties.path || properties.url,
+          referrer: properties.referrer
+        }
+      },
+      timestamp: properties.timestamp || (/* @__PURE__ */ new Date()).toISOString()
+    };
+    this.sendEvent("/v1/page", eventData);
+  }
+  track(eventName, properties) {
+    if (!this.initialized) {
+      return;
+    }
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+        return;
+      }
+      if (window.location.pathname.includes("/api/pages/proxy")) {
+        return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+        return;
+      }
+      if (window.self !== window.top) {
+        return;
+      }
+      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
+        return;
+      }
+    }
+    const eventData = {
+      type: "track",
+      event: eventName,
+      anonymousId: properties.instanceId,
+      userId: properties.userId,
+      properties: {
+        ...properties
+      },
+      context: {
+        url: properties.url || (typeof window !== "undefined" ? window.location.href : "")
+      },
+      timestamp: properties.timestamp || (/* @__PURE__ */ new Date()).toISOString()
+    };
+    this.sendEvent("/v1/track", eventData);
+  }
+  identify(userId, traits) {
+    if (!this.initialized) {
+      console.warn("AmplifyUp SDK: Not initialized. Call init() first.");
+      return;
+    }
+    const eventData = {
+      type: "identify",
+      userId,
+      anonymousId: traits.instanceId,
+      traits: {
+        ...traits
+      },
+      timestamp: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    this.sendEvent("/v1/track", eventData);
+  }
+  reset() {
+    if (this.config?.debug) {
+      console.log("AmplifyUp SDK: Reset called (identity cleared)");
+    }
+  }
+};
+
+// src/storage.ts
+var INSTANCE_ID_KEY = "amplifyup_instance_id";
+var USER_ID_KEY = "amplifyup_user_id";
+function getInstanceId() {
+  if (typeof window === "undefined") {
+    return "";
+  }
+  const stored = localStorage.getItem(INSTANCE_ID_KEY);
+  if (stored) {
+    return stored;
+  }
+  const instanceId = `anon_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+  localStorage.setItem(INSTANCE_ID_KEY, instanceId);
+  return instanceId;
+}
+function getUserId() {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return localStorage.getItem(USER_ID_KEY);
+}
+function setUserId(userId) {
+  if (typeof window === "undefined") {
+    return;
+  }
+  localStorage.setItem(USER_ID_KEY, userId);
+}
+function clearIds() {
+  if (typeof window === "undefined") {
+    return;
+  }
+  localStorage.removeItem(INSTANCE_ID_KEY);
+  localStorage.removeItem(USER_ID_KEY);
+}
+
+// src/index.ts
+var PROD_API_URL = "https://api.amplifyup.ai" ;
+var PROD_ORCHESTRATOR_URL = "https://amplifyup.ai" ;
+var AmplifyUpSDK = class {
+  constructor(adapter) {
+    this.config = null;
+    // Internal URLs - set during init, not part of user config
+    this.apiGatewayUrl = "";
+    this.orchestratorUrl = "";
+    this.decisionApiUrl = "";
+    this.initialized = false;
+    this.highlightingEnabled = false;
+    this.componentRegistry = [];
+    this.messageListener = null;
+    this.mutationObserver = null;
+    this.isVisualEditorMode = false;
+    this.eventSelectionMode = false;
+    this.eventSelectionClickHandler = null;
+    this.eventTrackingConfig = [];
+    this.attachedEventListeners = [];
+    this.trackingIntervals = [];
+    this.trackingCleanup = null;
+    this.adapter = adapter || new AWSAdapter();
+    if (typeof window !== "undefined") {
+      this.isVisualEditorMode = this.detectVisualEditorMode();
+      if (this.isVisualEditorMode) {
+        this.setupHighlightingListener();
+        console.log("[AmplifyUp SDK] Visual editor mode detected - message listener enabled");
+      }
+    }
+  }
+  /**
+   * Detect if we're running in visual editor mode
+   * Returns true if:
+   * 1. Preview mode flag is set by proxy
+   * 2. We're in an iframe AND parent is from orchestrator domain
+   * 3. OR visualEditor/preview query parameter is present
+   */
+  detectVisualEditorMode() {
+    if (typeof window === "undefined") return false;
+    if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+      return true;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get("visualEditor") === "true" || urlParams.get("preview") === "true") {
+      return true;
+    }
+    const inIframe = window.self !== window.top;
+    if (!inIframe) return false;
+    try {
+      if (document.referrer) {
+        const referrerUrl = new URL(document.referrer);
+        if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/")) {
+          return true;
+        }
+      }
+    } catch (e) {
+    }
+    return false;
+  }
+  /**
+   * Check if we're in preview/composer mode (should disable tracking)
+   */
+  isPreviewMode() {
+    if (typeof window === "undefined") return false;
+    if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+      return true;
+    }
+    if (window.location.pathname.includes("/api/pages/proxy")) {
+      return true;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+      return true;
+    }
+    const fullUrl = window.location.href;
+    if (fullUrl.includes("preview=true") || fullUrl.includes("visualEditor=true")) {
+      return true;
+    }
+    if (window.self !== window.top) {
+      if (document.referrer) {
+        try {
+          const referrerUrl = new URL(document.referrer);
+          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/")) {
+            return true;
+          }
+        } catch {
+        }
+      }
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Get production URLs
+   * 
+   * URLs are baked in at build time via tsup.config.ts
+   * 
+   * API Gateway endpoints:
+   * - /v1/track - Event tracking (ingestion)
+   * - /v1/page - Page view tracking (ingestion)  
+   * - /v1/personalize - Decision engine (personalization)
+   */
+  getProductionUrls() {
+    return {
+      apiGatewayUrl: PROD_API_URL,
+      orchestratorUrl: PROD_ORCHESTRATOR_URL,
+      decisionApiUrl: `${PROD_API_URL}/v1/personalize`
+    };
+  }
+  /**
+   * Initialize the SDK
+   * Automatically reads env vars and sets up tracking
+   */
+  async init(config) {
+    if (!this.adapter) {
+      this.adapter = new AWSAdapter();
+    }
+    const isLocalhost = typeof window !== "undefined" && (window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1");
+    if (isLocalhost || config.dev === true) {
+      this.apiGatewayUrl = "http://localhost:5001/api";
+      this.orchestratorUrl = "http://localhost:5001";
+      this.decisionApiUrl = "http://localhost:5001/api/v1/personalize";
+    } else {
+      const urls = this.getProductionUrls();
+      this.apiGatewayUrl = urls.apiGatewayUrl;
+      this.orchestratorUrl = urls.orchestratorUrl;
+      this.decisionApiUrl = urls.decisionApiUrl;
+    }
+    this.config = {
+      trackingId: config.trackingId,
+      debug: config.debug ?? true,
+      // Enable debug by default
+      dev: config.dev
+    };
+    try {
+      const adapterConfig = {
+        ...this.config,
+        apiGatewayUrl: this.apiGatewayUrl,
+        orchestratorUrl: this.orchestratorUrl,
+        decisionApiUrl: this.decisionApiUrl
+      };
+      await this.adapter.init(adapterConfig);
+      this.initialized = this.adapter.isInitialized();
+      if (typeof window !== "undefined") {
+        window.AmplifyUp = {
+          getInstanceId: () => this.getInstanceId(),
+          getUserId: () => this.getUserId(),
+          getTrackingId: () => this.getTrackingId(),
+          getDiagnostics: () => this.getDiagnostics(),
+          getStatus: () => {
+            console.log(this.getStatus());
+            return this.getDiagnostics();
+          },
+          testTracking: () => this.testTracking(),
+          verifyAWSConnection: () => {
+            const result = this.verifyAWSConnection();
+            console.log("AWS Connection Verification:", result.message);
+            console.log("Full details:", result);
+            return result;
+          },
+          isInitialized: () => this.isInitialized(),
+          // Re-export main tracking methods for convenience
+          page: (url, properties) => this.page(url, properties),
+          track: (eventName, properties) => this.track(eventName, properties),
+          identify: (userId, traits) => this.identify(userId, traits)
+        };
+        if (this.config?.debug) {
+          console.log("AmplifyUp SDK: Diagnostic methods available on window.AmplifyUp");
+          console.log("Try: AmplifyUp.getStatus() or AmplifyUp.verifyAWSConnection()");
+        }
+      }
+      this.clearTrackingIntervals();
+      if (this.isPreviewMode()) {
+        return;
+      }
+      if (typeof window !== "undefined" && this.initialized) {
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        if (this.isPreviewMode()) {
+          return;
+        }
+        const url = window.location.pathname;
+        this.page(url);
+      }
+      if (this.config?.debug && this.initialized) {
+        console.log("AmplifyUp SDK: Initialized successfully", { trackingId: config.trackingId });
+      }
+    } catch (error) {
+      console.error("AmplifyUp SDK: Initialization failed", error);
+      throw error;
+    }
+  }
+  /**
+   * Check if SDK is initialized
+   */
+  isInitialized() {
+    return this.initialized && this.adapter.isInitialized();
+  }
+  /**
+   * Clear all tracking intervals and event listeners
+   */
+  clearTrackingIntervals() {
+    if (this.trackingCleanup) {
+      this.trackingCleanup();
+      this.trackingCleanup = null;
+    }
+    this.trackingIntervals.forEach((id) => clearInterval(id));
+    this.trackingIntervals = [];
+  }
+  /**
+   * Track a page view
+   */
+  page(url, properties) {
+    if (this.isPreviewMode()) {
+      return;
+    }
+    if (!this.isInitialized()) {
+      return;
+    }
+    const instanceId = getInstanceId();
+    const pageProperties = {
+      name: url,
+      path: url,
+      url: typeof window !== "undefined" ? window.location.href : url,
+      referrer: typeof document !== "undefined" ? document.referrer : void 0,
+      instanceId,
+      trackingId: this.config?.trackingId,
+      // Timestamp is included in event payload
+      ...properties
+    };
+    this.adapter.page(pageProperties);
+  }
+  /**
+   * Track an event
+   */
+  track(eventName, properties) {
+    if (this.isPreviewMode()) {
+      return;
+    }
+    if (!this.isInitialized()) {
+      return;
+    }
+    const instanceId = getInstanceId();
+    const trackProperties = {
+      instanceId,
+      trackingId: this.config?.trackingId,
+      url: typeof window !== "undefined" ? window.location.href : void 0,
+      // Timestamp is included in event payload
+      ...properties
+    };
+    this.adapter.track(eventName, trackProperties);
+  }
+  /**
+   * Track a button click or CTA interaction
+   */
+  trackClick(elementId, elementText, properties) {
+    this.track("Button Click", {
+      elementId,
+      elementText,
+      ...properties
+    });
+  }
+  /**
+   * Track form submission
+   */
+  trackFormSubmit(formId, formData) {
+    this.track("Form Submit", {
+      formId,
+      ...formData
+    });
+  }
+  /**
+   * Track form field interaction
+   */
+  trackFormFieldInteraction(fieldName, fieldValue) {
+    this.track("Form Field Interaction", {
+      fieldName,
+      fieldValue: fieldValue ? fieldValue.substring(0, 100) : void 0
+      // Truncate for privacy
+    });
+  }
+  /**
+   * Track product/content view
+   */
+  trackContentView(contentId, contentType, properties) {
+    this.track("Content View", {
+      contentId,
+      contentType,
+      ...properties
+    });
+  }
+  /**
+   * Identify user (when they sign up or log in)
+   */
+  identify(userId, traits) {
+    if (this.isPreviewMode()) {
+      if (this.config?.debug) {
+        console.log("AmplifyUp SDK: Identify tracking disabled in preview mode", { userId });
+      }
+      return;
+    }
+    if (!this.isInitialized()) {
+      if (this.config?.debug) {
+        console.warn("AmplifyUp SDK: Not initialized. Identify not called.");
+      }
+      return;
+    }
+    const instanceId = getInstanceId();
+    const identifyTraits = {
+      instanceId,
+      trackingId: this.config?.trackingId,
+      ...traits
+    };
+    this.adapter.identify(userId, identifyTraits);
+    setUserId(userId);
+    if (this.config?.debug) {
+      console.log("AmplifyUp SDK: User identified", { userId, instanceId });
+    }
+  }
+  /**
+   * Track content engagement (when user interacts with personalized content)
+   */
+  trackContentEngagement(contentId, engagementType) {
+    this.track("Content Engagement", {
+      contentId,
+      engagementType
+    });
+    if (this.orchestratorUrl) {
+      const instanceId = getInstanceId();
+      fetch(`${this.orchestratorUrl}/api/personalization/feedback`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          instanceId,
+          trackingId: this.config?.trackingId,
+          contentId,
+          engagementType,
+          timestamp: (/* @__PURE__ */ new Date()).toISOString()
+        })
+      }).catch((err) => {
+        if (this.config?.debug) {
+          console.error("AmplifyUp SDK: Failed to send engagement feedback:", err);
+        }
+      });
+    }
+  }
+  /**
+   * Reset user identity (logout)
+   */
+  reset() {
+    this.adapter.reset();
+    clearIds();
+    if (this.config?.debug) {
+      console.log("AmplifyUp SDK: User identity reset");
+    }
+  }
+  /**
+   * Get instance ID (anonymous ID)
+   */
+  getInstanceId() {
+    return getInstanceId();
+  }
+  /**
+   * Get user ID
+   */
+  getUserId() {
+    return getUserId();
+  }
+  /**
+   * Get tracking ID
+   */
+  getTrackingId() {
+    return this.config?.trackingId;
+  }
+  /**
+   * Get diagnostic information
+   * Useful for debugging from browser console
+   */
+  getDiagnostics() {
+    const instanceId = getInstanceId();
+    const userId = getUserId();
+    return {
+      initialized: this.initialized,
+      instanceId,
+      userId,
+      trackingId: this.config?.trackingId,
+      config: {
+        apiGatewayUrl: this.apiGatewayUrl,
+        decisionApiUrl: this.decisionApiUrl,
+        orchestratorUrl: this.orchestratorUrl,
+        debug: this.config?.debug
+      }
+    };
+  }
+  /**
+   * Test tracking by sending a test event
+   */
+  testTracking() {
+    if (!this.initialized) {
+      console.warn("AmplifyUp SDK: Not initialized. Cannot test tracking.");
+      return;
+    }
+    const testEvent = {
+      eventName: "SDK Test Event",
+      timestamp: (/* @__PURE__ */ new Date()).toISOString(),
+      test: true
+    };
+    console.log("AmplifyUp SDK: Sending test event...", testEvent);
+    this.track("SDK Test Event", {
+      ...testEvent,
+      instanceId: getInstanceId(),
+      trackingId: this.config?.trackingId
+    });
+    console.log("AmplifyUp SDK: Test event sent. Check AWS API Gateway to verify it was received.");
+    console.log("AmplifyUp SDK: Check Network tab for requests to:", this.apiGatewayUrl);
+  }
+  /**
+   * Verify AWS API Gateway connectivity
+   * Checks if AWS adapter is initialized and can send events
+   */
+  verifyAWSConnection() {
+    if (!this.apiGatewayUrl) {
+      return {
+        connected: false,
+        message: "AWS API Gateway URL not configured"
+      };
+    }
+    if (!this.initialized) {
+      return {
+        connected: false,
+        message: "SDK not initialized"
+      };
+    }
+    return {
+      connected: true,
+      message: "AWS adapter is connected and ready",
+      details: {
+        apiGatewayUrl: this.apiGatewayUrl,
+        decisionApiUrl: this.decisionApiUrl
+      }
+    };
+  }
+  /**
+   * Get status summary (for console debugging)
+   */
+  getStatus() {
+    const diag = this.getDiagnostics();
+    return `
+AmplifyUp SDK Status:
+\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
+Initialized: ${diag.initialized ? "\u2705 Yes" : "\u274C No"}
+Instance ID: ${diag.instanceId}
+User ID: ${diag.userId || "Not identified"}
+Tracking ID: ${diag.trackingId || "Not set"}
+
+Adapter:
+  Type: AWS (Pure AWS Architecture)
+
+Config:
+  API Gateway: ${this.apiGatewayUrl || "Not set (required)"}
+  Decision API: ${this.decisionApiUrl || "Not set (using Orchestrator fallback)"}
+  Orchestrator: ${this.orchestratorUrl || "Not set"}
+  Debug: ${diag.config.debug ? "Enabled" : "Disabled"}
+
+Available Console Commands:
+  AmplifyUp.getStatus()        - Show this status
+  AmplifyUp.getDiagnostics()   - Get full diagnostic object
+  AmplifyUp.getInstanceId()    - Get instance ID (browser/session ID)
+  AmplifyUp.getUserId()        - Get user ID if identified
+  AmplifyUp.testTracking()     - Send a test event
+  AmplifyUp.verifyAWSConnection() - Verify AWS API Gateway connectivity
+\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501\u2501
+    `.trim();
+  }
+  /**
+   * Get orchestrator URL
+   */
+  getOrchestratorUrl() {
+    return this.orchestratorUrl || void 0;
+  }
+  /**
+   * Get decision API URL
+   */
+  getDecisionApiUrl() {
+    return this.decisionApiUrl || void 0;
+  }
+  /**
+   * Build API URL for fetching page config from the Layout Provider
+   */
+  buildLayoutProviderUrl(route, preview = false) {
+    const orchestratorUrl = this.getOrchestratorUrl();
+    const trackingId = this.getTrackingId();
+    const instanceId = getInstanceId();
+    if (!orchestratorUrl || !trackingId) {
+      throw new Error("SDK not initialized. Call init() first.");
+    }
+    const isOnOrchestratorOrigin = typeof window !== "undefined" && window.location.origin === new URL(orchestratorUrl).origin;
+    const params = new URLSearchParams({
+      route,
+      trackingId,
+      instanceId
+    });
+    if (preview) {
+      params.set("preview", "true");
+    }
+    if (isOnOrchestratorOrigin) {
+      return `/api/layout/provider?${params.toString()}`;
+    }
+    return `${orchestratorUrl}/api/layout/provider?${params.toString()}`;
+  }
+  /**
+   * Fetch page configuration from orchestrator's Layout Provider
+   */
+  async fetchPageConfig(route, preview = false) {
+    const url = this.buildLayoutProviderUrl(route, preview);
+    const response = await fetch(url);
+    if (!response.ok) {
+      if (response.status === 404) {
+        return null;
+      }
+      throw new Error(`Failed to fetch page: ${response.statusText}`);
+    }
+    const data = await response.json();
+    const pageConfig = data.page;
+    if (pageConfig?.eventTracking) {
+      this.setupEventTracking(pageConfig.eventTracking);
+    }
+    return pageConfig;
+  }
+  /**
+   * Set up view-level event tracking based on configuration
+   */
+  setupEventTracking(eventConfig) {
+    if (typeof document === "undefined") return;
+    this.cleanupEventTracking();
+    this.eventTrackingConfig = eventConfig;
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Setting up event tracking:", eventConfig.length, "events");
+    }
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => this.attachEventListeners());
+    } else {
+      setTimeout(() => this.attachEventListeners(), 100);
+    }
+  }
+  /**
+   * Attach event listeners to page elements based on view-level configuration
+   */
+  attachEventListeners() {
+    if (typeof document === "undefined") return;
+    this.eventTrackingConfig.forEach((eventConfig) => {
+      if (eventConfig.enabled === false) return;
+      let targetElements = [];
+      if (eventConfig.selector) {
+        try {
+          targetElements = document.querySelectorAll(eventConfig.selector);
+        } catch (e) {
+          if (this.config?.debug) {
+            console.warn(`[AmplifyUp SDK] Invalid selector: ${eventConfig.selector}`, e);
+          }
+          return;
+        }
+      } else {
+        if (this.config?.debug) {
+          console.warn(`[AmplifyUp SDK] Event ${eventConfig.eventName} has no selector, skipping`);
+        }
+        return;
+      }
+      if (targetElements.length === 0) {
+        if (this.config?.debug) {
+          console.log(`[AmplifyUp SDK] No elements found for selector: ${eventConfig.selector}`);
+        }
+        return;
+      }
+      targetElements.forEach((targetEl) => {
+        const htmlTargetEl = targetEl;
+        const domEventType = this.mapEventType(eventConfig.eventType);
+        const handler = (e) => {
+          this.handleTrackedEvent(e, eventConfig, htmlTargetEl);
+        };
+        if (eventConfig.eventType === "view") {
+          this.setupViewTracking(htmlTargetEl, eventConfig);
+        } else {
+          htmlTargetEl.addEventListener(domEventType, handler);
+          this.attachedEventListeners.push({
+            element: htmlTargetEl,
+            eventType: domEventType,
+            handler
+          });
+        }
+        if (this.config?.debug) {
+          console.log(`[AmplifyUp SDK] Attached ${eventConfig.eventType} listener for ${eventConfig.eventName} on selector: ${eventConfig.selector}`);
+        }
+      });
+    });
+  }
+  /**
+   * Map event type from config to DOM event type
+   */
+  mapEventType(eventType) {
+    const eventMap = {
+      "click": "click",
+      "submit": "submit",
+      "focus": "focus",
+      "blur": "blur",
+      "hover": "mouseenter",
+      "change": "change",
+      "scroll": "scroll",
+      "view": "view",
+      // Handled separately with IntersectionObserver
+      "custom": "custom"
+    };
+    return eventMap[eventType] || eventType;
+  }
+  /**
+   * Handle a tracked event and send to AWS API Gateway
+   */
+  handleTrackedEvent(event, config, element) {
+    const properties = {
+      eventType: config.eventType,
+      selector: config.selector
+    };
+    if (config.properties && config.properties.length > 0) {
+      config.properties.forEach((prop) => {
+        const dataAttrValue = element.getAttribute(`data-${prop}`);
+        if (dataAttrValue) {
+          properties[prop] = dataAttrValue;
+          return;
+        }
+        if (prop in element) {
+          const value = element[prop];
+          if (typeof value === "string" || typeof value === "number" || typeof value === "boolean") {
+            properties[prop] = value;
+          }
+        }
+        switch (prop) {
+          case "buttonText":
+          case "text":
+            properties[prop] = element.textContent?.trim().substring(0, 100);
+            break;
+          case "linkUrl":
+          case "href":
+            properties[prop] = element.getAttribute("href");
+            break;
+          case "formId":
+          case "id":
+            properties[prop] = element.id || element.getAttribute("name");
+            break;
+          case "value":
+            properties[prop] = element.value;
+            break;
+          case "tagName":
+            properties[prop] = element.tagName.toLowerCase();
+            break;
+          case "className":
+            properties[prop] = element.className;
+            break;
+        }
+      });
+    }
+    this.track(config.eventName, properties);
+    if (this.config?.debug) {
+      console.log(`[AmplifyUp SDK] Tracked event: ${config.eventName}`, properties);
+    }
+  }
+  /**
+   * Set up view tracking using IntersectionObserver
+   */
+  setupViewTracking(element, config) {
+    if (typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            this.handleTrackedEvent(
+              new CustomEvent("view"),
+              config,
+              element
+            );
+            observer.unobserve(element);
+          }
+        });
+      },
+      {
+        threshold: 0.5
+        // 50% visible
+      }
+    );
+    observer.observe(element);
+    element._amplifyupViewObserver = observer;
+  }
+  /**
+   * Clean up all attached event listeners
+   */
+  cleanupEventTracking() {
+    this.attachedEventListeners.forEach(({ element, eventType, handler }) => {
+      element.removeEventListener(eventType, handler);
+    });
+    this.attachedEventListeners = [];
+    if (typeof document !== "undefined") {
+      document.querySelectorAll("*").forEach((el) => {
+        const observer = el._amplifyupViewObserver;
+        if (observer) {
+          observer.disconnect();
+          delete el._amplifyupViewObserver;
+        }
+      });
+    }
+    this.eventTrackingConfig = [];
+    if (this.config?.debug) {
+      console.log("[AmplifyUp SDK] Cleaned up event tracking");
+    }
+  }
+  /**
+   * Manually trigger event tracking setup (useful after dynamic content loads)
+   */
+  refreshEventTracking() {
+    if (this.eventTrackingConfig.length > 0) {
+      this.cleanupEventTracking();
+      const config = [...this.eventTrackingConfig];
+      this.eventTrackingConfig = config;
+      this.attachEventListeners();
+    }
+  }
+  /**
+   * Set up postMessage listener for highlighting commands from orchestrator
+   */
+  setupHighlightingListener() {
+    if (this.messageListener) {
+      console.log("[AmplifyUp SDK] Message listener already set up");
+      return;
+    }
+    console.log("[AmplifyUp SDK] Setting up message listener...");
+    this.messageListener = (event) => {
+      console.log("[AmplifyUp SDK] Received message:", {
+        origin: event.origin,
+        currentOrigin: window.location.origin,
+        data: event.data
+      });
+      const allowedOrigins = [
+        "http://localhost:5001",
+        "http://localhost:3001",
+        "https://orchestrator.amplifyup.com"
+      ];
+      const isSameOrigin = event.origin === window.location.origin;
+      const isAllowedOrigin = allowedOrigins.some((origin) => event.origin.startsWith(origin));
+      if (!isSameOrigin && !isAllowedOrigin) {
+        console.warn("[AmplifyUp SDK] Rejected message from unauthorized origin:", {
+          eventOrigin: event.origin,
+          currentOrigin: window.location.origin,
+          allowedOrigins
+        });
+        return;
+      }
+      try {
+        if (event.data?.type === "COMPONENT_DELETABLE_STATUS") {
+          const { componentId, deletable, nodeId } = event.data;
+          const element = document.querySelector(`[data-component-id="${componentId}"]`);
+          if (element) {
+            const deleteButton = element._deleteButton;
+            if (deleteButton) {
+              if (deletable && nodeId) {
+                deleteButton.disabled = false;
+                deleteButton.style.opacity = "1";
+                deleteButton.style.cursor = "pointer";
+                element.setAttribute("data-node-id", nodeId);
+              } else {
+                deleteButton.disabled = true;
+                deleteButton.style.opacity = "0.5";
+                deleteButton.style.cursor = "not-allowed";
+              }
+            }
+          }
+          return;
+        }
+        if (event.data?.type === "DELETE_COMPONENT_REQUEST") {
+          if (window.parent && window.parent !== window) {
+            window.parent.postMessage(event.data, "*");
+          }
+          return;
+        }
+        if (event.data?.type === "GET_ELEMENT_POSITION") {
+          const { componentId, slotName } = event.data;
+          const selector = slotName ? `[data-amplifyup-slot="${slotName}"]` : `[data-amplifyup-component="${componentId}"], [data-component-id="${componentId}"]`;
+          console.log("[AmplifyUp SDK] Finding element position:", { selector, componentId, slotName });
+          const element = document.querySelector(selector);
+          if (element) {
+            const rect = element.getBoundingClientRect();
+            const position = {
+              x: rect.left + rect.width / 2,
+              // Center of element
+              y: rect.top - 50,
+              // Position above element
+              width: rect.width,
+              height: rect.height
+            };
+            console.log("[AmplifyUp SDK] Element position calculated:", { rect, position });
+            if (window.parent && window.parent !== window) {
+              window.parent.postMessage({
+                type: "ELEMENT_POSITION",
+                componentId,
+                slotName,
+                position
+              }, "*");
+              console.log("[AmplifyUp SDK] Sent ELEMENT_POSITION message");
+            }
+          } else {
+            console.warn("[AmplifyUp SDK] Element not found for selector:", selector);
+          }
+          return;
+        }
+        const message = event.data;
+        if (!message || typeof message !== "object" || !message.type) {
+          console.log("[AmplifyUp SDK] Message is not a highlighting message:", message);
+          return;
+        }
+        console.log("[AmplifyUp SDK] Processing highlight message:", message.type);
+        switch (message.type) {
+          case "ENABLE_HIGHLIGHTING":
+          case "UPDATE_HIGHLIGHTING":
+            console.log("[AmplifyUp SDK] Enabling highlighting with registry:", message.componentRegistry?.length || 0, "components");
+            this.enableHighlighting(
+              message.componentRegistry || [],
+              message.highlightComponents ?? true,
+              message.showZones ?? false
+            );
+            break;
+          case "DISABLE_HIGHLIGHTING":
+            console.log("[AmplifyUp SDK] Disabling highlighting");
+            this.disableHighlighting();
+            break;
+          case "SHOW_COMPONENT_TOOLTIP":
+          case "HIDE_ALL_TOOLTIPS":
+            break;
+          case "ENABLE_EVENT_SELECTION":
+            console.log("[AmplifyUp SDK] Enable event selection mode:", message.enabled);
+            this.setEventSelectionMode(message.enabled || false);
+            break;
+        }
+      } catch (error) {
+        console.error("[AmplifyUp SDK] Error handling highlight message:", error);
+      }
+    };
+    window.addEventListener("message", this.messageListener);
+    console.log("[AmplifyUp SDK] Message listener attached to window");
+  }
+  /**
+   * Enable/disable event selection mode
+   * When enabled, clicks on elements send element info to parent for event configuration
+   */
+  setEventSelectionMode(enabled) {
+    if (typeof document === "undefined") return;
+    this.eventSelectionMode = enabled;
+    if (this.eventSelectionClickHandler) {
+      document.removeEventListener("click", this.eventSelectionClickHandler, true);
+      this.eventSelectionClickHandler = null;
+    }
+    if (enabled) {
+      this.eventSelectionClickHandler = (e) => {
+        const target = e.target;
+        if (!target) return;
+        const selector = this.generateSelectorForElement(target);
+        const tagName = target.tagName.toLowerCase();
+        const text = target.textContent?.trim().substring(0, 50) || "";
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({
+            type: "ELEMENT_CLICKED_FOR_EVENT",
+            selector,
+            tagName,
+            text
+          }, "*");
+        }
+        if (tagName === "a") {
+          e.preventDefault();
+        }
+      };
+      document.addEventListener("click", this.eventSelectionClickHandler, true);
+      if (this.config?.debug) {
+        console.log("[AmplifyUp SDK] Event selection mode enabled - clicks will be captured");
+      }
+    } else {
+      if (this.config?.debug) {
+        console.log("[AmplifyUp SDK] Event selection mode disabled");
+      }
+    }
+  }
+  /**
+   * Generate a CSS selector for an element
+   */
+  generateSelectorForElement(el) {
+    if (el.id) {
+      return "#" + el.id;
+    }
+    const dataAttrs = Array.from(el.attributes).filter((a) => a.name.startsWith("data-"));
+    if (dataAttrs.length > 0) {
+      const attr = dataAttrs[0];
+      return "[" + attr.name + '="' + attr.value + '"]';
+    }
+    if (el.className && typeof el.className === "string") {
+      const classes = el.className.split(" ").filter(
+        (c) => c && !c.startsWith("has-") && !c.includes("selectable") && !c.includes("selected")
+      );
+      if (classes.length > 0) {
+        return el.tagName.toLowerCase() + "." + classes[0];
+      }
+    }
+    if (el.type) {
+      return el.tagName.toLowerCase() + '[type="' + el.type + '"]';
+    }
+    if (el.name) {
+      return el.tagName.toLowerCase() + '[name="' + el.name + '"]';
+    }
+    return el.tagName.toLowerCase();
+  }
+  /**
+   * Enable component highlighting
+   */
+  enableHighlighting(componentRegistry, highlightComponents, showZones) {
+    if (typeof document === "undefined") return;
+    this.componentRegistry = componentRegistry;
+    this.highlightingEnabled = true;
+    this.disableHighlighting();
+    if (highlightComponents) {
+      this.applyComponentHighlights();
+      this.setupMutationObserver();
+    }
+  }
+  /**
+   * Set up MutationObserver to watch for new components being added
+   */
+  setupMutationObserver() {
+    if (typeof document === "undefined" || !window.MutationObserver) return;
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    this.mutationObserver = new MutationObserver((mutations) => {
+      let shouldReapply = false;
+      mutations.forEach((mutation) => {
+        mutation.addedNodes.forEach((node) => {
+          if (node.nodeType === Node.ELEMENT_NODE) {
+            const el = node;
+            if (el.hasAttribute("data-amplifyup-component") || el.hasAttribute("data-component-id") || el.hasAttribute("data-amplifyup-slot") || el.querySelector("[data-amplifyup-component], [data-component-id], [data-amplifyup-slot]")) {
+              shouldReapply = true;
+            }
+          }
+        });
+        if (mutation.type === "attributes") {
+          const target = mutation.target;
+          if (target.hasAttribute("data-amplifyup-slot") || target.hasAttribute("data-slot-empty")) {
+            shouldReapply = true;
+          }
+        }
+      });
+      if (shouldReapply && this.highlightingEnabled) {
+        setTimeout(() => {
+          if (this.highlightingEnabled) {
+            this.applyComponentHighlights();
+          }
+        }, 100);
+      }
+    });
+    this.mutationObserver.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributes: true,
+      attributeFilter: ["data-amplifyup-component", "data-component-id", "data-amplifyup-slot", "data-slot-empty"]
+    });
+  }
+  /**
+   * Disable component highlighting
+   */
+  disableHighlighting() {
+    if (typeof document === "undefined") return;
+    this.highlightingEnabled = false;
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+      this.mutationObserver = null;
+    }
+    document.querySelectorAll(".amplifyup-component-highlight").forEach((el) => {
+      const htmlEl = el;
+      const handlers = htmlEl._amplifyupHandlers;
+      if (handlers?.handleClick) {
+        htmlEl.removeEventListener("click", handlers.handleClick);
+      }
+      delete htmlEl._amplifyupHandlers;
+      htmlEl.classList.remove("amplifyup-component-highlight");
+    });
+    document.querySelectorAll(".amplifyup-slot-highlight").forEach((el) => {
+      const htmlEl = el;
+      const handlers = htmlEl._amplifyupSlotHandlers;
+      if (handlers) {
+        if (handlers.handleClick) htmlEl.removeEventListener("click", handlers.handleClick);
+        if (handlers.handleDragOver) htmlEl.removeEventListener("dragover", handlers.handleDragOver);
+        if (handlers.handleDrop) htmlEl.removeEventListener("drop", handlers.handleDrop);
+      }
+      delete htmlEl._amplifyupSlotHandlers;
+      htmlEl.classList.remove("amplifyup-slot-highlight");
+    });
+  }
+  /**
+   * Build component hierarchy for ancestor selection
+   */
+  buildComponentHierarchy(element) {
+    const hierarchy = [];
+    let current = element;
+    while (current) {
+      if (current.hasAttribute("data-amplifyup-component") || current.hasAttribute("data-component-id") || current.hasAttribute("data-amplifyup-slot")) {
+        hierarchy.push(current);
+      }
+      current = current.parentElement;
+    }
+    return hierarchy.reverse();
+  }
+  /**
+   * Send selection message to orchestrator (includes element bounds for overlay positioning).
+   */
+  sendSelectionMessage(element, hierarchy, isEmpty) {
+    if (!this.isVisualEditorMode) return;
+    const componentId = element.getAttribute("data-amplifyup-component") || element.getAttribute("data-component-id");
+    const slotName = element.getAttribute("data-amplifyup-slot");
+    const componentName = element.getAttribute("data-component-name");
+    const hierarchyInfo = hierarchy.map((el, index) => {
+      const elComponentId = el.getAttribute("data-amplifyup-component") || el.getAttribute("data-component-id");
+      const elSlotName = el.getAttribute("data-amplifyup-slot");
+      const elComponentName = el.getAttribute("data-component-name");
+      return {
+        index,
+        componentId: elComponentId,
+        componentName: elComponentName,
+        slotName: elSlotName,
+        isSlot: !!elSlotName
+      };
+    });
+    const rect = element.getBoundingClientRect ? element.getBoundingClientRect() : null;
+    const bounds = rect ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height } : void 0;
+    const message = {
+      type: "COMPONENT_SELECTED",
+      componentId,
+      componentName,
+      slotName,
+      hierarchy: hierarchyInfo,
+      selectedIndex: hierarchy.length - 1,
+      ...bounds && { bounds },
+      ...isEmpty !== void 0 && { isEmpty }
+    };
+    if (window.parent && window.parent !== window) {
+      window.parent.postMessage(message, "*");
+      console.log("[AmplifyUp SDK] Sent selection message:", message);
+    }
+  }
+  /**
+   * Send component tree to orchestrator
+   * Note: Component tree is now sent from AmplifyRenderer based on layoutTree from pageConfig
+   * This method is kept for backwards compatibility but is no longer used
+   */
+  sendComponentTree() {
+    console.log("[AmplifyUp SDK] sendComponentTree called but component tree is now sent from AmplifyRenderer");
+  }
+  /**
+   * Apply component highlights
+   */
+  applyComponentHighlights() {
+    if (typeof document === "undefined") return;
+    if (!this.isVisualEditorMode) {
+      return;
+    }
+    const doc = document;
+    const win = window;
+    const componentElements = doc.querySelectorAll("[data-amplifyup-component], [data-component-id]");
+    console.log("[AmplifyUp SDK] Found", componentElements.length, "components to highlight");
+    this.sendComponentTree();
+    const slotElements = doc.querySelectorAll("[data-amplifyup-slot]");
+    console.log("[AmplifyUp SDK] Found", slotElements.length, "slots to highlight");
+    componentElements.forEach((el) => {
+      const htmlEl = el;
+      const componentId = htmlEl.getAttribute("data-amplifyup-component") || htmlEl.getAttribute("data-component-id");
+      if (!componentId) return;
+      if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
+      const component = this.componentRegistry.find((c) => c.component_id === componentId);
+      htmlEl.classList.add("amplifyup-component-highlight");
+      htmlEl.setAttribute("data-component-id", componentId);
+      htmlEl.setAttribute("data-component-name", component?.component_name || componentId);
+      const hierarchy = this.buildComponentHierarchy(htmlEl);
+      const handleClick = (e) => {
+        e.stopPropagation();
+        this.sendSelectionMessage(htmlEl, hierarchy);
+        if (window.parent && window.parent !== window) {
+          window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId }, "*");
+        }
+      };
+      htmlEl.addEventListener("click", handleClick);
+      htmlEl._amplifyupHandlers = { handleClick };
+    });
+    this.componentRegistry.forEach((component) => {
+      if (!component.data_attribute) return;
+      const elements = doc.querySelectorAll(`[${component.data_attribute}]`);
+      elements.forEach((el) => {
+        const htmlEl = el;
+        if (htmlEl.classList.contains("amplifyup-component-highlight")) return;
+        htmlEl.classList.add("amplifyup-component-highlight");
+        htmlEl.setAttribute("data-component-id", component.component_id);
+        htmlEl.setAttribute("data-component-name", component.component_name);
+        const hierarchy = this.buildComponentHierarchy(htmlEl);
+        const handleClick = (e) => {
+          e.stopPropagation();
+          this.sendSelectionMessage(htmlEl, hierarchy);
+          if (window.parent && window.parent !== window) {
+            window.parent.postMessage({ type: "CHECK_COMPONENT_DELETABLE", componentId: component.component_id }, "*");
+          }
+        };
+        htmlEl.addEventListener("click", handleClick);
+        htmlEl._amplifyupHandlers = { handleClick };
+      });
+    });
+    slotElements.forEach((el) => {
+      const htmlEl = el;
+      const slotName = htmlEl.getAttribute("data-amplifyup-slot");
+      const isEmpty = htmlEl.getAttribute("data-slot-empty") === "true";
+      if (!slotName) return;
+      if (htmlEl.classList.contains("amplifyup-slot-highlight")) return;
+      htmlEl.classList.add("amplifyup-slot-highlight");
+      const hierarchy = this.buildComponentHierarchy(htmlEl);
+      const handleClick = (e) => {
+        e.stopPropagation();
+        this.sendSelectionMessage(htmlEl, hierarchy, isEmpty);
+      };
+      const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        try {
+          const data = JSON.parse(e.dataTransfer.getData("application/json"));
+          if (data.type === "component" && win.parent && win.parent !== win) {
+            win.parent.postMessage({
+              type: "COMPONENT_DROPPED",
+              componentId: data.componentId,
+              componentName: data.componentName,
+              slotName,
+              slotElement: { path: htmlEl.getAttribute("data-slot-path"), isEmpty }
+            }, "*");
+          }
+        } catch (_err) {
+        }
+      };
+      const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        e.dataTransfer.dropEffect = "copy";
+      };
+      htmlEl.addEventListener("click", handleClick);
+      htmlEl.addEventListener("dragover", handleDragOver);
+      htmlEl.addEventListener("drop", handleDrop);
+      htmlEl._amplifyupSlotHandlers = { handleClick, handleDragOver, handleDrop };
+    });
+  }
+  /**
+   * Cleanup: Remove message listener and observers
+   */
+  cleanup() {
+    if (this.messageListener) {
+      window.removeEventListener("message", this.messageListener);
+      this.messageListener = null;
+    }
+    this.disableHighlighting();
+  }
+};
+var sdkInstance = null;
+function getSDK(adapter) {
+  if (!sdkInstance) {
+    sdkInstance = new AmplifyUpSDK(adapter);
+  }
+  return sdkInstance;
+}
+var trackContentView = (contentId, contentType, properties) => getSDK().trackContentView(contentId, contentType, properties);
+getSDK();
+function AmplifyRenderer({
+  renderComponent,
+  pageConfig: serverPageConfig,
+  loadingComponent,
+  errorComponent,
+  emptyComponent
+}) {
+  const clientHook = useAmplifyUp();
+  const pageConfig = serverPageConfig || clientHook.pageConfig || null;
+  const loading = serverPageConfig ? false : clientHook.loading;
+  const error = serverPageConfig ? null : clientHook.error;
+  const [variantCache, setVariantCache] = react.useState({});
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+        return;
+      }
+      if (window.location.pathname.includes("/api/pages/proxy")) {
+        return;
+      }
+      if (window.self !== window.top) {
+        return;
+      }
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("preview") === "true" || urlParams.get("visualEditor") === "true") {
+        return;
+      }
+      if (window.location.href.includes("preview=true") || window.location.href.includes("visualEditor=true")) {
+        return;
+      }
+    }
+    if (pageConfig && pageConfig.id !== "default") {
+      trackContentView(pageConfig.id, "page", {
+        route: pageConfig.route,
+        title: pageConfig.title
+      });
+    }
+  }, [pageConfig]);
+  react.useEffect(() => {
+    const isVisualEditorMode = () => {
+      if (typeof window === "undefined") return false;
+      const urlParams = new URLSearchParams(window.location.search);
+      if (urlParams.get("visualEditor") === "true" || urlParams.get("preview") === "true") {
+        return true;
+      }
+      const inIframe = window.self !== window.top;
+      if (!inIframe) return false;
+      try {
+        if (document.referrer) {
+          const referrerUrl = new URL(document.referrer);
+          if (referrerUrl.hostname === "localhost" && referrerUrl.port === "5001") {
+            return true;
+          }
+        }
+      } catch (e) {
+      }
+      return false;
+    };
+    if (!isVisualEditorMode()) {
+      return;
+    }
+    if (!pageConfig) {
+      return;
+    }
+    if (!pageConfig.layoutTree || Array.isArray(pageConfig.layoutTree) && pageConfig.layoutTree.length === 0) {
+      if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+        window.parent.postMessage({
+          type: "COMPONENT_TREE",
+          tree: []
+        }, "*");
+      }
+      return;
+    }
+    const convertLayoutTreeToComponentTree = (nodes, parentId = null) => {
+      const result = [];
+      nodes.forEach((node) => {
+        const treeNode = {
+          id: node.id,
+          componentId: node.componentId,
+          componentName: node.componentId,
+          // Will be enhanced with actual name if available
+          parentId,
+          children: []
+        };
+        if (node.slots && node.slots.length > 0) {
+          node.slots.forEach((slot) => {
+            if (slot.children && slot.children.length > 0) {
+              const slotChildren = convertLayoutTreeToComponentTree(slot.children, node.id);
+              treeNode.children.push(...slotChildren);
+            }
+          });
+        }
+        result.push(treeNode);
+      });
+      return result;
+    };
+    const layoutTree2 = pageConfig.layoutTree;
+    const componentTree = convertLayoutTreeToComponentTree(layoutTree2);
+    const describeLayoutTree = (nodes, depth = 0) => {
+      if (!nodes?.length) return "";
+      const indent = "  ".repeat(depth);
+      return nodes.map((n) => {
+        const slotsDesc = (n.slots || []).map((s) => {
+          const childCount = Array.isArray(s.children) ? s.children.length : 0;
+          const childrenDesc = childCount > 0 ? describeLayoutTree(s.children || [], depth + 1) : "";
+          return `${indent}  slot "${s.slotId || s.slotName || "?"}" (${childCount} children)${childrenDesc ? "\n" + childrenDesc : ""}`;
+        }).join("\n");
+        return `${indent}- ${n.id} (${n.componentId || "?"})${slotsDesc ? "\n" + slotsDesc : ""}`;
+      }).join("\n");
+    };
+    console.log("[AmplifyRenderer] layoutTree received:\n%s", describeLayoutTree(layoutTree2));
+    if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+      const message = {
+        type: "COMPONENT_TREE",
+        tree: componentTree
+      };
+      window.parent.postMessage(message, "*");
+      console.log("[AmplifyRenderer] Sent component tree from layoutTree:", componentTree.length, "root components");
+    }
+  }, [pageConfig]);
+  react.useEffect(() => {
+    if (!pageConfig?.layoutTree || !pageConfig.layoutId) return;
+    const sdk = getSDK();
+    const instanceId = sdk.getInstanceId();
+    const decisionApiUrl = sdk.getDecisionApiUrl();
+    const orchestratorUrl = sdk.getOrchestratorUrl();
+    if (!decisionApiUrl && !orchestratorUrl || !instanceId) return;
+    const fetchVariants = async () => {
+      const nodes = pageConfig.layoutTree;
+      const newCache = {};
+      const findZonedSlots = (nodeList) => {
+        const results = [];
+        for (const node of nodeList) {
+          if (node.slots) {
+            for (const slot of node.slots) {
+              if (slot.zoneId && slot.variants) {
+                const key = `${node.id}-${slot.slotId}`;
+                results.push({ node, slot, key });
+              }
+            }
+          }
+        }
+        return results;
+      };
+      const zonedSlots = findZonedSlots(nodes);
+      await Promise.all(
+        zonedSlots.map(async ({ node, slot, key }) => {
+          try {
+            let personalizationUrl;
+            if (decisionApiUrl) {
+              const url = new URL(decisionApiUrl);
+              url.searchParams.set("instanceId", instanceId);
+              const zoneId = slot.zoneId;
+              if (zoneId) {
+                url.searchParams.set("zoneId", zoneId);
+              }
+              const campaignId = slot.campaignId;
+              if (campaignId) {
+                url.searchParams.set("campaignId", campaignId);
+              }
+              personalizationUrl = url.toString();
+            } else if (orchestratorUrl) {
+              personalizationUrl = `${orchestratorUrl}/api/personalization/variant?instanceId=${encodeURIComponent(instanceId)}&layoutId=${encodeURIComponent(pageConfig.layoutId)}&slotId=${encodeURIComponent(slot.slotId)}&nodeId=${encodeURIComponent(node.id)}`;
+            } else {
+              return;
+            }
+            const response = await fetch(personalizationUrl);
+            if (response.ok) {
+              const data = await response.json();
+              if (data.variantId && data.componentTree) {
+                newCache[key] = {
+                  variantId: data.variantId,
+                  children: data.componentTree
+                };
+                if (typeof window !== "undefined") {
+                  if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) {
+                    return;
+                  }
+                  if (window.location.pathname.includes("/api/pages/proxy")) {
+                    return;
+                  }
+                  if (window.self !== window.top) {
+                    return;
+                  }
+                }
+                sdk.track("Zone Impression", {
+                  zoneId: slot.zoneId,
+                  variantId: data.variantId,
+                  layoutId: pageConfig.layoutId,
+                  route: pageConfig.route
+                });
+              } else {
+                const defaultVariant = slot.variants?.find((v) => v.isDefault);
+                if (defaultVariant) {
+                  newCache[key] = {
+                    variantId: defaultVariant.variantId,
+                    children: defaultVariant.children
+                  };
+                }
+              }
+            }
+          } catch (err) {
+            console.error(`Error fetching variant for slot ${key}:`, err);
+            const defaultVariant = slot.variants?.find((v) => v.isDefault);
+            if (defaultVariant) {
+              newCache[key] = {
+                variantId: defaultVariant.variantId,
+                children: defaultVariant.children
+              };
+            }
+          }
+        })
+      );
+      setVariantCache(newCache);
+    };
+    fetchVariants();
+  }, [pageConfig?.layoutTree, pageConfig?.layoutId, pageConfig?.route]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: loadingComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "animate-pulse", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 bg-gray-200 rounded w-1/4 mb-4" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 bg-gray-200 rounded w-1/2 mb-8" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-64 bg-gray-200 rounded" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-32 bg-gray-200 rounded" })
+      ] })
+    ] }) }) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: errorComponent ? errorComponent(error) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-h-screen bg-gray-50", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-red-900 mb-2", children: "Error Loading Page" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-red-700", children: error })
+    ] }) }) }) });
+  }
+  if (!pageConfig) {
+    return null;
+  }
+  pageConfig.layout?.header !== false;
+  pageConfig.layout?.footer !== false;
+  const renderNode = (node) => {
+    let slotChildren = {};
+    console.log(`[AmplifyRenderer] Rendering node ${node.id} (${node.componentId})`, {
+      hasSlots: !!(node.slots && node.slots.length > 0),
+      slotCount: node.slots?.length || 0,
+      slots: node.slots?.map((s) => ({ slotId: s.slotId, zoneId: s.zoneId, childrenCount: s.children?.length || 0 }))
+    });
+    if (node.slots && node.slots.length > 0) {
+      for (const slot of node.slots) {
+        const slotKey = `${node.id}-${slot.slotId}`;
+        let childrenToRender = [];
+        console.log(`[AmplifyRenderer] Processing slot ${slot.slotId} for node ${node.id}`, {
+          slotKey,
+          hasZoneId: !!slot.zoneId,
+          hasVariants: !!slot.variants,
+          hasVariantCache: !!variantCache[slotKey],
+          directChildrenCount: slot.children?.length || 0
+        });
+        if (slot.zoneId && slot.variants && variantCache[slotKey]) {
+          childrenToRender = variantCache[slotKey].children;
+          console.log(`[AmplifyRenderer] Using cached variant for slot ${slot.slotId}`, {
+            variantId: variantCache[slotKey].variantId,
+            childrenCount: childrenToRender.length
+          });
+        } else if (slot.zoneId && slot.variants) {
+          const defaultVariant = slot.variants.find((v) => v.isDefault);
+          childrenToRender = defaultVariant?.children || [];
+          console.log(`[AmplifyRenderer] Using default variant for slot ${slot.slotId}`, {
+            childrenCount: childrenToRender.length
+          });
+        } else {
+          childrenToRender = slot.children;
+          console.log(`[AmplifyRenderer] Using direct children for slot ${slot.slotId}`, {
+            childrenCount: childrenToRender.length
+          });
+        }
+        slotChildren[slot.slotId] = /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot-id": slot.slotId, "data-zone-id": slot.zoneId || void 0, children: childrenToRender.map((child) => renderNode(child)) }, slot.slotId);
+        console.log(`[AmplifyRenderer] Created slot content for ${slot.slotId}`, {
+          slotId: slot.slotId,
+          renderedChildrenCount: childrenToRender.length
+        });
+      }
+    }
+    const slotsToPass = Object.keys(slotChildren).length > 0 ? slotChildren : void 0;
+    console.log(`[AmplifyRenderer] Calling renderComponent for ${node.componentId}`, {
+      hasSlots: !!slotsToPass,
+      slotKeys: slotsToPass ? Object.keys(slotsToPass) : []
+    });
+    return renderComponent(
+      node.componentId,
+      node.props || {},
+      slotsToPass
+    );
+  };
+  const layoutTree = pageConfig.layoutTree;
+  if (!layoutTree || layoutTree.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("main", { children: emptyComponent || /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container mx-auto px-4 py-16", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: "No content configured for this page." }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("main", { children: layoutTree.map((node) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderNode(node) }, node.id)) });
+}
+
+// src/server.tsx
+async function fetchPageConfigServer(route, trackingId, preview = false) {
+  const sdk = getSDK();
+  const orchestratorUrl = typeof process !== "undefined" && process.env.NEXT_PUBLIC_ORCHESTRATOR_URL || "http://localhost:5001";
+  const originalConfig = sdk.config;
+  sdk.config = {
+    trackingId,
+    orchestratorUrl
+  };
+  try {
+    const page = await sdk.fetchPageConfig(route, preview);
+    return page;
+  } finally {
+    sdk.config = originalConfig;
+  }
+}
+var ComponentContext = react.createContext(null);
+function ComponentContextProvider({
+  children,
+  slots,
+  props
+}) {
+  console.log("[ComponentContextProvider] Providing context", {
+    hasSlots: !!slots,
+    slotKeys: slots ? Object.keys(slots) : [],
+    slotDetails: slots ? Object.keys(slots).map((key) => ({
+      key,
+      hasContent: !!slots[key],
+      contentType: slots[key] ? typeof slots[key] : "null"
+    })) : [],
+    hasProps: !!props,
+    propKeys: props ? Object.keys(props) : []
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ComponentContext.Provider, { value: { slots, props }, children });
+}
+function Slot({
+  name,
+  className
+}) {
+  const context = react.useContext(ComponentContext);
+  console.log(`[Slot:${name}] Rendering slot`, {
+    hasContext: !!context,
+    availableSlotKeys: context?.slots ? Object.keys(context.slots) : [],
+    slotContent: context?.slots?.[name] ? "EXISTS" : "MISSING",
+    contextSlots: context?.slots
+  });
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] Slot "${name}" used outside ComponentContextProvider`);
+    return null;
+  }
+  const slotContent = context.slots?.[name];
+  const isEmpty = !slotContent;
+  console.log(`[Slot:${name}] Slot state`, {
+    isEmpty,
+    hasSlotContent: !!slotContent,
+    slotContentType: slotContent ? typeof slotContent : "null"
+  });
+  const isEditorMode = typeof window !== "undefined" && // Check for preview mode flag set by proxy
+  (window.__AMPLIFYUP_PREVIEW_MODE__ === true || // Check URL query params
+  new URLSearchParams(window.location.search).get("preview") === "true" || new URLSearchParams(window.location.search).get("visualEditor") === "true" || // Check if in iframe from orchestrator (check referrer hostname/port)
+  window.self !== window.top && document.referrer && (() => {
+    try {
+      const referrerUrl = new URL(document.referrer);
+      return referrerUrl.hostname === "localhost" && referrerUrl.port === "5001" || referrerUrl.pathname.includes("/dashboard/composer") || referrerUrl.pathname.includes("/dashboard/routes/");
+    } catch {
+      return false;
+    }
+  })());
+  console.log(`[Slot:${name}] Editor mode detection`, {
+    isEditorMode,
+    isWindowDefined: typeof window !== "undefined",
+    previewModeFlag: typeof window !== "undefined" ? window.__AMPLIFYUP_PREVIEW_MODE__ : void 0,
+    urlParams: typeof window !== "undefined" ? {
+      preview: new URLSearchParams(window.location.search).get("preview"),
+      visualEditor: new URLSearchParams(window.location.search).get("visualEditor")
+    } : void 0,
+    inIframe: typeof window !== "undefined" ? window.self !== window.top : false,
+    referrer: typeof window !== "undefined" && document.referrer ? document.referrer : void 0
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className,
+      "data-slot-name": name,
+      "data-amplifyup-slot": name,
+      "data-slot-empty": isEmpty ? "true" : void 0,
+      style: {
+        // Only add minimum height when empty (for drop target visibility)
+        minHeight: isEmpty ? "60px" : void 0,
+        // Only add position relative for overlay positioning in editor mode
+        position: isEditorMode ? "relative" : void 0
+      },
+      children: isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: {
+        // Only style the empty state indicator, not the container
+        minHeight: "60px",
+        color: "#9ca3af",
+        fontSize: "14px",
+        pointerEvents: "none"
+      }, children: isEditorMode ? `[Slot: ${name}]` : `Empty slot: ${name}` }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        isEditorMode && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
+          position: "absolute",
+          top: "4px",
+          left: "4px",
+          fontSize: "10px",
+          color: "#9ca3af",
+          pointerEvents: "none",
+          zIndex: 1
+        }, children: [
+          "Slot: ",
+          name
+        ] }),
+        slotContent
+      ] })
+    }
+  );
+}
+function Field({
+  name,
+  fallback,
+  className,
+  render
+}) {
+  const context = react.useContext(ComponentContext);
+  if (!context) {
+    console.warn(`[AmplifyUp SDK] Field "${name}" used outside ComponentContextProvider`);
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback }) : null;
+  }
+  const fieldValue = context.props?.[name];
+  if (fieldValue === void 0 || fieldValue === null) {
+    return fallback ? /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: fallback }) : null;
+  }
+  if (render) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: render(fieldValue) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className, children: String(fieldValue) });
+}
+var usePathname = null;
+if (typeof window !== "undefined") {
+  try {
+    const nextNav = __require("next/navigation");
+    if (nextNav.usePathname) {
+      usePathname = nextNav.usePathname;
+    }
+  } catch {
+  }
+}
+var AmplifyUpContext = react.createContext(null);
+function AmplifyUpProvider({ children, config }) {
+  const [initialized, setInitialized] = react.useState(false);
+  const [pageConfig, setPageConfig] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const getActualRoute = () => {
+    if (typeof window === "undefined") return "";
+    const currentPath = window.location.pathname;
+    const currentSearch = window.location.search;
+    const urlParams = new URLSearchParams(currentSearch);
+    const routeFromQuery = urlParams.get("route");
+    if (routeFromQuery) {
+      return routeFromQuery;
+    }
+    const actualRoute = window.__AMPLIFYUP_ACTUAL_ROUTE__;
+    if (actualRoute && typeof actualRoute === "string" && (currentPath === "/api/pages/proxy" || currentPath.startsWith("/api/pages/proxy"))) {
+      return actualRoute;
+    }
+    return currentPath;
+  };
+  const nextPathname = usePathname ? usePathname() : null;
+  const [pathname, setPathname] = react.useState(() => {
+    if (typeof window !== "undefined") {
+      return getActualRoute();
+    }
+    return "";
+  });
+  react.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const actualRoute = getActualRoute();
+      if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
+        setPathname(actualRoute);
+      } else if (nextPathname) {
+        setPathname(nextPathname);
+      } else {
+        setPathname(actualRoute);
+      }
+      const timeout = setTimeout(() => {
+        if (window.location.pathname === "/api/pages/proxy" || window.location.pathname.startsWith("/api/pages/proxy")) {
+          const newRoute = getActualRoute();
+          setPathname(newRoute);
+        }
+      }, 200);
+      const handleRouteChange = () => {
+        setPathname(getActualRoute());
+      };
+      window.addEventListener("popstate", handleRouteChange);
+      return () => {
+        clearTimeout(timeout);
+        window.removeEventListener("popstate", handleRouteChange);
+      };
+    }
+  }, [nextPathname]);
+  react.useEffect(() => {
+    const sdk = getSDK();
+    sdk.init(config).then(() => {
+      setInitialized(true);
+    }).catch((err) => {
+      console.error("Failed to initialize AmplifyUp SDK:", err);
+      setError("Failed to initialize tracking");
+      setLoading(false);
+    });
+  }, []);
+  react.useEffect(() => {
+    if (!initialized) return;
+    const fetchConfig = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const actualRoute = getActualRoute();
+        if (!actualRoute) {
+          setLoading(false);
+          return;
+        }
+        const sdk = getSDK();
+        const isPreviewContext = (() => {
+          if (typeof window === "undefined") return false;
+          if (window.__AMPLIFYUP_PREVIEW_MODE__ === true) return true;
+          const params = new URLSearchParams(window.location.search);
+          if (params.get("preview") === "true" || params.get("visualEditor") === "true") return true;
+          if (window.self !== window.top) {
+            if (document.referrer) {
+              try {
+                const refUrl = new URL(document.referrer);
+                if (refUrl.hostname === "localhost" && refUrl.port === "5001" || refUrl.pathname.includes("/dashboard/composer") || refUrl.pathname.includes("/dashboard/routes/")) {
+                  return true;
+                }
+              } catch {
+              }
+            }
+          }
+          return false;
+        })();
+        const page = await sdk.fetchPageConfig(actualRoute, isPreviewContext);
+        if (!page) {
+          setPageConfig({
+            id: "default",
+            route: actualRoute,
+            title: "Page Not Configured",
+            description: "This page has not been configured in the orchestrator yet.",
+            layoutTree: []
+          });
+        } else {
+          setPageConfig(page);
+        }
+      } catch (err) {
+        console.error("Error fetching page config:", err);
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchConfig();
+  }, [pathname, initialized]);
+  return /* @__PURE__ */ jsxRuntime.jsx(AmplifyUpContext.Provider, { value: { pageConfig, loading, error }, children });
+}
+function useAmplifyUp() {
+  const context = react.useContext(AmplifyUpContext);
+  if (!context) {
+    throw new Error("useAmplifyUp must be used within AmplifyUpProvider");
+  }
+  return context;
+}
+
+exports.AmplifyRenderer = AmplifyRenderer;
+exports.AmplifyUpProvider = AmplifyUpProvider;
+exports.ComponentContextProvider = ComponentContextProvider;
+exports.Field = Field;
+exports.Slot = Slot;
+exports.fetchPageConfigServer = fetchPageConfigServer;
+exports.useAmplifyUp = useAmplifyUp;
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map