Project Structure

pip-ai/
├── app/                          # Nuxt application source
│   ├── app.vue                   # Root Vue component
│   ├── components/               # Vue components
│   │   ├── tabs/                 # Tab-level components
│   │   │   ├── SpecMatchingTab.vue
│   │   │   ├── DocumentBuilderTab.vue
│   │   │   └── FinalizeTab.vue
│   │   ├── floorplan/            # Floor plan components
│   │   │   ├── FloorPlanEditor.vue
│   │   │   ├── FloorPlanOverview.vue
│   │   │   ├── FloorPlanSelectionModal.vue
│   │   │   ├── FloorPlanThumbnails.vue
│   │   │   ├── FloorPlanUpload.vue
│   │   │   └── CanvasContextMenu.vue
│   │   ├── document-builder/     # Document builder components
│   │   │   └── sidebar/          # Sidebar sections
│   │   ├── ui/                   # Reusable UI primitives
│   │   │   ├── badge/
│   │   │   ├── button/
│   │   │   ├── input/
│   │   │   ├── table/
│   │   │   ├── LazyImage.vue
│   │   │   └── ResizeHandle.vue
│   │   ├── Header.vue
│   │   ├── PIPItemsSidebar.vue
│   │   ├── PipUpload.vue
│   │   ├── SpecsPanel.vue
│   │   ├── SpecSearchModal.vue
│   │   ├── CommentsPanel.vue
│   │   └── ...
│   ├── composables/              # Business logic hooks
│   │   ├── useAuth.ts
│   │   ├── useProjects.ts
│   │   ├── usePipItems.ts
│   │   ├── useSpecMatching.ts
│   │   ├── useSpecSearch.ts
│   │   ├── useFloorPlans.ts
│   │   ├── useDocumentBuilder.ts
│   │   ├── useDocumentExport.ts
│   │   ├── useNanoBanana.ts
│   │   ├── usePolyhavenMaterials.ts
│   │   └── ...20+ composables
│   ├── stores/                   # Pinia state stores
│   │   ├── app.ts                # Global app state (theme, UI)
│   │   ├── projects.ts           # Project management
│   │   └── pipItems.ts           # PIP items state
│   ├── pages/                    # File-based routing
│   │   ├── index.vue             # Dashboard
│   │   ├── projects/
│   │   │   └── [id]/
│   │   │       └── index.vue     # Project detail (5-tab workflow)
│   │   ├── admin/
│   │   │   └── specs.vue         # Admin spec management
│   │   └── auth/
│   │       ├── login.vue
│   │       ├── register.vue
│   │       └── callback.vue
│   ├── layouts/                  # Page layouts
│   ├── middleware/                # Route middleware
│   │   ├── auth.ts               # Authentication guard
│   │   └── admin.ts              # Admin-only guard
│   ├── plugins/                  # Nuxt plugins
│   │   └── theme.client.ts       # Client-side theme initialization
│   ├── constants/
│   │   └── themes.ts             # Theme definitions
│   └── types/
│       └── database.types.ts     # Generated Supabase types
├── server/                       # Nuxt server (Nitro)
│   └── api/
│       ├── admin/
│       │   ├── specs/            # Spec upload, callback, retry
│       │   ├── brands/           # Brand management
│       │   └── areas/            # Area management
│       ├── export/               # PDF export routes
│       ├── nano-banana/          # AI image generation
│       └── polyhaven/            # Material library proxy
├── supabase/
│   └── migrations/               # SQL migration files
│       ├── 0000_initial_schema.sql
│       ├── 0001_rls_policies.sql
│       └── ...12 migration files
├── docs/                         # VitePress documentation (this site)
├── tests/                        # Test suite
├── instructions/                 # Project planning docs
├── nuxt.config.ts                # Nuxt configuration
├── package.json
├── tailwind.config.ts
├── vitest.config.ts
└── tsconfig.json

Key Directories

app/components/

Components are organized by feature domain:

• tabs/ — Top-level tab components for the project workflow
• floorplan/ — Floor plan canvas, editor, and related UI
• document-builder/ — Document builder canvas, blocks, and sidebar sections
• ui/ — Reusable primitives (Button, Badge, Input, Table, etc.)
• Root-level components — Shared components used across features

app/composables/

Over 20 composables encapsulate business logic, following the use* naming convention. Each composable provides reactive state and methods for a specific domain.

app/stores/

Pinia stores manage global state:

• app.ts — Theme, sidebar state, global UI toggles
• projects.ts — Current project, project list
• pipItems.ts — PIP items for the active project

server/api/

Nitro server routes organized by feature. All routes use serverSupabaseServiceRole() to bypass RLS for server-side operations.

supabase/migrations/

Sequential SQL migration files. All tables use the pip_ai_ prefix. See Database Schema for details.