@usevyre/ai-context 1.2.0 → 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\"",
@@ -260,6 +281,13 @@
       "fix": "Pass options={[{ value: 'a', label: 'Option A' }]}",
       "severity": "error"
     },
+    {
+      "component": "Sidebar",
+      "pattern": "Vue: passing icon/collapsedIcon as props on SidebarTrigger",
+      "reason": "Vue SidebarTrigger customises icons via slots, not props (consistent with SidebarItem)",
+      "fix": "Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props",
+      "severity": "error"
+    },
     {
       "component": "Toast",
       "pattern": "Rendering <Toast> directly in JSX",

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/cheat-sheets/sidebar.md

@@ -13,6 +13,11 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 |------|--------|---------|
 | `variant` | `"default"` \| `"floating"` | `default` |
 
+## Common AI Mistakes
+
+- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger`
+  → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ## Examples
 
 **App layout with sidebar**
@@ -31,3 +36,14 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   <main>Page content</main>
 </AppLayout>
 ```
+
+**SidebarTrigger with distinct open/collapsed icons**
+```tsx
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
+```

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.
@@ -797,6 +836,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -812,8 +853,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 ```
 
+**Common mistakes:**
+- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -1371,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
@@ -1405,6 +1459,7 @@ If you generate these, you are hallucinating.
 - ❌ `<Popover placement="top-center">` → Use placement="top" for centered placement
 - ❌ `<Progress value > 100>` → Normalize your value to 0–100 range before passing
 - ❌ `<Select Passing strings directly as children>` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ `<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ `<Toast Rendering <Toast> directly in JSX>` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ `<Toast variant="error">` → Use variant="danger"
 - ❌ `<Toast variant="info">` → Use variant="default"

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.
@@ -796,6 +835,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -811,8 +852,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 ```
 
+**Common mistakes:**
+- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -1370,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
@@ -1404,6 +1458,7 @@ If you generate these, you are hallucinating.
 - ❌ `<Popover placement="top-center">` → Use placement="top" for centered placement
 - ❌ `<Progress value > 100>` → Normalize your value to 0–100 range before passing
 - ❌ `<Select Passing strings directly as children>` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ `<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ `<Toast Rendering <Toast> directly in JSX>` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ `<Toast variant="error">` → Use variant="danger"
 - ❌ `<Toast variant="info">` → Use variant="default"

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"`
@@ -262,6 +274,9 @@ Import: `import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSect
 Valid props:
 - variant: "default" | "floating" [default: default]
 
+Never do:
+- ❌ Vue: passing icon/collapsedIcon as props on SidebarTrigger → ✅ Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ## Skeleton
 Loading placeholder that mimics the shape of content while data loads.
 Import: `import { Skeleton } 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.
@@ -791,6 +830,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -806,8 +847,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 ```
 
+**Common mistakes:**
+- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -1365,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
@@ -1399,6 +1453,7 @@ If you generate these, you are hallucinating.
 - ❌ `<Popover placement="top-center">` → Use placement="top" for centered placement
 - ❌ `<Progress value > 100>` → Normalize your value to 0–100 range before passing
 - ❌ `<Select Passing strings directly as children>` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ `<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ `<Toast Rendering <Toast> directly in JSX>` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ `<Toast variant="error">` → Use variant="danger"
 - ❌ `<Toast variant="info">` → Use variant="default"

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.
@@ -796,6 +835,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -811,8 +852,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 \`\`\`
 
+**Common mistakes:**
+- ❌ \`Vue: passing icon/collapsedIcon as props on SidebarTrigger\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -1370,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
@@ -1404,6 +1458,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
 - ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ \`<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ \`<Toast variant="error">\` → Use variant="danger"
 - ❌ \`<Toast variant="info">\` → Use variant="default"
@@ -1524,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"\`
@@ -1750,6 +1817,9 @@ Import: \`import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSec
 Valid props:
 - variant: "default" | "floating" [default: default]
 
+Never do:
+- ❌ Vue: passing icon/collapsedIcon as props on SidebarTrigger → ✅ Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ## Skeleton
 Loading placeholder that mimics the shape of content while data loads.
 Import: \`import { Skeleton } from "@usevyre/react"\`
@@ -2141,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.
@@ -2735,6 +2844,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -2750,8 +2861,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 \`\`\`
 
+**Common mistakes:**
+- ❌ \`Vue: passing icon/collapsedIcon as props on SidebarTrigger\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -3309,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
@@ -3343,6 +3467,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
 - ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ \`<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ \`<Toast variant="error">\` → Use variant="danger"
 - ❌ \`<Toast variant="info">\` → Use variant="default"
@@ -3627,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.
@@ -4221,6 +4385,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -4236,8 +4402,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 \`\`\`
 
+**Common mistakes:**
+- ❌ \`Vue: passing icon/collapsedIcon as props on SidebarTrigger\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -4795,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
@@ -4829,6 +5008,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
 - ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ \`<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ \`<Toast variant="error">\` → Use variant="danger"
 - ❌ \`<Toast variant="info">\` → Use variant="default"
@@ -5115,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.
@@ -5709,6 +5928,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -5724,8 +5945,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 \`\`\`
 
+**Common mistakes:**
+- ❌ \`Vue: passing icon/collapsedIcon as props on SidebarTrigger\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -6283,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
@@ -6317,6 +6551,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
 - ❌ \`<Select Passing strings directly as children>\` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ \`<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>\` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ \`<Toast Rendering <Toast> directly in JSX>\` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ \`<Toast variant="error">\` → Use variant="danger"
 - ❌ \`<Toast variant="info">\` → Use variant="default"
@@ -6508,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\"",
@@ -7613,7 +7921,8 @@ export const schema = {
         "SidebarContent",
         "SidebarSection",
         "SidebarItem",
-        "SidebarFooter"
+        "SidebarFooter",
+        "SidebarTrigger"
       ],
       "props": {
         "variant": {
@@ -7623,12 +7932,31 @@ export const schema = {
             "floating"
           ],
           "default": "default"
+        },
+        "SidebarTrigger.icon": {
+          "type": "ReactNode",
+          "description": "Icon shown when the sidebar is expanded. Optional — defaults to the built-in menu icon. Vue: #icon slot."
+        },
+        "SidebarTrigger.collapsedIcon": {
+          "type": "ReactNode",
+          "description": "Icon shown when the sidebar is collapsed. Optional — falls back to icon, then the built-in icon. Vue: #collapsed-icon slot. Use a different glyph here to signal collapsed state (common UX pattern)."
         }
       },
       "examples": [
         {
           "description": "App layout with sidebar",
           "code": "<AppLayout>\n  <Sidebar>\n    <SidebarHeader>Logo</SidebarHeader>\n    <SidebarContent>\n      <SidebarSection heading=\"Main\">\n        <SidebarItem href=\"/\" active>Dashboard</SidebarItem>\n        <SidebarItem href=\"/settings\">Settings</SidebarItem>\n      </SidebarSection>\n    </SidebarContent>\n    <SidebarFooter><Avatar fallback=\"JD\" size=\"sm\" /></SidebarFooter>\n  </Sidebar>\n  <main>Page content</main>\n</AppLayout>"
+        },
+        {
+          "description": "SidebarTrigger with distinct open/collapsed icons",
+          "code": "<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />\n\n// Vue:\n// <SidebarTrigger>\n//   <template #icon><PanelLeftClose /></template>\n//   <template #collapsed-icon><PanelLeftOpen /></template>\n// </SidebarTrigger>"
+        }
+      ],
+      "antiPatterns": [
+        {
+          "pattern": "Vue: passing icon/collapsedIcon as props on SidebarTrigger",
+          "reason": "Vue SidebarTrigger customises icons via slots, not props (consistent with SidebarItem)",
+          "fix": "Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props"
         }
       ]
     },
@@ -8627,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\"",
@@ -8865,6 +9214,13 @@ export const antiPatterns = {
       "fix": "Pass options={[{ value: 'a', label: 'Option A' }]}",
       "severity": "error"
     },
+    {
+      "component": "Sidebar",
+      "pattern": "Vue: passing icon/collapsedIcon as props on SidebarTrigger",
+      "reason": "Vue SidebarTrigger customises icons via slots, not props (consistent with SidebarItem)",
+      "fix": "Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props",
+      "severity": "error"
+    },
     {
       "component": "Toast",
       "pattern": "Rendering <Toast> directly in JSX",
@@ -9109,7 +9465,7 @@ export const antiPatterns = {
 export const versionInfo = {
   "version": "1.2.0",
   "packageVersion": "1.1.0",
-  "generatedAt": "2026-05-17T04:15:52.069Z",
+  "generatedAt": "2026-05-17T14:01:21.768Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
@@ -9156,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",
@@ -9449,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",
@@ -9471,7 +9835,7 @@ export const cheatSheets = {
   "Select": "# Select — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Dropdown for selecting one option from a list.**\n\n```ts\nimport { Select } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Passing strings directly as children`\n  → Pass options={[{ value: 'a', label: 'Option A' }]}\n\n## Examples\n\n**Controlled select**\n```tsx\n<Select\n  options={[{ value: 'react', label: 'React' }, { value: 'vue', label: 'Vue' }]}\n  value={framework}\n  onChange={setFramework}\n  placeholder=\"Choose framework\"\n/>\n```\n",
   "Separator": "# Separator — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Horizontal or vertical divider line.**\n\n```ts\nimport { Separator } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `orientation` | `\"horizontal\"` \\| `\"vertical\"` | `horizontal` |\n\n## Examples\n\n**Horizontal separator**\n```tsx\n<Separator />\n```\n\n**Vertical separator**\n```tsx\n<Separator orientation=\"vertical\" />\n```\n",
   "Sheet": "# Sheet — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Side panel (drawer) that slides in from the edge. For forms, detail views, or settings.**\n\n```ts\nimport { Sheet, SheetHeader, SheetBody, SheetFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"full\"` | `md` |\n| `side` | `\"left\"` \\| `\"right\"` | `right` |\n| `open` | `true` \\| `false` | — |\n\n## Examples\n\n**Settings sheet from the right**\n```tsx\n<Sheet open={isOpen} onClose={() => setIsOpen(false)} title=\"Settings\" side=\"right\">\n  <SheetBody>Settings content here.</SheetBody>\n  <SheetFooter>\n    <Button variant=\"accent\">Save</Button>\n  </SheetFooter>\n</Sheet>\n```\n",
-  "Sidebar": "# Sidebar — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**App navigation sidebar. Use AppLayout as the root layout wrapper.**\n\n```ts\nimport { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, SidebarItem, SidebarFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"floating\"` | `default` |\n\n## Examples\n\n**App layout with sidebar**\n```tsx\n<AppLayout>\n  <Sidebar>\n    <SidebarHeader>Logo</SidebarHeader>\n    <SidebarContent>\n      <SidebarSection heading=\"Main\">\n        <SidebarItem href=\"/\" active>Dashboard</SidebarItem>\n        <SidebarItem href=\"/settings\">Settings</SidebarItem>\n      </SidebarSection>\n    </SidebarContent>\n    <SidebarFooter><Avatar fallback=\"JD\" size=\"sm\" /></SidebarFooter>\n  </Sidebar>\n  <main>Page content</main>\n</AppLayout>\n```\n",
+  "Sidebar": "# Sidebar — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**App navigation sidebar. Use AppLayout as the root layout wrapper.**\n\n```ts\nimport { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, SidebarItem, SidebarFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"floating\"` | `default` |\n\n## Common AI Mistakes\n\n- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger`\n  → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props\n\n## Examples\n\n**App layout with sidebar**\n```tsx\n<AppLayout>\n  <Sidebar>\n    <SidebarHeader>Logo</SidebarHeader>\n    <SidebarContent>\n      <SidebarSection heading=\"Main\">\n        <SidebarItem href=\"/\" active>Dashboard</SidebarItem>\n        <SidebarItem href=\"/settings\">Settings</SidebarItem>\n      </SidebarSection>\n    </SidebarContent>\n    <SidebarFooter><Avatar fallback=\"JD\" size=\"sm\" /></SidebarFooter>\n  </Sidebar>\n  <main>Page content</main>\n</AppLayout>\n```\n\n**SidebarTrigger with distinct open/collapsed icons**\n```tsx\n<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />\n\n// Vue:\n// <SidebarTrigger>\n//   <template #icon><PanelLeftClose /></template>\n//   <template #collapsed-icon><PanelLeftOpen /></template>\n// </SidebarTrigger>\n```\n",
   "Skeleton": "# Skeleton — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Loading placeholder that mimics the shape of content while data loads.**\n\n```ts\nimport { Skeleton } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"rect\"` \\| `\"circle\"` \\| `\"text\"` | `rect` |\n\n## Examples\n\n**Avatar skeleton**\n```tsx\n<Skeleton variant=\"circle\" width={40} height={40} />\n```\n\n**Text line skeletons**\n```tsx\n<Skeleton variant=\"text\" width=\"100%\" />\n<Skeleton variant=\"text\" width=\"60%\" />\n```\n",
   "Slider": "# Slider — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Range input for selecting a numeric value within a range.**\n\n```ts\nimport { Slider } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` | `md` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Examples\n\n**Volume slider**\n```tsx\n<Slider value={volume} onChange={setVolume} min={0} max={100} step={5} />\n```\n",
   "Switch": "# Switch — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Toggle switch for boolean on/off settings.**\n\n```ts\nimport { Switch } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` | `md` |\n| `checked` | `true` \\| `false` | — |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Examples\n\n**Notifications toggle**\n```tsx\n<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>\n  <Switch checked={notifications} onChange={setNotifications} />\n  Enable notifications\n</label>\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\"",
@@ -1211,7 +1284,8 @@
         "SidebarContent",
         "SidebarSection",
         "SidebarItem",
-        "SidebarFooter"
+        "SidebarFooter",
+        "SidebarTrigger"
       ],
       "props": {
         "variant": {
@@ -1221,12 +1295,31 @@
             "floating"
           ],
           "default": "default"
+        },
+        "SidebarTrigger.icon": {
+          "type": "ReactNode",
+          "description": "Icon shown when the sidebar is expanded. Optional — defaults to the built-in menu icon. Vue: #icon slot."
+        },
+        "SidebarTrigger.collapsedIcon": {
+          "type": "ReactNode",
+          "description": "Icon shown when the sidebar is collapsed. Optional — falls back to icon, then the built-in icon. Vue: #collapsed-icon slot. Use a different glyph here to signal collapsed state (common UX pattern)."
         }
       },
       "examples": [
         {
           "description": "App layout with sidebar",
           "code": "<AppLayout>\n  <Sidebar>\n    <SidebarHeader>Logo</SidebarHeader>\n    <SidebarContent>\n      <SidebarSection heading=\"Main\">\n        <SidebarItem href=\"/\" active>Dashboard</SidebarItem>\n        <SidebarItem href=\"/settings\">Settings</SidebarItem>\n      </SidebarSection>\n    </SidebarContent>\n    <SidebarFooter><Avatar fallback=\"JD\" size=\"sm\" /></SidebarFooter>\n  </Sidebar>\n  <main>Page content</main>\n</AppLayout>"
+        },
+        {
+          "description": "SidebarTrigger with distinct open/collapsed icons",
+          "code": "<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />\n\n// Vue:\n// <SidebarTrigger>\n//   <template #icon><PanelLeftClose /></template>\n//   <template #collapsed-icon><PanelLeftOpen /></template>\n// </SidebarTrigger>"
+        }
+      ],
+      "antiPatterns": [
+        {
+          "pattern": "Vue: passing icon/collapsedIcon as props on SidebarTrigger",
+          "reason": "Vue SidebarTrigger customises icons via slots, not props (consistent with SidebarItem)",
+          "fix": "Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props"
         }
       ]
     },

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://usevyre.com/schemas/ai-tokens-v1.json",
   "version": "1.0.0",
