How to Clone Webflow

Create a full-stack visual website builder called Canvasly using Next.js (App Router), TypeScript, Tailwind CSS, Prisma and SQLite (easy to swap to Postgres later). Think 'Webflow for landing pages', intentionally scoped down.

## What to build
An app where users design a web page on a drag-and-drop canvas, style each element through a side panel, and publish the result to a hosted URL. Monetized by a per-site subscription.

## Key screens
- Dashboard: project grid with thumbnails and Draft/Published badges, New Project button, starter-template chooser
- Editor: three-pane layout - left block library (drag source), center canvas (the rendered page in an iframe), right style/props inspector
- Editor top bar: breakpoint switcher (desktop/tablet/mobile), undo/redo, Preview, Publish
- Publish flow: pick subdomain → snapshot → live page served at /sites/[subdomain]
- Billing page: Free vs Pro plan with Stripe test checkout

## The editor model (build this carefully)
- Represent each page as a tree of nodes: { id, type, props, styles: { base, tablet, mobile }, children }
- Render the tree to actual DOM inside an iframe so styles behave like a real browser
- Selecting a node highlights it and loads its styles into the inspector
- Inspector edits patch the node and re-render the canvas live
- Drag-and-drop inserts a new node at a drop target
- Support reordering siblings and nesting (drag a Text into a Section)
- Implement undo/redo with a history stack of tree snapshots

## Schema (Prisma)
User (id, name, email, plan), Project (id, ownerId, name, subdomain unique, status, thumbnailUrl, updatedAt), Page (id, projectId, name, tree Json), PublishedSite (id, projectId, subdomain unique, html, css, publishedAt)

## Logic that must work
- Subdomain uniqueness enforced at the DB level
- Publish serializes the current tree to static HTML + CSS and stores it on PublishedSite
- The public route renders that snapshot, not the live draft
- Free plan blocks publishing; Pro plan unlocks it (gate in the publish server action)
- Autosave the tree (debounced) via a server action

