@camox/cli 0.16.0 → 0.16.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/cli",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "bin": {
     "camox": "./dist/index.mjs"
   },
@@ -26,7 +26,7 @@
     "@types/node": "^24.12.2",
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
     "vite-plus": "latest",
-    "@camox/api-contract": "0.16.0"
+    "@camox/api-contract": "0.16.1"
   },
   "nx": {
     "tags": [

package/templates/default/components.json

@@ -6,7 +6,7 @@
   "tailwind": {
     "config": "",
     "css": "src/styles.css",
-    "baseColor": "gray",
+    "baseColor": "zinc",
     "cssVariables": true,
     "prefix": ""
   },
@@ -18,5 +18,8 @@
     "lib": "@/lib",
     "hooks": "@/hooks"
   },
+  "rtl": false,
+  "menuColor": "default",
+  "menuAccent": "subtle",
   "registries": {}
 }

package/templates/default/package.json

@@ -13,6 +13,8 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.4.0",
+    "@fontsource-variable/inter": "^5.2.8",
+    "@fontsource-variable/noto-serif": "^5.2.9",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.99.0",
     "@tanstack/react-router": "^1.168.18",
@@ -26,7 +28,7 @@
     "nitro": "3.0.260311-beta",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
-    "shadcn": "^4.3.1",
+    "shadcn": "^4.6.0",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.0.6"
   },

package/templates/default/src/camox/blocks/footer.tsx

