@usevyre/ai-context 1.2.2 → 1.3.0

package/dist/index.js

@@ -1,7 +1,7 @@
-// @usevyre/ai-context v1.2.0
+// @usevyre/ai-context v1.6.0
 // Auto-generated — do not edit directly. Edit src/schema/components.json instead.
 
-export const version = "1.2.0";
+export const version = "1.6.0";
 
 export const fullContext = `# useVyre Design System — AI Context
 # Version: 0.2.0
@@ -344,6 +344,7 @@ import { Button } from "@usevyre/react"
 - ❌ \`color="..."\` → Use variant prop instead
 - ❌ \`icon={...}\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`size="icon" without aria-label\` → Add aria-label describing the action
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -429,6 +430,7 @@ import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
 
 **Common mistakes:**
 - ❌ \`variant="primary"\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -640,6 +642,7 @@ import { Input } from "@usevyre/react"
 - ❌ \`size="icon"\` → Use size="sm" | "md" | "lg"
 - ❌ \`type="search" for search UI\` → Import Command from @usevyre/react for search palettes
 - ❌ \`Vue: binding Input/Textarea value without v-model\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -1382,6 +1385,157 @@ const messages = [
 
 ---
 
+### Stack
+
+Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Stack } from "@usevyre/react"
+
+// Props:
+// direction      = "row" | "column" | "row-reverse" | "column-reverse" (default: row)
+// inline         = boolean (default: false)
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" | "baseline" (default: stretch)
+// justify        = "start" | "center" | "end" | "between" | "around" | "evenly" (default: start)
+// alignContent   = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"
+// alignSelf      = "auto" | "start" | "center" | "end" | "stretch" | "baseline"
+// wrap           = "nowrap" | "wrap" | "wrap-reverse" (default: nowrap)
+// grow           = number
+// shrink         = number
+// basis          = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto" | "content" | "0"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Stack direction="row" gap="md" align="center" justify="between">
+  <Avatar src={user.avatar} />
+  <Text>{user.name}</Text>
+  <Button>Edit</Button>
+</Stack>
+<Stack wrap="wrap" rowGap="lg" columnGap="md">
+  {tags.map((t) => <Tag key={t}>{t}</Tag>)}
+</Stack>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display: 'flex', gap: 12 }}>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`gap={12} or gap="12px"\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`direction="vertical" / "horizontal"\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### Grid
+
+Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Grid, GridItem } from "@usevyre/react"
+
+// Props:
+// columns        = number | "auto-fit" (default: 1)
+// rows           = number | "auto"
+// flow           = "row" | "column" | "dense" | "row-dense" | "column-dense"
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" (default: stretch)
+// justify        = "start" | "center" | "end" | "stretch"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={3} gap="lg">
+  <GridItem colSpan={2}><Card>Wide</Card></GridItem>
+  <Card>Two</Card>
+  <Card>Three</Card>
+</Grid>
+<Grid columns="auto-fit" gap="md">
+  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>\` → Use <Grid columns={3} gap="md">
+- ❌ \`columns="3" (string)\` → Use columns={3} or columns="auto-fit"
+- ❌ \`Nested div with inline grid-column for spanning\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### GridItem
+
+Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { GridItem } from "@usevyre/react"
+
+// Props:
+// colSpan        = number
+// rowSpan        = number
+// colStart       = number
+// rowStart       = number
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={4} gap="md">
+  <GridItem colSpan={2}>Featured</GridItem>
+  <div>a</div>
+  <div>b</div>
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`GridItem outside a Grid\` → Place <GridItem> directly inside <Grid>
+
+---
+
+### Box
+
+Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The \`style\` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Box } from "@usevyre/react"
+
+// Props:
+// padding        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingX       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingY       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingTop     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingRight   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingBottom  = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingLeft    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// margin         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginX        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginY        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginTop      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginRight    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginBottom   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginLeft     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+// style          = React.CSSProperties
+
+// Examples:
+<Box as="section" paddingX="lg" paddingY="md">
+  <Heading>Settings</Heading>
+</Box>
+<Box marginTop="xl"><Separator /></Box>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<Box style={{ padding: 16 }}>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`Using Box for flex/grid layout\` → Use <Stack> or <Grid>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
 ### DateRangePicker
 
 Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.
@@ -1435,11 +1589,13 @@ If you generate these, you are hallucinating.
 - ❌ \`<Button color="...">\` → Use variant prop instead
 - ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
+- ❌ \`<Button padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Calendar Calendar for an input field that opens a popover>\` → Use <DatePicker /> (single date) or <DateRangePicker /> (range)
 - ❌ \`<Calendar value as tuple for mode="single">\` → Pass value matching mode; use mode="range" for [start,end]
 - ❌ \`<DatePicker DatePicker mode="range" for { from, to } object>\` → Use <DateRangePicker /> for the { from, to } object API + presets + dual month
 - ❌ \`<DatePicker DatePicker without value/onChange>\` → Provide value and onChange (e.g. from useState)
 - ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`<Card padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Checkbox size="lg">\` → Use size="md"
 - ❌ \`<RadioGroup <Radio> used outside a <RadioGroup>>\` → Always wrap <Radio> in <RadioGroup>
 - ❌ \`<RadioGroup RadioGroup without value/onChange (React) or v-model (Vue)>\` → Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React
@@ -1454,6 +1610,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
 - ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
 - ❌ \`<Input Vue: binding Input/Textarea value without v-model>\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`<Input padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
