create-vexcms 0.0.9 → 0.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-vexcms",
-  "version": "0.0.9",
+  "version": "0.0.10",
   "type": "module",
   "bin": {
     "create-vexcms": "./dist/index.js"

package/templates/base-nextjs/package.json

@@ -22,12 +22,12 @@
     "@t3-oss/env-nextjs": "^0.13.10",
     "@tanstack/react-form": "^1.27.7",
     "@tanstack/react-query": "^5.90.17",
-    "@vexcms/admin-next": "~0.0.9",
-    "@vexcms/better-auth": "~0.0.9",
-    "@vexcms/core": "~0.0.9",
-    "@vexcms/richtext": "~0.0.9",
-    "@vexcms/ui": "~0.0.9",
-    "@vexcms/file-storage-convex": "~0.0.9",
+    "@vexcms/admin-next": "~0.0.10",
+    "@vexcms/better-auth": "~0.0.10",
+    "@vexcms/core": "~0.0.10",
+    "@vexcms/richtext": "~0.0.10",
+    "@vexcms/ui": "~0.0.10",
+    "@vexcms/file-storage-convex": "~0.0.10",
     "better-auth": ">=1.4.9 <1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -52,7 +52,7 @@
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
-    "@vexcms/cli": "~0.0.9",
+    "@vexcms/cli": "~0.0.10",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^9",
     "eslint-config-next": "15.5.9",

package/templates/marketing-site/src/components/admin/ThemeImport.tsx

@@ -0,0 +1,174 @@
+"use client"
+
+import { useState } from "react"
+
+import { parseThemeCSS } from "~/lib/colorConvert"
+
+/**
+ * CSS variable name → form field path mapping.
+ * Maps CSS custom property names (from :root / .dark blocks)
+ * to the field paths in the themes collection form.
+ *
+ * Tabs with slugs create nested paths: "light.background", "dark.background"
+ * This maps the CSS var name to the camelCase field name used in themeColorFields().
+ */
+const CSS_VAR_TO_FIELD: Record<string, string> = {
+  background: "background",
+  foreground: "foreground",
+  card: "card",
+  "card-foreground": "cardForeground",
+  popover: "popover",
+  "popover-foreground": "popoverForeground",
+  primary: "primary",
+  "primary-foreground": "primaryForeground",
+  secondary: "secondary",
+  "secondary-foreground": "secondaryForeground",
+  muted: "muted",
+  "muted-foreground": "mutedForeground",
+  accent: "accent",
+  "accent-foreground": "accentForeground",
+  destructive: "destructive",
+  "destructive-foreground": "destructiveForeground",
+  border: "border",
+  input: "input",
+  ring: "ring",
+  "chart-1": "chart1",
+  "chart-2": "chart2",
+  "chart-3": "chart3",
+  "chart-4": "chart4",
+  "chart-5": "chart5",
+  sidebar: "sidebar",
+  "sidebar-foreground": "sidebarForeground",
+  "sidebar-primary": "sidebarPrimary",
+  "sidebar-primary-foreground": "sidebarPrimaryForeground",
+  "sidebar-accent": "sidebarAccent",
+  "sidebar-accent-foreground": "sidebarAccentForeground",
+  "sidebar-border": "sidebarBorder",
+  "sidebar-ring": "sidebarRing",
+}
+
+interface ThemeImportProps {
+  /** Callback to set a form field value by path. e.g., setFieldValue("light.background", "#fff") */
+  onImport: (updates: Record<string, string>) => void
+}
+
+/**
+ * Theme import component — paste CSS from tweakcn/shadcn to populate color fields.
+ *
+ * Parses :root { } and .dark { } blocks from the CSS, maps variable names to
+ * form field paths, and calls onImport with all matched field updates.
+ *
+ * Designed to work with any CSS file — only updates fields that match known
+ * CSS variable names. Unmatched variables are silently ignored.
+ */
+export function ThemeImport({ onImport }: ThemeImportProps) {
+  const [css, setCss] = useState("")
+  const [isExpanded, setIsExpanded] = useState(false)
+  const [importResult, setImportResult] = useState<string | null>(null)
+
+  const handleImport = () => {
+    if (!css.trim()) return
+
+    const parsed = parseThemeCSS({ css })
+    const updates: Record<string, string> = {}
+    let count = 0
+
+    // Map light colors to light.{fieldName} paths
+    for (const [cssVar, value] of Object.entries(parsed.light)) {
+      const fieldName = CSS_VAR_TO_FIELD[cssVar]
+      if (fieldName) {
+        updates[`light.${fieldName}`] = value
+        count++
+      }
+    }
+
+    // Map dark colors to dark.{fieldName} paths
+    for (const [cssVar, value] of Object.entries(parsed.dark)) {
+      const fieldName = CSS_VAR_TO_FIELD[cssVar]
+      if (fieldName) {
+        updates[`dark.${fieldName}`] = value
+        count++
+      }
+    }
+
+    if (count > 0) {
+      onImport(updates)
+      setImportResult(`Imported ${count} color values`)
+      setCss("")
+      setTimeout(() => setImportResult(null), 3000)
+    } else {
+      setImportResult("No matching CSS variables found")
+      setTimeout(() => setImportResult(null), 3000)
+    }
+  }
+
+  return (
+    <div className="rounded-lg border bg-card p-4 mb-6">
+      <button
+        type="button"
+        onClick={() => setIsExpanded(!isExpanded)}
+        className="flex items-center gap-2 text-sm font-medium w-full text-left"
+      >
+        <span className={`transition-transform ${isExpanded ? "rotate-90" : ""}`}>▶</span>
+        Import Theme from CSS
+      </button>
+
+      {isExpanded && (
+        <div className="mt-3 space-y-3">
+          <p className="text-xs text-muted-foreground">
+            Paste CSS from{" "}
+            <a
+              href="https://tweakcn.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              tweakcn
+            </a>
+            {" "}or{" "}
+            <a
+              href="https://ui.shadcn.com/themes"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="underline"
+            >
+              shadcn/ui themes
+            </a>
+            . The importer will match CSS variable names to color fields and fill them in.
+          </p>
+
+          <textarea
+            value={css}
+            onChange={(e) => setCss(e.target.value)}
+            placeholder={`:root {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --primary: #171717;
+  ...
+}
+
+.dark {
+  --background: #0a0a0a;
+  ...
+}`}
+            className="w-full h-40 rounded-md border bg-background px-3 py-2 text-xs font-mono resize-y"
+          />
+
+          <div className="flex items-center gap-3">
+            <button
+              type="button"
+              onClick={handleImport}
+              disabled={!css.trim()}
+              className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
+            >
+              Import
+            </button>
+            {importResult && (
+              <span className="text-xs text-muted-foreground">{importResult}</span>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/templates/marketing-site/src/components/admin/ThemeImportField.tsx

@@ -0,0 +1,33 @@
+"use client"
+
+import { useVexFormContext } from "@vexcms/ui"
+
+import { ThemeImport } from "./ThemeImport"
+
+/**
+ * Custom admin field component that renders the theme CSS import UI.
+ * Uses the VexForm context to programmatically set color field values
+ * when CSS is imported.
+ *
+ * Register on a ui() field in the themes collection:
+ * ```ts
+ * importTheme: ui({ admin: { components: { Field: ThemeImportField } } })
+ * ```
+ */
+export default function ThemeImportField() {
+  const { form } = useVexFormContext()
+
+  const handleImport = (updates: Record<string, string>) => {
+    for (const [path, value] of Object.entries(updates)) {
+      // Path is like "light.background" or "dark.foreground"
+      // Tabs expand to top-level keys, so the form field path is just the path directly
+      try {
+        form.setFieldValue(path as any, value)
+      } catch {
+        // Field might not exist in this form — silently skip
+      }
+    }
+  }
+
+  return <ThemeImport onImport={handleImport} />
+}

package/templates/marketing-site/src/components/ui/accordion.tsx

@@ -0,0 +1,74 @@
+"use client"
+
+import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+
+import { cn } from "~/lib/utils"
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn("flex w-full flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("not-last:border-b", className)}
+      {...props}
+    />
+  )
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-md border border-transparent py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
+        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  )
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          "h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+          className
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  )
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/templates/marketing-site/src/lib/colorConvert.ts

@@ -0,0 +1,171 @@
+// @ts-expect-error culori/fn lacks type declarations in v4
+import { parse, formatHex, formatHsl, converter } from "culori/fn"
+
+const toOklch = converter("oklch")
+
+/**
+ * Convert a color string to the specified format.
+ *
+ * @param props.color - Input color in any CSS-parseable format
+ * @param props.format - Target format: "hex", "hsl", or "oklch"
+ * @returns Formatted color string, or the original if parsing fails
+ */
+export function convertColor(props: {
+  color: string
+  format: "hex" | "hsl" | "oklch"
+}): string {
+  if (!props.color || props.color.startsWith("var(")) return props.color
+
+  const parsed = parse(props.color)
+  if (!parsed) return props.color
+
+  switch (props.format) {
+    case "hex":
+      return formatHex(parsed) ?? props.color
+    case "hsl":
+      return formatHsl(parsed) ?? props.color
+    case "oklch": {
+      const oklch = toOklch(parsed)
+      if (!oklch) return props.color
+      const l = (oklch.l ?? 0).toFixed(3)
+      const c = (oklch.c ?? 0).toFixed(3)
+      const h = (oklch.h ?? 0).toFixed(1)
+      return `oklch(${l} ${c} ${h})`
+    }
+    default:
+      return props.color
+  }
+}
+
+/**
+ * Known CSS custom property names that represent colors.
+ * These are the standard shadcn/Tailwind CSS variables.
+ */
+const COLOR_VAR_NAMES = [
+  "background",
+  "foreground",
+  "card",
+  "card-foreground",
+  "popover",
+  "popover-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "destructive",
+  "destructive-foreground",
+  "border",
+  "input",
+  "ring",
+  "chart-1",
+  "chart-2",
+  "chart-3",
+  "chart-4",
+  "chart-5",
+  "sidebar",
+  "sidebar-foreground",
+  "sidebar-primary",
+  "sidebar-primary-foreground",
+  "sidebar-accent",
+  "sidebar-accent-foreground",
+  "sidebar-border",
+  "sidebar-ring",
+]
+
+/**
+ * Extract color CSS custom properties from the document's stylesheets.
+ * Returns light and dark values for each known color variable.
+ */
+export function getThemeColorsFromDOM(): {
+  name: string
+  lightValue: string
+  darkValue: string | null
+}[] {
+  if (typeof document === "undefined") return []
+
+  const results: { name: string; lightValue: string; darkValue: string | null }[] = []
+
+  // Get computed styles for :root (light mode)
+  const rootStyles = getComputedStyle(document.documentElement)
+
+  // Try to get dark mode values by reading stylesheets
+  const darkValues = new Map<string, string>()
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (rule instanceof CSSStyleRule && rule.selectorText?.includes(".dark")) {
+            for (const varName of COLOR_VAR_NAMES) {
+              const value = rule.style.getPropertyValue(`--${varName}`).trim()
+              if (value) darkValues.set(varName, value)
+            }
+          }
+        }
+      } catch {
+        // Cross-origin stylesheet — skip
+      }
+    }
+  } catch {
+    // No stylesheet access
+  }
+
+  for (const varName of COLOR_VAR_NAMES) {
+    const lightValue = rootStyles.getPropertyValue(`--${varName}`).trim()
+    if (!lightValue) continue
+
+    results.push({
+      name: varName,
+      lightValue,
+      darkValue: darkValues.get(varName) ?? null,
+    })
+  }
+
+  return results
+}
+
+/**
+ * Parse CSS text containing :root and .dark variable declarations.
+ * Used by the theme import feature to extract color values from pasted CSS.
+ *
+ * @param props.css - Raw CSS text containing :root { } and optionally .dark { }
+ * @returns Parsed light and dark color maps
+ */
+export function parseThemeCSS(props: { css: string }): {
+  light: Record<string, string>
+  dark: Record<string, string>
+} {
+  const light: Record<string, string> = {}
+  const dark: Record<string, string> = {}
+
+  // Match :root { ... } block
+  const rootMatch = props.css.match(/:root\s*\{([\s\S]+?)\}/)
+  if (rootMatch) {
+    const vars = rootMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
+    for (const match of vars) {
+      const name = match[1].trim()
+      const value = match[2].trim()
+      if (COLOR_VAR_NAMES.includes(name)) {
+        light[name] = value
+      }
+    }
+  }
+
+  // Match .dark { ... } block
+  const darkMatch = props.css.match(/\.dark\s*\{([\s\S]+?)\}/)
+  if (darkMatch) {
+    const vars = darkMatch[1].matchAll(/--([a-z-]+)\s*:\s*([^;]+)/g)
+    for (const match of vars) {
+      const name = match[1].trim()
+      const value = match[2].trim()
+      if (COLOR_VAR_NAMES.includes(name)) {
+        dark[name] = value
+      }
+    }
+  }
+
+  return { light, dark }
+}