{
  "components": [
    {
      "name": "button_component",
      "class_name": "Midwest::ButtonComponent",
      "category": "elements",
      "description": "Clickable button with variants, sizes, states, and icon support",
      "deprecated": false
    },
    ...
  ]
}

{
  "name": "button_component",
  "class_name": "Midwest::ButtonComponent",
  "description": "Clickable button with variants, sizes, states, and icon support",
  "file_path": "app/components/midwest/button_component.rb",
  "options": [
    {
      "name": "as",
      "type": "symbol",
      "default": ":link",
      "description": "HTML element type",
      "valid_values": ["link", "button", "submit", "reset", "span"]
    },
    {
      "name": "size",
      "type": "symbol",
      "default": ":default",
      "valid_values": ["large", "default", "small", "tiny"]
    },
    ...
  ],
  "slots": [
    {
      "name": "badge",
      "renders": "one",
      "component": "Midwest::BadgeComponent"
    }
  ],
  "public_methods": [
    {
      "name": "element_classes",
      "returns": "string",
      "description": "CSS classes for the button element"
    }
  ],
  "themes": ["gray", "red", "orange", "gold", "yellow", "green", "lime", "teal", "blue", "indigo", "violet", "magenta", "pink"],
  "states": ["error", "warning", "alert", "success", "info"]
}

{
  "component": "button_component",
  "examples": [
    {
      "source": "preview",
      "file": "demo/app/previews/elements/button_component_preview.rb",
      "name": "default",
      "description": "Minimum code needed to render a button",
      "code_haml": "= midwest_button 'Click me'",
      "code_erb": "<%= midwest_button 'Click me' %%%>",
      "code_html": "<a class=\"midwest-button variant-default size-default\">Click me</a>"
    },
    {
      "source": "preview",
      "file": "demo/app/previews/elements/button_component_preview.rb",
      "name": "playground",
      "description": "Dynamic preview with all options",
      "parameters": [
        {"name": "label", "type": "text", "default": "Click me"},
        {"name": "variant", "type": "select", "choices": ["default", "outline", "ghost"]},
        ...
      ]
    }
  ]
}

{
  "query": "form",
  "results": [
    {"component": "form_input", "relevance": 0.95},
    {"component": "form_select", "relevance": 0.90},
    {"component": "form_checkbox", "relevance": 0.85}
  ]
}

{
  "colors": {
    "themes": ["gray", "red", "orange", "gold", "yellow", "green", "lime", "teal", "blue", "indigo", "violet", "magenta", "pink"],
    "states": {
      "error": "red",
      "warning": "orange",
      "alert": "yellow",
      "success": "green",
      "info": "cyan"
    }
  },
  "spacing": {
    "padding": ["none", "sm", "default", "lg", "xl"],
    "sizes": ["xs", "sm", "default", "lg", "xl", "2xl"]
  },
  "icons": {
    "count": 1000,
    "source": "Material Design Icons",
    "available_at": "app/assets/icons/available-icons.yml"
  }
}

{
  "helpers": [
    {
      "name": "midwest_button",
      "component": "Midwest::ButtonComponent",
      "signature": "midwest_button(label = nil, path = '/', **options, &block)",
      "description": "Renders a button component"
    },
    {
      "name": "midwest_form_with",
      "signature": "midwest_form_with(builder: Midwest::FormBuilder, **args, &block)",
      "description": "Form builder with Midwest styling"
    },
    ...
  ]
}

{
  "valid": true,
  "warnings": [],
  "errors": [],
  "suggestions": [
    "Consider adding a tooltip for better accessibility"
  ]
}

{
  "component": "dialog_component",
  "role": "dialog",
  "required_aria": ["aria-labelledby", "aria-modal"],
  "keyboard": {
    "escape": "closes dialog",
    "tab": "traps focus within dialog",
    "shift_tab": "moves focus backward within dialog"
  },
  "screen_reader": "Announces dialog title on open, announces on close",
  "focus_management": "Moves focus to first interactive element on open",
  "testing_checks": [
    "Escape key closes dialog",
    "Focus is trapped while open",
    "Focus returns to trigger on close"
  ]
}

