@grainql/analytics-web 2.7.1 → 2.9.0

package/dist/index.global.dev.js

@@ -1,4 +1,4 @@
-/* Grain Analytics Web SDK v2.7.1 | MIT License | Development Build */
+/* Grain Analytics Web SDK v2.9.0 | MIT License | Development Build */
 "use strict";
 var Grain = (() => {
   var __defProp = Object.defineProperty;
@@ -755,19 +755,65 @@ var Grain = (() => {
           this.config = {
             debug: config.debug ?? false,
             enableMutationObserver: config.enableMutationObserver ?? true,
-            mutationDebounceDelay: config.mutationDebounceDelay ?? 500
+            mutationDebounceDelay: config.mutationDebounceDelay ?? 500,
+            tenantId: config.tenantId,
+            apiUrl: config.apiUrl
           };
           if (typeof window !== "undefined" && typeof document !== "undefined") {
-            if (document.readyState === "loading") {
-              document.addEventListener("DOMContentLoaded", () => this.attachAllListeners());
+            if (this.config.tenantId && this.config.apiUrl) {
+              this.fetchAndMergeTrackers().then(() => {
+                this.attachAllListeners();
+              });
             } else {
-              setTimeout(() => this.attachAllListeners(), 0);
+              if (document.readyState === "loading") {
+                document.addEventListener("DOMContentLoaded", () => this.attachAllListeners());
+              } else {
+                setTimeout(() => this.attachAllListeners(), 0);
+              }
             }
             if (this.config.enableMutationObserver) {
               this.setupMutationObserver();
             }
           }
         }
+        /**
+         * Fetch trackers from API and merge with existing interactions
+         */
+        async fetchAndMergeTrackers() {
+          if (!this.config.tenantId || !this.config.apiUrl)
+            return;
+          try {
+            const currentUrl = typeof window !== "undefined" ? window.location.href : "";
+            const url = `${this.config.apiUrl}/v1/client/${encodeURIComponent(this.config.tenantId)}/trackers?url=${encodeURIComponent(currentUrl)}`;
+            this.log("Fetching trackers from:", url);
+            const response = await fetch(url, {
+              method: "GET",
+              headers: {
+                "Content-Type": "application/json"
+              }
+            });
+            if (!response.ok) {
+              this.log("Failed to fetch trackers:", response.status);
+              return;
+            }
+            const result = await response.json();
+            if (result.trackers && Array.isArray(result.trackers)) {
+              this.log("Fetched", result.trackers.length, "trackers");
+              const trackerInteractions = result.trackers.map((tracker) => ({
+                eventName: tracker.eventName,
+                selector: tracker.selector,
+                priority: 5,
+                // High priority for manually created trackers
+                label: tracker.eventName,
+                description: `Tracker: ${tracker.eventName}`
+              }));
+              this.interactions = [...trackerInteractions, ...this.interactions];
+              this.log("Merged trackers, total interactions:", this.interactions.length);
+            }
+          } catch (error) {
+            this.log("Error fetching trackers:", error);
+          }
+        }
         /**
          * Attach listeners to all configured interactions
          */
@@ -1458,6 +1504,1185 @@ var Grain = (() => {
     }
   });
 
+  // src/debug-agent.ts
+  var debug_agent_exports = {};
+  __export(debug_agent_exports, {
+    DebugAgent: () => DebugAgent
+  });
+  var DebugAgent;
+  var init_debug_agent = __esm({
+    "src/debug-agent.ts"() {
+      "use strict";
+      DebugAgent = class {
+        constructor(tracker, sessionId, tenantId, apiUrl, config = {}) {
+          this.isDestroyed = false;
+          // UI state
+          this.isInspectMode = false;
+          this.showTrackers = false;
+          this.selectedElement = null;
+          this.toolbarElement = null;
+          this.panelElement = null;
+          this.highlightElement = null;
+          this.existingTrackers = [];
+          this.trackerHighlights = [];
+          // Dragging state
+          this.isDragging = false;
+          this.dragStartX = 0;
+          this.dragStartY = 0;
+          this.toolbarStartX = 0;
+          this.toolbarStartY = 0;
+          // Event listeners
+          this.mouseMoveListener = null;
+          this.clickListener = null;
+          this.dragMoveListener = null;
+          this.dragEndListener = null;
+          /**
+           * Handle ESC key to exit inspect mode
+           */
+          this.handleEscapeKey = (e) => {
+            if (e.key === "Escape" && this.isInspectMode) {
+              this.disableInspectMode();
+            }
+          };
+          this.tracker = tracker;
+          this.sessionId = sessionId;
+          this.tenantId = tenantId;
+          this.apiUrl = apiUrl;
+          this.config = {
+            debug: config.debug ?? false
+          };
+          if (typeof window !== "undefined" && typeof document !== "undefined") {
+            this.initialize();
+          }
+        }
+        /**
+         * Initialize the debug agent
+         */
+        async initialize() {
+          this.log("Initializing debug agent");
+          await this.loadExistingTrackers();
+          this.showToolbar();
+          this.createHighlightElement();
+          this.showTrackers = true;
+          this.showTrackerHighlights();
+          this.showTrackersList();
+        }
+        /**
+         * Load existing trackers from API
+         */
+        async loadExistingTrackers() {
+          try {
+            const url = `${this.apiUrl}/v1/tenant/${encodeURIComponent(this.tenantId)}/trackers`;
+            const response = await fetch(url);
+            if (response.ok) {
+              this.existingTrackers = await response.json();
+              this.log("Loaded trackers:", this.existingTrackers);
+            }
+          } catch (error) {
+            this.log("Failed to load trackers:", error);
+            this.existingTrackers = [];
+          }
+        }
+        /**
+         * Show the debug toolbar
+         */
+        showToolbar() {
+          if (this.toolbarElement)
+            return;
+          const toolbar = document.createElement("div");
+          toolbar.id = "grain-debug-toolbar";
+          toolbar.innerHTML = `
+      <style>
+        #grain-debug-toolbar {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          background: repeating-linear-gradient(
+            45deg,
+            #fbbf24,
+            #fbbf24 10px,
+            #1e293b 10px,
+            #1e293b 20px
+          );
+          border: 2px solid #1e293b;
+          border-radius: 12px;
+          padding: 6px;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 8px rgba(0, 0, 0, 0.1);
+          z-index: 999999;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+          font-size: 13px;
+        }
+        
+        .grain-toolbar-inner {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          background: white;
+          border-radius: 6px;
+          padding: 8px 12px;
+        }
+        
+        #grain-debug-toolbar.dragging {
+          cursor: move;
+          user-select: none;
+        }
+        
+        .grain-toolbar-header {
+          display: flex;
+          align-items: center;
+          cursor: move;
+          user-select: none;
+          padding: 6px 10px;
+          background: #1e293b;
+          border-radius: 4px;
+          margin-right: 4px;
+        }
+        
+        .grain-toolbar-title {
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 1.2px;
+          text-transform: uppercase;
+          color: #fbbf24;
+        }
+        
+        .grain-toolbar-body {
+          display: flex;
+          align-items: center;
+          gap: 10px;
+          flex: 1;
+        }
+        
+        .grain-toolbar-stats {
+          display: flex;
+          gap: 12px;
+          padding: 6px 10px;
+          background: #f8fafc;
+          border-radius: 4px;
+          margin-right: 4px;
+        }
+        
+        .grain-stat {
+          display: flex;
+          align-items: baseline;
+          gap: 6px;
+        }
+        
+        .grain-stat-value {
+          font-size: 18px;
+          font-weight: 700;
+          color: #1e293b;
+        }
+        
+        .grain-stat-label {
+          font-size: 11px;
+          color: #64748b;
+          font-weight: 500;
+        }
+        
+        .grain-toolbar-actions {
+          display: flex;
+          gap: 8px;
+          align-items: center;
+        }
+        
+        #grain-debug-toolbar button {
+          background: white;
+          border: 1.5px solid #e2e8f0;
+          color: #475569;
+          padding: 8px 14px;
+          border-radius: 8px;
+          cursor: pointer;
+          font-size: 12px;
+          font-weight: 600;
+          transition: all 0.2s;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          white-space: nowrap;
+        }
+        
+        #grain-debug-toolbar button:hover {
+          background: #f8fafc;
+          border-color: #cbd5e1;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+        }
+        
+        #grain-debug-toolbar button.active {
+          background: #fbbf24;
+          color: #1e293b;
+          border-color: #fbbf24;
+          box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
+        }
+        
+        #grain-debug-toolbar button.danger {
+          background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+          border-color: #ef4444;
+          color: white;
+        }
+        
+        #grain-debug-toolbar button.danger:hover {
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
+        }
+        
+        .grain-debug-highlight {
+          position: absolute;
+          pointer-events: none;
+          border: 2px solid #10b981;
+          background: rgba(16, 185, 129, 0.1);
+          z-index: 999998;
+          transition: all 0.1s;
+        }
+        
+        .grain-tracker-highlight {
+          position: absolute;
+          pointer-events: none;
+          border: 2px solid #6366f1;
+          background: rgba(99, 102, 241, 0.08);
+          z-index: 999997;
+          transition: opacity 0.2s;
+        }
+        
+        .grain-tracker-label {
+          position: absolute;
+          top: -28px;
+          left: 0;
+          background: #6366f1;
+          color: white;
+          padding: 4px 10px;
+          border-radius: 6px;
+          font-size: 11px;
+          font-weight: 600;
+          white-space: nowrap;
+          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+          pointer-events: none;
+        }
+        
+        .grain-tracker-label::after {
+          content: '';
+          position: absolute;
+          bottom: -4px;
+          left: 10px;
+          width: 0;
+          height: 0;
+          border-left: 4px solid transparent;
+          border-right: 4px solid transparent;
+          border-top: 4px solid #6366f1;
+        }
+        
+        .grain-trackers-list {
+          position: fixed;
+          bottom: 80px;
+          right: 20px;
+          background: white;
+          border: 1.5px solid #e2e8f0;
+          border-radius: 10px;
+          padding: 12px;
+          max-height: 400px;
+          width: 320px;
+          overflow-y: auto;
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
+          z-index: 999998;
+        }
+        
+        .grain-tracker-item {
+          padding: 10px;
+          background: #f8fafc;
+          border-radius: 8px;
+          margin-bottom: 8px;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        .grain-tracker-item:hover {
+          background: #f1f5f9;
+          transform: translateX(4px);
+        }
+        
+        .grain-tracker-item:last-child {
+          margin-bottom: 0;
+        }
+        
+        .grain-tracker-name {
+          font-weight: 600;
+          color: #1e293b;
+          font-size: 13px;
+          margin-bottom: 4px;
+        }
+        
+        .grain-tracker-details {
+          font-size: 11px;
+          color: #64748b;
+          display: flex;
+          gap: 8px;
+          align-items: center;
+        }
+        
+        .grain-tracker-type {
+          background: #dbeafe;
+          color: #1e40af;
+          padding: 2px 6px;
+          border-radius: 4px;
+          font-weight: 600;
+          text-transform: uppercase;
+          font-size: 9px;
+          letter-spacing: 0.5px;
+        }
+      </style>
+      <div class="grain-toolbar-inner">
+        <div class="grain-toolbar-header" id="grain-toolbar-handle">
+          <div class="grain-toolbar-title">Grain Debug</div>
+        </div>
+        <div class="grain-toolbar-body">
+          <div class="grain-toolbar-stats">
+            <div class="grain-stat">
+              <div class="grain-stat-value">${this.existingTrackers.length}</div>
+              <div class="grain-stat-label">trackers</div>
+            </div>
+            <div class="grain-stat">
+              <div class="grain-stat-value">${this.existingTrackers.filter((t) => t.isEnabled).length}</div>
+              <div class="grain-stat-label">active</div>
+            </div>
+          </div>
+          <div class="grain-toolbar-actions">
+            <button id="grain-debug-inspect" type="button">
+              + New
+            </button>
+            <button id="grain-debug-trackers" class="active" type="button">
+              Hide
+            </button>
+            <button id="grain-debug-end" class="danger" type="button">
+              End Session
+            </button>
+          </div>
+        </div>
+      </div>
+      <div id="grain-trackers-list-container"></div>
+    `;
+          document.body.appendChild(toolbar);
+          this.toolbarElement = toolbar;
+          const handle = toolbar.querySelector("#grain-toolbar-handle");
+          if (handle) {
+            handle.addEventListener("mousedown", (e) => this.startDrag(e));
+          }
+          const inspectBtn = toolbar.querySelector("#grain-debug-inspect");
+          const trackersBtn = toolbar.querySelector("#grain-debug-trackers");
+          const endBtn = toolbar.querySelector("#grain-debug-end");
+          if (inspectBtn) {
+            inspectBtn.addEventListener("click", () => this.toggleInspectMode());
+          }
+          if (trackersBtn) {
+            trackersBtn.addEventListener("click", () => this.toggleTrackerView());
+          }
+          if (endBtn) {
+            endBtn.addEventListener("click", () => this.endDebug());
+          }
+          this.log("Toolbar shown");
+        }
+        /**
+         * Create highlight element for hovering
+         */
+        createHighlightElement() {
+          if (this.highlightElement)
+            return;
+          const highlight = document.createElement("div");
+          highlight.className = "grain-debug-highlight";
+          highlight.style.display = "none";
+          document.body.appendChild(highlight);
+          this.highlightElement = highlight;
+        }
+        /**
+         * Start dragging the toolbar
+         */
+        startDrag(e) {
+          if (!this.toolbarElement)
+            return;
+          this.isDragging = true;
+          this.dragStartX = e.clientX;
+          this.dragStartY = e.clientY;
+          const rect = this.toolbarElement.getBoundingClientRect();
+          this.toolbarStartX = rect.left;
+          this.toolbarStartY = rect.top;
+          this.toolbarElement.classList.add("dragging");
+          this.dragMoveListener = (e2) => this.onDrag(e2);
+          this.dragEndListener = () => this.endDrag();
+          document.addEventListener("mousemove", this.dragMoveListener);
+          document.addEventListener("mouseup", this.dragEndListener);
+        }
+        /**
+         * Handle drag movement
+         */
+        onDrag(e) {
+          if (!this.isDragging || !this.toolbarElement)
+            return;
+          const deltaX = e.clientX - this.dragStartX;
+          const deltaY = e.clientY - this.dragStartY;
+          const newX = this.toolbarStartX + deltaX;
+          const newY = this.toolbarStartY + deltaY;
+          const maxX = window.innerWidth - this.toolbarElement.offsetWidth;
+          const maxY = window.innerHeight - this.toolbarElement.offsetHeight;
+          const clampedX = Math.max(0, Math.min(newX, maxX));
+          const clampedY = Math.max(0, Math.min(newY, maxY));
+          this.toolbarElement.style.left = `${clampedX}px`;
+          this.toolbarElement.style.top = `${clampedY}px`;
+          this.toolbarElement.style.right = "auto";
+          this.toolbarElement.style.bottom = "auto";
+        }
+        /**
+         * End dragging
+         */
+        endDrag() {
+          if (!this.isDragging)
+            return;
+          this.isDragging = false;
+          if (this.toolbarElement) {
+            this.toolbarElement.classList.remove("dragging");
+          }
+          if (this.dragMoveListener) {
+            document.removeEventListener("mousemove", this.dragMoveListener);
+            this.dragMoveListener = null;
+          }
+          if (this.dragEndListener) {
+            document.removeEventListener("mouseup", this.dragEndListener);
+            this.dragEndListener = null;
+          }
+        }
+        /**
+         * Toggle tracker view
+         */
+        toggleTrackerView() {
+          this.showTrackers = !this.showTrackers;
+          const trackersBtn = document.querySelector("#grain-debug-trackers");
+          if (trackersBtn) {
+            trackersBtn.textContent = this.showTrackers ? "Hide" : "View";
+            trackersBtn.classList.toggle("active", this.showTrackers);
+          }
+          if (this.showTrackers) {
+            this.showTrackerHighlights();
+            this.showTrackersList();
+          } else {
+            this.hideTrackerHighlights();
+            this.hideTrackersList();
+          }
+        }
+        /**
+         * Show tracker highlights on page
+         */
+        showTrackerHighlights() {
+          this.hideTrackerHighlights();
+          for (const tracker of this.existingTrackers) {
+            if (!tracker.isEnabled)
+              continue;
+            try {
+              const element = this.findElementBySelector(tracker.selector);
+              if (!element)
+                continue;
+              const rect = element.getBoundingClientRect();
+              const highlight = document.createElement("div");
+              highlight.className = "grain-tracker-highlight";
+              const label = document.createElement("div");
+              label.className = "grain-tracker-label";
+              label.textContent = tracker.name;
+              highlight.style.top = `${rect.top + window.scrollY}px`;
+              highlight.style.left = `${rect.left + window.scrollX}px`;
+              highlight.style.width = `${rect.width}px`;
+              highlight.style.height = `${rect.height}px`;
+              highlight.appendChild(label);
+              document.body.appendChild(highlight);
+              this.trackerHighlights.push(highlight);
+            } catch (error) {
+              this.log("Failed to highlight tracker:", tracker.name, error);
+            }
+          }
+        }
+        /**
+         * Hide tracker highlights
+         */
+        hideTrackerHighlights() {
+          for (const highlight of this.trackerHighlights) {
+            highlight.remove();
+          }
+          this.trackerHighlights = [];
+        }
+        /**
+         * Show trackers list
+         */
+        showTrackersList() {
+          let list = document.querySelector(".grain-trackers-list");
+          if (this.existingTrackers.length === 0) {
+            if (list)
+              list.remove();
+            return;
+          }
+          if (!list) {
+            list = document.createElement("div");
+            list.className = "grain-trackers-list";
+            document.body.appendChild(list);
+          }
+          list.innerHTML = `
+      ${this.existingTrackers.map((tracker) => `
+        <div class="grain-tracker-item" data-tracker-id="${tracker.trackerId}">
+          <div class="grain-tracker-name">${tracker.name}</div>
+          <div class="grain-tracker-details">
+            <span class="grain-tracker-type">${tracker.type}</span>
+            <span>${tracker.urlScope}</span>
+            ${!tracker.isEnabled ? '<span style="color: #ef4444;">\u2022 Disabled</span>' : ""}
+          </div>
+        </div>
+      `).join("")}
+    `;
+          list.querySelectorAll(".grain-tracker-item").forEach((item) => {
+            item.addEventListener("click", () => {
+              const trackerId = item.getAttribute("data-tracker-id");
+              const tracker = this.existingTrackers.find((t) => t.trackerId === trackerId);
+              if (tracker) {
+                this.scrollToTracker(tracker);
+              }
+            });
+          });
+        }
+        /**
+         * Hide trackers list
+         */
+        hideTrackersList() {
+          const list = document.querySelector(".grain-trackers-list");
+          if (list) {
+            list.remove();
+          }
+        }
+        /**
+         * Scroll to and highlight a tracker element
+         */
+        scrollToTracker(tracker) {
+          try {
+            const element = this.findElementBySelector(tracker.selector);
+            if (element) {
+              element.scrollIntoView({ behavior: "smooth", block: "center" });
+              const highlight = this.trackerHighlights.find((h) => {
+                const rect = element.getBoundingClientRect();
+                const hRect = h.getBoundingClientRect();
+                return Math.abs(hRect.top - rect.top) < 5;
+              });
+              if (highlight) {
+                highlight.style.opacity = "0";
+                setTimeout(() => {
+                  highlight.style.opacity = "1";
+                }, 100);
+                setTimeout(() => {
+                  highlight.style.opacity = "0";
+                }, 300);
+                setTimeout(() => {
+                  highlight.style.opacity = "1";
+                }, 500);
+              }
+            }
+          } catch (error) {
+            this.log("Failed to scroll to tracker:", error);
+          }
+        }
+        /**
+         * Find element by XPath selector
+         */
+        findElementBySelector(selector) {
+          try {
+            const result = document.evaluate(
+              selector,
+              document,
+              null,
+              XPathResult.FIRST_ORDERED_NODE_TYPE,
+              null
+            );
+            return result.singleNodeValue;
+          } catch (error) {
+            this.log("Failed to find element:", error);
+            return null;
+          }
+        }
+        /**
+         * Toggle inspect mode
+         */
+        toggleInspectMode() {
+          if (this.isInspectMode) {
+            this.disableInspectMode();
+          } else {
+            this.enableInspectMode();
+          }
+        }
+        /**
+         * Enable element inspection mode
+         */
+        enableInspectMode() {
+          if (this.isInspectMode)
+            return;
+          this.log("Enabling inspect mode");
+          this.isInspectMode = true;
+          const inspectBtn = document.querySelector("#grain-debug-inspect");
+          if (inspectBtn) {
+            inspectBtn.classList.add("active");
+            inspectBtn.textContent = "Click Element";
+          }
+          this.mouseMoveListener = (e) => this.handleMouseMove(e);
+          this.clickListener = (e) => this.handleElementClick(e);
+          document.addEventListener("mousemove", this.mouseMoveListener, true);
+          document.addEventListener("click", this.clickListener, true);
+          document.addEventListener("keydown", this.handleEscapeKey);
+        }
+        /**
+         * Disable element inspection mode
+         */
+        disableInspectMode() {
+          if (!this.isInspectMode)
+            return;
+          this.log("Disabling inspect mode");
+          this.isInspectMode = false;
+          const inspectBtn = document.querySelector("#grain-debug-inspect");
+          if (inspectBtn) {
+            inspectBtn.classList.remove("active");
+            inspectBtn.textContent = "+ New";
+          }
+          if (this.mouseMoveListener) {
+            document.removeEventListener("mousemove", this.mouseMoveListener, true);
+            this.mouseMoveListener = null;
+          }
+          if (this.clickListener) {
+            document.removeEventListener("click", this.clickListener, true);
+            this.clickListener = null;
+          }
+          document.removeEventListener("keydown", this.handleEscapeKey);
+          if (this.highlightElement) {
+            this.highlightElement.style.display = "none";
+          }
+        }
+        /**
+         * Handle mouse move to highlight hovered element
+         */
+        handleMouseMove(e) {
+          if (!this.isInspectMode || !this.highlightElement)
+            return;
+          const target = e.target;
+          if (target.closest("#grain-debug-toolbar") || target.closest("#grain-debug-panel") || target.closest(".grain-trackers-list")) {
+            this.highlightElement.style.display = "none";
+            return;
+          }
+          const element = e.target;
+          const rect = element.getBoundingClientRect();
+          this.highlightElement.style.display = "block";
+          this.highlightElement.style.top = `${rect.top + window.scrollY}px`;
+          this.highlightElement.style.left = `${rect.left + window.scrollX}px`;
+          this.highlightElement.style.width = `${rect.width}px`;
+          this.highlightElement.style.height = `${rect.height}px`;
+        }
+        /**
+         * Handle element click to show creation panel
+         */
+        handleElementClick(e) {
+          if (!this.isInspectMode)
+            return;
+          const target = e.target;
+          if (target.closest("#grain-debug-toolbar") || target.closest(".grain-trackers-list")) {
+            this.disableInspectMode();
+            return;
+          }
+          if (target.closest("#grain-debug-panel")) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+          }
+          e.preventDefault();
+          e.stopPropagation();
+          this.selectedElement = target;
+          this.disableInspectMode();
+          this.showCreationPanel(target);
+        }
+        /**
+         * Show tracker creation panel
+         */
+        showCreationPanel(element) {
+          if (this.panelElement) {
+            this.panelElement.remove();
+          }
+          const panel = document.createElement("div");
+          panel.id = "grain-debug-panel";
+          const tagName = element.tagName.toLowerCase();
+          const elementId = element.id;
+          const elementText = element.textContent?.trim().substring(0, 50) || "";
+          const xpath = this.getXPathForElement(element);
+          panel.innerHTML = `
+      <style>
+        #grain-debug-panel {
+          position: fixed;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          background: repeating-linear-gradient(
+            45deg,
+            #fbbf24,
+            #fbbf24 10px,
+            #1e293b 10px,
+            #1e293b 20px
+          );
+          border: 2px solid #1e293b;
+          border-radius: 16px;
+          padding: 6px;
+          width: 420px;
+          max-width: 90vw;
+          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 8px 24px rgba(0, 0, 0, 0.15);
+          z-index: 1000000;
+          font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        .grain-panel-inner {
+          background: white;
+          border-radius: 10px;
+          overflow: hidden;
+        }
+        
+        .grain-panel-header {
+          background: #1e293b;
+          padding: 14px 18px;
+          color: white;
+        }
+        
+        .grain-panel-header h3 {
+          margin: 0 0 4px 0;
+          font-size: 16px;
+          font-weight: 700;
+          letter-spacing: 0.5px;
+          color: #fbbf24;
+          text-transform: uppercase;
+        }
+        
+        .grain-panel-header p {
+          margin: 0;
+          font-size: 12px;
+          opacity: 0.85;
+          color: white;
+        }
+        
+        .grain-panel-body {
+          padding: 18px;
+        }
+        
+        #grain-debug-panel .element-preview {
+          background: #f8fafc;
+          border: 1.5px solid #e2e8f0;
+          border-radius: 8px;
+          padding: 10px 12px;
+          margin-bottom: 16px;
+          font-size: 11px;
+          color: #475569;
+        }
+        
+        #grain-debug-panel .element-preview div {
+          margin-bottom: 4px;
+        }
+        
+        #grain-debug-panel .element-preview div:last-child {
+          margin-bottom: 0;
+        }
+        
+        #grain-debug-panel .element-preview strong {
+          color: #1e293b;
+          font-weight: 600;
+        }
+        
+        #grain-debug-panel label {
+          display: block;
+          color: #1e293b;
+          font-size: 12px;
+          font-weight: 600;
+          margin-bottom: 6px;
+        }
+        
+        #grain-debug-panel input,
+        #grain-debug-panel select {
+          width: 100%;
+          background: white;
+          border: 1.5px solid #e2e8f0;
+          border-radius: 8px;
+          padding: 9px 12px;
+          color: #1e293b;
+          font-size: 13px;
+          margin-bottom: 14px;
+          box-sizing: border-box;
+          transition: all 0.2s;
+        }
+        
+        #grain-debug-panel input:focus,
+        #grain-debug-panel select:focus {
+          outline: none;
+          border-color: #fbbf24;
+          box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.1);
+        }
+        
+        #grain-debug-panel .button-group {
+          display: flex;
+          gap: 8px;
+          margin-top: 18px;
+        }
+        
+        #grain-debug-panel button {
+          flex: 1;
+          padding: 10px 16px;
+          border: none;
+          border-radius: 8px;
+          font-size: 13px;
+          font-weight: 600;
+          cursor: pointer;
+          transition: all 0.2s;
+        }
+        
+        #grain-debug-panel button.primary {
+          background: #fbbf24;
+          color: #1e293b;
+          box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
+        }
+        
+        #grain-debug-panel button.primary:hover {
+          background: #f59e0b;
+          transform: translateY(-1px);
+          box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4);
+        }
+        
+        #grain-debug-panel button.secondary {
+          background: white;
+          border: 1.5px solid #e2e8f0;
+          color: #475569;
+        }
+        
+        #grain-debug-panel button.secondary:hover {
+          background: #f8fafc;
+          border-color: #cbd5e1;
+        }
+        
+        #grain-debug-panel .url-pattern-input {
+          display: none;
+        }
+        
+        #grain-debug-panel .url-pattern-input.visible {
+          display: block;
+        }
+      </style>
+      <div class="grain-panel-inner">
+        <div class="grain-panel-header">
+          <h3>Create Tracker</h3>
+          <p>Set up automatic tracking for this element</p>
+        </div>
+        <div class="grain-panel-body">
+          <div class="element-preview">
+            <div><strong>Element:</strong> ${tagName}${elementId ? `#${elementId}` : ""}</div>
+            ${elementText ? `<div><strong>Text:</strong> ${elementText}</div>` : ""}
+          </div>
+          <div>
+            <label>Event Name</label>
+            <input type="text" id="grain-event-name" placeholder="e.g., signup_button_click" value="" />
+          </div>
+          <div>
+            <label>Type</label>
+            <select id="grain-event-type">
+              <option value="metric">Metric</option>
+              <option value="conversion">Conversion</option>
+            </select>
+          </div>
+          <div>
+            <label>URL Scope</label>
+            <select id="grain-url-scope">
+              <option value="all">All Pages</option>
+              <option value="contains" selected>This Page</option>
+              <option value="equals">Exact URL</option>
+            </select>
+          </div>
+          <div class="url-pattern-input visible" id="grain-url-pattern-container">
+            <label>URL Pattern</label>
+            <input type="text" id="grain-url-pattern" placeholder="e.g., /pricing" value="${window.location.pathname}" />
+          </div>
+          <div class="button-group">
+            <button type="button" class="secondary" id="grain-cancel">Cancel</button>
+            <button type="button" class="primary" id="grain-create">\u2713 Create</button>
+          </div>
+        </div>
+      </div>
+    `;
+          document.body.appendChild(panel);
+          this.panelElement = panel;
+          const eventNameInput = panel.querySelector("#grain-event-name");
+          if (eventNameInput) {
+            const suggestedName = this.generateEventName(element);
+            eventNameInput.value = suggestedName;
+            eventNameInput.select();
+          }
+          const urlScopeSelect = panel.querySelector("#grain-url-scope");
+          const urlPatternContainer = panel.querySelector("#grain-url-pattern-container");
+          const urlPatternInput = panel.querySelector("#grain-url-pattern");
+          if (urlScopeSelect && urlPatternContainer) {
+            urlScopeSelect.addEventListener("change", () => {
+              if (urlScopeSelect.value === "all") {
+                urlPatternContainer.classList.remove("visible");
+              } else {
+                urlPatternContainer.classList.add("visible");
+                if (urlPatternInput && !urlPatternInput.value) {
+                  urlPatternInput.value = window.location.pathname;
+                }
+              }
+            });
+          }
+          const cancelBtn = panel.querySelector("#grain-cancel");
+          const createBtn = panel.querySelector("#grain-create");
+          if (cancelBtn) {
+            cancelBtn.addEventListener("click", () => this.hideCreationPanel());
+          }
+          if (createBtn) {
+            createBtn.addEventListener("click", () => this.handleCreateTracker(xpath));
+          }
+        }
+        /**
+         * Generate suggested event name from element
+         */
+        generateEventName(element) {
+          const tagName = element.tagName.toLowerCase();
+          const elementId = element.id;
+          const elementText = element.textContent?.trim().toLowerCase().replace(/\s+/g, "_").substring(0, 30) || "";
+          if (elementId) {
+            return `${elementId}_click`;
+          } else if (elementText) {
+            return `${elementText}_click`;
+          } else if (tagName === "button") {
+            return "button_click";
+          } else if (tagName === "a") {
+            return "link_click";
+          } else {
+            return `${tagName}_click`;
+          }
+        }
+        /**
+         * Handle tracker creation
+         */
+        async handleCreateTracker(selector) {
+          if (!this.panelElement)
+            return;
+          const eventNameInput = this.panelElement.querySelector("#grain-event-name");
+          const eventTypeSelect = this.panelElement.querySelector("#grain-event-type");
+          const urlScopeSelect = this.panelElement.querySelector("#grain-url-scope");
+          const urlPatternInput = this.panelElement.querySelector("#grain-url-pattern");
+          if (!eventNameInput || !eventTypeSelect || !urlScopeSelect)
+            return;
+          const eventName = eventNameInput.value.trim();
+          const eventType = eventTypeSelect.value;
+          const urlScope = urlScopeSelect.value;
+          const urlPattern = urlPatternInput?.value.trim() || void 0;
+          if (!eventName) {
+            alert("Please enter an event name");
+            return;
+          }
+          if (!eventName.match(/^[a-zA-Z0-9_-]+$/)) {
+            alert("Event name can only contain letters, numbers, underscores, and hyphens");
+            return;
+          }
+          if ((urlScope === "contains" || urlScope === "equals") && !urlPattern) {
+            alert("Please enter a URL pattern");
+            return;
+          }
+          try {
+            const createBtn = this.panelElement.querySelector("#grain-create");
+            if (createBtn) {
+              createBtn.textContent = "Creating...";
+              createBtn.disabled = true;
+            }
+            await this.createTracker(eventName, eventType, selector, urlScope, urlPattern);
+            this.hideCreationPanel();
+            this.showSuccessMessage(`Tracker "${eventName}" created successfully!`);
+            await this.loadExistingTrackers();
+            this.updateToolbarStats();
+            if (this.showTrackers) {
+              this.showTrackerHighlights();
+              this.showTrackersList();
+            }
+            this.log("Tracker created:", eventName);
+          } catch (error) {
+            alert("Failed to create tracker. Please try again.");
+            this.log("Failed to create tracker:", error);
+            const createBtn = this.panelElement.querySelector("#grain-create");
+            if (createBtn) {
+              createBtn.textContent = "Create Tracker";
+              createBtn.disabled = false;
+            }
+          }
+        }
+        /**
+         * Create tracker via API
+         */
+        async createTracker(name, type, selector, urlScope, urlPattern) {
+          const url = `${this.apiUrl}/v1/tenant/${encodeURIComponent(this.tenantId)}/debug-sessions/${this.sessionId}/trackers`;
+          const response = await fetch(url, {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json"
+            },
+            body: JSON.stringify({
+              name,
+              type,
+              selector,
+              urlScope,
+              urlPattern
+            })
+          });
+          if (!response.ok) {
+            throw new Error(`Failed to create tracker: ${response.status}`);
+          }
+        }
+        /**
+         * Hide creation panel
+         */
+        hideCreationPanel() {
+          if (this.panelElement) {
+            this.panelElement.remove();
+            this.panelElement = null;
+          }
+          this.selectedElement = null;
+        }
+        /**
+         * Show success message
+         */
+        showSuccessMessage(message) {
+          const toast = document.createElement("div");
+          toast.style.cssText = `
+      position: fixed;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%) translateY(-20px);
+      background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+      color: white;
+      padding: 14px 24px;
+      border-radius: 12px;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 600;
+      box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3), 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 1000000;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      animation: slideDown 0.3s ease-out forwards;
+    `;
+          toast.innerHTML = `
+      <style>
+        @keyframes slideDown {
+          to {
+            transform: translateX(-50%) translateY(0);
+          }
+        }
+      </style>
+      <span style="font-size: 18px;">\u2713</span>
+      <span>${message}</span>
+    `;
+          document.body.appendChild(toast);
+          setTimeout(() => {
+            toast.style.animation = "slideDown 0.3s ease-in reverse";
+            setTimeout(() => {
+              toast.remove();
+            }, 300);
+          }, 2700);
+        }
+        /**
+         * End debug session
+         */
+        async endDebug() {
+          try {
+            const url2 = `${this.apiUrl}/v1/tenant/${encodeURIComponent(this.tenantId)}/debug-sessions/${this.sessionId}/end`;
+            await fetch(url2, {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json"
+              }
+            });
+          } catch (error) {
+            this.log("Failed to end debug session:", error);
+          }
+          this.destroy();
+          const url = new URL(window.location.href);
+          url.searchParams.delete("grain_debug");
+          url.searchParams.delete("grain_session");
+          window.location.href = url.toString();
+        }
+        /**
+         * Get XPath for element
+         */
+        getXPathForElement(element) {
+          if (element.id) {
+            return `//*[@id="${element.id}"]`;
+          }
+          const parts = [];
+          let current = element;
+          while (current && current.nodeType === Node.ELEMENT_NODE) {
+            let index = 0;
+            let sibling = current;
+            while (sibling) {
+              if (sibling.nodeType === Node.ELEMENT_NODE && sibling.tagName === current.tagName) {
+                index++;
+              }
+              sibling = sibling.previousElementSibling;
+            }
+            const tagName = current.tagName.toLowerCase();
+            const pathIndex = index > 1 ? `[${index}]` : "";
+            parts.unshift(`${tagName}${pathIndex}`);
+            current = current.parentElement;
+          }
+          return parts.length ? `/${parts.join("/")}` : "";
+        }
+        /**
+         * Log debug messages
+         */
+        log(...args) {
+          if (this.config.debug) {
+            console.log("[DebugAgent]", ...args);
+          }
+        }
+        /**
+         * Update toolbar stats
+         */
+        updateToolbarStats() {
+          if (!this.toolbarElement)
+            return;
+          const totalStat = this.toolbarElement.querySelector(".grain-stat:nth-child(1) .grain-stat-value");
+          const activeStat = this.toolbarElement.querySelector(".grain-stat:nth-child(2) .grain-stat-value");
+          if (totalStat) {
+            totalStat.textContent = String(this.existingTrackers.length);
+          }
+          if (activeStat) {
+            activeStat.textContent = String(this.existingTrackers.filter((t) => t.isEnabled).length);
+          }
+        }
+        /**
+         * Destroy the debug agent
+         */
+        destroy() {
+          if (this.isDestroyed)
+            return;
+          this.log("Destroying debug agent");
+          this.isDestroyed = true;
+          this.disableInspectMode();
+          this.hideTrackerHighlights();
+          this.endDrag();
+          if (this.toolbarElement) {
+            this.toolbarElement.remove();
+            this.toolbarElement = null;
+          }
+          if (this.panelElement) {
+            this.panelElement.remove();
+            this.panelElement = null;
+          }
+          if (this.highlightElement) {
+            this.highlightElement.remove();
+            this.highlightElement = null;
+          }
+        }
+      };
+    }
+  });
+
   // src/index.ts
   var src_exports = {};
   __export(src_exports, {
@@ -1475,7 +2700,7 @@ var Grain = (() => {
   var DEFAULT_CONSENT_CATEGORIES = ["necessary", "analytics", "functional"];
   var CONSENT_VERSION = "1.0.0";
   var ConsentManager = class {
-    constructor(tenantId, consentMode = "opt-out") {
+    constructor(tenantId, consentMode = "cookieless") {
       this.consentState = null;
       this.listeners = [];
       this.consentMode = consentMode;
@@ -1485,9 +2710,8 @@ var Grain = (() => {
     /**
      * Load consent state from localStorage
      * 
-     * GDPR Compliance: In opt-in mode, we can use localStorage for consent preferences
-     * since storing consent choices is a legitimate interest and necessary for compliance.
-     * The consent preference itself is not tracking data.
+     * GDPR Compliance: localStorage only used for storing consent preferences
+     * (not for tracking), which is a legitimate interest for compliance.
      */
     loadConsentState() {
       if (typeof window === "undefined")
@@ -1500,7 +2724,7 @@ var Grain = (() => {
             ...parsed,
             timestamp: new Date(parsed.timestamp)
           };
-        } else if (this.consentMode === "opt-out" || this.consentMode === "disabled") {
+        } else if (this.consentMode === "gdpr-opt-out") {
           this.consentState = {
             granted: true,
             categories: DEFAULT_CONSENT_CATEGORIES,
@@ -1573,28 +2797,67 @@ var Grain = (() => {
       return this.consentState ? { ...this.consentState } : null;
     }
     /**
-     * Check if user has granted consent
+     * Check if user has granted consent for permanent IDs
      */
     hasConsent(category) {
-      if (this.consentMode === "disabled") {
-        return true;
-      }
-      if (this.consentMode === "opt-in" && !this.consentState) {
+      if (this.consentMode === "cookieless") {
         return false;
       }
-      if (!this.consentState?.granted) {
-        return false;
+      if (this.consentMode === "gdpr-strict") {
+        if (!this.consentState?.granted) {
+          return false;
+        }
+      }
+      if (this.consentMode === "gdpr-opt-out") {
+        if (!this.consentState) {
+          return true;
+        }
+        if (!this.consentState.granted) {
+          return false;
+        }
       }
-      if (category) {
+      if (category && this.consentState) {
         return this.consentState.categories.includes(category);
       }
+      return this.consentState?.granted ?? this.consentMode === "gdpr-opt-out";
+    }
+    /**
+     * Check if permanent IDs are allowed
+     */
+    shouldUsePermanentId() {
+      return this.hasConsent();
+    }
+    /**
+     * Check if we should strip query parameters from URLs
+     * Query params stripped unless:
+     * - Mode is gdpr-opt-out, OR
+     * - Mode is gdpr-strict AND consent given
+     */
+    shouldStripQueryParams() {
+      if (this.consentMode === "cookieless") {
+        return true;
+      }
+      if (this.consentMode === "gdpr-strict") {
+        return !this.hasConsent();
+      }
+      if (this.consentMode === "gdpr-opt-out") {
+        return false;
+      }
+      return true;
+    }
+    /**
+     * Check if we can track events (always true in v2.0)
+     * Even cookieless mode allows basic analytics with daily IDs
+     */
+    canTrack() {
       return true;
     }
     /**
      * Check if we should wait for consent before tracking
+     * Only relevant for GDPR Strict mode
      */
     shouldWaitForConsent() {
-      return this.consentMode === "opt-in" && !this.consentState?.granted;
+      return this.consentMode === "gdpr-strict" && !this.consentState?.granted;
     }
     /**
      * Add consent change listener
@@ -1636,6 +2899,19 @@ var Grain = (() => {
       } catch (error) {
       }
     }
+    /**
+     * Get current consent mode
+     */
+    getConsentMode() {
+      return this.consentMode;
+    }
+    /**
+     * Get ID mode based on consent state
+     * Returns 'cookieless' or 'permanent'
+     */
+    getIdMode() {
+      return this.shouldUsePermanentId() ? "permanent" : "cookieless";
+    }
   };
 
   // src/cookies.ts
@@ -1678,36 +2954,6 @@ var Grain = (() => {
     }
     return null;
   }
-  function deleteCookie(name, config) {
-    if (typeof document === "undefined")
-      return;
-    const parts = [
-      `${encodeURIComponent(name)}=`,
-      "max-age=0"
-    ];
-    if (config?.domain) {
-      parts.push(`domain=${config.domain}`);
-    }
-    if (config?.path) {
-      parts.push(`path=${config.path}`);
-    } else {
-      parts.push("path=/");
-    }
-    document.cookie = parts.join("; ");
-  }
-  function areCookiesEnabled() {
-    if (typeof document === "undefined")
-      return false;
-    try {
-      const testCookie = "_grain_cookie_test";
-      setCookie(testCookie, "test", { maxAge: 1 });
-      const result = getCookie(testCookie) === "test";
-      deleteCookie(testCookie);
-      return result;
-    } catch {
-      return false;
-    }
-  }
 
   // src/activity.ts
   var ActivityDetector = class {
@@ -5087,7 +6333,7 @@ var Grain = (() => {
       };
       if (hasConsent) {
         properties.title = document.title || "";
-        properties.full_url = currentUrl;
+        properties.full_url = this.cleanUrl(currentUrl);
         properties.session_id = this.tracker.getSessionId();
         if (referrer) {
           properties.referrer = referrer;
@@ -5192,14 +6438,18 @@ var Grain = (() => {
     }
     /**
      * Extract path from URL, optionally stripping query parameters
+     * Privacy-first: strips query params by default
      */
     extractPath(url) {
       try {
         const urlObj = new URL(url);
-        let path = urlObj.pathname + urlObj.hash;
+        let path = urlObj.pathname;
         if (!this.config.stripQueryParams && urlObj.search) {
           path += urlObj.search;
         }
+        if (!this.config.stripHash && urlObj.hash) {
+          path += urlObj.hash;
+        }
         return path;
       } catch (error) {
         if (this.config.debug) {
@@ -5208,6 +6458,20 @@ var Grain = (() => {
         return url;
       }
     }
+    /**
+     * Clean URL for privacy (strip query params based on config)
+     */
+    cleanUrl(url) {
+      if (!this.config.stripQueryParams) {
+        return url;
+      }
+      try {
+        const urlObj = new URL(url);
+        return `${urlObj.origin}${urlObj.pathname}${this.config.stripHash ? "" : urlObj.hash}`;
+      } catch (error) {
+        return url;
+      }
+    }
     /**
      * Get the current page path
      */
@@ -5276,6 +6540,172 @@ var Grain = (() => {
     }
   };
 
+  // src/id-manager.ts
+  function simpleHash(str) {
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+      const char = str.charCodeAt(i);
+      hash = (hash << 5) - hash + char;
+      hash = hash & hash;
+    }
+    return Math.abs(hash).toString(36);
+  }
+  function generateUUID() {
+    if (typeof crypto !== "undefined" && crypto.randomUUID) {
+      return crypto.randomUUID();
+    }
+    return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+      const r = Math.random() * 16 | 0;
+      const v = c === "x" ? r : r & 3 | 8;
+      return v.toString(16);
+    });
+  }
+  function getBrowserFingerprint() {
+    if (typeof window === "undefined")
+      return "server";
+    const components = [
+      screen.width?.toString() || "",
+      screen.height?.toString() || "",
+      navigator.language || "",
+      Intl.DateTimeFormat().resolvedOptions().timeZone || ""
+    ];
+    return simpleHash(components.join("|"));
+  }
+  function getLocalDateString() {
+    const now = /* @__PURE__ */ new Date();
+    const year = now.getFullYear();
+    const month = String(now.getMonth() + 1).padStart(2, "0");
+    const day = String(now.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  }
+  var IdManager = class {
+    constructor(config) {
+      this.cachedDailyId = null;
+      this.dailyIdDate = null;
+      this.permanentId = null;
+      this.config = config;
+      if (config.mode === "permanent" && config.useLocalStorage) {
+        this.loadPermanentId();
+      }
+    }
+    /**
+     * Generate a daily rotating ID
+     * Rotates at midnight in user's local timezone
+     * Provides same-day continuity without persistent tracking
+     */
+    generateDailyRotatingId() {
+      const currentDate = getLocalDateString();
+      if (this.cachedDailyId && this.dailyIdDate === currentDate) {
+        return this.cachedDailyId;
+      }
+      const fingerprint = getBrowserFingerprint();
+      const seed = `${this.config.tenantId}|${currentDate}|${fingerprint}`;
+      const dailyId = `daily_${simpleHash(seed)}_${simpleHash(Date.now().toString())}`;
+      this.cachedDailyId = dailyId;
+      this.dailyIdDate = currentDate;
+      return dailyId;
+    }
+    /**
+     * Generate or retrieve permanent user ID
+     * Only used when consent is given
+     */
+    generatePermanentId() {
+      if (this.permanentId) {
+        return this.permanentId;
+      }
+      if (this.config.useLocalStorage) {
+        const stored = this.loadPermanentId();
+        if (stored) {
+          return stored;
+        }
+      }
+      const newId = generateUUID();
+      this.permanentId = newId;
+      if (this.config.useLocalStorage) {
+        this.savePermanentId(newId);
+      }
+      return newId;
+    }
+    /**
+     * Get the current user ID based on mode
+     */
+    getCurrentUserId() {
+      if (this.config.mode === "cookieless") {
+        return this.generateDailyRotatingId();
+      } else {
+        return this.generatePermanentId();
+      }
+    }
+    /**
+     * Switch ID mode (e.g., when consent is granted/revoked)
+     */
+    setMode(mode) {
+      this.config.mode = mode;
+      if (mode === "permanent") {
+        this.cachedDailyId = null;
+        this.dailyIdDate = null;
+      }
+      if (mode === "cookieless") {
+        this.permanentId = null;
+        if (this.config.useLocalStorage) {
+          this.clearPermanentId();
+        }
+      }
+    }
+    /**
+     * Load permanent ID from localStorage
+     */
+    loadPermanentId() {
+      if (typeof window === "undefined")
+        return null;
+      try {
+        const storageKey = `grain_anonymous_user_id_${this.config.tenantId}`;
+        const stored = localStorage.getItem(storageKey);
+        if (stored) {
+          this.permanentId = stored;
+          return stored;
+        }
+      } catch (error) {
+      }
+      return null;
+    }
+    /**
+     * Save permanent ID to localStorage
+     */
+    savePermanentId(id) {
+      if (typeof window === "undefined")
+        return;
+      try {
+        const storageKey = `grain_anonymous_user_id_${this.config.tenantId}`;
+        localStorage.setItem(storageKey, id);
+      } catch (error) {
+      }
+    }
+    /**
+     * Clear permanent ID from localStorage
+     */
+    clearPermanentId() {
+      if (typeof window === "undefined")
+        return;
+      try {
+        const storageKey = `grain_anonymous_user_id_${this.config.tenantId}`;
+        localStorage.removeItem(storageKey);
+      } catch (error) {
+      }
+    }
+    /**
+     * Get info about current ID for debugging
+     */
+    getIdInfo() {
+      const id = this.getCurrentUserId();
+      return {
+        mode: this.config.mode,
+        id,
+        isDailyRotating: id.startsWith("daily_")
+      };
+    }
+  };
+
   // src/index.ts
   var GrainAnalytics = class {
     constructor(config) {
@@ -5285,12 +6715,14 @@ var Grain = (() => {
       this.isDestroyed = false;
       this.globalUserId = null;
       this.persistentAnonymousUserId = null;
+      // Deprecated: use idManager instead
       // Remote Config properties
       this.configCache = null;
       this.configRefreshTimer = null;
       this.configChangeListeners = [];
       this.configFetchPromise = null;
       this.cookiesEnabled = false;
+      // Deprecated: cookies no longer used for IDs
       // Automatic Tracking properties
       this.activityDetector = null;
       this.heartbeatManager = null;
@@ -5304,6 +6736,9 @@ var Grain = (() => {
       // Session tracking
       this.sessionStartTime = Date.now();
       this.sessionEventCount = 0;
+      // Debug mode properties
+      this.debugAgent = null;
+      this.isDebugMode = false;
       this.config = {
         apiUrl: "https://api.grainql.com",
         authStrategy: "NONE",
@@ -5322,11 +6757,10 @@ var Grain = (() => {
         configRefreshInterval: 3e5,
         // 5 minutes
         enableConfigCache: true,
-        // Privacy defaults
-        consentMode: "opt-out",
+        // Privacy defaults (v2.0)
+        consentMode: "cookieless",
+        // Default: privacy-first, no permanent tracking
         waitForConsent: false,
-        enableCookies: false,
-        anonymizeIP: false,
         disableAutoProperties: false,
         // Automatic Tracking defaults
         enableHeartbeat: true,
@@ -5336,28 +6770,31 @@ var Grain = (() => {
         // 5 minutes
         enableAutoPageView: true,
         stripQueryParams: true,
+        // Privacy-first: strip by default
+        stripHash: false,
         // Heatmap Tracking defaults
         enableHeatmapTracking: true,
         ...config,
         tenantId: config.tenantId
       };
       this.consentManager = new ConsentManager(this.config.tenantId, this.config.consentMode);
-      if (this.config.enableCookies) {
-        this.cookiesEnabled = areCookiesEnabled();
-        if (!this.cookiesEnabled && this.config.debug) {
-          console.warn("[Grain Analytics] Cookies are not available, falling back to localStorage");
-        }
-      }
+      const idMode = this.consentManager.getIdMode();
+      this.idManager = new IdManager({
+        mode: idMode,
+        tenantId: this.config.tenantId,
+        useLocalStorage: true
+        // For permanent IDs when consented
+      });
       if (config.userId) {
         this.globalUserId = config.userId;
       }
       this.validateConfig();
-      this.initializePersistentAnonymousUserId();
       this.setupBeforeUnload();
       this.startFlushTimer();
       this.initializeConfigCache();
       this.ephemeralSessionId = this.generateUUID();
       if (typeof window !== "undefined") {
+        this.checkAndInitializeDebugMode();
         this.initializeAutomaticTracking();
         this.trackSessionStart();
         if (this.config.enableHeatmapTracking) {
@@ -5365,6 +6802,8 @@ var Grain = (() => {
         }
       }
       this.consentManager.addListener((state) => {
+        const idMode2 = this.consentManager.getIdMode();
+        this.idManager.setMode(idMode2);
         if (state.granted) {
           this.handleConsentGranted();
         }
@@ -5405,10 +6844,12 @@ var Grain = (() => {
      */
     shouldAllowPersistentStorage() {
       const hasConsent = this.consentManager.hasConsent("analytics");
-      const isOptInMode = this.config.consentMode === "opt-in";
+      const isCookieless = this.config.consentMode === "cookieless";
       const userExplicitlyIdentified = !!this.globalUserId;
       const isJWTAuth = this.config.authStrategy === "JWT";
-      return hasConsent || !isOptInMode || userExplicitlyIdentified || isJWTAuth;
+      if (isCookieless)
+        return false;
+      return hasConsent || userExplicitlyIdentified || isJWTAuth;
     }
     /**
      * Generate a proper UUIDv4 identifier for anonymous user ID
@@ -5491,21 +6932,19 @@ var Grain = (() => {
       }
     }
     /**
-     * Get the effective user ID (global userId or persistent anonymous ID)
+     * Get the effective user ID (v2.0)
      * 
-     * GDPR Compliance: In opt-in mode without consent and no explicit user identification,
-     * this should not be called. Use getEphemeralSessionId() instead.
+     * Privacy-first implementation:
+     * - Returns global userId if explicitly set (via identify/login)
+     * - Otherwise uses IdManager to generate:
+     *   - Daily rotating ID (cookieless mode)
+     *   - Permanent ID (with consent)
      */
     getEffectiveUserIdInternal() {
       if (this.globalUserId) {
         return this.globalUserId;
       }
-      if (this.persistentAnonymousUserId) {
-        return this.persistentAnonymousUserId;
-      }
-      this.persistentAnonymousUserId = this.generateAnonymousUserId();
-      this.savePersistentAnonymousUserId(this.persistentAnonymousUserId);
-      return this.persistentAnonymousUserId;
+      return this.idManager.getCurrentUserId();
     }
     log(...args) {
       if (this.config.debug) {
@@ -5843,6 +7282,7 @@ var Grain = (() => {
             this,
             {
               stripQueryParams: this.config.stripQueryParams,
+              stripHash: this.config.stripHash,
               debug: this.config.debug,
               tenantId: this.config.tenantId
             }
@@ -5933,7 +7373,9 @@ var Grain = (() => {
               {
                 debug: this.config.debug,
                 enableMutationObserver: true,
-                mutationDebounceDelay: 500
+                mutationDebounceDelay: 500,
+                tenantId: this.config.tenantId,
+                apiUrl: this.config.apiUrl
               }
             );
             this.log("Interaction tracking initialized");
@@ -6134,11 +7576,12 @@ var Grain = (() => {
       const hasConsent = this.consentManager.hasConsent("analytics");
       const event = {
         eventName,
-        userId: hasConsent ? this.getEffectiveUserId() : this.getEphemeralSessionId(),
+        userId: this.getEffectiveUserId(),
+        // IdManager handles daily vs permanent based on consent
         properties: {
           ...properties,
           _minimal: !hasConsent,
-          // Flag to indicate minimal tracking
+          // Flag to indicate minimal tracking (daily rotating ID)
           _consent_status: hasConsent ? "granted" : "pending"
         }
       };
@@ -6236,10 +7679,13 @@ var Grain = (() => {
           this.log(`Event waiting for consent: ${event.eventName}`, event.properties);
           return;
         }
-        if (!this.consentManager.hasConsent("analytics")) {
-          this.log(`Event blocked by consent: ${event.eventName}`);
-          return;
-        }
+        const hasConsent = this.consentManager.hasConsent("analytics");
+        formattedEvent.properties = {
+          ...formattedEvent.properties,
+          _minimal: !hasConsent,
+          // Flag: true = daily rotating ID, false = permanent ID
+          _consent_status: hasConsent ? "granted" : "pending"
+        };
         this.eventQueue.push(formattedEvent);
         this.eventCountSinceLastHeartbeat++;
         this.sessionEventCount++;
@@ -6859,28 +8305,42 @@ var Grain = (() => {
     }
     // Privacy & Consent Methods
     /**
-     * Grant consent for tracking
+     * Grant consent for tracking (v2.0)
+     * Switches from cookie-less mode to permanent IDs
      * @param categories - Optional array of consent categories (e.g., ['analytics', 'functional'])
      */
     grantConsent(categories) {
       try {
         this.consentManager.grantConsent(categories);
-        this.log("Consent granted", categories);
+        const idMode = this.consentManager.getIdMode();
+        this.idManager.setMode(idMode);
+        this.log("Consent granted, switched to permanent IDs", categories);
+        if (this.waitingForConsentQueue.length > 0) {
+          this.log(`Processing ${this.waitingForConsentQueue.length} queued events`);
+          this.eventQueue.push(...this.waitingForConsentQueue);
+          this.waitingForConsentQueue = [];
+          this.flush();
+        }
       } catch (error) {
         const formattedError = this.formatError(error, "grantConsent");
         this.logError(formattedError);
       }
     }
     /**
-     * Revoke consent for tracking (opt-out)
+     * Revoke consent for tracking (v2.0)
+     * Switches from permanent IDs to cookie-less mode
      * @param categories - Optional array of categories to revoke (if not provided, revokes all)
      */
     revokeConsent(categories) {
       try {
         this.consentManager.revokeConsent(categories);
-        this.log("Consent revoked", categories);
-        this.eventQueue = [];
-        this.waitingForConsentQueue = [];
+        const idMode = this.consentManager.getIdMode();
+        this.idManager.setMode(idMode);
+        this.log("Consent revoked, switched to cookie-less mode", categories);
+        if (!this.consentManager.hasConsent()) {
+          this.eventQueue = [];
+          this.waitingForConsentQueue = [];
+        }
       } catch (error) {
         const formattedError = this.formatError(error, "revokeConsent");
         this.logError(formattedError);
@@ -6911,6 +8371,91 @@ var Grain = (() => {
     offConsentChange(listener) {
       this.consentManager.removeListener(listener);
     }
+    /**
+     * Check for debug mode parameters and initialize debug agent if valid
+     */
+    checkAndInitializeDebugMode() {
+      if (typeof window === "undefined")
+        return;
+      try {
+        const urlParams = new URLSearchParams(window.location.search);
+        const isDebug = urlParams.get("grain_debug") === "1";
+        const sessionId = urlParams.get("grain_session");
+        if (!isDebug || !sessionId) {
+          return;
+        }
+        this.log("Debug mode detected, verifying session:", sessionId);
+        this.verifyDebugSession(sessionId, window.location.hostname).then((valid) => {
+          if (valid) {
+            this.log("Debug session verified, initializing debug agent");
+            this.isDebugMode = true;
+            this.initializeDebugAgent(sessionId);
+          } else {
+            this.log("Debug session verification failed");
+          }
+        }).catch((error) => {
+          this.log("Failed to verify debug session:", error);
+        });
+      } catch (error) {
+        this.log("Error checking debug mode:", error);
+      }
+    }
+    /**
+     * Verify debug session with API
+     */
+    async verifyDebugSession(sessionId, domain) {
+      try {
+        const url = `${this.config.apiUrl}/v1/tenant/${encodeURIComponent(this.config.tenantId)}/debug-sessions/verify`;
+        const response = await fetch(url, {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({
+            sessionId,
+            domain
+          })
+        });
+        if (!response.ok) {
+          return false;
+        }
+        const result = await response.json();
+        return result.valid === true;
+      } catch (error) {
+        this.log("Debug session verification error:", error);
+        return false;
+      }
+    }
+    /**
+     * Initialize debug agent
+     */
+    initializeDebugAgent(sessionId) {
+      if (typeof window === "undefined")
+        return;
+      try {
+        this.log("Loading debug agent module");
+        Promise.resolve().then(() => (init_debug_agent(), debug_agent_exports)).then(({ DebugAgent: DebugAgent2 }) => {
+          try {
+            this.debugAgent = new DebugAgent2(
+              this,
+              sessionId,
+              this.config.tenantId,
+              this.config.apiUrl,
+              {
+                debug: this.config.debug
+              }
+            );
+            this.log("Debug agent initialized");
+          } catch (error) {
+            this.log("Failed to initialize debug agent:", error);
+          }
+        }).catch((error) => {
+          this.log("Failed to load debug agent module:", error);
+        });
+      } catch (error) {
+        this.log("Error initializing debug agent:", error);
+      }
+    }
     /**
      * Destroy the client and clean up resources
      */
@@ -6946,6 +8491,10 @@ var Grain = (() => {
         this.heatmapTrackingManager.destroy();
         this.heatmapTrackingManager = null;
       }
+      if (this.debugAgent) {
+        this.debugAgent.destroy();
+        this.debugAgent = null;
+      }
       if (this.eventQueue.length > 0) {
         const eventsToSend = [...this.eventQueue];
         this.eventQueue = [];