@floegence/floe-webapp-core 0.35.42 → 0.35.44

package/dist/components/notes/NotesBoard.d.ts

@@ -0,0 +1,36 @@
+import { type InfiniteCanvasContextMenuEvent } from '../../ui';
+import type { NotesItem, NotesTopic, NotesViewport } from './types';
+export interface NotesBoardProps {
+    activeTopic: NotesTopic | undefined;
+    activeTopicLabel: string;
+    activeItems: readonly NotesItem[];
+    activeTopicID: string;
+    topics: readonly NotesTopic[];
+    topZIndex: number;
+    viewport: NotesViewport;
+    boardScaleLabel: string;
+    isMobile: boolean;
+    overviewOpen: boolean;
+    optimisticFrontNoteID: string | null;
+    copiedNoteID: string | null;
+    setCanvasFrameRef: (el: HTMLDivElement | undefined) => void;
+    onViewportCommit: (viewport: NotesViewport) => void;
+    onCanvasContextMenu: (event: InfiniteCanvasContextMenuEvent) => void;
+    onZoomOut: () => void;
+    onZoomIn: () => void;
+    onOpenOverview: () => void;
+    onSelectTopic: (topicID: string) => void;
+    onMobileCreateNote: () => void;
+    onMobilePaste: () => void;
+    onCopyNote: (item: NotesItem) => void;
+    onOpenNoteContextMenu: (event: MouseEvent, item: NotesItem) => void;
+    onOpenEditor: (noteID: string) => void;
+    onMoveToTrash: (noteID: string) => void;
+    onStartOptimisticFront: (noteID: string) => void;
+    onCommitFront: (noteID: string) => void;
+    onCommitMove: (noteID: string, position: {
+        x: number;
+        y: number;
+    }) => Promise<void> | void;
+}
+export declare function NotesBoard(props: NotesBoardProps): import("solid-js").JSX.Element;

package/dist/components/notes/NotesBoard.js

