@llumi/design-system 1.0.0 → 2.0.0

package/dist/review.mjs

@@ -1,185 +1,187 @@
-import { fromCallback as ct, setup as Tt, emit as dt, assign as x, stateIn as kt, enqueueActions as Lt, createActor as zt } from "xstate";
-import { tinykeys as Ot } from "tinykeys";
-import { svg as _, html as v, LitElement as At, unsafeCSS as Dt } from "lit";
-import { property as f, query as F, state as Mt, customElement as A } from "lit/decorators.js";
-import { clsx as _t } from "clsx";
-import { twMerge as Nt } from "tailwind-merge";
-import { autoUpdate as vt, computePosition as wt, offset as bt, flip as xt, shift as yt, size as Ct } from "@floating-ui/dom";
-import { classMap as Pt } from "lit/directives/class-map.js";
-import { repeat as $t } from "lit/directives/repeat.js";
-import { styleMap as Rt } from "lit/directives/style-map.js";
-function ht(n, e) {
-  const t = n.getAttribute("data-review-id");
+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";
+import { a as Tt } from "./adopt-global-styles-DykTxdm8.js";
+import { tinykeys as Lt } from "https://cdn.jsdelivr.net/npm/tinykeys@3.1.0";
+import { html as w, css as F } from "https://cdn.jsdelivr.net/npm/lit@3.3.3";
+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";
+import { classMap as A } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/class-map.js";
+import { i as M } from "./icons-DBLWcA83.js";
+import { L as C } from "./llumi-element-DTeRDxao.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";
+import { repeat as At } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/repeat.js";
+import { styleMap as Dt } from "https://cdn.jsdelivr.net/npm/lit@3.3.3/directives/style-map.js";
+/*! @llumi/design-system v2.0.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.0.0/LICENSE | bundled third-party components under MIT, see NOTICE | @license */
+function at(o, e) {
+  const t = o.getAttribute("data-review-id");
   if (t) return t;
-  for (const i of e ?? [])
-    if (n.matches(i.selector)) {
-      const o = i.toId(n);
-      if (o) return o;
+  for (const n of e ?? [])
+    if (o.matches(n.selector)) {
+      const i = n.toId(o);
+      if (i) return i;
     }
   return null;
 }
-function N(n, e) {
-  const t = n.closest("[data-review-id]");
+function _(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 o = n.closest(i.selector);
-    if (o) {
-      const r = i.toId(o);
-      if (r) return { element: o, targetId: r };
+    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 };
     }
   }
   return null;
 }
-function P(n, e) {
-  const t = /* @__PURE__ */ new Set(), i = [];
-  for (const o of Array.from(
-    n.querySelectorAll("[data-review-id]")
+function D(o, e) {
+  const t = /* @__PURE__ */ new Set(), n = [];
+  for (const i of Array.from(
+    o.querySelectorAll("[data-review-id]")
   )) {
-    const r = o.getAttribute("data-review-id");
+    const r = i.getAttribute("data-review-id");
     if (!r) continue;
-    const a = o.hasAttribute("data-review-selectable");
-    i.push({
-      element: o,
+    const s = i.hasAttribute("data-review-selectable");
+    n.push({
+      element: i,
       targetId: r,
-      kind: a ? "both" : "element"
-    }), t.add(o);
+      kind: s ? "both" : "element"
+    }), t.add(i);
   }
-  for (const o of e ?? [])
+  for (const i of e ?? [])
     for (const r of Array.from(
-      n.querySelectorAll(o.selector)
+      o.querySelectorAll(i.selector)
     )) {
       if (t.has(r)) continue;
-      const a = o.toId(r);
-      if (!a) continue;
-      const s = r.hasAttribute("data-review-selectable");
-      i.push({
+      const s = i.toId(r);
+      if (!s) continue;
+      const a = r.hasAttribute("data-review-selectable");
+      n.push({
         element: r,
-        targetId: a,
-        kind: s ? "both" : "element"
+        targetId: s,
+        kind: a ? "both" : "element"
       }), t.add(r);
     }
-  for (const o of Array.from(
-    n.querySelectorAll("[data-review-selectable]")
+  for (const i of Array.from(
+    o.querySelectorAll("[data-review-selectable]")
   )) {
-    if (t.has(o)) continue;
-    const r = o.getAttribute("data-review-selectable");
-    r && (i.push({ element: o, targetId: r, kind: "selectable" }), t.add(o));
+    if (t.has(i)) continue;
+    const r = i.getAttribute("data-review-selectable");
+    r && (n.push({ element: i, targetId: r, kind: "selectable" }), t.add(i));
   }
-  return i;
+  return n;
 }
-const nt = "review-highlight-hover", C = "review-highlight-commented", G = "review-highlight-editing", j = "review-highlight-uncommented", V = "review-target", gt = "review-active";
-function B(n) {
-  n.classList.remove(
-    nt,
-    C,
-    G,
-    j
+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,
+    y,
+    $,
+    H
   );
 }
-function Ht(n, e) {
-  let t = null, i = null, o = null;
+function kt(o, e) {
+  let t = null, n = null, i = null;
   function r(c) {
-    n.classList.add(gt);
-    const h = P(n, 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() {
-    n.classList.remove(gt), t && (clearTimeout(t), t = null);
-    const c = P(n, e);
-    for (const { element: h } of c)
-      B(h), h.classList.remove(V);
-  }
-  function s(c) {
-    const h = P(n, e), p = [];
-    for (const { element: d } of h)
-      !d.classList.contains(C) && !d.classList.contains(G) && (d.classList.add(j), p.push(d));
+    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));
+  }
+  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);
+  }
+  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));
     c && (t && clearTimeout(t), t = setTimeout(() => {
       t = null;
-      for (const d of p)
-        d.classList.contains(G) || d.classList.remove(j);
+      for (const d of f)
+        d.classList.contains($) || d.classList.remove(H);
     }, 500));
   }
   function l() {
     t && (clearTimeout(t), t = null);
-    const c = P(n, e);
-    for (const { element: h } of c)
-      h.classList.remove(j);
+    const c = D(o, e);
+    for (const { element: m } of c)
+      m.classList.remove(H);
   }
-  function u(c, h) {
-    h || (B(c), c.classList.add(G));
+  function h(c, m) {
+    m || (q(c), c.classList.add($));
   }
-  function m(c, h) {
-    B(c), h && c.classList.add(C);
+  function u(c, m) {
+    q(c), m && c.classList.add(y);
   }
-  function b(c, h) {
-    (ht(c, e) ?? c.getAttribute("data-review-selectable")) !== h && c.classList.add(nt);
+  function p(c, m) {
+    (at(c, e) ?? c.getAttribute("data-review-selectable")) !== m && c.classList.add(J);
   }
-  function g(c, h, p) {
-    const d = ht(c, e) ?? c.getAttribute("data-review-selectable");
-    d !== h && (c.classList.remove(nt), d && (p != null && p.has(d)) && c.classList.add(C));
+  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 It(c) {
-    q(), o = c.editingTarget ?? null, i = new MutationObserver((h) => {
-      for (const p of h) {
-        for (const d of Array.from(p.removedNodes)) {
+  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)) {
           if (!(d instanceof HTMLElement)) continue;
-          o && (d === o || d.contains(o)) && (o = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
+          i && (d === i || d.contains(i)) && (i = null, c.onTargetDisconnected()), (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
         }
-        for (const d of Array.from(p.addedNodes)) {
+        for (const d of Array.from(f.addedNodes)) {
           if (!(d instanceof HTMLElement)) continue;
-          const T = [
+          const O = [
             ...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 T of O) {
+            const R = T.getAttribute("data-review-id");
+            R && c.commentedIds.has(R) && T.classList.add(y);
           }
-          for (const I of e ?? []) {
-            const M = [
-              ...d.matches(I.selector) ? [d] : [],
-              ...Array.from(d.querySelectorAll(I.selector))
+          for (const T of e ?? []) {
+            const R = [
+              ...d.matches(T.selector) ? [d] : [],
+              ...Array.from(d.querySelectorAll(T.selector))
             ];
-            for (const W of M) {
-              const lt = I.toId(W);
-              W.classList.add(V), lt && c.commentedIds.has(lt) && W.classList.add(C);
+            for (const X of R) {
+              const ot = T.toId(X);
+              X.classList.add(j), ot && c.commentedIds.has(ot) && X.classList.add(y);
             }
           }
           (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
         }
       }
-    }), i.observe(n, { childList: !0, subtree: !0 });
+    }), n.observe(o, { childList: !0, subtree: !0 });
   }
-  function q() {
-    i && (i.disconnect(), i = null), o = null;
+  function W() {
+    n && (n.disconnect(), n = null), i = null;
   }
-  function St() {
-    a(), q();
+  function wt() {
+    s(), W();
   }
   return {
     activate: r,
-    deactivate: a,
-    reveal: s,
+    deactivate: s,
+    reveal: a,
     unreveal: l,
-    setEditing: u,
-    clearEditing: m,
-    applyHover: b,
+    setEditing: h,
+    clearEditing: u,
+    applyHover: p,
     clearHover: g,
-    startObserving: It,
-    stopObserving: q,
-    destroy: St
+    startObserving: Et,
+    stopObserving: W,
+    destroy: wt
   };
 }
-const Gt = `:root{--review-highlight-uncommented-color: oklch(.7 0 0 / .15);--review-highlight-commented-color: oklch(.7 0 0 / .3);--review-highlight-color: oklch(.7 0 0 / .5);--review-highlight-editing-color: oklch(.6 0 0 / .7);--review-badge-icon-color: oklch(.35 0 0);--review-z-index: 9998;--review-selection-commented-color: oklch(.85 .08 250 / .4);--review-selection-editing-color: oklch(.75 .12 250 / .6);--review-selection-hover-color: oklch(.8 .1 250 / .5)}[data-review-id],[data-review-selectable],.review-target{outline:2px solid transparent;outline-offset:2px;transition:outline-color .15s ease}.review-highlight-uncommented{outline-color:var(--review-highlight-uncommented-color)}.review-highlight-commented{outline-color:var(--review-highlight-commented-color);position:relative}.review-highlight-hover{outline-color:var(--review-highlight-color)}.review-highlight-commented:after{content:"";position:absolute;top:-12px;right:-14px;width:20px;height:20px;border-radius:50%;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");background-size:12px 12px;background-repeat:no-repeat;background-position:center;box-shadow:0 1px 3px #0000001a;pointer-events:none}.review-highlight-editing:after{display:none}[data-review-selectable]:not([data-review-id]).review-highlight-commented:after{display:none}.review-highlight-editing{outline-color:var(--review-highlight-editing-color)}::highlight(review-selection-commented){background-color:var(--review-selection-commented-color)}::highlight(review-selection-editing){background-color:var(--review-selection-editing-color)}::highlight(review-selection-hover){background-color:var(--review-selection-hover-color)}.review-active [data-review-id],.review-active .review-target{cursor:pointer}.review-active [data-review-selectable]{cursor:text}`;
-function jt(n, e) {
-  const t = n.find(
-    (o) => o.targetId === e && !o.selection
+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
   );
   return t ? { comment: t, isNew: !1 } : { comment: {
     commentId: crypto.randomUUID(),
@@ -188,14 +190,14 @@ function jt(n, e) {
     createdAt: (/* @__PURE__ */ new Date()).toISOString()
   }, isNew: !0 };
 }
-function Ut(n) {
-  let e = n.comments;
-  if (n.editingCommentId !== null) {
+function Rt(o) {
+  let e = o.comments;
+  if (o.editingCommentId !== null) {
     const t = e.find(
-      (i) => i.commentId === n.editingCommentId
+      (n) => n.commentId === o.editingCommentId
     );
     t && t.content === "" && (e = e.filter(
-      (i) => i.commentId !== n.editingCommentId
+      (n) => n.commentId !== o.editingCommentId
     ));
   }
   return {
@@ -205,29 +207,29 @@ function Ut(n) {
     selectionRange: null
   };
 }
-function Y(n) {
-  const e = n.comments.filter((o) => o.content.trim()), t = e.length > 0, i = n.overallComment.trim().length > 0;
-  return !t && !i ? { status: "approved" } : {
+function B(o) {
+  const e = o.comments.filter((i) => i.content.trim()), t = e.length > 0, n = o.overallComment.trim().length > 0;
+  return !t && !n ? { status: "approved" } : {
     status: "commented",
     comments: e,
-    overallComment: i ? n.overallComment.trim() : void 0
+    overallComment: n ? o.overallComment.trim() : void 0
   };
 }
-function Ft(n) {
+function _t(o) {
   const e = /* @__PURE__ */ new Set();
-  for (const t of n.comments)
+  for (const t of o.comments)
     !t.selection && t.content.trim() && e.add(t.targetId);
   return e;
 }
-function Kt() {
-  const n = ct(
-    ({ sendBack: t, input: i }) => {
-      const o = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
+function Mt() {
+  const o = rt(
+    ({ sendBack: t, input: n }) => {
+      const i = () => t({ type: "RELEASE_ANNOTATE" }), r = (l) => {
         l.key === "Alt" && (l.preventDefault(), t({ type: "HOLD_ANNOTATE" }));
-      }, a = (l) => {
+      }, s = (l) => {
         l.key === "Alt" && t({ type: "RELEASE_ANNOTATE" });
-      }, s = Ot(window, {
-        [i.shortcut]: (l) => {
+      }, a = Lt(window, {
+        [n.shortcut]: (l) => {
           l.preventDefault(), t({ type: "TOGGLE" });
         },
         "$mod+Enter": (l) => {
@@ -240,22 +242,22 @@ function Kt() {
           l.preventDefault(), t({ type: "CLOSE" });
         }
       });
-      return window.addEventListener("keydown", r), window.addEventListener("keyup", a), window.addEventListener("blur", o), () => {
-        s(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", a), window.removeEventListener("blur", o);
+      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);
       };
     }
-  ), e = ct(({ sendBack: t, input: i }) => {
-    const o = 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))) {
+  ), e = rt(({ sendBack: t, input: n }) => {
+    const i = 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))) {
             t({ type: "TARGET_DISCONNECTED" });
             return;
           }
     });
-    return o.observe(i.wrapperElement, { childList: !0, subtree: !0 }), () => o.disconnect();
+    return i.observe(n.wrapperElement, { childList: !0, subtree: !0 }), () => i.disconnect();
   });
-  return Tt({
+  return xt({
     types: {
       context: {},
       events: {},
@@ -263,23 +265,23 @@ function Kt() {
       emitted: {}
     },
     actors: {
-      keyboardActor: n,
+      keyboardActor: o,
       mutationObserverActor: e
     },
     guards: {
-      isCommentingEditing: kt({ commenting: "editing" }),
+      isCommentingEditing: yt({ 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 o = t.comments.find(
+      isSameComment: ({ context: t, event: n }) => {
+        if (n.type !== "CLICK") return !1;
+        if (n.selectionCommentId)
+          return t.editingCommentId === n.selectionCommentId;
+        if (n.targetId) {
+          const i = t.comments.find(
             (r) => r.commentId === t.editingCommentId
           );
-          return !!o && o.targetId === i.targetId && !o.selection;
+          return !!i && i.targetId === n.targetId && !i.selection;
         }
         return !1;
       }
@@ -288,64 +290,64 @@ function Kt() {
       flashDuration: 500
     },
     actions: {
-      openElementComment: x(({ context: t, event: i }) => {
-        if (i.type !== "CLICK" || !i.targetId) return {};
-        const { comment: o, isNew: r } = jt(
+      openElementComment: E(({ context: t, event: n }) => {
+        if (n.type !== "CLICK" || !n.targetId) return {};
+        const { comment: i, isNew: r } = Pt(
           t.comments,
-          i.targetId
+          n.targetId
         );
         return {
-          comments: r ? [...t.comments, o] : t.comments,
-          editingCommentId: o.commentId,
-          targetElement: i.element ?? null,
+          comments: r ? [...t.comments, i] : t.comments,
+          editingCommentId: i.commentId,
+          targetElement: n.element ?? null,
           selectionRange: null
         };
       }),
-      openSelectionComment: x(({ event: t }) => t.type !== "CLICK" || !t.selectionCommentId ? {} : {
+      openSelectionComment: E(({ 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 o = {
+      createSelectionComment: E(({ context: t, event: n }) => {
+        if (n.type !== "SELECT_TEXT") return {};
+        const i = {
           commentId: crypto.randomUUID(),
-          targetId: i.targetId,
+          targetId: n.targetId,
           content: "",
           createdAt: (/* @__PURE__ */ new Date()).toISOString(),
-          selection: i.selectionRange
+          selection: n.selectionRange
         };
         return {
-          comments: [...t.comments, o],
-          editingCommentId: o.commentId,
-          targetElement: i.targetElement,
-          selectionRange: i.selectionRange
+          comments: [...t.comments, i],
+          editingCommentId: i.commentId,
+          targetElement: n.targetElement,
+          selectionRange: n.selectionRange
         };
       }),
-      updateContent: x(({ context: t, event: i }) => i.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: i.content } : {
+      updateContent: E(({ context: t, event: n }) => n.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: n.content } : {
         comments: t.comments.map(
-          (o) => o.commentId === t.editingCommentId ? { ...o, content: i.content } : o
+          (i) => i.commentId === t.editingCommentId ? { ...i, content: n.content } : i
         )
       }),
-      deleteComment: x(({ context: t }) => ({
+      deleteComment: E(({ context: t }) => ({
         comments: t.comments.filter(
-          (i) => i.commentId !== t.editingCommentId
+          (n) => n.commentId !== t.editingCommentId
         ),
         editingCommentId: null,
         targetElement: null,
         selectionRange: null
       })),
-      cleanup: x(({ context: t }) => Ut(t)),
-      emitChanged: dt(({ context: t }) => ({
+      cleanup: E(({ context: t }) => Rt(t)),
+      emitChanged: st(({ context: t }) => ({
         type: "REVIEW_CHANGED",
-        result: Y(t)
+        result: B(t)
       })),
       persistSave: ({ context: t }) => {
-        t.persistence.save(Y(t));
+        t.persistence.save(B(t));
       },
-      emitSubmitted: dt(({ context: t }) => ({
+      emitSubmitted: st(({ context: t }) => ({
         type: "REVIEW_SUBMITTED",
-        result: Y(t)
+        result: B(t)
       })),
       // Highlight lifecycle actions — call manager methods directly via
       // callbacks passed through input. The machine owns WHEN highlights
@@ -353,7 +355,7 @@ function Kt() {
       // Actions run synchronously during transitions — no timing gap.
       // Never add useEffects that react to derived machine state.
       highlightsActivate: ({ context: t }) => {
-        t.highlights.activate(Ft(t));
+        t.highlights.activate(_t(t));
       },
       highlightsDeactivate: ({ context: t }) => {
         t.highlights.deactivate();
@@ -368,21 +370,21 @@ function Kt() {
         t.highlights.unreveal();
       },
       editingTargetSet: ({ context: t }) => {
-        var o;
+        var i;
         if (!t.targetElement) return;
-        const i = !!((o = t.comments.find(
+        const n = !!((i = t.comments.find(
           (r) => r.commentId === t.editingCommentId
-        )) != null && o.selection);
-        t.highlights.setEditing(t.targetElement, i);
+        )) != null && i.selection);
+        t.highlights.setEditing(t.targetElement, n);
       },
       editingTargetCleared: ({ context: t }) => {
         if (!t.targetElement) return;
-        const i = t.comments.find(
-          (o) => o.commentId === t.editingCommentId
+        const n = t.comments.find(
+          (i) => i.commentId === t.editingCommentId
         );
         t.highlights.clearEditing(
           t.targetElement,
-          !!(i != null && i.content.trim())
+          !!(n != null && n.content.trim())
         );
       }
     }
@@ -390,9 +392,9 @@ function Kt() {
     id: "review",
     type: "parallel",
     context: ({ input: t }) => {
-      const i = t.persistence.load() ?? t.initialData, o = (i == null ? void 0 : i.status) === "commented" ? i.comments ?? [] : [], r = (i == null ? void 0 : i.status) === "commented" ? i.overallComment ?? "" : "";
+      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 ?? "" : "";
       return {
-        comments: o,
+        comments: i,
         overallComment: r,
         editingCommentId: null,
         targetElement: null,
@@ -439,8 +441,8 @@ function Kt() {
             on: {
               TOGGLE: {
                 target: "inactive",
-                actions: Lt(({ enqueue: t, check: i }) => {
-                  i("isCommentingEditing") && t.raise({ type: "CLOSE" });
+                actions: It(({ enqueue: t, check: n }) => {
+                  n("isCommentingEditing") && t.raise({ type: "CLOSE" });
                 })
               }
             },
@@ -517,7 +519,7 @@ function Kt() {
               },
               OPEN_OVERALL: {
                 target: "editing.element",
-                actions: x({
+                actions: E({
                   editingCommentId: null,
                   targetElement: null,
                   selectionRange: null
@@ -616,7 +618,7 @@ function Kt() {
                 actions: [
                   "editingTargetCleared",
                   "cleanup",
-                  x({
+                  E({
                     editingCommentId: null,
                     targetElement: null,
                     selectionRange: null
@@ -634,7 +636,7 @@ function Kt() {
     }
   });
 }
-const ut = {
+const ct = {
   load: () => {
   },
   save: () => {
@@ -642,210 +644,180 @@ const ut = {
   clear: () => {
   }
 };
-function J() {
+function V() {
   try {
     return typeof localStorage > "u" ? void 0 : localStorage;
   } catch {
     return;
   }
 }
-function Xt(n) {
-  if (typeof n != "object" || n === null) return !1;
-  const e = n.status;
+function $t(o) {
+  if (typeof o != "object" || o === null) return !1;
+  const e = o.status;
   return e === "approved" || e === "commented";
 }
-function qt(n) {
+function Ht(o) {
   return {
     load() {
-      const e = J();
+      const e = V();
       if (e)
         try {
-          const t = e.getItem(n);
+          const t = e.getItem(o);
           if (t === null) return;
-          const i = JSON.parse(t);
-          return Xt(i) ? i : void 0;
+          const n = JSON.parse(t);
+          return $t(n) ? n : void 0;
         } catch {
           return;
         }
     },
     save(e) {
-      const t = J();
+      const t = V();
       if (t)
         try {
           if (e.status === "approved") {
-            t.removeItem(n);
+            t.removeItem(o);
             return;
           }
-          t.setItem(n, JSON.stringify(e));
+          t.setItem(o, JSON.stringify(e));
         } catch {
         }
     },
     clear() {
-      const e = J();
+      const e = V();
       if (e)
         try {
-          e.removeItem(n);
+          e.removeItem(o);
         } catch {
         }
     }
   };
 }
-const Wt = 3;
-function Vt(n) {
+const Gt = 3;
+function zt(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 < Wt) return null;
-  const o = Jt(
-    n,
+  const t = e.getRangeAt(0), n = t.toString();
+  if (n.length < Gt) return null;
+  const i = Kt(
+    o,
     t.startContainer,
     t.startOffset
-  ), r = o + i.length;
-  if (o < 0) return null;
-  const a = Qt(
-    n.textContent ?? "",
-    i,
-    o
+  ), r = i + n.length;
+  if (i < 0) return null;
+  const s = Wt(
+    o.textContent ?? "",
+    n,
+    i
   );
-  return { startOffset: o, endOffset: r, selectedText: i, matchIndex: a };
+  return { startOffset: i, endOffset: r, selectedText: n, matchIndex: s };
 }
-function mt(n, e) {
-  const t = n.textContent ?? "";
+function Q(o, e) {
+  const t = o.textContent ?? "";
   if (t.slice(
     e.startOffset,
     e.endOffset
   ) === e.selectedText)
-    return pt(
-      n,
+    return dt(
+      o,
       e.startOffset,
       e.endOffset
     );
-  const o = Zt(
+  const i = Xt(
     t,
     e.selectedText,
     e.matchIndex
   );
-  return o < 0 ? null : pt(
-    n,
+  return i < 0 ? null : dt(
     o,
-    o + e.selectedText.length
+    i,
+    i + e.selectedText.length
   );
 }
-function Bt(n, e) {
-  if (n.isCollapsed || n.rangeCount === 0) return !1;
-  const t = n.getRangeAt(0);
+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 Q(n) {
-  const e = n instanceof HTMLElement ? n : n.parentElement;
+function Y(o) {
+  const e = o instanceof HTMLElement ? o : o.parentElement;
   return (e == null ? void 0 : e.closest("[data-review-selectable]")) ?? null;
 }
-function Yt(n, e) {
-  var a;
-  if (n.isCollapsed || n.rangeCount === 0) return null;
-  const t = n.getRangeAt(0), i = t.cloneRange(), o = e.contains(t.startContainer), r = e.contains(t.endContainer);
-  if (o && r) return i;
-  if (o && !r) {
-    const s = te(e);
-    return s && i.setEnd(s, ((a = s.textContent) == null ? void 0 : a.length) ?? 0), i;
+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;
   }
   return null;
 }
-function Jt(n, e, t) {
+function Kt(o, e, t) {
   var r;
-  const i = document.createTreeWalker(n, NodeFilter.SHOW_TEXT);
-  let o = 0;
-  for (; i.nextNode(); ) {
-    if (i.currentNode === e) return o + t;
-    o += ((r = i.currentNode.textContent) == null ? void 0 : r.length) ?? 0;
+  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;
   }
   return -1;
 }
-function pt(n, e, t) {
-  var s;
-  const i = document.createTreeWalker(n, NodeFilter.SHOW_TEXT), o = 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 && (o.setStart(i.currentNode, e - r), a = !0), a && r + l >= t)
-      return o.setEnd(i.currentNode, t - r), o;
+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;
   }
   return null;
 }
-function Qt(n, e, t) {
-  let i = 0, o = 0;
+function Wt(o, e, t) {
+  let n = 0, i = 0;
   for (; ; ) {
-    const r = n.indexOf(e, o);
-    if (r < 0 || r === t) return i;
-    o = r + 1, i++;
+    const r = o.indexOf(e, i);
+    if (r < 0 || r === t) return n;
+    i = r + 1, n++;
   }
 }
-function Zt(n, e, t) {
-  let i = 0, o = 0;
+function Xt(o, e, t) {
+  let n = 0, i = 0;
   for (; ; ) {
-    const r = n.indexOf(e, o);
+    const r = o.indexOf(e, i);
     if (r < 0) return -1;
-    if (i === t) return r;
-    o = r + 1, i++;
+    if (n === t) return r;
+    i = r + 1, n++;
   }
 }
-function te(n) {
-  const e = document.createTreeWalker(n, NodeFilter.SHOW_TEXT);
+function jt(o) {
+  const e = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
   let t = null;
   for (; e.nextNode(); )
     t = e.currentNode;
   return t;
 }
-function ee(n, e) {
-  const t = /* @__PURE__ */ new Map();
-  return e.querySelectorAll("[data-review-id]").forEach((o, r) => {
-    const a = o.getAttribute("data-review-id");
-    a && t.set(a, r);
-  }), [...n].sort((o, r) => {
-    const a = t.get(o.targetId) ?? Number.MAX_SAFE_INTEGER, s = t.get(r.targetId) ?? Number.MAX_SAFE_INTEGER;
-    return a - s;
+function qt(o, e, t) {
+  const n = /* @__PURE__ */ new Map(), i = 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())
+    n.set(s.targetId, r);
+  return [...o].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;
   });
 }
-function k(...n) {
-  return Nt(_t(n));
-}
-function $(n) {
-  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"
-  >
-    ${n}
-  </svg>`;
-}
-const U = {
-  check: $(_`<path d="M20 6 9 17l-5-5" />`),
-  gripVertical: $(
-    _`<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: $(
-    _`<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: $(
-    _`<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" />`
-  )
-}, ie = '/*! tailwindcss v4.3.1 | MIT License | https://tailwindcss.com */@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-zinc-50:oklch(98.5% 0 0);--color-zinc-100:oklch(96.7% .001 286.375);--color-zinc-200:oklch(92% .004 286.32);--color-zinc-300:oklch(87.1% .006 286.286);--color-zinc-400:oklch(70.5% .015 286.067);--color-zinc-500:oklch(55.2% .016 285.938);--color-zinc-600:oklch(44.2% .017 285.786);--color-zinc-700:oklch(37% .013 285.805);--color-zinc-800:oklch(27.4% .006 286.033);--color-zinc-900:oklch(21% .006 285.885);--color-zinc-950:oklch(14.1% .005 285.823);--color-white:#fff;--spacing:.25rem;--container-2xl:42rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--leading-relaxed:1.625;--radius-md:.375rem;--radius-lg:.5rem;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.top-2{top:calc(var(--spacing) * 2)}.right-2{right:calc(var(--spacing) * 2)}.z-10{z-index:10}.z-\\[calc\\(var\\(--review-z-index\\,9998\\)\\+1\\)\\]{z-index:calc(var(--review-z-index,9998) + 1)}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.size-3{width:calc(var(--spacing) * 3);height:calc(var(--spacing) * 3)}.size-3\\.5{width:calc(var(--spacing) * 3.5);height:calc(var(--spacing) * 3.5)}.h-4{height:calc(var(--spacing) * 4)}.h-7{height:calc(var(--spacing) * 7)}.h-\\[18px\\]{height:18px}.max-h-\\[200px\\]{max-height:200px}.w-7{width:calc(var(--spacing) * 7)}.w-\\[400px\\]{width:400px}.w-full{width:100%}.w-px{width:1px}.max-w-0{max-width:0}.max-w-2xl{max-width:var(--container-2xl)}.min-w-\\[18px\\]{min-width:18px}.flex-1{flex:1}.translate-x-0\\.5{--tw-translate-x:calc(var(--spacing) * .5);translate:var(--tw-translate-x) var(--tw-translate-y)}.translate-x-3\\.5{--tw-translate-x:calc(var(--spacing) * 3.5);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-\\[llumi-fade-in_0\\.15s_ease-out\\]{animation:.15s ease-out llumi-fade-in}.cursor-grab{cursor:grab}.cursor-pointer{cursor:pointer}.resize-none{resize:none}.items-center{align-items:center}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-1\\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}:where(.space-y-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}', ne = Dt(ie), at = class at extends At {
+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;
 };
-at.styles = ne;
-let E = at;
-var oe = Object.defineProperty, re = Object.getOwnPropertyDescriptor, y = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? re(e, t) : e, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
-  return i && o && oe(e, t, o), o;
-};
-const ae = {
+const Yt = {
   "top-left": { top: "16px", left: "16px" },
   "top-center": { top: "16px", left: "50%", translateX: "-50%" },
   "top-right": { top: "16px", right: "16px" },
@@ -853,22 +825,22 @@ const ae = {
   "bottom-center": { bottom: "16px", left: "50%", translateX: "-50%" },
   "bottom-right": { bottom: "16px", right: "16px" }
 };
-let w = class extends E {
+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 = (n) => {
+    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: n.clientX,
-        py: n.clientY,
+        px: o.clientX,
+        py: o.clientY,
         ox: e.left,
         oy: e.top
       }, window.addEventListener("pointermove", this.onDragMove), window.addEventListener("pointerup", this.onDragEnd);
-    }, this.onDragMove = (n) => {
+    }, this.onDragMove = (o) => {
       if (!this.dragStart) return;
-      const e = this.dragStart.ox + (n.clientX - this.dragStart.px), t = this.dragStart.oy + (n.clientY - this.dragStart.py), i = 16, o = window.innerWidth - this.bar.offsetWidth - i, r = window.innerHeight - this.bar.offsetHeight - i;
+      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;
       this.dragOffset = {
-        x: Math.max(i, Math.min(e, o)),
-        y: Math.max(i, Math.min(t, r))
+        x: Math.max(n, Math.min(e, i)),
+        y: Math.max(n, Math.min(t, r))
       };
     }, this.onDragEnd = () => {
       this.dragStart = null, window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
@@ -878,65 +850,73 @@ let w = class extends E {
     return this.bar ?? null;
   }
   render() {
-    const n = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, i = ae[this.barPosition], o = this.dragOffset ? `position:fixed;left:${this.dragOffset.x}px;top:${this.dragOffset.y}px;z-index:var(--review-z-index,9998);` : `position:fixed;${i.top ? `top:${i.top};` : ""}${i.bottom ? `bottom:${i.bottom};` : ""}${i.left ? `left:${i.left};` : ""}${i.right ? `right:${i.right};` : ""}${i.translateX ? `transform:translateX(${i.translateX});` : ""}z-index:var(--review-z-index,9998);`;
-    return v`<div
+    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);`;
+    return w`<div
       data-bar
-      class=${k(
-      "flex items-center gap-2 rounded-full border border-zinc-200 bg-white p-1 shadow-lg",
-      n && "ring-1 ring-zinc-400/20"
-    )}
-      style=${o}
+      class=${A({ bar: !0, "bar--active": o })}
+      style=${i}
     >
       <div
-        class="flex h-7 w-7 cursor-grab items-center justify-center text-zinc-400 active:cursor-grabbing"
+        class="grip"
         @pointerdown=${this.onDragStart}
       >
-        <span class="size-3">${U.gripVertical}</span>
+        <span class="icon icon-12">${M.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", n ? "text-zinc-900" : "text-zinc-500")}>Annotate</span>
+      <label class="label">
+        <span class=${A({
+      "label-text": !0,
+      "label-text--active": o,
+      "label-text--idle": !o
+    })}>Annotate</span>
         <button
           type="button"
           role="switch"
-          aria-checked=${n ? "true" : "false"}
+          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",
-      n ? "bg-zinc-900" : "bg-zinc-300"
-    )}
+          class=${A({
+      toggle: !0,
+      "toggle--active": o,
+      "toggle--idle": !o
+    })}
         >
-          <span class=${k("inline-block size-3 transform rounded-full bg-white transition-transform", n ? "translate-x-3.5" : "translate-x-0.5")}></span>
+          <span class=${A({
+      knob: !0,
+      "knob--active": o,
+      "knob--idle": !o
+    })}></span>
         </button>
       </label>
 
-      <div class="h-4 w-px bg-zinc-200"></div>
+      <div class="divider"></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"
-    )}
+        class=${A({
+      overall: !0,
+      "overall--has": this.hasOverallComment,
+      "overall--open": !this.hasOverallComment && this.overallCommentOpen,
+      "overall--idle": !this.hasOverallComment && !this.overallCommentOpen
+    })}
       >
         Comment
-        <span class="size-3.5">${U.messageSquare}</span>
+        <span class="icon icon-14">${M.messageSquare}</span>
       </button>
 
-      <div class="h-4 w-px bg-zinc-200"></div>
+      <div class="divider"></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"
+        class="submit"
       >
         ${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 class="badge">
+          ${t ? e : w`<span class="icon icon-12">${M.check}</span>`}
         </span>
       </button>
     </div>`;
@@ -960,55 +940,245 @@ let w = class extends E {
     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([
-  Mt()
-], w.prototype, "dragOffset", 2);
-w = y([
-  A("llumi-review-bar")
-], w);
-var se = Object.defineProperty, le = Object.getOwnPropertyDescriptor, D = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? le(e, t) : e, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
-  return i && o && se(e, t, o), o;
+b.styles = [
+  C.styles,
+  F`
+			:host {
+				color-scheme: light;
+				color: #18181b;
+			}
+			.bar {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				border-radius: 9999px;
+				border: 1px solid #e4e4e7;
+				background-color: #fff;
+				padding: 4px;
+				box-shadow:
+					0 10px 15px -3px rgb(0 0 0 / 0.1),
+					0 4px 6px -4px rgb(0 0 0 / 0.1);
+			}
+			.bar--active {
+				box-shadow:
+					0 0 0 1px rgb(161 161 170 / 0.2),
+					0 10px 15px -3px rgb(0 0 0 / 0.1),
+					0 4px 6px -4px rgb(0 0 0 / 0.1);
+			}
+			.grip {
+				display: flex;
+				height: 28px;
+				width: 28px;
+				align-items: center;
+				justify-content: center;
+				color: #a1a1aa;
+				cursor: grab;
+			}
+			.grip:active {
+				cursor: grabbing;
+			}
+			.icon {
+				display: block;
+			}
+			.icon svg {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+			.icon-12 {
+				width: 12px;
+				height: 12px;
+			}
+			.icon-14 {
+				width: 14px;
+				height: 14px;
+			}
+			.label {
+				display: flex;
+				cursor: pointer;
+				align-items: center;
+				gap: 8px;
+				padding: 0 4px;
+			}
+			.label-text {
+				user-select: none;
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+				transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.label-text--active {
+				color: #18181b;
+			}
+			.label-text--idle {
+				color: #71717a;
+			}
+			.toggle {
+				position: relative;
+				display: inline-flex;
+				height: 16px;
+				width: 28px;
+				align-items: center;
+				border-radius: 9999px;
+				border: 0;
+				margin: 0;
+				padding: 0;
+				font-family: inherit;
+				color: inherit;
+				cursor: pointer;
+				transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.toggle--active {
+				background-color: #18181b;
+			}
+			.toggle--idle {
+				background-color: #d4d4d8;
+			}
+			.knob {
+				display: inline-block;
+				width: 12px;
+				height: 12px;
+				border-radius: 9999px;
+				background-color: #fff;
+				transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.knob--active {
+				translate: 14px 0;
+			}
+			.knob--idle {
+				translate: 2px 0;
+			}
+			.divider {
+				height: 16px;
+				width: 1px;
+				background-color: #e4e4e7;
+			}
+			.overall {
+				position: relative;
+				display: flex;
+				height: 28px;
+				align-items: center;
+				gap: 6px;
+				border-radius: 9999px;
+				padding: 0 12px;
+				font-family: inherit;
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+				color: inherit;
+				background-color: transparent;
+				border: 0;
+				margin: 0;
+				cursor: pointer;
+			}
+			.overall--has {
+				background-color: #18181b;
+				color: #fff;
+			}
+			.overall--has:hover {
+				background-color: #27272a;
+			}
+			.overall--has:active {
+				background-color: #09090b;
+			}
+			.overall--open {
+				background-color: #f4f4f5;
+			}
+			.overall--open:hover {
+				background-color: #e4e4e7;
+			}
+			.overall--idle {
+				border: 1px solid #e4e4e7;
+			}
+			.overall--idle:hover {
+				background-color: #fafafa;
+			}
+			.submit {
+				display: flex;
+				height: 28px;
+				align-items: center;
+				gap: 6px;
+				border-radius: 9999px;
+				padding: 0 8px 0 12px;
+				background-color: #18181b;
+				color: #fff;
+				font-family: inherit;
+				font-size: 12px;
+				line-height: 16px;
+				font-weight: 500;
+				border: 0;
+				margin: 0;
+				cursor: pointer;
+			}
+			.submit:hover {
+				background-color: #27272a;
+			}
+			.submit:active {
+				background-color: #09090b;
+			}
+			.badge {
+				display: flex;
+				height: 18px;
+				min-width: 18px;
+				align-items: center;
+				justify-content: center;
+				border-radius: 9999px;
+				background-color: rgb(255 255 255 / 0.25);
+				padding: 0 4px;
+				font-size: 11px;
+				line-height: 16px;
+				font-weight: 600;
+			}
+		`
+];
+x([
+  v()
+], b.prototype, "mode", 2);
+x([
+  v({ type: Number })
+], b.prototype, "commentCount", 2);
+x([
+  v({ type: Boolean })
+], b.prototype, "hasOverallComment", 2);
+x([
+  v({ type: Boolean })
+], b.prototype, "overallCommentOpen", 2);
+x([
+  v()
+], b.prototype, "barPosition", 2);
+x([
+  U("[data-bar]")
+], b.prototype, "bar", 2);
+x([
+  Ot()
+], b.prototype, "dragOffset", 2);
+b = x([
+  k("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;
 };
-let S = class extends E {
+let I = class extends C {
   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 n;
-    (n = this.textarea) == null || n.focus();
+    var o;
+    (o = this.textarea) == null || o.focus();
   }
   render() {
-    return v`<textarea
+    return w`<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(n) {
-    const e = n.target.value;
+  onInput(o) {
+    const e = o.target.value;
     this.autoGrow(), this.dispatchEvent(
       new CustomEvent("change", {
         detail: e,
@@ -1018,8 +1188,8 @@ let S = class extends E {
     );
   }
   autoGrow() {
-    const n = this.textarea;
-    n && (n.style.height = "auto", n.style.height = `${n.scrollHeight}px`);
+    const o = this.textarea;
+    o && (o.style.height = "auto", o.style.height = `${o.scrollHeight}px`);
   }
   firstUpdated() {
     this.autoFocus && this.textarea.focus(), this.autoGrow();
@@ -1028,53 +1198,73 @@ let S = class extends E {
     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 ce = Object.defineProperty, de = Object.getOwnPropertyDescriptor, K = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? de(e, t) : e, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
-  return i && o && ce(e, t, o), o;
+I.styles = [
+  C.styles,
+  F`
+			textarea {
+				width: 100%;
+				resize: none;
+				background-color: transparent;
+				color: #18181b;
+				font-family: inherit;
+				font-size: 0.875rem;
+				line-height: 1.25rem;
+				max-height: 200px;
+				overflow-y: auto;
+				margin: 0;
+				padding: 0;
+				border: 0;
+			}
+			textarea::placeholder {
+				color: #a1a1aa;
+			}
+			textarea:focus {
+				outline: none;
+			}
+		`
+];
+N([
+  v()
+], I.prototype, "value", 2);
+N([
+  v({ type: Boolean })
+], I.prototype, "autoFocus", 2);
+N([
+  v()
+], I.prototype, "placeholder", 2);
+N([
+  U("textarea")
+], I.prototype, "textarea", 2);
+I = N([
+  k("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;
 };
-let z = class extends E {
+let S = class extends C {
   constructor() {
-    super(...arguments), this.targetElement = null, this.value = "";
+    super(...arguments), this.targetElement = null, this.anchor = null, this.value = "";
   }
   render() {
-    const n = this.value.trim().length > 0;
-    return v`<div
+    const o = this.value.trim().length > 0;
+    return w`<div
       data-floating
-      class="z-[calc(var(--review-z-index,9998)+1)]"
+      class="floating"
       style="position:absolute;top:0;left:0;"
     >
-      <div
-        class=${Pt({
-      "relative w-[400px] rounded-lg border border-zinc-200 bg-white shadow-xl": !0,
-      "animate-[llumi-fade-in_0.15s_ease-out]": !0
-    })}
-      >
-        ${n ? v`<button
+      <div class="panel">
+        ${o ? w`<button
               type="button"
               data-delete
+              class="delete-btn"
               @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>
+              <span class="icon icon-14">${M.trash}</span>
+              <span class="delete-label">Delete</span>
             </button>` : null}
-        <div class="p-3" @change=${this.onEditorChange} @cancel=${this.onCancel} @delete=${this.onDelete}>
+        <div class="editor-wrap" @change=${this.onEditorChange} @cancel=${this.onCancel} @delete=${this.onDelete}>
           <slot name="editor">
             <llumi-default-editor .value=${this.value} autoFocus></llumi-default-editor>
           </slot>
@@ -1082,95 +1272,174 @@ let z = class extends E {
       </div>
     </div>`;
   }
-  onEditorChange(n) {
-    if (typeof n.detail != "string") return;
-    const e = n.detail;
-    n.stopPropagation(), this.dispatchEvent(
+  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(n) {
-    n.stopPropagation(), this.dispatchEvent(
+  onCancel(o) {
+    o.stopPropagation(), this.dispatchEvent(
       new CustomEvent("close", { bubbles: !0, composed: !0 })
     );
   }
-  onDelete(n) {
-    n.stopPropagation(), this.dispatchEvent(
+  onDelete(o) {
+    o.stopPropagation(), this.dispatchEvent(
       new CustomEvent("delete", { bubbles: !0, composed: !0 })
     );
   }
   startPositioning() {
     var t;
-    const n = this.targetElement, e = this.floating;
-    !n || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = vt(n, e, () => {
-      wt(n, e, {
+    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, {
         placement: "right",
         middleware: [
-          bt(12),
-          xt({ padding: 16 }),
-          yt({ padding: 16, crossAxis: !0 }),
-          Ct({
+          pt(12),
+          ft({ padding: 16 }),
+          vt({ padding: 16, crossAxis: !0 }),
+          bt({
             padding: 16,
-            apply({ availableWidth: i, elements: o }) {
-              Object.assign(o.floating.style, {
-                maxWidth: `${Math.min(400, i)}px`
+            apply({ availableWidth: n, elements: i }) {
+              Object.assign(i.floating.style, {
+                maxWidth: `${Math.min(400, n)}px`
               });
             }
           })
         ]
-      }).then(({ x: i, y: o }) => {
-        Object.assign(e.style, { left: `${i}px`, top: `${o}px` });
+      }).then(({ x: n, y: i }) => {
+        Object.assign(e.style, { left: `${n}px`, top: `${i}px` });
       });
     }));
   }
-  updated(n) {
-    n.has("targetElement") && (this.startPositioning(), this.focusEditor());
+  updated(o) {
+    (o.has("targetElement") || o.has("anchor")) && (this.startPositioning(), this.focusEditor());
   }
   focusEditor() {
-    const n = this.renderRoot.querySelector(
+    const o = this.renderRoot.querySelector(
       'slot[name="editor"]'
-    ), t = ((n == null ? void 0 : n.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
+    ), t = ((o == null ? void 0 : o.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
     t == null || t.focus();
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), (n = this.cleanup) == null || n.call(this), this.cleanup = void 0;
+    var o;
+    super.disconnectedCallback(), (o = this.cleanup) == null || o.call(this), this.cleanup = void 0;
   }
 };
-K([
-  f({ attribute: !1 })
-], z.prototype, "targetElement", 2);
-K([
-  f()
-], z.prototype, "value", 2);
-K([
-  F("[data-floating]")
-], z.prototype, "floating", 2);
-z = K([
-  A("llumi-comment-dialog")
-], z);
-var he = Object.defineProperty, ge = Object.getOwnPropertyDescriptor, X = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? ge(e, t) : e, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
-  return i && o && he(e, t, o), o;
+S.styles = [
+  C.styles,
+  F`
+			.floating {
+				z-index: calc(var(--review-z-index, 9998) + 1);
+			}
+			.panel {
+				position: relative;
+				width: 400px;
+				border-radius: 8px;
+				border: 1px solid #e4e4e7;
+				background-color: #fff;
+				box-shadow:
+					0 20px 25px -5px rgb(0 0 0 / 0.1),
+					0 8px 10px -6px rgb(0 0 0 / 0.1);
+				animation: llumi-fade-in 0.15s ease-out;
+			}
+			.delete-btn {
+				position: absolute;
+				top: 8px;
+				right: 8px;
+				z-index: 10;
+				display: flex;
+				align-items: center;
+				gap: 4px;
+				border-radius: 6px;
+				padding: 4px 6px;
+				color: #a1a1aa;
+				background-color: transparent;
+				border: 0;
+				margin: 0;
+				font-family: inherit;
+				cursor: pointer;
+				transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.delete-btn:hover {
+				background-color: #18181b;
+				color: #fff;
+			}
+			.icon {
+				display: block;
+			}
+			.icon svg {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+			.icon-14 {
+				width: 14px;
+				height: 14px;
+			}
+			.delete-label {
+				font-size: 0.75rem;
+				line-height: 1rem;
+				max-width: 0;
+				overflow: hidden;
+				transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+			}
+			.delete-btn:hover .delete-label {
+				max-width: 60px;
+			}
+			.editor-wrap {
+				padding: 12px;
+			}
+			@keyframes llumi-fade-in {
+				from {
+					opacity: 0;
+					transform: translateY(4px);
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0);
+				}
+			}
+		`
+];
+P([
+  v({ attribute: !1 })
+], S.prototype, "targetElement", 2);
+P([
+  v({ attribute: !1 })
+], S.prototype, "anchor", 2);
+P([
+  v()
+], S.prototype, "value", 2);
+P([
+  U("[data-floating]")
+], S.prototype, "floating", 2);
+S = P([
+  k("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;
 };
-let O = class extends E {
+let L = class extends C {
   constructor() {
-    super(...arguments), this.barElement = null, this.value = "", this.onDocKeydown = (n) => {
-      n.key === "Escape" && (n.preventDefault(), this.emitClose());
-    }, this.onDocPointerdown = (n) => {
-      const e = n.composedPath();
+    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
+    return w`<div
       data-floating
-      class="z-[calc(var(--review-z-index,9998)+1)]"
+      class="floating"
       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}>
+      <div class="panel">
+        <div class="editor-wrap" @change=${this.onEditorChange}>
           <slot name="editor">
             <llumi-default-editor
               .value=${this.value}
@@ -1182,10 +1451,10 @@ let O = class extends E {
       </div>
     </div>`;
   }
-  onEditorChange(n) {
-    if (typeof n.detail != "string") return;
-    const e = n.detail;
-    n.stopPropagation(), this.dispatchEvent(
+  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 })
     );
   }
@@ -1196,77 +1465,108 @@ let O = class extends E {
   }
   startPositioning() {
     var t;
-    const n = this.barElement, e = this.floating;
-    !n || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = vt(n, e, () => {
-      wt(n, e, {
+    const o = this.barElement, e = this.floating;
+    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = gt(o, e, () => {
+      ut(o, e, {
         placement: "top",
         middleware: [
-          bt(12),
-          xt({ padding: 16 }),
-          yt({ padding: 16, crossAxis: !0 }),
-          Ct({
+          pt(12),
+          ft({ padding: 16 }),
+          vt({ padding: 16, crossAxis: !0 }),
+          bt({
             padding: 16,
-            apply({ availableWidth: i, elements: o }) {
-              Object.assign(o.floating.style, {
-                maxWidth: `${Math.min(400, i)}px`
+            apply({ availableWidth: n, elements: i }) {
+              Object.assign(i.floating.style, {
+                maxWidth: `${Math.min(400, n)}px`
               });
             }
           })
         ]
-      }).then(({ x: i, y: o }) => {
-        Object.assign(e.style, { left: `${i}px`, top: `${o}px` });
+      }).then(({ x: n, y: i }) => {
+        Object.assign(e.style, { left: `${n}px`, top: `${i}px` });
       });
     }));
   }
   connectedCallback() {
     super.connectedCallback(), document.addEventListener("keydown", this.onDocKeydown), document.addEventListener("pointerdown", this.onDocPointerdown, !0);
   }
-  updated(n) {
-    n.has("barElement") && this.startPositioning();
+  updated(o) {
+    o.has("barElement") && this.startPositioning();
   }
   disconnectedCallback() {
-    var n;
-    super.disconnectedCallback(), (n = this.cleanup) == null || n.call(this), this.cleanup = void 0, document.removeEventListener("keydown", this.onDocKeydown), document.removeEventListener("pointerdown", this.onDocPointerdown, !0);
+    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);
   }
 };
-X([
-  f({ attribute: !1 })
-], O.prototype, "barElement", 2);
-X([
-  f()
-], O.prototype, "value", 2);
-X([
-  F("[data-floating]")
-], O.prototype, "floating", 2);
-O = X([
-  A("llumi-overall-comment-dialog")
-], O);
-var ue = Object.defineProperty, me = Object.getOwnPropertyDescriptor, Et = (n, e, t, i) => {
-  for (var o = i > 1 ? void 0 : i ? me(e, t) : e, r = n.length - 1, a; r >= 0; r--)
-    (a = n[r]) && (o = (i ? a(e, t, o) : a(o)) || o);
-  return i && o && ue(e, t, o), o;
+L.styles = [
+  C.styles,
+  F`
+			.floating {
+				z-index: calc(var(--review-z-index, 9998) + 1);
+			}
+			.panel {
+				width: 400px;
+				border-radius: 8px;
+				border: 1px solid #e4e4e7;
+				background-color: #fff;
+				box-shadow:
+					0 20px 25px -5px rgb(0 0 0 / 0.1),
+					0 8px 10px -6px rgb(0 0 0 / 0.1);
+				animation: llumi-fade-in 0.15s ease-out;
+			}
+			.editor-wrap {
+				padding: 12px;
+			}
+			@keyframes llumi-fade-in {
+				from {
+					opacity: 0;
+					transform: translateY(4px);
+				}
+				to {
+					opacity: 1;
+					transform: translateY(0);
+				}
+			}
+		`
+];
+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;
 };
-const pe = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 17a2 2 0 0 1-2 2H6.828a2 2 0 0 0-1.414.586l-2.202 2.202A.71.71 0 0 1 2 21.286V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2z'/%3E%3C/svg%3E";
-let ot = class extends E {
+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 {
   constructor() {
     super(...arguments), this.positions = [];
   }
   render() {
-    return v`${$t(
+    return w`${At(
       this.positions,
-      (n) => n.commentId,
-      (n) => v`<button
+      (o) => o.commentId,
+      (o) => w`<button
         type="button"
-        @click=${(e) => this.onClick(e, n.commentId)}
-        style=${Rt({
+        @click=${(e) => this.onClick(e, o.commentId)}
+        style=${Dt({
         position: "absolute",
-        top: `${n.top - 10}px`,
-        left: `${n.left + 2}px`,
+        top: `${o.top - 10}px`,
+        left: `${o.left + 2}px`,
         width: "20px",
         height: "20px",
         borderRadius: "50%",
         backgroundColor: "white",
-        backgroundImage: `url("${pe}")`,
+        backgroundImage: `url("${re}")`,
         backgroundSize: "12px 12px",
         backgroundRepeat: "no-repeat",
         backgroundPosition: "center",
@@ -1279,8 +1579,8 @@ let ot = class extends E {
       ></button>`
     )}`;
   }
-  onClick(n, e) {
-    n.stopPropagation(), this.dispatchEvent(
+  onClick(o, e) {
+    o.stopPropagation(), this.dispatchEvent(
       new CustomEvent("icon-click", {
         detail: e,
         bubbles: !0,
@@ -1289,84 +1589,158 @@ let ot = class extends E {
     );
   }
 };
-Et([
-  f({ attribute: !1 })
-], ot.prototype, "positions", 2);
-ot = Et([
-  A("llumi-selection-comment-icons")
-], ot);
-const R = "data-review-selectable", Z = "review-selection-commented", tt = "review-selection-editing", L = "review-selection-hover", fe = "$mod+Shift+M", ft = "data-llumi-review";
-let et = !1;
-function ve() {
-  if (et) return;
-  if (document.querySelector(`style[${ft}]`)) {
-    et = !0;
-    return;
-  }
-  const n = document.createElement("style");
-  n.setAttribute(ft, ""), n.textContent = Gt, document.head.append(n), et = !0;
-}
-function H() {
+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() {
   if (!(typeof CSS > "u"))
     return CSS.highlights;
 }
-function it(...n) {
+function et(...o) {
   return new Highlight(
-    ...n
+    ...o
   );
 }
-const st = class st extends HTMLElement {
+class se {
+  constructor(e) {
+    this.ranges = /* @__PURE__ */ new Map(), this.repositionRaf = 0, 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);
+          r && t.push(r);
+        }
+        this.ctx.icons.positions = t;
+      }));
+    }, this.ctx = e;
+  }
+  /** Read accessor: the element's pointer hit-testing iterates this. */
+  get rangeMap() {
+    return this.ranges;
+  }
+  /**
+   * Rebuild the commented/editing highlight registries, the `rangeMap`, and
+   * the icon positions from the given selection comments + the machine
+   * snapshot's `editingCommentId` / `comments` (the editing range may belong
+   * to a comment whose content is not yet committed, hence the fallback).
+   */
+  update(e) {
+    const t = tt();
+    if (!t) return;
+    const n = et(), i = et(), r = /* @__PURE__ */ new Map(), s = [], a = this.ctx.getSnapshot();
+    for (const h of e) {
+      if (!h.selection) continue;
+      const u = this.ctx.host.querySelector(
+        `[${z}="${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);
+    }
+    const l = a.editingCommentId;
+    if (l && !r.has(l)) {
+      const h = a.comments.find(
+        (u) => u.commentId === l
+      );
+      if (h != null && h.selection) {
+        const u = this.ctx.host.querySelector(
+          `[${z}="${h.targetId}"]`
+        );
+        if (u) {
+          const p = Q(u, h.selection);
+          p && i.add(p);
+        }
+      }
+    }
+    this.ranges = r, t.set(
+      ht,
+      n
+    ), t.set(mt, i), this.ctx.icons.positions = s;
+  }
+  // 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 ? {
+      commentId: e,
+      top: i.top + window.scrollY,
+      left: i.right + window.scrollX
+    } : null;
+  }
+  /** 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 = [];
+  }
+  /** Capture-phase scroll + resize listeners, so icons recompute on any scroll. */
+  attachListeners() {
+    window.addEventListener("scroll", this.reposition, !0), window.addEventListener("resize", this.reposition);
+  }
+  /** Remove listeners and cancel any pending rAF. */
+  detachListeners() {
+    window.removeEventListener("scroll", this.reposition, !0), window.removeEventListener("resize", this.reposition), this.repositionRaf && cancelAnimationFrame(this.repositionRaf);
+  }
+}
+const ae = "$mod+Shift+M", it = class it extends HTMLElement {
   constructor() {
-    super(...arguments), this.persistence = ut, this.manager = null, this.rangeMap = /* @__PURE__ */ new Map(), this.hoveredComment = null, this.selectionJustHandled = !1, this.selectionComments = [], this.commentDialog = null, this.overallDialog = null, this.onPointerUp = () => {
+    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 = () => {
       if (!this.isAnnotating()) return;
       const e = window.getSelection();
       if (!e || e.isCollapsed || e.rangeCount === 0)
         return;
-      const t = e.getRangeAt(0), i = Q(t.startContainer);
-      if (!i) return;
-      const o = Q(t.endContainer);
-      if (o && o !== i) {
+      const t = e.getRangeAt(0), n = Y(t.startContainer);
+      if (!n) return;
+      const i = Y(t.endContainer);
+      if (i && i !== n) {
         e.removeAllRanges();
         return;
       }
-      if (!o || !Bt(e, i)) {
-        const s = Yt(e, i);
-        if (!s) return;
-        e.removeAllRanges(), e.addRange(s);
+      if (!i || !Ft(e, n)) {
+        const a = Ut(e, n);
+        if (!a) return;
+        e.removeAllRanges(), e.addRange(a);
       }
-      const r = i.getAttribute(R);
+      const r = n.getAttribute(z);
       if (!r) return;
-      const a = Vt(i);
-      a && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
+      const s = zt(n);
+      s && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
         type: "SELECT_TEXT",
         targetId: r,
-        targetElement: i,
-        selectionRange: a
+        targetElement: n,
+        selectionRange: s
       }));
     }, this.onPointerMove = (e) => {
       if (!this.isAnnotating()) return;
-      const t = H();
+      const t = tt();
       if (!t) return;
-      const i = this.caretPosition(e.clientX, e.clientY);
-      if (!i) {
-        this.hoveredComment && (t.delete(L), this.hoveredComment = null);
+      const n = this.caretPosition(e.clientX, e.clientY);
+      if (!n) {
+        this.hoveredComment && (t.delete(G), this.hoveredComment = null);
         return;
       }
-      let o = null;
-      for (const [r, a] of this.rangeMap)
-        if (a.isPointInRange(i.offsetNode, i.offset)) {
-          o = r;
+      let i = null;
+      for (const [r, s] of this.painter.rangeMap)
+        if (s.isPointInRange(n.offsetNode, n.offset)) {
+          i = r;
           break;
         }
-      if (o !== this.hoveredComment)
-        if (this.hoveredComment = o, o) {
-          const r = this.rangeMap.get(o);
+      if (i !== this.hoveredComment)
+        if (this.hoveredComment = i, i) {
+          const r = this.painter.rangeMap.get(i);
           r && t.set(
-            L,
-            it(r)
+            G,
+            et(r)
           );
         } else
-          t.delete(L);
+          t.delete(G);
     }, this.onClickCapture = (e) => {
       if (!this.isAnnotating() || e.defaultPrevented) return;
       if (this.selectionJustHandled) {
@@ -1375,40 +1749,40 @@ const st = class st extends HTMLElement {
       }
       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 u = this.selectionComments.find(
-              (b) => b.commentId === s
+      const n = this.caretPosition(e.clientX, e.clientY);
+      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
             );
+            if (!h) continue;
+            const u = Y(n.offsetNode);
             if (!u) continue;
-            const m = Q(i.offsetNode);
-            if (!m) continue;
             e.stopPropagation(), e.preventDefault(), this.actor.send({
               type: "CLICK",
-              targetId: u.targetId,
-              element: m,
-              selectionCommentId: s
+              targetId: h.targetId,
+              element: u,
+              selectionCommentId: a
             });
             return;
           }
       }
-      const o = e.target, a = o.closest(
+      const i = e.target, s = i.closest(
         ".review-highlight-hover, .review-highlight-commented, .review-highlight-editing"
       );
-      if (a && this.contains(a)) {
+      if (s && this.contains(s)) {
         e.stopPropagation(), e.preventDefault();
-        const s = N(o, this.customTargets);
-        s ? this.actor.send({
+        const a = _(i, this.customTargets);
+        a ? this.actor.send({
           type: "CLICK",
-          targetId: s.targetId,
-          element: s.element
+          targetId: a.targetId,
+          element: a.element
         }) : this.actor.send({ type: "CLICK" });
       }
     }, this.onWrapperClick = (e) => {
       if (!this.contains(e.target) || !this.isAnnotating()) return;
-      const t = N(e.target, this.customTargets);
+      const t = _(e.target, this.customTargets);
       t ? (e.stopPropagation(), e.preventDefault(), this.actor.send({
         type: "CLICK",
         targetId: t.targetId,
@@ -1417,40 +1791,40 @@ const st = class st extends HTMLElement {
     }, this.onMouseOver = (e) => {
       const t = this.manager;
       if (!t || !this.isAnnotating()) return;
-      const i = this.currentEditingTargetId(), o = N(
+      const n = this.currentEditingTargetId(), i = _(
         e.target,
         this.customTargets
       );
-      if (o) {
-        t.applyHover(o.element, i);
+      if (i) {
+        t.applyHover(i.element, n);
         return;
       }
       const r = e.target.closest(
         "[data-review-selectable]"
       );
-      r && t.applyHover(r, i);
+      r && t.applyHover(r, n);
     }, this.onMouseOut = (e) => {
       const t = this.manager;
       if (!t || !this.isAnnotating()) return;
-      const i = this.currentEditingTargetId(), o = /* @__PURE__ */ new Set();
-      for (const s of this.actor.getSnapshot().context.comments)
-        !s.selection && s.content.trim() && o.add(s.targetId);
-      const r = N(
+      const n = this.currentEditingTargetId(), i = /* @__PURE__ */ new Set();
+      for (const a of this.actor.getSnapshot().context.comments)
+        !a.selection && a.content.trim() && i.add(a.targetId);
+      const r = _(
         e.target,
         this.customTargets
       );
       if (r) {
-        t.clearHover(r.element, i, o);
+        t.clearHover(r.element, n, i);
         return;
       }
-      const a = e.target.closest(
+      const s = e.target.closest(
         "[data-review-selectable]"
       );
-      a && t.clearHover(a, i);
+      s && t.clearHover(s, n, i);
     };
   }
   get shortcut() {
-    return this.getAttribute("shortcut") ?? fe;
+    return this.getAttribute("shortcut") ?? ae;
   }
   get barPosition() {
     return this.getAttribute("bar-position") ?? "bottom-center";
@@ -1463,11 +1837,11 @@ const st = class st extends HTMLElement {
     return e != null && e.trim() ? e : null;
   }
   connectedCallback() {
-    ve(), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
+    Tt("review", Nt), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
     const e = this.buildHighlightCallbacks();
-    this.persistence = this.persistKey ? qt(this.persistKey) : ut;
-    const t = Kt();
-    this.actor = zt(t, {
+    this.persistence = this.persistKey ? Ht(this.persistKey) : ct;
+    const t = Mt();
+    this.actor = St(t, {
       input: {
         shortcut: this.shortcut,
         initialData: this.initialData,
@@ -1475,13 +1849,16 @@ const st = class st extends HTMLElement {
         highlights: e,
         persistence: this.persistence
       }
-    }), this.actor.on("REVIEW_CHANGED", (i) => this.emitChange(i.result)), this.actor.on("REVIEW_SUBMITTED", (i) => this.emitSubmit(i.result)), this.mountChrome(), this.actor.subscribe(() => this.syncFromSnapshot()), this.actor.start(), this.manager = Ht(this, this.customTargets), this.actor.send({ type: "MOUNTED" }), this.addEventListener("pointerup", this.onPointerUp), this.addEventListener("pointermove", this.onPointerMove), this.addEventListener("click", this.onClickCapture, !0), this.addEventListener("click", this.onWrapperClick), this.addEventListener("mouseover", this.onMouseOver), this.addEventListener("mouseout", this.onMouseOut), this.syncFromSnapshot();
+    }), 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({
+      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();
   }
   disconnectedCallback() {
-    var t, i, o, 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(Z), e.delete(tt), e.delete(L)), this.icons && (this.icons.positions = []), (t = this.manager) == null || t.destroy(), this.manager = null, (i = this.actor) == null || i.stop(), (o = this.bar) == null || o.remove(), (r = this.commentDialog) == null || r.remove(), (a = this.overallDialog) == null || a.remove(), (s = this.icons) == null || s.remove();
+    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();
   }
   attributeChangedCallback() {
     this.bar && (this.bar.barPosition = this.barPosition);
@@ -1489,7 +1866,11 @@ const st = class st extends HTMLElement {
   buildDetailResult(e) {
     return e.status === "commented" ? {
       ...e,
-      comments: ee(e.comments, this)
+      comments: qt(
+        e.comments,
+        this,
+        this.customTargets
+      )
     } : e;
   }
   emitChange(e) {
@@ -1517,6 +1898,18 @@ const st = class st extends HTMLElement {
   clearPersisted() {
     this.persistence.clear();
   }
+  // Build a floating-ui virtual reference that tracks a selection's live rect.
+  // `contextElement` lets autoUpdate find the right scroll ancestors. Returns
+  // 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);
+    return n ? {
+      getBoundingClientRect: () => n.getBoundingClientRect(),
+      getClientRects: () => n.getClientRects(),
+      contextElement: e
+    } : null;
+  }
   // --- chrome lifecycle ---
   mountChrome() {
     this.bar = document.createElement("llumi-review-bar"), this.bar.barPosition = this.barPosition, this.bar.addEventListener(
@@ -1538,26 +1931,26 @@ const st = class st extends HTMLElement {
     ), document.body.append(this.icons);
   }
   onIconClick(e) {
-    const t = this.actor.getSnapshot().context.comments.find((o) => o.commentId === e);
+    const t = this.actor.getSnapshot().context.comments.find((i) => i.commentId === e);
     if (!t) return;
-    const i = this.querySelector(
-      `[${R}="${t.targetId}"]`
+    const n = this.querySelector(
+      `[${z}="${t.targetId}"]`
     );
-    i && this.actor.send({
+    n && this.actor.send({
       type: "CLICK",
       targetId: t.targetId,
-      element: i,
+      element: n,
       selectionCommentId: e
     });
   }
-  // --- snapshot → UI sync (replaces review.component.tsx render) ---
+  // --- snapshot → UI sync ---
   syncFromSnapshot() {
-    const e = this.actor.getSnapshot(), { comments: t, overallComment: i, editingCommentId: o, targetElement: r } = e.context;
+    const e = this.actor.getSnapshot(), { comments: t, overallComment: n, editingCommentId: i, 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 = o ? t.find((g) => g.commentId === o) : null, u = s && o === null, m = t.filter((g) => g.content.trim()).length, b = i.trim().length > 0;
-    this.bar.mode = a ? l ? "editing" : "commenting" : "idle", this.bar.commentCount = m, this.bar.hasOverallComment = b, this.bar.overallCommentOpen = u, this.icons.style.display = a ? "" : "none", s && l && r ? (this.commentDialog || (this.commentDialog = document.createElement(
+    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(
       "llumi-comment-dialog"
     ), this.commentDialog.addEventListener(
       "change",
@@ -1571,7 +1964,7 @@ const st = class st extends HTMLElement {
     ), 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), u ? (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), h ? (this.overallDialog || (this.overallDialog = document.createElement(
       "llumi-overall-comment-dialog"
     ), this.overallDialog.addEventListener(
       "change",
@@ -1582,9 +1975,9 @@ const st = class st extends HTMLElement {
     ), 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();
+    ), document.body.append(this.overallDialog)), this.overallDialog.barElement = this.bar.barRoot, this.overallDialog.value = n) : this.overallDialog && (this.overallDialog.remove(), this.overallDialog = null), s && this.painter.update(this.selectionComments);
   }
-  // --- highlight callbacks (port of use-review.ts `highlights`) ---
+  // --- highlight callbacks ---
   buildHighlightCallbacks() {
     return {
       activate: (e) => {
@@ -1592,16 +1985,13 @@ const st = class st extends HTMLElement {
         t && (t.activate(e), t.startObserving({
           editingTarget: this.actor.getSnapshot().context.targetElement,
           onTargetDisconnected: () => this.actor.send({ type: "CLOSE" }),
-          onSelectableReconnected: () => this.updateSelectionHighlights(),
+          onSelectableReconnected: () => this.painter.update(this.selectionComments),
           commentedIds: e
         }));
       },
       deactivate: () => {
         const e = this.manager;
-        if (!e) return;
-        e.deactivate(), e.stopObserving();
-        const t = H();
-        t && (t.delete(Z), t.delete(tt), t.delete(L)), this.rangeMap.clear(), this.icons.positions = [];
+        e && (e.deactivate(), e.stopObserving(), this.painter.clear());
       },
       reveal: (e) => {
         var t;
@@ -1612,66 +2002,25 @@ const st = class st extends HTMLElement {
         return (e = this.manager) == null ? void 0 : e.unreveal();
       },
       setEditing: (e, t) => {
-        var i;
-        (i = this.manager) == null || i.setEditing(e, t), this.updateSelectionHighlights();
+        var n;
+        (n = this.manager) == null || n.setEditing(e, t), this.painter.update(this.selectionComments);
       },
       clearEditing: (e, t) => {
-        var i;
-        (i = this.manager) == null || i.clearEditing(e, t), this.updateSelectionHighlights();
+        var n;
+        (n = this.manager) == null || n.clearEditing(e, t), this.painter.update(this.selectionComments);
       }
     };
   }
-  // --- selection highlight painting (port of updateSelectionHighlights) ---
-  updateSelectionHighlights() {
-    const e = H();
-    if (!e) return;
-    const t = it(), i = it(), o = /* @__PURE__ */ new Map(), r = [], a = this.actor.getSnapshot().context;
-    for (const l of this.selectionComments) {
-      if (!l.selection) continue;
-      const u = this.querySelector(
-        `[${R}="${l.targetId}"]`
-      );
-      if (!u) continue;
-      const m = mt(u, l.selection);
-      if (!m) continue;
-      o.set(l.commentId, m), l.commentId === a.editingCommentId ? i.add(m) : t.add(m);
-      const b = m.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 && !o.has(s)) {
-      const l = a.comments.find(
-        (u) => u.commentId === s
-      );
-      if (l != null && l.selection) {
-        const u = this.querySelector(
-          `[${R}="${l.targetId}"]`
-        );
-        if (u) {
-          const m = mt(u, l.selection);
-          m && i.add(m);
-        }
-      }
-    }
-    this.rangeMap = o, e.set(
-      Z,
-      t
-    ), e.set(tt, 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;
+      const n = document.caretPositionFromPoint(e, t);
+      if (n) return n;
     } else if ("caretRangeFromPoint" in document) {
-      const i = document.caretRangeFromPoint(e, t);
-      if (i) return { offsetNode: i.startContainer, offset: i.startOffset };
+      const n = document.caretRangeFromPoint(e, t);
+      if (n) return { offsetNode: n.startContainer, offset: n.startOffset };
     }
     return null;
   }
@@ -1679,17 +2028,17 @@ const st = class st extends HTMLElement {
     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;
+      return ((t = e.comments.find((n) => n.commentId === e.editingCommentId)) == null ? void 0 : t.targetId) ?? void 0;
   }
 };
-st.observedAttributes = ["bar-position", "shortcut", "default-mode"];
-let rt = st;
-customElements.get("llumi-review") || customElements.define("llumi-review", rt);
+it.observedAttributes = ["bar-position", "shortcut", "default-mode"];
+let nt = it;
+customElements.get("llumi-review") || customElements.define("llumi-review", nt);
 export {
-  z as LlumiCommentDialog,
-  S as LlumiDefaultEditor,
-  O as LlumiOverallCommentDialog,
-  rt as LlumiReview,
-  w as LlumiReviewBar,
-  ot as LlumiSelectionCommentIcons
+  S as LlumiCommentDialog,
+  I as LlumiDefaultEditor,
+  L as LlumiOverallCommentDialog,
+  nt as LlumiReview,
+  b as LlumiReviewBar,
+  Z as LlumiSelectionCommentIcons
 };