@sanity/workflow-studio-plugin 0.0.0 → 0.1.0

package/dist/index.js

@@ -1,8 +1,8 @@
-import { latestDeployedDefinitions, missingRequiredInputs, gdrRef, releaseRef, rejectedRefTypes, findOpenStageEntry, ENGINE_API_VERSION, WORKFLOW_INSTANCE_TYPE, WORKFLOW_DEFINITION_TYPE, GUARD_DOC_TYPE, isTodoListEntry, isTodoListItem, ActionDisabledError, ActionParamsInvalidError, errorMessage, MutationGuardDeniedError, isTerminalActivityStatus, findCurrentActivityEntry, tryParseGdr, resourceFromParsed, resolveFieldEntry, isNotesEntry, extractDocumentId, parseDefinitionSnapshot, terminalState, parentRef, gdrFromResource, instanceWatchesDocument, definitionsListGroq, definitionLookupGroq, documentActionDenials, deniedGuardLabels, deniedGuardRefs, isTerminalStage } from "@sanity/workflow-engine";
+import { latestDeployedDefinitions, missingRequiredInputs, gdrRef, releaseRef, rejectedRefTypes, findOpenStageEntry, ENGINE_API_VERSION, WORKFLOW_INSTANCE_TYPE, WORKFLOW_DEFINITION_TYPE, GUARD_DOC_TYPE, isTodoListEntry, isTodoListItem, ActionDisabledError, ActionParamsInvalidError, errorMessage, MutationGuardDeniedError, isTerminalActivityStatus, findCurrentActivityEntry, tryParseGdr, resourceFromParsed, resolveFieldEntry, isNotesEntry, extractDocumentId, parseDefinitionSnapshot, terminalState, parentRef, gdrFromResource, instanceWatchesDocument, aclPathForResource, definitionsListGroq, definitionLookupGroq, documentActionDenials, deniedGuardLabels, deniedGuardRefs, isTerminalStage } from "@sanity/workflow-engine";
 
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 
-import { Tooltip, Box, Text, Button, Card, Flex, useClickOutsideEvent, Popover, useTheme_v2, Spinner, Avatar, TextInput, AvatarStack, Checkbox, useToast, Stack, Badge, Switch, Code, TextArea, Autocomplete, Dialog, TabList, Tab, Select, TabPanel, MenuButton, Menu, MenuItem } from "@sanity/ui";
+import { Tooltip, Box, Text, Button, Card, Flex, useClickOutsideEvent, Popover, useTheme_v2, Spinner, Avatar, TextInput, AvatarStack, Checkbox, useToast, Stack, Badge, TextArea, Switch, Code, Autocomplete, Dialog, TabList, Tab, Select, TabPanel, MenuButton, Menu, MenuItem } from "@sanity/ui";
 
 import { createContext, useEffect, useContext, Fragment as Fragment$1, useRef, useState, useMemo, useCallback, Component } from "react";
 
@@ -40,6 +40,8 @@ import { RemoveCircleIcon } from "@sanity/icons/RemoveCircle";
 
 import { ClockIcon } from "@sanity/icons/Clock";
 
+import { BoltIcon } from "@sanity/icons/Bolt";
+
 import { EditIcon } from "@sanity/icons/Edit";
 
 import { randomKey } from "@sanity/util/content";
@@ -366,7 +368,8 @@ const activityNotActiveSentence = {
     "instance-completed": () => "This workflow is already complete.",
     "mutation-guard-denied": () => "An earlier step is holding this document.",
     "requirements-unmet": () => "This step isn't ready yet — a required condition hasn't been met.",
-    "stage-terminal": () => "This stage is finished."
+    "stage-terminal": () => "This stage is finished.",
+    "subject-permission-denied": () => "You don't have permission to change the document this step works on."
 };
 
 function describeDisabledReason(reason) {
@@ -878,20 +881,9 @@ function UserAvatarGroup({ids: ids}) {
     });
 }
 
