@floegence/floe-webapp-core 0.35.41 → 0.35.43

package/dist/components/notes/useNotesOverlayModel.js

@@ -0,0 +1,559 @@
+import { createSignal as a, createMemo as c, createEffect as v, onCleanup as X } from "solid-js";
+import { Paste as xt, Plus as Dt, Trash as Mt } from "../icons/index.js";
+import { NOTES_CONTEXT_MENU_WIDTH_PX as Pt, estimateNotesContextMenuHeight as Ot } from "./NotesContextMenu.js";
+import { resolveFrameSize as F, resolveOverviewBounds as Xt, createOverviewItem as Yt, clamp as I, createContextMenuPosition as St, NOTES_MOBILE_BREAKPOINT_PX as Rt, getNormalizedOverviewPoint as Ee, findTrashTopicNoteCount as Lt, hasLiveNotesForTopic as zt, NOTES_CANVAS_ZOOM_STEP as ke, resolveCenteredViewport as Et } from "./notesOverlayHelpers.js";
+import { normalizeNotesSnapshot as kt, groupTrashItems as At, visibleWorldRect as Bt, computeBoardBounds as Ft } from "./types.js";
+import { useNotification as Vt } from "../../context/NotificationContext.js";
+function u(n) {
+  return n instanceof Error ? n.message : String(n);
+}
+function qt(n) {
+  const s = Vt(), [oe, Ae] = a(), [_, Be] = a({ width: 0, height: 0 }), [T, p] = a(null), [ne, re] = a(""), [V, ie] = a(null), [ce, W] = a(""), [H, Y] = a(null), [se, ae] = a(""), [le, de] = a("amber"), [ue, pe] = a(!1), [fe, he] = a(!1), [$, we] = a(null), [K, Z] = a(""), [Fe, S] = a(null), [Ve, We] = a(Date.now()), [He, $e] = a(!1), [me, y] = a(null), [Ke, ve] = a(null), [Te, x] = a(null);
+  let D, j, q = null;
+  const h = c(() => kt(n.controller.snapshot())), g = c(
+    () => h().topics.filter((e) => e.deleted_at_unix_ms <= 0)
+  ), Ze = c(() => g().length), N = c(() => {
+    const e = n.controller.activeTopicID();
+    return g().some((t) => t.topic_id === e) ? e : g()[0]?.topic_id ?? "";
+  }), M = c(
+    () => g().find((e) => e.topic_id === N())
+  ), R = c(
+    () => h().items.filter((e) => e.topic_id === N())
+  ), je = c(() => At(h().trash_items)), ge = c(() => h().trash_items.length), qe = c(() => h().items.length), Ge = c(
+    () => R().reduce((e, t) => Math.max(e, t.z_index), 1)
+  ), w = c(
+    () => Te() ?? n.controller.viewport()
+  ), Ue = c(() => M()?.name ?? "No topic"), Je = c(
+    () => `${Math.round(w().scale * 100)}%`
+  ), Qe = c(() => {
+    const e = F(_());
+    return Bt(w(), e.width, e.height);
+  }), L = c(
+    () => Xt(Ft(R()), Qe())
+  ), et = c(
+    () => R().map((e) => Yt(e, L()))
+  ), ye = c(() => {
+    const e = L(), t = F(_()), o = w(), r = -o.x / o.scale, i = -o.y / o.scale, l = t.width / o.scale, f = t.height / o.scale, d = I(r, e.minX, e.maxX), C = I(i, e.minY, e.maxY), b = I(r + l, e.minX, e.maxX), te = I(i + f, e.minY, e.maxY), O = Math.max((b - d) / e.width * 100, 6), m = Math.max((te - C) / e.height * 100, 8), Le = (d - e.minX) / e.width * 100, ze = (C - e.minY) / e.height * 100;
+    return {
+      left: Le,
+      top: ze,
+      width: O,
+      height: m,
+      centerX: Le + O / 2,
+      centerY: ze + m / 2
+    };
+  }), tt = c(() => {
+    const e = ye();
+    return {
+      left: `${e.left}%`,
+      top: `${e.top}%`,
+      width: `${e.width}%`,
+      height: `${e.height}%`
+    };
+  }), Ne = c(() => {
+    const e = H();
+    return e ? h().items.find((t) => t.note_id === e) : void 0;
+  }), G = () => {
+    D !== void 0 && (window.clearTimeout(D), D = void 0);
+  }, z = () => {
+    we(null), Z("");
+  }, E = () => {
+    Y(null);
+  }, P = () => {
+    he(!1);
+  }, Ce = () => {
+    he(!0);
+  }, k = () => {
+    pe(!1);
+  }, U = () => {
+    pe(!0);
+  }, A = () => {
+    ie(null), W("");
+  }, ot = () => {
+    p(null), k(), P(), E(), z();
+  }, nt = () => {
+    if (T()) {
+      p(null);
+      return;
+    }
+    if (H()) {
+      E();
+      return;
+    }
+    if ($()) {
+      z();
+      return;
+    }
+    if (fe()) {
+      P();
+      return;
+    }
+    if (ue()) {
+      k();
+      return;
+    }
+    n.onClose();
+  }, B = (e) => {
+    n.controller.setActiveTopicID(e);
+  }, be = (e) => zt(h().items, e), rt = (e, t, o = M()?.topic_id) => {
+    if (!o) return null;
+    const r = g().find((d) => d.topic_id === o);
+    if (!r) return null;
+    const i = oe();
+    if (!i) return null;
+    const l = i.getBoundingClientRect();
+    if (l.width <= 0 || l.height <= 0 || e < l.left || e > l.right || t < l.top || t > l.bottom)
+      return null;
+    const f = w();
+    return {
+      topicID: r.topic_id,
+      worldX: (e - l.left - f.x) / f.scale,
+      worldY: (t - l.top - f.y) / f.scale
+    };
+  }, Ie = () => {
+    const e = M();
+    if (!e) return null;
+    const t = F(_()), o = w();
+    return {
+      topicID: e.topic_id,
+      worldX: (t.width / 2 - o.x) / o.scale,
+      worldY: (t.height / 2 - o.y) / o.scale
+    };
+  }, _e = (e, t, o) => {
+    const r = rt(e, t, o?.topicID);
+    return r ? (p({
+      clientX: e,
+      clientY: t,
+      worldX: r.worldX,
+      worldY: r.worldY,
+      topicID: r.topicID,
+      noteID: o?.noteID ?? null
+    }), !0) : !1;
+  }, xe = (e) => {
+    x(e), n.controller.setViewport(e), x(null);
+  }, De = (e, t, o) => Et({
+    viewport: w(),
+    frame: _(),
+    bounds: L(),
+    worldX: e,
+    worldY: t,
+    scale: o
+  }), Me = (e) => {
+    const t = w(), o = F(_()), r = (o.width / 2 - t.x) / t.scale, i = (o.height / 2 - t.y) / t.scale, l = e === "in" ? t.scale * ke : t.scale / ke;
+    xe(De(r, i, l));
+  }, Pe = (e, t, o) => {
+    const r = o.surfaceRect;
+    if (r.width <= 0 || r.height <= 0) return;
+    const i = Ee(e, t, r), l = I(i.x - o.centerOffsetX, 0, 1), f = I(i.y - o.centerOffsetY, 0, 1), d = o.bounds;
+    x(
+      De(
+        d.minX + l * d.width,
+        d.minY + f * d.height
+      )
+    );
+  }, J = (e) => {
+    if (j?.abort(), j = void 0, e) {
+      const t = Te();
+      t && n.controller.setViewport(t);
+    }
+    x(null), ve(null);
+  }, it = (e) => {
+    if (e.button !== 0 && e.pointerType !== "touch" && e.pointerType !== "pen")
+      return;
+    const t = e.currentTarget, o = t.getBoundingClientRect();
+    if (o.width <= 0 || o.height <= 0) return;
+    const r = Ee(e.clientX, e.clientY, o), i = ye(), l = r.x * 100, f = r.y * 100, d = l >= i.left && l <= i.left + i.width && f >= i.top && f <= i.top + i.height, C = {
+      pointerId: e.pointerId,
+      bounds: L(),
+      surfaceRect: o,
+      centerOffsetX: d ? r.x - i.centerX / 100 : 0,
+      centerOffsetY: d ? r.y - i.centerY / 100 : 0
+    };
+    J(!1), e.preventDefault(), e.stopPropagation(), ve(C), Pe(e.clientX, e.clientY, C), t.setPointerCapture?.(e.pointerId);
+    const b = new AbortController();
+    j = b;
+    const te = (m) => {
+      m.pointerId === e.pointerId && Pe(m.clientX, m.clientY, C);
+    }, O = (m) => {
+      m.pointerId === e.pointerId && (t.hasPointerCapture?.(e.pointerId) && t.releasePointerCapture(e.pointerId), J(!0));
+    };
+    t.addEventListener("pointermove", te, { signal: b.signal }), t.addEventListener("pointerup", O, {
+      once: !0,
+      signal: b.signal
+    }), t.addEventListener("pointercancel", O, {
+      once: !0,
+      signal: b.signal
+    });
+  }, Oe = async (e) => {
+    try {
+      const t = await n.controller.createNote({
+        topic_id: e.topicID,
+        x: e.worldX,
+        y: e.worldY,
+        body: ""
+      });
+      Y(t.note_id);
+    } catch (t) {
+      s.error("Create failed", u(t));
+    }
+  }, Xe = async (e, t) => {
+    try {
+      await n.controller.createNote({
+        topic_id: e.topicID,
+        x: e.worldX,
+        y: e.worldY,
+        body: t
+      }), s.success("Pasted", "Created a new note from clipboard text.");
+    } catch (o) {
+      s.error("Paste failed", u(o));
+    }
+  }, Ye = (e) => {
+    Z(""), we(e);
+  }, Se = async (e) => {
+    try {
+      const t = await navigator.clipboard.readText();
+      if (!t.trim()) {
+        s.info("Clipboard empty", "Paste text into the dialog to create a note."), Ye(e);
+        return;
+      }
+      await Xe(e, t);
+    } catch {
+      s.info("Clipboard blocked", "Manual paste is available as a fallback."), Ye(e);
+    }
+  }, ct = (e) => {
+    G(), S(e), D = window.setTimeout(() => {
+      D = void 0, S((t) => t === e ? null : t);
+    }, 1100);
+  }, st = (e) => {
+    y(e);
+  }, Q = (e) => {
+    y(e), Promise.resolve(n.controller.bringNoteToFront(e)).catch((t) => {
+      s.error("Bring forward failed", u(t)), y((o) => o === e ? null : o);
+    });
+  }, at = (e) => {
+    p(null), Y(e);
+  }, lt = async (e) => {
+    if (!e.body.trim()) {
+      p(null), Y(e.note_id);
+      return;
+    }
+    try {
+      Q(e.note_id), await navigator.clipboard.writeText(e.body), ct(e.note_id);
+    } catch {
+      s.error("Copy failed", "Clipboard write was not available.");
+    }
+  }, Re = async (e) => {
+    try {
+      await n.controller.deleteNote(e), G(), S((t) => t === e ? null : t), U();
+    } catch (t) {
+      s.error("Delete failed", u(t));
+    }
+  }, dt = async (e) => {
+    try {
+      await n.controller.restoreNote(e);
+    } catch (t) {
+      s.error("Restore failed", u(t));
+    }
+  }, ut = async (e) => {
+    if (n.controller.deleteTrashedNotePermanently)
+      try {
+        await n.controller.deleteTrashedNotePermanently(e);
+      } catch (t) {
+        s.error("Delete failed", u(t));
+      }
+  }, pt = async (e) => {
+    try {
+      await n.controller.clearTrashTopic(e);
+    } catch (t) {
+      s.error("Trash failed", u(t));
+    }
+  }, ft = async () => {
+    const e = H();
+    if (e)
+      try {
+        await n.controller.updateNote(e, {
+          body: se(),
+          color_token: le()
+        }), s.success("Saved", "Note updated."), E();
+      } catch (t) {
+        s.error("Save failed", u(t));
+      }
+  }, ht = async () => {
+    const e = $();
+    !e || !K().trim() || (await Xe(e, K()), z());
+  }, wt = async () => {
+    const e = ne().trim();
+    if (e)
+      try {
+        const t = await n.controller.createTopic({ name: e });
+        re(""), B(t.topic_id);
+      } catch (t) {
+        s.error("Topic failed", u(t));
+      }
+  }, mt = (e) => {
+    ie(e.topic_id), W(e.name);
+  }, vt = async () => {
+    const e = V();
+    if (!e) return;
+    const t = ce().trim();
+    if (A(), !!t)
+      try {
+        await n.controller.updateTopic(e, { name: t });
+      } catch (o) {
+        s.error("Rename failed", u(o));
+      }
+  }, Tt = async (e) => {
+    const t = be(e.topic_id) + Lt(h().trash_items, e.topic_id);
+    V() === e.topic_id && A();
+    try {
+      if (await n.controller.deleteTopic(e.topic_id) === !1) {
+        s.info(
+          "Keep one topic",
+          "At least one topic needs to remain available."
+        );
+        return;
+      }
+      if (t > 0) {
+        U(), s.success(
+          "Topic deleted",
+          "Live notes moved into trash for this topic."
+        );
+        return;
+      }
+      s.success("Topic deleted", "The empty topic was removed.");
+    } catch (o) {
+      s.error("Delete failed", u(o));
+    }
+  }, gt = async (e, t) => {
+    try {
+      await n.controller.updateNote(e, {
+        x: t.x,
+        y: t.y
+      });
+    } catch (o) {
+      s.error("Move failed", u(o));
+    }
+  }, yt = async () => {
+    const e = Ie();
+    e && (P(), await Oe(e));
+  }, Nt = async () => {
+    const e = Ie();
+    e && (P(), await Se(e));
+  }, ee = c(() => {
+    const e = T();
+    if (!e) return [];
+    const t = [
+      {
+        id: "paste",
+        kind: "action",
+        label: "Paste here",
+        icon: xt,
+        onSelect: () => {
+          const o = T();
+          o && (p(null), Se(o));
+        }
+      },
+      {
+        id: "new",
+        kind: "action",
+        label: "New note",
+        icon: Dt,
+        onSelect: () => {
+          const o = T();
+          o && (p(null), Oe(o));
+        }
+      }
+    ];
+    return e.noteID && (t.push({ id: "separator-delete", kind: "separator" }), t.push({
+      id: "delete",
+      kind: "action",
+      label: "Delete",
+      icon: Mt,
+      destructive: !0,
+      onSelect: () => {
+        const o = T();
+        o?.noteID && (p(null), Re(o.noteID));
+      }
+    })), t;
+  }), Ct = c(() => {
+    const e = T();
+    if (!e) return;
+    const t = ee().filter((r) => r.kind === "action").length, o = ee().filter((r) => r.kind === "separator").length;
+    return St({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      menuWidth: Pt,
+      menuHeight: Ot(t, o)
+    });
+  }), bt = (e) => {
+    const t = M();
+    t && p({
+      clientX: e.clientX,
+      clientY: e.clientY,
+      worldX: e.worldX,
+      worldY: e.worldY,
+      topicID: t.topic_id
+    });
+  }, It = (e, t) => {
+    Q(t.note_id), _e(e.clientX, e.clientY, {
+      topicID: t.topic_id,
+      noteID: t.note_id
+    });
+  }, _t = (e) => {
+    k(), _e(e.clientX, e.clientY);
+  };
+  return v(() => {
+    n.open || (ot(), A(), x(null), y(null), S(null));
+  }), v(() => {
+    const e = N();
+    e && n.controller.activeTopicID() !== e && B(e);
+  }), v(() => {
+    const e = Ne();
+    if (!e) {
+      q = null;
+      return;
+    }
+    q !== e.note_id && (q = e.note_id, ae(e.body), de(e.color_token));
+  }), v(() => {
+    const e = me();
+    if (!e) return;
+    const t = h().items.find((r) => r.note_id === e);
+    if (!t) {
+      y(null);
+      return;
+    }
+    const o = h().items.reduce(
+      (r, i) => Math.max(r, i.z_index),
+      0
+    );
+    t.z_index >= o && y(null);
+  }), v(() => {
+    if (!n.open) return;
+    const e = () => {
+      $e(window.innerWidth < Rt);
+    };
+    e(), window.addEventListener("resize", e), X(() => window.removeEventListener("resize", e));
+  }), v(() => {
+    const e = oe();
+    if (!e) return;
+    const t = () => {
+      Be({
+        width: e.clientWidth,
+        height: e.clientHeight
+      });
+    };
+    if (t(), typeof ResizeObserver > "u") {
+      window.addEventListener("resize", t), X(() => window.removeEventListener("resize", t));
+      return;
+    }
+    const o = new ResizeObserver(t);
+    o.observe(e), X(() => o.disconnect());
+  }), v(() => {
+    if (!n.open) return;
+    const e = window.setInterval(() => We(Date.now()), 60 * 1e3);
+    X(() => window.clearInterval(e));
+  }), v(() => {
+    N() && p(null);
+  }), X(() => {
+    G(), J(!1);
+  }), {
+    header: {
+      topicCount: Ze,
+      totalLiveNotes: qe,
+      trashCount: ge
+    },
+    rail: {
+      topics: g,
+      activeTopicID: N,
+      draftTopicTitle: ne,
+      renamingTopicID: V,
+      renamingTopicTitle: ce,
+      getLiveNoteCount: be,
+      setDraftTopicTitle: re,
+      submitTopic: wt,
+      selectTopic: B,
+      startTopicRename: mt,
+      setRenamingTopicTitle: W,
+      saveTopicRename: vt,
+      cancelTopicRename: A,
+      deleteTopic: Tt
+    },
+    board: {
+      activeTopic: M,
+      activeTopicLabel: Ue,
+      activeItems: R,
+      activeTopicID: N,
+      topics: g,
+      topZIndex: Ge,
+      viewport: w,
+      boardScaleLabel: Je,
+      isMobile: He,
+      overviewOpen: fe,
+      optimisticFrontNoteID: me,
+      copiedNoteID: Fe,
+      setCanvasFrameRef: Ae,
+      commitViewport: xe,
+      openCanvasContextMenu: bt,
+      zoomOut: () => Me("out"),
+      zoomIn: () => Me("in"),
+      openOverview: Ce,
+      selectTopic: B,
+      mobileCreateNote: yt,
+      mobilePaste: Nt,
+      copyNote: lt,
+      openNoteContextMenu: It,
+      openEditor: at,
+      moveToTrash: Re,
+      startOptimisticFront: st,
+      commitFront: Q,
+      commitMove: gt
+    },
+    overview: {
+      items: et,
+      viewportStyle: tt,
+      navigationState: Ke,
+      beginNavigation: it,
+      close: P,
+      open: Ce
+    },
+    trash: {
+      open: ue,
+      groups: je,
+      count: ge,
+      now: Ve,
+      canDeleteNow: !!n.controller.deleteTrashedNotePermanently,
+      close: k,
+      openDock: U,
+      backdropContextMenu: _t,
+      restore: dt,
+      deleteNow: ut,
+      clearTopic: pt
+    },
+    contextMenu: {
+      state: T,
+      items: ee,
+      position: Ct,
+      close: () => p(null)
+    },
+    editor: {
+      note: Ne,
+      draftBody: se,
+      draftColor: le,
+      setDraftBody: ae,
+      setDraftColor: de,
+      close: E,
+      save: ft
+    },
+    manualPaste: {
+      open: () => !!$(),
+      text: K,
+      setText: Z,
+      close: z,
+      confirm: ht
+    },
+    handleCloseRequest: nt
+  };
+}
+export {
+  qt as useNotesOverlayModel
+};

package/dist/floe.css

@@ -406,7 +406,9 @@
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='shell-sidebar'],
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='sidebar-pane'],
   [data-floe-hot-interaction~='resize'] [data-floe-geometry-surface='floating-window'],
-  [data-floe-hot-interaction~='drag'] [data-floe-geometry-surface='floating-window'] {
+  [data-floe-hot-interaction~='drag'] [data-floe-geometry-surface='floating-window'],
+  [data-floe-hot-interaction~='drag'] [data-floe-geometry-surface='notes-note'],
+  [data-floe-hot-interaction~='drag'] [data-floe-geometry-surface='notes-note'] .notes-note__surface {
     animation: none !important;
     transition: none !important;
   }