@vibexdotnew/inspector 0.0.1 → 0.0.3

package/dist/expo/index.js

@@ -0,0 +1,994 @@
+"use client";
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// src/expo/components/VisualInspector.tsx
+import { useEffect, useReducer, useRef, useCallback } from "react";
+import { View, Text, StyleSheet, Platform } from "react-native";
+import { jsx, jsxs } from "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 = () => {
+  if (Platform.OS !== "web" || typeof window === "undefined") return false;
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+};
+var emit = /* @__PURE__ */ (() => {
+  let lastPayload = "";
+  return (msg) => {
+    if (Platform.OS !== "web" || typeof window === "undefined") return;
+    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);
+    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 "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, dispatch2] = useReducer(reducer, initialState, (init) => {
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        return { ...init, active: stored === "true" };
+      } catch {
+        return init;
+      }
+    }
+    return init;
+  });
+  const activeRef = useRef(state.active);
+  const selectedElRef = useRef(null);
+  const editingElRef = useRef(null);
+  const originalTextRef = useRef("");
+  const originalSrcRef = useRef("");
+  const appliedStylesRef = useRef(/* @__PURE__ */ new Map());
+  const scrollTimeoutRef = useRef(null);
+  const resizeStartRef = useRef(null);
+  useEffect(() => {
+    activeRef.current = state.active;
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(STORAGE_KEY, String(state.active));
+      } catch {
+      }
+    }
+    emit({ channel: CHANNEL, event: "MODE_CHANGED", active: state.active });
+  }, [state.active]);
+  useEffect(() => {
+    if (!isEmbedded()) return;
+    emit({ channel: CHANNEL, event: "READY" });
+    if (state.active) {
+      emit({ channel: CHANNEL, event: "MODE_CHANGED", active: true });
+    }
+  }, []);
+  const buildElementInfo = 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 styles3 = getComputedStyles(el);
+    const className = el.className || "";
+    const src = el.tagName.toLowerCase() === "img" ? el.src : void 0;
+    return { id, tag, rect, editable, styles: styles3, className, src };
+  }, []);
+  const handleSelect = useCallback((el, clickPos, currentSelections) => {
+    const info = buildElementInfo(el);
+    if (currentSelections.some((s) => s.id === info.id)) {
+      return;
+    }
+    if (currentSelections.length >= MAX_SELECTIONS) {
+      return;
+    }
+    selectedElRef.current = el;
+    const selected = {
+      id: info.id,
+      rect: info.rect,
+      tag: info.tag,
+      element: el
+    };
+    dispatch2({ type: "ADD_SELECTED", selected });
+    dispatch2({ type: "CLEAR_HOVER" });
+    const allSelected = [...currentSelections, selected];
+    const allInfos = allSelected.map((s) => buildElementInfo(s.element));
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      try {
+        localStorage.setItem(SELECTED_KEY, JSON.stringify({ ids: allSelected.map((s) => s.id) }));
+      } catch {
+      }
+    }
+    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 = 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 styles3 = appliedStylesRef.current.get(id);
+    if (styles3 && Object.keys(styles3).length > 0) {
+      const loc = parseLocation(id);
+      if (loc) {
+        emit({
+          channel: CHANNEL,
+          event: "STYLE_COMMIT",
+          elementId: id,
+          styles: styles3,
+          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 = useCallback(() => {
+    cleanupEditing();
+    selectedElRef.current = null;
+    dispatch2({ type: "CLEAR_SELECTIONS" });
+    if (Platform.OS === "web" && typeof window !== "undefined") {
+      try {
+        localStorage.removeItem(SELECTED_KEY);
+      } catch {
+      }
+    }
+    emit({ channel: CHANNEL, event: "DESELECT" });
+  }, [cleanupEditing]);
+  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) {
+          dispatch2({ 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);
+      dispatch2({ 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;
+      dispatch2({ 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]);
+  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]);
+  useEffect(() => {
+    if (!isEmbedded()) return;
+    const onScroll = () => {
+      if (!activeRef.current) return;
+      if (!state.isScrolling) {
+        dispatch2({ type: "SET_SCROLLING", value: true });
+        emit({ channel: CHANNEL, event: "SCROLL_START" });
+      }
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      scrollTimeoutRef.current = window.setTimeout(() => {
+        dispatch2({ type: "SET_SCROLLING", value: false });
+        emit({ channel: CHANNEL, event: "SCROLL_END" });
+        dispatch2({ type: "UPDATE_SELECTED_RECTS" });
+      }, 150);
+    };
+    window.addEventListener("scroll", onScroll, true);
+    return () => window.removeEventListener("scroll", onScroll, true);
+  }, [state.isScrolling]);
+  useEffect(() => {
+    if (!isEmbedded()) return;
+    const onMessage = (e) => {
+      const msg = e.data;
+      if (msg?.channel !== CHANNEL) return;
+      switch (msg.action) {
+        case "ACTIVATE":
+          dispatch2({ 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(() => {
+            dispatch2({ 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(() => {
+              dispatch2({ type: "UPDATE_SELECTED_RECTS" });
+            });
+          }
+          break;
+        }
+        case "HOVER_ELEMENT": {
+          if (!msg.elementId) {
+            dispatch2({ type: "CLEAR_HOVER" });
+            return;
+          }
+          const el = document.querySelector(`[${DATA_ATTR}="${msg.elementId}"]`);
+          if (el) {
+            const info = buildElementInfo(el);
+            dispatch2({ type: "SET_HOVER", id: info.id, rect: info.rect, tag: info.tag });
+          }
+          break;
+        }
+      }
+    };
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [handleDeselect, buildElementInfo]);
+  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 = useCallback((handle, e) => {
+    if (!selectedElRef.current || Platform.OS !== "web") return;
+    const nativeEvent = e.nativeEvent;
+    const rect = selectedElRef.current.getBoundingClientRect();
+    resizeStartRef.current = { x: nativeEvent.pageX, y: nativeEvent.pageY, w: rect.width, h: rect.height };
+    dispatch2({ type: "SET_RESIZING", value: true, handle });
+    dispatch2({ type: "CLEAR_HOVER" });
+  }, []);
+  useEffect(() => {
+    if (!state.isResizing || !resizeStartRef.current || !state.resizeHandle || Platform.OS !== "web") 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");
+      dispatch2({ 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
+            });
+          }
+        }
+      }
+      dispatch2({ 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]);
+  useEffect(() => {
+    if (!state.active || Platform.OS !== "web") return;
+    const preventSubmit = (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    document.addEventListener("submit", preventSubmit, true);
+    return () => document.removeEventListener("submit", preventSubmit, true);
+  }, [state.active]);
+  if (Platform.OS !== "web" || !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,
+      backgroundColor: "#3b82f6",
+      borderWidth: 1,
+      borderColor: "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__ */ jsxs(View, { style: styles.container, pointerEvents: "box-none", children: [
+    state.hoveredRect && !state.selectedElements.some((s) => s.id === state.hoveredId) && !state.isScrolling && /* @__PURE__ */ jsx(
+      View,
+      {
+        style: [
+          styles.hoverOverlay,
+          {
+            top: state.hoveredRect.top,
+            left: state.hoveredRect.left,
+            width: state.hoveredRect.width,
+            height: state.hoveredRect.height
+          }
+        ],
+        pointerEvents: "none",
+        children: state.hoveredTag && /* @__PURE__ */ jsx(View, { style: styles.hoverTag, children: /* @__PURE__ */ jsx(Text, { style: styles.hoverTagText, children: state.hoveredTag }) })
+      }
+    ),
+    !state.isScrolling && state.selectedElements.map((selected, index) => /* @__PURE__ */ jsxs(
+      View,
+      {
+        style: [
+          styles.selectedOverlay,
+          {
+            top: selected.rect.top,
+            left: selected.rect.left,
+            width: selected.rect.width,
+            height: selected.rect.height,
+            zIndex: 10001 + index
+          }
+        ],
+        pointerEvents: "box-none",
+        children: [
+          selected.tag && /* @__PURE__ */ jsx(View, { style: styles.selectedTag, children: /* @__PURE__ */ jsxs(Text, { style: styles.selectedTagText, children: [
+            selected.tag,
+            " (",
+            index + 1,
+            "/",
+            state.selectedElements.length,
+            ")"
+          ] }) }),
+          index === state.selectedElements.length - 1 && resizeHandles.map((handle) => /* @__PURE__ */ jsx(
+            View,
+            {
+              style: getHandleStyle(handle),
+              onStartShouldSetResponder: () => true,
+              onResponderGrant: (e) => onResizeStart(handle, e)
+            },
+            handle
+          ))
+        ]
+      },
+      selected.id
+    ))
+  ] });
+}
+var styles = StyleSheet.create({
+  container: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 99999
+  },
+  hoverOverlay: {
+    position: "absolute",
+    borderWidth: 2,
+    borderStyle: "dashed",
+    borderColor: "#3b82f6",
+    backgroundColor: "rgba(59, 130, 246, 0.08)",
+    borderRadius: 4,
+    zIndex: 1e4
+  },
+  hoverTag: {
+    position: "absolute",
+    top: -22,
+    left: 0,
+    backgroundColor: "#3b82f6",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3
+  },
+  hoverTagText: {
+    color: "white",
+    fontSize: 11,
+    fontFamily: "system-ui, sans-serif"
+  },
+  selectedOverlay: {
+    position: "absolute",
+    borderWidth: 2,
+    borderColor: "#3b82f6",
+    backgroundColor: "rgba(59, 130, 246, 0.04)",
+    borderRadius: 4
+  },
+  selectedTag: {
+    position: "absolute",
+    top: -22,
+    left: 0,
+    backgroundColor: "#3b82f6",
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    borderRadius: 3
+  },
+  selectedTagText: {
+    color: "white",
+    fontSize: 11,
+    fontWeight: "500",
+    fontFamily: "system-ui, sans-serif"
+  }
+});
+
+// src/expo/components/ErrorBoundary.tsx
+import { Component } from "react";
+import { Platform as Platform2, StyleSheet as StyleSheet2, Text as Text2, View as View2, TouchableOpacity } from "react-native";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ERROR_DEDUPE_WINDOW_MS = 5e3;
+var reportedErrors = /* @__PURE__ */ new Set();
+function generateFingerprint(message, stack) {
+  const stackLine = stack?.split("\\n")[1] || "";
+  return `${message}: ${stackLine}`.slice(0, 200);
+}
+function shouldReport(fingerprint) {
+  if (reportedErrors.has(fingerprint)) {
+    return false;
+  }
+  reportedErrors.add(fingerprint);
+  setTimeout(() => reportedErrors.delete(fingerprint), ERROR_DEDUPE_WINDOW_MS);
+  return true;
+}
+function dispatch(data) {
+  if (Platform2.OS === "web" && typeof window !== "undefined" && window.parent !== window) {
+    try {
+      window.parent.postMessage(data, "*");
+    } catch {
+    }
+  } else if (Platform2.OS !== "web") {
+    try {
+      const { requireOptionalNativeModule } = __require("expo-modules-core");
+      const Bridge = requireOptionalNativeModule("FlexBridge");
+      Bridge?.sendMessage?.({ type: "runtime-error", payload: JSON.stringify(data) });
+    } catch {
+    }
+  }
+}
+function reportException(message, origin, details) {
+  const fingerprint = generateFingerprint(message, details?.stack);
+  if (!shouldReport(fingerprint)) return;
+  dispatch({
+    type: "VIBEX_EXCEPTION",
+    details: {
+      message,
+      stack: details?.stack,
+      file: details?.file,
+      line: details?.line,
+      column: details?.column,
+      componentStack: details?.componentStack,
+      name: details?.name,
+      origin
+    },
+    capturedAt: Date.now()
+  });
+}
+function reportBoundaryError(error, componentStack) {
+  dispatch({
+    type: "vibex-boundary-error",
+    details: {
+      message: error.message,
+      stack: error.stack,
+      name: error.name,
+      componentStack
+    },
+    capturedAt: Date.now(),
+    client: Platform2.OS === "web" && typeof navigator !== "undefined" ? navigator.userAgent : `react-native-${Platform2.OS}`
+  });
+}
+function requestAIFix(error) {
+  dispatch({
+    type: "vibex-fix-with-ai",
+    details: {
+      message: error.message,
+      stack: error.stack,
+      name: error.name
+    },
+    capturedAt: Date.now()
+  });
+}
+function setupGlobalHandlers() {
+  if (Platform2.OS !== "web" || typeof window === "undefined") return;
+  window.addEventListener("error", (evt) => {
+    evt.preventDefault();
+    reportException(
+      evt.message || "Unknown error",
+      "runtime",
+      {
+        stack: evt.error?.stack,
+        file: evt.filename,
+        line: evt.lineno,
+        column: evt.colno
+      }
+    );
+  }, true);
+  window.addEventListener("unhandledrejection", (evt) => {
+    evt.preventDefault();
+    reportException(
+      evt.reason?.message ?? String(evt.reason),
+      "promise",
+      { stack: evt.reason?.stack }
+    );
+  }, true);
+}
+function interceptConsoleErrors() {
+  const original = console.error;
+  console.error = (...args) => {
+    original.apply(console, args);
+    const message = args.map((a) => {
+      if (a instanceof Error) return a.message;
+      if (typeof a === "object") {
+        try {
+          return JSON.stringify(a);
+        } catch {
+          return String(a);
+        }
+      }
+      return String(a);
+    }).join(" ");
+    if (/error|exception|failed|crash|fatal/i.test(message)) {
+      reportException(message, "console");
+    }
+  };
+  return () => {
+    console.error = original;
+  };
+}
+var ErrorBoundary = class extends Component {
+  cleanupConsole = null;
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null, errorInfo: null };
+  }
+  componentDidMount() {
+    setupGlobalHandlers();
+    this.cleanupConsole = interceptConsoleErrors();
+  }
+  componentWillUnmount() {
+    this.cleanupConsole?.();
+  }
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+  componentDidCatch(error, errorInfo) {
+    this.setState({ errorInfo });
+    reportException(error.message, "boundary", {
+      stack: error.stack,
+      name: error.name,
+      componentStack: errorInfo.componentStack || void 0
+    });
+    reportBoundaryError(error, errorInfo.componentStack || void 0);
+    this.props.onError?.(error, errorInfo);
+  }
+  handleRetry = () => {
+    this.setState({ hasError: false, error: null, errorInfo: null });
+  };
+  handleFixWithAI = () => {
+    if (this.state.error) {
+      requestAIFix(this.state.error);
+    }
+  };
+  render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) return this.props.fallback;
+      const error = this.state.error;
+      return /* @__PURE__ */ jsxs2(View2, { style: styles2.container, children: [
+        /* @__PURE__ */ jsxs2(View2, { style: styles2.card, children: [
+          /* @__PURE__ */ jsx2(View2, { style: styles2.accentBar }),
+          /* @__PURE__ */ jsxs2(View2, { style: styles2.content, children: [
+            /* @__PURE__ */ jsx2(View2, { style: styles2.header, children: /* @__PURE__ */ jsxs2(View2, { children: [
+              /* @__PURE__ */ jsx2(Text2, { style: styles2.label, children: "Runtime Error" }),
+              /* @__PURE__ */ jsx2(Text2, { style: styles2.title, children: error?.name || "Error" })
+            ] }) }),
+            /* @__PURE__ */ jsx2(Text2, { style: styles2.message, children: error?.message || "An unexpected error occurred" }),
+            /* @__PURE__ */ jsxs2(View2, { style: styles2.actions, children: [
+              /* @__PURE__ */ jsx2(TouchableOpacity, { style: styles2.primaryButton, onPress: this.handleFixWithAI, children: /* @__PURE__ */ jsx2(Text2, { style: styles2.primaryButtonText, children: "Fix with AI" }) }),
+              /* @__PURE__ */ jsx2(TouchableOpacity, { style: styles2.secondaryButton, onPress: this.handleRetry, children: /* @__PURE__ */ jsx2(Text2, { style: styles2.secondaryButtonText, children: "Retry" }) })
+            ] }),
+            __DEV__ && error?.stack && /* @__PURE__ */ jsx2(View2, { style: styles2.stackContainer, children: /* @__PURE__ */ jsx2(Text2, { style: styles2.stackTrace, children: error.stack }) })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx2(Text2, { style: styles2.footer, children: "Vibex" })
+      ] });
+    }
+    return this.props.children;
+  }
+};
+var styles2 = StyleSheet2.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fafafa",
+    alignItems: "center",
+    justifyContent: "center",
+    padding: 16
+  },
+  card: {
+    width: "100%",
+    maxWidth: 480,
+    flexDirection: "row",
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: "#e5e5e5",
+    backgroundColor: "#fff",
+    overflow: "hidden"
+  },
+  accentBar: {
+    width: 6,
+    backgroundColor: "#dc2626"
+  },
+  content: {
+    flex: 1,
+    padding: 20
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "flex-start",
+    marginBottom: 16
+  },
+  label: {
+    fontSize: 10,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: "#737373",
+    marginBottom: 4
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: "500",
+    color: "#171717"
+  },
+  message: {
+    fontSize: 14,
+    color: "#737373",
+    lineHeight: 20,
+    marginBottom: 20
+  },
+  actions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12
+  },
+  primaryButton: {
+    backgroundColor: "#171717",
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 6,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  primaryButtonText: {
+    color: "#fff",
+    fontSize: 14,
+    fontWeight: "500"
+  },
+  secondaryButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 10
+  },
+  secondaryButtonText: {
+    color: "#737373",
+    fontSize: 14
+  },
+  stackContainer: {
+    marginTop: 16,
+    paddingTop: 16,
+    borderTopWidth: 1,
+    borderTopColor: "#e5e5e5"
+  },
+  stackTrace: {
+    fontSize: 11,
+    fontFamily: Platform2.OS === "ios" ? "Menlo" : "monospace",
+    color: "#737373",
+    lineHeight: 16,
+    maxHeight: 350,
+    overflow: "scroll"
+  },
+  footer: {
+    marginTop: 16,
+    fontSize: 12,
+    color: "#a3a3a3"
+  }
+});
+
+// src/expo/config.ts
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = dirname(__filename);
+var transformerPath = join(__dirname, "..", "..", "expo", "metro-transformer.js");
+function withInspector(metroConfig, options = {}) {
+  const { enableInProduction = false } = options;
+  if (process.env.NODE_ENV === "production" && !enableInProduction) {
+    return metroConfig;
+  }
+  return {
+    ...metroConfig,
+    transformer: {
+      ...metroConfig.transformer,
+      babelTransformerPath: transformerPath
+    }
+  };
+}
+export {
+  ErrorBoundary,
+  VisualInspector,
+  transformerPath,
+  withInspector
+};
+//# sourceMappingURL=index.js.map