{
  "controllers": [
    {
      "name": "midwest-command-palette",
      "components": ["command_palette_component"],
      "values": {
        "hotkey": "String (default: 'k')",
        "src": "String (optional)",
        "items": "Array (optional)",
        "turboFrameUrl": "String (optional)"
      },
      "actions": ["open", "close", "select"],
      "targets": ["input", "list", "item"]
    }
  ]
}

{
  "from": "0.19.0",
  "to": "0.20.0",
  "breaking_changes": [
    {
      "component": "dropdown_component",
      "change": "removed 'direction' option",
      "replacement": "use 'position' option with 'top' or 'bottom' values",
      "example_before": "midwest_dropdown direction: :down",
      "example_after": "midwest_dropdown position: :bottom"
    }
  ],
  "deprecated": [
    {
      "component": "button_component",
      "option": "variant: :fab_mobile",
      "removed_in": "0.21.0",
      "use_instead": "variant: :fab with mobile_nav: true"
    }
  ]
}

{
  "component": "button_component",
  "composes_with": ["tooltip_component", "confirmation_component", "badge_component"],
  "composed_by": ["button_group_component", "split_button_component"],
  "common_patterns": [
    "Use inside a form_field_group for proper spacing",
    "Combine with tooltip for help text",
    "Add confirmation for destructive actions"
  ],
  "alternatives": ["link_component", "split_button_component"],
  "related_components": ["button_group_component", "dropdown_component"]
}

{
  "form_builder": "Midwest::FormBuilder",
  "methods": [
    {
      "name": "input",
      "component": "Midwest::Form::InputComponent",
      "signature": "input(attribute, **options)"
    },
    {
      "name": "select",
      "component": "Midwest::Form::SelectComponent",
      "signature": "select(attribute, choices, **options)"
    }
  ],
  "wrapper": "form_field_group required for proper labeling and validation display"
}

{
  "name": "button_component",
  "class_name": "Midwest::ButtonComponent",
  "description": "Clickable button with variants, sizes, states, and icon support",
  "file_path": "app/components/midwest/button_component.rb",
  "options": [...],
  "slots": [...],
  "public_methods": [...],
  "themes": ["gray", "red", ...],
  "states": ["error", "warning", ...],
  // NEW: Component Library Specific
  "renders": {
    "html_element": "a",
    "default_classes": ["midwest-button", "variant-default", "size-default"],
    "css_selector": "a.midwest-button",
    "tag_variants": {
      "link": "a",
      "button": "button",
      "submit": "button[type=submit]",
      "span": "span"
    }
  },
  "stimulus": {
    "controllers": ["midwest-form"],
    "classes": ["loading"],
    "targets": []
  },
  "variants": {
    "valid_combinations": ["default + any size", "outline + any size"],
    "invalid_combinations": ["fab + large", "tab-vertical + outline"]
  },
  "form_builder": {
    "supported": false,
    "use_instead": "form_submit component"
  },
  "responsive": {
    "behavior": "static",
    "breakpoints": []
  },
  "performance": {
    "javascript": false,
    "external_deps": [],
    "lazy_loading": false
  }
}

{
  "component": "button_component",
  "examples": [
    {
      "name": "default",
      "description": "Simple button",
      "templates": {
        "haml": "= midwest_button 'Click me'",
        "erb": "<%= midwest_button 'Click me' %%>",
        "ruby": "helpers.midwest_button('Click me')",
        "html_output": "<a class=\"midwest-button variant-default size-default\">Click me</a>"
      }
    },
    {
      "name": "with_icon",
      "description": "Button with icon",
      "templates": {
        "haml": "= midwest_button 'Save', icon: :check, variant: :primary",
        "erb": "<%= midwest_button 'Save', icon: :check, variant: :primary %%>"
      }
    }
  ]
}

{
  "component": "dialog_component",
  "warnings": [
    "Don't nest dialogs — browser behavior is undefined",
    "Always provide an accessible name via aria-labelledby or title slot",
    "Ensure dialog trigger has popovertarget attribute set"
  ],
  "common_mistakes": [
    {
      "mistake": "Using multiple dialogs with same ID",
      "fix": "Always provide unique id: option for each dialog"
    },
    {
      "mistake": "Forgetting to close dialog on form submit",
      "fix": "Add data-action='submit->dialog#close' to form"
    }
  ]
}

