uilint-react 0.1.29 → 0.1.30

package/dist/{ElementBadges-J4QLKPLG.js → ElementBadges-ZDGDJFQU.js}

@@ -2,7 +2,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-MDEVC3SQ.js";
+} from "./chunk-GJJH5B4Y.js";
 
 // src/components/ui-lint/ElementBadges.tsx
 import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -19,7 +19,9 @@ var DEFAULT_CONFIG = {
 function computeLayout(positions, config) {
   if (positions.length === 0) return [];
   if (positions.length === 1) {
-    return [{ ...positions[0], nudgedX: positions[0].x, nudgedY: positions[0].y }];
+    return [
+      { ...positions[0], nudgedX: positions[0].x, nudgedY: positions[0].y }
+    ];
   }
   const nodes = positions.map((p) => ({
     position: p,

package/dist/{InspectionPanel-G6JJNNY4.js → InspectionPanel-7K662MF5.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   InspectionPanel
-} from "./chunk-LULWI5RD.js";
-import "./chunk-MDEVC3SQ.js";
+} from "./chunk-5CWWYEQM.js";
+import "./chunk-GJJH5B4Y.js";
 export {
   InspectionPanel
 };

package/dist/{LocatorOverlay-MLZ3K4PZ.js → LocatorOverlay-C4IVDVBW.js}

@@ -3,8 +3,8 @@
 import {
   InspectedElementHighlight,
   LocatorOverlay
-} from "./chunk-WUEPTJ24.js";
-import "./chunk-MDEVC3SQ.js";
+} from "./chunk-IMPRRMMY.js";
+import "./chunk-GJJH5B4Y.js";
 export {
   InspectedElementHighlight,
   LocatorOverlay

package/dist/{UILintToolbar-2FFHUGZF.js → UILintToolbar-AX67REOL.js}

@@ -2,8 +2,8 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-PD24RVVC.js";
-import "./chunk-MDEVC3SQ.js";
+} from "./chunk-KBEQSZMW.js";
+import "./chunk-GJJH5B4Y.js";
 export {
   UILintToolbar
 };

package/dist/{chunk-LULWI5RD.js → chunk-5CWWYEQM.js}

@@ -3,7 +3,7 @@ import {
   buildEditorUrl,
   useUILintContext,
   useUILintStore
-} from "./chunk-MDEVC3SQ.js";
+} from "./chunk-GJJH5B4Y.js";
 
 // src/components/ui-lint/InspectionPanel.tsx
 import { useState, useEffect, useCallback, useMemo } from "react";
@@ -570,7 +570,10 @@ function ScanSection({ element }) {
   const manualScan = useUILintStore(
     (s) => s.manualScanCache.get(manualKey)
   );
-  const upsertManualScan = useUILintStore((s) => s.upsertManualScan);
+  const upsertManualScan = useUILintStore(
+    (s) => s.upsertManualScan
+  );
+  const includeChildren = manualScan?.includeChildren ?? false;
   const componentName = element.componentStack[0]?.name || element.element.tagName.toLowerCase();
   const componentLine = element.source?.lineNumber;
   const cachedIssue = useMemo(() => {
@@ -626,6 +629,22 @@ Please update this component to match our styleguide.`;
       });
       return;
     }
+    const MAX_DATALOCS = 80;
+    const selectedDataLoc = element.element.getAttribute("data-loc");
+    let dataLocList = [];
+    if (includeChildren) {
+      const nodes = [
+        element.element,
+        ...Array.from(element.element.querySelectorAll("[data-loc]"))
+      ];
+      for (const n of nodes) {
+        const v = n.getAttribute("data-loc");
+        if (v) dataLocList.push(v);
+      }
+    } else if (selectedDataLoc) {
+      dataLocList = [selectedDataLoc];
+    }
+    dataLocList = Array.from(new Set(dataLocList)).slice(0, MAX_DATALOCS);
     upsertManualScan(manualKey, {
       status: "scanning",
       error: void 0,
@@ -645,7 +664,6 @@ Please update this component to match our styleguide.`;
       const sourceData = await sourceResponse.json();
       const sourceCode = sourceData.content;
       const relativePath = sourceData.relativePath || element.source.fileName;
-      const dataLoc = element.element.getAttribute("data-loc");
       const analyzeResponse = await fetch("/api/.uilint/analyze", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
@@ -654,7 +672,8 @@ Please update this component to match our styleguide.`;
           filePath: relativePath,
           componentName,
           componentLine,
-          dataLocs: dataLoc ? [dataLoc] : void 0,
+          includeChildren,
+          dataLocs: dataLocList.length > 0 ? dataLocList : void 0,
           stream: true
         })
       });
@@ -732,20 +751,24 @@ Please update this component to match our styleguide.`;
     componentLine,
     generateFixPrompt,
     manualKey,
-    upsertManualScan
+    upsertManualScan,
+    includeChildren
   ]);
-  const handleCopy = useCallback(async (text) => {
-    try {
-      await navigator.clipboard.writeText(text);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      upsertManualScan(manualKey, {
-        status: "error",
-        error: "Failed to copy to clipboard"
-      });
-    }
-  }, [manualKey, upsertManualScan]);
+  const handleCopy = useCallback(
+    async (text) => {
+      try {
+        await navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      } catch {
+        upsertManualScan(manualKey, {
+          status: "error",
+          error: "Failed to copy to clipboard"
+        });
+      }
+    },
+    [manualKey, upsertManualScan]
+  );
   const manualStatus = manualScan?.status ?? "idle";
   const showCachedScanning = cachedIssue?.status === "scanning" && manualStatus === "idle";
   const showCachedPending = cachedIssue?.status === "pending" && manualStatus === "idle";
@@ -757,6 +780,7 @@ Please update this component to match our styleguide.`;
   const error = manualScan?.status === "error" ? manualScan.error : null;
   const fixPrompt = manualScan?.fixPrompt ?? null;
   const progressLine = manualScan?.progressLine ?? null;
+  const scopeLabel = includeChildren ? "Element + children" : "Element only";
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -1025,6 +1049,39 @@ Please update this component to match our styleguide.`;
           ) })
         ] }),
         showScanButton && /* @__PURE__ */ jsxs("div", { style: { textAlign: "center", padding: "16px 0" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { marginBottom: "10px" }, children: [
+            /* @__PURE__ */ jsxs(
+              "label",
+              {
+                style: {
+                  display: "inline-flex",
+                  alignItems: "center",
+                  gap: "8px",
+                  fontSize: "12px",
+                  color: STYLES.textMuted,
+                  cursor: "pointer",
+                  userSelect: "none"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      type: "checkbox",
+                      checked: includeChildren,
+                      onChange: (e) => upsertManualScan(manualKey, {
+                        includeChildren: e.currentTarget.checked
+                      })
+                    }
+                  ),
+                  "Include children"
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { style: { marginTop: "6px", fontSize: "11px", color: STYLES.textDim }, children: [
+              "Scope: ",
+              scopeLabel
+            ] })
+          ] }),
           /* @__PURE__ */ jsxs(
             "button",
             {

package/dist/{chunk-MDEVC3SQ.js → chunk-GJJH5B4Y.js}

@@ -796,10 +796,10 @@ function UILintUI() {
   const [components, setComponents] = useState(null);
   useEffect(() => {
     Promise.all([
-      import("./UILintToolbar-2FFHUGZF.js"),
-      import("./InspectionPanel-G6JJNNY4.js"),
-      import("./LocatorOverlay-MLZ3K4PZ.js"),
-      import("./ElementBadges-J4QLKPLG.js")
+      import("./UILintToolbar-AX67REOL.js"),
+      import("./InspectionPanel-7K662MF5.js"),
+      import("./LocatorOverlay-C4IVDVBW.js"),
+      import("./ElementBadges-ZDGDJFQU.js")
     ]).then(([toolbar, panel, locator, badges]) => {
       setComponents({
         Toolbar: toolbar.UILintToolbar,

package/dist/{chunk-WUEPTJ24.js → chunk-IMPRRMMY.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-MDEVC3SQ.js";
+} from "./chunk-GJJH5B4Y.js";
 
 // src/components/ui-lint/LocatorOverlay.tsx
 import { useState, useEffect, useMemo } from "react";

package/dist/{chunk-PD24RVVC.js → chunk-KBEQSZMW.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useUILintContext
-} from "./chunk-MDEVC3SQ.js";
+} from "./chunk-GJJH5B4Y.js";
 
 // src/components/ui-lint/UILintToolbar.tsx
 import { useState, useRef, useEffect } from "react";
@@ -176,14 +176,6 @@ function SettingsPopover({
             children: "UILint Settings"
           }
         ),
-        /* @__PURE__ */ jsx(
-          SettingToggle,
-          {
-            label: "Hide node_modules",
-            checked: settings.hideNodeModules,
-            onChange: (checked) => onUpdate({ hideNodeModules: checked })
-          }
-        ),
         /* @__PURE__ */ jsxs(
           "div",
           {
@@ -432,57 +424,6 @@ function SettingsPopover({
     }
   );
 }
-function SettingToggle({
-  label,
-  checked,
-  onChange
-}) {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        padding: "8px 0",
-        cursor: "pointer"
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: STYLES.textMuted }, children: label }),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            onClick: () => onChange(!checked),
-            style: {
-              width: "36px",
-              height: "20px",
-              borderRadius: "10px",
-              backgroundColor: checked ? STYLES.accent : "rgba(75, 85, 99, 0.5)",
-              position: "relative",
-              transition: "background-color 0.2s"
-            },
-            children: /* @__PURE__ */ jsx(
-              "div",
-              {
-                style: {
-                  position: "absolute",
-                  top: "2px",
-                  left: checked ? "18px" : "2px",
-                  width: "16px",
-                  height: "16px",
-                  borderRadius: "50%",
-                  backgroundColor: "#FFFFFF",
-                  transition: "left 0.2s",
-                  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.2)"
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
 function UILintIcon({ active }) {
   return /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [
     /* @__PURE__ */ jsx(

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 import {
   UILintToolbar
-} from "./chunk-PD24RVVC.js";
+} from "./chunk-KBEQSZMW.js";
 import {
   InspectionPanel,
   clearSourceCache,
@@ -9,10 +9,10 @@ import {
   fetchSourceWithContext,
   getCachedSource,
   prefetchSources
-} from "./chunk-LULWI5RD.js";
+} from "./chunk-5CWWYEQM.js";
 import {
   LocatorOverlay
-} from "./chunk-WUEPTJ24.js";
+} from "./chunk-IMPRRMMY.js";
 import {
   DATA_UILINT_ID,
   DEFAULT_SETTINGS,
@@ -31,7 +31,7 @@ import {
   scanDOMForSources,
   updateElementRects,
   useUILintContext
-} from "./chunk-MDEVC3SQ.js";
+} from "./chunk-GJJH5B4Y.js";
 
 // src/consistency/snapshot.ts
 var DATA_ELEMENTS_ATTR = "data-elements";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uilint-react",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "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.29",
+    "uilint-core": "^0.1.30",
     "zustand": "^5.0.5"
   },
   "peerDependencies": {