@llumi/design-system 1.0.1 → 2.1.0

package/review.mjs

@@ -0,0 +1,2044 @@
+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-D9108lqB.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-BaUbjt-v.js";
+import { L as C } from "./llumi-element-BWRwgzW5.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.1.0 | (c) 2026 pAIrprog SAS | license: https://cdn.jsdelivr.net/npm/@llumi/design-system@2.1.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 n of e ?? [])
+    if (o.matches(n.selector)) {
+      const i = n.toId(o);
+      if (i) return i;
+    }
+  return null;
+}
+function _(o, e) {
+  const t = o.closest("[data-review-id]");
+  if (t) {
+    const n = t.getAttribute("data-review-id");
+    if (n) return { element: t, targetId: n };
+  }
+  for (const n of e ?? []) {
+    const i = o.closest(n.selector);
+    if (i) {
+      const r = n.toId(i);
+      if (r) return { element: i, targetId: r };
+    }
+  }
+  return null;
+}
+function D(o, e) {
+  const t = /* @__PURE__ */ new Set(), n = [];
+  for (const i of Array.from(
+    o.querySelectorAll("[data-review-id]")
+  )) {
+    const r = i.getAttribute("data-review-id");
+    if (!r) continue;
+    const s = i.hasAttribute("data-review-selectable");
+    n.push({
+      element: i,
+      targetId: r,
+      kind: s ? "both" : "element"
+    }), t.add(i);
+  }
+  for (const i of e ?? [])
+    for (const r of Array.from(
+      o.querySelectorAll(i.selector)
+    )) {
+      if (t.has(r)) continue;
+      const s = i.toId(r);
+      if (!s) continue;
+      const a = r.hasAttribute("data-review-selectable");
+      n.push({
+        element: r,
+        targetId: s,
+        kind: a ? "both" : "element"
+      }), t.add(r);
+    }
+  for (const i of Array.from(
+    o.querySelectorAll("[data-review-selectable]")
+  )) {
+    if (t.has(i)) continue;
+    const r = i.getAttribute("data-review-selectable");
+    r && (n.push({ element: i, targetId: r, kind: "selectable" }), t.add(i));
+  }
+  return n;
+}
+const J = "review-highlight-hover", y = "review-highlight-commented", $ = "review-highlight-editing", H = "review-highlight-uncommented", j = "review-target", lt = "review-active";
+function q(o) {
+  o.classList.remove(
+    J,
+    y,
+    $,
+    H
+  );
+}
+function kt(o, e) {
+  let t = null, n = null, i = null;
+  function r(c) {
+    o.classList.add(lt);
+    const m = D(o, e);
+    for (const { element: f, targetId: d, kind: O } of m)
+      (O === "element" || O === "both") && (f.hasAttribute("data-review-id") || f.classList.add(j), c.has(d) && f.classList.add(y));
+  }
+  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 f)
+        d.classList.contains($) || d.classList.remove(H);
+    }, 500));
+  }
+  function l() {
+    t && (clearTimeout(t), t = null);
+    const c = D(o, e);
+    for (const { element: m } of c)
+      m.classList.remove(H);
+  }
+  function h(c, m) {
+    m || (q(c), c.classList.add($));
+  }
+  function u(c, m) {
+    q(c), m && c.classList.add(y);
+  }
+  function p(c, m) {
+    (at(c, e) ?? c.getAttribute("data-review-selectable")) !== m && c.classList.add(J);
+  }
+  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 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;
+          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(f.addedNodes)) {
+          if (!(d instanceof HTMLElement)) continue;
+          const O = [
+            ...d.matches("[data-review-id]") ? [d] : [],
+            ...Array.from(
+              d.querySelectorAll("[data-review-id]")
+            )
+          ];
+          for (const T of O) {
+            const R = T.getAttribute("data-review-id");
+            R && c.commentedIds.has(R) && T.classList.add(y);
+          }
+          for (const T of e ?? []) {
+            const R = [
+              ...d.matches(T.selector) ? [d] : [],
+              ...Array.from(d.querySelectorAll(T.selector))
+            ];
+            for (const X of R) {
+              const ot = T.toId(X);
+              X.classList.add(j), ot && c.commentedIds.has(ot) && X.classList.add(y);
+            }
+          }
+          (d.hasAttribute("data-review-selectable") || d.querySelector("[data-review-selectable]") !== null) && c.onSelectableReconnected();
+        }
+      }
+    }), n.observe(o, { childList: !0, subtree: !0 });
+  }
+  function W() {
+    n && (n.disconnect(), n = null), i = null;
+  }
+  function wt() {
+    s(), W();
+  }
+  return {
+    activate: r,
+    deactivate: s,
+    reveal: a,
+    unreveal: l,
+    setEditing: h,
+    clearEditing: u,
+    applyHover: p,
+    clearHover: g,
+    startObserving: Et,
+    stopObserving: W,
+    destroy: wt
+  };
+}
+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(),
+    targetId: e,
+    content: "",
+    createdAt: (/* @__PURE__ */ new Date()).toISOString()
+  }, isNew: !0 };
+}
+function Rt(o) {
+  let e = o.comments;
+  if (o.editingCommentId !== null) {
+    const t = e.find(
+      (n) => n.commentId === o.editingCommentId
+    );
+    t && t.content === "" && (e = e.filter(
+      (n) => n.commentId !== o.editingCommentId
+    ));
+  }
+  return {
+    comments: e,
+    editingCommentId: null,
+    targetElement: null,
+    selectionRange: null
+  };
+}
+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: n ? o.overallComment.trim() : void 0
+  };
+}
+function _t(o) {
+  const e = /* @__PURE__ */ new Set();
+  for (const t of o.comments)
+    !t.selection && t.content.trim() && e.add(t.targetId);
+  return e;
+}
+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" }));
+      }, s = (l) => {
+        l.key === "Alt" && t({ type: "RELEASE_ANNOTATE" });
+      }, a = Lt(window, {
+        [n.shortcut]: (l) => {
+          l.preventDefault(), t({ type: "TOGGLE" });
+        },
+        "$mod+Enter": (l) => {
+          l.preventDefault(), t({ type: "CLOSE" });
+        },
+        "$mod+Shift+Backspace": (l) => {
+          l.preventDefault(), t({ type: "DELETE" });
+        },
+        Escape: (l) => {
+          l.preventDefault(), t({ type: "CLOSE" });
+        }
+      });
+      return window.addEventListener("keydown", r), window.addEventListener("keyup", s), window.addEventListener("blur", i), () => {
+        a(), window.removeEventListener("keydown", r), window.removeEventListener("keyup", s), window.removeEventListener("blur", i);
+      };
+    }
+  ), 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 i.observe(n.wrapperElement, { childList: !0, subtree: !0 }), () => i.disconnect();
+  });
+  return xt({
+    types: {
+      context: {},
+      events: {},
+      input: {},
+      emitted: {}
+    },
+    actors: {
+      keyboardActor: o,
+      mutationObserverActor: e
+    },
+    guards: {
+      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: 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 !!i && i.targetId === n.targetId && !i.selection;
+        }
+        return !1;
+      }
+    },
+    delays: {
+      flashDuration: 500
+    },
+    actions: {
+      openElementComment: E(({ context: t, event: n }) => {
+        if (n.type !== "CLICK" || !n.targetId) return {};
+        const { comment: i, isNew: r } = Pt(
+          t.comments,
+          n.targetId
+        );
+        return {
+          comments: r ? [...t.comments, i] : t.comments,
+          editingCommentId: i.commentId,
+          targetElement: n.element ?? null,
+          selectionRange: null
+        };
+      }),
+      openSelectionComment: E(({ event: t }) => t.type !== "CLICK" || !t.selectionCommentId ? {} : {
+        editingCommentId: t.selectionCommentId,
+        targetElement: t.element ?? null,
+        selectionRange: null
+      }),
+      createSelectionComment: E(({ context: t, event: n }) => {
+        if (n.type !== "SELECT_TEXT") return {};
+        const i = {
+          commentId: crypto.randomUUID(),
+          targetId: n.targetId,
+          content: "",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString(),
+          selection: n.selectionRange
+        };
+        return {
+          comments: [...t.comments, i],
+          editingCommentId: i.commentId,
+          targetElement: n.targetElement,
+          selectionRange: n.selectionRange
+        };
+      }),
+      updateContent: E(({ context: t, event: n }) => n.type !== "COMMENT_CHANGE" ? {} : t.editingCommentId === null ? { overallComment: n.content } : {
+        comments: t.comments.map(
+          (i) => i.commentId === t.editingCommentId ? { ...i, content: n.content } : i
+        )
+      }),
+      deleteComment: E(({ context: t }) => ({
+        comments: t.comments.filter(
+          (n) => n.commentId !== t.editingCommentId
+        ),
+        editingCommentId: null,
+        targetElement: null,
+        selectionRange: null
+      })),
+      cleanup: E(({ context: t }) => Rt(t)),
+      emitChanged: st(({ context: t }) => ({
+        type: "REVIEW_CHANGED",
+        result: B(t)
+      })),
+      persistSave: ({ context: t }) => {
+        t.persistence.save(B(t));
+      },
+      emitSubmitted: st(({ context: t }) => ({
+        type: "REVIEW_SUBMITTED",
+        result: B(t)
+      })),
+      // Highlight lifecycle actions — call manager methods directly via
+      // callbacks passed through input. The machine owns WHEN highlights
+      // change; the manager owns HOW (DOM manipulation).
+      // Actions run synchronously during transitions — no timing gap.
+      // Never add useEffects that react to derived machine state.
+      highlightsActivate: ({ context: t }) => {
+        t.highlights.activate(_t(t));
+      },
+      highlightsDeactivate: ({ context: t }) => {
+        t.highlights.deactivate();
+      },
+      highlightsRevealFlash: ({ context: t }) => {
+        t.highlights.reveal(!0);
+      },
+      highlightsReveal: ({ context: t }) => {
+        t.highlights.reveal(!1);
+      },
+      highlightsUnreveal: ({ context: t }) => {
+        t.highlights.unreveal();
+      },
+      editingTargetSet: ({ context: t }) => {
+        var i;
+        if (!t.targetElement) return;
+        const n = !!((i = t.comments.find(
+          (r) => r.commentId === t.editingCommentId
+        )) != null && i.selection);
+        t.highlights.setEditing(t.targetElement, n);
+      },
+      editingTargetCleared: ({ context: t }) => {
+        if (!t.targetElement) return;
+        const n = t.comments.find(
+          (i) => i.commentId === t.editingCommentId
+        );
+        t.highlights.clearEditing(
+          t.targetElement,
+          !!(n != null && n.content.trim())
+        );
+      }
+    }
+  }).createMachine({
+    id: "review",
+    type: "parallel",
+    context: ({ input: t }) => {
+      const n = t.persistence.load() ?? t.initialData, i = (n == null ? void 0 : n.status) === "commented" ? n.comments ?? [] : [], r = (n == null ? void 0 : n.status) === "commented" ? n.overallComment ?? "" : "";
+      return {
+        comments: i,
+        overallComment: r,
+        editingCommentId: null,
+        targetElement: null,
+        selectionRange: null,
+        shortcut: t.shortcut,
+        defaultMode: t.defaultMode,
+        highlights: t.highlights,
+        persistence: t.persistence
+      };
+    },
+    invoke: {
+      id: "keyboard",
+      src: "keyboardActor",
+      input: ({ context: t }) => ({ shortcut: t.shortcut })
+    },
+    states: {
+      annotating: {
+        initial: "waitingForMount",
+        on: {
+          SUBMIT: ".inactive"
+        },
+        states: {
+          waitingForMount: {
+            on: {
+              MOUNTED: [
+                {
+                  guard: ({ context: t }) => t.defaultMode === "annotating",
+                  target: "toggled"
+                },
+                { target: "inactive" }
+              ]
+            }
+          },
+          inactive: {
+            on: {
+              TOGGLE: "toggled",
+              HOLD_ANNOTATE: "held"
+            }
+          },
+          toggled: {
+            initial: "flashing",
+            entry: "highlightsActivate",
+            exit: "highlightsDeactivate",
+            on: {
+              TOGGLE: {
+                target: "inactive",
+                actions: It(({ enqueue: t, check: n }) => {
+                  n("isCommentingEditing") && t.raise({ type: "CLOSE" });
+                })
+              }
+            },
+            states: {
+              flashing: {
+                entry: "highlightsRevealFlash",
+                exit: "highlightsUnreveal",
+                after: {
+                  flashDuration: "ready"
+                },
+                on: {
+                  HOLD_ANNOTATE: "revealing"
+                }
+              },
+              ready: {
+                on: {
+                  HOLD_ANNOTATE: "revealing"
+                }
+              },
+              revealing: {
+                entry: "highlightsReveal",
+                exit: "highlightsUnreveal",
+                on: {
+                  RELEASE_ANNOTATE: "ready"
+                }
+              }
+            }
+          },
+          held: {
+            initial: "revealing",
+            entry: "highlightsActivate",
+            exit: "highlightsDeactivate",
+            states: {
+              revealing: {
+                entry: "highlightsReveal",
+                exit: "highlightsUnreveal",
+                on: {
+                  RELEASE_ANNOTATE: [
+                    { guard: "isCommentingEditing", target: "lingering" },
+                    { target: "#review.annotating.inactive" }
+                  ]
+                }
+              },
+              lingering: {
+                on: {
+                  CLOSE: "#review.annotating.inactive",
+                  DELETE: "#review.annotating.inactive"
+                }
+              }
+            }
+          }
+        }
+      },
+      commenting: {
+        initial: "idle",
+        states: {
+          idle: {
+            on: {
+              CLICK: [
+                {
+                  guard: "hasSelectionCommentId",
+                  target: "editing.selection",
+                  actions: ["openSelectionComment", "editingTargetSet"]
+                },
+                {
+                  guard: "hasTargetId",
+                  target: "editing.element",
+                  actions: ["openElementComment", "editingTargetSet"]
+                }
+              ],
+              SELECT_TEXT: {
+                target: "editing.selection",
+                actions: ["createSelectionComment", "editingTargetSet"]
+              },
+              OPEN_OVERALL: {
+                target: "editing.element",
+                actions: E({
+                  editingCommentId: null,
+                  targetElement: null,
+                  selectionRange: null
+                })
+              },
+              SUBMIT: {
+                actions: ["emitSubmitted"]
+              }
+            }
+          },
+          editing: {
+            initial: "element",
+            on: {
+              CLICK: [
+                { guard: "isSameComment" },
+                {
+                  guard: "hasSelectionCommentId",
+                  target: ".selection",
+                  reenter: !0,
+                  actions: [
+                    "editingTargetCleared",
+                    "cleanup",
+                    "openSelectionComment",
+                    "editingTargetSet"
+                  ]
+                },
+                {
+                  guard: "hasTargetId",
+                  target: ".element",
+                  reenter: !0,
+                  actions: [
+                    "editingTargetCleared",
+                    "cleanup",
+                    "openElementComment",
+                    "editingTargetSet"
+                  ]
+                },
+                {
+                  guard: "hasNoTarget",
+                  target: "idle",
+                  actions: [
+                    "editingTargetCleared",
+                    "cleanup",
+                    "emitChanged",
+                    "persistSave"
+                  ]
+                }
+              ],
+              SELECT_TEXT: {
+                target: ".selection",
+                reenter: !0,
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  "createSelectionComment",
+                  "editingTargetSet"
+                ]
+              },
+              COMMENT_CHANGE: {
+                actions: ["updateContent", "emitChanged", "persistSave"]
+              },
+              DELETE: {
+                target: "idle",
+                actions: [
+                  "editingTargetCleared",
+                  "deleteComment",
+                  "emitChanged",
+                  "persistSave"
+                ]
+              },
+              CLOSE: {
+                target: "idle",
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  "emitChanged",
+                  "persistSave"
+                ]
+              },
+              TARGET_DISCONNECTED: {
+                target: "idle",
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  "emitChanged",
+                  "persistSave"
+                ]
+              },
+              SUBMIT: {
+                target: "idle",
+                actions: ["editingTargetCleared", "cleanup", "emitSubmitted"]
+              },
+              OPEN_OVERALL: {
+                target: ".element",
+                reenter: !0,
+                actions: [
+                  "editingTargetCleared",
+                  "cleanup",
+                  E({
+                    editingCommentId: null,
+                    targetElement: null,
+                    selectionRange: null
+                  })
+                ]
+              }
+            },
+            states: {
+              element: {},
+              selection: {}
+            }
+          }
+        }
+      }
+    }
+  });
+}
+const ct = {
+  load: () => {
+  },
+  save: () => {
+  },
+  clear: () => {
+  }
+};
+function V() {
+  try {
+    return typeof localStorage > "u" ? void 0 : localStorage;
+  } catch {
+    return;
+  }
+}
+function $t(o) {
+  if (typeof o != "object" || o === null) return !1;
+  const e = o.status;
+  return e === "approved" || e === "commented";
+}
+function Ht(o) {
+  return {
+    load() {
+      const e = V();
+      if (e)
+        try {
+          const t = e.getItem(o);
+          if (t === null) return;
+          const n = JSON.parse(t);
+          return $t(n) ? n : void 0;
+        } catch {
+          return;
+        }
+    },
+    save(e) {
+      const t = V();
+      if (t)
+        try {
+          if (e.status === "approved") {
+            t.removeItem(o);
+            return;
+          }
+          t.setItem(o, JSON.stringify(e));
+        } catch {
+        }
+    },
+    clear() {
+      const e = V();
+      if (e)
+        try {
+          e.removeItem(o);
+        } catch {
+        }
+    }
+  };
+}
+const Gt = 3;
+function zt(o) {
+  const e = window.getSelection();
+  if (!e || e.isCollapsed || e.rangeCount === 0)
+    return null;
+  const t = e.getRangeAt(0), n = t.toString();
+  if (n.length < Gt) return null;
+  const i = Kt(
+    o,
+    t.startContainer,
+    t.startOffset
+  ), r = i + n.length;
+  if (i < 0) return null;
+  const s = Wt(
+    o.textContent ?? "",
+    n,
+    i
+  );
+  return { startOffset: i, endOffset: r, selectedText: n, matchIndex: s };
+}
+function Q(o, e) {
+  const t = o.textContent ?? "";
+  if (t.slice(
+    e.startOffset,
+    e.endOffset
+  ) === e.selectedText)
+    return dt(
+      o,
+      e.startOffset,
+      e.endOffset
+    );
+  const i = Xt(
+    t,
+    e.selectedText,
+    e.matchIndex
+  );
+  return i < 0 ? null : dt(
+    o,
+    i,
+    i + e.selectedText.length
+  );
+}
+function Ft(o, e) {
+  if (o.isCollapsed || o.rangeCount === 0) return !1;
+  const t = o.getRangeAt(0);
+  return e.contains(t.startContainer) && e.contains(t.endContainer);
+}
+function Y(o) {
+  const e = o instanceof HTMLElement ? o : o.parentElement;
+  return (e == null ? void 0 : e.closest("[data-review-selectable]")) ?? null;
+}
+function Ut(o, e) {
+  var s;
+  if (o.isCollapsed || o.rangeCount === 0) return null;
+  const t = o.getRangeAt(0), n = t.cloneRange(), i = e.contains(t.startContainer), r = e.contains(t.endContainer);
+  if (i && r) return n;
+  if (i && !r) {
+    const a = jt(e);
+    return a && n.setEnd(a, ((s = a.textContent) == null ? void 0 : s.length) ?? 0), n;
+  }
+  return null;
+}
+function Kt(o, e, t) {
+  var r;
+  const n = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
+  let i = 0;
+  for (; n.nextNode(); ) {
+    if (n.currentNode === e) return i + t;
+    i += ((r = n.currentNode.textContent) == null ? void 0 : r.length) ?? 0;
+  }
+  return -1;
+}
+function dt(o, e, t) {
+  var a;
+  const n = document.createTreeWalker(o, NodeFilter.SHOW_TEXT), i = document.createRange();
+  let r = 0, s = !1;
+  for (; n.nextNode(); ) {
+    const l = ((a = n.currentNode.textContent) == null ? void 0 : a.length) ?? 0;
+    if (!s && r + l > e && (i.setStart(n.currentNode, e - r), s = !0), s && r + l >= t)
+      return i.setEnd(n.currentNode, t - r), i;
+    r += l;
+  }
+  return null;
+}
+function Wt(o, e, t) {
+  let n = 0, i = 0;
+  for (; ; ) {
+    const r = o.indexOf(e, i);
+    if (r < 0 || r === t) return n;
+    i = r + 1, n++;
+  }
+}
+function Xt(o, e, t) {
+  let n = 0, i = 0;
+  for (; ; ) {
+    const r = o.indexOf(e, i);
+    if (r < 0) return -1;
+    if (n === t) return r;
+    i = r + 1, n++;
+  }
+}
+function jt(o) {
+  const e = document.createTreeWalker(o, NodeFilter.SHOW_TEXT);
+  let t = null;
+  for (; e.nextNode(); )
+    t = e.currentNode;
+  return t;
+}
+function 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;
+  });
+}
+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;
+};
+const Yt = {
+  "top-left": { top: "16px", left: "16px" },
+  "top-center": { top: "16px", left: "50%", translateX: "-50%" },
+  "top-right": { top: "16px", right: "16px" },
+  "bottom-left": { bottom: "16px", left: "16px" },
+  "bottom-center": { bottom: "16px", left: "50%", translateX: "-50%" },
+  "bottom-right": { bottom: "16px", right: "16px" }
+};
+let b = class extends C {
+  constructor() {
+    super(...arguments), this.mode = "idle", this.commentCount = 0, this.hasOverallComment = !1, this.overallCommentOpen = !1, this.barPosition = "bottom-center", this.dragOffset = null, this.dragStart = null, this.onDragStart = (o) => {
+      const e = this.bar.getBoundingClientRect();
+      this.dragStart = {
+        px: o.clientX,
+        py: o.clientY,
+        ox: e.left,
+        oy: e.top
+      }, window.addEventListener("pointermove", this.onDragMove), window.addEventListener("pointerup", this.onDragEnd);
+    }, this.onDragMove = (o) => {
+      if (!this.dragStart) return;
+      const e = this.dragStart.ox + (o.clientX - this.dragStart.px), t = this.dragStart.oy + (o.clientY - this.dragStart.py), n = 16, i = window.innerWidth - this.bar.offsetWidth - n, r = window.innerHeight - this.bar.offsetHeight - n;
+      this.dragOffset = {
+        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);
+    };
+  }
+  get barRoot() {
+    return this.bar ?? null;
+  }
+  render() {
+    const o = this.mode !== "idle", e = this.commentCount + (this.hasOverallComment ? 1 : 0), t = e > 0, n = Yt[this.barPosition], i = this.dragOffset ? `position:fixed;left:${this.dragOffset.x}px;top:${this.dragOffset.y}px;z-index:var(--review-z-index,9998);` : `position:fixed;${n.top ? `top:${n.top};` : ""}${n.bottom ? `bottom:${n.bottom};` : ""}${n.left ? `left:${n.left};` : ""}${n.right ? `right:${n.right};` : ""}${n.translateX ? `transform:translateX(${n.translateX});` : ""}z-index:var(--review-z-index,9998);`;
+    return w`<div
+      data-bar
+      class=${A({ bar: !0, "bar--active": o })}
+      style=${i}
+    >
+      <div
+        class="grip"
+        @pointerdown=${this.onDragStart}
+      >
+        <span class="icon icon-12">${M.gripVertical}</span>
+      </div>
+
+      <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=${o ? "true" : "false"}
+          data-toggle
+          @click=${this.onToggle}
+          class=${A({
+      toggle: !0,
+      "toggle--active": o,
+      "toggle--idle": !o
+    })}
+        >
+          <span class=${A({
+      knob: !0,
+      "knob--active": o,
+      "knob--idle": !o
+    })}></span>
+        </button>
+      </label>
+
+      <div class="divider"></div>
+
+      <button
+        type="button"
+        data-overall
+        @click=${this.onOverallToggle}
+        class=${A({
+      overall: !0,
+      "overall--has": this.hasOverallComment,
+      "overall--open": !this.hasOverallComment && this.overallCommentOpen,
+      "overall--idle": !this.hasOverallComment && !this.overallCommentOpen
+    })}
+      >
+        Comment
+        <span class="icon icon-14">${M.messageSquare}</span>
+      </button>
+
+      <div class="divider"></div>
+
+      <button
+        type="button"
+        data-submit
+        @click=${this.onSubmit}
+        class="submit"
+      >
+        ${t ? "Submit" : "Approve"}
+        <span class="badge">
+          ${t ? e : w`<span class="icon icon-12">${M.check}</span>`}
+        </span>
+      </button>
+    </div>`;
+  }
+  onToggle() {
+    this.dispatchEvent(
+      new CustomEvent("toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  onOverallToggle() {
+    this.dispatchEvent(
+      new CustomEvent("overall-toggle", { bubbles: !0, composed: !0 })
+    );
+  }
+  onSubmit() {
+    this.dispatchEvent(
+      new CustomEvent("submit", { bubbles: !0, composed: !0 })
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), window.removeEventListener("pointermove", this.onDragMove), window.removeEventListener("pointerup", this.onDragEnd);
+  }
+};
+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 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 o;
+    (o = this.textarea) == null || o.focus();
+  }
+  render() {
+    return w`<textarea
+      rows="1"
+      placeholder=${this.placeholder}
+      .value=${this.value}
+      @input=${this.onInput}
+    ></textarea>`;
+  }
+  onInput(o) {
+    const e = o.target.value;
+    this.autoGrow(), this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  autoGrow() {
+    const o = this.textarea;
+    o && (o.style.height = "auto", o.style.height = `${o.scrollHeight}px`);
+  }
+  firstUpdated() {
+    this.autoFocus && this.textarea.focus(), this.autoGrow();
+  }
+  updated() {
+    this.autoGrow();
+  }
+};
+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 S = class extends C {
+  constructor() {
+    super(...arguments), this.targetElement = null, this.anchor = null, this.value = "";
+  }
+  render() {
+    const o = this.value.trim().length > 0;
+    return w`<div
+      data-floating
+      class="floating"
+      style="position:absolute;top:0;left:0;"
+    >
+      <div class="panel">
+        ${o ? w`<button
+              type="button"
+              data-delete
+              class="delete-btn"
+              @click=${this.onDelete}
+            >
+              <span class="icon icon-14">${M.trash}</span>
+              <span class="delete-label">Delete</span>
+            </button>` : null}
+        <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>
+        </div>
+      </div>
+    </div>`;
+  }
+  onEditorChange(o) {
+    if (typeof o.detail != "string") return;
+    const e = o.detail;
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
+    );
+  }
+  onCancel(o) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("close", { bubbles: !0, composed: !0 })
+    );
+  }
+  onDelete(o) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("delete", { bubbles: !0, composed: !0 })
+    );
+  }
+  startPositioning() {
+    var t;
+    const o = this.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: [
+          pt(12),
+          ft({ padding: 16 }),
+          vt({ padding: 16, crossAxis: !0 }),
+          bt({
+            padding: 16,
+            apply({ availableWidth: n, elements: i }) {
+              Object.assign(i.floating.style, {
+                maxWidth: `${Math.min(400, n)}px`
+              });
+            }
+          })
+        ]
+      }).then(({ x: n, y: i }) => {
+        Object.assign(e.style, { left: `${n}px`, top: `${i}px` });
+      });
+    }));
+  }
+  updated(o) {
+    (o.has("targetElement") || o.has("anchor")) && (this.startPositioning(), this.focusEditor());
+  }
+  focusEditor() {
+    const o = this.renderRoot.querySelector(
+      'slot[name="editor"]'
+    ), t = ((o == null ? void 0 : o.assignedElements()) ?? [])[0] ?? this.renderRoot.querySelector("llumi-default-editor");
+    t == null || t.focus();
+  }
+  disconnectedCallback() {
+    var o;
+    super.disconnectedCallback(), (o = this.cleanup) == null || o.call(this), this.cleanup = void 0;
+  }
+};
+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 L = class extends C {
+  constructor() {
+    super(...arguments), this.barElement = null, this.value = "", this.onDocKeydown = (o) => {
+      o.key === "Escape" && (o.preventDefault(), this.emitClose());
+    }, this.onDocPointerdown = (o) => {
+      const e = o.composedPath();
+      this.floating && !e.includes(this.floating) && !e.includes(this) && this.emitClose();
+    };
+  }
+  render() {
+    return w`<div
+      data-floating
+      class="floating"
+      style="position:absolute;top:0;left:0;"
+    >
+      <div class="panel">
+        <div class="editor-wrap" @change=${this.onEditorChange}>
+          <slot name="editor">
+            <llumi-default-editor
+              .value=${this.value}
+              autoFocus
+              placeholder="Overall comment..."
+            ></llumi-default-editor>
+          </slot>
+        </div>
+      </div>
+    </div>`;
+  }
+  onEditorChange(o) {
+    if (typeof o.detail != "string") return;
+    const e = o.detail;
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("change", { detail: e, bubbles: !0, composed: !0 })
+    );
+  }
+  emitClose() {
+    this.dispatchEvent(
+      new CustomEvent("close", { bubbles: !0, composed: !0 })
+    );
+  }
+  startPositioning() {
+    var t;
+    const o = this.barElement, e = this.floating;
+    !o || !e || ((t = this.cleanup) == null || t.call(this), this.cleanup = gt(o, e, () => {
+      ut(o, e, {
+        placement: "top",
+        middleware: [
+          pt(12),
+          ft({ padding: 16 }),
+          vt({ padding: 16, crossAxis: !0 }),
+          bt({
+            padding: 16,
+            apply({ availableWidth: n, elements: i }) {
+              Object.assign(i.floating.style, {
+                maxWidth: `${Math.min(400, n)}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(o) {
+    o.has("barElement") && this.startPositioning();
+  }
+  disconnectedCallback() {
+    var o;
+    super.disconnectedCallback(), (o = this.cleanup) == null || o.call(this), this.cleanup = void 0, document.removeEventListener("keydown", this.onDocKeydown), document.removeEventListener("pointerdown", this.onDocPointerdown, !0);
+  }
+};
+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 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 w`${At(
+      this.positions,
+      (o) => o.commentId,
+      (o) => w`<button
+        type="button"
+        @click=${(e) => this.onClick(e, o.commentId)}
+        style=${Dt({
+        position: "absolute",
+        top: `${o.top - 10}px`,
+        left: `${o.left + 2}px`,
+        width: "20px",
+        height: "20px",
+        borderRadius: "50%",
+        backgroundColor: "white",
+        backgroundImage: `url("${re}")`,
+        backgroundSize: "12px 12px",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        boxShadow: "0 1px 3px oklch(0 0 0 / 0.1)",
+        zIndex: "calc(var(--review-z-index, 9998) + 1)",
+        border: "none",
+        padding: "0",
+        cursor: "pointer"
+      })}
+      ></button>`
+    )}`;
+  }
+  onClick(o, e) {
+    o.stopPropagation(), this.dispatchEvent(
+      new CustomEvent("icon-click", {
+        detail: e,
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+};
+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 et(...o) {
+  return new Highlight(
+    ...o
+  );
+}
+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 = 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), n = Y(t.startContainer);
+      if (!n) return;
+      const i = Y(t.endContainer);
+      if (i && i !== n) {
+        e.removeAllRanges();
+        return;
+      }
+      if (!i || !Ft(e, n)) {
+        const a = Ut(e, n);
+        if (!a) return;
+        e.removeAllRanges(), e.addRange(a);
+      }
+      const r = n.getAttribute(z);
+      if (!r) return;
+      const s = zt(n);
+      s && (e.removeAllRanges(), this.selectionJustHandled = !0, this.actor.send({
+        type: "SELECT_TEXT",
+        targetId: r,
+        targetElement: n,
+        selectionRange: s
+      }));
+    }, this.onPointerMove = (e) => {
+      if (!this.isAnnotating()) return;
+      const t = tt();
+      if (!t) return;
+      const n = this.caretPosition(e.clientX, e.clientY);
+      if (!n) {
+        this.hoveredComment && (t.delete(G), this.hoveredComment = null);
+        return;
+      }
+      let i = null;
+      for (const [r, s] of this.painter.rangeMap)
+        if (s.isPointInRange(n.offsetNode, n.offset)) {
+          i = r;
+          break;
+        }
+      if (i !== this.hoveredComment)
+        if (this.hoveredComment = i, i) {
+          const r = this.painter.rangeMap.get(i);
+          r && t.set(
+            G,
+            et(r)
+          );
+        } else
+          t.delete(G);
+    }, this.onClickCapture = (e) => {
+      if (!this.isAnnotating() || e.defaultPrevented) return;
+      if (this.selectionJustHandled) {
+        this.selectionJustHandled = !1, e.stopPropagation();
+        return;
+      }
+      const t = window.getSelection();
+      if (t && !t.isCollapsed) return;
+      const 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;
+            e.stopPropagation(), e.preventDefault(), this.actor.send({
+              type: "CLICK",
+              targetId: h.targetId,
+              element: u,
+              selectionCommentId: a
+            });
+            return;
+          }
+      }
+      const i = e.target, s = i.closest(
+        ".review-highlight-hover, .review-highlight-commented, .review-highlight-editing"
+      );
+      if (s && this.contains(s)) {
+        e.stopPropagation(), e.preventDefault();
+        const a = _(i, this.customTargets);
+        a ? this.actor.send({
+          type: "CLICK",
+          targetId: a.targetId,
+          element: a.element
+        }) : this.actor.send({ type: "CLICK" });
+      }
+    }, this.onWrapperClick = (e) => {
+      if (!this.contains(e.target) || !this.isAnnotating()) return;
+      const t = _(e.target, this.customTargets);
+      t ? (e.stopPropagation(), e.preventDefault(), this.actor.send({
+        type: "CLICK",
+        targetId: t.targetId,
+        element: t.element
+      })) : this.actor.send({ type: "CLICK" });
+    }, this.onMouseOver = (e) => {
+      const t = this.manager;
+      if (!t || !this.isAnnotating()) return;
+      const n = this.currentEditingTargetId(), i = _(
+        e.target,
+        this.customTargets
+      );
+      if (i) {
+        t.applyHover(i.element, n);
+        return;
+      }
+      const r = e.target.closest(
+        "[data-review-selectable]"
+      );
+      r && t.applyHover(r, n);
+    }, this.onMouseOut = (e) => {
+      const t = this.manager;
+      if (!t || !this.isAnnotating()) return;
+      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, n, i);
+        return;
+      }
+      const s = e.target.closest(
+        "[data-review-selectable]"
+      );
+      s && t.clearHover(s, n, i);
+    };
+  }
+  get shortcut() {
+    return this.getAttribute("shortcut") ?? ae;
+  }
+  get barPosition() {
+    return this.getAttribute("bar-position") ?? "bottom-center";
+  }
+  get defaultMode() {
+    return this.getAttribute("default-mode") === "annotating" ? "annotating" : "idle";
+  }
+  get persistKey() {
+    const e = this.getAttribute("persist");
+    return e != null && e.trim() ? e : null;
+  }
+  connectedCallback() {
+    Tt("review", Nt), this.style.position === "" && (this.style.position = "relative"), this.style.display === "" && (this.style.display = "block");
+    const e = this.buildHighlightCallbacks();
+    this.persistence = this.persistKey ? Ht(this.persistKey) : ct;
+    const t = Mt();
+    this.actor = St(t, {
+      input: {
+        shortcut: this.shortcut,
+        initialData: this.initialData,
+        defaultMode: this.defaultMode,
+        highlights: e,
+        persistence: this.persistence
+      }
+    }), this.actor.on("REVIEW_CHANGED", (n) => this.emitChange(n.result)), this.actor.on("REVIEW_SUBMITTED", (n) => this.emitSubmit(n.result)), this.mountChrome(), this.painter = new se({
+      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 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);
+  }
+  buildDetailResult(e) {
+    return e.status === "commented" ? {
+      ...e,
+      comments: qt(
+        e.comments,
+        this,
+        this.customTargets
+      )
+    } : e;
+  }
+  emitChange(e) {
+    this.dispatchEvent(
+      new CustomEvent("llumi-review-change", {
+        detail: this.buildDetailResult(e),
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  emitSubmit(e) {
+    this.dispatchEvent(
+      new CustomEvent("llumi-review-submit", {
+        detail: {
+          result: this.buildDetailResult(e),
+          clearPersisted: () => this.clearPersisted()
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  /** Clears the persisted draft for this element. No-op when persistence is off. */
+  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(
+      "toggle",
+      () => this.actor.send({ type: "TOGGLE" })
+    ), this.bar.addEventListener("overall-toggle", () => {
+      const e = this.actor.getSnapshot(), t = e.matches({ commenting: "editing" }) && e.context.editingCommentId === null;
+      this.actor.send(
+        t ? { type: "CLOSE" } : { type: "OPEN_OVERALL" }
+      );
+    }), this.bar.addEventListener(
+      "submit",
+      () => this.actor.send({ type: "SUBMIT" })
+    ), document.body.append(this.bar), this.icons = document.createElement(
+      "llumi-selection-comment-icons"
+    ), this.icons.addEventListener(
+      "icon-click",
+      (e) => this.onIconClick(e.detail)
+    ), document.body.append(this.icons);
+  }
+  onIconClick(e) {
+    const t = this.actor.getSnapshot().context.comments.find((i) => i.commentId === e);
+    if (!t) return;
+    const n = this.querySelector(
+      `[${z}="${t.targetId}"]`
+    );
+    n && this.actor.send({
+      type: "CLICK",
+      targetId: t.targetId,
+      element: n,
+      selectionCommentId: e
+    });
+  }
+  // --- snapshot → UI sync ---
+  syncFromSnapshot() {
+    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 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",
+      (g) => this.actor.send({
+        type: "COMMENT_CHANGE",
+        content: g.detail
+      })
+    ), this.commentDialog.addEventListener(
+      "delete",
+      () => this.actor.send({ type: "DELETE" })
+    ), this.commentDialog.addEventListener(
+      "close",
+      () => this.actor.send({ type: "CLOSE" })
+    ), document.body.append(this.commentDialog)), 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",
+      (g) => this.actor.send({
+        type: "COMMENT_CHANGE",
+        content: g.detail
+      })
+    ), this.overallDialog.addEventListener(
+      "close",
+      () => this.actor.send({ type: "CLOSE" })
+    ), document.body.append(this.overallDialog)), this.overallDialog.barElement = this.bar.barRoot, this.overallDialog.value = n) : this.overallDialog && (this.overallDialog.remove(), this.overallDialog = null), s && this.painter.update(this.selectionComments);
+  }
+  // --- highlight callbacks ---
+  buildHighlightCallbacks() {
+    return {
+      activate: (e) => {
+        const t = this.manager;
+        t && (t.activate(e), t.startObserving({
+          editingTarget: this.actor.getSnapshot().context.targetElement,
+          onTargetDisconnected: () => this.actor.send({ type: "CLOSE" }),
+          onSelectableReconnected: () => this.painter.update(this.selectionComments),
+          commentedIds: e
+        }));
+      },
+      deactivate: () => {
+        const e = this.manager;
+        e && (e.deactivate(), e.stopObserving(), this.painter.clear());
+      },
+      reveal: (e) => {
+        var t;
+        return (t = this.manager) == null ? void 0 : t.reveal(e);
+      },
+      unreveal: () => {
+        var e;
+        return (e = this.manager) == null ? void 0 : e.unreveal();
+      },
+      setEditing: (e, t) => {
+        var n;
+        (n = this.manager) == null || n.setEditing(e, t), this.painter.update(this.selectionComments);
+      },
+      clearEditing: (e, t) => {
+        var n;
+        (n = this.manager) == null || n.clearEditing(e, t), this.painter.update(this.selectionComments);
+      }
+    };
+  }
+  isAnnotating() {
+    return !this.actor.getSnapshot().matches({ annotating: "inactive" });
+  }
+  caretPosition(e, t) {
+    if ("caretPositionFromPoint" in document) {
+      const n = document.caretPositionFromPoint(e, t);
+      if (n) return n;
+    } else if ("caretRangeFromPoint" in document) {
+      const n = document.caretRangeFromPoint(e, t);
+      if (n) return { offsetNode: n.startContainer, offset: n.startOffset };
+    }
+    return null;
+  }
+  currentEditingTargetId() {
+    var t;
+    const e = this.actor.getSnapshot().context;
+    if (e.editingCommentId)
+      return ((t = e.comments.find((n) => n.commentId === e.editingCommentId)) == null ? void 0 : t.targetId) ?? void 0;
+  }
+};
+it.observedAttributes = ["bar-position", "shortcut", "default-mode"];
+let nt = it;
+customElements.get("llumi-review") || customElements.define("llumi-review", nt);
+export {
+  S as LlumiCommentDialog,
+  I as LlumiDefaultEditor,
+  L as LlumiOverallCommentDialog,
+  nt as LlumiReview,
+  b as LlumiReviewBar,
+  Z as LlumiSelectionCommentIcons
+};