@malloydata/malloy-explorer 0.0.264-dev250418182827 → 0.0.266-dev250422000026

package/dist/esm/index.js

@@ -4991,6 +4991,8 @@ const SvgWarning = (props2) => /* @__PURE__ */ React.createElement("svg", { xmln
 const SvgCheckCircle = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "m424-296 282-282-56-56-226 226-114-114-56 56 170 170Zm56 216q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
 const SvgInfo = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" }));
 const SvgError = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" }));
+const SvgRefresh = (props2) => /* @__PURE__ */ React.createElement("svg", { height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("g", { fill: "none", stroke: "currentColor" }, /* @__PURE__ */ React.createElement("path", { d: "m17.08 11.15c.01.16.02.32.02.49 0 3.89-3.16 7.05-7.05 7.05-3.89-.01-7.05-3.16-7.05-7.06 0-3.89 3.16-7.05 7.05-7.05.85 0 1.66.15 2.41.42", strokeWidth: 1.1 }), /* @__PURE__ */ React.createElement("path", { d: "m9.9 2 2.89 2.89-3 3.01" })));
+const SvgSidebarCollapse = (props2) => /* @__PURE__ */ React.createElement("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", stroke: "none", ...props2 }, /* @__PURE__ */ React.createElement("path", { fill: "currentColor", stroke: "none", d: "m20 24h-16c-2.2 0-4-1.8-4-4v-16c0-2.2 1.8-4 4-4h16c2.2 0 4 1.8 4 4v16c0 2.2-1.8 4-4 4zm-16-22c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m8 24c-.6 0-1-.4-1-1v-22c0-.6.4-1 1-1s1 .4 1 1v22c0 .6-.4 1-1 1z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m14 13c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l3-3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-3 3c-.2.2-.4.3-.7.3z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m17 16c-.3 0-.5-.1-.7-.3l-3-3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l3 3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z" }));
 const SvgVizBarChart = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "0 0 110 110", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_bar_chart", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "Group-3", transform: "translate(20.000000, 24.000000)", fill: "currentColor" }, /* @__PURE__ */ React.createElement("g", { id: "Group-2", transform: "translate(34.500000, 31.000000) rotate(-270.000000) translate(-34.500000, -31.000000) translate(3.500000, -3.500000)" }, /* @__PURE__ */ React.createElement("path", { d: "M-26.056314,30.056314 L34.943686,30.056314 C37.152825,30.056314 38.943686,31.847175 38.943686,34.056314 L38.943686,34.943686 C38.943686,37.152825 37.152825,38.943686 34.943686,38.943686 L-26.056314,38.943686 C-28.265453,38.943686 -30.056314,37.152825 -30.056314,34.943686 L-30.056314,34.056314 C-30.056314,31.847175 -28.265453,30.056314 -26.056314,30.056314 Z", id: "Rectangle-Copy-59", transform: "translate(4.443686, 34.500000) rotate(-90.000000) translate(-4.443686, -34.500000) " }), /* @__PURE__ */ React.createElement("path", { d: "M-0.491247385,37.8466366 L44.9281075,37.8466366 C47.1372465,37.8466366 48.9281075,39.6374976 48.9281075,41.8466366 L48.9281075,42.7340086 C48.9281075,44.9431476 47.1372465,46.7340086 44.9281075,46.7340086 L-0.491247385,46.7340086 C-2.70038638,46.7340086 -4.49124739,44.9431476 -4.49124739,42.7340086 L-4.49124739,41.8466366 C-4.49124739,39.6374976 -2.70038638,37.8466366 -0.491247385,37.8466366 Z", id: "Rectangle-Copy-62", transform: "translate(22.218430, 42.290323) rotate(-90.000000) translate(-22.218430, -42.290323) " }), /* @__PURE__ */ React.createElement("path", { d: "M23.3837854,43.9469253 L56.6025627,43.9469253 C58.8117017,43.9469253 60.6025627,45.7377863 60.6025627,47.9469253 L60.6025627,48.8342973 C60.6025627,51.0434363 58.8117017,52.8342973 56.6025627,52.8342973 L23.3837854,52.8342973 C21.1746464,52.8342973 19.3837854,51.0434363 19.3837854,48.8342973 L19.3837854,47.9469253 C19.3837854,45.7377863 21.1746464,43.9469253 23.3837854,43.9469253 Z", id: "Rectangle-Copy-66", transform: "translate(39.993174, 48.390611) rotate(-90.000000) translate(-39.993174, -48.390611) " }), /* @__PURE__ */ React.createElement("path", { d: "M46.7286345,49.7286345 L68.8072017,49.7286345 C71.0163407,49.7286345 72.8072017,51.5194955 72.8072017,53.7286345 L72.8072017,54.1927983 C72.8072017,56.4019373 71.0163407,58.1927983 68.8072017,58.1927983 L46.7286345,58.1927983 C44.5194955,58.1927983 42.7286345,56.4019373 42.7286345,54.1927983 L42.7286345,53.7286345 C42.7286345,51.5194955 44.5194955,49.7286345 46.7286345,49.7286345 Z", id: "Rectangle-Copy-67", transform: "translate(57.767918, 53.960716) rotate(-90.000000) translate(-57.767918, -53.960716) " })))));
 const SvgVizBoolean = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "0 0 110 110", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_boolean", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414-2", transform: "translate(20.000000, 22.000000)", fill: "currentColor", fillRule: "nonzero" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414" }, /* @__PURE__ */ React.createElement("path", { d: "M15.2972028,30.8 L54.7027972,30.8 C63.151209,30.8 70,23.9051851 70,15.4 C70,6.89481485 63.151209,0 54.7027972,0 L15.2972028,0 C6.84879098,0 0,6.89481485 0,15.4 C0,23.9051851 6.84879098,30.8 15.2972028,30.8 Z M15.2972028,6.16 L54.7027972,6.16 C59.7718443,6.16 63.8811189,10.2968889 63.8811189,15.4 C63.8811189,20.5031111 59.7718443,24.64 54.7027972,24.64 L15.2972028,24.64 C10.2281557,24.64 6.11888112,20.5031111 6.11888112,15.4 C6.11888112,10.2968889 10.2281557,6.16 15.2972028,6.16 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M19.6340542,21.9997804 C22.2930484,22.0215224 24.7022661,20.4273668 25.7348338,17.9629544 C26.7674016,15.4985421 26.2191958,12.6510518 24.3466309,10.7523518 C22.474066,8.85365189 19.6473211,8.27908795 17.1885612,9.29740315 C14.7298014,10.3157183 13.125,12.7256064 13.125,15.3998806 C13.125,19.0240523 16.0305897,21.9703156 19.6340542,21.9997804 L19.6340542,21.9997804 Z", id: "Path" }), /* @__PURE__ */ React.createElement("path", { d: "M54.7027971,35.2 L15.2972025,35.2 C6.84879081,35.2 0,42.094815 0,50.6 C0,59.105185 6.84879081,66 15.2972025,66 L54.7027971,66 C63.151209,66 70,59.1051851 70,50.6 C70,42.0948149 63.151209,35.2 54.7027971,35.2 L54.7027971,35.2 Z M54.7027971,59.84 L15.2972025,59.84 C10.2281554,59.84 6.11888082,55.7031111 6.11888082,50.6 C6.11888082,45.4968889 10.2281554,41.36 15.2972025,41.36 L54.7027971,41.36 C59.7718442,41.36 63.8811189,45.4968889 63.8811189,50.6 C63.8811189,55.7031111 59.7718442,59.84 54.7027971,59.84 L54.7027971,59.84 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M50.3659458,44.0002196 C47.7069516,43.9784776 45.2977339,45.5726332 44.2651662,48.0370456 C43.2325984,50.5014579 43.7808042,53.3489482 45.6533691,55.2476482 C47.525934,57.1463481 50.3526789,57.720912 52.8114388,56.7025969 C55.2701986,55.6842817 56.875,53.2743936 56.875,50.6001194 C56.875,46.9759477 53.9694103,44.0296844 50.3659458,44.0002196 Z", id: "Path" })))));
 const SvgVizColumnChart = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "0 0 110 110", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_column_chart", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "Group", transform: "translate(23.500000, 19.500000)", fill: "currentColor" }, /* @__PURE__ */ React.createElement("path", { d: "M-26.5,30.5 L35.5,30.5 C37.709139,30.5 39.5,32.290861 39.5,34.5 L39.5,35.5 C39.5,37.709139 37.709139,39.5 35.5,39.5 L-26.5,39.5 C-28.709139,39.5 -30.5,37.709139 -30.5,35.5 L-30.5,34.5 C-30.5,32.290861 -28.709139,30.5 -26.5,30.5 Z", id: "Rectangle-Copy-59", transform: "translate(4.500000, 35.000000) rotate(-90.000000) translate(-4.500000, -35.000000) " }), /* @__PURE__ */ React.createElement("path", { d: "M-0.5,38.5 L45.5,38.5 C47.709139,38.5 49.5,40.290861 49.5,42.5 L49.5,43.5 C49.5,45.709139 47.709139,47.5 45.5,47.5 L-0.5,47.5 C-2.709139,47.5 -4.5,45.709139 -4.5,43.5 L-4.5,42.5 C-4.5,40.290861 -2.709139,38.5 -0.5,38.5 Z", id: "Rectangle-Copy-62", transform: "translate(22.500000, 43.000000) rotate(-90.000000) translate(-22.500000, -43.000000) " }), /* @__PURE__ */ React.createElement("path", { d: "M23.5,45.5 L57.5,45.5 C59.709139,45.5 61.5,47.290861 61.5,49.5 L61.5,50.5 C61.5,52.709139 59.709139,54.5 57.5,54.5 L23.5,54.5 C21.290861,54.5 19.5,52.709139 19.5,50.5 L19.5,49.5 C19.5,47.290861 21.290861,45.5 23.5,45.5 Z", id: "Rectangle-Copy-66", transform: "translate(40.500000, 50.000000) rotate(-90.000000) translate(-40.500000, -50.000000) " }), /* @__PURE__ */ React.createElement("path", { d: "M47.5,50.5 L70.5,50.5 C72.709139,50.5 74.5,52.290861 74.5,54.5 L74.5,55.5 C74.5,57.709139 72.709139,59.5 70.5,59.5 L47.5,59.5 C45.290861,59.5 43.5,57.709139 43.5,55.5 L43.5,54.5 C43.5,52.290861 45.290861,50.5 47.5,50.5 Z", id: "Rectangle-Copy-67", transform: "translate(59.000000, 55.000000) rotate(-90.000000) translate(-59.000000, -55.000000) " }))));
@@ -5028,6 +5030,8 @@ const ICON_MAP = {
   check_circle: SvgCheckCircle,
   info: SvgInfo,
   error: SvgError,
+  refresh: SvgRefresh,
+  sidebarCollapse: SvgSidebarCollapse,
   // Operations
   aggregate: SvgInsertMeasure,
   dimension: SvgTypeIconString,
@@ -5094,10 +5098,10 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$F.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$F.scaleUp, customStyle)
+    ..._stylex.props(styles$G.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$G.scaleUp, customStyle)
   });
 }
