@bitcobblers/wod-wiki-ui 0.44.2155 → 0.44.2157

package/dist/extensions/index.cjs

@@ -1035,6 +1035,143 @@ var embedPreviewField = state.StateField.define({
 var embedPreviewDecorations = [
   embedPreviewField
 ];
+
+// src/extensions/frontmatter-suggestions.ts
+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);
+  return {
+    width,
+    offsetLeft,
+    maxHeight: Math.max(96, Math.min(POPOVER_MAX_HEIGHT, belowField))
+  };
+}
+var panelId = 0;
+var SuggestionPanel = class {
+  element;
+  inputElement;
+  onPick;
+  view;
+  host;
+  listId;
+  currentChoices = [];
+  currentIndex = -1;
+  isOpen = false;
+  constructor(input, options) {
+    this.inputElement = input;
+    this.onPick = options.onPick;
+    this.view = options.view;
+    this.host = options.host;
+    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.hidden = true;
+    this.element = list;
+    this.attach();
+    input.setAttribute("role", "combobox");
+    input.setAttribute("aria-haspopup", "listbox");
+    input.setAttribute("aria-autocomplete", "list");
+    input.setAttribute("aria-controls", this.listId);
+    input.setAttribute("aria-expanded", "false");
+  }
+  get choices() {
+    return this.currentChoices;
+  }
+  get activeIndex() {
+    return this.currentIndex;
+  }
+  setChoices(choices) {
+    this.currentChoices = choices;
+    this.currentIndex = -1;
+    this.inputElement.removeAttribute("aria-activedescendant");
+    this.element.replaceChildren();
+    choices.forEach((choice, index) => {
+      const option = document.createElement("div");
+      option.id = `${this.listId}-${index}`;
+      option.setAttribute("role", "option");
+      option.setAttribute("aria-selected", "false");
+      option.className = "cursor-pointer px-2 py-1.5 hover:bg-muted";
+      option.textContent = choice.label;
+      option.addEventListener("mousedown", (event) => event.preventDefault());
+      option.addEventListener("click", () => this.pick(choice));
+      this.element.appendChild(option);
+    });
+  }
+  open() {
+    if (this.isOpen) return;
+    this.isOpen = true;
+    this.element.hidden = false;
+    this.attach();
+    this.position();
+    this.inputElement.setAttribute("aria-expanded", "true");
+    this.view.requestMeasure();
+  }
+  close() {
+    if (!this.isOpen) return;
+    this.isOpen = false;
+    this.element.hidden = true;
+    this.currentIndex = -1;
+    this.inputElement.setAttribute("aria-expanded", "false");
+    this.inputElement.removeAttribute("aria-activedescendant");
+    this.view.requestMeasure();
+  }
+  destroy() {
+    this.close();
+  }
+  activate(index) {
+    this.currentIndex = index;
+    Array.from(this.element.children).forEach((option2, i) => {
+      option2.setAttribute("aria-selected", String(i === index));
+      option2.classList.toggle("bg-muted", i === index);
+    });
+    const option = this.element.children[index];
+    if (!option) return;
+    this.inputElement.setAttribute("aria-activedescendant", option.id);
+    if (option instanceof HTMLElement) option.scrollIntoView?.({ block: "nearest" });
+  }
+  /** Move the highlighted option; the first/last option wraps around. */
+  moveActive(delta) {
+    if (this.currentChoices.length === 0) return;
+    const next = this.currentIndex < 0 ? delta > 0 ? 0 : this.currentChoices.length - 1 : (this.currentIndex + delta + this.currentChoices.length) % this.currentChoices.length;
+    this.activate(next);
+  }
+  pickActive() {
+    const choice = this.currentChoices[this.currentIndex];
+    if (choice) this.pick(choice);
+  }
+  pick(choice) {
+    this.inputElement.value = choice.value;
+    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. */
+  position() {
+    const box = computeInlinePanelBox(
+      this.inputElement.getBoundingClientRect(),
+      this.host.getBoundingClientRect(),
+      window.innerHeight
+    );
+    this.element.style.width = `${box.width}px`;
+    this.element.style.marginLeft = `${box.offsetLeft}px`;
+    this.element.style.maxHeight = `${box.maxHeight}px`;
+  }
+};
+
+// src/extensions/frontmatter-preview.ts
 var frontmatterSuggestions = state.Facet.define({ combine: (providers) => providers[0] ?? null });
 var frontmatterReferenceIndex = state.Facet.define({ combine: (providers) => providers[0] ?? null });
 var referenceIndexReload = state.StateEffect.define();
@@ -1043,52 +1180,52 @@ var frontmatterVisibility = state.Facet.define({
 });
 var pendingFocus = /* @__PURE__ */ new WeakMap();
 var widgetCleanup = /* @__PURE__ */ new WeakMap();
-var suggestionId = 0;
+var helperId = 0;
 function isTagProperty(key) {
   return ["tag", "tags", "category"].includes(key.trim().toLowerCase());
 }
+function appendFieldHelper(parent, text) {
+  const helper = document.createElement("span");
+  helper.id = `frontmatter-hint-${++helperId}`;
+  helper.className = "sr-only";
+  helper.textContent = text;
+  parent.appendChild(helper);
+  return helper;
+}
+function createColumnHeader() {
+  const header = document.createElement("div");
+  header.className = "flex items-center border-b border-border text-[11px] font-semibold uppercase tracking-wide text-muted-foreground";
+  const key = document.createElement("div");
+  key.dataset.frontmatterColumn = "key";
+  key.className = "px-3 py-1.5 w-36 shrink-0 border-r border-border max-[479px]:w-auto max-[479px]:border-r-0 max-[479px]:border-b";
+  key.textContent = "Key";
+  const value = document.createElement("div");
+  value.dataset.frontmatterColumn = "value";
+  value.className = "px-3 py-1.5 flex-1 min-w-0";
+  value.textContent = "Value";
+  const actions = document.createElement("div");
+  actions.className = "w-9 shrink-0";
+  header.append(key, value, actions);
+  return header;
+}
+function ensureColumnHeader(box, before) {
+  if (box.querySelector("[data-frontmatter-column]")) return;
+  box.insertBefore(createColumnHeader(), before);
+}
 function attachSuggestions(input, view, root, kind, key, excluded, commit, valueKind = "tags") {
   const provider = view.state.facet(frontmatterSuggestions);
   if (!provider || !input.parentElement) return;
-  const parent = input.parentElement;
-  parent.classList.add("relative");
-  const list = document.createElement("div");
-  list.id = `frontmatter-suggestions-${++suggestionId}`;
-  list.setAttribute("role", "listbox");
-  list.className = "absolute left-0 top-full z-50 max-h-48 overflow-auto rounded-md border border-border bg-background shadow-md min-w-full text-xs";
-  list.hidden = true;
-  parent.appendChild(list);
-  input.setAttribute("role", "combobox");
-  input.setAttribute("aria-autocomplete", "list");
-  input.setAttribute("aria-controls", list.id);
-  input.setAttribute("aria-expanded", "false");
+  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
+  });
   let generation = 0;
