@floegence/floe-webapp-core 0.35.51 → 0.35.53

package/dist/components/notes/NotesBoardNote.js

@@ -1,104 +1,119 @@
-import { insert as u, createComponent as h, memo as N, effect as O, className as z, setAttribute as A, setStyleProperty as b, template as T, delegateEvents as R } from "solid-js/web";
-import { createSignal as j, onCleanup as B, untrack as E, createMemo as w } from "solid-js";
-import { startHotInteraction as G } from "../../utils/hotInteraction.js";
-import { GripVertical as H, Pencil as K, Trash as V, Check as Z } from "../icons/index.js";
-import { notePreviewMetrics as q, getNotePreviewText as J, noteColorClass as Q, samePoint as U } from "./notesOverlayHelpers.js";
-var p = /* @__PURE__ */ T('<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 data-floe-notes-front-skip=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 data-floe-notes-front-skip=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>'), tt = /* @__PURE__ */ T("<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");
-const et = '[data-floe-notes-front-skip="true"]';
-function lt(t) {
-  const [f, C] = j(null);
-  let c;
-  B(() => {
-    c?.abort(), c = void 0, E(f)?.stopInteraction();
+import { insert as l, createComponent as $, memo as y, effect as G, className as H, setAttribute as K, setStyleProperty as w, template as f, delegateEvents as V } from "solid-js/web";
+import { createSignal as Z, onCleanup as q, untrack as A, createMemo as d } from "solid-js";
+import { startHotInteraction as J } from "../../utils/hotInteraction.js";
+import { GripVertical as Q, Pencil as U, Trash as p, Check as tt } from "../icons/index.js";
+import { notePreviewMetrics as et, normalizeNoteTitle as ot, normalizeNoteText as nt, getNotePreviewText as it, noteColorClass as at, samePoint as lt } from "./notesOverlayHelpers.js";
+var st = /* @__PURE__ */ f('<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 data-floe-notes-front-skip=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 data-floe-notes-front-skip=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>'), rt = /* @__PURE__ */ f("<span class=notes-note__title-block><span class=notes-note__title>"), dt = /* @__PURE__ */ f("<span class=notes-note__body-copy>"), ct = /* @__PURE__ */ f("<span class=notes-note__body-copy>Empty note"), mt = /* @__PURE__ */ f("<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");
+const ut = '[data-floe-notes-front-skip="true"]';
+function bt(e) {
+  const [h, C] = Z(null);
+  let u;
+  q(() => {
+    u?.abort(), u = void 0, A(h)?.stopInteraction();
   });
-  const $ = w(() => q(t.item)), W = w(() => J(t.item.body, $().preview_limit)), D = w(() => !t.item.body.trim()), x = () => f() !== null, y = w(() => {
-    const e = f();
-    return e ? {
-      x: e.worldX,
-      y: e.worldY
+  const x = d(() => et(e.item)), I = d(() => ot(e.item.title)), T = d(() => nt(e.item.body)), B = d(() => T() ? it(e.item.body, x().preview_limit) : ""), _ = d(() => I().length > 0), k = d(() => T().length > 0), M = d(() => !_() && !k()), S = () => h() !== null, X = d(() => {
+    const o = h();
+    return o ? {
+      x: o.worldX,
+      y: o.worldY
     } : {
-      x: t.item.x,
-      y: t.item.y
+      x: e.item.x,
+      y: e.item.y
     };
-  }), F = (e) => !(e instanceof Element && e.closest(et)), k = (e) => {
-    const i = E(f);
-    if (!i) return;
+  }), R = (o) => !(o instanceof Element && o.closest(ut)), Y = (o) => {
+    const a = A(h);
+    if (!a) return;
     const r = {
-      x: i.worldX,
-      y: i.worldY
-    }, s = {
-      x: i.startWorldX,
-      y: i.startWorldY
-    }, m = e && !U(r, s);
-    m && t.onSeedMoveProjection(t.item.note_id, r), i.stopInteraction(), C(null), c?.abort(), c = void 0, t.onCommitFront(t.item.note_id), m && t.onCommitMove(t.item.note_id, r);
-  }, L = (e) => {
-    if (e.button !== 0) return;
-    e.preventDefault(), e.stopPropagation(), c?.abort(), t.onStartOptimisticFront(t.item.note_id);
-    const i = G({
+      x: a.worldX,
+      y: a.worldY
+    }, c = {
+      x: a.startWorldX,
+      y: a.startWorldY
+    }, v = o && !lt(r, c);
+    v && e.onSeedMoveProjection(e.item.note_id, r), a.stopInteraction(), C(null), u?.abort(), u = void 0, e.onCommitFront(e.item.note_id), v && e.onCommitMove(e.item.note_id, r);
+  }, j = (o) => {
+    if (o.button !== 0) return;
+    o.preventDefault(), o.stopPropagation(), u?.abort(), e.onStartOptimisticFront(e.item.note_id);
+    const a = J({
       kind: "drag",
       cursor: "grabbing"
-    }), r = Math.max(t.viewportScale, 1e-3);
+    }), r = Math.max(e.viewportScale, 1e-3);
     C({
-      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,
+      pointerId: o.pointerId,
+      startClientX: o.clientX,
+      startClientY: o.clientY,
+      startWorldX: e.item.x,
+      startWorldY: e.item.y,
+      worldX: e.item.x,
+      worldY: e.item.y,
       moved: !1,
       scale: r,
-      stopInteraction: i
+      stopInteraction: a
     });
-    const s = (a) => {
-      C((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;
+    const c = (n) => {
+      C((t) => {
+        if (!t || t.pointerId !== n.pointerId) return t;
+        const i = t.startWorldX + (n.clientX - t.startClientX) / t.scale, s = t.startWorldY + (n.clientY - t.startClientY) / t.scale;
         return {
-          ...n,
-          worldX: o,
-          worldY: l,
-          moved: n.moved || Math.abs(o - n.startWorldX) > 2 || Math.abs(l - n.startWorldY) > 2
+          ...t,
+          worldX: i,
+          worldY: s,
+          moved: t.moved || Math.abs(i - t.startWorldX) > 2 || Math.abs(s - t.startWorldY) > 2
         };
       });
-    }, m = (a) => {
-      a.pointerId === e.pointerId && k(!0);
-    }, v = (a) => {
-      a.pointerId === e.pointerId && k(!1);
-    }, d = new AbortController();
-    c = d, window.addEventListener("pointermove", s, {
-      signal: d.signal
-    }), window.addEventListener("pointerup", m, {
+    }, v = (n) => {
+      n.pointerId === o.pointerId && Y(!0);
+    }, g = (n) => {
+      n.pointerId === o.pointerId && Y(!1);
+    }, m = new AbortController();
+    u = m, window.addEventListener("pointermove", c, {
+      signal: m.signal
+    }), window.addEventListener("pointerup", v, {
       once: !0,
-      signal: d.signal
-    }), window.addEventListener("pointercancel", v, {
+      signal: m.signal
+    }), window.addEventListener("pointercancel", g, {
       once: !0,
-      signal: d.signal
+      signal: m.signal
     });
   };
   return (() => {
-    var e = p(), i = e.firstChild, r = i.firstChild, s = r.firstChild, m = s.nextSibling, v = m.firstChild, d = v.nextSibling, a = r.nextSibling, n = a.firstChild;
-    return e.$$click = (o) => {
-      F(o.target) && t.onCommitFront(t.item.note_id);
-    }, e.$$contextmenu = (o) => {
-      o.preventDefault(), o.stopPropagation(), t.onOpenContextMenu(o, t.item);
-    }, s.$$pointerdown = L, u(s, h(H, {
+    var o = st(), a = o.firstChild, r = a.firstChild, c = r.firstChild, v = c.nextSibling, g = v.firstChild, m = g.nextSibling, n = r.nextSibling;
+    return o.$$click = (t) => {
+      R(t.target) && e.onCommitFront(e.item.note_id);
+    }, o.$$contextmenu = (t) => {
+      t.preventDefault(), t.stopPropagation(), e.onOpenContextMenu(t, e.item);
+    }, c.$$pointerdown = j, l(c, $(Q, {
       class: "w-3.5 h-3.5"
-    })), v.$$click = () => t.onOpenEditor(t.item.note_id), u(v, h(K, {
+    })), g.$$click = () => e.onOpenEditor(e.item.note_id), l(g, $(U, {
       class: "w-3.5 h-3.5"
-    })), d.$$click = () => t.onMoveToTrash(t.item.note_id), u(d, h(V, {
+    })), m.$$click = () => e.onMoveToTrash(e.item.note_id), l(m, $(p, {
       class: "w-3.5 h-3.5"
-    })), a.$$click = () => t.onCopy(t.item), u(n, W), u(i, (() => {
-      var o = N(() => !!t.copied);
-      return () => o() ? (() => {
-        var l = tt(), _ = l.firstChild, g = _.firstChild;
-        return u(g, h(Z, {
+    })), n.$$click = () => e.onCopy(e.item), l(n, (() => {
+      var t = y(() => !!_());
+      return () => t() ? (() => {
+        var i = rt(), s = i.firstChild;
+        return l(s, I), i;
+      })() : null;
+    })(), null), l(n, (() => {
+      var t = y(() => !!k());
+      return () => t() ? (() => {
+        var i = dt();
+        return l(i, B), i;
+      })() : null;
+    })(), null), l(n, (() => {
+      var t = y(() => !!M());
+      return () => t() ? ct() : null;
+    })(), null), l(a, (() => {
+      var t = y(() => !!e.copied);
+      return () => t() ? (() => {
+        var i = mt(), s = i.firstChild, b = s.firstChild;
+        return l(b, $(tt, {
           class: "w-3.5 h-3.5"
-        })), l;
+        })), i;
       })() : null;
-    })(), null), O((o) => {
-      var l = `${Q(t.item.color_token)} notes-note notes-note--size-${t.item.size_bucket - 1}`, _ = !!t.copied, g = !!x(), I = t.item.note_id, M = `translate(${y().x}px, ${y().y}px)`, S = `${$().width}px`, X = `${$().height}px`, Y = x() || t.optimisticFront ? `${t.topZIndex + 1}` : `${t.item.z_index}`, P = !!D();
-      return l !== o.e && z(e, o.e = l), _ !== o.t && e.classList.toggle("is-copied", o.t = _), g !== o.a && e.classList.toggle("is-dragging", o.a = g), I !== o.o && A(e, "data-floe-notes-note-id", o.o = I), M !== o.i && b(e, "transform", o.i = M), S !== o.n && b(e, "--note-width", o.n = S), X !== o.s && b(e, "--note-height", o.s = X), Y !== o.h && b(e, "z-index", o.h = Y), P !== o.r && a.classList.toggle("is-empty", o.r = P), o;
+    })(), null), G((t) => {
+      var i = `${at(e.item.color_token)} notes-note notes-note--size-${e.item.size_bucket - 1}`, s = !!e.copied, b = !!S(), E = !!_(), L = e.item.note_id, P = `translate(${X().x}px, ${X().y}px)`, N = `${x().width}px`, W = `${x().height}px`, D = S() || e.optimisticFront ? `${e.topZIndex + 1}` : `${e.item.z_index}`, F = !!M(), z = !!_(), O = !!(_() && !k());
+      return i !== t.e && H(o, t.e = i), s !== t.t && o.classList.toggle("is-copied", t.t = s), b !== t.a && o.classList.toggle("is-dragging", t.a = b), E !== t.o && o.classList.toggle("has-title", t.o = E), L !== t.i && K(o, "data-floe-notes-note-id", t.i = L), P !== t.n && w(o, "transform", t.n = P), N !== t.s && w(o, "--note-width", t.s = N), W !== t.h && w(o, "--note-height", t.h = W), D !== t.r && w(o, "z-index", t.r = D), F !== t.d && n.classList.toggle("is-empty", t.d = F), z !== t.l && n.classList.toggle("has-title", t.l = z), O !== t.u && n.classList.toggle("is-title-only", t.u = O), t;
     }, {
       e: void 0,
       t: void 0,
@@ -108,11 +123,14 @@ function lt(t) {
       n: void 0,
       s: void 0,
       h: void 0,
-      r: void 0
-    }), e;
+      r: void 0,
+      d: void 0,
+      l: void 0,
+      u: void 0
+    }), o;
   })();
 }
-R(["contextmenu", "click", "pointerdown"]);
+V(["contextmenu", "click", "pointerdown"]);
 export {
-  lt as NotesBoardNote
+  bt as NotesBoardNote
 };

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

@@ -1,8 +1,10 @@
 import { type NoteColorToken, type NotesItem } from './types';
 export interface NotesEditorFlyoutProps {
     note: NotesItem | undefined;
+    draftTitle: string;
     draftBody: string;
     draftColor: NoteColorToken;
+    onDraftTitleChange: (value: string) => void;
     onDraftBodyChange: (value: string) => void;
     onDraftColorChange: (value: NoteColorToken) => void;
     onClose: () => void;

package/dist/components/notes/NotesEditorFlyout.js

@@ -1,92 +1,107 @@
-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"data-floe-notes-boundary=true><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"data-floe-notes-boundary=true><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) {
+import { insert as t, createComponent as l, effect as O, className as E, template as h, delegateEvents as k } from "solid-js/web";
+import { For as p, Show as N } from "solid-js";
+import { X as y } from "../icons/index.js";
+import { NOTE_COLOR_LABELS as L } from "./notesAppearance.js";
+import { noteColorClass as B } from "./notesOverlayHelpers.js";
+import { NOTE_COLOR_TOKENS as I } from "./types.js";
+import { Input as P, Textarea as x } from "../ui/Input.js";
+import { Button as _ } from "../ui/Button.js";
+var D = /* @__PURE__ */ h('<div class="notes-flyout notes-flyout--editor"data-floe-notes-boundary=true><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 notes-editor__field--headline"><div class=notes-editor__label>Headline</div></div><div class=notes-editor__field><div class=notes-editor__label>Text</div></div></div><div class=notes-flyout__footer>'), F = /* @__PURE__ */ h("<button type=button><span>"), R = /* @__PURE__ */ h('<div class="notes-flyout notes-flyout--paste"data-floe-notes-boundary=true><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 G(e) {
   return (() => {
-    var i = P(), r = i.firstChild, u = r.firstChild, c = u.firstChild, _ = c.nextSibling, a = u.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, {
+    var i = D(), a = i.firstChild, u = a.firstChild, c = u.firstChild, v = c.nextSibling, r = u.nextSibling, n = a.nextSibling, g = n.firstChild, S = g.firstChild, w = S.nextSibling, f = g.nextSibling;
+    f.firstChild;
+    var C = f.nextSibling;
+    C.firstChild;
+    var b = n.nextSibling;
+    return i.$$pointerdown = (o) => o.stopPropagation(), t(v, () => e.note?.body.trim() ? "Refine note" : "Compose note"), r.$$click = () => e.onClose(), t(r, l(y, {
       class: "w-4 h-4"
-    })), e(S, l(O, {
-      each: B,
+    })), t(w, l(p, {
+      each: I,
       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;
+        var d = F(), T = d.firstChild;
+        return d.$$click = () => e.onDraftColorChange(o), t(T, () => L[o]), O((s) => {
+          var $ = `notes-editor__swatch ${B(o)}`, m = e.draftColor === o;
+          return $ !== s.e && E(d, s.e = $), m !== s.t && d.classList.toggle("is-active", s.t = m), s;
         }, {
           e: void 0,
           t: void 0
-        }), s;
+        }), d;
       })()
-    })), e(h, l(y, {
-      "data-floe-autofocus": !0,
+    })), t(f, l(P, {
+      get "data-floe-autofocus"() {
+        return !e.note?.title.trim() && !e.note?.body.trim() ? !0 : void 0;
+      },
+      size: "lg",
+      get value() {
+        return e.draftTitle;
+      },
+      onInput: (o) => e.onDraftTitleChange(o.currentTarget.value),
+      placeholder: "Optional note headline",
+      helperText: "Shown as a large accent title on the card."
+    }), null), t(C, l(x, {
+      get "data-floe-autofocus"() {
+        return e.note?.title.trim() || e.note?.body.trim() ? !0 : void 0;
+      },
       rows: 10,
       get value() {
-        return t.draftBody;
+        return e.draftBody;
       },
-      onInput: (o) => t.onDraftBodyChange(o.currentTarget.value),
+      onInput: (o) => e.onDraftBodyChange(o.currentTarget.value),
       placeholder: "Type or paste anything worth keeping..."
-    }), null), e(g, l(v, {
+    }), null), t(b, l(_, {
       variant: "ghost",
       get onClick() {
-        return t.onClose;
+        return e.onClose;
       },
       children: "Cancel"
-    }), null), e(g, l(v, {
+    }), null), t(b, l(_, {
       variant: "primary",
       get onClick() {
-        return t.onSave;
+        return e.onSave;
       },
       children: "Save"
     }), null), i;
   })();
 }
-function G(t) {
-  return l(k, {
+function J(e) {
+  return l(N, {
     get when() {
-      return t.open;
+      return e.open;
     },
     get children() {
-      var i = R(), r = i.firstChild, u = r.firstChild, c = u.nextSibling, _ = r.nextSibling, a = _.nextSibling;
-      return i.$$pointerdown = (n) => n.stopPropagation(), c.$$click = () => t.onClose(), e(c, l(m, {
+      var i = R(), a = i.firstChild, u = a.firstChild, c = u.nextSibling, v = a.nextSibling, r = v.nextSibling;
+      return i.$$pointerdown = (n) => n.stopPropagation(), c.$$click = () => e.onClose(), t(c, l(y, {
         class: "w-4 h-4"
-      })), e(_, l(y, {
+      })), t(v, l(x, {
         "data-floe-autofocus": !0,
         rows: 12,
         get value() {
-          return t.text;
+          return e.text;
         },
-        onInput: (n) => t.onTextChange(n.currentTarget.value),
+        onInput: (n) => e.onTextChange(n.currentTarget.value),
         placeholder: "Paste clipboard text here..."
-      })), e(a, l(v, {
+      })), t(r, l(_, {
         variant: "ghost",
         get onClick() {
-          return t.onClose;
+          return e.onClose;
         },
         children: "Cancel"
-      }), null), e(a, l(v, {
+      }), null), t(r, l(_, {
         variant: "primary",
         get disabled() {
-          return !t.text.trim();
+          return !e.text.trim();
         },
         get onClick() {
-          return t.onConfirm;
+          return e.onConfirm;
         },
         children: "Create note"
       }), null), i;
     }
   });
 }
-E(["pointerdown", "click"]);
+k(["pointerdown", "click"]);
 export {
-  z as NotesEditorFlyout,
-  G as NotesManualPasteFlyout
+  G as NotesEditorFlyout,
+  J as NotesManualPasteFlyout
 };

package/dist/components/notes/NotesOverlay.js

@@ -1,7 +1,7 @@
-import { createComponent as o, insert as i, addEventListener as v, effect as y, setAttribute as k, Portal as u, memo as x, template as c, delegateEvents as $ } from "solid-js/web";
+import { createComponent as o, insert as i, addEventListener as v, effect as y, setAttribute as k, Portal as c, memo as x, template as u, delegateEvents as $ } from "solid-js/web";
 import { createEffect as D, onCleanup as I, Show as s } from "solid-js";
-import { Motion as C } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
-import { easing as E, duration as T } from "../../utils/animations.js";
+import { Motion as T } from "../../node_modules/.pnpm/solid-motionone@1.0.4_solid-js@1.9.11/node_modules/solid-motionone/dist/index.js";
+import { easing as E, duration as C } from "../../utils/animations.js";
 import { useOverlayMask as F } from "../../hooks/useOverlayMask.js";
 import { X as L } from "../icons/index.js";
 import { NotesBoard as R } from "./NotesBoard.js";
@@ -12,7 +12,7 @@ import { NotesTopicRail as z } from "./NotesTopicRail.js";
 import { NotesTrashFlyout as W } from "./NotesTrashFlyout.js";
 import { NotesTrashCanIcon as q } from "./notesAppearance.js";
 import { useNotesOverlayModel as j } from "./useNotesOverlayModel.js";
-var A = /* @__PURE__ */ c('<header class=notes-overlay__header data-floe-canvas-interactive=true><div class=notes-overlay__header-brand><div class=notes-overlay__header-title>Notes</div><div class=notes-overlay__header-separator></div><div class=notes-overlay__header-stat> topics</div><div class=notes-overlay__header-stat> live note</div><div class=notes-overlay__header-stat> trash</div></div><div class=notes-overlay__header-actions><button type=button class=notes-overlay__close aria-label="Close notes overlay"data-floe-overlay-close=true>'), V = /* @__PURE__ */ c("<button type=button class=notes-trash__toggle><div class=notes-trash__toggle-mark>"), H = /* @__PURE__ */ c("<div class=notes-overlay__body><div class=notes-trash data-floe-canvas-interactive=true>"), U = /* @__PURE__ */ c("<div class=notes-overview-backdrop data-floe-notes-boundary=true>"), X = /* @__PURE__ */ c("<div class=notes-overview-flyout data-floe-notes-boundary=true>"), Y = /* @__PURE__ */ c("<div class=notes-menu-backdrop data-floe-notes-boundary=true>");
+var A = /* @__PURE__ */ u('<header class=notes-overlay__header data-floe-canvas-interactive=true><div class=notes-overlay__header-brand><div class=notes-overlay__header-title>Notes</div><div class=notes-overlay__header-separator></div><div class=notes-overlay__header-stat> topics</div><div class=notes-overlay__header-stat> live note</div><div class=notes-overlay__header-stat> trash</div></div><div class=notes-overlay__header-actions><button type=button class=notes-overlay__close aria-label="Close notes overlay"data-floe-overlay-close=true>'), V = /* @__PURE__ */ u("<button type=button class=notes-trash__toggle><div class=notes-trash__toggle-mark>"), H = /* @__PURE__ */ u("<div class=notes-overlay__body><div class=notes-trash data-floe-canvas-interactive=true>"), U = /* @__PURE__ */ u("<div class=notes-overview-backdrop data-floe-notes-boundary=true>"), X = /* @__PURE__ */ u("<div class=notes-overview-flyout data-floe-notes-boundary=true>"), Y = /* @__PURE__ */ u("<div class=notes-menu-backdrop data-floe-notes-boundary=true>");
 const G = '[data-floe-notes-boundary="true"]';
 function J(r) {
   return typeof Element < "u" && r instanceof Element ? r : typeof Node < "u" && r instanceof Node ? r.parentElement : null;
@@ -72,7 +72,7 @@ function ge(r) {
       return r.open;
     },
     get children() {
-      return o(C.section, {
+      return o(T.section, {
         ref(t) {
           var n = g;
           typeof n == "function" ? n(t) : g = t;
@@ -95,11 +95,11 @@ function ge(r) {
         },
         get transition() {
           return {
-            duration: T.fast
+            duration: C.fast
           };
         },
         get children() {
-          return [o(C.div, {
+          return [o(T.div, {
             class: "notes-overlay__frame",
             "data-floe-notes-boundary": "true",
             initial: {
@@ -114,7 +114,7 @@ function ge(r) {
             },
             get transition() {
               return {
-                duration: T.normal,
+                duration: C.normal,
                 easing: E.easeOut
               };
             },
@@ -305,7 +305,7 @@ function ge(r) {
               return x(() => !!e.board.isMobile())() && e.board.overviewOpen();
             },
             get children() {
-              return o(u, {
+              return o(c, {
                 get children() {
                   return [(() => {
                     var t = U();
@@ -343,7 +343,7 @@ function ge(r) {
                 }
               });
             }
-          }), o(u, {
+          }), o(c, {
             get children() {
               return o(W, {
                 get open() {
@@ -380,7 +380,7 @@ function ge(r) {
               return e.contextMenu.state();
             },
             get children() {
-              return o(u, {
+              return o(c, {
                 get children() {
                   return [(() => {
                     var t = Y();
@@ -404,18 +404,24 @@ function ge(r) {
               return !!e.editor.note();
             },
             get children() {
-              return o(u, {
+              return o(c, {
                 get children() {
                   return o(P, {
                     get note() {
                       return e.editor.note();
                     },
+                    get draftTitle() {
+                      return e.editor.draftTitle();
+                    },
                     get draftBody() {
                       return e.editor.draftBody();
                     },
                     get draftColor() {
                       return e.editor.draftColor();
                     },
+                    get onDraftTitleChange() {
+                      return e.editor.setDraftTitle;
+                    },
                     get onDraftBodyChange() {
                       return e.editor.setDraftBody;
                     },
@@ -432,7 +438,7 @@ function ge(r) {
                 }
               });
             }
-          }), o(u, {
+          }), o(c, {
             get children() {
               return o(Z, {
                 get open() {