@@ -11,11 +11,11 @@ const footer = createBlock({
     links: Type.RepeatableItem({
       content: {
         link: Type.Link({
-          default: { text: "Link", href: "#", newTab: false },
+          default: { text: "Footer link", href: "#", newTab: false },
           title: "Link",
         }),
       },
-      minItems: 1,
+      minItems: 2,
       maxItems: 12,
       title: "Links",
       toMarkdown: (c) => [c.link],
@@ -27,14 +27,17 @@ const footer = createBlock({
 
 function FooterComponent() {
   return (
-    <footer className="dark bg-background py-12">
+    <footer className="dark bg-background py-4">
       <div className="container mx-auto px-4">
-        <div className="flex flex-col items-center gap-6 sm:flex-row sm:justify-between">
-          <footer.Field name="title">
-            {(props) => <div {...props} className="text-foreground text-lg font-bold" />}
-          </footer.Field>
+        <div className="flex flex-wrap items-center justify-between gap-x-6 gap-y-2">
+          <div className="flex items-center gap-2">
+            <footer.Field name="title">
+              {(props) => <div {...props} className="text-foreground text-sm font-bold" />}
+            </footer.Field>
+            <div className="text-muted-foreground text-sm">&copy; {new Date().getFullYear()}</div>
+          </div>
 
-          <div className="flex flex-wrap items-center gap-4">
+          <div className="ml-auto flex flex-wrap items-center justify-end gap-4">
             <footer.Repeater name="links">
               {(linkItem) => (
                 <linkItem.Link name="link">
@@ -49,10 +52,6 @@ function FooterComponent() {
             </footer.Repeater>
           </div>
         </div>
-
-        <div className="text-muted-foreground mt-8 text-center text-sm">
-          &copy; {new Date().getFullYear()} All rights reserved.
-        </div>
       </div>
     </footer>
   );

package/templates/default/src/camox/blocks/hero.tsx

@@ -10,11 +10,11 @@ const hero = createBlock({
     "Use this block as the main landing section at the top of a page. It should capture attention immediately with a clear value proposition.",
   content: {
     title: Type.String({
-      default: "Welcome to {{projectName}}",
+      default: "Let's get going on {{projectName}}",
       title: "Title",
     }),
     description: Type.String({
-      default: "Build something amazing with Camox.",
+      default: "Build something amazing with Camox. Press ⌘+Enter to start editing content.",
       maxLength: 280,
       title: "Description",
     }),
@@ -22,12 +22,55 @@ const hero = createBlock({
       default: { text: "Get Started", href: "/", newTab: false },
       title: "CTA",
     }),
+    illustration: Type.Image({
+      title: "Illustration",
+    }),
+  },
+  settings: {
+    withIllustration: Type.Boolean({
+      default: true,
+      title: "With illustration",
+    }),
   },
   component: HeroComponent,
-  toMarkdown: (c) => [`# ${c.title}`, c.description, c.cta],
+  toMarkdown: (c, s) => [`# ${c.title}`, c.description, s.withIllustration(c.illustration), c.cta],
 });
 
 function HeroComponent() {
+  const withIllustration = hero.useSetting("withIllustration");
+
+  if (withIllustration) {
+    return (
+      <section className="py-32">
+        <div className="container mx-auto px-4">
+          <div className="grid items-center gap-12 lg:grid-cols-[1fr_auto]">
+            <div className="text-left">
+              <hero.Field name="title">
+                {(props) => (
+                  <h1
+                    {...props}
+                    className="text-foreground mb-6 text-5xl font-bold tracking-tight sm:text-6xl"
+                  />
+                )}
+              </hero.Field>
+              <hero.Field name="description">
+                {(props) => <p {...props} className="text-muted-foreground mb-10 text-xl" />}
+              </hero.Field>
+              <hero.Link name="cta">
+                {(props) => <Button size="lg" nativeButton={false} render={<Link {...props} />} />}
+              </hero.Link>
+            </div>
+            <hero.Image name="illustration">
+              {(props) => (
+                <img {...props} className="h-auto w-full max-w-sm rounded-lg lg:max-w-md" />
+              )}
+            </hero.Image>
+          </div>
+        </div>
+      </section>
+    );
+  }
+
   return (
     <section className="flex flex-col items-center justify-center py-32">
       <div className="container mx-auto px-4">

package/templates/default/src/camox/blocks/navbar.tsx

@@ -45,7 +45,7 @@ function NavbarComponent() {
       <div className="container mx-auto px-4">
         <div className="flex h-16 items-center justify-between">
           <navbar.Link name="title">
-            {(props) => <Link {...props} className="text-foreground text-xl font-bold" />}
+            {(props) => <Link {...props} className="text-foreground text-lg font-bold" />}
           </navbar.Link>
 
           <div className="flex items-center gap-6">

package/templates/default/src/camox/blocks/statistics.tsx

@@ -45,50 +45,47 @@ const statistics = createBlock({
 function StatisticsComponent() {
   return (
     <section className="dark bg-background py-24">
-      <div className="container mx-auto px-4">
-        <div className="mx-auto max-w-6xl">
-          <div className="mb-16">
-            <statistics.Field name="title">
-              {(props) => (
-                <div
-                  {...props}
-                  className="text-primary mb-4 text-sm font-semibold tracking-wider uppercase"
-                />
-              )}
-            </statistics.Field>
-            <statistics.Field name="subtitle">
-              {(props) => (
-                <h2 {...props} className="text-foreground mb-6 text-4xl font-bold sm:text-5xl" />
-              )}
-            </statistics.Field>
-            <statistics.Field name="description">
-              {(props) => (
-                <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
-              )}
-            </statistics.Field>
-          </div>
-
-          <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
-            <statistics.Repeater name="statistics">
-              {(stat) => (
-                <div className="flex gap-3">
-                  <div className="w-0.5 bg-linear-to-b from-teal-400 to-blue-500" />
-                  <div className="flex flex-col">
-                    <stat.Field name="number">
-                      {(props) => (
-                        <div {...props} className="text-foreground mb-2 text-4xl font-bold" />
-                      )}
-                    </stat.Field>
-                    <stat.Field name="label">
-                      {(props) => (
-                        <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
-                      )}
-                    </stat.Field>
-                  </div>
+      <div className="container mx-auto">
+        <div className="mb-16">
+          <statistics.Field name="title">
+            {(props) => (
+              <div
+                {...props}
+                className="text-accent-foreground mb-4 text-sm font-semibold tracking-wider uppercase"
+              />
+            )}
+          </statistics.Field>
+          <statistics.Field name="subtitle">
+            {(props) => (
+              <h2 {...props} className="text-foreground mb-6 text-4xl font-bold sm:text-5xl" />
+            )}
+          </statistics.Field>
+          <statistics.Field name="description">
+            {(props) => (
+              <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
+            )}
+          </statistics.Field>
+        </div>
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-4">
+          <statistics.Repeater name="statistics">
+            {(stat) => (
+              <div className="flex gap-3">
+                <div className="w-0.5 bg-linear-to-b from-teal-400 to-emerald-500" />
+                <div className="flex flex-col">
+                  <stat.Field name="number">
+                    {(props) => (
+                      <div {...props} className="text-foreground mb-2 text-4xl font-bold" />
+                    )}
+                  </stat.Field>
+                  <stat.Field name="label">
+                    {(props) => (
+                      <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
+                    )}
+                  </stat.Field>
                 </div>
-              )}
-            </statistics.Repeater>
-          </div>
+              </div>
+            )}
+          </statistics.Repeater>
         </div>
       </div>
     </section>

package/templates/default/src/camox/blocks/youtube-video.tsx

@@ -0,0 +1,158 @@
+import { Type, createBlock } from "camox/createBlock";
+
+import { cn } from "@/lib/utils";
+
+const youtubeVideo = createBlock({
+  id: "youtube-video",
+  title: "YouTube Video",
+  description:
+    "Embeds a YouTube video. Use this block to display a single YouTube video on a page. Don't try to guess the URL, use a web search tool to find a specific video URL instead.",
+  content: {
+    url: Type.Embed({
+      pattern:
+        "https:\\/\\/(www\\.)?(youtube\\.com\\/(watch\\?v=|embed\\/|shorts\\/)|youtu\\.be\\/).+",
+      default: "https://www.youtube.com/watch?v=-W_nFlIAWFM",
+      title: "YouTube URL",
+    }),
+  },
+  settings: {
+    fullWidth: Type.Boolean({
+      default: false,
+      title: "Full Width",
+    }),
+    theme: Type.Enum({
+      options: {
+        light: "Light",
+        dark: "Dark",
+      },
+      default: "light",
+      title: "Theme",
+    }),
+    autoplay: Type.Boolean({
+      default: false,
+      title: "Autoplay",
+    }),
+    mute: Type.Boolean({
+      default: false,
+      title: "Mute",
+    }),
+    controls: Type.Boolean({
+      default: true,
+      title: "Controls",
+    }),
+    showCaptions: Type.Boolean({
+      default: false,
+      title: "Show Captions",
+    }),
+    rel: Type.Boolean({
+      default: false,
+      title: "Related Videos",
+    }),
+    fullscreen: Type.Boolean({
+      default: true,
+      title: "Fullscreen",
+    }),
+  },
+  component: YouTubeVideoComponent,
+  toMarkdown: (c) => [c.url],
+});
+
+function extractVideoId(url: string): string | null {
+  const shortMatch = url.match(/youtu\.be\/([^?&]+)/);
+  if (shortMatch) return shortMatch[1];
+
+  const shortsMatch = url.match(/youtube\.com\/shorts\/([^?&]+)/);
+  if (shortsMatch) return shortsMatch[1];
+
+  const watchMatch = url.match(/[?&]v=([^&]+)/);
+  if (watchMatch) return watchMatch[1];
+
+  const embedMatch = url.match(/youtube\.com\/embed\/([^?&]+)/);
+  if (embedMatch) return embedMatch[1];
+
+  return null;
+}
+
+interface YouTubeParams {
+  autoplay: boolean;
+  mute: boolean;
+  controls: boolean;
+  showCaptions: boolean;
+  rel: boolean;
+  fullscreen: boolean;
+}
+
+function getYouTubeEmbedUrl(url: string, params: YouTubeParams): string {
+  const videoId = extractVideoId(url);
+  if (!videoId) return url;
+
+  const searchParams = new URLSearchParams();
+
+  if (params.autoplay) searchParams.set("autoplay", "1");
+  if (params.mute) searchParams.set("mute", "1");
+  if (!params.controls) searchParams.set("controls", "0");
+  if (params.showCaptions) searchParams.set("cc_load_policy", "1");
+  if (!params.rel) searchParams.set("rel", "0");
+  if (!params.fullscreen) searchParams.set("fs", "0");
+  searchParams.set("disablekb", "1");
+
+  const query = searchParams.toString();
+  return `https://www.youtube.com/embed/${videoId}${query ? `?${query}` : ""}`;
+}
+
+function YouTubeVideoComponent() {
+  const fullWidth = youtubeVideo.useSetting("fullWidth");
+  const theme = youtubeVideo.useSetting("theme");
+  const autoplay = youtubeVideo.useSetting("autoplay");
+  const mute = youtubeVideo.useSetting("mute");
+  const controls = youtubeVideo.useSetting("controls");
+  const showCaptions = youtubeVideo.useSetting("showCaptions");
+  const rel = youtubeVideo.useSetting("rel");
+  const fullscreen = youtubeVideo.useSetting("fullscreen");
+
+  const params: YouTubeParams = {
+    autoplay,
+    mute,
+    controls,
+    showCaptions,
+    rel,
+    fullscreen,
+  };
+
+  return (
+    <section className={cn(theme === "dark" ? "dark" : "light")}>
+      <div className={cn("bg-background", !fullWidth && "py-12")}>
+        <div className={cn(!fullWidth && "container mx-auto px-4")}>
+          <youtubeVideo.Embed name="url">
+            {(_props, { url }) => (
+              <div
+                className={cn(
+                  "relative w-full",
+                  !fullWidth && "overflow-hidden rounded-lg shadow-lg",
+                )}
+                style={{ paddingBottom: "56.25%" }}
+              >
+                <iframe
+                  src={getYouTubeEmbedUrl(url, params)}
+                  title="YouTube video"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowFullScreen={fullscreen}
+                  style={{
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
+                    border: 0,
+                  }}
+                />
+              </div>
+            )}
+          </youtubeVideo.Embed>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { youtubeVideo as block };

package/templates/default/src/camox/layouts/default.tsx

@@ -1,5 +1,6 @@
 import { createLayout } from "camox/createLayout";
 
+import { block as faqBlock } from "../blocks/faq";
 import { block as footerBlock } from "../blocks/footer";
 import { block as heroBlock } from "../blocks/hero";
 import { block as navbarBlock } from "../blocks/navbar";
@@ -12,7 +13,7 @@ const defaultLayout = createLayout({
   blocks: {
     before: [navbarBlock],
     after: [footerBlock],
-    initial: [heroBlock, statisticsBlock],
+    initial: [heroBlock, statisticsBlock, faqBlock],
   },
   component: DefaultLayout,
   buildMetaTitle: ({ pageMetaTitle, projectName }) => `${pageMetaTitle} | ${projectName}`,

package/templates/default/src/lib/utils.ts

@@ -1,7 +1,6 @@
-import type { ClassValue } from "clsx";
-import { clsx } from "clsx";
+import { clsx, type ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 
-export function cn(...inputs: Array<ClassValue>) {
+export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

package/templates/default/src/styles.css

@@ -1,6 +1,8 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
+@import "@fontsource-variable/inter";
+@import "@fontsource-variable/noto-serif";
 
 @custom-variant dark (&:is(.dark *));
 
@@ -15,73 +17,73 @@ body {
 
 :root {
   --background: oklch(1 0 0);
-  --foreground: oklch(0.13 0.028 261.692);
+  --foreground: oklch(0.141 0.005 285.823);
   --card: oklch(1 0 0);
-  --card-foreground: oklch(0.13 0.028 261.692);
+  --card-foreground: oklch(0.141 0.005 285.823);
   --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.13 0.028 261.692);
-  --primary: oklch(0.21 0.034 264.665);
-  --primary-foreground: oklch(0.985 0.002 247.839);
-  --secondary: oklch(0.967 0.003 264.542);
-  --secondary-foreground: oklch(0.21 0.034 264.665);
-  --muted: oklch(0.967 0.003 264.542);
-  --muted-foreground: oklch(0.551 0.027 264.364);
-  --accent: oklch(0.967 0.003 264.542);
-  --accent-foreground: oklch(0.21 0.034 264.665);
+  --popover-foreground: oklch(0.141 0.005 285.823);
+  --primary: oklch(0.62 0.19 260);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.967 0.001 286.375);
+  --secondary-foreground: oklch(0.21 0.006 285.885);
+  --muted: oklch(0.967 0.001 286.375);
+  --muted-foreground: oklch(0.552 0.016 285.938);
+  --accent: oklch(0.967 0.001 286.375);
+  --accent-foreground: oklch(0.21 0.006 285.885);
   --destructive: oklch(0.577 0.245 27.325);
   --destructive-foreground: oklch(0.577 0.245 27.325);
-  --border: oklch(0.928 0.006 264.531);
-  --input: oklch(0.928 0.006 264.531);
-  --ring: oklch(0.707 0.022 261.325);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.4rem;
-  --sidebar: oklch(0.985 0.002 247.839);
-  --sidebar-foreground: oklch(0.13 0.028 261.692);
-  --sidebar-primary: oklch(0.21 0.034 264.665);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.967 0.003 264.542);
-  --sidebar-accent-foreground: oklch(0.21 0.034 264.665);
-  --sidebar-border: oklch(0.928 0.006 264.531);
-  --sidebar-ring: oklch(0.707 0.022 261.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.705 0.015 286.067);
+  --chart-1: oklch(0.871 0.006 286.286);
+  --chart-2: oklch(0.552 0.016 285.938);
+  --chart-3: oklch(0.442 0.017 285.786);
+  --chart-4: oklch(0.37 0.013 285.805);
+  --chart-5: oklch(0.274 0.006 286.033);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.141 0.005 285.823);
+  --sidebar-primary: oklch(0.609 0.126 221.723);
+  --sidebar-primary-foreground: oklch(0.984 0.019 200.873);
+  --sidebar-accent: oklch(0.967 0.001 286.375);
+  --sidebar-accent-foreground: oklch(0.21 0.006 285.885);
+  --sidebar-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.705 0.015 286.067);
 }
 
 .dark {
-  --background: oklch(0.13 0.028 261.692);
-  --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
-  --card-foreground: oklch(0.985 0.002 247.839);
-  --popover: oklch(0.21 0.034 264.665);
-  --popover-foreground: oklch(0.985 0.002 247.839);
-  --primary: oklch(0.928 0.006 264.531);
-  --primary-foreground: oklch(0.21 0.034 264.665);
-  --secondary: oklch(0.278 0.033 256.848);
-  --secondary-foreground: oklch(0.985 0.002 247.839);
-  --muted: oklch(0.278 0.033 256.848);
-  --muted-foreground: oklch(0.707 0.022 261.325);
-  --accent: oklch(0.278 0.033 256.848);
-  --accent-foreground: oklch(0.985 0.002 247.839);
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.21 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.21 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.62 0.19 260);
+  --primary-foreground: oklch(0.984 0.019 200.873);
+  --secondary: oklch(0.274 0.006 286.033);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.274 0.006 286.033);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
   --destructive: oklch(0.704 0.191 22.216);
   --destructive-foreground: oklch(0.637 0.237 25.331);
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.551 0.027 264.364);
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.21 0.034 264.665);
-  --sidebar-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0.002 247.839);
-  --sidebar-accent: oklch(0.278 0.033 256.848);
-  --sidebar-accent-foreground: oklch(0.985 0.002 247.839);
+  --ring: oklch(0.552 0.016 285.938);
+  --chart-1: oklch(0.871 0.006 286.286);
+  --chart-2: oklch(0.552 0.016 285.938);
+  --chart-3: oklch(0.442 0.017 285.786);
+  --chart-4: oklch(0.37 0.013 285.805);
+  --chart-5: oklch(0.274 0.006 286.033);
+  --sidebar: oklch(0.21 0.006 285.885);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.715 0.143 215.221);
+  --sidebar-primary-foreground: oklch(0.302 0.056 229.695);
+  --sidebar-accent: oklch(0.274 0.006 286.033);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
-  --sidebar-ring: oklch(0.551 0.027 264.364);
+  --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
 @theme inline {
@@ -121,6 +123,11 @@ body {
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --font-sans: "Inter Variable", sans-serif;
+  --font-heading: "Inter Variable", sans-serif;
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
 }
 
 @layer base {
@@ -133,4 +140,13 @@ body {
   a:focus-visible {
     @apply border-ring ring-ring/50 rounded-md ring-3 outline-none;
   }
+  html {
+    @apply font-sans;
+  }
+}
+
+@utility container {
+  margin-inline: auto;
+  padding-inline: 1rem;
+  max-width: 80rem;
 }