@malloydata/malloy-explorer 0.0.269-dev250430213122 → 0.0.271-dev250506000031

package/dist/esm/index.js

@@ -17,7 +17,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo, useState, useRef, createElement, useContext, useCallback, createContext, memo, useReducer } from "react";
 import * as QB from "@malloydata/malloy-query-builder";
-import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTRefinementViewDefinition, ASTLimitViewOperation, ASTNestViewOperation, ASTOrderByViewOperation, ASTAggregateViewOperation, ASTGroupByViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTRefinementViewDefinition, ASTOrderByViewOperation, ASTLimitViewOperation, ASTNestViewOperation, ASTAggregateViewOperation, ASTGroupByViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import * as render from "@malloydata/render";
 import "@malloydata/render/webcomponent";
@@ -3332,13 +3332,19 @@ function MalloyExplorerProvider({
   topValues
 }) {
   const rootQuery = useQueryBuilder(source, query);
+  const [currentNestView, setCurrentNestView] = React.useState(null);
+  const [currentNestQueryPanel, setCurrentNestQueryPanel] = React.useState(null);
   return /* @__PURE__ */ jsx(TooltipProvider, {
     children: /* @__PURE__ */ jsx(QueryEditorContext.Provider, {
       value: {
         source,
         rootQuery,
         setQuery,
-        topValues
+        topValues,
+        currentNestQueryPanel,
+        onCurrentNestQueryPanelChange: setCurrentNestQueryPanel,
+        currentNestView,
+        onCurrentNestViewChange: setCurrentNestView
       },
       children
     })
@@ -3817,10 +3823,10 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$M.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$M.scaleUp, customStyle)
+    ..._stylex.props(styles$N.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$N.scaleUp, customStyle)
   });
 }
-const styles$M = {
+const styles$N = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -3893,17 +3899,17 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$L.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$M.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.badge, styles$L.label),
+      ..._stylex.props(fontStyles.badge, styles$M.label),
       children: label
     })]
   });
 }
-const styles$L = {
+const styles$M = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -3985,10 +3991,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$K.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$L.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$K = {
+const styles$L = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -4789,19 +4795,12 @@ function Button({
   icon,
   label,
   tooltip,
-  onClick,
   isDisabled = false,
   customStyle,
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$J.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
-    ...onClick && {
-      onClick: (e) => {
-        e.preventDefault();
-        onClick(e);
-      }
-    },
+    ..._stylex.props(styles$K.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     type: "button",
     disabled: isDisabled,
     ...props2,
@@ -4811,9 +4810,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$J.icon
+        customStyle: styles$K.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$J.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$K.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -4840,7 +4839,7 @@ function Button({
     return button;
   }
 }
-const styles$J = {
+const styles$K = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5091,7 +5090,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$I.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$J.nonInteractive, customStyle),
     ...dragProps == null ? void 0 : dragProps.attributes,
     ...dragProps == null ? void 0 : dragProps.listeners,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
@@ -5128,7 +5127,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$I = {
+const styles$J = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5152,7 +5151,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$H.main, customStyle),
+    ..._stylex.props(styles$I.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5163,16 +5162,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$H.onlyChild;
-  if (index2 === 0) return styles$H.firstChild;
-  if (index2 === count2 - 1) return styles$H.lastChild;
-  return styles$H.innerChild;
+  if (count2 === 1) return styles$I.onlyChild;
+  if (index2 === 0) return styles$I.firstChild;
+  if (index2 === count2 - 1) return styles$I.lastChild;
+  return styles$I.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$H = {
+const styles$I = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -5244,7 +5243,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$G.errorIcon
+          customStyle: styles$H.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -5257,7 +5256,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$G = {
+const styles$H = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5302,22 +5301,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$F.focused, !!errorMessage && styles$F.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$G.focused, !!errorMessage && styles$G.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$F.icon
+        customStyle: styles$G.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$F.placeholder),
+          ..._stylex.props(fontStyles.body, styles$G.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$F.input, fontStyles.body),
+          ..._stylex.props(styles$G.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -5342,7 +5341,7 @@ function EditableToken({
     })]
   });
 }
-const styles$F = {
+const styles$G = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7684,12 +7683,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$E.main, isFocused && styles$E.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$F.main, isFocused && styles$F.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$E.input),
+      ..._stylex.props(fontStyles.body, styles$F.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7697,7 +7696,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$E.actionButton, value === "" && styles$E.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$F.actionButton, value === "" && styles$F.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -7705,7 +7704,7 @@ function TextInput({
     })]
   });
 }
-const styles$E = {
+const styles$F = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -7914,7 +7913,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$D.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
+      ..._stylex.props(tokenStyles.main, styles$E.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -7943,7 +7942,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$D.searchInput,
+            customStyle: styles$E.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -7976,21 +7975,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$D.selectItem),
+    ..._stylex.props(fontStyles.body, styles$E.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$D.radioChecked
+      customStyle: styles$E.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$D.radioUnchecked
+      customStyle: styles$E.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$D = {
+const styles$E = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8080,7 +8079,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$C.container, customStyle),
+    ..._stylex.props(styles$D.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8094,7 +8093,7 @@ function Card({
     })]
   });
 }
-const styles$C = {
+const styles$D = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8185,10 +8184,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$B.label),
+          ..._stylex.props(fontStyles.body, styles$C.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$B.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$C.sublabel),
           children: sublabel
         })]
       })]
@@ -8200,7 +8199,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$B = {
+const styles$C = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19014,7 +19013,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$A.root, customStyle),
+    ..._stylex.props(styles$B.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19034,7 +19033,7 @@ function Spinner({
     })
   });
 }
-const styles$A = {
+const styles$B = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -23432,7 +23431,7 @@ const Popover = ({
     })
   });
 };
