@camox/cli 0.2.0-alpha.4

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@camox/cli",
+  "version": "0.2.0-alpha.4",
+  "bin": {
+    "camox": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "type": "module",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "dependencies": {
+    "@clack/prompts": "^0.10.0",
+    "@optique/core": "*",
+    "@optique/run": "*",
+    "@orpc/client": "^1.13.13",
+    "@orpc/server": "^1.13.13"
+  },
+  "devDependencies": {
+    "@types/node": "^24.6.2",
+    "@typescript/native-preview": "^7.0.0-dev",
+    "oxlint": "^0.15.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "oxlint",
+    "check": "tsgo --noEmit && oxlint --fix"
+  }
+}

package/template/components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/styles.css",
+    "baseColor": "gray",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

package/template/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "{{projectSlug}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev --port 3000",
+    "start": "node .output/server/index.mjs",
+    "build": "vite build",
+    "serve": "vite preview",
+    "lint": "oxlint",
+    "check": "tsgo --noEmit && oxlint --fix"
+  },
+  "dependencies": {
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-router": "^1.166.2",
+    "@tanstack/react-start": "^1.166.2",
+    "@tanstack/router-plugin": "^1.166.2",
+    "camox": "{{camoxVersion}}",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.476.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.0.2",
+    "tailwindcss": "^4.0.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
+    "@typescript/native-preview": "^7.0.0-dev",
+    "@vitejs/plugin-react": "^6.0.1",
+    "babel-plugin-react-compiler": "19.1.0-rc.3",
+    "oxlint": "^0.15.15",
+    "tw-animate-css": "^1.3.6",
+    "typescript": "^5.7.2",
+    "vite": "8.0.1"
+  }
+}

package/template/src/camox/blocks/footer.tsx

@@ -0,0 +1,67 @@
+import { Link } from "@tanstack/react-router";
+import { Type, createBlock } from "camox/createBlock";
+
+const footer = createBlock({
+  id: "footer",
+  title: "Footer",
+  layoutOnly: true,
+  description: "A footer at the bottom of a page with a site name and navigation links.",
+  toMarkdown: ["{{title}}", "{{links}}"],
+  content: {
+    title: Type.String({ default: "{{projectName}}" }),
+    links: Type.RepeatableItem(
+      {
+        link: Type.Link({
+          default: { text: "Link", href: "#", newTab: false },
+          title: "Link",
+        }),
+      },
+      {
+        minItems: 1,
+        maxItems: 12,
+        title: "Links",
+        toMarkdown: ["{{link}}"],
+      },
+    ),
+  },
+  component: FooterComponent,
+});
+
+function FooterComponent() {
+  return (
+    <footer className="dark bg-background py-12">
+      <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">
+            {(content) => <div className="text-foreground text-lg font-bold">{content}</div>}
+          </footer.Field>
+
+          <div className="flex flex-wrap items-center gap-4">
+            <footer.Repeater name="links">
+              {(linkItem) => (
+                <linkItem.Link name="link">
+                  {({ text, href, newTab }) => (
+                    <Link
+                      to={href}
+                      target={newTab ? "_blank" : undefined}
+                      rel={newTab ? "noreferrer" : undefined}
+                      className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                    >
+                      {text}
+                    </Link>
+                  )}
+                </linkItem.Link>
+              )}
+            </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>
+  );
+}
+
+export { footer as block };

package/template/src/camox/blocks/hero.tsx

