@liiift-studio/deploy-vercel-from-sanity 1.0.10 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.10",
-  "description": "Sanity Studio plugin — trigger and monitor Vercel deployments with full status, history, and build logs. Supports v3, v4, and v5.",
+  "version": "1.1.0",
+  "description": "Sanity Studio plugin — trigger and monitor Vercel deployments with full status, history, and build logs. Supports Studio v3 through v6.",
   "license": "MIT",
   "author": "Liiift Studio",
   "keywords": [
@@ -39,15 +39,18 @@
     "prepublishOnly": "npm run build"
   },
   "peerDependencies": {
+    "@sanity/icons": ">=3",
+    "@sanity/ui": ">=2",
     "react": ">=18",
     "sanity": ">=3"
   },
   "devDependencies": {
-    "@sanity/icons": "^3",
-    "@sanity/ui": "^3",
+    "@sanity/icons": "^5",
+    "@sanity/ui": "^4",
     "@types/react": "^19",
+    "@types/react-dom": "^19.2.4",
     "react": "^19",
-    "sanity": "^5",
+    "sanity": "^6",
     "tsup": "^8",
     "typescript": "^5"
   },

package/src/components/DeployHistory.tsx

@@ -1,9 +1,10 @@
 // Deployment history modal — shows last 10 deployments for a target
 import { useEffect, useState, useCallback } from 'react'
 import {
-	Dialog, Card, Box, Stack, Flex, Text, Badge, Spinner, Button,
+	Dialog, Card, Box, Flex, Text, Badge, Spinner, Button,
 } from '@sanity/ui'
-import { LaunchIcon, CloseIcon } from '@sanity/icons'
+import { Stack } from '../ui'
+import { LaunchIcon, CloseIcon } from '../icons'
 import { listDeployments } from '../lib/api'
 import { parseHookUrl, stateLabel, timeAgo, shortSha, safeHref } from '../lib/helpers'
 import type { DeployTarget, VercelDeployment } from '../types'

package/src/components/DeployItem.tsx

@@ -2,13 +2,13 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { flushSync } from 'react-dom'
 import {
-	Card, Box, Stack, Flex, Text, Button, Tooltip, Badge, Spinner,
-	MenuButton, Menu, MenuItem, Code, useToast,
+	Card, Box, Flex, Text, Button, Badge, Spinner,
 } from '@sanity/ui'
+import { Stack, useToast, Tooltip, ActionMenu, Code } from '../ui'
 import {
 	ClockIcon, TrashIcon, EllipsisVerticalIcon, LaunchIcon,
 	CopyIcon, CheckmarkIcon, WarningOutlineIcon, ChevronDownIcon, ChevronUpIcon, EditIcon, SchemaIcon
-} from '@sanity/icons'
+} from '../icons'
 import { listDeployments, cancelDeployment, triggerDeploy, getDeploymentEvents } from '../lib/api'
 import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref, projectHref, githubCommitHref } from '../lib/helpers'
 import { StatusBadge } from './StatusBadge'
@@ -270,52 +270,22 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 										</>
 									)}
 								</Flex>
-								<MenuButton
-									button={<Button mode="ghost" icon={EllipsisVerticalIcon} padding={2} />}
+								<ActionMenu
 									id={`menu-${target._id}`}
