@fc3/mmcadi 0.1.63 → 0.1.65

package/dist/client.js

@@ -259,9 +259,9 @@
       };
       Object.defineProperty(exports, "__esModule", { value: true });
       var generic_1 = __importDefault(require_generic());
-      var InvariantViolation14 = class extends generic_1.default {
+      var InvariantViolation17 = class extends generic_1.default {
       };
-      exports.default = InvariantViolation14;
+      exports.default = InvariantViolation17;
     }
   });
 
@@ -968,18 +968,18 @@
     "node_modules/@fc3/time/dist/src/enum/time-interval.js"(exports) {
       "use strict";
       Object.defineProperty(exports, "__esModule", { value: true });
-      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;
+      var TimeInterval4;
+      (function(TimeInterval5) {
+        TimeInterval5[TimeInterval5["ONE_FRAME"] = 16] = "ONE_FRAME";
+        TimeInterval5[TimeInterval5["ONE_SECOND"] = 1e3] = "ONE_SECOND";
+        TimeInterval5[TimeInterval5["ONE_MINUTE"] = 6e4] = "ONE_MINUTE";
+        TimeInterval5[TimeInterval5["ONE_HOUR"] = 36e5] = "ONE_HOUR";
+        TimeInterval5[TimeInterval5["ONE_DAY"] = 864e5] = "ONE_DAY";
+        TimeInterval5[TimeInterval5["ONE_WEEK"] = 6048e5] = "ONE_WEEK";
+        TimeInterval5[TimeInterval5["ONE_MONTH"] = 2592e6] = "ONE_MONTH";
+        TimeInterval5[TimeInterval5["ONE_YEAR"] = 31536e6] = "ONE_YEAR";
+      })(TimeInterval4 || (TimeInterval4 = {}));
+      exports.default = TimeInterval4;
     }
   });
 
@@ -1725,7 +1725,7 @@
   });
 
   // src/client/client.ts
-  var import_errors14 = __toESM(require_src2());
+  var import_errors17 = __toESM(require_src2());
 
   // src/client/enum/page-type.ts
   var PageType = /* @__PURE__ */ ((PageType2) => {
@@ -1927,6 +1927,7 @@
     BlockType2["FOLDER"] = "folder";
     BlockType2["MULTI_COLUMN"] = "multi_column";
     BlockType2["LINK"] = "link";
+    BlockType2["INPUT"] = "input";
     BlockType2["TODO"] = "todo";
     BlockType2["LIST"] = "list";
     BlockType2["REDIRECT"] = "redirect";
@@ -1935,6 +1936,7 @@
     BlockType2["PARAMETER"] = "parameter";
     BlockType2["CARD"] = "card";
     BlockType2["TABLE"] = "table";
+    BlockType2["BUTTON"] = "button";
     return BlockType2;
   })(BlockType || {});
   var block_type_default = BlockType;
@@ -2130,44 +2132,94 @@
   var year_default = YearPage;
 
   // src/client/page/select-block-type.ts
+  var import_errors5 = __toESM(require_src2());
+
+  // src/common/utility/get-input-character-for-block-type.ts
   var import_errors4 = __toESM(require_src2());
