@fc3/mmcadi 0.1.49 → 0.1.50

package/dist/client.js

@@ -259,9 +259,9 @@
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var generic_1 = __importDefault(require_generic());
-      var InvariantViolation12 = class extends generic_1.default {
+      var InvariantViolation14 = class extends generic_1.default {
       };
-      exports.default = InvariantViolation12;
+      exports.default = InvariantViolation14;
     }
   });
 
@@ -1725,7 +1725,7 @@
   });
 
   // src/client/client.ts
-  var import_errors12 = __toESM(require_src2());
+  var import_errors14 = __toESM(require_src2());
 
   // src/client/enum/page-type.ts
   var PageType = /* @__PURE__ */ ((PageType2) => {
@@ -2178,7 +2178,7 @@
   var select_block_type_default = SelectBlockTypePage;
 
   // src/client/page/cursor.ts
-  var import_errors7 = __toESM(require_src2());
+  var import_errors9 = __toESM(require_src2());
   var import_array = __toESM(require_src3());
   var import_time = __toESM(require_src6());
 
@@ -2242,30 +2242,851 @@
   })(MediaReadyState || {});
   var media_ready_state_default = MediaReadyState;
 
-  // src/client/page/cursor.ts
-  function getAttributeForElement(element, attribute) {
-    const value = element.getAttribute(attribute);
+  // src/client/helper/interaction.ts
+  var import_errors8 = __toESM(require_src2());
+
+  // src/enum/action-type.ts
+  var ActionType = /* @__PURE__ */ ((ActionType2) => {
+    ActionType2["ADD_BLOCK"] = "add_block";
+    ActionType2["DELETE_BLOCK"] = "delete_block";
+    ActionType2["MOVE_BLOCK"] = "move_block";
+    ActionType2["HIDE_BLOCK"] = "hide_block";
+    ActionType2["PROMOTE_BLOCK"] = "promote_block";
+    ActionType2["DEMOTE_BLOCK"] = "demote_block";
+    ActionType2["REPOSITION_BLOCK"] = "reposition_block";
+    ActionType2["EDIT_BLOCK"] = "edit_block";
+    ActionType2["CREATE_PAGE"] = "create_page";
+    ActionType2["COMPLETE_BLOCK"] = "complete_block";
+    ActionType2["ADD_BLOCK_TO_PLAYLIST"] = "add_to_playlist";
+    return ActionType2;
+  })(ActionType || {});
+  var action_type_default = ActionType;
+
+  // src/enum/emoji.ts
+  var Emoji = /* @__PURE__ */ ((Emoji2) => {
+    Emoji2["USER_PORTRAIT"] = "\u{1F464}";
+    Emoji2["WARNING_SIGN"] = "\u26A0\uFE0F";
+    Emoji2["BAR_CHART"] = "\u{1F4CA}";
+    Emoji2["FOLDER"] = "\u{1F5C2}\uFE0F";
+    Emoji2["FILE"] = "\u{1F4C4}";
+    Emoji2["HOUSE"] = "\u{1F3E0}";
+    Emoji2["NONE"] = "\u{1F6AB}";
+    Emoji2["WHITE_SQUARE"] = "\u2B1C";
+    Emoji2["GRID_GLOBE"] = "\u{1F310}";
+    Emoji2["SATELLITE_DISH"] = "\u{1F4E1}";
+    Emoji2["COMPLETED_CHECKMARK"] = "\u2705";
+    Emoji2["RED_X"] = "\u274C";
+    Emoji2["CLOCK"] = "\u{1F552}";
+    Emoji2["SUNSHINE"] = "\u{1F506}";
+    Emoji2["ALARM_CLOCK"] = "\u23F0";
+    Emoji2["MAGNIFYING_GLASS"] = "\u{1F50E}";
+    Emoji2["MAGIC_WAND"] = "\u{1FA84}";
+    Emoji2["CALENDAR"] = "\u{1F4C5}";
+    Emoji2["LOCKED"] = "\u{1F512}";
+    Emoji2["UNLOCKED"] = "\u{1F513}";
+    Emoji2["NORTHWEST_ARROW"] = "\u2196\uFE0F";
+    Emoji2["RIGHT_ARROW"] = "\u27A1\uFE0F";
+    Emoji2["LEFT_ARROW"] = "\u2B05\uFE0F";
+    Emoji2["UP_ARROW"] = "\u2B06\uFE0F";
+    Emoji2["UP_DOWN_ARROW"] = "\u2195\uFE0F";
+    Emoji2["LEFT_ARROW_UNICODE"] = "\u25C4";
+    Emoji2["UP_ARROW_UNICODE"] = "\u25B2";
+    Emoji2["RIGHT_ARROW_UNICODE"] = "\u25BA";
+    Emoji2["DOWN_ARROW_UNICODE"] = "\u25BC";
+    Emoji2["BRICK"] = "\u{1F9F1}";
+    Emoji2["RULER"] = "\u{1F4D0}";
+    Emoji2["SWORD"] = "\u{1F5E1}\uFE0F";
+    Emoji2["PEACE_SIGN"] = "\u270C\uFE0F";
+    Emoji2["SIGN"] = "\u{1FAA7}";
+    Emoji2["CONSTRUCTION"] = "\u{1F3D7}\uFE0F";
+    Emoji2["CAMERA"] = "\u{1F4F7}";
+    Emoji2["MOVIE_CAMERA"] = "\u{1F3A5}";
+    Emoji2["PAINTING"] = "\u{1F5BC}\uFE0F";
+    Emoji2["PALETTE"] = "\u{1F3A8}";
+    Emoji2["MICROPHONE"] = "\u{1F399}\uFE0F";
+    Emoji2["NOTEPAD"] = "\u{1F4DD}";
+    Emoji2["GEAR"] = "\u2699\uFE0F";
+    Emoji2["REPEAT"] = "\u{1F501}";
+    Emoji2["SNOWMAN"] = "\u2603\uFE0F";
+    Emoji2["SNOWFLAKE"] = "\u2744\uFE0F";
+    Emoji2["SNOW_CLOUD"] = "\u{1F328}\uFE0F";
+    Emoji2["SCARF"] = "\u{1F9E3}";
+    Emoji2["GLOVES"] = "\u{1F9E4}";
+    Emoji2["CANDLE"] = "\u{1F56F}\uFE0F";
+    Emoji2["CHRISTMAS_TREE"] = "\u{1F384}";
+    Emoji2["SOCKS"] = "\u{1F9E6}";
+    Emoji2["COLD_FACE"] = "\u{1F976}";
+    Emoji2["EYE"] = "\u{1F441}\uFE0F";
+    Emoji2["CHAINS"] = "\u26D3\uFE0F";
+    Emoji2["SPEAKER"] = "\u{1F50A}";
+    Emoji2["COMPACT_DISK"] = "\u{1F4BF}";
+    Emoji2["SEEDLING"] = "\u{1F331}";
+    Emoji2["TULIP"] = "\u{1F337}";
+    Emoji2["BEE"] = "\u{1F41D}";
+    Emoji2["HATCHING_CHICK"] = "\u{1F423}";
+    Emoji2["NEST_WITH_EGGS"] = "\u{1FABA}";
+    Emoji2["BLOSSOM"] = "\u{1F33C}";
+    Emoji2["UMBRELLA"] = "\u2614";
+    Emoji2["RAINBOW"] = "\u{1F308}";
+    Emoji2["PICNIC_BASKET"] = "\u{1F9FA}";
+    Emoji2["SUN_WITH_FACE"] = "\u{1F31E}";
+    Emoji2["BEACH_UMBRELLA"] = "\u{1F3D6}\uFE0F";
+    Emoji2["WATERMELON"] = "\u{1F349}";
+    Emoji2["SUNGLASSES"] = "\u{1F576}\uFE0F";
+    Emoji2["ICE_CREAM"] = "\u{1F366}";
+    Emoji2["SUNFLOWER"] = "\u{1F33B}";
+    Emoji2["CAMPING"] = "\u{1F3D5}\uFE0F";
+    Emoji2["JUICE_BOX"] = "\u{1F9C3}";
+    Emoji2["PARASOL"] = "\u26F1\uFE0F";
+    Emoji2["MAPLE_LEAF"] = "\u{1F341}";
+    Emoji2["FALLEN_LEAF"] = "\u{1F342}";
+    Emoji2["TURKEY"] = "\u{1F983}";
+    Emoji2["JACK_O_LANTERN"] = "\u{1F383}";
+    Emoji2["PIE"] = "\u{1F967}";
+    Emoji2["LOG"] = "\u{1FAB5}";
+    Emoji2["SPIDER_WEB"] = "\u{1F578}\uFE0F";
+    Emoji2["BACKPACK"] = "\u{1F392}";
+    Emoji2["CHESTNUT"] = "\u{1F330}";
+    Emoji2["PLACARD"] = "\u{1FAA7}";
+    Emoji2["RECEIPT"] = "\u{1F9FE}";
+    Emoji2["DOCUMENT"] = "\u{1F4C4}";
+    Emoji2["SPARKLES"] = "\u2728";
+    Emoji2["BOOKS"] = "\u{1F4DA}";
+    Emoji2["SHOPPING_BAGS"] = "\u{1F6CD}\uFE0F";
+    Emoji2["LINK"] = "\u{1F517}";
+    Emoji2["GREEN_ASTERISK"] = "\u2733\uFE0F";
+    Emoji2["RADIO_BUTTON"] = "\u{1F518}";
+    Emoji2["WINDOW"] = "\u{1FA9F}";
+    Emoji2["MUSIC_NOTES"] = "\u{1F3B6}";
+    Emoji2["INVISIBLE_FACE"] = "\u{1FAE5}";
+    Emoji2["PLUS_SIGN"] = "\u2795";
+    Emoji2["JOKER"] = "\u{1F0CF}";
+    Emoji2["PLAY"] = "\u25B6\uFE0F";
+    Emoji2["PAUSE"] = "\u23F8\uFE0F";
+    return Emoji2;
+  })(Emoji || {});
+  var emoji_default = Emoji;
+
+  // src/client/utility/get-index-path-for-element.ts
+  var import_errors7 = __toESM(require_src2());
+  function getIndexPathForElement(element) {
+    const value = element.getAttribute("data-index-path");
     if (value === null) {
-      throw new import_errors7.InvariantViolation(`
-			Tried to read ${attribute} for element, but it was not set
-		`);
+      throw new import_errors7.InvariantViolation(
+        "Tried to read data-index-path for element, but it was not set"
+      );
     }
     return value;
   }
-  function getIndexPathForElement(element) {
-    return getAttributeForElement(element, "data-index-path");
-  }
+  var get_index_path_for_element_default = getIndexPathForElement;
+
+  // src/client/helper/interaction.ts
+  var InteractionHelper = class {
+    constructor() {
+      this.drag_active = false;
+      this.drag_origin_block = null;
+      this.drag_placeholder = null;
+      this.drag_ghost = null;
+      this.drag_start_y = null;
+      this.drag_pointer_offset_y = null;
+      this.drag_press_timer = null;
+      this.swipe_active = false;
+      this.swipe_block = null;
+      this.swipe_start_x = null;
+      this.swipe_start_y = null;
+      this.swipe_content = null;
+      this.swipe_menu_width = 0;
+      this.open_swipe_block = null;
+      this.open_swipe_content = null;
+    }
+    attach() {
+      document.addEventListener("mousedown", (event) => {
+        this.onPressStart(event);
+      }, true);
+      document.addEventListener("touchstart", (event) => {
+        this.onPressStart(event);
+      }, { capture: true, passive: false });
+      document.addEventListener("mousemove", (event) => {
+        this.onPointerMove(event);
+      }, true);
+      document.addEventListener("touchmove", (event) => {
+        this.onPointerMove(event);
+      }, { capture: true, passive: false });
+      document.addEventListener("mouseup", (event) => {
+        this.onPressEnd(event);
+      }, true);
+      document.addEventListener("touchend", (event) => {
+        this.onPressEnd(event);
+      }, true);
+      document.addEventListener("touchstart", (event) => {
+        this.onGlobalTouchStart(event);
+      }, { capture: true, passive: true });
+      document.addEventListener("dragstart", (event) => {
+        this.onNativeDragStart(event);
+      }, true);
+    }
+    isDragging() {
+      return this.drag_active;
+    }
+    getBlockElements() {
+      const elements = document.querySelectorAll("section.block");
+      return Array.from(elements);
+    }
+    getSiblingBlocks(container, exclude) {
+      const children = Array.from(container.children);
+      return children.filter((element) => {
+        if (element === exclude) {
+          return false;
+        }
+        return element.classList.contains("block");
+      });
+    }
+    onPressStart(event) {
+      const target = event.target;
+      if (target === null) {
+        return;
+      }
+      if (target.closest("button, input, textarea, select, label, form")) {
+        return;
+      }
+      const block = target.closest("section.block");
+      if (block === null) {
+        return;
+      }
+      if (event instanceof MouseEvent) {
+        const anchor = target.closest("a[href]");
+        if (anchor) {
+          event.preventDefault();
+        }
+      }
+      const touch_event = event;
+      const is_touch = touch_event.type === "touchstart";
+      const point = this.getEventPoint(event);
+      if (point === null) {
+        return;
+      }
+      this.drag_origin_block = block;
+      this.drag_start_y = point.clientY;
+      if (is_touch) {
+        this.swipe_block = block;
+        this.swipe_start_x = point.clientX;
+        this.swipe_start_y = point.clientY;
+      }
+      const threshold_ms = is_touch ? 350 : 200;
+      this.clearPressTimer();
+      this.drag_press_timer = window.setTimeout(() => {
+        this.beginDrag(point.clientY);
+      }, threshold_ms);
+    }
+    onNativeDragStart(event) {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      if (target.closest("section.block")) {
+        event.preventDefault();
+      }
+    }
+    onPointerMove(event) {
+      const point = this.getEventPoint(event);
+      if (point === null) {
+        return;
+      }
+      const touch_event = event;
+      const { touches } = touch_event;
+      const is_touch = touches !== void 0;
+      if (is_touch && this.swipe_block) {
+        if (this.swipe_start_x === null || this.swipe_start_y === null) {
+          throw new import_errors8.InvariantViolation("Swipe start coordinates were not initialized");
+        }
+        const start_x = this.swipe_start_x;
+        const start_y = this.swipe_start_y;
+        const delta_x = point.clientX - start_x;
+        const delta_y = point.clientY - start_y;
+        if (!this.swipe_active) {
+          const abs_x = Math.abs(delta_x);
+          const abs_y = Math.abs(delta_y);
+          if (abs_x > 12 && abs_x > abs_y) {
+            this.clearPressTimer();
+            this.closeOpenSwipeMenu(this.swipe_block);
+            this.swipe_active = true;
+            this.beginSwipe(this.swipe_block);
+          }
+        }
+        if (this.swipe_active) {
+          event.preventDefault();
+          const content_element = this.swipe_content;
+          const menu_width = this.swipe_menu_width;
+          const translate_x = Math.max(-menu_width, Math.min(0, delta_x));
+          content_element.style.transition = "";
+          content_element.style.transform = `translateX(${translate_x}px)`;
+          return;
+        }
+      }
+      if (!this.drag_active && this.drag_origin_block && this.drag_start_y !== null) {
+        const delta_y = Math.abs(point.clientY - this.drag_start_y);
+        if (delta_y > 8 && this.drag_press_timer !== null) {
+          this.beginDrag(point.clientY);
+        }
+      }
+      if (!this.drag_active) {
+        return;
+      }
+      event.preventDefault();
+      const origin = this.drag_origin_block;
+      let container = null;
+      if (this.drag_placeholder !== null) {
+        container = this.drag_placeholder.parentElement;
+      }
+      if (container === null && origin !== null) {
+        container = origin.parentElement;
+      }
+      if (container === null) {
+        return;
+      }
+      const blocks_before = this.getSiblingBlocks(container, origin);
+      const preceding_rects = /* @__PURE__ */ new Map();
+      blocks_before.forEach((element) => {
+        const rect = element.getBoundingClientRect();
+        preceding_rects.set(element, rect);
+      });
+      this.updatePlaceholderPosition(point.clientY);
+      if (this.drag_ghost && this.drag_pointer_offset_y !== null) {
+        const top_position = point.clientY - this.drag_pointer_offset_y;
+        this.drag_ghost.style.top = `${top_position}px`;
+      }
+      const blocks_after = this.getSiblingBlocks(container, origin);
+      this.animateWithFlip(preceding_rects, blocks_after);
+    }
+    onPressEnd(event) {
+      this.clearPressTimer();
+      if (this.swipe_active) {
+        const content = this.swipe_content;
+        const style = window.getComputedStyle(content);
+        let current_x = 0;
+        try {
+          const css_matrix = new WebKitCSSMatrix(style.transform);
+          current_x = css_matrix.m41;
+        } catch {
+          const translate_match = style.transform.match(/translateX\(([-0-9.]+)px\)/);
+          if (translate_match) {
+            current_x = parseFloat(translate_match[1]);
+          }
+        }
+        const width = this.swipe_menu_width;
+        const open = Math.abs(current_x) > width / 2;
+        content.style.transition = "transform 150ms ease";
+        content.style.transform = open ? `translateX(${-width}px)` : "translateX(0)";
+        if (!open) {
+          this.teardownSwipe();
+        }
+        if (open) {
+          this.open_swipe_block = this.swipe_block;
+          this.open_swipe_content = content;
+        }
+        this.swipe_active = false;
+        return;
+      }
+      if (!this.drag_active) {
+        this.resetDragState();
+        return;
+      }
+      event.preventDefault();
+      const origin = this.drag_origin_block;
+      const placeholder = this.drag_placeholder;
+      const source_index_path = get_index_path_for_element_default(origin);
+      const target_index_path = this.computeTargetIndexPath(placeholder);
+      this.cleanupDragElements();
+      if (target_index_path === null || target_index_path === source_index_path) {
+        this.resetDragState();
+        return;
+      }
+      const editing = new URL(window.location.href).searchParams.get("editing") === "true";
+      this.postReposition(source_index_path, target_index_path, editing).then((new_index_path) => {
+        if (new_index_path) {
+          const url = new URL(window.location.href);
+          url.searchParams.set("index_path", new_index_path);
+          history.replaceState({}, "", url.toString());
+        }
+        const blocks = this.getBlockElements();
+        blocks.forEach((element) => {
+          element.classList.remove("selected");
+        });
+        origin.classList.add("selected");
+        this.updateTopLevelIndexPaths();
+      }).finally(() => {
+        this.resetDragState();
+      });
+    }
+    beginSwipe(block) {
+      const result = this.ensureSwipeUI(block);
+      const target = result.target;
+      const menu = result.menu;
+      const menu_width = result.menu_width;
+      this.swipe_content = target;
+      this.swipe_menu_width = menu_width;
+      if (menu) {
+        menu.style.display = "flex";
+        menu.style.opacity = "1";
+      }
+    }
+    closeOpenSwipeMenu(except) {
+      if (!this.open_swipe_content) {
+        return;
+      }
+      if (except && this.open_swipe_block === except) {
+        return;
+      }
+      const content = this.open_swipe_content;
+      content.style.transition = "transform 150ms ease";
+      content.style.transform = "translateX(0)";
+      const clear_callback = () => {
+        content.removeEventListener("transitionend", clear_callback);
+        if (this.open_swipe_block) {
+          const menu_element = this.getSwipeMenuFor(this.open_swipe_block);
+          if (menu_element && menu_element.parentElement) {
+            menu_element.parentElement.removeChild(menu_element);
+          }
+        }
+        this.open_swipe_block = null;
+        this.open_swipe_content = null;
+      };
+      content.addEventListener("transitionend", clear_callback);
+    }
+    teardownSwipe() {
+      if (!this.swipe_block || !this.swipe_content) {
+        this.resetSwipeState();
+        return;
+      }
+      this.swipe_content.style.transition = "";
+      this.swipe_content.style.transform = "translateX(0)";
+      const menu = this.getSwipeMenuFor(this.swipe_block);
+      if (menu && menu.parentElement) {
+        menu.parentElement.removeChild(menu);
+      }
+      this.resetSwipeState();
+    }
+    onGlobalTouchStart(event) {
+      if (!this.open_swipe_block || !this.open_swipe_content) {
+        return;
+      }
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const menu = this.getSwipeMenuFor(this.open_swipe_block);
+      const closest_block = target.closest("section.block");
+      const swipe_actions = target.closest(".swipe-actions");
+      if (closest_block === this.open_swipe_block || swipe_actions === menu) {
+        return;
+      }
+      this.closeOpenSwipeMenu();
+    }
+    getSwipeMenuFor(block) {
+      const wrapper = block.closest("main .section-wrapper");
+      if (!wrapper || !block.id) {
+        return null;
+      }
+      return wrapper.querySelector(`.swipe-actions[data-for="${block.id}"]`);
+    }
+    resetSwipeState() {
+      this.swipe_block = null;
+      this.swipe_start_x = null;
+      this.swipe_start_y = null;
+      this.swipe_content = null;
+      this.swipe_menu_width = 0;
+    }
+    ensureSwipeUI(block) {
+      const target = block;
+      target.style.willChange = "transform";
+      target.style.transform = "translateX(0)";
+      target.style.transition = "";
+      target.style.position = target.style.position || "relative";
+      target.style.zIndex = "1";
+      const wrapper = block.closest("main .section-wrapper");
+      let menu = null;
+      if (wrapper) {
+        if (getComputedStyle(wrapper).position === "static") {
+          wrapper.style.position = "relative";
+        }
+        let existing = wrapper.querySelector(`.swipe-actions[data-for="${block.id}"]`);
+        if (!existing) {
+          existing = document.createElement("div");
+          existing.className = "swipe-actions";
+          existing.setAttribute("data-for", block.id);
+          existing.style.position = "absolute";
+          existing.style.right = "0";
+          existing.style.display = "none";
+          existing.style.opacity = "0";
+          existing.style.gap = "8px";
+          existing.style.alignItems = "stretch";
+          existing.style.padding = "0 8px";
+          existing.style.background = "transparent";
+          existing.style.zIndex = "0";
+          const edit_button = document.createElement("button");
+          const delete_button = document.createElement("button");
+          const add_button = document.createElement("button");
+          edit_button.textContent = emoji_default.GEAR;
+          edit_button.setAttribute("aria-label", "Edit");
+          edit_button.style.background = "#f0ad4e";
+          edit_button.style.color = "#000";
+          edit_button.style.border = "none";
+          edit_button.style.padding = "0";
+          edit_button.style.fontSize = "20px";
+          edit_button.style.width = "48px";
+          edit_button.style.minWidth = "48px";
+          edit_button.style.display = "flex";
+          edit_button.style.alignItems = "center";
+          edit_button.style.justifyContent = "center";
+          edit_button.style.cursor = "pointer";
+          delete_button.textContent = emoji_default.RED_X;
+          delete_button.setAttribute("aria-label", "Delete");
+          delete_button.style.background = "#e74c3c";
+          delete_button.style.color = "#fff";
+          delete_button.style.border = "none";
+          delete_button.style.padding = "0";
+          delete_button.style.fontSize = "20px";
+          delete_button.style.width = "48px";
+          delete_button.style.minWidth = "48px";
+          delete_button.style.display = "flex";
+          delete_button.style.alignItems = "center";
+          delete_button.style.justifyContent = "center";
+          delete_button.style.cursor = "pointer";
+          add_button.textContent = emoji_default.PLUS_SIGN;
+          add_button.setAttribute("aria-label", "Add After");
+          add_button.style.background = "#27ae60";
+          add_button.style.color = "#fff";
+          add_button.style.border = "none";
+          add_button.style.padding = "0";
+          add_button.style.fontSize = "20px";
+          add_button.style.width = "48px";
+          add_button.style.minWidth = "48px";
+          add_button.style.display = "flex";
+          add_button.style.alignItems = "center";
+          add_button.style.justifyContent = "center";
+          add_button.style.cursor = "pointer";
+          existing.appendChild(edit_button);
+          existing.appendChild(delete_button);
+          existing.appendChild(add_button);
+          wrapper.appendChild(existing);
+          const edit_handler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.navigateToBlockLink(block, "edit");
+          };
+          const delete_handler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.navigateToBlockLink(block, "delete");
+          };
+          const add_handler = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.navigateToAddAfter(block);
+          };
+          existing.addEventListener("touchstart", (event) => {
+            event.stopPropagation();
+          });
+          existing.addEventListener("mousedown", (event) => {
+            event.stopPropagation();
+          });
+          edit_button.addEventListener("click", edit_handler);
+          edit_button.addEventListener("touchend", edit_handler);
+          delete_button.addEventListener("click", delete_handler);
+          delete_button.addEventListener("touchend", delete_handler);
+          add_button.addEventListener("click", add_handler);
+          add_button.addEventListener("touchend", add_handler);
+        }
+        menu = existing;
+        const top = block.offsetTop;
+        const height = block.offsetHeight;
+        menu.style.top = `${top}px`;
+        menu.style.height = `${height}px`;
+      }
+      let menu_width = 160;
+      if (menu) {
+        const prevDisplay = menu.style.display;
+        const prevOpacity = menu.style.opacity;
+        menu.style.display = "flex";
+        menu.style.opacity = "0";
+        menu_width = menu.offsetWidth || 160;
+        menu.style.display = prevDisplay;
+        menu.style.opacity = prevOpacity;
+      }
+      this.enforceTimeVisibility(block);
+      return {
+        target,
+        menu,
+        menu_width
+      };
+    }
+    navigateToAddAfter(block) {
+      const current = get_index_path_for_element_default(block);
+      const parts = current.split(".").map((part) => {
+        return parseInt(part, 10);
+      });
+      const has_invalid_number = parts.some((value) => {
+        return isNaN(value);
+      });
+      if (parts.length === 0 || has_invalid_number) {
+        throw new import_errors8.InvariantViolation("Invalid index_path for Add After");
+      }
+      const last = parts.pop();
+      if (last === void 0) {
+        throw new import_errors8.InvariantViolation("Unable to compute next index for Add After");
+      }
+      parts.push(last + 1);
+      const index_path = parts.join(".");
+      const url = new URL(window.location.href);
+      const editing = url.searchParams.get("editing") === "true";
+      const path = window.location.pathname;
+      const actionUrl = new URL("/actions", window.location.origin);
+      actionUrl.searchParams.set("path", path);
+      actionUrl.searchParams.set("editing", String(editing));
+      actionUrl.searchParams.set("action_type", "add_block");
+      actionUrl.searchParams.set("index_path", index_path);
+      window.location.href = actionUrl.toString();
+    }
+    enforceTimeVisibility(block) {
+      const shows_time = block.classList.contains("with-time");
+      const time_element = block.querySelector(":scope time");
+      if (!time_element) {
+        return;
+      }
+      if (!shows_time) {
+        time_element.style.display = "none";
+      } else {
+        time_element.style.display = "";
+      }
+    }
+    navigateToBlockLink(block, type) {
+      const block_id = block.id;
+      const link_id = `${block_id}-${type}`;
+      const link_element = document.getElementById(link_id);
+      if (!link_element) {
+        return;
+      }
+      const href = link_element.getAttribute("href");
+      if (href) {
+        window.location.href = href;
+      }
+    }
+    beginDrag(current_y) {
+      if (this.drag_active) {
+        return;
+      }
+      const block = this.drag_origin_block;
+      if (!block) {
+        return;
+      }
+      this.drag_active = true;
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "grabbing";
+      const rect = block.getBoundingClientRect();
+      const ghost = block.cloneNode(true);
+      ghost.style.position = "fixed";
+      ghost.style.top = `${rect.top}px`;
+      ghost.style.left = `${rect.left}px`;
+      ghost.style.width = `${rect.width}px`;
+      ghost.style.pointerEvents = "none";
+      ghost.style.opacity = "0.9";
+      ghost.style.boxShadow = "0 8px 16px rgba(0,0,0,0.2)";
+      ghost.style.zIndex = "9999";
+      document.body.appendChild(ghost);
+      this.drag_ghost = ghost;
+      this.drag_pointer_offset_y = current_y - rect.top;
+      const placeholder = document.createElement("div");
+      placeholder.style.height = `${rect.height}px`;
+      placeholder.style.margin = getComputedStyle(block).margin;
+      placeholder.style.border = "2px dashed #888";
+      placeholder.style.borderRadius = "4px";
+      placeholder.style.boxSizing = "border-box";
+      if (block.parentElement !== null) {
+        block.parentElement.insertBefore(placeholder, block);
+      }
+      this.drag_placeholder = placeholder;
+      block.style.display = "none";
+      this.updatePlaceholderPosition(current_y);
+    }
+    updatePlaceholderPosition(cursor_y) {
+      const placeholder = this.drag_placeholder;
+      const origin = this.drag_origin_block;
+      if (!placeholder || !origin) {
+        return;
+      }
+      const container = placeholder.parentElement;
+      const blocks = this.getSiblingBlocks(container, origin);
+      let inserted = false;
+      for (let i = 0; i < blocks.length; i++) {
+        const element = blocks[i];
+        const rect = element.getBoundingClientRect();
+        const midpoint = rect.top + rect.height / 2;
+        if (cursor_y < midpoint) {
+          const parent = element.parentElement;
+          if (parent) {
+            parent.insertBefore(placeholder, element);
+          }
+          inserted = true;
+          break;
+        }
+      }
+      if (!inserted) {
+        const last_element = blocks[blocks.length - 1];
+        if (last_element) {
+          const parent = last_element.parentElement;
+          if (parent) {
+            parent.appendChild(placeholder);
+          }
+        }
+      }
+    }
+    animateWithFlip(preceding_rects, blocks_after) {
+      blocks_after.forEach((element) => {
+        const first = preceding_rects.get(element);
+        if (!first) {
+          return;
+        }
+        const last_rect = element.getBoundingClientRect();
+        const delta_y = first.top - last_rect.top;
+        if (delta_y === 0) {
+          return;
+        }
+        element.style.transition = "";
+        element.style.transform = `translateY(${delta_y}px)`;
+        void element.getBoundingClientRect();
+        element.style.transition = "transform 120ms ease";
+        element.style.transform = "translateY(0)";
+        const cleanup = () => {
+          element.style.transition = "";
+          element.style.transform = "";
+          element.removeEventListener("transitionend", cleanup);
+        };
+        element.addEventListener("transitionend", cleanup);
+      });
+    }
+    async postReposition(source_index_path, target_index_path, editing) {
+      const form = new FormData();
+      form.set("path", window.location.pathname);
+      form.set("action_type", action_type_default.REPOSITION_BLOCK);
+      form.set("source_index_path", source_index_path);
+      form.set("target_index_path", target_index_path);
+      const response = await fetch(`/actions?editing=${editing}`, {
+        method: "POST",
+        body: form,
+        credentials: "same-origin",
+        redirect: "follow"
+      });
+      try {
+        const url_object = new URL(response.url, window.location.origin);
+        return url_object.searchParams.get("index_path");
+      } catch (_) {
+        return null;
+      }
+    }
+    computeTargetIndexPath(placeholder) {
+      if (!placeholder) {
+        return null;
+      }
+      const parent = placeholder.parentElement;
+      if (!parent) {
+        return null;
+      }
+      let index = 0;
+      const children_elements = Array.from(parent.children);
+      for (let i = 0; i < children_elements.length; i++) {
+        const child_element = children_elements[i];
+        if (child_element === placeholder) {
+          break;
+        }
+        if (child_element.classList.contains("block")) {
+          index += 1;
+        }
+      }
+      return index.toString();
+    }
+    updateTopLevelIndexPaths() {
+      const wrapper = document.querySelector("main .section-wrapper");
+      let blocks;
+      if (wrapper) {
+        const node_list = wrapper.querySelectorAll(":scope > section.block");
+        blocks = Array.from(node_list);
+      } else {
+        const node_list = document.querySelectorAll("main > section.block");
+        blocks = Array.from(node_list);
+      }
+      for (let i = 0; i < blocks.length; i++) {
+        blocks[i].setAttribute("data-index-path", i.toString());
+      }
+    }
+    cleanupDragElements() {
+      if (this.drag_ghost && this.drag_ghost.parentElement) {
+        this.drag_ghost.parentElement.removeChild(this.drag_ghost);
+      }
+      if (this.drag_placeholder && this.drag_placeholder.parentElement) {
+        if (this.drag_origin_block) {
+          this.drag_placeholder.parentElement.insertBefore(this.drag_origin_block, this.drag_placeholder);
+        }
+        this.drag_placeholder.parentElement.removeChild(this.drag_placeholder);
+      }
+      if (this.drag_origin_block) {
+        this.drag_origin_block.style.display = "";
+      }
+      this.drag_ghost = null;
+      this.drag_placeholder = null;
+      document.body.style.userSelect = "";
+      document.body.style.cursor = "";
+    }
+    resetDragState() {
+      this.cleanupDragElements();
+      this.drag_active = false;
+      this.drag_origin_block = null;
+      this.drag_start_y = null;
+      this.drag_pointer_offset_y = null;
+    }
+    clearPressTimer() {
+      if (this.drag_press_timer !== null) {
+        window.clearTimeout(this.drag_press_timer);
+        this.drag_press_timer = null;
+      }
+    }
+    getEventPoint(event) {
+      const touch_event = event;
+      const has_touches = touch_event.touches !== void 0;
+      if (has_touches) {
+        const primary_touch = touch_event.touches[0] || touch_event.changedTouches[0];
+        if (!primary_touch) {
+          return null;
+        }
+        return {
+          clientX: primary_touch.clientX,
+          clientY: primary_touch.clientY
+        };
+      }
+      const mouse_event = event;
+      return {
+        clientX: mouse_event.clientX,
+        clientY: mouse_event.clientY
+      };
+    }
+  };
+  var interaction_default = InteractionHelper;
+
+  // src/client/page/cursor.ts
   var CursorPage = class extends page_default {
     constructor() {
       super();
       this.logged_in = false;
       this.queued_media = null;
       this.ready_media = [];
+      this.drag_helper = new interaction_default();
     }
     initView() {
       this.focusCurrentBlockElement();
       const meta_value = get_meta_value_default("logged_in");
       this.logged_in = meta_value === "true";
+      if (this.isLoggedIn()) {
+        this.drag_helper.attach();
+      }
     }
     initEvents() {
       super.initEvents();
@@ -2283,6 +3104,9 @@
       });
     }
     handleGenericClick(event) {
+      if (this.drag_helper.isDragging()) {
+        return;
+      }
       if (!this.hasActiveMedia()) {
         return;
       }
@@ -2396,13 +3220,13 @@
       const link_id = `${block_id}-add-to-playlist`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Unable to find playlist link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Unable to find playlist link href for block: ${block_id}
 			`);
       }
@@ -2430,7 +3254,7 @@
       const form_id = `${block_id}-promote`;
       const form_element = document.getElementById(form_id);
       if (form_element === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Unable to find promotion form element for block: ${block_id}
 			`);
       }
