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

package/src/compat/tooltip.tsx

@@ -0,0 +1,78 @@
+// Hover/focus hint — Studio's Tooltip where available, an accessible local tooltip otherwise
+import { useId, useState } from 'react'
+import type { ReactNode } from 'react'
+import { UI, resolveExport } from './resolve'
+import { Box, Card, Text } from './primitives'
+import type { ComponentType } from 'react'
+
+/** Props for the compat Tooltip — plain text rather than @sanity/ui's ReactNode `content`. */
+export type TooltipProps = {
+	/** Hint text. Also used as the accessible description of the wrapped control. */
+	text: string
+	children: ReactNode
+}
+
+/** The real Tooltip when the installed @sanity/ui still exports it, otherwise undefined. */
+const InstalledTooltip = resolveExport<ComponentType<{
+	content: ReactNode
+	portal?: boolean
+	children: ReactNode
+}>>(UI, 'Tooltip')
+
+/**
+ * Hint shown on hover and on keyboard focus.
+ *
+ * The fallback deliberately does not use the native `title` attribute: `title`
+ * never appears on keyboard focus, never appears on touch, cannot be dismissed,
+ * and browsers will not re-read it while the pointer is stationary — which
+ * silently broke the copy button's "Copied!" confirmation. This renders a real
+ * element instead and wires it to the wrapped control via `aria-describedby`,
+ * so the text is announced and updates when it changes.
+ */
+export function Tooltip({ text, children }: TooltipProps): React.JSX.Element {
+	const id = useId()
+	const [visible, setVisible] = useState(false)
+
+	if (InstalledTooltip) {
+		return (
+			<InstalledTooltip content={<Box padding={2}><Text size={1}>{text}</Text></Box>} portal>
+				{children}
+			</InstalledTooltip>
+		)
+	}
+
+	return (
+		<span
+			style={{ position: 'relative', display: 'inline-flex' }}
+			aria-describedby={id}
+			onMouseEnter={() => setVisible(true)}
+			onMouseLeave={() => setVisible(false)}
+			onFocusCapture={() => setVisible(true)}
+			onBlurCapture={() => setVisible(false)}
+			onKeyDown={e => { if (e.key === 'Escape') setVisible(false) }}
+		>
+			{children}
+			<Card
+				id={id}
+				role="tooltip"
+				radius={2}
+				shadow={2}
+				padding={2}
+				style={{
+					position: 'absolute',
+					bottom: '100%',
+					left: '50%',
+					transform: 'translateX(-50%)',
+					marginBottom: 4,
+					whiteSpace: 'nowrap',
+					pointerEvents: 'none',
+					zIndex: 1000,
+					// Kept in the accessibility tree when hidden so `aria-describedby` still resolves.
+					visibility: visible ? 'visible' : 'hidden',
+				}}
+			>
+				<Text size={1}>{text}</Text>
+			</Card>
+		</span>
+	)
+}

package/src/components/DeployHistory.tsx

@@ -1,13 +1,10 @@
 // Deployment history modal — shows last 10 deployments for a target
 import { useEffect, useState, useCallback } from 'react'
-import {
-	Dialog, Card, Box, Flex, Text, Badge, Spinner, Button,
-} from '@sanity/ui'
-import { Stack } from '../ui'
 import { LaunchIcon, CloseIcon } from '../icons'
 import { listDeployments } from '../lib/api'
-import { parseHookUrl, stateLabel, timeAgo, shortSha, safeHref } from '../lib/helpers'
+import { parseHookUrl, stateLabel, timeAgo, shortSha, safeHref, deploymentHref } from '../lib/helpers'
 import type { DeployTarget, VercelDeployment } from '../types'