+  var BlockTypeCharacters = {
+    [block_type_default.HEADER]: "h",
+    [block_type_default.NOTE]: "n",
+    [block_type_default.IMAGE]: "i",
+    [block_type_default.VIDEO]: "v",
+    [block_type_default.AUDIO]: "a",
+    [block_type_default.EPHEMERAL]: "",
+    [block_type_default.CALENDAR]: "",
+    [block_type_default.DIRECTORY]: "",
+    [block_type_default.FOLDER]: "f",
+    [block_type_default.MULTI_COLUMN]: "m",
+    [block_type_default.LINK]: "l",
+    [block_type_default.INPUT]: "x",
+    [block_type_default.TODO]: "t",
+    [block_type_default.LIST]: "",
+    [block_type_default.REDIRECT]: "r",
+    [block_type_default.BACKGROUND]: "b",
+    [block_type_default.WHITESPACE]: "w",
+    [block_type_default.PARAMETER]: "p",
+    [block_type_default.CARD]: "c",
+    [block_type_default.TABLE]: "",
+    [block_type_default.BUTTON]: ""
+  };
+  function getInputCharacterForBlockType(block_type) {
+    const character = BlockTypeCharacters[block_type];
+    if (character === void 0) {
+      throw new import_errors4.InvariantViolation(`
+			Tried to read input character for block type "${block_type}",
+			but it was not set
+		`);
+    }
+    return character;
+  }
+  var get_input_character_for_block_type_default = getInputCharacterForBlockType;
+
+  // src/client/page/select-block-type.ts
+  function getKeyCodeForCharacter(character) {
+    const uppercase_character = character.toUpperCase();
+    const entries = Object.entries(key_code_default);
+    const entry = entries.find((entry2) => {
+      const [key, _2] = entry2;
+      return key === uppercase_character;
+    });
+    if (entry === void 0) {
+      return null;
+    }
+    const [_, value] = entry;
+    return value;
+  }
+  function getKeyCodeForBlockType(block_type) {
+    const input_character = get_input_character_for_block_type_default(block_type);
+    if (input_character === "") {
+      return null;
+    }
+    const keycode = getKeyCodeForCharacter(input_character);
+    return keycode;
+  }
   var SelectBlockTypePage = class extends page_default {
-    handleKey(key_code) {
-      switch (key_code) {
-        case key_code_default.N:
-          return this.createBlockOfType(block_type_default.NOTE);
-        case key_code_default.I:
-          return this.createBlockOfType(block_type_default.IMAGE);
-        case key_code_default.A:
-          return this.createBlockOfType(block_type_default.AUDIO);
-        case key_code_default.T:
-          return this.createBlockOfType(block_type_default.TODO);
-        case key_code_default.H:
-          return this.createBlockOfType(block_type_default.HEADER);
-        case key_code_default.F:
-          return this.createBlockOfType(block_type_default.FOLDER);
-        case key_code_default.L:
-          return this.createBlockOfType(block_type_default.LINK);
-        case key_code_default.M:
-          return this.createBlockOfType(block_type_default.MULTI_COLUMN);
-        case key_code_default.W:
-          return this.createBlockOfType(block_type_default.WHITESPACE);
-        default:
-          return super.handleKey(key_code);
+    handleKey(keycode) {
+      const block_types = Object.values(block_type_default);
+      const found = block_types.some((block_type) => {
+        const block_keycode = getKeyCodeForBlockType(block_type);
+        if (block_keycode !== keycode) {
+          return false;
+        }
+        this.createBlockOfType(block_type);
+        return true;
+      });
+      if (!found) {
+        return super.handleKey(keycode);
       }
     }
     createBlockOfType(block_type) {
       const id = `add-block-${block_type}`;
       const element = document.getElementById(id);
       if (element === null) {
-        throw new import_errors4.InvariantViolation(`
+        throw new import_errors5.InvariantViolation(`
 				Tried to create block of type ${block_type},
 				but the creation link was not found
 			`);
       }
       const href = element.getAttribute("href");
       if (href === null) {
-        throw new import_errors4.InvariantViolation(`
+        throw new import_errors5.InvariantViolation(`
 				Tried to create block of type ${block_type},
 				but the creation href was not present on the link element
 			`);
@@ -2178,21 +2230,64 @@
   var select_block_type_default = SelectBlockTypePage;
 
   // src/client/page/cursor.ts
-  var import_errors9 = __toESM(require_src2());
+  var import_errors12 = __toESM(require_src2());
   var import_array = __toESM(require_src3());
   var import_time2 = __toESM(require_src6());
 
+  // src/enum/action-type.ts
+  var ActionType = /* @__PURE__ */ ((ActionType2) => {
+    ActionType2["PREVIEW_BLOCK"] = "preview_block";
+    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/server/utility/parse-index-path.ts
+  var import_errors6 = __toESM(require_src2());
+  function parseIndexPath(index_path) {
+    if (index_path === void 0) {
+      throw new import_errors6.InvariantViolation(`Undefined index path`);
+    }
+    if (index_path.trim() === "") {
+      throw new import_errors6.InvariantViolation(`Invalid index path: ${index_path}`);
+    }
+    return index_path.split(".").map((part) => {
+      const parsed_part = parseInt(part);
+      if (isNaN(parsed_part)) {
+        throw new import_errors6.InvariantViolation(`Invalid index path: ${index_path}`);
+      }
+      return parsed_part;
+    });
+  }
+  var parse_index_path_default = parseIndexPath;
+
+  // src/server/utility/create-index-path.ts
+  function createIndexPath(parts) {
+    return parts.join(".");
+  }
+  var create_index_path_default = createIndexPath;
+
   // src/client/utility/get-meta-value.ts
-  var import_errors5 = __toESM(require_src2());
+  var import_errors7 = __toESM(require_src2());
   function getMetaValue(name) {
     const element = document.querySelector(`meta[name="${name}"]`);
     if (element === null) {
-      throw new import_errors5.InvariantViolation(`
+      throw new import_errors7.InvariantViolation(`
 			Tried to read ${name} meta tag, but it was not set
 		`);
     }
     if (!(element instanceof HTMLMetaElement)) {
-      throw new import_errors5.InvariantViolation(`
+      throw new import_errors7.InvariantViolation(`
 			Got wrong element for ${name} meta tag: ${element.tagName}
 		`);
     }
@@ -2201,11 +2296,23 @@
   }
   var get_meta_value_default = getMetaValue;
 
+  // src/common/utility/increment-index-path.ts
+  function incrementIndexPath(index_path) {
+    const parsed_path = parse_index_path_default(index_path);
+    const last_value = parsed_path.pop();
+    if (last_value === void 0) {
+      return "0";
+    }
+    parsed_path.push(last_value + 1);
+    return create_index_path_default(parsed_path);
+  }
+  var increment_index_path_default = incrementIndexPath;
+
   // src/server/utility/validate-path.ts
-  var import_errors6 = __toESM(require_src2());
+  var import_errors8 = __toESM(require_src2());
   function validatePath(path) {
     if (!path.startsWith("/")) {
-      throw new import_errors6.InvalidError(`Invalid path: ${path}`);
+      throw new import_errors8.InvalidError(`Invalid path: ${path}`);
     }
   }
   var validate_path_default = validatePath;
@@ -2244,31 +2351,37 @@
 
   // src/client/helper/interaction.ts
   var import_time = __toESM(require_src6());
-  var import_errors8 = __toESM(require_src2());
+  var import_errors11 = __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/recompute-index-paths.ts
+  var import_errors9 = __toESM(require_src2());
+  function recomputeIndexPaths() {
+    const raw_blocks = document.querySelectorAll("section.block");
+    const blocks = Array.from(raw_blocks);
+    let index = 0;
+    blocks.forEach((block) => {
+      const block_parent = block.parentNode;
+      if (block_parent === null) {
+        throw new import_errors9.InvariantViolation(`
+				Tried to read block parent element, but it was not set
+			`);
+      }
+      const multicolumn_ancestor = block_parent.closest("section.block.multi_column");
+      if (multicolumn_ancestor === null) {
+        const index_path = index.toString();
+        block.setAttribute("data-index-path", index_path);
+        index++;
+      }
+    });
+  }
+  var recompute_index_paths_default = recomputeIndexPaths;
 
   // src/client/utility/get-index-path-for-element.ts
-  var import_errors7 = __toESM(require_src2());
+  var import_errors10 = __toESM(require_src2());
   function getIndexPathForElement(element) {
     const value = element.getAttribute("data-index-path");
     if (value === null) {
-      throw new import_errors7.InvariantViolation(
+      throw new import_errors10.InvariantViolation(
         "Tried to read data-index-path for element, but it was not set"
       );
     }
@@ -2407,7 +2520,7 @@
         candidate.classList.remove("drag-candidate");
         const { parentNode } = candidate;
         if (parentNode === null) {
-          throw new import_errors8.InvariantViolation(`
+          throw new import_errors11.InvariantViolation(`
 					Expected drag candidate to be located in a parent, but it was null
 				`);
         }
@@ -2456,13 +2569,13 @@
       const start_coordinate = this.getDragStartCoordinate();
       const current_coordinate = this.getDragCurrentCoordinate();
       if (start_coordinate === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read start coordinate during touch event,
 				but it was not set
 			`);
       }
       if (current_coordinate === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read current coordinate during touch event,
 				but it was not set
 			`);
@@ -2479,7 +2592,7 @@
         element.style.transform = `translateX(${normalized_delta}px)`;
         const nav = element.querySelector("nav");
         if (nav === null) {
-          throw new import_errors8.InvariantViolation(`
+          throw new import_errors11.InvariantViolation(`
 					Tried to read nav element for block, but it was not found
 				`);
         }
@@ -2514,7 +2627,7 @@
         block.classList.remove("swiping");
         const nav = block.querySelector("nav");
         if (nav === null) {
-          throw new import_errors8.InvariantViolation(`
+          throw new import_errors11.InvariantViolation(`
 					Tried to read nav within swiping block, but it was not found
 				`);
         }
@@ -2580,7 +2693,7 @@
       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(`
+        throw new import_errors11.InvariantViolation(`
 				Drag coordinate attributes were invalid:
 				x: ${x_attribute}
 				y: ${y_attribute}
@@ -2589,7 +2702,7 @@
       const parsed_x = parseInt(x_attribute);
       const parsed_y = parseInt(y_attribute);
       if (isNaN(parsed_x) || isNaN(parsed_y)) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Drag coordinate attributes were invalid:
 				x: ${x_attribute}
 				y: ${y_attribute}
@@ -2602,7 +2715,7 @@
       const y_delta = current_y - start_y;
       const container = document.querySelector("main");
       if (container === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find <main> container element in the DOM
 			`);
       }
@@ -2684,7 +2797,7 @@
     }
     getLastScrollTime() {
       if (this.last_scroll_time === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read last scroll time, but it was not set
 			`);
       }
@@ -2735,7 +2848,7 @@
       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(`
+        throw new import_errors11.InvariantViolation(`
 				Unable to find ghost for block with index path ${index_path}
 			`);
       }
@@ -2747,7 +2860,7 @@
       const ghost = this.getGhostForBlock(block);
       let index = siblings.indexOf(ghost);
       if (index === -1) {
-        throw new import_errors8.InvariantViolation("Unable to locate ghost within siblings");
+        throw new import_errors11.InvariantViolation("Unable to locate ghost within siblings");
       }
       while (index--) {
         const sibling = siblings[index];
@@ -2771,7 +2884,7 @@
       const ghost = this.getGhostForBlock(block);
       let index = siblings.indexOf(ghost);
       if (index === -1) {
-        throw new import_errors8.InvariantViolation("Unable to locate ghost within siblings");
+        throw new import_errors11.InvariantViolation("Unable to locate ghost within siblings");
       }
       index++;
       while (index < siblings.length) {
@@ -2848,32 +2961,13 @@
         element.classList.remove("dragging");
         ghost.replaceWith(element);
         element.style.opacity = "1";
+        recompute_index_paths_default();
       }
-      this.recomputeIndexPaths();
-    }
-    recomputeIndexPaths() {
-      const raw_blocks = document.querySelectorAll("section.block");
-      const blocks = Array.from(raw_blocks);
-      let index = 0;
-      blocks.forEach((block) => {
-        const block_parent = block.parentNode;
-        if (block_parent === null) {
-          throw new import_errors8.InvariantViolation(`
-					Tried to read block parent element, but it was not set
-				`);
-        }
-        const multicolumn_ancestor = block_parent.closest("section.block.multi_column");
-        if (multicolumn_ancestor === null) {
-          const index_path = index.toString();
-          block.setAttribute("data-index-path", index_path);
-          index++;
-        }
-      });
     }
     getIndexPathForGhost(ghost) {
       const parent_element = ghost.parentNode;
       if (parent_element === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read parent element for ghost, but it was not set
 			`);
       }
@@ -2901,18 +2995,12 @@
       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`, {
+      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) {
       const { touches } = event;
@@ -2942,7 +3030,7 @@
     }
     getCurrentScrollY() {
       if (this.current_scroll_y === null) {
-        throw new import_errors8.InvariantViolation(`
+        throw new import_errors11.InvariantViolation(`
 				Tried to read current scroll y, but it was not set
 			`);
       }
@@ -3034,7 +3122,7 @@
       if (activator !== null) {
         const block = activator.closest("section.block");
         if (block === null) {
-          throw new import_errors9.InvariantViolation(`
+          throw new import_errors12.InvariantViolation(`
 					Unable to handle activator; no wrapping block was found
 				`);
         }
@@ -3071,6 +3159,9 @@
         return;
       }
       const html = await response.text();
+      this.injectHtml(html, path);
+    }
+    injectHtml(html, fallback_path) {
       const parser = new DOMParser();
       const updated_document = parser.parseFromString(html, "text/html");
       const tags = ["header", "main", "footer"];
@@ -3083,7 +3174,7 @@
           continue;
         }
         if (old_element === null || new_element === null) {
-          window.location.href = path;
+          window.location.href = fallback_path;
           return;
         }
         old_element.replaceWith(new_element);
@@ -3136,13 +3227,13 @@
       const link_id = `${block_id}-add-to-playlist`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Unable to find playlist link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Unable to find playlist link href for block: ${block_id}
 			`);
       }
@@ -3162,37 +3253,72 @@
       if (!this.isLoggedIn()) {
         return;
       }
-      const block_element = this.getCurrentBlockElement();
-      if (block_element === null) {
+      const source_index_path = this.getCurrentBlockIndex();
+      const target_index_path = this.getPreviousBlockIndex();
+      if (target_index_path === null) {
         return;
       }
-      const block_id = block_element.id;
-      const form_id = `${block_id}-promote`;
-      const form_element = document.getElementById(form_id);
-      if (form_element === null) {
-        throw new import_errors9.InvariantViolation(`
-				Unable to find promotion form element for block: ${block_id}
-			`);
+      const parsed_source = parse_index_path_default(source_index_path);
+      const parsed_target = parse_index_path_default(target_index_path);
+      if (parsed_target.length > parsed_source.length) {
+        const new_last_sibling_index_path = increment_index_path_default(target_index_path);
+        this.submitReposition(source_index_path, new_last_sibling_index_path);
+      } else {
+        this.submitReposition(source_index_path, target_index_path);
       }
-      form_element.submit();
     }
     demoteCurrentBlock() {
       if (!this.isLoggedIn()) {
         return;
       }
-      const block_element = this.getCurrentBlockElement();
-      if (block_element === null) {
+      const source_index_path = this.getCurrentBlockIndex();
+      const target_index_path = this.getNextBlockIndex();
+      if (target_index_path === null) {
         return;
       }
-      const block_id = block_element.id;
-      const form_id = `${block_id}-demote`;
-      const form_element = document.getElementById(form_id);
-      if (form_element === null) {
-        throw new import_errors9.InvariantViolation(`
-				Unable to find demotion form element for block: ${block_id}
+      const next_block = this.getBlockElementForIndexPath(target_index_path);
+      if (next_block === null) {
+        throw new import_errors12.InvariantViolation(`
+				Tried to read next block, but it was not set
 			`);
       }
-      form_element.submit();
+      const attribute = next_block.getAttribute("data-block-type");
+      if (attribute === null) {
+        throw new import_errors12.InvariantViolation(`
+				Tried to read block type attribute from next block, but it was not set
+			`);
+      }
+      const block_type = attribute;
+      if (block_type !== block_type_default.MULTI_COLUMN) {
+        this.submitReposition(source_index_path, target_index_path);
+        return;
+      }
+      const parsed_path = parse_index_path_default(target_index_path);
+      parsed_path.push(0);
+      const new_first_child_path = create_index_path_default(parsed_path);
+      this.submitReposition(source_index_path, new_first_child_path);
+    }
+    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",
+        headers: {
+          "Accept": "text/html"
+        }
+      });
+      const html = await response.text();
+      const url = new URL(response.url);
+      url.searchParams.delete("toast_message");
+      url.searchParams.delete("toast_color");
+      history.replaceState({}, "", url);
+      this.injectHtml(html, response.url);
     }
     performPageJump() {
       if (!this.shiftIsPressed()) {
@@ -3235,7 +3361,7 @@
         }
       });
       if (!found) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to navigate to element at index path ${index_path},
 				but matching element was not found
 			`);
@@ -3271,11 +3397,12 @@
       }
     }
     getCurrentBlockIndex() {
-      const element = this.getCurrentBlockElement();
-      if (element === null) {
-        return "0";
+      const query_path = this.getQueryParameter("index_path");
+      if (query_path !== void 0) {
+        return query_path;
       }
-      return get_index_path_for_element_default(element);
+      const first_block_index = this.getFirstBlockIndex();
+      return first_block_index || "0";
     }
     getCurrentBlockNumericIndex() {
       const index = this.getCurrentBlockIndex();
@@ -3286,23 +3413,14 @@
       return Array.from(elements);
     }
     getCurrentBlockElement() {
-      const block_elements = this.getBlockElements();
-      const selected_element = block_elements.find((element2) => {
-        return element2.classList.contains("selected");
-      });
-      if (selected_element !== void 0) {
-        return selected_element;
-      }
-      const index_path = (() => {
-        const query_path = this.getQueryParameter("index_path");
-        if (query_path !== void 0) {
-          return query_path;
-        }
-        return this.getFirstBlockIndex();
-      })();
+      const index_path = this.getCurrentBlockIndex();
       if (index_path === null) {
         return null;
       }
+      return this.getBlockElementForIndexPath(index_path);
+    }
+    getBlockElementForIndexPath(index_path) {
+      const block_elements = this.getBlockElements();
       const element = block_elements.find((element2) => {
         const attribute = get_index_path_for_element_default(element2);
         return attribute === index_path;
@@ -3354,14 +3472,14 @@
     activateBlock(block_element) {
       const attribute = block_element.getAttribute("data-block-type");
       if (attribute === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.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_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Invalid block type: ${block_type}
 			`);
       }
@@ -3382,7 +3500,7 @@
       const forms = block_element.getElementsByTagName("form");
       const form = forms[0];
       if (form === void 0) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to activate form for todo block, but it was not set
 			`);
       }
@@ -3399,7 +3517,7 @@
     activateAudioBlock(block_element) {
       const audio_element = block_element.querySelector("audio");
       if (audio_element === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to read audio element for block, but it was not present
 			`);
       }
@@ -3428,7 +3546,7 @@
       this.pauseActiveMedia();
       const media_block = element.closest("section.block");
       if (media_block === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to access closest block wrapper for media, but it was not found
 			`);
       }
@@ -3438,7 +3556,7 @@
       const persistent_element = document.getElementById("persistent-audio");
       const persistent_audio = persistent_element;
       if (persistent_audio === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to access persistent audio element, but it was not found
 			`);
       }
@@ -3451,22 +3569,22 @@
       const track_source = media_block.querySelector('[data-role="track_name"]');
       const artist_source = media_block.querySelector('[data-role="artist_name"]');
       if (track_target === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to access persistent track name element, but it was not found
 			`);
       }
       if (artist_target === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to access persistent artist name element, but it was not found
 			`);
       }
       if (track_source === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to read track name source, but it was not found
 			`);
       }
       if (artist_source === null) {
-        throw new import_errors9.InvariantViolation(`
+        throw new import_errors12.InvariantViolation(`
 				Tried to read artist name source, but it was not found
 			`);
       }
@@ -3528,7 +3646,7 @@
       if (block !== null) {
         const duration_label = block.querySelector('[data-role="duration"]');
         if (duration_label === null) {
-          throw new import_errors9.InvariantViolation(`
+          throw new import_errors12.InvariantViolation(`
 					Tried to read duration label for media block, but it was not found
 				`);
         }
@@ -3632,12 +3750,148 @@
   var select_block_destination_default = SelectBlockDestinationPage;
 
   // src/client/page/edit-block.ts
-  var import_errors10 = __toESM(require_src2());
+  var import_errors13 = __toESM(require_src2());
+  var import_time3 = __toESM(require_src6());
   var EditBlockPage = class extends page_default {
+    constructor() {
+      super();
+      this.last_preview_time = Date.now();
+    }
     initEvents() {
       super.initEvents();
+      this.initNumericRangeInputEvents();
       this.initFileInputEvents();
       this.initTextareaEvents();
+      this.initTextInputEvents();
+    }
+    initNumericRangeInputEvents() {
+      const input_nodes = document.querySelectorAll('input[type="range"]');
+      const inputs = Array.from(input_nodes);
+      inputs.forEach((input) => {
+        const handler = () => {
+          const value = input.value;
+          const container = input.closest('[data-role="numeric-range-container"]');
+          if (container === null) {
+            throw new import_errors13.InvariantViolation(`
+						Unable to find numeric range container for range input
+					`);
+          }
+          const raw_labels = container.querySelectorAll('[data-role="numeric-range-value"]');
+          const labels = Array.from(raw_labels);
+          labels.forEach((label) => {
+            label.innerHTML = value;
+          });
+        };
+        input.addEventListener("change", () => {
+          handler();
+          this.loadPreview();
+        });
+        input.addEventListener("input", () => {
+          handler();
+          this.queuePreview();
+        });
+      });
+      ;
+    }
+    async loadPreview() {
+      this.last_preview_time = Date.now();
+      this.clearPreviewTimer();
+      const form = new FormData();
+      const block_type = this.getPreviewInputValue("block_type");
+      const color = this.getPreviewRadioValue("color");
+      const index_path = this.getPreviewInputValue("index_path");
+      const border_width = this.getPreviewInputValue("border_width");
+      const create_role = this.getPreviewInputValue("create_role");
+      const read_role = this.getPreviewInputValue("read_role");
+      const update_role = this.getPreviewInputValue("update_role");
+      const delete_role = this.getPreviewInputValue("delete_role");
+      const visibility = this.getPreviewRadioValue("time_place_visibility");
+      form.set("path", window.location.pathname);
+      form.set("action_type", action_type_default.PREVIEW_BLOCK);
+      form.set("color", color);
+      form.set("block_type", block_type);
+      form.set("index_path", index_path);
+      form.set("border_width", border_width);
+      form.set("create_role", create_role);
+      form.set("read_role", read_role);
+      form.set("update_role", update_role);
+      form.set("delete_role", delete_role);
+      form.set("time_place_visibility", visibility);
+      if (block_type === block_type_default.NOTE) {
+        const text = this.getPreviewInputValue("text");
+        form.set("text", text);
+      }
+      if (block_type === block_type_default.TODO) {
+        const title = this.getPreviewInputValue("title");
+        form.set("title", title);
+      }
+      if (block_type === block_type_default.LINK) {
+        const href = this.getPreviewInputValue("href");
+        const label = this.getPreviewInputValue("label");
+        form.set("href", href);
+        form.set("label", label);
+      }
+      if (block_type === block_type_default.FOLDER) {
+        const title = this.getPreviewInputValue("title");
+        const emoji = this.getPreviewInputValue("emoji");
+        const subtitle = this.getPreviewInputValue("subtitle");
+        form.set("title", title);
+        form.set("emoji", emoji);
+        form.set("subtitle", subtitle);
+      }
+      if (block_type === block_type_default.HEADER) {
+        const title = this.getPreviewInputValue("title");
+        const emoji = this.getPreviewInputValue("emoji");
+        const size = this.getPreviewRadioValue("size");
+        form.set("title", title);
+        form.set("emoji", emoji);
+        form.set("size", size);
+      }
+      if (block_type === block_type_default.INPUT) {
+        const parameter_name = this.getPreviewInputValue("parameter_name");
+        form.set("parameter_name", parameter_name);
+      }
+      if (block_type === block_type_default.BUTTON) {
+        const label = this.getPreviewInputValue("label");
+        form.set("label", label);
+      }
+      const response = await fetch(`/actions`, {
+        method: "POST",
+        body: form,
+        credentials: "same-origin",
+        redirect: "follow"
+      });
+      const html = await response.text();
+      const parser = new DOMParser();
+      const old_element = document.querySelector('[data-role="preview_wrapper"]');
+      const fragment = parser.parseFromString(html, "text/html");
+      const new_element = fragment.querySelector("section");
+      if (old_element === null) {
+        throw new import_errors13.InvariantViolation(`
+				Unable to find current preview wrapper element
+			`);
+      }
+      if (new_element === null) {
+        throw new import_errors13.InvariantViolation(`
+				Unable to find <section> element on block preview HTML response
+			`);
+      }
+      old_element.replaceWith(new_element);
+      new_element.setAttribute("data-role", "preview_wrapper");
+    }
+    clearPreviewTimer() {
+      if (this.preview_timer !== void 0) {
+        clearTimeout(this.preview_timer);
+      }
+    }
+    queuePreview() {
+      this.clearPreviewTimer();
+      const time_since_last_preview = Date.now() - this.last_preview_time;
+      const max_delay = import_time3.TimeInterval.ONE_SECOND / 2;
+      const delay = max_delay - time_since_last_preview;
+      this.preview_timer = setTimeout(() => {
+        this.loadPreview();
+      }, delay);
     }
     initFileInputEvents() {
       const input_nodes = document.querySelectorAll('input[type="file"]');
@@ -3653,7 +3907,7 @@
           });
           const label = input.nextElementSibling;
           if (label === null || !label.matches("label.biglink")) {
-            throw new import_errors10.InvariantViolation(`
+            throw new import_errors13.InvariantViolation(`
 						Tried to handle file change event,
 						but no adjacent label element was found
 					`);
@@ -3666,16 +3920,24 @@
         });
       });
     }
+    initTextInputEvents() {
+      const form = this.getEditForm();
+      const input_nodes = form.querySelectorAll("input,textarea");
+      const inputs = Array.from(input_nodes);
+      inputs.forEach((input) => {
+        input.addEventListener("change", () => {
+          this.loadPreview();
+        });
+        input.addEventListener("input", () => {
+          this.queuePreview();
+        });
+      });
+    }
     initTextareaEvents() {
-      const textarea_nodes = document.querySelectorAll("textarea");
+      const form = this.getEditForm();
+      const textarea_nodes = form.querySelectorAll("textarea");
       const textareas = Array.from(textarea_nodes);
       textareas.forEach((textarea) => {
-        const form = textarea.closest("form");
-        if (form === null) {
-          throw new import_errors10.InvariantViolation(`
-					Tried to read form for textarea, but it was not set
-				`);
-        }
         textarea.addEventListener("keydown", (event) => {
           const key_code = event.keyCode || event.charCode;
           if (key_code === key_code_default.ENTER && event.shiftKey) {
@@ -3685,6 +3947,45 @@
         });
       });
     }
+    getEditForm() {
+      const form = document.querySelector('form[data-role="edit_block"]');
+      if (form === null) {
+        throw new import_errors13.InvariantViolation(`
+				Tried to read edit block form, but it was not found
+			`);
+      }
+      return form;
+    }
+    getPreviewRadioValue(input_name) {
+      const edit_form = this.getEditForm();
+      const input_element = edit_form.querySelector(`[name="${input_name}"]:checked`);
+      if (input_element === null) {
+        throw new import_errors13.InvariantViolation(`
+				Tried to read radio value for input named "${input_name}",
+				but it was not found
+			`);
+      }
+      const input = input_element;
+      return input.value;
+    }
+    getPreviewInputValue(input_name) {
+      const edit_form = this.getEditForm();
+      const input_element = edit_form.querySelector(`[name="${input_name}"]`);
+      if (input_element === null) {
+        throw new import_errors13.InvariantViolation(`
+				Tried to read input value for input named "${input_name}",
+				but it was not found
+			`);
+      }
+      const input = input_element;
+      const input_type = input.getAttribute("type");
+      if (input_type === "radio") {
+        throw new import_errors13.InvariantViolation(`
+				You must use .getPreviewRadioValue() for dealing with radio inputs
+			`);
+      }
+      return input.value;
+    }
   };
   var edit_block_default = EditBlockPage;
 
@@ -3694,7 +3995,7 @@
   var create_block_default = CreateBlockPage;
 
   // src/client/page/view-custom.ts
-  var import_errors11 = __toESM(require_src2());
+  var import_errors14 = __toESM(require_src2());
   var ViewCustomPage = class extends cursor_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -3724,13 +4025,13 @@
       const link_id = `${block_id}-edit`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find edit link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find edit link href for block: ${block_id}
 			`);
       }
@@ -3743,7 +4044,7 @@
       const current_path = this.getCurrentBlockIndex();
       const top_level_index = parseInt(current_path, 10);
       if (isNaN(top_level_index)) {
-        throw new import_errors11.InvariantViolation(`Invalid index path: ${current_path}`);
+        throw new import_errors14.InvariantViolation(`Invalid index path: ${current_path}`);
       }
       const add_block_links = document.querySelectorAll('[data-role="add_block_link"]');
       const link_index = (() => {
@@ -3755,14 +4056,14 @@
       })();
       const link = add_block_links[link_index];
       if (link === void 0) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.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_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Tried to read href for link at index ${link_index},
 				but it was not set
 			`);
