@malloydata/malloy-explorer 0.0.266-dev250425232629 → 0.0.269-dev250430213122

package/dist/esm/index.js

@@ -13,11 +13,11 @@ var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
 var __superGet = (cls, obj, key2) => __reflectGet(__getProtoOf(cls), key2, obj);
 var _a, _b, _captureMap, _compiled, _pattern, _nameMap, _strategy, __EmulatedRegExp_instances, execCore_fn, _c;
+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 { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as QB from "@malloydata/malloy-query-builder";
-import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTRefinementViewDefinition, ASTLimitViewOperation, ASTOrderByViewOperation, ASTNestViewOperation, ASTAggregateViewOperation, ASTGroupByViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
+import { ASTArrowQueryDefinition, ASTSegmentViewDefinition, ASTRefinementViewDefinition, ASTLimitViewOperation, ASTNestViewOperation, ASTOrderByViewOperation, ASTAggregateViewOperation, ASTGroupByViewOperation, ASTWhereViewOperation, ASTHavingViewOperation, ASTArrowViewDefinition } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import * as render from "@malloydata/render";
 import "@malloydata/render/webcomponent";
@@ -3710,6 +3710,7 @@ const SvgInfo = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns:
 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 SvgFilterSliders = (props2) => /* @__PURE__ */ React.createElement("svg", { fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "m11 8h10m-10 0c0 1.65685-1.34315 3-3 3s-3-1.34315-3-3m6 0c0-1.65685-1.34315-3-3-3s-3 1.34315-3 3m0 0h-2m10 8h-10m10 0c0-1.6569 1.3431-3 3-3s3 1.3431 3 3m-6 0c0 1.6569 1.3431 3 3 3s3-1.3431 3-3m0 0h2", stroke: "currentColor", strokeWidth: 1.5 }));
 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) " }))));
@@ -3749,6 +3750,7 @@ const ICON_MAP = {
   error: SvgError,
   refresh: SvgRefresh,
   sidebarCollapse: SvgSidebarCollapse,
+  filterSliders: SvgFilterSliders,
   // Operations
   aggregate: SvgInsertMeasure,
   dimension: SvgTypeIconString,
@@ -3815,10 +3817,10 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsx(IconComponent, {
-    ..._stylex.props(styles$I.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$I.scaleUp, customStyle)
+    ..._stylex.props(styles$M.main, colorVariants$3[color], SMALL_ICONS.includes(name) && styles$M.scaleUp, customStyle)
   });
 }
-const styles$I = {
+const styles$M = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -3891,17 +3893,17 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$H.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$L.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.badge, styles$H.label),
+      ..._stylex.props(fontStyles.badge, styles$L.label),
       children: label
     })]
   });
 }
-const styles$H = {
+const styles$L = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -3983,10 +3985,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$G.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$K.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$G = {
+const styles$K = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -4024,36 +4026,6 @@ function List$1({
     children: React.Children.map(children, (child) => child)
   });
 }
-function ListItem({
-  label,
-  startIcon,
-  badge,
-  endIcon,
-  onClick
-}) {
-  return /* @__PURE__ */ jsxs("div", {
-    ...{
-      className: "mly78zum5 mly6s0dn4 mlyl56j7k mlye8ttls mly167g77z mlyur7f20 mly1ypdohk mly1haqvef"
-    },
-    onClick,
-    children: [startIcon && /* @__PURE__ */ jsx(Fragment, {
-      children: startIcon
-    }), /* @__PURE__ */ jsx("span", {
-      ..._stylex.props(fontStyles.body, styles$F.label),
-      children: label
-    }), badge && /* @__PURE__ */ jsx(Fragment, {
-      children: badge
-    }), endIcon && /* @__PURE__ */ jsx(Fragment, {
-      children: endIcon
-    })]
-  });
-}
-const styles$F = {
-  label: {
-    flexGrow: "mly1iyjqo2",
-    $$css: true
-  }
-};
 var DirectionContext = React.createContext(void 0);
 function useDirection(localDir) {
   const globalDir = React.useContext(DirectionContext);
@@ -4823,7 +4795,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxs("button", {
-    ..._stylex.props(styles$E.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$J.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     ...onClick && {
       onClick: (e) => {
         e.preventDefault();
@@ -4839,9 +4811,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$E.icon
+        customStyle: styles$J.icon
       }), label && /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$E.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$J.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsx("div", {
@@ -4868,7 +4840,7 @@ function Button({
     return button;
   }
 }
-const styles$E = {
+const styles$J = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5119,7 +5091,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$D.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$I.nonInteractive, customStyle),
     ...dragProps == null ? void 0 : dragProps.attributes,
     ...dragProps == null ? void 0 : dragProps.listeners,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
@@ -5156,7 +5128,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$D = {
+const styles$I = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5180,7 +5152,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$C.main, customStyle),
+    ..._stylex.props(styles$H.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5191,16 +5163,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$C.onlyChild;
-  if (index2 === 0) return styles$C.firstChild;
-  if (index2 === count2 - 1) return styles$C.lastChild;
-  return styles$C.innerChild;
+  if (count2 === 1) return styles$H.onlyChild;
+  if (index2 === 0) return styles$H.firstChild;
+  if (index2 === count2 - 1) return styles$H.lastChild;
+  return styles$H.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$C = {
+const styles$H = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -5272,7 +5244,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$B.errorIcon
+          customStyle: styles$G.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -5285,7 +5257,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$B = {
+const styles$G = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5330,22 +5302,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$A.focused, !!errorMessage && styles$A.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$F.focused, !!errorMessage && styles$F.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$A.icon
+        customStyle: styles$F.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$A.placeholder),
+          ..._stylex.props(fontStyles.body, styles$F.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsx("input", {
-          ..._stylex.props(styles$A.input, fontStyles.body),
+          ..._stylex.props(styles$F.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -5370,7 +5342,7 @@ function EditableToken({
     })]
   });
 }
-const styles$A = {
+const styles$F = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7712,12 +7684,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$z.main, isFocused && styles$z.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$E.main, isFocused && styles$E.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$z.input),
+      ..._stylex.props(fontStyles.body, styles$E.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7725,7 +7697,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$z.actionButton, value === "" && styles$z.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$E.actionButton, value === "" && styles$E.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -7733,7 +7705,7 @@ function TextInput({
     })]
   });
 }
-const styles$z = {
+const styles$E = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -7942,7 +7914,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$y.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
+      ..._stylex.props(tokenStyles.main, styles$D.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], fontStyles.body, tokenStyles.label, customStyle),
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -7971,7 +7943,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$y.searchInput,
+            customStyle: styles$D.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8004,21 +7976,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$y.selectItem),
+    ..._stylex.props(fontStyles.body, styles$D.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$y.radioChecked
+      customStyle: styles$D.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$y.radioUnchecked
+      customStyle: styles$D.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$y = {
+const styles$D = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8108,7 +8080,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$x.container, customStyle),
+    ..._stylex.props(styles$C.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8122,7 +8094,7 @@ function Card({
     })]
   });
 }
-const styles$x = {
+const styles$C = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8213,10 +8185,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$w.label),
+          ..._stylex.props(fontStyles.body, styles$B.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$B.sublabel),
           children: sublabel
         })]
       })]
@@ -8228,7 +8200,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$w = {
+const styles$B = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19042,7 +19014,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$v.root, customStyle),
+    ..._stylex.props(styles$A.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19062,7 +19034,7 @@ function Spinner({
     })
   });
 }
