@bitcobblers/wod-wiki-ui 0.44.2157 → 0.44.2159

package/dist/{chunk-NQMMGF3R.mjs → chunk-7OSBFQY7.mjs}

@@ -1021,15 +1021,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;
@@ -1037,8 +1044,7 @@ var SuggestionPanel = class {
   element;
   inputElement;
   onPick;
-  view;
-  host;
+  avoid;
   listId;
   currentChoices = [];
   currentIndex = -1;
@@ -1046,18 +1052,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");
@@ -1091,10 +1096,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;
@@ -1103,10 +1108,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;
@@ -1134,21 +1141,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;
   }
 };
 
@@ -1196,12 +1213,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 = () => {
@@ -1976,9 +1993,10 @@ var DefaultFrontmatterWidget = class extends 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");
@@ -2051,9 +2069,9 @@ var DefaultFrontmatterWidget = class extends 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();
@@ -2182,6 +2200,7 @@ var EmptyFrontmatterWidget = class extends 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");
@@ -2213,9 +2232,9 @@ var EmptyFrontmatterWidget = class extends 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);
@@ -12838,5 +12857,5 @@ function editorPreset(optionsOrDialect = "markdown") {
 }
 
 export { AGG_OPTIONS, CANONICAL_BLOCK_TYPES, CLAUSE_META, ComposerRegistry, DEFAULT_DIAGNOSTICS_DEBOUNCE_MS, DEFAULT_OUTPUT_FILTERS, DEFAULT_PRIMARY_FILTER, DefaultFrontmatterWidget, EditorDialog, GROUPBY_OPTIONS, GoalRings, KIND_OPTIONS, METRIC_OPTIONS, MULTI_VALUE_TYPES, MetricBadge, OUTPUT_TYPE_CLASS, OUTPUT_TYPE_DOT, OutputFilterPills, OutputStatementsTable, PLANE_OPTIONS, ProposedMetricBadge, QueryBlockView, QueryValue, ROLLUP_OPTIONS, RowsResultsChrome, RowsTable, SERIES_COLORS, SOURCE_OPTIONS, SUGGESTION_BINDINGS, StackedBar, TARGET_OPTIONS, TIME_OPTIONS, TONE_CLASS, TokenSlotPill, TopList, UNIT_OPTIONS, WHERE_AGGREGATORS, WHERE_METRICS, WidgetChart, WidgetProblemBadge, WqlBars, WqlComposer, WqlDiagnosticsStrip, WqlEmptyState, WqlQueryInspectorModal, WqlTable, WqlTimeseries, ZoneDistribution, activeCursorSection, addRuntimePanel, blockTypesFromBlocks, canonicalSuggestionItems, catalogIdsFromBlocks, cn, compactNumber, composerRegistry, configureOverlayActions, cursorFocusExtension, dateRangeSlot, dispatchAddRuntimePanel, dispatchExpandRuntimePanel, dispatchGutterHighlights, dispatchRemoveRuntimePanel, editQueryClause, editingWidgetsField, editorPreset, editorTheme, embedPreviewDecorations, expandRuntimePanel, extractBlockQueries, extractMetricsByCategory, fenceCompletion, findQueryBlockSection, findWorkoutErrors, forceSectionParse, formatClockTime, formatMMSS, formatTimestamp, frontmatterPreview, frontmatterPreviewField, frontmatterReferenceIndex, frontmatterSuggestions, frontmatterVisibility, getClauseMeta, getCursorFocusState, getOverlayActions, getSuggestionBinding, gutterHighlightsField, gutterUnified, handleFenceAutoWrap, hashCode, inlineButtonDecoration, invalidateSuggestions, lineIdsExtension, linkOpen, linkPreview, loadSuggestions, markdownSyntaxHiding, markdownTablePreview, matchFilterTypeahead, mergeSeries, mergeSuggestionItems, mergeTagSuggestions, navigationFacet, normalizeOutputFilter, patchBlockQuery, presentBadges, previewDecorations, queryBlockPreview, readSessionRpe, referenceIndexReload, registerCustomCompletionSource, registeredSectionWidgets, removeRuntimePanel, resolveQueryDraft, runtimePanelField, saveBlockQuerySource, sectionAtPos, sectionField, sectionGeometry, sectionIdentity, sectionIdentityHistory, sectionMove, sectionRestore, sectionSaved, sessionQueryInsert, sessionQueryWql, setGutterHighlights, setSuggestionBinding, smartIncrement, summarizeAggregate, summarizeFind, summarizePipeline, tagsFromStaticBlocks, toChartResult, toggleWidgetEdit, tooltipTimestamp, unregisterCustomCompletionSource, urlAtPos, useChartShape, useComposerSlots, useSuggestions, useVisualViewportRect, useWqlStageCounts, widgetBlockPreview, wodAutoWrap, wodAutocompletion, wodEditorKeymap, wodLinter, wodOverlayPanel, workoutLintSource, wqlToPills, wrapInTimeFence };
-//# sourceMappingURL=chunk-NQMMGF3R.mjs.map
-//# sourceMappingURL=chunk-NQMMGF3R.mjs.map
+//# sourceMappingURL=chunk-7OSBFQY7.mjs.map
+//# sourceMappingURL=chunk-7OSBFQY7.mjs.map