@fc3/mmcadi 0.1.49 → 0.1.51

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;
     }
   });
 
@@ -968,18 +968,18 @@
     "node_modules/@fc3/time/dist/src/enum/time-interval.js"(exports) {
       "use strict";
       Object.defineProperty(exports, "__esModule", { value: true });
-      var TimeInterval2;
-      (function(TimeInterval3) {
-        TimeInterval3[TimeInterval3["ONE_FRAME"] = 16] = "ONE_FRAME";
-        TimeInterval3[TimeInterval3["ONE_SECOND"] = 1e3] = "ONE_SECOND";
-        TimeInterval3[TimeInterval3["ONE_MINUTE"] = 6e4] = "ONE_MINUTE";
-        TimeInterval3[TimeInterval3["ONE_HOUR"] = 36e5] = "ONE_HOUR";
-        TimeInterval3[TimeInterval3["ONE_DAY"] = 864e5] = "ONE_DAY";
-        TimeInterval3[TimeInterval3["ONE_WEEK"] = 6048e5] = "ONE_WEEK";
-        TimeInterval3[TimeInterval3["ONE_MONTH"] = 2592e6] = "ONE_MONTH";
-        TimeInterval3[TimeInterval3["ONE_YEAR"] = 31536e6] = "ONE_YEAR";
-      })(TimeInterval2 || (TimeInterval2 = {}));
-      exports.default = TimeInterval2;
+      var TimeInterval3;
+      (function(TimeInterval4) {
+        TimeInterval4[TimeInterval4["ONE_FRAME"] = 16] = "ONE_FRAME";
+        TimeInterval4[TimeInterval4["ONE_SECOND"] = 1e3] = "ONE_SECOND";
+        TimeInterval4[TimeInterval4["ONE_MINUTE"] = 6e4] = "ONE_MINUTE";
+        TimeInterval4[TimeInterval4["ONE_HOUR"] = 36e5] = "ONE_HOUR";
+        TimeInterval4[TimeInterval4["ONE_DAY"] = 864e5] = "ONE_DAY";
+        TimeInterval4[TimeInterval4["ONE_WEEK"] = 6048e5] = "ONE_WEEK";
+        TimeInterval4[TimeInterval4["ONE_MONTH"] = 2592e6] = "ONE_MONTH";
+        TimeInterval4[TimeInterval4["ONE_YEAR"] = 31536e6] = "ONE_YEAR";
+      })(TimeInterval3 || (TimeInterval3 = {}));
+      exports.default = TimeInterval3;
     }
   });
 
@@ -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,9 +2178,9 @@
   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());
+  var import_time2 = __toESM(require_src6());
 
   // src/client/utility/get-meta-value.ts
   var import_errors5 = __toESM(require_src2());