@@ -0,0 +1,64 @@
+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.",
+  toMarkdown: ["# {{title}}", "{{description}}", "{{cta}}"],
+  content: {
+    title: Type.String({
+      default: "Welcome to {{projectName}}",
+      title: "Title",
+    }),
+    description: Type.String({
+      default: "Build something amazing with Camox.",
+      maxLength: 280,
+      title: "Description",
+    }),
+    cta: Type.Link({
+      default: { text: "Get Started", href: "/", newTab: false },
+      title: "CTA",
+    }),
+  },
+  component: HeroComponent,
+});
+
+function HeroComponent() {
+  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">
+            {(content) => (
+              <h1 className="text-foreground mb-6 text-5xl font-bold tracking-tight sm:text-6xl">
+                {content}
+              </h1>
+            )}
+          </hero.Field>
+          <hero.Field name="description">
+            {(content) => <p className="text-muted-foreground mb-10 text-xl">{content}</p>}
+          </hero.Field>
+          <hero.Link name="cta">
+            {({ text, href, newTab }) => (
+              <Button size="lg" asChild>
+                <Link
+                  to={href}
+                  target={newTab ? "_blank" : undefined}
+                  rel={newTab ? "noreferrer" : undefined}
+                >
+                  {text}
+                </Link>
+              </Button>
+            )}
+          </hero.Link>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { hero as block };

package/template/src/camox/blocks/navbar.tsx

@@ -0,0 +1,95 @@
+import { Link } from "@tanstack/react-router";
+import { Type, createBlock } from "camox/createBlock";
+
+import { Button } from "@/components/ui/button";
+
+const navbar = createBlock({
+  id: "navbar",
+  title: "Navbar",
+  layoutOnly: true,
+  description:
+    "A navigation bar at the top of a page with a brand name, navigation links, and a call-to-action link.",
+  toMarkdown: ["{{title}}", "{{links}}", "{{cta}}"],
+  content: {
+    title: Type.Link({
+      title: "Site name",
+      default: {
+        href: "/",
+        text: "{{projectName}}",
+        newTab: false,
+      },
+    }),
+    links: Type.RepeatableItem(
+      {
+        link: Type.Link({
+          default: { text: "Link", href: "#", newTab: false },
+          title: "Link",
+        }),
+      },
+      {
+        minItems: 1,
+        maxItems: 6,
+        title: "Links",
+        toMarkdown: ["{{link}}"],
+      },
+    ),
+    cta: Type.Link({
+      default: { text: "Get Started", href: "#", newTab: false },
+      title: "CTA",
+    }),
+  },
+  component: NavbarComponent,
+});
+
+function NavbarComponent() {
+  return (
+    <nav className="dark bg-background border-border border-b">
+      <div className="container mx-auto px-4">
+        <div className="flex h-16 items-center justify-between">
+          <navbar.Link name="title">
+            {(link) => (
+              <Link className="text-foreground text-xl font-bold" to={link.href}>
+                {link.text}
+              </Link>
+            )}
+          </navbar.Link>
+
+          <div className="flex items-center gap-6">
+            <navbar.Repeater name="links">
+              {(linkItem) => (
+                <linkItem.Link name="link">
+                  {({ text, href, newTab }) => (
+                    <Link
+                      to={href}
+                      target={newTab ? "_blank" : undefined}
+                      rel={newTab ? "noreferrer" : undefined}
+                      className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                    >
+                      {text}
+                    </Link>
+                  )}
+                </linkItem.Link>
+              )}
+            </navbar.Repeater>
+
+            <navbar.Link name="cta">
+              {({ text, href, newTab }) => (
+                <Button size="sm" asChild>
+                  <Link
+                    to={href}
+                    target={newTab ? "_blank" : undefined}
+                    rel={newTab ? "noreferrer" : undefined}
+                  >
+                    {text}
+                  </Link>
+                </Button>
+              )}
+            </navbar.Link>
+          </div>
+        </div>
+      </div>
+    </nav>
+  );
+}
+
+export { navbar as block };

package/template/src/camox/blocks/statistics.tsx

@@ -0,0 +1,99 @@
+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.",
+  toMarkdown: ["## {{subtitle}}", "{{description}}", "{{statistics}}"],
+  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(
+      {
+        number: Type.String({
+          default: "100+",
+          maxLength: 7,
+          title: "Number",
+        }),
+        label: Type.String({
+          default: "projects launched",
+          title: "Label",
+        }),
+      },
+      {
+        minItems: 3,
+        maxItems: 8,
+        title: "Statistics",
+        toMarkdown: ["**{{number}}** — {{label}}"],
+      },
+    ),
+  },
+  component: StatisticsComponent,
+});
+
+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">
+              {(content) => (
+                <div className="text-primary mb-4 text-sm font-semibold tracking-wider uppercase">
+                  {content}
+                </div>
+              )}
+            </statistics.Field>
+            <statistics.Field name="subtitle">
+              {(content) => (
+                <h2 className="text-foreground mb-6 text-4xl font-bold sm:text-5xl">{content}</h2>
+              )}
+            </statistics.Field>
+            <statistics.Field name="description">
+              {(content) => (
+                <p className="text-muted-foreground max-w-3xl text-lg leading-relaxed">{content}</p>
+              )}
+            </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">
+                      {(content) => (
+                        <div className="text-foreground mb-2 text-4xl font-bold">{content}</div>
+                      )}
+                    </stat.Field>
+                    <stat.Field name="label">
+                      {(content) => (
+                        <p className="text-muted-foreground text-sm leading-relaxed">{content}</p>
+                      )}
+                    </stat.Field>
+                  </div>
+                </div>
+              )}
+            </statistics.Repeater>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { statistics as block };

