chore(deps): test @sanity/[email protected]

.changeset/sanity-ui-v4-next.md

@@ -0,0 +1,6 @@
+---
+'@sanity/visual-editing': patch
+'@sanity/visual-editing-standalone': patch
+---
+
+Upgrade the visual editing overlays to `@sanity/[email protected]` and load its required static stylesheet. The standalone build bundles the stylesheet into a package-local `style.css` asset.

packages/visual-editing-standalone/package.json

@@ -25,11 +25,14 @@
     "dist"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "types": "./dist/index.d.ts",
   "exports": {
     ".": "./src/index.ts",
-    "./package.json": "./package.json"
+    "./package.json": "./package.json",
+    "./style.css": "./dist/style.css"
   },
   "scripts": {
     "build": "tsdown",
@@ -44,6 +47,7 @@
     "@sanity/tsconfig": "catalog:",
     "@sanity/tsdown-config": "^0.19.6",
     "@sanity/visual-editing": "workspace:*",
+    "@tsdown/css": "0.22.14",
     "eslint": "^8.57.1",
     "tsdown": "^0.22.13",
     "typescript": "catalog:",
@@ -67,29 +71,27 @@
     "@floating-ui/dom": "1.8.0",
     "@floating-ui/react-dom": "2.1.9",
     "@floating-ui/utils": "0.2.12",
-    "@juggle/resize-observer": "3.4.0",
     "@sanity/client": "7.24.0",
-    "@sanity/color": "3.0.7",
+    "@sanity/color": "3.0.8",
     "@sanity/comlink": "4.0.1",
     "@sanity/diff-match-patch": "3.2.0",
     "@sanity/icons": "5.2.1",
     "@sanity/mutate": "0.18.1",
     "@sanity/presentation-comlink": "2.2.0",
     "@sanity/types": "6.6.0",
-    "@sanity/ui": "3.4.3",
+    "@sanity/ui": "4.0.0-next.6",
     "@sanity/visual-editing-types": "1.1.8",
     "@vercel/stega": "1.1.0",
     "compute-scroll-into-view": "3.1.1",
-    "framer-motion": "12.42.2",
+    "framer-motion": "12.43.0",
     "lodash": "4.18.1",
     "lodash-es": "4.18.1",
     "mendoza": "3.0.8",
-    "motion": "12.42.2",
-    "motion-dom": "12.42.2",
+    "motion": "12.43.0",
+    "motion-dom": "12.43.0",
     "motion-utils": "12.39.0",
     "nanoid": "5.1.16",
     "react": "19.2.8",
-    "react-compiler-runtime": "1.0.0",
     "react-dom": "19.2.8",
     "react-is": "19.2.8",
     "rxjs": "7.8.2",
@@ -109,7 +111,8 @@
   "publishConfig": {
     "exports": {
       ".": "./dist/index.js",
-      "./package.json": "./package.json"
+      "./package.json": "./package.json",
+      "./style.css": "./dist/style.css"
     }
   }
 }

packages/visual-editing-standalone/src/index.test.ts

@@ -9,9 +9,15 @@ test('exposes only the standalone runtime API', () => {
   expect(Object.keys(standalone).sort()).toEqual(['createDataAttribute', 'enableVisualEditing'])
 })
 