-const styles$F = {
+const styles$G = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -5170,17 +5174,17 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$E.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$F.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.badge, styles$E.label),
+      ..._stylex.props(fontStyles.badge, styles$F.label),
       children: label
     })]
   });
 }
-const styles$E = {
+const styles$F = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -5262,10 +5266,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$D.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$E.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$D = {
+const styles$E = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -5318,7 +5322,7 @@ function ListItem({
     children: [startIcon && /* @__PURE__ */ jsx(Fragment, {
       children: startIcon
     }), /* @__PURE__ */ jsx("span", {
-      ..._stylex.props(fontStyles.body, styles$C.label),
+      ..._stylex.props(fontStyles.body, styles$D.label),
       children: label
     }), badge && /* @__PURE__ */ jsx(Fragment, {
       children: badge
@@ -5327,7 +5331,7 @@ function ListItem({
     })]
   });
 }
-const styles$C = {
+const styles$D = {
   label: {
     flexGrow: "mly1iyjqo2",
     $$css: true
@@ -6102,7 +6106,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$B.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$C.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     ...onClick && {
       onClick: (e) => {
         e.preventDefault();
@@ -6118,9 +6122,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$B.icon
+        customStyle: styles$C.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$B.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$C.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -6147,7 +6151,7 @@ function Button({
     return button;
   }
 }
-const styles$B = {
+const styles$C = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -6269,7 +6273,8 @@ const sizeVariants$1 = {
 };
 const tokenStyles = {
   main: {
-    display: "mly78zum5",
+    display: "mlywz0xwf",
+    gridAutoFlow: "mly1mt1orb",
     alignItems: "mly6s0dn4",
     justifyContent: "mlyl56j7k",
     gap: "mly167g77z",
@@ -6326,6 +6331,7 @@ const tokenStyles = {
     overflow: "mlyb3r6kr",
     overflowX: null,
     overflowY: null,
+    whiteSpace: "mlyuxw1ft",
     $$css: true
   }
 };
@@ -6394,7 +6400,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$A.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$B.nonInteractive, customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       customStyle: tokenStyles.icon
@@ -6429,7 +6435,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$A = {
+const styles$B = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -6453,7 +6459,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$z.main, customStyle),
+    ..._stylex.props(styles$A.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -6464,16 +6470,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$z.onlyChild;
-  if (index2 === 0) return styles$z.firstChild;
-  if (index2 === count2 - 1) return styles$z.lastChild;
-  return styles$z.innerChild;
+  if (count2 === 1) return styles$A.onlyChild;
+  if (index2 === 0) return styles$A.firstChild;
+  if (index2 === count2 - 1) return styles$A.lastChild;
+  return styles$A.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$z = {
+const styles$A = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -6545,7 +6551,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$y.errorIcon
+          customStyle: styles$z.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -6558,7 +6564,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$y = {
+const styles$z = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -6603,22 +6609,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$x.focused, !!errorMessage && styles$x.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$y.focused, !!errorMessage && styles$y.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$x.icon
+        customStyle: styles$y.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$x.placeholder),
+          ..._stylex.props(fontStyles.body, styles$y.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$x.input, fontStyles.body),
+          ..._stylex.props(styles$y.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -6643,7 +6649,7 @@ function EditableToken({
     })]
   });
 }
-const styles$x = {
+const styles$y = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7987,12 +7993,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$w.main, isFocused && styles$w.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$x.main, isFocused && styles$x.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$w.input),
+      ..._stylex.props(fontStyles.body, styles$x.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -8000,7 +8006,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$w.actionButton, value === "" && styles$w.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$x.actionButton, value === "" && styles$x.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -8008,7 +8014,7 @@ function TextInput({
     })]
   });
 }
-const styles$w = {
+const styles$x = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -8217,7 +8223,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$v.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
+      ..._stylex.props(tokenStyles.main, styles$w.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8246,7 +8252,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$v.searchInput,
+            customStyle: styles$w.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8279,21 +8285,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$v.selectItem),
+    ..._stylex.props(fontStyles.body, styles$w.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$v.radioChecked
+      customStyle: styles$w.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$v.radioUnchecked
+      customStyle: styles$w.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$v = {
+const styles$w = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8383,7 +8389,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$u.container, customStyle),
+    ..._stylex.props(styles$v.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8397,7 +8403,7 @@ function Card({
     })]
   });
 }
-const styles$u = {
+const styles$v = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8488,10 +8494,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$t.label),
+          ..._stylex.props(fontStyles.body, styles$u.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$t.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
           children: sublabel
         })]
       })]