{
  "colors": {
    "themes": {
      "indigo": {
        "css_var": "--theme-500",
        "hex": "#7c3aed",
        "usage": "Primary actions, links, emphasis"
      }
    },
    "states": {
      "error": {
        "color": "red",
        "css_var": "--error-500",
        "usage": "Form validation, error messages, destructive actions"
      }
    },
    "semantic_mapping": {
      "primary": "indigo",
      "danger": "red",
      "warning": "orange",
      "success": "green"
    }
  },
  "spacing": {
    "scale": ["none", "xs", "sm", "default", "lg", "xl", "2xl"],
    "usage": {
      "none": "Remove default padding",
      "sm": "Compact layouts",
      "default": "Standard spacing",
      "lg": "More breathing room",
      "xl": "Section separation"
    }
  }
}

components:
  button_component:
    class: Midwest::ButtonComponent
    category: elements
    summary: Clickable button with variants
    tags: [form, action, interactive]
    related: [button_group, split_button]

version: "0.20.1"
framework: view_component
dependencies:
  - rails >= 5.0.0
  - view_component >= 3.20.0
  - stimulus

midwest/
├── app/
│   └── components/midwest/           # Component sources (parsed by MCP)
├── lib/
│   ├── midwest/
│   │   ├── engine.rb
│   │   ├── version.rb
│   │   └── mcp/                      # MCP server integrated here
│   │       ├── server.rb             # Main MCP server class
│   │       ├── tools/
│   │       │   ├── list_components.rb
│   │       │   ├── get_component_api.rb
│   │       │   ├── get_component_examples.rb
│   │       │   ├── search_components.rb
│   │       │   ├── get_design_tokens.rb
│   │       │   ├── get_helper_methods.rb
│   │       │   ├── validate_component_usage.rb
│   │       │   ├── get_accessibility_info.rb
│   │       │   ├── get_stimulus_controllers.rb
│   │       │   ├── get_migration_guide.rb
│   │       │   ├── get_component_relationships.rb
│   │       │   ├── get_form_builder_info.rb
│   │       │   ├── suggest_components.rb       # Context-aware suggestions
│   │       │   ├── diagnose_component.rb       # Debug/error diagnosis
│   │       │   └── get_responsive_info.rb     # Breakpoint patterns
│   │       ├── resources/
│   │       │   ├── component_catalog.rb
│   │       │   ├── design_system.rb
│   │       │   ├── migration_history.rb
│   │       │   └── responsive_tokens.rb        # Breakpoint system
│   │       ├── parsers/
│   │       │   ├── component_parser.rb        # Parse component files
│   │       │   ├── option_parser.rb           # Extract option definitions
│   │       │   ├── slot_parser.rb             # Extract renders_one/many
│   │       │   ├── preview_parser.rb          # Parse preview files
│   │       │   ├── stimulus_parser.rb         # Extract Stimulus controller info
│   │       │   ├── accessibility_parser.rb    # Extract ARIA/keyboard patterns
│   │       │   ├── template_parser.rb         # Parse and convert template syntax
│   │       │   ├── form_builder_parser.rb     # Parse FormBuilder integration
│   │       │   ├── changelog_parser.rb        # Parse CHANGELOG for migrations
│   │       │   ├── asset_parser.rb            # Extract JS/CSS dependencies
│   │       │   └── validation_parser.rb        # Parse validation patterns
│   │       ├── index/
│   │       │   ├── component_index.rb          # In-memory component index
│   │       │   ├── search_index.rb            # Search functionality
│   │       │   ├── relationship_index.rb      # Component relationships
│   │       │   └── framework_index.rb         # Rails vs Bridgetown support
│   │       ├── lookbook/                      # Lookbook integration
│   │       │   ├── extension.rb                # Lookbook panel extension
│   │       │   ├── preview_generator.rb       # Auto-generate preview files
│   │       │   └── panel_renderer.rb          # API panel template
│   │       ├── cli/
│   │       │   ├── docs_generator.rb          # Static docs generation
│   │       │   ├── lookbook_sync.rb           # Sync with Lookbook
│   │       │   └── validate.rb                # Validate docs vs code
│   │       └── templates/
│   │           └── code_generator.rb           # Code generation prompts
├── app/
│   └── views/
│       └── components/
│           └── midwest/
│               └── lookbook/
│                   └── _api_panel.erb         # Lookbook API panel
├── exe/
│   └── midwest_mcp                       # Executable entry point
├── demo/
│   └── app/previews/                     # Usage examples (parsed by MCP)
├── Gemfile
├── midwest.gemspec
└── bin/release                           # Updated to include MCP