@@ -0,0 +1,141 @@
+import { insert as t, createComponent as o, className as x, effect as M, use as O, memo as S, template as r, delegateEvents as p } from "solid-js/web";
+import { Show as u, For as y } from "solid-js";
+import { Minus as I, Plus as w, Layers as k, Paste as N } from "../icons/index.js";
+import { NotesAnimalIcon as F } from "./notesAppearance.js";
+import { NotesBoardNote as T } from "./NotesBoardNote.js";
+import { topicAccentClass as Z } from "./notesOverlayHelpers.js";
+import { InfiniteCanvas as L } from "../ui/InfiniteCanvas.js";
+var P = /* @__PURE__ */ r('<button type=button class=notes-overlay__hud-button aria-label="Open overview map">'), A = /* @__PURE__ */ r("<div class=notes-page__mobile-toolbar><div class=notes-page__mobile-topics>"), D = /* @__PURE__ */ r("<div class=notes-canvas__field>"), E = /* @__PURE__ */ r('<div class=notes-mobile-dock data-floe-canvas-interactive=true><button type=button class=notes-mobile-dock__action aria-label="Create note at canvas center"><span>New</span></button><button type=button class=notes-mobile-dock__action aria-label="Paste note at canvas center"><span>Paste</span></button><button type=button class="notes-mobile-dock__action is-emphasis"aria-label="Open overview map"><span>Map'), B = /* @__PURE__ */ r('<section class="notes-page notes-overlay__board"><div class=notes-overlay__board-head data-floe-canvas-interactive=true><div class=notes-overlay__board-topic></div><div class=notes-overlay__board-actions><button type=button class=notes-overlay__hud-button aria-label="Zoom out"></button><div class=notes-overlay__hud-scale></div><button type=button class=notes-overlay__hud-button aria-label="Zoom in"></button></div></div><div class=notes-page__canvas>'), R = /* @__PURE__ */ r("<div>"), V = /* @__PURE__ */ r("<div class=notes-overlay__board-topic-copy><div class=notes-page__eyebrow>Active Topic</div><div class=notes-overlay__board-title></div><div class=notes-overlay__board-meta> live note"), K = /* @__PURE__ */ r("<button type=button class=notes-page__mobile-topic>");
+function U(e) {
+  return (() => {
+    var c = B(), b = c.firstChild, $ = b.firstChild, g = $.nextSibling, d = g.firstChild, h = d.nextSibling, C = h.nextSibling, v = b.nextSibling;
+    t($, o(u, {
+      get when() {
+        return e.activeTopic;
+      },
+      children: (n) => {
+        const a = Z(n().icon_accent);
+        return [(() => {
+          var i = R();
+          return x(i, `notes-topic-mark notes-topic-mark--board ${a}`), t(i, o(F, {
+            get iconKey() {
+              return n().icon_key;
+            },
+            class: "notes-topic-mark__icon"
+          })), i;
+        })(), (() => {
+          var i = V(), l = i.firstChild, _ = l.nextSibling, s = _.nextSibling, m = s.firstChild;
+          return t(_, () => n().name), t(s, () => e.activeItems.length, m), t(s, () => e.activeItems.length === 1 ? "" : "s", null), i;
+        })()];
+      }
+    })), d.$$click = () => e.onZoomOut(), t(d, o(I, {
+      class: "w-3.5 h-3.5"
+    })), t(h, () => e.boardScaleLabel), C.$$click = () => e.onZoomIn(), t(C, o(w, {
+      class: "w-3.5 h-3.5"
+    })), t(g, o(u, {
+      get when() {
+        return e.isMobile;
+      },
+      get children() {
+        var n = P();
+        return n.$$click = () => e.onOpenOverview(), t(n, o(k, {
+          class: "w-3.5 h-3.5"
+        })), n;
+      }
+    }), null), t(c, o(u, {
+      get when() {
+        return e.isMobile;
+      },
+      get children() {
+        var n = A(), a = n.firstChild;
+        return t(a, o(y, {
+          get each() {
+            return e.topics;
+          },
+          children: (i) => (() => {
+            var l = K();
+            return l.$$click = () => e.onSelectTopic(i.topic_id), t(l, () => i.name), M(() => l.classList.toggle("is-active", i.topic_id === e.activeTopicID)), l;
+          })()
+        })), n;
+      }
+    }), v);
+    var f = e.setCanvasFrameRef;
+    return typeof f == "function" ? O(f, v) : e.setCanvasFrameRef = v, t(v, o(L, {
+      get ariaLabel() {
+        return `Canvas for ${e.activeTopicLabel}`;
+      },
+      class: "notes-canvas",
+      get viewport() {
+        return e.viewport;
+      },
+      get onViewportChange() {
+        return e.onViewportCommit;
+      },
+      get onCanvasContextMenu() {
+        return e.onCanvasContextMenu;
+      },
+      get children() {
+        var n = D();
+        return t(n, o(y, {
+          get each() {
+            return e.activeItems;
+          },
+          children: (a) => o(T, {
+            item: a,
+            get copied() {
+              return e.copiedNoteID === a.note_id;
+            },
+            get optimisticFront() {
+              return e.optimisticFrontNoteID === a.note_id;
+            },
+            get topZIndex() {
+              return e.topZIndex;
+            },
+            get viewportScale() {
+              return e.viewport.scale;
+            },
+            get onCopy() {
+              return e.onCopyNote;
+            },
+            get onOpenContextMenu() {
+              return e.onOpenNoteContextMenu;
+            },
+            get onOpenEditor() {
+              return e.onOpenEditor;
+            },
+            get onMoveToTrash() {
+              return e.onMoveToTrash;
+            },
+            get onStartOptimisticFront() {
+              return e.onStartOptimisticFront;
+            },
+            get onCommitFront() {
+              return e.onCommitFront;
+            },
+            get onCommitMove() {
+              return e.onCommitMove;
+            }
+          })
+        })), n;
+      }
+    })), t(c, o(u, {
+      get when() {
+        return S(() => !!e.isMobile)() && !e.overviewOpen;
+      },
+      get children() {
+        var n = E(), a = n.firstChild, i = a.firstChild, l = a.nextSibling, _ = l.firstChild, s = l.nextSibling, m = s.firstChild;
+        return a.$$click = () => e.onMobileCreateNote(), t(a, o(w, {
+          class: "w-4 h-4"
+        }), i), l.$$click = () => e.onMobilePaste(), t(l, o(N, {
+          class: "w-4 h-4"
+        }), _), s.$$click = () => e.onOpenOverview(), t(s, o(k, {
+          class: "w-4 h-4"
+        }), m), n;
+      }
+    }), null), c;
+  })();
+}
+p(["click"]);
+export {
+  U as NotesBoard
+};