@@ -2448,7 +3272,7 @@
       const form_id = `${block_id}-demote`;
       const form_element = document.getElementById(form_id);
       if (form_element === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Unable to find demotion form element for block: ${block_id}
 			`);
       }
@@ -2487,7 +3311,7 @@
       const block_elements = this.getBlockElements();
       let found = false;
       block_elements.forEach((block_element) => {
-        const sibling_path = getIndexPathForElement(block_element);
+        const sibling_path = get_index_path_for_element_default(block_element);
         const is_match = sibling_path === index_path;
         block_element.classList.toggle("selected", is_match);
         if (is_match) {
@@ -2495,7 +3319,7 @@
         }
       });
       if (!found) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to navigate to element at index path ${index_path},
 				but matching element was not found
 			`);
@@ -2535,7 +3359,7 @@
       if (element === null) {
         return "0";
       }
-      return getIndexPathForElement(element);
+      return get_index_path_for_element_default(element);
     }
     getCurrentBlockNumericIndex() {
       const index = this.getCurrentBlockIndex();
@@ -2564,7 +3388,7 @@
         return null;
       }
       const element = block_elements.find((element2) => {
-        const attribute = getIndexPathForElement(element2);
+        const attribute = get_index_path_for_element_default(element2);
         return attribute === index_path;
       });
       return element || null;
