@malloydata/malloy-explorer 0.0.295-dev250710213205 → 0.0.299-dev250808170326

package/dist/cjs/index.cjs

@@ -17,7 +17,7 @@ var _a, _b, _captureMap, _compiled, _pattern, _nameMap, _strategy, __EmulatedReg
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
-const QB = require("@malloydata/malloy-query-builder");
+const malloyQueryBuilder = require("@malloydata/malloy-query-builder");
 const malloyTag = require("@malloydata/malloy-tag");
 const render = require("@malloydata/render");
 const malloyFilter = require("@malloydata/malloy-filter");
@@ -39,7 +39,6 @@ function _interopNamespaceDefault(e) {
   return Object.freeze(n);
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const QB__namespace = /* @__PURE__ */ _interopNamespaceDefault(QB);
 const ReactDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactDOM);
 function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
   return function handleEvent(event) {
@@ -3329,11 +3328,14 @@ var Root3$1 = Tooltip;
 var Trigger$4 = TooltipTrigger;
 var Portal$4 = TooltipPortal;
 var Content2$4 = TooltipContent;
-const QueryEditorContext = /* @__PURE__ */ React__namespace.createContext({});
+const QueryEditorContext = /* @__PURE__ */ React__namespace.createContext({
+  setQuery: () => {
+  }
+});
 function useQueryBuilder(source, query) {
   return React.useMemo(() => {
     if (source) {
-      return new QB__namespace.ASTQuery({
+      return new malloyQueryBuilder.ASTQuery({
         query,
         source
       });
@@ -3363,7 +3365,7 @@ function MalloyQueryFocusProvider({
     }
     if (rootQuery) {
       const queryDef = rootQuery.definition;
-      if (queryDef instanceof QB.ASTArrowQueryDefinition) {
+      if (queryDef instanceof malloyQueryBuilder.ASTArrowQueryDefinition) {
         return findNestView(queryDef.view, [...focusedNestViewPath].reverse());
       }
     }
@@ -3397,12 +3399,12 @@ const findNestView = (currentView, remainingPath) => {
   if (remainingPath.length === 0) {
     return null;
   }
-  if (currentView instanceof QB.ASTArrowViewDefinition) {
+  if (currentView instanceof malloyQueryBuilder.ASTArrowViewDefinition) {
     return findNestView(currentView.view, remainingPath);
   }
-  if (currentView instanceof QB.ASTSegmentViewDefinition) {
+  if (currentView instanceof malloyQueryBuilder.ASTSegmentViewDefinition) {
     const currentNestName = remainingPath.pop();
-    const currentNestOperation = currentView.operations.items.find((operation) => operation instanceof QB.ASTNestViewOperation && operation.name === currentNestName);
+    const currentNestOperation = currentView.operations.items.find((operation) => operation instanceof malloyQueryBuilder.ASTNestViewOperation && operation.name === currentNestName);
     if (currentNestOperation === void 0) {
       remainingPath.push(currentNestName);
       return null;
@@ -3412,15 +3414,34 @@ const findNestView = (currentView, remainingPath) => {
       return findNestView(currentNestOperation.view.definition, remainingPath);
     }
   }
-  if (currentView instanceof QB.ASTRefinementViewDefinition) {
+  if (currentView instanceof malloyQueryBuilder.ASTRefinementViewDefinition) {
     return findNestView(currentView.refinement, remainingPath);
   }
   return null;
 };
+const UpdateQueryContext = /* @__PURE__ */ React.createContext({
+  updateQuery: () => {
+    console.warn("Missing <MalloyExplorerProvider>");
+  }
+});
+function useUpdateQuery() {
+  const {
+    updateQuery
+  } = React.useContext(UpdateQueryContext);
+  return updateQuery;
+}
+const TopValuesContext = /* @__PURE__ */ React.createContext({});
+function useTopValues() {
+  const {
+    topValues
+  } = React.useContext(TopValuesContext);
+  return topValues;
+}
 function MalloyExplorerProvider({
   source,
   query,
-  onQueryChange,
+  onQueryChange = () => {
+  },
   focusedNestViewPath,
   onFocusedNestViewPathChange,
   children,
@@ -3428,20 +3449,32 @@ function MalloyExplorerProvider({
   onDrill
 }) {
   const rootQuery = useQueryBuilder(source, query);
+  const updateQuery = React.useCallback(() => {
+    onQueryChange == null ? void 0 : onQueryChange(rootQuery == null ? void 0 : rootQuery.build());
+  }, [onQueryChange, rootQuery]);
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, {
     children: /* @__PURE__ */ jsxRuntime.jsx(MalloyQueryFocusProvider, {
       rootQuery,
       focusedNestViewPath,
       onFocusedNestViewPathChange,
-      children: /* @__PURE__ */ jsxRuntime.jsx(QueryEditorContext.Provider, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(UpdateQueryContext.Provider, {
         value: {
-          source,
-          rootQuery,
-          setQuery: onQueryChange,
-          topValues,
-          onDrill
+          updateQuery
         },
-        children
+        children: /* @__PURE__ */ jsxRuntime.jsx(TopValuesContext.Provider, {
+          value: {
+            topValues
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(QueryEditorContext.Provider, {
+            value: {
+              source,
+              rootQuery,
+              setQuery: onQueryChange,
+              onDrill
+            },
+            children
+          })
+        })
       })
     })
   });
@@ -3813,6 +3846,7 @@ const SvgInfo = (props2) => /* @__PURE__ */ React__namespace.createElement("svg"
 const SvgError = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", { fill: "none", stroke: "currentColor" }, /* @__PURE__ */ React__namespace.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__namespace.createElement("path", { d: "m9.9 2 2.89 2.89-3 3.01" })));
 const SvgSidebarCollapse = (props2) => /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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 SvgDownload = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { width: "24px", height: "24px", viewBox: "0 0 80 80", fill: "currentColor", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", null, /* @__PURE__ */ React__namespace.createElement("path", { d: "M19.5833333,78.3333333 L74.4166667,78.3333333 L74.4166667,70.5 L19.5833333,70.5 L19.5833333,78.3333333 Z M74.4166667,35.25 L58.75,35.25 L58.75,11.75 L35.25,11.75 L35.25,35.25 L19.5833333,35.25 L47,62.6666667 L74.4166667,35.25 Z", fillRule: "nonzero", fill: "var(--vscode-icon-foreground)" })));
 const SvgFilterSliders = (props2) => /* @__PURE__ */ React__namespace.createElement("svg", { fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React__namespace.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__namespace.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", { id: "viz_bar_chart", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React__namespace.createElement("g", { id: "Group-3", transform: "translate(20.000000, 24.000000)", fill: "currentColor" }, /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.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__namespace.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__namespace.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React__namespace.createElement("g", { id: "viz_boolean", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React__namespace.createElement("g", { id: "noun_switch_3350414-2", transform: "translate(20.000000, 22.000000)", fill: "currentColor", fillRule: "nonzero" }, /* @__PURE__ */ React__namespace.createElement("g", { id: "noun_switch_3350414" }, /* @__PURE__ */ React__namespace.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__namespace.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__namespace.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__namespace.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" })))));
@@ -3855,6 +3889,7 @@ const ICON_MAP = {
   refresh: SvgRefresh,
   sidebarCollapse: SvgSidebarCollapse,
   filterSliders: SvgFilterSliders,
+  download: SvgDownload,
   // Operations
   aggregate: SvgInsertMeasure,
   dimension: SvgTypeIconString,
@@ -3922,11 +3957,11 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
-    ..._stylex.props(styles$Q.main, colorVariants$3[color], customStyle),
+    ..._stylex.props(styles$R.main, colorVariants$3[color], customStyle),
     "data-testid": `icon-${color}-${name}`
   });
 }
-const styles$Q = {
+const styles$R = {
   main: {
     display: "mly1rg5ohu",
     width: "mly1kky2od",
@@ -3995,18 +4030,18 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$P.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$Q.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
       "data-testid": "badge-label",
-      ..._stylex.props(fontStyles.badge, styles$P.label),
+      ..._stylex.props(fontStyles.badge, styles$Q.label),
       children: label
     })]
   });
 }
-const styles$P = {
+const styles$Q = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -4088,10 +4123,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$O.main, orientationVariants[orientation], customStyle)
+    ..._stylex.props(styles$P.main, orientationVariants[orientation], customStyle)
   });
 }
-const styles$O = {
+const styles$P = {
   main: {
     background: "mly1xnbgy5",
     backgroundAttachment: null,
@@ -4897,7 +4932,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ jsxRuntime.jsxs("button", {
-    ..._stylex.props(styles$N.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
+    ..._stylex.props(styles$O.main, colorVariants$1[variant], sizeVariants$1[size2], customStyle),
     type: "button",
     disabled: isDisabled,
     ...props2,
@@ -4907,9 +4942,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
         name: icon,
-        customStyle: styles$N.icon
+        customStyle: styles$O.icon
       }), label && /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$N.label),
+        ..._stylex.props(variant === "primary" ? fontStyles.emphasized : fontStyles.body, styles$O.label),
         children: label
       })]
     }), isDisabled && /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -4936,7 +4971,7 @@ function Button({
     return button;
   }
 }
-const styles$N = {
+const styles$O = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5187,7 +5222,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$M.nonInteractive, customStyle),
+    ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], !isInteractive && styles$N.nonInteractive, customStyle),
     ...dragProps == null ? void 0 : dragProps.attributes,
     ...dragProps == null ? void 0 : dragProps.listeners,
     children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
@@ -5224,7 +5259,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$M = {
+const styles$N = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5248,7 +5283,7 @@ function TokenGroup({
 }) {
   const count2 = React__namespace.Children.count(children);
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$L.main, customStyle),
+    ..._stylex.props(styles$M.main, customStyle),
     children: React__namespace.Children.map(children, (child, index2) => /* @__PURE__ */ React__namespace.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5259,16 +5294,16 @@ function TokenGroup({
   });
 }
 const getChildStyle = (index2, count2) => {
-  if (count2 === 1) return styles$L.onlyChild;
-  if (index2 === 0) return styles$L.firstChild;
-  if (index2 === count2 - 1) return styles$L.lastChild;
-  return styles$L.innerChild;
+  if (count2 === 1) return styles$M.onlyChild;
+  if (index2 === 0) return styles$M.firstChild;
+  if (index2 === count2 - 1) return styles$M.lastChild;
+  return styles$M.innerChild;
 };
 const getTokenColor = (child, groupColor) => {
   const childColor = child.props.color;
   return childColor === void 0 ? groupColor : childColor;
 };
-const styles$L = {
+const styles$M = {
   main: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -5340,7 +5375,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: "warning",
-          customStyle: styles$K.errorIcon
+          customStyle: styles$L.errorIcon
         })
       })
     }), /* @__PURE__ */ jsxRuntime.jsx(TooltipPortal, {
@@ -5353,7 +5388,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$K = {
+const styles$L = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5398,22 +5433,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$J.focused, !!errorMessage && styles$J.hasError, customStyle),
+      ..._stylex.props(tokenStyles.main, tokenColorVariants[color], tokenSizeVariants[size2], isFocused && styles$K.focused, !!errorMessage && styles$K.hasError, customStyle),
       children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
         name: icon,
-        customStyle: styles$J.icon
+        customStyle: styles$K.icon
       }), /* @__PURE__ */ jsxRuntime.jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$J.placeholder),
+          ..._stylex.props(fontStyles.body, styles$K.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ jsxRuntime.jsx("input", {
-          ..._stylex.props(styles$J.input, fontStyles.body),
+          ..._stylex.props(styles$K.input, fontStyles.body),
           ref: inputRef,
           pattern: type === "number" ? "^-?[0-9.]*$" : void 0,
           value,
@@ -5438,7 +5473,7 @@ function EditableToken({
     })]
   });
 }
-const styles$J = {
+const styles$K = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7780,12 +7815,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$I.main, isFocused && styles$I.focused, sizeVariants[size2], customStyle),
+    ..._stylex.props(styles$J.main, isFocused && styles$J.focused, sizeVariants[size2], customStyle),
     children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsxRuntime.jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$I.input),
+      ..._stylex.props(fontStyles.body, styles$J.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7793,7 +7828,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ jsxRuntime.jsx("button", {
-      ..._stylex.props(fontStyles.supporting, styles$I.actionButton, value === "" && styles$I.hidden),
+      ..._stylex.props(fontStyles.supporting, styles$J.actionButton, value === "" && styles$J.hidden),
       ref: buttonRef,
       onClick: () => onChange(""),
       tabIndex: 0,
@@ -7801,7 +7836,7 @@ function TextInput({
     })]
   });
 }
-const styles$I = {
+const styles$J = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -8010,7 +8045,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ jsxRuntime.jsxs(Trigger$3, {
-      ..._stylex.props(tokenStyles.main, styles$H.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], customStyle),
+      ..._stylex.props(tokenStyles.main, styles$I.selectTrigger, tokenColorVariants[color], tokenSizeVariants[size2], customStyle),
       children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8037,7 +8072,7 @@ function SelectorToken({
             size: "compact",
             icon: "search",
             hasClear: true,
-            customStyle: styles$H.searchInput,
+            customStyle: styles$I.searchInput,
             onKeyDown: (event) => {
               const excludedKeys = ["ArrowUp", "ArrowDown"];
               if (!excludedKeys.includes(event.key)) {
@@ -8068,21 +8103,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$H.selectItem),
+    ..._stylex.props(fontStyles.body, styles$I.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$H.radioChecked
+      customStyle: styles$I.radioChecked
     }) : /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$H.radioUnchecked
+      customStyle: styles$I.radioUnchecked
     }), /* @__PURE__ */ jsxRuntime.jsx(ItemText, {
       children
     })]
   });
 }
-const styles$H = {
+const styles$I = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8172,7 +8207,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$G.container, customStyle),
+    ..._stylex.props(styles$H.container, customStyle),
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8186,7 +8221,7 @@ function Card({
     })]
   });
 }