# lib/midwest/mcp/index/component_index.rb
module Midwest
  module MCP
    class ComponentIndex
      def initialize
        @gem_spec = Gem::Specification.find_by_name('midwest')
        @gem_root = @gem_spec.gem_dir
      end
      def component_files
        @component_files ||= Dir[
          File.join(@gem_root, 'app', 'components', 'midwest', '**', '*_component.rb')
        ]
      end
      def preview_files
        @preview_files ||= Dir[
          File.join(@gem_root, 'demo', 'app', 'previews', '**', '*_preview.rb')
        ]
      end
    end
  end
end

{
  "file_path": "app/views/users/_form.html.haml",
  "surrounding_code": "= midwest_form_with @user do |f|\n  = f.input :name",
  "cursor_position": 42
}

{
  "suggestions": [
    {
      "component": "form_input",
      "helper": "f.input",
      "reason": "Continues form pattern, matches FormBuilder usage"
    },
    {
      "component": "form_select",
      "helper": "f.select",
      "reason": "Common form input type"
    },
    {
      "component": "form_field_group",
      "helper": "f.field_group",
      "reason": "Wraps related form fields"
    }
  ],
  "context": {
    "in_form_builder": true,
    "form_object": "@user",
    "template_language": "haml"
  }
}

require 'mcp/sdk'
require_relative 'midwest_mcp/server'
server = MidwestMCP::Server.new
server.run

# Standard release process (unchanged)
$ bin/release 0.21.0
# This now also:
# 1. Builds the gem with MCP server included
# 2. Pushes to RubyGems with MCP server available
# 3. Updates version info in MCP server responses

# midwest.gemspec
spec.add_dependency 'mcp-sdk', '~> 1.0'  # Lightweight dependency
spec.executables << 'midwest_mcp'        # Expose executable

# Gemfile
gem 'midwest', '~> 0.21.0'

// ~/.claude/settings.json or .clauderc
{
  "mcpServers": {
    "midwest": {
      "command": "midwest_mcp"
    }
  }
}

{
  "mcpServers": {
    "midwest": {
      "command": "bundle",
      "args": ["exec", "midwest_mcp"],
      "cwd": "/path/to/midwest"
    }
  }
}

# From the Midwest repo
$ bundle exec midwest_mcp
# Server starts on stdio, ready for MCP protocol communication

{
  "server_info": {
    "name": "midwest",
    "version": "0.21.0",
    "midwest_version": "0.21.0"
  }
}

Component Code → MCP Parser → Metadata → Lookbook UI
                                              ↓
                                        Preview Panels
                                        API Documentation
                                        Interactive Params

# lib/midwest/lookbook_extension.rb
module Midwest
  module LookbookExtension
    # Inject API docs panel into Lookbook
    def self.register
      Lookbook.addEventListener(:panel, :component) do |panel|
        panel.add(:midwest_api, "Midwest API", position: 0) do
          render "midwest/lookbook/api_panel",
            component: panel.component_name,
            metadata: Midwest::MCP::ComponentIndex.find(panel.component_name)
        end
      end
    end
  end
end

<% app/views/components/midwest/lookbook/_api_panel.erb %%>
<div class="midwest-api-panel">
  <h3><%= @metadata[:class_name] %%></h3>
  <p><%= @metadata[:description] %%></p>
  <section>
    <h4>Options</h4>
    <table>
      <% @metadata[:options].each do |opt| %%>
        <tr>
          <td><code><%= opt[:name] %%></code></td>
          <td><%= opt[:type] %%></td>
          <td><%= opt[:default] %%></td>
          <td><%= opt[:description] %%></td>
        </tr>
      <% end %%>
    </table>
  </section>
  <section>
    <h4>Slots</h4>
    <% @metadata[:slots].each do |slot| %%>
      <div>
        <code><%= slot[:name] %%></code> (<%= slot[:renders] %%>)
        <%= slot[:component] %%>
      </div>
    <% end %%>
  </section>
  <section>
    <h4>Accessibility</h4>
    <ul>
      <% @metadata[:accessibility][:keyboard].each do |key, action| %%>
        <li><code><%= key %%></code>: <%= action %%></li>
      <% end %%>
    </ul>
  </section>
  <section>
    <h4>Stimulus Controllers</h4>
    <% @metadata[:stimulus][:controllers].each do |controller| %%>
      <div>
        <code>data-controller="<%= controller %%>"</code>
      </div>
    <% end %%>
  </section>