@@ -3781,13 +4082,13 @@
       const link_id = `${block_id}-move`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find move link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find move link href for block: ${block_id}
 			`);
       }
@@ -3808,13 +4109,13 @@
       const link_id = `${block_id}-hide`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find hide link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find hide link href for block: ${block_id}
 			`);
       }
@@ -3825,13 +4126,13 @@
       const link_id = `${block_id}-delete`;
       const link_element = document.getElementById(link_id);
       if (link_element === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find deletion link element for block: ${block_id}
 			`);
       }
       const href = link_element.getAttribute("href");
       if (href === null) {
-        throw new import_errors11.InvariantViolation(`
+        throw new import_errors14.InvariantViolation(`
 				Unable to find deletion link href for block: ${block_id}
 			`);
       }
@@ -3860,7 +4161,7 @@
   var edit_custom_default = EditCustomPage;
 
   // src/client/page/confirm-delete-block.ts
-  var import_errors12 = __toESM(require_src2());
+  var import_errors15 = __toESM(require_src2());
   var ConfirmDeleteBlockPage = class extends page_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -3873,7 +4174,7 @@
     submitDeletionForm() {
       const element = document.getElementById("deletion-form");
       if (element === null) {
-        throw new import_errors12.InvariantViolation("Could not find deletion form element");
+        throw new import_errors15.InvariantViolation("Could not find deletion form element");
       }
       const form = element;
       form.submit();
@@ -3882,7 +4183,7 @@
   var confirm_delete_block_default = ConfirmDeleteBlockPage;
 
   // src/client/page/confirm-hide-block.ts
-  var import_errors13 = __toESM(require_src2());
+  var import_errors16 = __toESM(require_src2());
   var ConfirmHideBlockPage = class extends page_default {
     handleKey(key_code) {
       switch (key_code) {
@@ -3895,7 +4196,7 @@
     submitHideForm() {
       const element = document.getElementById("hide-form");
       if (element === null) {
-        throw new import_errors13.InvariantViolation("Could not find hide form element");
+        throw new import_errors16.InvariantViolation("Could not find hide form element");
       }
       const form = element;
       form.submit();
@@ -3988,7 +4289,7 @@
       const page_type = meta_value;
       const page_types = Object.values(page_type_default);
       if (!page_types.includes(page_type)) {
-        throw new import_errors14.InvariantViolation(`
+        throw new import_errors17.InvariantViolation(`
 				Invalid page type: ${page_type}
 			`);
       }