update mcp to use fastmcp and make docs have component preview

Author: deeleeramone

pywry/AGENTS.md

@@ -969,6 +969,24 @@ app.on("toolbar:state-response", on_state)
 # Set single component value
 app.emit("toolbar:set-value", {"componentId": "my-select", "value": "option2"}, label)
 
+# Set value with attributes (label, disabled, etc.)
+app.emit("toolbar:set-value", {
+    "componentId": "submit-btn",
+    "label": "Saving...",
+    "disabled": True
+}, label)
+
+# Update dropdown options dynamically
+app.emit("toolbar:set-value", {
+    "componentId": "type-select",
+    "value": "bar",
+    "options": [{"label": "Bar", "value": "bar"}, {"label": "Line", "value": "line"}]
+}, label)
+
+# Or use widget method (recommended)
+widget.set_toolbar_value("submit-btn", label="Saving...", disabled=True)
+widget.set_toolbar_value("type-select", value="bar", options=[...])
+
 # Set multiple values
 app.emit("toolbar:set-values", {"values": {"select-1": "A", "toggle-1": True}}, label)
 ```

pywry/README.md

@@ -2289,7 +2289,7 @@ These events are emitted automatically when users interact with toolbar chrome:
 |-------|-----------|---------|-------------|
 | `toolbar:state-response` | JS → Python | `{ toolbars, components, timestamp, context? }` | Response to state request |
 | `toolbar:request-state` | Python → JS | `{ toolbarId?, componentId?, context? }` | Request current state |
-| `toolbar:set-value` | Python → JS | `{ componentId, value, toolbarId? }` | Set single component value |
+| `toolbar:set-value` | Python → JS | `{ componentId, value?, label?, disabled?, ...attrs }` | Set component value and/or attributes |
 | `toolbar:set-values` | Python → JS | `{ values: { id: value, ... }, toolbarId? }` | Set multiple component values |
 
 #### Marquee Events
@@ -4244,6 +4244,45 @@ handle = app.show(
 )
 ```
 
+**Setting Component Attributes** (labels, disabled state, etc.):
+
+```python
+def on_submit(data, event_type, label):
+    """Show loading state then re-enable."""
+    # Update button label and disable
+    handle.set_toolbar_value("submit-btn", label="Saving...", disabled=True)
+    
+    # ... do work ...
+    
+    # Re-enable with original label
+    handle.set_toolbar_value("submit-btn", label="Submit", disabled=False)
+
+def on_category_change(data, event_type, label):
+    """Update dropdown options dynamically."""
+    category = data.get("value")
+    if category == "fruits":
+        options = [{"label": "Apple", "value": "apple"}, {"label": "Banana", "value": "banana"}]
+    else:
+        options = [{"label": "Carrot", "value": "carrot"}, {"label": "Broccoli", "value": "broccoli"}]
+    
+    handle.set_toolbar_value("item-select", value=options[0]["value"], options=options)
+```
+
+Supported attributes for `set_toolbar_value()`:
+
+| Attribute | Description | Example |
+|-----------|-------------|---------|
+| `value` | Component value | `value="dark"` |
+| `label`/`text` | Text content | `label="Loading..."` |
+| `disabled` | Enable/disable | `disabled=True` |
+| `variant` | Button style | `variant="danger"` |
+| `tooltip`/`description` | Hover text | `tooltip="Click to save"` |
+| `options` | Dropdown options | `options=[{"label": "A", "value": "a"}]` |
+| `style` | Inline CSS | `style={"color": "red"}` |
+| `className` | CSS classes | `className={"add": ["active"]}` |
+| `placeholder` | Input hint | `placeholder="Search..."` |
+| `min`/`max`/`step` | Input constraints | `min=0, max=100` |
+
 </details>
 
 <details>

pywry/docs/docs/components/button.md

