@vibexdotnew/inspector 0.0.1

package/dist/next/index.cjs

@@ -0,0 +1,929 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/next/index.ts
+var next_exports = {};
+__export(next_exports, {
+  Observer: () => Observer,
+  VisualInspector: () => VisualInspector,
+  loaderPath: () => loaderPath,
+  withInspector: () => withInspector
+});
+module.exports = __toCommonJS(next_exports);
+
+// src/next/components/VisualInspector.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CHANNEL = "VIBEX_INSPECTOR";
+var STORAGE_KEY = "vibex_inspector_active";
+var SELECTED_KEY = "vibex_selected_element";
+var DATA_ATTR = "data-vibex-loc";
+var OVERLAY_PADDING = 4;
+var MAX_SELECTIONS = 5;
+var isEmbedded = () => {
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+};
+var emit = /* @__PURE__ */ (() => {
+  let lastPayload = "";
+  return (msg) => {
+    const json = JSON.stringify(msg);
+    if (json === lastPayload) return;
+    lastPayload = json;
+    window.parent.postMessage(msg, "*");
+  };
+})();
+var padRect = (r) => ({
+  top: r.top - OVERLAY_PADDING,
+  left: r.left - OVERLAY_PADDING,
+  width: r.width + OVERLAY_PADDING * 2,
+  height: r.height + OVERLAY_PADDING * 2
+});
+var parseLocation = (id) => {
+  const parts = id.split(":");
+  if (parts.length < 3) return null;
+  const col = parseInt(parts.pop(), 10);
+  const line = parseInt(parts.pop(), 10);
+  const file = parts.join(":");
+  if (isNaN(line) || isNaN(col)) return null;
+  return { file, line, col };
+};
+var normalizeStyleValue = (prop, val) => {
+  if (prop === "backgroundColor" && (val === "rgba(0, 0, 0, 0)" || val === "transparent")) return "transparent";
+  if (prop === "backgroundImage" && val === "none") return "none";
+  if (prop === "textDecoration" && val.includes("none")) return "none";
+  if (prop === "fontStyle" && val === "normal") return "normal";
+  if (prop === "opacity" && val === "1") return "1";
+  if ((prop.includes("padding") || prop.includes("margin")) && (val === "0px" || val === "0")) return "0";
+  if (prop === "borderRadius" && val === "0px") return "0";
+  if (prop === "letterSpacing" && (val === "normal" || val === "0px")) return "normal";
+  if (prop === "gap" && (val === "normal" || val === "0px")) return "0";
+  return val;
+};
+var getComputedStyles = (el) => {
+  const cs = window.getComputedStyle(el);
+  const get = (p) => normalizeStyleValue(p, cs.getPropertyValue(p.replace(/([A-Z])/g, "-$1").toLowerCase()));
+  return {
+    fontSize: get("fontSize"),
+    color: get("color"),
+    fontWeight: get("fontWeight"),
+    fontFamily: get("fontFamily"),
+    fontStyle: get("fontStyle"),
+    textAlign: get("textAlign"),
+    textDecoration: get("textDecoration"),
+    lineHeight: get("lineHeight"),
+    letterSpacing: get("letterSpacing"),
+    backgroundColor: get("backgroundColor"),
+    backgroundImage: get("backgroundImage"),
+    borderRadius: get("borderRadius"),
+    opacity: get("opacity"),
+    padding: `${get("paddingTop")} ${get("paddingRight")} ${get("paddingBottom")} ${get("paddingLeft")}`,
+    margin: `${get("marginTop")} ${get("marginRight")} ${get("marginBottom")} ${get("marginLeft")}`,
+    display: get("display"),
+    flexDirection: get("flexDirection"),
+    alignItems: get("alignItems"),
+    justifyContent: get("justifyContent"),
+    gap: get("gap"),
+    width: get("width"),
+    height: get("height")
+  };
+};
+var canEditText = (el) => {
+  const tag = el.tagName.toLowerCase();
+  const editableTags = ["p", "h1", "h2", "h3", "h4", "h5", "h6", "span", "div", "li", "a", "button", "label", "td", "th"];
+  if (el.contentEditable === "true" || tag === "input" || tag === "textarea") return true;
+  if (!editableTags.includes(tag) || !el.textContent?.trim()) return false;
+  const hasDirectText = Array.from(el.childNodes).some((n) => n.nodeType === Node.TEXT_NODE && n.textContent?.trim());
+  return el.childElementCount === 0 || el.childElementCount <= 1 && hasDirectText;
+};
+var getDirectText = (el) => {
+  let txt = "";
+  for (const n of el.childNodes) {
+    if (n.nodeType === Node.TEXT_NODE) txt += n.textContent || "";
+  }
+  return txt;
+};
+var normalizeImgSrc = (src) => {
+  if (!src) return "";
+  try {
+    const url = new URL(src, location.origin);
+    if (url.pathname === "/_next/image") {
+      const real = url.searchParams.get("url");
+      if (real) return decodeURIComponent(real);
+    }
+    return url.href;
+  } catch {
+    return src;
+  }
+};
+var initialState = {
+  active: false,
+  hoveredId: null,
+  hoveredRect: null,
+  hoveredTag: null,
+  selectedElements: [],
+  isScrolling: false,
+  isResizing: false,
+  resizeHandle: null
+};
+function reducer(state, action) {
+  switch (action.type) {
+    case "SET_ACTIVE":
+      return { ...state, active: action.value };
+    case "SET_HOVER":
+      return { ...state, hoveredId: action.id, hoveredRect: action.rect, hoveredTag: action.tag };
+    case "ADD_SELECTED":
+      return { ...state, selectedElements: [...state.selectedElements, action.selected] };
+    case "REMOVE_SELECTED":
+      return { ...state, selectedElements: state.selectedElements.filter((sel) => sel.id !== action.elementId) };
+    case "CLEAR_SELECTIONS":
+      return { ...state, selectedElements: [] };
+    case "UPDATE_SELECTED_RECTS":
+      return {
+        ...state,
+        selectedElements: state.selectedElements.map((sel) => ({
+          ...sel,
+          rect: padRect(sel.element.getBoundingClientRect())
+        }))
+      };
+    case "SET_SCROLLING":
+      return { ...state, isScrolling: action.value };
+    case "SET_RESIZING":
+      return { ...state, isResizing: action.value, resizeHandle: action.handle };
+    case "CLEAR_HOVER":
+      return { ...state, hoveredId: null, hoveredRect: null, hoveredTag: null };
+    default:
+      return state;
+  }
+}
+function VisualInspector() {
+  const [state, dispatch] = (0, import_react.useReducer)(reducer, initialState, (init) => {
+    if (typeof window !== "undefined") {
+      const stored = localStorage.getItem(STORAGE_KEY);
+      return { ...init, active: stored === "true" };
+    }
+    return init;
+  });
+  const activeRef = (0, import_react.useRef)(state.active);
+  const selectedElRef = (0, import_react.useRef)(null);
+  const editingElRef = (0, import_react.useRef)(null);
+  const originalTextRef = (0, import_react.useRef)("");
+  const originalSrcRef = (0, import_react.useRef)("");
+  const appliedStylesRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const scrollTimeoutRef = (0, import_react.useRef)(null);
+  const resizeStartRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    activeRef.current = state.active;
+    localStorage.setItem(STORAGE_KEY, String(state.active));
+    emit({ channel: CHANNEL, event: "MODE_CHANGED", active: state.active });
+  }, [state.active]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    emit({ channel: CHANNEL, event: "READY" });
+    if (state.active) {
+      emit({ channel: CHANNEL, event: "MODE_CHANGED", active: true });
+    }
+  }, []);
+  const buildElementInfo = (0, import_react.useCallback)((el) => {
+    const id = el.getAttribute(DATA_ATTR) || "";
+    const tag = el.getAttribute("data-vibex-name") || el.tagName.toLowerCase();
+    const rect = padRect(el.getBoundingClientRect());
+    const editable = canEditText(el);
+    const styles = getComputedStyles(el);
+    const className = el.className || "";
+    const src = el.tagName.toLowerCase() === "img" ? el.src : void 0;
+    return { id, tag, rect, editable, styles, className, src };
+  }, []);
+  const handleSelect = (0, import_react.useCallback)((el, clickPos, currentSelections) => {
+    const info = buildElementInfo(el);
+    if (currentSelections.some((s) => s.id === info.id)) {
+      return;
+    }
+    if (currentSelections.length >= MAX_SELECTIONS) {
+      alert(`Selection limit reached! You can only select up to ${MAX_SELECTIONS} elements.`);
+      return;
+    }
+    selectedElRef.current = el;
+    const selected = {
+      id: info.id,
+      rect: info.rect,
+      tag: info.tag,
+      element: el
+    };
+    dispatch({ type: "ADD_SELECTED", selected });
+    dispatch({ type: "CLEAR_HOVER" });
+    const allSelected = [...currentSelections, selected];
+    const allInfos = allSelected.map((s) => buildElementInfo(s.element));
+    localStorage.setItem(SELECTED_KEY, JSON.stringify({ ids: allSelected.map((s) => s.id) }));
+    emit({ channel: CHANNEL, event: "SELECT", elements: allInfos, position: clickPos });
+    if (info.editable && el.contentEditable !== "true") {
+      originalTextRef.current = el.childElementCount > 0 ? getDirectText(el) : el.innerText;
+      el.contentEditable = "true";
+      editingElRef.current = el;
+      el.querySelectorAll("*").forEach((child) => {
+        child.contentEditable = "false";
+      });
+    }
+    if (el.tagName.toLowerCase() === "img") {
+      originalSrcRef.current = normalizeImgSrc(el.src);
+    }
+  }, [buildElementInfo]);
+  const cleanupEditing = (0, import_react.useCallback)(() => {
+    const el = editingElRef.current;
+    if (!el) return;
+    const id = el.getAttribute(DATA_ATTR);
+    if (!id) return;
+    const newText = el.childElementCount > 0 ? getDirectText(el) : el.innerText;
+    if (newText !== originalTextRef.current) {
+      const loc = parseLocation(id);
+      if (loc) {
+        emit({
+          channel: CHANNEL,
+          event: "TEXT_EDIT",
+          elementId: id,
+          before: originalTextRef.current,
+          after: newText,
+          source: loc
+        });
+      }
+    }
+    const styles = appliedStylesRef.current.get(id);
+    if (styles && Object.keys(styles).length > 0) {
+      const loc = parseLocation(id);
+      if (loc) {
+        emit({
+          channel: CHANNEL,
+          event: "STYLE_COMMIT",
+          elementId: id,
+          styles,
+          source: loc,
+          className: el.className || ""
+        });
+      }
+      appliedStylesRef.current.delete(id);
+    }
+    if (el.tagName.toLowerCase() === "img") {
+      const newSrc = normalizeImgSrc(el.src);
+      if (newSrc !== originalSrcRef.current && originalSrcRef.current) {
+        const loc = parseLocation(id);
+        if (loc) {
+          emit({
+            channel: CHANNEL,
+            event: "IMAGE_COMMIT",
+            elementId: id,
+            before: originalSrcRef.current,
+            after: newSrc,
+            source: loc
+          });
+        }
+      }
+    }
+    el.contentEditable = "false";
+    el.querySelectorAll('[contenteditable="false"]').forEach((child) => {
+      child.removeAttribute("contenteditable");
+    });
+    editingElRef.current = null;
+    originalTextRef.current = "";
+    originalSrcRef.current = "";
+  }, []);
+  const handleDeselect = (0, import_react.useCallback)(() => {
+    cleanupEditing();
+    selectedElRef.current = null;
+    dispatch({ type: "CLEAR_SELECTIONS" });
+    localStorage.removeItem(SELECTED_KEY);
+    emit({ channel: CHANNEL, event: "DESELECT" });
+  }, [cleanupEditing]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    const onPointerMove = (e) => {
+      if (!activeRef.current || state.isResizing || state.isScrolling) return;
+      const hit = document.elementFromPoint(e.clientX, e.clientY)?.closest(`[${DATA_ATTR}]`) ?? null;
+      if (!hit) {
+        if (state.hoveredId) {
+          dispatch({ type: "SET_HOVER", id: null, rect: null, tag: null });
+          emit({ channel: CHANNEL, event: "HOVER", element: null });
+        }
+        return;
+      }
+      const id = hit.getAttribute(DATA_ATTR);
+      const isSelected = state.selectedElements.some((s) => s.id === id);
+      if (id === state.hoveredId || isSelected) return;
+      const info = buildElementInfo(hit);
+      dispatch({ type: "SET_HOVER", id: info.id, rect: info.rect, tag: info.tag });
+      emit({ channel: CHANNEL, event: "HOVER", element: info });
+    };
+    const onPointerLeave = () => {
+      if (!activeRef.current) return;
+      dispatch({ type: "CLEAR_HOVER" });
+      emit({ channel: CHANNEL, event: "HOVER", element: null });
+    };
+    document.addEventListener("pointermove", onPointerMove);
+    document.addEventListener("pointerleave", onPointerLeave);
+    return () => {
+      document.removeEventListener("pointermove", onPointerMove);
+      document.removeEventListener("pointerleave", onPointerLeave);
+    };
+  }, [state.hoveredId, state.selectedElements, state.isResizing, state.isScrolling, buildElementInfo]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    const onClick = (e) => {
+      if (!activeRef.current) return;
+      const target = e.target;
+      const link = target.closest("a");
+      if (link && !link.isContentEditable) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+      const hit = target.closest(`[${DATA_ATTR}]`);
+      if (!hit) {
+        handleDeselect();
+        return;
+      }
+      const id = hit.getAttribute(DATA_ATTR);
+      const isAlreadySelected = state.selectedElements.some((s) => s.id === id);
+      if (isAlreadySelected) return;
+      cleanupEditing();
+      handleSelect(hit, { x: e.clientX, y: e.clientY }, state.selectedElements);
+    };
+    document.addEventListener("click", onClick, true);
+    return () => document.removeEventListener("click", onClick, true);
+  }, [state.selectedElements, handleSelect, handleDeselect, cleanupEditing]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    const onScroll = () => {
+      if (!activeRef.current) return;
+      if (!state.isScrolling) {
+        dispatch({ type: "SET_SCROLLING", value: true });
+        emit({ channel: CHANNEL, event: "SCROLL_START" });
+      }
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        dispatch({ type: "SET_SCROLLING", value: false });
+        emit({ channel: CHANNEL, event: "SCROLL_END" });
+        dispatch({ type: "UPDATE_SELECTED_RECTS" });
+      }, 150);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [state.isScrolling]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    const onMessage = (e) => {
+      const msg = e.data;
+      if (msg?.channel !== CHANNEL) return;
+      switch (msg.action) {
+        case "ACTIVATE":
+          dispatch({ type: "SET_ACTIVE", value: msg.value });
+          if (!msg.value) handleDeselect();
+          break;
+        case "SCROLL_BY":
+          window.scrollBy({ left: msg.dx, top: msg.dy, behavior: "auto" });
+          break;
+        case "APPLY_STYLES": {
+          const elements = document.querySelectorAll(`[${DATA_ATTR}="${msg.elementId}"]`);
+          elements.forEach((el) => {
+            Object.entries(msg.styles).forEach(([prop, val]) => {
+              const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+              el.style.setProperty(cssProp, val, "important");
+            });
+          });
+          const existing = appliedStylesRef.current.get(msg.elementId) || {};
+          appliedStylesRef.current.set(msg.elementId, { ...existing, ...msg.styles });
+          requestAnimationFrame(() => {
+            dispatch({ type: "UPDATE_SELECTED_RECTS" });
+          });
+          break;
+        }
+        case "APPLY_IMAGE": {
+          const img = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (img?.tagName.toLowerCase() === "img") {
+            img.removeAttribute("srcset");
+            img.src = msg.src;
+          }
+          break;
+        }
+        case "PREVIEW_FONT": {
+          const el = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (el) {
+            const fontKey = msg.font.replace(/[\s']+/g, "+");
+            const link = document.createElement("link");
+            link.rel = "stylesheet";
+            link.href = `https://fonts.googleapis.com/css2?family=${fontKey}:wght@400;500;600;700&display=swap`;
+            document.head.appendChild(link);
+            el.style.setProperty("font-family", msg.font, "important");
+          }
+          break;
+        }
+        case "CLEAR_STYLES": {
+          const el = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (el) {
+            el.removeAttribute("style");
+            appliedStylesRef.current.delete(msg.elementId);
+          }
+          break;
+        }
+        case "RESIZE": {
+          const el = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (el) {
+            el.style.setProperty("width", `${msg.width}px`, "important");
+            el.style.setProperty("height", `${msg.height}px`, "important");
+            const existing = appliedStylesRef.current.get(msg.elementId) || {};
+            appliedStylesRef.current.set(msg.elementId, {
+              ...existing,
+              width: `${msg.width}px`,
+              height: `${msg.height}px`
+            });
+            requestAnimationFrame(() => {
+              dispatch({ type: "UPDATE_SELECTED_RECTS" });
+            });
+          }
+          break;
+        }
+        case "HOVER_ELEMENT": {
+          if (!msg.elementId) {
+            dispatch({ type: "CLEAR_HOVER" });
+            return;
+          }
+          const el = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (el) {
+            const info = buildElementInfo(el);
+            dispatch({ type: "SET_HOVER", id: info.id, rect: info.rect, tag: info.tag });
+          }
+          break;
+        }
+        case "REMOVE_SELECTED": {
+          const removedElement = state.selectedElements.find((s) => s.id === msg.elementId);
+          if (removedElement?.element === editingElRef.current) {
+            cleanupEditing();
+          }
+          dispatch({ type: "REMOVE_SELECTED", elementId: msg.elementId });
+          const remaining = state.selectedElements.filter((s) => s.id !== msg.elementId);
+          if (remaining.length > 0) {
+            localStorage.setItem(SELECTED_KEY, JSON.stringify({ ids: remaining.map((s) => s.id) }));
+          } else {
+            localStorage.removeItem(SELECTED_KEY);
+          }
+          if (remaining.length > 0) {
+            const allInfos = remaining.map((s) => buildElementInfo(s.element));
+            emit({ channel: CHANNEL, event: "SELECT", elements: allInfos, position: { x: 0, y: 0 } });
+          } else {
+            emit({ channel: CHANNEL, event: "DESELECT" });
+          }
+          break;
+        }
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [handleDeselect, buildElementInfo, state.selectedElements, cleanupEditing]);
+  (0, import_react.useEffect)(() => {
+    if (!isEmbedded()) return;
+    const onKeyDown = (e) => {
+      if (!activeRef.current) return;
+      if (e.key === "Escape") {
+        if (editingElRef.current) {
+          editingElRef.current.blur();
+          cleanupEditing();
+        } else if (state.selectedElements.length > 0) {
+          handleDeselect();
+        }
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, [state.selectedElements, cleanupEditing, handleDeselect]);
+  const onResizeStart = (0, import_react.useCallback)((e, handle) => {
+    if (!selectedElRef.current) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const rect = selectedElRef.current.getBoundingClientRect();
+    resizeStartRef.current = { x: e.clientX, y: e.clientY, w: rect.width, h: rect.height };
+    dispatch({ type: "SET_RESIZING", value: true, handle });
+    dispatch({ type: "CLEAR_HOVER" });
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (!state.isResizing || !resizeStartRef.current || !state.resizeHandle) return;
+    const onMouseMove = (e) => {
+      if (!selectedElRef.current || !resizeStartRef.current) return;
+      const dx = e.clientX - resizeStartRef.current.x;
+      const dy = e.clientY - resizeStartRef.current.y;
+      const handle = state.resizeHandle;
+      let w = resizeStartRef.current.w;
+      let h = resizeStartRef.current.h;
+      if (handle.includes("e")) w += dx;
+      if (handle.includes("w")) w -= dx;
+      if (handle.includes("s")) h += dy;
+      if (handle.includes("n")) h -= dy;
+      w = Math.max(20, w);
+      h = Math.max(20, h);
+      selectedElRef.current.style.setProperty("width", `${w}px`, "important");
+      selectedElRef.current.style.setProperty("height", `${h}px`, "important");
+      dispatch({ type: "UPDATE_SELECTED_RECTS" });
+    };
+    const onMouseUp = () => {
+      if (selectedElRef.current) {
+        const id = selectedElRef.current.getAttribute(DATA_ATTR);
+        if (id) {
+          const cs = window.getComputedStyle(selectedElRef.current);
+          const loc = parseLocation(id);
+          if (loc) {
+            emit({
+              channel: CHANNEL,
+              event: "RESIZE_COMMIT",
+              elementId: id,
+              width: cs.width,
+              height: cs.height,
+              source: loc
+            });
+          }
+        }
+      }
+      dispatch({ type: "SET_RESIZING", value: false, handle: null });
+      resizeStartRef.current = null;
+    };
+    document.addEventListener("mousemove", onMouseMove);
+    document.addEventListener("mouseup", onMouseUp);
+    return () => {
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [state.isResizing, state.resizeHandle]);
+  (0, import_react.useEffect)(() => {
+    if (!state.active) return;
+    const preventSubmit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    document.addEventListener("submit", preventSubmit, true);
+    return () => document.removeEventListener("submit", preventSubmit, true);
+  }, [state.active]);
+  if (!state.active) return null;
+  const resizeHandles = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+  const getHandleStyle = (handle) => {
+    const base = {
+      position: "absolute",
+      width: 8,
+      height: 8,
+      background: "#3b82f6",
+      border: "1px solid white",
+      borderRadius: 2,
+      zIndex: 10002
+    };
+    const posMap = {
+      n: { top: -4, left: "50%", transform: "translateX(-50%)", cursor: "ns-resize" },
+      ne: { top: -4, right: -4, cursor: "nesw-resize" },
+      e: { top: "50%", right: -4, transform: "translateY(-50%)", cursor: "ew-resize" },
+      se: { bottom: -4, right: -4, cursor: "nwse-resize" },
+      s: { bottom: -4, left: "50%", transform: "translateX(-50%)", cursor: "ns-resize" },
+      sw: { bottom: -4, left: -4, cursor: "nesw-resize" },
+      w: { top: "50%", left: -4, transform: "translateY(-50%)", cursor: "ew-resize" },
+      nw: { top: -4, left: -4, cursor: "nwse-resize" }
+    };
+    return { ...base, ...posMap[handle] };
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    state.hoveredRect && !state.selectedElements.some((s) => s.id === state.hoveredId) && !state.isScrolling && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: state.hoveredRect.top,
+          left: state.hoveredRect.left,
+          width: state.hoveredRect.width,
+          height: state.hoveredRect.height,
+          border: "2px dashed #3b82f6",
+          background: "rgba(59, 130, 246, 0.08)",
+          pointerEvents: "none",
+          zIndex: 1e4,
+          borderRadius: 4
+        },
+        children: state.hoveredTag && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "span",
+          {
+            style: {
+              position: "absolute",
+              top: -22,
+              left: 0,
+              background: "#3b82f6",
+              color: "white",
+              fontSize: 11,
+              padding: "2px 6px",
+              borderRadius: 3,
+              fontFamily: "system-ui, sans-serif"
+            },
+            children: state.hoveredTag
+          }
+        )
+      }
+    ),
+    !state.isScrolling && state.selectedElements.map((selected, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "div",
+      {
+        style: {
+          position: "fixed",
+          top: selected.rect.top,
+          left: selected.rect.left,
+          width: selected.rect.width,
+          height: selected.rect.height,
+          border: "2px solid #3b82f6",
+          background: "rgba(59, 130, 246, 0.04)",
+          pointerEvents: "none",
+          zIndex: 10001 + index,
+          borderRadius: 4
+        },
+        children: [
+          selected.tag && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                top: -22,
+                left: 0,
+                background: "#3b82f6",
+                color: "white",
+                fontSize: 11,
+                padding: "2px 6px",
+                borderRadius: 3,
+                fontFamily: "system-ui, sans-serif",
+                fontWeight: 500
+              },
+              children: [
+                selected.tag,
+                " (",
+                index + 1,
+                "/",
+                state.selectedElements.length,
+                ")"
+              ]
+            }
+          ),
+          index === state.selectedElements.length - 1 && resizeHandles.map((handle) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: { ...getHandleStyle(handle), pointerEvents: "auto" },
+              onMouseDown: (e) => onResizeStart(e, handle)
+            },
+            handle
+          ))
+        ]
+      },
+      selected.id
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        [contenteditable="true"]:focus {
+          outline: none !important;
+        }
+        [contenteditable="true"]::selection {
+          background: rgba(59, 130, 246, 0.3);
+        }
+      ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+        nextjs-portal {
+          display: none !important;
+        }
+      ` })
+  ] });
+}
+
+// src/next/components/Observer.tsx
+var import_react2 = require("react");
+var import_navigation = require("next/navigation");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function Observer({
+  error,
+  reset,
+  trackNavigation = true,
+  appMeta
+}) {
+  const previousOverlayContent = (0, import_react2.useRef)("");
+  const monitorInterval = (0, import_react2.useRef)(void 0);
+  const isInitialNav = (0, import_react2.useRef)(true);
+  const pathname = (0, import_navigation.usePathname)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  if (!trackNavigation) return;
+  const isEmbedded2 = window.parent !== window;
+  (0, import_react2.useEffect)(() => {
+    console.log(
+      { pathname, searchParams, trackNavigation, appMeta, isEmbedded: isEmbedded2 }
+    );
+    if (!isEmbedded2) return;
+    const queryObj = {};
+    searchParams.forEach((val, key) => {
+      queryObj[key] = val;
+    });
+    const href = searchParams.toString() ? `${pathname}?${searchParams.toString()}` : pathname;
+    window.parent.postMessage(
+      {
+        type: "VIBEX_NAVIGATION",
+        route: {
+          path: pathname,
+          query: Object.keys(queryObj).length > 0 ? queryObj : null,
+          href
+        },
+        context: {
+          initial: isInitialNav.current,
+          timestamp: Date.now(),
+          ...appMeta
+        }
+      },
+      "*"
+    );
+    isInitialNav.current = false;
+  }, [pathname, searchParams, trackNavigation, appMeta]);
+  (0, import_react2.useEffect)(() => {
+    const isEmbedded3 = window.parent !== window;
+    if (!isEmbedded3) return;
+    const dispatch = (data) => window.parent.postMessage(data, "*");
+    const handleRuntimeError = (evt) => dispatch({
+      type: "VIBEX_EXCEPTION",
+      details: {
+        message: evt.message,
+        stack: evt.error?.stack,
+        file: evt.filename,
+        line: evt.lineno,
+        column: evt.colno,
+        origin: "runtime"
+      },
+      capturedAt: Date.now()
+    });
+    const handlePromiseError = (evt) => dispatch({
+      type: "VIBEX_EXCEPTION",
+      details: {
+        message: evt.reason?.message ?? String(evt.reason),
+        stack: evt.reason?.stack,
+        origin: "promise"
+      },
+      capturedAt: Date.now()
+    });
+    const checkDevOverlay = () => {
+      const overlayEl = document.querySelector("[data-nextjs-dialog-overlay]");
+      const contentEl = overlayEl?.querySelector(
+        "h1, h2, .error-message, [data-nextjs-dialog-body]"
+      ) ?? null;
+      const content = contentEl?.textContent ?? contentEl?.innerHTML ?? "";
+      if (content && content !== previousOverlayContent.current) {
+        previousOverlayContent.current = content;
+        dispatch({
+          type: "VIBEX_EXCEPTION",
+          details: { message: content, origin: "dev-overlay" },
+          capturedAt: Date.now()
+        });
+      }
+    };
+    window.addEventListener("error", handleRuntimeError);
+    window.addEventListener("unhandledrejection", handlePromiseError);
+    monitorInterval.current = setInterval(checkDevOverlay, 1e3);
+    return () => {
+      window.removeEventListener("error", handleRuntimeError);
+      window.removeEventListener("unhandledrejection", handlePromiseError);
+      monitorInterval.current && clearInterval(monitorInterval.current);
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (!error) return;
+    window.parent.postMessage(
+      {
+        type: "vibex-boundary-error",
+        details: {
+          message: error.message,
+          stack: error.stack,
+          digest: error.digest,
+          name: error.name
+        },
+        capturedAt: Date.now(),
+        client: navigator.userAgent
+      },
+      "*"
+    );
+  }, [error]);
+  if (!error) return null;
+  const requestAIFix = () => {
+    window.parent.postMessage(
+      {
+        type: "vibex-fix-with-ai",
+        details: {
+          message: error.message,
+          stack: error.stack,
+          digest: error.digest,
+          name: error.name
+        },
+        capturedAt: Date.now()
+      },
+      "*"
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("html", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("body", { className: "min-h-screen bg-background text-foreground flex items-end sm:items-center justify-center p-4 sm:p-8", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full max-w-lg", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex rounded-xl overflow-hidden border border-border shadow-sm", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "w-1.5 bg-destructive shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 p-5 sm:p-6 space-y-5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "space-y-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-xs font-medium tracking-wide text-muted-foreground uppercase", children: "Runtime Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("h1", { className: "text-lg font-medium leading-snug", children: error.name || "Error" })
+          ] }),
+          error.digest && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("code", { className: "text-[10px] px-2 py-1 rounded bg-muted text-muted-foreground font-mono shrink-0", children: error.digest })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm text-muted-foreground leading-relaxed", children: error.message }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-3 pt-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "button",
+            {
+              onClick: requestAIFix,
+              className: "inline-flex items-center gap-2 py-2 px-4 bg-primary text-primary-foreground text-sm font-medium rounded-md hover:bg-primary/90 transition-colors",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
+                "Fix with AI"
+              ]
+            }
+          ),
+          reset && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              onClick: reset,
+              className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+              children: "Retry"
+            }
+          )
+        ] }),
+        process.env.NODE_ENV === "development" && error.stack && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "pt-3 border-t border-border", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("pre", { className: "text-[11px] font-mono text-muted-foreground leading-relaxed overflow-x-auto whitespace-pre-wrap break-all", children: error.stack }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mt-4 text-center text-xs text-muted-foreground/60", children: "Vibex Inspector" })
+  ] }) }) });
+}
+
+// src/next/loader.ts
+var import_url = require("url");
+var import_path = require("path");
+var import_meta = {};
+var __filename = (0, import_url.fileURLToPath)(import_meta.url);
+var __dirname = (0, import_path.dirname)(__filename);
+var loaderPath = (0, import_path.join)(__dirname, "..", "..", "next", "element-tagger.js");
+
+// src/next/config.ts
+function withInspector(nextConfig = {}, options = {}) {
+  const {
+    extensions = ["jsx", "tsx"],
+    enableInProduction = false
+  } = options;
+  if (process.env.NODE_ENV === "production" && !enableInProduction) {
+    return nextConfig;
+  }
+  const extPattern = extensions.length === 1 ? extensions[0] : `{${extensions.join(",")}}`;
+  const filePattern = `*.${extPattern}`;
+  return {
+    ...nextConfig,
+    // Add Turbopack loader rules
+    turbopack: {
+      ...nextConfig.turbopack,
+      rules: {
+        ...nextConfig.turbopack?.rules,
+        [filePattern]: {
+          loaders: [loaderPath]
+        }
+      }
+    },
+    // Add Webpack loader rules (for non-Turbopack builds)
+    webpack: (config, context) => {
+      if (context.dev || enableInProduction) {
+        config.module.rules.push({
+          test: new RegExp(`\\.(${extensions.join("|")})$`),
+          exclude: /node_modules/,
+          use: [loaderPath]
+        });
+      }
+      if (typeof nextConfig.webpack === "function") {
+        return nextConfig.webpack(config, context);
+      }
+      return config;
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Observer,
+  VisualInspector,
+  loaderPath,
+  withInspector
+});
+//# sourceMappingURL=index.cjs.map