@vertz/create-vertz-app 0.2.19 → 0.2.21

package/bin/create-vertz-app.ts

@@ -1,20 +1,24 @@
 #!/usr/bin/env bun
 
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
 import { Command } from 'commander';
-import { resolveOptions, scaffold } from '../dist/index.js';
+
+const pkg = JSON.parse(readFileSync(resolve(import.meta.dir, '../package.json'), 'utf-8'));
 
 const program = new Command();
 
 program
   .name('create-vertz-app')
   .description('Scaffold a new Vertz project')
-  .version('0.1.0')
+  .version(pkg.version)
   .argument('[name]', 'Project name')
   .action(async (name: string | undefined) => {
+    const { resolveOptions, scaffold } = await import('../dist/index.js');
     try {
       const resolved = await resolveOptions({ projectName: name });
 
-      console.log(`Creating Vertz app: ${resolved.projectName}`);
+      console.log(`Creating Vertz app: ${resolved.projectName} (v${pkg.version})`);
 
       const targetDir = process.cwd();
       await scaffold(targetDir, resolved);

package/dist/scaffold.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"AAyBA,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,CA6DzF"}
+{"version":3,"file":"scaffold.d.ts","sourceRoot":"","sources":["../src/scaffold.ts"],"names":[],"mappings":"AA0BA,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,CAkEzF"}

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, gitignoreTemplate, 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, homePageTemplate, packageJsonTemplate, schemaTemplate, serverTemplate, tasksEntityTemplate, themeTemplate, tsconfigTemplate, uiDevelopmentRuleTemplate, vertzConfigTemplate, } from './templates/index.js';
 /**
  * Error thrown when the project directory already exists
  */
@@ -36,11 +36,13 @@ export async function scaffold(parentDir, options) {
     const pagesDir = path.join(srcDir, 'pages');
     const stylesDir = path.join(srcDir, 'styles');
     const claudeRulesDir = path.join(projectDir, '.claude', 'rules');
+    const publicDir = path.join(projectDir, 'public');
     await Promise.all([
         fs.mkdir(entitiesDir, { recursive: true }),
         fs.mkdir(pagesDir, { recursive: true }),
         fs.mkdir(stylesDir, { recursive: true }),
         fs.mkdir(claudeRulesDir, { recursive: true }),
+        fs.mkdir(publicDir, { recursive: true }),
     ]);
     // Write all files in parallel
     await Promise.all([
@@ -65,6 +67,8 @@ export async function scaffold(parentDir, options) {
         writeFile(srcDir, 'entry-client.ts', entryClientTemplate()),
         writeFile(pagesDir, 'home.tsx', homePageTemplate()),
         writeFile(stylesDir, 'theme.ts', themeTemplate()),
+        // Static assets
+        writeFile(publicDir, 'favicon.svg', faviconTemplate()),
         // LLM rules
         writeFile(projectDir, 'CLAUDE.md', claudeMdTemplate(projectName)),
         writeFile(claudeRulesDir, 'api-development.md', apiDevelopmentRuleTemplate()),

package/dist/templates/index.d.ts

@@ -10,6 +10,10 @@ export declare function apiDevelopmentRuleTemplate(): string;
  * .claude/rules/ui-development.md — UI conventions for LLMs
  */
 export declare function uiDevelopmentRuleTemplate(): string;
+/**
+ * public/favicon.svg — Vertz logo on dark background
+ */
+export declare function faviconTemplate(): string;
 /**
  * Package.json template — full-stack deps + #generated imports map
  */
@@ -55,7 +59,7 @@ export declare function serverTemplate(): string;
  */
 export declare function schemaTemplate(): string;
 /**
- * src/api/db.ts — createSqliteAdapter with autoApply migrations
+ * src/api/db.ts — createDb with local SQLite and autoApply migrations
  */
 export declare function dbTemplate(): string;
 /**
@@ -75,11 +79,13 @@ export declare function appComponentTemplate(): string;
  */
 export declare function entryClientTemplate(): string;
 /**
- * src/styles/theme.ts — configureThemeBase from @vertz/theme-shadcn/base
+ * src/styles/theme.ts — configureTheme from @vertz/theme-shadcn
  */
 export declare function themeTemplate(): string;
 /**
- * src/pages/home.tsx — task list + create form with query + css
+ * src/pages/home.tsx — full CRUD task list with form, checkbox toggle,
+ * delete confirmation dialog, and animated list transitions.
+ * Demonstrates theme components (Button, Input, AlertDialog) over raw HTML.
  */
 export declare function homePageTemplate(): 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,CA0NlD;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,CASnC;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,CAWtC;AAED;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA0IzC"}
+{"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,CAuQlD;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,CAYtC;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CA4LzC"}

package/dist/templates/index.js

@@ -266,7 +266,7 @@ Never use \`appendChild\`, \`innerHTML\`, \`textContent\`, \`document.createElem
 
 \`\`\`tsx
 // RIGHT
-return <div class={styles.panel}>{title}</div>;
+return <div className={styles.panel}>{title}</div>;
 
 // WRONG — no imperative DOM
 const el = document.createElement('div');
@@ -288,7 +288,7 @@ TaskCard({ task, onClick: handleClick });
 \`\`\`tsx
 {isLoading && <div>Loading...</div>}
 
-{error ? <div class={styles.error}>{error.message}</div> : <div>{content}</div>}
+{error ? <div className={styles.error}>{error.message}</div> : <div>{content}</div>}
 
 {tasks.map((task) => (
   <TaskItem key={task.id} task={task} />
@@ -328,40 +328,85 @@ After mutations (\`create\`, \`update\`, \`delete\`), related queries are automa
 refetched in the background. No manual \`refetch()\` calls needed — the framework
 handles cache invalidation via optimistic updates.
 
-## Styling
+## Theme Components — Prefer Over Raw HTML
+
+When a themed component exists, use it instead of raw HTML elements with manual class names.
+Theme components are pre-configured with the app's design tokens and provide consistent styling.
 
-### \`css()\` for scoped styles
+### Using Components
 
 \`\`\`tsx
-const styles = css({
-  container: ['flex', 'flex-col', 'gap:4', 'p:6'],
-  title: ['font:xl', 'font:bold', 'text:foreground'],
-  card: ['rounded:md', 'border:1', 'border:border', 'bg:card', 'p:4'],
-});
+import { themeComponents } from '../styles/theme';
+
+const { Button, Input } = themeComponents;
+const { AlertDialog } = themeComponents.primitives;
 
-return <div class={styles.container}>...</div>;
+// RIGHT — use theme components
+<Button intent="primary" size="md">Submit</Button>
+<Input placeholder="Enter text" />
+
+// WRONG — raw HTML with manual styles
+<button className={button({ intent: 'primary', size: 'md' })}>Submit</button>
+<input className={inputStyles.base} placeholder="Enter text" />
 \`\`\`
 
-### \`variants()\` for parameterized styles
+### Available Components
+
+**Direct** (from \`themeComponents\`): \`Button\`, \`Input\`, \`Label\`, \`Badge\`, \`Textarea\`,
+\`Card\` suite, \`Table\` suite, \`Avatar\` suite, \`FormGroup\` suite
+
+**Primitives** (from \`themeComponents.primitives\`): \`AlertDialog\`, \`Dialog\`, \`Tabs\`,
+\`Select\`, \`DropdownMenu\`, \`Popover\`, \`Sheet\`, \`Tooltip\`, \`Accordion\`
+— all with sub-components (\`.Trigger\`, \`.Content\`, \`.Footer\`, etc.)
+
+## Dialogs
+
+### Composable \`<AlertDialog>\` for inline confirmations
 
 \`\`\`tsx
-const button = variants({
-  base: ['inline-flex', 'items:center', 'rounded:md', 'font:medium'],
-  variants: {
-    intent: {
-      primary: ['bg:primary.600', 'text:white'],
-      secondary: ['bg:secondary', 'text:secondary-foreground'],
-      danger: ['bg:destructive', 'text:white'],
-    },
-    size: {
-      sm: ['text:xs', 'px:3', 'py:1'],
-      md: ['text:sm', 'px:4', 'py:2'],
-    },
-  },
-  defaultVariants: { intent: 'primary', size: 'md' },
+const { Button } = themeComponents;
+const { AlertDialog } = themeComponents.primitives;
+
+<AlertDialog>
+  <AlertDialog.Trigger>
+    <Button intent="danger" size="sm">Delete</Button>
+  </AlertDialog.Trigger>
+  <AlertDialog.Content>
+    <AlertDialog.Title>Delete task?</AlertDialog.Title>
+    <AlertDialog.Description>This action cannot be undone.</AlertDialog.Description>
+    <AlertDialog.Footer>
+      <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+      <AlertDialog.Action onClick={handleDelete}>Delete</AlertDialog.Action>
+    </AlertDialog.Footer>
+  </AlertDialog.Content>
+</AlertDialog>
+\`\`\`
+
+### \`useDialogStack()\` for imperative/stacked dialogs
+
+Use when you need promise-based results or dialogs opened from event handlers:
+
+\`\`\`tsx
+import { useDialogStack } from 'vertz/ui';
+
+const dialogs = useDialogStack();
+const confirmed = await dialogs.open(ConfirmDialog, { message: 'Delete?' });
+if (confirmed) handleDelete();
+\`\`\`
+
+## Styling
+
+### \`css()\` for layout and custom styles
+
+Use \`css()\` for layout-specific styles that don't correspond to a theme component:
+
+\`\`\`tsx
+const styles = css({
+  container: ['flex', 'flex-col', 'gap:4', 'p:6'],
+  heading: ['font:xl', 'font:bold', 'text:foreground'],
 });
 
-<button class={button({ intent: 'danger', size: 'sm' })}>Delete</button>
+return <div className={styles.container}>...</div>;
 \`\`\`
 
 ### Style Tokens
@@ -411,6 +456,14 @@ export function TaskDetailPage() {
 \`\`\`
 `;
 }
+// ── Static asset templates ─────────────────────────────────
+/**
+ * public/favicon.svg — Vertz logo on dark background
+ */
+export function faviconTemplate() {
+    return `<svg width="32" height="32" viewBox="0 0 298 298" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="298" height="298" rx="60" fill="#0a0a0b"/><path d="M120.277 77H26L106.5 185.5L151.365 124.67L120.277 77Z" fill="white"/><path d="M147.986 243L125.5 210.5L190.467 124.67L160.731 77H272L147.986 243Z" fill="white"/></svg>
+`;
+}
 // ── Config file templates ──────────────────────────────────
 /**
  * Package.json template — full-stack deps + #generated imports map
@@ -607,7 +660,7 @@ export function schemaTemplate() {
 
 export const tasksTable = d.table('tasks', {
   id: d.uuid().primary(),
-  title: d.text(),
+  title: d.text().min(1),
   completed: d.boolean().default(false),
   createdAt: d.timestamp().default('now').readOnly(),
   updatedAt: d.timestamp().autoUpdate().readOnly(),
@@ -617,14 +670,16 @@ export const tasksModel = d.model(tasksTable);
 `;
 }
 /**
- * src/api/db.ts — createSqliteAdapter with autoApply migrations
+ * src/api/db.ts — createDb with local SQLite and autoApply migrations
  */
 export function dbTemplate() {
-    return `import { createSqliteAdapter } from 'vertz/db/sqlite';
-import { tasksTable } from './schema';
+    return `import { createDb } from 'vertz/db';
+import { tasksModel } from './schema';
 
-export const db = await createSqliteAdapter({
-  schema: tasksTable,
+export const db = createDb({
+  models: { tasks: tasksModel },
+  dialect: 'sqlite',
+  path: '.vertz/data/app.db',
   migrations: { autoApply: true },
 });
 `;
@@ -697,11 +752,11 @@ export function App() {
   return (
     <div data-testid="app-root">
       <ThemeProvider theme="light">
-        <div class={styles.shell}>
-          <header class={styles.header}>
-            <div class={styles.title}>My Vertz App</div>
+        <div className={styles.shell}>
+          <header className={styles.header}>
+            <div className={styles.title}>My Vertz App</div>
           </header>
-          <main class={styles.main}>
+          <main className={styles.main}>
             <HomePage />
           </main>
         </div>
@@ -727,22 +782,25 @@ mount(App, {
 `;
 }
 /**
- * src/styles/theme.ts — configureThemeBase from @vertz/theme-shadcn/base
+ * src/styles/theme.ts — configureTheme from @vertz/theme-shadcn
  */
 export function themeTemplate() {
-    return `import { configureThemeBase } from '@vertz/theme-shadcn/base';
+    return `import { configureTheme } from '@vertz/theme-shadcn';
 
-const { theme, globals } = configureThemeBase({
+const { theme, globals, components } = configureTheme({
   palette: 'zinc',
   radius: 'md',
 });
 
 export const appTheme = theme;
 export const themeGlobals = globals;
+export const themeComponents = components;
 `;
 }
 /**
- * src/pages/home.tsx — task list + create form with query + css
+ * src/pages/home.tsx — full CRUD task list with form, checkbox toggle,
+ * delete confirmation dialog, and animated list transitions.
+ * Demonstrates theme components (Button, Input, AlertDialog) over raw HTML.
  */
 export function homePageTemplate() {
     return `import {
@@ -758,8 +816,12 @@ export function homePageTemplate() {
   slideInFromTop,
 } from 'vertz/ui';
 import { api } from '../client';
+import { themeComponents } from '../styles/theme';
+
+const { Button } = themeComponents;
+const { AlertDialog } = themeComponents.primitives;
 
-// Inject global CSS for list item enter/exit animations
+// Global CSS for list item enter/exit animations
 void globalCss({
   '[data-presence="enter"]': {
     animation: \`\${slideInFromTop} \${ANIMATION_DURATION} \${ANIMATION_EASING}\`,
@@ -770,31 +832,23 @@ void globalCss({
   },
 });
 
-const pageStyles = css({
+const styles = css({
   container: ['py:2', 'w:full'],
   heading: ['font:xl', 'font:bold', 'text:foreground', 'mb:4'],
-  form: ['flex', 'gap:2', 'items:start', 'mb:6'],
+  form: ['flex', 'items:start', 'gap:2', 'mb:6'],
   inputWrap: ['flex-1'],
   input: [
     'w:full',
+    'h:10',
     'px:3',
-    'py:2',
     'rounded:md',
     'border:1',
     'border:border',
     'bg:background',
     'text:foreground',
+    'text:sm',
   ],
   fieldError: ['text:destructive', 'font:xs', 'mt:1'],
-  button: [
-    'px:4',
-    'py:2',
-    'rounded:md',
-    'bg:primary',
-    'text:primary-foreground',
-    'font:medium',
-    'cursor:pointer',
-  ],
   list: ['flex', 'flex-col', 'gap:2'],
   item: [
     'flex',
@@ -806,12 +860,63 @@ const pageStyles = css({
     'border:1',
     'border:border',
     'bg:card',
+    'hover:bg:accent',
+    'transition:colors',
   ],
+  checkbox: ['w:4', 'h:4', 'cursor:pointer', 'rounded:sm'],
+  label: ['flex-1', 'text:sm', 'text:foreground'],
+  labelDone: ['flex-1', 'text:sm', 'text:muted-foreground', 'decoration:line-through'],
   loading: ['text:muted-foreground'],
   error: ['text:destructive'],
   empty: ['text:muted-foreground', 'text:center', 'py:8'],
+  count: ['text:xs', 'text:muted-foreground', 'mt:4'],
 });
 
+interface TaskItemProps {
+  id: string;
+  title: string;
+  completed: boolean;
+}
+
+function TaskItem({ id, title, completed }: TaskItemProps) {
+  const handleToggle = async () => {
+    await api.tasks.update(id, { completed: !completed });
+  };
+
+  const handleDelete = async () => {
+    await api.tasks.delete(id);
+  };
+
+  return (
+    <div className={styles.item}>
+      <input
+        type="checkbox"
+        className={styles.checkbox}
+        checked={completed}
+        onChange={handleToggle}
+      />
+      <span className={completed ? styles.labelDone : styles.label}>
+        {title}
+      </span>
+      <AlertDialog onAction={handleDelete}>
+        <AlertDialog.Trigger>
+          <Button intent="ghost" size="sm">Delete</Button>
+        </AlertDialog.Trigger>
+        <AlertDialog.Content>
+          <AlertDialog.Title>Delete task?</AlertDialog.Title>
+          <AlertDialog.Description>
+            This action cannot be undone.
+          </AlertDialog.Description>
+          <AlertDialog.Footer>
+            <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+            <AlertDialog.Action>Delete</AlertDialog.Action>
+          </AlertDialog.Footer>
+        </AlertDialog.Content>
+      </AlertDialog>
+    </div>
+  );
+}
+
 export function HomePage() {
   const tasksQuery = query(api.tasks.list());
 
@@ -820,61 +925,64 @@ export function HomePage() {
   });
 
   return (
-    <div class={pageStyles.container} data-testid="home-page">
-      <h1 class={pageStyles.heading}>Tasks</h1>
+    <div className={styles.container} data-testid="home-page">
+      <h1 className={styles.heading}>Tasks</h1>
 
       <form
-        class={pageStyles.form}
+        className={styles.form}
         action={taskForm.action}
         method={taskForm.method}
         onSubmit={taskForm.onSubmit}
       >
-        <div class={pageStyles.inputWrap}>
+        <div className={styles.inputWrap}>
           <input
             name={taskForm.fields.title}
-            class={pageStyles.input}
+            className={styles.input}
             placeholder="What needs to be done?"
           />
-          <span class={pageStyles.fieldError}>
+          <span className={styles.fieldError}>
             {taskForm.title.error}
           </span>
         </div>
-        <button
-          type="submit"
-          class={pageStyles.button}
-          disabled={taskForm.submitting}
-        >
+        <Button type="submit" disabled={taskForm.submitting}>
           {taskForm.submitting.value ? 'Adding...' : 'Add'}
-        </button>
+        </Button>
       </form>
 
       {queryMatch(tasksQuery, {
         loading: () => (
-          <div class={pageStyles.loading}>Loading tasks...</div>
+          <div className={styles.loading}>Loading tasks...</div>
         ),
         error: (err) => (
-          <div class={pageStyles.error}>
+          <div className={styles.error}>
             {err instanceof Error ? err.message : String(err)}
           </div>
         ),
         data: (response) => (
           <>
             {response.items.length === 0 && (
-              <div class={pageStyles.empty}>
+              <div className={styles.empty}>
                 No tasks yet. Add one above!
               </div>
             )}
-            <div data-testid="task-list" class={pageStyles.list}>
+            <div data-testid="task-list" className={styles.list}>
               <ListTransition
                 each={response.items}
                 keyFn={(task) => task.id}
                 children={(task) => (
-                  <div class={pageStyles.item}>
-                    <span>{task.title}</span>
-                  </div>
+                  <TaskItem
+                    id={task.id}
+                    title={task.title}
+                    completed={task.completed}
+                  />
                 )}
               />
             </div>
+            {response.items.length > 0 && (
+              <div className={styles.count}>
+                {response.items.filter((t) => !t.completed).length} remaining
+              </div>
+            )}
           </>
         ),
       })}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vertz/create-vertz-app",
-  "version": "0.2.19",
+  "version": "0.2.21",
   "type": "module",
   "license": "MIT",
   "description": "Create a new Vertz application",