-  let choices = [];
-  let active = -1;
   const close = () => {
     generation++;
-    choices = [];
-    active = -1;
-    list.hidden = true;
-    input.setAttribute("aria-expanded", "false");
-    input.removeAttribute("aria-activedescendant");
-  };
-  const select = (choice) => {
-    input.value = choice.value;
-    close();
-    commit();
-  };
-  const activate = (index) => {
-    active = index;
-    Array.from(list.children).forEach((option2, i) => {
-      option2.setAttribute("aria-selected", String(i === active));
-      option2.classList.toggle("bg-muted", i === active);
-    });
-    const option = list.children[active];
-    if (option) {
-      input.setAttribute("aria-activedescendant", option.id);
-      if (option instanceof HTMLElement) option.scrollIntoView?.({ block: "nearest" });
-    }
+    panel.close();
   };
   const refresh = async (showAll = false) => {
     close();
@@ -1111,25 +1248,11 @@ function attachSuggestions(input, view, root, kind, key, excluded, commit, value
         candidates = catalog.tags.filter((tag) => isTagProperty(key) || tag.type?.toLowerCase() === key.trim().toLowerCase()).map((tag) => ({ value: tag.label, label: tag.label, haystack: tag.label.toLowerCase() }));
       }
       const selected = new Set(excluded.map((label) => label.toLowerCase()));
-      choices = candidates.filter(
+      const choices = candidates.filter(
         (candidate) => (query === "" || candidate.haystack.includes(query)) && !selected.has(candidate.value.toLowerCase())
-      );
-      active = -1;
-      input.removeAttribute("aria-activedescendant");
-      list.replaceChildren();
-      choices.forEach((choice, index) => {
-        const option = document.createElement("div");
-        option.id = `${list.id}-${index}`;
-        option.setAttribute("role", "option");
-        option.setAttribute("aria-selected", "false");
-        option.className = "cursor-pointer px-2 py-1.5 hover:bg-muted";
-        option.textContent = choice.label;
-        option.addEventListener("mousedown", (event) => event.preventDefault());
-        option.addEventListener("click", () => select(choice));
-        list.appendChild(option);
-      });
-      list.hidden = choices.length === 0;
-      input.setAttribute("aria-expanded", String(choices.length > 0));
+      ).map((candidate) => ({ value: candidate.value, label: candidate.label }));
+      panel.setChoices(choices);
+      if (choices.length > 0) panel.open();
     } catch {
       if (request === generation) close();
     }
