@supernovaio/prototyping-tooling 0.9.5-alpha.1

package/dist/client.js

@@ -0,0 +1,946 @@
+import { b as $, c as X, R as Y, d as U, Z as C, C as v, M as O, B as M, e as B, P as G, i as W, a as V, T as j } from "./constants-BXKWBfHg.js";
+import { d as c } from "./debug-CLzmqn3R.js";
+class z {
+  registry = /* @__PURE__ */ new Map();
+  register(e, t) {
+    this.registry.set(e, t);
+  }
+  registerAll(e) {
+    for (const [t, n] of Object.entries(e))
+      this.registry.set(t, n);
+  }
+  getEditableProps(e) {
+    let t = this.registry.get(e);
+    if (!t) {
+      const o = e.toLowerCase();
+      for (const [i, s] of this.registry.entries())
+        if (i.toLowerCase() === o) {
+          t = s;
+          break;
+        }
+    }
+    const n = { p: "p", h1: "h1", h2: "h2", h3: "h3" };
+    return !t && n[e] && (t = this.registry.get(n[e])), t ? Object.entries(t.props).filter(([o, i]) => i.editable).map(([o, i]) => ({ name: o, type: i.type, options: i.options, default: i.default, editable: i.editable, label: i.label })) : [];
+  }
+}
+function H(r) {
+  if (r.id)
+    return [`*[@id="${r.id}"]`];
+  const e = [];
+  let t = r;
+  for (; t && t.nodeType === Node.ELEMENT_NODE; ) {
+    let n = t.nodeName.toLowerCase();
+    if (t.parentNode) {
+      const o = Array.from(t.parentNode.children), i = o.indexOf(t) + 1;
+      o.length > 1 && (n += `[${i}]`);
+    }
+    e.unshift(n), t = t.parentElement;
+  }
+  return e;
+}
+function b(r) {
+  return r.length === 1 && r[0].startsWith("*[@id=") ? `//${r[0]}` : "/" + r.join("/");
+}
+const u = { FunctionComponent: 0, ClassComponent: 1, IndeterminateComponent: 2, HostRoot: 3, HostPortal: 4, HostComponent: 5, HostText: 6, Fragment: 7, Mode: 8, ContextConsumer: 9, ContextProvider: 10, ForwardRef: 11, Profiler: 12, SuspenseComponent: 13, MemoComponent: 14, SimpleMemoComponent: 15, LazyComponent: 16, IncompleteClassComponent: 17, DehydratedFragment: 18, SuspenseListComponent: 19, ScopeComponent: 21, OffscreenComponent: 22, LegacyHiddenComponent: 23, CacheComponent: 24, TracingMarkerComponent: 25, HostHoistable: 26, HostSingleton: 27, IncompleteFunctionComponent: 28, Throw: 29, ViewTransitionComponent: 30, ActivityComponent: 31 }, K = /* @__PURE__ */ new Set(["Component", "PureComponent", "Fragment", "Suspense", "Profiler", "StrictMode", "Routes", "Route", "Outlet", "Root", "ErrorBoundaryHandler", "HotReload", "Hot"]), J = [/Boundary$/, /BoundaryHandler$/, /Provider$/, /Consumer$/, /^(Inner|Outer)/, /Router$/, /^Client(Page|Segment|Root)/, /^Server(Root|Component|Render)/, /^RSC/, /Context$/, /^Hot(Reload)?$/, /^(Dev|React)(Overlay|Tools|Root)/, /Overlay$/, /Handler$/, /^With[A-Z]/, /Wrapper$/, /^Root$/];
+let T = null;
+function N(r) {
+  const e = (t) => t.some((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$") || n.startsWith("__reactProps$"));
+  return e(Object.keys(r)) || e(Object.getOwnPropertyNames(r));
+}
+function q() {
+  if (T !== null) return T;
+  if (typeof document > "u") return !1;
+  if (document.body && N(document.body))
+    return c("client", "Detected React on document.body"), T = !0, !0;
+  for (const e of Y) {
+    const t = document.querySelector(e);
+    if (t) {
+      if (N(t))
+        return c("client", "Detected React on", e), T = !0, !0;
+      for (const n of t.children)
+        if (N(n))
+          return c("client", "Detected React on child of", e), T = !0, !0;
+    }
+  }
+  if (document.body) {
+    for (const e of document.body.children)
+      if (N(e))
+        return c("client", "Detected React on body child:", e.tagName), T = !0, !0;
+  }
+  const r = document.querySelectorAll("*");
+  for (const e of r) {
+    if (N(e))
+      return c("client", "Detected React on deep scan:", e.tagName), T = !0, !0;
+    if (r.length > U) break;
+  }
+  return c("client", "React NOT detected on page"), T = !1, !1;
+}
+function Z(r) {
+  const e = Object.keys(r);
+  let t = e.find((s) => s.startsWith("__reactFiber$"));
+  if (t) return r[t] || null;
+  let n = e.find((s) => s.startsWith("__reactInternalInstance$"));
+  if (n) return r[n] || null;
+  const o = Object.getOwnPropertyNames(r);
+  if (t = o.find((s) => s.startsWith("__reactFiber$")), t) return r[t] || null;
+  if (n = o.find((s) => s.startsWith("__reactInternalInstance$")), n) return r[n] || null;
+  const i = o.find((s) => {
+    if (!s.startsWith("__react")) return !1;
+    const a = r[s];
+    return a && typeof a == "object" && ("return" in a || "tag" in a);
+  });
+  return i && r[i] || null;
+}
+function A(r) {
+  return r ? r.displayName ? r.displayName : r.name ? r.name : null : null;
+}
+function Q(r) {
+  const { tag: e, type: t, elementType: n } = r;
+  if ((/* @__PURE__ */ new Set([u.HostComponent, u.HostText, u.HostHoistable, u.HostSingleton, u.Fragment, u.Mode, u.Profiler, u.DehydratedFragment, u.HostRoot, u.HostPortal, u.ScopeComponent, u.OffscreenComponent, u.LegacyHiddenComponent, u.CacheComponent, u.TracingMarkerComponent, u.Throw, u.ViewTransitionComponent, u.ActivityComponent, u.SuspenseComponent, u.SuspenseListComponent])).has(e)) return null;
+  if (e === u.ForwardRef) {
+    const i = n;
+    if (i?.render) {
+      const s = A(i.render);
+      if (s) return s;
+    }
+    return i?.displayName ? i.displayName : A(t);
+  }
+  if (e === u.MemoComponent || e === u.SimpleMemoComponent) {
+    const i = n;
+    if (i?.type) {
+      const s = A(i.type);
+      if (s) return s;
+    }
+    return i?.displayName ? i.displayName : A(t);
+  }
+  if (e === u.ContextProvider) {
+    const i = t;
+    return i?._context?.displayName ? `${i._context.displayName}.Provider` : null;
+  }
+  if (e === u.ContextConsumer) {
+    const i = t;
+    return i?.displayName ? `${i.displayName}.Consumer` : null;
+  }
+  if (e === u.LazyComponent) {
+    const i = n;
+    return i?._status === 1 && i._result ? A(i._result) : null;
+  }
+  return e === u.IncompleteClassComponent || e === u.IncompleteFunctionComponent || e === u.FunctionComponent || e === u.ClassComponent || e === u.IndeterminateComponent ? A(t) : null;
+}
+function ee(r) {
+  return r.length <= 2 || r.length <= 3 && r === r.toLowerCase();
+}
+function te(r) {
+  return !(K.has(r) || J.some((e) => e.test(r)));
+}
+function ne(r, e = $, t = X) {
+  if (!q())
+    return c("client", "isReactPage() = false"), { path: null, components: [] };
+  const n = [];
+  try {
+    let i = Z(r), s = 0;
+    for (; i && s < t && n.length < e; ) {
+      const a = Q(i);
+      a && !ee(a) && te(a) && n.push(a), i = i.return, s++;
+    }
+  } catch (i) {
+    return c("client", "Error walking fiber tree:", i), { path: null, components: [] };
+  }
+  return n.length === 0 ? { path: null, components: [] } : { path: n.slice().reverse().map((i) => `<${i}>`).join("  "), components: n };
+}
+let S = null, E = null;
+function x(r, e, t, n = "solid") {
+  const o = document.createElement("div");
+  return Object.assign(o.style, { position: "fixed", left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: C.HOVER_OVERLAY, borderRadius: "2px" }), o;
+}
+function oe(r) {
+  L();
+  const e = r.getBoundingClientRect();
+  S = x(e, v.SELECT_OVERLAY_BORDER, v.SELECT_OVERLAY_BG), S.className = "forge-overlay", document.body.appendChild(S);
+}
+function L() {
+  S && (S.remove(), S = null);
+}
+function ie() {
+  return E || (E = document.createElement("div"), Object.assign(E.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: C.HIT_TEST_OVERLAY, cursor: "crosshair" }), E.className = "forge-hit-test-overlay", document.body.appendChild(E), E);
+}
+function se() {
+  E && (E.remove(), E = null);
+}
+let re = 0;
+function ae() {
+  return `ann-${Date.now()}-${++re}`;
+}
+class D {
+  active = !1;
+  messenger;
+  hoverOverlay = null;
+  componentTooltip = null;
+  hitTestOverlay = null;
+  dragRect = null;
+  dragHighlights = [];
+  annotationHighlights = [];
+  dots = /* @__PURE__ */ new Map();
+  isDragging = !1;
+  dragStartX = 0;
+  dragStartY = 0;
+  dragScopeParent = null;
+  hoverSuppressed = !1;
+  activeHighlightDotId = null;
+  pendingHighlightLocators = null;
+  lastHoveredElement = null;
+  accumulationId = null;
+  accumulationElements = [];
+  constructor(e) {
+    this.messenger = e, window.__forgeAnnotations = this, window.addEventListener("scroll", this.repositionAll, { capture: !0, passive: !0 }), window.addEventListener("resize", this.repositionAll, { passive: !0 });
+  }
+  activate() {
+    this.active || (this.active = !0, c("annotation", "Annotation mode activated"), this.createHitTestOverlay(), this.addListeners(), this.setMarkersVisible(!0), document.body.style.cursor = "crosshair");
+  }
+  deactivate() {
+    this.active && (this.active = !1, c("annotation", "Annotation mode deactivated"), this.removeHoverOverlay(), this.clearAnnotationHighlights(), this.removeHitTestOverlay(), this.removeDragRect(), this.removeListeners(), this.setMarkersVisible(!1), document.body.style.cursor = "");
+  }
+  selectDot(e) {
+    const t = this.dots.get(e);
+    t && (this.removeHoverOverlay(), this.hoverSuppressed = !0, this.highlightAnnotationElements(t));
+  }
+  enterAccumulation(e, t) {
+    if (this.accumulationId !== e) {
+      this.accumulationId = e, this.accumulationElements = [], this.clearAnnotationHighlights();
+      for (const n of t) {
+        const o = { xpath: b(n.xpath), forgeId: n.forgeId, forgeIdIndex: n.forgeIdIndex }, i = this.resolveLocator(o);
+        i && this.accumulationElements.push(i);
+      }
+      this.refreshAccumulationHighlights(), this.hoverSuppressed = !1, c("annotation", `Entered accumulation mode for ${e} with ${this.accumulationElements.length} elements`);
+    }
+  }
+  exitAccumulation() {
+    if (!this.accumulationId) return;
+    const e = this.accumulationId;
+    if (this.accumulationElements.length > 0) {
+      const n = this.accumulationElements[this.accumulationElements.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom;
+      this.pendingAnnotations.delete(e), this.createAnnotationFromElements([...this.accumulationElements], this.accumulationElements.length > 1 ? "multi" : "single", o, i, e);
+    } else
+      this.pendingAnnotations.delete(e), this.clearAnnotationHighlights();
+    this.accumulationId = null, this.accumulationElements = [], c("annotation", `Exited accumulation mode for ${e}`);
+  }
+  refreshAccumulationHighlights() {
+    this.clearAnnotationHighlights();
+    const e = this.accumulationElements.map((t) => this.elementToLocator(t));
+    e.length > 0 && this.highlightLocators(e, this.accumulationElements.length > 1);
+  }
+  elementToLocator(e) {
+    const t = e.getAttribute("data-forge-id") || void 0;
+    let n;
+    if (t) {
+      const o = document.querySelectorAll(`[data-forge-id="${t}"]`);
+      o.length > 1 && (n = Array.from(o).indexOf(e));
+    }
+    return { xpath: b(H(e)), forgeId: t, forgeIdIndex: n };
+  }
+  elementToInfo(e) {
+    return { elementTag: e.tagName.toLowerCase(), xpath: H(e), componentName: e.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(e) || void 0, forgeId: e.getAttribute("data-forge-id") || void 0, forgeIdIndex: this.resolveForgeIdIndex(e), sourcePos: e.getAttribute("data-source-pos") || void 0 };
+  }
+  resolveForgeIdIndex(e) {
+    const t = e.getAttribute("data-forge-id");
+    if (!t) return;
+    const n = document.querySelectorAll(`[data-forge-id="${t}"]`);
+    if (n.length > 1) return Array.from(n).indexOf(e);
+  }
+  sendAccumulationUpdate() {
+    if (!this.accumulationId) return;
+    const e = this.accumulationElements;
+    if (e.length === 0) {
+      this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: 0, dotY: 0, mode: "single", elements: [], xpaths: [], elementTag: "" }, origin: O });
+      return;
+    }
+    const n = e[e.length - 1].getBoundingClientRect(), o = n.left + n.width / 2, i = n.bottom, s = e.map((g) => this.elementToInfo(g)), a = e.map((g) => this.elementToLocator(g)), l = this.getAnchorRect(a), h = o - 2, d = i - M - 2, m = l && l.width > 0 && l.height > 0 ? { x: (h - l.left) / l.width, y: (d - l.top) / l.height } : { x: 0, y: 0 }, p = s[0];
+    this.messenger.send({ type: "ACCUMULATION_UPDATED", annotation: { id: this.accumulationId, dotX: o, dotY: i, anchorOffset: m, mode: e.length > 1 ? "multi" : "single", elements: s, xpaths: s.map((g) => b(g.xpath)), elementTag: p.elementTag, componentName: p.componentName, componentPath: p.componentPath, forgeId: p.forgeId, sourcePos: p.sourcePos }, origin: O });
+  }
+  removeDot(e) {
+    const t = this.dots.get(e);
+    t && (t.element.remove(), this.dots.delete(e)), this.hoverSuppressed = !1;
+  }
+  removeAllDots() {
+    this.dots.forEach((e) => e.element.remove()), this.dots.clear();
+  }
+  restoreDots(e) {
+    this.removeAllDots();
+    for (const t of e) {
+      const n = t.elements.map((i) => ({ xpath: b(i.xpath), forgeId: i.forgeId, forgeIdIndex: i.forgeIdIndex })), o = this.getAnchorRect(n);
+      if (o && t.anchorOffset && o.width > 0 && o.height > 0) {
+        const i = { rx: t.anchorOffset.x, ry: t.anchorOffset.y }, s = o.left + i.rx * o.width, a = o.top + i.ry * o.height;
+        this.createDotAtPosition(s, a, t.mode, t.id, t.order, n, i);
+      } else
+        this.createDot(t.dotX, t.dotY, t.mode, t.id, t.order, n);
+    }
+    c("annotation", `Restored ${e.length} annotation dots`);
+  }
+  markersVisible = !1;
+  toggleMarkers() {
+    this.setMarkersVisible(!this.markersVisible);
+  }
+  setMarkersVisible(e) {
+    this.markersVisible = e;
+    const t = e ? "flex" : "none";
+    this.dots.forEach((n) => {
+      n.element.style.display = t;
+    });
+  }
+  repositionAll = () => {
+    if (this.dots.forEach((e) => {
+      if (e.locators.length === 0) return;
+      const t = this.getAnchorRect(e.locators);
+      t && (e.element.style.left = `${t.left + e.anchorRatio.rx * t.width}px`, e.element.style.top = `${t.top + e.anchorRatio.ry * t.height}px`);
+    }), this.accumulationId)
+      this.refreshAccumulationHighlights();
+    else if (this.activeHighlightDotId) {
+      const e = this.dots.get(this.activeHighlightDotId);
+      e && this.highlightAnnotationElements(e);
+    } else this.annotationHighlights.length > 0 && this.pendingHighlightLocators && (this.clearAnnotationHighlightsRaw(), this.highlightLocators(this.pendingHighlightLocators.locators, this.pendingHighlightLocators.showBounding));
+    this.repositionHoverOverlay();
+  };
+  createHitTestOverlay() {
+    this.hitTestOverlay || (this.hitTestOverlay = document.createElement("div"), Object.assign(this.hitTestOverlay.style, { position: "fixed", top: "0", left: "0", width: "100%", height: "100%", backgroundColor: "transparent", pointerEvents: "auto", zIndex: C.HIT_TEST_OVERLAY, cursor: "crosshair" }), this.hitTestOverlay.className = "forge-annotation-hit-test", document.body.appendChild(this.hitTestOverlay));
+  }
+  removeHitTestOverlay() {
+    this.hitTestOverlay && (this.hitTestOverlay.remove(), this.hitTestOverlay = null);
+  }
+  showHoverOverlay(e, t, n) {
+    this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = e;
+    const o = e.getBoundingClientRect(), i = t === v.ANNOTATION_MULTI ? v.ANNOTATION_MULTI_BG : v.ANNOTATION_SINGLE_BG;
+    this.hoverOverlay = x(o, t, i, "solid"), this.hoverOverlay.style.transition = "all 0.05s ease", this.hoverOverlay.className = "forge-annotation-hover", document.body.appendChild(this.hoverOverlay), this.showComponentTooltip(n || e, o);
+  }
+  removeHoverOverlay() {
+    this.hoverOverlay && (this.hoverOverlay.remove(), this.hoverOverlay = null), this.lastHoveredElement = null, this.removeComponentTooltip();
+  }
+  repositionHoverOverlay() {
+    if (!this.hoverOverlay || !this.lastHoveredElement) return;
+    if (!this.lastHoveredElement.isConnected) {
+      this.removeHoverOverlay();
+      return;
+    }
+    const e = this.lastHoveredElement.getBoundingClientRect();
+    Object.assign(this.hoverOverlay.style, { left: `${e.left}px`, top: `${e.top}px`, width: `${e.width}px`, height: `${e.height}px` });
+  }
+  highlightAnnotationElements(e) {
+    this.clearAnnotationHighlights(), this.activeHighlightDotId = e.id, this.applySelectedStyle(e), this.highlightLocators(e.locators, e.mode === "multi");
+  }
+  applySelectedStyle(e) {
+    e.element.style.backgroundColor = "#0038AE", e.element.style.borderColor = "#0038AE", e.element.style.color = "#FFFFFF";
+  }
+  applyDefaultStyle(e) {
+    e.element.style.backgroundColor = "#FFFFFF", e.element.style.borderColor = "#1A58D0", e.element.style.color = "#1A58D0";
+  }
+  resolveLocator(e) {
+    if (e.forgeId) {
+      const t = document.querySelectorAll(`[data-forge-id="${e.forgeId}"]`);
+      if (t.length === 1) return t[0];
+      if (t.length > 1 && e.forgeIdIndex != null && e.forgeIdIndex < t.length)
+        return t[e.forgeIdIndex];
+      t.length > 1 && c("annotation", `Multiple elements with forge-id "${e.forgeId}", falling back to xpath`), t.length === 0 && c("annotation", `No element with forge-id "${e.forgeId}", falling back to xpath`);
+    }
+    try {
+      return document.evaluate(e.xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
+    } catch {
+      return null;
+    }
+  }
+  highlightLocators(e, t) {
+    this.pendingHighlightLocators = { locators: e, showBounding: t };
+    const n = [];
+    for (const o of e) {
+      const i = this.resolveLocator(o);
+      if (i) {
+        const s = i.getBoundingClientRect();
+        n.push(s);
+        const a = x(s, v.ANNOTATION_SINGLE, v.ANNOTATION_SINGLE_BG, "solid");
+        a.className = "forge-annotation-highlight", document.body.appendChild(a), this.annotationHighlights.push(a);
+      }
+    }
+    if (t && n.length > 1) {
+      const o = Math.min(...n.map((d) => d.left)), i = Math.min(...n.map((d) => d.top)), s = Math.max(...n.map((d) => d.right)), a = Math.max(...n.map((d) => d.bottom)), l = new DOMRect(o, i, s - o, a - i), h = x(l, v.ANNOTATION_SINGLE, "transparent", "dashed");
+      h.className = "forge-annotation-bounding-rect", document.body.appendChild(h), this.annotationHighlights.push(h);
+    }
+  }
+  clearAnnotationHighlightsRaw() {
+    for (const e of this.annotationHighlights) e.remove();
+    this.annotationHighlights = [];
+  }
+  clearAnnotationHighlights() {
+    if (this.activeHighlightDotId) {
+      const e = this.dots.get(this.activeHighlightDotId);
+      e && this.applyDefaultStyle(e);
+    }
+    this.clearAnnotationHighlightsRaw(), this.activeHighlightDotId = null, this.pendingHighlightLocators = null;
+  }
+  getAnchorRect(e) {
+    let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0, s = !1;
+    for (const a of e) {
+      const l = this.resolveLocator(a);
+      if (l) {
+        const h = l.getBoundingClientRect();
+        t = Math.min(t, h.left), n = Math.min(n, h.top), o = Math.max(o, h.right), i = Math.max(i, h.bottom), s = !0;
+      }
+    }
+    return s ? new DOMRect(t, n, o - t, i - n) : null;
+  }
+  getComponentPath(e) {
+    const t = [], n = /* @__PURE__ */ new Set();
+    let o = e;
+    for (; o; ) {
+      const a = o.getAttribute("data-component");
+      a && !n.has(a) && (n.add(a), t.push(a)), o = o.parentElement;
+    }
+    const i = ne(e), s = [...t];
+    if (i.components.length > 0)
+      for (const a of i.components)
+        n.has(a) || (n.add(a), s.push(a));
+    if (s.length !== 0)
+      return s.reverse();
+  }
+  showComponentTooltip(e, t) {
+    this.removeComponentTooltip();
+    const n = this.getComponentPath(e);
+    if (!n) return;
+    const o = document.createElement("div");
+    Object.assign(o.style, { position: "fixed", zIndex: C.TOOLTIP, backgroundColor: "rgba(30, 30, 30, 0.92)", color: "#e4e4e7", padding: "4px 10px", borderRadius: "6px", fontSize: "11px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontWeight: "500", letterSpacing: "0.3px", whiteSpace: "nowrap", pointerEvents: "none", backdropFilter: "blur(8px)", boxShadow: "0 2px 8px rgba(0,0,0,0.3)", transition: "opacity 0.1s ease" }), o.textContent = n.map((l) => `<${l}>`).join("  "), o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
+    const i = o.getBoundingClientRect();
+    let s = t.left + t.width / 2 - i.width / 2, a = t.top - i.height - 6;
+    s < 4 && (s = 4), s + i.width > window.innerWidth - 4 && (s = window.innerWidth - i.width - 4), a < 4 && (a = t.bottom + 6), o.style.left = `${s}px`, o.style.top = `${a}px`, this.componentTooltip = o;
+  }
+  removeComponentTooltip() {
+    this.componentTooltip && (this.componentTooltip.remove(), this.componentTooltip = null);
+  }
+  showDragRect(e, t, n, o) {
+    this.dragRect || (this.dragRect = document.createElement("div"), Object.assign(this.dragRect.style, { position: "fixed", border: `1px dashed ${v.ANNOTATION_MULTI}`, backgroundColor: v.DRAG_RECT_BG, pointerEvents: "none", zIndex: C.HOVER_OVERLAY, borderRadius: "4px" }), this.dragRect.className = "forge-annotation-drag-rect", document.body.appendChild(this.dragRect)), Object.assign(this.dragRect.style, { left: `${Math.min(e, n)}px`, top: `${Math.min(t, o)}px`, width: `${Math.abs(n - e)}px`, height: `${Math.abs(o - t)}px` });
+  }
+  removeDragRect() {
+    this.dragRect && (this.dragRect.remove(), this.dragRect = null), this.clearDragHighlights();
+  }
+  showDragHighlights(e) {
+    this.clearDragHighlights();
+    for (const t of e) {
+      const n = t.getBoundingClientRect(), o = x(n, v.ANNOTATION_MULTI, v.ANNOTATION_MULTI_BG, "solid");
+      o.className = "forge-annotation-drag-highlight", document.body.appendChild(o), this.dragHighlights.push(o);
+    }
+  }
+  clearDragHighlights() {
+    for (const e of this.dragHighlights) e.remove();
+    this.dragHighlights = [];
+  }
+  createDot(e, t, n, o, i, s = []) {
+    const a = this.getAnchorRect(s), l = e - 2, h = t - M - 2, d = a && a.width > 0 && a.height > 0 ? { rx: (l - a.left) / a.width, ry: (h - a.top) / a.height } : { rx: 0, ry: 0 };
+    this.createDotAtPosition(l, h, n, o, i, s, d);
+  }
+  createDotAtPosition(e, t, n, o, i, s, a) {
+    const l = document.createElement("div");
+    Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${B}px`, height: `${M}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: C.ANNOTATION_DOT, transition: "transform 0.15s ease", display: this.markersVisible ? "flex" : "none", alignItems: "center", justifyContent: "center", padding: "0 4px", fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif", fontSize: "11px", fontWeight: "700", color: "#1A58D0", lineHeight: "1", userSelect: "none" }), l.textContent = String(i), l.className = "forge-annotation-dot", l.dataset.annotationId = o, l.addEventListener("mouseenter", () => {
+      l.style.transform = "scale(1.05)", this.removeHoverOverlay();
+    }), l.addEventListener("mouseleave", () => {
+      l.style.transform = "scale(1)";
+    }), l.addEventListener("click", (h) => {
+      h.stopPropagation(), h.preventDefault(), this.hoverSuppressed = !0, this.removeHoverOverlay();
+      const d = this.dots.get(o);
+      d && this.highlightAnnotationElements(d);
+      const m = l.getBoundingClientRect();
+      this.messenger.send({ type: "ANNOTATION_DOT_CLICKED", annotationId: o, dotX: m.left, dotY: m.bottom, origin: O });
+    }), document.body.appendChild(l), this.dots.set(o, { id: o, element: l, mode: n, order: i, locators: s, anchorRatio: a });
+  }
+  updateOrders(e) {
+    for (const [t, n] of Object.entries(e)) {
+      const o = this.dots.get(t);
+      o && (o.order = n, o.element.textContent = String(n));
+    }
+  }
+  elementAtPoint(e, t) {
+    this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "none"), this.hoverOverlay && (this.hoverOverlay.style.pointerEvents = "none"), this.dots.forEach((o) => o.element.style.pointerEvents = "none");
+    const n = document.elementFromPoint(e, t);
+    return this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), this.hoverOverlay && (this.hoverOverlay.style.pointerEvents = "none"), this.dots.forEach((o) => o.element.style.pointerEvents = "auto"), !n || n === document.body || n === document.documentElement ? null : this.escapeToSvgRoot(n);
+  }
+  escapeToSvgRoot(e) {
+    if (!(e instanceof SVGElement)) return e;
+    let t = e;
+    for (; t.parentElement; ) {
+      if (t.tagName.toLowerCase() === "svg" && !(t.parentElement instanceof SVGElement))
+        return t;
+      t = t.parentElement;
+    }
+    return t || e;
+  }
+  findTopmostWithSameForgeId(e) {
+    const t = e.getAttribute("data-forge-id");
+    if (!t) return e;
+    let n = e, o = e;
+    for (; n.parentElement; ) {
+      const i = n.parentElement;
+      if (i.getAttribute("data-forge-id") !== t) break;
+      o = i, n = i;
+    }
+    return o;
+  }
+  findForgeIdParent(e) {
+    let t = e.parentElement;
+    for (; t; ) {
+      if (t.getAttribute("data-forge-id")) return t;
+      t = t.parentElement;
+    }
+    return null;
+  }
+  elementsInRect(e, t, n, o) {
+    const i = Math.min(e, n), s = Math.min(t, o), a = Math.max(e, n), l = Math.max(t, o), h = document.querySelectorAll("[data-forge-id]"), d = [], m = /* @__PURE__ */ new Set();
+    if (h.forEach((p) => {
+      const g = p, y = g.getAttribute("data-forge-id");
+      if (!y || m.has(y) || g instanceof SVGElement && g.tagName.toLowerCase() !== "svg" || g.closest?.("svg") && g.tagName.toLowerCase() !== "svg") return;
+      const f = this.findTopmostWithSameForgeId(g);
+      if (m.has(f.getAttribute("data-forge-id") || "")) return;
+      const R = f.getBoundingClientRect();
+      R.right >= i && R.left <= a && R.bottom >= s && R.top <= l && (m.add(y), d.push(f));
+    }), this.dragScopeParent) {
+      const p = this.findForgeIdParent(this.dragScopeParent);
+      if (p)
+        return d.filter((y) => {
+          const f = this.findForgeIdParent(y);
+          return f ? this.findForgeIdParent(f) === p : !1;
+        });
+      const g = this.dragScopeParent;
+      return d.filter((y) => this.findForgeIdParent(y) === g);
+    }
+    return d;
+  }
+  handleMouseMove = (e) => {
+    if (this.hoverSuppressed) {
+      this.removeHoverOverlay();
+      return;
+    }
+    if (this.isDragging) {
+      this.showDragRect(this.dragStartX, this.dragStartY, e.clientX, e.clientY);
+      const n = this.elementsInRect(this.dragStartX, this.dragStartY, e.clientX, e.clientY);
+      this.showDragHighlights(n), this.removeHoverOverlay();
+      return;
+    }
+    if (e.buttons === 1) {
+      const n = e.clientX - this.dragStartX, o = e.clientY - this.dragStartY;
+      if (Math.abs(n) > D.DRAG_THRESHOLD || Math.abs(o) > D.DRAG_THRESHOLD) {
+        this.isDragging = !0;
+        return;
+      }
+    }
+    const t = this.elementAtPoint(e.clientX, e.clientY);
+    if (t) {
+      const n = this.findTopmostWithSameForgeId(t);
+      this.showHoverOverlay(n, v.ANNOTATION_SINGLE, t);
+    } else
+      this.removeHoverOverlay();
+  };
+  static DRAG_THRESHOLD = 5;
+  handleMouseDown = (e) => {
+    this.dragStartX = e.clientX, this.dragStartY = e.clientY, this.isDragging = !1;
+    const t = this.elementAtPoint(e.clientX, e.clientY);
+    if (t) {
+      const n = this.findTopmostWithSameForgeId(t);
+      this.dragScopeParent = this.findForgeIdParent(n);
+    } else
+      this.dragScopeParent = null;
+    e.preventDefault();
+  };
+  handleMouseUp = (e) => {
+    if (this.isDragging) {
+      this.isDragging = !1;
+      const o = this.elementsInRect(this.dragStartX, this.dragStartY, e.clientX, e.clientY);
+      if (this.dragScopeParent = null, this.removeDragRect(), this.clearDragHighlights(), this.accumulationId && o.length > 0) {
+        for (const i of o)
+          this.accumulationElements.includes(i) || this.accumulationElements.push(i);
+        this.refreshAccumulationHighlights(), this.sendAccumulationUpdate();
+        return;
+      }
+      o.length > 0 && this.createAnnotationFromElements(o, "multi", e.clientX, e.clientY);
+      return;
+    }
+    const t = this.elementAtPoint(e.clientX, e.clientY);
+    if (!t) return;
+    const n = this.findTopmostWithSameForgeId(t);
+    if (this.accumulationId) {
+      const o = this.accumulationElements.indexOf(n);
+      o >= 0 ? this.accumulationElements.splice(o, 1) : this.accumulationElements.push(n), this.refreshAccumulationHighlights(), this.sendAccumulationUpdate();
+      return;
+    }
+    this.createAnnotationFromElements([n], "single", e.clientX, e.clientY);
+  };
+  handleClick = (e) => {
+    e.preventDefault(), e.stopPropagation();
+  };
+  handleKeyDown = (e) => {
+    if (e.key === "Escape") {
+      if (this.accumulationId) {
+        this.accumulationId = null, this.accumulationElements = [], this.clearAnnotationHighlights(), this.hoverSuppressed = !1;
+        return;
+      }
+      this.removeHoverOverlay(), this.removeDragRect(), this.isDragging = !1, this.dragScopeParent = null;
+    }
+  };
+  handleKeyUp = (e) => {
+  };
+  pendingAnnotations = /* @__PURE__ */ new Map();
+  confirmDot(e, t) {
+    const n = this.pendingAnnotations.get(e);
+    n && (this.createDot(n.dotX, n.dotY, n.mode, e, t, n.locators), this.pendingAnnotations.delete(e)), this.clearAnnotationHighlights(), this.hoverSuppressed = !1;
+  }
+  cancelPending(e) {
+    const t = this.pendingAnnotations.delete(e), n = this.accumulationId === e, o = this.activeHighlightDotId === e;
+    n && (this.accumulationId = null, this.accumulationElements = []), (t || n || o) && this.clearAnnotationHighlights(), this.hoverSuppressed = !1;
+  }
+  createAnnotationFromElements(e, t, n, o, i) {
+    const s = i || ae();
+    this.hoverSuppressed = !0, this.removeHoverOverlay();
+    const a = e.map((f) => this.elementToInfo(f)), l = a.map((f) => ({ xpath: b(f.xpath), forgeId: f.forgeId, forgeIdIndex: f.forgeIdIndex })), h = this.getAnchorRect(l), d = n - 2, m = o - M - 2, p = h && h.width > 0 && h.height > 0 ? { x: (d - h.left) / h.width, y: (m - h.top) / h.height } : { x: 0, y: 0 };
+    this.pendingAnnotations.set(s, { dotX: n, dotY: o, mode: t, locators: l }), this.clearDragHighlights(), this.highlightLocators(l, t === "multi");
+    const g = a[0], y = { id: s, dotX: n, dotY: o, anchorOffset: p, mode: t, elements: a, xpaths: a.map((f) => b(f.xpath)), elementTag: g.elementTag, componentName: g.componentName, componentPath: g.componentPath, forgeId: g.forgeId, sourcePos: g.sourcePos };
+    c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin: O });
+  }
+  handleDocumentLeave = () => {
+    this.removeHoverOverlay();
+  };
+  addListeners() {
+    this.hitTestOverlay && (this.hitTestOverlay.addEventListener("mousemove", this.handleMouseMove), this.hitTestOverlay.addEventListener("mousedown", this.handleMouseDown), this.hitTestOverlay.addEventListener("mouseup", this.handleMouseUp), this.hitTestOverlay.addEventListener("click", this.handleClick), document.addEventListener("keydown", this.handleKeyDown), document.addEventListener("keyup", this.handleKeyUp), document.addEventListener("mouseleave", this.handleDocumentLeave));
+  }
+  removeListeners() {
+    this.hitTestOverlay && (this.hitTestOverlay.removeEventListener("mousemove", this.handleMouseMove), this.hitTestOverlay.removeEventListener("mousedown", this.handleMouseDown), this.hitTestOverlay.removeEventListener("mouseup", this.handleMouseUp), this.hitTestOverlay.removeEventListener("click", this.handleClick)), document.removeEventListener("keydown", this.handleKeyDown), document.removeEventListener("keyup", this.handleKeyUp), document.removeEventListener("mouseleave", this.handleDocumentLeave);
+  }
+}
+class le {
+  messenger;
+  callbacks;
+  hitTestOverlay = null;
+  hoveredElement = null;
+  constructor(e, t) {
+    this.messenger = e, this.callbacks = t;
+  }
+  enableListeners() {
+    this.hitTestOverlay = ie(), this.hitTestOverlay.addEventListener("mousemove", this.handleMouseOver), this.hitTestOverlay.addEventListener("mouseout", this.handleMouseOut), this.hitTestOverlay.addEventListener("click", this.handleClick), document.addEventListener("scroll", this.handleScroll, !0);
+  }
+  disableListeners() {
+    this.hitTestOverlay && (this.hitTestOverlay.removeEventListener("mousemove", this.handleMouseOver), this.hitTestOverlay.removeEventListener("mouseout", this.handleMouseOut), this.hitTestOverlay.removeEventListener("click", this.handleClick)), document.removeEventListener("scroll", this.handleScroll, !0), se(), this.hitTestOverlay = null;
+  }
+  clearHover() {
+    this.hoveredElement = null, L();
+  }
+  findTopmostElementWithSameId(e) {
+    const t = e.getAttribute("data-forge-id");
+    if (!t) return e;
+    let n = e, o = e;
+    for (; n.parentElement; ) {
+      const i = n.parentElement;
+      if (i.getAttribute("data-forge-id") !== t) break;
+      o = i, n = i;
+    }
+    return o;
+  }
+  handleSelectModeClick(e) {
+    const t = b(H(e));
+    c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin: O }), this.messenger.send({ type: "SELECT_MODE_DISABLED", origin: O });
+  }
+  handleMouseOver = (e) => {
+    if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode() || this.callbacks.getHoverDisabled()) return;
+    this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "none");
+    const t = document.elementFromPoint(e.clientX, e.clientY);
+    if (this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), t && t !== document.body && t !== document.documentElement) {
+      const o = t.getAttribute("data-forge-id") ? this.findTopmostElementWithSameId(t) : t;
+      if (this.callbacks.getDesignMode() && o === this.callbacks.getSelectedDesignElement())
+        return;
+      this.hoveredElement = o, oe(o);
+    }
+  };
+  handleMouseOut = (e) => {
+    if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode()) return;
+    e.target === this.hoveredElement && (this.hoveredElement = null, L());
+  };
+  handleClick = (e) => {
+    if (!this.callbacks.getSelectMode() && !this.callbacks.getDesignMode()) return;
+    e.preventDefault(), e.stopPropagation(), this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "none");
+    const t = document.elementFromPoint(e.clientX, e.clientY);
+    this.hitTestOverlay && (this.hitTestOverlay.style.pointerEvents = "auto"), t && t !== document.body && t !== document.documentElement && (this.callbacks.getSelectMode() && this.callbacks.onSelectClick(t), this.callbacks.getDesignMode() && (L(), this.hoveredElement = null, this.callbacks.onDesignClick(t)));
+  };
+  handleScroll = () => {
+    (this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && (this.hoveredElement = null, L());
+  };
+}
+let w = null, _ = null, P = null;
+async function ce() {
+  if (w && _ && P) return;
+  const [r, e, t] = await Promise.all([import("@babel/parser"), import("@babel/traverse"), import("@babel/generator")]);
+  w = r.parse;
+  const n = e.default;
+  _ = typeof n == "function" ? n : n.default;
+  const o = t.default;
+  P = typeof o == "function" ? o : o.default;
+}
+function k(r) {
+  return typeof r == "boolean" ? { type: "JSXExpressionContainer", expression: { type: "BooleanLiteral", value: r, loc: null }, loc: null } : typeof r == "number" ? { type: "JSXExpressionContainer", expression: { type: "NumericLiteral", value: r, loc: null }, loc: null } : { type: "StringLiteral", value: String(r), loc: null };
+}
+function F(r, e, t) {
+  const n = r.node.attributes.find((o) => o.type === "JSXAttribute" && o.name.type === "JSXIdentifier" && o.name.name === e);
+  return n && n.type === "JSXAttribute" ? (n.value = k(t), !0) : (r.node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: e }, value: k(t), loc: null }), !0);
+}
+async function he(r, e, t, n, o) {
+  try {
+    if (await ce(), !w || !_ || !P) return r;
+    const i = w(r, { sourceType: "module", plugins: ["jsx", "typescript"] });
+    let s = !1;
+    const a = /* @__PURE__ */ new Map();
+    if (_(i, { JSXOpeningElement(l) {
+      if (l.node.name.type !== "JSXIdentifier") return;
+      const h = l.node.loc;
+      if (!h) return;
+      const d = `${h.start.line}:${h.start.column}`;
+      a.set(d, l);
+      const m = l.node.attributes.find((p) => p.type === "JSXAttribute" && p.name.type === "JSXIdentifier" && p.name.name === "data-forge-id" && p.value?.type === "StringLiteral");
+      m && m.type === "JSXAttribute" && m.value.value === e && (s = F(l, t, n));
+    } }), !s && o) {
+      const l = o.split(":");
+      if (l.length >= 5) {
+        const h = `${l[l.length - 4]}:${l[l.length - 3]}`, d = a.get(h);
+        d && (s = F(d, t, n));
+      }
+    }
+    if (s)
+      return P(i, {}, r).code;
+  } catch (i) {
+    c("client", "Failed to parse/update AST:", i);
+  }
+  return r;
+}
+async function de(r) {
+  try {
+    const e = await fetch(`/__forge-read-source?path=${r}`);
+    if (e.ok)
+      return await e.text();
+    c("client", `Failed to fetch source for ${r}: ${e.status}`);
+  } catch (e) {
+    c("client", "Failed to fetch source:", e);
+  }
+  return null;
+}
+async function ue(r, e) {
+  try {
+    return await fetch("/__forge-update-source", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ filePath: r, source: e }) }), !0;
+  } catch (t) {
+    return c("client", "Failed to write source:", t), !1;
+  }
+}
+class ge {
+  messenger;
+  componentRegistry;
+  selectController;
+  selectedElement = null;
+  sourceCache = /* @__PURE__ */ new Map();
+  constructor(e, t, n) {
+    this.messenger = e, this.componentRegistry = t, this.selectController = n;
+  }
+  getSelectedElement() {
+    return this.selectedElement;
+  }
+  clearSelection() {
+    this.selectedElement && (this.removeHighlight(this.selectedElement), this.selectedElement = null);
+  }
+  handleClick(e) {
+    const t = e.getAttribute("data-forge-id");
+    if (!t) {
+      c("client", "Clicked element has no data-forge-id");
+      return;
+    }
+    const n = this.selectController.findTopmostElementWithSameId(e), o = n.getAttribute("data-component"), i = n.getAttribute("data-source-pos"), s = o || n.tagName.toLowerCase();
+    this.clearSelection(), this.selectedElement = n, this.applyHighlight(n);
+    const a = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), h = b(H(n)), d = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, d);
+    c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: a, type: l, componentName: s, editableProps: d, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: a, elementType: l, xpath: h, componentName: s, editableProps: d, propValues: m, origin: O });
+  }
+  updateText(e, t) {
+    this.updateProperty(e, "children", t);
+  }
+  async updateProperty(e, t, n) {
+    const o = document.querySelector(`[data-forge-id="${e}"]`);
+    if (!o) {
+      c("client", `Element with forge ID ${e} not found`);
+      return;
+    }
+    const i = o.getAttribute("data-source-pos");
+    if (!i) {
+      c("client", `Element ${e} missing data-source-pos attribute`);
+      return;
+    }
+    const s = i.split(":");
+    if (s.length < 5) {
+      c("client", `Invalid data-source-pos format: ${i}`);
+      return;
+    }
+    const a = s.slice(0, -4).join(":");
+    c("client", `Updating property ${t} = ${n} for ${e} in ${a}`), this.sourceCache.delete(a);
+    const l = await de(a);
+    if (!l) return;
+    this.sourceCache.set(a, l);
+    const h = this.selectedElement?.getAttribute("data-source-pos") ?? null, d = await he(l, e, t, n, h);
+    d !== l ? (this.sourceCache.set(a, d), c("client", `Updated source for ${a}`), await ue(a, d) && (c("client", `Source written to disk and HMR triggered for ${a}`), this.messenger.send({ type: "SOURCE_UPDATED", forgeId: e, source: d, filePath: a, origin: O }))) : c("client", `No source changes detected for ${a}`);
+  }
+  applyHighlight(e) {
+    e.style.outline = `3px solid ${v.DESIGN_SELECTION_OUTLINE}`, e.style.outlineOffset = "2px";
+  }
+  removeHighlight(e) {
+    e.style.outline = "", e.style.outlineOffset = "";
+  }
+  extractPropValues(e, t) {
+    const n = this.getFiberFromElement(e);
+    if (!n) return {};
+    let o = n;
+    for (; o; ) {
+      if (o.memoizedProps && o.type && typeof o.type != "string") {
+        const i = o.memoizedProps, s = {};
+        for (const a of t) {
+          const l = a.name;
+          l === "children" ? s[l] = i.children || e.textContent?.trim() || "" : l in i && (s[l] = i[l]);
+        }
+        return c("client", "Extracted prop values:", s), s;
+      }
+      o = o.return;
+    }
+    return {};
+  }
+  getFiberFromElement(e) {
+    const t = Object.keys(e).find((n) => n.startsWith("__reactFiber") || n.startsWith("__reactInternalInstance"));
+    return t ? e[t] : null;
+  }
+}
+class I {
+  static instance = null;
+  messenger;
+  selectMode = !1;
+  designMode = !1;
+  hoverDisabled = !1;
+  componentRegistry;
+  annotationOverlay = null;
+  selectController;
+  designController;
+  onError;
+  constructor(e) {
+    this.onError = e?.onError, c("client", "ForgeClient initialized"), this.messenger = new G(), this.componentRegistry = new z(), this.selectController = new le(this.messenger, { getSelectMode: () => this.selectMode, getDesignMode: () => this.designMode, getHoverDisabled: () => this.hoverDisabled, getSelectedDesignElement: () => this.designController.getSelectedElement(), onSelectClick: (t) => this.handleSelectClick(t), onDesignClick: (t) => this.handleDesignClick(t) }), this.designController = new ge(this.messenger, this.componentRegistry, this.selectController), this.setupMessageListener(), this.sendReady(), this.setupForgeIdPropagation(), window.__forgeClient = this;
+  }
+  static getInstance(e) {
+    return I.instance || (I.instance = new I(e)), I.instance;
+  }
+  enableAnnotationMode(e) {
+    this.setAnnotationMode(e);
+  }
+  restoreAnnotations(e) {
+    this.annotationOverlay || (this.annotationOverlay = new D(this.messenger)), this.annotationOverlay.restoreDots(e);
+  }
+  setupMessageListener() {
+    c("client", "Setting up message listener..."), this.messenger.onMessage((e) => {
+      if (W(e.data) || !e.data || typeof e.data != "object" || !("origin" in e.data)) return;
+      const t = e.data;
+      if (t.origin === V) {
+        c("client", "Received message from host:", t);
+        try {
+          switch (t.type) {
+            case "ENABLE_SELECT_MODE":
+              this.setSelectMode(t.enabled);
+              break;
+            case "ENABLE_DESIGN_MODE":
+              this.setDesignMode(t.enabled);
+              break;
+            case "UPDATE_TEXT":
+              this.designController.updateText(t.forgeId, t.text);
+              break;
+            case "UPDATE_PROPERTY":
+              this.designController.updateProperty(t.forgeId, t.propName, t.value);
+              break;
+            case "ENABLE_ANNOTATION_MODE":
+              this.setAnnotationMode(t.enabled);
+              break;
+            case "ANNOTATION_DELETED":
+              this.annotationOverlay?.cancelPending(t.annotationId), this.annotationOverlay?.removeDot(t.annotationId);
+              break;
+            case "ANNOTATION_KEEP":
+              this.annotationOverlay?.confirmDot(t.annotationId, t.order);
+              break;
+            case "SELECT_ANNOTATION":
+              this.annotationOverlay?.selectDot(t.annotationId);
+              break;
+            case "ENTER_ACCUMULATION":
+              this.annotationOverlay && this.annotationOverlay.enterAccumulation(t.annotationId, t.elements);
+              break;
+            case "EXIT_ACCUMULATION":
+              this.annotationOverlay?.exitAccumulation();
+              break;
+            case "ANNOTATION_UPDATE_ORDERS":
+              this.annotationOverlay?.updateOrders(t.orders);
+              break;
+            case "DESELECT_ELEMENT":
+              this.designController.clearSelection();
+              break;
+            case "TOGGLE_MARKERS":
+              this.annotationOverlay?.toggleMarkers();
+              break;
+            case "RESTORE_ANNOTATIONS":
+              this.annotationOverlay || (this.annotationOverlay = new D(this.messenger)), this.annotationOverlay.restoreDots(t.annotations);
+              break;
+            case "PING":
+              c("client", "Received PING");
+              break;
+          }
+        } catch (n) {
+          c("client", "Error handling message:", t.type, n), this.onError?.(n instanceof Error ? n : new Error(String(n)));
+        }
+      }
+    });
+  }
+  setSelectMode(e) {
+    this.selectMode !== e && (c("client", `Setting select mode to: ${e}`), this.selectMode = e, e ? (this.selectController.enableListeners(), document.body.style.cursor = "crosshair") : (this.selectController.disableListeners(), document.body.style.cursor = "", this.selectController.clearHover()));
+  }
+  setDesignMode(e) {
+    this.designMode !== e && (c("client", `Setting design mode to: ${e}`), this.designMode = e, e ? (this.selectController.enableListeners(), this.hoverDisabled = !1, document.body.style.cursor = "crosshair") : (this.selectController.disableListeners(), this.hoverDisabled = !1, document.body.style.cursor = "", this.selectController.clearHover()));
+  }
+  setAnnotationMode(e) {
+    e ? (this.annotationOverlay || (this.annotationOverlay = new D(this.messenger)), this.setSelectMode(!1), this.setDesignMode(!1), this.annotationOverlay.activate()) : this.annotationOverlay?.deactivate();
+  }
+  handleSelectClick(e) {
+    this.selectController.handleSelectModeClick(e), this.setSelectMode(!1);
+  }
+  handleDesignClick(e) {
+    this.designController.handleClick(e), this.setDesignMode(!1);
+  }
+  sendReady() {
+    c("client", "Scheduling CHILD_READY message..."), setTimeout(() => {
+      c("client", "Sending CHILD_READY message to parent"), this.messenger.send({ type: "CHILD_READY", origin: O });
+    }, j.CHILD_READY_DELAY);
+  }
+  setupForgeIdPropagation() {
+    const e = () => {
+      document.querySelectorAll("*").forEach((n) => {
+        const o = this.getFiberFromElement(n);
+        o && this.propagateForgeIdFromFiber(o, n);
+      });
+    };
+    document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", e) : e(), new MutationObserver(() => e()).observe(document.body, { childList: !0, subtree: !0 });
+  }
+  getFiberFromElement(e) {
+    const t = Object.keys(e).find((n) => n.startsWith("__reactFiber") || n.startsWith("__reactInternalInstance"));
+    return t ? e[t] : null;
+  }
+  propagateForgeIdFromFiber(e, t) {
+    let n = e;
+    for (; n; ) {
+      if (n.memoizedProps) {
+        const o = n.memoizedProps["data-forge-id"], i = n.memoizedProps["data-component"], s = n.memoizedProps["data-source-pos"];
+        if (o && !t.getAttribute("data-forge-id")) {
+          t.setAttribute("data-forge-id", o), i && t.setAttribute("data-component", i), s && t.setAttribute("data-source-pos", s);
+          break;
+        }
+      }
+      n = n.return;
+    }
+  }
+}
+I.getInstance();
+export {
+  I as ForgeClient,
+  G as ParentMessenger
+};