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

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

@@ -1,143 +1,198 @@
-"use client"
-
 import type { BlockComponentProps } from "@vexcms/react"
 
+import { buttonVariants, cn } from "@vexcms/react"
 import { ArrowRight } from "lucide-react"
 import Link from "next/link"
-import { buttonVariants, cn } from "@vexcms/react"
 
-import { AnimatedGroup } from "~/components/motion-primitives/animated-group"
+import type { HeroBlock } from "~/vex.types"
+
+import { Container } from "~/components/Container"
+import { InstallCommand } from "~/components/InstallCommand"
+import { AnimatedItem } from "~/components/motion-primitives/animated-group"
 import { TextEffect } from "~/components/motion-primitives/text-effect"
 
 export { heroBlock } from "./config"
 
-const transitionVariants = {
-  item: {
-    hidden: {
-      filter: "blur(12px)",
-      opacity: 0,
-      y: 12,
-    },
-    visible: {
-      filter: "blur(0px)",
-      opacity: 1,
-      transition: {
-        type: "spring",
-        bounce: 0.3,
-        duration: 1.5,
-      },
-      y: 0,
-    },
-  },
-}
 
+/**
+ * Hero — one headline, one command, no illustration.
+ *
+ * `full` is the landing hero: 90vh, centred, token-derived decorative
+ * background, and the site's only entrance animation. `compact` is the
+ * interior page-header band: left-aligned, no decoration, closed with a rule
+ * so the block below starts against a line.
+ */
 export default function HeroBlock({ block }: BlockComponentProps) {
   const {
-    badgeText,
     badgeLink,
+    badgeText,
     heading,
-    subheading,
-    primaryCtaLabel,
+    installCommand,
     primaryCtaHref,
-    secondaryCtaLabel,
+    primaryCtaLabel,
     secondaryCtaHref,
-  } = block as unknown as Record<string, string>
+    secondaryCtaLabel,
+    subheading,
+    variant,
+  } = block as HeroBlock
+
+  const hasPrimary = Boolean(primaryCtaLabel && primaryCtaHref)
+  const hasSecondary = Boolean(secondaryCtaLabel && secondaryCtaHref)
+
+  if (readVariant(variant) === "compact") {
+    return (
+      <section className="border-b border-border pt-28 pb-10 md:pt-32 md:pb-14 xl:pt-36 xl:pb-16">
+        <Container>
+          {badgeText ? (
+            <p className="mb-5 text-xs font-medium tracking-[0.08em] text-muted-foreground uppercase">
+              {badgeText}
+            </p>
+          ) : null}
+
+          <TextEffect
+            as="h1"
+            className="max-w-[24ch] text-[32px] leading-[1.12] font-bold tracking-[-0.03em] text-balance md:text-4xl xl:text-5xl"
+            per="line"
+          >
+            {heading}
+          </TextEffect>
+
+          {subheading ? (
+            <TextEffect
+              as="p"
+              className="mt-4 max-w-[64ch] text-[17px] leading-[1.6] text-pretty text-muted-foreground md:text-lg xl:text-[19px]"
+              delay={0.1}
+              per="line"
+            >
+              {subheading}
+            </TextEffect>
+          ) : null}
+
+          {hasPrimary || hasSecondary ? (
+            <div className="mt-8 flex flex-wrap gap-3">
+              {hasPrimary ? (
+                <Link className={buttonVariants()} href={primaryCtaHref ?? "/"}>
+                  {primaryCtaLabel}
+                </Link>
+              ) : null}
+              {hasSecondary ? (
+                <Link
+                  className={buttonVariants({ variant: "outline" })}
+                  href={secondaryCtaHref ?? "/"}
+                >
+                  {secondaryCtaLabel}
+                </Link>
+              ) : null}
+            </div>
+          ) : null}
+        </Container>
+      </section>
+    )
+  }
 
   return (
-    <div className="overflow-hidden">
+    <section className="relative isolate flex min-h-[calc(100svh-7rem)] flex-col items-center justify-center overflow-hidden pt-24 pb-16 md:pt-28 md:pb-20 xl:pt-32 xl:pb-24">
+      {/* Both layers derive from tokens, so a theme swap softens them rather
+          than breaking them. No image, ever — a fresh scaffold has no media. */}
       <div
         aria-hidden
-        className="absolute inset-0 isolate hidden opacity-65 contain-strict lg:block"
-      >
-        <div className="absolute top-0 left-0 h-320 w-140 -translate-y-87.5 -rotate-45 rounded-full bg-[radial-gradient(68.54%_68.72%_at_55.02%_31.46%,hsla(0,0%,85%,.08)_0,hsla(0,0%,55%,.02)_50%,hsla(0,0%,45%,0)_80%)]" />
-        <div className="absolute top-0 left-0 h-320 w-60 [translate:5%_-50%] -rotate-45 rounded-full bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.06)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
-        <div className="absolute top-0 left-0 h-320 w-60 -translate-y-87.5 -rotate-45 bg-[radial-gradient(50%_50%_at_50%_50%,hsla(0,0%,85%,.04)_0,hsla(0,0%,45%,.02)_80%,transparent_100%)]" />
-      </div>
-      <section>
-        <div className="relative min-h-[90vh] flex flex-col items-center justify-center">
-          <div className="absolute inset-0 -z-10 size-full [background:radial-gradient(125%_125%_at_50%_100%,transparent_0%,var(--color-background)_75%)]" />
-          <div className="mx-auto max-w-7xl px-6">
-            <div className="text-center sm:mx-auto lg:mr-auto">
-              {badgeText && badgeLink && (
-                <AnimatedGroup
-                  // @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="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">
-                        <span className="flex size-6">
-                          <ArrowRight className="m-auto size-3" />
-                        </span>
-                        <span className="flex size-6">
-                          <ArrowRight className="m-auto size-3" />
-                        </span>
-                      </div>
-                    </div>
-                  </Link>
-                </AnimatedGroup>
-              )}
-
-              <TextEffect
-                as="h1"
-                className="mt-8 text-6xl text-balance md:text-7xl lg:mt-16 xl:text-[5.25rem]"
-                preset="fade-in-blur"
-                speedSegment={0.3}
-              >
-                {heading ?? ""}
-              </TextEffect>
-              <TextEffect
-                as="p"
-                className="mx-auto mt-8 max-w-2xl text-lg text-balance text-muted-foreground"
-                delay={0.5}
-                per="line"
-                preset="fade-in-blur"
-                speedSegment={0.3}
-              >
-                {subheading ?? ""}
-              </TextEffect>
-
-              <AnimatedGroup
-                className="mt-12 flex flex-col items-center justify-center gap-2 md:flex-row"
-                // @ts-expect-error motion-primitives Variants type is stricter than the local transitionVariants shape
-                variants={{
-                  container: {
-                    visible: {
-                      transition: {
-                        delayChildren: 0.75,
-                        staggerChildren: 0.05,
-                      },
-                    },
-                  },
-                  ...transitionVariants,
-                }}
+        className="pointer-events-none absolute inset-0 -z-10 opacity-[0.22]"
+        style={{
+          backgroundImage:
+            "linear-gradient(to right, var(--color-border) 1px, transparent 1px), linear-gradient(to bottom, var(--color-border) 1px, transparent 1px)",
+          backgroundSize: "80px 80px",
+          maskImage: "radial-gradient(ellipse at 50% 0%, black, transparent 70%)",
+          WebkitMaskImage: "radial-gradient(ellipse at 50% 0%, black, transparent 70%)",
+        }}
+      />
+      <div
+        aria-hidden
+        className="pointer-events-none absolute top-1/3 left-1/2 -z-10 h-80 w-[40rem] -translate-x-1/2 -translate-y-1/2 rounded-[50%] bg-primary/10 blur-[120px]"
+      />
+
+      <Container className="flex flex-col items-center text-center">
+        {badgeText ? (
+          <AnimatedItem>
+            {badgeLink ? (
+              <Link
+                className="group inline-flex items-center gap-2 rounded-4xl border border-border bg-card py-[5px] pr-[6px] pl-3 text-[13px] font-medium text-muted-foreground transition-colors duration-[180ms] ease-[var(--ease-emphasized)] hover:border-primary/40"
+                href={badgeLink}
               >
-                <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")}
-                  >
-                    <span className="text-nowrap">{primaryCtaLabel}</span>
-                  </Link>
-                </div>
-                {secondaryCtaLabel && (
-                  <Link
-                    href={secondaryCtaHref ?? "/"}
-                    className={cn(buttonVariants({ variant: "ghost", size: "lg" }), "h-10.5 rounded-xl px-5")}
-                  >
-                    <span className="text-nowrap">{secondaryCtaLabel}</span>
-                  </Link>
-                )}
-              </AnimatedGroup>
+                {badgeText}
+                <span className="flex size-5 items-center justify-center rounded-4xl bg-primary/14 text-primary transition-colors duration-[180ms] group-hover:bg-primary/22">
+                  <ArrowRight className="size-3" />
+                </span>
+              </Link>
+            ) : (
+              <span className="inline-flex items-center rounded-4xl border border-border bg-card px-3 py-[5px] text-[13px] font-medium text-muted-foreground">
+                {badgeText}
+              </span>
+            )}
+          </AnimatedItem>
+        ) : null}
+
+        <TextEffect
+          as="h1"
+          className={cn(
+            "max-w-[18ch] text-[40px] leading-[1.02] font-extrabold tracking-[-0.04em] text-balance md:text-[56px] xl:text-[72px]",
+            badgeText && "mt-8"
+          )}
+          delay={0.08}
+          per="word"
+          stagger={0.04}
+        >
+          {heading}
+        </TextEffect>
+
+        {subheading ? (
+          <AnimatedItem className="mt-7" delay={0.28}>
+            <p className="max-w-[60ch] text-[17px] leading-[1.6] text-pretty text-muted-foreground md:text-lg xl:text-[19px]">
+              {subheading}
+            </p>
+          </AnimatedItem>
+        ) : null}
+
+        {hasPrimary || hasSecondary ? (
+          <AnimatedItem className="mt-10 w-full" delay={0.38}>
+            <div className="mx-auto flex w-full max-w-[320px] flex-col gap-3 sm:max-w-none sm:flex-row sm:justify-center">
+              {hasPrimary ? (
+                <Link
+                  className={cn(buttonVariants({ size: "lg" }), "active:translate-y-px")}
+                  href={primaryCtaHref ?? "/"}
+                >
+                  {primaryCtaLabel}
+                </Link>
+              ) : null}
+              {hasSecondary ? (
+                <Link
+                  className={cn(
+                    buttonVariants({ size: "lg", variant: "outline" }),
+                    "active:translate-y-px"
+                  )}
+                  href={secondaryCtaHref ?? "/"}
+                >
+                  {secondaryCtaLabel}
+                </Link>
+              ) : null}
             </div>
-          </div>
-        </div>
-      </section>
-    </div>
+          </AnimatedItem>
+        ) : null}
+
+        {installCommand ? (
+          <AnimatedItem className="mt-7 flex w-full justify-center" delay={0.46}>
+            <InstallCommand command={installCommand} />
+          </AnimatedItem>
+        ) : null}
+      </Container>
+    </section>
   )
 }
