@usevyre/ai-context 1.2.1 → 1.2.2

package/dist/anti-patterns.json

@@ -22,6 +22,27 @@
       "fix": "Use variant=\"info\" | \"success\" | \"warning\" | \"danger\"",
       "severity": "error"
     },
+    {
+      "component": "AlertDialog",
+      "pattern": "AlertDialog without open/onOpenChange (React) or v-model (Vue)",
+      "reason": "It is controlled; it never shows/closes without state",
+      "fix": "Drive open from state; close in onOpenChange / via v-model",
+      "severity": "error"
+    },
+    {
+      "component": "AlertDialog",
+      "pattern": "Using Alert (inline banner) for a confirm/cancel decision",
+      "reason": "Alert is non-blocking inline feedback, has no confirm flow",
+      "fix": "Use AlertDialog for blocking confirmation; Alert for passive messages",
+      "severity": "error"
+    },
+    {
+      "component": "AlertDialog",
+      "pattern": "variant=\"success\" or \"error\"",
+      "reason": "AlertDialog variant is \"danger\" | \"warning\" | \"info\" only",
+      "fix": "Use \"danger\" for destructive, \"warning\" to caution, \"info\" otherwise",
+      "severity": "error"
+    },
     {
       "component": "Avatar",
       "pattern": "size=\"xs\"",

package/dist/cheat-sheets/alertdialog.md

@@ -0,0 +1,41 @@
+# AlertDialog — AI Cheat Sheet
+> Quick reference for Claude / Cursor / Copilot
+
+**Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.**
+
+```ts
+import { AlertDialog } from "@usevyre/react"
+```
+
+## Valid Props
+
+| Prop | Values | Default |
+|------|--------|---------|
+| `variant` | `"danger"` \| `"warning"` \| `"info"` | `info` |
+| `open` | `true` \| `false` | — |
+
+## Common AI Mistakes
+
+- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)`
+  → Drive open from state; close in onOpenChange / via v-model
+- ❌ `Using Alert (inline banner) for a confirm/cancel decision`
+  → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `variant="success" or "error"`
+  → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+## Examples
+
+**Destructive confirmation**
+```tsx
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+```

package/dist/cheat-sheets/index.md

@@ -4,6 +4,7 @@ Quick reference for AI agents — one file per component.
 
 - [Accordion](accordion.md) — Vertically stacked collapsible sections. Compose with AccordionItem, AccordionTrigger, AccordionContent.
 - [Alert](alert.md) — Inline feedback message for info, success, warning, or danger states.
+- [AlertDialog](alertdialog.md) — Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
 - [Avatar](avatar.md) — User profile image with fallback initials or icon.
 - [Badge](badge.md) — Small label for status, category, or count. Use dot prop for live status indicator.
 - [Breadcrumb](breadcrumb.md) — Navigation trail showing current page location in hierarchy.

package/dist/claude-context.md

@@ -203,6 +203,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+```tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+```
+
+**Common mistakes:**
+- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `Using Alert (inline banner) for a confirm/cancel decision` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `variant="success" or "error"` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -1383,6 +1422,9 @@ If you generate these, you are hallucinating.
 - ❌ `<Accordion Accordion without AccordionItem>` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ `<Alert variant="error">` → Use variant="danger"
 - ❌ `<Alert variant="primary">` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ `<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `<AlertDialog variant="success" or "error">` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ `<Avatar size="xs">` → Use size="sm"
 - ❌ `<Avatar size="2xl">` → Use size="xl"
 - ❌ `<Badge variant="primary">` → Use variant="accent" for brand color

package/dist/copilot-instructions.md