</div>

# Generate preview files from parsed metadata
$ bundle exec midwest_mcp lookbook:generate
# Creates:
# - demo/app/previews/elements/{component}_preview.rb
# - demo/app/previews/elements/{component}_preview.html.haml

# demo/app/previews/elements/button_component_preview.rb (auto-generated)
# DO NOT EDIT - Generated by Midwest MCP from component source
# To modify, edit app/components/midwest/button_component.rb or add custom previews below
module Elements
  class ButtonComponentPreview < ViewComponent::Preview
    # @!group Component API
    # Button component with variants, sizes, and states.
    #
    # **Options:**
    # - `as` (Symbol): HTML element type - default: `:link`
    # - `size` (Symbol): Size variant - default: `:default`
    # - `variant` (Symbol): Visual style - default: `:default`
    # - `state` (Symbol): Semantic state - default: `:default`
    # - `icon` (Symbol): Optional icon name
    # - `loading` (Boolean): Show loading state
    #
    # **Slots:**
    # - `badge`: BadgeComponent for notification counts
    #
    # **Accessibility:**
    # - Keyboard: Full keyboard navigation
    # - ARIA: Proper labels required when icon-only
    # @!endgroup
    # @param label text "Button label"
    # @param size select { choices: [large, default, small, tiny] }
    # @param variant select { choices: [default, outline, ghost, fab] }
    # @param state select { choices: [default, error, warning, alert, success, info] }
    # @param icon select :icon_options
    # @param loading toggle
    def playground(label: 'Click me', size: 'default', variant: 'default', state: 'default', icon: nil, loading: false); end
    # @!group Custom Previews
    # Add custom previews below this line
    # These will be preserved on regeneration
    # --- Custom previews start ---
    # --- Custom previews end ---
  end
end

# Regenerate docs from code
$ bundle exec midwest_mcp lookbook:sync

# Validate docs match code
$ bundle exec midwest_mcp lookbook:validate

# config/initializers/midwest.rb
Midwest::Lookbook.configure do |config|
  config.auto_sync = true              # Regenerate on file change
  config.validate_previews = true      # Warn if preview out of sync
  config.include_source_link = true    # Link to component source
  config.include_examples = true       # Show usage examples
  config.show_accessibility = true     # Include a11y panel
  config.show_stimulus = true         # Include Stimulus panel
end

{
  "component": "button_component",
  "lookbook": {
    "url": "/rails/lookbook/inspect/elements/button/playground",
    "embed_url": "/rails/lookbook/inspect/elements/button/playground?preview=1"
  }
}

