feat: use server-actions for authoring flow

This change actually makes the authoring flow work for
the most part by tying in emailing and more.

We have also done a number of quality of life updates to
simplify the codebase overall making it easier to continue
work on the refresh.

apps/web/src/components/forms/edit-document/field-item.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 
-import { X } from 'lucide-react';
+import { Trash } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import { Rnd } from 'react-rnd';
 
@@ -53,8 +53,8 @@ export const FieldItem = ({
 
     const { height, width } = $page.getBoundingClientRect();
 
-    const top = $page.offsetTop;
-    const left = $page.offsetLeft;
+    const top = $page.getBoundingClientRect().top + window.scrollY;
+    const left = $page.getBoundingClientRect().left + window.scrollX;
 
     // X and Y are percentages of the page's height and width
     const pageX = (field.pageX / 100) * width + left;
@@ -63,6 +63,24 @@ export const FieldItem = ({
     const pageHeight = (field.pageHeight / 100) * height;
     const pageWidth = (field.pageWidth / 100) * width;
 
+    console.log(
+      structuredClone({
+        field,
+        top,
+        left,
+        height,
+        width,
+        pageX: coords.pageX,
+        pageY: coords.pageY,
+        pageHeight: coords.pageHeight,
+        pageWidth: coords.pageWidth,
+        newPageX: pageX,
+        newPageY: pageY,
+        newPageHeight: pageHeight,
+        newPageWidth: pageWidth,
+      }),
+    );
+
     setCoords({
       pageX: pageX,
       pageY: pageY,
@@ -92,10 +110,10 @@ export const FieldItem = ({
       key={coords.pageX + coords.pageY + coords.pageHeight + coords.pageWidth}
       className={cn('absolute z-20', {
         'pointer-events-none': passive,
-        'pointer-events-none opacity-75': disabled,
+        'pointer-events-none z-10 opacity-75': disabled,
       })}
-      minHeight={minHeight}
-      minWidth={minWidth}
+      // minHeight={minHeight}
+      // minWidth={minWidth}
       default={{
         x: coords.pageX,
         y: coords.pageY,
@@ -116,16 +134,17 @@ export const FieldItem = ({
     >
       {!disabled && (
         <button
-          className="bg-destructive absolute -right-2 -top-2 z-[9999] flex h-5 w-5 items-center justify-center rounded-full"
+          className="text-muted-foreground/50 hover:text-muted-foreground/80 absolute -right-2 -top-2 z-[9999] flex h-8 w-8 items-center justify-center rounded-full border bg-white shadow-[0_0_0_2px_theme(colors.gray.100/70%)]"
           onClick={() => onRemove?.()}
         >
-          <X className="text-destructive-foreground h-4 w-4" />
+          <Trash className="h-4 w-4" />
         </button>
       )}
 
       <Card
-        className={cn('hover:border-primary/50 h-full w-full bg-white', {
-          'border-primary hover:border-primary': active,
+        className={cn('h-full w-full bg-white', {
+          'border-primary': !disabled,
+          'border-primary/80': active,
         })}
       >
         <CardContent