@malloydata/malloy-explorer 0.0.264-dev250417011542 → 0.0.264-dev250418182827

package/dist/esm/index.js

@@ -17,7 +17,7 @@ import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo, useState, useRef, createElement, useCallback, useContext } from "react";
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as QB from "@malloydata/malloy-query-builder";
-import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTLimitViewOperation, ASTNestViewOperation, ASTRefinementViewDefinition, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTLimitViewOperation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import * as render from "@malloydata/render";
 import "@malloydata/render/webcomponent";
@@ -5094,10 +5094,10 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$A.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$A.scaleUp, customStyle)
+    ..._stylex.props(styles$F.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$F.scaleUp, customStyle)
   });
 }
-const styles$A = {
+const styles$F = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -5170,17 +5170,17 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$z.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$E.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.badge, styles$z.label),
+      ..._stylex.props(fontStyles.badge, styles$E.label),
       children: label
     })]
   });
 }
-const styles$z = {
+const styles$E = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -5262,10 +5262,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$y.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$D.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$y = {
+const styles$D = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -5318,7 +5318,7 @@ function ListItem({
     children: [startIcon && /* @__PURE__ */ jsx(Fragment, {
       children: startIcon
     }), /* @__PURE__ */ jsx("span", {
-      ..._stylex.props(fontStyles.body, styles$x.label),
+      ..._stylex.props(fontStyles.body, styles$C.label),
       children: label
     }), badge && /* @__PURE__ */ jsx(Fragment, {
       children: badge
@@ -5327,7 +5327,7 @@ function ListItem({
     })]
   });
 }
-const styles$x = {
+const styles$C = {
   label: {
     flexGrow: "mly1iyjqo2",
     $$css: true
@@ -6102,7 +6102,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$w.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$B.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     ...onClick && {
       onClick: (e) => {
         e.preventDefault();
@@ -6118,9 +6118,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$w.icon
+        customStyle: styles$B.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$w.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$B.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -6147,7 +6147,7 @@ function Button({
     return button;
   }
 }
-const styles$w = {
+const styles$B = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -6394,7 +6394,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$v.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$A.nonInteractive, customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       customStyle: tokenStyles.icon
@@ -6429,7 +6429,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$v = {
+const styles$A = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -6453,7 +6453,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$u.main, customStyle),
+    ..._stylex.props(styles$z.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -6464,16 +6464,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$u.onlyChild;
-  if (index2 === 0) return styles$u.firstChild;
-  if (index2 === count2 - 1) return styles$u.lastChild;
-  return styles$u.innerChild;
+  if (count2 === 1) return styles$z.onlyChild;
+  if (index2 === 0) return styles$z.firstChild;
+  if (index2 === count2 - 1) return styles$z.lastChild;
+  return styles$z.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$u = {
+const styles$z = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -6545,7 +6545,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$t.errorIcon
+          customStyle: styles$y.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -6558,7 +6558,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$t = {
+const styles$y = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -6603,28 +6603,29 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$s.focused, !!errorMessage && styles$s.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$x.focused, !!errorMessage && styles$x.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$s.icon
+        customStyle: styles$x.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
-          className: "mlywz0xwf mlynq0rdo"
+          className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$s.placeholder),
+          ..._stylex.props(fontStyles.body, styles$x.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$s.input, fontStyles.body),
+          ..._stylex.props(styles$x.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
           onChange: handleChange,
           onFocus: handleFocus,
-          onBlur: handleBlur
+          onBlur: handleBlur,
+          size: 1
         })]
       }), onRemove && isFocused && /* @__PURE__ */ jsx("button", {
         ...{
@@ -6642,7 +6643,7 @@ function EditableToken({
     })]
   });
 }
-const styles$s = {
+const styles$x = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -6714,6 +6715,7 @@ const styles$s = {
     gridColumnStart: null,
     gridColumnEnd: null,
     whiteSpace: "mlyuxw1ft",
+    minWidth: "mlygc0pbm",
     $$css: true
   },
   input: {
@@ -6725,7 +6727,6 @@ const styles$s = {
     gridColumn: null,
     gridColumnStart: null,
     gridColumnEnd: null,
-    minWidth: "mly1mnxie6",
     padding: "mly1717udv",
     paddingInline: null,
     paddingStart: null,
@@ -6761,6 +6762,7 @@ const styles$s = {
     outlineStyle: null,
     outlineWidth: null,
     whiteSpace: "mlyuxw1ft",
+    minWidth: "mlygc0pbm",
     $$css: true
   }
 };
@@ -7985,12 +7987,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$r.main, isFocused && styles$r.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$w.main, isFocused && styles$w.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$r.input),
+      ..._stylex.props(fontStyles.body, styles$w.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7998,7 +8000,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$r.actionButton, value === "" && styles$r.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$w.actionButton, value === "" && styles$w.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -8006,7 +8008,7 @@ function TextInput({
     })]
   });
 }
-const styles$r = {
+const styles$w = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -8081,6 +8083,7 @@ const styles$r = {
   input: {
     flexGrow: "mly1iyjqo2",
     height: "mly1qx5ct2",
+    minWidth: "mlygc0pbm",
     padding: "mly1717udv",
     paddingInline: null,
     paddingStart: null,
@@ -8214,7 +8217,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$q.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
+      ..._stylex.props(tokenStyles.main, styles$v.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8243,7 +8246,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$q.searchInput,
+            customStyle: styles$v.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8276,21 +8279,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$q.selectItem),
+    ..._stylex.props(fontStyles.body, styles$v.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$q.radioChecked
+      customStyle: styles$v.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$q.radioUnchecked
+      customStyle: styles$v.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$q = {
+const styles$v = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8380,7 +8383,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$p.container, customStyle),
+    ..._stylex.props(styles$u.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8394,7 +8397,7 @@ function Card({
     })]
   });
 }
-const styles$p = {
+const styles$u = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8485,10 +8488,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$o.label),
+          ..._stylex.props(fontStyles.body, styles$t.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$o.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$t.sublabel),
           children: sublabel
         })]
       })]
@@ -8500,7 +8503,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$o = {
+const styles$t = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19310,7 +19313,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$n.root, customStyle),
+    ..._stylex.props(styles$s.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19330,7 +19333,7 @@ function Spinner({
     })
   });
 }
