@instructure/platform-notebook 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,102 +1,112 @@
-import { z as i } from "zod";
-import le from "diff-match-patch";
-import { useQueryClient as j, useMutation as P, useQuery as ce } from "@tanstack/react-query";
-import { jsx as _ } from "react/jsx-runtime";
-import { createContext as G, useContext as Y, useReducer as ue, useMemo as de } from "react";
-const fe = i.object({
-  startContainer: i.string(),
-  endContainer: i.string(),
-  startOffset: i.number(),
-  endOffset: i.number()
-}), ge = i.object({
-  start: i.number(),
-  end: i.number()
-}), q = i.object({
-  selectedText: i.string(),
-  hasNoHighlightAnymore: i.boolean().optional(),
-  textPosition: ge.nullable(),
-  range: fe.nullable(),
-  pageLastModifiedAt: i.string()
+import { jsx as a, jsxs as C } from "react/jsx-runtime";
+import { Flex as x } from "@instructure/ui-flex";
+import { IconWarningLine as De, IconQuestionLine as ee, IconPinLine as te, IconArrowOpenDownLine as Ae, IconEditLine as ue, IconTrashLine as fe } from "@instructure/ui-icons";
+import { TruncateText as J } from "@instructure/ui-truncate-text";
+import { z as l } from "zod";
+import Le from "diff-match-patch";
+import { createContext as ye, useContext as Ce, useMemo as Ee, useReducer as Me, useState as j, useRef as K, useCallback as Pe, useEffect as Fe } from "react";
+import { useQueryClient as ne, useMutation as oe, useQuery as Be } from "@tanstack/react-query";
+import { ScreenReaderContent as He } from "@instructure/ui-a11y-content";
+import { Button as q, IconButton as Z } from "@instructure/ui-buttons";
+import { Text as P } from "@instructure/ui-text";
+import { TextArea as _e } from "@instructure/ui-text-area";
+import { View as je } from "@instructure/ui-view";
+import { Menu as F } from "@instructure/ui-menu";
+import { Pill as me } from "@instructure/ui-pill";
+const Ue = l.object({
+  startContainer: l.string(),
+  endContainer: l.string(),
+  startOffset: l.number(),
+  endOffset: l.number()
+}), We = l.object({
+  start: l.number(),
+  end: l.number()
+}), re = l.object({
+  selectedText: l.string(),
+  hasNoHighlightAnymore: l.boolean().optional(),
+  textPosition: We.nullable(),
+  range: Ue.nullable(),
+  pageLastModifiedAt: l.string()
 });
-var I = /* @__PURE__ */ ((n) => (n.IMPORTANT = "Important", n.CONFUSING = "Confusing", n))(I || {});
-const M = i.enum([
+var b = /* @__PURE__ */ ((n) => (n.IMPORTANT = "Important", n.CONFUSING = "Confusing", n))(b || {});
+const se = l.enum([
   "Important",
   "Confusing"
   /* CONFUSING */
-]), z = i.object({
-  startCursor: i.string().nullish(),
-  endCursor: i.string().nullish(),
-  hasNextPage: i.boolean().nullish(),
-  hasPreviousPage: i.boolean().nullish()
-}), L = i.object({
-  id: i.string(),
-  rootAccountUuid: i.string(),
-  userId: i.string(),
-  courseId: i.string(),
-  objectId: i.string(),
-  objectType: i.string(),
-  userText: i.string().optional(),
-  reaction: i.array(M),
-  highlightData: q,
-  createdAt: i.string(),
-  updatedAt: i.string()
-}), he = i.object({
-  cursor: i.string(),
-  node: L
+]), Se = l.object({
+  startCursor: l.string().nullish(),
+  endCursor: l.string().nullish(),
+  hasNextPage: l.boolean().nullish(),
+  hasPreviousPage: l.boolean().nullish()
+}), X = l.object({
+  id: l.string(),
+  rootAccountUuid: l.string(),
+  userId: l.string(),
+  courseId: l.string(),
+  objectId: l.string(),
+  objectType: l.string(),
+  userText: l.string().optional(),
+  reaction: l.array(se),
+  highlightData: re,
+  createdAt: l.string(),
+  updatedAt: l.string()
+}), qe = l.object({
+  cursor: l.string(),
+  node: X
 });
-i.object({
-  notes: i.object({
-    edges: i.array(he),
-    nodes: i.array(L),
-    pageInfo: z
+l.object({
+  notes: l.object({
+    edges: l.array(qe),
+    nodes: l.array(X),
+    pageInfo: Se
   })
 });
-const me = i.object({
-  type: i.string(),
-  id: i.string()
-}), Ne = i.object({
-  courseId: i.string().optional(),
-  learningObject: me.optional(),
-  reactions: i.array(i.string()).optional()
+const ze = l.object({
+  type: l.string(),
+  id: l.string()
+}), $e = l.object({
+  courseId: l.string().optional(),
+  learningObject: ze.optional(),
+  reactions: l.array(l.string()).optional()
 }).optional();
-i.object({
-  courseId: i.string().optional(),
-  filter: Ne,
-  pageParams: z.optional(),
-  direction: i.enum(["next", "prev"]).optional(),
-  pageSize: i.number().optional()
+l.object({
+  courseId: l.string().optional(),
+  filter: $e,
+  pageParams: Se.optional(),
+  direction: l.enum(["next", "prev"]).optional(),
+  pageSize: l.number().optional()
 });
-i.object({
-  courseId: i.string(),
-  objectId: i.string(),
-  objectType: i.string(),
-  userText: i.string().optional(),
-  reaction: i.array(M),
-  highlightData: q
+l.object({
+  courseId: l.string(),
+  objectId: l.string(),
+  objectType: l.string(),
+  userText: l.string().optional(),
+  reaction: l.array(se),
+  highlightData: re
 });
-i.object({
-  createNote: L
+l.object({
+  createNote: X
 });
-i.object({
-  id: i.string(),
-  userText: i.string().optional(),
-  reaction: i.array(M),
-  highlightData: q
+l.object({
+  id: l.string(),
+  userText: l.string().optional(),
+  reaction: l.array(se),
+  highlightData: re
 });
-i.object({
-  updateNote: L
+l.object({
+  updateNote: X
 });
-i.object({
-  deleteNote: i.string()
+l.object({
+  deleteNote: l.string()
 });
-var Z = /* @__PURE__ */ ((n) => (n[n.FORWARDS = 1] = "FORWARDS", n[n.BACKWARDS = 2] = "BACKWARDS", n))(Z || {});
-class S {
+var Te = /* @__PURE__ */ ((n) => (n[n.FORWARDS = 1] = "FORWARDS", n[n.BACKWARDS = 2] = "BACKWARDS", n))(Te || {});
+class R {
   constructor(e, t) {
     this.start = e, this.end = t;
   }
   toRange() {
     let e, t;
-    if (this.start.element === this.end.element && this.start.offset <= this.end.offset ? [e, t] = ee(this.start.element, this.start.offset, this.end.offset) : (e = this.start.resolve({
+    if (this.start.element === this.end.element && this.start.offset <= this.end.offset ? [e, t] = Oe(this.start.element, this.start.offset, this.end.offset) : (e = this.start.resolve({
       direction: 1
       /* FORWARDS */
     }), t = this.end.resolve({
@@ -108,28 +118,28 @@ class S {
     return o.setStart(e.node, e.offset), o.setEnd(t.node, t.offset), o;
   }
   static fromRange(e) {
-    const t = E.fromPoint(e.startContainer, e.startOffset), o = E.fromPoint(e.endContainer, e.endOffset);
-    return !t || !o ? null : new S(t, o);
+    const t = O.fromPoint(e.startContainer, e.startOffset), o = O.fromPoint(e.endContainer, e.endOffset);
+    return !t || !o ? null : new R(t, o);
   }
   static fromOffsets(e, t, o) {
-    return new S(new E(e, t), new E(e, o));
+    return new R(new O(e, t), new O(e, o));
   }
   relativeTo(e) {
-    return new S(this.start.relativeTo(e), this.end.relativeTo(e));
+    return new R(this.start.relativeTo(e), this.end.relativeTo(e));
   }
 }
-class E {
+class O {
   constructor(e, t) {
     t < 0 && console.error("Offset is invalid"), this.element = e, this.offset = t;
   }
   resolve(e = {}) {
     try {
-      return ee(this.element, this.offset)[0];
+      return Oe(this.element, this.offset)[0];
     } catch (t) {
       if (this.offset === 0 && e.direction !== void 0) {
         const o = document.createTreeWalker(this.element.getRootNode(), NodeFilter.SHOW_TEXT);
         o.currentNode = this.element;
-        const r = e.direction === Z.FORWARDS, s = r ? o.nextNode() : o.previousNode();
+        const r = e.direction === Te.FORWARDS, s = r ? o.nextNode() : o.previousNode();
         if (!s)
           throw t;
         return { node: s, offset: r ? 0 : s.data.length };
@@ -140,9 +150,9 @@ class E {
   static fromCharOffset(e, t) {
     switch (e.nodeType) {
       case Node.TEXT_NODE:
-        return E.fromPoint(e, t);
+        return O.fromPoint(e, t);
       case Node.ELEMENT_NODE:
-        return new E(e, t);
+        return new O(e, t);
       default:
         return console.error("Node is not an element or text node"), null;
     }
@@ -154,16 +164,16 @@ class E {
           return console.error("Text node offset is out of range"), null;
         if (!e.parentElement)
           return console.error("Text node has no parent"), null;
-        const o = V(e) + t;
-        return new E(e.parentElement, o);
+        const o = pe(e) + t;
+        return new O(e.parentElement, o);
       }
       case Node.ELEMENT_NODE: {
         if (t < 0 || t > e.childNodes.length)
           return console.error("Child node offset is out of range"), null;
         let o = 0;
         for (let r = 0; r < t; r++)
-          o += J(e.childNodes[r]);
-        return new E(e, o);
+          o += Ie(e.childNodes[r]);
+        return new O(e, o);
       }
       default:
         return console.error("Point is not in an element or text node"), null;
@@ -174,99 +184,99 @@ class E {
       throw new Error("Parent is not an ancestor of current element");
     let t = this.element, o = this.offset;
     for (; t !== e; )
-      o += V(t), t.parentElement && (t = t.parentElement);
-    return new E(t, o);
+      o += pe(t), t.parentElement && (t = t.parentElement);
+    return new O(t, o);
   }
 }
-const pe = (n) => {
+const Ke = (n) => {
   const e = n.nodeName.toLowerCase();
   return e === "#text" ? "text()" : e;
 };
-function ye(n) {
+function Ge(n) {
   let e = 0, t = n;
   for (; t; )
     t.nodeName === n.nodeName && (e += 1), t = t.previousSibling;
   return e;
 }
-const Ee = (n) => {
-  const e = pe(n), t = ye(n);
+const Xe = (n) => {
+  const e = Ke(n), t = Ge(n);
   return `${e}[${t}]`;
-}, K = (n, e) => {
+}, ge = (n, e) => {
   let t = "", o = n;
   for (; o !== e; ) {
     if (!o) {
       console.error("Node is not a descendant of root");
       return;
     }
-    t = `${Ee(o)}/${t}`, o = o.parentNode;
+    t = `${Xe(o)}/${t}`, o = o.parentNode;
   }
   return t = `/${t}`, t = t.replace(/\/$/, ""), t;
-}, Se = (n, e, t) => {
+}, Qe = (n, e, t) => {
   const o = e.toUpperCase();
   let r = -1;
   for (let s = 0; s < n.children.length; s++) {
-    const a = n.children[s];
-    if (a.nodeName.toUpperCase() === o && (++r, r === t))
-      return a;
+    const i = n.children[s];
+    if (i.nodeName.toUpperCase() === o && (++r, r === t))
+      return i;
   }
   return null;
-}, be = (n, e) => {
+}, Ye = (n, e) => {
   if (!(n.match(/^(\/[A-Za-z0-9-]+(\[[0-9]+])?)+$/) !== null))
     return console.error("Expression is not a simple XPath"), null;
   const o = n.split("/");
   let r = e;
   o.shift();
   for (const s of o) {
-    let a, c;
-    const u = s.indexOf("[");
-    if (u !== -1) {
-      a = s.slice(0, u);
-      const h = s.slice(u + 1, s.indexOf("]"));
-      if (c = Number.parseInt(h, 10) - 1, c < 0)
+    let i, d;
+    const f = s.indexOf("[");
+    if (f !== -1) {
+      i = s.slice(0, f);
+      const g = s.slice(f + 1, s.indexOf("]"));
+      if (d = Number.parseInt(g, 10) - 1, d < 0)
         return null;
     } else
-      a = s, c = 0;
-    const d = Se(r, a, c);
-    if (!d)
+      i = s, d = 0;
+    const c = Qe(r, i, d);
+    if (!c)
       return null;
-    r = d;
+    r = c;
   }
   return r;
-}, Q = (n, e = document.body) => {
+}, he = (n, e = document.body) => {
   try {
-    return be(n, e);
+    return Ye(n, e);
   } catch {
     return document.evaluate(`.${n}`, e, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
   }
 };
-class A {
+class G {
   constructor(e, t) {
     this.root = e, this.range = t;
   }
   static fromRange(e, t) {
-    return new A(e, t);
+    return new G(e, t);
   }
   static fromSelector(e, t) {
     if (!(t != null && t.startContainer) || !(t != null && t.endContainer))
       return console.error("No start or end container in selector"), null;
-    const o = Q(t.startContainer, e);
+    const o = he(t.startContainer, e);
     if (!o)
       return console.error("Failed to resolve startContainer XPath"), null;
-    const r = Q(t.endContainer, e);
+    const r = he(t.endContainer, e);
     if (!r)
       return console.error("Failed to resolve endContainer XPath"), null;
-    const s = E.fromCharOffset(o, t.startOffset), a = E.fromCharOffset(r, t.endOffset);
-    if (!s || !a)
+    const s = O.fromCharOffset(o, t.startOffset), i = O.fromCharOffset(r, t.endOffset);
+    if (!s || !i)
       return null;
-    const c = new S(s, a).toRange();
-    return c ? new A(e, c) : null;
+    const d = new R(s, i).toRange();
+    return d ? new G(e, d) : null;
   }
   toRange() {
     return this.range;
   }
   toSelector() {
     var s;
-    const e = (s = S.fromRange(this.range)) == null ? void 0 : s.toRange(), t = e && S.fromRange(e), o = t && K(t.start.element, this.root), r = t && K(t.end.element, this.root);
+    const e = (s = R.fromRange(this.range)) == null ? void 0 : s.toRange(), t = e && R.fromRange(e), o = t && ge(t.start.element, this.root), r = t && ge(t.end.element, this.root);
     return !o || !r ? null : {
       startContainer: o,
       startOffset: t.start.offset,
@@ -275,17 +285,17 @@ class A {
     };
   }
 }
-class v {
+class H {
   constructor(e, t, o) {
     this.root = e, this.start = t, this.end = o;
   }
   static fromRange(e, t) {
     var r;
-    const o = (r = S.fromRange(t)) == null ? void 0 : r.relativeTo(e);
-    return o ? new v(e, o.start.offset, o.end.offset) : null;
+    const o = (r = R.fromRange(t)) == null ? void 0 : r.relativeTo(e);
+    return o ? new H(e, o.start.offset, o.end.offset) : null;
   }
   static fromSelector(e, t) {
-    return new v(e, t.start, t.end);
+    return new H(e, t.start, t.end);
   }
   toSelector() {
     return {
@@ -294,10 +304,10 @@ class v {
     };
   }
   toRange() {
-    return S.fromOffsets(this.root, this.start, this.end).toRange();
+    return R.fromOffsets(this.root, this.start, this.end).toRange();
   }
 }
-const J = (n) => {
+const Ie = (n) => {
   var e;
   switch (n.nodeType) {
     case Node.ELEMENT_NODE:
@@ -306,70 +316,70 @@ const J = (n) => {
     default:
       return 0;
   }
-}, V = (n) => {
+}, pe = (n) => {
   let e = n.previousSibling, t = 0;
   for (; e; )
-    t += J(e), e = e.previousSibling;
+    t += Ie(e), e = e.previousSibling;
   return t;
-}, ee = (n, ...e) => {
+}, Oe = (n, ...e) => {
   let t = e.shift();
   const o = n.ownerDocument.createNodeIterator(n, NodeFilter.SHOW_TEXT), r = [];
-  let s = o.nextNode(), a = null, c = 0;
+  let s = o.nextNode(), i = null, d = 0;
   for (; t !== void 0 && s; )
-    a = s, c + a.data.length > t ? (r.push({ node: a, offset: t - c }), t = e.shift()) : (s = o.nextNode(), c += a.data.length);
-  for (; t !== void 0 && a && c === t; )
-    r.push({ node: a, offset: a.data.length }), t = e.shift();
+    i = s, d + i.data.length > t ? (r.push({ node: i, offset: t - d }), t = e.shift()) : (s = o.nextNode(), d += i.data.length);
+  for (; t !== void 0 && i && d === t; )
+    r.push({ node: i, offset: i.data.length }), t = e.shift();
   return t !== void 0 && console.error("Offset exceeds text length"), r;
-}, Te = (n, e, t, o) => {
+}, Ve = (n, e, t, o) => {
   const r = t - e;
-  return Math.abs(r - o) <= 5 ? v.fromSelector(n, {
+  return Math.abs(r - o) <= 5 ? H.fromSelector(n, {
     start: e,
     end: t
   }) : null;
-}, Ce = (n, e, t, o) => {
-  const r = new le();
+}, Ze = (n, e, t, o) => {
+  const r = new Le();
   r.Match_Distance = 5e3;
   const s = n.textContent;
   if (!s)
     return null;
   if (e.length > 32) {
-    const a = e.slice(0, 32), c = e.slice(-32), u = o - t;
-    let d = r.match_main(s, a, t);
-    const h = r.match_main(s, c, o), f = h + c.length;
-    if (d === -1 || h === -1)
+    const i = e.slice(0, 32), d = e.slice(-32), f = o - t;
+    let c = r.match_main(s, i, t);
+    const g = r.match_main(s, d, o), m = g + d.length;
+    if (c === -1 || g === -1)
       return null;
-    const l = f - d, m = Math.abs(l - u);
-    if ((d > f || m > 5) && (r.Match_Distance = e.length + 100, d = r.match_main(s, a, f), d !== -1 && d < f))
-      return Te(n, d, f, u);
-    if (d < f && m <= 5)
-      return v.fromSelector(n, {
-        start: d,
-        end: f
+    const u = m - c, p = Math.abs(u - f);
+    if ((c > m || p > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, i, m), c !== -1 && c < m))
+      return Ve(n, c, m, f);
+    if (c < m && p <= 5)
+      return H.fromSelector(n, {
+        start: c,
+        end: m
       });
   } else {
-    const a = r.match_main(s, e, t);
-    if (a !== -1)
-      return v.fromSelector(n, {
-        start: a,
-        end: a + e.length
+    const i = r.match_main(s, e, t);
+    if (i !== -1)
+      return H.fromSelector(n, {
+        start: i,
+        end: i + e.length
       });
   }
   return null;
-}, ve = (n, e) => {
+}, Je = (n, e) => {
   if (!e) return null;
   const { highlightData: t } = n, { textPosition: o, selectedText: r } = t;
-  return Ce(
+  return Ze(
     e,
     r,
     (o == null ? void 0 : o.start) ?? 0,
     (o == null ? void 0 : o.end) ?? 0
   );
-}, ht = (n, e, t) => {
+}, ln = (n, e, t) => {
   const o = [], r = [];
   for (const s of e) {
-    const a = ve(s, n);
-    if (a) {
-      const c = a.toRange(), u = c && A.fromRange(n, c);
+    const i = Je(s, n);
+    if (i) {
+      const d = i.toRange(), f = d && G.fromRange(n, d);
       o.push({
         id: s.id,
         reaction: s.reaction,
@@ -377,8 +387,8 @@ const J = (n) => {
         highlightData: {
           ...s.highlightData,
           hasNoHighlightAnymore: !1,
-          range: (u == null ? void 0 : u.toSelector()) ?? null,
-          textPosition: a.toSelector(),
+          range: (f == null ? void 0 : f.toSelector()) ?? null,
+          textPosition: i.toSelector(),
           pageLastModifiedAt: t
         }
       });
@@ -395,54 +405,54 @@ const J = (n) => {
       }) : r.push(s.id);
   }
   return { notesForUpdate: o, noteIdsForDelete: r };
-}, mt = (n) => {
-  const e = document.getElementById($(n));
+}, an = (n) => {
+  const e = document.getElementById(le(n));
   if (e) {
     const t = e.getBoundingClientRect();
     t.top >= 0 && t.left >= 0 && t.bottom <= (window.innerHeight || document.documentElement.clientHeight) && t.right <= (window.innerWidth || document.documentElement.clientWidth) || e.scrollIntoView({ behavior: "smooth", block: "start" });
   }
-}, R = 90, k = 172, Nt = (n) => {
+}, z = 90, $ = 172, cn = (n) => {
   const e = n.getClientRects();
   if (!e.length)
     return null;
-  const t = e[0], o = e[e.length - 1], r = 4, s = 16, a = window.innerWidth || document.documentElement.clientWidth, c = window.innerHeight || document.documentElement.clientHeight, u = (N) => {
-    const b = N + k;
-    return N >= s && b <= a - s;
-  }, d = (N) => {
-    const b = N + R;
-    return N >= s && b <= c - s;
+  const t = e[0], o = e[e.length - 1], r = 4, s = 16, i = window.innerWidth || document.documentElement.clientWidth, d = window.innerHeight || document.documentElement.clientHeight, f = (N) => {
+    const v = N + $;
+    return N >= s && v <= i - s;
+  }, c = (N) => {
+    const v = N + z;
+    return N >= s && v <= d - s;
   };
-  let h;
-  const f = t.right - k;
-  if (u(f))
-    h = f;
+  let g;
+  const m = t.right - $;
+  if (f(m))
+    g = m;
   else {
     const N = t.left;
-    if (u(N))
-      h = N;
+    if (f(N))
+      g = N;
     else {
-      const T = (t.left + t.right) / 2 - k / 2;
-      u(T) ? h = T : f < s ? h = s : h = a - k - s;
+      const I = (t.left + t.right) / 2 - $ / 2;
+      f(I) ? g = I : m < s ? g = s : g = i - $ - s;
     }
   }
-  let l;
-  const m = o.bottom + r;
-  if (d(m))
-    l = m;
+  let u;
+  const p = o.bottom + r;
+  if (c(p))
+    u = p;
   else {
-    const N = t.top - R - r;
-    d(N) ? l = N : m + R > c - s ? l = c - R - s : l = s;
+    const N = t.top - z - r;
+    c(N) ? u = N : p + z > d - s ? u = d - z - s : u = s;
   }
-  return { top: l, left: h };
-}, pt = (n, e) => {
+  return { top: u, left: g };
+}, dn = (n, e) => {
   for (const t of e)
     if (n.start < t.end && n.end > t.start)
       return !0;
   return !1;
-}, W = (n) => `highlight-wrapper-${n}`, $ = (n) => `${W(n)}-start`, te = (n) => `${W(n)}-end`, D = (n) => `[data-highlight-id="${CSS.escape(n)}"]`, ne = (n, e) => {
+}, ie = (n) => `highlight-wrapper-${n}`, le = (n) => `${ie(n)}-start`, xe = (n) => `${ie(n)}-end`, U = (n) => `[data-highlight-id="${CSS.escape(n)}"]`, Q = (n, e) => {
   const t = Number.parseInt(n.slice(1, 3), 16), o = Number.parseInt(n.slice(3, 5), 16), r = Number.parseInt(n.slice(5, 7), 16);
   return `rgba(${t}, ${o}, ${r}, ${e})`;
-}, Oe = (n, e) => {
+}, et = (n, e) => {
   var t;
   try {
     const o = ((t = e.nodeValue) == null ? void 0 : t.length) ?? e.childNodes.length;
@@ -450,7 +460,7 @@ const J = (n) => {
   } catch {
     return !1;
   }
-}, we = (n) => {
+}, tt = (n) => {
   var s;
   if (n.collapsed)
     return [];
@@ -460,216 +470,249 @@ const J = (n) => {
   const t = [], o = (s = e == null ? void 0 : e.ownerDocument) == null ? void 0 : s.createNodeIterator(e, NodeFilter.SHOW_TEXT);
   let r = (o == null ? void 0 : o.nextNode()) || null;
   for (; r; ) {
-    if (!Oe(n, r)) {
+    if (!et(n, r)) {
       r = (o == null ? void 0 : o.nextNode()) || null;
       continue;
     }
-    const a = r;
-    if (a === n.startContainer && n.startOffset > 0) {
-      a.splitText(n.startOffset), r = (o == null ? void 0 : o.nextNode()) || null;
+    const i = r;
+    if (i === n.startContainer && n.startOffset > 0) {
+      i.splitText(n.startOffset), r = (o == null ? void 0 : o.nextNode()) || null;
       continue;
     }
-    a === n.endContainer && n.endOffset < a.data.length && a.splitText(n.endOffset), t.push(a), r = (o == null ? void 0 : o.nextNode()) || null;
+    i === n.endContainer && n.endOffset < i.data.length && i.splitText(n.endOffset), t.push(i), r = (o == null ? void 0 : o.nextNode()) || null;
   }
   return t;
-}, yt = (n, e, t) => {
+}, un = (n, e, t) => {
   if (n.collapsed) return;
-  const o = e.id ?? "", r = W(o);
-  if (document.getElementById($(o))) {
-    Ie(e, t);
+  const o = e.id ?? "", r = ie(o);
+  if (document.getElementById(le(o))) {
+    nt(e, t);
     return;
   }
-  const a = e.type === I.IMPORTANT ? t.colors.importantBackground : t.colors.confusingBackground, u = e.id === e.selectedNoteId ? a : ne(a, 0.5), d = e.type === I.IMPORTANT ? t.colors.importantUnderline : t.colors.confusingUnderline, h = e.type === I.IMPORTANT ? "solid" : "dashed", f = n.toString(), l = document.createElement("span");
-  l.id = `${r}-start`, l.className = "highlight-marker-start", l.dataset.highlightId = o || "", l.setAttribute("role", "button"), l.setAttribute("tabindex", "0"), l.setAttribute("aria-label", f), l.style.position = "relative", l.style.fontSize = "0", l.style.lineHeight = "0", l.style.width = "0", l.style.height = "0", l.style.margin = "0", l.style.padding = "0", l.style.border = "0";
-  const m = document.createElement("span");
-  m.id = te(o), m.className = "highlight-marker-end", m.dataset.highlightId = o || "";
+  const i = e.type === b.IMPORTANT ? t.colors.importantBackground : t.colors.confusingBackground, f = e.id === e.selectedNoteId ? i : Q(i, 0.5), c = e.type === b.IMPORTANT ? t.colors.importantUnderline : t.colors.confusingUnderline, g = e.type === b.IMPORTANT ? "solid" : "dashed", m = n.toString(), u = document.createElement("span");
+  u.id = `${r}-start`, u.className = "highlight-marker-start", u.dataset.highlightId = o || "", u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", m), u.style.position = "relative", u.style.fontSize = "0", u.style.lineHeight = "0", u.style.width = "0", u.style.height = "0", u.style.margin = "0", u.style.padding = "0", u.style.border = "0";
+  const p = document.createElement("span");
+  p.id = xe(o), p.className = "highlight-marker-end", p.dataset.highlightId = o || "";
   const N = n.cloneRange();
-  N.collapse(!1), N.insertNode(m);
-  const b = n.cloneRange();
-  b.collapse(!0), b.insertNode(l);
-  const T = document.createRange();
-  T.setStartAfter(l), T.setEndBefore(m);
-  const H = we(T).filter((g) => g.textContent && g.textContent.length > 0);
-  H.forEach((g, y) => {
-    var U;
-    const O = g.parentElement;
-    if ((O == null ? void 0 : O.dataset.highlightId) === o) return;
-    const F = y === 0, x = y === H.length - 1, ie = H.length === 1;
-    let w;
-    ie ? w = "single" : F ? w = "first" : x ? w = "last" : w = "middle";
-    const p = document.createElement("span");
-    p.className = "highlight-content", p.dataset.highlightId = o || "", p.dataset.position = w, p.style.backgroundColor = u, p.style.textDecorationLine = "underline", p.style.textDecorationColor = d, p.style.textDecorationStyle = h, p.style.textDecorationThickness = t.borderWidthSmall, p.style.textUnderlineOffset = t.underlineOffset, p.style.cursor = "pointer", p.addEventListener("click", (ae) => {
-      var X;
-      ae.target.tagName !== "A" && ((X = e.onClick) == null || X.call(e));
-    }), (U = g.parentNode) == null || U.insertBefore(p, g), p.appendChild(g);
-  }), l.addEventListener("click", (g) => {
+  N.collapse(!1), N.insertNode(p);
+  const v = n.cloneRange();
+  v.collapse(!0), v.insertNode(u);
+  const I = document.createRange();
+  I.setStartAfter(u), I.setEndBefore(p);
+  const D = tt(I).filter((h) => h.textContent && h.textContent.length > 0);
+  D.forEach((h, y) => {
+    var W;
+    const w = h.parentElement;
+    if ((w == null ? void 0 : w.dataset.highlightId) === o) return;
+    const A = y === 0, L = y === D.length - 1, V = D.length === 1;
+    let k;
+    V ? k = "single" : A ? k = "first" : L ? k = "last" : k = "middle";
+    const S = document.createElement("span");
+    S.className = "highlight-content", S.dataset.highlightId = o || "", S.dataset.position = k, S.style.backgroundColor = f, S.style.textDecorationLine = "underline", S.style.textDecorationColor = c, S.style.textDecorationStyle = g, S.style.textDecorationThickness = t.borderWidthSmall, S.style.textUnderlineOffset = t.underlineOffset, S.style.cursor = "pointer", S.addEventListener("click", (M) => {
+      var _;
+      M.target.tagName !== "A" && ((_ = e.onClick) == null || _.call(e));
+    }), (W = h.parentNode) == null || W.insertBefore(S, h), S.appendChild(h);
+  }), u.addEventListener("click", (h) => {
     var y;
-    g.target.tagName !== "A" && ((y = e.onClick) == null || y.call(e));
-  }), l.addEventListener("keydown", (g) => {
+    h.target.tagName !== "A" && ((y = e.onClick) == null || y.call(e));
+  }), u.addEventListener("keydown", (h) => {
     var y;
-    if (g.key === "Enter" || g.key === " ")
-      g.preventDefault(), (y = e.onClick) == null || y.call(e);
-    else if (g.key === "Tab" && !g.shiftKey) {
-      const O = document.querySelectorAll(D(o));
-      for (const F of O) {
-        const x = F.querySelector("a");
-        if (x) {
-          g.preventDefault(), x.focus();
+    if (h.key === "Enter" || h.key === " ")
+      h.preventDefault(), (y = e.onClick) == null || y.call(e);
+    else if (h.key === "Tab" && !h.shiftKey) {
+      const w = document.querySelectorAll(U(o));
+      for (const A of w) {
+        const L = A.querySelector("a");
+        if (L) {
+          h.preventDefault(), L.focus();
           break;
         }
       }
     }
-  }), l.addEventListener("focus", () => {
+  }), u.addEventListener("focus", () => {
     document.querySelectorAll(
-      D(o)
+      U(o)
     ).forEach((y) => {
       y.classList.add("highlight-focused");
     });
-  }), l.addEventListener("blur", () => {
+  }), u.addEventListener("blur", () => {
     document.querySelectorAll(
-      D(o)
+      U(o)
     ).forEach((y) => {
       y.classList.remove("highlight-focused");
     });
   });
 };
-function Ie(n, e) {
-  const t = n.type === I.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, r = n.id === n.selectedNoteId ? t : ne(t, 0.5);
+function nt(n, e) {
+  const t = n.type === b.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, r = n.id === n.selectedNoteId ? t : Q(t, 0.5);
   document.querySelectorAll(
-    D(n.id ?? "")
-  ).forEach((a) => {
-    a.style.backgroundColor = r;
+    U(n.id ?? "")
+  ).forEach((i) => {
+    i.style.backgroundColor = r;
   });
 }
-const Et = (n) => {
-  const e = n.id ?? "", t = document.getElementById($(e)), o = document.getElementById(te(e));
+const fn = (n) => {
+  const e = n.id ?? "", t = document.getElementById(le(e)), o = document.getElementById(xe(e));
   document.querySelectorAll(
-    D(e)
+    U(e)
   ).forEach((s) => {
-    var a;
+    var i;
     for (; s.firstChild; )
-      (a = s.parentNode) == null || a.insertBefore(s.firstChild, s);
+      (i = s.parentNode) == null || i.insertBefore(s.firstChild, s);
     s.remove();
   }), t == null || t.remove(), o == null || o.remove();
-}, C = {
+}, ot = "Notebook", rt = "Notes", st = "Important", it = "Unclear", lt = "Edit note", at = "Save", ct = "Cancel", dt = "Delete note", ut = "note", ft = "Add note (optional)", mt = "Remove from Notebook", gt = "Add a note (optional).", ht = "Mark important", pt = "Mark unclear", Nt = "Saved to Notebook.", bt = "Note updated", yt = "Note deleted", Ct = "Error saving to Notebook.", Et = "Error updating note", St = "Note deletion failed", Tt = "Loading notes", It = "Failed to load notes", Ot = "Start capturing your notes", xt = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", vt = "Nothing here yet", wt = "Adjust your filters or create a new note to get started.", kt = "You have no notes for the selected filter", Rt = "Previous page", Dt = "Next page", At = "All courses", Lt = "All notes", Mt = "Close Notebook panel", Pt = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", Ft = "The content you highlighted is no longer available.", ae = {
+  notebook: ot,
+  notes: rt,
+  important: st,
+  unclear: it,
+  editNote: lt,
+  save: at,
+  cancel: ct,
+  deleteNote: dt,
+  note: ut,
+  addNotePrompt: ft,
+  removeFromNotebook: mt,
+  addNoteOptional: gt,
+  markImportant: ht,
+  markUnclear: pt,
+  savedToNotebook: Nt,
+  noteUpdated: bt,
+  noteDeleted: yt,
+  errorSavingNote: Ct,
+  errorUpdatingNote: Et,
+  noteDeletionFailed: St,
+  loadingNotes: Tt,
+  failedToLoadNotes: It,
+  emptyStateHeading: Ot,
+  emptyStateDescription: xt,
+  nothingHereYet: vt,
+  adjustFiltersOrCreate: wt,
+  noNotesForFilter: kt,
+  previousPage: Rt,
+  nextPage: Dt,
+  allCourses: At,
+  allNotes: Lt,
+  closeNotebookPanel: Mt,
+  featureDescription: Pt,
+  highlightUnavailable: Ft
+}, ve = ye(null);
+function we(n, e) {
+  const t = ae[n] ?? n;
+  return e ? t.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : t;
+}
+function Bt({
+  translations: n,
+  translate: e,
+  children: t
+}) {
+  const o = Ee(
+    () => ({
+      translations: { ...ae, ...n },
+      translate: e ?? we
+    }),
+    [n, e]
+  );
+  return /* @__PURE__ */ a(ve.Provider, { value: o, children: t });
+}
+function Y() {
+  const n = Ce(ve);
+  return n || { translations: ae, translate: we };
+}
+const Ht = (n, e) => ({
+  backgroundColor: n === b.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
+  underlineColor: n === b.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
+  underlineStyle: n === b.IMPORTANT ? "solid" : "dashed"
+}), Ne = ({
+  children: n,
+  type: e = b.IMPORTANT,
+  isCardActive: t = !0,
+  theme: o
+}) => {
+  const r = Ht(e, o), i = {
+    position: "relative",
+    backgroundColor: t ? r.backgroundColor : Q(r.backgroundColor, 0.5),
+    textDecorationLine: "underline",
+    textDecorationStyle: r.underlineStyle,
+    textDecorationColor: r.underlineColor,
+    textDecorationThickness: o.borderWidthSmall,
+    textUnderlineOffset: o.underlineOffset,
+    lineHeight: "normal"
+  };
+  return /* @__PURE__ */ a("span", { "data-note-highlight": "true", style: i, children: n });
+}, _t = () => {
+  const { translations: n } = Y();
+  return /* @__PURE__ */ C(x, { gap: "xx-small", alignItems: "start", as: "div", children: [
+    /* @__PURE__ */ a(x.Item, { as: "div", children: /* @__PURE__ */ a(De, { color: "error" }) }),
+    /* @__PURE__ */ a(x.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ a(J, { maxLines: 3, children: n.highlightUnavailable }) })
+  ] });
+}, B = {
   all: ["notebook"],
   notes: (n) => ["notebook", "notes", n]
 };
-function St(n) {
-  const e = j();
-  return P({
+function mn(n) {
+  const e = ne();
+  return oe({
     mutationFn: (t) => n.createNote(t),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: C.all });
+      e.invalidateQueries({ queryKey: B.all });
     }
   });
 }
-function bt(n) {
-  const e = j();
-  return P({
+function gn(n) {
+  const e = ne();
+  return oe({
     mutationFn: (t) => n.deleteNote(t),
     onSuccess: () => {
-      e.invalidateQueries({ queryKey: C.all });
+      e.invalidateQueries({ queryKey: B.all });
     }
   });
 }
-function Tt({
+function hn({
   api: n,
   enabled: e = !0,
   ...t
 }) {
-  return ce({
-    queryKey: C.notes(t),
+  return Be({
+    queryKey: B.notes(t),
     queryFn: () => n.getNotes(t),
     enabled: e
   });
 }
-function Ct(n) {
-  const e = j();
-  return P({
+function pn(n) {
+  const e = ne();
+  return oe({
     mutationFn: ({ id: t, input: o }) => n.updateNote(t, o),
     onMutate: async ({ id: t, input: o }) => {
-      await e.cancelQueries({ queryKey: C.all });
-      const s = e.getQueryCache().findAll({ queryKey: C.all }), a = /* @__PURE__ */ new Map();
-      for (const c of s) {
-        const u = c.state.data;
-        u && (a.set(c.queryKey, u), e.setQueryData(c.queryKey, {
-          ...u,
-          notes: u.notes.map(
-            (d) => d.id === t ? { ...d, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : d
+      await e.cancelQueries({ queryKey: B.all });
+      const s = e.getQueryCache().findAll({ queryKey: B.all }), i = /* @__PURE__ */ new Map();
+      for (const d of s) {
+        const f = d.state.data;
+        f && (i.set(d.queryKey, f), e.setQueryData(d.queryKey, {
+          ...f,
+          notes: f.notes.map(
+            (c) => c.id === t ? { ...c, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : c
           )
         }));
       }
-      return { previousData: a };
+      return { previousData: i };
     },
     onError: (t, o, r) => {
       if (r != null && r.previousData)
-        for (const [s, a] of r.previousData)
-          e.setQueryData(s, a);
+        for (const [s, i] of r.previousData)
+          e.setQueryData(s, i);
     },
     onSettled: () => {
-      e.invalidateQueries({ queryKey: C.all });
+      e.invalidateQueries({ queryKey: B.all });
     }
   });
 }
-const De = "Notebook", xe = "Notes", Re = "Important", ke = "Unclear", Ae = "Edit note", Le = "Save", He = "Cancel", Fe = "Delete note", _e = "Remove from Notebook", je = "Add a note (optional).", Pe = "Mark important", qe = "Mark unclear", Me = "Saved to Notebook.", We = "Note updated", $e = "Note deleted", Be = "Error saving to Notebook.", Ue = "Error updating note", Xe = "Note deletion failed", Ke = "Loading notes", Qe = "Failed to load notes", Ve = "Start capturing your notes", Ge = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", Ye = "Nothing here yet", ze = "Adjust your filters or create a new note to get started.", Ze = "You have no notes for the selected filter", Je = "Previous page", et = "Next page", tt = "All courses", nt = "All notes", ot = "Close Notebook panel", rt = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", B = {
-  notebook: De,
-  notes: xe,
-  important: Re,
-  unclear: ke,
-  editNote: Ae,
-  save: Le,
-  cancel: He,
-  deleteNote: Fe,
-  removeFromNotebook: _e,
-  addNoteOptional: je,
-  markImportant: Pe,
-  markUnclear: qe,
-  savedToNotebook: Me,
-  noteUpdated: We,
-  noteDeleted: $e,
-  errorSavingNote: Be,
-  errorUpdatingNote: Ue,
-  noteDeletionFailed: Xe,
-  loadingNotes: Ke,
-  failedToLoadNotes: Qe,
-  emptyStateHeading: Ve,
-  emptyStateDescription: Ge,
-  nothingHereYet: Ye,
-  adjustFiltersOrCreate: ze,
-  noNotesForFilter: Ze,
-  previousPage: Je,
-  nextPage: et,
-  allCourses: tt,
-  allNotes: nt,
-  closeNotebookPanel: ot,
-  featureDescription: rt
-}, oe = G(null);
-function re(n, e) {
-  const t = B[n] ?? n;
-  return e ? t.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : t;
-}
-function st({
-  translations: n,
-  translate: e,
-  children: t
-}) {
-  const r = {
-    translations: { ...B, ...n },
-    translate: e ?? re
-  };
-  return /* @__PURE__ */ _(oe.Provider, { value: r, children: t });
-}
-function vt() {
-  const n = Y(oe);
-  return n || { translations: B, translate: re };
-}
-const it = {
+const jt = {
   selectedNoteId: null,
   isNoteEditing: !1,
   isTrayOpen: !1
 };
-function at(n, e) {
+function Ut(n, e) {
   switch (e.type) {
     case "SELECT_NOTE":
       return {
@@ -689,20 +732,20 @@ function at(n, e) {
       return n;
   }
 }
-const se = G(null);
-function Ot({
+const ke = ye(null);
+function Nn({
   api: n,
   currentUserId: e,
   objectId: t,
   objectType: o,
   courseId: r,
   pageLastModifiedAt: s,
-  onAnalyticsEvent: a,
-  translations: c,
-  translate: u,
-  children: d
+  onAnalyticsEvent: i,
+  translations: d,
+  translate: f,
+  children: c
 }) {
-  const [h, f] = ue(at, it), l = de(
+  const [g, m] = Me(Ut, jt), u = Ee(
     () => ({
       api: n,
       currentUserId: e,
@@ -710,13 +753,13 @@ function Ot({
       objectType: o,
       courseId: r,
       pageLastModifiedAt: s,
-      onAnalyticsEvent: a,
-      ...h,
-      selectNote: (m, N = !1) => f({ type: "SELECT_NOTE", payload: { id: m, isEditing: N } }),
-      clearSelectedNote: () => f({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (m) => f({ type: "SET_EDITING", payload: m }),
-      openTray: () => f({ type: "OPEN_TRAY" }),
-      closeTray: () => f({ type: "CLOSE_TRAY" })
+      onAnalyticsEvent: i,
+      ...g,
+      selectNote: (p, N = !1) => m({ type: "SELECT_NOTE", payload: { id: p, isEditing: N } }),
+      clearSelectedNote: () => m({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (p) => m({ type: "SET_EDITING", payload: p }),
+      openTray: () => m({ type: "OPEN_TRAY" }),
+      closeTray: () => m({ type: "CLOSE_TRAY" })
     }),
     [
       n,
@@ -725,37 +768,329 @@ function Ot({
       o,
       r,
       s,
-      a,
-      h
+      i,
+      g
     ]
   );
-  return /* @__PURE__ */ _(se.Provider, { value: l, children: /* @__PURE__ */ _(st, { translations: c, translate: u, children: d }) });
+  return /* @__PURE__ */ a(ke.Provider, { value: u, children: /* @__PURE__ */ a(Bt, { translations: d, translate: f, children: c }) });
 }
-function wt() {
-  const n = Y(se);
+function bn() {
+  const n = Ce(ke);
   if (!n)
     throw new Error("useNotebook must be used within a NotebookProvider");
   return n;
 }
+const Wt = {
+  [b.IMPORTANT]: {
+    color: "info",
+    translationKey: "important",
+    icon: /* @__PURE__ */ a(te, { size: "x-small" })
+  },
+  [b.CONFUSING]: {
+    color: "danger",
+    translationKey: "unclear",
+    icon: /* @__PURE__ */ a(ee, { size: "x-small" })
+  }
+}, qt = ({ type: n, onTypeChange: e, renderAsMenuTrigger: t = !1 }) => {
+  const { translations: o } = Y(), r = Wt[n], s = o[r.translationKey], [i, d] = j(!1), f = K(null), c = K(null), g = Pe(
+    (m) => {
+      e == null || e(m), d(!1);
+    },
+    [e]
+  );
+  return t && e ? /* @__PURE__ */ C(
+    F,
+    {
+      placement: "bottom start",
+      show: i,
+      onToggle: (m) => d(m),
+      shouldHideOnSelect: !0,
+      shouldFocusTriggerOnClose: !0,
+      trigger: /* @__PURE__ */ C(me, { color: r.color, renderIcon: r.icon, children: [
+        s,
+        " ",
+        /* @__PURE__ */ a(Ae, { size: "x-small" })
+      ] }),
+      children: [
+        /* @__PURE__ */ C(F.Item, { ref: f, onClick: () => g(b.CONFUSING), children: [
+          /* @__PURE__ */ a(ee, { size: "x-small" }),
+          ` ${o.markUnclear}`
+        ] }),
+        /* @__PURE__ */ C(F.Item, { ref: c, onClick: () => g(b.IMPORTANT), children: [
+          /* @__PURE__ */ a(te, { size: "x-small" }),
+          ` ${o.markImportant}`
+        ] })
+      ]
+    }
+  ) : /* @__PURE__ */ a(me, { color: r.color, renderIcon: r.icon, children: s });
+};
+function be(n, e) {
+  return (n instanceof Date ? n : new Date(n)).toLocaleString(e, {
+    year: "numeric",
+    month: "short",
+    day: "numeric"
+  });
+}
+const yn = ({
+  noteId: n,
+  date: e,
+  highlight: t,
+  note: o,
+  type: r,
+  onClick: s,
+  onDelete: i,
+  onSaveNote: d,
+  onTypeChange: f,
+  isActive: c,
+  isPanelView: g = !1,
+  courseName: m,
+  locale: u,
+  highlightTheme: p,
+  cardTheme: N,
+  renderLink: v,
+  href: I
+}) => {
+  const { translations: T } = Y(), [D, h] = j(!1), [y, w] = j(!1), [A, L] = j(o || ""), [V, k] = j(!1), S = r === b.IMPORTANT ? T.important : T.unclear, W = (E) => {
+    E.key === "Enter" && (E.preventDefault(), s == null || s());
+  }, M = [S, T.note];
+  t && M.push(t), o && M.push(o), e && M.push(be(e, u)), m && M.push(m);
+  const _ = M.join(", "), ce = r === b.CONFUSING ? N.confusingBorderColor : N.importantBorderColor, Re = {
+    borderStyle: "solid",
+    borderColor: c || D ? ce : Q(ce, 0.5),
+    borderWidth: "0.0625rem 0.0625rem 0.25rem 0.25rem",
+    borderRadius: "1rem",
+    padding: "1rem",
+    cursor: y ? "default" : "pointer",
+    position: "relative"
+  }, de = (
+    // biome-ignore lint/a11y/noStaticElementInteractions: role is conditionally set to "button"
+    // biome-ignore lint/a11y/useAriaPropsSupportedByRole: aria-label applies when role="button"
+    /* @__PURE__ */ C(
+      "div",
+      {
+        role: I || y ? void 0 : "button",
+        "aria-label": I ? void 0 : _,
+        "aria-pressed": I || y ? void 0 : c,
+        tabIndex: I || c ? -1 : 0,
+        "data-testid": "note-card",
+        onClick: c ? void 0 : s,
+        onMouseEnter: () => h(!0),
+        onMouseLeave: () => h(!1),
+        onKeyDown: c ? void 0 : W,
+        style: Re,
+        children: [
+          /* @__PURE__ */ C(x, { direction: "column", gap: "small", children: [
+            /* @__PURE__ */ a(
+              qt,
+              {
+                type: r,
+                onTypeChange: g && f ? (E) => f(n, E) : void 0,
+                renderAsMenuTrigger: g && !!f && !!c
+              }
+            ),
+            t ? /* @__PURE__ */ a("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: /* @__PURE__ */ a(P, { children: c && g ? /* @__PURE__ */ a(
+              Ne,
+              {
+                type: r,
+                isCardActive: !!c || D,
+                theme: p,
+                children: t
+              }
+            ) : /* @__PURE__ */ a(J, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ a(
+              Ne,
+              {
+                type: r,
+                isCardActive: !!c || D,
+                theme: p,
+                children: t
+              }
+            ) }) }) }) : /* @__PURE__ */ a(_t, {}),
+            /* @__PURE__ */ C(x, { direction: "column", gap: c ? "small" : "none", children: [
+              y && g ? /* @__PURE__ */ C(x, { direction: "column", gap: "x-small", children: [
+                /* @__PURE__ */ a(
+                  _e,
+                  {
+                    label: /* @__PURE__ */ a(He, { children: T.editNote }),
+                    value: A,
+                    onChange: (E) => L(E.target.value),
+                    placeholder: T.addNoteOptional
+                  }
+                ),
+                /* @__PURE__ */ C(x, { gap: "xx-small", children: [
+                  /* @__PURE__ */ a(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ a(
+                    q,
+                    {
+                      display: "block",
+                      size: "small",
+                      onClick: () => {
+                        L(o || ""), w(!1);
+                      },
+                      children: T.cancel
+                    }
+                  ) }),
+                  /* @__PURE__ */ a(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ a(
+                    q,
+                    {
+                      display: "block",
+                      color: "primary",
+                      size: "small",
+                      onClick: () => {
+                        d == null || d(n, A), w(!1);
+                      },
+                      interaction: A.trim() ? "enabled" : "disabled",
+                      children: T.save
+                    }
+                  ) })
+                ] })
+              ] }) : o ? /* @__PURE__ */ a("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: c && g ? /* @__PURE__ */ C(P, { children: [
+                o,
+                " ",
+                /* @__PURE__ */ a(
+                  Z,
+                  {
+                    size: "small",
+                    withBackground: !1,
+                    withBorder: !1,
+                    screenReaderLabel: T.editNote,
+                    onClick: (E) => {
+                      E.stopPropagation(), w(!0);
+                    },
+                    children: /* @__PURE__ */ a(ue, {})
+                  }
+                )
+              ] }) : /* @__PURE__ */ a(P, { children: /* @__PURE__ */ a(J, { maxLines: 3, truncate: "word", children: o }) }) }) : g && c ? /* @__PURE__ */ a("div", { children: /* @__PURE__ */ C(P, { color: "secondary", children: [
+                T.addNotePrompt,
+                " ",
+                /* @__PURE__ */ a(
+                  Z,
+                  {
+                    size: "small",
+                    withBackground: !1,
+                    withBorder: !1,
+                    screenReaderLabel: T.editNote,
+                    onClick: (E) => {
+                      E.stopPropagation(), w(!0);
+                    },
+                    children: /* @__PURE__ */ a(ue, {})
+                  }
+                )
+              ] }) }) : null,
+              /* @__PURE__ */ C(x, { justifyItems: "space-between", alignItems: "center", children: [
+                /* @__PURE__ */ a(P, { size: "small", color: "secondary", children: be(e, u) }),
+                c && i && /* @__PURE__ */ a(
+                  Z,
+                  {
+                    size: "small",
+                    withBackground: !1,
+                    withBorder: !1,
+                    color: "danger",
+                    screenReaderLabel: T.deleteNote,
+                    onClick: (E) => {
+                      E.stopPropagation(), k(!0);
+                    },
+                    children: /* @__PURE__ */ a(fe, {})
+                  }
+                )
+              ] }),
+              m && /* @__PURE__ */ a(P, { size: "small", color: "secondary", children: m })
+            ] })
+          ] }),
+          V && i && /* @__PURE__ */ a(
+            je,
+            {
+              as: "div",
+              background: "primary",
+              padding: "medium",
+              borderRadius: "large",
+              position: "absolute",
+              insetBlockStart: "0",
+              insetBlockEnd: "0",
+              insetInlineStart: "0",
+              insetInlineEnd: "0",
+              stacking: "above",
+              children: /* @__PURE__ */ C(
+                x,
+                {
+                  direction: "column",
+                  justifyItems: "center",
+                  alignItems: "center",
+                  gap: "x-small",
+                  height: "100%",
+                  children: [
+                    /* @__PURE__ */ a(
+                      q,
+                      {
+                        display: "block",
+                        color: "danger",
+                        size: "small",
+                        renderIcon: /* @__PURE__ */ a(fe, {}),
+                        onClick: (E) => {
+                          E.stopPropagation(), i(n), k(!1);
+                        },
+                        children: T.deleteNote
+                      }
+                    ),
+                    /* @__PURE__ */ a(
+                      q,
+                      {
+                        display: "block",
+                        size: "small",
+                        onClick: (E) => {
+                          E.stopPropagation(), k(!1);
+                        },
+                        children: T.cancel
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ]
+      }
+    )
+  );
+  return I && v ? v({ href: I, children: de, ariaLabel: _ }) : de;
+}, Cn = ({ currentType: n, onSelectReaction: e }) => {
+  const { translations: t } = Y(), o = K(null), r = K(null);
+  return Fe(() => {
+    n === b.CONFUSING && o.current ? o.current.focus() : n === b.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
+  }, [n]), /* @__PURE__ */ C(F, { children: [
+    /* @__PURE__ */ C(F.Item, { ref: o, onClick: () => e(b.CONFUSING), children: [
+      /* @__PURE__ */ a(ee, { size: "x-small" }),
+      ` ${t.markUnclear}`
+    ] }),
+    /* @__PURE__ */ C(F.Item, { ref: r, onClick: () => e(b.IMPORTANT), children: [
+      /* @__PURE__ */ a(te, { size: "x-small" }),
+      ` ${t.markImportant}`
+    ] })
+  ] });
+};
 export {
-  Ot as NotebookProvider,
-  I as REACTION_TYPE,
-  A as RangeAnchor,
-  E as TextPosition,
-  v as TextPositionAnchor,
-  S as TextRange,
-  yt as addHighlight,
-  Nt as getPlacement,
-  pt as isOverlapping,
-  Q as nodeFromXPath,
-  ht as recoverHighlights,
-  Et as removeHighlights,
-  mt as scrollToHighlight,
-  St as useCreateNote,
-  bt as useDeleteNote,
-  Tt as useGetNotes,
-  wt as useNotebook,
-  vt as useNotebookTranslations,
-  Ct as useUpdateNote,
-  K as xpathFromNode
+  Ne as Highlight,
+  _t as HighlightError,
+  yn as NoteCard,
+  qt as NoteChip,
+  Cn as NoteReactionMenu,
+  Nn as NotebookProvider,
+  b as REACTION_TYPE,
+  G as RangeAnchor,
+  O as TextPosition,
+  H as TextPositionAnchor,
+  R as TextRange,
+  un as addHighlight,
+  Q as createTransparentColor,
+  cn as getPlacement,
+  dn as isOverlapping,
+  he as nodeFromXPath,
+  ln as recoverHighlights,
+  fn as removeHighlights,
+  an as scrollToHighlight,
+  mn as useCreateNote,
+  gn as useDeleteNote,
+  hn as useGetNotes,
+  bn as useNotebook,
+  Y as useNotebookTranslations,
+  pn as useUpdateNote,
+  ge as xpathFromNode
 };