-test('has a single root entry point and no runtime dependencies', () => {
-  expect(Object.keys(pkg.exports).sort()).toEqual(['.', './package.json'])
-  expect(Object.keys(pkg.publishConfig.exports).sort()).toEqual(['.', './package.json'])
+test('exposes only the root entry point plus its stylesheet, and no runtime dependencies', () => {
+  // `@sanity/[email protected]` ships static styles as a stylesheet, extracted into a
+  // package-internal `./style.css` asset (see `tsdown.config.ts` `css.inject`).
+  expect(Object.keys(pkg.exports).sort()).toEqual(['.', './package.json', './style.css'])
+  expect(Object.keys(pkg.publishConfig.exports).sort()).toEqual([
+    '.',
+    './package.json',
+    './style.css',
+  ])
   expect(pkg).not.toHaveProperty('dependencies')
   expect(pkg).not.toHaveProperty('peerDependencies')
 })

packages/visual-editing-standalone/tsdown.config.ts

@@ -74,5 +74,14 @@ export default mergeConfig(
     // Unlike a typical library, consumers download this package's bundled dependencies.
     // `true` enables the full Oxc pass — equivalent to `{compress, mangle, codegen: true}`.
     minify: true,
+    // `@sanity/[email protected]` ships static styles as `@sanity/ui/styles.css`, which the
+    // bundled `@sanity/visual-editing` overlays import. Extract it into a package-internal
+    // `.css` asset and keep the `import` in the JS output (`inject`) so consumers' bundlers
+    // load the stylesheet automatically — no external `@sanity/ui` dependency required, in
+    // keeping with this package's self-contained distribution.
+    css: {
+      inject: true,
+      minify: true,
+    },
   },
 ) satisfies UserConfig

packages/visual-editing/package.json

@@ -31,7 +31,9 @@
     "!src/**/stories/"
   ],
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -110,7 +112,7 @@
     "@sanity/presentation-comlink": "^2.2.0",
     "@sanity/preview-url-secret": "workspace:^",
     "@sanity/types": "catalog:",
-    "@sanity/ui": "^3.4.3",
+    "@sanity/ui": "4.0.0-next.6",
     "@sanity/visual-editing-csm": "workspace:^",
     "@vercel/stega": "^1.1.0",
     "dequal": "^2.0.3",

packages/visual-editing/src/overlay-components/components/InsertMenu.tsx

@@ -1,6 +1,6 @@
 import type {SchemaUnionNode} from '@sanity/presentation-comlink'
 import type {InsertMenuOptions, SchemaType} from '@sanity/types'
-import {Popover} from '@sanity/ui/_visual-editing'
+import {Popover} from '@sanity/ui/popover'
 import {type FunctionComponent} from 'react'
 
 import {InsertMenu as VendoredInsertMenu} from '../../ui/insert-menu/InsertMenu'

packages/visual-editing/src/overlay-components/components/UnionInsertMenuOverlay.tsx

@@ -1,7 +1,7 @@
 import {AddIcon} from '@sanity/icons/Add'
 import type {SchemaNode, SchemaUnionNode} from '@sanity/presentation-comlink'
 import type {SchemaType} from '@sanity/types'
-import {Button, Flex} from '@sanity/ui/_visual-editing'
+import {Button, Flex} from '@sanity/ui'
 import {
   useCallback,
   useRef,

packages/visual-editing/src/stories/InsertMenu.stories.tsx

@@ -12,7 +12,7 @@ import {
   studioTheme,
   ThemeProvider,
   usePrefersDark,
-} from '@sanity/ui/_visual-editing'
+} from '@sanity/ui'
 import type {Meta, StoryObj} from '@storybook/react'
 import {fn} from '@storybook/test'
 

packages/visual-editing/src/ui/ElementOverlay.tsx

@@ -3,8 +3,8 @@ import {DocumentIcon} from '@sanity/icons/Document'
 import {DragHandleIcon} from '@sanity/icons/DragHandle'
 import {EllipsisVerticalIcon} from '@sanity/icons/EllipsisVertical'
 import {PlugIcon} from '@sanity/icons/Plug'
