@instructure/platform-notebook 1.8.0 → 1.9.0

package/dist/index.js

@@ -1,14 +1,14 @@
-import { jsx as i, jsxs as C, Fragment as dt } from "react/jsx-runtime";
-import { createContext as ze, useMemo as me, useContext as qe, useReducer as Ke, useRef as _, useEffect as j, useState as U, useCallback as K } from "react";
+import { jsx as i, jsxs as x, Fragment as dt } from "react/jsx-runtime";
+import { createContext as ze, useMemo as me, useContext as qe, useReducer as Ke, useRef as F, useEffect as W, useState as j, useCallback as q } from "react";
 import { createPortal as ut } from "react-dom";
 import { z as f } from "zod";
 import ft from "diff-match-patch";
 import { useQueryClient as xe, useMutation as Re, useQuery as mt } from "@tanstack/react-query";
 import { CloseButton as gt, Button as te, IconButton as ue } from "@instructure/ui-buttons";
-import { Flex as x } from "@instructure/ui-flex";
+import { Flex as R } from "@instructure/ui-flex";
 import { Heading as Ne } from "@instructure/ui-heading";
 import { Tray as ht } from "@instructure/ui-tray";
-import { View as Q } from "@instructure/ui-view";
+import { View as X } from "@instructure/ui-view";
 import { IconQuestionLine as ke, IconPinLine as we, IconWarningLine as pt, IconNoteLine as yt, IconEditLine as ve, IconTrashLine as ye, IconArrowStartLine as Nt } from "@instructure/ui-icons";
 import { Menu as ce } from "@instructure/ui-menu";
 import { TruncateText as Ie } from "@instructure/ui-truncate-text";
@@ -35,7 +35,7 @@ const vt = f.object({
   range: vt.nullable(),
   pageLastModifiedAt: f.string()
 });
