@bitcobblers/wod-wiki-ui 0.44.2157 → 0.44.2159

package/dist/extensions/index.cjs

@@ -1040,15 +1040,22 @@ var embedPreviewDecorations = [
 var POPOVER_MIN_WIDTH = 192;
 var POPOVER_MAX_WIDTH = 320;
 var POPOVER_MAX_HEIGHT = 256;
-function computeInlinePanelBox(field, host, viewportHeight) {
-  const offsetLeft = Math.max(0, Math.min(field.left - host.left, Math.max(0, host.width - POPOVER_MIN_WIDTH)));
-  const room = Math.max(host.width - offsetLeft, POPOVER_MIN_WIDTH);
-  const width = Math.min(Math.max(field.width, POPOVER_MIN_WIDTH), POPOVER_MAX_WIDTH, room);
-  const belowField = Math.max(0, viewportHeight - field.top - 64);
+var POPOVER_GAP = 8;
+function computeFloatingPlacement(field, viewport, panelHeight, avoid, gap = POPOVER_GAP) {
+  const width = Math.min(Math.max(field.width, POPOVER_MIN_WIDTH), POPOVER_MAX_WIDTH);
+  const height = Math.min(Math.max(panelHeight, 0), POPOVER_MAX_HEIGHT);
+  const below = { top: field.bottom + gap, bottom: field.bottom + gap + height };
+  const above = { top: field.top - gap - height};
+  const fitsBelow = below.bottom <= viewport.height;
+  const fitsAbove = above.top >= 0;
+  const coversActions = avoid ? below.bottom > avoid.top && below.top < avoid.bottom : false;
+  const placement = (coversActions || !fitsBelow) && fitsAbove ? "above" : "below";
+  const chosen = placement === "below" ? below : above;
   return {
+    left: Math.min(Math.max(gap, field.left), Math.max(gap, viewport.width - width - gap)),
+    top: Math.min(Math.max(gap, chosen.top), Math.max(gap, viewport.height - height - gap)),
     width,
-    offsetLeft,
-    maxHeight: Math.max(96, Math.min(POPOVER_MAX_HEIGHT, belowField))
+    placement
   };
 }
 var panelId = 0;
@@ -1056,8 +1063,7 @@ var SuggestionPanel = class {
   element;
   inputElement;
   onPick;
-  view;
-  host;
+  avoid;
   listId;
   currentChoices = [];
   currentIndex = -1;
@@ -1065,18 +1071,17 @@ var SuggestionPanel = class {
   constructor(input, options) {
     this.inputElement = input;
     this.onPick = options.onPick;
-    this.view = options.view;
-    this.host = options.host;
+    this.avoid = options.avoid;
     this.listId = `frontmatter-suggestions-${++panelId}`;
     const list = document.createElement("div");
     list.id = this.listId;
     list.setAttribute("role", "listbox");
     list.setAttribute("aria-label", options.label);
     list.tabIndex = -1;
-    list.className = "mt-1 overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs";
+    list.className = "fixed z-[60] max-h-64 overflow-auto rounded-md border border-border bg-popover text-popover-foreground shadow-md text-xs";
     list.hidden = true;
     this.element = list;
-    this.attach();
+    document.body.appendChild(list);
     input.setAttribute("role", "combobox");
     input.setAttribute("aria-haspopup", "listbox");
     input.setAttribute("aria-autocomplete", "list");
@@ -1110,10 +1115,10 @@ var SuggestionPanel = class {
     if (this.isOpen) return;
     this.isOpen = true;
     this.element.hidden = false;
-    this.attach();
     this.position();
     this.inputElement.setAttribute("aria-expanded", "true");
-    this.view.requestMeasure();
+    window.addEventListener("scroll", this.handleViewportChange, true);
+    window.addEventListener("resize", this.handleViewportChange);
   }
   close() {
     if (!this.isOpen) return;
@@ -1122,10 +1127,12 @@ var SuggestionPanel = class {
     this.currentIndex = -1;
     this.inputElement.setAttribute("aria-expanded", "false");
     this.inputElement.removeAttribute("aria-activedescendant");
-    this.view.requestMeasure();
+    window.removeEventListener("scroll", this.handleViewportChange, true);
+    window.removeEventListener("resize", this.handleViewportChange);
   }
   destroy() {
     this.close();
+    this.element.remove();
   }
   activate(index) {
     this.currentIndex = index;
@@ -1153,21 +1160,31 @@ var SuggestionPanel = class {
     this.close();
     this.onPick(choice);
   }
-  /** Join the DOM under its host row (idempotent). */
-  attach() {
-    if (this.element.parentElement) return;
-    this.host.after(this.element);
-  }
-  /** Anchor the panel to the field inside its row. */
+  handleViewportChange = () => {
+    if (this.isOpen) this.position();
+  };
+  /** Anchor the panel to the field, flipped away from the metadata actions. */
   position() {
-    const box = computeInlinePanelBox(
-      this.inputElement.getBoundingClientRect(),
-      this.host.getBoundingClientRect(),
-      window.innerHeight
+    const field = this.inputElement.getBoundingClientRect();
+    const avoidElement = this.avoid?.() ?? null;
+    const avoidRect = avoidElement?.getBoundingClientRect();
+    const height = Math.min(this.element.scrollHeight, POPOVER_MAX_HEIGHT);
+    const placement = computeFloatingPlacement(
+      { top: field.top, bottom: field.bottom, left: field.left, width: field.width },
+      { width: window.innerWidth, height: window.innerHeight },
+      height,
+      avoidRect ? {
+        top: avoidRect.top,
+        bottom: avoidRect.bottom,
+        left: avoidRect.left,
+        right: avoidRect.right
+      } : void 0
     );
-    this.element.style.width = `${box.width}px`;
-    this.element.style.marginLeft = `${box.offsetLeft}px`;
-    this.element.style.maxHeight = `${box.maxHeight}px`;
+    this.element.style.width = `${placement.width}px`;
+    this.element.style.maxHeight = `${height}px`;
+    this.element.style.left = `${placement.left}px`;
+    this.element.style.top = `${placement.top}px`;
+    this.element.dataset.placement = placement.placement;
   }
 };
 
@@ -1215,12 +1232,12 @@ function ensureColumnHeader(box, before) {
 function attachSuggestions(input, view, root, kind, key, excluded, commit, valueKind = "tags") {
   const provider = view.state.facet(frontmatterSuggestions);
   if (!provider || !input.parentElement) return;
-  const host = input.closest("[data-frontmatter-row]") ?? input.parentElement;
   const panel = new SuggestionPanel(input, {
     label: kind === "key" ? "Suggested properties" : suggestionListLabel(valueKind),
     onPick: () => commit(),
-    view,
-    host
+    // The popup floats over the properties panel; it must never cover the
+    // metadata actions below it.
+    avoid: () => root.querySelector("[data-frontmatter-actions]")
   });
   let generation = 0;
   const close = () => {
@@ -1995,9 +2012,10 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
       box.appendChild(this.buildDefinitionRows(view, base));
     }
     if (!this.readOnly) {
-      const existingTagKey = entries.find(([key]) => isTagProperty(key))?.[0];
+      const existingTagKey = entries.find(([key]) => key.trim().toLowerCase() === "tags")?.[0] ?? entries.find(([key]) => isTagProperty(key))?.[0];
       const actionsRow = document.createElement("div");
       actionsRow.className = "mt-2 flex items-center gap-3";
+      actionsRow.dataset.frontmatterActions = "true";
       const addBtn = document.createElement("button");
       addBtn.type = "button";
       addBtn.setAttribute("aria-label", "Add property");
@@ -2070,9 +2088,9 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
             existingDraft.focus();
             return;
           }
-          const draftRow = createTagDraftRow(view, root, "tags", (val) => {
-            pendingFocus.set(view, { kind: "tag", key: "tags" });
-            patchPropertyInView(view, this.sectionId, ["tags"], [val]);
+          const draftRow = createTagDraftRow(view, root, "category", (val) => {
+            pendingFocus.set(view, { kind: "tag", key: "category" });
+            patchPropertyInView(view, this.sectionId, ["category"], [val]);
           });
           box.appendChild(draftRow);
           draftRow.querySelector("input")?.focus();
@@ -2201,6 +2219,7 @@ var EmptyFrontmatterWidget = class extends view.WidgetType {
     root.appendChild(heading);
     const actionsRow = document.createElement("div");
     actionsRow.className = "flex items-center gap-3";
+    actionsRow.dataset.frontmatterActions = "true";
     const addBtn = document.createElement("button");
     addBtn.type = "button";
     addBtn.setAttribute("aria-label", "Add property");
@@ -2232,9 +2251,9 @@ var EmptyFrontmatterWidget = class extends view.WidgetType {
         existingDraft.focus();
         return;
       }
-      const draftRow = createTagDraftRow(view, root, "tags", (val) => {
-        pendingFocus.set(view, { kind: "tag", key: "tags" });
-        patchPropertyInView(view, "new", ["tags"], [val]);
+      const draftRow = createTagDraftRow(view, root, "category", (val) => {
+        pendingFocus.set(view, { kind: "tag", key: "category" });
+        patchPropertyInView(view, "new", ["category"], [val]);
       });
       root.appendChild(draftRow);
       ensureColumnHeader(root, draftRow);