@malloydata/malloy-explorer 0.0.285-dev250611150446 → 0.0.294-dev250630221944

package/dist/esm/index.js

@@ -17,10 +17,10 @@ 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, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTQuery } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTAnnotation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTQuery } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
+import { MalloyRenderer, isCoreVizPluginInstance } from "@malloydata/render";
 import { TemporalFilterExpression, BooleanFilterExpression, NumberFilterExpression, StringFilterExpression } from "@malloydata/malloy-filter";
-import { MalloyRenderer } from "@malloydata/render";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default, { unstable_batchedUpdates, createPortal } from "react-dom";
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
@@ -3745,6 +3745,15 @@ const fontStyles = {
     lineHeight: "mly1d3mw78",
     letterSpacing: "mly1gu5id8",
     $$css: true
+  },
+  tooltipText: {
+    fontFamily: "mly1rj5sg5",
+    color: "mly1rs82da",
+    fontSize: "mlyif65rj",
+    fontStyle: "mly1j61x8r",
+    fontWeight: "mlyo1l8bm",
+    lineHeight: "mly1fc57z9",
+    $$css: true
   }
 };
 const SvgChevronDown = (props2) => /* @__PURE__ */ React.createElement("svg", { width: 110, height: 110, viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "cahevron_down", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("path", { d: "M52.9466923,41.3127809 C54.0529774,40.2742275 55.7502198,40.2309545 56.9057514,41.1829617 L57.0533077,41.3127809 L81.5533077,64.3127809 C82.7612755,65.4467914 82.8212296,67.34534 81.6872191,68.5533077 C80.5968243,69.7148152 78.7995712,69.8149195 77.5890551,68.8127704 L77.4466923,68.6872191 L54.9999906,47.615 L32.5533077,68.6872191 C31.3918003,69.7776139 29.5918121,69.7641211 28.4469384,68.6875913 L28.3127809,68.5533077 C27.2223861,67.3918003 27.2358789,65.5918121 28.3124087,64.4469384 L28.4466923,64.3127809 L52.9466923,41.3127809 Z", id: "Path", fill: "currentColor", fillRule: "nonzero", transform: "translate(55.000000, 55.000005) rotate(-180.000000) translate(-55.000000, -55.000005) " })));
@@ -3895,11 +3904,11 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$O.main, colorVariants$3[color], customStyle),
+    ..._stylex.props(styles$Q.main, colorVariants$3[color], customStyle),
     "data-testid": `icon-${color}-${name}`
   });
 }
-const styles$O = {
+const styles$Q = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -3968,18 +3977,18 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$N.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$P.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
       "data-testid": "badge-label",
-      ..._stylex.props(fontStyles.badge, styles$N.label),
+      ..._stylex.props(fontStyles.badge, styles$P.label),
       children: label
     })]
   });
 }
-const styles$N = {
+const styles$P = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -4061,10 +4070,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$M.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$O.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$M = {
+const styles$O = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -4870,7 +4879,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$L.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$N.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     type: "button",
     disabled: isDisabled,
     ...props2,
@@ -4880,9 +4889,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$L.icon
+        customStyle: styles$N.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$L.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$N.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -4909,7 +4918,7 @@ function Button({
     return button;
   }
 }
-const styles$L = {
+const styles$N = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5160,7 +5169,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$K.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$M.nonInteractive, customStyle),
     ...dragProps == null ? void 0 : dragProps.attributes,
     ...dragProps == null ? void 0 : dragProps.listeners,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
@@ -5191,13 +5200,13 @@ function Token({
     }), /* @__PURE__ */ jsx(Portal$4, {
       children: /* @__PURE__ */ jsx(Content2$4, {
         ...tooltipProps,
-        ..._stylex.props(typeof tooltip === "string" ? tooltipStyles.default : tooltipStyles.card),
+        ..._stylex.props(fontStyles.tooltipText, typeof tooltip === "string" ? tooltipStyles.default : tooltipStyles.card),
         children: tooltip
       })
     })]
   }) : token2;
 }
-const styles$K = {
+const styles$M = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5221,7 +5230,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$J.main, customStyle),
+    ..._stylex.props(styles$L.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5232,16 +5241,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$J.onlyChild;
-  if (index2 === 0) return styles$J.firstChild;
-  if (index2 === count2 - 1) return styles$J.lastChild;
-  return styles$J.innerChild;
+  if (count2 === 1) return styles$L.onlyChild;
+  if (index2 === 0) return styles$L.firstChild;
+  if (index2 === count2 - 1) return styles$L.lastChild;
+  return styles$L.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$J = {
+const styles$L = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -5313,7 +5322,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$I.errorIcon
+          customStyle: styles$K.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -5326,7 +5335,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$I = {
+const styles$K = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5371,22 +5380,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$H.focused, !!errorMessage && styles$H.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$J.focused, !!errorMessage && styles$J.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$H.icon
+        customStyle: styles$J.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$H.placeholder),
+          ..._stylex.props(fontStyles.body, styles$J.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$H.input, fontStyles.body),
+          ..._stylex.props(styles$J.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -5411,7 +5420,7 @@ function EditableToken({
     })]
   });
 }
-const styles$H = {
+const styles$J = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7753,12 +7762,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$G.main, isFocused && styles$G.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$I.main, isFocused && styles$I.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$G.input),
+      ..._stylex.props(fontStyles.body, styles$I.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7766,7 +7775,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$G.actionButton, value === "" && styles$G.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$I.actionButton, value === "" && styles$I.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -7774,7 +7783,7 @@ function TextInput({
     })]
   });
 }
-const styles$G = {
+const styles$I = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -7983,7 +7992,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$F.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
+      ..._stylex.props(tokenStyles.main, styles$H.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8012,7 +8021,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$F.searchInput,
+            customStyle: styles$H.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8045,21 +8054,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$F.selectItem),
+    ..._stylex.props(fontStyles.body, styles$H.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$F.radioChecked
+      customStyle: styles$H.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$F.radioUnchecked
+      customStyle: styles$H.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$F = {
+const styles$H = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8149,7 +8158,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$E.container, customStyle),
+    ..._stylex.props(styles$G.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8163,7 +8172,7 @@ function Card({
     })]
   });
 }
-const styles$E = {
+const styles$G = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8256,7 +8265,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsx(Icon, {
           name: icon,
-          customStyle: styles$D.icon
+          customStyle: styles$F.icon
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp mly117nqv4"
@@ -8298,7 +8307,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$D = {
+const styles$F = {
   icon: {
     $$css: true
   }
@@ -8330,10 +8339,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$C.label),
+          ..._stylex.props(fontStyles.body, styles$E.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$C.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$E.sublabel),
           children: sublabel
         })]
       })]
@@ -8345,7 +8354,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$C = {
+const styles$E = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19159,7 +19168,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$B.root, customStyle),
+    ..._stylex.props(styles$D.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19179,7 +19188,7 @@ function Spinner({
     })
   });
 }
-const styles$B = {
+const styles$D = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -23577,7 +23586,7 @@ const Popover = ({
     })
   });
 };
-const styles$A = {
+const styles$C = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23629,7 +23638,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$A.wrapper, customStyle),
+    ..._stylex.props(styles$C.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23697,7 +23706,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$A.selectListDiv, customStyle),
+      ..._stylex.props(styles$C.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23729,8 +23738,8 @@ function SelectList({
           }), /* @__PURE__ */ jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$A.checkIcon,
-              ...isSelected ? styles$A.checkIconSelected : void 0
+              ...styles$C.checkIcon,
+              ...isSelected ? styles$C.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsx("span", {
             ...{
@@ -23782,7 +23791,7 @@ const DateInput = ({
     setTempValue(hooks.utc(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$z.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$B.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -23817,7 +23826,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$z = {
+const styles$B = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -23929,7 +23938,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$y.outer, customStyle),
+    ..._stylex.props(styles$A.outer, customStyle),
     ref: forwardRef,
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
@@ -24245,7 +24254,7 @@ function DatePicker({
     })]
   });
 }
-const styles$y = {
+const styles$A = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24331,7 +24340,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$z.header, variantColors[variant], children ? styles$z.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24344,22 +24353,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$x.title, fontStyles.emphasized),
+          ..._stylex.props(styles$z.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$x.description, fontStyles.supporting),
+          ..._stylex.props(styles$z.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$x.content, fontStyles.body),
+      ..._stylex.props(styles$z.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$x = {
+const styles$z = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24501,14 +24510,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$w.main, customStyle),
+      ..._stylex.props(styles$y.main, customStyle),
       children: React.Children.map(children, (child) => /* @__PURE__ */ jsxs(Fragment, {
         children: [child, /* @__PURE__ */ jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$w = {
+const styles$y = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24545,10 +24554,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$v.label),
+          ..._stylex.props(fontStyles.body, styles$x.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$v.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24560,7 +24569,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$v = {
+const styles$x = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25845,7 +25854,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$u.content),
+        ..._stylex.props(fontStyles.body, styles$w.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25872,22 +25881,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$u.icon
+      customStyle: styles$w.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$u.label),
+        ..._stylex.props(fontStyles.body, styles$w.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
         children: sublabel
       })]
     })]
   });
 }
-const styles$u = {
+const styles$w = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25971,7 +25980,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$t.title),
+        ..._stylex.props(fontStyles.largeBody, styles$v.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxs("div", {
@@ -26016,13 +26025,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$t = {
+const styles$v = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$s = {
+const styles$u = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -26179,109 +26188,6 @@ function legacyToViz(name) {
       return name;
   }
 }
-const VISUALIZATION_OPTIONS = {
-  table: null,
-  bar: [{
-    name: "title",
-    label: "Title",
-    type: "string",
-    default: ""
-  }, {
-    name: "sub_title",
-    label: "Subtitle",
-    type: "string",
-    default: ""
-  }, {
-    name: "stack",
-    label: "Stack",
-    type: "boolean",
-    default: false
-  }, {
-    name: "size",
-    label: "Size",
-    type: "select",
-    default: "fill",
-    options: [{
-      label: "Fill",
-      value: "fill"
-    }, {
-      label: "Sparkline",
-      value: "spark"
-    }, {
-      label: "X-Small",
-      value: "xs"
-    }, {
-      label: "Small",
-      value: "sm"
-    }, {
-      label: "Medium",
-      value: "md"
-    }, {
-      label: "Large",
-      value: "lg"
-    }, {
-      label: "X-Large",
-      value: "xl"
-    }, {
-      label: "XX-Large",
-      value: "2xl"
-    }]
-  }],
-  dashboard: null,
-  json: null,
-  line: [{
-    name: "title",
-    label: "Title",
-    type: "string",
-    default: ""
-  }, {
-    name: "sub_title",
-    label: "Subtitle",
-    type: "string",
-    default: ""
-  }, {
-    name: "zero_baseline",
-    label: "Zero Baseline",
-    type: "boolean",
-    default: false
-  }, {
-    name: "size",
-    label: "Size",
-    type: "select",
-    default: "md",
-    options: [{
-      label: "Fill",
-      value: "fill"
-    }, {
-      label: "Sparkline",
-      value: "spark"
-    }, {
-      label: "X-Small",
-      value: "xs"
-    }, {
-      label: "Small",
-      value: "sm"
-    }, {
-      label: "Medium",
-      value: "md"
-    }, {
-      label: "Large",
-      value: "lg"
-    }, {
-      label: "X-Large",
-      value: "xl"
-    }, {
-      label: "XX-Large",
-      value: "2xl"
-    }]
-  }],
-  list: null,
-  list_detail: null,
-  point_map: null,
-  scatter_chart: null,
-  segment_map: null,
-  shape_map: null
-};
 function atomicTypeToIcon(type) {
   return atomicTypeMap[type];
 }
@@ -26377,7 +26283,7 @@ function DrillOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$u.title),
       children: "drills"
     }), /* @__PURE__ */ jsx("div", {
       ...{
@@ -30349,288 +30255,1757 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$r.noBackground
+      customStyle: styles$t.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$r.noBackground
+      customStyle: styles$t.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$r.noBackground
+      customStyle: styles$t.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$r.noBackground
+      customStyle: styles$t.noBackground
     });
   }
 }
-const styles$r = {
+const styles$t = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
   }
 };
-function RendererPopover({
-  rootQuery,
-  viz,
-  options,
-  view,
-  customStyle
-}) {
-  const [open, setOpen] = useState(false);
-  return /* @__PURE__ */ jsxs(Root2$2, {
-    onOpenChange: (open2) => setOpen(open2),
-    open,
-    children: [/* @__PURE__ */ jsx(Trigger$2, {
-      asChild: true,
-      children: /* @__PURE__ */ jsx(Token, {
-        icon: "gear",
-        customStyle: {
-          ...customStyle,
-          ...dialogStyles$1.trigger
-        }
-      })
-    }), /* @__PURE__ */ jsx(Portal$2, {
-      children: /* @__PURE__ */ jsx(Content2$2, {
-        align: "end",
-        children: /* @__PURE__ */ jsx(RendererEditor, {
-          rootQuery,
-          view,
-          viz,
-          options,
-          setOpen
-        })
-      })
-    })]
-  });
-}
-function RendererEditor({
-  rootQuery,
-  view,
-  viz,
-  options,
-  setOpen
-}) {
+var DIALOG_NAME = "Dialog";
+var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
+var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
+var Dialog = (props2) => {
   const {
-    setQuery
-  } = useContext(QueryEditorContext);
-  const [current, setCurrent] = useState();
-  useEffect(() => {
-    const current2 = {};
-    const currentTag = view.getTag(RENDERER_PREFIX);
-    for (const option2 of options) {
-      current2[option2.name] = currentTag.text("viz", option2.name) ?? option2.default.toString();
-    }
-    setCurrent(current2);
-  }, [options, view, viz]);
-  if (!current) {
-    return null;
+    __scopeDialog,
+    children,
+    open: openProp,
+    defaultOpen,
+    onOpenChange,
+    modal = true
+  } = props2;
+  const triggerRef = React.useRef(null);
+  const contentRef = React.useRef(null);
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange
+  });
+  return /* @__PURE__ */ jsx(
+    DialogProvider,
+    {
+      scope: __scopeDialog,
+      triggerRef,
+      contentRef,
+      contentId: useId(),
+      titleId: useId(),
+      descriptionId: useId(),
+      open,
+      onOpenChange: setOpen,
+      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+      modal,
+      children
+    }
+  );
+};
+Dialog.displayName = DIALOG_NAME;
+var TRIGGER_NAME$1 = "DialogTrigger";
+var DialogTrigger = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, ...triggerProps } = props2;
+    const context = useDialogContext(TRIGGER_NAME$1, __scopeDialog);
+    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": context.open,
+        "aria-controls": context.contentId,
+        "data-state": getState(context.open),
+        ...triggerProps,
+        ref: composedTriggerRef,
+        onClick: composeEventHandlers(props2.onClick, context.onOpenToggle)
+      }
+    );
   }
