DocumentBuilderTab

The main tab component for the Document Builder workflow step (Tab 4).

Overview

DocumentBuilderTab provides a drag-and-drop document builder interface where users can assemble project deliverables from various content blocks including text, images, floor plans, specs, and AI-generated before/after comparisons.

Usage

<DocumentBuilderTab :project-id="projectId" />

Features

• Multi-page document canvas
• Drag-and-drop block placement
• Text, image, floor plan, and spec blocks
• AI image generation (Nano Banana) integration
• Page thumbnails for navigation
• Sidebar with content library
• Cover page and table of contents generation
• PDF export

Props

Prop	Type	Required	Description
projectId	string	Yes	The project UUID

Key Dependencies

• useDocumentBuilder — Builder state and logic
• useDocumentExport — PDF export
• useNanoBanana — AI image generation

Source

app/components/tabs/DocumentBuilderTab.vue