+import { Badge, Box, Button, Card, Dialog, Flex, Spinner, Stack, Text } from '../compat'
 
 interface DeployHistoryProps {
 	target: DeployTarget
@@ -92,9 +89,9 @@ export function DeployHistory({ target, token, onClose }: DeployHistoryProps) {
 									<Flex gap={3} align="center">
 										{/* Preview URL */}
 										<Box flex={2} style={{ overflow: 'hidden' }}>
-											{d.url ? (
+											{deploymentHref(d.url) ? (
 												<a
-													href={`https://${d.url}`}
+													href={deploymentHref(d.url)}
 													target="_blank"
 													rel="noreferrer"
 													style={{ color: 'inherit' }}
@@ -130,18 +127,23 @@ export function DeployHistory({ target, token, onClose }: DeployHistoryProps) {
 											<Text size={1} muted>{timeAgo(d.created)}</Text>
 										</Box>
 
-										{/* Build logs link */}
+										{/* Build logs link. Rendered as a link, not a Button inside an anchor:
+										    nesting interactive content in <a> gives two focus stops and Enter
+										    activates the button, which has no handler, so the link never opens
+										    for keyboard users. */}
 										<Box style={{ width: 64 }}>
 											{safeHref(d.inspectorUrl) ? (
-												<a href={safeHref(d.inspectorUrl)} target="_blank" rel="noreferrer">
-													<Button
-														text="Logs"
-														mode="ghost"
-														tone="default"
-														icon={LaunchIcon}
-														style={{ fontSize: '12px' }}
-													/>
-												</a>
+												<Button
+													as="a"
+													href={safeHref(d.inspectorUrl)}
+													target="_blank"
+													rel="noreferrer"
+													text="Logs"
+													mode="ghost"
+													tone="default"
+													icon={LaunchIcon}
+													style={{ fontSize: '12px' }}
+												/>
 											) : (
 												<Text size={1} muted>—</Text>
 											)}

package/src/components/DeployItem.tsx

@@ -1,19 +1,16 @@
 // Per-deploy-target card — shows status, build timer, history, cancel, deploy, copy URL, and error logs
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { flushSync } from 'react-dom'
-import {
-	Card, Box, Flex, Text, Button, Badge, Spinner,
-} from '@sanity/ui'
-import { Stack, useToast, Tooltip, ActionMenu, Code } from '../ui'
+import { ActionMenu, Badge, Box, Button, Card, Code, Flex, Spinner, Stack, Text, Tooltip, useToast } from '../compat'
 import {
 	ClockIcon, TrashIcon, EllipsisVerticalIcon, LaunchIcon,
-	CopyIcon, CheckmarkIcon, WarningOutlineIcon, ChevronDownIcon, ChevronUpIcon, EditIcon, SchemaIcon
+	CopyIcon, CheckmarkIcon, WarningOutlineIcon, ChevronDownIcon, ChevronUpIcon, EditIcon,
 } from '../icons'
 import { listDeployments, cancelDeployment, triggerDeploy, getDeploymentEvents } from '../lib/api'
-import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref, projectHref, githubCommitHref } from '../lib/helpers'
+import { parseHookUrl, isActiveState, formatDuration, timeAgo, shortSha, safeHref, projectHref, githubCommitHref, deploymentHref } from '../lib/helpers'
 import { StatusBadge } from './StatusBadge'
 import { DeployHistory } from './DeployHistory'
-import type { DeployTarget, VercelDeployment } from '../types'
+import type { DeployTarget, VercelDeployment, VercelDeployState } from '../types'
 
 const POLL_INTERVAL_MS = 5_000
 const LABEL_WIDTH      = 64
@@ -44,9 +41,15 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const [errorLines, setErrorLines]        = useState<string[]>([])
 	const [loadingLogs, setLoadingLogs]      = useState(false)
 	const [logError, setLogError]            = useState<string | null>(null)
+	const [pollError, setPollError]          = useState<string | null>(null)
 
 	/** uid of the deployment that was latest when Deploy was clicked — lets us tell the optimistic state apart from a genuinely new deployment */
 	const triggeredFromUidRef = useRef<string | undefined>(undefined)
+	/** Monotonic request id — a slower earlier poll must not overwrite a newer response. */
+	const requestSeqRef = useRef(0)
+	/** False once the card unmounts, so in-flight responses stop updating state. */
+	const mountedRef = useRef(true)
+	useEffect(() => () => { mountedRef.current = false }, [])
 
 	const latest = deployments[0]
 	/** True between the click and the API returning a new deployment — drives the optimistic "Queued" state */
@@ -56,11 +59,19 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	// ── Fetch deployments ──────────────────────────────────────────────────────
 	const fetchDeployments = useCallback(async () => {
 		if (!projectId || !hookId || !token) return
+		const seq = ++requestSeqRef.current
 		try {
 			const data = await listDeployments({ projectId, hookId, token, teamId: target.teamId })
+			// Drop the response if a newer request has since been issued, or the card unmounted.
+			if (seq !== requestSeqRef.current || !mountedRef.current) return
 			setDeployments(data)
+			setPollError(null)
 		} catch (err) {
-			console.error('deploy-vercel-from-sanity: fetch error', err)
+			if (seq !== requestSeqRef.current || !mountedRef.current) return
+			// Surfaced in the card rather than only logged — the README documents rate-limit
+			// and auth failures as visible, and a silently frozen card looks identical to an idle one.
+			setPollError(err instanceof Error ? err.message : 'Could not reach the Vercel API')
+			console.error('Deploy-vercel-from-sanity: fetch error', err)
 		}
 	}, [projectId, hookId, token, target.teamId])
 
@@ -90,11 +101,11 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	}, [isPending])
 
 	//── Deploy-complete toast ─────────────────────────────────────────────────
-	const prevStateRef = useRef<string | undefined>(undefined)
+	const prevStateRef = useRef<VercelDeployState | undefined>(undefined)
 	useEffect(() => {
 		const current = latest?.state
 		const prev = prevStateRef.current
-		if (prev && isActiveState(prev as never) && current && !isActiveState(current as never)) {
+		if (prev && isActiveState(prev) && current && !isActiveState(current)) {
 			if (current === 'READY') {
 				toast.push({ status: 'success', title: `${target.name} deployed`, description: 'Build completed successfully' })
 			} else if (current === 'ERROR') {
@@ -164,7 +175,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 	const copyUrl = useCallback(() => {
 		if (!latest?.url) return
-		const fullUrl = `https://${latest.url}`
+		const fullUrl = deploymentHref(latest.url) ?? ''
 		navigator.clipboard.writeText(fullUrl).then(() => {
 			setCopied(true)
 			setTimeout(() => setCopied(false), 2000)
@@ -208,7 +219,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const commitMsg        = latest?.meta?.githubCommitMessage?.split('\n')[0]
 	const sha              = shortSha(latest?.meta?.githubCommitSha)
 	const fullSha          = latest?.meta?.githubCommitSha
-	const commitHref       = githubCommitHref(latest?.meta)
+	const commitHref       = safeHref(githubCommitHref(latest?.meta) ?? undefined)
 	const creator          = latest?.creator?.username
 	const deployedAt       = latest?.created ? timeAgo(latest.created) : null
 	const vercelProjectUrl = projectHref(latest?.inspectorUrl)
@@ -272,6 +283,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 								</Flex>
 								<ActionMenu
 									id={`menu-${target._id}`}
+									label={`Actions for ${target.name}`}
 									buttonIcon={EllipsisVerticalIcon}
 									items={[
 										{ text: 'Edit target', icon: EditIcon, onClick: () => onEdit(target) },
@@ -310,7 +322,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 										{latest?.url && latest.state === 'READY' && (
 											<>
 												<a
-													href={`https://${latest.url}`}
+													href={deploymentHref(latest.url)}
 													target="_blank"
 													rel="noreferrer"
 													style={{ color: 'inherit' }}
@@ -385,6 +397,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 										{isError && (
 											<Stack space={2}>
 												<Button
+													aria-expanded={showErrorLogs}
 													text={showErrorLogs ? 'Hide error details' : 'Show error details'}
 													mode="ghost"
 													tone="critical"
@@ -449,6 +462,17 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 								</Stack>
 							)}
 
+							{/* Polling failures were previously logged only, so a card that had stopped
+							    updating looked identical to an idle one. */}
+							{pollError && (
+								<Card tone="caution" padding={3} radius={2} role="status">
+									<Flex align="center" gap={2}>
+										<WarningOutlineIcon aria-hidden="true" />
+										<Text size={1}>Status updates paused — {pollError}</Text>
+									</Flex>
+								</Card>
+							)}
+
 						</Stack>
 
 						{/* ── Details accordion — flush to left/bottom/right ─────── */}
@@ -456,6 +480,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 							<Button
 								mode="ghost"
 								iconRight={showDetails ? ChevronUpIcon : ChevronDownIcon}
+								aria-expanded={showDetails}
 								text="Details"
 								fontSize={0}
 								padding={3}

package/src/components/DeployTargetForm.tsx

@@ -1,12 +1,9 @@
 // Dialog form for creating and editing vercel_deploy documents
-import { useState, useCallback } from 'react'
+import { useId, useState, useCallback } from 'react'
 import { useClient } from 'sanity'
-import {
-	Dialog, Box, Flex, Text, TextInput, Button, Switch, Label, Card,
-} from '@sanity/ui'
-import { Stack } from '../ui'
 import { CheckmarkCircleIcon } from '../icons'
 import type { DeployTarget } from '../types'
+import { Box, Button, Card, Dialog, Flex, Label, Stack, Switch, Text, TextInput } from '../compat'
 
 const VERCEL_HOOK_RE = /^https:\/\/api\.vercel\.com\/v1\/integrations\/deploy\//
 
@@ -21,6 +18,16 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 	const client = useClient({ apiVersion: '2025-01-01' })
 	const isEdit = Boolean(initial)
 
+	// Ids for label/description association. useId keeps them unique inside a published
+	// plugin, where a hardcoded id can collide with anything the host Studio renders.
+	const nameId      = useId()
+	const urlId       = useId()
+	const urlErrorId  = useId()
+	const urlHelpId   = useId()
+	const teamId_     = useId()
+	const teamHelpId  = useId()
+	const disableId   = useId()
+
 	const [name, setName]                       = useState(initial?.name ?? '')
 	const [url, setUrl]                         = useState(initial?.url ?? '')
 	const [teamId, setTeamId]                   = useState(initial?.teamId ?? '')
@@ -79,10 +86,16 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 			<Box padding={4}>
 				<Stack space={4}>
 
-					{/* Name */}
+					{/* Name. Label carries `as="label"` — @sanity/ui's Label renders a div otherwise,
+					    so the input would have no accessible name. */}
 					<Stack space={2}>
-						<Label size={1}>Name <span style={{ color: 'var(--card-fg-color)' }}>*</span></Label>
+						<Label as="label" size={1} htmlFor={nameId}>
+							Name <span aria-hidden="true">*</span>
+						</Label>
 						<TextInput
+							id={nameId}
+							required
+							aria-required="true"
 							value={name}
 							onChange={e => setName((e.target as HTMLInputElement).value)}
 							placeholder="Production"
@@ -91,31 +104,44 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 
 					{/* Deploy hook URL */}
 					<Stack space={2}>
-						<Label size={1}>Deploy hook URL <span style={{ color: 'var(--card-fg-color)' }}>*</span></Label>
+						<Label as="label" size={1} htmlFor={urlId}>
+							Deploy hook URL <span aria-hidden="true">*</span>
+						</Label>
 						<TextInput
+							id={urlId}
+							required
+							aria-required="true"
+							aria-invalid={Boolean(url) && !urlValid}
+							aria-describedby={`${urlHelpId}${url && !urlValid ? ` ${urlErrorId}` : ''}`}
 							value={url}
 							onChange={e => setUrl((e.target as HTMLInputElement).value)}
 							placeholder="https://api.vercel.com/v1/integrations/deploy/…"
 						/>
 						{url && !urlValid && (
-							<Text size={1} style={{ color: 'var(--card-critical-fg-color, red)' }}>
-								Must be a Vercel deploy hook URL (api.vercel.com/v1/integrations/deploy/…)
-							</Text>
+							<Card tone="critical" padding={2} radius={2} role="alert">
+								<Text id={urlErrorId} size={1}>
+									Must be a Vercel deploy hook URL (api.vercel.com/v1/integrations/deploy/…)
+								</Text>
+							</Card>
 						)}
-						<Text size={0} muted>
+						<Text id={urlHelpId} size={0} muted>
 							Vercel dashboard → Project → Settings → Git → Deploy Hooks
 						</Text>
 					</Stack>
 
 					{/* Team ID */}
 					<Stack space={2}>
-						<Label size={1}>Team ID <span style={{ opacity: 0.5, fontWeight: 'normal' }}>— optional</span></Label>
+						<Label as="label" size={1} htmlFor={teamId_}>
+							Team ID <span style={{ opacity: 0.5, fontWeight: 'normal' }}>— optional</span>
+						</Label>
 						<TextInput
+							id={teamId_}
+							aria-describedby={teamHelpId}
 							value={teamId}
 							onChange={e => setTeamId((e.target as HTMLInputElement).value)}
 							placeholder="team_xxxxxxxx"
 						/>
-						<Text size={0} muted>
+						<Text id={teamHelpId} size={0} muted>
 							Required for team-owned Vercel projects. Find it at Vercel → Settings → General → Team ID (starts with <code>team_</code>).
 						</Text>
 					</Stack>
@@ -125,10 +151,10 @@ export function DeployTargetForm({ initial, onSaved, onClose }: DeployTargetForm
 						<Switch
 							checked={disableDelete}
 							onChange={e => setDisableDelete((e.target as HTMLInputElement).checked)}
-							id="disable-delete"
+							id={disableId}
 						/>
 						<Stack space={1}>
-							<Label as="label" size={1} htmlFor="disable-delete">Disable delete action</Label>
+							<Label as="label" size={1} htmlFor={disableId}>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

@@ -1,19 +1,19 @@
 // Main deploy tool — fetches targets + token, renders per-project cards
 import { useState, useEffect, useCallback } from 'react'
 import { useClient } from 'sanity'
-import {
-	Card, Box, Flex, Text, Heading, Spinner, Button, Dialog,
-} from '@sanity/ui'
-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'
 import { VERSION } from '../version'
 import type { DeployTarget } from '../types'
+import { Box, Button, Card, Dialog, Flex, Heading, Spinner, Stack, Text, ToastViewport, useToast } from '../compat'
 
 const TOKEN_QUERY   = `*[_id == "config.vercelDeploy"][0].accessToken`
-const TARGETS_QUERY = `*[_type == "vercel_deploy"] | order(_createdAt asc)`
+// `useClient` hands back a raw-perspective client, so drafts are returned alongside published
+// documents. `vercel_deploy` is a registered type and therefore editable from Structure, which
+// would otherwise render two cards for the same target.
+const TARGETS_QUERY = `*[_type == "vercel_deploy" && !(_id in path("drafts.**"))] | order(_createdAt asc)`
 
 export function DeployTool() {
 	const client = useClient({ apiVersion: '2025-01-01' })
@@ -49,7 +49,18 @@ export function DeployTool() {
 
 	// Inject responsive styles once on mount
 	useEffect(() => {
-		if (document.getElementById('dvfs-styles')) return
+		// Reference-counted: with two tools mounted, the one that skipped creation must not
+		// remove the stylesheet the other is still using.
+		const existing = document.getElementById('dvfs-styles')
+		if (existing) {
+			const n = Number(existing.dataset.refs ?? '1') + 1
+			existing.dataset.refs = String(n)
+			return () => {
+				const left = Number(existing.dataset.refs ?? '1') - 1
+				existing.dataset.refs = String(left)
+				if (left <= 0) existing.remove()
+			}
+		}
 		const style = document.createElement('style')
 		style.id = 'dvfs-styles'
 		style.textContent = `
@@ -70,7 +81,12 @@ export function DeployTool() {
 			}
 		`
 		document.head.appendChild(style)
-		return () => { document.getElementById('dvfs-styles')?.remove() }
+		style.dataset.refs = '1'
+		return () => {
+			const left = Number(style.dataset.refs ?? '1') - 1
+			style.dataset.refs = String(left)
+			if (left <= 0) style.remove()
+		}
 	}, [])
 
 	// Live subscription — update targets when documents change
@@ -90,7 +106,10 @@ export function DeployTool() {
 		if (!pendingDelete) return
 		setDeleting(true)
 		try {
+			// Remove the draft counterpart as well; deleting only the published id leaves the
+			// target behind and it reappears on the next load.
 			await client.delete(pendingDelete._id)
+			await client.delete(`drafts.${pendingDelete._id}`).catch(() => {})
 			setTargets(prev => prev.filter(t => t._id !== pendingDelete._id))
 			toast.push({ status: 'success', title: `Deleted "${pendingDelete.name}"` })
 		} catch (err) {
@@ -223,10 +242,13 @@ export function DeployTool() {
 			</Box>
 
 			{/* ── Token setup dialog ──────────────────────────────────────────── */}
+			{/* The token dialog is always dismissable. Withholding Cancel on first run —
+			    exactly when the user may not have a token to hand — made it a keyboard trap,
+			    since Sanity's Dialog holds focus and Escape was wired to the absent handler. */}
 			{showTokenSetup && (
 				<TokenSetup
 					onSaved={() => { setShowTokenSetup(false); load() }}
-					onCancel={token ? () => setShowTokenSetup(false) : undefined}
+					onCancel={() => setShowTokenSetup(false)}
 				/>
 			)}
 

package/src/components/StatusBadge.tsx

@@ -1,7 +1,7 @@
 // Status badge for a Vercel deployment state
-import { Badge, Spinner, Flex } from '@sanity/ui'
 import { stateLabel } from '../lib/helpers'
 import type { VercelDeployState } from '../types'
+import { Badge, Flex, Spinner } from '../compat'
 
 interface StatusBadgeProps {
 	state: VercelDeployState | undefined

package/src/components/TokenSetup.tsx

@@ -1,11 +1,8 @@
 // Vercel API token form — rendered inside a Dialog by DeployTool
-import { useState, useCallback } from 'react'
+import { useId, useState, useCallback } from 'react'
 import { useClient } from 'sanity'
-import {
-	Text, TextInput, Button, Card, Dialog, Flex,
-} from '@sanity/ui'
-import { Stack } from '../ui'
 import { CheckmarkCircleIcon } from '../icons'
+import { Button, Card, Dialog, Flex, Label, Stack, Text, TextInput } from '../compat'
 
 interface TokenSetupProps {
 	/** Called after the token is successfully saved */
@@ -17,6 +14,7 @@ interface TokenSetupProps {
 const TOKEN_DOC_ID = 'config.vercelDeploy'
 
 export function TokenSetup({ onSaved, onCancel }: TokenSetupProps) {
+	const tokenId = useId()
 	const client = useClient({ apiVersion: '2025-01-01' })
 	const [token, setToken] = useState('')
 	const [saving, setSaving] = useState(false)
@@ -78,8 +76,10 @@ export function TokenSetup({ onSaved, onCancel }: TokenSetupProps) {
 				</Stack>
 
 				<Stack space={2}>
-					<Text size={1} weight="semibold">Vercel API Token</Text>
+					{/* A plain Text is not a label — @sanity/ui's Label needs `as="label"` to render one. */}
+					<Label as="label" size={1} htmlFor={tokenId}>Vercel API Token</Label>
 					<TextInput
+						id={tokenId}
 						value={token}
 						onChange={e => setToken((e.target as HTMLInputElement).value)}
 						placeholder="xxxxxxxxxxxxxxxxxxxxxxxx"
@@ -88,7 +88,7 @@ export function TokenSetup({ onSaved, onCancel }: TokenSetupProps) {
 				</Stack>
 
 				{error && (
-					<Card tone="critical" padding={3} radius={2}>
+					<Card tone="critical" padding={3} radius={2} role="alert">
 						<Text size={1}>{error}</Text>
 					</Card>
 				)}

package/src/icons.tsx

@@ -1,7 +1,7 @@
-// Version-agnostic access to @sanity/icons — resolves named exports (icons v3/v4) or <Icon symbol> (icons v5+)
+// Version-agnostic access to @sanity/icons — named exports on v2/v3/v4, <Icon symbol> on v5+
 import { forwardRef } from 'react'
 import type { ComponentType, SVGProps } from 'react'
-import * as sanityIcons from '@sanity/icons'
+import { ICONS, resolveExport } from './compat/resolve'
 
 /** Props every Sanity icon accepts — it renders a plain sized SVG. */
 export type IconProps = SVGProps<SVGSVGElement>
@@ -9,48 +9,56 @@ 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. */
+/**
+ * Placeholder for when the installed @sanity/icons exposes neither shape. Holds
+ * layout, draws nothing, and is hidden from assistive tech since every icon in
+ * this plugin is decorative.
+ */
 const MissingIcon = forwardRef<SVGSVGElement, IconProps>(function MissingIcon(props, ref) {
-	return <svg {...GLYPH} xmlns="http://www.w3.org/2000/svg" {...props} ref={ref} />
+	return <svg {...GLYPH} xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" {...props} ref={ref} />
 })
 
-/** The v5+ `<Icon>` component, absent on icons v3 and v4. */
+/** The v5+ `<Icon>` component, absent on icons v2, v3 and v4. */
 type SymbolIcon = ComponentType<IconProps & { symbol: string }>
 
+/**
+ * The symbol map v5+ exposes alongside `Icon`. Used to check a symbol exists
+ * before relying on it: `<Icon>` renders `null` for an unrecognised symbol, so
+ * a renamed glyph would otherwise vanish silently rather than reaching
+ * {@link MissingIcon}.
+ */
+const SYMBOL_MAP = resolveExport<Record<string, unknown>>(ICONS, 'icons')
+
 /**
  * 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.
+ * 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.
+ *
+ * Note the named exports are not merely absent on v5 — they are declared `never`
+ * with a deprecation note pointing at per-icon subpaths, so a static named import
+ * is a type error as well as a runtime one. Subpaths only exist from v4.1.0,
+ * which is why this resolves at runtime instead.
  *
- * @param name   Named export used by icons v3 and v4, e.g. `RocketIcon`.
+ * @param name   Named export used by icons v2, 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
+	const named = resolveExport<IconComponent>(ICONS, name)
 	if (named) return named
 
-	const Icon = INSTALLED.Icon as SymbolIcon | undefined
+	const Icon = resolveExport<SymbolIcon>(ICONS, 'Icon')
 	if (!Icon) return MissingIcon
+	// An unknown symbol would render nothing at all; fall back to the sized placeholder instead.
+	if (SYMBOL_MAP && !(symbol in SYMBOL_MAP)) return MissingIcon
 
 	const Resolved = forwardRef<SVGSVGElement, IconProps>(function SanityIcon(props, ref) {
-		return <Icon symbol={symbol} {...props} ref={ref as never} />
+		return <Icon symbol={symbol} {...props} ref={ref} />
 	})
 	Resolved.displayName = name
-	return Resolved as IconComponent
+	return Resolved
 }
 
 export const AddIcon = resolveIcon('AddIcon', 'add')
@@ -65,7 +73,6 @@ 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,15 +1,20 @@
-// deploy-vercel-from-sanity — Sanity Studio v5 plugin for Vercel deployments
+// deploy-vercel-from-sanity — Sanity Studio plugin for Vercel deployments (Studio v3.30 through v6)
 import { definePlugin } from 'sanity'
 import { RocketIcon } from './icons'
 import { DeployTool } from './components/DeployTool'
 import { vercelDeploySchema } from './schema/vercelDeploy'
+import { vercelConfigSchema } from './schema/vercelConfig'
 import type { VercelDeployPluginConfig } from './types'
 
 export { vercelDeploySchema } from './schema/vercelDeploy'
+export { vercelConfigSchema } from './schema/vercelConfig'
 export type { VercelDeployPluginConfig, DeployTarget, VercelDeployment, VercelDeployState } from './types'
 
 /**
- * Sanity Studio v5 plugin — trigger and monitor Vercel deployments.
+ * Sanity Studio plugin — trigger and monitor Vercel deployments.
+ *
+ * Supports Studio v3.30 through v6 from a single build; see the compatibility
+ * table in the README for how @sanity/ui and @sanity/icons are resolved.
  *
  * @example
  * // sanity.config.ts
@@ -28,7 +33,7 @@ export const vercelDeploy = definePlugin<VercelDeployPluginConfig | void>(option
 	return {
 		name: 'deploy-vercel-from-sanity',
 		schema: {
-			types: [vercelDeploySchema],
+			types: [vercelDeploySchema, vercelConfigSchema],
 		},
 		tools: [
 			{