@@ -1490,6 +1647,18 @@ If you generate these, you are hallucinating.
 - ❌ \`<Conversation Expecting Conversation to store/append messages>\` → Append to your own state in onSend (or @send) and pass it back via value
 - ❌ \`<Conversation composer without onSend (React) / @send (Vue)>\` → Provide onSend / @send to append the message to value
 - ❌ \`<Conversation Treating onSend as (text) only when using allowAttachments>\` → Handle onSend(text, files) — map files to message attachments and append
+- ❌ \`<Stack <div style={{ display: 'flex', gap: 12 }}>>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`<Stack gap={12} or gap="12px">\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`<Stack direction="vertical" / "horizontal">\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`<Stack style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<Grid <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>>\` → Use <Grid columns={3} gap="md">
+- ❌ \`<Grid columns="3" (string)>\` → Use columns={3} or columns="auto-fit"
+- ❌ \`<Grid Nested div with inline grid-column for spanning>\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`<Grid style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<GridItem GridItem outside a Grid>\` → Place <GridItem> directly inside <Grid>
+- ❌ \`<Box <Box style={{ padding: 16 }}>>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`<Box Using Box for flex/grid layout>\` → Use <Stack> or <Grid>
+- ❌ \`<Box style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
 - ❌ \`<DateRangePicker value={[from, to]}>\` → Use value={{ from, to }} and read range.from / range.to
 - ❌ \`<DateRangePicker DateRangePicker for a single date>\` → Use <DatePicker /> for a single date
 - ❌ \`<DateRangePicker presets="true" (string)>\` → Use the bare prop: presets  (or presets={true})
@@ -1547,7 +1716,7 @@ alwaysApply: true
 ---
 
 # useVyre Design System — Cursor Rules
-# Version: 1.2.0
+# Version: 1.6.0
 
 You are working in a project using the useVyre design system (@usevyre/react).
 Follow these rules strictly when generating any UI code.
@@ -1636,6 +1805,7 @@ Never do:
 - ❌ color="..." → ✅ Use variant prop instead
 - ❌ icon={...} → ✅ Use leftIcon={...} or rightIcon={...}
 - ❌ size="icon" without aria-label → ✅ Add aria-label describing the action
+- ❌ padding / margin / marginTop (any spacing prop) on a useVyre component → ✅ Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ## Calendar
 Inline date-grid widget (always visible, no input). mode: single | range | multiple, optional time picker. For an input + popover use DatePicker; for start/end ranges with presets use DateRangePicker.
@@ -1668,6 +1838,7 @@ Valid props:
 
 Never do:
 - ❌ variant="primary" → ✅ Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ padding / margin / marginTop (any spacing prop) on a useVyre component → ✅ Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ## Checkbox
 Binary toggle for boolean form values.
@@ -1741,6 +1912,7 @@ Never do:
 - ❌ size="icon" → ✅ Use size="sm" | "md" | "lg"
 - ❌ type="search" for search UI → ✅ Import Command from @usevyre/react for search palettes
 - ❌ Vue: binding Input/Textarea value without v-model → ✅ Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ padding / margin / marginTop (any spacing prop) on a useVyre component → ✅ Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ## Label
 Accessible form label. Associate with input via htmlFor.
@@ -1988,6 +2160,86 @@ Never do:
 - ❌ composer without onSend (React) / @send (Vue) → ✅ Provide onSend / @send to append the message to value
 - ❌ Treating onSend as (text) only when using allowAttachments → ✅ Handle onSend(text, files) — map files to message attachments and append
 
+## Stack
+Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or \`as\`).
+Import: \`import { Stack } from "@usevyre/react"\`
+
+Valid props:
+- direction: "row" | "column" | "row-reverse" | "column-reverse" [default: row]
+- gap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" [default: md]
+- rowGap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- columnGap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- align: "start" | "center" | "end" | "stretch" | "baseline" [default: stretch]
+- justify: "start" | "center" | "end" | "between" | "around" | "evenly" [default: start]
+- alignContent: "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"
+- alignSelf: "auto" | "start" | "center" | "end" | "stretch" | "baseline"
+- wrap: "nowrap" | "wrap" | "wrap-reverse" [default: nowrap]
+- basis: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto" | "content" | "0"
+- width: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- height: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+
+Never do:
+- ❌ <div style={{ display: 'flex', gap: 12 }}> → ✅ Use <Stack gap="md"> — gap is a token
+- ❌ gap={12} or gap="12px" → ✅ Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ direction="vertical" / "horizontal" → ✅ Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ style={{ width: "100%" }} / style={{ height: 320 }} → ✅ Use the width / height prop: width="full", width="md", height="screen", etc.
+
+## Grid
+Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or \`as\`).
+Import: \`import { Grid, GridItem } from "@usevyre/react"\`
+
+Valid props:
+- flow: "row" | "column" | "dense" | "row-dense" | "column-dense"
+- gap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" [default: md]
+- rowGap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- columnGap: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- align: "start" | "center" | "end" | "stretch" [default: stretch]
+- justify: "start" | "center" | "end" | "stretch"
+- width: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- height: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+
+Never do:
+- ❌ <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}> → ✅ Use <Grid columns={3} gap="md">
+- ❌ columns="3" (string) → ✅ Use columns={3} or columns="auto-fit"
+- ❌ Nested div with inline grid-column for spanning → ✅ Wrap the cell in <GridItem colSpan={2}>
+- ❌ style={{ width: "100%" }} / style={{ height: 320 }} → ✅ Use the width / height prop: width="full", width="md", height="screen", etc.
+
+## GridItem
+Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or \`as\`).
+Import: \`import { GridItem } from "@usevyre/react"\`
+
+Valid props:
+
+Never do:
+- ❌ GridItem outside a Grid → ✅ Place <GridItem> directly inside <Grid>
+
+## Box
+Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The \`style\` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or \`as\`).
+Import: \`import { Box } from "@usevyre/react"\`
+
+Valid props:
+- padding: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingX: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingY: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingTop: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingRight: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingBottom: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- paddingLeft: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- margin: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginX: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginY: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginTop: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginRight: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginBottom: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- marginLeft: "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- width: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+- height: "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+
+Never do:
+- ❌ <Box style={{ padding: 16 }}> → ✅ Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ Using Box for flex/grid layout → ✅ Use <Stack> or <Grid>
+- ❌ style={{ width: "100%" }} / style={{ height: 320 }} → ✅ Use the width / height prop: width="full", width="md", height="screen", etc.
+
 ## DateRangePicker
 Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.
 Import: \`import { DateRangePicker } from "@usevyre/react"\`
@@ -2007,7 +2259,7 @@ Use --vyre-color-semantic-* for all colors. Never use primitive tokens.
 Use --vyre-spacing-* for all spacing. Never use raw px in component code.
 Use --vyre-border-radius-* for border radius.`;
 export const claudeContext = `# useVyre Design System Context
-# Version: 1.2.0
+# Version: 1.6.0
 
 You are working in a codebase that uses the useVyre design system.
 Follow the rules below strictly when writing any UI code.
@@ -2353,6 +2605,7 @@ import { Button } from "@usevyre/react"
 - ❌ \`color="..."\` → Use variant prop instead
 - ❌ \`icon={...}\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`size="icon" without aria-label\` → Add aria-label describing the action
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -2438,6 +2691,7 @@ import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
 
 **Common mistakes:**
 - ❌ \`variant="primary"\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -2649,6 +2903,7 @@ import { Input } from "@usevyre/react"
 - ❌ \`size="icon"\` → Use size="sm" | "md" | "lg"
 - ❌ \`type="search" for search UI\` → Import Command from @usevyre/react for search palettes
 - ❌ \`Vue: binding Input/Textarea value without v-model\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -3391,6 +3646,157 @@ const messages = [
 
 ---
 
+### Stack
+
+Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Stack } from "@usevyre/react"
+
+// Props:
+// direction      = "row" | "column" | "row-reverse" | "column-reverse" (default: row)
+// inline         = boolean (default: false)
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" | "baseline" (default: stretch)
+// justify        = "start" | "center" | "end" | "between" | "around" | "evenly" (default: start)
+// alignContent   = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"
+// alignSelf      = "auto" | "start" | "center" | "end" | "stretch" | "baseline"
+// wrap           = "nowrap" | "wrap" | "wrap-reverse" (default: nowrap)
+// grow           = number
+// shrink         = number
+// basis          = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto" | "content" | "0"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Stack direction="row" gap="md" align="center" justify="between">
+  <Avatar src={user.avatar} />
+  <Text>{user.name}</Text>
+  <Button>Edit</Button>
+</Stack>
+<Stack wrap="wrap" rowGap="lg" columnGap="md">
+  {tags.map((t) => <Tag key={t}>{t}</Tag>)}
+</Stack>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display: 'flex', gap: 12 }}>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`gap={12} or gap="12px"\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`direction="vertical" / "horizontal"\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### Grid
+
+Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Grid, GridItem } from "@usevyre/react"
+
+// Props:
+// columns        = number | "auto-fit" (default: 1)
+// rows           = number | "auto"
+// flow           = "row" | "column" | "dense" | "row-dense" | "column-dense"
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" (default: stretch)
+// justify        = "start" | "center" | "end" | "stretch"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={3} gap="lg">
+  <GridItem colSpan={2}><Card>Wide</Card></GridItem>
+  <Card>Two</Card>
+  <Card>Three</Card>
+</Grid>
+<Grid columns="auto-fit" gap="md">
+  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>\` → Use <Grid columns={3} gap="md">
+- ❌ \`columns="3" (string)\` → Use columns={3} or columns="auto-fit"
+- ❌ \`Nested div with inline grid-column for spanning\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### GridItem
+
+Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { GridItem } from "@usevyre/react"
+
+// Props:
+// colSpan        = number
+// rowSpan        = number
+// colStart       = number
+// rowStart       = number
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={4} gap="md">
+  <GridItem colSpan={2}>Featured</GridItem>
+  <div>a</div>
+  <div>b</div>
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`GridItem outside a Grid\` → Place <GridItem> directly inside <Grid>
+
+---
+
+### Box
+
+Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The \`style\` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Box } from "@usevyre/react"
+
+// Props:
+// padding        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingX       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingY       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingTop     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingRight   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingBottom  = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingLeft    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// margin         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginX        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginY        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginTop      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginRight    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginBottom   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginLeft     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+// style          = React.CSSProperties
+
+// Examples:
+<Box as="section" paddingX="lg" paddingY="md">
+  <Heading>Settings</Heading>
+</Box>
+<Box marginTop="xl"><Separator /></Box>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<Box style={{ padding: 16 }}>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`Using Box for flex/grid layout\` → Use <Stack> or <Grid>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
 ### DateRangePicker
 
 Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.
@@ -3444,11 +3850,13 @@ If you generate these, you are hallucinating.
 - ❌ \`<Button color="...">\` → Use variant prop instead
 - ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
+- ❌ \`<Button padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Calendar Calendar for an input field that opens a popover>\` → Use <DatePicker /> (single date) or <DateRangePicker /> (range)
 - ❌ \`<Calendar value as tuple for mode="single">\` → Pass value matching mode; use mode="range" for [start,end]
 - ❌ \`<DatePicker DatePicker mode="range" for { from, to } object>\` → Use <DateRangePicker /> for the { from, to } object API + presets + dual month
 - ❌ \`<DatePicker DatePicker without value/onChange>\` → Provide value and onChange (e.g. from useState)
 - ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`<Card padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Checkbox size="lg">\` → Use size="md"
 - ❌ \`<RadioGroup <Radio> used outside a <RadioGroup>>\` → Always wrap <Radio> in <RadioGroup>
 - ❌ \`<RadioGroup RadioGroup without value/onChange (React) or v-model (Vue)>\` → Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React
@@ -3463,6 +3871,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
 - ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
 - ❌ \`<Input Vue: binding Input/Textarea value without v-model>\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`<Input padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
@@ -3499,6 +3908,18 @@ If you generate these, you are hallucinating.
 - ❌ \`<Conversation Expecting Conversation to store/append messages>\` → Append to your own state in onSend (or @send) and pass it back via value
 - ❌ \`<Conversation composer without onSend (React) / @send (Vue)>\` → Provide onSend / @send to append the message to value
 - ❌ \`<Conversation Treating onSend as (text) only when using allowAttachments>\` → Handle onSend(text, files) — map files to message attachments and append
+- ❌ \`<Stack <div style={{ display: 'flex', gap: 12 }}>>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`<Stack gap={12} or gap="12px">\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`<Stack direction="vertical" / "horizontal">\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`<Stack style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<Grid <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>>\` → Use <Grid columns={3} gap="md">
+- ❌ \`<Grid columns="3" (string)>\` → Use columns={3} or columns="auto-fit"
+- ❌ \`<Grid Nested div with inline grid-column for spanning>\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`<Grid style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<GridItem GridItem outside a Grid>\` → Place <GridItem> directly inside <Grid>
+- ❌ \`<Box <Box style={{ padding: 16 }}>>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`<Box Using Box for flex/grid layout>\` → Use <Stack> or <Grid>
+- ❌ \`<Box style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
 - ❌ \`<DateRangePicker value={[from, to]}>\` → Use value={{ from, to }} and read range.from / range.to
 - ❌ \`<DateRangePicker DateRangePicker for a single date>\` → Use <DatePicker /> for a single date
 - ❌ \`<DateRangePicker presets="true" (string)>\` → Use the bare prop: presets  (or presets={true})
@@ -3551,7 +3972,7 @@ If you generate these, you are hallucinating.
 \`\`\`
 `;
 export const windsurfRules = `# useVyre Rules for Windsurf
-# Version: 1.2.0
+# Version: 1.6.0
 
 # useVyre Design System — AI Context
 # Version: 0.2.0
@@ -3894,6 +4315,7 @@ import { Button } from "@usevyre/react"
 - ❌ \`color="..."\` → Use variant prop instead
 - ❌ \`icon={...}\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`size="icon" without aria-label\` → Add aria-label describing the action
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -3979,6 +4401,7 @@ import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
 
 **Common mistakes:**
 - ❌ \`variant="primary"\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -4190,6 +4613,7 @@ import { Input } from "@usevyre/react"
 - ❌ \`size="icon"\` → Use size="sm" | "md" | "lg"
 - ❌ \`type="search" for search UI\` → Import Command from @usevyre/react for search palettes
 - ❌ \`Vue: binding Input/Textarea value without v-model\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -4932,6 +5356,157 @@ const messages = [
 
 ---
 
+### Stack
+
+Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Stack } from "@usevyre/react"
+
+// Props:
+// direction      = "row" | "column" | "row-reverse" | "column-reverse" (default: row)
+// inline         = boolean (default: false)
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" | "baseline" (default: stretch)
+// justify        = "start" | "center" | "end" | "between" | "around" | "evenly" (default: start)
+// alignContent   = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"
+// alignSelf      = "auto" | "start" | "center" | "end" | "stretch" | "baseline"
+// wrap           = "nowrap" | "wrap" | "wrap-reverse" (default: nowrap)
+// grow           = number
+// shrink         = number
+// basis          = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto" | "content" | "0"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Stack direction="row" gap="md" align="center" justify="between">
+  <Avatar src={user.avatar} />
+  <Text>{user.name}</Text>
+  <Button>Edit</Button>
+</Stack>
+<Stack wrap="wrap" rowGap="lg" columnGap="md">
+  {tags.map((t) => <Tag key={t}>{t}</Tag>)}
+</Stack>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display: 'flex', gap: 12 }}>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`gap={12} or gap="12px"\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`direction="vertical" / "horizontal"\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### Grid
+
+Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Grid, GridItem } from "@usevyre/react"
+
+// Props:
+// columns        = number | "auto-fit" (default: 1)
+// rows           = number | "auto"
+// flow           = "row" | "column" | "dense" | "row-dense" | "column-dense"
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" (default: stretch)
+// justify        = "start" | "center" | "end" | "stretch"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={3} gap="lg">
+  <GridItem colSpan={2}><Card>Wide</Card></GridItem>
+  <Card>Two</Card>
+  <Card>Three</Card>
+</Grid>
+<Grid columns="auto-fit" gap="md">
+  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>\` → Use <Grid columns={3} gap="md">
+- ❌ \`columns="3" (string)\` → Use columns={3} or columns="auto-fit"
+- ❌ \`Nested div with inline grid-column for spanning\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### GridItem
+
+Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { GridItem } from "@usevyre/react"
+
+// Props:
+// colSpan        = number
+// rowSpan        = number
+// colStart       = number
+// rowStart       = number
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={4} gap="md">
+  <GridItem colSpan={2}>Featured</GridItem>
+  <div>a</div>
+  <div>b</div>
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`GridItem outside a Grid\` → Place <GridItem> directly inside <Grid>
+
+---
+
+### Box
+
+Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The \`style\` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Box } from "@usevyre/react"
+
+// Props:
+// padding        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingX       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingY       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingTop     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingRight   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingBottom  = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingLeft    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// margin         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginX        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginY        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginTop      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginRight    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginBottom   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginLeft     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+// style          = React.CSSProperties
+
+// Examples:
+<Box as="section" paddingX="lg" paddingY="md">
+  <Heading>Settings</Heading>
+</Box>
+<Box marginTop="xl"><Separator /></Box>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<Box style={{ padding: 16 }}>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`Using Box for flex/grid layout\` → Use <Stack> or <Grid>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
 ### DateRangePicker
 
 Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.
@@ -4985,11 +5560,13 @@ If you generate these, you are hallucinating.
 - ❌ \`<Button color="...">\` → Use variant prop instead
 - ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
+- ❌ \`<Button padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Calendar Calendar for an input field that opens a popover>\` → Use <DatePicker /> (single date) or <DateRangePicker /> (range)
 - ❌ \`<Calendar value as tuple for mode="single">\` → Pass value matching mode; use mode="range" for [start,end]
 - ❌ \`<DatePicker DatePicker mode="range" for { from, to } object>\` → Use <DateRangePicker /> for the { from, to } object API + presets + dual month
 - ❌ \`<DatePicker DatePicker without value/onChange>\` → Provide value and onChange (e.g. from useState)
 - ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`<Card padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Checkbox size="lg">\` → Use size="md"
 - ❌ \`<RadioGroup <Radio> used outside a <RadioGroup>>\` → Always wrap <Radio> in <RadioGroup>
 - ❌ \`<RadioGroup RadioGroup without value/onChange (React) or v-model (Vue)>\` → Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React
@@ -5004,6 +5581,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
 - ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
 - ❌ \`<Input Vue: binding Input/Textarea value without v-model>\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`<Input padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