@@ -8503,7 +8509,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$t = {
+const styles$u = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19313,7 +19319,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$s.root, customStyle),
+    ..._stylex.props(styles$t.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19333,7 +19339,7 @@ function Spinner({
     })
   });
 }
-const styles$s = {
+const styles$t = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -23732,7 +23738,7 @@ const Popover = ({
     })
   });
 };
-const styles$r = {
+const styles$s = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23783,7 +23789,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$r.wrapper, customStyle),
+    ..._stylex.props(styles$s.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23850,7 +23856,7 @@ function SelectList({
 }) {
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$r.selectListDiv, customStyle),
+    ..._stylex.props(styles$s.selectListDiv, customStyle),
     children: options.reduce((result, option2, index2) => {
       const isSelected = value !== void 0 && valueEqual(value, option2.value);
       if (option2.divider) {
@@ -23882,8 +23888,8 @@ function SelectList({
         }), /* @__PURE__ */ jsx(Icon, {
           name: "checkmark",
           customStyle: {
-            ...styles$r.checkIcon,
-            ...isSelected ? styles$r.checkIconSelected : void 0
+            ...styles$s.checkIcon,
+            ...isSelected ? styles$s.checkIconSelected : void 0
           }
         }), /* @__PURE__ */ jsx("span", {
           ...{
@@ -23993,7 +23999,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$q.outer, customStyle),
+    ..._stylex.props(styles$r.outer, customStyle),
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mly1q0g3np mly1qughib mly1nejdyq mlyu06os2"
@@ -24308,7 +24314,7 @@ function DatePicker({
     })]
   });
 }
-const styles$q = {
+const styles$r = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24394,7 +24400,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$p.header, variantColors[variant], children ? styles$p.headerWithContent : null),
+      ..._stylex.props(styles$q.header, variantColors[variant], children ? styles$q.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24407,22 +24413,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$p.title, fontStyles.emphasized),
+          ..._stylex.props(styles$q.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$p.description, fontStyles.supporting),
+          ..._stylex.props(styles$q.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.content, fontStyles.body),
+      ..._stylex.props(styles$q.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$p = {
+const styles$q = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -25857,7 +25863,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$o.content),
+        ..._stylex.props(fontStyles.body, styles$p.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25884,16 +25890,16 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$o.icon
+      customStyle: styles$p.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$o.label),
+        ..._stylex.props(fontStyles.body, styles$p.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$o.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$p.sublabel),
         children: sublabel
       })]
     })]
