@vibexdotnew/inspector 0.0.11 → 0.0.13

package/next/element-tagger.cjs

@@ -1,461 +1,371 @@
-
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = componentTagger;
-const parser_1 = require("@babel/parser");
-const magic_string_1 = require("magic-string");
-const estree_walker_1 = require("estree-walker");
+
+/**
+ * FlexApp Element Tagger - Turbopack/Webpack Loader
+ *
+ * Transforms JSX to inject location attributes for visual editing.
+ * Injects: data-flex-loc="filepath:line:col" data-flex-name="tagName"
+ *
+ * SAFE: Never throws errors - returns original source on any failure
+ */
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Safe imports with fallbacks
+// ─────────────────────────────────────────────────────────────────────────────
+
+let parse, MagicString, walk;
+
+try {
+  parse = require("@babel/parser").parse;
+} catch {
+  parse = null;
+}
+
+try {
+  MagicString = require("magic-string");
+} catch {
+  MagicString = null;
+}
+
+// estree-walker v3 is ESM-only, try multiple import strategies
+try {
+  walk = require("estree-walker").walk;
+} catch {
+  try {
+    // Try the sync version
+    const mod = require("estree-walker/src/sync.js");
+    walk = mod.walk || mod.default?.walk;
+  } catch {
+    walk = null;
+  }
+}
+
 const path = require("path");
