@instructure/platform-notebook 1.5.1 → 1.5.2

package/dist/index.js

@@ -1,14 +1,14 @@
 import { jsx as i, jsxs as T, Fragment as rt } from "react/jsx-runtime";
-import { createContext as Ge, useMemo as de, useContext as ze, useReducer as We, useRef as K, useEffect as V, useState as j, useCallback as Y } from "react";
+import { createContext as je, useMemo as ge, useContext as ze, useReducer as We, useRef as K, useEffect as V, useState as U, useCallback as Y } from "react";
 import { createPortal as st } from "react-dom";
 import { z as u } from "zod";
 import it from "diff-match-patch";
-import { useQueryClient as Ce, useMutation as xe, useQuery as at } from "@tanstack/react-query";
+import { useQueryClient as Ie, useMutation as xe, useQuery as at } from "@tanstack/react-query";
 import { CloseButton as lt, Button as ee, IconButton as le } from "@instructure/ui-buttons";
 import { Flex as v } from "@instructure/ui-flex";
 import { Heading as pe } from "@instructure/ui-heading";
 import { Tray as ct } from "@instructure/ui-tray";
-import { View as z } from "@instructure/ui-view";
+import { View as j } from "@instructure/ui-view";
 import { IconQuestionLine as ke, IconPinLine as we, IconWarningLine as dt, IconNoteLine as ut, IconEditLine as Se, IconTrashLine as he, IconArrowStartLine as ft } from "@instructure/ui-icons";
 import { Menu as ie } from "@instructure/ui-menu";
 import { TruncateText as Te } from "@instructure/ui-truncate-text";
@@ -201,7 +201,7 @@ function vt(t) {
     n.nodeName === t.nodeName && (e += 1), n = n.previousSibling;
   return e;
 }