-const styles$z = {
+const styles$A = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23484,7 +23483,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$z.wrapper, customStyle),
+    ..._stylex.props(styles$A.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23552,7 +23551,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$z.selectListDiv, customStyle),
+      ..._stylex.props(styles$A.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23584,8 +23583,8 @@ function SelectList({
           }), /* @__PURE__ */ jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$z.checkIcon,
-              ...isSelected ? styles$z.checkIconSelected : void 0
+              ...styles$A.checkIcon,
+              ...isSelected ? styles$A.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsx("span", {
             ...{
@@ -23607,17 +23606,18 @@ function DatePicker({
   setValue,
   units,
   maxLevel,
-  customStyle
+  customStyle,
+  forwardRef
 }) {
   const [date, setDate] = useState(value);
   const calendar2 = getCalendar(date);
   const [pickLevel, setPickLevel] = useState(units);
-  const yearBucket = Math.floor(hooks(date).year() / 10) * 10;
+  const yearBucket = Math.floor(hooks.utc(date).year() / 10) * 10;
   useEffect(() => {
     setDate(value);
   }, [value]);
   const setYear = (year) => {
-    const newDate = hooks(date).year(year).toDate();
+    const newDate = hooks.utc(date).year(year).toDate();
     setDate(newDate);
     setValue(newDate);
   };
@@ -23641,12 +23641,12 @@ function DatePicker({
         1: {
           className: "mly1247r65 mlyfvyar9 mlymcgfsh mly36usyh mly78zum5 mly6s0dn4 mlyl56j7k mly8fuzfi mly1v5ugh9 mly1fcty0u mly1ypdohk mly6mezaz mly1sxf85j mlyt89l8w mly1fxp9ov mly6wxqrg mly10bk7bj"
         }
-      }[!!(hooks(date).year() === yearBucket + offset2) << 0],
+      }[!!(hooks.utc(date).year() === yearBucket + offset2) << 0],
       children: yearBucket + offset2
     });
   };
   const setMonth2 = (month) => {
-    const newDate = hooks(date).month(month).toDate();
+    const newDate = hooks.utc(date).month(month).toDate();
     setDate(newDate);
     setValue(newDate);
   };
@@ -23659,13 +23659,13 @@ function DatePicker({
     setValue(dateOfFirstDayOfWeek);
   };
   const setQuarter = (quarter) => {
-    const newDate = hooks(date).quarter(quarter + 1).toDate();
+    const newDate = hooks.utc(date).quarter(quarter + 1).toDate();
     setDate(newDate);
     setValue(newDate);
   };
   const monthButton = (month) => {
     const click = () => setMonth2(month);
-    const isSelected = hooks(date).month() === month && hooks(date).year() === hooks(value).year();
+    const isSelected = hooks.utc(date).month() === month && hooks.utc(date).year() === hooks.utc(value).year();
     return /* @__PURE__ */ jsx("div", {
       onClick: click,
       ...{
@@ -23681,7 +23681,7 @@ function DatePicker({
   };
   const quarterButton = (quarter) => {
     const click = () => setQuarter(quarter);
-    const isSelected = hooks(date).quarter() - 1 === quarter && hooks(date).year() === hooks(value).year();
+    const isSelected = hooks.utc(date).quarter() - 1 === quarter && hooks.utc(date).year() === hooks.utc(value).year();
     return /* @__PURE__ */ jsxs("div", {
       onClick: click,
       ...{
@@ -23696,7 +23696,8 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$y.outer, customStyle),
+    ..._stylex.props(styles$z.outer, customStyle),
+    ref: forwardRef,
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mly1q0g3np mly1qughib mly1nejdyq mlyu06os2"
@@ -23711,13 +23712,13 @@ function DatePicker({
           icon: "chevronLeft",
           onClick: () => {
             if (pickLevel === "day" || pickLevel === "week") {
-              setDate(hooks(date).subtract(1, "month").toDate());
+              setDate(hooks.utc(date).subtract(1, "month").toDate());
             } else if (pickLevel === "month" || pickLevel === "quarter") {
-              setDate(hooks(date).subtract(1, "year").toDate());
+              setDate(hooks.utc(date).subtract(1, "year").toDate());
             } else if (pickLevel === "year") {
-              setDate(hooks(date).subtract(10, "years").toDate());
+              setDate(hooks.utc(date).subtract(10, "years").toDate());
             } else {
-              setDay(hooks(date).subtract(1, "days").toDate());
+              setDay(hooks.utc(date).subtract(1, "days").toDate());
             }
           }
         })
@@ -23736,10 +23737,10 @@ function DatePicker({
             setPickLevel(maxLevel);
           }
         },
-        children: [(pickLevel === "day" || pickLevel === "week") && hooks(date).format("MMMM YYYY"), (pickLevel === "month" || pickLevel === "quarter") && hooks(date).format("YYYY"), pickLevel === "year" && /* @__PURE__ */ jsxs(Fragment, {
+        children: [(pickLevel === "day" || pickLevel === "week") && hooks.utc(date).format("MMMM YYYY"), (pickLevel === "month" || pickLevel === "quarter") && hooks.utc(date).format("YYYY"), pickLevel === "year" && /* @__PURE__ */ jsxs(Fragment, {
           children: [yearBucket, "-", yearBucket + 9]
         }), (pickLevel === "hour" || pickLevel === "minute" || pickLevel === "second") && /* @__PURE__ */ jsx(Fragment, {
-          children: hooks(date).format("MMMM D, YYYY")
+          children: hooks.utc(date).format("MMMM D, YYYY")
         })]
       }), /* @__PURE__ */ jsx("div", {
         ...{
@@ -23751,13 +23752,13 @@ function DatePicker({
           icon: "chevronRight",
           onClick: () => {
             if (pickLevel === "day" || pickLevel === "week") {
-              setDate(hooks(date).add(1, "month").toDate());
+              setDate(hooks.utc(date).add(1, "month").toDate());
             } else if (pickLevel === "month" || pickLevel === "quarter") {
-              setDate(hooks(date).add(1, "year").toDate());
+              setDate(hooks.utc(date).add(1, "year").toDate());
             } else if (pickLevel === "year") {
-              setDate(hooks(date).add(10, "years").toDate());
+              setDate(hooks.utc(date).add(10, "years").toDate());
             } else {
-              setDay(hooks(date).add(1, "days").toDate());
+              setDay(hooks.utc(date).add(1, "days").toDate());
             }
           }
         })
@@ -23964,25 +23965,25 @@ function DatePicker({
         },
         children: [/* @__PURE__ */ jsx(NumberInput, {
           label: "Hours",
-          value: parseInt(hooks(date).format("hh")),
+          value: parseInt(hooks.utc(date).format("hh")),
           setValue: (hour12) => {
-            const amPm = hooks(date).hour() >= 12 ? "PM" : "AM";
-            const newHour24 = parseInt(hooks(`${hour12} ${amPm}`, ["hh A"]).format("H"));
-            setValue(hooks(date).hour(newHour24).toDate());
+            const amPm = hooks.utc(date).hour() >= 12 ? "PM" : "AM";
+            const newHour24 = parseInt(hooks.utc(`${hour12} ${amPm}`, ["hh A"]).format("H"));
+            setValue(hooks.utc(date).hour(newHour24).toDate());
           },
           width: "40px"
         }), (units === "minute" || units === "second") && /* @__PURE__ */ jsx(NumberInput, {
           label: "Minutes",
-          value: hooks(date).minutes(),
+          value: hooks.utc(date).minutes(),
           setValue: (minute) => {
-            setValue(hooks(date).minute(minute).toDate());
+            setValue(hooks.utc(date).minute(minute).toDate());
           },
           width: "40px"
         }), units === "second" && /* @__PURE__ */ jsx(NumberInput, {
           label: "Seconds",
-          value: hooks(date).seconds(),
+          value: hooks.utc(date).seconds(),
           setValue: (second) => {
-            setValue(hooks(date).second(second).toDate());
+            setValue(hooks.utc(date).second(second).toDate());
           },
           width: "40px"
         }), /* @__PURE__ */ jsx("div", {
@@ -23992,11 +23993,11 @@ function DatePicker({
             flexDirection: "column"
           },
           children: /* @__PURE__ */ jsx(SelectDropdown, {
-            value: hooks(date).hour() >= 12 ? "PM" : "AM",
+            value: hooks.utc(date).hour() >= 12 ? "PM" : "AM",
             onChange: (amPm) => {
-              const hour12 = parseInt(hooks(date).format("h"));
-              const newHour24 = parseInt(hooks(`${hour12} ${amPm}`, ["hh A"]).format("H"));
-              setValue(hooks(date).hour(newHour24).toDate());
+              const hour12 = parseInt(hooks.utc(date).format("h"));
+              const newHour24 = parseInt(hooks.utc(`${hour12} ${amPm}`, ["hh A"]).format("H"));
+              setValue(hooks.utc(date).hour(newHour24).toDate());
             },
             options: [{
               value: "AM",
@@ -24011,7 +24012,7 @@ function DatePicker({
     })]
   });
 }
-const styles$y = {
+const styles$z = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24020,7 +24021,7 @@ const styles$y = {
   }
 };
 function getCalendar(date) {
-  const firstDayOfMonth = hooks(date).date(1);
+  const firstDayOfMonth = hooks.utc(date).date(1);
   const dow = firstDayOfMonth.day();
   const daysInMonth2 = firstDayOfMonth.daysInMonth();
   const daysInPreviousMonth = firstDayOfMonth.clone().subtract(1, "day").daysInMonth();
@@ -24097,7 +24098,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$x.header, variantColors[variant], children ? styles$x.headerWithContent : null),
+      ..._stylex.props(styles$y.header, variantColors[variant], children ? styles$y.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24110,22 +24111,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$x.title, fontStyles.emphasized),
+          ..._stylex.props(styles$y.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$x.description, fontStyles.supporting),
+          ..._stylex.props(styles$y.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$x.content, fontStyles.body),
+      ..._stylex.props(styles$y.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$x = {
+const styles$y = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24267,14 +24268,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$w.main, customStyle),
+      ..._stylex.props(styles$x.main, customStyle),
       children: React.Children.map(children, (child) => /* @__PURE__ */ jsxs(Fragment, {
         children: [child, /* @__PURE__ */ jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$w = {
+const styles$x = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24311,10 +24312,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$v.label),
+          ..._stylex.props(fontStyles.body, styles$w.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$v.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24326,7 +24327,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$v = {
+const styles$w = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25117,40 +25118,6 @@ var MenuArrow = React.forwardRef(
 MenuArrow.displayName = ARROW_NAME$1;
 var SUB_NAME = "MenuSub";
 var [MenuSubProvider, useMenuSubContext] = createMenuContext(SUB_NAME);
-var MenuSub = (props2) => {
-  const { __scopeMenu, children, open = false, onOpenChange } = props2;
-  const parentMenuContext = useMenuContext(SUB_NAME, __scopeMenu);
-  const popperScope = usePopperScope(__scopeMenu);
-  const [trigger, setTrigger] = React.useState(null);
-  const [content, setContent] = React.useState(null);
-  const handleOpenChange = useCallbackRef$1(onOpenChange);
-  React.useEffect(() => {
-    if (parentMenuContext.open === false) handleOpenChange(false);
-    return () => handleOpenChange(false);
-  }, [parentMenuContext.open, handleOpenChange]);
-  return /* @__PURE__ */ jsx(Root2$4, { ...popperScope, children: /* @__PURE__ */ jsx(
-    MenuProvider,
-    {
-      scope: __scopeMenu,
-      open,
-      onOpenChange: handleOpenChange,
-      content,
-      onContentChange: setContent,
-      children: /* @__PURE__ */ jsx(
-        MenuSubProvider,
-        {
-          scope: __scopeMenu,
-          contentId: useId(),
-          triggerId: useId(),
-          trigger,
-          onTriggerChange: setTrigger,
-          children
-        }
-      )
-    }
-  ) });
-};
-MenuSub.displayName = SUB_NAME;
 var SUB_TRIGGER_NAME$1 = "MenuSubTrigger";
 var MenuSubTrigger = React.forwardRef(
   (props2, forwardedRef) => {
@@ -25371,7 +25338,6 @@ var RadioItem = MenuRadioItem;
 var ItemIndicator = MenuItemIndicator;
 var Separator = MenuSeparator;
 var Arrow2 = MenuArrow;
-var Sub = MenuSub;
 var SubTrigger = MenuSubTrigger;
 var SubContent = MenuSubContent;
 var DROPDOWN_MENU_NAME = "DropdownMenu";
@@ -25510,14 +25476,14 @@ var DropdownMenuGroup = React.forwardRef(
 );
 DropdownMenuGroup.displayName = GROUP_NAME;
 var LABEL_NAME = "DropdownMenuLabel";
-var DropdownMenuLabel$1 = React.forwardRef(
+var DropdownMenuLabel = React.forwardRef(
   (props2, forwardedRef) => {
     const { __scopeDropdownMenu, ...labelProps } = props2;
     const menuScope = useMenuScope(__scopeDropdownMenu);
     return /* @__PURE__ */ jsx(Label, { ...menuScope, ...labelProps, ref: forwardedRef });
   }
 );
-DropdownMenuLabel$1.displayName = LABEL_NAME;
+DropdownMenuLabel.displayName = LABEL_NAME;
 var ITEM_NAME = "DropdownMenuItem";
 var DropdownMenuItem$1 = React.forwardRef(
   (props2, forwardedRef) => {
@@ -25571,16 +25537,6 @@ var DropdownMenuArrow = React.forwardRef(
   }
 );
 DropdownMenuArrow.displayName = ARROW_NAME;
-var DropdownMenuSub = (props2) => {
-  const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props2;
-  const menuScope = useMenuScope(__scopeDropdownMenu);
-  const [open = false, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  return /* @__PURE__ */ jsx(Sub, { ...menuScope, open, onOpenChange: setOpen, children });
-};
 var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
 var DropdownMenuSubTrigger = React.forwardRef((props2, forwardedRef) => {
   const { __scopeDropdownMenu, ...subTriggerProps } = props2;
@@ -25617,11 +25573,7 @@ var Root2$1 = DropdownMenu$1;
 var Trigger$1 = DropdownMenuTrigger;
 var Portal2 = DropdownMenuPortal;
 var Content2 = DropdownMenuContent;
-var Label2 = DropdownMenuLabel$1;
 var Item2 = DropdownMenuItem$1;
-var Sub2 = DropdownMenuSub;
-var SubTrigger2 = DropdownMenuSubTrigger;
-var SubContent2 = DropdownMenuSubContent;
 function DropdownMenu({
   trigger,
   tooltip,
@@ -25660,7 +25612,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$u.content),
+        ..._stylex.props(fontStyles.body, styles$v.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25687,79 +25639,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$u.icon
+      customStyle: styles$v.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$u.label),
+        ..._stylex.props(fontStyles.body, styles$v.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$v.sublabel),
         children: sublabel
       })]
     })]
   });
 }
-function DropdownSubMenuItem({
-  icon,
-  label,
-  sublabel,
-  disabled,
-  children,
-  open,
-  onOpenChange
-}) {
-  const isControlled = open !== void 0 && onOpenChange !== void 0;
-  return /* @__PURE__ */ jsxs(Sub2, {
-    ...isControlled && {
-      open
-    },
-    children: [/* @__PURE__ */ jsxs(SubTrigger2, {
-      ...{
-        className: "mly78zum5 mly6s0dn4 mlye8ttls mly167g77z mly1kogg8i mly1ypdohk mly1a2a7pz mly1bw6wve mly5ezrf1 mly15rdse5 mly1z060rf mly5deeek mly1jacekv mly7ouyw2 mly7h4d18"
-      },
-      disabled,
-      ...isControlled && {
-        onClick: () => onOpenChange(!open)
-      },
-      children: [icon && /* @__PURE__ */ jsx(Icon, {
-        name: icon,
-        customStyle: styles$u.icon
-      }), /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mly78zum5 mlydt5ytf mly1iyjqo2"
-        },
-        children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$u.label),
-          children: label
-        }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
-          children: sublabel
-        })]
-      }), !isControlled && /* @__PURE__ */ jsx(Icon, {
-        name: "chevronRight",
-        customStyle: styles$u.icon
-      })]
-    }), /* @__PURE__ */ jsx(SubContent2, {
-      ...{
-        className: "mly78zum5 mlydt5ytf mly1q4ynmn mlyotlr4g mly17fq3gk mlyfawy5m"
-      },
-      sideOffset: 5,
-      children: React.Children.map(children, (child) => child)
-    })]
-  });
-}
-function DropdownMenuLabel({
-  label
-}) {
-  return /* @__PURE__ */ jsx(Label2, {
-    ..._stylex.props(fontStyles.supporting, styles$u.menuLabel),
-    children: label
-  });
-}
-const styles$u = {
+const styles$v = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25795,19 +25690,6 @@ const styles$u = {
     paddingBottom: null,
     $$css: true
   },
-  menuLabel: {
-    padding: "mlydqdrvq",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    color: "mly9dwj6z",
-    $$css: true
-  },
   icon: {
     color: "mly1mguc6l",
     $$css: true
@@ -25830,7 +25712,9 @@ function QueryActionBar({
   const {
     rootQuery,
     setQuery,
-    source
+    source,
+    onCurrentNestQueryPanelChange,
+    onCurrentNestViewChange
   } = useContext(QueryEditorContext);
   const {
     onCollapse
@@ -25842,6 +25726,10 @@ function QueryActionBar({
       runQuery(source, rootQuery.build());
     }
   };
+  const focusMainQueryPanel = () => {
+    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
+    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(null);
+  };
   return /* @__PURE__ */ jsxs("div", {
     ...{
       className: "mly78zum5 mly1qughib mly6s0dn4 mlye8ttls"
@@ -25853,7 +25741,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$t.title),
+        ..._stylex.props(fontStyles.largeBody, styles$u.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxs("div", {
@@ -25861,7 +25749,10 @@ function QueryActionBar({
         className: "mly78zum5 mly167g77z"
       },
       children: [/* @__PURE__ */ jsx(Button, {
-        onClick: () => setQuery == null ? void 0 : setQuery(void 0),
+        onClick: () => {
+          focusMainQueryPanel();
+          setQuery == null ? void 0 : setQuery(void 0);
+        },
         isDisabled: !rootQuery || (rootQuery == null ? void 0 : rootQuery.isEmpty()),
         label: "Clear",
         variant: "flat",
@@ -25895,13 +25786,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$t = {
+const styles$u = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$s = {
+const styles$t = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -30020,32 +29911,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$r.noBackground
+      customStyle: styles$s.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$r.noBackground
+      customStyle: styles$s.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$r.noBackground
+      customStyle: styles$s.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$r.noBackground
+      customStyle: styles$s.noBackground
     });
   }
 }
-const styles$r = {
+const styles$s = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -30074,7 +29965,7 @@ function Visualization$1({
     onClick: () => setRenderer(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$q.first,
+    customStyle: styles$r.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items: vizes,
@@ -30084,7 +29975,7 @@ function Visualization$1({
     children: tokens2
   });
 }
-const styles$q = {
+const styles$r = {
   first: {
     flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
@@ -30113,7 +30004,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$p.attributeTableContainer, style),
+    ..._stylex.props(styles$q.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsx("table", {
         ...{
@@ -30153,9 +30044,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$p.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$q.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$p.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$q.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -30166,7 +30057,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$p = {
+const styles$q = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -30314,7 +30205,7 @@ function HoverText({
           asChild: true,
           children: /* @__PURE__ */ jsx("div", {
             ref: textRef,
-            ..._stylex.props(styles$o.text, fontStyles.supporting),
+            ..._stylex.props(styles$p.text, fontStyles.supporting),
             children: text2
           })
         }), /* @__PURE__ */ jsx(Portal$4, {
@@ -30322,7 +30213,7 @@ function HoverText({
             side,
             align,
             children: /* @__PURE__ */ jsx("pre", {
-              ..._stylex.props(styles$o.hoverText, fontStyles.tooltipText),
+              ..._stylex.props(styles$p.hoverText, fontStyles.tooltipText),
               children: text2
             })
           })
@@ -30331,7 +30222,7 @@ function HoverText({
     })
   });
 }
-const styles$o = {
+const styles$p = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -30384,11 +30275,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$n.container, fontStyles.body, customStyle),
+    ..._stylex.props(styles$o.container, fontStyles.body, customStyle),
     children
   });
 }
-const styles$n = {
+const styles$o = {
   container: {
     boxShadow: "mly5n1uv4",
     backgroundColor: "mly12peec7",
@@ -30433,7 +30324,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$m.viewAttributeTable
+      style: styles$n.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -30442,7 +30333,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs(HoverCard, {
-    customStyle: styles$m.container,
+    customStyle: styles$n.container,
     children: [/* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         ...{
@@ -30452,10 +30343,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$m.path),
+        ..._stylex.props(fontStyles.supporting, styles$n.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$m.title),
+        ..._stylex.props(fontStyles.emphasized, styles$n.title),
         children: field.name
       }), description && /* @__PURE__ */ jsx(HoverText, {
         text: description
@@ -30465,7 +30356,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$m = {
+const styles$n = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -30757,10 +30648,10 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$l.main),
+    ..._stylex.props(fontStyles.body, styles$m.main),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$l.content, customStyle),
+        ..._stylex.props(styles$m.content, customStyle),
         onKeyUp,
         onClick: () => {
           var _a2;
@@ -30827,7 +30718,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$l.pill, colorVariants[color]),
+    ..._stylex.props(styles$m.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -30842,7 +30733,7 @@ const Pill = ({
     })]
   });
 };
-const styles$l = {
+const styles$m = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -31026,7 +30917,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$k.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$l.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -31050,10 +30941,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$k.token
+    customStyle: styles$l.token
   });
 }
-const styles$k = {
+const styles$l = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -31229,7 +31120,7 @@ const StringFilterCore = ({
               setSearchValue("");
             }
           },
-          customStyle: styles$j.valueList
+          customStyle: styles$k.valueList
         })
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsx(StringEditor, {
@@ -31297,7 +31188,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$j = {
+const styles$k = {
   valueList: {
     maxHeight: "mly3d5gib",
     width: "mly1hfn5x7",
@@ -31581,15 +31472,16 @@ const DateInput = ({
   onFocus,
   onBlur,
   isActive,
-  customStyle
+  customStyle,
+  forwardRef
 }) => {
   const format2 = formats[units];
-  const [tempValue, setTempValue] = useState(hooks(value).format(format2));
+  const [tempValue, setTempValue] = useState(hooks.utc(value).format(format2));
   useEffect(() => {
-    setTempValue(hooks(value).format(format2));
+    setTempValue(hooks.utc(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$i.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$j.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -31600,13 +31492,14 @@ const DateInput = ({
       setTempValue(raw2);
       const regex = regexps[units];
       if (raw2.match(regex)) {
-        const m = hooks(raw2, format2);
+        const m = hooks.utc(raw2, format2);
         if (m.isValid()) {
           setValue(m.toDate());
         }
       }
     },
-    autoFocus
+    autoFocus,
+    ref: forwardRef
   });
 };
 function guessUnits(moment2, isDateTime) {
@@ -31623,7 +31516,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$i = {
+const styles$j = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -31636,7 +31529,7 @@ function typeFromFilter(filter) {
   return filter.operator;
 }
 function unitsFromFilter(filter, isDateTime) {
-  if (filter.operator === "last" || filter.operator === "next") {
+  if (filter.operator === "last" || filter.operator === "next" || filter.operator === "in_last") {
     return filter.units;
   } else if (filter.operator === "to") {
     return guessUnits(filter.fromMoment, isDateTime);
@@ -31678,11 +31571,14 @@ const DateTimeFilterCore = ({
         value: type,
         onChange: changeType,
         options: [{
-          value: "last",
+          value: "in_last",
           label: "last"
+        }, {
+          value: "last",
+          label: "last complete"
         }, {
           value: "next",
-          label: "next"
+          label: "next complete"
         }, {
           value: "after",
           label: "after"
@@ -31709,6 +31605,7 @@ const DateTimeFilterCore = ({
 };
 function getTopEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel) {
   switch (currentFilter.operator) {
+    case "in_last":
     case "last":
     case "next":
       return /* @__PURE__ */ jsx(NUnitFilter, {
@@ -31954,12 +31851,12 @@ function DoubleDateFilter({
 function createTemporalLiteral(date, units) {
   return {
     moment: "literal",
-    literal: hooks(date).format(formats[units])
+    literal: hooks.utc(date).format(formats[units])
   };
 }
 function extractDateFromMoment(momentObj) {
   if (momentObj && momentObj.moment === "literal") {
-    return hooks(momentObj.literal).toDate();
+    return hooks.utc(momentObj.literal).toDate();
   }
   return /* @__PURE__ */ new Date();
 }
@@ -31968,6 +31865,7 @@ function dateTimeFilterChangeType(filter, type, units) {
   let fromMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
   let toMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
   switch (filter.operator) {
+    case "in_last":
     case "last":
     case "next":
       n = filter.n;
@@ -31987,6 +31885,7 @@ function dateTimeFilterChangeType(filter, type, units) {
       break;
   }
   switch (type) {
+    case "in_last":
     case "last":
     case "next":
       return {
@@ -32172,12 +32071,17 @@ function FilterPopover({
   setFilter,
   trigger,
   anchor,
-  layoutProps
+  layoutProps,
+  onOpenChange
 }) {
   const [open, setOpen] = useState(false);
+  const handleOpenChange = (open2) => {
+    setOpen(open2);
+    onOpenChange == null ? void 0 : onOpenChange(open2);
+  };
   return /* @__PURE__ */ jsxs(Root2$2, {
     open,
-    onOpenChange: setOpen,
+    onOpenChange: handleOpenChange,
     modal: true,
     children: [anchor ? /* @__PURE__ */ jsx(Anchor2$1, {
       asChild: true,
@@ -32196,7 +32100,7 @@ function FilterPopover({
           filter,
           path,
           onFilterApply: setFilter,
-          onOpenChange: setOpen
+          onOpenChange: handleOpenChange
         })
       })
     })]
@@ -32217,7 +32121,7 @@ function FieldList({
     const groups2 = [];
     const lcSearch = search.toLocaleLowerCase();
     const buildGroups = (types22, path, name, fields2) => {
-      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => !isArrayOrRecord(field)).filter((field) => field.name.toLocaleLowerCase().includes(lcSearch) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
+      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => field.name.toLocaleLowerCase().includes(lcSearch) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
       const joins = fields2.filter((field) => field.kind === "join");
       const arraysAndRecords = fields2.filter(isArrayOrRecord);
       if (filteredFields.length) {
@@ -32257,7 +32161,7 @@ function FieldList({
     ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
         "data-disabled": "true",
         children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsx(FilterPopover, {
@@ -32267,7 +32171,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
           children: /* @__PURE__ */ jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsx(FieldToken, {
@@ -32294,7 +32198,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -32317,7 +32221,7 @@ function FieldList({
     })
   });
 }
-const styles$h = {
+const styles$i = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -32335,7 +32239,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = useState("");
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(addMenuStyles.content, styles$g.content),
+    ..._stylex.props(addMenuStyles.content, styles$h.content),
     role: "menu",
     children: [/* @__PURE__ */ jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -32361,7 +32265,7 @@ function FieldMenu({
     })]
   });
 }
-const styles$g = {
+const styles$h = {
   content: {
     maxHeight: "mly3d5gib",
     $$css: true
@@ -32376,14 +32280,12 @@ function segmentHasOrderBy(segment, name) {
 function segmentNestNo(segment, name) {
   return segment.operations.items.reduce((acc, operation) => {
     if (operation instanceof ASTNestViewOperation) {
-      if (name) {
+      {
         if (operation.name === name) {
           do {
             acc += 1;
           } while (segment.hasFieldNamed(`${name} ${acc}`));
         }
-      } else {
-        return acc + 1;
       }
     }
     return acc;
@@ -32447,7 +32349,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$s.title, hoverStyles.main),
+    ..._stylex.props(styles$t.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -33017,7 +32919,7 @@ function SortableOperations({
       fields,
       ...props2
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$t.tokenContainer),
       children: /* @__PURE__ */ jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -33167,10 +33069,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$t.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$t.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -33377,7 +33279,7 @@ const parsedToLabels = (parsed, filterString) => {
             const {
               not
             } = temporalClause;
-            op = `is${not ? " not" : ""} last`;
+            op = `is${not ? " not" : ""} last complete`;
             value = temporalClause.n + " " + temporalClause.units;
           }
           break;
@@ -33386,7 +33288,7 @@ const parsedToLabels = (parsed, filterString) => {
             const {
               not
             } = temporalClause;
-            op = `is${not ? " not" : ""} nest`;
+            op = `is${not ? " not" : ""} next complete`;
             value = temporalClause.n + " " + temporalClause.units;
           }
           break;
@@ -33434,7 +33336,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$t.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -33484,10 +33386,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$t.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$t.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -33561,13 +33463,19 @@ function CollapsiblePanel({
   icon,
   defaultOpen = true,
   controls,
-  collapsedControls
+  collapsedControls,
+  isFocused = false
 }) {
   const [isExpanded, setIsExpanded] = useState(defaultOpen);
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mlyzkdzjc mly1sxf85j mly1717udv"
-    },
+      0: {
+        className: "mlygbc89k mly1sxf85j mly1717udv"
+      },
+      1: {
+        className: "mly1sxf85j mly1717udv mlybwr872"
+      }
+    }[!!isFocused << 0],
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
         className: "mlyrvj5dj mly1mt1orb mly52fmzj mlylqzeqv mlyfawy5m mly167g77z mly6s0dn4"
@@ -33578,7 +33486,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsx(Icon, {
           name: icon,
-          customStyle: styles$f.icon
+          customStyle: styles$g.icon
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp"
@@ -33615,7 +33523,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$f = {
+const styles$g = {
   icon: {
     $$css: true
   }
@@ -33638,7 +33546,7 @@ function AddItem({
       children: /* @__PURE__ */ jsxs("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$e.open : null),
+        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$f.open : null),
         onClick: doOnClick,
         "data-disabled": disabled ? "true" : void 0,
         children: [/* @__PURE__ */ jsxs("div", {
@@ -33662,7 +33570,7 @@ function AddItem({
     }) : null]
   });
 }
-const styles$e = {
+const styles$f = {
   open: {
     background: "mly16o7sp0",
     backgroundAttachment: null,
@@ -33737,10 +33645,10 @@ function AddFieldItem({
     onAddOperation,
     isFilterOperation,
     search,
-    customStyle: styles$d.list
+    customStyle: styles$e.list
   });
 }
-const styles$d = {
+const styles$e = {
   list: {
     width: "mlyqyf9gi",
     $$css: true
@@ -33944,7 +33852,7 @@ function AddMenu({
             value: search,
             onChange: setSearch,
             placeholder: "Search...",
-            customStyle: styles$c.search
+            customStyle: styles$d.search
           })
         }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs("div", {
           ...{
@@ -34065,7 +33973,7 @@ function AddMenu({
     })]
   });
 }
-const styles$c = {
+const styles$d = {
   search: {
     width: "mlyh8yej3",
     $$css: true
@@ -34080,7 +33988,7 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$s.tokenContainer),
+    ..._stylex.props(styles$t.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsx(NestOperation, {
       rootQuery,
       view,
@@ -34094,9 +34002,31 @@ function NestOperation({
   nest
 }) {
   const {
-    setQuery
+    setQuery,
+    currentNestQueryPanel,
+    onCurrentNestQueryPanelChange,
+    onCurrentNestViewChange
   } = useContext(QueryEditorContext);
   const [renameOpen, setRenameOpen] = useState(false);
+  const panelRef = React.useRef(null);
+  const isCurrentNestQueryPanelFocused = currentNestQueryPanel !== null && panelRef.current == currentNestQueryPanel;
+  React.useEffect(() => {
+    if (isCurrentNestQueryPanelFocused) {
+      onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(nest.view);
+    }
+  }, [nest, isCurrentNestQueryPanelFocused, onCurrentNestViewChange]);
+  const focusCurrentNestQueryPanel = () => {
+    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(panelRef.current);
+    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(nest.view);
+  };
+  const focusParentQueryPanel = () => {
+    const currentPanel = panelRef.current;
+    const parent = findParentNestQueryPanel(currentPanel);
+    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(parent);
+    if (parent === null) {
+      onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
+    }
+  };
   const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
   const getControls = (nest2) => /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(DropdownMenu, {
@@ -34110,6 +34040,7 @@ function NestOperation({
         icon: "clear",
         label: "Delete Query",
         onClick: () => {
+          focusParentQueryPanel();
           nest2.delete();
           setQuery == null ? void 0 : setQuery(rootQuery.build());
         }
@@ -34124,29 +34055,41 @@ function NestOperation({
       view: nest2.view
     })]
   });
-  return /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx("div", {
     ...{
       className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
     },
-    children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
-      title: nest.name,
-      icon: viewToVisualizationIcon(nest.view),
-      defaultOpen,
-      controls: getControls(nest),
-      collapsedControls: getControls(nest),
-      children: /* @__PURE__ */ jsx(View, {
+    children: /* @__PURE__ */ jsxs("div", {
+      ref: panelRef,
+      onPointerDownCapture: focusCurrentNestQueryPanel,
+      "data-nest-panel": true,
+      children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
+        title: nest.name,
+        icon: viewToVisualizationIcon(nest.view),
+        defaultOpen,
+        controls: getControls(nest),
+        collapsedControls: getControls(nest),
+        isFocused: isCurrentNestQueryPanelFocused,
+        children: /* @__PURE__ */ jsx(View, {
+          rootQuery,
+          view: nest.view
+        })
+      }), /* @__PURE__ */ jsx(RenameDialog, {
         rootQuery,
-        view: nest.view
-      })
-    }), /* @__PURE__ */ jsx(RenameDialog, {
-      rootQuery,
-      view,
-      target: nest,
-      open: renameOpen,
-      setOpen: setRenameOpen
-    })]
+        view,
+        target: nest,
+        open: renameOpen,
+        setOpen: setRenameOpen
+      })]
+    })
   }, nest.name);
 }
+function findParentNestQueryPanel(element2) {
+  if (!element2 || !element2.parentElement) return null;
+  const parentElement = element2.parentElement;
+  if (parentElement.dataset.nestPanel !== void 0) return parentElement;
+  return findParentNestQueryPanel(parentElement);
+}
 function Operations({
   rootQuery,
   view,
@@ -34277,11 +34220,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$b.preview
+      style: styles$c.preview
     })]
   });
 }
-const styles$b = {
+const styles$c = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -34313,75 +34256,89 @@ function Query({
   query,
   setQuery
 }) {
-  return /* @__PURE__ */ jsxs(CollapsiblePanel, {
-    title: "Main query",
-    controls: /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(DropdownMenu, {
-        trigger: /* @__PURE__ */ jsx(Button, {
-          variant: "flat",
-          icon: "meatballs",
-          size: "compact",
-          tooltip: "More Actions"
-        }),
-        children: setQuery ? /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
-            icon: "clear",
-            label: "Clear query",
-            onClick: () => {
-              setQuery == null ? void 0 : setQuery(void 0);
-            },
-            disabled: rootQuery.isEmpty()
-          }), /* @__PURE__ */ jsx(DropdownMenuItem, {
-            icon: "nest",
-            label: "Nest query",
-            onClick: () => {
-              if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
-                rootQuery.definition.view.convertToNest("Nest");
-              }
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            },
-            disabled: rootQuery.isEmpty() || !(rootQuery.definition instanceof ASTArrowQueryDefinition)
-          })]
-        }) : /* @__PURE__ */ jsx(Fragment, {})
-      }), query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
-        rootQuery,
-        view: query.definition
-      }) : null]
-    }),
-    collapsedControls: /* @__PURE__ */ jsx(Icon, {
-      name: viewToVisualizationIcon(query)
-    }),
-    children: [query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 8
-      },
-      children: [!query.isEmpty() && /* @__PURE__ */ jsx(Visualization$1, {
-        rootQuery,
-        view: query
-      }), /* @__PURE__ */ jsx(ViewDefinition, {
-        rootQuery,
-        view: query.definition,
-        viewDef: query.definition.view
-      })]
-    }) : null, query.isEmpty() ? /* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly78zum5 mlyl56j7k mly6s0dn4 mlyng8ra"
-      },
-      children: /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mly78zum5 mly6s0dn4"
+  const {
+    currentNestQueryPanel,
+    onCurrentNestQueryPanelChange,
+    onCurrentNestViewChange
+  } = React.useContext(QueryEditorContext);
+  const focusMainQueryPanel = () => {
+    onCurrentNestQueryPanelChange == null ? void 0 : onCurrentNestQueryPanelChange(null);
+    onCurrentNestViewChange == null ? void 0 : onCurrentNestViewChange(null);
+  };
+  return /* @__PURE__ */ jsx("div", {
+    onPointerDownCapture: focusMainQueryPanel,
+    children: /* @__PURE__ */ jsxs(CollapsiblePanel, {
+      title: "Main query",
+      isFocused: !currentNestQueryPanel,
+      controls: /* @__PURE__ */ jsxs(Fragment, {
+        children: [/* @__PURE__ */ jsx(DropdownMenu, {
+          trigger: /* @__PURE__ */ jsx(Button, {
+            variant: "flat",
+            icon: "meatballs",
+            size: "compact",
+            tooltip: "More Actions"
+          }),
+          children: setQuery ? /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+              icon: "clear",
+              label: "Clear query",
+              onClick: () => {
+                focusMainQueryPanel();
+                setQuery == null ? void 0 : setQuery(void 0);
+              },
+              disabled: rootQuery.isEmpty()
+            }), /* @__PURE__ */ jsx(DropdownMenuItem, {
+              icon: "nest",
+              label: "Nest query",
+              onClick: () => {
+                if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
+                  rootQuery.definition.view.convertToNest("Nest");
+                }
+                setQuery == null ? void 0 : setQuery(rootQuery.build());
+              },
+              disabled: rootQuery.isEmpty() || !(rootQuery.definition instanceof ASTArrowQueryDefinition)
+            })]
+          }) : /* @__PURE__ */ jsx(Fragment, {})
+        }), query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
+          rootQuery,
+          view: query.definition
+        }) : null]
+      }),
+      collapsedControls: /* @__PURE__ */ jsx(Icon, {
+        name: viewToVisualizationIcon(query)
+      }),
+      children: [query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsxs("div", {
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: 8
         },
-        children: [/* @__PURE__ */ jsx("div", {
-          children: "Click"
-        }), /* @__PURE__ */ jsx(Icon, {
-          name: "insert"
-        }), /* @__PURE__ */ jsx("div", {
-          children: "to get started"
+        children: [!query.isEmpty() && /* @__PURE__ */ jsx(Visualization$1, {
+          rootQuery,
+          view: query
+        }), /* @__PURE__ */ jsx(ViewDefinition, {
+          rootQuery,
+          view: query.definition,
+          viewDef: query.definition.view
         })]
-      })
-    }) : null]
+      }) : null, query.isEmpty() ? /* @__PURE__ */ jsx("div", {
+        ...{
+          className: "mly78zum5 mlyl56j7k mly6s0dn4 mlyng8ra"
+        },
+        children: /* @__PURE__ */ jsxs("div", {
+          ...{
+            className: "mly78zum5 mly6s0dn4"
+          },
+          children: [/* @__PURE__ */ jsx("div", {
+            children: "Click"
+          }), /* @__PURE__ */ jsx(Icon, {
+            name: "insert"
+          }), /* @__PURE__ */ jsx("div", {
+            children: "to get started"
+          })]
+        })
+      }) : null]
+    })
   });
 }
 function Source({
@@ -34389,9 +34346,9 @@ function Source({
 }) {
   if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.queryCard, styles$a.content),
+      ..._stylex.props(styles$t.queryCard, styles$b.content),
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$s.labelWithIcon),
+        ..._stylex.props(styles$t.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsx("div", {
@@ -34405,7 +34362,7 @@ function Source({
   }
   return null;
 }
-const styles$a = {
+const styles$b = {
   content: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -34416,12 +34373,145 @@ const styles$a = {
     $$css: true
   }
 };
+function DateLiteralEditor({
+  value,
+  setValue,
+  customStyle
+}) {
+  const [errorMessage, setErrorMessage] = useState("");
+  const [open, setOpen] = useState(false);
+  const input = useRef(null);
+  const picker = useRef(null);
+  const isDate2 = value.kind === "date_literal";
+  const date = isDate2 ? value.date_value : value.timestamp_value;
+  const units = isDate2 ? "day" : "second";
+  const onSetValue = (date2) => {
+    if (date2) {
+      setErrorMessage("");
+      if (isDate2) {
+        setValue({
+          kind: "date_literal",
+          date_value: hooks.utc(date2).format(formats["day"])
+        });
+      } else {
+        setValue({
+          kind: "timestamp_literal",
+          timestamp_value: hooks.utc(date2).format(formats["second"])
+        });
+      }
+    } else {
+      setErrorMessage("Invalid date");
+    }
+  };
+  useClickOutside([input, picker], () => {
+    setOpen(false);
+  });
+  return /* @__PURE__ */ jsxs(Root2$2, {
+    open,
+    onOpenChange: () => {
+    },
+    children: [/* @__PURE__ */ jsx(Trigger$2, {
+      asChild: true,
+      children: /* @__PURE__ */ jsx("div", {
+        ..._stylex.props(tokenStyles.main, styles$a.wrapper, customStyle),
+        children: /* @__PURE__ */ jsx(DateInput, {
+          value: hooks.utc(date).toDate(),
+          setValue: onSetValue,
+          units,
+          onFocus: () => setOpen(true),
+          customStyle: {
+            ...styles$a.input,
+            ...isDate2 ? styles$a.dateInput : styles$a.timestampInput
+          },
+          forwardRef: input
+        })
+      })
+    }), errorMessage && /* @__PURE__ */ jsx(ErrorIcon, {
+      errorMessage
+    }), /* @__PURE__ */ jsx(Portal$2, {
+      children: /* @__PURE__ */ jsx(Content2$2, {
+        align: "center",
+        asChild: true,
+        children: /* @__PURE__ */ jsx(DatePicker, {
+          value: hooks.utc(date).toDate(),
+          setValue: onSetValue,
+          units,
+          maxLevel: units,
+          customStyle: styles$a.datePicker,
+          forwardRef: picker
+        })
+      })
+    })]
+  });
+}
+const styles$a = {
+  input: {
+    border: "mly1gs6z28",
+    borderWidth: null,
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: null,
+    borderStyle: null,
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderColor: null,
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    height: "mlyd7y6wv",
+    backgroundColor: "mlyjbqb8w mlytw1abo",
+    $$css: true
+  },
+  dateInput: {
+    width: "mly869kya",
+    $$css: true
+  },
+  timestampInput: {
+    width: "mlynrytzq",
+    $$css: true
+  },
+  wrapper: {
+    $$css: true
+  },
+  datePicker: {
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    boxShadow: "mly5n1uv4",
+    backgroundColor: "mly12peec7",
+    borderRadius: "mlyur7f20",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    width: "mly1hfn5x7",
+    $$css: true
+  }
+};
 function LiteralValueEditor({
   value,
   setValue,
   customStyle
 }) {
-  const [errorMessage, setErrorMessage] = React.useState("");
   if (!value) {
     return null;
   }
@@ -34436,31 +34526,18 @@ function LiteralValueEditor({
           label: "false",
           value: "false"
         }],
-        onChange: (value2) => setValue(value2 === "true"),
+        onChange: (value2) => setValue({
+          kind: "boolean_literal",
+          boolean_value: value2 === "true"
+        }),
         customStyle
       });
     case "date_literal":
-      return /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mly78zum5"
-        },
-        children: [/* @__PURE__ */ jsx("input", {
-          value: value.date_value.split(" ")[0],
-          type: "date",
-          onChange: (event) => {
-            if (event.target.valueAsDate) {
-              setErrorMessage("");
-              setValue({
-                date: event.target.valueAsDate,
-                granularity: "day"
-              });
-            } else {
-              setErrorMessage("Invalid date");
-            }
-          }
-        }), errorMessage && /* @__PURE__ */ jsx(ErrorIcon, {
-          errorMessage
-        })]
+    case "timestamp_literal":
+      return /* @__PURE__ */ jsx(DateLiteralEditor, {
+        value,
+        setValue,
+        customStyle
       });
     case "null_literal":
       return /* @__PURE__ */ jsx(Token, {
@@ -34470,42 +34547,28 @@ function LiteralValueEditor({
       return /* @__PURE__ */ jsx(EditableToken, {
         value: value.number_value,
         type: "number",
-        onChange: (value2) => setValue(value2),
+        onChange: (value2) => setValue({
+          kind: "number_literal",
+          number_value: value2
+        }),
         customStyle
       });
     case "string_literal":
       return /* @__PURE__ */ jsx(EditableToken, {
         value: value.string_value,
-        onChange: (value2) => setValue(value2),
+        onChange: (value2) => setValue({
+          kind: "string_literal",
+          string_value: value2
+        }),
         customStyle
       });
-    case "timestamp_literal":
-      return /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mly78zum5"
-        },
-        children: [/* @__PURE__ */ jsx("input", {
-          value: value.timestamp_value,
-          type: "date",
-          onChange: (event) => {
-            if (event.target.valueAsDate) {
-              setErrorMessage("");
-              setValue({
-                date: event.target.valueAsDate,
-                granularity: "second"
-              });
-            } else {
-              setErrorMessage("Invalid date");
-            }
-          }
-        }), errorMessage && /* @__PURE__ */ jsx(ErrorIcon, {
-          errorMessage
-        })]
-      });
     case "filter_expression_literal":
       return /* @__PURE__ */ jsx(EditableToken, {
         value: value.filter_expression_value,
-        onChange: (value2) => setValue(value2),
+        onChange: (value2) => setValue({
+          kind: "filter_expression_literal",
+          filter_expression_value: value2
+        }),
         customStyle
       });
   }
@@ -34564,25 +34627,26 @@ function QueryEditor() {
     console.error("Missing <MalloyExplorerProvider>");
     return null;
   }
-  return /* @__PURE__ */ jsx(ScrollableArea, {
-    children: /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(fontStyles.body, styles$8.main),
-      children: [/* @__PURE__ */ jsx(Source, {
-        rootQuery
-      }), /* @__PURE__ */ jsx(Parameters, {
-        rootQuery
-      }), /* @__PURE__ */ jsx(Query, {
-        rootQuery,
-        query: rootQuery,
-        setQuery
-      })]
-    })
+  return /* @__PURE__ */ jsxs("div", {
+    ..._stylex.props(fontStyles.body, styles$8.main),
+    children: [/* @__PURE__ */ jsx(Source, {
+      rootQuery
+    }), /* @__PURE__ */ jsx(Parameters, {
+      rootQuery
+    }), /* @__PURE__ */ jsx(Query, {
+      rootQuery,
+      query: rootQuery,
+      setQuery
+    })]
   });
 }
 const styles$8 = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
+    overflow: "mlyysyzu8",
+    overflowX: null,
+    overflowY: null,
     gap: "mly167g77z",
     rowGap: null,
     columnGap: null,
@@ -34603,13 +34667,11 @@ function QueryPanel({
 }) {
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mly78zum5 mlydt5ytf mly2lah0s mlyh8yej3 mly5yr21d mlyotlr4g mly1roky18"
+      className: "mly78zum5 mlydt5ytf mly5yr21d mlyotlr4g mly1roky18"
     },
     children: [/* @__PURE__ */ jsx(QueryActionBar, {
       runQuery
-    }), /* @__PURE__ */ jsx(ScrollableArea, {
-      children: /* @__PURE__ */ jsx(QueryEditor, {})
-    })]
+    }), /* @__PURE__ */ jsx(QueryEditor, {})]
   });
 }
 function BookmarkedView({
@@ -35551,15 +35613,21 @@ function flattenFieldsTree(fields, path = []) {
       case "measure":
       case "dimension":
         if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
-          return flattenFieldsTree(field.type.element_type.fields.map((dimension) => ({
+          return [{
+            path,
+            field
+          }, ...flattenFieldsTree(field.type.element_type.fields.map((dimension) => ({
             kind: field.kind,
             ...dimension
-          })), [...path, field.name]);
+          })), [...path, field.name])];
         } else if (field.type.kind === "record_type") {
-          return flattenFieldsTree(field.type.fields.map((dimension) => ({
+          return [{
+            path,
+            field
+          }, ...flattenFieldsTree(field.type.fields.map((dimension) => ({
             kind: field.kind,
             ...dimension
-          })), [...path, field.name]);
+          })), [...path, field.name])];
         }
         return [{
           path,
@@ -35601,64 +35669,46 @@ function groupFieldItemsByKind(items) {
     return acc;
   }, {}));
 }
-const getNestName = (segment, rename = "Nest") => {
-  const nestNo = segmentNestNo(segment);
-  return nestNo > 1 ? `${rename} ${nestNo}` : rename;
-};
 const FIELD_KIND_TO_TITLE = {
   view: "Views",
   measure: "Measures",
   dimension: "Dimensions"
 };
-function useNestOperations(rootQuery) {
-  const nestOperations = useMemo(() => {
-    if (rootQuery) {
-      const queryDef = rootQuery.definition;
-      if (queryDef instanceof ASTArrowQueryDefinition) {
-        return extractNestOperations(queryDef.view);
-      }
-    }
-    return [];
-  }, [rootQuery]);
-  return nestOperations;
-}
-const extractNestOperations = (view, nestOperations = []) => {
-  if (view instanceof ASTArrowViewDefinition) {
-    return extractNestOperations(view.view, nestOperations);
-  } else if (view instanceof ASTSegmentViewDefinition) {
-    view.operations.items.filter((operation) => operation instanceof ASTNestViewOperation).forEach((operation) => {
-      const nestView = operation.view.definition;
-      nestOperations.push({
-        name: operation.name,
-        view: nestView
-      });
-      extractNestOperations(nestView, nestOperations);
-    });
-    return nestOperations;
-  } else if (view instanceof ASTRefinementViewDefinition) {
-    return extractNestOperations(view.refinement, nestOperations);
-  }
-  return nestOperations;
-};
 function useOperations(view, field, path) {
+  const dimensionFields = useMemo(() => {
+    const {
+      fields
+    } = getInputSchemaFromViewParent(view);
+    return new Set(flattenFieldsTree(fields).filter(({
+      field: field2
+    }) => field2.kind === "dimension").map(({
+      field: field2
+    }) => field2.name));
+  }, [view]);
+  const measureFields = useMemo(() => {
+    const {
+      fields
+    } = getInputSchemaFromViewParent(view);
+    return new Set(flattenFieldsTree(fields).filter(({
+      field: field2
+    }) => field2.kind === "measure").map(({
+      field: field2
+    }) => field2.name));
+  }, [view]);
   const isGroupByAllowed = useMemo(() => {
     if (!view) {
       return false;
     }
-    const fieldName = field.name;
-    const inputSchemaFields = getInputSchemaFromViewParent(view).fields;
-    const filteredFieldItems = flattenFieldsTree(inputSchemaFields).filter((item) => item.field.kind === "dimension");
-    return filteredFieldItems.some((item) => item.field.name === fieldName && item.path.join(".") === path.join("."));
-  }, [view, field, path]);
+    const segment = getSegmentIfPresent(view);
+    return dimensionFields.has(field.name) && !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
+  }, [view, field, path, dimensionFields]);
   const isAggregateAllowed = useMemo(() => {
     if (!view) {
       return false;
     }
-    const fieldName = field.name;
-    const inputSchemaFields = getInputSchemaFromViewParent(view).fields;
-    const filteredFieldItems = flattenFieldsTree(inputSchemaFields).filter((item) => item.field.kind === "measure");
-    return filteredFieldItems.some((item) => item.field.name === fieldName && item.path.join(".") === path.join("."));
-  }, [view, field, path]);
+    const segment = getSegmentIfPresent(view);
+    return measureFields.has(field.name) && !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
+  }, [view, field, path, measureFields]);
   const isFilterAllowed = useMemo(() => {
     if (!view) {
       return false;
@@ -35685,280 +35735,115 @@ function useOperations(view, field, path) {
 }
 const FILTERABLE_TYPES = ["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"];
 const ORDERABLE_TYPES = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
-function OperationDropdownMenuItems({
-  view,
+function FieldTokenWithActions({
   field,
   path,
-  withEmptyNest = false
+  viewDef
 }) {
   const {
     rootQuery,
-    setQuery
+    setQuery,
+    currentNestView
   } = React__default.useContext(QueryEditorContext);
+  const view = currentNestView ?? viewDef;
   const {
     isGroupByAllowed,
     isAggregateAllowed,
     isFilterAllowed,
     isOrderByAllowed
   } = useOperations(view, field, path);
-  const handleMenuItemClick = (event, operation) => {
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState();
+  const handleAddOperationAction = (operation, filter) => {
     if (field.kind === "dimension" || field.kind === "measure") {
-      const segment = view.getOrAddDefaultSegment();
-      const currentView = withEmptyNest ? segment.addEmptyNest(getNestName(segment)).view : view;
-      const currentSegment = currentView.getOrAddDefaultSegment();
       if (operation === "groupBy" && isGroupByAllowed) {
-        addGroupBy(currentView, field, path);
+        addGroupBy(view, field, path);
       } else if (operation === "aggregate" && isAggregateAllowed) {
-        addAggregate(currentView, field, path);
+        addAggregate(view, field, path);
       } else if (operation === "orderBy" && isOrderByAllowed) {
-        currentSegment.addOrderBy(field.name, "asc");
+        const segment = view.getOrAddDefaultSegment();
+        segment.addOrderBy(field.name, "asc");
+      } else if (operation === "filter" && isFilterAllowed && filter) {
+        const segment = view.getOrAddDefaultSegment();
+        if (field.kind === "dimension") {
+          segment.addWhere(field.name, path, filter);
+        } else {
+          segment.addHaving(field.name, path, filter);
+        }
       }
       setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
     }
   };
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
-        icon: "aggregate",
-        label: "Aggregate",
-        disabled: !isAggregateAllowed,
-        onClick: (event) => handleMenuItemClick(event, "aggregate")
-      }), /* @__PURE__ */ jsx(FilterDropdownSubmenuItem, {
-        view,
-        isFilterAllowed,
-        field,
-        path
-      }), /* @__PURE__ */ jsx(DropdownMenuItem, {
-        icon: "orderBy",
-        label: "Order by",
-        disabled: !isOrderByAllowed,
-        onClick: (event) => handleMenuItemClick(event, "orderBy")
-      })]
-    }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
-        icon: "groupBy",
-        label: "Group by",
-        disabled: !isGroupByAllowed,
-        onClick: (event) => handleMenuItemClick(event, "groupBy")
-      }), /* @__PURE__ */ jsx(FilterDropdownSubmenuItem, {
-        view,
-        isFilterAllowed,
-        field,
-        path
-      }), /* @__PURE__ */ jsx(DropdownMenuItem, {
-        icon: "orderBy",
-        label: "Order by",
-        disabled: !isOrderByAllowed,
-        onClick: (event) => handleMenuItemClick(event, "orderBy")
-      })]
-    }) : /* @__PURE__ */ jsx(Fragment, {})
-  });
-}
-function FilterDropdownSubmenuItem({
-  view,
-  isFilterAllowed,
-  field,
-  path
-}) {
-  const {
-    rootQuery,
-    setQuery
-  } = React__default.useContext(QueryEditorContext);
-  const [isOpen, setIsOpen] = useState(false);
-  const handleFilterSet = (filter) => {
-    const segment = view.getOrAddDefaultSegment();
-    if (field.kind === "dimension") {
-      segment.addWhere(field.name, path, filter);
-    } else {
-      segment.addHaving(field.name, path, filter);
-    }
-    setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-  };
-  return /* @__PURE__ */ jsx(DropdownSubMenuItem, {
-    icon: "filter",
-    label: "Filter",
-    disabled: !isFilterAllowed,
-    open: isOpen,
-    onOpenChange: setIsOpen,
-    children: /* @__PURE__ */ jsx(FilterDialog, {
-      fieldInfo: field,
-      path,
-      onFilterApply: handleFilterSet,
-      onOpenChange: setIsOpen
-    })
-  });
-}
-function NestFieldDropdownMenu({
-  view,
-  field,
-  path,
-  trigger,
-  onOpenChange
-}) {
-  const {
-    rootQuery,
-    setQuery
-  } = useContext(QueryEditorContext);
-  const nestOperations = useNestOperations(rootQuery);
-  const nestViewWithinNestQuery = (operation) => {
-    const segment = operation.view.getOrAddDefaultSegment();
-    const {
-      fields
-    } = operation.view.getOutputSchema();
-    let rename;
-    if (fields.find((f2) => f2.name === field.name)) {
-      rename = findUniqueFieldName(fields, field.name);
-    }
-    segment.addNest(field.name, rename);
-    setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-  };
-  return /* @__PURE__ */ jsx(DropdownMenu, {
-    trigger,
-    onOpenChange,
-    children: nestOperations.length === 0 ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-        label: "Add to new nested query as..."
-      }), /* @__PURE__ */ jsx(OperationDropdownMenuItems, {
-        view,
-        field,
-        path,
-        withEmptyNest: true
-      })]
-    }) : /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-        label: "Add to nested query..."
-      }), nestOperations.map((operation, index2) => {
-        return field.kind === "view" ? /* @__PURE__ */ jsx(DropdownMenuItem, {
-          label: operation.name,
-          onClick: () => nestViewWithinNestQuery(operation)
-        }, index2) : /* @__PURE__ */ jsxs(DropdownSubMenuItem, {
-          label: operation.name,
-          children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-            label: `Add to ${operation.name} query as...`
-          }), /* @__PURE__ */ jsx(OperationDropdownMenuItems, {
-            view: operation.view.parent.as.View(),
-            field,
-            path
-          })]
-        }, index2);
-      })]
-    })
-  });
-}
-function AddFieldDropdownMenu({
-  view,
-  field,
-  path,
-  ...props2
-}) {
-  return /* @__PURE__ */ jsxs(DropdownMenu, {
-    ...props2,
-    children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
-      label: "Add to main query as..."
-    }), /* @__PURE__ */ jsx(OperationDropdownMenuItems, {
-      view,
-      field,
-      path
-    })]
-  });
-}
-function FieldTokenWithActions({
-  field,
-  path
-}) {
-  const {
-    rootQuery,
-    setQuery
-  } = React__default.useContext(QueryEditorContext);
-  const [isAddFieldMenuOpen, setIsAddFieldMenuOpen] = useState();
-  const [isNestFieldMenuOpen, setIsNestFieldMenuOpen] = useState();
-  const nestViews = useNestOperations(rootQuery);
-  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
-  if (!(viewDef instanceof ASTArrowQueryDefinition)) {
-    return null;
-  }
-  const hasAddFieldMenu = field.kind === "measure" || field.kind === "dimension";
-  const hasNestFieldMenu = field.kind === "measure" || field.kind === "dimension" || field.kind === "view" && nestViews.length > 0;
-  const addViewToMainQuery = () => {
-    if (field.kind === "view") {
-      if (rootQuery == null ? void 0 : rootQuery.isEmpty()) {
-        rootQuery == null ? void 0 : rootQuery.setView(field.name);
-      } else {
-        addNest(viewDef, field);
-      }
+  const handleSetView = () => {
+    if (field.kind === "view" && (rootQuery == null ? void 0 : rootQuery.isEmpty())) {
+      rootQuery == null ? void 0 : rootQuery.setView(field.name);
       setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
     }
   };
-  const nestViewWithinMainQuery = () => {
+  const handleAddView = () => {
     if (field.kind === "view") {
-      addNest(viewDef, field);
+      addNest(view, field);
       setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
     }
   };
-  const hoverActions = () => {
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [hasAddFieldMenu ? /* @__PURE__ */ jsx(AddFieldDropdownMenu, {
-        view: viewDef,
-        field,
+  return /* @__PURE__ */ jsx(FieldToken, {
+    field,
+    hoverActions: field.kind === "view" ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(ActionButton, {
+        icon: "insert",
+        disabled: !(rootQuery == null ? void 0 : rootQuery.isEmpty()),
+        onClick: handleSetView,
+        tooltip: "Add view"
+      }), /* @__PURE__ */ jsx(ActionButton, {
+        icon: "nest",
+        onClick: handleAddView,
+        tooltip: "Add as new nested query"
+      })]
+    }) : field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(ActionButton, {
+        icon: "aggregate",
+        tooltip: "Add as aggregate",
+        disabled: !isAggregateAllowed,
+        onClick: () => handleAddOperationAction("aggregate")
+      }), /* @__PURE__ */ jsx(FilterPopover, {
+        fieldInfo: field,
         path,
-        trigger: /* @__PURE__ */ jsx(Button, {
-          variant: "flat",
-          size: "compact",
-          icon: "insert",
-          tooltip: "Add to main query"
+        setFilter: (filter) => handleAddOperationAction("filter", filter),
+        trigger: /* @__PURE__ */ jsx(ActionButton, {
+          icon: "filter",
+          tooltip: "Add as filter",
+          disabled: !isFilterAllowed
         }),
-        onOpenChange: (open) => setIsAddFieldMenuOpen(open)
-      }) : /* @__PURE__ */ jsx(Button, {
-        variant: "flat",
-        size: "compact",
-        icon: "insert",
-        onClick: addViewToMainQuery,
-        tooltip: "Add to main query"
-      }), hasNestFieldMenu ? /* @__PURE__ */ jsx(NestFieldDropdownMenu, {
-        view: viewDef,
-        field,
+        onOpenChange: setIsFilterPopoverOpen
+      }), /* @__PURE__ */ jsx(ActionButton, {
+        icon: "orderBy",
+        tooltip: "Add as order by",
+        disabled: !isOrderByAllowed,
+        onClick: () => handleAddOperationAction("orderBy")
+      })]
+    }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx(ActionButton, {
+        icon: "groupBy",
+        tooltip: "Add as group by",
+        disabled: !isGroupByAllowed,
+        onClick: () => handleAddOperationAction("groupBy")
+      }), /* @__PURE__ */ jsx(FilterPopover, {
+        fieldInfo: field,
         path,
-        trigger: /* @__PURE__ */ jsx(Button, {
-          variant: "flat",
-          size: "compact",
-          icon: "nest",
-          tooltip: "Add to nested query"
+        setFilter: (filter) => handleAddOperationAction("filter", filter),
+        trigger: /* @__PURE__ */ jsx(ActionButton, {
+          icon: "filter",
+          tooltip: "Add as filter",
+          disabled: !isFilterAllowed
         }),
-        onOpenChange: (open) => setIsNestFieldMenuOpen(open)
-      }) : /* @__PURE__ */ jsx(Button, {
-        variant: "flat",
-        size: "compact",
-        icon: "nest",
-        onClick: nestViewWithinMainQuery,
-        tooltip: "Add to nested query"
+        onOpenChange: setIsFilterPopoverOpen
+      }), /* @__PURE__ */ jsx(ActionButton, {
+        icon: "orderBy",
+        tooltip: "Add as order by",
+        disabled: !isOrderByAllowed,
+        onClick: () => handleAddOperationAction("orderBy")
       })]
-    });
-  };
-  return hasAddFieldMenu ? /* @__PURE__ */ jsx(AddFieldDropdownMenu, {
-    view: viewDef,
-    field,
-    path,
-    trigger: /* @__PURE__ */ jsx(FieldToken, {
-      field,
-      hoverActionsVisible: isAddFieldMenuOpen || isNestFieldMenuOpen,
-      hoverActions: hoverActions(),
-      asButtonTrigger: true
-    }),
-    onOpenChange: (open) => setIsAddFieldMenuOpen(open),
-    tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
-      field,
-      path
-    }),
-    tooltipProps: {
-      side: "right",
-      align: "start",
-      alignOffset: 28
-    }
-  }) : /* @__PURE__ */ jsx(FieldToken, {
-    field,
-    onClick: addViewToMainQuery,
-    hoverActions: hoverActions(),
-    hoverActionsVisible: isAddFieldMenuOpen || isNestFieldMenuOpen,
+    }) : null,
+    hoverActionsVisible: isFilterPopoverOpen,
     tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
       field,
       path
@@ -35970,6 +35855,13 @@ function FieldTokenWithActions({
     }
   });
 }
+function ActionButton(props2) {
+  return /* @__PURE__ */ jsx(Button, {
+    variant: "flat",
+    size: "compact",
+    ...props2
+  });
+}
 const FIELD_KIND_ORDER = ["dimension", "measure", "view"];
 function SearchResultList({
   source,
@@ -35981,6 +35873,13 @@ function SearchResultList({
       items: groupFieldItemsByPath(source, group.items)
     }));
   }, [source, items]);
+  const {
+    rootQuery
+  } = React.useContext(QueryEditorContext);
+  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
+  if (!(viewDef instanceof ASTArrowQueryDefinition)) {
+    return null;
+  }
   return /* @__PURE__ */ jsxs("div", {
     ...{
       className: "mly78zum5 mlydt5ytf mly1cy8zhl mlyou54vl mlye8ttls mly10cdfl8"
@@ -36015,7 +35914,8 @@ function SearchResultList({
           path
         }) => /* @__PURE__ */ jsx(FieldTokenWithActions, {
           field,
-          path
+          path,
+          viewDef
         }, [...path, field.name].join(".")))))
       })]
     }, group))]
@@ -36058,6 +35958,13 @@ function FieldGroupList({
       group
     }) => group === fieldGroupType)) == null ? void 0 : _a2.items) ?? [];
   }, [fieldGroupsByKindByPath, fieldGroupType]);
+  const {
+    rootQuery
+  } = React.useContext(QueryEditorContext);
+  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
+  if (!(viewDef instanceof ASTArrowQueryDefinition)) {
+    return null;
+  }
   return /* @__PURE__ */ jsx("div", {
     ...{
       className: "mly78zum5 mlydt5ytf mly167g77z"
@@ -36072,7 +35979,8 @@ function FieldGroupList({
           path
         }) => /* @__PURE__ */ jsx(FieldTokenWithActions, {
           field,
-          path
+          path,
+          viewDef
         }, [...path, field.name].join(".")))
       }, item.groupPath.join(".")))
     })
@@ -36311,7 +36219,7 @@ function ResizableCollapsiblePanel({
         width: `${width}px`
       },
       children: [children, /* @__PURE__ */ jsx(ResizeBar, {
-        width: initialWidth,
+        width,
         minWidth,
         onWidthChange: setWidth
       })]