-/* ───────────────────────────────────────────── Blacklists */
-const threeFiberElems = [
-  "object3D",
-  "audioListener",
-  "positionalAudio",
-  "mesh",
-  "batchedMesh",
-  "instancedMesh",
-  "scene",
-  "sprite",
-  "lOD",
-  "skinnedMesh",
-  "skeleton",
-  "bone",
-  "lineSegments",
-  "lineLoop",
-  "points",
-  "group",
-  "camera",
-  "perspectiveCamera",
-  "orthographicCamera",
-  "cubeCamera",
-  "arrayCamera",
-  "instancedBufferGeometry",
-  "bufferGeometry",
-  "boxBufferGeometry",
-  "circleBufferGeometry",
-  "coneBufferGeometry",
-  "cylinderBufferGeometry",
-  "dodecahedronBufferGeometry",
-  "extrudeBufferGeometry",
-  "icosahedronBufferGeometry",
-  "latheBufferGeometry",
-  "octahedronBufferGeometry",
-  "planeBufferGeometry",
-  "polyhedronBufferGeometry",
-  "ringBufferGeometry",
-  "shapeBufferGeometry",
-  "sphereBufferGeometry",
-  "tetrahedronBufferGeometry",
-  "torusBufferGeometry",
-  "torusKnotBufferGeometry",
-  "tubeBufferGeometry",
-  "wireframeGeometry",
-  "tetrahedronGeometry",
-  "octahedronGeometry",
-  "icosahedronGeometry",
-  "dodecahedronGeometry",
-  "polyhedronGeometry",
-  "tubeGeometry",
-  "torusKnotGeometry",
-  "torusGeometry",
-  "sphereGeometry",
-  "ringGeometry",
-  "planeGeometry",
-  "latheGeometry",
-  "shapeGeometry",
-  "extrudeGeometry",
-  "edgesGeometry",
-  "coneGeometry",
-  "cylinderGeometry",
-  "circleGeometry",
-  "boxGeometry",
-  "capsuleGeometry",
-  "material",
-  "shadowMaterial",
-  "spriteMaterial",
-  "rawShaderMaterial",
-  "shaderMaterial",
-  "pointsMaterial",
-  "meshPhysicalMaterial",
-  "meshStandardMaterial",
-  "meshPhongMaterial",
-  "meshToonMaterial",
-  "meshNormalMaterial",
-  "meshLambertMaterial",
-  "meshDepthMaterial",
-  "meshDistanceMaterial",
-  "meshBasicMaterial",
-  "meshMatcapMaterial",
-  "lineDashedMaterial",
-  "lineBasicMaterial",
-  "primitive",
-  "light",
-  "spotLightShadow",
-  "spotLight",
-  "pointLight",
-  "rectAreaLight",
-  "hemisphereLight",
-  "directionalLightShadow",
-  "directionalLight",
-  "ambientLight",
-  "lightShadow",
-  "ambientLightProbe",
-  "hemisphereLightProbe",
-  "lightProbe",
-  "spotLightHelper",
-  "skeletonHelper",
-  "pointLightHelper",
-  "hemisphereLightHelper",
-  "gridHelper",
-  "polarGridHelper",
-  "directionalLightHelper",
-  "cameraHelper",
-  "boxHelper",
-  "box3Helper",
-  "planeHelper",
-  "arrowHelper",
-  "axesHelper",
-  "texture",
-  "videoTexture",
-  "dataTexture",
-  "dataTexture3D",
-  "compressedTexture",
-  "cubeTexture",
-  "canvasTexture",
-  "depthTexture",
-  "raycaster",
-  "vector2",
-  "vector3",
-  "vector4",
-  "euler",
-  "matrix3",
-  "matrix4",
-  "quaternion",
-  "bufferAttribute",
-  "float16BufferAttribute",
-  "float32BufferAttribute",
-  "float64BufferAttribute",
-  "int8BufferAttribute",
-  "int16BufferAttribute",
-  "int32BufferAttribute",
-  "uint8BufferAttribute",
-  "uint16BufferAttribute",
-  "uint32BufferAttribute",
-  "instancedBufferAttribute",
-  "color",
-  "fog",
-  "fogExp2",
-  "shape",
-  "colorShiftMaterial"
-];
-const dreiElems = [
-  "AsciiRenderer",
-  "Billboard",
-  "Clone",
-  "ComputedAttribute",
-  "Decal",
-  "Edges",
-  "Effects",
-  "GradientTexture",
-  "MarchingCubes",
-  "Outlines",
-  "PositionalAudio",
-  "Sampler",
-  "ScreenSizer",
-  "ScreenSpace",
-  "Splat",
-  "Svg",
-  "Text",
-  "Text3D",
-  "Trail",
-  "CubeCamera",
-  "OrthographicCamera",
-  "PerspectiveCamera",
-  "CameraControls",
-  "FaceControls",
-  "KeyboardControls",
-  "MotionPathControls",
-  "PresentationControls",
-  "ScrollControls",
-  "DragControls",
-  "GizmoHelper",
-  "Grid",
-  "Helper",
-  "PivotControls",
-  "TransformControls",
-  "CubeTexture",
-  "Fbx",
-  "Gltf",
-  "Ktx2",
-  "Loader",
-  "Progress",
-  "ScreenVideoTexture",
-  "Texture",
-  "TrailTexture",
-  "VideoTexture",
-  "WebcamVideoTexture",
-  "CycleRaycast",
-  "DetectGPU",
-  "Example",
-  "FaceLandmarker",
-  "Fbo",
-  "Html",
-  "Select",
-  "SpriteAnimator",
-  "StatsGl",
-  "Stats",
-  "Trail",
-  "Wireframe",
-  "CurveModifier",
-  "AdaptiveDpr",
-  "AdaptiveEvents",
-  "BakeShadows",
-  "Bvh",
-  "Detailed",
-  "Instances",
-  "Merged",
-  "meshBounds",
-  "PerformanceMonitor",
-  "Points",
-  "Preload",
-  "Segments",
-  "Fisheye",
-  "Hud",
-  "Mask",
-  "MeshPortalMaterial",
-  "RenderCubeTexture",
-  "RenderTexture",
-  "View",
-  "MeshDiscardMaterial",
-  "MeshDistortMaterial",
-  "MeshReflectorMaterial",
-  "MeshRefractionMaterial",
-  "MeshTransmissionMaterial",
-  "MeshWobbleMaterial",
-  "PointMaterial",
-  "shaderMaterial",
-  "SoftShadows",
-  "CatmullRomLine",
-  "CubicBezierLine",
-  "Facemesh",
-  "Line",
-  "Mesh",
-  "QuadraticBezierLine",
-  "RoundedBox",
-  "ScreenQuad",
-  "AccumulativeShadows",
-  "Backdrop",
-  "BBAnchor",
-  "Bounds",
-  "CameraShake",
-  "Caustics",
-  "Center",
-  "Cloud",
-  "ContactShadows",
-  "Environment",
-  "Float",
-  "Lightformer",
-  "MatcapTexture",
-  "NormalTexture",
-  "RandomizedLight",
-  "Resize",
-  "ShadowAlpha",
-  "Shadow",
-  "Sky",
-  "Sparkles",
-  "SpotLightShadow",
-  "SpotLight",
-  "Stage",
-  "Stars",
-  "OrbitControls"
-];
-const shouldTag = (name) => !threeFiberElems.includes(name) && !dreiElems.includes(name);
-// ➕ Collect aliases of the Next.js <Image> component so we can reliably tag it even if it was renamed.
-const isNextImageAlias = (aliases, name) => aliases.has(name);
-const extractLiteralValue = (node) => {
-  if (!node)
-    return undefined;
-  switch (node.type) {
-    case 'StringLiteral':
-      return node.value;
-    case 'NumericLiteral':
-      return node.value;
-    case 'BooleanLiteral':
-      return node.value;
-    case 'ObjectExpression':
-      const obj = {};
-      for (const prop of node.properties) {
-        if (prop.type === 'ObjectProperty' && !prop.computed) {
-          const key = prop.key.type === 'Identifier' ? prop.key.name : prop.key.value;
-          obj[key] = extractLiteralValue(prop.value);
-        }
-      }
-      return obj;
-    case 'ArrayExpression':
-      return node.elements.map((el) => extractLiteralValue(el));
-    default:
-      return undefined;
+const fs = require("fs");
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Element Exclusion Lists
+// ─────────────────────────────────────────────────────────────────────────────
+
+const EXCLUDED_ELEMENTS = new Set([
+  // React Three Fiber primitives
+  "primitive", "mesh", "group", "scene", "object3D",
+  "camera", "perspectiveCamera", "orthographicCamera", "cubeCamera", "arrayCamera",
+  "instancedMesh", "batchedMesh", "skinnedMesh", "sprite", "lOD",
+  "lineSegments", "lineLoop", "points", "skeleton", "bone",
+  "bufferGeometry", "instancedBufferGeometry",
+  "boxGeometry", "sphereGeometry", "planeGeometry", "cylinderGeometry",
+  "coneGeometry", "torusGeometry", "torusKnotGeometry", "ringGeometry",
+  "circleGeometry", "tubeGeometry", "extrudeGeometry", "latheGeometry",
+  "shapeGeometry", "polyhedronGeometry", "icosahedronGeometry",
+  "octahedronGeometry", "tetrahedronGeometry", "dodecahedronGeometry",
+  "capsuleGeometry", "edgesGeometry", "wireframeGeometry",
+  "material", "meshBasicMaterial", "meshStandardMaterial", "meshPhongMaterial",
+  "meshLambertMaterial", "meshToonMaterial", "meshNormalMaterial",
+  "meshPhysicalMaterial", "meshDepthMaterial", "meshDistanceMaterial",
+  "meshMatcapMaterial", "shaderMaterial", "rawShaderMaterial",
+  "pointsMaterial", "lineBasicMaterial", "lineDashedMaterial",
+  "spriteMaterial", "shadowMaterial",
+  "light", "ambientLight", "directionalLight", "pointLight", "spotLight",
+  "hemisphereLight", "rectAreaLight", "lightProbe",
+  "texture", "videoTexture", "canvasTexture", "cubeTexture",
+  "dataTexture", "compressedTexture", "depthTexture",
+  "vector2", "vector3", "vector4", "euler", "quaternion",
+  "matrix3", "matrix4", "color", "raycaster", "fog", "fogExp2",
+  // Drei components
+  "Billboard", "Text", "Text3D", "Html", "Trail", "Decal", "Edges", "Outlines",
+  "PerspectiveCamera", "OrthographicCamera", "CubeCamera",
+  "OrbitControls", "CameraControls", "TransformControls", "PivotControls",
+  "Environment", "Sky", "Stars", "Cloud", "Sparkles", "Float", "Stage",
+  "RoundedBox", "Line", "Points", "Instances", "Merged",
+  "MeshReflectorMaterial", "MeshTransmissionMaterial", "shaderMaterial",
+]);
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Simple AST Walker (fallback if estree-walker fails)
+// ─────────────────────────────────────────────────────────────────────────────
+
+function simpleWalk(node, callbacks, parent = null) {
+  if (!node || typeof node !== "object") return;
+
+  // Add parent reference
+  if (parent && !Object.prototype.hasOwnProperty.call(node, "parent")) {
+    Object.defineProperty(node, "parent", {
+      value: parent,
+      enumerable: false,
+      writable: true,
+    });
   }
-};
-const findVariableDeclarations = (ast) => {
-  const variables = new Map();
-  (0, estree_walker_1.walk)(ast, {
-    enter(node) {
-      var _a;
-      // Handle const/let/var declarations
-      if (node.type === 'VariableDeclaration') {
-        for (const declarator of node.declarations) {
-          if (declarator.id.type === 'Identifier' && declarator.init) {
-            const varName = declarator.id.name;
-            const value = extractLiteralValue(declarator.init);
-            variables.set(varName, {
-              name: varName,
-              type: Array.isArray(value) ? 'array' : typeof value === 'object' ? 'object' : 'primitive',
-              value,
-              arrayItems: Array.isArray(value) ? value : undefined,
-              loc: (_a = declarator.loc) === null || _a === void 0 ? void 0 : _a.start
-            });
-          }
+
+  if (callbacks.enter) {
+    callbacks.enter(node, parent);
+  }
+
+  // Walk children
+  for (const key of Object.keys(node)) {
+    if (key === "parent") continue;
+    const child = node[key];
+    if (Array.isArray(child)) {
+      for (const item of child) {
+        if (item && typeof item === "object" && item.type) {
+          simpleWalk(item, callbacks, node);
         }
       }
+    } else if (child && typeof child === "object" && child.type) {
+      simpleWalk(child, callbacks, node);
     }
-  });
-  return variables;
-};
-const findMapContext = (node, variables) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  // Walk up the tree to find if this JSX element is inside a map call
-  let current = node;
-  let depth = 0;
-  const maxDepth = 10; // Prevent infinite loops
-  while (current && depth < maxDepth) {
-    if (current.type === 'CallExpression' &&
-      ((_a = current.callee) === null || _a === void 0 ? void 0 : _a.type) === 'MemberExpression' &&
-      ((_c = (_b = current.callee) === null || _b === void 0 ? void 0 : _b.property) === null || _c === void 0 ? void 0 : _c.name) === 'map') {
-      // Found a .map() call, check if it's on a known array
-      const arrayName = (_d = current.callee.object) === null || _d === void 0 ? void 0 : _d.name;
-      const mapCallback = (_e = current.arguments) === null || _e === void 0 ? void 0 : _e[0];
-      if (arrayName && (mapCallback === null || mapCallback === void 0 ? void 0 : mapCallback.type) === 'ArrowFunctionExpression') {
-        const itemParam = (_f = mapCallback.params) === null || _f === void 0 ? void 0 : _f[0];
-        const indexParam = (_g = mapCallback.params) === null || _g === void 0 ? void 0 : _g[1];
-        if ((itemParam === null || itemParam === void 0 ? void 0 : itemParam.type) === 'Identifier') {
-          const varInfo = variables.get(arrayName);
+  }
+}
+
+// Use estree-walker if available, otherwise use simple walker
+const walkAst = walk || simpleWalk;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Helpers
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * Quick check if source likely contains JSX
+ */
+function hasJSX(source) {
+  // Look for JSX patterns: <Component, <div, etc.
+  return /<[A-Za-z]/.test(source);
+}
+
+/**
+ * Check if element should receive location attributes
+ */
+function shouldInjectAttrs(tagName) {
+  if (!tagName) return false;
+  if (tagName === "Fragment" || tagName === "React.Fragment") return false;
+  if (EXCLUDED_ELEMENTS.has(tagName)) return false;
+  return true;
+}
+
+/**
+ * Extract tag name from JSX opening element
+ */
+function getTagName(node) {
+  try {
+    const { name } = node;
+    if (name.type === "JSXIdentifier") {
+      return name.name;
+    }
+    if (name.type === "JSXMemberExpression") {
+      return `${name.object.name}.${name.property.name}`;
+    }
+  } catch {
+    return null;
+  }
+  return null;
+}
+
+/**
+ * Detect if JSX element is inside a .map() call
+ */
+function detectMapContext(node) {
+  try {
+    let current = node;
+    let depth = 0;
+
+    while (current && depth < 15) {
+      if (
+        current.type === "CallExpression" &&
+        current.callee?.type === "MemberExpression" &&
+        current.callee.property?.name === "map"
+      ) {
+        const arrayRef = current.callee.object?.name;
+        const callback = current.arguments?.[0];
+
+        if (arrayRef && callback?.type === "ArrowFunctionExpression") {
+          const indexArg = callback.params?.[1];
           return {
-            arrayName,
-            itemVarName: itemParam.name,
-            arrayItems: varInfo === null || varInfo === void 0 ? void 0 : varInfo.arrayItems,
-            arrayLoc: varInfo === null || varInfo === void 0 ? void 0 : varInfo.loc,
-            indexVarName: (indexParam === null || indexParam === void 0 ? void 0 : indexParam.type) === 'Identifier' ? indexParam.name : undefined
+            arrayName: arrayRef,
+            indexName: indexArg?.type === "Identifier" ? indexArg.name : null,
           };
         }
       }
+      current = current.parent;
+      depth++;
     }
-    current = current.parent;
-    depth++;
+  } catch {
+    // Ignore errors
   }
   return null;
-};
-const getSemanticName = (node, mapContext, imageAliases) => {
-  const getName = () => {
-    if (node.name.type === 'JSXIdentifier')
-      return node.name.name;
-    if (node.name.type === 'JSXMemberExpression')
-      return `${node.name.object.name}.${node.name.property.name}`;
-    return null;
-  };
-  const tagName = getName();
-  if (!tagName)
-    return null;
-  // For Next.js Image components, always return 'img' so the name is a valid HTML tag.
-  if (isNextImageAlias(imageAliases, tagName)) {
-    return 'img';
-  }
-  return isNextImageAlias(imageAliases, tagName) ? 'img' : tagName;
-};
-/* ───────────────────────────────────────────── Loader */
-function componentTagger(src, map) {
-  const done = this.async();
+}
+
+/**
+ * Collect Next.js Image import aliases
+ */
+function collectImageAliases(ast) {
+  const aliases = new Set();
+
   try {
-    if (/node_modules/.test(this.resourcePath))
-      return done(null, src, map);
-    const ast = (0, parser_1.parse)(src, {
-      sourceType: 'module',
-      plugins: ['jsx', 'typescript'],
-    });
-    const ms = new magic_string_1.default(src);
-    const rel = path.relative(process.cwd(), this.resourcePath);
-    let mutated = false;
-    // Add parent references to AST nodes for upward traversal (non-enumerable to avoid infinite recursion)
-    (0, estree_walker_1.walk)(ast, {
-      enter(node, parent) {
-        if (parent && !Object.prototype.hasOwnProperty.call(node, 'parent')) {
-          Object.defineProperty(node, 'parent', { value: parent, enumerable: false });
-        }
-      }
-    });
-    // 0️⃣ Collect variable declarations first
-    const variables = findVariableDeclarations(ast);
-    // 1️⃣ Gather local identifiers that reference `next/image`.
-    const imageAliases = new Set();
-    (0, estree_walker_1.walk)(ast, {
+    walkAst(ast, {
       enter(node) {
-        if (node.type === 'ImportDeclaration' &&
-          node.source.value === 'next/image') {
-          for (const spec of node.specifiers) {
-            imageAliases.add(spec.local.name);
+        if (
+          node.type === "ImportDeclaration" &&
+          node.source?.value === "next/image"
+        ) {
+          for (const spec of node.specifiers || []) {
+            if (spec.local?.name) {
+              aliases.add(spec.local.name);
+            }
           }
         }
       },
     });
-    // 2️⃣ Inject attributes with enhanced semantic context.
-    (0, estree_walker_1.walk)(ast, {
+  } catch {
+    // Ignore errors
+  }
+
+  return aliases;
+}
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Main Loader
+// ─────────────────────────────────────────────────────────────────────────────
+
+/**
+ * FlexApp Element Tagger Loader
+ * SAFE: Returns original source on any error
+ */
+function flexElementTagger(source, sourceMap) {
+  const callback = this.async();
+  // return callback(null, source, sourceMap);
+  // Early exit: missing dependencies
+  if (!parse || !MagicString) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: no resource path or it's a directory
+  if (!this.resourcePath) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: path doesn't look like a file (no extension)
+  const ext = path.extname(this.resourcePath);
+  if (!ext || !['.tsx', '.jsx', '.ts', '.js'].includes(ext)) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: check if it's actually a file (not a directory)
+  try {
+    const stat = fs.statSync(this.resourcePath);
+    if (!stat.isFile()) {
+      return callback(null, source, sourceMap);
+    }
+  } catch {
+    // If stat fails, still try to process (might be virtual file)
+  }
+
+  // Early exit: node_modules
+  if (/node_modules/.test(this.resourcePath)) {
+    return callback(null, source, sourceMap);
+  }
+
+  // Early exit: no JSX detected
+  if (!hasJSX(source)) {
+    return callback(null, source, sourceMap);
+  }
+
+  try {
+    // Parse source
+    const ast = parse(source, {
+      sourceType: "module",
+      plugins: ["jsx", "typescript"],
+      errorRecovery: true, // Don't fail on syntax errors
+    });
+
+    if (!ast || !ast.program) {
+      return callback(null, source, sourceMap);
+    }
+
+    const magicStr = new MagicString(source);
+    const relativePath = path.relative(process.cwd(), this.resourcePath);
+    const imageAliases = collectImageAliases(ast);
+    let hasChanges = false;
+
+    // Add parent references
+    walkAst(ast.program, {
+      enter() { }, // Just to trigger parent ref addition
+    });
+
+    // Process JSX elements
+    walkAst(ast.program, {
       enter(node) {
-        var _a;
-        if (node.type !== 'JSXOpeningElement')
-          return;
-        const mapContext = findMapContext(node, variables);
-        const semanticName = getSemanticName(node, mapContext, imageAliases);
-        if (!semanticName ||
-          ['Fragment', 'React.Fragment'].includes(semanticName) ||
-          (!isNextImageAlias(imageAliases, semanticName.split('-')[0]) &&
-            !shouldTag(semanticName)))
-          return;
-        const { line, column } = node.loc.start;
-        let orchidsId = `${rel}:${line}:${column}`;
-        // Enhance the ID with context if we have map information
-        if (mapContext) {
-          orchidsId += `@${mapContext.arrayName}`;
-        }
-        // 🔍 Append referenced variable locations for simple identifier references in props
-        (_a = node.attributes) === null || _a === void 0 ? void 0 : _a.forEach((attr) => {
-          var _a, _b;
-          if (attr.type === 'JSXAttribute' &&
-            ((_a = attr.value) === null || _a === void 0 ? void 0 : _a.type) === 'JSXExpressionContainer' &&
-            ((_b = attr.value.expression) === null || _b === void 0 ? void 0 : _b.type) === 'Identifier') {
-            const refName = attr.value.expression.name;
-            const varInfo = variables.get(refName);
-            if (varInfo) {
-              orchidsId += `@${refName}`;
-            }
+        try {
+          if (node.type !== "JSXOpeningElement") return;
+
+          let tagName = getTagName(node);
+          if (!tagName) return;
+
+          // Check if already has data-flex-loc
+          const hasAttr = node.attributes?.some(
+            (attr) =>
+              attr.type === "JSXAttribute" &&
+              attr.name?.name === "data-flex-loc"
+          );
+          if (hasAttr) return;
+
+          // Normalize Next.js Image to img
+          const isNextImage = imageAliases.has(tagName.split(".")[0]);
+          const displayName = isNextImage ? "img" : tagName;
+
+          // Check if we should tag this element
+          if (!shouldInjectAttrs(tagName) && !isNextImage) return;
+
+          // Ensure we have location info
+          if (!node.loc?.start || !node.name?.end) return;
+
+          // Build location identifier
+          const { line, column } = node.loc.start;
+          let locId = `${relativePath}:${line}:${column}`;
+
+          // Add iteration context if inside .map()
+          const mapCtx = detectMapContext(node);
+          if (mapCtx?.arrayName) {
+            locId += `#${mapCtx.arrayName}`;
+          }
+
+          // Inject data-flex-iter for map index if available
+          if (mapCtx?.indexName) {
+            magicStr.appendLeft(
+              node.name.end,
+              ` data-flex-iter=${mapCtx.indexName}`
+            );
           }
-        });
-        // 📍 If inside a map context and we have an index variable, inject data-map-index
-        if (mapContext === null || mapContext === void 0 ? void 0 : mapContext.indexVarName) {
-          ms.appendLeft(node.name.end, ` data-map-index={${mapContext.indexVarName}}`);
+
+          // Inject location and name attributes
+          magicStr.appendLeft(
+            node.name.end,
+            ` data-flex-loc="${locId}" data-flex-name="${displayName}"`
+          );
+
+          hasChanges = true;
+        } catch {
+          // Ignore errors for individual nodes
         }
-        ms.appendLeft(node.name.end, ` data-orchids-id="${orchidsId}" data-orchids-name="${semanticName}"`);
-        mutated = true;
       },
     });
-    if (!mutated)
-      return done(null, src, map);
-    const out = ms.toString();
-    const outMap = ms.generateMap({ hires: true });
-    /* Turbopack expects the sourcemap as a JSON *string*. */
-    done(null, out, JSON.stringify(outMap));
-  }
-  catch (err) {
-    done(err);
+
+    // Return original if no changes
+    if (!hasChanges) {
+      return callback(null, source, sourceMap);
+    }
+
+    // Generate output
+    const output = magicStr.toString();
+
+    // Return without sourcemap - Turbopack handles it better
+    callback(null, output);
+
+  } catch (error) {
+    // On ANY error, return original source unchanged
+    console.warn("[flex-element-tagger] Skipping file due to error:", this.resourcePath);
+    callback(null, source, sourceMap);
   }
 }
 
+module.exports = flexElementTagger;
+module.exports.default = flexElementTagger;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vibexdotnew/inspector",
-    "version": "0.0.11",
+    "version": "0.0.13",
     "description": "Visual inspection and element tagging for Next.js and Expo applications",
     "author": "Vibex",
     "license": "MIT",