@malloydata/malloy-explorer 0.0.299-dev250804170242 → 0.0.299-dev250808170326

package/dist/esm/index.js

@@ -16,7 +16,7 @@ var _a, _b, _captureMap, _compiled, _pattern, _nameMap, _strategy, __EmulatedReg
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useLayoutEffect, useEffect, useMemo, createContext, useContext, useCallback, useState, useRef, createElement, memo, useReducer } from "react";
-import { ASTQuery, ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTAnnotation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTLimitViewOperation, ASTCalculateViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTReferenceExpression, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTReferenceQueryArrowSource } from "@malloydata/malloy-query-builder";
+import { ASTQuery, ASTArrowQueryDefinition, ASTArrowViewDefinition, ASTSegmentViewDefinition, ASTNestViewOperation, ASTRefinementViewDefinition, ASTFilterWithLiteralEquality, ASTAnnotation, ASTLimitViewOperation, ASTOrderByViewOperation, ASTGroupByViewOperation, ASTAggregateViewOperation, ASTCalculateViewOperation, ASTTimeTruncationExpression, ASTFilterWithFilterString, ASTReferenceExpression, ASTWhereViewOperation, ASTHavingViewOperation, ASTDrillViewOperation, ASTReferenceQueryArrowSource } from "@malloydata/malloy-query-builder";
 import { Tag } from "@malloydata/malloy-tag";
 import { MalloyRenderer, isCoreVizPluginInstance } from "@malloydata/render";
 import { TemporalFilterExpression, BooleanFilterExpression, NumberFilterExpression, StringFilterExpression } from "@malloydata/malloy-filter";
@@ -3828,6 +3828,7 @@ const SvgInfo = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns:
 const SvgError = (props2) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", height: "24px", viewBox: "0 -960 960 960", width: "24px", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z" }));
 const SvgRefresh = (props2) => /* @__PURE__ */ React.createElement("svg", { height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("g", { fill: "none", stroke: "currentColor" }, /* @__PURE__ */ React.createElement("path", { d: "m17.08 11.15c.01.16.02.32.02.49 0 3.89-3.16 7.05-7.05 7.05-3.89-.01-7.05-3.16-7.05-7.06 0-3.89 3.16-7.05 7.05-7.05.85 0 1.66.15 2.41.42", strokeWidth: 1.1 }), /* @__PURE__ */ React.createElement("path", { d: "m9.9 2 2.89 2.89-3 3.01" })));
 const SvgSidebarCollapse = (props2) => /* @__PURE__ */ React.createElement("svg", { height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", fill: "currentColor", stroke: "none", ...props2 }, /* @__PURE__ */ React.createElement("path", { fill: "currentColor", stroke: "none", d: "m20 24h-16c-2.2 0-4-1.8-4-4v-16c0-2.2 1.8-4 4-4h16c2.2 0 4 1.8 4 4v16c0 2.2-1.8 4-4 4zm-16-22c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2v-16c0-1.1-.9-2-2-2z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m8 24c-.6 0-1-.4-1-1v-22c0-.6.4-1 1-1s1 .4 1 1v22c0 .6-.4 1-1 1z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m14 13c-.3 0-.5-.1-.7-.3-.4-.4-.4-1 0-1.4l3-3c.4-.4 1-.4 1.4 0s.4 1 0 1.4l-3 3c-.2.2-.4.3-.7.3z" }), /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: "m17 16c-.3 0-.5-.1-.7-.3l-3-3c-.4-.4-.4-1 0-1.4s1-.4 1.4 0l3 3c.4.4.4 1 0 1.4-.2.2-.4.3-.7.3z" }));
+const SvgDownload = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "24px", height: "24px", viewBox: "0 0 80 80", fill: "currentColor", ...props2 }, /* @__PURE__ */ React.createElement("g", null, /* @__PURE__ */ React.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.createElement("svg", { fill: "none", height: 24, viewBox: "0 0 24 24", width: 24, xmlns: "http://www.w3.org/2000/svg", ...props2 }, /* @__PURE__ */ React.createElement("path", { d: "m11 8h10m-10 0c0 1.65685-1.34315 3-3 3s-3-1.34315-3-3m6 0c0-1.65685-1.34315-3-3-3s-3 1.34315-3 3m0 0h-2m10 8h-10m10 0c0-1.6569 1.3431-3 3-3s3 1.3431 3 3m-6 0c0 1.6569 1.3431 3 3 3s3-1.3431 3-3m0 0h2", stroke: "currentColor", strokeWidth: 1.5 }));
 const SvgVizBarChart = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_bar_chart", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "Group-3", transform: "translate(20.000000, 24.000000)", fill: "currentColor" }, /* @__PURE__ */ React.createElement("g", { id: "Group-2", transform: "translate(34.500000, 31.000000) rotate(-270.000000) translate(-34.500000, -31.000000) translate(3.500000, -3.500000)" }, /* @__PURE__ */ React.createElement("path", { d: "M-26.056314,30.056314 L34.943686,30.056314 C37.152825,30.056314 38.943686,31.847175 38.943686,34.056314 L38.943686,34.943686 C38.943686,37.152825 37.152825,38.943686 34.943686,38.943686 L-26.056314,38.943686 C-28.265453,38.943686 -30.056314,37.152825 -30.056314,34.943686 L-30.056314,34.056314 C-30.056314,31.847175 -28.265453,30.056314 -26.056314,30.056314 Z", id: "Rectangle-Copy-59", transform: "translate(4.443686, 34.500000) rotate(-90.000000) translate(-4.443686, -34.500000) " }), /* @__PURE__ */ React.createElement("path", { d: "M-0.491247385,37.8466366 L44.9281075,37.8466366 C47.1372465,37.8466366 48.9281075,39.6374976 48.9281075,41.8466366 L48.9281075,42.7340086 C48.9281075,44.9431476 47.1372465,46.7340086 44.9281075,46.7340086 L-0.491247385,46.7340086 C-2.70038638,46.7340086 -4.49124739,44.9431476 -4.49124739,42.7340086 L-4.49124739,41.8466366 C-4.49124739,39.6374976 -2.70038638,37.8466366 -0.491247385,37.8466366 Z", id: "Rectangle-Copy-62", transform: "translate(22.218430, 42.290323) rotate(-90.000000) translate(-22.218430, -42.290323) " }), /* @__PURE__ */ React.createElement("path", { d: "M23.3837854,43.9469253 L56.6025627,43.9469253 C58.8117017,43.9469253 60.6025627,45.7377863 60.6025627,47.9469253 L60.6025627,48.8342973 C60.6025627,51.0434363 58.8117017,52.8342973 56.6025627,52.8342973 L23.3837854,52.8342973 C21.1746464,52.8342973 19.3837854,51.0434363 19.3837854,48.8342973 L19.3837854,47.9469253 C19.3837854,45.7377863 21.1746464,43.9469253 23.3837854,43.9469253 Z", id: "Rectangle-Copy-66", transform: "translate(39.993174, 48.390611) rotate(-90.000000) translate(-39.993174, -48.390611) " }), /* @__PURE__ */ React.createElement("path", { d: "M46.7286345,49.7286345 L68.8072017,49.7286345 C71.0163407,49.7286345 72.8072017,51.5194955 72.8072017,53.7286345 L72.8072017,54.1927983 C72.8072017,56.4019373 71.0163407,58.1927983 68.8072017,58.1927983 L46.7286345,58.1927983 C44.5194955,58.1927983 42.7286345,56.4019373 42.7286345,54.1927983 L42.7286345,53.7286345 C42.7286345,51.5194955 44.5194955,49.7286345 46.7286345,49.7286345 Z", id: "Rectangle-Copy-67", transform: "translate(57.767918, 53.960716) rotate(-90.000000) translate(-57.767918, -53.960716) " })))));
 const SvgVizBoolean = (props2) => /* @__PURE__ */ React.createElement("svg", { width: "110px", height: "110px", viewBox: "15 15 80 80", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", ...props2 }, /* @__PURE__ */ React.createElement("g", { id: "viz_boolean", stroke: "none", strokeWidth: 1, fill: "none", fillRule: "evenodd" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414-2", transform: "translate(20.000000, 22.000000)", fill: "currentColor", fillRule: "nonzero" }, /* @__PURE__ */ React.createElement("g", { id: "noun_switch_3350414" }, /* @__PURE__ */ React.createElement("path", { d: "M15.2972028,30.8 L54.7027972,30.8 C63.151209,30.8 70,23.9051851 70,15.4 C70,6.89481485 63.151209,0 54.7027972,0 L15.2972028,0 C6.84879098,0 0,6.89481485 0,15.4 C0,23.9051851 6.84879098,30.8 15.2972028,30.8 Z M15.2972028,6.16 L54.7027972,6.16 C59.7718443,6.16 63.8811189,10.2968889 63.8811189,15.4 C63.8811189,20.5031111 59.7718443,24.64 54.7027972,24.64 L15.2972028,24.64 C10.2281557,24.64 6.11888112,20.5031111 6.11888112,15.4 C6.11888112,10.2968889 10.2281557,6.16 15.2972028,6.16 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M19.6340542,21.9997804 C22.2930484,22.0215224 24.7022661,20.4273668 25.7348338,17.9629544 C26.7674016,15.4985421 26.2191958,12.6510518 24.3466309,10.7523518 C22.474066,8.85365189 19.6473211,8.27908795 17.1885612,9.29740315 C14.7298014,10.3157183 13.125,12.7256064 13.125,15.3998806 C13.125,19.0240523 16.0305897,21.9703156 19.6340542,21.9997804 L19.6340542,21.9997804 Z", id: "Path" }), /* @__PURE__ */ React.createElement("path", { d: "M54.7027971,35.2 L15.2972025,35.2 C6.84879081,35.2 0,42.094815 0,50.6 C0,59.105185 6.84879081,66 15.2972025,66 L54.7027971,66 C63.151209,66 70,59.1051851 70,50.6 C70,42.0948149 63.151209,35.2 54.7027971,35.2 L54.7027971,35.2 Z M54.7027971,59.84 L15.2972025,59.84 C10.2281554,59.84 6.11888082,55.7031111 6.11888082,50.6 C6.11888082,45.4968889 10.2281554,41.36 15.2972025,41.36 L54.7027971,41.36 C59.7718442,41.36 63.8811189,45.4968889 63.8811189,50.6 C63.8811189,55.7031111 59.7718442,59.84 54.7027971,59.84 L54.7027971,59.84 Z", id: "Shape" }), /* @__PURE__ */ React.createElement("path", { d: "M50.3659458,44.0002196 C47.7069516,43.9784776 45.2977339,45.5726332 44.2651662,48.0370456 C43.2325984,50.5014579 43.7808042,53.3489482 45.6533691,55.2476482 C47.525934,57.1463481 50.3526789,57.720912 52.8114388,56.7025969 C55.2701986,55.6842817 56.875,53.2743936 56.875,50.6001194 C56.875,46.9759477 53.9694103,44.0296844 50.3659458,44.0002196 Z", id: "Path" })))));
@@ -3870,6 +3871,7 @@ const ICON_MAP = {
   refresh: SvgRefresh,
   sidebarCollapse: SvgSidebarCollapse,
   filterSliders: SvgFilterSliders,
+  download: SvgDownload,
   // Operations
   aggregate: SvgInsertMeasure,
   dimension: SvgTypeIconString,
@@ -3937,11 +3939,11 @@ function Icon({
     return null;
   }
   return /* @__PURE__ */ 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",
@@ -4010,18 +4012,18 @@ function Badge({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$P.main, colorVariants$2[color], customStyle),
+    ..._stylex.props(styles$Q.main, colorVariants$2[color], customStyle),
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       color,
       name: icon
     }), /* @__PURE__ */ jsx("div", {
       "data-testid": "badge-label",
-      ..._stylex.props(fontStyles.badge, styles$P.label),
+      ..._stylex.props(fontStyles.badge, styles$Q.label),
       children: label
     })]
   });
 }