@@ -2575,7 +3399,7 @@
       if (first_block === void 0) {
         return null;
       }
-      return getIndexPathForElement(first_block);
+      return get_index_path_for_element_default(first_block);
     }
     getLastBlockIndex() {
       const blocks = this.getBlockElements();
@@ -2583,7 +3407,7 @@
       if (last_block === void 0) {
         return null;
       }
-      return getIndexPathForElement(last_block);
+      return get_index_path_for_element_default(last_block);
     }
     getNextBlockIndex() {
       const current_block = this.getCurrentBlockElement();
@@ -2593,7 +3417,7 @@
       if (next_block === void 0) {
         return null;
       }
-      return getIndexPathForElement(next_block);
+      return get_index_path_for_element_default(next_block);
     }
     getPreviousBlockIndex() {
       const current_block = this.getCurrentBlockElement();
@@ -2612,14 +3436,14 @@
       }
       const attribute = block_element.getAttribute("data-block-type");
       if (attribute === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to activate current block, but it did not have a block type
 			`);
       }
       const block_type = attribute;
       const block_types = Object.values(block_type_default);
       if (!block_types.includes(block_type)) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Invalid block type: ${block_type}
 			`);
       }
@@ -2640,7 +3464,7 @@
       const forms = block_element.getElementsByTagName("form");
       const form = forms[0];
       if (form === void 0) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to activate form for todo block, but it was not set
 			`);
       }
@@ -2657,7 +3481,7 @@
     activateAudioBlock(block_element) {
       const audio_element = block_element.querySelectorAll("audio")[0];
       if (audio_element === void 0) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to read audio element for block, but it was not present
 			`);
       }
