@bitcobblers/wod-wiki-ui 0.48.2175 → 0.49.2177

package/dist/extensions/index.cjs

@@ -5478,7 +5478,7 @@ function InlineClauseEditor({
   const meta = getClauseMeta(clause2.type);
   const current = clause2.value.trim();
   const typedIdx = filteredItems.length;
-  const shownValues = selectedValues.length > 0 ? selectedValues : !isMulti && current ? [current] : [];
+  const shownValues = selectedValues;
   const reorder = (i, dir) => {
     if (!onReorder) return;
     const to = i + dir;
@@ -5490,24 +5490,15 @@ function InlineClauseEditor({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "mx-0.5 rounded-xl border border-border bg-popover shadow-md p-1",
+      className: "min-w-0 pt-0.5",
       "data-testid": "wql-clause-editor",
       "data-clause-type": clause2.type,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 px-2 pt-1 pb-1.5", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, className: "text-[11px]", children: meta.icon }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs sm:text-[11px] font-semibold text-foreground font-mono", children: meta.label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "hidden sm:block ml-auto text-[10px] text-muted-foreground/70 font-mono truncate", children: [
-            "\u2191\u2193 move \xB7 Enter ",
-            isMulti ? "add/remove" : "set",
-            " \xB7 Esc done \xB7 Tab exits"
-          ] })
-        ] }),
-        shownValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("px-2 pb-1.5", isMulti && "border-b border-border/50"), children: [
+        isMulti && shownValues.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-b border-border/50 px-2 pb-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-1.5 sm:gap-1 max-h-24 overflow-y-auto overscroll-contain touch-pan-y sm:max-h-none sm:overflow-visible", children: shownValues.map((v, i) => /* @__PURE__ */ jsxRuntime.jsxs(
             "span",
             {
-              className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-primary/20 text-primary text-xs sm:text-[10px] font-mono min-h-11 sm:min-h-0",
+              className: "inline-flex items-center gap-1 px-1.5 py-0.5 rounded bg-primary/15 text-primary text-xs sm:text-[10px] font-mono min-h-8 sm:min-h-0",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-40 truncate", children: v }),
                 onReorder && shownValues.length > 1 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -5557,7 +5548,7 @@ function InlineClauseEditor({
             role: "listbox",
             "aria-label": `${meta.label} options`,
             "aria-multiselectable": isMulti || void 0,
-            className: "max-h-[min(45svh,20rem)] sm:max-h-44 overflow-y-auto overscroll-contain touch-pan-y flex flex-col gap-0.5",
+            className: "max-h-[min(38svh,16rem)] sm:max-h-36 overflow-y-auto overscroll-contain touch-pan-y flex flex-col gap-0.5 pt-1",
             children: [
               canCommitTyped && /* @__PURE__ */ jsxRuntime.jsxs(
                 "button",
@@ -5571,19 +5562,19 @@ function InlineClauseEditor({
                   onClick: () => onCommitTyped(typedValue),
                   "data-testid": `clause-commit-typed-${clause2.type}`,
                   className: cn(
-                    "flex items-center justify-between px-2 py-2 sm:py-1 text-sm sm:text-xs text-left rounded hover:bg-muted/60 transition-colors font-mono min-h-12 sm:min-h-0",
-                    highlightIdx === typedIdx && "bg-muted/60"
+                    "flex items-center justify-between px-2.5 py-2 sm:py-1.5 text-sm sm:text-xs text-left rounded-md hover:bg-muted/60 transition-colors font-mono min-h-11 sm:min-h-0",
+                    highlightIdx === typedIdx && "bg-muted/70 ring-1 ring-border"
                   ),
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "truncate", children: [
                       "Search for ",
-                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold text-foreground", children: [
                         "\u201C",
                         typedValue,
                         "\u201D"
                       ] })
                     ] }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60 ml-1 shrink-0", children: "\u21B5" })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground/60 ml-1 shrink-0 font-sans text-xs", children: "\u21B5" })
                   ]
                 }
               ),
@@ -5602,29 +5593,39 @@ function InlineClauseEditor({
                     onMouseEnter: () => onHighlight(idx),
                     onClick: () => onCommitValue(item.value),
                     className: cn(
-                      "flex items-center justify-between px-2 py-2 sm:py-1 text-sm sm:text-xs text-left rounded transition-colors font-mono min-h-12 sm:min-h-0",
-                      active ? "bg-primary/15 font-semibold" : "hover:bg-muted/60",
-                      selected && "text-primary"
+                      "flex items-center justify-between px-2.5 py-2 sm:py-1.5 text-sm sm:text-xs text-left rounded-md transition-colors min-h-11 sm:min-h-0",
+                      active ? "bg-primary/10 text-foreground font-medium" : "hover:bg-muted/60 text-muted-foreground hover:text-foreground",
+                      selected && "text-primary font-medium"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label }),
-                      selected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3 h-3 shrink-0" })
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-2 min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: item.label }),
+                        item.label !== item.value && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "font-mono text-[11px] text-muted-foreground/70 shrink-0", children: item.value })
+                      ] }),
+                      selected && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "w-3.5 h-3.5 text-primary shrink-0 ml-1.5" })
                     ]
                   },
                   item.value
                 );
               }),
-              emptyText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2 py-2 sm:py-1.5 text-sm sm:text-xs text-muted-foreground italic", children: emptyText })
+              emptyText && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-2.5 py-2 text-sm sm:text-xs text-muted-foreground italic", children: emptyText })
             ]
           }
         ),
