Site Builder

The Site Builder app is a full website creation platform where users manage projects, design pages in a visual editor, choose from templates, and publish sites to subdomains. It includes AI-assisted content generation with usage tracking.

Key Features

• Project-based website management with thumbnail previews
• Visual page editor at /editor/[projectId]
• Template gallery with category filtering, search, and live preview
• AI content generation with text token and image usage tracking
• Multi-page support within a single project
• Publish/unpublish to subdomains with forms email configuration
• Form submission collection for published sites
• Project CRUD with inline delete on hover

Page Structure

Route	Purpose
/business/apps/sitebuilder	Project dashboard with stats and grid of projects
/business/apps/sitebuilder/[projectId]	Project detail with pages, publishing, and form submissions
/business/apps/sitebuilder/templates	Template gallery with filtering, preview, and use actions
/business/apps/sitebuilder/ai	AI generation history with usage stats

Project Dashboard

The main page shows aggregate stats (total projects, published, live sites) in the header and renders all projects in a responsive grid. Each project card displays a thumbnail (or placeholder), name, last updated date, status badge (draft or published), and an external link icon for published sites. A hover-revealed delete button appears on each card. The “New Project” dialog collects a project name and creates the project via form action, then redirects to the editor.

Project Detail

The [projectId] page is the project management hub. It loads the project with all its pages, the published site (if any), and form submissions for the published site. Actions available:

• Publish — deploys the site to a subdomain with optional forms email
• Unpublish — takes the site offline
• Add page — creates a new page within the project (uses createPageSchema)
• Delete page — removes a page
• Update project — renames the project (uses updateProjectSchema)

Templates

The templates page provides a browsable gallery with category and search filtering. Users can preview a template (fetching its pages via the preview action) and use a template to create a new project (via the use action), which redirects to the editor.

AI History

The AI history page shows usage statistics in three cards (Text Tokens used this month, Images generated this month, Total Generations all time) and a chronological list of past AI generations loaded via the AiHistory component with infinite scroll.

Data Model

Table	Description
ext_sitebuilder.projects	Website projects (name, slug, status, thumbnail_url, user_id)
ext_sitebuilder.pages	Pages within a project
ext_sitebuilder.templates	Pre-built templates with category and slug
ext_sitebuilder.template_pages	Pages belonging to a template
ext_sitebuilder.published_sites	Deployed sites with subdomain mapping
ext_sitebuilder.form_submissions	Form submissions collected from published sites
ext_sitebuilder.ai_generations	Log of AI generation requests and results

Key Types

• Project — id, user_id, name, slug, status (draft | published), thumbnail_url, created_at, updated_at
• Template — id, name, slug, description, category, thumbnail_url
• TemplatePage — id, template_id, name, slug, content

Key Components

Component	Location
Project dashboard + create dialog	src/routes/(app)/business/apps/sitebuilder/+page.svelte
Project detail (pages, publish, forms)	src/routes/(app)/business/apps/sitebuilder/[projectId]/+page.svelte
TemplateGrid	$lib/modules/sitebuilder/templates/index.js
TemplatePreview	$lib/modules/sitebuilder/templates/index.js
AiHistory	$lib/modules/sitebuilder/ai/index.js

Services

All server-side logic is in $lib/modules/sitebuilder/services/index.js:

• listProjects(userId) — list all projects
• getProjectStats(userId) — aggregate stats (total, published, live)
• createProject(userId, data) — create project (optionally from template)
• deleteProject(id) — delete a project
• getProjectWithPages(id) — fetch project with nested pages
• updateProject(id, data) — rename a project
• publishSite(projectId, userId, opts) / unpublishSite(projectId) — deployment lifecycle
• getPublishedSite(projectId) — fetch published site info
• listFormSubmissions(siteId) — form submission data
• createPage(projectId, data) / deletePage(pageId) — page CRUD
• listTemplates(filters) / getTemplatePages(templateId) — template browsing
• listAiGenerations(userId, pagination) / getUsageStats(userId) — AI history

Form Actions

Dashboard

Action	Description
create	Create a new project with a name, redirect to editor
delete	Delete a project by ID

Project Detail ([projectId])

Action	Description
publish	Publish site to subdomain with optional forms email
unpublish	Take the site offline
addPage	Add a new page to the project
deletePage	Remove a page
updateProject	Rename the project

Templates

Action	Description
use	Create a project from a template, redirect to editor
preview	Fetch template pages for the preview modal

Note

Schemas live in $lib/modules/sitebuilder/projects/index.js (createProjectSchema, updateProjectSchema) and $lib/modules/sitebuilder/pages/index.js (createPageSchema). The visual editor itself is mounted at /editor/[projectId], outside the business apps route group.