@usevyre/ai-context 1.2.0 → 1.2.1

package/dist/anti-patterns.json

@@ -260,6 +260,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/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

@@ -797,6 +797,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -812,8 +814,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
@@ -1405,6 +1417,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

@@ -796,6 +796,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -811,8 +813,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
@@ -1404,6 +1416,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

@@ -262,6 +262,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

@@ -791,6 +791,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -806,8 +808,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
@@ -1399,6 +1411,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

@@ -796,6 +796,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -811,8 +813,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
@@ -1404,6 +1416,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"
@@ -1750,6 +1763,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"\`
@@ -2735,6 +2751,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -2750,8 +2768,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
@@ -3343,6 +3371,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"
@@ -4221,6 +4250,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -4236,8 +4267,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
@@ -4829,6 +4870,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"
@@ -5709,6 +5751,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -5724,8 +5768,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
@@ -6317,6 +6371,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"
@@ -7613,7 +7668,8 @@ export const schema = {
         "SidebarContent",
         "SidebarSection",
         "SidebarItem",
-        "SidebarFooter"
+        "SidebarFooter",
+        "SidebarTrigger"
       ],
       "props": {
         "variant": {
@@ -7623,12 +7679,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"
         }
       ]
     },
@@ -8865,6 +8940,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 +9191,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-17T13:24:18.828Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
@@ -9471,7 +9553,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

@@ -1211,7 +1211,8 @@
         "SidebarContent",
         "SidebarSection",
         "SidebarItem",
-        "SidebarFooter"
+        "SidebarFooter",
+        "SidebarTrigger"
       ],
       "props": {
         "variant": {
@@ -1221,12 +1222,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:22:00.490Z",
   "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-17T13:24:18.828Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"

package/dist/windsurf-rules.md

@@ -794,6 +794,8 @@ import { AppLayout, Sidebar, SidebarHeader, SidebarContent, SidebarSection, Side
 
 // Props:
 // variant        = "default" | "floating" (default: default)
+// SidebarTrigger.icon = ReactNode
+// SidebarTrigger.collapsedIcon = ReactNode
 
 // Examples:
 <AppLayout>
@@ -809,8 +811,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
@@ -1402,6 +1414,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.1",
   "description": "useVyre AI context — inject into LLM system prompts to eliminate UI hallucinations",
   "keywords": [
     "design-system",