-const styles$G = {
+const styles$H = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8279,7 +8314,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: icon,
-          customStyle: styles$F.icon
+          customStyle: styles$G.icon
         }), /* @__PURE__ */ jsxRuntime.jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp mly117nqv4"
@@ -8321,7 +8356,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$F = {
+const styles$G = {
   icon: {
     $$css: true
   }
@@ -8353,10 +8388,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$E.label),
+          ..._stylex.props(fontStyles.body, styles$F.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$E.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$F.sublabel),
           children: sublabel
         })]
       })]
@@ -8368,7 +8403,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$E = {
+const styles$F = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19182,7 +19217,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$D.root, customStyle),
+    ..._stylex.props(styles$E.root, customStyle),
     children: /* @__PURE__ */ jsxRuntime.jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19202,7 +19237,7 @@ function Spinner({
     })
   });
 }
-const styles$D = {
+const styles$E = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -22271,7 +22306,7 @@ function toArray() {
     m.millisecond()
   ];
 }
-function toObject() {
+function toObject$1() {
   var m = this;
   return {
     years: m.year(),
@@ -22709,7 +22744,7 @@ proto.set = stringSet;
 proto.startOf = startOf;
 proto.subtract = subtract$1;
 proto.toArray = toArray;
-proto.toObject = toObject;
+proto.toObject = toObject$1;
 proto.toDate = toDate;
 proto.toISOString = toISOString;
 proto.inspect = inspect;
@@ -23600,7 +23635,7 @@ const Popover = ({
     })
   });
 };
