storybook 9.0.8 → 9.0.10

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