-const styles$P = {
+const styles$Q = {
   main: {
     display: "mly3nfvp2",
     height: "mly1qx5ct2",
@@ -4103,10 +4105,10 @@ function Divider({
   customStyle
 }) {
   return /* @__PURE__ */ 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,
@@ -4912,7 +4914,7 @@ function Button({
   ...props2
 }) {
   const button = /* @__PURE__ */ 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,
@@ -4922,9 +4924,9 @@ function Button({
       },
       children: [icon && /* @__PURE__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$N.icon
+        customStyle: styles$O.icon
       }), label && /* @__PURE__ */ 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__ */ jsx("div", {
@@ -4951,7 +4953,7 @@ function Button({
     return button;
   }
 }
-const styles$N = {
+const styles$O = {
   main: {
     display: "mly3nfvp2",
     flexDirection: "mlydt5ytf",
@@ -5202,7 +5204,7 @@ function Token({
 }) {
   const isInteractive = onClick !== void 0 || asButtonTrigger;
   const token2 = /* @__PURE__ */ 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__ */ jsx(Icon, {
@@ -5239,7 +5241,7 @@ function Token({
     })]
   }) : token2;
 }
-const styles$M = {
+const styles$N = {
   nonInteractive: {
     cursor: "mlyt0e3qv",
     background: "mly1np9qvj",
@@ -5263,7 +5265,7 @@ function TokenGroup({
 }) {
   const count2 = React.Children.count(children);
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$L.main, customStyle),
+    ..._stylex.props(styles$M.main, customStyle),
     children: React.Children.map(children, (child, index2) => /* @__PURE__ */ React.cloneElement(child, {
       customStyle: {
         ...child.props.customStyle,
@@ -5274,16 +5276,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",
@@ -5355,7 +5357,7 @@ function ErrorIcon({
         },
         children: /* @__PURE__ */ jsx(Icon, {
           name: "warning",
-          customStyle: styles$K.errorIcon
+          customStyle: styles$L.errorIcon
         })
       })
     }), /* @__PURE__ */ jsx(TooltipPortal, {
@@ -5368,7 +5370,7 @@ function ErrorIcon({
     })]
   });
 }
-const styles$K = {
+const styles$L = {
   errorIcon: {
     color: "mly1e2nbdu",
     $$css: true
@@ -5413,22 +5415,22 @@ function EditableToken({
       className: "mly78zum5 mly6s0dn4"
     },
     children: [/* @__PURE__ */ 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__ */ jsx(Icon, {
         name: icon,
-        customStyle: styles$J.icon
+        customStyle: styles$K.icon
       }), /* @__PURE__ */ jsxs("span", {
         ...{
           className: "mlywz0xwf"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$J.placeholder),
+          ..._stylex.props(fontStyles.body, styles$K.placeholder),
           style: {
             whiteSpaceCollapse: "preserve"
           },
           children: value
         }), /* @__PURE__ */ 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,
@@ -5453,7 +5455,7 @@ function EditableToken({
     })]
   });
 }
-const styles$J = {
+const styles$K = {
   focused: {
     background: "mlyotlr4g",
     backgroundAttachment: null,
@@ -7795,12 +7797,12 @@ function TextInput({
     }
   };
   return /* @__PURE__ */ 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__ */ jsx(Icon, {
       name: icon,
       color: "secondary"
     }), /* @__PURE__ */ jsx("input", {
-      ..._stylex.props(fontStyles.body, styles$I.input),
+      ..._stylex.props(fontStyles.body, styles$J.input),
       value,
       placeholder,
       onChange: handleChange,
@@ -7808,7 +7810,7 @@ function TextInput({
       onBlur: handleBlur,
       onKeyDown
     }), hasClear && /* @__PURE__ */ 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,
@@ -7816,7 +7818,7 @@ function TextInput({
     })]
   });
 }
-const styles$I = {
+const styles$J = {
   main: {
     display: "mly78zum5",
     alignItems: "mly6s0dn4",
@@ -8025,7 +8027,7 @@ function SelectorToken({
     onValueChange: handleValueChange,
     required: true,
     children: [/* @__PURE__ */ 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__ */ jsx(Icon, {
         name: icon,
         customStyle: tokenStyles.icon
@@ -8052,7 +8054,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)) {
@@ -8083,21 +8085,21 @@ function SelectItem({
   ...props2
 }) {
   return /* @__PURE__ */ jsxs(Item$1, {
-    ..._stylex.props(fontStyles.body, styles$H.selectItem),
+    ..._stylex.props(fontStyles.body, styles$I.selectItem),
     value,
     ...props2,
     children: [value === selectedValue ? /* @__PURE__ */ jsx(Icon, {
       name: "radioChecked",
-      customStyle: styles$H.radioChecked
+      customStyle: styles$I.radioChecked
     }) : /* @__PURE__ */ jsx(Icon, {
       name: "radioUnchecked",
-      customStyle: styles$H.radioUnchecked
+      customStyle: styles$I.radioUnchecked
     }), /* @__PURE__ */ jsx(ItemText, {
       children
     })]
   });
 }
-const styles$H = {
+const styles$I = {
   selectTrigger: {
     whiteSpace: "mlyuxw1ft",
     overflow: "mlyb3r6kr",
@@ -8187,7 +8189,7 @@ function Card({
   customStyle
 }) {
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$G.container, customStyle),
+    ..._stylex.props(styles$H.container, customStyle),
     children: [/* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1717udv"
@@ -8201,7 +8203,7 @@ function Card({
     })]
   });
 }
-const styles$G = {
+const styles$H = {
   container: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -8294,7 +8296,7 @@ function CollapsiblePanel({
         },
         children: [icon && /* @__PURE__ */ jsx(Icon, {
           name: icon,
-          customStyle: styles$F.icon
+          customStyle: styles$G.icon
         }), /* @__PURE__ */ jsx("div", {
           ...{
             className: "mlyuxw1ft mlyb3r6kr mlylyipyv mlyehqz9p mly1ghz6dp mly117nqv4"
@@ -8336,7 +8338,7 @@ function CollapsiblePanel({
     })]
   });
 }
-const styles$F = {
+const styles$G = {
   icon: {
     $$css: true
   }
@@ -8368,10 +8370,10 @@ function CollapsibleListItem({
           className: "mly78zum5 mlydt5ytf mly1iyjqo2 mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$E.label),
+          ..._stylex.props(fontStyles.body, styles$F.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$E.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$F.sublabel),
           children: sublabel
         })]
       })]
@@ -8383,7 +8385,7 @@ function CollapsibleListItem({
     })]
   });
 }
-const styles$E = {
+const styles$F = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -19197,7 +19199,7 @@ function Spinner({
   } = SIZES[size2];
   const frameSize = diameter + border * 2;
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$D.root, customStyle),
+    ..._stylex.props(styles$E.root, customStyle),
     children: /* @__PURE__ */ jsx("span", {
       "aria-valuetext": "Loading",
       ...{
@@ -19217,7 +19219,7 @@ function Spinner({
     })
   });
 }
-const styles$D = {
+const styles$E = {
   root: {
     alignItems: "mly6s0dn4",
     display: "mly3nfvp2",
@@ -22286,7 +22288,7 @@ function toArray() {
     m.millisecond()
   ];
 }
-function toObject() {
+function toObject$1() {
   var m = this;
   return {
     years: m.year(),
@@ -22724,7 +22726,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;
@@ -23615,7 +23617,7 @@ const Popover = ({
     })
   });
 };
-const styles$C = {
+const styles$D = {
   wrapper: {
     position: "mly1n2onr6",
     $$css: true
@@ -23667,7 +23669,7 @@ const SelectDropdown = ({
     setOpen(false);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$C.wrapper, customStyle),
+    ..._stylex.props(styles$D.wrapper, customStyle),
     children: [/* @__PURE__ */ jsxs("button", {
       type: "button",
       autoFocus,
@@ -23735,7 +23737,7 @@ function SelectList({
   const [hoveredIndex, setHoveredIndex] = useState(null);
   return /* @__PURE__ */ jsx(ScrollableArea, {
     children: /* @__PURE__ */ 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) {
@@ -23767,8 +23769,8 @@ function SelectList({
           }), /* @__PURE__ */ jsx(Icon, {
             name: "checkmark",
             customStyle: {
-              ...styles$C.checkIcon,
-              ...isSelected ? styles$C.checkIconSelected : void 0
+              ...styles$D.checkIcon,
+              ...isSelected ? styles$D.checkIconSelected : void 0
             }
           }), /* @__PURE__ */ jsx("span", {
             ...{
@@ -23820,7 +23822,7 @@ const DateInput = ({
     setTempValue(hooks.utc(value).format(format2));
   }, [value, format2]);
   return /* @__PURE__ */ 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,
@@ -23855,7 +23857,7 @@ function guessUnits(moment2, isDateTime) {
   }
   return isDateTime ? "second" : "day";
 }
-const styles$B = {
+const styles$C = {
   active: {
     backgroundColor: "mly1vzefiq",
     $$css: true
@@ -23967,7 +23969,7 @@ function DatePicker({
     });
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$A.outer, customStyle),
+    ..._stylex.props(styles$B.outer, customStyle),
     ref: forwardRef,
     children: [/* @__PURE__ */ jsxs("div", {
       ...{
@@ -24283,7 +24285,7 @@ function DatePicker({
     })]
   });
 }
-const styles$A = {
+const styles$B = {
   outer: {
     userSelect: "mly87ps6o",
     fontSize: "mlymhiqyu",
@@ -24369,7 +24371,7 @@ function Banner({
       className: "mly1q4ynmn mlyh8yej3 mly5yr21d mly78zum5 mlydt5ytf mly1kmqopl mly16zck5j"
     },
     children: [/* @__PURE__ */ 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__ */ jsx("div", {
         ...{
           className: "mly1qx5ct2 mly78zum5 mlyl56j7k mly6s0dn4"
@@ -24382,22 +24384,22 @@ function Banner({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr"
         },
         children: [/* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$z.title, fontStyles.emphasized),
+          ..._stylex.props(styles$A.title, fontStyles.emphasized),
           children: title
         }), /* @__PURE__ */ jsx("div", {
-          ..._stylex.props(styles$z.description, fontStyles.supporting),
+          ..._stylex.props(styles$A.description, fontStyles.supporting),
           children: description
         })]
       })]
     }), children && /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$z.content, fontStyles.body),
+      ..._stylex.props(styles$A.content, fontStyles.body),
       children: /* @__PURE__ */ jsx(ScrollableArea, {
         children
       })
     })]
   });
 }
-const styles$z = {
+const styles$A = {
   header: {
     borderRadius: "mly1q4ynmn",
     borderStartStartRadius: null,
@@ -24539,14 +24541,14 @@ function AccordionList({
       onExpandedItemChange: handleExpandedItemChange
     },
     children: /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$y.main, customStyle),
+      ..._stylex.props(styles$z.main, customStyle),
       children: React.Children.map(children, (child) => /* @__PURE__ */ jsxs(Fragment, {
         children: [child, /* @__PURE__ */ jsx(Divider, {})]
       }))
     })
   });
 }
-const styles$y = {
+const styles$z = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -24583,10 +24585,10 @@ function AccordionListItem({
           className: "mly78zum5 mlydt5ytf mlyb3r6kr mly1iyjqo2"
         },
         children: [/* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.body, styles$x.label),
+          ..._stylex.props(fontStyles.body, styles$y.label),
           children: label
         }), sublabel && /* @__PURE__ */ jsx("span", {
-          ..._stylex.props(fontStyles.supporting, styles$x.sublabel),
+          ..._stylex.props(fontStyles.supporting, styles$y.sublabel),
           children: sublabel
         })]
       }), badge && badge, endIcon && endIcon]
@@ -24598,7 +24600,7 @@ function AccordionListItem({
     })]
   });
 }
-const styles$x = {
+const styles$y = {
   label: {
     flexGrow: "mly1iyjqo2",
     fontWeight: "mly1xlr1w8",
@@ -25883,7 +25885,7 @@ function DropdownMenu({
       children: trigger
     }), /* @__PURE__ */ jsx(Portal2, {
       children: /* @__PURE__ */ jsx(Content2, {
-        ..._stylex.props(fontStyles.body, styles$w.content),
+        ..._stylex.props(fontStyles.body, styles$x.content),
         side: "bottom",
         align: "start",
         sideOffset: 4,
@@ -25910,22 +25912,22 @@ function DropdownMenuItem({
     disabled,
     children: [icon && /* @__PURE__ */ jsx(Icon, {
       name: icon,
-      customStyle: styles$w.icon
+      customStyle: styles$x.icon
     }), /* @__PURE__ */ jsxs("div", {
       ...{
         className: "mly78zum5 mlydt5ytf mly1iyjqo2"
       },
       children: [/* @__PURE__ */ jsx("span", {
-        ..._stylex.props(fontStyles.body, styles$w.label),
+        ..._stylex.props(fontStyles.body, styles$x.label),
         children: label
       }), sublabel && /* @__PURE__ */ 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",
@@ -26009,7 +26011,7 @@ function QueryActionBar({
       children: [/* @__PURE__ */ jsx(Icon, {
         name: "filterSliders"
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.largeBody, styles$v.title),
+        ..._stylex.props(fontStyles.largeBody, styles$w.title),
         children: "Query"
       })]
     }), /* @__PURE__ */ jsxs("div", {
@@ -26054,13 +26056,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",
@@ -26278,27 +26280,31 @@ function FieldToken({
   hoverActionsVisible,
   ...props2
 }) {
+  const [isHovered, setIsHovered] = React.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__ */ 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__ */ jsx(Token, {
       label,
       color: fieldKindToColor(field.kind),
       icon: fieldToIcon(field),
       ...props2
-    }), additionalSiblings, hoverActions && /* @__PURE__ */ jsx("div", {
+    }), additionalSiblings, showHover && /* @__PURE__ */ jsx("div", {
       ...{
         className: "mly1vsucm1 mly2lah0s"
       },
@@ -26314,7 +26320,7 @@ function DrillOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "drills"
     }), /* @__PURE__ */ jsx("div", {
       ...{
@@ -30289,32 +30295,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__ */ jsx(Badge, {
       label: "dimension",
       icon: fieldToIcon(field),
       color: "cyan",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "measure") {
     return /* @__PURE__ */ jsx(Badge, {
       label: "measure",
       icon: fieldToIcon(field),
       color: "green",
-      customStyle: styles$t.noBackground
+      customStyle: styles$u.noBackground
     });
   } else if (field.kind === "join") {
     return /* @__PURE__ */ 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
@@ -30623,7 +30629,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",
@@ -30763,11 +30769,11 @@ function HoverCard({
   customStyle
 }) {
   return /* @__PURE__ */ 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",
@@ -30804,7 +30810,7 @@ function InfoHover({
     children: [/* @__PURE__ */ jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.infoTrigger, fontStyles.body),
+        ..._stylex.props(styles$t.infoTrigger, fontStyles.body),
         children: /* @__PURE__ */ jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -30815,7 +30821,7 @@ function InfoHover({
         side: "right",
         align: "start",
         children: /* @__PURE__ */ jsx(HoverCard, {
-          customStyle: styles$s.card,
+          customStyle: styles$t.card,
           children: info
         })
       })
@@ -30937,9 +30943,9 @@ const PillInput = ({
     commitValue();
   });
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(fontStyles.body, styles$q.main),
+    ..._stylex.props(fontStyles.body, styles$r.main),
     children: /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$q.content, customStyle),
+      ..._stylex.props(styles$r.content, customStyle),
       onKeyUp,
       onClick: () => {
         var _a2;
@@ -31005,7 +31011,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__ */ jsx("div", {
       title: "Remove",
       ...{
@@ -31020,7 +31026,7 @@ const Pill = ({
     })]
   });
 };
-const styles$q = {
+const styles$r = {
   main: {
     borderRadius: "mly12oqio5",
     borderStartStartRadius: null,
@@ -31176,7 +31182,7 @@ function OneOfEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.label, styles$s.left),
+      ..._stylex.props(styles$t.label, styles$t.left),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31236,7 +31242,7 @@ function OneOfStringEditor({
   if (option2.enum) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsx("input", {
           type: "radio",
           checked: isString2 && option2.enum.includes(current),
@@ -31267,7 +31273,7 @@ function OneOfStringEditor({
   } else {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$s.left),
+        ..._stylex.props(styles$t.left),
         children: /* @__PURE__ */ jsx("input", {
           type: "radio",
           checked: isString2,
@@ -31305,7 +31311,7 @@ function OneOfNumberEditor({
   const [value, setValue] = useState(isNumber2 ? current : option2.minimum ?? 0);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsx("input", {
         type: "radio",
         checked: isNumber2,
@@ -31332,7 +31338,7 @@ function OneOfNumberEditor({
         setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }), /* @__PURE__ */ jsx("div", {})]
   });
 }
@@ -31345,7 +31351,7 @@ function OneOfArrayEditor({
   const [value, setValue] = useState(isArray2 ? current : []);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsx("input", {
         type: "radio",
         checked: isArray2,
@@ -31379,7 +31385,7 @@ function OneOfObjectEditor({
   const [objectValue, setObjectValue] = useState(isObject2 ? current : {});
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsx("input", {
         type: "radio",
         checked: isObject2,
@@ -31394,7 +31400,7 @@ function OneOfObjectEditor({
         }
       })
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.nest, styles$s.editorGrid),
+      ..._stylex.props(styles$t.nest, styles$t.editorGrid),
       children: /* @__PURE__ */ jsx(ObjectEditor, {
         current: objectValue,
         updateCurrent: (path2, value) => {
@@ -31419,7 +31425,7 @@ function ArrayEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31443,7 +31449,7 @@ function NumberEditor$1({
   const [value, setValue] = React.useState(current ?? option2.minimum);
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31460,7 +31466,7 @@ function NumberEditor$1({
         setValue(valueAsNumber);
         updateCurrent(path, valueAsNumber);
       },
-      ..._stylex.props(styles$s.input)
+      ..._stylex.props(styles$t.input)
     }, name), option2.description ? /* @__PURE__ */ jsx(InfoHover, {
       info: option2.description
     }) : /* @__PURE__ */ jsx("div", {})]
@@ -31476,7 +31482,7 @@ function StringEditor$1({
   if (option2.enum) {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31496,7 +31502,7 @@ function StringEditor$1({
   } else {
     return /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ createElement("div", {
-        ..._stylex.props(styles$s.left, styles$s.label),
+        ..._stylex.props(styles$t.left, styles$t.label),
         key: `${name}-label`
       }, /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
@@ -31524,14 +31530,14 @@ function BooleanEditor({
 }) {
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left),
+      ..._stylex.props(styles$t.left),
       children: /* @__PURE__ */ jsxs("label", {
-        ..._stylex.props(styles$s.label),
+        ..._stylex.props(styles$t.label),
         htmlFor: `${name}-checkbox`,
         children: [option2.title ?? name, ":"]
       }, `${name}-label`)
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.right),
+      ..._stylex.props(styles$t.right),
       children: /* @__PURE__ */ jsx("input", {
         type: "checkbox",
         checked: current,
@@ -31580,7 +31586,7 @@ function FieldEditor({
   });
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.left, styles$s.label),
+      ..._stylex.props(styles$t.left, styles$t.label),
       children: /* @__PURE__ */ jsxs("label", {
         children: [option2.title ?? name, ":"]
       })
@@ -31660,7 +31666,7 @@ function ObjectEditor({
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [name ? /* @__PURE__ */ jsxs(Fragment, {
       children: [/* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$s.label, styles$s.heading),
+        ..._stylex.props(styles$t.label, styles$t.heading),
         onClick: () => setIsExpanded(!isExpanded),
         children: [/* @__PURE__ */ jsx("label", {
           children: option2.title ?? name
@@ -31748,7 +31754,7 @@ function ObjectEditor({
       }
       return null;
     }) : null, /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.divider)
+      ..._stylex.props(styles$t.divider)
     })]
   });
 }
@@ -31768,9 +31774,9 @@ function VizEditor({
     console.info("RendererEditor current settings:", current);
   }, [current]);
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$s.editor),
+    ..._stylex.props(styles$t.editor),
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$s.editorGrid),
+      ..._stylex.props(styles$t.editorGrid),
       children: /* @__PURE__ */ jsx(ObjectEditor, {
         view,
         name: "",
@@ -31780,13 +31786,13 @@ function VizEditor({
         updateCurrent
       })
     }), /* @__PURE__ */ jsxs("div", {
-      ..._stylex.props(styles$s.editorRow),
+      ..._stylex.props(styles$t.editorRow),
       children: [/* @__PURE__ */ jsx(Button, {
         label: "Cancel",
         onClick: () => {
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       }), /* @__PURE__ */ jsx(Button, {
         variant: "primary",
         label: "Apply",
@@ -31804,7 +31810,7 @@ function VizEditor({
           updateQuery();
           setOpen(false);
         },
-        customStyle: styles$s.editorCell
+        customStyle: styles$t.editorCell
       })]
     })]
   });
@@ -32030,7 +32036,7 @@ function VizEditorDialog({
       children: /* @__PURE__ */ jsx(Overlay, {
         ..._stylex.props(dialogStyles.overlay),
         children: /* @__PURE__ */ 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__ */ jsxs(Title, {
             ..._stylex.props(dialogStyles.title),
             children: ["Visualization Settings", /* @__PURE__ */ jsx(Close, {
@@ -32052,7 +32058,7 @@ function VizEditorDialog({
     })
   });
 }
-const styles$p = {
+const styles$q = {
   content: {
     maxWidth: "mly14zcgw3",
     width: "mly14rvwrp",
@@ -32119,7 +32125,7 @@ function Visualization$1({
     onClick: () => updateViz(viz)
   }));
   const tokens2 = [/* @__PURE__ */ jsx(SelectorToken, {
-    customStyle: styles$o.first,
+    customStyle: styles$p.first,
     icon: `viz_${currentRenderer}`,
     value: currentRenderer,
     items,
@@ -32129,7 +32135,7 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsx(Token, {
       icon: "gear",
       onClick: () => setOpen(true),
-      customStyle: styles$o.trigger,
+      customStyle: styles$p.trigger,
       tooltip: "Edit Settings..."
     }, "gear"));
   }
@@ -32137,12 +32143,12 @@ function Visualization$1({
     tokens2.push(/* @__PURE__ */ jsx(Token, {
       icon: "warning",
       tooltip: error,
-      customStyle: styles$o.trigger
+      customStyle: styles$p.trigger
     }));
   }
   return /* @__PURE__ */ jsxs(Fragment, {
     children: [/* @__PURE__ */ jsx(TokenGroup, {
-      customStyle: styles$o.group,
+      customStyle: styles$p.group,
       children: tokens2
     }), /* @__PURE__ */ jsx(VizEditorDialog, {
       open,
@@ -32152,7 +32158,7 @@ function Visualization$1({
     })]
   });
 }
-const styles$o = {
+const styles$p = {
   trigger: {
     height: "mly1ktj5wk",
     $$css: true
@@ -32189,7 +32195,7 @@ function ViewAttributeTable({
 }) {
   const dimensions = viewInfo.schema.fields.filter((f2) => f2.kind === "dimension");
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$n.attributeTableContainer, style),
+    ..._stylex.props(styles$o.attributeTableContainer, style),
     children: /* @__PURE__ */ jsx("table", {
       ...{
         className: "mly1mwwwfo mly9f619 mlyh8yej3 mly5yr21d"
@@ -32227,9 +32233,9 @@ function ViewAttributeTableRow({
       className: "mlydpxx8g"
     },
     children: [/* @__PURE__ */ jsx("td", {
-      ..._stylex.props(styles$n.attributeTableKeyCell, fontStyles.supporting),
+      ..._stylex.props(styles$o.attributeTableKeyCell, fontStyles.supporting),
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$n.attributeTableKeyCellContent, fontStyles.supporting),
+        ..._stylex.props(styles$o.attributeTableKeyCellContent, fontStyles.supporting),
         children: attribute
       })
     }), /* @__PURE__ */ jsx("td", {
@@ -32240,7 +32246,7 @@ function ViewAttributeTableRow({
     })]
   });
 }
-const styles$n = {
+const styles$o = {
   attributeTableContainer: {
     padding: "mlye8ttls",
     paddingInline: null,
@@ -32370,12 +32376,12 @@ function RichText({
   });
   return /* @__PURE__ */ 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
@@ -32404,7 +32410,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__ */ jsx(Portal$4, {
@@ -32423,7 +32429,7 @@ function HoverText({
     })]
   });
 }
-const styles$l = {
+const styles$m = {
   text: {
     overflow: "mlyb3r6kr",
     overflowX: null,
@@ -32450,7 +32456,7 @@ function FieldHoverCard({
     details = /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: field,
       isCompact: true,
-      style: styles$k.viewAttributeTable
+      style: styles$l.viewAttributeTable
     });
   } else if (field.kind === "dimension") {
     details = /* @__PURE__ */ jsx(TopValuesTable, {
@@ -32459,7 +32465,7 @@ function FieldHoverCard({
     });
   }
   return /* @__PURE__ */ jsxs(HoverCard, {
-    customStyle: styles$k.container,
+    customStyle: styles$l.container,
     children: [/* @__PURE__ */ jsxs("div", {
       ref,
       children: [/* @__PURE__ */ jsx("div", {
@@ -32470,10 +32476,10 @@ function FieldHoverCard({
           field
         })
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.supporting, styles$k.path),
+        ..._stylex.props(fontStyles.supporting, styles$l.path),
         children: pathString
       }), /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(fontStyles.emphasized, styles$k.title),
+        ..._stylex.props(fontStyles.emphasized, styles$l.title),
         children: field.name
       }), description && /* @__PURE__ */ jsx(HoverText, {
         text: description,
@@ -32484,7 +32490,7 @@ function FieldHoverCard({
     })]
   });
 }
-const styles$k = {
+const styles$l = {
   container: {
     width: "mlybl57os",
     maxHeight: "mlyq3t0pi",
@@ -32717,7 +32723,7 @@ function ValueList({
     children: (stringSearchResults == null ? void 0 : stringSearchResults.length) ? stringSearchResults.map((value) => /* @__PURE__ */ jsxs("div", {
       role: "menuitem",
       tabIndex: -1,
-      ..._stylex.props(addMenuStyles.item, styles$j.valueItem),
+      ..._stylex.props(addMenuStyles.item, styles$k.valueItem),
       onClick: () => onClick(value),
       children: [/* @__PURE__ */ jsx(Value, {
         value
@@ -32741,10 +32747,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",
@@ -32920,7 +32926,7 @@ const StringFilterCore = ({
               setSearchValue("");
             }
           },
-          customStyle: styles$i.valueList,
+          customStyle: styles$j.valueList,
           showPath: false,
           filter: (value) => !currentFilter.values.includes(value),
           hideNoMatchMessage: true
@@ -32991,7 +32997,7 @@ function stringFilterChangeType(filter, type) {
       };
   }
 }
-const styles$i = {
+const styles$j = {
   valueList: {
     maxHeight: "mly3d5gib",
     width: "mly1hfn5x7",
@@ -33943,7 +33949,7 @@ function FieldList({
     ..._stylex.props(customStyle),
     children: groups.length ? groups.map((group) => /* @__PURE__ */ jsxs("div", {
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem, 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__ */ jsx(FilterPopover, {
@@ -33953,7 +33959,7 @@ function FieldList({
         anchor: /* @__PURE__ */ jsx("div", {
           role: "menuitem",
           tabIndex: -1,
-          ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+          ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
           children: /* @__PURE__ */ jsx(PopoverTrigger, {
             asChild: true,
             children: /* @__PURE__ */ jsx(FieldToken, {
@@ -33980,7 +33986,7 @@ function FieldList({
       }, group.name + ":" + field.name) : /* @__PURE__ */ jsx("div", {
         role: "menuitem",
         tabIndex: -1,
-        ..._stylex.props(addMenuStyles.item, styles$h.fieldItem),
+        ..._stylex.props(addMenuStyles.item, styles$i.fieldItem),
         children: /* @__PURE__ */ jsx(FieldToken, {
           field,
           onClick: () => onAddOperation(field, group.path),
@@ -34003,7 +34009,7 @@ function FieldList({
     })
   });
 }
-const styles$h = {
+const styles$i = {
   fieldItem: {
     height: "mly1qx5ct2",
     paddingTop: "mly1y1aw1k",
@@ -34032,7 +34038,7 @@ function FieldMenu({
 }) {
   const [search, setSearch] = useState("");
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(addMenuStyles.content, styles$g.content),
+    ..._stylex.props(addMenuStyles.content, styles$h.content),
     role: "menu",
     children: [/* @__PURE__ */ jsx("div", {
       ..._stylex.props(addMenuStyles.item),
@@ -34058,7 +34064,7 @@ function FieldMenu({
     })]
   });
 }
-const styles$g = {
+const styles$h = {
   content: {
     maxHeight: "mly3d5gib",
     $$css: true
@@ -34283,7 +34289,7 @@ function OperationActionTitle({
     return !(segment == null ? void 0 : segment.hasField(field.name, path)) && isNotAnnotatedFilteredField(field);
   };
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(styles$u.title, hoverStyles.main),
+    ..._stylex.props(styles$v.title, hoverStyles.main),
     children: [/* @__PURE__ */ jsx("div", {
       children: title
     }), /* @__PURE__ */ jsx("div", {
@@ -34454,7 +34460,7 @@ function SortableOperations({
       fields,
       ...props2
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: /* @__PURE__ */ jsx(DndContext, {
         sensors,
         collisionDetection: closestCenter,
@@ -34972,10 +34978,10 @@ function FilterOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "filter by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: filters.map((filterOperation, key2) => {
         return /* @__PURE__ */ jsx(ErrorElement, {
           fallback: /* @__PURE__ */ jsxs("div", {
@@ -35062,7 +35068,7 @@ function LimitOperation({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "limit"
     }), /* @__PURE__ */ jsxs("div", {
       ..._stylex.props(hoverStyles.main),
@@ -35107,10 +35113,10 @@ function OrderByOperations({
   }
   return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.title),
+      ..._stylex.props(styles$v.title),
       children: "order by"
     }), /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.tokenContainer),
+      ..._stylex.props(styles$v.tokenContainer),
       children: orderBys.map((orderBy) => {
         const {
           fieldReference
@@ -35193,7 +35199,7 @@ function AddItem({
       children: /* @__PURE__ */ 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__ */ jsxs("div", {
@@ -35217,7 +35223,7 @@ function AddItem({
     }) : null]
   });
 }
-const styles$f = {
+const styles$g = {
   open: {
     background: "mly16o7sp0",
     backgroundAttachment: null,
@@ -35286,10 +35292,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",
@@ -35474,7 +35480,7 @@ function AddMenu({
             value: search,
             onChange: setSearch,
             placeholder: "Search...",
-            customStyle: styles$d.search
+            customStyle: styles$e.search
           })
         }), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsxs("div", {
           ...{
@@ -35588,7 +35594,7 @@ function AddMenu({
     })]
   });
 }
-const styles$d = {
+const styles$e = {
   search: {
     width: "mlyh8yej3",
     $$css: true
@@ -35631,7 +35637,7 @@ function NestOperations({
     return null;
   }
   return /* @__PURE__ */ jsx("div", {
-    ..._stylex.props(styles$u.tokenContainer),
+    ..._stylex.props(styles$v.tokenContainer),
     children: nests.map((nest) => /* @__PURE__ */ jsx(NestOperation, {
       view,
       nest
@@ -35822,11 +35828,11 @@ function CollapsingView({
       })]
     }), !collapsed && /* @__PURE__ */ jsx(ViewAttributeTable, {
       viewInfo: viewDef.getViewInfo(),
-      style: styles$c.preview
+      style: styles$d.preview
     })]
   });
 }
-const styles$c = {
+const styles$d = {
   preview: {
     height: "mlyt7dq6l",
     maxHeight: "mly1hkcv85",
@@ -35947,9 +35953,9 @@ function Source({
 }) {
   if (definition instanceof ASTArrowQueryDefinition) {
     return /* @__PURE__ */ jsx("div", {
-      ..._stylex.props(styles$u.queryCard, styles$b.content),
+      ..._stylex.props(styles$v.queryCard, styles$c.content),
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$u.labelWithIcon),
+        ..._stylex.props(styles$v.labelWithIcon),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "database"
         }), /* @__PURE__ */ jsx("div", {
@@ -35963,7 +35969,7 @@ function Source({
   }
   return null;
 }
-const styles$b = {
+const styles$c = {
   content: {
     display: "mlyrvj5dj",
     gridAutoFlow: "mly1mt1orb",
@@ -36014,15 +36020,15 @@ function DateLiteralEditor({
     children: [/* @__PURE__ */ jsx(Trigger$2, {
       asChild: true,
       children: /* @__PURE__ */ jsx("div", {
-        ..._stylex.props(tokenStyles.main, styles$a.wrapper, customStyle),
+        ..._stylex.props(tokenStyles.main, styles$b.wrapper, customStyle),
         children: /* @__PURE__ */ 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
         })
@@ -36038,14 +36044,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,
@@ -36313,7 +36319,7 @@ function Parameters({
         children: sourceParameters.map((parameter) => {
           var _a2;
           return /* @__PURE__ */ jsxs(TokenGroup, {
-            customStyle: styles$9.tokenGroup,
+            customStyle: styles$a.tokenGroup,
             children: [/* @__PURE__ */ jsx(Token, {
               icon: atomicTypeToIcon(parameter.type.kind),
               label: parameter.name
@@ -36332,7 +36338,7 @@ function Parameters({
   }
   return null;
 }
-const styles$9 = {
+const styles$a = {
   tokenGroup: {
     display: "mly78zum5",
     $$css: true
@@ -36350,7 +36356,7 @@ function QueryEditor() {
     definition
   } = rootQuery;
   return /* @__PURE__ */ jsxs("div", {
-    ..._stylex.props(fontStyles.body, styles$8.main),
+    ..._stylex.props(fontStyles.body, styles$9.main),
     children: [/* @__PURE__ */ jsx(Source, {
       definition
     }), /* @__PURE__ */ jsx(Parameters, {
@@ -36360,7 +36366,7 @@ function QueryEditor() {
     })]
   });
 }
-const styles$8 = {
+const styles$9 = {
   main: {
     display: "mly78zum5",
     flexDirection: "mlydt5ytf",
@@ -36410,7 +36416,7 @@ function BookmarkedView({
             label: "view",
             icon: "view_filled",
             color: "purple",
-            customStyle: styles$7.viewBadge
+            customStyle: styles$8.viewBadge
           }), /* @__PURE__ */ jsx(Button, {
             variant: "default",
             size: "compact",
@@ -36426,14 +36432,14 @@ function BookmarkedView({
           })]
         })]
       }),
-      customStyle: styles$7.card,
+      customStyle: styles$8.card,
       children: /* @__PURE__ */ jsx(ViewAttributeTable, {
         viewInfo
       })
     })
   });
 }
-const styles$7 = {
+const styles$8 = {
   viewBadge: {
     backgroundColor: "mlyjbqb8w",
     $$css: true
@@ -36456,7 +36462,7 @@ function EmptyQueryDisplay({
         className: "mly1bpp3o7 mly78zum5 mlydt5ytf mlyl56j7k mly6s0dn4"
       },
       children: [/* @__PURE__ */ jsx("div", {
-        ..._stylex.props(styles$6.header, fontStyles.emphasized),
+        ..._stylex.props(styles$7.header, fontStyles.emphasized),
         children: "Start with a Bookmarked View"
       }), /* @__PURE__ */ jsx("div", {
         ...{
@@ -36472,7 +36478,7 @@ function EmptyQueryDisplay({
     })
   });
 }
-const styles$6 = {
+const styles$7 = {
   header: {
     paddingBottom: "mly1l90r2v",
     $$css: true
@@ -36666,7 +36672,7 @@ function RunInfoHover({
     children: [/* @__PURE__ */ jsx(Trigger$4, {
       asChild: true,
       children: /* @__PURE__ */ jsxs("div", {
-        ..._stylex.props(styles$5.triggerContentContainer, fontStyles.body),
+        ..._stylex.props(styles$6.triggerContentContainer, fontStyles.body),
         children: [/* @__PURE__ */ jsx(Icon, {
           name: "info",
           color: "disabled"
@@ -36677,7 +36683,7 @@ function RunInfoHover({
         side: HOVER_SIDE,
         align: HOVER_ALIGN,
         children: /* @__PURE__ */ jsx(HoverCard, {
-          customStyle: styles$5.card,
+          customStyle: styles$6.card,
           children: /* @__PURE__ */ jsxs(Fragment, {
             children: [runInfo.customContent, (runInfo == null ? void 0 : runInfo.performanceAspects) && Object.entries(runInfo.performanceAspects).map(([aspect, properties2]) => {
               return /* @__PURE__ */ jsx("div", {
@@ -36695,7 +36701,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
             })]
           })
@@ -36704,7 +36710,7 @@ function RunInfoHover({
     })]
   });
 }
-const styles$5 = {
+const styles$6 = {
   card: {
     maxWidth: "mly1dc814f",
     $$css: true
@@ -36955,7 +36961,7 @@ function LoadingDisplay({
       },
       children: [/* @__PURE__ */ jsx(Spinner, {
         size: "large",
-        customStyle: styles$4.spinner
+        customStyle: styles$5.spinner
       }), /* @__PURE__ */ jsx("div", {
         ..._stylex.props(fontStyles.emphasized),
         children: `${EXECUTION_STATES[executionState]} query...`
@@ -36979,7 +36985,7 @@ function useTimeElapsedMillis(queryResolutionStartMillis) {
   }, [queryResolutionStartMillis]);
   return time;
 }
-const styles$4 = {
+const styles$5 = {
   spinner: {
     marginBottom: "mly1e56ztr",
     $$css: true
@@ -37048,6 +37054,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] = useState("");
+  const [fileName, setFileName] = useState("");
+  const [format2, _setFormat] = useState("csv");
+  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]);
+  useEffect(() => {
+    return () => {
+      if (href) {
+        window.URL.revokeObjectURL(href);
+      }
+    };
+  }, [href]);
+  if (href) {
+    return /* @__PURE__ */ jsxs("a", {
+      href,
+      download: fileName,
+      ...props(styles$4.link, fontStyles.body),
+      children: [/* @__PURE__ */ jsx(Icon, {
+        name: "download"
+      }), /* @__PURE__ */ 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";
@@ -37062,7 +37445,7 @@ function ResultPanel({
   submittedQuery,
   options
 }) {
-  var _a2, _b2, _c2;
+  var _a2, _b2, _c2, _d;
   const [tab, setTab] = useState(Tab.MALLOY);
   const malloyText = (_a2 = useQueryBuilder(source, draftQuery)) == null ? void 0 : _a2.toMalloy();
   const views = source.schema.fields.filter((f2) => f2.kind === "view");
@@ -37120,6 +37503,8 @@ function ResultPanel({
       }), tab !== Tab.RESULTS && clipboardText && /* @__PURE__ */ jsx(CopyToClipboard, {
         text: clipboardText,
         label: "Copy Code"
+      }), tab === Tab.RESULTS && /* @__PURE__ */ jsx(DownloadButton, {
+        result: (_b2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _b2.result
       })]
     }), /* @__PURE__ */ jsxs("div", {
       ...{
@@ -37169,7 +37554,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__ */ jsx(CodeBlock, {
+        children: ((_d = (_c2 = submittedQuery == null ? void 0 : submittedQuery.response) == null ? void 0 : _c2.result) == null ? void 0 : _d.sql) && /* @__PURE__ */ jsx(CodeBlock, {
           code: submittedQuery.response.result.sql,
           language: "sql"
         })
@@ -37425,7 +37810,7 @@ function useOperations(view, field, path) {
   const groupByDisabledReason = 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.";
@@ -37494,125 +37879,30 @@ function FieldTokenWithActions({
   path,
   viewDef
 }) {
-  const updateQuery = useUpdateQuery();
   const {
     focusedNestView
   } = useQueryFocus();
+  const updateQuery = useUpdateQuery();
   const view = focusedNestView ?? viewDef;
-  const {
-    groupByDisabledReason,
-    aggregateDisabledReason,
-    filterDisabledReason,
-    orderByDisabledReason
-  } = useOperations(view, field, path);
-  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState();
+  const [isFilterPopoverOpen, setIsFilterPopoverOpen] = useState(false);
   const [isTooltipOpen, setIsTooltipOpen] = 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);
-      }
-      updateQuery();
-    }
-  };
-  const handleSetView = () => {
-    if (field.kind === "view" && rootQuery.isEmpty()) {
-      rootQuery.setView(field.name);
-      updateQuery();
-    }
-  };
-  const handleAddView = () => {
-    if (field.kind === "view") {
-      addNest(view, field);
-      updateQuery();
-    }
-  };
+  const showHover = isFilterPopoverOpen || isTooltipOpen;
   return /* @__PURE__ */ jsx(FieldToken, {
     field,
-    hoverActions: field.kind === "view" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ 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__ */ jsx(ActionButton, {
-        icon: "nest",
-        onClick: handleAddView,
-        tooltip: "Add as new nested query",
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(ActionButton, {
-        icon: "aggregate",
-        tooltip: aggregateDisabledReason || "Add as aggregate",
-        disabled: !!aggregateDisabledReason,
-        onClick: () => handleAddOperationAction("aggregate"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ jsx(ActionButton, {
-        icon: "orderBy",
-        tooltip: orderByDisabledReason || "Add as order by",
-        disabled: !!orderByDisabledReason,
-        onClick: () => handleAddOperationAction("orderBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      })]
-    }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsx(ActionButton, {
-        icon: "groupBy",
-        tooltip: groupByDisabledReason || "Add as group by",
-        disabled: !!groupByDisabledReason,
-        onClick: () => handleAddOperationAction("groupBy"),
-        onTooltipOpenChange: setIsTooltipOpen
-      }), /* @__PURE__ */ jsx(FilterPopover, {
-        fieldInfo: field,
-        path,
-        setFilter: (filter) => handleAddOperationAction("filter", filter),
-        trigger: /* @__PURE__ */ jsx(ActionButton, {
-          icon: "filter",
-          tooltip: filterDisabledReason || "Add as filter",
-          disabled: !!filterDisabledReason,
-          onTooltipOpenChange: setIsTooltipOpen
-        }),
-        onOpenChange: setIsFilterPopoverOpen,
-        layoutProps: {
-          align: "start"
-        }
-      }), /* @__PURE__ */ 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.isEmpty()) {
-        handleSetView();
-      } else {
-        handleAddView();
+    hoverActions: /* @__PURE__ */ 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__ */ jsx(FieldHoverCard, {
       field,
       path
@@ -37648,6 +37938,143 @@ 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__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ 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__ */ jsx(ActionButton, {
+      icon: "nest",
+      onClick: handleAddView,
+      tooltip: "Add as new nested query",
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "measure" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ActionButton, {
+      icon: "aggregate",
+      tooltip: aggregateDisabledReason || "Add as aggregate",
+      disabled: !!aggregateDisabledReason,
+      onClick: () => handleAddOperationAction("aggregate"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ jsx(ActionButton, {
+      icon: "orderBy",
+      tooltip: orderByDisabledReason || "Add as order by",
+      disabled: !!orderByDisabledReason,
+      onClick: () => handleAddOperationAction("orderBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    })]
+  }) : field.kind === "dimension" ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(ActionButton, {
+      icon: "groupBy",
+      tooltip: groupByDisabledReason || "Add as group by",
+      disabled: !!groupByDisabledReason,
+      onClick: () => handleAddOperationAction("groupBy"),
+      onTooltipOpenChange: setIsTooltipOpen
+    }), /* @__PURE__ */ jsx(FilterPopover, {
+      fieldInfo: field,
+      path,
+      setFilter: (filter) => handleAddOperationAction("filter", filter),
+      trigger: /* @__PURE__ */ jsx(ActionButton, {
+        icon: "filter",
+        tooltip: filterDisabledReason || "Add as filter",
+        disabled: !!filterDisabledReason,
+        onTooltipOpenChange: setIsTooltipOpen
+      }),
+      onOpenChange: setIsFilterPopoverOpen,
+      layoutProps: {
+        align: "start"
+      }
+    }), /* @__PURE__ */ 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,