@sanity/vision 6.20.0-next.58 → 6.20.0-next.63

package/lib/{SanityVision-CzPeT0iH.js → SanityVision-egTyQq4i.js}

@@ -1,28 +1,29 @@
-import { t as visionLocaleNamespace } from "./i18n-t8J2mRUI.js";
-import { Component, Fragment, Suspense, use, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { t as visionLocaleNamespace } from "./i18n-JS8KzGj8.js";
+import { Component, Fragment, Suspense, createContext, lazy, use, useEffect, useImperativeHandle, useRef, useState, useSyncExternalStore } from "react";
 import { ContextMenuButton, RELEASES_STUDIO_CLIENT_OPTIONS, Translate, UserAvatar, VARIANTS_STUDIO_CLIENT_OPTIONS, getDefaultVariant, getReleaseIdFromReleaseDocumentId, getVariantTitle, isCardinalityOneRelease, sortReleases, useActiveReleases, useClient, useCurrentUser, useDataset, useDateTimeFormat, useKeyValueStore, usePerspective, useScheduledDraftsEnabled, useTranslation, useWorkspace } from "sanity";
 import { IntentLink } from "sanity/router";
 import { c } from "react/compiler-runtime";
-import { Box, Container, Flex, Grid, VStack } from "ui5";
-import { Badge, Button, Card, Dialog, Heading, Hotkeys, Inline, Label, Select, Spinner, Tab, TabList, Text, TextInput, rem, useClickOutsideEvent, useTheme, useTheme_v2 } from "@sanity/ui";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { SplitPane } from "@rexxars/react-split-pane";
 import { ChevronLeftIcon } from "@sanity/icons/ChevronLeft";
 import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
+import { Badge, Button, Card, Dialog, Heading, Hotkeys, Inline, Label, Select, Spinner, Stack, Tab, TabList, Text, TextInput, rem, useClickOutsideEvent, useTheme, useTheme_v2 } from "@sanity/ui";
 import { useToast } from "@sanity/ui/toast";
 import { isHotkey } from "is-hotkey-esm";
+import { Box, Container, Flex, Grid, VStack } from "ui5";
 import { useEffectEvent } from "use-effect-event";
 import { closeBrackets } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { javascriptLanguage } from "@codemirror/lang-javascript";
-import { HighlightStyle, bracketMatching, defaultHighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
+import { HighlightStyle, bracketMatching, defaultHighlightStyle, foldGutter, indentOnInput, syntaxHighlighting } from "@codemirror/language";
 import { highlightSelectionMatches } from "@codemirror/search";
+import { EditorState } from "@codemirror/state";
 import { EditorView, drawSelection, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers } from "@codemirror/view";
 import { groq } from "@sanity/lezer-groq";
-import CodeMirror, { EditorSelection } from "@uiw/react-codemirror";
+import CodeMirror, { EditorSelection as EditorSelection$1 } from "@uiw/react-codemirror";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { tags } from "@lezer/highlight";
 import { hues } from "@sanity/color";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ErrorOutlineIcon } from "@sanity/icons/ErrorOutline";
 import { Tooltip } from "@sanity/ui/tooltip";
 import debounce from "lodash-es/debounce.js";
@@ -37,8 +38,8 @@ import { Code } from "@sanity/ui/code";
 import { Menu, MenuButton, MenuItem } from "@sanity/ui/menu";
 import { dequal } from "dequal/lite";
 import { uuid } from "@sanity/uuid";
-import { map, startWith } from "rxjs/operators";
 import { PlayIcon } from "@sanity/icons/Play";
+import { RocketIcon } from "@sanity/icons/Rocket";
 import { StopIcon } from "@sanity/icons/Stop";
 import { CopyIcon } from "@sanity/icons/Copy";
 import { HelpCircleIcon } from "@sanity/icons/HelpCircle";
@@ -50,7 +51,18 @@ import { LinkIcon } from "@sanity/icons/Link";
 import LRU from "quick-lru";
 import { DocumentSheetIcon } from "@sanity/icons/DocumentSheet";
 import { useObservablePromise } from "react-rx";
-import { catchError, map as map$1, of } from "rxjs";
+import { catchError, map, of } from "rxjs";
+var __defProp = Object.defineProperty, __exportAll = (all, no_symbols) => {
+	let target = {};
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: !0
+	});
+	return no_symbols || __defProp(target, Symbol.toStringTag, { value: "Module" }), target;
+};
+function prefixApiVersion(version) {
+	return version[0] !== "v" && version !== "other" ? `v${version}` : version;
+}
 const API_VERSIONS = [
 	"v1",
 	"vX",
@@ -59,20 +71,7 @@ const API_VERSIONS = [
 	"v2022-03-07",
 	"v2025-02-19",
 	`v${(/* @__PURE__ */ new Date()).toISOString().split("T")[0]}`
-], [DEFAULT_API_VERSION] = API_VERSIONS.slice(-1);
-function DelayedSpinner(props) {
-	let $ = c(5), [show, setShow] = useState(!1), t0, t1;
-	$[0] === props.delay ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
-		let timer = setTimeout(() => setShow(!0), props.delay || 500);
-		return () => clearTimeout(timer);
-	}, t1 = [props.delay], $[0] = props.delay, $[1] = t0, $[2] = t1), useEffect(t0, t1);
-	let t2;
-	return $[3] === show ? t2 = $[4] : (t2 = show ? /* @__PURE__ */ jsx(Spinner, {
-		muted: !0,
-		size: 4
-	}) : null, $[3] = show, $[4] = t2), t2;
-}
-const sharedExtensions = [
+], [DEFAULT_API_VERSION] = API_VERSIONS.slice(-1), VARIANTS_API_VERSION = prefixApiVersion(VARIANTS_STUDIO_CLIENT_OPTIONS.apiVersion), sharedExtensions = [
 	lineNumbers(),
 	highlightActiveLine(),
 	highlightActiveLineGutter(),
@@ -92,7 +91,12 @@ const sharedExtensions = [
 		...defaultKeymap,
 		...historyKeymap
 	])
-], groqExtensions = [groq(), ...sharedExtensions], paramsExtensions = [javascriptLanguage, ...sharedExtensions];
+], groqExtensions = [groq(), ...sharedExtensions], paramsExtensions = [javascriptLanguage, ...sharedExtensions], resultJsonExtensions = [
+	javascriptLanguage,
+	...sharedExtensions,
+	foldGutter(),
+	EditorState.readOnly.of(!0)
+];
 function useCodemirrorTheme(theme) {
 	let $ = c(7), t0;
 	$[0] === theme ? t0 = $[1] : (t0 = createTheme(theme), $[0] = theme, $[1] = t0);
@@ -121,7 +125,40 @@ function createTheme(theme) {
 			color: card.fg
 		},
 		".cm-panels.cm-panels-top": { borderBottom: `2px solid ${card.border}` },
-		".cm-panels.cm-panels-bottom": { borderTop: `2px solid ${card.border}` }
+		".cm-panels.cm-panels-bottom": { borderTop: `2px solid ${card.border}` },
+		".cm-tooltip": {
+			backgroundColor: card.bg,
+			color: card.fg,
+			border: `1px solid ${card.border}`,
+			borderRadius: "3px"
+		},
+		".cm-tooltip-lint": {
+			fontFamily: fonts.text.family,
+			maxWidth: "520px"
+		},
+		".cm-panel.cm-panel-lint ul [aria-selected]": { backgroundColor: selection },
+		".cm-panel.cm-panel-lint ul [aria-selected] .cm-diagnostic": { color: card.fg },
+		".cm-vista-function-doc, .cm-vista-extract-button": {
+			fontFamily: fonts.text.family,
+			fontSize: rem(fonts.text.sizes[1].fontSize)
+		},
+		".cm-vista-function-code, .cm-vista-function-doc code": {
+			fontFamily: fonts.code.family,
+			fontSize: rem(fonts.code.sizes[1].fontSize)
+		},
+		".cm-vista-function-note": { color: card.muted.fg },
+		".cm-vista-function-link": { color: card.link.fg },
+		".cm-vista-extract-button:hover, .cm-vista-extract-button:focus-visible": { backgroundColor: selection },
+		".cm-tooltip.cm-tooltip-autocomplete > ul": { fontFamily: fonts.code.family },
+		".cm-tooltip.cm-tooltip-autocomplete > ul > li[aria-selected]": {
+			backgroundColor: selection,
+			color: card.fg
+		},
+		".cm-completionDetail": {
+			color: card.muted.fg,
+			fontStyle: "normal",
+			marginLeft: "1em"
+		}
 	}, { dark: color.dark });
 }
 function createHighlight(theme) {
@@ -225,57 +262,142 @@ function createHighlight(theme) {
 		}
 	]);
 }
