@vertz/create-vertz-app 0.2.22 → 0.2.24

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,CAuLzC"}

package/dist/templates/index.js

@@ -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,7 +815,7 @@ 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 {
@@ -814,9 +829,9 @@ export function homePageTemplate() {
   query,
   queryMatch,
   slideInFromTop,
+  useDialogStack,
 } from 'vertz/ui';
 import { Button } from '@vertz/ui/components';
-import { AlertDialog } from '@vertz/ui/components';
 import { api } from '../client';
 
 // Global CSS for list item enter/exit animations
@@ -877,12 +892,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 +922,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>
   );
 }

package/package.json

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