package/template/src/camox/blocks/testimonial.tsx

@@ -0,0 +1,56 @@
+import { Type, createBlock } from "camox/createBlock";
+
+const testimonial = createBlock({
+  id: "testimonial",
+  title: "Testimonial",
+  description:
+    "Display a customer testimonial or user review. Ideal for building trust and social proof.",
+  toMarkdown: ["> {{quote}}", "— {{author}}, {{title}}, {{company}}"],
+  content: {
+    quote: Type.String({
+      default:
+        "This platform has transformed how we build and manage our website. The developer experience is exceptional.",
+      title: "Quote",
+    }),
+    author: Type.String({ default: "Sarah Chen", title: "Author" }),
+    title: Type.String({ default: "Senior Developer", title: "Title" }),
+    company: Type.String({ default: "TechCorp", title: "Company" }),
+  },
+  component: TestimonialComponent,
+});
+
+function TestimonialComponent() {
+  return (
+    <section className="bg-background py-24">
+      <div className="container mx-auto px-4">
+        <div className="mx-auto max-w-4xl text-center">
+          <testimonial.Field name="quote">
+            {(content) => (
+              <blockquote className="text-foreground mb-8 text-2xl leading-relaxed font-medium sm:text-3xl">
+                "{content}"
+              </blockquote>
+            )}
+          </testimonial.Field>
+          <div className="flex flex-col items-center">
+            <testimonial.Field name="author">
+              {(content) => (
+                <cite className="text-foreground text-lg font-semibold not-italic">{content}</cite>
+              )}
+            </testimonial.Field>
+            <div className="text-muted-foreground flex flex-col sm:flex-row sm:items-center sm:gap-2">
+              <testimonial.Field name="title">
+                {(content) => <span>{content}</span>}
+              </testimonial.Field>
+              <span className="hidden sm:inline">&bull;</span>
+              <testimonial.Field name="company">
+                {(content) => <span>{content}</span>}
+              </testimonial.Field>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export { testimonial as block };

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

@@ -0,0 +1,85 @@
+import { createLayout } from "camox/createLayout";
+
+import { block as footerBlock } from "../blocks/footer";
+import { block as heroBlock } from "../blocks/hero";
+import { block as navbarBlock } from "../blocks/navbar";
+import { block as statisticsBlock } from "../blocks/statistics";
+
+const defaultLayout = createLayout({
+  id: "default",
+  title: "Default",
+  description: "Default page layout with a navbar and footer",
+  blocks: { before: [navbarBlock], after: [footerBlock] },
+  initialBlocks: [heroBlock, statisticsBlock],
+  component: DefaultLayout,
+  buildMetaTitle: ({ pageMetaTitle, projectName }) => `${pageMetaTitle} | ${projectName}`,
+  buildOgImage: ({ title, description, projectName }) => (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "flex-start",
+        width: "100%",
+        height: "100%",
+        backgroundColor: "#09090b",
+        padding: "60px 80px",
+        fontFamily: "sans-serif",
+      }}
+    >
+      {projectName && (
+        <div
+          style={{
+            fontSize: 24,
+            color: "#a1a1aa",
+            marginBottom: 24,
+            textTransform: "uppercase",
+            letterSpacing: "0.1em",
+          }}
+        >
+          {projectName}
+        </div>
+      )}
+      <div
+        style={{
+          fontSize: 64,
+          fontWeight: 700,
+          color: "#fafafa",
+          lineHeight: 1.2,
+          marginBottom: 24,
+          maxWidth: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {title}
+      </div>
+      {description && (
+        <div
+          style={{
+            fontSize: 28,
+            color: "#a1a1aa",
+            lineHeight: 1.5,
+            maxWidth: "80%",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+          }}
+        >
+          {description}
+        </div>
+      )}
+    </div>
+  ),
+});
+
+function DefaultLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <main className="flex min-h-screen flex-col">
+      <defaultLayout.blocks.Navbar />
+      <div className="flex-1">{children}</div>
+      <defaultLayout.blocks.Footer />
+    </main>
+  );
+}
+
+export { defaultLayout as layout };

package/template/src/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import { Slot } from "@radix-ui/react-slot";
+import type { VariantProps } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/template/src/lib/utils.ts

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

package/template/src/router.tsx

@@ -0,0 +1,18 @@
+import { createRouter as createTanstackRouter } from "@tanstack/react-router";
+
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  const router = createTanstackRouter({
+    routeTree,
+    defaultPreload: "intent",
+  });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}