sanity/lib/_chunks-es/PresentationToolGrantsCheck.mjs.map

Sanity is a real-time content infrastructure with a scalable, hosted backend featuring a Graph Oriented Query Language (GROQ), asset pipelines and fast edge caches

{"version":3,"file":"PresentationToolGrantsCheck.mjs","sources":["../../src/presentation/features/PostMessageFeatures.tsx","../../src/presentation/machines/presentation-machine.ts","../../src/presentation/overlays/SharedStateProvider.tsx","../../src/presentation/panels/Panel.tsx","../../src/presentation/util/debounce.ts","../../src/presentation/panels/usePanelsStorage.ts","../../src/presentation/panels/util.ts","../../src/presentation/panels/Panels.tsx","../../src/presentation/components/ErrorCard.tsx","../../src/presentation/paneRouter/ChildLink.tsx","../../src/presentation/paneRouter/ReferenceChildLink.tsx","../../src/presentation/paneRouter/PresentationPaneRouterProvider.tsx","../../src/presentation/editor/DocumentListPane.tsx","../../src/presentation/editor/DocumentPane.tsx","../../src/presentation/editor/DocumentPanel.tsx","../../src/presentation/editor/usePreviewState.ts","../../src/presentation/editor/ContentEditor.tsx","../../src/presentation/panels/usePanelId.ts","../../src/presentation/panels/PanelResizer.tsx","../../src/presentation/PresentationContent.tsx","../../src/presentation/PresentationNavigateProvider.tsx","../../src/presentation/useLocalState.ts","../../src/presentation/PresentationNavigator.tsx","../../src/presentation/PresentationParamsProvider.tsx","../../src/presentation/PresentationProvider.tsx","../../src/presentation/useAllowPatterns.ts","../../src/presentation/util/encodeStudioPerspective.ts","../../src/presentation/useId.ts","../../src/presentation/preview/IFrame.tsx","../../src/presentation/preview/OpenPreviewButton.tsx","../../src/presentation/useTargetOrigin.ts","../../src/presentation/preview/PreviewLocationInput.tsx","../../src/presentation/preview/SharePreviewMenu.tsx","../../src/presentation/preview/PreviewHeader.tsx","../../src/presentation/preview/Preview.tsx","../../src/presentation/util/warnOnce.ts","../../src/presentation/useDocumentsOnPage.ts","../../src/presentation/useMainDocument.ts","../../src/presentation/util/parse.ts","../../src/presentation/useParams.ts","../../src/presentation/usePopups.ts","../../src/presentation/usePresentationPerspective.ts","../../src/presentation/useStatus.ts","../../src/presentation/PresentationTool.tsx","../../src/presentation/actors/create-preview-secret.ts","../../src/presentation/actors/read-shared-secret.ts","../../src/presentation/actors/resolve-allow-patterns.ts","../../src/presentation/actors/resolve-initial-url.ts","../../src/presentation/actors/resolve-preview-mode.ts","../../src/presentation/actors/resolve-preview-mode-url.ts","../../src/presentation/actors/resolve-url-from-preview-search-param.ts","../../src/presentation/machines/preview-url.ts","../../src/presentation/usePreviewUrlActorRef.ts","../../src/presentation/useReportInvalidPreviewSearchParam.tsx","../../src/presentation/useVercelBypassSecret.ts","../../src/presentation/PresentationToolGrantsCheck.tsx"],"sourcesContent":["import {type FC, memo, useEffect} from 'react'\n\nimport {type VisualEditingConnection} from '../types'\n\nexport interface PostMessagePreviewsProps {\n  comlink: VisualEditingConnection\n}\n\nconst PostMessageFeatures: FC<PostMessagePreviewsProps> = (props) => {\n  const {comlink} = props\n\n  useEffect(() => {\n    return comlink.on('visual-editing/features', () => ({\n      features: {\n        optimistic: true,\n      },\n    }))\n  }, [comlink])\n\n  return null\n}\n\nexport default memo(PostMessageFeatures)\n","import {type ActorRefFrom, assign, setup} from 'xstate'\n\ninterface Context {\n  url: URL | null\n  error: Error | null\n  visualEditingOverlaysEnabled: boolean\n}\n\ntype Event =\n  | {type: 'toggle visual editing overlays'; enabled: boolean}\n  | {type: 'iframe loaded'}\n  | {type: 'iframe refresh'}\n  | {type: 'iframe reload'}\n\nexport const presentationMachine = setup({\n  types: {} as {\n    context: Context\n    events: Event\n    tags: 'busy' | 'error'\n  },\n  actions: {\n    //\n  },\n  actors: {\n    //\n  },\n  guards: {\n    //\n  },\n}).createMachine({\n  // eslint-disable-next-line tsdoc/syntax\n  /** @xstate-layout N4IgpgJg5mDOIC5QAUBOcwDsAuBDbAlgPaYAEAKkUQDYDEBAZqrgLZinrVG4QDaADAF1EoAA5FYBQiREgAHogAsAJgA0IAJ6IAHAEYAdIoCcJowFY9R-vzPLlAX3vq0GHPmJlKNfVx4FMUPRMrOy+EJACwkgg4pLSmLIKCLoAbIr6Zoop2tqKAMxpJnnF6loIZkbK+uZ5umapKXmK-Cm6js7osFh48RRU1D7c4RC02ERQUNTsAG4EsACuuNSkkFL+UKRE02Co1LgasJGysWsy0UnaZinVyrpGAOx1Rim2efeliPe3hma1Zvy6XT8W4OJwgFxdNy9LwDMKQILMNgcMBMOAACyO0RO8USiAK930LWU-3uiiB9yaKXemkQjW01V+txS-GKqUe7XBnW67hIfW8cJGjER7E4Q0xYgkpwS5zxVMJKWJ-FJ5Mp1LKFn4Pz+DSaLTaYIh3Oh-UGPEg+nQqNgaPWCJCpAF4pikpxMoQKWZ+gp+TSZLy1hSH3deXpNSZLNqVP1HVcPQ8fNhQ3Nor8ATtSMdQmOLo8uPdnu9BUUfoDQY1WrqOuarUcYMwRHC8Gihqh8Zh2biubdAFpAzSEL2OS247yYfodqgiKgO1K8yog7ptATFL9dFljMDrHkh1zW6OTWF1jPXaAkmY1YgKnktfxtC9dPd+Io9DvYzzPAekxBj13T3i7vKirKkqqpBsYVQ1HUFjFs0t6KK+kIjh+-JfvoBAQFMP5nH+CDaMo16KjYyjMvUNh5GWOT6MoLL8A8ygrk0dQIUabafmaEAWiinQ2gEWHSjhjJUYuj73Pcd63noQaNEYFb-Dk2S0cxe7IYm7GcYevFYjm2HyJeeQQb8tFkikVjGNoFGajUt73o+z61vYQA */\n  id: 'Presentation Tool',\n  context: {\n    url: null,\n    error: null,\n    visualEditingOverlaysEnabled: false,\n  },\n\n  on: {\n    'iframe reload': {\n      actions: assign({url: null}),\n      target: '.loading',\n    },\n  },\n\n  states: {\n    error: {\n      description:\n        'Failed to load, either because of a misconfiguration, a network error, or an unexpected error',\n      tags: ['error'],\n    },\n    loading: {\n      on: {\n        'iframe loaded': {\n          target: 'loaded',\n        },\n      },\n      tags: ['busy'],\n    },\n    loaded: {\n      on: {\n        'toggle visual editing overlays': {\n          actions: assign({\n            visualEditingOverlaysEnabled: ({event}) => event.enabled,\n          }),\n        },\n        'iframe refresh': {\n          target: '.refreshing',\n        },\n        'iframe reload': {\n          target: '.reloading',\n        },\n      },\n\n      states: {\n        idle: {},\n        refreshing: {\n          on: {\n            'iframe loaded': {\n              target: 'idle',\n            },\n          },\n          tags: ['busy'],\n        },\n        reloading: {\n          on: {\n            'iframe loaded': {\n              target: 'idle',\n            },\n          },\n          tags: ['busy'],\n        },\n      },\n      initial: 'idle',\n    },\n  },\n  initial: 'loading',\n})\n\nexport type PresentationMachineRef = ActorRefFrom<typeof presentationMachine>\n","import {type Serializable, type SerializableObject} from '@sanity/presentation-comlink'\nimport {\n  type FunctionComponent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n} from 'react'\nimport {PresentationSharedStateContext} from 'sanity/_singletons'\n\nimport {type VisualEditingConnection} from '../types'\nimport {type PresentationSharedStateContextValue} from './types'\n\nexport const SharedStateProvider: FunctionComponent<\n  PropsWithChildren<{\n    comlink: VisualEditingConnection | null\n  }>\n> = function (props) {\n  const {comlink, children} = props\n\n  const sharedState = useRef<SerializableObject>({})\n\n  useEffect(() => {\n    return comlink?.on('visual-editing/shared-state', () => {\n      return {state: sharedState.current}\n    })\n  }, [comlink])\n\n  const setValue = useCallback(\n    (key: string, value: Serializable) => {\n      sharedState.current[key] = value\n      comlink?.post('presentation/shared-state', {key, value})\n    },\n    [comlink],\n  )\n\n  const removeValue = useCallback(\n    (key: string) => {\n      comlink?.post('presentation/shared-state', {key})\n      delete sharedState.current[key]\n    },\n    [comlink],\n  )\n\n  const context = useMemo<PresentationSharedStateContextValue>(\n    () => ({removeValue, setValue}),\n    [removeValue, setValue],\n  )\n\n  return (\n    <PresentationSharedStateContext.Provider value={context}>\n      {children}\n    </PresentationSharedStateContext.Provider>\n  )\n}\n","import {type FunctionComponent, type PropsWithChildren, useContext, useLayoutEffect} from 'react'\nimport {PresentationPanelsContext} from 'sanity/_singletons'\nimport {styled} from 'styled-components'\n\ninterface PanelProps extends PropsWithChildren {\n  defaultSize?: number | null\n  id: string\n  minWidth?: number\n  maxWidth?: number\n  order?: number\n}\n\nconst Root = styled.div`\n  overflow: hidden;\n  flex-basis: 0;\n  flex-shrink: 1;\n`\n\nexport const Panel: FunctionComponent<PanelProps> = function ({\n  children,\n  defaultSize = null,\n  id,\n  minWidth,\n  maxWidth,\n  order = 0,\n}) {\n  const context = useContext(PresentationPanelsContext)\n\n  if (context === null) {\n    throw Error(`Panel components must be rendered within a PanelGroup container`)\n  }\n\n  const {getPanelStyle, registerElement, unregisterElement} = context\n\n  const style = getPanelStyle(id)\n\n  useLayoutEffect(() => {\n    registerElement(id, {\n      id,\n      type: 'panel',\n      defaultSize,\n      maxWidth: maxWidth ?? null,\n      minWidth: minWidth ?? 0,\n      order,\n    })\n\n    return () => {\n      unregisterElement(id)\n    }\n  }, [id, defaultSize, order, maxWidth, minWidth, registerElement, unregisterElement])\n\n  return <Root style={style}>{children}</Root>\n}\n","export function debounce<F extends (...args: Parameters<F>) => ReturnType<F>>(\n  fn: F,\n  timeout: number,\n): F {\n  let timer: ReturnType<typeof setTimeout>\n  return ((...args: Parameters<F>) => {\n    clearTimeout(timer)\n    timer = setTimeout(() => {\n      fn.apply(fn, args)\n    }, timeout)\n  }) as F\n}\n","import {useMemo} from 'react'\n\nimport {debounce} from '../util/debounce'\nimport {type PanelElement} from './types'\n\nconst itemKey = 'presentation/panels'\n\ntype StoredPanelsState = Record<string, number[]>\n\nconst getStoredItem = () => {\n  // @todo Validate\n  return JSON.parse(localStorage.getItem(itemKey) || '{}') as StoredPanelsState\n}\nconst setStoredItem = (data: StoredPanelsState) => {\n  localStorage.setItem(itemKey, JSON.stringify(data))\n}\n\nconst getKeyForPanels = (panels: PanelElement[]) => {\n  return panels.map((panel) => [panel.id, panel.order].join(':')).join(',')\n}\n\nexport function usePanelsStorage(): {\n  get: (panels: PanelElement[]) => number[] | undefined\n  set: (panels: PanelElement[], widths: number[]) => void\n  setDebounced: (panels: PanelElement[], widths: number[]) => void\n} {\n  return useMemo(() => {\n    const get = (panels: PanelElement[]) => {\n      const stored = getStoredItem()\n      const key = getKeyForPanels(panels)\n      return Array.isArray(stored[key]) && stored[key].some((val) => val === null)\n        ? undefined\n        : stored[key]\n    }\n\n    const set = (panels: PanelElement[], widths: number[]) => {\n      const stored = getStoredItem()\n      const key = getKeyForPanels(panels)\n      const data = {\n        ...stored,\n        [key]: widths,\n      }\n      setStoredItem(data)\n    }\n\n    const setDebounced = debounce(set, 100)\n    return {\n      get,\n      set,\n      setDebounced,\n    }\n  }, [])\n}\n","/* eslint-disable @typescript-eslint/no-shadow,no-eq-null */\nimport {\n  type ElementMap,\n  type InitialDragState,\n  type PanelElement,\n  type PanelsState,\n  type ResizerElement,\n} from './types'\n\nfunction getNextWidth(panel: PanelElement, nextWidth: number, containerWidth: number) {\n  const {maxWidth: maxWidthPx, minWidth: minWidthPx} = panel\n  const maxWidth = maxWidthPx == null ? 100 : (maxWidthPx / containerWidth) * 100\n  const minWidth = (minWidthPx / containerWidth) * 100\n  return Math.min(maxWidth, Math.max(minWidth, nextWidth))\n}\n\n// eslint-disable-next-line max-params\nexport function getNextWidths(\n  delta: number,\n  containerWidth: number,\n  panelBefore: PanelElement,\n  panelAfter: PanelElement,\n  panelsState: PanelsState,\n  initialDragState: InitialDragState,\n): number[] {\n  const {panels, widths: prevWidths} = panelsState\n  const {widths: initialWidths} = initialDragState\n\n  const widths = initialWidths || prevWidths\n  const nextWidths = [...widths]\n\n  {\n    const pivotPanel = delta < 0 ? panelAfter : panelBefore\n    const index = panels.findIndex((panel) => panel.id === pivotPanel.id)\n    const width = widths[index]\n    const nextWidth = getNextWidth(pivotPanel, width + Math.abs(delta), containerWidth)\n    if (width === nextWidth) {\n      return widths\n    }\n    delta = delta < 0 ? width - nextWidth : nextWidth - width\n  }\n\n  let deltaApplied = 0\n  let pivotPanel = delta < 0 ? panelBefore : panelAfter\n  let index = panels.findIndex((panel) => panel.id === pivotPanel.id)\n\n  while (true) {\n    const panel = panels[index]\n    const width = widths[index]\n\n    const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied)\n\n    const nextWidth = getNextWidth(panel, width - deltaRemaining, containerWidth)\n\n    if (width !== nextWidth) {\n      deltaApplied += width - nextWidth\n      nextWidths[index] = nextWidth\n\n      if (\n        deltaApplied.toPrecision(10).localeCompare(Math.abs(delta).toPrecision(10), undefined, {\n          numeric: true,\n        }) >= 0\n      ) {\n        break\n      }\n    }\n\n    if (delta < 0) {\n      if (--index < 0) {\n        break\n      }\n    } else if (++index >= panels.length) {\n      break\n    }\n  }\n\n  if (deltaApplied === 0) {\n    return widths\n  }\n\n  pivotPanel = delta < 0 ? panelAfter : panelBefore\n  index = panels.findIndex((panel) => panel.id === pivotPanel.id)\n  nextWidths[index] = widths[index] + deltaApplied\n\n  return nextWidths\n}\n\nexport function getPanelWidth(panels: PanelElement[], id: string, widths: number[]): string {\n  if (panels.length === 1) return '100'\n\n  const index = panels.findIndex((panel) => panel.id === id)\n  const width = widths[index]\n\n  if (width == null) return '0'\n\n  return width.toPrecision(10)\n}\n\nexport function getOffset(\n  event: MouseEvent,\n  handleElement: HTMLDivElement,\n  initialOffset: number = 0,\n  initialHandleElementRect: DOMRect | null = null,\n): number {\n  const pointerOffset = event.clientX\n\n  const rect = initialHandleElementRect || handleElement.getBoundingClientRect()\n  const elementOffset = rect.left\n\n  return pointerOffset - elementOffset - initialOffset\n}\n\nexport function isPanel(element: PanelElement | ResizerElement): element is PanelElement {\n  return element.type === 'panel'\n}\n\nexport function isResizer(element: PanelElement | ResizerElement): element is ResizerElement {\n  return element.type === 'resizer'\n}\n\nexport function getSortedElements(elements: ElementMap): Array<PanelElement | ResizerElement> {\n  return Array.from(elements.values()).sort(({order: a}, {order: b}) => {\n    if (a == null && b == null) return 0\n    if (a == null) return -1\n    if (b == null) return 1\n    return a - b\n  })\n}\n\nexport function validateWidths(\n  panels: PanelElement[],\n  widthsToValidate: number[],\n  containerWidth: number,\n): number[] {\n  // Clamp widths proportionally to total 100\n  const total = widthsToValidate.reduce((total, width) => total + width, 0)\n  const widths = [...widthsToValidate].map((width) => (width / total) * 100)\n\n  let remainingWidth = 0\n\n  for (let index = 0; index < panels.length; index++) {\n    const panel = panels[index]\n    const width = widths[index]\n    const nextWidth = getNextWidth(panel, width, containerWidth)\n    if (width != nextWidth) {\n      remainingWidth += width - nextWidth\n      widths[index] = nextWidth\n    }\n  }\n\n  if (remainingWidth.toFixed(3) !== '0.000') {\n    for (let index = 0; index < panels.length; index++) {\n      const panel = panels[index]\n\n      let {maxWidth, minWidth} = panel\n\n      minWidth = (minWidth / containerWidth) * 100\n      if (maxWidth != null) {\n        maxWidth = (maxWidth / containerWidth) * 100\n      }\n\n      const width = Math.min(\n        // eslint-disable-next-line no-negated-condition\n        maxWidth != null ? maxWidth : 100,\n        Math.max(minWidth, widths[index] + remainingWidth),\n      )\n\n      if (width !== widths[index]) {\n        remainingWidth -= width - widths[index]\n        widths[index] = width\n\n        if (Math.abs(remainingWidth).toFixed(3) === '0.000') {\n          break\n        }\n      }\n    }\n  }\n\n  return widths\n}\n\nexport function getDefaultWidths(panels: PanelElement[]): number[] {\n  let panelsWithoutWidth = panels.length\n  let remainingWidthTotal = 100\n\n  const widthsWithNulls = panels.map((panel) => {\n    if (panel.defaultSize) {\n      remainingWidthTotal -= panel.defaultSize\n      panelsWithoutWidth -= 1\n      return panel.defaultSize\n    }\n    return null\n  })\n\n  const defaultWidth = remainingWidthTotal / panelsWithoutWidth\n  const widths = widthsWithNulls.map((width) => {\n    if (width === null) return defaultWidth\n    return width\n  })\n\n  return widths\n}\n","// Slightly modified version of react-resizable-panels\n// https://github.com/bvaughn/react-resizable-panels/tree/main/packages/react-resizable-panels\n\nimport {\n  type CSSProperties,\n  type FunctionComponent,\n  type PropsWithChildren,\n  useCallback,\n  useEffect,\n  useLayoutEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react'\nimport {PresentationPanelsContext} from 'sanity/_singletons'\nimport {styled} from 'styled-components'\n\nimport {\n  type ElementMap,\n  type InitialDragState,\n  type PanelElement,\n  type PanelsState,\n  type ResizerElement,\n} from './types'\nimport {usePanelsStorage} from './usePanelsStorage'\nimport {\n  getDefaultWidths,\n  getNextWidths,\n  getOffset,\n  getPanelWidth,\n  getSortedElements,\n  isPanel,\n  isResizer,\n  validateWidths,\n} from './util'\n\nconst PanelsWrapper = styled.div`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n`\n\nexport const Panels: FunctionComponent<PropsWithChildren> = function ({children}) {\n  const panelsEl = useRef<HTMLDivElement | null>(null)\n\n  const [elements, setElements] = useState<ElementMap>(new Map())\n\n  const panels = useMemo(() => getSortedElements(elements).filter(isPanel), [elements])\n\n  const [widths, setWidths] = useState<number[]>([])\n  const [activeResizer, setActiveResizer] = useState<string | null>(null)\n\n  const panelsRef = useRef<PanelsState>({\n    elements,\n    panels,\n    widths,\n  })\n\n  const getPanelStyle = useCallback(\n    (id: string): CSSProperties => {\n      return {\n        flexGrow: getPanelWidth(panels, id, widths),\n        pointerEvents: activeResizer === null ? undefined : 'none',\n      }\n    },\n    [activeResizer, panels, widths],\n  )\n\n  const registerElement = useCallback((id: string, data: PanelElement | ResizerElement) => {\n    setElements((prev) => {\n      if (prev.has(id)) return prev\n      const next = new Map(prev)\n      next.set(id, data)\n      return next\n    })\n  }, [])\n  const unregisterElement = useCallback((id: string) => {\n    setElements((prev) => {\n      if (!prev.has(id)) return prev\n      const next = new Map(prev)\n      next.delete(id)\n      return next\n    })\n  }, [])\n\n  const dragRef = useRef<InitialDragState>({\n    containerWidth: window.innerWidth,\n    dragOffset: 0,\n    panelAfter: null,\n    panelBefore: null,\n    resizerIndex: -1,\n    resizerRect: null,\n    startX: 0,\n    widths: [],\n  })\n\n  const startDragging = useCallback(\n    (id: string, event: MouseEvent) => {\n      const elementsArr = getSortedElements(elements)\n      const index = elementsArr.findIndex((el) => el.id === id)\n\n      const resizer = elements.get(id)\n      if (!resizer || !isResizer(resizer)) return\n      const resizeElement = resizer.el.current\n      if (!resizeElement) return\n\n      dragRef.current = {\n        resizerIndex: index,\n        panelBefore: elementsArr.reduce(\n          (acc, el, i) => (isPanel(el) && i < index ? el : acc),\n          null as PanelElement | null,\n        ),\n        panelAfter: elementsArr.reduce(\n          (acc, el, i) => (acc === null && isPanel(el) && i > index ? el : acc),\n          null as PanelElement | null,\n        ),\n        containerWidth: window.innerWidth,\n        startX: event.pageX,\n        dragOffset: getOffset(event, resizeElement),\n        resizerRect: resizeElement.getBoundingClientRect(),\n        widths: panelsRef.current.widths,\n      }\n\n      setActiveResizer(id)\n    },\n    [elements],\n  )\n\n  const stopDragging = useCallback(() => {\n    setActiveResizer(null)\n  }, [])\n\n  const drag = useCallback(\n    (id: string, event: MouseEvent) => {\n      event.preventDefault()\n      event.stopPropagation()\n\n      const {containerWidth, dragOffset, panelBefore, panelAfter, resizerRect} = dragRef.current\n\n      // eslint-disable-next-line no-eq-null\n      if (panelBefore == null || panelAfter == null) {\n        return\n      }\n\n      const resizer = elements.get(id)\n      if (!resizer || !isResizer(resizer)) return\n      const resizeElement = resizer.el.current\n      if (!resizeElement) return\n\n      const offset = getOffset(event, resizeElement, dragOffset, resizerRect)\n\n      if (offset === 0) {\n        return\n      }\n\n      const {widths: prevWidths} = panelsRef.current\n      const rect = panelsEl.current!.getBoundingClientRect()\n      const delta = (offset / rect.width) * 100\n\n      const nextWidths = getNextWidths(\n        delta,\n        containerWidth,\n        panelBefore,\n        panelAfter,\n        panelsRef.current,\n        dragRef.current,\n      )\n\n      const widthsChanged = prevWidths.some((prevWidth, i) => prevWidth !== nextWidths[i])\n\n      if (widthsChanged) {\n        setWidths(nextWidths)\n      }\n    },\n    [elements],\n  )\n\n  // For setting the panels state\n  useLayoutEffect(() => {\n    panelsRef.current.elements = elements\n    panelsRef.current.panels = panels\n    panelsRef.current.widths = widths\n  }, [elements, panels, widths])\n\n  const storage = usePanelsStorage()\n\n  // For setting default sizing when panels are updated\n  useLayoutEffect(() => {\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    const {widths} = panelsRef.current\n\n    if (widths.length === panels.length) {\n      return\n    }\n\n    const storedWidths = storage.get(panels)\n\n    if (storedWidths) {\n      const validatedStoredWidths = validateWidths(panels, storedWidths, window.innerWidth)\n      setWidths(validatedStoredWidths)\n      return\n    }\n\n    const defaultWidths = getDefaultWidths(panels)\n    setWidths(defaultWidths)\n  }, [storage, panels])\n\n  // For storing current widths in localStorage\n  useEffect(() => {\n    if (!widths.length) return\n    storage.setDebounced(panels, widths)\n  }, [storage, panels, widths])\n\n  useLayoutEffect(() => {\n    const resizeObserver = new ResizeObserver(() => {\n      // eslint-disable-next-line @typescript-eslint/no-shadow\n      const {panels, widths: prevWidths} = panelsRef.current\n\n      const nextWidths = validateWidths(panels, prevWidths, window.innerWidth)\n\n      const widthsChanged = prevWidths.some((prevWidth, i) => prevWidth !== nextWidths[i])\n      if (widthsChanged) {\n        setWidths(nextWidths)\n      }\n    })\n\n    resizeObserver.observe(panelsEl.current!)\n\n    return () => {\n      resizeObserver.disconnect()\n    }\n  }, [])\n\n  const context = useMemo(\n    () => ({\n      activeResizer,\n      drag,\n      getPanelStyle,\n      registerElement,\n      startDragging,\n      stopDragging,\n      unregisterElement,\n    }),\n    [\n      activeResizer,\n      drag,\n      getPanelStyle,\n      registerElement,\n      startDragging,\n      stopDragging,\n      unregisterElement,\n    ],\n  )\n\n  return (\n    <PresentationPanelsContext.Provider value={context}>\n      <PanelsWrapper ref={panelsEl}>{children}</PanelsWrapper>\n    </PresentationPanelsContext.Provider>\n  )\n}\n","import {Box, Card, type CardProps, Container, Flex, Inline, Stack, Text} from '@sanity/ui'\nimport {type ReactNode} from 'react'\nimport {useTranslation} from 'sanity'\n\nimport {Button} from '../../ui-components'\nimport {presentationLocaleNamespace} from '../i18n'\n\nexport function ErrorCard(\n  props: {\n    children?: ReactNode\n    message: string\n    onRetry?: () => void\n    onContinueAnyway?: () => void\n  } & CardProps,\n): React.JSX.Element {\n  const {children, message, onRetry, onContinueAnyway, ...restProps} = props\n\n  const {t} = useTranslation(presentationLocaleNamespace)\n\n  const retryButton = (\n    <Button mode=\"ghost\" onClick={onRetry} text={t('error-card.retry-button.text')} />\n  )\n  const continueAnywayButton = (\n    <Button\n      mode=\"ghost\"\n      tone=\"critical\"\n      onClick={onContinueAnyway}\n      text={t('error-card.continue-button.text')}\n    />\n  )\n\n  return (\n    <Card height=\"fill\" {...restProps}>\n      <Flex align=\"center\" height=\"fill\" justify=\"center\">\n        <Container padding={4} sizing=\"border\" width={0}>\n          <Stack space={4}>\n            <Stack space={3}>\n              <Text size={1} weight=\"semibold\">\n                {t('error-card.title')}\n              </Text>\n              <Text muted size={1}>\n                {message}\n              </Text>\n            </Stack>\n\n            {children}\n\n            {onRetry && onContinueAnyway ? (\n              <Inline space={2}>\n                {retryButton}\n                {continueAnywayButton}\n              </Inline>\n            ) : onRetry ? (\n              <Box>{retryButton}</Box>\n            ) : onContinueAnyway ? (\n              <Box>{continueAnywayButton}</Box>\n            ) : null}\n          </Stack>\n        </Container>\n      </Flex>\n    </Card>\n  )\n}\n","import {forwardRef} from 'react'\nimport {StateLink} from 'sanity/router'\nimport {type ChildLinkProps} from 'sanity/structure'\n\nimport {type PresentationSearchParams} from '../types'\n\nexport const ChildLink = forwardRef(function ChildLink(\n  props: ChildLinkProps & {\n    childType: string\n    searchParams: PresentationSearchParams\n  },\n  ref: React.ForwardedRef<HTMLAnchorElement>,\n) {\n  const {childId, childType, childPayload, childParameters, searchParams, ...rest} = props\n\n  return (\n    <StateLink\n      {...rest}\n      ref={ref}\n      state={{\n        id: childId,\n        type: childType,\n        _searchParams: Object.entries({...searchParams, ...childParameters}),\n      }}\n    />\n  )\n})\n","import {forwardRef} from 'react'\nimport {pathToString} from 'sanity'\nimport {type ReferenceChildLinkProps} from 'sanity/structure'\n\nimport {type PresentationSearchParams} from '../types'\nimport {ChildLink} from './ChildLink'\n\nexport const ReferenceChildLink = forwardRef(function ReferenceChildLink(\n  props: ReferenceChildLinkProps & {searchParams: PresentationSearchParams},\n  ref: React.ForwardedRef<HTMLAnchorElement>,\n) {\n  const {documentId, documentType, parentRefPath, template, searchParams, ...rest} = props\n\n  return (\n    <ChildLink\n      {...rest}\n      ref={ref}\n      childId={documentId}\n      childType={documentType}\n      childPayload={template?.params}\n      childParameters={{\n        parentRefPath: pathToString(parentRefPath),\n        ...(template && {template: template?.id}),\n      }}\n      searchParams={searchParams}\n    />\n  )\n})\n","import {toString as pathToString} from '@sanity/util/paths'\nimport {forwardRef, type PropsWithChildren, useCallback, useMemo} from 'react'\nimport {getPublishedId, useUnique} from 'sanity'\nimport {StateLink, useRouter} from 'sanity/router'\nimport {\n  type BackLinkProps,\n  type ChildLinkProps,\n  PaneRouterContext,\n  type PaneRouterContextValue,\n  type ReferenceChildLinkProps,\n} from 'sanity/structure'\n\nimport {\n  type PresentationNavigate,\n  type PresentationParamsContextValue,\n  type PresentationSearchParams,\n  type StructureDocumentPaneParams,\n} from '../types'\nimport {ChildLink} from './ChildLink'\nimport {ReferenceChildLink} from './ReferenceChildLink'\n\nfunction encodeQueryString(params: Record<string, unknown> = {}): string {\n  const parts = Object.entries(params)\n    .map(([key, value]) => `${key}=${value}`)\n    .join('&')\n\n  return parts.length ? `?${parts}` : ''\n}\n\nfunction resolveQueryStringFromParams(nextParams: Record<string, string | undefined>) {\n  const allowed = [\n    'comment',\n    'inspect',\n    'instruction',\n    'pathKey',\n    'rev',\n    'since',\n    'template',\n    'view',\n  ] satisfies Array<keyof PresentationParamsContextValue> as string[]\n\n  const safeNextParams = Object.entries(nextParams)\n    .filter(([key]) => allowed.includes(key))\n    .reduce((obj, [key, value]) => {\n      if (value == undefined) return obj\n      return {...obj, [key]: value}\n    }, {})\n\n  return encodeQueryString(safeNextParams)\n}\n\nconst BackLink = forwardRef(function BackLink(\n  props: BackLinkProps & {searchParams: PresentationSearchParams},\n  ref: React.ForwardedRef<HTMLAnchorElement>,\n) {\n  const {searchParams, ...restProps} = props\n  return (\n    <StateLink\n      {...restProps}\n      ref={ref}\n      state={{\n        type: undefined,\n        _searchParams: Object.entries(searchParams),\n      }}\n      title={undefined}\n    />\n  )\n})\n\nexport type PresentationPaneRouterProviderProps = PropsWithChildren<{\n  onEditReference: PresentationNavigate\n  onStructureParams: (params: StructureDocumentPaneParams) => void\n  refs?: {_id: string; _type: string}[]\n  searchParams: PresentationSearchParams\n  structureParams: StructureDocumentPaneParams\n}>\n\nexport function PresentationPaneRouterProvider(\n  props: PresentationPaneRouterProviderProps,\n): React.JSX.Element {\n  const {children, onEditReference, onStructureParams, structureParams, searchParams, refs} = props\n\n  const {state: routerState, resolvePathFromState} = useRouter()\n\n  const routerSearchParams = useUnique(Object.fromEntries(routerState._searchParams || []))\n\n  const createPathWithParams: PaneRouterContextValue['createPathWithParams'] = useCallback(\n    (nextParams) => {\n      const path = resolvePathFromState(routerState)\n      const qs = resolveQueryStringFromParams({\n        ...routerSearchParams,\n        ...nextParams,\n      })\n      return `${path}${qs}`\n    },\n    [resolvePathFromState, routerSearchParams, routerState],\n  )\n\n  const context: PaneRouterContextValue = useMemo(() => {\n    return {\n      index: 0,\n      groupIndex: 0,\n      siblingIndex: 0,\n      payload: {},\n      // oxlint-disable-next-line no-explicit-any\n      params: structureParams as any,\n      hasGroupSiblings: false,\n      groupLength: 1,\n      routerPanesState: [],\n      ChildLink: forwardRef<HTMLAnchorElement, ChildLinkProps>(\n        function ContextChildLink(childLinkProps, ref) {\n          const {childId, ...rest} = childLinkProps\n          const doc = refs?.find((r) => r._id === childId || getPublishedId(r._id) === childId)\n\n          if (!doc) {\n            console.warn(`ChildLink: No document found for childId \"${childId}\"`)\n            return null\n          }\n\n          return (\n            <ChildLink\n              {...rest}\n              ref={ref}\n              childId={childId}\n              childType={doc._type}\n              searchParams={searchParams}\n            />\n          )\n        },\n      ),\n      BackLink: forwardRef<HTMLAnchorElement, BackLinkProps>(\n        function ContextBackLink(backLinkProps, ref) {\n          return <BackLink {...backLinkProps} ref={ref} searchParams={searchParams} />\n        },\n      ),\n      ReferenceChildLink: forwardRef<HTMLAnchorElement, ReferenceChildLinkProps>(\n        function ContextReferenceChildLink(childLinkProps, ref) {\n          return <ReferenceChildLink {...childLinkProps} ref={ref} searchParams={searchParams} />\n        },\n      ),\n      ParameterizedLink: () => {\n        throw new Error('ParameterizedLink not implemented')\n      },\n      closeCurrentAndAfter: () => {\n        console.warn('closeCurrentAndAfter')\n      },\n      handleEditReference: (options) => {\n        const {id, template, type, parentRefPath, version} = options\n        onEditReference({\n          state: {id, type},\n          params: {\n            template: template.id,\n            parentRefPath: pathToString(parentRefPath),\n            version,\n          },\n        })\n      },\n      replaceCurrent: (pane) => {\n        console.warn('replaceCurrent', pane)\n      },\n      closeCurrent: () => {\n        console.warn('closeCurrent')\n      },\n      duplicateCurrent: (pane) => {\n        console.warn('duplicateCurrent', pane)\n      },\n      setView: (viewId) => {\n        console.warn('setView', viewId)\n      },\n      setParams: onStructureParams,\n      setPayload: (payload) => {\n        console.warn('setPayload', payload)\n      },\n      navigateIntent: (intentName, intentParams, options) => {\n        console.warn('navigateIntent', intentName, intentParams, options)\n      },\n      createPathWithParams,\n    }\n  }, [\n    createPathWithParams,\n    onEditReference,\n    onStructureParams,\n    refs,\n    searchParams,\n    structureParams,\n  ])\n\n  return <PaneRouterContext.Provider value={context}>{children}</PaneRouterContext.Provider>\n}\n","import {Card, Code, Flex, Label, Stack} from '@sanity/ui'\nimport {type ErrorInfo, useCallback, useEffect, useMemo, useState} from 'react'\nimport {getPublishedId, useTranslation} from 'sanity'\nimport {\n  DocumentListPane as StructureDocumentListPane,\n  PaneLayout,\n  type PaneNode,\n  StructureToolProvider,\n} from 'sanity/structure'\nimport {styled} from 'styled-components'\n\nimport {ErrorBoundary} from '../../ui-components'\nimport {ErrorCard} from '../components/ErrorCard'\nimport {presentationLocaleNamespace} from '../i18n'\nimport {PresentationPaneRouterProvider} from '../paneRouter/PresentationPaneRouterProvider'\nimport {\n  type MainDocumentState,\n  type PresentationNavigate,\n  type PresentationSearchParams,\n  type StructureDocumentPaneParams,\n} from '../types'\nimport {usePresentationTool} from '../usePresentationTool'\n\nconst RootLayout = styled(PaneLayout)`\n  height: 100%;\n`\n\nconst Root = styled(Flex)`\n  & > div {\n    min-width: none !important;\n    max-width: none !important;\n  }\n`\n\nconst WrappedCode = styled(Code)`\n  white-space: pre-wrap;\n`\n\nexport function DocumentListPane(props: {\n  mainDocumentState?: MainDocumentState\n  onEditReference: PresentationNavigate\n  onStructureParams: (params: StructureDocumentPaneParams) => void\n  searchParams: PresentationSearchParams\n  refs: {_id: string; _type: string}[]\n}): React.JSX.Element {\n  const {mainDocumentState, onEditReference, onStructureParams, searchParams, refs} = props\n\n  const {t} = useTranslation(presentationLocaleNamespace)\n  const {devMode} = usePresentationTool()\n\n  const ids = useMemo(\n    () =>\n      refs\n        .filter((r) => getPublishedId(r._id) !== mainDocumentState?.document?._id)\n        .map((r) => getPublishedId(r._id)),\n    [mainDocumentState, refs],\n  )\n\n  const pane: Extract<PaneNode, {type: 'documentList'}> = useMemo(\n    () => ({\n      id: '$root',\n      options: {\n        filter: '_id in $ids',\n        params: {ids},\n        // defaultOrdering: [{field: '_updatedAt', direction: 'desc'}],\n      },\n      schemaTypeName: '',\n      title: t('document-list-pane.document-list.title'),\n      type: 'documentList',\n    }),\n    [ids, t],\n  )\n\n  const [errorParams, setErrorParams] = useState<{\n    info: ErrorInfo\n    error: Error\n  } | null>(null)\n\n  const handleRetry = useCallback(() => setErrorParams(null), [])\n\n  const [structureParams] = useState(() => ({}))\n\n  // Reset error state when `refs` value schanges\n  useEffect(() => setErrorParams(null), [refs])\n\n  if (errorParams) {\n    return (\n      <ErrorCard flex={1} message={t('document-list-pane.error.text')} onRetry={handleRetry}>\n        {devMode && (\n          // show runtime error message in dev mode\n          <Card overflow=\"auto\" padding={3} radius={2} tone=\"critical\">\n            <Stack space={3}>\n              <Label muted size={0}>\n                {t('presentation-error.label')}\n              </Label>\n              <WrappedCode size={1}>{errorParams.error.message}</WrappedCode>\n            </Stack>\n          </Card>\n        )}\n      </ErrorCard>\n    )\n  }\n\n  return (\n    <ErrorBoundary onCatch={setErrorParams}>\n      <RootLayout>\n        <StructureToolProvider>\n          <PresentationPaneRouterProvider\n            onEditReference={onEditReference}\n            onStructureParams={onStructureParams}\n            structureParams={structureParams}\n            searchParams={searchParams}\n            refs={refs}\n          >\n            <Root direction=\"column\" flex={1}>\n              <StructureDocumentListPane\n                index={0}\n                itemId=\"$root\"\n                pane={pane}\n                // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals\n                paneKey=\"$root\"\n              />\n            </Root>\n          </PresentationPaneRouterProvider>\n        </StructureToolProvider>\n      </RootLayout>\n    </ErrorBoundary>\n  )\n}\n","import {studioPath} from '@sanity/client/csm'\nimport {Card, Code, Label, Stack} from '@sanity/ui'\nimport {type ErrorInfo, Suspense, useCallback, useEffect, useMemo, useState} from 'react'\nimport {type Path, useTranslation} from 'sanity'\nimport {decodeJsonParams} from 'sanity/router'\nimport {\n  DocumentPane as StructureDocumentPane,\n  type DocumentPaneNode,\n  PaneLayout,\n} from 'sanity/structure'\nimport {styled} from 'styled-components'\n\nimport {ErrorBoundary} from '../../ui-components'\nimport {ErrorCard} from '../components/ErrorCard'\nimport {presentationLocaleNamespace} from '../i18n'\nimport {PresentationPaneRouterProvider} from '../paneRouter/PresentationPaneRouterProvider'\nimport {PresentationSpinner} from '../PresentationSpinner'\nimport {\n  type PresentationNavigate,\n  type PresentationSearchParams,\n  type PresentationStateParams,\n  type StructureDocumentPaneParams,\n} from '../types'\nimport {usePresentationTool} from '../usePresentationTool'\n\nconst WrappedCode = styled(Code)`\n  white-space: pre-wrap;\n`\n\nexport function DocumentPane(props: {\n  documentId: string\n  documentType: string\n  onFocusPath: (state: Required<PresentationStateParams>) => void\n  onEditReference: PresentationNavigate\n  onStructureParams: (params: StructureDocumentPaneParams) => void\n  structureParams: StructureDocumentPaneParams\n  searchParams: PresentationSearchParams\n}): React.JSX.Element {\n  const {\n    documentId,\n    documentType,\n    onFocusPath,\n    onEditReference,\n    onStructureParams,\n    searchParams,\n    structureParams,\n  } = props\n  const {template, templateParams} = structureParams\n\n  const {t} = useTranslation(presentationLocaleNamespace)\n  const {devMode} = usePresentationTool()\n\n  const paneDocumentNode: DocumentPaneNode = useMemo(\n    () => ({\n      id: documentId,\n      options: {\n        id: documentId,\n        type: documentType,\n        template,\n        templateParameters: decodeJsonParams(templateParams),\n      },\n      title: '',\n      type: 'document',\n    }),\n    [documentId, documentType, template, templateParams],\n  )\n\n  const handleFocusPath = useCallback(\n    (path: Path) => {\n      return onFocusPath({\n        id: documentId,\n        type: documentType,\n        path: studioPath.toString(path),\n      })\n    },\n    [documentId, documentType, onFocusPath],\n  )\n\n  const [errorParams, setErrorParams] = useState<{\n    info: ErrorInfo\n    error: Error\n  } | null>(null)\n\n  const handleRetry = useCallback(() => setErrorParams(null), [])\n\n  // Reset error state when parameters change\n  useEffect(() => {\n    setErrorParams(null)\n  }, [documentId, documentType, structureParams])\n\n  if (errorParams) {\n    return (\n      <ErrorCard flex={1} message={t('document-pane.error.text')} onRetry={handleRetry}>\n        {devMode && (\n          // show runtime error message in dev mode\n          <Card overflow=\"auto\" padding={3} radius={2} tone=\"critical\">\n            <Stack space={3}>\n              <Label muted size={0}>\n                {t('presentation-error.label')}\n              </Label>\n              <WrappedCode size={1}>{errorParams.error.message}</WrappedCode>\n            </Stack>\n          </Card>\n        )}\n      </ErrorCard>\n    )\n  }\n\n  return (\n    <ErrorBoundary onCatch={setErrorParams}>\n      <PaneLayout style={{height: '100%'}}>\n        <PresentationPaneRouterProvider\n          searchParams={searchParams}\n          onEditReference={onEditReference}\n          onStructureParams={onStructureParams}\n          structureParams={structureParams}\n        >\n          <Suspense fallback={<PresentationSpinner />}>\n            <StructureDocumentPane\n              // eslint-disable-next-line @sanity/i18n/no-attribute-string-literals\n              paneKey=\"document\"\n              index={1}\n              itemId=\"document\"\n              pane={paneDocumentNode}\n              onFocusPath={handleFocusPath}\n            />\n          </Suspense>\n        </PresentationPaneRouterProvider>\n      </PaneLayout>\n    </ErrorBoundary>\n  )\n}\n","import {StructureToolProvider} from '../../structure/StructureToolProvider'\nimport {\n  type PresentationNavigate,\n  type PresentationSearchParams,\n  type PresentationStateParams,\n  type StructureDocumentPaneParams,\n} from '../types'\nimport {DocumentPane} from './DocumentPane'\n\nexport function DocumentPanel(props: {\n  documentId: string\n  documentType: string\n  onEditReference: PresentationNavigate\n  onFocusPath: (state: Required<PresentationStateParams>) => void\n  onStructureParams: (params: StructureDocumentPaneParams) => void\n  searchParams: PresentationSearchParams\n  structureParams: StructureDocumentPaneParams\n}): React.JSX.Element {\n  const {\n    documentId,\n    documentType,\n    onFocusPath,\n    onEditReference,\n    onStructureParams,\n    searchParams,\n    structureParams,\n  } = props\n  return (\n    <StructureToolProvider>\n      <DocumentPane\n        documentId={documentId}\n        documentType={documentType}\n        onEditReference={onEditReference}\n        onFocusPath={onFocusPath}\n        onStructureParams={onStructureParams}\n        searchParams={searchParams}\n        structureParams={structureParams}\n      />\n    </StructureToolProvider>\n  )\n}\n","import {type SchemaType} from '@sanity/types'\nimport {useEffect, useState} from 'react'\nimport {\n  getPreviewStateObservable,\n  type PreviewValue,\n  type SanityDocument,\n  useDocumentPreviewStore,\n  usePerspective,\n} from 'sanity'\n\ninterface PreviewState {\n  isLoading?: boolean\n  snapshot?: PreviewValue | Partial<SanityDocument> | null\n}\n\nexport default function usePreviewState(documentId: string, schemaType?: SchemaType): PreviewState {\n  const documentPreviewStore = useDocumentPreviewStore()\n  const [preview, setPreview] = useState<PreviewState>({})\n  const {perspectiveStack} = usePerspective()\n  useEffect(() => {\n    if (!schemaType) {\n      return undefined\n    }\n    const subscription = getPreviewStateObservable(\n      documentPreviewStore,\n      schemaType,\n      documentId,\n      perspectiveStack,\n    ).subscribe((state) => {\n      setPreview(state)\n    })\n\n    return () => {\n      subscription?.unsubscribe()\n    }\n  }, [documentPreviewStore, schemaType, documentId, perspectiveStack])\n\n  return preview\n}\n","import {WarningOutlineIcon} from '@sanity/icons'\nimport {Box, Card, Flex, Text} from '@sanity/ui'\nimport {type HTMLProps, useCallback, useMemo} from 'react'\nimport {\n  getPreviewValueWithFallback,\n  PreviewCard,\n  SanityDefaultPreview,\n  Translate,\n  useSchema,\n  useTranslation,\n} from 'sanity'\nimport {StateLink} from 'sanity/router'\n\nimport {presentationLocaleNamespace} from '../i18n'\nimport {\n  type MainDocumentState,\n  type PresentationNavigate,\n  type PresentationSearchParams,\n  type PresentationStateParams,\n  type StructureDocumentPaneParams,\n} from '../types'\nimport {DocumentListPane} from './DocumentListPane'\nimport {DocumentPanel} from './DocumentPanel'\nimport usePreviewState from './usePreviewState'\n\nexport function ContentEditor(props: {\n  documentId?: string\n  documentType?: string\n  mainDocumentState?: MainDocumentState\n  onEditReference: PresentationNavigate\n  onFocusPath: (state: Required<PresentationStateParams>) => void\n  onStructureParams: (params: StructureDocumentPaneParams) => void\n  refs: {_id: string; _type: string}[]\n  structureParams: StructureDocumentPaneParams\n  searchParams: PresentationSearchParams\n}): React.JSX.Element {\n  const {\n    documentId,\n    documentType,\n    mainDocumentState,\n    onEditReference,\n    onFocusPath,\n    onStructureParams,\n    refs,\n    searchParams,\n    structureParams,\n  } = props\n\n  const {t} = useTranslation(presentationLocaleNamespace)\n  const schema = useSchema()\n\n  const MainDocumentLink = useCallback(\n    // eslint-disable-next-line @typescript-eslint/no-shadow\n    (props: HTMLProps<HTMLAnchorElement>) => {\n      return (\n        <StateLink\n          {...props}\n          state={{\n            id: mainDocumentState?.document?._id,\n            type: mainDocumentState?.document?._type,\n            _searchParams: Object.entries(searchParams),\n          }}\n        />\n      )\n    },\n    [mainDocumentState, searchParams],\n  )\n\n  const schemaType = useMemo(\n    () => schema.get(mainDocumentState?.document?._type || 'shoe')!,\n    [mainDocumentState, schema],\n  )\n\n  const previewState = usePreviewState(mainDocumentState?.document?._id || '', schemaType)\n\n  const preview = useMemo(() => {\n    if (!mainDocumentState?.document) return null\n\n    return (\n      <SanityDefaultPreview\n        {...getPreviewValueWithFallback({\n          snapshot: previewState.snapshot,\n          fallback: mainDocumentState!.document,\n        })}\n        schemaType={schemaType}\n        status={\n          <Card padding={1} radius={2} shadow={1}>\n            <Text muted size={0} weight=\"medium\">\n              {t('main-document.label')}\n            </Text>\n          </Card>\n        }\n      />\n    )\n  }, [mainDocumentState, schemaType, t, previewState])\n\n  if (documentId && documentType) {\n    return (\n      <DocumentPanel\n        documentId={documentId}\n        documentType={documentType}\n        onEditReference={onEditReference}\n        onFocusPath={onFocusPath}\n        onStructureParams={onStructureParams}\n        searchParams={searchParams}\n        structureParams={structureParams}\n      />\n    )\n  }\n\n  return (\n    <Flex direction=\"column\" flex={1} height=\"fill\">\n      {mainDocumentState && (\n        <Card padding={3} tone={mainDocumentState.document ? 'inherit' : 'caution'}>\n          {mainDocumentState.document ? (\n            <PreviewCard\n              __unstable_focusRing\n              // oxlint-disable-next-line no-explicit-any\n              as={MainDocumentLink as any}\n              data-as=\"a\"\n              radius={2}\n              sizing=\"border\"\n              tone=\"inherit\"\n            >\n              {preview}\n            </PreviewCard>\n          ) : (\n            <Card padding={2} radius={2} tone=\"inherit\">\n              <Flex gap={3}>\n                <Box flex=\"none\">\n                  <Text size={1}>\n                    <WarningOutlineIcon />\n                  </Text>\n                </Box>\n                <Box flex={1}>\n                  <Text size={1}>\n                    <Translate\n                      t={t}\n                      i18nKey=\"main-document.missing.text\"\n                      components={{Code: 'code'}}\n                      values={{path: mainDocumentState.path}}\n                    />\n                  </Text>\n                </Box>\n              </Flex>\n            </Card>\n          )}\n        </Card>\n      )}\n\n      <DocumentListPane\n        mainDocumentState={mainDocumentState}\n        onEditReference={onEditReference}\n        onStructureParams={onStructureParams}\n        searchParams={searchParams}\n        refs={refs}\n      />\n    </Flex>\n  )\n}\n","import {useState} from 'react'\nimport {v4 as uuid} from 'uuid'\n\nexport function usePanelId(id?: string): string {\n  const [panelId] = useState(() => id || uuid())\n  return panelId\n}\n","import {\n  type FunctionComponent,\n  type MouseEvent as ReactMouseEvent,\n  useCallback,\n  useContext,\n  useEffect,\n  useLayoutEffect,\n  useRef,\n} from 'react'\nimport {PresentationPanelsContext} from 'sanity/_singletons'\nimport {styled} from 'styled-components'\n\nimport {usePanelId} from './usePanelId'\n\nconst Resizer = styled.div`\n  position: relative;\n`\nconst ResizerInner = styled.div<{\n  $disabled: boolean\n}>`\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: -5px;\n  width: 9px;\n  z-index: 10;\n  cursor: ${({$disabled}) => ($disabled ? 'auto' : 'ew-resize')};\n\n  /* Border */\n  & > span:nth-child(1) {\n    display: block;\n    border-left: 1px solid var(--card-border-color);\n    position: absolute;\n    top: 0;\n    left: 4px;\n    bottom: 0;\n    transition: opacity 200ms;\n  }\n\n  ${({$disabled}) =>\n    !$disabled &&\n    `\n    /* Hover effect */\n    & > span:nth-child(2) {\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 9px;\n      bottom: 0;\n      background-color: var(--card-border-color);\n      opacity: 0;\n      transition: opacity 150ms;\n    }\n\n    @media (hover: hover) {\n      &:hover > span:nth-child(2) {\n        opacity: 0.2;\n      }\n    }\n  `}\n`\n\nexport