### Version Alignment
The MCP server automatically reports the Midwest version it's serving:
```json
{
  "server_info": {
    "name": "midwest",
    "version": "0.21.0",
    "midwest_version": "0.21.0"
  }
}

# 1. Add Midwest to Gemfile
gem 'midwest', '~> 0.21.0'
# 2. Bundle install
$ bundle install
# 3. Configure Claude Code
$ cat ~/.claude/settings.json
{
  "mcpServers": {
    "midwest": {
      "command": "bundle",
      "args": ["exec", "midwest_mcp"],
      "cwd": "/path/to/your/rails/app"
    }
  }
}
# 4. Start Claude Code in your project
$ claude-code
# 5. Ask about components!

{
  "mcpServers": {
    "midwest-app1": {
      "command": "bundle",
      "args": ["exec", "midwest_mcp"],
      "cwd": "/path/to/app1"
    },
    "midwest-app2": {
      "command": "bundle",
      "args": ["exec", "midwest_mcp"],
      "cwd": "/path/to/app2"
    }
  }
}

# app/components/midwest/dialog_component.rb
module Midwest
  class DialogComponent < BaseComponent
    # @mcp.warning Don't nest dialogs — browser behavior is undefined
    # @mcp.warning Always provide an accessible name via aria-labelledby or title slot
    # @mcp.keyboard Escape key closes dialog, focus is trapped
    # @mcp.aria_role dialog
    # @mcp.required_aria aria-labelledby, aria-modal
  end
end

# app/components/midwest/dialog_component.mcp.yml
warnings:
  - "Don't nest dialogs — browser behavior is undefined"
  - "Always provide an accessible name via aria-labelledby or title slot"
common_mistakes:
  - mistake: "Using multiple dialogs with same ID"
    fix: "Always provide unique id: option for each dialog"
keyboard:
  escape: "closes dialog"
  tab: "moves focus within dialog (trapped)"
aria:
  role: "dialog"
  required: ["aria-labelledby", "aria-modal"]

# CHANGELOG.md (parsed by MCP)
---
## 0.20.0 (2025-01-15)
### Breaking Changes
- **dropdown_component**: Removed `direction` option. Use `position` with 'top' or 'bottom' instead.
- **button_component**: Renamed `variant: :fab_mobile` to `variant: :fab` with `mobile_nav: true`
### Deprecated
- **form_input**: `inline` option is deprecated and will be removed in 0.21.0. Use field_group layout instead.

# lib/midwest/mcp/parsers/migration_parser.rb
module Midwest
  module MCP
    class MigrationParser
      def detect_breaking_changes(from_tag, to_tag)
        # Compare option definitions between versions
        # Identify removed options, renamed slots, etc.
        # Generate migration suggestions
      end
    end
  end
end

# lib/midwest/mcp/index/relationship_index.rb
module Midwest
  module MCP
    class RelationshipIndex
      def build_graph
        components.each do |component|
          component.slots.each do |slot|
            add_edge(component.name, slot.component, type: :composes_with)
          end
        end
        # Detect reverse relationships
        components.each do |component|
          component.uses.each do |used_component|
            add_edge(used_component, component.name, type: :composed_by)
          end
        end
      end
    end
  end
end

{
  "$id": "component",
  "type": "object",
  "properties": {
    "name": { "type": "string" },
    "class_name": { "type": "string" },
    "category": { "type": "string", "enum": ["elements", "patterns", "form"] },
    "description": { "type": "string" },
    "file_path": { "type": "string" },
    "deprecated": { "type": "boolean" },
    "options": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "type": { "type": "string" },
          "default": { },
          "description": { "type": "string" },
          "valid_values": { "type": "array", "items": { "type": "string" } }
        }
      }
    },
    "slots": {
      "type": "array",
      "items": {
        "type": "object",
        "properties": {
          "name": { "type": "string" },
          "renders": { "type": "string", "enum": ["one", "many"] },
          "component": { "type": "string" }
        }
      }
    }
  }
}

#!/bin/bash
VERSION=$1
# Existing steps...
git tag -s "v$VERSION" -m "Version $VERSION"
git push origin "v$VERSION"
gem build midwest.gemspec
gem push "midwest-$VERSION.gem"
# MCP server is automatically included in the gem build
# No separate release needed!

# lib/midwest/version.rb
module Midwest
  VERSION = '0.21.0'
end
# lib/midwest/mcp/server.rb automatically uses this
def server_version
  Midwest::VERSION
end

{
  "component": "button_component",
  "frameworks": {
    "rails": {
      "supported": true,
      "helper": "midwest_button",
      "integration": "Automatic via Midwest::Engine"
    },
    "bridgetown": {
      "supported": true,
      "helper": "midwest_button",
      "integration": "Requires Midwest::Helpers in site config"
    }
  }
}

{
  "component": "chart_component",
  "assets": {
    "javascript": ["Chart.js"],
    "css": [],
    "stimulus_controllers": ["midwest-chart"],
    "turbo_frames": false,
    "external_cdn": "https://cdn.jsdelivr.net/npm/chart.js"
  },
  "performance_impact": "high",
  "lazy_loading_supported": true
}

{
  "form_validation": {
    "pattern": "Shopify-style field errors",
    "error_display": "error state on wrapper + error message below",
    "integration": {
      "rails": "works with ActiveModel validations",
      "custom": "pass errors: hash or use error slot"
    },
    "states": ["error", "warning", "success"],
    "example": {
      "valid": "field_group with state: :error",
      "error_message": "use errors slot or manual message"
    }
  }
}

{
  "responsive": {
    "breakpoints": {
      "sm": "640px",
      "md": "768px",
      "lg": "1024px",
      "xl": "1280px",
      "2xl": "1536px"
    },
    "mobile_first": true,
    "prefix": "midwest",
    "components_with_breakpoints": ["mobile_nav", "grid", "table"]
  }
}

{
  "component": "experimental_feature",
  "status": {
    "stability": "alpha",
    "as_of": "0.21.0",
    "expected_stable": "0.23.0",
    "breaking_changes_likely": true,
    "feedback_requested": true
  }
}

{
  "component": "card_component",
  "customization": {
    "allowed": [
      "CSS variables via --theme-* overrides",
      "padding option (none, sm, default, lg, xl)",
      "class attribute for custom classes"
    ],
    "discouraged": [
      "Direct CSS targeting of .midwest-card internals",
      "Modifying slot structure"
    ],
    "extension_points": [
      "header slot",
      "footer slot",
      "section slot"
    ]
  }
}

{
  "tool": "diagnose_component",
  "component": "dialog_component",
  "symptoms": ["dialog doesn't open on click"],
  "checks": [
    "Verify popovertarget attribute matches dialog id",
    "Check if another popover is already open",
    "Ensure dialog_id is unique on page",
    "Confirm Stimulus controller is mounted"
  ],
  "common_fixes": [
    "Add popovertarget='{dialog_id}' to trigger button",
    "Close existing dialogs before opening new one"
  ]
}

{
  "component": "dialog_component",
  "animations": {
    "open": "fade-in + scale",
    "close": "fade-out + scale",
    "duration": "200ms",
    "easing": "ease-out",
    "customizable": "via CSS variables --dialog-animation-*",
    "respect_prefers_reduced_motion": true
  }
}

{
  "component": "pagination_component",
  "i18n": {
    "supported": true,
    "keys": ["previous", "next", "page_x_of_y", "per_page"],
    "rails_integration": "I18n.t('midwest.pagination.*')",
    "custom_translation": "pass labels: hash option",
    "rtl_support": true
  }
}

# Export design tokens for Figma, Sketch, etc.
$ bundle exec midwest_mcp tokens:export --format json --output tokens.json
$ bundle exec midwest_mcp tokens:export --format css --output tokens.css
$ bundle exec midwest_mcp tokens:export --format scss --output tokens.scss

{
  "graph": {
    "nodes": ["button", "button_group", "tooltip", "confirmation", "badge"],
    "edges": [
      {"from": "button", "to": "tooltip", "type": "composes_with"},
      {"from": "button", "to": "confirmation", "type": "wraps"},
      {"from": "button", "to": "badge", "type": "renders_slot"},
      {"from": "button_group", "to": "button", "type": "contains_many"}
    ]
  }
}

{
  "component": "form_component",
  "turbo": {
    "supported": true,
    "patterns": [
      "Turbo Frames for pagination",
      "Turbo Streams for form submission",
      "Turbo Channels for real-time updates"
    ],
    "examples": [
      "table with infinite scroll",
      "form with turbo_stream response"
    ]
  }
}

# midwest.gemspec - Updated for MCP support
spec.name = 'midwest'
spec.version = Midwest::VERSION
spec.authors = ['William A. Nova']
spec.email = ['will@unabridgedsoftware.com']
spec.homepage = 'https://github.com/unabridgedsoftware/midwest'
spec.summary = 'ViewComponents for Midwest Design System'
spec.license = 'MIT'
# MCP dependency - lightweight, only needed when running the server
spec.add_dependency 'mcp-sdk', '~> 1.0', optional: true
# Existing dependencies
spec.add_dependency 'opt_struct'
spec.add_dependency 'rails', '>= 5.0.0'
spec.add_dependency 'view_component', '>= 3.20.0'
# Expose MCP executable
spec.executables << 'midwest_mcp'
# Include MCP server files
spec.files += Dir['lib/midwest/mcp/**/*.rb']
spec.files += Dir['exe/midwest_mcp']

# For Rails apps (no MCP needed)
gem 'midwest'  # Works fine without mcp-sdk
# For Claude Code users (needs MCP)
gem 'midwest'
gem 'mcp-sdk'  # Or let bundler install it when running midwest_mcp