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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liiift-studio/deploy-vercel-from-sanity",
-  "version": "1.0.9",
-  "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'
@@ -17,6 +17,8 @@ import type { DeployTarget, VercelDeployment } from '../types'
 
 const POLL_INTERVAL_MS = 5_000
 const LABEL_WIDTH      = 64
+/** Max time (ms) to hold the optimistic pending state before giving up and deferring to real API status */
+const PENDING_TIMEOUT_MS = 60_000
 
 interface DeployItemProps {
 	target: DeployTarget
@@ -31,7 +33,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 
 	const [deployments, setDeployments]      = useState<VercelDeployment[]>([])
 	const [loadingInitial, setLoadingInitial] = useState(true)
-	const [triggering, setTriggering]        = useState(false)
+	const [pendingSince, setPendingSince]    = useState<number | null>(null)
 	const [canceling, setCanceling]          = useState(false)
 	const [deployError, setDeployError]      = useState<string | null>(null)
 	const [showHistory, setShowHistory]      = useState(false)
@@ -43,8 +45,13 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const [loadingLogs, setLoadingLogs]      = useState(false)
 	const [logError, setLogError]            = useState<string | null>(null)
 
-	const latest   = deployments[0]
-	const isActive = triggering || isActiveState(latest?.state)
+	/** 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)
+
+	const latest = deployments[0]
+	/** True between the click and the API returning a new deployment — drives the optimistic "Queued" state */
+	const isPending = pendingSince !== null
+	const isActive  = isPending || isActiveState(latest?.state)
 
 	// ── Fetch deployments ──────────────────────────────────────────────────────
 	const fetchDeployments = useCallback(async () => {
@@ -67,9 +74,20 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 		return () => clearInterval(id)
 	}, [isActive, fetchDeployments])
 
+	// Hand off from the optimistic state only once the API returns a deployment
+	// that is not the one which was already latest when Deploy was clicked.
+	useEffect(() => {
+		if (!isPending) return
+		if (latest?.uid && latest.uid !== triggeredFromUidRef.current) setPendingSince(null)
+	}, [isPending, latest?.uid])
+
+	// Safety net — never strand the card in the optimistic state if the new
+	// deployment never appears (hook accepted but nothing was queued).
 	useEffect(() => {
-		if (triggering && latest && latest.state !== undefined) setTriggering(false)
-	}, [triggering, latest])
+		if (!isPending) return
+		const id = setTimeout(() => setPendingSince(null), PENDING_TIMEOUT_MS)
+		return () => clearTimeout(id)
+	}, [isPending])
 
 	//── Deploy-complete toast ─────────────────────────────────────────────────
 	const prevStateRef = useRef<string | undefined>(undefined)
@@ -98,7 +116,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 	const timerRef = useRef<ReturnType<typeof setInterval> | null>(null)
 	useEffect(() => {
 		if (isActive) {
-			const start = latest?.created ?? Date.now()
+			// While optimistic, count from the click; once real, count from the deployment's own timestamp
+			const start = pendingSince ?? latest?.created ?? Date.now()
 			setElapsed(Math.floor((Date.now() - start) / 1000))
 			timerRef.current = setInterval(() => {
 				setElapsed(Math.floor((Date.now() - start) / 1000))
@@ -108,24 +127,27 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 			if (timerRef.current) clearInterval(timerRef.current)
 		}
 		return () => { if (timerRef.current) clearInterval(timerRef.current) }
-	}, [isActive, latest?.created])
+	}, [isActive, pendingSince, latest?.created])
 
 	// ── Actions ───────────────────────────────────────────────────────────────
 	const deploy = useCallback(() => {
+		// Paint the optimistic "Queued" state in the same frame as the click,
+		// before the hook request is even sent
 		flushSync(() => {
 			setDeployError(null)
-			setTriggering(true)
+			triggeredFromUidRef.current = latest?.uid
+			setPendingSince(Date.now())
 		})
 		void (async () => {
 			try {
 				await triggerDeploy(target.url)
 				setTimeout(fetchDeployments, 2000)
 			} catch (err) {
-				setTriggering(false)
+				setPendingSince(null)
 				setDeployError(err instanceof Error ? err.message : 'Deploy failed')
 			}
 		})()
-	}, [target.url, fetchDeployments])
+	}, [target.url, fetchDeployments, latest?.uid])
 
 	const cancel = useCallback(async () => {
 		if (!latest?.uid) return
@@ -218,8 +240,8 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 									)}
 									{token && !loadingInitial && (
 										<>
-											{triggering ? (
-												<Badge tone="caution" padding={2}>Triggering…</Badge>
+											{isPending ? (
+												<StatusBadge state="QUEUED" />
 											) : (
 												<StatusBadge state={latest?.state} />
 											)}
@@ -234,63 +256,36 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 													style={{ cursor: 'pointer' }}
 												/>
 											)}
-											{isActive && elapsed > 0 ? (
+											{isPending ? (
+												/* Optimistic — dimmed spinner only; no elapsed time until a real build exists */
+												<Spinner muted style={{ marginLeft: 4, opacity: 0.5 }} />
+											) : isActive ? (
 												<Flex align="center" gap={1}>
 													<Spinner muted style={{ marginLeft: 4 }} />
 													<Text size={1} muted>{formatDuration(elapsed)}</Text>
 												</Flex>
-											) : (!isActive && deployedAt) ? (
+											) : deployedAt ? (
 												<Text size={1} muted>{deployedAt}</Text>
 											) : null}
 										</>
 									)}
 								</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>
 
@@ -329,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}
@@ -367,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}
@@ -438,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>
 																	))}
@@ -562,6 +543,7 @@ export function DeployItem({ target, token, onDelete, onEdit }: DeployItemProps)
 						<Button
 							text="Deploy"
 							tone="primary"
+							loading={isPending}
 							disabled={isActive}
 							onClick={deploy}
 							style={{

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',