@@ -202,6 +202,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+```tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+```
+
+**Common mistakes:**
+- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `Using Alert (inline banner) for a confirm/cancel decision` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `variant="success" or "error"` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -1382,6 +1421,9 @@ If you generate these, you are hallucinating.
 - ❌ `<Accordion Accordion without AccordionItem>` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ `<Alert variant="error">` → Use variant="danger"
 - ❌ `<Alert variant="primary">` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ `<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `<AlertDialog variant="success" or "error">` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ `<Avatar size="xs">` → Use size="sm"
 - ❌ `<Avatar size="2xl">` → Use size="xl"
 - ❌ `<Badge variant="primary">` → Use variant="accent" for brand color

package/dist/cursor-rules.md

@@ -36,6 +36,18 @@ Never do:
 - ❌ variant="error" → ✅ Use variant="danger"
 - ❌ variant="primary" → ✅ Use variant="info" | "success" | "warning" | "danger"
 
+## AlertDialog
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+Import: `import { AlertDialog } from "@usevyre/react"`
+
+Valid props:
+- variant: "danger" | "warning" | "info" [default: info]
+
+Never do:
+- ❌ AlertDialog without open/onOpenChange (React) or v-model (Vue) → ✅ Drive open from state; close in onOpenChange / via v-model
+- ❌ Using Alert (inline banner) for a confirm/cancel decision → ✅ Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ variant="success" or "error" → ✅ Use "danger" for destructive, "warning" to caution, "info" otherwise
+
 ## Avatar
 User profile image with fallback initials or icon.
 Import: `import { Avatar } from "@usevyre/react"`

package/dist/full-context.md

@@ -197,6 +197,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+```tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+```
+
+**Common mistakes:**
+- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `Using Alert (inline banner) for a confirm/cancel decision` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `variant="success" or "error"` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -1377,6 +1416,9 @@ If you generate these, you are hallucinating.
 - ❌ `<Accordion Accordion without AccordionItem>` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ `<Alert variant="error">` → Use variant="danger"
 - ❌ `<Alert variant="primary">` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ `<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `<AlertDialog variant="success" or "error">` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ `<Avatar size="xs">` → Use size="sm"
 - ❌ `<Avatar size="2xl">` → Use size="xl"
 - ❌ `<Badge variant="primary">` → Use variant="accent" for brand color

package/dist/index.js

