create-camox 0.1.0-alpha.0

package/LICENSE.md

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 Rémi de Juvigny
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
+of the Software, and to permit persons to whom the Software is furnished to do
+so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.js

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+import * as p from "@clack/prompts";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+function slugify(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+function copyDir(src, dest, replacements) {
+  fs.mkdirSync(dest, { recursive: true });
+  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()) {
+      copyDir(srcPath, destPath, replacements);
+      continue;
+    }
+    let content = fs.readFileSync(srcPath, "utf-8");
+    for (const [key, value] of Object.entries(replacements)) {
+      content = content.replaceAll(key, value);
+    }
+    fs.writeFileSync(destPath, content);
+  }
+}
+async function main() {
+  p.intro("create-camox");
+  const result = await p.group(
+    {
+      name: () => p.text({
+        message: "Project display name",
+        placeholder: "My Website",
+        validate: (value) => {
+          if (!value.trim()) return "Project name is required";
+        }
+      }),
+      slug: ({ results }) => p.text({
+        message: "Project slug",
+        initialValue: slugify(results.name ?? ""),
+        validate: (value) => {
+          if (!value.trim()) return "Slug is required";
+          if (!/^[a-z0-9][a-z0-9-]*[a-z0-9]$/.test(value) && !/^[a-z0-9]$/.test(value)) {
+            return "Slug must be lowercase alphanumeric with hyphens";
+          }
+        }
+      }),
+      path: ({ results }) => p.text({
+        message: "Project path",
+        initialValue: `./${results.slug ?? "my-site"}`,
+        validate: (value) => {
+          if (!value.trim()) return "Path is required";
+        }
+      })
+    },
+    {
+      onCancel: () => {
+        p.cancel("Cancelled.");
+        process.exit(0);
+      }
+    }
+  );
+  const targetDir = path.resolve(result.path);
+  if (fs.existsSync(targetDir) && fs.readdirSync(targetDir).length > 0) {
+    p.cancel(`Directory ${targetDir} is not empty.`);
+    process.exit(1);
+  }
+  const s = p.spinner();
+  s.start("Scaffolding project...");
+  const templateDir = path.resolve(__dirname, "..", "template");
+  copyDir(templateDir, targetDir, {
+    "{{projectName}}": result.name,
+    "{{projectSlug}}": result.slug
+  });
+  s.stop("Project scaffolded!");
+  p.note([`cd ${result.path}`, "pnpm install", "pnpm dev"].join("\n"), "Next steps");
+  p.outro("Happy building!");
+}
+main().catch(console.error);

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "create-camox",
+  "version": "0.1.0-alpha.0",
+  "bin": {
+    "create-camox": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "type": "module",
+  "dependencies": {
+    "@clack/prompts": "^0.10.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.2"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  }
+}

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": "latest",
+    "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.RepeatableObject(
+      {
+        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.RepeatableObject(
+      {
+        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.RepeatableObject(
+      {
+        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,82 @@
+import { createLayout } from "camox/createLayout";
+
+import { block as footerBlock } from "../blocks/footer";
+import { block as navbarBlock } from "../blocks/navbar";
+
+const defaultLayout = createLayout({
+  id: "default",
+  title: "Default",
+  description: "Default page layout with a navbar and footer",
+  blocks: { before: [navbarBlock], after: [footerBlock] },
+  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/styles.css

@@ -0,0 +1,132 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+body {
+  @apply m-0;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
+    "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.13 0.028 261.692);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.13 0.028 261.692);
+  --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);
+  --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);
+}
+
+.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);
+  --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);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.551 0.027 264.364);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/template/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "include": ["./**/*.ts", "./**/*.tsx"],
+  "exclude": ["node_modules", "dist"],
+  "compilerOptions": {
+    "target": "ES2022",
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "types": ["vite/client"],
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "noEmit": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
+}

package/template/vite.config.ts

@@ -0,0 +1,10 @@
+import tailwindcss from "@tailwindcss/vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import viteReact from "@vitejs/plugin-react";
+import { camox } from "camox/vite";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  resolve: { tsconfigPaths: true },
+  plugins: [tailwindcss(), camox({ projectSlug: "{{projectSlug}}" }), tanstackStart(), viteReact()],
+});