+
+/**
+ * `select` always stores an array. Reading `[0]` with a literal fallback keeps
+ * a hand-edited scalar and an empty array both landing on the default.
+ */
+function readVariant(value: string | string[] | undefined): "compact" | "full" {
+  const raw = Array.isArray(value) ? value[0] : value
+  return raw === "compact" ? "compact" : "full"
+}

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

@@ -20,6 +20,7 @@ export const howItWorksBlock = defineBlock({
       label: "Steps",
       required: true,
       items: group({
+        label: "Step",
         fields: {
           icon: text({
             label: "Icon",
@@ -34,7 +35,7 @@ export const howItWorksBlock = defineBlock({
           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.",
+            "Run npx create-vexcms@alpha to get a Next.js app with Convex, authentication, and the admin panel pre-configured.",
         },
         {
           icon: "Code",

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

@@ -1,71 +1,79 @@
-"use client"
-
 import type { BlockComponentProps } from "@vexcms/react"
 
+import { cn } from "@vexcms/react"
 import { icons } from "lucide-react"
 
-import { cn } from "~/lib/utils"
+import type { HowItWorksBlock } from "~/vex.types"
+
+import { Container } from "~/components/Container"
+import { SectionHeader } from "~/components/SectionHeader"
 
 export { howItWorksBlock } from "./config"
 
-function LucideIcon({ name }: { name: string }) {
-  const Icon = icons[name as keyof typeof icons]
-  if (!Icon) return null
-  return <Icon className="size-5" />
-}
+/** Past this many steps a four-up rail squeezes descriptions below a readable
+ *  measure, so the grid drops to three columns. */
+const WIDE_RAIL_LIMIT = 8
 
-export default function HowItWorksBlock({ block }: BlockComponentProps) {
-  const { heading, subheading, steps } = block as unknown as {
-    heading: string
-    subheading?: string
-    steps?: Array<{ icon?: string; title: string; description: string }>
-  }
+/**
+ * HowItWorks — a numbered rail, not a timeline graphic.
+ *
+ * Origin UI's timeline supplies the connector idea; its `radix-ui`
+ * `Slot.Root` polymorphism is dropped for concrete elements and its
+ * dot-and-line SVG is replaced by border utilities, which cost nothing and
+ * follow the theme.
+ */
+export default function HowItWorksBlockRenderer({ block }: BlockComponentProps) {
+  const { heading, steps, subheading } = block as HowItWorksBlock
+  const items = steps ?? []
 
-  return (
-    <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">
-            {heading}
-          </h2>
-          {subheading && (
-            <p className="text-muted-foreground mt-4 text-balance">
-              {subheading}
-            </p>
-          )}
-        </div>
+  if (items.length === 0) {return null}
 
-        <div className="mt-16">
-          {(steps ?? []).map((step, index) => {
-            const isLast = index === (steps?.length ?? 1) - 1
+  return (
+    <section className="py-14 md:py-20 xl:py-28">
+      <Container>
+        <SectionHeader heading={heading} subheading={subheading} />
 
+        <ol
+          className={cn(
+            "grid list-none gap-8 md:grid-cols-2 md:gap-x-8 md:gap-y-10 xl:border-t xl:border-border xl:pt-6",
+            items.length > WIDE_RAIL_LIMIT ? "xl:grid-cols-3" : "xl:grid-cols-4"
+          )}
+        >
+          {items.map((step, index) => {
+            const Glyph = step.icon ? icons[step.icon as keyof typeof icons] : undefined
             return (
-              <div key={index} className="flex flex-row gap-6">
-                <div className="flex flex-col items-center">
-                  <div className="bg-primary text-primary-foreground flex size-10 shrink-0 items-center justify-center rounded-full">
-                    {step.icon ? (
-                      <LucideIcon name={step.icon} />
-                    ) : (
-                      <span className="text-sm font-semibold">
-                        {index + 1}
-                      </span>
-                    )}
-                  </div>
-                  {!isLast && (
-                    <div className="bg-border w-px flex-1" />
-                  )}
+              <li
+                className="border-t border-border pt-4 xl:border-t-0 xl:pt-0"
+                key={`${step.title}-${index}`}
+              >
+                <div className="flex items-baseline gap-3">
+                  {/* Generated by the renderer, never a field — reordering the
+                      array must not force an editor to renumber. */}
+                  <span className="font-mono text-2xl leading-none font-semibold tracking-[-0.03em] text-primary tabular-nums">
+                    {String(index + 1).padStart(2, "0")}
+                  </span>
+                  {/* The connector is what makes separate cells read as a
+                      sequence, and is why the icon sits right, not left. The
+                      last one is kept: it points at the CTA below. */}
+                  <span aria-hidden className="h-px flex-1 bg-border" />
+                  {Glyph ? (
+                    <Glyph className="size-3.5 shrink-0 self-center text-muted-foreground/70" />
+                  ) : null}
                 </div>
-                <div className={cn("flex-1", !isLast && "pb-10")}>
-                  <h3 className="text-lg font-semibold">{step.title}</h3>
-                  <p className="text-muted-foreground mt-1">
+
+                <h3 className="mt-4 text-[17px] leading-[1.35] font-semibold text-foreground">
+                  {step.title}
+                </h3>
+                {step.description ? (
+                  <p className="mt-2 text-sm leading-[1.6] text-pretty text-muted-foreground">
                     {step.description}
                   </p>
-                </div>
-              </div>
+                ) : null}
+              </li>
             )
           })}
-        </div>
-      </div>
+        </ol>
+      </Container>
     </section>
   )
 }

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

@@ -20,6 +20,7 @@ export const roadmapBlock = defineBlock({
       label: "Roadmap Items",
       required: true,
       items: group({
+        label: "Roadmap Item",
         fields: {
           feature: text({ label: "Feature Name", required: true }),
           description: text({ label: "Description" }),
@@ -28,8 +29,10 @@ export const roadmapBlock = defineBlock({
             required: true,
             options: [
               { label: "Shipped", value: "shipped" },
-              { label: "Coming Soon", value: "coming-soon" },
+              { label: "In progress", value: "in-progress" },
               { label: "Planned", value: "planned" },
+              { label: "Exploring", value: "exploring" },
+              { label: "Future", value: "future" },
             ],
             defaultValue: ["shipped"],
           }),
@@ -86,18 +89,30 @@ export const roadmapBlock = defineBlock({
         },
         {
           feature: "Versioning & Drafts",
-          description: "Draft/publish workflow with live preview — in active development.",
+          description: "Draft/publish workflow with autosave and version history — in active development.",
           status: "coming-soon",
         },
         {
-          feature: "Richtext, JSON, Email & Textarea Fields",
-          description: "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
-          status: "planned",
+          feature: "Live Preview",
+          description:
+            "Side-by-side preview of draft content against the real frontend before publishing — builds on the drafts infrastructure.",
+          status: "coming-soon",
         },
         {
           feature: "Form Builder & Lifecycle Hooks",
           description:
             "Composable form fields beyond content editing, plus beforeChange/afterChange hooks for custom side effects.",
+          status: "coming-soon",
+        },
+        {
+          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: "coming-soon",
+        },
+        {
+          feature: "Richtext, JSON, Email & Textarea Fields",
+          description: "Plate.js-powered rich text, plus structured JSON, email, and multi-line text inputs.",
           status: "planned",
         },
         {
@@ -105,6 +120,12 @@ export const roadmapBlock = defineBlock({
           description: "Invite users, assign roles, and issue scoped read-only API tokens for external integrations.",
           status: "planned",
         },
+        {
+          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",
+        },
       ],
     }),
   },