-const styles$v = {
+const styles$A = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -23382,7 +23354,6 @@ var Anchor2$1 = PopoverAnchor;
 var Trigger$2 = PopoverTrigger;
 var Portal$2 = PopoverPortal;
 var Content2$2 = PopoverContent;
-var Arrow2$1 = PopoverArrow;
 const styleX = {
   wrapper: {
     position: "mly1n2onr6",
@@ -23461,7 +23432,7 @@ const Popover = ({
     })
   });
 };
-const styles$u = {
+const styles$z = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23513,7 +23484,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$u.wrapper, customStyle),
+    ..._stylex.props(styles$z.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23581,7 +23552,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.selectListDiv, customStyle),
+      ..._stylex.props(styles$z.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23613,8 +23584,8 @@ function SelectList({
           }), /* @__PURE__ */ jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$u.checkIcon,
-              ...isSelected ? styles$u.checkIconSelected : void 0
+              ...styles$z.checkIcon,
+              ...isSelected ? styles$z.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsx("span", {
             ...{
@@ -23725,7 +23696,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$t.outer, customStyle),
+    ..._stylex.props(styles$y.outer, customStyle),
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mly1q0g3np mly1qughib mly1nejdyq mlyu06os2"
@@ -24040,7 +24011,7 @@ function DatePicker({
     })]
   });
 }
-const styles$t = {
+const styles$y = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24126,7 +24097,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$s.header, variantColors[variant], children ? styles$s.headerWithContent : null),
+      ..._stylex.props(styles$x.header, variantColors[variant], children ? styles$x.headerWithContent : null),
       children: [/* @__PURE__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24139,22 +24110,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$s.title, fontStyles.emphasized),
+          ..._stylex.props(styles$x.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$s.description, fontStyles.supporting),
+          ..._stylex.props(styles$x.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.content, fontStyles.body),
+      ..._stylex.props(styles$x.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$s = {
+const styles$x = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24275,6 +24246,106 @@ const variantColors = {
     $$css: true
   }
 };
+const AccordionListContext = /* @__PURE__ */ React.createContext({});
+function AccordionList({
+  defaultExpandedItemId,
+  children,
+  customStyle
+}) {
+  const [expandedItemId, setExpandedItemId] = React.useState(defaultExpandedItemId);
+  const handleExpandedItemChange = (currentItemId) => {
+    setExpandedItemId((prev) => {
+      if (prev === currentItemId) {
+        return void 0;
+      }
+      return currentItemId;
+    });
+  };
+  return /* @__PURE__ */ jsx(AccordionListContext.Provider, {
+    value: {
+      expandedItemId,
+      onExpandedItemChange: handleExpandedItemChange
+    },
+    children: /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$w.main, customStyle),
+      children: React.Children.map(children, (child) => /* @__PURE__ */ jsxs(Fragment, {
+        children: [child, /* @__PURE__ */ jsx(Divider, {})]
+      }))
+    })
+  });
+}
+const styles$w = {
+  main: {
+    display: "mly78zum5",
+    flexDirection: "mlydt5ytf",
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    flexGrow: "mly1iyjqo2",
+    $$css: true
+  }
+};
+function AccordionListItem({
+  id,
+  label,
+  sublabel,
+  startIcon,
+  badge,
+  endIcon,
+  children
+}) {
+  const {
+    expandedItemId,
+    onExpandedItemChange
+  } = React.useContext(AccordionListContext);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs("div", {
+      ...{
+        className: "mly78zum5 mly6s0dn4 mlylqzeqv mlye8ttls mly167g77z mly1ypdohk"
+      },
+      onClick: () => onExpandedItemChange == null ? void 0 : onExpandedItemChange(id),
+      children: [startIcon && /* @__PURE__ */ jsx(Fragment, {
+        children: startIcon
+      }), /* @__PURE__ */ jsxs("div", {
+        ...{
+          className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
+        },
+        children: [/* @__PURE__ */ jsx("span", {
+          ..._stylex.props(fontStyles.body, styles$v.label),
+          children: label
+        }), sublabel && /* @__PURE__ */ jsx("span", {
+          ..._stylex.props(fontStyles.supporting, styles$v.sublabel),
+          children: sublabel
+        })]
+      }), badge && badge, endIcon && endIcon]
+    }), id === expandedItemId && /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlytdwleo mly1jnr06f mly10cdfl8 mlyysyzu8"
+      },
+      children: React.Children.map(children, (child) => child)
+    })]
+  });
+}
+const styles$v = {
+  label: {
+    flexGrow: "mly1iyjqo2",
+    fontWeight: "mly1xlr1w8",
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    textOverflow: "mlylyipyv",
+    $$css: true
+  },
+  sublabel: {
+    flexGrow: "mly1iyjqo2",
+    color: "mly9dwj6z",
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    textOverflow: "mlylyipyv",
+    $$css: true
+  }
+};
 var ENTRY_FOCUS = "rovingFocusGroup.onEntryFocus";
 var EVENT_OPTIONS = { bubbles: false, cancelable: true };
 var GROUP_NAME$2 = "RovingFocusGroup";
@@ -25589,7 +25660,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$r.content),
+        ..._stylex.props(fontStyles.body, styles$u.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25616,16 +25687,16 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$r.icon
+      customStyle: styles$u.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$r.label),
+        ..._stylex.props(fontStyles.body, styles$u.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$r.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
         children: sublabel
       })]
     })]
@@ -25655,21 +25726,21 @@ function DropdownSubMenuItem({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$r.icon
+        customStyle: styles$u.icon
       }), /* @__PURE__ */ jsxs("div", {
         ...{
           className: "mly78zum5 mlydt5ytf mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$r.label),
+          ..._stylex.props(fontStyles.body, styles$u.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$r.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$u.sublabel),
           children: sublabel
         })]
       }), !isControlled && /* @__PURE__ */ jsx(Icon, {
         name: "chevronRight",
-        customStyle: styles$r.icon
+        customStyle: styles$u.icon
       })]
     }), /* @__PURE__ */ jsx(SubContent2, {
       ...{
@@ -25684,11 +25755,11 @@ function DropdownMenuLabel({
   label
 }) {
   return /* @__PURE__ */ jsx(Label2, {
-    ..._stylex.props(fontStyles.supporting, styles$r.menuLabel),
+    ..._stylex.props(fontStyles.supporting, styles$u.menuLabel),
     children: label
   });
 }
-const styles$r = {
+const styles$u = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25752,6 +25823,7 @@ const styles$r = {
     $$css: true
   }
 };
+const ResizableCollapsiblePanelContext = /* @__PURE__ */ React.createContext({});
 function QueryActionBar({
   runQuery
 }) {
@@ -25760,6 +25832,9 @@ function QueryActionBar({
     setQuery,
     source
   } = useContext(QueryEditorContext);
+  const {
+    onCollapse
+  } = useContext(ResizableCollapsiblePanelContext);
   const isQueryEmpty = !rootQuery || rootQuery.isEmpty();
   const isRunEnabled = rootQuery == null ? void 0 : rootQuery.isRunnable();
   const onRunQuery = () => {
@@ -25769,11 +25844,18 @@ function QueryActionBar({
   };
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mly78zum5 mly1qughib mly6s0dn4 mly153ncpu"
+      className: "mly78zum5 mly1qughib mly6s0dn4 mlye8ttls"
     },
-    children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.largeBody, styles$q.title),
-      children: "Query"
+    children: [/* @__PURE__ */ jsxs("div", {
+      ...{
+        className: "mly78zum5 mly167g77z mly6s0dn4 mlydqdrvq"
+      },
+      children: [/* @__PURE__ */ jsx(Icon, {
+        name: "filterSliders"
+      }), /* @__PURE__ */ jsx("div", {
+        ..._stylex.props(fontStyles.largeBody, styles$t.title),
+        children: "Query"
+      })]
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mly167g77z"
@@ -25803,17 +25885,23 @@ function QueryActionBar({
             })
           })
         })]
+      }), onCollapse && /* @__PURE__ */ jsx(Button, {
+        icon: "sidebarCollapse",
+        tooltip: "Close the source panel",
+        onClick: onCollapse,
+        size: "compact",
+        variant: "flat"
       })]
     })]
   });
 }
