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

package/templates/marketing-site/src/components/FirstAdminBootstrap.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import { api } from "@convex/_generated/api"
+import { useMutation, useQuery } from "convex/react"
+import { useRouter } from "next/navigation"
+import { useEffect, useState } from "react"
+
+import { useSession } from "~/auth/client"
+
+/**
+ * Promotes the first signed-in user to admin when no admin exists yet, then
+ * redirects to `/admin`. Headless — renders nothing.
+ *
+ * `WelcomePage`'s own trigger (`convex/vex/firstUser.ts`'s
+ * `promoteFirstAdmin`) only runs while `PageContent` is showing its
+ * no-page-found fallback — which stops rendering the instant a `home` page
+ * document exists. A fresh marketing scaffold gets a `home` document from
+ * `pnpm seed` on day one, so that fallback may never mount again and the
+ * bootstrap trigger would never fire. This mounts unconditionally in
+ * `(frontend)/layout.tsx` instead, so the trigger survives seeding.
+ *
+ * `promoteFirstAdmin` is a Convex mutation, so concurrent signups cannot
+ * both win — Convex serializes mutations, and the loser observes
+ * `isBootstrapped` already true.
+ */
+export function FirstAdminBootstrap() {
+  const isBootstrapped = useQuery(api.vex.firstUser.isBootstrapped)
+  const promoteFirstAdmin = useMutation(api.vex.firstUser.promoteFirstAdmin)
+  const { data: session } = useSession()
+  const router = useRouter()
+  const [promoting, setPromoting] = useState(false)
+
+  useEffect(() => {
+    if (session?.user && isBootstrapped === false && !promoting) {
+      setPromoting(true)
+      promoteFirstAdmin()
+        .then((result) => {
+          if (result.promoted) {
+            router.push("/admin")
+          } else {
+            setPromoting(false)
+          }
+        })
+        .catch(() => {
+          setPromoting(false)
+        })
+    }
+  }, [session, isBootstrapped, promoting, promoteFirstAdmin, router])
+
+  return null
+}

package/templates/marketing-site/src/components/motion-primitives/animated-group.tsx

@@ -1,138 +1,62 @@
-"use client"
+import React, { type ComponentPropsWithRef, type CSSProperties } from "react"
 
-import { motion, type Variants } from "motion/react"
-import React, { type ComponentPropsWithRef } from "react"
+import { cn } from "~/lib/utils"
 
-export type PresetType =
-  | "blur"
-  | "blur-slide"
-  | "bounce"
-  | "fade"
-  | "flip"
-  | "rotate"
-  | "scale"
-  | "slide"
-  | "swing"
-  | "zoom"
+import styles from "./reveal.module.css"
 
 export type AnimatedGroupProps = ComponentPropsWithRef<"div"> & {
   as?: React.ElementType
-  asChild?: React.ElementType
-  className?: string
-  preset?: PresetType
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds before the first child starts animating. */
+  delay?: number
+  /** Seconds between each child's start. */
+  stagger?: number
 }
 