-  return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(dialogStyles$1.content, fontStyles.body),
-    children: /* @__PURE__ */ jsxs("div", {
-      ...{
-        className: "mlyqyf9gi mly78zum5 mlydt5ytf mly167g77z"
-      },
-      children: [/* @__PURE__ */ jsx("div", {
-        ...{
-          className: "mlyrvj5dj mly17bnpya mly167g77z"
-        },
-        children: options.map((option2) => option2.type === "boolean" ? /* @__PURE__ */ jsx(BooleanEditor, {
-          option: option2,
-          current,
-          setCurrent
-        }, option2.name) : option2.type === "string" ? /* @__PURE__ */ jsx(StringEditor$1, {
-          option: option2,
-          current,
-          setCurrent
-        }, option2.name) : (
-          // option.type === 'select
-          /* @__PURE__ */ jsx(SelectEditor, {
-            option: option2,
-            current,
-            setCurrent
-          }, option2.name)
-        ))
-      }), /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mly78zum5 mly167g77z"
+);
+DialogTrigger.displayName = TRIGGER_NAME$1;
+var PORTAL_NAME = "DialogPortal";
+var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
+  forceMount: void 0
+});
+var DialogPortal = (props2) => {
+  const { __scopeDialog, forceMount, children, container } = props2;
+  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
+  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$5, { asChild: true, container, children: child }) })) });
+};
+DialogPortal.displayName = PORTAL_NAME;
+var OVERLAY_NAME = "DialogOverlay";
+var DialogOverlay = React.forwardRef(
+  (props2, forwardedRef) => {
+    const portalContext = usePortalContext(OVERLAY_NAME, props2.__scopeDialog);
+    const { forceMount = portalContext.forceMount, ...overlayProps } = props2;
+    const context = useDialogContext(OVERLAY_NAME, props2.__scopeDialog);
+    return context.modal ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
+  }
+);
+DialogOverlay.displayName = OVERLAY_NAME;
+var DialogOverlayImpl = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, ...overlayProps } = props2;
+    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
+    return (
+      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
+      // ie. when `Overlay` and `Content` are siblings
+      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
+        Primitive.div,
+        {
+          "data-state": getState(context.open),
+          ...overlayProps,
+          ref: forwardedRef,
+          style: { pointerEvents: "auto", ...overlayProps.style }
+        }
+      ) })
+    );
+  }
+);
+var CONTENT_NAME$1 = "DialogContent";
+var DialogContent = React.forwardRef(
+  (props2, forwardedRef) => {
+    const portalContext = usePortalContext(CONTENT_NAME$1, props2.__scopeDialog);
+    const { forceMount = portalContext.forceMount, ...contentProps } = props2;
+    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
+    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
+  }
+);
+DialogContent.displayName = CONTENT_NAME$1;
+var DialogContentModal = React.forwardRef(
+  (props2, forwardedRef) => {
+    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
+    React.useEffect(() => {
+      const content = contentRef.current;
+      if (content) return hideOthers(content);
+    }, []);
+    return /* @__PURE__ */ jsx(
+      DialogContentImpl,
+      {
+        ...props2,
+        ref: composedRefs,
+        trapFocus: context.open,
+        disableOutsidePointerEvents: true,
+        onCloseAutoFocus: composeEventHandlers(props2.onCloseAutoFocus, (event) => {
+          var _a2;
+          event.preventDefault();
+          (_a2 = context.triggerRef.current) == null ? void 0 : _a2.focus();
+        }),
+        onPointerDownOutside: composeEventHandlers(props2.onPointerDownOutside, (event) => {
+          const originalEvent = event.detail.originalEvent;
+          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+          if (isRightClick) event.preventDefault();
+        }),
+        onFocusOutside: composeEventHandlers(
+          props2.onFocusOutside,
+          (event) => event.preventDefault()
+        )
+      }
+    );
+  }
+);
+var DialogContentNonModal = React.forwardRef(
+  (props2, forwardedRef) => {
+    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
+    const hasInteractedOutsideRef = React.useRef(false);
+    const hasPointerDownOutsideRef = React.useRef(false);
+    return /* @__PURE__ */ jsx(
+      DialogContentImpl,
+      {
+        ...props2,
+        ref: forwardedRef,
+        trapFocus: false,
+        disableOutsidePointerEvents: false,
+        onCloseAutoFocus: (event) => {
+          var _a2, _b2;
+          (_a2 = props2.onCloseAutoFocus) == null ? void 0 : _a2.call(props2, event);
+          if (!event.defaultPrevented) {
+            if (!hasInteractedOutsideRef.current) (_b2 = context.triggerRef.current) == null ? void 0 : _b2.focus();
+            event.preventDefault();
+          }
+          hasInteractedOutsideRef.current = false;
+          hasPointerDownOutsideRef.current = false;
         },
-        children: [/* @__PURE__ */ jsx(Button, {
-          label: "Cancel",
-          onClick: () => {
-            setOpen(false);
-          },
-          customStyle: dialogStyles$1.editorCell
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "primary",
-          label: "Apply",
-          onClick: () => {
-            if (!view.getTag(RENDERER_PREFIX).has("viz", viz)) {
-              view.setTagProperty(["viz"], viz, RENDERER_PREFIX);
-            }
-            for (const option2 of options) {
-              if (current[option2.name] !== option2.default.toString()) {
-                view.setTagProperty(["viz", option2.name], current[option2.name], RENDERER_PREFIX);
-              } else {
-                view.removeTagProperty(["viz", option2.name], RENDERER_PREFIX);
-              }
+        onInteractOutside: (event) => {
+          var _a2, _b2;
+          (_a2 = props2.onInteractOutside) == null ? void 0 : _a2.call(props2, event);
+          if (!event.defaultPrevented) {
+            hasInteractedOutsideRef.current = true;
+            if (event.detail.originalEvent.type === "pointerdown") {
+              hasPointerDownOutsideRef.current = true;
             }
-            setQuery == null ? void 0 : setQuery(rootQuery.build());
-            setOpen(false);
-          },
-          customStyle: dialogStyles$1.editorCell
-        })]
-      })]
-    })
-  });
-}
-function BooleanEditor({
-  current,
-  option: option2,
-  setCurrent
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ createElement("div", {
-      ...{
-        className: "mly78zum5 mly1lvf691 mly117nqv4"
-      },
-      key: option2.name
-    }, /* @__PURE__ */ jsx("input", {
-      type: "checkbox",
-      checked: current[option2.name] === "true",
-      onChange: ({
-        target: {
-          checked
+          }
+          const target = event.target;
+          const targetIsTrigger = (_b2 = context.triggerRef.current) == null ? void 0 : _b2.contains(target);
+          if (targetIsTrigger) event.preventDefault();
+          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
+            event.preventDefault();
+          }
         }
-      }) => {
-        setCurrent({
-          ...current,
-          [option2.name]: checked.toString()
-        });
       }
-    })), /* @__PURE__ */ jsx("label", {
-      title: option2.description,
-      children: option2.label
-    }, `${option2.name}-label`)]
-  });
-}
-function StringEditor$1({
-  current,
-  option: option2,
-  setCurrent
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ createElement("div", {
-      ...{
-        className: "mly78zum5 mly1lvf691 mly117nqv4"
-      },
-      key: `${option2.name}-label`
-    }, /* @__PURE__ */ jsxs("label", {
-      children: [option2.label, ":"]
-    })), /* @__PURE__ */ jsx("input", {
-      value: current[option2.name],
-      onChange: ({
-        target: {
-          value
+    );
+  }
+);
+var DialogContentImpl = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props2;
+    const context = useDialogContext(CONTENT_NAME$1, __scopeDialog);
+    const contentRef = React.useRef(null);
+    const composedRefs = useComposedRefs(forwardedRef, contentRef);
+    useFocusGuards();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        FocusScope,
+        {
+          asChild: true,
+          loop: true,
+          trapped: trapFocus,
+          onMountAutoFocus: onOpenAutoFocus,
+          onUnmountAutoFocus: onCloseAutoFocus,
+          children: /* @__PURE__ */ jsx(
+            DismissableLayer,
+            {
+              role: "dialog",
+              id: context.contentId,
+              "aria-describedby": context.descriptionId,
+              "aria-labelledby": context.titleId,
+              "data-state": getState(context.open),
+              ...contentProps,
+              ref: composedRefs,
+              onDismiss: () => context.onOpenChange(false)
+            }
+          )
         }
-      }) => {
-        setCurrent({
-          ...current,
-          [option2.name]: value
-        });
-      }
-    }, option2.name)]
-  });
-}
-function SelectEditor({
-  current,
-  option: option2,
-  setCurrent
-}) {
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [/* @__PURE__ */ createElement("div", {
-      ...{
-        className: "mly78zum5 mly1lvf691 mly117nqv4"
-      },
-      key: `${option2.name}-label`
-    }, /* @__PURE__ */ jsxs("label", {
-      children: [option2.label, ":"]
-    })), /* @__PURE__ */ jsx(SelectDropdown, {
-      value: current[option2.name],
-      options: option2.options,
-      onChange: (value) => {
-        setCurrent({
-          ...current,
-          [option2.name]: value
-        });
+      ),
+      /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
+        /* @__PURE__ */ jsx(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
+      ] })
+    ] });
+  }
+);
+var TITLE_NAME = "DialogTitle";
+var DialogTitle = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, ...titleProps } = props2;
+    const context = useDialogContext(TITLE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
+  }
+);
+DialogTitle.displayName = TITLE_NAME;
+var DESCRIPTION_NAME = "DialogDescription";
+var DialogDescription = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, ...descriptionProps } = props2;
+    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
+  }
+);
+DialogDescription.displayName = DESCRIPTION_NAME;
+var CLOSE_NAME = "DialogClose";
+var DialogClose = React.forwardRef(
+  (props2, forwardedRef) => {
+    const { __scopeDialog, ...closeProps } = props2;
+    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
+    return /* @__PURE__ */ jsx(
+      Primitive.button,
+      {
+        type: "button",
+        ...closeProps,
+        ref: forwardedRef,
+        onClick: composeEventHandlers(props2.onClick, () => context.onOpenChange(false))
       }
-    }, option2.name)]
-  });
+    );
+  }
+);
+DialogClose.displayName = CLOSE_NAME;
+function getState(open) {
+  return open ? "open" : "closed";
 }
