@llumi/design-system 2.1.1 → 2.1.3

package/review.mjs

@@ -1,60 +1,60 @@
-import { fromCallback as rt, setup as xt, emit as st, assign as E, stateIn as yt, enqueueActions as It, createActor as St } from "https://cdn.jsdelivr.net/npm/xstate@5.32.2/+esm";
-import { a as Tt } from "./adopt-global-styles-INmlhDAE.js";
-import { tinykeys as Lt } from "https://cdn.jsdelivr.net/npm/tinykeys@3.1.0/+esm";
-import { html as w, css as F } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/+esm";
-import { property as v, query as U, state as Ot, customElement as k } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js/+esm";
+import { fromCallback as ht, setup as Lt, emit as mt, assign as E, stateIn as At, enqueueActions as Dt, createActor as Rt } from "https://cdn.jsdelivr.net/npm/xstate@5.32.2/+esm";
+import { a as kt } from "./adopt-global-styles-D6lWTS0e.js";
+import { tinykeys as Nt } from "https://cdn.jsdelivr.net/npm/tinykeys@3.1.0/+esm";
+import { html as w, css as W } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/+esm";
+import { property as f, query as j, state as Pt, customElement as N } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/decorators.js/+esm";
 import { classMap as A } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/class-map.js/+esm";
-import { i as M } from "./icons-Cjb2xhwP.js";
-import { L as C } from "./llumi-element-DREcOcPF.js";
-import { autoUpdate as gt, computePosition as ut, offset as pt, flip as ft, shift as vt, size as bt } from "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/+esm";
-import { repeat as At } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/repeat.js/+esm";
-import { styleMap as Dt } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/style-map.js/+esm";
-/*! @llumi/design-system v2.1.1 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.1/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
-function at(o, e) {
-  const t = o.getAttribute("data-review-id");
+import { i as G } from "./icons-1XY8iOrm.js";
+import { L as C } from "./llumi-element-B5OMT-K9.js";
+import { autoUpdate as bt, computePosition as Ct, offset as Et, flip as wt, shift as xt, size as yt } from "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.6/+esm";
+import { repeat as _t } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/repeat.js/+esm";
+import { styleMap as Mt } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/style-map.js/+esm";
+/*! @llumi/design-system v2.1.3 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.3/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+function ut(i, e) {
+  const t = i.getAttribute("data-review-id");
   if (t) return t;
   for (const n of e ?? [])
-    if (o.matches(n.selector)) {
-      const i = n.toId(o);
-      if (i) return i;
+    if (i.matches(n.selector)) {
+      const o = n.toId(i);
+      if (o) return o;
     }
   return null;
 }
-function _(o, e) {
-  const t = o.closest("[data-review-id]");
+function H(i, e) {
+  const t = i.closest("[data-review-id]");
   if (t) {
     const n = t.getAttribute("data-review-id");
     if (n) return { element: t, targetId: n };
   }
   for (const n of e ?? []) {
-    const i = o.closest(n.selector);
-    if (i) {
-      const r = n.toId(i);
-      if (r) return { element: i, targetId: r };
+    const o = i.closest(n.selector);
+    if (o) {
+      const r = n.toId(o);
+      if (r) return { element: o, targetId: r };
     }
   }
   return null;
 }
-function D(o, e) {
+function D(i, e) {
   const t = /* @__PURE__ */ new Set(), n = [];
-  for (const i of Array.from(
-    o.querySelectorAll("[data-review-id]")
+  for (const o of Array.from(
+    i.querySelectorAll("[data-review-id]")
   )) {
-    const r = i.getAttribute("data-review-id");
+    const r = o.getAttribute("data-review-id");
     if (!r) continue;
-    const s = i.hasAttribute("data-review-selectable");
+    const s = o.hasAttribute("data-review-selectable");
     n.push({
-      element: i,
+      element: o,
       targetId: r,
       kind: s ? "both" : "element"
-    }), t.add(i);
+    }), t.add(o);
   }
