@ibealec/create-zed-bridge 1.0.5 → 1.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibealec/create-zed-bridge",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Setup script for @zed-controller/react-bridge and LocatorJS integration",
   "type": "module",
   "bin": {

package/templates/@zed-controller/react-bridge/dist/index.cjs

@@ -200,7 +200,7 @@ function captureContext(element) {
     selectedText: getSelectedText(),
     selectedElement: {
       tagName: element.tagName.toLowerCase(),
-      className: element.className,
+      className: getClassNameString(element),
       id: element.id || void 0,
       innerText: truncateText(element.innerText, 200)
     },
@@ -222,12 +222,22 @@ function getSelectedText() {
   return void 0;
 }
 function truncateText(text, maxLength) {
+  if (!text) return "";
   const cleaned = text.replace(/\s+/g, " ").trim();
   if (cleaned.length <= maxLength) {
     return cleaned;
   }
   return cleaned.slice(0, maxLength) + "...";
 }
+function getClassNameString(element) {
+  if (typeof element.className === "string") {
+    return element.className;
+  }
+  if (element.className && typeof element.className.baseVal === "string") {
+    return element.className.baseVal;
+  }
+  return "";
+}
 function getSourceFile(element) {
   let current = element;
   while (current) {
@@ -330,10 +340,13 @@ function getDomPath(element) {
     let selector = current.tagName.toLowerCase();
     if (current.id) {
       selector += `#${current.id}`;
-    } else if (current.className) {
-      const classes = current.className.split(/\s+/).filter((c) => c && !c.startsWith("__")).slice(0, 2).join(".");
-      if (classes) {
-        selector += `.${classes}`;
+    } else {
+      const classNameStr = getClassNameString(current);
+      if (classNameStr) {
+        const classes = classNameStr.split(/\s+/).filter((c) => c && !c.startsWith("__")).slice(0, 2).join(".");
+        if (classes) {
+          selector += `.${classes}`;
+        }
       }
     }
     path.unshift(selector);
@@ -510,10 +523,14 @@ function createHighlightOverlay() {
       let labelText = element.tagName.toLowerCase();
       if (element.id) {
         labelText += `#${element.id}`;
-      } else if (element.className) {
-        const firstClass = element.className.split(/\s+/)[0];
-        if (firstClass && !firstClass.startsWith("__")) {
-          labelText += `.${firstClass}`;
+      } else {
+        const className = element.className;
+        const classNameStr = typeof className === "string" ? className : className?.baseVal || "";
+        if (classNameStr) {
+          const firstClass = classNameStr.split(/\s+/)[0];
+          if (firstClass && !firstClass.startsWith("__")) {
+            labelText += `.${firstClass}`;
+          }
         }
       }
       label.textContent = labelText;