create-vexcms 0.1.0-alpha.2 → 0.1.0-alpha.21

package/templates/marketing-site/convex/seed.ts

@@ -7,7 +7,19 @@ import {
   TABLE_SLUG_PAGES,
   TABLE_SLUG_THEMES,
 } from "~/db/constants"
-import config from "~/vex.config"
+import config from "~/vex.config.server"
+import {
+  BLOCK_SLUG_CODE_SHOWCASE,
+  BLOCK_SLUG_CTA,
+  BLOCK_SLUG_FAQ,
+  BLOCK_SLUG_FEATURES,
+  BLOCK_SLUG_FOOTER,
+  BLOCK_SLUG_HEADER,
+  BLOCK_SLUG_HERO,
+  BLOCK_SLUG_HOW_IT_WORKS,
+  BLOCK_SLUG_ROADMAP,
+  BLOCK_SLUG_STATS,
+} from "~/vexcms/blocks/constants"
 
 import { internalMutation } from "./_generated/server"
 
@@ -330,7 +342,7 @@ export const init = internalMutation({
     const created: string[] = []
     const skipped: string[] = []
 
-    let activeThemeId: string | null = null
+    let activeThemeId: null | string = null
     for (const preset of THEME_PRESETS) {
       const existing = await ctx.db
         .query(TABLE_SLUG_THEMES)
@@ -338,12 +350,12 @@ export const init = internalMutation({
         .first()
       if (existing) {
         skipped.push(`theme:${preset.name}`)
-        if (preset.name === "Stark × Ember") activeThemeId = existing._id
+        if (preset.name === "Stark × Ember") {activeThemeId = existing._id}
         continue
       }
       const id = await ctx.db.insert(TABLE_SLUG_THEMES, preset)
       created.push(`theme:${preset.name}`)
-      if (preset.name === "Stark × Ember") activeThemeId = id
+      if (preset.name === "Stark × Ember") {activeThemeId = id}
     }
 
     const existingSettings = await getGlobal({
@@ -360,8 +372,8 @@ export const init = internalMutation({
         config,
         slug: GLOBAL_SLUG_SITE_SETTINGS,
         data: {
-          name: "My Site",
-          description: "Built with Vex CMS.",
+          name: "VexCMS",
+          description: "A headless CMS built natively on Convex.",
           activeTheme: activeThemeId ? [activeThemeId] : [],
         },
         access: { bypass: true },
@@ -380,19 +392,26 @@ export const init = internalMutation({
         name: "Main Header",
         content: [
           {
-            blockType: "header",
+            blockType: BLOCK_SLUG_HEADER,
             blockName: "Site Header",
             id: "main-header",
-            logoText: "My Site",
+            logoText: "VexCMS",
             logoHref: "/",
             menuItems: [
               { label: "Features", href: "/features" },
               { label: "Roadmap", href: "/roadmap" },
-              { label: "Docs", href: "/docs" },
+              { label: "Docs", href: "https://docs.vexcms.dev" },
+              // A scaffolded project has no always-visible admin affordance in
+              // the header (`Header/index.tsx` still gates on
+              // `useCanAccessAdminPanel()`), so this nav item is the owner's
+              // route to the panel. `/admin` is gated server-side, so linking
+              // it publicly exposes nothing. `apps/www` drops this entry
+              // because its header renders a button unconditionally.
+              { label: "Admin", href: "/admin" },
             ],
             actionButtons: [
-              { label: "GitHub", href: "https://github.com/vexcms/vex", variant: ["ghost"] },
-              { label: "Get Started", href: "/docs", variant: ["default"] },
+              { label: "GitHub", href: "https://github.com/ianyimi/vex", variant: ["ghost"] },
+              { label: "Get started", href: "https://docs.vexcms.dev/guides/quickstart/", variant: ["default"] },
             ],
           },
         ],
@@ -411,17 +430,22 @@ export const init = internalMutation({
         name: "Main Footer",
         content: [
           {
-            blockType: "footer",
+            blockType: BLOCK_SLUG_FOOTER,
             blockName: "Site Footer",
             id: "main-footer",
-            logoText: "My Site",
-            copyright: "My Site. All rights reserved.",
+            logoText: "VexCMS",
+            copyright: "VexCMS. Apache-2.0 licensed.",
             links: [
               { label: "Features", href: "/features" },
               { label: "Roadmap", href: "/roadmap" },
-              { label: "Documentation", href: "/docs" },
+              { label: "Docs", href: "https://docs.vexcms.dev" },
+              { label: "Quickstart", href: "https://docs.vexcms.dev/guides/quickstart/" },
+              { label: "Admin demo", href: "/admin" },
+              { label: "npm", href: "https://www.npmjs.com/package/@vexcms/core" },
+              { label: "Licence", href: "https://github.com/ianyimi/vex/blob/master/LICENSE" },
+              { label: "Convex", href: "https://convex.dev" },
             ],
-            socialLinks: [{ platform: "GitHub", href: "https://github.com/vexcms/vex", icon: "Github" }],
+            socialLinks: [{ platform: "GitHub", href: "https://github.com/ianyimi/vex", icon: "Github" }],
           },
         ],
       })
@@ -440,87 +464,202 @@ export const init = internalMutation({
         slug: "home",
         blocks: [
           {
-            blockType: "hero",
+            blockType: BLOCK_SLUG_HERO,
             blockName: "Hero",
             id: "home-hero",
-            badgeText: "Now in public beta",
-            badgeLink: "/docs",
-            heading: "The CMS built for Convex",
+            variant: ["full"],
+            installCommand: "pnpm create vexcms@alpha",
+            badgeText: "v0.1.0-alpha — now on npm",
+            badgeLink: "https://www.npmjs.com/package/@vexcms/core",
+            heading: "The CMS that thinks in types.",
             subheading:
-              "Vex CMS gives you a full-featured content management system powered by Convex — real-time data, type-safe schemas, and a beautiful admin panel out of the box.",
-            primaryCtaLabel: "Get Started",
-            primaryCtaHref: "/docs",
+              "A headless CMS built natively on Convex. Declare your collections in TypeScript and Vex generates the Convex schema, the types, and the queries — no translation layer. Every edit reaches every subscriber in milliseconds.",
+            primaryCtaLabel: "Read the docs",
+            primaryCtaHref: "https://docs.vexcms.dev/guides/quickstart/",
             secondaryCtaLabel: "View on GitHub",
-            secondaryCtaHref: "https://github.com/vexcms/vex",
+            secondaryCtaHref: "https://github.com/ianyimi/vex",
           },
           {
-            blockType: "features",
+            blockType: BLOCK_SLUG_STATS,
+            blockName: "Stats",
+            id: "home-stats",
+            items: [
+              {
+                value: "12",
+                label: "field types",
+                description:
+                  "text, url, number, checkbox, select, date, color, upload, relationship, group, array, blocks",
+              },
+              {
+                value: "8",
+                label: "published packages",
+                description:
+                  "core, react, next, cli, better-auth, file-storage-convex, richtext-plate, create-vexcms",
+              },
+              {
+                value: "0",
+                label: "database config",
+                description: "Convex is the database. There is no connection string",
+              },
+              {
+                value: "1",
+                label: "command to start",
+                description:
+                  "pnpm create vexcms@alpha scaffolds Next.js, Convex, auth, and the admin panel",
+              },
+            ],
+          },
+          {
+            blockType: BLOCK_SLUG_FEATURES,
             blockName: "Features",
             id: "home-features",
-            heading: "Everything you need to manage content",
+            heading: "Everything comes from one schema.",
             subheading:
-              "Built on Convex's real-time infrastructure with a developer experience that doesn't compromise on power.",
+              "Collections, the Convex tables behind them, the TypeScript types, the Zod validators, the admin forms, and the access rules are all derived from the same declaration.",
             features: [
               {
-                title: "Real-Time by Default",
+                title: "Convex-native codegen",
                 description:
-                  "Every query is live. Content updates appear instantly across all connected clients — no polling, no webhooks.",
-                icon: "Zap",
+                  "vex dev writes your Convex schema, TypeScript interfaces, and Zod validators straight from defineCollection(). There is no hand-maintained schema.ts",
+                icon: "Wand",
               },
               {
-                title: "Type-Safe Schemas",
+                title: "End-to-end types",
                 description:
-                  "Define your collections with TypeScript. Vex generates Convex schemas, Zod validators, and typed queries automatically.",
-                icon: "Shield",
+                  "Fields, relationships, and query return types are checked from the database to the component. Rename a field and the compiler names every call site",
+                icon: "ShieldCheck",
               },
               {
-                title: "Developer First",
+                title: "Real-time admin panel",
                 description:
-                  "Code-first configuration, CLI tooling, and a clean API. Build with the tools you already know and love.",
-                icon: "Code",
+                  "Every list view is a Convex subscription. Pagination, live totalDocs, and bulk operations update without a refetch",
+                icon: "Radio",
+              },
+              {
+                title: "RBAC with indexed access",
+                description:
+                  "Document-level rules with { constraints } that compile to withIndex ranges inside the query, plus per-call access.action / access.bypass and an anonRole fallback",
+                icon: "Lock",
+              },
+              {
+                title: "Globals and themes",
+                description:
+                  "defineGlobal() gives you singletons like site settings. Themes are a collection — 32 shadcn tokens × light and dark, stored as oklch and applied on first paint",
+                icon: "Boxes",
+              },
+              {
+                title: "Page-builder blocks",
+                description:
+                  "A blocks field composes typed content blocks into a discriminated union. Each block is a config plus a React renderer, colocated",
+                icon: "LayoutGrid",
               },
             ],
           },
           {
-            blockType: "how_it_works",
+            blockType: BLOCK_SLUG_CODE_SHOWCASE,
+            blockName: "Code Showcase",
+            id: "home-code-showcase",
+            heading: "Write the collection. Get the database.",
+            subheading:
+              "A blog's Posts collection on the left, hand-written once. On the right, the Convex schema vex dev emits from it — validators, ids, and indexes included, never edited by hand.",
+            panes: [
+              {
+                label: "You write",
+                filename: "src/vexcms/collections/posts.ts",
+                language: ["ts"],
+                authored: ["authored"],
+                code: `export const posts = defineCollection({
+  slug: "posts",
+  admin: { useAsTitle: "title", icon: "Newspaper" },
+  fields: {
+    title: text({ label: "Title", required: true }),
+    slug: text({ label: "Slug", required: true, index: "by_slug" }),
+    excerpt: text({ label: "Excerpt" }),
+    featured: checkbox({ label: "Featured" }),
+    readingMinutes: number({ label: "Reading Minutes" }),
+    coverImage: upload({ to: "images", label: "Cover Image" }),
+    author: relationship({ label: "Author", collection: { slug: "authors" } }),
+    tags: array({ label: "Tags", items: text({ label: "Tag" }) }),
+    seo: group({
+      label: "SEO",
+      fields: {
+        metaTitle: text({ label: "Meta Title" }),
+        metaDescription: text({ label: "Meta Description" }),
+      },
+    }),
+  },
+  labels: { singular: "Post", plural: "Posts" },
+})`,
+              },
+              {
+                label: "Vex generates",
+                filename: "convex/vex.schema.ts",
+                language: ["ts"],
+                authored: ["generated"],
+                code: `// ⚠️ AUTO-GENERATED BY VEX CMS — DO NOT EDIT ⚠️
+// Run 'vex dev' or 'vex generate' to update this file.
+
+import { defineTable } from "convex/server"
+import { v } from "convex/values"
+
+export const posts = defineTable({
+  title: v.string(),
+  slug: v.string(),
+  excerpt: v.optional(v.string()),
+  featured: v.optional(v.boolean()),
+  readingMinutes: v.optional(v.number()),
+  coverImage: v.optional(v.array(v.id("images"))),
+  author: v.optional(v.array(v.id("authors"))),
+  tags: v.optional(v.array(v.string())),
+  seo: v.optional(
+    v.object({ metaTitle: v.optional(v.string()), metaDescription: v.optional(v.string()) })
+  ),
+})
+  .index("by_slug", ["slug"])
+  .index("by_author", ["author"])`,
+              },
+            ],
+          },
+          {
+            blockType: BLOCK_SLUG_HOW_IT_WORKS,
             blockName: "How It Works",
             id: "home-how-it-works",
-            heading: "Get started in minutes",
-            subheading: "From zero to a fully functional CMS in four steps. No boilerplate, no config files to wrestle with.",
+            heading: "From zero to a live CMS in four steps.",
+            subheading: "No boilerplate and no config files to wrestle with — the scaffolder wires Convex, auth, and the admin panel for you.",
             steps: [
               {
                 icon: "Terminal",
                 title: "Scaffold your project",
                 description:
-                  "Run npx create-vexcms@latest to get a Next.js app with Convex, authentication, and the admin panel pre-configured.",
+                  "pnpm create vexcms@alpha gives you a Next.js app with Convex, Better Auth, and the admin panel already wired",
               },
               {
                 icon: "Code",
                 title: "Define your schema",
                 description:
-                  "Use defineCollection() and field helpers to declare your content model in TypeScript. Vex generates your Convex schema, types, and queries automatically.",
+                  "Declare collections with defineCollection() and the field helpers. vex dev watches and regenerates your Convex schema, types, and validators",
               },
               {
                 icon: "LayoutGrid",
                 title: "Build with blocks",
                 description:
-                  "Compose pages from reusable content blocks. Each block is a React component with a typed config — drag, drop, and edit inline from the admin panel.",
+                  "Compose pages from typed content blocks. Each block is a config plus a renderer, edited from the admin panel",
               },
               {
                 icon: "Rocket",
                 title: "Deploy and go live",
                 description:
-                  "Push to Convex and deploy your Next.js app. Real-time content updates flow to every connected client instantly.",
+                  "Push to Convex, deploy the Next.js app. Content changes propagate to every subscriber with no cache invalidation",
               },
             ],
           },
           {
-            blockType: "roadmap",
+            blockType: BLOCK_SLUG_ROADMAP,
             blockName: "Roadmap",
             id: "home-roadmap",
             heading: "Roadmap",
             subheading:
-              "What we've shipped and what's coming next. Vex CMS is actively developed — here's where we're headed.",
+              "What we've shipped and what's coming next. VexCMS is actively developed and everything ships as 0.1.0-alpha.",
             items: [
               {
                 feature: "12 Field Types",
@@ -571,18 +710,30 @@ export const init = internalMutation({
               },
               {
                 feature: "Versioning & Drafts",
-                description: "Draft/publish workflow with live preview — in active development.",
-                status: ["coming-soon"],
+                description: "Draft/publish workflow with autosave and version history — in active development.",
+                status: ["in-progress"],
               },
               {
-                feature: "Richtext, JSON, Email & Textarea Fields",
-                description: "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
+                feature: "Live Preview",
+                description:
+                  "Side-by-side preview of draft content against the real frontend before publishing — builds on the drafts infrastructure.",
+                status: ["in-progress"],
+              },
+              {
+                feature: "Form Builder",
+                description:
+                  "Composable form fields beyond content editing, with generated validation and submission storage.",
                 status: ["planned"],
               },
               {
-                feature: "Form Builder & Lifecycle Hooks",
+                feature: "Field Input Consistency Pass",
                 description:
-                  "Composable form fields beyond content editing, plus beforeChange/afterChange hooks for custom side effects.",
+                  "Touch-ups across field inputs — starting with the relationship field — for consistent interaction patterns in the admin panel.",
+                status: ["planned"],
+              },
+              {
+                feature: "Richtext, JSON, Email & Textarea Fields",
+                description: "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
                 status: ["planned"],
               },
               {
@@ -590,52 +741,85 @@ export const init = internalMutation({
                 description: "Invite users, assign roles, and issue scoped read-only API tokens for external integrations.",
                 status: ["planned"],
               },
+              {
+                feature: "Lifecycle Hooks",
+                description:
+                  "beforeChange/afterChange hooks for custom side effects around document writes.",
+                status: ["future"],
+              },
+              {
+                feature: "Analytics Adapter",
+                description:
+                  "Per-document and per-block metrics surfaced directly in the admin panel.",
+                status: ["future"],
+              },
+              {
+                feature: "Multi-Component Workspaces",
+                description: "Compose several Convex components into one workspace.",
+                status: ["future"],
+              },
+              {
+                feature: "Plugin System",
+                description: "Third-party extensions over collections, fields, and admin views.",
+                status: ["future"],
+              },
+              {
+                feature: "React Package Testing Suite",
+                description:
+                  "Exportable Vitest suite from @vexcms/react for testing custom field components and admin extensions in consumer projects.",
+                status: ["planned"],
+              },
             ],
           },
           {
-            blockType: "faq",
+            blockType: BLOCK_SLUG_FAQ,
             blockName: "FAQ",
             id: "home-faq",
-            heading: "Frequently Asked Questions",
-            subheading: "Everything you need to know about Vex CMS and building with Convex.",
-            supportLink: "https://github.com/vexcms/vex/issues",
+            heading: "Questions we keep getting.",
+            subheading: "",
+            supportLink: "https://github.com/ianyimi/vex/issues",
             items: [
               {
-                question: "What is Vex CMS?",
+                question: "What is VexCMS?",
+                answer:
+                  "A headless CMS built on Convex. You define collections in TypeScript; Vex generates the Convex schema, the TypeScript types, and the queries, and gives you a real-time admin panel over them.",
+              },
+              {
+                question: "How is this different from other headless CMS platforms?",
                 answer:
-                  "Vex CMS is a headless content management system built on Convex. It provides real-time data, type-safe schemas, RBAC, and a beautiful admin panel — all configured with TypeScript.",
+                  "Most of them put a REST or GraphQL API in front of a database you configure separately. Vex has no API layer and no database configuration: Convex is the database, your schema is code, and every read is a live subscription.",
               },
               {
-                question: "How is Vex different from other headless CMS platforms?",
+                question: "Do I need to know Convex?",
                 answer:
-                  "Vex is powered by Convex's real-time database, so content updates are instant across all clients — no polling, no webhooks. Your schema is defined in code, giving you full type safety from database to frontend.",
+                  "Some familiarity helps, but the CLI generates the schema, queries, and types from your collection definitions. You mostly write field declarations.",
               },
               {
-                question: "Do I need to know Convex to use Vex CMS?",
+                question: "Is it production ready?",
                 answer:
-                  "Basic familiarity helps, but Vex handles most of the complexity for you. The CLI generates your Convex schema, queries, and types automatically from your collection definitions.",
+                  "No. Everything ships as 0.1.0-alpha. Versioning, drafts, and live preview are in progress. There are 12 field types today; richtext, json, tabs, and ui are planned, not built. See the roadmap.",
               },
               {
-                question: "Is Vex CMS free?",
+                question: "Which frameworks does it support?",
                 answer:
-                  "Yes — Vex CMS is open source and free to use. You only pay for your Convex usage, which has a generous free tier for most projects.",
+                  "The data layer works with any Convex client. The admin panel is Next.js today, via @vexcms/next and @vexcms/react. A TanStack Start adapter is planned.",
               },
               {
-                question: "How do I get started?",
+                question: "What does it cost?",
                 answer:
-                  "Run npx create-vexcms@latest to scaffold a new project with Vex CMS pre-configured — Next.js app, Convex backend, authentication, and admin panel in under a minute.",
+                  "Nothing. VexCMS is Apache-2.0 licensed. You pay for your Convex usage, which has a free tier.",
               },
             ],
           },
           {
-            blockType: "cta",
+            blockType: BLOCK_SLUG_CTA,
             blockName: "CTA",
             id: "home-cta",
-            heading: "Ready to build with Vex CMS?",
-            subheading: "Get started in minutes with create-vexcms. Real-time content management powered by Convex.",
+            heading: "Start with a schema. Ship in an hour.",
+            subheading: "Scaffold a Next.js + Convex project with authentication, the admin panel, and this marketing site already seeded.",
             actions: [
-              { label: "Get Started", href: "/docs" },
-              { label: "View on GitHub", href: "https://github.com/vexcms/vex" },
+              { label: "Read the docs", href: "https://docs.vexcms.dev/guides/quickstart/" },
+              { label: "View on GitHub", href: "https://github.com/ianyimi/vex" },
             ],
           },
         ],
@@ -643,6 +827,267 @@ export const init = internalMutation({
       created.push("page:home")
     }
 
+    const existingFeatures = await ctx.db
+      .query(TABLE_SLUG_PAGES)
+      .withIndex("by_slug", (q) => q.eq("slug", "features"))
+      .first()
+    if (existingFeatures) {
+      skipped.push("page:features")
+    } else {
+      await ctx.db.insert(TABLE_SLUG_PAGES, {
+        title: "Features",
+        slug: "features",
+        blocks: [
+          {
+            blockType: BLOCK_SLUG_HERO,
+            blockName: "Hero",
+            id: "features-hero",
+            variant: ["compact"],
+            heading: "Everything comes from one schema.",
+            subheading:
+              "Collections, the Convex tables behind them, the TypeScript types, the Zod validators, the admin forms, and the access rules are all derived from the same declaration.",
+            primaryCtaLabel: "Read the docs",
+            primaryCtaHref: "https://docs.vexcms.dev/guides/quickstart/",
+          },
+          {
+            blockType: BLOCK_SLUG_FEATURES,
+            blockName: "Features",
+            id: "features-features",
+            heading: "Everything you need to manage content",
+            subheading:
+              "Built on Convex's real-time infrastructure with a developer experience that doesn't compromise on power.",
+            features: [
+              {
+                title: "Real-Time by Default",
+                description:
+                  "Every query is live. Content updates appear instantly across all connected clients — no polling, no webhooks.",
+                icon: "Zap",
+              },
+              {
+                title: "Type-Safe Schemas",
+                description:
+                  "Define your collections with TypeScript. Vex generates Convex schemas, Zod validators, and typed queries automatically.",
+                icon: "Shield",
+              },
+              {
+                title: "Developer First",
+                description:
+                  "Code-first configuration, CLI tooling, and a clean API. Build with the tools you already know and love.",
+                icon: "Code",
+              },
+            ],
+          },
+          {
+            blockType: BLOCK_SLUG_HOW_IT_WORKS,
+            blockName: "How It Works",
+            id: "features-how-it-works",
+            heading: "Get started in minutes",
+            subheading:
+              "From zero to a fully functional CMS in four steps. No boilerplate, no config files to wrestle with.",
+            steps: [
+              {
+                icon: "Terminal",
+                title: "Scaffold your project",
+                description:
+                  "pnpm create vexcms@alpha gives you a Next.js app with Convex, Better Auth, and the admin panel already wired",
+              },
+              {
+                icon: "Code",
+                title: "Define your schema",
+                description:
+                  "Use defineCollection() and field helpers to declare your content model in TypeScript. Vex generates your Convex schema, types, and queries automatically.",
+              },
+              {
+                icon: "LayoutGrid",
+                title: "Build with blocks",
+                description:
+                  "Compose pages from typed content blocks. Each block is a config plus a renderer, edited from the admin panel",
+              },
+              {
+                icon: "Rocket",
+                title: "Deploy and go live",
+                description:
+                  "Push to Convex and deploy your Next.js app. Real-time content updates flow to every connected client instantly — no cache invalidation needed.",
+              },
+            ],
+          },
+          {
+            blockType: BLOCK_SLUG_CTA,
+            blockName: "CTA",
+            id: "features-cta",
+            heading: "Start with a schema. Ship in an hour.",
+            subheading:
+              "Scaffold a Next.js + Convex project with authentication, the admin panel, and this marketing site already seeded.",
+            actions: [
+              { label: "Read the docs", href: "https://docs.vexcms.dev/guides/quickstart/" },
+              { label: "View on GitHub", href: "https://github.com/ianyimi/vex" },
+            ],
+          },
+        ],
+      })
+      created.push("page:features")
+    }
+
+    const existingRoadmapPage = await ctx.db
+      .query(TABLE_SLUG_PAGES)
+      .withIndex("by_slug", (q) => q.eq("slug", "roadmap"))
+      .first()
+    if (existingRoadmapPage) {
+      skipped.push("page:roadmap")
+    } else {
+      await ctx.db.insert(TABLE_SLUG_PAGES, {
+        title: "Roadmap",
+        slug: "roadmap",
+        blocks: [
+          {
+            blockType: BLOCK_SLUG_HERO,
+            blockName: "Hero",
+            id: "roadmap-hero",
+            variant: ["compact"],
+            heading: "Shipped, in progress, and being explored.",
+            subheading:
+              "VexCMS is under active development. Everything ships as 0.1.0-alpha until the core feature set is stable enough for a v0.1.0 release. This page is edited from the admin panel, not from a source file.",
+            primaryCtaLabel: "Read the docs",
+            primaryCtaHref: "https://docs.vexcms.dev/guides/quickstart/",
+          },
+          {
+            blockType: BLOCK_SLUG_ROADMAP,
+            blockName: "Roadmap",
+            id: "roadmap-roadmap",
+            heading: "Roadmap",
+            subheading:
+              "What we've shipped and what's coming next. VexCMS is actively developed and everything ships as 0.1.0-alpha.",
+            items: [
+              {
+                feature: "12 Field Types",
+                description:
+                  "text, url, color, number, checkbox, date, select, relationship, array, group, blocks, and upload — no richtext, json, or tabs yet.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Convex Schema Codegen",
+                description:
+                  "vex dev / vex generate write your Convex schema, TypeScript types, and Zod validators from defineCollection() — no hand-written schema.ts.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Real-Time Admin Panel",
+                description:
+                  "DataTable with pagination, live totalDocs, and bulk operations — every list view is a Convex subscription.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Media Library",
+                description:
+                  "Convex file storage adapter with a searchable, paginated media picker built into every upload field.",
+                status: ["shipped"],
+              },
+              {
+                feature: "RBAC & Access Control",
+                description:
+                  "Document-level access rules, indexed constraints that compile to withIndex ranges, per-call access.action/bypass overrides, and an anonRole fallback for public reads.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Custom Theme System",
+                description:
+                  "Database-driven themes with light/dark mode, 32 shadcn tokens per mode, and OKLCH color support — live-updates with zero page reload.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Better Auth Integration",
+                description:
+                  "Email/password and OAuth out of the box, with organizations and API keys as opt-in plugins.",
+                status: ["shipped"],
+              },
+              {
+                feature: "CLI & Scaffolder",
+                description:
+                  "vex dev, vex generate, and create-vexcms for instant project setup — bare or full marketing-site templates.",
+                status: ["shipped"],
+              },
+              {
+                feature: "Versioning & Drafts",
+                description: "Draft/publish workflow with autosave and version history — in active development.",
+                status: ["in-progress"],
+              },
+              {
+                feature: "Live Preview",
+                description:
+                  "Side-by-side preview of draft content against the real frontend before publishing — builds on the drafts infrastructure.",
+                status: ["in-progress"],
+              },
+              {
+                feature: "Form Builder",
+                description:
+                  "Composable form fields beyond content editing, with generated validation and submission storage.",
+                status: ["planned"],
+              },
+              {
+                feature: "Field Input Consistency Pass",
+                description:
+                  "Touch-ups across field inputs — starting with the relationship field — for consistent interaction patterns in the admin panel.",
+                status: ["planned"],
+              },
+              {
+                feature: "Richtext, JSON, Email & Textarea Fields",
+                description:
+                  "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
+                status: ["planned"],
+              },
+              {
+                feature: "Team Management & API Keys",
+                description:
+                  "Invite users, assign roles, and issue scoped read-only API tokens for external integrations.",
+                status: ["planned"],
+              },
+              {
+                feature: "Lifecycle Hooks",
+                description:
+                  "beforeChange/afterChange hooks for custom side effects around document writes.",
+                status: ["future"],
+              },
+              {
+                feature: "Analytics Adapter",
+                description:
+                  "Per-document and per-block metrics surfaced directly in the admin panel.",
+                status: ["future"],
+              },
+              {
+                feature: "Multi-Component Workspaces",
+                description: "Compose several Convex components into one workspace.",
+                status: ["future"],
+              },
+              {
+                feature: "Plugin System",
+                description: "Third-party extensions over collections, fields, and admin views.",
+                status: ["future"],
+              },
+              {
+                feature: "React Package Testing Suite",
+                description:
+                  "Exportable Vitest suite from @vexcms/react for testing custom field components and admin extensions in consumer projects.",
+                status: ["planned"],
+              },
+            ],
+          },
+          {
+            blockType: BLOCK_SLUG_CTA,
+            blockName: "CTA",
+            id: "roadmap-cta",
+            heading: "Start with a schema. Ship in an hour.",
+            subheading:
+              "Scaffold a Next.js + Convex project with authentication, the admin panel, and this marketing site already seeded.",
+            actions: [
+              { label: "Read the docs", href: "https://docs.vexcms.dev/guides/quickstart/" },
+              { label: "View on GitHub", href: "https://github.com/ianyimi/vex" },
+            ],
+          },
+        ],
+      })
+      created.push("page:roadmap")
+    }
+
     return { created, skipped }
   },
 })