-									menu={
-										<Menu>
-											<MenuItem
-												text="Edit target"
-												icon={EditIcon}
-												onClick={() => onEdit(target)}
-											/>
-											<MenuItem
-												text="History"
-												icon={ClockIcon}
-												onClick={() => setShowHistory(true)}
-											/>
-											{safeHref(latest?.inspectorUrl) && (
-												<MenuItem
-													text="Build logs"
-													icon={LaunchIcon}
-													as="a"
-													href={safeHref(latest?.inspectorUrl)}
-													target="_blank"
-													rel="noreferrer"
-												/>
-											)}
-											{vercelProjectUrl && (
-												<MenuItem
-													text="Open in Vercel"
-													icon={LaunchIcon}
-													as="a"
-													href={vercelProjectUrl}
-													target="_blank"
-													rel="noreferrer"
-												/>
-											)}
-											{!target.disableDeleteAction && (
-												<MenuItem
-													text="Delete"
-													icon={TrashIcon}
-													tone="critical"
-													onClick={() => onDelete(target)}
-												/>
-											)}
-										</Menu>
-									}
-									popover={{ placement: 'bottom-end' }}
+									buttonIcon={EllipsisVerticalIcon}
+									items={[
+										{ text: 'Edit target', icon: EditIcon, onClick: () => onEdit(target) },
+										{ text: 'History', icon: ClockIcon, onClick: () => setShowHistory(true) },
+										...(safeHref(latest?.inspectorUrl)
+											? [{ text: 'Build logs', icon: LaunchIcon, href: safeHref(latest?.inspectorUrl)! }]
+											: []),
+										...(vercelProjectUrl
+											? [{ text: 'Open in Vercel', icon: LaunchIcon, href: vercelProjectUrl }]
+											: []),
+										...(!target.disableDeleteAction
+											? [{ text: 'Delete', icon: TrashIcon, tone: 'critical' as const, onClick: () => onDelete(target) }]
+											: []),
+									]}
 								/>
 							</Flex>
 