-import {MenuButton, MenuDivider} from '@sanity/ui'
-import {Box, Button, Card, Flex, Menu, MenuItem, Stack, Text} from '@sanity/ui/_visual-editing'
+import {Box, Button, Card, Flex, Stack, Text} from '@sanity/ui'
+import {Menu, MenuButton, MenuDivider, MenuItem} from '@sanity/ui/menu'
 import {pathToUrlString} from '@sanity/visual-editing-csm'
 import {
   Fragment,

packages/visual-editing/src/ui/OverlayDragPreview.tsx

@@ -1,4 +1,4 @@
-import {Card, usePrefersDark, useTheme_v2} from '@sanity/ui/_visual-editing'
+import {Card, usePrefersDark, useTheme_v2} from '@sanity/ui'
 import type {FunctionComponent} from 'react'
 import {styled} from 'styled-components'
 

packages/visual-editing/src/ui/OverlayMinimapPrompt.tsx

@@ -1,5 +1,5 @@
 import {ExpandIcon} from '@sanity/icons/Expand'
-import {Card, Flex, Hotkeys, Text} from '@sanity/ui/_visual-editing'
+import {Card, Flex, Hotkeys, Text} from '@sanity/ui'
 import type {FunctionComponent} from 'react'
 import {styled} from 'styled-components'
 

packages/visual-editing/src/ui/Overlays.tsx

@@ -1,3 +1,5 @@
+import '@sanity/ui/styles.css'
+
 import type {ClientPerspective} from '@sanity/client'
 import {getDraftId, getPublishedId} from '@sanity/client/csm'
 import type {Status} from '@sanity/comlink'
@@ -10,7 +12,7 @@ import {
   studioTheme,
   ThemeProvider,
   usePrefersDark,
-} from '@sanity/ui/_visual-editing'
+} from '@sanity/ui'
 import {
   startTransition,
   useCallback,

packages/visual-editing/src/ui/PopoverPortal.tsx

@@ -1,4 +1,4 @@
-import {Portal} from '@sanity/ui/_visual-editing'
+import {Portal} from '@sanity/ui'
 import {type FunctionComponent, type MouseEvent} from 'react'
 import {css, styled} from 'styled-components'
 

packages/visual-editing/src/ui/context-menu/ContextMenu.tsx

@@ -1,16 +1,6 @@
-import {
-  Box,
-  Flex,
-  Menu,
-  MenuDivider,
-  MenuGroup,
-  MenuItem,
-  Popover,
-  Spinner,
-  Stack,
-  Text,
-  type PopoverMargins,
-} from '@sanity/ui/_visual-editing'
+import {Box, Flex, Spinner, Stack, Text} from '@sanity/ui'
+import {Menu, MenuDivider, MenuGroup, MenuItem} from '@sanity/ui/menu'
+import {Popover, type PopoverMargins} from '@sanity/ui/popover'
 import {useCallback, useEffect, useMemo, useState, type FunctionComponent} from 'react'
 
 import {useDocuments} from '../../react/useDocuments'

packages/visual-editing/src/ui/context-menu/contextMenuItems.tsx

@@ -15,7 +15,7 @@ import type {
   SchemaUnionOption,
 } from '@sanity/presentation-comlink'
 import type {SchemaType} from '@sanity/types'
-import {MenuGroup} from '@sanity/ui/_visual-editing'
+import {MenuGroup} from '@sanity/ui/menu'
 import {type FunctionComponent} from 'react'
 
 import type {OptimisticDocument} from '../../optimistic'

packages/visual-editing/src/ui/insert-menu/InsertMenu.tsx

@@ -7,21 +7,9 @@ import {SearchIcon} from '@sanity/icons/Search'
 import {ThLargeIcon} from '@sanity/icons/ThLarge'
 import {UlistIcon} from '@sanity/icons/Ulist'
 import {type InsertMenuOptions, type SchemaType} from '@sanity/types'
-import {
-  Box,
-  Button,
-  Flex,
-  Grid,
-  Menu,
-  MenuItem,
-  Stack,
-  Tab,
-  TabList,
-  Text,
-  TextInput,
-  Tooltip,
-  type MenuItemProps,
-} from '@sanity/ui/_visual-editing'
+import {Box, Button, Flex, Grid, Stack, Tab, TabList, Text, TextInput} from '@sanity/ui'
+import {Menu, MenuItem, type MenuItemProps} from '@sanity/ui/menu'
+import {Tooltip} from '@sanity/ui/tooltip'
 import {startCase} from 'lodash-es'
 import {useReducer, useState, type ChangeEvent, type CSSProperties} from 'react'
 import {isValidElementType} from 'react-is'