-var contentBorderRightWidthVar = "var(--_1o4e43l1)", contentPaddingTopVar = "var(--_1o4e43l2)", editorRoot = "_1o4e43l3", linePaddingLeftVar = "var(--_1o4e43l0)";
+function insets(element, sides) {
+	let style = getComputedStyle(element), total = 0;
+	for (let side of sides) total += (parseFloat(style[`padding${side}`]) || 0) + (parseFloat(style[`border${side}Width`]) || 0);
+	return total;
+}
+/** How many digits CodeMirror's line-number gutter reserves for a document of `lines` lines: 9, 99, 999, ... */
+function lineNumberDigits(lines) {
+	let widest = 9;
+	for (; widest < lines;) widest = widest * 10 + 9;
+	return String(widest).length;
+}
+let measuredScrollbarWidth;
+/** The width of a classic vertical scrollbar; 0 where scrollbars are overlaid (macOS, phones) */
+function getScrollbarWidth() {
+	if (measuredScrollbarWidth === void 0) {
+		let probe = document.createElement("div");
+		probe.style.cssText = "position:absolute;top:-9999px;left:-9999px;width:100px;height:100px;overflow:scroll;visibility:hidden", document.body.append(probe), measuredScrollbarWidth = Math.max(0, probe.offsetWidth - probe.clientWidth), probe.remove();
+	}
+	return measuredScrollbarWidth;
+}
+/**
+* How many default-width characters fit on a line of the editor without scrolling sideways: the
+* scroller's visible width less its gutters and the insets around the text (the content's
+* padding and borders, and the line's padding). With `lines`, the width is the one the editor
+* will have once the document has that many lines: a wider line-number gutter, and a vertical
+* scrollbar where the document will no longer fit the editor's height. `undefined` while the
+* editor has no layout, as when it is hidden or has not measured its font yet.
+*/
+function getVisibleColumns(view, { lines, scrollbarWidth } = {}) {
+	let { scrollDOM, contentDOM, defaultCharacterWidth, defaultLineHeight } = view, gutters = scrollDOM.querySelector(".cm-gutters"), line = contentDOM.querySelector(".cm-line"), currentLines = view.state.doc.lines, nextLines = lines ?? currentLines, gutterGrowth = (lineNumberDigits(nextLines) - lineNumberDigits(currentLines)) * defaultCharacterWidth, willOverflowVertically = nextLines * defaultLineHeight + insets(contentDOM, ["Top", "Bottom"]) > scrollDOM.clientHeight, hasVerticalScrollbar = scrollDOM.scrollHeight > scrollDOM.clientHeight, scrollbarReserve = willOverflowVertically && !hasVerticalScrollbar ? scrollbarWidth ?? getScrollbarWidth() : 0, width = scrollDOM.clientWidth - (gutters instanceof HTMLElement ? gutters.offsetWidth : 0) - gutterGrowth - insets(contentDOM, ["Left", "Right"]) - (line ? insets(line, ["Left", "Right"]) : 0) - scrollbarReserve, columns = Math.floor(width / defaultCharacterWidth);
+	return Number.isFinite(columns) && columns > 0 ? columns : void 0;
+}
+var contentBorderRightWidthVar = "var(--okz3su1)", contentPaddingTopVar = "var(--okz3su2)", editorRoot = "okz3su3", editorRootAutoHeight = "okz3su4", linePaddingLeftVar = "var(--okz3su0)";
 function EditorRoot(t0) {
-	let $ = c(13), { children } = t0, { sanity } = useTheme(), t1;
-	$[0] === sanity.space[3] ? t1 = $[1] : (t1 = rem(sanity.space[3]), $[0] = sanity.space[3], $[1] = t1);
-	let t2 = `${t1}`, t3;
-	$[2] === sanity.space[4] ? t3 = $[3] : (t3 = rem(sanity.space[4]), $[2] = sanity.space[4], $[3] = t3);
-	let t4 = `${t3}`, t5;
-	$[4] === sanity.space[5] ? t5 = $[5] : (t5 = rem(sanity.space[5]), $[4] = sanity.space[5], $[5] = t5);
-	let t6 = `${t5}`, t7;
-	$[6] !== t2 || $[7] !== t4 || $[8] !== t6 ? (t7 = assignInlineVars({
-		[linePaddingLeftVar]: t2,
-		[contentBorderRightWidthVar]: t4,
-		[contentPaddingTopVar]: t6
-	}), $[6] = t2, $[7] = t4, $[8] = t6, $[9] = t7) : t7 = $[9];
-	let t8;
-	return $[10] !== children || $[11] !== t7 ? (t8 = /* @__PURE__ */ jsx("div", {
-		className: editorRoot,
-		style: t7,
+	let $ = c(14), { autoHeight, underHeader, children } = t0, { sanity } = useTheme(), t1 = autoHeight ? `${editorRoot} ${editorRootAutoHeight}` : editorRoot, t2;
+	$[0] === sanity.space[3] ? t2 = $[1] : (t2 = rem(sanity.space[3]), $[0] = sanity.space[3], $[1] = t2);
+	let t3 = `${t2}`, t4;
+	$[2] === sanity.space[4] ? t4 = $[3] : (t4 = rem(sanity.space[4]), $[2] = sanity.space[4], $[3] = t4);
+	let t5 = `${t4}`, t6 = sanity.space[underHeader ? 3 : 5], t7;
+	$[4] === t6 ? t7 = $[5] : (t7 = rem(t6), $[4] = t6, $[5] = t7);
+	let t8 = `${t7}`, t9;
+	$[6] !== t3 || $[7] !== t5 || $[8] !== t8 ? (t9 = assignInlineVars({
+		[linePaddingLeftVar]: t3,
+		[contentBorderRightWidthVar]: t5,
+		[contentPaddingTopVar]: t8
+	}), $[6] = t3, $[7] = t5, $[8] = t8, $[9] = t9) : t9 = $[9];
+	let t10;
+	return $[10] !== children || $[11] !== t1 || $[12] !== t9 ? (t10 = /* @__PURE__ */ jsx("div", {
+		className: t1,
+		style: t9,
 		children
-	}), $[10] = children, $[11] = t7, $[12] = t8) : t8 = $[12], t8;
+	}), $[10] = children, $[11] = t1, $[12] = t9, $[13] = t10) : t10 = $[13], t10;
 }
 function VisionCodeMirror(t0) {
-	let $ = c(10), { ref, onChange, initialValue: initialValueProp, extensions } = t0, [value, setValue] = useState(initialValueProp), t1;
-	$[0] === onChange ? t1 = $[1] : (t1 = (nextValue, viewUpdate) => {
+	let $ = c(21), { ref, onChange, initialValue: initialValueProp, extensions, autoHeight: t1, underHeader: t2 } = t0, autoHeight = t1 !== void 0 && t1, underHeader = t2 === void 0 ? autoHeight : t2, [value, setValue] = useState(initialValueProp), [hasView, setHasView] = useState(!1), [seenInitialValue, setSeenInitialValue] = useState(initialValueProp);
+	initialValueProp !== seenInitialValue && (setSeenInitialValue(initialValueProp), hasView || setValue(initialValueProp));
+	let t3;
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => setHasView(!0), $[0] = t3) : t3 = $[0];
+	let handleCreateEditor = t3, t4, t5;
+	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t4 = () => () => setHasView(!1), t5 = [], $[1] = t4, $[2] = t5) : (t4 = $[1], t5 = $[2]), useEffect(t4, t5);
+	let t6;
+	$[3] === onChange ? t6 = $[4] : (t6 = (nextValue, viewUpdate) => {
 		setValue(nextValue), onChange?.(nextValue, viewUpdate);
-	}, $[0] = onChange, $[1] = t1);
-	let handleChange = t1, theme = useCodemirrorTheme(useTheme()), codeMirrorRef = useRef(null), t2;
-	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = (newContent) => {
+	}, $[3] = onChange, $[4] = t6);
+	let handleChange = t6, theme = useCodemirrorTheme(useTheme()), codeMirrorRef = useRef(null), t7;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t7 = (newContent) => {
+		setValue(newContent);
 		let editorView = codeMirrorRef.current?.view;
 		if (!editorView) return;
 		let currentDoc = editorView.state.doc.toString();
-		newContent !== currentDoc && editorView.dispatch({
+		newContent !== currentDoc && (editorView.dispatch({
 			changes: {
 				from: 0,
 				to: currentDoc.length,
 				insert: newContent
 			},
-			selection: EditorSelection.cursor(newContent.length)
+			selection: EditorSelection$1.cursor(newContent.length)
+		}), editorView.scrollDOM.scrollTop = 0, editorView.scrollDOM.scrollLeft = 0);
+	}, $[5] = t7) : t7 = $[5];
+	let resetEditorContent = t7, t8;
+	$[6] === Symbol.for("react.memo_cache_sentinel") ? (t8 = (changes) => {
+		codeMirrorRef.current?.view?.dispatch({
+			changes: [...changes],
+			userEvent: "input"
 		});
-	}, $[2] = t2) : t2 = $[2];
-	let resetEditorContent = t2, t3, t4;
-	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t3 = () => ({ resetEditorContent }), t4 = [resetEditorContent], $[3] = t3, $[4] = t4) : (t3 = $[3], t4 = $[4]), useImperativeHandle(ref, t3, t4);
-	let t5;
-	return $[5] !== extensions || $[6] !== handleChange || $[7] !== theme || $[8] !== value ? (t5 = /* @__PURE__ */ jsx(EditorRoot, { children: /* @__PURE__ */ jsx(CodeMirror, {
+	}, $[6] = t8) : t8 = $[6];
+	let applyChanges = t8, t9;
+	$[7] === Symbol.for("react.memo_cache_sentinel") ? (t9 = (command) => {
+		let editorView_0 = codeMirrorRef.current?.view;
+		return editorView_0 ? command(editorView_0) : !1;
+	}, $[7] = t9) : t9 = $[7];
+	let runCommand = t9, t10;
+	$[8] === Symbol.for("react.memo_cache_sentinel") ? (t10 = (from, to) => {
+		let editorView_1 = codeMirrorRef.current?.view;
+		if (!editorView_1) return;
+		let length = editorView_1.state.doc.length;
+		editorView_1.dispatch({
+			selection: EditorSelection$1.range(Math.min(from, length), Math.min(to, length)),
+			scrollIntoView: !0
+		}), editorView_1.focus();
+	}, $[8] = t10) : t10 = $[8];
+	let selectRange = t10, t11;
+	$[9] === Symbol.for("react.memo_cache_sentinel") ? (t11 = (lines) => {
+		let editorView_2 = codeMirrorRef.current?.view;
+		return editorView_2 ? getVisibleColumns(editorView_2, { lines }) : void 0;
+	}, $[9] = t11) : t11 = $[9];
+	let getVisibleColumnsOfEditor = t11, t12, t13;
+	$[10] === Symbol.for("react.memo_cache_sentinel") ? (t12 = () => ({
+		resetEditorContent,
+		applyChanges,
+		runCommand,
+		selectRange,
+		getVisibleColumns: getVisibleColumnsOfEditor
+	}), t13 = [
+		resetEditorContent,
+		applyChanges,
+		runCommand,
+		selectRange,
+		getVisibleColumnsOfEditor
+	], $[10] = t12, $[11] = t13) : (t12 = $[10], t13 = $[11]), useImperativeHandle(ref, t12, t13);
+	let t14;
+	$[12] !== extensions || $[13] !== handleChange || $[14] !== theme || $[15] !== value ? (t14 = /* @__PURE__ */ jsx(CodeMirror, {
 		ref: codeMirrorRef,
 		basicSetup: !1,
 		theme,
 		extensions,
 		value,
-		onChange: handleChange
-	}) }), $[5] = extensions, $[6] = handleChange, $[7] = theme, $[8] = value, $[9] = t5) : t5 = $[9], t5;
+		onChange: handleChange,
+		onCreateEditor: handleCreateEditor
+	}), $[12] = extensions, $[13] = handleChange, $[14] = theme, $[15] = value, $[16] = t14) : t14 = $[16];
+	let t15;
+	return $[17] !== autoHeight || $[18] !== t14 || $[19] !== underHeader ? (t15 = /* @__PURE__ */ jsx(EditorRoot, {
+		autoHeight,
+		underHeader,
+		children: t14
+	}), $[17] = autoHeight, $[18] = t14, $[19] = underHeader, $[20] = t15) : t15 = $[20], t15;
 }
 const SUPPORTED_PERSPECTIVES = [
 	"pinnedRelease",
@@ -328,15 +450,32 @@ function isVisionPasteTarget(root, event) {
 function isPlainObject(obj) {
 	return !!obj && typeof obj == "object" && Object.prototype.toString.call(obj) === "[object Object]";
 }
-const hasLocalStorage = supportsLocalStorage(), keyPrefix = "sanityVision:";
+/** Every `localStorage` key Vision writes (classic and redesign alike) starts with this prefix */
+const VISION_STORAGE_KEY_PREFIX = "sanityVision:", hasLocalStorage = supportsLocalStorage(), clearListeners = /* @__PURE__ */ new Set();
+/** The `localStorage` instance when it is available and writable, `undefined` otherwise */
+function getStorage() {
+	return hasLocalStorage ? globalThis.localStorage : void 0;
+}
+/** Runs `listener` after `clearLocalStorage`, so in-memory copies of stored values can drop too */
+function onLocalStorageCleared(listener) {
+	return clearListeners.add(listener), () => {
+		clearListeners.delete(listener);
+	};
+}
 function clearLocalStorage() {
-	if (hasLocalStorage) for (let i = 0; i < localStorage.length; i++) {
-		let key = localStorage.key(i);
-		key?.startsWith(keyPrefix) && localStorage.removeItem(key);
+	let storage = getStorage();
+	if (storage) {
+		let keys = [];
+		for (let i = 0; i < storage.length; i++) {
+			let key = storage.key(i);
+			key?.startsWith("sanityVision:") && keys.push(key);
+		}
+		keys.forEach((key) => storage.removeItem(key));
 	}
+	clearListeners.forEach((listener) => listener());
 }
 function getLocalStorage(namespace) {
-	let storageKey = `${keyPrefix}${namespace}`, loadedState = null;
+	let storageKey = `${VISION_STORAGE_KEY_PREFIX}${namespace}`, loadedState = null;
 	return {
 		get,
 		set,
@@ -380,20 +519,74 @@ function supportsLocalStorage() {
 }
 function parseApiQueryString(qs) {
 	let params = {}, options = {};
-	for (let [key, value] of qs.entries()) key[0] === "$" ? params[key.slice(1)] = JSON.parse(value) : key === "perspective" && (options[key] = value);
+	for (let [key, value] of qs.entries()) key[0] === "$" ? Object.defineProperty(params, key.slice(1), {
+		value: JSON.parse(value),
+		enumerable: !0,
+		configurable: !0,
+		writable: !0
+	}) : (key === "perspective" || key === "variant" || key === "resultSourceMap") && (options[key] = value);
 	return {
 		query: qs.get("query") || "",
 		params,
 		options
 	};
 }
-function prefixApiVersion(version) {
-	return version[0] !== "v" && version !== "other" ? `v${version}` : version;
-}
 function validateApiVersion(apiVersion) {
 	let parseableApiVersion = apiVersion.replace(/^v/, "").trim().toUpperCase();
 	return parseableApiVersion.length > 0 && (parseableApiVersion === "X" || parseableApiVersion === "1" || /^\d{4}-\d{2}-\d{2}$/.test(parseableApiVersion) && !isNaN(Date.parse(parseableApiVersion)));
 }
+/**
+* Matches Content Lake query and listen URLs on any domain (custom CDN domains included),
+* capturing the API version, the dataset and the query string. Not anchored: the classic tool's
+* paste handler has always picked the URL out of the pasted text with it. `parseQueryUrl` is
+* stricter and takes the whole text to be the URL.
+*/
+const SANITY_QUERY_URL = /\/(vX|v1|v\d{4}-\d\d-\d\d)\/.*?(?:query|listen)\/(.*?)\?(.*)/, QUERY_URL_PATHNAME = /^\/(vX|v1|v\d{4}-\d\d-\d\d)\/(?:[^/]+\/)*(?:query|listen)\/([^/]+)\/?$/, API_CDN_HOST = /(?:^|\.)apicdn\.sanity\.(?:io|work)$/;
+/** `<project>.apicdn.sanity.io`, where `useCdn` sends queries */
+function isApiCdnHost(hostname) {
+	return API_CDN_HOST.test(hostname);
+}
+/**
+* Parses a Content Lake query (or listen) URL, as pasted from the browser's network tab, into the
+* pieces of a tab. Returns `null` when the text is not such a URL: the whole text has to be one
+* http(s) URL, since a query URL quoted inside other text is not a paste of that URL, and the
+* redesign claims a paste it parses and replaces the tab's query with it.
+*/
+function parseQueryUrl(data, datasets) {
+	let trimmed = data.trim(), url = parseHttpUrl(trimmed), match = url?.pathname.match(QUERY_URL_PATHNAME);
+	if (!url || !match) return null;
+	let [, usedApiVersion, usedDataset] = match, parts;
+	try {
+		parts = parseApiQueryString(url.searchParams);
+	} catch {
+		return null;
+	}
+	if (!parts.query) return null;
+	let urlPerspective = parts.options.perspective, perspective = urlPerspective && isSupportedPerspective(urlPerspective) && !isVirtualPerspective(urlPerspective) ? urlPerspective : void 0, { resultSourceMap } = parts.options, includeSourceMap = resultSourceMap === "true" || resultSourceMap === "withKeyArraySelector";
+	return {
+		query: parts.query,
+		params: parts.params,
+		rawParams: JSON.stringify(parts.params, null, 2),
+		dataset: usedDataset,
+		isKnownDataset: datasets.includes(usedDataset),
+		apiVersion: validateApiVersion(usedApiVersion) ? usedApiVersion : void 0,
+		urlPerspective: urlPerspective || void 0,
+		perspective,
+		hasUnsupportedPerspective: !!urlPerspective && perspective === void 0,
+		variant: parts.options.variant || void 0,
+		includeSourceMap,
+		useCdn: isApiCdnHost(url.hostname),
+		url: trimmed
+	};
+}
+function parseHttpUrl(text) {
+	try {
+		let url = new URL(text);
+		return url.protocol === "http:" || url.protocol === "https:" ? url : null;
+	} catch {
+		return null;
+	}
+}
 function tryParseParams(val, t) {
 	try {
 		let parsed = val ? JSON5.parse(val) : {};
@@ -402,7 +595,7 @@ function tryParseParams(val, t) {
 		return err.message = `${t("params.error.params-invalid-json")}:\n\n${err.message.replace("JSON5:", "")}`, err;
 	}
 }
-var controlsContainer = "phmcesm", downloadsCard = "phmcesj", header = "phmces3", inputBackgroundContainer = "phmces7", inputBackgroundContainerLeft = "phmces8", inputContainer = "phmces9", queryCopyLink = "phmces6", queryRecallPaneContainer = "phmces1", queryRecallPaneWrapper = "phmces2", result = "phmcese", resultContainer = "phmcesc", resultContainerInvalid = "phmcesd", resultFooter = "phmcesf", resultInnerContainer = "phmcesb", resultOuterContainer = "phmcesa", root = "phmces0", saveResultLabel = "phmcesl", saveResultSpanGapVar = "var(--phmcesk)", splitpaneContainer = "phmces5", styledLabel = "phmces4", timingsCard = "phmcesg", timingsTextContainer = "phmcesi", timingsTextMinHeightVar = "var(--phmcesh)";
+var controlsContainer = "ch9tvfm", downloadsCard = "ch9tvfj", header = "ch9tvf3", inputBackgroundContainer = "ch9tvf7", inputBackgroundContainerLeft = "ch9tvf8", inputContainer = "ch9tvf9", queryCopyLink = "ch9tvf6", queryRecallPaneContainer = "ch9tvf1", queryRecallPaneWrapper = "ch9tvf2", result = "ch9tvfe", resultContainer = "ch9tvfc", resultContainerInvalid = "ch9tvfd", resultFooter = "ch9tvff", resultInnerContainer = "ch9tvfb", resultOuterContainer = "ch9tvfa", root = "ch9tvf0", saveResultLabel = "ch9tvfl", saveResultSpanGapVar = "var(--ch9tvfk)", splitpaneContainer = "ch9tvf5", styledLabel = "ch9tvf4", timingsCard = "ch9tvfg", timingsTextContainer = "ch9tvfi", timingsTextMinHeightVar = "var(--ch9tvfh)";
 function Root(t0) {
 	let $ = c(6), props, ref;
 	$[0] === t0 ? (props = $[1], ref = $[2]) : ({ref, ...props} = t0, $[0] = t0, $[1] = props, $[2] = ref);
@@ -627,17 +820,44 @@ const SHARED_QUERY_DOCUMENT_TYPE = "vision.sharedQuery", SHARED_QUERY_LISTEN_OPT
 	includeResult: !0,
 	visibility: "query"
 }, defaultValue = { queries: [] }, keyValueStoreKey = "studio.vision-tool.saved-queries";
+/** The keys whose entry differs between two lists */
+function changedKeys(before, after) {
+	let was = new Map(before.map((query) => [query._key, query])), is = new Map(after.map((query) => [query._key, query]));
+	return [.../* @__PURE__ */ new Set([...was.keys(), ...is.keys()])].filter((key) => !dequal(was.get(key), is.get(key)));
+}
+/**
+* Whether `queries` shows every entry the hook's writes touched as the hook last wrote it, or
+* as the store kept it when a write failed. The store's initial read predates the writes and
+* never does, and neither does an echo of a write that failed; an own echo of a write that went
+* through, or another instance's write built on it, does.
+*/
+function reflectsOwnWrites(queries, { latest, keys }) {
+	let shown = new Map(queries.map((query) => [query._key, query])), wanted = new Map(latest.map((query) => [query._key, query]));
+	for (let key of keys) if (!dequal(shown.get(key), wanted.get(key))) return !1;
+	return !0;
+}
+/** The error for a failed move whose rollback failed too: the query is now in both lists */
+function moveLeftBothCopies(error, keptCopy) {
+	let message = error instanceof Error ? error.message : String(error);
+	return Error(`${message} Removing the ${keptCopy} copy made for the move failed as well, so the query is now in both lists; delete the one you do not want.`, { cause: error });
+}
 function useSavedQueries() {
-	let $ = c(45), keyValueStore = useKeyValueStore(), t0;
+	let $ = c(73), keyValueStore = useKeyValueStore(), t0;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { apiVersion: DEFAULT_API_VERSION }, $[0] = t0) : t0 = $[0];
 	let workspaceClient = useClient(t0), currentUser = useCurrentUser(), [value, setValue] = useState(defaultValue), t1;
 	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[1] = t1) : t1 = $[1];
-	let [sharedQueries, setSharedQueries] = useState(t1), [saving, setSaving] = useState(!1), t2;
+	let [sharedQueries, setSharedQueries] = useState(t1), [pendingSaves, setPendingSaves] = useState(0), t2;
 	$[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = [], $[2] = t2) : t2 = $[2];
-	let [deleting, setDeleting] = useState(t2), [saveQueryError, setSaveQueryError] = useState(), [deleteQueryError, setDeleteQueryError] = useState(), [error, setError] = useState(), t3;
-	$[3] === keyValueStore ? t3 = $[4] : (t3 = keyValueStore.getKey(keyValueStoreKey), $[3] = keyValueStore, $[4] = t3);
-	let personalQueries = t3, t4;
-	$[5] === currentUser?.id ? t4 = $[6] : (t4 = (docs) => {
+	let [deleting, setDeleting] = useState(t2), t3;
+	$[3] === Symbol.for("react.memo_cache_sentinel") ? (t3 = [], $[3] = t3) : t3 = $[3];
+	let [moving, setMoving] = useState(t3), [saveQueryError, setSaveQueryError] = useState(), [deleteQueryError, setDeleteQueryError] = useState(), [error, setError] = useState(), latestQueriesRef = useRef(defaultValue.queries), t4;
+	$[4] === Symbol.for("react.memo_cache_sentinel") ? (t4 = Promise.resolve(), $[4] = t4) : t4 = $[4];
+	let personalWritesRef = useRef(t4), pendingPersonalWritesRef = useRef(0), ownWritesRef = useRef(null), storeEventsLiveRef = useRef(!1), loadedPersonalQueriesRef = useRef(!1), t5;
+	$[5] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ new Map(), $[5] = t5) : t5 = $[5];
+	let movesRef = useRef(t5), t6;
+	$[6] === keyValueStore ? t6 = $[7] : (t6 = keyValueStore.getKey(keyValueStoreKey), $[6] = keyValueStore, $[7] = t6);
+	let personalQueries = t6, t7;
+	$[8] === currentUser?.id ? t7 = $[9] : (t7 = (docs) => {
 		let currentUserId = currentUser?.id;
 		return docs.map((doc) => ({
 			_key: doc._id,
@@ -648,17 +868,30 @@ function useSavedQueries() {
 			title: doc.title,
 			url: doc.url
 		}));
-	}, $[5] = currentUser?.id, $[6] = t4);
-	let mapSharedQueries = t4, t5, t6;
-	$[7] === personalQueries ? (t5 = $[8], t6 = $[9]) : (t5 = () => {
-		let sub = personalQueries.pipe(startWith(defaultValue), map(_temp$5)).subscribe({
-			next: setValue,
+	}, $[8] = currentUser?.id, $[9] = t7);
+	let mapSharedQueries = t7, t8, t9;
+	$[10] === personalQueries ? (t8 = $[11], t9 = $[12]) : (t8 = () => {
+		storeEventsLiveRef.current = !1;
+		let subscribing = !0, sub = personalQueries.subscribe({
+			next: (data) => {
+				let stored = data || null, ownWrites = ownWritesRef.current;
+				if (ownWrites && !storeEventsLiveRef.current) {
+					if (!reflectsOwnWrites(stored?.queries ?? defaultValue.queries, ownWrites)) return;
+					subscribing || (storeEventsLiveRef.current = !0);
+				}
+				if (!(pendingPersonalWritesRef.current > 0)) {
+					if (storeEventsLiveRef.current && (ownWritesRef.current = null), !stored) {
+						if (loadedPersonalQueriesRef.current) return;
+						latestQueriesRef.current = defaultValue.queries, setValue(defaultValue);
+					} else loadedPersonalQueriesRef.current = !0, latestQueriesRef.current = stored.queries, setValue(stored);
+				}
+			},
 			error: (err) => setError(err)
 		});
-		return () => sub?.unsubscribe();
-	}, t6 = [personalQueries], $[7] = personalQueries, $[8] = t5, $[9] = t6), useEffect(t5, t6);
-	let t7, t8;
-	$[10] !== mapSharedQueries || $[11] !== workspaceClient ? (t7 = () => {
+		return subscribing = !1, () => sub.unsubscribe();
+	}, t9 = [personalQueries], $[10] = personalQueries, $[11] = t8, $[12] = t9), useEffect(t8, t9);
+	let t10, t11;
+	$[13] !== mapSharedQueries || $[14] !== workspaceClient ? (t10 = () => {
 		let cancelled = !1, fetchSharedQueries = async () => {
 			let nextDocs = await workspaceClient.fetch("*[_type == $sharedQueryType]{\n  _id,\n  authorId,\n  savedAt,\n  title,\n  url\n} | order(savedAt desc)", { sharedQueryType: SHARED_QUERY_DOCUMENT_TYPE }) || [];
 			cancelled || setSharedQueries(mapSharedQueries(nextDocs));
@@ -679,120 +912,204 @@ function useSavedQueries() {
 		return () => {
 			cancelled = !0, sub_0.unsubscribe();
 		};
-	}, t8 = [workspaceClient, mapSharedQueries], $[10] = mapSharedQueries, $[11] = workspaceClient, $[12] = t7, $[13] = t8) : (t7 = $[12], t8 = $[13]), useEffect(t7, t8);
-	let t9;
-	$[14] !== sharedQueries || $[15] !== value.queries ? (t9 = [...sharedQueries, ...value.queries].sort(_temp2$4), $[14] = sharedQueries, $[15] = value.queries, $[16] = t9) : t9 = $[16];
-	let queries = t9, t10;
-	$[17] !== currentUser || $[18] !== keyValueStore || $[19] !== mapSharedQueries || $[20] !== value.queries || $[21] !== workspaceClient ? (t10 = async (query) => {
-		if (setSaving(!0), setSaveQueryError(void 0), query.shared) {
-			if (!currentUser?.id) {
-				let authError = /* @__PURE__ */ Error("No current user found. Unable to save shared query.");
-				throw setSaveQueryError(authError), setSaving(!1), authError;
-			}
-			try {
-				let createdDoc = await workspaceClient.create({
-					_type: SHARED_QUERY_DOCUMENT_TYPE,
-					authorId: currentUser.id,
-					savedAt: query.savedAt,
-					title: query.title,
-					url: query.url
-				});
-				setSharedQueries((prev) => [...mapSharedQueries([createdDoc]), ...prev]), setSaving(!1);
-				return;
-			} catch (t11) {
-				let err_3 = t11, saveError = err_3 instanceof Error ? err_3 : Error(String(err_3));
-				throw setSaveQueryError(saveError), setSaving(!1), saveError;
-			}
-		}
+	}, t11 = [workspaceClient, mapSharedQueries], $[13] = mapSharedQueries, $[14] = workspaceClient, $[15] = t10, $[16] = t11) : (t10 = $[15], t11 = $[16]), useEffect(t10, t11);
+	let t12;
+	$[17] === Symbol.for("react.memo_cache_sentinel") ? (t12 = (task) => {
+		pendingPersonalWritesRef.current += 1;
+		let run = () => task().finally(() => {
+			--pendingPersonalWritesRef.current;
+		}), result = personalWritesRef.current.then(run, run);
+		return personalWritesRef.current = result.catch(_temp$6), result;
+	}, $[17] = t12) : t12 = $[17];
+	let enqueuePersonalWrite = t12, t13;
+	$[18] === Symbol.for("react.memo_cache_sentinel") ? (t13 = (before, attempted, kept) => {
+		let keys = new Set(ownWritesRef.current?.keys);
+		for (let key of changedKeys(before, attempted)) keys.add(key);
+		ownWritesRef.current = {
+			latest: kept,
+			keys
+		};
+	}, $[18] = t13) : t13 = $[18];
+	let recordOwnWrite = t13, t14;
+	$[19] === keyValueStore ? t14 = $[20] : (t14 = async (queries) => {
+		if (await keyValueStore.setKey(keyValueStoreKey, { queries }) === null) throw Error("The saved queries could not be stored.");
+	}, $[19] = keyValueStore, $[20] = t14);
+	let storePersonalQueries = t14, t15;
+	$[21] === storePersonalQueries ? t15 = $[22] : (t15 = (update) => enqueuePersonalWrite(async () => {
+		let before_0 = latestQueriesRef.current, next = update(before_0);
+		recordOwnWrite(before_0, next, next), latestQueriesRef.current = next, setValue({ queries: next });
 		try {
-			let newQueries = [{
-				...query,
-				_key: uuid()
-			}, ...value.queries];
-			setValue({ queries: newQueries }), await keyValueStore.setKey(keyValueStoreKey, { queries: newQueries });
-		} catch (t12) {
-			let err_4 = t12, saveError_0 = err_4 instanceof Error ? err_4 : Error(String(err_4));
-			throw setSaveQueryError(saveError_0), setSaving(!1), saveError_0;
+			await storePersonalQueries(next);
+		} catch (t16) {
+			let err_3 = t16;
+			throw recordOwnWrite(before_0, next, before_0), latestQueriesRef.current = before_0, setValue({ queries: before_0 }), err_3;
 		}
-		setSaving(!1);
-	}, $[17] = currentUser, $[18] = keyValueStore, $[19] = mapSharedQueries, $[20] = value.queries, $[21] = workspaceClient, $[22] = t10) : t10 = $[22];
-	let saveQuery = t10, t11;
-	$[23] !== currentUser || $[24] !== keyValueStore || $[25] !== mapSharedQueries || $[26] !== value.queries || $[27] !== workspaceClient ? (t11 = async (query_0) => {
-		if (setSaving(!0), setSaveQueryError(void 0), query_0.shared) {
-			if (!currentUser?.id || query_0.authorId !== currentUser.id) {
-				let authError_0 = /* @__PURE__ */ Error("Only the author can update a shared query.");
-				throw setSaveQueryError(authError_0), setSaving(!1), authError_0;
-			}
-			try {
-				let updatedDoc = await workspaceClient.patch(query_0._key).set({
-					savedAt: query_0.savedAt,
-					title: query_0.title,
-					url: query_0.url
-				}).commit(), [updatedSharedQuery] = mapSharedQueries([updatedDoc]);
-				setSharedQueries((prev_0) => prev_0.map((existingQuery) => existingQuery._key === query_0._key ? updatedSharedQuery : existingQuery)), setSaving(!1);
-				return;
-			} catch (t12) {
-				let err_5 = t12, updateError = err_5 instanceof Error ? err_5 : Error(String(err_5));
-				throw setSaveQueryError(updateError), setSaving(!1), updateError;
-			}
+		return next;
+	}), $[21] = storePersonalQueries, $[22] = t15);
+	let writePersonalQueries = t15, t16;
+	$[23] !== sharedQueries || $[24] !== value.queries ? (t16 = [...sharedQueries, ...value.queries].sort(_temp2$4), $[23] = sharedQueries, $[24] = value.queries, $[25] = t16) : t16 = $[25];
+	let queries_0 = t16, t17;
+	$[26] === Symbol.for("react.memo_cache_sentinel") ? (t17 = (task_0) => (setPendingSaves(_temp3$3), setSaveQueryError(void 0), task_0().catch((err_4) => {
+		let saveError = err_4 instanceof Error ? err_4 : Error(String(err_4));
+		throw setSaveQueryError(saveError), saveError;
+	}).finally(() => setPendingSaves(_temp4))), $[26] = t17) : t17 = $[26];
+	let runSave = t17, t18;
+	$[27] !== currentUser || $[28] !== mapSharedQueries || $[29] !== workspaceClient || $[30] !== writePersonalQueries ? (t18 = (query) => runSave(async () => {
+		if (query.shared) {
+			if (!currentUser?.id) throw Error("No current user found. Unable to save shared query.");
+			let createdDoc = await workspaceClient.create({
+				_type: SHARED_QUERY_DOCUMENT_TYPE,
+				authorId: currentUser.id,
+				savedAt: query.savedAt,
+				title: query.title,
+				url: query.url
+			});
+			return setSharedQueries((prev) => [...mapSharedQueries([createdDoc]), ...prev]), createdDoc._id;
 		}
+		let newQuery = {
+			...query,
+			_key: uuid()
+		};
+		return await writePersonalQueries((queries_1) => [newQuery, ...queries_1]), newQuery._key;
+	}), $[27] = currentUser, $[28] = mapSharedQueries, $[29] = workspaceClient, $[30] = writePersonalQueries, $[31] = t18) : t18 = $[31];
+	let saveQuery = t18, t19;
+	$[32] !== currentUser || $[33] !== mapSharedQueries || $[34] !== workspaceClient || $[35] !== writePersonalQueries ? (t19 = (query_0) => runSave(async () => {
+		if (query_0.shared) {
+			if (!currentUser?.id || query_0.authorId !== currentUser.id) throw Error("Only the author can update a shared query.");
+			let updatedDoc = await workspaceClient.patch(query_0._key).set({
+				savedAt: query_0.savedAt,
+				title: query_0.title,
+				url: query_0.url
+			}).commit(), [updatedSharedQuery] = mapSharedQueries([updatedDoc]);
+			setSharedQueries((prev_0) => prev_0.map((existingQuery) => existingQuery._key === query_0._key ? updatedSharedQuery : existingQuery));
+		} else await writePersonalQueries((queries_2) => queries_2.map((q) => q._key === query_0._key ? {
+			...q,
+			...query_0
+		} : q));
+	}), $[32] = currentUser, $[33] = mapSharedQueries, $[34] = workspaceClient, $[35] = writePersonalQueries, $[36] = t19) : t19 = $[36];
+	let updateQuery = t19, t20;
+	$[37] !== currentUser || $[38] !== sharedQueries || $[39] !== workspaceClient ? (t20 = async (key_0) => {
+		let sharedQuery = sharedQueries.find((query_1) => query_1._key === key_0 && query_1.shared);
+		if (!sharedQuery) throw Error(`No shared query with key "${key_0}"`);
+		if (!currentUser?.id || sharedQuery.authorId !== currentUser.id) throw Error("Only the author can delete a shared query.");
+		await workspaceClient.delete(key_0), setSharedQueries((prev_1) => prev_1.filter((query_2) => query_2._key !== key_0));
+	}, $[37] = currentUser, $[38] = sharedQueries, $[39] = workspaceClient, $[40] = t20) : t20 = $[40];
+	let deleteSharedQuery = t20, t21;
+	$[41] === writePersonalQueries ? t21 = $[42] : (t21 = async (key_1) => {
+		await writePersonalQueries((queries_3) => queries_3.filter((q_0) => q_0._key !== key_1));
+	}, $[41] = writePersonalQueries, $[42] = t21);
+	let deletePersonalQuery = t21, t22;
+	$[43] !== deletePersonalQuery || $[44] !== deleteSharedQuery || $[45] !== sharedQueries ? (t22 = async (key_2) => {
+		setDeleting((prev_2) => [...prev_2, key_2]), setDeleteQueryError(void 0);
 		try {
-			let updatedQueries = value.queries.map((q) => q._key === query_0._key ? {
-				...q,
-				...query_0
-			} : q);
-			setValue({ queries: updatedQueries }), await keyValueStore.setKey(keyValueStoreKey, { queries: updatedQueries });
-		} catch (t13) {
-			let err_6 = t13, updateError_0 = err_6 instanceof Error ? err_6 : Error(String(err_6));
-			throw setSaveQueryError(updateError_0), setSaving(!1), updateError_0;
+			sharedQueries.some((query_3) => query_3._key === key_2 && query_3.shared) ? await deleteSharedQuery(key_2) : await deletePersonalQuery(key_2);
+		} catch (t23) {
+			let err_5 = t23;
+			setDeleteQueryError(err_5 instanceof Error ? err_5 : Error(String(err_5)));
 		}
-		setSaving(!1);
-	}, $[23] = currentUser, $[24] = keyValueStore, $[25] = mapSharedQueries, $[26] = value.queries, $[27] = workspaceClient, $[28] = t11) : t11 = $[28];
-	let updateQuery = t11, t12;
-	$[29] !== currentUser || $[30] !== keyValueStore || $[31] !== sharedQueries || $[32] !== value.queries || $[33] !== workspaceClient ? (t12 = async (key) => {
-		setDeleting((prev_1) => [...prev_1, key]), setDeleteQueryError(void 0);
-		let clearDeleting = () => setDeleting((prev_2) => prev_2.filter((k) => k !== key)), sharedQuery = sharedQueries.find((query_1) => query_1._key === key && query_1.shared);
-		if (sharedQuery) {
-			if (!currentUser?.id || sharedQuery.authorId !== currentUser.id) {
-				setDeleteQueryError(/* @__PURE__ */ Error("Only the author can delete a shared query.")), clearDeleting();
-				return;
-			}
+		setDeleting((prev_3) => prev_3.filter((k) => k !== key_2));
+	}, $[43] = deletePersonalQuery, $[44] = deleteSharedQuery, $[45] = sharedQueries, $[46] = t22) : t22 = $[46];
+	let deleteQuery = t22, t23;
+	$[47] === Symbol.for("react.memo_cache_sentinel") ? (t23 = (key_3, move) => {
+		let pending = movesRef.current.get(key_3);
+		if (pending) return pending;
+		let keys_0 = /* @__PURE__ */ new Set([key_3]), alsoMoving = (copyKey) => {
+			let thisMove = movesRef.current.get(key_3);
+			thisMove && movesRef.current.set(copyKey, thisMove), keys_0.add(copyKey), setMoving((prev_4) => [...prev_4, copyKey]);
+		};
+		setMoving((prev_5) => [...prev_5, key_3]);
+		let result_0 = move(alsoMoving).finally(() => {
+			for (let moved of keys_0) movesRef.current.delete(moved);
+			setMoving((prev_6) => prev_6.filter((moved_0) => !keys_0.has(moved_0)));
+		});
+		return movesRef.current.set(key_3, result_0), result_0;
+	}, $[47] = t23) : t23 = $[47];
+	let runMove = t23, t24;
+	$[48] !== deletePersonalQuery || $[49] !== saveQuery || $[50] !== workspaceClient ? (t24 = (key_4) => runMove(key_4, async (alsoMoving_0) => {
+		let query_4 = latestQueriesRef.current.find((q_1) => q_1._key === key_4);
+		if (!query_4) throw Error(`No personal saved query with key "${key_4}"`);
+		let sharedKey = await saveQuery({
+			shared: !0,
+			title: query_4.title,
+			url: query_4.url,
+			savedAt: (/* @__PURE__ */ new Date()).toISOString()
+		});
+		alsoMoving_0(sharedKey);
+		try {
+			await deletePersonalQuery(key_4);
+		} catch (t25) {
+			let err_6 = t25;
 			try {
-				await workspaceClient.delete(key), setSharedQueries((prev_3) => prev_3.filter((query_2) => query_2._key !== key));
-			} catch (t13) {
-				setDeleteQueryError(t13);
+				await workspaceClient.delete(sharedKey), setSharedQueries((prev_7) => prev_7.filter((q_2) => q_2._key !== sharedKey));
+			} catch {
+				throw moveLeftBothCopies(err_6, "shared");
 			}
-			clearDeleting();
-		} else {
+			throw err_6;
+		}
+	}), $[48] = deletePersonalQuery, $[49] = saveQuery, $[50] = workspaceClient, $[51] = t24) : t24 = $[51];
+	let shareQuery = t24, t25;
+	$[52] !== deletePersonalQuery || $[53] !== deleteSharedQuery || $[54] !== saveQuery || $[55] !== sharedQueries ? (t25 = (key_5) => runMove(key_5, async (alsoMoving_1) => {
+		let query_5 = sharedQueries.find((q_3) => q_3._key === key_5);
+		if (!query_5) throw Error(`No shared query with key "${key_5}"`);
+		let personalKey = await saveQuery({
+			shared: !1,
+			title: query_5.title,
+			url: query_5.url,
+			savedAt: (/* @__PURE__ */ new Date()).toISOString()
+		});
+		alsoMoving_1(personalKey);
+		try {
+			await deleteSharedQuery(key_5);
+		} catch (t26) {
+			let err_7 = t26;
 			try {
-				let filteredQueries = value.queries.filter((q_0) => q_0._key !== key);
-				setValue({ queries: filteredQueries }), await keyValueStore.setKey(keyValueStoreKey, { queries: filteredQueries });
-			} catch (t14) {
-				setDeleteQueryError(t14);
+				await deletePersonalQuery(personalKey);
+			} catch {
+				throw moveLeftBothCopies(err_7, "personal");
 			}
-			clearDeleting();
+			throw err_7;
+		}
+	}), $[52] = deletePersonalQuery, $[53] = deleteSharedQuery, $[54] = saveQuery, $[55] = sharedQueries, $[56] = t25) : t25 = $[56];
+	let unshareQuery = t25, t26;
+	$[57] === storePersonalQueries ? t26 = $[58] : (t26 = () => enqueuePersonalWrite(async () => {
+		let before_1 = latestQueriesRef.current;
+		recordOwnWrite(before_1, defaultValue.queries, defaultValue.queries);
+		try {
+			await storePersonalQueries(defaultValue.queries);
+		} catch (t27) {
+			let err_8 = t27;
+			throw recordOwnWrite(before_1, defaultValue.queries, before_1), err_8;
 		}
-	}, $[29] = currentUser, $[30] = keyValueStore, $[31] = sharedQueries, $[32] = value.queries, $[33] = workspaceClient, $[34] = t12) : t12 = $[34];
-	let deleteQuery = t12, t13;
-	return $[35] !== deleteQuery || $[36] !== deleteQueryError || $[37] !== deleting || $[38] !== error || $[39] !== queries || $[40] !== saveQuery || $[41] !== saveQueryError || $[42] !== saving || $[43] !== updateQuery ? (t13 = {
-		queries,
+		latestQueriesRef.current = defaultValue.queries, setValue(defaultValue);
+	}), $[57] = storePersonalQueries, $[58] = t26);
+	let clearQueries = t26, t27 = pendingSaves > 0, t28;
+	return $[59] !== clearQueries || $[60] !== deleteQuery || $[61] !== deleteQueryError || $[62] !== deleting || $[63] !== error || $[64] !== moving || $[65] !== queries_0 || $[66] !== saveQuery || $[67] !== saveQueryError || $[68] !== shareQuery || $[69] !== t27 || $[70] !== unshareQuery || $[71] !== updateQuery ? (t28 = {
+		queries: queries_0,
 		saveQuery,
 		updateQuery,
 		deleteQuery,
-		saving,
+		shareQuery,
+		unshareQuery,
+		clearQueries,
+		saving: t27,
 		deleting,
+		moving,
 		saveQueryError,
 		deleteQueryError,
 		error
-	}, $[35] = deleteQuery, $[36] = deleteQueryError, $[37] = deleting, $[38] = error, $[39] = queries, $[40] = saveQuery, $[41] = saveQueryError, $[42] = saving, $[43] = updateQuery, $[44] = t13) : t13 = $[44], t13;
+	}, $[59] = clearQueries, $[60] = deleteQuery, $[61] = deleteQueryError, $[62] = deleting, $[63] = error, $[64] = moving, $[65] = queries_0, $[66] = saveQuery, $[67] = saveQueryError, $[68] = shareQuery, $[69] = t27, $[70] = unshareQuery, $[71] = updateQuery, $[72] = t28) : t28 = $[72], t28;
+}
+function _temp4(count_0) {
+	return count_0 - 1;
+}
+function _temp3$3(count) {
+	return count + 1;
 }
 function _temp2$4(a, b) {
 	return new Date(b.savedAt || 0).getTime() - new Date(a.savedAt || 0).getTime();
 }
-function _temp$5(data) {
-	return data || defaultValue;
-}
-var fixedHeader = "_116oler0", queryList = "_116oler2", scrollContainer = "_116oler1";
+function _temp$6() {}
+var fixedHeader = "_17ffm660", queryList = "_17ffm662", scrollContainer = "_17ffm661";
 function FixedHeader(props) {
 	let $ = c(2), t0;
 	return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(VStack, {
@@ -822,7 +1139,7 @@ function QueryList(props) {
 	}), $[0] = props, $[1] = t0), t0;
 }
 function QueryRecall(t0) {
-	let $ = c(136), { url, getStateFromUrl, setStateFromParsedUrl, currentQuery, currentParams, generateUrl, compactMode: t1 } = t0, compactMode = t1 !== void 0 && t1, toast = useToast(), { saveQuery, updateQuery, queries, deleteQuery, saving } = useSavedQueries(), { t } = useTranslation(visionLocaleNamespace), t2;
+	let $ = c(134), { url, getStateFromUrl, setStateFromParsedUrl, currentQuery, currentParams, generateUrl, compactMode: t1 } = t0, compactMode = t1 !== void 0 && t1, toast = useToast(), { saveQuery, updateQuery, queries, deleteQuery, shareQuery, unshareQuery, saving } = useSavedQueries(), { t } = useTranslation(visionLocaleNamespace), t2;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t2 = {
 		month: "short",
 		day: "numeric",
@@ -880,68 +1197,61 @@ function QueryRecall(t0) {
 		setShareDialogQuery(query);
 	}, $[13] = t6) : t6 = $[13];
 	let handleShareQuery = t6, t7;
-	$[14] !== deleteQuery || $[15] !== saveQuery || $[16] !== shareDialogQuery || $[17] !== t || $[18] !== toast ? (t7 = async () => {
-		if (!shareDialogQuery) return;
-		let sharedQueryKey = shareDialogQuery._key, sharedQueryUrl = shareDialogQuery.url, sharedQueryTitle = shareDialogQuery.title || t("label.untitled-query");
-		try {
-			await saveQuery({
-				shared: !0,
-				title: sharedQueryTitle,
-				url: sharedQueryUrl,
-				savedAt: (/* @__PURE__ */ new Date()).toISOString()
-			}), await deleteQuery(sharedQueryKey), toast.push({
-				closable: !0,
-				status: "success",
-				title: t("save-query.shared-success")
-			});
-		} catch (t8) {
-			let err_0 = t8;
-			toast.push({
-				closable: !0,
-				status: "error",
-				title: t("save-query.error"),
-				description: err_0 instanceof Error ? err_0.message : String(err_0)
-			});
+	$[14] !== shareDialogQuery || $[15] !== shareQuery || $[16] !== t || $[17] !== toast ? (t7 = async () => {
+		if (shareDialogQuery) {
+			try {
+				await shareQuery(shareDialogQuery._key), toast.push({
+					closable: !0,
+					status: "success",
+					title: t("save-query.shared-success")
+				});
+			} catch (t8) {
+				let err_0 = t8;
+				toast.push({
+					closable: !0,
+					status: "error",
+					title: t("save-query.error"),
+					description: err_0 instanceof Error ? err_0.message : String(err_0)
+				});
+			}
+			setShareDialogQuery(null);
 		}
-		setShareDialogQuery(null);
-	}, $[14] = deleteQuery, $[15] = saveQuery, $[16] = shareDialogQuery, $[17] = t, $[18] = toast, $[19] = t7) : t7 = $[19];
+	}, $[14] = shareDialogQuery, $[15] = shareQuery, $[16] = t, $[17] = toast, $[18] = t7) : t7 = $[18];
 	let handleConfirmShareQuery = t7, t8;
-	$[20] !== deleteQuery || $[21] !== formatDate || $[22] !== getStateFromUrl || $[23] !== queries || $[24] !== saveQuery || $[25] !== t || $[26] !== toast ? (t8 = async (query_0) => {
+	$[19] !== formatDate || $[20] !== getStateFromUrl || $[21] !== queries || $[22] !== t || $[23] !== toast || $[24] !== unshareQuery ? (t8 = async (query_0) => {
 		setPendingUnshareKeys((prev) => [...prev, query_0._key]);
 		let clearPending = () => setPendingUnshareKeys((prev_0) => prev_0.filter((key) => key !== query_0._key)), nextQueryObj = getStateFromUrl(query_0.url), duplicatePersonalQuery = queries?.find((existingQuery) => {
 			if (existingQuery._key === query_0._key || existingQuery.shared) return !1;
 			let existingQueryObj = getStateFromUrl(existingQuery.url);
 			return nextQueryObj && existingQueryObj && existingQueryObj.query === nextQueryObj.query && dequal(existingQueryObj.params, nextQueryObj.params);
-		}), unsharedQueryTitle = query_0.title || t("label.untitled-query");
+		});
 		if (duplicatePersonalQuery) toast.push({
 			closable: !0,
 			status: "warning",
 			title: t("save-query.already-saved"),
 			description: `${duplicatePersonalQuery.title} - ${formatDate.format(new Date(duplicatePersonalQuery.savedAt || ""))}`
 		}), clearPending();
-		else try {
-			await saveQuery({
-				shared: !1,
-				title: unsharedQueryTitle,
-				url: query_0.url,
-				savedAt: (/* @__PURE__ */ new Date()).toISOString()
-			}), await deleteQuery(query_0._key), toast.push({
-				closable: !0,
-				status: "success",
-				title: t("save-query.unshared-success")
-			}), clearPending();
-		} catch (t9) {
-			let err_1 = t9;
-			toast.push({
-				closable: !0,
-				status: "error",
-				title: t("save-query.error"),
-				description: err_1 instanceof Error ? err_1.message : String(err_1)
-			}), clearPending();
+		else {
+			try {
+				await unshareQuery(query_0._key), toast.push({
+					closable: !0,
+					status: "success",
+					title: t("save-query.unshared-success")
+				});
+			} catch (t9) {
+				let err_1 = t9;
+				toast.push({
+					closable: !0,
+					status: "error",
+					title: t("save-query.error"),
+					description: err_1 instanceof Error ? err_1.message : String(err_1)
+				});
+			}
+			clearPending();
 		}
-	}, $[20] = deleteQuery, $[21] = formatDate, $[22] = getStateFromUrl, $[23] = queries, $[24] = saveQuery, $[25] = t, $[26] = toast, $[27] = t8) : t8 = $[27];
+	}, $[19] = formatDate, $[20] = getStateFromUrl, $[21] = queries, $[22] = t, $[23] = toast, $[24] = unshareQuery, $[25] = t8) : t8 = $[25];
 	let handleUnshareQuery = t8, t9;
-	$[28] !== t || $[29] !== toast || $[30] !== updateQuery ? (t9 = async (query_1, newTitle) => {
+	$[26] !== t || $[27] !== toast || $[28] !== updateQuery ? (t9 = async (query_1, newTitle) => {
 		setEditingKey(null), setOptimisticTitles((prev_1) => ({
 			...prev_1,
 			[query_1._key]: newTitle
@@ -966,9 +1276,9 @@ function QueryRecall(t0) {
 				description: err_2.message
 			});
 		}
-	}, $[28] = t, $[29] = toast, $[30] = updateQuery, $[31] = t9) : t9 = $[31];
+	}, $[26] = t, $[27] = toast, $[28] = updateQuery, $[29] = t9) : t9 = $[29];
 	let handleTitleSave = t9, t10;
-	$[32] !== currentParams || $[33] !== currentQuery || $[34] !== formatDate || $[35] !== generateUrl || $[36] !== getStateFromUrl || $[37] !== queries || $[38] !== t || $[39] !== toast || $[40] !== updateQuery ? (t10 = async (query_2) => {
+	$[30] !== currentParams || $[31] !== currentQuery || $[32] !== formatDate || $[33] !== generateUrl || $[34] !== getStateFromUrl || $[35] !== queries || $[36] !== t || $[37] !== toast || $[38] !== updateQuery ? (t10 = async (query_2) => {
 		let newUrl_0 = generateUrl(currentQuery, currentParams);
 		if (queries?.some((q_1) => {
 			if (q_1._key === query_2._key) return !1;
@@ -1005,48 +1315,48 @@ function QueryRecall(t0) {
 				description: err_3.message
 			});
 		}
-	}, $[32] = currentParams, $[33] = currentQuery, $[34] = formatDate, $[35] = generateUrl, $[36] = getStateFromUrl, $[37] = queries, $[38] = t, $[39] = toast, $[40] = updateQuery, $[41] = t10) : t10 = $[41];
+	}, $[30] = currentParams, $[31] = currentQuery, $[32] = formatDate, $[33] = generateUrl, $[34] = getStateFromUrl, $[35] = queries, $[36] = t, $[37] = toast, $[38] = updateQuery, $[39] = t10) : t10 = $[39];
 	let handleUpdate = t10, T0, T1, T2, t11, t12, t13, t14, t15;
-	if ($[42] !== compactMode || $[43] !== currentParams || $[44] !== currentQuery || $[45] !== deleteQuery || $[46] !== editingKey || $[47] !== editingTitle || $[48] !== formatDate || $[49] !== getStateFromUrl || $[50] !== handleSave || $[51] !== handleTitleSave || $[52] !== handleUnshareQuery || $[53] !== handleUpdate || $[54] !== optimisticTitles || $[55] !== pendingUnshareKeys || $[56] !== queries || $[57] !== queryFilter || $[58] !== saving || $[59] !== searchQuery || $[60] !== selectedUrl || $[61] !== setStateFromParsedUrl || $[62] !== t) {
+	if ($[40] !== compactMode || $[41] !== currentParams || $[42] !== currentQuery || $[43] !== deleteQuery || $[44] !== editingKey || $[45] !== editingTitle || $[46] !== formatDate || $[47] !== getStateFromUrl || $[48] !== handleSave || $[49] !== handleTitleSave || $[50] !== handleUnshareQuery || $[51] !== handleUpdate || $[52] !== optimisticTitles || $[53] !== pendingUnshareKeys || $[54] !== queries || $[55] !== queryFilter || $[56] !== saving || $[57] !== searchQuery || $[58] !== selectedUrl || $[59] !== setStateFromParsedUrl || $[60] !== t) {
 		let filteredQueries = (queries?.filter((q_3) => !pendingUnshareKeys.includes(q_3._key)))?.filter((q_4) => {
 			let matchesSearch = (q_4.title ?? "").toLowerCase().includes(searchQuery.toLowerCase()), matchesFilter = queryFilter === "all" || queryFilter === "personal" && !q_4.shared || queryFilter === "shared" && q_4.shared;
 			return matchesSearch && matchesFilter;
 		});
 		T2 = ScrollContainer;
 		let t16;
-		$[71] === t ? t16 = $[72] : (t16 = t("label.saved-queries"), $[71] = t, $[72] = t16);
+		$[69] === t ? t16 = $[70] : (t16 = t("label.saved-queries"), $[69] = t, $[70] = t16);
 		let t17;
-		$[73] === t16 ? t17 = $[74] : (t17 = /* @__PURE__ */ jsx(StyledLabel, {
+		$[71] === t16 ? t17 = $[72] : (t17 = /* @__PURE__ */ jsx(StyledLabel, {
 			muted: !0,
 			children: t16
-		}), $[73] = t16, $[74] = t17);
+		}), $[71] = t16, $[72] = t17);
 		let t18;
-		$[75] === t ? t18 = $[76] : (t18 = t("action.save-query"), $[75] = t, $[76] = t18);
+		$[73] === t ? t18 = $[74] : (t18 = t("action.save-query"), $[73] = t, $[74] = t18);
 		let t19;
-		$[77] === handleSave ? t19 = $[78] : (t19 = () => void handleSave(), $[77] = handleSave, $[78] = t19);
+		$[75] === handleSave ? t19 = $[76] : (t19 = () => void handleSave(), $[75] = handleSave, $[76] = t19);
 		let t20;
-		$[79] !== saving || $[80] !== t18 || $[81] !== t19 ? (t20 = /* @__PURE__ */ jsx(Button, {
+		$[77] !== saving || $[78] !== t18 || $[79] !== t19 ? (t20 = /* @__PURE__ */ jsx(Button, {
 			"aria-label": t18,
 			icon: AddIcon,
 			disabled: saving,
 			onClick: t19,
 			mode: "bleed"
-		}), $[79] = saving, $[80] = t18, $[81] = t19, $[82] = t20) : t20 = $[82];
+		}), $[77] = saving, $[78] = t18, $[79] = t19, $[80] = t20) : t20 = $[80];
 		let t21;
-		$[83] !== t17 || $[84] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Flex, {
+		$[81] !== t17 || $[82] !== t20 ? (t21 = /* @__PURE__ */ jsxs(Flex, {
 			padding: 3,
 			paddingTop: 2,
 			paddingBottom: 0,
 			justifyContent: "space-between",
 			alignItems: "center",
 			children: [t17, t20]
-		}), $[83] = t17, $[84] = t20, $[85] = t21) : t21 = $[85];
+		}), $[81] = t17, $[82] = t20, $[83] = t21) : t21 = $[83];
 		let t22;
-		$[86] === t ? t22 = $[87] : (t22 = t("label.search-queries"), $[86] = t, $[87] = t22);
+		$[84] === t ? t22 = $[85] : (t22 = t("label.search-queries"), $[84] = t, $[85] = t22);
 		let t23;
-		$[88] === Symbol.for("react.memo_cache_sentinel") ? (t23 = (event) => setSearchQuery(event.currentTarget.value), $[88] = t23) : t23 = $[88];
+		$[86] === Symbol.for("react.memo_cache_sentinel") ? (t23 = (event) => setSearchQuery(event.currentTarget.value), $[86] = t23) : t23 = $[86];
 		let t24;
-		$[89] !== searchQuery || $[90] !== t22 ? (t24 = /* @__PURE__ */ jsx(Box, {
+		$[87] !== searchQuery || $[88] !== t22 ? (t24 = /* @__PURE__ */ jsx(Box, {
 			padding: 3,
 			paddingTop: 0,
 			children: /* @__PURE__ */ jsx(TextInput, {
@@ -1055,45 +1365,45 @@ function QueryRecall(t0) {
 				value: searchQuery,
 				onChange: t23
 			})
-		}), $[89] = searchQuery, $[90] = t22, $[91] = t24) : t24 = $[91];
+		}), $[87] = searchQuery, $[88] = t22, $[89] = t24) : t24 = $[89];
 		let t25;
-		$[92] === t ? t25 = $[93] : (t25 = t("label.all"), $[92] = t, $[93] = t25);
+		$[90] === t ? t25 = $[91] : (t25 = t("label.all"), $[90] = t, $[91] = t25);
 		let t26 = queryFilter === "all", t27;
-		$[94] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => setQueryFilter("all"), $[94] = t27) : t27 = $[94];
+		$[92] === Symbol.for("react.memo_cache_sentinel") ? (t27 = () => setQueryFilter("all"), $[92] = t27) : t27 = $[92];
 		let t28;
-		$[95] !== t25 || $[96] !== t26 ? (t28 = /* @__PURE__ */ jsx(Tab, {
+		$[93] !== t25 || $[94] !== t26 ? (t28 = /* @__PURE__ */ jsx(Tab, {
 			id: "query-filter-all",
 			"aria-controls": "vision-query-recall-list",
 			label: t25,
 			selected: t26,
 			onClick: t27
-		}), $[95] = t25, $[96] = t26, $[97] = t28) : t28 = $[97];
+		}), $[93] = t25, $[94] = t26, $[95] = t28) : t28 = $[95];
 		let t29;
-		$[98] === t ? t29 = $[99] : (t29 = t("label.personal"), $[98] = t, $[99] = t29);
+		$[96] === t ? t29 = $[97] : (t29 = t("label.personal"), $[96] = t, $[97] = t29);
 		let t30 = queryFilter === "personal", t31;
-		$[100] === Symbol.for("react.memo_cache_sentinel") ? (t31 = () => setQueryFilter("personal"), $[100] = t31) : t31 = $[100];
+		$[98] === Symbol.for("react.memo_cache_sentinel") ? (t31 = () => setQueryFilter("personal"), $[98] = t31) : t31 = $[98];
 		let t32;
-		$[101] !== t29 || $[102] !== t30 ? (t32 = /* @__PURE__ */ jsx(Tab, {
+		$[99] !== t29 || $[100] !== t30 ? (t32 = /* @__PURE__ */ jsx(Tab, {
 			id: "query-filter-personal",
 			"aria-controls": "vision-query-recall-list",
 			label: t29,
 			selected: t30,
 			onClick: t31
-		}), $[101] = t29, $[102] = t30, $[103] = t32) : t32 = $[103];
+		}), $[99] = t29, $[100] = t30, $[101] = t32) : t32 = $[101];
 		let t33;
-		$[104] === t ? t33 = $[105] : (t33 = t("label.shared"), $[104] = t, $[105] = t33);
+		$[102] === t ? t33 = $[103] : (t33 = t("label.shared"), $[102] = t, $[103] = t33);
 		let t34 = queryFilter === "shared", t35;
-		$[106] === Symbol.for("react.memo_cache_sentinel") ? (t35 = () => setQueryFilter("shared"), $[106] = t35) : t35 = $[106];
+		$[104] === Symbol.for("react.memo_cache_sentinel") ? (t35 = () => setQueryFilter("shared"), $[104] = t35) : t35 = $[104];
 		let t36;
-		$[107] !== t33 || $[108] !== t34 ? (t36 = /* @__PURE__ */ jsx(Tab, {
+		$[105] !== t33 || $[106] !== t34 ? (t36 = /* @__PURE__ */ jsx(Tab, {
 			id: "query-filter-shared",
 			"aria-controls": "vision-query-recall-list",
 			label: t33,
 			selected: t34,
 			onClick: t35
-		}), $[107] = t33, $[108] = t34, $[109] = t36) : t36 = $[109];
+		}), $[105] = t33, $[106] = t34, $[107] = t36) : t36 = $[107];
 		let t37;
-		$[110] !== t28 || $[111] !== t32 || $[112] !== t36 ? (t37 = /* @__PURE__ */ jsx(Box, {
+		$[108] !== t28 || $[109] !== t32 || $[110] !== t36 ? (t37 = /* @__PURE__ */ jsx(Box, {
 			paddingX: 3,
 			paddingBottom: 2,
 			children: /* @__PURE__ */ jsxs(TabList, {
@@ -1104,14 +1414,14 @@ function QueryRecall(t0) {
 					t36
 				]
 			})
-		}), $[110] = t28, $[111] = t32, $[112] = t36, $[113] = t37) : t37 = $[113], $[114] !== t21 || $[115] !== t24 || $[116] !== t37 ? (t15 = /* @__PURE__ */ jsxs(FixedHeader, {
+		}), $[108] = t28, $[109] = t32, $[110] = t36, $[111] = t37) : t37 = $[111], $[112] !== t21 || $[113] !== t24 || $[114] !== t37 ? (t15 = /* @__PURE__ */ jsxs(FixedHeader, {
 			gap: 3,
 			children: [
 				t21,
 				t24,
 				t37
 			]
-		}), $[114] = t21, $[115] = t24, $[116] = t37, $[117] = t15) : t15 = $[117], T1 = QueryList, t14 = "vision-query-recall-list", T0 = Flex, t11 = 3, t12 = "column", t13 = filteredQueries?.map((q_5, index) => {
+		}), $[112] = t21, $[113] = t24, $[114] = t37, $[115] = t15) : t15 = $[115], T1 = QueryList, t14 = "vision-query-recall-list", T0 = Flex, t11 = 3, t12 = "column", t13 = filteredQueries?.map((q_5, index) => {
 			let queryObj = getStateFromUrl(q_5.url), fullQueryPreview = queryObj?.query || "", shortQueryPreview = fullQueryPreview.split("{")[0], isSelected = selectedUrl === q_5.url, canMutateQuery = !q_5.shared || q_5.isOwnedByCurrentUser, areQueriesEqual = queryObj && currentQuery === queryObj.query && dequal(currentParams, queryObj.params), isEdited = isSelected && !areQueriesEqual && canMutateQuery;
 			return /* @__PURE__ */ jsx(Card, {
 				paddingX: compactMode ? 3 : 4,
@@ -1216,6 +1526,7 @@ function QueryRecall(t0) {
 											})
 										] }),
 										popover: {
+											animate: !0,
 											portal: !0,
 											placement: "bottom-end",
 											tone: "default"
@@ -1225,6 +1536,7 @@ function QueryRecall(t0) {
 							})]
 						}),
 						fullQueryPreview ? /* @__PURE__ */ jsx(Tooltip, {
+							animate: !0,
 							content: /* @__PURE__ */ jsx(Box, {
 								padding: 2,
 								style: {
@@ -1361,21 +1673,22 @@ function QueryRecall(t0) {
 					]
 				})
 			}, q_5._key);
-		}), $[42] = compactMode, $[43] = currentParams, $[44] = currentQuery, $[45] = deleteQuery, $[46] = editingKey, $[47] = editingTitle, $[48] = formatDate, $[49] = getStateFromUrl, $[50] = handleSave, $[51] = handleTitleSave, $[52] = handleUnshareQuery, $[53] = handleUpdate, $[54] = optimisticTitles, $[55] = pendingUnshareKeys, $[56] = queries, $[57] = queryFilter, $[58] = saving, $[59] = searchQuery, $[60] = selectedUrl, $[61] = setStateFromParsedUrl, $[62] = t, $[63] = T0, $[64] = T1, $[65] = T2, $[66] = t11, $[67] = t12, $[68] = t13, $[69] = t14, $[70] = t15;
-	} else T0 = $[63], T1 = $[64], T2 = $[65], t11 = $[66], t12 = $[67], t13 = $[68], t14 = $[69], t15 = $[70];
+		}), $[40] = compactMode, $[41] = currentParams, $[42] = currentQuery, $[43] = deleteQuery, $[44] = editingKey, $[45] = editingTitle, $[46] = formatDate, $[47] = getStateFromUrl, $[48] = handleSave, $[49] = handleTitleSave, $[50] = handleUnshareQuery, $[51] = handleUpdate, $[52] = optimisticTitles, $[53] = pendingUnshareKeys, $[54] = queries, $[55] = queryFilter, $[56] = saving, $[57] = searchQuery, $[58] = selectedUrl, $[59] = setStateFromParsedUrl, $[60] = t, $[61] = T0, $[62] = T1, $[63] = T2, $[64] = t11, $[65] = t12, $[66] = t13, $[67] = t14, $[68] = t15;
+	} else T0 = $[61], T1 = $[62], T2 = $[63], t11 = $[64], t12 = $[65], t13 = $[66], t14 = $[67], t15 = $[68];
 	let t16;
-	$[118] !== T0 || $[119] !== t11 || $[120] !== t12 || $[121] !== t13 ? (t16 = /* @__PURE__ */ jsx(T0, {
+	$[116] !== T0 || $[117] !== t11 || $[118] !== t12 || $[119] !== t13 ? (t16 = /* @__PURE__ */ jsx(T0, {
 		paddingY: t11,
 		flexDirection: t12,
 		children: t13
-	}), $[118] = T0, $[119] = t11, $[120] = t12, $[121] = t13, $[122] = t16) : t16 = $[122];
+	}), $[116] = T0, $[117] = t11, $[118] = t12, $[119] = t13, $[120] = t16) : t16 = $[120];
 	let t17;
-	$[123] !== T1 || $[124] !== t14 || $[125] !== t16 ? (t17 = /* @__PURE__ */ jsx(T1, {
+	$[121] !== T1 || $[122] !== t14 || $[123] !== t16 ? (t17 = /* @__PURE__ */ jsx(T1, {
 		id: t14,
 		children: t16
-	}), $[123] = T1, $[124] = t14, $[125] = t16, $[126] = t17) : t17 = $[126];
+	}), $[121] = T1, $[122] = t14, $[123] = t16, $[124] = t17) : t17 = $[124];
 	let t18;
-	$[127] !== handleConfirmShareQuery || $[128] !== shareDialogQuery || $[129] !== t ? (t18 = shareDialogQuery && /* @__PURE__ */ jsx(Dialog, {
+	$[125] !== handleConfirmShareQuery || $[126] !== shareDialogQuery || $[127] !== t ? (t18 = shareDialogQuery && /* @__PURE__ */ jsx(Dialog, {
+		animate: !0,
 		id: "vision-query-recall-share-dialog",
 		width: 1,
 		header: t("label.share"),
@@ -1404,13 +1717,13 @@ function QueryRecall(t0) {
 				children: t("save-query.share-warning")
 			})
 		})
-	}), $[127] = handleConfirmShareQuery, $[128] = shareDialogQuery, $[129] = t, $[130] = t18) : t18 = $[130];
+	}), $[125] = handleConfirmShareQuery, $[126] = shareDialogQuery, $[127] = t, $[128] = t18) : t18 = $[128];
 	let t19;
-	return $[131] !== T2 || $[132] !== t15 || $[133] !== t17 || $[134] !== t18 ? (t19 = /* @__PURE__ */ jsxs(T2, { children: [
+	return $[129] !== T2 || $[130] !== t15 || $[131] !== t17 || $[132] !== t18 ? (t19 = /* @__PURE__ */ jsxs(T2, { children: [
 		t15,
 		t17,
 		t18
-	] }), $[131] = T2, $[132] = t15, $[133] = t17, $[134] = t18, $[135] = t19) : t19 = $[135], t19;
+	] }), $[129] = T2, $[130] = t15, $[131] = t17, $[132] = t18, $[133] = t19) : t19 = $[133], t19;
 }
 function narrowBreakpoint() {
 	return typeof window < "u" && window.innerWidth > 600;
@@ -1426,7 +1739,7 @@ function calculatePaneSizeOptions(height) {
 	};
 }
 function usePaneSize(t0) {
-	let $ = c(7), { visionRootRef } = t0, [rootSize, setRootSize] = useState(_temp$4), [isNarrowBreakpoint, setIsNarrowBreakpoint] = useState(_temp2$3), [paneSizeOptions, setPaneSizeOptions] = useState(_temp3$2), t1, t2;
+	let $ = c(7), { visionRootRef } = t0, [rootSize, setRootSize] = useState(_temp$5), [isNarrowBreakpoint, setIsNarrowBreakpoint] = useState(_temp2$3), [paneSizeOptions, setPaneSizeOptions] = useState(_temp3$2), t1, t2;
 	$[0] === visionRootRef ? (t1 = $[1], t2 = $[2]) : (t1 = () => {
 		if (!visionRootRef.current) return;
 		let handleResize = (entries) => {
@@ -1453,7 +1766,7 @@ function _temp3$2() {
 function _temp2$3() {
 	return narrowBreakpoint();
 }
-function _temp$4() {
+function _temp$5() {
 	return {
 		width: typeof window < "u" ? window.innerWidth : 1e3,
 		height: typeof window < "u" ? window.innerHeight : 800
@@ -1464,7 +1777,7 @@ function _temp$4() {
 * To handle query and listen execution.
 */
 function VisionGuiControls(t0) {
-	let $ = c(30), { hasValidParams, listenInProgress, queryInProgress, onQueryExecution, onListenExecution } = t0, { t } = useTranslation(visionLocaleNamespace), t1;
+	let $ = c(34), { hasValidParams, listenInProgress, queryInProgress, onQueryExecution, onListenExecution, onSwitchToRedesign } = t0, { t } = useTranslation(visionLocaleNamespace), t1;
 	$[0] === t ? t1 = $[1] : (t1 = t("params.error.params-invalid-json"), $[0] = t, $[1] = t1);
 	let t2;
 	$[2] === t1 ? t2 = $[3] : (t2 = /* @__PURE__ */ jsx(Card, {
@@ -1487,6 +1800,7 @@ function VisionGuiControls(t0) {
 		flexBasis: "0%",
 		flexGrow: 1,
 		children: /* @__PURE__ */ jsx(Tooltip, {
+			animate: !0,
 			content: t3,
 			placement: "top",
 			portal: !0,
@@ -1520,24 +1834,52 @@ function VisionGuiControls(t0) {
 		})
 	}), $[17] = onListenExecution, $[18] = t10, $[19] = t11, $[20] = t12, $[21] = t9, $[22] = t13) : t13 = $[22];
 	let t14;
-	$[23] !== t13 || $[24] !== t8 ? (t14 = /* @__PURE__ */ jsxs(Flex, {
-		justifyContent: "space-evenly",
-		children: [t8, t13]
-	}), $[23] = t13, $[24] = t8, $[25] = t14) : t14 = $[25];
+	$[23] !== onSwitchToRedesign || $[24] !== t ? (t14 = onSwitchToRedesign && /* @__PURE__ */ jsx(Box, {
+		flexShrink: 0,
+		marginLeft: 3,
+		children: /* @__PURE__ */ jsx(Tooltip, {
+			animate: !0,
+			content: /* @__PURE__ */ jsx(Text, {
+				size: 1,
+				children: t("vista.redesign.try.description")
+			}),
+			placement: "top",
+			portal: !0,
+			children: /* @__PURE__ */ jsx(Button, {
+				"aria-label": t("vista.redesign.try"),
+				"data-testid": "vision-try-redesign",
+				icon: RocketIcon,
+				mode: "bleed",
+				onClick: onSwitchToRedesign,
+				tone: "primary",
+				type: "button"
+			})
+		})
+	}), $[23] = onSwitchToRedesign, $[24] = t, $[25] = t14) : t14 = $[25];
 	let t15;
-	return $[26] !== hasValidParams || $[27] !== t14 || $[28] !== t2 ? (t15 = /* @__PURE__ */ jsx(ControlsContainer, { children: /* @__PURE__ */ jsx(Card, {
+	$[26] !== t13 || $[27] !== t14 || $[28] !== t8 ? (t15 = /* @__PURE__ */ jsxs(Flex, {
+		justifyContent: "space-evenly",
+		children: [
+			t8,
+			t13,
+			t14
+		]
+	}), $[26] = t13, $[27] = t14, $[28] = t8, $[29] = t15) : t15 = $[29];
+	let t16;
+	return $[30] !== hasValidParams || $[31] !== t15 || $[32] !== t2 ? (t16 = /* @__PURE__ */ jsx(ControlsContainer, { children: /* @__PURE__ */ jsx(Card, {
 		padding: 3,
 		paddingX: 3,
 		children: /* @__PURE__ */ jsx(Tooltip, {
+			animate: !0,
 			content: t2,
 			placement: "top",
 			disabled: hasValidParams,
 			portal: !0,
-			children: t14
+			children: t15
 		})
-	}) }), $[26] = hasValidParams, $[27] = t14, $[28] = t2, $[29] = t15) : t15 = $[29], t15;
+	}) }), $[30] = hasValidParams, $[31] = t15, $[32] = t2, $[33] = t16) : t16 = $[33], t16;
 }
-var dot = "_1mjpm8q2", perspectivePopoverContent = "_1mjpm8q0", perspectivePopoverLink = "_1mjpm8q1";
+var dot = "e85d3y2", perspectivePopoverContent = "e85d3y0", perspectivePopoverLink = "e85d3y1";
 function PerspectivePopoverContent(props) {
 	let $ = c(2), t0;
 	return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Box, {
@@ -1561,7 +1903,7 @@ function Dot(t0) {
 }
 function PerspectivePopover() {
 	let $ = c(39), [open, setOpen] = useState(!1), buttonRef = useRef(null), popoverRef = useRef(null), t0;
-	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => setOpen(_temp$3), $[0] = t0) : t0 = $[0];
+	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = () => setOpen(_temp$4), $[0] = t0) : t0 = $[0];
 	let handleClick = t0, { t } = useTranslation(visionLocaleNamespace), t1, t2;
 	$[1] === Symbol.for("react.memo_cache_sentinel") ? (t1 = () => setOpen(!1), t2 = () => [buttonRef.current, popoverRef.current], $[1] = t1, $[2] = t2) : (t1 = $[1], t2 = $[2]), useClickOutsideEvent(t1, t2);
 	let t3;
@@ -1640,6 +1982,7 @@ function PerspectivePopover() {
 	}), $[33] = open, $[34] = t16);
 	let t17;
 	return $[35] !== open || $[36] !== t14 || $[37] !== t16 ? (t17 = /* @__PURE__ */ jsx(Popover, {
+		animate: !0,
 		content: t14,
 		placement: "bottom-start",
 		portal: !0,
@@ -1649,7 +1992,7 @@ function PerspectivePopover() {
 		children: t16
 	}), $[35] = open, $[36] = t14, $[37] = t16, $[38] = t17) : t17 = $[38], t17;
 }
-function _temp$3(o) {
+function _temp$4(o) {
 	return !o;
 }
 const PinnedReleasePerspectiveOption = (t0) => {
@@ -1665,7 +2008,7 @@ const PinnedReleasePerspectiveOption = (t0) => {
 		name,
 		t3,
 		label
-	].filter(_temp$2), $[8] = label, $[9] = name, $[10] = t3, $[11] = t4) : t4 = $[11];
+	].filter(_temp$3), $[8] = label, $[9] = name, $[10] = t3, $[11] = t4) : t4 = $[11];
 	let text = t4.join(" "), t5;
 	$[12] === pinnedPerspective ? t5 = $[13] : (t5 = hasPinnedPerspective(pinnedPerspective), $[12] = pinnedPerspective, $[13] = t5);
 	let t6 = !t5, t7;
@@ -1757,6 +2100,7 @@ function VisionGuiHeader(t0) {
 	}), $[33] = isApiVersionLocked, $[34] = onChangeApiVersion, $[35] = t16, $[36] = t19, $[37] = t20) : t20 = $[37];
 	let t21;
 	$[38] !== t14 || $[39] !== t15 || $[40] !== t20 ? (t21 = /* @__PURE__ */ jsx(Tooltip, {
+		animate: !0,
 		content: t14,
 		disabled: t15,
 		placement: "bottom",
@@ -1871,6 +2215,7 @@ function VisionGuiHeader(t0) {
 					value: url
 				})
 			}), /* @__PURE__ */ jsx(Tooltip, {
+				animate: !0,
 				content: t("action.copy-url-to-clipboard"),
 				children: /* @__PURE__ */ jsx(Button, {
 					"aria-label": t("action.copy-url-to-clipboard"),
@@ -1907,23 +2252,51 @@ function _temp3$1(version) {
 function _temp2$2(ds) {
 	return /* @__PURE__ */ jsx("option", { children: ds }, ds);
 }
-function _temp$2(value) {
+function _temp$3(value) {
 	return value !== void 0;
 }
 function getBlobUrl(content, mimeType) {
 	return URL.createObjectURL(new Blob([content], { type: mimeType }));
 }
+const NOTHING = Symbol("nothing");
+/**
+* One blob URL per encoder, replaced (and the previous one revoked) when the encoded content
+* changes. The value last encoded is remembered as well, so asking for the same result again
+* costs nothing: results are never mutated, and encoding one only to compare it is the expensive
+* part for a large result.
+*/
 function getMemoizedBlobUrlResolver(mimeType, stringEncoder) {
 	return (() => {
-		let prevResult = "", prevContent = "";
+		let prevInput = NOTHING, prevResult = "", prevContent = "";
 		return (input) => {
+			if (input === prevInput && prevResult) return prevResult;
 			let content = stringEncoder(input);
-			if (typeof content == "string" && content !== "") return content === prevContent || (prevContent = content, prevResult && URL.revokeObjectURL(prevResult), prevResult = getBlobUrl(content, mimeType)), prevResult;
+			if (typeof content == "string" && content !== "") return prevInput = input, content === prevContent || (prevContent = content, prevResult && URL.revokeObjectURL(prevResult), prevResult = getBlobUrl(content, mimeType)), prevResult;
 		};
 	})();
 }
 const getJsonBlobUrl = getMemoizedBlobUrlResolver("application/json", (input) => JSON.stringify(input, null, 2)), getCsvBlobUrl = getMemoizedBlobUrlResolver("text/csv", (input) => json2csv(Array.isArray(input) ? input : [input]).trim());
 /**
+* Whether `getCsvBlobUrl` can produce anything for a result: `json2csv` yields nothing unless at
+* least one item is an object. A look at the shape, so a download button can be disabled without
+* converting a result nobody asked to download.
+*/
+function canEncodeCsv(input) {
+	return (Array.isArray(input) ? input : [input]).some((item) => typeof item == "object" && !!item && !Array.isArray(item));
+}
+function DelayedSpinner(props) {
+	let $ = c(5), [show, setShow] = useState(!1), t0, t1;
+	$[0] === props.delay ? (t0 = $[1], t1 = $[2]) : (t0 = () => {
+		let timer = setTimeout(() => setShow(!0), props.delay || 500);
+		return () => clearTimeout(timer);
+	}, t1 = [props.delay], $[0] = props.delay, $[1] = t0, $[2] = t1), useEffect(t0, t1);
+	let t2;
+	return $[3] === show ? t2 = $[4] : (t2 = show ? /* @__PURE__ */ jsx(Spinner, {
+		muted: !0,
+		size: 4
+	}) : null, $[3] = show, $[4] = t2), t2;
+}
+/**
 * Returns true when `selected` does not satisfy `required`.
 *
 * `X` is the experimental API: it satisfies every requirement, and when it is
@@ -1963,7 +2336,7 @@ function hasReleaseInPerspective(perspective) {
 function getUnsatisfiedApiVersionCapability(context, capabilities = API_VERSION_CAPABILITIES) {
 	if (context.statusCode === 400) return capabilities.find((capability) => capability.applies(context) && isApiVersionBelow(context.apiVersion, capability.requiredApiVersion));
 }
-var errorCode = "qq7z3z0";
+var errorCode = "_14yleie0";
 function ErrorCode(props) {
 	let $ = c(2), t0;
 	return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Code, {
@@ -2057,58 +2430,130 @@ function QueryErrorDialog(props) {
 		]
 	}), $[14] = T0, $[15] = t0, $[16] = t1, $[17] = t2, $[18] = t3, $[19] = t4, $[20] = t5, $[21] = t6) : t6 = $[21], t6;
 }
-var codeFamilyVar = "var(--ujs8fm0)", codeFontSizeVar = "var(--ujs8fm1)", codeLineHeightVar = "var(--ujs8fm2)", resultViewWrapper = "ujs8fmc", space0Var = "var(--ujs8fm3)", space2Var = "var(--ujs8fm4)", space4HalfVar = "var(--ujs8fm6)", space4Var = "var(--ujs8fm5)", syntaxBooleanVar = "var(--ujs8fma)", syntaxConstantVar = "var(--ujs8fm8)", syntaxNumberVar = "var(--ujs8fmb)", syntaxPropertyVar = "var(--ujs8fm7)", syntaxStringVar = "var(--ujs8fm9)";
+/** A dotted key path written the way it reads in code: `0.author.tags.1` as `[0].author.tags[1]` */
+function describeKeypath(keypath) {
+	return keypath.split(".").map((segment, index) => /^\d+$/.test(segment) ? `[${segment}]` : index === 0 ? segment : `.${segment}`).join("");
+}
+/**
+* The value at one of `@rexxars/react-json-inspector`'s dotted key paths (`0.author.name`; empty
+* for the root). A key may contain dots itself, so at each step the longest run of segments that
+* names a property wins. Undefined when the path leads nowhere.
+*/
+function getAtKeypath(data, keypath) {
+	if (keypath === "") return { value: data };
+	let segments = keypath.split("."), current = data, index = 0;
+	for (; index < segments.length;) {
+		let container = current;
+		if (typeof container != "object" || !container) return;
+		let end = segments.length;
+		for (; end > index && !Object.hasOwn(container, segments.slice(index, end).join("."));) end--;
+		if (end === index) return;
+		current = Reflect.get(container, segments.slice(index, end).join(".")), index = end;
+	}
+	return { value: current };
+}
+var codeFamilyVar = "var(--_1nwt4640)", codeFontSizeVar = "var(--_1nwt4641)", codeLineHeightVar = "var(--_1nwt4642)", copyNodeButton = "_1nwt464e", copyableResult = "_1nwt464d", resultViewWrapper = "_1nwt464c", space0Var = "var(--_1nwt4643)", space2Var = "var(--_1nwt4644)", space4HalfVar = "var(--_1nwt4646)", space4Var = "var(--_1nwt4645)", syntaxBooleanVar = "var(--_1nwt464a)", syntaxConstantVar = "var(--_1nwt4648)", syntaxNumberVar = "var(--_1nwt464b)", syntaxPropertyVar = "var(--_1nwt4647)", syntaxStringVar = "var(--_1nwt4649)";
 const lru = new LRU({ maxSize: 5e4 });
 function ResultViewWrapper(t0) {
-	let $ = c(24), { children } = t0, { color, font, space } = useTheme_v2(), codeSize = font.code.sizes[2], t1 = font.code.family, t2 = `${codeSize.fontSize}px`, t3 = `${codeSize.lineHeight}px`, t4;
-	$[0] === space[0] ? t4 = $[1] : (t4 = rem(space[0]), $[0] = space[0], $[1] = t4);
-	let t5 = `${t4}`, t6;
-	$[2] === space[2] ? t6 = $[3] : (t6 = rem(space[2]), $[2] = space[2], $[3] = t6);
-	let t7 = `${t6}`, t8;
-	$[4] === space[4] ? t8 = $[5] : (t8 = rem(space[4]), $[4] = space[4], $[5] = t8);
-	let t9 = `${t8}`, t10 = space[4] / 2, t11;
-	$[6] === t10 ? t11 = $[7] : (t11 = rem(t10), $[6] = t10, $[7] = t11);
-	let t12 = `${t11}`, t13;
-	$[8] !== color.syntax.boolean || $[9] !== color.syntax.constant || $[10] !== color.syntax.number || $[11] !== color.syntax.property || $[12] !== color.syntax.string || $[13] !== font.code.family || $[14] !== t12 || $[15] !== t2 || $[16] !== t3 || $[17] !== t5 || $[18] !== t7 || $[19] !== t9 ? (t13 = assignInlineVars({
-		[codeFamilyVar]: t1,
-		[codeFontSizeVar]: t2,
-		[codeLineHeightVar]: t3,
-		[space0Var]: t5,
-		[space2Var]: t7,
-		[space4Var]: t9,
-		[space4HalfVar]: t12,
+	let $ = c(25), { children, copyable } = t0, { color, font, space } = useTheme_v2(), codeSize = font.code.sizes[2], t1 = copyable ? `${resultViewWrapper} ${copyableResult}` : resultViewWrapper, t2 = font.code.family, t3 = `${codeSize.fontSize}px`, t4 = `${codeSize.lineHeight}px`, t5;
+	$[0] === space[0] ? t5 = $[1] : (t5 = rem(space[0]), $[0] = space[0], $[1] = t5);
+	let t6 = `${t5}`, t7;
+	$[2] === space[2] ? t7 = $[3] : (t7 = rem(space[2]), $[2] = space[2], $[3] = t7);
+	let t8 = `${t7}`, t9;
+	$[4] === space[4] ? t9 = $[5] : (t9 = rem(space[4]), $[4] = space[4], $[5] = t9);
+	let t10 = `${t9}`, t11 = space[4] / 2, t12;
+	$[6] === t11 ? t12 = $[7] : (t12 = rem(t11), $[6] = t11, $[7] = t12);
+	let t13 = `${t12}`, t14;
+	$[8] !== color.syntax.boolean || $[9] !== color.syntax.constant || $[10] !== color.syntax.number || $[11] !== color.syntax.property || $[12] !== color.syntax.string || $[13] !== font.code.family || $[14] !== t10 || $[15] !== t13 || $[16] !== t3 || $[17] !== t4 || $[18] !== t6 || $[19] !== t8 ? (t14 = assignInlineVars({
+		[codeFamilyVar]: t2,
+		[codeFontSizeVar]: t3,
+		[codeLineHeightVar]: t4,
+		[space0Var]: t6,
+		[space2Var]: t8,
+		[space4Var]: t10,
+		[space4HalfVar]: t13,
 		[syntaxPropertyVar]: color.syntax.property,
 		[syntaxConstantVar]: color.syntax.constant,
 		[syntaxStringVar]: color.syntax.string,
 		[syntaxBooleanVar]: color.syntax.boolean,
 		[syntaxNumberVar]: color.syntax.number
-	}), $[8] = color.syntax.boolean, $[9] = color.syntax.constant, $[10] = color.syntax.number, $[11] = color.syntax.property, $[12] = color.syntax.string, $[13] = font.code.family, $[14] = t12, $[15] = t2, $[16] = t3, $[17] = t5, $[18] = t7, $[19] = t9, $[20] = t13) : t13 = $[20];
-	let t14;
-	return $[21] !== children || $[22] !== t13 ? (t14 = /* @__PURE__ */ jsx("div", {
-		className: resultViewWrapper,
-		style: t13,
+	}), $[8] = color.syntax.boolean, $[9] = color.syntax.constant, $[10] = color.syntax.number, $[11] = color.syntax.property, $[12] = color.syntax.string, $[13] = font.code.family, $[14] = t10, $[15] = t13, $[16] = t3, $[17] = t4, $[18] = t6, $[19] = t8, $[20] = t14) : t14 = $[20];
+	let t15;
+	return $[21] !== children || $[22] !== t1 || $[23] !== t14 ? (t15 = /* @__PURE__ */ jsx("div", {
+		className: t1,
+		style: t14,
 		children
-	}), $[21] = children, $[22] = t13, $[23] = t14) : t14 = $[23], t14;
+	}), $[21] = children, $[22] = t1, $[23] = t14, $[24] = t15) : t15 = $[24], t15;
 }
+const ResultLabelContext = createContext(null);
 function ResultView(props) {
-	let $ = c(7), { data, datasetName } = props, workspaceDataset = useDataset();
+	let $ = c(17), { data, datasetName, copy } = props, linkDocuments = useDataset() === datasetName, t0;
+	$[0] !== copy || $[1] !== data || $[2] !== linkDocuments ? (t0 = {
+		data,
+		copy,
+		linkDocuments
+	}, $[0] = copy, $[1] = data, $[2] = linkDocuments, $[3] = t0) : t0 = $[3];
+	let labelContext = t0;
 	if (isRecord(data) || Array.isArray(data)) {
-		let t0 = workspaceDataset === datasetName ? DocumentEditLabel : void 0, t1;
-		return $[0] !== data || $[1] !== t0 ? (t1 = /* @__PURE__ */ jsx(ResultViewWrapper, { children: /* @__PURE__ */ jsx(JsonInspector, {
+		let t1 = !!copy, t2 = copy || linkDocuments ? InteractiveLabel : void 0, t3;
+		$[4] !== data || $[5] !== t2 ? (t3 = /* @__PURE__ */ jsx(JsonInspector, {
 			data,
 			search: !1,
 			isExpanded,
 			onClick: toggleExpanded,
-			interactiveLabel: t0
-		}) }), $[0] = data, $[1] = t0, $[2] = t1) : t1 = $[2], t1;
+			interactiveLabel: t2
+		}), $[4] = data, $[5] = t2, $[6] = t3) : t3 = $[6];
+		let t4;
+		$[7] !== labelContext || $[8] !== t3 ? (t4 = /* @__PURE__ */ jsx(ResultLabelContext, {
+			value: labelContext,
+			children: t3
+		}), $[7] = labelContext, $[8] = t3, $[9] = t4) : t4 = $[9];
+		let t5;
+		return $[10] !== t1 || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsx(ResultViewWrapper, {
+			copyable: t1,
+			children: t4
+		}), $[10] = t1, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
 	}
-	let t0;
-	$[3] === data ? t0 = $[4] : (t0 = JSON.stringify(data), $[3] = data, $[4] = t0);
 	let t1;
-	return $[5] === t0 ? t1 = $[6] : (t1 = /* @__PURE__ */ jsx(Code, {
+	$[13] === data ? t1 = $[14] : (t1 = JSON.stringify(data), $[13] = data, $[14] = t1);
+	let t2;
+	return $[15] === t1 ? t2 = $[16] : (t2 = /* @__PURE__ */ jsx(Code, {
 		language: "json",
-		children: t0
-	}), $[5] = t0, $[6] = t1), t1;
+		children: t1
+	}), $[15] = t1, $[16] = t2), t2;
+}
+function InteractiveLabel(props) {
+	let $ = c(6), context = use(ResultLabelContext);
+	if (props.isKey) {
+		let t0;
+		return $[0] !== context || $[1] !== props.keypath ? (t0 = context?.copy ? /* @__PURE__ */ jsx(CopyNodeButton, {
+			copy: context.copy,
+			data: context.data,
+			keypath: props.keypath
+		}) : null, $[0] = context, $[1] = props.keypath, $[2] = t0) : t0 = $[2], t0;
+	}
+	let t0;
+	return $[3] !== context?.linkDocuments || $[4] !== props ? (t0 = context?.linkDocuments ? /* @__PURE__ */ jsx(DocumentEditLabel, { ...props }) : null, $[3] = context?.linkDocuments, $[4] = props, $[5] = t0) : t0 = $[5], t0;
+}
+function CopyNodeButton(props) {
+	let $ = c(8), { copy, data, keypath } = props, t0;
+	$[0] !== copy || $[1] !== data || $[2] !== keypath ? (t0 = (event) => {
+		event.preventDefault(), event.stopPropagation();
+		let found = getAtKeypath(data, keypath);
+		found && copy.onCopy(found.value, keypath);
+	}, $[0] = copy, $[1] = data, $[2] = keypath, $[3] = t0) : t0 = $[3];
+	let t1;
+	$[4] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsx(CopyIcon, {}), $[4] = t1) : t1 = $[4];
+	let t2;
+	return $[5] !== copy.label || $[6] !== t0 ? (t2 = /* @__PURE__ */ jsx("button", {
+		"aria-label": copy.label,
+		className: copyNodeButton,
+		"data-testid": "result-copy-node",
+		onClick: t0,
+		title: copy.label,
+		type: "button",
+		children: t1
+	}), $[5] = copy.label, $[6] = t0, $[7] = t2) : t2 = $[7], t2;
 }
 function DocumentEditLabel(props) {
 	let $ = c(5);
@@ -2156,6 +2601,7 @@ function SaveCsvButton(t0) {
 		}), $[2] = t2) : t2 = $[2];
 		let t3;
 		return $[3] === t1 ? t3 = $[4] : (t3 = /* @__PURE__ */ jsx(Tooltip, {
+			animate: !0,
 			content: t1,
 			placement: "top",
 			children: t2
@@ -2350,9 +2796,9 @@ function SaveResultButtons(t0) {
 function nodeContains(node, other) {
 	return !node || !other ? !1 : node === other || !!(node.compareDocumentPosition(other) & 16);
 }
-const sanityUrl = /\/(vX|v1|v\d{4}-\d\d-\d\d)\/.*?(?:query|listen)\/(.*?)\?(.*)/, VARIANTS_API_VERSION = prefixApiVersion(VARIANTS_STUDIO_CLIENT_OPTIONS.apiVersion), isRunHotkey = (event) => isHotkey("ctrl+enter", event) || isHotkey("mod+enter", event);
+const isRunHotkey = (event) => isHotkey("ctrl+enter", event) || isHotkey("mod+enter", event);
 function VisionGui(props) {
-	let $ = c(233), { datasets, config, projectId, defaultDataset } = props, toast = useToast(), { t } = useTranslation(visionLocaleNamespace), { perspectiveStack, selectedVariantNames } = usePerspective(), selectedVariantName = getDefaultVariant(selectedVariantNames), isScheduledDraftsEnabled = useScheduledDraftsEnabled(), { data: t0 } = useActiveReleases(), t1;
+	let $ = c(234), { datasets, config, projectId, defaultDataset, onSwitchToRedesign } = props, toast = useToast(), { t } = useTranslation(visionLocaleNamespace), { perspectiveStack, selectedVariantNames } = usePerspective(), selectedVariantName = getDefaultVariant(selectedVariantNames), isScheduledDraftsEnabled = useScheduledDraftsEnabled(), { data: t0 } = useActiveReleases(), t1;
 	$[0] === t0 ? t1 = $[1] : (t1 = t0 === void 0 ? [] : t0, $[0] = t0, $[1] = t1);
 	let releases = t1, isDraftModelEnabled = useWorkspace().document.drafts.enabled, editorQueryRef = useRef(null), editorParamsRef = useRef(null), visionRootRef = useRef(null), customApiVersionElementRef = useRef(null), querySubscriptionRef = useRef(void 0), listenSubscriptionRef = useRef(void 0), t2;
 	$[2] === projectId ? t2 = $[3] : (t2 = () => getLocalStorage(projectId || "default"), $[2] = projectId, $[3] = t2);
@@ -2390,7 +2836,7 @@ function VisionGui(props) {
 		}
 		let t17;
 		if ($[35] !== isDraftModelEnabled || $[36] !== releases) {
-			let scheduledDraftReleases = releases.filter(_temp$1), releaseIds = sortReleases(scheduledDraftReleases).map(_temp2$1), t18;
+			let scheduledDraftReleases = releases.filter(_temp$2), releaseIds = sortReleases(scheduledDraftReleases).map(_temp2$1), t18;
 			$[38] === isDraftModelEnabled ? t18 = $[39] : (t18 = isDraftModelEnabled ? ["drafts"] : ["published"], $[38] = isDraftModelEnabled, $[39] = t18);
 			let defaultPerspective = t18;
 			t17 = [...releaseIds, ...defaultPerspective], $[35] = isDraftModelEnabled, $[36] = releases, $[37] = t17;
@@ -2517,7 +2963,7 @@ function VisionGui(props) {
 	}, $[94] = localStorage, $[95] = t30);
 	let handleParamsChange = t30, t31;
 	$[96] !== apiVersion || $[97] !== dataset || $[98] !== datasets || $[99] !== perspective || $[100] !== toast ? (t31 = (data) => {
-		let match = data.match(sanityUrl);
+		let match = data.match(SANITY_QUERY_URL);
 		if (!match) return null;
 		let [, usedApiVersion, usedDataset, urlQuery] = match, parts = parseApiQueryString(new URLSearchParams(urlQuery));
 		if (!parts) return null;
@@ -2655,20 +3101,21 @@ function VisionGui(props) {
 		editorRef: editorParamsRef
 	}), $[163] = handleParamsChange, $[164] = params.error, $[165] = params.raw, $[166] = params.valid, $[167] = t60) : t60 = $[167];
 	let t61;
-	$[168] !== handleListenExecution || $[169] !== handleQueryExecution || $[170] !== listenInProgress || $[171] !== params.valid || $[172] !== queryInProgress ? (t61 = /* @__PURE__ */ jsx(VisionGuiControls, {
+	$[168] !== handleListenExecution || $[169] !== handleQueryExecution || $[170] !== listenInProgress || $[171] !== onSwitchToRedesign || $[172] !== params.valid || $[173] !== queryInProgress ? (t61 = /* @__PURE__ */ jsx(VisionGuiControls, {
 		hasValidParams: params.valid,
 		queryInProgress,
 		listenInProgress,
 		onQueryExecution: handleQueryExecution,
-		onListenExecution: handleListenExecution
-	}), $[168] = handleListenExecution, $[169] = handleQueryExecution, $[170] = listenInProgress, $[171] = params.valid, $[172] = queryInProgress, $[173] = t61) : t61 = $[173];
+		onListenExecution: handleListenExecution,
+		onSwitchToRedesign
+	}), $[168] = handleListenExecution, $[169] = handleQueryExecution, $[170] = listenInProgress, $[171] = onSwitchToRedesign, $[172] = params.valid, $[173] = queryInProgress, $[174] = t61) : t61 = $[174];
 	let t62;
-	$[174] !== t60 || $[175] !== t61 ? (t62 = /* @__PURE__ */ jsxs(InputContainer, {
+	$[175] !== t60 || $[176] !== t61 ? (t62 = /* @__PURE__ */ jsxs(InputContainer, {
 		display: "flex",
 		children: [t60, t61]
-	}), $[174] = t60, $[175] = t61, $[176] = t62) : t62 = $[176];
+	}), $[175] = t60, $[176] = t61, $[177] = t62) : t62 = $[177];
 	let t63;
-	$[177] !== paneSizeOptions.allowResize || $[178] !== paneSizeOptions.maxSize || $[179] !== paneSizeOptions.size || $[180] !== t51 || $[181] !== t54 || $[182] !== t59 || $[183] !== t62 ? (t63 = /* @__PURE__ */ jsx(Box, {
+	$[178] !== paneSizeOptions.allowResize || $[179] !== paneSizeOptions.maxSize || $[180] !== paneSizeOptions.size || $[181] !== t51 || $[182] !== t54 || $[183] !== t59 || $[184] !== t62 ? (t63 = /* @__PURE__ */ jsx(Box, {
 		height: "stretch",
 		flexBasis: "0%",
 		flexGrow: 1,
@@ -2683,15 +3130,15 @@ function VisionGui(props) {
 			primary: "first",
 			children: [t59, t62]
 		})
-	}), $[177] = paneSizeOptions.allowResize, $[178] = paneSizeOptions.maxSize, $[179] = paneSizeOptions.size, $[180] = t51, $[181] = t54, $[182] = t59, $[183] = t62, $[184] = t63) : t63 = $[184];
+	}), $[178] = paneSizeOptions.allowResize, $[179] = paneSizeOptions.maxSize, $[180] = paneSizeOptions.size, $[181] = t51, $[182] = t54, $[183] = t59, $[184] = t62, $[185] = t63) : t63 = $[185];
 	let t64;
-	$[185] !== perspective || $[186] !== perspectiveStack || $[187] !== scheduledDraftsStack ? (t64 = getActivePerspective({
+	$[186] !== perspective || $[187] !== perspectiveStack || $[188] !== scheduledDraftsStack ? (t64 = getActivePerspective({
 		visionPerspective: perspective,
 		perspectiveStack,
 		scheduledDraftsStack
-	}), $[185] = perspective, $[186] = perspectiveStack, $[187] = scheduledDraftsStack, $[188] = t64) : t64 = $[188];
+	}), $[186] = perspective, $[187] = perspectiveStack, $[188] = scheduledDraftsStack, $[189] = t64) : t64 = $[189];
 	let t65;
-	$[189] !== activeVariant || $[190] !== dataset || $[191] !== e2eTime || $[192] !== error || $[193] !== listenInProgress || $[194] !== listenMutations || $[195] !== queryInProgress || $[196] !== queryResult || $[197] !== queryTime || $[198] !== t64 || $[199] !== userApiVersion ? (t65 = /* @__PURE__ */ jsx(VisionGuiResult, {
+	$[190] !== activeVariant || $[191] !== dataset || $[192] !== e2eTime || $[193] !== error || $[194] !== listenInProgress || $[195] !== listenMutations || $[196] !== queryInProgress || $[197] !== queryResult || $[198] !== queryTime || $[199] !== t64 || $[200] !== userApiVersion ? (t65 = /* @__PURE__ */ jsx(VisionGuiResult, {
 		error,
 		apiVersion: userApiVersion,
 		perspective: t64,
@@ -2703,9 +3150,9 @@ function VisionGui(props) {
 		dataset,
 		queryTime,
 		e2eTime
-	}), $[189] = activeVariant, $[190] = dataset, $[191] = e2eTime, $[192] = error, $[193] = listenInProgress, $[194] = listenMutations, $[195] = queryInProgress, $[196] = queryResult, $[197] = queryTime, $[198] = t64, $[199] = userApiVersion, $[200] = t65) : t65 = $[200];
+	}), $[190] = activeVariant, $[191] = dataset, $[192] = e2eTime, $[193] = error, $[194] = listenInProgress, $[195] = listenMutations, $[196] = queryInProgress, $[197] = queryResult, $[198] = queryTime, $[199] = t64, $[200] = userApiVersion, $[201] = t65) : t65 = $[201];
 	let t66;
-	$[201] !== t50 || $[202] !== t63 || $[203] !== t65 ? (t66 = /* @__PURE__ */ jsx(Box, {
+	$[202] !== t50 || $[203] !== t63 || $[204] !== t65 ? (t66 = /* @__PURE__ */ jsx(Box, {
 		height: "stretch",
 		flexBasis: "0%",
 		flexGrow: 1,
@@ -2715,52 +3162,52 @@ function VisionGui(props) {
 			minSize: 300,
 			children: [t63, t65]
 		})
-	}), $[201] = t50, $[202] = t63, $[203] = t65, $[204] = t66) : t66 = $[204];
+	}), $[202] = t50, $[203] = t63, $[204] = t65, $[205] = t66) : t66 = $[205];
 	let t67;
-	$[205] === Symbol.for("react.memo_cache_sentinel") ? (t67 = {
+	$[206] === Symbol.for("react.memo_cache_sentinel") ? (t67 = {
 		position: "absolute",
 		left: -32,
 		top: "50%",
 		transform: "translateY(-50%)",
 		zIndex: 100,
 		pointerEvents: "auto"
-	}, $[205] = t67) : t67 = $[205];
+	}, $[206] = t67) : t67 = $[206];
 	let t68;
-	$[206] === isQueryRecallCollapsed ? t68 = $[207] : (t68 = () => setIsQueryRecallCollapsed(!isQueryRecallCollapsed), $[206] = isQueryRecallCollapsed, $[207] = t68);
+	$[207] === isQueryRecallCollapsed ? t68 = $[208] : (t68 = () => setIsQueryRecallCollapsed(!isQueryRecallCollapsed), $[207] = isQueryRecallCollapsed, $[208] = t68);
 	let t69;
-	$[208] === Symbol.for("react.memo_cache_sentinel") ? (t69 = {
+	$[209] === Symbol.for("react.memo_cache_sentinel") ? (t69 = {
 		display: "flex",
 		alignItems: "center",
 		height: "100%"
-	}, $[208] = t69) : t69 = $[208];
+	}, $[209] = t69) : t69 = $[209];
 	let t70;
-	$[209] === isQueryRecallCollapsed ? t70 = $[210] : (t70 = /* @__PURE__ */ jsx("div", {
+	$[210] === isQueryRecallCollapsed ? t70 = $[211] : (t70 = /* @__PURE__ */ jsx("div", {
 		style: t69,
 		children: jsx(isQueryRecallCollapsed ? ChevronLeftIcon : ChevronRightIcon, {})
-	}), $[209] = isQueryRecallCollapsed, $[210] = t70);
+	}), $[210] = isQueryRecallCollapsed, $[211] = t70);
 	let t71;
-	$[211] !== t68 || $[212] !== t70 ? (t71 = /* @__PURE__ */ jsx(Button, {
+	$[212] !== t68 || $[213] !== t70 ? (t71 = /* @__PURE__ */ jsx(Button, {
 		mode: "ghost",
 		padding: 2,
 		style: t67,
 		onClick: t68,
 		children: t70
-	}), $[211] = t68, $[212] = t70, $[213] = t71) : t71 = $[213];
+	}), $[212] = t68, $[213] = t70, $[214] = t71) : t71 = $[214];
 	let t72;
-	$[214] === params.parsed ? t72 = $[215] : (t72 = params.parsed || {}, $[214] = params.parsed, $[215] = t72);
+	$[215] === params.parsed ? t72 = $[216] : (t72 = params.parsed || {}, $[215] = params.parsed, $[216] = t72);
 	let t73;
-	$[216] !== generateUrl || $[217] !== getStateFromUrl || $[218] !== query || $[219] !== setStateFromParsedUrl || $[220] !== t72 || $[221] !== url ? (t73 = /* @__PURE__ */ jsx(QueryRecallPaneWrapper, { children: /* @__PURE__ */ jsx(QueryRecall, {
+	$[217] !== generateUrl || $[218] !== getStateFromUrl || $[219] !== query || $[220] !== setStateFromParsedUrl || $[221] !== t72 || $[222] !== url ? (t73 = /* @__PURE__ */ jsx(QueryRecallPaneWrapper, { children: /* @__PURE__ */ jsx(QueryRecall, {
 		url,
 		getStateFromUrl,
 		setStateFromParsedUrl,
 		currentQuery: query,
 		currentParams: t72,
 		generateUrl
-	}) }), $[216] = generateUrl, $[217] = getStateFromUrl, $[218] = query, $[219] = setStateFromParsedUrl, $[220] = t72, $[221] = url, $[222] = t73) : t73 = $[222];
+	}) }), $[217] = generateUrl, $[218] = getStateFromUrl, $[219] = query, $[220] = setStateFromParsedUrl, $[221] = t72, $[222] = url, $[223] = t73) : t73 = $[223];
 	let t74;
-	$[223] !== t71 || $[224] !== t73 ? (t74 = /* @__PURE__ */ jsxs(QueryRecallPaneContainer, { children: [t71, t73] }), $[223] = t71, $[224] = t73, $[225] = t74) : t74 = $[225];
+	$[224] !== t71 || $[225] !== t73 ? (t74 = /* @__PURE__ */ jsxs(QueryRecallPaneContainer, { children: [t71, t73] }), $[224] = t71, $[225] = t73, $[226] = t74) : t74 = $[226];
 	let t75;
-	$[226] !== t49 || $[227] !== t66 || $[228] !== t74 ? (t75 = /* @__PURE__ */ jsx(SplitpaneContainer, {
+	$[227] !== t49 || $[228] !== t66 || $[229] !== t74 ? (t75 = /* @__PURE__ */ jsx(SplitpaneContainer, {
 		flexBasis: "auto",
 		flexGrow: 1,
 		flexShrink: 1,
@@ -2772,21 +3219,21 @@ function VisionGui(props) {
 			primary: "first",
 			children: [t66, t74]
 		})
-	}), $[226] = t49, $[227] = t66, $[228] = t74, $[229] = t75) : t75 = $[229];
+	}), $[227] = t49, $[228] = t66, $[229] = t74, $[230] = t75) : t75 = $[230];
 	let t76;
-	return $[230] !== t48 || $[231] !== t75 ? (t76 = /* @__PURE__ */ jsxs(Root, {
+	return $[231] !== t48 || $[232] !== t75 ? (t76 = /* @__PURE__ */ jsxs(Root, {
 		flexDirection: "column",
 		height: "100%",
 		ref: visionRootRef,
 		overflow: "hidden",
 		"data-testid": "vision-root",
 		children: [t48, t75]
-	}), $[230] = t48, $[231] = t75, $[232] = t76) : t76 = $[232], t76;
+	}), $[231] = t48, $[232] = t75, $[233] = t76) : t76 = $[233], t76;
 }
 function _temp2$1(release_0) {
 	return getReleaseIdFromReleaseDocumentId(release_0._id);
 }
-function _temp$1(release) {
+function _temp$2(release) {
 	return isCardinalityOneRelease(release) && release.state === "scheduled";
 }
 function useDatasets(t0) {
@@ -2800,7 +3247,7 @@ function useDatasets(t0) {
 		let t2;
 		if ($[2] !== client.observable.datasets || $[3] !== configDatasets) {
 			let t3;
-			$[5] === configDatasets ? t3 = $[6] : (t3 = (result) => typeof configDatasets == "function" ? configDatasets(result).map(_temp) : result.map(_temp2), $[5] = configDatasets, $[6] = t3), t2 = client.observable.datasets.list().pipe(map$1(t3), catchError(_temp3)), $[2] = client.observable.datasets, $[3] = configDatasets, $[4] = t2;
+			$[5] === configDatasets ? t3 = $[6] : (t3 = (result) => typeof configDatasets == "function" ? configDatasets(result).map(_temp$1) : result.map(_temp2), $[5] = configDatasets, $[6] = t3), t2 = client.observable.datasets.list().pipe(map(t3), catchError(_temp3)), $[2] = client.observable.datasets, $[3] = configDatasets, $[4] = t2;
 		} else t2 = $[4];
 		t1 = t2;
 	}
@@ -2812,7 +3259,7 @@ function _temp3(err) {
 function _temp2(ds) {
 	return ds.name;
 }
-function _temp(d) {
+function _temp$1(d) {
 	return d.name;
 }
 function VisionContainer(props) {
@@ -2840,21 +3287,17 @@ function VisionContainer(props) {
 	}), $[5] = datasetsPromise, $[6] = props, $[7] = t3) : t3 = $[7], t3;
 }
 function LoadedVisionContainer(t0) {
-	let $ = c(17), datasetsPromise, props;
-	$[0] === t0 ? (datasetsPromise = $[1], props = $[2]) : ({datasetsPromise, ...props} = t0, $[0] = t0, $[1] = datasetsPromise, $[2] = props);
-	let loadedDatasets = use(datasetsPromise), t1;
-	$[3] !== loadedDatasets || $[4] !== props.client ? (t1 = loadedDatasets instanceof Error ? [props.client.config().dataset || "production"] : loadedDatasets, $[3] = loadedDatasets, $[4] = props.client, $[5] = t1) : t1 = $[5];
-	let datasets = t1, t2;
-	$[6] === props.client ? t2 = $[7] : (t2 = props.client.config(), $[6] = props.client, $[7] = t2);
-	let projectId = t2.projectId, t3;
-	$[8] !== datasets || $[9] !== props.client || $[10] !== props.config.defaultDataset ? (t3 = props.config.defaultDataset || props.client.config().dataset || datasets[0], $[8] = datasets, $[9] = props.client, $[10] = props.config.defaultDataset, $[11] = t3) : t3 = $[11];
-	let defaultDataset = t3, t4;
-	return $[12] !== datasets || $[13] !== defaultDataset || $[14] !== projectId || $[15] !== props ? (t4 = /* @__PURE__ */ jsx(VisionGui, {
-		...props,
-		datasets,
-		projectId,
-		defaultDataset
-	}, projectId), $[12] = datasets, $[13] = defaultDataset, $[14] = projectId, $[15] = props, $[16] = t4) : t4 = $[16], t4;
+	let $ = c(11), { children, client, config, datasetsPromise } = t0, loadedDatasets = use(datasetsPromise), T0, t1, t2;
+	if ($[0] !== children || $[1] !== client || $[2] !== config.defaultDataset || $[3] !== loadedDatasets) {
+		let clientConfig = client.config(), datasets = loadedDatasets instanceof Error ? [clientConfig.dataset || "production"] : loadedDatasets, projectId = clientConfig.projectId || "default", defaultDataset = config.defaultDataset || clientConfig.dataset || datasets[0];
+		T0 = Fragment, t1 = projectId, t2 = children({
+			datasets,
+			projectId,
+			defaultDataset
+		}), $[0] = children, $[1] = client, $[2] = config.defaultDataset, $[3] = loadedDatasets, $[4] = T0, $[5] = t1, $[6] = t2;
+	} else T0 = $[4], t1 = $[5], t2 = $[6];
+	let t3;
+	return $[7] !== T0 || $[8] !== t1 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsx(T0, { children: t2 }, t1), $[7] = T0, $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10], t3;
 }
 /**
 * @internal
@@ -2869,10 +3312,12 @@ var VisionErrorBoundary = class extends Component {
 	static getDerivedStateFromError(error) {
 		return { error: error instanceof Error ? error.message : `${error}` };
 	}
-	handleRetryRender = () => this.setState((prev) => ({
-		error: null,
-		numRetries: prev.numRetries + 1
-	}));
+	handleRetryRender = () => {
+		this.props.onRetry?.(), this.setState((prev) => ({
+			error: null,
+			numRetries: prev.numRetries + 1
+		}));
+	};
 	handleRetryWithCacheClear = () => {
 		clearLocalStorage(), this.handleRetryRender();
 	};
@@ -2922,8 +3367,173 @@ var VisionErrorBoundary = class extends Component {
 		});
 	}
 };
+/**
+* A `lazy()` component whose failed import can be tried again. React keeps a rejected `lazy()`
+* for good, so `retry` (for the error boundary's Retry) swaps in a fresh one. The rejected one
+* stays until then: swapped as soon as the import fails, the Suspense boundary's next render
+* would start another import instead of surfacing the error, so a chunk that keeps failing
+* would be fetched over and over and never reach the error boundary.
+*/
+function createRetryableLazy(load) {
+	let failed = !1, attempt = () => load().catch((error) => {
+		throw failed = !0, error;
+	}), LazyComponent = lazy(attempt);
+	function RetryableLazy(props) {
+		let $ = c(2), t0;
+		return $[0] === props ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(LazyComponent, { ...props }), $[0] = props, $[1] = t0), t0;
+	}
+	return {
+		Component: RetryableLazy,
+		retry: () => {
+			failed && (failed = !1, LazyComponent = lazy(attempt));
+		}
+	};
+}
+const TOAST_ID = "vision-redesign-invitation";
+/**
+* The toast's body. It renders in the studio's toast layer, which can sit outside the locale
+* provider that has Vision's strings, so it is handed them translated
+*/
+function RedesignToastActions(props) {
+	let $ = c(14), { description, acceptLabel, dismissLabel, onAccept, onDismiss } = props, t0;
+	$[0] === description ? t0 = $[1] : (t0 = /* @__PURE__ */ jsx(Text, {
+		size: 1,
+		children: description
+	}), $[0] = description, $[1] = t0);
+	let t1;
+	$[2] !== acceptLabel || $[3] !== onAccept ? (t1 = /* @__PURE__ */ jsx(Button, {
+		"data-testid": "vision-redesign-accept",
+		fontSize: 1,
+		onClick: onAccept,
+		padding: 2,
+		text: acceptLabel,
+		tone: "primary"
+	}), $[2] = acceptLabel, $[3] = onAccept, $[4] = t1) : t1 = $[4];
+	let t2;
+	$[5] !== dismissLabel || $[6] !== onDismiss ? (t2 = /* @__PURE__ */ jsx(Button, {
+		"data-testid": "vision-redesign-dismiss",
+		fontSize: 1,
+		mode: "bleed",
+		onClick: onDismiss,
+		padding: 2,
+		text: dismissLabel
+	}), $[5] = dismissLabel, $[6] = onDismiss, $[7] = t2) : t2 = $[7];
+	let t3;
+	$[8] !== t1 || $[9] !== t2 ? (t3 = /* @__PURE__ */ jsxs(Flex, {
+		gap: 2,
+		children: [t1, t2]
+	}), $[8] = t1, $[9] = t2, $[10] = t3) : t3 = $[10];
+	let t4;
+	return $[11] !== t0 || $[12] !== t3 ? (t4 = /* @__PURE__ */ jsxs(Stack, {
+		gap: 3,
+		paddingTop: 1,
+		children: [t0, t3]
+	}), $[11] = t0, $[12] = t3, $[13] = t4) : t4 = $[13], t4;
+}
+/**
+* Invites the user to try the redesigned Vision. Renders nothing itself: it pushes a persistent
+* toast while mounted and removes it again on unmount, so it disappears as soon as the user opts
+* in or leaves the tool.
+*/
+function RedesignToast(t0) {
+	let $ = c(8), { onAccept, onDismiss } = t0, toast = useToast(), { t } = useTranslation(visionLocaleNamespace), accept = useEffectEvent(onAccept), dismiss = useEffectEvent(onDismiss), t1;
+	$[0] !== accept || $[1] !== dismiss || $[2] !== t || $[3] !== toast ? (t1 = () => {
+		let remove = () => {
+			toast.push({
+				id: TOAST_ID,
+				duration: .01
+			});
+		};
+		return toast.push({
+			id: TOAST_ID,
+			closable: !1,
+			duration: Infinity,
+			status: "info",
+			title: t("vista.redesign.toast.title"),
+			description: /* @__PURE__ */ jsx(RedesignToastActions, {
+				acceptLabel: t("vista.redesign.toast.accept"),
+				description: t("vista.redesign.toast.description"),
+				dismissLabel: t("vista.redesign.toast.dismiss"),
+				onAccept: () => {
+					remove(), accept();
+				},
+				onDismiss: () => {
+					remove(), dismiss();
+				}
+			})
+		}), remove;
+	}, $[0] = accept, $[1] = dismiss, $[2] = t, $[3] = toast, $[4] = t1) : t1 = $[4];
+	let t2;
+	return $[5] !== t || $[6] !== toast ? (t2 = [t, toast], $[5] = t, $[6] = toast, $[7] = t2) : t2 = $[7], useEffect(t1, t2), null;
+}
+const DEFAULT_PREFERENCE = {
+	optedIn: !1,
+	dismissed: !1
+}, cache = /* @__PURE__ */ new Map(), listeners = /* @__PURE__ */ new Set();
+function storageKey(projectId) {
+	return `${VISION_STORAGE_KEY_PREFIX}redesign:${projectId}`;
+}
+function notify() {
+	listeners.forEach((listener) => listener());
+}
+function subscribe(listener) {
+	listeners.add(listener);
+	let unsubscribeClear = onLocalStorageCleared(() => {
+		cache.clear(), listener();
+	});
+	return () => {
+		listeners.delete(listener), unsubscribeClear();
+	};
+}
+function parsePreference(raw) {
+	if (raw === null) return DEFAULT_PREFERENCE;
+	try {
+		let stored = JSON.parse(raw);
+		return isPlainObject(stored) ? {
+			optedIn: stored.optedIn === !0,
+			dismissed: stored.dismissed === !0
+		} : DEFAULT_PREFERENCE;
+	} catch {
+		return DEFAULT_PREFERENCE;
+	}
+}
+function readRedesignPreference(projectId) {
+	let storage = getStorage(), cached = cache.get(projectId);
+	if (!storage) return cached?.preference ?? DEFAULT_PREFERENCE;
+	let raw = storage.getItem(storageKey(projectId));
+	if (cached && cached.raw === raw) return cached.preference;
+	let preference = parsePreference(raw);
+	return cache.set(projectId, {
+		raw,
+		preference
+	}), preference;
+}
+function writeRedesignPreference(projectId, patch) {
+	let next = {
+		...readRedesignPreference(projectId),
+		...patch
+	}, storage = getStorage(), raw = JSON.stringify(next);
+	try {
+		storage?.setItem(storageKey(projectId), raw);
+	} catch {
+		raw = storage?.getItem(storageKey(projectId)) ?? null;
+	}
+	return cache.set(projectId, {
+		raw,
+		preference: next
+	}), notify(), next;
+}
+function useRedesignPreference(projectId) {
+	let $ = c(2), t0;
+	return $[0] === projectId ? t0 = $[1] : (t0 = () => readRedesignPreference(projectId), $[0] = projectId, $[1] = t0), useSyncExternalStore(subscribe, t0, _temp);
+}
+function _temp() {
+	return DEFAULT_PREFERENCE;
+}
+var SanityVision_exports = /* @__PURE__ */ __exportAll({ default: () => SanityVision });
+const vistaGui = createRetryableLazy(() => import("./VistaGui-DdELkwzW.js").then((module) => ({ default: module.VistaGui }))), VistaGuiLoader = vistaGui.Component;
 function SanityVision(props) {
-	let $ = c(6), t0;
+	let $ = c(31), t0;
 	$[0] === Symbol.for("react.memo_cache_sentinel") ? (t0 = { apiVersion: "1" }, $[0] = t0) : t0 = $[0];
 	let client = useClient(t0), t1;
 	$[1] === props.tool.options ? t1 = $[2] : (t1 = {
@@ -2931,11 +3541,47 @@ function SanityVision(props) {
 		...props.tool.options
 	}, $[1] = props.tool.options, $[2] = t1);
 	let config = t1, t2;
-	return $[3] !== client || $[4] !== config ? (t2 = /* @__PURE__ */ jsx(VisionErrorBoundary, { children: /* @__PURE__ */ jsx(VisionContainer, {
+	$[3] === client ? t2 = $[4] : (t2 = client.config().projectId || "default", $[3] = client, $[4] = t2);
+	let projectId = t2, redesignEnabled = config.beta?.redesign?.enabled === !0, preference = useRedesignPreference(projectId), showRedesign = redesignEnabled && preference.optedIn, t3;
+	$[5] === projectId ? t3 = $[6] : (t3 = () => writeRedesignPreference(projectId, {
+		optedIn: !0,
+		dismissed: !1
+	}), $[5] = projectId, $[6] = t3);
+	let optIn = t3, t4;
+	$[7] === projectId ? t4 = $[8] : (t4 = () => writeRedesignPreference(projectId, { dismissed: !0 }), $[7] = projectId, $[8] = t4);
+	let dismiss = t4, t5;
+	$[9] === projectId ? t5 = $[10] : (t5 = () => writeRedesignPreference(projectId, {
+		optedIn: !1,
+		dismissed: !1
+	}), $[9] = projectId, $[10] = t5);
+	let switchToClassic = t5, t6;
+	$[11] !== client || $[12] !== config || $[13] !== optIn || $[14] !== redesignEnabled || $[15] !== showRedesign || $[16] !== switchToClassic ? (t6 = (loaded) => showRedesign ? /* @__PURE__ */ jsx(VistaGuiLoader, {
+		...loaded,
+		config,
+		onSwitchToClassic: switchToClassic
+	}) : /* @__PURE__ */ jsx(VisionGui, {
+		...loaded,
+		client,
+		config,
+		onSwitchToRedesign: redesignEnabled ? optIn : void 0
+	}), $[11] = client, $[12] = config, $[13] = optIn, $[14] = redesignEnabled, $[15] = showRedesign, $[16] = switchToClassic, $[17] = t6) : t6 = $[17];
+	let t7;
+	$[18] !== client || $[19] !== config || $[20] !== t6 ? (t7 = /* @__PURE__ */ jsx(VisionContainer, {
 		client,
-		config
-	}) }), $[3] = client, $[4] = config, $[5] = t2) : t2 = $[5], t2;
+		config,
+		children: t6
+	}), $[18] = client, $[19] = config, $[20] = t6, $[21] = t7) : t7 = $[21];
+	let t8;
+	$[22] !== dismiss || $[23] !== optIn || $[24] !== preference || $[25] !== redesignEnabled || $[26] !== showRedesign ? (t8 = redesignEnabled && !showRedesign && !preference.dismissed && /* @__PURE__ */ jsx(RedesignToast, {
+		onAccept: optIn,
+		onDismiss: dismiss
+	}), $[22] = dismiss, $[23] = optIn, $[24] = preference, $[25] = redesignEnabled, $[26] = showRedesign, $[27] = t8) : t8 = $[27];
+	let t9;
+	return $[28] !== t7 || $[29] !== t8 ? (t9 = /* @__PURE__ */ jsxs(VisionErrorBoundary, {
+		onRetry: vistaGui.retry,
+		children: [t7, t8]
+	}), $[28] = t7, $[29] = t8, $[30] = t9) : t9 = $[30], t9;
 }
-export { SanityVision as default };
+export { VARIANTS_API_VERSION as A, getActivePerspective as C, resultJsonExtensions as D, paramsExtensions as E, API_VERSIONS as O, encodeQueryString as S, groqExtensions as T, VISION_STORAGE_KEY_PREFIX as _, getAtKeypath as a, isPlainObject as b, DelayedSpinner as c, getJsonBlobUrl as d, SanityVision as default, useSavedQueries as f, validateApiVersion as g, parseQueryUrl as h, describeKeypath as i, prefixApiVersion as j, DEFAULT_API_VERSION as k, canEncodeCsv as l, isApiCdnHost as m, createRetryableLazy as n, QueryErrorDialog as o, parseParams as p, ResultView as r, isApiVersionBelow as s, SanityVision_exports as t, getCsvBlobUrl as u, getStorage as v, VisionCodeMirror as w, isVisionPasteTarget as x, onLocalStorageCleared as y };
 
-//# sourceMappingURL=SanityVision-CzPeT0iH.js.map
+//# sourceMappingURL=SanityVision-egTyQq4i.js.map