@llumi/design-system 1.0.1 → 2.1.0

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 (48) hide show
  1. package/LICENSE +51 -0
  2. package/NOTICE +66 -0
  3. package/README.md +15 -205
  4. package/adopt-global-styles-D9108lqB.js +15 -0
  5. package/base.css +2 -0
  6. package/base.md +59 -0
  7. package/bpmn.md +113 -0
  8. package/bpmn.mjs +5076 -0
  9. package/copy-button.md +128 -0
  10. package/copy-button.mjs +161 -0
  11. package/custom-elements.json +1135 -18
  12. package/download-button.md +106 -0
  13. package/download-button.mjs +177 -0
  14. package/highlighter.md +45 -0
  15. package/highlighter.mjs +403 -0
  16. package/icon-button-BwB11RGC.js +5 -0
  17. package/icons-BaUbjt-v.js +42 -0
  18. package/index-BEhA78nX.js +7733 -0
  19. package/llumi-element-BWRwgzW5.js +22 -0
  20. package/mermaid.md +58 -0
  21. package/mermaid.mjs +254 -0
  22. package/package.json +16 -50
  23. package/review.md +141 -0
  24. package/review.mjs +2044 -0
  25. package/slot-text-mSWBdWBc.js +51 -0
  26. package/theme.css +2 -0
  27. package/dist/review.cjs +0 -172
  28. package/dist/review.css +0 -98
  29. package/dist/review.js +0 -172
  30. package/dist/review.mjs +0 -1710
  31. package/dist/types/components/review/comment-dialog.element.d.ts +0 -29
  32. package/dist/types/components/review/custom-target.utils.d.ts +0 -16
  33. package/dist/types/components/review/default-editor.element.d.ts +0 -19
  34. package/dist/types/components/review/highlight-manager.d.ts +0 -21
  35. package/dist/types/components/review/index.d.ts +0 -8
  36. package/dist/types/components/review/overall-comment-dialog.element.d.ts +0 -22
  37. package/dist/types/components/review/review-bar.element.d.ts +0 -26
  38. package/dist/types/components/review/review.element.d.ts +0 -60
  39. package/dist/types/components/review/review.machine.d.ts +0 -234
  40. package/dist/types/components/review/review.persistence.d.ts +0 -16
  41. package/dist/types/components/review/review.type.d.ts +0 -37
  42. package/dist/types/components/review/selection-comment-icons.element.d.ts +0 -17
  43. package/dist/types/components/review/selection-range.utils.d.ts +0 -6
  44. package/dist/types/components/review/sort-comments.utils.d.ts +0 -6
  45. package/dist/types/index.d.ts +0 -1
  46. package/dist/types/shared/cn.d.ts +0 -2
  47. package/dist/types/shared/icons.d.ts +0 -7
  48. package/dist/types/shared/tailwind-element.d.ts +0 -4