-const styles$q = {
+const styles$t = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$p = {
+const styles$s = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -25821,6 +25909,9 @@ const styles$p = {
     gap: "mly167g77z",
     rowGap: null,
     columnGap: null,
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   },
   queryCard: {
@@ -29711,6 +29802,7 @@ const addMenuStyles = {
     marginBlock: null,
     marginTop: null,
     marginBottom: null,
+    maxHeight: "mly3d5gib",
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
     $$css: true
@@ -29804,7 +29896,20 @@ function getInputSchemaFromViewParent(parent) {
 function isNotAnnotatedFilteredField(field) {
   return !hasExplorerFilterFieldAnnotation(field.annotations ?? []);
 }
-function findUniqueFieldName(fields, rename) {
+function findUniqueFieldName(fields, rename, path = []) {
+  if (!fields.find((field) => field.name === rename)) {
+    return rename;
+  }
+  if (path.length) {
+    const parts = [...path];
+    while (parts.length) {
+      const part = parts.pop();
+      rename = `${part} ${rename}`;
+      if (!fields.find((field) => field.name === rename)) {
+        return rename;
+      }
+    }
+  }
   let idx = 2;
   while (fields.find((field) => field.name === `${rename} ${idx}`)) {
     idx++;
@@ -29915,32 +30020,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$o.noBackground
+      customStyle: styles$r.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$o.noBackground
+      customStyle: styles$r.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$o.noBackground
+      customStyle: styles$r.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$o.noBackground
+      customStyle: styles$r.noBackground
     });
   }
 }
-const styles$o = {
+const styles$r = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -29969,7 +30074,7 @@ function Visualization$1({
     onClick: () => setRenderer(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$n.first,
+    customStyle: styles$q.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items: vizes,
@@ -29979,7 +30084,7 @@ function Visualization$1({
     children: tokens2
   });
 }
-const styles$n = {
+const styles$q = {
   first: {
     flexGrow: "mly1iyjqo2",
     justifyContent: "mlylqzeqv",
@@ -30008,7 +30113,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$m.attributeTableContainer, style),
+    ..._stylex.props(styles$p.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsx("table", {
         ...{
@@ -30048,9 +30153,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$m.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$p.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$m.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$p.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -30061,7 +30166,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$m = {
+const styles$p = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -30209,7 +30314,7 @@ function HoverText({
           asChild: true,
           children: /* @__PURE__ */ jsx("div", {
             ref: textRef,
-            ..._stylex.props(styles$l.text, fontStyles.supporting),
+            ..._stylex.props(styles$o.text, fontStyles.supporting),
             children: text2
           })
         }), /* @__PURE__ */ jsx(Portal$4, {
@@ -30217,7 +30322,7 @@ function HoverText({
             side,
             align,
             children: /* @__PURE__ */ jsx("pre", {
-              ..._stylex.props(styles$l.hoverText, fontStyles.tooltipText),
+              ..._stylex.props(styles$o.hoverText, fontStyles.tooltipText),
               children: text2
             })
           })
@@ -30226,7 +30331,7 @@ function HoverText({
     })
   });
 }
-const styles$l = {
+const styles$o = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -30279,11 +30384,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$k.container, fontStyles.body, customStyle),
+    ..._stylex.props(styles$n.container, fontStyles.body, customStyle),
     children
   });
 }
-const styles$k = {
+const styles$n = {
   container: {
     boxShadow: "mly5n1uv4",
     backgroundColor: "mly12peec7",
@@ -30328,7 +30433,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$j.viewAttributeTable
+      style: styles$m.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -30337,7 +30442,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs(HoverCard, {
-    customStyle: styles$j.container,
+    customStyle: styles$m.container,
     children: [/* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
         ...{
@@ -30347,10 +30452,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$j.path),
+        ..._stylex.props(fontStyles.supporting, styles$m.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$j.title),
+        ..._stylex.props(fontStyles.emphasized, styles$m.title),
         children: field.name
       }), description && /* @__PURE__ */ jsx(HoverText, {
         text: description
@@ -30360,7 +30465,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$j = {
+const styles$m = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -30652,10 +30757,10 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$i.main),
+    ..._stylex.props(fontStyles.body, styles$l.main),
     children: /* @__PURE__ */ jsx(ScrollableArea, {
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$i.content, customStyle),
+        ..._stylex.props(styles$l.content, customStyle),
         onKeyUp,
         onClick: () => {
           var _a2;
@@ -30722,7 +30827,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$i.pill, colorVariants[color]),
+    ..._stylex.props(styles$l.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -30737,7 +30842,7 @@ const Pill = ({
     })]
   });
 };
-const styles$i = {
+const styles$l = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -30921,7 +31026,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$h.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$k.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -30945,10 +31050,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$h.token
+    customStyle: styles$k.token
   });
 }
-const styles$h = {
+const styles$k = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -31111,22 +31216,20 @@ const StringFilterCore = ({
           minHeight: 0,
           display: "grid"
         },
-        children: /* @__PURE__ */ jsx(ScrollableArea, {
-          children: /* @__PURE__ */ jsx(ValueList, {
-            ref: valueListRef,
-            search: searchValue,
-            fieldPath: [...path, field.name].join("."),
-            onClick: (value) => {
-              if (value.fieldValue) {
-                updateFilter({
-                  ...currentFilter,
-                  values: [...currentFilter.values, value.fieldValue]
-                });
-                setSearchValue("");
-              }
-            },
-            customStyle: styles$g.valueList
-          })
+        children: /* @__PURE__ */ jsx(ValueList, {
+          ref: valueListRef,
+          search: searchValue,
+          fieldPath: [...path, field.name].join("."),
+          onClick: (value) => {
+            if (value.fieldValue) {
+              updateFilter({
+                ...currentFilter,
+                values: [...currentFilter.values, value.fieldValue]
+              });
+              setSearchValue("");
+            }
+          },
+          customStyle: styles$j.valueList
         })
       })]
     }) : currentFilter.operator === "~" ? /* @__PURE__ */ jsx(StringEditor, {
@@ -31194,8 +31297,13 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$g = {
+const styles$j = {
   valueList: {
+    maxHeight: "mly3d5gib",
+    width: "mly1hfn5x7",
+    overflow: "mlyysyzu8",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   }
 };
@@ -31481,7 +31589,7 @@ const DateInput = ({
     setTempValue(hooks(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$f.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$i.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -31515,7 +31623,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$f = {
+const styles$i = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -32099,15 +32207,17 @@ function FieldList({
   view,
   fields,
   onAddOperation,
-  search,
+  search = "",
   types: types2,
   filter,
-  isFilterOperation
+  isFilterOperation,
+  customStyle
 }) {
   const groups = useMemo(() => {
     const groups2 = [];
+    const lcSearch = search.toLocaleLowerCase();
     const buildGroups = (types22, path, name, fields2) => {
-      const filteredFields = sortFieldInfos(fields2).filter((field) => field.kind !== "join").filter((field) => !isArrayOrRecord(field)).filter((field) => field.name.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.toLocaleLowerCase().includes(lcSearch) && types22.includes(field.kind)).filter((field) => filter ? filter(view, field, path) : true);
       const joins = fields2.filter((field) => field.kind === "join");
       const arraysAndRecords = fields2.filter(isArrayOrRecord);
       if (filteredFields.length) {
@@ -32144,16 +32254,12 @@ function FieldList({
     return groups2;
   }, [fields, filter, search, view, types2]);
   return /* @__PURE__ */ jsx("div", {
-    ...{
-      className: "mly3d5gib"
-    },
+    ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
-        children: /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(addMenuStyles.item, styles$e.fieldItem),
-          "data-disabled": "true",
-          children: group.name
-        })
+        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        "data-disabled": "true",
+        children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsx(FilterPopover, {
         fieldInfo: field,
         path: group.path,
@@ -32161,7 +32267,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$e.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
           children: /* @__PURE__ */ jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsx(FieldToken, {
@@ -32188,7 +32294,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$e.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -32211,7 +32317,7 @@ function FieldList({
     })
   });
 }
-const styles$e = {
+const styles$h = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -32229,7 +32335,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = useState("");
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(addMenuStyles.content),
+    ..._stylex.props(addMenuStyles.content, styles$g.content),
     role: "menu",
     children: [/* @__PURE__ */ jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -32239,7 +32345,10 @@ function FieldMenu({
         onChange: setSearch,
         placeholder: "Search..."
       })
-    }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ScrollableArea, {
+    }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly1odjw0f"
+      },
       children: /* @__PURE__ */ jsx(FieldList, {
         view,
         fields,
@@ -32252,6 +32361,12 @@ function FieldMenu({
     })]
   });
 }
+const styles$g = {
+  content: {
+    maxHeight: "mly3d5gib",
+    $$css: true
+  }
+};
 function segmentHasLimit(segment) {
   return segment.operations.items.find((operation) => operation instanceof ASTLimitViewOperation) !== void 0;
 }
@@ -32281,7 +32396,7 @@ function addGroupBy(view, field, path) {
   } = view.getOutputSchema();
   let rename;
   if (fields.find((f2) => f2.name === field.name)) {
-    rename = findUniqueFieldName(fields, field.name);
+    rename = findUniqueFieldName(fields, field.name, path);
   }
   segment.addGroupBy(field.name, path, rename);
 }
@@ -32292,7 +32407,7 @@ function addAggregate(view, field, path) {
   } = view.getOutputSchema();
   let rename;
   if (fields.find((f2) => f2.name === field.name)) {
-    rename = findUniqueFieldName(fields, field.name);
+    rename = findUniqueFieldName(fields, field.name, path);
   }
   segment.addAggregate(field.name, path, rename);
 }
@@ -32332,7 +32447,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$p.title, hoverStyles.main),
+    ..._stylex.props(styles$s.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -32902,7 +33017,7 @@ function SortableOperations({
       fields,
       ...props2
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.tokenContainer),
+      ..._stylex.props(styles$s.tokenContainer),
       children: /* @__PURE__ */ jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -33052,10 +33167,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.title),
+      ..._stylex.props(styles$s.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.tokenContainer),
+      ..._stylex.props(styles$s.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -33319,7 +33434,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.title),
+      ..._stylex.props(styles$s.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -33369,10 +33484,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.title),
+      ..._stylex.props(styles$s.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$p.tokenContainer),
+      ..._stylex.props(styles$s.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -33463,7 +33578,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"
@@ -33500,7 +33615,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$d = {
+const styles$f = {
   icon: {
     $$css: true
   }
@@ -33510,39 +33625,59 @@ function AddItem({
   label,
   detail,
   disable,
-  onClick
+  onClick,
+  open
 }) {
   const disabled = disable == null ? void 0 : disable();
   const doOnClick = () => {
     if (!(disable == null ? void 0 : disable())) onClick == null ? void 0 : onClick();
   };
-  return /* @__PURE__ */ jsx("div", {
-    role: "menuitem",
-    tabIndex: -1,
-    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable),
-    onClick: doOnClick,
-    "data-disabled": disabled ? "true" : void 0,
-    children: /* @__PURE__ */ jsxs(Root3$1, {
-      children: [/* @__PURE__ */ jsx(Trigger$4, {
-        asChild: true,
-        children: /* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsxs(Root3$1, {
+    children: [/* @__PURE__ */ jsx(Trigger$4, {
+      asChild: true,
+      children: /* @__PURE__ */ jsxs("div", {
+        role: "menuitem",
+        tabIndex: -1,
+        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$e.open : null),
+        onClick: doOnClick,
+        "data-disabled": disabled ? "true" : void 0,
+        children: [/* @__PURE__ */ jsxs("div", {
           ..._stylex.props(addMenuStyles.label),
           children: [icon, /* @__PURE__ */ jsx("div", {
             children: label
           })]
-        })
-      }), detail ? /* @__PURE__ */ jsx(Portal$4, {
-        children: /* @__PURE__ */ jsx(Content2$4, {
-          ..._stylex.props(addMenuStyles.tooltip),
-          side: "right",
-          align: "start",
-          alignOffset: -16,
-          children: detail
-        })
-      }) : null]
-    })
+        }), open !== void 0 && /* @__PURE__ */ jsx(Icon, {
+          name: "chevronRight",
+          color: "gray"
+        })]
+      })
+    }), detail ? /* @__PURE__ */ jsx(Portal$4, {
+      children: /* @__PURE__ */ jsx(Content2$4, {
+        ..._stylex.props(addMenuStyles.tooltip),
+        side: "right",
+        align: "start",
+        alignOffset: -16,
+        children: detail
+      })
+    }) : null]
   });
 }
+const styles$e = {
+  open: {
+    background: "mly16o7sp0",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    $$css: true
+  }
+};
 function AddLimit({
   rootQuery,
   view
@@ -33588,95 +33723,33 @@ function AddEmptyNest({
 function AddFieldItem({
   view,
   fields,
-  icon,
-  label,
   onAddOperation,
   types: types2,
   filter,
-  disabledMessage,
-  isFilterOperation
+  isFilterOperation,
+  search
 }) {
-  const disabled = fields.length === 0;
-  const [open, setOpen] = useState(false);
-  const trigger = /* @__PURE__ */ jsxs("div", {
-    role: "menuitem",
-    tabIndex: -1,
-    ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$c.open : null),
-    "data-disabled": disabled ? "true" : void 0,
-    children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(addMenuStyles.label),
-      children: [/* @__PURE__ */ jsx(Icon, {
-        name: icon
-      }), /* @__PURE__ */ jsx("div", {
-        children: label
-      })]
-    }), /* @__PURE__ */ jsx(Icon, {
-      name: "chevronRight",
-      color: "gray"
-    })]
-  });
-  if (disabled && disabledMessage) {
-    return /* @__PURE__ */ jsxs(Tooltip, {
-      children: [/* @__PURE__ */ jsx(TooltipTrigger, {
-        asChild: true,
-        children: trigger
-      }), /* @__PURE__ */ jsx(TooltipPortal, {
-        children: /* @__PURE__ */ jsx(TooltipContent, {
-          children: /* @__PURE__ */ jsx("div", {
-            ..._stylex.props(fontStyles.supporting, tooltipStyles.default),
-            children: disabledMessage
-          })
-        })
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsxs(Root2$2, {
-    open,
-    onOpenChange: setOpen,
-    children: [/* @__PURE__ */ jsx(Trigger$2, {
-      asChild: true,
-      disabled,
-      children: trigger
-    }), /* @__PURE__ */ jsx(Portal$2, {
-      children: /* @__PURE__ */ jsxs(Content2$2, {
-        side: "right",
-        align: "start",
-        alignOffset: -8,
-        sideOffset: -6,
-        children: [/* @__PURE__ */ jsx(Arrow2$1, {
-          width: 0,
-          height: 0
-        }), /* @__PURE__ */ jsx(FieldMenu, {
-          types: types2,
-          filter,
-          view,
-          fields,
-          onAddOperation,
-          isFilterOperation
-        })]
-      })
-    })]
+  return /* @__PURE__ */ jsx(FieldList, {
+    types: types2,
+    filter,
+    view,
+    fields,
+    onAddOperation,
+    isFilterOperation,
+    search,
+    customStyle: styles$d.list
   });
 }
-const styles$c = {
-  open: {
-    background: "mly1p5yd3t",
-    backgroundAttachment: null,
-    backgroundClip: null,
-    backgroundColor: null,
-    backgroundImage: null,
-    backgroundOrigin: null,
-    backgroundPosition: null,
-    backgroundPositionX: null,
-    backgroundPositionY: null,
-    backgroundRepeat: null,
-    backgroundSize: null,
+const styles$d = {
+  list: {
+    width: "mlyqyf9gi",
     $$css: true
   }
 };
 function AddOrderBy({
   rootQuery,
-  view
+  view,
+  search
 }) {
   const {
     setQuery
@@ -33695,13 +33768,15 @@ function AddOrderBy({
       segment2.addOrderBy(field.name, "asc");
       setQuery == null ? void 0 : setQuery(rootQuery.build());
     },
-    disabledMessage: "There must be at least one field in the output to order by."
+    disabledMessage: "There must be at least one field in the output to order by.",
+    search
   });
 }
 const ORDERABLE_TYPES$1 = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function AddGroupBy({
   rootQuery,
-  view
+  view,
+  search
 }) {
   const {
     setQuery
@@ -33723,12 +33798,14 @@ function AddGroupBy({
     onAddOperation: (field, path) => {
       addGroupBy(view, field, path);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
-    }
+    },
+    search
   });
 }
 function AddAggregate({
   rootQuery,
-  view
+  view,
+  search
 }) {
   const {
     setQuery
@@ -33750,11 +33827,13 @@ function AddAggregate({
     onAddOperation: (field, path) => {
       addAggregate(view, field, path);
       setQuery == null ? void 0 : setQuery(rootQuery.build());
-    }
+    },
+    search
   });
 }
 function AddWhere({
-  view
+  view,
+  search
 }) {
   const {
     rootQuery,
@@ -33782,14 +33861,16 @@ function AddWhere({
           setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
         }
       },
-      isFilterOperation: true
+      isFilterOperation: true,
+      search
     })
   });
 }
 const FILTERABLE_TYPES$1 = /* @__PURE__ */ new Set(["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"]);
 function AddView({
   rootQuery,
-  view
+  view,
+  search
 }) {
   const {
     setQuery
@@ -33810,7 +33891,8 @@ function AddView({
         addNest(view, field);
       }
       setQuery == null ? void 0 : setQuery(rootQuery.build());
-    }
+    },
+    search
   });
 }
 function AddMenu({
@@ -33818,11 +33900,19 @@ function AddMenu({
   view
 }) {
   const [open, setOpen] = useState(false);
+  const [active, setActive] = useState("");
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const [search, setSearch] = useState("");
   const segment = getSegmentIfPresent(view);
+  const toggleActive = (toggle) => {
+    if (toggle === active) {
+      setActive("");
+    } else {
+      setActive(toggle);
+    }
+  };
   return /* @__PURE__ */ jsxs(Root2$2, {
     open,
     onOpenChange: (open2) => {
@@ -33853,87 +33943,162 @@ function AddMenu({
             icon: "search",
             value: search,
             onChange: setSearch,
-            placeholder: "Search..."
+            placeholder: "Search...",
+            customStyle: styles$c.search
           })
-        }), /* @__PURE__ */ jsx(Divider, {}), search ? /* @__PURE__ */ jsxs("div", {
-          style: {
-            overflow: "auto",
-            overflowY: "scroll",
-            flex: 1
+        }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs("div", {
+          ...{
+            className: "mly78zum5 mly1odjw0f mlywib8y2 mly1xyq3li"
           },
-          children: [/* @__PURE__ */ jsx(FieldList, {
-            view,
-            fields: getInputSchemaFromViewParent(view).fields,
-            filter: (_2, field, path) => !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field),
-            types: ["dimension", "measure", "view"],
-            onAddOperation: function(field, path) {
-              if (field.kind === "dimension") {
-                addGroupBy(view, field, path);
-              } else if (field.kind === "measure") {
-                addAggregate(view, field, path);
-              } else {
-                addNest(view, field);
-              }
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
+          children: [search && !active ? /* @__PURE__ */ jsxs("div", {
+            ...{
+              className: "mly1odjw0f"
             },
-            search
-          }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ValueList, {
-            search,
-            onClick: (value) => {
-              const path = value.fieldName.split(".");
-              const name = path.pop();
-              const segment2 = view.getOrAddDefaultSegment();
-              segment2.addWhere(name, path, {
-                kind: "string",
-                parsed: {
-                  operator: "=",
-                  values: [value.fieldValue ?? "∅"]
+            children: [/* @__PURE__ */ jsx(FieldList, {
+              view,
+              fields: getInputSchemaFromViewParent(view).fields,
+              filter: (_2, field, path) => !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field),
+              types: ["dimension", "measure", "view"],
+              onAddOperation: function(field, path) {
+                if (field.kind === "dimension") {
+                  addGroupBy(view, field, path);
+                } else if (field.kind === "measure") {
+                  addAggregate(view, field, path);
+                } else {
+                  addNest(view, field);
                 }
-              });
-              setQuery == null ? void 0 : setQuery(rootQuery.build());
-            }
-          })]
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(AddGroupBy, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(AddAggregate, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(AddWhere, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(AddView, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(AddLimit, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(AddOrderBy, {
-            rootQuery,
-            view
-          }), /* @__PURE__ */ jsx(AddEmptyNest, {
-            rootQuery,
-            view
+                setQuery == null ? void 0 : setQuery(rootQuery.build());
+              },
+              search
+            }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ValueList, {
+              search,
+              onClick: (value) => {
+                const path = value.fieldName.split(".");
+                const name = path.pop();
+                const segment2 = view.getOrAddDefaultSegment();
+                segment2.addWhere(name, path, {
+                  kind: "string",
+                  parsed: {
+                    operator: "=",
+                    values: [value.fieldValue ?? "∅"]
+                  }
+                });
+                setQuery == null ? void 0 : setQuery(rootQuery.build());
+              }
+            })]
+          }) : /* @__PURE__ */ jsxs("div", {
+            "data-testid": "add-menu-operations",
+            ...{
+              className: "mly18kybhu"
+            },
+            children: [/* @__PURE__ */ jsx(AddItem, {
+              icon: /* @__PURE__ */ jsx(Icon, {
+                name: "groupBy"
+              }),
+              label: "Add group by",
+              onClick: () => toggleActive("group_by"),
+              open: active === "group_by"
+            }), /* @__PURE__ */ jsx(AddItem, {
+              icon: /* @__PURE__ */ jsx(Icon, {
+                name: "aggregate"
+              }),
+              label: "Add aggregate",
+              onClick: () => toggleActive("aggregate"),
+              open: active === "aggregate"
+            }), /* @__PURE__ */ jsx(AddItem, {
+              icon: /* @__PURE__ */ jsx(Icon, {
+                name: "filter"
+              }),
+              label: "Add filter",
+              onClick: () => toggleActive("where"),
+              open: active === "where"
+            }), /* @__PURE__ */ jsx(AddItem, {
+              icon: /* @__PURE__ */ jsx(Icon, {
+                name: "view"
+              }),
+              label: "Add view",
+              onClick: () => toggleActive("view"),
+              open: active === "view"
+            }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(AddLimit, {
+              rootQuery,
+              view
+            }), /* @__PURE__ */ jsx(AddItem, {
+              icon: /* @__PURE__ */ jsx(Icon, {
+                name: "orderBy"
+              }),
+              label: "Order by",
+              onClick: () => toggleActive("order_by"),
+              open: active === "order_by"
+            }), /* @__PURE__ */ jsx(AddEmptyNest, {
+              rootQuery,
+              view
+            })]
+          }), /* @__PURE__ */ jsxs("div", {
+            "data-testid": "add-menu-right-column",
+            style: {
+              overflowY: "auto"
+            },
+            children: [active === "group_by" && /* @__PURE__ */ jsx(AddGroupBy, {
+              rootQuery,
+              view,
+              search
+            }), active === "aggregate" && /* @__PURE__ */ jsx(AddAggregate, {
+              rootQuery,
+              view,
+              search
+            }), active === "where" && /* @__PURE__ */ jsx(AddWhere, {
+              rootQuery,
+              view,
+              search
+            }), active === "view" && /* @__PURE__ */ jsx(AddView, {
+              rootQuery,
+              view,
+              search
+            }), active === "order_by" && /* @__PURE__ */ jsx(AddOrderBy, {
+              rootQuery,
+              view,
+              search
+            })]
           })]
         })]
       })
     })]
   });
 }
+const styles$c = {
+  search: {
+    width: "mlyh8yej3",
+    $$css: true
+  }
+};
 function NestOperations({
   rootQuery,
   view,
   nests
+}) {
+  if (nests.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", {
+    ..._stylex.props(styles$s.tokenContainer),
+    children: nests.map((nest) => /* @__PURE__ */ jsx(NestOperation, {
+      rootQuery,
+      view,
+      nest
+    }, nest.name))
+  });
+}
+function NestOperation({
+  rootQuery,
+  view,
+  nest
 }) {
   const {
     setQuery
   } = useContext(QueryEditorContext);
   const [renameOpen, setRenameOpen] = useState(false);
-  if (nests.length === 0) {
-    return null;
-  }
-  const getControls = (nest) => /* @__PURE__ */ jsxs(Fragment, {
+  const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
+  const getControls = (nest2) => /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsxs(DropdownMenu, {
       trigger: /* @__PURE__ */ jsx(Button, {
         variant: "flat",
@@ -33945,7 +34110,7 @@ function NestOperations({
         icon: "clear",
         label: "Delete Query",
         onClick: () => {
-          nest.delete();
+          nest2.delete();
           setQuery == null ? void 0 : setQuery(rootQuery.build());
         }
       }), /* @__PURE__ */ jsx(DropdownMenuItem, {
@@ -33956,37 +34121,31 @@ function NestOperations({
       })]
     }), /* @__PURE__ */ jsx(AddMenu, {
       rootQuery,
-      view: nest.view
+      view: nest2.view
     })]
   });
-  return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$p.tokenContainer),
-    children: nests.map((nest) => {
-      const defaultOpen = nest.view.definition.node.kind === "segment" && nest.view.definition.node.operations.length === 0;
-      return /* @__PURE__ */ jsxs("div", {
-        ...{
-          className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
-        },
-        children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
-          title: nest.name,
-          icon: viewToVisualizationIcon(nest.view),
-          defaultOpen,
-          controls: getControls(nest),
-          collapsedControls: getControls(nest),
-          children: /* @__PURE__ */ jsx(View, {
-            rootQuery,
-            view: nest.view
-          })
-        }), /* @__PURE__ */ jsx(RenameDialog, {
-          rootQuery,
-          view,
-          target: nest,
-          open: renameOpen,
-          setOpen: setRenameOpen
-        })]
-      }, nest.name);
-    })
-  });
+  return /* @__PURE__ */ jsxs("div", {
+    ...{
+      className: "mlyj3b58b mly1yf7rl7 mly1xmf6yo mlyh8yej3"
+    },
+    children: [/* @__PURE__ */ jsx(CollapsiblePanel, {
+      title: nest.name,
+      icon: viewToVisualizationIcon(nest.view),
+      defaultOpen,
+      controls: getControls(nest),
+      collapsedControls: getControls(nest),
+      children: /* @__PURE__ */ jsx(View, {
+        rootQuery,
+        view: nest.view
+      })
+    }), /* @__PURE__ */ jsx(RenameDialog, {
+      rootQuery,
+      view,
+      target: nest,
+      open: renameOpen,
+      setOpen: setRenameOpen
+    })]
+  }, nest.name);
 }
 function Operations({
   rootQuery,
@@ -34225,30 +34384,23 @@ function Query({
     }) : null]
   });
 }
-const ExplorerPanelsContext = /* @__PURE__ */ React.createContext({
-  isSourcePanelOpen: true,
-  setIsSourcePanelOpen: void 0
-});
 function Source({
   rootQuery
 }) {
-  const {
-    isSourcePanelOpen,
-    setIsSourcePanelOpen
-  } = useContext(ExplorerPanelsContext);
-  if (!(isSourcePanelOpen && setIsSourcePanelOpen) && rootQuery.definition instanceof ASTArrowQueryDefinition) {
-    return /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$p.queryCard, styles$a.content),
-      children: [/* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$p.labelWithIcon),
+  if (rootQuery.definition instanceof ASTArrowQueryDefinition) {
+    return /* @__PURE__ */ jsx("div", {
+      ..._stylex.props(styles$s.queryCard, styles$a.content),
+      children: /* @__PURE__ */ jsxs("div", {
+        ..._stylex.props(styles$s.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
-        }), rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name]
-      }), setIsSourcePanelOpen && /* @__PURE__ */ jsx(Button, {
-        variant: "flat",
-        onClick: () => setIsSourcePanelOpen(true),
-        label: "Open data panel"
-      })]
+        }), /* @__PURE__ */ jsx("div", {
+          ...{
+            className: "mlyb3r6kr mlylyipyv"
+          },
+          children: rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name
+        })]
+      })
     });
   }
   return null;
@@ -34257,7 +34409,7 @@ const styles$a = {
   content: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
-    gridTemplateColumns: "mly52fmzj",
+    gridTemplateColumns: "mlybyjr8",
     gap: "mly1jnr06f",
     rowGap: null,
     columnGap: null,
@@ -34745,7 +34897,7 @@ function RunInfoHover({
         children: /* @__PURE__ */ jsx(HoverCard, {
           customStyle: styles$5.card,
           children: /* @__PURE__ */ jsxs(Fragment, {
-            children: [(runInfo == null ? void 0 : runInfo.performanceAspects) && Object.entries(runInfo.performanceAspects).map(([aspect, properties2]) => {
+            children: [runInfo.customContent, (runInfo == null ? void 0 : runInfo.performanceAspects) && Object.entries(runInfo.performanceAspects).map(([aspect, properties2]) => {
               return /* @__PURE__ */ jsx("div", {
                 children: Object.entries(properties2).map(([k2, v2]) => /* @__PURE__ */ jsxs("div", {
                   children: [/* @__PURE__ */ jsxs("span", {
@@ -34759,6 +34911,8 @@ function RunInfoHover({
               }, aspect);
             }), runInfo.queryLink && /* @__PURE__ */ jsx("a", {
               href: runInfo.queryLink.href,
+              target: "_blank",
+              rel: "noreferrer",
               ..._stylex.props(styles$5.link, fontStyles.link),
               children: runInfo.queryLink.linkText
             })]
@@ -35816,7 +35970,7 @@ function FieldTokenWithActions({
     }
   });
 }
-const FIELD_KIND_ORDER = ["view", "dimension", "measure"];
+const FIELD_KIND_ORDER = ["dimension", "measure", "view"];
 function SearchResultList({
   source,
   items
@@ -35829,7 +35983,7 @@ function SearchResultList({
   }, [source, items]);
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mly78zum5 mlydt5ytf mly1cy8zhl mlyou54vl mlye8ttls"
+      className: "mly78zum5 mlydt5ytf mly1cy8zhl mlyou54vl mlye8ttls mly10cdfl8"
     },
     children: [/* @__PURE__ */ jsx("div", {
       ..._stylex.props(fontStyles.body, styles$2.heading),
@@ -35886,17 +36040,29 @@ const getSublabelFromPath = (source, path) => {
 };
 function FieldGroupList({
   source,
-  title,
-  items
+  fieldItems,
+  fieldGroupType
 }) {
-  return /* @__PURE__ */ jsxs("div", {
+  const fieldGroupsByKindByPath = React.useMemo(() => {
+    if (source) {
+      return groupFieldItemsByKind(fieldItems).map((group) => ({
+        ...group,
+        items: groupFieldItemsByPath(source, group.items)
+      }));
+    }
+    return [];
+  }, [source, fieldItems]);
+  const items = React.useMemo(() => {
+    var _a2;
+    return ((_a2 = fieldGroupsByKindByPath.find(({
+      group
+    }) => group === fieldGroupType)) == null ? void 0 : _a2.items) ?? [];
+  }, [fieldGroupsByKindByPath, fieldGroupType]);
+  return /* @__PURE__ */ jsx("div", {
     ...{
       className: "mly78zum5 mlydt5ytf mly167g77z"
     },
-    children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(fontStyles.body, styles$1.title),
-      children: title
-    }), /* @__PURE__ */ jsx(List$1, {
+    children: /* @__PURE__ */ jsx(List$1, {
       children: items.map((item, index2) => /* @__PURE__ */ jsx(CollapsibleListItem, {
         label: getLabelFromPath(source, item.groupPath),
         sublabel: getSublabelFromPath(source, item.groupPath),
@@ -35909,36 +36075,19 @@ function FieldGroupList({
           path
         }, [...path, field.name].join(".")))
       }, item.groupPath.join(".")))
-    })]
+    })
   });
 }
-const styles$1 = {
-  title: {
-    padding: "mlye8ttls",
-    paddingInline: null,
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: null,
-    paddingTop: null,
-    paddingBottom: null,
-    fontWeight: "mly1xlr1w8",
-    $$css: true
-  }
-};
 function SourcePanel({
   onRefresh
 }) {
   const {
     source
   } = React.useContext(QueryEditorContext);
-  const [subpanelType, setSubpanelType] = React.useState(null);
   const [searchQuery, setSearchQuery] = React.useState("");
   const {
-    isSourcePanelOpen,
-    setIsSourcePanelOpen
-  } = useContext(ExplorerPanelsContext);
+    onCollapse
+  } = useContext(ResizableCollapsiblePanelContext);
   const fieldItems = React.useMemo(() => {
     if (source) {
       return sourceToFieldItems(source).filter((fi) => !hasExplorerFilterFieldAnnotation(fi.field.annotations ?? []));
@@ -35950,40 +36099,26 @@ function SourcePanel({
   const dimensions = fieldItems.filter((item) => item.field.kind === "dimension");
   const searchResultItems = React.useMemo(() => {
     if (searchQuery) {
-      return fieldItems.filter((item) => item.field.name.includes(searchQuery));
+      const lcSearch = searchQuery.toLocaleLowerCase();
+      return fieldItems.filter((item) => item.field.name.toLocaleLowerCase().includes(lcSearch));
     }
     return [];
   }, [fieldItems, searchQuery]);
-  const fieldGroupsByKindByPath = React.useMemo(() => {
-    if (source) {
-      return groupFieldItemsByKind(fieldItems).map((group) => ({
-        ...group,
-        items: groupFieldItemsByPath(source, group.items)
-      }));
-    }
-    return [];
-  }, [source, fieldItems]);
-  const fieldGroupList = React.useMemo(() => {
-    var _a2;
-    return ((_a2 = fieldGroupsByKindByPath.find(({
-      group
-    }) => group === subpanelType)) == null ? void 0 : _a2.items) ?? [];
-  }, [fieldGroupsByKindByPath, subpanelType]);
   const isSearchActive = !!searchQuery;
-  if (!isSourcePanelOpen || !source) {
+  if (!source) {
     return null;
   }
   return /* @__PURE__ */ jsxs("div", {
     ...{
-      className: "mly78zum5 mlydt5ytf mly2lah0s mlyh8yej3 mly5yr21d mly1dr8pv1 mlyy8678h"
+      className: "mly78zum5 mlydt5ytf mly5yr21d mly1gzqxud mlyfuqftd"
     },
     children: [/* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(fontStyles.body, styles.header),
+      ..._stylex.props(fontStyles.body, styles$1.header),
       children: [/* @__PURE__ */ jsxs("div", {
         ...{
           className: "mly78zum5 mly1qughib"
         },
-        children: [subpanelType == null ? /* @__PURE__ */ jsxs("div", {
+        children: [/* @__PURE__ */ jsxs("div", {
           ...{
             className: "mly78zum5 mly6s0dn4 mly167g77z mlydqdrvq mlyb3r6kr"
           },
@@ -35991,17 +36126,9 @@ function SourcePanel({
             name: "database",
             color: "gray"
           }), /* @__PURE__ */ jsx("div", {
-            ...{
-              className: "mlyb3r6kr mlylyipyv"
-            },
+            ..._stylex.props(fontStyles.largeBody, styles$1.title),
             children: source.name
           })]
-        }) : /* @__PURE__ */ jsx(Button, {
-          icon: "chevronLeft",
-          label: "Back",
-          variant: "flat",
-          size: "compact",
-          onClick: () => setSubpanelType(null)
         }), /* @__PURE__ */ jsxs("div", {
           ...{
             className: "mly78zum5"
@@ -36012,10 +36139,10 @@ function SourcePanel({
             onClick: onRefresh,
             size: "compact",
             variant: "flat"
-          }), setIsSourcePanelOpen && /* @__PURE__ */ jsx(Button, {
+          }), onCollapse && /* @__PURE__ */ jsx(Button, {
             icon: "sidebarCollapse",
             tooltip: "Close the source panel",
-            onClick: () => setIsSourcePanelOpen(false),
+            onClick: onCollapse,
             size: "compact",
             variant: "flat"
           })]
@@ -36028,71 +36155,69 @@ function SourcePanel({
         icon: "search",
         hasClear: true
       })]
-    }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(ScrollableArea, {
-      children: /* @__PURE__ */ jsx("div", {
-        ...{
-          className: "mly78zum5 mlydt5ytf mlye8ttls"
-        },
-        children: isSearchActive ? /* @__PURE__ */ jsx(SearchResultList, {
-          source,
-          items: searchResultItems
-        }) : subpanelType == null ? /* @__PURE__ */ jsxs(List$1, {
-          children: [/* @__PURE__ */ jsx(ListItem, {
-            label: "Views",
-            startIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "view",
-              color: "purple"
-            }),
-            badge: /* @__PURE__ */ jsx(Badge, {
-              label: views.length.toString(),
-              color: "purple"
-            }),
-            endIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "chevronRight",
-              color: "secondary"
-            }),
-            onClick: () => setSubpanelType("view")
-          }, "views"), /* @__PURE__ */ jsx(ListItem, {
-            label: "Dimensions",
-            startIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "dimension",
-              color: "cyan"
-            }),
-            badge: /* @__PURE__ */ jsx(Badge, {
-              label: dimensions.length.toString(),
-              color: "cyan"
-            }),
-            endIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "chevronRight",
-              color: "secondary"
-            }),
-            onClick: () => setSubpanelType("dimension")
-          }, "dimensions"), /* @__PURE__ */ jsx(ListItem, {
-            label: "Measures",
-            startIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "measure",
-              color: "green"
-            }),
-            badge: /* @__PURE__ */ jsx(Badge, {
-              label: measures.length.toString(),
-              color: "green"
-            }),
-            endIcon: /* @__PURE__ */ jsx(Icon, {
-              name: "chevronRight",
-              color: "secondary"
-            }),
-            onClick: () => setSubpanelType("measure")
-          }, "measures")]
-        }) : /* @__PURE__ */ jsx(FieldGroupList, {
-          source,
-          title: FIELD_KIND_TO_TITLE[subpanelType],
-          items: fieldGroupList
-        })
+    }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx("div", {
+      ...{
+        className: "mly78zum5 mlydt5ytf mlyysyzu8 mly1iyjqo2"
+      },
+      children: isSearchActive ? /* @__PURE__ */ jsx(SearchResultList, {
+        source,
+        items: searchResultItems
+      }) : /* @__PURE__ */ jsxs(AccordionList, {
+        defaultExpandedItemId: "views",
+        children: [/* @__PURE__ */ jsx(AccordionListItem, {
+          id: "dimensions",
+          label: "Dimensions",
+          startIcon: /* @__PURE__ */ jsx(Icon, {
+            name: "dimension",
+            color: "cyan"
+          }),
+          badge: /* @__PURE__ */ jsx(Badge, {
+            label: dimensions.length.toString(),
+            color: "cyan"
+          }),
+          children: /* @__PURE__ */ jsx(FieldGroupList, {
+            source,
+            fieldItems,
+            fieldGroupType: "dimension"
+          })
+        }, "dimensions"), /* @__PURE__ */ jsx(AccordionListItem, {
+          id: "measures",
+          label: "Measures",
+          startIcon: /* @__PURE__ */ jsx(Icon, {
+            name: "measure",
+            color: "green"
+          }),
+          badge: /* @__PURE__ */ jsx(Badge, {
+            label: measures.length.toString(),
+            color: "green"
+          }),
+          children: /* @__PURE__ */ jsx(FieldGroupList, {
+            source,
+            fieldItems,
+            fieldGroupType: "measure"
+          })
+        }, "measures"), /* @__PURE__ */ jsx(AccordionListItem, {
+          id: "views",
+          label: "Views",
+          startIcon: /* @__PURE__ */ jsx(Icon, {
+            name: "view",
+            color: "purple"
+          }),
+          badge: /* @__PURE__ */ jsx(Badge, {
+            label: views.length.toString(),
+            color: "purple"
+          }),
+          children: /* @__PURE__ */ jsx(FieldGroupList, {
+            source,
+            fieldItems,
+            fieldGroupType: "view"
+          })
+        }, "views")]
       })
     })]
   });
 }
-const styles = {
+const styles$1 = {
   header: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -36105,20 +36230,103 @@ const styles = {
     paddingBlock: null,
     paddingTop: null,
     paddingBottom: null,
-    color: "mly1ue28sr",
-    fontWeight: "mly1xlr1w8",
     gap: "mly167g77z",
     rowGap: null,
     columnGap: null,
     $$css: true
+  },
+  title: {
+    overflow: "mlyb3r6kr",
+    overflowX: null,
+    overflowY: null,
+    textOverflow: "mlylyipyv",
+    fontWeight: "mly1xlr1w8",
+    color: "mly1ue28sr",
+    $$css: true
+  }
+};
+function CollapsedPagePanel({
+  icon,
+  title,
+  tooltip
+}) {
+  const {
+    onExpand
+  } = React.useContext(ResizableCollapsiblePanelContext);
+  return /* @__PURE__ */ jsx("div", {
+    ...{
+      className: "mly78zum5 mlydt5ytf mly7a106z mlylqzeqv mly5yr21d mly1gzqxud mlyfuqftd"
+    },
+    children: /* @__PURE__ */ jsxs("div", {
+      ...{
+        className: "mly78zum5 mlydt5ytf mly6s0dn4 mlyl56j7k mly167g77z mlye8ttls"
+      },
+      children: [/* @__PURE__ */ jsx(Button, {
+        icon,
+        variant: "flat",
+        size: "compact",
+        tooltip,
+        onClick: onExpand
+      }), title && /* @__PURE__ */ jsx("div", {
+        ..._stylex.props(fontStyles.body, styles.title),
+        children: title
+      })]
+    })
+  });
+}
+const styles = {
+  title: {
+    fontWeight: "mly1xlr1w8",
+    cursor: "mlyt0e3qv",
+    "writing-mode": "mly35i7",
+    $$css: true
   }
 };
+function ResizableCollapsiblePanel({
+  isInitiallyExpanded = true,
+  initialWidth,
+  minWidth,
+  icon,
+  title,
+  children
+}) {
+  const [isExpanded, setIsExpanded] = React.useState(isInitiallyExpanded);
+  const [width, setWidth] = React.useState(initialWidth);
+  const isCollapsed = !isExpanded;
+  return /* @__PURE__ */ jsxs(ResizableCollapsiblePanelContext.Provider, {
+    value: {
+      onExpand: () => setIsExpanded(true),
+      onCollapse: () => setIsExpanded(false)
+    },
+    children: [/* @__PURE__ */ jsxs("div", {
+      ...{
+        0: {
+          className: "mly1n2onr6 mly5yr21d mly3psx0u"
+        },
+        1: {
+          className: "mly1n2onr6 mly5yr21d mly3psx0u mly1s85apg"
+        }
+      }[!!isCollapsed << 0],
+      style: {
+        width: `${width}px`
+      },
+      children: [children, /* @__PURE__ */ jsx(ResizeBar, {
+        width: initialWidth,
+        minWidth,
+        onWidthChange: setWidth
+      })]
+    }), isCollapsed && /* @__PURE__ */ jsx(CollapsedPagePanel, {
+      icon,
+      title
+    })]
+  });
+}
 export {
-  ExplorerPanelsContext,
   MalloyExplorerProvider,
   QueryActionBar,
   QueryEditor,
   QueryPanel,
+  ResizableCollapsiblePanel,
   ResizeBar,
   ResultPanel,
   SourcePanel