@sanity/workflow-studio-plugin 0.33.0 → 0.35.0

package/CHANGELOG.md

@@ -1,5 +1,36 @@
 # @sanity/workflow-studio-plugin
 
+## 0.35.0
+
+### Patch Changes
+
+- Updated dependencies [7e24e4a]
+- Updated dependencies [7e24e4a]
+- Updated dependencies [7e24e4a]
+- Updated dependencies [ab8754a]
+  - @sanity/workflow-react@0.35.0
+  - @sanity/workflow-studio@0.35.0
+  - @sanity/workflow-engine@0.35.0
+  - @sanity/workflow-components@0.35.0
+  - @sanity/workflow-diagram@0.35.0
+
+## 0.34.0
+
+### Minor Changes
+
+- 30a515c: **BREAKING:** Workflows Studio packages now target the Sanity UI 4 API. The Studio plugin, shared components, and diagram package each install `@sanity/ui ^4.2.1` for the UI they render; React, styled-components, and Studio remain peer contracts. This does not prevent Studio from hosting unrelated Sanity UI 3 plugins. Upgrade Sanity Studio to 6.15 or later and upgrade every `@sanity/workflow-*` package in the installation to the same release, then reinstall dependencies and commit the updated lockfile. Partial Workflows upgrades can pair packages built for different Sanity UI APIs and fail the Studio build.
+
+  Docs impact: Update the Studio plugin installation prerequisites and release guidance to require Sanity Studio 6.15 or later and a lockstep Workflows package upgrade.
+
+### Patch Changes
+
+- Updated dependencies [30a515c]
+  - @sanity/workflow-components@0.34.0
+  - @sanity/workflow-diagram@0.34.0
+  - @sanity/workflow-studio@0.34.0
+  - @sanity/workflow-engine@0.34.0
+  - @sanity/workflow-react@0.34.0
+
 ## 0.33.0
 
 ### Minor Changes

package/README.md

@@ -41,8 +41,9 @@ treat plugin-side checks as a security boundary.
 ## 1. Install
 
 Use one matching version for every `@sanity/workflow-*` package in the
-command below. The plugin also requires `sanity ^6`, `react ^19`,
-`styled-components ^6`, and `@sanity/sdk ^3.1`.
+command below. The plugin also requires `sanity ^6.15`, which provides
+`@sanity/ui ^4.2.1`, plus `react ^19`, `styled-components ^6`, and
+`@sanity/sdk ^3.1`.
 
 Before installing, select Mutate 0.18.2 for SDK 3 in your application's root
 configuration. For npm, set `overrides["@sanity/sdk"]["@sanity/mutate"]` to