@@ -1144,16 +1267,22 @@ function attachSuggestions(input, view, root, kind, key, excluded, commit, value
     } else if (event.key === "Escape") {
       event.preventDefault();
       close();
-    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && choices.length) {
+    } else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+      if (panel.choices.length === 0) return;
       event.preventDefault();
-      const direction = event.key === "ArrowDown" ? 1 : -1;
-      activate(active < 0 ? direction === 1 ? 0 : choices.length - 1 : (active + direction + choices.length) % choices.length);
-    } else if ((event.key === "Enter" || event.key === "Tab") && active >= 0) {
+      panel.moveActive(event.key === "ArrowDown" ? 1 : -1);
+    } else if (event.key === "Enter" || event.key === "Tab") {
+      if (panel.activeIndex < 0) return;
       event.preventDefault();
-      select(choices[active]);
+      panel.pickActive();
     }
   });
-  widgetCleanup.get(root)?.push(close);
+  widgetCleanup.get(root)?.push(() => panel.destroy());
+}
+function suggestionListLabel(valueKind) {
+  if (valueKind === "effort") return "Suggested efforts";
+  if (valueKind === "equipment") return "Suggested equipment";
+  return "Suggested tags";
 }
 function parseTagList(val) {
   if (Array.isArray(val)) {
@@ -1231,10 +1360,11 @@ function isReferenceKey(key, docKind) {
 }
 function createTagDraftRow(view, root, key, onCommit) {
   const row = document.createElement("div");
-  row.className = "flex items-center min-h-[34px] border-b border-dashed border-border/60 last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
+  row.className = "flex items-center min-h-[34px] border-b border-dashed border-border last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
   row.setAttribute("data-frontmatter-tag-draft", "true");
+  row.dataset.frontmatterRow = key;
   const keyCol = document.createElement("div");
-  keyCol.className = "flex items-center gap-2 px-3 py-1.5 w-36 shrink-0 border-r border-dashed border-border/60 text-muted-foreground max-[479px]:w-auto max-[479px]:border-r-0 max-[479px]:border-b";
+  keyCol.className = "flex items-center gap-2 px-3 py-1.5 w-36 shrink-0 border-r border-dashed border-border text-muted-foreground max-[479px]:w-auto max-[479px]:border-r-0 max-[479px]:border-b";
   keyCol.appendChild(createTagIcon());
   const keyLabel = document.createElement("span");
   keyLabel.className = "truncate font-medium text-foreground/90";
@@ -1244,9 +1374,15 @@ function createTagDraftRow(view, root, key, onCommit) {
   const valCol = document.createElement("div");
   valCol.className = "flex items-center flex-wrap gap-1.5 px-3 py-1.5 flex-1 min-w-0";
   const input = document.createElement("input");
-  input.className = "flex-1 min-w-[70px] bg-transparent text-xs text-foreground outline-none px-1 py-0.5 placeholder:text-muted-foreground/40";
+  input.className = "flex-none w-44 max-w-full rounded-md border border-field-border bg-background/60 px-2 py-1 text-xs text-foreground outline-none placeholder:text-field-placeholder focus:border-ring focus:ring-1 focus:ring-ring";
   input.placeholder = "Add tag\u2026";
-  input.setAttribute("aria-label", `Add tag to ${key}`);
+  input.setAttribute("aria-label", `Value for ${key}`);
+  input.dataset.frontmatterField = "value";
+  input.dataset.frontmatterProperty = key;
+  input.setAttribute(
+    "aria-describedby",
+    appendFieldHelper(valCol, "Press Enter to add the value.").id
+  );
   valCol.appendChild(input);
   row.appendChild(valCol);
   let settled = false;
@@ -1325,8 +1461,9 @@ var METRIC_DRAFT_KINDS = {
 };
 function createMetricDraftRow(view, root, referenceProvider, commit) {
   const row = document.createElement("div");
-  row.className = "flex items-center min-h-[34px] border-b border-dashed border-border/60 last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
+  row.className = "flex items-center min-h-[34px] border-b border-dashed border-border last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
   row.setAttribute("data-frontmatter-metric-draft", "true");
+  row.dataset.frontmatterRow = "metric";
   const select = document.createElement("select");
   select.setAttribute("aria-label", "Metric kind");
   select.className = "mx-3 my-1.5 h-7 w-28 shrink-0 rounded-md border border-input bg-background px-1.5 text-[11px] text-muted-foreground outline-none";
@@ -1340,9 +1477,14 @@ function createMetricDraftRow(view, root, referenceProvider, commit) {
   const valCol = document.createElement("div");
   valCol.className = "flex items-center flex-wrap gap-1.5 px-3 py-1.5 flex-1 min-w-0";
   const input = document.createElement("input");
-  input.className = "flex-1 min-w-[70px] bg-transparent text-xs text-foreground outline-none px-1 py-0.5 placeholder:text-muted-foreground/40";
+  input.className = "flex-none w-44 max-w-full rounded-md border border-field-border bg-background/60 px-2 py-1 text-xs text-foreground outline-none placeholder:text-field-placeholder focus:border-ring focus:ring-1 focus:ring-ring";
   input.placeholder = "Value\u2026";
   input.setAttribute("aria-label", "Metric value");
+  input.dataset.frontmatterField = "value";
+  input.setAttribute(
+    "aria-describedby",
+    appendFieldHelper(valCol, "Press Enter to apply the metric value.").id
+  );
   valCol.appendChild(input);
   row.appendChild(valCol);
   let settled = false;
@@ -1534,6 +1676,7 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
     const docKind = detectDefinitionKind(meta);
     const referenceProvider = view.state.facet(frontmatterReferenceIndex)?.() ?? null;
     const base = docKind === "effort" ? readBaseAttributes(body) : {};
+    box.appendChild(createColumnHeader());
     if (entries.length === 0) {
       const emptyRow = document.createElement("div");
       emptyRow.className = "px-3 py-2 text-xs text-muted-foreground/60 italic";
@@ -1546,10 +1689,12 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
       const isReferenceList = (isReferenceKey(key, docKind) || key === "aliases") && Array.isArray(value);
       const nested = value === "" && ownsNestedBlock(body, key);
       const row = document.createElement("div");
-      row.className = "flex items-center min-h-[34px] border-b border-dashed border-border/60 last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
+      row.className = "flex items-center min-h-[34px] border-b border-dashed border-border last:border-b-0 group hover:bg-muted/10 transition-colors max-[479px]:flex-col max-[479px]:items-stretch";
+      row.dataset.frontmatterRow = key;
       box.appendChild(row);
       const keyCol = document.createElement("div");
-      keyCol.className = "flex items-center gap-2 px-3 py-1.5 w-36 shrink-0 border-r border-dashed border-border/60 text-muted-foreground max-[479px]:w-auto max-[479px]:border-r-0 max-[479px]:border-b";
+      keyCol.className = "flex items-center gap-2 px-3 py-1.5 w-36 shrink-0 border-r border-dashed border-border text-muted-foreground max-[479px]:w-auto max-[479px]:border-r-0 max-[479px]:border-b";
+      row.appendChild(keyCol);
       keyCol.appendChild(isTags || isReferenceList ? createTagIcon() : createListIcon());
       if (this.readOnly || nested) {
         const keyLabel = document.createElement("span");
@@ -1561,7 +1706,16 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
         keyInput.className = "w-full bg-transparent text-xs text-foreground/90 font-medium outline-none truncate hover:bg-muted/30 focus:bg-background focus:ring-1 focus:ring-ring rounded px-1 -mx-1";
         keyInput.value = key;
         keyInput.spellcheck = false;
-        keyInput.setAttribute("aria-label", `Property name ${key}`);
+        keyInput.setAttribute("aria-label", `Property key: ${key}`);
+        keyInput.dataset.frontmatterField = "key";
+        keyInput.dataset.frontmatterProperty = key;
+        keyInput.setAttribute(
+          "aria-describedby",
+          appendFieldHelper(
+            keyCol,
+            "Property name. Press Enter to apply. Arrow keys browse suggested property names."
+          ).id
+        );
         let currentKey = key;
         const commitKey = () => {
           const nextKey = keyInput.value.trim();
@@ -1602,9 +1756,9 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
           pendingFocus.delete(view);
         }
       }
-      row.appendChild(keyCol);
       const valCol = document.createElement("div");
       valCol.className = "flex items-center flex-wrap gap-1.5 px-3 py-1.5 flex-1 min-w-0";
+      row.appendChild(valCol);
       const commitList = (next) => {
         meta[key] = next;
         patchPropertyInView(view, this.sectionId, [key], next.length > 0 ? next : "");
@@ -1650,9 +1804,18 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
         }
         if (!this.readOnly) {
           const chipInput = document.createElement("input");
-          chipInput.className = "flex-1 min-w-[70px] bg-transparent text-xs text-foreground outline-none px-1 py-0.5 placeholder:text-muted-foreground/40";
+          chipInput.className = "flex-none w-44 max-w-full rounded-md border border-field-border bg-background/60 px-2 py-1 text-xs text-foreground outline-none placeholder:text-field-placeholder focus:border-ring focus:ring-1 focus:ring-ring";
           chipInput.placeholder = chips.length === 0 ? isReferenceList ? `Add ${valueKind === "effort" ? "effort" : "equipment"}\u2026` : "Add tags\u2026" : isTags ? "Add tag\u2026" : "Add\u2026";
-          chipInput.setAttribute("aria-label", isTags ? `Add tag to ${key}` : `Add to ${key}`);
+          chipInput.setAttribute("aria-label", `Value for ${key}`);
+          chipInput.dataset.frontmatterField = "value";
+          chipInput.dataset.frontmatterProperty = key;
+          chipInput.setAttribute(
+            "aria-describedby",
+            appendFieldHelper(
+              valCol,
+              "Press Enter or comma to add a value. Arrow keys browse the suggestions."
+            ).id
+          );
           const commitNewChip = () => {
             const val = chipInput.value.trim().replace(/^,|,$/g, "");
             if (val && !chips.some((chip) => chip.toLowerCase() === val.toLowerCase())) {
@@ -1725,10 +1888,16 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
           valCol.appendChild(valSpan);
         } else {
           const valInput = document.createElement("input");
-          valInput.className = "w-full bg-transparent text-xs text-foreground outline-none py-0.5 hover:bg-muted/20 focus:bg-background focus:ring-1 focus:ring-ring rounded px-1 -mx-1 transition-colors";
+          valInput.className = "w-full rounded-md border border-field-border bg-background/60 px-2 py-1 text-xs text-foreground outline-none placeholder:text-field-placeholder focus:border-ring focus:ring-1 focus:ring-ring transition-colors";
           valInput.value = strVal;
           valInput.spellcheck = false;
           valInput.setAttribute("aria-label", `Value for ${key}`);
+          valInput.dataset.frontmatterField = "value";
+          valInput.dataset.frontmatterProperty = key;
+          valInput.setAttribute(
+            "aria-describedby",
+            appendFieldHelper(valCol, "Property value. Press Enter to apply.").id
+          );
           let committedVal = strVal;
           const commitVal = () => {
             const cur = valInput.value.trim();
@@ -1779,7 +1948,7 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
               openLink.appendChild(createExternalIcon());
               pill.appendChild(openLink);
               valCol.insertBefore(pill, valInput);
-              valInput.className = "flex-1 min-w-[70px] bg-transparent text-xs text-foreground outline-none py-0.5 hover:bg-muted/20 focus:bg-background focus:ring-1 focus:ring-ring rounded px-1 -mx-1 transition-colors";
+              valInput.className = "flex-1 min-w-[70px] rounded-md border border-field-border bg-background/60 px-2 py-1 text-xs text-foreground outline-none placeholder:text-field-placeholder focus:border-ring focus:ring-1 focus:ring-ring transition-colors";
             }
             const diag = renderEffortValueDiagnostics(
               referenceProvider,
@@ -1804,14 +1973,13 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
           valCol.appendChild(openLink);
         }
       }
-      row.appendChild(valCol);
       if (!this.readOnly && !nested) {
         const actionsCol = document.createElement("div");
         actionsCol.className = "flex items-center pr-2";
         const delBtn = document.createElement("button");
         delBtn.type = "button";
         delBtn.setAttribute("aria-label", `Remove property ${key}`);
-        delBtn.className = "opacity-0 group-hover:opacity-100 text-muted-foreground/40 hover:text-destructive p-1 rounded transition-opacity cursor-pointer";
+        delBtn.className = "opacity-0 group-hover:opacity-100 focus-visible:opacity-100 text-muted-foreground/70 hover:text-destructive p-1 rounded transition-opacity cursor-pointer";
         delBtn.appendChild(createCloseIcon("md"));
         delBtn.addEventListener("click", (e) => {
           e.preventDefault();
@@ -1891,7 +2059,9 @@ var DefaultFrontmatterWidget = class extends view.WidgetType {
           e.preventDefault();
           e.stopPropagation();
           if (existingTagKey) {
-            const input = Array.from(root.querySelectorAll("input")).find((element) => element.getAttribute("aria-label") === `Add tag to ${existingTagKey}`);
+            const input = Array.from(root.querySelectorAll(
+              '[data-frontmatter-field="value"]'
+            )).find((element) => element.dataset.frontmatterProperty === existingTagKey);
             input?.focus();
             return;
           }
@@ -2067,6 +2237,7 @@ var EmptyFrontmatterWidget = class extends view.WidgetType {
         patchPropertyInView(view, "new", ["tags"], [val]);
       });
       root.appendChild(draftRow);
+      ensureColumnHeader(root, draftRow);
       draftRow.querySelector("input")?.focus();
       view.requestMeasure();
     });