package/dist/components/notes/NotesBoardNote.d.ts

@@ -0,0 +1,17 @@
+import { type JSX } from 'solid-js';
+import type { NotesItem, NotesPoint } from './types';
+export interface NotesBoardNoteProps {
+    item: NotesItem;
+    copied: boolean;
+    optimisticFront: boolean;
+    topZIndex: number;
+    viewportScale: number;
+    onCopy: (item: NotesItem) => void;
+    onOpenContextMenu: (event: MouseEvent, item: NotesItem) => void;
+    onOpenEditor: (noteID: string) => void;
+    onMoveToTrash: (noteID: string) => void;
+    onStartOptimisticFront: (noteID: string) => void;
+    onCommitFront: (noteID: string) => void;
+    onCommitMove: (noteID: string, position: NotesPoint) => Promise<void> | void;
+}
+export declare function NotesBoardNote(props: NotesBoardNoteProps): JSX.Element;

package/dist/components/notes/NotesBoardNote.js

@@ -0,0 +1,114 @@
+import { insert as m, createComponent as _, memo as T, effect as z, className as F, setStyleProperty as b, template as W, delegateEvents as N } from "solid-js/web";
+import { createSignal as O, onCleanup as A, untrack as P, createMemo as h } from "solid-js";
+import { startHotInteraction as B } from "../../utils/hotInteraction.js";
+import { GripVertical as G, Pencil as H, Trash as V, Check as Z } from "../icons/index.js";
+import { notePreviewMetrics as j, getNotePreviewText as q, noteColorClass as J, samePoint as K } from "./notesOverlayHelpers.js";
+var Q = /* @__PURE__ */ W('<article data-floe-geometry-surface=notes-note><div class=notes-note__surface><header class=notes-note__header><button type=button class=notes-note__drag aria-label="Drag note"data-floe-canvas-interactive=true></button><div class=notes-note__actions><button type=button class=notes-note__icon-button data-floe-canvas-interactive=true aria-label="Edit note"></button><button type=button class="notes-note__icon-button is-danger"data-floe-canvas-interactive=true aria-label="Move note to trash"></button></div></header><button type=button class=notes-note__body data-floe-canvas-interactive=true data-floe-canvas-pan-surface=true><span>'), R = /* @__PURE__ */ W("<div class=notes-note__copied-state aria-hidden=true><div class=notes-note__copied-pill><span class=notes-note__copied-icon></span><span class=notes-note__copied-copy>Copied");
+function nt(t) {
+  const [v, w] = O(null);
+  let c;
+  A(() => {
+    c?.abort(), c = void 0, P(v)?.stopInteraction();
+  });
+  const $ = h(() => j(t.item)), D = h(() => q(t.item.body, $().preview_limit)), L = h(() => !t.item.body.trim()), C = () => v() !== null, y = h(() => {
+    const e = v();
+    return e ? {
+      x: e.worldX,
+      y: e.worldY
+    } : {
+      x: t.item.x,
+      y: t.item.y
+    };
+  }), I = (e) => {
+    const i = P(v);
+    if (!i || (i.stopInteraction(), w(null), c?.abort(), c = void 0, t.onCommitFront(t.item.note_id), !e)) return;
+    const r = {
+      x: i.worldX,
+      y: i.worldY
+    }, s = {
+      x: i.startWorldX,
+      y: i.startWorldY
+    };
+    K(r, s) || t.onCommitMove(t.item.note_id, r);
+  }, E = (e) => {
+    if (e.button !== 0) return;
+    e.preventDefault(), e.stopPropagation(), c?.abort(), t.onStartOptimisticFront(t.item.note_id);
+    const i = B({
+      kind: "drag",
+      cursor: "grabbing"
+    }), r = Math.max(t.viewportScale, 1e-3);
+    w({
+      pointerId: e.pointerId,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startWorldX: t.item.x,
+      startWorldY: t.item.y,
+      worldX: t.item.x,
+      worldY: t.item.y,
+      moved: !1,
+      scale: r,
+      stopInteraction: i
+    });
+    const s = (a) => {
+      w((n) => {
+        if (!n || n.pointerId !== a.pointerId) return n;
+        const o = n.startWorldX + (a.clientX - n.startClientX) / n.scale, l = n.startWorldY + (a.clientY - n.startClientY) / n.scale;
+        return {
+          ...n,
+          worldX: o,
+          worldY: l,
+          moved: n.moved || Math.abs(o - n.startWorldX) > 2 || Math.abs(l - n.startWorldY) > 2
+        };
+      });
+    }, x = (a) => {
+      a.pointerId === e.pointerId && I(!0);
+    }, u = (a) => {
+      a.pointerId === e.pointerId && I(!1);
+    }, d = new AbortController();
+    c = d, window.addEventListener("pointermove", s, {
+      signal: d.signal
+    }), window.addEventListener("pointerup", x, {
+      once: !0,
+      signal: d.signal
+    }), window.addEventListener("pointercancel", u, {
+      once: !0,
+      signal: d.signal
+    });
+  };
+  return (() => {
+    var e = Q(), i = e.firstChild, r = i.firstChild, s = r.firstChild, x = s.nextSibling, u = x.firstChild, d = u.nextSibling, a = r.nextSibling, n = a.firstChild;
+    return e.$$click = () => t.onCommitFront(t.item.note_id), e.$$contextmenu = (o) => {
+      o.preventDefault(), o.stopPropagation(), t.onOpenContextMenu(o, t.item);
+    }, s.$$pointerdown = E, m(s, _(G, {
+      class: "w-3.5 h-3.5"
+    })), u.$$click = () => t.onOpenEditor(t.item.note_id), m(u, _(H, {
+      class: "w-3.5 h-3.5"
+    })), d.$$click = () => t.onMoveToTrash(t.item.note_id), m(d, _(V, {
+      class: "w-3.5 h-3.5"
+    })), a.$$click = () => t.onCopy(t.item), m(n, D), m(i, (() => {
+      var o = T(() => !!t.copied);
+      return () => o() ? (() => {
+        var l = R(), g = l.firstChild, f = g.firstChild;
+        return m(f, _(Z, {
+          class: "w-3.5 h-3.5"
+        })), l;
+      })() : null;
+    })(), null), z((o) => {
+      var l = `${J(t.item.color_token)} notes-note notes-note--size-${t.item.size_bucket - 1}`, g = !!t.copied, f = !!C(), X = `translate(${y().x}px, ${y().y}px)`, Y = `${$().width}px`, k = `${$().height}px`, M = C() || t.optimisticFront ? `${t.topZIndex + 1}` : `${t.item.z_index}`, S = !!L();
+      return l !== o.e && F(e, o.e = l), g !== o.t && e.classList.toggle("is-copied", o.t = g), f !== o.a && e.classList.toggle("is-dragging", o.a = f), X !== o.o && b(e, "transform", o.o = X), Y !== o.i && b(e, "--note-width", o.i = Y), k !== o.n && b(e, "--note-height", o.n = k), M !== o.s && b(e, "z-index", o.s = M), S !== o.h && a.classList.toggle("is-empty", o.h = S), o;
+    }, {
+      e: void 0,
+      t: void 0,
+      a: void 0,
+      o: void 0,
+      i: void 0,
+      n: void 0,
+      s: void 0,
+      h: void 0
+    }), e;
+  })();
+}
+N(["contextmenu", "click", "pointerdown"]);
+export {
+  nt as NotesBoardNote
+};

