uilint-react 0.1.49 → 0.1.51

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-TPLIZJA5.js → ElementBadges-2CTPMJ6L.js} +2 -1
  2. package/dist/{InspectionPanel-FKDEPTX7.js → InspectionPanel-NXSE7CMH.js} +2 -2
  3. package/dist/{LocatorOverlay-W33BHLRE.js → LocatorOverlay-3TKK74BD.js} +2 -2
  4. package/dist/{UILintToolbar-OQ44CM63.js → UILintToolbar-CLVXQHCZ.js} +2 -2
  5. package/dist/{chunk-N6U5BUAN.js → chunk-552GIJIQ.js} +4 -4
  6. package/dist/{chunk-IRG3I75F.js → chunk-K46BWHFU.js} +96 -68
  7. package/dist/{chunk-URAH2PAM.js → chunk-KKNPFLL2.js} +3 -1
  8. package/dist/{chunk-2BV2MBAM.js → chunk-Z4AAGFIN.js} +2 -1
  9. package/dist/index.js +4 -4
  10. package/package.json +2 -2
package/dist/{ElementBadges-TPLIZJA5.js → ElementBadges-2CTPMJ6L.js} RENAMED
@@ -3,7 +3,7 @@
3
3
  import {
4
4
  useUILintContext,
5
5
  useUILintStore
6
- } from "./chunk-N6U5BUAN.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";
@@ -403,6 +403,7 @@ function ElementBadges() {
403
403
  {
404
404
  "data-ui-lint": true,
405
405
  onMouseDown: handleUILintInteraction,
406
+ onPointerDown: handleUILintInteraction,
406
407
  onClick: handleUILintInteraction,
407
408
  onKeyDown: handleUILintInteraction,
408
409
  style: { pointerEvents: "none" },
package/dist/{InspectionPanel-FKDEPTX7.js → InspectionPanel-NXSE7CMH.js} RENAMED
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import {
4
4
  InspectionPanel
5
- } from "./chunk-2BV2MBAM.js";
5
+ } from "./chunk-Z4AAGFIN.js";
6
6
  import "./chunk-S4IWHBOQ.js";
7
- import "./chunk-N6U5BUAN.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  InspectionPanel
10
10
  };
package/dist/{LocatorOverlay-W33BHLRE.js → LocatorOverlay-3TKK74BD.js} RENAMED
@@ -3,8 +3,8 @@
3
3
  import {
4
4
  InspectedElementHighlight,
5
5
  LocatorOverlay
6
- } from "./chunk-IRG3I75F.js";
7
- import "./chunk-N6U5BUAN.js";
6
+ } from "./chunk-K46BWHFU.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  InspectedElementHighlight,
10
10
  LocatorOverlay
package/dist/{UILintToolbar-OQ44CM63.js → UILintToolbar-CLVXQHCZ.js} RENAMED
@@ -2,9 +2,9 @@
2
2
  "use client";
3
3
  import {
4
4
  UILintToolbar
5
- } from "./chunk-URAH2PAM.js";
5
+ } from "./chunk-KKNPFLL2.js";
6
6
  import "./chunk-S4IWHBOQ.js";
7
- import "./chunk-N6U5BUAN.js";
7
+ import "./chunk-552GIJIQ.js";
8
8
  export {
9
9
  UILintToolbar
10
10
  };
package/dist/{chunk-N6U5BUAN.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-OQ44CM63.js"),
1067
- import("./InspectionPanel-FKDEPTX7.js"),
1068
- import("./LocatorOverlay-W33BHLRE.js"),
1069
- import("./ElementBadges-TPLIZJA5.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-IRG3I75F.js → chunk-K46BWHFU.js} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useUILintContext
4
- } from "./chunk-N6U5BUAN.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 }) {
@@ -171,6 +185,9 @@ function InspectedElementHighlight() {
171
185
  const { inspectedElement } = useUILintContext();
172
186
  const [mounted, setMounted] = useState(false);
173
187
  const [rect, setRect] = useState(null);
188
+ const handleUILintInteraction = (e) => {
189
+ e.stopPropagation();
190
+ };
174
191
  useEffect(() => {
175
192
  setMounted(true);
176
193
  }, []);
@@ -190,50 +207,61 @@ function InspectedElementHighlight() {
190
207
  };
191
208
  }, [inspectedElement?.element]);
