@camox/cli 0.15.1 → 0.16.1

package/dist/index.mjs

@@ -6,7 +6,7 @@ import { defineProgram } from "@optique/core/program";
 import { runSync } from "@optique/run";
 import { multiple, optional } from "@optique/core/modifiers";
 import { command, constant, option } from "@optique/core/primitives";
-import { integer, string } from "@optique/core/valueparser";
+import { choice, integer, string } from "@optique/core/valueparser";
 import { execSync, spawn, spawnSync } from "node:child_process";
 import fs from "node:fs";
 import http from "node:http";
@@ -382,7 +382,11 @@ const parser$6 = command("blocks", or(command("types", object({
 	type: option("--type", string({ metavar: "TYPE" })),
 	content: option("--content", string({ metavar: "JSON" })),
 	settings: optional(option("--settings", string({ metavar: "JSON" }))),
+	position: optional(option("--position", choice(["first", "last"], { metavar: "WHERE" }))),
+	afterId: optional(option("--after-id", integer({ metavar: "ID" }))),
+	beforeId: optional(option("--before-id", integer({ metavar: "ID" }))),
 	afterPosition: optional(option("--after-position", string({ metavar: "POS" }))),
+	beforePosition: optional(option("--before-position", string({ metavar: "POS" }))),
 	project: projectFlag$2,
 	production: productionFlag$2,
 	json: jsonFlag$2
@@ -397,7 +401,11 @@ const parser$6 = command("blocks", or(command("types", object({
 })), command("move", object({
 	command: constant("blocks.move"),
 	id: option("--id", integer({ metavar: "ID" })),
+	position: optional(option("--position", choice(["first", "last"], { metavar: "WHERE" }))),
+	afterId: optional(option("--after-id", integer({ metavar: "ID" }))),
+	beforeId: optional(option("--before-id", integer({ metavar: "ID" }))),
 	afterPosition: optional(option("--after-position", string({ metavar: "POS" }))),
+	beforePosition: optional(option("--before-position", string({ metavar: "POS" }))),
 	project: projectFlag$2,
 	production: productionFlag$2,
 	json: jsonFlag$2
@@ -408,6 +416,32 @@ const parser$6 = command("blocks", or(command("types", object({
 	production: productionFlag$2,
 	json: jsonFlag$2
 }))));
+const POSITIONING_FLAGS = [
+	["position", "--position"],
+	["afterId", "--after-id"],
+	["beforeId", "--before-id"],
+	["afterPosition", "--after-position"],
+	["beforePosition", "--before-position"]
+];
+/**
+* Both `create` and `move` accept multiple positioning inputs, but only one is
+* meaningful per call. The server will reject conflicts, but we surface the
+* mistake earlier (and with friendlier wording) by checking on the client.
+*/
+function collectPositioningArgs(args) {
+	const used = [];
+	const toolArgs = {};
+	for (const [key, flag] of POSITIONING_FLAGS) {
+		const value = args[key];
+		if (value === void 0) continue;
+		used.push(flag);
+		Object.assign(toolArgs, { [key]: value });
+	}
+	return {
+		used,
+		toolArgs
+	};
+}
 async function handler$6(args) {
 	const outputMode = args.json ? "json" : "auto";
 	const projectFlag = args.project;
@@ -431,6 +465,14 @@ async function handler$6(args) {
 			case "blocks.create": {
 				const content = parseJsonFlag("--content", args.content);
 				const settings = args.settings !== void 0 ? parseJsonFlag("--settings", args.settings) : void 0;
+				const { used, toolArgs } = collectPositioningArgs(args);
+				if (used.length > 1) {
+					printError({
+						code: "INVALID_ARGS",
+						message: `Pass at most one positioning flag — got: ${used.join(", ")}.`
+					});
+					process.exit(2);
+				}
 				return dispatch({
 					toolName: "createBlock",
 					args: {
@@ -438,7 +480,7 @@ async function handler$6(args) {
 						type: args.type,
 						content,
 						settings,
-						afterPosition: args.afterPosition
+						...toolArgs
 					},
 					projectFlag,
 					production,
@@ -460,16 +502,33 @@ async function handler$6(args) {
 					outputMode
 				});
 			}
-			case "blocks.move": return dispatch({
-				toolName: "moveBlock",
-				args: {
-					id: args.id,
-					afterPosition: args.afterPosition
-				},
-				projectFlag,
-				production,
-				outputMode
-			});
+			case "blocks.move": {
+				const { used, toolArgs } = collectPositioningArgs(args);
+				if (used.length === 0) {
+					printError({
+						code: "INVALID_ARGS",
+						message: "Pass a positioning flag — one of --position, --after-id, --before-id, --after-position, --before-position. Use `--position last` to move a block to the end of the page."
+					});
+					process.exit(2);
+				}
+				if (used.length > 1) {
+					printError({
+						code: "INVALID_ARGS",
+						message: `Pass at most one positioning flag — got: ${used.join(", ")}.`
+					});
+					process.exit(2);
+				}
+				return dispatch({
+					toolName: "moveBlock",
+					args: {
+						id: args.id,
+						...toolArgs
+					},
+					projectFlag,
+					production,
+					outputMode
+				});
+			}
 			case "blocks.delete": return dispatch({
 				toolName: "deleteBlock",
 				args: { id: args.id },
@@ -508,7 +567,7 @@ function copyDir(src, dest, replacements) {
 	for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
 		const srcPath = path.join(src, entry.name);
 		const destPath = path.join(dest, entry.name);
-		if (entry.isDirectory()) {
+		if (fs.statSync(srcPath).isDirectory()) {
 			copyDir(srcPath, destPath, replacements);
 			continue;
 		}
@@ -653,10 +712,12 @@ async function init() {
 	const pm = selected;
 	const s = p.spinner();
 	s.start("Scaffolding project...");
-	copyDir(path.resolve(__dirname, "..", "template"), targetDir, {
-		"{{projectName}}": name,
-		"{{projectSlug}}": project.slug
-	});
+	copyDir(path.resolve(__dirname, "..", "templates", "default"), targetDir, { "{{projectName}}": name });
+	const viteConfigPath = path.join(targetDir, "vite.config.ts");
+	let viteConfig = fs.readFileSync(viteConfigPath, "utf-8");
+	viteConfig = viteConfig.replace(/"[^"]*"(,?)[ \t]*\/\/[ \t]*camox-cli:replace-slug.*$/gm, `"${project.slug}"$1`);
+	viteConfig = viteConfig.replace(/^[ \t]*\/\/[ \t]*camox-cli:dev-only-start[ \t]*\r?\n[\s\S]*?^[ \t]*\/\/[ \t]*camox-cli:dev-only-end[ \t]*\r?\n/gm, "");
+	fs.writeFileSync(viteConfigPath, viteConfig);
 	const pkgPath = path.join(targetDir, "package.json");
 	const pkg = JSON.parse(fs.readFileSync(pkgPath, "utf-8"));
 	pkg.name = project.slug;
@@ -963,7 +1024,7 @@ switch (result.command) {
 		await handler$3();
 		break;
 	case "logout":
-		await handler$2();
+		handler$2();
 		break;
 	case "status":
 		await handler(result);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@camox/cli",
-  "version": "0.15.1",
+  "version": "0.16.1",
   "bin": {
     "camox": "./dist/index.mjs"
   },
   "files": [
     "dist",
-    "template"
+    "templates"
   ],
   "type": "module",
   "main": "./dist/index.mjs",
@@ -25,9 +25,8 @@
   "devDependencies": {
     "@types/node": "^24.12.2",
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
-    "oxlint": "^0.15.0",
-    "tsdown": "^0.21.8",
-    "@camox/api-contract": "0.15.1"
+    "vite-plus": "latest",
+    "@camox/api-contract": "0.16.1"
   },
   "nx": {
     "tags": [
@@ -35,9 +34,9 @@
     ]
   },
   "scripts": {
-    "build": "tsdown",
-    "dev": "tsdown --watch",
-    "lint": "oxlint",
-    "check": "tsgo --noEmit && oxlint --fix"
+    "build": "node scripts/sync-templates.mjs && vp pack",
+    "dev": "node scripts/sync-templates.mjs --watch --build",
+    "lint": "vp lint",
+    "check": "tsgo --noEmit && vp lint --fix"
   }
 }

package/{template → 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/{template → templates/default}/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@camox/template",
+  "name": "@camox/template-default",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -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/{template → 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

@@ -0,0 +1,98 @@
+import { Link } from "@tanstack/react-router";
+import { Type, createBlock } from "camox/createBlock";
+
+import { Button } from "@/components/ui/button";
+
+const hero = createBlock({
+  id: "hero",
+  title: "Hero",
+  description:
+    "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: "Let's get going on {{projectName}}",
+      title: "Title",
+    }),
+    description: Type.String({
+      default: "Build something amazing with Camox. Press ⌘+Enter to start editing content.",
+      maxLength: 280,
+      title: "Description",
+    }),
+    cta: Type.Link({
+      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, 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">
+        <div className="mx-auto max-w-3xl text-center">
+          <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>
+      </div>
+    </section>
+  );
+}
+
+export { hero as block };

package/{template → 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

@@ -0,0 +1,95 @@
+import { Type, createBlock } from "camox/createBlock";
+
+const statistics = createBlock({
+  id: "statistics",
+  title: "Statistics",
+  description:
+    "Showcase key metrics, achievements, or performance indicators. Ideal for displaying platform statistics or company milestones.",
+  content: {
+    title: Type.String({
+      default: "By the numbers",
+      maxLength: 30,
+      title: "Title",
+    }),
+    subtitle: Type.String({
+      default: "Trusted by teams worldwide",
+      title: "Subtitle",
+    }),
+    description: Type.String({
+      default:
+        "Our platform empowers teams to build and ship faster. Here are some numbers we're proud of.",
+      title: "Description",
+    }),
+    statistics: Type.RepeatableItem({
+      content: {
+        number: Type.String({
+          default: "100+",
+          maxLength: 7,
+          title: "Number",
+        }),
+        label: Type.String({
+          default: "projects launched",
+          title: "Label",
+        }),
+      },
+      minItems: 3,
+      maxItems: 8,
+      title: "Statistics",
+      toMarkdown: (c) => [`**${c.number}** — ${c.label}`],
+    }),
+  },
+  component: StatisticsComponent,
+  toMarkdown: (c) => [`## ${c.subtitle}`, c.description, c.statistics],
+});
+
+function StatisticsComponent() {
+  return (
+    <section className="dark bg-background py-24">
+      <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>
+              </div>
+            )}
+          </statistics.Repeater>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { statistics as block };

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/{template → 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}`,