@vertz/create-vertz-app 0.2.23 → 0.2.25

package/dist/templates/index.d.ts

@@ -85,7 +85,7 @@ export declare function themeTemplate(): string;
 /**
  * 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.
+ * Demonstrates theme components (Button, Input) and DialogStack confirmation.
  */
 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,CAqQlD;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,CA0LzC"}
+{"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"}

package/dist/templates/index.js

@@ -201,7 +201,7 @@ You write plain-looking code and the compiler makes it reactive automatically.
 ## Imports
 
 \`\`\`ts
-import { css, query, queryMatch, globalCss, ThemeProvider, variants } from 'vertz/ui';
+import { css, query, globalCss, ThemeProvider, variants } from 'vertz/ui';
 import { api } from '../client';
 \`\`\`
 
@@ -306,20 +306,20 @@ const tasks = query(api.tasks.list());
 The query result has reactive properties (\`.data\`, \`.error\`, \`.loading\`) that the compiler
 auto-unwraps everywhere — just access them directly, the compiler handles the rest.
 
-### \`queryMatch()\` — Pattern matching for query states
+### Rendering query states
+
+Use direct conditional rendering for loading, error, and data states:
 
 \`\`\`tsx
-{queryMatch(tasksQuery, {
-  loading: () => <div>Loading...</div>,
-  error: (err) => <div>Error: {err.message}</div>,
-  data: (response) => (
-    <div>
-      {response.items.map((item) => (
-        <div key={item.id}>{item.title}</div>
-      ))}
-    </div>
-  ),
-})}
+{tasks.loading && <div>Loading...</div>}
+{tasks.error && <div>Error: {tasks.error.message}</div>}
+{tasks.data && (
+  <div>
+    {tasks.data.items.map((item) => (
+      <div key={item.id}>{item.title}</div>
+    ))}
+  </div>
+)}
 \`\`\`
 
 ### Automatic Cache Invalidation
@@ -338,7 +338,7 @@ Theme components are pre-configured with the app's design tokens and provide con
 Import components from \`@vertz/ui/components\` — the centralized entrypoint:
 
 \`\`\`tsx
-import { Button, Input, AlertDialog } from '@vertz/ui/components';
+import { Button, Input, Dialog } from '@vertz/ui/components';
 
 // RIGHT — use theme components
 <Button intent="primary" size="md">Submit</Button>
@@ -354,42 +354,57 @@ import { Button, Input, AlertDialog } from '@vertz/ui/components';
 **Direct**: \`Button\`, \`Input\`, \`Label\`, \`Badge\`, \`Textarea\`,
 \`Card\` suite, \`Table\` suite, \`Avatar\` suite, \`FormGroup\` suite
 
-**Primitives**: \`AlertDialog\`, \`Dialog\`, \`Tabs\`,
+**Primitives**: \`Dialog\`, \`Tabs\`,
 \`Select\`, \`DropdownMenu\`, \`Popover\`, \`Sheet\`, \`Tooltip\`, \`Accordion\`
-— all with sub-components (\`.Trigger\`, \`.Content\`, \`.Footer\`, etc.)
+— all with sub-components (\`.Title\`, \`.Content\`, \`.Footer\`, etc.)
 
 ## Dialogs
 
-### Composable \`<AlertDialog>\` for inline confirmations
+### \`useDialogStack()\` for all dialogs
+
+All dialogs use the DialogStack pattern — imperative, promise-based, with automatic
+overlay, focus trapping, and stacking via native \`<dialog>\`.
 
 \`\`\`tsx
-import { Button, AlertDialog } from '@vertz/ui/components';
-
-<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>
-\`\`\`
+import { useDialogStack } from '@vertz/ui';
+
+const dialogs = useDialogStack();
 
-### \`useDialogStack()\` for imperative/stacked dialogs
+// Quick confirmation
+const confirmed = await dialogs.confirm({
+  title: 'Delete task?',
+  description: 'This action cannot be undone.',
+  confirm: 'Delete',
+  cancel: 'Cancel',
+  intent: 'danger',
+});
+if (confirmed) handleDelete();
+\`\`\`
 
-Use when you need promise-based results or dialogs opened from event handlers:
+### Custom dialog components
 
 \`\`\`tsx
-import { useDialogStack } from 'vertz/ui';
+import { useDialogStack, useDialog } from '@vertz/ui';
+import { Dialog } from '@vertz/ui/components';
 
-const dialogs = useDialogStack();
-const confirmed = await dialogs.open(ConfirmDialog, { message: 'Delete?' });
-if (confirmed) handleDelete();
+function EditDialog({ task, dialog }: { task: Task; dialog: DialogHandle<Task> }) {
+  return (
+    <>
+      <Dialog.Header>
+        <Dialog.Title>Edit Task</Dialog.Title>
+      </Dialog.Header>
+      <Dialog.Body>...</Dialog.Body>
+      <Dialog.Footer>
+        <Dialog.Cancel>Cancel</Dialog.Cancel>
+        <Button onClick={() => dialog.close(updatedTask)}>Save</Button>
+      </Dialog.Footer>
+    </>
+  );
+}
+
+// Open it
+const result = await dialogs.open(EditDialog, { task });
+if (result.ok) saveTask(result.data);
 \`\`\`
 
 ## Styling
@@ -800,23 +815,21 @@ export const themeGlobals = config.globals;
 /**
  * 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.
+ * Demonstrates theme components (Button, Input) and DialogStack confirmation.
  */
 export function homePageTemplate() {
     return `import {
   ANIMATION_DURATION,
   ANIMATION_EASING,
-  ListTransition,
   css,
   fadeOut,
   form,
   globalCss,
   query,
-  queryMatch,
   slideInFromTop,
+  useDialogStack,
 } from 'vertz/ui';
