@llumi/design-system 0.1.0

package/dist/review.mjs

@@ -0,0 +1,1601 @@
+import { fromCallback as st, setup as It, emit as lt, assign as x, stateIn as St, enqueueActions as Tt, createActor as kt } from "xstate";
+import { tinykeys as Lt } from "tinykeys";
+import { svg as _, html as v, LitElement as zt, unsafeCSS as Ot } from "lit";
+import { property as f, query as F, state as At, customElement as A } from "lit/decorators.js";
+import { clsx as Dt } from "clsx";
+import { twMerge as Mt } from "tailwind-merge";
+import { autoUpdate as pt, computePosition as ft, offset as vt, flip as wt, shift as bt, size as xt } from "@floating-ui/dom";
+import { classMap as _t } from "lit/directives/class-map.js";
+import { repeat as Nt } from "lit/directives/repeat.js";
+import { styleMap as $t } from "lit/directives/style-map.js";
+function ct(o, e) {
+  const t = o.getAttribute("data-review-id");
+  if (t) return t;
+  for (const i of e ?? [])
+    if (o.matches(i.selector)) {
+      const n = i.toId(o);
+      if (n) return n;
+    }
+  return null;
+}
+function N(o, e) {
+  const t = o.closest("[data-review-id]");
+  if (t) {
+    const i = t.getAttribute("data-review-id");
+    if (i) return { element: t, targetId: i };
+  }
+  for (const i of e ?? []) {
+    const n = o.closest(i.selector);
+    if (n) {
+      const r = i.toId(n);
+      if (r) return { element: n, targetId: r };
+    }
+  }
+  return null;
+}
+function $(o, e) {
+  const t = /* @__PURE__ */ new Set(), i = [];
+  for (const n of Array.from(
+    o.querySelectorAll("[data-review-id]")
+  )) {
+    const r = n.getAttribute("data-review-id");
+    if (!r) continue;
+    const a = n.hasAttribute("data-review-selectable");
+    i.push({
+      element: n,
+      targetId: r,
+      kind: a ? "both" : "element"
+    }), t.add(n);
+  }
+  for (const n of e ?? [])
+    for (const r of Array.from(
+      o.querySelectorAll(n.selector)
+    )) {
+      if (t.has(r)) continue;
+      const a = n.toId(r);
+      if (!a) continue;
+      const s = r.hasAttribute("data-review-selectable");
+      i.push({
+        element: r,
+        targetId: a,
+        kind: s ? "both" : "element"
+      }), t.add(r);
+    }
+  for (const n of Array.from(
+    o.querySelectorAll("[data-review-selectable]")
+  )) {
+    if (t.has(n)) continue;
+    const r = n.getAttribute("data-review-selectable");
+    r && (i.push({ element: n, targetId: r, kind: "selectable" }), t.add(n));
+  }
+  return i;
+}
+const et = "review-highlight-hover", C = "review-highlight-commented", G = "review-highlight-editing", j = "review-highlight-uncommented", V = "review-target", dt = "review-active";
+function B(o) {
+  o.classList.remove(
+    et,
+    C,
+    G,
+    j
+  );
+}
+function Pt(o, e) {
+  let t = null, i = null, n = null;
+  function r(c) {
+    o.classList.add(dt);
+    const h = $(o, e);
+    for (const { element: p, targetId: d, kind: T } of h)
+      (T === "element" || T === "both") && (p.hasAttribute("data-review-id") || p.classList.add(V), c.has(d) && p.classList.add(C));
+  }
+  function a() {
+    o.classList.remove(dt), t && (clearTimeout(t), t = null);
+    const c = $(o, e);
+    for (const { element: h } of c)
+      B(h), h.classList.remove(V);
+  }
+  function s(c) {
+    const h = $(o, e), p = [];
+    for (const { element: d } of h)
+      !d.classList.contains(C) && !d.classList.contains(G) && (d.classList.add(j), p.push(d));
+    c && (t && clearTimeout(t), t = setTimeout(() => {
+      t = null;
+      for (const d of p)
+        d.classList.contains(G) || d.classList.remove(j);
+    }, 500));
+  }
+  function l() {
+    t && (clearTimeout(t), t = null);
+    const c = $(o, e);
+    for (const { element: h } of c)
+      h.classList.remove(j);
+  }
+  function m(c, h) {
+    h || (B(c), c.classList.add(G));
+  }
+  function u(c, h) {
+    B(c), h && c.classList.add(C);
+  }
+  function b(c, h) {
+    (ct(c, e) ?? c.getAttribute("data-review-selectable")) !== h && c.classList.add(et);
+  }
+  function g(c, h, p) {
+    const d = ct(c, e) ?? c.getAttribute("data-review-selectable");
+    d !== h && (c.classList.remove(et), d && (p != null && p.has(d)) && c.classList.add(C));
+  }
+  function Ct(c) {
+    W(), n = c.editingTarget ?? null, i = new MutationObserver((h) => {
+      for (const p of h) {
+        for (const d of Array.from(p.removedNodes)) {
+          if (!(d instanceof HTMLElement)) continue;
+          n && (d === n || d.contains(n)) && (n = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
+        }
+        for (const d of Array.from(p.addedNodes)) {
+          if (!(d instanceof HTMLElement)) continue;
+          const T = [
+            ...d.matches("[data-review-id]") ? [d] : [],
+            ...Array.from(
+              d.querySelectorAll("[data-review-id]")
+            )
+          ];
+          for (const I of T) {
+            const M = I.getAttribute("data-review-id");
+            M && c.commentedIds.has(M) && I.classList.add(C);
+          }
+          for (const I of e ?? []) {
+            const M = [
+              ...d.matches(I.selector) ? [d] : [],
+              ...Array.from(d.querySelectorAll(I.selector))
+            ];
+            for (const K of M) {
+              const at = I.toId(K);
+              K.classList.add(V), at && c.commentedIds.has(at) && K.classList.add(C);
+            }
+          }
+          (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
+        }
+      }
+    }), i.observe(o, { childList: !0, subtree: !0 });
+  }
+  function W() {
+    i && (i.disconnect(), i = null), n = null;
+  }
+  function Et() {
+    a(), W();
+  }
+  return {
+    activate: r,
+    deactivate: a,
+    reveal: s,
+    unreveal: l,
+    setEditing: m,
+    clearEditing: u,
+    applyHover: b,
+    clearHover: g,
+    startObserving: Ct,
+    stopObserving: W,
+    destroy: Et
+  };
+}
+const Rt = `: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}`;
+function Ht(o, e) {
+  const t = o.find(
+    (n) => n.targetId === e && !n.selection
+  );
+  return t ? { comment: t, isNew: !1 } : { comment: {
+    commentId: crypto.randomUUID(),
+    targetId: e,
+    content: "",
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  }, isNew: !0 };
+}
+function Gt(o) {
+  let e = o.comments;
+  if (o.editingCommentId !== null) {
+    const t = e.find(
+      (i) => i.commentId === o.editingCommentId
+    );
+    t && t.content === "" && (e = e.filter(
+      (i) => i.commentId !== o.editingCommentId
+    ));
+  }
+  return {
+    comments: e,
+    editingCommentId: null,
+    targetElement: null,
+    selectionRange: null
+  };
+}
+function ht(o) {
+  const e = o.comments.filter((n) => n.content.trim()), t = e.length > 0, i = o.overallComment.trim().length > 0;
+  return !t && !i ? { status: "approved" } : {
+    status: "commented",
+    comments: e,
+    overallComment: i ? o.overallComment.trim() : void 0
+  };
+}
+function jt(o) {
+  const e = /* @__PURE__ */ new Set();
+  for (const t of o.comments)
+    !t.selection && t.content.trim() && e.add(t.targetId);
+  return e;
+}
+function Ut() {
+  const o = st(
+    ({ sendBack: t, input: i }) => {
+      const n = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
+        l.key === "Alt" && (l.preventDefault(), t({ type: "HOLD_ANNOTATE" }));
+      }, a = (l) => {
+        l.key === "Alt" && t({ type: "RELEASE_ANNOTATE" });
+      }, s = Lt(window, {
+        [i.shortcut]: (l) => {
+          l.preventDefault(), t({ type: "TOGGLE" });
+        },
+        "$mod+Enter": (l) => {
+          l.preventDefault(), t({ type: "CLOSE" });
+        },
+        "$mod+Shift+Backspace": (l) => {
+          l.preventDefault(), t({ type: "DELETE" });
+        },
+        Escape: (l) => {
+          l.preventDefault(), t({ type: "CLOSE" });
+        }
+      });
+      return window.addEventListener("keydown", r), window.addEventListener("keyup", a), window.addEventListener("blur", n), () => {
+        s(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", a), window.removeEventListener("blur", n);
+      };
+    }
+  ), e = st(({ sendBack: t, input: i }) => {
+    const n = new MutationObserver((r) => {
+      for (const a of r)
+        for (const s of Array.from(a.removedNodes))
+          if (s instanceof HTMLElement && (s === i.targetElement || s.contains(i.targetElement))) {
+            t({ type: "TARGET_DISCONNECTED" });
+            return;
+          }
+    });
+    return n.observe(i.wrapperElement, { childList: !0, subtree: !0 }), () => n.disconnect();
+  });
+  return It({
+    types: {
+      context: {},
+      events: {},
+      input: {},
+      emitted: {}
+    },
+    actors: {
+      keyboardActor: o,
+      mutationObserverActor: e
+    },
+    guards: {
+      isCommentingEditing: St({ commenting: "editing" }),
+      hasSelectionCommentId: ({ event: t }) => t.type !== "CLICK" ? !1 : !!t.selectionCommentId,
+      hasTargetId: ({ event: t }) => t.type !== "CLICK" ? !1 : !!t.targetId && !t.selectionCommentId,
+      hasNoTarget: ({ event: t }) => t.type !== "CLICK" ? !1 : !t.targetId && !t.selectionCommentId,
+      isSameComment: ({ context: t, event: i }) => {
+        if (i.type !== "CLICK") return !1;
+        if (i.selectionCommentId)
+          return t.editingCommentId === i.selectionCommentId;
+        if (i.targetId) {
+          const n = t.comments.find(
+            (r) => r.commentId === t.editingCommentId
+          );
+          return !!n && n.targetId === i.targetId && !n.selection;
+        }
+        return !1;
+      }
+    },
+    delays: {
+      flashDuration: 500
+    },
+    actions: {
+      openElementComment: x(({ context: t, event: i }) => {
+        if (i.type !== "CLICK" || !i.targetId) return {};
+        const { comment: n, isNew: r } = Ht(
+          t.comments,
+          i.targetId
+        );
+        return {
+          comments: r ? [...t.comments, n] : t.comments,
+          editingCommentId: n.commentId,
+          targetElement: i.element ?? null,
+          selectionRange: null
+        };
+      }),
+      openSelectionComment: x(({ event: t }) => t.type !== "CLICK" || !t.selectionCommentId ? {} : {
+        editingCommentId: t.selectionCommentId,
+        targetElement: t.element ?? null,
+        selectionRange: null
+      }),
+      createSelectionComment: x(({ context: t, event: i }) => {
+        if (i.type !== "SELECT_TEXT") return {};
+        const n = {
+          commentId: crypto.randomUUID(),
+          targetId: i.targetId,
+          content: "",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          selection: i.selectionRange
+        };
+        return {
+          comments: [...t.comments, n],
+          editingCommentId: n.commentId,
+          targetElement: i.targetElement,
+          selectionRange: i.selectionRange
+        };
+      }),
+      updateContent: x(({ context: t, event: i }) => i.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: i.content } : {
+        comments: t.comments.map(
+          (n) => n.commentId === t.editingCommentId ? { ...n, content: i.content } : n
+        )
+      }),
+      deleteComment: x(({ context: t }) => ({
+        comments: t.comments.filter(
+          (i) => i.commentId !== t.editingCommentId
+        ),
+        editingCommentId: null,
+        targetElement: null,
+        selectionRange: null
+      })),
+      cleanup: x(({ context: t }) => Gt(t)),
+      emitChanged: lt(({ context: t }) => ({
+        type: "REVIEW_CHANGED",
+        result: ht(t)
+      })),
+      emitSubmitted: lt(({ context: t }) => ({
+        type: "REVIEW_SUBMITTED",
+        result: ht(t)
+      })),
+      // Highlight lifecycle actions — call manager methods directly via
+      // callbacks passed through input. The machine owns WHEN highlights
+      // change; the manager owns HOW (DOM manipulation).
+      // Actions run synchronously during transitions — no timing gap.
+      // Never add useEffects that react to derived machine state.
+      highlightsActivate: ({ context: t }) => {
+        t.highlights.activate(jt(t));
+      },
+      highlightsDeactivate: ({ context: t }) => {
+        t.highlights.deactivate();
+      },
+      highlightsRevealFlash: ({ context: t }) => {
+        t.highlights.reveal(!0);
+      },
+      highlightsReveal: ({ context: t }) => {
+        t.highlights.reveal(!1);
+      },
+      highlightsUnreveal: ({ context: t }) => {
+        t.highlights.unreveal();
+      },
+      editingTargetSet: ({ context: t }) => {
+        var n;
+        if (!t.targetElement) return;
+        const i = !!((n = t.comments.find(
+          (r) => r.commentId === t.editingCommentId
+        )) != null && n.selection);
+        t.highlights.setEditing(t.targetElement, i);
+      },
+      editingTargetCleared: ({ context: t }) => {
+        if (!t.targetElement) return;
+        const i = t.comments.find(
+          (n) => n.commentId === t.editingCommentId
+        );
+        t.highlights.clearEditing(
+          t.targetElement,
+          !!(i != null && i.content.trim())
+        );
+      }
+    }
+  }).createMachine({
+    id: "review",
+    type: "parallel",
+    context: ({ input: t }) => {
+      var r, a;
+      const i = ((r = t.initialData) == null ? void 0 : r.status) === "commented" ? t.initialData.comments ?? [] : [], n = ((a = t.initialData) == null ? void 0 : a.status) === "commented" ? t.initialData.overallComment ?? "" : "";
+      return {
+        comments: i,
+        overallComment: n,
+        editingCommentId: null,
+        targetElement: null,
+        selectionRange: null,
+        shortcut: t.shortcut,
+        defaultMode: t.defaultMode,
+        highlights: t.highlights
+      };
+    },
+    invoke: {
+      id: "keyboard",
+      src: "keyboardActor",
+      input: ({ context: t }) => ({ shortcut: t.shortcut })
+    },
+    states: {
+      annotating: {
+        initial: "waitingForMount",
+        on: {
+          SUBMIT: ".inactive"
+        },
+        states: {
+          waitingForMount: {
+            on: {
+              MOUNTED: [
+                {
+                  guard: ({ context: t }) => t.defaultMode === "annotating",
+                  target: "toggled"
+                },
+                { target: "inactive" }
+              ]
+            }
+          },
+          inactive: {
+            on: {
+              TOGGLE: "toggled",
+              HOLD_ANNOTATE: "held"
+            }
+          },
+          toggled: {
+            initial: "flashing",
+            entry: "highlightsActivate",
+            exit: "highlightsDeactivate",
+            on: {
+              TOGGLE: {
+                target: "inactive",
+                actions: Tt(({ enqueue: t, check: i }) => {
+                  i("isCommentingEditing") && t.raise({ type: "CLOSE" });
+                })
+              }
+            },
+            states: {
+              flashing: {
+                entry: "highlightsRevealFlash",
+                exit: "highlightsUnreveal",
+                after: {
+                  flashDuration: "ready"
+                },
+                on: {
+                  HOLD_ANNOTATE: "revealing"
+                }
+              },
+              ready: {
+                on: {
+                  HOLD_ANNOTATE: "revealing"
+                }
+              },
+              revealing: {
+                entry: "highlightsReveal",
+                exit: "highlightsUnreveal",
+                on: {
+                  RELEASE_ANNOTATE: "ready"
+                }
+              }
+            }
+          },
+          held: {
+            initial: "revealing",
+            entry: "highlightsActivate",
+            exit: "highlightsDeactivate",
+            states: {
+              revealing: {
+                entry: "highlightsReveal",
+                exit: "highlightsUnreveal",
+                on: {
+                  RELEASE_ANNOTATE: [
+                    { guard: "isCommentingEditing", target: "lingering" },
+                    { target: "#review.annotating.inactive" }
+                  ]
+                }
+              },
+              lingering: {
+                on: {
+                  CLOSE: "#review.annotating.inactive",
+                  DELETE: "#review.annotating.inactive"
+                }
+              }
+            }
+          }
+        }
+      },
+      commenting: {
+        initial: "idle",
+        states: {
+          idle: {
+            on: {
+              CLICK: [
+                {
+                  guard: "hasSelectionCommentId",
+                  target: "editing.selection",
+                  actions: ["openSelectionComment", "editingTargetSet"]
+                },
+                {
+                  guard: "hasTargetId",
+                  target: "editing.element",
+                  actions: ["openElementComment", "editingTargetSet"]
+                }
+              ],
+              SELECT_TEXT: {
+                target: "editing.selection",
+                actions: ["createSelectionComment", "editingTargetSet"]
+              },
+              OPEN_OVERALL: {
+                target: "editing.element",
+                actions: x({
+                  editingCommentId: null,
+                  targetElement: null,
+                  selectionRange: null
+                })
+              },
+              SUBMIT: {
+                actions: ["emitSubmitted"]
+              }
+            }
+          },
+          editing: {
+            initial: "element",
+            on: {
+              CLICK: [
+                { guard: "isSameComment" },
+                {
+                  guard: "hasSelectionCommentId",
+                  target: ".selection",
+                  reenter: !0,
+                  actions: [
+                    "editingTargetCleared",
+                    "cleanup",
+                    "openSelectionComment",
+                    "editingTargetSet"
+                  ]
+                },
+                {
+                  guard: "hasTargetId",
+                  target: ".element",
+                  reenter: !0,
+                  actions: [
+                    "editingTargetCleared",
+                    "cleanup",
+                    "openElementComment",
+                    "editingTargetSet"
+                  ]
+                },
+                {
+                  guard: "hasNoTarget",
+                  target: "idle",
+                  actions: ["editingTargetCleared", "cleanup", "emitChanged"]
+                }
+              ],
+              SELECT_TEXT: {
+                target: ".selection",
+                reenter: !0,
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  "createSelectionComment",
+                  "editingTargetSet"
+                ]
+              },
+              COMMENT_CHANGE: {
+                actions: ["updateContent", "emitChanged"]
+              },
+              DELETE: {
+                target: "idle",
+                actions: [
+                  "editingTargetCleared",
+                  "deleteComment",
+                  "emitChanged"
+                ]
+              },
+              CLOSE: {
+                target: "idle",
+                actions: ["editingTargetCleared", "cleanup", "emitChanged"]
+              },
+              TARGET_DISCONNECTED: {
+                target: "idle",
+                actions: ["editingTargetCleared", "cleanup", "emitChanged"]
+              },
+              SUBMIT: {
+                target: "idle",
+                actions: ["editingTargetCleared", "cleanup", "emitSubmitted"]
+              },
+              OPEN_OVERALL: {
+                target: ".element",
+                reenter: !0,
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  x({
+                    editingCommentId: null,
+                    targetElement: null,
+                    selectionRange: null
+                  })
+                ]
+              }
+            },
+            states: {
+              element: {},
+              selection: {}
+            }
+          }
+        }
+      }
+    }
+  });
+}
+const Ft = 3;
+function Xt(o) {
+  const e = window.getSelection();
+  if (!e || e.isCollapsed || e.rangeCount === 0)
+    return null;
+  const t = e.getRangeAt(0), i = t.toString();
+  if (i.length < Ft) return null;
+  const n = Kt(
+    o,
+    t.startContainer,
+    t.startOffset
+  ), r = n + i.length;
+  if (n < 0) return null;
+  const a = Vt(
+    o.textContent ?? "",
+    i,
+    n
+  );
+  return { startOffset: n, endOffset: r, selectedText: i, matchIndex: a };
+}
+function gt(o, e) {
+  const t = o.textContent ?? "";
+  if (t.slice(
+    e.startOffset,
+    e.endOffset
+  ) === e.selectedText)
+    return mt(
+      o,
+      e.startOffset,
+      e.endOffset
+    );
+  const n = Bt(
+    t,
+    e.selectedText,
+    e.matchIndex
+  );
+  return n < 0 ? null : mt(
+    o,
+    n,
+    n + e.selectedText.length
+  );
+}
+function qt(o, e) {
+  if (o.isCollapsed || o.rangeCount === 0) return !1;
+  const t = o.getRangeAt(0);
+  return e.contains(t.startContainer) && e.contains(t.endContainer);
+}
+function Y(o) {
+  const e = o instanceof HTMLElement ? o : o.parentElement;
+  return (e == null ? void 0 : e.closest("[data-review-selectable]")) ?? null;
+}
+function Wt(o, e) {
+  var a;
+  if (o.isCollapsed || o.rangeCount === 0) return null;
+  const t = o.getRangeAt(0), i = t.cloneRange(), n = e.contains(t.startContainer), r = e.contains(t.endContainer);
+  if (n && r) return i;
+  if (n && !r) {
+    const s = Yt(e);
+    return s && i.setEnd(s, ((a = s.textContent) == null ? void 0 : a.length) ?? 0), i;
+  }
+  return null;
+}
+function Kt(o, e, t) {
+  var r;
+  const i = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
+  let n = 0;
+  for (; i.nextNode(); ) {
+    if (i.currentNode === e) return n + t;
+    n += ((r = i.currentNode.textContent) == null ? void 0 : r.length) ?? 0;
+  }
+  return -1;
+}
+function mt(o, e, t) {
+  var s;
+  const i = document.createTreeWalker(o, NodeFilter.SHOW_TEXT), n = document.createRange();
+  let r = 0, a = !1;
+  for (; i.nextNode(); ) {
+    const l = ((s = i.currentNode.textContent) == null ? void 0 : s.length) ?? 0;
+    if (!a && r + l > e && (n.setStart(i.currentNode, e - r), a = !0), a && r + l >= t)
+      return n.setEnd(i.currentNode, t - r), n;
+    r += l;
+  }
+  return null;
+}
+function Vt(o, e, t) {
+  let i = 0, n = 0;
+  for (; ; ) {
+    const r = o.indexOf(e, n);
+    if (r < 0 || r === t) return i;
+    n = r + 1, i++;
+  }
+}
+function Bt(o, e, t) {
+  let i = 0, n = 0;
+  for (; ; ) {
+    const r = o.indexOf(e, n);
+    if (r < 0) return -1;
+    if (i === t) return r;
+    n = r + 1, i++;
+  }
+}
+function Yt(o) {
+  const e = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
+  let t = null;
+  for (; e.nextNode(); )
+    t = e.currentNode;
+  return t;
+}
+function Jt(o, e) {
+  const t = /* @__PURE__ */ new Map();
+  return e.querySelectorAll("[data-review-id]").forEach((n, r) => {
+    const a = n.getAttribute("data-review-id");
+    a && t.set(a, r);
+  }), [...o].sort((n, r) => {
+    const a = t.get(n.targetId) ?? Number.MAX_SAFE_INTEGER, s = t.get(r.targetId) ?? Number.MAX_SAFE_INTEGER;
+    return a - s;
+  });
+}
+function k(...o) {
+  return Mt(Dt(o));
+}
+function P(o) {
+  return v`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    aria-hidden="true"
+  >
+    ${o}
+  </svg>`;
+}
+const U = {
+  check: P(_`<path d="M20 6 9 17l-5-5" />`),
+  gripVertical: P(
+    _`<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" />`
+  ),
+  messageSquare: P(
+    _`<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />`
+  ),
+  trash: P(
+    _`<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" />`
+  )
+}, Qt = '/*! 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-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)}}@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}', Zt = Ot(Qt), ot = class ot extends zt {
+};
+ot.styles = Zt;
+let E = ot;
+var te = Object.defineProperty, ee = Object.getOwnPropertyDescriptor, y = (o, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ee(e, t) : e, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (n = (i ? a(e, t, n) : a(n)) || n);
+  return i && n && te(e, t, n), n;
+};
+const ie = {
+  "top-left": { top: "16px", left: "16px" },
+  "top-center": { top: "16px", left: "50%", translateX: "-50%" },
+  "top-right": { top: "16px", right: "16px" },
+  "bottom-left": { bottom: "16px", left: "16px" },
+  "bottom-center": { bottom: "16px", left: "50%", translateX: "-50%" },
+  "bottom-right": { bottom: "16px", right: "16px" }
+};
+let w = class extends E {
+  constructor() {
+    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 = (o) => {
+      const e = this.bar.getBoundingClientRect();
+      this.dragStart = {
+        px: o.clientX,
+        py: o.clientY,
+        ox: e.left,
+        oy: e.top
+      }, window.addEventListener("pointermove", this.onDragMove), window.addEventListener("pointerup", this.onDragEnd);
+    }, this.onDragMove = (o) => {
+      if (!this.dragStart) return;
+      const e = this.dragStart.ox + (o.clientX - this.dragStart.px), t = this.dragStart.oy + (o.clientY - this.dragStart.py), i = 16, n = window.innerWidth - this.bar.offsetWidth - i, r = window.innerHeight - this.bar.offsetHeight - i;
+      this.dragOffset = {
+        x: Math.max(i, Math.min(e, n)),
+        y: Math.max(i, Math.min(t, r))
+      };
+    }, this.onDragEnd = () => {
+      this.dragStart = null, window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
+    };
+  }
+  get barRoot() {
+    return this.bar ?? null;
+  }
+  render() {
+    const o = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, i = ie[this.barPosition], n = 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);`;
+    return v`<div
+      data-bar
+      class=${k(
+      "flex items-center gap-2 rounded-full border border-zinc-200 bg-white p-1 shadow-lg",
+      o && "ring-1 ring-zinc-400/20"
+    )}
+      style=${n}
+    >
+      <div
+        class="flex h-7 w-7 cursor-grab items-center justify-center text-zinc-400 active:cursor-grabbing"
+        @pointerdown=${this.onDragStart}
+      >
+        <span class="size-3">${U.gripVertical}</span>
+      </div>
+
+      <label class="flex cursor-pointer items-center gap-2 px-1">
+        <span class=${k("select-none text-xs font-medium transition-colors duration-150", o ? "text-zinc-900" : "text-zinc-500")}>Annotate</span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked=${o ? "true" : "false"}
+          data-toggle
+          @click=${this.onToggle}
+          class=${k(
+      "relative inline-flex h-4 w-7 items-center rounded-full transition-colors",
+      o ? "bg-zinc-900" : "bg-zinc-300"
+    )}
+        >
+          <span class=${k("inline-block size-3 transform rounded-full bg-white transition-transform", o ? "translate-x-3.5" : "translate-x-0.5")}></span>
+        </button>
+      </label>
+
+      <div class="h-4 w-px bg-zinc-200"></div>
+
+      <button
+        type="button"
+        data-overall
+        @click=${this.onOverallToggle}
+        class=${k(
+      "relative flex h-7 items-center gap-1.5 rounded-full px-3 text-xs font-medium",
+      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"
+    )}
+      >
+        Comment
+        <span class="size-3.5">${U.messageSquare}</span>
+      </button>
+
+      <div class="h-4 w-px bg-zinc-200"></div>
+
+      <button
+        type="button"
+        data-submit
+        @click=${this.onSubmit}
+        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"
+      >
+        ${t ? "Submit" : "Approve"}
+        <span class="flex h-[18px] min-w-[18px] items-center justify-center rounded-full bg-white/25 px-1 text-[11px] font-semibold">
+          ${t ? e : v`<span class="size-3">${U.check}</span>`}
+        </span>
+      </button>
+    </div>`;
+  }
+  onToggle() {
+    this.dispatchEvent(
+      new CustomEvent("toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  onOverallToggle() {
+    this.dispatchEvent(
+      new CustomEvent("overall-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  onSubmit() {
+    this.dispatchEvent(
+      new CustomEvent("submit", { bubbles: !0, composed: !0 })
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
+  }
+};
+y([
+  f()
+], w.prototype, "mode", 2);
+y([
+  f({ type: Number })
+], w.prototype, "commentCount", 2);
+y([
+  f({ type: Boolean })
+], w.prototype, "hasOverallComment", 2);
+y([
+  f({ type: Boolean })
+], w.prototype, "overallCommentOpen", 2);
+y([
+  f()
+], w.prototype, "barPosition", 2);
+y([
+  F("[data-bar]")
+], w.prototype, "bar", 2);
+y([
+  At()
+], w.prototype, "dragOffset", 2);
+w = y([
+  A("llumi-review-bar")
+], w);
+var ne = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, D = (o, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? oe(e, t) : e, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (n = (i ? a(e, t, n) : a(n)) || n);
+  return i && n && ne(e, t, n), n;
+};
+let S = class extends E {
+  constructor() {
+    super(...arguments), this.value = "", this.autoFocus = !1, this.placeholder = "Write a comment...";
+  }
+  /** Focus the inner textarea (the element itself isn't focusable). */
+  focus() {
+    var o;
+    (o = this.textarea) == null || o.focus();
+  }
+  render() {
+    return v`<textarea
+      rows="1"
+      placeholder=${this.placeholder}
+      .value=${this.value}
+      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"
+      @input=${this.onInput}
+    ></textarea>`;
+  }
+  onInput(o) {
+    const e = o.target.value;
+    this.autoGrow(), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  autoGrow() {
+    const o = this.textarea;
+    o && (o.style.height = "auto", o.style.height = `${o.scrollHeight}px`);
+  }
+  firstUpdated() {
+    this.autoFocus && this.textarea.focus(), this.autoGrow();
+  }
+  updated() {
+    this.autoGrow();
+  }
+};
+D([
+  f()
+], S.prototype, "value", 2);
+D([
+  f({ type: Boolean })
+], S.prototype, "autoFocus", 2);
+D([
+  f()
+], S.prototype, "placeholder", 2);
+D([
+  F("textarea")
+], S.prototype, "textarea", 2);
+S = D([
+  A("llumi-default-editor")
+], S);
+var re = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, X = (o, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? ae(e, t) : e, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (n = (i ? a(e, t, n) : a(n)) || n);
+  return i && n && re(e, t, n), n;
+};
+let z = class extends E {
+  constructor() {
+    super(...arguments), this.targetElement = null, this.value = "";
+  }
+  render() {
+    const o = this.value.trim().length > 0;
+    return v`<div
+      data-floating
+      class="z-[calc(var(--review-z-index,9998)+1)]"
+      style="position:absolute;top:0;left:0;"
+    >
+      <div
+        class=${_t({
+      "relative w-[400px] rounded-lg border border-zinc-200 bg-white shadow-xl": !0,
+      "animate-[llumi-fade-in_0.15s_ease-out]": !0
+    })}
+      >
+        ${o ? v`<button
+              type="button"
+              data-delete
+              @click=${this.onDelete}
+              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"
+            >
+              <span class="size-3.5">${U.trash}</span>
+              <span class="max-w-0 overflow-hidden text-xs transition-all duration-150 group-hover:max-w-[60px]">Delete</span>
+            </button>` : null}
+        <div class="p-3" @change=${this.onEditorChange} @cancel=${this.onCancel} @delete=${this.onDelete}>
+          <slot name="editor">
+            <llumi-default-editor .value=${this.value} autoFocus></llumi-default-editor>
+          </slot>
+        </div>
+      </div>
+    </div>`;
+  }
+  onEditorChange(o) {
+    if (typeof o.detail != "string") return;
+    const e = o.detail;
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
+    );
+  }
+  onCancel(o) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("close", { bubbles: !0, composed: !0 })
+    );
+  }
+  onDelete(o) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("delete", { bubbles: !0, composed: !0 })
+    );
+  }
+  startPositioning() {
+    var t;
+    const o = this.targetElement, e = this.floating;
+    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = pt(o, e, () => {
+      ft(o, e, {
+        placement: "right",
+        middleware: [
+          vt(12),
+          wt({ padding: 16 }),
+          bt({ padding: 16, crossAxis: !0 }),
+          xt({
+            padding: 16,
+            apply({ availableWidth: i, elements: n }) {
+              Object.assign(n.floating.style, {
+                maxWidth: `${Math.min(400, i)}px`
+              });
+            }
+          })
+        ]
+      }).then(({ x: i, y: n }) => {
+        Object.assign(e.style, { left: `${i}px`, top: `${n}px` });
+      });
+    }));
+  }
+  updated(o) {
+    o.has("targetElement") && (this.startPositioning(), this.focusEditor());
+  }
+  focusEditor() {
+    const o = this.renderRoot.querySelector(
+      'slot[name="editor"]'
+    ), t = ((o == null ? void 0 : o.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
+    t == null || t.focus();
+  }
+  disconnectedCallback() {
+    var o;
+    super.disconnectedCallback(), (o = this.cleanup) == null || o.call(this), this.cleanup = void 0;
+  }
+};
+X([
+  f({ attribute: !1 })
+], z.prototype, "targetElement", 2);
+X([
+  f()
+], z.prototype, "value", 2);
+X([
+  F("[data-floating]")
+], z.prototype, "floating", 2);
+z = X([
+  A("llumi-comment-dialog")
+], z);
+var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, q = (o, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? le(e, t) : e, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (n = (i ? a(e, t, n) : a(n)) || n);
+  return i && n && se(e, t, n), n;
+};
+let O = class extends E {
+  constructor() {
+    super(...arguments), this.barElement = null, this.value = "", this.onDocKeydown = (o) => {
+      o.key === "Escape" && (o.preventDefault(), this.emitClose());
+    }, this.onDocPointerdown = (o) => {
+      const e = o.composedPath();
+      this.floating && !e.includes(this.floating) && !e.includes(this) && this.emitClose();
+    };
+  }
+  render() {
+    return v`<div
+      data-floating
+      class="z-[calc(var(--review-z-index,9998)+1)]"
+      style="position:absolute;top:0;left:0;"
+    >
+      <div class="w-[400px] rounded-lg border border-zinc-200 bg-white shadow-xl animate-[llumi-fade-in_0.15s_ease-out]">
+        <div class="p-3" @change=${this.onEditorChange}>
+          <slot name="editor">
+            <llumi-default-editor
+              .value=${this.value}
+              autoFocus
+              placeholder="Overall comment..."
+            ></llumi-default-editor>
+          </slot>
+        </div>
+      </div>
+    </div>`;
+  }
+  onEditorChange(o) {
+    if (typeof o.detail != "string") return;
+    const e = o.detail;
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
+    );
+  }
+  emitClose() {
+    this.dispatchEvent(
+      new CustomEvent("close", { bubbles: !0, composed: !0 })
+    );
+  }
+  startPositioning() {
+    var t;
+    const o = this.barElement, e = this.floating;
+    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = pt(o, e, () => {
+      ft(o, e, {
+        placement: "top",
+        middleware: [
+          vt(12),
+          wt({ padding: 16 }),
+          bt({ padding: 16, crossAxis: !0 }),
+          xt({
+            padding: 16,
+            apply({ availableWidth: i, elements: n }) {
+              Object.assign(n.floating.style, {
+                maxWidth: `${Math.min(400, i)}px`
+              });
+            }
+          })
+        ]
+      }).then(({ x: i, y: n }) => {
+        Object.assign(e.style, { left: `${i}px`, top: `${n}px` });
+      });
+    }));
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this.onDocKeydown), document.addEventListener("pointerdown", this.onDocPointerdown, !0);
+  }
+  updated(o) {
+    o.has("barElement") && this.startPositioning();
+  }
+  disconnectedCallback() {
+    var o;
+    super.disconnectedCallback(), (o = this.cleanup) == null || o.call(this), this.cleanup = void 0, document.removeEventListener("keydown", this.onDocKeydown), document.removeEventListener("pointerdown", this.onDocPointerdown, !0);
+  }
+};
+q([
+  f({ attribute: !1 })
+], O.prototype, "barElement", 2);
+q([
+  f()
+], O.prototype, "value", 2);
+q([
+  F("[data-floating]")
+], O.prototype, "floating", 2);
+O = q([
+  A("llumi-overall-comment-dialog")
+], O);
+var ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, yt = (o, e, t, i) => {
+  for (var n = i > 1 ? void 0 : i ? de(e, t) : e, r = o.length - 1, a; r >= 0; r--)
+    (a = o[r]) && (n = (i ? a(e, t, n) : a(n)) || n);
+  return i && n && ce(e, t, n), n;
+};
+const he = "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";
+let it = class extends E {
+  constructor() {
+    super(...arguments), this.positions = [];
+  }
+  render() {
+    return v`${Nt(
+      this.positions,
+      (o) => o.commentId,
+      (o) => v`<button
+        type="button"
+        @click=${(e) => this.onClick(e, o.commentId)}
+        style=${$t({
+        position: "absolute",
+        top: `${o.top - 10}px`,
+        left: `${o.left + 2}px`,
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        backgroundColor: "white",
+        backgroundImage: `url("${he}")`,
+        backgroundSize: "12px 12px",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        boxShadow: "0 1px 3px oklch(0 0 0 / 0.1)",
+        zIndex: "calc(var(--review-z-index, 9998) + 1)",
+        border: "none",
+        padding: "0",
+        cursor: "pointer"
+      })}
+      ></button>`
+    )}`;
+  }
+  onClick(o, e) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("icon-click", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+yt([
+  f({ attribute: !1 })
+], it.prototype, "positions", 2);
+it = yt([
+  A("llumi-selection-comment-icons")
+], it);
+const R = "data-review-selectable", J = "review-selection-commented", Q = "review-selection-editing", L = "review-selection-hover", ge = "$mod+Shift+M", ut = "data-llumi-review";
+let Z = !1;
+function me() {
+  if (Z) return;
+  if (document.querySelector(`style[${ut}]`)) {
+    Z = !0;
+    return;
+  }
+  const o = document.createElement("style");
+  o.setAttribute(ut, ""), o.textContent = Rt, document.head.append(o), Z = !0;
+}
+function H() {
+  if (!(typeof CSS > "u"))
+    return CSS.highlights;
+}
+function tt(...o) {
+  return new Highlight(
+    ...o
+  );
+}
+const rt = class rt extends HTMLElement {
+  constructor() {
+    super(...arguments), this.manager = null, this.rangeMap = /* @__PURE__ */ new Map(), this.hoveredComment = null, this.selectionJustHandled = !1, this.selectionComments = [], this.commentDialog = null, this.overallDialog = null, this.onPointerUp = () => {
+      if (!this.isAnnotating()) return;
+      const e = window.getSelection();
+      if (!e || e.isCollapsed || e.rangeCount === 0)
+        return;
+      const t = e.getRangeAt(0), i = Y(t.startContainer);
+      if (!i) return;
+      const n = Y(t.endContainer);
+      if (n && n !== i) {
+        e.removeAllRanges();
+        return;
+      }
+      if (!n || !qt(e, i)) {
+        const s = Wt(e, i);
+        if (!s) return;
+        e.removeAllRanges(), e.addRange(s);
+      }
+      const r = i.getAttribute(R);
+      if (!r) return;
+      const a = Xt(i);
+      a && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
+        type: "SELECT_TEXT",
+        targetId: r,
+        targetElement: i,
+        selectionRange: a
+      }));
+    }, this.onPointerMove = (e) => {
+      if (!this.isAnnotating()) return;
+      const t = H();
+      if (!t) return;
+      const i = this.caretPosition(e.clientX, e.clientY);
+      if (!i) {
+        this.hoveredComment && (t.delete(L), this.hoveredComment = null);
+        return;
+      }
+      let n = null;
+      for (const [r, a] of this.rangeMap)
+        if (a.isPointInRange(i.offsetNode, i.offset)) {
+          n = r;
+          break;
+        }
+      if (n !== this.hoveredComment)
+        if (this.hoveredComment = n, n) {
+          const r = this.rangeMap.get(n);
+          r && t.set(
+            L,
+            tt(r)
+          );
+        } else
+          t.delete(L);
+    }, this.onClickCapture = (e) => {
+      if (!this.isAnnotating() || e.defaultPrevented) return;
+      if (this.selectionJustHandled) {
+        this.selectionJustHandled = !1, e.stopPropagation();
+        return;
+      }
+      const t = window.getSelection();
+      if (t && !t.isCollapsed) return;
+      const i = this.caretPosition(e.clientX, e.clientY);
+      if (i) {
+        for (const [s, l] of this.rangeMap)
+          if (l.isPointInRange(i.offsetNode, i.offset)) {
+            const m = this.selectionComments.find(
+              (b) => b.commentId === s
+            );
+            if (!m) continue;
+            const u = Y(i.offsetNode);
+            if (!u) continue;
+            e.stopPropagation(), e.preventDefault(), this.actor.send({
+              type: "CLICK",
+              targetId: m.targetId,
+              element: u,
+              selectionCommentId: s
+            });
+            return;
+          }
+      }
+      const n = e.target, a = n.closest(
+        ".review-highlight-hover, .review-highlight-commented, .review-highlight-editing"
+      );
+      if (a && this.contains(a)) {
+        e.stopPropagation(), e.preventDefault();
+        const s = N(n, this.customTargets);
+        s ? this.actor.send({
+          type: "CLICK",
+          targetId: s.targetId,
+          element: s.element
+        }) : this.actor.send({ type: "CLICK" });
+      }
+    }, this.onWrapperClick = (e) => {
+      if (!this.contains(e.target) || !this.isAnnotating()) return;
+      const t = N(e.target, this.customTargets);
+      t ? (e.stopPropagation(), e.preventDefault(), this.actor.send({
+        type: "CLICK",
+        targetId: t.targetId,
+        element: t.element
+      })) : this.actor.send({ type: "CLICK" });
+    }, this.onMouseOver = (e) => {
+      const t = this.manager;
+      if (!t || !this.isAnnotating()) return;
+      const i = this.currentEditingTargetId(), n = N(
+        e.target,
+        this.customTargets
+      );
+      if (n) {
+        t.applyHover(n.element, i);
+        return;
+      }
+      const r = e.target.closest(
+        "[data-review-selectable]"
+      );
+      r && t.applyHover(r, i);
+    }, this.onMouseOut = (e) => {
+      const t = this.manager;
+      if (!t || !this.isAnnotating()) return;
+      const i = this.currentEditingTargetId(), n = /* @__PURE__ */ new Set();
+      for (const s of this.actor.getSnapshot().context.comments)
+        !s.selection && s.content.trim() && n.add(s.targetId);
+      const r = N(
+        e.target,
+        this.customTargets
+      );
+      if (r) {
+        t.clearHover(r.element, i, n);
+        return;
+      }
+      const a = e.target.closest(
+        "[data-review-selectable]"
+      );
+      a && t.clearHover(a, i);
+    };
+  }
+  get shortcut() {
+    return this.getAttribute("shortcut") ?? ge;
+  }
+  get barPosition() {
+    return this.getAttribute("bar-position") ?? "bottom-center";
+  }
+  get defaultMode() {
+    return this.getAttribute("default-mode") === "annotating" ? "annotating" : "idle";
+  }
+  connectedCallback() {
+    me(), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
+    const e = this.buildHighlightCallbacks(), t = Ut();
+    this.actor = kt(t, {
+      input: {
+        shortcut: this.shortcut,
+        initialData: this.initialData,
+        defaultMode: this.defaultMode,
+        highlights: e
+      }
+    }), this.actor.on(
+      "REVIEW_CHANGED",
+      (i) => this.emitResult("llumi-review-change", i.result)
+    ), this.actor.on(
+      "REVIEW_SUBMITTED",
+      (i) => this.emitResult("llumi-review-submit", i.result)
+    ), this.mountChrome(), this.actor.subscribe(() => this.syncFromSnapshot()), this.actor.start(), this.manager = Pt(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();
+  }
+  disconnectedCallback() {
+    var t, i, n, r, a, s;
+    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);
+    const e = H();
+    e && (e.delete(J), e.delete(Q), e.delete(L)), this.icons && (this.icons.positions = []), (t = this.manager) == null || t.destroy(), this.manager = null, (i = this.actor) == null || i.stop(), (n = this.bar) == null || n.remove(), (r = this.commentDialog) == null || r.remove(), (a = this.overallDialog) == null || a.remove(), (s = this.icons) == null || s.remove();
+  }
+  attributeChangedCallback() {
+    this.bar && (this.bar.barPosition = this.barPosition);
+  }
+  emitResult(e, t) {
+    let i = t;
+    t.status === "commented" && (i = {
+      ...t,
+      comments: Jt(t.comments, this)
+    }), this.dispatchEvent(
+      new CustomEvent(e, {
+        detail: i,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  // --- chrome lifecycle ---
+  mountChrome() {
+    this.bar = document.createElement("llumi-review-bar"), this.bar.barPosition = this.barPosition, this.bar.addEventListener(
+      "toggle",
+      () => this.actor.send({ type: "TOGGLE" })
+    ), this.bar.addEventListener("overall-toggle", () => {
+      const e = this.actor.getSnapshot(), t = e.matches({ commenting: "editing" }) && e.context.editingCommentId === null;
+      this.actor.send(
+        t ? { type: "CLOSE" } : { type: "OPEN_OVERALL" }
+      );
+    }), this.bar.addEventListener(
+      "submit",
+      () => this.actor.send({ type: "SUBMIT" })
+    ), document.body.append(this.bar), this.icons = document.createElement(
+      "llumi-selection-comment-icons"
+    ), this.icons.addEventListener(
+      "icon-click",
+      (e) => this.onIconClick(e.detail)
+    ), document.body.append(this.icons);
+  }
+  onIconClick(e) {
+    const t = this.actor.getSnapshot().context.comments.find((n) => n.commentId === e);
+    if (!t) return;
+    const i = this.querySelector(
+      `[${R}="${t.targetId}"]`
+    );
+    i && this.actor.send({
+      type: "CLICK",
+      targetId: t.targetId,
+      element: i,
+      selectionCommentId: e
+    });
+  }
+  // --- snapshot → UI sync (replaces review.component.tsx render) ---
+  syncFromSnapshot() {
+    const e = this.actor.getSnapshot(), { comments: t, overallComment: i, editingCommentId: n, targetElement: r } = e.context;
+    this.selectionComments = t.filter(
+      (g) => g.selection && g.content.trim()
+    );
+    const a = !e.matches({ annotating: "inactive" }), s = e.matches({ commenting: "editing" }), l = n ? t.find((g) => g.commentId === n) : null, m = s && n === null, u = t.filter((g) => g.content.trim()).length, b = i.trim().length > 0;
+    this.bar.mode = a ? l ? "editing" : "commenting" : "idle", this.bar.commentCount = u, this.bar.hasOverallComment = b, this.bar.overallCommentOpen = m, this.icons.style.display = a ? "" : "none", s && l && r ? (this.commentDialog || (this.commentDialog = document.createElement(
+      "llumi-comment-dialog"
+    ), this.commentDialog.addEventListener(
+      "change",
+      (g) => this.actor.send({
+        type: "COMMENT_CHANGE",
+        content: g.detail
+      })
+    ), this.commentDialog.addEventListener(
+      "delete",
+      () => this.actor.send({ type: "DELETE" })
+    ), this.commentDialog.addEventListener(
+      "close",
+      () => this.actor.send({ type: "CLOSE" })
+    ), document.body.append(this.commentDialog)), this.commentDialog.targetElement = r, this.commentDialog.value = l.content) : this.commentDialog && (this.commentDialog.remove(), this.commentDialog = null), m ? (this.overallDialog || (this.overallDialog = document.createElement(
+      "llumi-overall-comment-dialog"
+    ), this.overallDialog.addEventListener(
+      "change",
+      (g) => this.actor.send({
+        type: "COMMENT_CHANGE",
+        content: g.detail
+      })
+    ), this.overallDialog.addEventListener(
+      "close",
+      () => this.actor.send({ type: "CLOSE" })
+    ), 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();
+  }
+  // --- highlight callbacks (port of use-review.ts `highlights`) ---
+  buildHighlightCallbacks() {
+    return {
+      activate: (e) => {
+        const t = this.manager;
+        t && (t.activate(e), t.startObserving({
+          editingTarget: this.actor.getSnapshot().context.targetElement,
+          onTargetDisconnected: () => this.actor.send({ type: "CLOSE" }),
+          onSelectableReconnected: () => this.updateSelectionHighlights(),
+          commentedIds: e
+        }));
+      },
+      deactivate: () => {
+        const e = this.manager;
+        if (!e) return;
+        e.deactivate(), e.stopObserving();
+        const t = H();
+        t && (t.delete(J), t.delete(Q), t.delete(L)), this.rangeMap.clear(), this.icons.positions = [];
+      },
+      reveal: (e) => {
+        var t;
+        return (t = this.manager) == null ? void 0 : t.reveal(e);
+      },
+      unreveal: () => {
+        var e;
+        return (e = this.manager) == null ? void 0 : e.unreveal();
+      },
+      setEditing: (e, t) => {
+        var i;
+        (i = this.manager) == null || i.setEditing(e, t), this.updateSelectionHighlights();
+      },
+      clearEditing: (e, t) => {
+        var i;
+        (i = this.manager) == null || i.clearEditing(e, t), this.updateSelectionHighlights();
+      }
+    };
+  }
+  // --- selection highlight painting (port of updateSelectionHighlights) ---
+  updateSelectionHighlights() {
+    const e = H();
+    if (!e) return;
+    const t = tt(), i = tt(), n = /* @__PURE__ */ new Map(), r = [], a = this.actor.getSnapshot().context;
+    for (const l of this.selectionComments) {
+      if (!l.selection) continue;
+      const m = this.querySelector(
+        `[${R}="${l.targetId}"]`
+      );
+      if (!m) continue;
+      const u = gt(m, l.selection);
+      if (!u) continue;
+      n.set(l.commentId, u), l.commentId === a.editingCommentId ? i.add(u) : t.add(u);
+      const b = u.getClientRects(), g = b[b.length - 1];
+      g && r.push({
+        commentId: l.commentId,
+        top: g.top + window.scrollY,
+        left: g.right + window.scrollX
+      });
+    }
+    const s = a.editingCommentId;
+    if (s && !n.has(s)) {
+      const l = a.comments.find(
+        (m) => m.commentId === s
+      );
+      if (l != null && l.selection) {
+        const m = this.querySelector(
+          `[${R}="${l.targetId}"]`
+        );
+        if (m) {
+          const u = gt(m, l.selection);
+          u && i.add(u);
+        }
+      }
+    }
+    this.rangeMap = n, e.set(
+      J,
+      t
+    ), e.set(Q, i), this.icons.positions = r;
+  }
+  isAnnotating() {
+    return !this.actor.getSnapshot().matches({ annotating: "inactive" });
+  }
+  caretPosition(e, t) {
+    if ("caretPositionFromPoint" in document) {
+      const i = document.caretPositionFromPoint(e, t);
+      if (i) return i;
+    } else if ("caretRangeFromPoint" in document) {
+      const i = document.caretRangeFromPoint(e, t);
+      if (i) return { offsetNode: i.startContainer, offset: i.startOffset };
+    }
+    return null;
+  }
+  currentEditingTargetId() {
+    var t;
+    const e = this.actor.getSnapshot().context;
+    if (e.editingCommentId)
+      return ((t = e.comments.find((i) => i.commentId === e.editingCommentId)) == null ? void 0 : t.targetId) ?? void 0;
+  }
+};
+rt.observedAttributes = ["bar-position", "shortcut", "default-mode"];
+let nt = rt;
+customElements.get("llumi-review") || customElements.define("llumi-review", nt);
+export {
+  z as LlumiCommentDialog,
+  S as LlumiDefaultEditor,
+  O as LlumiOverallCommentDialog,
+  nt as LlumiReview,
+  w as LlumiReviewBar,
+  it as LlumiSelectionCommentIcons
+};