@camox/cli 0.6.0 → 0.7.0

package/dist/index.mjs

@@ -179,7 +179,7 @@ async function getOrAuthenticate() {
 		}
 		removeAuthToken();
 		p.log.warn("Session expired. Please log in again.");
-	} else p.log.info("Please connect to Camox so we can create a project on the Camox API.");
+	} else p.log.info("Please connect to Camox so we can create your project on the Camox API.");
 	return authenticateUser();
 }
 //#endregion

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@camox/cli",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "bin": {
     "camox": "./dist/index.mjs"
   },
@@ -25,7 +25,7 @@
     "@typescript/native-preview": "7.0.0-dev.20260412.1",
     "oxlint": "^0.15.0",
     "tsdown": "^0.21.8",
-    "@camox/api": "0.6.0"
+    "@camox/api": "0.7.0"
   },
   "scripts": {
     "build": "tsdown",

package/template/components.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://ui.shadcn.com/schema.json",
-  "style": "new-york",
+  "style": "base-vega",
   "rsc": false,
   "tsx": true,
   "tailwind": {

package/template/package.json

@@ -12,7 +12,7 @@
     "prepare": "vp config"
   },
   "dependencies": {
-    "@radix-ui/react-slot": "^1.2.4",
+    "@base-ui/react": "^1.4.0",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.99.0",
     "@tanstack/react-router": "^1.168.18",

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

@@ -33,22 +33,18 @@ function FooterComponent() {
       <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>}
+            {(props) => <div {...props} className="text-foreground text-lg font-bold" />}
           </footer.Field>
 
           <div className="flex flex-wrap items-center gap-4">
             <footer.Repeater name="links">
               {(linkItem) => (
                 <linkItem.Link name="link">
-                  {({ text, href, newTab }) => (
+                  {(props) => (
                     <Link
-                      to={href}
-                      target={newTab ? "_blank" : undefined}
-                      rel={newTab ? "noreferrer" : undefined}
+                      {...props}
                       className="text-muted-foreground hover:text-foreground text-sm transition-colors"
-                    >
-                      {text}
-                    </Link>
+                    />
                   )}
                 </linkItem.Link>
               )}

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

@@ -33,27 +33,18 @@ function HeroComponent() {
       <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>
+            {(props) => (
+              <h1
+                {...props}
+                className="text-foreground mb-6 text-5xl font-bold tracking-tight sm:text-6xl"
+              />
             )}
           </hero.Field>
           <hero.Field name="description">
-            {(content) => <p className="text-muted-foreground mb-10 text-xl">{content}</p>}
+            {(props) => <p {...props} className="text-muted-foreground mb-10 text-xl" />}
           </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>
-            )}
+            {(props) => <Button size="lg" nativeButton={false} render={<Link {...props} />} />}
           </hero.Link>
         </div>
       </div>

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

@@ -47,43 +47,25 @@ function NavbarComponent() {
       <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>
-            )}
+            {(props) => <Link {...props} className="text-foreground text-xl font-bold" />}
           </navbar.Link>
 
           <div className="flex items-center gap-6">
             <navbar.Repeater name="links">
               {(linkItem) => (
                 <linkItem.Link name="link">
-                  {({ text, href, newTab }) => (
+                  {(props) => (
                     <Link
-                      to={href}
-                      target={newTab ? "_blank" : undefined}
-                      rel={newTab ? "noreferrer" : undefined}
+                      {...props}
                       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>
-              )}
+              {(props) => <Button size="sm" nativeButton={false} render={<Link {...props} />} />}
             </navbar.Link>
           </div>
         </div>

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

@@ -51,20 +51,21 @@ function StatisticsComponent() {
         <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>
+              {(props) => (
+                <div
+                  {...props}
+                  className="text-primary mb-4 text-sm font-semibold tracking-wider uppercase"
+                />
               )}
             </statistics.Field>
             <statistics.Field name="subtitle">
-              {(content) => (
-                <h2 className="text-foreground mb-6 text-4xl font-bold sm:text-5xl">{content}</h2>
+              {(props) => (
+                <h2 {...props} className="text-foreground mb-6 text-4xl font-bold sm:text-5xl" />
               )}
             </statistics.Field>
             <statistics.Field name="description">
-              {(content) => (
-                <p className="text-muted-foreground max-w-3xl text-lg leading-relaxed">{content}</p>
+              {(props) => (
+                <p {...props} className="text-muted-foreground max-w-3xl text-lg leading-relaxed" />
               )}
             </statistics.Field>
           </div>
@@ -76,13 +77,13 @@ function StatisticsComponent() {
                   <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>
+                      {(props) => (
+                        <div {...props} className="text-foreground mb-2 text-4xl font-bold" />
                       )}
                     </stat.Field>
                     <stat.Field name="label">
-                      {(content) => (
-                        <p className="text-muted-foreground text-sm leading-relaxed">{content}</p>
+                      {(props) => (
+                        <p {...props} className="text-muted-foreground text-sm leading-relaxed" />
                       )}
                     </stat.Field>
                   </div>

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

@@ -25,26 +25,25 @@ function TestimonialComponent() {
       <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}"
+            {(props) => (
+              <blockquote
+                {...props}
+                className="text-foreground mb-8 text-2xl leading-relaxed font-medium sm:text-3xl"
+              >
+                "{props.children}"
               </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>
+              {(props) => (
+                <cite {...props} className="text-foreground text-lg font-semibold not-italic" />
               )}
             </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>
+              <testimonial.Field name="title">{(props) => <span {...props} />}</testimonial.Field>
               <span className="hidden sm:inline">&bull;</span>
-              <testimonial.Field name="company">
-                {(content) => <span>{content}</span>}
-              </testimonial.Field>
+              <testimonial.Field name="company">{(props) => <span {...props} />}</testimonial.Field>
             </div>
           </div>
         </div>

package/template/src/client.tsx

@@ -0,0 +1,12 @@
+import { StartClient } from "@tanstack/react-start/client";
+import { StrictMode, startTransition } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <StartClient />
+    </StrictMode>,
+  );
+});

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

@@ -1,29 +1,36 @@
-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 { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
 
 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",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     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",
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
         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",
+          "border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
         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",
+        default:
+          "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+        lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
         icon: "size-9",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -35,18 +42,12 @@ const buttonVariants = cva(
 
 function Button({
   className,
-  variant,
-  size,
-  asChild = false,
+  variant = "default",
+  size = "default",
   ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
   return (
-    <Comp
+    <ButtonPrimitive
       data-slot="button"
       className={cn(buttonVariants({ variant, size, className }))}
       {...props}

package/template/vite.config.ts

@@ -18,5 +18,9 @@ export default defineConfig(({ mode }) => {
       react(),
       babelPlugin({ presets: [reactCompilerPreset()] }),
     ],
+    optimizeDeps: {
+      // See https://github.com/TanStack/router/issues/5738#issuecomment-3512609172
+      include: ["@base-ui/utils"],
+    },
   };
 });