Components Overview

PIP AI components are organized by feature domain and follow Vue 3 Composition API conventions with <script setup> syntax.

Organization

app/components/
├── tabs/              # Top-level workflow tabs
├── floorplan/         # Floor plan editor & related UI
├── document-builder/  # Document builder components
│   └── sidebar/       # Sidebar sections
├── ui/                # Reusable UI primitives
│   ├── badge/
│   ├── button/
│   ├── input/
│   └── table/
└── *.vue              # Shared feature components

Conventions

Auto-imported — All components are auto-imported by Nuxt; no manual imports needed
<script setup> — All components use Vue 3 <script setup> syntax
TypeScript — Props and emits are typed using TypeScript interfaces
Tailwind CSS — Styling uses Tailwind utility classes
Composables — Business logic lives in app/composables/, not in components

Component Categories

Tab Components

Top-level components for the 5-tab project workflow.

Common Components

Shared components used across features — Header, Sidebar, Upload, Processing status.

Floor Plan Components

Interactive floor plan viewer, editor, thumbnails, and selection modals.

Document Builder Components

Drag-and-drop document builder with blocks, sidebar, and AI integration.

Spec Components

Spec matching panel, search modal, table views, and library management.

Project Components

Project cards, upload, creation, and settings modals.

UI Components

Reusable primitives — Button, Badge, Input, Table, ResizeHandle, LazyImage.