192
209
  if (!mounted || !inspectedElement || !rect) return null;
193
- const content = /* @__PURE__ */ jsxs("div", { "data-ui-lint": true, style: { pointerEvents: "none" }, children: [
194
- /* @__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: `
195
221
  @keyframes uilint-inspected-pulse {
196
222
  0%, 100% { box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.6), 0 0 8px rgba(16, 185, 129, 0.3); }
197
223
  50% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.8), 0 0 16px rgba(16, 185, 129, 0.5); }
198
224
  }
199
225
  ` }),
200
- /* @__PURE__ */ jsx(
201
- "div",
202
- {
203
- style: {
204
- position: "fixed",
205
- top: rect.top - 3,
206
- left: rect.left - 3,
207
- width: rect.width + 6,
208
- height: rect.height + 6,
209
- border: "2px solid #10B981",
210
- borderRadius: "6px",
211
- backgroundColor: "rgba(16, 185, 129, 0.08)",
212
- animation: "uilint-inspected-pulse 2s ease-in-out infinite",
213
- zIndex: 99996
214
- }
215
- }
216
- ),
217
- /* @__PURE__ */ jsx(
218
- "div",
219
- {
220
- style: {
221
- position: "fixed",
222
- top: rect.top - 24,
223
- left: rect.left - 3,
224
- padding: "2px 8px",
225
- backgroundColor: "#10B981",
226
- color: "#FFFFFF",
227
- fontSize: "10px",
228
- fontWeight: 600,
229
- fontFamily: STYLES.font,
230
- borderRadius: "4px 4px 0 0",
231
- zIndex: 99996
232
- },
233
- children: "Inspecting"
234
- }
235
- )
236
- ] });
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
+ );
237
265
  return createPortal(content, document.body);
238
266
  }
239
267
 
package/dist/{chunk-URAH2PAM.js → chunk-KKNPFLL2.js} RENAMED
@@ -9,7 +9,7 @@ import {
9
9
  groupBySourceFile,
10
10
  useUILintContext,
11
11
  useUILintStore
12
- } from "./chunk-N6U5BUAN.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";
@@ -1101,6 +1101,7 @@ function ScanPanelStack({ show, onClose }) {
1101
1101
  ref: containerRef,
1102
1102
  "data-ui-lint": true,
1103
1103
  onMouseDown: handleUILintInteraction,
1104
+ onPointerDown: handleUILintInteraction,
1104
1105
  onClick: handleUILintInteraction,
1105
1106
  onKeyDown: handleUILintInteraction,
1106
1107
  style: {
@@ -1795,6 +1796,7 @@ function UILintToolbar() {
1795
1796
  {
1796
1797
  "data-ui-lint": true,
1797
1798
  onMouseDown: handleUILintInteraction,
1799
+ onPointerDown: handleUILintInteraction,
1798
1800
  onClick: handleUILintInteraction,
1799
1801
  onKeyDown: handleUILintInteraction,
1800
1802
  style: {
package/dist/{chunk-2BV2MBAM.js → chunk-Z4AAGFIN.js} RENAMED
@@ -7,7 +7,7 @@ import {
7
7
  buildEditorUrl,
8
8
  useUILintContext,
9
9
  useUILintStore
10
- } from "./chunk-N6U5BUAN.js";
10
+ } from "./chunk-552GIJIQ.js";
11
11
 
12
12
  // src/components/ui-lint/InspectionPanel.tsx
13
13
  import React, {
@@ -362,6 +362,7 @@ function InspectionPanel() {
362
362
  ref: popoverRef,
363
363
  "data-ui-lint": true,
364
364
  onMouseDown: handleUILintInteraction,
365
+ onPointerDown: handleUILintInteraction,
365
366
  onClick: handleUILintInteraction,
366
367
  onKeyDown: handleUILintInteraction,
367
368
  style: {
package/dist/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  UILintToolbar
4
- } from "./chunk-URAH2PAM.js";
4
+ } from "./chunk-KKNPFLL2.js";
5
5
  import {
6
6
  InspectionPanel
7
- } from "./chunk-2BV2MBAM.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-IRG3I75F.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-N6U5BUAN.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.49",
3
+ "version": "0.1.51",
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.49",
37
+ "uilint-core": "^0.1.51",
38
38
  "zustand": "^5.0.5"
39
39
  },
40
40
  "peerDependencies": {