Cleanup: ConfirmModal primitive, drop dead PageStub, full-width editor (#107)

Three tidy-ups from the audit's deferred list:

- Extracted a ConfirmModal primitive (message + Cancel/Confirm, owning the
  busy lock + inline error) and folded the five hand-rolled confirm dialogs
  onto it: DeleteGarden, LeaveGarden, DeletePlant, DeleteSeedLot, ClearBed.
  Each is now just its message + mutation + labels. Bonus: ClearBed now
  shows a failure inline instead of swallowing it. (CopyGarden stays on
  Modal — it has a name field, not a plain confirm.)
- Removed components/PageStub.tsx — dead scaffolding, imported nowhere.
- The garden editor was squeezed into the max-w-5xl reading measure the
  other pages use; the canvas routes (editor + public garden) now go
  edge-to-edge on desktop, and the top bar matches so the brand aligns with
  the editor's left edge. Mobile was already full-width, so it's unchanged.

Verified live: the Delete-garden confirm renders/cancels; the desktop editor
now uses the full viewport width. tsc + vitest + build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01H3zbym8Doka2d7D48maSgZ

web/src/editor/ClearBedModal.tsx

@@ -1,5 +1,4 @@
-import { Modal } from '@/components/ui/Modal'
-import { Button } from '@/components/ui/Button'
+import { ConfirmModal } from '@/components/ui/ConfirmModal'
 import { useClearObject } from '@/lib/objects'
 
 /** Confirm clearing every active plop from a focused bed (soft-remove — the rows
@@ -19,27 +18,20 @@ export function ClearBedModal({
 }) {
   const clear = useClearObject(gardenId)
   return (
-    <Modal title="Clear bed" onClose={onClose} busy={clear.isPending}>
-      <div className="flex flex-col gap-4">
-        <p className="text-sm text-muted">
-          Remove all <span className="font-medium text-fg">{plopCount}</span>{' '}
-          {plopCount === 1 ? 'plant' : 'plants'} from{' '}
-          <span className="font-medium text-fg">{objectName}</span>? They're marked removed but kept in history.
-        </p>
-        <div className="flex justify-end gap-2">
-          <Button type="button" variant="ghost" onClick={onClose} disabled={clear.isPending}>
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            variant="danger"
-            disabled={clear.isPending || plopCount === 0}
-            onClick={() => clear.mutate(objectId, { onSuccess: onClose })}
-          >
-            {clear.isPending ? 'Clearing…' : 'Clear bed'}
-          </Button>
-        </div>
-      </div>
-    </Modal>
+    <ConfirmModal
+      title="Clear bed"
+      confirmLabel="Clear bed"
+      busyLabel="Clearing…"
+      confirmDisabled={plopCount === 0}
+      errorFallback="Could not clear the bed."
+      onConfirm={() => clear.mutateAsync(objectId)}
+      onClose={onClose}
+    >
+      <p className="text-sm text-muted">
+        Remove all <span className="font-medium text-fg">{plopCount}</span>{' '}
+        {plopCount === 1 ? 'plant' : 'plants'} from{' '}
+        <span className="font-medium text-fg">{objectName}</span>? They're marked removed but kept in history.
+      </p>
+    </ConfirmModal>
   )
 }