@@ -5040,6 +5618,18 @@ If you generate these, you are hallucinating.
 - ❌ \`<Conversation Expecting Conversation to store/append messages>\` → Append to your own state in onSend (or @send) and pass it back via value
 - ❌ \`<Conversation composer without onSend (React) / @send (Vue)>\` → Provide onSend / @send to append the message to value
 - ❌ \`<Conversation Treating onSend as (text) only when using allowAttachments>\` → Handle onSend(text, files) — map files to message attachments and append
+- ❌ \`<Stack <div style={{ display: 'flex', gap: 12 }}>>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`<Stack gap={12} or gap="12px">\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`<Stack direction="vertical" / "horizontal">\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`<Stack style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<Grid <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>>\` → Use <Grid columns={3} gap="md">
+- ❌ \`<Grid columns="3" (string)>\` → Use columns={3} or columns="auto-fit"
+- ❌ \`<Grid Nested div with inline grid-column for spanning>\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`<Grid style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<GridItem GridItem outside a Grid>\` → Place <GridItem> directly inside <Grid>
+- ❌ \`<Box <Box style={{ padding: 16 }}>>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`<Box Using Box for flex/grid layout>\` → Use <Stack> or <Grid>
+- ❌ \`<Box style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
 - ❌ \`<DateRangePicker value={[from, to]}>\` → Use value={{ from, to }} and read range.from / range.to
 - ❌ \`<DateRangePicker DateRangePicker for a single date>\` → Use <DatePicker /> for a single date
 - ❌ \`<DateRangePicker presets="true" (string)>\` → Use the bare prop: presets  (or presets={true})
@@ -5092,7 +5682,7 @@ If you generate these, you are hallucinating.
 \`\`\`
 `;
 export const copilotInstructions = `# useVyre Copilot Instructions
-# Version: 1.2.0
+# Version: 1.6.0
 
 When generating UI code in this project, follow the useVyre design system rules below.
 
@@ -5437,6 +6027,7 @@ import { Button } from "@usevyre/react"
 - ❌ \`color="..."\` → Use variant prop instead
 - ❌ \`icon={...}\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`size="icon" without aria-label\` → Add aria-label describing the action
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -5522,6 +6113,7 @@ import { Card, CardHeader, CardBody, CardFooter } from "@usevyre/react"
 
 **Common mistakes:**
 - ❌ \`variant="primary"\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -5733,6 +6325,7 @@ import { Input } from "@usevyre/react"
 - ❌ \`size="icon"\` → Use size="sm" | "md" | "lg"
 - ❌ \`type="search" for search UI\` → Import Command from @usevyre/react for search palettes
 - ❌ \`Vue: binding Input/Textarea value without v-model\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`padding / margin / marginTop (any spacing prop) on a useVyre component\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 
 ---
 