@@ -20,14 +20,30 @@ Buttons support typical styles via the `variant` parameter:
 ["primary", "secondary", "neutral", "outline", "ghost", "danger", "warning", "icon"]
 ```
 
-<img width="500" height="40" alt="Button Variants - Dark" src="https://github.com/user-attachments/assets/ded61da3-e06a-40fd-b07a-55a7671bae4b" />
-<img width="500" height="40" alt="Button Variants - Light" src="https://github.com/user-attachments/assets/d746890b-ffc7-486d-85c5-a34b29960c98" />
+<div class="component-preview center">
+  <button class="pywry-btn pywry-toolbar-button" data-event="demo:primary">Primary</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-secondary" data-event="demo:secondary">Secondary</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral" data-event="demo:neutral">Neutral</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-ghost" data-event="demo:ghost">Ghost</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-outline" data-event="demo:outline">Outline</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-danger" data-event="demo:danger">Danger</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-warning" data-event="demo:warning">Warning</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-icon" 
+  style="font-size: 32px;"
+  data-event="demo:icon">⚙\ufe0e</button>
+</div>
 
 ## Sizes
 
 Button sizes can be defined by presets, or can be overriden by supplying the `style` initialization parameter.
 
-<img width="300" height="60" alt="Button Sizes" src="https://github.com/user-attachments/assets/e2f8ce04-c38e-4655-8ba5-5ff846094f60" />
+<div class="component-preview center">
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral pywry-btn-xs" data-event="demo:xs">XS</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral pywry-btn-sm" data-event="demo:sm">SM</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral" data-event="demo:default">Default</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral pywry-btn-lg" data-event="demo:lg">LG</button>
+  <button class="pywry-btn pywry-toolbar-button pywry-btn-neutral pywry-btn-xl" data-event="demo:xl">XL</button>
+</div>
 
 ## Icons
 
@@ -70,6 +86,16 @@ data : dict
     Additional data payload to include with the event.
 ```
 
+## Events
+
+Emits the `event` name with payload:
+
+```json
+{"componentId": "button-abc123"}
+```
+
+Any additional key/value pairs from the `data` parameter are merged into the payload.
+
 ## Handling Clicks
 
 Connect button clicks to Python callbacks:
@@ -79,7 +105,7 @@ from pywry import PyWry, Toolbar, Button
 
 def on_save(data, event_type, label):
     """Handle save button click."""
-    # data contains {"clicked": True} for buttons
+    # data contains {"componentId": "..."} plus any custom data keys
     # Perform your save operation here
     app.emit("pywry:alert", {"message": "Saved!", "type": "success"}, label)
 
