storybook 9.1.0-alpha.6 → 9.1.0-alpha.8

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 (88) hide show
  1. package/assets/browser/favicon-wrapper.svg +46 -0
  2. package/assets/browser/favicon.svg +1 -1
  3. package/dist/bin/index.cjs +43 -43
  4. package/dist/bin/index.js +43 -43
  5. package/dist/cli/bin/index.cjs +513 -513
  6. package/dist/cli/bin/index.js +535 -535
  7. package/dist/cli/index.cjs +2454 -2453
  8. package/dist/cli/index.d.ts +10 -3
  9. package/dist/cli/index.js +2436 -2435
  10. package/dist/common/index.cjs +64 -61
  11. package/dist/common/index.d.ts +9 -3
  12. package/dist/common/index.js +64 -61
  13. package/dist/components/index.cjs +4602 -4427
  14. package/dist/components/index.d.ts +9 -11
  15. package/dist/components/index.js +2760 -2580
  16. package/dist/core-server/index.cjs +5833 -5819
  17. package/dist/core-server/index.d.ts +4 -1
  18. package/dist/core-server/index.js +4848 -4835
  19. package/dist/core-server/presets/common-manager.js +3410 -3332
  20. package/dist/core-server/presets/common-preset.cjs +1831 -1837
  21. package/dist/core-server/presets/common-preset.js +1787 -1792
  22. package/dist/csf/index.cjs +2536 -736
  23. package/dist/csf/index.d.ts +250 -9
  24. package/dist/csf/index.js +2558 -749
  25. package/dist/csf-tools/index.cjs +319 -321
  26. package/dist/csf-tools/index.js +239 -241
  27. package/dist/instrumenter/index.cjs +1150 -1099
  28. package/dist/instrumenter/index.d.ts +1 -0
  29. package/dist/instrumenter/index.js +1261 -1214
  30. package/dist/manager/globals-module-info.cjs +0 -1
  31. package/dist/manager/globals-module-info.js +0 -1
  32. package/dist/manager/globals-runtime.js +21740 -24218
  33. package/dist/manager/runtime.js +3715 -3536
  34. package/dist/manager-api/index.cjs +3 -3
  35. package/dist/manager-api/index.d.ts +4 -1
  36. package/dist/manager-api/index.js +3 -3
  37. package/dist/node-logger/index.cjs +1620 -1620
  38. package/dist/node-logger/index.js +1619 -1619
  39. package/dist/preview/runtime.js +13337 -16032
  40. package/dist/preview-api/index.cjs +273 -271
  41. package/dist/preview-api/index.d.ts +4 -1
  42. package/dist/preview-api/index.js +14 -12
  43. package/dist/telemetry/index.cjs +500 -500
  44. package/dist/telemetry/index.d.ts +1 -1
  45. package/dist/telemetry/index.js +478 -478
  46. package/dist/test/index.cjs +9136 -9815
  47. package/dist/test/index.js +8339 -9025
  48. package/dist/types/index.d.ts +12 -12
  49. package/package.json +5 -196
  50. package/dist/actions/preview.cjs +0 -159
  51. package/dist/actions/preview.d.ts +0 -45
  52. package/dist/actions/preview.js +0 -149
  53. package/dist/backgrounds/index.cjs +0 -16
  54. package/dist/backgrounds/index.d.ts +0 -2
  55. package/dist/backgrounds/index.js +0 -0
  56. package/dist/backgrounds/preview.cjs +0 -143
  57. package/dist/backgrounds/preview.d.ts +0 -53
  58. package/dist/backgrounds/preview.js +0 -127
  59. package/dist/component-testing/index.cjs +0 -23
  60. package/dist/component-testing/index.d.ts +0 -3
  61. package/dist/component-testing/index.js +0 -5
  62. package/dist/component-testing/preview.cjs +0 -40
  63. package/dist/component-testing/preview.d.ts +0 -5
  64. package/dist/component-testing/preview.js +0 -25
  65. package/dist/controls/preview.cjs +0 -26
  66. package/dist/controls/preview.d.ts +0 -43
  67. package/dist/controls/preview.js +0 -9
  68. package/dist/highlight/preview.cjs +0 -590
  69. package/dist/highlight/preview.d.ts +0 -20
  70. package/dist/highlight/preview.js +0 -575
  71. package/dist/measure/index.cjs +0 -16
  72. package/dist/measure/index.d.ts +0 -2
  73. package/dist/measure/index.js +0 -0
  74. package/dist/measure/preview.cjs +0 -466
  75. package/dist/measure/preview.d.ts +0 -25
  76. package/dist/measure/preview.js +0 -450
  77. package/dist/outline/index.cjs +0 -16
  78. package/dist/outline/index.d.ts +0 -2
  79. package/dist/outline/index.js +0 -0
  80. package/dist/outline/preview.cjs +0 -518
  81. package/dist/outline/preview.d.ts +0 -25
  82. package/dist/outline/preview.js +0 -486
  83. package/dist/test/preview.cjs +0 -73
  84. package/dist/test/preview.d.ts +0 -17
  85. package/dist/test/preview.js +0 -66
  86. package/dist/viewport/preview.cjs +0 -35
  87. package/dist/viewport/preview.d.ts +0 -62
  88. package/dist/viewport/preview.js +0 -19