-const It = (t) => {
+const Ct = (t) => {
   const e = Tt(t), n = vt(t);
   return `${e}[${n}]`;
 }, Be = (t, e) => {
@@ -211,10 +211,10 @@ const It = (t) => {
       console.error("Node is not a descendant of root");
       return;
     }
-    n = `${It(o)}/${n}`, o = o.parentNode;
+    n = `${Ct(o)}/${n}`, o = o.parentNode;
   }
   return n = `/${n}`, n = n.replace(/\/$/, ""), n;
-}, Ct = (t, e, n) => {
+}, It = (t, e, n) => {
   const o = e.toUpperCase();
   let r = -1;
   for (let s = 0; s < t.children.length; s++) {
@@ -231,15 +231,15 @@ const It = (t) => {
   o.shift();
   for (const s of o) {
     let a, l;
-    const m = s.indexOf("[");
-    if (m !== -1) {
-      a = s.slice(0, m);
-      const g = s.slice(m + 1, s.indexOf("]"));
-      if (l = Number.parseInt(g, 10) - 1, l < 0)
+    const g = s.indexOf("[");
+    if (g !== -1) {
+      a = s.slice(0, g);
+      const h = s.slice(g + 1, s.indexOf("]"));
+      if (l = Number.parseInt(h, 10) - 1, l < 0)
         return null;
     } else
       a = s, l = 0;
-    const d = Ct(r, a, l);
+    const d = It(r, a, l);
     if (!d)
       return null;
     r = d;
@@ -346,15 +346,15 @@ const Xe = (t) => {
   if (!s)
     return null;
   if (e.length > 32) {
-    const a = e.slice(0, 32), l = e.slice(-32), m = o - n;
+    const a = e.slice(0, 32), l = e.slice(-32), g = o - n;
     let d = r.match_main(s, a, n);
-    const g = r.match_main(s, l, o), c = g + l.length;
-    if (d === -1 || g === -1)
+    const h = r.match_main(s, l, o), c = h + l.length;
+    if (d === -1 || h === -1)
       return null;
-    const E = c - d, h = Math.abs(E - m);
-    if ((d > c || h > 5) && (r.Match_Distance = e.length + 100, d = r.match_main(s, a, c), d !== -1 && d < c))
-      return kt(t, d, c, m);
-    if (d < c && h <= 5)
+    const S = c - d, p = Math.abs(S - g);
+    if ((d > c || p > 5) && (r.Match_Distance = e.length + 100, d = r.match_main(s, a, c), d !== -1 && d < c))
+      return kt(t, d, c, g);
+    if (d < c && p <= 5)
       return ne.fromSelector(t, {
         start: d,
         end: c
@@ -382,7 +382,7 @@ const Xe = (t) => {
   for (const s of e) {
     const a = Ot(s, t);
     if (a) {
-      const l = a.toRange(), m = l && oe.fromRange(t, l), d = (l == null ? void 0 : l.toString().trim()) || s.highlightData.selectedText;
+      const l = a.toRange(), g = l && oe.fromRange(t, l), d = (l == null ? void 0 : l.toString().trim()) || s.highlightData.selectedText;
       o.push({
         id: s.id,
         reaction: s.reaction,
@@ -391,7 +391,7 @@ const Xe = (t) => {
           ...s.highlightData,
           selectedText: d,
           hasNoHighlightAnymore: !1,
-          range: (m == null ? void 0 : m.toSelector()) ?? null,
+          range: (g == null ? void 0 : g.toSelector()) ?? null,
           textPosition: a.toSelector(),
           pageLastModifiedAt: n
         }
@@ -422,39 +422,39 @@ const Xe = (t) => {
     const o = n.getBoundingClientRect();
     o.top >= 0 && o.bottom <= (window.innerHeight || document.documentElement.clientHeight) || n.scrollIntoView({ behavior: "smooth", block: "center" });
   }
-}, fe = 90, me = 172, Lt = (t) => {
+}, ue = 90, fe = 172, Lt = (t) => {
   const e = t.getClientRects();
   if (!e.length)
     return null;
-  const n = e[0], o = e[e.length - 1], r = 4, s = 16, a = window.innerWidth || document.documentElement.clientWidth, l = window.innerHeight || document.documentElement.clientHeight, m = (b) => {
-    const N = b + me;
-    return b >= s && N <= a - s;
+  const n = e[0], o = e[e.length - 1], r = 4, s = 16, a = window.innerWidth || document.documentElement.clientWidth, l = window.innerHeight || document.documentElement.clientHeight, g = (b) => {
+    const y = b + fe;
+    return b >= s && y <= a - s;
   }, d = (b) => {
-    const N = b + fe;
-    return b >= s && N <= l - s;
+    const y = b + ue;
+    return b >= s && y <= l - s;
   };
-  let g;
-  const c = n.right - me;
-  if (m(c))
-    g = c;
+  let h;
+  const c = n.right - fe;
+  if (g(c))
+    h = c;
   else {
     const b = n.left;
-    if (m(b))
-      g = b;
+    if (g(b))
+      h = b;
     else {
-      const p = (n.left + n.right) / 2 - me / 2;
-      m(p) ? g = p : c < s ? g = s : g = a - me - s;
+      const N = (n.left + n.right) / 2 - fe / 2;
+      g(N) ? h = N : c < s ? h = s : h = a - fe - s;
     }
   }
-  let E;
-  const h = o.bottom + r;
-  if (d(h))
-    E = h;
+  let S;
+  const p = o.bottom + r;
+  if (d(p))
+    S = p;
   else {
-    const b = n.top - fe - r;
-    d(b) ? E = b : h + fe > l - s ? E = l - fe - s : E = s;
+    const b = n.top - ue - r;
+    d(b) ? S = b : p + ue > l - s ? S = l - ue - s : S = s;
   }
-  return { top: E, left: g };
+  return { top: S, left: h };
 }, Dt = (t, e) => {
   for (const n of e)
     if (t.start < n.end && t.end > n.start)
@@ -500,44 +500,44 @@ const Xe = (t) => {
     $t(e, n);
     return;
   }
-  const a = e.type === x.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, l = e.id === e.selectedNoteId, m = l ? a : Le(a, 0.5), d = e.type === x.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, g = e.type === x.IMPORTANT ? "solid" : "dashed", c = document.createElement("span");
+  const a = e.type === x.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, l = e.id === e.selectedNoteId, g = l ? a : Le(a, 0.5), d = e.type === x.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, h = e.type === x.IMPORTANT ? "solid" : "dashed", c = document.createElement("span");
   c.id = `${r}-start`, c.className = "highlight-marker-start", c.dataset.highlightId = o || "";
-  const E = e.labelPrefix ?? Ft;
-  c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-label", E), c.setAttribute("aria-haspopup", "dialog"), c.setAttribute("aria-expanded", String(l && !!e.isTrayOpen)), e.popupId && c.setAttribute("aria-controls", e.popupId), c.style.position = "relative", c.style.fontSize = "0", c.style.lineHeight = "0", c.style.width = "0", c.style.height = "0", c.style.margin = "0", c.style.padding = "0", c.style.border = "0", c.style.outline = "none";
-  const h = document.createElement("span");
-  h.id = Ye(o), h.className = "highlight-marker-end", h.dataset.highlightId = o || "";
+  const S = e.labelPrefix ?? Ft;
+  c.setAttribute("role", "button"), c.setAttribute("tabindex", "0"), c.setAttribute("aria-label", S), c.setAttribute("aria-haspopup", "dialog"), c.setAttribute("aria-expanded", String(l && !!e.isTrayOpen)), e.popupId && c.setAttribute("aria-controls", e.popupId), c.style.position = "relative", c.style.fontSize = "0", c.style.lineHeight = "0", c.style.width = "0", c.style.height = "0", c.style.margin = "0", c.style.padding = "0", c.style.border = "0", c.style.outline = "none";
+  const p = document.createElement("span");
+  p.id = Ye(o), p.className = "highlight-marker-end", p.dataset.highlightId = o || "";
   const b = t.cloneRange();
-  b.collapse(!1), b.insertNode(h);
-  const N = t.cloneRange();
-  N.collapse(!0), N.insertNode(c);
-  const p = document.createRange();
-  p.setStartAfter(c), p.setEndBefore(h);
-  const O = Bt(p).filter((y) => y.textContent && y.textContent.length > 0);
-  O.forEach((y, S) => {
+  b.collapse(!1), b.insertNode(p);
+  const y = t.cloneRange();
+  y.collapse(!0), y.insertNode(c);
+  const N = document.createRange();
+  N.setStartAfter(c), N.setEndBefore(p);
+  const O = Bt(N).filter((m) => m.textContent && m.textContent.length > 0);
+  O.forEach((m, E) => {
     var W;
-    const R = y.parentElement;
-    if ((R == null ? void 0 : R.dataset.highlightId) === o) return;
-    const I = S === 0, D = S === O.length - 1, P = O.length === 1;
-    let _;
-    P ? _ = "single" : I ? _ = "first" : D ? _ = "last" : _ = "middle";
+    const I = m.parentElement;
+    if ((I == null ? void 0 : I.dataset.highlightId) === o) return;
+    const L = E === 0, F = E === O.length - 1, z = O.length === 1;
+    let B;
+    z ? B = "single" : L ? B = "first" : F ? B = "last" : B = "middle";
     const k = document.createElement("span");
-    k.className = "highlight-content", k.dataset.highlightId = o || "", k.dataset.position = _, k.style.backgroundColor = m, k.style.textDecorationLine = "underline", k.style.textDecorationColor = d, k.style.textDecorationStyle = g, k.style.textDecorationThickness = n.borderWidthSmall, k.style.textUnderlineOffset = n.underlineOffset, k.style.cursor = "pointer", k.addEventListener("click", (X) => {
-      var $;
-      X.target.tagName !== "A" && (($ = e.onClick) == null || $.call(e));
-    }), (W = y.parentNode) == null || W.insertBefore(k, y), k.appendChild(y);
-  }), c.addEventListener("click", (y) => {
-    var S;
-    y.target.tagName !== "A" && ((S = e.onClick) == null || S.call(e));
-  }), c.addEventListener("keydown", (y) => {
-    var S;
-    if (y.key === "Enter" || y.key === " ")
-      y.preventDefault(), (S = e.onClick) == null || S.call(e);
-    else if (y.key === "Tab" && !y.shiftKey) {
-      const R = document.querySelectorAll(ce(o));
-      for (const I of R) {
-        const D = I.querySelector("a");
-        if (D) {
-          y.preventDefault(), D.focus();
+    k.className = "highlight-content", k.dataset.highlightId = o || "", k.dataset.position = B, k.style.backgroundColor = g, k.style.textDecorationLine = "underline", k.style.textDecorationColor = d, k.style.textDecorationStyle = h, k.style.textDecorationThickness = n.borderWidthSmall, k.style.textUnderlineOffset = n.underlineOffset, k.style.cursor = "pointer", k.addEventListener("click", (X) => {
+      var H;
+      X.target.tagName !== "A" && ((H = e.onClick) == null || H.call(e));
+    }), (W = m.parentNode) == null || W.insertBefore(k, m), k.appendChild(m);
+  }), c.addEventListener("click", (m) => {
+    var E;
+    m.target.tagName !== "A" && ((E = e.onClick) == null || E.call(e));
+  }), c.addEventListener("keydown", (m) => {
+    var E;
+    if (m.key === "Enter" || m.key === " ")
+      m.preventDefault(), (E = e.onClick) == null || E.call(e);
+    else if (m.key === "Tab" && !m.shiftKey) {
+      const I = document.querySelectorAll(ce(o));
+      for (const L of I) {
+        const F = L.querySelector("a");
+        if (F) {
+          m.preventDefault(), F.focus();
           break;
         }
       }
@@ -545,14 +545,14 @@ const Xe = (t) => {
   }), c.addEventListener("focus", () => {
     document.querySelectorAll(
       `.highlight-content${ce(o)}`
-    ).forEach((S) => {
-      S.style.boxShadow = `0 0 0 ${Pt} ${n.colors.focusOutline}`, S.style.borderRadius = _t;
+    ).forEach((E) => {
+      E.style.boxShadow = `0 0 0 ${Pt} ${n.colors.focusOutline}`, E.style.borderRadius = _t;
     });
   }), c.addEventListener("blur", () => {
     document.querySelectorAll(
       `.highlight-content${ce(o)}`
-    ).forEach((S) => {
-      S.style.boxShadow = "", S.style.borderRadius = "";
+    ).forEach((E) => {
+      E.style.boxShadow = "", E.style.borderRadius = "";
     });
   });
 };
@@ -582,8 +582,8 @@ const Ut = (t) => {
   all: ["notebook"],
   notes: (t) => ["notebook", "notes", t]
 };
-function jt(t) {
-  const e = Ce();
+function Gt(t) {
+  const e = Ie();
   return xe({
     mutationFn: (n) => t.createNote(n),
     onSuccess: () => {
@@ -591,8 +591,8 @@ function jt(t) {
     }
   });
 }
-function Gt(t) {
-  const e = Ce();
+function jt(t) {
+  const e = Ie();
   return xe({
     mutationFn: (n) => t.deleteNote(n),
     onSuccess: () => {
@@ -612,17 +612,17 @@ function ve({
   });
 }
 function zt(t) {
-  const e = Ce();
+  const e = Ie();
   return xe({
     mutationFn: ({ id: n, input: o }) => t.updateNote(n, o),
     onMutate: async ({ id: n, input: o }) => {
       await e.cancelQueries({ queryKey: ae.all });
       const s = e.getQueryCache().findAll({ queryKey: ae.all }), a = /* @__PURE__ */ new Map();
       for (const l of s) {
-        const m = l.state.data;
-        m && (a.set(l.queryKey, m), e.setQueryData(l.queryKey, {
-          ...m,
-          notes: m.notes.map(
+        const g = l.state.data;
+        g && (a.set(l.queryKey, g), e.setQueryData(l.queryKey, {
+          ...g,
+          notes: g.notes.map(
             (d) => d.id === n ? { ...d, ...o, updatedAt: (/* @__PURE__ */ new Date()).toISOString() } : d
           )
         }));
@@ -639,7 +639,7 @@ function zt(t) {
     }
   });
 }
-const Wt = "Notebook", qt = "Notes", Kt = "Important", Xt = "Unclear", Qt = "Back", Yt = "Edit note", Vt = "Save", Zt = "Cancel", Jt = "Delete note", en = "note", tn = "Add note (optional)", nn = "Remove from Notebook", on = "Add a note (optional)", rn = "Mark important", sn = "Mark unclear", an = "Saved to Notebook.", ln = "Note updated", cn = "Note deleted", dn = "Error saving to Notebook.", un = "Error updating note", fn = "Note deletion failed", mn = "Loading notes", gn = "Failed to load notes", hn = "Start capturing your notes", pn = "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.", Nn = "Nothing here yet", yn = "Adjust your filters or create a new note to get started.", bn = "You have no notes for the selected filter", En = "Filter", Sn = "Previous page", Tn = "Next page", vn = "All courses", In = "All notes", Cn = "Close Notebook panel", xn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", kn = "The content you highlighted is no longer available.", wn = "Notebook note", De = {
+const Wt = "Notebook", qt = "Notes", Kt = "Important", Xt = "Unclear", Qt = "Back", Yt = "Edit note", Vt = "Save", Zt = "Cancel", Jt = "Delete note", en = "note", tn = "Add note (optional)", nn = "Remove from Notebook", on = "Add a note (optional)", rn = "Mark important", sn = "Mark unclear", an = "Saved to Notebook.", ln = "Note updated", cn = "Note deleted", dn = "Error saving to Notebook.", un = "Error updating note", fn = "Note deletion failed", mn = "Loading notes", gn = "Failed to load notes", hn = "Start capturing your notes", pn = "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.", Nn = "Nothing here yet", yn = "Adjust your filters or create a new note to get started.", bn = "You have no notes for the selected filter", En = "Filter", Sn = "Previous page", Tn = "Next page", vn = "All courses", Cn = "All notes", In = "Close Notebook panel", xn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", kn = "The content you highlighted is no longer available.", wn = "Notebook note", De = {
   notebook: Wt,
   notes: qt,
   important: Kt,
@@ -672,12 +672,12 @@ const Wt = "Notebook", qt = "Notes", Kt = "Important", Xt = "Unclear", Qt = "Bac
   previousPage: Sn,
   nextPage: Tn,
   allCourses: vn,
-  allNotes: In,
-  closeNotebookPanel: Cn,
+  allNotes: Cn,
+  closeNotebookPanel: In,
   featureDescription: xn,
   highlightUnavailable: kn,
   notebookNote: wn
-}, Ve = Ge(null);
+}, Ve = je(null);
 function Ze(t, e) {
   const n = De[t] ?? t;
   return e ? n.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : n;
@@ -687,7 +687,7 @@ function On({
   translate: e,
   children: n
 }) {
-  const o = de(
+  const o = ge(
     () => ({
       translations: { ...De, ...t },
       translate: e ?? Ze
@@ -725,8 +725,8 @@ function An(t, e) {
       return t;
   }
 }
-const Je = Ge(null);
-function uo({
+const Je = je(null);
+function lo({
   api: t,
   currentUserId: e,
   objectId: n,
@@ -735,12 +735,12 @@ function uo({
   pageLastModifiedAt: s,
   onAnalyticsEvent: a,
   onOpen: l,
-  initialNoteId: m,
+  initialNoteId: g,
   translations: d,
-  translate: g,
+  translate: h,
   children: c
 }) {
-  const [E, h] = We(An, Rn(m)), b = K(m != null), N = de(
+  const [S, p] = We(An, Rn(g)), b = K(g != null), y = ge(
     () => ({
       api: t,
       currentUserId: e,
@@ -749,15 +749,15 @@ function uo({
       courseId: r,
       pageLastModifiedAt: s,
       onAnalyticsEvent: a,
-      ...E,
-      selectNote: (p, B = !1) => h({ type: "SELECT_NOTE", payload: { id: p, isEditing: B } }),
-      clearSelectedNote: () => h({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (p) => h({ type: "SET_EDITING", payload: p }),
+      ...S,
+      selectNote: (N, _ = !1) => p({ type: "SELECT_NOTE", payload: { id: N, isEditing: _ } }),
+      clearSelectedNote: () => p({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (N) => p({ type: "SET_EDITING", payload: N }),
       openTray: () => {
-        b.current || (b.current = !0, l == null || l()), h({ type: "OPEN_TRAY" });
+        b.current || (b.current = !0, l == null || l()), p({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        b.current = !1, h({ type: "CLOSE_TRAY" });
+        b.current = !1, p({ type: "CLOSE_TRAY" });
       }
     }),
     [
@@ -769,10 +769,10 @@ function uo({
       s,
       a,
       l,
-      E
+      S
     ]
   );
-  return /* @__PURE__ */ i(Je.Provider, { value: N, children: /* @__PURE__ */ i(On, { translations: d, translate: g, children: c }) });
+  return /* @__PURE__ */ i(Je.Provider, { value: y, children: /* @__PURE__ */ i(On, { translations: d, translate: h, children: c }) });
 }
 function et() {
   const t = ze(Je);
@@ -780,7 +780,7 @@ function et() {
     throw new Error("useNotebook must be used within a NotebookProvider");
   return t;
 }
-const tt = "notebook-tray-content", fo = ({ children: t }) => {
+const tt = "notebook-tray-content", co = ({ children: t }) => {
   const { isTrayOpen: e, closeTray: n } = et(), { translations: o } = Z();
   return /* @__PURE__ */ i(
     ct,
@@ -791,7 +791,7 @@ const tt = "notebook-tray-content", fo = ({ children: t }) => {
       placement: "end",
       size: "regular",
       children: /* @__PURE__ */ T(v, { direction: "column", height: "100vh", id: tt, children: [
-        /* @__PURE__ */ i(v.Item, { children: /* @__PURE__ */ i(z, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ T(v, { justifyItems: "space-between", alignItems: "center", children: [
+        /* @__PURE__ */ i(v.Item, { children: /* @__PURE__ */ i(j, { as: "div", padding: "small medium", borderWidth: "0 0 small 0", children: /* @__PURE__ */ T(v, { justifyItems: "space-between", alignItems: "center", children: [
           /* @__PURE__ */ i(pe, { level: "h3", children: o.notebook }),
           /* @__PURE__ */ i(
             lt,
@@ -812,7 +812,7 @@ const tt = "notebook-tray-content", fo = ({ children: t }) => {
   return V(() => {
     t === x.CONFUSING && o.current ? o.current.focus() : t === x.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
   }, [t]), /* @__PURE__ */ i(
-    z,
+    j,
     {
       as: "div",
       background: "primary",
@@ -847,7 +847,7 @@ const tt = "notebook-tray-content", fo = ({ children: t }) => {
     }
   );
 }, be = "notebook-inline-reaction-menu";
-function mo({
+function uo({
   containerRef: t,
   highlightTheme: e,
   debounceTime: n = 500,
@@ -858,162 +858,162 @@ function mo({
   const {
     api: a,
     objectId: l,
-    objectType: m,
+    objectType: g,
     courseId: d,
-    pageLastModifiedAt: g,
+    pageLastModifiedAt: h,
     selectedNoteId: c,
-    isTrayOpen: E,
-    selectNote: h,
+    isTrayOpen: S,
+    selectNote: p,
     openTray: b
-  } = et(), { translations: N } = Z(), { data: p } = ve({
+  } = et(), { translations: y } = Z(), { data: N } = ve({
     api: a,
     filter: {
-      learningObject: { type: m, id: l }
+      learningObject: { type: g, id: l }
     },
     courseId: d,
     pageSize: 100
-  }), { mutate: B } = jt(a), { mutateAsync: O } = zt(a), { mutate: y } = Gt(a), S = K([]), [R, I] = j([]), [D, P] = j(null), [_, k] = j(""), [W, X] = j(null), [$, U] = j(!1);
+  }), { mutate: _ } = Gt(a), { mutateAsync: O } = zt(a), { mutate: m } = jt(a), E = K([]), [I, L] = U([]), [F, z] = U(null), [B, k] = U(""), [W, X] = U(null), [H, $] = U(!1);
   V(() => {
-    const A = t.current;
-    if (!A) return;
-    const f = A.closest(".user_content") ?? A;
+    const R = t.current;
+    if (!R) return;
+    const f = R.closest(".user_content") ?? R;
     if (f.classList.contains("enhanced")) {
-      U(!0);
+      $(!0);
       return;
     }
-    const w = new MutationObserver((F) => {
-      for (const H of F)
-        if (H.type === "attributes" && H.attributeName === "class" && H.target.classList.contains("enhanced")) {
-          U(!0), w.disconnect();
+    const w = new MutationObserver((D) => {
+      for (const M of D)
+        if (M.type === "attributes" && M.attributeName === "class" && M.target.classList.contains("enhanced")) {
+          $(!0), w.disconnect();
           return;
         }
     });
     return w.observe(f, { attributes: !0, attributeFilter: ["class"] }), () => w.disconnect();
   }, [t]);
   const q = Y(() => {
-    X(null), P(null), k("");
+    X(null), z(null), k("");
   }, []);
   V(() => {
-    if (!$ || !t.current) return;
+    if (!H || !t.current) return;
     let f = null;
     const w = () => {
       f && clearTimeout(f), f = setTimeout(() => {
         var _e;
-        const C = window.getSelection(), M = t.current;
-        if (!(C != null && C.rangeCount) || !M) return;
+        const C = window.getSelection(), P = t.current;
+        if (!(C != null && C.rangeCount) || !P) return;
         const re = C.toString().trim();
         if (re === "") return;
         const se = C.getRangeAt(0);
-        if (!M.contains(se.commonAncestorContainer)) return;
-        const Pe = (_e = ne.fromRange(M, se)) == null ? void 0 : _e.toSelector();
-        Pe && !Dt(Pe, R) && (P(se.cloneRange()), k(re), X(Lt(se)));
+        if (!P.contains(se.commonAncestorContainer)) return;
+        const Pe = (_e = ne.fromRange(P, se)) == null ? void 0 : _e.toSelector();
+        Pe && !Dt(Pe, I) && (z(se.cloneRange()), k(re), X(Lt(se)));
       }, n);
-    }, F = (C) => {
+    }, D = (C) => {
       if (!(C.target instanceof Node)) return;
-      const M = document.getElementById(be);
-      M != null && M.contains(C.target) ? (C.preventDefault(), C.stopImmediatePropagation()) : q();
-    }, H = () => {
+      const P = document.getElementById(be);
+      P != null && P.contains(C.target) ? (C.preventDefault(), C.stopImmediatePropagation()) : q();
+    }, M = () => {
       q();
-    }, L = (C) => {
+    }, A = (C) => {
       C.key === "Escape" && q();
     };
-    return document.addEventListener("selectionchange", w), document.addEventListener("mousedown", F), document.addEventListener("touchstart", F), document.addEventListener("keydown", L), window.addEventListener("scroll", H, !0), () => {
-      f && clearTimeout(f), document.removeEventListener("selectionchange", w), document.removeEventListener("mousedown", F), document.removeEventListener("touchstart", F), document.removeEventListener("keydown", L), window.removeEventListener("scroll", H, !0);
+    return document.addEventListener("selectionchange", w), document.addEventListener("mousedown", D), document.addEventListener("touchstart", D), document.addEventListener("keydown", A), window.addEventListener("scroll", M, !0), () => {
+      f && clearTimeout(f), document.removeEventListener("selectionchange", w), document.removeEventListener("mousedown", D), document.removeEventListener("touchstart", D), document.removeEventListener("keydown", A), window.removeEventListener("scroll", M, !0);
     };
-  }, [$, R, n, t, q]);
+  }, [H, I, n, t, q]);
   const Q = Y(
-    (A) => {
-      var M;
+    (R) => {
+      var P;
       const f = t.current;
-      if (!f || !A.highlightData) return null;
-      const { highlightData: w, reaction: F, id: H } = A, { range: L } = w, C = L && ((M = oe.fromSelector(f, L)) == null ? void 0 : M.toRange());
+      if (!f || !R.highlightData) return null;
+      const { highlightData: w, reaction: D, id: M } = R, { range: A } = w, C = A && ((P = oe.fromSelector(f, A)) == null ? void 0 : P.toRange());
       if (C) {
-        const re = F[0] === x.IMPORTANT ? N.important : N.unclear, se = {
-          id: H,
+        const re = D[0] === x.IMPORTANT ? y.important : y.unclear, se = {
+          id: M,
           selectedNoteId: c,
-          type: F[0],
-          isTrayOpen: E,
-          labelPrefix: `${N.notebookNote} (${re})`,
+          type: D[0],
+          isTrayOpen: S,
+          labelPrefix: `${y.notebookNote} (${re})`,
           popupId: tt,
           onClick: () => {
-            h(H), b();
+            p(M), b();
           }
         };
         return Ht(C, se, e), w.textPosition;
       }
       return null;
     },
-    [t, c, E, e, N, h, b]
+    [t, c, S, e, y, p, b]
   );
   V(() => {
-    if (!$ || !p || !t.current) return;
-    const A = t.current, f = p.notes, w = /* @__PURE__ */ new Set(), F = [], H = [];
+    if (!H || !N || !t.current) return;
+    const R = t.current, f = N.notes, w = /* @__PURE__ */ new Set(), D = [], M = [];
     if (f.length === 0) {
-      if (S.current.length > 0) {
-        for (const L of S.current)
-          Ue(L, A);
-        S.current = [], I([]);
+      if (E.current.length > 0) {
+        for (const A of E.current)
+          Ue(A, R);
+        E.current = [], L([]);
       }
       return;
     }
-    if (g && f[0].highlightData.pageLastModifiedAt !== g) {
-      const { notesForUpdate: L, noteIdsForDelete: C } = Rt(
-        A,
+    if (h && f[0].highlightData.pageLastModifiedAt !== h) {
+      const { notesForUpdate: A, noteIdsForDelete: C } = Rt(
+        R,
         f,
-        g
+        h
       );
-      for (const M of L)
-        O({ id: M.id, input: M }).catch((re) => r == null ? void 0 : r(re));
-      for (const M of C)
-        y(M, { onError: s });
+      for (const P of A)
+        O({ id: P.id, input: P }).catch((re) => r == null ? void 0 : r(re));
+      for (const P of C)
+        m(P, { onError: s });
     } else {
-      for (const L of f) {
-        const C = Q(L);
-        w.add(L.id), C && (F.push(L), H.push(C));
+      for (const A of f) {
+        const C = Q(A);
+        w.add(A.id), C && (D.push(A), M.push(C));
       }
-      for (const L of S.current)
-        w.has(L.id) || Ue(L, A);
-      I(H), S.current = F, c && At(c);
+      for (const A of E.current)
+        w.has(A.id) || Ue(A, R);
+      L(M), E.current = D, c && At(c);
     }
   }, [
-    $,
-    p,
+    H,
+    N,
     Q,
-    g,
+    h,
     t,
     O,
-    y,
+    m,
     c
   ]);
-  const ue = (A) => {
+  const de = (R) => {
     const f = t.current;
-    if (!D || !f) return;
-    const w = oe.fromRange(f, D), F = ne.fromRange(f, D);
-    B(
+    if (!F || !f) return;
+    const w = oe.fromRange(f, F), D = ne.fromRange(f, F);
+    _(
       {
         courseId: d,
         objectId: l,
-        objectType: m,
+        objectType: g,
         userText: "",
-        reaction: [A],
+        reaction: [R],
         highlightData: {
-          selectedText: _,
-          textPosition: (F == null ? void 0 : F.toSelector()) ?? null,
+          selectedText: B,
+          textPosition: (D == null ? void 0 : D.toSelector()) ?? null,
           range: w.toSelector(),
-          pageLastModifiedAt: g ?? ""
+          pageLastModifiedAt: h ?? ""
         }
       },
       {
-        onSuccess: (H) => {
+        onSuccess: (M) => {
           var C;
-          const L = H.id;
-          q(), (C = window.getSelection()) == null || C.removeAllRanges(), h(L), b();
+          const A = M.id;
+          q(), (C = window.getSelection()) == null || C.removeAllRanges(), p(A), b();
         },
         onError: o
       }
     );
   };
-  return !D || !W ? null : st(
+  return !F || !W ? null : st(
     /* @__PURE__ */ i(
       "div",
       {
@@ -1026,11 +1026,11 @@ function mo({
           left: W.left,
           whiteSpace: "nowrap"
         },
-        onBlur: (A) => {
+        onBlur: (R) => {
           const f = document.getElementById(be);
-          f != null && f.contains(A.relatedTarget) || q();
+          f != null && f.contains(R.relatedTarget) || q();
         },
-        children: /* @__PURE__ */ i(Ln, { onSelectReaction: ue })
+        children: /* @__PURE__ */ i(Ln, { onSelectReaction: de })
       }
     ),
     document.body
@@ -1040,7 +1040,7 @@ const Dn = (t, e) => ({
   backgroundColor: t === x.IMPORTANT ? e.colors.importantBackground : e.colors.confusingBackground,
   underlineColor: t === x.IMPORTANT ? e.colors.importantUnderline : e.colors.confusingUnderline,
   underlineStyle: t === x.IMPORTANT ? "solid" : "dashed"
-}), Ie = ({
+}), Ce = ({
   children: t,
   type: e = x.IMPORTANT,
   isCardActive: n = !0,
@@ -1069,7 +1069,7 @@ const Dn = (t, e) => ({
   currentPage: 1,
   totalPages: void 0
 };
-function ge(t, e) {
+function me(t, e) {
   const n = typeof e == "number" ? Math.min(e, t) : t;
   return Math.max(1, n);
 }
@@ -1080,24 +1080,24 @@ function Fn(t, e) {
     case "SET_COURSE_FILTER":
       return { ...t, courseFilter: e.payload, currentPage: 1 };
     case "SET_PAGE":
-      return { ...t, currentPage: ge(e.payload, t.totalPages) };
+      return { ...t, currentPage: me(e.payload, t.totalPages) };
     case "FOCUS_PAGE":
       return { ...t, currentPage: Math.max(1, e.payload) };
     case "INCREMENT_PAGE":
-      return { ...t, currentPage: ge(t.currentPage + 1, t.totalPages) };
+      return { ...t, currentPage: me(t.currentPage + 1, t.totalPages) };
     case "DECREMENT_PAGE":
-      return { ...t, currentPage: ge(t.currentPage - 1, t.totalPages) };
+      return { ...t, currentPage: me(t.currentPage - 1, t.totalPages) };
     case "SET_TOTAL_PAGES":
       return t.totalPages === e.payload ? t : {
         ...t,
         totalPages: e.payload,
-        currentPage: ge(t.currentPage, e.payload)
+        currentPage: me(t.currentPage, e.payload)
       };
     default:
       return t;
   }
 }
-function go({
+function fo({
   api: t,
   courseId: e,
   enableCourseFilter: n = !1,
@@ -1105,18 +1105,18 @@ function go({
   pageSize: r = 16,
   focusNoteId: s
 }) {
-  const [a, l] = We(Fn, _n), { filter: m, courseFilter: d, currentPage: g, totalPages: c } = a;
+  const [a, l] = We(Fn, _n), { filter: g, courseFilter: d, currentPage: h, totalPages: c } = a;
   V(() => {
     l({ type: "SET_PAGE", payload: 1 });
   }, [r]);
-  const E = n ? d : e, h = (g - 1) * r, b = {
-    ...E ? { courseId: E } : {},
-    ...m ? { reactions: [m] } : {},
+  const S = n ? d : e, p = (h - 1) * r, b = {
+    ...S ? { courseId: S } : {},
+    ...g ? { reactions: [g] } : {},
     ...o ? { learningObject: o } : {}
-  }, { data: N, isLoading: p, isError: B } = ve({
+  }, { data: y, isLoading: N, isError: _ } = ve({
     api: t,
     filter: b,
-    offset: h,
+    offset: p,
     pageSize: r
   }), { data: O } = ve({
     api: t,
@@ -1124,25 +1124,25 @@ function go({
     offset: 0,
     pageSize: Pn,
     enabled: !!s
-  }), y = K(null);
+  }), m = K(null);
   V(() => {
     if (!s) {
-      y.current = null;
+      m.current = null;
       return;
     }
-    if (y.current === s) return;
-    const U = (O == null ? void 0 : O.notes.findIndex((Q) => Q.id === s)) ?? -1;
-    if (U === -1) return;
-    y.current = s;
-    const q = Math.floor(U / r) + 1;
-    q !== g && l({ type: "FOCUS_PAGE", payload: q });
-  }, [s, O, r, g]);
-  const S = (N == null ? void 0 : N.notes) ?? [], R = N == null ? void 0 : N.pageInfo, I = (R == null ? void 0 : R.totalNrOfPages) ?? void 0, D = s && O ? Math.ceil(O.notes.length / r) : void 0, P = I === void 0 && D === void 0 ? void 0 : Math.max(I ?? 0, D ?? 0);
+    if (m.current === s) return;
+    const $ = (O == null ? void 0 : O.notes.findIndex((Q) => Q.id === s)) ?? -1;
+    if ($ === -1) return;
+    m.current = s;
+    const q = Math.floor($ / r) + 1;
+    q !== h && l({ type: "FOCUS_PAGE", payload: q });
+  }, [s, O, r, h]);
+  const E = (y == null ? void 0 : y.notes) ?? [], I = y == null ? void 0 : y.pageInfo, L = (I == null ? void 0 : I.totalNrOfPages) ?? void 0, F = s && O ? Math.ceil(O.notes.length / r) : void 0, z = L === void 0 && F === void 0 ? void 0 : Math.max(L ?? 0, F ?? 0);
   V(() => {
-    l({ type: "SET_TOTAL_PAGES", payload: P });
-  }, [P]);
-  const _ = Y((U) => {
-    l({ type: "SET_PAGE", payload: U });
+    l({ type: "SET_TOTAL_PAGES", payload: z });
+  }, [z]);
+  const B = Y(($) => {
+    l({ type: "SET_PAGE", payload: $ });
   }, []), k = Y(() => {
     l({
       type: "INCREMENT_PAGE"
@@ -1153,30 +1153,30 @@ function go({
       type: "DECREMENT_PAGE"
       /* DecrementPage */
     });
-  }, []), X = Y((U) => {
-    l({ type: "SET_FILTER", payload: U });
-  }, []), $ = Y((U) => {
-    l({ type: "SET_COURSE_FILTER", payload: U });
+  }, []), X = Y(($) => {
+    l({ type: "SET_FILTER", payload: $ });
+  }, []), H = Y(($) => {
+    l({ type: "SET_COURSE_FILTER", payload: $ });
   }, []);
   return {
-    notes: S,
-    pageInfo: R,
-    isLoading: p,
-    isError: B,
-    filter: m,
+    notes: E,
+    pageInfo: I,
+    isLoading: N,
+    isError: _,
+    filter: g,
     courseFilter: d,
-    currentPage: g,
+    currentPage: h,
     totalPages: c,
     setFilter: X,
-    setCourseFilter: $,
-    setPage: _,
+    setCourseFilter: H,
+    setPage: B,
     fetchNextPage: k,
     fetchPreviousPage: W
   };
 }
 const Ee = "all";
-function ho({ filter: t, setFilter: e }) {
-  const { translations: n } = Z(), o = de(
+function mo({ filter: t, setFilter: e }) {
+  const { translations: n } = Z(), o = ge(
     () => [
       { label: n.allNotes, value: Ee },
       { label: n.important, value: x.IMPORTANT },
@@ -1190,7 +1190,7 @@ function ho({ filter: t, setFilter: e }) {
     [e]
   );
   return {
-    filterElement: de(
+    filterElement: ge(
       () => /* @__PURE__ */ i(
         Fe,
         {
@@ -1208,7 +1208,7 @@ function ho({ filter: t, setFilter: e }) {
 }
 const Mn = ({ hasActiveFilter: t = !1 }) => {
   const { translations: e } = Z(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
-  return /* @__PURE__ */ i(z, { as: "div", textAlign: "center", children: /* @__PURE__ */ T(v, { direction: "column", alignItems: "center", gap: "small", children: [
+  return /* @__PURE__ */ i(j, { as: "div", textAlign: "center", children: /* @__PURE__ */ T(v, { direction: "column", alignItems: "center", gap: "small", children: [
     !t && /* @__PURE__ */ i(ut, { size: "medium" }),
     /* @__PURE__ */ i(pe, { level: "h3", children: n }),
     /* @__PURE__ */ i(J, { color: "secondary", children: o })
@@ -1225,7 +1225,7 @@ const Mn = ({ hasActiveFilter: t = !1 }) => {
     icon: /* @__PURE__ */ i(ke, { size: "x-small" })
   }
 }, ot = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
-  const { translations: o } = Z(), r = Bn[t], s = o[r.translationKey], [a, l] = j(!1), m = K(null), d = K(null), g = Y(
+  const { translations: o } = Z(), r = Bn[t], s = o[r.translationKey], [a, l] = U(!1), g = K(null), d = K(null), h = Y(
     (c) => {
       e == null || e(c), l(!1);
     },
@@ -1233,13 +1233,13 @@ const Mn = ({ hasActiveFilter: t = !1 }) => {
   );
   return V(() => {
     if (!a) return;
-    const c = (h) => {
-      h.key === "Escape" && h.stopPropagation();
-    }, E = (h) => {
-      h.key === "Escape" && (h.stopPropagation(), l(!1));
+    const c = (p) => {
+      p.key === "Escape" && p.stopPropagation();
+    }, S = (p) => {
+      p.key === "Escape" && (p.stopPropagation(), l(!1));
     };
-    return document.addEventListener("keydown", c, !0), document.addEventListener("keyup", E, !0), () => {
-      document.removeEventListener("keydown", c, !0), document.removeEventListener("keyup", E, !0);
+    return document.addEventListener("keydown", c, !0), document.addEventListener("keyup", S, !0), () => {
+      document.removeEventListener("keydown", c, !0), document.removeEventListener("keyup", S, !0);
     };
   }, [a]), n && e ? /* @__PURE__ */ T(
     ie,
@@ -1251,19 +1251,19 @@ const Mn = ({ hasActiveFilter: t = !1 }) => {
       shouldFocusTriggerOnClose: !0,
       trigger: /* @__PURE__ */ i(Me, { color: r.color, renderIcon: r.icon, children: s }),
       children: [
-        /* @__PURE__ */ T(ie.Item, { ref: m, onClick: () => g(x.CONFUSING), children: [
+        /* @__PURE__ */ T(ie.Item, { ref: g, onClick: () => h(x.CONFUSING), children: [
           /* @__PURE__ */ i(ke, { size: "x-small" }),
           ` ${o.markUnclear}`
         ] }),
-        /* @__PURE__ */ T(ie.Item, { ref: d, onClick: () => g(x.IMPORTANT), children: [
+        /* @__PURE__ */ T(ie.Item, { ref: d, onClick: () => h(x.IMPORTANT), children: [
           /* @__PURE__ */ i(we, { size: "x-small" }),
           ` ${o.markImportant}`
         ] })
       ]
     }
-  ) : /* @__PURE__ */ i(z, { display: "inline-flex", children: /* @__PURE__ */ i(Me, { color: r.color, renderIcon: r.icon, children: s }) });
+  ) : /* @__PURE__ */ i(j, { display: "inline-flex", children: /* @__PURE__ */ i(Me, { color: r.color, renderIcon: r.icon, children: s }) });
 };
-function je(t, e) {
+function Ge(t, e) {
   return (t instanceof Date ? t : new Date(t)).toLocaleString(e, {
     year: "numeric",
     month: "short",
@@ -1279,84 +1279,85 @@ const Hn = ({
   onClick: s,
   onDelete: a,
   onSaveNote: l,
-  onTypeChange: m,
+  onTypeChange: g,
   isActive: d,
-  isPanelView: g = !1,
+  isPanelView: h = !1,
   courseName: c,
-  locale: E,
-  highlightTheme: h,
+  locale: S,
+  highlightTheme: p,
   renderLink: b,
-  href: N
+  href: y
 }) => {
-  const { translations: p } = Z(), [B, O] = j(!1), [y, S] = j(!1), [R, I] = j(o || ""), [D, P] = j(!1), _ = K(null), k = Y((f) => {
-    _.current = f;
-  }, []), W = K(null), X = K(null), $ = K(!1);
+  const { translations: N } = Z(), [_, O] = U(!1), [m, E] = U(!1), [I, L] = U(o || ""), [F, z] = U(!1), B = K(null), k = Y((f) => {
+    B.current = f;
+  }, []), W = K(null), X = K(null), H = K(!1);
   V(() => {
     var f, w;
-    d && ((f = _.current) == null || f.scrollIntoView({ behavior: "smooth", block: "nearest" }), (w = _.current) == null || w.focus());
+    d && ((f = B.current) == null || f.scrollIntoView({ behavior: "smooth", block: "nearest" }), (w = B.current) == null || w.focus());
   }, [d]), V(() => {
     var f, w;
-    y ? ($.current = !0, (f = W.current) == null || f.focus()) : $.current && ($.current = !1, (w = X.current) == null || w.focus());
-  }, [y]);
-  const U = r === x.IMPORTANT ? p.important : p.unclear, q = (f) => {
+    m ? (H.current = !0, (f = W.current) == null || f.focus()) : H.current && (H.current = !1, (w = X.current) == null || w.focus());
+  }, [m]);
+  const $ = r === x.IMPORTANT ? N.important : N.unclear, q = (f) => {
     f.key === "Enter" && (f.preventDefault(), s == null || s());
-  }, Q = [U, p.note];
-  n && Q.push(n), o && Q.push(o), e && Q.push(je(e, E)), c && Q.push(c);
-  const ue = Q.join(", "), A = /* @__PURE__ */ T(
-    z,
+  }, Q = [$, N.note];
+  n && Q.push(n), o && Q.push(o), e && Q.push(Ge(e, S)), c && Q.push(c);
+  const de = Q.join(", "), R = /* @__PURE__ */ T(
+    j,
     {
       as: "div",
+      height: "100%",
       borderWidth: "small",
       borderRadius: "medium",
       padding: "small",
       position: "relative",
-      role: N || y ? void 0 : "button",
-      "aria-label": N ? void 0 : ue,
-      "aria-pressed": N || y ? void 0 : d,
-      tabIndex: N || d ? -1 : 0,
+      role: y || m ? void 0 : "button",
+      "aria-label": y ? void 0 : de,
+      "aria-pressed": y || m ? void 0 : d,
+      tabIndex: y || d ? -1 : 0,
       "data-testid": `note-card-${t}`,
       elementRef: k,
       onClick: d ? void 0 : s,
       onMouseEnter: () => O(!0),
       onMouseLeave: () => O(!1),
       onKeyDown: d ? void 0 : q,
-      cursor: y ? "default" : "pointer",
+      cursor: m ? "default" : "pointer",
       children: [
-        /* @__PURE__ */ T(v, { direction: "column", gap: "small", children: [
+        /* @__PURE__ */ T(v, { direction: "column", gap: "small", height: "100%", children: [
           /* @__PURE__ */ i(
             ot,
             {
               type: r,
-              onTypeChange: g && m ? (f) => m(t, f) : void 0,
-              renderAsMenuTrigger: g && !!m && !!d
+              onTypeChange: h && g ? (f) => g(t, f) : void 0,
+              renderAsMenuTrigger: h && !!g && !!d
             }
           ),
-          n ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: /* @__PURE__ */ i(J, { children: d && g ? /* @__PURE__ */ i(
-            Ie,
+          n ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: /* @__PURE__ */ i(J, { children: d && h ? /* @__PURE__ */ i(
+            Ce,
             {
               type: r,
-              isCardActive: !!d || B,
-              theme: h,
+              isCardActive: !!d || _,
+              theme: p,
               children: n
             }
           ) : /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ i(
-            Ie,
+            Ce,
             {
               type: r,
-              isCardActive: !!d || B,
-              theme: h,
+              isCardActive: !!d || _,
+              theme: p,
               children: n
             }
           ) }) }) }) : /* @__PURE__ */ i(nt, {}),
-          /* @__PURE__ */ T(v, { direction: "column", gap: "small", children: [
-            y && g ? /* @__PURE__ */ T(v, { direction: "column", gap: "x-small", children: [
+          /* @__PURE__ */ i(v.Item, { shouldGrow: !0, children: /* @__PURE__ */ T(v, { direction: "column", gap: "small", height: "100%", children: [
+            m && h ? /* @__PURE__ */ T(v, { direction: "column", gap: "x-small", children: [
               /* @__PURE__ */ i(
                 qe,
                 {
-                  label: /* @__PURE__ */ i(mt, { children: p.editNote }),
-                  value: R,
-                  onChange: (f) => I(f.target.value),
-                  placeholder: p.addNoteOptional,
+                  label: /* @__PURE__ */ i(mt, { children: N.editNote }),
+                  value: I,
+                  onChange: (f) => L(f.target.value),
+                  placeholder: N.addNoteOptional,
                   textareaRef: (f) => {
                     W.current = f;
                   }
@@ -1370,9 +1371,9 @@ const Hn = ({
                     size: "small",
                     "data-testid": `note-card-${t}-cancel`,
                     onClick: () => {
-                      I(o || ""), S(!1);
+                      L(o || ""), E(!1);
                     },
-                    children: p.cancel
+                    children: N.cancel
                   }
                 ) }),
                 /* @__PURE__ */ i(v.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
@@ -1383,13 +1384,13 @@ const Hn = ({
                     size: "small",
                     "data-testid": `note-card-${t}-save`,
                     onClick: () => {
-                      l == null || l(t, R.trim()), S(!1);
+                      l == null || l(t, I.trim()), E(!1);
                     },
-                    children: p.save
+                    children: N.save
                   }
                 ) })
               ] })
-            ] }) : o ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: d && g ? /* @__PURE__ */ T(J, { children: [
+            ] }) : o ? /* @__PURE__ */ i("div", { style: { wordBreak: "break-word", overflowWrap: "break-word" }, children: d && h ? /* @__PURE__ */ T(J, { children: [
               o,
               " ",
               /* @__PURE__ */ i(
@@ -1399,19 +1400,19 @@ const Hn = ({
                   withBackground: !1,
                   withBorder: !1,
                   margin: "0 0 0 xxx-small",
-                  screenReaderLabel: p.editNote,
+                  screenReaderLabel: N.editNote,
                   "data-testid": `note-card-${t}-edit`,
                   elementRef: (f) => {
                     X.current = f;
                   },
                   onClick: (f) => {
-                    f.stopPropagation(), S(!0);
+                    f.stopPropagation(), E(!0);
                   },
                   children: /* @__PURE__ */ i(Se, {})
                 }
               )
-            ] }) : /* @__PURE__ */ i(J, { children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", children: o }) }) }) : g && d ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ T(J, { color: "secondary", children: [
-              p.addNotePrompt,
+            ] }) : /* @__PURE__ */ i(J, { children: /* @__PURE__ */ i(Te, { maxLines: 3, truncate: "word", children: o }) }) }) : h && d ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ T(J, { color: "secondary", children: [
+              N.addNotePrompt,
               " ",
               /* @__PURE__ */ i(
                 le,
@@ -1420,20 +1421,20 @@ const Hn = ({
                   withBackground: !1,
                   withBorder: !1,
                   margin: "0 0 0 xxx-small",
-                  screenReaderLabel: p.editNote,
+                  screenReaderLabel: N.editNote,
                   "data-testid": `note-card-${t}-edit`,
                   elementRef: (f) => {
                     X.current = f;
                   },
                   onClick: (f) => {
-                    f.stopPropagation(), S(!0);
+                    f.stopPropagation(), E(!0);
                   },
                   children: /* @__PURE__ */ i(Se, {})
                 }
               )
             ] }) }) : null,
-            /* @__PURE__ */ T(v, { justifyItems: "space-between", alignItems: "center", children: [
-              /* @__PURE__ */ i(J, { size: "small", color: "secondary", children: je(e, E) }),
+            /* @__PURE__ */ T(v, { justifyItems: "space-between", alignItems: "center", margin: "auto 0 0 0", children: [
+              /* @__PURE__ */ i(J, { size: "small", color: "secondary", children: Ge(e, S) }),
               d && a && /* @__PURE__ */ i(
                 le,
                 {
@@ -1441,20 +1442,20 @@ const Hn = ({
                   withBackground: !1,
                   withBorder: !1,
                   color: "danger",
-                  screenReaderLabel: p.deleteNote,
+                  screenReaderLabel: N.deleteNote,
                   "data-testid": `note-card-${t}-delete`,
                   onClick: (f) => {
-                    f.stopPropagation(), P(!0);
+                    f.stopPropagation(), z(!0);
                   },
                   children: /* @__PURE__ */ i(he, {})
                 }
               )
             ] }),
             c && /* @__PURE__ */ i(J, { size: "small", color: "secondary", children: c })
-          ] })
+          ] }) })
         ] }),
-        D && a && /* @__PURE__ */ i(
-          z,
+        F && a && /* @__PURE__ */ i(
+          j,
           {
             as: "div",
             background: "primary",
@@ -1484,9 +1485,9 @@ const Hn = ({
                       renderIcon: /* @__PURE__ */ i(he, {}),
                       "data-testid": `note-card-${t}-confirm-delete`,
                       onClick: (f) => {
-                        f.stopPropagation(), a(t), P(!1);
+                        f.stopPropagation(), a(t), z(!1);
                       },
-                      children: p.deleteNote
+                      children: N.deleteNote
                     }
                   ),
                   /* @__PURE__ */ i(
@@ -1496,9 +1497,9 @@ const Hn = ({
                       size: "small",
                       "data-testid": `note-card-${t}-cancel-delete`,
                       onClick: (f) => {
-                        f.stopPropagation(), P(!1);
+                        f.stopPropagation(), z(!1);
                       },
-                      children: p.cancel
+                      children: N.cancel
                     }
                   )
                 ]
@@ -1509,27 +1510,16 @@ const Hn = ({
       ]
     }
   );
-  return N && b ? b({ href: N, children: A, ariaLabel: ue }) : A;
-};
-function $n(t, e) {
-  const n = Array.from({ length: e }, () => []);
-  return t.forEach((o, r) => {
-    n[r % e].push(o);
-  }), n;
-}
-const Un = {
-  display: "flex",
+  return y && b ? b({ href: y, children: R, ariaLabel: de }) : R;
+}, $n = {
+  display: "grid",
   gap: "1rem",
   boxSizing: "border-box",
   width: "100%",
-  alignItems: "flex-start"
-}, jn = {
-  display: "flex",
-  flexDirection: "column",
-  gap: "1rem",
-  flex: 1,
-  minWidth: 0
-}, po = ({
+  margin: 0,
+  padding: 0,
+  listStyle: "none"
+}, go = ({
   notes: t,
   isLoading: e,
   isError: n,
@@ -1538,69 +1528,70 @@ const Un = {
   onPageChange: s,
   onNoteSelect: a,
   onNoteDelete: l,
-  onNoteSave: m,
+  onNoteSave: g,
   onNoteTypeChange: d,
-  selectedNoteId: g,
+  selectedNoteId: h,
   hasActiveFilter: c = !1,
-  columnCount: E = 1,
-  highlightTheme: h,
+  columnCount: S = 1,
+  highlightTheme: p,
   locale: b,
-  renderNoteLink: N,
-  noteHref: p
+  renderNoteLink: y,
+  noteHref: N
 }) => {
-  const { translations: B } = Z(), O = de(
-    () => $n(t, E),
-    [t, E]
-  );
+  const { translations: _ } = Z();
   if (e)
-    return /* @__PURE__ */ i(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(ht, { renderTitle: B.loadingNotes }) });
+    return /* @__PURE__ */ i(j, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-loading", children: /* @__PURE__ */ i(ht, { renderTitle: _.loadingNotes }) });
   if (n)
-    return /* @__PURE__ */ i(z, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(pe, { level: "h4", children: B.failedToLoadNotes }) });
+    return /* @__PURE__ */ i(j, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(pe, { level: "h4", children: _.failedToLoadNotes }) });
   if (t.length === 0)
-    return /* @__PURE__ */ i(z, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Mn, { hasActiveFilter: c }) });
-  const y = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
+    return /* @__PURE__ */ i(j, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(Mn, { hasActiveFilter: c }) });
+  const O = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
   return /* @__PURE__ */ T(rt, { children: [
-    /* @__PURE__ */ i("div", { style: Un, "data-testid": "notes-grid", children: O.map((S, R) => (
-      // oxlint-disable-next-line react/no-array-index-key -- columns are positional, index is stable
-      /* @__PURE__ */ i("div", { style: jn, children: S.map((I) => {
-        var D;
-        return /* @__PURE__ */ i(
-          Hn,
-          {
-            noteId: I.id,
-            date: I.createdAt,
-            type: I.reaction[0] ?? x.IMPORTANT,
-            highlight: (D = I.highlightData) == null ? void 0 : D.selectedText,
-            note: I.userText,
-            isActive: g === I.id,
-            isPanelView: !!g,
-            onClick: a ? () => a(I.id) : void 0,
-            onDelete: l ? (P) => l(P) : void 0,
-            onSaveNote: m ? (P, _) => m(P, _) : void 0,
-            onTypeChange: d ? (P, _) => d(P, _) : void 0,
-            highlightTheme: h,
-            locale: b,
-            renderLink: N,
-            href: p ? p(I.id, I) : void 0
-          },
-          I.id
-        );
-      }) }, R)
-    )) }),
-    y && /* @__PURE__ */ i(v, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(v.Item, { children: /* @__PURE__ */ i(
+    /* @__PURE__ */ i(
+      "ul",
+      {
+        style: { ...$n, gridTemplateColumns: `repeat(${S}, minmax(0, 1fr))` },
+        role: "list",
+        "data-testid": "notes-grid",
+        children: t.map((m) => {
+          var E;
+          return /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+            Hn,
+            {
+              noteId: m.id,
+              date: m.createdAt,
+              type: m.reaction[0] ?? x.IMPORTANT,
+              highlight: (E = m.highlightData) == null ? void 0 : E.selectedText,
+              note: m.userText,
+              isActive: h === m.id,
+              isPanelView: !!h,
+              onClick: a ? () => a(m.id) : void 0,
+              onDelete: l ? (I) => l(I) : void 0,
+              onSaveNote: g ? (I, L) => g(I, L) : void 0,
+              onTypeChange: d ? (I, L) => d(I, L) : void 0,
+              highlightTheme: p,
+              locale: b,
+              renderLink: y,
+              href: N ? N(m.id, m) : void 0
+            }
+          ) }, m.id);
+        })
+      }
+    ),
+    O && /* @__PURE__ */ i(v, { justifyItems: "center", padding: "small", "data-testid": "notes-pagination", children: /* @__PURE__ */ i(v.Item, { children: /* @__PURE__ */ i(
       gt,
       {
         as: "nav",
         variant: "input",
-        labelNext: B.nextPage,
-        labelPrev: B.previousPage,
+        labelNext: _.nextPage,
+        labelPrev: _.previousPage,
         currentPage: o,
         totalPageNumber: r,
         onPageChange: s
       }
     ) }) })
   ] });
-}, No = ({
+}, ho = ({
   noteText: t,
   reaction: e,
   highlightText: n,
@@ -1609,19 +1600,19 @@ const Un = {
   onDelete: s,
   onTypeChange: a,
   onBack: l,
-  editing: m = !1
+  editing: g = !1
 }) => {
-  const { translations: d } = Z(), [g, c] = j(m), [E, h] = j(t || ""), [b, N] = j(!1);
+  const { translations: d } = Z(), [h, c] = U(g), [S, p] = U(t || ""), [b, y] = U(!1);
   return /* @__PURE__ */ T(v, { direction: "column", gap: "small", "data-testid": "single-note", children: [
-    n != null ? /* @__PURE__ */ i(z, { as: "div", children: /* @__PURE__ */ i(J, { children: /* @__PURE__ */ i(Ie, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(nt, {}),
+    n != null ? /* @__PURE__ */ i(j, { as: "div", children: /* @__PURE__ */ i(J, { children: /* @__PURE__ */ i(Ce, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(nt, {}),
     /* @__PURE__ */ i(ot, { type: e, onTypeChange: a, renderAsMenuTrigger: !!a }),
-    g ? /* @__PURE__ */ T(v, { direction: "column", gap: "x-small", children: [
+    h ? /* @__PURE__ */ T(v, { direction: "column", gap: "x-small", children: [
       /* @__PURE__ */ i(
         qe,
         {
           label: d.addNoteOptional,
-          value: E,
-          onChange: (p) => h(p.target.value),
+          value: S,
+          onChange: (N) => p(N.target.value),
           resize: "vertical"
         }
       ),
@@ -1633,7 +1624,7 @@ const Un = {
             size: "small",
             "data-testid": "single-note-cancel",
             onClick: () => {
-              h(t || ""), c(!1);
+              p(t || ""), c(!1);
             },
             children: d.cancel
           }
@@ -1646,14 +1637,14 @@ const Un = {
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(E), c(!1);
+              r(S), c(!1);
             },
             children: d.save
           }
         ) })
       ] })
     ] }) : /* @__PURE__ */ T(v, { direction: "column", gap: "small", children: [
-      t && /* @__PURE__ */ T(z, { as: "div", children: [
+      t && /* @__PURE__ */ T(j, { as: "div", children: [
         /* @__PURE__ */ i(pe, { level: "h4", margin: "0 0 xx-small 0", children: d.note }),
         /* @__PURE__ */ i(J, { children: t })
       ] }),
@@ -1678,7 +1669,7 @@ const Un = {
               color: "danger",
               screenReaderLabel: d.deleteNote,
               "data-testid": "single-note-delete",
-              onClick: () => N(!0),
+              onClick: () => y(!0),
               children: /* @__PURE__ */ i(he, {})
             }
           ),
@@ -1696,7 +1687,7 @@ const Un = {
           )
         ] })
       ] }),
-      b && s && /* @__PURE__ */ i(z, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ T(v, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
+      b && s && /* @__PURE__ */ i(j, { as: "div", background: "primary", padding: "medium", borderRadius: "large", children: /* @__PURE__ */ T(v, { direction: "column", justifyItems: "center", alignItems: "center", gap: "x-small", children: [
         /* @__PURE__ */ i(
           ee,
           {
@@ -1706,7 +1697,7 @@ const Un = {
             renderIcon: /* @__PURE__ */ i(he, {}),
             "data-testid": "single-note-confirm-delete",
             onClick: () => {
-              s(), N(!1);
+              s(), y(!1);
             },
             children: d.deleteNote
           }
@@ -1717,7 +1708,7 @@ const Un = {
             display: "block",
             size: "small",
             "data-testid": "single-note-cancel-delete",
-            onClick: () => N(!1),
+            onClick: () => y(!1),
             children: d.cancel
           }
         )
@@ -1726,26 +1717,26 @@ const Un = {
   ] });
 };
 export {
-  mo as ContentWithNoteWrapper,
-  Ie as Highlight,
+  uo as ContentWithNoteWrapper,
+  Ce as Highlight,
   nt as HighlightError,
   Hn as NoteCard,
   ot as NoteChip,
   Ln as NoteReactionMenu,
   Mn as NotebookEmptyState,
-  uo as NotebookProvider,
+  lo as NotebookProvider,
   On as NotebookTranslationsProvider,
-  fo as NotebookTray,
-  po as NotesListView,
+  co as NotebookTray,
+  go as NotesListView,
   x as REACTION_TYPE,
-  No as SingleNote,
+  ho as SingleNote,
   Le as createTransparentColor,
-  jt as useCreateNote,
-  Gt as useDeleteNote,
+  Gt as useCreateNote,
+  jt as useDeleteNote,
   ve as useGetNotes,
   et as useNotebook,
   Z as useNotebookTranslations,
-  go as useNotesData,
-  ho as useReactionFilter,
+  fo as useNotesData,
+  mo as useReactionFilter,
   zt as useUpdateNote
 };