-function TodoCheckbox({busy: busy, checked: checked, canClick: canClick, onToggle: onToggle}) {
-    return busy ? /* @__PURE__ */ jsx(Flex, {
-        align: "center",
-        "aria-label": "Saving…",
-        justify: "center",
-        style: {
-            width: 17,
-            height: 17
-        },
-        children: /* @__PURE__ */ jsx(Spinner, {
-            muted: !0,
-            size: 1
-        })
-    }) : /* @__PURE__ */ jsx(Checkbox, {
+function TodoCheckbox({checked: checked, canClick: canClick, onToggle: onToggle}) {
+    /* @__PURE__ */
+    return jsx(Checkbox, {
         checked: checked,
         disabled: !canClick,
         onChange: onToggle,
@@ -1034,10 +1026,10 @@ function AssigneeControl({item: item, editable: editable, onPatch: onPatch}) {
     }) : chip;
 }
 
-function AddItemControl({busy: busy, onAdd: onAdd, button: button}) {
+function AddItemControl({onAdd: onAdd, button: button, busy: busy}) {
     const [open, setOpen] = useState(!1), [label, setLabel] = useState(""), submit = () => {
         const trimmed = label.trim();
-        trimmed && (setOpen(!1), setLabel(""), onAdd(trimmed));
+        !trimmed || busy || (setOpen(!1), setLabel(""), onAdd(trimmed));
     };
     /* @__PURE__ */
     return jsx(DismissablePopover, {
@@ -1069,13 +1061,11 @@ function AddItemControl({busy: busy, onAdd: onAdd, button: button}) {
         open: open,
         placement: "bottom-start",
         children: /* @__PURE__ */ jsx(Box, {
-            onClick: () => !busy && setOpen(v => !v),
+            onClick: () => setOpen(v => !v),
             style: {
                 display: "inline-flex"
             },
-            children: busy ? /* @__PURE__ */ jsx(Spinner, {
-                muted: !0
-            }) : button
+            children: button
         })
     });
 }
@@ -1104,7 +1094,7 @@ function rowInteractivity(row) {
     };
 }
 
-function ActionItemRowView({row: row, busy: busy, showBreadcrumb: showBreadcrumb, onToggle: onToggle, onPatch: onPatch}) {
+function ActionItemRowView({row: row, showBreadcrumb: showBreadcrumb, onToggle: onToggle, onPatch: onPatch}) {
     const {canClick: canClick, hint: hint} = rowInteractivity(row), editable = row.editTarget !== void 0, body = /* @__PURE__ */ jsxs(Flex, {
         align: "center",
         gap: 2,
@@ -1115,7 +1105,6 @@ function ActionItemRowView({row: row, busy: busy, showBreadcrumb: showBreadcrumb
                 flexShrink: 0
             },
             children: /* @__PURE__ */ jsx(TodoCheckbox, {
-                busy: busy,
                 canClick: canClick,
                 checked: isTodoDone(row.item),
                 onToggle: onToggle
@@ -1186,12 +1175,10 @@ function RowBreadcrumb({row: row}) {
     });
 }
 
-const ADD_KEY = "__add__";
-
 function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1, identity: identity, activityFilter: activityFilter, variant: variant = "section"}) {
-    const {instance: instance} = entry, {editFieldFor: editFieldFor, fireActionFor: fireActionFor} = useWorkflowContext(), toast = useToast(), [busyKey, setBusyKey] = useState(null), derivation = deriveActionItems(entry), rows = derivation.rows.filter(row => activityFilter === void 0 || row.activityName === activityFilter || row.tick?.activity === activityFilter).filter(row => !assignedToMeOnly || identity !== void 0 && isItemAssignedTo(row.item, identity)), appendTarget = activityFilter === void 0 ? derivation.appendTargets[0] : derivation.appendTargets.find(t => t.activity === activityFilter), run = async (key, op) => {
-        if (!busyKey) {
-            setBusyKey(key);
+    const {instance: instance} = entry, {editFieldFor: editFieldFor, fireActionFor: fireActionFor} = useWorkflowContext(), toast = useToast(), [busy, setBusy] = useState(!1), derivation = deriveActionItems(entry), rows = derivation.rows.filter(row => activityFilter === void 0 || row.activityName === activityFilter || row.tick?.activity === activityFilter).filter(row => !assignedToMeOnly || identity !== void 0 && isItemAssignedTo(row.item, identity)), appendTarget = activityFilter === void 0 ? derivation.appendTargets[0] : derivation.appendTargets.find(t => t.activity === activityFilter), run = async op => {
+        if (!busy) {
+            setBusy(!0);
             try {
                 await op();
             } catch (err) {
@@ -1201,7 +1188,7 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
                     description: describeError(err)
                 });
             } finally {
-                setBusyKey(null);
+                setBusy(!1);
             }
         }
     }, patchItem = (row, patch) => {
@@ -1210,7 +1197,7 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
             ...it,
             ...patch
         } : it);
-        return run(row.item._key, () => editFieldFor(instance._id, {
+        return run(() => editFieldFor(instance._id, {
             target: target,
             mode: "set",
             value: next
@@ -1220,11 +1207,11 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
             status: toggledTodoStatus(row.item)
         });
         const tick = row.tick;
-        return tick && tick.actionEval.allowed && !isTodoDone(row.item) ? run(row.item._key, () => fireActionFor(instance._id, {
+        return tick && tick.actionEval.allowed && !isTodoDone(row.item) ? run(() => fireActionFor(instance._id, {
             activity: tick.activity,
             action: tick.actionEval.action.name
         })) : Promise.resolve();
-    }, addItem = label => appendTarget ? run(ADD_KEY, () => editFieldFor(instance._id, {
+    }, addItem = label => appendTarget ? run(() => editFieldFor(instance._id, {
         target: appendTarget,
         mode: "append",
         value: {
@@ -1234,7 +1221,6 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
     })) : Promise.resolve();
     if (rows.length === 0 && !appendTarget) return null;
     const rowKey = row => `${row.scope}:${row.activityName ?? ""}:${row.fieldName}:${row.item._key}`, rowProps = row => ({
-        busy: busyKey === row.item._key,
         onPatch: patch => {
             patchItem(row, patch);
         },
@@ -1253,7 +1239,7 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
             }, rowKey(row)))
         }), appendTarget ? /* @__PURE__ */ jsx(Flex, {
             children: /* @__PURE__ */ jsx(AddItemControl, {
-                busy: busyKey === ADD_KEY,
+                busy: busy,
                 button: /* @__PURE__ */ jsx(Button, {
                     fontSize: 1,
                     icon: AddIcon,
@@ -1279,7 +1265,7 @@ function ActionItemsList({entry: entry, assignedToMeOnly: assignedToMeOnly = !1,
             /* @__PURE__ */ jsx(Box, {
                 paddingRight: 2,
                 children: /* @__PURE__ */ jsx(AddItemControl, {
-                    busy: busyKey === ADD_KEY,
+                    busy: busy,
                     button: /* @__PURE__ */ jsx(HoverHint, {
                         text: "Add action item",
                         children: /* @__PURE__ */ jsx(Button, {
@@ -1406,7 +1392,7 @@ function groupEditableByActivity(fields) {
 }
 
 function deriveActivityPresentation(args) {
-    const {activity: activity, status: status, actions: actions, kind: kind} = args.activityEval, editableNames = new Set(args.editableFields.map(f => f.name)), dates = args.state.filter(s => s._type === "datetime" && !!s.value), writtenNames = new Set(actions.flatMap(a => writtenFieldNames(a.action))), todoListNames = new Set(args.state.filter(isTodoListEntry).map(s => s.name)), bodyFields = args.state.filter(s => s._type !== "assignees" && s._type !== "datetime" && !writtenNames.has(s.name) && !editableNames.has(s.name) && !todoListNames.has(s.name)), visibleActions = actions.filter(a => {
+    const {activity: activity, status: status, actions: actions, kind: kind} = args.activityEval, editableNames = new Set(args.editableFields.map(f => f.name)), dates = args.state.filter(s => (s._type === "date" || s._type === "datetime") && !!s.value && !editableNames.has(s.name)), writtenNames = new Set(actions.flatMap(a => writtenFieldNames(a.action))), todoListNames = new Set(args.state.filter(isTodoListEntry).map(s => s.name)), bodyFields = args.state.filter(s => s._type !== "assignees" && s._type !== "date" && s._type !== "datetime" && !writtenNames.has(s.name) && !editableNames.has(s.name) && !todoListNames.has(s.name)), visibleActions = actions.filter(a => {
         const writes = writtenFieldNames(a.action);
         return !(writes.length > 0 && writes.every(name => editableNames.has(name)));
     }), blockedReason = status === "active" && actions.length > 0 && actions.every(a => !a.allowed) ? actions.find(a => a.disabledReason)?.disabledReason : void 0, ticks = tickActionNames({
@@ -1683,8 +1669,8 @@ function activityStateOf(instance, activityName) {
     return findCurrentActivityEntry(instance, activityName)?.fields ?? [];
 }
 
-function assigneeEntriesOf(state, assignField) {
-    return state.filter(s => s._type === "assignees" && (s.value.length > 0 || s.name === assignField?.name));
+function assigneeEntriesOf(state, assignFields) {
+    return state.filter(s => s._type === "assignees" && (s.value.length > 0 || assignFields.has(s.name)));
 }
 
 function hasActivityActionItems(entry, activityName) {
@@ -1700,19 +1686,39 @@ function deriveActivityDetail(args) {
         state: state,
         workflowFields: instance.fields ?? [],
         editableFields: activityEditables
-    }), assignField = activityEditables.find(f => f.type === "assignees");
+    }), assignFields = new Map(activityEditables.filter(f => f.type === "assignees").map(f => [ f.name, f ]));
     return {
         activityEval: activityEval,
         state: state,
         presentation: presentation,
         title: activityEval.activity.title ?? activityEval.activity.name,
-        assignField: assignField,
-        assigneeEntries: assigneeEntriesOf(state, assignField),
+        assignFields: assignFields,
+        assigneeEntries: assigneeEntriesOf(state, assignFields),
         hasActionItems: hasActivityActionItems(entry, activityName),
         hasActions: presentation.manualTarget !== void 0 || presentation.hasVisibleActions
     };
 }
 
+function stageTitle(definition, stageName) {
+    return definition?.stages.find(stage => stage.name === stageName)?.title ?? stageName;
+}
+
+function isHotField(evaluation, fieldName) {
+    return (insightFor(evaluation, fieldName)?.involvedIn.length ?? 0) > 0;
+}
+
+function advanceTargetTitle(evaluation, fieldName) {
+    if (evaluation === void 0) return;
+    const involved = new Set((insightFor(evaluation, fieldName)?.involvedIn ?? []).flatMap(site => site.kind === "transition" ? [ site.transition ] : []));
+    if (involved.size === 0) return;
+    const halting = evaluation.currentStage.transitions.find(t => t.filterSatisfied || t.unevaluable);
+    if (!(halting === void 0 || !halting.filterSatisfied) && involved.has(halting.transition.name)) return stageTitle(evaluation.definition, halting.transition.to);
+}
+
+function insightFor(evaluation, fieldName) {
+    return evaluation?.fieldInsights.find(insight => insight.field === fieldName);
+}
+
 function noteRow(args) {
     return {
         _key: randomKey(),
@@ -1733,6 +1739,14 @@ function FieldInput$1({field: field, value: value, onChange: onChange, onEnter:
             onChange: e => onChange(e.currentTarget.checked)
         });
 
+      case "date":
+        /* @__PURE__ */
+        return jsx(TextInput, {
+            onChange: e => onChange(e.currentTarget.value === "" ? null : e.currentTarget.value),
+            type: "date",
+            value: typeof value == "string" ? value : ""
+        });
+
       case "datetime":
         /* @__PURE__ */
         return jsx(TextInput, {
@@ -1750,6 +1764,14 @@ function FieldInput$1({field: field, value: value, onChange: onChange, onEnter:
             value: value == null ? "" : String(value)
         });
 
+      case "text":
+        /* @__PURE__ */
+        return jsx(TextArea, {
+            onChange: e => onChange(e.currentTarget.value),
+            rows: 3,
+            value: value == null ? "" : String(value)
+        });
+
       default:
         /* @__PURE__ */
         return jsx(TextInput, {
@@ -2129,7 +2151,7 @@ function ValueDisplay({field: field, value: value}) {
 }
 
 function EditableFieldControl({instanceId: instanceId, field: field, hideLabel: hideLabel}) {
-    const {editFieldFor: editFieldFor, byInstance: byInstance} = useWorkflowContext(), me = useCurrentUser(), instance = byInstance.get(instanceId)?.instance, entry = instance ? resolveFieldEntry(instance, field) : void 0;
+    const {editFieldFor: editFieldFor, previewFieldFor: previewFieldFor, discardFieldPreviewFor: discardFieldPreviewFor, byInstance: byInstance} = useWorkflowContext(), me = useCurrentUser(), held = byInstance.get(instanceId), entry = held ? resolveFieldEntry(held.instance, field) : void 0, evaluation = held?.evaluation, target = editTargetOf(field), advanceTo = advanceTargetTitle(evaluation, field.name);
     /* @__PURE__ */
     return jsx(EditableField, {
         field: field,
@@ -2139,17 +2161,27 @@ function EditableFieldControl({instanceId: instanceId, field: field, hideLabel:
         ...hideLabel === void 0 ? {} : {
             hideLabel: hideLabel
         },
+        hot: isHotField(evaluation, field.name),
+        ...advanceTo === void 0 ? {} : {
+            advanceTo: advanceTo
+        },
         onSave: value => editFieldFor(instanceId, {
-            target: editTargetOf(field),
+            target: target,
             mode: "set",
             value: value
         }).then(() => {}),
+        onPreview: value => previewFieldFor(instanceId, {
+            target: target,
+            mode: "set",
+            value: value
+        }),
+        onDiscardPreview: () => discardFieldPreviewFor(instanceId, target),
         onUnset: () => editFieldFor(instanceId, {
-            target: editTargetOf(field),
+            target: target,
             mode: "unset"
         }).then(() => {}),
         onAppend: body => editFieldFor(instanceId, {
-            target: editTargetOf(field),
+            target: target,
             mode: "append",
             value: noteRow({
                 body: body,
@@ -2216,21 +2248,28 @@ function FieldLabel({label: label, hide: hide}) {
     });
 }
 
-function useSaveField(args) {
-    const toast = useToast(), [saving, setSaving] = useState(!1);
+function useSaveFailureToast() {
+    const toast = useToast();
+    return err => {
+        console.error("[workflow-studio-plugin] field save failed:", err), toast.push({
+            status: "error",
+            title: "Saving failed",
+            description: describeError(err)
+        });
+    };
+}
+
+function useSaveField() {
+    const reportFailure = useSaveFailureToast(), [saving, setSaving] = useState(!1);
     return {
         saving: saving,
         save: async commit => {
             if (!saving) {
                 setSaving(!0);
                 try {
-                    await commit(), args.onSaved?.();
+                    await commit();
                 } catch (err) {
-                    console.error("[workflow-studio-plugin] field save failed:", err), toast.push({
-                        status: "error",
-                        title: "Saving failed",
-                        description: describeError(err)
-                    });
+                    reportFailure(err);
                 } finally {
                     setSaving(!1);
                 }
@@ -2240,7 +2279,7 @@ function useSaveField(args) {
 }
 
 function ActorField({field: field, label: label, hideLabel: hideLabel, onSave: onSave, onUnset: onUnset}) {
-    const [open, setOpen] = useState(!1), {saving: saving, save: save} = useSaveField({}), cur = field.value, pick = member => {
+    const [open, setOpen] = useState(!1), {saving: saving, save: save} = useSaveField(), cur = field.value, pick = member => {
         setOpen(!1), !saving && (member && member.id !== cur?.id ? save(() => onSave(personActor(member))) : onUnset !== void 0 && cur && save(onUnset));
     }, value = cur ? /* @__PURE__ */ jsx(ActorName, {
         id: cur.id
@@ -2323,10 +2362,14 @@ function ArrayField({field: field, label: label, hideLabel: hideLabel}) {
 }
 
 function NotesField({field: field, label: label, hideLabel: hideLabel, onAppend: onAppend}) {
-    const [body, setBody] = useState(""), {saving: saving, save: save} = useSaveField({
-        onSaved: () => setBody("")
-    }), rows = arrayRowsOf(field.value), trimmed = body.trim(), add = () => {
-        trimmed !== "" && save(() => onAppend(trimmed));
+    const [body, setBody] = useState(""), {saving: saving, save: save} = useSaveField(), rows = arrayRowsOf(field.value), trimmed = body.trim(), add = () => {
+        saving || trimmed === "" || (setBody(""), save(async () => {
+            try {
+                await onAppend(trimmed);
+            } catch (err) {
+                throw setBody(trimmed), err;
+            }
+        }));
     };
     /* @__PURE__ */
     return jsxs(Stack, {
@@ -2345,7 +2388,6 @@ function NotesField({field: field, label: label, hideLabel: hideLabel, onAppend:
             /* @__PURE__ */ jsx(Box, {
                 flex: 1,
                 children: /* @__PURE__ */ jsx(TextArea, {
-                    disabled: saving,
                     fontSize: 1,
                     onChange: e => setBody(e.currentTarget.value),
                     placeholder: "Add an entry…",
@@ -2354,9 +2396,8 @@ function NotesField({field: field, label: label, hideLabel: hideLabel, onAppend:
                 })
             }), 
             /* @__PURE__ */ jsx(Button, {
-                disabled: saving || trimmed === "",
+                disabled: trimmed === "",
                 fontSize: 1,
-                loading: saving,
                 onClick: add,
                 padding: 2,
                 text: "Add",
@@ -2367,7 +2408,7 @@ function NotesField({field: field, label: label, hideLabel: hideLabel, onAppend:
 }
 
 function BooleanSwitchField({field: field, label: label, hideLabel: hideLabel, onSave: onSave}) {
-    const {saving: saving, save: save} = useSaveField({}), [optimistic, setOptimistic] = useState(null), committed = field.value === !0;
+    const {save: save} = useSaveField(), committed = field.value === !0;
     /* @__PURE__ */
     return jsxs(Flex, {
         align: "center",
@@ -2379,68 +2420,56 @@ function BooleanSwitchField({field: field, label: label, hideLabel: hideLabel, o
             label: label
         }), 
         /* @__PURE__ */ jsx(Switch, {
-            checked: optimistic ?? committed,
-            disabled: saving,
+            checked: committed,
             onChange: () => {
-                const next = !committed;
-                setOptimistic(next), save(() => onSave(next)).finally(() => setOptimistic(null));
+                save(() => onSave(!committed));
             }
         }) ]
     });
 }
 
-function GenericField({field: field, label: label, hideLabel: hideLabel, onSave: onSave}) {
-    const [editing, setEditing] = useState(!1), [draft, setDraft] = useState(field.value), {saving: saving, save: save} = useSaveField({
-        onSaved: () => setEditing(!1)
-    });
+function sameValue(a, b) {
+    return (a ?? void 0) === (b ?? void 0);
+}
+
+function GenericField({field: field, label: label, hideLabel: hideLabel, onSave: onSave, onPreview: onPreview, onDiscardPreview: onDiscardPreview}) {
+    const reportFailure = useSaveFailureToast(), [draft, setDraft] = useState(field.value), [baseline, setBaseline] = useState(field.value), dirty = !sameValue(draft, baseline), focused = useRef(!1), previewed = useRef(!1), commit = () => {
+        if (!dirty) return;
+        const value = draft, prev = baseline;
+        setBaseline(value), previewed.current = !1, onSave(value).catch(err => {
+            reportFailure(err), setBaseline(current => sameValue(current, value) ? prev : current), 
+            setDraft(current => sameValue(current, value) ? prev : current);
+        });
+    }, settle = () => {
+        dirty ? commit() : previewed.current && (previewed.current = !1, onDiscardPreview?.());
+    }, settleRef = useRef(settle);
+    settleRef.current = settle, useEffect(() => () => settleRef.current(), []);
+    const adopted = useRef(field.value);
     return useEffect(() => {
-        setDraft(field.value);
-    }, [ field.value ]), editing ? /* @__PURE__ */ jsxs(Stack, {
+        sameValue(adopted.current, field.value) || focused.current || dirty || (adopted.current = field.value, 
+        setBaseline(field.value), setDraft(field.value));
+    }, [ field.value, dirty ]), field.editable ? /* @__PURE__ */ jsxs(Stack, {
         gap: 2,
         children: [ 
         /* @__PURE__ */ jsx(FieldLabel, {
             hide: hideLabel,
             label: label
         }), 
-        /* @__PURE__ */ jsxs(Flex, {
-            align: "center",
-            gap: 2,
-            children: [ 
-            /* @__PURE__ */ jsx(Box, {
-                flex: 1,
-                children: /* @__PURE__ */ jsx(FieldInput$1, {
-                    field: field,
-                    onChange: setDraft,
-                    onEnter: () => save(() => onSave(draft)),
-                    value: draft
-                })
-            }), 
-            /* @__PURE__ */ jsx(HoverHint, {
-                text: "Save",
-                children: /* @__PURE__ */ jsx(Button, {
-                    "aria-label": "Save",
-                    fontSize: 1,
-                    icon: CheckmarkIcon,
-                    loading: saving,
-                    onClick: () => save(() => onSave(draft)),
-                    padding: 2,
-                    tone: "primary"
-                })
-            }), 
-            /* @__PURE__ */ jsx(HoverHint, {
-                text: "Cancel",
-                children: /* @__PURE__ */ jsx(Button, {
-                    "aria-label": "Cancel",
-                    disabled: saving,
-                    fontSize: 1,
-                    icon: CloseIcon,
-                    mode: "bleed",
-                    onClick: () => {
-                        setDraft(field.value), setEditing(!1);
-                    },
-                    padding: 2
-                })
-            }) ]
+        /* @__PURE__ */ jsx(Box, {
+            onBlur: () => {
+                focused.current = !1, settle();
+            },
+            onFocus: () => {
+                focused.current = !0;
+            },
+            children: /* @__PURE__ */ jsx(FieldInput$1, {
+                field: field,
+                onChange: value => {
+                    setDraft(value), previewed.current = !0, onPreview?.(value);
+                },
+                onEnter: commit,
+                value: draft
+            })
         }) ]
     }) : /* @__PURE__ */ jsxs(Flex, {
         align: "center",
@@ -2450,14 +2479,7 @@ function GenericField({field: field, label: label, hideLabel: hideLabel, onSave:
         /* @__PURE__ */ jsx(FieldLabel, {
             hide: hideLabel,
             label: label
-        }), field.editable ? /* @__PURE__ */ jsx(EditableValueButton, {
-            hint: "Edit",
-            onClick: () => setEditing(!0),
-            children: /* @__PURE__ */ jsx(ValueDisplay, {
-                field: field,
-                value: field.value
-            })
-        }) : 
+        }), 
         /* @__PURE__ */ jsxs(Flex, {
             align: "center",
             gap: 2,
@@ -2474,13 +2496,33 @@ function GenericField({field: field, label: label, hideLabel: hideLabel, onSave:
     });
 }
 
-function EditableField({field: field, entry: entry, onSave: onSave, onUnset: onUnset, onAppend: onAppend, hideLabel: hideLabel = !1}) {
-    const label = field.title ?? field.name, arm = {
-        field: field,
-        label: label,
-        hideLabel: hideLabel,
-        onSave: onSave
-    };
+function HotFieldHint() {
+    /* @__PURE__ */
+    return jsx(HoverHint, {
+        text: "Editing this can move the workflow",
+        children: /* @__PURE__ */ jsx(Text, {
+            "aria-label": "Editing this can move the workflow",
+            muted: !0,
+            size: 1,
+            style: {
+                cursor: "help"
+            },
+            children: /* @__PURE__ */ jsx(BoltIcon, {})
+        })
+    });
+}
+
+function AdvanceHint({stageTitle: stageTitle2}) {
+    /* @__PURE__ */
+    return jsxs(Text, {
+        muted: !0,
+        size: 1,
+        children: [ "Committing will advance to ", stageTitle2 ]
+    });
+}
+
+function fieldArm({arm: arm, entry: entry, onUnset: onUnset, onAppend: onAppend, onPreview: onPreview, onDiscardPreview: onDiscardPreview}) {
+    const {field: field} = arm;
     return field.type === "actor" ? /* @__PURE__ */ jsx(ActorField, {
         ...arm,
         ...onUnset === void 0 ? {} : {
@@ -2496,7 +2538,45 @@ function EditableField({field: field, entry: entry, onSave: onSave, onUnset: onU
     }) : field.type === "boolean" && field.editable ? /* @__PURE__ */ jsx(BooleanSwitchField, {
         ...arm
     }) : /* @__PURE__ */ jsx(GenericField, {
-        ...arm
+        ...arm,
+        ...onPreview === void 0 ? {} : {
+            onPreview: onPreview
+        },
+        ...onDiscardPreview === void 0 ? {} : {
+            onDiscardPreview: onDiscardPreview
+        }
+    });
+}
+
+function EditableField({field: field, entry: entry, onSave: onSave, onUnset: onUnset, onAppend: onAppend, onPreview: onPreview, onDiscardPreview: onDiscardPreview, hot: hot = !1, advanceTo: advanceTo, hideLabel: hideLabel = !1}) {
+    const label = field.title ?? field.name, content = fieldArm({
+        arm: {
+            field: field,
+            label: label,
+            hideLabel: hideLabel,
+            onSave: onSave
+        },
+        entry: entry,
+        onUnset: onUnset,
+        onAppend: onAppend,
+        onPreview: onPreview,
+        onDiscardPreview: onDiscardPreview
+    }), decorated = field.editable;
+    /* @__PURE__ */
+    return jsxs(Stack, {
+        gap: 2,
+        children: [ 
+        /* @__PURE__ */ jsxs(Flex, {
+            align: "center",
+            gap: 2,
+            children: [ 
+            /* @__PURE__ */ jsx(Box, {
+                flex: 1,
+                children: content
+            }), decorated && hot ? /* @__PURE__ */ jsx(HotFieldHint, {}) : null ]
+        }), decorated && advanceTo !== void 0 ? /* @__PURE__ */ jsx(AdvanceHint, {
+            stageTitle: advanceTo
+        }) : null ]
     });
 }
 
@@ -3264,7 +3344,7 @@ function ActivityDetailDialog({entry: entry, activityName: activityName, breadcr
 }
 
 function DetailRows({detail: detail, entry: entry, instanceId: instanceId, activityName: activityName}) {
-    const {activityEval: activityEval, presentation: presentation, assignField: assignField} = detail;
+    const {activityEval: activityEval, presentation: presentation, assignFields: assignFields} = detail;
     /* @__PURE__ */
     return jsxs(Fragment, {
         children: [ 
@@ -3282,21 +3362,25 @@ function DetailRows({detail: detail, entry: entry, instanceId: instanceId, activ
                     children: ACTIVITY_STATUS_LABEL[activityEval.status]
                 }) ]
             })
-        }), detail.assigneeEntries.map(entry_ => /* @__PURE__ */ jsx(LabeledRow, {
-            label: entry_.title ?? "Assignees",
-            children: /* @__PURE__ */ jsxs(Flex, {
-                align: "center",
-                gap: 2,
-                wrap: "wrap",
-                children: [ 
-                /* @__PURE__ */ jsx(FieldValue, {
-                    field: entry_
-                }), assignField?.name === entry_.name ? /* @__PURE__ */ jsx(AssignActivityControl, {
-                    field: assignField,
-                    instanceId: instanceId
-                }) : null ]
-            })
-        }, entry_._key)), presentation.dates.map(d => /* @__PURE__ */ jsx(LabeledRow, {
+        }), detail.assigneeEntries.map(entry_ => {
+            const assignField = assignFields.get(entry_.name);
+            /* @__PURE__ */
+            return jsx(LabeledRow, {
+                label: entry_.title ?? "Assignees",
+                children: /* @__PURE__ */ jsxs(Flex, {
+                    align: "center",
+                    gap: 2,
+                    wrap: "wrap",
+                    children: [ 
+                    /* @__PURE__ */ jsx(FieldValue, {
+                        field: entry_
+                    }), assignField ? /* @__PURE__ */ jsx(AssignActivityControl, {
+                        field: assignField,
+                        instanceId: instanceId
+                    }) : null ]
+                })
+            }, entry_._key);
+        }), presentation.dates.map(d => /* @__PURE__ */ jsx(LabeledRow, {
             label: d.title ?? d.name,
             children: /* @__PURE__ */ jsx(BareValue, {
                 children: /* @__PURE__ */ jsx(Text, {
@@ -3459,10 +3543,6 @@ function useInstanceTitle(entry) {
     return instanceTitle(entry.instance, definition);
 }
 
-function stageTitle(instance, definition) {
-    return definition?.stages.find(s => s.name === instance.currentStage)?.title ?? instance.currentStage;
-}
-
 function InstanceStatusBadge({instance: instance, definition: definition}) {
     const state = terminalState(instance);
     return state === "aborted" ? /* @__PURE__ */ jsx(Badge, {
@@ -3476,7 +3556,7 @@ function InstanceStatusBadge({instance: instance, definition: definition}) {
     }) : /* @__PURE__ */ jsx(Badge, {
         fontSize: 1,
         tone: "primary",
-        children: stageTitle(instance, definition)
+        children: stageTitle(definition, instance.currentStage)
     });
 }
 
@@ -3516,7 +3596,6 @@ function StageGlyph(props) {
 }
 
 function CurrentStageIndicator({instance: instance, definition: definition}) {
-    const stage = definition?.stages.find(s => s.name === instance.currentStage);
     /* @__PURE__ */
     return jsxs(Flex, {
         align: "center",
@@ -3529,7 +3608,7 @@ function CurrentStageIndicator({instance: instance, definition: definition}) {
         /* @__PURE__ */ jsx(Text, {
             size: 1,
             weight: "medium",
-            children: stage?.title ?? instance.currentStage
+            children: stageTitle(definition, instance.currentStage)
         }) ]
     });
 }
@@ -3871,11 +3950,11 @@ function ActivityTab({instance: instance, definition: definition}) {
 }
 
 function makeTitleResolver(definition) {
-    const stages = definition?.stages ?? [], activities = stages.flatMap(s => s.activities ?? []);
+    const activities = (definition?.stages ?? []).flatMap(s => s.activities ?? []);
     return {
         action: (activityName, actionName) => activities.find(t => t.name === activityName)?.actions?.find(a => a.name === actionName)?.title ?? actionName,
         activity: name => activities.find(t => t.name === name)?.title ?? name,
-        stage: name => stages.find(s => s.name === name)?.title ?? name
+        stage: name => stageTitle(definition, name)
     };
 }
 
@@ -3955,8 +4034,7 @@ function InstanceMenuItem({entry: entry, selected: selected, onSelect: onSelect}
 
 function instanceNotice(entry) {
     const {instance: instance, committed: committed, evaluation: evaluation} = entry, state = terminalState(instance);
-    if (state !== "in-flight") /* @__PURE__ */
-    return jsx(Card, {
+    return state !== "in-flight" ? /* @__PURE__ */ jsx(Card, {
         border: !0,
         padding: 3,
         radius: 2,
@@ -3965,24 +4043,27 @@ function instanceNotice(entry) {
             size: 1,
             children: state === "aborted" ? "This workflow was aborted — no open tasks." : "This workflow is complete — no open tasks."
         })
-    });
-    const freshness = evaluationFreshness({
+    }) : evaluationFreshness({
         committed: committed,
         evaluation: evaluation
-    });
-    return freshness === "pending" ? /* @__PURE__ */ jsx(LoadingRow, {
+    }) === "pending" ? /* @__PURE__ */ jsx(LoadingRow, {
         label: "Evaluating…",
         padding: 4
-    }) : freshness === "stale" ? /* @__PURE__ */ jsx(LoadingRow, {
-        label: "Updating…",
-        padding: 4
     }) : null;
 }
 
+function evaluationSyncing(entry) {
+    const {instance: instance, committed: committed, evaluation: evaluation} = entry;
+    return terminalState(instance) === "in-flight" && evaluationFreshness({
+        committed: committed,
+        evaluation: evaluation
+    }) === "stale";
+}
+
 const NO_EDITABLES = /* @__PURE__ */ new Map;
 
 function InstanceStateTab({entry: entry}) {
-    const {instance: instance} = entry, definition = useDefinition(entry), stageTitleOf = name => definition?.stages.find(s => s.name === name)?.title ?? name, editables = (entry.evaluation?.editableFields ?? []).filter(f => f.scope !== "activity"), editablesByName = scope => new Map(editables.filter(f => f.scope === scope).map(f => [ f.name, f ])), anyState = instance.fields.length > 0 || instance.stages.some(s => s.fields.length > 0);
+    const {instance: instance} = entry, definition = useDefinition(entry), editables = (entry.evaluation?.editableFields ?? []).filter(f => f.scope !== "activity"), editablesByName = scope => new Map(editables.filter(f => f.scope === scope).map(f => [ f.name, f ])), anyState = instance.fields.length > 0 || instance.stages.some(s => s.fields.length > 0);
     /* @__PURE__ */
     return jsxs(Stack, {
         gap: 4,
@@ -4000,7 +4081,7 @@ function InstanceStateTab({entry: entry}) {
                 return jsx(ScopeGroup, {
                     editables: current ? editablesByName("stage") : NO_EDITABLES,
                     fields: st.fields ?? [],
-                    heading: `Stage · ${stageTitleOf(st.name)}${suffix}`,
+                    heading: `Stage · ${stageTitle(definition, st.name)}${suffix}`,
                     instanceId: instance._id
                 }, `s-${i}`);
             }) ]
@@ -4204,7 +4285,7 @@ function StageIndicator({entry: entry, definition: definition}) {
 }
 
 function InstancePanel({entry: entry, entries: entries, onSelect: onSelect}) {
-    const definition = useDefinition(entry), {instance: instance, ready: ready} = entry, identity = useAssignmentIdentity(), [assignedToMe, setAssignedToMe] = useState(!1), [openActivity, setOpenActivity] = useState(null), [segment, setSegment] = useState("state"), stageTitle2 = definition?.stages.find(s => s.name === instance.currentStage)?.title ?? instance.currentStage, notice = instanceNotice(entry);
+    const definition = useDefinition(entry), {instance: instance, ready: ready} = entry, identity = useAssignmentIdentity(), [assignedToMe, setAssignedToMe] = useState(!1), [openActivity, setOpenActivity] = useState(null), [segment, setSegment] = useState("state"), currentStageTitle = stageTitle(definition, instance.currentStage), notice = instanceNotice(entry), syncing = evaluationSyncing(entry);
     /* @__PURE__ */
     return jsxs(Flex, {
         direction: "column",
@@ -4231,8 +4312,18 @@ function InstancePanel({entry: entry, entries: entries, onSelect: onSelect}) {
                 }), 
                 /* @__PURE__ */ jsx(PendingWorkBadge, {
                     instance: instance
-                }), ready ? null : /* @__PURE__ */ jsx(Spinner, {
-                    muted: !0
+                }), 
+                /* @__PURE__ */ jsx(Flex, {
+                    align: "center",
+                    flex: "none",
+                    justify: "center",
+                    style: {
+                        width: 19,
+                        height: 19
+                    },
+                    children: !ready || syncing ? /* @__PURE__ */ jsx(Spinner, {
+                        muted: !0
+                    }) : null
                 }), 
                 /* @__PURE__ */ jsx(Box, {
                     flex: 1
@@ -4292,20 +4383,29 @@ function InstancePanel({entry: entry, entries: entries, onSelect: onSelect}) {
                         size: 1,
                         children: "Couldn’t load this workflow’s definition — stage and action titles fall back to raw names."
                     })
-                }), notice ?? /* @__PURE__ */ jsxs(Stack, {
-                    children: [ 
-                    /* @__PURE__ */ jsx(ActivitiesList, {
-                        assignedToMeOnly: assignedToMe,
-                        entry: entry,
-                        identity: identity,
-                        onOpenActivity: setOpenActivity,
-                        stageTitle: stageTitle2
-                    }), 
-                    /* @__PURE__ */ jsx(ActionItemsList, {
-                        assignedToMeOnly: assignedToMe,
-                        entry: entry,
-                        identity: identity
-                    }) ]
+                }), notice ?? 
+                /* @__PURE__ */ jsx(Box, {
+                    style: {
+                        opacity: syncing ? .5 : 1,
+                        pointerEvents: syncing ? "none" : void 0,
+                        transition: "opacity 150ms ease-in"
+                    },
+                    children: /* @__PURE__ */ jsxs(Stack, {
+                        "aria-busy": syncing,
+                        children: [ 
+                        /* @__PURE__ */ jsx(ActivitiesList, {
+                            assignedToMeOnly: assignedToMe,
+                            entry: entry,
+                            identity: identity,
+                            onOpenActivity: setOpenActivity,
+                            stageTitle: currentStageTitle
+                        }), 
+                        /* @__PURE__ */ jsx(ActionItemsList, {
+                            assignedToMeOnly: assignedToMe,
+                            entry: entry,
+                            identity: identity
+                        }) ]
+                    })
                 }), 
                 /* @__PURE__ */ jsx(Card, {
                     border: !0,
@@ -4348,7 +4448,7 @@ function InstancePanel({entry: entry, entries: entries, onSelect: onSelect}) {
             })
         }), openActivity ? /* @__PURE__ */ jsx(ActivityDetailDialog, {
             activityName: openActivity,
-            breadcrumb: [ instanceTitle(instance, definition), stageTitle2 ],
+            breadcrumb: [ instanceTitle(instance, definition), currentStageTitle ],
             entry: entry,
             onClose: () => setOpenActivity(null)
         }) : null ]
@@ -4409,7 +4509,7 @@ function useRefcountedIds() {
     };
 }
 
-const REPORT_KEYS = [ "evaluation", "ready", "guards", "fireAction", "editField" ];
+const REPORT_KEYS = [ "evaluation", "ready", "guards", "fireAction", "editField", "previewField", "discardFieldPreview" ];
 
 function sameReport(a, b) {
     return REPORT_KEYS.every(key => a[key] === b[key]);
@@ -4453,7 +4553,7 @@ class InstanceEvaluatorBoundary extends Component {
 }
 
 function InstanceEvaluator(props) {
-    const {engine: engine, instanceId: instanceId, grantsFromPath: grantsFromPath, onReport: onReport} = props, {evaluation: evaluation, ready: ready, guards: guards, fireAction: fireAction, editField: editField} = useWorkflowSession({
+    const {engine: engine, instanceId: instanceId, grantsFromPath: grantsFromPath, onReport: onReport} = props, {evaluation: evaluation, ready: ready, guards: guards, fireAction: fireAction, editField: editField, previewField: previewField, discardFieldPreview: discardFieldPreview} = useWorkflowSession({
         engine: engine,
         instanceId: instanceId,
         grantsFromPath: grantsFromPath
@@ -4464,9 +4564,11 @@ function InstanceEvaluator(props) {
             ready: ready,
             guards: guards,
             fireAction: fireAction,
-            editField: editField
+            editField: editField,
+            previewField: previewField,
+            discardFieldPreview: discardFieldPreview
         });
-    }, [ instanceId, evaluation, ready, guards, fireAction, editField, onReport ]), 
+    }, [ instanceId, evaluation, ready, guards, fireAction, editField, previewField, discardFieldPreview, onReport ]), 
     useEffect(() => () => onReport(instanceId, void 0), [ instanceId, onReport ]), null;
 }
 
@@ -4529,7 +4631,10 @@ function WorkflowProvider(props) {
         ...config.effectHandlers ? {
             effectHandlers: config.effectHandlers
         } : {}
-    }), grantsFromPath = `/projects/${projectId}/datasets/${workflowDataset}/acl`, {ids: registered, acquire: register, release: unregister} = useRefcountedIds(), {ids: requested, acquire: requestInstance, release: releaseInstance} = useRefcountedIds(), [seeded, setSeeded] = useState(/* @__PURE__ */ new Map), seedInstance = useCallback(instance => {
+    }), grantsFromPath = aclPathForResource({
+        type: "dataset",
+        id: `${projectId}.${workflowDataset}`
+    }), {ids: registered, acquire: register, release: unregister} = useRefcountedIds(), {ids: requested, acquire: requestInstance, release: releaseInstance} = useRefcountedIds(), [seeded, setSeeded] = useState(/* @__PURE__ */ new Map), seedInstance = useCallback(instance => {
         setSeeded(prev => new Map(prev).set(instance._id, instance));
     }, []), [startRequest, setStartRequest] = useState(void 0), openStartDialog = useCallback(r => setStartRequest(r), []), closeStartDialog = useCallback(() => setStartRequest(void 0), []), [reports, setReports] = useState(/* @__PURE__ */ new Map), onReport = useCallback((instanceId, report) => {
         setReports(prev => nextReports(prev, {
@@ -4559,7 +4664,11 @@ function WorkflowProvider(props) {
         const report = reportsRef.current.get(instanceId);
         return report ? report.editField(args).then(async res => (await drainCommitted(instanceId), 
         res)) : notReady(args);
-    }, [ drainCommitted ]), drainEffectsFor = useCallback(async instanceId => {
+    }, [ drainCommitted ]), previewFieldFor = useCallback((instanceId, args) => {
+        reportsRef.current.get(instanceId)?.previewField(args);
+    }, []), discardFieldPreviewFor = useCallback((instanceId, target) => {
+        reportsRef.current.get(instanceId)?.discardFieldPreview(target);
+    }, []), drainEffectsFor = useCallback(async instanceId => {
         await engine.drainEffects({
             instanceId: instanceId
         });
@@ -4629,6 +4738,8 @@ function WorkflowProvider(props) {
         loading: loading,
         fireActionFor: fireActionFor,
         editFieldFor: editFieldFor,
+        previewFieldFor: previewFieldFor,
+        discardFieldPreviewFor: discardFieldPreviewFor,
         drainEffectsFor: drainEffectsFor,
         completeEffectFor: completeEffectFor,
         engine: engine,
@@ -4636,7 +4747,7 @@ function WorkflowProvider(props) {
         mappings: config.mappings,
         mappingIssues: issues,
         effectHandlers: engine.effectHandlers
-    }), [ register, unregister, isDocResolved, byDocument, byInstance, requestInstance, releaseInstance, seedInstance, openStartDialog, closeStartDialog, startRequest, loading, fireActionFor, editFieldFor, drainEffectsFor, completeEffectFor, engine, binding, config.mappings, issues ]);
+    }), [ register, unregister, isDocResolved, byDocument, byInstance, requestInstance, releaseInstance, seedInstance, openStartDialog, closeStartDialog, startRequest, loading, fireActionFor, editFieldFor, previewFieldFor, discardFieldPreviewFor, drainEffectsFor, completeEffectFor, engine, binding, config.mappings, issues ]);
     /* @__PURE__ */
     return jsxs(WorkflowContext.Provider, {
         value: value,