@vertz/create-vertz-app 0.2.41 → 0.2.42

package/dist/scaffold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK;gBACjC,WAAW,EAAE,MAAM;CAIhC;AAED;;;;GAIG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBzF"}
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AAElD;;GAEG;AACH,qBAAa,oBAAqB,SAAQ,KAAK;gBACjC,WAAW,EAAE,MAAM;CAIhC;AAED;;;;GAIG;AACH,wBAAsB,QAAQ,CAAC,SAAS,EAAE,MAAM,EAAE,OAAO,EAAE,eAAe,GAAG,OAAO,CAAC,IAAI,CAAC,CAoBzF"}

package/dist/scaffold.js

@@ -1,6 +1,6 @@
 import { promises as fs } from 'node:fs';
 import path from 'node:path';
-import { apiDevelopmentRuleTemplate, appComponentTemplate, bunfigTemplate, bunPluginShimTemplate, claudeMdTemplate, clientTemplate, dbTemplate, entryClientTemplate, envExampleTemplate, envModuleTemplate, envTemplate, faviconTemplate, gitignoreTemplate, helloWorldAppTemplate, helloWorldClaudeMdTemplate, helloWorldHomePageTemplate, helloWorldPackageJsonTemplate, helloWorldVertzConfigTemplate, homePageTemplate, packageJsonTemplate, schemaTemplate, serverTemplate, tasksEntityTemplate, themeTemplate, tsconfigTemplate, uiDevelopmentRuleTemplate, vertzConfigTemplate, } from './templates/index.js';
+import { apiDevelopmentRuleTemplate, appComponentTemplate, bunfigTemplate, bunPluginShimTemplate, claudeMdTemplate, clientTemplate, dbTemplate, entryClientTemplate, envExampleTemplate, envModuleTemplate, envTemplate, faviconTemplate, gitignoreTemplate, helloWorldAboutPageTemplate, helloWorldAppTemplate, helloWorldClaudeMdTemplate, helloWorldHomePageTemplate, helloWorldNavBarTemplate, helloWorldPackageJsonTemplate, helloWorldRouterTemplate, helloWorldVertzConfigTemplate, homePageTemplate, packageJsonTemplate, schemaTemplate, serverTemplate, tasksEntityTemplate, themeTemplate, tsconfigTemplate, uiDevelopmentRuleTemplate, vertzConfigTemplate, } from './templates/index.js';
 /**
  * Error thrown when the project directory already exists
  */