-  for (const i of e ?? [])
+  for (const o of e ?? [])
     for (const r of Array.from(
-      o.querySelectorAll(i.selector)
+      i.querySelectorAll(o.selector)
     )) {
       if (t.has(r)) continue;
-      const s = i.toId(r);
+      const s = o.toId(r);
       if (!s) continue;
       const a = r.hasAttribute("data-review-selectable");
       n.push({
@@ -63,125 +63,125 @@ function D(o, e) {
         kind: a ? "both" : "element"
       }), t.add(r);
     }
-  for (const i of Array.from(
-    o.querySelectorAll("[data-review-selectable]")
+  for (const o of Array.from(
+    i.querySelectorAll("[data-review-selectable]")
   )) {
-    if (t.has(i)) continue;
-    const r = i.getAttribute("data-review-selectable");
-    r && (n.push({ element: i, targetId: r, kind: "selectable" }), t.add(i));
+    if (t.has(o)) continue;
+    const r = o.getAttribute("data-review-selectable");
+    r && (n.push({ element: o, targetId: r, kind: "selectable" }), t.add(o));
   }
   return n;
 }
-const J = "review-highlight-hover", y = "review-highlight-commented", $ = "review-highlight-editing", H = "review-highlight-uncommented", j = "review-target", lt = "review-active";
-function q(o) {
-  o.classList.remove(
-    J,
+const tt = "review-highlight-hover", y = "review-highlight-commented", z = "review-highlight-editing", F = "review-highlight-uncommented", V = "review-target", gt = "review-active";
+function Y(i) {
+  i.classList.remove(
+    tt,
     y,
-    $,
-    H
+    z,
+    F
   );
 }
-function kt(o, e) {
-  let t = null, n = null, i = null;
+function $t(i, e) {
+  let t = null, n = null, o = null;
   function r(c) {
-    o.classList.add(lt);
-    const m = D(o, e);
-    for (const { element: f, targetId: d, kind: O } of m)
-      (O === "element" || O === "both") && (f.hasAttribute("data-review-id") || f.classList.add(j), c.has(d) && f.classList.add(y));
+    i.classList.add(gt);
+    const u = D(i, e);
+    for (const { element: p, targetId: d, kind: L } of u)
+      (L === "element" || L === "both") && (p.hasAttribute("data-review-id") || p.classList.add(V), c.has(d) && p.classList.add(y));
   }
   function s() {
-    o.classList.remove(lt), t && (clearTimeout(t), t = null);
-    const c = D(o, e);
-    for (const { element: m } of c)
-      q(m), m.classList.remove(j);
+    i.classList.remove(gt), t && (clearTimeout(t), t = null);
+    const c = D(i, e);
+    for (const { element: u } of c)
+      Y(u), u.classList.remove(V);
   }
   function a(c) {
-    const m = D(o, e), f = [];
-    for (const { element: d } of m)
-      !d.classList.contains(y) && !d.classList.contains($) && (d.classList.add(H), f.push(d));
+    const u = D(i, e), p = [];
+    for (const { element: d } of u)
+      !d.classList.contains(y) && !d.classList.contains(z) && (d.classList.add(F), p.push(d));
     c && (t && clearTimeout(t), t = setTimeout(() => {
       t = null;
-      for (const d of f)
-        d.classList.contains($) || d.classList.remove(H);
+      for (const d of p)
+        d.classList.contains(z) || d.classList.remove(F);
     }, 500));
   }
   function l() {
     t && (clearTimeout(t), t = null);
-    const c = D(o, e);
-    for (const { element: m } of c)
-      m.classList.remove(H);
+    const c = D(i, e);
+    for (const { element: u } of c)
+      u.classList.remove(F);
   }
-  function h(c, m) {
-    m || (q(c), c.classList.add($));
+  function v(c, u) {
+    u || (Y(c), c.classList.add(z));
   }
-  function u(c, m) {
-    q(c), m && c.classList.add(y);
+  function h(c, u) {
+    Y(c), u && c.classList.add(y);
   }
-  function p(c, m) {
-    (at(c, e) ?? c.getAttribute("data-review-selectable")) !== m && c.classList.add(J);
+  function g(c, u) {
+    (ut(c, e) ?? c.getAttribute("data-review-selectable")) !== u && c.classList.add(tt);
   }
-  function g(c, m, f) {
-    const d = at(c, e) ?? c.getAttribute("data-review-selectable");
-    d !== m && (c.classList.remove(J), d && (f != null && f.has(d)) && c.classList.add(y));
+  function m(c, u, p) {
+    const d = ut(c, e) ?? c.getAttribute("data-review-selectable");
+    d !== u && (c.classList.remove(tt), d && (p != null && p.has(d)) && c.classList.add(y));
   }
-  function Et(c) {
-    W(), i = c.editingTarget ?? null, n = new MutationObserver((m) => {
-      for (const f of m) {
-        for (const d of Array.from(f.removedNodes)) {
+  function M(c) {
+    X(), o = c.editingTarget ?? null, n = new MutationObserver((u) => {
+      for (const p of u) {
+        for (const d of Array.from(p.removedNodes)) {
           if (!(d instanceof HTMLElement)) continue;
-          i && (d === i || d.contains(i)) && (i = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
+          o && (d === o || d.contains(o)) && (o = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
         }
-        for (const d of Array.from(f.addedNodes)) {
+        for (const d of Array.from(p.addedNodes)) {
           if (!(d instanceof HTMLElement)) continue;
-          const O = [
+          const L = [
             ...d.matches("[data-review-id]") ? [d] : [],
             ...Array.from(
               d.querySelectorAll("[data-review-id]")
             )
           ];
-          for (const T of O) {
-            const R = T.getAttribute("data-review-id");
-            R && c.commentedIds.has(R) && T.classList.add(y);
+          for (const T of L) {
+            const $ = T.getAttribute("data-review-id");
+            $ && c.commentedIds.has($) && T.classList.add(y);
           }
           for (const T of e ?? []) {
-            const R = [
+            const $ = [
               ...d.matches(T.selector) ? [d] : [],
               ...Array.from(d.querySelectorAll(T.selector))
             ];
-            for (const X of R) {
-              const ot = T.toId(X);
-              X.classList.add(j), ot && c.commentedIds.has(ot) && X.classList.add(y);
+            for (const B of $) {
+              const dt = T.toId(B);
+              B.classList.add(V), dt && c.commentedIds.has(dt) && B.classList.add(y);
             }
           }
           (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
         }
       }
-    }), n.observe(o, { childList: !0, subtree: !0 });
+    }), n.observe(i, { childList: !0, subtree: !0 });
   }
-  function W() {
-    n && (n.disconnect(), n = null), i = null;
+  function X() {
+    n && (n.disconnect(), n = null), o = null;
   }
-  function wt() {
-    s(), W();
+  function Ot() {
+    s(), X();
   }
   return {
     activate: r,
     deactivate: s,
     reveal: a,
     unreveal: l,
-    setEditing: h,
-    clearEditing: u,
-    applyHover: p,
-    clearHover: g,
-    startObserving: Et,
-    stopObserving: W,
-    destroy: wt
+    setEditing: v,
+    clearEditing: h,
+    applyHover: g,
+    clearHover: m,
+    startObserving: M,
+    stopObserving: X,
+    destroy: Ot
   };
 }
-const Nt = `: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 Pt(o, e) {
-  const t = o.find(
-    (i) => i.targetId === e && !i.selection
+const Ht = `: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 Gt(i, e) {
+  const t = i.find(
+    (o) => o.targetId === e && !o.selection
   );
   return t ? { comment: t, isNew: !1 } : { comment: {
     commentId: crypto.randomUUID(),
@@ -190,14 +190,14 @@ function Pt(o, e) {
     createdAt: (/* @__PURE__ */ new Date()).toISOString()
   }, isNew: !0 };
 }
-function Rt(o) {
-  let e = o.comments;
-  if (o.editingCommentId !== null) {
+function zt(i) {
+  let e = i.comments;
+  if (i.editingCommentId !== null) {
     const t = e.find(
-      (n) => n.commentId === o.editingCommentId
+      (n) => n.commentId === i.editingCommentId
     );
     t && t.content === "" && (e = e.filter(
-      (n) => n.commentId !== o.editingCommentId
+      (n) => n.commentId !== i.editingCommentId
     ));
   }
   return {
@@ -207,28 +207,28 @@ function Rt(o) {
     selectionRange: null
   };
 }
-function B(o) {
-  const e = o.comments.filter((i) => i.content.trim()), t = e.length > 0, n = o.overallComment.trim().length > 0;
+function J(i) {
+  const e = i.comments.filter((o) => o.content.trim()), t = e.length > 0, n = i.overallComment.trim().length > 0;
   return !t && !n ? { status: "approved" } : {
     status: "commented",
     comments: e,
-    overallComment: n ? o.overallComment.trim() : void 0
+    overallComment: n ? i.overallComment.trim() : void 0
   };
 }
-function _t(o) {
+function Ft(i) {
   const e = /* @__PURE__ */ new Set();
-  for (const t of o.comments)
+  for (const t of i.comments)
     !t.selection && t.content.trim() && e.add(t.targetId);
   return e;
 }
-function Mt() {
-  const o = rt(
+function Ut() {
+  const i = ht(
     ({ sendBack: t, input: n }) => {
-      const i = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
+      const o = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
         l.key === "Alt" && (l.preventDefault(), t({ type: "HOLD_ANNOTATE" }));
       }, s = (l) => {
         l.key === "Alt" && t({ type: "RELEASE_ANNOTATE" });
-      }, a = Lt(window, {
+      }, a = Nt(window, {
         [n.shortcut]: (l) => {
           l.preventDefault(), t({ type: "TOGGLE" });
         },
@@ -242,12 +242,12 @@ function Mt() {
           l.preventDefault(), t({ type: "CLOSE" });
         }
       });
-      return window.addEventListener("keydown", r), window.addEventListener("keyup", s), window.addEventListener("blur", i), () => {
-        a(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", s), window.removeEventListener("blur", i);
+      return window.addEventListener("keydown", r), window.addEventListener("keyup", s), window.addEventListener("blur", o), () => {
+        a(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", s), window.removeEventListener("blur", o);
       };
     }
-  ), e = rt(({ sendBack: t, input: n }) => {
-    const i = new MutationObserver((r) => {
+  ), e = ht(({ sendBack: t, input: n }) => {
+    const o = new MutationObserver((r) => {
       for (const s of r)
         for (const a of Array.from(s.removedNodes))
           if (a instanceof HTMLElement && (a === n.targetElement || a.contains(n.targetElement))) {
@@ -255,9 +255,9 @@ function Mt() {
             return;
           }
     });
-    return i.observe(n.wrapperElement, { childList: !0, subtree: !0 }), () => i.disconnect();
+    return o.observe(n.wrapperElement, { childList: !0, subtree: !0 }), () => o.disconnect();
   });
-  return xt({
+  return Lt({
     types: {
       context: {},
       events: {},
@@ -265,11 +265,11 @@ function Mt() {
       emitted: {}
     },
     actors: {
-      keyboardActor: o,
+      keyboardActor: i,
       mutationObserverActor: e
     },
     guards: {
-      isCommentingEditing: yt({ commenting: "editing" }),
+      isCommentingEditing: At({ 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,
@@ -278,10 +278,10 @@ function Mt() {
         if (n.selectionCommentId)
           return t.editingCommentId === n.selectionCommentId;
         if (n.targetId) {
-          const i = t.comments.find(
+          const o = t.comments.find(
             (r) => r.commentId === t.editingCommentId
           );
-          return !!i && i.targetId === n.targetId && !i.selection;
+          return !!o && o.targetId === n.targetId && !o.selection;
         }
         return !1;
       }
@@ -292,13 +292,13 @@ function Mt() {
     actions: {
       openElementComment: E(({ context: t, event: n }) => {
         if (n.type !== "CLICK" || !n.targetId) return {};
-        const { comment: i, isNew: r } = Pt(
+        const { comment: o, isNew: r } = Gt(
           t.comments,
           n.targetId
         );
         return {
-          comments: r ? [...t.comments, i] : t.comments,
-          editingCommentId: i.commentId,
+          comments: r ? [...t.comments, o] : t.comments,
+          editingCommentId: o.commentId,
           targetElement: n.element ?? null,
           selectionRange: null
         };
@@ -310,7 +310,7 @@ function Mt() {
       }),
       createSelectionComment: E(({ context: t, event: n }) => {
         if (n.type !== "SELECT_TEXT") return {};
-        const i = {
+        const o = {
           commentId: crypto.randomUUID(),
           targetId: n.targetId,
           content: "",
@@ -318,15 +318,15 @@ function Mt() {
           selection: n.selectionRange
         };
         return {
-          comments: [...t.comments, i],
-          editingCommentId: i.commentId,
+          comments: [...t.comments, o],
+          editingCommentId: o.commentId,
           targetElement: n.targetElement,
           selectionRange: n.selectionRange
         };
       }),
       updateContent: E(({ context: t, event: n }) => n.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: n.content } : {
         comments: t.comments.map(
-          (i) => i.commentId === t.editingCommentId ? { ...i, content: n.content } : i
+          (o) => o.commentId === t.editingCommentId ? { ...o, content: n.content } : o
         )
       }),
       deleteComment: E(({ context: t }) => ({
@@ -337,17 +337,17 @@ function Mt() {
         targetElement: null,
         selectionRange: null
       })),
-      cleanup: E(({ context: t }) => Rt(t)),
-      emitChanged: st(({ context: t }) => ({
+      cleanup: E(({ context: t }) => zt(t)),
+      emitChanged: mt(({ context: t }) => ({
         type: "REVIEW_CHANGED",
-        result: B(t)
+        result: J(t)
       })),
       persistSave: ({ context: t }) => {
-        t.persistence.save(B(t));
+        t.persistence.save(J(t));
       },
-      emitSubmitted: st(({ context: t }) => ({
+      emitSubmitted: mt(({ context: t }) => ({
         type: "REVIEW_SUBMITTED",
-        result: B(t)
+        result: J(t)
       })),
       // Highlight lifecycle actions — call manager methods directly via
       // callbacks passed through input. The machine owns WHEN highlights
@@ -355,7 +355,7 @@ function Mt() {
       // Actions run synchronously during transitions — no timing gap.
       // Never add useEffects that react to derived machine state.
       highlightsActivate: ({ context: t }) => {
-        t.highlights.activate(_t(t));
+        t.highlights.activate(Ft(t));
       },
       highlightsDeactivate: ({ context: t }) => {
         t.highlights.deactivate();
@@ -370,17 +370,17 @@ function Mt() {
         t.highlights.unreveal();
       },
       editingTargetSet: ({ context: t }) => {
-        var i;
+        var o;
         if (!t.targetElement) return;
-        const n = !!((i = t.comments.find(
+        const n = !!((o = t.comments.find(
           (r) => r.commentId === t.editingCommentId
-        )) != null && i.selection);
+        )) != null && o.selection);
         t.highlights.setEditing(t.targetElement, n);
       },
       editingTargetCleared: ({ context: t }) => {
         if (!t.targetElement) return;
         const n = t.comments.find(
-          (i) => i.commentId === t.editingCommentId
+          (o) => o.commentId === t.editingCommentId
         );
         t.highlights.clearEditing(
           t.targetElement,
@@ -392,9 +392,9 @@ function Mt() {
     id: "review",
     type: "parallel",
     context: ({ input: t }) => {
-      const n = t.persistence.load() ?? t.initialData, i = (n == null ? void 0 : n.status) === "commented" ? n.comments ?? [] : [], r = (n == null ? void 0 : n.status) === "commented" ? n.overallComment ?? "" : "";
+      const n = t.persistence.load() ?? t.initialData, o = (n == null ? void 0 : n.status) === "commented" ? n.comments ?? [] : [], r = (n == null ? void 0 : n.status) === "commented" ? n.overallComment ?? "" : "";
       return {
-        comments: i,
+        comments: o,
         overallComment: r,
         editingCommentId: null,
         targetElement: null,
@@ -441,7 +441,7 @@ function Mt() {
             on: {
               TOGGLE: {
                 target: "inactive",
-                actions: It(({ enqueue: t, check: n }) => {
+                actions: Dt(({ enqueue: t, check: n }) => {
                   n("isCommentingEditing") && t.raise({ type: "CLOSE" });
                 })
               }
@@ -636,7 +636,7 @@ function Mt() {
     }
   });
 }
-const ct = {
+const pt = {
   load: () => {
   },
   save: () => {
@@ -644,180 +644,243 @@ const ct = {
   clear: () => {
   }
 };
-function V() {
+function Q() {
   try {
     return typeof localStorage > "u" ? void 0 : localStorage;
   } catch {
     return;
   }
 }
-function $t(o) {
-  if (typeof o != "object" || o === null) return !1;
-  const e = o.status;
+function Kt(i) {
+  if (typeof i != "object" || i === null) return !1;
+  const e = i.status;
   return e === "approved" || e === "commented";
 }
-function Ht(o) {
+function Wt(i) {
   return {
     load() {
-      const e = V();
+      const e = Q();
       if (e)
         try {
-          const t = e.getItem(o);
+          const t = e.getItem(i);
           if (t === null) return;
           const n = JSON.parse(t);
-          return $t(n) ? n : void 0;
+          return Kt(n) ? n : void 0;
         } catch {
           return;
         }
     },
     save(e) {
-      const t = V();
+      const t = Q();
       if (t)
         try {
           if (e.status === "approved") {
-            t.removeItem(o);
+            t.removeItem(i);
             return;
           }
-          t.setItem(o, JSON.stringify(e));
+          t.setItem(i, JSON.stringify(e));
         } catch {
         }
     },
     clear() {
-      const e = V();
+      const e = Q();
       if (e)
         try {
-          e.removeItem(o);
+          e.removeItem(i);
         } catch {
         }
     }
   };
 }
-const Gt = 3;
-function zt(o) {
+const jt = 3;
+function qt(i) {
+  const e = [], t = (n) => {
+    n instanceof Element && n.shadowRoot && (e.push(n.shadowRoot), n.shadowRoot.childNodes.forEach(t)), n.childNodes.forEach(t);
+  };
+  return t(i), e;
+}
+function It(i) {
+  const e = document.createRange();
+  return e.setStart(i.startContainer, i.startOffset), e.setEnd(i.endContainer, i.endOffset), e;
+}
+function lt(i, e) {
+  if (i.isCollapsed || i.rangeCount === 0) return null;
+  const t = qt(e), n = i.getComposedRanges;
+  if (n && t.length > 0) {
+    const r = n.call(i, { shadowRoots: t })[0];
+    if (r) return It(r);
+  }
+  return i.getRangeAt(0);
+}
+function Xt(i) {
   const e = window.getSelection();
   if (!e || e.isCollapsed || e.rangeCount === 0)
     return null;
-  const t = e.getRangeAt(0), n = t.toString();
-  if (n.length < Gt) return null;
-  const i = Kt(
-    o,
+  const t = lt(e, i);
+  if (!t) return null;
+  const n = t.toString();
+  if (n.length < jt) return null;
+  const o = Yt(
+    i,
     t.startContainer,
     t.startOffset
-  ), r = i + n.length;
-  if (i < 0) return null;
-  const s = Wt(
-    o.textContent ?? "",
+  ), r = o + n.length;
+  if (o < 0) return null;
+  const s = Jt(
+    St(i),
     n,
-    i
+    o
   );
-  return { startOffset: i, endOffset: r, selectedText: n, matchIndex: s };
+  return { startOffset: o, endOffset: r, selectedText: n, matchIndex: s };
 }
-function Q(o, e) {
-  const t = o.textContent ?? "";
+function et(i, e) {
+  const t = St(i);
   if (t.slice(
     e.startOffset,
     e.endOffset
   ) === e.selectedText)
-    return dt(
-      o,
+    return ft(
+      i,
       e.startOffset,
       e.endOffset
     );
-  const i = Xt(
+  const o = Qt(
     t,
     e.selectedText,
     e.matchIndex
   );
-  return i < 0 ? null : dt(
-    o,
+  return o < 0 ? null : ft(
     i,
-    i + e.selectedText.length
+    o,
+    o + e.selectedText.length
   );
 }
-function Ft(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 Bt(i, e) {
+  if (i.isCollapsed || i.rangeCount === 0) return !1;
+  const t = lt(i, e);
+  return t ? U(e, t.startContainer) && U(e, t.endContainer) : !1;
 }
-function Y(o) {
-  const e = o instanceof HTMLElement ? o : o.parentElement;
-  return (e == null ? void 0 : e.closest("[data-review-selectable]")) ?? null;
-}
-function Ut(o, e) {
-  var s;
-  if (o.isCollapsed || o.rangeCount === 0) return null;
-  const t = o.getRangeAt(0), n = t.cloneRange(), i = e.contains(t.startContainer), r = e.contains(t.endContainer);
-  if (i && r) return n;
-  if (i && !r) {
-    const a = jt(e);
-    return a && n.setEnd(a, ((s = a.textContent) == null ? void 0 : s.length) ?? 0), n;
+function Z(i) {
+  let e = i;
+  for (; e; ) {
+    const t = e instanceof HTMLElement ? e : e.parentElement, n = t == null ? void 0 : t.closest("[data-review-selectable]");
+    if (n) return n;
+    const o = e.getRootNode();
+    if (o instanceof ShadowRoot)
+      e = o.host;
+    else
+      return null;
   }
   return null;
 }
-function Kt(o, e, t) {
+function Vt(i, e) {
   var r;
-  const n = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
-  let i = 0;
-  for (; n.nextNode(); ) {
-    if (n.currentNode === e) return i + t;
-    i += ((r = n.currentNode.textContent) == null ? void 0 : r.length) ?? 0;
+  if (i.isCollapsed || i.rangeCount === 0) return null;
+  const t = lt(i, e);
+  if (!t) return null;
+  const n = U(e, t.startContainer), o = U(e, t.endContainer);
+  if (n && o)
+    return It(t);
+  if (n && !o) {
+    const s = Zt(e);
+    if (s) {
+      const a = document.createRange();
+      return a.setStart(t.startContainer, t.startOffset), a.setEnd(s, ((r = s.textContent) == null ? void 0 : r.length) ?? 0), a;
+    }
+  }
+  return null;
+}
+function U(i, e) {
+  if (!e) return !1;
+  if (i === e) return !0;
+  let t = e;
+  for (; t; ) {
+    if (i === t) return !0;
+    const n = t.getRootNode();
+    if (n instanceof ShadowRoot) {
+      if (i === n.host) return !0;
+      t = n.host;
+    } else
+      return !!i.contains(t);
+  }
+  return !1;
+}
+function St(i) {
+  let e = "";
+  const t = (n) => {
+    n instanceof Element && n.shadowRoot && n.shadowRoot.childNodes.forEach(t), n.childNodes.forEach((o) => {
+      o.nodeType === Node.TEXT_NODE ? e += o.textContent ?? "" : t(o);
+    });
+  };
+  return t(i), e;
+}
+function Yt(i, e, t) {
+  var o;
+  let n = 0;
+  for (const r of k(i)) {
+    if (r === e) return n + t;
+    n += ((o = r.textContent) == null ? void 0 : o.length) ?? 0;
   }
   return -1;
 }
-function dt(o, e, t) {
-  var a;
-  const n = document.createTreeWalker(o, NodeFilter.SHOW_TEXT), i = document.createRange();
-  let r = 0, s = !1;
-  for (; n.nextNode(); ) {
-    const l = ((a = n.currentNode.textContent) == null ? void 0 : a.length) ?? 0;
-    if (!s && r + l > e && (i.setStart(n.currentNode, e - r), s = !0), s && r + l >= t)
-      return i.setEnd(n.currentNode, t - r), i;
-    r += l;
+function ft(i, e, t) {
+  var s;
+  const n = document.createRange();
+  let o = 0, r = !1;
+  for (const a of k(i)) {
+    const l = ((s = a.textContent) == null ? void 0 : s.length) ?? 0;
+    if (!r && o + l > e && (n.setStart(a, e - o), r = !0), r && o + l >= t)
+      return n.setEnd(a, t - o), n;
+    o += l;
   }
   return null;
 }
-function Wt(o, e, t) {
-  let n = 0, i = 0;
+function* k(i) {
+  i instanceof Element && i.shadowRoot && (yield* k(i.shadowRoot));
+  for (const e of Array.from(i.childNodes))
+    e.nodeType === Node.TEXT_NODE ? yield e : e instanceof Element && (yield* k(e));
+}
+function Jt(i, e, t) {
+  let n = 0, o = 0;
   for (; ; ) {
-    const r = o.indexOf(e, i);
+    const r = i.indexOf(e, o);
     if (r < 0 || r === t) return n;
-    i = r + 1, n++;
+    o = r + 1, n++;
   }
 }
-function Xt(o, e, t) {
-  let n = 0, i = 0;
+function Qt(i, e, t) {
+  let n = 0, o = 0;
   for (; ; ) {
-    const r = o.indexOf(e, i);
+    const r = i.indexOf(e, o);
     if (r < 0) return -1;
     if (n === t) return r;
-    i = r + 1, n++;
+    o = r + 1, n++;
   }
 }
-function jt(o) {
-  const e = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
-  let t = null;
-  for (; e.nextNode(); )
-    t = e.currentNode;
-  return t;
+function Zt(i) {
+  let e = null;
+  for (const t of k(i))
+    e = t;
+  return e;
 }
-function qt(o, e, t) {
-  const n = /* @__PURE__ */ new Map(), i = D(e, t).sort((r, s) => {
+function te(i, e, t) {
+  const n = /* @__PURE__ */ new Map(), o = D(e, t).sort((r, s) => {
     const a = r.element.compareDocumentPosition(s.element);
     return a & Node.DOCUMENT_POSITION_PRECEDING ? 1 : a & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 0;
   });
-  for (const [r, s] of i.entries())
+  for (const [r, s] of o.entries())
     n.set(s.targetId, r);
-  return [...o].sort((r, s) => {
+  return [...i].sort((r, s) => {
     const a = n.get(r.targetId) ?? Number.MAX_SAFE_INTEGER, l = n.get(s.targetId) ?? Number.MAX_SAFE_INTEGER;
     return a - l;
   });
 }
-var Bt = Object.defineProperty, Vt = Object.getOwnPropertyDescriptor, x = (o, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? Vt(e, t) : e, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(e, t, i) : s(i)) || i);
-  return n && i && Bt(e, t, i), i;
+var ee = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, x = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? ne(e, t) : e, r = i.length - 1, s; r >= 0; r--)
+    (s = i[r]) && (o = (n ? s(e, t, o) : s(o)) || o);
+  return n && o && ee(e, t, o), o;
 };
-const Yt = {
+const ie = {
   "top-left": { top: "16px", left: "16px" },
   "top-center": { top: "16px", left: "50%", translateX: "-50%" },
   "top-right": { top: "16px", right: "16px" },
@@ -827,19 +890,19 @@ const Yt = {
 };
 let b = class extends C {
   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) => {
+    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 = (i) => {
       const e = this.bar.getBoundingClientRect();
       this.dragStart = {
-        px: o.clientX,
-        py: o.clientY,
+        px: i.clientX,
+        py: i.clientY,
         ox: e.left,
         oy: e.top
       }, window.addEventListener("pointermove", this.onDragMove), window.addEventListener("pointerup", this.onDragEnd);
-    }, this.onDragMove = (o) => {
+    }, this.onDragMove = (i) => {
       if (!this.dragStart) return;
-      const e = this.dragStart.ox + (o.clientX - this.dragStart.px), t = this.dragStart.oy + (o.clientY - this.dragStart.py), n = 16, i = window.innerWidth - this.bar.offsetWidth - n, r = window.innerHeight - this.bar.offsetHeight - n;
+      const e = this.dragStart.ox + (i.clientX - this.dragStart.px), t = this.dragStart.oy + (i.clientY - this.dragStart.py), n = 16, o = window.innerWidth - this.bar.offsetWidth - n, r = window.innerHeight - this.bar.offsetHeight - n;
       this.dragOffset = {
-        x: Math.max(n, Math.min(e, i)),
+        x: Math.max(n, Math.min(e, o)),
         y: Math.max(n, Math.min(t, r))
       };
     }, this.onDragEnd = () => {
@@ -850,41 +913,41 @@ let b = class extends C {
     return this.bar ?? null;
   }
   render() {
-    const o = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, n = Yt[this.barPosition], i = this.dragOffset ? `position:fixed;left:${this.dragOffset.x}px;top:${this.dragOffset.y}px;z-index:var(--review-z-index,9998);` : `position:fixed;${n.top ? `top:${n.top};` : ""}${n.bottom ? `bottom:${n.bottom};` : ""}${n.left ? `left:${n.left};` : ""}${n.right ? `right:${n.right};` : ""}${n.translateX ? `transform:translateX(${n.translateX});` : ""}z-index:var(--review-z-index,9998);`;
+    const i = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, n = ie[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;${n.top ? `top:${n.top};` : ""}${n.bottom ? `bottom:${n.bottom};` : ""}${n.left ? `left:${n.left};` : ""}${n.right ? `right:${n.right};` : ""}${n.translateX ? `transform:translateX(${n.translateX});` : ""}z-index:var(--review-z-index,9998);`;
     return w`<div
       data-bar
-      class=${A({ bar: !0, "bar--active": o })}
-      style=${i}
+      class=${A({ bar: !0, "bar--active": i })}
+      style=${o}
     >
       <div
         class="grip"
         @pointerdown=${this.onDragStart}
       >
-        <span class="icon icon-12">${M.gripVertical}</span>
+        <span class="icon icon-12">${G.gripVertical}</span>
       </div>
 
       <label class="label">
         <span class=${A({
       "label-text": !0,
-      "label-text--active": o,
-      "label-text--idle": !o
+      "label-text--active": i,
+      "label-text--idle": !i
     })}>Annotate</span>
         <button
           type="button"
           role="switch"
-          aria-checked=${o ? "true" : "false"}
+          aria-checked=${i ? "true" : "false"}
           data-toggle
           @click=${this.onToggle}
           class=${A({
       toggle: !0,
-      "toggle--active": o,
-      "toggle--idle": !o
+      "toggle--active": i,
+      "toggle--idle": !i
     })}
         >
           <span class=${A({
       knob: !0,
-      "knob--active": o,
-      "knob--idle": !o
+      "knob--active": i,
+      "knob--idle": !i
     })}></span>
         </button>
       </label>
@@ -903,7 +966,7 @@ let b = class extends C {
     })}
       >
         Comment
-        <span class="icon icon-14">${M.messageSquare}</span>
+        <span class="icon icon-14">${G.messageSquare}</span>
       </button>
 
       <div class="divider"></div>
@@ -916,7 +979,7 @@ let b = class extends C {
       >
         ${t ? "Submit" : "Approve"}
         <span class="badge">
-          ${t ? e : w`<span class="icon icon-12">${M.check}</span>`}
+          ${t ? e : w`<span class="icon icon-12">${G.check}</span>`}
         </span>
       </button>
     </div>`;
@@ -942,7 +1005,7 @@ let b = class extends C {
 };
 b.styles = [
   C.styles,
-  F`
+  W`
 			:host {
 				color-scheme: light;
 				color: #18181b;
@@ -1132,33 +1195,33 @@ b.styles = [
 		`
 ];
 x([
-  v()
+  f()
 ], b.prototype, "mode", 2);
 x([
-  v({ type: Number })
+  f({ type: Number })
 ], b.prototype, "commentCount", 2);
 x([
-  v({ type: Boolean })
+  f({ type: Boolean })
 ], b.prototype, "hasOverallComment", 2);
 x([
-  v({ type: Boolean })
+  f({ type: Boolean })
 ], b.prototype, "overallCommentOpen", 2);
 x([
-  v()
+  f()
 ], b.prototype, "barPosition", 2);
 x([
-  U("[data-bar]")
+  j("[data-bar]")
 ], b.prototype, "bar", 2);
 x([
-  Ot()
+  Pt()
 ], b.prototype, "dragOffset", 2);
 b = x([
-  k("llumi-review-bar")
+  N("llumi-review-bar")
 ], b);
-var Jt = Object.defineProperty, Qt = Object.getOwnPropertyDescriptor, N = (o, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? Qt(e, t) : e, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(e, t, i) : s(i)) || i);
-  return n && i && Jt(e, t, i), i;
+var oe = Object.defineProperty, re = Object.getOwnPropertyDescriptor, P = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? re(e, t) : e, r = i.length - 1, s; r >= 0; r--)
+    (s = i[r]) && (o = (n ? s(e, t, o) : s(o)) || o);
+  return n && o && oe(e, t, o), o;
 };
 let I = class extends C {
   constructor() {
@@ -1166,8 +1229,8 @@ let I = class extends C {
   }
   /** Focus the inner textarea (the element itself isn't focusable). */
   focus() {
-    var o;
-    (o = this.textarea) == null || o.focus();
+    var i;
+    (i = this.textarea) == null || i.focus();
   }
   render() {
     return w`<textarea
@@ -1177,8 +1240,8 @@ let I = class extends C {
       @input=${this.onInput}
     ></textarea>`;
   }
-  onInput(o) {
-    const e = o.target.value;
+  onInput(i) {
+    const e = i.target.value;
     this.autoGrow(), this.dispatchEvent(
       new CustomEvent("change", {
         detail: e,
@@ -1188,8 +1251,8 @@ let I = class extends C {
     );
   }
   autoGrow() {
-    const o = this.textarea;
-    o && (o.style.height = "auto", o.style.height = `${o.scrollHeight}px`);
+    const i = this.textarea;
+    i && (i.style.height = "auto", i.style.height = `${i.scrollHeight}px`);
   }
   firstUpdated() {
     this.autoFocus && this.textarea.focus(), this.autoGrow();
@@ -1200,7 +1263,7 @@ let I = class extends C {
 };
 I.styles = [
   C.styles,
-  F`
+  W`
 			textarea {
 				width: 100%;
 				resize: none;
@@ -1223,45 +1286,45 @@ I.styles = [
 			}
 		`
 ];
-N([
-  v()
+P([
+  f()
 ], I.prototype, "value", 2);
-N([
-  v({ type: Boolean })
+P([
+  f({ type: Boolean })
 ], I.prototype, "autoFocus", 2);
-N([
-  v()
+P([
+  f()
 ], I.prototype, "placeholder", 2);
-N([
-  U("textarea")
+P([
+  j("textarea")
 ], I.prototype, "textarea", 2);
-I = N([
-  k("llumi-default-editor")
+I = P([
+  N("llumi-default-editor")
 ], I);
-var Zt = Object.defineProperty, te = Object.getOwnPropertyDescriptor, P = (o, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? te(e, t) : e, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(e, t, i) : s(i)) || i);
-  return n && i && Zt(e, t, i), i;
+var se = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, _ = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? ae(e, t) : e, r = i.length - 1, s; r >= 0; r--)
+    (s = i[r]) && (o = (n ? s(e, t, o) : s(o)) || o);
+  return n && o && se(e, t, o), o;
 };
 let S = class extends C {
   constructor() {
     super(...arguments), this.targetElement = null, this.anchor = null, this.value = "";
   }
   render() {
-    const o = this.value.trim().length > 0;
+    const i = this.value.trim().length > 0;
     return w`<div
       data-floating
       class="floating"
       style="position:absolute;top:0;left:0;"
     >
       <div class="panel">
-        ${o ? w`<button
+        ${i ? w`<button
               type="button"
               data-delete
               class="delete-btn"
               @click=${this.onDelete}
             >
-              <span class="icon icon-14">${M.trash}</span>
+              <span class="icon icon-14">${G.trash}</span>
               <span class="delete-label">Delete</span>
             </button>` : null}
         <div class="editor-wrap" @change=${this.onEditorChange} @cancel=${this.onCancel} @delete=${this.onDelete}>
@@ -1272,64 +1335,64 @@ let S = class extends C {
       </div>
     </div>`;
   }
-  onEditorChange(o) {
-    if (typeof o.detail != "string") return;
-    const e = o.detail;
-    o.stopPropagation(), this.dispatchEvent(
+  onEditorChange(i) {
+    if (typeof i.detail != "string") return;
+    const e = i.detail;
+    i.stopPropagation(), this.dispatchEvent(
       new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
     );
   }
-  onCancel(o) {
-    o.stopPropagation(), this.dispatchEvent(
+  onCancel(i) {
+    i.stopPropagation(), this.dispatchEvent(
       new CustomEvent("close", { bubbles: !0, composed: !0 })
     );
   }
-  onDelete(o) {
-    o.stopPropagation(), this.dispatchEvent(
+  onDelete(i) {
+    i.stopPropagation(), this.dispatchEvent(
       new CustomEvent("delete", { bubbles: !0, composed: !0 })
     );
   }
   startPositioning() {
     var t;
-    const o = this.anchor ?? this.targetElement, e = this.floating;
-    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = gt(o, e, () => {
-      ut(o, e, {
+    const i = this.anchor ?? this.targetElement, e = this.floating;
+    !i || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = bt(i, e, () => {
+      Ct(i, e, {
         placement: "right",
         middleware: [
-          pt(12),
-          ft({ padding: 16 }),
-          vt({ padding: 16, crossAxis: !0 }),
-          bt({
+          Et(12),
+          wt({ padding: 16 }),
+          xt({ padding: 16, crossAxis: !0 }),
+          yt({
             padding: 16,
-            apply({ availableWidth: n, elements: i }) {
-              Object.assign(i.floating.style, {
+            apply({ availableWidth: n, elements: o }) {
+              Object.assign(o.floating.style, {
                 maxWidth: `${Math.min(400, n)}px`
               });
             }
           })
         ]
-      }).then(({ x: n, y: i }) => {
-        Object.assign(e.style, { left: `${n}px`, top: `${i}px` });
+      }).then(({ x: n, y: o }) => {
+        Object.assign(e.style, { left: `${n}px`, top: `${o}px` });
       });
     }));
   }
-  updated(o) {
-    (o.has("targetElement") || o.has("anchor")) && (this.startPositioning(), this.focusEditor());
+  updated(i) {
+    (i.has("targetElement") || i.has("anchor")) && (this.startPositioning(), this.focusEditor());
   }
   focusEditor() {
-    const o = this.renderRoot.querySelector(
+    const i = this.renderRoot.querySelector(
       'slot[name="editor"]'
-    ), t = ((o == null ? void 0 : o.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
+    ), t = ((i == null ? void 0 : i.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;
+    var i;
+    super.disconnectedCallback(), (i = this.cleanup) == null || i.call(this), this.cleanup = void 0;
   }
 };
 S.styles = [
   C.styles,
-  F`
+  W`
 			.floating {
 				z-index: calc(var(--review-z-index, 9998) + 1);
 			}
@@ -1403,32 +1466,32 @@ S.styles = [
 			}
 		`
 ];
-P([
-  v({ attribute: !1 })
+_([
+  f({ attribute: !1 })
 ], S.prototype, "targetElement", 2);
-P([
-  v({ attribute: !1 })
+_([
+  f({ attribute: !1 })
 ], S.prototype, "anchor", 2);
-P([
-  v()
+_([
+  f()
 ], S.prototype, "value", 2);
-P([
-  U("[data-floating]")
+_([
+  j("[data-floating]")
 ], S.prototype, "floating", 2);
-S = P([
-  k("llumi-comment-dialog")
+S = _([
+  N("llumi-comment-dialog")
 ], S);
-var ee = Object.defineProperty, ne = Object.getOwnPropertyDescriptor, K = (o, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? ne(e, t) : e, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(e, t, i) : s(i)) || i);
-  return n && i && ee(e, t, i), i;
+var le = Object.defineProperty, ce = Object.getOwnPropertyDescriptor, q = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? ce(e, t) : e, r = i.length - 1, s; r >= 0; r--)
+    (s = i[r]) && (o = (n ? s(e, t, o) : s(o)) || o);
+  return n && o && le(e, t, o), o;
 };
-let L = class extends C {
+let O = class extends C {
   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();
+    super(...arguments), this.barElement = null, this.value = "", this.onDocKeydown = (i) => {
+      i.key === "Escape" && (i.preventDefault(), this.emitClose());
+    }, this.onDocPointerdown = (i) => {
+      const e = i.composedPath();
       this.floating && !e.includes(this.floating) && !e.includes(this) && this.emitClose();
     };
   }
@@ -1451,10 +1514,10 @@ let L = class extends C {
       </div>
     </div>`;
   }
-  onEditorChange(o) {
-    if (typeof o.detail != "string") return;
-    const e = o.detail;
-    o.stopPropagation(), this.dispatchEvent(
+  onEditorChange(i) {
+    if (typeof i.detail != "string") return;
+    const e = i.detail;
+    i.stopPropagation(), this.dispatchEvent(
       new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
     );
   }
@@ -1465,42 +1528,42 @@ let L = class extends C {
   }
   startPositioning() {
     var t;
-    const o = this.barElement, e = this.floating;
-    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = gt(o, e, () => {
-      ut(o, e, {
+    const i = this.barElement, e = this.floating;
+    !i || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = bt(i, e, () => {
+      Ct(i, e, {
         placement: "top",
         middleware: [
-          pt(12),
-          ft({ padding: 16 }),
-          vt({ padding: 16, crossAxis: !0 }),
-          bt({
+          Et(12),
+          wt({ padding: 16 }),
+          xt({ padding: 16, crossAxis: !0 }),
+          yt({
             padding: 16,
-            apply({ availableWidth: n, elements: i }) {
-              Object.assign(i.floating.style, {
+            apply({ availableWidth: n, elements: o }) {
+              Object.assign(o.floating.style, {
                 maxWidth: `${Math.min(400, n)}px`
               });
             }
           })
         ]
-      }).then(({ x: n, y: i }) => {
-        Object.assign(e.style, { left: `${n}px`, top: `${i}px` });
+      }).then(({ x: n, y: o }) => {
+        Object.assign(e.style, { left: `${n}px`, top: `${o}px` });
       });
     }));
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.onDocKeydown), document.addEventListener("pointerdown", this.onDocPointerdown, !0);
   }
-  updated(o) {
-    o.has("barElement") && this.startPositioning();
+  updated(i) {
+    i.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);
+    var i;
+    super.disconnectedCallback(), (i = this.cleanup) == null || i.call(this), this.cleanup = void 0, document.removeEventListener("keydown", this.onDocKeydown), document.removeEventListener("pointerdown", this.onDocPointerdown, !0);
   }
 };
-L.styles = [
+O.styles = [
   C.styles,
-  F`
+  W`
 			.floating {
 				z-index: calc(var(--review-z-index, 9998) + 1);
 			}
@@ -1529,44 +1592,44 @@ L.styles = [
 			}
 		`
 ];
-K([
-  v({ attribute: !1 })
-], L.prototype, "barElement", 2);
-K([
-  v()
-], L.prototype, "value", 2);
-K([
-  U("[data-floating]")
-], L.prototype, "floating", 2);
-L = K([
-  k("llumi-overall-comment-dialog")
-], L);
-var ie = Object.defineProperty, oe = Object.getOwnPropertyDescriptor, Ct = (o, e, t, n) => {
-  for (var i = n > 1 ? void 0 : n ? oe(e, t) : e, r = o.length - 1, s; r >= 0; r--)
-    (s = o[r]) && (i = (n ? s(e, t, i) : s(i)) || i);
-  return n && i && ie(e, t, i), i;
+q([
+  f({ attribute: !1 })
+], O.prototype, "barElement", 2);
+q([
+  f()
+], O.prototype, "value", 2);
+q([
+  j("[data-floating]")
+], O.prototype, "floating", 2);
+O = q([
+  N("llumi-overall-comment-dialog")
+], O);
+var de = Object.defineProperty, he = Object.getOwnPropertyDescriptor, Tt = (i, e, t, n) => {
+  for (var o = n > 1 ? void 0 : n ? he(e, t) : e, r = i.length - 1, s; r >= 0; r--)
+    (s = i[r]) && (o = (n ? s(e, t, o) : s(o)) || o);
+  return n && o && de(e, t, o), o;
 };
-const re = "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 Z = class extends C {
+const me = "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 nt = class extends C {
   constructor() {
     super(...arguments), this.positions = [];
   }
   render() {
-    return w`${At(
+    return w`${_t(
       this.positions,
-      (o) => o.commentId,
-      (o) => w`<button
+      (i) => i.commentId,
+      (i) => w`<button
         type="button"
-        @click=${(e) => this.onClick(e, o.commentId)}
-        style=${Dt({
+        @click=${(e) => this.onClick(e, i.commentId)}
+        style=${Mt({
         position: "absolute",
-        top: `${o.top - 10}px`,
-        left: `${o.left + 2}px`,
+        top: `${i.top - 10}px`,
+        left: `${i.left + 2}px`,
         width: "20px",
         height: "20px",
         borderRadius: "50%",
         backgroundColor: "white",
-        backgroundImage: `url("${re}")`,
+        backgroundImage: `url("${me}")`,
         backgroundSize: "12px 12px",
         backgroundRepeat: "no-repeat",
         backgroundPosition: "center",
@@ -1579,8 +1642,8 @@ let Z = class extends C {
       ></button>`
     )}`;
   }
-  onClick(o, e) {
-    o.stopPropagation(), this.dispatchEvent(
+  onClick(i, e) {
+    i.stopPropagation(), this.dispatchEvent(
       new CustomEvent("icon-click", {
         detail: e,
         bubbles: !0,
@@ -1589,30 +1652,40 @@ let Z = class extends C {
     );
   }
 };
-Ct([
-  v({ attribute: !1 })
-], Z.prototype, "positions", 2);
-Z = Ct([
-  k("llumi-selection-comment-icons")
-], Z);
-const z = "data-review-selectable", ht = "review-selection-commented", mt = "review-selection-editing", G = "review-selection-hover";
-function tt() {
+Tt([
+  f({ attribute: !1 })
+], nt.prototype, "positions", 2);
+nt = Tt([
+  N("llumi-selection-comment-icons")
+], nt);
+const K = "data-review-selectable", it = "review-selection-commented", ot = "review-selection-editing", R = "review-selection-hover", ue = `
+::highlight(${it}) {
+  background-color: var(--review-selection-commented-color, oklch(0.85 0.08 250 / 0.4));
+}
+::highlight(${ot}) {
+  background-color: var(--review-selection-editing-color, oklch(0.75 0.12 250 / 0.6));
+}
+::highlight(${R}) {
+  background-color: var(--review-selection-hover-color, oklch(0.8 0.1 250 / 0.5));
+}
+`, vt = "data-llumi-review-highlight";
+function rt() {
   if (!(typeof CSS > "u"))
     return CSS.highlights;
 }
-function et(...o) {
+function st(...i) {
   return new Highlight(
-    ...o
+    ...i
   );
 }
-class se {
+class ge {
   constructor(e) {
-    this.ranges = /* @__PURE__ */ new Map(), this.repositionRaf = 0, this.reposition = () => {
+    this.ranges = /* @__PURE__ */ new Map(), this.repositionRaf = 0, this.retryRaf = 0, this.retryCount = 0, this.observedShadowRoots = /* @__PURE__ */ new WeakSet(), this.shadowObservers = [], this.reposition = () => {
       this.repositionRaf || (this.repositionRaf = requestAnimationFrame(() => {
         if (this.repositionRaf = 0, !this.ctx.isAnnotating() || this.ranges.size === 0) return;
         const t = [];
-        for (const [n, i] of this.ranges) {
-          const r = this.iconPositionForRange(n, i);
+        for (const [n, o] of this.ranges) {
+          const r = this.iconPositionForRange(n, o);
           r && t.push(r);
         }
         this.ctx.icons.positions = t;
@@ -1630,55 +1703,95 @@ class se {
    * to a comment whose content is not yet committed, hence the fallback).
    */
   update(e) {
-    const t = tt();
+    const t = rt();
     if (!t) return;
-    const n = et(), i = et(), r = /* @__PURE__ */ new Map(), s = [], a = this.ctx.getSnapshot();
+    const n = st(), o = st(), r = /* @__PURE__ */ new Map(), s = [], a = this.ctx.getSnapshot();
+    let l = !1;
     for (const h of e) {
       if (!h.selection) continue;
-      const u = this.ctx.host.querySelector(
-        `[${z}="${h.targetId}"]`
+      const g = this.ctx.host.querySelector(
+        `[${K}="${h.targetId}"]`
       );
-      if (!u) continue;
-      const p = Q(u, h.selection);
-      if (!p) continue;
-      r.set(h.commentId, p), h.commentId === a.editingCommentId ? i.add(p) : n.add(p);
-      const g = this.iconPositionForRange(h.commentId, p);
-      g && s.push(g);
+      if (!g) continue;
+      this.ensureShadowRootWired(g);
+      const m = et(g, h.selection);
+      if (!m || m.toString() !== h.selection.selectedText) {
+        l = !0;
+        continue;
+      }
+      r.set(h.commentId, m), h.commentId === a.editingCommentId ? o.add(m) : n.add(m);
+      const M = this.iconPositionForRange(h.commentId, m);
+      M && s.push(M);
     }
-    const l = a.editingCommentId;
-    if (l && !r.has(l)) {
+    const v = a.editingCommentId;
+    if (v && !r.has(v)) {
       const h = a.comments.find(
-        (u) => u.commentId === l
+        (g) => g.commentId === v
       );
       if (h != null && h.selection) {
-        const u = this.ctx.host.querySelector(
-          `[${z}="${h.targetId}"]`
+        const g = this.ctx.host.querySelector(
+          `[${K}="${h.targetId}"]`
         );
-        if (u) {
-          const p = Q(u, h.selection);
-          p && i.add(p);
+        if (g) {
+          this.ensureShadowRootWired(g);
+          const m = et(g, h.selection);
+          m ? o.add(m) : l = !0;
         }
       }
     }
     this.ranges = r, t.set(
-      ht,
+      it,
       n
-    ), t.set(mt, i), this.ctx.icons.positions = s;
+    ), t.set(ot, o), this.ctx.icons.positions = s, l && this.retryCount < 10 && this.ctx.isAnnotating() ? (this.retryCount++, this.retryRaf = requestAnimationFrame(() => {
+      this.retryRaf = 0, this.ctx.isAnnotating() && this.update(
+        this.ctx.getSnapshot().comments.filter((h) => h.selection)
+      );
+    })) : l || (this.retryCount = 0);
   }
   // Page-coordinate position of a selection comment's icon, anchored to the
   // end of its range (so it sits just past the selected text).
   iconPositionForRange(e, t) {
-    const n = t.getClientRects(), i = n[n.length - 1];
-    return i ? {
+    const n = t.getClientRects(), o = n[n.length - 1];
+    return o ? {
       commentId: e,
-      top: i.top + window.scrollY,
-      left: i.right + window.scrollX
+      top: o.top + window.scrollY,
+      left: o.right + window.scrollX
     } : null;
   }
+  /**
+   * For a selectable target that owns an open shadow root (e.g.
+   * `<llumi-highlighter>`), inject the `::highlight()` CSS and attach a
+   * MutationObserver — both idempotently, once per shadow root.
+   *
+   * Why: (1) document-level `::highlight()` rules don't cross the shadow
+   * boundary, so the shadow tree needs its own copy to paint. (2) Lit
+   * re-renders replace text nodes the range references; the observer triggers
+   * a re-`update` so the range is rebuilt over the new nodes.
+   *
+   * This is called lazily from `update`, so it catches shadow roots that
+   * appear after the review's `activate` (the host's `connectedCallback`
+   * fires before its shadow-child's).
+   */
+  ensureShadowRootWired(e) {
+    const t = e.shadowRoot;
+    if (!t || this.observedShadowRoots.has(t)) return;
+    if (this.observedShadowRoots.add(t), !t.querySelector(`style[${vt}]`)) {
+      const o = document.createElement("style");
+      o.setAttribute(vt, ""), o.textContent = ue, t.prepend(o);
+    }
+    const n = new MutationObserver(() => {
+      this.ctx.isAnnotating() && this.update(
+        this.ctx.getSnapshot().comments.filter((o) => o.selection)
+      );
+    });
+    n.observe(t, { childList: !0, subtree: !0, characterData: !0 }), this.shadowObservers.push(n);
+  }
   /** Clear all three highlight registries, the `rangeMap`, and icon positions. */
   clear() {
-    const e = tt();
-    e && (e.delete(ht), e.delete(mt), e.delete(G)), this.ranges.clear(), this.ctx.icons.positions = [];
+    const e = rt();
+    e && (e.delete(it), e.delete(ot), e.delete(R)), this.retryRaf && (cancelAnimationFrame(this.retryRaf), this.retryRaf = 0), this.retryCount = 0;
+    for (const t of this.shadowObservers) t.disconnect();
+    this.shadowObservers = [], this.observedShadowRoots = /* @__PURE__ */ new WeakSet(), this.ranges.clear(), this.ctx.icons.positions = [];
   }
   /** Capture-phase scroll + resize listeners, so icons recompute on any scroll. */
   attachListeners() {
@@ -1686,31 +1799,31 @@ class se {
   }
   /** Remove listeners and cancel any pending rAF. */
   detachListeners() {
-    window.removeEventListener("scroll", this.reposition, !0), window.removeEventListener("resize", this.reposition), this.repositionRaf && cancelAnimationFrame(this.repositionRaf);
+    window.removeEventListener("scroll", this.reposition, !0), window.removeEventListener("resize", this.reposition), this.repositionRaf && cancelAnimationFrame(this.repositionRaf), this.retryRaf && cancelAnimationFrame(this.retryRaf);
   }
 }
-const ae = "$mod+Shift+M", it = class it extends HTMLElement {
+const pe = "$mod+Shift+M", ct = class ct extends HTMLElement {
   constructor() {
-    super(...arguments), this.persistence = ct, this.manager = null, this.hoveredComment = null, this.selectionJustHandled = !1, this.selectionComments = [], this.commentDialog = null, this.commentDialogAnchorId = null, this.overallDialog = null, this.onPointerUp = () => {
+    super(...arguments), this.persistence = pt, this.manager = null, this.hoveredComment = null, this.selectionJustHandled = !1, this.selectionComments = [], this.commentDialog = null, this.commentDialogAnchorId = 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), n = Y(t.startContainer);
+      const t = e.getRangeAt(0), n = Z(t.startContainer);
       if (!n) return;
-      const i = Y(t.endContainer);
-      if (i && i !== n) {
+      const o = Z(t.endContainer);
+      if (o && o !== n) {
         e.removeAllRanges();
         return;
       }
-      if (!i || !Ft(e, n)) {
-        const a = Ut(e, n);
+      if (!o || !Bt(e, n)) {
+        const a = Vt(e, n);
         if (!a) return;
         e.removeAllRanges(), e.addRange(a);
       }
-      const r = n.getAttribute(z);
+      const r = n.getAttribute(K);
       if (!r) return;
-      const s = zt(n);
+      const s = Xt(n);
       s && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
         type: "SELECT_TEXT",
         targetId: r,
@@ -1719,28 +1832,28 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
       }));
     }, this.onPointerMove = (e) => {
       if (!this.isAnnotating()) return;
-      const t = tt();
+      const t = rt();
       if (!t) return;
       const n = this.caretPosition(e.clientX, e.clientY);
       if (!n) {
-        this.hoveredComment && (t.delete(G), this.hoveredComment = null);
+        this.hoveredComment && (t.delete(R), this.hoveredComment = null);
         return;
       }
-      let i = null;
+      let o = null;
       for (const [r, s] of this.painter.rangeMap)
         if (s.isPointInRange(n.offsetNode, n.offset)) {
-          i = r;
+          o = r;
           break;
         }
-      if (i !== this.hoveredComment)
-        if (this.hoveredComment = i, i) {
-          const r = this.painter.rangeMap.get(i);
+      if (o !== this.hoveredComment)
+        if (this.hoveredComment = o, o) {
+          const r = this.painter.rangeMap.get(o);
           r && t.set(
-            G,
-            et(r)
+            R,
+            st(r)
           );
         } else
-          t.delete(G);
+          t.delete(R);
     }, this.onClickCapture = (e) => {
       if (!this.isAnnotating() || e.defaultPrevented) return;
       if (this.selectionJustHandled) {
@@ -1753,27 +1866,27 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
       if (n) {
         for (const [a, l] of this.painter.rangeMap)
           if (l.isPointInRange(n.offsetNode, n.offset)) {
-            const h = this.selectionComments.find(
-              (p) => p.commentId === a
+            const v = this.selectionComments.find(
+              (g) => g.commentId === a
             );
+            if (!v) continue;
+            const h = Z(n.offsetNode);
             if (!h) continue;
-            const u = Y(n.offsetNode);
-            if (!u) continue;
             e.stopPropagation(), e.preventDefault(), this.actor.send({
               type: "CLICK",
-              targetId: h.targetId,
-              element: u,
+              targetId: v.targetId,
+              element: h,
               selectionCommentId: a
             });
             return;
           }
       }
-      const i = e.target, s = i.closest(
+      const o = e.target, s = o.closest(
         ".review-highlight-hover, .review-highlight-commented, .review-highlight-editing"
       );
       if (s && this.contains(s)) {
         e.stopPropagation(), e.preventDefault();
-        const a = _(i, this.customTargets);
+        const a = H(o, this.customTargets);
         a ? this.actor.send({
           type: "CLICK",
           targetId: a.targetId,
@@ -1782,7 +1895,7 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
       }
     }, this.onWrapperClick = (e) => {
       if (!this.contains(e.target) || !this.isAnnotating()) return;
-      const t = _(e.target, this.customTargets);
+      const t = H(e.target, this.customTargets);
       t ? (e.stopPropagation(), e.preventDefault(), this.actor.send({
         type: "CLICK",
         targetId: t.targetId,
@@ -1791,12 +1904,12 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
     }, this.onMouseOver = (e) => {
       const t = this.manager;
       if (!t || !this.isAnnotating()) return;
-      const n = this.currentEditingTargetId(), i = _(
+      const n = this.currentEditingTargetId(), o = H(
         e.target,
         this.customTargets
       );
-      if (i) {
-        t.applyHover(i.element, n);
+      if (o) {
+        t.applyHover(o.element, n);
         return;
       }
       const r = e.target.closest(
@@ -1806,25 +1919,25 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
     }, this.onMouseOut = (e) => {
       const t = this.manager;
       if (!t || !this.isAnnotating()) return;
-      const n = this.currentEditingTargetId(), i = /* @__PURE__ */ new Set();
+      const n = this.currentEditingTargetId(), o = /* @__PURE__ */ new Set();
       for (const a of this.actor.getSnapshot().context.comments)
-        !a.selection && a.content.trim() && i.add(a.targetId);
-      const r = _(
+        !a.selection && a.content.trim() && o.add(a.targetId);
+      const r = H(
         e.target,
         this.customTargets
       );
       if (r) {
-        t.clearHover(r.element, n, i);
+        t.clearHover(r.element, n, o);
         return;
       }
       const s = e.target.closest(
         "[data-review-selectable]"
       );
-      s && t.clearHover(s, n, i);
+      s && t.clearHover(s, n, o);
     };
   }
   get shortcut() {
-    return this.getAttribute("shortcut") ?? ae;
+    return this.getAttribute("shortcut") ?? pe;
   }
   get barPosition() {
     return this.getAttribute("bar-position") ?? "bottom-center";
@@ -1837,11 +1950,11 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
     return e != null && e.trim() ? e : null;
   }
   connectedCallback() {
-    Tt("review", Nt), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
+    kt("review", Ht), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
     const e = this.buildHighlightCallbacks();
-    this.persistence = this.persistKey ? Ht(this.persistKey) : ct;
-    const t = Mt();
-    this.actor = St(t, {
+    this.persistence = this.persistKey ? Wt(this.persistKey) : pt;
+    const t = Ut();
+    this.actor = Rt(t, {
       input: {
         shortcut: this.shortcut,
         initialData: this.initialData,
@@ -1849,16 +1962,16 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
         highlights: e,
         persistence: this.persistence
       }
-    }), this.actor.on("REVIEW_CHANGED", (n) => this.emitChange(n.result)), this.actor.on("REVIEW_SUBMITTED", (n) => this.emitSubmit(n.result)), this.mountChrome(), this.painter = new se({
+    }), this.actor.on("REVIEW_CHANGED", (n) => this.emitChange(n.result)), this.actor.on("REVIEW_SUBMITTED", (n) => this.emitSubmit(n.result)), this.mountChrome(), this.painter = new ge({
       host: this,
       icons: this.icons,
       getSnapshot: () => this.actor.getSnapshot().context,
       isAnnotating: () => this.isAnnotating()
-    }), this.actor.subscribe(() => this.syncFromSnapshot()), this.actor.start(), this.manager = kt(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.painter.attachListeners(), this.syncFromSnapshot();
+    }), this.actor.subscribe(() => this.syncFromSnapshot()), this.actor.start(), this.manager = $t(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.painter.attachListeners(), this.syncFromSnapshot();
   }
   disconnectedCallback() {
-    var e, t, n, i, r, s, a, l;
-    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), (e = this.painter) == null || e.detachListeners(), (t = this.painter) == null || t.clear(), (n = this.manager) == null || n.destroy(), this.manager = null, (i = this.actor) == null || i.stop(), (r = this.bar) == null || r.remove(), (s = this.commentDialog) == null || s.remove(), (a = this.overallDialog) == null || a.remove(), (l = this.icons) == null || l.remove();
+    var e, t, n, o, r, s, a, l;
+    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), (e = this.painter) == null || e.detachListeners(), (t = this.painter) == null || t.clear(), (n = this.manager) == null || n.destroy(), this.manager = null, (o = this.actor) == null || o.stop(), (r = this.bar) == null || r.remove(), (s = this.commentDialog) == null || s.remove(), (a = this.overallDialog) == null || a.remove(), (l = this.icons) == null || l.remove();
   }
   attributeChangedCallback() {
     this.bar && (this.bar.barPosition = this.barPosition);
@@ -1866,7 +1979,7 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
   buildDetailResult(e) {
     return e.status === "commented" ? {
       ...e,
-      comments: qt(
+      comments: te(
         e.comments,
         this,
         this.customTargets
@@ -1903,7 +2016,7 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
   // null when the range can't be restored, so the dialog falls back to anchoring
   // on the whole element.
   selectionAnchor(e, t) {
-    const n = Q(e, t);
+    const n = et(e, t);
     return n ? {
       getBoundingClientRect: () => n.getBoundingClientRect(),
       getClientRects: () => n.getClientRects(),
@@ -1931,10 +2044,10 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
     ), document.body.append(this.icons);
   }
   onIconClick(e) {
-    const t = this.actor.getSnapshot().context.comments.find((i) => i.commentId === e);
+    const t = this.actor.getSnapshot().context.comments.find((o) => o.commentId === e);
     if (!t) return;
     const n = this.querySelector(
-      `[${z}="${t.targetId}"]`
+      `[${K}="${t.targetId}"]`
     );
     n && this.actor.send({
       type: "CLICK",
@@ -1945,18 +2058,18 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
   }
   // --- snapshot → UI sync ---
   syncFromSnapshot() {
-    const e = this.actor.getSnapshot(), { comments: t, overallComment: n, editingCommentId: i, targetElement: r } = e.context;
+    const e = this.actor.getSnapshot(), { comments: t, overallComment: n, editingCommentId: o, targetElement: r } = e.context;
     this.selectionComments = t.filter(
-      (g) => g.selection && g.content.trim()
+      (m) => m.selection && m.content.trim()
     );
-    const s = !e.matches({ annotating: "inactive" }), a = e.matches({ commenting: "editing" }), l = i ? t.find((g) => g.commentId === i) : null, h = a && i === null, u = t.filter((g) => g.content.trim()).length, p = n.trim().length > 0;
-    this.bar.mode = s ? l ? "editing" : "commenting" : "idle", this.bar.commentCount = u, this.bar.hasOverallComment = p, this.bar.overallCommentOpen = h, this.icons.style.display = s ? "" : "none", a && l && r ? (this.commentDialog || (this.commentDialog = document.createElement(
+    const s = !e.matches({ annotating: "inactive" }), a = e.matches({ commenting: "editing" }), l = o ? t.find((m) => m.commentId === o) : null, v = a && o === null, h = t.filter((m) => m.content.trim()).length, g = n.trim().length > 0;
+    this.bar.mode = s ? l ? "editing" : "commenting" : "idle", this.bar.commentCount = h, this.bar.hasOverallComment = g, this.bar.overallCommentOpen = v, this.icons.style.display = s ? "" : "none", a && l && r ? (this.commentDialog || (this.commentDialog = document.createElement(
       "llumi-comment-dialog"
     ), this.commentDialog.addEventListener(
       "change",
-      (g) => this.actor.send({
+      (m) => this.actor.send({
         type: "COMMENT_CHANGE",
-        content: g.detail
+        content: m.detail
       })
     ), this.commentDialog.addEventListener(
       "delete",
@@ -1964,13 +2077,13 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
     ), this.commentDialog.addEventListener(
       "close",
       () => this.actor.send({ type: "CLOSE" })
-    ), 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), h ? (this.overallDialog || (this.overallDialog = document.createElement(
+    ), 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), v ? (this.overallDialog || (this.overallDialog = document.createElement(
       "llumi-overall-comment-dialog"
     ), this.overallDialog.addEventListener(
       "change",
-      (g) => this.actor.send({
+      (m) => this.actor.send({
         type: "COMMENT_CHANGE",
-        content: g.detail
+        content: m.detail
       })
     ), this.overallDialog.addEventListener(
       "close",
@@ -2031,14 +2144,14 @@ const ae = "$mod+Shift+M", it = class it extends HTMLElement {
       return ((t = e.comments.find((n) => n.commentId === e.editingCommentId)) == null ? void 0 : t.targetId) ?? void 0;
   }
 };
-it.observedAttributes = ["bar-position", "shortcut", "default-mode"];
-let nt = it;
-customElements.get("llumi-review") || customElements.define("llumi-review", nt);
+ct.observedAttributes = ["bar-position", "shortcut", "default-mode"];
+let at = ct;
+customElements.get("llumi-review") || customElements.define("llumi-review", at);
 export {
   S as LlumiCommentDialog,
   I as LlumiDefaultEditor,
-  L as LlumiOverallCommentDialog,
-  nt as LlumiReview,
+  O as LlumiOverallCommentDialog,
+  at as LlumiReview,
   b as LlumiReviewBar,
-  Z as LlumiSelectionCommentIcons
+  nt as LlumiSelectionCommentIcons
 };