-const defaultContainerVariants: Variants = {
-  visible: {
-    transition: {
-      staggerChildren: 0.1,
-    },
-  },
-}
-
-const defaultItemVariants: Variants = {
-  hidden: { opacity: 0 },
-  visible: { opacity: 1 },
-}
-
-const presetVariants: Record<PresetType, Variants> = {
-  "blur-slide": {
-    hidden: { filter: "blur(4px)", y: 20 },
-    visible: { filter: "blur(0px)", y: 0 },
-  },
-  slide: {
-    hidden: { y: 20 },
-    visible: { y: 0 },
-  },
-  blur: {
-    hidden: { filter: "blur(4px)" },
-    visible: { filter: "blur(0px)" },
-  },
-  bounce: {
-    hidden: { y: -50 },
-    visible: {
-      transition: { type: "spring", damping: 10, stiffness: 400 },
-      y: 0,
-    },
-  },
-  fade: {},
-  flip: {
-    hidden: { rotateX: -90 },
-    visible: {
-      rotateX: 0,
-      transition: { type: "spring", damping: 20, stiffness: 300 },
-    },
-  },
-  rotate: {
-    hidden: { rotate: -180 },
-    visible: {
-      rotate: 0,
-      transition: { type: "spring", damping: 15, stiffness: 200 },
-    },
-  },
-  scale: {
-    hidden: { scale: 0.8 },
-    visible: { scale: 1 },
-  },
-  swing: {
-    hidden: { rotate: -10 },
-    visible: {
-      rotate: 0,
-      transition: { type: "spring", damping: 8, stiffness: 300 },
-    },
-  },
-  zoom: {
-    hidden: { scale: 0.5 },
-    visible: {
-      scale: 1,
-      transition: { type: "spring", damping: 20, stiffness: 300 },
-    },
-  },
-}
-
-const addDefaultVariants = (variants: Variants) => ({
-  hidden: { ...defaultItemVariants.hidden, ...variants.hidden },
-  visible: { ...defaultItemVariants.visible, ...variants.visible },
-})
-
-function AnimatedGroup({
-  as = "div",
-  asChild = "div",
+/**
+ * Staggers a blur + fade + rise entrance across its direct children using a
+ * pure-CSS keyframe (see `reveal.module.css`) — no animation-library
+ * dependency. Each child is wrapped in a div carrying the animation with an
+ * incremented `animation-delay`.
+ */
+export function AnimatedGroup({
+  as: Tag = "div",
   children,
   className,
-  preset,
-  variants,
+  delay = 0,
+  stagger = 0.05,
   ...divProps
 }: AnimatedGroupProps) {
-  const selectedVariants = {
-    container: addDefaultVariants(defaultContainerVariants),
-    item: addDefaultVariants(preset ? presetVariants[preset] : {}),
-  }
-  const containerVariants = variants?.container ?? selectedVariants.container
-  const itemVariants = variants?.item ?? selectedVariants.item
-
-  const MotionComponent = motion.create(as)
-  const MotionChild = motion.create(asChild)
-
   return (
-    <MotionComponent
-      animate="visible"
-      className={className}
-      initial="hidden"
-      variants={containerVariants}
-      {...divProps}
-    >
+    <Tag className={className} {...divProps}>
       {React.Children.map(children, (child, index) => (
-        <MotionChild key={index} variants={itemVariants}>
+        <div
+          className={styles.item}
+          style={{ "--reveal-delay": `${delay + index * stagger}s` } as CSSProperties}
+        >
           {child}
-        </MotionChild>
+        </div>
       ))}
-    </MotionComponent>
+    </Tag>
   )
 }
 
-export { AnimatedGroup }
+/**
+ * Applies the same reveal animation to a single element without adding a
+ * wrapper div — for callers that only need one animated child.
+ */
+export function AnimatedItem({
+  children,
+  className,
+  delay = 0,
+  ...divProps
+}: ComponentPropsWithRef<"div"> & { delay?: number }) {
+  return (
+    <div
+      className={cn(styles.item, className)}
+      style={{ "--reveal-delay": `${delay}s` } as CSSProperties}
+      {...divProps}
+    >
+      {children}
+    </div>
+  )
+}

package/templates/marketing-site/src/components/motion-primitives/reveal.module.css

@@ -0,0 +1,32 @@
+/*
+ * Shared "reveal" animation for AnimatedGroup and TextEffect — the
+ * blur + fade + rise entrance the hero uses, implemented in pure CSS so the
+ * template carries no animation-library dependency.
+ *
+ * `both` fill-mode keeps elements hidden until their delay elapses, which is
+ * what makes the stagger read as a sequence. Delay per element arrives via
+ * the `--reveal-delay` custom property.
+ */
+@keyframes reveal {
+  from {
+    opacity: 0;
+    filter: blur(12px);
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
+}
+
+.item {
+  animation: reveal 1.1s cubic-bezier(0.25, 1, 0.5, 1) both;
+  animation-delay: var(--reveal-delay, 0s);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .item {
+    animation: none;
+  }
+}

package/templates/marketing-site/src/components/motion-primitives/text-effect.tsx

@@ -1,292 +1,66 @@
-"use client"
-
-import {
-  AnimatePresence,
-  motion,
-  type TargetAndTransition,
-  type Transition,
-  type Variant,
-  type Variants,
-} from "motion/react"
-import React from "react"
+import React, { type CSSProperties } from "react"
 
 import { cn } from "~/lib/utils"
 
-export type PerType = "char" | "line" | "word"
-export type PresetType = "blur" | "fade" | "fade-in-blur" | "scale" | "slide"
+import styles from "./reveal.module.css"
+
+export type PerType = "line" | "word"
 
 export type TextEffectProps = {
   as?: keyof React.JSX.IntrinsicElements
   children: string
   className?: string
-  containerTransition?: Transition
+  /** Seconds before the first segment starts animating. */
   delay?: number
-  onAnimationComplete?: () => void
-  onAnimationStart?: () => void
+  /** Split granularity for the stagger. Lines split on `\n`. */
   per?: PerType
-  preset?: PresetType
-  segmentTransition?: Transition
-  segmentWrapperClassName?: string
-  speedReveal?: number
-  speedSegment?: number
-  style?: React.CSSProperties
-  trigger?: boolean
-  variants?: {
-    container?: Variants
-    item?: Variants
-  }
+  /** Seconds between each segment's start. */
+  stagger?: number
 }
 
-const defaultStaggerTimes: Record<PerType, number> = {
-  char: 0.03,
-  line: 0.1,
-  word: 0.05,
-}
-
-const defaultContainerVariants: Variants = {
-  hidden: { opacity: 0 },
-  exit: {
-    transition: { staggerChildren: 0.05, staggerDirection: -1 },
-  },
-  visible: {
-    opacity: 1,
-    transition: {
-      staggerChildren: 0.05,
-    },
-  },
-}
-
-const defaultItemVariants: Variants = {
-  hidden: { opacity: 0 },
-  exit: { opacity: 0 },
-  visible: {
-    opacity: 1,
-  },
-}
-
-const presetVariants: Record<
-  PresetType,
-  { container: Variants; item: Variants }
-> = {
-  slide: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0, y: 20 },
-      exit: { opacity: 0, y: 20 },
-      visible: { opacity: 1, y: 0 },
-    },
-  },
-  blur: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { filter: "blur(12px)", opacity: 0 },
-      exit: { filter: "blur(12px)", opacity: 0 },
-      visible: { filter: "blur(0px)", opacity: 1 },
-    },
-  },
-  fade: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0 },
-      exit: { opacity: 0 },
-      visible: { opacity: 1 },
-    },
-  },
-  "fade-in-blur": {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { filter: "blur(12px)", opacity: 0, y: 20 },
-      exit: { filter: "blur(12px)", opacity: 0, y: 20 },
-      visible: { filter: "blur(0px)", opacity: 1, y: 0 },
-    },
-  },
-  scale: {
-    container: defaultContainerVariants,
-    item: {
-      hidden: { opacity: 0, scale: 0 },
-      exit: { opacity: 0, scale: 0 },
-      visible: { opacity: 1, scale: 1 },
-    },
-  },
-}
-
-const AnimationComponent: React.FC<{
-  per: "char" | "line" | "word"
-  segment: string
-  segmentWrapperClassName?: string
-  variants: Variants
-}> = React.memo(({ per, segment, segmentWrapperClassName, variants }) => {
-  const content =
-    per === "line" ? (
-      <motion.span className="block" variants={variants}>
-        {segment}
-      </motion.span>
-    ) : per === "word" ? (
-      <motion.span
-        aria-hidden="true"
-        className="inline-block whitespace-pre"
-        variants={variants}
-      >
-        {segment}
-      </motion.span>
-    ) : (
-      <motion.span className="inline-block whitespace-pre">
-        {segment.split("").map((char, charIndex) => (
-          <motion.span
-            aria-hidden="true"
-            className="inline-block whitespace-pre"
-            key={`char-${charIndex}`}
-            variants={variants}
-          >
-            {char}
-          </motion.span>
-        ))}
-      </motion.span>
-    )
-
-  if (!segmentWrapperClassName) {
-    return content
-  }
-
-  const defaultWrapperClassName = per === "line" ? "block" : "inline-block"
-
-  return (
-    <span className={cn(defaultWrapperClassName, segmentWrapperClassName)}>
-      {content}
-    </span>
-  )
-})
-
-AnimationComponent.displayName = "AnimationComponent"
-
-const splitText = (text: string, per: "char" | "line" | "word") => {
-  if (per === "line") return text.split("\n")
-  return text.split(/(\s+)/)
-}
-
-const hasTransition = (
-  variant: Variant,
-): variant is TargetAndTransition & { transition?: Transition } => {
-  return (
-    typeof variant === "object" && variant !== null && "transition" in variant
-  )
-}
-
-const createVariantsWithTransition = (
-  baseVariants: Variants,
-  transition?: Transition & { exit?: Transition },
-): Variants => {
-  if (!transition) return baseVariants
-
-  const { ...mainTransition } = transition
-
-  return {
-    ...baseVariants,
-    exit: {
-      ...baseVariants.exit,
-      transition: {
-        ...(hasTransition(baseVariants.exit)
-          ? baseVariants.exit.transition
-          : {}),
-        ...mainTransition,
-        staggerDirection: -1,
-      },
-    },
-    visible: {
-      ...baseVariants.visible,
-      transition: {
-        ...(hasTransition(baseVariants.visible)
-          ? baseVariants.visible.transition
-          : {}),
-        ...mainTransition,
-      },
-    },
-  }
+const defaultStagger: Record<PerType, number> = {
+  line: 0.15,
+  word: 0.04,
 }
 
+/**
+ * Staggered blur + fade + rise text entrance, split per word or per line —
+ * pure CSS (see `reveal.module.css`), no animation-library dependency.
+ * Word segments keep their trailing space inside the animated span so text
+ * still wraps naturally.
+ */
 export function TextEffect({
   as = "p",
   children,
   className,
-  containerTransition,
   delay = 0,
-  onAnimationComplete,
-  onAnimationStart,
   per = "word",
-  preset = "fade",
-  segmentTransition,
-  segmentWrapperClassName,
-  speedReveal = 1,
-  speedSegment = 1,
-  style,
-  trigger = true,
-  variants,
+  stagger,
 }: TextEffectProps) {
-  const segments = splitText(children, per)
-  const MotionTag = motion[as as keyof typeof motion] as typeof motion.div
-
-  const baseVariants = preset
-    ? presetVariants[preset]
-    : { container: defaultContainerVariants, item: defaultItemVariants }
-
-  const stagger = defaultStaggerTimes[per] / speedReveal
-
-  const baseDuration = 0.3 / speedSegment
-
-  const customStagger = hasTransition(variants?.container?.visible ?? {})
-    ? (variants?.container?.visible as TargetAndTransition).transition
-        ?.staggerChildren
-    : undefined
-
-  const customDelay = hasTransition(variants?.container?.visible ?? {})
-    ? (variants?.container?.visible as TargetAndTransition).transition
-        ?.delayChildren
-    : undefined
-
-  const computedVariants = {
-    container: createVariantsWithTransition(
-      variants?.container ?? baseVariants.container,
-      {
-        delayChildren: customDelay ?? delay,
-        staggerChildren: customStagger ?? stagger,
-        ...containerTransition,
-        exit: {
-          staggerChildren: customStagger ?? stagger,
-          staggerDirection: -1,
-        },
-      },
-    ),
-    item: createVariantsWithTransition(variants?.item ?? baseVariants.item, {
-      duration: baseDuration,
-      ...segmentTransition,
-    }),
-  }
+  const Tag = as as React.ElementType
+  const segments =
+    per === "line" ? children.split("\n") : children.split(/(\s+)/).filter(Boolean)
+  const step = stagger ?? defaultStagger[per]
 
+  let animatedIndex = 0
   return (
-    <AnimatePresence mode="popLayout">
-      {trigger && (
-        <MotionTag
-          animate="visible"
-          className={className}
-          exit="exit"
-          initial="hidden"
-          onAnimationComplete={onAnimationComplete}
-          onAnimationStart={onAnimationStart}
-          style={style}
-          variants={computedVariants.container}
-        >
-          {per !== "line" ? <span className="sr-only">{children}</span> : null}
-          {segments.map((segment, index) => (
-            <AnimationComponent
-              key={`${per}-${index}-${segment}`}
-              per={per}
-              segment={segment}
-              segmentWrapperClassName={segmentWrapperClassName}
-              variants={computedVariants.item}
-            />
-          ))}
-        </MotionTag>
-      )}
-    </AnimatePresence>
+    <Tag className={className}>
+      {segments.map((segment, index) => {
+        if (per === "word" && /^\s+$/.test(segment)) {
+          return <React.Fragment key={index}>{segment}</React.Fragment>
+        }
+        const segmentDelay = delay + animatedIndex * step
+        animatedIndex += 1
+        return (
+          <span
+            className={cn(styles.item, per === "line" ? "block" : "inline-block")}
+            key={index}
+            style={{ "--reveal-delay": `${segmentDelay}s` } as CSSProperties}
+          >
+            {segment}
+          </span>
+        )
+      })}
+    </Tag>
   )
 }

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

@@ -26,7 +26,7 @@ export const ctaBlock = defineBlock({
       }),
       defaultValue: [
         { label: "Get Started", href: "/docs" },
-        { label: "View on GitHub", href: "https://github.com/vexcms/vex" },
+        { label: "View on GitHub", href: "https://github.com/ianyimi/vex" },
       ],
     }),
   },

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

