@exponential-at/ui 0.0.0-stage → 0.1.0

package/fixtures/catalog-basic-map.json

@@ -0,0 +1,1692 @@
+{
+  "$comment": "VAPP-85 (D14): the A2UI basic catalog cases. `components` are hand-written A2UI v0.9 component lists (every basic component, every variant that maps differently, bindings, a template child list, an unmapped component, a missing reference, a cycle); `expected` is generated by scripts/generate.ts from the TS reference reducer and locked here for the Rust core.",
+  "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json",
+  "cases": [
+    {
+      "name": "Text variants: h1 and h4 become Heading, h5 a label, caption and body stay Text",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "t1",
+            "t4",
+            "t5",
+            "tc",
+            "tb",
+            "td"
+          ]
+        },
+        {
+          "id": "t1",
+          "component": "Text",
+          "text": "Page",
+          "variant": "h1"
+        },
+        {
+          "id": "t4",
+          "component": "Text",
+          "text": "Section",
+          "variant": "h4"
+        },
+        {
+          "id": "t5",
+          "component": "Text",
+          "text": "Label",
+          "variant": "h5"
+        },
+        {
+          "id": "tc",
+          "component": "Text",
+          "text": "Caption",
+          "variant": "caption"
+        },
+        {
+          "id": "tb",
+          "component": "Text",
+          "text": "Body"
+        },
+        {
+          "id": "td",
+          "component": "Text",
+          "text": {
+            "path": "/user/name"
+          },
+          "variant": "body"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "t1",
+              "component": "Text",
+              "props": {
+                "text": "Page",
+                "variant": "title"
+              },
+              "children": [],
+              "recipe": {
+                "macro": "Heading",
+                "part": "root",
+                "props": {
+                  "level": "h1"
+                }
+              },
+              "accessibility": {
+                "role": "heading",
+                "level": 1
+              }
+            },
+            {
+              "id": "t4",
+              "component": "Text",
+              "props": {
+                "text": "Section",
+                "variant": "title"
+              },
+              "children": [],
+              "recipe": {
+                "macro": "Heading",
+                "part": "root",
+                "props": {
+                  "level": "h4"
+                }
+              },
+              "accessibility": {
+                "role": "heading",
+                "level": 4
+              }
+            },
+            {
+              "id": "t5",
+              "component": "Text",
+              "props": {
+                "text": "Label",
+                "variant": "label"
+              },
+              "children": []
+            },
+            {
+              "id": "tc",
+              "component": "Text",
+              "props": {
+                "text": "Caption",
+                "variant": "caption"
+              },
+              "children": []
+            },
+            {
+              "id": "tb",
+              "component": "Text",
+              "props": {
+                "text": "Body",
+                "variant": "body"
+              },
+              "children": []
+            },
+            {
+              "id": "td",
+              "component": "Text",
+              "props": {
+                "text": {
+                  "path": "/user/name"
+                },
+                "variant": "body"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Image variants: avatar becomes Avatar, the others size the box",
+      "components": [
+        {
+          "id": "root",
+          "component": "Row",
+          "justify": "spaceBetween",
+          "align": "center",
+          "children": [
+            "ia",
+            "ii",
+            "is",
+            "im",
+            "il",
+            "ih"
+          ]
+        },
+        {
+          "id": "ia",
+          "component": "Image",
+          "url": "https://example.com/a.png",
+          "description": "Alex Chen",
+          "variant": "avatar"
+        },
+        {
+          "id": "ii",
+          "component": "Image",
+          "url": "https://example.com/i.png",
+          "variant": "icon"
+        },
+        {
+          "id": "is",
+          "component": "Image",
+          "url": "https://example.com/s.png",
+          "description": "Small",
+          "variant": "smallFeature",
+          "fit": "contain"
+        },
+        {
+          "id": "im",
+          "component": "Image",
+          "url": "https://example.com/m.png",
+          "description": "Medium"
+        },
+        {
+          "id": "il",
+          "component": "Image",
+          "url": "https://example.com/l.png",
+          "description": "Large",
+          "variant": "largeFeature",
+          "fit": "scaleDown"
+        },
+        {
+          "id": "ih",
+          "component": "Image",
+          "url": "https://example.com/h.png",
+          "description": "Header",
+          "variant": "header"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "ia",
+              "component": "Avatar",
+              "props": {
+                "src": "https://example.com/a.png",
+                "name": "Alex Chen"
+              },
+              "children": []
+            },
+            {
+              "id": "ii",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/i.png",
+                "alt": "",
+                "fit": "cover"
+              },
+              "children": [],
+              "style": {
+                "width": 24,
+                "height": 24
+              }
+            },
+            {
+              "id": "is",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/s.png",
+                "alt": "Small",
+                "fit": "contain"
+              },
+              "children": [],
+              "style": {
+                "width": 120,
+                "height": 120
+              }
+            },
+            {
+              "id": "im",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/m.png",
+                "alt": "Medium",
+                "fit": "cover"
+              },
+              "children": [],
+              "style": {
+                "width": "100%",
+                "aspectRatio": 1.7777778
+              }
+            },
+            {
+              "id": "il",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/l.png",
+                "alt": "Large",
+                "fit": "scaleDown"
+              },
+              "children": [],
+              "style": {
+                "width": "100%",
+                "aspectRatio": 1.7777778
+              }
+            },
+            {
+              "id": "ih",
+              "component": "Image",
+              "props": {
+                "src": "https://example.com/h.png",
+                "alt": "Header",
+                "fit": "cover"
+              },
+              "children": [],
+              "style": {
+                "width": "100%",
+                "aspectRatio": 3
+              }
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "center",
+            "justifyContent": "space-between"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Icon names: a mapped name, an unmapped name and a custom path all paint",
+      "components": [
+        {
+          "id": "root",
+          "component": "Row",
+          "children": [
+            "ik",
+            "iu",
+            "ip"
+          ]
+        },
+        {
+          "id": "ik",
+          "component": "Icon",
+          "name": "search"
+        },
+        {
+          "id": "iu",
+          "component": "Icon",
+          "name": "volumeUp"
+        },
+        {
+          "id": "ip",
+          "component": "Icon",
+          "name": {
+            "path": "M0 0h24v24H0z"
+          }
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "ik",
+              "component": "Icon",
+              "props": {
+                "name": "nav-search"
+              },
+              "children": []
+            },
+            {
+              "id": "iu",
+              "component": "Icon",
+              "props": {
+                "name": "media-volume-up"
+              },
+              "children": []
+            },
+            {
+              "id": "ip",
+              "component": "Icon",
+              "props": {
+                "name": "ui-icon-placeholder"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Media: Video and AudioPlayer",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "v",
+            "a"
+          ]
+        },
+        {
+          "id": "v",
+          "component": "Video",
+          "url": "https://example.com/clip.mp4"
+        },
+        {
+          "id": "a",
+          "component": "AudioPlayer",
+          "url": "https://example.com/track.mp3",
+          "description": "Episode 12"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "v",
+              "component": "Video",
+              "props": {
+                "src": "https://example.com/clip.mp4"
+              },
+              "children": []
+            },
+            {
+              "id": "a",
+              "component": "AudioPlayer",
+              "props": {
+                "src": "https://example.com/track.mp3",
+                "title": "Episode 12"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Layout: Row and Column justify/align, List with a template child list, Card, Divider",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "justify": "spaceEvenly",
+          "align": "start",
+          "children": [
+            "card",
+            "div",
+            "list"
+          ]
+        },
+        {
+          "id": "card",
+          "component": "Card",
+          "child": "row"
+        },
+        {
+          "id": "row",
+          "component": "Row",
+          "justify": "stretch",
+          "align": "end",
+          "children": [
+            "t"
+          ]
+        },
+        {
+          "id": "t",
+          "component": "Text",
+          "text": "In a card"
+        },
+        {
+          "id": "div",
+          "component": "Divider",
+          "axis": "vertical"
+        },
+        {
+          "id": "list",
+          "component": "List",
+          "direction": "horizontal",
+          "children": {
+            "componentId": "item",
+            "path": "/items"
+          }
+        },
+        {
+          "id": "item",
+          "component": "Text",
+          "text": {
+            "path": "name"
+          }
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "card",
+              "component": "Box",
+              "props": {},
+              "children": [
+                {
+                  "id": "card.body",
+                  "component": "Box",
+                  "props": {},
+                  "children": [
+                    {
+                      "id": "row",
+                      "component": "Box",
+                      "props": {},
+                      "children": [
+                        {
+                          "id": "t",
+                          "component": "Text",
+                          "props": {
+                            "text": "In a card",
+                            "variant": "body"
+                          },
+                          "children": []
+                        }
+                      ],
+                      "style": {
+                        "display": "flex",
+                        "flexDirection": "row",
+                        "flexWrap": "nowrap",
+                        "gap": "$spacing.sm",
+                        "alignItems": "end",
+                        "justifyContent": "start"
+                      },
+                      "recipe": {
+                        "macro": "Stack",
+                        "part": "root",
+                        "props": {}
+                      }
+                    }
+                  ],
+                  "style": {
+                    "display": "flex",
+                    "flexDirection": "column",
+                    "gap": "$spacing.md",
+                    "padding": "$spacing.lg"
+                  },
+                  "recipe": {
+                    "macro": "Card",
+                    "part": "body",
+                    "props": {}
+                  }
+                }
+              ],
+              "style": {
+                "display": "flex",
+                "flexDirection": "column",
+                "borderRadius": "$radius.xl",
+                "overflow": "hidden"
+              },
+              "recipe": {
+                "macro": "Card",
+                "part": "root",
+                "props": {}
+              },
+              "accessibility": {
+                "role": "group"
+              }
+            },
+            {
+              "id": "div",
+              "component": "Box",
+              "props": {},
+              "children": [],
+              "style": {
+                "alignSelf": "stretch",
+                "flexShrink": 0,
+                "width": 1,
+                "height": "auto"
+              },
+              "recipe": {
+                "macro": "Separator",
+                "part": "root",
+                "props": {}
+              },
+              "accessibility": {
+                "role": "separator"
+              }
+            },
+            {
+              "id": "list",
+              "component": "List",
+              "props": {
+                "direction": "horizontal",
+                "gap": "sm"
+              },
+              "children": [],
+              "template": {
+                "component": "item",
+                "path": "/items"
+              }
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "start",
+            "justifyContent": "space-evenly"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": [],
+        "templates": {
+          "item": {
+            "id": "item",
+            "component": "Text",
+            "props": {
+              "text": {
+                "path": "name"
+              },
+              "variant": "body"
+            },
+            "children": []
+          }
+        }
+      }
+    },
+    {
+      "name": "Tabs: titles become headers, children the panels, the first tab active",
+      "components": [
+        {
+          "id": "root",
+          "component": "Tabs",
+          "tabs": [
+            {
+              "title": "Issue",
+              "child": "p1"
+            },
+            {
+              "title": {
+                "path": "/second"
+              },
+              "child": "p2"
+            }
+          ]
+        },
+        {
+          "id": "p1",
+          "component": "Text",
+          "text": "One"
+        },
+        {
+          "id": "p2",
+          "component": "Text",
+          "text": "Two"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Tabs",
+          "props": {
+            "tabs": [
+              {
+                "label": "Issue",
+                "value": "p1"
+              },
+              {
+                "label": {
+                  "path": "/second"
+                },
+                "value": "p2"
+              }
+            ],
+            "value": "p1"
+          },
+          "children": [
+            {
+              "id": "p1",
+              "component": "Text",
+              "props": {
+                "text": "One",
+                "variant": "body"
+              },
+              "children": []
+            },
+            {
+              "id": "p2",
+              "component": "Text",
+              "props": {
+                "text": "Two",
+                "variant": "body"
+              },
+              "children": []
+            }
+          ]
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Modal: trigger slot + content child become a Dialog",
+      "components": [
+        {
+          "id": "root",
+          "component": "Modal",
+          "trigger": "open",
+          "content": "body"
+        },
+        {
+          "id": "open",
+          "component": "Button",
+          "child": "openLabel",
+          "action": {
+            "event": {
+              "name": "noop"
+            }
+          }
+        },
+        {
+          "id": "openLabel",
+          "component": "Text",
+          "text": "Open"
+        },
+        {
+          "id": "body",
+          "component": "Text",
+          "text": "Inside the modal"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Dialog",
+          "props": {
+            "open": false
+          },
+          "children": [
+            {
+              "id": "body",
+              "component": "Text",
+              "props": {
+                "text": "Inside the modal",
+                "variant": "body"
+              },
+              "children": []
+            }
+          ],
+          "slots": {
+            "trigger": {
+              "id": "open",
+              "component": "Button",
+              "props": {
+                "variant": "secondary",
+                "label": "Open"
+              },
+              "children": [],
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "noop"
+                  }
+                }
+              }
+            }
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "Button: a Text child is the label, an Icon child the icon, another child nests; variants map; the action rides as press",
+      "components": [
+        {
+          "id": "root",
+          "component": "Row",
+          "children": [
+            "b1",
+            "b2",
+            "b3",
+            "b4"
+          ]
+        },
+        {
+          "id": "b1",
+          "component": "Button",
+          "child": "b1l",
+          "variant": "primary",
+          "action": {
+            "event": {
+              "name": "submit",
+              "context": {
+                "form": "login"
+              }
+            }
+          }
+        },
+        {
+          "id": "b1l",
+          "component": "Text",
+          "text": "Sign in"
+        },
+        {
+          "id": "b2",
+          "component": "Button",
+          "child": "b2i",
+          "variant": "borderless",
+          "action": {
+            "function": {
+              "call": "openUrl",
+              "args": {
+                "url": "https://example.com"
+              }
+            }
+          }
+        },
+        {
+          "id": "b2i",
+          "component": "Icon",
+          "name": "settings"
+        },
+        {
+          "id": "b3",
+          "component": "Button",
+          "child": "b3c",
+          "action": {
+            "event": {
+              "name": "more"
+            }
+          }
+        },
+        {
+          "id": "b3c",
+          "component": "Row",
+          "children": [
+            "b3t"
+          ]
+        },
+        {
+          "id": "b3t",
+          "component": "Text",
+          "text": "Nested"
+        },
+        {
+          "id": "b4",
+          "component": "Button",
+          "child": "b4l",
+          "variant": "default",
+          "action": {
+            "event": {
+              "name": "cancel"
+            }
+          }
+        },
+        {
+          "id": "b4l",
+          "component": "Text",
+          "text": {
+            "path": "/labels/cancel"
+          }
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "b1",
+              "component": "Button",
+              "props": {
+                "variant": "default",
+                "label": "Sign in"
+              },
+              "children": [],
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "submit",
+                    "context": {
+                      "form": "login"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              "id": "b2",
+              "component": "Button",
+              "props": {
+                "variant": "ghost",
+                "icon": "nav-settings",
+                "size": "icon"
+              },
+              "children": [],
+              "on": {
+                "press": {
+                  "function": {
+                    "call": "openUrl",
+                    "args": {
+                      "url": "https://example.com"
+                    }
+                  }
+                }
+              }
+            },
+            {
+              "id": "b3",
+              "component": "Button",
+              "props": {
+                "variant": "secondary"
+              },
+              "children": [
+                {
+                  "id": "b3c",
+                  "component": "Box",
+                  "props": {},
+                  "children": [
+                    {
+                      "id": "b3t",
+                      "component": "Text",
+                      "props": {
+                        "text": "Nested",
+                        "variant": "body"
+                      },
+                      "children": []
+                    }
+                  ],
+                  "style": {
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "flexWrap": "nowrap",
+                    "gap": "$spacing.sm",
+                    "alignItems": "stretch",
+                    "justifyContent": "start"
+                  },
+                  "recipe": {
+                    "macro": "Stack",
+                    "part": "root",
+                    "props": {}
+                  }
+                }
+              ],
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "more"
+                  }
+                }
+              }
+            },
+            {
+              "id": "b4",
+              "component": "Button",
+              "props": {
+                "variant": "secondary",
+                "label": {
+                  "path": "/labels/cancel"
+                }
+              },
+              "children": [],
+              "on": {
+                "press": {
+                  "event": {
+                    "name": "cancel"
+                  }
+                }
+              }
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "row",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "TextField: the four variants, a regex, checks and a bound value",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "short",
+            "long",
+            "num",
+            "pw",
+            "rx"
+          ]
+        },
+        {
+          "id": "short",
+          "component": "TextField",
+          "label": "Name"
+        },
+        {
+          "id": "long",
+          "component": "TextField",
+          "label": "Notes",
+          "variant": "longText",
+          "value": {
+            "path": "/notes"
+          }
+        },
+        {
+          "id": "num",
+          "component": "TextField",
+          "label": "Age",
+          "variant": "number",
+          "checks": [
+            {
+              "condition": {
+                "call": "numeric",
+                "args": {
+                  "value": {
+                    "path": "/age"
+                  },
+                  "min": 0
+                }
+              },
+              "message": "Not negative"
+            }
+          ]
+        },
+        {
+          "id": "pw",
+          "component": "TextField",
+          "label": "Password",
+          "variant": "obscured"
+        },
+        {
+          "id": "rx",
+          "component": "TextField",
+          "label": "Code",
+          "value": {
+            "path": "/code"
+          },
+          "validationRegexp": "^[A-Z]{3}$"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "short",
+              "component": "Input",
+              "props": {
+                "label": "Name",
+                "name": "short",
+                "type": "text"
+              },
+              "children": []
+            },
+            {
+              "id": "long",
+              "component": "Textarea",
+              "props": {
+                "label": "Notes",
+                "value": {
+                  "path": "/notes"
+                },
+                "name": "long"
+              },
+              "children": []
+            },
+            {
+              "id": "num",
+              "component": "Input",
+              "props": {
+                "label": "Age",
+                "checks": [
+                  {
+                    "condition": {
+                      "call": "numeric",
+                      "args": {
+                        "value": {
+                          "path": "/age"
+                        },
+                        "min": 0
+                      }
+                    },
+                    "message": "Not negative"
+                  }
+                ],
+                "name": "num",
+                "type": "number"
+              },
+              "children": []
+            },
+            {
+              "id": "pw",
+              "component": "Input",
+              "props": {
+                "label": "Password",
+                "name": "pw",
+                "type": "password"
+              },
+              "children": []
+            },
+            {
+              "id": "rx",
+              "component": "Input",
+              "props": {
+                "label": "Code",
+                "value": {
+                  "path": "/code"
+                },
+                "name": "rx",
+                "type": "text",
+                "checks": [
+                  {
+                    "condition": {
+                      "call": "regex",
+                      "args": {
+                        "value": {
+                          "path": "/code"
+                        },
+                        "pattern": "^[A-Z]{3}$"
+                      }
+                    },
+                    "message": "Invalid value"
+                  }
+                ]
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "CheckBox, Slider, DateTimeInput (time ignored) take their ids as names",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "agree",
+            "vol",
+            "due"
+          ]
+        },
+        {
+          "id": "agree",
+          "component": "CheckBox",
+          "label": "I agree",
+          "value": {
+            "path": "/agree"
+          }
+        },
+        {
+          "id": "vol",
+          "component": "Slider",
+          "label": "Volume",
+          "max": 100,
+          "value": 40
+        },
+        {
+          "id": "due",
+          "component": "DateTimeInput",
+          "label": "Due",
+          "value": "",
+          "enableDate": true,
+          "enableTime": true,
+          "min": "2026-01-01"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "agree",
+              "component": "Checkbox",
+              "props": {
+                "label": "I agree",
+                "checked": {
+                  "path": "/agree"
+                },
+                "name": "agree"
+              },
+              "children": []
+            },
+            {
+              "id": "vol",
+              "component": "Slider",
+              "props": {
+                "label": "Volume",
+                "min": 0,
+                "max": 100,
+                "value": 40
+              },
+              "children": []
+            },
+            {
+              "id": "due",
+              "component": "DatePicker",
+              "props": {
+                "label": "Due",
+                "value": "",
+                "min": "2026-01-01",
+                "name": "due"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "ChoicePicker: radio, chips (single and multiple), multiple checkboxes, filterable",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "radio",
+            "chips1",
+            "chipsN",
+            "multi",
+            "filter"
+          ]
+        },
+        {
+          "id": "radio",
+          "component": "ChoicePicker",
+          "label": "Plan",
+          "options": [
+            {
+              "label": "Free",
+              "value": "free"
+            },
+            {
+              "label": "Team",
+              "value": "team"
+            }
+          ],
+          "value": [
+            "free"
+          ]
+        },
+        {
+          "id": "chips1",
+          "component": "ChoicePicker",
+          "options": [
+            {
+              "label": "A",
+              "value": "a"
+            },
+            {
+              "label": "B",
+              "value": "b"
+            }
+          ],
+          "value": [
+            "b"
+          ],
+          "displayStyle": "chips"
+        },
+        {
+          "id": "chipsN",
+          "component": "ChoicePicker",
+          "variant": "multipleSelection",
+          "options": [
+            {
+              "label": "A",
+              "value": "a"
+            },
+            {
+              "label": "B",
+              "value": "b"
+            }
+          ],
+          "value": [
+            "a",
+            "b"
+          ],
+          "displayStyle": "chips"
+        },
+        {
+          "id": "multi",
+          "component": "ChoicePicker",
+          "variant": "multipleSelection",
+          "label": "Labels",
+          "options": [
+            {
+              "label": "Bug",
+              "value": "bug"
+            }
+          ],
+          "value": {
+            "path": "/labels"
+          }
+        },
+        {
+          "id": "filter",
+          "component": "ChoicePicker",
+          "label": "Member",
+          "options": [
+            {
+              "label": "Alex",
+              "value": "alex"
+            }
+          ],
+          "value": [],
+          "filterable": true
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "radio",
+              "component": "Radio",
+              "props": {
+                "label": "Plan",
+                "options": [
+                  {
+                    "label": "Free",
+                    "value": "free"
+                  },
+                  {
+                    "label": "Team",
+                    "value": "team"
+                  }
+                ],
+                "name": "radio",
+                "value": "free"
+              },
+              "children": []
+            },
+            {
+              "id": "chips1",
+              "component": "Segmented",
+              "props": {
+                "items": [
+                  {
+                    "label": "A",
+                    "value": "a"
+                  },
+                  {
+                    "label": "B",
+                    "value": "b"
+                  }
+                ],
+                "type": "single",
+                "variant": "outline",
+                "value": "b"
+              },
+              "children": []
+            },
+            {
+              "id": "chipsN",
+              "component": "Segmented",
+              "props": {
+                "items": [
+                  {
+                    "label": "A",
+                    "value": "a"
+                  },
+                  {
+                    "label": "B",
+                    "value": "b"
+                  }
+                ],
+                "type": "multiple",
+                "variant": "outline",
+                "value": "a,b"
+              },
+              "children": []
+            },
+            {
+              "id": "multi",
+              "component": "Select",
+              "props": {
+                "label": "Labels",
+                "options": [
+                  {
+                    "label": "Bug",
+                    "value": "bug"
+                  }
+                ],
+                "name": "multi",
+                "value": {
+                  "path": "/labels"
+                },
+                "multiple": true
+              },
+              "children": []
+            },
+            {
+              "id": "filter",
+              "component": "Select",
+              "props": {
+                "label": "Member",
+                "options": [
+                  {
+                    "label": "Alex",
+                    "value": "alex"
+                  }
+                ],
+                "name": "filter",
+                "value": "",
+                "searchable": true,
+                "multiple": false
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": []
+      }
+    },
+    {
+      "name": "An unmapped component becomes the Unknown placeholder, never an error",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "g",
+            "t"
+          ]
+        },
+        {
+          "id": "g",
+          "component": "Gauge",
+          "value": 3
+        },
+        {
+          "id": "t",
+          "component": "Text",
+          "text": "Still rendered"
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "g",
+              "component": "Unknown",
+              "props": {
+                "component": "Gauge",
+                "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json"
+              },
+              "children": []
+            },
+            {
+              "id": "t",
+              "component": "Text",
+              "props": {
+                "text": "Still rendered",
+                "variant": "body"
+              },
+              "children": []
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": [
+          {
+            "id": "g",
+            "message": "basic component Gauge has no mapping"
+          }
+        ]
+      }
+    },
+    {
+      "name": "A missing reference and a cycle become placeholders with issues",
+      "components": [
+        {
+          "id": "root",
+          "component": "Column",
+          "children": [
+            "nope",
+            "a"
+          ]
+        },
+        {
+          "id": "a",
+          "component": "Row",
+          "children": [
+            "b"
+          ]
+        },
+        {
+          "id": "b",
+          "component": "Row",
+          "children": [
+            "a"
+          ]
+        }
+      ],
+      "expected": {
+        "root": {
+          "id": "root",
+          "component": "Box",
+          "props": {},
+          "children": [
+            {
+              "id": "nope",
+              "component": "Unknown",
+              "props": {
+                "component": "#nope",
+                "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json"
+              },
+              "children": []
+            },
+            {
+              "id": "a",
+              "component": "Box",
+              "props": {},
+              "children": [
+                {
+                  "id": "b",
+                  "component": "Box",
+                  "props": {},
+                  "children": [
+                    {
+                      "id": "a",
+                      "component": "Unknown",
+                      "props": {
+                        "component": "Row",
+                        "catalogId": "https://a2ui.org/specification/v0_9/basic_catalog.json"
+                      },
+                      "children": []
+                    }
+                  ],
+                  "style": {
+                    "display": "flex",
+                    "flexDirection": "row",
+                    "flexWrap": "nowrap",
+                    "gap": "$spacing.sm",
+                    "alignItems": "stretch",
+                    "justifyContent": "start"
+                  },
+                  "recipe": {
+                    "macro": "Stack",
+                    "part": "root",
+                    "props": {}
+                  }
+                }
+              ],
+              "style": {
+                "display": "flex",
+                "flexDirection": "row",
+                "flexWrap": "nowrap",
+                "gap": "$spacing.sm",
+                "alignItems": "stretch",
+                "justifyContent": "start"
+              },
+              "recipe": {
+                "macro": "Stack",
+                "part": "root",
+                "props": {}
+              }
+            }
+          ],
+          "style": {
+            "display": "flex",
+            "flexDirection": "column",
+            "flexWrap": "nowrap",
+            "gap": "$spacing.sm",
+            "alignItems": "stretch",
+            "justifyContent": "start"
+          },
+          "recipe": {
+            "macro": "Stack",
+            "part": "root",
+            "props": {}
+          }
+        },
+        "issues": [
+          {
+            "id": "nope",
+            "message": "no component with this id"
+          },
+          {
+            "id": "a",
+            "message": "cycle through this id"
+          }
+        ]
+      }
+    }
+  ]
+}