@@ -42,11 +42,13 @@ export async function scaffold(parentDir, options) {
 async function scaffoldHelloWorld(projectDir, projectName) {
     const srcDir = path.join(projectDir, 'src');
     const pagesDir = path.join(srcDir, 'pages');
+    const componentsDir = path.join(srcDir, 'components');
     const stylesDir = path.join(srcDir, 'styles');
     const claudeRulesDir = path.join(projectDir, '.claude', 'rules');
     const publicDir = path.join(projectDir, 'public');
     await Promise.all([
         fs.mkdir(pagesDir, { recursive: true }),
+        fs.mkdir(componentsDir, { recursive: true }),
         fs.mkdir(stylesDir, { recursive: true }),
         fs.mkdir(claudeRulesDir, { recursive: true }),
         fs.mkdir(publicDir, { recursive: true }),
@@ -62,7 +64,10 @@ async function scaffoldHelloWorld(projectDir, projectName) {
         // UI source files
         writeFile(srcDir, 'app.tsx', helloWorldAppTemplate()),
         writeFile(srcDir, 'entry-client.ts', entryClientTemplate()),
+        writeFile(srcDir, 'router.tsx', helloWorldRouterTemplate()),
         writeFile(pagesDir, 'home.tsx', helloWorldHomePageTemplate()),
+        writeFile(pagesDir, 'about.tsx', helloWorldAboutPageTemplate()),
+        writeFile(componentsDir, 'nav-bar.tsx', helloWorldNavBarTemplate()),
         writeFile(stylesDir, 'theme.ts', themeTemplate()),
         // Static assets
         writeFile(publicDir, 'favicon.svg', faviconTemplate()),

package/dist/templates/index.d.ts

@@ -101,7 +101,7 @@ export declare function helloWorldPackageJsonTemplate(projectName: string): stri
  */
 export declare function helloWorldVertzConfigTemplate(): string;
 /**
- * src/app.tsx for hello-world — simple App with ThemeProvider
+ * src/app.tsx for hello-world — App with RouterContext.Provider, RouterView, and NavBar
  */
 export declare function helloWorldAppTemplate(): string;
 /**
@@ -109,4 +109,16 @@ export declare function helloWorldAppTemplate(): string;
  * the Vertz compiler's signal transformation (let → signal)
  */
 export declare function helloWorldHomePageTemplate(): string;
+/**
+ * src/router.tsx for hello-world — route definitions + router instance
+ */
+export declare function helloWorldRouterTemplate(): string;
+/**
+ * src/pages/about.tsx for hello-world — simple second page
+ */
+export declare function helloWorldAboutPageTemplate(): string;
+/**
+ * src/components/nav-bar.tsx for hello-world — navigation with Link
+ */
+export declare function helloWorldNavBarTemplate(): string;
 //# sourceMappingURL=index.d.ts.map

package/dist/templates/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CAyJnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CAoRlD;AAID;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAGxC;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA6B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAWnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CActC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAmLzC;AAID;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA8BtE;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAuBzE;AAED;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,MAAM,CAItD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAgC9C;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CA4BnD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/templates/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA+C5D;AAED;;GAEG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CA+KnD;AAED;;GAEG;AACH,wBAAgB,yBAAyB,IAAI,MAAM,CAwSlD;AAID;;GAEG;AACH,wBAAgB,eAAe,IAAI,MAAM,CAGxC;AAID;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CA4B/D;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAoBzC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAa5C;AAED;;GAEG;AACH,wBAAgB,WAAW,IAAI,MAAM,CAIpC;AAED;;GAEG;AACH,wBAAgB,kBAAkB,IAAI,MAAM,CAI3C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAIvC;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CAc9C;AAED;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CA6B1C;AAID;;GAEG;AACH,wBAAgB,iBAAiB,IAAI,MAAM,CAW1C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAoBvC;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAavC;AAED;;GAEG;AACH,wBAAgB,UAAU,IAAI,MAAM,CAWnC;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAe5C;AAED;;GAEG;AACH,wBAAgB,cAAc,IAAI,MAAM,CAOvC;AAED;;GAEG;AACH,wBAAgB,oBAAoB,IAAI,MAAM,CAgD7C;AAED;;GAEG;AACH,wBAAgB,mBAAmB,IAAI,MAAM,CAW5C;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,MAAM,CActC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAmLzC;AAID;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAmCtE;AAED;;GAEG;AACH,wBAAgB,6BAA6B,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,CAsBzE;AAED;;GAEG;AACH,wBAAgB,6BAA6B,IAAI,MAAM,CAItD;AAED;;GAEG;AACH,wBAAgB,qBAAqB,IAAI,MAAM,CA0C9C;AAED;;;GAGG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,CA4BnD;AAED;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CAgBjD;AAED;;GAEG;AACH,wBAAgB,2BAA2B,IAAI,MAAM,CAwBpD;AAED;;GAEG;AACH,wBAAgB,wBAAwB,IAAI,MAAM,CA+BjD"}

package/dist/templates/index.js

@@ -30,6 +30,24 @@ The dev server automatically runs codegen and migrations when files change.
 - Refer to https://docs.vertz.dev for full framework documentation
 - Entity files use the \`.entity.ts\` suffix
 - The Vertz compiler handles all reactivity — never use \`.value\`, \`signal()\`, or \`computed()\` manually
+
+## Auto-Generated SDK
+
+Vertz auto-generates a fully typed SDK at \`.vertz/generated/\` from your entity and service definitions.
+The SDK is re-exported from \`src/client.ts\` as \`api\`. Use it for ALL data fetching and mutations.
+
+**NEVER use raw \`fetch()\` for API calls.** Always use the generated SDK methods with \`query()\` and \`form()\`:
+
+\`\`\`ts
+import { api } from './client';   // auto-generated typed SDK
+import { query, form } from 'vertz/ui';
+
+const tasks = query(api.tasks.list());          // entity CRUD
+const contactForm = form(api.support.send);     // service action
+\`\`\`
+
+Raw \`fetch()\` bypasses type safety, SSR integration, caching, and optimistic updates.
+The SDK runs codegen automatically during \`bun run dev\` and \`bun run build\`.
 `;
 }
 /**
@@ -117,6 +135,28 @@ Each entity automatically provides these operations:
 | \`update\`  | PATCH /api/<entity>/:id | Update existing record         |
 | \`delete\`  | DELETE /api/<entity>/:id| Delete record                  |
 
+## Auto-Generated SDK
+
+Entities and services automatically generate a typed SDK at \`.vertz/generated/\`.
+The SDK is consumed in the UI via \`src/client.ts\`:
+
+\`\`\`ts
+import { api } from '../client';
+
+// Entity CRUD — auto-generated from entity('posts', ...)
+api.posts.list();
+api.posts.get(id);
+api.posts.create({ title: 'Hello' });
+api.posts.update(id, { title: 'Updated' });
+api.posts.delete(id);
+
+// Service actions — auto-generated from service('notifications', ...)
+api.notifications.sendEmail({ to, subject, body });
+\`\`\`
+
+The SDK provides full type safety, SSR integration, caching, and optimistic updates.
+**NEVER use raw \`fetch()\` in UI code — always use the SDK.**
+
 ## Server Configuration
 
 Register all entities with \`createServer\`:
@@ -205,6 +245,26 @@ import { css, query, globalCss, ThemeProvider, variants } from 'vertz/ui';
 import { api } from '../client';
 \`\`\`
 
+## IMPORTANT: Always Use the Generated SDK
+
+The \`api\` import from \`'../client'\` is a typed SDK auto-generated from your entity and service definitions.
+It provides typed methods for every entity CRUD operation and service action.
+
+**NEVER use raw \`fetch()\` for API calls.** Raw fetch bypasses:
+- Type safety (request/response types)
+- SSR data loading (causes loading flash)
+- Automatic cache invalidation
+- Optimistic updates
+
+\`\`\`tsx
+// WRONG — raw fetch
+const res = await fetch('/api/tasks');
+const tasks = await res.json();
+
+// RIGHT — use the auto-generated SDK
+const tasks = query(api.tasks.list());
+\`\`\`
+
 ## Components
 
 ### Destructure props in parameters
@@ -503,7 +563,6 @@ export function packageJsonTemplate(projectName) {
         },
         devDependencies: {
             '@vertz/cli': '^0.2.0',
-            '@vertz/ui-compiler': '^0.2.0',
             'bun-types': '^1.0.0',
             typescript: '^5.8.0',
         },
@@ -1025,6 +1084,11 @@ bun run build        # Production build
 
 To add API and database support, see https://docs.vertz.dev/guides/server/overview
 
+## Routing
+
+Routes are defined in \`src/router.tsx\` using \`defineRoutes\` and \`createRouter\`.
+To add a new page, create a component in \`src/pages/\` and add a route entry in \`src/router.tsx\`.
+
 ## Conventions
 
 - See \`.claude/rules/\` for UI development conventions
@@ -1051,7 +1115,6 @@ export function helloWorldPackageJsonTemplate(projectName) {
         },
         devDependencies: {
             '@vertz/cli': '^0.2.0',
-            '@vertz/ui-compiler': '^0.2.0',
             'bun-types': '^1.0.0',
             typescript: '^5.8.0',
         },
@@ -1067,12 +1130,13 @@ export default {};
 `;
 }
 /**
- * src/app.tsx for hello-world — simple App with ThemeProvider
+ * src/app.tsx for hello-world — App with RouterContext.Provider, RouterView, and NavBar
  */
 export function helloWorldAppTemplate() {
-    return `import { css, getInjectedCSS, globalCss, ThemeProvider } from 'vertz/ui';
-import { HomePage } from './pages/home';
+    return `import { css, getInjectedCSS, globalCss, RouterContext, RouterView, ThemeProvider } from 'vertz/ui';
+import { appRouter } from './router';
 import { appTheme, themeGlobals } from './styles/theme';
+import { NavBar } from './components/nav-bar';
 
 const appGlobals = globalCss({
   a: {
@@ -1083,6 +1147,7 @@ const appGlobals = globalCss({
 
 const styles = css({
   shell: ['min-h:screen', 'bg:background', 'text:foreground'],
+  main: ['max-w:2xl', 'mx:auto', 'px:6', 'py:8'],
 });
 
 export { getInjectedCSS };
@@ -1092,11 +1157,19 @@ export const globalStyles = [themeGlobals.css, appGlobals.css];
 export function App() {
   return (
     <div data-testid="app-root">
-      <ThemeProvider theme="light">
-        <div className={styles.shell}>
-          <HomePage />
-        </div>
-      </ThemeProvider>
+      <RouterContext.Provider value={appRouter}>
+        <ThemeProvider theme="light">
+          <div className={styles.shell}>
+            <NavBar />
+            <main className={styles.main}>
+              <RouterView
+                router={appRouter}
+                fallback={() => <div>Page not found</div>}
+              />
+            </main>
+          </div>
+        </ThemeProvider>
+      </RouterContext.Provider>
     </div>
   );
 }
@@ -1111,7 +1184,7 @@ export function helloWorldHomePageTemplate() {
 import { Button } from '@vertz/ui/components';
 
 const styles = css({
-  container: ['flex', 'flex-col', 'items:center', 'justify:center', 'min-h:screen', 'gap:6'],
+  container: ['flex', 'flex-col', 'items:center', 'justify:center', 'py:16', 'gap:6'],
   title: ['font:4xl', 'font:bold', 'text:foreground'],
   subtitle: ['text:muted-foreground', 'text:lg'],
   count: ['font:6xl', 'font:bold', 'text:primary'],
@@ -1135,3 +1208,86 @@ export function HomePage() {
 }
 `;
 }
+/**
+ * src/router.tsx for hello-world — route definitions + router instance
+ */
+export function helloWorldRouterTemplate() {
+    return `import { createRouter, defineRoutes } from 'vertz/ui';
+import { HomePage } from './pages/home';
+import { AboutPage } from './pages/about';
+
+export const routes = defineRoutes({
+  '/': {
+    component: () => <HomePage />,
+  },
+  '/about': {
+    component: () => <AboutPage />,
+  },
+});
+
+export const appRouter = createRouter(routes);
+`;
+}
+/**
+ * src/pages/about.tsx for hello-world — simple second page
+ */
+export function helloWorldAboutPageTemplate() {
+    return `import { css } from 'vertz/ui';
+
+const styles = css({
+  container: ['flex', 'flex-col', 'items:center', 'justify:center', 'py:16', 'gap:4'],
+  title: ['font:3xl', 'font:bold', 'text:foreground'],
+  text: ['text:muted-foreground', 'text:lg', 'max-w:lg', 'text:center'],
+  code: ['font:mono', 'bg:muted', 'px:2', 'py:1', 'rounded:sm', 'text:sm'],
+});
+
+export function AboutPage() {
+  return (
+    <div className={styles.container} data-testid="about-page">
+      <h1 className={styles.title}>About</h1>
+      <p className={styles.text}>
+        This app was built with Vertz — a type-safe, LLM-native framework.
+      </p>
+      <p className={styles.text}>
+        Edit this page at <code className={styles.code}>src/pages/about.tsx</code>
+      </p>
+    </div>
+  );
+}
+`;
+}
+/**
+ * src/components/nav-bar.tsx for hello-world — navigation with Link
+ */
+export function helloWorldNavBarTemplate() {
+    return `import { css, Link } from 'vertz/ui';
+
+const styles = css({
+  nav: [
+    'flex',
+    'items:center',
+    'justify:between',
+    'px:6',
+    'py:4',
+    'border-b:1',
+    'border:border',
+  ],
+  brand: ['font:lg', 'font:bold', 'text:foreground'],
+  links: ['flex', 'gap:4'],
+  link: ['text:sm', 'text:muted-foreground', 'hover:text:foreground', 'transition:colors'],
+  active: ['text:foreground', 'font:medium'],
+});
+
+export function NavBar() {
+  return (
+    <nav className={styles.nav}>
+      <div className={styles.brand}>My Vertz App</div>
+      <div className={styles.links}>
+        <Link href="/" className={styles.link} activeClass={styles.active}>Home</Link>
+        <Link href="/about" className={styles.link} activeClass={styles.active}>About</Link>
+      </div>
+    </nav>
+  );
+}
+`;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/create-vertz-app",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "description": "Create a new Vertz application",
   "license": "MIT",
   "repository": {