-const styles$C = {
+const styles$D = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23652,7 +23687,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$C.wrapper, customStyle),
+    ..._stylex.props(styles$D.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxRuntime.jsxs("button", {
       type: "button",
       autoFocus,
@@ -23720,7 +23755,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = React.useState(null);
   return /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$C.selectListDiv, customStyle),
+      ..._stylex.props(styles$D.selectListDiv, customStyle),
       children: options.reduce((result, option2, index2) => {
         const isSelected = value !== void 0 && valueEqual(value, option2.value);
         if (option2.divider) {
@@ -23752,8 +23787,8 @@ function SelectList({
           }), /* @__PURE__ */ jsxRuntime.jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$C.checkIcon,
-              ...isSelected ? styles$C.checkIconSelected : void 0
+              ...styles$D.checkIcon,
+              ...isSelected ? styles$D.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsxRuntime.jsx("span", {
             ...{
@@ -23805,7 +23840,7 @@ const DateInput = ({
     setTempValue(hooks.utc(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ jsxRuntime.jsx("input", {
-    ..._stylex.props(customStyle, isActive ? styles$B.active : null),
+    ..._stylex.props(customStyle, isActive ? styles$C.active : null),
     type: "text",
     placeholder: placeholder || format2,
     value: tempValue,
@@ -23840,7 +23875,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$B = {
+const styles$C = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -23952,7 +23987,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$A.outer, customStyle),
+    ..._stylex.props(styles$B.outer, customStyle),
     ref: forwardRef,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
@@ -24268,7 +24303,7 @@ function DatePicker({
     })]
   });
 }
-const styles$A = {
+const styles$B = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24354,7 +24389,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ..._stylex.props(styles$z.header, variantColors[variant], children ? styles$z.headerWithContent : null),
+      ..._stylex.props(styles$A.header, variantColors[variant], children ? styles$A.headerWithContent : null),
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24367,22 +24402,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-          ..._stylex.props(styles$z.title, fontStyles.emphasized),
+          ..._stylex.props(styles$A.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-          ..._stylex.props(styles$z.description, fontStyles.supporting),
+          ..._stylex.props(styles$A.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$z.content, fontStyles.body),
+      ..._stylex.props(styles$A.content, fontStyles.body),
       children: /* @__PURE__ */ jsxRuntime.jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$z = {
+const styles$A = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24524,14 +24559,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$y.main, customStyle),
+      ..._stylex.props(styles$z.main, customStyle),
       children: React__namespace.Children.map(children, (child) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [child, /* @__PURE__ */ jsxRuntime.jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$y = {
+const styles$z = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24568,10 +24603,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$x.label),
+          ..._stylex.props(fontStyles.body, styles$y.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$y.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24583,7 +24618,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$x = {
+const styles$y = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25868,7 +25903,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsxRuntime.jsx(Portal2, {
       children: /* @__PURE__ */ jsxRuntime.jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$w.content),
+        ..._stylex.props(fontStyles.body, styles$x.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25895,22 +25930,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: icon,
-      customStyle: styles$w.icon
+      customStyle: styles$x.icon
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsxRuntime.jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$w.label),
+        ..._stylex.props(fontStyles.body, styles$x.label),
         children: label
       }), sublabel && /* @__PURE__ */ jsxRuntime.jsx("span", {
-        ..._stylex.props(fontStyles.supporting, styles$w.sublabel),
+        ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
         children: sublabel
       })]
     })]
   });
 }
-const styles$w = {
+const styles$x = {
   content: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -25994,7 +26029,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$v.title),
+        ..._stylex.props(fontStyles.largeBody, styles$w.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -26004,9 +26039,9 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsxRuntime.jsx(Button, {
         onClick: () => {
           focusMainView();
-          setQuery == null ? void 0 : setQuery(void 0);
+          setQuery(void 0);
         },
-        isDisabled: !rootQuery || (rootQuery == null ? void 0 : rootQuery.isEmpty()),
+        isDisabled: !rootQuery || rootQuery.isEmpty(),
         label: "Clear",
         variant: "flat",
         size: "compact"
@@ -26039,13 +26074,13 @@ function QueryActionBar({
     })]
   });
 }
-const styles$v = {
+const styles$w = {
   title: {
     fontWeight: "mly1xlr1w8",
     $$css: true
   }
 };
-const styles$u = {
+const styles$v = {
   labelWithIcon: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -26216,6 +26251,7 @@ function fieldToIcon(field) {
       break;
     case "dimension":
     case "measure":
+    case "calculate":
       icon = atomicTypeToIcon(field.type.kind);
       break;
     case "join":
@@ -26227,8 +26263,7 @@ function fieldToIcon(field) {
 function relationshipToIcon(relationship) {
   return relationshipMap[relationship];
 }
-function viewToVisualizationIcon(view) {
-  const currentTag = view.getTag();
+function tagToVisualization(currentTag) {
   const currentRenderer = tagToRenderer(currentTag) ?? "table";
   return `viz_${currentRenderer}`;
 }
@@ -26248,6 +26283,7 @@ const fieldKindMap = {
   view: "purple",
   dimension: "cyan",
   measure: "green",
+  calculate: "green",
   join: void 0
 };
 const relationshipMap = {
@@ -26257,31 +26293,36 @@ const relationshipMap = {
 };
 function FieldToken({
   field,
+  additionalSiblings,
   hoverActions,
   hoverActionsVisible,
   ...props2
 }) {
+  const [isHovered, setIsHovered] = React__namespace.useState(false);
   let label = field.name;
   if (field.kind === "dimension" && (field.type.kind === "timestamp_type" || field.type.kind === "date_type")) {
     if (field.type.timeframe) {
       label += `.${field.type.timeframe}`;
     }
   }
+  const showHover = (isHovered || hoverActionsVisible) && !!hoverActions;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false),
     ...{
       0: {
-        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly28fmrt mly1x0xcia"
+        className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f"
       },
       1: {
         className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mlym9y5t7"
       }
-    }[!!hoverActionsVisible << 0],
+    }[!!showHover << 0],
     children: [/* @__PURE__ */ jsxRuntime.jsx(Token, {
       label,
       color: fieldKindToColor(field.kind),
       icon: fieldToIcon(field),
       ...props2
-    }), hoverActions && /* @__PURE__ */ jsxRuntime.jsx("div", {
+    }), additionalSiblings, showHover && /* @__PURE__ */ jsxRuntime.jsx("div", {
       ...{
         className: "mly1vsucm1 mly2lah0s"
       },
@@ -26297,7 +26338,7 @@ function DrillOperations({
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "drills"
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
       ...{
@@ -26312,7 +26353,7 @@ function DrillOperations({
             field
           }), /* @__PURE__ */ jsxRuntime.jsx(Token, {
             label: "="
-          }), drill.filter instanceof QB.ASTFilterWithLiteralEquality ? /* @__PURE__ */ jsxRuntime.jsx(LiteralValue, {
+          }), drill.filter instanceof malloyQueryBuilder.ASTFilterWithLiteralEquality ? /* @__PURE__ */ jsxRuntime.jsx(LiteralValue, {
             value: drill.filter.value.node
           }) : /* @__PURE__ */ jsxRuntime.jsx(Token, {
             label: drill.filter.filterString
@@ -30230,7 +30271,7 @@ function isIndexView(field) {
   return allFields.size === INDEX_FIELDS.length;
 }
 function getViewDefinition(parent) {
-  return parent instanceof QB.ASTArrowQueryDefinition ? parent.view : parent.definition;
+  return parent instanceof malloyQueryBuilder.ASTArrowQueryDefinition ? parent.view : parent.definition;
 }
 function getInputSchemaFromViewParent(parent) {
   if (!parent) {
@@ -30272,32 +30313,32 @@ function BadgeForField({
       label: "view",
       icon: "view_filled",
       color: "purple",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "dimension") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ jsxRuntime.jsx(Badge, {
       label: "join",
       icon: fieldToIcon(field),
       color: "gray",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   }
 }
-const styles$t = {
+const styles$u = {
   noBackground: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -30606,7 +30647,7 @@ var Content$1 = DialogContent;
 var Title = DialogTitle;
 var Description = DialogDescription;
 var Close = DialogClose;
-const styles$s = {
+const styles$t = {
   left: {
     display: "mly78zum5",
     justifyContent: "mly1lvf691",
@@ -30617,6 +30658,12 @@ const styles$s = {
     justifyContent: "mly1rfj78v",
     $$css: true
   },
+  nest: {
+    gridColumn: "mly623te4",
+    gridColumnStart: null,
+    gridColumnEnd: null,
+    $$css: true
+  },
   heading: {
     gridColumn: "mly623te4",
     gridColumnStart: null,
@@ -30740,11 +30787,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$r.container, fontStyles.body, customStyle),
+    ..._stylex.props(styles$s.container, fontStyles.body, customStyle),
     children
   });
 }
-const styles$r = {
+const styles$s = {
   container: {
     boxShadow: "mly5n1uv4",
     backgroundColor: "mly12peec7",
@@ -30781,7 +30828,7 @@ function InfoHover({
     children: [/* @__PURE__ */ jsxRuntime.jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$s.infoTrigger, fontStyles.body),
+        ..._stylex.props(styles$t.infoTrigger, fontStyles.body),
         children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -30792,7 +30839,7 @@ function InfoHover({
         side: "right",
         align: "start",
         children: /* @__PURE__ */ jsxRuntime.jsx(HoverCard, {
-          customStyle: styles$s.card,
+          customStyle: styles$t.card,
           children: info
         })
       })
@@ -30914,9 +30961,9 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$q.main),
+    ..._stylex.props(fontStyles.body, styles$r.main),
     children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ..._stylex.props(styles$q.content, customStyle),
+      ..._stylex.props(styles$r.content, customStyle),
       onKeyUp,
       onClick: () => {
         var _a2;
@@ -30982,7 +31029,7 @@ const Pill = ({
     onClick,
     tabIndex: 0,
     ref: forwardRef,
-    ..._stylex.props(styles$q.pill, colorVariants[color]),
+    ..._stylex.props(styles$r.pill, colorVariants[color]),
     children: [children, /* @__PURE__ */ jsxRuntime.jsx("div", {
       title: "Remove",
       ...{
@@ -30997,7 +31044,7 @@ const Pill = ({
     })]
   });
 };
-const styles$q = {
+const styles$r = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -31129,6 +31176,20 @@ const colorVariants = {
     $$css: true
   }
 };
+function setAtPath(current, path, value) {
+  const newCurrent = {
+    ...current
+  };
+  let target = newCurrent;
+  for (let i2 = 0; i2 < path.length - 1; i2++) {
+    if (typeof target[path[i2]] !== "object") {
+      target[path[i2]] = {};
+    }
+    target = target[path[i2]];
+  }
+  target[path[path.length - 1]] = value;
+  return newCurrent;
+}
 function OneOfEditor({
   view,
   name,
@@ -31139,7 +31200,7 @@ function OneOfEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.label, styles$s.left),
+      ..._stylex.props(styles$t.label, styles$t.left),
       children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31174,6 +31235,15 @@ function OneOfEditor({
             current,
             option: subOption
           }, key2);
+        case "object":
+          return /* @__PURE__ */ jsxRuntime.jsx(OneOfObjectEditor, {
+            view,
+            name,
+            path,
+            updateCurrent,
+            current,
+            option: subOption
+          }, key2);
       }
       return null;
     })]
@@ -31190,7 +31260,7 @@ function OneOfStringEditor({
   if (option2.enum) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsxRuntime.jsx("input", {
           type: "radio",
           checked: isString2 && option2.enum.includes(current),
@@ -31221,7 +31291,7 @@ function OneOfStringEditor({
   } else {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsxRuntime.jsx("input", {
           type: "radio",
           checked: isString2,
@@ -31259,7 +31329,7 @@ function OneOfNumberEditor({
   const [value, setValue] = React.useState(isNumber2 ? current : option2.minimum ?? 0);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsxRuntime.jsx("input", {
         type: "radio",
         checked: isNumber2,
@@ -31283,10 +31353,10 @@ function OneOfNumberEditor({
           valueAsNumber
         }
       }) => {
-        setValue(value);
+        setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {})]
   });
 }
@@ -31299,7 +31369,7 @@ function OneOfArrayEditor({
   const [value, setValue] = React.useState(isArray2 ? current : []);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsxRuntime.jsx("input", {
         type: "radio",
         checked: isArray2,
@@ -31322,6 +31392,48 @@ function OneOfArrayEditor({
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {})]
   });
 }
+function OneOfObjectEditor({
+  path,
+  current,
+  option: option2,
+  updateCurrent,
+  view
+}) {
+  const isObject2 = current != null && typeof current === "object" && !Array.isArray(current);
+  const [objectValue, setObjectValue] = React.useState(isObject2 ? current : {});
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
+      ..._stylex.props(styles$t.left),
+      children: /* @__PURE__ */ jsxRuntime.jsx("input", {
+        type: "radio",
+        checked: isObject2,
+        onChange: ({
+          target: {
+            checked
+          }
+        }) => {
+          if (checked) {
+            updateCurrent(path, objectValue);
+          }
+        }
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ..._stylex.props(styles$t.nest, styles$t.editorGrid),
+      children: /* @__PURE__ */ jsxRuntime.jsx(ObjectEditor, {
+        current: objectValue,
+        updateCurrent: (path2, value) => {
+          const [_2, ...subPath] = path2;
+          setObjectValue(setAtPath(objectValue, subPath, value));
+          updateCurrent(path2, value);
+        },
+        view,
+        name: "",
+        path,
+        option: option2
+      })
+    })]
+  });
+}
 function ArrayEditor({
   name,
   path,
@@ -31331,7 +31443,7 @@ function ArrayEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31352,14 +31464,15 @@ function NumberEditor$1({
   option: option2,
   updateCurrent
 }) {
+  const [value, setValue] = React__namespace.useState(current ?? option2.minimum);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
     }), /* @__PURE__ */ jsxRuntime.jsx("input", {
-      value: current,
+      value,
       type: "number",
       min: option2.minimum,
       max: option2.maximum,
@@ -31368,9 +31481,10 @@ function NumberEditor$1({
           valueAsNumber
         }
       }) => {
+        setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }, name), option2.description ? /* @__PURE__ */ jsxRuntime.jsx(InfoHover, {
       info: option2.description
     }) : /* @__PURE__ */ jsxRuntime.jsx("div", {})]
@@ -31386,7 +31500,7 @@ function StringEditor$1({
   if (option2.enum) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ React.createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31406,7 +31520,7 @@ function StringEditor$1({
   } else {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ React.createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31434,14 +31548,14 @@ function BooleanEditor({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
-        ..._stylex.props(styles$s.label),
+        ..._stylex.props(styles$t.label),
         htmlFor: `${name}-checkbox`,
         children: [option2.title ?? name, ":"]
       }, `${name}-label`)
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.right),
+      ..._stylex.props(styles$t.right),
       children: /* @__PURE__ */ jsxRuntime.jsx("input", {
         type: "checkbox",
         checked: current,
@@ -31490,7 +31604,7 @@ function FieldEditor({
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxRuntime.jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31566,11 +31680,12 @@ function ObjectEditor({
   option: option2,
   updateCurrent
 }) {
-  const [isExpanded, setIsExpanded] = React.useState(path.length === 0);
+  const [isExpanded, setIsExpanded] = React.useState(path.length === 0 || !name);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [name ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ..._stylex.props(styles$s.label, styles$s.heading),
+        ..._stylex.props(styles$t.label, styles$t.heading),
+        onClick: () => setIsExpanded(!isExpanded),
         children: [/* @__PURE__ */ jsxRuntime.jsx("label", {
           children: option2.title ?? name
         }), option2.description ? /* @__PURE__ */ jsxRuntime.jsx(InfoHover, {
@@ -31657,40 +31772,29 @@ function ObjectEditor({
       }
       return null;
     }) : null, /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.divider)
+      ..._stylex.props(styles$t.divider)
     })]
   });
 }
 function VizEditor({
-  rootQuery,
   view,
   plugin,
   setOpen
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [current, setCurrent] = React.useState(plugin.getSettings());
-  console.info("RendererEditor current settings:", current);
   const schema = plugin.getSchema();
   const updateCurrent = (path, value) => {
-    const newCurrent = {
-      ...current
-    };
-    let target = newCurrent;
-    for (let i2 = 0; i2 < path.length - 1; i2++) {
-      if (!(path[i2] in target)) {
-        target[path[i2]] = {};
-      }
-      target = target[path[i2]];
-    }
-    target[path[path.length - 1]] = value;
+    const newCurrent = setAtPath(current, path, value);
     setCurrent(newCurrent);
   };
+  React__namespace.useEffect(() => {
+    console.info("RendererEditor current settings:", current);
+  }, [current]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$s.editor),
+    ..._stylex.props(styles$t.editor),
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$s.editorGrid),
+      ..._stylex.props(styles$t.editorGrid),
       children: /* @__PURE__ */ jsxRuntime.jsx(ObjectEditor, {
         view,
         name: "",
@@ -31700,13 +31804,13 @@ function VizEditor({
         updateCurrent
       })
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ..._stylex.props(styles$s.editorRow),
+      ..._stylex.props(styles$t.editorRow),
       children: [/* @__PURE__ */ jsxRuntime.jsx(Button, {
         label: "Cancel",
         onClick: () => {
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       }), /* @__PURE__ */ jsxRuntime.jsx(Button, {
         variant: "primary",
         label: "Apply",
@@ -31718,13 +31822,13 @@ function VizEditor({
           if (old) {
             annotations.remove(old);
           }
-          view.getOrAddAnnotations().add(new QB.ASTAnnotation({
+          view.getOrAddAnnotations().add(new malloyQueryBuilder.ASTAnnotation({
             value
           }));
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       })]
     })]
   });
@@ -31934,7 +32038,6 @@ const dialogStyles = {
   }
 };
 function VizEditorDialog({
-  rootQuery,
   plugin,
   view,
   customStyle,
@@ -31951,7 +32054,7 @@ function VizEditorDialog({
       children: /* @__PURE__ */ jsxRuntime.jsx(Overlay, {
         ..._stylex.props(dialogStyles.overlay),
         children: /* @__PURE__ */ jsxRuntime.jsxs(Content$1, {
-          ..._stylex.props(fontStyles.body, dialogStyles.content, styles$p.content, customStyle),
+          ..._stylex.props(fontStyles.body, dialogStyles.content, styles$q.content, customStyle),
           children: [/* @__PURE__ */ jsxRuntime.jsxs(Title, {
             ..._stylex.props(dialogStyles.title),
             children: ["Visualization Settings", /* @__PURE__ */ jsxRuntime.jsx(Close, {
@@ -31964,7 +32067,6 @@ function VizEditorDialog({
             ..._stylex.props(dialogStyles.displayNone),
             children: "Edit visualization parameters"
           }), /* @__PURE__ */ jsxRuntime.jsx(VizEditor, {
-            rootQuery,
             view,
             plugin,
             setOpen
@@ -31974,7 +32076,7 @@ function VizEditorDialog({
     })
   });
 }
-const styles$p = {
+const styles$q = {
   content: {
     maxWidth: "mly14zcgw3",
     width: "mly14rvwrp",
@@ -31983,12 +32085,9 @@ const styles$p = {
   }
 };
 function Visualization$1({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const renderer = React.useMemo(() => new render.MalloyRenderer(), []);
   const [currentRenderer, setCurrentRenderer] = React.useState("table");
   const [plugin, setPlugin] = React.useState();
@@ -32033,7 +32132,7 @@ function Visualization$1({
   }, [renderer, view, tag]);
   const updateViz = (renderer2) => {
     view.setTagProperty(["viz"], renderer2, RENDERER_PREFIX);
-    setQuery == null ? void 0 : setQuery(rootQuery.build());
+    updateQuery();
   };
   const items = VIZ_RENDERERS.map((viz) => ({
     icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
@@ -32044,7 +32143,7 @@ function Visualization$1({
     onClick: () => updateViz(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsxRuntime.jsx(SelectorToken, {
-    customStyle: styles$o.first,
+    customStyle: styles$p.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items,
@@ -32054,7 +32153,7 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsxRuntime.jsx(Token, {
       icon: "gear",
       onClick: () => setOpen(true),
-      customStyle: styles$o.trigger,
+      customStyle: styles$p.trigger,
       tooltip: "Edit Settings..."
     }, "gear"));
   }
@@ -32062,23 +32161,22 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsxRuntime.jsx(Token, {
       icon: "warning",
       tooltip: error,
-      customStyle: styles$o.trigger
+      customStyle: styles$p.trigger
     }));
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/* @__PURE__ */ jsxRuntime.jsx(TokenGroup, {
-      customStyle: styles$o.group,
+      customStyle: styles$p.group,
       children: tokens2
     }), /* @__PURE__ */ jsxRuntime.jsx(VizEditorDialog, {
       open,
       setOpen,
-      rootQuery,
       plugin,
       view
     })]
   });
 }
-const styles$o = {
+const styles$p = {
   trigger: {
     height: "mly1ktj5wk",
     $$css: true
@@ -32115,7 +32213,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$n.attributeTableContainer, style),
+    ..._stylex.props(styles$o.attributeTableContainer, style),
     children: /* @__PURE__ */ jsxRuntime.jsx("table", {
       ...{
         className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
@@ -32153,9 +32251,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsx("td", {
-      ..._stylex.props(styles$n.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$o.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$n.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$o.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsxRuntime.jsx("td", {
@@ -32166,7 +32264,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$n = {
+const styles$o = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -32215,9 +32313,7 @@ function TopValuesTable({
   field,
   path
 }) {
-  const {
-    topValues
-  } = React.useContext(QueryEditorContext);
+  const topValues = useTopValues();
   const fieldPath = [...path, field.name].join(".");
   const fieldTopValues = topValues == null ? void 0 : topValues.find((entry) => entry.fieldName === fieldPath);
   if (!fieldTopValues) {
@@ -32298,12 +32394,12 @@ function RichText({
   });
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
     ref,
-    ..._stylex.props(multiLine && styles$m.preWrap, multiLine && styles$m.breakWord, customStyle),
+    ..._stylex.props(multiLine && styles$n.preWrap, multiLine && styles$n.breakWord, customStyle),
     ...props2,
     children: formatted
   });
 }
-const styles$m = {
+const styles$n = {
   preWrap: {
     whiteSpace: "mly126k92a",
     $$css: true
@@ -32332,7 +32428,7 @@ function HoverText({
         onMouseEnter: () => setIsTriggerHovered(true),
         onMouseLeave: () => setIsTriggerHovered(false),
         onPointerMove: (e) => e.preventDefault(),
-        customStyle: [fontStyles.supporting, styles$l.text],
+        customStyle: [fontStyles.supporting, styles$m.text],
         children: text2
       })
     }), /* @__PURE__ */ jsxRuntime.jsx(Portal$4, {
@@ -32351,7 +32447,7 @@ function HoverText({
     })]
   });
 }
-const styles$l = {
+const styles$m = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -32378,7 +32474,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$k.viewAttributeTable
+      style: styles$l.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsxRuntime.jsx(TopValuesTable, {
@@ -32387,7 +32483,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs(HoverCard, {
-    customStyle: styles$k.container,
+    customStyle: styles$l.container,
     children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
       ref,
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -32398,10 +32494,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$k.path),
+        ..._stylex.props(fontStyles.supporting, styles$l.path),
         children: pathString
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$k.title),
+        ..._stylex.props(fontStyles.emphasized, styles$l.title),
         children: field.name
       }), description && /* @__PURE__ */ jsxRuntime.jsx(HoverText, {
         text: description,
@@ -32412,7 +32508,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$k = {
+const styles$l = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -32590,9 +32686,7 @@ function BooleanFilterCore({
   });
 }
 function useSearch(searchTerm, fieldPath) {
-  const {
-    topValues
-  } = React.useContext(QueryEditorContext);
+  const topValues = useTopValues();
   if (topValues && searchTerm) {
     let searchValues = topValues;
     if (fieldPath) {
@@ -32647,7 +32741,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$j.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$k.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsxRuntime.jsx(Value, {
         value
@@ -32671,10 +32765,10 @@ function Value({
     label: value.fieldValue ?? "∅",
     icon: "filter",
     color: "purple",
-    customStyle: styles$j.token
+    customStyle: styles$k.token
   });
 }
-const styles$j = {
+const styles$k = {
   valueItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -32850,7 +32944,7 @@ const StringFilterCore = ({
               setSearchValue("");
             }
           },
-          customStyle: styles$i.valueList,
+          customStyle: styles$j.valueList,
           showPath: false,
           filter: (value) => !currentFilter.values.includes(value),
           hideNoMatchMessage: true
@@ -32921,7 +33015,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$i = {
+const styles$j = {
   valueList: {
     maxHeight: "mly3d5gib",
     width: "mly1hfn5x7",
@@ -33873,7 +33967,7 @@ function FieldList({
     ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxRuntime.jsxs("div", {
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem, styles$h.sticky),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem, styles$i.sticky),
         "data-disabled": "true",
         children: group.name
       }), group.fields.map((field) => isFilterOperation && (field.kind === "dimension" || field.kind === "measure") ? /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
@@ -33883,7 +33977,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsxRuntime.jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
           children: /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
@@ -33910,7 +34004,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsxRuntime.jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
         children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -33933,7 +34027,7 @@ function FieldList({
     })
   });
 }
-const styles$h = {
+const styles$i = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -33962,7 +34056,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = React.useState("");
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(addMenuStyles.content, styles$g.content),
+    ..._stylex.props(addMenuStyles.content, styles$h.content),
     role: "menu",
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -33988,25 +34082,61 @@ function FieldMenu({
     })]
   });
 }
-const styles$g = {
+const styles$h = {
   content: {
     maxHeight: "mly3d5gib",
     $$css: true
   }
 };
+const getPrimaryAxis = (view) => {
+  const schema = view.getOutputSchema();
+  return getPrimaryAxisFromSchema(schema);
+};
+const getPrimaryAxisFromSchema = (schema) => {
+  let primaryAxisField = void 0;
+  primaryAxisField = findAxisFieldByAnnotation(schema.fields) || findAxisFieldByType(schema.fields) || findDefaultAxisField(schema.fields);
+  return primaryAxisField;
+};
+const findAxisFieldByAnnotation = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension" && field.annotations && field.annotations.find((annotation) => annotation.value === "# x")) {
+      return true;
+    }
+    return false;
+  });
+};
+const findAxisFieldByType = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension") {
+      const dimension = field;
+      if (dimension.type.kind === "date_type" || dimension.type.kind === "timestamp_type") {
+        return true;
+      }
+    }
+    return false;
+  });
+};
+const findDefaultAxisField = (fields) => {
+  return fields.find((field) => {
+    if (field.kind === "dimension") {
+      return true;
+    }
+    return false;
+  });
+};
 function toFullName(path, name) {
   return [...path || [], name].join(".");
 }
 function segmentHasLimit(segment) {
-  return segment.operations.items.find((operation) => operation instanceof QB.ASTLimitViewOperation) !== void 0;
+  return segment.operations.items.find((operation) => operation instanceof malloyQueryBuilder.ASTLimitViewOperation) !== void 0;
 }
 function segmentHasOrderBy(segment, name) {
-  return segment.operations.items.find((operation) => operation instanceof QB.ASTOrderByViewOperation && operation.name === name) !== void 0;
+  return segment.operations.items.find((operation) => operation instanceof malloyQueryBuilder.ASTOrderByViewOperation && operation.name === name) !== void 0;
 }
 function getOutputNameToInputNameMap(segment) {
   const nameMap = /* @__PURE__ */ new Map();
   for (const operation of segment.operations.items) {
-    if (operation instanceof QB.ASTGroupByViewOperation || operation instanceof QB.ASTAggregateViewOperation) {
+    if (operation instanceof malloyQueryBuilder.ASTGroupByViewOperation || operation instanceof malloyQueryBuilder.ASTAggregateViewOperation) {
       const reference = operation.field.getReference();
       if (reference) {
         nameMap.set(operation.name, toFullName(reference.path, reference.name));
@@ -34019,7 +34149,7 @@ function segmentHasOrderBySourceField(segment, path, name) {
   const nameMap = getOutputNameToInputNameMap(segment);
   const fullInputName = toFullName(path, name);
   return !!segment.operations.items.find((operation) => {
-    if (operation instanceof QB.ASTOrderByViewOperation && nameMap.has(operation.name)) {
+    if (operation instanceof malloyQueryBuilder.ASTOrderByViewOperation && nameMap.has(operation.name)) {
       return fullInputName === nameMap.get(operation.name);
     }
     return false;
@@ -34030,7 +34160,7 @@ function areReferencesEqual(path1, name1, path2, name2) {
 }
 function segmentHasFieldInOutputSpace(segment, path, name) {
   const match = segment.operations.items.find((operation) => {
-    if (operation instanceof QB.ASTGroupByViewOperation || operation instanceof QB.ASTAggregateViewOperation) {
+    if (operation instanceof malloyQueryBuilder.ASTGroupByViewOperation || operation instanceof malloyQueryBuilder.ASTAggregateViewOperation) {
       const reference = operation.field.getReference();
       if (reference) {
         return areReferencesEqual(path, name, reference.path, reference.name);
@@ -34044,7 +34174,7 @@ function segmentHasFieldInOutputSpace(segment, path, name) {
 }
 function segmentNestNo(segment, name) {
   return segment.operations.items.reduce((acc, operation) => {
-    if (operation instanceof QB.ASTNestViewOperation) {
+    if (operation instanceof malloyQueryBuilder.ASTNestViewOperation) {
       {
         if (operation.name === name) {
           do {
@@ -34072,6 +34202,34 @@ function addGroupBy(view, field, path) {
     segment.addTimestampGroupBy(field.name, path, "second");
   } else {
     segment.addGroupBy(field.name, path, rename);
+    recomputePartitionByAndPrimaryAxis(segment);
+  }
+}
+function recomputePartitionByAndPrimaryAxis(segment) {
+  var _a2;
+  const primaryAxis = getPrimaryAxisFromSchema(segment.getOutputSchema());
+  const groupBys = segment.operations.items.filter((op) => op.kind === "group_by");
+  const movingAverages = segment.operations.items.filter((op) => op.kind === "calculate" && op.expression.kind === "moving_average");
+  const canSmooth = primaryAxis !== null && (primaryAxis == null ? void 0 : primaryAxis.kind) === "dimension" && (primaryAxis.type.kind === "timestamp_type" || primaryAxis.type.kind === "date_type");
+  if (!canSmooth) {
+    movingAverages.forEach((operation) => {
+      operation.delete();
+      segment.addAggregate(operation.getFieldInfo().name);
+    });
+  } else {
+    const nonPrimaryGroupByNames = groupBys.filter((gb) => gb.name !== primaryAxis.name);
+    movingAverages.forEach((operation) => {
+      operation.expression.edit();
+      operation.expression.setPartitionFields(nonPrimaryGroupByNames.map((gb) => gb.field.getReference()).filter((ref) => !!ref));
+    });
+    const primaryTimeAxisOperation = groupBys.find((gb) => gb.name === primaryAxis.name);
+    if (primaryTimeAxisOperation) {
+      const expression = (_a2 = primaryTimeAxisOperation.field) == null ? void 0 : _a2.expression;
+      if (expression && expression.kind === "time_truncation") {
+        const truncationExpression = primaryTimeAxisOperation.field.expression;
+        truncationExpression.truncation = "day";
+      }
+    }
   }
 }
 function addAggregate(view, field, path) {
@@ -34126,10 +34284,10 @@ function getSegmentIfPresent(parent) {
     return void 0;
   }
   const definition = getViewDefinition(parent);
-  if (definition instanceof QB.ASTSegmentViewDefinition) {
+  if (definition instanceof malloyQueryBuilder.ASTSegmentViewDefinition) {
     return definition;
-  } else if (definition instanceof QB.ASTRefinementViewDefinition) {
-    if (definition.refinement instanceof QB.ASTSegmentViewDefinition) {
+  } else if (definition instanceof malloyQueryBuilder.ASTRefinementViewDefinition) {
+    if (definition.refinement instanceof malloyQueryBuilder.ASTSegmentViewDefinition) {
       return definition.refinement;
     }
   }
@@ -34149,7 +34307,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(styles$u.title, hoverStyles.main),
+    ..._stylex.props(styles$v.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
       children: title
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -34183,16 +34341,13 @@ function OperationActionTitle({
   });
 }
 function RenameDialog({
-  rootQuery,
   view,
   target,
   open,
   setOpen
 }) {
   const [name, setName] = React.useState("");
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   React.useEffect(() => {
     if (target) {
       setName(target.name);
@@ -34202,8 +34357,9 @@ function RenameDialog({
     return null;
   }
   const onRename = () => {
+    target.edit();
     target.name = name;
-    setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+    updateQuery();
     setOpen(false);
   };
   const {
@@ -34266,15 +34422,12 @@ function RenameDialog({
   });
 }
 function SortableOperations({
-  rootQuery,
   segment,
   view,
   operations,
   kind
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const sensors = useSensors(useSensor(PointerSensor));
   const items = React.useMemo(() => {
     return operations.map((operation) => ({
@@ -34286,7 +34439,7 @@ function SortableOperations({
     return null;
   }
   function handleDragEnd(event) {
-    const operations2 = segment.operations.items.filter((operation) => operation instanceof QB.ASTAggregateViewOperation || operation instanceof QB.ASTGroupByViewOperation || operation instanceof QB.ASTNestViewOperation);
+    const operations2 = segment.operations.items.filter((operation) => operation instanceof malloyQueryBuilder.ASTAggregateViewOperation || operation instanceof malloyQueryBuilder.ASTGroupByViewOperation || operation instanceof malloyQueryBuilder.ASTNestViewOperation);
     const names = operations2.map((operation) => operation.name);
     const {
       active,
@@ -34296,7 +34449,7 @@ function SortableOperations({
       const oldIndex = names.indexOf(active.id);
       const newIndex = names.indexOf(over.id);
       segment.reorderFields(arrayMove(names, oldIndex, newIndex));
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   }
   const {
@@ -34308,7 +34461,7 @@ function SortableOperations({
     types: ["dimension"],
     onClick: (field, path) => {
       addGroupBy(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   } : {
     title: "aggregate",
@@ -34316,17 +34469,16 @@ function SortableOperations({
     types: ["measure"],
     onClick: (field, path) => {
       addAggregate(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx(OperationActionTitle, {
-      rootQuery,
       view,
       fields,
       ...props2
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: /* @__PURE__ */ jsxRuntime.jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -34334,7 +34486,6 @@ function SortableOperations({
         children: /* @__PURE__ */ jsxRuntime.jsx(SortableContext, {
           items,
           children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(SortableOperation, {
-            rootQuery,
             id: item.id,
             color: kind === "group_by" ? "cyan" : "green",
             view,
@@ -34347,18 +34498,16 @@ function SortableOperations({
 }
 const NULL_PATH = [];
 function SortableOperation({
-  rootQuery,
   id,
   view,
   operation,
   color
 }) {
   var _a2;
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const fieldInfo = operation.getFieldInfo();
-  const path = ((_a2 = operation.field.getReference()) == null ? void 0 : _a2.path) ?? NULL_PATH;
+  const field = operation instanceof malloyQueryBuilder.ASTCalculateViewOperation ? null : operation.field;
+  const path = operation instanceof malloyQueryBuilder.ASTCalculateViewOperation ? operation.expression.node.field_reference.path ?? NULL_PATH : ((_a2 = operation.field.getReference()) == null ? void 0 : _a2.path) ?? NULL_PATH;
   const {
     attributes,
     listeners,
@@ -34378,6 +34527,18 @@ function SortableOperation({
     transform: CSS$1.Transform.toString(transform2),
     transition
   };
+  const primaryAxis = React.useMemo(() => {
+    return getPrimaryAxis(view);
+  }, [view]);
+  const canSmooth = operation.kind === "aggregate" && primaryAxis !== null && (primaryAxis == null ? void 0 : primaryAxis.kind) === "dimension" && (primaryAxis.type.kind === "timestamp_type" || primaryAxis.type.kind === "date_type");
+  const enableSmoothing = React.useCallback((operation2) => {
+    if (!canSmooth) {
+      return;
+    }
+    operation2.convertToCalculateMovingAverage(operation2.name + "_smoothed", 7);
+    recomputePartitionByAndPrimaryAxis(view.getOrAddDefaultSegment());
+    updateQuery();
+  }, [canSmooth, updateQuery, view]);
   const hoverActions = React.useMemo(() => {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
       children: [/* @__PURE__ */ jsxRuntime.jsx(DropdownMenu, {
@@ -34388,7 +34549,14 @@ function SortableOperation({
           tooltip: "More Actions"
         }),
         onOpenChange: setHoverActionsVisible,
-        children: [/* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
+        children: [canSmooth ? /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
+          label: "Add smoothing",
+          onClick: () => {
+            if (operation instanceof malloyQueryBuilder.ASTAggregateViewOperation) {
+              enableSmoothing(operation);
+            }
+          }
+        }, "smoothing") : null, /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
           label: "Rename",
           onClick: () => {
             setRenameTarget(operation);
@@ -34398,12 +34566,21 @@ function SortableOperation({
       }, [...path, fieldInfo.name].join(".")), /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
         onClick: () => {
           operation.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+          recomputePartitionByAndPrimaryAxis(view.getOrAddDefaultSegment());
+          updateQuery();
         }
       })]
     });
-  }, [fieldInfo, operation, path, rootQuery, setQuery]);
-  const granular = granularityMenuItems(fieldInfo, operation.field);
+  }, [canSmooth, enableSmoothing, fieldInfo.name, operation, path, updateQuery, view]);
+  const hasSmoothedField = React.useMemo(() => {
+    return view.getOrAddDefaultSegment().operations.items.some((operation2) => {
+      return operation2.kind === "calculate";
+    });
+  }, [view]);
+  const granular = granularityMenuItems(fieldInfo, field);
+  if (hasSmoothedField && granular && operation.name === (primaryAxis == null ? void 0 : primaryAxis.name)) {
+    granular.options = granular.options.filter((option2) => option2.value === "day");
+  }
   let icon = "orderBy";
   if (fieldInfo.kind === "dimension" || fieldInfo.kind === "measure") {
     icon = atomicTypeToIcon(fieldInfo.type.kind);
@@ -34412,7 +34589,7 @@ function SortableOperation({
     id,
     ref: setNodeRef,
     style,
-    children: [granular ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    children: [field && granular ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
         0: {
           className: "mly78zum5 mly6s0dn4 mly1nhvcw1 mly1jnr06f mly11ogjb6 mly1g9of4s"
@@ -34435,8 +34612,8 @@ function SortableOperation({
           color,
           value: granular.value,
           onChange: (granulation) => {
-            if (operation.field.expression instanceof QB.ASTTimeTruncationExpression) operation.field.expression.truncation = granulation;
-            setQuery == null ? void 0 : setQuery(rootQuery.build());
+            if (field.expression instanceof malloyQueryBuilder.ASTTimeTruncationExpression) field.expression.truncation = granulation;
+            updateQuery();
           },
           items: granular.options
         })]
@@ -34446,7 +34623,7 @@ function SortableOperation({
         },
         children: hoverActions
       })]
-    }) : /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
+    }) : operation instanceof malloyQueryBuilder.ASTCalculateViewOperation ? /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
       field: fieldInfo,
       color,
       hoverActionsVisible,
@@ -34463,9 +34640,67 @@ function SortableOperation({
       dragProps: {
         attributes,
         listeners
-      }
+      },
+      additionalSiblings: /* @__PURE__ */ jsxRuntime.jsx(SelectorToken, {
+        color,
+        value: "" + (operation.expression.node.rows_preceding ?? 7),
+        onChange: (value) => {
+          if (value === "1") {
+            view.getOrAddDefaultSegment().operations.add(new malloyQueryBuilder.ASTAggregateViewOperation({
+              kind: "aggregate",
+              field: {
+                expression: {
+                  kind: "field_reference",
+                  name: operation.expression.node.field_reference.name
+                }
+              }
+            }));
+            operation.delete();
+            updateQuery();
+          } else {
+            operation.expression.edit();
+            operation.expression.rowsPreceding = parseInt(value, 10);
+            updateQuery();
+          }
+        },
+        items: [{
+          label: "7d",
+          value: "7"
+        }, {
+          label: "14d",
+          value: "14"
+        }, {
+          label: "28d",
+          value: "28"
+        }, {
+          label: "30d",
+          value: "30"
+        }, {
+          label: "Remove smoothing",
+          value: "1"
+        }]
+      })
+    }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
+      children: /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
+        field: fieldInfo,
+        color,
+        hoverActionsVisible,
+        hoverActions,
+        tooltip: /* @__PURE__ */ jsxRuntime.jsx(FieldHoverCard, {
+          field: fieldInfo,
+          path
+        }),
+        tooltipProps: {
+          side: "right",
+          align: "start",
+          alignOffset: 28
+        },
+        dragProps: {
+          attributes,
+          listeners
+        }
+      })
     }), /* @__PURE__ */ jsxRuntime.jsx(RenameDialog, {
-      rootQuery,
       view,
       target: renameTarget,
       open: renameOpen,
@@ -34476,7 +34711,7 @@ function SortableOperation({
 const DateGranulation = ["day", "week", "month", "quarter", "year"];
 const TimestampGranulation = ["second", "minute", "hour", "day", "week", "month", "quarter", "year"];
 function granularityMenuItems(fieldInfo, field) {
-  if (fieldInfo.kind !== "dimension" || !(field.expression instanceof QB.ASTTimeTruncationExpression)) {
+  if (!field || fieldInfo.kind !== "dimension" || !(field.expression instanceof malloyQueryBuilder.ASTTimeTruncationExpression)) {
     return null;
   }
   if (fieldInfo.type.kind === "timestamp_type") {
@@ -34506,13 +34741,11 @@ const customStyles = {
   }
 };
 function GroupByOperations({
-  rootQuery,
   segment,
   view,
   groupBys
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SortableOperations, {
-    rootQuery,
     segment,
     view,
     operations: groupBys,
@@ -34755,34 +34988,30 @@ function displayTimeFromMoment(momentObj) {
   return momentObj.moment;
 }
 function FilterOperations({
-  rootQuery,
   filters
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (filters.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "filter by"
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsxRuntime.jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxRuntime.jsxs("div", {
             children: ["Invalid filter", /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
               onClick: () => {
                 filterOperation.delete();
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(SingleFilterOperation, {
-            filterOperation,
-            rootQuery
+            filterOperation
           })
         }, key2);
       })
@@ -34790,29 +35019,26 @@ function FilterOperations({
   });
 }
 function SingleFilterOperation({
-  rootQuery,
   filterOperation
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const setFilter = React.useCallback((filter2) => {
-    if (filterOperation.filter instanceof QB.ASTFilterWithFilterString) {
+    if (filterOperation.filter instanceof malloyQueryBuilder.ASTFilterWithFilterString) {
       filterOperation.filter.setFilter(filter2);
     }
-    setQuery == null ? void 0 : setQuery(rootQuery.build());
-  }, [filterOperation.filter, rootQuery, setQuery]);
+    updateQuery();
+  }, [filterOperation.filter, updateQuery]);
   const {
     filter
   } = filterOperation;
-  if (!(filter instanceof QB.ASTFilterWithFilterString)) {
+  if (!(filter instanceof malloyQueryBuilder.ASTFilterWithFilterString)) {
     return null;
   }
   const {
     expression,
     filterString
   } = filter;
-  if (!(expression instanceof QB.ASTReferenceExpression)) {
+  if (!(expression instanceof malloyQueryBuilder.ASTReferenceExpression)) {
     return null;
   }
   const fieldInfo = filter.getFieldInfo();
@@ -34845,25 +35071,22 @@ function SingleFilterOperation({
       children: /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
         onClick: () => {
           filterOperation.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         }
       })
     })]
   });
 }
 function LimitOperation({
-  rootQuery,
   limit
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (!limit) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "limit"
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -34872,7 +35095,7 @@ function LimitOperation({
         value: limit.limit,
         onChange: (value) => {
           limit.limit = value;
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         },
         errorMessage: limit.limit < 0 ? "Limit must be positive" : void 0
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -34880,7 +35103,7 @@ function LimitOperation({
         children: /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
           onClick: () => {
             limit.delete();
-            setQuery == null ? void 0 : setQuery(rootQuery.build());
+            updateQuery();
           }
         })
       })]
@@ -34888,13 +35111,11 @@ function LimitOperation({
   });
 }
 function AggregateOperations({
-  rootQuery,
   segment,
   view,
   aggregates
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(SortableOperations, {
-    rootQuery,
     segment,
     view,
     operations: aggregates,
@@ -34902,21 +35123,18 @@ function AggregateOperations({
   });
 }
 function OrderByOperations({
-  rootQuery,
   orderBys
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   if (orderBys.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "order by"
     }), /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -34947,7 +35165,7 @@ function OrderByOperations({
               value: orderBy.direction ?? "asc",
               onChange: (direction) => {
                 orderBy.direction = direction;
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }), /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -34955,7 +35173,7 @@ function OrderByOperations({
             children: /* @__PURE__ */ jsxRuntime.jsx(ClearButton, {
               onClick: () => {
                 orderBy.delete();
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })
           })]
@@ -34965,7 +35183,6 @@ function OrderByOperations({
   });
 }
 function View({
-  rootQuery,
   view
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -34975,10 +35192,8 @@ function View({
       gap: 8
     },
     children: [/* @__PURE__ */ jsxRuntime.jsx(Visualization$1, {
-      rootQuery,
       view
     }), /* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
-      rootQuery,
       view,
       viewDef: view.definition
     })]
@@ -35002,7 +35217,7 @@ function AddItem({
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$f.open : null),
+        ..._stylex.props(addMenuStyles.item, addMenuStyles.clickable, open ? styles$g.open : null),
         onClick: doOnClick,
         "data-disabled": disabled ? "true" : void 0,
         children: [/* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -35026,7 +35241,7 @@ function AddItem({
     }) : null]
   });
 }
-const styles$f = {
+const styles$g = {
   open: {
     background: "mly16o7sp0",
     backgroundAttachment: null,
@@ -35043,12 +35258,9 @@ const styles$f = {
   }
 };
 function AddLimit({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const segment = getSegmentIfPresent(view);
   const hasLimit = segment ? segmentHasLimit(segment) : false;
   return /* @__PURE__ */ jsxRuntime.jsx(AddItem, {
@@ -35060,17 +35272,14 @@ function AddLimit({
     onClick: () => {
       const segment2 = view.getOrAddDefaultSegment();
       segment2.setLimit(10);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   });
 }
 function AddEmptyNest({
-  rootQuery,
   view
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   return /* @__PURE__ */ jsxRuntime.jsx(AddItem, {
     icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
       name: "nest"
@@ -35080,7 +35289,7 @@ function AddEmptyNest({
       const segment = view.getOrAddDefaultSegment();
       const nestNo = segmentNestNo(segment, `Nest`);
       segment.addEmptyNest(nestNo > 1 ? `Nest ${nestNo}` : `Nest`);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     }
   });
 }
@@ -35101,10 +35310,10 @@ function AddFieldItem({
     onAddOperation,
     isFilterOperation,
     search,
-    customStyle: styles$e.list
+    customStyle: styles$f.list
   });
 }
-const styles$e = {
+const styles$f = {
   list: {
     minWidth: "mly2ixbly",
     maxWidth: "mly1j9u4d2",
@@ -35112,13 +35321,10 @@ const styles$e = {
   }
 };
 function AddOrderBy({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const outputSchemaFields = view.getOutputSchema().fields;
   const segment = getSegmentIfPresent(view);
   const fields = React.useMemo(() => outputSchemaFields.filter((field) => field.kind === "dimension").filter((field) => ORDERABLE_TYPES$1.includes(field.type.kind)).filter((field) => segment ? !segmentHasOrderBy(segment, field.name) : true), [outputSchemaFields, segment]);
@@ -35130,7 +35336,7 @@ function AddOrderBy({
     types: ["dimension"],
     onAddOperation: (field) => {
       addOrderBy(view, field);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     disabledMessage: "There must be at least one field in the output to order by.",
     search
@@ -35138,13 +35344,10 @@ function AddOrderBy({
 }
 const ORDERABLE_TYPES$1 = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function AddGroupBy({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35161,19 +35364,16 @@ function AddGroupBy({
     filter,
     onAddOperation: (field, path) => {
       addGroupBy(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
 }
 function AddAggregate({
-  rootQuery,
   view,
   search
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35190,7 +35390,7 @@ function AddAggregate({
     filter,
     onAddOperation: (field, path) => {
       addAggregate(view, field, path);
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
@@ -35199,10 +35399,7 @@ function AddWhere({
   view,
   search
 }) {
-  const {
-    rootQuery,
-    setQuery
-  } = React__namespace.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const {
     fields
   } = getInputSchemaFromViewParent(view);
@@ -35216,7 +35413,7 @@ function AddWhere({
     onAddOperation: (field, path, filter) => {
       if (filter && (field.kind === "dimension" || field.kind === "measure")) {
         addFilter(view, field, path, filter);
-        setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
+        updateQuery();
       }
     },
     isFilterOperation: true,
@@ -35225,15 +35422,18 @@ function AddWhere({
 }
 const FILTERABLE_TYPES$1 = /* @__PURE__ */ new Set(["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"]);
 function AddView({
-  rootQuery,
   view,
   search
 }) {
   const {
-    setQuery
+    rootQuery
   } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const allFields = getInputSchemaFromViewParent(view).fields;
   const fields = React.useMemo(() => allFields.filter((field) => field.kind === "view" && !isIndexView(field)), [allFields]);
+  if (!rootQuery) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(AddFieldItem, {
     label: "Add view",
     icon: "view",
@@ -35247,20 +35447,17 @@ function AddView({
       } else {
         addNest(view, field);
       }
-      setQuery == null ? void 0 : setQuery(rootQuery.build());
+      updateQuery();
     },
     search
   });
 }
 function AddMenu({
-  rootQuery,
   view
 }) {
   const [open, setOpen] = React.useState(false);
   const [active, setActive] = React.useState("");
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [search, setSearch] = React.useState("");
   const segment = getSegmentIfPresent(view);
   const toggleActive = (toggle) => {
@@ -35301,7 +35498,7 @@ function AddMenu({
             value: search,
             onChange: setSearch,
             placeholder: "Search...",
-            customStyle: styles$d.search
+            customStyle: styles$e.search
           })
         }), /* @__PURE__ */ jsxRuntime.jsx(Divider, {}), /* @__PURE__ */ jsxRuntime.jsxs("div", {
           ...{
@@ -35324,7 +35521,7 @@ function AddMenu({
                 } else {
                   addNest(view, field);
                 }
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               },
               search
             }), /* @__PURE__ */ jsxRuntime.jsx(Divider, {}), /* @__PURE__ */ jsxRuntime.jsx(ValueList, {
@@ -35340,7 +35537,7 @@ function AddMenu({
                     values: [value.fieldValue ?? "∅"]
                   }
                 });
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }) : /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -35377,7 +35574,6 @@ function AddMenu({
               onClick: () => toggleActive("view"),
               open: active === "view"
             }), /* @__PURE__ */ jsxRuntime.jsx(Divider, {}), /* @__PURE__ */ jsxRuntime.jsx(AddLimit, {
-              rootQuery,
               view
             }), /* @__PURE__ */ jsxRuntime.jsx(AddItem, {
               icon: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
@@ -35387,7 +35583,6 @@ function AddMenu({
               onClick: () => toggleActive("order_by"),
               open: active === "order_by"
             }), /* @__PURE__ */ jsxRuntime.jsx(AddEmptyNest, {
-              rootQuery,
               view
             })]
           }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -35396,23 +35591,18 @@ function AddMenu({
               overflowY: "auto"
             },
             children: [active === "group_by" && /* @__PURE__ */ jsxRuntime.jsx(AddGroupBy, {
-              rootQuery,
               view,
               search
             }), active === "aggregate" && /* @__PURE__ */ jsxRuntime.jsx(AddAggregate, {
-              rootQuery,
               view,
               search
             }), active === "where" && /* @__PURE__ */ jsxRuntime.jsx(AddWhere, {
-              rootQuery,
               view,
               search
             }), active === "view" && /* @__PURE__ */ jsxRuntime.jsx(AddView, {
-              rootQuery,
               view,
               search
             }), active === "order_by" && /* @__PURE__ */ jsxRuntime.jsx(AddOrderBy, {
-              rootQuery,
               view,
               search
             })]
@@ -35422,7 +35612,7 @@ function AddMenu({
     })]
   });
 }
-const styles$d = {
+const styles$e = {
   search: {
     width: "mlyh8yej3",
     $$css: true
@@ -35458,7 +35648,6 @@ function FocusableView({
   });
 }
 function NestOperations({
-  rootQuery,
   view,
   nests
 }) {
@@ -35466,22 +35655,18 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    ..._stylex.props(styles$u.tokenContainer),
+    ..._stylex.props(styles$v.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsxRuntime.jsx(NestOperation, {
-      rootQuery,
       view,
       nest
     }, nest.name))
   });
 }
 function NestOperation({
-  rootQuery,
   view,
   nest
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
   const [renameOpen, setRenameOpen] = React.useState(false);
   const parentNestViewPath = React.useContext(NestViewPathContext);
   const {
@@ -35502,7 +35687,7 @@ function NestOperation({
         onClick: () => {
           focusNestView([...parentNestViewPath]);
           nest2.delete();
-          setQuery == null ? void 0 : setQuery(rootQuery.build());
+          updateQuery();
         }
       }), /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
         label: "Rename",
@@ -35511,7 +35696,6 @@ function NestOperation({
         }
       })]
     }), /* @__PURE__ */ jsxRuntime.jsx(AddMenu, {
-      rootQuery,
       view: nest2.view
     })]
   });
@@ -35523,17 +35707,15 @@ function NestOperation({
       },
       children: [/* @__PURE__ */ jsxRuntime.jsx(CollapsiblePanel, {
         title: nest.name,
-        icon: viewToVisualizationIcon(nest.view),
+        icon: tagToVisualization(nest.view.getTag()),
         defaultOpen: true,
         controls: getControls(nest),
         collapsedControls: getControls(nest),
         isFocused: isNestViewFocused([...parentNestViewPath, nest.name]),
         children: /* @__PURE__ */ jsxRuntime.jsx(View, {
-          rootQuery,
           view: nest.view
         })
       }), /* @__PURE__ */ jsxRuntime.jsx(RenameDialog, {
-        rootQuery,
         view,
         target: nest,
         open: renameOpen,
@@ -35543,7 +35725,6 @@ function NestOperation({
   });
 }
 function Operations({
-  rootQuery,
   view,
   viewDef
 }) {
@@ -35554,24 +35735,24 @@ function Operations({
   const orderBys = [];
   const nests = [];
   let limit;
-  if (!(viewDef instanceof QB.ASTSegmentViewDefinition)) {
+  if (!(viewDef instanceof malloyQueryBuilder.ASTSegmentViewDefinition)) {
     return null;
   }
   const segment = viewDef;
   segment.operations.items.forEach((operation) => {
-    if (operation instanceof QB.ASTGroupByViewOperation) {
+    if (operation instanceof malloyQueryBuilder.ASTGroupByViewOperation) {
       groupBys.push(operation);
-    } else if (operation instanceof QB.ASTAggregateViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTAggregateViewOperation || operation instanceof malloyQueryBuilder.ASTCalculateViewOperation) {
       aggregates.push(operation);
-    } else if (operation instanceof QB.ASTWhereViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTWhereViewOperation) {
       filters.push(operation);
-    } else if (operation instanceof QB.ASTHavingViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTHavingViewOperation) {
       filters.push(operation);
-    } else if (operation instanceof QB.ASTOrderByViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTOrderByViewOperation) {
       orderBys.push(operation);
-    } else if (operation instanceof QB.ASTNestViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTNestViewOperation) {
       nests.push(operation);
-    } else if (operation instanceof QB.ASTDrillViewOperation) {
+    } else if (operation instanceof malloyQueryBuilder.ASTDrillViewOperation) {
       drills.push(operation);
     } else {
       limit = operation;
@@ -35582,66 +35763,53 @@ function Operations({
       className: "mly1tpqehw mly10lvyaf"
     },
     children: [/* @__PURE__ */ jsxRuntime.jsx(GroupByOperations, {
-      rootQuery,
       segment,
       view,
       groupBys
     }), /* @__PURE__ */ jsxRuntime.jsx(AggregateOperations, {
-      rootQuery,
       segment,
       view,
       aggregates
     }), /* @__PURE__ */ jsxRuntime.jsx(DrillOperations, {
-      rootQuery,
       drills
     }), /* @__PURE__ */ jsxRuntime.jsx(FilterOperations, {
-      rootQuery,
       filters
     }), /* @__PURE__ */ jsxRuntime.jsx(OrderByOperations, {
-      rootQuery,
       orderBys
     }), /* @__PURE__ */ jsxRuntime.jsx(NestOperations, {
-      rootQuery,
       view,
       nests
     }), /* @__PURE__ */ jsxRuntime.jsx(LimitOperation, {
-      rootQuery,
       limit
     })]
   });
 }
 function ViewDefinition({
-  rootQuery,
   view,
   viewDef
 }) {
-  if (viewDef instanceof QB.ASTArrowViewDefinition) {
+  if (viewDef instanceof malloyQueryBuilder.ASTArrowViewDefinition) {
     return /* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
-      rootQuery,
       view,
       viewDef: viewDef.view
     });
-  } else if (viewDef instanceof QB.ASTRefinementViewDefinition) {
+  } else if (viewDef instanceof malloyQueryBuilder.ASTRefinementViewDefinition) {
     return /* @__PURE__ */ jsxRuntime.jsxs("div", {
       children: [/* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
-        rootQuery,
         view,
         viewDef: viewDef.base
       }), /* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
-        rootQuery,
         view,
         viewDef: viewDef.refinement
       })]
     });
-  } else if (viewDef instanceof QB.ASTSegmentViewDefinition) {
+  } else if (viewDef instanceof malloyQueryBuilder.ASTSegmentViewDefinition) {
     return /* @__PURE__ */ jsxRuntime.jsx(Operations, {
-      rootQuery,
       view,
       viewDef
     });
   } else {
     return /* @__PURE__ */ jsxRuntime.jsx(CollapsingView, {
-      rootQuery,
       viewDef
     });
   }
@@ -35678,11 +35846,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$c.preview
+      style: styles$d.preview
     })]
   });
 }
-const styles$c = {
+const styles$d = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -35710,14 +35878,21 @@ const styles$c = {
   }
 };
 function Query({
-  rootQuery,
-  query,
-  setQuery
+  definition
 }) {
   const {
     focusMainView,
     isMainViewFocused
   } = useQueryFocus();
+  const {
+    rootQuery,
+    setQuery
+  } = React.useContext(QueryEditorContext);
+  const updateQuery = useUpdateQuery();
+  if (!rootQuery) {
+    return null;
+  }
+  const isEmpty = rootQuery.isEmpty();
   return /* @__PURE__ */ jsxRuntime.jsx(FocusableView, {
     children: /* @__PURE__ */ jsxRuntime.jsxs(CollapsiblePanel, {
       title: "Main query",
@@ -35736,44 +35911,41 @@ function Query({
               label: "Clear query",
               onClick: () => {
                 focusMainView();
-                setQuery == null ? void 0 : setQuery(void 0);
+                setQuery(void 0);
               },
-              disabled: rootQuery.isEmpty()
+              disabled: isEmpty
             }), /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, {
               icon: "nest",
               label: "Nest query",
               onClick: () => {
-                if (rootQuery.definition instanceof QB.ASTArrowQueryDefinition) {
-                  rootQuery.definition.view.convertToNest("Nest");
+                if (definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition) {
+                  definition.view.convertToNest("Nest");
                 }
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               },
-              disabled: rootQuery.isEmpty() || !(rootQuery.definition instanceof QB.ASTArrowQueryDefinition)
+              disabled: isEmpty || !(definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition)
             })]
           }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {})
-        }), query.definition instanceof QB.ASTArrowQueryDefinition ? /* @__PURE__ */ jsxRuntime.jsx(AddMenu, {
-          rootQuery,
-          view: query.definition
+        }), definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition ? /* @__PURE__ */ jsxRuntime.jsx(AddMenu, {
+          view: definition
         }) : null]
       }),
       collapsedControls: /* @__PURE__ */ jsxRuntime.jsx(Icon, {
-        name: viewToVisualizationIcon(query)
+        name: tagToVisualization(rootQuery.getTag())
       }),
-      children: [query.definition instanceof QB.ASTArrowQueryDefinition ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      children: [definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition ? /* @__PURE__ */ jsxRuntime.jsxs("div", {
         style: {
           display: "flex",
           flexDirection: "column",
           gap: 8
         },
-        children: [!query.isEmpty() && /* @__PURE__ */ jsxRuntime.jsx(Visualization$1, {
-          rootQuery,
-          view: query
+        children: [!isEmpty && /* @__PURE__ */ jsxRuntime.jsx(Visualization$1, {
+          view: rootQuery
         }), /* @__PURE__ */ jsxRuntime.jsx(ViewDefinition, {
-          rootQuery,
-          view: query.definition,
-          viewDef: query.definition.view
+          view: definition,
+          viewDef: definition.view
         })]
-      }) : null, query.isEmpty() ? /* @__PURE__ */ jsxRuntime.jsx("div", {
+      }) : null, isEmpty ? /* @__PURE__ */ jsxRuntime.jsx("div", {
         ...{
           className: "mly78zum5 mlyl56j7k mly6s0dn4 mlyng8ra"
         },
@@ -35795,27 +35967,27 @@ function Query({
   });
 }
 function Source({
-  rootQuery
+  definition
 }) {
-  if (rootQuery.definition instanceof QB.ASTArrowQueryDefinition) {
+  if (definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ..._stylex.props(styles$u.queryCard, styles$b.content),
+      ..._stylex.props(styles$v.queryCard, styles$c.content),
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ..._stylex.props(styles$u.labelWithIcon),
+        ..._stylex.props(styles$v.labelWithIcon),
         children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsxRuntime.jsx("div", {
           ...{
             className: "mlyb3r6kr mlylyipyv mly117nqv4"
           },
-          children: rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource().name
+          children: definition.source.getSourceInfo().name
         })]
       })
     });
   }
   return null;
 }
-const styles$b = {
+const styles$c = {
   content: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -35866,15 +36038,15 @@ function DateLiteralEditor({
     children: [/* @__PURE__ */ jsxRuntime.jsx(Trigger$2, {
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(tokenStyles.main, styles$a.wrapper, customStyle),
+        ..._stylex.props(tokenStyles.main, styles$b.wrapper, customStyle),
         children: /* @__PURE__ */ jsxRuntime.jsx(DateInput, {
           value: hooks.utc(date).toDate(),
           setValue: onSetValue,
           units,
           onFocus: () => setOpen(true),
           customStyle: {
-            ...styles$a.input,
-            ...isDate2 ? styles$a.dateInput : styles$a.timestampInput
+            ...styles$b.input,
+            ...isDate2 ? styles$b.dateInput : styles$b.timestampInput
           },
           forwardRef: input
         })
@@ -35890,14 +36062,14 @@ function DateLiteralEditor({
           setValue: onSetValue,
           units,
           maxLevel: units,
-          customStyle: styles$a.datePicker,
+          customStyle: styles$b.datePicker,
           forwardRef: picker
         })
       })
     })]
   });
 }
-const styles$a = {
+const styles$b = {
   input: {
     border: "mly1gs6z28",
     borderWidth: null,
@@ -36145,13 +36317,13 @@ function LiteralValueEditor({
   }
 }
 function Parameters({
-  rootQuery
+  definition
 }) {
-  const {
-    setQuery
-  } = React.useContext(QueryEditorContext);
-  if (rootQuery.definition instanceof QB.ASTArrowQueryDefinition) {
-    const source = rootQuery.definition.as.ArrowQueryDefinition().source.as.ReferenceQueryArrowSource();
+  const updateQuery = useUpdateQuery();
+  if (definition instanceof malloyQueryBuilder.ASTArrowQueryDefinition && definition.source instanceof malloyQueryBuilder.ASTReferenceQueryArrowSource) {
+    const {
+      source
+    } = definition;
     const sourceParameters = source.getSourceParameters();
     if (!sourceParameters || sourceParameters.length === 0) {
       return null;
@@ -36165,7 +36337,7 @@ function Parameters({
         children: sourceParameters.map((parameter) => {
           var _a2;
           return /* @__PURE__ */ jsxRuntime.jsxs(TokenGroup, {
-            customStyle: styles$9.tokenGroup,
+            customStyle: styles$a.tokenGroup,
             children: [/* @__PURE__ */ jsxRuntime.jsx(Token, {
               icon: atomicTypeToIcon(parameter.type.kind),
               label: parameter.name
@@ -36174,7 +36346,7 @@ function Parameters({
               value: ((_a2 = source.tryGetParameter(parameter.name)) == null ? void 0 : _a2.parameter.value) ?? parameter.default_value,
               setValue: (value) => {
                 source.setParameter(parameter.name, value);
-                setQuery == null ? void 0 : setQuery(rootQuery.build());
+                updateQuery();
               }
             })]
           }, parameter.name);
@@ -36184,7 +36356,7 @@ function Parameters({
   }
   return null;
 }
-const styles$9 = {
+const styles$a = {
   tokenGroup: {
     display: "mly78zum5",
     $$css: true
@@ -36192,27 +36364,27 @@ const styles$9 = {
 };
 function QueryEditor() {
   const {
-    rootQuery,
-    setQuery
+    rootQuery
   } = React.useContext(QueryEditorContext);
   if (!rootQuery) {
     console.error("Missing <MalloyExplorerProvider>");
     return null;
   }
+  const {
+    definition
+  } = rootQuery;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-    ..._stylex.props(fontStyles.body, styles$8.main),
+    ..._stylex.props(fontStyles.body, styles$9.main),
     children: [/* @__PURE__ */ jsxRuntime.jsx(Source, {
-      rootQuery
+      definition
     }), /* @__PURE__ */ jsxRuntime.jsx(Parameters, {
-      rootQuery
+      definition
     }), /* @__PURE__ */ jsxRuntime.jsx(Query, {
-      rootQuery,
-      query: rootQuery,
-      setQuery
+      definition
     })]
   });
 }
-const styles$8 = {
+const styles$9 = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -36262,7 +36434,7 @@ function BookmarkedView({
             label: "view",
             icon: "view_filled",
             color: "purple",
-            customStyle: styles$7.viewBadge
+            customStyle: styles$8.viewBadge
           }), /* @__PURE__ */ jsxRuntime.jsx(Button, {
             variant: "default",
             size: "compact",
@@ -36278,14 +36450,14 @@ function BookmarkedView({
           })]
         })]
       }),
-      customStyle: styles$7.card,
+      customStyle: styles$8.card,
       children: /* @__PURE__ */ jsxRuntime.jsx(ViewAttributeTable, {
         viewInfo
       })
     })
   });
 }
-const styles$7 = {
+const styles$8 = {
   viewBadge: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -36308,7 +36480,7 @@ function EmptyQueryDisplay({
         className: "mly1bpp3o7 mly78zum5 mlydt5ytf mlyl56j7k mly6s0dn4"
       },
       children: [/* @__PURE__ */ jsxRuntime.jsx("div", {
-        ..._stylex.props(styles$6.header, fontStyles.emphasized),
+        ..._stylex.props(styles$7.header, fontStyles.emphasized),
         children: "Start with a Bookmarked View"
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
         ...{
@@ -36324,7 +36496,7 @@ function EmptyQueryDisplay({
     })
   });
 }
-const styles$6 = {
+const styles$7 = {
   header: {
     paddingBottom: "mly1l90r2v",
     $$css: true
@@ -36518,7 +36690,7 @@ function RunInfoHover({
     children: [/* @__PURE__ */ jsxRuntime.jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        ..._stylex.props(styles$5.triggerContentContainer, fontStyles.body),
+        ..._stylex.props(styles$6.triggerContentContainer, fontStyles.body),
         children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -36529,7 +36701,7 @@ function RunInfoHover({
         side: HOVER_SIDE,
         align: HOVER_ALIGN,
         children: /* @__PURE__ */ jsxRuntime.jsx(HoverCard, {
-          customStyle: styles$5.card,
+          customStyle: styles$6.card,
           children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
             children: [runInfo.customContent, (runInfo == null ? void 0 : runInfo.performanceAspects) && Object.entries(runInfo.performanceAspects).map(([aspect, properties2]) => {
               return /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -36547,7 +36719,7 @@ function RunInfoHover({
               href: runInfo.queryLink.href,
               target: "_blank",
               rel: "noreferrer",
-              ..._stylex.props(styles$5.link, fontStyles.link),
+              ..._stylex.props(styles$6.link, fontStyles.link),
               children: runInfo.queryLink.linkText
             })]
           })
@@ -36556,7 +36728,7 @@ function RunInfoHover({
     })]
   });
 }
-const styles$5 = {
+const styles$6 = {
   card: {
     maxWidth: "mly1dc814f",
     $$css: true
@@ -36747,11 +36919,11 @@ function RenderedResult({
         const {
           stableQuery
         } = drillData;
-        const rootQuery = new QB.ASTQuery({
+        const rootQuery = new malloyQueryBuilder.ASTQuery({
           query: stableQuery,
           source
         });
-        setQuery == null ? void 0 : setQuery(rootQuery.build());
+        setQuery(rootQuery.build());
       },
       tableConfig: {
         enableDrill: true
@@ -36807,7 +36979,7 @@ function LoadingDisplay({
       },
       children: [/* @__PURE__ */ jsxRuntime.jsx(Spinner, {
         size: "large",
-        customStyle: styles$4.spinner
+        customStyle: styles$5.spinner
       }), /* @__PURE__ */ jsxRuntime.jsx("div", {
         ..._stylex.props(fontStyles.emphasized),
         children: `${EXECUTION_STATES[executionState]} query...`
@@ -36831,7 +37003,7 @@ function useTimeElapsedMillis(queryResolutionStartMillis) {
   }, [queryResolutionStartMillis]);
   return time;
 }
-const styles$4 = {
+const styles$5 = {
   spinner: {
     marginBottom: "mly1e56ztr",
     $$css: true
@@ -36900,6 +37072,383 @@ function CopyToClipboard({
     }
   });
 }
+class DataWriter {
+  constructor(stream, result) {
+    this.stream = stream;
+    this.result = result;
+  }
+}
+class JSONWriter extends DataWriter {
+  async process(data) {
+    this.stream.write("[\n");
+    let first = true;
+    for await (const row of data) {
+      if (first) {
+        first = false;
+      } else {
+        this.stream.write(",\n");
+      }
+      const json2 = JSON.stringify(toObject(this.result.schema.fields.filter((field) => field.kind === "dimension"), row.record_value), null, 2);
+      const jsonLines = json2.split("\n");
+      for (let i2 = 0; i2 < jsonLines.length; i2++) {
+        const line = jsonLines[i2];
+        this.stream.write(`  ${line}`);
+        if (i2 < jsonLines.length - 1) {
+          this.stream.write("\n");
+        }
+      }
+    }
+    this.stream.write("\n]\n");
+    this.stream.close();
+  }
+}
+class CSVWriter extends DataWriter {
+  constructor() {
+    super(...arguments);
+    this.columnSeparator = ",";
+    this.rowSeparator = "\n";
+    this.quoteCharacter = '"';
+    this.includeHeader = true;
+    this.emptyCell = "";
+  }
+  escape(value) {
+    const hasInnerQuote = value.includes(this.quoteCharacter);
+    const hasInnerCommas = value.includes(this.columnSeparator);
+    const hasNewline = value.includes(this.rowSeparator);
+    const needsQuoting = hasInnerCommas || hasInnerQuote || hasNewline;
+    if (hasInnerQuote) {
+      value = value.replace(new RegExp(this.quoteCharacter, "g"), this.quoteCharacter + this.quoteCharacter);
+    }
+    if (needsQuoting) {
+      value = this.quoteCharacter + value + this.quoteCharacter;
+    }
+    return value;
+  }
+  // Re-using the old stringify method for sanity.
+  stringify(value) {
+    switch (value.kind) {
+      case "string_cell":
+        return this.escape(value.string_value);
+      case "boolean_cell":
+        return JSON.stringify(value.boolean_value);
+      case "number_cell":
+        return JSON.stringify(value.number_value);
+      case "date_cell":
+        return value.date_value;
+      case "timestamp_cell":
+        return value.timestamp_value;
+      case "json_cell":
+        return this.escape(value.json_value);
+      case "null_cell":
+        return this.emptyCell;
+      case "sql_native_cell":
+        return this.escape(value.sql_native_value);
+    }
+    return "";
+  }
+  // Extra weight to be added because of nested tables inside the cells.
+  getColWeight(fields) {
+    let numKeys = 0;
+    for (const field of fields) {
+      numKeys = numKeys + 1;
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const weight = this.getColWeight(field.type.element_type.fields) - 1;
+        numKeys = numKeys + weight;
+      }
+    }
+    return numKeys;
+  }
+  // Get header row along with extra empty spaces for nested children.
+  getHeaderRow(fields) {
+    const csv = [];
+    let width = 0;
+    for (const field of fields) {
+      csv.push(this.escape(field.name));
+      width++;
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const numKeys = this.getColWeight(field.type.element_type.fields) - 1;
+        width = width + numKeys;
+        for (let i2 = 0; i2 < numKeys; i2++) {
+          csv.push(this.emptyCell);
+        }
+      }
+    }
+    return {
+      rows: [csv.join(this.columnSeparator)],
+      length: 1,
+      width
+    };
+  }
+  // Merge the child matrices i.e. merge the columns into one bigger matrix i.e. CSV.
+  mergeMatrices(matrices) {
+    const maxLength = Math.max(...matrices.map((matrix) => matrix.length));
+    const matrixWidth = matrices.reduce((sum, matrix) => sum + matrix.width, 0);
+    const csvMatrix = [];
+    for (let i2 = 0; i2 < maxLength; i2++) {
+      const csvRow = [];
+      for (const matrix of matrices) {
+        if (i2 < matrix.length) {
+          csvRow.push(matrix.rows[i2]);
+        } else {
+          const emptyCells = Array(matrix.width).fill(this.emptyCell);
+          csvRow.push(...emptyCells);
+        }
+      }
+      csvMatrix.push(csvRow.join(this.columnSeparator));
+    }
+    return {
+      rows: csvMatrix,
+      length: maxLength,
+      width: matrixWidth
+    };
+  }
+  // Gets CSV for a data cell that has nested data.
+  getChildMatrix(fields, value) {
+    if (value.kind !== "array_cell") {
+      return {
+        rows: ["Invalid data found, value is not an array"],
+        length: 1,
+        width: 1
+      };
+    } else if (value.array_value.length === 0) {
+      return {
+        rows: [""],
+        length: 1,
+        width: 1
+      };
+    }
+    const csvMatrix = [];
+    const header = this.getHeaderRow(fields);
+    csvMatrix.push(...header.rows);
+    const width = header.width;
+    let rowCount = 1;
+    for (const row of value.array_value) {
+      if (row.kind === "record_cell") {
+        const rowMatrix = this.getRowMatrix(fields, row.record_value);
+        rowCount = rowCount + rowMatrix.length;
+        csvMatrix.push(...rowMatrix.rows);
+      }
+    }
+    return {
+      rows: csvMatrix,
+      length: rowCount,
+      width
+    };
+  }
+  // Creates CSV content for one row of data.
+  getRowMatrix(fields, row) {
+    const matrices = [];
+    for (let idx = 0; idx < fields.length; idx++) {
+      const field = fields[idx];
+      const val = row[idx];
+      if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+        const cell = this.getChildMatrix(field.type.element_type.fields, val);
+        matrices.push(cell);
+      } else {
+        const cell = {
+          rows: [this.stringify(val)],
+          length: 1,
+          width: 1
+        };
+        matrices.push(cell);
+      }
+    }
+    return this.mergeMatrices(matrices);
+  }
+  async process(data) {
+    let headerDefined = false;
+    for await (const row of data) {
+      const fields = this.result.schema.fields.filter((field) => field.kind === "dimension");
+      if (!headerDefined && this.includeHeader) {
+        const header = this.getHeaderRow(fields);
+        this.stream.write(header.rows[0]);
+        this.stream.write(this.rowSeparator);
+        headerDefined = true;
+      }
+      const rowCsv = this.getRowMatrix(fields, row.record_value);
+      for (const line of rowCsv.rows) {
+        this.stream.write(line);
+        this.stream.write(this.rowSeparator);
+      }
+    }
+    this.stream.close();
+  }
+}
+function toObject(fields, data) {
+  const result = {};
+  for (let idx = 0; idx < fields.length; idx++) {
+    const field = fields[idx];
+    const value = data[idx];
+    switch (value.kind) {
+      case "string_cell":
+        result[field.name] = value.string_value;
+        break;
+      case "boolean_cell":
+        result[field.name] = value.boolean_value;
+        break;
+      case "date_cell":
+        result[field.name] = value.date_value;
+        break;
+      case "timestamp_cell":
+        result[field.name] = value.timestamp_value;
+        break;
+      case "number_cell":
+        result[field.name] = value.number_value;
+        break;
+      case "json_cell":
+        result[field.name] = value.json_value;
+        break;
+      case "record_cell":
+        result[field.name] = toObject(fields, value.record_value);
+        break;
+      case "array_cell":
+        if (field.type.kind === "array_type" && field.type.element_type.kind === "record_type") {
+          const ary = [];
+          for (const cell of value.array_value) {
+            if (cell.kind === "record_cell") {
+              ary.push(toObject(field.type.element_type.fields, cell.record_value));
+            }
+          }
+          result[field.name] = ary;
+        }
+        break;
+      case "null_cell":
+        result[field.name] = null;
+        break;
+      case "sql_native_cell":
+        result[field.name] = value.sql_native_value;
+        break;
+    }
+  }
+  return result;
+}
+async function* dataIterator(result) {
+  var _a2;
+  if (((_a2 = result.data) == null ? void 0 : _a2.kind) === "array_cell") {
+    for (const row of result.data.array_value) {
+      if (row.kind === "record_cell") {
+        yield row;
+      }
+    }
+  }
+}
+function DownloadButton({
+  name = "malloy",
+  result
+}) {
+  const [href, setHref] = React.useState("");
+  const [fileName, setFileName] = React.useState("");
+  const [format2, _setFormat] = React.useState("csv");
+  React.useEffect(() => {
+    const createBlob = async () => {
+      if (!result) {
+        setHref("");
+        return;
+      }
+      const writeStream = new MemoryWriteStream();
+      let writer;
+      let type;
+      let fileName2;
+      if (format2 === "json") {
+        writer = new JSONWriter(writeStream, result);
+        type = "text/json";
+        fileName2 = `${name}.json`;
+      } else {
+        writer = new CSVWriter(writeStream, result);
+        type = "text/csv";
+        fileName2 = `${name}.csv`;
+      }
+      const rowStream = dataIterator(result);
+      await writer.process(rowStream);
+      writeStream.close();
+      const data = writeStream.data;
+      const blob = new Blob([data], {
+        type
+      });
+      setHref(window.URL.createObjectURL(blob));
+      setFileName(fileName2);
+    };
+    void createBlob();
+  }, [name, format2, result]);
+  React.useEffect(() => {
+    return () => {
+      if (href) {
+        window.URL.revokeObjectURL(href);
+      }
+    };
+  }, [href]);
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("a", {
+      href,
+      download: fileName,
+      ...props(styles$4.link, fontStyles.body),
+      children: [/* @__PURE__ */ jsxRuntime.jsx(Icon, {
+        name: "download"
+      }), /* @__PURE__ */ jsxRuntime.jsx("div", {
+        children: "Download CSV"
+      })]
+    });
+  } else {
+    return null;
+  }
+}
+class MemoryWriteStream {
+  constructor() {
+    this._data = [];
+  }
+  write(data) {
+    this._data.push(data);
+  }
+  close() {
+  }
+  get data() {
+    return this._data.join("");
+  }
+}
+const styles$4 = {
+  link: {
+    display: "mly78zum5",
+    alignContent: "mlyc26acl",
+    gap: "mly167g77z",
+    rowGap: null,
+    columnGap: null,
+    textDecoration: "mly1hl2dhg",
+    textDecorationColor: null,
+    textDecorationLine: null,
+    textDecorationStyle: null,
+    textDecorationThickness: null,
+    background: "mly1md70p1 mly14hn1a8 mlywghvya",
+    backgroundAttachment: null,
+    backgroundClip: null,
+    backgroundColor: null,
+    backgroundImage: null,
+    backgroundOrigin: null,
+    backgroundPosition: null,
+    backgroundPositionX: null,
+    backgroundPositionY: null,
+    backgroundRepeat: null,
+    backgroundSize: null,
+    borderRadius: "mlyur7f20",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    padding: "mlyfawy5m",
+    paddingInline: null,
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: null,
+    paddingTop: null,
+    paddingBottom: null,
+    $$css: true
+  }
+};
 var Tab = /* @__PURE__ */ function(Tab2) {
   Tab2["RESULTS"] = "Results";
   Tab2["MALLOY"] = "Malloy";
@@ -36914,7 +37463,7 @@ function ResultPanel({
   submittedQuery,
   options
 }) {
-  var _a2, _b2, _c2;
+  var _a2, _b2, _c2, _d;
   const [tab, setTab] = React.useState(Tab.MALLOY);
   const malloyText = (_a2 = useQueryBuilder(source, draftQuery)) == null ? void 0 : _a2.toMalloy();
   const views = source.schema.fields.filter((f2) => f2.kind === "view");
@@ -36972,6 +37521,8 @@ function ResultPanel({
       }), tab !== Tab.RESULTS && clipboardText && /* @__PURE__ */ jsxRuntime.jsx(CopyToClipboard, {
         text: clipboardText,
         label: "Copy Code"
+      }), tab === Tab.RESULTS && /* @__PURE__ */ jsxRuntime.jsx(DownloadButton, {
+        result: (_b2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _b2.result
       })]
     }), /* @__PURE__ */ jsxRuntime.jsxs("div", {
       ...{
@@ -37021,7 +37572,7 @@ function ResultPanel({
         ...{
           className: "mlywp4ipm mlyh8yej3 mly5yr21d mly9f619"
         },
-        children: ((_c2 = (_b2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _b2.result) == null ? void 0 : _c2.sql) && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, {
+        children: ((_d = (_c2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _c2.result) == null ? void 0 : _d.sql) && /* @__PURE__ */ jsxRuntime.jsx(CodeBlock, {
           code: submittedQuery.response.result.sql,
           language: "sql"
         })
@@ -37277,7 +37828,7 @@ function useOperations(view, field, path) {
   const groupByDisabledReason = React.useMemo(() => {
     const segment = getSegmentIfPresent(view);
     if ((matchingFieldItem == null ? void 0 : matchingFieldItem.field.kind) !== "dimension") {
-      return "Grouping is only available on a dimenion.";
+      return "Grouping is only available on a dimension.";
     }
     if (segment == null ? void 0 : segment.hasField(field.name, path)) {
       return "Cannot group by a field already in the view.";
@@ -37332,145 +37883,44 @@ function useOperations(view, field, path) {
     return "";
   }, [matchingFieldItem, view, path, field.name, fullName]);
   return {
-    isGroupByAllowed: !groupByDisabledReason,
     groupByDisabledReason,
-    isAggregateAllowed: !aggregateDisabledReason,
     aggregateDisabledReason,
-    isFilterAllowed: !filterDisabledReason,
     filterDisabledReason,
-    isOrderByAllowed: !orderByDisabledReason,
     orderByDisabledReason
   };
 }
 const FILTERABLE_TYPES = ["string_type", "boolean_type", "number_type", "date_type", "timestamp_type"];
 const ORDERABLE_TYPES = ["string_type", "number_type", "boolean_type", "date_type", "timestamp_type"];
 function FieldTokenWithActions({
+  rootQuery,
   field,
   path,
   viewDef
 }) {
-  const {
-    rootQuery,
-    setQuery
-  } = React.useContext(QueryEditorContext);
   const {
     focusedNestView
   } = useQueryFocus();
+  const updateQuery = useUpdateQuery();
   const view = focusedNestView ?? viewDef;
-  const {
-    groupByDisabledReason,
-    aggregateDisabledReason,
-    filterDisabledReason,
-    orderByDisabledReason
-  } = useOperations(view, field, path);
-  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = React.useState();
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = React.useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = React.useState(false);
-  const handleAddOperationAction = (operation, filter) => {
-    if (field.kind === "dimension" || field.kind === "measure") {
-      if (operation === "groupBy" && !groupByDisabledReason) {
-        addGroupBy(view, field, path);
-      } else if (operation === "aggregate" && !aggregateDisabledReason) {
-        addAggregate(view, field, path);
-      } else if (operation === "orderBy" && !orderByDisabledReason) {
-        addOrderByFromSource(view, path, field.name);
-      } else if (operation === "filter" && !filterDisabledReason && filter) {
-        addFilter(view, field, path, filter);
-      }
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
-  const handleSetView = () => {
-    if (field.kind === "view" && (rootQuery == null ? void 0 : rootQuery.isEmpty())) {
-      rootQuery == null ? void 0 : rootQuery.setView(field.name);
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
-  const handleAddView = () => {
-    if (field.kind === "view") {
-      addNest(view, field);
-      setQuery == null ? void 0 : setQuery(rootQuery == null ? void 0 : rootQuery.build());
-    }
-  };
+  const showHover = isFilterPopoverOpen || isTooltipOpen;
   return /* @__PURE__ */ jsxRuntime.jsx(FieldToken, {
     field,
-    hoverActions: field.kind === "view" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "insert",
-        disabled: !(rootQuery == null ? void 0 : rootQuery.isEmpty()),
-        onClick: handleSetView,
-        tooltip: !(rootQuery == null ? void 0 : rootQuery.isEmpty()) ? "Can only add a view to an empty query." : "Add view",
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "nest",
-        onClick: handleAddView,
-        tooltip: "Add as new nested query",
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "measure" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "aggregate",
-        tooltip: aggregateDisabledReason || "Add as aggregate",
-        disabled: !!aggregateDisabledReason,
-        onClick: () => handleAddOperationAction("aggregate"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "orderBy",
-        tooltip: orderByDisabledReason || "Add as order by",
-        disabled: !!orderByDisabledReason,
-        onClick: () => handleAddOperationAction("orderBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "dimension" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "groupBy",
-        tooltip: groupByDisabledReason || "Add as group by",
-        disabled: !!groupByDisabledReason,
-        onClick: () => handleAddOperationAction("groupBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
-        icon: "orderBy",
-        tooltip: orderByDisabledReason || "Add as order by",
-        disabled: !!orderByDisabledReason,
-        onClick: () => handleAddOperationAction("orderBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : null,
-    onClick: field.kind === "dimension" && !groupByDisabledReason ? () => handleAddOperationAction("groupBy") : field.kind === "measure" && !aggregateDisabledReason ? () => handleAddOperationAction("aggregate") : field.kind === "view" ? () => {
-      if (rootQuery == null ? void 0 : rootQuery.isEmpty()) {
-        handleSetView();
-      } else {
-        handleAddView();
+    hoverActions: /* @__PURE__ */ jsxRuntime.jsx(QueryEditorActions, {
+      rootQuery,
+      field,
+      view,
+      path,
+      setIsFilterPopoverOpen,
+      setIsTooltipOpen
+    }),
+    onClick: () => {
+      if (queryEditorClick(rootQuery, view, field, path)) {
+        updateQuery();
       }
-    } : void 0,
-    hoverActionsVisible: isFilterPopoverOpen || isTooltipOpen,
+    },
+    hoverActionsVisible: showHover,
     tooltip: /* @__PURE__ */ jsxRuntime.jsx(FieldHoverCard, {
       field,
       path
@@ -37506,8 +37956,146 @@ function ActionButton({
     })]
   });
 }
+function QueryEditorActions({
+  rootQuery,
+  view,
+  field,
+  path,
+  setIsTooltipOpen,
+  setIsFilterPopoverOpen
+}) {
+  const updateQuery = useUpdateQuery();
+  const {
+    groupByDisabledReason,
+    aggregateDisabledReason,
+    filterDisabledReason,
+    orderByDisabledReason
+  } = useOperations(view, field, path);
+  const handleAddOperationAction = (operation, filter) => {
+    if (field.kind === "dimension" || field.kind === "measure") {
+      if (operation === "groupBy" && !groupByDisabledReason) {
+        addGroupBy(view, field, path);
+      } else if (operation === "aggregate" && !aggregateDisabledReason) {
+        addAggregate(view, field, path);
+      } else if (operation === "orderBy" && !orderByDisabledReason) {
+        addOrderByFromSource(view, path, field.name);
+      } else if (operation === "filter" && !filterDisabledReason && filter) {
+        addFilter(view, field, path, filter);
+      }
+      updateQuery();
+    }
+  };
+  const handleSetView = () => {
+    if (field.kind === "view" && rootQuery.isEmpty()) {
+      rootQuery.setView(field.name);
+      updateQuery();
+    }
+  };
+  const handleAddView = () => {
+    if (field.kind === "view") {
+      addNest(view, field);
+      updateQuery();
+    }
+  };
+  return field.kind === "view" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "insert",
+      disabled: !rootQuery.isEmpty(),
+      onClick: handleSetView,
+      tooltip: !rootQuery.isEmpty() ? "Can only add a view to an empty query." : "Add view",
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "nest",
+      onClick: handleAddView,
+      tooltip: "Add as new nested query",
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "measure" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "aggregate",
+      tooltip: aggregateDisabledReason || "Add as aggregate",
+      disabled: !!aggregateDisabledReason,
+      onClick: () => handleAddOperationAction("aggregate"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "orderBy",
+      tooltip: orderByDisabledReason || "Add as order by",
+      disabled: !!orderByDisabledReason,
+      onClick: () => handleAddOperationAction("orderBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "dimension" ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "groupBy",
+      tooltip: groupByDisabledReason || "Add as group by",
+      disabled: !!groupByDisabledReason,
+      onClick: () => handleAddOperationAction("groupBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsxRuntime.jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ jsxRuntime.jsx(ActionButton, {
+      icon: "orderBy",
+      tooltip: orderByDisabledReason || "Add as order by",
+      disabled: !!orderByDisabledReason,
+      onClick: () => handleAddOperationAction("orderBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : null;
+}
+function queryEditorClick(rootQuery, view, field, path) {
+  const segment = getSegmentIfPresent(view);
+  if (field.kind === "dimension") {
+    if (!(segment == null ? void 0 : segment.hasField(field.name, path))) {
+      addGroupBy(view, field, path);
+    } else {
+      return false;
+    }
+  } else if (field.kind === "measure") {
+    if (!(segment == null ? void 0 : segment.hasField(field.name, path))) {
+      addAggregate(view, field, path);
+    } else {
+      return false;
+    }
+  } else if (field.kind === "view") {
+    if (rootQuery.isEmpty()) {
+      rootQuery.setView(field.name);
+    } else {
+      addNest(view, field);
+    }
+  } else {
+    return false;
+  }
+  return true;
+}
 const FIELD_KIND_ORDER = ["dimension", "measure", "view"];
 function SearchResultList({
+  rootQuery,
   source,
   items
 }) {
@@ -37517,11 +38105,8 @@ function SearchResultList({
       items: groupFieldItemsByPath(source, group.items)
     }));
   }, [source, items]);
-  const {
-    rootQuery
-  } = React__namespace.useContext(QueryEditorContext);
-  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
-  if (!(viewDef instanceof QB.ASTArrowQueryDefinition)) {
+  const viewDef = rootQuery.definition;
+  if (!(viewDef instanceof malloyQueryBuilder.ASTArrowQueryDefinition)) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -37557,6 +38142,7 @@ function SearchResultList({
           field,
           path
         }) => /* @__PURE__ */ jsxRuntime.jsx(FieldTokenWithActions, {
+          rootQuery,
           field,
           path,
           viewDef
@@ -37583,6 +38169,7 @@ const getSublabelFromPath = (source, path) => {
   return path.length > 0 ? `joined to ${[...path.slice(0, -1), source.name].join(" > ")}` : void 0;
 };
 function FieldGroupList({
+  rootQuery,
   source,
   fieldItems,
   fieldGroupType
@@ -37602,11 +38189,8 @@ function FieldGroupList({
       group
     }) => group === fieldGroupType)) == null ? void 0 : _a2.items) ?? [];
   }, [fieldGroupsByKindByPath, fieldGroupType]);
-  const {
-    rootQuery
-  } = React__namespace.useContext(QueryEditorContext);
-  const viewDef = rootQuery == null ? void 0 : rootQuery.definition;
-  if (!(viewDef instanceof QB.ASTArrowQueryDefinition)) {
+  const viewDef = rootQuery.definition;
+  if (!(viewDef instanceof malloyQueryBuilder.ASTArrowQueryDefinition)) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsx("div", {
@@ -37622,6 +38206,7 @@ function FieldGroupList({
           field,
           path
         }) => /* @__PURE__ */ jsxRuntime.jsx(FieldTokenWithActions, {
+          rootQuery,
           field,
           path,
           viewDef
@@ -37634,7 +38219,8 @@ function SourcePanel({
   onRefresh
 }) {
   const {
-    source
+    source,
+    rootQuery
   } = React__namespace.useContext(QueryEditorContext);
   const [searchQuery, setSearchQuery] = React__namespace.useState("");
   const {
@@ -37657,7 +38243,7 @@ function SourcePanel({
     return [];
   }, [fieldItems, searchQuery]);
   const isSearchActive = !!searchQuery;
-  if (!source) {
+  if (!source || !rootQuery) {
     return null;
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
@@ -37712,6 +38298,7 @@ function SourcePanel({
         className: "mly78zum5 mlydt5ytf mlyysyzu8 mly1iyjqo2"
       },
       children: isSearchActive ? /* @__PURE__ */ jsxRuntime.jsx(SearchResultList, {
+        rootQuery,
         source,
         items: searchResultItems
       }) : /* @__PURE__ */ jsxRuntime.jsxs(AccordionList, {
@@ -37728,6 +38315,7 @@ function SourcePanel({
             color: "cyan"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "dimension"
@@ -37744,6 +38332,7 @@ function SourcePanel({
             color: "green"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "measure"
@@ -37760,6 +38349,7 @@ function SourcePanel({
             color: "purple"
           }),
           children: /* @__PURE__ */ jsxRuntime.jsx(FieldGroupList, {
+            rootQuery,
             source,
             fieldItems,
             fieldGroupType: "view"