-var A = /* @__PURE__ */ ((t) => (t.IMPORTANT = "Important", t.CONFUSING = "Confusing", t))(A || {});
+var L = /* @__PURE__ */ ((t) => (t.IMPORTANT = "Important", t.CONFUSING = "Confusing", t))(L || {});
 const Le = f.enum([
   "Important",
   "Confusing"
@@ -122,17 +122,17 @@ class ne {
     return o.setStart(e.node, e.offset), o.setEnd(n.node, n.offset), o;
   }
   static fromRange(e) {
-    const n = X.fromPoint(e.startContainer, e.startOffset), o = X.fromPoint(e.endContainer, e.endOffset);
+    const n = K.fromPoint(e.startContainer, e.startOffset), o = K.fromPoint(e.endContainer, e.endOffset);
     return !n || !o ? null : new ne(n, o);
   }
   static fromOffsets(e, n, o) {
-    return new ne(new X(e, n), new X(e, o));
+    return new ne(new K(e, n), new K(e, o));
   }
   relativeTo(e) {
     return new ne(this.start.relativeTo(e), this.end.relativeTo(e));
   }
 }
-class X {
+class K {
   constructor(e, n) {
     n < 0 && console.error("Offset is invalid"), this.element = e, this.offset = n;
   }
@@ -154,9 +154,9 @@ class X {
   static fromCharOffset(e, n) {
     switch (e.nodeType) {
       case Node.TEXT_NODE:
-        return X.fromPoint(e, n);
+        return K.fromPoint(e, n);
       case Node.ELEMENT_NODE:
-        return new X(e, n);
+        return new K(e, n);
       default:
         return console.error("Node is not an element or text node"), null;
     }
@@ -169,7 +169,7 @@ class X {
         if (!e.parentElement)
           return console.error("Text node has no parent"), null;
         const o = Ge(e) + n;
-        return new X(e.parentElement, o);
+        return new K(e.parentElement, o);
       }
       case Node.ELEMENT_NODE: {
         if (n < 0 || n > e.childNodes.length)
@@ -177,7 +177,7 @@ class X {
         let o = 0;
         for (let r = 0; r < n; r++)
           o += Ye(e.childNodes[r]);
-        return new X(e, o);
+        return new K(e, o);
       }
       default:
         return console.error("Point is not in an element or text node"), null;
@@ -189,7 +189,7 @@ class X {
     let n = this.element, o = this.offset;
     for (; n !== e; )
       o += Ge(n), n.parentElement && (n = n.parentElement);
-    return new X(n, o);
+    return new K(n, o);
   }
 }
 const wt = (t) => {
@@ -269,7 +269,7 @@ class ie {
     const r = He(n.endContainer, e);
     if (!r)
       return console.error("Failed to resolve endContainer XPath"), null;
-    const s = X.fromCharOffset(o, n.startOffset), l = X.fromCharOffset(r, n.endOffset);
+    const s = K.fromCharOffset(o, n.startOffset), l = K.fromCharOffset(r, n.endOffset);
     if (!s || !l)
       return null;
     const a = new ne(s, l).toRange();
@@ -352,10 +352,10 @@ const Ye = (t) => {
     const p = r.match_main(s, a, o), d = p + a.length;
     if (c === -1 || p === -1)
       return null;
-    const g = d - c, S = Math.abs(g - m);
-    if ((c > d || S > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, l, d), c !== -1 && c < d))
+    const h = d - c, E = Math.abs(h - m);
+    if ((c > d || E > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, l, d), c !== -1 && c < d))
       return Pt(t, c, d, m);
-    if (c < d && S <= 5)
+    if (c < d && E <= 5)
       return oe.fromSelector(t, {
         start: c,
         end: d
@@ -428,11 +428,11 @@ const Ye = (t) => {
   if (!e.length)
     return null;
   const n = e[0], o = e[e.length - 1], r = 4, s = 16, l = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight, m = (y) => {
-    const T = y + he;
-    return y >= s && T <= l - s;
+    const S = y + he;
+    return y >= s && S <= l - s;
   }, c = (y) => {
-    const T = y + ge;
-    return y >= s && T <= a - s;
+    const S = y + ge;
+    return y >= s && S <= a - s;
   };
   let p;
   const d = n.right - he;
@@ -443,19 +443,19 @@ const Ye = (t) => {
     if (m(y))
       p = y;
     else {
-      const h = (n.left + n.right) / 2 - he / 2;
-      m(h) ? p = h : d < s ? p = s : p = l - he - s;
+      const g = (n.left + n.right) / 2 - he / 2;
+      m(g) ? p = g : d < s ? p = s : p = l - he - s;
     }
   }
-  let g;
-  const S = o.bottom + r;
-  if (c(S))
-    g = S;
+  let h;
+  const E = o.bottom + r;
+  if (c(E))
+    h = E;
   else {
     const y = n.top - ge - r;
-    c(y) ? g = y : S + ge > a - s ? g = a - ge - s : g = s;
+    c(y) ? h = y : E + ge > a - s ? h = a - ge - s : h = s;
   }
-  return { top: g, left: p };
+  return { top: h, left: p };
 }, Ht = (t, e) => {
   for (const n of e)
     if (t.start < n.end && t.end > n.start)
@@ -503,44 +503,44 @@ const Ye = (t) => {
     Qt(e, n);
     return;
   }
-  const l = e.type === A.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, a = e.id === e.selectedNoteId, m = a ? l : De(l, 0.5), c = e.type === A.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, p = e.type === A.IMPORTANT ? "solid" : "dashed", d = document.createElement("span");
+  const l = e.type === L.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, a = e.id === e.selectedNoteId, m = a ? l : De(l, 0.5), c = e.type === L.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, p = e.type === L.IMPORTANT ? "solid" : "dashed", d = document.createElement("span");
   d.id = `${r}-start`, d.className = "highlight-marker-start", d.dataset.highlightId = o || "";
-  const g = e.labelPrefix ?? zt;
-  d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-label", g), d.setAttribute("aria-haspopup", "dialog"), d.setAttribute("aria-expanded", String(a && !!e.isTrayOpen)), a && d.setAttribute("aria-current", "true"), e.popupId && d.setAttribute("aria-controls", e.popupId), d.style.position = "relative", d.style.fontSize = "0", d.style.lineHeight = "0", d.style.width = "0", d.style.height = "0", d.style.margin = "0", d.style.padding = "0", d.style.border = "0", d.style.outline = "none";
-  const S = document.createElement("span");
-  S.id = Ze(o), S.className = "highlight-marker-end", S.dataset.highlightId = o || "";
+  const h = e.labelPrefix ?? zt;
+  d.setAttribute("role", "button"), d.setAttribute("tabindex", "0"), d.setAttribute("aria-label", h), d.setAttribute("aria-haspopup", "dialog"), d.setAttribute("aria-expanded", String(a && !!e.isTrayOpen)), a && d.setAttribute("aria-current", "true"), e.popupId && d.setAttribute("aria-controls", e.popupId), d.style.position = "relative", d.style.fontSize = "0", d.style.lineHeight = "0", d.style.width = "0", d.style.height = "0", d.style.margin = "0", d.style.padding = "0", d.style.border = "0", d.style.outline = "none";
+  const E = document.createElement("span");
+  E.id = Ze(o), E.className = "highlight-marker-end", E.dataset.highlightId = o || "";
   const y = t.cloneRange();
-  y.collapse(!1), y.insertNode(S);
-  const T = t.cloneRange();
-  T.collapse(!0), T.insertNode(d);
-  const h = document.createRange();
-  h.setStartAfter(d), h.setEndBefore(S);
-  const B = Kt(h).filter((N) => N.textContent && N.textContent.length > 0);
-  B.forEach((N, v) => {
-    var z;
-    const P = N.parentElement;
-    if ((P == null ? void 0 : P.dataset.highlightId) === o) return;
-    const F = v === 0, b = v === B.length - 1, D = B.length === 1;
-    let k;
-    D ? k = "single" : F ? k = "first" : b ? k = "last" : k = "middle";
-    const w = document.createElement("span");
-    w.className = "highlight-content", w.dataset.highlightId = o || "", w.dataset.position = k, w.style.textDecorationLine = "underline", w.style.textDecorationColor = c, w.style.textDecorationStyle = p, w.style.textDecorationThickness = n.borderWidthSmall, w.style.textUnderlineOffset = n.underlineOffset, w.style.cursor = "pointer", et(w, a, m, c, p), w.addEventListener("click", (q) => {
+  y.collapse(!1), y.insertNode(E);
+  const S = t.cloneRange();
+  S.collapse(!0), S.insertNode(d);
+  const g = document.createRange();
+  g.setStartAfter(d), g.setEndBefore(E);
+  const G = Kt(g).filter((N) => N.textContent && N.textContent.length > 0);
+  G.forEach((N, C) => {
+    var _;
+    const D = N.parentElement;
+    if ((D == null ? void 0 : D.dataset.highlightId) === o) return;
+    const M = C === 0, P = C === G.length - 1, T = G.length === 1;
+    let A;
+    T ? A = "single" : M ? A = "first" : P ? A = "last" : A = "middle";
+    const v = document.createElement("span");
+    v.className = "highlight-content", v.dataset.highlightId = o || "", v.dataset.position = A, v.style.textDecorationLine = "underline", v.style.textDecorationColor = c, v.style.textDecorationStyle = p, v.style.textDecorationThickness = n.borderWidthSmall, v.style.textUnderlineOffset = n.underlineOffset, v.style.cursor = "pointer", et(v, a, m, c, p), v.addEventListener("click", (z) => {
       var Y;
-      q.target.tagName !== "A" && ((Y = e.onClick) == null || Y.call(e));
-    }), (z = N.parentNode) == null || z.insertBefore(w, N), w.appendChild(N);
+      z.target.tagName !== "A" && ((Y = e.onClick) == null || Y.call(e));
+    }), (_ = N.parentNode) == null || _.insertBefore(v, N), v.appendChild(N);
   }), d.addEventListener("click", (N) => {
-    var v;
-    N.target.tagName !== "A" && ((v = e.onClick) == null || v.call(e));
+    var C;
+    N.target.tagName !== "A" && ((C = e.onClick) == null || C.call(e));
   }), d.addEventListener("keydown", (N) => {
-    var v;
+    var C;
     if (N.key === "Enter" || N.key === " ")
-      N.preventDefault(), (v = e.onClick) == null || v.call(e);
+      N.preventDefault(), (C = e.onClick) == null || C.call(e);
     else if (N.key === "Tab" && !N.shiftKey) {
-      const P = document.querySelectorAll(fe(o));
-      for (const F of P) {
-        const b = F.querySelector("a");
-        if (b) {
-          N.preventDefault(), b.focus();
+      const D = document.querySelectorAll(fe(o));
+      for (const M of D) {
+        const P = M.querySelector("a");
+        if (P) {
+          N.preventDefault(), P.focus();
           break;
         }
       }
@@ -548,19 +548,19 @@ const Ye = (t) => {
   }), d.addEventListener("focus", () => {
     document.querySelectorAll(
       `.highlight-content${fe(o)}`
-    ).forEach((v) => {
-      v.style.boxShadow = `0 0 0 ${Gt} ${n.colors.focusOutline}`, v.style.borderRadius = Ut;
+    ).forEach((C) => {
+      C.style.boxShadow = `0 0 0 ${Gt} ${n.colors.focusOutline}`, C.style.borderRadius = Ut;
     });
   }), d.addEventListener("blur", () => {
     document.querySelectorAll(
       `.highlight-content${fe(o)}`
-    ).forEach((v) => {
-      v.style.boxShadow = "", v.style.borderRadius = v.dataset.selected ? Je : "";
+    ).forEach((C) => {
+      C.style.boxShadow = "", C.style.borderRadius = C.dataset.selected ? Je : "";
     });
   });
 };
 function Qt(t, e) {
-  const n = t.type === A.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, o = t.id === t.selectedNoteId, r = o ? n : De(n, 0.5), s = t.type === A.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline, l = t.type === A.IMPORTANT ? "solid" : "dashed";
+  const n = t.type === L.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground, o = t.id === t.selectedNoteId, r = o ? n : De(n, 0.5), s = t.type === L.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline, l = t.type === L.IMPORTANT ? "solid" : "dashed";
   document.querySelectorAll(
     `.highlight-content${fe(t.id ?? "")}`
   ).forEach((c) => {
@@ -763,7 +763,7 @@ function Eo({
   translate: c,
   children: p
 }) {
-  const [d, g] = Ke(Un, Gn(a)), S = _(a != null), y = me(
+  const [d, h] = Ke(Un, Gn(a)), E = F(a != null), y = me(
     () => ({
       api: t,
       currentUserId: e,
@@ -772,14 +772,14 @@ function Eo({
       courseId: r,
       pageLastModifiedAt: s,
       ...d,
-      selectNote: (T, h = !1) => g({ type: "SELECT_NOTE", payload: { id: T, isEditing: h } }),
-      clearSelectedNote: () => g({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (T) => g({ type: "SET_EDITING", payload: T }),
+      selectNote: (S, g = !1) => h({ type: "SELECT_NOTE", payload: { id: S, isEditing: g } }),
+      clearSelectedNote: () => h({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (S) => h({ type: "SET_EDITING", payload: S }),
       openTray: () => {
-        S.current || (S.current = !0, l == null || l()), g({ type: "OPEN_TRAY" });
+        E.current || (E.current = !0, l == null || l()), h({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        S.current = !1, g({ type: "CLOSE_TRAY" });
+        E.current = !1, h({ type: "CLOSE_TRAY" });
       }
     }),
     [t, e, n, o, r, s, l, d]
@@ -802,8 +802,8 @@ const lt = "notebook-tray-content", So = ({ children: t }) => {
       onDismiss: n,
       placement: "end",
       size: "regular",
-      children: /* @__PURE__ */ C(x, { direction: "column", height: "100vh", id: lt, children: [
-        /* @__PURE__ */ i(x.Item, { children: /* @__PURE__ */ i(Q, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ C(x, { justifyItems: "space-between", alignItems: "center", children: [
+      children: /* @__PURE__ */ x(R, { direction: "column", height: "100vh", id: lt, children: [
+        /* @__PURE__ */ i(R.Item, { children: /* @__PURE__ */ i(X, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ x(R, { justifyItems: "space-between", alignItems: "center", children: [
           /* @__PURE__ */ i(Ne, { level: "h3", children: o.notebook }),
           /* @__PURE__ */ i(
             gt,
@@ -815,16 +815,16 @@ const lt = "notebook-tray-content", So = ({ children: t }) => {
             }
           )
         ] }) }) }),
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: t })
+        /* @__PURE__ */ i(R.Item, { shouldGrow: !0, shouldShrink: !0, overflowY: "auto", overflowX: "hidden", children: t })
       ] })
     }
   );
 }, jn = ({ currentType: t, onSelectReaction: e }) => {
-  const { translations: n } = V(), o = _(null), r = _(null);
-  return j(() => {
-    t === A.CONFUSING && o.current ? o.current.focus() : t === A.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
+  const { translations: n } = V(), o = F(null), r = F(null);
+  return W(() => {
+    t === L.CONFUSING && o.current ? o.current.focus() : t === L.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
   }, [t]), /* @__PURE__ */ i(
-    Q,
+    X,
     {
       as: "div",
       background: "primary",
@@ -832,23 +832,23 @@ const lt = "notebook-tray-content", So = ({ children: t }) => {
       borderColor: "secondary",
       borderRadius: "medium",
       shadow: "resting",
-      children: /* @__PURE__ */ C(ce, { children: [
-        /* @__PURE__ */ C(
+      children: /* @__PURE__ */ x(ce, { children: [
+        /* @__PURE__ */ x(
           ce.Item,
           {
             ref: o,
-            onClick: () => e(A.CONFUSING),
+            onClick: () => e(L.CONFUSING),
             children: [
               /* @__PURE__ */ i(ke, { size: "x-small" }),
               ` ${n.markUnclear}`
             ]
           }
         ),
-        /* @__PURE__ */ C(
+        /* @__PURE__ */ x(
           ce.Item,
           {
             ref: r,
-            onClick: () => e(A.IMPORTANT),
+            onClick: () => e(L.IMPORTANT),
             children: [
               /* @__PURE__ */ i(we, { size: "x-small" }),
               ` ${n.markImportant}`
@@ -874,158 +874,158 @@ function To({
     objectType: c,
     courseId: p,
     pageLastModifiedAt: d,
-    selectedNoteId: g,
-    isTrayOpen: S,
+    selectedNoteId: h,
+    isTrayOpen: E,
     selectNote: y,
-    openTray: T
-  } = it(), { translations: h } = V(), { data: W } = nt({
+    openTray: S
+  } = it(), { translations: g } = V(), { data: Q } = nt({
     api: a,
     courseId: p,
     learningObject: { type: c, id: m }
-  }), { mutate: B } = Vt(a), { mutateAsync: N } = en(a), { mutate: v } = Zt(a), P = _([]), [F, b] = U([]), [D, k] = U(null), [w, z] = U(""), [q, Y] = U(null), re = _(null);
-  re.current = q;
-  const [Z, J] = U(!1);
-  j(() => {
-    const R = t.current;
-    if (!R) return;
-    const I = R.closest(".user_content") ?? R;
+  }), { mutate: G } = Vt(a), { mutateAsync: N } = en(a), { mutate: C } = Zt(a), D = F([]), [M, P] = j([]), [T, A] = j(null), [v, _] = j(""), [z, Y] = j(null), re = F(null);
+  re.current = z;
+  const [Z, J] = j(!1);
+  W(() => {
+    const k = t.current;
+    if (!k) return;
+    const I = k.closest(".user_content") ?? k;
     if (I.classList.contains("enhanced")) {
       J(!0);
       return;
     }
-    const M = new MutationObserver((u) => {
-      for (const E of u)
-        if (E.type === "attributes" && E.attributeName === "class" && E.target.classList.contains("enhanced")) {
-          J(!0), M.disconnect();
+    const B = new MutationObserver((u) => {
+      for (const b of u)
+        if (b.type === "attributes" && b.attributeName === "class" && b.target.classList.contains("enhanced")) {
+          J(!0), B.disconnect();
           return;
         }
     });
-    return M.observe(I, { attributes: !0, attributeFilter: ["class"] }), () => M.disconnect();
+    return B.observe(I, { attributes: !0, attributeFilter: ["class"] }), () => B.disconnect();
   }, [t]);
-  const G = K(() => {
-    Y(null), k(null), z("");
+  const U = q(() => {
+    Y(null), A(null), _("");
   }, []);
-  j(() => {
+  W(() => {
     if (!Z || !t.current) return;
     let I = null;
-    const M = () => {
+    const B = () => {
       I && clearTimeout(I), I = setTimeout(() => {
         var Fe;
-        const L = window.getSelection(), H = t.current;
-        if (!(L != null && L.rangeCount) || !H) return;
-        const le = L.toString().trim();
+        const O = window.getSelection(), H = t.current;
+        if (!(O != null && O.rangeCount) || !H) return;
+        const le = O.toString().trim();
         if (le === "") return;
-        const ae = L.getRangeAt(0);
+        const ae = O.getRangeAt(0);
         if (!H.contains(ae.commonAncestorContainer)) return;
         const _e = (Fe = oe.fromRange(H, ae)) == null ? void 0 : Fe.toSelector();
-        _e && !Ht(_e, F) && (k(ae.cloneRange()), z(le), Y($t(ae)));
+        _e && !Ht(_e, M) && (A(ae.cloneRange()), _(le), Y($t(ae)));
       }, n);
-    }, u = (L) => {
-      if (!(L.target instanceof Node)) return;
+    }, u = (O) => {
+      if (!(O.target instanceof Node)) return;
       const H = document.getElementById(Se);
-      H != null && H.contains(L.target) ? (L.preventDefault(), L.stopImmediatePropagation()) : G();
-    }, E = () => {
-      G();
-    }, O = (L) => {
-      L.key === "Escape" && re.current !== null && (G(), L.stopImmediatePropagation());
+      H != null && H.contains(O.target) ? (O.preventDefault(), O.stopImmediatePropagation()) : U();
+    }, b = () => {
+      U();
+    }, w = (O) => {
+      O.key === "Escape" && re.current !== null && (U(), O.stopImmediatePropagation());
     };
-    return document.addEventListener("selectionchange", M), document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), document.addEventListener("keydown", O), window.addEventListener("scroll", E, !0), () => {
-      I && clearTimeout(I), document.removeEventListener("selectionchange", M), document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u), document.removeEventListener("keydown", O), window.removeEventListener("scroll", E, !0);
+    return document.addEventListener("selectionchange", B), document.addEventListener("mousedown", u), document.addEventListener("touchstart", u), document.addEventListener("keydown", w), window.addEventListener("scroll", b, !0), () => {
+      I && clearTimeout(I), document.removeEventListener("selectionchange", B), document.removeEventListener("mousedown", u), document.removeEventListener("touchstart", u), document.removeEventListener("keydown", w), window.removeEventListener("scroll", b, !0);
     };
-  }, [Z, F, n, t, G]);
-  const se = K(
-    (R) => {
+  }, [Z, M, n, t, U]);
+  const se = q(
+    (k) => {
       var H;
       const I = t.current;
-      if (!I || !R.highlightData) return null;
-      const { highlightData: M, reaction: u, id: E } = R, { range: O } = M, L = O && ((H = ie.fromSelector(I, O)) == null ? void 0 : H.toRange());
-      if (L) {
-        const le = u[0] === A.IMPORTANT ? h.important : h.unclear, ae = {
-          id: E,
-          selectedNoteId: g,
+      if (!I || !k.highlightData) return null;
+      const { highlightData: B, reaction: u, id: b } = k, { range: w } = B, O = w && ((H = ie.fromSelector(I, w)) == null ? void 0 : H.toRange());
+      if (O) {
+        const le = u[0] === L.IMPORTANT ? g.important : g.unclear, ae = {
+          id: b,
+          selectedNoteId: h,
           type: u[0],
-          isTrayOpen: S,
-          labelPrefix: `${h.notebookNote} (${le})`,
+          isTrayOpen: E,
+          labelPrefix: `${g.notebookNote} (${le})`,
           popupId: lt,
           onClick: () => {
-            y(E), T();
+            y(b), S();
           }
         };
-        return Xt(L, ae, e), M.textPosition;
+        return Xt(O, ae, e), B.textPosition;
       }
       return null;
     },
-    [t, g, S, e, h, y, T]
+    [t, h, E, e, g, y, S]
   );
-  j(() => {
-    if (!Z || !W || !t.current) return;
-    const R = t.current, I = W.notes, M = /* @__PURE__ */ new Set(), u = [], E = [];
+  W(() => {
+    if (!Z || !Q || !t.current) return;
+    const k = t.current, I = Q.notes, B = /* @__PURE__ */ new Set(), u = [], b = [];
     if (I.length === 0) {
-      if (P.current.length > 0) {
-        for (const O of P.current)
-          Ue(O, R);
-        P.current = [], b([]);
+      if (D.current.length > 0) {
+        for (const w of D.current)
+          Ue(w, k);
+        D.current = [], P([]);
       }
       return;
     }
     if (d && I[0].highlightData.pageLastModifiedAt !== d) {
-      const { notesForUpdate: O, noteIdsForDelete: L } = Mt(
-        R,
+      const { notesForUpdate: w, noteIdsForDelete: O } = Mt(
+        k,
         I,
         d
       );
-      for (const H of O)
+      for (const H of w)
         N({ id: H.id, input: H }).catch((le) => r == null ? void 0 : r(le));
-      for (const H of L)
-        v(H, { onError: s });
+      for (const H of O)
+        C(H, { onError: s });
     } else {
-      for (const O of I) {
-        const L = se(O);
-        M.add(O.id), L && (u.push(O), E.push(L));
+      for (const w of I) {
+        const O = se(w);
+        B.add(w.id), O && (u.push(w), b.push(O));
       }
-      for (const O of P.current)
-        M.has(O.id) || Ue(O, R);
-      b(E), P.current = u, g && Bt(g);
+      for (const w of D.current)
+        B.has(w.id) || Ue(w, k);
+      P(b), D.current = u, h && Bt(h);
     }
   }, [
     Z,
-    W,
+    Q,
     se,
     d,
     t,
     N,
-    v,
-    g
+    C,
+    h
   ]);
-  const $ = (R) => {
+  const $ = (k) => {
     const I = t.current;
-    if (!D || !I) return;
-    const M = ie.fromRange(I, D), u = oe.fromRange(I, D);
-    B(
+    if (!T || !I) return;
+    const B = ie.fromRange(I, T), u = oe.fromRange(I, T);
+    G(
       {
         courseId: p,
         objectId: m,
         objectType: c,
         userText: "",
-        reaction: [R],
+        reaction: [k],
         highlightData: {
-          selectedText: w,
+          selectedText: v,
           textPosition: (u == null ? void 0 : u.toSelector()) ?? null,
-          range: M.toSelector(),
+          range: B.toSelector(),
           pageLastModifiedAt: d ?? ""
         }
       },
       {
-        onSuccess: (E) => {
-          var L;
-          const O = E.id;
-          G(), (L = window.getSelection()) == null || L.removeAllRanges(), y(O), T(), l == null || l(E);
+        onSuccess: (b) => {
+          var O;
+          const w = b.id;
+          U(), (O = window.getSelection()) == null || O.removeAllRanges(), y(w), S(), l == null || l(b);
         },
         onError: o
       }
     );
   };
-  return !D || !q ? null : ut(
+  return !T || !z ? null : ut(
     /* @__PURE__ */ i(
       "div",
       {
@@ -1034,13 +1034,13 @@ function To({
         style: {
           position: "fixed",
           zIndex: 100,
-          top: q.top,
-          left: q.left,
+          top: z.top,
+          left: z.left,
           whiteSpace: "nowrap"
         },
-        onBlur: (R) => {
+        onBlur: (k) => {
           const I = document.getElementById(Se);
-          I != null && I.contains(R.relatedTarget) || G();
+          I != null && I.contains(k.relatedTarget) || U();
         },
         children: /* @__PURE__ */ i(jn, { onSelectReaction: $ })
       }
@@ -1049,12 +1049,12 @@ function To({
   );
 }
 const Wn = (t, e) => ({
-  backgroundColor: t === A.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
-  underlineColor: t === A.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
-  underlineStyle: t === A.IMPORTANT ? "solid" : "dashed"
+  backgroundColor: t === L.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
+  underlineColor: t === L.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
+  underlineStyle: t === L.IMPORTANT ? "solid" : "dashed"
 }), Ce = ({
   children: t,
-  type: e = A.IMPORTANT,
+  type: e = L.IMPORTANT,
   isCardActive: n = !0,
   theme: o
 }) => {
@@ -1071,9 +1071,9 @@ const Wn = (t, e) => ({
   return /* @__PURE__ */ i("span", { "data-note-highlight": "true", style: l, children: t });
 }, at = () => {
   const { translations: t } = V();
-  return /* @__PURE__ */ C(x, { gap: "xx-small", alignItems: "start", as: "div", children: [
-    /* @__PURE__ */ i(x.Item, { as: "div", children: /* @__PURE__ */ i(pt, { color: "error" }) }),
-    /* @__PURE__ */ i(x.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(Ie, { maxLines: 3, children: t.highlightUnavailable }) })
+  return /* @__PURE__ */ x(R, { gap: "xx-small", alignItems: "start", as: "div", children: [
+    /* @__PURE__ */ i(R.Item, { as: "div", children: /* @__PURE__ */ i(pt, { color: "error" }) }),
+    /* @__PURE__ */ i(R.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(Ie, { maxLines: 3, children: t.highlightUnavailable }) })
   ] });
 }, zn = {
   filter: null,
@@ -1119,80 +1119,80 @@ function vo({
 }) {
   var se;
   const [l, a] = Ke(qn, zn), { filter: m, courseFilter: c, currentPage: p, totalPages: d } = l;
-  j(() => {
+  W(() => {
     a({ type: "SET_PAGE", payload: 1 });
   }, [r]);
-  const g = n ? c : e, S = (p - 1) * r, y = !!o, T = {
-    ...g ? { courseId: g } : {},
+  const h = n ? c : e, E = (p - 1) * r, y = !!o, S = {
+    ...h ? { courseId: h } : {},
     ...m ? { reactions: [m] } : {},
     ...o ? { learningObject: o } : {}
   }, {
-    data: h,
-    isLoading: W,
-    isError: B
+    data: g,
+    isLoading: Q,
+    isError: G
   } = tt({
     api: t,
-    filter: T,
-    offset: S,
+    filter: S,
+    offset: E,
     pageSize: r,
     enabled: !y
   }), {
     data: N,
-    isLoading: v,
-    isError: P
+    isLoading: C,
+    isError: D
   } = nt({
     api: t,
-    courseId: g ?? void 0,
+    courseId: h ?? void 0,
     learningObject: o,
     enabled: y
-  }), F = me(() => {
+  }), M = me(() => {
     const $ = (N == null ? void 0 : N.notes) ?? [];
-    return m ? $.filter((R) => R.reaction.includes(m)) : $;
-  }, [N, m]), b = _(null);
-  j(() => {
+    return m ? $.filter((k) => k.reaction.includes(m)) : $;
+  }, [N, m]), P = F(null);
+  W(() => {
     if (!s) {
-      b.current = null;
+      P.current = null;
       return;
     }
-    if (b.current === s) return;
-    const $ = F.findIndex((I) => I.id === s);
+    if (P.current === s) return;
+    const $ = M.findIndex((I) => I.id === s);
     if ($ === -1) return;
-    b.current = s;
-    const R = Math.floor($ / r) + 1;
-    R !== p && a({ type: "FOCUS_PAGE", payload: R });
-  }, [s, F, r, p]);
-  const D = y ? F.slice(S, S + r) : (h == null ? void 0 : h.notes) ?? [], k = y ? v : W, w = y ? P : B, z = y ? Math.max(1, Math.ceil(F.length / r)) : ((se = h == null ? void 0 : h.pageInfo) == null ? void 0 : se.totalNrOfPages) ?? void 0, q = y ? { totalCount: F.length, totalNrOfPages: z } : h == null ? void 0 : h.pageInfo;
-  j(() => {
-    a({ type: "SET_TOTAL_PAGES", payload: z });
-  }, [z]);
-  const Y = K(($) => {
+    P.current = s;
+    const k = Math.floor($ / r) + 1;
+    k !== p && a({ type: "FOCUS_PAGE", payload: k });
+  }, [s, M, r, p]);
+  const T = y ? M.slice(E, E + r) : (g == null ? void 0 : g.notes) ?? [], A = y ? C : Q, v = y ? D : G, _ = y ? Math.max(1, Math.ceil(M.length / r)) : ((se = g == null ? void 0 : g.pageInfo) == null ? void 0 : se.totalNrOfPages) ?? void 0, z = y ? { totalCount: M.length, totalNrOfPages: _ } : g == null ? void 0 : g.pageInfo;
+  W(() => {
+    a({ type: "SET_TOTAL_PAGES", payload: _ });
+  }, [_]);
+  const Y = q(($) => {
     a({ type: "SET_PAGE", payload: $ });
-  }, []), re = K(() => {
+  }, []), re = q(() => {
     a({
       type: "INCREMENT_PAGE"
       /* IncrementPage */
     });
-  }, []), Z = K(() => {
+  }, []), Z = q(() => {
     a({
       type: "DECREMENT_PAGE"
       /* DecrementPage */
     });
-  }, []), J = K(($) => {
+  }, []), J = q(($) => {
     a({ type: "SET_FILTER", payload: $ });
-  }, []), G = K(($) => {
+  }, []), U = q(($) => {
     a({ type: "SET_COURSE_FILTER", payload: $ });
   }, []);
   return {
-    notes: D,
-    pageInfo: q,
-    isLoading: k,
-    isError: w,
+    notes: T,
+    pageInfo: z,
+    isLoading: A,
+    isError: v,
     filter: m,
     courseFilter: c,
     currentPage: p,
     totalPages: d,
     setFilter: J,
-    setCourseFilter: G,
+    setCourseFilter: U,
     setPage: Y,
     fetchNextPage: re,
     fetchPreviousPage: Z
@@ -1203,11 +1203,11 @@ function Io({ filter: t, setFilter: e }) {
   const { translations: n } = V(), o = me(
     () => [
       { label: n.allNotes, value: Te },
-      { label: n.important, value: A.IMPORTANT },
-      { label: n.unclear, value: A.CONFUSING }
+      { label: n.important, value: L.IMPORTANT },
+      { label: n.unclear, value: L.CONFUSING }
     ],
     [n]
-  ), r = K(
+  ), r = q(
     (l, { value: a }) => {
       e(!a || a === Te ? null : a);
     },
@@ -1232,46 +1232,46 @@ function Io({ filter: t, setFilter: e }) {
 }
 const Kn = ({ hasActiveFilter: t = !1 }) => {
   const { translations: e } = V(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
-  return /* @__PURE__ */ i(Q, { as: "div", textAlign: "center", children: /* @__PURE__ */ C(x, { direction: "column", alignItems: "center", gap: "small", children: [
+  return /* @__PURE__ */ i(X, { as: "div", textAlign: "center", children: /* @__PURE__ */ x(R, { direction: "column", alignItems: "center", gap: "small", children: [
     !t && /* @__PURE__ */ i(yt, { size: "medium" }),
     /* @__PURE__ */ i(Ne, { level: "h3", children: n }),
     /* @__PURE__ */ i(ee, { color: "secondary", children: o })
   ] }) });
 }, Xn = {
-  [A.IMPORTANT]: {
+  [L.IMPORTANT]: {
     color: "success",
     translationKey: "important",
     icon: /* @__PURE__ */ i(we, { size: "x-small" })
   },
-  [A.CONFUSING]: {
+  [L.CONFUSING]: {
     color: "danger",
     translationKey: "unclear",
     icon: /* @__PURE__ */ i(ke, { size: "x-small" })
   }
 }, ct = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
-  const { translations: o } = V(), r = Xn[t], s = o[r.translationKey], [l, a] = U(!1), m = _(null), c = _(null), p = _(null), d = K(
-    (g) => {
-      e == null || e(g), a(!1);
+  const { translations: o } = V(), r = Xn[t], s = o[r.translationKey], [l, a] = j(!1), m = F(null), c = F(null), p = F(null), d = q(
+    (h) => {
+      e == null || e(h), a(!1);
     },
     [e]
   );
-  return j(() => {
+  return W(() => {
     if (!l) return;
-    const g = (y) => {
+    const h = (y) => {
       y.key === "Escape" && y.stopPropagation();
-    }, S = (y) => {
-      var T;
-      y.key === "Escape" && (y.stopPropagation(), a(!1), (T = p.current) == null || T.focus());
+    }, E = (y) => {
+      var S;
+      y.key === "Escape" && (y.stopPropagation(), a(!1), (S = p.current) == null || S.focus());
     };
-    return document.addEventListener("keydown", g, !0), document.addEventListener("keyup", S, !0), () => {
-      document.removeEventListener("keydown", g, !0), document.removeEventListener("keyup", S, !0);
+    return document.addEventListener("keydown", h, !0), document.addEventListener("keyup", E, !0), () => {
+      document.removeEventListener("keydown", h, !0), document.removeEventListener("keyup", E, !0);
     };
-  }, [l]), n && e ? /* @__PURE__ */ C(
+  }, [l]), n && e ? /* @__PURE__ */ x(
     ce,
     {
       placement: "bottom start",
       show: l,
-      onToggle: (g) => a(g),
+      onToggle: (h) => a(h),
       shouldHideOnSelect: !0,
       shouldFocusTriggerOnClose: !0,
       trigger: /* @__PURE__ */ i(
@@ -1279,24 +1279,24 @@ const Kn = ({ hasActiveFilter: t = !1 }) => {
         {
           color: r.color,
           renderIcon: r.icon,
-          elementRef: (g) => {
-            p.current = g;
+          elementRef: (h) => {
+            p.current = h;
           },
           children: s
         }
       ),
       children: [
-        /* @__PURE__ */ C(ce.Item, { ref: m, onClick: () => d(A.CONFUSING), children: [
+        /* @__PURE__ */ x(ce.Item, { ref: m, onClick: () => d(L.CONFUSING), children: [
           /* @__PURE__ */ i(ke, { size: "x-small" }),
           ` ${o.markUnclear}`
         ] }),
-        /* @__PURE__ */ C(ce.Item, { ref: c, onClick: () => d(A.IMPORTANT), children: [
+        /* @__PURE__ */ x(ce.Item, { ref: c, onClick: () => d(L.IMPORTANT), children: [
           /* @__PURE__ */ i(we, { size: "x-small" }),
           ` ${o.markImportant}`
         ] })
       ]
     }
-  ) : /* @__PURE__ */ i(Q, { display: "inline-flex", children: /* @__PURE__ */ i(Be, { color: r.color, renderIcon: r.icon, children: s }) });
+  ) : /* @__PURE__ */ i(X, { display: "inline-flex", children: /* @__PURE__ */ i(Be, { color: r.color, renderIcon: r.icon, children: s }) });
 }, je = "0.75rem";
 function We(t, e) {
   return (t instanceof Date ? t : new Date(t)).toLocaleString(e, {
@@ -1318,47 +1318,47 @@ const Qn = ({
   isActive: c,
   isPanelView: p = !1,
   courseName: d,
-  locale: g,
-  highlightTheme: S,
+  locale: h,
+  highlightTheme: E,
   renderLink: y,
-  href: T
+  href: S
 }) => {
-  const { translations: h } = V(), [W, B] = U(!1), [N, v] = U(!1), [P, F] = U(o || ""), [b, D] = U(!1), k = _(null), w = K((u) => {
-    k.current = u;
-  }, []), z = _(null), q = _(null), Y = _(!1), re = _(null), Z = _(null), J = _(!1);
-  j(() => {
-    var u, E;
-    c ? ((u = k.current) == null || u.scrollIntoView({ behavior: "smooth", block: "nearest" }), (E = k.current) == null || E.focus()) : D(!1);
-  }, [c]), j(() => {
-    var u, E;
-    N ? (Y.current = !0, (u = z.current) == null || u.focus()) : Y.current && (Y.current = !1, (E = q.current) == null || E.focus());
-  }, [N]), j(() => {
-    if (!b && J.current) {
+  const { translations: g } = V(), [Q, G] = j(!1), [N, C] = j(!1), [D, M] = j(o || ""), [P, T] = j(!1), A = F(null), v = q((u) => {
+    A.current = u;
+  }, []), _ = F(null), z = F(null), Y = F(!1), re = F(null), Z = F(null), J = F(!1);
+  W(() => {
+    var u, b;
+    c ? ((u = A.current) == null || u.scrollIntoView({ behavior: "smooth", block: "nearest" }), (b = A.current) == null || b.focus()) : T(!1);
+  }, [c]), W(() => {
+    var u, b;
+    N ? (Y.current = !0, (u = _.current) == null || u.focus()) : Y.current && (Y.current = !1, (b = z.current) == null || b.focus());
+  }, [N]), W(() => {
+    if (!P && J.current) {
       J.current = !1;
       const u = re.current;
       u != null && u.isConnected && u.focus();
     }
-  }, [b]);
-  const G = K((u, E) => {
-    J.current = !E, D(!1);
+  }, [P]);
+  const U = q((u, b) => {
+    J.current = !b, T(!1);
   }, []);
-  j(() => {
-    if (!b) return;
-    const u = (O) => {
-      O.key === "Escape" && O.stopPropagation();
-    }, E = (O) => {
-      O.key === "Escape" && (O.stopPropagation(), G());
+  W(() => {
+    if (!P) return;
+    const u = (w) => {
+      w.key === "Escape" && w.stopPropagation();
+    }, b = (w) => {
+      w.key === "Escape" && (w.stopPropagation(), U());
     };
-    return window.addEventListener("keydown", u, !0), window.addEventListener("keyup", E, !0), () => {
-      window.removeEventListener("keydown", u, !0), window.removeEventListener("keyup", E, !0);
+    return window.addEventListener("keydown", u, !0), window.addEventListener("keyup", b, !0), () => {
+      window.removeEventListener("keydown", u, !0), window.removeEventListener("keyup", b, !0);
     };
-  }, [b, G]);
-  const se = r === A.IMPORTANT ? h.important : h.unclear, $ = (u) => {
+  }, [P, U]);
+  const se = r === L.IMPORTANT ? g.important : g.unclear, $ = (u) => {
     u.key === "Enter" && (u.preventDefault(), s == null || s());
-  }, R = [se, h.note];
-  n && R.push(n), o && R.push(o), e && R.push(We(e, g)), d && R.push(d);
-  const I = R.join(", "), M = /* @__PURE__ */ C(
-    Q,
+  }, k = [se, g.note];
+  n && k.push(n), o && k.push(o), e && k.push(We(e, h)), d && k.push(d);
+  const I = k.join(", "), B = /* @__PURE__ */ x(
+    X,
     {
       as: "div",
       height: "100%",
@@ -1366,15 +1366,15 @@ const Qn = ({
       borderRadius: "medium",
       padding: "small",
       position: "relative",
-      role: T ? void 0 : c || N ? "group" : "button",
-      "aria-label": T ? void 0 : I,
-      "aria-pressed": T || c || N ? void 0 : c,
-      tabIndex: T || c ? -1 : 0,
+      role: S ? void 0 : c || N ? "group" : "button",
+      "aria-label": S ? void 0 : I,
+      "aria-pressed": S || c || N ? void 0 : c,
+      tabIndex: S || c ? -1 : 0,
       "data-testid": `note-card-${t}`,
-      elementRef: w,
+      elementRef: v,
       onClick: c ? void 0 : s,
-      onMouseEnter: () => B(!0),
-      onMouseLeave: () => B(!1),
+      onMouseEnter: () => G(!0),
+      onMouseLeave: () => G(!1),
       onKeyDown: c ? void 0 : $,
       cursor: N ? "default" : "pointer",
       children: [
@@ -1384,9 +1384,9 @@ const Qn = ({
             "data-testid": `note-card-${t}-content`,
             style: {
               height: "100%",
-              opacity: c && b && l ? 0.25 : void 0
+              opacity: c && P && l ? 0.25 : void 0
             },
-            children: /* @__PURE__ */ C(x, { direction: "column", gap: "small", height: "100%", children: [
+            children: /* @__PURE__ */ x(R, { direction: "column", gap: "small", height: "100%", children: [
               /* @__PURE__ */ i(
                 ct,
                 {
@@ -1399,47 +1399,47 @@ const Qn = ({
                 Ce,
                 {
                   type: r,
-                  isCardActive: !!c || W,
-                  theme: S,
+                  isCardActive: !!c || Q,
+                  theme: E,
                   children: n
                 }
               ) : /* @__PURE__ */ i(Ie, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ i(
                 Ce,
                 {
                   type: r,
-                  isCardActive: !!c || W,
-                  theme: S,
+                  isCardActive: !!c || Q,
+                  theme: E,
                   children: n
                 }
               ) }) }) }) : /* @__PURE__ */ i(at, {}),
-              /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ C(x, { direction: "column", gap: "small", height: "100%", children: [
-                N && p ? /* @__PURE__ */ C(x, { direction: "column", gap: "x-small", margin: "xx-small", children: [
+              /* @__PURE__ */ i(R.Item, { shouldGrow: !0, children: /* @__PURE__ */ x(R, { direction: "column", gap: "small", height: "100%", children: [
+                N && p ? /* @__PURE__ */ x(R, { direction: "column", gap: "x-small", margin: "xx-small", children: [
                   /* @__PURE__ */ i(
                     Xe,
                     {
-                      label: /* @__PURE__ */ i(bt, { children: h.editNote }),
-                      value: P,
-                      onChange: (u) => F(u.target.value),
-                      placeholder: h.addNoteOptional,
+                      label: /* @__PURE__ */ i(bt, { children: g.editNote }),
+                      value: D,
+                      onChange: (u) => M(u.target.value),
+                      placeholder: g.addNoteOptional,
                       textareaRef: (u) => {
-                        z.current = u;
+                        _.current = u;
                       }
                     }
                   ),
-                  /* @__PURE__ */ C(x, { gap: "xx-small", children: [
-                    /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+                  /* @__PURE__ */ x(R, { gap: "xx-small", children: [
+                    /* @__PURE__ */ i(R.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
                       te,
                       {
                         display: "block",
                         size: "small",
                         "data-testid": `note-card-${t}-cancel`,
                         onClick: () => {
-                          F(o || ""), v(!1);
+                          M(o || ""), C(!1);
                         },
-                        children: h.cancel
+                        children: g.cancel
                       }
                     ) }),
-                    /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+                    /* @__PURE__ */ i(R.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
                       te,
                       {
                         display: "block",
@@ -1447,13 +1447,13 @@ const Qn = ({
                         size: "small",
                         "data-testid": `note-card-${t}-save`,
                         onClick: () => {
-                          a == null || a(t, P.trim()), v(!1);
+                          a == null || a(t, D.trim()), C(!1);
                         },
-                        children: h.save
+                        children: g.save
                       }
                     ) })
                   ] })
-                ] }) : o ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: c && p ? /* @__PURE__ */ C(ee, { children: [
+                ] }) : o ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: c && p ? /* @__PURE__ */ x(ee, { children: [
                   o,
                   " ",
                   /* @__PURE__ */ i(
@@ -1463,19 +1463,19 @@ const Qn = ({
                       withBackground: !1,
                       withBorder: !1,
                       margin: "xx-small 0 0 xxx-small",
-                      screenReaderLabel: h.editNote,
+                      screenReaderLabel: g.editNote,
                       "data-testid": `note-card-${t}-edit`,
                       elementRef: (u) => {
-                        q.current = u;
+                        z.current = u;
                       },
                       onClick: (u) => {
-                        u.stopPropagation(), v(!0);
+                        u.stopPropagation(), C(!0);
                       },
                       children: /* @__PURE__ */ i(ve, {})
                     }
                   )
-                ] }) : /* @__PURE__ */ i(ee, { children: /* @__PURE__ */ i(Ie, { maxLines: 3, truncate: "word", children: o }) }) }) : p && c ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ C(ee, { color: "secondary", children: [
-                  h.addNotePrompt,
+                ] }) : /* @__PURE__ */ i(ee, { children: /* @__PURE__ */ i(Ie, { maxLines: 3, truncate: "word", children: o }) }) }) : p && c ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ x(ee, { color: "secondary", children: [
+                  g.addNotePrompt,
                   " ",
                   /* @__PURE__ */ i(
                     ue,
@@ -1484,20 +1484,20 @@ const Qn = ({
                       withBackground: !1,
                       withBorder: !1,
                       margin: "xx-small 0 0 xxx-small",
-                      screenReaderLabel: h.editNote,
+                      screenReaderLabel: g.editNote,
                       "data-testid": `note-card-${t}-edit`,
                       elementRef: (u) => {
-                        q.current = u;
+                        z.current = u;
                       },
                       onClick: (u) => {
-                        u.stopPropagation(), v(!0);
+                        u.stopPropagation(), C(!0);
                       },
                       children: /* @__PURE__ */ i(ve, {})
                     }
                   )
                 ] }) }) : null,
-                /* @__PURE__ */ C(x, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
-                  /* @__PURE__ */ i(ee, { size: "small", color: "secondary", children: We(e, g) }),
+                /* @__PURE__ */ x(R, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
+                  /* @__PURE__ */ i(ee, { size: "small", color: "secondary", children: We(e, h) }),
                   c && l && /* @__PURE__ */ i(
                     ue,
                     {
@@ -1506,38 +1506,38 @@ const Qn = ({
                       withBorder: !1,
                       color: "danger",
                       margin: "xx-small",
-                      screenReaderLabel: h.deleteNote,
+                      screenReaderLabel: g.deleteNote,
                       "data-testid": `note-card-${t}-delete`,
                       elementRef: (u) => {
                         re.current = u;
                       },
                       onClick: (u) => {
-                        u.stopPropagation(), J.current = !1, D(!0);
+                        u.stopPropagation(), J.current = !1, T(!0);
                       },
                       children: /* @__PURE__ */ i(ye, {})
                     }
                   )
                 ] }),
-                d && /* @__PURE__ */ i(ee, { size: "small", color: "secondary", children: d })
+                d && /* @__PURE__ */ i(ee, { size: "small", color: "secondary", "data-testid": `note-card-${t}-course`, children: d })
               ] }) })
             ] })
           }
         ),
-        c && b && l && /* @__PURE__ */ i(
+        c && P && l && /* @__PURE__ */ i(
           Et,
           {
             open: !0,
             as: "div",
-            label: h.deleteNoteConfirmation,
+            label: g.deleteNoteConfirmation,
             shouldContainFocus: !0,
             shouldFocusOnOpen: !0,
             defaultFocusElement: () => Z.current,
             shouldCloseOnDocumentClick: !0,
             shouldCloseOnEscape: !1,
             shouldReturnFocus: !1,
-            onDismiss: G,
+            onDismiss: U,
             children: /* @__PURE__ */ i(
-              Q,
+              X,
               {
                 as: "div",
                 padding: "medium",
@@ -1547,8 +1547,8 @@ const Qn = ({
                 insetInlineStart: "0",
                 insetInlineEnd: "0",
                 stacking: "above",
-                children: /* @__PURE__ */ C(
-                  x,
+                children: /* @__PURE__ */ x(
+                  R,
                   {
                     direction: "column",
                     justifyItems: "center",
@@ -1562,22 +1562,22 @@ const Qn = ({
                           display: "block",
                           color: "danger",
                           withBackground: !1,
-                          themeOverride: (u, E) => ({
+                          themeOverride: (u, b) => ({
                             borderRadius: je,
                             // Ghost states default to translucent fills; the faded card would show through.
-                            dangerGhostBackground: E.colors.contrasts.white1010,
-                            dangerGhostHoverBackground: E.colors.contrasts.red1212,
-                            dangerGhostActiveBackground: E.colors.contrasts.red1212,
+                            dangerGhostBackground: b.colors.contrasts.white1010,
+                            dangerGhostHoverBackground: b.colors.contrasts.red1212,
+                            dangerGhostActiveBackground: b.colors.contrasts.red1212,
                             // red45 on the hover tint is 3.74:1; red57 clears AA in every state.
-                            dangerGhostColor: E.colors.contrasts.red5782,
-                            dangerGhostBorderColor: E.colors.contrasts.red5782
+                            dangerGhostColor: b.colors.contrasts.red5782,
+                            dangerGhostBorderColor: b.colors.contrasts.red5782
                           }),
                           renderIcon: /* @__PURE__ */ i(ye, {}),
                           "data-testid": `note-card-${t}-confirm-delete`,
                           onClick: (u) => {
-                            u.stopPropagation(), l(t), D(!1);
+                            u.stopPropagation(), l(t), T(!1);
                           },
-                          children: h.deleteNote
+                          children: g.deleteNote
                         }
                       ),
                       /* @__PURE__ */ i(
@@ -1585,19 +1585,19 @@ const Qn = ({
                         {
                           display: "block",
                           withBackground: !1,
-                          themeOverride: (u, E) => ({
+                          themeOverride: (u, b) => ({
                             borderRadius: je,
-                            secondaryGhostBackground: E.colors.contrasts.white1010,
-                            secondaryGhostActiveBackground: E.colors.contrasts.grey1111
+                            secondaryGhostBackground: b.colors.contrasts.white1010,
+                            secondaryGhostActiveBackground: b.colors.contrasts.grey1111
                           }),
                           "data-testid": `note-card-${t}-cancel-delete`,
                           elementRef: (u) => {
                             Z.current = u;
                           },
                           onClick: (u) => {
-                            u.stopPropagation(), G();
+                            u.stopPropagation(), U();
                           },
-                          children: h.cancel
+                          children: g.cancel
                         }
                       )
                     ]
@@ -1610,7 +1610,7 @@ const Qn = ({
       ]
     }
   );
-  return T && y ? y({ href: T, children: M, ariaLabel: I }) : M;
+  return S && y ? y({ href: S, children: B, ariaLabel: I }) : B;
 }, Yn = {
   display: "grid",
   gap: "1rem",
@@ -1632,80 +1632,82 @@ const Qn = ({
   onNoteTypeChange: c,
   onNotesEmptied: p,
   selectedNoteId: d,
-  hasActiveFilter: g = !1,
-  columnCount: S = 1,
+  hasActiveFilter: h = !1,
+  columnCount: E = 1,
   highlightTheme: y,
-  locale: T,
-  renderNoteLink: h,
-  noteHref: W
+  locale: S,
+  courseNames: g,
+  renderNoteLink: Q,
+  noteHref: G
 }) => {
-  const { translations: B } = V(), N = _(null), v = _(null), P = K(
-    (b) => {
-      const D = t.findIndex((w) => w.id === b);
-      let k = null;
-      t.length > 1 && (k = D > 0 ? t[D - 1].id : t[1].id), v.current = { targetId: k }, a == null || a(b);
+  const { translations: N } = V(), C = F(null), D = F(null), M = q(
+    (T) => {
+      const A = t.findIndex((_) => _.id === T);
+      let v = null;
+      t.length > 1 && (v = A > 0 ? t[A - 1].id : t[1].id), D.current = { targetId: v }, a == null || a(T);
     },
     [t, a]
   );
-  if (j(() => {
-    var D;
-    const b = v.current;
-    if (b)
-      if (v.current = null, b.targetId === null)
+  if (W(() => {
+    var A;
+    const T = D.current;
+    if (T)
+      if (D.current = null, T.targetId === null)
         p == null || p();
       else {
-        const k = (D = N.current) == null ? void 0 : D.querySelector(
-          `[data-testid="note-card-${b.targetId}"]`
+        const v = (A = C.current) == null ? void 0 : A.querySelector(
+          `[data-testid="note-card-${T.targetId}"]`
         );
-        k == null || k.focus();
+        v == null || v.focus();
       }
   }, [t, p]), e)
-    return /* @__PURE__ */ i(Q, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(Tt, { renderTitle: B.loadingNotes }) });
+    return /* @__PURE__ */ i(X, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(Tt, { renderTitle: N.loadingNotes }) });
   if (n)
-    return /* @__PURE__ */ i(Q, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(Ne, { level: "h4", children: B.failedToLoadNotes }) });
+    return /* @__PURE__ */ i(X, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(Ne, { level: "h4", children: N.failedToLoadNotes }) });
   if (t.length === 0)
-    return /* @__PURE__ */ i(Q, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Kn, { hasActiveFilter: g }) });
-  const F = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
-  return /* @__PURE__ */ C(dt, { children: [
+    return /* @__PURE__ */ i(X, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Kn, { hasActiveFilter: h }) });
+  const P = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
+  return /* @__PURE__ */ x(dt, { children: [
     /* @__PURE__ */ i(
       "ul",
       {
-        ref: N,
-        style: { ...Yn, gridTemplateColumns: `repeat(${S}, minmax(0, 1fr))` },
+        ref: C,
+        style: { ...Yn, gridTemplateColumns: `repeat(${E}, minmax(0, 1fr))` },
         role: "list",
         "data-testid": "notes-grid",
-        children: t.map((b) => {
-          var D;
+        children: t.map((T) => {
+          var A;
           return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
             Qn,
             {
-              noteId: b.id,
-              date: b.createdAt,
-              type: b.reaction[0] ?? A.IMPORTANT,
-              highlight: (D = b.highlightData) == null ? void 0 : D.selectedText,
-              note: b.userText,
-              isActive: d === b.id,
+              noteId: T.id,
+              date: T.createdAt,
+              type: T.reaction[0] ?? L.IMPORTANT,
+              highlight: (A = T.highlightData) == null ? void 0 : A.selectedText,
+              note: T.userText,
+              isActive: d === T.id,
               isPanelView: !!d,
-              onClick: l ? () => l(b.id) : void 0,
-              onDelete: a ? P : void 0,
-              onSaveNote: m ? (k, w) => m(k, w) : void 0,
-              onTypeChange: c ? (k, w) => c(k, w) : void 0,
+              onClick: l ? () => l(T.id) : void 0,
+              onDelete: a ? M : void 0,
+              onSaveNote: m ? (v, _) => m(v, _) : void 0,
+              onTypeChange: c ? (v, _) => c(v, _) : void 0,
               highlightTheme: y,
-              locale: T,
-              renderLink: h,
-              href: W ? W(b.id, b) : void 0
+              locale: S,
+              courseName: g == null ? void 0 : g.get(T.courseId),
+              renderLink: Q,
+              href: G ? G(T.id, T) : void 0
             }
-          ) }, b.id);
+          ) }, T.id);
         })
       }
     ),
-    F && /* @__PURE__ */ i(x, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(x.Item, { children: /* @__PURE__ */ i(
+    P && /* @__PURE__ */ i(R, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(R.Item, { children: /* @__PURE__ */ i(
       St,
       {
         as: "nav",
         variant: "input",
-        labelNext: B.nextPage,
-        labelPrev: B.previousPage,
+        labelNext: N.nextPage,
+        labelPrev: N.previousPage,
         currentPage: o,
         totalPageNumber: r,
         onPageChange: s
@@ -1723,34 +1725,34 @@ const Qn = ({
   onBack: a,
   editing: m = !1
 }) => {
-  const { translations: c } = V(), [p, d] = U(m), [g, S] = U(t || ""), [y, T] = U(!1);
-  return /* @__PURE__ */ C(x, { direction: "column", gap: "small", "data-testid": "single-note", children: [
-    n != null ? /* @__PURE__ */ i(Q, { as: "div", children: /* @__PURE__ */ i(ee, { children: /* @__PURE__ */ i(Ce, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(at, {}),
+  const { translations: c } = V(), [p, d] = j(m), [h, E] = j(t || ""), [y, S] = j(!1);
+  return /* @__PURE__ */ x(R, { direction: "column", gap: "small", "data-testid": "single-note", children: [
+    n != null ? /* @__PURE__ */ i(X, { as: "div", children: /* @__PURE__ */ i(ee, { children: /* @__PURE__ */ i(Ce, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(at, {}),
     /* @__PURE__ */ i(ct, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
-    p ? /* @__PURE__ */ C(x, { direction: "column", gap: "x-small", children: [
+    p ? /* @__PURE__ */ x(R, { direction: "column", gap: "x-small", children: [
       /* @__PURE__ */ i(
         Xe,
         {
           label: c.addNoteOptional,
-          value: g,
-          onChange: (h) => S(h.target.value),
+          value: h,
+          onChange: (g) => E(g.target.value),
           resize: "vertical"
         }
       ),
-      /* @__PURE__ */ C(x, { gap: "xx-small", children: [
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+      /* @__PURE__ */ x(R, { gap: "xx-small", children: [
+        /* @__PURE__ */ i(R.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
           te,
           {
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel",
             onClick: () => {
-              S(t || ""), d(!1);
+              E(t || ""), d(!1);
             },
             children: c.cancel
           }
         ) }),
-        /* @__PURE__ */ i(x.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
+        /* @__PURE__ */ i(R.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
           te,
           {
             display: "block",
@@ -1758,18 +1760,18 @@ const Qn = ({
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(g), d(!1);
+              r(h), d(!1);
             },
             children: c.save
           }
         ) })
       ] })
-    ] }) : /* @__PURE__ */ C(x, { direction: "column", gap: "small", children: [
-      t && /* @__PURE__ */ C(Q, { as: "div", children: [
+    ] }) : /* @__PURE__ */ x(R, { direction: "column", gap: "small", children: [
+      t && /* @__PURE__ */ x(X, { as: "div", children: [
         /* @__PURE__ */ i(Ne, { level: "h4", margin: "0 0 xx-small 0", children: c.note }),
         /* @__PURE__ */ i(ee, { children: t })
       ] }),
-      /* @__PURE__ */ C(x, { justifyItems: "space-between", children: [
+      /* @__PURE__ */ x(R, { justifyItems: "space-between", children: [
         /* @__PURE__ */ i(
           te,
           {
@@ -1780,7 +1782,7 @@ const Qn = ({
             children: c.back
           }
         ),
-        /* @__PURE__ */ C(x, { gap: "xx-small", children: [
+        /* @__PURE__ */ x(R, { gap: "xx-small", children: [
           s && /* @__PURE__ */ i(
             ue,
             {
@@ -1790,7 +1792,7 @@ const Qn = ({
               color: "danger",
               screenReaderLabel: c.deleteNote,
               "data-testid": "single-note-delete",
-              onClick: () => T(!0),
+              onClick: () => S(!0),
               children: /* @__PURE__ */ i(ye, {})
             }
           ),
@@ -1808,7 +1810,7 @@ const Qn = ({
           )
         ] })
       ] }),
-      y && s && /* @__PURE__ */ i(Q, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ C(x, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
+      y && s && /* @__PURE__ */ i(X, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ x(R, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
         /* @__PURE__ */ i(
           te,
           {
@@ -1818,7 +1820,7 @@ const Qn = ({
             renderIcon: /* @__PURE__ */ i(ye, {}),
             "data-testid": "single-note-confirm-delete",
             onClick: () => {
-              s(), T(!1);
+              s(), S(!1);
             },
             children: c.deleteNote
           }
@@ -1829,7 +1831,7 @@ const Qn = ({
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel-delete",
-            onClick: () => T(!1),
+            onClick: () => S(!1),
             children: c.cancel
           }
         )
@@ -1849,7 +1851,7 @@ export {
   Hn as NotebookTranslationsProvider,
   So as NotebookTray,
   Co as NotesListView,
-  A as REACTION_TYPE,
+  L as REACTION_TYPE,
   xo as SingleNote,
   De as createTransparentColor,
   Vt as useCreateNote,