@@ -96,7 +122,9 @@ app.show(
 ### Confirmation Dialog
 
 ```python
-from pywry import Button
+from pywry import PyWry, Toolbar, Button
+
+app = PyWry()
 
 def show_confirm(data, event_type, label):
     """Show a confirmation dialog before destructive action."""
@@ -112,39 +140,49 @@ def on_delete_confirmed(data, event_type, label):
         # Perform delete and show success
         app.emit("pywry:alert", {"message": "Deleted!", "type": "success"}, label)
 
-delete_btn = Button(
-    label="🗑️ Delete",
-    event="action:delete",
-    variant="danger",
+app.show(
+    "<h1>My Document</h1><p>Click delete to remove.</p>",
+    toolbars=[
+        Toolbar(position="top", items=[
+            Button(label="🗑️ Delete", event="action:delete", variant="danger")
+        ])
+    ],
+    callbacks={
+        "action:delete": show_confirm,
+        "delete:confirmed": on_delete_confirmed,
+    },
 )
-
-# Register callbacks
-callbacks = {
-    "action:delete": show_confirm,
-    "delete:confirmed": on_delete_confirmed,
-}
 ```
 
 ### Toggle State Buttons
 
 ```python
-from pywry import Button
+from pywry import PyWry, Toolbar, Button
 
+app = PyWry()
 current_state = {"playing": False}
 
 def on_toggle(data, event_type, label):
     is_playing = not current_state["playing"]
     current_state["playing"] = is_playing
     # Update button label dynamically
-    widget.emit("toolbar:set-value", {
+    app.emit("toolbar:set-value", {
         "componentId": "play-btn",
         "label": "⏸️ Pause" if is_playing else "▶️ Play"
-    })
+    }, label)
 
-play_btn = Button(
-    component_id="play-btn",  # Required for dynamic updates
-    label="▶️ Play",
-    event="media:toggle",
+app.show(
+    "<h1>Media Player</h1>",
+    toolbars=[
+        Toolbar(position="top", items=[
+            Button(
+                component_id="play-btn",  # Required for dynamic updates
+                label="▶️ Play",
+                event="media:toggle",
+            )
+        ])
+    ],
+    callbacks={"media:toggle": on_toggle},
 )
 ```
 

pywry/docs/docs/components/checkbox.md

@@ -2,6 +2,20 @@
 
 A checkable box for boolean selections, typically used in forms.
 
+<div class="component-preview">
+  <label class="pywry-checkbox">
+    <input type="checkbox" class="pywry-checkbox-input" checked>
+    <span class="pywry-checkbox-box"></span>
+    <span class="pywry-checkbox-label">Checked</span>
+  </label>
+  <span class="preview-sep"></span>
+  <label class="pywry-checkbox">
+    <input type="checkbox" class="pywry-checkbox-input">
+    <span class="pywry-checkbox-box"></span>
+    <span class="pywry-checkbox-label">Unchecked</span>
+  </label>
+</div>
+
 ## Basic Usage
 
 ```python
@@ -19,32 +33,39 @@ agree = Checkbox(
 ### Form Agreement
 
 ```python
-from pywry import Toolbar, Checkbox, Button
+from pywry import PyWry, Toolbar, Checkbox, Button
+
+app = PyWry()
 
 def on_agree_change(data, event_type, label):
     agreed = data["value"]
-    
     # Enable/disable submit button based on agreement
-    widget.emit("toolbar:set-value", {
+    app.emit("toolbar:set-value", {
         "componentId": "submit-btn",
         "disabled": not agreed
-    })
-
-form_toolbar = Toolbar(
-    position="bottom",
-    items=[
-        Checkbox(
-            label="I agree to the terms and conditions",
-            event="form:agree",
-        ),
-        Button(
-            component_id="submit-btn",
-            label="Submit",
-            event="form:submit",
-            variant="primary",
-            disabled=True,  # Initially disabled
-        ),
+    }, label)
+
+def on_submit(data, event_type, label):
+    app.emit("pywry:alert", {"message": "Form submitted!", "type": "success"}, label)
+
+app.show(
+    "<h1>Sign Up</h1><p>Please agree to continue.</p>",
+    toolbars=[
+        Toolbar(position="bottom", items=[
+            Checkbox(label="I agree to the terms and conditions", event="form:agree"),
+            Button(
+                component_id="submit-btn",
+                label="Submit",
+                event="form:submit",
+                variant="primary",
+                disabled=True,  # Initially disabled
+            ),
+        ])
     ],
+    callbacks={
+        "form:agree": on_agree_change,
+        "form:submit": on_submit,
+    },
 )
 ```
 
@@ -67,33 +88,74 @@ features_toolbar = Toolbar(
 ### Select All Pattern
 
 ```python
-from pywry import Toolbar, Checkbox
+from pywry import PyWry, Toolbar, Checkbox
 
-items = [{"id": 1, "name": "Item A"}, {"id": 2, "name": "Item B"}]
+app = PyWry()
+items = [{"id": 1, "name": "Item A"}, {"id": 2, "name": "Item B"}, {"id": 3, "name": "Item C"}]
 
 def on_select_all(data, event_type, label):
     select_all = data["value"]
-    
     # Update all child checkboxes
     for item in items:
-        widget.emit("toolbar:set-value", {
+        app.emit("toolbar:set-value", {
             "componentId": f"item-{item['id']}",
             "value": select_all
-        })
-
-toolbar = Toolbar(
-    position="top",
-    items=[
-        Checkbox(label="Select All", event="items:select_all"),
-        *[Checkbox(
-            component_id=f"item-{item['id']}",
-            label=item['name'],
-            event=f"item:select:{item['id']}"
-        ) for item in items],
+        }, label)
+
+def on_item_select(data, event_type, label):
+    app.emit("pywry:alert", {
+        "message": f"Item selected: {data.get('value')}",
+        "type": "info"
+    }, label)
+
+app.show(
+    "<h1>Select Items</h1>",
+    toolbars=[
+        Toolbar(position="top", items=[
+            Checkbox(label="Select All", event="items:select_all"),
+            *[Checkbox(
+                component_id=f"item-{item['id']}",
+                label=item['name'],
+                event="item:select"
+            ) for item in items],
+        ])
     ],
+    callbacks={
+        "items:select_all": on_select_all,
+        "item:select": on_item_select,
+    },
 )
 ```
 
+## Attributes
+
+```
+component_id : str | None
+    Unique identifier for state tracking (auto-generated if not provided)
+label : str | None
+    Display label shown next to the checkbox
+description : str | None
+    Tooltip/hover text for accessibility and user guidance
+event : str
+    Event name emitted on interaction (format: namespace:event-name)
+style : str | None
+    Optional inline CSS
+disabled : bool
+    Whether the checkbox is disabled (default: False)
+value : bool
+    Current checked state (default: False)
+```
+
+## Events
+
+Emits the `event` name with payload:
+
+```json
+{"value": true, "componentId": "checkbox-abc123"}
+```
+
+- `value` — `true` when checked, `false` when unchecked
+
 ## Checkbox vs Toggle
 
 | Component | Visual | Use Case |