@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/hooks/useSavedQueries.ts","../../src/components/QueryRecall.styled.tsx","../../src/components/QueryRecall.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 {uuid} from '@sanity/uuid' // Import the UUID library\nimport {useCallback, useEffect, useMemo, useState} from 'react'\nimport {map, startWith} from 'rxjs/operators'\nimport {type KeyValueStoreValue, useKeyValueStore} from 'sanity'\n\nconst STORED_QUERIES_NAMESPACE = 'studio.vision-tool.saved-queries'\n\nexport interface QueryConfig {\n  _key: string\n  url: string\n  savedAt: string\n  title?: string\n  shared?: boolean\n}\n\nexport interface StoredQueries {\n  queries: QueryConfig[]\n}\n\nconst defaultValue = {\n  queries: [],\n}\nconst keyValueStoreKey = STORED_QUERIES_NAMESPACE\n\nexport function useSavedQueries(): {\n  queries: QueryConfig[]\n  saveQuery: (query: Omit<QueryConfig, '_key'>) => void\n  updateQuery: (query: QueryConfig) => void\n  deleteQuery: (key: string) => void\n  saving: boolean\n  deleting: string[]\n  saveQueryError: Error | undefined\n  deleteQueryError: Error | undefined\n  error: Error | undefined\n} {\n  const keyValueStore = useKeyValueStore()\n\n  const [value, setValue] = useState<StoredQueries>(defaultValue)\n  const [saving, setSaving] = useState(false)\n  const [deleting, setDeleting] = useState<string[]>([])\n  const [saveQueryError, setSaveQueryError] = useState<Error | undefined>()\n  const [deleteQueryError, setDeleteQueryError] = useState<Error | undefined>()\n  const [error, setError] = useState<Error | undefined>()\n\n  const queries = useMemo(() => {\n    return keyValueStore.getKey(keyValueStoreKey)\n  }, [keyValueStore])\n\n  useEffect(() => {\n    const sub = queries\n      .pipe(\n        startWith(defaultValue as any),\n        map((data: StoredQueries) => {\n          if (!data) {\n            return defaultValue\n          }\n          return data\n        }),\n      )\n      .subscribe({\n        next: setValue,\n        error: (err) => setError(err as Error),\n      })\n\n    return () => sub?.unsubscribe()\n  }, [queries, keyValueStore])\n\n  const saveQuery = useCallback(\n    (query: Omit<QueryConfig, '_key'>) => {\n      setSaving(true)\n      setSaveQueryError(undefined)\n      try {\n        const newQuery = {...query, _key: uuid()} // Add a unique _key to the query\n        const newQueries = [newQuery, ...value.queries]\n        setValue({queries: newQueries})\n        keyValueStore.setKey(keyValueStoreKey, {\n          queries: newQueries,\n        } as unknown as KeyValueStoreValue)\n      } catch (err) {\n        setSaveQueryError(err as Error)\n      } finally {\n        setSaving(false)\n      }\n    },\n    [keyValueStore, value.queries],\n  )\n\n  const updateQuery = useCallback(\n    (query: QueryConfig) => {\n      setSaving(true)\n      setSaveQueryError(undefined)\n      try {\n        const updatedQueries = value.queries.map((q) =>\n          q._key === query._key ? {...q, ...query} : q,\n        )\n        setValue({queries: updatedQueries})\n        keyValueStore.setKey(keyValueStoreKey, {\n          queries: updatedQueries,\n        } as unknown as KeyValueStoreValue)\n      } catch (err) {\n        setSaveQueryError(err as Error)\n      } finally {\n        setSaving(false)\n      }\n    },\n    [keyValueStore, value.queries],\n  )\n\n  const deleteQuery = useCallback(\n    (key: string) => {\n      setDeleting((prev) => [...prev, key])\n      setDeleteQueryError(undefined)\n      try {\n        const filteredQueries = value.queries.filter((q) => q._key !== key)\n        setValue({queries: filteredQueries})\n        keyValueStore.setKey(keyValueStoreKey, {\n          queries: filteredQueries,\n        } as unknown as KeyValueStoreValue)\n      } catch (err) {\n        setDeleteQueryError(err as Error)\n      } finally {\n        setDeleting((prev) => prev.filter((k) => k !== key))\n      }\n    },\n    [keyValueStore, value.queries],\n  )\n\n  return {\n    queries: value.queries,\n    saveQuery,\n    updateQuery,\n    deleteQuery,\n    saving,\n    deleting,\n    saveQueryError,\n    deleteQueryError,\n    error,\n  }\n}\n","import {Box, Stack} from '@sanity/ui'\nimport {styled} from 'styled-components'\n\nexport const FixedHeader = styled(Stack)`\n  position: sticky;\n  top: 0;\n  background: ${({theme}) => theme.sanity.color.base.bg};\n  z-index: 1;\n`\n\nexport const ScrollContainer = styled(Box)`\n  height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  &::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: ${({theme}) => theme.sanity.color.base.border};\n    border-radius: 4px;\n  }\n`\n","import {AddIcon, SearchIcon, TrashIcon} from '@sanity/icons'\nimport {\n  Box,\n  Button,\n  Card,\n  Code,\n  Flex,\n  Menu,\n  MenuButton,\n  MenuItem,\n  Stack,\n  Text,\n  TextInput,\n  useToast,\n} from '@sanity/ui'\nimport {isEqual} from 'lodash'\nimport {type ReactElement, useCallback, useState} from 'react'\nimport {ContextMenuButton, useDateTimeFormat, useTranslation} from 'sanity'\n\nimport {type QueryConfig, useSavedQueries} from '../hooks/useSavedQueries'\nimport {visionLocaleNamespace} from '../i18n'\nimport {FixedHeader, ScrollContainer} from './QueryRecall.styled'\nimport {type ParsedUrlState} from './VisionGui'\n\nexport function QueryRecall({\n  url,\n  getStateFromUrl,\n  setStateFromParsedUrl,\n  currentQuery,\n  currentParams,\n  generateUrl,\n}: {\n  url?: string\n  getStateFromUrl: (data: string) => ParsedUrlState | null\n  setStateFromParsedUrl: (parsedUrlObj: ParsedUrlState) => void\n  currentQuery: string\n  currentParams: Record<string, unknown>\n  generateUrl: (query: string, params: Record<string, unknown>) => string\n}): ReactElement {\n  const toast = useToast()\n  const {saveQuery, updateQuery, queries, deleteQuery, saving, deleting, saveQueryError} =\n    useSavedQueries()\n  const {t} = useTranslation(visionLocaleNamespace)\n  const formatDate = useDateTimeFormat({\n    month: 'short',\n    day: 'numeric',\n    year: 'numeric',\n    hour: 'numeric',\n    minute: '2-digit',\n    hour12: true,\n  })\n  const [editingKey, setEditingKey] = useState<string | null>(null)\n  const [editingTitle, setEditingTitle] = useState('')\n  const [optimisticTitles, setOptimisticTitles] = useState<Record<string, string>>({})\n  const [searchQuery, setSearchQuery] = useState('')\n  const [selectedUrl, setSelectedUrl] = useState<string | undefined>(url)\n\n  const handleSave = useCallback(async () => {\n    // Generate the correct URL first\n    const newUrl = generateUrl(currentQuery, currentParams)\n\n    // Check for duplicates by comparing query content and params\n    const isDuplicate = queries?.some((q) => {\n      const savedQueryObj = getStateFromUrl(q.url)\n      return (\n        savedQueryObj &&\n        savedQueryObj.query === currentQuery &&\n        isEqual(savedQueryObj.params, currentParams)\n      )\n    })\n\n    if (isDuplicate) {\n      const duplicateQuery = queries?.find((q) => {\n        const savedQueryObj = getStateFromUrl(q.url)\n        return (\n          savedQueryObj &&\n          savedQueryObj.query === currentQuery &&\n          isEqual(savedQueryObj.params, currentParams)\n        )\n      })\n      toast.push({\n        closable: true,\n        status: 'warning',\n        title: t('save-query.already-saved'),\n        description: `${duplicateQuery?.title} - ${formatDate.format(new Date(duplicateQuery?.savedAt || ''))}`,\n      })\n      return\n    }\n\n    if (newUrl) {\n      await saveQuery({\n        url: newUrl,\n        savedAt: new Date().toISOString(),\n        title: 'Untitled',\n      })\n      // Set the selected URL to the newly saved query's URL\n      setSelectedUrl(newUrl)\n    }\n    if (saveQueryError) {\n      toast.push({\n        closable: true,\n        status: 'error',\n        title: t('save-query.error'),\n        description: saveQueryError.message,\n      })\n    } else {\n      toast.push({\n        closable: true,\n        status: 'success',\n        title: t('save-query.success'),\n      })\n    }\n  }, [\n    queries,\n    saveQueryError,\n    toast,\n    t,\n    currentQuery,\n    currentParams,\n    getStateFromUrl,\n    generateUrl,\n    formatDate,\n    saveQuery,\n  ])\n\n  const handleTitleSave = useCallback(\n    async (query: QueryConfig, newTitle: string) => {\n      setEditingKey(null)\n      setOptimisticTitles((prev) => ({...prev, [query._key]: newTitle}))\n\n      try {\n        await updateQuery({\n          ...query,\n          title: newTitle,\n        })\n        // Clear optimistic title on success\n        setOptimisticTitles((prev) => {\n          const next = {...prev}\n          delete next[query._key]\n          return next\n        })\n      } catch (err) {\n        // Clear optimistic title on error\n        setOptimisticTitles((prev) => {\n          const next = {...prev}\n          delete next[query._key]\n          return next\n        })\n        toast.push({\n          closable: true,\n          status: 'error',\n          title: t('save-query.error'),\n          description: err.message,\n        })\n      }\n    },\n    [updateQuery, toast, t],\n  )\n\n  const handleUpdate = useCallback(\n    async (query: QueryConfig) => {\n      const newUrl = generateUrl(currentQuery, currentParams)\n\n      // Check for duplicates by comparing query content and params\n      const isDuplicate = queries?.some((q) => {\n        // Skip the current query when checking for duplicates\n        if (q._key === query._key) return false\n        const savedQueryObj = getStateFromUrl(q.url)\n        return (\n          savedQueryObj &&\n          savedQueryObj.query === currentQuery &&\n          isEqual(savedQueryObj.params, currentParams)\n        )\n      })\n\n      if (isDuplicate) {\n        const duplicateQuery = queries?.find((q) => {\n          if (q._key === query._key) return false\n          const savedQueryObj = getStateFromUrl(q.url)\n          return (\n            savedQueryObj &&\n            savedQueryObj.query === currentQuery &&\n            isEqual(savedQueryObj.params, currentParams)\n          )\n        })\n        toast.push({\n          closable: true,\n          status: 'warning',\n          title: t('save-query.already-saved'),\n          description: `${duplicateQuery?.title} - ${formatDate.format(\n            new Date(duplicateQuery?.savedAt || ''),\n          )}`,\n        })\n        return\n      }\n\n      try {\n        await updateQuery({\n          ...query,\n          url: newUrl,\n          savedAt: new Date().toISOString(),\n        })\n        setSelectedUrl(newUrl)\n        toast.push({\n          closable: true,\n          status: 'success',\n          title: t('save-query.success'),\n        })\n      } catch (err) {\n        toast.push({\n          closable: true,\n          status: 'error',\n          title: t('save-query.error'),\n          description: err.message,\n        })\n      }\n    },\n    [\n      currentQuery,\n      currentParams,\n      formatDate,\n      generateUrl,\n      updateQuery,\n      toast,\n      t,\n      queries,\n      getStateFromUrl,\n    ],\n  )\n\n  const filteredQueries = queries?.filter((q) => {\n    return q?.title?.toLowerCase().includes(searchQuery.toLowerCase())\n  })\n\n  return (\n    <ScrollContainer>\n      <FixedHeader space={3}>\n        <Flex padding={3} paddingTop={4} paddingBottom={0} justify=\"space-between\" align=\"center\">\n          <Text weight=\"semibold\" style={{textTransform: 'capitalize'}} size={4}>\n            {t('label.saved-queries')}\n          </Text>\n          <Button\n            label={t('action.save-query')}\n            icon={AddIcon}\n            disabled={saving}\n            onClick={handleSave}\n            mode=\"bleed\"\n          />\n        </Flex>\n        <Box padding={3} paddingTop={0}>\n          <TextInput\n            placeholder={t('label.search-queries')}\n            icon={SearchIcon}\n            value={searchQuery}\n            onChange={(event) => setSearchQuery(event.currentTarget.value)}\n          />\n        </Box>\n      </FixedHeader>\n      <Stack paddingY={3}>\n        {filteredQueries?.map((q) => {\n          const queryObj = getStateFromUrl(q.url)\n          const isSelected = selectedUrl === q.url\n\n          // Compare against current live state\n          const areQueriesEqual =\n            queryObj && currentQuery === queryObj.query && isEqual(currentParams, queryObj.params)\n\n          const isEdited = isSelected && !areQueriesEqual\n          return (\n            <Card\n              key={q._key}\n              width={'fill'}\n              padding={4}\n              border\n              tone={isSelected ? 'positive' : 'default'}\n              onClick={() => {\n                setSelectedUrl(q.url) // Update the selected query immediately\n                const parsedUrl = getStateFromUrl(q.url)\n                if (parsedUrl) {\n                  setStateFromParsedUrl(parsedUrl)\n                }\n              }}\n              style={{position: 'relative'}}\n            >\n              <Stack space={3}>\n                <Flex justify=\"space-between\" align={'center'}>\n                  <Flex align=\"center\" gap={2} paddingRight={1}>\n                    {editingKey === q._key ? (\n                      <TextInput\n                        value={editingTitle}\n                        onChange={(event) => setEditingTitle(event.currentTarget.value)}\n                        onKeyDown={(event) => {\n                          if (event.key === 'Enter') {\n                            handleTitleSave(q, editingTitle)\n                          } else if (event.key === 'Escape') {\n                            setEditingKey(null)\n                          }\n                        }}\n                        onBlur={() => handleTitleSave(q, editingTitle)}\n                        autoFocus\n                        style={{maxWidth: '170px', height: '24px'}}\n                      />\n                    ) : (\n                      <Text\n                        weight=\"bold\"\n                        size={3}\n                        textOverflow=\"ellipsis\"\n                        style={{maxWidth: '170px', cursor: 'pointer', padding: '4px 0'}}\n                        title={\n                          optimisticTitles[q._key] ||\n                          q.title ||\n                          q._key.slice(q._key.length - 5, q._key.length)\n                        }\n                        onClick={() => {\n                          setEditingKey(q._key)\n                          setEditingTitle(q.title || q._key.slice(0, 5))\n                        }}\n                      >\n                        {optimisticTitles[q._key] ||\n                          q.title ||\n                          q._key.slice(q._key.length - 5, q._key.length)}\n                      </Text>\n                    )}\n                    {isEdited && (\n                      <Box\n                        style={{\n                          width: '6px',\n                          height: '6px',\n                          borderRadius: '50%',\n                          backgroundColor: 'var(--card-focus-ring-color)',\n                        }}\n                      />\n                    )}\n                  </Flex>\n                  <MenuButton\n                    button={<ContextMenuButton />}\n                    id={`${q._key}-menu`}\n                    menu={\n                      <Menu\n                      // style={{background: 'white', backgroundColor: 'white', borderRadius: '11%'}}\n                      >\n                        <MenuItem\n                          tone=\"critical\"\n                          padding={3}\n                          icon={TrashIcon}\n                          text={t('action.delete')}\n                          onClick={(event) => {\n                            event.stopPropagation()\n                            deleteQuery(q._key)\n                          }}\n                        />\n                      </Menu>\n                    }\n                    popover={{portal: true, placement: 'bottom-end', tone: 'default'}}\n                  />\n                </Flex>\n\n                <Code muted>{queryObj?.query.split('{')[0]}</Code>\n\n                <Flex align=\"center\" gap={1}>\n                  <Text size={1} muted>\n                    {formatDate.format(new Date(q.savedAt || ''))}\n                  </Text>\n                </Flex>\n\n                {isEdited && (\n                  <Button\n                    mode=\"ghost\"\n                    tone=\"default\"\n                    size={1}\n                    padding={2}\n                    style={{\n                      height: '24px',\n                      position: 'absolute',\n                      right: '16px',\n                      bottom: '16px',\n                      fontSize: '12px',\n                    }}\n                    text={t('action.update')}\n                    onClick={(e) => {\n                      e.stopPropagation()\n                      handleUpdate(q)\n                    }}\n                  />\n                )}\n              </Stack>\n            </Card>\n          )\n        })}\n      </Stack>\n    </ScrollContainer>\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  perspect