@treelocator/runtime 0.1.7 → 0.2.0

package/dist/functions/formatAncestryChain.js

@@ -1,3 +1,6 @@
+import { parsePhoenixServerComponents } from "../adapters/phoenix/parsePhoenixComments";
+import { parseNextjsServerComponents } from "../adapters/nextjs/parseNextjsDataAttributes";
+import { normalizeFilePath } from "./normalizeFilePath";
 // Elements to exclude from ancestry (not useful for debugging)
 const EXCLUDED_ELEMENTS = new Set(["html", "body", "head"]);
 function isTreeNodeElement(node) {
@@ -22,7 +25,7 @@ function getNthChildIfAmbiguous(element) {
 function treeNodeComponentToOwnerInfo(comp) {
   return {
     name: comp.label,
-    filePath: comp.callLink?.fileName,
+    filePath: comp.callLink?.fileName ? normalizeFilePath(comp.callLink.fileName) : undefined,
     line: comp.callLink?.lineNumber
   };
 }
@@ -51,6 +54,19 @@ export function collectAncestry(node) {
         if (nthChild !== undefined) {
           item.nthChild = nthChild;
         }
+
+        // Parse server components from various sources
+        // 1. Phoenix LiveView (HTML comments)
+        const phoenixComponents = parsePhoenixServerComponents(element);
+
+        // 2. Next.js Server Components (data-locatorjs attributes)
+        const nextjsComponents = parseNextjsServerComponents(element);
+
+        // Combine all server components
+        const allServerComponents = [...(phoenixComponents || []), ...(nextjsComponents || [])];
+        if (allServerComponents.length > 0) {
+          item.serverComponents = allServerComponents;
+        }
       }
     }
 
@@ -62,7 +78,7 @@ export function collectAncestry(node) {
       // Use outermost component as the primary component name
       item.componentName = outermost.label;
       if (outermost.callLink) {
-        item.filePath = outermost.callLink.fileName;
+        item.filePath = normalizeFilePath(outermost.callLink.fileName);
         item.line = outermost.callLink.lineNumber;
       }
     } else {
@@ -71,18 +87,18 @@ export function collectAncestry(node) {
       if (component) {
         item.componentName = component.label;
         if (component.callLink) {
-          item.filePath = component.callLink.fileName;
+          item.filePath = normalizeFilePath(component.callLink.fileName);
           item.line = component.callLink.lineNumber;
         }
       }
     }
     if (!item.filePath && source) {
-      item.filePath = source.fileName;
+      item.filePath = normalizeFilePath(source.fileName);
       item.line = source.lineNumber;
     }
 
-    // Only include items that have useful info (component name or file path)
-    if (item.componentName || item.filePath) {
+    // Only include items that have useful info (component name, file path, or server components)
+    if (item.componentName || item.filePath || item.serverComponents) {
       items.push(item);
     }
     current = current.getParent();
@@ -101,8 +117,35 @@ export function formatAncestryChain(items) {
     const indent = "    ".repeat(index);
     const prefix = index === 0 ? "" : "└─ ";
 
-    // Build element selector: elementName:nth-child(n)#id
-    let selector = item.elementName;
+    // Get the previous item's component to detect component boundaries
+    const prevItem = index > 0 ? reversed[index - 1] : null;
+    const prevComponentName = prevItem?.componentName || prevItem?.ownerComponents?.[prevItem.ownerComponents.length - 1]?.name;
+
+    // Get current item's innermost component
+    const currentComponentName = item.ownerComponents?.[item.ownerComponents.length - 1]?.name || item.componentName;
+
+    // Determine the display name for the element
+    // Use component name ONLY when crossing a component boundary (root element of a component)
+    // This prevents "App -> App:nth-child(5)" when both are just elements inside App
+    let displayName = item.elementName;
+    let outerComponents = [];
+    const isComponentBoundary = currentComponentName && currentComponentName !== prevComponentName;
+    if (isComponentBoundary) {
+      if (item.ownerComponents && item.ownerComponents.length > 0) {
+        // Use innermost component as display name, show outer ones in "in X > Y"
+        const innermost = item.ownerComponents[item.ownerComponents.length - 1];
+        if (innermost) {
+          displayName = innermost.name;
+          // Outer components (excluding innermost)
+          outerComponents = item.ownerComponents.slice(0, -1).map(c => c.name);
+        }
+      } else if (item.componentName) {
+        displayName = item.componentName;
+      }
+    }
+
+    // Build element selector: displayName:nth-child(n)#id
+    let selector = displayName;
     if (item.nthChild !== undefined) {
       selector += `:nth-child(${item.nthChild})`;
     }
@@ -111,14 +154,60 @@ export function formatAncestryChain(items) {
     }
     let description = selector;
 
-    // Show all owner components if available (Sidebar > GlassPanel)
-    if (item.ownerComponents && item.ownerComponents.length > 0) {
-      const componentChain = item.ownerComponents.map(c => c.name).join(" > ");
-      description = `${selector} in ${componentChain}`;
-    } else if (item.componentName) {
-      description = `${selector} in ${item.componentName}`;
+    // Build component description parts
+    const parts = [];
+
+    // Server components (Phoenix/Next.js/Rails/etc.)
+    if (item.serverComponents && item.serverComponents.length > 0) {
+      // Group server components by framework (detected by file extension)
+      const phoenixComponents = item.serverComponents.filter(sc => sc.filePath.match(/\.(ex|exs|heex)$/));
+      const nextjsComponents = item.serverComponents.filter(sc => sc.filePath.match(/\.(tsx?|jsx?)$/));
+
+      // Format Phoenix components
+      if (phoenixComponents.length > 0) {
+        const names = phoenixComponents.filter(sc => sc.type === "component").map(sc => sc.name);
+        if (names.length > 0) {
+          parts.push(`[Phoenix: ${names.join(" > ")}]`);
+        }
+      }
+
+      // Format Next.js components
+      if (nextjsComponents.length > 0) {
+        const names = nextjsComponents.filter(sc => sc.type === "component").map(sc => sc.name);
+        if (names.length > 0) {
+          parts.push(`[Next.js: ${names.join(" > ")}]`);
+        }
+      }
+    }
+
+    // Client components - show outer components for context (if any)
+    if (outerComponents.length > 0) {
+      parts.push(`in ${outerComponents.join(" > ")}`);
+    }
+    if (parts.length > 0) {
+      description = `${selector} ${parts.join(" ")}`;
+    }
+
+    // Build location string
+    const locationParts = [];
+
+    // Server component locations
+    if (item.serverComponents && item.serverComponents.length > 0) {
+      item.serverComponents.forEach(sc => {
+        const prefix = sc.type === "caller" ? " (called from)" : "";
+        locationParts.push(`${sc.filePath}:${sc.line}${prefix}`);
+      });
+    }
+
+    // Client component location (only add if different from server components)
+    if (item.filePath) {
+      const clientLocation = `${item.filePath}:${item.line}`;
+      // Only add if this location isn't already in the list
+      if (!locationParts.includes(clientLocation)) {
+        locationParts.push(clientLocation);
+      }
     }
-    const location = item.filePath ? ` at ${item.filePath}:${item.line}` : "";
+    const location = locationParts.length > 0 ? ` at ${locationParts.join(", ")}` : "";
     lines.push(`${indent}${prefix}${description}${location}`);
   });
   return lines.join("\n");

package/dist/functions/formatAncestryChain.test.js

@@ -1,7 +1,7 @@
 import { describe, it, expect } from "vitest";
 import { formatAncestryChain } from "./formatAncestryChain";
 describe("formatAncestryChain", () => {
-  it("formats basic ancestry without ID or nth-child", () => {
+  it("uses component name only at component boundaries", () => {
     const items = [{
       elementName: "button",
       componentName: "Button"
@@ -10,23 +10,25 @@ describe("formatAncestryChain", () => {
       componentName: "App"
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe(`div in App
-    └─ button in Button`);
+    // App is root (component boundary), Button is different component (boundary)
+    expect(result).toBe(`App
+    └─ Button`);
   });
-  it("includes ID when present", () => {
+  it("shows element name when same component as parent", () => {
     const items = [{
       elementName: "button",
-      componentName: "Button",
+      componentName: "App",
       id: "submit-btn"
     }, {
       elementName: "div",
       componentName: "App"
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe(`div in App
-    └─ button#submit-btn in Button`);
+    // Both are in App, so second item shows element name not component name
+    expect(result).toBe(`App
+    └─ button#submit-btn`);
   });
-  it("includes nth-child when present", () => {
+  it("includes nth-child with component name at boundary", () => {
     const items = [{
       elementName: "li",
       componentName: "ListItem",
@@ -36,10 +38,11 @@ describe("formatAncestryChain", () => {
       componentName: "List"
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe(`ul in List
-    └─ li:nth-child(3) in ListItem`);
+    // Different components = boundaries
+    expect(result).toBe(`List
+    └─ ListItem:nth-child(3)`);
   });
-  it("includes both nth-child and ID when present", () => {
+  it("includes both nth-child and ID at component boundary", () => {
     const items = [{
       elementName: "li",
       componentName: "ListItem",
@@ -50,10 +53,10 @@ describe("formatAncestryChain", () => {
       componentName: "List"
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe(`ul in List
-    └─ li:nth-child(2)#special-item in ListItem`);
+    expect(result).toBe(`List
+    └─ ListItem:nth-child(2)#special-item`);
   });
-  it("includes file location when present", () => {
+  it("includes file location at component boundary", () => {
     const items = [{
       elementName: "button",
       componentName: "Button",
@@ -62,7 +65,8 @@ describe("formatAncestryChain", () => {
       line: 42
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe("button#save in Button at src/Button.tsx:42");
+    // First item is always a boundary (no previous item)
+    expect(result).toBe("Button#save at src/Button.tsx:42");
   });
   it("formats element without component name", () => {
     const items = [{
@@ -78,7 +82,7 @@ describe("formatAncestryChain", () => {
     const result = formatAncestryChain([]);
     expect(result).toBe("");
   });
-  it("shows all owner components when ownerComponents is provided", () => {
+  it("uses innermost component as display name with outer components in chain", () => {
     const items = [{
       elementName: "div",
       id: "sidebar-panel",
@@ -101,10 +105,11 @@ describe("formatAncestryChain", () => {
       line: 104
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe(`div in App at src/App.jsx:104
-    └─ div#sidebar-panel in Sidebar > GlassPanel at src/components/game/Sidebar.jsx:78`);
+    // GlassPanel (innermost) is the display name, Sidebar (outer) shown in "in"
+    expect(result).toBe(`App at src/App.jsx:104
+    └─ GlassPanel#sidebar-panel in Sidebar at src/components/game/Sidebar.jsx:78`);
   });
-  it("shows single owner component without arrow when only one in chain", () => {
+  it("uses component name as display name when only one in chain", () => {
     const items = [{
       elementName: "button",
       componentName: "Button",
@@ -117,6 +122,7 @@ describe("formatAncestryChain", () => {
       line: 10
     }];
     const result = formatAncestryChain(items);
-    expect(result).toBe("button in Button at src/Button.tsx:10");
+    // Single component becomes the display name, no "in X" needed
+    expect(result).toBe("Button at src/Button.tsx:10");
   });
 });

package/dist/functions/normalizeFilePath.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Convert absolute file paths to relative paths for display.
+ *
+ * This ensures consistent path display across different sources:
+ * - React _debugSource may provide absolute paths
+ * - Next.js data-locatorjs attributes may have absolute paths
+ * - Phoenix comments use relative paths
+ *
+ * Examples:
+ *   - "/Users/name/project/src/App.tsx" → "src/App.tsx"
+ *   - "/workspace/apps/next-16/app/page.tsx" → "app/page.tsx"
+ *   - "src/components/Button.tsx" → "src/components/Button.tsx" (unchanged)
+ */
+export declare function normalizeFilePath(filePath: string): string;

package/dist/functions/normalizeFilePath.js

@@ -0,0 +1,40 @@
+/**
+ * Convert absolute file paths to relative paths for display.
+ *
+ * This ensures consistent path display across different sources:
+ * - React _debugSource may provide absolute paths
+ * - Next.js data-locatorjs attributes may have absolute paths
+ * - Phoenix comments use relative paths
+ *
+ * Examples:
+ *   - "/Users/name/project/src/App.tsx" → "src/App.tsx"
+ *   - "/workspace/apps/next-16/app/page.tsx" → "app/page.tsx"
+ *   - "src/components/Button.tsx" → "src/components/Button.tsx" (unchanged)
+ */
+export function normalizeFilePath(filePath) {
+  // If it's already relative (doesn't start with /), return as-is
+  if (!filePath.startsWith("/")) {
+    return filePath;
+  }
+
+  // Find common project indicators to trim the path
+  const indicators = ["/app/", "/src/", "/pages/", "/components/", "/lib/"];
+  for (const indicator of indicators) {
+    const index = filePath.indexOf(indicator);
+    if (index !== -1) {
+      // Return from the indicator onwards (remove leading slash)
+      return filePath.substring(index + 1);
+    }
+  }
+
+  // If no indicator found, try to get just the last few path segments
+  const parts = filePath.split("/");
+
+  // Return last 3-4 segments if available (e.g., "apps/next-16/app/page.tsx")
+  if (parts.length > 3) {
+    return parts.slice(-4).join("/");
+  }
+
+  // Last resort: return as-is
+  return filePath;
+}

package/dist/output.css

@@ -554,7 +554,7 @@ video {
   display: none;
 }
 
-[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
+input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -571,7 +571,7 @@ video {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
+input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -600,6 +600,11 @@ input::placeholder,textarea::placeholder {
 
 ::-webkit-date-and-time-value {
   min-height: 1.5em;
+  text-align: inherit;
+}
+
+::-webkit-datetime-edit {
+  display: inline-flex;
 }
 
 ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
@@ -617,7 +622,7 @@ select {
           print-color-adjust: exact;
 }
 
-[multiple],[size]:where(select:not([size="1"])) {
+select:where([multiple]),select:where([size]:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -627,7 +632,7 @@ select {
           print-color-adjust: unset;
 }
 
-[type='checkbox'],[type='radio'] {
+input:where([type='checkbox']),input:where([type='radio']) {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -650,15 +655,15 @@ select {
   --tw-shadow: 0 0 #0000;
 }
 
-[type='checkbox'] {
+input:where([type='checkbox']) {
   border-radius: 0px;
 }
 
-[type='radio'] {
+input:where([type='radio']) {
   border-radius: 100%;
 }
 
-[type='checkbox']:focus,[type='radio']:focus {
+input:where([type='checkbox']):focus,input:where([type='radio']):focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -670,7 +675,7 @@ select {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 
-[type='checkbox']:checked,[type='radio']:checked {
+input:where([type='checkbox']):checked,input:where([type='radio']):checked {
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
@@ -678,20 +683,36 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:checked {
+input:where([type='checkbox']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
 
-[type='radio']:checked {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='radio']):checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
 
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
+@media (forced-colors: active)  {
+  input:where([type='radio']):checked {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='checkbox']:indeterminate {
+input:where([type='checkbox']):indeterminate {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -700,12 +721,20 @@ select {
   background-repeat: no-repeat;
 }
 
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
+@media (forced-colors: active)  {
+  input:where([type='checkbox']):indeterminate {
+    -webkit-appearance: auto;
+       -moz-appearance: auto;
+            appearance: auto;
+  }
+}
+
+input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
 }
 
-[type='file'] {
+input:where([type='file']) {
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -715,11 +744,45 @@ select {
   line-height: inherit;
 }
 
-[type='file']:focus {
+input:where([type='file']):focus {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -1184,6 +1247,11 @@ select {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.border-gray-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(107 114 128 / var(--tw-border-opacity, 1));
+}
+
 .border-gray-600 {
   --tw-border-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-border-opacity, 1));
@@ -1351,6 +1419,10 @@ select {
   padding: 1rem;
 }
 
+.p-5 {
+  padding: 1.25rem;
+}
+
 .p-6 {
   padding: 1.5rem;
 }

package/dist/types/ServerComponentInfo.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Represents a server-side component in the ancestry chain.
+ * Used for Phoenix LiveView, Rails ViewComponents, Next.js RSC, etc.
+ */
+export interface ServerComponentInfo {
+    /** Component name (e.g., "AppWeb.CoreComponents.button") or "@caller" for call site */
+    name: string;
+    /** File path (e.g., "lib/app_web/core_components.ex") */
+    filePath: string;
+    /** Line number in the source file */
+    line: number;
+    /** Type of server component annotation */
+    type: "component" | "caller";
+}

package/dist/types/ServerComponentInfo.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@treelocator/runtime",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "TreeLocatorJS runtime for component ancestry tracking. Alt+click any element to copy its component tree to clipboard. Exposes window.__treelocator__ API for browser automation (Playwright, Puppeteer, Selenium, Cypress).",
   "keywords": [
     "locator",
@@ -53,7 +53,8 @@
   "devDependencies": {
     "@babel/cli": "^7.25.9",
     "@babel/core": "^7.26.0",
-    "@treelocator/dev-config": "^0.1.0",
+    "@tailwindcss/forms": "^0.5.11",
+    "@treelocator/dev-config": "^0.2.0",
     "@types/jsdom": "^21.1.7",
     "babel-preset-solid": "^1.9.2",
     "concurrently": "^9.1.0",
@@ -72,5 +73,5 @@
     "directory": "packages/runtime"
   },
   "license": "MIT",
-  "gitHead": "233b05abf1f13da9e1d49b73db62bb8561636618"
+  "gitHead": "5d53daa18f4fef5e815c3fd281b899608f8673ea"
 }

package/src/adapters/adapterApi.ts

@@ -10,7 +10,7 @@ export type ElementInfo = {
 
 export type FullElementInfo = {
   thisElement: ElementInfo;
-  htmlElement: HTMLElement;
+  htmlElement: HTMLElement | SVGElement;
   parentElements: ElementInfo[];
   componentBox: SimpleDOMRect;
   componentsLabels: LabelData[];

package/src/adapters/createTreeNode.ts

@@ -1,22 +1,54 @@
 import { TreeNode } from "../types/TreeNode";
 import { ReactTreeNodeElement } from "./react/reactAdapter";
 import { JSXTreeNodeElement } from "./jsx/jsxAdapter";
+import { SvelteTreeNodeElement } from "./svelte/svelteAdapter";
+import { VueTreeNodeElement } from "./vue/vueAdapter";
 import {
   detectJSX,
   detectReact,
+  detectSvelte,
+  detectVue,
 } from "@locator/shared";
+import { detectPhoenix } from "./phoenix/detectPhoenix";
 
 export function createTreeNode(
   element: HTMLElement,
   adapterId?: string
 ): TreeNode | null {
-  // Check for React adapter
-  if (adapterId === "react" || detectReact()) {
+  // Check for explicit adapter ID first
+  if (adapterId === "react") {
+    return new ReactTreeNodeElement(element);
+  }
+  if (adapterId === "svelte") {
+    return new SvelteTreeNodeElement(element);
+  }
+  if (adapterId === "vue") {
+    return new VueTreeNodeElement(element);
+  }
+  if (adapterId === "jsx") {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Auto-detect framework
+  if (detectSvelte()) {
+    return new SvelteTreeNodeElement(element);
+  }
+
+  if (detectVue()) {
+    return new VueTreeNodeElement(element);
+  }
+
+  if (detectReact()) {
     return new ReactTreeNodeElement(element);
   }
 
   // Check for JSX adapter (babel plugin) - check if element has data-locatorjs-id
-  if (adapterId === "jsx" || detectJSX() || element.dataset.locatorjsId) {
+  if (detectJSX() || element.dataset.locatorjsId) {
+    return new JSXTreeNodeElement(element);
+  }
+
+  // Check for Phoenix LiveView (uses JSX adapter as fallback for pure Phoenix apps)
+  if (detectPhoenix()) {
     return new JSXTreeNodeElement(element);
   }