@@ -18,7 +18,7 @@ export const faqBlock = defineBlock({
     }),
     supportLink: text({
       label: "Support Link",
-      defaultValue: "https://github.com/vexcms/vex/issues",
+      defaultValue: "https://github.com/ianyimi/vex/issues",
       description: "URL to contact support page",
     }),
     items: array({

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

@@ -32,7 +32,7 @@ export const footerBlock = defineBlock({
         { label: "Pricing", href: "/pricing" },
         { label: "Roadmap", href: "/roadmap" },
         { label: "Documentation", href: "/docs" },
-        { label: "GitHub", href: "https://github.com/vexcms/vex" },
+        { label: "GitHub", href: "https://github.com/ianyimi/vex" },
         { label: "npm", href: "https://www.npmjs.com/package/@vexcms/core" },
         { label: "Convex", href: "https://convex.dev" },
       ],
@@ -50,7 +50,7 @@ export const footerBlock = defineBlock({
         },
       }),
       defaultValue: [
-        { platform: "GitHub", href: "https://github.com/vexcms/vex", icon: "Github" },
+        { platform: "GitHub", href: "https://github.com/ianyimi/vex", icon: "Github" },
         { platform: "X", href: "https://x.com/vexcms", icon: "Twitter" },
       ],
     }),

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

@@ -54,7 +54,7 @@ export const headerBlock = defineBlock({
         },
       }),
       defaultValue: [
-        { label: "GitHub", href: "https://github.com/vexcms/vex", variant: "ghost" },
+        { label: "GitHub", href: "https://github.com/ianyimi/vex", variant: "ghost" },
         { label: "Get Started", href: "/docs", variant: "default" },
       ],
     }),

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

@@ -8,7 +8,7 @@ export const heroBlock = defineBlock({
   fields: {
     badgeText: text({
       label: "Badge Text",
-      defaultValue: "Now in public beta",
+      defaultValue: "Now in public alpha",
       description: "Small text shown in the announcement badge",
     }),
     badgeLink: text({
@@ -42,7 +42,7 @@ export const heroBlock = defineBlock({
     }),
     secondaryCtaHref: text({
       label: "Secondary CTA Link",
-      defaultValue: "https://github.com/vexcms/vex",
+      defaultValue: "https://github.com/ianyimi/vex",
     }),
   },
   admin: {