@@ -6475,6 +7068,157 @@ const messages = [
 
 ---
 
+### Stack
+
+Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Stack } from "@usevyre/react"
+
+// Props:
+// direction      = "row" | "column" | "row-reverse" | "column-reverse" (default: row)
+// inline         = boolean (default: false)
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" | "baseline" (default: stretch)
+// justify        = "start" | "center" | "end" | "between" | "around" | "evenly" (default: start)
+// alignContent   = "start" | "center" | "end" | "stretch" | "between" | "around" | "evenly"
+// alignSelf      = "auto" | "start" | "center" | "end" | "stretch" | "baseline"
+// wrap           = "nowrap" | "wrap" | "wrap-reverse" (default: nowrap)
+// grow           = number
+// shrink         = number
+// basis          = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "auto" | "content" | "0"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Stack direction="row" gap="md" align="center" justify="between">
+  <Avatar src={user.avatar} />
+  <Text>{user.name}</Text>
+  <Button>Edit</Button>
+</Stack>
+<Stack wrap="wrap" rowGap="lg" columnGap="md">
+  {tags.map((t) => <Tag key={t}>{t}</Tag>)}
+</Stack>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display: 'flex', gap: 12 }}>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`gap={12} or gap="12px"\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`direction="vertical" / "horizontal"\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### Grid
+
+Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Grid, GridItem } from "@usevyre/react"
+
+// Props:
+// columns        = number | "auto-fit" (default: 1)
+// rows           = number | "auto"
+// flow           = "row" | "column" | "dense" | "row-dense" | "column-dense"
+// gap            = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" (default: md)
+// rowGap         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// columnGap      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// align          = "start" | "center" | "end" | "stretch" (default: stretch)
+// justify        = "start" | "center" | "end" | "stretch"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={3} gap="lg">
+  <GridItem colSpan={2}><Card>Wide</Card></GridItem>
+  <Card>Two</Card>
+  <Card>Three</Card>
+</Grid>
+<Grid columns="auto-fit" gap="md">
+  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>\` → Use <Grid columns={3} gap="md">
+- ❌ \`columns="3" (string)\` → Use columns={3} or columns="auto-fit"
+- ❌ \`Nested div with inline grid-column for spanning\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
+### GridItem
+
+Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { GridItem } from "@usevyre/react"
+
+// Props:
+// colSpan        = number
+// rowSpan        = number
+// colStart       = number
+// rowStart       = number
+// as             = string (default: div)
+
+// Examples:
+<Grid columns={4} gap="md">
+  <GridItem colSpan={2}>Featured</GridItem>
+  <div>a</div>
+  <div>b</div>
+</Grid>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`GridItem outside a Grid\` → Place <GridItem> directly inside <Grid>
+
+---
+
+### Box
+
+Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The \`style\` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or \`as\`).
+
+\`\`\`tsx
+import { Box } from "@usevyre/react"
+
+// Props:
+// padding        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingX       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingY       = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingTop     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingRight   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingBottom  = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// paddingLeft    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// margin         = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginX        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginY        = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginTop      = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginRight    = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginBottom   = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// marginLeft     = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// width          = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// height         = "auto" | "full" | "fit" | "screen" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl"
+// as             = string (default: div)
+// style          = React.CSSProperties
+
+// Examples:
+<Box as="section" paddingX="lg" paddingY="md">
+  <Heading>Settings</Heading>
+</Box>
+<Box marginTop="xl"><Separator /></Box>
+\`\`\`
+
+**Common mistakes:**
+- ❌ \`<Box style={{ padding: 16 }}>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`Using Box for flex/grid layout\` → Use <Stack> or <Grid>
+- ❌ \`style={{ width: "100%" }} / style={{ height: 320 }}\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+
+---
+
 ### DateRangePicker
 
 Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.
@@ -6528,11 +7272,13 @@ If you generate these, you are hallucinating.
 - ❌ \`<Button color="...">\` → Use variant prop instead
 - ❌ \`<Button icon={...}>\` → Use leftIcon={...} or rightIcon={...}
 - ❌ \`<Button size="icon" without aria-label>\` → Add aria-label describing the action
+- ❌ \`<Button padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Calendar Calendar for an input field that opens a popover>\` → Use <DatePicker /> (single date) or <DateRangePicker /> (range)
 - ❌ \`<Calendar value as tuple for mode="single">\` → Pass value matching mode; use mode="range" for [start,end]
 - ❌ \`<DatePicker DatePicker mode="range" for { from, to } object>\` → Use <DateRangePicker /> for the { from, to } object API + presets + dual month
 - ❌ \`<DatePicker DatePicker without value/onChange>\` → Provide value and onChange (e.g. from useState)
 - ❌ \`<Card variant="primary">\` → Use variant="elevated" | "outlined" | "ghost" | "accent"
+- ❌ \`<Card padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Checkbox size="lg">\` → Use size="md"
 - ❌ \`<RadioGroup <Radio> used outside a <RadioGroup>>\` → Always wrap <Radio> in <RadioGroup>
 - ❌ \`<RadioGroup RadioGroup without value/onChange (React) or v-model (Vue)>\` → Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React
@@ -6547,6 +7293,7 @@ If you generate these, you are hallucinating.
 - ❌ \`<Input size="icon">\` → Use size="sm" | "md" | "lg"
 - ❌ \`<Input type="search" for search UI>\` → Import Command from @usevyre/react for search palettes
 - ❌ \`<Input Vue: binding Input/Textarea value without v-model>\` → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange
+- ❌ \`<Input padding / margin / marginTop (any spacing prop) on a useVyre component>\` → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it
 - ❌ \`<Modal size="xl">\` → Use size="lg" or size="full"
 - ❌ \`<Popover placement="top-center">\` → Use placement="top" for centered placement
 - ❌ \`<Progress value > 100>\` → Normalize your value to 0–100 range before passing
@@ -6583,6 +7330,18 @@ If you generate these, you are hallucinating.
 - ❌ \`<Conversation Expecting Conversation to store/append messages>\` → Append to your own state in onSend (or @send) and pass it back via value
 - ❌ \`<Conversation composer without onSend (React) / @send (Vue)>\` → Provide onSend / @send to append the message to value
 - ❌ \`<Conversation Treating onSend as (text) only when using allowAttachments>\` → Handle onSend(text, files) — map files to message attachments and append
+- ❌ \`<Stack <div style={{ display: 'flex', gap: 12 }}>>\` → Use <Stack gap="md"> — gap is a token
+- ❌ \`<Stack gap={12} or gap="12px">\` → Use gap="none|xs|sm|md|lg|xl|2xl"
+- ❌ \`<Stack direction="vertical" / "horizontal">\` → Use direction="row" or "column" (also row-reverse / column-reverse)
+- ❌ \`<Stack style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<Grid <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>>\` → Use <Grid columns={3} gap="md">
+- ❌ \`<Grid columns="3" (string)>\` → Use columns={3} or columns="auto-fit"
+- ❌ \`<Grid Nested div with inline grid-column for spanning>\` → Wrap the cell in <GridItem colSpan={2}>
+- ❌ \`<Grid style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
+- ❌ \`<GridItem GridItem outside a Grid>\` → Place <GridItem> directly inside <Grid>
+- ❌ \`<Box <Box style={{ padding: 16 }}>>\` → Use <Box padding="md"> (or paddingX/paddingTop/...)
+- ❌ \`<Box Using Box for flex/grid layout>\` → Use <Stack> or <Grid>
+- ❌ \`<Box style={{ width: "100%" }} / style={{ height: 320 }}>\` → Use the width / height prop: width="full", width="md", height="screen", etc.
 - ❌ \`<DateRangePicker value={[from, to]}>\` → Use value={{ from, to }} and read range.from / range.to
 - ❌ \`<DateRangePicker DateRangePicker for a single date>\` → Use <DatePicker /> for a single date
 - ❌ \`<DateRangePicker presets="true" (string)>\` → Use the bare prop: presets  (or presets={true})
@@ -6637,15 +7396,35 @@ If you generate these, you are hallucinating.
 
 export const schema = {
   "$schema": "http://json-schema.org/draft-07/schema#",
-  "version": "1.2.0",
-  "generatedAt": "2026-05-16",
+  "version": "1.6.0",
+  "generatedAt": "2026-05-18",
   "package": "@usevyre/react",
-  "packageVersion": "1.1.0",
+  "packageVersion": "1.6.0",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
   ],
   "changelog": {
+    "1.6.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Documented the spacing model as an explicit anti-pattern on representative components (Button, Card, Input): useVyre components take no padding/margin props — use Stack/Grid gap or a Box wrapper. No API change."
+    },
+    "1.5.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Stack, Grid and Box gain token-locked width / height props (keywords auto/full/fit/screen + fixed-rem token sizes xs–2xl), removing the need for an inline width/height style for common layout sizing."
+    },
+    "1.4.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Layout primitives expanded: Stack now covers the full CSS flexbox surface (reverse directions, wrap modes, alignContent/alignSelf, grow/shrink/basis, per-axis gap); Grid gains rows/flow/justify + a new GridItem subcomponent for span/placement; Box gains per-axis (X/Y) and per-side (Top/Right/Bottom/Left) token padding/margin. Fixes Grid columns being overwritten when a user style prop was passed."
+    },
+    "1.3.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Added Stack, Grid and Box layout primitives. Token-locked spacing (no raw px/rem) to eliminate hallucinated inline flex/grid styles; Box exposes a documented style escape hatch flagged as an anti-pattern."
+    },
     "1.2.0": {
       "date": "2026-05-16",
       "breaking": false,
@@ -7038,6 +7817,11 @@ export const schema = {
           "pattern": "size=\"icon\" without aria-label",
           "reason": "Icon-only buttons have no visible text — screen readers need aria-label",
           "fix": "Add aria-label describing the action"
+        },
+        {
+          "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+          "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+          "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it"
         }
       ],
       "examples": [
@@ -7221,6 +8005,11 @@ export const schema = {
           "pattern": "variant=\"primary\"",
           "reason": "Card has no 'primary' variant",
           "fix": "Use variant=\"elevated\" | \"outlined\" | \"ghost\" | \"accent\""
+        },
+        {
+          "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+          "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+          "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it"
         }
       ],
       "examples": [
@@ -7591,6 +8380,11 @@ export const schema = {
           "pattern": "Vue: binding Input/Textarea value without v-model",
           "reason": "Vue Input & Textarea support v-model (modelValue); manual :value alone won't update",
           "fix": "Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange"
+        },
+        {
+          "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+          "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+          "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it"
         }
       ],
       "examples": [
@@ -8847,17 +9641,687 @@ export const schema = {
         }
       ]
     },
-    "DateRangePicker": {
-      "description": "Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.",
-      "import": "import { DateRangePicker } from \"@usevyre/react\"",
+    "Stack": {
+      "description": "Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or `as`).",
+      "import": "import { Stack } from \"@usevyre/react\"",
       "props": {
-        "value": {
-          "type": "{ from: Date | null; to: Date | null } | null",
-          "description": "Selected range (controlled). Pass an OBJECT, not a tuple."
+        "direction": {
+          "type": "enum",
+          "values": [
+            "row",
+            "column",
+            "row-reverse",
+            "column-reverse"
+          ],
+          "default": "row",
+          "description": "flex-direction"
         },
-        "onChange": {
-          "type": "function",
-          "description": "Callback (range: { from, to }) => void when the range changes"
+        "inline": {
+          "type": "boolean",
+          "default": false,
+          "description": "Render as inline-flex instead of flex"
+        },
+        "gap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "default": "md",
+          "description": "Space between children. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "rowGap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Row-gap override. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "columnGap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Column-gap override. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "align": {
+          "type": "enum",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "stretch",
+            "baseline"
+          ],
+          "default": "stretch",
+          "description": "align-items (cross axis)"
+        },
+        "justify": {
+          "type": "enum",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "between",
+            "around",
+            "evenly"
+          ],
+          "default": "start",
+          "description": "justify-content (main axis)"
+        },
+        "alignContent": {
+          "type": "enum",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "stretch",
+            "between",
+            "around",
+            "evenly"
+          ],
+          "description": "align-content (multi-line cross axis)"
+        },
+        "alignSelf": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "start",
+            "center",
+            "end",
+            "stretch",
+            "baseline"
+          ],
+          "description": "align-self for this element"
+        },
+        "wrap": {
+          "type": "enum",
+          "values": [
+            "nowrap",
+            "wrap",
+            "wrap-reverse"
+          ],
+          "default": "nowrap",
+          "description": "flex-wrap"
+        },
+        "grow": {
+          "type": "number",
+          "description": "flex-grow"
+        },
+        "shrink": {
+          "type": "number",
+          "description": "flex-shrink"
+        },
+        "basis": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl",
+            "auto",
+            "content",
+            "0"
+          ],
+          "description": "flex-basis — token, 'auto', 'content', or '0'"
+        },
+        "width": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Width — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline width style."
+        },
+        "height": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Height — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline height style."
+        },
+        "as": {
+          "type": "string",
+          "default": "div",
+          "description": "HTML tag to render"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "<div style={{ display: 'flex', gap: 12 }}>",
+          "reason": "Inline flex styles bypass the design system and use magic-number spacing",
+          "fix": "Use <Stack gap=\"md\"> — gap is a token"
+        },
+        {
+          "pattern": "gap={12} or gap=\"12px\"",
+          "reason": "Stack gap is a closed token enum",
+          "fix": "Use gap=\"none|xs|sm|md|lg|xl|2xl\""
+        },
+        {
+          "pattern": "direction=\"vertical\" / \"horizontal\"",
+          "reason": "Stack mirrors CSS flex-direction names",
+          "fix": "Use direction=\"row\" or \"column\" (also row-reverse / column-reverse)"
+        },
+        {
+          "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+          "reason": "Inline width/height bypass the design system and use magic numbers",
+          "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc."
+        }
+      ],
+      "examples": [
+        {
+          "description": "Row, vertically centered, spaced apart",
+          "code": "<Stack direction=\"row\" gap=\"md\" align=\"center\" justify=\"between\">\n  <Avatar src={user.avatar} />\n  <Text>{user.name}</Text>\n  <Button>Edit</Button>\n</Stack>"
+        },
+        {
+          "description": "Wrapping grid-ish gallery with per-axis gap",
+          "code": "<Stack wrap=\"wrap\" rowGap=\"lg\" columnGap=\"md\">\n  {tags.map((t) => <Tag key={t}>{t}</Tag>)}\n</Stack>"
+        }
+      ]
+    },
+    "Grid": {
+      "description": "Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or `as`).",
+      "import": "import { Grid, GridItem } from \"@usevyre/react\"",
+      "subcomponents": [
+        "GridItem"
+      ],
+      "props": {
+        "columns": {
+          "type": "number | \"auto-fit\"",
+          "default": 1,
+          "description": "Equal-width column count (1-12), or 'auto-fit' for responsive wrapping"
+        },
+        "rows": {
+          "type": "number | \"auto\"",
+          "description": "Explicit row count, or 'auto'"
+        },
+        "flow": {
+          "type": "enum",
+          "values": [
+            "row",
+            "column",
+            "dense",
+            "row-dense",
+            "column-dense"
+          ],
+          "description": "grid-auto-flow"
+        },
+        "gap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "default": "md",
+          "description": "Space between cells. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "rowGap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Row-gap override. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "columnGap": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Column-gap override. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "align": {
+          "type": "enum",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "stretch"
+          ],
+          "default": "stretch",
+          "description": "align-items"
+        },
+        "justify": {
+          "type": "enum",
+          "values": [
+            "start",
+            "center",
+            "end",
+            "stretch"
+          ],
+          "description": "justify-items"
+        },
+        "width": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Width — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline width style."
+        },
+        "height": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Height — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline height style."
+        },
+        "as": {
+          "type": "string",
+          "default": "div",
+          "description": "HTML tag to render"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>",
+          "reason": "Inline grid styles bypass the design system",
+          "fix": "Use <Grid columns={3} gap=\"md\">"
+        },
+        {
+          "pattern": "columns=\"3\" (string)",
+          "reason": "columns is a number or the literal 'auto-fit'",
+          "fix": "Use columns={3} or columns=\"auto-fit\""
+        },
+        {
+          "pattern": "Nested div with inline grid-column for spanning",
+          "reason": "Spanning has a dedicated primitive",
+          "fix": "Wrap the cell in <GridItem colSpan={2}>"
+        },
+        {
+          "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+          "reason": "Inline width/height bypass the design system and use magic numbers",
+          "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc."
+        }
+      ],
+      "examples": [
+        {
+          "description": "Three-column grid with a wide first cell",
+          "code": "<Grid columns={3} gap=\"lg\">\n  <GridItem colSpan={2}><Card>Wide</Card></GridItem>\n  <Card>Two</Card>\n  <Card>Three</Card>\n</Grid>"
+        },
+        {
+          "description": "Responsive auto-fit grid",
+          "code": "<Grid columns=\"auto-fit\" gap=\"md\">\n  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}\n</Grid>"
+        }
+      ]
+    },
+    "GridItem": {
+      "description": "Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or `as`).",
+      "import": "import { GridItem } from \"@usevyre/react\"",
+      "props": {
+        "colSpan": {
+          "type": "number",
+          "description": "Number of columns this item spans"
+        },
+        "rowSpan": {
+          "type": "number",
+          "description": "Number of rows this item spans"
+        },
+        "colStart": {
+          "type": "number",
+          "description": "1-based column line to start at"
+        },
+        "rowStart": {
+          "type": "number",
+          "description": "1-based row line to start at"
+        },
+        "as": {
+          "type": "string",
+          "default": "div",
+          "description": "HTML tag to render"
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "GridItem outside a Grid",
+          "reason": "GridItem only has effect as a direct child of Grid",
+          "fix": "Place <GridItem> directly inside <Grid>"
+        }
+      ],
+      "examples": [
+        {
+          "description": "Span two columns",
+          "code": "<Grid columns={4} gap=\"md\">\n  <GridItem colSpan={2}>Featured</GridItem>\n  <div>a</div>\n  <div>b</div>\n</Grid>"
+        }
+      ]
+    },
+    "Box": {
+      "description": "Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The `style` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or `as`).",
+      "import": "import { Box } from \"@usevyre/react\"",
+      "props": {
+        "padding": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, all sides. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingX": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, left + right. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingY": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, top + bottom. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingTop": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, top. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingRight": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, right. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingBottom": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, bottom. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "paddingLeft": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Inner spacing, left. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "margin": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, all sides. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginX": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, left + right. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginY": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, top + bottom. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginTop": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, top. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginRight": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, right. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginBottom": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, bottom. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "marginLeft": {
+          "type": "enum",
+          "values": [
+            "none",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Outer spacing, left. Maps to --vyre-spacing tokens. NEVER a raw px/rem value."
+        },
+        "width": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Width — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline width style."
+        },
+        "height": {
+          "type": "enum",
+          "values": [
+            "auto",
+            "full",
+            "fit",
+            "screen",
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl",
+            "2xl"
+          ],
+          "description": "Height — keyword (auto/full=100%/fit=fit-content/screen) or a fixed-rem token size (xs 8 · sm 12 · md 16 · lg 24 · xl 32 · 2xl 42). Avoids an inline height style."
+        },
+        "as": {
+          "type": "string",
+          "default": "div",
+          "description": "HTML tag to render"
+        },
+        "style": {
+          "type": "React.CSSProperties",
+          "description": "ANTI-PATTERN escape hatch. Only for values the design system cannot express. Flagged by @usevyre/eslint-plugin."
+        }
+      },
+      "antiPatterns": [
+        {
+          "pattern": "<Box style={{ padding: 16 }}>",
+          "reason": "padding is a token prop; style is a last resort",
+          "fix": "Use <Box padding=\"md\"> (or paddingX/paddingTop/...)"
+        },
+        {
+          "pattern": "Using Box for flex/grid layout",
+          "reason": "Box is spacing-only and has no layout props",
+          "fix": "Use <Stack> or <Grid>"
+        },
+        {
+          "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+          "reason": "Inline width/height bypass the design system and use magic numbers",
+          "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc."
+        }
+      ],
+      "examples": [
+        {
+          "description": "Asymmetric padding",
+          "code": "<Box as=\"section\" paddingX=\"lg\" paddingY=\"md\">\n  <Heading>Settings</Heading>\n</Box>"
+        },
+        {
+          "description": "Vertical rhythm via margin-top",
+          "code": "<Box marginTop=\"xl\"><Separator /></Box>"
+        }
+      ]
+    },
+    "DateRangePicker": {
+      "description": "Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.",
+      "import": "import { DateRangePicker } from \"@usevyre/react\"",
+      "props": {
+        "value": {
+          "type": "{ from: Date | null; to: Date | null } | null",
+          "description": "Selected range (controlled). Pass an OBJECT, not a tuple."
+        },
+        "onChange": {
+          "type": "function",
+          "description": "Callback (range: { from, to }) => void when the range changes"
         },
         "placeholder": {
           "type": "string",
@@ -8932,7 +10396,7 @@ export const schema = {
 };
 
 export const antiPatterns = {
-  "version": "1.2.0",
+  "version": "1.6.0",
   "rules": [
     {
       "component": "Accordion",
@@ -9053,6 +10517,13 @@ export const antiPatterns = {
       "fix": "Add aria-label describing the action",
       "severity": "error"
     },
+    {
+      "component": "Button",
+      "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+      "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+      "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it",
+      "severity": "error"
+    },
     {
       "component": "Calendar",
       "pattern": "Calendar for an input field that opens a popover",
@@ -9088,6 +10559,13 @@ export const antiPatterns = {
       "fix": "Use variant=\"elevated\" | \"outlined\" | \"ghost\" | \"accent\"",
       "severity": "error"
     },
+    {
+      "component": "Card",
+      "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+      "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+      "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it",
+      "severity": "error"
+    },
     {
       "component": "Checkbox",
       "pattern": "size=\"lg\"",
@@ -9186,6 +10664,13 @@ export const antiPatterns = {
       "fix": "Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange",
       "severity": "error"
     },
+    {
+      "component": "Input",
+      "pattern": "padding / margin / marginTop (any spacing prop) on a useVyre component",
+      "reason": "Components have NO spacing props by design — internal spacing is fixed by tokens for visual consistency",
+      "fix": "Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it",
+      "severity": "error"
+    },
     {
       "component": "Modal",
       "pattern": "size=\"xl\"",
@@ -9438,6 +10923,90 @@ export const antiPatterns = {
       "fix": "Handle onSend(text, files) — map files to message attachments and append",
       "severity": "error"
     },
+    {
+      "component": "Stack",
+      "pattern": "<div style={{ display: 'flex', gap: 12 }}>",
+      "reason": "Inline flex styles bypass the design system and use magic-number spacing",
+      "fix": "Use <Stack gap=\"md\"> — gap is a token",
+      "severity": "error"
+    },
+    {
+      "component": "Stack",
+      "pattern": "gap={12} or gap=\"12px\"",
+      "reason": "Stack gap is a closed token enum",
+      "fix": "Use gap=\"none|xs|sm|md|lg|xl|2xl\"",
+      "severity": "error"
+    },
+    {
+      "component": "Stack",
+      "pattern": "direction=\"vertical\" / \"horizontal\"",
+      "reason": "Stack mirrors CSS flex-direction names",
+      "fix": "Use direction=\"row\" or \"column\" (also row-reverse / column-reverse)",
+      "severity": "error"
+    },
+    {
+      "component": "Stack",
+      "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+      "reason": "Inline width/height bypass the design system and use magic numbers",
+      "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.",
+      "severity": "error"
+    },
+    {
+      "component": "Grid",
+      "pattern": "<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>",
+      "reason": "Inline grid styles bypass the design system",
+      "fix": "Use <Grid columns={3} gap=\"md\">",
+      "severity": "error"
+    },
+    {
+      "component": "Grid",
+      "pattern": "columns=\"3\" (string)",
+      "reason": "columns is a number or the literal 'auto-fit'",
+      "fix": "Use columns={3} or columns=\"auto-fit\"",
+      "severity": "error"
+    },
+    {
+      "component": "Grid",
+      "pattern": "Nested div with inline grid-column for spanning",
+      "reason": "Spanning has a dedicated primitive",
+      "fix": "Wrap the cell in <GridItem colSpan={2}>",
+      "severity": "error"
+    },
+    {
+      "component": "Grid",
+      "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+      "reason": "Inline width/height bypass the design system and use magic numbers",
+      "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.",
+      "severity": "error"
+    },
+    {
+      "component": "GridItem",
+      "pattern": "GridItem outside a Grid",
+      "reason": "GridItem only has effect as a direct child of Grid",
+      "fix": "Place <GridItem> directly inside <Grid>",
+      "severity": "error"
+    },
+    {
+      "component": "Box",
+      "pattern": "<Box style={{ padding: 16 }}>",
+      "reason": "padding is a token prop; style is a last resort",
+      "fix": "Use <Box padding=\"md\"> (or paddingX/paddingTop/...)",
+      "severity": "error"
+    },
+    {
+      "component": "Box",
+      "pattern": "Using Box for flex/grid layout",
+      "reason": "Box is spacing-only and has no layout props",
+      "fix": "Use <Stack> or <Grid>",
+      "severity": "error"
+    },
+    {
+      "component": "Box",
+      "pattern": "style={{ width: \"100%\" }} / style={{ height: 320 }}",
+      "reason": "Inline width/height bypass the design system and use magic numbers",
+      "fix": "Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.",
+      "severity": "error"
+    },
     {
       "component": "DateRangePicker",
       "pattern": "value={[from, to]}",
@@ -9463,14 +11032,34 @@ export const antiPatterns = {
 };
 
 export const versionInfo = {
-  "version": "1.2.0",
-  "packageVersion": "1.1.0",
-  "generatedAt": "2026-05-17T14:01:21.768Z",
+  "version": "1.6.0",
+  "packageVersion": "1.6.0",
+  "generatedAt": "2026-05-18T02:16:10.599Z",
   "validFor": [
     "@usevyre/react@1.1.0+",
     "@usevyre/vue@1.1.0+"
   ],
   "changelog": {
+    "1.6.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Documented the spacing model as an explicit anti-pattern on representative components (Button, Card, Input): useVyre components take no padding/margin props — use Stack/Grid gap or a Box wrapper. No API change."
+    },
+    "1.5.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Stack, Grid and Box gain token-locked width / height props (keywords auto/full/fit/screen + fixed-rem token sizes xs–2xl), removing the need for an inline width/height style for common layout sizing."
+    },
+    "1.4.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Layout primitives expanded: Stack now covers the full CSS flexbox surface (reverse directions, wrap modes, alignContent/alignSelf, grow/shrink/basis, per-axis gap); Grid gains rows/flow/justify + a new GridItem subcomponent for span/placement; Box gains per-axis (X/Y) and per-side (Top/Right/Bottom/Left) token padding/margin. Fixes Grid columns being overwritten when a user style prop was passed."
+    },
+    "1.3.0": {
+      "date": "2026-05-18",
+      "breaking": false,
+      "summary": "Added Stack, Grid and Box layout primitives. Token-locked spacing (no raw px/rem) to eliminate hallucinated inline flex/grid styles; Box exposes a documented style escape hatch flagged as an anti-pattern."
+    },
     "1.2.0": {
       "date": "2026-05-16",
       "breaking": false,
@@ -9499,309 +11088,337 @@ export const versionInfo = {
   },
   "components": {
     "Accordion": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Alert": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "AlertDialog": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Avatar": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Badge": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Breadcrumb": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Button": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Calendar": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "DatePicker": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Card": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Checkbox": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "RadioGroup": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "RichTextEditor": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Command": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "DropdownMenu": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Field": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Input": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Label": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Modal": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Pagination": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Popover": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Progress": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Select": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Separator": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Sheet": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Sidebar": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Skeleton": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Slider": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Switch": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Table": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Tabs": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Toast": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Tooltip": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Typography": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "ButtonGroup": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "TagsInput": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Combobox": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "DataGrid": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Tag": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "TagGroup": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Item": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Kanban": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "Conversation": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "Stack": {
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "Grid": {
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "GridItem": {
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
+      "breaking": false,
+      "stable": true,
+      "changelog": null
+    },
+    "Box": {
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
     },
     "DateRangePicker": {
-      "version": "1.1.0",
-      "lastUpdated": "2026-05-16",
+      "version": "1.6.0",
+      "lastUpdated": "2026-05-18",
       "breaking": false,
       "stable": true,
       "changelog": null
@@ -9816,17 +11433,17 @@ export const cheatSheets = {
   "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",
-  "Button": "# Button — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Triggers actions and navigation. The most commonly used interactive element.**\n\n```ts\nimport { Button } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"primary\"` \\| `\"secondary\"` \\| `\"ghost\"` \\| `\"accent\"` \\| `\"teal\"` \\| `\"danger\"` | `secondary` |\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"icon\"` | `md` |\n| `loading` | `true` \\| `false` | `false` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"blue\"`\n  → Use variant=\"accent\" for brand amber, or variant=\"teal\" for teal\n- ❌ `size=\"xl\"`\n  → Use size=\"lg\"\n- ❌ `color=\"...\"`\n  → Use variant prop instead\n- ❌ `icon={...}`\n  → Use leftIcon={...} or rightIcon={...}\n- ❌ `size=\"icon\" without aria-label`\n  → Add aria-label describing the action\n\n## Examples\n\n**Primary CTA**\n```tsx\n<Button variant=\"primary\">Get Started</Button>\n```\n\n**Large accent button**\n```tsx\n<Button variant=\"accent\" size=\"lg\">Launch App</Button>\n```\n\n**Loading state**\n```tsx\n<Button variant=\"danger\" loading>Deleting...</Button>\n```\n\n**Link button**\n```tsx\n<Button as=\"a\" href=\"/docs\" variant=\"secondary\">Read Docs</Button>\n```\n\n**Icon-only button**\n```tsx\n<Button variant=\"ghost\" size=\"icon\" aria-label=\"Close\">\n  <X size={16} />\n</Button>\n```\n\n## Accessibility\n\n- Always add aria-label when using size='icon' (no visible text)\n",
+  "Button": "# Button — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Triggers actions and navigation. The most commonly used interactive element.**\n\n```ts\nimport { Button } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"primary\"` \\| `\"secondary\"` \\| `\"ghost\"` \\| `\"accent\"` \\| `\"teal\"` \\| `\"danger\"` | `secondary` |\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"icon\"` | `md` |\n| `loading` | `true` \\| `false` | `false` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"blue\"`\n  → Use variant=\"accent\" for brand amber, or variant=\"teal\" for teal\n- ❌ `size=\"xl\"`\n  → Use size=\"lg\"\n- ❌ `color=\"...\"`\n  → Use variant prop instead\n- ❌ `icon={...}`\n  → Use leftIcon={...} or rightIcon={...}\n- ❌ `size=\"icon\" without aria-label`\n  → Add aria-label describing the action\n- ❌ `padding / margin / marginTop (any spacing prop) on a useVyre component`\n  → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it\n\n## Examples\n\n**Primary CTA**\n```tsx\n<Button variant=\"primary\">Get Started</Button>\n```\n\n**Large accent button**\n```tsx\n<Button variant=\"accent\" size=\"lg\">Launch App</Button>\n```\n\n**Loading state**\n```tsx\n<Button variant=\"danger\" loading>Deleting...</Button>\n```\n\n**Link button**\n```tsx\n<Button as=\"a\" href=\"/docs\" variant=\"secondary\">Read Docs</Button>\n```\n\n**Icon-only button**\n```tsx\n<Button variant=\"ghost\" size=\"icon\" aria-label=\"Close\">\n  <X size={16} />\n</Button>\n```\n\n## Accessibility\n\n- Always add aria-label when using size='icon' (no visible text)\n",
   "Calendar": "# Calendar — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Inline date-grid widget (always visible, no input). mode: single | range | multiple, optional time picker. For an input + popover use DatePicker; for start/end ranges with presets use DateRangePicker.**\n\n```ts\nimport { Calendar } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Calendar for an input field that opens a popover`\n  → Use <DatePicker /> (single date) or <DateRangePicker /> (range)\n- ❌ `value as tuple for mode=\"single\"`\n  → Pass value matching mode; use mode=\"range\" for [start,end]\n\n## Examples\n\n**Controlled date picker**\n```tsx\nconst [date, setDate] = useState(null);\n<Calendar value={date} onChange={setDate} />\n```\n",
   "DatePicker": "# DatePicker — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Input trigger that opens a Calendar in a popover. Same modes as Calendar (single | range | multiple) plus a placeholder. Use this for a compact date field; use Calendar for an always-visible grid, or DateRangePicker for start/end ranges with presets.**\n\n```ts\nimport { DatePicker } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `mode` | `\"single\"` \\| `\"range\"` \\| `\"multiple\"` | `single` |\n| `weekStartsOn` | `\"0\"` \\| `\"1\"` | `1` |\n| `showTime` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `DatePicker mode=\"range\" for { from, to } object`\n  → Use <DateRangePicker /> for the { from, to } object API + presets + dual month\n- ❌ `DatePicker without value/onChange`\n  → Provide value and onChange (e.g. from useState)\n\n## Examples\n\n**Single date field**\n```tsx\nconst [date, setDate] = useState(null);\n<DatePicker value={date} onChange={setDate} placeholder=\"Pick a date\" />\n```\n\n**Date + time**\n```tsx\n<DatePicker value={date} onChange={setDate} showTime />\n```\n",