package/dist/components/notes/NotesContextMenu.js

@@ -1,7 +1,7 @@
-import { use as E, insert as c, createComponent as m, addEventListener as T, effect as v, className as f, setStyleProperty as d, template as i, delegateEvents as N } from "solid-js/web";
+import { use as E, insert as i, createComponent as m, addEventListener as T, effect as v, className as f, setStyleProperty as d, template as s, delegateEvents as N } from "solid-js/web";
 import { For as x } from "solid-js";
 import { cn as C } from "../../utils/cn.js";
-var O = /* @__PURE__ */ i("<div role=menu class=notes-context-menu>"), h = /* @__PURE__ */ i("<div role=separator aria-orientation=horizontal class=notes-context-menu__separator>"), I = /* @__PURE__ */ i("<button type=button role=menuitem><span class=notes-context-menu__label>");
+var O = /* @__PURE__ */ s('<div role=menu class="notes-context-menu notes-menu">'), h = /* @__PURE__ */ s("<div role=separator aria-orientation=horizontal class=notes-context-menu__separator>"), I = /* @__PURE__ */ s("<button type=button role=menuitem><span class=notes-context-menu__label>");
 const H = 188, M = 16, X = 32, P = 9;
 function S(t) {
   return t.kind === "action";
@@ -13,8 +13,8 @@ function R(t) {
   return (() => {
     var n = O();
     n.$$contextmenu = (e) => e.preventDefault();
-    var s = t.menuRef;
-    return typeof s == "function" ? E(s, n) : t.menuRef = n, c(n, m(x, {
+    var c = t.menuRef;
+    return typeof c == "function" ? E(c, n) : t.menuRef = n, i(n, m(x, {
       get each() {
         return t.items;
       },
@@ -24,10 +24,10 @@ function R(t) {
         const a = e.icon;
         return (() => {
           var o = I(), u = o.firstChild;
-          return T(o, "click", e.onSelect, !0), c(o, m(a, {
+          return T(o, "click", e.onSelect, !0), i(o, m(a, {
             class: "h-3.5 w-3.5"
-          }), u), c(u, () => e.label), v((r) => {
-            var l = C("notes-context-menu__item", e.destructive && "is-destructive"), _ = e.disabled;
+          }), u), i(u, () => e.label), v((r) => {
+            var l = C("notes-context-menu__item notes-menu__item", e.destructive && "is-destructive is-danger"), _ = e.disabled;
             return l !== r.e && f(o, r.e = l), _ !== r.t && (o.disabled = r.t = _), r;
           }, {
             e: void 0,

package/dist/components/notes/NotesEditorFlyout.d.ts

@@ -0,0 +1,19 @@
+import { type NoteColorToken, type NotesItem } from './types';
+export interface NotesEditorFlyoutProps {
+    note: NotesItem | undefined;
+    draftBody: string;
+    draftColor: NoteColorToken;
+    onDraftBodyChange: (value: string) => void;
+    onDraftColorChange: (value: NoteColorToken) => void;
+    onClose: () => void;
+    onSave: () => void;
+}
+export declare function NotesEditorFlyout(props: NotesEditorFlyoutProps): import("solid-js").JSX.Element;
+export interface NotesManualPasteFlyoutProps {
+    open: boolean;
+    text: string;
+    onTextChange: (value: string) => void;
+    onClose: () => void;
+    onConfirm: () => void;
+}
+export declare function NotesManualPasteFlyout(props: NotesManualPasteFlyoutProps): import("solid-js").JSX.Element;

package/dist/components/notes/NotesEditorFlyout.js

@@ -0,0 +1,92 @@
+import { insert as e, createComponent as l, effect as w, className as T, template as f, delegateEvents as E } from "solid-js/web";
+import { For as O, Show as k } from "solid-js";
+import { X as m } from "../icons/index.js";
+import { NOTE_COLOR_LABELS as N } from "./notesAppearance.js";
+import { noteColorClass as L } from "./notesOverlayHelpers.js";
+import { NOTE_COLOR_TOKENS as B } from "./types.js";
+import { Textarea as y } from "../ui/Input.js";
+import { Button as v } from "../ui/Button.js";
+var P = /* @__PURE__ */ f('<div class="notes-flyout notes-flyout--editor"><div class=notes-flyout__header><div><div class=notes-editor__label>Edit note</div><div class=notes-flyout__title></div></div><button type=button class=notes-flyout__close aria-label="Close editor"></button></div><div class=notes-editor><div class=notes-editor__palette><div class=notes-editor__label>Color</div><div class=notes-editor__swatches></div></div><div class=notes-editor__field><div class=notes-editor__label>Text</div></div></div><div class=notes-flyout__footer>'), F = /* @__PURE__ */ f("<button type=button><span>"), R = /* @__PURE__ */ f('<div class="notes-flyout notes-flyout--paste"><div class=notes-flyout__header><div><div class=notes-editor__label>Manual paste</div><div class=notes-flyout__title>Clipboard access was unavailable</div></div><button type=button class=notes-flyout__close aria-label="Close paste panel"></button></div><div class=notes-flyout__body></div><div class=notes-flyout__footer>');
+function z(t) {
+  return (() => {
+    var i = P(), r = i.firstChild, c = r.firstChild, u = c.firstChild, _ = u.nextSibling, a = c.nextSibling, n = r.nextSibling, C = n.firstChild, x = C.firstChild, S = x.nextSibling, h = C.nextSibling;
+    h.firstChild;
+    var g = n.nextSibling;
+    return i.$$pointerdown = (o) => o.stopPropagation(), e(_, () => t.note?.body.trim() ? "Refine note" : "Compose note"), a.$$click = () => t.onClose(), e(a, l(m, {
+      class: "w-4 h-4"
+    })), e(S, l(O, {
+      each: B,
+      children: (o) => (() => {
+        var s = F(), p = s.firstChild;
+        return s.$$click = () => t.onDraftColorChange(o), e(p, () => N[o]), w((d) => {
+          var $ = `notes-editor__swatch ${L(o)}`, b = t.draftColor === o;
+          return $ !== d.e && T(s, d.e = $), b !== d.t && s.classList.toggle("is-active", d.t = b), d;
+        }, {
+          e: void 0,
+          t: void 0
+        }), s;
+      })()
+    })), e(h, l(y, {
+      "data-floe-autofocus": !0,
+      rows: 10,
+      get value() {
+        return t.draftBody;
+      },
+      onInput: (o) => t.onDraftBodyChange(o.currentTarget.value),
+      placeholder: "Type or paste anything worth keeping..."
+    }), null), e(g, l(v, {
+      variant: "ghost",
+      get onClick() {
+        return t.onClose;
+      },
+      children: "Cancel"
+    }), null), e(g, l(v, {
+      variant: "primary",
+      get onClick() {
+        return t.onSave;
+      },
+      children: "Save"
+    }), null), i;
+  })();
+}
+function G(t) {
+  return l(k, {
+    get when() {
+      return t.open;
+    },
+    get children() {
+      var i = R(), r = i.firstChild, c = r.firstChild, u = c.nextSibling, _ = r.nextSibling, a = _.nextSibling;
+      return i.$$pointerdown = (n) => n.stopPropagation(), u.$$click = () => t.onClose(), e(u, l(m, {
+        class: "w-4 h-4"
+      })), e(_, l(y, {
+        "data-floe-autofocus": !0,
+        rows: 12,
+        get value() {
+          return t.text;
+        },
+        onInput: (n) => t.onTextChange(n.currentTarget.value),
+        placeholder: "Paste clipboard text here..."
+      })), e(a, l(v, {
+        variant: "ghost",
+        get onClick() {
+          return t.onClose;
+        },
+        children: "Cancel"
+      }), null), e(a, l(v, {
+        variant: "primary",
+        get disabled() {
+          return !t.text.trim();
+        },
+        get onClick() {
+          return t.onConfirm;
+        },
+        children: "Create note"
+      }), null), i;
+    }
+  });
+}
+E(["pointerdown", "click"]);
+export {
+  z as NotesEditorFlyout,
+  G as NotesManualPasteFlyout
+};

package/dist/components/notes/NotesOverlay.d.ts

@@ -1 +1,9 @@
-export { NotesOverlay, type NotesOverlayProps } from './NotesOverlayLegacy';
+import type { NotesController } from './types';
+export type NotesOverlayInteractionMode = 'modal' | 'floating';
+export interface NotesOverlayProps {
+    open: boolean;
+    onClose: () => void;
+    controller: NotesController;
+    interactionMode?: NotesOverlayInteractionMode;
+}
+export declare function NotesOverlay(props: NotesOverlayProps): import("solid-js").JSX.Element;