package/dist/_chunks-cjs/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), structure = require("sanity/structure"), workflowEngine = require("@sanity/workflow-engine"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), workflowComponents = require("@sanity/workflow-components"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), csm = require("@sanity/client/csm"), telemetry = require("@sanity/telemetry"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), User = require("@sanity/icons/User"), Search = require("@sanity/icons/Search"), Edit = require("@sanity/icons/Edit"), content = require("@sanity/util/content"), InfoOutline = require("@sanity/icons/InfoOutline"), Document = require("@sanity/icons/Document"), WarningOutline = require("@sanity/icons/WarningOutline"), router = require("sanity/router"), types = require("@sanity/types"), observer = require("@sanity/workflow-react/observer"), Launch = require("@sanity/icons/Launch"), ErrorOutline = require("@sanity/icons/ErrorOutline"), AddUser = require("@sanity/icons/AddUser"), Add = require("@sanity/icons/Add"), Ulist = require("@sanity/icons/Ulist"), CheckmarkCircle = require("@sanity/icons/CheckmarkCircle"), Bolt = require("@sanity/icons/Bolt"), ChevronDown = require("@sanity/icons/ChevronDown"), pluralize = require("pluralize-esm"), ChevronRight = require("@sanity/icons/ChevronRight"), styledComponents = require("styled-components"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), ArrowUp = require("@sanity/icons/ArrowUp"), rxjs = require("rxjs"), operators = require("rxjs/operators"), Transfer = require("@sanity/icons/Transfer"), Users = require("@sanity/icons/Users"), reactVirtual = require("@tanstack/react-virtual");
+var jsxRuntime = require("react/jsx-runtime"), Timeline = require("@sanity/icons/Timeline"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), structure = require("sanity/structure"), workflowEngine = require("@sanity/workflow-engine"), Checkmark = require("@sanity/icons/Checkmark"), Close = require("@sanity/icons/Close"), workflowComponents = require("@sanity/workflow-components"), formatDistanceToNow = require("date-fns/formatDistanceToNow"), csm = require("@sanity/client/csm"), telemetry = require("@sanity/telemetry"), workflowStudio = require("@sanity/workflow-studio"), sanity = require("sanity"), Calendar = require("@sanity/icons/Calendar"), popover = require("@sanity/ui/popover"), User = require("@sanity/icons/User"), Search = require("@sanity/icons/Search"), autocomplete = require("@sanity/ui/autocomplete"), toast = require("@sanity/ui/toast"), Edit = require("@sanity/icons/Edit"), content = require("@sanity/util/content"), InfoOutline = require("@sanity/icons/InfoOutline"), code = require("@sanity/ui/code"), Document = require("@sanity/icons/Document"), WarningOutline = require("@sanity/icons/WarningOutline"), router = require("sanity/router"), types = require("@sanity/types"), observer = require("@sanity/workflow-react/observer"), Launch = require("@sanity/icons/Launch"), ErrorOutline = require("@sanity/icons/ErrorOutline"), AddUser = require("@sanity/icons/AddUser"), Add = require("@sanity/icons/Add"), Ulist = require("@sanity/icons/Ulist"), CheckmarkCircle = require("@sanity/icons/CheckmarkCircle"), Bolt = require("@sanity/icons/Bolt"), ChevronDown = require("@sanity/icons/ChevronDown"), menu = require("@sanity/ui/menu"), pluralize = require("pluralize-esm"), ChevronRight = require("@sanity/icons/ChevronRight"), styledComponents = require("styled-components"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Clock = require("@sanity/icons/Clock"), Cog = require("@sanity/icons/Cog"), ArrowUp = require("@sanity/icons/ArrowUp"), rxjs = require("rxjs"), operators = require("rxjs/operators"), Transfer = require("@sanity/icons/Transfer"), Users = require("@sanity/icons/Users"), reactVirtual = require("@tanstack/react-virtual");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -1571,7 +1571,7 @@ function DismissablePopover({children: children, content: content2, onDismiss: o
     const triggerRef = react.useRef(null), [popoverElement, setPopoverElement] = react.useState(null);
     return ui.useClickOutsideEvent(() => {
         open && onDismiss();
-    }, () => [ triggerRef.current, popoverElement ]), /* @__PURE__ */ jsxRuntime.jsx(ui.Popover, {
+    }, () => [ triggerRef.current, popoverElement ]), /* @__PURE__ */ jsxRuntime.jsx(popover.Popover, {
         content: /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
             onKeyDown: event => {
                 event.key === "Escape" && onDismiss();
@@ -1866,7 +1866,7 @@ function DocPicker({value: value, onChange: onChange, types: types2, readOnly: r
     }) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
         gap: 2,
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, {
+        /* @__PURE__ */ jsxRuntime.jsx(autocomplete.Autocomplete, {
             filterOption: () => !0,
             fontSize: 1,
             icon: Search.SearchIcon,
@@ -2079,18 +2079,18 @@ function withConvention(params) {
 }
 
 function useWorkflowToast() {
-    const toast = ui.useToast();
+    const toast$1 = toast.useToast();
     return react.useMemo(() => ({
         push: params => {
-            toast.push(withConvention(params));
+            toast$1.push(withConvention(params));
         },
         dismiss: id => {
-            toast.push({
+            toast$1.push({
                 id: id,
                 duration: DISMISS_SENTINEL_DURATION
             });
         }
-    }), [ toast ]);
+    }), [ toast$1 ]);
 }
 
 const COMMITTED_INCOMPLETE_TITLE = "Saved, but its follow-up didn’t run";
@@ -2115,15 +2115,15 @@ function rejectionToast(reading, titles) {
 }
 
 function useRejectionReport() {
-    const toast = useWorkflowToast();
+    const toast2 = useWorkflowToast();
     return react.useMemo(() => ({
         rejected: args => {
             const reading = readRejection(args.err);
             reading.kind !== "refusal" && console.error(`[workflow-studio-plugin] ${args.context} rejected:`, args.err), 
-            toast.push(rejectionToast(reading, args));
+            toast2.push(rejectionToast(reading, args));
         },
-        dismiss: toast.dismiss
-    }), [ toast ]);
+        dismiss: toast2.dismiss
+    }), [ toast2 ]);
 }
 
 const ActionClusterContext = react.createContext(void 0), ActionClusterProvider = ActionClusterContext.Provider;
@@ -3181,7 +3181,7 @@ const fieldValueRenderer = {
         label: field.title ?? field.name,
         value: field.value
     }),
-    object: field => field.value === null ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.Code, {
+    object: field => field.value === null ? /* @__PURE__ */ jsxRuntime.jsx(Empty, {}) : /* @__PURE__ */ jsxRuntime.jsx(code.Code, {
         size: 1,
         style: {
             overflowWrap: "anywhere",
@@ -3267,7 +3267,7 @@ function ArrayRow({row: row}) {
         /* @__PURE__ */ jsxRuntime.jsx(NoteMeta, {
             row: row
         }) ]
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Code, {
+    }) : /* @__PURE__ */ jsxRuntime.jsx(code.Code, {
         size: 1,
         style: {
             overflowWrap: "anywhere",
@@ -3963,19 +3963,19 @@ function Hairline({weight: weight, style: style}) {
 }
 
 function useDrainEffects(instanceId) {
-    const {drainEffectsFor: drainEffectsFor} = useWorkflowContext(), toast = useWorkflowToast(), [busy, setBusy] = react.useState(!1);
+    const {drainEffectsFor: drainEffectsFor} = useWorkflowContext(), toast2 = useWorkflowToast(), [busy, setBusy] = react.useState(!1);
     return {
         busy: busy,
         run: async () => {
             setBusy(!0);
             try {
-                await drainEffectsFor(instanceId), toast.push({
+                await drainEffectsFor(instanceId), toast2.push({
                     id: TOAST_ID.effectsDrain,
                     status: "info",
                     title: "Ran the registered handlers"
                 });
             } catch (err) {
-                toast.push({
+                toast2.push({
                     id: TOAST_ID.effectsDrain,
                     status: "error",
                     title: "Failed to run pending effects",
@@ -5158,8 +5158,8 @@ function AutomationActionRow({actionEval: actionEval, definition: definition}) {
 function inlineActionCount(args) {
     const {available: available, actionWidths: actionWidths, menuWidth: menuWidth, gap: gap} = args, max = Math.min(3, actionWidths.length);
     for (let count = max; count > 0; count--) {
-        const buttons = actionWidths.slice(0, count).reduce((sum, w) => sum + w, 0) + gap * (count - 1), menu = count === actionWidths.length ? 0 : menuWidth + gap;
-        if (buttons + menu <= available) return count;
+        const buttons = actionWidths.slice(0, count).reduce((sum, w) => sum + w, 0) + gap * (count - 1), menu2 = count === actionWidths.length ? 0 : menuWidth + gap;
+        if (buttons + menu2 <= available) return count;
     }
     return 0;
 }
@@ -5186,12 +5186,12 @@ function ActionMenuItem({actionEval: actionEval, instanceId: instanceId, activit
         placement: placement,
         viaMenu: !0
     });
-    return rowKind.kind === "disabled" ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+    return rowKind.kind === "disabled" ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
         disabled: !0,
         ...iconProp,
         text: label,
         tone: tone
-    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+    }) : rowKind.kind === "plain" ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
         disabled: pending,
         ...iconProp,
         onClick: () => {
@@ -5199,7 +5199,7 @@ function ActionMenuItem({actionEval: actionEval, instanceId: instanceId, activit
         },
         text: label,
         tone: tone
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+    }) : /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
         disabled: pending,
         ...iconProp,
         onClick: onCollectParams,
@@ -5221,7 +5221,7 @@ function rowShield(menuButton) {
 }
 
 function ActionsMenuButton({actions: actions, instanceId: instanceId, activity: activity, label: label, surface: surface, placement: placement, mode: mode = "ghost", inButtonCard: inButtonCard = !1}) {
-    const [paramsAction, setParamsAction] = react.useState(void 0), clusterPending = useActionClusterPending(), menuId = react.useId(), menuButton = /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+    const [paramsAction, setParamsAction] = react.useState(void 0), clusterPending = useActionClusterPending(), menuId = react.useId(), menuButton = /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             ...ACTIONS_MENU_TRIGGER,
             mode: mode,
@@ -5234,7 +5234,7 @@ function ActionsMenuButton({actions: actions, instanceId: instanceId, activity:
             } : {}
         }),
         id: `workflow-actions-menu-${menuId}`,
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
             children: actions.map(a => /* @__PURE__ */ jsxRuntime.jsx(ActionMenuItem, {
                 actionEval: a,
                 activity: activity,
@@ -6840,7 +6840,7 @@ function BooleanPill({entry: entry, pill: pill, editability: editability, surfac
     /* @__PURE__ */
     return jsxRuntime.jsx(PillHint, {
         pill: pill,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
             button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
                 ...chrome,
                 children: /* @__PURE__ */ jsxRuntime.jsx(PillFaceContent, {
@@ -6850,9 +6850,9 @@ function BooleanPill({entry: entry, pill: pill, editability: editability, surfac
                 })
             }),
             id: `boolean-pill-${menuId}`,
-            menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+            menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
                 children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     ...current === !0 ? {
                         iconRight: Checkmark.CheckmarkIcon
                     } : {},
@@ -6861,7 +6861,7 @@ function BooleanPill({entry: entry, pill: pill, editability: editability, surfac
                     },
                     text: formatBoolean(!0)
                 }), 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     ...current === !1 ? {
                         iconRight: Checkmark.CheckmarkIcon
                     } : {},
@@ -7256,7 +7256,7 @@ function abortUnconfirmedToast(args) {
 }
 
 function AbortWorkflowDialog({entry: entry, onClose: onClose}) {
-    const {engine: engine} = useWorkflowContext(), definition = useDefinition(entry), toast = useWorkflowToast(), telemetry2 = workflowReact.useWorkflowTelemetry(), [typedReason, setTypedReason] = react.useState(""), [pending, setPending] = react.useState(!1), {instance: instance} = entry, title = instanceTitle(instance, definition), reason = normalizeAbortReason(typedReason), reasonInputId = `abort-workflow-reason-${instance._id}`;
+    const {engine: engine} = useWorkflowContext(), definition = useDefinition(entry), toast2 = useWorkflowToast(), telemetry2 = workflowReact.useWorkflowTelemetry(), [typedReason, setTypedReason] = react.useState(""), [pending, setPending] = react.useState(!1), {instance: instance} = entry, title = instanceTitle(instance, definition), reason = normalizeAbortReason(typedReason), reasonInputId = `abort-workflow-reason-${instance._id}`;
     useLogEventOnMount(WorkflowAbortDialogOpened, {
         instanceId: instance._id
     });
@@ -7275,9 +7275,9 @@ function AbortWorkflowDialog({entry: entry, onClose: onClose}) {
                 title: title,
                 changed: changed
             });
-            toast.push(report.toast), log(report.outcome), onClose();
+            toast2.push(report.toast), log(report.outcome), onClose();
         } catch (err) {
-            toast.push(abortUnconfirmedToast({
+            toast2.push(abortUnconfirmedToast({
                 title: title,
                 err: err
             })), log("unconfirmed"), setPending(!1);
@@ -7436,7 +7436,7 @@ function CodeChip({value: value}) {
 }
 
 function HintedMenuButton({hint: hint, ...menuButtonProps}) {
-    const [open, setOpen] = react.useState(!1), popover = {
+    const [open, setOpen] = react.useState(!1), popover2 = {
         tone: "default",
         ...menuButtonProps.popover?.placement === void 0 ? {
             placement: "bottom-end",
@@ -7444,17 +7444,17 @@ function HintedMenuButton({hint: hint, ...menuButtonProps}) {
         } : {},
         ...menuButtonProps.popover
     };
-    return hint === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+    return hint === void 0 ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
         ...menuButtonProps,
-        popover: popover
+        popover: popover2
     }) : /* @__PURE__ */ jsxRuntime.jsx(workflowComponents._HoverHint, {
         disabled: open,
         text: hint,
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
             ...menuButtonProps,
             onClose: () => setOpen(!1),
             onOpen: () => setOpen(!0),
-            popover: popover
+            popover: popover2
         })
     });
 }
@@ -7489,7 +7489,7 @@ function historyWindow(args) {
 }
 
 function PendingEffectRows({instance: instance, now: now}) {
-    const {completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = useWorkflowContext(), toast = useWorkflowToast(), drain = useDrainEffects(instance._id), [resolving, setResolving] = react.useState(!1), pending = instance.pendingEffects ?? [];
+    const {completeEffectFor: completeEffectFor, effectHandlers: effectHandlers} = useWorkflowContext(), toast2 = useWorkflowToast(), drain = useDrainEffects(instance._id), [resolving, setResolving] = react.useState(!1), pending = instance.pendingEffects ?? [];
     if (pending.length === 0) return null;
     const resolve = async (effectKey, status) => {
         setResolving(!0);
@@ -7498,13 +7498,13 @@ function PendingEffectRows({instance: instance, now: now}) {
                 effectKey: effectKey,
                 status: status,
                 detail: "Resolved in Studio"
-            }), toast.push({
+            }), toast2.push({
                 id: TOAST_ID.effectResolve,
                 status: "info",
                 title: `Effect marked as ${status}`
             });
         } catch (err) {
-            toast.push({
+            toast2.push({
                 id: TOAST_ID.effectResolve,
                 status: "error",
                 title: "Failed to resolve the effect",
@@ -7583,16 +7583,16 @@ function PendingEffectRow({busy: busy, effect: effect, instanceId: instanceId, n
                 }),
                 hint: "Resolve",
                 id: `pending-effect-menu-${instanceId}-${effect._key}`,
-                menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
-                    children: [ registered ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
+                    children: [ registered ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                         onClick: onRunHandlers,
                         text: "Run registered handlers"
                     }) : null, 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                    /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                         onClick: () => onResolve("done"),
                         text: "Mark done"
                     }), 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                    /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                         onClick: () => onResolve("failed"),
                         text: "Mark failed",
                         tone: "critical"
@@ -7760,7 +7760,7 @@ function InstanceCardMenu({entry: entry, title: title}) {
     /* @__PURE__ */
     return jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [ 
-        /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
             button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
                 "aria-label": `More options for ${title}`,
                 fontSize: 1,
@@ -7769,15 +7769,15 @@ function InstanceCardMenu({entry: entry, title: title}) {
                 padding: 2
             }),
             id: `workflow-instance-menu-${menuId}`,
-            menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+            menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
                 children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     onClick: () => setDialog("history"),
                     text: "Workflow history"
                 }), isLiveEntry(entry) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
-                    /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                    /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
+                    /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                         onClick: () => setDialog("abort"),
                         text: "Cancel workflow…",
                         tone: "critical"
@@ -8405,17 +8405,17 @@ function NoteBanner({action: action, label: label, tone: tone = "caution"}) {
 }
 
 function CopyDetailsButton({unreadable: unreadable}) {
-    const toast = useWorkflowToast();
+    const toast2 = useWorkflowToast();
     /* @__PURE__ */
     return jsxRuntime.jsx(ui.Button, {
         fontSize: 1,
         mode: "ghost",
         onClick: () => {
-            navigator.clipboard.writeText(unreadableDocsReport(unreadable)).then(() => toast.push({
+            navigator.clipboard.writeText(unreadableDocsReport(unreadable)).then(() => toast2.push({
                 id: TOAST_ID.detailsCopy,
                 status: "info",
                 title: "Details copied to clipboard"
-            }), () => toast.push({
+            }), () => toast2.push({
                 id: TOAST_ID.detailsCopy,
                 status: "error",
                 title: "Failed to copy the details"
@@ -8455,7 +8455,7 @@ function InvalidDocNotice({invalid: invalid}) {
         radius: 2,
         tone: "caution",
         children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-            space: 3,
+            gap: 3,
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                 size: 1,
@@ -9072,7 +9072,7 @@ function showRowOnError(key, mapping) {
 }
 
 function useStartWorkflow(args) {
-    const {mapping: mapping, docId: docId, initialValue: initialValue, source: source} = args, toast = useWorkflowToast(), schema = sanity.useSchema(), {engine: engine, openStartDialog: openStartDialog, mappingIssues: mappingIssues2, mappingStarts: mappingStarts} = useWorkflowContext(), observer2 = workflowStudio.useStudioObserver({
+    const {mapping: mapping, docId: docId, initialValue: initialValue, source: source} = args, toast2 = useWorkflowToast(), schema = sanity.useSchema(), {engine: engine, openStartDialog: openStartDialog, mappingIssues: mappingIssues2, mappingStarts: mappingStarts} = useWorkflowContext(), observer2 = workflowStudio.useStudioObserver({
         engine: engine
     }), [starting, setStarting] = react.useState(!1), {selectedReleaseId: selectedReleaseId} = sanity.usePerspective(), releaseActive = sanity.useIsReleaseActive(), startBlock = mappingStarts.get(mappingKey(mapping)), hidden = workflowEngine.startKindOf({
         start: startBlock
@@ -9115,7 +9115,7 @@ function useStartWorkflow(args) {
                         initialValue: initialValue,
                         selectedReleaseId: selectedReleaseId,
                         ensureDocumentExists: observer2.ensureDocumentExists,
-                        onPersistFailure: err => toast.push({
+                        onPersistFailure: err => toast2.push({
                             id: TOAST_ID.documentSave,
                             status: "error",
                             title: "Failed to save the document",
@@ -9207,7 +9207,7 @@ function StartWorkflowControl({mappings: mappings, docId: docId, initialValue: i
             hint: menuLabel
         } : {},
         id: `start-workflow-menu-${menuId}`,
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
             children: startable.map(mapping => /* @__PURE__ */ jsxRuntime.jsx(StartWorkflowMenuItem, {
                 docId: docId,
                 initialValue: initialValue,
@@ -9229,7 +9229,7 @@ function StartWorkflowMenuItem({mapping: mapping, docId: docId, initialValue: in
         docId: docId,
         initialValue: initialValue,
         source: source
-    }), item = /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+    }), item = /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
         disabled: blocked || starting || !docId,
         onClick: () => {
             start();
@@ -10513,7 +10513,7 @@ function ReleasePicker({value: value, onChange: onChange}) {
                 releaseName: value.releaseName
             })
         })
-    }) : /* @__PURE__ */ jsxRuntime.jsx(ui.Autocomplete, {
+    }) : /* @__PURE__ */ jsxRuntime.jsx(autocomplete.Autocomplete, {
         filterOption: (query, option) => labelOf(option.value).toLowerCase().includes(query.toLowerCase()),
         fontSize: 1,
         icon: Search.SearchIcon,
@@ -10574,7 +10574,7 @@ function useLatestDefinition(definitionName) {
 function useCreateDoc(args) {
     const {releaseId: releaseId, onCreated: onCreated} = args, {engine: engine, binding: binding} = useWorkflowContext(), observer2 = workflowStudio.useStudioObserver({
         engine: engine
-    }), schema = sanity.useSchema(), templates = sanity.useTemplates(), resolverContext = sanity.useInitialValueResolverContext(), toast = useWorkflowToast(), [creating, setCreating] = react.useState(!1);
+    }), schema = sanity.useSchema(), templates = sanity.useTemplates(), resolverContext = sanity.useInitialValueResolverContext(), toast2 = useWorkflowToast(), [creating, setCreating] = react.useState(!1);
     return {
         creating: creating,
         createDoc: async type => {
@@ -10598,7 +10598,7 @@ function useCreateDoc(args) {
                     type: type
                 }));
             } catch (err) {
-                toast.push({
+                toast2.push({
                     id: TOAST_ID.documentCreate,
                     status: "error",
                     title: "Failed to create the document",
@@ -10646,7 +10646,7 @@ function CreateDocMenu({entryName: entryName, options: options, releaseId: relea
         onCreated: onCreated
     });
     return options.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(ui.MenuButton, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(menu.MenuButton, {
             button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
                 disabled: creating,
                 fontSize: 1,
@@ -10656,8 +10656,8 @@ function CreateDocMenu({entryName: entryName, options: options, releaseId: relea
                 text: creating ? "Creating…" : "Create new document…"
             }),
             id: `create-doc-${entryName}`,
-            menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-                children: options.map(type => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
+                children: options.map(type => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     onClick: () => {
                         createDoc(type);
                     },
@@ -10852,7 +10852,6 @@ function SelectedReleaseRow({mapping: mapping, selectedReleaseId: selectedReleas
             children: "Release:"
         }), 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, {
-            mode: "outline",
             style: badgeTrim,
             tone: "primary",
             children: selectedReleaseId
@@ -10928,13 +10927,13 @@ function ResumeNote({onStartNew: onStartNew}) {
 }
 
 function handleStartError(args) {
-    const {label: label, toast: toast, seedInstance: seedInstance, onClose: onClose} = args, outcome = classifyStartError(args.err);
-    toast.push(startOutcomeToast(outcome, label)), startProducedRun(outcome) && (outcome.instance !== void 0 && seedInstance(outcome.instance), 
+    const {label: label, toast: toast2, seedInstance: seedInstance, onClose: onClose} = args, outcome = classifyStartError(args.err);
+    toast2.push(startOutcomeToast(outcome, label)), startProducedRun(outcome) && (outcome.instance !== void 0 && seedInstance(outcome.instance), 
     onClose());
 }
 
 function StartWorkflowForm({request: request, onClose: onClose}) {
-    const {definition: definitionName, label: label, mapping: mapping, subjectDocId: subjectDocId} = request, {engine: engine, binding: binding, seedInstance: seedInstance} = useWorkflowContext(), telemetry2 = workflowReact.useWorkflowTelemetry(), toast = useWorkflowToast(), {def: definition, error: definitionError} = useLatestDefinition(definitionName), {selectedReleaseId: selectedReleaseId} = sanity.usePerspective(), releaseId = boundReleaseId(mapping, selectedReleaseId), [values, setValues] = react.useState({}), [attempt, setAttempt] = react.useState(void 0), starting = attempt !== void 0, [heldInstanceId, setHeldInstanceId] = react.useState(void 0), [startNew, setStartNew] = react.useState(!1), {entries: entries} = useWorkflowsForDocument(subjectDocId), resumeEntry = presentedResumeEntry({
+    const {definition: definitionName, label: label, mapping: mapping, subjectDocId: subjectDocId} = request, {engine: engine, binding: binding, seedInstance: seedInstance} = useWorkflowContext(), telemetry2 = workflowReact.useWorkflowTelemetry(), toast2 = useWorkflowToast(), {def: definition, error: definitionError} = useLatestDefinition(definitionName), {selectedReleaseId: selectedReleaseId} = sanity.usePerspective(), releaseId = boundReleaseId(mapping, selectedReleaseId), [values, setValues] = react.useState({}), [attempt, setAttempt] = react.useState(void 0), starting = attempt !== void 0, [heldInstanceId, setHeldInstanceId] = react.useState(void 0), [startNew, setStartNew] = react.useState(!1), {entries: entries} = useWorkflowsForDocument(subjectDocId), resumeEntry = presentedResumeEntry({
         entries: entries,
         definitionName: definitionName,
         heldInstanceId: heldInstanceId,
@@ -10973,7 +10972,7 @@ function StartWorkflowForm({request: request, onClose: onClose}) {
                 initFields: initFields,
                 values: values
             }));
-            toast.push({
+            toast2.push({
                 id: TOAST_ID.start,
                 status: "info",
                 title: `“${definition?.title ?? label}” started`,
@@ -10983,7 +10982,7 @@ function StartWorkflowForm({request: request, onClose: onClose}) {
             handleStartError({
                 err: err,
                 label: definition?.title ?? label,
-                toast: toast,
+                toast: toast2,
                 seedInstance: seedInstance,
                 onClose: onClose
             });

package/dist/_chunks-cjs/workflows-tool-root.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var jsxRuntime = require("react/jsx-runtime"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Launch = require("@sanity/icons/Launch"), ui = require("@sanity/ui"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), workflowComponents = require("@sanity/workflow-components"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Close = require("@sanity/icons/Close"), Expand = require("@sanity/icons/Expand"), react$1 = require("motion/react"), reactVirtual = require("@tanstack/react-virtual"), reactDom = require("react-dom"), styledComponents = require("styled-components"), types = require("@sanity/types"), User = require("@sanity/icons/User"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Search = require("@sanity/icons/Search"), workflowDiagram = require("@sanity/workflow-diagram");
+var jsxRuntime = require("react/jsx-runtime"), ChevronDown = require("@sanity/icons/ChevronDown"), ChevronRight = require("@sanity/icons/ChevronRight"), EllipsisHorizontal = require("@sanity/icons/EllipsisHorizontal"), Launch = require("@sanity/icons/Launch"), ui = require("@sanity/ui"), menu = require("@sanity/ui/menu"), workflowReact = require("@sanity/workflow-react"), react = require("react"), router = require("sanity/router"), index = require("./index.cjs"), Transfer = require("@sanity/icons/Transfer"), WarningOutline = require("@sanity/icons/WarningOutline"), workflowComponents = require("@sanity/workflow-components"), sanity = require("sanity"), workflowEngine = require("@sanity/workflow-engine"), workflowStudio = require("@sanity/workflow-studio"), pluralize = require("pluralize-esm"), ChevronLeft = require("@sanity/icons/ChevronLeft"), Close = require("@sanity/icons/Close"), Expand = require("@sanity/icons/Expand"), react$1 = require("motion/react"), reactVirtual = require("@tanstack/react-virtual"), reactDom = require("react-dom"), styledComponents = require("styled-components"), types = require("@sanity/types"), User = require("@sanity/icons/User"), popover = require("@sanity/ui/popover"), Add = require("@sanity/icons/Add"), Checkmark = require("@sanity/icons/Checkmark"), Search = require("@sanity/icons/Search"), workflowDiagram = require("@sanity/workflow-diagram");
 
 function _interopDefaultCompat(e) {
     return e && typeof e == "object" && "default" in e ? e : {
@@ -708,7 +708,7 @@ function DefinitionRow({countKnown: countKnown, now: now, onOpen: onOpen, row: r
                 paddingRight: titleGap
             },
             children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Stack, {
-                space: 3,
+                gap: 3,
                 children: [ 
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
                     size: 1,
@@ -3600,7 +3600,7 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
         value: value
     })), applied = facet => appliedFacetValues(view.filters, facet), myId = index.useCurrentUserId();
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             fontSize: 1,
             gap: 2,
@@ -3610,9 +3610,9 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
             text: "Add filter"
         }),
         id: "runs-filter-menu",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Assignee",
@@ -3630,11 +3630,11 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                         unassignedCount: index.unassignedRunCount(scoped)
                     })
                 })
-            }), definition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            }), definition === void 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Stage",
-                children: options.stage.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                children: options.stage.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     fontSize: 1,
                     onClick: () => add("stage", option.key),
                     children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -3645,11 +3645,11 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                     })
                 }, option.key))
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Needs attention",
-                children: options.attention.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+                children: options.attention.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                     fontSize: 1,
                     onClick: () => add("attention", option.key),
                     children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -3660,8 +3660,8 @@ function RunsFilterMenu({definition: definition, onView: onView, scoped: scoped,
                     })
                 }, option.key))
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuGroup, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuGroup, {
                 fontSize: 1,
                 popover: SUBMENU_POPOVER,
                 text: "Release",
@@ -3771,7 +3771,7 @@ function QueryableValues({mediaOf: mediaOf, onPick: onPick, onToggle: onToggle,
                 children: [ shownSpecials.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                     children: [ shownSpecials.map(row => /* @__PURE__ */ jsxRuntime.jsx(SpecialValueItem, {
                         special: row
-                    }, row.label)), trimmed === "" && hitSections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}) : null ]
+                    }, row.label)), trimmed === "" && hitSections.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}) : null ]
                 }), hitSections.length === 0 && shownSpecials.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                     padding: 3,
                     children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, {
@@ -3781,7 +3781,7 @@ function QueryableValues({mediaOf: mediaOf, onPick: onPick, onToggle: onToggle,
                     })
                 }) : null, grouped.map((rows, index2) => 
                 /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, {
-                    children: [ index2 > 0 ? /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}) : null, rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(ValueItem, {
+                    children: [ index2 > 0 ? /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}) : null, rows.map(row => /* @__PURE__ */ jsxRuntime.jsx(ValueItem, {
                         media: mediaOf?.(row),
                         onPick: () => onPick(row),
                         onToggle: onToggle === void 0 ? void 0 : () => onToggle(row),
@@ -3804,7 +3804,7 @@ function mannerProps(args) {
 
 function SpecialValueItem({special: special}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuItem, {
+    return jsxRuntime.jsx(menu.MenuItem, {
         fontSize: 1,
         onClick: special.onPick,
         children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -3823,7 +3823,7 @@ function SpecialValueItem({special: special}) {
 
 function ValueItem({media: media, onPick: onPick, onToggle: onToggle, row: row}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuItem, {
+    return jsxRuntime.jsx(menu.MenuItem, {
         fontSize: 1,
         onClick: onPick,
         children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -3898,7 +3898,7 @@ function RunsFilterChips({definition: definition, onView: onView, scoped: scoped
 
 function OperatorButton({facet: facet, index: index2, label: label, onPick: onPick, picked: picked}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             fontSize: 1,
             mode: "bleed",
@@ -3907,8 +3907,8 @@ function OperatorButton({facet: facet, index: index2, label: label, onPick: onPi
             text: label
         }),
         id: `runs-chip-operator-${index2}`,
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-            children: polarityOptionsOf(facet).map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
+            children: polarityOptionsOf(facet).map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => onPick(option.key),
                 pressed: picked === option.key,
@@ -3994,7 +3994,7 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
     /* @__PURE__ */
     return jsxRuntime.jsx(ValuePopoverButton, {
         label: label,
-        children: close => listed.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        children: close => listed.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
             fontSize: 1,
             onClick: () => pick(option.key, close),
             children: /* @__PURE__ */ jsxRuntime.jsx(CountedMenuRow, {
@@ -4010,8 +4010,8 @@ function ValuesButton({apply: apply, chip: chip, displayById: displayById, optio
 function ValuePopoverButton({children: children, faces: faces, label: label}) {
     const [open, setOpen] = react.useState(!1), buttonRef = react.useRef(null), close = () => setOpen(!1);
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.Popover, {
-        content: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
+    return jsxRuntime.jsx(popover.Popover, {
+        content: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
             onClickOutside: event => {
                 event.target instanceof Node && buttonRef.current?.contains(event.target) || close();
             },
@@ -4276,7 +4276,7 @@ function ScopeSelect({onView: onView, view: view}) {
         filters: view.filters
     });
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(SurfaceButton, {
             $surface: color.bg,
             fontSize: 1,
@@ -4286,15 +4286,15 @@ function ScopeSelect({onView: onView, view: view}) {
             text: view.scope === "closed" ? "Closed runs" : "Open runs"
         }),
         id: "runs-scope-filter",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => pick("open"),
                 pressed: view.scope === "open",
                 text: "Open runs"
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => pick("closed"),
                 pressed: view.scope === "closed",
@@ -4313,7 +4313,7 @@ function ScopeSelect({onView: onView, view: view}) {
 function WorkflowSelect({counts: counts, definitions: definitions, onView: onView, totalCount: totalCount, view: view}) {
     const options = [ ...definitions ].sort(byTitleThenName), selected = options.find(definition => definition.name === view.filters.workflow), pick = name => onView(workflowScopedView(view, name));
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             disabled: options.length === 0,
@@ -4337,7 +4337,7 @@ function WorkflowSelect({counts: counts, definitions: definitions, onView: onVie
             })
         }),
         id: "runs-workflow-filter",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
             /* @__PURE__ */ jsxRuntime.jsx(QueryableValues, {
                 onPick: row => pick(row.key),
@@ -4355,7 +4355,7 @@ function WorkflowSelect({counts: counts, definitions: definitions, onView: onVie
                 } ]
             }), options.length === 0 ? null : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [ 
-                /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
+                /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
                 /* @__PURE__ */ jsxRuntime.jsx(ui.Box, {
                     padding: 2,
                     children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, {
@@ -5561,7 +5561,7 @@ function WorkflowsToolRoot() {
 
 function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             "aria-label": "More",
             fontSize: 1,
@@ -5570,15 +5570,15 @@ function ToolOverflowMenu({onOpenDefinitions: onOpenDefinitions}) {
             padding: 2
         }),
         id: "workflows-tool-overflow",
-        menu: /* @__PURE__ */ jsxRuntime.jsxs(ui.Menu, {
+        menu: /* @__PURE__ */ jsxRuntime.jsxs(menu.Menu, {
             children: [ 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: onOpenDefinitions,
                 text: "Definitions"
             }), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuDivider, {}), 
-            /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuDivider, {}), 
+            /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 as: "a",
                 fontSize: 1,
                 href: WORKFLOWS_DOCS_URL,
@@ -5644,7 +5644,7 @@ function DefinitionsCrumbs({onOpenDefinitions: onOpenDefinitions, onOpenWorkflow
 function WorkflowCrumbPicker({name: name, onOpenWorkflow: onOpenWorkflow}) {
     const {definitions: definitions} = useDeployedDefinitions(), options = workflowOptions(definitions ?? []), title = options.find(option => option.name === name)?.title ?? name;
     /* @__PURE__ */
-    return jsxRuntime.jsx(ui.MenuButton, {
+    return jsxRuntime.jsx(menu.MenuButton, {
         button: 
         /* @__PURE__ */ jsxRuntime.jsx(ui.Button, {
             disabled: options.length === 0,
@@ -5668,8 +5668,8 @@ function WorkflowCrumbPicker({name: name, onOpenWorkflow: onOpenWorkflow}) {
             })
         }),
         id: "workflows-crumb-picker",
-        menu: /* @__PURE__ */ jsxRuntime.jsx(ui.Menu, {
-            children: options.map(option => /* @__PURE__ */ jsxRuntime.jsx(ui.MenuItem, {
+        menu: /* @__PURE__ */ jsxRuntime.jsx(menu.Menu, {
+            children: options.map(option => /* @__PURE__ */ jsxRuntime.jsx(menu.MenuItem, {
                 fontSize: 1,
                 onClick: () => onOpenWorkflow(option.name),
                 pressed: option.name === name,

package/dist/_chunks-es/index.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 
 import { TimelineIcon } from "@sanity/icons/Timeline";
 
-import { useClickOutsideEvent, Popover, Box, Flex, TextInput, Button, Select, Checkbox, Text, Stack, Autocomplete, Card, TextArea, useToast, Dialog, Switch, useTheme_v2, TextSkeleton, Code, Badge, Spinner, MenuButton, Menu, MenuItem, useElementSize, MenuDivider, TabList, Tab, TabPanel } from "@sanity/ui";
+import { useClickOutsideEvent, Box, Flex, TextInput, Button, Select, Checkbox, Text, Stack, Card, TextArea, Dialog, Switch, useTheme_v2, TextSkeleton, Badge, Spinner, useElementSize, TabList, Tab, TabPanel } from "@sanity/ui";
 
 import { editFieldTarget, useWorkflowTelemetry, useRefcountedIds } from "@sanity/workflow-react";
 
@@ -30,16 +30,24 @@ import { useCurrentUser, Preview, useValuePreview, SanityDefaultPreview, useClie
 
 import { CalendarIcon } from "@sanity/icons/Calendar";
 
+import { Popover } from "@sanity/ui/popover";
+
 import { UserIcon } from "@sanity/icons/User";
 
 import { SearchIcon } from "@sanity/icons/Search";
 
+import { Autocomplete } from "@sanity/ui/autocomplete";
+
+import { useToast } from "@sanity/ui/toast";
+
 import { EditIcon } from "@sanity/icons/Edit";
 
 import { randomKey } from "@sanity/util/content";
 
 import { InfoOutlineIcon } from "@sanity/icons/InfoOutline";
 
+import { Code } from "@sanity/ui/code";
+
 import { DocumentIcon } from "@sanity/icons/Document";
 
 import { WarningOutlineIcon } from "@sanity/icons/WarningOutline";
@@ -66,6 +74,8 @@ import { BoltIcon } from "@sanity/icons/Bolt";
 
 import { ChevronDownIcon } from "@sanity/icons/ChevronDown";
 
+import { MenuButton, Menu, MenuItem, MenuDivider } from "@sanity/ui/menu";
+
 import pluralize from "pluralize-esm";
 
 import { ChevronRightIcon } from "@sanity/icons/ChevronRight";
@@ -8535,7 +8545,7 @@ function InvalidDocNotice({invalid: invalid}) {
         radius: 2,
         tone: "caution",
         children: /* @__PURE__ */ jsxs(Stack, {
-            space: 3,
+            gap: 3,
             children: [ 
             /* @__PURE__ */ jsx(Text, {
                 size: 1,
@@ -10931,7 +10941,6 @@ function SelectedReleaseRow({mapping: mapping, selectedReleaseId: selectedReleas
             children: "Release:"
         }), 
         /* @__PURE__ */ jsx(Badge, {
-            mode: "outline",
             style: badgeTrim,
             tone: "primary",
             children: selectedReleaseId

package/dist/_chunks-es/workflows-tool-root.js

@@ -8,7 +8,9 @@ import { EllipsisHorizontalIcon } from "@sanity/icons/EllipsisHorizontal";
 
 import { LaunchIcon } from "@sanity/icons/Launch";
 
-import { Box, Text, Flex, Stack, Button, useTheme_v2, Card, Dialog, MenuButton, Menu, MenuGroup, MenuItem, MenuDivider, TextInput, Checkbox, Popover, KBD, TabPanel } from "@sanity/ui";
+import { Box, Text, Flex, Stack, Button, useTheme_v2, Card, Dialog, TextInput, Checkbox, KBD, TabPanel } from "@sanity/ui";
+
+import { MenuButton, Menu, MenuGroup, MenuItem, MenuDivider } from "@sanity/ui/menu";
 
 import { useWorkflowTelemetry } from "@sanity/workflow-react";
 
@@ -50,6 +52,8 @@ import { isReferenceSchemaType } from "@sanity/types";
 
 import { UserIcon } from "@sanity/icons/User";
 
+import { Popover } from "@sanity/ui/popover";
+
 import { AddIcon } from "@sanity/icons/Add";
 
 import { CheckmarkIcon } from "@sanity/icons/Checkmark";
@@ -756,7 +760,7 @@ function DefinitionRow({countKnown: countKnown, now: now, onOpen: onOpen, row: r
                 paddingRight: titleGap
             },
             children: /* @__PURE__ */ jsxs(Stack, {
-                space: 3,
+                gap: 3,
                 children: [ 
                 /* @__PURE__ */ jsx(Text, {
                     size: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/workflow-studio-plugin",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Sanity Studio plugin for @sanity/workflow-engine: the form strip, a Workflows document view, stage badges, and the document-action lock.",
   "keywords": [
     "sanity",
@@ -42,12 +42,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@sanity/client": "^7.24.0",
+    "@sanity/client": "^8.6.2",
     "@sanity/icons": "^4.1.0",
     "@sanity/telemetry": "^1.1.0",
-    "@sanity/types": "^6",
-    "@sanity/ui": "^3.3.0",
-    "@sanity/util": "^6.3.0",
+    "@sanity/types": "^6.15.0",
+    "@sanity/ui": "^4.2.1",
+    "@sanity/util": "^6.15.0",
     "@tanstack/react-virtual": "^3.14.6",
     "date-fns": "^4.4.0",
     "motion": "^12.43.0",
@@ -56,39 +56,39 @@
   },
   "devDependencies": {
     "@sanity/pkg-utils": "^10.5.3",
-    "@sanity/schema": "^6",
-    "@sanity/sdk": "^3.1.0",
+    "@sanity/schema": "^6.15.0",
+    "@sanity/sdk": "^3.3.0",
     "@storybook/react-vite": "^10.6.0",
     "@testing-library/react": "^16.3.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "sanity": "^6",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sanity": "^6.15.0",
     "storybook": "^10.6.0",
     "styled-components": "^6.4.2",
     "vite": "^8.2.2",
     "vitest": "^4.1.8",
-    "@sanity/workflow-components": "0.33.0",
-    "@sanity/workflow-diagram": "0.33.0",
-    "@sanity/workflow-engine": "0.33.0",
-    "@sanity/workflow-engine-test": "0.33.0",
-    "@sanity/workflow-react": "0.33.0",
-    "@sanity/workflow-studio": "0.33.0",
-    "@sanity/workflow-test-fixtures": "0.0.0"
+    "@sanity/workflow-components": "0.35.0",
+    "@sanity/workflow-diagram": "0.35.0",
+    "@sanity/workflow-engine": "0.35.0",
+    "@sanity/workflow-engine-test": "0.35.0",
+    "@sanity/workflow-react": "0.35.0",
+    "@sanity/workflow-test-fixtures": "0.0.0",
+    "@sanity/workflow-studio": "0.35.0"
   },
   "peerDependencies": {
     "@sanity/sdk": "^3.1.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "sanity": "^6.3.0",
+    "sanity": "^6.15.0",
     "styled-components": "^6.4.2",
-    "@sanity/workflow-components": "0.33.0",
-    "@sanity/workflow-diagram": "0.33.0",
-    "@sanity/workflow-engine": "0.33.0",
-    "@sanity/workflow-react": "0.33.0",
-    "@sanity/workflow-studio": "0.33.0"
+    "@sanity/workflow-diagram": "0.35.0",
+    "@sanity/workflow-components": "0.35.0",
+    "@sanity/workflow-engine": "0.35.0",
+    "@sanity/workflow-react": "0.35.0",
+    "@sanity/workflow-studio": "0.35.0"
   },
   "engines": {
     "node": ">=20"