@coherent.js/client 1.1.1 → 2.0.0-rc.0

package/dist/chunk-EAOAAY2X.js

@@ -0,0 +1,1550 @@
+// src/hmr/cleanup-tracker.js
+function mergeSignals(controller, callerSignal) {
+  if (!callerSignal) {
+    return controller.signal;
+  }
+  if (typeof AbortSignal !== "undefined" && typeof AbortSignal.any === "function") {
+    return AbortSignal.any([controller.signal, callerSignal]);
+  }
+  if (callerSignal.aborted) {
+    controller.abort(callerSignal.reason);
+  } else {
+    callerSignal.addEventListener("abort", () => controller.abort(callerSignal.reason), { once: true });
+  }
+  return controller.signal;
+}
+var CleanupTracker = class {
+  constructor() {
+    this.moduleResources = /* @__PURE__ */ new Map();
+  }
+  /**
+   * Create a tracked context for a module
+   *
+   * Returns an object with tracked versions of setTimeout, setInterval,
+   * addEventListener, and fetch that automatically clean up on module disposal.
+   *
+   * @param {string} moduleId - Unique identifier for the module
+   * @returns {Object} Tracked context with setTimeout, setInterval, etc.
+   */
+  createContext(moduleId) {
+    const resources = {
+      timers: /* @__PURE__ */ new Set(),
+      intervals: /* @__PURE__ */ new Set(),
+      listeners: [],
+      abortControllers: /* @__PURE__ */ new Set()
+    };
+    this.moduleResources.set(moduleId, resources);
+    const context = {
+      /**
+       * Tracked setTimeout - auto-removes from tracking on completion
+       * @param {Function} callback - Function to execute
+       * @param {number} delay - Delay in milliseconds
+       * @param {...*} args - Additional arguments to pass to callback
+       * @returns {number} Timer ID
+       */
+      setTimeout: (callback, delay, ...args) => {
+        const id = setTimeout(
+          (...a) => {
+            resources.timers.delete(id);
+            callback(...a);
+          },
+          delay,
+          ...args
+        );
+        resources.timers.add(id);
+        return id;
+      },
+      /**
+       * Tracked setInterval - stores in intervals set until cleared
+       * @param {Function} callback - Function to execute
+       * @param {number} delay - Interval in milliseconds
+       * @param {...*} args - Additional arguments to pass to callback
+       * @returns {number} Interval ID
+       */
+      setInterval: (callback, delay, ...args) => {
+        const id = setInterval(callback, delay, ...args);
+        resources.intervals.add(id);
+        return id;
+      },
+      /**
+       * Clear a tracked timeout
+       * @param {number} id - Timer ID to clear
+       */
+      clearTimeout: (id) => {
+        resources.timers.delete(id);
+        clearTimeout(id);
+      },
+      /**
+       * Clear a tracked interval
+       * @param {number} id - Interval ID to clear
+       */
+      clearInterval: (id) => {
+        resources.intervals.delete(id);
+        clearInterval(id);
+      },
+      /**
+       * Tracked addEventListener - stores listener info for removal on cleanup
+       * @param {EventTarget} target - Element or object to attach listener to
+       * @param {string} event - Event type
+       * @param {Function} handler - Event handler function
+       * @param {Object|boolean} [options] - Listener options
+       */
+      addEventListener: (target, event, handler, options) => {
+        target.addEventListener(event, handler, options);
+        resources.listeners.push({ target, event, handler, options });
+      },
+      /**
+       * Create a tracked AbortController
+       * @returns {AbortController} Tracked AbortController
+       */
+      createAbortController: () => {
+        const controller = new AbortController();
+        resources.abortControllers.add(controller);
+        return controller;
+      },
+      /**
+       * Tracked fetch - creates AbortController automatically, cleans up on completion
+       * @param {string|URL} url - URL to fetch
+       * @param {Object} [options] - Fetch options
+       * @returns {Promise<Response>} Fetch promise
+       */
+      fetch: (url, options = {}) => {
+        const controller = new AbortController();
+        resources.abortControllers.add(controller);
+        const signal = mergeSignals(controller, options.signal);
+        return fetch(url, { ...options, signal }).finally(() => {
+          resources.abortControllers.delete(controller);
+        });
+      }
+    };
+    return context;
+  }
+  /**
+   * Cleanup all resources for a module
+   *
+   * Called during HMR module disposal. Clears all timers, intervals,
+   * removes all event listeners, and aborts all pending fetch requests.
+   *
+   * @param {string} moduleId - Module identifier to clean up
+   */
+  cleanup(moduleId) {
+    const resources = this.moduleResources.get(moduleId);
+    if (!resources) return;
+    for (const id of resources.timers) {
+      clearTimeout(id);
+    }
+    resources.timers.clear();
+    for (const id of resources.intervals) {
+      clearInterval(id);
+    }
+    resources.intervals.clear();
+    for (const { target, event, handler, options } of resources.listeners) {
+      try {
+        target.removeEventListener(event, handler, options);
+      } catch {
+      }
+    }
+    resources.listeners.length = 0;
+    for (const controller of resources.abortControllers) {
+      try {
+        controller.abort();
+      } catch {
+      }
+    }
+    resources.abortControllers.clear();
+    this.moduleResources.delete(moduleId);
+  }
+  /**
+   * Check for potential resource leaks (for development mode)
+   *
+   * Logs warnings if resources weren't cleaned up before module disposal.
+   * Call this before cleanup() to detect potential leaks.
+   *
+   * @param {string} moduleId - Module identifier to check
+   */
+  checkForLeaks(moduleId) {
+    const resources = this.moduleResources.get(moduleId);
+    if (!resources) return;
+    const warnings = [];
+    if (resources.timers.size > 0) {
+      warnings.push(`${resources.timers.size} timer(s) not cleaned up`);
+    }
+    if (resources.intervals.size > 0) {
+      warnings.push(`${resources.intervals.size} interval(s) not cleaned up`);
+    }
+    if (resources.listeners.length > 0) {
+      warnings.push(`${resources.listeners.length} listener(s) not cleaned up`);
+    }
+    if (resources.abortControllers.size > 0) {
+      warnings.push(
+        `${resources.abortControllers.size} pending fetch(es) not aborted`
+      );
+    }
+    if (warnings.length > 0) {
+      console.warn(`[HMR] Potential leak in module ${moduleId}: ${warnings.join(", ")}`);
+    }
+  }
+  /**
+   * Check if a module has tracked resources
+   * @param {string} moduleId - Module identifier
+   * @returns {boolean} True if module has resources
+   */
+  hasResources(moduleId) {
+    return this.moduleResources.has(moduleId);
+  }
+  /**
+   * Get resource counts for a module (for testing/debugging)
+   * @param {string} moduleId - Module identifier
+   * @returns {Object|null} Resource counts or null if module not tracked
+   */
+  getResourceCounts(moduleId) {
+    const resources = this.moduleResources.get(moduleId);
+    if (!resources) return null;
+    return {
+      timers: resources.timers.size,
+      intervals: resources.intervals.size,
+      listeners: resources.listeners.length,
+      abortControllers: resources.abortControllers.size
+    };
+  }
+};
+var cleanupTracker = new CleanupTracker();
+
+// src/hmr/state-capturer.js
+var StateCapturer = class {
+  constructor() {
+    this.capturedInputs = /* @__PURE__ */ new Map();
+    this.scrollPositions = /* @__PURE__ */ new Map();
+    this.layoutSnapshot = null;
+  }
+  /**
+   * Generate a stable key for an input element
+   *
+   * Uses multiple factors to identify inputs across HMR updates:
+   * 1. ID (most stable)
+   * 2. Name + type (+ value for radios and checkboxes)
+   * 3. Form context
+   * 4. DOM path (fallback)
+   *
+   * @param {HTMLInputElement|HTMLTextAreaElement|HTMLSelectElement} input - Input element
+   * @returns {string} Stable key for the input
+   */
+  getInputKey(input) {
+    const parts = [];
+    if (input.id) {
+      parts.push(`#${input.id}`);
+      return parts.join(":");
+    }
+    if (input.name) {
+      parts.push(`[name="${input.name}"]`);
+    }
+    if (input.type) {
+      parts.push(`[type="${input.type}"]`);
+    }
+    if (input.name && (input.type === "radio" || input.type === "checkbox")) {
+      parts.push(`[value="${input.value}"]`);
+    }
+    if (input.form?.id) {
+      parts.push(`form#${input.form.id}`);
+    }
+    if (parts.length === 0) {
+      parts.push(this.getElementPath(input));
+    }
+    return parts.join(":");
+  }
+  /**
+   * Build a CSS-like path for an element
+   *
+   * @param {HTMLElement} element - Element to build path for
+   * @returns {string} CSS-like path (e.g., "form > div:nth-of-type(2) > input")
+   */
+  getElementPath(element) {
+    const path = [];
+    let current = element;
+    while (current && current !== document.body && path.length < 10) {
+      let selector = current.tagName.toLowerCase();
+      if (current.className && typeof current.className === "string") {
+        const classes = current.className.trim().split(/\s+/).slice(0, 2);
+        if (classes.length > 0 && classes[0]) {
+          selector += `.${classes.join(".")}`;
+        }
+      }
+      if (current.parentElement) {
+        const siblings = current.parentElement.querySelectorAll(
+          `:scope > ${current.tagName.toLowerCase()}`
+        );
+        if (siblings.length > 1) {
+          const index = Array.from(siblings).indexOf(current);
+          selector += `:nth-of-type(${index + 1})`;
+        }
+      }
+      path.unshift(selector);
+      current = current.parentElement;
+    }
+    return path.join(" > ");
+  }
+  /**
+   * Capture all form input states
+   *
+   * Iterates through all input, textarea, and select elements,
+   * capturing their values, selection state, and checked state.
+   *
+   * @returns {Map<string, Object>} Map of input keys to their captured state
+   */
+  captureFormState() {
+    this.capturedInputs.clear();
+    const inputs = document.querySelectorAll("input, textarea, select");
+    for (const input of inputs) {
+      const key = this.getInputKey(input);
+      const state = {
+        value: input.value,
+        type: input.type || input.tagName.toLowerCase()
+      };
+      if (typeof input.selectionStart === "number" && (input.type === "text" || input.type === "search" || input.type === "url" || input.type === "tel" || input.type === "password" || input.tagName.toLowerCase() === "textarea")) {
+        state.selectionStart = input.selectionStart;
+        state.selectionEnd = input.selectionEnd;
+      }
+      if (input.type === "checkbox" || input.type === "radio") {
+        state.checked = input.checked;
+      }
+      this.capturedInputs.set(key, state);
+    }
+    return this.capturedInputs;
+  }
+  /**
+   * Restore form input states after HMR update
+   *
+   * Finds inputs by their captured keys and restores their values,
+   * only if the input type matches (to avoid corrupting data).
+   */
+  restoreFormState() {
+    for (const [key, state] of this.capturedInputs) {
+      const inputs = this.findInputsByKey(key);
+      for (const input of inputs) {
+        const currentType = input.type || input.tagName.toLowerCase();
+        if (currentType !== state.type) {
+          continue;
+        }
+        if (state.checked !== void 0) {
+          input.checked = state.checked;
+          continue;
+        }
+        input.value = state.value;
+        if (state.selectionStart !== void 0 && document.activeElement !== input) {
+          try {
+            input.setSelectionRange(state.selectionStart, state.selectionEnd);
+          } catch {
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Find inputs matching a captured key
+   *
+   * @param {string} key - Captured input key
+   * @returns {HTMLElement[]} Array of matching input elements
+   */
+  findInputsByKey(key) {
+    if (key.startsWith("#")) {
+      const id = key.slice(1);
+      const el = document.getElementById(id);
+      return el ? [el] : [];
+    }
+    const nameMatch = key.match(/\[name="([^"]+)"\]/);
+    if (nameMatch) {
+      const name = nameMatch[1];
+      const typeMatch = key.match(/\[type="([^"]+)"\]/);
+      const type = typeMatch ? typeMatch[1] : null;
+      let selector = `[name="${name}"]`;
+      if (type) {
+        selector += `[type="${type}"]`;
+      }
+      const inputs = Array.from(document.querySelectorAll(selector));
+      const valueMatch = key.match(/\[value="([^"]*)"\]/);
+      return valueMatch ? inputs.filter((input) => input.value === valueMatch[1]) : inputs;
+    }
+    try {
+      const el = document.querySelector(key);
+      return el ? [el] : [];
+    } catch {
+      return [];
+    }
+  }
+  /**
+   * Capture scroll positions for window and scrollable containers
+   *
+   * Captures scroll positions for:
+   * - Window (scrollX/scrollY)
+   * - Elements with [data-coherent-scroll-preserve] attribute
+   * - Elements with overflow that have actual scrolling
+   */
+  captureScrollPositions() {
+    this.scrollPositions.clear();
+    this.scrollPositions.set("window", {
+      top: window.scrollY,
+      left: window.scrollX
+    });
+    const markedScrollables = document.querySelectorAll(
+      "[data-coherent-scroll-preserve]"
+    );
+    for (const el of markedScrollables) {
+      const key = this.getScrollableKey(el);
+      this.scrollPositions.set(key, {
+        top: el.scrollTop,
+        left: el.scrollLeft
+      });
+    }
+    const overflowElements = document.querySelectorAll(
+      '[style*="overflow"], [class]'
+    );
+    for (const el of overflowElements) {
+      const style = window.getComputedStyle(el);
+      const hasOverflow = style.overflow === "auto" || style.overflow === "scroll" || style.overflowY === "auto" || style.overflowY === "scroll" || style.overflowX === "auto" || style.overflowX === "scroll";
+      if (hasOverflow && (el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)) {
+        const key = this.getScrollableKey(el);
+        if (!this.scrollPositions.has(key)) {
+          this.scrollPositions.set(key, {
+            top: el.scrollTop,
+            left: el.scrollLeft
+          });
+        }
+      }
+    }
+    return this.scrollPositions;
+  }
+  /**
+   * Generate a stable key for a scrollable element
+   *
+   * @param {HTMLElement} el - Scrollable element
+   * @returns {string} Key for the element
+   */
+  getScrollableKey(el) {
+    if (el.id) {
+      return `#${el.id}`;
+    }
+    const component = el.getAttribute("data-coherent-component");
+    if (component) {
+      return `[data-coherent-component="${component}"]`;
+    }
+    return this.getElementPath(el);
+  }
+  /**
+   * Capture layout snapshot for change detection
+   *
+   * Captures body dimensions and positions of anchor elements
+   * (elements with data-coherent-component attribute).
+   */
+  captureLayout() {
+    this.layoutSnapshot = {
+      bodyHeight: document.body.scrollHeight,
+      bodyWidth: document.body.scrollWidth,
+      anchors: /* @__PURE__ */ new Map()
+    };
+    const components = document.querySelectorAll("[data-coherent-component]");
+    for (const el of components) {
+      const rect = el.getBoundingClientRect();
+      const key = this.getScrollableKey(el);
+      this.layoutSnapshot.anchors.set(key, {
+        top: rect.top,
+        left: rect.left,
+        width: rect.width,
+        height: rect.height
+      });
+    }
+  }
+  /**
+   * Check if layout changed significantly (>50px shift)
+   *
+   * Returns true if:
+   * - Body dimensions changed by more than 50px
+   * - Any anchor element position shifted by more than 50px
+   *
+   * @returns {boolean} True if layout changed significantly
+   */
+  layoutChangedSignificantly() {
+    if (!this.layoutSnapshot) {
+      return false;
+    }
+    const THRESHOLD = 50;
+    const heightDiff = Math.abs(
+      document.body.scrollHeight - this.layoutSnapshot.bodyHeight
+    );
+    const widthDiff = Math.abs(
+      document.body.scrollWidth - this.layoutSnapshot.bodyWidth
+    );
+    if (heightDiff > THRESHOLD || widthDiff > THRESHOLD) {
+      return true;
+    }
+    for (const [key, oldRect] of this.layoutSnapshot.anchors) {
+      const el = this.findElementByKey(key);
+      if (!el) {
+        continue;
+      }
+      const newRect = el.getBoundingClientRect();
+      const topDiff = Math.abs(newRect.top - oldRect.top);
+      const leftDiff = Math.abs(newRect.left - oldRect.left);
+      if (topDiff > THRESHOLD || leftDiff > THRESHOLD) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Find an element by its scrollable key
+   *
+   * @param {string} key - Element key
+   * @returns {HTMLElement|null} Found element or null
+   */
+  findElementByKey(key) {
+    if (key === "window") {
+      return null;
+    }
+    if (key.startsWith("#")) {
+      return document.getElementById(key.slice(1));
+    }
+    try {
+      return document.querySelector(key);
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * Restore scroll positions if layout hasn't changed significantly
+   *
+   * Logs a message if scroll restoration is skipped due to layout changes.
+   */
+  restoreScrollPositions() {
+    if (this.layoutChangedSignificantly()) {
+      console.log("[HMR] Layout changed significantly, not restoring scroll");
+      return;
+    }
+    const windowPos = this.scrollPositions.get("window");
+    if (windowPos) {
+      window.scrollTo(windowPos.left, windowPos.top);
+    }
+    for (const [key, pos] of this.scrollPositions) {
+      if (key === "window") {
+        continue;
+      }
+      const el = this.findElementByKey(key);
+      if (el) {
+        el.scrollTop = pos.top;
+        el.scrollLeft = pos.left;
+      }
+    }
+  }
+  /**
+   * Capture all state (form + scroll + layout)
+   *
+   * Convenience method that calls all capture methods.
+   */
+  captureAll() {
+    this.captureFormState();
+    this.captureScrollPositions();
+    this.captureLayout();
+  }
+  /**
+   * Restore all state (form + scroll)
+   *
+   * Convenience method that calls all restore methods.
+   */
+  restoreAll() {
+    this.restoreFormState();
+    this.restoreScrollPositions();
+  }
+  /**
+   * Clear all captured state
+   */
+  clear() {
+    this.capturedInputs.clear();
+    this.scrollPositions.clear();
+    this.layoutSnapshot = null;
+  }
+};
+var stateCapturer = new StateCapturer();
+
+// src/hmr/overlay.js
+function escapeHtml(str) {
+  return String(str).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function toPositiveInt(value) {
+  const parsed = Number(value);
+  return Number.isInteger(parsed) && parsed > 0 ? parsed : null;
+}
+function formatCodeFrame(frame, highlightLine, startLine = 1) {
+  if (!frame) return "";
+  const firstLine = toPositiveInt(startLine) ?? 1;
+  const lines = frame.split("\n");
+  return lines.map((content, i) => {
+    const lineNum = firstLine + i;
+    const isHighlight = lineNum === highlightLine;
+    return `<div class="line${isHighlight ? " highlight" : ""}">
+      <span class="line-number">${lineNum}</span>
+      <span class="line-content">${escapeHtml(content)}</span>
+    </div>`;
+  }).join("");
+}
+var EDITOR_URLS = {
+  vscode: (file, line) => `vscode://file/${file}:${line}`,
+  cursor: (file, line) => `cursor://file/${file}:${line}`,
+  "vscode-insiders": (file, line) => `vscode-insiders://file/${file}:${line}`,
+  atom: (file, line) => `atom://core/open/file?filename=${file}&line=${line}`,
+  sublime: (file, line) => `subl://open?url=file://${file}&line=${line}`,
+  webstorm: (file, line) => `webstorm://open?file=${file}&line=${line}`,
+  idea: (file, line) => `idea://open?file=${file}&line=${line}`
+};
+var OVERLAY_STYLES = `
+  :host {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99999;
+    --bg: #181818;
+    --text: #f8f8f2;
+    --red: #ff5555;
+    --yellow: #f1fa8c;
+    --purple: #bd93f9;
+    --cyan: #8be9fd;
+    --code-bg: #282a36;
+    --line-num: #6272a4;
+  }
+  .backdrop {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.66);
+  }
+  .container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: min(800px, 90vw);
+    max-height: 90vh;
+    overflow: auto;
+    background: var(--bg);
+    border-radius: 8px;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
+    font-family: 'SF Mono', Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  }
+  .header {
+    padding: 16px 20px;
+    background: var(--red);
+    color: white;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-radius: 8px 8px 0 0;
+  }
+  .title {
+    font-weight: bold;
+    font-size: 16px;
+  }
+  .close-btn {
+    background: none;
+    border: none;
+    color: white;
+    font-size: 24px;
+    cursor: pointer;
+    padding: 0 8px;
+    line-height: 1;
+  }
+  .close-btn:hover {
+    opacity: 0.8;
+  }
+  .content {
+    padding: 20px;
+    color: var(--text);
+  }
+  .message {
+    font-size: 18px;
+    color: var(--red);
+    margin-bottom: 20px;
+    word-break: break-word;
+  }
+  .file {
+    color: var(--cyan);
+    margin-bottom: 16px;
+    cursor: pointer;
+    text-decoration: underline;
+  }
+  .file:hover {
+    color: var(--purple);
+  }
+  .code-frame {
+    background: var(--code-bg);
+    padding: 16px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 14px;
+    line-height: 1.5;
+    margin-bottom: 16px;
+  }
+  .line {
+    display: flex;
+  }
+  .line-number {
+    width: 50px;
+    color: var(--line-num);
+    text-align: right;
+    padding-right: 16px;
+    user-select: none;
+    flex-shrink: 0;
+  }
+  .line-content {
+    flex: 1;
+    white-space: pre;
+  }
+  .line.highlight {
+    background: rgba(255, 85, 85, 0.2);
+  }
+  .line.highlight .line-content {
+    color: var(--red);
+  }
+  .stack {
+    margin-top: 20px;
+    font-size: 12px;
+    color: var(--line-num);
+    white-space: pre-wrap;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  .tip {
+    margin-top: 16px;
+    padding: 12px;
+    background: rgba(189, 147, 249, 0.1);
+    border-left: 3px solid var(--purple);
+    font-size: 13px;
+    color: var(--text);
+  }
+  .tip strong {
+    color: var(--purple);
+  }
+`;
+var ErrorOverlay = class {
+  constructor() {
+    this.overlay = null;
+    this.editor = this._getStoredEditor();
+    this.escapeHandler = null;
+  }
+  /**
+   * Get stored editor preference from localStorage.
+   * @returns {string} Editor name
+   * @private
+   */
+  _getStoredEditor() {
+    try {
+      return localStorage.getItem("coherent-editor") || "vscode";
+    } catch {
+      return "vscode";
+    }
+  }
+  /**
+   * Create the overlay element with Shadow DOM.
+   * @returns {{ host: HTMLElement, shadow: ShadowRoot }} Overlay elements
+   */
+  createOverlay() {
+    if (this.overlay) return this.overlay;
+    const host = document.createElement("div");
+    host.id = "coherent-error-overlay";
+    const shadow = host.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = OVERLAY_STYLES;
+    shadow.appendChild(style);
+    this.overlay = { host, shadow };
+    return this.overlay;
+  }
+  /**
+   * Show the error overlay with error details.
+   * @param {Object} error - Error details
+   * @param {string} error.message - Error message
+   * @param {string} [error.file] - File path
+   * @param {number} [error.line] - Line number
+   * @param {number} [error.column] - Column number
+   * @param {string} [error.frame] - Code frame with context
+   * @param {string} [error.stack] - Stack trace
+   */
+  show(error) {
+    const { host, shadow } = this.createOverlay();
+    const existingWrapper = shadow.querySelector(".wrapper");
+    if (existingWrapper) existingWrapper.remove();
+    const line = toPositiveInt(error.line);
+    const column = toPositiveInt(error.column);
+    const frameLines = error.frame ? error.frame.split("\n").length : 0;
+    const startLine = line ? Math.max(1, line - Math.floor(frameLines / 2)) : 1;
+    const wrapper = document.createElement("div");
+    wrapper.className = "wrapper";
+    wrapper.innerHTML = `
+      <div class="backdrop"></div>
+      <div class="container">
+        <div class="header">
+          <span class="title">HMR Error</span>
+          <button class="close-btn" title="Close (Escape)">&times;</button>
+        </div>
+        <div class="content">
+          <div class="message">${escapeHtml(error.message || "Unknown error")}</div>
+          ${error.file ? `
+            <div class="file" data-file="${escapeHtml(error.file)}" data-line="${line || 1}">
+              ${escapeHtml(error.file)}${line ? `:${line}` : ""}${column ? `:${column}` : ""}
+            </div>
+          ` : ""}
+          ${error.frame ? `
+            <div class="code-frame">${formatCodeFrame(error.frame, line, startLine)}</div>
+          ` : ""}
+          ${error.stack ? `
+            <div class="stack">${escapeHtml(error.stack)}</div>
+          ` : ""}
+          <div class="tip">
+            Press <strong>Escape</strong> or click the X to dismiss.
+            ${error.file ? ` Click the file path to open in ${escapeHtml(this.editor)}.` : ""}
+          </div>
+        </div>
+      </div>
+    `;
+    shadow.appendChild(wrapper);
+    const closeBtn = wrapper.querySelector(".close-btn");
+    const backdrop = wrapper.querySelector(".backdrop");
+    const fileLink = wrapper.querySelector(".file");
+    closeBtn?.addEventListener("click", () => this.hide());
+    backdrop?.addEventListener("click", () => this.hide());
+    fileLink?.addEventListener("click", (e) => {
+      const target = e.target;
+      const file = target.dataset.file;
+      const line2 = parseInt(target.dataset.line, 10) || 1;
+      this.openInEditor(file, line2);
+    });
+    if (!this.escapeHandler) {
+      this.escapeHandler = (e) => {
+        if (e.key === "Escape") this.hide();
+      };
+      document.addEventListener("keydown", this.escapeHandler);
+    }
+    if (!host.parentNode) {
+      document.body.appendChild(host);
+    }
+  }
+  /**
+   * Hide and remove the error overlay.
+   */
+  hide() {
+    if (this.overlay?.host.parentNode) {
+      this.overlay.host.parentNode.removeChild(this.overlay.host);
+    }
+    if (this.escapeHandler) {
+      document.removeEventListener("keydown", this.escapeHandler);
+      this.escapeHandler = null;
+    }
+    this.overlay = null;
+  }
+  /**
+   * Open file in configured editor.
+   * @param {string} file - File path
+   * @param {number} [line=1] - Line number
+   */
+  openInEditor(file, line = 1) {
+    const urlGenerator = EDITOR_URLS[this.editor] || EDITOR_URLS.vscode;
+    const url = urlGenerator(file, line);
+    window.open(url, "_self");
+  }
+  /**
+   * Set preferred editor and store in localStorage.
+   * @param {string} editor - Editor name (vscode, cursor, vscode-insiders, atom, sublime, webstorm, idea)
+   */
+  setEditor(editor) {
+    this.editor = editor;
+    try {
+      localStorage.setItem("coherent-editor", editor);
+    } catch {
+    }
+  }
+};
+var errorOverlay = new ErrorOverlay();
+
+// src/hmr/indicator.js
+var STATUS_COLORS = {
+  connected: "#10b981",
+  // Green
+  disconnected: "#ef4444",
+  // Red
+  reconnecting: "#f59e0b",
+  // Yellow/amber
+  error: "#ef4444"
+  // Red
+};
+var STATUS_TITLES = {
+  connected: "HMR: Connected",
+  disconnected: "HMR: Disconnected",
+  reconnecting: "HMR: Reconnecting...",
+  error: "HMR: Error"
+};
+var DEFAULT_COLOR = "#666";
+var ConnectionIndicator = class {
+  constructor() {
+    this.indicator = null;
+  }
+  /**
+   * Create the indicator element if it doesn't exist.
+   * Uses inline styles to avoid external CSS dependencies.
+   */
+  create() {
+    if (this.indicator) return;
+    const el = document.createElement("div");
+    el.id = "coherent-hmr-indicator";
+    el.style.cssText = `
+      position: fixed;
+      bottom: 8px;
+      right: 8px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: ${DEFAULT_COLOR};
+      z-index: 99998;
+      pointer-events: none;
+      transition: background 0.3s ease;
+    `;
+    el.title = "HMR: Initializing";
+    document.body.appendChild(el);
+    this.indicator = el;
+  }
+  /**
+   * Update the indicator status.
+   * Creates the element if it doesn't exist (lazy initialization).
+   *
+   * @param {string} status - Status string: 'connected', 'disconnected', 'reconnecting', or 'error'
+   */
+  update(status) {
+    if (!this.indicator) {
+      this.create();
+    }
+    const color = STATUS_COLORS[status] || STATUS_COLORS.disconnected;
+    const title = STATUS_TITLES[status] || "HMR: Unknown";
+    this.indicator.style.background = color;
+    this.indicator.title = title;
+  }
+  /**
+   * Remove the indicator from the DOM.
+   */
+  destroy() {
+    if (this.indicator?.parentNode) {
+      this.indicator.parentNode.removeChild(this.indicator);
+    }
+    this.indicator = null;
+  }
+};
+var connectionIndicator = new ConnectionIndicator();
+
+// src/hmr/module-tracker.js
+var ModuleTracker = class {
+  constructor() {
+    this.modules = /* @__PURE__ */ new Map();
+    this.socket = null;
+  }
+  /**
+   * Set WebSocket reference for invalidation messages
+   * @param {WebSocket|null} socket - WebSocket connection
+   */
+  setSocket(socket) {
+    this.socket = socket;
+  }
+  /**
+   * Create a hot context for a module (Vite-compatible API)
+   *
+   * Returns an object with:
+   * - data: Persistent object that survives HMR updates
+   * - accept(callback): Register self-update handler
+   * - acceptDeps(deps, callback): Register dependency update handler
+   * - dispose(callback): Register cleanup handler called before replacement
+   * - prune(callback): Register handler for when module is removed
+   * - invalidate(message): Signal that module cannot hot-update
+   *
+   * @param {string} moduleId - Unique identifier for the module
+   * @returns {Object} Hot context object
+   */
+  createHotContext(moduleId) {
+    let moduleData = this.modules.get(moduleId);
+    if (!moduleData) {
+      moduleData = {
+        accept: null,
+        acceptDeps: null,
+        dispose: null,
+        prune: null,
+        data: {}
+      };
+      this.modules.set(moduleId, moduleData);
+    }
+    const tracker = this;
+    return {
+      /**
+       * Persistent data object that survives HMR updates.
+       * Use this to preserve state across module replacements.
+       */
+      get data() {
+        return moduleData.data;
+      },
+      /**
+       * Accept self updates.
+       * Called when this module is updated and can handle its own replacement.
+       *
+       * @param {Function} [callback] - Optional callback receiving the new module
+       */
+      accept(callback) {
+        moduleData.accept = callback || (() => {
+        });
+      },
+      /**
+       * Accept dependency updates.
+       * Called when one of the specified dependencies is updated.
+       *
+       * @param {string|string[]} deps - Dependency module ID(s)
+       * @param {Function} callback - Callback receiving updated dependencies
+       */
+      acceptDeps(deps, callback) {
+        const depsArray = Array.isArray(deps) ? deps : [deps];
+        moduleData.acceptDeps = { deps: depsArray, callback };
+      },
+      /**
+       * Register disposal callback.
+       * Called before the module is replaced, receives the data object
+       * to allow saving state for the next version.
+       *
+       * @param {Function} callback - Cleanup handler, receives data object
+       */
+      dispose(callback) {
+        moduleData.dispose = callback;
+      },
+      /**
+       * Register prune callback.
+       * Called when the module is completely removed from the module graph.
+       *
+       * @param {Function} callback - Prune handler
+       */
+      prune(callback) {
+        moduleData.prune = callback;
+      },
+      /**
+       * Invalidate this module.
+       * Signals that the module cannot be hot-updated and should propagate
+       * the update to its importers.
+       *
+       * @param {string} [message] - Optional message explaining why
+       */
+      invalidate(message) {
+        const WS_OPEN = typeof WebSocket !== "undefined" ? WebSocket.OPEN : 1;
+        if (tracker.socket?.readyState === WS_OPEN) {
+          tracker.socket.send(JSON.stringify({
+            type: "invalidate",
+            moduleId,
+            message
+          }));
+        }
+        console.log(`[HMR] Module ${moduleId} invalidated${message ? `: ${message}` : ""}`);
+      }
+    };
+  }
+  /**
+   * Check if a module can be hot-updated
+   *
+   * Returns true if the module has registered an accept handler.
+   *
+   * @param {string} moduleId - Module identifier
+   * @returns {boolean} True if module accepts HMR updates
+   */
+  canHotUpdate(moduleId) {
+    const moduleData = this.modules.get(moduleId);
+    return !!(moduleData?.accept || moduleData?.acceptDeps);
+  }
+  /**
+   * Check if a module is an HMR boundary
+   *
+   * A module is considered a boundary if:
+   * - It has an accept handler registered
+   * - It exports __hmrBoundary = true
+   * - It is associated with a data-coherent-component element
+   *
+   * @param {string} moduleId - Module identifier
+   * @param {Object} [moduleExports] - Optional module exports to check for __hmrBoundary
+   * @returns {boolean} True if module is an HMR boundary
+   */
+  isHmrBoundary(moduleId, moduleExports) {
+    if (this.canHotUpdate(moduleId)) {
+      return true;
+    }
+    if (moduleExports?.__hmrBoundary === true) {
+      return true;
+    }
+    const componentName = this.extractComponentName(moduleId);
+    if (componentName && typeof document !== "undefined") {
+      const hasComponent = document.querySelector(
+        `[data-coherent-component="${componentName}"]`
+      );
+      if (hasComponent) {
+        return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Extract a potential component name from module path
+   *
+   * @param {string} moduleId - Module path
+   * @returns {string|null} Component name or null
+   * @private
+   */
+  extractComponentName(moduleId) {
+    const match = moduleId.match(/\/([^/]+?)(?:\.[^.]+)?$/);
+    if (match) {
+      return match[1];
+    }
+    return null;
+  }
+  /**
+   * Execute dispose callback for a module
+   *
+   * Calls the registered dispose handler with the data object,
+   * allowing the module to save state for the next version.
+   *
+   * @param {string} moduleId - Module identifier
+   * @returns {Object|null} The data object (for passing to next version)
+   */
+  executeDispose(moduleId) {
+    const moduleData = this.modules.get(moduleId);
+    if (!moduleData) {
+      return null;
+    }
+    if (typeof moduleData.dispose === "function") {
+      try {
+        moduleData.dispose(moduleData.data);
+      } catch (err) {
+        console.error(`[HMR] Error in dispose handler for ${moduleId}:`, err);
+      }
+    }
+    return moduleData.data;
+  }
+  /**
+   * Execute accept callback for a module
+   *
+   * Calls the registered accept handler with the new module.
+   *
+   * @param {string} moduleId - Module identifier
+   * @param {Object} [newModule] - The newly imported module
+   * @returns {boolean} True if accept handler was called
+   */
+  executeAccept(moduleId, newModule) {
+    const moduleData = this.modules.get(moduleId);
+    if (!moduleData?.accept) {
+      return false;
+    }
+    try {
+      moduleData.accept(newModule);
+      return true;
+    } catch (err) {
+      console.error(`[HMR] Error in accept handler for ${moduleId}:`, err);
+      return false;
+    }
+  }
+  /**
+   * Execute acceptDeps callback for a module
+   *
+   * Calls the registered acceptDeps handler with the updated dependencies.
+   *
+   * @param {string} moduleId - Module identifier
+   * @param {Object} updatedDeps - Map of dependency moduleId -> new module
+   * @returns {boolean} True if acceptDeps handler was called
+   */
+  executeAcceptDeps(moduleId, updatedDeps) {
+    const moduleData = this.modules.get(moduleId);
+    if (!moduleData?.acceptDeps) {
+      return false;
+    }
+    try {
+      const { deps, callback } = moduleData.acceptDeps;
+      const modules = deps.map((dep) => updatedDeps[dep]);
+      callback(modules);
+      return true;
+    } catch (err) {
+      console.error(`[HMR] Error in acceptDeps handler for ${moduleId}:`, err);
+      return false;
+    }
+  }
+  /**
+   * Execute prune callback for a module
+   *
+   * Called when a module is removed from the module graph.
+   *
+   * @param {string} moduleId - Module identifier
+   */
+  executePrune(moduleId) {
+    const moduleData = this.modules.get(moduleId);
+    if (!moduleData?.prune) {
+      return;
+    }
+    try {
+      moduleData.prune();
+    } catch (err) {
+      console.error(`[HMR] Error in prune handler for ${moduleId}:`, err);
+    }
+    this.modules.delete(moduleId);
+  }
+  /**
+   * Check if module is registered
+   *
+   * @param {string} moduleId - Module identifier
+   * @returns {boolean} True if module is registered
+   */
+  hasModule(moduleId) {
+    return this.modules.has(moduleId);
+  }
+  /**
+   * Get module data (for testing/debugging)
+   *
+   * @param {string} moduleId - Module identifier
+   * @returns {Object|null} Module data or null
+   */
+  getModuleData(moduleId) {
+    return this.modules.get(moduleId) || null;
+  }
+  /**
+   * Clear all module registrations (for testing)
+   */
+  clear() {
+    this.modules.clear();
+  }
+};
+var moduleTracker = new ModuleTracker();
+function createHotContext(moduleId) {
+  return moduleTracker.createHotContext(moduleId);
+}
+
+// src/hmr/client.js
+var MAX_STACK_LINE_LENGTH = 1024;
+var MAX_STACK_LINES = 50;
+function parseErrorLocation(error) {
+  const result = { file: null, line: null, column: null };
+  if (!error.stack) {
+    return result;
+  }
+  const patterns = [
+    /at\s[^(]*\(([^()]+):(\d+):(\d+)\)/,
+    // Chrome/Node with parens
+    /at\s+([^\s].*):(\d+):(\d+)/,
+    // Chrome/Node without parens
+    /@([^@]+):(\d+):(\d+)/,
+    // Firefox
+    /^(.+?):(\d+):(\d+)/
+    // Safari
+  ];
+  const lines = error.stack.split("\n", MAX_STACK_LINES);
+  for (const line of lines) {
+    if (line.length > MAX_STACK_LINE_LENGTH) continue;
+    for (const pattern of patterns) {
+      const match = line.match(pattern);
+      if (match) {
+        result.file = match[1];
+        result.line = parseInt(match[2], 10);
+        result.column = parseInt(match[3], 10);
+        return result;
+      }
+    }
+  }
+  return result;
+}
+var HMRClient = class {
+  constructor() {
+    this.socket = null;
+    this.connected = false;
+    this.reconnectAttempts = 0;
+    this.maxReconnectAttempts = 10;
+    this.reconnectDelay = 1e3;
+    this.hadDisconnect = false;
+    this.reconnectTimeout = null;
+    this.initialized = false;
+  }
+  /**
+   * Connect to the dev server WebSocket
+   *
+   * Establishes WebSocket connection with automatic reconnection using
+   * exponential backoff with jitter.
+   *
+   * @returns {void}
+   */
+  connect() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (this.reconnectTimeout !== null) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    try {
+      const protocol = location.protocol === "https:" ? "wss" : "ws";
+      const wsUrl = `${protocol}://${location.host}`;
+      const socket = new WebSocket(wsUrl);
+      this.socket = socket;
+      moduleTracker.setSocket(socket);
+      const isCurrent = () => this.socket === socket;
+      socket.addEventListener("open", () => {
+        if (!isCurrent()) return;
+        console.log("[HMR] Connected");
+        this.connected = true;
+        this.reconnectAttempts = 0;
+        connectionIndicator.update("connected");
+        socket.send(JSON.stringify({ type: "connected" }));
+        if (this.hadDisconnect) {
+          console.log("[HMR] Reconnected after disconnect, reloading page");
+          setTimeout(() => this.reload(), 200);
+          return;
+        }
+      });
+      socket.addEventListener("close", () => {
+        if (!isCurrent()) return;
+        this.connected = false;
+        this.hadDisconnect = true;
+        connectionIndicator.update("disconnected");
+        moduleTracker.setSocket(null);
+        this.scheduleReconnect();
+      });
+      socket.addEventListener("error", (event) => {
+        if (!isCurrent()) return;
+        console.warn("[HMR] WebSocket error:", event);
+        connectionIndicator.update("error");
+        try {
+          socket.close();
+        } catch {
+        }
+      });
+      socket.addEventListener("message", (event) => {
+        if (!isCurrent()) return;
+        this.handleMessage(event);
+      });
+    } catch (error) {
+      console.warn("[HMR] Failed to connect:", error);
+      this.scheduleReconnect();
+    }
+  }
+  /**
+   * Schedule a reconnection attempt with exponential backoff
+   *
+   * @private
+   */
+  scheduleReconnect() {
+    if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+      console.warn("[HMR] Max reconnection attempts reached");
+      connectionIndicator.update("disconnected");
+      return;
+    }
+    connectionIndicator.update("reconnecting");
+    const delay = Math.min(
+      this.reconnectDelay * Math.pow(2, this.reconnectAttempts) + Math.random() * 1e3,
+      3e4
+    );
+    this.reconnectAttempts++;
+    console.log(`[HMR] Reconnecting in ${Math.round(delay)}ms (attempt ${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
+    this.reconnectTimeout = setTimeout(() => {
+      this.reconnectTimeout = null;
+      this.connect();
+    }, delay);
+  }
+  /**
+   * Handle incoming WebSocket message
+   *
+   * @param {MessageEvent} event - WebSocket message event
+   * @private
+   */
+  handleMessage(event) {
+    let data;
+    try {
+      data = JSON.parse(event.data);
+    } catch {
+      return;
+    }
+    console.log("[HMR] message", data.type, data.filePath || data.webPath || "");
+    switch (data.type) {
+      case "connected":
+        break;
+      case "hmr-full-reload":
+      case "reload":
+        console.warn("[HMR] Server requested full reload");
+        this.reload();
+        break;
+      case "hmr-component-update":
+      case "hmr-update":
+        this.handleUpdate(data);
+        break;
+      case "hmr-error":
+        this.showError(data.error || data);
+        break;
+      case "preview-update":
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Handle module update
+   *
+   * Orchestrates the full HMR update cycle:
+   * 1. Capture form/scroll state
+   * 2. Execute dispose handlers
+   * 3. Clean up module resources
+   * 4. Re-import module
+   * 5. Execute accept handlers, or reload the page when the module does not
+   *    accept updates (nothing else can apply its new code)
+   * 6. Restore state
+   *
+   * @param {Object} data - Update message data
+   * @param {string} [data.filePath] - File path that changed
+   * @param {string} [data.webPath] - Web-accessible path
+   * @param {string} [data.updateType] - Type of update (component, style, etc.)
+   */
+  async handleUpdate(data) {
+    const filePath = data.webPath || data.filePath || "";
+    const moduleId = filePath;
+    try {
+      stateCapturer.captureAll();
+      if (moduleTracker.hasModule(moduleId)) {
+        moduleTracker.executeDispose(moduleId);
+      }
+      if (cleanupTracker.hasResources(moduleId)) {
+        cleanupTracker.checkForLeaks(moduleId);
+        cleanupTracker.cleanup(moduleId);
+      }
+      const importPath = filePath.startsWith("/") ? filePath : `/${filePath}`;
+      const newModule = await this.importModule(`${importPath}?t=${Date.now()}`);
+      if (!moduleTracker.canHotUpdate(moduleId)) {
+        console.log(`[HMR] ${filePath} does not accept hot updates, reloading`);
+        this.reload();
+        return;
+      }
+      moduleTracker.executeAccept(moduleId, newModule);
+      stateCapturer.restoreAll();
+      errorOverlay.hide();
+      console.log(`[HMR] Updated: ${data.updateType || "module"} ${filePath}`);
+    } catch (error) {
+      this.handleUpdateError(error, filePath);
+    }
+  }
+  /**
+   * Import an updated module (overridable, e.g. in tests)
+   *
+   * @param {string} url - Module URL with cache-busting query
+   * @returns {Promise<Object>} Module namespace
+   */
+  importModule(url) {
+    return import(
+      /* @vite-ignore */
+      url
+    );
+  }
+  /**
+   * Reload the page
+   */
+  reload() {
+    location.reload();
+  }
+  /**
+   * Handle update error
+   *
+   * @param {Error} error - Error that occurred
+   * @param {string} filePath - File that was being updated
+   * @private
+   */
+  handleUpdateError(error, filePath) {
+    console.error("[HMR] Update failed:", error);
+    const location2 = parseErrorLocation(error);
+    const errorDetails = {
+      message: error.message || "Unknown error during HMR update",
+      file: location2.file || filePath,
+      line: location2.line,
+      column: location2.column,
+      stack: error.stack
+    };
+    this.showError(errorDetails);
+  }
+  /**
+   * Show error overlay
+   *
+   * @param {Object} error - Error details
+   */
+  showError(error) {
+    errorOverlay.show(error);
+  }
+  /**
+   * Hide error overlay
+   */
+  hideError() {
+    errorOverlay.hide();
+  }
+  /**
+   * Initialize HMR client
+   *
+   * Guards against double initialization and connects to dev server.
+   *
+   * @returns {void}
+   */
+  initialize() {
+    if (typeof window === "undefined") {
+      return;
+    }
+    if (window.__coherent_hmr_initialized || this.initialized) {
+      return;
+    }
+    window.__coherent_hmr_initialized = true;
+    this.initialized = true;
+    this.connect();
+  }
+  /**
+   * Disconnect and clean up
+   *
+   * @returns {void}
+   */
+  disconnect() {
+    if (this.reconnectTimeout !== null) {
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = null;
+    }
+    if (this.socket) {
+      const socket = this.socket;
+      this.socket = null;
+      try {
+        socket.close();
+      } catch {
+      }
+    }
+    this.connected = false;
+    moduleTracker.setSocket(null);
+    connectionIndicator.destroy();
+  }
+  /**
+   * Check if client is connected
+   *
+   * @returns {boolean} True if connected
+   */
+  isConnected() {
+    return this.connected;
+  }
+};
+var hmrClient = new HMRClient();
+
+export {
+  CleanupTracker,
+  cleanupTracker,
+  StateCapturer,
+  stateCapturer,
+  escapeHtml,
+  formatCodeFrame,
+  ErrorOverlay,
+  errorOverlay,
+  ConnectionIndicator,
+  connectionIndicator,
+  ModuleTracker,
+  moduleTracker,
+  createHotContext,
+  HMRClient,
+  hmrClient
+};
+//# sourceMappingURL=chunk-EAOAAY2X.js.map