create-vexcms 0.0.19 → 0.1.0-alpha.2

package/templates/marketing-site/src/vexcms/blocks/FAQ/index.tsx

@@ -1,4 +1,4 @@
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import Link from "next/link"
 
@@ -7,7 +7,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
-} from "~/components/ui/accordion"
+} from "@vexcms/react"
 
 export { faqBlock } from "./config"
 

package/templates/marketing-site/src/vexcms/blocks/Features/config.ts

@@ -1,6 +1,5 @@
-import { array, defineBlock, object, text } from "@vexcms/core"
+import { array, defineBlock, group, text } from "@vexcms/core"
 
-import IconPickerField from "~/components/admin/IconPickerField"
 import { BLOCK_SLUG_FEATURES } from "../constants"
 
 export const featuresBlock = defineBlock({
@@ -20,16 +19,13 @@ export const featuresBlock = defineBlock({
     features: array({
       label: "Features",
       required: true,
-      items: object({
+      items: group({
         fields: {
           title: text({ label: "Title", required: true }),
           description: text({ label: "Description", required: true }),
           icon: text({
             label: "Icon",
-            admin: {
-              description: "Lucide icon name",
-              components: { Field: IconPickerField },
-            },
+            description: "Lucide icon name",
           }),
         },
       }),
@@ -56,6 +52,6 @@ export const featuresBlock = defineBlock({
     }),
   },
   admin: {
-    icon: "layout-grid",
+    icon: "LayoutGrid",
   },
 })

package/templates/marketing-site/src/vexcms/blocks/Features/index.tsx

@@ -1,9 +1,9 @@
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 import type { ComponentPropsWithRef } from "react"
 
 import { icons } from "lucide-react"
 
-import { Card, CardContent, CardHeader } from "~/components/ui/card"
+import { Card, CardContent, CardHeader } from "@vexcms/react"
 
 export { featuresBlock } from "./config"
 

package/templates/marketing-site/src/vexcms/blocks/Footer/config.ts

@@ -1,7 +1,6 @@
-import { array, defineBlock, object, text, upload } from "@vexcms/core"
+import { array, defineBlock, group, text, upload } from "@vexcms/core"
 
-import IconPickerField from "~/components/admin/IconPickerField"
-import { TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_IMAGES } from "~/db/constants"
 import { BLOCK_SLUG_FOOTER } from "../constants"
 
 export const footerBlock = defineBlock({
@@ -14,7 +13,7 @@ export const footerBlock = defineBlock({
     }),
     logoImage: upload({
       label: "Logo Image",
-      to: TABLE_SLUG_MEDIA,
+      to: TABLE_SLUG_IMAGES,
     }),
     copyright: text({
       label: "Copyright Text",
@@ -22,7 +21,7 @@ export const footerBlock = defineBlock({
     }),
     links: array({
       label: "Links",
-      items: object({
+      items: group({
         fields: {
           label: text({ label: "Label", required: true }),
           href: text({ label: "Link", required: true }),
@@ -40,16 +39,13 @@ export const footerBlock = defineBlock({
     }),
     socialLinks: array({
       label: "Social Links",
-      items: object({
+      items: group({
         fields: {
           platform: text({ label: "Platform", required: true }),
           href: text({ label: "URL", required: true }),
           icon: text({
             label: "Icon",
-            admin: {
-              description: "Lucide icon name",
-              components: { Field: IconPickerField },
-            },
+            description: "Lucide icon name",
           }),
         },
       }),
@@ -60,6 +56,6 @@ export const footerBlock = defineBlock({
     }),
   },
   admin: {
-    icon: "panel-bottom",
+    icon: "PanelBottom",
   },
 })

package/templates/marketing-site/src/vexcms/blocks/Footer/index.tsx

@@ -1,4 +1,4 @@
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import { icons } from "lucide-react"
 import Link from "next/link"

package/templates/marketing-site/src/vexcms/blocks/Header/config.ts

@@ -1,6 +1,6 @@
-import { array, defineBlock, object, select, text, upload } from "@vexcms/core"
+import { array, defineBlock, group, select, text, upload } from "@vexcms/core"
 
-import { TABLE_SLUG_MEDIA } from "~/db/constants"
+import { TABLE_SLUG_IMAGES } from "~/db/constants"
 import { BLOCK_SLUG_HEADER } from "../constants"
 
 export const headerBlock = defineBlock({
@@ -10,12 +10,12 @@ export const headerBlock = defineBlock({
     logoText: text({
       label: "Logo Text",
       defaultValue: "Vex CMS",
-      admin: { description: "Text to display as the logo" },
+      description: "Text to display as the logo",
     }),
     logoImage: upload({
       label: "Logo Image",
-      to: TABLE_SLUG_MEDIA,
-      admin: { description: "Image to display as the logo (overrides text)" },
+      to: TABLE_SLUG_IMAGES,
+      description: "Image to display as the logo (overrides text)",
     }),
     logoHref: text({
       label: "Logo Link",
@@ -23,7 +23,7 @@ export const headerBlock = defineBlock({
     }),
     menuItems: array({
       label: "Menu Items",
-      items: object({
+      items: group({
         fields: {
           label: text({ label: "Label", required: true }),
           href: text({ label: "Link", required: true }),
@@ -38,7 +38,7 @@ export const headerBlock = defineBlock({
     }),
     actionButtons: array({
       label: "Action Buttons",
-      items: object({
+      items: group({
         fields: {
           label: text({ label: "Button Label", required: true }),
           href: text({ label: "Button Link", required: true }),
@@ -49,7 +49,7 @@ export const headerBlock = defineBlock({
               { label: "Outline", value: "outline" },
               { label: "Ghost", value: "ghost" },
             ],
-            defaultValue: "default",
+            defaultValue: ["default"],
           }),
         },
       }),
@@ -60,6 +60,6 @@ export const headerBlock = defineBlock({
     }),
   },
   admin: {
-    icon: "panel-top",
+    icon: "PanelTop",
   },
 })

package/templates/marketing-site/src/vexcms/blocks/Header/index.tsx

@@ -1,14 +1,13 @@
 "use client"
 
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import { Menu, Settings, X } from "lucide-react"
 import Link from "next/link"
 import { useEffect, useState } from "react"
 
 import { useSession } from "~/auth/client"
-import { cn } from "~/lib/utils"
-import { buttonVariants } from "~/components/ui/button"
+import { cn, buttonVariants } from "@vexcms/react"
 
 export { headerBlock } from "./config"
 
@@ -27,8 +26,8 @@ export default function HeaderBlock({ block }: BlockComponentProps) {
   }
 
   const { data: session } = useSession()
-  const isAdmin = session?.user?.role === "admin" ||
-    (Array.isArray((session?.user as any)?.role) && (session?.user as any)?.role?.includes("admin"))
+  const role = session?.user?.role
+  const isAdmin = role === "admin" || (Array.isArray(role) && role.includes("admin"))
 
   const [menuState, setMenuState] = useState(false)
   const [isScrolled, setIsScrolled] = useState(false)

package/templates/marketing-site/src/vexcms/blocks/Hero/config.ts

@@ -9,12 +9,12 @@ export const heroBlock = defineBlock({
     badgeText: text({
       label: "Badge Text",
       defaultValue: "Now in public beta",
-      admin: { description: "Small text shown in the announcement badge" },
+      description: "Small text shown in the announcement badge",
     }),
     badgeLink: text({
       label: "Badge Link",
       defaultValue: "/docs",
-      admin: { description: "URL the badge links to" },
+      description: "URL the badge links to",
     }),
     heading: text({
       label: "Heading",
@@ -46,7 +46,6 @@ export const heroBlock = defineBlock({
     }),
   },
   admin: {
-    icon: "sparkles",
-    blockStyles: ["container", "text"],
+    icon: "Sparkles",
   },
 })

package/templates/marketing-site/src/vexcms/blocks/Hero/index.tsx

@@ -1,14 +1,13 @@
 "use client"
 
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import { ArrowRight } from "lucide-react"
 import Link from "next/link"
+import { buttonVariants, cn } from "@vexcms/react"
 
-import { cn } from "~/lib/utils"
 import { AnimatedGroup } from "~/components/motion-primitives/animated-group"
 import { TextEffect } from "~/components/motion-primitives/text-effect"
-import { buttonVariants } from "~/components/ui/button"
 
 export { heroBlock } from "./config"
 
@@ -32,7 +31,7 @@ const transitionVariants = {
   },
 }
 
-export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
+export default function HeroBlock({ block }: BlockComponentProps) {
   const {
     badgeText,
     badgeLink,
@@ -42,10 +41,10 @@ export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
     primaryCtaHref,
     secondaryCtaLabel,
     secondaryCtaHref,
-  } = block as Record<string, string>
+  } = block as unknown as Record<string, string>
 
   return (
-    <div className={cn("overflow-hidden", blockStyles)}>
+    <div className="overflow-hidden">
       <div
         aria-hidden
         className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
@@ -61,16 +60,14 @@ export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
             <div className="text-center sm:mx-auto lg:mr-auto">
               {badgeText && badgeLink && (
                 <AnimatedGroup
-                  // @ts-expect-error variant type mismatch
+                  // @ts-expect-error motion-primitives Variants type is stricter than the local transitionVariants shape
                   variants={transitionVariants}
                 >
                   <Link
                     className="hover:bg-background dark:hover:border-t-border bg-muted group mx-auto flex w-fit items-center gap-4 rounded-full border p-1 pl-4 shadow-md shadow-zinc-950/5 transition-colors duration-300 dark:border-t-white/5 dark:shadow-zinc-950"
                     href={badgeLink}
                   >
-                    <span className="text-foreground text-sm">
-                      {badgeText}
-                    </span>
+                    <span className="text-foreground text-sm">{badgeText}</span>
                     <span className="dark:border-background block h-4 w-0.5 border-l bg-white dark:bg-zinc-700" />
                     <div className="bg-background group-hover:bg-muted size-6 overflow-hidden rounded-full duration-500">
                       <div className="flex w-12 -translate-x-1/2 duration-500 ease-in-out group-hover:translate-x-0">
@@ -107,7 +104,7 @@ export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
 
               <AnimatedGroup
                 className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
-                // @ts-expect-error variant type mismatch
+                // @ts-expect-error motion-primitives Variants type is stricter than the local transitionVariants shape
                 variants={{
                   container: {
                     visible: {
@@ -123,10 +120,7 @@ export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
                 <div className="bg-foreground/10 rounded-[calc(var(--radius-xl)+0.125rem)] border p-0.5">
                   <Link
                     href={primaryCtaHref ?? "/"}
-                    className={cn(
-                      buttonVariants({ size: "lg" }),
-                      "rounded-xl px-5 text-base"
-                    )}
+                    className={cn(buttonVariants({ size: "lg" }), "rounded-xl px-5 text-base")}
                   >
                     <span className="text-nowrap">{primaryCtaLabel}</span>
                   </Link>
@@ -134,10 +128,7 @@ export default function HeroBlock({ block, blockStyles }: BlockComponentProps) {
                 {secondaryCtaLabel && (
                   <Link
                     href={secondaryCtaHref ?? "/"}
-                    className={cn(
-                      buttonVariants({ variant: "ghost", size: "lg" }),
-                      "h-10.5 rounded-xl px-5"
-                    )}
+                    className={cn(buttonVariants({ variant: "ghost", size: "lg" }), "h-10.5 rounded-xl px-5")}
                   >
                     <span className="text-nowrap">{secondaryCtaLabel}</span>
                   </Link>

package/templates/marketing-site/src/vexcms/blocks/HowItWorks/config.ts

@@ -1,6 +1,5 @@
-import { array, defineBlock, object, text } from "@vexcms/core"
+import { array, defineBlock, group, text } from "@vexcms/core"
 
-import IconPickerField from "~/components/admin/IconPickerField"
 import { BLOCK_SLUG_HOW_IT_WORKS } from "../constants"
 
 export const howItWorksBlock = defineBlock({
@@ -20,14 +19,11 @@ export const howItWorksBlock = defineBlock({
     steps: array({
       label: "Steps",
       required: true,
-      items: object({
+      items: group({
         fields: {
           icon: text({
             label: "Icon",
-            admin: {
-              description: "Lucide icon name",
-              components: { Field: IconPickerField },
-            },
+            description: "Lucide icon name",
           }),
           title: text({ label: "Title", required: true }),
           description: text({ label: "Description", required: true }),
@@ -62,7 +58,6 @@ export const howItWorksBlock = defineBlock({
     }),
   },
   admin: {
-    icon: "list-ordered",
-    blockStyles: ["container", "text"],
+    icon: "ListOrdered",
   },
 })

package/templates/marketing-site/src/vexcms/blocks/HowItWorks/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import type { BlockComponentProps } from "@vexcms/ui"
+import type { BlockComponentProps } from "@vexcms/react"
 
 import { icons } from "lucide-react"
 
@@ -14,10 +14,7 @@ function LucideIcon({ name }: { name: string }) {
   return <Icon className="size-5" />
 }
 
-export default function HowItWorksBlock({
-  block,
-  blockStyles,
-}: BlockComponentProps) {
+export default function HowItWorksBlock({ block }: BlockComponentProps) {
   const { heading, subheading, steps } = block as unknown as {
     heading: string
     subheading?: string
@@ -25,7 +22,7 @@ export default function HowItWorksBlock({
   }
 
   return (
-    <section className={cn("py-16 md:py-32", blockStyles)}>
+    <section className="py-16 md:py-32">
       <div className="mx-auto max-w-3xl px-6">
         <div className="text-center">
           <h2 className="text-4xl font-semibold text-balance lg:text-5xl">

package/templates/marketing-site/src/vexcms/blocks/Roadmap/config.ts

@@ -1,4 +1,4 @@
-import { array, defineBlock, object, select, text } from "@vexcms/core"
+import { array, defineBlock, group, select, text } from "@vexcms/core"
 
 import { BLOCK_SLUG_ROADMAP } from "../constants"
 
@@ -19,7 +19,7 @@ export const roadmapBlock = defineBlock({
     items: array({
       label: "Roadmap Items",
       required: true,
-      items: object({
+      items: group({
         fields: {
           feature: text({ label: "Feature Name", required: true }),
           description: text({ label: "Description" }),
@@ -31,124 +31,84 @@ export const roadmapBlock = defineBlock({
               { label: "Coming Soon", value: "coming-soon" },
               { label: "Planned", value: "planned" },
             ],
-            defaultValue: "shipped",
+            defaultValue: ["shipped"],
           }),
         },
       }),
       defaultValue: [
         {
-          feature: "16 Field Types",
+          feature: "12 Field Types",
           description:
-            "Text, number, select, date, relationship, upload, richtext, blocks, color, tabs, and more.",
+            "text, url, color, number, checkbox, date, select, relationship, array, group, blocks, and upload — no richtext, json, or tabs yet.",
           status: "shipped",
         },
         {
-          feature: "Admin Panel",
+          feature: "Convex Schema Codegen",
           description:
-            "Full-featured admin UI with list views, edit forms, media library, and draft/publish workflow.",
+            "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 Queries",
+          feature: "Real-Time Admin Panel",
           description:
-            "Every query is live via Convex. Content updates appear instantly across all connected clients.",
+            "DataTable with pagination, live totalDocs, and bulk operations — every list view is a Convex subscription.",
           status: "shipped",
         },
         {
-          feature: "Live Preview",
+          feature: "Media Library",
           description:
-            "Side-by-side iframe preview with responsive breakpoints and real-time updates as you edit.",
+            "Convex file storage adapter with a searchable, paginated media picker built into every upload field.",
           status: "shipped",
         },
         {
-          feature: "Block System",
+          feature: "RBAC & Access Control",
           description:
-            "Compose pages from reusable content blocks with drag-and-drop reordering and inline editing.",
+            "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: "Authentication & RBAC",
+          feature: "Custom Theme System",
           description:
-            "Better Auth integration with role-based access control at the document and field level.",
+            "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: "Rich Text Editor",
+          feature: "Better Auth Integration",
           description:
-            "Plate.js-powered editor with media uploads, links, tables, and custom elements.",
+            "Email/password and OAuth out of the box, with organizations and API keys as opt-in plugins.",
           status: "shipped",
         },
         {
-          feature: "CLI & Scaffolding",
+          feature: "CLI & Scaffolder",
           description:
-            "vex dev with watch/generate, and create-vexcms for instant project setup.",
+            "vex dev, vex generate, and create-vexcms for instant project setup — bare or full marketing-site templates.",
           status: "shipped",
         },
         {
-          feature: "Theme System",
-          description:
-            "Database-driven themes with light/dark mode, CSS variables, and OKLCH color support.",
-          status: "shipped",
-        },
-        {
-          feature: "Block Styles",
-          description:
-            "Per-block responsive styling with Tailwind presets — margin, padding, typography, layout, and more.",
-          status: "shipped",
-        },
-        {
-          feature: "Content Scheduling",
-          description:
-            "Set a publishAt timestamp and content goes live automatically via Convex scheduled functions.",
+          feature: "Versioning & Drafts",
+          description: "Draft/publish workflow with live preview — in active development.",
           status: "coming-soon",
         },
         {
-          feature: "Team Management",
-          description:
-            "Invite users, assign roles, and manage pending invitations from the admin panel.",
-          status: "coming-soon",
-        },
-        {
-          feature: "API Keys",
-          description:
-            "Read-only API tokens for external integrations with configurable rate limiting.",
-          status: "coming-soon",
-        },
-        {
-          feature: "Audit Log",
-          description:
-            "Track who changed what and when across all collections and documents.",
-          status: "coming-soon",
-        },
-        {
-          feature: "Environments",
-          description:
-            "Project-level content branching with staging and production environments and atomic promotion.",
-          status: "planned",
-        },
-        {
-          feature: "Localization",
-          description:
-            "i18n field variants with per-locale versioning and content translation workflows.",
+          feature: "Richtext, JSON, Email & Textarea Fields",
+          description: "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
           status: "planned",
         },
         {
-          feature: "Approval Workflows",
+          feature: "Form Builder & Lifecycle Hooks",
           description:
-            "Review and sign-off steps before content goes live. Configurable multi-step approval chains.",
+            "Composable form fields beyond content editing, plus beforeChange/afterChange hooks for custom side effects.",
           status: "planned",
         },
         {
-          feature: "Plugin System",
-          description:
-            "Extend VEX with community plugins for custom fields, integrations, and admin panel features.",
+          feature: "Team Management & API Keys",
+          description: "Invite users, assign roles, and issue scoped read-only API tokens for external integrations.",
           status: "planned",
         },
       ],
     }),
   },
   admin: {
-    icon: "map",
-    blockStyles: ["container"],
+    icon: "Map",
   },
 })