-  "Card": "# Card — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Content container with optional header, body, and footer sections.**\n\n```ts\nimport { Card, CardHeader, CardBody, CardFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"elevated\"` \\| `\"outlined\"` \\| `\"ghost\"` \\| `\"accent\"` | `default` |\n| `hoverable` | `true` \\| `false` | `false` |\n| `clickable` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"primary\"`\n  → Use variant=\"elevated\" | \"outlined\" | \"ghost\" | \"accent\"\n\n## Examples\n\n**Elevated card with sections**\n```tsx\n<Card variant=\"elevated\">\n  <CardHeader><Badge variant=\"teal\">New</Badge></CardHeader>\n  <CardBody>\n    <h3>Card Title</h3>\n    <p>Description text.</p>\n  </CardBody>\n  <CardFooter>\n    <Button variant=\"ghost\" size=\"sm\">Learn more</Button>\n  </CardFooter>\n</Card>\n```\n",
+  "Card": "# Card — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Content container with optional header, body, and footer sections.**\n\n```ts\nimport { Card, CardHeader, CardBody, CardFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"elevated\"` \\| `\"outlined\"` \\| `\"ghost\"` \\| `\"accent\"` | `default` |\n| `hoverable` | `true` \\| `false` | `false` |\n| `clickable` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `variant=\"primary\"`\n  → Use variant=\"elevated\" | \"outlined\" | \"ghost\" | \"accent\"\n- ❌ `padding / margin / marginTop (any spacing prop) on a useVyre component`\n  → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it\n\n## Examples\n\n**Elevated card with sections**\n```tsx\n<Card variant=\"elevated\">\n  <CardHeader><Badge variant=\"teal\">New</Badge></CardHeader>\n  <CardBody>\n    <h3>Card Title</h3>\n    <p>Description text.</p>\n  </CardBody>\n  <CardFooter>\n    <Button variant=\"ghost\" size=\"sm\">Learn more</Button>\n  </CardFooter>\n</Card>\n```\n",
   "Checkbox": "# Checkbox — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Binary toggle for boolean form values.**\n\n```ts\nimport { Checkbox } 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| `indeterminate` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `size=\"lg\"`\n  → Use size=\"md\"\n\n## Examples\n\n**Labeled checkbox**\n```tsx\n<label style={{ display: 'flex', alignItems: 'center', gap: 'var(--vyre-spacing-2)' }}>\n  <Checkbox checked={agreed} onChange={e => setAgreed(e.target.checked)} />\n  I agree to the terms\n</label>\n```\n",
   "RadioGroup": "# RadioGroup — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Controlled single-choice group. RadioGroup owns the selected value; render it data-driven via the options array OR with composable <Radio> children for custom content. role=radiogroup with proper labelling. For multi-select use Checkbox; for a compact dropdown use Select.**\n\n```ts\nimport { RadioGroup, Radio } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` | `md` |\n| `orientation` | `\"vertical\"` \\| `\"horizontal\"` | `vertical` |\n| `disabled` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `<Radio> used outside a <RadioGroup>`\n  → Always wrap <Radio> in <RadioGroup>\n- ❌ `RadioGroup without value/onChange (React) or v-model (Vue)`\n  → Bind value + onChange (React) or v-model (Vue); or defaultValue for uncontrolled in React\n- ❌ `Using Checkbox for mutually-exclusive choices`\n  → Use RadioGroup + Radio (or options) for one-of-many\n\n## Examples\n\n**Data-driven**\n```tsx\n<RadioGroup\n  value={plan}\n  onChange={setPlan}\n  options={[\n    { value: \"free\", label: \"Free\", description: \"For hobby projects\" },\n    { value: \"pro\",  label: \"Pro\",  description: \"For teams\" },\n  ]}\n/>\n```\n\n**Composable children**\n```tsx\n<RadioGroup value={plan} onChange={setPlan} orientation=\"horizontal\">\n  <Radio value=\"free\" label=\"Free\" />\n  <Radio value=\"pro\"  label=\"Pro\" />\n</RadioGroup>\n```\n",
   "RichTextEditor": "# RichTextEditor — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Controlled WYSIWYG editor. value is an HTML string; you own it in state and set it in onChange (React) / v-model (Vue). Native contentEditable + execCommand — zero dependencies. Toolbar: bold, italic, underline, strike, h1-h3, ordered/unordered lists, quote, code block, link, clear formatting.**\n\n```ts\nimport { RichTextEditor } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `disabled` | `true` \\| `false` | `false` |\n| `readOnly` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `RichTextEditor without value/onChange (React) or v-model (Vue)`\n  → Keep the HTML string in state and update it in onChange / v-model\n- ❌ `Rendering value as text or with dangerouslySetInnerHTML elsewhere without sanitising`\n  → Sanitise (e.g. DOMPurify) before re-rendering untrusted RTE output\n- ❌ `toolbar=\"bold\" (string)`\n  → Pass an array, e.g. toolbar={[\"bold\",\"italic\",\"link\"]}\n\n## Examples\n\n**Controlled editor**\n```tsx\nconst [html, setHtml] = useState(\"<p>Hello <strong>world</strong></p>\");\n<RichTextEditor value={html} onChange={setHtml} placeholder=\"Write…\" />\n```\n\n**Minimal toolbar**\n```tsx\n<RichTextEditor\n  value={html}\n  onChange={setHtml}\n  toolbar={[\"bold\", \"italic\", \"link\"]}\n/>\n```\n",
   "Command": "# Command — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Command palette / search dialog. Use for search-first navigation or quick actions.**\n\n```ts\nimport { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandDialog } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Using Input type=\"search\" for search UI`\n  → Use Command + CommandInput + CommandList + CommandItem\n\n## Examples\n\n**Basic command palette**\n```tsx\n<Command>\n  <CommandInput placeholder=\"Search...\" />\n  <CommandList>\n    <CommandEmpty>No results found.</CommandEmpty>\n    <CommandGroup heading=\"Suggestions\">\n      <CommandItem onSelect={() => handleSelect('dashboard')}>Dashboard</CommandItem>\n      <CommandItem onSelect={() => handleSelect('settings')}>Settings</CommandItem>\n    </CommandGroup>\n  </CommandList>\n</Command>\n```\n",
   "DropdownMenu": "# DropdownMenu — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Contextual menu triggered by a button. Supports items, separators, checkbox items, radio groups, and sub-menus.**\n\n```ts\nimport { DropdownMenu, DropdownItem, DropdownSeparator, DropdownCheckboxItem, DropdownRadioGroup, DropdownRadioItem, DropdownSub } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `DropdownItem variant=\"primary\"`\n  → Use variant=\"danger\" for destructive items only\n\n## Examples\n\n**Dropdown with danger item**\n```tsx\n<DropdownMenu trigger={<Button variant=\"secondary\">Options</Button>}>\n  <DropdownItem onSelect={() => handleEdit()}>Edit</DropdownItem>\n  <DropdownItem onSelect={() => handleDuplicate()}>Duplicate</DropdownItem>\n  <DropdownSeparator />\n  <DropdownItem variant=\"danger\" onSelect={() => handleDelete()}>Delete</DropdownItem>\n</DropdownMenu>\n```\n",
   "Field": "# Field — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Form field wrapper. Two ways to use it (both supported): (1) props-based — pass label/hint/state/required for the common case; (2) composable — use the parts FieldLabel, FieldDescription, FieldError, FieldGroup, FieldSet for richer layouts (multiple controls, custom error placement). The props-based API is unchanged and still works.**\n\n```ts\nimport { Field, Input, Textarea } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `state` | `\"idle\"` \\| `\"error\"` \\| `\"success\"` \\| `\"warning\"` | `idle` |\n| `required` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Applying state prop directly to Input`\n  → Wrap Input in <Field state=\"error\"> to apply validation styling\n- ❌ `Mixing props label/hint AND FieldLabel/FieldError for the same field`\n  → Pick one: either props-based (label/hint/state) OR composable parts\n\n## Examples\n\n**Error state field**\n```tsx\n<Field label=\"Email\" state=\"error\" hint=\"Invalid email format\">\n  <Input type=\"email\" placeholder=\"you@example.com\" />\n</Field>\n```\n\n**Search field with left icon**\n```tsx\n<Field label=\"Search\">\n  <Input leftElement={<SearchIcon />} placeholder=\"Search...\" />\n</Field>\n```\n\n**Composable field with explicit parts**\n```tsx\n<Field>\n  <FieldLabel required htmlFor=\"email\">Email</FieldLabel>\n  <Input id=\"email\" type=\"email\" />\n  <FieldDescription>We\\u2019ll never share it.</FieldDescription>\n  <FieldError>{errors.email}</FieldError>\n</Field>\n\n// Two controls side by side\n<FieldGroup orientation=\"horizontal\">\n  <Field label=\"First name\"><Input /></Field>\n  <Field label=\"Last name\"><Input /></Field>\n</FieldGroup>\n```\n",
