uilint-react 0.1.50 → 0.1.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/{ElementBadges-ISBIBC3T.js → ElementBadges-2CTPMJ6L.js} +1 -7
  2. package/dist/{InspectionPanel-OCCB5KUE.js → InspectionPanel-NXSE7CMH.js} +2 -2
  3. package/dist/{LocatorOverlay-VACYO52F.js → LocatorOverlay-3TKK74BD.js} +2 -2
  4. package/dist/{UILintToolbar-TXSF3YZF.js → UILintToolbar-CLVXQHCZ.js} +2 -2
  5. package/dist/{chunk-TLHXCIXS.js → chunk-552GIJIQ.js} +4 -4
  6. package/dist/{chunk-TQTSKK5G.js → chunk-K46BWHFU.js} +96 -72
  7. package/dist/{chunk-ZNBNHYJX.js → chunk-KKNPFLL2.js} +8 -18
  8. package/dist/{chunk-NOYDJR7R.js → chunk-Z4AAGFIN.js} +1 -3
  9. package/dist/index.js +4 -4
  10. package/package.json +2 -2
package/dist/{ElementBadges-ISBIBC3T.js → ElementBadges-2CTPMJ6L.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  import {
4
4
  useUILintContext,
5
5
  useUILintStore
6
- } from "./chunk-TLHXCIXS.js";
6
+ } from "./chunk-552GIJIQ.js";
7
7
 
8
8
  // src/components/ui-lint/ElementBadges.tsx
9
9
  import React, { useState, useEffect, useCallback, useMemo } from "react";