@@ -2678,11 +3502,11 @@
       this.pauseActiveMedia();
       const media_block = element.closest("section.block");
       if (media_block === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to access closest block wrapper for media, but it was not found
 			`);
       }
-      const index_path = getIndexPathForElement(media_block);
+      const index_path = get_index_path_for_element_default(media_block);
       this.navigateToIndex(index_path);
       this.focusCurrentBlockElement();
       const persistent_element = document.getElementById("persistent-audio");
@@ -2692,27 +3516,27 @@
       const track_source = media_block.querySelector('[data-role="track_name"]');
       const artist_source = media_block.querySelector('[data-role="artist_name"]');
       if (persistent_audio === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to access persistent audio element, but it was not found
 			`);
       }
       if (track_target === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to access persistent track name element, but it was not found
 			`);
       }
       if (artist_target === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to access persistent artist name element, but it was not found
 			`);
       }
       if (track_source === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to read track name source, but it was not found
 			`);
       }
       if (artist_source === null) {
-        throw new import_errors7.InvariantViolation(`
+        throw new import_errors9.InvariantViolation(`
 				Tried to read artist name source, but it was not found
 			`);
       }
@@ -2737,7 +3561,7 @@
       if (block !== null) {
         const duration_label = block.querySelector('[data-role="duration"]');
         if (duration_label === null) {
-          throw new import_errors7.InvariantViolation(`
+          throw new import_errors9.InvariantViolation(`
 					Tried to read duration label for media block, but it was not found
 				`);
         }
@@ -2840,7 +3664,7 @@
   var create_block_default = CreateBlockPage;
 
   // src/client/page/edit-block.ts
-  var import_errors8 = __toESM(require_src2());
+  var import_errors10 = __toESM(require_src2());
   var EditBlockPage = class extends page_default {
     initEvents() {
       super.initEvents();
@@ -2857,7 +3681,7 @@
           }
         }
         if (form === void 0) {
-          throw new import_errors8.InvariantViolation(`
+          throw new import_errors10.InvariantViolation(`
 					Tried to read form for textarea, but it was not set
 				`);
         }
@@ -2873,7 +3697,7 @@
   var edit_block_default = EditBlockPage;
 
   // src/client/page/view-custom.ts
-  var import_errors9 = __toESM(require_src2());
+  var import_errors11 = __toESM(require_src2());
   var ViewCustomPage = class extends cursor_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -2903,13 +3727,13 @@
       const link_id = `${block_id}-edit`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find edit link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find edit link href for block: ${block_id}
 			`);
       }
@@ -2922,7 +3746,7 @@
       const current_path = this.getCurrentBlockIndex();
       const top_level_index = parseInt(current_path, 10);
       if (isNaN(top_level_index)) {
-        throw new import_errors9.InvariantViolation(`Invalid index path: ${current_path}`);
+        throw new import_errors11.InvariantViolation(`Invalid index path: ${current_path}`);
       }
       const add_block_links = document.querySelectorAll('[data-role="add_block_link"]');
       const link_index = (() => {
@@ -2934,14 +3758,14 @@
       })();
       const link = add_block_links[link_index];
       if (link === void 0) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read link at index ${link_index},
 				but it was not found
 			`);
       }
       const href = link.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read href for link at index ${link_index},
 				but it was not set
 			`);
@@ -2960,13 +3784,13 @@
       const link_id = `${block_id}-move`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find move link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find move link href for block: ${block_id}
 			`);
       }