-        isMulti && onDone && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sticky bottom-0 -mx-1 -mb-1 px-3 pt-1.5 pb-[max(0.375rem,env(safe-area-inset-bottom))] bg-popover rounded-b-xl flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        (filteredItems.length > 0 || canCommitTyped) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden sm:flex items-center justify-between px-2 pt-2 text-[10px] text-muted-foreground/70 font-mono border-t border-border/40 mt-1", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            "\u2191\u2193 choose \xB7 Enter ",
+            isMulti ? "toggle" : "set"
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Tab next segment \xB7 Esc close" })
+        ] }),
+        isMulti && onDone && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-2 flex justify-end", children: /* @__PURE__ */ jsxRuntime.jsxs(
           "button",
           {
             type: "button",
             onClick: onDone,
             "data-testid": "wql-clause-editor-done",
-            className: "inline-flex w-full sm:w-auto items-center justify-center min-h-12 sm:min-h-9 px-3 rounded-lg bg-primary text-primary-foreground text-sm sm:text-xs font-semibold hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            className: "inline-flex w-full sm:w-auto items-center justify-center min-h-10 sm:min-h-7 px-3 rounded-md bg-primary text-primary-foreground text-xs font-semibold hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
             children: [
               "Done",
               shownValues.length > 0 ? ` \xB7 ${shownValues.length} selected` : ""
@@ -5663,7 +5664,11 @@ var STATIC_OPTIONS = {
   groupby: GROUPBY_OPTIONS,
   metric: METRIC_OPTIONS,
   unit: UNIT_OPTIONS,
-  intensity: wodWikiWql.WQL_INTENSITY_TIERS.map((v) => ({ value: v, label: v }))
+  intensity: wodWikiWql.WQL_INTENSITY_TIERS.map((v) => ({ value: v, label: v })),
+  subscribed: [
+    { value: "true", label: "Subscribed" },
+    { value: "false", label: "All / unsubscribed" }
+  ]
 };
 var CANONICAL_BLOCK_TYPES = ["wod", "query", "widget", "embed"];
 function canonicalSuggestionItems(values2) {
@@ -5909,7 +5914,7 @@ function WqlDiagnosticsStrip({
       "aria-live": "polite",
       className: cn(
         "flex flex-wrap items-center justify-between gap-x-4 gap-y-1.5 px-3 py-1.5 text-xs font-mono transition-colors",
-        header ? valid ? "border-b border-primary/30 text-muted-foreground" : "border-b border-destructive/50 bg-destructive/5 text-destructive" : cn(
+        header ? valid ? "border-b border-border/60 bg-muted/20 text-muted-foreground" : "border-b border-destructive/40 bg-destructive/5 text-destructive" : cn(
           "rounded-lg border",
           valid ? "bg-muted/30 border-border text-muted-foreground" : "bg-destructive/5 border-destructive/30 text-destructive"
         ),
@@ -6236,23 +6241,128 @@ var completionIcons = {
   value: server.renderToStaticMarkup(React2.createElement(lucideReact.Tag, { size: 16 }))
 };
 var SLOT_NODES = { Head: true, Filter: true, TagValue: true, Rollup: true };
+var activeSegmentEffect = state.StateEffect.define();
+var activeSegmentField = state.StateField.define({
+  create: () => view.Decoration.none,
+  update(decorations, transaction) {
+    const mapped = decorations.map(transaction.changes);
+    for (const effect of transaction.effects) {
+      if (!effect.is(activeSegmentEffect)) continue;
+      const range = effect.value;
+      if (!range || range.from >= range.to) return view.Decoration.none;
+      return view.Decoration.set([view.Decoration.mark({ class: "wql-active-segment" }).range(range.from, range.to)]);
+    }
+    return mapped;
+  },
+  provide: (field) => view.EditorView.decorations.from(field)
+});
+function findClauseRange(state, clause2) {
+  if (!clause2) return void 0;
+  let range;
+  const tree = language.syntaxTree(state);
+  if (clause2.filterIndex !== void 0) {
+    let index = 0;
+    tree.iterate({
+      enter: (node) => {
+        if (node.name === "Filter") {
+          if (index === clause2.filterIndex) {
+            range = { from: node.from, to: node.to };
+            return false;
+          }
+          index++;
+        }
+        return true;
+      }
+    });
+    return range;
+  }
+  if (["kind", "target", "agg", "metric"].includes(clause2.type)) {
+    tree.iterate({
+      enter: (node) => {
+        if (node.name === "Head") {
+          range = { from: node.from, to: node.to };
+          return false;
+        }
+        return true;
+      }
+    });
+    return range;
+  }
+  if (clause2.type === "groupby") {
+    tree.iterate({
+      enter: (node) => {
+        if (node.name === "GroupBy") {
+          range = { from: node.from, to: node.to };
+          return false;
+        }
+        return true;
+      }
+    });
+    return range;
+  }
+  if (clause2.type === "rollup") {
+    tree.iterate({
+      enter: (node) => {
+        if (node.name === "Rollup") {
+          range = { from: node.from, to: node.to };
+          return false;
+        }
+        return true;
+      }
+    });
+    return range;
+  }
+  if (clause2.type === "time") {
+    const doc = state.doc.toString();
+    const match = /\b(last\s+\d+[dw]|from\s+\S+(?:\s+to\s+\S+)?)/i.exec(doc);
+    if (match) return { from: match.index, to: match.index + match[0].length };
+  }
+  return void 0;
+}
 function slotPositions(state) {
   const slots = [];
   language.syntaxTree(state).iterate({
     enter: (node) => {
       if (SLOT_NODES[node.name]) slots.push(node.from);
-      else if (node.name === "Word" && node.node.parent?.name === "GroupBy") slots.push(node.from);
+      else if (node.name === "Word" && ["GroupBy", "Dimension"].includes(node.node.parent?.name ?? "")) slots.push(node.from);
       return true;
     }
   });
   return slots.sort((a, b) => a - b);
 }
-function advanceSlot(view, dir) {
+function activateSlot(view, position, onActivate) {
+  if (!onActivate) return;
+  let node = language.syntaxTree(view.state).resolveInner(position, 1);
+  while (node.parent && !["Head", "Filter", "GroupBy", "Rollup"].includes(node.name)) node = node.parent;
+  if (!["Head", "Filter", "GroupBy", "Rollup"].includes(node.name)) return;
+  let filterIndex;
+  if (node.name === "Filter") {
+    filterIndex = 0;
+    language.syntaxTree(view.state).iterate({
+      enter: (candidate) => {
+        if (candidate.name === "Filter") {
+          if (candidate.from === node.from) return false;
+          if (candidate.from < node.from) filterIndex += 1;
+        }
+        return true;
+      }
+    });
+  }
+  let text = view.state.sliceDoc(node.from, node.to);
+  if (node.name === "Head") {
+    const line = view.state.doc.lineAt(position);
+    const word = Array.from(line.text.matchAll(/[\w.*-]+/g)).find((match) => line.from + match.index <= position && position <= line.from + match.index + match[0].length);
+    if (word) text = word[0];
+  }
+  onActivate({ node: node.name, filterIndex, from: node.from, to: node.to, text });
+}
+function advanceSlot(view, dir, onActivate) {
   const head = view.state.selection.main.head;
   const slots = slotPositions(view.state);
   const next = dir > 0 ? slots.find((slot) => slot > head) : [...slots].reverse().find((slot) => slot < head);
   if (next === void 0) return false;
   view.dispatch({ selection: { anchor: next }, scrollIntoView: true });
+  activateSlot(view, next, onActivate);
   return true;
 }
 function wqlLint(view) {
@@ -6295,7 +6405,7 @@ function wqlLint(view) {
   });
   return out;
 }
-function wqlEditorKeymap(onSubmit, onEscape) {
+function wqlEditorKeymap(onSubmit, onEscape, onSlotActivate) {
   return [
     { key: "Mod-Enter", run: () => {
       onSubmit();
@@ -6319,7 +6429,7 @@ function wqlEditorKeymap(onSubmit, onEscape) {
       run: (view) => {
         if (view.compositionStarted) return false;
         const accepted = autocomplete.acceptCompletion(view);
-        return advanceSlot(view, 1) || accepted;
+        return advanceSlot(view, 1, onSlotActivate) || accepted;
       }
     },
     {
@@ -6327,7 +6437,7 @@ function wqlEditorKeymap(onSubmit, onEscape) {
       run: (view) => {
         if (view.compositionStarted) return false;
         const accepted = autocomplete.acceptCompletion(view);
-        return advanceSlot(view, -1) || accepted;
+        return advanceSlot(view, -1, onSlotActivate) || accepted;
       }
     },
     {
@@ -6346,11 +6456,11 @@ function wqlEditorKeymap(onSubmit, onEscape) {
     ...commands.historyKeymap
   ];
 }
-function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoFocus = false, dense = false }) {
+function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoFocus = false, dense = false, onSlotActivate, activeRange, activeClause, className }) {
   const host = React2.useRef(null);
   const view$1 = React2.useRef(void 0);
-  const callbacks = React2.useRef({ onChange, onSubmit, onEscape });
-  callbacks.current = { onChange, onSubmit, onEscape };
+  const callbacks = React2.useRef({ onChange, onSubmit, onEscape, onSlotActivate });
+  callbacks.current = { onChange, onSubmit, onEscape, onSlotActivate };
   const replacing = React2.useRef(false);
   const initialValue = React2.useRef(value);
   React2.useEffect(() => {
@@ -6367,6 +6477,7 @@ function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoF
           language.syntaxHighlighting(wodWikiWql.wqlHighlightStyle),
           commands.history(),
           view.EditorView.lineWrapping,
+          activeSegmentField,
           ...placeholder ? [view.placeholder(placeholder)] : [],
           view.EditorView.contentAttributes.of({ "aria-label": "WQL", "data-testid": "wql-text-input" }),
           autocomplete.autocompletion({
@@ -6387,11 +6498,12 @@ function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoF
           lint.linter(wqlLint),
           view.keymap.of(wqlEditorKeymap(
             () => callbacks.current.onSubmit(),
-            () => callbacks.current.onEscape()
+            () => callbacks.current.onEscape(),
+            (slot) => callbacks.current.onSlotActivate?.(slot)
           )),
           view.EditorView.domEventHandlers({
-            // Clicking a head/target/filter token selects it and lists its alternatives;
-            // typing then replaces it, picking swaps it.
+            // Host composers open the contextual writer; standalone editors
+            // retain token selection and in-row completion.
             mouseup: (event, editor2) => {
               if (event.button !== 0) return false;
               let { from, to } = editor2.state.selection.main;
@@ -6402,11 +6514,18 @@ function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoF
                 from = line.from + word.index;
                 to = from + word[0].length;
                 let node = language.syntaxTree(editor2.state).resolveInner(to, -1);
-                while (node.parent && !["Head", "Filter"].includes(node.name)) node = node.parent;
-                if (!["Head", "Filter"].includes(node.name)) return false;
-                editor2.dispatch({ selection: { anchor: from, head: to } });
+                while (node.parent && !["Head", "Filter", "GroupBy", "Rollup"].includes(node.name)) node = node.parent;
+                if (!["Head", "Filter", "GroupBy", "Rollup"].includes(node.name)) return false;
+                if (!callbacks.current.onSlotActivate) {
+                  editor2.dispatch({ selection: { anchor: from, head: to } });
+                }
+              }
+              if (callbacks.current.onSlotActivate) {
+                autocomplete.closeCompletion(editor2);
+                activateSlot(editor2, from, (slot) => callbacks.current.onSlotActivate?.(slot));
+              } else {
+                autocomplete.startCompletion(editor2);
               }
-              autocomplete.startCompletion(editor2);
               return false;
             },
             keydown: (event, editor2) => {
@@ -6426,7 +6545,8 @@ function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoF
             '.cm-line span[class*="tok-"]:hover, .cm-line span[class^="tok-"]:hover': { fontWeight: "700", textShadow: "0 0 0.5px currentColor", cursor: "pointer" },
             ".cm-scroller": { overflow: "auto" },
             ".cm-placeholder": { color: "hsl(var(--muted-foreground))" },
-            ".wql-completion-icon": { display: "inline-flex", flexShrink: "0", color: "hsl(var(--primary))" }
+            ".wql-completion-icon": { display: "inline-flex", flexShrink: "0", color: "hsl(var(--primary))" },
+            ".wql-active-segment": { backgroundColor: "hsl(var(--primary) / 0.16)", boxShadow: "inset 0 -2px hsl(var(--primary))", borderRadius: "4px", padding: "1px 2px", margin: "0 -2px", fontWeight: "600" }
           }),
           autocompleteTooltipTheme
         ]
@@ -6446,7 +6566,13 @@ function WqlTextEditor({ value, onChange, onSubmit, onEscape, placeholder, autoF
     editor.dispatch({ changes: { from: 0, to: editor.state.doc.length, insert: value } });
     replacing.current = false;
   }, [value]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: host, className: "min-w-0 w-full rounded-lg border border-border bg-background focus-within:ring-2 focus-within:ring-ring", "data-testid": "wql-text-editor" });
+  React2.useEffect(() => {
+    const editor = view$1.current;
+    if (!editor) return;
+    const resolvedRange = activeRange ?? findClauseRange(editor.state, activeClause);
+    editor.dispatch({ effects: activeSegmentEffect.of(resolvedRange ?? null) });
+  }, [activeRange, activeClause, value]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: host, className: className ?? "min-w-0 w-full rounded-lg border border-border bg-background focus-within:ring-2 focus-within:ring-ring", "data-testid": "wql-text-editor" });
 }
 function WqlComposer({
   initialQuery,
@@ -6468,7 +6594,8 @@ function WqlComposer({
   preferredChoices,
   autoFocus = false,
   placeholder = "Search text or enter WQL",
-  className
+  className,
+  segmentEditRequest
 }) {
   const [desktop, setDesktop] = React2.useState(false);
   const [base, setBase] = React2.useState(query ?? initialQuery ?? ":note");
@@ -6550,7 +6677,7 @@ function WqlComposer({
   }, [autoFocus]);
   React2.useEffect(() => {
     if (active.kind === "value") pickerRef.current?.focus();
-  }, [active.kind]);
+  }, [active]);
   React2.useEffect(() => {
     if (highlight >= 0) document.getElementById(`${listId}-option-${highlight}`)?.scrollIntoView?.({ block: "nearest" });
   }, [highlight, listId]);
@@ -6576,14 +6703,14 @@ function WqlComposer({
     if (openerRef.current?.isConnected) openerRef.current.focus();
     else inputRef.current?.focus();
   };
-  const openEditor = (clause2) => {
+  const openEditor = (clause2, range) => {
     if (pending && currentRef.current.valid) commit(currentRef.current);
     openerRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
     if (clause2.type === "where" || clause2.type === "pipes") {
       setActive({ kind: "wql" });
       commit(currentRef.current);
     } else {
-      setActive({ kind: "value", clause: clause2 });
+      setActive({ kind: "value", clause: clause2, range });
       setSearch("");
     }
     setHighlight(-1);
@@ -6594,6 +6721,24 @@ function WqlComposer({
     if (pending) commit(resolveQueryDraft(base));
     openEditor(existing ?? { id: `new-${type}`, type, ...getClauseMeta(type), value: "" });
   };
+  const openFieldRef = React2.useRef(openField);
+  openFieldRef.current = openField;
+  React2.useEffect(() => {
+    if (segmentEditRequest) openFieldRef.current(segmentEditRequest.type);
+  }, [segmentEditRequest]);
+  const activateWqlSlot = (slot) => {
+    const clause2 = slot.filterIndex !== void 0 ? pills.find((pill) => pill.filterIndex === slot.filterIndex) : slot.node === "GroupBy" ? pills.find((pill) => pill.type === "groupby") : slot.node === "Rollup" ? pills.find((pill) => pill.type === "rollup") : slot.node === "Head" ? pills.find((pill) => ["kind", "target", "agg", "metric"].includes(pill.type) && pill.value === slot.text) : void 0;
+    if (clause2) openEditor(clause2, { from: slot.from, to: slot.to });
+  };
+  const moveEditor = (direction) => {
+    if (active.kind !== "value") return false;
+    const visible = pills.filter((pill) => !hidden.has(pill.type));
+    const index = visible.findIndex((pill) => pill.id === active.clause.id);
+    const next = visible[index + direction];
+    if (!next) return false;
+    openEditor(next);
+    return true;
+  };
   const updateClause = (clause2, value) => {
     if (clause2.type === "kind" || clause2.type === "target") {
       const next2 = pivotQuery(currentRef.current.wql, clause2.type, value ?? "");
@@ -6645,6 +6790,13 @@ function WqlComposer({
     onSubmit?.(draft.wql);
   };
   const handleKeys = (event) => {
+    if (active.kind === "value" && event.key === "Tab" && !event.nativeEvent.isComposing) {
+      if (moveEditor(event.shiftKey ? -1 : 1)) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+      return;
+    }
     if (event.nativeEvent.isComposing) return;
     if (event.key === "Enter" && (event.ctrlKey || event.metaKey)) {
       event.preventDefault();
@@ -6709,119 +6861,285 @@ function WqlComposer({
     diagnosticsActions
   ] });
   const diagnostics = { ...resolved, valid: resolved.valid && !error, error: error ?? resolved.error };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("min-w-0 space-y-2", desktop && compact && "flex flex-wrap items-center gap-2 space-y-0 [&>:not([data-wql-inline])]:w-full", className), "data-testid": "wql-composer-root", children: [
-    diagnosticsPosition === "top" && showDiagnostics && /* @__PURE__ */ jsxRuntime.jsx(WqlDiagnosticsStrip, { diagnostics, stages, actions: action, variant: "header" }),
-    (desktop || active.kind === "wql" || !guided) && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-wql-inline": true, className: cn("min-w-0", desktop && compact ? "flex-1" : "w-full"), children: /* @__PURE__ */ jsxRuntime.jsx(WqlTextEditor, { value: resolved.wql, placeholder, dense: desktop && compact, onChange: (text) => commit(resolveQueryDraft(text)), onSubmit: submit, onEscape: () => {
-      if (active.kind === "closed") return false;
-      closeEditor();
-      return true;
-    }, autoFocus }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-1", !desktop && "rounded-xl border border-border p-2", desktop && compact && "hidden"), "data-testid": "wql-composer", onKeyDown: (event) => {
-      if (!["Delete", "Backspace"].includes(event.key) || !(event.target instanceof HTMLButtonElement)) return;
-      const buttons = Array.from(event.currentTarget.querySelectorAll('[data-testid^="token-slot-"]:not([data-testid^="token-slot-remove-"]):not([data-testid^="token-slot-value-"])'));
-      const pill = pills.filter((item) => !hidden.has(item.type))[buttons.indexOf(event.target)];
-      if (!pill || ["kind", "target", "agg", "metric"].includes(pill.type)) return;
-      event.preventDefault();
-      event.stopPropagation();
-      setUndo(currentRef.current.wql);
-      updateClause(pill, null);
-      inputRef.current?.focus();
-    }, children: [
-      guided && active.kind !== "wql" && pills.filter((pill) => !hidden.has(pill.type)).map((pill) => /* @__PURE__ */ jsxRuntime.jsx(TokenSlotPill, { clause: pill, compact, isActive: active.kind === "value" && active.clause.id === pill.id, onClick: () => openEditor(pill), onRemove: ["kind", "target", "agg", "metric"].includes(pill.type) ? void 0 : () => {
-        setUndo(currentRef.current.wql);
-        updateClause(pill, null);
-      } }, pill.id)),
-      !desktop && active.kind !== "wql" && guided && /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-label": "Search text or WQL", "aria-controls": suggesting ? listId : void 0, "aria-expanded": suggesting, "aria-activedescendant": suggesting && highlight >= 0 ? `${listId}-option-${highlight}` : void 0, value: pending, placeholder, onChange: (event) => {
-        const text = event.target.value;
-        setPending(text);
-        setHighlight(-1);
-        setError(void 0);
-        notify(resolveQueryDraft(base, text));
-      }, onKeyDown: handleKeys, className: "min-h-12 min-w-0 flex-[1_1_140px] bg-transparent font-mono text-base outline-none", "data-testid": "wql-composer-input" }),
-      customSlots
-    ] }),
-    (!desktop || undo) && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-wql-inline": desktop && compact ? "" : void 0, className: "flex flex-wrap items-center gap-2", children: [
-      !desktop && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
-        commit(currentRef.current);
-        if (active.kind === "wql") closeEditor();
-        else setActive({ kind: "wql" });
-      }, disabled: active.kind === "wql" && !guided, className: "min-h-12 rounded-lg px-3", children: active.kind === "wql" ? "Guided controls" : "Edit WQL" }),
-      undo && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
-        commit(resolveQueryDraft(undo));
-        setUndo(void 0);
-      }, className: cn("rounded-lg", desktop && compact ? "min-h-9 px-2.5 text-xs text-muted-foreground hover:text-foreground" : "min-h-12 px-3"), children: "Undo removal" })
-    ] }),
-    active.kind === "value" && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-testid": "wql-field-picker", className: "min-w-0 rounded-xl border border-border p-2 focus-within:ring-2 focus-within:ring-ring", onKeyDown: (event) => {
-      if (event.key === "Escape" || event.key === "Enter" && (event.ctrlKey || event.metaKey)) handleKeys(event);
-    }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: closeEditor, className: "min-h-12 px-3", children: "Back" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-sm", children: [
-        "Search ",
-        getClauseMeta(active.clause.type).label,
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ref: pickerRef, type: "search", role: "combobox", "aria-label": `Search ${getClauseMeta(active.clause.type).label}`, "aria-controls": listId, "aria-expanded": "true", "aria-activedescendant": highlight >= 0 ? `${listId}-option-${highlight}` : void 0, value: search, onChange: (event) => {
-          setSearch(event.target.value);
-          setHighlight(-1);
-          setError(void 0);
-        }, onKeyDown: handleKeys, className: "min-h-12 w-full rounded border border-border bg-background px-3 text-base", "data-testid": "wql-picker-search" })
-      ] }),
-      active.kind === "value" && active.clause.filterIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-12 items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: active.clause.negate ?? false, onChange: (event) => updateClause({ ...active.clause, negate: event.target.checked }, active.clause.value) }),
-          "Exclude"
+  const visiblePills = pills.filter((pill) => !hidden.has(pill.type));
+  const activePillIndex = active.kind === "value" ? visiblePills.findIndex((pill) => pill.id === active.clause.id) : -1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: cn(
+        "min-w-0",
+        compact ? "flex flex-col overflow-hidden rounded-xl border border-border bg-card shadow-xs transition-shadow focus-within:ring-2 focus-within:ring-ring" : "space-y-2",
+        className
+      ),
+      "data-testid": "wql-composer-root",
+      children: [
+        diagnosticsPosition === "top" && showDiagnostics && /* @__PURE__ */ jsxRuntime.jsx(WqlDiagnosticsStrip, { diagnostics, stages, actions: action, variant: "header" }),
+        (desktop || compact || active.kind === "wql" || !guided) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 w-full items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            WqlTextEditor,
+            {
+              value: resolved.wql,
+              placeholder,
+              dense: compact,
+              className: compact ? "min-w-0 w-full bg-transparent" : void 0,
+              activeRange: active.kind === "value" ? active.range : void 0,
+              activeClause: active.kind === "value" ? active.clause : void 0,
+              onSlotActivate: activateWqlSlot,
+              onChange: (text) => commit(resolveQueryDraft(text)),
+              onSubmit: submit,
+              onEscape: () => {
+                if (active.kind === "closed") return false;
+                closeEditor();
+                return true;
+              },
+              autoFocus
+            }
+          ) }),
+          desktop && compact && undo && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
+            commit(resolveQueryDraft(undo));
+            setUndo(void 0);
+          }, className: "min-h-9 shrink-0 rounded-lg px-2.5 text-xs text-muted-foreground hover:text-foreground", children: "Undo removal" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "flex min-h-12 items-center gap-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "checkbox", checked: active.clause.value.split("|").every((value) => value.endsWith("*")), onChange: (event) => updateClause(active.clause, active.clause.value.split("|").map((value) => `${value.replace(/\*$/, "")}${event.target.checked ? "*" : ""}`).join("|")) }),
-          "Starts with"
-        ] })
-      ] }),
-      active.kind === "value" && active.clause.type === "time" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-          "Start date",
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", "aria-label": "Start date", className: "min-h-12 w-full bg-background text-base", onChange: (event) => {
-            const end = draftWindow();
-            updateClause(active.clause, `from ${event.target.value}${end?.kind === "range" && end.end ? ` to ${end.end}` : ""}`);
-          }, value: astWindow?.kind === "range" ? astWindow.start : "" })
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex min-w-0 flex-wrap items-center gap-1", !desktop && !compact && "rounded-xl border border-border p-2", compact && "hidden"), "data-testid": "wql-composer", onKeyDown: (event) => {
+          if (!["Delete", "Backspace"].includes(event.key) || !(event.target instanceof HTMLButtonElement)) return;
+          const buttons = Array.from(event.currentTarget.querySelectorAll('[data-testid^="token-slot-"]:not([data-testid^="token-slot-remove-"]):not([data-testid^="token-slot-value-"])'));
+          const pill = visiblePills[buttons.indexOf(event.target)];
+          if (!pill || ["kind", "target", "agg", "metric"].includes(pill.type)) return;
+          event.preventDefault();
+          event.stopPropagation();
+          setUndo(currentRef.current.wql);
+          updateClause(pill, null);
+          inputRef.current?.focus();
+        }, children: [
+          guided && active.kind !== "wql" && visiblePills.map((pill) => /* @__PURE__ */ jsxRuntime.jsx(TokenSlotPill, { clause: pill, compact, isActive: active.kind === "value" && active.clause.id === pill.id, onClick: () => openEditor(pill), onRemove: ["kind", "target", "agg", "metric"].includes(pill.type) ? void 0 : () => {
+            setUndo(currentRef.current.wql);
+            updateClause(pill, null);
+          } }, pill.id)),
+          !desktop && !compact && active.kind !== "wql" && guided && /* @__PURE__ */ jsxRuntime.jsx("input", { ref: inputRef, type: "text", role: "combobox", "aria-label": "Search text or WQL", "aria-controls": suggesting ? listId : void 0, "aria-expanded": suggesting, "aria-activedescendant": suggesting && highlight >= 0 ? `${listId}-option-${highlight}` : void 0, value: pending, placeholder, onChange: (event) => {
+            const text = event.target.value;
+            setPending(text);
+            setHighlight(-1);
+            setError(void 0);
+            notify(resolveQueryDraft(base, text));
+          }, onKeyDown: handleKeys, className: "min-h-12 min-w-0 flex-[1_1_140px] bg-transparent font-mono text-base outline-none", "data-testid": "wql-composer-input" }),
+          customSlots
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
-          "End date",
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "date", "aria-label": "End date", className: "min-h-12 w-full bg-background text-base", onChange: (event) => {
-            const window2 = draftWindow();
-            if (window2?.kind === "range") updateClause(active.clause, `from ${window2.start}${event.target.value ? ` to ${event.target.value}` : ""}`);
-            else setError("Choose a start date first");
-          }, value: astWindow?.kind === "range" ? astWindow.end ?? "" : "" })
-        ] })
-      ] }),
-      active.kind === "value" && (customEditor ? /* @__PURE__ */ jsxRuntime.jsx(customEditor.Editor, { value: customEditor.parseValue ? customEditor.parseValue(active.clause.value) : active.clause.value, onChange: (value) => updateClause(active.clause, customEditor.formatValue ? customEditor.formatValue(value) : String(value)), onClose: closeEditor }) : /* @__PURE__ */ jsxRuntime.jsx(InlineClauseEditor, { clause: active.clause, filteredItems: preferredItems, selectedValues: values2.selectedValues, isMulti: values2.isMulti, typedValue: values2.typedValue, canCommitTyped: values2.canCommitTyped, emptyText: values2.emptyText, highlightIdx: highlight, onHighlight: setHighlight, onCommitValue: chooseValue, onCommitTyped: chooseValue, listId, onDone: closeEditor, onReorder: (dimensions) => updateClause(active.clause, dimensions.join("|")) }))
-    ] }),
-    suggesting && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listId, role: "listbox", "aria-label": "Query conditions", className: "max-h-64 overflow-y-auto rounded-xl border border-border p-1", "data-testid": "wql-filter-typeahead", children: [
-      catalog.map((type, index) => /* @__PURE__ */ jsxRuntime.jsxs("button", { id: `${listId}-option-${index}`, type: "button", role: "option", "aria-selected": false, onMouseEnter: () => setHighlight(index), onClick: () => openField(type), className: cn("flex min-h-12 w-full items-center gap-2 rounded px-3 text-left", index === highlight && "bg-muted"), "data-testid": `wql-filter-typeahead-${type}`, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          pills.some((pill) => pill.type === type) ? "Edit" : "Add",
-          " ",
-          getClauseMeta(type).label
+        (!desktop && !compact || !compact && undo) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          !desktop && !compact && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
+            commit(currentRef.current);
+            if (active.kind === "wql") closeEditor();
+            else setActive({ kind: "wql" });
+          }, disabled: active.kind === "wql" && !guided, className: "min-h-12 rounded-lg px-3", children: active.kind === "wql" ? "Guided controls" : "Edit WQL" }),
+          undo && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: () => {
+            commit(resolveQueryDraft(undo));
+            setUndo(void 0);
+          }, className: "min-h-12 rounded-lg px-3", children: "Undo removal" })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: type })
-      ] }, type)),
-      textAction && /* @__PURE__ */ jsxRuntime.jsxs("button", { id: `${listId}-option-${catalog.length}`, type: "button", role: "option", "aria-selected": false, onMouseEnter: () => setHighlight(catalog.length), className: cn("min-h-12 w-full rounded px-3 text-left", highlight === catalog.length && "bg-muted"), onClick: submit, children: [
-        "Search text ",
-        pending
-      ] })
-    ] }),
-    pivot && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alertdialog", "aria-label": "Confirm query pivot", className: "rounded-xl border border-border p-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Changing the query removes incompatible clauses:" }),
-      /* @__PURE__ */ jsxRuntime.jsx("ul", { children: pivot.removed.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, item)) }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "min-h-12 px-3", onClick: () => setPivot(void 0), children: "Cancel" }),
-      /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "min-h-12 px-3", onClick: () => {
-        commit(pivot.draft);
-        setPivot(void 0);
-        closeEditor();
-      }, children: "Change query" })
-    ] }),
-    !showDiagnostics && (error ?? resolved.error) && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error ?? resolved.error }),
-    !guided && !resolved.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Use Edit WQL to preserve every clause." }),
-    pending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", "data-testid": "wql-composer-pending", children: resolved.valid ? "Current draft includes this text" : resolved.error }),
-    showDiagnostics && diagnosticsPosition === "bottom" ? /* @__PURE__ */ jsxRuntime.jsx(WqlDiagnosticsStrip, { diagnostics, stages, actions: action }) : diagnosticsPosition !== "top" || !showDiagnostics ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: action }) : null
-  ] });
+        active.kind === "value" && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-testid": "wql-field-picker",
+            className: cn(
+              "min-w-0",
+              compact ? "border-t border-border/70 bg-muted/20 px-2.5 py-2 space-y-1.5" : "space-y-2 rounded-xl border border-border/80 bg-muted/30 p-2 sm:p-2.5 shadow-xs backdrop-blur-sm"
+            ),
+            onKeyDown: (event) => {
+              if (event.key === "Escape" || event.key === "Enter" && (event.ctrlKey || event.metaKey)) handleKeys(event);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex shrink-0 items-center gap-1.5 rounded-md border border-border/70 bg-background/80 px-2.5 py-1 text-xs font-semibold text-foreground font-mono", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-xs", children: getClauseMeta(active.clause.type).icon }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: getClauseMeta(active.clause.type).label })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "sr-only", children: [
+                  "Search ",
+                  getClauseMeta(active.clause.type).label
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "input",
+                  {
+                    ref: pickerRef,
+                    type: "search",
+                    role: "combobox",
+                    "aria-label": `Search ${getClauseMeta(active.clause.type).label}`,
+                    "aria-controls": listId,
+                    "aria-expanded": "true",
+                    "aria-activedescendant": highlight >= 0 ? `${listId}-option-${highlight}` : void 0,
+                    value: search,
+                    placeholder: active.clause.value ? `Current: ${active.clause.value}` : `Type value for ${getClauseMeta(active.clause.type).label}\u2026`,
+                    onChange: (event) => {
+                      setSearch(event.target.value);
+                      setHighlight(-1);
+                      setError(void 0);
+                    },
+                    onKeyDown: handleKeys,
+                    className: "min-h-10 sm:min-h-8 min-w-0 flex-1 rounded-lg border border-border/80 bg-background px-2.5 font-mono text-sm sm:text-xs text-foreground placeholder:text-muted-foreground/60 focus:outline-none focus:ring-1 focus:ring-primary shadow-xs",
+                    "data-testid": "wql-picker-search"
+                  }
+                ),
+                active.clause.filterIndex !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "order-last flex w-full items-center gap-1.5 sm:order-none sm:w-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer select-none items-center gap-1.5 px-2 py-0.5 rounded-md border border-border/60 bg-background/70 text-[11px] text-muted-foreground hover:text-foreground transition-colors", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: active.clause.negate ?? false,
+                        onChange: (event) => updateClause({ ...active.clause, negate: event.target.checked }, active.clause.value),
+                        className: "size-3 rounded border-border text-primary focus:ring-primary"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Exclude" })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "inline-flex cursor-pointer select-none items-center gap-1.5 px-2 py-0.5 rounded-md border border-border/60 bg-background/70 text-[11px] text-muted-foreground hover:text-foreground transition-colors", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "input",
+                      {
+                        type: "checkbox",
+                        checked: active.clause.value.split("|").every((value) => value.endsWith("*")),
+                        onChange: (event) => updateClause(active.clause, active.clause.value.split("|").map((value) => `${value.replace(/\*$/, "")}${event.target.checked ? "*" : ""}`).join("|")),
+                        className: "size-3 rounded border-border text-primary focus:ring-primary"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Starts with" })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Previous WQL segment",
+                      "data-testid": "wql-segment-previous",
+                      disabled: activePillIndex <= 0,
+                      onClick: () => {
+                        if (moveEditor(-1)) pickerRef.current?.focus();
+                      },
+                      className: "flex items-center justify-center min-h-9 min-w-9 sm:min-h-7 sm:min-w-7 rounded-md border border-border/70 bg-background/80 text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none text-xs transition-colors",
+                      children: "\u2190"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Next WQL segment",
+                      "data-testid": "wql-segment-next",
+                      disabled: activePillIndex < 0 || activePillIndex >= visiblePills.length - 1,
+                      onClick: () => {
+                        if (moveEditor(1)) pickerRef.current?.focus();
+                      },
+                      className: "flex items-center justify-center min-h-9 min-w-9 sm:min-h-7 sm:min-w-7 rounded-md border border-border/70 bg-background/80 text-muted-foreground hover:bg-muted hover:text-foreground disabled:opacity-40 disabled:pointer-events-none text-xs transition-colors",
+                      children: "\u2192"
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": "Close segment editor",
+                      onClick: closeEditor,
+                      className: "flex items-center justify-center min-h-9 min-w-9 sm:min-h-7 sm:min-w-7 rounded-md text-muted-foreground hover:bg-muted hover:text-foreground text-xs transition-colors",
+                      children: "\u2715"
+                    }
+                  )
+                ] })
+              ] }),
+              active.kind === "value" && active.clause.type === "time" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2 pt-0.5 text-xs", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-muted-foreground", children: [
+                  "Start date",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "date",
+                      "aria-label": "Start date",
+                      className: "mt-1 min-h-8 w-full rounded-md border border-border/80 bg-background px-2.5 text-xs text-foreground",
+                      onChange: (event) => {
+                        const end = draftWindow();
+                        updateClause(active.clause, `from ${event.target.value}${end?.kind === "range" && end.end ? ` to ${end.end}` : ""}`);
+                      },
+                      value: astWindow?.kind === "range" ? astWindow.start : ""
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "block text-muted-foreground", children: [
+                  "End date",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "input",
+                    {
+                      type: "date",
+                      "aria-label": "End date",
+                      className: "mt-1 min-h-8 w-full rounded-md border border-border/80 bg-background px-2.5 text-xs text-foreground",
+                      onChange: (event) => {
+                        const window2 = draftWindow();
+                        if (window2?.kind === "range") updateClause(active.clause, `from ${window2.start}${event.target.value ? ` to ${event.target.value}` : ""}`);
+                        else setError("Choose a start date first");
+                      },
+                      value: astWindow?.kind === "range" ? astWindow.end ?? "" : ""
+                    }
+                  )
+                ] })
+              ] }),
+              active.kind === "value" && (customEditor ? /* @__PURE__ */ jsxRuntime.jsx(
+                customEditor.Editor,
+                {
+                  value: customEditor.parseValue ? customEditor.parseValue(active.clause.value) : active.clause.value,
+                  onChange: (value) => updateClause(active.clause, customEditor.formatValue ? customEditor.formatValue(value) : String(value)),
+                  onClose: closeEditor
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx(
+                InlineClauseEditor,
+                {
+                  clause: active.clause,
+                  filteredItems: preferredItems,
+                  selectedValues: values2.selectedValues,
+                  isMulti: values2.isMulti,
+                  typedValue: values2.typedValue,
+                  canCommitTyped: values2.canCommitTyped,
+                  emptyText: values2.emptyText,
+                  highlightIdx: highlight,
+                  onHighlight: setHighlight,
+                  onCommitValue: chooseValue,
+                  onCommitTyped: chooseValue,
+                  listId,
+                  onDone: closeEditor,
+                  onReorder: (dimensions) => updateClause(active.clause, dimensions.join("|"))
+                }
+              ))
+            ]
+          }
+        ),
+        suggesting && /* @__PURE__ */ jsxRuntime.jsxs("div", { id: listId, role: "listbox", "aria-label": "Query conditions", className: "max-h-64 overflow-y-auto rounded-xl border border-border p-1", "data-testid": "wql-filter-typeahead", children: [
+          catalog.map((type, index) => /* @__PURE__ */ jsxRuntime.jsxs("button", { id: `${listId}-option-${index}`, type: "button", role: "option", "aria-selected": false, onMouseEnter: () => setHighlight(index), onClick: () => openField(type), className: cn("flex min-h-12 w-full items-center gap-2 rounded px-3 text-left", index === highlight && "bg-muted"), "data-testid": `wql-filter-typeahead-${type}`, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+              pills.some((pill) => pill.type === type) ? "Edit" : "Add",
+              " ",
+              getClauseMeta(type).label
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: type })
+          ] }, type)),
+          textAction && /* @__PURE__ */ jsxRuntime.jsxs("button", { id: `${listId}-option-${catalog.length}`, type: "button", role: "option", "aria-selected": false, onMouseEnter: () => setHighlight(catalog.length), className: cn("min-h-12 w-full rounded px-3 text-left", highlight === catalog.length && "bg-muted"), onClick: submit, children: [
+            "Search text ",
+            pending
+          ] })
+        ] }),
+        pivot && /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "alertdialog", "aria-label": "Confirm query pivot", className: "rounded-xl border border-border p-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { children: "Changing the query removes incompatible clauses:" }),
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { children: pivot.removed.map((item) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: item }, item)) }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "min-h-12 px-3", onClick: () => setPivot(void 0), children: "Cancel" }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "min-h-12 px-3", onClick: () => {
+            commit(pivot.draft);
+            setPivot(void 0);
+            closeEditor();
+          }, children: "Change query" })
+        ] }),
+        !showDiagnostics && (error ?? resolved.error) && /* @__PURE__ */ jsxRuntime.jsx("p", { role: "alert", className: "text-sm text-destructive", children: error ?? resolved.error }),
+        !guided && !resolved.error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Use Edit WQL to preserve every clause." }),
+        pending && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", "data-testid": "wql-composer-pending", children: resolved.valid ? "Current draft includes this text" : resolved.error }),
+        showDiagnostics && diagnosticsPosition === "bottom" ? /* @__PURE__ */ jsxRuntime.jsx(WqlDiagnosticsStrip, { diagnostics, stages, actions: action }) : diagnosticsPosition !== "top" || !showDiagnostics ? Boolean(actionLabel || diagnosticsActions) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: action }) : null
+      ]
+    }
+  );
 }
 function WqlQueryInspectorModal({
   isOpen,