@camox/cli 0.10.1 → 0.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/cli",
-  "version": "0.10.1",
+  "version": "0.12.1",
   "bin": {
     "camox": "./dist/index.mjs"
   },
@@ -26,7 +26,12 @@
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
     "oxlint": "^0.15.0",
     "tsdown": "^0.21.8",
-    "@camox/api-contract": "0.10.1"
+    "@camox/api-contract": "0.12.1"
+  },
+  "nx": {
+    "tags": [
+      "type:pkg"
+    ]
   },
   "scripts": {
     "build": "tsdown",

package/template/package.json

@@ -26,6 +26,7 @@
     "nitro": "3.0.260311-beta",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
+    "shadcn": "^4.3.1",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.0.6"
   },

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

@@ -0,0 +1,63 @@
+import { Type, createBlock } from "camox/createBlock";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const faq = createBlock({
+  id: "faq",
+  title: "FAQ",
+  description:
+    "Use this block to answer common questions about the product, pricing, or company. Place it near the bottom of a page to address objections before a conversion section.",
+  content: {
+    items: Type.RepeatableItem({
+      content: {
+        question: Type.String({
+          default: "What is your refund policy?",
+          title: "Question",
+        }),
+        answer: Type.String({
+          default:
+            "We offer a 30-day money-back guarantee. If you're not satisfied, contact support and we'll process your refund right away.",
+          title: "Answer",
+        }),
+      },
+      minItems: 3,
+      maxItems: Infinity,
+      title: "Questions",
+      toMarkdown: (c) => [`Q: ${c.question}`, `A: ${c.answer}`],
+    }),
+  },
+  component: FaqComponent,
+  toMarkdown: (c) => [c.items],
+});
+
+function FaqComponent() {
+  return (
+    <section className="py-24">
+      <div className="mx-auto max-w-2xl px-4">
+        <Accordion>
+          <faq.Repeater name="items">
+            {(item, index) => (
+              <AccordionItem value={index}>
+                <AccordionTrigger className="items-center text-lg">
+                  <item.Field name="question">{(props) => <span {...props} />}</item.Field>
+                </AccordionTrigger>
+                <AccordionContent>
+                  <item.Field name="answer">
+                    {(props) => <p {...props} className="text-muted-foreground text-base" />}
+                  </item.Field>
+                </AccordionContent>
+              </AccordionItem>
+            )}
+          </faq.Repeater>
+        </Accordion>
+      </div>
+    </section>
+  );
+}
+
+export { faq as block };

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

@@ -6,25 +6,23 @@ const footer = createBlock({
   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(
-      {
+    links: Type.RepeatableItem({
+      content: {
         link: Type.Link({
           default: { text: "Link", href: "#", newTab: false },
           title: "Link",
         }),
       },
-      {
-        minItems: 1,
-        maxItems: 12,
-        title: "Links",
-        toMarkdown: ["{{link}}"],
-      },
-    ),
+      minItems: 1,
+      maxItems: 12,
+      title: "Links",
+      toMarkdown: (c) => [c.link],
+    }),
   },
   component: FooterComponent,
+  toMarkdown: (c) => [c.title, c.links],
 });
 
 function FooterComponent() {

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

@@ -8,7 +8,6 @@ const hero = createBlock({
   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}}",
@@ -25,6 +24,7 @@ const hero = createBlock({
     }),
   },
   component: HeroComponent,
+  toMarkdown: (c) => [`# ${c.title}`, c.description, c.cta],
 });
 
 function HeroComponent() {

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

@@ -9,7 +9,6 @@ const navbar = createBlock({
   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",
@@ -19,26 +18,25 @@ const navbar = createBlock({
         newTab: false,
       },
     }),
-    links: Type.RepeatableItem(
-      {
+    links: Type.RepeatableItem({
+      content: {
         link: Type.Link({
           default: { text: "Link", href: "#", newTab: false },
           title: "Link",
         }),
       },
-      {
-        minItems: 1,
-        maxItems: 6,
-        title: "Links",
-        toMarkdown: ["{{link}}"],
-      },
-    ),
+      minItems: 1,
+      maxItems: 6,
+      title: "Links",
+      toMarkdown: (c) => [c.link],
+    }),
     cta: Type.Link({
       default: { text: "Get Started", href: "#", newTab: false },
       title: "CTA",
     }),
   },
   component: NavbarComponent,
+  toMarkdown: (c) => [c.title, c.links, c.cta],
 });
 
 function NavbarComponent() {

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

@@ -5,7 +5,6 @@ const statistics = createBlock({
   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",
@@ -21,8 +20,8 @@ const statistics = createBlock({
         "Our platform empowers teams to build and ship faster. Here are some numbers we're proud of.",
       title: "Description",
     }),
-    statistics: Type.RepeatableItem(
-      {
+    statistics: Type.RepeatableItem({
+      content: {
         number: Type.String({
           default: "100+",
           maxLength: 7,
@@ -33,15 +32,14 @@ const statistics = createBlock({
           title: "Label",
         }),
       },
-      {
-        minItems: 3,
-        maxItems: 8,
-        title: "Statistics",
-        toMarkdown: ["**{{number}}** — {{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() {

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

@@ -5,7 +5,6 @@ const testimonial = createBlock({
   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:
@@ -17,6 +16,7 @@ const testimonial = createBlock({
     company: Type.String({ default: "TechCorp", title: "Company" }),
   },
   component: TestimonialComponent,
+  toMarkdown: (c) => [`> ${c.quote}`, `— ${c.author}, ${c.title}, ${c.company}`],
 });
 
 function TestimonialComponent() {

package/template/src/styles.css

@@ -1,5 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import "shadcn-ui/tailwind.css";
 
 @custom-variant dark (&:is(.dark *));