@@ -1,575 +0,0 @@
1
- var pe = Object.defineProperty;
2
- var c = (s, e) => pe(s, "name", { value: e, configurable: !0 });
3
-
4
- // src/highlight/preview.ts
5
- import { definePreviewAddon as fe } from "storybook/internal/csf";
6
- import { addons as le } from "storybook/preview-api";
7
-
8
- // src/highlight/useHighlights.ts
9
- import { STORY_RENDER_PHASE_CHANGED as he } from "storybook/internal/core-events";
10
-
11
- // src/highlight/constants.ts
12
- var _ = "storybook/highlight", U = `${_}/add`, K = `${_}/remove`, J = `${_}/reset`, Q = `${_}/scroll-into-view`, F = 2147483647, T = 28;
13
-
14
- // src/highlight/icons.ts
15
- var G = {
16
- chevronLeft: [
17
- "M9.10355 10.1464C9.29882 10.3417 9.29882 10.6583 9.10355 10.8536C8.90829 11.0488 8.59171 11.0488 8.39645 10.8536L4.89645 7.35355C4.7011\
18
- 8 7.15829 4.70118 6.84171 4.89645 6.64645L8.39645 3.14645C8.59171 2.95118 8.90829 2.95118 9.10355 3.14645C9.29882 3.34171 9.29882 3.65829 9.\
19
- 10355 3.85355L5.95711 7L9.10355 10.1464Z"
20
- ],
21
- chevronRight: [
22
- "M4.89645 10.1464C4.70118 10.3417 4.70118 10.6583 4.89645 10.8536C5.09171 11.0488 5.40829 11.0488 5.60355 10.8536L9.10355 7.35355C9.2988\
23
- 2 7.15829 9.29882 6.84171 9.10355 6.64645L5.60355 3.14645C5.40829 2.95118 5.09171 2.95118 4.89645 3.14645C4.70118 3.34171 4.70118 3.65829 4.\
24
- 89645 3.85355L8.04289 7L4.89645 10.1464Z"
25
- ],
26
- info: [
27
- "M7 5.5a.5.5 0 01.5.5v4a.5.5 0 01-1 0V6a.5.5 0 01.5-.5zM7 4.5A.75.75 0 107 3a.75.75 0 000 1.5z",
28
- "M7 14A7 7 0 107 0a7 7 0 000 14zm0-1A6 6 0 107 1a6 6 0 000 12z"
29
- ],
30
- shareAlt: [
31
- "M2 1.004a1 1 0 00-1 1v10a1 1 0 001 1h10a1 1 0 001-1v-4.5a.5.5 0 00-1 0v4.5H2v-10h4.5a.5.5 0 000-1H2z",
32
- "M7.354 7.357L12 2.711v1.793a.5.5 0 001 0v-3a.5.5 0 00-.5-.5h-3a.5.5 0 100 1h1.793L6.646 6.65a.5.5 0 10.708.707z"
33
- ]
34
- };
35
-
36
- // src/highlight/utils.ts
37
- var ue = "svg,path,rect,circle,line,polyline,polygon,ellipse,text".split(","), b = /* @__PURE__ */ c((s, e = {}, d) => {
38
- let l = ue.includes(s) ? document.createElementNS("http://www.w3.org/2000/svg", s) : document.createElement(s);
39
- return Object.entries(e).forEach(([r, p]) => {
40
- /[A-Z]/.test(r) ? (r === "onClick" && (l.addEventListener("click", p), l.addEventListener("keydown", (u) => {
41
- (u.key === "Enter" || u.key === " ") && (u.preventDefault(), p());
42
- })), r === "onMouseEnter" && l.addEventListener("mouseenter", p), r === "onMouseLeave" && l.addEventListener("mouseleave", p)) : l.setAttribute(
43
- r, p);
44
- }), d?.forEach((r) => {
45
- if (!(r == null || r === !1))
46
- try {
47
- l.appendChild(r);
48
- } catch {
49
- l.appendChild(document.createTextNode(String(r)));
50
- }
51
- }), l;
52
- }, "createElement"), k = /* @__PURE__ */ c((s) => G[s] && b(
53
- "svg",
54
- { width: "14", height: "14", viewBox: "0 0 14 14", xmlns: "http://www.w3.org/2000/svg" },
55
- G[s].map(
56
- (e) => b("path", {
57
- fill: "currentColor",
58
- "fill-rule": "evenodd",
59
- "clip-rule": "evenodd",
60
- d: e
61
- })
62
- )
63
- ), "createIcon"), ee = /* @__PURE__ */ c((s) => {
64
- if ("elements" in s) {
65
- let { elements: l, color: r, style: p } = s;
66
- return {
67
- id: void 0,
68
- priority: 0,
69
- selectors: l,
70
- styles: {
71
- outline: `2px ${p} ${r}`,
72
- outlineOffset: "2px",
73
- boxShadow: "0 0 0 6px rgba(255,255,255,0.6)"
74
- },
75
- menu: void 0
76
- };
77
- }
78
- let { menu: e, ...d } = s;
79
- return {
80
- id: void 0,
81
- priority: 0,
82
- styles: {
83
- outline: "2px dashed #029cfd"
84
- },
85
- ...d,
86
- menu: Array.isArray(e) ? e.every(Array.isArray) ? e : [e] : void 0
87
- };
88
- }, "normalizeOptions"), me = /* @__PURE__ */ c((s) => s instanceof Function, "isFunction"), S = /* @__PURE__ */ new Map(), C = /* @__PURE__ */ new Map(),
89
- R = /* @__PURE__ */ new Map(), L = /* @__PURE__ */ c((s) => {
90
- let e = Symbol();
91
- return C.set(e, []), S.set(e, s), { get: /* @__PURE__ */ c(() => S.get(e), "get"), set: /* @__PURE__ */ c((u) => {
92
- let m = S.get(e), f = me(u) ? u(m) : u;
93
- f !== m && (S.set(e, f), C.get(e)?.forEach((E) => {
94
- R.get(E)?.(), R.set(E, E(f));
95
- }));
96
- }, "set"), subscribe: /* @__PURE__ */ c((u) => (C.get(e)?.push(u), () => {
97
- let m = C.get(e);
98
- m && C.set(
99
- e,
100
- m.filter((f) => f !== u)
101
- );
102
- }), "subscribe"), teardown: /* @__PURE__ */ c(() => {
103
- C.get(e)?.forEach((u) => {
104
- R.get(u)?.(), R.delete(u);
105
- }), C.delete(e), S.delete(e);
106
- }, "teardown") };
107
- }, "useStore"), z = /* @__PURE__ */ c((s) => {
108
- let e = document.getElementById("storybook-root"), d = /* @__PURE__ */ new Map();
109
- for (let l of s) {
110
- let { priority: r = 0 } = l;
111
- for (let p of l.selectors) {
112
- let u = [
113
- ...document.querySelectorAll(
114
- // Elements matching the selector, excluding storybook elements and their descendants.
115
- // Necessary to find portaled elements (e.g. children of `body`).
116
- `:is(${p}):not([id^="storybook-"], [id^="storybook-"] *, [class^="sb-"], [class^="sb-"] *)`
117
- ),
118
- // Elements matching the selector inside the storybook root, as these were excluded above.
119
- ...e?.querySelectorAll(p) || []
120
- ];
121
- for (let m of u) {
122
- let f = d.get(m);
123
- (!f || f.priority <= r) && d.set(m, {
124
- ...l,
125
- priority: r,
126
- selectors: Array.from(new Set((f?.selectors || []).concat(p)))
127
- });
128
- }
129
- }
130
- }
131
- return d;
132
- }, "mapElements"), te = /* @__PURE__ */ c((s) => Array.from(s.entries()).map(([e, { selectors: d, styles: l, hoverStyles: r, focusStyles: p,
133
- menu: u }]) => {
134
- let { top: m, left: f, width: E, height: w } = e.getBoundingClientRect(), { position: v } = getComputedStyle(e);
135
- return {
136
- element: e,
137
- selectors: d,
138
- styles: l,
139
- hoverStyles: r,
140
- focusStyles: p,
141
- menu: u,
142
- top: v === "fixed" ? m : m + window.scrollY,
143
- left: v === "fixed" ? f : f + window.scrollX,
144
- width: E,
145
- height: w
146
- };
147
- }).sort((e, d) => d.width * d.height - e.width * e.height), "mapBoxes"), P = /* @__PURE__ */ c((s, e) => {
148
- let d = s.getBoundingClientRect(), { x: l, y: r } = e;
149
- return d?.top && d?.left && l >= d.left && l <= d.left + d.width && r >= d.top && r <= d.top + d.height;
150
- }, "isOverMenu"), X = /* @__PURE__ */ c((s, e, d) => {
151
- if (!e || !d)
152
- return !1;
153
- let { left: l, top: r, width: p, height: u } = s;
154
- u < T && (r = r - Math.round((T - u) / 2), u = T), p < T && (l = l - Math.round((T - p) / 2), p = T), e.style.position === "fixed" && (l +=
155
- window.scrollX, r += window.scrollY);
156
- let { x: m, y: f } = d;
157
- return m >= l && m <= l + p && f >= r && f <= r + u;
158
- }, "isTargeted"), oe = /* @__PURE__ */ c((s, e, d = {}) => {
159
- let { x: l, y: r } = e, { margin: p = 5, topOffset: u = 0, centered: m = !1 } = d, { scrollX: f, scrollY: E, innerHeight: w, innerWidth: v } = window,
160
- I = Math.min(
161
- s.style.position === "fixed" ? r - E : r,
162
- w - s.clientHeight - p - u + E
163
- ), H = m ? s.clientWidth / 2 : 0, A = s.style.position === "fixed" ? Math.max(Math.min(l - f, v - H - p), H + p) : Math.max(
164
- Math.min(l, v - H - p + f),
165
- H + p + f
166
- );
167
- Object.assign(s.style, {
168
- ...A !== l && { left: `${A}px` },
169
- ...I !== r && { top: `${I}px` }
170
- });
171
- }, "keepInViewport"), V = /* @__PURE__ */ c((s) => {
172
- window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.showPopover();
173
- }, "showPopover"), ne = /* @__PURE__ */ c((s) => {
174
- window.HTMLElement.prototype.hasOwnProperty("showPopover") && s.hidePopover();
175
- }, "hidePopover"), se = /* @__PURE__ */ c((s) => ({
176
- top: s.top,
177
- left: s.left,
178
- width: s.width,
179
- height: s.height,
180
- selectors: s.selectors,
181
- element: {
182
- attributes: Object.fromEntries(
183
- Array.from(s.element.attributes).map((e) => [e.name, e.value])
184
- ),
185
- localName: s.element.localName,
186
- tagName: s.element.tagName,
187
- outerHTML: s.element.outerHTML
188
- }
189
- }), "getEventDetails");
190
-
191
- // src/highlight/useHighlights.ts
192
- var g = "storybook-highlights-menu", ie = "storybook-highlights-root", ge = "storybook-root", re = /* @__PURE__ */ c((s) => {
193
- if (globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED)
194
- return;
195
- globalThis.__STORYBOOK_HIGHLIGHT_INITIALIZED = !0;
196
- let { document: e } = globalThis, d = L([]), l = L(/* @__PURE__ */ new Map()), r = L([]), p = L(), u = L(), m = L([]), f = L([]), E = L(),
197
- w = L(), v = e.getElementById(ie);
198
- d.subscribe(() => {
199
- v || (v = b("div", { id: ie }), e.body.appendChild(v));
200
- }), d.subscribe((n) => {
201
- let t = e.getElementById(ge);
202
- if (!t)
203
- return;
204
- l.set(z(n));
205
- let o = new MutationObserver(() => l.set(z(n)));
206
- return o.observe(t, { subtree: !0, childList: !0 }), () => {
207
- o.disconnect();
208
- };
209
- }), l.subscribe((n) => {
210
- let t = /* @__PURE__ */ c(() => requestAnimationFrame(() => r.set(te(n))), "updateBoxes"), o = new ResizeObserver(t);
211
- o.observe(e.body), Array.from(n.keys()).forEach((i) => o.observe(i));
212
- let a = Array.from(e.body.querySelectorAll("*")).filter((i) => {
213
- let { overflow: h, overflowX: x, overflowY: y } = window.getComputedStyle(i);
214
- return ["auto", "scroll"].some((M) => [h, x, y].includes(M));
215
- });
216
- return a.forEach((i) => i.addEventListener("scroll", t)), () => {
217
- o.disconnect(), a.forEach((i) => i.removeEventListener("scroll", t));
218
- };
219
- }), l.subscribe((n) => {
220
- let t = Array.from(n.keys()).filter(({ style: a }) => a.position === "sticky"), o = /* @__PURE__ */ c(() => requestAnimationFrame(() => {
221
- r.set(
222
- (a) => a.map((i) => {
223
- if (t.includes(i.element)) {
224
- let { top: h, left: x } = i.element.getBoundingClientRect();
225
- return { ...i, top: h + window.scrollY, left: x + window.scrollX };
226
- }
227
- return i;
228
- })
229
- );
230
- }), "updateBoxes");
231
- return e.addEventListener("scroll", o), () => e.removeEventListener("scroll", o);
232
- }), l.subscribe((n) => {
233
- m.set((t) => t.filter(({ element: o }) => n.has(o)));
234
- }), m.subscribe((n) => {
235
- n.length ? (w.set((t) => n.some((o) => o.element === t?.element) ? t : void 0), E.set((t) => n.some((o) => o.element === t?.element) ? t :
236
- void 0)) : (w.set(void 0), E.set(void 0), p.set(void 0));
237
- });
238
- let I = new Map(/* @__PURE__ */ new Map());
239
- d.subscribe((n) => {
240
- n.forEach(({ keyframes: t }) => {
241
- if (t) {
242
- let o = I.get(t);
243
- o || (o = e.createElement("style"), o.setAttribute("data-highlight", "keyframes"), I.set(t, o), e.head.appendChild(o)), o.innerHTML =
244
- t;
245
- }
246
- }), I.forEach((t, o) => {
247
- n.some((a) => a.keyframes === o) || (t.remove(), I.delete(o));
248
- });
249
- });
250
- let H = new Map(/* @__PURE__ */ new Map());
251
- r.subscribe((n) => {
252
- n.forEach((t) => {
253
- let o = H.get(t.element);
254
- if (v && !o) {
255
- let a = {
256
- popover: "manual",
257
- "data-highlight-dimensions": `w${t.width.toFixed(0)}h${t.height.toFixed(0)}`,
258
- "data-highlight-coordinates": `x${t.left.toFixed(0)}y${t.top.toFixed(0)}`
259
- };
260
- o = v.appendChild(
261
- b("div", a, [b("div")])
262
- ), H.set(t.element, o);
263
- }
264
- }), H.forEach((t, o) => {
265
- n.some(({ element: a }) => a === o) || (t.remove(), H.delete(o));
266
- });
267
- }), r.subscribe((n) => {
268
- let t = n.filter((a) => a.menu);
269
- if (!t.length)
270
- return;
271
- let o = /* @__PURE__ */ c((a) => {
272
- requestAnimationFrame(() => {
273
- let i = e.getElementById(g), h = { x: a.pageX, y: a.pageY };
274
- if (i && !P(i, h)) {
275
- let x = t.filter((y) => {
276
- let M = H.get(y.element);
277
- return X(y, M, h);
278
- });
279
- p.set(x.length ? h : void 0), m.set(x);
280
- }
281
- });
282
- }, "onClick");
283
- return e.addEventListener("click", o), () => e.removeEventListener("click", o);
284
- });
285
- let A = /* @__PURE__ */ c(() => {
286
- let n = e.getElementById(g), t = u.get();
287
- !t || n && P(n, t) || f.set((o) => {
288
- let a = r.get().filter((y) => {
289
- let M = H.get(y.element);
290
- return X(y, M, t);
291
- }), i = o.filter((y) => a.includes(y)), h = a.filter((y) => !o.includes(y)), x = o.length - i.length;
292
- return h.length || x ? [...i, ...h] : o;
293
- });
294
- }, "updateHovered");
295
- u.subscribe(A), r.subscribe(A);
296
- let $ = /* @__PURE__ */ c(() => {
297
- let n = w.get(), t = n ? [n] : m.get(), o = t.length === 1 ? t[0] : E.get(), a = p.get() !== void 0;
298
- r.get().forEach((i) => {
299
- let h = H.get(i.element);
300
- if (h) {
301
- let x = o === i, y = a ? o ? x : t.includes(i) : f.get()?.includes(i);
302
- Object.assign(h.style, {
303
- animation: "none",
304
- background: "transparent",
305
- border: "none",
306
- boxSizing: "border-box",
307
- outline: "none",
308
- outlineOffset: "0px",
309
- ...i.styles,
310
- ...y ? i.hoverStyles : {},
311
- ...x ? i.focusStyles : {},
312
- position: getComputedStyle(i.element).position === "fixed" ? "fixed" : "absolute",
313
- zIndex: F - 10,
314
- top: `${i.top}px`,
315
- left: `${i.left}px`,
316
- width: `${i.width}px`,
317
- height: `${i.height}px`,
318
- margin: 0,
319
- padding: 0,
320
- cursor: i.menu && y ? "pointer" : "default",
321
- pointerEvents: i.menu ? "auto" : "none",
322
- display: "flex",
323
- alignItems: "center",
324
- justifyContent: "center",
325
- overflow: "visible"
326
- }), Object.assign(h.children[0].style, {
327
- width: "100%",
328
- height: "100%",
329
- minHeight: `${T}px`,
330
- minWidth: `${T}px`,
331
- boxSizing: "content-box",
332
- padding: h.style.outlineWidth || "0px"
333
- }), V(h);
334
- }
335
- });
336
- }, "updateBoxStyles");
337
- r.subscribe($), m.subscribe($), f.subscribe($), E.subscribe($), w.subscribe($);
338
- let Y = /* @__PURE__ */ c(() => {
339
- if (!v)
340
- return;
341
- let n = e.getElementById(g);
342
- if (n)
343
- n.innerHTML = "";
344
- else {
345
- let i = { id: g, popover: "manual" };
346
- n = v.appendChild(b("div", i)), v.appendChild(
347
- b("style", {}, [
348
- `
349
- #${g} {
350
- position: absolute;
351
- z-index: ${F};
352
- width: 300px;
353
- padding: 0px;
354
- margin: 15px 0 0 0;
355
- transform: translateX(-50%);
356
- font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Ne\
357
- ue", Helvetica, Arial, sans-serif;
358
- font-size: 12px;
359
- background: white;
360
- border: none;
361
- border-radius: 6px;
362
- box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.05), 0 5px 15px 0 rgba(0, 0, 0, 0.1);
363
- color: #2E3438;
364
- }
365
- #${g} ul {
366
- list-style: none;
367
- margin: 0;
368
- padding: 0;
369
- }
370
- #${g} > ul {
371
- max-height: 300px;
372
- overflow-y: auto;
373
- padding: 4px 0;
374
- }
375
- #${g} li {
376
- padding: 0 4px;
377
- margin: 0;
378
- }
379
- #${g} li > :not(ul) {
380
- display: flex;
381
- padding: 8px;
382
- margin: 0;
383
- align-items: center;
384
- gap: 8px;
385
- border-radius: 4px;
386
- }
387
- #${g} button {
388
- width: 100%;
389
- border: 0;
390
- background: transparent;
391
- color: inherit;
392
- text-align: left;
393
- font-family: inherit;
394
- font-size: inherit;
395
- }
396
- #${g} button:focus-visible {
397
- outline-color: #029CFD;
398
- }
399
- #${g} button:hover {
400
- background: rgba(2, 156, 253, 0.07);
401
- color: #029CFD;
402
- cursor: pointer;
403
- }
404
- #${g} li code {
405
- white-space: nowrap;
406
- overflow: hidden;
407
- text-overflow: ellipsis;
408
- line-height: 16px;
409
- font-size: 11px;
410
- }
411
- #${g} li svg {
412
- flex-shrink: 0;
413
- margin: 1px;
414
- color: #73828C;
415
- }
416
- #${g} li > button:hover svg, #${g} li > button:focus-visible svg {
417
- color: #029CFD;
418
- }
419
- #${g} .element-list li svg {
420
- display: none;
421
- }
422
- #${g} li.selectable svg, #${g} li.selected svg {
423
- display: block;
424
- }
425
- #${g} .menu-list {
426
- border-top: 1px solid rgba(38, 85, 115, 0.15);
427
- }
428
- #${g} .menu-list > li:not(:last-child) {
429
- padding-bottom: 4px;
430
- margin-bottom: 4px;
431
- border-bottom: 1px solid rgba(38, 85, 115, 0.15);
432
- }
433
- #${g} .menu-items, #${g} .menu-items li {
434
- padding: 0;
435
- }
436
- #${g} .menu-item {
437
- display: flex;
438
- }
439
- #${g} .menu-item-content {
440
- display: flex;
441
- flex-direction: column;
442
- flex-grow: 1;
443
- }
444
- `
445
- ])
446
- );
447
- }
448
- let t = w.get(), o = t ? [t] : m.get();
449
- if (o.length && (n.style.position = getComputedStyle(o[0].element).position === "fixed" ? "fixed" : "absolute", n.appendChild(
450
- b(
451
- "ul",
452
- { class: "element-list" },
453
- o.map((i) => {
454
- let h = o.length > 1 && !!i.menu?.some(
455
- (M) => M.some(
456
- (O) => !O.selectors || O.selectors.some((B) => i.selectors.includes(B))
457
- )
458
- ), x = h ? {
459
- class: "selectable",
460
- onClick: /* @__PURE__ */ c(() => w.set(i), "onClick"),
461
- onMouseEnter: /* @__PURE__ */ c(() => E.set(i), "onMouseEnter"),
462
- onMouseLeave: /* @__PURE__ */ c(() => E.set(void 0), "onMouseLeave")
463
- } : t ? { class: "selected", onClick: /* @__PURE__ */ c(() => w.set(void 0), "onClick") } : {}, y = h || t;
464
- return b("li", x, [
465
- b(y ? "button" : "div", y ? { type: "button" } : {}, [
466
- t ? k("chevronLeft") : null,
467
- b("code", {}, [i.element.outerHTML]),
468
- h ? k("chevronRight") : null
469
- ])
470
- ]);
471
- })
472
- )
473
- )), w.get() || m.get().length === 1) {
474
- let i = w.get() || m.get()[0], h = i.menu?.filter(
475
- (x) => x.some(
476
- (y) => !y.selectors || y.selectors.some((M) => i.selectors.includes(M))
477
- )
478
- );
479
- h?.length && n.appendChild(
480
- b(
481
- "ul",
482
- { class: "menu-list" },
483
- h.map(
484
- (x) => b("li", {}, [
485
- b(
486
- "ul",
487
- { class: "menu-items" },
488
- x.map(
489
- ({ id: y, title: M, description: O, iconLeft: B, iconRight: q, clickEvent: W }) => {
490
- let N = W && (() => s.emit(W, y, se(i)));
491
- return b("li", {}, [
492
- b(
493
- N ? "button" : "div",
494
- N ? { class: "menu-item", type: "button", onClick: N } : { class: "menu-item" },
495
- [
496
- B ? k(B) : null,
497
- b("div", { class: "menu-item-content" }, [
498
- b(O ? "strong" : "span", {}, [M]),
499
- O && b("span", {}, [O])
500
- ]),
501
- q ? k(q) : null
502
- ]
503
- )
504
- ]);
505
- }
506
- )
507
- )
508
- ])
509
- )
510
- )
511
- );
512
- }
513
- let a = p.get();
514
- a ? (Object.assign(n.style, {
515
- display: "block",
516
- left: `${n.style.position === "fixed" ? a.x - window.scrollX : a.x}px`,
517
- top: `${n.style.position === "fixed" ? a.y - window.scrollY : a.y}px`
518
- }), V(n), requestAnimationFrame(() => oe(n, a, { topOffset: 15, centered: !0 }))) : (ne(n), Object.assign(n.style, { display: "none" }));
519
- }, "renderMenu");
520
- m.subscribe(Y), w.subscribe(Y);
521
- let ce = /* @__PURE__ */ c((n) => {
522
- let t = ee(n);
523
- d.set((o) => {
524
- let a = t.id ? o.filter((i) => i.id !== t.id) : o;
525
- return t.selectors?.length ? [...a, t] : a;
526
- });
527
- }, "addHighlight"), D = /* @__PURE__ */ c((n) => {
528
- n && d.set((t) => t.filter((o) => o.id !== n));
529
- }, "removeHighlight"), Z = /* @__PURE__ */ c(() => {
530
- d.set([]), l.set(/* @__PURE__ */ new Map()), r.set([]), p.set(void 0), u.set(void 0), m.set([]), f.set([]), E.set(void 0), w.set(void 0);
531
- }, "resetState"), j, de = /* @__PURE__ */ c((n, t) => {
532
- let o = "scrollIntoView-highlight";
533
- clearTimeout(j), D(o);
534
- let a = e.querySelector(n);
535
- if (!a) {
536
- console.warn(`Cannot scroll into view: ${n} not found`);
537
- return;
538
- }
539
- a.scrollIntoView({ behavior: "smooth", block: "center", ...t });
540
- let i = `kf-${Math.random().toString(36).substring(2, 15)}`;
541
- d.set((h) => [
542
- ...h,
543
- {
544
- id: o,
545
- priority: 1e3,
546
- selectors: [n],
547
- styles: {
548
- outline: "2px solid #1EA7FD",
549
- outlineOffset: "-1px",
550
- animation: `${i} 3s linear forwards`
551
- },
552
- keyframes: `@keyframes ${i} {
553
- 0% { outline: 2px solid #1EA7FD; }
554
- 20% { outline: 2px solid #1EA7FD00; }
555
- 40% { outline: 2px solid #1EA7FD; }
556
- 60% { outline: 2px solid #1EA7FD00; }
557
- 80% { outline: 2px solid #1EA7FD; }
558
- 100% { outline: 2px solid #1EA7FD00; }
559
- }`
560
- }
561
- ]), j = setTimeout(() => D(o), 3500);
562
- }, "scrollIntoView"), ae = /* @__PURE__ */ c((n) => {
563
- requestAnimationFrame(() => u.set({ x: n.pageX, y: n.pageY }));
564
- }, "onMouseMove");
565
- e.body.addEventListener("mousemove", ae), s.on(U, ce), s.on(K, D), s.on(J, Z), s.on(Q, de), s.on(he, ({ newPhase: n }) => {
566
- n === "loading" && Z();
567
- });
568
- }, "useHighlights");
569
-
570
- // src/highlight/preview.ts
571
- globalThis?.FEATURES?.highlight && le?.ready && le.ready().then(re);
572
- var Se = /* @__PURE__ */ c(() => fe({}), "default");
573
- export {
574
- Se as default
575
- };
@@ -1,16 +0,0 @@
1
- "use strict";
2
- var t = Object.defineProperty;
3
- var a = Object.getOwnPropertyDescriptor;
4
- var b = Object.getOwnPropertyNames;
5
- var c = Object.prototype.hasOwnProperty;
6
- var d = (o, e, x, r) => {
7
- if (e && typeof e == "object" || typeof e == "function")
8
- for (let p of b(e))
9
- !c.call(o, p) && p !== x && t(o, p, { get: () => e[p], enumerable: !(r = a(e, p)) || r.enumerable });
10
- return o;
11
- };
12
- var f = (o) => d(t({}, "__esModule", { value: !0 }), o);
13
-
14
- // src/measure/index.ts
15
- var g = {};
16
- module.exports = f(g);
@@ -1,2 +0,0 @@
1
-
2
- export { }
File without changes