@floegence/floe-webapp-core 0.35.41 → 0.35.42

package/dist/components/notes/NotesOverlayLegacy.js

@@ -0,0 +1,1551 @@
+import { createComponent as r, insert as i, effect as N, className as Q, setAttribute as G, setStyleProperty as H, memo as se, template as g, style as Ro, use as Vo, delegateEvents as Wo } from "solid-js/web";
+import { createSignal as L, createMemo as y, createEffect as X, onCleanup as tt, Show as S, For as st, untrack as Xe } from "solid-js";
+import { Motion as Z, Presence 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 pt, duration as j } from "../../utils/animations.js";
+import { startHotInteraction as Ho } from "../../utils/hotInteraction.js";
+import { X as _t, Plus as bt, Check as Ye, Pencil as ze, Trash as ee, Minus as Be, Layers as Fe, GripVertical as Zo, Paste as Re } from "../icons/index.js";
+import { visibleWorldRect as jo, mergeBoardBounds as Ko, computeBoardBounds as Go, NOTES_SCALE_MAX as Uo, NOTES_SCALE_MIN as qo } from "./types.js";
+import { useNotification as Jo } from "../../context/NotificationContext.js";
+import { Input as Ve, Textarea as We } from "../ui/Input.js";
+import { InfiniteCanvas as Qo } from "../ui/InfiniteCanvas.js";
+import { Button as Ft } from "../ui/Button.js";
+var tn = /* @__PURE__ */ g('<svg viewBox="0 0 32 32"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M10 8.5h12"></path><path d="M13 5.5h6"></path><path d="M11.5 8.5h9a1.2 1.2 0 0 1 1.2 1.3l-1 13.1a2.1 2.1 0 0 1-2.1 1.9h-5.2a2.1 2.1 0 0 1-2.1-1.9l-1-13.1a1.2 1.2 0 0 1 1.2-1.3Z"></path><path d="M14 12.5v7.2"></path><path d="M18 12.5v7.2"></path><path d="M8 8.5h16">'), en = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M8.5 18.1c0-3.2 1.6-5.2 3.5-5.2s3.5 2 3.5 5.2"></path><path d="M9.5 12.2 8.3 5.3c-.2-1 .3-1.8 1.1-2 .8-.2 1.5.3 1.7 1.2l.8 4.9"></path><path d="m14.5 12.2 1.1-6.6c.2-.9.9-1.4 1.7-1.2.8.2 1.3 1 1.1 2l-1.1 5.8"></path><path d="M10 16.2h.01"></path><path d="M14 16.2h.01"></path><path d="M11.2 18.1c.3.4.7.6 1.2.6s.9-.2 1.2-.6">'), on = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="m8.3 8-2.2-3.7 4.1 1.9"></path><path d="m15.7 8 2.2-3.7-4.1 1.9"></path><path d="M12 19.3c-3.7 0-6-2.7-6-6.3 0-1.7.6-3.3 2.3-5L12 10.9 15.7 8c1.7 1.7 2.3 3.3 2.3 5 0 3.6-2.3 6.3-6 6.3Z"></path><path d="M10 14.6h.01"></path><path d="M14 14.6h.01"></path><path d="M10.8 17c.4.3.8.5 1.2.5s.8-.2 1.2-.5">'), nn = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M7.4 18.4c0-3.9 2-6.3 4.6-6.3s4.6 2.4 4.6 6.3"></path><path d="M9 11.2 7.7 8.4l2.7.7"></path><path d="m15 11.2 1.3-2.8-2.7.7"></path><path d="M10 15.1h.01"></path><path d="M14 15.1h.01"></path><path d="M12 16.2c.7 0 1.2-.4 1.2-1s-.5-1-1.2-1-1.2.4-1.2 1 .5 1 1.2 1Z"></path><path d="M7.3 15.7 5 15.1"></path><path d="m16.7 15.7 2.3-.6">'), rn = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M5.5 12c2.2-3.2 5-4.8 8.3-4.8 3.2 0 4.7 2.1 4.7 4.8s-1.5 4.8-4.7 4.8c-3.3 0-6.1-1.6-8.3-4.8Z"></path><path d="m5.5 12-2.8-2.7v5.4Z"></path><path d="M15.9 10.1h.01"></path><path d="M11.7 12c1.1 0 2 .9 2 2"></path><path d="M11.7 12c1.1 0 2-.9 2-2">'), an = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M4 12.8c2.7-3.6 5.6-5.4 8.5-5.4 1.8 0 3.4.6 4.9 1.8"></path><path d="M20 11.2c-2.7 3.6-5.6 5.4-8.5 5.4-1.8 0-3.4-.6-4.9-1.8"></path><path d="m13.4 11.2 6.1-.8-3.7 3.8"></path><path d="m10.6 12.8-6.1.8 3.7-3.8">'), sn = /* @__PURE__ */ g('<svg viewBox="0 0 24 24"fill=none stroke=currentColor stroke-width=1.7 stroke-linecap=round stroke-linejoin=round aria-hidden=true><path d="M8.5 18.6c0-3.8 1.8-5.9 4.2-5.9 2.6 0 3.8 2.1 3.8 5.9"></path><path d="M12.6 12.7V8.6c0-2.2 1.5-4.2 4.1-4.2h2"></path><path d="m18.7 4.4 2.2-1.5"></path><path d="M9 12.7 7.1 10"></path><path d="M10.2 15.5h.01"></path><path d="M14.1 15.5h.01">'), ln = /* @__PURE__ */ g('<div class=notes-overview__controls><div class=notes-overview__zoom-group><button type=button class=notes-overview__zoom-button aria-label="Zoom out"></button><button type=button class=notes-overview__zoom-button aria-label="Zoom in"></button></div><button type=button class=notes-overview__close aria-label="Close overview">'), cn = /* @__PURE__ */ g("<div data-floe-canvas-interactive=true><div class=notes-overview__surface data-floe-canvas-interactive=true><div class=notes-overview__grid aria-hidden=true></div><div class=notes-overview__viewport></div><div class=notes-overview__hud aria-hidden=true><div class=notes-overview__scale>"), He = /* @__PURE__ */ g("<div>"), dn = /* @__PURE__ */ g('<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">'), un = /* @__PURE__ */ g('<button type=button class=notes-overlay__hud-button aria-label="Open overview map">'), hn = /* @__PURE__ */ g("<div class=notes-page__mobile-toolbar><div class=notes-page__mobile-topics>"), vn = /* @__PURE__ */ g("<div class=notes-canvas__field>"), pn = /* @__PURE__ */ g('<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'), _n = /* @__PURE__ */ g("<button type=button class=notes-trash__toggle><div class=notes-trash__toggle-mark>"), fn = /* @__PURE__ */ g('<div class=notes-overlay__body><aside class=notes-overlay__rail data-floe-canvas-interactive=true><section class=notes-overlay__rail-header><div class=notes-overlay__rail-heading>Topics</div><div class=notes-overlay__rail-total></div></section><form class="notes-topic-composer notes-overlay__topic-composer"data-floe-canvas-interactive=true><button type=submit class=notes-topic-composer__button aria-label="Add topic"></button></form><div class=notes-topic-list data-floe-canvas-interactive=true></div></aside><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></div><div class=notes-trash data-floe-canvas-interactive=true>'), gn = /* @__PURE__ */ g("<div class=notes-trash__sections>"), wn = /* @__PURE__ */ g('<div class=notes-trash__panel><div class=notes-trash__panel-header><div class=notes-trash__panel-title-group><div class=notes-trash__panel-title-row><div class=notes-trash__panel-title>Trash Dock</div><div class=notes-trash__panel-header-actions><div class=notes-trash__panel-count> items</div><button type=button class=notes-trash__panel-close aria-label="Close trash dock"></button></div></div><div class=notes-trash__panel-body>Grouped by topic, sorted by latest deletion, and recoverable for 72 hours.'), mn = /* @__PURE__ */ g("<button type=button class=notes-menu__item><span>Paste here"), $n = /* @__PURE__ */ g("<button type=button class=notes-menu__item><span>New note"), bn = /* @__PURE__ */ g('<button type=button class="notes-menu__item is-danger"><span>Delete'), yn = /* @__PURE__ */ g('<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">'), xn = /* @__PURE__ */ g("<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"), Ze = /* @__PURE__ */ g("<div class=notes-flyout__footer>"), Cn = /* @__PURE__ */ g('<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">'), Tn = /* @__PURE__ */ g("<div class=notes-flyout__body>"), kn = /* @__PURE__ */ g('<form class=notes-topic-row__editor><button type=submit class=notes-topic-row__edit-button aria-label="Save topic name"></button><button type=button class=notes-topic-row__edit-button aria-label="Cancel topic edit">'), In = /* @__PURE__ */ g('<div role=button tabindex=0><div></div><div class=notes-topic-row__copy><div class=notes-topic-row__meta> live note</div></div><div class=notes-topic-row__tail><div class=notes-topic-row__count></div><button type=button class=notes-topic-row__edit></button><button type=button class="notes-topic-row__edit notes-topic-row__delete">'), Sn = /* @__PURE__ */ g("<div class=notes-topic-row__title-line><div class=notes-topic-row__title>"), Nn = /* @__PURE__ */ g("<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"), Mn = /* @__PURE__ */ g("<button type=button class=notes-page__mobile-topic>"), En = /* @__PURE__ */ g("<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"), Ln = /* @__PURE__ */ g('<article><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>'), An = /* @__PURE__ */ g("<div class=notes-trash__empty><div><strong>Trash is empty</strong><span>Deleted notes from any topic will appear here."), Pn = /* @__PURE__ */ g("<section class=notes-trash-section><div class=notes-trash-section__header><div class=notes-trash-section__title-group><div class=notes-trash-section__title-line><div></div><div class=notes-trash-section__title></div></div><div class=notes-trash-section__meta> deleted note</div></div><button type=button class=notes-trash-section__clear>Clear topic trash</button></div><div class=notes-trash-section__grid>"), On = /* @__PURE__ */ g("<button type=button class=is-danger>Delete now"), Dn = /* @__PURE__ */ g("<article><div class=notes-note__surface><div class=notes-trash-note__meta><span></span><strong></strong></div><div class=notes-trash-note__body><span></span></div><div class=notes-trash-note__actions><button type=button>Restore"), Xn = /* @__PURE__ */ g("<button type=button><span>");
+const Yn = [{
+  id: "butter",
+  name: "Butter",
+  token: "amber"
+}, {
+  id: "blush",
+  name: "Blush",
+  token: "rose"
+}, {
+  id: "moss",
+  name: "Moss",
+  token: "sage"
+}, {
+  id: "mist",
+  name: "Mist",
+  token: "azure"
+}, {
+  id: "sand",
+  name: "Sand",
+  token: "graphite"
+}, {
+  id: "coral",
+  name: "Coral",
+  token: "coral"
+}], oe = {
+  0: {
+    width: 196,
+    height: 134,
+    previewLimit: 68
+  },
+  1: {
+    width: 214,
+    height: 148,
+    previewLimit: 90
+  },
+  2: {
+    width: 232,
+    height: 164,
+    previewLimit: 112
+  },
+  3: {
+    width: 248,
+    height: 182,
+    previewLimit: 138
+  },
+  4: {
+    width: 266,
+    height: 202,
+    previewLimit: 164
+  }
+}, zn = 4320 * 60 * 1e3, Bn = qo, Fn = Uo, je = 1.18, ne = 1280, ie = 880, Rn = 960;
+function Vn(n) {
+  return String(n ?? "").replace(/\r\n/g, `
+`).trim();
+}
+function Ke(n, _ = 90) {
+  const p = Vn(n).replace(/\n{3,}/g, `
+
+`);
+  return p ? p.length <= _ ? p : `${p.slice(0, Math.max(0, _ - 1)).trimEnd()}…` : "Empty note";
+}
+function Qe(n) {
+  switch (n) {
+    case "amber":
+      return "butter";
+    case "rose":
+      return "blush";
+    case "sage":
+      return "moss";
+    case "azure":
+      return "mist";
+    case "coral":
+      return "coral";
+    default:
+      return "sand";
+  }
+}
+function Ge(n) {
+  switch (n) {
+    case "butter":
+      return "amber";
+    case "blush":
+      return "rose";
+    case "moss":
+      return "sage";
+    case "mist":
+      return "azure";
+    case "coral":
+      return "coral";
+    default:
+      return "graphite";
+  }
+}
+function to(n) {
+  switch (n) {
+    case "hare":
+      return "hare";
+    case "fox":
+      return "fox";
+    case "otter":
+      return "otter";
+    case "crane":
+      return "crane";
+    case "whale":
+      return "koi";
+    default:
+      return "swallow";
+  }
+}
+function eo(n) {
+  switch (n) {
+    case "gold":
+      return "amber";
+    case "ember":
+      return "coral";
+    case "moss":
+      return "mint";
+    case "sea":
+      return "sky";
+    case "ink":
+      return "plum";
+    default:
+      return "rose";
+  }
+}
+function oo(n) {
+  const _ = Math.round(Number(n) || 1);
+  return _ <= 1 ? 0 : _ >= 5 ? 4 : _ - 1;
+}
+function re(n) {
+  return {
+    id: n.topic_id,
+    title: n.name,
+    iconId: to(n.icon_key),
+    toneId: eo(n.icon_accent),
+    deletedAt: n.deleted_at_unix_ms > 0 ? n.deleted_at_unix_ms : null,
+    createdAt: n.created_at_unix_ms
+  };
+}
+function yt(n) {
+  return {
+    id: n.note_id,
+    topicId: n.topic_id,
+    text: n.body,
+    colorId: Qe(n.color_token),
+    x: n.x,
+    y: n.y,
+    layer: n.z_index,
+    createdAt: n.created_at_unix_ms,
+    updatedAt: n.updated_at_unix_ms,
+    deletedAt: null,
+    sizeBucket: oo(n.size_bucket)
+  };
+}
+function Wn(n) {
+  return {
+    id: n.note_id,
+    topicId: n.topic_id,
+    text: n.body,
+    colorId: Qe(n.color_token),
+    x: n.x,
+    y: n.y,
+    layer: n.z_index,
+    createdAt: n.created_at_unix_ms,
+    updatedAt: n.updated_at_unix_ms,
+    deletedAt: n.deleted_at_unix_ms,
+    sizeBucket: oo(n.size_bucket),
+    topicName: n.topic_name,
+    topicIconId: to(n.topic_icon_key),
+    topicToneId: eo(n.topic_icon_accent),
+    topicSortOrder: n.topic_sort_order
+  };
+}
+function K(n, _, p) {
+  return Math.max(_, Math.min(p, n));
+}
+function Ue(n, _, p, Y) {
+  const B = Y - p;
+  return !Number.isFinite(B) || B <= 0 ? n : _ >= B ? p + B / 2 : K(n, p + _ / 2, Y - _ / 2);
+}
+function qe(n, _, p) {
+  return {
+    x: K((n - p.left) / p.width, 0, 1),
+    y: K((_ - p.top) / p.height, 0, 1)
+  };
+}
+function Je(n) {
+  return (() => {
+    var _ = tn();
+    return N(() => G(_, "class", n.class)), _;
+  })();
+}
+function Hn(n, _ = Date.now()) {
+  if (n === null) return "Restored";
+  const p = Math.max(0, zn - (_ - n)), Y = Math.ceil(p / (3600 * 1e3));
+  if (Y >= 24) {
+    const B = Math.floor(Y / 24), ft = Y % 24;
+    return ft === 0 ? `${B}d left` : `${B}d ${ft}h left`;
+  }
+  return `${Math.max(1, Y)}h left`;
+}
+function Zn(n) {
+  return n === null ? "Restored" : new Intl.DateTimeFormat(void 0, {
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit"
+  }).format(n);
+}
+function ae(n) {
+  const _ = y(() => {
+    switch (n.iconId) {
+      case "hare":
+        return (() => {
+          var p = en();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+      case "fox":
+        return (() => {
+          var p = on();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+      case "otter":
+        return (() => {
+          var p = nn();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+      case "koi":
+        return (() => {
+          var p = rn();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+      case "swallow":
+        return (() => {
+          var p = an();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+      default:
+        return (() => {
+          var p = sn();
+          return N(() => G(p, "class", n.class)), p;
+        })();
+    }
+  });
+  return se(_);
+}
+function ii(n) {
+  const _ = Jo(), [p, Y] = L(null), [B, ft] = L(""), [Rt, Vt] = L(null), [le, xt] = L(""), [ce, Ct] = L(null), [de, ue] = L(""), [he, ve] = L("butter"), [gt, Tt] = L(!1), [kt, F] = L(!1), [no, pe] = L(null), [_e, lt] = L(null), [It, ct] = L(""), [io, Wt] = L(null), [St, Nt] = L(null), [Mt, ro] = L({
+    width: 0,
+    height: 0
+  }), [ao, so] = L(Date.now());
+  let wt, et, Ht, Zt = null, Et;
+  const [dt, lo] = L(!1), Lt = y(() => n.controller.snapshot()), At = y(() => Lt().topics.map(re)), jt = y(() => Lt().items.map(yt)), Kt = y(() => Lt().trash_items.map(Wn)), fe = y(() => n.controller.activeTopicID()), ge = (t) => At().find((e) => e.id === t), co = (t) => jt().find((e) => e.id === t), uo = (t, e) => {
+    const o = jt().filter((a) => a.topicId === t);
+    return e?.includeDeleted ? [...o, ...Kt().filter((a) => a.topicId === t)] : o;
+  }, ho = (t) => jt().reduce((e, o) => e + (o.topicId === t ? 1 : 0), 0), mt = y(() => {
+    const t = fe();
+    return At().some((e) => e.id === t) ? t : At()[0]?.id ?? "";
+  }), c = {
+    topics: At,
+    activeTopicId: mt,
+    activeTopic: () => ge(mt()),
+    activeViewport: () => n.controller.viewport(),
+    trashedNotes: Kt,
+    trashCount: () => Kt().length,
+    colorOptions: Yn,
+    getTopic: ge,
+    getViewport: (t) => n.controller.viewport(),
+    getNotesForTopic: uo,
+    getNoteById: co,
+    getLiveNoteCount: ho,
+    createTopic: async (t) => {
+      const e = await n.controller.createTopic({
+        name: t.trim()
+      });
+      return re(e);
+    },
+    updateTopic: async (t, e) => {
+      const o = await n.controller.updateTopic(t, {
+        name: String(e.title ?? "").trim()
+      });
+      return re(o);
+    },
+    deleteTopic: (t) => n.controller.deleteTopic(t),
+    setActiveTopic: (t) => n.controller.setActiveTopicID(t),
+    setViewport: (t, e) => n.controller.setViewport(e),
+    createNote: async (t) => {
+      const e = t.topicId ?? mt();
+      if (!e) return;
+      const o = await n.controller.createNote({
+        topic_id: e,
+        x: t.x,
+        y: t.y,
+        body: t.text ?? "",
+        color_token: t.colorId ? Ge(t.colorId) : void 0
+      });
+      return yt(o);
+    },
+    updateNote: async (t, e) => {
+      const o = await n.controller.updateNote(t, {
+        body: e.text,
+        color_token: e.colorId ? Ge(e.colorId) : void 0
+      });
+      return yt(o);
+    },
+    moveNote: async (t, e) => {
+      const o = await n.controller.updateNote(t, {
+        x: e.x,
+        y: e.y
+      });
+      return yt(o);
+    },
+    bringNoteToFront: (t) => n.controller.bringNoteToFront(t),
+    trashNote: (t) => n.controller.deleteNote(t),
+    restoreNote: async (t) => {
+      const e = await n.controller.restoreNote(t);
+      return yt(e);
+    },
+    deleteNotePermanently: (t) => n.controller.deleteTrashedNotePermanently?.(t),
+    clearTrashForTopic: (t) => n.controller.clearTrashTopic(t)
+  }, U = y(() => c.activeTopic()), we = y(() => c.activeTopicId()), Pt = y(() => {
+    const t = U();
+    return t ? c.getNotesForTopic(t.id).slice().sort((e, o) => e.layer - o.layer || e.createdAt - o.createdAt) : [];
+  }), vo = y(() => c.trashedNotes()), Gt = y(() => {
+    const t = ce();
+    return t ? c.getNoteById(t) : void 0;
+  }), me = y(() => c.topics().reduce((t, e) => t + c.getLiveNoteCount(e.id), 0)), po = y(() => U()?.title ?? "No topic"), $e = y(() => `${Math.round(c.activeViewport().scale * 100)}%`), _o = y(() => Pt().reduce((t, e) => Math.max(t, e.layer), 1)), fo = y(() => Lt().items.filter((t) => t.topic_id === mt()).slice().sort((t, e) => t.z_index - e.z_index || t.created_at_unix_ms - e.created_at_unix_ms || t.note_id.localeCompare(e.note_id))), Ut = y(() => {
+    const t = c.activeViewport(), e = Mt(), o = (e.width > 0 ? e.width : ne) / t.scale, a = (e.height > 0 ? e.height : ie) / t.scale;
+    return {
+      worldLeft: -t.x / t.scale,
+      worldTop: -t.y / t.scale,
+      worldWidth: o,
+      worldHeight: a
+    };
+  }), go = y(() => {
+    const t = U();
+    return t ? c.getNotesForTopic(t.id).map((e) => ({
+      id: e.id,
+      colorId: e.colorId,
+      x: e.x,
+      y: e.y,
+      sizeBucket: e.sizeBucket
+    })) : [];
+  }), Ot = y(() => {
+    const t = Mt(), e = jo(c.activeViewport(), t.width > 0 ? t.width : ne, t.height > 0 ? t.height : ie), o = Ko(Go(fo()), e);
+    return {
+      minX: o.minX,
+      minY: o.minY,
+      maxX: o.maxX,
+      maxY: o.maxY,
+      width: o.maxX - o.minX,
+      height: o.maxY - o.minY
+    };
+  }), wo = y(() => {
+    const t = Ot();
+    return go().map((o) => {
+      const a = oe[o.sizeBucket];
+      return {
+        id: o.id,
+        colorId: o.colorId,
+        x: (o.x - t.minX) / t.width * 100,
+        y: (o.y - t.minY) / t.height * 100,
+        width: a.width / t.width * 100,
+        height: a.height / t.height * 100
+      };
+    });
+  }), be = y(() => {
+    const t = Ot(), e = Ut(), o = K(e.worldLeft, t.minX, t.maxX), a = K(e.worldTop, t.minY, t.maxY), v = K(e.worldLeft + e.worldWidth, t.minX, t.maxX), f = K(e.worldTop + e.worldHeight, t.minY, t.maxY), w = Math.max((v - o) / t.width * 100, 6), d = Math.max((f - a) / t.height * 100, 8), s = (o - t.minX) / t.width * 100, l = (a - t.minY) / t.height * 100;
+    return {
+      left: s,
+      top: l,
+      width: w,
+      height: d,
+      centerX: s + w / 2,
+      centerY: l + d / 2
+    };
+  }), mo = y(() => {
+    const t = be();
+    return {
+      left: `${t.left}%`,
+      top: `${t.top}%`,
+      width: `${t.width}%`,
+      height: `${t.height}%`
+    };
+  }), ye = y(() => {
+    const t = /* @__PURE__ */ new Map();
+    for (const e of vo()) {
+      const o = c.getTopic(e.topicId) ?? {
+        id: e.topicId,
+        title: e.topicName,
+        iconId: e.topicIconId,
+        toneId: e.topicToneId,
+        deletedAt: e.deletedAt,
+        createdAt: e.createdAt
+      }, a = t.get(o.id);
+      if (a) {
+        a.notes.push(e), a.latestDeletedAt = Math.max(a.latestDeletedAt, e.deletedAt);
+        continue;
+      }
+      t.set(o.id, {
+        topic: o,
+        notes: [e],
+        latestDeletedAt: e.deletedAt
+      });
+    }
+    return Array.from(t.values()).map((e) => ({
+      ...e,
+      notes: e.notes.slice().sort((o, a) => (a.deletedAt ?? 0) - (o.deletedAt ?? 0))
+    })).sort((e, o) => o.latestDeletedAt - e.latestDeletedAt || ("topicSortOrder" in e.notes[0] ? e.notes[0].topicSortOrder : 0) - ("topicSortOrder" in o.notes[0] ? o.notes[0].topicSortOrder : 0));
+  }), $o = y(() => {
+    const t = p();
+    if (!t) return;
+    const e = 224, o = t.noteId ? 184 : 132, a = typeof window > "u" ? t.clientX : window.innerWidth - e, v = typeof window > "u" ? t.clientY : window.innerHeight - o;
+    return {
+      left: `${Math.max(16, Math.min(t.clientX, a))}px`,
+      top: `${Math.max(16, Math.min(t.clientY, v))}px`
+    };
+  }), z = () => Y(null), ut = () => Tt(!1), bo = () => {
+    z(), ut(), F(!1), Vt(null), xt(""), Ct(null), lt(null), ct(""), n.onClose();
+  }, Dt = () => {
+    Ht?.abort(), Ht = void 0, pe(null);
+  }, qt = () => {
+    wt !== void 0 && (window.clearTimeout(wt), wt = void 0);
+  };
+  X(() => {
+    if (typeof window > "u") return;
+    const t = () => {
+      lo(window.innerWidth < Rn);
+    };
+    t(), window.addEventListener("resize", t), tt(() => window.removeEventListener("resize", t));
+  }), X(() => {
+    const t = mt();
+    t && fe() !== t && n.controller.setActiveTopicID(t);
+  }), X(() => {
+    n.open || (z(), ut(), F(!1), Ct(null), lt(null));
+  }), X(() => {
+    const t = Gt();
+    if (!t) {
+      Zt = null;
+      return;
+    }
+    Zt !== t.id && (Zt = t.id, ue(t.text), ve(t.colorId));
+  }), X(() => {
+    we(), z();
+  }), X(() => {
+    gt() && z();
+  }), X(() => {
+    if (!p()) return;
+    const e = () => z();
+    window.addEventListener("resize", e), window.addEventListener("scroll", e, !0), tt(() => {
+      window.removeEventListener("resize", e), window.removeEventListener("scroll", e, !0);
+    });
+  }), X(() => {
+    const t = Et;
+    if (!t) return;
+    const e = () => {
+      ro({
+        width: t.clientWidth,
+        height: t.clientHeight
+      });
+    };
+    if (e(), typeof ResizeObserver > "u") {
+      window.addEventListener("resize", e), tt(() => window.removeEventListener("resize", e));
+      return;
+    }
+    const o = new ResizeObserver(e);
+    o.observe(t), tt(() => o.disconnect());
+  }), X(() => {
+    if (typeof window > "u") return;
+    const t = window.setInterval(() => so(Date.now()), 60 * 1e3);
+    tt(() => window.clearInterval(t));
+  }), X(() => {
+    if (!gt()) return;
+    const t = (e) => {
+      e.key === "Escape" && ut();
+    };
+    window.addEventListener("keydown", t), tt(() => window.removeEventListener("keydown", t));
+  }), X(() => {
+    if (!dt()) {
+      F(!1);
+      return;
+    }
+    if (!kt()) return;
+    const t = (e) => {
+      e.key === "Escape" && F(!1);
+    };
+    window.addEventListener("keydown", t), tt(() => window.removeEventListener("keydown", t));
+  }), X(() => {
+    kt() || Dt();
+  }), tt(() => {
+    qt(), et?.(), Dt();
+  });
+  const yo = (t) => {
+    qt(), Wt(t), wt = window.setTimeout(() => {
+      wt = void 0, Wt((e) => e === t ? null : e);
+    }, 1100);
+  }, Xt = (t) => {
+    Promise.resolve(c.bringNoteToFront(t)).catch(() => {
+    });
+  }, xo = async (t) => {
+    t.preventDefault();
+    const e = B().trim();
+    if (e)
+      try {
+        const o = await c.createTopic(e);
+        ft(""), c.setActiveTopic(o.id);
+      } catch (o) {
+        _.error("Topic failed", o instanceof Error ? o.message : String(o));
+      }
+  }, Co = (t) => {
+    Vt(t.id), xt(t.title);
+  }, Yt = () => {
+    Vt(null), xt("");
+  }, To = async () => {
+    const t = Rt();
+    if (!t) return;
+    const e = le().trim();
+    if (Yt(), !!e)
+      try {
+        await c.updateTopic(t, {
+          title: e
+        });
+      } catch (o) {
+        _.error("Rename failed", o instanceof Error ? o.message : String(o));
+      }
+  }, ko = async (t) => {
+    const e = c.getNotesForTopic(t.id, {
+      includeDeleted: !0
+    }).length;
+    Rt() === t.id && Yt();
+    try {
+      if (await c.deleteTopic(t.id) === !1) {
+        _.info("Keep one topic", "At least one topic needs to remain available.");
+        return;
+      }
+      if (e > 0) {
+        Tt(!0), _.success("Topic deleted", "Live notes moved into trash for this topic.");
+        return;
+      }
+      _.success("Topic deleted", "The empty topic was removed.");
+    } catch (o) {
+      _.error("Delete failed", o instanceof Error ? o.message : String(o));
+    }
+  }, Jt = (t) => {
+    z(), Ct(t);
+  }, Qt = () => {
+    Ct(null);
+  }, Io = async () => {
+    const t = ce();
+    if (t)
+      try {
+        await c.updateNote(t, {
+          text: de(),
+          colorId: he()
+        }), _.success("Saved", "Note updated."), Qt();
+      } catch (e) {
+        _.error("Save failed", e instanceof Error ? e.message : String(e));
+      }
+  }, xe = async (t) => {
+    try {
+      const e = await c.createNote({
+        topicId: t.topicId,
+        x: t.worldX,
+        y: t.worldY
+      });
+      if (!e) return;
+      Jt(e.id);
+    } catch (e) {
+      _.error("Create failed", e instanceof Error ? e.message : String(e));
+    }
+  }, Ce = async (t, e) => {
+    try {
+      if (!await c.createNote({
+        topicId: t.topicId,
+        x: t.worldX,
+        y: t.worldY,
+        text: e
+      })) return;
+      _.success("Pasted", "Created a new note from clipboard text.");
+    } catch (o) {
+      _.error("Paste failed", o instanceof Error ? o.message : String(o));
+    }
+  }, So = (t, e, o = U()?.id) => {
+    if (!o) return null;
+    const a = c.getTopic(o);
+    if (!a || a.deletedAt !== null) return null;
+    const v = Et;
+    if (!v) return te();
+    const f = v.getBoundingClientRect();
+    if (f.width <= 0 || f.height <= 0 || t < f.left || t > f.right || e < f.top || e > f.bottom)
+      return null;
+    const w = c.getViewport(a.id);
+    return {
+      topicId: a.id,
+      worldX: (t - f.left - w.x) / w.scale,
+      worldY: (e - f.top - w.y) / w.scale
+    };
+  }, Te = (t, e, o) => {
+    const a = So(t, e, o?.topicId);
+    return a ? (Y({
+      clientX: t,
+      clientY: e,
+      worldX: a.worldX,
+      worldY: a.worldY,
+      topicId: a.topicId,
+      noteId: o?.noteId ?? null
+    }), !0) : !1;
+  }, te = () => {
+    const t = U();
+    if (!t) return null;
+    const e = Mt();
+    if (e.width <= 0 || e.height <= 0) {
+      const a = Ut();
+      return {
+        topicId: t.id,
+        worldX: a.worldLeft + a.worldWidth / 2,
+        worldY: a.worldTop + a.worldHeight / 2
+      };
+    }
+    const o = c.activeViewport();
+    return {
+      topicId: t.id,
+      worldX: (e.width / 2 - o.x) / o.scale,
+      worldY: (e.height / 2 - o.y) / o.scale
+    };
+  }, ke = (t, e, o = c.activeViewport().scale) => {
+    const a = U();
+    if (!a) return;
+    const v = Mt(), f = v.width || (typeof window > "u" ? ne : window.innerWidth), w = v.height || (typeof window > "u" ? ie : window.innerHeight), d = f / o, s = w / o, l = Ot(), $ = Ue(t, d, l.minX, l.maxX), k = Ue(e, s, l.minY, l.maxY);
+    c.setViewport(a.id, {
+      x: f / 2 - $ * o,
+      y: w / 2 - k * o,
+      scale: o
+    });
+  }, zt = (t) => {
+    const e = c.activeViewport(), o = K(e.scale * (t === "in" ? je : 1 / je), Bn, Fn);
+    if (Math.abs(o - e.scale) < 1e-3) return;
+    const a = Ut(), v = a.worldLeft + a.worldWidth / 2, f = a.worldTop + a.worldHeight / 2;
+    ke(v, f, o);
+  }, Ie = async (t) => {
+    try {
+      const e = await navigator.clipboard.readText();
+      if (!e.trim()) {
+        _.info("Clipboard empty", "Paste text into the dialog to create a note."), Se(t);
+        return;
+      }
+      await Ce(t, e);
+    } catch (e) {
+      console.error(e), _.info("Clipboard blocked", "Manual paste is available as a fallback."), Se(t);
+    }
+  }, No = async () => {
+    const t = p();
+    t && (z(), await xe(t));
+  }, Se = (t) => {
+    ct(""), lt(t);
+  }, Mo = async () => {
+    const t = p();
+    t && (z(), await Ie(t));
+  }, Ne = async (t) => {
+    try {
+      await c.trashNote(t), qt(), Wt((e) => e === t ? null : e), Tt(!0);
+    } catch (e) {
+      _.error("Delete failed", e instanceof Error ? e.message : String(e));
+    }
+  }, Eo = async (t) => {
+    try {
+      await c.restoreNote(t);
+    } catch (e) {
+      _.error("Restore failed", e instanceof Error ? e.message : String(e));
+    }
+  }, Lo = async (t) => {
+    if (n.controller.deleteTrashedNotePermanently)
+      try {
+        await c.deleteNotePermanently(t);
+      } catch (e) {
+        _.error("Delete failed", e instanceof Error ? e.message : String(e));
+      }
+  }, Ao = async (t) => {
+    try {
+      await c.clearTrashForTopic(t);
+    } catch (e) {
+      _.error("Trash failed", e instanceof Error ? e.message : String(e));
+    }
+  }, Po = async () => {
+    const t = p();
+    t?.noteId && (z(), await Ne(t.noteId));
+  }, Oo = async () => {
+    const t = te();
+    t && (F(!1), await xe(t));
+  }, Do = async () => {
+    const t = te();
+    t && (F(!1), await Ie(t));
+  }, Xo = (t, e, o) => {
+    const a = o.surfaceRect;
+    if (a.width <= 0 || a.height <= 0) return;
+    const v = qe(t, e, a), f = K(v.x - o.centerOffsetX, 0, 1), w = K(v.y - o.centerOffsetY, 0, 1), d = o.bounds;
+    ke(d.minX + f * d.width, d.minY + w * d.height);
+  }, Yo = (t) => {
+    if (t.button !== 0 && t.pointerType !== "touch" && t.pointerType !== "pen") return;
+    const e = t.currentTarget, o = e.getBoundingClientRect();
+    if (o.width <= 0 || o.height <= 0) return;
+    const a = qe(t.clientX, t.clientY, o), v = be(), f = a.x * 100, w = a.y * 100, d = f >= v.left && f <= v.left + v.width && w >= v.top && w <= v.top + v.height, s = {
+      pointerId: t.pointerId,
+      bounds: Ot(),
+      surfaceRect: o,
+      centerOffsetX: d ? a.x - v.centerX / 100 : 0,
+      centerOffsetY: d ? a.y - v.centerY / 100 : 0
+    }, l = (A, R) => Xo(A, R, s);
+    Dt(), t.preventDefault(), t.stopPropagation(), pe(s), l(t.clientX, t.clientY), e.setPointerCapture?.(t.pointerId);
+    const $ = new AbortController();
+    Ht = $;
+    const k = (A) => {
+      A.pointerId === t.pointerId && l(A.clientX, A.clientY);
+    }, D = (A) => {
+      A.pointerId === t.pointerId && (e.hasPointerCapture?.(t.pointerId) && e.releasePointerCapture(t.pointerId), Dt());
+    };
+    e.addEventListener("pointermove", k, {
+      signal: $.signal
+    }), e.addEventListener("pointerup", D, {
+      once: !0,
+      signal: $.signal
+    }), e.addEventListener("pointercancel", D, {
+      once: !0,
+      signal: $.signal
+    });
+  }, zo = async () => {
+    const t = _e();
+    !t || !It().trim() || (await Ce(t, It()), lt(null), ct(""));
+  }, Bo = async (t) => {
+    if (!t.text.trim()) {
+      Jt(t.id);
+      return;
+    }
+    try {
+      Xt(t.id), await navigator.clipboard.writeText(t.text), yo(t.id);
+    } catch (e) {
+      console.error(e), _.error("Copy failed", "Clipboard write was not available.");
+    }
+  }, Fo = (t, e) => {
+    if (e.button !== 0) return;
+    z(), e.preventDefault(), e.stopPropagation(), et?.(), Xt(t.id);
+    const o = Ho({
+      kind: "drag",
+      cursor: "grabbing"
+    }), a = Math.max(c.activeViewport().scale, 1e-3);
+    Nt({
+      noteId: t.id,
+      startClientX: e.clientX,
+      startClientY: e.clientY,
+      startX: t.x,
+      startY: t.y,
+      currentX: t.x,
+      currentY: t.y,
+      moved: !1,
+      scale: a,
+      stopInteraction: o
+    });
+    const v = (d) => {
+      Nt((s) => {
+        if (!s || s.noteId !== t.id) return s;
+        const l = s.startX + (d.clientX - s.startClientX) / s.scale, $ = s.startY + (d.clientY - s.startClientY) / s.scale, k = s.moved || Math.abs(l - s.startX) > 2 || Math.abs($ - s.startY) > 2;
+        return {
+          ...s,
+          currentX: l,
+          currentY: $,
+          moved: k
+        };
+      });
+    }, f = () => {
+      const d = Xe(St);
+      d && d.noteId === t.id && (c.moveNote(t.id, {
+        x: d.currentX,
+        y: d.currentY
+      }).catch((s) => {
+        _.error("Move failed", s instanceof Error ? s.message : String(s));
+      }), d.stopInteraction()), Nt(null), et?.(), et = void 0;
+    }, w = () => {
+      const d = Xe(St);
+      d && d.noteId === t.id && d.stopInteraction(), Nt(null), et?.(), et = void 0;
+    };
+    window.addEventListener("pointermove", v), window.addEventListener("pointerup", f, {
+      once: !0
+    }), window.addEventListener("pointercancel", w, {
+      once: !0
+    }), et = () => {
+      window.removeEventListener("pointermove", v), window.removeEventListener("pointerup", f), window.removeEventListener("pointercancel", w);
+    };
+  }, Me = (t) => (() => {
+    var e = cn(), o = e.firstChild, a = o.firstChild, v = a.nextSibling, f = v.nextSibling, w = f.firstChild;
+    return e.$$pointerdown = (d) => d.stopPropagation(), Q(e, `notes-overview notes-overview--${t}`), o.$$pointerdown = Yo, i(o, r(st, {
+      get each() {
+        return wo();
+      },
+      children: (d) => (() => {
+        var s = He();
+        return N((l) => {
+          var $ = `notes-overview__note notes-note--${d.colorId}`, k = `${d.x}%`, D = `${d.y}%`, A = `${d.width}%`, R = `${d.height}%`;
+          return $ !== l.e && Q(s, l.e = $), k !== l.t && H(s, "left", l.t = k), D !== l.a && H(s, "top", l.a = D), A !== l.o && H(s, "width", l.o = A), R !== l.i && H(s, "height", l.i = R), l;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0,
+          o: void 0,
+          i: void 0
+        }), s;
+      })()
+    }), v), i(w, $e), i(o, r(S, {
+      when: t === "mobile",
+      get children() {
+        var d = ln(), s = d.firstChild, l = s.firstChild, $ = l.nextSibling, k = s.nextSibling;
+        return l.$$click = () => zt("out"), i(l, r(Be, {
+          class: "w-3.5 h-3.5"
+        })), $.$$click = () => zt("in"), i($, r(bt, {
+          class: "w-3.5 h-3.5"
+        })), k.$$click = () => F(!1), i(k, r(_t, {
+          class: "w-4 h-4"
+        })), d;
+      }
+    }), null), N((d) => {
+      var s = no() !== null, l = mo();
+      return s !== d.e && o.classList.toggle("is-navigating", d.e = s), d.t = Ro(v, l, d.t), d;
+    }, {
+      e: void 0,
+      t: void 0
+    }), e;
+  })();
+  return r(S, {
+    get when() {
+      return n.open;
+    },
+    get children() {
+      return [r(Z.section, {
+        class: "notes-overlay",
+        role: "region",
+        "aria-label": "Notes overlay",
+        initial: {
+          opacity: 0
+        },
+        animate: {
+          opacity: 1
+        },
+        get transition() {
+          return {
+            duration: j.fast
+          };
+        },
+        get children() {
+          return r(Z.div, {
+            class: "notes-overlay__frame",
+            initial: {
+              opacity: 0,
+              y: 18,
+              scale: 0.986
+            },
+            animate: {
+              opacity: 1,
+              y: 0,
+              scale: 1
+            },
+            get transition() {
+              return {
+                duration: j.normal,
+                easing: pt.easeOut
+              };
+            },
+            get children() {
+              return [(() => {
+                var t = dn(), e = t.firstChild, o = e.firstChild, a = o.nextSibling, v = a.nextSibling, f = v.firstChild, w = v.nextSibling, d = w.firstChild, s = w.nextSibling, l = s.firstChild, $ = e.nextSibling, k = $.firstChild;
+                return i(v, () => c.topics().length, f), i(w, me, d), i(w, () => me() === 1 ? "" : "s", null), i(s, () => c.trashCount(), l), k.$$click = bo, i(k, r(_t, {
+                  class: "w-4 h-4"
+                })), t;
+              })(), (() => {
+                var t = fn(), e = t.firstChild, o = e.firstChild, a = o.firstChild, v = a.nextSibling, f = o.nextSibling, w = f.firstChild, d = f.nextSibling, s = e.nextSibling, l = s.firstChild, $ = l.firstChild, k = $.nextSibling, D = k.firstChild, A = D.nextSibling, R = A.nextSibling, q = l.nextSibling, ht = q.nextSibling;
+                i(v, () => c.topics().length), f.addEventListener("submit", xo), i(f, r(Ve, {
+                  size: "sm",
+                  get value() {
+                    return B();
+                  },
+                  onInput: (u) => ft(u.currentTarget.value),
+                  placeholder: "Add topic"
+                }), w), i(w, r(bt, {
+                  class: "w-3.5 h-3.5"
+                })), i(d, r(st, {
+                  get each() {
+                    return c.topics();
+                  },
+                  children: (u) => {
+                    const h = () => c.getLiveNoteCount(u.id);
+                    return (() => {
+                      var I = In(), x = I.firstChild, O = x.nextSibling, M = O.firstChild, ot = M.firstChild, V = O.nextSibling, nt = V.firstChild, C = nt.nextSibling, W = C.nextSibling;
+                      return I.$$keydown = (m) => {
+                        m.key !== "Enter" && m.key !== " " || (m.preventDefault(), c.setActiveTopic(u.id));
+                      }, I.$$click = () => c.setActiveTopic(u.id), i(x, r(ae, {
+                        get iconId() {
+                          return u.iconId;
+                        },
+                        class: "notes-topic-mark__icon"
+                      })), i(O, r(S, {
+                        get when() {
+                          return Rt() === u.id;
+                        },
+                        get fallback() {
+                          return (() => {
+                            var m = Sn(), P = m.firstChild;
+                            return i(P, () => u.title), m;
+                          })();
+                        },
+                        get children() {
+                          var m = kn(), P = m.firstChild, J = P.nextSibling;
+                          return m.$$click = (T) => T.stopPropagation(), m.addEventListener("submit", (T) => {
+                            T.preventDefault(), T.stopPropagation(), To();
+                          }), i(m, r(Ve, {
+                            size: "sm",
+                            get value() {
+                              return le();
+                            },
+                            onInput: (T) => xt(T.currentTarget.value),
+                            onKeyDown: (T) => {
+                              T.key === "Escape" && (T.preventDefault(), T.stopPropagation(), Yt());
+                            },
+                            placeholder: "Topic name"
+                          }), P), i(P, r(Ye, {
+                            class: "w-3.5 h-3.5"
+                          })), J.$$click = (T) => {
+                            T.stopPropagation(), Yt();
+                          }, i(J, r(_t, {
+                            class: "w-3.5 h-3.5"
+                          })), m;
+                        }
+                      }), M), i(M, h, ot), i(M, () => h() === 1 ? "" : "s", null), i(nt, h), C.$$click = (m) => {
+                        m.stopPropagation(), Co(u);
+                      }, i(C, r(ze, {
+                        class: "w-3.5 h-3.5"
+                      })), W.$$click = (m) => {
+                        m.stopPropagation(), ko(u);
+                      }, i(W, r(ee, {
+                        class: "w-3.5 h-3.5"
+                      })), N((m) => {
+                        var P = `notes-topic-row notes-topic-tone--${u.toneId}`, J = u.id === c.activeTopicId(), T = `notes-topic-mark notes-topic-tone--${u.toneId}`, it = `Edit topic ${u.title}`, E = `Delete topic ${u.title}`, rt = c.topics().length <= 1;
+                        return P !== m.e && Q(I, m.e = P), J !== m.t && I.classList.toggle("is-active", m.t = J), T !== m.a && Q(x, m.a = T), it !== m.o && G(C, "aria-label", m.o = it), E !== m.i && G(W, "aria-label", m.i = E), rt !== m.n && (W.disabled = m.n = rt), m;
+                      }, {
+                        e: void 0,
+                        t: void 0,
+                        a: void 0,
+                        o: void 0,
+                        i: void 0,
+                        n: void 0
+                      }), I;
+                    })();
+                  }
+                })), i($, r(S, {
+                  get when() {
+                    return U();
+                  },
+                  children: (u) => [(() => {
+                    var h = He();
+                    return i(h, r(ae, {
+                      get iconId() {
+                        return u().iconId;
+                      },
+                      class: "notes-topic-mark__icon"
+                    })), N(() => Q(h, `notes-topic-mark notes-topic-mark--board notes-topic-tone--${u().toneId}`)), h;
+                  })(), (() => {
+                    var h = Nn(), I = h.firstChild, x = I.nextSibling, O = x.nextSibling, M = O.firstChild;
+                    return i(x, () => u().title), i(O, () => Pt().length, M), i(O, () => Pt().length === 1 ? "" : "s", null), h;
+                  })()]
+                })), D.$$click = () => zt("out"), i(D, r(Be, {
+                  class: "w-3.5 h-3.5"
+                })), i(A, $e), R.$$click = () => zt("in"), i(R, r(bt, {
+                  class: "w-3.5 h-3.5"
+                })), i(k, r(S, {
+                  get when() {
+                    return dt();
+                  },
+                  get children() {
+                    var u = un();
+                    return u.$$click = () => F(!0), i(u, r(Fe, {
+                      class: "w-3.5 h-3.5"
+                    })), u;
+                  }
+                }), null), i(s, r(S, {
+                  get when() {
+                    return dt();
+                  },
+                  get children() {
+                    var u = hn(), h = u.firstChild;
+                    return i(h, r(st, {
+                      get each() {
+                        return c.topics();
+                      },
+                      children: (I) => (() => {
+                        var x = Mn();
+                        return x.$$click = () => c.setActiveTopic(I.id), i(x, () => I.title), N(() => x.classList.toggle("is-active", I.id === we())), x;
+                      })()
+                    })), u;
+                  }
+                }), q);
+                var vt = Et;
+                return typeof vt == "function" ? Vo(vt, q) : Et = q, i(q, r(Qo, {
+                  get ariaLabel() {
+                    return `Canvas for ${po()}`;
+                  },
+                  class: "notes-canvas",
+                  get viewport() {
+                    return c.activeViewport();
+                  },
+                  onViewportChange: (u) => {
+                    const h = U();
+                    h && c.setViewport(h.id, u);
+                  },
+                  onCanvasContextMenu: (u) => {
+                    const h = U();
+                    h && Y({
+                      clientX: u.clientX,
+                      clientY: u.clientY,
+                      worldX: u.worldX,
+                      worldY: u.worldY,
+                      topicId: h.id
+                    });
+                  },
+                  get children() {
+                    var u = vn();
+                    return i(u, r(st, {
+                      get each() {
+                        return Pt();
+                      },
+                      children: (h) => {
+                        const I = y(() => h.sizeBucket), x = y(() => oe[I()]), O = y(() => Ke(h.text, x().previewLimit)), M = () => io() === h.id, ot = y(() => !h.text.trim()), V = () => St()?.noteId === h.id, nt = () => {
+                          const C = St();
+                          return C?.noteId === h.id ? {
+                            x: C.currentX,
+                            y: C.currentY
+                          } : {
+                            x: h.x,
+                            y: h.y
+                          };
+                        };
+                        return (() => {
+                          var C = Ln(), W = C.firstChild, m = W.firstChild, P = m.firstChild, J = P.nextSibling, T = J.firstChild, it = T.nextSibling, E = m.nextSibling, rt = E.firstChild;
+                          return C.$$click = () => Xt(h.id), C.$$contextmenu = (b) => {
+                            b.preventDefault(), b.stopPropagation(), Xt(h.id), Te(b.clientX, b.clientY, {
+                              topicId: h.topicId,
+                              noteId: h.id
+                            });
+                          }, P.$$pointerdown = (b) => Fo(h, b), i(P, r(Zo, {
+                            class: "w-3.5 h-3.5"
+                          })), T.$$click = () => Jt(h.id), i(T, r(ze, {
+                            class: "w-3.5 h-3.5"
+                          })), it.$$click = () => {
+                            Ne(h.id);
+                          }, i(it, r(ee, {
+                            class: "w-3.5 h-3.5"
+                          })), E.$$click = () => {
+                            Bo(h);
+                          }, i(rt, O), i(W, r(S, {
+                            get when() {
+                              return M();
+                            },
+                            get children() {
+                              var b = En(), at = b.firstChild, Bt = at.firstChild;
+                              return i(Bt, r(Ye, {
+                                class: "w-3.5 h-3.5"
+                              })), b;
+                            }
+                          }), null), N((b) => {
+                            var at = `notes-note notes-note--${h.colorId} notes-note--size-${I()}`, Bt = !!M(), Ee = !!V(), Le = `translate(${nt().x}px, ${nt().y}px)`, Ae = `${x().width}px`, Pe = `${x().height}px`, Oe = V() ? `${_o() + 1}` : `${h.layer}`, De = !!ot();
+                            return at !== b.e && Q(C, b.e = at), Bt !== b.t && C.classList.toggle("is-copied", b.t = Bt), Ee !== b.a && C.classList.toggle("is-dragging", b.a = Ee), Le !== b.o && H(C, "transform", b.o = Le), Ae !== b.i && H(C, "--note-width", b.i = Ae), Pe !== b.n && H(C, "--note-height", b.n = Pe), Oe !== b.s && H(C, "z-index", b.s = Oe), De !== b.h && E.classList.toggle("is-empty", b.h = De), b;
+                          }, {
+                            e: void 0,
+                            t: void 0,
+                            a: void 0,
+                            o: void 0,
+                            i: void 0,
+                            n: void 0,
+                            s: void 0,
+                            h: void 0
+                          }), C;
+                        })();
+                      }
+                    })), u;
+                  }
+                })), i(s, r(S, {
+                  get when() {
+                    return !dt();
+                  },
+                  get children() {
+                    return Me("desktop");
+                  }
+                }), ht), i(s, r(S, {
+                  get when() {
+                    return se(() => !!dt())() && !kt();
+                  },
+                  get children() {
+                    var u = pn(), h = u.firstChild, I = h.firstChild, x = h.nextSibling, O = x.firstChild, M = x.nextSibling, ot = M.firstChild;
+                    return h.$$click = Oo, i(h, r(bt, {
+                      class: "w-4 h-4"
+                    }), I), x.$$click = () => {
+                      Do();
+                    }, i(x, r(Re, {
+                      class: "w-4 h-4"
+                    }), O), M.$$click = () => F(!0), i(M, r(Fe, {
+                      class: "w-4 h-4"
+                    }), ot), u;
+                  }
+                }), ht), i(ht, r(S, {
+                  get when() {
+                    return !gt();
+                  },
+                  get children() {
+                    var u = _n(), h = u.firstChild;
+                    return u.$$click = () => Tt(!0), i(h, r(Je, {
+                      class: "notes-trash__toggle-icon"
+                    })), N(() => G(u, "aria-label", `Open trash dock${c.trashCount() > 0 ? `, ${c.trashCount()} items` : ""}`)), u;
+                  }
+                })), N(() => ht.classList.toggle("is-open", !!gt())), t;
+              })()];
+            }
+          });
+        }
+      }), r($t, {
+        get children() {
+          return r(S, {
+            get when() {
+              return se(() => !!dt())() && kt();
+            },
+            get children() {
+              return [r(Z.div, {
+                class: "notes-overview-backdrop",
+                initial: {
+                  opacity: 0
+                },
+                animate: {
+                  opacity: 1
+                },
+                exit: {
+                  opacity: 0
+                },
+                get transition() {
+                  return {
+                    duration: j.fast
+                  };
+                },
+                onClick: () => F(!1)
+              }), r(Z.div, {
+                class: "notes-overview-flyout",
+                initial: {
+                  opacity: 0,
+                  y: 18,
+                  scale: 0.98
+                },
+                animate: {
+                  opacity: 1,
+                  y: 0,
+                  scale: 1
+                },
+                exit: {
+                  opacity: 0,
+                  y: 18,
+                  scale: 0.98
+                },
+                get transition() {
+                  return {
+                    duration: j.normal,
+                    easing: pt.easeOut
+                  };
+                },
+                get children() {
+                  return Me("mobile");
+                }
+              })];
+            }
+          });
+        }
+      }), r($t, {
+        get children() {
+          return r(S, {
+            get when() {
+              return gt();
+            },
+            get children() {
+              return [r(Z.div, {
+                class: "notes-trash-backdrop",
+                initial: {
+                  opacity: 0
+                },
+                animate: {
+                  opacity: 1
+                },
+                exit: {
+                  opacity: 0
+                },
+                get transition() {
+                  return {
+                    duration: j.fast
+                  };
+                },
+                onContextMenu: (t) => {
+                  t.preventDefault(), t.stopPropagation(), ut(), Te(t.clientX, t.clientY);
+                },
+                onClick: ut
+              }), r(Z.div, {
+                class: "notes-trash__flyout",
+                initial: {
+                  opacity: 0,
+                  y: 18,
+                  scale: 0.98
+                },
+                animate: {
+                  opacity: 1,
+                  y: 0,
+                  scale: 1
+                },
+                exit: {
+                  opacity: 0,
+                  y: 20,
+                  scale: 0.98
+                },
+                get transition() {
+                  return {
+                    duration: j.normal,
+                    easing: pt.easeOut
+                  };
+                },
+                get children() {
+                  var t = wn(), e = t.firstChild, o = e.firstChild, a = o.firstChild, v = a.firstChild, f = v.nextSibling, w = f.firstChild, d = w.firstChild, s = w.nextSibling;
+                  return t.$$contextmenu = (l) => {
+                    l.preventDefault(), l.stopPropagation();
+                  }, t.$$pointerdown = (l) => l.stopPropagation(), i(w, () => c.trashCount(), d), s.$$click = ut, i(s, r(_t, {
+                    class: "w-4 h-4"
+                  })), i(t, r(S, {
+                    get when() {
+                      return ye().length > 0;
+                    },
+                    get fallback() {
+                      return (() => {
+                        var l = An(), $ = l.firstChild;
+                        return i(l, r(Je, {
+                          class: "notes-trash__empty-icon"
+                        }), $), l;
+                      })();
+                    },
+                    get children() {
+                      var l = gn();
+                      return i(l, r(st, {
+                        get each() {
+                          return ye();
+                        },
+                        children: ($) => (() => {
+                          var k = Pn(), D = k.firstChild, A = D.firstChild, R = A.firstChild, q = R.firstChild, ht = q.nextSibling, vt = R.nextSibling, u = vt.firstChild, h = A.nextSibling, I = D.nextSibling;
+                          return i(q, r(ae, {
+                            get iconId() {
+                              return $.topic.iconId;
+                            },
+                            class: "notes-topic-mark__icon"
+                          })), i(ht, () => $.topic.title), i(vt, () => $.notes.length, u), i(vt, () => $.notes.length === 1 ? "" : "s", null), h.$$click = () => {
+                            Ao($.topic.id);
+                          }, i(I, r(st, {
+                            get each() {
+                              return $.notes;
+                            },
+                            children: (x) => {
+                              const O = x.sizeBucket, M = oe[O], ot = Ke(x.text, M.previewLimit);
+                              return (() => {
+                                var V = Dn(), nt = V.firstChild, C = nt.firstChild, W = C.firstChild, m = W.nextSibling, P = C.nextSibling, J = P.firstChild, T = P.nextSibling, it = T.firstChild;
+                                return i(W, () => Zn(x.deletedAt)), i(m, () => Hn(x.deletedAt, ao())), i(J, ot), it.$$click = () => {
+                                  Eo(x.id);
+                                }, i(T, r(S, {
+                                  get when() {
+                                    return !!n.controller.deleteTrashedNotePermanently;
+                                  },
+                                  get children() {
+                                    var E = On();
+                                    return E.$$click = () => {
+                                      Lo(x.id);
+                                    }, E;
+                                  }
+                                }), null), N((E) => {
+                                  var rt = `notes-note notes-trash-note notes-note--${x.colorId} notes-note--size-${O}`, b = `${M.width}px`, at = `${M.height}px`;
+                                  return rt !== E.e && Q(V, E.e = rt), b !== E.t && H(V, "--note-width", E.t = b), at !== E.a && H(V, "--note-height", E.a = at), E;
+                                }, {
+                                  e: void 0,
+                                  t: void 0,
+                                  a: void 0
+                                }), V;
+                              })();
+                            }
+                          })), N(() => Q(q, `notes-topic-mark notes-topic-mark--trash notes-topic-tone--${$.topic.toneId}`)), k;
+                        })()
+                      })), l;
+                    }
+                  }), null), t;
+                }
+              })];
+            }
+          });
+        }
+      }), r($t, {
+        get children() {
+          return r(S, {
+            get when() {
+              return p();
+            },
+            get children() {
+              return [r(Z.div, {
+                class: "notes-menu-backdrop",
+                initial: {
+                  opacity: 0
+                },
+                animate: {
+                  opacity: 1
+                },
+                exit: {
+                  opacity: 0
+                },
+                get transition() {
+                  return {
+                    duration: j.fast
+                  };
+                },
+                onClick: z
+              }), r(Z.div, {
+                class: "notes-menu",
+                get style() {
+                  return $o();
+                },
+                initial: {
+                  opacity: 0,
+                  y: 10,
+                  scale: 0.97
+                },
+                animate: {
+                  opacity: 1,
+                  y: 0,
+                  scale: 1
+                },
+                exit: {
+                  opacity: 0,
+                  y: 12,
+                  scale: 0.97
+                },
+                get transition() {
+                  return {
+                    duration: j.fast,
+                    easing: pt.easeOut
+                  };
+                },
+                onPointerDown: (t) => t.stopPropagation(),
+                get children() {
+                  return [(() => {
+                    var t = mn(), e = t.firstChild;
+                    return t.$$click = () => {
+                      Mo();
+                    }, i(t, r(Re, {
+                      class: "w-4 h-4"
+                    }), e), t;
+                  })(), (() => {
+                    var t = $n(), e = t.firstChild;
+                    return t.$$click = No, i(t, r(bt, {
+                      class: "w-4 h-4"
+                    }), e), t;
+                  })(), r(S, {
+                    get when() {
+                      return !!p()?.noteId;
+                    },
+                    get children() {
+                      var t = bn(), e = t.firstChild;
+                      return t.$$click = () => {
+                        Po();
+                      }, i(t, r(ee, {
+                        class: "w-4 h-4"
+                      }), e), t;
+                    }
+                  })];
+                }
+              })];
+            }
+          });
+        }
+      }), r($t, {
+        get children() {
+          return r(S, {
+            get when() {
+              return !!Gt();
+            },
+            get children() {
+              return r(Z.div, {
+                class: "notes-flyout notes-flyout--editor",
+                initial: {
+                  opacity: 0,
+                  x: 24,
+                  scale: 0.985
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  scale: 1
+                },
+                exit: {
+                  opacity: 0,
+                  x: 20,
+                  scale: 0.985
+                },
+                get transition() {
+                  return {
+                    duration: j.normal,
+                    easing: pt.easeOut
+                  };
+                },
+                onPointerDown: (t) => t.stopPropagation(),
+                get children() {
+                  return [(() => {
+                    var t = yn(), e = t.firstChild, o = e.firstChild, a = o.nextSibling, v = e.nextSibling;
+                    return i(a, () => Gt()?.text.trim() ? "Refine note" : "Compose note"), v.$$click = Qt, i(v, r(_t, {
+                      class: "w-4 h-4"
+                    })), t;
+                  })(), (() => {
+                    var t = xn(), e = t.firstChild, o = e.firstChild, a = o.nextSibling, v = e.nextSibling;
+                    return v.firstChild, i(a, r(st, {
+                      get each() {
+                        return c.colorOptions;
+                      },
+                      children: (f) => (() => {
+                        var w = Xn(), d = w.firstChild;
+                        return w.$$click = () => ve(f.id), i(d, () => f.name), N((s) => {
+                          var l = `notes-editor__swatch notes-note--${f.id}`, $ = he() === f.id;
+                          return l !== s.e && Q(w, s.e = l), $ !== s.t && w.classList.toggle("is-active", s.t = $), s;
+                        }, {
+                          e: void 0,
+                          t: void 0
+                        }), w;
+                      })()
+                    })), i(v, r(We, {
+                      rows: 10,
+                      get value() {
+                        return de();
+                      },
+                      onInput: (f) => ue(f.currentTarget.value),
+                      placeholder: "Type or paste anything worth keeping..."
+                    }), null), t;
+                  })(), (() => {
+                    var t = Ze();
+                    return i(t, r(Ft, {
+                      variant: "ghost",
+                      onClick: Qt,
+                      children: "Cancel"
+                    }), null), i(t, r(Ft, {
+                      variant: "primary",
+                      onClick: () => {
+                        Io();
+                      },
+                      children: "Save"
+                    }), null), t;
+                  })()];
+                }
+              });
+            }
+          });
+        }
+      }), r($t, {
+        get children() {
+          return r(S, {
+            get when() {
+              return !!_e();
+            },
+            get children() {
+              return r(Z.div, {
+                class: "notes-flyout notes-flyout--paste",
+                initial: {
+                  opacity: 0,
+                  x: 24,
+                  scale: 0.985
+                },
+                animate: {
+                  opacity: 1,
+                  x: 0,
+                  scale: 1
+                },
+                exit: {
+                  opacity: 0,
+                  x: 20,
+                  scale: 0.985
+                },
+                get transition() {
+                  return {
+                    duration: j.normal,
+                    easing: pt.easeOut
+                  };
+                },
+                onPointerDown: (t) => t.stopPropagation(),
+                get children() {
+                  return [(() => {
+                    var t = Cn(), e = t.firstChild, o = e.nextSibling;
+                    return o.$$click = () => {
+                      lt(null), ct("");
+                    }, i(o, r(_t, {
+                      class: "w-4 h-4"
+                    })), t;
+                  })(), (() => {
+                    var t = Tn();
+                    return i(t, r(We, {
+                      rows: 12,
+                      get value() {
+                        return It();
+                      },
+                      onInput: (e) => ct(e.currentTarget.value),
+                      placeholder: "Paste clipboard text here..."
+                    })), t;
+                  })(), (() => {
+                    var t = Ze();
+                    return i(t, r(Ft, {
+                      variant: "ghost",
+                      onClick: () => {
+                        lt(null), ct("");
+                      },
+                      children: "Cancel"
+                    }), null), i(t, r(Ft, {
+                      variant: "primary",
+                      get disabled() {
+                        return !It().trim();
+                      },
+                      onClick: () => {
+                        zo();
+                      },
+                      children: "Create note"
+                    }), null), t;
+                  })()];
+                }
+              });
+            }
+          });
+        }
+      })];
+    }
+  });
+}
+Wo(["pointerdown", "click", "contextmenu", "keydown"]);
+export {
+  ii as NotesOverlay
+};