-  "Input": "# Input — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Text input field. Wrap in Field for labels and validation. Use leftElement/rightElement for icons.**\n\n```ts\nimport { Input } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n\n## Common AI Mistakes\n\n- ❌ `size=\"icon\"`\n  → Use size=\"sm\" | \"md\" | \"lg\"\n- ❌ `type=\"search\" for search UI`\n  → Import Command from @usevyre/react for search palettes\n- ❌ `Vue: binding Input/Textarea value without v-model`\n  → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange\n\n## Examples\n\n**Password input with icon**\n```tsx\n<Input type=\"password\" rightElement={<EyeIcon />} placeholder=\"Password\" />\n```\n",
+  "Input": "# Input — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Text input field. Wrap in Field for labels and validation. Use leftElement/rightElement for icons.**\n\n```ts\nimport { Input } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n\n## Common AI Mistakes\n\n- ❌ `size=\"icon\"`\n  → Use size=\"sm\" | \"md\" | \"lg\"\n- ❌ `type=\"search\" for search UI`\n  → Import Command from @usevyre/react for search palettes\n- ❌ `Vue: binding Input/Textarea value without v-model`\n  → Use v-model on <Input>/<Textarea> in Vue; in React use value + onChange\n- ❌ `padding / margin / marginTop (any spacing prop) on a useVyre component`\n  → Space BETWEEN components with <Stack gap> / <Grid gap>; space AROUND a block with <Box padding/margin> wrapping it\n\n## Examples\n\n**Password input with icon**\n```tsx\n<Input type=\"password\" rightElement={<EyeIcon />} placeholder=\"Password\" />\n```\n",
   "Label": "# Label — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Accessible form label. Associate with input via htmlFor.**\n\n```ts\nimport { Label } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `required` | `true` \\| `false` | `false` |\n\n## Examples\n\n**Label with input**\n```tsx\n<Label htmlFor=\"email\">Email address</Label>\n<Input id=\"email\" type=\"email\" />\n```\n",
   "Modal": "# Modal — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Dialog overlay for confirmations, forms, or focused content.**\n\n```ts\nimport { Modal, ModalHeader, ModalBody, ModalFooter } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"full\"` | `md` |\n| `open` | `true` \\| `false` | — |\n\n## Common AI Mistakes\n\n- ❌ `size=\"xl\"`\n  → Use size=\"lg\" or size=\"full\"\n\n## Examples\n\n**Confirmation modal**\n```tsx\n<Modal open={isOpen} onClose={() => setIsOpen(false)} title=\"Confirm Delete\" size=\"sm\">\n  <ModalBody>Are you sure you want to delete this item?</ModalBody>\n  <ModalFooter>\n    <Button variant=\"ghost\" onClick={() => setIsOpen(false)}>Cancel</Button>\n    <Button variant=\"danger\" onClick={handleDelete}>Delete</Button>\n  </ModalFooter>\n</Modal>\n```\n",
   "Pagination": "# Pagination — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Page navigation for paginated lists or tables.**\n\n```ts\nimport { Pagination } from \"@usevyre/react\"\n```\n\n## Examples\n\n**Basic pagination**\n```tsx\n<Pagination page={currentPage} total={totalPages} onChange={setCurrentPage} />\n```\n",