## Style
The product UI should look like a pro tool: dark side panels (slate-900/800), white canvas, indigo accent (#4353FF), compact inputs in the inspector, monospace for any code fields. Fully responsive isn't required for the editor (desktop-first) but the dashboard and marketing pages should be.

Seed with 1 demo user, 3 projects, and 4 starter templates (SaaS landing, portfolio, event, coming-soon) so the canvas has real content immediately. Mock Stripe with a fake-but-successful checkout if test keys aren't configured.

You are building a production-quality visual website builder (a focused Webflow-style landing-page editor). This is hard; work in small, verifiable steps and run the app after each one.

## Stack
- Next.js 14 App Router, TypeScript, Tailwind CSS, shadcn/ui for the app chrome
- Zustand for editor state (selection, hover, history); the canvas renders inside a sandboxed iframe
- PostgreSQL via Prisma; Supabase for auth (email + Google) and asset storage
- Publishing target: serialize to static HTML/CSS and serve from a public dynamic route (later: push to object storage)
- Stripe for the Pro subscription; Zod for all input validation

## Core architecture (get this right first)
- Page document = a normalized node tree: nodes keyed by id, each { type, props, styles: { base, tablet, mobile }, childIds, parentId }. Store as JSONB.
- The canvas is an iframe; the editor app posts the tree in and listens for selection/hover events back via postMessage. Never let editor React and canvas React share a DOM.
- A single style serializer converts a node's styles object into CSS, used by BOTH the live canvas and the publish step - never two code paths.
- Breakpoint cascade: mobile inherits from tablet inherits from base; the inspector edits the currently active breakpoint only.
- History: command pattern (insert/delete/move/patchStyle) with inverse ops for undo/redo, capped stack.

## Data model
users, projects (subdomain unique), pages (tree JSONB), assets, published_sites (html, css, published_at), subscriptions. Index projects(owner_id), published_sites(subdomain).

## Implementation order
1. Scaffold + auth + dashboard with project CRUD and empty editor route
2. Iframe canvas + node-tree renderer + postMessage selection/hover plumbing
3. Block library with drag-and-drop insert, reorder and nesting at drop targets
4. Style inspector: layout (flex/grid), spacing, typography, color, border, background - writing to the active breakpoint
5. Breakpoint switcher + cascade + per-breakpoint overrides
6. Undo/redo command stack + debounced autosave (server action)
7. Publish: serialize tree → HTML/CSS snapshot → public route /sites/[subdomain]; gate behind Pro plan
8. Assets: image upload to Supabase storage with responsive resizing; reusable components (save a subtree as a symbol)

## Quality bar
- The published HTML must be clean and semantic (real sections, headings, alt text), not a div soup with inline styles
- Editor must stay responsive with a 200-node page; virtualize the layers panel if needed
- Generated CSS uses classes, deduped - identical style sets share one class
- generateMetadata + correct og tags on published pages; Lighthouse 90+ on a published sample

Start with step 1. After each step, tell me exactly what to click in the browser to confirm it works before continuing.

Design the complete UI for a Webflow-style visual website builder called Canvasly. React + Tailwind, shadcn/ui, lucide-react icons. The product should feel like a premium pro design tool: dark editor chrome (slate-900/800 panels), a crisp white canvas, an indigo accent (#4353FF), compact precise controls, Inter for UI and a monospace for code fields.

## Screens to generate

### 1. Project dashboard
- Top bar: logo left, workspace switcher, 'New project' primary button right, avatar menu
- Responsive grid of project cards: page thumbnail, project name, 'Edited 2h ago', a status badge (Draft gray / Published green), and a hover menu (rename, duplicate, delete)
- A 'Start from a template' horizontal scroller of 5 template thumbnails

### 2. The editor (the hero screen - make it detailed)
- Left rail: a vertical icon tab strip (Add, Layers, Pages, Assets)
- When 'Add' is active: a scrollable list of draggable blocks (Section, Container, Heading, Text, Image, Button, Columns, Spacer, Video) each with an icon and a drag handle
- Center: the canvas - a browser-chrome frame around a sample landing page
- On the selected element show a thin indigo outline, a small floating label ('Section'), and blue spacing badges visualizing padding/margin
- Right: the style inspector, organized as collapsible sections
- Inspector - Layout: display flex/grid with alignment grid icons and direction toggles
- Inspector - Spacing: a margin/padding box-model control with four number inputs
- Inspector - Size: width/height/min/max with unit dropdowns (px/%/rem)
- Inspector - Typography: font, size, weight, line-height and a color swatch
- Inspector - Backgrounds, Borders & shadow with swatches and radius inputs
- Use tiny precise number inputs throughout, each with a unit dropdown
- Top bar: project name, a device toggle segmented control (desktop/tablet/mobile icons), undo/redo arrows, a Preview (eye) button, and an indigo Publish button

### 3. Layers panel state
- The left rail switched to 'Layers': an indented tree of the page nodes (Section > Container > Heading)
- Each row has a show/hide eye icon, a drag handle, and the selected node highlighted in indigo

### 4. Publish modal
- A centered modal: a subdomain input with a '.canvasly.site' suffix
- A live availability check (green check / red x) beside the input
- A plan note shown if the user is on Free, nudging an upgrade
- A Publish button; the success state shows the live URL with a copy button

### 5. Billing page
- Two pricing cards (Free / Pro $24/mo) with feature checklists and a current-plan badge

Use realistic placeholder content in the canvas: a SaaS landing page with a headline, subhead, two CTA buttons, and a feature row of 3 cards. The editor is desktop-only; the dashboard, modals and billing should be responsive. Show an empty state for a brand-new project - an empty canvas with a centered 'Drag a block to start' hint.

Build a visual website builder app called Canvasly, modeled on Webflow but scoped to single-page landing sites.

## Entities
- Project: name, subdomain (text, unique), status (draft/published), thumbnailUrl, owner (user reference), updatedAt
- Page: project reference, name, tree (long text / JSON storing the block tree with per-breakpoint styles)
- PublishedSite: project reference, subdomain (unique), html (long text), css (long text), publishedAt
- Asset: owner, fileUrl, type (image), width, height
- Subscription: user reference, plan (free/pro), status

## Roles & permissions
- Any signed-in user can create projects and becomes their owner
- Owners can only edit and publish their own projects
- Free-plan users can create projects but cannot publish
- Admin role: view all projects, manage users, and remove abusive sites
- Admin also sees a revenue dashboard counting active Pro subscriptions

## Pages
1. Dashboard: grid of the user's projects (thumbnail, name, status badge), New Project button, starter templates row
2. Editor: left block library (draggable blocks), center canvas showing the page, right style inspector for the selected block; top bar with device toggle, undo/redo, Preview, Publish
3. Publish screen: choose subdomain, confirm, show live link
4. Billing: Free vs Pro plan, upgrade button
5. Admin dashboard: all projects, user list, count of active Pro subscriptions

## Rules
- A subdomain must be unique across all projects
- Publishing snapshots the page tree into PublishedSite as static HTML + CSS
- The published snapshot is served at the project's subdomain
- Free plan blocks the Publish action; Pro plan unlocks it
- The public site shows the last published snapshot, not the live draft
- Autosave the page tree while editing

## Look & feel
A premium design-tool aesthetic: dark editor panels (slate), a white canvas, an indigo (#4353FF) primary accent, compact form controls in the inspector. The dashboard and billing pages can be lighter and friendlier. Responsive for dashboard and marketing; the editor is desktop-first.

Seed with 1 sample user, 3 projects (one published), and 4 starter templates (SaaS landing, portfolio, event, coming-soon) so the dashboard and editor have content.