From 1e797970541b3646fcd2b4997b32282ab52bd887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rge=20N=C3=A6ss?= <bjoerge@gmail.com>
Date: Mon, 30 Sep 2024 15:53:26 +0200
Subject: [PATCH 1/9] fix(core): emit setting from localStorage immediately
 upon subscription (#7560)

---
 .../src/core/store/key-value/localStorageSWR.ts | 17 +++--------------
 1 file changed, 3 insertions(+), 14 deletions(-)

diff --git a/packages/sanity/src/core/store/key-value/localStorageSWR.ts b/packages/sanity/src/core/store/key-value/localStorageSWR.ts
index d4a4273d6ea..366e428e926 100644
--- a/packages/sanity/src/core/store/key-value/localStorageSWR.ts
+++ b/packages/sanity/src/core/store/key-value/localStorageSWR.ts
@@ -1,27 +1,16 @@
 import {isEqual} from 'lodash'
-import {fromEvent, merge, NEVER} from 'rxjs'
-import {distinctUntilChanged, filter, map, tap} from 'rxjs/operators'
+import {merge, of} from 'rxjs'
+import {distinctUntilChanged, tap} from 'rxjs/operators'
 
 import {localStoreStorage} from './storage/localStoreStorage'
 import {type KeyValueStore, type KeyValueStoreValue} from './types'
 
-// Whether or not to enable instant user sync between tabs
-// if set to true, the setting will update instantly across all tabs
-const ENABLE_CROSS_TAB_SYNC = false
-
 /**
  * Wraps a KeyValueStore and adds Stale-While-Revalidate (SWR) behavior to it
  */
 export function withLocalStorageSWR(wrappedStore: KeyValueStore): KeyValueStore {
-  const storageEvent = ENABLE_CROSS_TAB_SYNC ? fromEvent<StorageEvent>(window, 'storage') : NEVER
-
   function getKey(key: string) {
-    const lsUpdates = storageEvent.pipe(
-      filter((event) => event.key === key),
-      map(() => localStoreStorage.getKey(key)),
-    )
-
-    return merge(lsUpdates, wrappedStore.getKey(key)).pipe(
+    return merge(of(localStoreStorage.getKey(key)), wrappedStore.getKey(key)).pipe(
       distinctUntilChanged(isEqual),
       tap((value) => {
         localStoreStorage.setKey(key, value)

From ae1c9c28b8fce496483a1c9512f593009f478171 Mon Sep 17 00:00:00 2001
From: RitaDias <rita@sanity.io>
Date: Mon, 30 Sep 2024 16:05:39 +0200
Subject: [PATCH 2/9] chore(sanity): update naming of draft created telemetry
 event (#7561)

---
 .../panes/document/__telemetry__/documentPanes.telemetry.ts     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/structure/panes/document/__telemetry__/documentPanes.telemetry.ts b/packages/sanity/src/structure/panes/document/__telemetry__/documentPanes.telemetry.ts
index 5718de4f404..ef604a2aed1 100644
--- a/packages/sanity/src/structure/panes/document/__telemetry__/documentPanes.telemetry.ts
+++ b/packages/sanity/src/structure/panes/document/__telemetry__/documentPanes.telemetry.ts
@@ -14,7 +14,7 @@ export const DocumentURLCopied = defineEvent({
  * @internal
  */
 export const CreatedDraft = defineEvent({
-  name: 'Create a new draft',
+  name: 'New Draft Created',
   version: 1,
   description: 'User created a new draft',
 })

From 7fcf22a948a1806c7c7409355df5d0b8617c576e Mon Sep 17 00:00:00 2001
From: Jordan Lawrence <jordanl17@me.com>
Date: Mon, 30 Sep 2024 16:26:13 +0100
Subject: [PATCH 3/9] feat(core): specific error when dev server is stopped
 (#7476)

* feat(core): when dev server stops, highlight this with own error boundary

* feat(core): simplified, and using nested error boundary for catching dev server stop error

* refactor(core): simplifying use of DevServerStatus as lazy import

* refactor(core): naming refactor

* feat(core): removing dev server stopped toast as unnecessary

* refactor(core): using built ins from vite; making more explicit this is only for default vite

* chore: moving babel vite transform to test-config package

* chore: moving babel deps to test-config

* chore: tidy to lock and named export for type used

* fix: ignoring un-identified uses of babel presets and plugins in test-config

* chore: naming of vite dev server stopped error
---
 package.json                                  |  3 -
 packages/@repo/test-config/.depcheckrc.json   |  8 +++
 .../test-config/jest/createJestConfig.mjs     |  7 +-
 packages/@repo/test-config/package.json       |  4 ++
 .../sanity/src/core/error/ErrorLogger.tsx     |  4 ++
 .../src/core/studio/StudioErrorBoundary.tsx   | 24 ++++++-
 .../sanity/src/core/studio/StudioLayout.tsx   | 11 ++-
 .../src/core/studio/ViteDevServerStopped.tsx  | 69 +++++++++++++++++++
 pnpm-lock.yaml                                | 29 +++++---
 9 files changed, 142 insertions(+), 17 deletions(-)
 create mode 100644 packages/@repo/test-config/.depcheckrc.json
 create mode 100644 packages/sanity/src/core/studio/ViteDevServerStopped.tsx

diff --git a/package.json b/package.json
index 90b1b6822ee..162e8f0ae74 100644
--- a/package.json
+++ b/package.json
@@ -99,9 +99,6 @@
   },
   "prettier": "@sanity/prettier-config",
   "devDependencies": {
-    "@babel/preset-env": "^7.24.7",
-    "@babel/preset-react": "^7.24.7",
-    "@babel/preset-typescript": "^7.24.7",
     "@google-cloud/storage": "^7.11.0",
     "@playwright/test": "1.44.1",
     "@repo/dev-aliases": "workspace:*",
diff --git a/packages/@repo/test-config/.depcheckrc.json b/packages/@repo/test-config/.depcheckrc.json
new file mode 100644
index 00000000000..6f9da0ba787
--- /dev/null
+++ b/packages/@repo/test-config/.depcheckrc.json
@@ -0,0 +1,8 @@
+{
+  "ignores": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+    "babel-plugin-transform-vite-meta-hot"
+  ]
+}
diff --git a/packages/@repo/test-config/jest/createJestConfig.mjs b/packages/@repo/test-config/jest/createJestConfig.mjs
index 174738b1f3d..8d1f3fbbd6a 100644
--- a/packages/@repo/test-config/jest/createJestConfig.mjs
+++ b/packages/@repo/test-config/jest/createJestConfig.mjs
@@ -1,9 +1,10 @@
 /* eslint-disable tsdoc/syntax */
 
-import devAliases from '@repo/dev-aliases'
-
 import path from 'node:path'
+
+import devAliases from '@repo/dev-aliases'
 import {escapeRegExp, omit} from 'lodash-es'
+
 import {resolveDirName} from './resolveDirName.mjs'
 
 const dirname = resolveDirName(import.meta.url)
@@ -71,7 +72,6 @@ export function createJestConfig(config = {}) {
     resolver: path.resolve(dirname, './resolver.cjs'),
     testEnvironment: path.resolve(dirname, './jsdom.jest.env.ts'),
     setupFiles: [...setupFiles, path.resolve(dirname, './setup.ts')],
-    // testEnvironment: 'jsdom',
     testEnvironmentOptions: {
       url: 'http://localhost:3333',
     },
@@ -103,6 +103,7 @@ export function createJestConfig(config = {}) {
             '@babel/preset-typescript',
             ['@babel/preset-react', {runtime: 'automatic'}],
           ],
+          plugins: ['babel-plugin-transform-vite-meta-hot'],
         },
       ],
     },
diff --git a/packages/@repo/test-config/package.json b/packages/@repo/test-config/package.json
index 8c8c09da1e3..536754f7f34 100644
--- a/packages/@repo/test-config/package.json
+++ b/packages/@repo/test-config/package.json
@@ -9,8 +9,12 @@
     "./vitest": "./vitest/index.mjs"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@jest/globals": "^29.7.0",
     "@repo/dev-aliases": "workspace:*",
+    "babel-plugin-transform-vite-meta-hot": "^1.0.0",
     "dotenv": "^16.4.5",
     "jest-environment-jsdom": "^29.7.0",
     "lodash-es": "^4.17.21",
diff --git a/packages/sanity/src/core/error/ErrorLogger.tsx b/packages/sanity/src/core/error/ErrorLogger.tsx
index 708699b8baf..87dbfb75a50 100644
--- a/packages/sanity/src/core/error/ErrorLogger.tsx
+++ b/packages/sanity/src/core/error/ErrorLogger.tsx
@@ -64,5 +64,9 @@ function isKnownError(err: Error): boolean {
     return true
   }
 
+  if ('ViteDevServerStoppedError' in err && err.ViteDevServerStoppedError) {
+    return true
+  }
+
   return false
 }
diff --git a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
index 7c26dc8179f..32b0de92a00 100644
--- a/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
+++ b/packages/sanity/src/core/studio/StudioErrorBoundary.tsx
@@ -11,7 +11,14 @@ import {
   Stack,
   Text,
 } from '@sanity/ui'
-import {type ComponentType, type ErrorInfo, type ReactNode, useCallback, useState} from 'react'
+import {
+  type ComponentType,
+  type ErrorInfo,
+  lazy,
+  type ReactNode,
+  useCallback,
+  useState,
+} from 'react'
 import {ErrorActions, isDev, isProd} from 'sanity'
 import {styled} from 'styled-components'
 import {useHotModuleReload} from 'use-hot-module-reload'
@@ -22,6 +29,17 @@ import {CorsOriginError} from '../store'
 import {isRecord} from '../util'
 import {CorsOriginErrorScreen, SchemaErrorsScreen} from './screens'
 
+/**
+ * The DevServerStoppedErrorScreen will always have been lazy loaded to client
+ * in instances where it is used, since DevServerStoppedError is only thrown
+ * when this module is loaded, and this screen is also conditional on this error type
+ */
+const DevServerStoppedErrorScreen = lazy(() =>
+  import('./ViteDevServerStopped').then((DevServerStopped) => ({
+    default: DevServerStopped.DevServerStoppedErrorScreen,
+  })),
+)
+
 interface StudioErrorBoundaryProps {
   children: ReactNode
   heading?: string
@@ -80,6 +98,10 @@ export const StudioErrorBoundary: ComponentType<StudioErrorBoundaryProps> = ({
     return <SchemaErrorsScreen schema={error.schema} />
   }
 
+  if (error && 'ViteDevServerStoppedError' in error && error.ViteDevServerStoppedError) {
+    return <DevServerStoppedErrorScreen />
+  }
+
   if (!error) {
     return <ErrorBoundary onCatch={handleCatchError}>{children}</ErrorBoundary>
   }
diff --git a/packages/sanity/src/core/studio/StudioLayout.tsx b/packages/sanity/src/core/studio/StudioLayout.tsx
index 5641104e904..9c992354bcc 100644
--- a/packages/sanity/src/core/studio/StudioLayout.tsx
+++ b/packages/sanity/src/core/studio/StudioLayout.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable i18next/no-literal-string, @sanity/i18n/no-attribute-template-literals */
 import {Card, Flex} from '@sanity/ui'
 import {startCase} from 'lodash'
-import {Suspense, useCallback, useEffect, useMemo, useState} from 'react'
+import {lazy, Suspense, useCallback, useEffect, useMemo, useState} from 'react'
 import {NavbarContext} from 'sanity/_singletons'
 import {RouteScope, useRouter, useRouterState} from 'sanity/router'
 import {styled} from 'styled-components'
@@ -18,6 +18,14 @@ import {
 import {StudioErrorBoundary} from './StudioErrorBoundary'
 import {useWorkspace} from './workspace'
 
+const DetectViteDevServerStopped = lazy(() =>
+  import('./ViteDevServerStopped').then((DevServerStopped) => ({
+    default: DevServerStopped.DetectViteDevServerStopped,
+  })),
+)
+
+const detectViteDevServerStopped = import.meta.hot && process.env.NODE_ENV === 'development'
+
 const SearchFullscreenPortalCard = styled(Card)`
   height: 100%;
   left: 0;
@@ -173,6 +181,7 @@ export function StudioLayoutComponent() {
       {/* By using the tool name as the key on the error boundary, we force it to re-render
           when switching tools, which ensures we don't show the wrong tool having crashed */}
       <StudioErrorBoundary key={activeTool?.name} heading={`The ${activeTool?.name} tool crashed`}>
+        {detectViteDevServerStopped && <DetectViteDevServerStopped />}
         <Card flex={1} hidden={searchFullscreenOpen}>
           {activeTool && activeToolName && (
             <RouteScope
diff --git a/packages/sanity/src/core/studio/ViteDevServerStopped.tsx b/packages/sanity/src/core/studio/ViteDevServerStopped.tsx
new file mode 100644
index 00000000000..bd14ce12eef
--- /dev/null
+++ b/packages/sanity/src/core/studio/ViteDevServerStopped.tsx
@@ -0,0 +1,69 @@
+/* eslint-disable i18next/no-literal-string -- will not support i18n in error boundaries */
+import {Card, Container, Heading, Stack, Text} from '@sanity/ui'
+import {type ReactNode, useCallback, useEffect, useState} from 'react'
+import {type ViteHotContext} from 'vite/types/hot.js'
+
+const ERROR_TITLE = 'Dev server stopped'
+const ERROR_DESCRIPTION =
+  'The development server has stopped. You may need to restart it to continue working.'
+
+class ViteDevServerStoppedError extends Error {
+  ViteDevServerStoppedError: boolean
+
+  constructor() {
+    super(ERROR_TITLE)
+    this.name = 'ViteDevServerStoppedError'
+    this.ViteDevServerStoppedError = true
+  }
+}
+const serverHot = import.meta.hot
+const isViteServer = (hot: unknown): hot is ViteHotContext => Boolean(hot)
+
+const useDetectViteDevServerStopped = () => {
+  const [devServerStopped, setDevServerStopped] = useState(false)
+
+  const markDevServerStopped = useCallback(() => setDevServerStopped(true), [])
+
+  useEffect(() => {
+    // no early return to optimize tree-shaking
+    if (isViteServer(serverHot)) {
+      serverHot.on('vite:ws:disconnect', markDevServerStopped)
+    }
+  }, [markDevServerStopped])
+
+  return {devServerStopped}
+}
+
+const ThrowViteServerStopped = () => {
+  const {devServerStopped} = useDetectViteDevServerStopped()
+
+  if (devServerStopped) throw new ViteDevServerStoppedError()
+
+  return null
+}
+
+export const DetectViteDevServerStopped = (): ReactNode =>
+  isViteServer(serverHot) ? <ThrowViteServerStopped /> : null
+
+export const DevServerStoppedErrorScreen = (): ReactNode => (
+  <Card
+    height="fill"
+    overflow="auto"
+    paddingY={[4, 5, 6, 7]}
+    paddingX={4}
+    sizing="border"
+    tone="critical"
+  >
+    <Container width={3}>
+      <Stack space={4}>
+        <Heading>{ERROR_TITLE}</Heading>
+
+        <Card border radius={2} overflow="auto" padding={4} tone="inherit">
+          <Stack space={4}>
+            <Text size={2}>{ERROR_DESCRIPTION}</Text>
+          </Stack>
+        </Card>
+      </Stack>
+    </Container>
+  </Card>
+)
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c31b61dbb42..bfb45f06393 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -18,15 +18,6 @@ importers:
         specifier: ^10.0.0
         version: 10.0.1
     devDependencies:
-      '@babel/preset-env':
-        specifier: ^7.24.7
-        version: 7.25.3(@babel/core@7.25.2)
-      '@babel/preset-react':
-        specifier: ^7.24.7
-        version: 7.24.7(@babel/core@7.25.2)
-      '@babel/preset-typescript':
-        specifier: ^7.24.7
-        version: 7.24.7(@babel/core@7.25.2)
       '@google-cloud/storage':
         specifier: ^7.11.0
         version: 7.12.1(encoding@0.1.13)
@@ -652,12 +643,24 @@ importers:
 
   packages/@repo/test-config:
     devDependencies:
+      '@babel/preset-env':
+        specifier: ^7.24.7
+        version: 7.25.3(@babel/core@7.25.2)
+      '@babel/preset-react':
+        specifier: ^7.24.7
+        version: 7.24.7(@babel/core@7.25.2)
+      '@babel/preset-typescript':
+        specifier: ^7.24.7
+        version: 7.24.7(@babel/core@7.25.2)
       '@jest/globals':
         specifier: ^29.7.0
         version: 29.7.0
       '@repo/dev-aliases':
         specifier: workspace:*
         version: link:../dev-aliases
+      babel-plugin-transform-vite-meta-hot:
+        specifier: ^1.0.0
+        version: 1.0.0
       dotenv:
         specifier: ^16.4.5
         version: 16.4.5
@@ -5756,6 +5759,9 @@ packages:
     peerDependencies:
       styled-components: '>= 2'
 
+  babel-plugin-transform-vite-meta-hot@1.0.0:
+    resolution: {integrity: sha512-qF7T46bDG5UPPOfy4MFgQJyd3mZvm1sGOR2gZ4lIHy6DEcxAVTIt39/adAn89il44CvwestshuEybKPMR+L/Tg==}
+
   babel-preset-current-node-syntax@1.1.0:
     resolution: {integrity: sha512-ldYss8SbBlWva1bs28q78Ju5Zq1F+8BrqBZZ0VFhLBvhh6lCpC2o3gDJi/5DRLs9FgYZCnmPYIVFU4lRXCkyUw==}
     peerDependencies:
@@ -16836,6 +16842,11 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  babel-plugin-transform-vite-meta-hot@1.0.0:
+    dependencies:
+      '@babel/runtime': 7.25.6
+      '@types/babel__core': 7.20.5
+
   babel-preset-current-node-syntax@1.1.0(@babel/core@7.25.2):
     dependencies:
       '@babel/core': 7.25.2

From bdfd8df3d9e231a6f6a8f7bbb4bb83da4e9dfa7e Mon Sep 17 00:00:00 2001
From: RitaDias <rita@sanity.io>
Date: Mon, 30 Sep 2024 22:18:18 +0200
Subject: [PATCH 4/9] chore(form): remove imports from shouldArrayDialogOpen
 (#7550)

---
 .../src/core/form/studio/FormBuilder.tsx      |  15 +--
 packages/sanity/src/core/form/studio/index.ts |   2 +-
 .../__tests__/shouldArrayDialogOpen.test.ts   | 102 ------------------
 .../core/form/studio/tree-editing/index.ts    |   1 -
 .../form/studio/tree-editing/utils/index.ts   |   1 -
 .../utils/shouldArrayDialogOpen.ts            |  49 ---------
 .../statusBar/DocumentStatusBarActions.tsx    |  16 +--
 7 files changed, 5 insertions(+), 181 deletions(-)
 delete mode 100644 packages/sanity/src/core/form/studio/tree-editing/__tests__/shouldArrayDialogOpen.test.ts
 delete mode 100644 packages/sanity/src/core/form/studio/tree-editing/utils/shouldArrayDialogOpen.ts

diff --git a/packages/sanity/src/core/form/studio/FormBuilder.tsx b/packages/sanity/src/core/form/studio/FormBuilder.tsx
index 98a744aefbc..58e1f1d04bf 100644
--- a/packages/sanity/src/core/form/studio/FormBuilder.tsx
+++ b/packages/sanity/src/core/form/studio/FormBuilder.tsx
@@ -32,12 +32,7 @@ import {
 import {DocumentFieldActionsProvider} from './contexts/DocumentFieldActions'
 import {FormBuilderInputErrorBoundary} from './FormBuilderInputErrorBoundary'
 import {FormProvider} from './FormProvider'
-import {
-  shouldArrayDialogOpen,
-  TreeEditingDialog,
-  TreeEditingEnabledProvider,
-  useTreeEditingEnabled,
-} from './tree-editing'
+import {TreeEditingDialog, TreeEditingEnabledProvider, useTreeEditingEnabled} from './tree-editing'
 
 /**
  * @alpha
@@ -307,15 +302,9 @@ interface RootInputProps {
 function RootInput(props: RootInputProps) {
   const {rootInputProps, onPathOpen, openPath, renderInput} = props
   const treeEditing = useTreeEditingEnabled()
-
-  const open = useMemo(
-    () => shouldArrayDialogOpen(rootInputProps.schemaType, openPath),
-    [openPath, rootInputProps.schemaType],
-  )
-
   const isRoot = rootInputProps.id === 'root'
 
-  const arrayEditingModal = treeEditing.enabled && isRoot && open && (
+  const arrayEditingModal = treeEditing.enabled && isRoot && (
     <TreeEditingDialog
       // eslint-disable-next-line react/jsx-handler-names
       onPathFocus={rootInputProps.onPathFocus}
diff --git a/packages/sanity/src/core/form/studio/index.ts b/packages/sanity/src/core/form/studio/index.ts
index 93c9568b4da..cf1c44e1098 100644
--- a/packages/sanity/src/core/form/studio/index.ts
+++ b/packages/sanity/src/core/form/studio/index.ts
@@ -3,5 +3,5 @@ export * from './defaults'
 export * from './FormBuilder'
 export * from './FormProvider'
 export * from './inputs'
-export {shouldArrayDialogOpen, useTreeEditingEnabled} from './tree-editing'
+export {useTreeEditingEnabled} from './tree-editing'
 export * from './uploads'
diff --git a/packages/sanity/src/core/form/studio/tree-editing/__tests__/shouldArrayDialogOpen.test.ts b/packages/sanity/src/core/form/studio/tree-editing/__tests__/shouldArrayDialogOpen.test.ts
deleted file mode 100644
index 6193658699d..00000000000
--- a/packages/sanity/src/core/form/studio/tree-editing/__tests__/shouldArrayDialogOpen.test.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import {describe, expect, test} from '@jest/globals'
-import {renderHook} from '@testing-library/react'
-import {type ObjectSchemaType, shouldArrayDialogOpen} from 'sanity'
-
-describe('shouldArrayDialogOpen', () => {
-  test('should return false if its in the base document (path [])', () => {
-    const objectSchemaType = {
-      jsonType: 'object',
-      fields: [],
-      name: '',
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-    } as ObjectSchemaType
-
-    const {result} = renderHook(() => shouldArrayDialogOpen(objectSchemaType, []))
-
-    expect(result.current).toEqual(false)
-  })
-
-  test('should return false if array has a reference', () => {
-    const referenceSchemaType = {
-      jsonType: 'object',
-      fields: [
-        {
-          name: 'referenceAuthor',
-          type: {
-            type: 'array',
-            of: [{type: 'reference', to: [{type: 'author'}]}],
-          },
-        },
-      ],
-      name: '',
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-    } as unknown as ObjectSchemaType
-
-    const {result} = renderHook(() =>
-      shouldArrayDialogOpen(referenceSchemaType, ['referenceAuthor']),
-    )
-
-    expect(result.current).toEqual(false)
-  })
-
-  test('should return false if array is PTE', () => {
-    const referenceSchemaType = {
-      jsonType: 'object',
-      fields: [
-        {
-          name: 'pte',
-          type: {
-            type: 'array',
-            of: [{type: 'block'}],
-          },
-        },
-      ],
-      name: '',
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-    } as unknown as ObjectSchemaType
-
-    const {result} = renderHook(() => shouldArrayDialogOpen(referenceSchemaType, ['pte']))
-
-    expect(result.current).toEqual(false)
-  })
-
-  test('should return true if its an array of plain objects - not pte, an array of references or in base document', () => {
-    const objectSchemaType = {
-      jsonType: 'object',
-      fields: [
-        {
-          type: 'array',
-          name: 'arrayOfObjects',
-          of: [
-            {
-              type: 'object',
-              name: 'object1',
-              fields: [
-                {
-                  name: 'name',
-                  type: 'string',
-                  title: 'name',
-                },
-                {
-                  name: 'age',
-                  type: 'number',
-                  title: 'age',
-                },
-              ],
-            },
-          ],
-        },
-      ],
-      name: '',
-      // eslint-disable-next-line camelcase
-      __experimental_search: [],
-    } as unknown as ObjectSchemaType
-
-    const {result} = renderHook(() => shouldArrayDialogOpen(objectSchemaType, ['object1']))
-
-    expect(result.current).toEqual(false)
-  })
-})
diff --git a/packages/sanity/src/core/form/studio/tree-editing/index.ts b/packages/sanity/src/core/form/studio/tree-editing/index.ts
index 634ba1a809b..3e91c5effbb 100644
--- a/packages/sanity/src/core/form/studio/tree-editing/index.ts
+++ b/packages/sanity/src/core/form/studio/tree-editing/index.ts
@@ -1,4 +1,3 @@
 export * from './components'
 export * from './context'
 export * from './hooks'
-export {shouldArrayDialogOpen} from './utils'
diff --git a/packages/sanity/src/core/form/studio/tree-editing/utils/index.ts b/packages/sanity/src/core/form/studio/tree-editing/utils/index.ts
index 0f1f8a87d0b..c2fe986cc77 100644
--- a/packages/sanity/src/core/form/studio/tree-editing/utils/index.ts
+++ b/packages/sanity/src/core/form/studio/tree-editing/utils/index.ts
@@ -1,4 +1,3 @@
 export * from './build-tree-editing-state'
 export * from './findArrayTypePaths'
 export * from './getSchemaField'
-export * from './shouldArrayDialogOpen'
diff --git a/packages/sanity/src/core/form/studio/tree-editing/utils/shouldArrayDialogOpen.ts b/packages/sanity/src/core/form/studio/tree-editing/utils/shouldArrayDialogOpen.ts
deleted file mode 100644
index 53050447cfa..00000000000
--- a/packages/sanity/src/core/form/studio/tree-editing/utils/shouldArrayDialogOpen.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import {toString} from '@sanity/util/paths'
-import {
-  isArrayOfBlocksSchemaType,
-  isArrayOfObjectsSchemaType,
-  type ObjectSchemaType,
-  type Path,
-} from 'sanity'
-
-// import {isPortableTextSchemaType} from './asserters'
-import {getRootPath} from './getRootPath'
-import {getSchemaField} from './getSchemaField'
-
-/**
- * A utility function to check if the global array editing dialog should be open.
- * @param schemaType - The schema object that we are opening
- * @param path - The path that we are focusing on
- * @returns Returns true if the dialog should be open
- * @internal
- */
-export function shouldArrayDialogOpen(schemaType: ObjectSchemaType, path: Path): boolean {
-  // If the path is empty, we can't determine if the array dialog is open
-  if (path.length === 0) return false
-
-  const rootPath = getRootPath(path)
-
-  // Get the field for the first segments
-  const field = getSchemaField(schemaType, toString(rootPath))
-
-  // Check if the field is an array of objects
-  if (isArrayOfObjectsSchemaType(field?.type)) {
-    // Check if the array of objects is an array of references.
-    const isArrayOfReferences = field.type.of.every((type) => type?.hasOwnProperty('to'))
-    const isPortableText = isArrayOfBlocksSchemaType(field.type)
-
-    // Return false if the array of objects is an array of references
-    // since these are edited inline and not in a dialog.
-    if (isArrayOfReferences) return false
-
-    // Return false if the array of objects is an array of portable text
-    // since these are edited inline and not in a dialog.
-    if (isPortableText) return false
-
-    // Else, return true if it is an array of objects
-    return true
-  }
-
-  // Otherwise, return false
-  return false
-}
diff --git a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
index 97ea27266af..7eabd5acdc1 100644
--- a/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
+++ b/packages/sanity/src/structure/panes/document/statusBar/DocumentStatusBarActions.tsx
@@ -5,8 +5,6 @@ import {
   type DocumentActionComponent,
   type DocumentActionDescription,
   Hotkeys,
-  shouldArrayDialogOpen,
-  useSource,
   useTimelineSelector,
 } from 'sanity'
 
@@ -27,17 +25,9 @@ const DocumentStatusBarActionsInner = memo(function DocumentStatusBarActionsInne
   props: DocumentStatusBarActionsInnerProps,
 ) {
   const {disabled, showMenu, states} = props
-  const {__internal_tasks, schemaType, openPath} = useDocumentPane()
+  const {__internal_tasks} = useDocumentPane()
   const [firstActionState, ...menuActionStates] = states
   const [buttonElement, setButtonElement] = useState<HTMLButtonElement | null>(null)
-  const isTreeArrayEditingEnabled = useSource().beta?.treeArrayEditing?.enabled
-
-  // Disable the main document action if the array dialog is open
-  const isTreeArrayEditingEnabledOpen = useMemo(() => {
-    if (!isTreeArrayEditingEnabled) return false
-
-    return shouldArrayDialogOpen(schemaType, openPath)
-  }, [isTreeArrayEditingEnabled, openPath, schemaType])
 
   // TODO: This could be refactored to use the tooltip from the button if the firstAction.title was updated to a string.
   const tooltipContent = useMemo(() => {
@@ -69,9 +59,7 @@ const DocumentStatusBarActionsInner = memo(function DocumentStatusBarActionsInne
             <Stack>
               <Button
                 data-testid={`action-${firstActionState.label}`}
-                disabled={
-                  disabled || Boolean(firstActionState.disabled) || isTreeArrayEditingEnabledOpen
-                }
+                disabled={disabled || Boolean(firstActionState.disabled)}
                 icon={firstActionState.icon}
                 // eslint-disable-next-line react/jsx-handler-names
                 onClick={firstActionState.onHandle}

From 306a6717cc7aa39c328b59c38522ed25f7c0b268 Mon Sep 17 00:00:00 2001
From: silvertech-daniel <153660991+silvertech-daniel@users.noreply.github.com>
Date: Mon, 30 Sep 2024 16:20:28 -0400
Subject: [PATCH 5/9] fix(block-tools): remove references to implicit globals
 `document` and `Text` (#7532)

---
 .../block-tools/src/HtmlDeserializer/preprocessors/word.ts  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@sanity/block-tools/src/HtmlDeserializer/preprocessors/word.ts b/packages/@sanity/block-tools/src/HtmlDeserializer/preprocessors/word.ts
index 8d67841d195..5fb3e4cba60 100644
--- a/packages/@sanity/block-tools/src/HtmlDeserializer/preprocessors/word.ts
+++ b/packages/@sanity/block-tools/src/HtmlDeserializer/preprocessors/word.ts
@@ -70,16 +70,16 @@ export default (html: string, doc: Document): Document => {
   for (let i = mappedElements.snapshotLength - 1; i >= 0; i--) {
     const mappedElm = mappedElements.snapshotItem(i) as HTMLElement
     const tags = elementMap[mappedElm.className]
-    const text = new Text(mappedElm.textContent || '')
+    const text = doc.createTextNode(mappedElm.textContent || '')
     if (!tags) {
       continue
     }
 
-    const parentElement = document.createElement(tags[0])
+    const parentElement = doc.createElement(tags[0])
     let parent = parentElement
     let child = parentElement
     tags.slice(1).forEach((tag) => {
-      child = document.createElement(tag)
+      child = doc.createElement(tag)
       parent.appendChild(child)
       parent = child
     })

From 6b8a76fe6e8cf288caceb27daec35c5d2c93603f Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Sun, 22 Sep 2024 11:04:34 +0100
Subject: [PATCH 6/9] fix(sanity): prevent layout shifts in image input

---
 .../inputs/files/ImageInput/ImageInput.tsx    | 41 ++---------
 .../files/ImageInput/ImageInputAsset.tsx      | 54 +++++++-------
 .../files/ImageInput/ImageInputPreview.tsx    | 26 ++-----
 .../files/ImageInput/ImagePreview.styled.tsx  | 22 ++----
 .../inputs/files/ImageInput/ImagePreview.tsx  | 71 ++++---------------
 .../files/ImageInput/usePreviewImageSource.ts | 55 ++++++++++++++
 .../files/common/UploadProgress.styled.tsx    |  8 ++-
 .../inputs/files/common/UploadProgress.tsx    | 19 ++---
 8 files changed, 131 insertions(+), 165 deletions(-)
 create mode 100644 packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
index b7a6b264319..d9f85e56a36 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInput.tsx
@@ -67,28 +67,6 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
 
   const uploadSubscription = useRef<null | Subscription>(null)
 
-  /**
-   * The upload progress state wants to use the same height as any previous image
-   * to avoid layout shifts and jumps
-   */
-  const previewElementRef = useRef<{el: HTMLDivElement | null; height: number}>({
-    el: null,
-    height: 0,
-  })
-  const setPreviewElementHeight = useCallback((node: HTMLDivElement | null) => {
-    if (node) {
-      previewElementRef.current.el = node
-      previewElementRef.current.height = node.offsetHeight
-    } else {
-      /**
-       * If `node` is `null` then it means the `FileTarget` in `ImageInputAsset` is being unmounted and we want to
-       * capture its height before it's removed from the DOM.
-       */
-
-      previewElementRef.current.height = previewElementRef.current.el?.offsetHeight || 0
-      previewElementRef.current.el = null
-    }
-  }, [])
   const getFileTone = useCallback(() => {
     const acceptedFiles = hoveringFiles.filter((file) => resolveUploader(schemaType, file))
     const rejectedFilesCount = hoveringFiles.length - acceptedFiles.length
@@ -201,9 +179,6 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
 
   const handleClearField = useCallback(() => {
     onChange([unset(['asset']), unset(['crop']), unset(['hotspot'])])
-
-    previewElementRef.current.el = null
-    previewElementRef.current.height = 0
   }, [onChange])
   const handleRemoveButtonClick = useCallback(() => {
     // When removing the image, we should also remove any crop and hotspot
@@ -224,9 +199,6 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
       .map((key) => unset([key]))
 
     onChange(isEmpty && !valueIsArrayElement() ? unset() : removeKeys)
-
-    previewElementRef.current.el = null
-    previewElementRef.current.height = 0
   }, [onChange, value, valueIsArrayElement])
   const handleOpenDialog = useCallback(() => {
     onPathFocus(['hotspot'])
@@ -303,15 +275,16 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
     menuButtonElement?.focus()
   }, [menuButtonElement])
 
-  const renderPreview = useCallback(() => {
+  const renderPreview = useCallback<() => JSX.Element>(() => {
+    if (!value) {
+      return <></>
+    }
     return (
       <ImageInputPreview
         directUploads={directUploads}
         handleOpenDialog={handleOpenDialog}
         hoveringFiles={hoveringFiles}
         imageUrlBuilder={imageUrlBuilder}
-        // if there previously was a preview image, preserve the height to avoid jumps
-        initialHeight={previewElementRef.current.height}
         readOnly={readOnly}
         resolveUploader={resolveUploader}
         schemaType={schemaType}
@@ -404,8 +377,6 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
           uploadState={uploadState}
           onCancel={isUploading ? handleCancelUpload : undefined}
           onStale={handleStaleUpload}
-          // if there previously was a preview image, preserve the height to avoid jumps
-          height={previewElementRef.current.height}
         />
       )
     },
@@ -420,7 +391,6 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
     // eslint-disable-next-line react/display-name
     return (inputProps: Omit<InputProps, 'renderDefault'>) => (
       <ImageInputAsset
-        ref={setPreviewElementHeight}
         elementProps={elementProps}
         handleClearUploadState={handleClearUploadState}
         handleFilesOut={handleFilesOut}
@@ -437,6 +407,7 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
         renderUploadState={renderUploadState}
         tone={getFileTone()}
         value={value}
+        imageUrlBuilder={imageUrlBuilder}
       />
     )
   }, [
@@ -449,13 +420,13 @@ function BaseImageInputComponent(props: BaseImageInputProps): JSX.Element {
     handleFilesOver,
     handleSelectFiles,
     hoveringFiles,
+    imageUrlBuilder,
     isStale,
     readOnly,
     renderAssetMenu,
     renderPreview,
     renderUploadPlaceholder,
     renderUploadState,
-    setPreviewElementHeight,
     value,
   ])
   const renderHotspotInput = useCallback(
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx
index d59ce2384b8..c07bbfdf903 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputAsset.tsx
@@ -1,36 +1,36 @@
 import {type UploadState} from '@sanity/types'
 import {Box, type CardTone} from '@sanity/ui'
-import {type FocusEvent, forwardRef, memo, useMemo} from 'react'
+import {type FocusEvent, memo, useMemo} from 'react'
 
 import {ChangeIndicator} from '../../../../changeIndicators'
 import {type InputProps} from '../../../types'
 import {FileTarget} from '../common/styles'
 import {UploadWarning} from '../common/UploadWarning'
+import {type ImageUrlBuilder} from '../types'
 import {type BaseImageInputProps, type BaseImageInputValue, type FileInfo} from './types'
+import {usePreviewImageSource} from './usePreviewImageSource'
 
 const ASSET_FIELD_PATH = ['asset'] as const
 
-function ImageInputAssetComponent(
-  props: {
-    elementProps: BaseImageInputProps['elementProps']
-    handleClearUploadState: () => void
-    handleFilesOut: () => void
-    handleFilesOver: (hoveringFiles: FileInfo[]) => void
-    handleFileTargetFocus: (event: FocusEvent<Element, Element>) => void
-    handleSelectFiles: (files: File[]) => void
-    hoveringFiles: FileInfo[]
-    inputProps: Omit<InputProps, 'renderDefault'>
-    isStale: boolean
-    readOnly: boolean | undefined
-    renderAssetMenu(): JSX.Element | null
-    renderPreview: () => JSX.Element
-    renderUploadPlaceholder(): JSX.Element
-    renderUploadState(uploadState: UploadState): JSX.Element
-    tone: CardTone
-    value: BaseImageInputValue | undefined
-  },
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+function ImageInputAssetComponent(props: {
+  elementProps: BaseImageInputProps['elementProps']
+  handleClearUploadState: () => void
+  handleFilesOut: () => void
+  handleFilesOver: (hoveringFiles: FileInfo[]) => void
+  handleFileTargetFocus: (event: FocusEvent<Element, Element>) => void
+  handleSelectFiles: (files: File[]) => void
+  hoveringFiles: FileInfo[]
+  imageUrlBuilder: ImageUrlBuilder
+  inputProps: Omit<InputProps, 'renderDefault'>
+  isStale: boolean
+  readOnly: boolean | undefined
+  renderAssetMenu(): JSX.Element | null
+  renderPreview: () => JSX.Element
+  renderUploadPlaceholder(): JSX.Element
+  renderUploadState(uploadState: UploadState): JSX.Element
+  tone: CardTone
+  value: BaseImageInputValue | undefined
+}) {
   const {
     elementProps,
     handleClearUploadState,
@@ -48,13 +48,15 @@ function ImageInputAssetComponent(
     renderUploadState,
     tone,
     value,
+    imageUrlBuilder,
   } = props
 
   const hasValueOrUpload = Boolean(value?._upload || value?.asset)
   const path = useMemo(() => inputProps.path.concat(ASSET_FIELD_PATH), [inputProps.path])
+  const {customProperties} = usePreviewImageSource({value, imageUrlBuilder})
 
   return (
-    <>
+    <div style={customProperties}>
       {isStale && (
         <Box marginBottom={2}>
           <UploadWarning onClearStale={handleClearUploadState} />
@@ -79,7 +81,7 @@ function ImageInputAssetComponent(
           >
             {!value?.asset && renderUploadPlaceholder()}
             {!value?._upload && value?.asset && (
-              <div style={{position: 'relative'}} ref={forwardedRef}>
+              <div style={{position: 'relative'}}>
                 {renderPreview()}
                 {renderAssetMenu()}
               </div>
@@ -87,7 +89,7 @@ function ImageInputAssetComponent(
           </FileTarget>
         )}
       </ChangeIndicator>
-    </>
+    </div>
   )
 }
-export const ImageInputAsset = memo(forwardRef(ImageInputAssetComponent))
+export const ImageInputAsset = memo(ImageInputAssetComponent)
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx
index 99497c91700..ab092ae5d1a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImageInputPreview.tsx
@@ -1,49 +1,40 @@
-import {isImageSource} from '@sanity/asset-utils'
 import {type ImageSchemaType} from '@sanity/types'
 import {memo, useMemo} from 'react'
-import {useDevicePixelRatio} from 'use-device-pixel-ratio'
 
 import {useTranslation} from '../../../../i18n'
 import {type UploaderResolver} from '../../../studio/uploads/types'
 import {type ImageUrlBuilder} from '../types'
 import {ImagePreview} from './ImagePreview'
 import {type BaseImageInputValue, type FileInfo} from './types'
+import {usePreviewImageSource} from './usePreviewImageSource'
 
 export const ImageInputPreview = memo(function ImageInputPreviewComponent(props: {
   directUploads: boolean | undefined
   handleOpenDialog: () => void
   hoveringFiles: FileInfo[]
   imageUrlBuilder: ImageUrlBuilder
-  initialHeight: number | undefined
   readOnly: boolean | undefined
   resolveUploader: UploaderResolver
   schemaType: ImageSchemaType
-  value: BaseImageInputValue | undefined
+  value: BaseImageInputValue
 }) {
   const {
     directUploads,
     handleOpenDialog,
     hoveringFiles,
     imageUrlBuilder,
-    initialHeight,
     readOnly,
     resolveUploader,
     schemaType,
     value,
   } = props
 
-  const isValueImageSource = useMemo(() => isImageSource(value), [value])
-  if (!value || !isValueImageSource) {
-    return null
-  }
-
   return (
     <RenderImageInputPreview
       directUploads={directUploads}
       handleOpenDialog={handleOpenDialog}
       hoveringFiles={hoveringFiles}
       imageUrlBuilder={imageUrlBuilder}
-      initialHeight={initialHeight}
       readOnly={readOnly}
       resolveUploader={resolveUploader}
       schemaType={schemaType}
@@ -57,7 +48,6 @@ function RenderImageInputPreview(props: {
   handleOpenDialog: () => void
   hoveringFiles: FileInfo[]
   imageUrlBuilder: ImageUrlBuilder
-  initialHeight: number | undefined
   readOnly: boolean | undefined
   resolveUploader: UploaderResolver
   schemaType: ImageSchemaType
@@ -68,7 +58,6 @@ function RenderImageInputPreview(props: {
     handleOpenDialog,
     hoveringFiles,
     imageUrlBuilder,
-    initialHeight,
     readOnly,
     resolveUploader,
     schemaType,
@@ -84,20 +73,17 @@ function RenderImageInputPreview(props: {
     () => hoveringFiles.length - acceptedFiles.length,
     [acceptedFiles, hoveringFiles],
   )
-  const dpr = useDevicePixelRatio()
-  const imageUrl = useMemo(
-    () => imageUrlBuilder.width(2000).fit('max').image(value).dpr(dpr).auto('format').url(),
-    [dpr, imageUrlBuilder, value],
-  )
+
+  const {url} = usePreviewImageSource({value, imageUrlBuilder})
+
   return (
     <ImagePreview
       alt={t('inputs.image.preview-uploaded-image')}
       drag={!value?._upload && hoveringFiles.length > 0}
-      initialHeight={initialHeight}
       isRejected={rejectedFilesCount > 0 || !directUploads}
       onDoubleClick={handleOpenDialog}
       readOnly={readOnly}
-      src={imageUrl}
+      src={url}
     />
   )
 }
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 7b54614372e..01150691ef3 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,29 +1,19 @@
 import {Card, type CardTone, Flex, rgba, studioTheme} from '@sanity/ui'
 import {css, styled} from 'styled-components'
 
-export const MAX_DEFAULT_HEIGHT = 30
-
 export const RatioBox = styled(Card)`
   position: relative;
   width: 100%;
-  overflow: hidden;
-  overflow: clip;
   min-height: 3.75rem;
-  max-height: 20rem;
+  max-height: min(calc(var(--image-height) * 1px), 20rem);
+  aspect-ratio: var(--image-width) / var(--image-height);
 
-  & > div[data-container] {
-    top: 0;
-    left: 0;
+  & img {
+    display: block;
     width: 100%;
     height: 100%;
-    display: flex !important;
-    align-items: center;
-    justify-content: center;
-  }
-
-  & img {
-    max-width: 100%;
-    max-height: 100%;
+    object-fit: scale-down;
+    object-position: center;
   }
 `
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index 662b340704b..11bb9b06eb1 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -1,59 +1,25 @@
 import {AccessDeniedIcon, ImageIcon, ReadOnlyIcon} from '@sanity/icons'
-import {Box, Card, type CardTone, Heading, Text, useElementRect} from '@sanity/ui'
+import {Box, type Card, type CardTone, Heading, Text} from '@sanity/ui'
 import {type ComponentProps, type ReactNode, useCallback, useEffect, useState} from 'react'
 
 import {LoadingBlock} from '../../../../components/loadingBlock'
 import {useTranslation} from '../../../../i18n'
-import {FlexOverlay, MAX_DEFAULT_HEIGHT, Overlay, RatioBox} from './ImagePreview.styled'
+import {FlexOverlay, Overlay, RatioBox} from './ImagePreview.styled'
 
 interface Props {
   alt: string
   drag: boolean
-  initialHeight: number | undefined
   isRejected: boolean
   readOnly?: boolean | null
   src: string
 }
 
-/*
-  Used for setting the initial image height - specifically for images
-  that are small and so can take less space in the document
-*/
-const getImageSize = (src: string): number[] => {
-  const imageUrlParams = new URLSearchParams(src.split('?')[1])
-  const rect = imageUrlParams.get('rect')
-
-  if (rect) {
-    return [rect.split(',')[2], rect.split(',')[3]].map(Number)
-  }
-
-  return src.split('-')[1].split('.')[0].split('x').map(Number)
-}
-
 export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
-  const {drag, readOnly, isRejected, src, initialHeight, ...rest} = props
+  const {drag, readOnly, isRejected, src, ...rest} = props
   const [isLoaded, setLoaded] = useState(false)
-  const [rootElement, setRootElement] = useState<HTMLDivElement | null>(null)
-  const rootRect = useElementRect(rootElement)
-  const rootWidth = rootRect?.width || 0
   const acceptTone = isRejected || readOnly ? 'critical' : 'primary'
   const tone = drag ? acceptTone : 'default'
 
-  const maxHeightToPx = (MAX_DEFAULT_HEIGHT * document.documentElement.clientHeight) / 100 // convert from vh to px, max height of the input
-
-  const [imageWidth, imageHeight] = getImageSize(src)
-
-  const imageRatio = imageWidth / imageHeight
-
-  // is the image wider than root? if so calculate the resized height
-  const renderedImageHeight = imageWidth > rootWidth ? rootWidth / imageRatio : imageHeight
-
-  /*
-    if the rendered image is smaller than the max height then it doesn't require a height set
-    otherwise, set the max height (to prevent a large image in the document)
-  */
-  const rootHeight = renderedImageHeight < maxHeightToPx ? null : `${MAX_DEFAULT_HEIGHT}vh`
-
   useEffect(() => {
     /* set for when the src is being switched when the image input already had a image src
     - meaning it already had an asset */
@@ -65,26 +31,19 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
   }, [])
 
   const {t} = useTranslation()
-  return (
-    <RatioBox
-      {...rest}
-      ref={setRootElement}
-      style={{height: initialHeight && !isLoaded ? initialHeight : rootHeight}}
-      tone="transparent"
-    >
-      <Card data-container tone="inherit">
-        {!isLoaded && (
-          <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
-        )}
-        <img
-          src={src}
-          data-testid="hotspot-image-input"
-          alt={props.alt}
-          onLoad={onLoadChange}
-          referrerPolicy="strict-origin-when-cross-origin"
-        />
-      </Card>
 
+  return (
+    <RatioBox {...rest} tone="transparent">
+      {!isLoaded && (
+        <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
+      )}
+      <img
+        src={src}
+        data-testid="hotspot-image-input"
+        alt={props.alt}
+        onLoad={onLoadChange}
+        referrerPolicy="strict-origin-when-cross-origin"
+      />
       {drag && (
         <OverlayComponent
           cardTone={tone}
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts b/packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts
new file mode 100644
index 00000000000..97d532802ca
--- /dev/null
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/usePreviewImageSource.ts
@@ -0,0 +1,55 @@
+import {getImageDimensions, isImageSource, type SanityImageDimensions} from '@sanity/asset-utils'
+import {type CSSProperties, useMemo} from 'react'
+import {useDevicePixelRatio} from 'use-device-pixel-ratio'
+
+import {type ImageUrlBuilder} from '../types'
+import {type BaseImageInputValue} from './types'
+
+export function usePreviewImageSource<Value extends BaseImageInputValue | undefined>({
+  value,
+  imageUrlBuilder,
+}: {
+  value: Value
+  imageUrlBuilder: ImageUrlBuilder
+}): {
+  url: Value extends undefined ? undefined : string
+  dimensions: SanityImageDimensions
+  customProperties: CSSProperties
+} {
+  const dpr = useDevicePixelRatio()
+
+  const url = useMemo(
+    () =>
+      value && isImageSource(value)
+        ? imageUrlBuilder.width(2000).fit('max').image(value).dpr(dpr).auto('format').url()
+        : undefined,
+    [dpr, imageUrlBuilder, value],
+  ) as Value extends undefined ? undefined : string
+
+  const dimensions = useMemo<SanityImageDimensions>(
+    () =>
+      url
+        ? getImageDimensions(url)
+        : {
+            width: 0,
+            height: 0,
+            aspectRatio: 0,
+          },
+    [url],
+  )
+
+  const customProperties = useMemo(
+    () =>
+      ({
+        '--image-width': dimensions.width,
+        '--image-height': dimensions.height,
+      }) as CSSProperties,
+    [dimensions.width, dimensions.height],
+  )
+
+  return {
+    url,
+    dimensions,
+    customProperties,
+  }
+}
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.styled.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.styled.tsx
index 7859aa59e4e..8d650e0a8bd 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.styled.tsx
@@ -1,12 +1,14 @@
-import {Card, Code, Flex, Stack} from '@sanity/ui'
+import {Code, Flex, Stack} from '@sanity/ui'
 import {styled} from 'styled-components'
 
-export const CardWrapper = styled(Card)`
-  min-height: 82px;
+import {RatioBox} from '../ImageInput/ImagePreview.styled'
+
+export const CardWrapper = styled(RatioBox)`
   box-sizing: border-box;
 `
 
 export const FlexWrapper = styled(Flex)`
+  box-sizing: border-box;
   text-overflow: ellipsis;
   overflow: hidden;
   overflow: clip;
diff --git a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
index 63394ae5407..72cd27922b1 100644
--- a/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
+++ b/packages/sanity/src/core/form/inputs/files/common/UploadProgress.tsx
@@ -12,11 +12,10 @@ type Props = {
   uploadState: UploadState
   onCancel?: () => void
   onStale?: () => void
-  height?: number
 }
 const elapsedMs = (date: string): number => new Date().getTime() - new Date(date).getTime()
 
-export function UploadProgress({uploadState, onCancel, onStale, height}: Props) {
+export function UploadProgress({uploadState, onCancel, onStale}: Props) {
   const filename = uploadState.file.name
 
   useEffect(() => {
@@ -27,13 +26,15 @@ export function UploadProgress({uploadState, onCancel, onStale, height}: Props)
 
   const {t} = useTranslation()
   return (
-    <CardWrapper
-      tone="primary"
-      padding={4}
-      border
-      style={{height: height ? `${height}px` : undefined}}
-    >
-      <FlexWrapper align="center" justify="space-between" height="fill" direction="row" gap={2}>
+    <CardWrapper tone="primary" border>
+      <FlexWrapper
+        padding={4}
+        align="center"
+        justify="space-between"
+        height="fill"
+        direction="row"
+        gap={2}
+      >
         <LeftSection>
           <Flex justify="center" gap={[3, 3, 2, 2]} direction={['column', 'column', 'row']}>
             <Text size={1}>

From 14ebf2cd95bb09af937a848a17ef602aea3d6ae8 Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Sun, 22 Sep 2024 11:28:18 +0100
Subject: [PATCH 7/9] feat(sanity): allow image input block size to extend to
 `30vh`

---
 .../core/form/inputs/files/ImageInput/ImagePreview.styled.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 01150691ef3..2da95dbc28a 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -5,7 +5,7 @@ export const RatioBox = styled(Card)`
   position: relative;
   width: 100%;
   min-height: 3.75rem;
-  max-height: min(calc(var(--image-height) * 1px), 20rem);
+  max-height: min(calc(var(--image-height) * 1px), 30vh);
   aspect-ratio: var(--image-width) / var(--image-height);
 
   & img {

From 8a80ef232f5399db2456e71cb92d7cb3b760e43d Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Sun, 22 Sep 2024 13:09:24 +0100
Subject: [PATCH 8/9] refactor(sanity): remove redundant drag-related props

---
 .../form/inputs/files/ImageInput/ImagePreview.styled.tsx | 7 +++----
 .../core/form/inputs/files/ImageInput/ImagePreview.tsx   | 9 ++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 2da95dbc28a..5a2acdb2190 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -18,9 +18,8 @@ export const RatioBox = styled(Card)`
 `
 
 export const Overlay = styled(Flex)<{
-  $drag: boolean
   $tone: Exclude<CardTone, 'inherit'>
-}>(({$drag, $tone}) => {
+}>(({$tone}) => {
   const textColor = studioTheme.color.light[$tone].card.enabled.fg
   const backgroundColor = rgba(studioTheme.color.light[$tone].card.enabled.bg, 0.8)
 
@@ -30,9 +29,9 @@ export const Overlay = styled(Flex)<{
     left: 0;
     right: 0;
     bottom: 0;
-    backdrop-filter: ${$drag ? 'blur(10px)' : ''};
+    backdrop-filter: blur(10px);
     color: ${$tone ? textColor : ''};
-    background-color: ${$drag ? backgroundColor : 'transparent'};
+    background-color: ${backgroundColor};
   `
 })
 
diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
index 11bb9b06eb1..b1a5070453d 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.tsx
@@ -34,9 +34,7 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
 
   return (
     <RatioBox {...rest} tone="transparent">
-      {!isLoaded && (
-        <OverlayComponent cardTone="transparent" drag content={<LoadingBlock showText />} />
-      )}
+      {!isLoaded && <OverlayComponent cardTone="transparent" content={<LoadingBlock showText />} />}
       <img
         src={src}
         data-testid="hotspot-image-input"
@@ -47,7 +45,6 @@ export function ImagePreview(props: ComponentProps<typeof Card> & Props) {
       {drag && (
         <OverlayComponent
           cardTone={tone}
-          drag={drag}
           content={
             <>
               <Box marginBottom={3}>
@@ -91,15 +88,13 @@ function getHoverTextTranslationKey({
 
 function OverlayComponent({
   cardTone,
-  drag,
   content,
 }: {
   cardTone: Exclude<CardTone, 'inherit'>
-  drag: boolean
   content: ReactNode
 }) {
   return (
-    <Overlay justify="flex-end" padding={3} $drag={drag} $tone={cardTone}>
+    <Overlay justify="flex-end" padding={3} $tone={cardTone}>
       <FlexOverlay direction="column" align="center" justify="center">
         {content}
       </FlexOverlay>

From df0e18a9e6ece03083372b86ef1133a3506f63c5 Mon Sep 17 00:00:00 2001
From: Ash <ash@sanity.io>
Date: Sun, 22 Sep 2024 13:38:27 +0100
Subject: [PATCH 9/9] fix(sanity): use correct color scheme in image input
 overlay

---
 .../form/inputs/files/ImageInput/ImagePreview.styled.tsx    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
index 5a2acdb2190..630ecaa030d 100644
--- a/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
+++ b/packages/sanity/src/core/form/inputs/files/ImageInput/ImagePreview.styled.tsx
@@ -1,4 +1,5 @@
 import {Card, type CardTone, Flex, rgba, studioTheme} from '@sanity/ui'
+import {useColorSchemeValue} from 'sanity'
 import {css, styled} from 'styled-components'
 
 export const RatioBox = styled(Card)`
@@ -20,8 +21,9 @@ export const RatioBox = styled(Card)`
 export const Overlay = styled(Flex)<{
   $tone: Exclude<CardTone, 'inherit'>
 }>(({$tone}) => {
-  const textColor = studioTheme.color.light[$tone].card.enabled.fg
-  const backgroundColor = rgba(studioTheme.color.light[$tone].card.enabled.bg, 0.8)
+  const colorScheme = useColorSchemeValue()
+  const textColor = studioTheme.color[colorScheme][$tone].card.enabled.fg
+  const backgroundColor = rgba(studioTheme.color[colorScheme][$tone].card.enabled.bg, 0.8)
 
   return css`
     position: absolute;