@@ -9853,5 +11470,9 @@ export const cheatSheets = {
   "Item": "# Item — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Layout primitive for list rows, settings rows, and notification rows. Denser than Card — use Item (not Card) for repeated list rows.**\n\n```ts\nimport { Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemGroup } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `variant` | `\"default\"` \\| `\"outlined\"` \\| `\"muted\"` \\| `\"plain\"` | `default` |\n| `size` | `\"sm\"` \\| `\"md\"` \\| `\"lg\"` | `md` |\n| `clickable` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Card used for repeated list rows`\n  → Use <Item> (optionally inside <ItemGroup separated>) for list/settings rows\n- ❌ `Item variant=\"primary\"`\n  → Use variant=\"default\" | \"outlined\" | \"muted\"\n- ❌ `raw text directly inside Item`\n  → Wrap text in <ItemContent><ItemTitle>…</ItemTitle></ItemContent>\n\n## Examples\n\n**Settings row with media, content and a trailing switch**\n```tsx\n<Item>\n  <ItemMedia><BellIcon /></ItemMedia>\n  <ItemContent>\n    <ItemTitle>Notifications</ItemTitle>\n    <ItemDescription>Receive an email when someone mentions you.</ItemDescription>\n  </ItemContent>\n  <ItemActions>\n    <Switch defaultChecked />\n  </ItemActions>\n</Item>\n```\n\n**Grouped clickable list with dividers**\n```tsx\n<ItemGroup separated>\n  <Item clickable>\n    <ItemContent><ItemTitle>Profile</ItemTitle></ItemContent>\n  </Item>\n  <Item clickable>\n    <ItemContent><ItemTitle>Billing</ItemTitle></ItemContent>\n  </Item>\n</ItemGroup>\n```\n",
   "Kanban": "# Kanban — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Drag-and-drop board: cards move between columns (or reorder within a column). CONTROLLED & data-driven like DataGrid. While dragging, a placeholder shows the exact drop position. Each card is wrapped in a Card (variant=\"outlined\"); renderCard (React) / #card slot (Vue) can render ANY content incl. complex components (Avatar/Badge/Progress). Columns and cards accept an optional semantic color tint. Native HTML5 DnD, zero deps.**\n\n```ts\nimport { Kanban } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `Kanban without onChange (or ignoring it)`\n  → Store columns in state and setColumns in onChange (v-model in Vue)\n- ❌ `Duplicate card ids across columns`\n  → Use globally-unique card ids across the entire board\n- ❌ `Mutating value in place then calling onChange`\n  → Pass the new array Kanban gives you straight to setState / v-model\n- ❌ `color=\"blue\" (or any non-semantic value)`\n  → Use one of: \"default\" | \"accent\" | \"teal\" | \"success\" | \"warning\" | \"danger\"\n\n## Examples\n\n**Controlled board**\n```tsx\nconst [columns, setColumns] = useState([\n  { id: \"todo\",  title: \"To Do\",       cards: [{ id: \"1\", title: \"Spec API\" }] },\n  { id: \"doing\", title: \"In Progress\", cards: [] },\n  { id: \"done\",  title: \"Done\",        cards: [{ id: \"2\", title: \"Kickoff\" }] },\n]);\n<Kanban value={columns} onChange={setColumns} />\n```\n\n**Custom card body + click handler**\n```tsx\n<Kanban\n  value={columns}\n  onChange={setColumns}\n  onCardClick={(card) => openDetail(card.id)}\n  renderCard={(card) => (\n    <><strong>{card.title}</strong><Badge>{card.id}</Badge></>\n  )}\n/>\n```\n\n**Tinted columns/cards + complex card content**\n```tsx\nconst [cols, setCols] = useState([\n  { id: \"doing\", title: \"In Progress\", color: \"teal\", cards: [\n    { id: \"t1\", title: \"OAuth\", assignee: \"AK\", progress: 60, color: \"warning\" },\n  ]},\n]);\n<Kanban\n  value={cols}\n  onChange={setCols}\n  renderCard={(card) => (\n    <><strong>{card.title}</strong><Progress value={card.progress} /></>\n  )}\n/>\n```\n",
   "Conversation": "# Conversation — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Chat / inbox message thread. CONTROLLED & data-driven like Kanban — you own `value` (messages array) and append in your own send handler; Conversation holds no message state. Consecutive messages from the same author are grouped (avatar + name shown once), day separators are inserted on date change, and outgoing messages (authorId === currentUserId) align right.**\n\n```ts\nimport { Conversation } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `composer` | `true` \\| `false` | `false` |\n| `allowAttachments` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `Conversation without currentUserId`\n  → Always pass currentUserId matching one of the message authorId values\n- ❌ `Expecting Conversation to store/append messages`\n  → Append to your own state in onSend (or @send) and pass it back via value\n- ❌ `composer without onSend (React) / @send (Vue)`\n  → Provide onSend / @send to append the message to value\n- ❌ `Treating onSend as (text) only when using allowAttachments`\n  → Handle onSend(text, files) — map files to message attachments and append\n\n## Examples\n\n**Controlled thread with built-in composer**\n```tsx\nconst [messages, setMessages] = useState([\n  { id: \"1\", authorId: \"sam\", authorName: \"Sam\", text: \"Hey!\" },\n  { id: \"2\", authorId: \"me\", text: \"Hi \\ud83d\\udc4b\", status: \"read\" },\n]);\n<Conversation\n  value={messages}\n  currentUserId=\"me\"\n  composer\n  onSend={(t) => setMessages((m) => [...m, { id: crypto.randomUUID(), authorId: \"me\", text: t }])}\n/>\n```\n\n**Typing indicator + custom bubble**\n```tsx\n<Conversation\n  value={messages}\n  currentUserId=\"me\"\n  typing=\"Sam is typing\"\n  renderMessage={(m) => <strong>{m.text}</strong>}\n/>\n```\n\n**Message with image + file attachments**\n```tsx\nconst messages = [\n  { id: \"1\", authorId: \"sam\", authorName: \"Sam\", text: \"Moodboard \\ud83d\\udc47\",\n    attachments: [{ kind: \"image\", url: \"/board.png\", name: \"board.png\" }] },\n  { id: \"2\", authorId: \"me\", text: \"Specs:\", status: \"read\",\n    attachments: [{ kind: \"file\", url: \"/spec.pdf\", name: \"spec.pdf\", size: \"2.4 MB\" }] },\n];\n<Conversation value={messages} currentUserId=\"me\" />\n```\n",
+  "Stack": "# Stack — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Full one-dimensional flex layout primitive. USE INSTEAD OF <div style={{display:'flex'}}>. Covers the whole CSS flexbox surface (direction incl. reverse, wrap, align/justify/alignContent/alignSelf, grow/shrink/basis, per-axis gap) with token-locked spacing. Renders a plain <div> (or `as`).**\n\n```ts\nimport { Stack } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `direction` | `\"row\"` \\| `\"column\"` \\| `\"row-reverse\"` \\| `\"column-reverse\"` | `row` |\n| `gap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | `md` |\n| `rowGap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `columnGap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `align` | `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"stretch\"` \\| `\"baseline\"` | `stretch` |\n| `justify` | `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"between\"` \\| `\"around\"` \\| `\"evenly\"` | `start` |\n| `alignContent` | `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"stretch\"` \\| `\"between\"` \\| `\"around\"` \\| `\"evenly\"` | — |\n| `alignSelf` | `\"auto\"` \\| `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"stretch\"` \\| `\"baseline\"` | — |\n| `wrap` | `\"nowrap\"` \\| `\"wrap\"` \\| `\"wrap-reverse\"` | `nowrap` |\n| `basis` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` \\| `\"auto\"` \\| `\"content\"` \\| `\"0\"` | — |\n| `width` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `height` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `inline` | `true` \\| `false` | `false` |\n\n## Common AI Mistakes\n\n- ❌ `<div style={{ display: 'flex', gap: 12 }}>`\n  → Use <Stack gap=\"md\"> — gap is a token\n- ❌ `gap={12} or gap=\"12px\"`\n  → Use gap=\"none|xs|sm|md|lg|xl|2xl\"\n- ❌ `direction=\"vertical\" / \"horizontal\"`\n  → Use direction=\"row\" or \"column\" (also row-reverse / column-reverse)\n- ❌ `style={{ width: \"100%\" }} / style={{ height: 320 }}`\n  → Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.\n\n## Examples\n\n**Row, vertically centered, spaced apart**\n```tsx\n<Stack direction=\"row\" gap=\"md\" align=\"center\" justify=\"between\">\n  <Avatar src={user.avatar} />\n  <Text>{user.name}</Text>\n  <Button>Edit</Button>\n</Stack>\n```\n\n**Wrapping grid-ish gallery with per-axis gap**\n```tsx\n<Stack wrap=\"wrap\" rowGap=\"lg\" columnGap=\"md\">\n  {tags.map((t) => <Tag key={t}>{t}</Tag>)}\n</Stack>\n```\n",
+  "Grid": "# Grid — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Two-dimensional CSS grid primitive. Explicit column/row counts (or auto-fit), auto-flow control, token gap. Pair with GridItem for cell spanning/placement. Renders a plain <div> (or `as`).**\n\n```ts\nimport { Grid, GridItem } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `flow` | `\"row\"` \\| `\"column\"` \\| `\"dense\"` \\| `\"row-dense\"` \\| `\"column-dense\"` | — |\n| `gap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | `md` |\n| `rowGap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `columnGap` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `align` | `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"stretch\"` | `stretch` |\n| `justify` | `\"start\"` \\| `\"center\"` \\| `\"end\"` \\| `\"stretch\"` | — |\n| `width` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `height` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n\n## Common AI Mistakes\n\n- ❌ `<div style={{ display:'grid', gridTemplateColumns:'1fr 1fr 1fr' }}>`\n  → Use <Grid columns={3} gap=\"md\">\n- ❌ `columns=\"3\" (string)`\n  → Use columns={3} or columns=\"auto-fit\"\n- ❌ `Nested div with inline grid-column for spanning`\n  → Wrap the cell in <GridItem colSpan={2}>\n- ❌ `style={{ width: \"100%\" }} / style={{ height: 320 }}`\n  → Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.\n\n## Examples\n\n**Three-column grid with a wide first cell**\n```tsx\n<Grid columns={3} gap=\"lg\">\n  <GridItem colSpan={2}><Card>Wide</Card></GridItem>\n  <Card>Two</Card>\n  <Card>Three</Card>\n</Grid>\n```\n\n**Responsive auto-fit grid**\n```tsx\n<Grid columns=\"auto-fit\" gap=\"md\">\n  {items.map((i) => <Card key={i.id}>{i.title}</Card>)}\n</Grid>\n```\n",
+  "GridItem": "# GridItem — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Child placement inside <Grid>. Sets column/row span and start lines. Renders a plain <div> (or `as`).**\n\n```ts\nimport { GridItem } from \"@usevyre/react\"\n```\n\n## Common AI Mistakes\n\n- ❌ `GridItem outside a Grid`\n  → Place <GridItem> directly inside <Grid>\n\n## Examples\n\n**Span two columns**\n```tsx\n<Grid columns={4} gap=\"md\">\n  <GridItem colSpan={2}>Featured</GridItem>\n  <div>a</div>\n  <div>b</div>\n</Grid>\n```\n",
+  "Box": "# Box — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Spacing-only container plus a controlled escape hatch. Token padding/margin with shorthand, per-axis (X/Y) and per-side (Top/Right/Bottom/Left) overrides. The `style` prop is an explicit anti-pattern escape hatch. Renders a plain <div> (or `as`).**\n\n```ts\nimport { Box } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `padding` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingX` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingY` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingTop` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingRight` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingBottom` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `paddingLeft` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `margin` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginX` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginY` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginTop` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginRight` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginBottom` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `marginLeft` | `\"none\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `width` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n| `height` | `\"auto\"` \\| `\"full\"` \\| `\"fit\"` \\| `\"screen\"` \\| `\"xs\"` \\| `\"sm\"` \\| `\"md\"` \\| `\"lg\"` \\| `\"xl\"` \\| `\"2xl\"` | — |\n\n## Common AI Mistakes\n\n- ❌ `<Box style={{ padding: 16 }}>`\n  → Use <Box padding=\"md\"> (or paddingX/paddingTop/...)\n- ❌ `Using Box for flex/grid layout`\n  → Use <Stack> or <Grid>\n- ❌ `style={{ width: \"100%\" }} / style={{ height: 320 }}`\n  → Use the width / height prop: width=\"full\", width=\"md\", height=\"screen\", etc.\n\n## Examples\n\n**Asymmetric padding**\n```tsx\n<Box as=\"section\" paddingX=\"lg\" paddingY=\"md\">\n  <Heading>Settings</Heading>\n</Box>\n```\n\n**Vertical rhythm via margin-top**\n```tsx\n<Box marginTop=\"xl\"><Separator /></Box>\n```\n",
   "DateRangePicker": "# DateRangePicker — AI Cheat Sheet\n> Quick reference for Claude / Cursor / Copilot\n\n**Start/end date range picker. Built on Calendar (mode=range) with a friendlier { from, to } object API, a two-month side-by-side view, and preset shortcuts. Use this for report/filter date ranges; use DatePicker for a single date.**\n\n```ts\nimport { DateRangePicker } from \"@usevyre/react\"\n```\n\n## Valid Props\n\n| Prop | Values | Default |\n|------|--------|---------|\n| `numberOfMonths` | `\"1\"` \\| `\"2\"` | `2` |\n| `weekStartsOn` | `\"0\"` \\| `\"1\"` | `1` |\n\n## Common AI Mistakes\n\n- ❌ `value={[from, to]}`\n  → Use value={{ from, to }} and read range.from / range.to\n- ❌ `DateRangePicker for a single date`\n  → Use <DatePicker /> for a single date\n- ❌ `presets=\"true\" (string)`\n  → Use the bare prop: presets  (or presets={true})\n\n## Examples\n\n**Range picker with built-in presets**\n```tsx\nconst [range, setRange] = useState({ from: null, to: null });\n<DateRangePicker value={range} onChange={setRange} presets />\n```\n\n**Single month, no presets**\n```tsx\n<DateRangePicker value={range} onChange={setRange} numberOfMonths={1} />\n```\n"
 };