-const styles$n = {
+const styles$s = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -22015,20 +22018,20 @@ function getCalendarFormat(myMoment, now2) {
   var diff2 = myMoment.diff(now2, "days", true);
   return diff2 < -6 ? "sameElse" : diff2 < -1 ? "lastWeek" : diff2 < 0 ? "lastDay" : diff2 < 1 ? "sameDay" : diff2 < 2 ? "nextDay" : diff2 < 7 ? "nextWeek" : "sameElse";
 }
-function calendar$1(time, formats) {
+function calendar$1(time, formats2) {
   if (arguments.length === 1) {
     if (!arguments[0]) {
       time = void 0;
-      formats = void 0;
+      formats2 = void 0;
     } else if (isMomentInput(arguments[0])) {
       time = arguments[0];
-      formats = void 0;
+      formats2 = void 0;
     } else if (isCalendarSpec(arguments[0])) {
-      formats = arguments[0];
+      formats2 = arguments[0];
       time = void 0;
     }
   }
-  var now2 = time || createLocal(), sod = cloneWithOffset(now2, this).startOf("day"), format2 = hooks.calendarFormat(this, sod) || "sameElse", output = formats && (isFunction(formats[format2]) ? formats[format2].call(this, now2) : formats[format2]);
+  var now2 = time || createLocal(), sod = cloneWithOffset(now2, this).startOf("day"), format2 = hooks.calendarFormat(this, sod) || "sameElse", output = formats2 && (isFunction(formats2[format2]) ? formats2[format2].call(this, now2) : formats2[format2]);
   return this.format(
     output || this.localeData().calendar(format2, this, createLocal(now2))
   );
@@ -22384,7 +22387,7 @@ function valueOf() {
 function unix() {
   return Math.floor(this.valueOf() / 1e3);
 }
-function toDate$1() {
+function toDate() {
   return new Date(this.valueOf());
 }
 function toArray() {
@@ -22838,7 +22841,7 @@ proto.startOf = startOf;
 proto.subtract = subtract;
 proto.toArray = toArray;
 proto.toObject = toObject;
-proto.toDate = toDate$1;
+proto.toDate = toDate;
 proto.toISOString = toISOString;
 proto.inspect = inspect;
 if (typeof Symbol !== "undefined" && Symbol.for != null) {
@@ -23729,7 +23732,7 @@ const Popover = ({
     })
   });
 };
-const styles$m = {
+const styles$r = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23780,7 +23783,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$m.wrapper, customStyle),
+    ..._stylex.props(styles$r.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23847,7 +23850,7 @@ function SelectList({
 }) {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$m.selectListDiv, customStyle),
+    ..._stylex.props(styles$r.selectListDiv, customStyle),
     children: options.reduce((result, option2, index2) => {
       const isSelected = value !== void 0 && valueEqual(value, option2.value);
       if (option2.divider) {
@@ -23879,8 +23882,8 @@ function SelectList({
         }), /* @__PURE__ */ jsx(Icon, {
           name: "checkmark",
           customStyle: {
-            ...styles$m.checkIcon,
-            ...isSelected ? styles$m.checkIconSelected : void 0
+            ...styles$r.checkIcon,
+            ...isSelected ? styles$r.checkIconSelected : void 0
           }
         }), /* @__PURE__ */ jsx("span", {
           ...{
@@ -23893,31 +23896,20 @@ function SelectList({
     }, [])
   });
 }
-function granularityIndex(granularity) {
-  return ["year", "quarter", "month", "week", "day", "hour", "minute", "second"].indexOf(granularity);
-}
 function monthName(month) {
   return ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"][month];
 }
 function DatePicker({
   value,
   setValue,
+  units,
   maxLevel,
-  style
+  customStyle
 }) {
   const [date, setDate] = useState(value);
   const calendar2 = getCalendar(date);
-  const [pickLevel, setPickLevel] = useState(maxLevel);
+  const [pickLevel, setPickLevel] = useState(units);
   const yearBucket = Math.floor(hooks(date).year() / 10) * 10;
-  useEffect(() => {
-    if (granularityIndex(maxLevel) < granularityIndex(pickLevel)) {
-      setPickLevel(maxLevel);
-    } else if (pickLevel === "quarter" && maxLevel !== "quarter") {
-      setPickLevel(maxLevel);
-    } else if (pickLevel === "week" && maxLevel !== "week") {
-      setPickLevel(maxLevel);
-    }
-  }, [maxLevel, pickLevel]);
   useEffect(() => {
     setDate(value);
   }, [value]);
@@ -23925,13 +23917,6 @@ function DatePicker({
     const newDate = hooks(date).year(year).toDate();
     setDate(newDate);
     setValue(newDate);
-    if (maxLevel !== "year") {
-      if (maxLevel === "quarter") {
-        setPickLevel("quarter");
-      } else {
-        setPickLevel("month");
-      }
-    }
   };
   const yearButton = (offset2) => {
     const click = () => setYear(yearBucket + offset2);
@@ -23961,27 +23946,14 @@ function DatePicker({
     const newDate = hooks(date).month(month).toDate();
     setDate(newDate);
     setValue(newDate);
-    if (maxLevel !== "month") {
-      if (maxLevel === "week") {
-        setPickLevel("week");
-      } else {
-        setPickLevel("day");
-      }
-    }
   };
   const setDay = (day) => {
     setDate(day);
     setValue(day);
-    if (maxLevel !== "day") {
-      setPickLevel(maxLevel);
-    }
   };
   const setWeekByDay = (dateOfFirstDayOfWeek) => {
     setDate(dateOfFirstDayOfWeek);
     setValue(dateOfFirstDayOfWeek);
-    if (maxLevel !== "week") {
-      setPickLevel("day");
-    }
   };
   const setQuarter = (quarter) => {
     const newDate = hooks(date).quarter(quarter + 1).toDate();
@@ -24021,7 +23993,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$l.outer, style),
+    ..._stylex.props(styles$q.outer, customStyle),
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mly1q0g3np mly1qughib mly1nejdyq mlyu06os2"
@@ -24057,6 +24029,8 @@ function DatePicker({
             setPickLevel("year");
           } else if (pickLevel === "hour" || pickLevel === "minute" || pickLevel === "second") {
             setPickLevel("day");
+          } else {
+            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, {
@@ -24294,14 +24268,14 @@ function DatePicker({
             setValue(hooks(date).hour(newHour24).toDate());
           },
           width: "40px"
-        }), (maxLevel === "minute" || maxLevel === "second") && /* @__PURE__ */ jsx(NumberInput, {
+        }), (units === "minute" || units === "second") && /* @__PURE__ */ jsx(NumberInput, {
           label: "Minutes",
           value: hooks(date).minutes(),
           setValue: (minute) => {
             setValue(hooks(date).minute(minute).toDate());
           },
           width: "40px"
-        }), maxLevel === "second" && /* @__PURE__ */ jsx(NumberInput, {
+        }), units === "second" && /* @__PURE__ */ jsx(NumberInput, {
           label: "Seconds",
           value: hooks(date).seconds(),
           setValue: (second) => {
@@ -24334,7 +24308,7 @@ function DatePicker({
     })]
   });
 }
-const styles$l = {
+const styles$q = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24420,7 +24394,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$k.header, variantColors[variant], children ? styles$k.headerWithContent : null),
+      ..._stylex.props(styles$p.header, variantColors[variant], children ? styles$p.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24433,22 +24407,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$k.title, fontStyles.emphasized),
+          ..._stylex.props(styles$p.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$k.description, fontStyles.supporting),
+          ..._stylex.props(styles$p.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$k.content, fontStyles.body),
+      ..._stylex.props(styles$p.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$k = {
+const styles$p = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -25883,7 +25857,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$j.content),
+        ..._stylex.props(fontStyles.body, styles$o.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25910,16 +25884,16 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$j.icon
+      customStyle: styles$o.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$j.label),
+        ..._stylex.props(fontStyles.body, styles$o.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$j.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$o.sublabel),
         children: sublabel
       })]
     })]
@@ -25940,21 +25914,21 @@ function DropdownSubMenuItem({
       disabled,
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$j.icon
+        customStyle: styles$o.icon
       }), /* @__PURE__ */ jsxs("div", {
         ...{
           className: "mly78zum5 mlydt5ytf mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$j.label),
+          ..._stylex.props(fontStyles.body, styles$o.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$j.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$o.sublabel),
           children: sublabel
         })]
       }), /* @__PURE__ */ jsx(Icon, {
         name: "chevronRight",
-        customStyle: styles$j.icon
+        customStyle: styles$o.icon
       })]
     }), /* @__PURE__ */ jsx(SubContent2, {
       ...{
@@ -25969,11 +25943,11 @@ function DropdownMenuLabel({
   label
 }) {
   return /* @__PURE__ */ jsx(Label2, {
-    ..._stylex.props(fontStyles.supporting, styles$j.menuLabel),
+    ..._stylex.props(fontStyles.supporting, styles$o.menuLabel),
     children: label
   });
 }
-const styles$j = {
+const styles$o = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -26062,6 +26036,7 @@ const filterStyles = {
     paddingTop: null,
     paddingBottom: null,
     minWidth: "mly1jzhcrs",
+    maxWidth: "mly1j9u4d2",
     gap: "mly167g77z",
     rowGap: null,
     columnGap: null,
@@ -26083,35 +26058,11 @@ const filterStyles = {
     $$css: true
   }
 };
-const BooleanFilterFragments = {
-  is_true: {
-    operator: "true"
-  },
-  is_false: {
-    operator: "false"
-  },
-  is_null: {
-    operator: "null"
-  },
-  is_not_null: {
-    operator: "null",
-    not: true
-  },
-  is_false_or_null: {
-    operator: "false_or_null"
-  }
-};
 function typeFromFilter$3(filter) {
-  for (const key2 in BooleanFilterFragments) {
-    const type = key2;
-    const value = BooleanFilterFragments[type];
-    const filterNot = filter.not ?? false;
-    const valueNot = value.not ?? false;
-    if (value.operator === filter.operator && valueNot === filterNot) {
-      return type;
-    }
+  if (filter.operator === "null" && filter.not) {
+    return "-null";
   }
-  throw new Error(`Unhandled boolean filter type ${filter.operator}`);
+  return filter.operator;
 }
 function BooleanFilterCore({
   filter,
@@ -26119,26 +26070,32 @@ function BooleanFilterCore({
 }) {
   const type = typeFromFilter$3(filter);
   const onChangeType = (type2) => {
-    setFilter(BooleanFilterFragments[type2]);
+    const filter2 = type2 === "-null" ? {
+      operator: "null",
+      not: true
+    } : {
+      operator: type2
+    };
+    setFilter(filter2);
   };
   return /* @__PURE__ */ jsx(Fragment, {
     children: /* @__PURE__ */ jsx(SelectDropdown, {
       value: type,
       onChange: onChangeType,
       options: [{
-        value: "is_true",
+        value: "true",
         label: "is true"
       }, {
-        value: "is_false",
+        value: "false",
         label: "is false"
       }, {
-        value: "is_null",
+        value: "null",
         label: "is null"
       }, {
-        value: "is_not_null",
+        value: "-null",
         label: "is not null"
       }, {
-        value: "is_false_or_null",
+        value: "false_or_null",
         label: "is false or null"
       }],
       customStyle: filterStyles.filterTypeDropdown
@@ -26260,7 +26217,7 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$i.outer, customStyle),
+    ..._stylex.props(styles$n.outer, customStyle),
     onKeyUp,
     onClick: () => {
       var _a2;
@@ -26325,7 +26282,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$i.pill, colorVariants[color]),
+    ..._stylex.props(styles$n.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -26340,7 +26297,7 @@ const Pill = ({
     })]
   });
 };
-const styles$i = {
+const styles$n = {
   outer: {
     fontFamily: "mly6icuqf",
     fontSize: "mlyif65rj",
@@ -26394,7 +26351,7 @@ const styles$i = {
     gap: "mly1ed6fcf",
     rowGap: null,
     columnGap: null,
-    flexWrap: "mlyozqiw3",
+    flexWrap: "mly1a02dak",
     borderColor: "mly1akygb0 mlyetl2wx",
     borderInlineColor: null,
     borderInlineStartColor: null,
@@ -26435,6 +26392,7 @@ const styles$i = {
     textTransform: "mly6mezaz",
     cursor: "mly1ypdohk",
     height: "mly1qx5ct2",
+    whiteSpace: "mlyuxw1ft",
     $$css: true
   }
 };
@@ -26592,7 +26550,8 @@ function ValueList({
   onClick,
   search,
   fieldPath,
-  ref
+  ref,
+  customStyle
 }) {
   const {
     searchResults
@@ -26600,10 +26559,11 @@ function ValueList({
   const stringSearchResults = useMemo(() => searchResults && searchResults.filter((r2) => r2.fieldType === "string" && r2.fieldValue !== null).sort((a, b2) => b2.weight - a.weight).slice(0, 100), [searchResults]);
   return /* @__PURE__ */ jsx("div", {
     ref,
+    ..._stylex.props(customStyle),
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$h.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$m.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -26626,16 +26586,22 @@ function Value({
   return /* @__PURE__ */ jsx(Token, {
     label: value.fieldValue ?? "∅",
     icon: "filter",
-    color: "purple"
+    color: "purple",
+    customStyle: styles$m.token
   });
 }
-const styles$h = {
+const styles$m = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
     paddingBottom: "mlywib8y2",
     display: "mly78zum5",
     justifyContent: "mly1qughib",
+    cursor: "mly1ypdohk",
+    $$css: true
+  },
+  token: {
+    cursor: "mly1ypdohk",
     $$css: true
   }
 };
@@ -26793,7 +26759,8 @@ const StringFilterCore = ({
             });
             setSearchValue("");
           }
-        }
+        },
+        customStyle: styles$l.valueList
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsx(StringEditor, {
       values: currentFilter.escaped_values,
@@ -26860,6 +26827,15 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
+const styles$l = {
+  valueList: {
+    maxHeight: "mly1hkcv85",
+    overflow: "mlyysyzu8",
+    overflowX: null,
+    overflowY: null,
+    $$css: true
+  }
+};
 const NumberFilterFragments = {
   is_equal_to: {
     operator: "="
@@ -26983,10 +26959,10 @@ const NumberFilterCore = ({
       }]
     }), errorMessage ? /* @__PURE__ */ jsx(ErrorIcon, {
       errorMessage
-    }) : null, getEditor$1(filter, innerValues, validateAndUpdateValues)]
+    }) : null, getEditor(filter, innerValues, validateAndUpdateValues)]
   });
 };
-function getEditor$1(filter, innerValues, validateAndUpdateValues) {
+function getEditor(filter, innerValues, validateAndUpdateValues) {
   switch (filter.operator) {
     case "!=":
     case "=":
@@ -27056,41 +27032,102 @@ function makeFilterWithNewType(filter, type) {
       };
   }
 }
-function typeFromFilter(filter) {
-  if (filter.operator === "null") {
-    return filter.not ? "is_not_null" : "is_null";
-  } else if (filter.operator === "in") {
-    return "is_equal_to";
-  } else if (filter.operator === "before") {
-    return "is_before";
-  } else if (filter.operator === "after") {
-    return "is_after";
-  } else if (filter.operator === "to") {
-    return "is_between";
+const formats = {
+  second: "YYYY-MM-DD HH:mm:ss",
+  minute: "YYYY-MM-DD HH:mm",
+  hour: "YYYY-MM-DD HH:00",
+  day: "YYYY-MM-DD",
+  week: "[WK]YYYY-WW",
+  month: "YYYY-MM",
+  quarter: "YYYY-[Q]Q",
+  year: "YYYY"
+};
+const regexps = {
+  second: /\d\d\d\d-\d\d-\d\d \d\d:\d\d:\d\d/,
+  minute: /\d\d\d\d-\d\d-\d\d \d\d:\d\d/,
+  hour: /\d\d\d\d-\d\d-\d\d \d\d:00/,
+  day: /\d\d\d\d-\d\d-\d\d/,
+  week: /WK\d\d\d\d-\d\d-\d\d/,
+  month: /\d\d\d\d-\d\d/,
+  quarter: /\d\d\d\d-Q\d/,
+  year: /\d\d\d\d/
+};
+const DateInput = ({
+  value,
+  setValue,
+  placeholder,
+  autoFocus,
+  units,
+  onFocus,
+  onBlur,
+  isActive,
+  customStyle
+}) => {
+  const format2 = formats[units];
+  const [tempValue, setTempValue] = useState(hooks(value).format(format2));
+  useEffect(() => {
+    setTempValue(hooks(value).format(format2));
+  }, [value, format2]);
+  return /* @__PURE__ */ jsx("input", {
+    ..._stylex.props(customStyle, isActive ? styles$k.active : null),
+    type: "text",
+    placeholder: placeholder || format2,
+    value: tempValue,
+    onFocus,
+    onBlur,
+    onChange: (event) => {
+      const raw2 = event.target.value;
+      setTempValue(raw2);
+      const regex = regexps[units];
+      if (raw2.match(regex)) {
+        const m = hooks(raw2, format2);
+        if (m.isValid()) {
+          setValue(m.toDate());
+        }
+      }
+    },
+    autoFocus
+  });
+};
+function guessUnits(moment2, isDateTime) {
+  if (moment2.moment === "literal") {
+    const {
+      literal
+    } = moment2;
+    for (const unit in regexps) {
+      const temporalUnit = unit;
+      if (literal.match(regexps[temporalUnit])) {
+        return temporalUnit;
+      }
+    }
   }
-  return "is_equal_to";
+  return isDateTime ? "second" : "day";
 }
-function createTemporalLiteral(date) {
-  return {
-    moment: "literal",
-    literal: hooks(date).format("YYYY-MM-DD HH:mm:ss.0")
-  };
-}
-function createNowMoment() {
-  return {
-    moment: "now"
-  };
-}
-function extractDateFromMoment(momentObj) {
-  if (!momentObj) {
-    return /* @__PURE__ */ new Date();
+const styles$k = {
+  active: {
+    backgroundColor: "mly1vzefiq",
+    $$css: true
   }
-  if (momentObj.moment === "literal") {
-    return new Date(momentObj.literal);
-  } else if (momentObj.moment === "now") {
-    return /* @__PURE__ */ new Date();
+};
+function typeFromFilter(filter) {
+  if (filter.operator === "null" && filter.not) {
+    return "-null";
   }
-  return /* @__PURE__ */ new Date();
+  return filter.operator;
+}
+function unitsFromFilter(filter, isDateTime) {
+  if (filter.operator === "last" || filter.operator === "next") {
+    return filter.units;
+  } else if (filter.operator === "to") {
+    return guessUnits(filter.fromMoment, isDateTime);
+  } else if (filter.operator === "before" && filter.before.moment === "literal") {
+    return guessUnits(filter.before, isDateTime);
+  } else if (filter.operator === "after") {
+    return guessUnits(filter.after, isDateTime);
+  } else if (filter.operator === "in") {
+    return guessUnits(filter.in, isDateTime);
+  }
+  return isDateTime ? "second" : "day";
 }
 const DateTimeFilterCore = ({
   filter,
@@ -27098,299 +27135,443 @@ const DateTimeFilterCore = ({
   isDateTime
 }) => {
   filter ?? (filter = {
-    operator: "in",
-    in: createNowMoment()
+    operator: "last",
+    n: "7",
+    units: "day"
   });
+  const [units, setUnits] = useState(unitsFromFilter(filter, isDateTime));
   const [currentFilter, setCurrentFilter] = useState(filter);
   const changeType = (type2) => {
-    updateFilter(dateTimeFilterChangeType(currentFilter, type2));
+    updateFilter(dateTimeFilterChangeType(currentFilter, type2, units));
   };
   const updateFilter = (newFilter) => {
     setCurrentFilter(newFilter);
     setFilter(newFilter);
   };
-  const type = typeFromFilter(currentFilter);
   const maxLevel = isDateTime ? "second" : "day";
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ jsx(SelectDropdown, {
-      value: type,
-      onChange: changeType,
-      options: [{
-        value: "is_equal_to",
-        label: "is"
-      }, {
-        value: "is_before",
-        label: "is before"
-      }, {
-        value: "is_after",
-        label: "is after"
-      }, {
-        value: "is_between",
-        label: "is between"
-      }, {
-        value: "is_null",
-        label: "is null"
-      }, {
-        value: "is_not_null",
-        label: "is not null"
-      }]
-    }), getEditor(currentFilter, updateFilter, maxLevel)]
+  const type = typeFromFilter(currentFilter);
+  return /* @__PURE__ */ jsxs("div", {
+    ...{
+      className: "mlyxsgkw5 mly78zum5 mlydt5ytf mly167g77z"
+    },
+    children: [/* @__PURE__ */ jsxs("div", {
+      ...{
+        className: "mly78zum5 mly167g77z"
+      },
+      children: [/* @__PURE__ */ jsx(SelectDropdown, {
+        value: type,
+        onChange: changeType,
+        options: [{
+          value: "last",
+          label: "last"
+        }, {
+          value: "next",
+          label: "next"
+        }, {
+          value: "after",
+          label: "after"
+        }, {
+          value: "before",
+          label: "before"
+        }, {
+          value: "in",
+          label: "is"
+        }, {
+          value: "to",
+          label: "between"
+        }, {
+          value: "null",
+          label: "null"
+        }, {
+          value: "-null",
+          label: "not null"
+        }],
+        customStyle: styles$j.editorCell
+      }), getTopEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel)]
+    }), getBottomEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel)]
   });
 };
-let inDate;
-let beforeDate;
-let afterDate;
-let fromDate;
-let toDate;
-function getEditor(currentFilter, updateFilter, maxLevel) {
+function getTopEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel) {
   switch (currentFilter.operator) {
-    case "in": {
-      const inMoment = currentFilter;
-      inDate = extractDateFromMoment(inMoment.in);
-      return /* @__PURE__ */ jsx(DateTimeEditor, {
-        value: inDate,
-        setValue: (newDate) => {
-          updateFilter({
-            ...currentFilter,
-            in: createTemporalLiteral(newDate)
-          });
-        },
-        maxLevel
+    case "last":
+    case "next":
+      return /* @__PURE__ */ jsx(NUnitFilter, {
+        currentFilter,
+        maxLevel,
+        updateFilter,
+        units,
+        setUnits
       });
-    }
-    case "before": {
-      const beforeMoment = currentFilter;
-      beforeDate = extractDateFromMoment(beforeMoment.before);
-      return /* @__PURE__ */ jsx(DateTimeEditor, {
-        value: beforeDate,
-        setValue: (newDate) => {
-          updateFilter({
-            ...currentFilter,
-            before: createTemporalLiteral(newDate)
-          });
-        },
-        maxLevel
+    case "after":
+    case "before":
+    case "to":
+    case "in":
+      return /* @__PURE__ */ jsx(UnitFilter, {
+        currentFilter,
+        maxLevel,
+        updateFilter,
+        units,
+        setUnits
       });
-    }
-    case "after": {
-      const afterMoment = currentFilter;
-      afterDate = extractDateFromMoment(afterMoment.after);
-      return /* @__PURE__ */ jsx(DateTimeEditor, {
-        value: afterDate,
-        setValue: (newDate) => {
-          updateFilter({
-            ...currentFilter,
-            after: createTemporalLiteral(newDate)
-          });
-        },
-        maxLevel
+  }
+  return null;
+}
+function getBottomEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel) {
+  switch (currentFilter.operator) {
+    case "after":
+    case "before":
+    case "in":
+      return /* @__PURE__ */ jsx(SingleDateFilter, {
+        currentFilter,
+        maxLevel,
+        updateFilter,
+        units,
+        setUnits
       });
-    }
-    case "to": {
-      const toMoment = currentFilter;
-      fromDate = extractDateFromMoment(toMoment.fromMoment);
-      toDate = extractDateFromMoment(toMoment.toMoment);
-      return /* @__PURE__ */ jsx(DateTimeRangeEditor, {
-        fromValue: fromDate,
-        toValue: toDate,
-        setFromValue: (newFromDate) => {
-          updateFilter({
-            ...currentFilter,
-            fromMoment: createTemporalLiteral(newFromDate)
-          });
-        },
-        setToValue: (newToDate) => {
-          updateFilter({
-            ...currentFilter,
-            toMoment: createTemporalLiteral(newToDate)
-          });
-        },
-        maxLevel
+    case "to":
+      return /* @__PURE__ */ jsx(DoubleDateFilter, {
+        currentFilter,
+        maxLevel,
+        updateFilter,
+        units,
+        setUnits
       });
-    }
   }
   return null;
 }
-const formatDate = (date, maxLevel) => {
-  if (maxLevel === "day") {
-    return hooks(date).format("YYYY-MM-DD");
-  } else {
-    return hooks(date).format("YYYY-MM-DD hh:mm:ss");
-  }
-};
-function ClickableDateToken({
-  value,
-  setValue,
-  maxLevel,
-  label
+const DateUnits = [{
+  value: "year",
+  label: "years"
+}, {
+  value: "quarter",
+  label: "quarters"
+}, {
+  value: "month",
+  label: "months"
+}, {
+  value: "week",
+  label: "weeks"
+}, {
+  value: "day",
+  label: "days"
+}];
+const TimeUnits = [{
+  value: "hour",
+  label: "hours"
+}, {
+  value: "minute",
+  label: "minutes"
+}, {
+  value: "second",
+  label: "seconds"
+}];
+function NUnitFilter({
+  currentFilter,
+  updateFilter,
+  setUnits,
+  maxLevel
 }) {
-  const [innerValue, setInnerValue] = useState(formatDate(value, maxLevel));
-  const [errorMessage, setErrorMessage] = useState("");
-  React.useEffect(() => {
-    setInnerValue(formatDate(value, maxLevel));
-  }, [maxLevel, value]);
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
-  const ref = React.useRef(null);
-  const checkForErrorsOrCommit = (date) => {
-    if (date && !isNaN(date.getTime()) && date.getFullYear() < 1e4) {
-      setErrorMessage("");
-      setValue(date);
+  const {
+    n,
+    units
+  } = currentFilter;
+  const options = maxLevel === "day" ? DateUnits : [...DateUnits, ...TimeUnits];
+  const updateN = (event) => {
+    const n2 = event.target.value;
+    updateFilter({
+      ...currentFilter,
+      n: n2
+    });
+  };
+  const updateUnits = (units2) => {
+    setUnits(units2);
+    updateFilter({
+      ...currentFilter,
+      units: units2
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("input", {
+      type: "number",
+      value: n,
+      ...{
+        className: "mly2yh2zd mlyizdh9v mly9cpjcd mly1sxf85j mly1iyjqo2"
+      },
+      onChange: updateN
+    }), /* @__PURE__ */ jsx(SelectDropdown, {
+      options,
+      value: units,
+      onChange: updateUnits,
+      customStyle: styles$j.editorCell
+    })]
+  });
+}
+function UnitFilter({
+  units,
+  setUnits,
+  maxLevel
+}) {
+  const options = maxLevel === "day" ? DateUnits : [...DateUnits, ...TimeUnits];
+  return /* @__PURE__ */ jsx(SelectDropdown, {
+    options,
+    value: units,
+    onChange: setUnits,
+    customStyle: styles$j.editorCell
+  });
+}
+function SingleDateFilter({
+  currentFilter,
+  updateFilter,
+  units,
+  maxLevel
+}) {
+  const moment2 = currentFilter.operator === "after" ? currentFilter.after : currentFilter.operator === "before" ? currentFilter.before : currentFilter.in;
+  const date = extractDateFromMoment(moment2);
+  const updateDate = (date2) => {
+    updateFilter({
+      ...currentFilter,
+      [currentFilter.operator]: createTemporalLiteral(date2, units)
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mly167g77z"
+      },
+      children: /* @__PURE__ */ jsx(DateInput, {
+        value: date,
+        setValue: updateDate,
+        units,
+        customStyle: {
+          ...styles$j.input,
+          ...styles$j.editorCell
+        }
+      })
+    }), /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mly167g77z"
+      },
+      children: /* @__PURE__ */ jsx(DatePicker, {
+        value: date,
+        setValue: updateDate,
+        units,
+        maxLevel,
+        customStyle: styles$j.editorCell
+      })
+    })]
+  });
+}
+function DoubleDateFilter({
+  currentFilter,
+  updateFilter,
+  units,
+  maxLevel
+}) {
+  const {
+    fromMoment,
+    toMoment
+  } = currentFilter;
+  const fromDate = extractDateFromMoment(fromMoment);
+  const toDate2 = extractDateFromMoment(toMoment);
+  const [date, setDate] = useState(fromDate);
+  const [focusedDate, setFocusedDate] = useState("from");
+  const updateFromDate = (date2) => {
+    updateFilter({
+      ...currentFilter,
+      fromMoment: createTemporalLiteral(date2, units)
+    });
+  };
+  const updateToDate = (date2) => {
+    updateFilter({
+      ...currentFilter,
+      toMoment: createTemporalLiteral(date2, units)
+    });
+  };
+  const updateDate = (date2) => {
+    if (focusedDate === "from") {
+      updateFromDate(date2);
     } else {
-      setErrorMessage(`Date must be in YYYY-MM-DD${maxLevel !== "day" && " hh:mm:ss"} format.`);
+      updateToDate(date2);
     }
+    setDate(date2);
   };
-  useClickOutside(ref, () => {
-    if (isPickerOpen) {
-      setIsPickerOpen(false);
-      checkForErrorsOrCommit(new Date(innerValue));
-    }
-  });
-  const getDateForDatePicker = () => {
-    try {
-      const parsedDate = new Date(innerValue);
-      if (!isNaN(parsedDate.getTime())) {
-        return parsedDate;
-      }
-    } catch (ex) {
+  const updateFocusedDate = (focusedDate2) => {
+    setFocusedDate(focusedDate2);
+    if (focusedDate2 === "from") {
+      const fromDate2 = extractDateFromMoment(fromMoment);
+      setDate(fromDate2);
+    } else {
+      const toDate22 = extractDateFromMoment(toMoment);
+      setDate(toDate22);
     }
-    return value;
   };
-  return /* @__PURE__ */ jsxs("div", {
-    ref,
-    style: {
-      position: "relative",
-      color: "rgb(95, 99, 104)"
-    },
-    onFocus: () => setIsPickerOpen(true),
-    onBlur: (e) => {
-      if (e.relatedTarget && ref.current && !ref.current.contains(e.relatedTarget)) {
-        setIsPickerOpen(false);
-        checkForErrorsOrCommit(new Date(innerValue));
-      }
-    },
+  return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs("div", {
-      style: {
-        display: "flex"
+      ...{
+        className: "mly78zum5 mly167g77z"
       },
-      children: [/* @__PURE__ */ jsx("input", {
-        value: label ? `${label}: ${innerValue}` : innerValue,
-        onChange: (event) => {
-          setInnerValue(event.target.value);
+      children: [/* @__PURE__ */ jsx(DateInput, {
+        value: fromDate,
+        setValue: updateFromDate,
+        units,
+        customStyle: {
+          ...styles$j.input,
+          ...styles$j.editorCell
         },
-        style: {
-          border: "1px solid #e0e0e0",
-          color: "rgb(95, 99, 104)",
-          padding: "4px 8px 4px 8px",
-          borderRadius: 5
-        }
-      }), errorMessage && /* @__PURE__ */ jsx(ErrorIcon, {
-        errorMessage
+        onFocus: () => updateFocusedDate("from"),
+        isActive: focusedDate === "from"
+      }), /* @__PURE__ */ jsx(DateInput, {
+        value: toDate2,
+        setValue: updateToDate,
+        units,
+        customStyle: {
+          ...styles$j.input,
+          ...styles$j.editorCell
+        },
+        onFocus: () => updateFocusedDate("to"),
+        isActive: focusedDate === "to"
       })]
-    }), isPickerOpen && /* @__PURE__ */ jsx("div", {
-      style: {
-        position: "absolute",
-        top: "100%",
-        left: 0,
-        zIndex: 1e3,
-        marginTop: "5px",
-        padding: "10px",
-        backgroundColor: "white",
-        borderRadius: "5px",
-        boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-        border: "1px solid #e0e0e0"
+    }), /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mly167g77z"
       },
       children: /* @__PURE__ */ jsx(DatePicker, {
-        value: getDateForDatePicker(),
-        setValue: (newValue) => {
-          checkForErrorsOrCommit(newValue);
-        },
-        maxLevel
+        value: date,
+        setValue: updateDate,
+        units,
+        maxLevel,
+        customStyle: styles$j.editorCell
       })
     })]
   });
 }
-function DateTimeEditor({
-  value,
-  setValue,
-  maxLevel
-}) {
-  return /* @__PURE__ */ jsx(ClickableDateToken, {
-    value,
-    setValue,
-    maxLevel
-  });
+function createTemporalLiteral(date, units) {
+  return {
+    moment: "literal",
+    literal: hooks(date).format(formats[units])
+  };
 }
-function DateTimeRangeEditor({
-  fromValue,
-  toValue,
-  setFromValue,
-  setToValue,
-  maxLevel
-}) {
-  return /* @__PURE__ */ jsxs("div", {
-    style: {
-      display: "flex",
-      gap: "10px"
-    },
-    children: [/* @__PURE__ */ jsx(ClickableDateToken, {
-      value: fromValue,
-      setValue: setFromValue,
-      maxLevel
-    }), /* @__PURE__ */ jsx(ClickableDateToken, {
-      value: toValue,
-      setValue: setToValue,
-      maxLevel
-    })]
-  });
+function extractDateFromMoment(momentObj) {
+  if (momentObj && momentObj.moment === "literal") {
+    return hooks(momentObj.literal).toDate();
+  }
+  return /* @__PURE__ */ new Date();
 }
-function dateTimeFilterChangeType(filter, type) {
-  let currentDate = /* @__PURE__ */ new Date();
-  let endDate = hooks(currentDate).add(1, "day").toDate();
-  if (filter.operator === "in") {
-    currentDate = extractDateFromMoment(filter.in);
-  } else if (filter.operator === "before") {
-    currentDate = extractDateFromMoment(filter.before);
-  } else if (filter.operator === "after") {
-    currentDate = extractDateFromMoment(filter.after);
-  } else if (filter.operator === "to") {
-    currentDate = extractDateFromMoment(filter.fromMoment);
-    endDate = extractDateFromMoment(filter.toMoment);
+function dateTimeFilterChangeType(filter, type, units) {
+  let n = "7";
+  let fromMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
+  let toMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
+  switch (filter.operator) {
+    case "last":
+    case "next":
+      n = filter.n;
+      units = filter.units;
+      break;
+    case "after":
+      fromMoment = filter.after;
+      toMoment = filter.after;
+      break;
+    case "before":
+      fromMoment = filter.before;
+      toMoment = filter.before;
+      break;
+    case "to":
+      fromMoment = filter.fromMoment;
+      toMoment = filter.toMoment;
+      break;
   }
   switch (type) {
-    case "is_equal_to":
+    case "last":
+    case "next":
       return {
-        operator: "in",
-        in: createTemporalLiteral(currentDate)
+        operator: type,
+        n,
+        units
       };
-    case "is_before":
+    case "after":
       return {
-        operator: "before",
-        before: createTemporalLiteral(currentDate)
+        operator: type,
+        after: fromMoment
       };
-    case "is_after":
+    case "before":
       return {
-        operator: "after",
-        after: createTemporalLiteral(currentDate)
+        operator: type,
+        before: fromMoment
       };
-    case "is_between":
+    case "to":
       return {
-        operator: "to",
-        fromMoment: createTemporalLiteral(currentDate),
-        toMoment: createTemporalLiteral(endDate)
+        operator: type,
+        fromMoment,
+        toMoment
       };
-    case "is_null":
+    case "null":
       return {
         operator: "null"
       };
-    case "is_not_null":
+    case "-null":
       return {
         operator: "null",
         not: true
       };
-    default:
-      return filter;
   }
+  return filter;
 }
+const styles$j = {
+  editorCell: {
+    flexGrow: "mly1iyjqo2",
+    $$css: true
+  },
+  input: {
+    border: "mly2yh2zd",
+    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,
+    color: "mlyizdh9v",
+    padding: "mly9cpjcd",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    borderRadius: "mly1sxf85j",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  }
+};
 function FilterDialog({
   fieldInfo,
   path,
@@ -27522,21 +27703,43 @@ function useFilterModal({
     }
     setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
   };
-  const FilterModal = () => /* @__PURE__ */ jsx(Root$2, {
-    open,
-    onOpenChange: setOpen,
-    children: /* @__PURE__ */ jsx(Portal$3, {
-      children: /* @__PURE__ */ jsx(Overlay, {
-        ...{
-          className: "mly5uxqc1 mlyixxii4 mly13vifvy mlyu96u03 mly3m8u43 mly1ey2m1c mlyrvj5dj mly1ku5rj1 mly11uqc5h"
-        },
-        children: /* @__PURE__ */ jsxs(Content$1, {
-          ...{},
-          style: x2 && y2 ? {
-            position: "fixed",
-            top: y2,
-            left: x2
-          } : {},
+  const FilterModal = () => {
+    const {
+      refs,
+      floatingStyles
+    } = useFloating({
+      placement: "right-start",
+      strategy: "fixed",
+      open,
+      middleware: [offset$1({
+        mainAxis: 3,
+        crossAxis: 3
+      }), flip({
+        boundary: document.body
+      })]
+    });
+    return /* @__PURE__ */ jsx(Root$2, {
+      open,
+      onOpenChange: setOpen,
+      children: /* @__PURE__ */ jsxs(Portal$3, {
+        children: [/* @__PURE__ */ jsx(Overlay, {
+          ...{
+            className: "mly5uxqc1 mlyixxii4 mly13vifvy mlyu96u03 mly3m8u43 mly1ey2m1c mlyrvj5dj mly1ku5rj1 mly11uqc5h"
+          },
+          children: /* @__PURE__ */ jsx("div", {
+            style: {
+              position: "fixed",
+              left: x2,
+              top: y2
+            },
+            ref: refs.setReference
+          })
+        }), /* @__PURE__ */ jsxs(Content$1, {
+          ...{
+            className: "mly11uqc5h"
+          },
+          style: floatingStyles,
+          ref: refs.setFloating,
           children: [/* @__PURE__ */ jsx(Title, {
             ...{
               className: "mly1s85apg"
@@ -27554,10 +27757,10 @@ function useFilterModal({
             setFilter: (filter2) => setFilter(filter2),
             setOpen
           })]
-        })
+        })]
       })
-    })
-  });
+    });
+  };
   return {
     openFilterModal,
     FilterModal
@@ -27591,26 +27794,22 @@ function getDefaultFilter(fieldInfo) {
     return {
       kind: "date",
       parsed: {
-        operator: "after",
-        after: createTemporalDefault()
+        operator: "last",
+        n: "7",
+        units: "day"
       }
     };
   } else {
     return {
       kind: "timestamp",
       parsed: {
-        operator: "after",
-        after: createTemporalDefault()
+        operator: "last",
+        n: "7",
+        units: "day"
       }
     };
   }
 }
-function createTemporalDefault() {
-  return {
-    moment: "literal",
-    literal: hooks(/* @__PURE__ */ new Date()).format("YYYY-MM-DD HH:mm:ss.0")
-  };
-}
 function MalloyExplorerProvider({
   source,
   query,
@@ -27696,7 +27895,7 @@ function QueryActionBar({
     })]
   });
 }
-const styles$g = {
+const styles$i = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -27794,6 +27993,10 @@ const hoverStyles = {
     display: "mly2b4tyj",
     flexShrink: "mly2lah0s",
     $$css: true
+  },
+  hoverOpen: {
+    display: "mly3nfvp2",
+    $$css: true
   }
 };
 function ClearButton({
@@ -27871,9 +28074,6 @@ function segmentNestNo(segment, name) {
 }
 function addGroupBy(rootQuery, segment, field, path, setQuery) {
   segment.addGroupBy(field.name, path);
-  if (!segmentHasLimit(segment)) {
-    segment.setLimit(1e3);
-  }
   setQuery == null ? void 0 : setQuery(rootQuery.build());
 }
 function getSegmentIfPresent(parent) {
@@ -27976,32 +28176,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$f.noBackground
+      customStyle: styles$h.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
       icon: "dimension",
       color: "cyan",
-      customStyle: styles$f.noBackground
+      customStyle: styles$h.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: "measure",
       color: "green",
-      customStyle: styles$f.noBackground
+      customStyle: styles$h.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
       icon: "many_to_one",
       color: "gray",
-      customStyle: styles$f.noBackground
+      customStyle: styles$h.noBackground
     });
   }
 }
-const styles$f = {
+const styles$h = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -28045,7 +28245,7 @@ function Visualization$1({
     onClick: () => setRenderer(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$e.first,
+    customStyle: styles$g.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items: vizes,
@@ -28055,7 +28255,7 @@ function Visualization$1({
     children: tokens2
   });
 }
-const styles$e = {
+const styles$g = {
   first: {
     flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
@@ -28084,7 +28284,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$d.attributeTableContainer, style),
+    ..._stylex.props(styles$f.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsx("table", {
         ...{
@@ -28124,9 +28324,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$d.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$f.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$d.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$f.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -28137,7 +28337,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$d = {
+const styles$f = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -28293,7 +28493,7 @@ function HoverText({
           asChild: true,
           children: /* @__PURE__ */ jsx("div", {
             ref: textRef,
-            ..._stylex.props(styles$c.text, fontStyles.supporting),
+            ..._stylex.props(styles$e.text, fontStyles.supporting),
             children: text2
           })
         }), /* @__PURE__ */ jsx(Portal$4, {
@@ -28301,7 +28501,7 @@ function HoverText({
             side,
             align,
             children: /* @__PURE__ */ jsx("pre", {
-              ..._stylex.props(styles$c.hoverText, fontStyles.tooltipText),
+              ..._stylex.props(styles$e.hoverText, fontStyles.tooltipText),
               children: text2
             })
           })
@@ -28310,7 +28510,7 @@ function HoverText({
     })
   });
 }
-const styles$c = {
+const styles$e = {
   text: {
     whiteSpace: "mlyuxw1ft",
     textOverflow: "mlylyipyv",
@@ -28372,7 +28572,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$b.viewAttributeTable
+      style: styles$d.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -28381,7 +28581,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$b.container, fontStyles.body),
+    ..._stylex.props(styles$d.container, fontStyles.body),
     children: [/* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         ...{
@@ -28391,7 +28591,7 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$b.path),
+        ..._stylex.props(fontStyles.supporting, styles$d.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
         ..._stylex.props(fontStyles.emphasized),
@@ -28405,7 +28605,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$b = {
+const styles$d = {
   container: {
     width: "mlybl57os",
     maxHeight: "mly1t2cwa7",
@@ -28482,14 +28682,14 @@ function FieldList({
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         children: /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(addMenuStyles.item, styles$a.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$c.fieldItem),
           "data-disabled": "true",
           children: group.name
         })
       }), group.fields.map((field) => /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$a.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$c.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: (event) => onClick(field, group.path, event),
@@ -28512,7 +28712,7 @@ function FieldList({
     })
   });
 }
-const styles$a = {
+const styles$c = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -28564,13 +28764,15 @@ function OperationActionTitle({
   types: types2,
   onClick
 }) {
+  const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$g.title, hoverStyles.main),
+    ..._stylex.props(styles$i.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(hoverStyles.hoverActions),
+      ..._stylex.props(hoverStyles.hoverActions, isMenuOpen ? hoverStyles.hoverOpen : void 0),
       children: /* @__PURE__ */ jsxs(Root2$2, {
+        onOpenChange: setIsMenuOpen,
         children: [/* @__PURE__ */ jsx(Trigger$2, {
           asChild: true,
           children: /* @__PURE__ */ jsx("div", {
@@ -28647,7 +28849,7 @@ function GroupByOperations({
         addGroupBy(rootQuery, segment, field, path, setQuery);
       }
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.tokenContainer),
+      ..._stylex.props(styles$i.tokenContainer),
       children: groupBys.map((groupBy) => {
         const fieldInfo = groupBy.getFieldInfo();
         const path = groupBy.field.getReference().path ?? [];
@@ -28737,10 +28939,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.title),
+      ..._stylex.props(styles$i.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.tokenContainer),
+      ..._stylex.props(styles$i.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -28998,7 +29200,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.title),
+      ..._stylex.props(styles$i.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -29050,7 +29252,7 @@ function AggregateOperations({
         setQuery == null ? void 0 : setQuery(rootQuery.build());
       }
     }), " ", /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.tokenContainer),
+      ..._stylex.props(styles$i.tokenContainer),
       children: aggregates.map((aggregate) => {
         const fieldInfo = aggregate.getFieldInfo();
         const path = aggregate.field.getReference().path ?? [];
@@ -29091,10 +29293,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.title),
+      ..._stylex.props(styles$i.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$g.tokenContainer),
+      ..._stylex.props(styles$i.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -29177,16 +29379,21 @@ function CollapsiblePanel({
     },
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
-        className: "mly78zum5 mly1qughib mlyfawy5m mly167g77z mly6s0dn4"
+        className: "mlyrvj5dj mly1mt1orb mly52fmzj mlylqzeqv mlyfawy5m mly167g77z mly6s0dn4"
       },
-      children: [icon && /* @__PURE__ */ jsx(Icon, {
-        name: icon,
-        customStyle: styles$9.icon
-      }), /* @__PURE__ */ jsx("div", {
+      children: [/* @__PURE__ */ jsxs("div", {
         ...{
-          className: "mlyuxw1ft mlyehqz9p mly1ghz6dp mly1iyjqo2"
+          className: "mlyrvj5dj mly1mt1orb mlylqzeqv mly6s0dn4 mly167g77z"
         },
-        children: title
+        children: [icon && /* @__PURE__ */ jsx(Icon, {
+          name: icon,
+          customStyle: styles$b.icon
+        }), /* @__PURE__ */ jsx("div", {
+          ...{
+            className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp"
+          },
+          children: title
+        })]
       }), /* @__PURE__ */ jsxs("div", {
         ...{
           className: "mly78zum5"
@@ -29217,7 +29424,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$9 = {
+const styles$b = {
   icon: {
     $$css: true
   }
@@ -29317,7 +29524,7 @@ function AddFieldItem({
   const trigger = /* @__PURE__ */ jsxs("div", {
     role: "menuitem",
     tabIndex: -1,
-    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable),
+    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$a.open : null),
     "data-disabled": disabled ? "true" : void 0,
     children: [/* @__PURE__ */ jsxs("div", {
       ..._stylex.props(addMenuStyles.label),
@@ -29352,7 +29559,6 @@ function AddFieldItem({
     children: [/* @__PURE__ */ jsx(Trigger$2, {
       asChild: true,
       disabled,
-      onMouseEnter: () => setOpen(true),
       children: trigger
     }), /* @__PURE__ */ jsx(Portal$1, {
       children: /* @__PURE__ */ jsxs(Content2$2, {
@@ -29373,6 +29579,22 @@ function AddFieldItem({
     })]
   });
 }
+const styles$a = {
+  open: {
+    background: "mly1p5yd3t",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    $$css: true
+  }
+};
 function AddOrderBy({
   rootQuery,
   view
@@ -29561,9 +29783,6 @@ function AddMenu({
               const segment = view.getOrAddDefaultSegment();
               if (field.kind === "dimension") {
                 segment.addGroupBy(field.name, path);
-                if (!segmentHasLimit(segment)) {
-                  segment.setLimit(1e3);
-                }
               } else if (field.kind === "measure") {
                 segment.addAggregate(field.name, path);
               } else {
@@ -29637,8 +29856,9 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$g.tokenContainer),
+    ..._stylex.props(styles$i.tokenContainer),
     children: nests.map((nest) => {
+      const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
       return /* @__PURE__ */ jsx("div", {
         ...{
           className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
@@ -29646,7 +29866,7 @@ function NestOperations({
         children: /* @__PURE__ */ jsx(CollapsiblePanel, {
           title: nest.name,
           icon: "nest",
-          defaultOpen: false,
+          defaultOpen,
           controls: /* @__PURE__ */ jsxs(Fragment, {
             children: [/* @__PURE__ */ jsx(DropdownMenu, {
               trigger: /* @__PURE__ */ jsx(Button, {
@@ -29807,11 +30027,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$8.preview
+      style: styles$9.preview
     })]
   });
 }
-const styles$8 = {
+const styles$9 = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -29915,9 +30135,9 @@ function Source({
   } = useContext(ExplorerPanelsContext);
   if (!(isSourcePanelOpen && setIsSourcePanelOpen) && rootQuery.definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$g.queryCard, styles$7.flex),
+      ..._stylex.props(styles$i.queryCard, styles$8.flex),
       children: [/* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$g.labelWithIcon),
+        ..._stylex.props(styles$i.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name]
@@ -29930,7 +30150,7 @@ function Source({
   }
   return null;
 }
-const styles$7 = {
+const styles$8 = {
   flex: {
     display: "mly78zum5",
     justifyContent: "mly1qughib",
@@ -29994,6 +30214,12 @@ function LiteralValueEditor({
           granularity: "second"
         })
       });
+    case "filter_expression_literal":
+      return /* @__PURE__ */ jsx(EditableToken, {
+        value: value.filter_expression_value,
+        onChange: (value2) => setValue(value2),
+        customStyle
+      });
   }
 }
 function Parameters({
@@ -30017,6 +30243,7 @@ function Parameters({
         children: sourceParameters.map((parameter) => {
           var _a2;
           return /* @__PURE__ */ jsxs(TokenGroup, {
+            customStyle: styles$7.tokenGroup,
             children: [/* @__PURE__ */ jsx(Token, {
               icon: atomicTypeToIcon(parameter.type.kind),
               label: parameter.name
@@ -30034,6 +30261,12 @@ function Parameters({
   }
   return null;
 }
+const styles$7 = {
+  tokenGroup: {
+    display: "mly78zum5",
+    $$css: true
+  }
+};
 function QueryEditor() {
   const {
     rootQuery,