@@ -354,14 +324,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 										{/* Commit SHA — links to GitHub if repo info available, tooltip shows full message */}
 										{sha && (
-											<Tooltip
-												content={
-													<Box padding={2}>
-														<Text size={1}>{commitMsg ?? sha}</Text>
-													</Box>
-												}
-												portal
-											>
+											<Tooltip text={commitMsg ?? sha}>
 												{commitHref ? (
 													<a
 														href={commitHref}
@@ -392,14 +355,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 										{/* Visit link + copy URL */}
 										{latest?.url && latest.state === 'READY' && (
 											<>
-												<Tooltip
-													content={
-														<Box padding={2}>
-															<Text size={1}>{copied ? 'Copied!' : 'Copy URL'}</Text>
-														</Box>
-													}
-													portal
-												>
+												<Tooltip text={copied ? 'Copied!' : 'Copy URL'}>
 													<Button
 														mode="ghost"
 														icon={copied ? CheckmarkIcon : CopyIcon}
@@ -463,7 +419,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 															<Stack space={2}>
 																<Box style={{ maxHeight: 240, overflowY: 'auto', fontFamily: 'monospace', fontSize: 13, lineHeight: 1.6 }}>
 																	{errorLines.map((line, i) => (
-																		<Code key={i} size={1} style={{ display: 'block', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
+																		<Code key={i} style={{ display: 'block', whiteSpace: 'pre-wrap', wordBreak: 'break-all' }}>
 																			{line}
 																		</Code>
 																	))}

package/src/components/DeployTargetForm.tsx

@@ -2,9 +2,10 @@
 import { useState, useCallback } from 'react'
 import { useClient } from 'sanity'
 import {
-	Dialog, Box, Stack, Flex, Text, TextInput, Button, Switch, Label, Card,
+	Dialog, Box, Flex, Text, TextInput, Button, Switch, Label, Card,
 } from '@sanity/ui'
-import { CheckmarkCircleIcon } from '@sanity/icons'
+import { Stack } from '../ui'
+import { CheckmarkCircleIcon } from '../icons'
 import type { DeployTarget } from '../types'
 
 const VERCEL_HOOK_RE = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//
@@ -34,10 +35,10 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 		if (!canSave) return
 		setSaving(true)
 		setError(null)
-		const fields = {
+		const fields: { name: string; url: string; teamId: string | null; disableDeleteAction: boolean } = {
 			name:                name.trim(),
 			url:                 url.trim(),
-			...(teamId.trim()  ? { teamId: teamId.trim() } : { teamId: null }),
+			teamId:              teamId.trim() || null,
 			disableDeleteAction: disableDelete,
 		}
 		try {
@@ -127,7 +128,7 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 							id="disable-delete"
 						/>
 						<Stack space={1}>
-							<Label size={1} htmlFor="disable-delete">Disable delete action</Label>
+							<Label as="label" size={1} htmlFor="disable-delete">Disable delete action</Label>
 							<Text size={0} muted>Hides the delete button for this target in the studio.</Text>
 						</Stack>
 					</Flex>

package/src/components/DeployTool.tsx

@@ -2,9 +2,10 @@
 import { useState, useEffect, useCallback } from 'react'
 import { useClient } from 'sanity'
 import {
-	Card, Box, Stack, Flex, Text, Heading, Spinner, Button, Dialog, useToast,
+	Card, Box, Flex, Text, Heading, Spinner, Button, Dialog,
 } from '@sanity/ui'
-import { TokenIcon, TrashIcon, WarningOutlineIcon, AddIcon } from '@sanity/icons'
+import { Stack, useToast, ToastViewport } from '../ui'
+import { TokenIcon, TrashIcon, WarningOutlineIcon, AddIcon } from '../icons'
 import { DeployItem } from './DeployItem'
 import { TokenSetup } from './TokenSetup'
 import { DeployTargetForm } from './DeployTargetForm'
@@ -287,6 +288,9 @@ export function DeployTool() {
 					</Box>
 				</Dialog>
 			)}
+
+			{/* Fallback toast surface — renders nothing when @sanity/ui exports its own useToast */}
+			<ToastViewport />
 		</Card>
 	)
 }

package/src/components/TokenSetup.tsx

@@ -1,8 +1,11 @@
 // Vercel API token form — rendered inside a Dialog by DeployTool
 import { useState, useCallback } from 'react'
 import { useClient } from 'sanity'
-import { Stack, Text, TextInput, Button, Card, Dialog, Flex } from '@sanity/ui'
-import { CheckmarkCircleIcon } from '@sanity/icons'
+import {
+	Text, TextInput, Button, Card, Dialog, Flex,
+} from '@sanity/ui'
+import { Stack } from '../ui'
+import { CheckmarkCircleIcon } from '../icons'
 
 interface TokenSetupProps {
 	/** Called after the token is successfully saved */

package/src/icons.tsx

@@ -0,0 +1,71 @@
+// Version-agnostic access to @sanity/icons — resolves named exports (icons v3/v4) or <Icon symbol> (icons v5+)
+import { forwardRef } from 'react'
+import type { ComponentType, SVGProps } from 'react'
+import * as sanityIcons from '@sanity/icons'
+
+/** Props every Sanity icon accepts — it renders a plain sized SVG. */
+export type IconProps = SVGProps<SVGSVGElement>
+
+/** An icon component, whichever shape the installed @sanity/icons exposes it in. */
+export type IconComponent = ComponentType<IconProps>
+
+/**
+ * The installed @sanity/icons namespace, read through an index signature.
+ *
+ * icons v3 and v4 export one named component per glyph (`RocketIcon`). v5.0.0
+ * dropped those from the barrel and replaced them with a single `<Icon symbol>`
+ * that lazy-loads from an internal map. Its `index.d.ts` still declares the old
+ * named exports, so the mismatch is invisible to TypeScript and only surfaces at
+ * runtime — reading the namespace dynamically lets one build serve every major.
+ */
+const INSTALLED = sanityIcons as unknown as Record<string, unknown>
+
+/** Sizing of a Sanity icon glyph — 1em square on a 25-unit viewBox, matching @sanity/icons. */
+const GLYPH = { width: '1em', height: '1em', viewBox: '0 0 25 25', fill: 'none' } as const
+
+/** Last-resort placeholder when the installed @sanity/icons exposes neither shape. Holds layout, draws nothing. */
+const MissingIcon = forwardRef<SVGSVGElement, IconProps>(function MissingIcon(props, ref) {
+	return <svg {...GLYPH} xmlns="http://www.w3.org/2000/svg" {...props} ref={ref} />
+})
+
+/** The v5+ `<Icon>` component, absent on icons v3 and v4. */
+type SymbolIcon = ComponentType<IconProps & { symbol: string }>
+
+/**
+ * Resolve one glyph against whichever @sanity/icons the host Studio installed.
+ * Always reads from the host package, so new and revised artwork is picked up
+ * on the consumer's next `@sanity/icons` update without a release here.
+ *
+ * @param name   Named export used by icons v3 and v4, e.g. `RocketIcon`.
+ * @param symbol Kebab-case symbol used by the v5+ `<Icon>` component, e.g. `rocket`.
+ */
+function resolveIcon(name: string, symbol: string): IconComponent {
+	const named = INSTALLED[name] as IconComponent | undefined
+	if (named) return named
+
+	const Icon = INSTALLED.Icon as SymbolIcon | undefined
+	if (!Icon) return MissingIcon
+
+	const Resolved = forwardRef<SVGSVGElement, IconProps>(function SanityIcon(props, ref) {
+		return <Icon symbol={symbol} {...props} ref={ref as never} />
+	})
+	Resolved.displayName = name
+	return Resolved as IconComponent
+}
+
+export const AddIcon = resolveIcon('AddIcon', 'add')
+export const CheckmarkCircleIcon = resolveIcon('CheckmarkCircleIcon', 'checkmark-circle')
+export const CheckmarkIcon = resolveIcon('CheckmarkIcon', 'checkmark')
+export const ChevronDownIcon = resolveIcon('ChevronDownIcon', 'chevron-down')
+export const ChevronUpIcon = resolveIcon('ChevronUpIcon', 'chevron-up')
+export const ClockIcon = resolveIcon('ClockIcon', 'clock')
+export const CloseIcon = resolveIcon('CloseIcon', 'close')
+export const CopyIcon = resolveIcon('CopyIcon', 'copy')
+export const EditIcon = resolveIcon('EditIcon', 'edit')
+export const EllipsisVerticalIcon = resolveIcon('EllipsisVerticalIcon', 'ellipsis-vertical')
+export const LaunchIcon = resolveIcon('LaunchIcon', 'launch')
+export const RocketIcon = resolveIcon('RocketIcon', 'rocket')
+export const SchemaIcon = resolveIcon('SchemaIcon', 'schema')
+export const TokenIcon = resolveIcon('TokenIcon', 'token')
+export const TrashIcon = resolveIcon('TrashIcon', 'trash')
+export const WarningOutlineIcon = resolveIcon('WarningOutlineIcon', 'warning-outline')

package/src/index.ts

@@ -1,6 +1,6 @@
 // deploy-vercel-from-sanity — Sanity Studio v5 plugin for Vercel deployments
 import { definePlugin } from 'sanity'
-import { RocketIcon } from '@sanity/icons'
+import { RocketIcon } from './icons'
 import { DeployTool } from './components/DeployTool'
 import { vercelDeploySchema } from './schema/vercelDeploy'
 import type { VercelDeployPluginConfig } from './types'

package/src/schema/vercelDeploy.ts

@@ -1,6 +1,6 @@
 // Sanity schema for vercel_deploy documents — stores deploy hook targets
 import { defineField, defineType } from 'sanity'
-import { RocketIcon } from '@sanity/icons'
+import { RocketIcon } from '../icons'
 
 export const vercelDeploySchema = defineType({
 	name: 'vercel_deploy',

package/src/ui.tsx

@@ -0,0 +1,337 @@
+// Version-agnostic access to the @sanity/ui components that v4 moved out of the barrel, with local fallbacks
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { CSSProperties, ReactNode } from 'react'
+import * as sanityUi from '@sanity/ui'
+import { Box, Button, Card, Flex, Stack as SanityStack, Text } from '@sanity/ui'
+
+/**
+ * The installed @sanity/ui namespace, read through an index signature.
+ *
+ * @sanity/ui v4 relocated Tooltip, Menu, MenuButton, MenuItem, Code, Popover and
+ * useToast into subpath entry points (`@sanity/ui/tooltip`, `/menu`, …) and dropped
+ * them from the root barrel. Those subpaths do not exist on v2 or v3, so a static
+ * import of either shape breaks half the supported Studio range. Reading the barrel
+ * dynamically lets one build prefer the real components wherever they are still
+ * exported and fall back to the local equivalents below when they are not.
+ */
+const INSTALLED = sanityUi as unknown as Record<string, unknown>
+
+/* ------------------------------------------------------------------ stack -- */
+
+/**
+ * Whether the installed @sanity/ui is v4 or newer.
+ *
+ * v4 both emptied the barrel of Tooltip/Menu/Code/useToast and renamed Stack's
+ * `space` prop to `gap` (the old name is typed `never` and ignored at runtime, so
+ * passing it silently collapses all vertical spacing). Those landed in the same
+ * major, so the absence of `useToast` from the barrel identifies v4+ reliably.
+ */
+const IS_UI_V4_PLUS = !('useToast' in INSTALLED)
+
+/** Props for the compat Stack — keeps the pre-v4 `space` name at every call site. */
+export type StackProps = {
+	space?: number
+	children: ReactNode
+	[key: string]: unknown
+}
+
+/**
+ * Vertical stack. Forwards `space` on @sanity/ui v2 and v3 and `gap` on v4+, so one
+ * call site spells spacing correctly on either major.
+ *
+ * @param space Spacing step on Sanity's scale, forwarded under whichever name applies.
+ */
+export function Stack({ space, children, ...rest }: StackProps): React.JSX.Element {
+	const spacing = space === undefined ? {} : IS_UI_V4_PLUS ? { gap: space } : { space }
+	const Component = SanityStack as unknown as React.ComponentType<Record<string, unknown>>
+	return <Component {...rest} {...spacing}>{children}</Component>
+}
+
+/* ------------------------------------------------------------------ toast -- */
+
+/** A toast request, matching the subset of @sanity/ui's ToastParams this plugin uses. */
+export type ToastParams = {
+	status?: 'success' | 'error' | 'warning' | 'info'
+	title?: ReactNode
+	description?: ReactNode
+}
+
+/** The object returned by useToast — only `push` is used here. */
+export type Toaster = { push: (params: ToastParams) => void }
+
+/** A queued fallback toast. `id` is a monotonic counter, unique for the session. */
+type LocalToast = ToastParams & { id: number }
+
+/** How long a fallback toast stays on screen, in milliseconds. */
+const LOCAL_TOAST_MS = 5000
+
+/** Border tone per toast status, used only by the fallback viewport. */
+const LOCAL_TOAST_TONE: Record<string, 'positive' | 'critical' | 'caution' | 'primary'> = {
+	success: 'positive',
+	error: 'critical',
+	warning: 'caution',
+	info: 'primary',
+}
+
+let nextToastId = 0
+let localToasts: LocalToast[] = []
+const toastListeners = new Set<(toasts: LocalToast[]) => void>()
+
+/** Publish the current fallback queue to every mounted viewport. */
+function emitToasts(): void {
+	for (const listener of toastListeners) listener(localToasts)
+}
+
+/** Queue a fallback toast and schedule its removal. */
+function pushLocalToast(params: ToastParams): void {
+	const toast: LocalToast = { ...params, id: nextToastId++ }
+	localToasts = [...localToasts, toast]
+	emitToasts()
+	setTimeout(() => {
+		localToasts = localToasts.filter(t => t.id !== toast.id)
+		emitToasts()
+	}, LOCAL_TOAST_MS)
+}
+
+/** The real hook when the installed @sanity/ui still exports it, otherwise undefined. */
+const installedUseToast = INSTALLED.useToast as (() => Toaster) | undefined
+
+/** Stable fallback toaster — identity never changes, so it is safe in dependency arrays. */
+const localToaster: Toaster = { push: pushLocalToast }
+
+/**
+ * Push toasts through Studio's toast system where available, or through the local
+ * viewport below on @sanity/ui v4+. Mount `<ToastViewport />` once for the fallback
+ * to be visible; it renders nothing when the real hook is present.
+ */
+export function useToast(): Toaster {
+	const real = installedUseToast
+	// Hook order is stable across renders because `installedUseToast` is module-level.
+	if (real) return real()
+	return localToaster
+}
+
+/**
+ * Renders queued fallback toasts. No-op when the installed @sanity/ui exports its
+ * own useToast, because Studio's ToastProvider is already handling them.
+ */
+export function ToastViewport(): React.JSX.Element | null {
+	const [toasts, setToasts] = useState<LocalToast[]>(localToasts)
+
+	useEffect(() => {
+		if (installedUseToast) return
+		toastListeners.add(setToasts)
+		return () => { toastListeners.delete(setToasts) }
+	}, [])
+
+	if (installedUseToast || toasts.length === 0) return null
+
+	return (
+		<Box style={{ position: 'fixed', bottom: 16, right: 16, zIndex: 1000000, maxWidth: 360 }}>
+			<Stack space={2}>
+				{toasts.map(toast => (
+					<Card
+						key={toast.id}
+						padding={3}
+						radius={2}
+						shadow={3}
+						tone={LOCAL_TOAST_TONE[toast.status ?? 'info'] ?? 'primary'}
+					>
+						<Stack space={2}>
+							{toast.title && <Text size={1} weight="semibold">{toast.title}</Text>}
+							{toast.description && <Text size={1} muted>{toast.description}</Text>}
+						</Stack>
+					</Card>
+				))}
+			</Stack>
+		</Box>
+	)
+}
+
+/* ---------------------------------------------------------------- tooltip -- */
+
+/** Props for the compat Tooltip — plain text rather than @sanity/ui's ReactNode `content`. */
+export type TooltipProps = { text: string; children: ReactNode }
+
+/** The real Tooltip when the installed @sanity/ui still exports it, otherwise undefined. */
+const InstalledTooltip = INSTALLED.Tooltip as
+	| React.ComponentType<{ content: ReactNode; portal?: boolean; children: ReactNode }>
+	| undefined
+
+/**
+ * Hover hint over `children`. Uses Studio's Tooltip where available and degrades to
+ * the native `title` attribute on @sanity/ui v4+.
+ */
+export function Tooltip({ text, children }: TooltipProps): React.JSX.Element {
+	if (InstalledTooltip) {
+		return (
+			<InstalledTooltip content={<Box padding={2}><Text size={1}>{text}</Text></Box>} portal>
+				{children}
+			</InstalledTooltip>
+		)
+	}
+	return <span title={text} style={{ display: 'inline-flex' }}>{children}</span>
+}
+
+/* ------------------------------------------------------------------- menu -- */
+
+/** One entry in an ActionMenu. Either `onClick` or `href` drives the behaviour. */
+export type MenuAction = {
+	text: string
+	icon: React.ComponentType<React.SVGProps<SVGSVGElement>>
+	onClick?: () => void
+	href?: string
+	tone?: 'critical' | 'default'
+}
+
+/** Props for the compat ActionMenu — a declarative item list rather than nested JSX. */
+export type ActionMenuProps = { id: string; items: MenuAction[]; buttonIcon: MenuAction['icon'] }
+
+const InstalledMenuButton = INSTALLED.MenuButton as React.ComponentType<Record<string, unknown>> | undefined
+const InstalledMenu = INSTALLED.Menu as React.ComponentType<Record<string, unknown>> | undefined
+const InstalledMenuItem = INSTALLED.MenuItem as React.ComponentType<Record<string, unknown>> | undefined
+
+/** Whether the installed @sanity/ui still exports the full menu trio. */
+const HAS_INSTALLED_MENU = Boolean(InstalledMenuButton && InstalledMenu && InstalledMenuItem)
+
+/**
+ * Overflow menu for a deploy target. Uses Studio's MenuButton where available and
+ * falls back to a locally positioned card on @sanity/ui v4+.
+ *
+ * @param id        Stable DOM id, required by @sanity/ui's MenuButton.
+ * @param items     Actions in display order.
+ * @param buttonIcon Icon for the trigger button.
+ */
+export function ActionMenu({ id, items, buttonIcon }: ActionMenuProps): React.JSX.Element {
+	const [open, setOpen] = useState(false)
+	const wrapRef = useRef<HTMLDivElement>(null)
+
+	// Fallback only — dismiss on outside click or Escape.
+	useEffect(() => {
+		if (HAS_INSTALLED_MENU || !open) return
+		const onPointerDown = (e: MouseEvent) => {
+			if (!wrapRef.current?.contains(e.target as Node)) setOpen(false)
+		}
+		const onKeyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') setOpen(false) }
+		document.addEventListener('mousedown', onPointerDown)
+		document.addEventListener('keydown', onKeyDown)
+		return () => {
+			document.removeEventListener('mousedown', onPointerDown)
+			document.removeEventListener('keydown', onKeyDown)
+		}
+	}, [open])
+
+	const runAction = useCallback((item: MenuAction) => {
+		setOpen(false)
+		item.onClick?.()
+	}, [])
+
+	if (HAS_INSTALLED_MENU && InstalledMenuButton && InstalledMenu && InstalledMenuItem) {
+		const MenuButton = InstalledMenuButton
+		const Menu = InstalledMenu
+		const MenuItem = InstalledMenuItem
+		return (
+			<MenuButton
+				id={id}
+				button={<Button mode="ghost" icon={buttonIcon} padding={2} />}
+				popover={{ placement: 'bottom-end' }}
+				menu={
+					<Menu>
+						{items.map(item => (
+							<MenuItem
+								key={item.text}
+								text={item.text}
+								icon={item.icon}
+								tone={item.tone}
+								{...(item.href
+									? { as: 'a', href: item.href, target: '_blank', rel: 'noreferrer' }
+									: { onClick: () => item.onClick?.() })}
+							/>
+						))}
+					</Menu>
+				}
+			/>
+		)
+	}
+
+	return (
+		<div ref={wrapRef} style={{ position: 'relative' }}>
+			<Button
+				mode="ghost"
+				icon={buttonIcon}
+				padding={2}
+				id={id}
+				aria-haspopup="menu"
+				aria-expanded={open}
+				onClick={() => setOpen(o => !o)}
+			/>
+			{open && (
+				<Card
+					radius={2}
+					shadow={3}
+					padding={1}
+					role="menu"
+					style={{ position: 'absolute', top: '100%', right: 0, marginTop: 4, zIndex: 1000, minWidth: 180 }}
+				>
+					<Stack space={1}>
+						{items.map(item => {
+							const Icon = item.icon
+							const label = (
+								<Flex align="center" gap={2} paddingX={2} paddingY={2}>
+									<Icon width="1em" height="1em" />
+									<Text size={1}>{item.text}</Text>
+								</Flex>
+							)
+							return item.href ? (
+								<a
+									key={item.text}
+									role="menuitem"
+									href={item.href}
+									target="_blank"
+									rel="noreferrer"
+									onClick={() => setOpen(false)}
+									style={{ color: 'inherit', textDecoration: 'none', display: 'block' }}
+								>
+									{label}
+								</a>
+							) : (
+								<Card
+									key={item.text}
+									as="button"
+									role="menuitem"
+									tone={item.tone === 'critical' ? 'critical' : 'default'}
+									radius={1}
+									onClick={() => runAction(item)}
+									style={{ display: 'block', width: '100%', textAlign: 'left', cursor: 'pointer', border: 0, background: 'none' }}
+								>
+									{label}
+								</Card>
+							)
+						})}
+					</Stack>
+				</Card>
+			)}
+		</div>
+	)
+}
+
+/* ------------------------------------------------------------------- code -- */
+
+/** The real Code when the installed @sanity/ui still exports it, otherwise undefined. */
+const InstalledCode = INSTALLED.Code as
+	| React.ComponentType<{ size?: number; style?: CSSProperties; children: ReactNode }>
+	| undefined
+
+/** Monospace styling for the fallback Code element, approximating @sanity/ui's `size={1}`. */
+const FALLBACK_CODE_STYLE: CSSProperties = {
+	fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+	fontSize: '0.8125rem',
+	lineHeight: 1.4,
+	margin: 0,
+}
+
+/** Monospace block. Uses Studio's Code where available, a plain `<code>` on @sanity/ui v4+. */
+export function Code({ style, children }: { style?: CSSProperties; children: ReactNode }): React.JSX.Element {
+	if (InstalledCode) return <InstalledCode size={1} style={style}>{children}</InstalledCode>
+	return <code style={{ ...FALLBACK_CODE_STYLE, ...style }}>{children}</code>
+}

package/src/version.ts

@@ -1,2 +1,2 @@
 // Package version — keep in sync with package.json
-export const VERSION = '1.0.10'
+export const VERSION = '1.1.0'