@supernovaio/prototyping-tooling 0.9.0

package/dist/client.js

@@ -0,0 +1,836 @@
+import { b as F, c as $, R as X, d as Y, Z as S, C as f, B as L, e as G, M as C, P as B, i as W, a as V, T as j } from "./constants-BXKWBfHg.js";
+import { d as c } from "./debug-CLzmqn3R.js";
+import { parse as U } from "@babel/parser";
+import x from "@babel/traverse";
+import _ from "@babel/generator";
+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 w(a) {
+  if (a.id)
+    return `//*[@id="${a.id}"]`;
+  const e = [];
+  let t = a;
+  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.join("/");
+}
+const d = { 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 O = null;
+function D(a) {
+  const e = (t) => t.some((n) => n.startsWith("__reactFiber$") || n.startsWith("__reactInternalInstance$") || n.startsWith("__reactProps$"));
+  return e(Object.keys(a)) || e(Object.getOwnPropertyNames(a));
+}
+function q() {
+  if (O !== null) return O;
+  if (typeof document > "u") return !1;
+  if (document.body && D(document.body))
+    return c("client", "Detected React on document.body"), O = !0, !0;
+  for (const e of X) {
+    const t = document.querySelector(e);
+    if (t) {
+      if (D(t))
+        return c("client", "Detected React on", e), O = !0, !0;
+      for (const n of t.children)
+        if (D(n))
+          return c("client", "Detected React on child of", e), O = !0, !0;
+    }
+  }
+  if (document.body) {
+    for (const e of document.body.children)
+      if (D(e))
+        return c("client", "Detected React on body child:", e.tagName), O = !0, !0;
+  }
+  const a = document.querySelectorAll("*");
+  for (const e of a) {
+    if (D(e))
+      return c("client", "Detected React on deep scan:", e.tagName), O = !0, !0;
+    if (a.length > Y) break;
+  }
+  return c("client", "React NOT detected on page"), O = !1, !1;
+}
+function Z(a) {
+  const e = Object.keys(a);
+  let t = e.find((s) => s.startsWith("__reactFiber$"));
+  if (t) return a[t] || null;
+  let n = e.find((s) => s.startsWith("__reactInternalInstance$"));
+  if (n) return a[n] || null;
+  const o = Object.getOwnPropertyNames(a);
+  if (t = o.find((s) => s.startsWith("__reactFiber$")), t) return a[t] || null;
+  if (n = o.find((s) => s.startsWith("__reactInternalInstance$")), n) return a[n] || null;
+  const i = o.find((s) => {
+    if (!s.startsWith("__react")) return !1;
+    const r = a[s];
+    return r && typeof r == "object" && ("return" in r || "tag" in r);
+  });
+  return i && a[i] || null;
+}
+function T(a) {
+  return a ? a.displayName ? a.displayName : a.name ? a.name : null : null;
+}
+function Q(a) {
+  const { tag: e, type: t, elementType: n } = a;
+  if ((/* @__PURE__ */ new Set([d.HostComponent, d.HostText, d.HostHoistable, d.HostSingleton, d.Fragment, d.Mode, d.Profiler, d.DehydratedFragment, d.HostRoot, d.HostPortal, d.ScopeComponent, d.OffscreenComponent, d.LegacyHiddenComponent, d.CacheComponent, d.TracingMarkerComponent, d.Throw, d.ViewTransitionComponent, d.ActivityComponent, d.SuspenseComponent, d.SuspenseListComponent])).has(e)) return null;
+  if (e === d.ForwardRef) {
+    const i = n;
+    if (i?.render) {
+      const s = T(i.render);
+      if (s) return s;
+    }
+    return i?.displayName ? i.displayName : T(t);
+  }
+  if (e === d.MemoComponent || e === d.SimpleMemoComponent) {
+    const i = n;
+    if (i?.type) {
+      const s = T(i.type);
+      if (s) return s;
+    }
+    return i?.displayName ? i.displayName : T(t);
+  }
+  if (e === d.ContextProvider) {
+    const i = t;
+    return i?._context?.displayName ? `${i._context.displayName}.Provider` : null;
+  }
+  if (e === d.ContextConsumer) {
+    const i = t;
+    return i?.displayName ? `${i.displayName}.Consumer` : null;
+  }
+  if (e === d.LazyComponent) {
+    const i = n;
+    return i?._status === 1 && i._result ? T(i._result) : null;
+  }
+  return e === d.IncompleteClassComponent || e === d.IncompleteFunctionComponent || e === d.FunctionComponent || e === d.ClassComponent || e === d.IndeterminateComponent ? T(t) : null;
+}
+function ee(a) {
+  return a.length <= 2 || a.length <= 3 && a === a.toLowerCase();
+}
+function te(a) {
+  return !(K.has(a) || J.some((e) => e.test(a)));
+}
+function ne(a, e = F, t = $) {
+  if (!q())
+    return c("client", "isReactPage() = false"), { path: null, components: [] };
+  const n = [];
+  try {
+    let i = Z(a), s = 0;
+    for (; i && s < t && n.length < e; ) {
+      const r = Q(i);
+      r && !ee(r) && te(r) && n.push(r), 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 I = null, E = null;
+function N(a, e, t, n = "solid") {
+  const o = document.createElement("div");
+  return Object.assign(o.style, { position: "fixed", left: `${a.left}px`, top: `${a.top}px`, width: `${a.width}px`, height: `${a.height}px`, border: `1px ${n} ${e}`, backgroundColor: t, pointerEvents: "none", zIndex: S.HOVER_OVERLAY, borderRadius: "2px" }), o;
+}
+function oe(a) {
+  M();
+  const e = a.getBoundingClientRect();
+  I = N(e, f.SELECT_OVERLAY_BORDER, f.SELECT_OVERLAY_BG), I.className = "forge-overlay", document.body.appendChild(I);
+}
+function M() {
+  I && (I.remove(), I = 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: S.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 R {
+  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;
+  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 = "");
+  }
+  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: 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, r = o.top + i.ry * o.height;
+        this.createDotAtPosition(s, r, 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.activeHighlightDotId) {
+      const e = this.dots.get(this.activeHighlightDotId);
+      e && this.highlightAnnotationElements(e);
+    }
+  };
+  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: S.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);
+    const o = e.getBoundingClientRect(), i = t === f.ANNOTATION_MULTI ? f.ANNOTATION_MULTI_BG : f.ANNOTATION_SINGLE_BG;
+    this.hoverOverlay = N(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.removeComponentTooltip();
+  }
+  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) {
+    const n = [];
+    for (const o of e) {
+      const i = this.resolveLocator(o);
+      if (i) {
+        const s = i.getBoundingClientRect();
+        n.push(s);
+        const r = N(s, f.ANNOTATION_SINGLE, f.ANNOTATION_SINGLE_BG, "solid");
+        r.className = "forge-annotation-highlight", document.body.appendChild(r), this.annotationHighlights.push(r);
+      }
+    }
+    if (t && n.length > 1) {
+      const o = Math.min(...n.map((h) => h.left)), i = Math.min(...n.map((h) => h.top)), s = Math.max(...n.map((h) => h.right)), r = Math.max(...n.map((h) => h.bottom)), l = new DOMRect(o, i, s - o, r - i), u = N(l, f.ANNOTATION_SINGLE, "transparent", "dashed");
+      u.className = "forge-annotation-bounding-rect", document.body.appendChild(u), this.annotationHighlights.push(u);
+    }
+  }
+  clearAnnotationHighlights() {
+    if (this.activeHighlightDotId) {
+      const e = this.dots.get(this.activeHighlightDotId);
+      e && this.applyDefaultStyle(e);
+    }
+    for (const e of this.annotationHighlights) e.remove();
+    this.annotationHighlights = [], this.activeHighlightDotId = null;
+  }
+  getAnchorRect(e) {
+    let t = 1 / 0, n = 1 / 0, o = -1 / 0, i = -1 / 0, s = !1;
+    for (const r of e) {
+      const l = this.resolveLocator(r);
+      if (l) {
+        const u = l.getBoundingClientRect();
+        t = Math.min(t, u.left), n = Math.min(n, u.top), o = Math.max(o, u.right), i = Math.max(i, u.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 r = o.getAttribute("data-component");
+      r && !n.has(r) && (n.add(r), t.push(r)), o = o.parentElement;
+    }
+    const i = ne(e), s = [...t];
+    if (i.components.length > 0)
+      for (const r of i.components)
+        n.has(r) || (n.add(r), s.push(r));
+    return s.length === 0 ? null : s.reverse().map((r) => `<${r}>`).join("  ");
+  }
+  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: S.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, o.className = "forge-annotation-component-tooltip", document.body.appendChild(o);
+    const i = o.getBoundingClientRect();
+    let s = t.left + t.width / 2 - i.width / 2, r = t.top - i.height - 6;
+    s < 4 && (s = 4), s + i.width > window.innerWidth - 4 && (s = window.innerWidth - i.width - 4), r < 4 && (r = t.bottom + 6), o.style.left = `${s}px`, o.style.top = `${r}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 ${f.ANNOTATION_MULTI}`, backgroundColor: f.DRAG_RECT_BG, pointerEvents: "none", zIndex: S.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 = N(n, f.ANNOTATION_MULTI, f.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 r = this.getAnchorRect(s), l = e - 2, u = t - L - 2, h = r && r.width > 0 && r.height > 0 ? { rx: (l - r.left) / r.width, ry: (u - r.top) / r.height } : { rx: 0, ry: 0 };
+    this.createDotAtPosition(l, u, n, o, i, s, h);
+  }
+  createDotAtPosition(e, t, n, o, i, s, r) {
+    const l = document.createElement("div");
+    Object.assign(l.style, { position: "fixed", left: `${e}px`, top: `${t}px`, minWidth: `${G}px`, height: `${L}px`, borderRadius: "50% 50% 50% 0", backgroundColor: "#FFFFFF", border: "1px solid #1A58D0", cursor: "pointer", zIndex: S.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(), this.hoverSuppressed = !0;
+    }), l.addEventListener("mouseleave", () => {
+      l.style.transform = "scale(1)";
+    }), l.addEventListener("click", (u) => {
+      u.stopPropagation(), u.preventDefault(), this.hoverSuppressed = !0, this.removeHoverOverlay();
+      const h = this.dots.get(o);
+      h && this.highlightAnnotationElements(h);
+      const m = l.getBoundingClientRect();
+      this.messenger.send({ type: "ANNOTATION_DOT_CLICKED", annotationId: o, dotX: m.left, dotY: m.bottom, origin: C });
+    }), document.body.appendChild(l), this.dots.set(o, { id: o, element: l, mode: n, order: i, locators: s, anchorRatio: r });
+  }
+  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), r = Math.max(e, n), l = Math.max(t, o), u = document.querySelectorAll("[data-forge-id]"), h = [], m = /* @__PURE__ */ new Set();
+    if (u.forEach((p) => {
+      const y = p, g = y.getAttribute("data-forge-id");
+      if (!g || m.has(g) || y instanceof SVGElement && y.tagName.toLowerCase() !== "svg" || y.closest?.("svg") && y.tagName.toLowerCase() !== "svg") return;
+      const v = this.findTopmostWithSameForgeId(y);
+      if (m.has(v.getAttribute("data-forge-id") || "")) return;
+      const b = v.getBoundingClientRect();
+      b.right >= i && b.left <= r && b.bottom >= s && b.top <= l && (m.add(g), h.push(v));
+    }), this.dragScopeParent) {
+      const p = this.findForgeIdParent(this.dragScopeParent);
+      if (p)
+        return h.filter((g) => {
+          const v = this.findForgeIdParent(g);
+          return v ? this.findForgeIdParent(v) === p : !1;
+        });
+      const y = this.dragScopeParent;
+      return h.filter((g) => this.findForgeIdParent(g) === y);
+    }
+    return h;
+  }
+  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) > R.DRAG_THRESHOLD || Math.abs(o) > R.DRAG_THRESHOLD) {
+        this.isDragging = !0;
+        return;
+      }
+    }
+    const t = this.elementAtPoint(e.clientX, e.clientY);
+    if (t) {
+      const n = this.findTopmostWithSameForgeId(t);
+      this.showHoverOverlay(n, f.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);
+      this.dragScopeParent = null, this.removeDragRect(), 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);
+    this.createAnnotationFromElements([n], "single", e.clientX, e.clientY);
+  };
+  handleClick = (e) => {
+    e.preventDefault(), e.stopPropagation();
+  };
+  handleKeyDown = (e) => {
+    e.key === "Escape" && (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) {
+    this.pendingAnnotations.delete(e), this.clearAnnotationHighlights(), this.hoverSuppressed = !1;
+  }
+  createAnnotationFromElements(e, t, n, o) {
+    const i = ae();
+    this.hoverSuppressed = !0, this.removeHoverOverlay();
+    const s = e.map((g) => {
+      const v = g.getAttribute("data-forge-id") || void 0;
+      let b;
+      if (v) {
+        const P = document.querySelectorAll(`[data-forge-id="${v}"]`);
+        P.length > 1 && (b = Array.from(P).indexOf(g));
+      }
+      return { elementTag: g.tagName.toLowerCase(), xpath: w(g), componentName: g.getAttribute("data-component") || void 0, componentPath: this.getComponentPath(g) || void 0, forgeId: v, forgeIdIndex: b, sourcePos: g.getAttribute("data-source-pos") || void 0 };
+    }), r = s.map((g) => ({ xpath: g.xpath, forgeId: g.forgeId, forgeIdIndex: g.forgeIdIndex })), l = this.getAnchorRect(r), u = n - 2, h = o - L - 2, m = l && l.width > 0 && l.height > 0 ? { x: (u - l.left) / l.width, y: (h - l.top) / l.height } : { x: 0, y: 0 };
+    this.pendingAnnotations.set(i, { dotX: n, dotY: o, mode: t, locators: r }), this.clearDragHighlights(), this.highlightLocators(r, t === "multi");
+    const p = s[0], y = { id: i, dotX: n, dotY: o, anchorOffset: m, mode: t, elements: s, xpaths: s.map((g) => g.xpath), elementTag: p.elementTag, componentName: p.componentName, componentPath: p.componentPath, forgeId: p.forgeId, sourcePos: p.sourcePos };
+    c("annotation", "Annotation created (pending):", y), this.messenger.send({ type: "ANNOTATION_CREATED", annotation: y, origin: C });
+  }
+  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, M();
+  }
+  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 = w(e);
+    c("client", "Element clicked, XPath:", t), this.messenger.send({ type: "XPATH_REPORT", xpath: t, origin: C }), this.messenger.send({ type: "SELECT_MODE_DISABLED", origin: C });
+  }
+  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, M());
+  };
+  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() && (M(), this.hoveredElement = null, this.callbacks.onDesignClick(t)));
+  };
+  handleScroll = () => {
+    (this.callbacks.getSelectMode() || this.callbacks.getDesignMode()) && (this.hoveredElement = null, M());
+  };
+}
+const ce = typeof x == "function" ? x : x.default, he = typeof _ == "function" ? _ : _.default;
+function H(a) {
+  return typeof a == "boolean" ? { type: "JSXExpressionContainer", expression: { type: "BooleanLiteral", value: a, loc: null }, loc: null } : typeof a == "number" ? { type: "JSXExpressionContainer", expression: { type: "NumericLiteral", value: a, loc: null }, loc: null } : { type: "StringLiteral", value: String(a), loc: null };
+}
+function k(a, e, t) {
+  const n = a.node.attributes.find((o) => o.type === "JSXAttribute" && o.name.type === "JSXIdentifier" && o.name.name === e);
+  return n && n.type === "JSXAttribute" ? (n.value = H(t), !0) : (a.node.attributes.push({ type: "JSXAttribute", name: { type: "JSXIdentifier", name: e }, value: H(t), loc: null }), !0);
+}
+function de(a, e, t, n, o) {
+  try {
+    const i = U(a, { sourceType: "module", plugins: ["jsx", "typescript"] });
+    let s = !1;
+    const r = /* @__PURE__ */ new Map();
+    if (ce(i, { JSXOpeningElement(l) {
+      if (l.node.name.type !== "JSXIdentifier") return;
+      const u = l.node.loc;
+      if (!u) return;
+      const h = `${u.start.line}:${u.start.column}`;
+      r.set(h, 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 = k(l, t, n));
+    } }), !s && o) {
+      const l = o.split(":");
+      if (l.length >= 5) {
+        const u = `${l[l.length - 4]}:${l[l.length - 3]}`, h = r.get(u);
+        h && (s = k(h, t, n));
+      }
+    }
+    if (s)
+      return he(i, {}, a).code;
+  } catch (i) {
+    c("client", "Failed to parse/update AST:", i);
+  }
+  return a;
+}
+async function ue(a) {
+  try {
+    const e = await fetch(`/__forge-read-source?path=${a}`);
+    if (e.ok)
+      return await e.text();
+    c("client", `Failed to fetch source for ${a}: ${e.status}`);
+  } catch (e) {
+    c("client", "Failed to fetch source:", e);
+  }
+  return null;
+}
+async function ge(a, e) {
+  try {
+    return await fetch("/__forge-update-source", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ filePath: a, source: e }) }), !0;
+  } catch (t) {
+    return c("client", "Failed to write source:", t), !1;
+  }
+}
+class me {
+  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 r = n.textContent?.trim() || "", l = n.tagName.toLowerCase(), u = w(n), h = this.componentRegistry.getEditableProps(s), m = this.extractPropValues(n, h);
+    c("client", "Element selected in design mode:", { forgeId: t, sourcePos: i, text: r, type: l, componentName: s, editableProps: h, propValues: m }), this.messenger.send({ type: "ELEMENT_SELECTED", forgeId: t, sourcePos: i || void 0, text: r, elementType: l, xpath: u, componentName: s, editableProps: h, propValues: m, origin: C });
+  }
+  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 r = s.slice(0, -4).join(":");
+    c("client", `Updating property ${t} = ${n} for ${e} in ${r}`), this.sourceCache.delete(r);
+    const l = await ue(r);
+    if (!l) return;
+    this.sourceCache.set(r, l);
+    const u = this.selectedElement?.getAttribute("data-source-pos") ?? null, h = de(l, e, t, n, u);
+    h !== l ? (this.sourceCache.set(r, h), c("client", `Updated source for ${r}`), await ge(r, h) && (c("client", `Source written to disk and HMR triggered for ${r}`), this.messenger.send({ type: "SOURCE_UPDATED", forgeId: e, source: h, filePath: r, origin: C }))) : c("client", `No source changes detected for ${r}`);
+  }
+  applyHighlight(e) {
+    e.style.outline = `3px solid ${f.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 r of t) {
+          const l = r.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 A {
+  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 B(), 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 me(this.messenger, this.componentRegistry, this.selectController), this.setupMessageListener(), this.sendReady(), this.setupForgeIdPropagation(), window.__forgeClient = this;
+  }
+  static getInstance(e) {
+    return A.instance || (A.instance = new A(e)), A.instance;
+  }
+  enableAnnotationMode(e) {
+    this.setAnnotationMode(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 "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 R(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 R(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: C });
+    }, 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;
+    }
+  }
+}
+A.getInstance();
+export {
+  A as ForgeClient,
+  B as ParentMessenger
+};