@@ -25914,21 +25920,21 @@ function DropdownSubMenuItem({
       disabled,
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$o.icon
+        customStyle: styles$p.icon
       }), /* @__PURE__ */ jsxs("div", {
         ...{
           className: "mly78zum5 mlydt5ytf mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$o.label),
+          ..._stylex.props(fontStyles.body, styles$p.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$o.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$p.sublabel),
           children: sublabel
         })]
       }), /* @__PURE__ */ jsx(Icon, {
         name: "chevronRight",
-        customStyle: styles$o.icon
+        customStyle: styles$p.icon
       })]
     }), /* @__PURE__ */ jsx(SubContent2, {
       ...{
@@ -25943,11 +25949,11 @@ function DropdownMenuLabel({
   label
 }) {
   return /* @__PURE__ */ jsx(Label2, {
-    ..._stylex.props(fontStyles.supporting, styles$o.menuLabel),
+    ..._stylex.props(fontStyles.supporting, styles$p.menuLabel),
     children: label
   });
 }
-const styles$o = {
+const styles$p = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -26056,6 +26062,76 @@ const filterStyles = {
     rowGap: null,
     columnGap: null,
     $$css: true
+  },
+  editor: {
+    width: "mlyxsgkw5",
+    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 typeFromFilter$3(filter) {
@@ -26078,7 +26154,8 @@ function BooleanFilterCore({
     };
     setFilter(filter2);
   };
-  return /* @__PURE__ */ jsx(Fragment, {
+  return /* @__PURE__ */ jsx("div", {
+    ..._stylex.props(filterStyles.editor),
     children: /* @__PURE__ */ jsx(SelectDropdown, {
       value: type,
       onChange: onChangeType,
@@ -26207,7 +26284,7 @@ const PillInput = ({
     }
   };
   const commitValue = () => {
-    if (value.length > 0) {
+    if (value.length > 0 && !values.includes(value)) {
       setValues([...values, value]);
       setValue("");
     }
@@ -26217,7 +26294,7 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$n.outer, customStyle),
+    ..._stylex.props(styles$o.outer, customStyle),
     onKeyUp,
     onClick: () => {
       var _a2;
@@ -26282,7 +26359,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$n.pill, colorVariants[color]),
+    ..._stylex.props(styles$o.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -26297,7 +26374,7 @@ const Pill = ({
     })]
   });
 };
-const styles$n = {
+const styles$o = {
   outer: {
     fontFamily: "mly6icuqf",
     fontSize: "mlyif65rj",
@@ -26563,7 +26640,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$m.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$n.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -26587,10 +26664,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$m.token
+    customStyle: styles$n.token
   });
 }
-const styles$m = {
+const styles$n = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -26689,7 +26766,8 @@ const StringFilterCore = ({
     setCurrentFilter(newFilter);
     setFilter(newFilter);
   };
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs("div", {
+    ..._stylex.props(filterStyles.editor),
     children: [/* @__PURE__ */ jsx(SelectDropdown, {
       value: type,
       onChange: changeType,
@@ -26760,7 +26838,7 @@ const StringFilterCore = ({
             setSearchValue("");
           }
         },
-        customStyle: styles$l.valueList
+        customStyle: styles$m.valueList
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsx(StringEditor, {
       values: currentFilter.escaped_values,
@@ -26827,7 +26905,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$l = {
+const styles$m = {
   valueList: {
     maxHeight: "mly1hkcv85",
     overflow: "mlyysyzu8",
@@ -26836,6 +26914,9 @@ const styles$l = {
     $$css: true
   }
 };
+const isRangeOperator = (operator) => {
+  return operator === "range";
+};
 const NumberFilterFragments = {
   is_equal_to: {
     operator: "="
@@ -26856,7 +26937,11 @@ const NumberFilterFragments = {
   is_less_than_or_equal_to: {
     operator: "<="
   },
-  // is_between: {operator: 'to'},
+  is_between: {
+    operator: "range",
+    startOperator: ">=",
+    endOperator: "<="
+  },
   is_null: {
     operator: "null"
   },
@@ -26885,7 +26970,7 @@ const NumberFilterCore = ({
     operator: "=",
     values: []
   });
-  const [innerValues, setInnerValues] = useState(["0"]);
+  const [innerValues, setInnerValues] = useState(isRangeOperator(filter.operator) ? ["0", "0"] : ["0"]);
   const [errorMessage, setErrorMessage] = useState("");
   const changeType = (type2) => {
     const maybeNumberCondition = filter;
@@ -26899,19 +26984,23 @@ const NumberFilterCore = ({
   const type = typeFromFilter$1(filter);
   useEffect(() => {
     setErrorMessage("");
-    const maybeNumberCondition = filter;
-    if (maybeNumberCondition.values) {
-      let values = maybeNumberCondition.values;
-      if (!values || values.length === 0) {
-        values = ["0"];
-      }
-      setInnerValues(values);
+    if (isRangeOperator(filter.operator)) {
+      const numberRange = filter;
+      setInnerValues([numberRange.startValue, numberRange.endValue]);
     } else {
-      setInnerValues(["0"]);
+      const maybeNumberCondition = filter;
+      if (maybeNumberCondition.values) {
+        let values = maybeNumberCondition.values;
+        if (!values || values.length === 0) {
+          values = ["0"];
+        }
+        setInnerValues(values);
+      } else {
+        setInnerValues(["0"]);
+      }
     }
   }, [filter]);
   const validateAndUpdateValues = (values) => {
-    const numberCondition = filter;
     setInnerValues(values);
     const hasInvalidValues = values.some((v2) => {
       return isNaN(parseFloat(v2));
@@ -26922,10 +27011,22 @@ const NumberFilterCore = ({
       setErrorMessage("Requires at least one numeric value.");
     } else {
       setErrorMessage("");
-      setFilter({
-        ...numberCondition,
-        values
-      });
+      if (filter.operator === "range") {
+        const numberCondition = filter;
+        setFilter({
+          ...numberCondition,
+          startOperator: ">=",
+          startValue: values[0],
+          endOperator: "<=",
+          endValue: values[1]
+        });
+      } else {
+        const numberCondition = filter;
+        setFilter({
+          ...numberCondition,
+          values
+        });
+      }
     }
   };
   return /* @__PURE__ */ jsxs(Fragment, {
@@ -26950,6 +27051,9 @@ const NumberFilterCore = ({
       }, {
         value: "is_less_than_or_equal_to",
         label: "is less than or equal to"
+      }, {
+        value: "is_between",
+        label: "between"
       }, {
         value: "is_null",
         label: "is null"
@@ -26980,6 +27084,23 @@ function getEditor(filter, innerValues, validateAndUpdateValues) {
         setValue: (value) => validateAndUpdateValues([value]),
         type: "number"
       });
+    case "range":
+      return /* @__PURE__ */ jsxs("div", {
+        ...{
+          className: "mlyrvj5dj mly15396mt mly167g77z mlypqajaz"
+        },
+        children: [/* @__PURE__ */ jsx(SingleNumberEditor, {
+          value: innerValues[0],
+          setValue: (value) => validateAndUpdateValues([value, innerValues[1]]),
+          type: "number"
+        }), /* @__PURE__ */ jsx("span", {
+          children: "to"
+        }), /* @__PURE__ */ jsx(SingleNumberEditor, {
+          value: innerValues[1],
+          setValue: (value) => validateAndUpdateValues([innerValues[0], value]),
+          type: "number"
+        })]
+      });
   }
   return null;
 }
@@ -27030,6 +27151,12 @@ function makeFilterWithNewType(filter, type) {
       return {
         ...NumberFilterFragments[type]
       };
+    case "is_between":
+      return {
+        ...NumberFilterFragments[type],
+        startValue: values.length > 0 ? values[0] : "0",
+        endValue: values.length > 1 ? values[1] : "0"
+      };
   }
 }
 const formats = {
@@ -27069,7 +27196,7 @@ const DateInput = ({
     setTempValue(hooks(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$k.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$l.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -27103,7 +27230,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$k = {
+const styles$l = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -27151,13 +27278,9 @@ const DateTimeFilterCore = ({
   const maxLevel = isDateTime ? "second" : "day";
   const type = typeFromFilter(currentFilter);
   return /* @__PURE__ */ jsxs("div", {
-    ...{
-      className: "mlyxsgkw5 mly78zum5 mlydt5ytf mly167g77z"
-    },
+    ..._stylex.props(filterStyles.editor),
     children: [/* @__PURE__ */ jsxs("div", {
-      ...{
-        className: "mly78zum5 mly167g77z"
-      },
+      ..._stylex.props(filterStyles.editorRow),
       children: [/* @__PURE__ */ jsx(SelectDropdown, {
         value: type,
         onChange: changeType,
@@ -27186,7 +27309,7 @@ const DateTimeFilterCore = ({
           value: "-null",
           label: "not null"
         }],
-        customStyle: styles$j.editorCell
+        customStyle: filterStyles.editorCell
       }), getTopEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel)]
     }), getBottomEditorRow(currentFilter, updateFilter, units, setUnits, maxLevel)]
   });
@@ -27294,15 +27417,13 @@ function NUnitFilter({
     children: [/* @__PURE__ */ jsx("input", {
       type: "number",
       value: n,
-      ...{
-        className: "mly2yh2zd mlyizdh9v mly9cpjcd mly1sxf85j mly1iyjqo2"
-      },
+      ..._stylex.props(filterStyles.input, filterStyles.editorCell),
       onChange: updateN
     }), /* @__PURE__ */ jsx(SelectDropdown, {
       options,
       value: units,
       onChange: updateUnits,
-      customStyle: styles$j.editorCell
+      customStyle: filterStyles.editorCell
     })]
   });
 }
@@ -27316,7 +27437,7 @@ function UnitFilter({
     options,
     value: units,
     onChange: setUnits,
-    customStyle: styles$j.editorCell
+    customStyle: filterStyles.editorCell
   });
 }
 function SingleDateFilter({
@@ -27335,28 +27456,24 @@ function SingleDateFilter({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly78zum5 mly167g77z"
-      },
+      ..._stylex.props(filterStyles.editorRow),
       children: /* @__PURE__ */ jsx(DateInput, {
         value: date,
         setValue: updateDate,
         units,
         customStyle: {
-          ...styles$j.input,
-          ...styles$j.editorCell
+          ...filterStyles.input,
+          ...filterStyles.editorCell
         }
       })
     }), /* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly78zum5 mly167g77z"
-      },
+      ..._stylex.props(filterStyles.editorRow),
       children: /* @__PURE__ */ jsx(DatePicker, {
         value: date,
         setValue: updateDate,
         units,
         maxLevel,
-        customStyle: styles$j.editorCell
+        customStyle: filterStyles.editorCell
       })
     })]
   });
@@ -27407,16 +27524,14 @@ function DoubleDateFilter({
   };
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs("div", {
-      ...{
-        className: "mly78zum5 mly167g77z"
-      },
+      ..._stylex.props(filterStyles.editorRow),
       children: [/* @__PURE__ */ jsx(DateInput, {
         value: fromDate,
         setValue: updateFromDate,
         units,
         customStyle: {
-          ...styles$j.input,
-          ...styles$j.editorCell
+          ...filterStyles.input,
+          ...filterStyles.editorCell
         },
         onFocus: () => updateFocusedDate("from"),
         isActive: focusedDate === "from"
@@ -27425,22 +27540,20 @@ function DoubleDateFilter({
         setValue: updateToDate,
         units,
         customStyle: {
-          ...styles$j.input,
-          ...styles$j.editorCell
+          ...filterStyles.input,
+          ...filterStyles.editorCell
         },
         onFocus: () => updateFocusedDate("to"),
         isActive: focusedDate === "to"
       })]
     }), /* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly78zum5 mly167g77z"
-      },
+      ..._stylex.props(filterStyles.editorRow),
       children: /* @__PURE__ */ jsx(DatePicker, {
         value: date,
         setValue: updateDate,
         units,
         maxLevel,
-        customStyle: styles$j.editorCell
+        customStyle: filterStyles.editorCell
       })
     })]
   });
@@ -27516,62 +27629,6 @@ function dateTimeFilterChangeType(filter, type, units) {
   }
   return filter;
 }
-const styles$j = {
-  editorCell: {
-    flexGrow: "mly1iyjqo2",
-    $$css: true
-  },
-  input: {
-    border: "mly2yh2zd",
-    borderWidth: null,
-    borderInlineWidth: null,
-    borderInlineStartWidth: null,
-    borderLeftWidth: null,
-    borderInlineEndWidth: null,
-    borderRightWidth: null,
-    borderBlockWidth: null,
-    borderTopWidth: null,
-    borderBottomWidth: null,
-    borderStyle: null,
-    borderInlineStyle: null,
-    borderInlineStartStyle: null,
-    borderLeftStyle: null,
-    borderInlineEndStyle: null,
-    borderRightStyle: null,
-    borderBlockStyle: null,
-    borderTopStyle: null,
-    borderBottomStyle: null,
-    borderColor: null,
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
-    color: "mlyizdh9v",
-    padding: "mly9cpjcd",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    borderRadius: "mly1sxf85j",
-    borderStartStartRadius: null,
-    borderStartEndRadius: null,
-    borderEndStartRadius: null,
-    borderEndEndRadius: null,
-    borderTopLeftRadius: null,
-    borderTopRightRadius: null,
-    borderBottomLeftRadius: null,
-    borderBottomRightRadius: null,
-    $$css: true
-  }
-};
 function FilterDialog({
   fieldInfo,
   path,
@@ -27714,9 +27771,12 @@ function useFilterModal({
       middleware: [offset$1({
         mainAxis: 3,
         crossAxis: 3
-      }), flip({
-        boundary: document.body
-      })]
+      }), shift({
+        boundary: document.body,
+        crossAxis: true,
+        padding: 10
+      })],
+      whileElementsMounted: autoUpdate
     });
     return /* @__PURE__ */ jsx(Root$2, {
       open,
@@ -27855,12 +27915,10 @@ function QueryActionBar({
   };
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mly78zum5 mly1qughib mly6s0dn4 mly1vjfegm"
+      className: "mly78zum5 mly1qughib mly6s0dn4 mly153ncpu"
     },
     children: [/* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly6icuqf mly117nqv4 mly1j61zf2"
-      },
+      ..._stylex.props(fontStyles.largeBody, styles$k.title),
       children: "Query"
     }), /* @__PURE__ */ jsxs("div", {
       ...{
@@ -27895,7 +27953,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$i = {
+const styles$k = {
+  title: {
+    fontWeight: "mly1xlr1w8",
+    $$css: true
+  }
+};
+const styles$j = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -28087,6 +28151,21 @@ function getSegmentIfPresent(parent) {
   }
   return void 0;
 }
+const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map", "sparkline"];
+const ATOMIC_RENDERERS = ["number", "boolean", "currency", "image", "url", "percent", "text", "time"];
+const RENDERERS = [...QUERY_RENDERERS, ...ATOMIC_RENDERERS];
+function tagToRenderer(tag) {
+  if (tag) {
+    const tagProps = tag.getProperties();
+    const tags = Object.keys(tagProps);
+    for (const tag2 of tags) {
+      if (RENDERERS.includes(tag2) && !tagProps[tag2].deleted) {
+        return tag2;
+      }
+    }
+  }
+  return null;
+}
 function atomicTypeToIcon(type) {
   return atomicTypeMap[type];
 }
@@ -28112,6 +28191,11 @@ function fieldToIcon(field) {
 function relationshipToIcon(relationship) {
   return relationshipMap[relationship];
 }
+function viewToVisualizationIcon(view) {
+  const currentTag = view.getTag();
+  const currentRenderer = tagToRenderer(currentTag) ?? "table";
+  return `viz_${currentRenderer}`;
+}
 const atomicTypeMap = {
   array_type: "array",
   string_type: "string",
@@ -28150,16 +28234,11 @@ function FieldToken({
         className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly1ypdohk mlym9y5t7"
       }
     }[!!hoverActionsVisible << 0],
-    children: [/* @__PURE__ */ jsx("div", {
-      style: {
-        display: "inline-grid"
-      },
-      children: /* @__PURE__ */ jsx(Token, {
-        label: field.name,
-        color: fieldKindToColor(field.kind),
-        icon: fieldToIcon(field),
-        ...props2
-      })
+    children: [/* @__PURE__ */ jsx(Token, {
+      label: field.name,
+      color: fieldKindToColor(field.kind),
+      icon: fieldToIcon(field),
+      ...props2
     }), hoverActions && /* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1vsucm1 mly2lah0s"
@@ -28176,52 +28255,37 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$h.noBackground
+      customStyle: styles$i.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
-      icon: "dimension",
+      icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$h.noBackground
+      customStyle: styles$i.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
-      icon: "measure",
+      icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$h.noBackground
+      customStyle: styles$i.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
-      icon: "many_to_one",
+      icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$h.noBackground
+      customStyle: styles$i.noBackground
     });
   }
 }
-const styles$h = {
+const styles$i = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
   }
 };
-const QUERY_RENDERERS = ["table", "bar_chart", "dashboard", "json", "line_chart", "list", "list_detail", "point_map", "scatter_chart", "segment_map", "shape_map", "sparkline"];
-const ATOMIC_RENDERERS = ["number", "boolean", "currency", "image", "url", "percent", "text", "time"];
-const RENDERERS = [...QUERY_RENDERERS, ...ATOMIC_RENDERERS];
-function tagToRenderer(tag) {
-  if (tag) {
-    const tagProps = tag.getProperties();
-    const tags = Object.keys(tagProps);
-    for (const tag2 of tags) {
-      if (RENDERERS.includes(tag2) && !tagProps[tag2].deleted) {
-        return tag2;
-      }
-    }
-  }
-  return null;
-}
 function Visualization$1({
   rootQuery,
   view
@@ -28245,7 +28309,7 @@ function Visualization$1({
     onClick: () => setRenderer(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$g.first,
+    customStyle: styles$h.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items: vizes,
@@ -28255,7 +28319,7 @@ function Visualization$1({
     children: tokens2
   });
 }
-const styles$g = {
+const styles$h = {
   first: {
     flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
@@ -28284,7 +28348,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$f.attributeTableContainer, style),
+    ..._stylex.props(styles$g.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsx("table", {
         ...{
@@ -28324,9 +28388,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$f.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$g.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$f.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$g.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -28337,7 +28401,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$f = {
+const styles$g = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -28493,7 +28557,7 @@ function HoverText({
           asChild: true,
           children: /* @__PURE__ */ jsx("div", {
             ref: textRef,
-            ..._stylex.props(styles$e.text, fontStyles.supporting),
+            ..._stylex.props(styles$f.text, fontStyles.supporting),
             children: text2
           })
         }), /* @__PURE__ */ jsx(Portal$4, {
@@ -28501,7 +28565,7 @@ function HoverText({
             side,
             align,
             children: /* @__PURE__ */ jsx("pre", {
-              ..._stylex.props(styles$e.hoverText, fontStyles.tooltipText),
+              ..._stylex.props(styles$f.hoverText, fontStyles.tooltipText),
               children: text2
             })
           })
@@ -28510,7 +28574,7 @@ function HoverText({
     })
   });
 }
-const styles$e = {
+const styles$f = {
   text: {
     whiteSpace: "mlyuxw1ft",
     textOverflow: "mlylyipyv",
@@ -28572,7 +28636,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$d.viewAttributeTable
+      style: styles$e.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -28581,7 +28645,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$d.container, fontStyles.body),
+    ..._stylex.props(styles$e.container, fontStyles.body),
     children: [/* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         ...{
@@ -28591,7 +28655,7 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$d.path),
+        ..._stylex.props(fontStyles.supporting, styles$e.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
         ..._stylex.props(fontStyles.emphasized),
@@ -28605,7 +28669,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$d = {
+const styles$e = {
   container: {
     width: "mlybl57os",
     maxHeight: "mly1t2cwa7",
@@ -28645,6 +28709,7 @@ const styles$d = {
     $$css: true
   }
 };
+const isArrayOrRecord = (field) => field.kind === "dimension" && (field.type.kind === "array_type" && field.type.element_type.kind === "record_type" || field.type.kind === "record_type");
 function FieldList({
   view,
   fields,
@@ -28656,8 +28721,9 @@ function FieldList({
   const groups = useMemo(() => {
     const groups2 = [];
     const buildGroups = (types22, path, name, fields2) => {
-      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => field.name.includes(search) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
+      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => !isArrayOrRecord(field)).filter((field) => field.name.includes(search) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
       const joins = fields2.filter((field) => field.kind === "join");
+      const arraysAndRecords = fields2.filter(isArrayOrRecord);
       if (filteredFields.length) {
         groups2.push({
           path,
@@ -28665,6 +28731,19 @@ function FieldList({
           fields: filteredFields
         });
       }
+      for (const array of arraysAndRecords) {
+        if (array.type.kind === "array_type" && array.type.element_type.kind === "record_type") {
+          buildGroups(types22, [...path, array.name], array.name, array.type.element_type.fields.map((dimension) => ({
+            kind: "dimension",
+            ...dimension
+          })));
+        } else if (array.type.kind === "record_type") {
+          buildGroups(types22, [...path, array.name], array.name, array.type.fields.map((dimension) => ({
+            kind: "dimension",
+            ...dimension
+          })));
+        }
+      }
       for (const join of joins) {
         buildGroups(
           types22.filter((type) => type !== "view"),
@@ -28682,14 +28761,14 @@ function FieldList({
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         children: /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(addMenuStyles.item, styles$c.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$d.fieldItem),
           "data-disabled": "true",
           children: group.name
         })
       }), group.fields.map((field) => /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$c.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$d.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: (event) => onClick(field, group.path, event),
@@ -28712,7 +28791,7 @@ function FieldList({
     })
   });
 }
-const styles$c = {
+const styles$d = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -28766,7 +28845,7 @@ function OperationActionTitle({
 }) {
   const [isMenuOpen, setIsMenuOpen] = React.useState(false);
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$i.title, hoverStyles.main),
+    ..._stylex.props(styles$j.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -28849,7 +28928,7 @@ function GroupByOperations({
         addGroupBy(rootQuery, segment, field, path, setQuery);
       }
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.tokenContainer),
+      ..._stylex.props(styles$j.tokenContainer),
       children: groupBys.map((groupBy) => {
         const fieldInfo = groupBy.getFieldInfo();
         const path = groupBy.field.getReference().path ?? [];
@@ -28939,10 +29018,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.title),
+      ..._stylex.props(styles$j.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.tokenContainer),
+      ..._stylex.props(styles$j.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -29200,7 +29279,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.title),
+      ..._stylex.props(styles$j.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -29252,7 +29331,7 @@ function AggregateOperations({
         setQuery == null ? void 0 : setQuery(rootQuery.build());
       }
     }), " ", /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.tokenContainer),
+      ..._stylex.props(styles$j.tokenContainer),
       children: aggregates.map((aggregate) => {
         const fieldInfo = aggregate.getFieldInfo();
         const path = aggregate.field.getReference().path ?? [];
@@ -29293,10 +29372,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.title),
+      ..._stylex.props(styles$j.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$i.tokenContainer),
+      ..._stylex.props(styles$j.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -29387,7 +29466,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsx(Icon, {
           name: icon,
-          customStyle: styles$b.icon
+          customStyle: styles$c.icon
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp"
@@ -29424,7 +29503,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$b = {
+const styles$c = {
   icon: {
     $$css: true
   }
@@ -29524,7 +29603,7 @@ function AddFieldItem({
   const trigger = /* @__PURE__ */ jsxs("div", {
     role: "menuitem",
     tabIndex: -1,
-    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$a.open : null),
+    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$b.open : null),
     "data-disabled": disabled ? "true" : void 0,
     children: [/* @__PURE__ */ jsxs("div", {
       ..._stylex.props(addMenuStyles.label),
@@ -29579,7 +29658,7 @@ function AddFieldItem({
     })]
   });
 }
-const styles$a = {
+const styles$b = {
   open: {
     background: "mly1p5yd3t",
     backgroundAttachment: null,
@@ -29836,15 +29915,6 @@ function AddMenu({
     })]
   });
 }
-function VisualizationIcon({
-  view
-}) {
-  const currentTag = view.getTag();
-  const currentRenderer = tagToRenderer(currentTag) ?? "table";
-  return /* @__PURE__ */ jsx(Icon, {
-    name: `viz_${currentRenderer}`
-  });
-}
 function NestOperations({
   rootQuery,
   nests
@@ -29855,8 +29925,29 @@ function NestOperations({
   if (nests.length === 0) {
     return null;
   }
+  const getControls = (nest) => /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(DropdownMenu, {
+      trigger: /* @__PURE__ */ jsx(Button, {
+        variant: "flat",
+        icon: "meatballs",
+        size: "compact",
+        tooltip: "More Actions"
+      }),
+      children: /* @__PURE__ */ jsx(DropdownMenuItem, {
+        icon: "clear",
+        label: "Delete Query",
+        onClick: () => {
+          nest.delete();
+          setQuery == null ? void 0 : setQuery(rootQuery.build());
+        }
+      })
+    }), /* @__PURE__ */ jsx(AddMenu, {
+      rootQuery,
+      view: nest.view
+    })]
+  });
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$i.tokenContainer),
+    ..._stylex.props(styles$j.tokenContainer),
     children: nests.map((nest) => {
       const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
       return /* @__PURE__ */ jsx("div", {
@@ -29865,32 +29956,10 @@ function NestOperations({
         },
         children: /* @__PURE__ */ jsx(CollapsiblePanel, {
           title: nest.name,
-          icon: "nest",
+          icon: viewToVisualizationIcon(nest.view),
           defaultOpen,
-          controls: /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsx(DropdownMenu, {
-              trigger: /* @__PURE__ */ jsx(Button, {
-                variant: "flat",
-                icon: "meatballs",
-                size: "compact",
-                tooltip: "More Actions"
-              }),
-              children: /* @__PURE__ */ jsx(DropdownMenuItem, {
-                icon: "clear",
-                label: "Delete Query",
-                onClick: () => {
-                  nest.delete();
-                  setQuery == null ? void 0 : setQuery(rootQuery.build());
-                }
-              })
-            }), /* @__PURE__ */ jsx(AddMenu, {
-              rootQuery,
-              view: nest.view
-            })]
-          }),
-          collapsedControls: /* @__PURE__ */ jsx(VisualizationIcon, {
-            view: nest.view
-          }),
+          controls: getControls(nest),
+          collapsedControls: getControls(nest),
           children: /* @__PURE__ */ jsx(View, {
             rootQuery,
             view: nest.view
@@ -30027,11 +30096,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$9.preview
+      style: styles$a.preview
     })]
   });
 }
-const styles$9 = {
+const styles$a = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -30073,21 +30142,33 @@ function Query({
           size: "compact",
           tooltip: "More Actions"
         }),
-        children: setQuery ? /* @__PURE__ */ jsx(DropdownMenuItem, {
-          icon: "clear",
-          label: "Clear query",
-          onClick: () => {
-            setQuery == null ? void 0 : setQuery(void 0);
-          },
-          disabled: rootQuery.isEmpty()
+        children: setQuery ? /* @__PURE__ */ jsxs(Fragment, {
+          children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+            icon: "clear",
+            label: "Clear query",
+            onClick: () => {
+              setQuery == null ? void 0 : setQuery(void 0);
+            },
+            disabled: rootQuery.isEmpty()
+          }), /* @__PURE__ */ jsx(DropdownMenuItem, {
+            icon: "nest",
+            label: "Nest query",
+            onClick: () => {
+              if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
+                rootQuery.definition.view.convertToNest("Nest");
+              }
+              setQuery == null ? void 0 : setQuery(rootQuery.build());
+            },
+            disabled: rootQuery.isEmpty()
+          })]
         }) : /* @__PURE__ */ jsx(Fragment, {})
       }), query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsx(AddMenu, {
         rootQuery,
         view: query.definition
       }) : null]
     }),
-    collapsedControls: /* @__PURE__ */ jsx(VisualizationIcon, {
-      view: query
+    collapsedControls: /* @__PURE__ */ jsx(Icon, {
+      name: viewToVisualizationIcon(query)
     }),
     children: [query.definition instanceof ASTArrowQueryDefinition ? /* @__PURE__ */ jsxs("div", {
       style: {
@@ -30135,9 +30216,9 @@ function Source({
   } = useContext(ExplorerPanelsContext);
   if (!(isSourcePanelOpen && setIsSourcePanelOpen) && rootQuery.definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$i.queryCard, styles$8.flex),
+      ..._stylex.props(styles$j.queryCard, styles$9.flex),
       children: [/* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$i.labelWithIcon),
+        ..._stylex.props(styles$j.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name]
@@ -30150,7 +30231,7 @@ function Source({
   }
   return null;
 }
-const styles$8 = {
+const styles$9 = {
   flex: {
     display: "mly78zum5",
     justifyContent: "mly1qughib",
@@ -30243,7 +30324,7 @@ function Parameters({
         children: sourceParameters.map((parameter) => {
           var _a2;
           return /* @__PURE__ */ jsxs(TokenGroup, {
-            customStyle: styles$7.tokenGroup,
+            customStyle: styles$8.tokenGroup,
             children: [/* @__PURE__ */ jsx(Token, {
               icon: atomicTypeToIcon(parameter.type.kind),
               label: parameter.name
@@ -30261,7 +30342,7 @@ function Parameters({
   }
   return null;
 }
-const styles$7 = {
+const styles$8 = {
   tokenGroup: {
     display: "mly78zum5",
     $$css: true
@@ -30276,21 +30357,40 @@ function QueryEditor() {
     console.error("Missing <MalloyExplorerProvider>");
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", {
-    ...{
-      className: "mly6icuqf mlyif65rj mlywxc2jc mly78zum5 mlydt5ytf mly167g77z"
-    },
-    children: [/* @__PURE__ */ jsx(Source, {
-      rootQuery
-    }), /* @__PURE__ */ jsx(Parameters, {
-      rootQuery
-    }), /* @__PURE__ */ jsx(Query, {
-      rootQuery,
-      query: rootQuery,
-      setQuery
-    })]
+  return /* @__PURE__ */ jsx(ScrollableArea, {
+    children: /* @__PURE__ */ jsxs("div", {
+      ..._stylex.props(fontStyles.body, styles$7.main),
+      children: [/* @__PURE__ */ jsx(Source, {
+        rootQuery
+      }), /* @__PURE__ */ jsx(Parameters, {
+        rootQuery
+      }), /* @__PURE__ */ jsx(Query, {
+        rootQuery,
+        query: rootQuery,
+        setQuery
+      })]
+    })
   });
 }
+const styles$7 = {
+  main: {
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    padding: "mly1fut7tt",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    $$css: true
+  }
+};
 function QueryPanel({
   runQuery
 }) {
@@ -30298,20 +30398,10 @@ function QueryPanel({
     ...{
       className: "mly78zum5 mlydt5ytf mly2lah0s mlyh8yej3 mly5yr21d mlyotlr4g mly1roky18"
     },
-    children: [/* @__PURE__ */ jsx("div", {
-      ...{
-        className: "mly78zum5 mlydt5ytf mly153ncpu"
-      },
-      children: /* @__PURE__ */ jsx(QueryActionBar, {
-        runQuery
-      })
+    children: [/* @__PURE__ */ jsx(QueryActionBar, {
+      runQuery
     }), /* @__PURE__ */ jsx(ScrollableArea, {
-      children: /* @__PURE__ */ jsx("div", {
-        ...{
-          className: "mly78zum5 mlydt5ytf mly1fut7tt mly167g77z"
-        },
-        children: /* @__PURE__ */ jsx(QueryEditor, {})
-      })
+      children: /* @__PURE__ */ jsx(QueryEditor, {})
     })]
   });
 }
@@ -31104,7 +31194,22 @@ function flattenFieldsTree(fields, path = []) {
           }];
         }
       case "measure":
+        return [{
+          path,
+          field
+        }];
       case "dimension":
+        if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+          return flattenFieldsTree(field.type.element_type.fields.map((dimension) => ({
+            kind: "dimension",
+            ...dimension
+          })), [...path, field.name]);
+        } else if (field.type.kind === "record_type") {
+          return flattenFieldsTree(field.type.fields.map((dimension) => ({
+            kind: "dimension",
+            ...dimension
+          })), [...path, field.name]);
+        }
         return [{
           path,
           field
@@ -31598,7 +31703,9 @@ const styles$1 = {
     $$css: true
   }
 };
-function SourcePanel() {
+function SourcePanel({
+  onRefresh
+}) {
   const {
     source
   } = React.useContext(QueryEditorContext);
@@ -31671,13 +31778,23 @@ function SourcePanel() {
           variant: "flat",
           size: "compact",
           onClick: () => setSubpanelType(null)
-        }), setIsSourcePanelOpen && /* @__PURE__ */ jsx("div", {
-          children: /* @__PURE__ */ jsx(Button, {
-            icon: "chevronLeft",
+        }), /* @__PURE__ */ jsxs("div", {
+          ...{
+            className: "mly78zum5"
+          },
+          children: [/* @__PURE__ */ jsx(Button, {
+            icon: "refresh",
+            tooltip: "Refresh the source",
+            onClick: onRefresh,
+            size: "compact",
+            variant: "flat"
+          }), setIsSourcePanelOpen && /* @__PURE__ */ jsx(Button, {
+            icon: "sidebarCollapse",
             tooltip: "Close the source panel",
             onClick: () => setIsSourcePanelOpen(false),
-            size: "compact"
-          })
+            size: "compact",
+            variant: "flat"
+          })]
         })]
       }), /* @__PURE__ */ jsx(TextInput, {
         value: searchQuery,