@@ -404,8 +404,6 @@ function ElementBadges() {
404
404
  "data-ui-lint": true,
405
405
  onMouseDown: handleUILintInteraction,
406
406
  onPointerDown: handleUILintInteraction,
407
- onPointerUp: handleUILintInteraction,
408
- onTouchStart: handleUILintInteraction,
409
407
  onClick: handleUILintInteraction,
410
408
  onKeyDown: handleUILintInteraction,
411
409
  style: { pointerEvents: "none" },
@@ -488,9 +486,6 @@ function NudgedBadge({
488
486
  },
489
487
  [element, issue, onSelect]
490
488
  );
491
- const handlePointerDown = useCallback((e) => {
492
- e.stopPropagation();
493
- }, []);
494
489
  const hoveredBadge = useMemo(() => {
495
490
  if (hoveredIndex === null) return null;
496
491
  return nearbyBadges[hoveredIndex] ?? null;
@@ -573,7 +568,6 @@ function NudgedBadge({
573
568
  "data-ui-lint": true,
574
569
  onMouseEnter: handleMouseEnter,
575
570
  onMouseLeave: handleMouseLeave,
576
- onPointerDown: handlePointerDown,
577
571
  onClick: handleClick,
578
572
  children: /* @__PURE__ */ jsx(
579
573
  "div",
package/dist/{InspectionPanel-OCCB5KUE.js → InspectionPanel-NXSE7CMH.js} RENAMED
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import {
4
4
  InspectionPanel
5
- } from "./chunk-NOYDJR7R.js";
5
+ } from "./chunk-Z4AAGFIN.js";
6
6
  import "./chunk-S4IWHBOQ.js";
7
- import "./chunk-TLHXCIXS.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  InspectionPanel
10
10
  };
package/dist/{LocatorOverlay-VACYO52F.js → LocatorOverlay-3TKK74BD.js} RENAMED
@@ -3,8 +3,8 @@
3
3
  import {
4
4
  InspectedElementHighlight,
5
5
  LocatorOverlay
6
- } from "./chunk-TQTSKK5G.js";
7
- import "./chunk-TLHXCIXS.js";
6
+ } from "./chunk-K46BWHFU.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  InspectedElementHighlight,
10
10
  LocatorOverlay
package/dist/{UILintToolbar-TXSF3YZF.js → UILintToolbar-CLVXQHCZ.js} RENAMED
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import {
4
4
  UILintToolbar
5
- } from "./chunk-ZNBNHYJX.js";
5
+ } from "./chunk-KKNPFLL2.js";
6
6
  import "./chunk-S4IWHBOQ.js";
7
- import "./chunk-TLHXCIXS.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  UILintToolbar
10
10
  };
package/dist/{chunk-TLHXCIXS.js → chunk-552GIJIQ.js} RENAMED
@@ -1063,10 +1063,10 @@ function UILintUI() {
1063
1063
  const [components, setComponents] = useState(null);
1064
1064
  useEffect2(() => {
1065
1065
  Promise.all([
1066
- import("./UILintToolbar-TXSF3YZF.js"),
1067
- import("./InspectionPanel-OCCB5KUE.js"),
1068
- import("./LocatorOverlay-VACYO52F.js"),
1069
- import("./ElementBadges-ISBIBC3T.js")
1066
+ import("./UILintToolbar-CLVXQHCZ.js"),
1067
+ import("./InspectionPanel-NXSE7CMH.js"),
1068
+ import("./LocatorOverlay-3TKK74BD.js"),
1069
+ import("./ElementBadges-2CTPMJ6L.js")
1070
1070
  ]).then(([toolbar, panel, locator, badges]) => {
1071
1071
  setComponents({
1072
1072
  Toolbar: toolbar.UILintToolbar,
package/dist/{chunk-TQTSKK5G.js → chunk-K46BWHFU.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useUILintContext
4
- } from "./chunk-TLHXCIXS.js";
4
+ } from "./chunk-552GIJIQ.js";
5
5
 
6
6
  // src/components/ui-lint/LocatorOverlay.tsx
7
7
  import { useState, useEffect, useMemo } from "react";
@@ -26,6 +26,9 @@ function getFileName(path) {
26
26
  function LocatorOverlay() {
27
27
  const { locatorTarget } = useUILintContext();
28
28
  const [mounted, setMounted] = useState(false);
29
+ const handleUILintInteraction = (e) => {
30
+ e.stopPropagation();
31
+ };
29
32
  useEffect(() => {
30
33
  setMounted(true);
31
34
  }, []);
@@ -39,8 +42,17 @@ function LocatorOverlay() {
39
42
  }, [locatorTarget]);
40
43
  if (!mounted || !locatorTarget) return null;
41
44
  const { rect } = locatorTarget;
42
- const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
43
- /* @__PURE__ */ jsx("style", { children: `
45
+ const content = /* @__PURE__ */ jsxs(
46
+ "div",
47
+ {
48
+ "data-ui-lint": true,
49
+ onMouseDown: handleUILintInteraction,
50
+ onPointerDown: handleUILintInteraction,
51
+ onClick: handleUILintInteraction,
52
+ onKeyDown: handleUILintInteraction,
53
+ style: { pointerEvents: "none" },
54
+ children: [
55
+ /* @__PURE__ */ jsx("style", { children: `
44
56
  @keyframes uilint-locator-fade-in {
45
57
  from { opacity: 0; }
46
58
  to { opacity: 1; }
@@ -50,32 +62,34 @@ function LocatorOverlay() {
50
62
  50% { opacity: 1; }
51
63
  }
52
64
  ` }),
53
- /* @__PURE__ */ jsx(
54
- "div",
55
- {
56
- style: {
57
- position: "fixed",
58
- top: rect.top - 2,
59
- left: rect.left - 2,
60
- width: rect.width + 4,
61
- height: rect.height + 4,
62
- border: `2px solid ${STYLES.borderHighlight}`,
63
- borderRadius: "4px",
64
- boxShadow: `0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 0 0 1px rgba(59, 130, 246, 0.1)`,
65
- animation: "uilint-locator-fade-in 0.1s ease-out",
66
- zIndex: 99997
67
- }
68
- }
69
- ),
70
- /* @__PURE__ */ jsx(
71
- InfoTooltip,
72
- {
73
- rect,
74
- source: currentSource,
75
- componentName: currentName
76
- }
77
- )
78
- ] });
65
+ /* @__PURE__ */ jsx(
66
+ "div",
67
+ {
68
+ style: {
69
+ position: "fixed",
70
+ top: rect.top - 2,
71
+ left: rect.left - 2,
72
+ width: rect.width + 4,
73
+ height: rect.height + 4,
74
+ border: `2px solid ${STYLES.borderHighlight}`,
75
+ borderRadius: "4px",
76
+ boxShadow: `0 0 0 1px rgba(59, 130, 246, 0.3), inset 0 0 0 1px rgba(59, 130, 246, 0.1)`,
77
+ animation: "uilint-locator-fade-in 0.1s ease-out",
78
+ zIndex: 99997
79
+ }
80
+ }
81
+ ),
82
+ /* @__PURE__ */ jsx(
83
+ InfoTooltip,
84
+ {
85
+ rect,
86
+ source: currentSource,
87
+ componentName: currentName
88
+ }
89
+ )
90
+ ]
91
+ }
92
+ );
79
93
  return createPortal(content, document.body);
80
94
  }
81
95
  function InfoTooltip({ rect, source, componentName }) {
@@ -97,10 +111,6 @@ function InfoTooltip({ rect, source, componentName }) {
97
111
  return /* @__PURE__ */ jsxs(
98
112
  "div",
99
113
  {
100
- "data-ui-lint": true,
101
- onPointerDown: (e) => e.stopPropagation(),
102
- onPointerUp: (e) => e.stopPropagation(),
103
- onTouchStart: (e) => e.stopPropagation(),
104
114
  style: {
105
115
  ...tooltipStyle,
106
116
  display: "flex",
@@ -175,6 +185,9 @@ function InspectedElementHighlight() {
175
185
  const { inspectedElement } = useUILintContext();
176
186
  const [mounted, setMounted] = useState(false);
177
187
  const [rect, setRect] = useState(null);
188
+ const handleUILintInteraction = (e) => {
189
+ e.stopPropagation();
190
+ };
178
191
  useEffect(() => {
179
192
  setMounted(true);
180
193
  }, []);
@@ -194,50 +207,61 @@ function InspectedElementHighlight() {
194
207
  };
195
208
  }, [inspectedElement?.element]);
196
209
  if (!mounted || !inspectedElement || !rect) return null;
197
- const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
198
- /* @__PURE__ */ jsx("style", { children: `
210
+ const content = /* @__PURE__ */ jsxs(
211
+ "div",
212
+ {
213
+ "data-ui-lint": true,
214
+ onMouseDown: handleUILintInteraction,
215
+ onPointerDown: handleUILintInteraction,
216
+ onClick: handleUILintInteraction,
217
+ onKeyDown: handleUILintInteraction,
218
+ style: { pointerEvents: "none" },
219
+ children: [
220
+ /* @__PURE__ */ jsx("style", { children: `
199
221
  @keyframes uilint-inspected-pulse {
200
222
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6), 0 0 8px rgba(16, 185, 129, 0.3); }
201
223
  50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.8), 0 0 16px rgba(16, 185, 129, 0.5); }
202
224
  }
203
225
  ` }),
204
- /* @__PURE__ */ jsx(
205
- "div",
206
- {
207
- style: {
208
- position: "fixed",
209
- top: rect.top - 3,
210
- left: rect.left - 3,
211
- width: rect.width + 6,
212
- height: rect.height + 6,
213
- border: "2px solid #10B981",
214
- borderRadius: "6px",
215
- backgroundColor: "rgba(16, 185, 129, 0.08)",
216
- animation: "uilint-inspected-pulse 2s ease-in-out infinite",
217
- zIndex: 99996
218
- }
219
- }
220
- ),
221
- /* @__PURE__ */ jsx(
222
- "div",
223
- {
224
- style: {
225
- position: "fixed",
226
- top: rect.top - 24,
227
- left: rect.left - 3,
228
- padding: "2px 8px",
229
- backgroundColor: "#10B981",
230
- color: "#FFFFFF",
231
- fontSize: "10px",
232
- fontWeight: 600,
233
- fontFamily: STYLES.font,
234
- borderRadius: "4px 4px 0 0",
235
- zIndex: 99996
236
- },
237
- children: "Inspecting"
238
- }
239
- )
240
- ] });
226
+ /* @__PURE__ */ jsx(
227
+ "div",
228
+ {
229
+ style: {
230
+ position: "fixed",
231
+ top: rect.top - 3,
232
+ left: rect.left - 3,
233
+ width: rect.width + 6,
234
+ height: rect.height + 6,
235
+ border: "2px solid #10B981",
236
+ borderRadius: "6px",
237
+ backgroundColor: "rgba(16, 185, 129, 0.08)",
238
+ animation: "uilint-inspected-pulse 2s ease-in-out infinite",
239
+ zIndex: 99996
240
+ }
241
+ }
242
+ ),
243
+ /* @__PURE__ */ jsx(
244
+ "div",
245
+ {
246
+ style: {
247
+ position: "fixed",
248
+ top: rect.top - 24,
249
+ left: rect.left - 3,
250
+ padding: "2px 8px",
251
+ backgroundColor: "#10B981",
252
+ color: "#FFFFFF",
253
+ fontSize: "10px",
254
+ fontWeight: 600,
255
+ fontFamily: STYLES.font,
256
+ borderRadius: "4px 4px 0 0",
257
+ zIndex: 99996
258
+ },
259
+ children: "Inspecting"
260
+ }
261
+ )
262
+ ]
263
+ }
264
+ );
241
265
  return createPortal(content, document.body);
242
266
  }
243
267
 
package/dist/{chunk-ZNBNHYJX.js → chunk-KKNPFLL2.js} RENAMED
@@ -9,7 +9,7 @@ import {
9
9
  groupBySourceFile,
10
10
  useUILintContext,
11
11
  useUILintStore
12
- } from "./chunk-TLHXCIXS.js";
12
+ } from "./chunk-552GIJIQ.js";
13
13
 
14
14
  // src/components/ui-lint/UILintToolbar.tsx
15
15
  import React3, { useState as useState2, useRef as useRef2, useEffect as useEffect3, useCallback as useCallback2 } from "react";
@@ -1102,8 +1102,6 @@ function ScanPanelStack({ show, onClose }) {
1102
1102
  "data-ui-lint": true,
1103
1103
  onMouseDown: handleUILintInteraction,
1104
1104
  onPointerDown: handleUILintInteraction,
1105
- onPointerUp: handleUILintInteraction,
1106
- onTouchStart: handleUILintInteraction,
1107
1105
  onClick: handleUILintInteraction,
1108
1106
  onKeyDown: handleUILintInteraction,
1109
1107
  style: {
@@ -1675,7 +1673,13 @@ function UILintToolbar() {
1675
1673
  const totalIssues = elementIssues + fileLevelIssues;
1676
1674
  useEffect3(() => {
1677
1675
  const checkForNextOverlay = () => {
1678
- const overlaySelectors = ["data-next-badge-root"];
1676
+ const overlaySelectors = [
1677
+ "nextjs-portal",
1678
+ "[data-nextjs-dialog]",
1679
+ "[data-nextjs-dialog-overlay]",
1680
+ "#__next-build-watcher",
1681
+ "[data-nextjs-toast]"
1682
+ ];
1679
1683
  const hasOverlay = overlaySelectors.some((selector) => {
1680
1684
  const el = document.querySelector(selector);
1681
1685
  if (!el) return false;
@@ -1793,8 +1797,6 @@ function UILintToolbar() {
1793
1797
  "data-ui-lint": true,
1794
1798
  onMouseDown: handleUILintInteraction,
1795
1799
  onPointerDown: handleUILintInteraction,
1796
- onPointerUp: handleUILintInteraction,
1797
- onTouchStart: handleUILintInteraction,
1798
1800
  onClick: handleUILintInteraction,
1799
1801
  onKeyDown: handleUILintInteraction,
1800
1802
  style: {
@@ -1814,12 +1816,6 @@ function UILintToolbar() {
1814
1816
  ref: toolbarRef,
1815
1817
  role: "toolbar",
1816
1818
  "aria-label": "UI Lint toolbar",
1817
- onMouseDown: handleUILintInteraction,
1818
- onPointerDown: handleUILintInteraction,
1819
- onPointerUp: handleUILintInteraction,
1820
- onTouchStart: handleUILintInteraction,
1821
- onClick: handleUILintInteraction,
1822
- onKeyDown: handleUILintInteraction,
1823
1819
  style: { pointerEvents: "auto" },
1824
1820
  children: renderToolbar()
1825
1821
  }
@@ -1829,12 +1825,6 @@ function UILintToolbar() {
1829
1825
  {
1830
1826
  ref: settingsRef,
1831
1827
  className: `uilint-popover ${settingsClosing ? "uilint-popover--closing" : ""}`,
1832
- onMouseDown: handleUILintInteraction,
1833
- onPointerDown: handleUILintInteraction,
1834
- onPointerUp: handleUILintInteraction,
1835
- onTouchStart: handleUILintInteraction,
1836
- onClick: handleUILintInteraction,
1837
- onKeyDown: handleUILintInteraction,
1838
1828
  style: {
1839
1829
  position: "absolute",
1840
1830
  bottom: "100%",
package/dist/{chunk-NOYDJR7R.js → chunk-Z4AAGFIN.js} RENAMED
@@ -7,7 +7,7 @@ import {
7
7
  buildEditorUrl,
8
8
  useUILintContext,
9
9
  useUILintStore
10
- } from "./chunk-TLHXCIXS.js";
10
+ } from "./chunk-552GIJIQ.js";
11
11
 
12
12
  // src/components/ui-lint/InspectionPanel.tsx
13
13
  import React, {
@@ -363,8 +363,6 @@ function InspectionPanel() {
363
363
  "data-ui-lint": true,
364
364
  onMouseDown: handleUILintInteraction,
365
365
  onPointerDown: handleUILintInteraction,
366
- onPointerUp: handleUILintInteraction,
367
- onTouchStart: handleUILintInteraction,
368
366
  onClick: handleUILintInteraction,
369
367
  onKeyDown: handleUILintInteraction,
370
368
  style: {
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  UILintToolbar
4
- } from "./chunk-ZNBNHYJX.js";
4
+ } from "./chunk-KKNPFLL2.js";
5
5
  import {
6
6
  InspectionPanel
7
- } from "./chunk-NOYDJR7R.js";
7
+ } from "./chunk-Z4AAGFIN.js";
8
8
  import {
9
9
  clearSourceCache,
10
10
  fetchSource,
@@ -14,7 +14,7 @@ import {
14
14
  } from "./chunk-S4IWHBOQ.js";
15
15
  import {
16
16
  LocatorOverlay
17
- } from "./chunk-TQTSKK5G.js";
17
+ } from "./chunk-K46BWHFU.js";
18
18
  import {
19
19
  DATA_UILINT_ID,
20
20
  DEFAULT_SETTINGS,
@@ -30,7 +30,7 @@ import {
30
30
  scanDOMForSources,
31
31
  updateElementRects,
32
32
  useUILintContext
33
- } from "./chunk-TLHXCIXS.js";
33
+ } from "./chunk-552GIJIQ.js";
34
34
 
35
35
  // src/consistency/snapshot.ts
36
36
  var DATA_ELEMENTS_ATTR = "data-elements";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "uilint-react",
3
- "version": "0.1.50",
3
+ "version": "0.1.52",
4
4
  "description": "React component for AI-powered UI consistency checking",
5
5
  "author": "Peter Suggate",
6
6
  "repository": {
@@ -34,7 +34,7 @@
34
34
  "node": ">=20.0.0"
35
35
  },
36
36
  "dependencies": {
37
- "uilint-core": "^0.1.50",
37
+ "uilint-core": "^0.1.52",
38
38
  "zustand": "^5.0.5"
39
39
  },
40
40
  "peerDependencies": {