@@ -202,6 +202,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+\`\`\`tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`AlertDialog without open/onOpenChange (React) or v-model (Vue)\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`Using Alert (inline banner) for a confirm/cancel decision\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`variant="success" or "error"\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -1382,6 +1421,9 @@ If you generate these, you are hallucinating.
 - ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ \`<Alert variant="error">\` → Use variant="danger"
 - ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ \`<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`<AlertDialog variant="success" or "error">\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ \`<Avatar size="xs">\` → Use size="sm"
 - ❌ \`<Avatar size="2xl">\` → Use size="xl"
 - ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
@@ -1537,6 +1579,18 @@ Never do:
 - ❌ variant="error" → ✅ Use variant="danger"
 - ❌ variant="primary" → ✅ Use variant="info" | "success" | "warning" | "danger"
 
+## AlertDialog
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+Import: \`import { AlertDialog } from "@usevyre/react"\`
+
+Valid props:
+- variant: "danger" | "warning" | "info" [default: info]
+
+Never do:
+- ❌ AlertDialog without open/onOpenChange (React) or v-model (Vue) → ✅ Drive open from state; close in onOpenChange / via v-model
+- ❌ Using Alert (inline banner) for a confirm/cancel decision → ✅ Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ variant="success" or "error" → ✅ Use "danger" for destructive, "warning" to caution, "info" otherwise
+
 ## Avatar
 User profile image with fallback initials or icon.
 Import: \`import { Avatar } from "@usevyre/react"\`
@@ -2157,6 +2211,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+\`\`\`tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`AlertDialog without open/onOpenChange (React) or v-model (Vue)\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`Using Alert (inline banner) for a confirm/cancel decision\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`variant="success" or "error"\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -3337,6 +3430,9 @@ If you generate these, you are hallucinating.
 - ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ \`<Alert variant="error">\` → Use variant="danger"
 - ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ \`<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`<AlertDialog variant="success" or "error">\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ \`<Avatar size="xs">\` → Use size="sm"
 - ❌ \`<Avatar size="2xl">\` → Use size="xl"
 - ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
@@ -3656,6 +3752,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+\`\`\`tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`AlertDialog without open/onOpenChange (React) or v-model (Vue)\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`Using Alert (inline banner) for a confirm/cancel decision\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`variant="success" or "error"\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -4836,6 +4971,9 @@ If you generate these, you are hallucinating.
 - ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ \`<Alert variant="error">\` → Use variant="danger"
 - ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ \`<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`<AlertDialog variant="success" or "error">\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ \`<Avatar size="xs">\` → Use size="sm"
 - ❌ \`<Avatar size="2xl">\` → Use size="xl"
 - ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
@@ -5157,6 +5295,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+\`\`\`tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`AlertDialog without open/onOpenChange (React) or v-model (Vue)\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`Using Alert (inline banner) for a confirm/cancel decision\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`variant="success" or "error"\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -6337,6 +6514,9 @@ If you generate these, you are hallucinating.
 - ❌ \`<Accordion Accordion without AccordionItem>\` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ \`<Alert variant="error">\` → Use variant="danger"
 - ❌ \`<Alert variant="primary">\` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ \`<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>\` → Drive open from state; close in onOpenChange / via v-model
+- ❌ \`<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>\` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ \`<AlertDialog variant="success" or "error">\` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ \`<Avatar size="xs">\` → Use size="sm"
 - ❌ \`<Avatar size="2xl">\` → Use size="xl"
 - ❌ \`<Badge variant="primary">\` → Use variant="accent" for brand color
@@ -6563,6 +6743,79 @@ export const schema = {
         }
       ]
     },
+    "AlertDialog": {
+      "description": "Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.",
+      "import": "import { AlertDialog } from \"@usevyre/react\"",
+      "props": {
+        "open": {
+          "type": "boolean",
+          "description": "Controlled visibility. Vue: v-model."
+        },
+        "onOpenChange": {
+          "type": "function",
+          "description": "(open: boolean) => void — called when the dialog requests to close (backdrop, Esc, cancel). Vue: update:modelValue / v-model."
+        },
+        "title": {
+          "type": "string",
+          "description": "Dialog heading (required)."
+        },
+        "description": {
+          "type": "string",
+          "description": "Supporting body text."
+        },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "danger",
+            "warning",
+            "info"
+          ],
+          "default": "info",
+          "description": "Visual tone of the confirm action / icon."
+        },
+        "confirmLabel": {
+          "type": "string",
+          "default": "Confirm",
+          "description": "Confirm button text."
+        },
+        "cancelLabel": {
+          "type": "string",
+          "default": "Cancel",
+          "description": "Cancel button text."
+        },
+        "onConfirm": {
+          "type": "function",
+          "description": "Called when the confirm button is pressed."
+        },
+        "onCancel": {
+          "type": "function",
+          "description": "Called when cancelled (button, Esc, backdrop)."
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "AlertDialog without open/onOpenChange (React) or v-model (Vue)",
+          "reason": "It is controlled; it never shows/closes without state",
+          "fix": "Drive open from state; close in onOpenChange / via v-model"
+        },
+        {
+          "pattern": "Using Alert (inline banner) for a confirm/cancel decision",
+          "reason": "Alert is non-blocking inline feedback, has no confirm flow",
+          "fix": "Use AlertDialog for blocking confirmation; Alert for passive messages"
+        },
+        {
+          "pattern": "variant=\"success\" or \"error\"",
+          "reason": "AlertDialog variant is \"danger\" | \"warning\" | \"info\" only",
+          "fix": "Use \"danger\" for destructive, \"warning\" to caution, \"info\" otherwise"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Destructive confirmation",
+          "code": "const [open, setOpen] = useState(false);\n<Button variant=\"danger\" onClick={() => setOpen(true)}>Delete</Button>\n<AlertDialog\n  open={open}\n  onOpenChange={setOpen}\n  variant=\"danger\"\n  title=\"Delete project?\"\n  description=\"This cannot be undone.\"\n  confirmLabel=\"Delete\"\n  onConfirm={() => deleteProject()}\n/>"
+        }
+      ]
+    },
     "Avatar": {
       "description": "User profile image with fallback initials or icon.",
       "import": "import { Avatar } from \"@usevyre/react\"",
@@ -8702,6 +8955,27 @@ export const antiPatterns = {
       "fix": "Use variant=\"info\" | \"success\" | \"warning\" | \"danger\"",
       "severity": "error"
     },
+    {
+      "component": "AlertDialog",
+      "pattern": "AlertDialog without open/onOpenChange (React) or v-model (Vue)",
+      "reason": "It is controlled; it never shows/closes without state",
+      "fix": "Drive open from state; close in onOpenChange / via v-model",
+      "severity": "error"
+    },
+    {
+      "component": "AlertDialog",
+      "pattern": "Using Alert (inline banner) for a confirm/cancel decision",
+      "reason": "Alert is non-blocking inline feedback, has no confirm flow",
+      "fix": "Use AlertDialog for blocking confirmation; Alert for passive messages",
+      "severity": "error"
+    },
+    {
+      "component": "AlertDialog",
+      "pattern": "variant=\"success\" or \"error\"",
+      "reason": "AlertDialog variant is \"danger\" | \"warning\" | \"info\" only",
+      "fix": "Use \"danger\" for destructive, \"warning\" to caution, \"info\" otherwise",
+      "severity": "error"
+    },
     {
       "component": "Avatar",
       "pattern": "size=\"xs\"",
@@ -9191,7 +9465,7 @@ export const antiPatterns = {
 export const versionInfo = {
   "version": "1.2.0",
   "packageVersion": "1.1.0",
-  "generatedAt": "2026-05-17T13:24:18.828Z",
+  "generatedAt": "2026-05-17T14:01:21.768Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
@@ -9238,6 +9512,13 @@ export const versionInfo = {
       "stable": true,
       "changelog": null
     },
+    "AlertDialog": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-16",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
     "Avatar": {
       "version": "1.1.0",
       "lastUpdated": "2026-05-16",
@@ -9531,6 +9812,7 @@ export const versionInfo = {
 export const cheatSheets = {
   "Accordion": "# Accordion — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Vertically stacked collapsible sections. Compose with AccordionItem, AccordionTrigger, AccordionContent.**\n\n```ts\nimport { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Accordion without AccordionItem`\n  → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent\n\n## Examples\n\n**Basic accordion**\n```tsx\n<Accordion>\n  <AccordionItem value=\"item-1\">\n    <AccordionTrigger>Section Title</AccordionTrigger>\n    <AccordionContent>Content goes here.</AccordionContent>\n  </AccordionItem>\n</Accordion>\n```\n",
   "Alert": "# Alert — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Inline feedback message for info, success, warning, or danger states.**\n\n```ts\nimport { Alert } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"info\"` \\| `\"success\"` \\| `\"warning\"` \\| `\"danger\"` | `info` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"error\"`\n  → Use variant=\"danger\"\n- ❌ `variant=\"primary\"`\n  → Use variant=\"info\" | \"success\" | \"warning\" | \"danger\"\n\n## Examples\n\n**Warning with close button**\n```tsx\n<Alert variant=\"warning\" title=\"Heads up\" onClose={() => setOpen(false)}>\n  This action cannot be undone.\n</Alert>\n```\n\n**Success state**\n```tsx\n<Alert variant=\"success\" title=\"Saved!\">Your changes have been saved.</Alert>\n```\n",
+  "AlertDialog": "# AlertDialog — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.**\n\n```ts\nimport { AlertDialog } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"danger\"` \\| `\"warning\"` \\| `\"info\"` | `info` |\n| `open` | `true` \\| `false` | — |\n\n## Common AI Mistakes\n\n- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)`\n  → Drive open from state; close in onOpenChange / via v-model\n- ❌ `Using Alert (inline banner) for a confirm/cancel decision`\n  → Use AlertDialog for blocking confirmation; Alert for passive messages\n- ❌ `variant=\"success\" or \"error\"`\n  → Use \"danger\" for destructive, \"warning\" to caution, \"info\" otherwise\n\n## Examples\n\n**Destructive confirmation**\n```tsx\nconst [open, setOpen] = useState(false);\n<Button variant=\"danger\" onClick={() => setOpen(true)}>Delete</Button>\n<AlertDialog\n  open={open}\n  onOpenChange={setOpen}\n  variant=\"danger\"\n  title=\"Delete project?\"\n  description=\"This cannot be undone.\"\n  confirmLabel=\"Delete\"\n  onConfirm={() => deleteProject()}\n/>\n```\n",
   "Avatar": "# Avatar — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**User profile image with fallback initials or icon.**\n\n```ts\nimport { Avatar } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` | `md` |\n| `status` | `\"online\"` \\| `\"offline\"` \\| `\"busy\"` \\| `\"away\"` | — |\n\n## Common AI Mistakes\n\n- ❌ `size=\"xs\"`\n  → Use size=\"sm\"\n- ❌ `size=\"2xl\"`\n  → Use size=\"xl\"\n\n## Examples\n\n**Avatar with image and online status**\n```tsx\n<Avatar src=\"/user.png\" alt=\"Jane Doe\" size=\"lg\" status=\"online\" />\n```\n\n**Fallback initials**\n```tsx\n<Avatar fallback=\"JD\" size=\"md\" />\n```\n",
   "Badge": "# Badge — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Small label for status, category, or count. Use dot prop for live status indicator.**\n\n```ts\nimport { Badge } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"accent\"` \\| `\"teal\"` \\| `\"success\"` \\| `\"warning\"` \\| `\"danger\"` | `default` |\n| `dot` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"primary\"`\n  → Use variant=\"accent\" for brand color\n- ❌ `variant=\"error\"`\n  → Use variant=\"danger\"\n- ❌ `variant=\"info\"`\n  → Use variant=\"teal\" for info-like styling\n\n## Examples\n\n**Live status with dot**\n```tsx\n<Badge variant=\"success\" dot>Online</Badge>\n```\n\n**Warning badge**\n```tsx\n<Badge variant=\"warning\">Beta</Badge>\n```\n\n**Danger badge**\n```tsx\n<Badge variant=\"danger\">Error</Badge>\n```\n",
   "Breadcrumb": "# Breadcrumb — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Navigation trail showing current page location in hierarchy.**\n\n```ts\nimport { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Using plain <a> tags inside Breadcrumb`\n  → Use BreadcrumbItem > BreadcrumbLink for each crumb\n\n## Examples\n\n**Basic breadcrumb**\n```tsx\n<Breadcrumb>\n  <BreadcrumbItem><BreadcrumbLink href=\"/\">Home</BreadcrumbLink></BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem><BreadcrumbLink href=\"/docs\">Docs</BreadcrumbLink></BreadcrumbItem>\n  <BreadcrumbSeparator />\n  <BreadcrumbItem aria-current=\"page\">Button</BreadcrumbItem>\n</Breadcrumb>\n```\n",

package/dist/schema.json

@@ -106,6 +106,79 @@
         }
       ]
     },
