@exponential_app/eui 0.0.0-stage → 0.2.0

package/fixtures/kitchen-sink.json

@@ -0,0 +1,3140 @@
+{
+  "$comment": "VAPP-85: the kitchen sink, extended from the VAPP-4 spike (packages/domain-contract/fixtures/vapp-kitchen-sink.json on exp/VAPP-4) to the FULL core catalog: every visible component at least once, in the nested authoring form (id, component, props, style, children, slots, on). The spike's layout cases stay: flex rows/columns with wrap + grow/shrink/basis, a grid with gridTemplateAreas + fr + minmax and a 600 px surface breakpoint, an absolute badge overlay, 16:9 media, min/max + percentages + gap, :pressed buttons. Every renderer paints this once as the view `exponential-ui-kitchen-sink`; kitchen-sink.expanded.json is what it receives. Round 1 (docs/round-1-contract.md) adds the app shell (AppBar, Breadcrumb, the bottom bar), a RESPONSIVE section every renderer must prove at three widths (a Grid of cards 1 → 2 → 3 columns via a responsive `columns`, a Sidebar that collapses below md, a Stack that turns horizontal at md, nodes hidden on narrow or on wide surfaces, hover/focus-visible/orientation/hover-capability blocks, a Drawer whose side is responsive), a Form of the new fields, the data Table with typed, sortable, selectable columns and a slot cell, the new chart kinds, the CodeBlock, the overlay newcomers and BOUND inputs (Collapsible open, Pagination page, the bottom bar value, Progress value: two-way through the `set` action). Round 3 (VAPP-102) speaks the new vocabulary only, never a deprecated alias: ONE tree Section of Rows nested by depth [0,1,1,2,1,0] (elbow, tee and pass-through guides, filled by the core), Row as the property/picker/nav/card row, Chip as pill and rect, Segmented in all four variants (segmented, toggles, outline, the full-width `bar` bottom bar), Menu with its trigger child and as a context menu, a bottom Drawer for the old sheet and a hover Popover for the old hover card. EXP-1259: a SearchList (a picked row, identifiers and status glyphs) closes the sink, so nothing above it moves. VAPP-126 appends, after it, the layout macros (Page over a Toolbar, a FieldGroup and FormActions; a SplitView bound to /ui/splitOpen; two StatTiles).",
+  "id": "root",
+  "component": "Box",
+  "style": {
+    "display": "flex",
+    "flexDirection": "column",
+    "gap": "$spacing.lg",
+    "padding": "$spacing.lg",
+    "width": "100%",
+    "backgroundColor": "$color.background",
+    "direction": "ltr"
+  },
+  "children": [
+    {
+      "id": "shell",
+      "component": "Box",
+      "style": {
+        "display": "flex",
+        "flexDirection": "column",
+        "gap": "$spacing.sm"
+      },
+      "children": [
+        {
+          "id": "app-bar",
+          "component": "AppBar",
+          "props": {
+            "title": "Inbox",
+            "subtitle": {
+              "path": "/ui/teamName"
+            },
+            "back": true
+          },
+          "slots": {
+            "trailing": {
+              "id": "app-bar-search",
+              "component": "Button",
+              "props": {
+                "icon": "search",
+                "variant": "ghost",
+                "size": "icon",
+                "label": "Search"
+              }
+            }
+          },
+          "on": {
+            "back": {
+              "event": {
+                "name": "back"
+              }
+            }
+          }
+        },
+        {
+          "id": "breadcrumb",
+          "component": "Breadcrumb",
+          "props": {
+            "items": [
+              {
+                "label": "Boards",
+                "value": "boards"
+              },
+              {
+                "label": "Sprint 12",
+                "value": "sprint-12"
+              },
+              {
+                "label": "EXP-42",
+                "value": "exp-42"
+              }
+            ]
+          },
+          "on": {
+            "select": {
+              "event": {
+                "name": "navigate"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "header",
+      "component": "Stack",
+      "props": {
+        "direction": "horizontal",
+        "align": "center",
+        "gap": "md"
+      },
+      "children": [
+        {
+          "id": "hdr-avatar",
+          "component": "Avatar",
+          "props": {
+            "name": "Alex Chen",
+            "size": "default"
+          }
+        },
+        {
+          "id": "hdr-text",
+          "component": "Stack",
+          "props": {
+            "direction": "vertical",
+            "gap": "xs"
+          },
+          "style": {
+            "flexGrow": 1,
+            "flexShrink": 1,
+            "minWidth": 0
+          },
+          "children": [
+            {
+              "id": "hdr-title",
+              "component": "Heading",
+              "props": {
+                "text": "Reddit radar",
+                "level": "h2"
+              }
+            },
+            {
+              "id": "hdr-sub",
+              "component": "Text",
+              "props": {
+                "text": "Kitchen sink · one catalog on every client",
+                "variant": "muted"
+              }
+            }
+          ]
+        },
+        {
+          "id": "hdr-badge",
+          "component": "Badge",
+          "props": {
+            "text": "3",
+            "variant": "secondary"
+          }
+        },
+        {
+          "id": "hdr-scan",
+          "component": "Button",
+          "props": {
+            "label": "Scan now",
+            "variant": "default"
+          },
+          "style": {
+            "flexShrink": 0,
+            ":pressed": {
+              "opacity": 0.6
+            }
+          },
+          "on": {
+            "press": {
+              "event": {
+                "name": "scan"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "grid",
+      "component": "Box",
+      "style": {
+        "display": "grid",
+        "gap": "$spacing.md",
+        "gridTemplateColumns": "1fr",
+        "gridTemplateAreas": [
+          "nav",
+          "main",
+          "footer"
+        ],
+        "@media (min-width: 600px)": {
+          "gridTemplateColumns": "minmax(180px, 1fr) 2fr",
+          "gridTemplateRows": "auto auto",
+          "gridTemplateAreas": [
+            "nav main",
+            "nav footer"
+          ]
+        }
+      },
+      "children": [
+        {
+          "id": "nav-card",
+          "component": "Card",
+          "props": {
+            "padded": false
+          },
+          "style": {
+            "gridArea": "nav"
+          },
+          "children": [
+            {
+              "id": "nav-rows",
+              "component": "Section",
+              "props": {
+                "title": "Sources",
+                "count": 3,
+                "icon": "nav-boards",
+                "tree": true
+              },
+              "children": [
+                {
+                  "id": "row-1",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/selfhosted",
+                    "meta": "312 posts",
+                    "selected": true,
+                    "depth": 0
+                  },
+                  "on": {
+                    "press": {
+                      "event": {
+                        "name": "open",
+                        "context": {
+                          "source": "selfhosted"
+                        }
+                      }
+                    }
+                  }
+                },
+                {
+                  "id": "row-2",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/opensource",
+                    "subtitle": "Open source",
+                    "meta": "88 posts",
+                    "icon": "ui-folder",
+                    "pressable": true,
+                    "depth": 1
+                  }
+                },
+                {
+                  "id": "row-3",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/webdev",
+                    "meta": "1.2k posts",
+                    "density": "compact",
+                    "chevron": "right",
+                    "pressable": true,
+                    "depth": 1
+                  }
+                },
+                {
+                  "id": "row-4",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/reactjs",
+                    "meta": "640 posts",
+                    "pressable": true,
+                    "depth": 2
+                  }
+                },
+                {
+                  "id": "row-5",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/rust",
+                    "meta": "402 posts",
+                    "pressable": true,
+                    "depth": 1
+                  }
+                },
+                {
+                  "id": "row-6",
+                  "component": "Row",
+                  "props": {
+                    "title": "r/homelab",
+                    "identifier": "HL",
+                    "meta": "57 posts",
+                    "pressable": true,
+                    "depth": 0
+                  }
+                }
+              ]
+            },
+            {
+              "id": "nav-div",
+              "component": "Separator",
+              "props": {
+                "orientation": "horizontal"
+              }
+            },
+            {
+              "id": "nav-toggle",
+              "component": "Switch",
+              "props": {
+                "label": "Auto-scan",
+                "name": "autoScan",
+                "checked": true,
+                "description": "Every hour"
+              },
+              "style": {
+                "padding": "$spacing.md"
+              }
+            }
+          ]
+        },
+        {
+          "id": "main-card",
+          "component": "Card",
+          "props": {
+            "title": "Drafts",
+            "description": "Two ready to send"
+          },
+          "style": {
+            "gridArea": "main",
+            "minWidth": 0
+          },
+          "children": [
+            {
+              "id": "media",
+              "component": "Box",
+              "style": {
+                "position": "relative",
+                "width": "100%",
+                "aspectRatio": 1.7777778,
+                "borderRadius": "$radius.lg",
+                "overflow": "hidden",
+                "backgroundColor": "$color.info"
+              },
+              "children": [
+                {
+                  "id": "media-img",
+                  "component": "Image",
+                  "props": {
+                    "alt": "Cover",
+                    "fit": "cover"
+                  },
+                  "style": {
+                    "width": "100%",
+                    "height": "100%"
+                  }
+                },
+                {
+                  "id": "media-badge",
+                  "component": "Chip",
+                  "props": {
+                    "label": "LIVE",
+                    "tone": "success"
+                  },
+                  "style": {
+                    "position": "absolute",
+                    "top": 8,
+                    "right": 8
+                  }
+                }
+              ]
+            },
+            {
+              "id": "main-md",
+              "component": "Markdown",
+              "props": {
+                "text": "**Looking for a Linear alternative** — self-hostable, with agents.\n\n- Draft reply ready\n- 2 sources cited"
+              },
+              "style": {
+                "minWidth": 0
+              }
+            },
+            {
+              "id": "main-progress",
+              "component": "Progress",
+              "props": {
+                "value": 62,
+                "max": 100,
+                "label": "Scanning"
+              }
+            },
+            {
+              "id": "main-meter",
+              "component": "Meter",
+              "props": {
+                "segments": [
+                  {
+                    "value": 40,
+                    "tone": "primary",
+                    "label": "Posts"
+                  },
+                  {
+                    "value": 25,
+                    "tone": "warning",
+                    "label": "Comments"
+                  }
+                ],
+                "max": 100,
+                "label": "Quota",
+                "value": "65%"
+              }
+            }
+          ]
+        },
+        {
+          "id": "footer-card",
+          "component": "Card",
+          "style": {
+            "gridArea": "footer",
+            "minWidth": 0
+          },
+          "children": [
+            {
+              "id": "footer-pills",
+              "component": "Stack",
+              "props": {
+                "direction": "horizontal",
+                "wrap": true,
+                "align": "center",
+                "gap": "sm"
+              },
+              "children": [
+                {
+                  "id": "pill-1",
+                  "component": "Chip",
+                  "props": {
+                    "label": "All",
+                    "shape": "pill",
+                    "selected": true,
+                    "pressable": true
+                  },
+                  "on": {
+                    "press": {
+                      "event": {
+                        "name": "filter",
+                        "context": {
+                          "value": "all"
+                        }
+                      }
+                    }
+                  }
+                },
+                {
+                  "id": "pill-2",
+                  "component": "Chip",
+                  "props": {
+                    "label": "Drafts",
+                    "pressable": true
+                  }
+                },
+                {
+                  "id": "pill-3",
+                  "component": "Chip",
+                  "props": {
+                    "label": "Bug",
+                    "dot": "$color.destructive"
+                  }
+                },
+                {
+                  "id": "pill-4",
+                  "component": "Chip",
+                  "props": {
+                    "label": "Archived",
+                    "icon": "ui-archive"
+                  }
+                },
+                {
+                  "id": "footer-spacer",
+                  "component": "Box",
+                  "style": {
+                    "flexGrow": 1,
+                    "flexBasis": 120,
+                    "minWidth": 40,
+                    "height": 1
+                  }
+                },
+                {
+                  "id": "footer-more",
+                  "component": "Button",
+                  "props": {
+                    "label": "More",
+                    "variant": "ghost"
+                  },
+                  "style": {
+                    ":pressed": {
+                      "opacity": 0.6
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "form",
+      "component": "Card",
+      "props": {
+        "title": "Draft reply"
+      },
+      "children": [
+        {
+          "id": "echo-field",
+          "component": "Input",
+          "props": {
+            "label": "Title",
+            "name": "title",
+            "placeholder": "Title (echoes after 150 ms)",
+            "value": {
+              "path": "/draft/title"
+            },
+            "checks": [
+              {
+                "condition": {
+                  "call": "required",
+                  "args": {
+                    "value": {
+                      "path": "/draft/title"
+                    }
+                  }
+                },
+                "message": "A title is required"
+              }
+            ],
+            "validateOn": "blur"
+          }
+        },
+        {
+          "id": "form-body",
+          "component": "Textarea",
+          "props": {
+            "label": "Body",
+            "name": "body",
+            "placeholder": "Body",
+            "rows": 3
+          },
+          "style": {
+            "minHeight": 72
+          }
+        },
+        {
+          "id": "form-row",
+          "component": "Stack",
+          "props": {
+            "direction": "horizontal",
+            "wrap": true,
+            "align": "center",
+            "gap": "sm"
+          },
+          "children": [
+            {
+              "id": "form-sub",
+              "component": "Select",
+              "props": {
+                "label": "Subreddit",
+                "name": "subreddit",
+                "options": [
+                  {
+                    "label": "r/selfhosted",
+                    "value": "selfhosted"
+                  },
+                  {
+                    "label": "r/opensource",
+                    "value": "opensource"
+                  },
+                  {
+                    "label": "r/webdev",
+                    "value": "webdev"
+                  }
+                ],
+                "value": "selfhosted",
+                "searchable": true
+              },
+              "style": {
+                "flexGrow": 1,
+                "flexBasis": 160,
+                "maxWidth": 320
+              }
+            },
+            {
+              "id": "form-due",
+              "component": "DatePicker",
+              "props": {
+                "label": "Send on",
+                "name": "sendOn",
+                "value": "2026-10-14",
+                "min": "2026-10-07"
+              }
+            },
+            {
+              "id": "form-actions",
+              "component": "Stack",
+              "props": {
+                "direction": "horizontal",
+                "gap": "sm"
+              },
+              "style": {
+                "marginInlineStart": "auto"
+              },
+              "children": [
+                {
+                  "id": "form-cancel",
+                  "component": "Button",
+                  "props": {
+                    "label": "Cancel",
+                    "variant": "outline"
+                  },
+                  "style": {
+                    ":pressed": {
+                      "opacity": 0.6
+                    }
+                  }
+                },
+                {
+                  "id": "form-send",
+                  "component": "Button",
+                  "props": {
+                    "label": "Send",
+                    "icon": "ui-send"
+                  },
+                  "style": {
+                    ":pressed": {
+                      "opacity": 0.6
+                    }
+                  },
+                  "on": {
+                    "press": {
+                      "event": {
+                        "name": "send"
+                      }
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "form-plan",
+          "component": "Radio",
+          "props": {
+            "label": "Tone",
+            "name": "tone",
+            "options": [
+              {
+                "label": "Friendly",
+                "value": "friendly"
+              },
+              {
+                "label": "Direct",
+                "value": "direct"
+              }
+            ],
+            "value": "friendly",
+            "orientation": "horizontal"
+          }
+        },
+        {
+          "id": "form-design",
+          "component": "ChoiceTiles",
+          "props": {
+            "name": "design",
+            "options": [
+              {
+                "label": "Two columns",
+                "value": "two",
+                "description": "Pictures beside the text"
+              },
+              {
+                "label": "One column",
+                "value": "one",
+                "description": "Pictures under the text"
+              }
+            ],
+            "value": "two",
+            "columns": 2
+          }
+        },
+        {
+          "id": "form-agree",
+          "component": "Checkbox",
+          "props": {
+            "label": "Cite sources",
+            "name": "cite",
+            "checked": true
+          }
+        },
+        {
+          "id": "form-volume",
+          "component": "Slider",
+          "props": {
+            "label": "Length",
+            "min": 0,
+            "max": 100,
+            "step": 5,
+            "value": 40
+          }
+        },
+        {
+          "id": "form-link",
+          "component": "Link",
+          "props": {
+            "label": "Posting guidelines",
+            "href": "https://example.com/rules",
+            "external": true
+          }
+        }
+      ]
+    },
+    {
+      "id": "flex-demo",
+      "component": "Box",
+      "style": {
+        "display": "flex",
+        "flexDirection": "row",
+        "flexWrap": "wrap",
+        "gap": "$spacing.sm"
+      },
+      "children": [
+        {
+          "id": "fx-1",
+          "component": "Box",
+          "style": {
+            "flexBasis": "30%",
+            "flexGrow": 1,
+            "minWidth": 96,
+            "height": 40,
+            "borderRadius": "$radius.sm",
+            "backgroundColor": "$color.success",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "children": [
+            {
+              "id": "fx-1-t",
+              "component": "Text",
+              "props": {
+                "text": "basis 30% · grow 1",
+                "variant": "caption"
+              }
+            }
+          ]
+        },
+        {
+          "id": "fx-2",
+          "component": "Box",
+          "style": {
+            "width": 160,
+            "flexShrink": 0,
+            "height": 40,
+            "borderRadius": "$radius.sm",
+            "backgroundColor": "$color.warning",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "children": [
+            {
+              "id": "fx-2-t",
+              "component": "Text",
+              "props": {
+                "text": "160 · shrink 0",
+                "variant": "caption"
+              }
+            }
+          ]
+        },
+        {
+          "id": "fx-3",
+          "component": "Box",
+          "style": {
+            "flexGrow": 2,
+            "flexBasis": 80,
+            "maxWidth": "50%",
+            "height": 40,
+            "borderRadius": "$radius.sm",
+            "backgroundColor": "$color.destructive",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "children": [
+            {
+              "id": "fx-3-t",
+              "component": "Text",
+              "props": {
+                "text": "grow 2 · max 50%",
+                "variant": "caption"
+              }
+            }
+          ]
+        },
+        {
+          "id": "fx-4",
+          "component": "Box",
+          "style": {
+            "width": "25%",
+            "minWidth": 64,
+            "height": 40,
+            "borderRadius": "$radius.sm",
+            "backgroundColor": "$color.info",
+            "display": "flex",
+            "alignItems": "center",
+            "justifyContent": "center"
+          },
+          "children": [
+            {
+              "id": "fx-4-t",
+              "component": "Text",
+              "props": {
+                "text": "25%",
+                "variant": "caption"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "stats",
+      "component": "Grid",
+      "props": {
+        "columns": 3,
+        "gap": "md"
+      },
+      "children": [
+        {
+          "id": "stat-1",
+          "component": "Card",
+          "props": {
+            "title": "Posts"
+          },
+          "children": [
+            {
+              "id": "stat-1-v",
+              "component": "Text",
+              "props": {
+                "text": "312",
+                "variant": "title"
+              }
+            }
+          ]
+        },
+        {
+          "id": "stat-2",
+          "component": "Card",
+          "props": {
+            "title": "Drafts"
+          },
+          "children": [
+            {
+              "id": "stat-2-v",
+              "component": "Text",
+              "props": {
+                "text": "2",
+                "variant": "title"
+              }
+            }
+          ]
+        },
+        {
+          "id": "stat-3",
+          "component": "Card",
+          "props": {
+            "title": "Sent"
+          },
+          "children": [
+            {
+              "id": "stat-3-v",
+              "component": "Text",
+              "props": {
+                "text": "17",
+                "variant": "title"
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "nav-demo",
+      "component": "Card",
+      "props": {
+        "title": "Navigation"
+      },
+      "children": [
+        {
+          "id": "tabs",
+          "component": "Tabs",
+          "props": {
+            "tabs": [
+              {
+                "label": "Issue",
+                "value": "issue",
+                "icon": "ui-issue"
+              },
+              {
+                "label": "Run",
+                "value": "run",
+                "count": 2
+              }
+            ],
+            "value": "issue"
+          },
+          "children": [
+            {
+              "id": "tab-issue",
+              "component": "Text",
+              "props": {
+                "text": "The issue panel"
+              }
+            },
+            {
+              "id": "tab-run",
+              "component": "Text",
+              "props": {
+                "text": "The run panel"
+              }
+            }
+          ]
+        },
+        {
+          "id": "segmented",
+          "component": "Segmented",
+          "props": {
+            "items": [
+              {
+                "label": "List",
+                "value": "list"
+              },
+              {
+                "label": "Board",
+                "value": "board"
+              },
+              {
+                "label": "Graph",
+                "value": "graph",
+                "disabled": true
+              }
+            ],
+            "value": "list",
+            "variant": "segmented",
+            "fill": true
+          }
+        },
+        {
+          "id": "toggles",
+          "component": "Segmented",
+          "props": {
+            "items": [
+              {
+                "label": "Bold",
+                "value": "bold",
+                "icon": "editor-bold"
+              },
+              {
+                "label": "Italic",
+                "value": "italic",
+                "icon": "editor-italic"
+              }
+            ],
+            "type": "multiple",
+            "value": "bold",
+            "variant": "toggles",
+            "size": "sm"
+          }
+        },
+        {
+          "id": "accordion",
+          "component": "Accordion",
+          "props": {
+            "items": [
+              {
+                "title": "Details",
+                "value": "details"
+              },
+              {
+                "title": "History",
+                "value": "history",
+                "count": 4
+              }
+            ],
+            "type": "multiple",
+            "value": "details"
+          },
+          "children": [
+            {
+              "id": "acc-details",
+              "component": "Text",
+              "props": {
+                "text": "Everything about it"
+              }
+            },
+            {
+              "id": "acc-history",
+              "component": "Text",
+              "props": {
+                "text": "What happened"
+              }
+            }
+          ]
+        },
+        {
+          "id": "collapsible",
+          "component": "Collapsible",
+          "props": {
+            "title": "Advanced",
+            "open": {
+              "path": "/ui/advancedOpen"
+            },
+            "count": 2
+          },
+          "children": [
+            {
+              "id": "coll-body",
+              "component": "Text",
+              "props": {
+                "text": "Hidden until opened",
+                "variant": "muted"
+              }
+            }
+          ]
+        },
+        {
+          "id": "pagination",
+          "component": "Pagination",
+          "props": {
+            "totalPages": 5,
+            "page": {
+              "path": "/ui/page"
+            }
+          },
+          "on": {
+            "change": {
+              "event": {
+                "name": "page"
+              }
+            }
+          }
+        },
+        {
+          "id": "button-group",
+          "component": "Segmented",
+          "props": {
+            "items": [
+              {
+                "label": "Day",
+                "value": "day"
+              },
+              {
+                "label": "Week",
+                "value": "week"
+              },
+              {
+                "label": "Month",
+                "value": "month"
+              }
+            ],
+            "value": "week",
+            "variant": "outline"
+          },
+          "on": {
+            "change": {
+              "event": {
+                "name": "range"
+              }
+            }
+          }
+        },
+        {
+          "id": "toggle",
+          "component": "Toggle",
+          "props": {
+            "label": "Pin",
+            "icon": "ui-pin",
+            "pressed": true,
+            "variant": "outline"
+          }
+        },
+        {
+          "id": "stepper",
+          "component": "Stepper",
+          "props": {
+            "steps": [
+              {
+                "label": "Account"
+              },
+              {
+                "label": "Team",
+                "description": "Invite people"
+              },
+              {
+                "label": "Done"
+              }
+            ],
+            "current": 1,
+            "orientation": "horizontal"
+          }
+        }
+      ]
+    },
+    {
+      "id": "feedback-demo",
+      "component": "Card",
+      "props": {
+        "title": "Feedback"
+      },
+      "children": [
+        {
+          "id": "alert",
+          "component": "Alert",
+          "props": {
+            "title": "Saved",
+            "message": "Your changes have been saved.",
+            "type": "success"
+          }
+        },
+        {
+          "id": "alert-warn",
+          "component": "Alert",
+          "props": {
+            "title": "Quota at 80%",
+            "type": "warning"
+          }
+        },
+        {
+          "id": "status-row",
+          "component": "Stack",
+          "props": {
+            "direction": "horizontal",
+            "align": "center",
+            "gap": "md"
+          },
+          "children": [
+            {
+              "id": "ring",
+              "component": "Ring",
+              "props": {
+                "value": 0.62,
+                "tone": "primary",
+                "label": "62% used"
+              }
+            },
+            {
+              "id": "spinner",
+              "component": "Spinner",
+              "props": {
+                "size": "sm",
+                "label": "Loading"
+              }
+            },
+            {
+              "id": "icon",
+              "component": "Icon",
+              "props": {
+                "name": "ui-success",
+                "tone": "success",
+                "label": "Done"
+              }
+            },
+            {
+              "id": "skeleton",
+              "component": "Skeleton",
+              "props": {
+                "width": "120px",
+                "height": "16px"
+              }
+            },
+            {
+              "id": "skeleton-round",
+              "component": "Skeleton",
+              "props": {
+                "width": "24px",
+                "height": "24px",
+                "rounded": true
+              }
+            }
+          ]
+        },
+        {
+          "id": "voice-wave",
+          "component": "VoiceWave",
+          "props": {
+            "activity": "listening",
+            "level": 0.6,
+            "bands": [0.9, 0.6, 1, 0.5],
+            "label": "Voice"
+          },
+          "children": [
+            {
+              "id": "voice-wave-mark",
+              "component": "Icon",
+              "props": {
+                "name": "mic"
+              }
+            }
+          ]
+        },
+        {
+          "id": "call",
+          "component": "CallSurface",
+          "props": {
+            "name": "Assistant",
+            "state": "talking",
+            "status": "01:24",
+            "caption": "Sure, Friday at eight works."
+          },
+          "style": {
+            "height": 360
+          }
+        },
+        {
+          "id": "bubble-out",
+          "component": "MessageBubble",
+          "props": {
+            "text": "Is the printer fixed?",
+            "side": "out",
+            "time": "18:00",
+            "status": "read"
+          }
+        },
+        {
+          "id": "bubble-in",
+          "component": "MessageBubble",
+          "props": {
+            "text": "Yes, try again.",
+            "author": "spezl",
+            "time": "18:02"
+          }
+        },
+        {
+          "id": "plan",
+          "component": "Plan",
+          "props": {
+            "title": "Here's my plan",
+            "state": "running",
+            "progress": 0.4,
+            "steps": [
+              {
+                "title": "Open the site",
+                "icon": "globe",
+                "status": "done"
+              },
+              {
+                "title": "Reserve a table",
+                "icon": "pencil",
+                "status": "running"
+              }
+            ]
+          }
+        },
+        {
+          "id": "qr",
+          "component": "QrCode",
+          "props": {
+            "value": "HELLO",
+            "size": 120,
+            "label": "Scan to pair"
+          }
+        },
+        {
+          "id": "scanner",
+          "component": "QrScanner",
+          "props": {
+            "hint": "Point at the code"
+          },
+          "style": {
+            "width": 240
+          }
+        },
+        {
+          "id": "empty",
+          "component": "EmptyState",
+          "props": {
+            "icon": "nav-inbox",
+            "title": "No notifications",
+            "description": "You are all caught up.",
+            "actionLabel": "Refresh"
+          },
+          "on": {
+            "press": {
+              "event": {
+                "name": "refresh"
+              }
+            }
+          }
+        },
+        {
+          "id": "empty-list",
+          "component": "EmptyState",
+          "props": {
+            "icon": "nav-issues",
+            "title": "No issues yet",
+            "size": "list"
+          }
+        },
+        {
+          "id": "table",
+          "component": "Table",
+          "props": {
+            "columns": [
+              {
+                "key": "name",
+                "label": "Name",
+                "sortable": true
+              },
+              {
+                "key": "role",
+                "label": "Role",
+                "type": "badge"
+              },
+              {
+                "key": "runs",
+                "label": "Runs",
+                "type": "number",
+                "align": "end",
+                "sortable": true,
+                "width": 80
+              },
+              {
+                "key": "status",
+                "label": "Status",
+                "type": "slot",
+                "slot": "statusCell"
+              }
+            ],
+            "rows": [
+              {
+                "id": "alice",
+                "name": "Alice",
+                "role": "Owner",
+                "runs": 12,
+                "status": "Online"
+              },
+              {
+                "id": "bob",
+                "name": "Bob",
+                "role": "Member",
+                "runs": 3,
+                "status": "Away"
+              }
+            ],
+            "rowKey": "id",
+            "selectable": "multiple",
+            "selected": {
+              "path": "/ui/selectedMembers"
+            },
+            "sort": {
+              "key": "runs",
+              "direction": "desc"
+            },
+            "caption": "Two members",
+            "striped": true
+          },
+          "slots": {
+            "statusCell": {
+              "id": "table-status",
+              "component": "Chip",
+              "props": {
+                "label": {
+                  "path": "status"
+                },
+                "tone": "success"
+              }
+            }
+          },
+          "on": {
+            "sort": {
+              "event": {
+                "name": "sortMembers"
+              }
+            },
+            "select": {
+              "event": {
+                "name": "selectMembers"
+              }
+            }
+          }
+        },
+        {
+          "id": "chart",
+          "component": "Chart",
+          "props": {
+            "kind": "bar",
+            "categories": [
+              "Mon",
+              "Tue",
+              "Wed"
+            ],
+            "series": [
+              {
+                "name": "Runs",
+                "values": [
+                  3,
+                  5,
+                  2
+                ]
+              },
+              {
+                "name": "Merges",
+                "values": [
+                  1,
+                  2,
+                  2
+                ],
+                "tone": "success"
+              }
+            ],
+            "title": "This week",
+            "height": 160
+          }
+        },
+        {
+          "id": "charts-row",
+          "component": "Grid",
+          "props": {
+            "columns": {
+              "base": 1,
+              "md": 2
+            },
+            "gap": "md"
+          },
+          "children": [
+            {
+              "id": "chart-line",
+              "component": "Chart",
+              "props": {
+                "kind": "line",
+                "categories": [
+                  "Mon",
+                  "Tue",
+                  "Wed",
+                  "Thu"
+                ],
+                "series": [
+                  {
+                    "name": "Open",
+                    "values": [
+                      4,
+                      6,
+                      5,
+                      8
+                    ]
+                  },
+                  {
+                    "name": "Closed",
+                    "values": [
+                      2,
+                      3,
+                      6,
+                      7
+                    ]
+                  }
+                ],
+                "showValues": true,
+                "yLabel": "Issues"
+              }
+            },
+            {
+              "id": "chart-donut",
+              "component": "Chart",
+              "props": {
+                "kind": "donut",
+                "categories": [
+                  "Done",
+                  "In progress",
+                  "Backlog"
+                ],
+                "series": [
+                  {
+                    "name": "Issues",
+                    "values": [
+                      12,
+                      5,
+                      9
+                    ]
+                  }
+                ],
+                "height": 180
+              }
+            }
+          ]
+        },
+        {
+          "id": "spark-row",
+          "component": "Stack",
+          "props": {
+            "direction": "horizontal",
+            "align": "center",
+            "gap": "sm"
+          },
+          "children": [
+            {
+              "id": "spark-label",
+              "component": "Text",
+              "props": {
+                "text": "Runs this week",
+                "variant": "muted"
+              }
+            },
+            {
+              "id": "sparkline",
+              "component": "Sparkline",
+              "props": {
+                "values": [
+                  1,
+                  3,
+                  2,
+                  5,
+                  4,
+                  6
+                ],
+                "tone": "success"
+              },
+              "style": {
+                "width": 96
+              }
+            },
+            {
+              "id": "progress-bound",
+              "component": "Progress",
+              "props": {
+                "value": {
+                  "path": "/ui/upload"
+                },
+                "label": "Upload"
+              },
+              "style": {
+                "flexGrow": 1
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "rows-demo",
+      "component": "Group",
+      "props": {
+        "title": "Properties",
+        "footer": "Read-only unless you own the board."
+      },
+      "children": [
+        {
+          "id": "prop-assignee",
+          "component": "Row",
+          "props": {
+            "title": "Assignee",
+            "value": "Alex Chen",
+            "icon": "ui-assignee"
+          }
+        },
+        {
+          "id": "pick-status",
+          "component": "Row",
+          "props": {
+            "title": "Status",
+            "value": "In progress",
+            "icon": "settings-statuses",
+            "chevron": "selector",
+            "pressable": true
+          },
+          "on": {
+            "press": {
+              "event": {
+                "name": "pickStatus"
+              }
+            }
+          }
+        },
+        {
+          "id": "pick-label",
+          "component": "Row",
+          "props": {
+            "title": "Labels",
+            "placeholder": "Add a label",
+            "chevron": "selector",
+            "pressable": true
+          }
+        },
+        {
+          "id": "nav-inbox",
+          "component": "Row",
+          "props": {
+            "title": "Inbox",
+            "icon": "nav-inbox",
+            "selected": true,
+            "pressable": true
+          },
+          "slots": {
+            "trailing": {
+              "id": "nav-inbox-count",
+              "component": "Badge",
+              "props": {
+                "text": "3",
+                "variant": "secondary"
+              }
+            }
+          }
+        },
+        {
+          "id": "nav-reviews",
+          "component": "Row",
+          "props": {
+            "title": "Reviews",
+            "icon": "pr-open",
+            "pressable": true
+          }
+        }
+      ]
+    },
+    {
+      "id": "chips-demo",
+      "component": "Stack",
+      "props": {
+        "direction": "horizontal",
+        "wrap": true,
+        "gap": "sm",
+        "align": "center"
+      },
+      "children": [
+        {
+          "id": "card-row",
+          "component": "Row",
+          "props": {
+            "title": "MacBook Pro",
+            "subtitle": "Online · 2 runs",
+            "icon": "ui-device",
+            "meta": "now",
+            "surface": "card",
+            "pressable": true
+          },
+          "style": {
+            "flexBasis": 240,
+            "flexGrow": 1
+          }
+        },
+        {
+          "id": "chip-board",
+          "component": "Chip",
+          "props": {
+            "label": "Sprint 12",
+            "shape": "rect",
+            "icon": "nav-boards",
+            "detail": "APP",
+            "removable": true,
+            "pressable": true
+          },
+          "on": {
+            "press": {
+              "event": {
+                "name": "openBoard"
+              }
+            },
+            "remove": {
+              "event": {
+                "name": "removeBoard"
+              }
+            }
+          }
+        },
+        {
+          "id": "chip-user",
+          "component": "Chip",
+          "props": {
+            "label": "Alex Chen",
+            "shape": "rect",
+            "image": "https://example.com/alex.png",
+            "pressable": true
+          }
+        }
+      ]
+    },
+    {
+      "id": "media-demo",
+      "component": "Card",
+      "props": {
+        "title": "Media"
+      },
+      "children": [
+        {
+          "id": "carousel",
+          "component": "Carousel",
+          "props": {
+            "page": 0,
+            "indicators": true
+          },
+          "children": [
+            {
+              "id": "page-1",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/1.jpg",
+                "alt": "One",
+                "aspectRatio": 1.7777778
+              }
+            },
+            {
+              "id": "page-2",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/2.jpg",
+                "alt": "Two",
+                "aspectRatio": 1.7777778
+              }
+            }
+          ]
+        },
+        {
+          "id": "video",
+          "component": "Video",
+          "props": {
+            "src": "https://example.com/clip.mp4",
+            "poster": "https://example.com/clip.jpg",
+            "durationMs": 12000
+          }
+        },
+        {
+          "id": "audio",
+          "component": "AudioPlayer",
+          "props": {
+            "src": "https://example.com/track.mp3",
+            "title": "Episode 12",
+            "durationMs": 1860000
+          }
+        },
+        {
+          "id": "list",
+          "component": "List",
+          "props": {
+            "direction": "vertical",
+            "divided": true
+          },
+          "template": {
+            "component": "list-item",
+            "path": "/posts"
+          },
+          "children": []
+        },
+        {
+          "id": "list-item",
+          "component": "Row",
+          "props": {
+            "title": {
+              "path": "title"
+            },
+            "meta": {
+              "path": "score"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "overlay-demo",
+      "component": "Stack",
+      "props": {
+        "direction": "horizontal",
+        "wrap": true,
+        "gap": "sm"
+      },
+      "children": [
+        {
+          "id": "dialog",
+          "component": "Dialog",
+          "props": {
+            "title": "Delete board?",
+            "description": "This cannot be undone.",
+            "open": {
+              "path": "/ui/confirmOpen"
+            },
+            "dismissible": true
+          },
+          "slots": {
+            "trigger": {
+              "id": "dialog-trigger",
+              "component": "Button",
+              "props": {
+                "label": "Delete",
+                "variant": "destructive"
+              }
+            },
+            "footer": {
+              "id": "dialog-footer",
+              "component": "Button",
+              "props": {
+                "label": "Delete for good",
+                "variant": "destructive"
+              },
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "deleteBoard"
+                  }
+                }
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "dialog-body",
+              "component": "Text",
+              "props": {
+                "text": "Issues move to the trash for 48 hours."
+              }
+            }
+          ]
+        },
+        {
+          "id": "drawer",
+          "component": "Drawer",
+          "props": {
+            "title": "Filters",
+            "side": "bottom",
+            "open": false
+          },
+          "slots": {
+            "trigger": {
+              "id": "drawer-trigger",
+              "component": "Button",
+              "props": {
+                "label": "Filters",
+                "variant": "outline",
+                "icon": "ui-properties"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "drawer-body",
+              "component": "Checkbox",
+              "props": {
+                "label": "Only mine",
+                "name": "mine"
+              }
+            }
+          ]
+        },
+        {
+          "id": "sheet",
+          "component": "Drawer",
+          "props": {
+            "title": "Details",
+            "side": "bottom",
+            "open": false
+          },
+          "slots": {
+            "trigger": {
+              "id": "sheet-trigger",
+              "component": "Button",
+              "props": {
+                "label": "Details",
+                "variant": "secondary"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "sheet-body",
+              "component": "Text",
+              "props": {
+                "text": "Everything in a bottom sheet."
+              }
+            }
+          ]
+        },
+        {
+          "id": "popover",
+          "component": "Popover",
+          "props": {
+            "side": "bottom"
+          },
+          "slots": {
+            "trigger": {
+              "id": "popover-trigger",
+              "component": "Button",
+              "props": {
+                "icon": "ui-info",
+                "variant": "ghost",
+                "size": "icon",
+                "label": "About"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "popover-body",
+              "component": "Text",
+              "props": {
+                "text": "A small anchored panel.",
+                "variant": "caption"
+              }
+            }
+          ]
+        },
+        {
+          "id": "tooltip",
+          "component": "Tooltip",
+          "props": {
+            "content": "Copy link",
+            "side": "top"
+          },
+          "children": [
+            {
+              "id": "tooltip-anchor",
+              "component": "Button",
+              "props": {
+                "icon": "ui-link",
+                "variant": "ghost",
+                "size": "icon",
+                "label": "Copy link"
+              }
+            }
+          ]
+        },
+        {
+          "id": "menu",
+          "component": "Menu",
+          "props": {
+            "items": [
+              {
+                "label": "Rename",
+                "value": "rename",
+                "icon": "ui-edit"
+              },
+              {
+                "label": "Archive",
+                "value": "archive",
+                "icon": "ui-archive"
+              },
+              {
+                "label": "Delete",
+                "value": "delete",
+                "destructive": true
+              }
+            ]
+          },
+          "on": {
+            "select": {
+              "event": {
+                "name": "menu"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "menu-trigger",
+              "component": "Button",
+              "props": {
+                "label": "More",
+                "icon": "ui-more",
+                "variant": "outline"
+              }
+            }
+          ]
+        },
+        {
+          "id": "alert-dialog",
+          "component": "AlertDialog",
+          "props": {
+            "title": "Discard draft?",
+            "description": "Your text will be lost.",
+            "destructive": true,
+            "open": {
+              "path": "/ui/discardOpen"
+            }
+          },
+          "slots": {
+            "trigger": {
+              "id": "alert-dialog-trigger",
+              "component": "Button",
+              "props": {
+                "label": "Discard",
+                "variant": "outline"
+              }
+            }
+          },
+          "on": {
+            "confirm": {
+              "event": {
+                "name": "discard"
+              }
+            }
+          }
+        },
+        {
+          "id": "dock-card",
+          "component": "DockCard",
+          "props": {
+            "label": "Plan ready",
+            "caption": "Ask dock",
+            "meta": "3 questions",
+            "title": "Fold the composer into the Dock",
+            "icon": "coding-plan",
+            "tone": "primary",
+            "open": {
+              "path": "/ui/dockOpen"
+            }
+          },
+          "children": [
+            {
+              "id": "dock-card-body",
+              "component": "Text",
+              "props": {
+                "text": "Move the waiting cards above the composer and open each one as a bottom sheet."
+              }
+            }
+          ],
+          "slots": {
+            "footer": {
+              "id": "dock-card-footer",
+              "component": "Stack",
+              "props": {
+                "direction": "horizontal",
+                "gap": "sm",
+                "justify": "end"
+              },
+              "children": [
+                {
+                  "id": "dock-card-no",
+                  "component": "Button",
+                  "props": {
+                    "label": "No, keep planning",
+                    "variant": "secondary"
+                  }
+                },
+                {
+                  "id": "dock-card-yes",
+                  "component": "Button",
+                  "props": {
+                    "label": "Yes"
+                  }
+                }
+              ]
+            }
+          }
+        },
+        {
+          "id": "hover-card",
+          "component": "Popover",
+          "props": {
+            "side": "top",
+            "openOn": "hover"
+          },
+          "slots": {
+            "trigger": {
+              "id": "hover-card-trigger",
+              "component": "Link",
+              "props": {
+                "label": "@alex"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "hover-card-body",
+              "component": "Stack",
+              "props": {
+                "direction": "horizontal",
+                "gap": "sm",
+                "align": "center"
+              },
+              "children": [
+                {
+                  "id": "hover-card-avatar",
+                  "component": "Avatar",
+                  "props": {
+                    "name": "Alex Chen"
+                  }
+                },
+                {
+                  "id": "hover-card-name",
+                  "component": "Text",
+                  "props": {
+                    "text": "Alex Chen · Owner",
+                    "variant": "body"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "context-menu",
+          "component": "Menu",
+          "props": {
+            "items": [
+              {
+                "label": "Copy",
+                "value": "copy",
+                "shortcut": "⌘C",
+                "icon": "ui-copy"
+              },
+              {
+                "kind": "separator"
+              },
+              {
+                "kind": "label",
+                "label": "View"
+              },
+              {
+                "label": "Show done",
+                "value": "showDone",
+                "kind": "checkbox",
+                "checked": {
+                  "path": "/ui/showDone"
+                }
+              },
+              {
+                "label": "Sort by",
+                "kind": "submenu",
+                "items": [
+                  {
+                    "label": "Priority",
+                    "value": "priority"
+                  },
+                  {
+                    "label": "Updated",
+                    "value": "updated"
+                  }
+                ]
+              },
+              {
+                "kind": "separator"
+              },
+              {
+                "label": "Delete",
+                "value": "delete",
+                "destructive": true
+              }
+            ],
+            "openOn": "contextmenu"
+          },
+          "on": {
+            "select": {
+              "event": {
+                "name": "contextMenu"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "context-menu-target",
+              "component": "Card",
+              "props": {
+                "title": "Right-click me"
+              }
+            }
+          ]
+        },
+        {
+          "id": "toast",
+          "component": "Toast",
+          "props": {
+            "title": "Saved",
+            "description": "Your changes are live.",
+            "type": "success",
+            "open": {
+              "path": "/ui/toastOpen"
+            },
+            "actionLabel": "Undo",
+            "duration": 5000
+          },
+          "on": {
+            "action": {
+              "event": {
+                "name": "undo"
+              }
+            }
+          }
+        }
+      ]
+    },
+    {
+      "id": "responsive",
+      "component": "Card",
+      "props": {
+        "title": "Responsive"
+      },
+      "children": [
+        {
+          "id": "resp-grid",
+          "component": "Grid",
+          "props": {
+            "columns": {
+              "base": 1,
+              "sm": 2,
+              "lg": 3
+            },
+            "gap": {
+              "base": "sm",
+              "md": "md"
+            }
+          },
+          "children": [
+            {
+              "id": "resp-card-1",
+              "component": "Card",
+              "props": {
+                "title": "Throughput",
+                "description": "Runs per day"
+              },
+              "children": [
+                {
+                  "id": "resp-value-1",
+                  "component": "Text",
+                  "props": {
+                    "text": "128",
+                    "variant": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "id": "resp-card-2",
+              "component": "Card",
+              "props": {
+                "title": "Latency",
+                "description": "p95 in ms"
+              },
+              "children": [
+                {
+                  "id": "resp-value-2",
+                  "component": "Text",
+                  "props": {
+                    "text": "412",
+                    "variant": "title"
+                  }
+                }
+              ]
+            },
+            {
+              "id": "resp-card-3",
+              "component": "Card",
+              "props": {
+                "title": "Errors",
+                "description": "Last 24 h"
+              },
+              "children": [
+                {
+                  "id": "resp-value-3",
+                  "component": "Text",
+                  "props": {
+                    "text": "3",
+                    "variant": "title"
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "resp-shell",
+          "component": "Sidebar",
+          "props": {
+            "width": 200,
+            "collapseBelow": "md",
+            "collapsed": {
+              "path": "/ui/sidebarCollapsed"
+            }
+          },
+          "style": {
+            "minHeight": 160
+          },
+          "slots": {
+            "sidebar": {
+              "id": "resp-nav",
+              "component": "Box",
+              "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "gap": "$spacing.xxs",
+                "padding": "$spacing.xs"
+              },
+              "children": [
+                {
+                  "id": "resp-nav-inbox",
+                  "component": "Row",
+                  "props": {
+                    "title": "Inbox",
+                    "icon": "nav-inbox",
+                    "selected": true,
+                    "pressable": true
+                  },
+                  "slots": {
+                    "trailing": {
+                      "id": "resp-nav-inbox-count",
+                      "component": "Badge",
+                      "props": {
+                        "text": "2",
+                        "variant": "secondary"
+                      }
+                    }
+                  }
+                },
+                {
+                  "id": "resp-nav-issues",
+                  "component": "Row",
+                  "props": {
+                    "title": "Issues",
+                    "icon": "nav-issues",
+                    "pressable": true
+                  }
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "id": "resp-main",
+              "component": "Stack",
+              "props": {
+                "direction": {
+                  "base": "vertical",
+                  "md": "horizontal"
+                },
+                "gap": "md",
+                "align": {
+                  "base": "stretch",
+                  "md": "center"
+                }
+              },
+              "style": {
+                "padding": "$spacing.md"
+              },
+              "children": [
+                {
+                  "id": "resp-main-text",
+                  "component": "Text",
+                  "props": {
+                    "text": "The column hides below md; this stack turns into a row at md.",
+                    "variant": "body"
+                  }
+                },
+                {
+                  "id": "resp-only-wide",
+                  "component": "Badge",
+                  "props": {
+                    "text": "Wide",
+                    "variant": "secondary"
+                  },
+                  "style": {
+                    "display": "none",
+                    "@media (min-width: $breakpoint.md)": {
+                      "display": "flex"
+                    }
+                  }
+                },
+                {
+                  "id": "resp-only-narrow",
+                  "component": "Badge",
+                  "props": {
+                    "text": "Narrow",
+                    "variant": "outline"
+                  },
+                  "style": {
+                    "@media (min-width: $breakpoint.md)": {
+                      "display": "none"
+                    }
+                  }
+                }
+              ]
+            }
+          ]
+        },
+        {
+          "id": "resp-states",
+          "component": "Box",
+          "props": {
+            "pressable": true
+          },
+          "style": {
+            "display": "flex",
+            "flexDirection": "row",
+            "alignItems": "center",
+            "gap": "$spacing.sm",
+            "padding": "$spacing.md",
+            "borderRadius": "$radius.md",
+            "borderWidth": "$border.hairline",
+            "borderColor": "$color.border",
+            "transition": "$motion.fast",
+            "transitionEasing": "$ease.standard",
+            "@media (max-width: $breakpoint.sm)": {
+              "flexDirection": "column",
+              "alignItems": "flex-start"
+            },
+            "@media (orientation: portrait)": {
+              "paddingVertical": "$spacing.lg"
+            },
+            "@media (hover: none)": {
+              "minHeight": 44
+            },
+            "@media (prefers-reduced-motion: reduce)": {
+              "transform": "scale(1)"
+            },
+            ":hover": {
+              "backgroundColor": "$color.accent"
+            },
+            ":focus-visible": {
+              "borderColor": "$color.ring"
+            },
+            ":pressed": {
+              "transform": "scale(0.98)"
+            }
+          },
+          "on": {
+            "press": {
+              "event": {
+                "name": "tapCard"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "resp-states-icon",
+              "component": "Icon",
+              "props": {
+                "name": "ui-info",
+                "tone": "info"
+              }
+            },
+            {
+              "id": "resp-states-text",
+              "component": "Text",
+              "props": {
+                "text": "Hover, keyboard focus and press restyle this box; it stacks below sm.",
+                "variant": "body"
+              }
+            }
+          ]
+        },
+        {
+          "id": "resp-drawer",
+          "component": "Drawer",
+          "props": {
+            "title": "Filters",
+            "side": {
+              "base": "bottom",
+              "md": "right"
+            },
+            "open": {
+              "path": "/ui/filtersOpen"
+            },
+            "dragToDismiss": true
+          },
+          "slots": {
+            "trigger": {
+              "id": "resp-drawer-trigger",
+              "component": "Button",
+              "props": {
+                "label": "Filters",
+                "icon": "ui-properties",
+                "variant": "outline"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "resp-drawer-body",
+              "component": "Text",
+              "props": {
+                "text": "A bottom sheet on phones, a side panel from md.",
+                "variant": "body"
+              }
+            }
+          ]
+        },
+        {
+          "id": "resp-scroll",
+          "component": "ScrollArea",
+          "props": {
+            "direction": "horizontal"
+          },
+          "children": [
+            {
+              "id": "resp-chip-0",
+              "component": "Chip",
+              "props": {
+                "label": "Bug"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-1",
+              "component": "Chip",
+              "props": {
+                "label": "iOS"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-2",
+              "component": "Chip",
+              "props": {
+                "label": "Android"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-3",
+              "component": "Chip",
+              "props": {
+                "label": "Desktop"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-4",
+              "component": "Chip",
+              "props": {
+                "label": "Web"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-5",
+              "component": "Chip",
+              "props": {
+                "label": "Infra"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            },
+            {
+              "id": "resp-chip-6",
+              "component": "Chip",
+              "props": {
+                "label": "Docs"
+              },
+              "style": {
+                "flexShrink": 0
+              }
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "id": "new-form",
+      "component": "Form",
+      "props": {
+        "name": "settings",
+        "summary": true,
+        "busy": {
+          "path": "/ui/saving"
+        }
+      },
+      "on": {
+        "submit": {
+          "event": {
+            "name": "saveSettings"
+          }
+        },
+        "invalid": {
+          "event": {
+            "name": "invalidSettings"
+          }
+        }
+      },
+      "children": [
+        {
+          "id": "nf-label",
+          "component": "Label",
+          "props": {
+            "text": "Seats",
+            "for": "nf-seats",
+            "required": true
+          }
+        },
+        {
+          "id": "nf-seats",
+          "component": "NumberField",
+          "props": {
+            "label": "Seats",
+            "name": "seats",
+            "value": {
+              "path": "/form/seats"
+            },
+            "min": 1,
+            "max": 50,
+            "unit": "seats",
+            "checks": [
+              {
+                "condition": {
+                  "call": "numeric",
+                  "args": {
+                    "value": {
+                      "path": "/form/seats"
+                    },
+                    "min": 1,
+                    "max": 50
+                  }
+                },
+                "message": "Between 1 and 50"
+              }
+            ]
+          }
+        },
+        {
+          "id": "nf-stack",
+          "component": "Grid",
+          "props": {
+            "columns": {
+              "base": 1,
+              "md": 2
+            },
+            "gap": "md"
+          },
+          "children": [
+            {
+              "id": "nf-time",
+              "component": "TimePicker",
+              "props": {
+                "label": "Daily digest",
+                "name": "digestAt",
+                "value": {
+                  "path": "/form/digestAt"
+                },
+                "step": 30
+              }
+            },
+            {
+              "id": "nf-range",
+              "component": "DateRangePicker",
+              "props": {
+                "label": "Sprint",
+                "name": "sprint",
+                "start": "2026-10-07",
+                "end": "2026-10-21"
+              }
+            }
+          ]
+        },
+        {
+          "id": "nf-labels",
+          "component": "ChipInput",
+          "props": {
+            "label": "Labels",
+            "name": "labels",
+            "values": {
+              "path": "/form/labels"
+            },
+            "suggestions": [
+              {
+                "label": "bug",
+                "value": "bug"
+              },
+              {
+                "label": "ios",
+                "value": "ios"
+              },
+              {
+                "label": "design",
+                "value": "design"
+              }
+            ],
+            "max": 5
+          }
+        },
+        {
+          "id": "nf-files",
+          "component": "FileUpload",
+          "props": {
+            "label": "Attachments",
+            "name": "files",
+            "accept": "image/*,.pdf",
+            "multiple": true,
+            "maxSize": 10485760,
+            "files": [
+              {
+                "name": "screenshot.png",
+                "size": 48213,
+                "type": "image/png"
+              }
+            ],
+            "hint": "PNG, JPG or PDF up to 10 MB"
+          },
+          "on": {
+            "upload": {
+              "event": {
+                "name": "upload"
+              }
+            },
+            "remove": {
+              "event": {
+                "name": "removeFile"
+              }
+            }
+          }
+        },
+        {
+          "id": "nf-rating",
+          "component": "Rating",
+          "props": {
+            "value": {
+              "path": "/form/rating"
+            },
+            "max": 5
+          }
+        },
+        {
+          "id": "nf-keys",
+          "component": "Stack",
+          "props": {
+            "direction": "horizontal",
+            "align": "center",
+            "gap": "xs"
+          },
+          "children": [
+            {
+              "id": "nf-keys-text",
+              "component": "Text",
+              "props": {
+                "text": "Save with",
+                "variant": "muted"
+              }
+            },
+            {
+              "id": "nf-kbd",
+              "component": "Kbd",
+              "props": {
+                "keys": "⌘S"
+              }
+            }
+          ]
+        },
+        {
+          "id": "nf-submit",
+          "component": "Button",
+          "props": {
+            "label": "Save",
+            "submit": true
+          }
+        }
+      ]
+    },
+    {
+      "id": "code",
+      "component": "CodeBlock",
+      "props": {
+        "code": "// the answer\nconst answer: number = 42\nexport function ask(q: string) {\n  return `${q}? ${answer}`\n}",
+        "language": "ts",
+        "title": "answer.ts",
+        "lineNumbers": true,
+        "highlight": [
+          2
+        ]
+      }
+    },
+    {
+      "id": "trace",
+      "component": "Trace",
+      "props": {
+        "size": "sm"
+      },
+      "children": [
+        {
+          "id": "trace-think",
+          "component": "TraceItem",
+          "props": {
+            "title": "Thought for 5s",
+            "icon": "trace-reasoning",
+            "size": "sm"
+          }
+        },
+        {
+          "id": "trace-run",
+          "component": "TraceItem",
+          "props": {
+            "title": "Ran bun test",
+            "icon": "trace-terminal",
+            "size": "sm",
+            "collapsible": true,
+            "open": true,
+            "status": "error"
+          },
+          "children": [
+            {
+              "id": "trace-out",
+              "component": "CodeBlock",
+              "props": {
+                "code": "\u001b[32m(pass)\u001b[0m Store > put\n\u001b[31m(fail)\u001b[0m Store > get\n\n 1 pass\n 1 fail",
+                "language": "ansi",
+                "title": "Output",
+                "size": "sm",
+                "variant": "destructive"
+              }
+            }
+          ]
+        },
+        {
+          "id": "trace-edit",
+          "component": "TraceItem",
+          "props": {
+            "title": "Editing src/store.ts",
+            "icon": "trace-edit",
+            "size": "sm",
+            "status": "running"
+          }
+        },
+        {
+          "id": "trace-next",
+          "component": "TraceItem",
+          "props": {
+            "title": "Run the suite again",
+            "icon": "trace-terminal",
+            "size": "sm",
+            "status": "pending"
+          }
+        }
+      ]
+    },
+    {
+      "id": "composer",
+      "component": "Composer",
+      "props": {
+        "placeholder": "Ask anything",
+        "attachments": true,
+        "submitLabel": "Send"
+      },
+      "on": {
+        "submit": {
+          "event": {
+            "name": "ask"
+          }
+        }
+      }
+    },
+    {
+      "id": "tab-bar",
+      "component": "Segmented",
+      "props": {
+        "items": [
+          {
+            "label": "Inbox",
+            "value": "inbox",
+            "icon": "nav-inbox"
+          },
+          {
+            "label": "Issues",
+            "value": "issues",
+            "icon": "nav-issues"
+          },
+          {
+            "label": "Settings",
+            "value": "settings",
+            "icon": "nav-settings"
+          }
+        ],
+        "value": {
+          "path": "/ui/tab"
+        },
+        "variant": "bar",
+        "fill": true
+      },
+      "on": {
+        "change": {
+          "event": {
+            "name": "tab"
+          }
+        }
+      }
+    },
+    {
+      "id": "panels",
+      "component": "Resizable",
+      "props": {
+        "direction": {
+          "base": "vertical",
+          "md": "horizontal"
+        },
+        "sizes": [
+          40,
+          60
+        ],
+        "panels": [
+          {
+            "min": 20
+          },
+          {
+            "min": 30,
+            "collapsible": true
+          }
+        ],
+        "handle": true
+      },
+      "style": {
+        "height": 160
+      },
+      "children": [
+        {
+          "id": "panels-nav",
+          "component": "Text",
+          "props": {
+            "text": "Boards",
+            "variant": "label"
+          },
+          "style": {
+            "padding": "$spacing.md"
+          }
+        },
+        {
+          "id": "panels-main",
+          "component": "Text",
+          "props": {
+            "text": "Drag the handle; arrow keys move it by 10.",
+            "variant": "muted"
+          },
+          "style": {
+            "padding": "$spacing.md"
+          }
+        }
+      ]
+    },
+    {
+      "id": "search-list",
+      "component": "SearchList",
+      "props": {
+        "placeholder": "Search issues",
+        "value": "exp-12",
+        "items": [
+          {
+            "label": "Ship the search list",
+            "value": "exp-12",
+            "identifier": "EXP-12",
+            "icon": "status-in-progress"
+          },
+          {
+            "label": "Spinner sizes",
+            "value": "exp-14",
+            "identifier": "EXP-14",
+            "icon": "status-backlog"
+          },
+          {
+            "label": "Close tabs on hover",
+            "value": "exp-15",
+            "identifier": "EXP-15",
+            "icon": "status-done"
+          }
+        ]
+      }
+    },
+    {
+      "id": "macros-demo",
+      "component": "Card",
+      "props": {
+        "title": "Layout macros"
+      },
+      "children": [
+        {
+          "id": "macros-page",
+          "component": "Page",
+          "props": {
+            "title": "Settings",
+            "subtitle": "Acme",
+            "back": true
+          },
+          "style": {
+            "height": 200
+          },
+          "slots": {
+            "trailing": {
+              "id": "macros-page-more",
+              "component": "Button",
+              "props": {
+                "icon": "ui-more",
+                "label": "More",
+                "variant": "ghost",
+                "size": "icon"
+              }
+            }
+          },
+          "children": [
+            {
+              "id": "macros-toolbar",
+              "component": "Toolbar",
+              "children": [
+                {
+                  "id": "macros-search",
+                  "component": "Input",
+                  "props": {
+                    "name": "q",
+                    "label": "Search",
+                    "type": "search",
+                    "placeholder": "Search"
+                  },
+                  "style": {
+                    "width": 240
+                  }
+                },
+                {
+                  "id": "macros-filter",
+                  "component": "Button",
+                  "props": {
+                    "label": "Filter",
+                    "variant": "outline"
+                  }
+                }
+              ],
+              "slots": {
+                "trailing": {
+                  "id": "macros-new",
+                  "component": "Button",
+                  "props": {
+                    "label": "New issue",
+                    "variant": "default"
+                  }
+                }
+              }
+            },
+            {
+              "id": "macros-fields",
+              "component": "FieldGroup",
+              "children": [
+                {
+                  "id": "starts",
+                  "component": "Input",
+                  "props": {
+                    "label": "Starts",
+                    "name": "starts",
+                    "value": "09:00"
+                  }
+                },
+                {
+                  "id": "ends",
+                  "component": "Input",
+                  "props": {
+                    "label": "Ends",
+                    "name": "ends",
+                    "value": "10:00"
+                  }
+                }
+              ]
+            },
+            {
+              "id": "macros-actions",
+              "component": "FormActions",
+              "props": {
+                "submit": "Save",
+                "cancel": true
+              }
+            }
+          ]
+        },
+        {
+          "id": "macros-split",
+          "component": "SplitView",
+          "props": {
+            "open": {
+              "path": "/ui/splitOpen"
+            },
+            "width": 200
+          },
+          "style": {
+            "height": 160
+          },
+          "slots": {
+            "list": {
+              "id": "macros-split-list",
+              "component": "List",
+              "children": [
+                {
+                  "id": "macros-split-r1",
+                  "component": "Row",
+                  "props": {
+                    "title": "Inbox",
+                    "selected": true,
+                    "pressable": true
+                  }
+                },
+                {
+                  "id": "macros-split-r2",
+                  "component": "Row",
+                  "props": {
+                    "title": "Drafts",
+                    "pressable": true
+                  }
+                }
+              ]
+            }
+          },
+          "children": [
+            {
+              "id": "macros-split-detail",
+              "component": "Text",
+              "props": {
+                "text": "The open item."
+              }
+            }
+          ]
+        },
+        {
+          "id": "macros-tiles",
+          "component": "Grid",
+          "props": {
+            "columns": {
+              "base": 1,
+              "md": 2
+            },
+            "gap": "md"
+          },
+          "children": [
+            {
+              "id": "macros-tile-1",
+              "component": "StatTile",
+              "props": {
+                "label": "Active users",
+                "value": "1,284",
+                "delta": "+12 %",
+                "tone": "success",
+                "trend": [
+                  3,
+                  4,
+                  3,
+                  5,
+                  6,
+                  8
+                ]
+              }
+            },
+            {
+              "id": "macros-tile-2",
+              "component": "StatTile",
+              "props": {
+                "label": "Error rate",
+                "value": "0.04 %",
+                "delta": "-0.01",
+                "tone": "danger"
+              }
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}