@funcatehq/vite-plugin-elementag 0.1.0

package/dist/index.cjs

@@ -0,0 +1,550 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  elementag: () => elementag,
+  version: () => version
+});
+module.exports = __toCommonJS(index_exports);
+var import_parser = require("@babel/parser");
+var import_magic_string = __toESM(require("magic-string"), 1);
+var import_node_path2 = __toESM(require("path"), 1);
+
+// src/constants.ts
+var DATA_ATTRIBUTES = {
+  METADATA: "data-elema-metadata",
+  COMPONENT_NAME: "data-elema-name"
+};
+var VALID_EXTENSIONS = /* @__PURE__ */ new Set([".jsx", ".tsx"]);
+var R3F_IMPORT_SOURCES = /* @__PURE__ */ new Set([
+  "@react-three/fiber",
+  "@react-three/drei",
+  "react-three-fiber"
+]);
+var R3F_BAILOUT_ELEMENTS = /* @__PURE__ */ new Set([
+  "Canvas",
+  "mesh",
+  "group",
+  "scene",
+  "primitive",
+  "points",
+  "instancedMesh",
+  "fog",
+  "fogExp2",
+  "object3D"
+]);
+var R3F_BAILOUT_PATTERNS = [
+  /Geometry$/,
+  /Material$/,
+  /Light$/,
+  /Camera$/,
+  /Helper$/,
+  /Control$/
+];
+var FRAGMENT_IMPORT_SOURCES = /* @__PURE__ */ new Set([
+  "react",
+  "react/jsx-runtime"
+]);
+var TAILWIND_CONFIG_FILES = [
+  "tailwind.config.ts",
+  "tailwind.config.js",
+  "tailwind.config.mjs",
+  "tailwind.config.cjs"
+];
+var TAILWIND_V4_CDN_URL = "https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.1.14";
+var TAILWIND_V3_CDN_URL = "https://cdn.tailwindcss.com/3.4.17";
+
+// src/ast-utils.ts
+var t = __toESM(require("@babel/types"), 1);
+function getElementName(jsxNode) {
+  const name = jsxNode.name;
+  if (name.type === "JSXIdentifier") {
+    return name.name;
+  }
+  if (name.type === "JSXMemberExpression") {
+    const object = name.object;
+    const property = name.property;
+    if (object.type === "JSXIdentifier" && property.type === "JSXIdentifier") {
+      return `${object.name}.${property.name}`;
+    }
+  }
+  return null;
+}
+function usesReactThreeFiber(ast) {
+  return ast.program.body.some(
+    (node) => t.isImportDeclaration(node) && typeof node.source.value === "string" && R3F_IMPORT_SOURCES.has(node.source.value)
+  );
+}
+function shouldBailout(name) {
+  if (R3F_BAILOUT_ELEMENTS.has(name)) return true;
+  return R3F_BAILOUT_PATTERNS.some((pattern) => pattern.test(name));
+}
+function collectFragmentAliases(ast) {
+  const namedAliases = /* @__PURE__ */ new Set();
+  const namespaceAliases = /* @__PURE__ */ new Set();
+  for (const node of ast.program.body) {
+    if (t.isImportDeclaration(node) && typeof node.source.value === "string" && FRAGMENT_IMPORT_SOURCES.has(node.source.value)) {
+      for (const specifier of node.specifiers) {
+        if (t.isImportSpecifier(specifier) && t.isIdentifier(specifier.imported) && specifier.imported.name === "Fragment") {
+          namedAliases.add(specifier.local.name);
+        } else if (t.isImportDefaultSpecifier(specifier) || t.isImportNamespaceSpecifier(specifier)) {
+          namespaceAliases.add(specifier.local.name);
+        }
+      }
+    }
+  }
+  return { namedAliases, namespaceAliases };
+}
+function isFragment(name, bindings) {
+  if (bindings.namedAliases.has(name)) return true;
+  const dotIndex = name.indexOf(".");
+  if (dotIndex !== -1) {
+    const ns = name.slice(0, dotIndex);
+    const prop = name.slice(dotIndex + 1);
+    if (prop === "Fragment" && bindings.namespaceAliases.has(ns)) return true;
+  }
+  return false;
+}
+
+// src/tailwind.ts
+var import_promises = __toESM(require("fs/promises"), 1);
+var import_node_path = __toESM(require("path"), 1);
+async function findTailwindConfigPath(dir) {
+  for (const configFile of TAILWIND_CONFIG_FILES) {
+    const configPath = import_node_path.default.join(dir, configFile);
+    try {
+      await import_promises.default.access(configPath);
+      return configPath;
+    } catch {
+    }
+  }
+  return null;
+}
+async function detectTailwindMajorVersion(packageDir) {
+  try {
+    const packageJsonPath = import_node_path.default.join(packageDir, "package.json");
+    const content = await import_promises.default.readFile(packageJsonPath, "utf-8");
+    const pkg = JSON.parse(content);
+    const versionSpec = pkg.dependencies?.tailwindcss ?? pkg.devDependencies?.tailwindcss;
+    if (!versionSpec) return 4;
+    const match = String(versionSpec).match(/(\d+)/);
+    if (match) return parseInt(match[1], 10);
+    return 4;
+  } catch {
+    return 4;
+  }
+}
+function generateClientSideTailwindScript(majorVersion) {
+  const cdnUrl = majorVersion >= 4 ? JSON.stringify(TAILWIND_V4_CDN_URL) : JSON.stringify(TAILWIND_V3_CDN_URL);
+  const loadBody = majorVersion >= 4 ? `
+        var script = document.createElement('script');
+        script.src = ${cdnUrl};
+
+        if (window.REPLIT_APP_TAILWIND_CONFIG) {
+          script.setAttribute('data-config', JSON.stringify(window.REPLIT_APP_TAILWIND_CONFIG));
+        }
+
+        document.head.appendChild(script);` : `
+        var script = document.createElement('script');
+        script.src = ${cdnUrl};
+
+        script.onload = function() {
+          if (window.REPLIT_APP_TAILWIND_CONFIG) {
+            window.tailwind.config = window.REPLIT_APP_TAILWIND_CONFIG;
+          }
+        };
+
+        document.head.appendChild(script);`;
+  return `
+(function() {
+  var initialized = false;
+
+  function loadTailwind() {
+    if (initialized) { return; }
+    initialized = true;
+${loadBody}
+  }
+
+  window.addEventListener('replit-init-tailwind', function() {
+    if (window.REPLIT_APP_TAILWIND_CONFIG) {
+      loadTailwind();
+    } else {
+      var configTimeout = setTimeout(function() { loadTailwind(); }, 1000);
+      window.addEventListener('replit-tailwind-config-ready', function() {
+        clearTimeout(configTimeout);
+        loadTailwind();
+      }, { once: true });
+    }
+  });
+})();
+`.trim();
+}
+function makeTailwindConfigBrowserSafe(code, traverse) {
+  const { parse: parse2 } = require("@babel/parser");
+  const ast = parse2(code, {
+    sourceType: "module",
+    plugins: ["typescript"]
+  });
+  const MagicString2 = require("magic-string");
+  const s = new MagicString2(code);
+  const importBindings = /* @__PURE__ */ new Map();
+  let bindingCounter = 0;
+  const requireSites = [];
+  traverse(ast, {
+    CallExpression(nodePath) {
+      const node = nodePath.node;
+      if (node.callee.type === "Identifier" && node.callee.name === "require" && node.arguments.length === 1 && node.arguments[0].type === "StringLiteral") {
+        if (node.start == null || node.end == null) return;
+        const moduleName = node.arguments[0].value;
+        let binding = importBindings.get(moduleName);
+        if (!binding) {
+          binding = `__req_${bindingCounter++}`;
+          importBindings.set(moduleName, binding);
+        }
+        requireSites.push({ start: node.start, end: node.end, binding });
+      }
+    }
+  });
+  if (requireSites.length === 0) return null;
+  const importLines = [];
+  for (const [moduleName, binding] of importBindings) {
+    importLines.push(`import ${binding} from ${JSON.stringify(moduleName)};`);
+  }
+  s.prepend(importLines.join("\n") + "\n");
+  for (const site of requireSites) {
+    s.overwrite(site.start, site.end, site.binding);
+  }
+  return { code: s.toString(), map: s.generateMap({ hires: true }) };
+}
+
+// src/beacon/index.ts
+var BEACON_VERSION = "0.1.0";
+var HIGHLIGHT_COLOR = "#0079F2";
+var HIGHLIGHT_BG = "#0079F210";
+var HIGHLIGHT_STYLES = `
+  [contenteditable] { outline: none !important; }
+  [contenteditable]:focus { outline: none !important; }
+  .elema-highlighter { position:absolute; z-index:2147483644; box-sizing:border-box; pointer-events:none; outline:2px dashed ${HIGHLIGHT_COLOR}!important; outline-offset:0!important; margin:0!important; padding:0!important; transform:none!important; background:${HIGHLIGHT_BG}!important; opacity:0; }
+  .elema-highlighter-hover { position:fixed; z-index:2147483647; }
+  .elema-highlighter-selected { position:fixed; pointer-events:none; outline:2px solid ${HIGHLIGHT_COLOR}!important; outline-offset:3px!important; background:none!important; }
+  .elema-label { position:absolute; background:${HIGHLIGHT_COLOR}; color:#FFF; padding:4px 8px; border-radius:4px; font-size:14px; font-family:monospace; line-height:1; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,.2); transform:translateY(-100%); margin-top:-4px; left:0; z-index:2147483645; pointer-events:none; opacity:0; }
+  .elema-label-hover { position:fixed; z-index:2147483647; }
+  .elema-label-selected { position:fixed; pointer-events:none; }
+`;
+function generateBeaconScript() {
+  return `
+(function() {
+  "use strict";
+  var V = ${JSON.stringify(BEACON_VERSION)};
+  var sm = false, ee = false, sel = null, selMeta = null, he = null;
+  var hl = null, lb = null; // hover highlighter + label
+  var selHL = null, selLB = null; // selected highlighter + label
+  var rafId = null;
+
+  function isAllowedOrigin(o) {
+    if (o.startsWith("http://localhost:")) return true;
+    try { var u = new URL(o); return [".replit.dev",".replit.com",".replit-staging.com",".rp-humain.com",".repl.co"].some(function(d){ return u.hostname===d.slice(1)||u.hostname.endsWith(d); }); } catch(e){ return false; }
+  }
+
+  // Inject styles
+  var st = document.createElement("style"); st.textContent = ${JSON.stringify(HIGHLIGHT_STYLES)}; document.head.appendChild(st);
+
+  // Create hover overlays
+  hl = document.createElement("div"); hl.className = "elema-highlighter elema-highlighter-hover"; document.body.appendChild(hl);
+  lb = document.createElement("div"); lb.className = "elema-label elema-label-hover"; document.body.appendChild(lb);
+
+  function getMetadata(el) {
+    var path = el.getAttribute("data-elema-metadata")||el.getAttribute("data-replit-metadata")||"";
+    var name = el.getAttribute("data-elema-name")||el.getAttribute("data-component-name")||el.tagName.toLowerCase();
+    var cs = window.getComputedStyle(el);
+    var styles = {};
+    var props = ["backgroundColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","borderTopLeftRadius","borderTopRightRadius","borderBottomRightRadius","borderBottomLeftRadius","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","color","display","position","width","height","fontSize","fontFamily","fontWeight","margin","padding","opacity","textAlign"];
+    for (var i=0;i<props.length;i++) { try { styles[props[i]]=cs[props[i]]; } catch(e){} }
+    var pe = el.parentElement;
+    var parent = pe ? { tagName: pe.tagName.toLowerCase(), className: pe.getAttribute("class")||void 0, textContent: (pe.textContent||"").slice(0,100) } : null;
+    var children = [];
+    for (var c=0;c<el.children.length&&c<10;c++) { var ch=el.children[c]; children.push({ tagName:ch.tagName.toLowerCase(), className:ch.getAttribute("class")||void 0, textContent:(ch.textContent||"").slice(0,100) }); }
+    return {
+      tagName: el.tagName.toLowerCase(), className: el.getAttribute("class")||void 0, textContent: (el.textContent||"").slice(0,100),
+      id: el.getAttribute("id")||void 0, elementPath: path, componentName: name,
+      computedStyles: styles, relatedElements: { parent:parent, children:children },
+      siblingCount: pe?pe.children.length-1:0, hasChildElements: el.children.length>0,
+      originalTextContent: el.textContent||void 0, srcAttribute: el.getAttribute("src")||void 0
+    };
+  }
+
+  function updateOverlay(el, h, l) {
+    if (!el||!h) return;
+    var r = el.getBoundingClientRect();
+    h.style.left=r.left+"px"; h.style.top=r.top+"px"; h.style.width=r.width+"px"; h.style.height=r.height+"px"; h.style.opacity="1";
+    if (l) { var n=el.getAttribute("data-elema-name")||el.getAttribute("data-component-name")||el.tagName.toLowerCase(); l.textContent=n; l.style.left=r.left+"px"; l.style.top=r.top+"px"; l.style.opacity="1"; }
+  }
+
+  function clearHover() { if(hl) hl.style.opacity="0"; if(lb) lb.style.opacity="0"; }
+  function clearSelected() { if(selHL) { selHL.remove(); selHL=null; } if(selLB) { selLB.remove(); selLB=null; } }
+
+  // RAF-based position tracking for selected element
+  function startTracking() {
+    if (rafId) return;
+    function tick() {
+      if (sel) { updateOverlay(sel, selHL, selLB); }
+      rafId = requestAnimationFrame(tick);
+    }
+    rafId = requestAnimationFrame(tick);
+  }
+  function stopTracking() { if (rafId) { cancelAnimationFrame(rafId); rafId=null; } }
+
+  function showSelected(el) {
+    clearSelected();
+    if (!el) return;
+    selHL = document.createElement("div"); selHL.className="elema-highlighter elema-highlighter-selected"; document.body.appendChild(selHL);
+    selLB = document.createElement("div"); selLB.className="elema-label elema-label-selected"; document.body.appendChild(selLB);
+    updateOverlay(el, selHL, selLB);
+    startTracking();
+  }
+
+  // Hover handler
+  document.addEventListener("mouseover", function(e) {
+    if (!sm) return;
+    var t = e.target.closest("[data-elema-metadata],[data-replit-metadata],[data-component-id]");
+    if (t) {
+      if (t !== he) { he = t; updateOverlay(t, hl, lb); }
+      try { var r=t.getBoundingClientRect(); window.parent.postMessage({type:"ELEMENT_HOVERED",timestamp:Date.now(),elementBounds:{x:r.left,y:r.top,width:r.width,height:r.height},elementName:t.getAttribute("data-elema-name")||t.getAttribute("data-component-name")||t.tagName.toLowerCase()},"*"); } catch(e){}
+    } else { he=null; clearHover(); try { window.parent.postMessage({type:"ELEMENT_HOVERED",timestamp:Date.now(),elementBounds:null,elementName:""},"*"); } catch(e){} }
+  }, true);
+
+  // Click handler
+  document.addEventListener("click", function(e) {
+    if (!sm) return;
+    var t = e.target.closest("[data-elema-metadata],[data-replit-metadata],[data-component-id]");
+    if (!t) return; e.preventDefault(); e.stopPropagation();
+    sel = t; selMeta = getMetadata(t); showSelected(t); clearHover();
+    if (ee) { t.setAttribute("contentEditable","true"); t.focus(); }
+    try { window.parent.postMessage({type:"ELEMENT_SELECTED",payload:selMeta,timestamp:Date.now()},"*"); } catch(e){}
+  }, true);
+
+  // Real-time text sync via input event (for contentEditable)
+  document.addEventListener("input", function(e) {
+    if (!sm || !sel || e.target !== sel) return;
+    var updated = getMetadata(sel);
+    try { window.parent.postMessage({type:"ELEMENT_TEXT_CHANGED",payload:updated,timestamp:Date.now()},"*"); } catch(e2){}
+  }, true);
+
+  // Also sync on blur
+  document.addEventListener("blur", function(e) {
+    if (!sm || !sel || e.target !== sel) return;
+    var updated = getMetadata(sel);
+    try { window.parent.postMessage({type:"ELEMENT_TEXT_CHANGED",payload:updated,timestamp:Date.now()},"*"); } catch(e2){}
+  }, true);
+
+  // postMessage listener
+  window.addEventListener("message", function(event) {
+    var msg = event.data || {};
+    switch (msg.type) {
+      case "TOGGLE_ELEMENTAG":
+      case "TOGGLE_REPLIT_VISUAL_EDITOR":
+        sm = !!msg.enabled; ee = !!msg.enableEditing;
+        document.body.style.cursor = sm ? "crosshair" : "";
+        if (!sm) { sel=null; selMeta=null; clearHover(); clearSelected(); stopTracking(); try { window.parent.postMessage({type:"ELEMENT_UNSELECTED",timestamp:Date.now()},"*"); } catch(e){} }
+        break;
+      case "UPDATE_SELECTED_ELEMENT":
+        if (!sel) break;
+        var a = msg.attributes||{};
+        if (a.className!==void 0) { sel.setAttribute("class",String(a.className)); sel.setAttribute("data-elema-dirty","true"); }
+        if (a.textContent!==void 0) { sel.textContent=String(a.textContent); sel.setAttribute("data-elema-dirty","true"); }
+        if (a.style!==void 0) { var p=String(a.style).split(":"); if(p.length>=2) { sel.style[p[0].trim()]=p.slice(1).join(":").trim(); } sel.setAttribute("data-elema-dirty","true"); }
+        break;
+      case "CLEAR_SELECTION": sel=null; selMeta=null; clearHover(); clearSelected(); stopTracking(); break;
+      case "CLEAR_ELEMENT_DIRTY": if(sel) sel.removeAttribute("data-elema-dirty"); break;
+    }
+  });
+
+  try { window.parent.postMessage({type:"SELECTOR_SCRIPT_LOADED",timestamp:Date.now(),version:V},"*"); } catch(e){}
+})();
+`;
+}
+
+// src/index.ts
+var version = BEACON_VERSION;
+function elementag(options) {
+  let viteRoot = "";
+  let configuredRoot = "";
+  let configuredRootName = "";
+  let clientScript = null;
+  let tailwindConfigPath = null;
+  let tailwindMajorVersion = 4;
+  let tailwindInjectionTarget = null;
+  return {
+    name: "vite-plugin-elementag",
+    enforce: "pre",
+    async configResolved(config) {
+      viteRoot = normalizePath(config.root);
+      configuredRoot = options?.root ? normalizePath(
+        import_node_path2.default.isAbsolute(options.root) ? options.root : import_node_path2.default.resolve(config.root, options.root)
+      ) : viteRoot;
+      configuredRootName = import_node_path2.default.basename(configuredRoot);
+      clientScript = generateBeaconScript();
+      const packageDir = await findClosestPackageDir(configuredRoot);
+      const tailwindSearchRoot = packageDir ?? configuredRoot;
+      tailwindConfigPath = await findTailwindConfigPath(tailwindSearchRoot);
+      tailwindMajorVersion = await detectTailwindMajorVersion(tailwindSearchRoot);
+    },
+    async transform(code, id) {
+      const ext = import_node_path2.default.extname(id);
+      if (!VALID_EXTENSIONS.has(ext)) return null;
+      if (id.includes("node_modules")) return null;
+      const traverseModule = await import("@babel/traverse");
+      const traverse = traverseModule.default?.default ?? traverseModule.default ?? traverseModule;
+      if (typeof traverse !== "function") return null;
+      if (tailwindConfigPath && id === tailwindConfigPath) {
+        return makeTailwindConfigBrowserSafe(code, traverse);
+      }
+      let ast;
+      try {
+        ast = (0, import_parser.parse)(code, {
+          sourceType: "module",
+          plugins: ["jsx", "typescript"]
+        });
+      } catch {
+        return null;
+      }
+      if (usesReactThreeFiber(ast)) return null;
+      const magicString = new import_magic_string.default(code);
+      let didInjectTailwind = false;
+      if (tailwindConfigPath) {
+        const isInjectionCandidate = tailwindInjectionTarget === id || tailwindInjectionTarget === null && id.startsWith(viteRoot + "/");
+        if (isInjectionCandidate) {
+          const relativeConfigPath = normalizePath(
+            import_node_path2.default.relative(import_node_path2.default.dirname(id), tailwindConfigPath)
+          );
+          const importPath = relativeConfigPath.startsWith(".") ? relativeConfigPath : `./${relativeConfigPath}`;
+          magicString.prepend(
+            [
+              `(async () => {`,
+              `  try {`,
+              `    const __el_tag_tw_mod = await import(${JSON.stringify(importPath)});`,
+              `    const __el_tag_tw_raw = __el_tag_tw_mod.default ?? __el_tag_tw_mod;`,
+              `    if (typeof window !== 'undefined' && __el_tag_tw_raw && typeof __el_tag_tw_raw === 'object') {`,
+              `      window.REPLIT_APP_TAILWIND_CONFIG = __el_tag_tw_raw;`,
+              `      window.dispatchEvent(new CustomEvent('replit-tailwind-config-ready'));`,
+              `    }`,
+              `  } catch (e) {`,
+              `    console.warn('[elementag] Failed to load tailwind config:', e);`,
+              `  }`,
+              `})();`
+            ].join("\n") + "\n"
+          );
+          didInjectTailwind = true;
+        }
+      }
+      let currentElement = null;
+      const fragmentAliases = collectFragmentAliases(ast);
+      traverse(ast, {
+        JSXElement: {
+          enter(elementPath) {
+            currentElement = elementPath.node;
+          },
+          exit() {
+            currentElement = null;
+          }
+        },
+        JSXOpeningElement(elementPath) {
+          const jsxNode = elementPath.node;
+          const elementName = getElementName(jsxNode);
+          if (!elementName) return;
+          if (shouldBailout(elementName)) return;
+          if (elementName === "line") return;
+          if (isFragment(elementName, fragmentAliases)) return;
+          if (currentElement) {
+            const { line = 0, column: col = 0 } = jsxNode.loc?.start ?? {};
+            const relativeToConfigured = import_node_path2.default.relative(configuredRoot, id);
+            const componentPath = normalizePath(
+              import_node_path2.default.join(configuredRootName, relativeToConfigured)
+            );
+            const componentMetadata = col === 0 ? `${componentPath}:${line}` : `${componentPath}:${line}:${col}`;
+            const insertPos = jsxNode.name.end ?? 0;
+            magicString.appendLeft(
+              insertPos,
+              ` ${DATA_ATTRIBUTES.METADATA}="${componentMetadata}" ${DATA_ATTRIBUTES.COMPONENT_NAME}="${elementName}"`
+            );
+          }
+        }
+      });
+      if (didInjectTailwind) {
+        tailwindInjectionTarget = id;
+      }
+      return {
+        code: magicString.toString(),
+        map: magicString.generateMap({ hires: true })
+      };
+    },
+    transformIndexHtml() {
+      if (!clientScript) return [];
+      return [
+        {
+          tag: "script",
+          attrs: { type: "module" },
+          children: clientScript,
+          injectTo: "head"
+        },
+        {
+          tag: "script",
+          attrs: {},
+          children: generateClientSideTailwindScript(tailwindMajorVersion),
+          injectTo: "head"
+        }
+      ];
+    }
+  };
+}
+function normalizePath(p) {
+  return p.replace(/\\/g, "/");
+}
+async function findClosestPackageDir(startDir) {
+  let current = import_node_path2.default.resolve(startDir);
+  const { access } = await import("fs/promises");
+  while (true) {
+    try {
+      await access(import_node_path2.default.join(current, "package.json"));
+      return current;
+    } catch {
+    }
+    const parent = import_node_path2.default.dirname(current);
+    if (parent === current) return null;
+    current = parent;
+  }
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  elementag,
+  version
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/constants.ts","../src/ast-utils.ts","../src/tailwind.ts","../src/beacon/index.ts"],"sourcesContent":["import type { Plugin, ResolvedConfig } from \"vite\"\nimport type { SourceMapInput } from \"rollup\"\nimport { parse } from \"@babel/parser\"\nimport type { Visitor } from \"@babel/traverse\"\nimport * as t from \"@babel/types\"\nimport MagicString from \"magic-string\"\nimport path from \"node:path\"\nimport { DATA_ATTRIBUTES, VALID_EXTENSIONS } from \"./constants\"\nimport {\n  getElementName,\n  usesReactThreeFiber,\n  shouldBailout,\n  collectFragmentAliases,\n  isFragment,\n} from \"./ast-utils\"\nimport {\n  findTailwindConfigPath,\n  detectTailwindMajorVersion,\n  generateClientSideTailwindScript,\n  makeTailwindConfigBrowserSafe,\n} from \"./tailwind\"\nimport { generateBeaconScript, BEACON_VERSION } from \"./beacon/index\"\n\nexport interface ElementagOptions {\n  /** Override the root directory for metadata path resolution */\n  root?: string\n}\n\nexport const version = BEACON_VERSION\n\nexport function elementag(options?: ElementagOptions): Plugin {\n  let viteRoot = \"\"\n  let configuredRoot = \"\"\n  let configuredRootName = \"\"\n  let clientScript: string | null = null\n  let tailwindConfigPath: string | null = null\n  let tailwindMajorVersion = 4\n  let tailwindInjectionTarget: string | null = null\n\n  return {\n    name: \"vite-plugin-elementag\",\n    enforce: \"pre\",\n\n    async configResolved(config: ResolvedConfig) {\n      viteRoot = normalizePath(config.root)\n      configuredRoot = options?.root\n        ? normalizePath(\n            path.isAbsolute(options.root)\n              ? options.root\n              : path.resolve(config.root, options.root),\n          )\n        : viteRoot\n      configuredRootName = path.basename(configuredRoot)\n\n      clientScript = generateBeaconScript()\n\n      const packageDir = await findClosestPackageDir(configuredRoot)\n      const tailwindSearchRoot = packageDir ?? configuredRoot\n      tailwindConfigPath = await findTailwindConfigPath(tailwindSearchRoot)\n      tailwindMajorVersion = await detectTailwindMajorVersion(tailwindSearchRoot)\n    },\n\n    async transform(code: string, id: string) {\n      const ext = path.extname(id)\n      if (!VALID_EXTENSIONS.has(ext)) return null\n      if (id.includes(\"node_modules\")) return null\n\n      const traverseModule = await import(\"@babel/traverse\")\n      const traverse =\n        (traverseModule as any).default?.default ??\n        (traverseModule as any).default ??\n        traverseModule\n\n      if (typeof traverse !== \"function\") return null\n\n      if (tailwindConfigPath && id === tailwindConfigPath) {\n        return makeTailwindConfigBrowserSafe(code, traverse) as any\n      }\n\n      let ast: t.File\n      try {\n        ast = parse(code, {\n          sourceType: \"module\",\n          plugins: [\"jsx\", \"typescript\"],\n        })\n      } catch {\n        return null\n      }\n\n      if (usesReactThreeFiber(ast)) return null\n\n      const magicString = new MagicString(code)\n      let didInjectTailwind = false\n\n      if (tailwindConfigPath) {\n        const isInjectionCandidate =\n          tailwindInjectionTarget === id ||\n          (tailwindInjectionTarget === null && id.startsWith(viteRoot + \"/\"))\n        if (isInjectionCandidate) {\n          const relativeConfigPath = normalizePath(\n            path.relative(path.dirname(id), tailwindConfigPath),\n          )\n          const importPath = relativeConfigPath.startsWith(\".\")\n            ? relativeConfigPath\n            : `./${relativeConfigPath}`\n          magicString.prepend(\n            [\n              `(async () => {`,\n              `  try {`,\n              `    const __el_tag_tw_mod = await import(${JSON.stringify(importPath)});`,\n              `    const __el_tag_tw_raw = __el_tag_tw_mod.default ?? __el_tag_tw_mod;`,\n              `    if (typeof window !== 'undefined' && __el_tag_tw_raw && typeof __el_tag_tw_raw === 'object') {`,\n              `      window.REPLIT_APP_TAILWIND_CONFIG = __el_tag_tw_raw;`,\n              `      window.dispatchEvent(new CustomEvent('replit-tailwind-config-ready'));`,\n              `    }`,\n              `  } catch (e) {`,\n              `    console.warn('[elementag] Failed to load tailwind config:', e);`,\n              `  }`,\n              `})();`,\n            ].join(\"\\n\") + \"\\n\",\n          )\n          didInjectTailwind = true\n        }\n      }\n\n      let currentElement: t.JSXElement | null = null\n      const fragmentAliases = collectFragmentAliases(ast)\n\n      traverse(ast, {\n        JSXElement: {\n          enter(elementPath: any) {\n            currentElement = elementPath.node\n          },\n          exit() {\n            currentElement = null\n          },\n        },\n        JSXOpeningElement(elementPath: any) {\n          const jsxNode = elementPath.node as t.JSXOpeningElement\n          const elementName = getElementName(jsxNode)\n          if (!elementName) return\n          if (shouldBailout(elementName)) return\n          if (elementName === \"line\") return\n          if (isFragment(elementName, fragmentAliases)) return\n\n          if (currentElement) {\n            const { line = 0, column: col = 0 } =\n              jsxNode.loc?.start ?? {}\n            const relativeToConfigured = path.relative(configuredRoot, id)\n            const componentPath = normalizePath(\n              path.join(configuredRootName, relativeToConfigured),\n            )\n            const componentMetadata =\n              col === 0\n                ? `${componentPath}:${line}`\n                : `${componentPath}:${line}:${col}`\n\n            const insertPos =\n              (jsxNode.name as any).end ?? 0\n            magicString.appendLeft(\n              insertPos,\n              ` ${DATA_ATTRIBUTES.METADATA}=\"${componentMetadata}\" ${DATA_ATTRIBUTES.COMPONENT_NAME}=\"${elementName}\"`,\n            )\n          }\n        },\n      } as Visitor)\n\n      if (didInjectTailwind) {\n        tailwindInjectionTarget = id\n      }\n\n      return {\n        code: magicString.toString(),\n        map: magicString.generateMap({ hires: true }) as SourceMapInput,\n      }\n    },\n\n    transformIndexHtml() {\n      if (!clientScript) return []\n      return [\n        {\n          tag: \"script\",\n          attrs: { type: \"module\" },\n          children: clientScript,\n          injectTo: \"head\" as const,\n        },\n        {\n          tag: \"script\",\n          attrs: {},\n          children: generateClientSideTailwindScript(tailwindMajorVersion),\n          injectTo: \"head\" as const,\n        },\n      ]\n    },\n  }\n}\n\nfunction normalizePath(p: string): string {\n  return p.replace(/\\\\/g, \"/\")\n}\n\nasync function findClosestPackageDir(\n  startDir: string,\n): Promise<string | null> {\n  let current = path.resolve(startDir)\n  const { access } = await import(\"node:fs/promises\")\n  while (true) {\n    try {\n      await access(path.join(current, \"package.json\"))\n      return current\n    } catch {\n      // continue\n    }\n    const parent = path.dirname(current)\n    if (parent === current) return null\n    current = parent\n  }\n}\n","export const DATA_ATTRIBUTES = {\n  METADATA: \"data-elema-metadata\",\n  COMPONENT_NAME: \"data-elema-name\",\n} as const\n\n/** Only process these file extensions */\nexport const VALID_EXTENSIONS = new Set([\".jsx\", \".tsx\"])\n\n/** R3F (React Three Fiber) import sources — bail out of these files */\nexport const R3F_IMPORT_SOURCES = new Set([\n  \"@react-three/fiber\",\n  \"@react-three/drei\",\n  \"react-three-fiber\",\n])\n\n/** R3F element names that should not be tagged */\nexport const R3F_BAILOUT_ELEMENTS = new Set([\n  \"Canvas\",\n  \"mesh\",\n  \"group\",\n  \"scene\",\n  \"primitive\",\n  \"points\",\n  \"instancedMesh\",\n  \"fog\",\n  \"fogExp2\",\n  \"object3D\",\n])\n\n/** R3F element name patterns that should not be tagged */\nexport const R3F_BAILOUT_PATTERNS = [\n  /Geometry$/,\n  /Material$/,\n  /Light$/,\n  /Camera$/,\n  /Helper$/,\n  /Control$/,\n]\n\n/** Fragment import sources */\nexport const FRAGMENT_IMPORT_SOURCES = new Set([\n  \"react\",\n  \"react/jsx-runtime\",\n])\n\n/** Tailwind config file names to search for */\nexport const TAILWIND_CONFIG_FILES = [\n  \"tailwind.config.ts\",\n  \"tailwind.config.js\",\n  \"tailwind.config.mjs\",\n  \"tailwind.config.cjs\",\n]\n\nexport const TAILWIND_V4_CDN_URL =\n  \"https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4.1.14\"\nexport const TAILWIND_V3_CDN_URL = \"https://cdn.tailwindcss.com/3.4.17\"\n","import * as t from \"@babel/types\"\nimport type { Node } from \"@babel/types\"\nimport {\n  R3F_IMPORT_SOURCES,\n  R3F_BAILOUT_ELEMENTS,\n  R3F_BAILOUT_PATTERNS,\n  FRAGMENT_IMPORT_SOURCES,\n} from \"./constants\"\n\n/** Get the JSX element name from an opening element node */\nexport function getElementName(\n  jsxNode: t.JSXOpeningElement,\n): string | null {\n  const name = jsxNode.name\n  if (name.type === \"JSXIdentifier\") {\n    return name.name\n  }\n  if (name.type === \"JSXMemberExpression\") {\n    const object = name.object\n    const property = name.property\n    if (object.type === \"JSXIdentifier\" && property.type === \"JSXIdentifier\") {\n      return `${object.name}.${property.name}`\n    }\n  }\n  return null\n}\n\n/** Check if a file imports from React Three Fiber (should bail out) */\nexport function usesReactThreeFiber(ast: t.File): boolean {\n  return ast.program.body.some(\n    (node) =>\n      t.isImportDeclaration(node) &&\n      typeof node.source.value === \"string\" &&\n      R3F_IMPORT_SOURCES.has(node.source.value),\n  )\n}\n\n/** Check if an element name should be bailed out (R3F elements/patterns) */\nexport function shouldBailout(name: string): boolean {\n  if (R3F_BAILOUT_ELEMENTS.has(name)) return true\n  return R3F_BAILOUT_PATTERNS.some((pattern) => pattern.test(name))\n}\n\ninterface FragmentAliases {\n  namedAliases: Set<string>\n  namespaceAliases: Set<string>\n}\n\n/** Collect Fragment import aliases from the AST */\nexport function collectFragmentAliases(ast: t.File): FragmentAliases {\n  const namedAliases = new Set<string>()\n  const namespaceAliases = new Set<string>()\n\n  for (const node of ast.program.body) {\n    if (\n      t.isImportDeclaration(node) &&\n      typeof node.source.value === \"string\" &&\n      FRAGMENT_IMPORT_SOURCES.has(node.source.value)\n    ) {\n      for (const specifier of node.specifiers) {\n        if (\n          t.isImportSpecifier(specifier) &&\n          t.isIdentifier(specifier.imported) &&\n          specifier.imported.name === \"Fragment\"\n        ) {\n          namedAliases.add(specifier.local.name)\n        } else if (\n          t.isImportDefaultSpecifier(specifier) ||\n          t.isImportNamespaceSpecifier(specifier)\n        ) {\n          namespaceAliases.add(specifier.local.name)\n        }\n      }\n    }\n  }\n\n  return { namedAliases, namespaceAliases }\n}\n\n/** Check if an element name is a Fragment reference */\nexport function isFragment(\n  name: string,\n  bindings: FragmentAliases,\n): boolean {\n  if (bindings.namedAliases.has(name)) return true\n\n  const dotIndex = name.indexOf(\".\")\n  if (dotIndex !== -1) {\n    const ns = name.slice(0, dotIndex)\n    const prop = name.slice(dotIndex + 1)\n    if (prop === \"Fragment\" && bindings.namespaceAliases.has(ns)) return true\n  }\n\n  return false\n}\n","import fs from \"node:fs/promises\"\nimport path from \"node:path\"\nimport { TAILWIND_CONFIG_FILES, TAILWIND_V3_CDN_URL, TAILWIND_V4_CDN_URL } from \"./constants\"\n\n/** Find the tailwind config file path */\nexport async function findTailwindConfigPath(\n  dir: string,\n): Promise<string | null> {\n  for (const configFile of TAILWIND_CONFIG_FILES) {\n    const configPath = path.join(dir, configFile)\n    try {\n      await fs.access(configPath)\n      return configPath\n    } catch {\n      // file doesn't exist, try next\n    }\n  }\n  return null\n}\n\n/** Detect Tailwind CSS major version from package.json */\nexport async function detectTailwindMajorVersion(\n  packageDir: string,\n): Promise<number> {\n  try {\n    const packageJsonPath = path.join(packageDir, \"package.json\")\n    const content = await fs.readFile(packageJsonPath, \"utf-8\")\n    const pkg = JSON.parse(content)\n    const versionSpec =\n      pkg.dependencies?.tailwindcss ?? pkg.devDependencies?.tailwindcss\n    if (!versionSpec) return 4\n    const match = String(versionSpec).match(/(\\d+)/)\n    if (match) return parseInt(match[1], 10)\n    return 4\n  } catch {\n    return 4\n  }\n}\n\n/**\n * Generate the client-side Tailwind CDN loader script.\n * Injects Tailwind CSS from CDN with project config.\n */\nexport function generateClientSideTailwindScript(\n  majorVersion: number,\n): string {\n  const cdnUrl =\n    majorVersion >= 4\n      ? JSON.stringify(TAILWIND_V4_CDN_URL)\n      : JSON.stringify(TAILWIND_V3_CDN_URL)\n\n  const loadBody =\n    majorVersion >= 4\n      ? `\n        var script = document.createElement('script');\n        script.src = ${cdnUrl};\n\n        if (window.REPLIT_APP_TAILWIND_CONFIG) {\n          script.setAttribute('data-config', JSON.stringify(window.REPLIT_APP_TAILWIND_CONFIG));\n        }\n\n        document.head.appendChild(script);`\n      : `\n        var script = document.createElement('script');\n        script.src = ${cdnUrl};\n\n        script.onload = function() {\n          if (window.REPLIT_APP_TAILWIND_CONFIG) {\n            window.tailwind.config = window.REPLIT_APP_TAILWIND_CONFIG;\n          }\n        };\n\n        document.head.appendChild(script);`\n\n  return `\n(function() {\n  var initialized = false;\n\n  function loadTailwind() {\n    if (initialized) { return; }\n    initialized = true;\n${loadBody}\n  }\n\n  window.addEventListener('replit-init-tailwind', function() {\n    if (window.REPLIT_APP_TAILWIND_CONFIG) {\n      loadTailwind();\n    } else {\n      var configTimeout = setTimeout(function() { loadTailwind(); }, 1000);\n      window.addEventListener('replit-tailwind-config-ready', function() {\n        clearTimeout(configTimeout);\n        loadTailwind();\n      }, { once: true });\n    }\n  });\n})();\n`.trim()\n}\n\n/**\n * Make a Tailwind config file browser-safe by converting require() calls\n * to import statements. Returns null if no conversion needed.\n */\nexport function makeTailwindConfigBrowserSafe(\n  code: string,\n  traverse: (ast: unknown, visitor: unknown) => void,\n): { code: string; map?: unknown } | null {\n  // Parse the code\n  const { parse } = require(\"@babel/parser\")\n  const ast = parse(code, {\n    sourceType: \"module\",\n    plugins: [\"typescript\"],\n  })\n\n  const MagicString = require(\"magic-string\")\n  const s = new MagicString(code)\n  const importBindings = new Map<string, string>()\n  let bindingCounter = 0\n  const requireSites: Array<{\n    start: number\n    end: number\n    binding: string\n  }> = []\n\n  traverse(ast, {\n    CallExpression(nodePath: any) {\n      const node = nodePath.node\n      if (\n        node.callee.type === \"Identifier\" &&\n        node.callee.name === \"require\" &&\n        node.arguments.length === 1 &&\n        node.arguments[0].type === \"StringLiteral\"\n      ) {\n        if (node.start == null || node.end == null) return\n        const moduleName = node.arguments[0].value\n        let binding = importBindings.get(moduleName)\n        if (!binding) {\n          binding = `__req_${bindingCounter++}`\n          importBindings.set(moduleName, binding)\n        }\n        requireSites.push({ start: node.start, end: node.end, binding })\n      }\n    },\n  })\n\n  if (requireSites.length === 0) return null\n\n  const importLines: string[] = []\n  for (const [moduleName, binding] of importBindings) {\n    importLines.push(`import ${binding} from ${JSON.stringify(moduleName)};`)\n  }\n  s.prepend(importLines.join(\"\\n\") + \"\\n\")\n\n  for (const site of requireSites) {\n    s.overwrite(site.start, site.end, site.binding)\n  }\n\n  return { code: s.toString(), map: s.generateMap({ hires: true }) }\n}\n","/**\n * Elementag Beacon — client-side script injected into the page.\n * Handles element selection, hover highlighting, and postMessage\n * communication with the parent Console frame.\n *\n * This is the equivalent of Cartographer's beacon/index.global.js.\n * It's compiled separately and loaded via transformIndexHtml.\n */\n\nexport const BEACON_VERSION = \"0.1.0\"\nexport const HIGHLIGHT_COLOR = \"#0079F2\"\nexport const HIGHLIGHT_BG = \"#0079F210\"\n\nconst HIGHLIGHT_STYLES = `\n  [contenteditable] { outline: none !important; }\n  [contenteditable]:focus { outline: none !important; }\n  .elema-highlighter { position:absolute; z-index:2147483644; box-sizing:border-box; pointer-events:none; outline:2px dashed ${HIGHLIGHT_COLOR}!important; outline-offset:0!important; margin:0!important; padding:0!important; transform:none!important; background:${HIGHLIGHT_BG}!important; opacity:0; }\n  .elema-highlighter-hover { position:fixed; z-index:2147483647; }\n  .elema-highlighter-selected { position:fixed; pointer-events:none; outline:2px solid ${HIGHLIGHT_COLOR}!important; outline-offset:3px!important; background:none!important; }\n  .elema-label { position:absolute; background:${HIGHLIGHT_COLOR}; color:#FFF; padding:4px 8px; border-radius:4px; font-size:14px; font-family:monospace; line-height:1; white-space:nowrap; box-shadow:0 2px 4px rgba(0,0,0,.2); transform:translateY(-100%); margin-top:-4px; left:0; z-index:2147483645; pointer-events:none; opacity:0; }\n  .elema-label-hover { position:fixed; z-index:2147483647; }\n  .elema-label-selected { position:fixed; pointer-events:none; }\n`\n\nexport function generateBeaconScript(): string {\n  return `\n(function() {\n  \"use strict\";\n  var V = ${JSON.stringify(BEACON_VERSION)};\n  var sm = false, ee = false, sel = null, selMeta = null, he = null;\n  var hl = null, lb = null; // hover highlighter + label\n  var selHL = null, selLB = null; // selected highlighter + label\n  var rafId = null;\n\n  function isAllowedOrigin(o) {\n    if (o.startsWith(\"http://localhost:\")) return true;\n    try { var u = new URL(o); return [\".replit.dev\",\".replit.com\",\".replit-staging.com\",\".rp-humain.com\",\".repl.co\"].some(function(d){ return u.hostname===d.slice(1)||u.hostname.endsWith(d); }); } catch(e){ return false; }\n  }\n\n  // Inject styles\n  var st = document.createElement(\"style\"); st.textContent = ${JSON.stringify(HIGHLIGHT_STYLES)}; document.head.appendChild(st);\n\n  // Create hover overlays\n  hl = document.createElement(\"div\"); hl.className = \"elema-highlighter elema-highlighter-hover\"; document.body.appendChild(hl);\n  lb = document.createElement(\"div\"); lb.className = \"elema-label elema-label-hover\"; document.body.appendChild(lb);\n\n  function getMetadata(el) {\n    var path = el.getAttribute(\"data-elema-metadata\")||el.getAttribute(\"data-replit-metadata\")||\"\";\n    var name = el.getAttribute(\"data-elema-name\")||el.getAttribute(\"data-component-name\")||el.tagName.toLowerCase();\n    var cs = window.getComputedStyle(el);\n    var styles = {};\n    var props = [\"backgroundColor\",\"borderTopColor\",\"borderRightColor\",\"borderBottomColor\",\"borderLeftColor\",\"borderTopLeftRadius\",\"borderTopRightRadius\",\"borderBottomRightRadius\",\"borderBottomLeftRadius\",\"borderTopWidth\",\"borderRightWidth\",\"borderBottomWidth\",\"borderLeftWidth\",\"color\",\"display\",\"position\",\"width\",\"height\",\"fontSize\",\"fontFamily\",\"fontWeight\",\"margin\",\"padding\",\"opacity\",\"textAlign\"];\n    for (var i=0;i<props.length;i++) { try { styles[props[i]]=cs[props[i]]; } catch(e){} }\n    var pe = el.parentElement;\n    var parent = pe ? { tagName: pe.tagName.toLowerCase(), className: pe.getAttribute(\"class\")||void 0, textContent: (pe.textContent||\"\").slice(0,100) } : null;\n    var children = [];\n    for (var c=0;c<el.children.length&&c<10;c++) { var ch=el.children[c]; children.push({ tagName:ch.tagName.toLowerCase(), className:ch.getAttribute(\"class\")||void 0, textContent:(ch.textContent||\"\").slice(0,100) }); }\n    return {\n      tagName: el.tagName.toLowerCase(), className: el.getAttribute(\"class\")||void 0, textContent: (el.textContent||\"\").slice(0,100),\n      id: el.getAttribute(\"id\")||void 0, elementPath: path, componentName: name,\n      computedStyles: styles, relatedElements: { parent:parent, children:children },\n      siblingCount: pe?pe.children.length-1:0, hasChildElements: el.children.length>0,\n      originalTextContent: el.textContent||void 0, srcAttribute: el.getAttribute(\"src\")||void 0\n    };\n  }\n\n  function updateOverlay(el, h, l) {\n    if (!el||!h) return;\n    var r = el.getBoundingClientRect();\n    h.style.left=r.left+\"px\"; h.style.top=r.top+\"px\"; h.style.width=r.width+\"px\"; h.style.height=r.height+\"px\"; h.style.opacity=\"1\";\n    if (l) { var n=el.getAttribute(\"data-elema-name\")||el.getAttribute(\"data-component-name\")||el.tagName.toLowerCase(); l.textContent=n; l.style.left=r.left+\"px\"; l.style.top=r.top+\"px\"; l.style.opacity=\"1\"; }\n  }\n\n  function clearHover() { if(hl) hl.style.opacity=\"0\"; if(lb) lb.style.opacity=\"0\"; }\n  function clearSelected() { if(selHL) { selHL.remove(); selHL=null; } if(selLB) { selLB.remove(); selLB=null; } }\n\n  // RAF-based position tracking for selected element\n  function startTracking() {\n    if (rafId) return;\n    function tick() {\n      if (sel) { updateOverlay(sel, selHL, selLB); }\n      rafId = requestAnimationFrame(tick);\n    }\n    rafId = requestAnimationFrame(tick);\n  }\n  function stopTracking() { if (rafId) { cancelAnimationFrame(rafId); rafId=null; } }\n\n  function showSelected(el) {\n    clearSelected();\n    if (!el) return;\n    selHL = document.createElement(\"div\"); selHL.className=\"elema-highlighter elema-highlighter-selected\"; document.body.appendChild(selHL);\n    selLB = document.createElement(\"div\"); selLB.className=\"elema-label elema-label-selected\"; document.body.appendChild(selLB);\n    updateOverlay(el, selHL, selLB);\n    startTracking();\n  }\n\n  // Hover handler\n  document.addEventListener(\"mouseover\", function(e) {\n    if (!sm) return;\n    var t = e.target.closest(\"[data-elema-metadata],[data-replit-metadata],[data-component-id]\");\n    if (t) {\n      if (t !== he) { he = t; updateOverlay(t, hl, lb); }\n      try { var r=t.getBoundingClientRect(); window.parent.postMessage({type:\"ELEMENT_HOVERED\",timestamp:Date.now(),elementBounds:{x:r.left,y:r.top,width:r.width,height:r.height},elementName:t.getAttribute(\"data-elema-name\")||t.getAttribute(\"data-component-name\")||t.tagName.toLowerCase()},\"*\"); } catch(e){}\n    } else { he=null; clearHover(); try { window.parent.postMessage({type:\"ELEMENT_HOVERED\",timestamp:Date.now(),elementBounds:null,elementName:\"\"},\"*\"); } catch(e){} }\n  }, true);\n\n  // Click handler\n  document.addEventListener(\"click\", function(e) {\n    if (!sm) return;\n    var t = e.target.closest(\"[data-elema-metadata],[data-replit-metadata],[data-component-id]\");\n    if (!t) return; e.preventDefault(); e.stopPropagation();\n    sel = t; selMeta = getMetadata(t); showSelected(t); clearHover();\n    if (ee) { t.setAttribute(\"contentEditable\",\"true\"); t.focus(); }\n    try { window.parent.postMessage({type:\"ELEMENT_SELECTED\",payload:selMeta,timestamp:Date.now()},\"*\"); } catch(e){}\n  }, true);\n\n  // Real-time text sync via input event (for contentEditable)\n  document.addEventListener(\"input\", function(e) {\n    if (!sm || !sel || e.target !== sel) return;\n    var updated = getMetadata(sel);\n    try { window.parent.postMessage({type:\"ELEMENT_TEXT_CHANGED\",payload:updated,timestamp:Date.now()},\"*\"); } catch(e2){}\n  }, true);\n\n  // Also sync on blur\n  document.addEventListener(\"blur\", function(e) {\n    if (!sm || !sel || e.target !== sel) return;\n    var updated = getMetadata(sel);\n    try { window.parent.postMessage({type:\"ELEMENT_TEXT_CHANGED\",payload:updated,timestamp:Date.now()},\"*\"); } catch(e2){}\n  }, true);\n\n  // postMessage listener\n  window.addEventListener(\"message\", function(event) {\n    var msg = event.data || {};\n    switch (msg.type) {\n      case \"TOGGLE_ELEMENTAG\":\n      case \"TOGGLE_REPLIT_VISUAL_EDITOR\":\n        sm = !!msg.enabled; ee = !!msg.enableEditing;\n        document.body.style.cursor = sm ? \"crosshair\" : \"\";\n        if (!sm) { sel=null; selMeta=null; clearHover(); clearSelected(); stopTracking(); try { window.parent.postMessage({type:\"ELEMENT_UNSELECTED\",timestamp:Date.now()},\"*\"); } catch(e){} }\n        break;\n      case \"UPDATE_SELECTED_ELEMENT\":\n        if (!sel) break;\n        var a = msg.attributes||{};\n        if (a.className!==void 0) { sel.setAttribute(\"class\",String(a.className)); sel.setAttribute(\"data-elema-dirty\",\"true\"); }\n        if (a.textContent!==void 0) { sel.textContent=String(a.textContent); sel.setAttribute(\"data-elema-dirty\",\"true\"); }\n        if (a.style!==void 0) { var p=String(a.style).split(\":\"); if(p.length>=2) { sel.style[p[0].trim()]=p.slice(1).join(\":\").trim(); } sel.setAttribute(\"data-elema-dirty\",\"true\"); }\n        break;\n      case \"CLEAR_SELECTION\": sel=null; selMeta=null; clearHover(); clearSelected(); stopTracking(); break;\n      case \"CLEAR_ELEMENT_DIRTY\": if(sel) sel.removeAttribute(\"data-elema-dirty\"); break;\n    }\n  });\n\n  try { window.parent.postMessage({type:\"SELECTOR_SCRIPT_LOADED\",timestamp:Date.now(),version:V},\"*\"); } catch(e){}\n})();\n`\n}\n"],"mappings":"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","names":["import_node_path","path","fs","parse","MagicString","path","MagicString"]}

package/dist/index.d.cts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vite';
+
+interface ElementagOptions {
+    /** Override the root directory for metadata path resolution */
+    root?: string;
+}
+declare const version = "0.1.0";
+declare function elementag(options?: ElementagOptions): Plugin;
+
+export { type ElementagOptions, elementag, version };

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'vite';
+
+interface ElementagOptions {
+    /** Override the root directory for metadata path resolution */
+    root?: string;
+}
+declare const version = "0.1.0";
+declare function elementag(options?: ElementagOptions): Plugin;
+
+export { type ElementagOptions, elementag, version };