-import { Button } from '@vertz/ui/components';
-import { AlertDialog } from '@vertz/ui/components';
+import { Button, List } from '@vertz/ui/components';
 import { api } from '../client';
 
 // Global CSS for list item enter/exit animations
@@ -877,12 +890,23 @@ interface TaskItemProps {
 }
 
 function TaskItem({ id, title, completed }: TaskItemProps) {
+  const dialogs = useDialogStack();
+
   const handleToggle = async () => {
     await api.tasks.update(id, { completed: !completed });
   };
 
   const handleDelete = async () => {
-    await api.tasks.delete(id);
+    const confirmed = await dialogs.confirm({
+      title: 'Delete task?',
+      description: 'This action cannot be undone.',
+      confirm: 'Delete',
+      cancel: 'Cancel',
+      intent: 'danger',
+    });
+    if (confirmed) {
+      await api.tasks.delete(id);
+    }
   };
 
   return (
@@ -896,21 +920,7 @@ function TaskItem({ id, title, completed }: TaskItemProps) {
       <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>
+      <Button intent="ghost" size="sm" onClick={handleDelete}>Delete</Button>
     </div>
   );
 }
@@ -947,43 +957,41 @@ export function HomePage() {
         </Button>
       </form>
 
-      {queryMatch(tasksQuery, {
-        loading: () => (
-          <div className={styles.loading}>Loading tasks...</div>
-        ),
-        error: (err) => (
-          <div className={styles.error}>
-            {err instanceof Error ? err.message : String(err)}
-          </div>
-        ),
-        data: (response) => (
-          <>
-            {response.items.length === 0 && (
-              <div className={styles.empty}>
-                No tasks yet. Add one above!
-              </div>
-            )}
-            <div data-testid="task-list" className={styles.list}>
-              <ListTransition
-                each={response.items}
-                keyFn={(task) => task.id}
-                children={(task) => (
+      {tasksQuery.loading && (
+        <div className={styles.loading}>Loading tasks...</div>
+      )}
+      {tasksQuery.error && (
+        <div className={styles.error}>
+          {tasksQuery.error instanceof Error ? tasksQuery.error.message : String(tasksQuery.error)}
+        </div>
+      )}
+      {tasksQuery.data && (
+        <>
+          {tasksQuery.data.items.length === 0 && (
+            <div className={styles.empty}>
+              No tasks yet. Add one above!
+            </div>
+          )}
+          <div data-testid="task-list" className={styles.list}>
+            <List animate>
+              {tasksQuery.data.items.map((task) => (
+                <List.Item key={task.id}>
                   <TaskItem
                     id={task.id}
                     title={task.title}
                     completed={task.completed}
                   />
-                )}
-              />
+                </List.Item>
+              ))}
+            </List>
+          </div>
+          {tasksQuery.data.items.length > 0 && (
+            <div className={styles.count}>
+              {tasksQuery.data.items.filter((t) => !t.completed).length} remaining
             </div>
-            {response.items.length > 0 && (
-              <div className={styles.count}>
-                {response.items.filter((t) => !t.completed).length} remaining
-              </div>
-            )}
-          </>
-        ),
-      })}
+          )}
+        </>
+      )}
     </div>
   );
 }

package/package.json

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