-const dialogStyles$1 = {
-  trigger: {
-    height: "mly1ktj5wk",
+var TITLE_WARNING_NAME = "DialogTitleWarning";
+var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
+  contentName: CONTENT_NAME$1,
+  titleName: TITLE_NAME,
+  docsSlug: "dialog"
+});
+var TitleWarning = ({ titleId }) => {
+  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
+  const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
+
+If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
+
+For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
+  React.useEffect(() => {
+    if (titleId) {
+      const hasTitle = document.getElementById(titleId);
+      if (!hasTitle) console.error(MESSAGE);
+    }
+  }, [MESSAGE, titleId]);
+  return null;
+};
+var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
+var DescriptionWarning = ({ contentRef, descriptionId }) => {
+  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
+  const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
+  React.useEffect(() => {
+    var _a2;
+    const describedById = (_a2 = contentRef.current) == null ? void 0 : _a2.getAttribute("aria-describedby");
+    if (descriptionId && describedById) {
+      const hasDescription = document.getElementById(descriptionId);
+      if (!hasDescription) console.warn(MESSAGE);
+    }
+  }, [MESSAGE, contentRef, descriptionId]);
+  return null;
+};
+var Root = Dialog;
+var Portal = DialogPortal;
+var Overlay = DialogOverlay;
+var Content$1 = DialogContent;
+var Title = DialogTitle;
+var Description = DialogDescription;
+var Close = DialogClose;
+const styles$s = {
+  left: {
+    display: "mly78zum5",
+    justifyContent: "mly1lvf691",
     $$css: true
   },
-  content: {
+  right: {
+    display: "mly78zum5",
+    justifyContent: "mly1rfj78v",
+    $$css: true
+  },
+  heading: {
+    gridColumn: "mly623te4",
+    gridColumnStart: null,
+    gridColumnEnd: null,
+    fontWeight: "mly117nqv4",
+    $$css: true
+  },
+  label: {
+    whiteSpace: "mlyuxw1ft",
+    $$css: true
+  },
+  divider: {
+    gridColumn: "mly1a80n4u",
+    gridColumnStart: null,
+    gridColumnEnd: null,
+    borderTop: "mlye536se",
+    borderTopWidth: null,
+    borderTopStyle: null,
+    borderTopColor: null,
+    $$css: true
+  },
+  editor: {
     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,
-    padding: "mlye8ttls",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    minWidth: "mlylm99nl",
-    maxWidth: "mly1jkqq1h",
     gap: "mly167g77z",
     rowGap: null,
     columnGap: null,
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   },
-  editorCell: {
-    flexGrow: "mly1iyjqo2",
-    $$css: true
-  }
+  editorGrid: {
+    display: "mlyrvj5dj",
+    gridTemplateColumns: "mly16kridx",
+    gridAutoRows: "mlysd5ean",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    overflowY: "mly1odjw0f",
+    $$css: true
+  },
+  editorRow: {
+    display: "mly78zum5",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  editorCell: {
+    flexGrow: "mly1iyjqo2",
+    $$css: true
+  },
+  input: {
+    border: "mly27xtdb",
+    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,
+    borderRadius: "mly12oqio5",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    color: "mlyizdh9v",
+    padding: "mly34lxi1",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    $$css: true
+  },
+  card: {
+    maxWidth: "mly1dc814f",
+    $$css: true
+  },
+  infoTrigger: {
+    display: "mly3nfvp2",
+    alignItems: "mly1071x5a",
+    justifyContent: "mlyl56j7k",
+    paddingRight: "mlyy13l1i",
+    paddingInlineStart: null,
+    paddingInlineEnd: null,
+    paddingTop: "mly1iorvi4",
+    $$css: true
+  }
+};
+function HoverCard({
+  children,
+  customStyle
+}) {
+  return /* @__PURE__ */ jsx("div", {
+    ..._stylex.props(styles$r.container, fontStyles.body, customStyle),
+    children
+  });
+}
+const styles$r = {
+  container: {
+    boxShadow: "mly5n1uv4",
+    backgroundColor: "mly12peec7",
+    borderRadius: "mly4pepcl",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    padding: "mlyc7ga6q",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  }
+};
+function InfoHover({
+  info
+}) {
+  return /* @__PURE__ */ jsxs(Root3$1, {
+    children: [/* @__PURE__ */ jsx(Trigger$4, {
+      asChild: true,
+      children: /* @__PURE__ */ jsx("div", {
+        ..._stylex.props(styles$s.infoTrigger, fontStyles.body),
+        children: /* @__PURE__ */ jsx(Icon, {
+          name: "info",
+          color: "disabled"
+        })
+      })
+    }), /* @__PURE__ */ jsx(Portal$4, {
+      children: /* @__PURE__ */ jsx(Content2$4, {
+        side: "right",
+        align: "start",
+        children: /* @__PURE__ */ jsx(HoverCard, {
+          customStyle: styles$s.card,
+          children: info
+        })
+      })
+    })]
+  });
+}
+function useClickOutside(refOrRefs, handler) {
+  useEffect(() => {
+    const refs = Array.isArray(refOrRefs) ? refOrRefs : [refOrRefs];
+    let down = false;
+    const isInOneElement = (ref, event) => {
+      return !ref.current || event.target instanceof Element && ref.current.contains(event.target);
+    };
+    const isInElement = (event) => {
+      return refs.some((ref) => isInOneElement(ref, event));
+    };
+    const onMouseUp = (event) => {
+      if (!down || isInElement(event)) return;
+      handler(event);
+      down = false;
+    };
+    const onMouseDown = (event) => {
+      if (isInElement(event)) return;
+      down = true;
+    };
+    document.addEventListener("mouseup", onMouseUp);
+    document.addEventListener("mousedown", onMouseDown);
+    return () => {
+      document.removeEventListener("mouseup", onMouseUp);
+      document.removeEventListener("mousedown", onMouseDown);
+    };
+  }, [refOrRefs, handler]);
+}
+const PillInput = ({
+  values,
+  setValues,
+  autoFocus,
+  placeholder,
+  type = "text",
+  value: controlledValue,
+  setValue: setControlledValue,
+  focusElement,
+  color = DEFAULT_TOKEN_COLOR,
+  customStyle
+}) => {
+  const [uncontrolledValue, setUncontrolledValue] = useState("");
+  const [_focused, setFocused] = useState(false);
+  const inp = useRef(null);
+  const ref = useRef(null);
+  const [selectedPill, setSelectedPill] = useState(void 0);
+  const pillRefs = useRef([]);
+  const value = controlledValue || uncontrolledValue;
+  const setValue = setControlledValue || setUncontrolledValue;
+  const deletePill = useCallback((idx) => {
+    var _a2;
+    const newValues = [...values];
+    newValues.splice(idx, 1);
+    setValues(newValues);
+    if (selectedPill === 0) {
+      if (values.length === 1) {
+        setSelectedPill(void 0);
+        (_a2 = inp.current) == null ? void 0 : _a2.focus();
+      } else {
+        setSelectedPill(0);
+      }
+    } else {
+      setSelectedPill(idx - 1);
+    }
+  }, [selectedPill, setValues, values]);
+  const pills = useMemo(() => {
+    pillRefs.current = new Array(values.length);
+    return values.map((value2, index2) => /* @__PURE__ */ jsx(Pill, {
+      color,
+      onClick: () => {
+        setSelectedPill(index2);
+      },
+      onDelete: () => deletePill(index2),
+      forwardRef: (ref2) => {
+        pillRefs.current[index2] = ref2;
+      },
+      children: value2
+    }, value2));
+  }, [color, deletePill, values]);
+  useEffect(() => {
+    var _a2;
+    if (selectedPill !== void 0) {
+      (_a2 = pillRefs.current[selectedPill]) == null ? void 0 : _a2.focus();
+    }
+  }, [pills, selectedPill]);
+  const onKeyUp = (event) => {
+    var _a2, _b2;
+    if (event.key === "Backspace") {
+      if (selectedPill !== void 0) {
+        deletePill(selectedPill);
+      }
+    } else if (event.key === "ArrowRight") {
+      if (selectedPill === values.length - 1) {
+        setSelectedPill(void 0);
+        (_a2 = inp.current) == null ? void 0 : _a2.focus();
+      } else if (selectedPill !== void 0) {
+        setSelectedPill(selectedPill + 1);
+      }
+    } else if (event.key === "ArrowLeft") {
+      if (selectedPill !== void 0 && selectedPill > 0) {
+        setSelectedPill(selectedPill - 1);
+      }
+    } else {
+      (_b2 = inp.current) == null ? void 0 : _b2.focus();
+    }
+  };
+  const commitValue = () => {
+    if (value.length > 0 && !values.includes(value)) {
+      setValues([...values, value]);
+      setValue("");
+    }
+  };
+  useClickOutside(focusElement ? [ref, focusElement] : ref, () => {
+    setFocused(false);
+    commitValue();
+  });
+  return /* @__PURE__ */ jsx("div", {
+    ..._stylex.props(fontStyles.body, styles$q.main),
+    children: /* @__PURE__ */ jsxs("div", {
+      ..._stylex.props(styles$q.content, customStyle),
+      onKeyUp,
+      onClick: () => {
+        var _a2;
+        return (_a2 = inp.current) == null ? void 0 : _a2.focus();
+      },
+      ref,
+      children: [pills, /* @__PURE__ */ jsx("input", {
+        ...{
+          className: "mly1gs6z28 mly1a2a7pz mly6icuqf mlyif65rj mlyayvuls mly83z2og mly1onzeue mly195ery5 mly1iyjqo2"
+        },
+        ref: inp,
+        type,
+        placeholder: values.length === 0 ? placeholder : "",
+        value,
+        size: 1,
+        onChange: (event) => {
+          setValue(event.target.value);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Enter") {
+            if (value !== "") {
+              commitValue();
+              event.stopPropagation();
+              event.preventDefault();
+            }
+          }
+        },
+        onKeyUp: (event) => {
+          var _a2, _b2, _c2, _d;
+          if (event.key === "Backspace") {
+            if (value === "" && values.length > 0) {
+              commitValue();
+              (_a2 = inp.current) == null ? void 0 : _a2.blur();
+              setSelectedPill(values.length - 1);
+            }
+          } else if (event.key === "ArrowLeft") {
+            if (((_b2 = inp.current) == null ? void 0 : _b2.selectionStart) === 0 || ((_c2 = inp.current) == null ? void 0 : _c2.selectionStart) === null) {
+              commitValue();
+              (_d = inp.current) == null ? void 0 : _d.blur();
+              setSelectedPill(values.length - 1);
+              event.preventDefault();
+              event.stopPropagation();
+            }
+          }
+        },
+        onFocus: () => {
+          setFocused(true);
+          setSelectedPill(void 0);
+        },
+        autoFocus
+      })]
+    })
+  });
+};
+const Pill = ({
+  children,
+  color = DEFAULT_TOKEN_COLOR,
+  forwardRef,
+  onClick,
+  onDelete
+}) => {
+  return /* @__PURE__ */ jsxs("div", {
+    onClick,
+    tabIndex: 0,
+    ref: forwardRef,
+    ..._stylex.props(styles$q.pill, colorVariants[color]),
+    children: [children, /* @__PURE__ */ jsx("div", {
+      title: "Remove",
+      ...{
+        className: "mly3nfvp2"
+      },
+      children: /* @__PURE__ */ jsx(SvgClear, {
+        onClick: () => onDelete(),
+        ...{
+          className: "mly6jxa94 mly1v9usgg"
+        }
+      })
+    })]
+  });
+};
+const styles$q = {
+  main: {
+    borderRadius: "mly12oqio5",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    border: "mlyvckdp7",
+    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,
+    padding: "mlybsehbd",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    display: "mlyrvj5dj",
+    minHeight: "mly2lwn1j",
+    overflow: "mlyysyzu8",
+    overflowX: null,
+    overflowY: null,
+    $$css: true
+  },
+  content: {
+    outline: "mly1a2a7pz",
+    outlineColor: null,
+    outlineOffset: null,
+    outlineStyle: null,
+    outlineWidth: null,
+    display: "mly78zum5",
+    flexWrap: "mly1a02dak",
+    gap: "mly1ed6fcf",
+    rowGap: null,
+    columnGap: null,
+    borderColor: "mly1akygb0 mlyetl2wx",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    $$css: true
+  },
+  pill: {
+    backgroundColor: "mlyy9rfsq",
+    borderRadius: "mly1sxf85j",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    color: "mly1xre2ib",
+    display: "mly78zum5",
+    alignItems: "mly6s0dn4",
+    gap: "mly1nejdyq",
+    rowGap: null,
+    columnGap: null,
+    padding: "mly1e41zw8",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    textTransform: "mly6mezaz",
+    cursor: "mly1ypdohk",
+    height: "mly1qx5ct2",
+    whiteSpace: "mlyuxw1ft",
+    $$css: true
+  }
+};
+const colorVariants = {
+  default: {
+    "--mlyvygx4q": "mly1izbou4",
+    "--mly13n7235": "mly8bgh0r",
+    $$css: true
+  },
+  purple: {
+    "--mlyvygx4q": "mly1f8soc4",
+    "--mly13n7235": "mly1r5zvhd",
+    $$css: true
+  },
+  green: {
+    "--mlyvygx4q": "mlyf8wvcd",
+    "--mly13n7235": "mly1u6t2w6",
+    $$css: true
+  },
+  cyan: {
+    "--mlyvygx4q": "mlyrtwgpv",
+    "--mly13n7235": "mlys5r2en",
+    $$css: true
+  }
+};
+function OneOfEditor({
+  view,
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.label, styles$s.left),
+      children: /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })
+    }), /* @__PURE__ */ jsx("div", {}), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+      info: option2.description
+    }) : /* @__PURE__ */ jsx("div", {}), option2.oneOf.map((subOption, key2) => {
+      switch (subOption.type) {
+        case "string":
+          return /* @__PURE__ */ jsx(OneOfStringEditor, {
+            view,
+            name,
+            path,
+            updateCurrent,
+            current,
+            option: subOption
+          }, key2);
+        case "number":
+          return /* @__PURE__ */ jsx(OneOfNumberEditor, {
+            view,
+            name,
+            path,
+            updateCurrent,
+            current,
+            option: subOption
+          }, key2);
+        case "array":
+          return /* @__PURE__ */ jsx(OneOfArrayEditor, {
+            view,
+            name,
+            path,
+            updateCurrent,
+            current,
+            option: subOption
+          }, key2);
+      }
+      return null;
+    })]
+  });
+}
+function OneOfStringEditor({
+  path,
+  current,
+  updateCurrent,
+  option: option2
+}) {
+  const isString2 = typeof current === "string";
+  const [value, setValue] = useState(isString2 ? current : "");
+  if (option2.enum) {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        ..._stylex.props(styles$s.left),
+        children: /* @__PURE__ */ jsx("input", {
+          type: "radio",
+          checked: isString2 && option2.enum.includes(current),
+          onChange: ({
+            target: {
+              checked
+            }
+          }) => {
+            if (checked) {
+              updateCurrent(path, value);
+            }
+          }
+        })
+      }), option2.enum.length > 1 ? /* @__PURE__ */ jsx(SelectDropdown, {
+        value,
+        options: option2.enum.map((value2) => ({
+          label: value2,
+          value: value2
+        })),
+        onChange: (value2) => {
+          setValue(value2);
+          updateCurrent(path, value2);
+        }
+      }) : /* @__PURE__ */ jsx("div", {
+        children: option2.enum[0]
+      }), /* @__PURE__ */ jsx("div", {})]
+    });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsx("div", {
+        ..._stylex.props(styles$s.left),
+        children: /* @__PURE__ */ jsx("input", {
+          type: "radio",
+          checked: isString2,
+          onChange: ({
+            target: {
+              checked
+            }
+          }) => {
+            if (checked) {
+              updateCurrent(path, value);
+            }
+          }
+        })
+      }), /* @__PURE__ */ jsx("input", {
+        value,
+        onChange: ({
+          target: {
+            value: value2
+          }
+        }) => {
+          setValue(value2);
+          updateCurrent(path, value2);
+        }
+      }), /* @__PURE__ */ jsx("div", {})]
+    });
+  }
+}
+function OneOfNumberEditor({
+  path,
+  current,
+  updateCurrent,
+  option: option2
+}) {
+  const isNumber2 = typeof current === "number";
+  const [value, setValue] = useState(isNumber2 ? current : option2.minimum ?? 0);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left),
+      children: /* @__PURE__ */ jsx("input", {
+        type: "radio",
+        checked: isNumber2,
+        onChange: ({
+          target: {
+            checked
+          }
+        }) => {
+          if (checked) {
+            updateCurrent(path, value);
+          }
+        }
+      })
+    }), /* @__PURE__ */ jsx("input", {
+      type: "number",
+      min: option2.minimum,
+      max: option2.maximum,
+      value,
+      onChange: ({
+        target: {
+          valueAsNumber
+        }
+      }) => {
+        setValue(value);
+        updateCurrent(path, valueAsNumber);
+      },
+      ..._stylex.props(styles$s.input)
+    }), /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function OneOfArrayEditor({
+  path,
+  current,
+  updateCurrent
+}) {
+  const isArray2 = Array.isArray(current);
+  const [value, setValue] = useState(isArray2 ? current : []);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left),
+      children: /* @__PURE__ */ jsx("input", {
+        type: "radio",
+        checked: isArray2,
+        onChange: ({
+          target: {
+            checked
+          }
+        }) => {
+          if (checked) {
+            updateCurrent(path, value);
+          }
+        }
+      })
+    }), /* @__PURE__ */ jsx(PillInput, {
+      values: value,
+      setValues: (values) => {
+        setValue(values);
+        updateCurrent(path, values);
+      }
+    }), /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function ArrayEditor({
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left, styles$s.label),
+      children: /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })
+    }), /* @__PURE__ */ jsx(PillInput, {
+      values: current,
+      setValues: (values) => {
+        updateCurrent(path, values);
+      }
+    }), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+      info: option2.description
+    }) : /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function NumberEditor$1({
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left, styles$s.label),
+      children: /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })
+    }), /* @__PURE__ */ jsx("input", {
+      value: current,
+      type: "number",
+      min: option2.minimum,
+      max: option2.maximum,
+      onChange: ({
+        target: {
+          valueAsNumber
+        }
+      }) => {
+        updateCurrent(path, valueAsNumber);
+      },
+      ..._stylex.props(styles$s.input)
+    }, name), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+      info: option2.description
+    }) : /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function StringEditor$1({
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  if (option2.enum) {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ createElement("div", {
+        ..._stylex.props(styles$s.left, styles$s.label),
+        key: `${name}-label`
+      }, /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })), /* @__PURE__ */ jsx(SelectDropdown, {
+        value: current,
+        options: option2.enum.map((value) => ({
+          label: value,
+          value
+        })),
+        onChange: (value) => {
+          updateCurrent(path, value);
+        }
+      }, name), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+        info: option2.description
+      }) : /* @__PURE__ */ jsx("div", {})]
+    });
+  } else {
+    return /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ createElement("div", {
+        ..._stylex.props(styles$s.left, styles$s.label),
+        key: `${name}-label`
+      }, /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })), /* @__PURE__ */ jsx("input", {
+        value: current,
+        onChange: ({
+          target: {
+            value
+          }
+        }) => {
+          updateCurrent(path, value);
+        }
+      }, name), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+        info: option2.description
+      }) : /* @__PURE__ */ jsx("div", {})]
+    });
+  }
+}
+function BooleanEditor({
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left),
+      children: /* @__PURE__ */ jsxs("label", {
+        ..._stylex.props(styles$s.label),
+        htmlFor: `${name}-checkbox`,
+        children: [option2.title ?? name, ":"]
+      }, `${name}-label`)
+    }), /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.right),
+      children: /* @__PURE__ */ jsx("input", {
+        type: "checkbox",
+        checked: current,
+        onChange: ({
+          target: {
+            checked
+          }
+        }) => {
+          updateCurrent(path, checked);
+        },
+        id: `${name}-checkbox`
+      })
+    }), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+      info: option2.description
+    }) : /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function FieldEditor({
+  view,
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  const [searchValue, setSearchValue] = useState("");
+  const valueListRef = useRef(null);
+  const jsonFields = current ?? [];
+  const fields = jsonFields.map((field) => {
+    try {
+      return JSON.parse(field)[0];
+    } catch (e) {
+      console.warn("Failed to parse field", field, e);
+      return "";
+    }
+  });
+  const updateFields = (path2, value) => {
+    const jsonFields2 = value.map((field) => JSON.stringify([field]));
+    updateCurrent(path2, jsonFields2);
+  };
+  const lcSearch = searchValue.toLocaleLowerCase();
+  const dimensions = view.definition.getOutputSchema().fields;
+  const filteredFields = dimensions.filter((field) => field.name.toLocaleLowerCase().includes(lcSearch)).filter((field) => !fields.includes(field.name)).filter((field) => {
+    var _a2;
+    return !("fieldTypes" in option2.items) || ((_a2 = option2.items.fieldTypes) == null ? void 0 : _a2.includes(field.type.kind));
+  });
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.left, styles$s.label),
+      children: /* @__PURE__ */ jsxs("label", {
+        children: [option2.title ?? name, ":"]
+      })
+    }), /* @__PURE__ */ jsxs("div", {
+      style: {
+        minHeight: 0,
+        display: "grid",
+        gap: 4
+      },
+      children: [/* @__PURE__ */ jsx(PillInput, {
+        values: fields,
+        setValues: (values) => {
+          updateFields(path, values);
+        },
+        value: searchValue,
+        setValue: setSearchValue,
+        focusElement: valueListRef
+      }), /* @__PURE__ */ jsx(FieldList$1, {
+        ref: valueListRef,
+        fields: filteredFields,
+        search: searchValue,
+        onClick: (value) => {
+          updateFields(path, [...fields, value]);
+        }
+      })]
+    }), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+      info: option2.description
+    }) : /* @__PURE__ */ jsx("div", {})]
+  });
+}
+function FieldList$1({
+  ref,
+  fields,
+  search,
+  onClick
+}) {
+  if (fields.length) {
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      ...{
+        className: "mly78zum5 mly1a02dak mly1jnr06f"
+      },
+      children: fields.map((field) => /* @__PURE__ */ jsx(FieldToken, {
+        field,
+        onClick: () => onClick(field.name),
+        tooltip: /* @__PURE__ */ jsx(FieldHoverCard, {
+          field,
+          path: []
+        }),
+        tooltipProps: {
+          side: "right",
+          align: "start",
+          sideOffset: 4,
+          alignOffset: 24
+        }
+      }, field.name))
+    });
+  } else {
+    if (search) {
+      return /* @__PURE__ */ jsx("div", {
+        ...{},
+        "data-disabled": "true",
+        children: "No matching fields"
+      });
+    }
+  }
+}
+function ObjectEditor({
+  view,
+  name,
+  path,
+  current,
+  option: option2,
+  updateCurrent
+}) {
+  const [isExpanded, setIsExpanded] = useState(path.length === 0);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [name ? /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsxs("div", {
+        ..._stylex.props(styles$s.label, styles$s.heading),
+        children: [/* @__PURE__ */ jsx("label", {
+          children: option2.title ?? name
+        }), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
+          info: option2.description
+        }) : null]
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "flat",
+        size: "compact",
+        onClick: () => setIsExpanded(!isExpanded),
+        icon: isExpanded ? "chevronDown" : "chevronRight",
+        tooltip: isExpanded ? "Collapse" : "Expand"
+      })]
+    }) : null, isExpanded ? Object.entries(option2.properties).map(([subName, subOption]) => {
+      const key2 = [...path, name, subName].join(".");
+      if (subOption.type === "boolean") {
+        return /* @__PURE__ */ jsx(BooleanEditor, {
+          view,
+          name: subName,
+          path: [...path, subName],
+          option: subOption,
+          current: current[subName],
+          updateCurrent
+        }, key2);
+      } else if (subOption.type === "string") {
+        return /* @__PURE__ */ jsx(StringEditor$1, {
+          view,
+          name: subName,
+          path: [...path, subName],
+          option: subOption,
+          current: current[subName],
+          updateCurrent
+        }, key2);
+      } else if (subOption.type === "number") {
+        return /* @__PURE__ */ jsx(NumberEditor$1, {
+          view,
+          name: subName,
+          path: [...path, subName],
+          option: subOption,
+          current: current[subName],
+          updateCurrent
+        }, key2);
+      } else if (subOption.type === "object") {
+        return /* @__PURE__ */ jsx(ObjectEditor, {
+          view,
+          name: subName,
+          path: [...path, subName],
+          option: subOption,
+          current: current[subName] ?? {},
+          updateCurrent
+        }, key2);
+      } else if (subOption.type === "array") {
+        if (subOption.items.type === "string") {
+          if ("subtype" in subOption.items && subOption.items.subtype === "field") {
+            return /* @__PURE__ */ jsx(FieldEditor, {
+              view,
+              name: subName,
+              path: [...path, subName],
+              option: subOption,
+              current: current[subName] ?? [],
+              updateCurrent
+            }, key2);
+          } else {
+            return /* @__PURE__ */ jsx(ArrayEditor, {
+              view,
+              name: subName,
+              path: [...path, subName],
+              option: subOption,
+              current: current[subName] ?? [],
+              updateCurrent
+            }, key2);
+          }
+        } else {
+          console.warn("Unsupported array type", subOption.items.type);
+        }
+      } else if (subOption.type === "oneOf") {
+        return /* @__PURE__ */ jsx(OneOfEditor, {
+          view,
+          name: subName,
+          path: [...path, subName],
+          option: subOption,
+          current: current[subName],
+          updateCurrent
+        }, key2);
+      }
+      return null;
+    }) : null, /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.divider)
+    })]
+  });
+}
+function VizEditor({
+  rootQuery,
+  view,
+  plugin,
+  setOpen
+}) {
+  const {
+    setQuery
+  } = useContext(QueryEditorContext);
+  const [current, setCurrent] = useState(plugin.getSettings());
+  console.info("RendererEditor current settings:", current);
+  const schema = plugin.getSchema();
+  const updateCurrent = (path, value) => {
+    const newCurrent = {
+      ...current
+    };
+    let target = newCurrent;
+    for (let i2 = 0; i2 < path.length - 1; i2++) {
+      if (!(path[i2] in target)) {
+        target[path[i2]] = {};
+      }
+      target = target[path[i2]];
+    }
+    target[path[path.length - 1]] = value;
+    setCurrent(newCurrent);
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    ..._stylex.props(styles$s.editor),
+    children: [/* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.editorGrid),
+      children: /* @__PURE__ */ jsx(ObjectEditor, {
+        view,
+        name: "",
+        path: [],
+        option: schema,
+        current,
+        updateCurrent
+      })
+    }), /* @__PURE__ */ jsxs("div", {
+      ..._stylex.props(styles$s.editorRow),
+      children: [/* @__PURE__ */ jsx(Button, {
+        label: "Cancel",
+        onClick: () => {
+          setOpen(false);
+        },
+        customStyle: styles$s.editorCell
+      }), /* @__PURE__ */ jsx(Button, {
+        variant: "primary",
+        label: "Apply",
+        onClick: () => {
+          const tag = plugin.settingsToTag(current);
+          const value = tag.toString();
+          const annotations = view.getOrAddAnnotations();
+          const old = annotations.items.find((annotation) => annotation.value.startsWith(RENDERER_PREFIX + "viz"));
+          if (old) {
+            annotations.remove(old);
+          }
+          view.getOrAddAnnotations().add(new ASTAnnotation({
+            value
+          }));
+          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          setOpen(false);
+        },
+        customStyle: styles$s.editorCell
+      })]
+    })]
+  });
+}
+const dialogStyles = {
+  displayNone: {
+    display: "mly1s85apg",
+    $$css: true
+  },
+  overlay: {
+    background: "mly5uxqc1",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    position: "mlyixxii4",
+    top: "mly13vifvy",
+    left: "mlyu96u03",
+    right: "mly3m8u43",
+    insetInlineStart: null,
+    insetInlineEnd: null,
+    bottom: "mly1ey2m1c",
+    display: "mlyrvj5dj",
+    placeItems: "mly1ku5rj1",
+    alignItems: null,
+    justifyItems: null,
+    zIndex: "mly11uqc5h",
+    $$css: true
+  },
+  title: {
+    fontSize: "mly1j61zf2",
+    margin: "mly1ghz6dp",
+    marginInline: null,
+    marginInlineStart: null,
+    marginLeft: null,
+    marginInlineEnd: null,
+    marginRight: null,
+    marginBlock: null,
+    marginTop: null,
+    marginBottom: null,
+    display: "mly78zum5",
+    justifyContent: "mly1qughib",
+    alignItems: "mly6s0dn4",
+    borderBottom: "mlyllpv0l",
+    borderBottomWidth: null,
+    borderBottomStyle: null,
+    borderBottomColor: null,
+    lineHeight: "mly1rl49lg",
+    $$css: true
+  },
+  close: {
+    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,
+    background: "mly1md70p1 mly14hn1a8 mlywghvya",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    borderRadius: "mly12oqio5",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  },
+  content: {
+    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,
+    padding: "mlye8ttls",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    minWidth: "mlylm99nl",
+    maxWidth: "mly1jkqq1h",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  editor: {
+    width: "mlyqyf9gi",
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  editorRow: {
+    display: "mly78zum5",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    $$css: true
+  },
+  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 VizEditorDialog({
+  rootQuery,
+  plugin,
+  view,
+  customStyle,
+  open,
+  setOpen
+}) {
+  if (!plugin || !open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Root, {
+    onOpenChange: (open2) => setOpen(open2),
+    open,
+    children: /* @__PURE__ */ jsx(Portal, {
+      children: /* @__PURE__ */ jsx(Overlay, {
+        ..._stylex.props(dialogStyles.overlay),
+        children: /* @__PURE__ */ jsxs(Content$1, {
+          ..._stylex.props(fontStyles.body, dialogStyles.content, styles$p.content, customStyle),
+          children: [/* @__PURE__ */ jsxs(Title, {
+            ..._stylex.props(dialogStyles.title),
+            children: ["Visualization Settings", /* @__PURE__ */ jsx(Close, {
+              ..._stylex.props(dialogStyles.close),
+              children: /* @__PURE__ */ jsx(Icon, {
+                name: "clear"
+              })
+            })]
+          }), /* @__PURE__ */ jsx(Description, {
+            ..._stylex.props(dialogStyles.displayNone),
+            children: "Edit visualization parameters"
+          }), /* @__PURE__ */ jsx(VizEditor, {
+            rootQuery,
+            view,
+            plugin,
+            setOpen
+          })]
+        })
+      })
+    })
+  });
+}
+const styles$p = {
+  content: {
+    maxWidth: "mly14zcgw3",
+    width: "mly14rvwrp",
+    maxHeight: "mly1l4ul0t",
+    $$css: true
+  }
 };
 function Visualization$1({
   rootQuery,
   view
 }) {
-  var _a2;
   const {
     setQuery
   } = useContext(QueryEditorContext);
-  const currentTag = view.getTag();
-  const rendererTag = view.getTag(RENDERER_PREFIX);
-  const currentRenderer = ((_a2 = rendererTag.tag("viz")) == null ? void 0 : _a2.text()) ?? legacyToViz(tagToRenderer(currentTag) ?? "table");
-  const setRenderer = (renderer) => {
-    view.setTagProperty(["viz"], renderer, RENDERER_PREFIX);
+  const renderer = useMemo(() => new MalloyRenderer(), []);
+  const [currentRenderer, setCurrentRenderer] = useState("table");
+  const [plugin, setPlugin] = useState();
+  const [open, setOpen] = useState(false);
+  useEffect(() => {
+    var _a2;
+    const viz = renderer.createViz({
+      onError: (error) => {
+        console.error("Malloy render error", error);
+      }
+    });
+    viz.setResult({
+      schema: view.definition.getOutputSchema(),
+      annotations: view.getTag().toString().split("\n").map((value) => ({
+        value
+      })),
+      connection_name: ""
+    });
+    const metadata = viz.getMetadata();
+    if (metadata) {
+      const plugin2 = viz.getActivePlugin(metadata.getRootField().key);
+      if (plugin2 && isCoreVizPluginInstance(plugin2)) {
+        setCurrentRenderer(plugin2.name);
+        setPlugin(plugin2);
+      }
+    } else {
+      const currentTag = view.getTag();
+      const rendererTag = view.getTag(RENDERER_PREFIX);
+      const currentRenderer2 = ((_a2 = rendererTag.tag("viz")) == null ? void 0 : _a2.text()) ?? legacyToViz(tagToRenderer(currentTag) ?? "table");
+      setCurrentRenderer(currentRenderer2);
+    }
+  }, [renderer, view]);
+  const updateViz = (renderer2) => {
+    view.setTagProperty(["viz"], renderer2, RENDERER_PREFIX);
     setQuery == null ? void 0 : setQuery(rootQuery.build());
   };
   const items = VIZ_RENDERERS.map((viz) => ({
@@ -30639,30 +32014,41 @@ function Visualization$1({
     }),
     label: snakeToTitle(viz),
     value: viz,
-    onClick: () => setRenderer(viz)
+    onClick: () => updateViz(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$q.first,
+    customStyle: styles$o.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items,
-    onChange: (viz) => setRenderer(viz)
+    onChange: (viz) => updateViz(viz)
   }, "first")];
-  const options = VISUALIZATION_OPTIONS[currentRenderer];
-  if (options) {
-    tokens2.push(/* @__PURE__ */ jsx(RendererPopover, {
-      viz: currentRenderer,
-      options,
-      view,
-      rootQuery
-    }, "menu"));
+  if (plugin) {
+    tokens2.push(/* @__PURE__ */ jsx(Token, {
+      icon: "gear",
+      onClick: () => setOpen(true),
+      customStyle: styles$o.trigger,
+      tooltip: "Edit Settings..."
+    }, "gear"));
   }
-  return /* @__PURE__ */ jsx(TokenGroup, {
-    customStyle: styles$q.group,
-    children: tokens2
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(TokenGroup, {
+      customStyle: styles$o.group,
+      children: tokens2
+    }), /* @__PURE__ */ jsx(VizEditorDialog, {
+      open,
+      setOpen,
+      rootQuery,
+      plugin,
+      view
+    })]
   });
 }
-const styles$q = {
+const styles$o = {
+  trigger: {
+    height: "mly1ktj5wk",
+    $$css: true
+  },
   group: {
     width: "mlyh8yej3",
     gridTemplateColumns: "mly52fmzj",
@@ -30695,7 +32081,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$n.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx("table", {
       ...{
         className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
@@ -30733,9 +32119,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$p.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$n.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$p.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$n.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -30746,7 +32132,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$p = {
+const styles$n = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -30878,12 +32264,12 @@ function RichText({
   });
   return /* @__PURE__ */ jsx("div", {
     ref,
-    ..._stylex.props(multiLine && styles$o.preWrap, multiLine && styles$o.breakWord, customStyle),
+    ..._stylex.props(multiLine && styles$m.preWrap, multiLine && styles$m.breakWord, customStyle),
     ...props2,
     children: formatted
   });
 }
-const styles$o = {
+const styles$m = {
   preWrap: {
     whiteSpace: "mly126k92a",
     $$css: true
@@ -30912,7 +32298,7 @@ function HoverText({
         onMouseEnter: () => setIsTriggerHovered(true),
         onMouseLeave: () => setIsTriggerHovered(false),
         onPointerMove: (e) => e.preventDefault(),
-        customStyle: [fontStyles.supporting, styles$n.text],
+        customStyle: [fontStyles.supporting, styles$l.text],
         children: text2
       })
     }), /* @__PURE__ */ jsx(Portal$4, {
@@ -30931,7 +32317,7 @@ function HoverText({
     })]
   });
 }
-const styles$n = {
+const styles$l = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -30942,45 +32328,6 @@ const styles$n = {
     $$css: true
   }
 };
-function HoverCard({
-  children,
-  customStyle
-}) {
-  return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$m.container, fontStyles.body, customStyle),
-    children
-  });
-}
-const styles$m = {
-  container: {
-    boxShadow: "mly5n1uv4",
-    backgroundColor: "mly12peec7",
-    borderRadius: "mly4pepcl",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    padding: "mlyc7ga6q",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    display: "mly78zum5",
-    flexDirection: "mlydt5ytf",
-    gap: "mly167g77z",
-    rowGap: null,
-    columnGap: null,
-    $$css: true
-  }
-};
 function FieldHoverCard({
   field,
   path
@@ -30997,7 +32344,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$l.viewAttributeTable
+      style: styles$k.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -31006,7 +32353,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs(HoverCard, {
-    customStyle: styles$l.container,
+    customStyle: styles$k.container,
     children: [/* @__PURE__ */ jsxs("div", {
       ref,
       children: [/* @__PURE__ */ jsx("div", {
@@ -31017,10 +32364,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$l.path),
+        ..._stylex.props(fontStyles.supporting, styles$k.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$l.title),
+        ..._stylex.props(fontStyles.emphasized, styles$k.title),
         children: field.name
       }), description && /* @__PURE__ */ jsx(HoverText, {
         text: description,
@@ -31031,7 +32378,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$l = {
+const styles$k = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -31208,335 +32555,6 @@ function BooleanFilterCore({
     })
   });
 }
-function useClickOutside(refOrRefs, handler) {
-  useEffect(() => {
-    const refs = Array.isArray(refOrRefs) ? refOrRefs : [refOrRefs];
-    let down = false;
-    const isInOneElement = (ref, event) => {
-      return !ref.current || event.target instanceof Element && ref.current.contains(event.target);
-    };
-    const isInElement = (event) => {
-      return refs.some((ref) => isInOneElement(ref, event));
-    };
-    const onMouseUp = (event) => {
-      if (!down || isInElement(event)) return;
-      handler(event);
-      down = false;
-    };
-    const onMouseDown = (event) => {
-      if (isInElement(event)) return;
-      down = true;
-    };
-    document.addEventListener("mouseup", onMouseUp);
-    document.addEventListener("mousedown", onMouseDown);
-    return () => {
-      document.removeEventListener("mouseup", onMouseUp);
-      document.removeEventListener("mousedown", onMouseDown);
-    };
-  }, [refOrRefs, handler]);
-}
-const PillInput = ({
-  values,
-  setValues,
-  autoFocus,
-  placeholder,
-  type = "text",
-  value: controlledValue,
-  setValue: setControlledValue,
-  focusElement,
-  color = DEFAULT_TOKEN_COLOR,
-  customStyle
-}) => {
-  const [uncontrolledValue, setUncontrolledValue] = useState("");
-  const [_focused, setFocused] = useState(false);
-  const inp = useRef(null);
-  const ref = useRef(null);
-  const [selectedPill, setSelectedPill] = useState(void 0);
-  const pillRefs = useRef([]);
-  const value = controlledValue || uncontrolledValue;
-  const setValue = setControlledValue || setUncontrolledValue;
-  const deletePill = useCallback((idx) => {
-    var _a2;
-    const newValues = [...values];
-    newValues.splice(idx, 1);
-    setValues(newValues);
-    if (selectedPill === 0) {
-      if (values.length === 1) {
-        setSelectedPill(void 0);
-        (_a2 = inp.current) == null ? void 0 : _a2.focus();
-      } else {
-        setSelectedPill(0);
-      }
-    } else {
-      setSelectedPill(idx - 1);
-    }
-  }, [selectedPill, setValues, values]);
-  const pills = useMemo(() => {
-    pillRefs.current = new Array(values.length);
-    return values.map((value2, index2) => /* @__PURE__ */ jsx(Pill, {
-      color,
-      onClick: () => {
-        setSelectedPill(index2);
-      },
-      onDelete: () => deletePill(index2),
-      forwardRef: (ref2) => {
-        pillRefs.current[index2] = ref2;
-      },
-      children: value2
-    }, value2));
-  }, [color, deletePill, values]);
-  useEffect(() => {
-    var _a2;
-    if (selectedPill !== void 0) {
-      (_a2 = pillRefs.current[selectedPill]) == null ? void 0 : _a2.focus();
-    }
-  }, [pills, selectedPill]);
-  const onKeyUp = (event) => {
-    var _a2, _b2;
-    if (event.key === "Backspace") {
-      if (selectedPill !== void 0) {
-        deletePill(selectedPill);
-      }
-    } else if (event.key === "ArrowRight") {
-      if (selectedPill === values.length - 1) {
-        setSelectedPill(void 0);
-        (_a2 = inp.current) == null ? void 0 : _a2.focus();
-      } else if (selectedPill !== void 0) {
-        setSelectedPill(selectedPill + 1);
-      }
-    } else if (event.key === "ArrowLeft") {
-      if (selectedPill !== void 0 && selectedPill > 0) {
-        setSelectedPill(selectedPill - 1);
-      }
-    } else {
-      (_b2 = inp.current) == null ? void 0 : _b2.focus();
-    }
-  };
-  const commitValue = () => {
-    if (value.length > 0 && !values.includes(value)) {
-      setValues([...values, value]);
-      setValue("");
-    }
-  };
-  useClickOutside(focusElement ? [ref, focusElement] : ref, () => {
-    setFocused(false);
-    commitValue();
-  });
-  return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$k.main),
-    children: /* @__PURE__ */ jsx(ScrollableArea, {
-      children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$k.content, customStyle),
-        onKeyUp,
-        onClick: () => {
-          var _a2;
-          return (_a2 = inp.current) == null ? void 0 : _a2.focus();
-        },
-        ref,
-        children: [pills, /* @__PURE__ */ jsx("input", {
-          ...{
-            className: "mly1gs6z28 mly1a2a7pz mly6icuqf mlyif65rj mlyayvuls mly83z2og mly1onzeue mly195ery5 mly1iyjqo2"
-          },
-          ref: inp,
-          type,
-          placeholder: values.length === 0 ? placeholder : "",
-          value,
-          size: 1,
-          onChange: (event) => {
-            setValue(event.target.value);
-          },
-          onKeyDown: (event) => {
-            if (event.key === "Enter") {
-              if (value !== "") {
-                commitValue();
-                event.stopPropagation();
-                event.preventDefault();
-              }
-            }
-          },
-          onKeyUp: (event) => {
-            var _a2, _b2, _c2, _d;
-            if (event.key === "Backspace") {
-              if (value === "" && values.length > 0) {
-                commitValue();
-                (_a2 = inp.current) == null ? void 0 : _a2.blur();
-                setSelectedPill(values.length - 1);
-              }
-            } else if (event.key === "ArrowLeft") {
-              if (((_b2 = inp.current) == null ? void 0 : _b2.selectionStart) === 0 || ((_c2 = inp.current) == null ? void 0 : _c2.selectionStart) === null) {
-                commitValue();
-                (_d = inp.current) == null ? void 0 : _d.blur();
-                setSelectedPill(values.length - 1);
-                event.preventDefault();
-                event.stopPropagation();
-              }
-            }
-          },
-          onFocus: () => {
-            setFocused(true);
-            setSelectedPill(void 0);
-          },
-          autoFocus
-        })]
-      })
-    })
-  });
-};
-const Pill = ({
-  children,
-  color = DEFAULT_TOKEN_COLOR,
-  forwardRef,
-  onClick,
-  onDelete
-}) => {
-  return /* @__PURE__ */ jsxs("div", {
-    onClick,
-    tabIndex: 0,
-    ref: forwardRef,
-    ..._stylex.props(styles$k.pill, colorVariants[color]),
-    children: [children, /* @__PURE__ */ jsx("div", {
-      title: "Remove",
-      ...{
-        className: "mly3nfvp2"
-      },
-      children: /* @__PURE__ */ jsx(SvgClear, {
-        onClick: () => onDelete(),
-        ...{
-          className: "mly6jxa94 mly1v9usgg"
-        }
-      })
-    })]
-  });
-};
-const styles$k = {
-  main: {
-    borderRadius: "mly12oqio5",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    border: "mlyvckdp7",
-    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,
-    padding: "mlybsehbd",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    display: "mlyrvj5dj",
-    minHeight: "mly2lwn1j",
-    $$css: true
-  },
-  content: {
-    outline: "mly1a2a7pz",
-    outlineColor: null,
-    outlineOffset: null,
-    outlineStyle: null,
-    outlineWidth: null,
-    display: "mly78zum5",
-    flexWrap: "mly1a02dak",
-    gap: "mly1ed6fcf",
-    rowGap: null,
-    columnGap: null,
-    borderColor: "mly1akygb0 mlyetl2wx",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
-    $$css: true
-  },
-  pill: {
-    backgroundColor: "mlyy9rfsq",
-    borderRadius: "mly1sxf85j",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    color: "mly1xre2ib",
-    display: "mly78zum5",
-    alignItems: "mly6s0dn4",
-    gap: "mly1nejdyq",
-    rowGap: null,
-    columnGap: null,
-    padding: "mly1e41zw8",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    textTransform: "mly6mezaz",
-    cursor: "mly1ypdohk",
-    height: "mly1qx5ct2",
-    whiteSpace: "mlyuxw1ft",
-    $$css: true
-  }
-};
-const colorVariants = {
-  default: {
-    "--mlyvygx4q": "mly1izbou4",
-    "--mly13n7235": "mly8bgh0r",
-    $$css: true
-  },
-  purple: {
-    "--mlyvygx4q": "mly1f8soc4",
-    "--mly13n7235": "mly1r5zvhd",
-    $$css: true
-  },
-  green: {
-    "--mlyvygx4q": "mlyf8wvcd",
-    "--mly13n7235": "mly1u6t2w6",
-    $$css: true
-  },
-  cyan: {
-    "--mlyvygx4q": "mlyrtwgpv",
-    "--mly13n7235": "mlys5r2en",
-    $$css: true
-  }
-};
 function useSearch(searchTerm, fieldPath) {
   const {
     topValues
@@ -31578,6 +32596,7 @@ function useSearch(searchTerm, fieldPath) {
 function ValueList({
   onClick,
   search,
+  filter,
   fieldPath,
   ref,
   customStyle,
@@ -31586,7 +32605,7 @@ function ValueList({
   const {
     searchResults
   } = useSearch(search, fieldPath);
-  const stringSearchResults = useMemo(() => searchResults && searchResults.filter((r2) => r2.fieldType === "string" && r2.fieldValue !== null).sort((a, b2) => b2.weight - a.weight).slice(0, 100), [searchResults]);
+  const stringSearchResults = useMemo(() => searchResults && searchResults.filter((r2) => r2.fieldType === "string" && r2.fieldValue !== null).filter((r2) => filter ? filter(r2.fieldValue ?? "") : true).sort((a, b2) => b2.weight - a.weight).slice(0, 100), [searchResults, filter]);
   return /* @__PURE__ */ jsx("div", {
     ref,
     ..._stylex.props(customStyle),
@@ -31797,7 +32816,8 @@ const StringFilterCore = ({
             }
           },
           customStyle: styles$i.valueList,
-          showPath: false
+          showPath: false,
+          filter: (value) => !currentFilter.values.includes(value)
         })
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsx(StringEditor, {
@@ -32121,11 +33141,8 @@ function makeFilterWithNewType(filter, type) {
   }
 }
 function typeFromFilter(filter) {
-  if (filter.operator === "null" && filter.not) {
-    return "-null";
-  }
-  if (filter.operator === "before" && filter.not) {
-    return "not_before";
+  if ((filter.operator === "null" || filter.operator === "after" || filter.operator === "before") && filter.not) {
+    return `-${filter.operator}`;
   }
   return filter.operator;
 }
@@ -32134,7 +33151,7 @@ function unitsFromFilter(filter, isDateTime) {
     return filter.units;
   } else if (filter.operator === "to") {
     return guessUnits(filter.fromMoment, isDateTime);
-  } else if (filter.operator === "before" && filter.before.moment === "literal") {
+  } else if (filter.operator === "before") {
     return guessUnits(filter.before, isDateTime);
   } else if (filter.operator === "after") {
     return guessUnits(filter.after, isDateTime);
@@ -32181,14 +33198,17 @@ const DateTimeFilterCore = ({
           value: "next",
           label: "next complete"
         }, {
-          value: "not_before",
-          label: "on or after"
+          value: "-before",
+          label: "starting"
         }, {
           value: "after",
           label: "after"
         }, {
           value: "before",
           label: "before"
+        }, {
+          value: "-after",
+          label: "through"
         }, {
           value: "in",
           label: "is"
@@ -32505,6 +33525,11 @@ function dateTimeFilterChangeType(filter, type, units) {
   let n = "7";
   let fromMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
   let toMoment = createTemporalLiteral(/* @__PURE__ */ new Date(), units);
+  let not = false;
+  if (type.startsWith("-")) {
+    type = type.slice(1);
+    not = true;
+  }
   switch (filter.operator) {
     case "in_last":
     case "last":
@@ -32537,18 +33562,14 @@ function dateTimeFilterChangeType(filter, type, units) {
     case "after":
       return {
         operator: type,
-        after: fromMoment
+        after: fromMoment,
+        not
       };
     case "before":
       return {
         operator: type,
-        before: fromMoment
-      };
-    case "not_before":
-      return {
-        operator: "before",
         before: fromMoment,
-        not: true
+        not
       };
     case "in":
       return {
@@ -32563,12 +33584,8 @@ function dateTimeFilterChangeType(filter, type, units) {
       };
     case "null":
       return {
-        operator: "null"
-      };
-    case "-null":
-      return {
-        operator: "null",
-        not: true
+        operator: type,
+        not
       };
   }
   return filter;
@@ -32820,7 +33837,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$h.fieldItem, styles$h.sticky),
         "data-disabled": "true",
         children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsx(FilterPopover, {
@@ -32886,6 +33903,17 @@ const styles$h = {
     paddingTop: "mly1y1aw1k",
     paddingBottom: "mlywib8y2",
     $$css: true
+  },
+  sticky: {
+    position: "mly7wzq59",
+    top: "mly13vifvy",
+    zIndex: "mly1vjfegm",
+    backgroundColor: "mly9nb4jr",
+    borderBottom: "mlyv3yj8d",
+    borderBottomWidth: null,
+    borderBottomStyle: null,
+    borderBottomColor: null,
+    $$css: true
   }
 };
 function FieldMenu({
@@ -33085,7 +34113,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$u.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -33118,308 +34146,6 @@ function OperationActionTitle({
     })]
   });
 }
-var DIALOG_NAME = "Dialog";
-var [createDialogContext, createDialogScope] = createContextScope(DIALOG_NAME);
-var [DialogProvider, useDialogContext] = createDialogContext(DIALOG_NAME);
-var Dialog = (props2) => {
-  const {
-    __scopeDialog,
-    children,
-    open: openProp,
-    defaultOpen,
-    onOpenChange,
-    modal = true
-  } = props2;
-  const triggerRef = React.useRef(null);
-  const contentRef = React.useRef(null);
-  const [open = false, setOpen] = useControllableState({
-    prop: openProp,
-    defaultProp: defaultOpen,
-    onChange: onOpenChange
-  });
-  return /* @__PURE__ */ jsx(
-    DialogProvider,
-    {
-      scope: __scopeDialog,
-      triggerRef,
-      contentRef,
-      contentId: useId(),
-      titleId: useId(),
-      descriptionId: useId(),
-      open,
-      onOpenChange: setOpen,
-      onOpenToggle: React.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
-      modal,
-      children
-    }
-  );
-};
-Dialog.displayName = DIALOG_NAME;
-var TRIGGER_NAME$1 = "DialogTrigger";
-var DialogTrigger = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, ...triggerProps } = props2;
-    const context = useDialogContext(TRIGGER_NAME$1, __scopeDialog);
-    const composedTriggerRef = useComposedRefs(forwardedRef, context.triggerRef);
-    return /* @__PURE__ */ jsx(
-      Primitive.button,
-      {
-        type: "button",
-        "aria-haspopup": "dialog",
-        "aria-expanded": context.open,
-        "aria-controls": context.contentId,
-        "data-state": getState(context.open),
-        ...triggerProps,
-        ref: composedTriggerRef,
-        onClick: composeEventHandlers(props2.onClick, context.onOpenToggle)
-      }
-    );
-  }
-);
-DialogTrigger.displayName = TRIGGER_NAME$1;
-var PORTAL_NAME = "DialogPortal";
-var [PortalProvider, usePortalContext] = createDialogContext(PORTAL_NAME, {
-  forceMount: void 0
-});
-var DialogPortal = (props2) => {
-  const { __scopeDialog, forceMount, children, container } = props2;
-  const context = useDialogContext(PORTAL_NAME, __scopeDialog);
-  return /* @__PURE__ */ jsx(PortalProvider, { scope: __scopeDialog, forceMount, children: React.Children.map(children, (child) => /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(Portal$5, { asChild: true, container, children: child }) })) });
-};
-DialogPortal.displayName = PORTAL_NAME;
-var OVERLAY_NAME = "DialogOverlay";
-var DialogOverlay = React.forwardRef(
-  (props2, forwardedRef) => {
-    const portalContext = usePortalContext(OVERLAY_NAME, props2.__scopeDialog);
-    const { forceMount = portalContext.forceMount, ...overlayProps } = props2;
-    const context = useDialogContext(OVERLAY_NAME, props2.__scopeDialog);
-    return context.modal ? /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: /* @__PURE__ */ jsx(DialogOverlayImpl, { ...overlayProps, ref: forwardedRef }) }) : null;
-  }
-);
-DialogOverlay.displayName = OVERLAY_NAME;
-var DialogOverlayImpl = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, ...overlayProps } = props2;
-    const context = useDialogContext(OVERLAY_NAME, __scopeDialog);
-    return (
-      // Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
-      // ie. when `Overlay` and `Content` are siblings
-      /* @__PURE__ */ jsx(ReactRemoveScroll, { as: Slot, allowPinchZoom: true, shards: [context.contentRef], children: /* @__PURE__ */ jsx(
-        Primitive.div,
-        {
-          "data-state": getState(context.open),
-          ...overlayProps,
-          ref: forwardedRef,
-          style: { pointerEvents: "auto", ...overlayProps.style }
-        }
-      ) })
-    );
-  }
-);
-var CONTENT_NAME$1 = "DialogContent";
-var DialogContent = React.forwardRef(
-  (props2, forwardedRef) => {
-    const portalContext = usePortalContext(CONTENT_NAME$1, props2.__scopeDialog);
-    const { forceMount = portalContext.forceMount, ...contentProps } = props2;
-    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
-    return /* @__PURE__ */ jsx(Presence, { present: forceMount || context.open, children: context.modal ? /* @__PURE__ */ jsx(DialogContentModal, { ...contentProps, ref: forwardedRef }) : /* @__PURE__ */ jsx(DialogContentNonModal, { ...contentProps, ref: forwardedRef }) });
-  }
-);
-DialogContent.displayName = CONTENT_NAME$1;
-var DialogContentModal = React.forwardRef(
-  (props2, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
-    const contentRef = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, context.contentRef, contentRef);
-    React.useEffect(() => {
-      const content = contentRef.current;
-      if (content) return hideOthers(content);
-    }, []);
-    return /* @__PURE__ */ jsx(
-      DialogContentImpl,
-      {
-        ...props2,
-        ref: composedRefs,
-        trapFocus: context.open,
-        disableOutsidePointerEvents: true,
-        onCloseAutoFocus: composeEventHandlers(props2.onCloseAutoFocus, (event) => {
-          var _a2;
-          event.preventDefault();
-          (_a2 = context.triggerRef.current) == null ? void 0 : _a2.focus();
-        }),
-        onPointerDownOutside: composeEventHandlers(props2.onPointerDownOutside, (event) => {
-          const originalEvent = event.detail.originalEvent;
-          const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
-          const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
-          if (isRightClick) event.preventDefault();
-        }),
-        onFocusOutside: composeEventHandlers(
-          props2.onFocusOutside,
-          (event) => event.preventDefault()
-        )
-      }
-    );
-  }
-);
-var DialogContentNonModal = React.forwardRef(
-  (props2, forwardedRef) => {
-    const context = useDialogContext(CONTENT_NAME$1, props2.__scopeDialog);
-    const hasInteractedOutsideRef = React.useRef(false);
-    const hasPointerDownOutsideRef = React.useRef(false);
-    return /* @__PURE__ */ jsx(
-      DialogContentImpl,
-      {
-        ...props2,
-        ref: forwardedRef,
-        trapFocus: false,
-        disableOutsidePointerEvents: false,
-        onCloseAutoFocus: (event) => {
-          var _a2, _b2;
-          (_a2 = props2.onCloseAutoFocus) == null ? void 0 : _a2.call(props2, event);
-          if (!event.defaultPrevented) {
-            if (!hasInteractedOutsideRef.current) (_b2 = context.triggerRef.current) == null ? void 0 : _b2.focus();
-            event.preventDefault();
-          }
-          hasInteractedOutsideRef.current = false;
-          hasPointerDownOutsideRef.current = false;
-        },
-        onInteractOutside: (event) => {
-          var _a2, _b2;
-          (_a2 = props2.onInteractOutside) == null ? void 0 : _a2.call(props2, event);
-          if (!event.defaultPrevented) {
-            hasInteractedOutsideRef.current = true;
-            if (event.detail.originalEvent.type === "pointerdown") {
-              hasPointerDownOutsideRef.current = true;
-            }
-          }
-          const target = event.target;
-          const targetIsTrigger = (_b2 = context.triggerRef.current) == null ? void 0 : _b2.contains(target);
-          if (targetIsTrigger) event.preventDefault();
-          if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
-            event.preventDefault();
-          }
-        }
-      }
-    );
-  }
-);
-var DialogContentImpl = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, trapFocus, onOpenAutoFocus, onCloseAutoFocus, ...contentProps } = props2;
-    const context = useDialogContext(CONTENT_NAME$1, __scopeDialog);
-    const contentRef = React.useRef(null);
-    const composedRefs = useComposedRefs(forwardedRef, contentRef);
-    useFocusGuards();
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(
-        FocusScope,
-        {
-          asChild: true,
-          loop: true,
-          trapped: trapFocus,
-          onMountAutoFocus: onOpenAutoFocus,
-          onUnmountAutoFocus: onCloseAutoFocus,
-          children: /* @__PURE__ */ jsx(
-            DismissableLayer,
-            {
-              role: "dialog",
-              id: context.contentId,
-              "aria-describedby": context.descriptionId,
-              "aria-labelledby": context.titleId,
-              "data-state": getState(context.open),
-              ...contentProps,
-              ref: composedRefs,
-              onDismiss: () => context.onOpenChange(false)
-            }
-          )
-        }
-      ),
-      /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(TitleWarning, { titleId: context.titleId }),
-        /* @__PURE__ */ jsx(DescriptionWarning, { contentRef, descriptionId: context.descriptionId })
-      ] })
-    ] });
-  }
-);
-var TITLE_NAME = "DialogTitle";
-var DialogTitle = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, ...titleProps } = props2;
-    const context = useDialogContext(TITLE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(Primitive.h2, { id: context.titleId, ...titleProps, ref: forwardedRef });
-  }
-);
-DialogTitle.displayName = TITLE_NAME;
-var DESCRIPTION_NAME = "DialogDescription";
-var DialogDescription = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, ...descriptionProps } = props2;
-    const context = useDialogContext(DESCRIPTION_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(Primitive.p, { id: context.descriptionId, ...descriptionProps, ref: forwardedRef });
-  }
-);
-DialogDescription.displayName = DESCRIPTION_NAME;
-var CLOSE_NAME = "DialogClose";
-var DialogClose = React.forwardRef(
-  (props2, forwardedRef) => {
-    const { __scopeDialog, ...closeProps } = props2;
-    const context = useDialogContext(CLOSE_NAME, __scopeDialog);
-    return /* @__PURE__ */ jsx(
-      Primitive.button,
-      {
-        type: "button",
-        ...closeProps,
-        ref: forwardedRef,
-        onClick: composeEventHandlers(props2.onClick, () => context.onOpenChange(false))
-      }
-    );
-  }
-);
-DialogClose.displayName = CLOSE_NAME;
-function getState(open) {
-  return open ? "open" : "closed";
-}
-var TITLE_WARNING_NAME = "DialogTitleWarning";
-var [WarningProvider, useWarningContext] = createContext2(TITLE_WARNING_NAME, {
-  contentName: CONTENT_NAME$1,
-  titleName: TITLE_NAME,
-  docsSlug: "dialog"
-});
-var TitleWarning = ({ titleId }) => {
-  const titleWarningContext = useWarningContext(TITLE_WARNING_NAME);
-  const MESSAGE = `\`${titleWarningContext.contentName}\` requires a \`${titleWarningContext.titleName}\` for the component to be accessible for screen reader users.
-
-If you want to hide the \`${titleWarningContext.titleName}\`, you can wrap it with our VisuallyHidden component.
-
-For more information, see https://radix-ui.com/primitives/docs/components/${titleWarningContext.docsSlug}`;
-  React.useEffect(() => {
-    if (titleId) {
-      const hasTitle = document.getElementById(titleId);
-      if (!hasTitle) console.error(MESSAGE);
-    }
-  }, [MESSAGE, titleId]);
-  return null;
-};
-var DESCRIPTION_WARNING_NAME = "DialogDescriptionWarning";
-var DescriptionWarning = ({ contentRef, descriptionId }) => {
-  const descriptionWarningContext = useWarningContext(DESCRIPTION_WARNING_NAME);
-  const MESSAGE = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${descriptionWarningContext.contentName}}.`;
-  React.useEffect(() => {
-    var _a2;
-    const describedById = (_a2 = contentRef.current) == null ? void 0 : _a2.getAttribute("aria-describedby");
-    if (descriptionId && describedById) {
-      const hasDescription = document.getElementById(descriptionId);
-      if (!hasDescription) console.warn(MESSAGE);
-    }
-  }, [MESSAGE, contentRef, descriptionId]);
-  return null;
-};
-var Root = Dialog;
-var Portal = DialogPortal;
-var Overlay = DialogOverlay;
-var Content$1 = DialogContent;
-var Title = DialogTitle;
-var Description = DialogDescription;
 function RenameDialog({
   rootQuery,
   view,
@@ -33453,29 +34179,19 @@ function RenameDialog({
     onOpenChange: setOpen,
     children: /* @__PURE__ */ jsx(Portal, {
       children: /* @__PURE__ */ jsx(Overlay, {
-        ...{
-          className: "mly5uxqc1 mlyixxii4 mly13vifvy mlyu96u03 mly3m8u43 mly1ey2m1c mlyrvj5dj mly1ku5rj1 mly11uqc5h"
-        },
+        ..._stylex.props(dialogStyles.overlay),
         children: /* @__PURE__ */ jsxs(Content$1, {
           ..._stylex.props(dialogStyles.content, fontStyles.body),
           children: [/* @__PURE__ */ jsxs(Description, {
-            ...{
-              className: "mly1s85apg"
-            },
+            ..._stylex.props(dialogStyles.displayNone),
             children: ["Rename ", target.name]
           }), /* @__PURE__ */ jsxs(Title, {
-            ...{
-              className: "mly1j61zf2 mly1ghz6dp"
-            },
+            ..._stylex.props(dialogStyles.title),
             children: ["Rename ", target.name]
           }), /* @__PURE__ */ jsxs("div", {
-            ...{
-              className: "mlyqyf9gi mly78zum5 mlydt5ytf mly167g77z"
-            },
+            ..._stylex.props(dialogStyles.editor),
             children: [/* @__PURE__ */ jsxs("div", {
-              ...{
-                className: "mly78zum5 mly167g77z"
-              },
+              ..._stylex.props(dialogStyles.editorRow),
               children: [/* @__PURE__ */ jsx("input", {
                 value: name,
                 onChange: (event) => setName(event.target.value),
@@ -33494,9 +34210,7 @@ function RenameDialog({
                 errorMessage: "Name already in use"
               })]
             }), /* @__PURE__ */ jsxs("div", {
-              ...{
-                className: "mly78zum5 mly167g77z"
-              },
+              ..._stylex.props(dialogStyles.editorRow),
               children: [/* @__PURE__ */ jsx(Button, {
                 label: "Cancel",
                 onClick: () => setOpen(false),
@@ -33515,92 +34229,6 @@ function RenameDialog({
     })
   });
 }
-const dialogStyles = {
-  content: {
-    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,
-    padding: "mlye8ttls",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    minWidth: "mlylm99nl",
-    maxWidth: "mly1jkqq1h",
-    gap: "mly167g77z",
-    rowGap: null,
-    columnGap: null,
-    $$css: true
-  },
-  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 SortableOperations({
   rootQuery,
   segment,
@@ -33662,7 +34290,7 @@ function SortableOperations({
       fields,
       ...props2
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$u.tokenContainer),
       children: /* @__PURE__ */ jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -33994,7 +34622,7 @@ const parsedToLabels = (parsed, filterString) => {
             const {
               not
             } = temporalClause;
-            op = `is${not ? " not" : ""} after`;
+            op = not ? "through" : "is after";
             value = displayTimeFromMoment(temporalClause.after);
           }
           break;
@@ -34003,7 +34631,7 @@ const parsedToLabels = (parsed, filterString) => {
             const {
               not
             } = temporalClause;
-            op = not ? "is on or after" : "is before";
+            op = not ? "starting" : "is before";
             value = displayTimeFromMoment(temporalClause.before);
           }
           break;
@@ -34087,10 +34715,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$u.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$u.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -34180,7 +34808,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$u.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -34230,10 +34858,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.title),
+      ..._stylex.props(styles$u.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.tokenContainer),
+      ..._stylex.props(styles$u.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -34783,7 +35411,7 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$s.tokenContainer),
+    ..._stylex.props(styles$u.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsx(NestOperation, {
       rootQuery,
       view,
@@ -35116,9 +35744,9 @@ function Source({
 }) {
   if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.queryCard, styles$b.content),
+      ..._stylex.props(styles$u.queryCard, styles$b.content),
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$s.labelWithIcon),
+        ..._stylex.props(styles$u.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsx("div", {
@@ -36743,7 +37371,10 @@ function FieldTokenWithActions({
           disabled: !!filterDisabledReason,
           onTooltipOpenChange: setIsTooltipOpen
         }),
-        onOpenChange: setIsFilterPopoverOpen
+        onOpenChange: setIsFilterPopoverOpen,
+        layoutProps: {
+          align: "start"
+        }
       }), /* @__PURE__ */ jsx(ActionButton, {
         icon: "orderBy",
         tooltip: orderByDisabledReason || "Add as order by",
@@ -36768,7 +37399,10 @@ function FieldTokenWithActions({
           disabled: !!filterDisabledReason,
           onTooltipOpenChange: setIsTooltipOpen
         }),
-        onOpenChange: setIsFilterPopoverOpen
+        onOpenChange: setIsFilterPopoverOpen,
+        layoutProps: {
+          align: "start"
+        }
       }), /* @__PURE__ */ jsx(ActionButton, {
         icon: "orderBy",
         tooltip: orderByDisabledReason || "Add as order by",