@@ -2987,13 +3811,13 @@
       const link_id = `${block_id}-hide`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find hide link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find hide link href for block: ${block_id}
 			`);
       }
@@ -3004,13 +3828,13 @@
       const link_id = `${block_id}-delete`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find deletion link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find deletion link href for block: ${block_id}
 			`);
       }
@@ -3039,7 +3863,7 @@
   var edit_custom_default = EditCustomPage;
 
   // src/client/page/confirm-delete-block.ts
-  var import_errors10 = __toESM(require_src2());
+  var import_errors12 = __toESM(require_src2());
   var ConfirmDeleteBlockPage = class extends page_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -3052,7 +3876,7 @@
     submitDeletionForm() {
       const element = document.getElementById("deletion-form");
       if (element === null) {
-        throw new import_errors10.InvariantViolation("Could not find deletion form element");
+        throw new import_errors12.InvariantViolation("Could not find deletion form element");
       }
       const form = element;
       form.submit();
@@ -3061,7 +3885,7 @@
   var confirm_delete_block_default = ConfirmDeleteBlockPage;
 
   // src/client/page/confirm-hide-block.ts
-  var import_errors11 = __toESM(require_src2());
+  var import_errors13 = __toESM(require_src2());
   var ConfirmHideBlockPage = class extends page_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -3074,7 +3898,7 @@
     submitHideForm() {
       const element = document.getElementById("hide-form");
       if (element === null) {
-        throw new import_errors11.InvariantViolation("Could not find hide form element");
+        throw new import_errors13.InvariantViolation("Could not find hide form element");
       }
       const form = element;
       form.submit();
@@ -3167,7 +3991,7 @@
       const page_type = meta_value;
       const page_types = Object.values(page_type_default);
       if (!page_types.includes(page_type)) {
-        throw new import_errors12.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Invalid page type: ${page_type}
 			`);
       }