@floegence/floe-webapp-core 0.35.39 → 0.35.41

package/dist/components/notes/NotesOverlay.js

@@ -0,0 +1,901 @@
+import { createComponent as c, insert as a, use as Mt, effect as X, className as It, setAttribute as g, memo as he, setStyleProperty as q, template as p, delegateEvents as Fe } from "solid-js/web";
+import { createSignal as R, createMemo as x, createEffect as tt, onCleanup as yt, Show as M, For as ct, untrack as ve } from "solid-js";
+import { Motion as Vt } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { FileText as We, Copy as pe, Trash as Ft, Plus as He, Pencil as fe, X as Wt, Check as Ke } from "../icons/index.js";
+import { cn as Pt } from "../../utils/cn.js";
+import { NotesContextMenu as Ge, NOTES_CONTEXT_MENU_WIDTH_PX as qe, estimateNotesContextMenuHeight as Ue } from "./NotesContextMenu.js";
+import { NotesOverlayIcon as Ze, NotesAnimalIcon as Ht, NotesTrashCanIcon as me, NOTE_COLOR_LABELS as je } from "./notesAppearance.js";
+import { groupTrashItems as Je, computeBoardBounds as Qe, visibleWorldRect as ge, mergeBoardBounds as tn, noteBucketMetrics as Dt, NOTE_COLOR_TOKENS as en, worldToScreen as nn, screenToWorld as on, zoomViewportAtPoint as ye, centerViewportOnWorldPoint as rn } from "./types.js";
+import { useNotification as an } from "../../context/NotificationContext.js";
+var sn = /* @__PURE__ */ p('<div class=notes-overlay__topic-create data-notes-interactive=true><input class=notes-overlay__topic-input placeholder="New topic"data-notes-interactive=true><div class=notes-overlay__topic-create-actions><button type=button class=notes-overlay__text-action data-notes-interactive=true>Add</button><button type=button class=notes-overlay__text-action data-notes-interactive=true>Cancel'), ln = /* @__PURE__ */ p("<div class=notes-overlay__empty-rail>Create your first topic to start pinning notes."), cn = /* @__PURE__ */ p("<div class=notes-overlay__loading>Loading notes…"), dn = /* @__PURE__ */ p("<div class=notes-overlay__empty-board>Right click anywhere to create the first note in this topic."), un = /* @__PURE__ */ p("<span class=notes-overlay__trash-count>"), _n = /* @__PURE__ */ p('<button type=button class=notes-overlay__trash-dock aria-label="Open trash"data-notes-interactive=true data-notes-trash-toggle=true>'), hn = /* @__PURE__ */ p('<div class=notes-trash__head><span class=notes-trash__title></span><button type=button class="notes-overlay__close notes-overlay__close--panel"aria-label="Close trash"data-notes-interactive=true>'), vn = /* @__PURE__ */ p("<div class=notes-trash__empty>Trash is empty."), pn = /* @__PURE__ */ p("<div class=notes-trash__content>"), fn = /* @__PURE__ */ p('<div class=notes-editor__head><span>Edit note</span><button type=button class="notes-overlay__close notes-overlay__close--panel"aria-label="Close note editor"data-notes-interactive=true>'), mn = /* @__PURE__ */ p("<div class=notes-editor__colors>"), gn = /* @__PURE__ */ p("<textarea class=notes-editor__textarea data-notes-interactive=true>"), yn = /* @__PURE__ */ p("<div class=notes-editor__actions><button type=button class=notes-overlay__text-action data-notes-interactive=true>Save</button><button type=button class=notes-overlay__text-action data-notes-interactive=true>Cancel"), wn = /* @__PURE__ */ p('<div class=notes-overlay><div class=notes-overlay__scrim></div><aside><div class=notes-overlay__rail-head><button type=button class=notes-overlay__brand aria-label="Notes topics"data-notes-interactive=true><span>Notes</span></button><button type=button class=notes-overlay__icon-button aria-label="Create topic"data-notes-interactive=true></button></div><div class=notes-overlay__topic-list></div></aside><div class=notes-overlay__viewport><div class=notes-overlay__hud><button type=button class=notes-overlay__hud-topic data-notes-interactive=true></button><button type=button class=notes-overlay__close aria-label="Close notes overlay"data-notes-interactive=true></button></div><div class=notes-overlay__board>'), $n = /* @__PURE__ */ p('<input class="notes-overlay__topic-input notes-overlay__topic-input--row"data-notes-interactive=true>'), bn = /* @__PURE__ */ p("<span>"), xn = /* @__PURE__ */ p('<div role=button tabindex=0 data-notes-interactive=true><span class=notes-overlay__topic-icon></span><span class=notes-overlay__topic-copy><span class=notes-overlay__topic-meta><span></span></span></span><span class=notes-overlay__topic-actions><button type=button class=notes-overlay__inline-icon data-notes-interactive=true></button><button type=button class="notes-overlay__inline-icon notes-overlay__inline-icon--danger"data-notes-interactive=true>'), Cn = /* @__PURE__ */ p("<span class=notes-overlay__topic-name>"), Tn = /* @__PURE__ */ p("<span>No topic"), Sn = /* @__PURE__ */ p('<span class="notes-overlay__topic-icon notes-overlay__topic-icon--hud">'), kn = /* @__PURE__ */ p("<span class=notes-overlay__hud-topic-copy><span class=notes-overlay__hud-topic-name></span><span class=notes-overlay__hud-topic-state>%"), En = /* @__PURE__ */ p("<span>Copied"), Mn = /* @__PURE__ */ p('<div><div class=notes-note__surface><div class=notes-note__toolbar><span class=notes-note__eyebrow></span><span class=notes-note__toolbar-actions><button type=button class=notes-overlay__inline-icon aria-label="Edit note"data-notes-interactive=true></button><button type=button class="notes-overlay__inline-icon notes-overlay__inline-icon--danger"aria-label="Delete note"data-notes-interactive=true></button></span></div><div class=notes-note__body>'), In = /* @__PURE__ */ p('<section class=notes-trash__group><div class=notes-trash__group-head><div class=notes-trash__group-title><span class="notes-overlay__topic-icon notes-overlay__topic-icon--hud"></span><span></span></div><button type=button class="notes-overlay__text-action notes-overlay__text-action--danger"data-notes-interactive=true>Clear</button></div><div class=notes-trash__grid>'), Pn = /* @__PURE__ */ p('<div class="notes-note notes-note--trash"><div class=notes-note__surface><div class="notes-note__toolbar notes-note__toolbar--trash"><span class=notes-note__eyebrow></span><button type=button class=notes-overlay__inline-icon aria-label="Restore note"data-notes-interactive=true></button></div><div class=notes-note__body>'), Dn = /* @__PURE__ */ p("<button type=button data-notes-interactive=true>"), Nn = /* @__PURE__ */ p('<div class=notes-minimap data-notes-interactive=true><svg viewBox="0 0 170 118"class=notes-minimap__svg aria-hidden=true><rect class=notes-minimap__viewport rx=4>'), Rn = /* @__PURE__ */ p("<svg><rect class=notes-minimap__note rx=2></svg>", !1, !0, !1);
+const Xn = 430, Ln = 6, Yn = 960;
+function On(o) {
+  const h = Number(o);
+  return !Number.isFinite(h) || h <= 0 ? "" : new Intl.DateTimeFormat("en-US", {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(new Date(h));
+}
+function Kt(o) {
+  const h = o instanceof HTMLElement ? o : null;
+  if (!h) return !1;
+  if (h.closest('[data-notes-interactive="true"]')) return !0;
+  const w = h.tagName.toLowerCase();
+  return w === "button" || w === "input" || w === "textarea" || w === "select" || w === "a";
+}
+function we(o) {
+  if (o.length < 2) return 0;
+  const h = o[0], w = o[1];
+  return Math.hypot(w.clientX - h.clientX, w.clientY - h.clientY);
+}
+function $e(o) {
+  if (o.length < 2) return {
+    x: 0,
+    y: 0
+  };
+  const h = o[0], w = o[1];
+  return {
+    x: (h.clientX + w.clientX) / 2,
+    y: (h.clientY + w.clientY) / 2
+  };
+}
+function Bn(o, h, w) {
+  const U = Ue(w);
+  return {
+    x: Math.max(12, Math.min(o, window.innerWidth - qe - 16)),
+    y: Math.max(12, Math.min(h, window.innerHeight - U - 16))
+  };
+}
+function be(o) {
+  const h = String(o.preview_text ?? "").trim();
+  return h || "Empty note";
+}
+function Zn(o) {
+  const h = an(), [w, U] = R({
+    width: 0,
+    height: 0
+  }), [k, wt] = R(!1), [$t, G] = R(!1), [et, B] = R(!1), [V, r] = R(null), [I, L] = R(null), [$, F] = R(null), [P, C] = R(""), [Z, dt] = R("sage"), [ut, nt] = R(!1), [_t, bt] = R(""), [Nt, ht] = R(null), [Gt, qt] = R("");
+  let W, xt, Rt, Xt, Lt, Yt, vt = null, pt = null, m = null, ot = null;
+  const Ot = x(() => o.controller.snapshot()), Ut = x(() => o.controller.loading?.() ?? !1), xe = x(() => o.controller.connectionState?.() ?? "idle"), Ce = x(() => o.controller.activeTopicID()), Y = x(() => o.controller.viewport()), lt = x(() => Ot().topics), ft = x(() => Ot().items), mt = x(() => Ot().trash_items), j = x(() => lt().find((t) => t.topic_id === Ce()) ?? lt()[0] ?? null), Ct = x(() => {
+    const t = j();
+    return t ? ft().filter((e) => e.topic_id === t.topic_id) : [];
+  }), Zt = x(() => Je(mt())), Te = x(() => {
+    const t = /* @__PURE__ */ new Map();
+    for (const e of ft())
+      t.set(e.topic_id, (t.get(e.topic_id) ?? 0) + 1);
+    return t;
+  }), Se = x(() => {
+    const t = /* @__PURE__ */ new Map();
+    for (const e of mt())
+      t.set(e.topic_id, (t.get(e.topic_id) ?? 0) + 1);
+    return t;
+  }), ke = x(() => Qe(Ct())), Ee = x(() => {
+    const t = ge(Y(), w().width || 1, w().height || 1);
+    return tn(ke(), t);
+  }), Bt = x(() => {
+    const t = $();
+    return t ? ft().find((e) => e.note_id === t) ?? null : null;
+  });
+  function Tt(t) {
+    o.controller.setViewport(typeof t == "function" ? t(Y()) : t);
+  }
+  function jt() {
+    vt != null && (window.clearTimeout(vt), vt = null), L(null);
+  }
+  function Me(t) {
+    jt(), L(t), vt = window.setTimeout(() => {
+      vt = null, L((e) => e === t ? null : e);
+    }, 1500);
+  }
+  function Ie(t) {
+    r(null);
+  }
+  function Jt() {
+    const t = window.innerWidth < Yn;
+    wt(t), G((e) => t ? e : !0);
+  }
+  function Qt(t) {
+    F(t.note_id), C(t.body), dt(t.color_token), r(null), B(!1), queueMicrotask(() => Xt?.focus());
+  }
+  function it() {
+    F(null);
+  }
+  async function te() {
+    const t = Bt();
+    if (t)
+      try {
+        await o.controller.updateNote(t.note_id, {
+          body: P(),
+          color_token: Z()
+        }), it();
+      } catch (e) {
+        h.error("Save failed", e instanceof Error ? e.message : String(e));
+      }
+  }
+  async function ee() {
+    const t = _t().trim();
+    if (t)
+      try {
+        const e = await o.controller.createTopic({
+          name: t
+        });
+        o.controller.setActiveTopicID(e.topic_id), nt(!1), bt(""), k() && G(!1);
+      } catch (e) {
+        h.error("Topic failed", e instanceof Error ? e.message : String(e));
+      }
+  }
+  async function ne(t) {
+    const e = Gt().trim();
+    if (ht(null), !(!e || e === t.name))
+      try {
+        await o.controller.updateTopic(t.topic_id, {
+          name: e
+        });
+      } catch (l) {
+        h.error("Rename failed", l instanceof Error ? l.message : String(l));
+      }
+  }
+  async function Pe(t) {
+    try {
+      if (await o.controller.deleteTopic(t) === !1) return;
+      it();
+    } catch (e) {
+      h.error("Delete failed", e instanceof Error ? e.message : String(e));
+    }
+  }
+  async function oe(t, e, l, v) {
+    const f = j();
+    if (!f) {
+      h.error("Topic required", "Create a topic first.");
+      return;
+    }
+    try {
+      const y = await o.controller.createNote({
+        topic_id: f.topic_id,
+        body: l,
+        x: Math.round(t),
+        y: Math.round(e)
+      });
+      v?.openEditor && Qt(y);
+    } catch (y) {
+      h.error("Note failed", y instanceof Error ? y.message : String(y));
+    }
+  }
+  async function De(t, e) {
+    let l = "";
+    try {
+      l = await navigator.clipboard.readText();
+    } catch {
+      h.error("Paste failed", "Clipboard permission denied.");
+      return;
+    }
+    if (!String(l ?? "").trim()) {
+      h.error("Clipboard empty", "Copy some text first.");
+      return;
+    }
+    await oe(t, e, l, {
+      openEditor: !1
+    });
+  }
+  async function Ne(t) {
+    Promise.resolve(o.controller.bringNoteToFront(t.note_id)).catch(() => {
+    });
+    try {
+      await navigator.clipboard.writeText(t.body), Me(t.note_id);
+    } catch {
+      h.error("Copy failed", "Clipboard permission denied.");
+    }
+  }
+  async function ie(t) {
+    $() === t.note_id && it();
+    try {
+      await o.controller.deleteNote(t.note_id);
+    } catch (e) {
+      h.error("Delete failed", e instanceof Error ? e.message : String(e));
+    }
+  }
+  async function Re(t) {
+    try {
+      const e = await o.controller.restoreNote(t.note_id);
+      o.controller.setActiveTopicID(e.topic_id), k() && B(!1);
+    } catch (e) {
+      h.error("Restore failed", e instanceof Error ? e.message : String(e));
+    }
+  }
+  async function Xe(t) {
+    try {
+      await o.controller.clearTrashTopic(t.topic_id);
+    } catch (e) {
+      h.error("Clear failed", e instanceof Error ? e.message : String(e));
+    }
+  }
+  function Le(t, e) {
+    const l = W?.getBoundingClientRect();
+    return l ? on(Y(), {
+      x: t - l.left,
+      y: e - l.top
+    }) : {
+      x: 0,
+      y: 0
+    };
+  }
+  function zt(t, e, l) {
+    const v = Le(t, e), f = j() ? 2 : 0, y = l ? f + 2 : Math.max(1, f), z = Bn(t, e, y);
+    r({
+      x: z.x,
+      y: z.y,
+      worldX: v.x,
+      worldY: v.y,
+      noteID: l
+    }), B(!1);
+  }
+  function re(t, e) {
+    if (t.button === 0 && !Kt(t.target) && (Ie(), m = {
+      pointerId: t.pointerId,
+      pointerType: t.pointerType || "mouse",
+      noteID: e,
+      startClientX: t.clientX,
+      startClientY: t.clientY,
+      startViewport: Y(),
+      dragged: !1,
+      contextOpened: !1,
+      longPressTimer: null
+    }, m.pointerType !== "mouse")) {
+      const l = t.pointerId;
+      m.longPressTimer = window.setTimeout(() => {
+        !m || m.pointerId !== l || (m.contextOpened = !0, ve(() => zt(m.startClientX, m.startClientY, m.noteID)));
+      }, Xn);
+    }
+  }
+  function ae(t) {
+    if (!m || m.pointerId !== t) return null;
+    const e = m;
+    return e.longPressTimer != null && window.clearTimeout(e.longPressTimer), m = null, e;
+  }
+  tt(() => {
+    Jt();
+    const t = () => Jt();
+    window.addEventListener("resize", t), yt(() => window.removeEventListener("resize", t));
+  }), tt(() => {
+    W && (pt?.disconnect(), pt = new ResizeObserver((t) => {
+      const e = t[0];
+      e && U({
+        width: Math.round(e.contentRect.width),
+        height: Math.round(e.contentRect.height)
+      });
+    }), pt.observe(W), yt(() => {
+      pt?.disconnect(), pt = null;
+    }));
+  }), tt(() => {
+    o.open || (r(null), B(!1), it(), jt());
+  }), tt(() => {
+    const t = j();
+    !t && lt().length > 0 && o.controller.setActiveTopicID(lt()[0].topic_id), t && Nt() && t.topic_id !== Nt() && ht(null);
+  }), tt(() => {
+    et() && mt().length === 0 && B(!1);
+  }), tt(() => {
+    if (!o.open) return;
+    const t = (e) => {
+      if (e.key === "Escape") {
+        if (V()) {
+          r(null);
+          return;
+        }
+        if ($()) {
+          it();
+          return;
+        }
+        if (et()) {
+          B(!1);
+          return;
+        }
+        o.onClose();
+      }
+    };
+    document.addEventListener("keydown", t), yt(() => document.removeEventListener("keydown", t));
+  }), tt(() => {
+    if (!o.open) return;
+    const t = (v) => {
+      if (!m || v.pointerId !== m.pointerId) return;
+      const f = v.clientX - m.startClientX, y = v.clientY - m.startClientY;
+      !m.dragged && Math.hypot(f, y) >= Ln && (m.dragged = !0, m.longPressTimer != null && (window.clearTimeout(m.longPressTimer), m.longPressTimer = null)), m.dragged && Tt({
+        x: m.startViewport.x + f,
+        y: m.startViewport.y + y,
+        scale: m.startViewport.scale
+      });
+    }, e = (v) => {
+      const f = ae(v.pointerId);
+      if (!f || f.contextOpened || f.dragged || !f.noteID) return;
+      const y = ft().find((z) => z.note_id === f.noteID);
+      y && Ne(y);
+    }, l = (v) => {
+      ae(v.pointerId);
+    };
+    document.addEventListener("pointermove", t), document.addEventListener("pointerup", e), document.addEventListener("pointercancel", l), yt(() => {
+      document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", e), document.removeEventListener("pointercancel", l);
+    });
+  }), tt(() => {
+    if (!o.open) return;
+    const t = (e) => {
+      const l = e.target instanceof HTMLElement ? e.target : null;
+      V() && Rt && l && !Rt.contains(l) && r(null), et() && xt && l && !xt.contains(l) && (l.closest('[data-notes-trash-toggle="true"]') || B(!1));
+    };
+    document.addEventListener("pointerdown", t, !0), yt(() => document.removeEventListener("pointerdown", t, !0));
+  });
+  const Ye = x(() => {
+    const t = V();
+    if (!t) return [];
+    const e = [], l = !!j();
+    return e.push({
+      id: "new",
+      kind: "action",
+      label: "New note",
+      icon: We,
+      disabled: !l,
+      onSelect: () => {
+        r(null), oe(t.worldX, t.worldY, "", {
+          openEditor: !0
+        });
+      }
+    }), e.push({
+      id: "paste",
+      kind: "action",
+      label: "Paste here",
+      icon: pe,
+      disabled: !l,
+      onSelect: () => {
+        r(null), De(t.worldX, t.worldY);
+      }
+    }), t.noteID && (e.push({
+      id: "sep-delete",
+      kind: "separator"
+    }), e.push({
+      id: "delete",
+      kind: "action",
+      label: "Delete note",
+      icon: Ft,
+      destructive: !0,
+      onSelect: () => {
+        r(null);
+        const v = ft().find((f) => f.note_id === t.noteID);
+        v && ie(v);
+      }
+    })), e;
+  });
+  function Oe(t) {
+    if (!W || t.target instanceof HTMLElement && Kt(t.target)) return;
+    t.preventDefault();
+    const e = W.getBoundingClientRect(), l = t.clientX - e.left, v = t.clientY - e.top, f = Math.exp(-t.deltaY * 15e-4);
+    Tt((y) => ye(y, y.scale * f, l, v));
+  }
+  function Be(t) {
+    if (t.touches.length < 2) {
+      ot = null;
+      return;
+    }
+    t.preventDefault();
+    const e = $e(t.touches);
+    ot = {
+      startDistance: we(t.touches),
+      startScale: Y().scale,
+      midpointX: e.x,
+      midpointY: e.y
+    };
+  }
+  function ze(t) {
+    if (!ot || t.touches.length < 2 || !W) return;
+    t.preventDefault();
+    const e = we(t.touches);
+    if (!e || !ot.startDistance) return;
+    const l = $e(t.touches), v = W.getBoundingClientRect(), f = l.x - v.left, y = l.y - v.top, z = ot.startScale * (e / ot.startDistance);
+    Tt((H) => ye(H, z, f, y));
+  }
+  function se(t) {
+    t.touches.length < 2 && (ot = null);
+  }
+  const At = x(() => {
+    const t = Bt(), e = W?.getBoundingClientRect();
+    if (!t || !e) return {
+      left: 32,
+      top: 32
+    };
+    const l = Dt(t.size_bucket), v = nn(Y(), {
+      x: t.x,
+      y: t.y
+    }), f = l.width * Y().scale, y = e.left + v.x + f + 18, z = e.top + v.y, H = Math.min(320, Math.max(280, e.width * 0.32));
+    let b = y;
+    b + H > window.innerWidth - 16 && (b = e.left + v.x - H - 18), b = Math.max(16, Math.min(b, window.innerWidth - H - 16));
+    const St = Math.max(16, Math.min(z, window.innerHeight - 320));
+    return {
+      left: b,
+      top: St,
+      width: H
+    };
+  }), Ae = x(() => ge(Y(), w().width || 1, w().height || 1));
+  function Ve(t, e) {
+    const l = ve(w);
+    Tt((v) => rn(v, t, e, l.width || 1, l.height || 1));
+  }
+  return c(M, {
+    get when() {
+      return o.open;
+    },
+    get children() {
+      var t = wn(), e = t.firstChild, l = e.nextSibling, v = l.firstChild, f = v.firstChild, y = f.firstChild, z = f.nextSibling, H = v.nextSibling, b = l.nextSibling, St = b.firstChild, kt = St.firstChild, le = kt.nextSibling, Et = St.nextSibling;
+      t.$$contextmenu = (n) => n.preventDefault(), f.$$click = () => {
+        k() && G((n) => !n);
+      }, a(f, c(Ze, {
+        class: "h-4 w-4"
+      }), y), z.$$click = () => {
+        nt(!0), ht(null), queueMicrotask(() => Lt?.focus());
+      }, a(z, c(He, {
+        class: "h-3.5 w-3.5"
+      })), a(l, c(M, {
+        get when() {
+          return ut();
+        },
+        get children() {
+          var n = sn(), i = n.firstChild, u = i.nextSibling, _ = u.firstChild, D = _.nextSibling;
+          i.$$keydown = (N) => {
+            N.key === "Enter" && (N.preventDefault(), ee()), N.key === "Escape" && (nt(!1), bt(""));
+          }, i.$$input = (N) => bt(N.currentTarget.value);
+          var T = Lt;
+          return typeof T == "function" ? Mt(T, i) : Lt = i, _.$$click = () => {
+            ee();
+          }, D.$$click = () => {
+            nt(!1), bt("");
+          }, X(() => i.value = _t()), n;
+        }
+      }), H), a(H, c(ct, {
+        get each() {
+          return lt();
+        },
+        children: (n) => {
+          const i = Te().get(n.topic_id) ?? 0, u = Se().get(n.topic_id) ?? 0, _ = () => j()?.topic_id === n.topic_id, D = () => Nt() === n.topic_id;
+          return (() => {
+            var T = xn(), N = T.firstChild, rt = N.nextSibling, K = rt.firstChild, O = K.firstChild, at = rt.nextSibling, s = at.firstChild, J = s.nextSibling;
+            return T.$$keydown = (d) => {
+              (d.key === "Enter" || d.key === " ") && (d.preventDefault(), o.controller.setActiveTopicID(n.topic_id), k() && G(!1));
+            }, T.$$click = () => {
+              o.controller.setActiveTopicID(n.topic_id), k() && G(!1);
+            }, a(N, c(Ht, {
+              get iconKey() {
+                return n.icon_key;
+              },
+              class: "h-4.5 w-4.5"
+            })), a(rt, c(M, {
+              get when() {
+                return D();
+              },
+              get fallback() {
+                return (() => {
+                  var d = Cn();
+                  return a(d, () => n.name), d;
+                })();
+              },
+              get children() {
+                var d = $n();
+                d.$$keydown = (E) => {
+                  E.key === "Enter" && (E.preventDefault(), ne(n)), E.key === "Escape" && ht(null);
+                }, d.addEventListener("blur", () => {
+                  ne(n);
+                }), d.$$input = (E) => qt(E.currentTarget.value), d.$$click = (E) => E.stopPropagation();
+                var A = Yt;
+                return typeof A == "function" ? Mt(A, d) : Yt = d, X(() => d.value = Gt()), d;
+              }
+            }), K), a(O, i), a(K, c(M, {
+              when: u > 0,
+              get children() {
+                var d = bn();
+                return a(d, u), d;
+              }
+            }), null), s.$$click = (d) => {
+              d.stopPropagation(), ht(n.topic_id), qt(n.name), queueMicrotask(() => Yt?.focus());
+            }, a(s, c(fe, {
+              class: "h-3.5 w-3.5"
+            })), J.$$click = (d) => {
+              d.stopPropagation(), Pe(n.topic_id);
+            }, a(J, c(Ft, {
+              class: "h-3.5 w-3.5"
+            })), X((d) => {
+              var A = Pt("notes-overlay__topic-row", _() && "is-active"), E = _() ? "true" : void 0, st = n.icon_accent, S = `Rename ${n.name}`, Q = `Delete ${n.name}`;
+              return A !== d.e && It(T, d.e = A), E !== d.t && g(T, "aria-current", d.t = E), st !== d.a && g(N, "data-accent", d.a = st), S !== d.o && g(s, "aria-label", d.o = S), Q !== d.i && g(J, "aria-label", d.i = Q), d;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0
+            }), T;
+          })();
+        }
+      }), null), a(H, c(M, {
+        get when() {
+          return he(() => !lt().length)() && !ut();
+        },
+        get children() {
+          return ln();
+        }
+      }), null), b.addEventListener("touchcancel", se), b.$$touchend = se, b.$$touchmove = ze, b.$$touchstart = Be, b.$$pointerdown = (n) => re(n, null), b.$$contextmenu = (n) => {
+        n.preventDefault(), !Kt(n.target) && zt(n.clientX, n.clientY, null);
+      }, b.addEventListener("wheel", Oe);
+      var ce = W;
+      return typeof ce == "function" ? Mt(ce, b) : W = b, kt.$$click = () => {
+        k() && G((n) => !n);
+      }, a(kt, c(M, {
+        get when() {
+          return j();
+        },
+        get fallback() {
+          return Tn();
+        },
+        children: (n) => [(() => {
+          var i = Sn();
+          return a(i, c(Ht, {
+            get iconKey() {
+              return n().icon_key;
+            },
+            class: "h-4.5 w-4.5"
+          })), X(() => g(i, "data-accent", n().icon_accent)), i;
+        })(), (() => {
+          var i = kn(), u = i.firstChild, _ = u.nextSibling, D = _.firstChild;
+          return a(u, () => n().name), a(_, () => Math.round(Y().scale * 100), D), X(() => g(_, "data-state", xe())), i;
+        })()]
+      })), le.$$click = () => o.onClose(), a(le, c(Wt, {
+        class: "h-4 w-4"
+      })), a(b, c(M, {
+        get when() {
+          return Ut();
+        },
+        get children() {
+          return cn();
+        }
+      }), Et), a(Et, c(ct, {
+        get each() {
+          return Ct();
+        },
+        children: (n) => {
+          const i = Dt(n.size_bucket), u = () => I() === n.note_id;
+          return (() => {
+            var _ = Mn(), D = _.firstChild, T = D.firstChild, N = T.firstChild, rt = N.nextSibling, K = rt.firstChild, O = K.nextSibling, at = T.nextSibling;
+            return _.$$contextmenu = (s) => {
+              s.preventDefault(), s.stopPropagation(), zt(s.clientX, s.clientY, n.note_id);
+            }, _.$$pointerdown = (s) => {
+              s.stopPropagation(), re(s, n.note_id);
+            }, a(N, () => n.character_count || 0), K.$$click = (s) => {
+              s.stopPropagation(), Qt(n);
+            }, K.$$pointerdown = (s) => s.stopPropagation(), a(K, c(fe, {
+              class: "h-3.5 w-3.5"
+            })), O.$$click = (s) => {
+              s.stopPropagation(), ie(n);
+            }, O.$$pointerdown = (s) => s.stopPropagation(), a(O, c(Ft, {
+              class: "h-3.5 w-3.5"
+            })), a(at, () => be(n)), a(D, c(M, {
+              get when() {
+                return u();
+              },
+              get children() {
+                return c(Vt.div, {
+                  class: "notes-note__copied",
+                  initial: {
+                    opacity: 0,
+                    scale: 0.88
+                  },
+                  animate: {
+                    opacity: 1,
+                    scale: 1
+                  },
+                  transition: {
+                    duration: 0.18,
+                    easing: "ease-out"
+                  },
+                  get children() {
+                    return [c(Ke, {
+                      class: "h-5 w-5"
+                    }), En()];
+                  }
+                });
+              }
+            }), null), X((s) => {
+              var J = Pt("notes-note", u() && "is-copied"), d = n.color_token, A = String(n.size_bucket), E = `${i.width}px`, st = `${i.height}px`, S = `translate3d(${n.x}px, ${n.y}px, 0)`, Q = String(n.z_index), gt = String(i.preview_lines);
+              return J !== s.e && It(_, s.e = J), d !== s.t && g(_, "data-color", s.t = d), A !== s.a && g(_, "data-size", s.a = A), E !== s.o && q(_, "width", s.o = E), st !== s.i && q(_, "height", s.i = st), S !== s.n && q(_, "transform", s.n = S), Q !== s.s && q(_, "z-index", s.s = Q), gt !== s.h && q(_, "--notes-preview-lines", s.h = gt), s;
+            }, {
+              e: void 0,
+              t: void 0,
+              a: void 0,
+              o: void 0,
+              i: void 0,
+              n: void 0,
+              s: void 0,
+              h: void 0
+            }), _;
+          })();
+        }
+      }), null), a(Et, c(M, {
+        get when() {
+          return he(() => !!(j() && !Ct().length))() && !Ut();
+        },
+        get children() {
+          return dn();
+        }
+      }), null), a(b, c(zn, {
+        bounds: Ee,
+        items: Ct,
+        viewportRect: Ae,
+        onFocusPoint: Ve
+      }), null), a(b, c(M, {
+        get when() {
+          return !et();
+        },
+        get children() {
+          var n = _n();
+          return n.$$click = () => {
+            B(!0), r(null);
+          }, a(n, c(me, {
+            class: "h-8 w-8"
+          }), null), a(n, c(M, {
+            get when() {
+              return mt().length > 0;
+            },
+            get children() {
+              var i = un();
+              return a(i, () => mt().length), i;
+            }
+          }), null), n;
+        }
+      }), null), a(b, c(M, {
+        get when() {
+          return et();
+        },
+        get children() {
+          return c(Vt.div, {
+            ref(n) {
+              var i = xt;
+              typeof i == "function" ? i(n) : xt = n;
+            },
+            class: "notes-trash",
+            "data-notes-interactive": "true",
+            initial: {
+              opacity: 0,
+              y: 12,
+              scale: 0.98
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            transition: {
+              duration: 0.18,
+              easing: "ease-out"
+            },
+            get children() {
+              return [(() => {
+                var n = hn(), i = n.firstChild, u = i.nextSibling;
+                return a(i, c(me, {
+                  class: "h-5 w-5"
+                })), u.$$click = () => B(!1), a(u, c(Wt, {
+                  class: "h-4 w-4"
+                })), n;
+              })(), (() => {
+                var n = pn();
+                return a(n, c(ct, {
+                  get each() {
+                    return Zt();
+                  },
+                  children: (i) => (() => {
+                    var u = In(), _ = u.firstChild, D = _.firstChild, T = D.firstChild, N = T.nextSibling, rt = D.nextSibling, K = _.nextSibling;
+                    return a(T, c(Ht, {
+                      get iconKey() {
+                        return i.topic_icon_key;
+                      },
+                      class: "h-4.5 w-4.5"
+                    })), a(N, () => i.topic_name), rt.$$click = () => {
+                      Xe(i);
+                    }, a(K, c(ct, {
+                      get each() {
+                        return i.items;
+                      },
+                      children: (O) => {
+                        const at = Dt(O.size_bucket);
+                        return (() => {
+                          var s = Pn(), J = s.firstChild, d = J.firstChild, A = d.firstChild, E = A.nextSibling, st = d.nextSibling;
+                          return a(A, () => On(O.deleted_at_unix_ms)), E.$$click = () => {
+                            Re(O);
+                          }, a(E, c(pe, {
+                            class: "h-3.5 w-3.5"
+                          })), a(st, () => be(O)), X((S) => {
+                            var Q = O.color_token, gt = String(O.size_bucket), de = `${at.width}px`, ue = `${at.height}px`, _e = String(at.preview_lines);
+                            return Q !== S.e && g(s, "data-color", S.e = Q), gt !== S.t && g(s, "data-size", S.t = gt), de !== S.a && q(s, "width", S.a = de), ue !== S.o && q(s, "height", S.o = ue), _e !== S.i && q(s, "--notes-preview-lines", S.i = _e), S;
+                          }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0,
+                            o: void 0,
+                            i: void 0
+                          }), s;
+                        })();
+                      }
+                    })), X(() => g(T, "data-accent", i.topic_icon_accent)), u;
+                  })()
+                }), null), a(n, c(M, {
+                  get when() {
+                    return !Zt().length;
+                  },
+                  get children() {
+                    return vn();
+                  }
+                }), null), n;
+              })()];
+            }
+          });
+        }
+      }), null), a(t, c(M, {
+        get when() {
+          return V();
+        },
+        get children() {
+          return c(Ge, {
+            get x() {
+              return V().x;
+            },
+            get y() {
+              return V().y;
+            },
+            get items() {
+              return Ye();
+            },
+            menuRef: (n) => {
+              Rt = n;
+            }
+          });
+        }
+      }), null), a(t, c(M, {
+        get when() {
+          return Bt();
+        },
+        get children() {
+          return c(Vt.div, {
+            class: "notes-editor",
+            "data-notes-interactive": "true",
+            initial: {
+              opacity: 0,
+              y: 14,
+              scale: 0.98
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            transition: {
+              duration: 0.18,
+              easing: "ease-out"
+            },
+            get style() {
+              return {
+                left: `${At().left}px`,
+                top: `${At().top}px`,
+                width: `${At().width}px`
+              };
+            },
+            get children() {
+              return [(() => {
+                var n = fn(), i = n.firstChild, u = i.nextSibling;
+                return u.$$click = it, a(u, c(Wt, {
+                  class: "h-4 w-4"
+                })), n;
+              })(), (() => {
+                var n = mn();
+                return a(n, c(ct, {
+                  each: en,
+                  children: (i) => (() => {
+                    var u = Dn();
+                    return u.$$click = () => dt(i), g(u, "data-color", i), X((_) => {
+                      var D = Pt("notes-editor__color", Z() === i && "is-active"), T = `Use ${je[i]}`;
+                      return D !== _.e && It(u, _.e = D), T !== _.t && g(u, "aria-label", _.t = T), _;
+                    }, {
+                      e: void 0,
+                      t: void 0
+                    }), u;
+                  })()
+                })), n;
+              })(), (() => {
+                var n = gn();
+                n.$$keydown = (u) => {
+                  (u.metaKey || u.ctrlKey) && u.key === "Enter" && (u.preventDefault(), te());
+                }, n.$$input = (u) => C(u.currentTarget.value);
+                var i = Xt;
+                return typeof i == "function" ? Mt(i, n) : Xt = n, g(n, "spellcheck", !1), X(() => n.value = P()), n;
+              })(), (() => {
+                var n = yn(), i = n.firstChild, u = i.nextSibling;
+                return i.$$click = () => {
+                  te();
+                }, u.$$click = it, n;
+              })()];
+            }
+          });
+        }
+      }), null), X((n) => {
+        var i = Pt("notes-overlay__rail", $t() ? "is-open" : "is-closed"), u = k() ? "Open topics" : "Active topic", _ = `translate3d(${Y().x}px, ${Y().y}px, 0) scale(${Y().scale})`;
+        return i !== n.e && It(l, n.e = i), u !== n.t && g(kt, "aria-label", n.t = u), _ !== n.a && q(Et, "transform", n.a = _), n;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0
+      }), t;
+    }
+  });
+}
+function zn(o) {
+  let U = null;
+  const k = x(() => {
+    const r = o.bounds();
+    return Math.min(170 / Math.max(1, r.maxX - r.minX), 118 / Math.max(1, r.maxY - r.minY));
+  });
+  function wt(r) {
+    return (r - o.bounds().minX) * k();
+  }
+  function $t(r) {
+    return (r - o.bounds().minY) * k();
+  }
+  function G(r, I, L) {
+    const $ = Math.max(0, Math.min(170, r - L.left)), F = Math.max(0, Math.min(118, I - L.top)), P = o.bounds().minX + $ / k(), C = o.bounds().minY + F / k();
+    o.onFocusPoint(P, C);
+  }
+  function et(r) {
+    if (r.button !== 0) return;
+    r.preventDefault();
+    const I = r.currentTarget;
+    U = r.pointerId, I.setPointerCapture(r.pointerId), G(r.clientX, r.clientY, I.getBoundingClientRect());
+  }
+  function B(r) {
+    if (U !== r.pointerId) return;
+    r.preventDefault();
+    const I = r.currentTarget;
+    G(r.clientX, r.clientY, I.getBoundingClientRect());
+  }
+  function V(r) {
+    if (U !== r.pointerId) return;
+    const I = r.currentTarget;
+    I.hasPointerCapture(r.pointerId) && I.releasePointerCapture(r.pointerId), U = null;
+  }
+  return (() => {
+    var r = Nn(), I = r.firstChild, L = I.firstChild;
+    return r.addEventListener("lostpointercapture", V), r.addEventListener("pointercancel", V), r.$$pointerup = V, r.$$pointermove = B, r.$$pointerdown = et, a(I, c(ct, {
+      get each() {
+        return o.items();
+      },
+      children: ($) => {
+        const F = Dt($.size_bucket);
+        return (() => {
+          var P = Rn();
+          return X((C) => {
+            var Z = $.color_token, dt = wt($.x), ut = $t($.y), nt = Math.max(7, F.width * k()), _t = Math.max(5, F.height * k());
+            return Z !== C.e && g(P, "data-color", C.e = Z), dt !== C.t && g(P, "x", C.t = dt), ut !== C.a && g(P, "y", C.a = ut), nt !== C.o && g(P, "width", C.o = nt), _t !== C.i && g(P, "height", C.i = _t), C;
+          }, {
+            e: void 0,
+            t: void 0,
+            a: void 0,
+            o: void 0,
+            i: void 0
+          }), P;
+        })();
+      }
+    }), L), X(($) => {
+      var F = wt(o.viewportRect().minX), P = $t(o.viewportRect().minY), C = Math.max(22, (o.viewportRect().maxX - o.viewportRect().minX) * k()), Z = Math.max(18, (o.viewportRect().maxY - o.viewportRect().minY) * k());
+      return F !== $.e && g(L, "x", $.e = F), P !== $.t && g(L, "y", $.t = P), C !== $.a && g(L, "width", $.a = C), Z !== $.o && g(L, "height", $.o = Z), $;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0
+    }), r;
+  })();
+}
+Fe(["contextmenu", "click", "input", "keydown", "pointerdown", "touchstart", "touchmove", "touchend", "pointermove", "pointerup"]);
+export {
+  Zn as NotesOverlay
+};