Hubs (Site Builder)

Routes

Route	Purpose
/hubs	Hub list with search and create
/hubs/new	3-step creation wizard
/hubs/[hubId]	Hub analytics dashboard
/hubs/[hubId]/builder	Visual page editor
/hubs/[hubId]/pages	Page management
/hubs/[hubId]/media	Media library
/hubs/[hubId]/apps	App marketplace
/hubs/[hubId]/team	Team management
/hubs/[hubId]/settings/brand	Branding & identity
/hubs/[hubId]/settings/theme	Theme customization
/hubs/[hubId]/settings/domain	Custom domain (coming soon)
/hubs/[hubId]/settings/payments	Stripe Connect setup
/hubs/[hubId]/publish	Publishing (placeholder)
/hubs/[hubId]/history	Version history (placeholder)

---

Hub List (/hubs)

• Grid display of user’s hubs with search by handle
• “Add hub” button (hidden if hub limit reached per plan)
• Delete hub: requires typing “delete” to confirm
• Hub limit checked via hubsConfigManager

---

Hub Creation Wizard (/hubs/new)

Step 1: Brand

Field	Type	Required	Validation	Notes
Hub Name	text	Yes	Non-empty	Auto-generates handle
Handle	text	Yes	Max 20 chars, [a-z0-9-] only, unique	Preview: hyvsite.com/@{handle}
Favicon	image upload	No	Max 5MB, any image type	512x512px recommended
Cover Image	image upload	No	Max 10MB, PNG/JPG	1200x600px recommended
Theme	toggle	Yes	Light or Dark

Handle auto-generation: lowercase, spaces to hyphens, strip special chars, max 20 chars.

Step 2: Apps

Select which features to enable (at least 1 required):

App	Description
Portfolio	Showcase work with galleries and case studies
Services	Sell sessions, packages, and consulting
Store	Digital downloads and products
Bookings	Calendar scheduling and appointment slots
Contact	Inbox and contact forms

Step 3: Content (Partially Implemented)

Initial content setup per selected app - forms for portfolio items, services, products, booking schedules.

Firestore Documents Created

• hubs/{hubId} - Main hub config document
• Hub subcollections initialized for selected apps

---

Visual Editor (/hubs/[hubId]/builder)

Block System

Drag-and-drop page builder with block palette (left), canvas (center), and properties inspector (right).

Available Block Types (16+)

Category	Blocks
Hero	hero.carousel, hero.with-image-reviews
Features	feature.image-icon, feature.steps-background
Gallery	gallery.grid, gallery.masonry
Testimonials	testimonials.carousel, testimonials.quote-style
FAQ	faq.centered-cards
Contact	contact.centered, contact.with-form
Forms	form.single-column, form.contact-simple, form.newsletter-signup
Pricing	pricing.cards-toggle
Footer	footer.centered-socials
Store	store.product-grid

Block Operations

• Add: Drag from palette to canvas
• Reorder: Drag existing block to new position
• Edit: Double-click or right-click to open properties panel
• Duplicate: Right-click context menu
• Delete: Right-click with confirmation

Inspector Field Types

String, TextField, RichText, Number, Boolean, Enum, Icon, Image, Link, File, Date, DateTime, Object, Array

Autosave

All block changes immediately update Firestore. No manual save button.

---

Media Library (/hubs/[hubId]/media)

Upload

• Max file size: 100MB
• Drag-and-drop or click to upload
• Progress tracking per file
• Queue management with concurrent upload limiting
• Storage limit checked against subscription plan

Organization

• Folder-based structure with breadcrumb navigation
• Grid and list view toggles
• Search by filename

Asset Metadata Stored

id, hubId, folderId, storagePath, url, thumbnailURL,
originalName, mimeType, fileExtension, size, width, height,
uploaderId, uploadedAt, tags, description, variants

---

Hub Settings

Brand Settings (/settings/brand)

Section	Fields
Identity	Display Name, Category, Tagline
Branding	Favicon (5MB), Cover Image (10MB)
Contact	Email, Phone, Website
Address	Street, Line 2, City, State, Postal, Country
Social Media	Instagram, Twitter, LinkedIn, YouTube, TikTok, Behance, Dribbble

Theme Settings (/settings/theme)

• Light/Dark/System toggle
• Preset color schemes
• Border radius: none/sm/md/lg/xl
• Spacing: compact/cozy/comfortable
• Button shape: soft/pill/square
• Button elevation: none/low/mid/high

Payments Settings (/settings/payments)

Stripe Connect onboarding flow:

1. No Account: Select country (US/MX) → Click “Connect Stripe Account” → Calls createConnectAccountCallable → Redirect to Stripe onboarding
2. Pending: Shows account details, “Complete Setup” button → Calls getConnectAccountLinkCallable → Redirect to Stripe
3. Verified: Shows status (Charges Enabled, Payouts Enabled), capabilities, “View in Stripe” button

Requirements tracking: Currently due, past due, disabled reasons displayed as badges.

Domain Settings (/settings/domain)

Coming soon. Planned: custom domain with DNS check, CNAME/A record guidance, SSL provisioning.

---

Team Management (/settings/team)

Roles & Permissions

Role	Manage Settings	Edit Content	Invite Members	Access Billing	Delete Hub
Owner	Yes	Yes	Yes	Yes	Yes
Editor	No	Yes	No	No	No
Viewer	No	No	No	No	No
Billing	No	No	No	Yes	No

Invite Flow

1. Owner clicks “Invite Member”
2. Enters email + selects role (Editor/Viewer/Billing)
3. Invitation created at hubs/{hubId}/invitations/{id}
4. Pending invitations shown with resend/cancel options

---

Commerce Features

Services

• Title, description, category, subcategory
• Package tiers (basic/standard/premium) with price, delivery days, revisions, deliverables
• FAQ, media, requirements
• Stripe product/price sync via createStripeProductCallable

Products

• Product editor with variants and pricing
• Media management
• Stripe integration

Bookings

• Availability editor (weekly schedule)
• Booking policies and notifications

Portfolio

• Project showcase with media galleries

---

Page Management

Create Page

• Page name: 2-50 characters (required)
• Template selection (Blank, Landing, Services, About, Portfolio, Contact, FAQ)
• Visibility: public/private/unlisted
• Indexable: boolean (search engines)

Page Settings

• Visibility toggle
• SEO: meta title, description, OG image
• Custom URL slug