package/dist/review.mjs DELETED
@@ -1,1710 +0,0 @@
1
- import { fromCallback as dt, setup as Tt, emit as ht, assign as x, stateIn as kt, enqueueActions as zt, createActor as Lt } from "xstate";
2
- import { tinykeys as Ot } from "tinykeys";
3
- import { svg as N, html as v, LitElement as At, unsafeCSS as Dt } from "lit";
4
- import { property as f, query as K, state as Mt, customElement as A } from "lit/decorators.js";
5
- import { clsx as _t } from "clsx";
6
- import { twMerge as Nt } from "tailwind-merge";
7
- import { autoUpdate as vt, computePosition as wt, offset as bt, flip as xt, shift as yt, size as Ct } from "@floating-ui/dom";
8
- import { classMap as Pt } from "lit/directives/class-map.js";
9
- import { repeat as Rt } from "lit/directives/repeat.js";
10
- import { styleMap as $t } from "lit/directives/style-map.js";
11
- function gt(n, e) {
12
- const t = n.getAttribute("data-review-id");
13
- if (t) return t;
14
- for (const i of e ?? [])
15
- if (n.matches(i.selector)) {
16
- const o = i.toId(n);
17
- if (o) return o;
18
- }
19
- return null;
20
- }
21
- function P(n, e) {
22
- const t = n.closest("[data-review-id]");
23
- if (t) {
24
- const i = t.getAttribute("data-review-id");
25
- if (i) return { element: t, targetId: i };
26
- }
27
- for (const i of e ?? []) {
28
- const o = n.closest(i.selector);
29
- if (o) {
30
- const r = i.toId(o);
31
- if (r) return { element: o, targetId: r };
32
- }
33
- }
34
- return null;
35
- }
36
- function R(n, e) {
37
- const t = /* @__PURE__ */ new Set(), i = [];
38
- for (const o of Array.from(
39
- n.querySelectorAll("[data-review-id]")
40
- )) {
41
- const r = o.getAttribute("data-review-id");
42
- if (!r) continue;
43
- const a = o.hasAttribute("data-review-selectable");
44
- i.push({
45
- element: o,
46
- targetId: r,
47
- kind: a ? "both" : "element"
48
- }), t.add(o);
49
- }
50
- for (const o of e ?? [])
51
- for (const r of Array.from(
52
- n.querySelectorAll(o.selector)
53
- )) {
54
- if (t.has(r)) continue;
55
- const a = o.toId(r);
56
- if (!a) continue;
57
- const s = r.hasAttribute("data-review-selectable");
58
- i.push({
59
- element: r,
60
- targetId: a,
61
- kind: s ? "both" : "element"
62
- }), t.add(r);
63
- }
64
- for (const o of Array.from(
65
- n.querySelectorAll("[data-review-selectable]")
66
- )) {
67
- if (t.has(o)) continue;
68
- const r = o.getAttribute("data-review-selectable");
69
- r && (i.push({ element: o, targetId: r, kind: "selectable" }), t.add(o));
70
- }
71
- return i;
72
- }
73
- const ot = "review-highlight-hover", C = "review-highlight-commented", j = "review-highlight-editing", U = "review-highlight-uncommented", V = "review-target", ut = "review-active";
74
- function B(n) {
75
- n.classList.remove(
76
- ot,
77
- C,
78
- j,
79
- U
80
- );
81
- }
82
- function Ht(n, e) {
83
- let t = null, i = null, o = null;
84
- function r(c) {
85
- n.classList.add(ut);
86
- const h = R(n, e);
87
- for (const { element: p, targetId: d, kind: k } of h)
88
- (k === "element" || k === "both") && (p.hasAttribute("data-review-id") || p.classList.add(V), c.has(d) && p.classList.add(C));
89
- }
90
- function a() {
91
- n.classList.remove(ut), t && (clearTimeout(t), t = null);
92
- const c = R(n, e);
93
- for (const { element: h } of c)
94
- B(h), h.classList.remove(V);
95
- }
96
- function s(c) {
97
- const h = R(n, e), p = [];
98
- for (const { element: d } of h)
99
- !d.classList.contains(C) && !d.classList.contains(j) && (d.classList.add(U), p.push(d));
100
- c && (t && clearTimeout(t), t = setTimeout(() => {
101
- t = null;
102
- for (const d of p)
103
- d.classList.contains(j) || d.classList.remove(U);
104
- }, 500));
105
- }
106
- function l() {
107
- t && (clearTimeout(t), t = null);
108
- const c = R(n, e);
109
- for (const { element: h } of c)
110
- h.classList.remove(U);
111
- }
112
- function u(c, h) {
113
- h || (B(c), c.classList.add(j));
114
- }
115
- function m(c, h) {
116
- B(c), h && c.classList.add(C);
117
- }
118
- function b(c, h) {
119
- (gt(c, e) ?? c.getAttribute("data-review-selectable")) !== h && c.classList.add(ot);
120
- }
121
- function g(c, h, p) {
122
- const d = gt(c, e) ?? c.getAttribute("data-review-selectable");
123
- d !== h && (c.classList.remove(ot), d && (p != null && p.has(d)) && c.classList.add(C));
124
- }
125
- function It(c) {
126
- q(), o = c.editingTarget ?? null, i = new MutationObserver((h) => {
127
- for (const p of h) {
128
- for (const d of Array.from(p.removedNodes)) {
129
- if (!(d instanceof HTMLElement)) continue;
130
- o && (d === o || d.contains(o)) && (o = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
131
- }
132
- for (const d of Array.from(p.addedNodes)) {
133
- if (!(d instanceof HTMLElement)) continue;
134
- const k = [
135
- ...d.matches("[data-review-id]") ? [d] : [],
136
- ...Array.from(
137
- d.querySelectorAll("[data-review-id]")
138
- )
139
- ];
140
- for (const I of k) {
141
- const _ = I.getAttribute("data-review-id");
142
- _ && c.commentedIds.has(_) && I.classList.add(C);
143
- }
144
- for (const I of e ?? []) {
145
- const _ = [
146
- ...d.matches(I.selector) ? [d] : [],
147
- ...Array.from(d.querySelectorAll(I.selector))
148
- ];
149
- for (const W of _) {
150
- const ct = I.toId(W);
151
- W.classList.add(V), ct && c.commentedIds.has(ct) && W.classList.add(C);
152
- }
153
- }
154
- (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
155
- }
156
- }
157
- }), i.observe(n, { childList: !0, subtree: !0 });
158
- }
159
- function q() {
160
- i && (i.disconnect(), i = null), o = null;
161
- }
162
- function St() {
163
- a(), q();
164
- }
165
- return {
166
- activate: r,
167
- deactivate: a,
168
- reveal: s,
169
- unreveal: l,
170
- setEditing: u,
171
- clearEditing: m,
172
- applyHover: b,
173
- clearHover: g,
174
- startObserving: It,
175
- stopObserving: q,
176
- destroy: St
177
- };
178
- }
179
- const Gt = `:root{--review-highlight-uncommented-color: oklch(.7 0 0 / .15);--review-highlight-commented-color: oklch(.7 0 0 / .3);--review-highlight-color: oklch(.7 0 0 / .5);--review-highlight-editing-color: oklch(.6 0 0 / .7);--review-badge-icon-color: oklch(.35 0 0);--review-z-index: 9998;--review-selection-commented-color: oklch(.85 .08 250 / .4);--review-selection-editing-color: oklch(.75 .12 250 / .6);--review-selection-hover-color: oklch(.8 .1 250 / .5)}[data-review-id],[data-review-selectable],.review-target{outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s ease}.review-highlight-uncommented{outline-color:var(--review-highlight-uncommented-color)}.review-highlight-commented{outline-color:var(--review-highlight-commented-color);position:relative}.review-highlight-hover{outline-color:var(--review-highlight-color)}.review-highlight-commented:after{content:"";position:absolute;top:-12px;right:-14px;width:20px;height:20px;border-radius:50%;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");background-size:12px 12px;background-repeat:no-repeat;background-position:center;box-shadow:0 1px 3px #0000001a;pointer-events:none}.review-highlight-editing:after{display:none}[data-review-selectable]:not([data-review-id]).review-highlight-commented:after{display:none}.review-highlight-editing{outline-color:var(--review-highlight-editing-color)}::highlight(review-selection-commented){background-color:var(--review-selection-commented-color)}::highlight(review-selection-editing){background-color:var(--review-selection-editing-color)}::highlight(review-selection-hover){background-color:var(--review-selection-hover-color)}.review-active [data-review-id],.review-active .review-target{cursor:pointer}.review-active [data-review-selectable]{cursor:text}`;
180
- function jt(n, e) {
181
- const t = n.find(
182
- (o) => o.targetId === e && !o.selection
183
- );
184
- return t ? { comment: t, isNew: !1 } : { comment: {
185
- commentId: crypto.randomUUID(),
186
- targetId: e,
187
- content: "",
188
- createdAt: (/* @__PURE__ */ new Date()).toISOString()
189
- }, isNew: !0 };
190
- }
191
- function Ut(n) {
192
- let e = n.comments;
193
- if (n.editingCommentId !== null) {
194
- const t = e.find(
195
- (i) => i.commentId === n.editingCommentId
196
- );
197
- t && t.content === "" && (e = e.filter(
198
- (i) => i.commentId !== n.editingCommentId
199
- ));
200
- }
201
- return {
202
- comments: e,
203
- editingCommentId: null,
204
- targetElement: null,
205
- selectionRange: null
206
- };
207
- }
208
- function Y(n) {
209
- const e = n.comments.filter((o) => o.content.trim()), t = e.length > 0, i = n.overallComment.trim().length > 0;
210
- return !t && !i ? { status: "approved" } : {
211
- status: "commented",
212
- comments: e,
213
- overallComment: i ? n.overallComment.trim() : void 0
214
- };
215
- }
216
- function Ft(n) {
217
- const e = /* @__PURE__ */ new Set();
218
- for (const t of n.comments)
219
- !t.selection && t.content.trim() && e.add(t.targetId);
220
- return e;
221
- }
222
- function Kt() {
223
- const n = dt(
224
- ({ sendBack: t, input: i }) => {
225
- const o = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
226
- l.key === "Alt" && (l.preventDefault(), t({ type: "HOLD_ANNOTATE" }));
227
- }, a = (l) => {
228
- l.key === "Alt" && t({ type: "RELEASE_ANNOTATE" });
229
- }, s = Ot(window, {
230
- [i.shortcut]: (l) => {
231
- l.preventDefault(), t({ type: "TOGGLE" });
232
- },
233
- "$mod+Enter": (l) => {
234
- l.preventDefault(), t({ type: "CLOSE" });
235
- },
236
- "$mod+Shift+Backspace": (l) => {
237
- l.preventDefault(), t({ type: "DELETE" });
238
- },
239
- Escape: (l) => {
240
- l.preventDefault(), t({ type: "CLOSE" });
241
- }
242
- });
243
- return window.addEventListener("keydown", r), window.addEventListener("keyup", a), window.addEventListener("blur", o), () => {
244
- s(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", a), window.removeEventListener("blur", o);
245
- };
246
- }
247
- ), e = dt(({ sendBack: t, input: i }) => {
248
- const o = new MutationObserver((r) => {
249
- for (const a of r)
250
- for (const s of Array.from(a.removedNodes))
251
- if (s instanceof HTMLElement && (s === i.targetElement || s.contains(i.targetElement))) {
252
- t({ type: "TARGET_DISCONNECTED" });
253
- return;
254
- }
255
- });
256
- return o.observe(i.wrapperElement, { childList: !0, subtree: !0 }), () => o.disconnect();
257
- });
258
- return Tt({
259
- types: {
260
- context: {},
261
- events: {},
262
- input: {},
263
- emitted: {}
264
- },
265
- actors: {
266
- keyboardActor: n,
267
- mutationObserverActor: e
268
- },
269
- guards: {
270
- isCommentingEditing: kt({ commenting: "editing" }),
271
- hasSelectionCommentId: ({ event: t }) => t.type !== "CLICK" ? !1 : !!t.selectionCommentId,
272
- hasTargetId: ({ event: t }) => t.type !== "CLICK" ? !1 : !!t.targetId && !t.selectionCommentId,
273
- hasNoTarget: ({ event: t }) => t.type !== "CLICK" ? !1 : !t.targetId && !t.selectionCommentId,
274
- isSameComment: ({ context: t, event: i }) => {
275
- if (i.type !== "CLICK") return !1;
276
- if (i.selectionCommentId)
277
- return t.editingCommentId === i.selectionCommentId;
278
- if (i.targetId) {
279
- const o = t.comments.find(
280
- (r) => r.commentId === t.editingCommentId
281
- );
282
- return !!o && o.targetId === i.targetId && !o.selection;
283
- }
284
- return !1;
285
- }
286
- },
287
- delays: {
288
- flashDuration: 500
289
- },
290
- actions: {
291
- openElementComment: x(({ context: t, event: i }) => {
292
- if (i.type !== "CLICK" || !i.targetId) return {};
293
- const { comment: o, isNew: r } = jt(
294
- t.comments,
295
- i.targetId
296
- );
297
- return {
298
- comments: r ? [...t.comments, o] : t.comments,
299
- editingCommentId: o.commentId,
300
- targetElement: i.element ?? null,
301
- selectionRange: null
302
- };
303
- }),
304
- openSelectionComment: x(({ event: t }) => t.type !== "CLICK" || !t.selectionCommentId ? {} : {
305
- editingCommentId: t.selectionCommentId,
306
- targetElement: t.element ?? null,
307
- selectionRange: null
308
- }),
309
- createSelectionComment: x(({ context: t, event: i }) => {
310
- if (i.type !== "SELECT_TEXT") return {};
311
- const o = {
312
- commentId: crypto.randomUUID(),
313
- targetId: i.targetId,
314
- content: "",
315
- createdAt: (/* @__PURE__ */ new Date()).toISOString(),
316
- selection: i.selectionRange
317
- };
318
- return {
319
- comments: [...t.comments, o],
320
- editingCommentId: o.commentId,
321
- targetElement: i.targetElement,
322
- selectionRange: i.selectionRange
323
- };
324
- }),
325
- updateContent: x(({ context: t, event: i }) => i.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: i.content } : {
326
- comments: t.comments.map(
327
- (o) => o.commentId === t.editingCommentId ? { ...o, content: i.content } : o
328
- )
329
- }),
330
- deleteComment: x(({ context: t }) => ({
331
- comments: t.comments.filter(
332
- (i) => i.commentId !== t.editingCommentId
333
- ),
334
- editingCommentId: null,
335
- targetElement: null,
336
- selectionRange: null
337
- })),
338
- cleanup: x(({ context: t }) => Ut(t)),
339
- emitChanged: ht(({ context: t }) => ({
340
- type: "REVIEW_CHANGED",
341
- result: Y(t)
342
- })),
343
- persistSave: ({ context: t }) => {
344
- t.persistence.save(Y(t));
345
- },
346
- emitSubmitted: ht(({ context: t }) => ({
347
- type: "REVIEW_SUBMITTED",
348
- result: Y(t)
349
- })),
350
- // Highlight lifecycle actions — call manager methods directly via
351
- // callbacks passed through input. The machine owns WHEN highlights
352
- // change; the manager owns HOW (DOM manipulation).
353
- // Actions run synchronously during transitions — no timing gap.
354
- // Never add useEffects that react to derived machine state.
355
- highlightsActivate: ({ context: t }) => {
356
- t.highlights.activate(Ft(t));
357
- },
358
- highlightsDeactivate: ({ context: t }) => {
359
- t.highlights.deactivate();
360
- },
361
- highlightsRevealFlash: ({ context: t }) => {
362
- t.highlights.reveal(!0);
363
- },
364
- highlightsReveal: ({ context: t }) => {
365
- t.highlights.reveal(!1);
366
- },
367
- highlightsUnreveal: ({ context: t }) => {
368
- t.highlights.unreveal();
369
- },
370
- editingTargetSet: ({ context: t }) => {
371
- var o;
372
- if (!t.targetElement) return;
373
- const i = !!((o = t.comments.find(
374
- (r) => r.commentId === t.editingCommentId
375
- )) != null && o.selection);
376
- t.highlights.setEditing(t.targetElement, i);
377
- },
378
- editingTargetCleared: ({ context: t }) => {
379
- if (!t.targetElement) return;
380
- const i = t.comments.find(
381
- (o) => o.commentId === t.editingCommentId
382
- );
383
- t.highlights.clearEditing(
384
- t.targetElement,
385
- !!(i != null && i.content.trim())
386
- );
387
- }
388
- }
389
- }).createMachine({
390
- id: "review",
391
- type: "parallel",
392
- context: ({ input: t }) => {
393
- const i = t.persistence.load() ?? t.initialData, o = (i == null ? void 0 : i.status) === "commented" ? i.comments ?? [] : [], r = (i == null ? void 0 : i.status) === "commented" ? i.overallComment ?? "" : "";
394
- return {
395
- comments: o,
396
- overallComment: r,
397
- editingCommentId: null,
398
- targetElement: null,
399
- selectionRange: null,
400
- shortcut: t.shortcut,
401
- defaultMode: t.defaultMode,
402
- highlights: t.highlights,
403
- persistence: t.persistence
404
- };
405
- },
406
- invoke: {
407
- id: "keyboard",
408
- src: "keyboardActor",
409
- input: ({ context: t }) => ({ shortcut: t.shortcut })
410
- },
411
- states: {
412
- annotating: {
413
- initial: "waitingForMount",
414
- on: {
415
- SUBMIT: ".inactive"
416
- },
417
- states: {
418
- waitingForMount: {
419
- on: {
420
- MOUNTED: [
421
- {
422
- guard: ({ context: t }) => t.defaultMode === "annotating",
423
- target: "toggled"
424
- },
425
- { target: "inactive" }
426
- ]
427
- }
428
- },
429
- inactive: {
430
- on: {
431
- TOGGLE: "toggled",
432
- HOLD_ANNOTATE: "held"
433
- }
434
- },
435
- toggled: {
436
- initial: "flashing",
437
- entry: "highlightsActivate",
438
- exit: "highlightsDeactivate",
439
- on: {
440
- TOGGLE: {
441
- target: "inactive",
442
- actions: zt(({ enqueue: t, check: i }) => {
443
- i("isCommentingEditing") && t.raise({ type: "CLOSE" });
444
- })
445
- }
446
- },
447
- states: {
448
- flashing: {
449
- entry: "highlightsRevealFlash",
450
- exit: "highlightsUnreveal",
451
- after: {
452
- flashDuration: "ready"
453
- },
454
- on: {
455
- HOLD_ANNOTATE: "revealing"
456
- }
457
- },
458
- ready: {
459
- on: {
460
- HOLD_ANNOTATE: "revealing"
461
- }
462
- },
463
- revealing: {
464
- entry: "highlightsReveal",
465
- exit: "highlightsUnreveal",
466
- on: {
467
- RELEASE_ANNOTATE: "ready"
468
- }
469
- }
470
- }
471
- },
472
- held: {
473
- initial: "revealing",
474
- entry: "highlightsActivate",
475
- exit: "highlightsDeactivate",
476
- states: {
477
- revealing: {
478
- entry: "highlightsReveal",
479
- exit: "highlightsUnreveal",
480
- on: {
481
- RELEASE_ANNOTATE: [
482
- { guard: "isCommentingEditing", target: "lingering" },
483
- { target: "#review.annotating.inactive" }
484
- ]
485
- }
486
- },
487
- lingering: {
488
- on: {
489
- CLOSE: "#review.annotating.inactive",
490
- DELETE: "#review.annotating.inactive"
491
- }
492
- }
493
- }
494
- }
495
- }
496
- },
497
- commenting: {
498
- initial: "idle",
499
- states: {
500
- idle: {
501
- on: {
502
- CLICK: [
503
- {
504
- guard: "hasSelectionCommentId",
505
- target: "editing.selection",
506
- actions: ["openSelectionComment", "editingTargetSet"]
507
- },
508
- {
509
- guard: "hasTargetId",
510
- target: "editing.element",
511
- actions: ["openElementComment", "editingTargetSet"]
512
- }
513
- ],
514
- SELECT_TEXT: {
515
- target: "editing.selection",
516
- actions: ["createSelectionComment", "editingTargetSet"]
517
- },
518
- OPEN_OVERALL: {
519
- target: "editing.element",
520
- actions: x({
521
- editingCommentId: null,
522
- targetElement: null,
523
- selectionRange: null
524
- })
525
- },
526
- SUBMIT: {
527
- actions: ["emitSubmitted"]
528
- }
529
- }
530
- },
531
- editing: {
532
- initial: "element",
533
- on: {
534
- CLICK: [
535
- { guard: "isSameComment" },
536
- {
537
- guard: "hasSelectionCommentId",
538
- target: ".selection",
539
- reenter: !0,
540
- actions: [
541
- "editingTargetCleared",
542
- "cleanup",
543
- "openSelectionComment",
544
- "editingTargetSet"
545
- ]
546
- },
547
- {
548
- guard: "hasTargetId",
549
- target: ".element",
550
- reenter: !0,
551
- actions: [
552
- "editingTargetCleared",
553
- "cleanup",
554
- "openElementComment",
555
- "editingTargetSet"
556
- ]
557
- },
558
- {
559
- guard: "hasNoTarget",
560
- target: "idle",
561
- actions: [
562
- "editingTargetCleared",
563
- "cleanup",
564
- "emitChanged",
565
- "persistSave"
566
- ]
567
- }
568
- ],
569
- SELECT_TEXT: {
570
- target: ".selection",
571
- reenter: !0,
572
- actions: [
573
- "editingTargetCleared",
574
- "cleanup",
575
- "createSelectionComment",
576
- "editingTargetSet"
577
- ]
578
- },
579
- COMMENT_CHANGE: {
580
- actions: ["updateContent", "emitChanged", "persistSave"]
581
- },
582
- DELETE: {
583
- target: "idle",
584
- actions: [
585
- "editingTargetCleared",
586
- "deleteComment",
587
- "emitChanged",
588
- "persistSave"
589
- ]
590
- },
591
- CLOSE: {
592
- target: "idle",
593
- actions: [
594
- "editingTargetCleared",
595
- "cleanup",
596
- "emitChanged",
597
- "persistSave"
598
- ]
599
- },
600
- TARGET_DISCONNECTED: {
601
- target: "idle",
602
- actions: [
603
- "editingTargetCleared",
604
- "cleanup",
605
- "emitChanged",
606
- "persistSave"
607
- ]
608
- },
609
- SUBMIT: {
610
- target: "idle",
611
- actions: ["editingTargetCleared", "cleanup", "emitSubmitted"]
612
- },
613
- OPEN_OVERALL: {
614
- target: ".element",
615
- reenter: !0,
616
- actions: [
617
- "editingTargetCleared",
618
- "cleanup",
619
- x({
620
- editingCommentId: null,
621
- targetElement: null,
622
- selectionRange: null
623
- })
624
- ]
625
- }
626
- },
627
- states: {
628
- element: {},
629
- selection: {}
630
- }
631
- }
632
- }
633
- }
634
- }
635
- });
636
- }
637
- const mt = {
638
- load: () => {
639
- },
640
- save: () => {
641
- },
642
- clear: () => {
643
- }
644
- };
645
- function J() {
646
- try {
647
- return typeof localStorage > "u" ? void 0 : localStorage;
648
- } catch {
649
- return;
650
- }
651
- }
652
- function Xt(n) {
653
- if (typeof n != "object" || n === null) return !1;
654
- const e = n.status;
655
- return e === "approved" || e === "commented";
656
- }
657
- function qt(n) {
658
- return {
659
- load() {
660
- const e = J();
661
- if (e)
662
- try {
663
- const t = e.getItem(n);
664
- if (t === null) return;
665
- const i = JSON.parse(t);
666
- return Xt(i) ? i : void 0;
667
- } catch {
668
- return;
669
- }
670
- },
671
- save(e) {
672
- const t = J();
673
- if (t)
674
- try {
675
- if (e.status === "approved") {
676
- t.removeItem(n);
677
- return;
678
- }
679
- t.setItem(n, JSON.stringify(e));
680
- } catch {
681
- }
682
- },
683
- clear() {
684
- const e = J();
685
- if (e)
686
- try {
687
- e.removeItem(n);
688
- } catch {
689
- }
690
- }
691
- };
692
- }
693
- const Wt = 3;
694
- function Vt(n) {
695
- const e = window.getSelection();
696
- if (!e || e.isCollapsed || e.rangeCount === 0)
697
- return null;
698
- const t = e.getRangeAt(0), i = t.toString();
699
- if (i.length < Wt) return null;
700
- const o = Jt(
701
- n,
702
- t.startContainer,
703
- t.startOffset
704
- ), r = o + i.length;
705
- if (o < 0) return null;
706
- const a = Qt(
707
- n.textContent ?? "",
708
- i,
709
- o
710
- );
711
- return { startOffset: o, endOffset: r, selectedText: i, matchIndex: a };
712
- }
713
- function Q(n, e) {
714
- const t = n.textContent ?? "";
715
- if (t.slice(
716
- e.startOffset,
717
- e.endOffset
718
- ) === e.selectedText)
719
- return pt(
720
- n,
721
- e.startOffset,
722
- e.endOffset
723
- );
724
- const o = Zt(
725
- t,
726
- e.selectedText,
727
- e.matchIndex
728
- );
729
- return o < 0 ? null : pt(
730
- n,
731
- o,
732
- o + e.selectedText.length
733
- );
734
- }
735
- function Bt(n, e) {
736
- if (n.isCollapsed || n.rangeCount === 0) return !1;
737
- const t = n.getRangeAt(0);
738
- return e.contains(t.startContainer) && e.contains(t.endContainer);
739
- }
740
- function Z(n) {
741
- const e = n instanceof HTMLElement ? n : n.parentElement;
742
- return (e == null ? void 0 : e.closest("[data-review-selectable]")) ?? null;
743
- }
744
- function Yt(n, e) {
745
- var a;
746
- if (n.isCollapsed || n.rangeCount === 0) return null;
747
- const t = n.getRangeAt(0), i = t.cloneRange(), o = e.contains(t.startContainer), r = e.contains(t.endContainer);
748
- if (o && r) return i;
749
- if (o && !r) {
750
- const s = te(e);
751
- return s && i.setEnd(s, ((a = s.textContent) == null ? void 0 : a.length) ?? 0), i;
752
- }
753
- return null;
754
- }
755
- function Jt(n, e, t) {
756
- var r;
757
- const i = document.createTreeWalker(n, NodeFilter.SHOW_TEXT);
758
- let o = 0;
759
- for (; i.nextNode(); ) {
760
- if (i.currentNode === e) return o + t;
761
- o += ((r = i.currentNode.textContent) == null ? void 0 : r.length) ?? 0;
762
- }
763
- return -1;
764
- }
765
- function pt(n, e, t) {
766
- var s;
767
- const i = document.createTreeWalker(n, NodeFilter.SHOW_TEXT), o = document.createRange();
768
- let r = 0, a = !1;
769
- for (; i.nextNode(); ) {
770
- const l = ((s = i.currentNode.textContent) == null ? void 0 : s.length) ?? 0;
771
- if (!a && r + l > e && (o.setStart(i.currentNode, e - r), a = !0), a && r + l >= t)
772
- return o.setEnd(i.currentNode, t - r), o;
773
- r += l;
774
- }
775
- return null;
776
- }
777
- function Qt(n, e, t) {
778
- let i = 0, o = 0;
779
- for (; ; ) {
780
- const r = n.indexOf(e, o);
781
- if (r < 0 || r === t) return i;
782
- o = r + 1, i++;
783
- }
784
- }
785
- function Zt(n, e, t) {
786
- let i = 0, o = 0;
787
- for (; ; ) {
788
- const r = n.indexOf(e, o);
789
- if (r < 0) return -1;
790
- if (i === t) return r;
791
- o = r + 1, i++;
792
- }
793
- }
794
- function te(n) {
795
- const e = document.createTreeWalker(n, NodeFilter.SHOW_TEXT);
796
- let t = null;
797
- for (; e.nextNode(); )
798
- t = e.currentNode;
799
- return t;
800
- }
801
- function ee(n, e) {
802
- const t = /* @__PURE__ */ new Map();
803
- return e.querySelectorAll("[data-review-id]").forEach((o, r) => {
804
- const a = o.getAttribute("data-review-id");
805
- a && t.set(a, r);
806
- }), [...n].sort((o, r) => {
807
- const a = t.get(o.targetId) ?? Number.MAX_SAFE_INTEGER, s = t.get(r.targetId) ?? Number.MAX_SAFE_INTEGER;
808
- return a - s;
809
- });
810
- }
811
- function z(...n) {
812
- return Nt(_t(n));
813
- }
814
- function $(n) {
815
- return v`<svg
816
- xmlns="http://www.w3.org/2000/svg"
817
- viewBox="0 0 24 24"
818
- fill="none"
819
- stroke="currentColor"
820
- stroke-width="2"
821
- stroke-linecap="round"
822
- stroke-linejoin="round"
823
- aria-hidden="true"
824
- >
825
- ${n}
826
- </svg>`;
827
- }
828
- const F = {
829
- check: $(N`<path d="M20 6 9 17l-5-5" />`),
830
- gripVertical: $(
831
- N`<circle cx="9" cy="12" r="1" /><circle cx="9" cy="5" r="1" /><circle cx="9" cy="19" r="1" /><circle cx="15" cy="12" r="1" /><circle cx="15" cy="5" r="1" /><circle cx="15" cy="19" r="1" />`
832
- ),
833
- messageSquare: $(
834
- N`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />`
835
- ),
836
- trash: $(
837
- N`<path d="M3 6h18" /><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />`
838
- )
839
- }, ie = '/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-zinc-50:oklch(98.5% 0 0);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-2{top:calc(var(--spacing) * 2)}.right-2{right:calc(var(--spacing) * 2)}.z-10{z-index:10}.z-\\[calc\\(var\\(--review-z-index\\,9998\\)\\+1\\)\\]{z-index:calc(var(--review-z-index,9998) + 1)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-7{height:calc(var(--spacing) * 7)}.h-\\[18px\\]{height:18px}.max-h-\\[200px\\]{max-height:200px}.w-7{width:calc(var(--spacing) * 7)}.w-\\[400px\\]{width:400px}.w-full{width:100%}.w-px{width:1px}.max-w-0{max-width:0}.max-w-2xl{max-width:var(--container-2xl)}.min-w-\\[18px\\]{min-width:18px}.flex-1{flex:1}.translate-x-0\\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-3\\.5{--tw-translate-x:calc(var(--spacing) * 3.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\\[llumi-fade-in_0\\.15s_ease-out\\]{animation:.15s ease-out llumi-fade-in}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.overflow-y-auto{overflow-y:auto}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-zinc-200{border-color:var(--color-zinc-200)}.border-zinc-300{border-color:var(--color-zinc-300)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-white\\/25{background-color:#ffffff40}@supports (color:color-mix(in lab,red,red)){.bg-white\\/25{background-color:color-mix(in oklab,var(--color-white) 25%,transparent)}}.bg-zinc-100{background-color:var(--color-zinc-100)}.bg-zinc-200{background-color:var(--color-zinc-200)}.bg-zinc-300{background-color:var(--color-zinc-300)}.bg-zinc-900{background-color:var(--color-zinc-900)}.p-1{padding:var(--spacing)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.p-8{padding:calc(var(--spacing) * 8)}.px-1{padding-inline:var(--spacing)}.px-1\\.5{padding-inline:calc(var(--spacing) * 1.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.py-1{padding-block:var(--spacing)}.py-1\\.5{padding-block:calc(var(--spacing) * 1.5)}.pr-2{padding-right:calc(var(--spacing) * 2)}.pl-3{padding-left:calc(var(--spacing) * 3)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.text-\\[11px\\]{font-size:11px}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-white{color:var(--color-white)}.text-zinc-400{color:var(--color-zinc-400)}.text-zinc-500{color:var(--color-zinc-500)}.text-zinc-600{color:var(--color-zinc-600)}.text-zinc-700{color:var(--color-zinc-700)}.text-zinc-900{color:var(--color-zinc-900)}.italic{font-style:italic}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,#0000001a), 0 8px 10px -6px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-1{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-zinc-400\\/20{--tw-ring-color:#9f9fa933}@supports (color:color-mix(in lab,red,red)){.ring-zinc-400\\/20{--tw-ring-color:color-mix(in oklab, var(--color-zinc-400) 20%, transparent)}}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.select-none{-webkit-user-select:none;user-select:none}@media(hover:hover){.group-hover\\:max-w-\\[60px\\]:is(:where(.group):hover *){max-width:60px}}.placeholder\\:text-zinc-400::placeholder{color:var(--color-zinc-400)}@media(hover:hover){.hover\\:bg-zinc-50:hover{background-color:var(--color-zinc-50)}.hover\\:bg-zinc-200:hover{background-color:var(--color-zinc-200)}.hover\\:bg-zinc-800:hover{background-color:var(--color-zinc-800)}.hover\\:bg-zinc-900:hover{background-color:var(--color-zinc-900)}.hover\\:text-white:hover{color:var(--color-white)}}.focus\\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\\:cursor-grabbing:active{cursor:grabbing}.active\\:bg-zinc-950:active{background-color:var(--color-zinc-950)}}:host{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}@keyframes llumi-fade-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}', ne = Dt(ie), st = class st extends At {
840
- };
841
- st.styles = ne;
842
- let E = st;
843
- var oe = Object.defineProperty, re = Object.getOwnPropertyDescriptor, y = (n, e, t, i) => {
844
- for (var o = i > 1 ? void 0 : i ? re(e, t) : e, r = n.length - 1, a; r >= 0; r--)
845
- (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
846
- return i && o && oe(e, t, o), o;
847
- };
848
- const ae = {
849
- "top-left": { top: "16px", left: "16px" },
850
- "top-center": { top: "16px", left: "50%", translateX: "-50%" },
851
- "top-right": { top: "16px", right: "16px" },
852
- "bottom-left": { bottom: "16px", left: "16px" },
853
- "bottom-center": { bottom: "16px", left: "50%", translateX: "-50%" },
854
- "bottom-right": { bottom: "16px", right: "16px" }
855
- };
856
- let w = class extends E {
857
- constructor() {
858
- super(...arguments), this.mode = "idle", this.commentCount = 0, this.hasOverallComment = !1, this.overallCommentOpen = !1, this.barPosition = "bottom-center", this.dragOffset = null, this.dragStart = null, this.onDragStart = (n) => {
859
- const e = this.bar.getBoundingClientRect();
860
- this.dragStart = {
861
- px: n.clientX,
862
- py: n.clientY,
863
- ox: e.left,
864
- oy: e.top
865
- }, window.addEventListener("pointermove", this.onDragMove), window.addEventListener("pointerup", this.onDragEnd);
866
- }, this.onDragMove = (n) => {
867
- if (!this.dragStart) return;
868
- const e = this.dragStart.ox + (n.clientX - this.dragStart.px), t = this.dragStart.oy + (n.clientY - this.dragStart.py), i = 16, o = window.innerWidth - this.bar.offsetWidth - i, r = window.innerHeight - this.bar.offsetHeight - i;
869
- this.dragOffset = {
870
- x: Math.max(i, Math.min(e, o)),
871
- y: Math.max(i, Math.min(t, r))
872
- };
873
- }, this.onDragEnd = () => {
874
- this.dragStart = null, window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
875
- };
876
- }
877
- get barRoot() {
878
- return this.bar ?? null;
879
- }
880
- render() {
881
- const n = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, i = ae[this.barPosition], o = this.dragOffset ? `position:fixed;left:${this.dragOffset.x}px;top:${this.dragOffset.y}px;z-index:var(--review-z-index,9998);` : `position:fixed;${i.top ? `top:${i.top};` : ""}${i.bottom ? `bottom:${i.bottom};` : ""}${i.left ? `left:${i.left};` : ""}${i.right ? `right:${i.right};` : ""}${i.translateX ? `transform:translateX(${i.translateX});` : ""}z-index:var(--review-z-index,9998);`;
882
- return v`<div
883
- data-bar
884
- class=${z(
885
- "flex items-center gap-2 rounded-full border border-zinc-200 bg-white p-1 shadow-lg",
886
- n && "ring-1 ring-zinc-400/20"
887
- )}
888
- style=${o}
889
- >
890
- <div
891
- class="flex h-7 w-7 cursor-grab items-center justify-center text-zinc-400 active:cursor-grabbing"
892
- @pointerdown=${this.onDragStart}
893
- >
894
- <span class="size-3">${F.gripVertical}</span>
895
- </div>
896
-
897
- <label class="flex cursor-pointer items-center gap-2 px-1">
898
- <span class=${z("select-none text-xs font-medium transition-colors duration-150", n ? "text-zinc-900" : "text-zinc-500")}>Annotate</span>
899
- <button
900
- type="button"
901
- role="switch"
902
- aria-checked=${n ? "true" : "false"}
903
- data-toggle
904
- @click=${this.onToggle}
905
- class=${z(
906
- "relative inline-flex h-4 w-7 items-center rounded-full transition-colors",
907
- n ? "bg-zinc-900" : "bg-zinc-300"
908
- )}
909
- >
910
- <span class=${z("inline-block size-3 transform rounded-full bg-white transition-transform", n ? "translate-x-3.5" : "translate-x-0.5")}></span>
911
- </button>
912
- </label>
913
-
914
- <div class="h-4 w-px bg-zinc-200"></div>
915
-
916
- <button
917
- type="button"
918
- data-overall
919
- @click=${this.onOverallToggle}
920
- class=${z(
921
- "relative flex h-7 items-center gap-1.5 rounded-full px-3 text-xs font-medium",
922
- this.hasOverallComment ? "bg-zinc-900 text-white hover:bg-zinc-800 active:bg-zinc-950" : this.overallCommentOpen ? "bg-zinc-100 hover:bg-zinc-200" : "border border-zinc-200 hover:bg-zinc-50"
923
- )}
924
- >
925
- Comment
926
- <span class="size-3.5">${F.messageSquare}</span>
927
- </button>
928
-
929
- <div class="h-4 w-px bg-zinc-200"></div>
930
-
931
- <button
932
- type="button"
933
- data-submit
934
- @click=${this.onSubmit}
935
- class="flex h-7 items-center gap-1.5 rounded-full bg-zinc-900 pl-3 pr-2 text-xs font-medium text-white hover:bg-zinc-800 active:bg-zinc-950"
936
- >
937
- ${t ? "Submit" : "Approve"}
938
- <span class="flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-white/25 px-1 text-[11px] font-semibold">
939
- ${t ? e : v`<span class="size-3">${F.check}</span>`}
940
- </span>
941
- </button>
942
- </div>`;
943
- }
944
- onToggle() {
945
- this.dispatchEvent(
946
- new CustomEvent("toggle", { bubbles: !0, composed: !0 })
947
- );
948
- }
949
- onOverallToggle() {
950
- this.dispatchEvent(
951
- new CustomEvent("overall-toggle", { bubbles: !0, composed: !0 })
952
- );
953
- }
954
- onSubmit() {
955
- this.dispatchEvent(
956
- new CustomEvent("submit", { bubbles: !0, composed: !0 })
957
- );
958
- }
959
- disconnectedCallback() {
960
- super.disconnectedCallback(), window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
961
- }
962
- };
963
- y([
964
- f()
965
- ], w.prototype, "mode", 2);
966
- y([
967
- f({ type: Number })
968
- ], w.prototype, "commentCount", 2);
969
- y([
970
- f({ type: Boolean })
971
- ], w.prototype, "hasOverallComment", 2);
972
- y([
973
- f({ type: Boolean })
974
- ], w.prototype, "overallCommentOpen", 2);
975
- y([
976
- f()
977
- ], w.prototype, "barPosition", 2);
978
- y([
979
- K("[data-bar]")
980
- ], w.prototype, "bar", 2);
981
- y([
982
- Mt()
983
- ], w.prototype, "dragOffset", 2);
984
- w = y([
985
- A("llumi-review-bar")
986
- ], w);
987
- var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
988
- for (var o = i > 1 ? void 0 : i ? le(e, t) : e, r = n.length - 1, a; r >= 0; r--)
989
- (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
990
- return i && o && se(e, t, o), o;
991
- };
992
- let S = class extends E {
993
- constructor() {
994
- super(...arguments), this.value = "", this.autoFocus = !1, this.placeholder = "Write a comment...";
995
- }
996
- /** Focus the inner textarea (the element itself isn't focusable). */
997
- focus() {
998
- var n;
999
- (n = this.textarea) == null || n.focus();
1000
- }
1001
- render() {
1002
- return v`<textarea
1003
- rows="1"
1004
- placeholder=${this.placeholder}
1005
- .value=${this.value}
1006
- class="w-full resize-none bg-transparent text-sm text-zinc-900 placeholder:text-zinc-400 focus:outline-none max-h-[200px] overflow-y-auto"
1007
- @input=${this.onInput}
1008
- ></textarea>`;
1009
- }
1010
- onInput(n) {
1011
- const e = n.target.value;
1012
- this.autoGrow(), this.dispatchEvent(
1013
- new CustomEvent("change", {
1014
- detail: e,
1015
- bubbles: !0,
1016
- composed: !0
1017
- })
1018
- );
1019
- }
1020
- autoGrow() {
1021
- const n = this.textarea;
1022
- n && (n.style.height = "auto", n.style.height = `${n.scrollHeight}px`);
1023
- }
1024
- firstUpdated() {
1025
- this.autoFocus && this.textarea.focus(), this.autoGrow();
1026
- }
1027
- updated() {
1028
- this.autoGrow();
1029
- }
1030
- };
1031
- D([
1032
- f()
1033
- ], S.prototype, "value", 2);
1034
- D([
1035
- f({ type: Boolean })
1036
- ], S.prototype, "autoFocus", 2);
1037
- D([
1038
- f()
1039
- ], S.prototype, "placeholder", 2);
1040
- D([
1041
- K("textarea")
1042
- ], S.prototype, "textarea", 2);
1043
- S = D([
1044
- A("llumi-default-editor")
1045
- ], S);
1046
- var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, M = (n, e, t, i) => {
1047
- for (var o = i > 1 ? void 0 : i ? de(e, t) : e, r = n.length - 1, a; r >= 0; r--)
1048
- (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
1049
- return i && o && ce(e, t, o), o;
1050
- };
1051
- let T = class extends E {
1052
- constructor() {
1053
- super(...arguments), this.targetElement = null, this.anchor = null, this.value = "";
1054
- }
1055
- render() {
1056
- const n = this.value.trim().length > 0;
1057
- return v`<div
1058
- data-floating
1059
- class="z-[calc(var(--review-z-index,9998)+1)]"
1060
- style="position:absolute;top:0;left:0;"
1061
- >
1062
- <div
1063
- class=${Pt({
1064
- "relative w-[400px] rounded-lg border border-zinc-200 bg-white shadow-xl": !0,
1065
- "animate-[llumi-fade-in_0.15s_ease-out]": !0
1066
- })}
1067
- >
1068
- ${n ? v`<button
1069
- type="button"
1070
- data-delete
1071
- @click=${this.onDelete}
1072
- class="group absolute top-2 right-2 z-10 flex items-center gap-1 rounded-md px-1.5 py-1 text-zinc-400 transition-all duration-150 hover:bg-zinc-900 hover:text-white"
1073
- >
1074
- <span class="size-3.5">${F.trash}</span>
1075
- <span class="max-w-0 overflow-hidden text-xs transition-all duration-150 group-hover:max-w-[60px]">Delete</span>
1076
- </button>` : null}
1077
- <div class="p-3" @change=${this.onEditorChange} @cancel=${this.onCancel} @delete=${this.onDelete}>
1078
- <slot name="editor">
1079
- <llumi-default-editor .value=${this.value} autoFocus></llumi-default-editor>
1080
- </slot>
1081
- </div>
1082
- </div>
1083
- </div>`;
1084
- }
1085
- onEditorChange(n) {
1086
- if (typeof n.detail != "string") return;
1087
- const e = n.detail;
1088
- n.stopPropagation(), this.dispatchEvent(
1089
- new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
1090
- );
1091
- }
1092
- onCancel(n) {
1093
- n.stopPropagation(), this.dispatchEvent(
1094
- new CustomEvent("close", { bubbles: !0, composed: !0 })
1095
- );
1096
- }
1097
- onDelete(n) {
1098
- n.stopPropagation(), this.dispatchEvent(
1099
- new CustomEvent("delete", { bubbles: !0, composed: !0 })
1100
- );
1101
- }
1102
- startPositioning() {
1103
- var t;
1104
- const n = this.anchor ?? this.targetElement, e = this.floating;
1105
- !n || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = vt(n, e, () => {
1106
- wt(n, e, {
1107
- placement: "right",
1108
- middleware: [
1109
- bt(12),
1110
- xt({ padding: 16 }),
1111
- yt({ padding: 16, crossAxis: !0 }),
1112
- Ct({
1113
- padding: 16,
1114
- apply({ availableWidth: i, elements: o }) {
1115
- Object.assign(o.floating.style, {
1116
- maxWidth: `${Math.min(400, i)}px`
1117
- });
1118
- }
1119
- })
1120
- ]
1121
- }).then(({ x: i, y: o }) => {
1122
- Object.assign(e.style, { left: `${i}px`, top: `${o}px` });
1123
- });
1124
- }));
1125
- }
1126
- updated(n) {
1127
- n.has("targetElement") && (this.startPositioning(), this.focusEditor());
1128
- }
1129
- focusEditor() {
1130
- const n = this.renderRoot.querySelector(
1131
- 'slot[name="editor"]'
1132
- ), t = ((n == null ? void 0 : n.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
1133
- t == null || t.focus();
1134
- }
1135
- disconnectedCallback() {
1136
- var n;
1137
- super.disconnectedCallback(), (n = this.cleanup) == null || n.call(this), this.cleanup = void 0;
1138
- }
1139
- };
1140
- M([
1141
- f({ attribute: !1 })
1142
- ], T.prototype, "targetElement", 2);
1143
- M([
1144
- f({ attribute: !1 })
1145
- ], T.prototype, "anchor", 2);
1146
- M([
1147
- f()
1148
- ], T.prototype, "value", 2);
1149
- M([
1150
- K("[data-floating]")
1151
- ], T.prototype, "floating", 2);
1152
- T = M([
1153
- A("llumi-comment-dialog")
1154
- ], T);
1155
- var he = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, X = (n, e, t, i) => {
1156
- for (var o = i > 1 ? void 0 : i ? ge(e, t) : e, r = n.length - 1, a; r >= 0; r--)
1157
- (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
1158
- return i && o && he(e, t, o), o;
1159
- };
1160
- let O = class extends E {
1161
- constructor() {
1162
- super(...arguments), this.barElement = null, this.value = "", this.onDocKeydown = (n) => {
1163
- n.key === "Escape" && (n.preventDefault(), this.emitClose());
1164
- }, this.onDocPointerdown = (n) => {
1165
- const e = n.composedPath();
1166
- this.floating && !e.includes(this.floating) && !e.includes(this) && this.emitClose();
1167
- };
1168
- }
1169
- render() {
1170
- return v`<div
1171
- data-floating
1172
- class="z-[calc(var(--review-z-index,9998)+1)]"
1173
- style="position:absolute;top:0;left:0;"
1174
- >
1175
- <div class="w-[400px] rounded-lg border border-zinc-200 bg-white shadow-xl animate-[llumi-fade-in_0.15s_ease-out]">
1176
- <div class="p-3" @change=${this.onEditorChange}>
1177
- <slot name="editor">
1178
- <llumi-default-editor
1179
- .value=${this.value}
1180
- autoFocus
1181
- placeholder="Overall comment..."
1182
- ></llumi-default-editor>
1183
- </slot>
1184
- </div>
1185
- </div>
1186
- </div>`;
1187
- }
1188
- onEditorChange(n) {
1189
- if (typeof n.detail != "string") return;
1190
- const e = n.detail;
1191
- n.stopPropagation(), this.dispatchEvent(
1192
- new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
1193
- );
1194
- }
1195
- emitClose() {
1196
- this.dispatchEvent(
1197
- new CustomEvent("close", { bubbles: !0, composed: !0 })
1198
- );
1199
- }
1200
- startPositioning() {
1201
- var t;
1202
- const n = this.barElement, e = this.floating;
1203
- !n || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = vt(n, e, () => {
1204
- wt(n, e, {
1205
- placement: "top",
1206
- middleware: [
1207
- bt(12),
1208
- xt({ padding: 16 }),
1209
- yt({ padding: 16, crossAxis: !0 }),
1210
- Ct({
1211
- padding: 16,
1212
- apply({ availableWidth: i, elements: o }) {
1213
- Object.assign(o.floating.style, {
1214
- maxWidth: `${Math.min(400, i)}px`
1215
- });
1216
- }
1217
- })
1218
- ]
1219
- }).then(({ x: i, y: o }) => {
1220
- Object.assign(e.style, { left: `${i}px`, top: `${o}px` });
1221
- });
1222
- }));
1223
- }
1224
- connectedCallback() {
1225
- super.connectedCallback(), document.addEventListener("keydown", this.onDocKeydown), document.addEventListener("pointerdown", this.onDocPointerdown, !0);
1226
- }
1227
- updated(n) {
1228
- n.has("barElement") && this.startPositioning();
1229
- }
1230
- disconnectedCallback() {
1231
- var n;
1232
- super.disconnectedCallback(), (n = this.cleanup) == null || n.call(this), this.cleanup = void 0, document.removeEventListener("keydown", this.onDocKeydown), document.removeEventListener("pointerdown", this.onDocPointerdown, !0);
1233
- }
1234
- };
1235
- X([
1236
- f({ attribute: !1 })
1237
- ], O.prototype, "barElement", 2);
1238
- X([
1239
- f()
1240
- ], O.prototype, "value", 2);
1241
- X([
1242
- K("[data-floating]")
1243
- ], O.prototype, "floating", 2);
1244
- O = X([
1245
- A("llumi-overall-comment-dialog")
1246
- ], O);
1247
- var ue = Object.defineProperty, me = Object.getOwnPropertyDescriptor, Et = (n, e, t, i) => {
1248
- for (var o = i > 1 ? void 0 : i ? me(e, t) : e, r = n.length - 1, a; r >= 0; r--)
1249
- (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
1250
- return i && o && ue(e, t, o), o;
1251
- };
1252
- const pe = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E";
1253
- let rt = class extends E {
1254
- constructor() {
1255
- super(...arguments), this.positions = [];
1256
- }
1257
- render() {
1258
- return v`${Rt(
1259
- this.positions,
1260
- (n) => n.commentId,
1261
- (n) => v`<button
1262
- type="button"
1263
- @click=${(e) => this.onClick(e, n.commentId)}
1264
- style=${$t({
1265
- position: "absolute",
1266
- top: `${n.top - 10}px`,
1267
- left: `${n.left + 2}px`,
1268
- width: "20px",
1269
- height: "20px",
1270
- borderRadius: "50%",
1271
- backgroundColor: "white",
1272
- backgroundImage: `url("${pe}")`,
1273
- backgroundSize: "12px 12px",
1274
- backgroundRepeat: "no-repeat",
1275
- backgroundPosition: "center",
1276
- boxShadow: "0 1px 3px oklch(0 0 0 / 0.1)",
1277
- zIndex: "calc(var(--review-z-index, 9998) + 1)",
1278
- border: "none",
1279
- padding: "0",
1280
- cursor: "pointer"
1281
- })}
1282
- ></button>`
1283
- )}`;
1284
- }
1285
- onClick(n, e) {
1286
- n.stopPropagation(), this.dispatchEvent(
1287
- new CustomEvent("icon-click", {
1288
- detail: e,
1289
- bubbles: !0,
1290
- composed: !0
1291
- })
1292
- );
1293
- }
1294
- };
1295
- Et([
1296
- f({ attribute: !1 })
1297
- ], rt.prototype, "positions", 2);
1298
- rt = Et([
1299
- A("llumi-selection-comment-icons")
1300
- ], rt);
1301
- const H = "data-review-selectable", tt = "review-selection-commented", et = "review-selection-editing", L = "review-selection-hover", fe = "$mod+Shift+M", ft = "data-llumi-review";
1302
- let it = !1;
1303
- function ve() {
1304
- if (it) return;
1305
- if (document.querySelector(`style[${ft}]`)) {
1306
- it = !0;
1307
- return;
1308
- }
1309
- const n = document.createElement("style");
1310
- n.setAttribute(ft, ""), n.textContent = Gt, document.head.append(n), it = !0;
1311
- }
1312
- function G() {
1313
- if (!(typeof CSS > "u"))
1314
- return CSS.highlights;
1315
- }
1316
- function nt(...n) {
1317
- return new Highlight(
1318
- ...n
1319
- );
1320
- }
1321
- const lt = class lt extends HTMLElement {
1322
- constructor() {
1323
- super(...arguments), this.persistence = mt, this.manager = null, this.rangeMap = /* @__PURE__ */ new Map(), this.hoveredComment = null, this.selectionJustHandled = !1, this.selectionComments = [], this.commentDialog = null, this.commentDialogAnchorId = null, this.overallDialog = null, this.onPointerUp = () => {
1324
- if (!this.isAnnotating()) return;
1325
- const e = window.getSelection();
1326
- if (!e || e.isCollapsed || e.rangeCount === 0)
1327
- return;
1328
- const t = e.getRangeAt(0), i = Z(t.startContainer);
1329
- if (!i) return;
1330
- const o = Z(t.endContainer);
1331
- if (o && o !== i) {
1332
- e.removeAllRanges();
1333
- return;
1334
- }
1335
- if (!o || !Bt(e, i)) {
1336
- const s = Yt(e, i);
1337
- if (!s) return;
1338
- e.removeAllRanges(), e.addRange(s);
1339
- }
1340
- const r = i.getAttribute(H);
1341
- if (!r) return;
1342
- const a = Vt(i);
1343
- a && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
1344
- type: "SELECT_TEXT",
1345
- targetId: r,
1346
- targetElement: i,
1347
- selectionRange: a
1348
- }));
1349
- }, this.onPointerMove = (e) => {
1350
- if (!this.isAnnotating()) return;
1351
- const t = G();
1352
- if (!t) return;
1353
- const i = this.caretPosition(e.clientX, e.clientY);
1354
- if (!i) {
1355
- this.hoveredComment && (t.delete(L), this.hoveredComment = null);
1356
- return;
1357
- }
1358
- let o = null;
1359
- for (const [r, a] of this.rangeMap)
1360
- if (a.isPointInRange(i.offsetNode, i.offset)) {
1361
- o = r;
1362
- break;
1363
- }
1364
- if (o !== this.hoveredComment)
1365
- if (this.hoveredComment = o, o) {
1366
- const r = this.rangeMap.get(o);
1367
- r && t.set(
1368
- L,
1369
- nt(r)
1370
- );
1371
- } else
1372
- t.delete(L);
1373
- }, this.onClickCapture = (e) => {
1374
- if (!this.isAnnotating() || e.defaultPrevented) return;
1375
- if (this.selectionJustHandled) {
1376
- this.selectionJustHandled = !1, e.stopPropagation();
1377
- return;
1378
- }
1379
- const t = window.getSelection();
1380
- if (t && !t.isCollapsed) return;
1381
- const i = this.caretPosition(e.clientX, e.clientY);
1382
- if (i) {
1383
- for (const [s, l] of this.rangeMap)
1384
- if (l.isPointInRange(i.offsetNode, i.offset)) {
1385
- const u = this.selectionComments.find(
1386
- (b) => b.commentId === s
1387
- );
1388
- if (!u) continue;
1389
- const m = Z(i.offsetNode);
1390
- if (!m) continue;
1391
- e.stopPropagation(), e.preventDefault(), this.actor.send({
1392
- type: "CLICK",
1393
- targetId: u.targetId,
1394
- element: m,
1395
- selectionCommentId: s
1396
- });
1397
- return;
1398
- }
1399
- }
1400
- const o = e.target, a = o.closest(
1401
- ".review-highlight-hover, .review-highlight-commented, .review-highlight-editing"
1402
- );
1403
- if (a && this.contains(a)) {
1404
- e.stopPropagation(), e.preventDefault();
1405
- const s = P(o, this.customTargets);
1406
- s ? this.actor.send({
1407
- type: "CLICK",
1408
- targetId: s.targetId,
1409
- element: s.element
1410
- }) : this.actor.send({ type: "CLICK" });
1411
- }
1412
- }, this.onWrapperClick = (e) => {
1413
- if (!this.contains(e.target) || !this.isAnnotating()) return;
1414
- const t = P(e.target, this.customTargets);
1415
- t ? (e.stopPropagation(), e.preventDefault(), this.actor.send({
1416
- type: "CLICK",
1417
- targetId: t.targetId,
1418
- element: t.element
1419
- })) : this.actor.send({ type: "CLICK" });
1420
- }, this.onMouseOver = (e) => {
1421
- const t = this.manager;
1422
- if (!t || !this.isAnnotating()) return;
1423
- const i = this.currentEditingTargetId(), o = P(
1424
- e.target,
1425
- this.customTargets
1426
- );
1427
- if (o) {
1428
- t.applyHover(o.element, i);
1429
- return;
1430
- }
1431
- const r = e.target.closest(
1432
- "[data-review-selectable]"
1433
- );
1434
- r && t.applyHover(r, i);
1435
- }, this.onMouseOut = (e) => {
1436
- const t = this.manager;
1437
- if (!t || !this.isAnnotating()) return;
1438
- const i = this.currentEditingTargetId(), o = /* @__PURE__ */ new Set();
1439
- for (const s of this.actor.getSnapshot().context.comments)
1440
- !s.selection && s.content.trim() && o.add(s.targetId);
1441
- const r = P(
1442
- e.target,
1443
- this.customTargets
1444
- );
1445
- if (r) {
1446
- t.clearHover(r.element, i, o);
1447
- return;
1448
- }
1449
- const a = e.target.closest(
1450
- "[data-review-selectable]"
1451
- );
1452
- a && t.clearHover(a, i);
1453
- };
1454
- }
1455
- get shortcut() {
1456
- return this.getAttribute("shortcut") ?? fe;
1457
- }
1458
- get barPosition() {
1459
- return this.getAttribute("bar-position") ?? "bottom-center";
1460
- }
1461
- get defaultMode() {
1462
- return this.getAttribute("default-mode") === "annotating" ? "annotating" : "idle";
1463
- }
1464
- get persistKey() {
1465
- const e = this.getAttribute("persist");
1466
- return e != null && e.trim() ? e : null;
1467
- }
1468
- connectedCallback() {
1469
- ve(), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
1470
- const e = this.buildHighlightCallbacks();
1471
- this.persistence = this.persistKey ? qt(this.persistKey) : mt;
1472
- const t = Kt();
1473
- this.actor = Lt(t, {
1474
- input: {
1475
- shortcut: this.shortcut,
1476
- initialData: this.initialData,
1477
- defaultMode: this.defaultMode,
1478
- highlights: e,
1479
- persistence: this.persistence
1480
- }
1481
- }), this.actor.on("REVIEW_CHANGED", (i) => this.emitChange(i.result)), this.actor.on("REVIEW_SUBMITTED", (i) => this.emitSubmit(i.result)), this.mountChrome(), this.actor.subscribe(() => this.syncFromSnapshot()), this.actor.start(), this.manager = Ht(this, this.customTargets), this.actor.send({ type: "MOUNTED" }), this.addEventListener("pointerup", this.onPointerUp), this.addEventListener("pointermove", this.onPointerMove), this.addEventListener("click", this.onClickCapture, !0), this.addEventListener("click", this.onWrapperClick), this.addEventListener("mouseover", this.onMouseOver), this.addEventListener("mouseout", this.onMouseOut), this.syncFromSnapshot();
1482
- }
1483
- disconnectedCallback() {
1484
- var t, i, o, r, a, s;
1485
- this.removeEventListener("pointerup", this.onPointerUp), this.removeEventListener("pointermove", this.onPointerMove), this.removeEventListener("click", this.onClickCapture, !0), this.removeEventListener("click", this.onWrapperClick), this.removeEventListener("mouseover", this.onMouseOver), this.removeEventListener("mouseout", this.onMouseOut);
1486
- const e = G();
1487
- e && (e.delete(tt), e.delete(et), e.delete(L)), this.icons && (this.icons.positions = []), (t = this.manager) == null || t.destroy(), this.manager = null, (i = this.actor) == null || i.stop(), (o = this.bar) == null || o.remove(), (r = this.commentDialog) == null || r.remove(), (a = this.overallDialog) == null || a.remove(), (s = this.icons) == null || s.remove();
1488
- }
1489
- attributeChangedCallback() {
1490
- this.bar && (this.bar.barPosition = this.barPosition);
1491
- }
1492
- buildDetailResult(e) {
1493
- return e.status === "commented" ? {
1494
- ...e,
1495
- comments: ee(e.comments, this)
1496
- } : e;
1497
- }
1498
- emitChange(e) {
1499
- this.dispatchEvent(
1500
- new CustomEvent("llumi-review-change", {
1501
- detail: this.buildDetailResult(e),
1502
- bubbles: !0,
1503
- composed: !0
1504
- })
1505
- );
1506
- }
1507
- emitSubmit(e) {
1508
- this.dispatchEvent(
1509
- new CustomEvent("llumi-review-submit", {
1510
- detail: {
1511
- result: this.buildDetailResult(e),
1512
- clearPersisted: () => this.clearPersisted()
1513
- },
1514
- bubbles: !0,
1515
- composed: !0
1516
- })
1517
- );
1518
- }
1519
- /** Clears the persisted draft for this element. No-op when persistence is off. */
1520
- clearPersisted() {
1521
- this.persistence.clear();
1522
- }
1523
- // Build a floating-ui virtual reference that tracks a selection's live rect.
1524
- // `contextElement` lets autoUpdate find the right scroll ancestors. Returns
1525
- // null when the range can't be restored, so the dialog falls back to anchoring
1526
- // on the whole element.
1527
- selectionAnchor(e, t) {
1528
- const i = Q(e, t);
1529
- return i ? {
1530
- getBoundingClientRect: () => i.getBoundingClientRect(),
1531
- getClientRects: () => i.getClientRects(),
1532
- contextElement: e
1533
- } : null;
1534
- }
1535
- // --- chrome lifecycle ---
1536
- mountChrome() {
1537
- this.bar = document.createElement("llumi-review-bar"), this.bar.barPosition = this.barPosition, this.bar.addEventListener(
1538
- "toggle",
1539
- () => this.actor.send({ type: "TOGGLE" })
1540
- ), this.bar.addEventListener("overall-toggle", () => {
1541
- const e = this.actor.getSnapshot(), t = e.matches({ commenting: "editing" }) && e.context.editingCommentId === null;
1542
- this.actor.send(
1543
- t ? { type: "CLOSE" } : { type: "OPEN_OVERALL" }
1544
- );
1545
- }), this.bar.addEventListener(
1546
- "submit",
1547
- () => this.actor.send({ type: "SUBMIT" })
1548
- ), document.body.append(this.bar), this.icons = document.createElement(
1549
- "llumi-selection-comment-icons"
1550
- ), this.icons.addEventListener(
1551
- "icon-click",
1552
- (e) => this.onIconClick(e.detail)
1553
- ), document.body.append(this.icons);
1554
- }
1555
- onIconClick(e) {
1556
- const t = this.actor.getSnapshot().context.comments.find((o) => o.commentId === e);
1557
- if (!t) return;
1558
- const i = this.querySelector(
1559
- `[${H}="${t.targetId}"]`
1560
- );
1561
- i && this.actor.send({
1562
- type: "CLICK",
1563
- targetId: t.targetId,
1564
- element: i,
1565
- selectionCommentId: e
1566
- });
1567
- }
1568
- // --- snapshot → UI sync (replaces review.component.tsx render) ---
1569
- syncFromSnapshot() {
1570
- const e = this.actor.getSnapshot(), { comments: t, overallComment: i, editingCommentId: o, targetElement: r } = e.context;
1571
- this.selectionComments = t.filter(
1572
- (g) => g.selection && g.content.trim()
1573
- );
1574
- const a = !e.matches({ annotating: "inactive" }), s = e.matches({ commenting: "editing" }), l = o ? t.find((g) => g.commentId === o) : null, u = s && o === null, m = t.filter((g) => g.content.trim()).length, b = i.trim().length > 0;
1575
- this.bar.mode = a ? l ? "editing" : "commenting" : "idle", this.bar.commentCount = m, this.bar.hasOverallComment = b, this.bar.overallCommentOpen = u, this.icons.style.display = a ? "" : "none", s && l && r ? (this.commentDialog || (this.commentDialog = document.createElement(
1576
- "llumi-comment-dialog"
1577
- ), this.commentDialog.addEventListener(
1578
- "change",
1579
- (g) => this.actor.send({
1580
- type: "COMMENT_CHANGE",
1581
- content: g.detail
1582
- })
1583
- ), this.commentDialog.addEventListener(
1584
- "delete",
1585
- () => this.actor.send({ type: "DELETE" })
1586
- ), this.commentDialog.addEventListener(
1587
- "close",
1588
- () => this.actor.send({ type: "CLOSE" })
1589
- ), document.body.append(this.commentDialog)), l.commentId !== this.commentDialogAnchorId && (this.commentDialogAnchorId = l.commentId, this.commentDialog.anchor = l.selection ? this.selectionAnchor(r, l.selection) : null, this.commentDialog.targetElement = r), this.commentDialog.value = l.content) : this.commentDialog && (this.commentDialog.remove(), this.commentDialog = null, this.commentDialogAnchorId = null), u ? (this.overallDialog || (this.overallDialog = document.createElement(
1590
- "llumi-overall-comment-dialog"
1591
- ), this.overallDialog.addEventListener(
1592
- "change",
1593
- (g) => this.actor.send({
1594
- type: "COMMENT_CHANGE",
1595
- content: g.detail
1596
- })
1597
- ), this.overallDialog.addEventListener(
1598
- "close",
1599
- () => this.actor.send({ type: "CLOSE" })
1600
- ), document.body.append(this.overallDialog)), this.overallDialog.barElement = this.bar.barRoot, this.overallDialog.value = i) : this.overallDialog && (this.overallDialog.remove(), this.overallDialog = null), a && this.updateSelectionHighlights();
1601
- }
1602
- // --- highlight callbacks (port of use-review.ts `highlights`) ---
1603
- buildHighlightCallbacks() {
1604
- return {
1605
- activate: (e) => {
1606
- const t = this.manager;
1607
- t && (t.activate(e), t.startObserving({
1608
- editingTarget: this.actor.getSnapshot().context.targetElement,
1609
- onTargetDisconnected: () => this.actor.send({ type: "CLOSE" }),
1610
- onSelectableReconnected: () => this.updateSelectionHighlights(),
1611
- commentedIds: e
1612
- }));
1613
- },
1614
- deactivate: () => {
1615
- const e = this.manager;
1616
- if (!e) return;
1617
- e.deactivate(), e.stopObserving();
1618
- const t = G();
1619
- t && (t.delete(tt), t.delete(et), t.delete(L)), this.rangeMap.clear(), this.icons.positions = [];
1620
- },
1621
- reveal: (e) => {
1622
- var t;
1623
- return (t = this.manager) == null ? void 0 : t.reveal(e);
1624
- },
1625
- unreveal: () => {
1626
- var e;
1627
- return (e = this.manager) == null ? void 0 : e.unreveal();
1628
- },
1629
- setEditing: (e, t) => {
1630
- var i;
1631
- (i = this.manager) == null || i.setEditing(e, t), this.updateSelectionHighlights();
1632
- },
1633
- clearEditing: (e, t) => {
1634
- var i;
1635
- (i = this.manager) == null || i.clearEditing(e, t), this.updateSelectionHighlights();
1636
- }
1637
- };
1638
- }
1639
- // --- selection highlight painting (port of updateSelectionHighlights) ---
1640
- updateSelectionHighlights() {
1641
- const e = G();
1642
- if (!e) return;
1643
- const t = nt(), i = nt(), o = /* @__PURE__ */ new Map(), r = [], a = this.actor.getSnapshot().context;
1644
- for (const l of this.selectionComments) {
1645
- if (!l.selection) continue;
1646
- const u = this.querySelector(
1647
- `[${H}="${l.targetId}"]`
1648
- );
1649
- if (!u) continue;
1650
- const m = Q(u, l.selection);
1651
- if (!m) continue;
1652
- o.set(l.commentId, m), l.commentId === a.editingCommentId ? i.add(m) : t.add(m);
1653
- const b = m.getClientRects(), g = b[b.length - 1];
1654
- g && r.push({
1655
- commentId: l.commentId,
1656
- top: g.top + window.scrollY,
1657
- left: g.right + window.scrollX
1658
- });
1659
- }
1660
- const s = a.editingCommentId;
1661
- if (s && !o.has(s)) {
1662
- const l = a.comments.find(
1663
- (u) => u.commentId === s
1664
- );
1665
- if (l != null && l.selection) {
1666
- const u = this.querySelector(
1667
- `[${H}="${l.targetId}"]`
1668
- );
1669
- if (u) {
1670
- const m = Q(u, l.selection);
1671
- m && i.add(m);
1672
- }
1673
- }
1674
- }
1675
- this.rangeMap = o, e.set(
1676
- tt,
1677
- t
1678
- ), e.set(et, i), this.icons.positions = r;
1679
- }
1680
- isAnnotating() {
1681
- return !this.actor.getSnapshot().matches({ annotating: "inactive" });
1682
- }
1683
- caretPosition(e, t) {
1684
- if ("caretPositionFromPoint" in document) {
1685
- const i = document.caretPositionFromPoint(e, t);
1686
- if (i) return i;
1687
- } else if ("caretRangeFromPoint" in document) {
1688
- const i = document.caretRangeFromPoint(e, t);
1689
- if (i) return { offsetNode: i.startContainer, offset: i.startOffset };
1690
- }
1691
- return null;
1692
- }
1693
- currentEditingTargetId() {
1694
- var t;
1695
- const e = this.actor.getSnapshot().context;
1696
- if (e.editingCommentId)
1697
- return ((t = e.comments.find((i) => i.commentId === e.editingCommentId)) == null ? void 0 : t.targetId) ?? void 0;
1698
- }
1699
- };
1700
- lt.observedAttributes = ["bar-position", "shortcut", "default-mode"];
1701
- let at = lt;
1702
- customElements.get("llumi-review") || customElements.define("llumi-review", at);
1703
- export {
1704
- T as LlumiCommentDialog,
1705
- S as LlumiDefaultEditor,
1706
- O as LlumiOverallCommentDialog,
1707
- at as LlumiReview,
1708
- w as LlumiReviewBar,
1709
- rt as LlumiSelectionCommentIcons
1710
- };