sanity-plugin-workflow 1.0.0-beta.3 → 1.0.0-beta.5

package/lib/index.esm.js

@@ -1,15 +1,16 @@
 var _templateObject, _templateObject2, _templateObject3;
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-import { useCurrentUser, UserAvatar, useClient, useTimeAgo, TextWithTone, useSchema, useValidationStatus, Preview, useFormValue, defineType, defineField, definePlugin } from 'sanity';
-import { EditIcon, AddIcon, PublishIcon, ErrorOutlineIcon, WarningOutlineIcon, CheckmarkIcon, DragHandleIcon, UserIcon, ResetIcon, InfoOutlineIcon, SplitVerticalIcon, UsersIcon, ArrowRightIcon, ArrowLeftIcon } from '@sanity/icons';
+import { useClient, useCurrentUser, useValidationStatus, useSchema, Preview, useFormValue, defineType, defineField, UserAvatar, useTimeAgo, TextWithTone, definePlugin } from 'sanity';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useMemo, useEffect, useCallback, useState } from 'react';
-import { Button, Flex, Box, Text, useToast, useClickOutside, Popover, Grid, Tooltip, useTheme, Card, Stack, MenuButton, Menu, Badge, Container, Spinner } from '@sanity/ui';
+import { UsersIcon, SplitVerticalIcon, CheckmarkIcon, ArrowRightIcon, ArrowLeftIcon, EditIcon, AddIcon, PublishIcon, ErrorOutlineIcon, WarningOutlineIcon, DragHandleIcon, UserIcon, ResetIcon, InfoOutlineIcon } from '@sanity/icons';
+import React, { useState, useCallback, useEffect, useMemo, useRef } from 'react';
 import { UserSelectMenu, useListeningQuery, useProjectUsers, Feedback } from 'sanity-plugin-utils';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import { useToast, Button, Spinner, Card, Flex, Box, Text, useClickOutside, Popover, Grid, Tooltip, useTheme, Stack, MenuButton, Menu, Badge, Container } from '@sanity/ui';
+import { LexoRank } from 'lexorank';
 import { useRouter } from 'sanity/router';
+import { Draggable, DragDropContext, Droppable } from '@hello-pangea/dnd';
 import groq from 'groq';
-import { LexoRank } from 'lexorank';
+import { useVirtualizer } from '@tanstack/react-virtual';
 import styled, { css } from 'styled-components';
 import { AnimatePresence, motion } from 'framer-motion';
 function defineStates(states) {
@@ -35,73 +36,10 @@ const DEFAULT_CONFIG = {
     title: "Approved",
     color: "success",
     roles: ["administrator"],
-    requireAssignment: true,
-    transitions: ["changesRequested"]
+    transitions: ["changesRequested"],
+    requireAssignment: true
   }])
 };
-function EditButton(props) {
-  const {
-    id,
-    type,
-    disabled = false
-  } = props;
-  const {
-    navigateIntent
-  } = useRouter();
-  return /* @__PURE__ */jsx(Button, {
-    onClick: () => navigateIntent("edit", {
-      id,
-      type
-    }),
-    mode: "ghost",
-    fontSize: 1,
-    padding: 2,
-    tabIndex: -1,
-    icon: EditIcon,
-    text: "Edit",
-    disabled
-  });
-}
-function AvatarGroup(props) {
-  const currentUser = useCurrentUser();
-  const {
-    users,
-    max = 4
-  } = props;
-  const len = users == null ? void 0 : users.length;
-  const {
-    me,
-    visibleUsers
-  } = React.useMemo(() => {
-    return {
-      me: (currentUser == null ? void 0 : currentUser.id) ? users.find(u => u.id === currentUser.id) : void 0,
-      visibleUsers: users.filter(u => u.id !== (currentUser == null ? void 0 : currentUser.id)).slice(0, max - 1)
-    };
-  }, [users, max, currentUser]);
-  if (!(users == null ? void 0 : users.length)) {
-    return null;
-  }
-  return /* @__PURE__ */jsxs(Flex, {
-    align: "center",
-    gap: 1,
-    children: [me ? /* @__PURE__ */jsx(UserAvatar, {
-      user: me
-    }) : null, visibleUsers.map(user => /* @__PURE__ */jsx(Box, {
-      style: {
-        marginRight: -8
-      },
-      children: /* @__PURE__ */jsx(UserAvatar, {
-        user
-      })
-    }, user.id)), len > max && /* @__PURE__ */jsx(Box, {
-      paddingLeft: 2,
-      children: /* @__PURE__ */jsxs(Text, {
-        size: 1,
-        children: ["+", len - max]
-      })
-    })]
-  });
-}
 function UserAssignment(props) {
   const {
     assignees,
@@ -184,1463 +122,1668 @@ function UserAssignment(props) {
     onRemove: removeAssignee
   });
 }
-function UserDisplay(props) {
-  const {
-    assignees,
-    userList,
-    documentId,
-    disabled = false
-  } = props;
-  const [button] = React.useState(null);
-  const [popover, setPopover] = React.useState(null);
-  const [isOpen, setIsOpen] = React.useState(false);
-  const close = React.useCallback(() => setIsOpen(false), []);
-  const open = React.useCallback(() => setIsOpen(true), []);
-  useClickOutside(close, [button, popover]);
-  return /* @__PURE__ */jsx(Popover, {
-    ref: setPopover,
-    content: /* @__PURE__ */jsx(UserAssignment, {
-      userList,
-      assignees,
-      documentId
-    }),
-    portal: true,
-    open: isOpen,
-    children: !assignees || assignees.length === 0 ? /* @__PURE__ */jsx(Button, {
-      onClick: open,
-      fontSize: 1,
-      padding: 2,
-      tabIndex: -1,
-      icon: AddIcon,
-      text: "Assign",
-      tone: "positive",
-      mode: "ghost",
-      disabled
-    }) : /* @__PURE__ */jsx(Grid, {
-      children: /* @__PURE__ */jsx(Button, {
-        onClick: open,
-        padding: 0,
-        mode: "bleed",
-        disabled,
-        children: /* @__PURE__ */jsx(AvatarGroup, {
-          users: userList.filter(u => assignees.includes(u.id))
-        })
-      })
-    })
-  });
-}
-function TimeAgo(_ref) {
-  let {
-    time
-  } = _ref;
-  const timeAgo = useTimeAgo(time);
-  return /* @__PURE__ */jsxs("span", {
-    title: timeAgo,
-    children: [timeAgo, " ago"]
-  });
-}
-function DraftStatus(props) {
+function useWorkflowMetadata(id, states) {
   const {
-    document
-  } = props;
-  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
-  return /* @__PURE__ */jsx(Tooltip, {
-    portal: true,
-    content: /* @__PURE__ */jsx(Box, {
-      padding: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        children: document ? /* @__PURE__ */jsxs(Fragment, {
-          children: ["Edited ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
-            time: updatedAt
-          })]
-        }) : /* @__PURE__ */jsx(Fragment, {
-          children: "No unpublished edits"
-        })
-      })
-    }),
-    children: /* @__PURE__ */jsx(TextWithTone, {
-      tone: "caution",
-      dimmed: !document,
-      muted: !document,
-      size: 1,
-      children: /* @__PURE__ */jsx(EditIcon, {})
-    })
+    data: metadata,
+    loading,
+    error
+  } = useListeningQuery("*[_type == \"workflow.metadata\" && documentId == $id][0]", {
+    params: {
+      id
+    }
   });
+  if (metadata == null ? void 0 : metadata.state) {
+    return {
+      data: {
+        metadata,
+        state: states.find(s => s.id === metadata.state)
+      },
+      loading,
+      error
+    };
+  }
+  return {
+    data: {},
+    loading,
+    error
+  };
 }
-function PublishedStatus(props) {
+function AssignWorkflow(props, states) {
+  var _a, _b;
   const {
-    document
+    id
   } = props;
-  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
-  return /* @__PURE__ */jsx(Tooltip, {
-    portal: true,
-    content: /* @__PURE__ */jsx(Box, {
-      padding: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        children: document ? /* @__PURE__ */jsxs(Fragment, {
-          children: ["Published ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
-            time: updatedAt
-          })]
-        }) : /* @__PURE__ */jsx(Fragment, {
-          children: "Not published"
-        })
-      })
-    }),
-    children: /* @__PURE__ */jsx(TextWithTone, {
-      tone: "positive",
-      dimmed: !document,
-      muted: !document,
-      size: 1,
-      children: /* @__PURE__ */jsx(PublishIcon, {})
-    })
+  const [isDialogOpen, setDialogOpen] = useState(false);
+  const userList = useProjectUsers({
+    apiVersion: API_VERSION
   });