@@ -2242,30 +2242,429 @@
   })(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_time = __toESM(require_src6());
+  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/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_start_coordinate = null;
+      this.drag_delay_timer = null;
+    }
+    attach() {
+      document.addEventListener("pointerdown", (event) => {
+        this.handlePointerDown(event);
+      }, { capture: true });
+      document.addEventListener("pointermove", (event) => {
+        this.handlePointerMove(event);
+      }, { capture: true, passive: false });
+      document.addEventListener("pointerup", (event) => {
+        this.handlePointerUp(event);
+      }, { capture: true });
+      document.addEventListener("pointercancel", (event) => {
+        this.handlePointerCancel(event);
+      }, { capture: true });
+      document.addEventListener("dragstart", (event) => {
+        this.handleNativeDragStart(event);
+      }, { capture: true });
+    }
+    isDragging() {
+      const elements = Array.from(document.querySelectorAll(".dragging"));
+      return elements.length > 0;
+    }
+    handlePointerDown(event) {
+      const { target } = event;
+      if (target === null) {
+        return;
+      }
+      const target_element = target;
+      let current_element = target_element;
+      while (current_element) {
+        const attribute = current_element.getAttribute("data-role");
+        if (attribute === "block_activation") {
+          break;
+        }
+        if (current_element instanceof HTMLAnchorElement) {
+          return;
+        }
+        current_element = current_element.parentNode;
+        if (!(current_element instanceof HTMLElement)) {
+          break;
+        }
+      }
+      const block = target_element.closest("section.block");
+      if (block === null) {
+        return;
+      }
+      if (target_element.closest("button, input, textarea, select, label, form")) {
+        return;
+      }
+      const coordinate = this.getEventCoordinate(event);
+      if (coordinate === null) {
+        return;
+      }
+      this.drag_start_coordinate = coordinate;
+      block.classList.add("drag-candidate");
+      this.scheduleDelayedDrag();
+    }
+    scheduleDelayedDrag() {
+      this.cancelDelayedDrag();
+      const delay = import_time.TimeInterval.ONE_SECOND;
+      this.drag_delay_timer = setTimeout(this.beginDelayedDrag.bind(this), delay);
+    }
+    cancelDelayedDrag() {
+      if (this.drag_delay_timer !== null) {
+        clearTimeout(this.drag_delay_timer);
+      }
+    }
+    removeClassFromAllElements(class_name) {
+      const raw_elements = document.querySelectorAll(`.${class_name}`);
+      const elements = Array.from(raw_elements);
+      elements.forEach((element) => {
+        element.classList.remove(class_name);
+      });
+      return elements;
+    }
+    beginDelayedDrag() {
+      const raw_candidates = document.querySelectorAll(".drag-candidate");
+      const candidates = Array.from(raw_candidates);
+      candidates.forEach((candidate) => {
+        const ghost = candidate.cloneNode(true);
+        const index_path = get_index_path_for_element_default(candidate);
+        ghost.classList.add("ghost");
+        ghost.setAttribute("data-for", index_path);
+        candidate.classList.remove("drag-candidate");
+        const { parentNode } = candidate;
+        if (parentNode === null) {
+          throw new import_errors8.InvariantViolation(`
+					Expected drag candidate to be located in a parent, but it was null
+				`);
+        }
+        const rect = candidate.getBoundingClientRect();
+        Object.assign(candidate.style, {
+          top: `${rect.top}px`,
+          left: `${rect.left}px`,
+          width: `${rect.width}px`,
+          height: `${rect.height}px`
+        });
+        candidate.setAttribute("data-drag-start-x", rect.left.toString());
+        candidate.setAttribute("data-drag-start-y", rect.top.toString());
+        candidate.classList.add("dragging");
+        parentNode.insertBefore(ghost, candidate);
+      });
+    }
+    handleNativeDragStart(event) {
+      const target = event.target;
+      if (!target) {
+        return;
+      }
+      const closest_block = target.closest("section.block");
+      if (closest_block !== null) {
+        event.preventDefault();
+      }
+    }
+    handlePointerMove(event) {
+      const current_coordinate = this.getEventCoordinate(event);
+      const start_coordinate = this.getDragStartCoordinate();
+      if (start_coordinate === null || current_coordinate === null) {
+        return;
+      }
+      const { target } = event;
+      if (target !== null) {
+        const target_element = target;
+        const block = target_element.closest("section.block");
+        if (block) {
+          if (!block.classList.contains("dragging")) {
+            block.classList.add("drag-candidate");
+          }
+        }
+      }
+      const { x: start_x, y: start_y } = start_coordinate;
+      const { x: current_x, y: current_y } = current_coordinate;
+      const distance = Math.hypot(current_x - start_x, current_y - start_y);
+      if (distance > 25) {
+        this.removeClassFromAllElements("drag-candidate");
+      }
+      this.scheduleDelayedDrag();
+      const raw_targets = document.querySelectorAll(".dragging");
+      const drag_target_blocks = Array.from(raw_targets);
+      drag_target_blocks.forEach((target_block) => {
+        this.translateDragTargetBlock(target_block, current_coordinate);
+      });
+      if (drag_target_blocks.length > 0) {
+        event.preventDefault();
+      }
+    }
+    translateDragTargetBlock(block, current_coordinate) {
+      const x_attribute = block.getAttribute("data-drag-start-x");
+      const y_attribute = block.getAttribute("data-drag-start-y");
+      if (x_attribute === null || y_attribute === null) {
+        throw new import_errors8.InvariantViolation(`
+				Drag coordinate attributes were invalid:
+				x: ${x_attribute}
+				y: ${y_attribute}
+			`);
+      }
+      const parsed_x = parseInt(x_attribute);
+      const parsed_y = parseInt(y_attribute);
+      if (isNaN(parsed_x) || isNaN(parsed_y)) {
+        throw new import_errors8.InvariantViolation(`
+				Drag coordinate attributes were invalid:
+				x: ${x_attribute}
+				y: ${y_attribute}
+			`);
+      }
+      const start_coordinate = this.getDragStartCoordinate();
+      if (start_coordinate === null) {
+        throw new import_errors8.InvariantViolation(`
+				Tried to translate drag target, but drag start coordinate was null
+			`);
+      }
+      const { x: start_x, y: start_y } = start_coordinate;
+      const { x: current_x, y: current_y } = current_coordinate;
+      const x_delta = current_x - start_x;
+      const y_delta = current_y - start_y;
+      const new_x = parsed_x + x_delta;
+      const new_y = parsed_y + y_delta;
+      block.style.left = `${new_x}px`;
+      block.style.top = `${new_y}px`;
+      const block_rect = block.getBoundingClientRect();
+      const previous_block = this.getPreviousBlock(block);
+      const next_block = this.getNextBlock(block);
+      const ghost = this.getGhostForBlock(block);
+      let swapped = false;
+      if (previous_block !== null) {
+        const previous_rect = previous_block.getBoundingClientRect();
+        const previous_block_y_threshold = previous_rect.top + previous_rect.height * 0.4;
+        if (block_rect.top < previous_block_y_threshold) {
+          swapped = true;
+          const next_sibling = ghost.nextElementSibling;
+          previous_block.replaceWith(ghost);
+          if (next_sibling) {
+            next_sibling.before(previous_block);
+          }
+        }
+      }
+      if (next_block !== null && swapped === false) {
+        const next_rect = next_block.getBoundingClientRect();
+        const next_block_y_threshold = next_rect.top + next_rect.height * 0.6;
+        if (block_rect.bottom > next_block_y_threshold) {
+          const next_sibling = ghost.nextElementSibling === next_block ? ghost : ghost.nextElementSibling;
+          next_block.replaceWith(ghost);
+          if (next_sibling) {
+            next_sibling.before(next_block);
+          }
+        }
+      }
+    }
+    getGhostForBlock(block) {
+      const index_path = get_index_path_for_element_default(block);
+      const ghost = document.querySelector(`[data-for="${index_path}"]`);
+      if (ghost === null) {
+        throw new import_errors8.InvariantViolation(`
+				Unable to find ghost for block with index path ${index_path}
+			`);
+      }
+      return ghost;
+    }
+    getPreviousBlock(block) {
+      const parent_node = block.parentNode;
+      const siblings = Array.from(parent_node.children);
+      const ghost = this.getGhostForBlock(block);
+      let index = siblings.indexOf(ghost);
+      if (index === -1) {
+        throw new import_errors8.InvariantViolation("Unable to locate ghost within siblings");
+      }
+      while (index--) {
+        const sibling = siblings[index];
+        if (sibling === block) {
+          continue;
+        }
+        const { classList } = sibling;
+        if (!classList.contains("block")) {
+          continue;
+        }
+        if (classList.contains("ghost")) {
+          continue;
+        }
+        return sibling;
+      }
+      return null;
+    }
+    getNextBlock(block) {
+      const parent_node = block.parentNode;
+      const siblings = Array.from(parent_node.children);
+      const ghost = this.getGhostForBlock(block);
+      let index = siblings.indexOf(ghost);
+      if (index === -1) {
+        throw new import_errors8.InvariantViolation("Unable to locate ghost within siblings");
+      }
+      while (index < siblings.length) {
+        index++;
+        const sibling = siblings[index];
+        if (sibling === block) {
+          continue;
+        }
+        const { classList } = sibling;
+        if (!classList.contains("block")) {
+          continue;
+        }
+        if (classList.contains("ghost")) {
+          continue;
+        }
+        return sibling;
+      }
+      return null;
+    }
+    handlePointerUp(event) {
+      this.stopDragging();
+    }
+    handlePointerCancel(event) {
+      this.stopDragging();
+    }
+    stopDragging() {
+      this.showFullscreenBlockingOverlay();
+      this.stopDraggingAsync().then(() => {
+        this.hideFullscreenBlockingOverlay();
+      });
+    }
+    showFullscreenBlockingOverlay() {
+    }
+    hideFullscreenBlockingOverlay() {
+    }
+    async stopDraggingAsync() {
+      this.cancelDelayedDrag();
+      this.removeClassFromAllElements("drag-candidate");
+      const dragging_elements = this.removeClassFromAllElements("dragging");
+      let index = 0;
+      while (index < dragging_elements.length) {
+        const element = dragging_elements[index++];
+        const ghost = this.getGhostForBlock(element);
+        const source_index_path = get_index_path_for_element_default(element);
+        const target_index_path = this.getIndexPathForGhost(ghost);
+        await this.submitReposition(source_index_path, target_index_path);
+        ghost.replaceWith(element);
+        Object.assign(element.style, {
+          left: "",
+          top: "",
+          right: "",
+          bottom: "",
+          width: "",
+          height: ""
+        });
+      }
+    }
+    getIndexPathSafe(element) {
+      const is_block = element.classList.contains("block");
+      if (!is_block) {
+        return null;
+      }
+      const is_ghost = element.classList.contains("ghost");
+      if (is_ghost) {
+        return null;
+      }
+      return get_index_path_for_element_default(element);
+    }
+    getIndexPathForGhost(ghost) {
+      let current_child = ghost;
+      while (current_child) {
+        const index_path = this.getIndexPathSafe(current_child);
+        if (index_path !== null) {
+          return index_path;
+        }
+        current_child = current_child.nextElementSibling;
+      }
+      current_child = ghost;
+      while (current_child) {
+        const index_path = this.getIndexPathSafe(current_child);
+        if (index_path !== null) {
+          const index_major_version = parseInt(index_path);
+          const next_version = index_major_version + 1;
+          return next_version.toString();
+        }
+        current_child = current_child.previousElementSibling;
+      }
+      return "0";
+    }
+    async submitReposition(source_index_path, target_index_path) {
+      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`, {
+        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;
+      }
+    }
+    getEventCoordinate(event) {
+      return {
+        x: event.clientX,
+        y: event.clientY
+      };
+    }
+    getDragStartCoordinate() {
+      return this.drag_start_coordinate;
+    }
+  };
+  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.interaction_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()) {
+        const interaction_helper = this.getInteractionHelper();
+        interaction_helper.attach();
+      }
     }
     initEvents() {
       super.initEvents();
@@ -2283,7 +2682,8 @@
       });
     }
     handleGenericClick(event) {
-      if (!this.hasActiveMedia()) {
+      const interaction_helper = this.getInteractionHelper();
+      if (interaction_helper.isDragging()) {
         return;
       }
       if (event.defaultPrevented) {
@@ -2300,17 +2700,31 @@
         return;
       }
       const target = event.target;
-      const anchor = target.closest("a[href]");
-      if (anchor === null) {
-        return;
+      const selector = '[data-role="block_activation"]';
+      const activator = (() => {
+        if (target.matches(selector)) {
+          return target;
+        }
+        return target.querySelector(selector) || target.closest(selector);
+      })();
+      if (activator !== null) {
+        const block = activator.closest("section.block");
+        if (block === null) {
+          throw new import_errors9.InvariantViolation(`
+					Unable to handle activator; no wrapping block was found
+				`);
+        }
+        return this.activateBlock(block);
       }
-      const url = new URL(anchor.href, window.location.href);
-      if (url.origin !== window.location.origin) {
-        return;
+      const anchor = target.closest("a[href]");
+      if (anchor !== null && this.hasActiveMedia()) {
+        const url = new URL(anchor.href, window.location.href);
+        if (url.origin === window.location.origin) {
+          const path = url.pathname + url.search + url.hash;
+          this.navigateToPath(path);
+          event.preventDefault();
+        }
       }
-      event.preventDefault();
-      const path = url.pathname + url.search + url.hash;
-      this.navigateToPath(path);
     }
     navigateToPath(path) {
       if (!this.hasActiveMedia()) {
@@ -2365,7 +2779,7 @@
       switch (key_code) {
         case key_code_default.ENTER:
         case key_code_default.O:
-          return this.activateBlock();
+          return this.activateCurrentBlock();
         case key_code_default.G:
           return this.performPageJump();
         case key_code_default.J:
@@ -2396,13 +2810,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 +2844,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 +2862,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 +2901,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 +2909,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 +2949,7 @@
       if (element === null) {
         return "0";
       }
-      return getIndexPathForElement(element);
+      return get_index_path_for_element_default(element);
     }
     getCurrentBlockNumericIndex() {
       const index = this.getCurrentBlockIndex();
@@ -2564,7 +2978,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 +2989,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 +2997,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 +3007,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();
@@ -2605,21 +3019,23 @@
       }
       return previous_block.getAttribute("data-index-path");
     }
-    activateBlock() {
+    activateCurrentBlock() {
       const block_element = this.getCurrentBlockElement();
-      if (block_element === null) {
-        return;
+      if (block_element !== null) {
+        this.activateBlock(block_element);
       }
+    }
+    activateBlock(block_element) {
       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 +3056,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 +3073,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 +3094,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 +3108,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
 			`);
       }
@@ -2731,13 +3147,13 @@
         return;
       }
       const media_target = target;
-      const duration_ms = media_target.duration * import_time.TimeInterval.ONE_SECOND;
-      const timecode = (0, import_time.formatTimecode)(duration_ms);
+      const duration_ms = media_target.duration * import_time2.TimeInterval.ONE_SECOND;
+      const timecode = (0, import_time2.formatTimecode)(duration_ms);
       const block = media_target.closest("section.block");
       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
 				`);
         }
@@ -2803,6 +3219,9 @@
         media_element.pause();
       });
     }
+    getInteractionHelper() {
+      return this.interaction_helper;
+    }
     isLoggedIn() {
       return this.logged_in;
     }
@@ -2840,7 +3259,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 +3276,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 +3292,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 +3322,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 +3341,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 +3353,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 +3379,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 +3406,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 +3423,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 +3458,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 +3471,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 +3480,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 +3493,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 +3586,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}
 			`);
       }