uilint-react 0.1.37 → 0.1.39

package/dist/{chunk-ITKEGCAZ.js → chunk-NCNRCF5A.js}

@@ -2,7 +2,7 @@
 import {
   buildEditorUrl,
   useUILintContext
-} from "./chunk-DEHJKJNT.js";
+} from "./chunk-ILK73X6L.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";
@@ -199,7 +199,7 @@ function PanelHeader({
   element,
   onClose
 }) {
-  const componentName = element.componentStack[0]?.name || element.element.tagName.toLowerCase();
+  const tagName = element.element.tagName.toLowerCase();
   const handleOpenInCursor = useCallback(() => {
     if (element.source) {
       const url = buildEditorUrl(element.source, "cursor");
@@ -219,11 +219,15 @@ function PanelHeader({
       },
       children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { style: { fontSize: "14px", fontWeight: 600 }, children: componentName }),
-          /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px", fontWeight: 600 }, children: [
             "<",
-            element.element.tagName.toLowerCase(),
+            tagName,
             ">"
+          ] }),
+          element.source && /* @__PURE__ */ jsxs("div", { style: { fontSize: "11px", color: STYLES.textMuted }, children: [
+            element.source.fileName.split("/").pop(),
+            ":",
+            element.source.lineNumber
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
@@ -357,38 +361,6 @@ function InfoTab({ element }) {
           children: element.source.fileName
         }
       ) }),
-      element.componentStack.length > 0 && /* @__PURE__ */ jsx(Section, { title: "Component Stack", children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          style: { display: "flex", flexDirection: "column", gap: "4px" },
-          children: [
-            element.componentStack.slice(0, 10).map((comp, index) => /* @__PURE__ */ jsx(
-              ComponentStackItem,
-              {
-                component: comp,
-                index,
-                isFirst: index === 0
-              },
-              index
-            )),
-            element.componentStack.length > 10 && /* @__PURE__ */ jsxs(
-              "div",
-              {
-                style: {
-                  fontSize: "11px",
-                  color: STYLES.textDim,
-                  marginTop: "4px"
-                },
-                children: [
-                  "...and ",
-                  element.componentStack.length - 10,
-                  " more"
-                ]
-              }
-            )
-          ]
-        }
-      ) }),
       /* @__PURE__ */ jsxs(Section, { title: "Dimensions", children: [
         /* @__PURE__ */ jsx(
           InfoRow,
@@ -867,70 +839,6 @@ function InfoRow({
     }
   );
 }
-function ComponentStackItem({
-  component,
-  index,
-  isFirst
-}) {
-  const handleClick = useCallback(() => {
-    if (component.source) {
-      const url = buildEditorUrl(component.source, "cursor");
-      window.open(url, "_blank");
-    }
-  }, [component.source]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        padding: "6px 8px",
-        marginLeft: index * 8,
-        backgroundColor: isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent",
-        borderRadius: "4px",
-        cursor: component.source ? "pointer" : "default",
-        transition: "background-color 0.15s"
-      },
-      onClick: handleClick,
-      onMouseEnter: (e) => {
-        if (component.source) {
-          e.currentTarget.style.backgroundColor = "rgba(59, 130, 246, 0.15)";
-        }
-      },
-      onMouseLeave: (e) => {
-        e.currentTarget.style.backgroundColor = isFirst ? "rgba(59, 130, 246, 0.1)" : "transparent";
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            style: {
-              fontSize: "12px",
-              fontWeight: isFirst ? 600 : 400,
-              color: isFirst ? STYLES.accent : STYLES.textMuted
-            },
-            children: component.name
-          }
-        ),
-        component.source && /* @__PURE__ */ jsxs(
-          "span",
-          {
-            style: {
-              fontSize: "10px",
-              color: STYLES.textDim,
-              fontFamily: STYLES.fontMono
-            },
-            children: [
-              ":",
-              component.source.lineNumber
-            ]
-          }
-        )
-      ]
-    }
-  );
-}
 function CursorIcon() {
   return /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx(
     "path",

package/dist/index.d.ts

@@ -7,7 +7,7 @@ export { AnalysisResult, ConsistencyResult, DOMSnapshot, ElementRole, ElementSna
  * Types for UILint Source Visualization
  */
 /**
- * Source location from React Fiber _debugSource
+ * Source location from data-loc attribute
  */
 interface SourceLocation {
     fileName: string;
@@ -15,22 +15,20 @@ interface SourceLocation {
     columnNumber?: number;
 }
 /**
- * Component information extracted from React Fiber
- */
-interface ComponentInfo {
-    name: string;
-    source: SourceLocation | null;
-}
-/**
- * A scanned DOM element with its React source information
+ * A scanned DOM element with its source information
+ * Source is always present from data-loc attribute
  */
 interface ScannedElement {
+    /**
+     * Unique per-instance ID derived from data-loc.
+     * Format: "loc:path:line:column#occurrence"
+     */
     id: string;
     element: Element;
     tagName: string;
     className: string;
-    source: SourceLocation | null;
-    componentStack: ComponentInfo[];
+    /** Source location (always present from data-loc) */
+    source: SourceLocation;
     rect: DOMRect;
 }
 /**
@@ -87,19 +85,15 @@ interface ElementIssue {
  */
 interface LocatorTarget {
     element: Element;
-    source: SourceLocation | null;
-    componentStack: ComponentInfo[];
+    source: SourceLocation;
     rect: DOMRect;
-    /** Index in the component stack (0 = current element, higher = parent) */
-    stackIndex: number;
 }
 /**
  * Element being inspected in the sidebar
  */
 interface InspectedElement {
     element: Element;
-    source: SourceLocation | null;
-    componentStack: ComponentInfo[];
+    source: SourceLocation;
     rect: DOMRect;
     /** Optional ID from auto-scan to link to cached results */
     scannedElementId?: string;
@@ -114,26 +108,20 @@ interface UILintContextValue {
     altKeyHeld: boolean;
     /** Current element under cursor when Alt is held */
     locatorTarget: LocatorTarget | null;
-    /** Navigate to parent component in locator mode */
-    locatorGoUp: () => void;
-    /** Navigate to child component in locator mode */
-    locatorGoDown: () => void;
     /** Element currently being inspected in sidebar */
     inspectedElement: InspectedElement | null;
     /** Set the element to inspect (opens sidebar) */
     setInspectedElement: (element: InspectedElement | null) => void;
-    /** Auto-scan state */
+    /** Whether live scanning is enabled */
+    liveScanEnabled: boolean;
+    /** Auto-scan state (for progress tracking) */
     autoScanState: AutoScanState;
-    /** Cache of element issues from auto-scan */
+    /** Cache of element issues from scanning */
     elementIssuesCache: Map<string, ElementIssue>;
-    /** Start auto-scanning all page elements */
-    startAutoScan: () => void;
-    /** Pause the auto-scan */
-    pauseAutoScan: () => void;
-    /** Resume the auto-scan */
-    resumeAutoScan: () => void;
-    /** Stop and reset the auto-scan */
-    stopAutoScan: () => void;
+    /** Enable live scanning */
+    enableLiveScan: () => void;
+    /** Disable live scanning */
+    disableLiveScan: () => void;
 }
 /**
  * Props for the UILintProvider component
@@ -181,11 +169,22 @@ declare function useUILintContext(): UILintContextValue;
 declare function UILintProvider({ children, enabled, }: UILintProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
- * UILint Toolbar - Simple floating button with settings popover
+ * UILint Toolbar - Three-segment pill for live scanning
+ *
+ * Design:
+ * ┌────────────────────────────────────────┐
+ * │  [👁 Toggle]  │  [Issues]  │  [...]   │
+ * └────────────────────────────────────────┘
+ *              ⌥+Click to inspect
+ *
+ * Segments:
+ * 1. Toggle: Enable/disable live scanning mode
+ * 2. Issues: Show issue count, opens results panel
+ * 3. Settings: Ellipsis for settings popover
  */
 
 /**
- * Main Toolbar Component - Simple floating button with settings popover
+ * Main Toolbar Component - Three-segment pill
  */
 declare function UILintToolbar(): React$1.ReactPortal | null;
 
@@ -202,6 +201,8 @@ declare function InspectionPanel(): React$1.ReactPortal | null;
 /**
  * Locator Overlay - Shows element info when Alt/Option key is held
  * Inspired by LocatorJS for a quick "hover to find source" experience
+ *
+ * Uses data-loc attributes only (no React Fiber).
  */
 
 /**
@@ -210,45 +211,18 @@ declare function InspectionPanel(): React$1.ReactPortal | null;
 declare function LocatorOverlay(): React$1.ReactPortal | null;
 
 /**
- * React Fiber inspection utilities for source file visualization
+ * DOM utilities for UILint source file visualization
  *
- * In development mode, React attaches debug information to Fiber nodes:
- * - _debugSource: { fileName, lineNumber, columnNumber }
- * - _debugOwner: The component that rendered this element
- * - return: Parent fiber in the tree
+ * Uses data-loc attributes injected by the jsx-loc-plugin build transform.
+ * This works uniformly for both server and client components in Next.js 15+.
  */
 
-/** React Fiber type (simplified) */
-interface Fiber {
-    tag: number;
-    type: string | Function | null;
-    stateNode: Element | null;
-    return: Fiber | null;
-    _debugSource?: {
-        fileName: string;
-        lineNumber: number;
-        columnNumber?: number;
-    } | null;
-    _debugOwner?: Fiber | null;
-}
-/**
- * Get React Fiber from a DOM element
- * React attaches fiber via __reactFiber$xxx key
- */
-declare function getFiberFromElement(element: Element): Fiber | null;
-/**
- * Extract source location from a fiber's _debugSource
- */
-declare function getDebugSource(fiber: Fiber): SourceLocation | null;
-/**
- * Get the debug owner fiber (component that rendered this element)
- */
-declare function getDebugOwner(fiber: Fiber): Fiber | null;
 /**
- * Build a component stack by walking up the fiber tree
- * Returns an array from innermost to outermost component
+ * Parse source location from data-loc attribute
+ * Format: "path/to/file.tsx:line:column" (injected by jsx-loc-plugin)
+ * Also supports legacy format: "path/to/file.tsx:line"
  */
-declare function getComponentStack(fiber: Fiber): ComponentInfo[];
+declare function getSourceFromDataLoc(element: Element): SourceLocation | null;
 /**
  * Check if a file path is from node_modules
  */
@@ -258,7 +232,7 @@ declare function isNodeModulesPath(path: string): boolean;
  */
 declare function getDisplayName(path: string): string;
 /**
- * Scan the DOM tree and extract React source information
+ * Scan the DOM tree and extract elements with data-loc attributes
  */
 declare function scanDOMForSources(root?: Element, hideNodeModules?: boolean): ScannedElement[];
 /**
@@ -366,4 +340,4 @@ declare function isJSDOM(): boolean;
  */
 declare function isNode(): boolean;
 
-export { type CachedSource, type ComponentInfo, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, type InspectedElement, InspectionPanel, LocatorOverlay, type LocatorTarget, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, type UILintContextValue, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getComponentStack, getDebugOwner, getDebugSource, getDisplayName, getElementById, getElementBySnapshotId, getFiberFromElement, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useUILintContext };
+export { type CachedSource, ConsistencyHighlighter, DATA_UILINT_ID, DEFAULT_SETTINGS, FILE_COLORS, type InspectedElement, InspectionPanel, LocatorOverlay, type LocatorTarget, type ScannedElement, type SourceApiResponse, type SourceFile, type SourceLocation, type UILintContextValue, UILintProvider, type UILintProviderProps, type UILintSettings, UILintToolbar, buildEditorUrl, cleanupDataAttributes, cleanupDataElements, clearSourceCache, createSnapshot, fetchSource, fetchSourceWithContext, getCachedSource, getDisplayName, getElementById, getElementBySnapshotId, getSourceFromDataLoc, groupBySourceFile, isBrowser, isJSDOM, isNode, isNodeModulesPath, prefetchSources, scanDOM, scanDOMForSources, updateElementRects, useUILintContext };

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-EYWLUDXI.js";
+} from "./chunk-4TLFW7LD.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-ITKEGCAZ.js";
+} from "./chunk-NCNRCF5A.js";
 import {
   LocatorOverlay
-} from "./chunk-LZX53CPI.js";
+} from "./chunk-7434TUMX.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -20,18 +20,15 @@ import {
   UILintProvider,
   buildEditorUrl,
   cleanupDataAttributes,
-  getComponentStack,
-  getDebugOwner,
-  getDebugSource,
   getDisplayName,
   getElementById,
-  getFiberFromElement,
+  getSourceFromDataLoc,
   groupBySourceFile,
   isNodeModulesPath,
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-DEHJKJNT.js";
+} from "./chunk-ILK73X6L.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";
@@ -465,13 +462,10 @@ export {
   fetchSourceWithContext,
   generateStyleGuideFromStyles as generateStyleGuide,
   getCachedSource,
-  getComponentStack,
-  getDebugOwner,
-  getDebugSource,
   getDisplayName,
   getElementById,
   getElementBySnapshotId,
-  getFiberFromElement,
+  getSourceFromDataLoc,
   groupBySourceFile,
   isBrowser,
   isJSDOM,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "React component for AI-powered UI consistency checking",
   "author": "Peter Suggate",
   "repository": {
@@ -34,7 +34,7 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
-    "uilint-core": "^0.1.37",
+    "uilint-core": "^0.1.39",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {