@sanity/vision/lib/_chunks-es/SanityVision.mjs.map

Sanity plugin for running/debugging GROQ-queries against Sanity datasets

{"version":3,"file":"SanityVision.mjs","sources":["../../src/apiVersions.ts","../../src/components/DelayedSpinner.tsx","../../src/codemirror/extensions.ts","../../src/codemirror/useCodemirrorTheme.ts","../../src/codemirror/VisionCodeMirror.styled.tsx","../../src/codemirror/VisionCodeMirror.tsx","../../src/perspectives.ts","../../src/util/encodeQueryString.ts","../../src/util/isPlainObject.ts","../../src/util/localStorage.ts","../../src/util/parseApiQueryString.ts","../../src/util/prefixApiVersion.ts","../../src/util/validateApiVersion.ts","../../src/util/tryParseParams.ts","../../src/components/VisionGui.styled.tsx","../../src/components/ParamsEditor.tsx","../../src/components/usePaneSize.ts","../../src/components/VisionGuiControls.tsx","../../src/components/PerspectivePopover.styled.tsx","../../src/components/PerspectivePopover.tsx","../../src/components/VisionGuiHeader.tsx","../../src/util/getBlobUrl.ts","../../src/components/QueryErrorDialog.styled.tsx","../../src/components/QueryErrorDetails.tsx","../../src/components/QueryErrorDialog.tsx","../../src/components/ResultView.styled.tsx","../../src/components/ResultView.tsx","../../src/components/SaveResultButtons.tsx","../../src/components/VisionGuiResult.tsx","../../src/components/VisionGui.tsx","../../src/hooks/useDatasets.ts","../../src/containers/VisionContainer.tsx","../../src/containers/VisionErrorBoundary.tsx","../../src/SanityVision.tsx"],"sourcesContent":["export const API_VERSIONS = [\n  'v1',\n  'vX',\n  'v2021-03-25',\n  'v2021-10-21',\n  'v2022-03-07',\n  'v2025-02-19',\n  `v${new Date().toISOString().split('T')[0]}`,\n]\nexport const [DEFAULT_API_VERSION] = API_VERSIONS.slice(-1)\n","import {Spinner} from '@sanity/ui'\nimport {useEffect, useState} from 'react'\n\ninterface DelayedSpinnerProps {\n  delay?: number\n}\n\n// Waits for X ms before showing a spinner\nexport function DelayedSpinner(props: DelayedSpinnerProps) {\n  const [show, setShow] = useState(false)\n\n  useEffect(() => {\n    const timer = setTimeout(() => setShow(true), props.delay || 500)\n    return () => clearTimeout(timer)\n  }, [props.delay])\n\n  return show ? <Spinner muted size={4} /> : null\n}\n","import {closeBrackets} from '@codemirror/autocomplete'\nimport {defaultKeymap, history, historyKeymap} from '@codemirror/commands'\nimport {javascriptLanguage} from '@codemirror/lang-javascript'\nimport {\n  bracketMatching,\n  defaultHighlightStyle,\n  indentOnInput,\n  syntaxHighlighting,\n} from '@codemirror/language'\nimport {highlightSelectionMatches} from '@codemirror/search'\nimport {type Extension} from '@codemirror/state'\nimport {\n  drawSelection,\n  highlightActiveLine,\n  highlightActiveLineGutter,\n  highlightSpecialChars,\n  keymap,\n  lineNumbers,\n} from '@codemirror/view'\n\nexport const codemirrorExtensions: Extension[] = [\n  [javascriptLanguage],\n  lineNumbers(),\n  highlightActiveLine(),\n  highlightActiveLineGutter(),\n  highlightSelectionMatches(),\n  highlightSpecialChars(),\n  indentOnInput(),\n  bracketMatching(),\n  closeBrackets(),\n  history(),\n  drawSelection(),\n  syntaxHighlighting(defaultHighlightStyle, {fallback: true}),\n  keymap.of(\n    [\n      // Override the default keymap for Mod-Enter to not insert a new line, we have a custom event handler for executing queries\n      {key: 'Mod-Enter', run: () => true},\n\n      // Add the default keymap and history keymap\n      defaultKeymap,\n      historyKeymap,\n    ]\n      .flat()\n      .filter(Boolean),\n  ),\n]\n","import {HighlightStyle, syntaxHighlighting} from '@codemirror/language'\nimport {EditorView} from '@codemirror/view'\nimport {tags as t} from '@lezer/highlight'\nimport {hues} from '@sanity/color'\nimport {rem, type Theme} from '@sanity/ui'\nimport {useMemo} from 'react'\n\nexport function useCodemirrorTheme(theme: Theme) {\n  const cmTheme = useMemo(() => createTheme(theme), [theme])\n  const cmHighlight = useMemo(() => syntaxHighlighting(createHighlight(theme)), [theme])\n\n  return [cmTheme, cmHighlight]\n}\n\nfunction createTheme(theme: Theme) {\n  const {color, fonts} = theme.sanity\n  const card = color.card.enabled\n  const cursor = hues.blue[color.dark ? 400 : 500].hex\n  const selection = hues.gray[theme.sanity.color.dark ? 900 : 100].hex\n\n  return EditorView.theme(\n    {\n      '&': {\n        color: card.fg,\n        backgroundColor: card.bg,\n      },\n\n      '.cm-content': {\n        caretColor: cursor,\n      },\n\n      '.cm-editor': {\n        fontFamily: fonts.code.family,\n        fontSize: rem(fonts.code.sizes[1].fontSize),\n        lineHeight: 'inherit',\n      },\n\n      '.cm-cursor, .cm-dropCursor': {borderLeftColor: cursor},\n      '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {\n        backgroundColor: selection,\n      },\n\n      '.cm-panels': {backgroundColor: card.bg, color: card.fg},\n      '.cm-panels.cm-panels-top': {borderBottom: `2px solid ${card.border}`},\n      '.cm-panels.cm-panels-bottom': {borderTop: `2px solid ${card.border}`},\n    },\n    {dark: color.dark},\n  )\n}\n\nfunction createHighlight(theme: Theme) {\n  const c = theme.sanity.color.base\n  const s = theme.sanity.color.syntax\n  return HighlightStyle.define([\n    {tag: t.keyword, color: s.keyword},\n    {tag: [t.propertyName, t.name, t.deleted, t.character, t.macroName], color: s.property},\n    {tag: [t.function(t.variableName), t.labelName], color: s.function},\n    {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: s.variable},\n    {tag: [t.definition(t.name), t.separator], color: s.constant},\n    {\n      tag: [\n        t.typeName,\n        t.className,\n        t.number,\n        t.changed,\n        t.annotation,\n        t.modifier,\n        t.self,\n        t.namespace,\n      ],\n      color: s.number,\n    },\n    {\n      tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n      color: s.operator,\n    },\n    {tag: [t.meta, t.comment], color: s.comment},\n    {tag: t.strong, fontWeight: 'bold'},\n    {tag: t.emphasis, fontStyle: 'italic'},\n    {tag: t.strikethrough, textDecoration: 'line-through'},\n    {tag: t.heading, fontWeight: 'bold', color: s.property},\n    {tag: [t.atom, t.bool, t.special(t.variableName)], color: s.boolean},\n    {tag: [t.processingInstruction, t.string, t.inserted], color: s.string},\n    {tag: t.invalid, color: c.fg},\n  ])\n}\n","import {rem} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const EditorRoot = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  height: 100%;\n  overflow: hidden;\n  overflow: clip;\n  position: relative;\n  display: flex;\n\n  & .cm-theme {\n    width: 100%;\n  }\n\n  & .cm-editor {\n    height: 100%;\n\n    font-size: 16px;\n    line-height: 21px;\n  }\n\n  & .cm-line {\n    padding-left: ${({theme}) => rem(theme.sanity.space[3])};\n  }\n\n  & .cm-content {\n    border-right-width: ${({theme}) => rem(theme.sanity.space[4])} !important;\n    padding-top: ${({theme}) => rem(theme.sanity.space[5])};\n  }\n`\n","import {useTheme} from '@sanity/ui'\nimport CodeMirror, {\n  EditorSelection,\n  type ReactCodeMirrorProps,\n  type ReactCodeMirrorRef,\n} from '@uiw/react-codemirror'\nimport {forwardRef, useCallback, useImperativeHandle, useRef, useState} from 'react'\n\nimport {codemirrorExtensions} from './extensions'\nimport {useCodemirrorTheme} from './useCodemirrorTheme'\nimport {EditorRoot} from './VisionCodeMirror.styled'\n\nexport interface VisionCodeMirrorHandle {\n  resetEditorContent: (newContent: string) => void\n}\n\nexport const VisionCodeMirror = forwardRef<\n  VisionCodeMirrorHandle,\n  Pick<ReactCodeMirrorProps, 'onChange'> & {\n    initialValue: ReactCodeMirrorProps['value']\n  }\n>((props, ref) => {\n  // The value prop is only passed for initial value, and is not updated when the parent component updates the value.\n  // If you need to update the value, use the resetEditorContent function.\n  const [initialValue] = useState(props.initialValue)\n  const sanityTheme = useTheme()\n  const theme = useCodemirrorTheme(sanityTheme)\n  const codeMirrorRef = useRef<ReactCodeMirrorRef>(null)\n\n  const resetEditorContent = useCallback((newContent: string) => {\n    const editorView = codeMirrorRef.current?.view\n    if (!editorView) return\n\n    const currentDoc = editorView.state.doc.toString()\n    if (newContent !== currentDoc) {\n      editorView.dispatch({\n        changes: {from: 0, to: currentDoc.length, insert: newContent},\n        selection: EditorSelection.cursor(newContent.length), // Place cursor at end\n      })\n    }\n  }, [])\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      resetEditorContent,\n    }),\n    [resetEditorContent],\n  )\n\n  return (\n    <EditorRoot>\n      <CodeMirror\n        ref={codeMirrorRef}\n        basicSetup={false}\n        theme={theme}\n        extensions={codemirrorExtensions}\n        value={initialValue}\n        onChange={props.onChange}\n      />\n    </EditorRoot>\n  )\n})\n\n// Add display name\nVisionCodeMirror.displayName = 'VisionCodeMirror'\n","import {type ClientPerspective} from '@sanity/client'\nimport isEqual from 'react-fast-compare'\nimport {type PerspectiveContextValue} from 'sanity'\n\nexport const SUPPORTED_PERSPECTIVES = ['pinnedRelease', 'raw', 'published', 'drafts'] as const\n\nexport type SupportedPerspective = (typeof SUPPORTED_PERSPECTIVES)[number]\n\n/**\n * Virtual perspectives are recognised by Vision, but do not concretely reflect the names of real\n * perspectives. Virtual perspectives are transformed into real perspectives before being used to\n * interact with data.\n *\n * For example, the `pinnedRelease` virtual perspective is transformed to the real perspective\n * currently pinned in Studio.\n */\nexport const VIRTUAL_PERSPECTIVES = ['pinnedRelease'] as const\n\nexport type VirtualPerspective = (typeof VIRTUAL_PERSPECTIVES)[number]\n\nexport function isSupportedPerspective(p: string): p is SupportedPerspective {\n  return SUPPORTED_PERSPECTIVES.includes(p as SupportedPerspective)\n}\n\nexport function isVirtualPerspective(\n  maybeVirtualPerspective: unknown,\n): maybeVirtualPerspective is VirtualPerspective {\n  return (\n    typeof maybeVirtualPerspective === 'string' &&\n    VIRTUAL_PERSPECTIVES.includes(maybeVirtualPerspective as VirtualPerspective)\n  )\n}\n\nexport function hasPinnedPerspective({selectedPerspectiveName}: PerspectiveContextValue): boolean {\n  return typeof selectedPerspectiveName !== 'undefined'\n}\n\nexport function hasPinnedPerspectiveChanged(\n  previous: PerspectiveContextValue,\n  next: PerspectiveContextValue,\n): boolean {\n  const hasPerspectiveStackChanged = !isEqual(previous.perspectiveStack, next.perspectiveStack)\n\n  return (\n    previous.selectedPerspectiveName !== next.selectedPerspectiveName || hasPerspectiveStackChanged\n  )\n}\n\nexport function getActivePerspective({\n  visionPerspective,\n  perspectiveStack,\n}: {\n  visionPerspective: ClientPerspective | SupportedPerspective | undefined\n  perspectiveStack: PerspectiveContextValue['perspectiveStack']\n}): ClientPerspective | undefined {\n  if (visionPerspective !== 'pinnedRelease') {\n    return visionPerspective\n  }\n  return perspectiveStack\n}\n","export function encodeQueryString(\n  query: string,\n  params: Record<string, unknown> = {},\n  options: Record<string, string | string[]> = {},\n): string {\n  const searchParams = new URLSearchParams()\n  searchParams.set('query', query)\n\n  for (const [key, value] of Object.entries(params)) {\n    searchParams.set(`$${key}`, JSON.stringify(value))\n  }\n\n  for (const [key, value] of Object.entries(options)) {\n    if (value) searchParams.set(key, `${value}`)\n  }\n\n  return `?${searchParams}`\n}\n","export function isPlainObject(obj: unknown): obj is Record<string, unknown> {\n  return (\n    !!obj && typeof obj === 'object' && Object.prototype.toString.call(obj) === '[object Object]'\n  )\n}\n","import {isPlainObject} from './isPlainObject'\n\nconst hasLocalStorage = supportsLocalStorage()\nconst keyPrefix = 'sanityVision:'\n\nexport interface LocalStorageish {\n  get: <T>(key: string, defaultVal: T) => T\n  set: <T>(key: string, value: T) => T\n  merge: <T>(props: T) => T\n}\n\nexport function clearLocalStorage() {\n  if (!hasLocalStorage) {\n    return\n  }\n\n  for (let i = 0; i < localStorage.length; i++) {\n    const key = localStorage.key(i)\n    if (key?.startsWith(keyPrefix)) {\n      localStorage.removeItem(key)\n    }\n  }\n}\n\nexport function getLocalStorage(namespace: string): LocalStorageish {\n  const storageKey = `${keyPrefix}${namespace}`\n  let loadedState: Record<string, unknown> | null = null\n\n  return {get, set, merge}\n\n  function get<T>(key: string, defaultVal: T): T {\n    const state = ensureState()\n    return typeof state[key] === 'undefined' ? defaultVal : (state[key] as T)\n  }\n\n  function set<T>(key: string, value: T): T {\n    const state = ensureState()\n    state[key] = value\n    localStorage.setItem(storageKey, JSON.stringify(loadedState))\n    return value\n  }\n\n  function merge<T>(props: T): T {\n    const state = {...ensureState(), ...props}\n    localStorage.setItem(storageKey, JSON.stringify(state))\n    return state\n  }\n\n  function ensureState(): Record<string, unknown> {\n    if (loadedState === null) {\n      loadedState = loadState()\n    }\n\n    return loadedState\n  }\n\n  function loadState() {\n    if (!hasLocalStorage) {\n      return {}\n    }\n\n    try {\n      const stored = JSON.parse(localStorage.getItem(storageKey) || '{}')\n      return isPlainObject(stored) ? stored : {}\n    } catch (err) {\n      return {}\n    }\n  }\n}\n\nfunction supportsLocalStorage() {\n  const mod = 'lsCheck'\n  try {\n    localStorage.setItem(mod, mod)\n    localStorage.removeItem(mod)\n    return true\n  } catch (err) {\n    return false\n  }\n}\n","export interface ParsedApiQueryString {\n  query: string\n  params: Record<string, unknown>\n  options: Record<string, string>\n}\n\nexport function parseApiQueryString(qs: URLSearchParams): ParsedApiQueryString {\n  const params: Record<string, unknown> = {}\n  const options: Record<string, string> = {}\n\n  for (const [key, value] of qs.entries()) {\n    if (key[0] === '$') {\n      params[key.slice(1)] = JSON.parse(value)\n      continue\n    }\n\n    if (key === 'perspective') {\n      options[key] = value\n      continue\n    }\n  }\n\n  return {query: qs.get('query') || '', params, options}\n}\n","export function prefixApiVersion(version: string): string {\n  if (version[0] !== 'v' && version !== 'other') {\n    return `v${version}`\n  }\n\n  return version\n}\n","export function validateApiVersion(apiVersion: string): boolean {\n  const parseableApiVersion = apiVersion.replace(/^v/, '').trim().toUpperCase()\n\n  const isValidApiVersion =\n    parseableApiVersion.length > 0 &&\n    (parseableApiVersion === 'X' ||\n      parseableApiVersion === '1' ||\n      (/^\\d{4}-\\d{2}-\\d{2}$/.test(parseableApiVersion) && !isNaN(Date.parse(parseableApiVersion))))\n\n  return isValidApiVersion\n}\n","import JSON5 from 'json5'\nimport {type TFunction} from 'sanity'\n\nexport function tryParseParams(\n  val: string,\n  t: TFunction<'vision', undefined>,\n): Record<string, unknown> | Error {\n  try {\n    const parsed = val ? JSON5.parse(val) : {}\n    return typeof parsed === 'object' && parsed && !Array.isArray(parsed) ? parsed : {}\n  } catch (err) {\n    // JSON5 always prefixes the error message with JSON5:, so we remove it\n    // to clean up the error tooltip\n    err.message = `${t('params.error.params-invalid-json')}:\\n\\n${err.message.replace(\n      'JSON5:',\n      '',\n    )}`\n    return err\n  }\n}\n","import {Box, Card, Flex, Label, rem, Text} from '@sanity/ui'\nimport {css, styled} from 'styled-components'\n\nexport const Root = styled(Flex)`\n  .sidebarPanes .Pane {\n    overflow-y: auto;\n    overflow-x: hidden;\n  }\n\n  & .Resizer {\n    background: var(--card-border-color);\n    opacity: 1;\n    z-index: 1;\n    box-sizing: border-box;\n    background-clip: padding-box;\n    border: solid transparent;\n  }\n\n  & .Resizer:hover {\n    border-color: var(--card-shadow-ambient-color);\n  }\n\n  & .Resizer.horizontal {\n    height: 11px;\n    margin: -5px 0;\n    border-width: 5px 0;\n    cursor: row-resize;\n    width: 100%;\n    z-index: 4;\n  }\n\n  & .Resizer.vertical {\n    width: 11px;\n    margin: 0 -5px;\n    border-width: 0 5px;\n    cursor: col-resize;\n    z-index: 2; /* To prevent the resizer from being hidden behind CodeMirror scroll area */\n  }\n\n  .Resizer.disabled {\n    cursor: not-allowed;\n  }\n\n  .Resizer.disabled:hover {\n    border-color: transparent;\n  }\n`\n\nRoot.displayName = 'Root'\n\nexport const Header = styled(Card)`\n  border-bottom: 1px solid var(--card-border-color);\n`\n\nexport const StyledLabel = styled(Label)`\n  flex: 1;\n`\n\nexport const SplitpaneContainer = styled(Box)`\n  position: relative;\n`\n\nexport const QueryCopyLink = styled.a`\n  cursor: pointer;\n  margin-right: auto;\n`\n\nexport const InputBackgroundContainer = styled(Box)`\n  position: absolute;\n  top: 1rem;\n  left: 0;\n  padding: 0;\n  margin: 0;\n  z-index: 10;\n  right: 0;\n\n  ${StyledLabel} {\n    user-select: none;\n  }\n`\n\nexport const InputBackgroundContainerLeft = styled(InputBackgroundContainer)`\n  // This is so its aligned with the gutters of CodeMirror\n  left: 33px;\n`\n\nexport const InputContainer = styled(Card)`\n  width: 100%;\n  height: 100%;\n  position: relative;\n  flex-direction: column;\n`\n\nexport const ResultOuterContainer = styled(Flex)`\n  height: 100%;\n`\n\nexport const ResultInnerContainer = styled(Box)`\n  position: relative;\n`\n\nexport const ResultContainer = styled(Card)<{$isInvalid: boolean}>`\n  height: 100%;\n  width: 100%;\n  position: absolute;\n  max-width: 100%;\n\n  ${({$isInvalid}) =>\n    $isInvalid &&\n    css`\n      &:after {\n        background-color: var(--card-bg-color);\n        content: '';\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 100%;\n      }\n    `}\n`\n\nexport const Result = styled(Box)`\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 20;\n`\n\nexport const ResultFooter = styled(Flex)`\n  border-top: 1px solid var(--card-border-color);\n`\n\nexport const TimingsCard = styled(Card)`\n  position: relative;\n`\n\nexport const TimingsContainer = styled(Box)`\n  width: 100%;\n  height: 100%;\n`\n\nexport const TimingsTextContainer = styled(Flex)`\n  height: 100%;\n  min-height: ${({theme}) =>\n    rem(\n      theme.sanity.space[3] * 2 +\n        theme.sanity.fonts.text.sizes[2].lineHeight -\n        theme.sanity.fonts.text.sizes[2].ascenderHeight -\n        theme.sanity.fonts.text.sizes[2].descenderHeight,\n    )};\n`\n\nexport const DownloadsCard = styled(Card)`\n  position: relative;\n`\n\nexport const SaveResultLabel = styled(Text)`\n  transform: initial;\n  &:before,\n  &:after {\n    content: none;\n  }\n  > span {\n    display: flex !important;\n    gap: ${({theme}) => rem(theme.sanity.space[3])};\n    align-items: center;\n  }\n`\n\nexport const ControlsContainer = styled(Box)`\n  border-top: 1px solid var(--card-border-color);\n`\n","import {ErrorOutlineIcon} from '@sanity/icons'\nimport {Box, Card, Flex, Text, Tooltip} from '@sanity/ui'\nimport {debounce} from 'lodash'\nimport {type RefObject, useCallback, useEffect, useMemo, useState} from 'react'\nimport {type TFunction, useTranslation} from 'sanity'\n\nimport {VisionCodeMirror, type VisionCodeMirrorHandle} from '../codemirror/VisionCodeMirror'\nimport {visionLocaleNamespace} from '../i18n'\nimport {tryParseParams} from '../util/tryParseParams'\nimport {type Params} from './VisionGui'\nimport {InputBackgroundContainerLeft, StyledLabel} from './VisionGui.styled'\n\nconst defaultValue = `{\\n  \\n}`\n\nexport interface ParamsEditorProps {\n  value: string\n  onChange: (changeEvt: Params) => void\n  paramsError: string | undefined\n  hasValidParams: boolean\n  editorRef: RefObject<VisionCodeMirrorHandle | null>\n}\n\nexport interface ParamsEditorChange {\n  valid: boolean\n}\n\nexport function ParamsEditor(props: ParamsEditorProps) {\n  const {onChange, paramsError, hasValidParams, editorRef} = props\n  const {t} = useTranslation(visionLocaleNamespace)\n  const {raw: value, error, parsed, valid} = parseParams(props.value, t)\n  const [isValid, setValid] = useState(valid)\n  const [init, setInit] = useState(false)\n\n  // Emit onChange on very first render\n  useEffect(() => {\n    if (!init) {\n      onChange({parsed, raw: value, valid: isValid, error})\n      setInit(true)\n    }\n  }, [error, init, isValid, onChange, parsed, value])\n\n  const handleChangeRaw = useCallback(\n    (newValue: string) => {\n      const event = parseParams(newValue, t)\n      setValid(event.valid)\n      onChange(event)\n    },\n    [onChange, t],\n  )\n\n  const handleChange = useMemo(() => debounce(handleChangeRaw, 333), [handleChangeRaw])\n  return (\n    <Card flex={1} tone={hasValidParams ? 'default' : 'critical'} data-testid=\"params-editor\">\n      <InputBackgroundContainerLeft>\n        <Flex>\n          <StyledLabel muted>{t('params.label')}</StyledLabel>\n          {paramsError && (\n            <Tooltip animate placement=\"top\" portal content={<Text size={1}>{paramsError}</Text>}>\n              <Box padding={1} marginX={2}>\n                <Text>\n                  <ErrorOutlineIcon />\n                </Text>\n              </Box>\n            </Tooltip>\n          )}\n        </Flex>\n      </InputBackgroundContainerLeft>\n      <VisionCodeMirror\n        ref={editorRef}\n        initialValue={props.value || defaultValue}\n        onChange={handleChange}\n      />\n    </Card>\n  )\n}\n\nexport function parseParams(\n  value: string,\n  t: TFunction<typeof visionLocaleNamespace, undefined>,\n): Params {\n  const parsedParams = tryParseParams(value, t)\n  const params = parsedParams instanceof Error ? {} : parsedParams\n  const validationError = parsedParams instanceof Error ? parsedParams.message : undefined\n  const isValid = !validationError\n\n  return {\n    parsed: params,\n    raw: value,\n    valid: isValid,\n    error: validationError,\n  }\n}\n","import {useEffect, useState} from 'react'\n\ninterface PaneSizeOptions {\n  defaultSize: number\n  size?: number\n  allowResize: boolean\n  minSize: number\n  maxSize: number\n}\nfunction narrowBreakpoint(): boolean {\n  return typeof window !== 'undefined' && window.innerWidth > 600\n}\n\nfunction calculatePaneSizeOptions(height: number | undefined): PaneSizeOptions {\n  let rootHeight = height\n\n  if (!rootHeight) {\n    // Initial root height without header\n    rootHeight =\n      typeof window !== 'undefined' && typeof document !== 'undefined'\n        ? document.body.getBoundingClientRect().height - 60\n        : 0\n  }\n  return {\n    defaultSize: rootHeight / (narrowBreakpoint() ? 2 : 1),\n    size: rootHeight > 550 ? undefined : rootHeight * 0.4,\n    allowResize: rootHeight > 550,\n    minSize: Math.min(170, Math.max(170, rootHeight / 2)),\n    maxSize: rootHeight > 650 ? rootHeight * 0.7 : rootHeight * 0.6,\n  }\n}\n\nexport function usePaneSize({\n  visionRootRef,\n}: {\n  visionRootRef: React.RefObject<HTMLDivElement | null>\n}) {\n  const [isNarrowBreakpoint, setIsNarrowBreakpoint] = useState(() => narrowBreakpoint())\n  const [paneSizeOptions, setPaneSizeOptions] = useState<PaneSizeOptions>(() =>\n    calculatePaneSizeOptions(undefined),\n  )\n\n  useEffect(() => {\n    if (!visionRootRef.current) {\n      return undefined\n    }\n    const handleResize = (entries: ResizeObserverEntry[]) => {\n      setIsNarrowBreakpoint(narrowBreakpoint())\n      const entry = entries?.[0]\n      if (entry) {\n        setPaneSizeOptions(calculatePaneSizeOptions(entry.contentRect.height))\n      }\n    }\n    const resizeObserver = new ResizeObserver(handleResize)\n    resizeObserver.observe(visionRootRef.current)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [visionRootRef])\n\n  return {paneSizeOptions, isNarrowBreakpoint}\n}\n","import {PlayIcon, StopIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Hotkeys, Text, Tooltip} from '@sanity/ui'\nimport {useTranslation} from 'sanity'\n\nimport {visionLocaleNamespace} from '../i18n'\nimport {ControlsContainer} from './VisionGui.styled'\n\nexport interface VisionGuiControlsProps {\n  hasValidParams: boolean\n  queryInProgress: boolean\n  listenInProgress: boolean\n  onQueryExecution: () => void\n  onListenExecution: () => void\n}\n\n/**\n * Vision GUI controls\n * To handle query and listen execution.\n */\nexport function VisionGuiControls({\n  hasValidParams,\n  listenInProgress,\n  queryInProgress,\n  onQueryExecution,\n  onListenExecution,\n}: VisionGuiControlsProps) {\n  const {t} = useTranslation(visionLocaleNamespace)\n\n  return (\n    <ControlsContainer>\n      <Card padding={3} paddingX={3}>\n        <Tooltip\n          content={\n            <Card radius={4}>\n              <Text size={1} muted>\n                {t('params.error.params-invalid-json')}\n              </Text>\n            </Card>\n          }\n          placement=\"top\"\n          disabled={hasValidParams}\n          portal\n        >\n          <Flex justify=\"space-evenly\">\n            <Box flex={1}>\n              <Tooltip\n                content={\n                  <Card radius={4}>\n                    <Hotkeys keys={['Ctrl', 'Enter']} />\n                  </Card>\n                }\n                placement=\"top\"\n                portal\n              >\n                <Button\n                  width=\"fill\"\n                  onClick={onQueryExecution}\n                  type=\"button\"\n                  icon={queryInProgress ? StopIcon : PlayIcon}\n                  disabled={listenInProgress || !hasValidParams}\n                  tone={queryInProgress ? 'positive' : 'primary'}\n                  text={queryInProgress ? t('action.query-cancel') : t('action.query-execute')}\n                />\n              </Tooltip>\n            </Box>\n            <Box flex={1} marginLeft={3}>\n              <Button\n                width=\"fill\"\n                onClick={onListenExecution}\n                type=\"button\"\n                icon={listenInProgress ? StopIcon : PlayIcon}\n                text={listenInProgress ? t('action.listen-cancel') : t('action.listen-execute')}\n                mode=\"ghost\"\n                disabled={!hasValidParams}\n                tone={listenInProgress ? 'positive' : 'default'}\n              />\n            </Box>\n          </Flex>\n        </Tooltip>\n      </Card>\n    </ControlsContainer>\n  )\n}\n","import {Box} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const PerspectivePopoverContent = styled(Box)`\n  /* This limits the width of the popover content */\n  max-width: 240px;\n`\n\nexport const PerspectivePopoverLink = styled.a`\n  cursor: pointer;\n  margin-right: auto;\n`\n","import {HelpCircleIcon} from '@sanity/icons'\nimport {\n  Badge,\n  Box,\n  Button,\n  Card,\n  type CardTone,\n  Inline,\n  Popover,\n  Stack,\n  Text,\n  useClickOutsideEvent,\n} from '@sanity/ui'\nimport {useCallback, useRef, useState} from 'react'\nimport {Translate, useTranslation} from 'sanity'\nimport {styled} from 'styled-components'\n\nimport {visionLocaleNamespace} from '../i18n'\nimport {PerspectivePopoverContent, PerspectivePopoverLink} from './PerspectivePopover.styled'\n\nconst Dot = styled.div<{tone: CardTone}>`\n  width: 4px;\n  height: 4px;\n  border-radius: 3px;\n  box-shadow: 0 0 0 1px var(--card-bg-color);\n  background-color: ${({tone}) => `var(--card-badge-${tone}-dot-color)`};\n`\n\nconst SHOW_DEFAULT_PERSPECTIVE_NOTIFICATION = false\n\nexport function PerspectivePopover() {\n  const [open, setOpen] = useState(false)\n  const buttonRef = useRef<HTMLButtonElement | null>(null)\n  const popoverRef = useRef<HTMLDivElement | null>(null)\n\n  const handleClick = useCallback(() => setOpen((o) => !o), [])\n\n  const {t} = useTranslation(visionLocaleNamespace)\n\n  useClickOutsideEvent(\n    () => setOpen(false),\n    () => [buttonRef.current, popoverRef.current],\n  )\n\n  return (\n    <Popover\n      content={\n        <PerspectivePopoverContent>\n          <Stack space={4}>\n            <Inline space={2}>\n              <Text weight=\"medium\">{t('settings.perspectives.title')}</Text>\n            </Inline>\n\n            <Card>\n              <Text muted>{t('settings.perspectives.description')}</Text>\n            </Card>\n            <Card>\n              <Stack space={2}>\n                <Box>\n                  <Badge tone=\"primary\">{t('label.new')}</Badge>\n                </Box>\n                <Text muted>\n                  <Translate\n                    t={t}\n                    i18nKey=\"settings.perspective.preview-drafts-renamed-to-drafts.description\"\n                  />\n                </Text>\n              </Stack>\n            </Card>\n            {SHOW_DEFAULT_PERSPECTIVE_NOTIFICATION ? (\n              <Card>\n                <Badge tone=\"caution\">{t('label.new')}</Badge>\n                <Card>\n                  <Text muted>\n                    <Translate t={t} i18nKey=\"settings.perspectives.new-default.description\" />\n                  </Text>\n                </Card>\n              </Card>\n            ) : null}\n\n            <Card>\n              <Text>\n                <PerspectivePopoverLink href=\"https://sanity.io/docs/perspectives\" target=\"_blank\">\n                  {t('settings.perspectives.action.docs-link')} &rarr;\n                </PerspectivePopoverLink>\n              </Text>\n            </Card>\n          </Stack>\n        </PerspectivePopoverContent>\n      }\n      placement=\"bottom-start\"\n      portal\n      padding={3}\n      ref={popoverRef}\n      open={open}\n    >\n      <Button\n        icon={HelpCircleIcon}\n        mode=\"bleed\"\n        padding={2}\n        paddingRight={1}\n        tone=\"primary\"\n        fontSize={1}\n        ref={buttonRef}\n        onClick={handleClick}\n        selected={open}\n      >\n        <Dot tone={SHOW_DEFAULT_PERSPECTIVE_NOTIFICATION ? 'caution' : 'primary'} />\n      </Button>\n    </Popover>\n  )\n}\n","import {CopyIcon} from '@sanity/icons'\nimport {Box, Button, Card, Flex, Grid, Inline, Select, Stack, TextInput, Tooltip} from '@sanity/ui'\nimport {\n  type ChangeEvent,\n  type ComponentType,\n  Fragment,\n  type RefObject,\n  useCallback,\n  useMemo,\n  useRef,\n} from 'react'\nimport {type PerspectiveContextValue, type TFunction, usePerspective, useTranslation} from 'sanity'\n\nimport {API_VERSIONS} from '../apiVersions'\nimport {visionLocaleNamespace} from '../i18n'\nimport {\n  hasPinnedPerspective,\n  SUPPORTED_PERSPECTIVES,\n  type SupportedPerspective,\n} from '../perspectives'\nimport {PerspectivePopover} from './PerspectivePopover'\nimport {Header, QueryCopyLink, StyledLabel} from './VisionGui.styled'\n\nconst PinnedReleasePerspectiveOption: ComponentType<{\n  pinnedPerspective: PerspectiveContextValue\n  t: TFunction\n}> = ({pinnedPerspective, t}) => {\n  const name =\n    typeof pinnedPerspective.selectedPerspective === 'object'\n      ? pinnedPerspective.selectedPerspective.metadata.title\n      : pinnedPerspective.selectedPerspectiveName\n\n  const label = hasPinnedPerspective(pinnedPerspective)\n    ? `(${t('settings.perspectives.pinned-release-label')})`\n    : t('settings.perspectives.pinned-release-label')\n\n  const text = useMemo(\n    () => [name, label].filter((value) => typeof value !== 'undefined').join(' '),\n    [label, name],\n  )\n\n  return (\n    <option value=\"pinnedRelease\" disabled={!hasPinnedPerspective(pinnedPerspective)}>\n      {text}\n    </option>\n  )\n}\n\nexport interface VisionGuiHeaderProps {\n  onChangeDataset: (evt: ChangeEvent<HTMLSelectElement>) => void\n  dataset: string\n  customApiVersion: string | false\n  apiVersion: string\n  onChangeApiVersion: (evt: ChangeEvent<HTMLSelectElement>) => void\n  datasets: string[]\n  customApiVersionElementRef: RefObject<HTMLInputElement | null>\n  onCustomApiVersionChange: (evt: ChangeEvent<HTMLInputElement>) => void\n  isValidApiVersion: boolean\n  onChangePerspective: (evt: ChangeEvent<HTMLSelectElement>) => void\n  url?: string\n  perspective?: SupportedPerspective\n}\n\nexport function VisionGuiHeader({\n  onChangeDataset,\n  dataset,\n  customApiVersion,\n  apiVersion,\n  onChangeApiVersion,\n  datasets,\n  customApiVersionElementRef,\n  onCustomApiVersionChange,\n  isValidApiVersion,\n  onChangePerspective,\n  url,\n  perspective,\n}: VisionGuiHeaderProps) {\n  const pinnedPerspective = usePerspective()\n  const {t} = useTranslation(visionLocaleNamespace)\n  const operationUrlElement = useRef<HTMLInputElement | null>(null)\n  const handleCopyUrl = useCallback(() => {\n    const el = operationUrlElement.current\n    if (!el) return\n\n    try {\n      el.select()\n      document.execCommand('copy')\n    } catch (err) {\n      // eslint-disable-next-line no-console\n      console.error('Unable to copy to clipboard :(')\n    }\n  }, [])\n\n  return (\n    <Header paddingX={3} paddingY={2}>\n      <Grid columns={[1, 4, 8, 12]}>\n        {/* Dataset selector */}\n        <Box padding={1} column={2}>\n          <Stack>\n            <Card paddingTop={2} paddingBottom={3}>\n              <StyledLabel>{t('settings.dataset-label')}</StyledLabel>\n            </Card>\n            <Select value={dataset} onChange={onChangeDataset}>\n              {datasets.map((ds: string) => (\n                <option key={ds}>{ds}</option>\n              ))}\n            </Select>\n          </Stack>\n        </Box>\n\n        {/* API version selector */}\n        <Box padding={1} column={2}>\n          <Stack>\n            <Card paddingTop={2} paddingBottom={3}>\n              <StyledLabel>{t('settings.api-version-label')}</StyledLabel>\n            </Card>\n            <Select\n              data-testid=\"api-version-selector\"\n              value={customApiVersion === false ? apiVersion : 'other'}\n              onChange={onChangeApiVersion}\n            >\n              {API_VERSIONS.map((version) => (\n                <option key={version}>{version}</option>\n              ))}\n              <option key=\"other\" value=\"other\">\n                {t('settings.other-api-version-label')}\n              </option>\n            </Select>\n          </Stack>\n        </Box>\n\n        {/* Custom API version input */}\n        {customApiVersion !== false && (\n          <Box padding={1} column={2}>\n            <Stack>\n              <Card paddingTop={2} paddingBottom={3}>\n                <StyledLabel textOverflow=\"ellipsis\">\n                  {t('settings.custom-api-version-label')}\n                </StyledLabel>\n              </Card>\n\n              <TextInput\n                ref={customApiVersionElementRef}\n                value={customApiVersion}\n                onChange={onCustomApiVersionChange}\n                customValidity={\n                  isValidApiVersion ? undefined : t('settings.error.invalid-api-version')\n                }\n                maxLength={11}\n              />\n            </Stack>\n          </Box>\n        )}\n\n        {/* Perspective selector */}\n        <Box padding={1} column={2}>\n          <Stack>\n            <Card paddingBottom={1}>\n              <Inline space={1}>\n                <Box>\n                  <StyledLabel>{t('settings.perspective-label')}</StyledLabel>\n                </Box>\n\n                <Box>\n                  <PerspectivePopover />\n                </Box>\n              </Inline>\n            </Card>\n            <Select value={perspective || 'default'} onChange={onChangePerspective}>\n              {SUPPORTED_PERSPECTIVES.map((perspectiveName) => {\n                if (perspectiveName === 'pinnedRelease') {\n                  return (\n                    <Fragment key=\"pinnedRelease\">\n                      <PinnedReleasePerspectiveOption pinnedPerspective={pinnedPerspective} t={t} />\n                      <option key=\"default\" value=\"default\">\n                        {t('settings.perspectives.default')}\n                      </option>\n                      <hr />\n                    </Fragment>\n                  )\n                }\n                return <option key={perspectiveName}>{perspectiveName}</option>\n              })}\n            </Select>\n          </Stack>\n        </Box>\n\n        {/* Query URL (for copying) */}\n        {typeof url === 'string' ? (\n          <Box padding={1} flex={1} column={customApiVersion === false ? 6 : 4}>\n            <Stack>\n              <Card paddingTop={2} paddingBottom={3}>\n                <StyledLabel>\n                  {t('query.url')}&nbsp;\n                  <QueryCopyLink onClick={handleCopyUrl}>\n                    [{t('action.copy-url-to-clipboard')}]\n                  </QueryCopyLink>\n                </StyledLabel>\n              </Card>\n              <Flex flex={1} gap={1}>\n                <Box flex={1}>\n                  <TextInput readOnly type=\"url\" ref={operationUrlElement} value={url} />\n                </Box>\n                <Tooltip content={t('action.copy-url-to-clipboard')}>\n                  <Button\n                    aria-label={t('action.copy-url-to-clipboard')}\n                    type=\"button\"\n                    mode=\"ghost\"\n                    icon={CopyIcon}\n                    onClick={handleCopyUrl}\n                  />\n                </Tooltip>\n              </Flex>\n            </Stack>\n          </Box>\n        ) : (\n          <Box flex={1} />\n        )}\n      </Grid>\n    </Header>\n  )\n}\n","import {json2csv} from 'json-2-csv'\n\nfunction getBlobUrl(content: string, mimeType: string): string {\n  return URL.createObjectURL(\n    new Blob([content], {\n      type: mimeType,\n    }),\n  )\n}\n\nfunction getMemoizedBlobUrlResolver(mimeType: string, stringEncoder: (input: any) => string) {\n  return (() => {\n    let prevResult = ''\n    let prevContent = ''\n    return (input: unknown) => {\n      const content = stringEncoder(input)\n      if (typeof content !== 'string' || content === '') {\n        return undefined\n      }\n\n      if (content === prevContent) {\n        return prevResult\n      }\n\n      prevContent = content\n      if (prevResult) {\n        URL.revokeObjectURL(prevResult)\n      }\n\n      prevResult = getBlobUrl(content, mimeType)\n      return prevResult\n    }\n  })()\n}\n\nexport const getJsonBlobUrl = getMemoizedBlobUrlResolver('application/json', (input) =>\n  JSON.stringify(input, null, 2),\n)\n\nexport const getCsvBlobUrl = getMemoizedBlobUrlResolver('text/csv', (input) => {\n  return json2csv(Array.isArray(input) ? input : [input]).trim()\n})\n","import {Code} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const ErrorCode = styled(Code)`\n  color: ${({theme}) => theme.sanity.color.muted.critical.enabled.fg};\n`\n","import {Box} from '@sanity/ui'\nimport {useTranslation} from 'sanity'\n\nimport {visionLocaleNamespace} from '../i18n'\nimport {ErrorCode} from './QueryErrorDialog.styled'\n\ninterface ContentLakeQueryError {\n  details: {\n    query: string\n    start: number\n    end: number\n\n    lineNumber?: number\n    column?: number\n  }\n}\n\nexport function QueryErrorDetails({error}: {error: ContentLakeQueryError | Error}) {\n  const {t} = useTranslation(visionLocaleNamespace)\n\n  if (!('details' in error)) {\n    return null\n  }\n\n  const details = {...error.details, ...mapToLegacyDetails(error.details)}\n  if (!details.line) {\n    return null\n  }\n\n  return (\n    <div>\n      <ErrorCode size={1}>{`${details.line}\\n${dashLine(\n        details.column,\n        details.columnEnd,\n      )}`}</ErrorCode>\n      <Box marginTop={4}>\n        <ErrorCode size={1}>{`${t('query.error.line')}:   ${details.lineNumber}\\n${t(\n          'query.error.column',\n        )}: ${details.column}`}</ErrorCode>\n      </Box>\n    </div>\n  )\n}\n\nfunction mapToLegacyDetails(details: ContentLakeQueryError['details']) {\n  if (!details || typeof details.query !== 'string' || typeof details.start !== 'number') {\n    return {}\n  }\n\n  const {query, start, end} = details\n  const lineStart = query.slice(0, start).lastIndexOf('\\n') + 1\n  const lineNumber = (query.slice(0, lineStart).match(/\\n/g) || []).length\n  const line = query.slice(lineStart, query.indexOf('\\n', lineStart))\n  const column = start - lineStart\n  const columnEnd = typeof end === 'number' ? end - lineStart : undefined\n\n  return {line, lineNumber, column, columnEnd}\n}\n\nfunction dashLine(column: number, columnEnd: number | undefined): string {\n  const line = '-'.repeat(column)\n  const hats = `^`.repeat(columnEnd ? columnEnd - column : 1)\n  return `${line}${hats}`\n}\n","import {Stack} from '@sanity/ui'\n\nimport {QueryErrorDetails} from './QueryErrorDetails'\nimport {ErrorCode} from './QueryErrorDialog.styled'\n\nexport function QueryErrorDialog(props: {error: Error}) {\n  return (\n    <Stack space={5} marginTop={2}>\n      <ErrorCode size={1}>{props.error.message}</ErrorCode>\n      <QueryErrorDetails error={props.error} />\n    </Stack>\n  )\n}\n","import {rem, type Theme} from '@sanity/ui'\nimport {css, styled} from 'styled-components'\n\nexport const ResultViewWrapper = styled.div<{theme: Theme}>(({theme}) => {\n  const {color, fonts, space} = theme.sanity\n\n  return css`\n    & .json-inspector,\n    & .json-inspector .json-inspector__selection {\n      font-family: ${fonts.code.family};\n      font-size: ${fonts.code.sizes[2].fontSize}px;\n      line-height: ${fonts.code.sizes[2].lineHeight}px;\n      color: var(--card-code-fg-color);\n    }\n\n    & .json-inspector .json-inspector__leaf {\n      padding-left: ${rem(space[4])};\n    }\n\n    & .json-inspector .json-inspector__leaf.json-inspector__leaf_root {\n      padding-top: ${rem(space[0])};\n      padding-left: 0;\n    }\n\n    & .json-inspector > .json-inspector__leaf_root > .json-inspector__line > .json-inspector__key {\n      display: none;\n    }\n\n    & .json-inspector .json-inspector__line {\n      display: block;\n      position: relative;\n      cursor: default;\n    }\n\n    & .json-inspector .json-inspector__line::after {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: -200px;\n      right: -50px;\n      bottom: 0;\n      z-index: -1;\n      pointer-events: none;\n    }\n\n    & .json-inspector .json-inspector__line:hover::after {\n      background: var(--card-code-bg-color);\n    }\n\n    & .json-inspector .json-inspector__leaf_composite > .json-inspector__line {\n      cursor: pointer;\n    }\n\n    & .json-inspector .json-inspector__leaf_composite > .json-inspector__line::before {\n      content: '▸ ';\n      margin-left: calc(0px - ${rem(space[4])});\n      font-size: ${fonts.code.sizes[2].fontSize}px;\n      line-height: ${fonts.code.sizes[2].lineHeight}px;\n    }\n\n    &\n      .json-inspector\n      .json-inspector__leaf_expanded.json-inspector__leaf_composite\n      > .json-inspector__line::before {\n      content: '▾ ';\n      font-size: ${fonts.code.sizes[2].fontSize}px;\n      line-height: ${fonts.code.sizes[2].lineHeight}px;\n    }\n\n    & .json-inspector .json-inspector__radio,\n    & .json-inspector .json-inspector__flatpath {\n      display: none;\n    }\n\n    & .json-inspector .json-inspector__value {\n      margin-left: ${rem(space[4] / 2)};\n    }\n\n    &\n      .json-inspector\n      > .json-inspector__leaf_root\n      > .json-inspector__line\n      > .json-inspector__key\n      + .json-inspector__value {\n      margin: 0;\n    }\n\n    & .json-inspector .json-inspector__key {\n      color: ${color.syntax.property};\n    }\n\n    & .json-inspector .json-inspector__value_helper,\n    & .json-inspector .json-inspector__value_null {\n      color: ${color.syntax.constant};\n    }\n\n    & .json-inspector .json-inspector__not-found {\n      padding-top: ${rem(space[2])};\n    }\n\n    & .json-inspector .json-inspector__value_string {\n      color: ${color.syntax.string};\n      word-break: break-word;\n    }\n\n    & .json-inspector .json-inspector__value_boolean {\n      color: ${color.syntax.boolean};\n    }\n\n    & .json-inspector .json-inspector__value_number {\n      color: ${color.syntax.number};\n    }\n\n    & .json-inspector .json-inspector__show-original {\n      display: inline-block;\n      padding: 0 6px;\n      cursor: pointer;\n    }\n\n    & .json-inspector .json-inspector__show-original:hover {\n      color: inherit;\n    }\n\n    & .json-inspector .json-inspector__show-original::before {\n      content: '↔';\n    }\n\n    & .json-inspector .json-inspector__show-original:hover::after {\n      content: ' expand';\n    }\n  `\n})\n","import {JsonInspector} from '@rexxars/react-json-inspector'\nimport {LinkIcon} from '@sanity/icons'\nimport {Code} from '@sanity/ui'\nimport LRU from 'quick-lru'\nimport {useDataset} from 'sanity'\nimport {IntentLink} from 'sanity/router'\n\nimport {ResultViewWrapper} from './ResultView.styled'\n\nconst lru = new LRU({maxSize: 50000})\n\nexport function ResultView(props: {data: unknown; datasetName: string}): React.JSX.Element {\n  const {data, datasetName} = props\n  const workspaceDataset = useDataset()\n\n  if (isRecord(data) || Array.isArray(data)) {\n    return (\n      <ResultViewWrapper>\n        <JsonInspector\n          data={data}\n          search={false}\n          isExpanded={isExpanded}\n          onClick={toggleExpanded}\n          interactiveLabel={workspaceDataset === datasetName ? DocumentEditLabel : undefined}\n        />\n      </ResultViewWrapper>\n    )\n  }\n\n  return <Code language=\"json\">{JSON.stringify(data)}</Code>\n}\n\nfunction DocumentEditLabel(props: {value: string; isKey: boolean; keypath: string}) {\n  if (props.isKey || (!props.keypath.endsWith('_id') && !props.keypath.endsWith('_ref'))) {\n    return null\n  }\n\n  return (\n    <IntentLink intent=\"edit\" params={{id: props.value}}>\n      <LinkIcon />\n    </IntentLink>\n  )\n}\n\nfunction isExpanded(keyPath: string, value: unknown): boolean {\n  const depthLimit = 4\n  const cached = lru.get(keyPath) as boolean | undefined\n\n  if (typeof cached === 'boolean') {\n    return cached\n  }\n\n  const segments = keyPath.split('.', depthLimit)\n  if (segments.length === depthLimit) {\n    return false\n  }\n\n  if (Array.isArray(value)) {\n    return true\n  }\n\n  return isRecord(value) && !segments.some((key) => isArrayKeyOverLimit(key))\n}\n\nfunction toggleExpanded(event: {path: string}): void {\n  const {path} = event\n  const current = lru.get(path)\n\n  if (current === undefined) {\n    // something is wrong\n    return\n  }\n\n  lru.set(path, !current)\n}\n\nfunction isRecord(value: unknown): value is Record<string, unknown> {\n  return value !== null && typeof value === 'object' && !Array.isArray(value)\n}\n\nconst numeric = /^\\d+$/\nfunction isArrayKeyOverLimit(segment: string, limit = 10) {\n  return numeric.test(segment) && parseInt(segment, 10) > limit\n}\n","import {DocumentSheetIcon} from '@sanity/icons'\nimport {Button, Tooltip} from '@sanity/ui'\nimport {type MouseEvent} from 'react'\nimport {useTranslation} from 'sanity'\n\nimport {visionLocaleNamespace} from '../i18n'\n\ninterface SaveButtonProps {\n  blobUrl: string | undefined\n}\n\nfunction preventSave(evt: MouseEvent<HTMLButtonElement>) {\n  return evt.preventDefault()\n}\n\nexport function SaveCsvButton({blobUrl}: SaveButtonProps) {\n  const {t} = useTranslation(visionLocaleNamespace)\n  const isDisabled = !blobUrl\n\n  const button = (\n    <Button\n      as=\"a\"\n      disabled={isDisabled}\n      download={isDisabled ? undefined : 'query-result.csv'}\n      href={blobUrl}\n      icon={DocumentSheetIcon}\n      mode=\"ghost\"\n      onClick={isDisabled ? preventSave : undefined}\n      // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals\n      text=\"CSV\" // String is a File extension\n      tone=\"default\"\n    />\n  )\n\n  return isDisabled ? (\n    <Tooltip content={t('result.save-result-as-csv.not-csv-encodable')} placement=\"top\">\n      {button}\n    </Tooltip>\n  ) : (\n    button\n  )\n}\n\nexport function SaveJsonButton({blobUrl}: SaveButtonProps) {\n  return (\n    <Button\n      as=\"a\"\n      download={'query-result.json'}\n      href={blobUrl}\n      icon={DocumentSheetIcon}\n      mode=\"ghost\"\n      // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals\n      text=\"JSON\" // String is a File extension\n      tone=\"default\"\n    />\n  )\n}\n","/* eslint-disable complexity */\nimport {type MutationEvent} from '@sanity/client'\nimport {Box, Text} from '@sanity/ui'\nimport {Translate, useTranslation} from 'sanity'\n\nimport {visionLocaleNamespace} from '../i18n'\nimport {getCsvBlobUrl, getJsonBlobUrl} from '../util/getBlobUrl'\nimport {DelayedSpinner} from './DelayedSpinner'\nimport {QueryErrorDialog} from './QueryErrorDialog'\nimport {ResultView} from './ResultView'\nimport {SaveCsvButton, SaveJsonButton} from './SaveResultButtons'\nimport {\n  DownloadsCard,\n  InputBackgroundContainer,\n  Result,\n  ResultContainer,\n  ResultFooter,\n  ResultInnerContainer,\n  ResultOuterContainer,\n  SaveResultLabel,\n  StyledLabel,\n  TimingsCard,\n  TimingsTextContainer,\n} from './VisionGui.styled'\n\ninterface VisionGuiResultProps {\n  error?: Error | undefined\n  queryInProgress: boolean\n  queryResult?: unknown | undefined\n  listenInProgress: boolean\n  listenMutations: MutationEvent[]\n  dataset: string\n  queryTime: number | undefined\n  e2eTime: number | undefined\n}\n\nexport function VisionGuiResul