-  "generatedAt": "2026-05-17T04:12:37.293Z",
+  "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-17T04:15:52.069Z",
+  "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.
@@ -794,6 +833,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -809,8 +850,18 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
   </Sidebar>
   <main>Page content</main>
 </AppLayout>
+<SidebarTrigger icon={<PanelLeftClose />} collapsedIcon={<PanelLeftOpen />} />
+
+// Vue:
+// <SidebarTrigger>
+//   <template #icon><PanelLeftClose /></template>
+//   <template #collapsed-icon><PanelLeftOpen /></template>
+// </SidebarTrigger>
 ```
 
+**Common mistakes:**
+- ❌ `Vue: passing icon/collapsedIcon as props on SidebarTrigger` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
+
 ---
 
 ### Skeleton
@@ -1368,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
@@ -1402,6 +1456,7 @@ If you generate these, you are hallucinating.
 - ❌ `<Popover placement="top-center">` → Use placement="top" for centered placement
 - ❌ `<Progress value > 100>` → Normalize your value to 0–100 range before passing
 - ❌ `<Select Passing strings directly as children>` → Pass options={[{ value: 'a', label: 'Option A' }]}
+- ❌ `<Sidebar Vue: passing icon/collapsedIcon as props on SidebarTrigger>` → Use <template #icon> and <template #collapsed-icon>; React uses icon / collapsedIcon props
 - ❌ `<Toast Rendering <Toast> directly in JSX>` → Use: const { toast } = useToast(); then toast({ title, variant })
 - ❌ `<Toast variant="error">` → Use variant="danger"
 - ❌ `<Toast variant="info">` → Use variant="default"

package/package.json

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