-}
-function ValidationStatus(props) {
   const {
-    validation = []
-  } = props;
-  if (!validation.length) {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(id, states);
+  if (error) {
+    console.error(error);
+  }
+  if (!(data == null ? void 0 : data.metadata)) {
     return null;
   }
-  const hasError = validation.some(item => item.level === "error");
-  return /* @__PURE__ */jsx(Tooltip, {
-    portal: true,
-    content: /* @__PURE__ */jsx(Box, {
-      padding: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        children: validation.length === 1 ? "1 validation issue" : "".concat(validation.length, " validation issues")
+  return {
+    icon: UsersIcon,
+    type: "dialog",
+    disabled: !data || loading || error,
+    label: "Assign",
+    title: data ? null : "Document is not in Workflow",
+    dialog: isDialogOpen && {
+      type: "popover",
+      onClose: () => {
+        setDialogOpen(false);
+      },
+      content: /* @__PURE__ */jsx(UserAssignment, {
+        userList,
+        assignees: (_b = (_a = data.metadata) == null ? void 0 : _a.assignees) != null ? _b : [],
+        documentId: id
       })
-    }),
-    children: /* @__PURE__ */jsx(TextWithTone, {
-      tone: hasError ? "critical" : "caution",
-      size: 1,
-      children: hasError ? /* @__PURE__ */jsx(ErrorOutlineIcon, {}) : /* @__PURE__ */jsx(WarningOutlineIcon, {})
-    })
-  });
+    },
+    onHandle: () => {
+      setDialogOpen(true);
+    }
+  };
 }
-function CompleteButton(props) {
+function BeginWorkflow(props, states) {
   const {
-    documentId,
-    disabled = false
+    id,
+    draft
   } = props;
-  const client = useClient({
-    apiVersion: API_VERSION
-  });
-  const toast = useToast();
-  const handleComplete = React.useCallback(id => {
-    client.delete("workflow-metadata.".concat(id)).then(() => {
+  const {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(id, states);
+  const client = useClient({
+    apiVersion: API_VERSION
+  });
+  const toast = useToast();
+  const [beginning, setBeginning] = useState(false);
+  const [complete, setComplete] = useState(false);
+  if (error) {
+    console.error(error);
+  }
+  const handle = useCallback(async () => {
+    setBeginning(true);
+    const lowestOrderFirstState = await client.fetch("*[_type == \"workflow.metadata\" && state == $state]|order(orderRank)[0].orderRank", {
+      state: states[0].id
+    });
+    client.createIfNotExists({
+      _id: "workflow-metadata.".concat(id),
+      _type: "workflow.metadata",
+      documentId: id,
+      state: states[0].id,
+      orderRank: lowestOrderFirstState ? LexoRank.parse(lowestOrderFirstState).genNext().toString() : LexoRank.min().toString()
+    },
+    // Faster!
+    {
+      visibility: "async"
+    }).then(() => {
       toast.push({
         status: "success",
-        title: "Workflow completed",
-        description: id
-      });
-    }).catch(() => {
-      toast.push({
-        status: "error",
-        title: "Could not complete Workflow",
-        description: id
+        title: "Workflow started",
+        description: "Document is now \"".concat(states[0].title, "\"")
       });
+      setBeginning(false);
+      setComplete(true);
     });
-  }, [client, toast]);
-  return /* @__PURE__ */jsx(Button, {
-    onClick: () => handleComplete(documentId),
-    text: "Complete",
-    icon: CheckmarkIcon,
-    tone: "positive",
-    mode: "ghost",
-    fontSize: 1,
-    padding: 2,
-    tabIndex: -1,
-    disabled
-  });
+  }, [id, states, client, toast]);
+  if (!draft || complete || data.metadata) {
+    return null;
+  }
+  return {
+    icon: SplitVerticalIcon,
+    type: "dialog",
+    disabled: (data == null ? void 0 : data.metadata) || loading || error || beginning || complete,
+    label: beginning ? "Beginning..." : "Begin Workflow",
+    onHandle: () => {
+      handle();
+    }
+  };
 }
-function DocumentCard(props) {
+function CompleteWorkflow(props, states) {
   var _a;
   const {
-    isDragDisabled,
-    userRoleCanDrop,
-    isDragging,
-    item,
-    states,
-    toggleInvalidDocumentId,
-    userList
+    id
   } = props;
   const {
-    assignees = [],
-    documentId
-  } = (_a = item._metadata) != null ? _a : {};
-  const schema = useSchema();
-  const isDarkMode = useTheme().sanity.color.dark;
-  const defaultCardTone = isDarkMode ? "transparent" : "default";
-  const {
-    validation = [],
-    isValidating
-  } = useValidationStatus(documentId != null ? documentId : "", item._type);
-  const cardTone = useMemo(() => {
-    let tone = defaultCardTone;
-    if (!userRoleCanDrop) return isDarkMode ? "default" : "transparent";
-    if (!documentId) return tone;
-    if (isDragging) tone = "positive";
-    if (!isValidating && validation.length > 0) {
-      if (validation.some(v => v.level === "error")) {
-        tone = "critical";
-      } else {
-        tone = "caution";
-      }
-    }
-    return tone;
-  }, [isDarkMode, userRoleCanDrop, defaultCardTone, documentId, isDragging, validation, isValidating]);
-  useEffect(() => {
-    if (!isValidating && validation.length > 0) {
-      if (validation.some(v => v.level === "error")) {
-        toggleInvalidDocumentId(documentId, "ADD");
-      } else {
-        toggleInvalidDocumentId(documentId, "REMOVE");
-      }
-    } else {
-      toggleInvalidDocumentId(documentId, "REMOVE");
-    }
-  }, [documentId, isValidating, toggleInvalidDocumentId, validation]);
-  const hasError = useMemo(() => isValidating ? false : validation.some(v => v.level === "error"), [isValidating, validation]);
-  const isLastState = useMemo(() => {
-    var _a2;
-    return states[states.length - 1].id === ((_a2 = item._metadata) == null ? void 0 : _a2.state);
-  }, [states, item._metadata.state]);
-  return /* @__PURE__ */jsx(Box, {
-    paddingBottom: 3,
-    paddingX: 3,
-    children: /* @__PURE__ */jsx(Card, {
-      radius: 2,
-      shadow: isDragging ? 3 : 1,
-      tone: cardTone,
-      children: /* @__PURE__ */jsxs(Stack, {
-        children: [/* @__PURE__ */jsx(Card, {
-          borderBottom: true,
-          radius: 2,
-          padding: 3,
-          paddingLeft: 2,
-          tone: cardTone,
-          style: {
-            pointerEvents: "none"
-          },
-          children: /* @__PURE__ */jsxs(Flex, {
-            align: "center",
-            justify: "space-between",
-            gap: 1,
-            children: [/* @__PURE__ */jsx(Box, {
-              flex: 1,
-              children: /* @__PURE__ */jsx(Preview, {
-                layout: "default",
-                value: item,
-                schemaType: schema.get(item._type)
-              })
-            }), /* @__PURE__ */jsx(Box, {
-              style: {
-                flexShrink: 0
-              },
-              children: hasError || isDragDisabled ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
-            })]
-          })
-        }), /* @__PURE__ */jsx(Card, {
-          padding: 2,
-          radius: 2,
-          tone: "inherit",
-          children: /* @__PURE__ */jsxs(Flex, {
-            align: "center",
-            justify: "space-between",
-            gap: 3,
-            children: [/* @__PURE__ */jsx(Box, {
-              flex: 1,
-              children: documentId && /* @__PURE__ */jsx(UserDisplay, {
-                userList,
-                assignees,
-                documentId,
-                disabled: !userRoleCanDrop
-              })
-            }), validation.length > 0 ? /* @__PURE__ */jsx(ValidationStatus, {
-              validation
-            }) : null, /* @__PURE__ */jsx(DraftStatus, {
-              document: item
-            }), /* @__PURE__ */jsx(PublishedStatus, {
-              document: item
-            }), /* @__PURE__ */jsx(EditButton, {
-              id: item._id,
-              type: item._type,
-              disabled: !userRoleCanDrop
-            }), isLastState ? /* @__PURE__ */jsx(CompleteButton, {
-              documentId,
-              disabled: !userRoleCanDrop
-            }) : null]
-          })
-        })]
-      })
-    })
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(id, states);
+  const client = useClient({
+    apiVersion: API_VERSION
   });
+  if (error) {
+    console.error(error);
+  }
+  const handle = useCallback(() => {
+    client.delete("workflow-metadata.".concat(id));
+  }, [id, client]);
+  const isLastState = ((_a = data == null ? void 0 : data.state) == null ? void 0 : _a.id) === states[states.length - 1].id;
+  if (!data.metadata) {
+    return null;
+  }
+  return {
+    icon: CheckmarkIcon,
+    type: "dialog",
+    disabled: loading || error || !isLastState,
+    label: "Complete Workflow",
+    title: isLastState ? "Removes the document from the Workflow process" : "Cannot remove from workflow until in the last state",
+    onHandle: () => {
+      handle();
+    },
+    color: "positive"
+  };
 }
-const QUERY = groq(_templateObject || (_templateObject = _taggedTemplateLiteral(["*[_type == \"workflow.metadata\"]|order(orderRank){\n  \"_metadata\": {\n    _rev,\n    assignees,\n    documentId,\n    state,\n    orderRank\n  },\n  ...(\n    *[_id in [^.documentId, \"drafts.\" + ^.documentId]]|order(_updatedAt)[0]{ \n      _id, \n      _type, \n      _rev, \n      _updatedAt \n    }\n  )\n}[defined(_id)]"])));
-function useWorkflowDocuments(schemaTypes) {
-  const toast = useToast();
+function arraysContainMatchingString(one, two) {
+  return one.some(item => two.includes(item));
+}
+function UpdateWorkflow(props, allStates, actionState) {
+  var _a, _b, _c, _d;
+  const {
+    id,
+    type
+  } = props;
+  const user = useCurrentUser();
   const client = useClient({
     apiVersion: API_VERSION
   });
+  const toast = useToast();
+  const currentUser = useCurrentUser();
   const {
     data,
     loading,
     error
-  } = useListeningQuery(QUERY, {
-    params: {
-      schemaTypes
-    },
-    initialValue: []
-  });
-  const [localDocuments, setLocalDocuments] = React.useState([]);
-  React.useEffect(() => {
-    if (data) {
-      setLocalDocuments(data);
-    }
-  }, [data]);
-  const move = React.useCallback((draggedId, destination, states, newOrder) => {
-    const currentLocalData = localDocuments;
-    const newLocalDocuments = localDocuments.map(item => {
-      var _a;
-      if (((_a = item == null ? void 0 : item._metadata) == null ? void 0 : _a.documentId) === draggedId) {
-        return {
-          ...item,
-          _metadata: {
-            ...item._metadata,
-            state: destination.droppableId,
-            orderRank: newOrder,
-            // This value won't be written to the document
-            // It's done so that un/publish operations don't happen twice
-            // Because a moved document's card will update once optimistically
-            // and then again when the document is updated
-            optimistic: true
-          }
-        };
-      }
-      return item;
-    });
-    setLocalDocuments(newLocalDocuments);
-    const newStateId = destination.droppableId;
-    const newState = states.find(s => s.id === newStateId);
-    const document = localDocuments.find(d => {
-      var _a;
-      return ((_a = d == null ? void 0 : d._metadata) == null ? void 0 : _a.documentId) === draggedId;
-    });
-    if (!(newState == null ? void 0 : newState.id)) {
+  } = useWorkflowMetadata(id, allStates);
+  const {
+    state: currentState
+  } = data;
+  const {
+    assignees = []
+  } = (_a = data == null ? void 0 : data.metadata) != null ? _a : {};
+  const {
+    validation,
+    isValidating
+  } = useValidationStatus(id, type);
+  const hasValidationErrors = (currentState == null ? void 0 : currentState.requireValidation) && !isValidating && (validation == null ? void 0 : validation.length) > 0 && validation.find(v => v.level === "error");
+  if (error) {
+    console.error(error);
+  }
+  const onHandle = (documentId, newState) => {
+    client.patch("workflow-metadata.".concat(documentId)).set({
+      state: newState.id
+    }).commit().then(() => {
+      props.onComplete();
       toast.push({
-        title: "Could not find target state ".concat(newStateId),
-        status: "error"
+        status: "success",
+        title: "Document state now \"".concat(newState.title, "\"")
       });
-      return null;
-    }
-    if (!document) {
+    }).catch(err => {
+      props.onComplete();
+      console.error(err);
       toast.push({
-        title: "Could not find dragged document in data",
-        status: "error"
-      });
-      return null;
-    }
-    const {
-      _id,
-      _type
-    } = document;
-    const {
-      _rev,
-      documentId
-    } = document._metadata || {};
-    client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
-      state: newStateId,
-      orderRank: newOrder
-    }).commit().then(() => {
-      var _a;
-      return toast.push({
-        title: "Moved to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
-        status: "success"
-      });
-    }).catch(() => {
-      var _a;
-      setLocalDocuments(currentLocalData);
-      return toast.push({
-        title: "Failed to move to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
-        status: "error"
+        status: "error",
+        title: "Document state update failed"
       });
     });
+  };
+  if (!data.metadata || currentState && currentState.id === actionState.id) {
+    return null;
+  }
+  const currentStateIndex = allStates.findIndex(s => s.id === (currentState == null ? void 0 : currentState.id));
+  const actionStateIndex = allStates.findIndex(s => s.id === actionState.id);
+  const direction = actionStateIndex > currentStateIndex ? "promote" : "demote";
+  const DirectionIcon = direction === "promote" ? ArrowRightIcon : ArrowLeftIcon;
+  const directionLabel = direction === "promote" ? "Promote" : "Demote";
+  const userRoleCanUpdateState = ((_b = user == null ? void 0 : user.roles) == null ? void 0 : _b.length) && ((_c = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _c.length) ?
+  // If the Action state is limited to specific roles
+  // check that the current user has one of those roles
+  arraysContainMatchingString(user.roles.map(r => r.name), actionState.roles) :
+  // No roles specified on the next state, so anyone can update
+  ((_d = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _d.length) !== 0;
+  const actionStateIsAValidTransition = (currentState == null ? void 0 : currentState.id) && currentState.transitions.length ?
+  // If the Current State limits transitions to specific States
+  // Check that the Action State is in Current State's transitions array
+  currentState.transitions.includes(actionState.id) :
+  // Otherwise this isn't a problem
+  true;
+  const userAssignmentCanUpdateState = actionState.requireAssignment ?
+  // If the Action State requires assigned users
+  // Check the current user ID is in the assignees array
+  currentUser && assignees.length && assignees.includes(currentUser.id) :
+  // Otherwise this isn't a problem
+  true;
+  let title = "".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  if (!userRoleCanUpdateState) {
+    title = "Your User role cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  } else if (!actionStateIsAValidTransition) {
+    title = "You cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\" from \"").concat(currentState == null ? void 0 : currentState.title, "\"");
+  } else if (!userAssignmentCanUpdateState) {
+    title = "You must be assigned to the document to ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  } else if ((currentState == null ? void 0 : currentState.requireValidation) && isValidating) {
+    title = "Document is validating, cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  } else if (hasValidationErrors) {
+    title = "Document has validation errors, cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  }
+  return {
+    icon: DirectionIcon,
+    disabled: loading || error || (currentState == null ? void 0 : currentState.requireValidation) && isValidating || hasValidationErrors || !currentState || !userRoleCanUpdateState || !actionStateIsAValidTransition || !userAssignmentCanUpdateState,
+    title,
+    label: actionState.title,
+    onHandle: () => onHandle(id, actionState)
+  };
+}
+function AssigneesBadge(states, documentId, currentUser) {
+  var _a;
+  const {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(documentId, states);
+  const {
+    metadata
+  } = data;
+  const userList = useProjectUsers({
+    apiVersion: API_VERSION
+  });
+  if (loading || error || !metadata) {
+    if (error) {
+      console.error(error);
+    }
+    return null;
+  }
+  if (!((_a = metadata == null ? void 0 : metadata.assignees) == null ? void 0 : _a.length)) {
     return {
-      _id,
-      _type,
-      documentId,
-      state: newState
+      label: "Unassigned"
     };
-  }, [client, toast, localDocuments]);
+  }
+  const {
+    assignees
+  } = metadata != null ? metadata : [];
+  const hasMe = currentUser ? assignees.some(assignee => assignee === currentUser.id) : false;
+  const assigneesCount = hasMe ? assignees.length - 1 : assignees.length;
+  const assigneeUsers = userList.filter(user => assignees.includes(user.id));
+  const title = assigneeUsers.map(user => user.displayName).join(", ");
+  let label;
+  if (hasMe && assigneesCount === 0) {
+    label = "Assigned to Me";
+  } else if (hasMe && assigneesCount > 0) {
+    label = "Me and ".concat(assigneesCount, " ").concat(assigneesCount === 1 ? "other" : "others");
+  } else {
+    label = "".concat(assigneesCount, " assigned");
+  }
   return {
-    workflowData: {
-      data: localDocuments,
-      loading,
-      error
-    },
-    operations: {
-      move
+    label,
+    title,
+    color: "primary"
+  };
+}
+function StateBadge(states, documentId) {
+  const {
+    data,
+    loading,
+    error
+  } = useWorkflowMetadata(documentId, states);
+  const {
+    state
+  } = data;
+  if (loading || error) {
+    if (error) {
+      console.error(error);
     }
+    return null;
+  }
+  if (!state) {
+    return null;
+  }
+  return {
+    label: state.title,
+    // title: state.title,
+    color: state == null ? void 0 : state.color
   };
 }
-const StyledFloatingCard = styled(Card)(() => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    z-index: 1000;\n  "]))));
-function FloatingCard(_ref2) {
-  let {
-    children
-  } = _ref2;
-  const childrenHaveValues = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
-  return /* @__PURE__ */jsx(AnimatePresence, {
-    children: childrenHaveValues ? /* @__PURE__ */jsx(motion.div, {
-      initial: {
-        opacity: 0
-      },
-      animate: {
-        opacity: 1
-      },
-      exit: {
-        opacity: 0
-      },
-      children: /* @__PURE__ */jsx(StyledFloatingCard, {
-        shadow: 3,
-        padding: 3,
-        margin: 3,
-        radius: 3,
-        children: /* @__PURE__ */jsx(Grid, {
-          gap: 2,
-          children
-        })
-      })
-    }, "floater") : null
+function EditButton(props) {
+  const {
+    id,
+    type,
+    disabled = false
+  } = props;
+  const {
+    navigateIntent
+  } = useRouter();
+  return /* @__PURE__ */jsx(Button, {
+    onClick: () => navigateIntent("edit", {
+      id,
+      type
+    }),
+    mode: "ghost",
+    fontSize: 1,
+    padding: 2,
+    tabIndex: -1,
+    icon: EditIcon,
+    text: "Edit",
+    disabled
   });
 }
-function Validators(_ref3) {
-  let {
+function Field(props) {
+  var _a;
+  const schema = useSchema();
+  const {
     data,
-    userList,
-    states
-  } = _ref3;
-  const client = useClient({
-    apiVersion: API_VERSION
+    loading,
+    error
+  } = useListeningQuery("*[_id in [$id, $draftId]]|order(_updatedAt)[0]", {
+    params: {
+      id: String(props.value),
+      draftId: "drafts.".concat(String(props.value))
+    }
   });
-  const toast = useToast();
-  const documentsWithoutValidMetadataIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
-    var _a;
-    const {
-      documentId,
-      state
-    } = (_a = cur._metadata) != null ? _a : {};
-    const stateExists = states.find(s => s.id === state);
-    return !stateExists && documentId ? [...acc, documentId] : acc;
-  }, []) : [];
-  const documentsWithInvalidUserIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
-    var _a;
-    const {
-      documentId,
-      assignees
-    } = (_a = cur._metadata) != null ? _a : {};
-    const allAssigneesExist = (assignees == null ? void 0 : assignees.length) ? assignees == null ? void 0 : assignees.every(a => userList.find(u => u.id === a)) : true;
-    return !allAssigneesExist && documentId ? [...acc, documentId] : acc;
-  }, []) : [];
-  const documentsWithoutOrderIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
-    var _a;
-    const {
-      documentId,
-      orderRank
-    } = (_a = cur._metadata) != null ? _a : {};
-    return !orderRank && documentId ? [...acc, documentId] : acc;
-  }, []) : [];
-  const correctDocuments = React.useCallback(async ids => {
-    toast.push({
-      title: "Correcting...",
-      status: "info"
-    });
-    const tx = ids.reduce((item, documentId) => {
-      return item.patch("workflow-metadata.".concat(documentId), {
-        set: {
-          state: states[0].id
-        }
-      });
-    }, client.transaction());
-    await tx.commit();
-    toast.push({
-      title: "Corrected ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
-      status: "success"
-    });
-  }, [client, states, toast]);
-  const removeUsersFromDocuments = React.useCallback(async ids => {
-    toast.push({
-      title: "Removing users...",
-      status: "info"
+  if (loading) {
+    return /* @__PURE__ */jsx(Spinner, {});
+  }
+  const schemaType = schema.get((_a = data == null ? void 0 : data._type) != null ? _a : "");
+  if (error || !(data == null ? void 0 : data._type) || !schemaType) {
+    return /* @__PURE__ */jsx(Feedback, {
+      tone: "critical",
+      title: "Error with query"
     });
-    const tx = ids.reduce((item, documentId) => {
-      var _a, _b;
-      const {
-        assignees
-      } = (_b = (_a = data.find(d => d._id === documentId)) == null ? void 0 : _a._metadata) != null ? _b : {};
-      const validAssignees = (assignees == null ? void 0 : assignees.length) ?
-      // eslint-disable-next-line max-nested-callbacks
-      assignees.filter(a => {
-        var _a2;
-        return (_a2 = userList.find(u => u.id === a)) == null ? void 0 : _a2.id;
-      }) : [];
-      return item.patch("workflow-metadata.".concat(documentId), {
-        set: {
-          assignees: validAssignees
-        }
-      });
-    }, client.transaction());
-    await tx.commit();
-    toast.push({
-      title: "Corrected ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
-      status: "success"
-    });
-  }, [client, data, toast, userList]);
-  const addOrderToDocuments = React.useCallback(async ids => {
-    var _a, _b;
-    toast.push({
-      title: "Adding ordering...",
-      status: "info"
-    });
-    const firstOrder = (_b = (_a = data[0]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.orderRank;
-    let newLexo = firstOrder && data.length !== ids.length ? LexoRank.parse(firstOrder) : LexoRank.min();
-    const tx = client.transaction();
-    for (let index = 0; index < ids.length; index += 1) {
-      newLexo = newLexo.genNext().genNext();
-      tx.patch("workflow-metadata.".concat(ids[index]), {
-        set: {
-          orderRank: newLexo.toString()
-        }
-      });
-    }
-    await tx.commit();
-    toast.push({
-      title: "Added order to ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
-      status: "success"
-    });
-  }, [data, client, toast]);
-  return /* @__PURE__ */jsxs(FloatingCard, {
-    children: [documentsWithoutValidMetadataIds.length > 0 ? /* @__PURE__ */jsx(Button, {
-      tone: "caution",
-      onClick: () => correctDocuments(documentsWithoutValidMetadataIds),
-      text: documentsWithoutValidMetadataIds.length === 1 ? "Correct 1 Document State" : "Correct ".concat(documentsWithoutValidMetadataIds.length, " Document States")
-    }) : null, documentsWithInvalidUserIds.length > 0 ? /* @__PURE__ */jsx(Button, {
-      tone: "caution",
-      onClick: () => removeUsersFromDocuments(documentsWithInvalidUserIds),
-      text: documentsWithInvalidUserIds.length === 1 ? "Remove Invalid Users from 1 Document" : "Remove Invalid Users from ".concat(documentsWithInvalidUserIds.length, " Documents")
-    }) : null, documentsWithoutOrderIds.length > 0 ? /* @__PURE__ */jsx(Button, {
-      tone: "caution",
-      onClick: () => addOrderToDocuments(documentsWithoutOrderIds),
-      text: documentsWithoutOrderIds.length === 1 ? "Set Order for 1 Document" : "Set Order for ".concat(documentsWithoutOrderIds.length, " Documents")
-    }) : null]
-  });
-}
-function Filters(props) {
-  const {
-    uniqueAssignedUsers = [],
-    selectedUserIds,
-    schemaTypes,
-    selectedSchemaTypes,
-    toggleSelectedUser,
-    resetSelectedUsers,
-    toggleSelectedSchemaType
-  } = props;
-  const currentUser = useCurrentUser();
-  const schema = useSchema();
-  const onAdd = useCallback(id => {
-    if (!selectedUserIds.includes(id)) {
-      toggleSelectedUser(id);
-    }
-  }, [selectedUserIds, toggleSelectedUser]);
-  const onRemove = useCallback(id => {
-    if (selectedUserIds.includes(id)) {
-      toggleSelectedUser(id);
-    }
-  }, [selectedUserIds, toggleSelectedUser]);
-  const onClear = useCallback(() => {
-    resetSelectedUsers();
-  }, [resetSelectedUsers]);
-  if (uniqueAssignedUsers.length === 0 && schemaTypes.length < 2) {
-    return null;
   }
-  const meInUniqueAssignees = (currentUser == null ? void 0 : currentUser.id) && uniqueAssignedUsers.find(u => u.id === currentUser.id);
-  const uniqueAssigneesNotMe = uniqueAssignedUsers.filter(u => u.id !== (currentUser == null ? void 0 : currentUser.id));
   return /* @__PURE__ */jsx(Card, {
-    tone: "primary",
+    border: true,
     padding: 2,
-    borderBottom: true,
-    style: {
-      overflowX: "hidden"
-    },
     children: /* @__PURE__ */jsxs(Flex, {
       align: "center",
-      children: [/* @__PURE__ */jsx(Flex, {
-        align: "center",
-        gap: 1,
-        flex: 1,
-        children: uniqueAssignedUsers.length > 5 ? /* @__PURE__ */jsx(Card, {
-          tone: "default",
-          children: /* @__PURE__ */jsx(MenuButton, {
-            button: /* @__PURE__ */jsx(Button, {
-              text: "Filter Assignees",
-              tone: "primary",
-              icon: UserIcon
-            }),
-            id: "user-filters",
-            menu: /* @__PURE__ */jsx(Menu, {
-              children: /* @__PURE__ */jsx(UserSelectMenu, {
-                value: selectedUserIds,
-                userList: uniqueAssignedUsers,
-                onAdd,
-                onRemove,
-                onClear,
-                labels: {
-                  addMe: "Filter mine",
-                  removeMe: "Clear mine",
-                  clear: "Clear filters"
-                }
-              })
-            }),
-            popover: {
-              portal: true
-            }
-          })
-        }) : /* @__PURE__ */jsxs(Fragment, {
-          children: [meInUniqueAssignees ? /* @__PURE__ */jsxs(Fragment, {
-            children: [/* @__PURE__ */jsx(Button, {
-              padding: 0,
-              mode: selectedUserIds.includes(currentUser.id) ? "default" : "bleed",
-              onClick: () => toggleSelectedUser(currentUser.id),
-              children: /* @__PURE__ */jsx(Flex, {
-                padding: 1,
-                align: "center",
-                justify: "center",
-                children: /* @__PURE__ */jsx(UserAvatar, {
-                  user: currentUser.id,
-                  size: 1,
-                  withTooltip: true
-                })
-              })
-            }), /* @__PURE__ */jsx(Card, {
-              borderRight: true,
-              style: {
-                height: 30
-              },
-              tone: "inherit"
-            })]
-          }) : null, uniqueAssigneesNotMe.map(user => /* @__PURE__ */jsx(Button, {
-            padding: 0,
-            mode: selectedUserIds.includes(user.id) ? "default" : "bleed",
-            onClick: () => toggleSelectedUser(user.id),
-            children: /* @__PURE__ */jsx(Flex, {
-              padding: 1,
-              align: "center",
-              justify: "center",
-              children: /* @__PURE__ */jsx(UserAvatar, {
-                user,
-                size: 1,
-                withTooltip: true
-              })
-            })
-          }, user.id)), selectedUserIds.length > 0 ? /* @__PURE__ */jsx(Button, {
-            text: "Clear",
-            onClick: resetSelectedUsers,
-            mode: "ghost",
-            icon: ResetIcon
-          }) : null]
-        })
-      }), schemaTypes.length > 0 ? /* @__PURE__ */jsx(Flex, {
-        align: "center",
-        gap: 1,
-        children: schemaTypes.map(typeName => {
-          var _a, _b;
-          const schemaType = schema.get(typeName);
-          if (!schemaType) {
-            return null;
-          }
-          return /* @__PURE__ */jsx(Button, {
-            text: (_a = schemaType == null ? void 0 : schemaType.title) != null ? _a : typeName,
-            icon: (_b = schemaType == null ? void 0 : schemaType.icon) != null ? _b : void 0,
-            mode: selectedSchemaTypes.includes(typeName) ? "default" : "ghost",
-            onClick: () => toggleSelectedSchemaType(typeName)
-          }, typeName);
-        })
-      }) : null]
+      justify: "space-between",
+      gap: 2,
+      children: [/* @__PURE__ */jsx(Preview, {
+        layout: "default",
+        value: data,
+        schemaType
+      }), /* @__PURE__ */jsx(EditButton, {
+        id: data._id,
+        type: data._type
+      })]
     })
   });
 }
-function filterItemsAndSort(items, stateId) {
-  let selectedUsers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
-  let selectedSchemaTypes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
-  return items.filter(item => {
-    var _a;
-    return ((_a = item == null ? void 0 : item._metadata) == null ? void 0 : _a.state) === stateId;
-  }).filter(item => {
-    var _a, _b, _c;
-    return selectedUsers.length && ((_b = (_a = item._metadata) == null ? void 0 : _a.assignees) == null ? void 0 : _b.length) ? (_c = item._metadata) == null ? void 0 : _c.assignees.some(assignee => selectedUsers.includes(assignee)) : !selectedUsers.length;
-  }).filter(item => {
-    if (!selectedSchemaTypes) {
-      return true;
-    }
-    return selectedSchemaTypes.length ? selectedSchemaTypes.includes(item._type) : false;
-  }).sort((a, b) => {
-    var _a, _b;
-    const aOrderRank = ((_a = a._metadata) == null ? void 0 : _a.orderRank) || "0";
-    const bOrderRank = ((_b = b._metadata) == null ? void 0 : _b.orderRank) || "0";
-    return aOrderRank.localeCompare(bOrderRank);
+const UserAssignmentInput = props => {
+  var _a;
+  const documentId = useFormValue(["documentId"]);
+  const userList = useProjectUsers({
+    apiVersion: API_VERSION
   });
-}
-function arraysContainMatchingString(one, two) {
-  return one.some(item => two.includes(item));
-}
-function Status(props) {
-  const {
-    text,
-    icon
-  } = props;
-  const Icon = icon;
-  return /* @__PURE__ */jsx(Tooltip, {
-    portal: true,
-    content: /* @__PURE__ */jsx(Box, {
-      padding: 2,
-      children: /* @__PURE__ */jsx(Text, {
-        size: 1,
-        children: text
-      })
-    }),
-    children: /* @__PURE__ */jsx(Text, {
-      size: 1,
-      children: /* @__PURE__ */jsx(Icon, {})
+  const stringValue = Array.isArray(props == null ? void 0 : props.value) && ((_a = props == null ? void 0 : props.value) == null ? void 0 : _a.length) ? props.value.map(item => String(item)) : [];
+  return /* @__PURE__ */jsx(Card, {
+    border: true,
+    padding: 1,
+    children: /* @__PURE__ */jsx(UserAssignment, {
+      userList,
+      assignees: stringValue,
+      documentId: String(documentId)
     })
   });
+};
+function initialRank() {
+  let lastRankValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  const lastRank = lastRankValue && typeof lastRankValue === "string" ? LexoRank.parse(lastRankValue) : LexoRank.min();
+  const nextRank = lastRank.genNext().genNext();
+  return nextRank.value;
 }
-const StyledStickyCard = styled(Card)(() => css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  "]))));
-function StateTitle(props) {
-  const {
-    state,
-    requireAssignment,
-    userRoleCanDrop,
-    isDropDisabled,
-    draggingFrom
-  } = props;
-  let tone = "default";
-  const isSource = draggingFrom === state.id;
-  if (draggingFrom) {
-    tone = isDropDisabled || isSource ? "default" : "positive";
-  }
-  return /* @__PURE__ */jsx(StyledStickyCard, {
-    paddingY: 4,
-    padding: 3,
-    tone: "inherit",
-    children: /* @__PURE__ */jsxs(Flex, {
-      gap: 3,
-      align: "center",
-      children: [/* @__PURE__ */jsx(Badge, {
-        mode: draggingFrom && !isDropDisabled || isSource ? "default" : "outline",
-        tone,
-        muted: !userRoleCanDrop || isDropDisabled,
-        children: state.title
-      }), userRoleCanDrop ? null : /* @__PURE__ */jsx(Status, {
-        text: "You do not have permissions to move documents to this State",
-        icon: InfoOutlineIcon
-      }), requireAssignment ? /* @__PURE__ */jsx(Status, {
-        text: "You must be assigned to the document to move documents to this State",
-        icon: UserIcon
-      }) : null]
-    })
+var metadata = states => defineType({
+  type: "document",
+  name: "workflow.metadata",
+  title: "Workflow metadata",
+  liveEdit: true,
+  fields: [defineField({
+    name: "state",
+    description: "The current \"State\" of the document. Field is read only as changing it would not fire the state's \"operation\" setting. These are fired in the Document Actions and in the custom Tool.",
+    readOnly: true,
+    type: "string",
+    options: {
+      list: states.length ? states.map(state => ({
+        value: state.id,
+        title: state.title
+      })) : [],
+      layout: "radio"
+    }
+  }), defineField({
+    name: "documentId",
+    title: "Document ID",
+    description: "Used to help identify the target document that this metadata is tracking state for.",
+    type: "string",
+    readOnly: true,
+    components: {
+      input: Field
+    }
+  }), defineField({
+    name: "orderRank",
+    description: "Used to maintain order position of cards in the Tool.",
+    type: "string",
+    readOnly: true,
+    initialValue: async (p, _ref) => {
+      let {
+        getClient
+      } = _ref;
+      const lastDocOrderRank = await getClient({
+        apiVersion: API_VERSION
+      }).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]", {
+        order: "orderRank",
+        type: "workflow.metadata"
+      });
+      return initialRank(lastDocOrderRank);
+    }
+  }), defineField({
+    type: "array",
+    name: "assignees",
+    of: [{
+      type: "string"
+    }],
+    components: {
+      input: UserAssignmentInput
+    }
+  })]
+});
+function filterItemsAndSort(items, stateId) {
+  let selectedUsers = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+  let selectedSchemaTypes = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : [];
+  return items.filter(item => item == null ? void 0 : item._id).filter(item => {
+    var _a;
+    return ((_a = item == null ? void 0 : item._metadata) == null ? void 0 : _a.state) === stateId;
+  }).filter(item => {
+    var _a, _b, _c;
+    return selectedUsers.length && ((_b = (_a = item._metadata) == null ? void 0 : _a.assignees) == null ? void 0 : _b.length) ? (_c = item._metadata) == null ? void 0 : _c.assignees.some(assignee => selectedUsers.includes(assignee)) : !selectedUsers.length;
+  }).filter(item => {
+    if (!selectedSchemaTypes) {
+      return true;
+    }
+    return selectedSchemaTypes.length ? selectedSchemaTypes.includes(item._type) : false;
+  }).sort((a, b) => {
+    var _a, _b;
+    const aOrderRank = ((_a = a._metadata) == null ? void 0 : _a.orderRank) || "0";
+    const bOrderRank = ((_b = b._metadata) == null ? void 0 : _b.orderRank) || "0";
+    return aOrderRank.localeCompare(bOrderRank);
   });
 }
-function WorkflowTool(props) {
-  var _a, _b, _c;
-  const {
-    schemaTypes = [],
-    states = []
-  } = (_b = (_a = props == null ? void 0 : props.tool) == null ? void 0 : _a.options) != null ? _b : {};
-  const isDarkMode = useTheme().sanity.color.dark;
-  const defaultCardTone = isDarkMode ? "default" : "transparent";
-  const userList = useProjectUsers({
+const QUERY = groq(_templateObject || (_templateObject = _taggedTemplateLiteral(["*[_type == \"workflow.metadata\"]|order(orderRank){\n  \"_metadata\": {\n    _rev,\n    assignees,\n    documentId,\n    state,\n    orderRank\n  },\n  ...(\n    *[_id in [^.documentId, \"drafts.\" + ^.documentId]]|order(_updatedAt)[0]{ \n      _id, \n      _type, \n      _rev, \n      _updatedAt \n    }\n  )\n}"])));
+function useWorkflowDocuments(schemaTypes) {
+  const toast = useToast();
+  const client = useClient({
     apiVersion: API_VERSION
   });
-  const user = useCurrentUser();
-  const userRoleNames = ((_c = user == null ? void 0 : user.roles) == null ? void 0 : _c.length) ? user == null ? void 0 : user.roles.map(r => r.name) : [];
-  const {
-    workflowData,
-    operations
-  } = useWorkflowDocuments(schemaTypes);
   const {
     data,
     loading,
     error
-  } = workflowData;
-  const {
-    move
-  } = operations;
-  const [undroppableStates, setUndroppableStates] = React.useState([]);
-  const [draggingFrom, setDraggingFrom] = React.useState("");
-  const handleDragStart = React.useCallback(start => {
-    var _a2, _b2;
-    const {
-      draggableId,
-      source
-    } = start;
-    const {
-      droppableId: currentStateId
-    } = source;
-    setDraggingFrom(currentStateId);
-    const document = data.find(item => {
-      var _a3;
-      return ((_a3 = item._metadata) == null ? void 0 : _a3.documentId) === draggableId;
-    });
-    const state = states.find(s => s.id === currentStateId);
-    if (!document || !state) return;
-    const undroppableStateIds = [];
-    const statesThatRequireAssignmentIds = states.filter(s => s.requireAssignment).map(s => s.id);
-    if (statesThatRequireAssignmentIds.length) {
-      const documentAssignees = (_b2 = (_a2 = document._metadata) == null ? void 0 : _a2.assignees) != null ? _b2 : [];
-      const userIsAssignedToDocument = (user == null ? void 0 : user.id) ? documentAssignees.includes(user.id) : false;
-      if (!userIsAssignedToDocument) {
-        undroppableStateIds.push(...statesThatRequireAssignmentIds);
-      }
+  } = useListeningQuery(QUERY, {
+    params: {
+      schemaTypes
+    },
+    initialValue: []
+  });
+  const [localDocuments, setLocalDocuments] = React.useState([]);
+  React.useEffect(() => {
+    if (data) {
+      setLocalDocuments(data);
     }
-    const statesThatCannotBeTransitionedToIds = state.transitions && state.transitions.length ? states.filter(s => {
-      var _a3;
-      return !((_a3 = state.transitions) == null ? void 0 : _a3.includes(s.id));
-    }).map(s => s.id) : [];
-    if (statesThatCannotBeTransitionedToIds.length) {
-      undroppableStateIds.push(...statesThatCannotBeTransitionedToIds);
+  }, [data]);
+  const move = React.useCallback((draggedId, destination, states, newOrder) => {
+    const currentLocalData = localDocuments;
+    const newLocalDocuments = localDocuments.map(item => {
+      var _a;
+      if (((_a = item == null ? void 0 : item._metadata) == null ? void 0 : _a.documentId) === draggedId) {
+        return {
+          ...item,
+          _metadata: {
+            ...item._metadata,
+            state: destination.droppableId,
+            orderRank: newOrder,
+            // This value won't be written to the document
+            // It's done so that un/publish operations don't happen twice
+            // Because a moved document's card will update once optimistically
+            // and then again when the document is updated
+            optimistic: true
+          }
+        };
+      }
+      return item;
+    });
+    setLocalDocuments(newLocalDocuments);
+    const newStateId = destination.droppableId;
+    const newState = states.find(s => s.id === newStateId);
+    const document = localDocuments.find(d => {
+      var _a;
+      return ((_a = d == null ? void 0 : d._metadata) == null ? void 0 : _a.documentId) === draggedId;
+    });
+    if (!(newState == null ? void 0 : newState.id)) {
+      toast.push({
+        title: "Could not find target state ".concat(newStateId),
+        status: "error"
+      });
+      return null;
     }
-    const undroppableExceptSelf = undroppableStateIds.filter(id => id !== currentStateId);
-    if (undroppableExceptSelf.length) {
-      setUndroppableStates(undroppableExceptSelf);
+    if (!document) {
+      toast.push({
+        title: "Could not find dragged document in data",
+        status: "error"
+      });
+      return null;
     }
-  }, [data, states, user]);
-  const handleDragEnd = React.useCallback(result => {
-    var _a2, _b2, _c2, _d, _e, _f;
-    setUndroppableStates([]);
-    setDraggingFrom("");
     const {
-      draggableId,
-      source,
-      destination
-    } = result;
-    if (
-    // No destination?
-    !destination ||
-    // No change in position?
-    destination.droppableId === source.droppableId && destination.index === source.index) {
-      return;
-    }
-    const destinationStateItems = [...filterItemsAndSort(data, destination.droppableId, [], null)];
-    let newOrder;
-    if (!destinationStateItems.length) {
-      newOrder = LexoRank.min().toString();
-    } else if (destination.index === 0) {
-      const firstItemOrderRank = (_b2 = (_a2 = [...destinationStateItems].shift()) == null ? void 0 : _a2._metadata) == null ? void 0 : _b2.orderRank;
-      newOrder = firstItemOrderRank && typeof firstItemOrderRank === "string" ? LexoRank.parse(firstItemOrderRank).genPrev().toString() : LexoRank.min().toString();
-    } else if (destination.index + 1 === destinationStateItems.length) {
-      const lastItemOrderRank = (_d = (_c2 = [...destinationStateItems].pop()) == null ? void 0 : _c2._metadata) == null ? void 0 : _d.orderRank;
-      newOrder = lastItemOrderRank && typeof lastItemOrderRank === "string" ? LexoRank.parse(lastItemOrderRank).genNext().toString() : LexoRank.min().toString();
-    } else {
-      const itemBefore = destinationStateItems[destination.index];
-      const itemBeforeRank = (_e = itemBefore == null ? void 0 : itemBefore._metadata) == null ? void 0 : _e.orderRank;
-      const itemBeforeRankParsed = itemBefore._metadata.orderRank ? LexoRank.parse(itemBeforeRank) : LexoRank.min();
-      const itemAfter = destinationStateItems[destination.index + 1];
-      const itemAfterRank = (_f = itemAfter == null ? void 0 : itemAfter._metadata) == null ? void 0 : _f.orderRank;
-      const itemAfterRankParsed = itemAfter._metadata.orderRank ? LexoRank.parse(itemAfterRank) : LexoRank.max();
-      newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString();
-    }
-    move(draggableId, destination, states, newOrder);
-  }, [data, move, states]);
-  const uniqueAssignedUsers = React.useMemo(() => {
-    const uniqueUserIds = data.reduce((acc, item) => {
-      var _a2;
-      const {
-        assignees = []
-      } = (_a2 = item._metadata) != null ? _a2 : {};
-      const newAssignees = (assignees == null ? void 0 : assignees.length) ? assignees.filter(a => !acc.includes(a)) : [];
-      return newAssignees.length ? [...acc, ...newAssignees] : acc;
-    }, []);
-    return userList.filter(u => uniqueUserIds.includes(u.id));
-  }, [data, userList]);
-  const [selectedUserIds, setSelectedUserIds] = React.useState(uniqueAssignedUsers.map(u => u.id));
-  const toggleSelectedUser = React.useCallback(userId => {
-    setSelectedUserIds(prev => prev.includes(userId) ? prev.filter(u => u !== userId) : [...prev, userId]);
-  }, []);
-  const resetSelectedUsers = React.useCallback(() => {
-    setSelectedUserIds([]);
-  }, []);
-  const [selectedSchemaTypes, setSelectedSchemaTypes] = React.useState(schemaTypes);
-  const toggleSelectedSchemaType = React.useCallback(schemaType => {
-    setSelectedSchemaTypes(prev => prev.includes(schemaType) ? prev.filter(u => u !== schemaType) : [...prev, schemaType]);
-  }, []);
-  const [invalidDocumentIds, setInvalidDocumentIds] = React.useState([]);
-  const toggleInvalidDocumentId = React.useCallback((docId, action) => {
-    setInvalidDocumentIds(prev => action === "ADD" ? [...prev, docId] : prev.filter(id => id !== docId));
-  }, []);
-  if (!(states == null ? void 0 : states.length)) {
-    return /* @__PURE__ */jsx(Container, {
-      width: 1,
-      padding: 5,
-      children: /* @__PURE__ */jsx(Feedback, {
-        tone: "caution",
-        title: "Plugin options error",
-        description: "No States defined in plugin config"
-      })
+      _id,
+      _type
+    } = document;
+    const {
+      _rev,
+      documentId
+    } = document._metadata || {};
+    client.patch("workflow-metadata.".concat(documentId)).ifRevisionId(_rev).set({
+      state: newStateId,
+      orderRank: newOrder
+    }).commit().then(() => {
+      var _a;
+      return toast.push({
+        title: "Moved to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
+        status: "success"
+      });
+    }).catch(() => {
+      var _a;
+      setLocalDocuments(currentLocalData);
+      return toast.push({
+        title: "Failed to move to \"".concat((_a = newState == null ? void 0 : newState.title) != null ? _a : newStateId, "\""),
+        status: "error"
+      });
     });
+    return {
+      _id,
+      _type,
+      documentId,
+      state: newState
+    };
+  }, [client, toast, localDocuments]);
+  return {
+    workflowData: {
+      data: localDocuments,
+      loading,
+      error
+    },
+    operations: {
+      move
+    }
+  };
+}
+function AvatarGroup(props) {
+  const currentUser = useCurrentUser();
+  const {
+    users,
+    max = 4
+  } = props;
+  const len = users == null ? void 0 : users.length;
+  const {
+    me,
+    visibleUsers
+  } = React.useMemo(() => {
+    return {
+      me: (currentUser == null ? void 0 : currentUser.id) ? users.find(u => u.id === currentUser.id) : void 0,
+      visibleUsers: users.filter(u => u.id !== (currentUser == null ? void 0 : currentUser.id)).slice(0, max - 1)
+    };
+  }, [users, max, currentUser]);
+  if (!(users == null ? void 0 : users.length)) {
+    return null;
   }
-  if (error && !data.length) {
-    return /* @__PURE__ */jsx(Container, {
-      width: 1,
-      padding: 5,
-      children: /* @__PURE__ */jsx(Feedback, {
-        tone: "critical",
-        title: "Error querying for Workflow documents"
+  return /* @__PURE__ */jsxs(Flex, {
+    align: "center",
+    gap: 1,
+    children: [me ? /* @__PURE__ */jsx(UserAvatar, {
+      user: me
+    }) : null, visibleUsers.map(user => /* @__PURE__ */jsx(Box, {
+      style: {
+        marginRight: -8
+      },
+      children: /* @__PURE__ */jsx(UserAvatar, {
+        user
       })
-    });
-  }
-  return /* @__PURE__ */jsxs(Card, {
-    height: "fill",
-    overflow: "hidden",
-    children: [/* @__PURE__ */jsx(Validators, {
-      data,
+    }, user.id)), len > max && /* @__PURE__ */jsx(Box, {
+      paddingLeft: 2,
+      children: /* @__PURE__ */jsxs(Text, {
+        size: 1,
+        children: ["+", len - max]
+      })
+    })]
+  });
+}
+function UserDisplay(props) {
+  const {
+    assignees,
+    userList,
+    documentId,
+    disabled = false
+  } = props;
+  const [button] = React.useState(null);
+  const [popover, setPopover] = React.useState(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const close = React.useCallback(() => setIsOpen(false), []);
+  const open = React.useCallback(() => setIsOpen(true), []);
+  useClickOutside(close, [button, popover]);
+  return /* @__PURE__ */jsx(Popover, {
+    ref: setPopover,
+    content: /* @__PURE__ */jsx(UserAssignment, {
       userList,
-      states
-    }), /* @__PURE__ */jsx(Filters, {
-      uniqueAssignedUsers,
-      selectedUserIds,
-      toggleSelectedUser,
-      resetSelectedUsers,
-      schemaTypes,
-      selectedSchemaTypes,
-      toggleSelectedSchemaType
-    }), /* @__PURE__ */jsx(DragDropContext, {
-      onDragStart: handleDragStart,
-      onDragEnd: handleDragEnd,
-      children: /* @__PURE__ */jsx(Grid, {
-        columns: states.length,
-        height: "fill",
-        children: states.map((state, stateIndex) => {
-          var _a2, _b2;
-          const userRoleCanDrop = ((_a2 = state == null ? void 0 : state.roles) == null ? void 0 : _a2.length) ? arraysContainMatchingString(state.roles, userRoleNames) : true;
-          const isDropDisabled = !userRoleCanDrop || undroppableStates.includes(state.id);
-          return /* @__PURE__ */jsxs(Card, {
-            borderLeft: stateIndex > 0,
-            tone: defaultCardTone,
-            height: "fill",
-            overflow: "auto",
-            children: [/* @__PURE__ */jsx(StateTitle, {
-              state,
-              requireAssignment: (_b2 = state.requireAssignment) != null ? _b2 : false,
-              userRoleCanDrop,
-              isDropDisabled,
-              draggingFrom
-            }), /* @__PURE__ */jsx(Droppable, {
-              droppableId: state.id,
-              isDropDisabled,
-              children: (provided, snapshot) => /* @__PURE__ */jsxs(Card, {
-                ref: provided.innerRef,
-                tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
-                height: "fill",
-                paddingTop: 1,
-                children: [loading ? /* @__PURE__ */jsx(Flex, {
-                  padding: 5,
-                  align: "center",
-                  justify: "center",
-                  children: /* @__PURE__ */jsx(Spinner, {
-                    muted: true
-                  })
-                }) : null, data.length > 0 && filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes).map((item, itemIndex) => {
-                  var _a3, _b3, _c2, _d;
-                  const isInvalid = invalidDocumentIds.includes(String((_a3 = item == null ? void 0 : item._metadata) == null ? void 0 : _a3.documentId));
-                  const meInAssignees = (user == null ? void 0 : user.id) ? (_c2 = (_b3 = item == null ? void 0 : item._metadata) == null ? void 0 : _b3.assignees) == null ? void 0 : _c2.includes(user.id) : false;
-                  const isDragDisabled = !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
-                  const {
-                    documentId
-                  } = (_d = item._metadata) != null ? _d : {};
-                  if (!documentId) {
-                    return null;
-                  }
-                  return /* @__PURE__ */jsx(Draggable, {
-                    draggableId: documentId,
-                    index: itemIndex,
-                    isDragDisabled,
-                    children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsx("div", {
-                      ref: draggableProvided.innerRef,
-                      ...draggableProvided.draggableProps,
-                      ...draggableProvided.dragHandleProps,
-                      children: /* @__PURE__ */jsx(DocumentCard, {
-                        userRoleCanDrop,
-                        isDragDisabled,
-                        isDragging: draggableSnapshot.isDragging,
-                        item,
-                        toggleInvalidDocumentId,
-                        userList,
-                        states
-                      })
-                    })
-                  }, documentId);
-                }), provided.placeholder]
-              })
-            })]
-          }, state.id);
+      assignees,
+      documentId
+    }),
+    portal: true,
+    open: isOpen,
+    children: !assignees || assignees.length === 0 ? /* @__PURE__ */jsx(Button, {
+      onClick: open,
+      fontSize: 1,
+      padding: 2,
+      tabIndex: -1,
+      icon: AddIcon,
+      text: "Assign",
+      tone: "positive",
+      mode: "ghost",
+      disabled
+    }) : /* @__PURE__ */jsx(Grid, {
+      children: /* @__PURE__ */jsx(Button, {
+        onClick: open,
+        padding: 0,
+        mode: "bleed",
+        disabled,
+        children: /* @__PURE__ */jsx(AvatarGroup, {
+          users: userList.filter(u => assignees.includes(u.id))
         })
       })
-    })]
+    })
   });
 }
-const workflowTool = options => ({
-  name: "workflow",
-  title: "Workflow",
-  component: WorkflowTool,
-  icon: SplitVerticalIcon,
-  options
-});
-function Field(props) {
-  var _a;
-  const schema = useSchema();
+function CompleteButton(props) {
   const {
-    data,
-    loading,
-    error
-  } = useListeningQuery("*[_id in [$id, $draftId]]|order(_updatedAt)[0]", {
-    params: {
-      id: String(props.value),
-      draftId: "drafts.".concat(String(props.value))
-    }
+    documentId,
+    disabled = false
+  } = props;
+  const client = useClient({
+    apiVersion: API_VERSION
   });
-  if (loading) {
-    return /* @__PURE__ */jsx(Spinner, {});
-  }
-  const schemaType = schema.get((_a = data == null ? void 0 : data._type) != null ? _a : "");
-  if (error || !(data == null ? void 0 : data._type) || !schemaType) {
-    return /* @__PURE__ */jsx(Feedback, {
-      tone: "critical",
-      title: "Error with query"
+  const toast = useToast();
+  const handleComplete = React.useCallback(id => {
+    client.delete("workflow-metadata.".concat(id)).then(() => {
+      toast.push({
+        status: "success",
+        title: "Workflow completed",
+        description: id
+      });
+    }).catch(() => {
+      toast.push({
+        status: "error",
+        title: "Could not complete Workflow",
+        description: id
+      });
     });
-  }
-  return /* @__PURE__ */jsx(Card, {
-    border: true,
+  }, [client, toast]);
+  return /* @__PURE__ */jsx(Button, {
+    onClick: () => handleComplete(documentId),
+    text: "Complete",
+    icon: CheckmarkIcon,
+    tone: "positive",
+    mode: "ghost",
+    fontSize: 1,
     padding: 2,
-    children: /* @__PURE__ */jsxs(Flex, {
-      align: "center",
-      justify: "space-between",
-      gap: 2,
-      children: [/* @__PURE__ */jsx(Preview, {
-        layout: "default",
-        value: data,
-        schemaType
-      }), /* @__PURE__ */jsx(EditButton, {
-        id: data._id,
-        type: data._type
-      })]
-    })
+    tabIndex: -1,
+    disabled
   });
 }
-const UserAssignmentInput = props => {
-  var _a;
-  const documentId = useFormValue(["documentId"]);
-  const userList = useProjectUsers({
-    apiVersion: API_VERSION
+function TimeAgo(_ref2) {
+  let {
+    time
+  } = _ref2;
+  const timeAgo = useTimeAgo(time);
+  return /* @__PURE__ */jsxs("span", {
+    title: timeAgo,
+    children: [timeAgo, " ago"]
   });
-  const stringValue = Array.isArray(props == null ? void 0 : props.value) && ((_a = props == null ? void 0 : props.value) == null ? void 0 : _a.length) ? props.value.map(item => String(item)) : [];
-  return /* @__PURE__ */jsx(Card, {
-    border: true,
-    padding: 1,
-    children: /* @__PURE__ */jsx(UserAssignment, {
-      userList,
-      assignees: stringValue,
-      documentId: String(documentId)
+}
+function DraftStatus(props) {
+  const {
+    document
+  } = props;
+  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: document ? /* @__PURE__ */jsxs(Fragment, {
+          children: ["Edited ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
+            time: updatedAt
+          })]
+        }) : /* @__PURE__ */jsx(Fragment, {
+          children: "No unpublished edits"
+        })
+      })
+    }),
+    children: /* @__PURE__ */jsx(TextWithTone, {
+      tone: "caution",
+      dimmed: !document,
+      muted: !document,
+      size: 1,
+      children: /* @__PURE__ */jsx(EditIcon, {})
     })
   });
-};
-function initialRank() {
-  let lastRankValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
-  const lastRank = lastRankValue && typeof lastRankValue === "string" ? LexoRank.parse(lastRankValue) : LexoRank.min();
-  const nextRank = lastRank.genNext().genNext();
-  return nextRank.value;
 }
-var metadata = states => defineType({
-  type: "document",
-  name: "workflow.metadata",
-  title: "Workflow metadata",
-  liveEdit: true,
-  fields: [defineField({
-    name: "state",
-    description: "The current \"State\" of the document. Field is read only as changing it would not fire the state's \"operation\" setting. These are fired in the Document Actions and in the custom Tool.",
-    readOnly: true,
-    type: "string",
-    options: {
-      list: states.length ? states.map(state => ({
-        value: state.id,
-        title: state.title
-      })) : [],
-      layout: "radio"
-    }
-  }), defineField({
-    name: "documentId",
-    title: "Document ID",
-    description: "Used to help identify the target document that this metadata is tracking state for.",
-    type: "string",
-    readOnly: true,
-    components: {
-      input: Field
-    }
-  }), defineField({
-    name: "orderRank",
-    description: "Used to maintain order position of cards in the Tool.",
-    type: "string",
-    readOnly: true,
-    initialValue: async (p, _ref4) => {
-      let {
-        getClient
-      } = _ref4;
-      const lastDocOrderRank = await getClient({
-        apiVersion: API_VERSION
-      }).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]", {
-        order: "orderRank",
-        type: "workflow.metadata"
-      });
-      return initialRank(lastDocOrderRank);
-    }
-  }), defineField({
-    type: "array",
-    name: "assignees",
-    of: [{
-      type: "string"
-    }],
-    components: {
-      input: UserAssignmentInput
-    }
-  })]
-});
-function useWorkflowMetadata(id, states) {
+function PublishedStatus(props) {
   const {
-    data: metadata,
-    loading,
-    error
-  } = useListeningQuery("*[_type == \"workflow.metadata\" && documentId == $id][0]", {
-    params: {
-      id
-    }
+    document
+  } = props;
+  const updatedAt = document && "_updatedAt" in document && document._updatedAt;
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: document ? /* @__PURE__ */jsxs(Fragment, {
+          children: ["Published ", updatedAt && /* @__PURE__ */jsx(TimeAgo, {
+            time: updatedAt
+          })]
+        }) : /* @__PURE__ */jsx(Fragment, {
+          children: "Not published"
+        })
+      })
+    }),
+    children: /* @__PURE__ */jsx(TextWithTone, {
+      tone: "positive",
+      dimmed: !document,
+      muted: !document,
+      size: 1,
+      children: /* @__PURE__ */jsx(PublishIcon, {})
+    })
   });
-  if (metadata == null ? void 0 : metadata.state) {
-    return {
-      data: {
-        metadata,
-        state: states.find(s => s.id === metadata.state)
-      },
-      loading,
-      error
-    };
-  }
-  return {
-    data: {},
-    loading,
-    error
-  };
 }
-function AssignWorkflow(props, states) {
-  var _a, _b;
+function Validate(props) {
   const {
-    id
+    documentId,
+    type,
+    onChange
   } = props;
-  const [isDialogOpen, setDialogOpen] = useState(false);
-  const userList = useProjectUsers({
-    apiVersion: API_VERSION
-  });
   const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(id, states);
-  if (error) {
-    console.error(error);
-  }
-  if (!(data == null ? void 0 : data.metadata)) {
+    isValidating,
+    validation = []
+  } = useValidationStatus(documentId, type);
+  useEffect(() => {
+    onChange({
+      isValidating,
+      validation
+    });
+  }, [onChange, isValidating, validation]);
+  return null;
+}
+function ValidationStatus(props) {
+  const {
+    validation = []
+  } = props;
+  if (!validation.length) {
     return null;
   }
-  return {
-    icon: UsersIcon,
-    type: "dialog",
-    disabled: !data || loading || error,
-    label: "Assign",
-    title: data ? null : "Document is not in Workflow",
-    dialog: isDialogOpen && {
-      type: "popover",
-      onClose: () => {
-        setDialogOpen(false);
-      },
-      content: /* @__PURE__ */jsx(UserAssignment, {
-        userList,
-        assignees: (_b = (_a = data.metadata) == null ? void 0 : _a.assignees) != null ? _b : [],
-        documentId: id
+  const hasError = validation.some(item => item.level === "error");
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: validation.length === 1 ? "1 validation issue" : "".concat(validation.length, " validation issues")
       })
-    },
-    onHandle: () => {
-      setDialogOpen(true);
-    }
-  };
+    }),
+    children: /* @__PURE__ */jsx(TextWithTone, {
+      tone: hasError ? "critical" : "caution",
+      size: 1,
+      children: hasError ? /* @__PURE__ */jsx(ErrorOutlineIcon, {}) : /* @__PURE__ */jsx(WarningOutlineIcon, {})
+    })
+  });
 }
-function BeginWorkflow(props, states) {
+function DocumentCard(props) {
+  var _a, _b;
   const {
-    id,
-    draft
+    isDragDisabled,
+    userRoleCanDrop,
+    isDragging,
+    item,
+    states,
+    toggleInvalidDocumentId,
+    userList
   } = props;
   const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(id, states);
-  const client = useClient({
-    apiVersion: API_VERSION
+    assignees = [],
+    documentId
+  } = (_a = item._metadata) != null ? _a : {};
+  const schema = useSchema();
+  const state = states.find(s => {
+    var _a2;
+    return s.id === ((_a2 = item._metadata) == null ? void 0 : _a2.state);
   });
-  const toast = useToast();
-  const [beginning, setBeginning] = useState(false);
-  const [complete, setComplete] = useState(false);
-  if (error) {
-    console.error(error);
-  }
-  const handle = useCallback(async () => {
-    setBeginning(true);
-    const lowestOrderFirstState = await client.fetch("*[_type == \"workflow.metadata\" && state == $state]|order(orderRank)[0].orderRank", {
-      state: states[0].id
-    });
-    client.createIfNotExists({
-      _id: "workflow-metadata.".concat(id),
-      _type: "workflow.metadata",
-      documentId: id,
-      state: states[0].id,
-      orderRank: lowestOrderFirstState ? LexoRank.parse(lowestOrderFirstState).genNext().toString() : LexoRank.min().toString()
-    },
-    // Faster!
-    {
-      visibility: "async"
-    }).then(() => {
-      toast.push({
-        status: "success",
-        title: "Workflow started",
-        description: "Document is now \"".concat(states[0].title, "\"")
-      });
-      setBeginning(false);
-      setComplete(true);
-    });
-  }, [id, states, client, toast]);
-  if (!draft || complete || data.metadata) {
-    return null;
-  }
-  return {
-    icon: SplitVerticalIcon,
-    type: "dialog",
-    disabled: (data == null ? void 0 : data.metadata) || loading || error || beginning || complete,
-    label: beginning ? "Beginning..." : "Begin Workflow",
-    onHandle: () => {
-      handle();
+  const isDarkMode = useTheme().sanity.color.dark;
+  const defaultCardTone = isDarkMode ? "transparent" : "default";
+  const [optimisticValidation, setOptimisticValidation] = useState({
+    isValidating: (_b = state == null ? void 0 : state.requireValidation) != null ? _b : false,
+    validation: []
+  });
+  const {
+    isValidating,
+    validation
+  } = optimisticValidation;
+  const handleValidation = useCallback(updates => {
+    setOptimisticValidation(updates);
+  }, []);
+  const cardTone = useMemo(() => {
+    let tone = defaultCardTone;
+    if (!userRoleCanDrop) return isDarkMode ? "default" : "transparent";
+    if (!documentId) return tone;
+    if (isDragging) tone = "positive";
+    if ((state == null ? void 0 : state.requireValidation) && !isValidating && validation.length > 0) {
+      if (validation.some(v => v.level === "error")) {
+        tone = "critical";
+      } else {
+        tone = "caution";
+      }
     }
-  };
+    return tone;
+  }, [defaultCardTone, userRoleCanDrop, isDarkMode, documentId, isDragging, isValidating, validation, state == null ? void 0 : state.requireValidation]);
+  useEffect(() => {
+    if (!isValidating && validation.length > 0) {
+      if (validation.some(v => v.level === "error")) {
+        toggleInvalidDocumentId(documentId, "ADD");
+      } else {
+        toggleInvalidDocumentId(documentId, "REMOVE");
+      }
+    } else {
+      toggleInvalidDocumentId(documentId, "REMOVE");
+    }
+  }, [documentId, isValidating, toggleInvalidDocumentId, validation]);
+  const hasError = useMemo(() => isValidating ? false : validation.some(v => v.level === "error"), [isValidating, validation]);
+  const isLastState = useMemo(() => {
+    var _a2;
+    return states[states.length - 1].id === ((_a2 = item._metadata) == null ? void 0 : _a2.state);
+  }, [states, item._metadata.state]);
+  return /* @__PURE__ */jsxs(Fragment, {
+    children: [(state == null ? void 0 : state.requireValidation) ? /* @__PURE__ */jsx(Validate, {
+      documentId,
+      type: item._type,
+      onChange: handleValidation
+    }) : null, /* @__PURE__ */jsx(Box, {
+      paddingBottom: 3,
+      paddingX: 3,
+      children: /* @__PURE__ */jsx(Card, {
+        radius: 2,
+        shadow: isDragging ? 3 : 1,
+        tone: cardTone,
+        children: /* @__PURE__ */jsxs(Stack, {
+          children: [/* @__PURE__ */jsx(Card, {
+            borderBottom: true,
+            radius: 2,
+            padding: 3,
+            paddingLeft: 2,
+            tone: cardTone,
+            style: {
+              pointerEvents: "none"
+            },
+            children: /* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              justify: "space-between",
+              gap: 1,
+              children: [/* @__PURE__ */jsx(Box, {
+                flex: 1,
+                children: /* @__PURE__ */jsx(Preview, {
+                  layout: "default",
+                  value: item,
+                  schemaType: schema.get(item._type)
+                })
+              }), /* @__PURE__ */jsx(Box, {
+                style: {
+                  flexShrink: 0
+                },
+                children: hasError || isDragDisabled ? null : /* @__PURE__ */jsx(DragHandleIcon, {})
+              })]
+            })
+          }), /* @__PURE__ */jsx(Card, {
+            padding: 2,
+            radius: 2,
+            tone: "inherit",
+            children: /* @__PURE__ */jsxs(Flex, {
+              align: "center",
+              justify: "space-between",
+              gap: 3,
+              children: [/* @__PURE__ */jsx(Box, {
+                flex: 1,
+                children: documentId && /* @__PURE__ */jsx(UserDisplay, {
+                  userList,
+                  assignees,
+                  documentId,
+                  disabled: !userRoleCanDrop
+                })
+              }), validation.length > 0 ? /* @__PURE__ */jsx(ValidationStatus, {
+                validation
+              }) : null, /* @__PURE__ */jsx(DraftStatus, {
+                document: item
+              }), /* @__PURE__ */jsx(PublishedStatus, {
+                document: item
+              }), /* @__PURE__ */jsx(EditButton, {
+                id: item._id,
+                type: item._type,
+                disabled: !userRoleCanDrop
+              }), isLastState ? /* @__PURE__ */jsx(CompleteButton, {
+                documentId,
+                disabled: !userRoleCanDrop
+              }) : null]
+            })
+          })]
+        })
+      })
+    })]
+  });
 }
-function CompleteWorkflow(props, states) {
-  var _a;
+function DocumentList(props) {
   const {
-    id
+    data = [],
+    invalidDocumentIds,
+    selectedSchemaTypes,
+    selectedUserIds,
+    state,
+    states,
+    toggleInvalidDocumentId,
+    user,
+    userList,
+    userRoleCanDrop
   } = props;
-  const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(id, states);
-  const client = useClient({
-    apiVersion: API_VERSION
+  const dataFiltered = useMemo(() => {
+    return data.length ? filterItemsAndSort(data, state.id, selectedUserIds, selectedSchemaTypes) : [];
+  }, [data, selectedSchemaTypes, selectedUserIds, state.id]);
+  const parentRef = useRef(null);
+  const rowVirtualizer = useVirtualizer({
+    count: data.length,
+    getScrollElement: () => parentRef.current,
+    getItemKey: index => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = dataFiltered[index]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.documentId) != null ? _c : index;
+    },
+    estimateSize: () => 113,
+    overscan: 5
   });
-  if (error) {
-    console.error(error);
-  }
-  const handle = useCallback(() => {
-    client.delete("workflow-metadata.".concat(id));
-  }, [id, client]);
-  const isLastState = ((_a = data == null ? void 0 : data.state) == null ? void 0 : _a.id) === states[states.length - 1].id;
-  if (!data.metadata) {
+  if (!data.length) {
     return null;
   }
-  return {
-    icon: CheckmarkIcon,
-    type: "dialog",
-    disabled: loading || error || !isLastState,
-    label: "Complete Workflow",
-    title: isLastState ? "Removes the document from the Workflow process" : "Cannot remove from workflow until in the last state",
-    onHandle: () => {
-      handle();
+  return /* @__PURE__ */jsx("div", {
+    ref: parentRef,
+    style: {
+      height: "100%",
+      overflow: "auto",
+      paddingTop: 1,
+      // Smooths scrollbar behaviour
+      overflowAnchor: "none",
+      scrollBehavior: "auto"
     },
-    color: "positive"
-  };
+    children: rowVirtualizer.getVirtualItems().map(virtualItem => {
+      var _a;
+      const item = dataFiltered[virtualItem.index];
+      const {
+        documentId,
+        assignees
+      } = (_a = item == null ? void 0 : item._metadata) != null ? _a : {};
+      if (!documentId) {
+        return null;
+      }
+      const isInvalid = invalidDocumentIds.includes(documentId);
+      const meInAssignees = (user == null ? void 0 : user.id) ? assignees == null ? void 0 : assignees.includes(user.id) : false;
+      const isDragDisabled = !userRoleCanDrop || isInvalid || !(state.requireAssignment ? state.requireAssignment && meInAssignees : true);
+      return /* @__PURE__ */jsx(Draggable, {
+        draggableId: documentId,
+        index: virtualItem.index,
+        isDragDisabled,
+        children: (draggableProvided, draggableSnapshot) => /* @__PURE__ */jsx("div", {
+          ref: draggableProvided.innerRef,
+          ...draggableProvided.draggableProps,
+          ...draggableProvided.dragHandleProps,
+          children: /* @__PURE__ */jsx(DocumentCard, {
+            userRoleCanDrop,
+            isDragDisabled,
+            isDragging: draggableSnapshot.isDragging,
+            item,
+            toggleInvalidDocumentId,
+            userList,
+            states
+          })
+        })
+      }, documentId);
+    })
+  });
 }
-function AssigneesBadge(states, documentId, currentUser) {
-  var _a;
-  const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(documentId, states);
+function Filters(props) {
   const {
-    metadata
-  } = data;
-  const userList = useProjectUsers({
-    apiVersion: API_VERSION
-  });
-  if (loading || error || !metadata) {
-    if (error) {
-      console.error(error);
+    uniqueAssignedUsers = [],
+    selectedUserIds,
+    schemaTypes,
+    selectedSchemaTypes,
+    toggleSelectedUser,
+    resetSelectedUsers,
+    toggleSelectedSchemaType
+  } = props;
+  const currentUser = useCurrentUser();
+  const schema = useSchema();
+  const onAdd = useCallback(id => {
+    if (!selectedUserIds.includes(id)) {
+      toggleSelectedUser(id);
+    }
+  }, [selectedUserIds, toggleSelectedUser]);
+  const onRemove = useCallback(id => {
+    if (selectedUserIds.includes(id)) {
+      toggleSelectedUser(id);
     }
+  }, [selectedUserIds, toggleSelectedUser]);
+  const onClear = useCallback(() => {
+    resetSelectedUsers();
+  }, [resetSelectedUsers]);
+  if (uniqueAssignedUsers.length === 0 && schemaTypes.length < 2) {
     return null;
   }
-  if (!((_a = metadata == null ? void 0 : metadata.assignees) == null ? void 0 : _a.length)) {
-    return {
-      label: "Unassigned"
-    };
-  }
-  const {
-    assignees
-  } = metadata != null ? metadata : [];
-  const hasMe = currentUser ? assignees.some(assignee => assignee === currentUser.id) : false;
-  const assigneesCount = hasMe ? assignees.length - 1 : assignees.length;
-  const assigneeUsers = userList.filter(user => assignees.includes(user.id));
-  const title = assigneeUsers.map(user => user.displayName).join(", ");
-  let label;
-  if (hasMe && assigneesCount === 0) {
-    label = "Assigned to Me";
-  } else if (hasMe && assigneesCount > 0) {
-    label = "Me and ".concat(assigneesCount, " ").concat(assigneesCount === 1 ? "other" : "others");
-  } else {
-    label = "".concat(assigneesCount, " assigned");
-  }
-  return {
-    label,
-    title,
-    color: "primary"
-  };
+  const meInUniqueAssignees = (currentUser == null ? void 0 : currentUser.id) && uniqueAssignedUsers.find(u => u.id === currentUser.id);
+  const uniqueAssigneesNotMe = uniqueAssignedUsers.filter(u => u.id !== (currentUser == null ? void 0 : currentUser.id));
+  return /* @__PURE__ */jsx(Card, {
+    tone: "primary",
+    padding: 2,
+    borderBottom: true,
+    style: {
+      overflowX: "hidden"
+    },
+    children: /* @__PURE__ */jsxs(Flex, {
+      align: "center",
+      children: [/* @__PURE__ */jsx(Flex, {
+        align: "center",
+        gap: 1,
+        flex: 1,
+        children: uniqueAssignedUsers.length > 5 ? /* @__PURE__ */jsx(Card, {
+          tone: "default",
+          children: /* @__PURE__ */jsx(MenuButton, {
+            button: /* @__PURE__ */jsx(Button, {
+              text: "Filter Assignees",
+              tone: "primary",
+              icon: UserIcon
+            }),
+            id: "user-filters",
+            menu: /* @__PURE__ */jsx(Menu, {
+              children: /* @__PURE__ */jsx(UserSelectMenu, {
+                value: selectedUserIds,
+                userList: uniqueAssignedUsers,
+                onAdd,
+                onRemove,
+                onClear,
+                labels: {
+                  addMe: "Filter mine",
+                  removeMe: "Clear mine",
+                  clear: "Clear filters"
+                }
+              })
+            }),
+            popover: {
+              portal: true
+            }
+          })
+        }) : /* @__PURE__ */jsxs(Fragment, {
+          children: [meInUniqueAssignees ? /* @__PURE__ */jsxs(Fragment, {
+            children: [/* @__PURE__ */jsx(Button, {
+              padding: 0,
+              mode: selectedUserIds.includes(currentUser.id) ? "default" : "bleed",
+              onClick: () => toggleSelectedUser(currentUser.id),
+              children: /* @__PURE__ */jsx(Flex, {
+                padding: 1,
+                align: "center",
+                justify: "center",
+                children: /* @__PURE__ */jsx(UserAvatar, {
+                  user: currentUser.id,
+                  size: 1,
+                  withTooltip: true
+                })
+              })
+            }), /* @__PURE__ */jsx(Card, {
+              borderRight: true,
+              style: {
+                height: 30
+              },
+              tone: "inherit"
+            })]
+          }) : null, uniqueAssigneesNotMe.map(user => /* @__PURE__ */jsx(Button, {
+            padding: 0,
+            mode: selectedUserIds.includes(user.id) ? "default" : "bleed",
+            onClick: () => toggleSelectedUser(user.id),
+            children: /* @__PURE__ */jsx(Flex, {
+              padding: 1,
+              align: "center",
+              justify: "center",
+              children: /* @__PURE__ */jsx(UserAvatar, {
+                user,
+                size: 1,
+                withTooltip: true
+              })
+            })
+          }, user.id)), selectedUserIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+            text: "Clear",
+            onClick: resetSelectedUsers,
+            mode: "ghost",
+            icon: ResetIcon
+          }) : null]
+        })
+      }), schemaTypes.length > 0 ? /* @__PURE__ */jsx(Flex, {
+        align: "center",
+        gap: 1,
+        children: schemaTypes.map(typeName => {
+          var _a, _b;
+          const schemaType = schema.get(typeName);
+          if (!schemaType) {
+            return null;
+          }
+          return /* @__PURE__ */jsx(Button, {
+            text: (_a = schemaType == null ? void 0 : schemaType.title) != null ? _a : typeName,
+            icon: (_b = schemaType == null ? void 0 : schemaType.icon) != null ? _b : void 0,
+            mode: selectedSchemaTypes.includes(typeName) ? "default" : "ghost",
+            onClick: () => toggleSelectedSchemaType(typeName)
+          }, typeName);
+        })
+      }) : null]
+    })
+  });
 }
-function StateBadge(states, documentId) {
+function Status(props) {
   const {
-    data,
-    loading,
-    error
-  } = useWorkflowMetadata(documentId, states);
+    text,
+    icon
+  } = props;
+  const Icon = icon;
+  return /* @__PURE__ */jsx(Tooltip, {
+    portal: true,
+    content: /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Text, {
+        size: 1,
+        children: text
+      })
+    }),
+    children: /* @__PURE__ */jsx(Text, {
+      size: 1,
+      children: /* @__PURE__ */jsx(Icon, {})
+    })
+  });
+}
+const StyledStickyCard = styled(Card)(() => css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    position: sticky;\n    top: 0;\n    z-index: 1;\n  "]))));
+function StateTitle(props) {
   const {
-    state
-  } = data;
-  if (loading || error) {
-    if (error) {
-      console.error(error);
-    }
-    return null;
-  }
-  if (!state) {
-    return null;
+    state,
+    requireAssignment,
+    userRoleCanDrop,
+    isDropDisabled,
+    draggingFrom
+  } = props;
+  let tone = "default";
+  const isSource = draggingFrom === state.id;
+  if (draggingFrom) {
+    tone = isDropDisabled || isSource ? "default" : "positive";
   }
-  return {
-    label: state.title,
-    // title: state.title,
-    color: state == null ? void 0 : state.color
-  };
+  return /* @__PURE__ */jsx(StyledStickyCard, {
+    paddingY: 4,
+    padding: 3,
+    tone: "inherit",
+    children: /* @__PURE__ */jsxs(Flex, {
+      gap: 3,
+      align: "center",
+      children: [/* @__PURE__ */jsx(Badge, {
+        mode: draggingFrom && !isDropDisabled || isSource ? "default" : "outline",
+        tone,
+        muted: !userRoleCanDrop || isDropDisabled,
+        children: state.title
+      }), userRoleCanDrop ? null : /* @__PURE__ */jsx(Status, {
+        text: "You do not have permissions to move documents to this State",
+        icon: InfoOutlineIcon
+      }), requireAssignment ? /* @__PURE__ */jsx(Status, {
+        text: "You must be assigned to the document to move documents to this State",
+        icon: UserIcon
+      }) : null]
+    })
+  });
 }
-function UpdateWorkflow(props, allStates, actionState) {
-  var _a, _b, _c, _d;
+const StyledFloatingCard = styled(Card)(() => css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    position: fixed;\n    bottom: 0;\n    left: 0;\n    z-index: 1000;\n  "]))));
+function FloatingCard(_ref3) {
+  let {
+    children
+  } = _ref3;
+  const childrenHaveValues = Array.isArray(children) ? children.some(Boolean) : Boolean(children);
+  return /* @__PURE__ */jsx(AnimatePresence, {
+    children: childrenHaveValues ? /* @__PURE__ */jsx(motion.div, {
+      initial: {
+        opacity: 0
+      },
+      animate: {
+        opacity: 1
+      },
+      exit: {
+        opacity: 0
+      },
+      children: /* @__PURE__ */jsx(StyledFloatingCard, {
+        shadow: 3,
+        padding: 3,
+        margin: 3,
+        radius: 3,
+        children: /* @__PURE__ */jsx(Grid, {
+          gap: 2,
+          children
+        })
+      })
+    }, "floater") : null
+  });
+}
+function Verify(props) {
   const {
-    id,
-    type
+    data,
+    userList,
+    states
   } = props;
+  const client = useClient({
+    apiVersion: API_VERSION
+  });
+  const toast = useToast();
+  const documentsWithoutValidMetadataIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
+    var _a;
+    const {
+      documentId,
+      state
+    } = (_a = cur._metadata) != null ? _a : {};
+    const stateExists = states.find(s => s.id === state);
+    return !stateExists && documentId ? [...acc, documentId] : acc;
+  }, []) : [];
+  const documentsWithInvalidUserIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
+    var _a;
+    const {
+      documentId,
+      assignees
+    } = (_a = cur._metadata) != null ? _a : {};
+    const allAssigneesExist = (assignees == null ? void 0 : assignees.length) ? assignees == null ? void 0 : assignees.every(a => userList.find(u => u.id === a)) : true;
+    return !allAssigneesExist && documentId ? [...acc, documentId] : acc;
+  }, []) : [];
+  const documentsWithoutOrderIds = (data == null ? void 0 : data.length) ? data.reduce((acc, cur) => {
+    var _a;
+    const {
+      documentId,
+      orderRank
+    } = (_a = cur._metadata) != null ? _a : {};
+    return !orderRank && documentId ? [...acc, documentId] : acc;
+  }, []) : [];
+  const correctDocuments = React.useCallback(async ids => {
+    toast.push({
+      title: "Correcting...",
+      status: "info"
+    });
+    const tx = ids.reduce((item, documentId) => {
+      return item.patch("workflow-metadata.".concat(documentId), {
+        set: {
+          state: states[0].id
+        }
+      });
+    }, client.transaction());
+    await tx.commit();
+    toast.push({
+      title: "Corrected ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
+      status: "success"
+    });
+  }, [client, states, toast]);
+  const removeUsersFromDocuments = React.useCallback(async ids => {
+    toast.push({
+      title: "Removing users...",
+      status: "info"
+    });
+    const tx = ids.reduce((item, documentId) => {
+      var _a, _b;
+      const {
+        assignees
+      } = (_b = (_a = data.find(d => d._id === documentId)) == null ? void 0 : _a._metadata) != null ? _b : {};
+      const validAssignees = (assignees == null ? void 0 : assignees.length) ?
+      // eslint-disable-next-line max-nested-callbacks
+      assignees.filter(a => {
+        var _a2;
+        return (_a2 = userList.find(u => u.id === a)) == null ? void 0 : _a2.id;
+      }) : [];
+      return item.patch("workflow-metadata.".concat(documentId), {
+        set: {
+          assignees: validAssignees
+        }
+      });
+    }, client.transaction());
+    await tx.commit();
+    toast.push({
+      title: "Corrected ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
+      status: "success"
+    });
+  }, [client, data, toast, userList]);
+  const addOrderToDocuments = React.useCallback(async ids => {
+    var _a, _b;
+    toast.push({
+      title: "Adding ordering...",
+      status: "info"
+    });
+    const firstOrder = (_b = (_a = data[0]) == null ? void 0 : _a._metadata) == null ? void 0 : _b.orderRank;
+    let newLexo = firstOrder && data.length !== ids.length ? LexoRank.parse(firstOrder) : LexoRank.min();
+    const tx = client.transaction();
+    for (let index = 0; index < ids.length; index += 1) {
+      newLexo = newLexo.genNext().genNext();
+      tx.patch("workflow-metadata.".concat(ids[index]), {
+        set: {
+          orderRank: newLexo.toString()
+        }
+      });
+    }
+    await tx.commit();
+    toast.push({
+      title: "Added order to ".concat(ids.length === 1 ? "1 Document" : "".concat(ids.length, " Documents")),
+      status: "success"
+    });
+  }, [data, client, toast]);
+  const orphanedMetadataDocumentIds = React.useMemo(() => {
+    return data.length ? data.filter(doc => !(doc == null ? void 0 : doc._id)).map(doc => doc._metadata.documentId) : [];
+  }, [data]);
+  const handleOrphans = React.useCallback(() => {
+    toast.push({
+      title: "Removing orphaned metadata...",
+      status: "info"
+    });
+    const tx = client.transaction();
+    orphanedMetadataDocumentIds.forEach(id => {
+      tx.delete("workflow-metadata.".concat(id));
+    });
+    tx.commit();
+    toast.push({
+      title: "Removed ".concat(orphanedMetadataDocumentIds.length, " orphaned metadata documents"),
+      status: "success"
+    });
+  }, [client, orphanedMetadataDocumentIds, toast]);
+  return /* @__PURE__ */jsxs(FloatingCard, {
+    children: [documentsWithoutValidMetadataIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+      tone: "caution",
+      onClick: () => correctDocuments(documentsWithoutValidMetadataIds),
+      text: documentsWithoutValidMetadataIds.length === 1 ? "Correct 1 Document State" : "Correct ".concat(documentsWithoutValidMetadataIds.length, " Document States")
+    }) : null, documentsWithInvalidUserIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+      tone: "caution",
+      onClick: () => removeUsersFromDocuments(documentsWithInvalidUserIds),
+      text: documentsWithInvalidUserIds.length === 1 ? "Remove Invalid Users from 1 Document" : "Remove Invalid Users from ".concat(documentsWithInvalidUserIds.length, " Documents")
+    }) : null, documentsWithoutOrderIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+      tone: "caution",
+      onClick: () => addOrderToDocuments(documentsWithoutOrderIds),
+      text: documentsWithoutOrderIds.length === 1 ? "Set Order for 1 Document" : "Set Order for ".concat(documentsWithoutOrderIds.length, " Documents")
+    }) : null, orphanedMetadataDocumentIds.length > 0 ? /* @__PURE__ */jsx(Button, {
+      text: "Cleanup orphaned metadata",
+      onClick: handleOrphans,
+      tone: "caution"
+    }) : null]
+  });
+}
+function WorkflowTool(props) {
+  var _a, _b, _c;
   const {
-    validation,
-    isValidating
-  } = useValidationStatus(id, type);
-  const hasValidationErrors = !isValidating && (validation == null ? void 0 : validation.length) > 0 && validation.find(v => v.level === "error");
-  const user = useCurrentUser();
-  const client = useClient({
+    schemaTypes = [],
+    states = []
+  } = (_b = (_a = props == null ? void 0 : props.tool) == null ? void 0 : _a.options) != null ? _b : {};
+  const isDarkMode = useTheme().sanity.color.dark;
+  const defaultCardTone = isDarkMode ? "default" : "transparent";
+  const userList = useProjectUsers({
     apiVersion: API_VERSION
   });
-  const toast = useToast();
-  const currentUser = useCurrentUser();
+  const user = useCurrentUser();
+  const userRoleNames = ((_c = user == null ? void 0 : user.roles) == null ? void 0 : _c.length) ? user == null ? void 0 : user.roles.map(r => r.name) : [];
+  const {
+    workflowData,
+    operations
+  } = useWorkflowDocuments(schemaTypes);
   const {
     data,
     loading,
     error
-  } = useWorkflowMetadata(id, allStates);
-  const {
-    state: currentState
-  } = data;
+  } = workflowData;
   const {
-    assignees = []
-  } = (_a = data == null ? void 0 : data.metadata) != null ? _a : {};
-  if (error) {
-    console.error(error);
-  }
-  const onHandle = (documentId, newState) => {
-    client.patch("workflow-metadata.".concat(documentId)).set({
-      state: newState.id
-    }).commit().then(() => {
-      props.onComplete();
-      toast.push({
-        status: "success",
-        title: "Document state now \"".concat(newState.title, "\"")
-      });
-    }).catch(err => {
-      props.onComplete();
-      console.error(err);
-      toast.push({
-        status: "error",
-        title: "Document state update failed"
-      });
+    move
+  } = operations;
+  const [undroppableStates, setUndroppableStates] = React.useState([]);
+  const [draggingFrom, setDraggingFrom] = React.useState("");
+  const handleDragStart = React.useCallback(start => {
+    var _a2, _b2;
+    const {
+      draggableId,
+      source
+    } = start;
+    const {
+      droppableId: currentStateId
+    } = source;
+    setDraggingFrom(currentStateId);
+    const document = data.find(item => {
+      var _a3;
+      return ((_a3 = item._metadata) == null ? void 0 : _a3.documentId) === draggableId;
+    });
+    const state = states.find(s => s.id === currentStateId);
+    if (!document || !state) return;
+    const undroppableStateIds = [];
+    const statesThatRequireAssignmentIds = states.filter(s => s.requireAssignment).map(s => s.id);
+    if (statesThatRequireAssignmentIds.length) {
+      const documentAssignees = (_b2 = (_a2 = document._metadata) == null ? void 0 : _a2.assignees) != null ? _b2 : [];
+      const userIsAssignedToDocument = (user == null ? void 0 : user.id) ? documentAssignees.includes(user.id) : false;
+      if (!userIsAssignedToDocument) {
+        undroppableStateIds.push(...statesThatRequireAssignmentIds);
+      }
+    }
+    const statesThatCannotBeTransitionedToIds = state.transitions && state.transitions.length ? states.filter(s => {
+      var _a3;
+      return !((_a3 = state.transitions) == null ? void 0 : _a3.includes(s.id));
+    }).map(s => s.id) : [];
+    if (statesThatCannotBeTransitionedToIds.length) {
+      undroppableStateIds.push(...statesThatCannotBeTransitionedToIds);
+    }
+    const undroppableExceptSelf = undroppableStateIds.filter(id => id !== currentStateId);
+    if (undroppableExceptSelf.length) {
+      setUndroppableStates(undroppableExceptSelf);
+    }
+  }, [data, states, user]);
+  const handleDragEnd = React.useCallback(result => {
+    var _a2, _b2, _c2, _d, _e, _f;
+    setUndroppableStates([]);
+    setDraggingFrom("");
+    const {
+      draggableId,
+      source,
+      destination
+    } = result;
+    if (
+    // No destination?
+    !destination ||
+    // No change in position?
+    destination.droppableId === source.droppableId && destination.index === source.index) {
+      return;
+    }
+    const destinationStateItems = [...filterItemsAndSort(data, destination.droppableId, [], null)];
+    let newOrder;
+    if (!destinationStateItems.length) {
+      newOrder = LexoRank.min().toString();
+    } else if (destination.index === 0) {
+      const firstItemOrderRank = (_b2 = (_a2 = [...destinationStateItems].shift()) == null ? void 0 : _a2._metadata) == null ? void 0 : _b2.orderRank;
+      newOrder = firstItemOrderRank && typeof firstItemOrderRank === "string" ? LexoRank.parse(firstItemOrderRank).genPrev().toString() : LexoRank.min().toString();
+    } else if (destination.index + 1 === destinationStateItems.length) {
+      const lastItemOrderRank = (_d = (_c2 = [...destinationStateItems].pop()) == null ? void 0 : _c2._metadata) == null ? void 0 : _d.orderRank;
+      newOrder = lastItemOrderRank && typeof lastItemOrderRank === "string" ? LexoRank.parse(lastItemOrderRank).genNext().toString() : LexoRank.min().toString();
+    } else {
+      const itemBefore = destinationStateItems[destination.index - 1];
+      const itemBeforeRank = (_e = itemBefore == null ? void 0 : itemBefore._metadata) == null ? void 0 : _e.orderRank;
+      const itemBeforeRankParsed = itemBeforeRank ? LexoRank.parse(itemBeforeRank) : LexoRank.min();
+      const itemAfter = destinationStateItems[destination.index];
+      const itemAfterRank = (_f = itemAfter == null ? void 0 : itemAfter._metadata) == null ? void 0 : _f.orderRank;
+      const itemAfterRankParsed = itemAfterRank ? LexoRank.parse(itemAfterRank) : LexoRank.max();
+      newOrder = itemBeforeRankParsed.between(itemAfterRankParsed).toString();
+    }
+    move(draggableId, destination, states, newOrder);
+  }, [data, move, states]);
+  const uniqueAssignedUsers = React.useMemo(() => {
+    const uniqueUserIds = data.reduce((acc, item) => {
+      var _a2;
+      const {
+        assignees = []
+      } = (_a2 = item._metadata) != null ? _a2 : {};
+      const newAssignees = (assignees == null ? void 0 : assignees.length) ? assignees.filter(a => !acc.includes(a)) : [];
+      return newAssignees.length ? [...acc, ...newAssignees] : acc;
+    }, []);
+    return userList.filter(u => uniqueUserIds.includes(u.id));
+  }, [data, userList]);
+  const [selectedUserIds, setSelectedUserIds] = React.useState(uniqueAssignedUsers.map(u => u.id));
+  const toggleSelectedUser = React.useCallback(userId => {
+    setSelectedUserIds(prev => prev.includes(userId) ? prev.filter(u => u !== userId) : [...prev, userId]);
+  }, []);
+  const resetSelectedUsers = React.useCallback(() => {
+    setSelectedUserIds([]);
+  }, []);
+  const [selectedSchemaTypes, setSelectedSchemaTypes] = React.useState(schemaTypes);
+  const toggleSelectedSchemaType = React.useCallback(schemaType => {
+    setSelectedSchemaTypes(prev => prev.includes(schemaType) ? prev.filter(u => u !== schemaType) : [...prev, schemaType]);
+  }, []);
+  const [invalidDocumentIds, setInvalidDocumentIds] = React.useState([]);
+  const toggleInvalidDocumentId = React.useCallback((docId, action) => {
+    setInvalidDocumentIds(prev => action === "ADD" ? [...prev, docId] : prev.filter(id => id !== docId));
+  }, []);
+  if (!(states == null ? void 0 : states.length)) {
+    return /* @__PURE__ */jsx(Container, {
+      width: 1,
+      padding: 5,
+      children: /* @__PURE__ */jsx(Feedback, {
+        tone: "caution",
+        title: "Plugin options error",
+        description: "No States defined in plugin config"
+      })
     });
-  };
-  if (!data.metadata || currentState && currentState.id === actionState.id) {
-    return null;
-  }
-  const currentStateIndex = allStates.findIndex(s => s.id === (currentState == null ? void 0 : currentState.id));
-  const actionStateIndex = allStates.findIndex(s => s.id === actionState.id);
-  const direction = actionStateIndex > currentStateIndex ? "promote" : "demote";
-  const DirectionIcon = direction === "promote" ? ArrowRightIcon : ArrowLeftIcon;
-  const directionLabel = direction === "promote" ? "Promote" : "Demote";
-  let title = "".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
-  const userRoleCanUpdateState = ((_b = user == null ? void 0 : user.roles) == null ? void 0 : _b.length) && ((_c = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _c.length) ?
-  // If the Action state is limited to specific roles
-  // check that the current user has one of those roles
-  arraysContainMatchingString(user.roles.map(r => r.name), actionState.roles) :
-  // No roles specified on the next state, so anyone can update
-  ((_d = actionState == null ? void 0 : actionState.roles) == null ? void 0 : _d.length) !== 0;
-  if (!userRoleCanUpdateState) {
-    title = "Your User role cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
-  }
-  const actionStateIsAValidTransition = (currentState == null ? void 0 : currentState.id) && currentState.transitions.length ?
-  // If the Current State limits transitions to specific States
-  // Check that the Action State is in Current State's transitions array
-  currentState.transitions.includes(actionState.id) :
-  // Otherwise this isn't a problem
-  true;
-  if (!actionStateIsAValidTransition) {
-    title = "You cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\" from \"").concat(currentState == null ? void 0 : currentState.title, "\"");
-  }
-  const userAssignmentCanUpdateState = actionState.requireAssignment ?
-  // If the Action State requires assigned users
-  // Check the current user ID is in the assignees array
-  currentUser && assignees.length && assignees.includes(currentUser.id) :
-  // Otherwise this isn't a problem
-  true;
-  if (!userAssignmentCanUpdateState) {
-    title = "You must be assigned to the document to ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
   }
-  if (hasValidationErrors) {
-    title = "Document has validation errors, cannot ".concat(directionLabel, " State to \"").concat(actionState.title, "\"");
+  if (error && !data.length) {
+    return /* @__PURE__ */jsx(Container, {
+      width: 1,
+      padding: 5,
+      children: /* @__PURE__ */jsx(Feedback, {
+        tone: "critical",
+        title: "Error querying for Workflow documents"
+      })
+    });
   }
-  return {
-    icon: DirectionIcon,
-    disabled: loading || error || isValidating || hasValidationErrors || !currentState || !userRoleCanUpdateState || !actionStateIsAValidTransition || !userAssignmentCanUpdateState,
-    title,
-    label: actionState.title,
-    onHandle: () => onHandle(id, actionState)
-  };
+  return /* @__PURE__ */jsxs(Flex, {
+    direction: "column",
+    height: "fill",
+    overflow: "hidden",
+    children: [/* @__PURE__ */jsx(Verify, {
+      data,
+      userList,
+      states
+    }), /* @__PURE__ */jsx(Filters, {
+      uniqueAssignedUsers,
+      selectedUserIds,
+      toggleSelectedUser,
+      resetSelectedUsers,
+      schemaTypes,
+      selectedSchemaTypes,
+      toggleSelectedSchemaType
+    }), /* @__PURE__ */jsx(DragDropContext, {
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      children: /* @__PURE__ */jsx(Grid, {
+        columns: states.length,
+        height: "fill",
+        children: states.map((state, stateIndex) => {
+          var _a2, _b2;
+          const userRoleCanDrop = ((_a2 = state == null ? void 0 : state.roles) == null ? void 0 : _a2.length) ? arraysContainMatchingString(state.roles, userRoleNames) : true;
+          const isDropDisabled = !userRoleCanDrop || undroppableStates.includes(state.id);
+          return /* @__PURE__ */jsx(Card, {
+            borderLeft: stateIndex > 0,
+            tone: defaultCardTone,
+            children: /* @__PURE__ */jsxs(Flex, {
+              direction: "column",
+              height: "fill",
+              children: [/* @__PURE__ */jsx(StateTitle, {
+                state,
+                requireAssignment: (_b2 = state.requireAssignment) != null ? _b2 : false,
+                userRoleCanDrop,
+                isDropDisabled,
+                draggingFrom
+              }), /* @__PURE__ */jsx(Box, {
+                flex: 1,
+                children: /* @__PURE__ */jsx(Droppable, {
+                  droppableId: state.id,
+                  isDropDisabled,
+                  mode: "virtual",
+                  renderClone: (provided, snapshot, rubric) => {
+                    const item = data.find(doc => {
+                      var _a3;
+                      return ((_a3 = doc == null ? void 0 : doc._metadata) == null ? void 0 : _a3.documentId) === rubric.draggableId;
+                    });
+                    return /* @__PURE__ */jsx("div", {
+                      ...provided.draggableProps,
+                      ...provided.dragHandleProps,
+                      ref: provided.innerRef,
+                      children: item ? /* @__PURE__ */jsx(DocumentCard, {
+                        isDragDisabled: false,
+                        userRoleCanDrop,
+                        isDragging: snapshot.isDragging,
+                        item,
+                        states,
+                        toggleInvalidDocumentId,
+                        userList
+                      }) : /* @__PURE__ */jsx(Feedback, {
+                        title: "Item not found",
+                        tone: "caution"
+                      })
+                    });
+                  },
+                  children: (provided, snapshot) => /* @__PURE__ */jsxs(Card, {
+                    ref: provided.innerRef,
+                    tone: snapshot.isDraggingOver ? "primary" : defaultCardTone,
+                    height: "fill",
+                    paddingTop: 1,
+                    children: [loading ? /* @__PURE__ */jsx(Flex, {
+                      padding: 5,
+                      align: "center",
+                      justify: "center",
+                      children: /* @__PURE__ */jsx(Spinner, {
+                        muted: true
+                      })
+                    }) : null, /* @__PURE__ */jsx(DocumentList, {
+                      data,
+                      invalidDocumentIds,
+                      selectedSchemaTypes,
+                      selectedUserIds,
+                      state,
+                      states,
+                      toggleInvalidDocumentId,
+                      user,
+                      userList,
+                      userRoleCanDrop
+                    })]
+                  })
+                })
+              })]
+            })
+          }, state.id);
+        })
+      })
+    })]
+  });
 }
+const workflowTool = options => ({
+  name: "workflow",
+  title: "Workflow",
+  component: WorkflowTool,
+  icon: SplitVerticalIcon,
+  options
+});
 const workflow = definePlugin(function () {
   let config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : DEFAULT_CONFIG;
   const {