+    "AlertDialog": {
+      "description": "Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.",
+      "import": "import { AlertDialog } from \"@usevyre/react\"",
+      "props": {
+        "open": {
+          "type": "boolean",
+          "description": "Controlled visibility. Vue: v-model."
+        },
+        "onOpenChange": {
+          "type": "function",
+          "description": "(open: boolean) => void — called when the dialog requests to close (backdrop, Esc, cancel). Vue: update:modelValue / v-model."
+        },
+        "title": {
+          "type": "string",
+          "description": "Dialog heading (required)."
+        },
+        "description": {
+          "type": "string",
+          "description": "Supporting body text."
+        },
+        "variant": {
+          "type": "enum",
+          "values": [
+            "danger",
+            "warning",
+            "info"
+          ],
+          "default": "info",
+          "description": "Visual tone of the confirm action / icon."
+        },
+        "confirmLabel": {
+          "type": "string",
+          "default": "Confirm",
+          "description": "Confirm button text."
+        },
+        "cancelLabel": {
+          "type": "string",
+          "default": "Cancel",
+          "description": "Cancel button text."
+        },
+        "onConfirm": {
+          "type": "function",
+          "description": "Called when the confirm button is pressed."
+        },
+        "onCancel": {
+          "type": "function",
+          "description": "Called when cancelled (button, Esc, backdrop)."
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "AlertDialog without open/onOpenChange (React) or v-model (Vue)",
+          "reason": "It is controlled; it never shows/closes without state",
+          "fix": "Drive open from state; close in onOpenChange / via v-model"
+        },
+        {
+          "pattern": "Using Alert (inline banner) for a confirm/cancel decision",
+          "reason": "Alert is non-blocking inline feedback, has no confirm flow",
+          "fix": "Use AlertDialog for blocking confirmation; Alert for passive messages"
+        },
+        {
+          "pattern": "variant=\"success\" or \"error\"",
+          "reason": "AlertDialog variant is \"danger\" | \"warning\" | \"info\" only",
+          "fix": "Use \"danger\" for destructive, \"warning\" to caution, \"info\" otherwise"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Destructive confirmation",
+          "code": "const [open, setOpen] = useState(false);\n<Button variant=\"danger\" onClick={() => setOpen(true)}>Delete</Button>\n<AlertDialog\n  open={open}\n  onOpenChange={setOpen}\n  variant=\"danger\"\n  title=\"Delete project?\"\n  description=\"This cannot be undone.\"\n  confirmLabel=\"Delete\"\n  onConfirm={() => deleteProject()}\n/>"
+        }
+      ]
+    },
     "Avatar": {
       "description": "User profile image with fallback initials or icon.",
       "import": "import { Avatar } from \"@usevyre/react\"",

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usevyre.com/schemas/ai-tokens-v1.json",
   "version": "1.0.0",
-  "generatedAt": "2026-05-17T13:22:00.490Z",
+  "generatedAt": "2026-05-17T13:59:11.602Z",
   "description": "useVyre design tokens — machine-readable reference for AI agents. Use semantic color tokens; never use primitive tokens directly in components.",
   "naming": {
     "convention": "--vyre-[category]-[subcategory]-[variant]",

package/dist/version-info.json

@@ -1,7 +1,7 @@
 {
   "version": "1.2.0",
   "packageVersion": "1.1.0",
-  "generatedAt": "2026-05-17T13:24:18.828Z",
+  "generatedAt": "2026-05-17T14:01:21.768Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
@@ -48,6 +48,13 @@
       "stable": true,
       "changelog": null
     },
+    "AlertDialog": {
+      "version": "1.1.0",
+      "lastUpdated": "2026-05-16",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
     "Avatar": {
       "version": "1.1.0",
       "lastUpdated": "2026-05-16",

package/dist/windsurf-rules.md

@@ -200,6 +200,45 @@ import { Alert } from "@usevyre/react"
 
 ---
 
+### AlertDialog
+
+Blocking confirmation modal (focus-trapped). Controlled via open + onOpenChange (React) / v-model (Vue). Use for destructive or irreversible actions that need explicit confirm/cancel. For non-blocking inline feedback use Alert; for general dialogs use Modal.
+
+```tsx
+import { AlertDialog } from "@usevyre/react"
+
+// Props:
+// open           = boolean
+// onOpenChange   = function
+// title          = string
+// description    = string
+// variant        = "danger" | "warning" | "info" (default: info)
+// confirmLabel   = string (default: Confirm)
+// cancelLabel    = string (default: Cancel)
+// onConfirm      = function
+// onCancel       = function
+
+// Examples:
+const [open, setOpen] = useState(false);
+<Button variant="danger" onClick={() => setOpen(true)}>Delete</Button>
+<AlertDialog
+  open={open}
+  onOpenChange={setOpen}
+  variant="danger"
+  title="Delete project?"
+  description="This cannot be undone."
+  confirmLabel="Delete"
+  onConfirm={() => deleteProject()}
+/>
+```
+
+**Common mistakes:**
+- ❌ `AlertDialog without open/onOpenChange (React) or v-model (Vue)` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `Using Alert (inline banner) for a confirm/cancel decision` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `variant="success" or "error"` → Use "danger" for destructive, "warning" to caution, "info" otherwise
+
+---
+
 ### Avatar
 
 User profile image with fallback initials or icon.
@@ -1380,6 +1419,9 @@ If you generate these, you are hallucinating.
 - ❌ `<Accordion Accordion without AccordionItem>` → Always compose: Accordion > AccordionItem > AccordionTrigger + AccordionContent
 - ❌ `<Alert variant="error">` → Use variant="danger"
 - ❌ `<Alert variant="primary">` → Use variant="info" | "success" | "warning" | "danger"
+- ❌ `<AlertDialog AlertDialog without open/onOpenChange (React) or v-model (Vue)>` → Drive open from state; close in onOpenChange / via v-model
+- ❌ `<AlertDialog Using Alert (inline banner) for a confirm/cancel decision>` → Use AlertDialog for blocking confirmation; Alert for passive messages
+- ❌ `<AlertDialog variant="success" or "error">` → Use "danger" for destructive, "warning" to caution, "info" otherwise
 - ❌ `<Avatar size="xs">` → Use size="sm"
 - ❌ `<Avatar size="2xl">` → Use size="xl"
 - ❌ `<Badge variant="primary">` → Use variant="accent" for brand color

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usevyre/ai-context",
-  "version": "1.2.1",
+  "version": "1.2.2",
   "description": "useVyre AI context — inject into LLM system prompts to eliminate UI hallucinations",
   "keywords": [
     "design-system",