npm - @exponential_app/eui - Versions diffs - 0.2.1 → 0.3.0 - Mend

@exponential_app/eui 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (66) hide show

package/catalog/a11y.json +15 -1
package/catalog/core.catalog.json +142 -0
package/catalog/core.schema.json +198 -1
package/catalog/host.json +10 -0
package/catalog/macros.json +541 -1
package/catalog/recipes.json +2 -2
package/catalog/strings.json +5 -0
package/catalog/theme.schema.json +2066 -212
package/conformance/manifest.json +5 -5
package/dist/chunks/{index-gtk2gwsb.js → index-4z7f2bp1.js} +160 -33
package/dist/chunks/{index-gtk2gwsb.js.map → index-4z7f2bp1.js.map} +6 -5
package/dist/chunks/{index-5fmaa0xq.js → index-abcjanhc.js} +629 -3
package/dist/chunks/{index-5fmaa0xq.js.map → index-abcjanhc.js.map} +2 -2
package/dist/chunks/{index-62yzr94z.js → index-dx45asrf.js} +99 -3
package/dist/chunks/{index-62yzr94z.js.map → index-dx45asrf.js.map} +2 -2
package/dist/chunks/{index-bg2jsgjq.js → index-h3zgfghf.js} +304 -6
package/dist/chunks/{index-bg2jsgjq.js.map → index-h3zgfghf.js.map} +2 -2
package/dist/conformance.js +7901 -614
package/dist/conformance.js.map +2 -2
package/dist/entries/prompt.js +2 -2
package/dist/entries/schema.js +2 -2
package/dist/host/index.js +20 -4
package/dist/host/index.js.map +1 -1
package/dist/index.js +35 -5
package/dist/index.js.map +2 -2
package/dist/types/src/catalog.generated.d.ts +23 -3
package/dist/types/src/host/contract.d.ts +17 -0
package/dist/types/src/host/exposes.d.ts +68 -0
package/dist/types/src/host/index.d.ts +1 -0
package/dist/types/src/host/package.d.ts +8 -0
package/dist/types/src/web/primitives/carousel.d.ts +17 -0
package/dist/types/src/web/primitives/index.d.ts +3 -0
package/dist/types/src/web/primitives/mosaic.d.ts +30 -0
package/dist/types/src/web/primitives/outline.d.ts +22 -0
package/dist/web/index.js +8 -2
package/dist/web/index.js.map +4 -4
package/dist/web/primitives/index.js +59 -1
package/dist/web/primitives/index.js.map +6 -3
package/docs/components.generated.json +150 -1
package/docs/package-format.md +56 -1
package/docs/round-6-contract.md +108 -0
package/docs/themes.generated.json +39 -2
package/fixtures/bind-time.json +1464 -0
package/fixtures/catalog-components.json +96 -0
package/fixtures/catalog-macros.json +1159 -48
package/fixtures/conformance-baseline.json +46073 -44448
package/fixtures/conformance-known.json +76 -64
package/fixtures/host-router.json +539 -1
package/fixtures/kitchen-sink.expanded.json +614 -1
package/fixtures/kitchen-sink.json +69 -1
package/fixtures/primitive-specimens.json +3 -0
package/fixtures/prompt-budget.json +14 -14
package/fixtures/specimens.json +122 -0
package/fixtures/theme-recipes.json +4617 -1691
package/fixtures/theme-resolved.json +1154 -2
package/generated/ExponentialUICatalog.generated.kt +13 -13
package/generated/ExponentialUICatalog.generated.swift +13 -13
package/generated/ExponentialUIThemes.generated.kt +7 -7
package/generated/ExponentialUIThemes.generated.swift +7 -7
package/generated/catalog.descriptions.generated.rs +1 -1
package/generated/catalog.generated.rs +18 -18
package/generated/catalog.themes.generated.rs +8 -8
package/generated/core.descriptions.json +96 -0
package/generated/core.runtime.json +86 -0
package/package.json +1 -1
package/themes/neutral.theme.json +288 -0

package/fixtures/bind-time.json CHANGED Viewed

@@ -17495,6 +17495,1470 @@
         }
       ]
     },
+    {
+      "name": "Outline/bound:value",
+      "input": {
+        "id": "outline",
+        "component": "Outline",
+        "props": {
+          "caption": "Outline",
+          "value": {
+            "path": "/value"
+          },
+          "items": [
+            {
+              "id": "current",
+              "title": "Current state"
+            },
+            {
+              "id": "part-a",
+              "title": "Part A: editor-first creation",
+              "count": 5
+            },
+            {
+              "id": "part-b",
+              "title": "Part B: MCP for eApps",
+              "count": 2
+            }
+          ]
+        }
+      },
+      "expanded": {
+        "id": "outline",
+        "component": "Box",
+        "props": {},
+        "children": [
+          {
+            "id": "outline.caption",
+            "component": "Text",
+            "props": {
+              "text": "Outline",
+              "variant": "caption",
+              "lines": 1
+            },
+            "children": [],
+            "recipe": {
+              "macro": "Outline",
+              "part": "caption",
+              "props": {}
+            },
+            "accessibility": {
+              "hidden": true
+            }
+          },
+          {
+            "id": "outline.row.0",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.0.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "current",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.0.title",
+                "component": "Text",
+                "props": {
+                  "text": "Current state",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "current",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "current",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "current"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": "Current state",
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "current",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          },
+          {
+            "id": "outline.row.1",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.1.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-a",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.1.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part A: editor-first creation",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "part-a",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 5",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-a",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "part-a"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part A: editor-first creation",
+                    "count": 5
+                  }
+                }
+              },
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "part-a",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          },
+          {
+            "id": "outline.row.2",
+            "component": "Box",
+            "props": {
+              "pressable": true
+            },
+            "children": [
+              {
+                "id": "outline.row.2.bar",
+                "component": "Box",
+                "props": {},
+                "children": [],
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                },
+                "visible": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-b",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "bar",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              },
+              {
+                "id": "outline.row.2.title",
+                "component": "Text",
+                "props": {
+                  "text": "Part B: MCP for eApps",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "title",
+                  "props": {
+                    "active": {
+                      "call": "eq",
+                      "args": {
+                        "a": "part-b",
+                        "b": {
+                          "path": "/value"
+                        }
+                      }
+                    }
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2.count",
+                "component": "Text",
+                "props": {
+                  "text": "· 2",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "style": {
+                  "flexShrink": 0
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "count",
+                  "props": {}
+                },
+                "accessibility": {
+                  "hidden": true
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "row",
+              "alignItems": "center",
+              "gap": "$spacing.xs",
+              "position": "relative",
+              "height": "$control.rowCompact",
+              "paddingHorizontal": "$spacing.sm",
+              "minWidth": 0,
+              "overflow": "hidden",
+              "cursor": "pointer"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "row",
+              "props": {
+                "active": {
+                  "call": "eq",
+                  "args": {
+                    "a": "part-b",
+                    "b": {
+                      "path": "/value"
+                    }
+                  }
+                }
+              }
+            },
+            "on": {
+              "press": {
+                "functionCall": {
+                  "call": "set",
+                  "args": {
+                    "path": "/value",
+                    "value": "part-b"
+                  }
+                }
+              }
+            },
+            "accessibility": {
+              "role": "link",
+              "label": {
+                "call": "fill",
+                "args": {
+                  "template": "$string.outlineRow",
+                  "params": {
+                    "title": "Part B: MCP for eApps",
+                    "count": 2
+                  }
+                }
+              },
+              "current": {
+                "call": "cond",
+                "args": {
+                  "if": {
+                    "call": "eq",
+                    "args": {
+                      "a": "part-b",
+                      "b": {
+                        "path": "/value"
+                      }
+                    }
+                  },
+                  "then": "location",
+                  "else": false
+                }
+              }
+            }
+          }
+        ],
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xxs",
+          "minWidth": 0
+        },
+        "recipe": {
+          "macro": "Outline",
+          "part": "root",
+          "props": {}
+        },
+        "accessibility": {
+          "role": "navigation",
+          "label": "Outline"
+        }
+      },
+      "datasets": [
+        {
+          "data": {
+            "value": "part-a"
+          },
+          "bound": {
+            "id": "outline",
+            "component": "Box",
+            "props": {},
+            "children": [
+              {
+                "id": "outline.caption",
+                "component": "Text",
+                "props": {
+                  "text": "Outline",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "accessibility": {
+                  "hidden": true
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "caption",
+                  "props": {}
+                }
+              },
+              {
+                "id": "outline.row.0",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.0.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Current state",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "current"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Current state",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.1.bar",
+                    "component": "Box",
+                    "props": {},
+                    "children": [],
+                    "style": {
+                      "position": "absolute",
+                      "insetInlineStart": 0,
+                      "top": 0,
+                      "bottom": 0,
+                      "width": 2
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "bar",
+                      "props": {}
+                    }
+                  },
+                  {
+                    "id": "outline.row.1.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part A: editor-first creation",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": true
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.1.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 5",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-a"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part A: editor-first creation, 5",
+                  "current": "location"
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": true
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.2.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part B: MCP for eApps",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.2.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 2",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-b"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part B: MCP for eApps, 2",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "minWidth": 0
+            },
+            "accessibility": {
+              "role": "navigation",
+              "label": "Outline"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "root",
+              "props": {}
+            }
+          },
+          "presses": [
+            {
+              "id": "outline.row.0",
+              "outcome": {
+                "data": {
+                  "value": "current"
+                }
+              }
+            },
+            {
+              "id": "outline.row.1",
+              "outcome": {
+                "data": {
+                  "value": "part-a"
+                }
+              }
+            },
+            {
+              "id": "outline.row.2",
+              "outcome": {
+                "data": {
+                  "value": "part-b"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "data": {
+            "value": ""
+          },
+          "bound": {
+            "id": "outline",
+            "component": "Box",
+            "props": {},
+            "children": [
+              {
+                "id": "outline.caption",
+                "component": "Text",
+                "props": {
+                  "text": "Outline",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "accessibility": {
+                  "hidden": true
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "caption",
+                  "props": {}
+                }
+              },
+              {
+                "id": "outline.row.0",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.0.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Current state",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "current"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Current state",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.1.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part A: editor-first creation",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.1.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 5",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-a"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part A: editor-first creation, 5",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.2.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part B: MCP for eApps",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.2.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 2",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-b"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part B: MCP for eApps, 2",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "minWidth": 0
+            },
+            "accessibility": {
+              "role": "navigation",
+              "label": "Outline"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "root",
+              "props": {}
+            }
+          },
+          "presses": [
+            {
+              "id": "outline.row.0",
+              "outcome": {
+                "data": {
+                  "value": "current"
+                }
+              }
+            },
+            {
+              "id": "outline.row.1",
+              "outcome": {
+                "data": {
+                  "value": "part-a"
+                }
+              }
+            },
+            {
+              "id": "outline.row.2",
+              "outcome": {
+                "data": {
+                  "value": "part-b"
+                }
+              }
+            }
+          ]
+        },
+        {
+          "data": {},
+          "bound": {
+            "id": "outline",
+            "component": "Box",
+            "props": {},
+            "children": [
+              {
+                "id": "outline.caption",
+                "component": "Text",
+                "props": {
+                  "text": "Outline",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "children": [],
+                "accessibility": {
+                  "hidden": true
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "caption",
+                  "props": {}
+                }
+              },
+              {
+                "id": "outline.row.0",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.0.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Current state",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "current"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Current state",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.1",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.1.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part A: editor-first creation",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.1.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 5",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-a"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part A: editor-first creation, 5",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              },
+              {
+                "id": "outline.row.2",
+                "component": "Box",
+                "props": {
+                  "pressable": true
+                },
+                "children": [
+                  {
+                    "id": "outline.row.2.title",
+                    "component": "Text",
+                    "props": {
+                      "text": "Part B: MCP for eApps",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexGrow": 1,
+                      "flexShrink": 1,
+                      "flexBasis": 0,
+                      "minWidth": 0
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "title",
+                      "props": {
+                        "active": false
+                      }
+                    }
+                  },
+                  {
+                    "id": "outline.row.2.count",
+                    "component": "Text",
+                    "props": {
+                      "text": "· 2",
+                      "variant": "caption",
+                      "lines": 1
+                    },
+                    "children": [],
+                    "style": {
+                      "flexShrink": 0
+                    },
+                    "accessibility": {
+                      "hidden": true
+                    },
+                    "recipe": {
+                      "macro": "Outline",
+                      "part": "count",
+                      "props": {}
+                    }
+                  }
+                ],
+                "style": {
+                  "display": "flex",
+                  "flexDirection": "row",
+                  "alignItems": "center",
+                  "gap": "$spacing.xs",
+                  "position": "relative",
+                  "height": "$control.rowCompact",
+                  "paddingHorizontal": "$spacing.sm",
+                  "minWidth": 0,
+                  "overflow": "hidden",
+                  "cursor": "pointer"
+                },
+                "on": {
+                  "press": {
+                    "functionCall": {
+                      "call": "set",
+                      "args": {
+                        "path": "/value",
+                        "value": "part-b"
+                      }
+                    }
+                  }
+                },
+                "accessibility": {
+                  "role": "link",
+                  "label": "Part B: MCP for eApps, 2",
+                  "current": false
+                },
+                "recipe": {
+                  "macro": "Outline",
+                  "part": "row",
+                  "props": {
+                    "active": false
+                  }
+                }
+              }
+            ],
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "gap": "$spacing.xxs",
+              "minWidth": 0
+            },
+            "accessibility": {
+              "role": "navigation",
+              "label": "Outline"
+            },
+            "recipe": {
+              "macro": "Outline",
+              "part": "root",
+              "props": {}
+            }
+          },
+          "presses": [
+            {
+              "id": "outline.row.0",
+              "outcome": {
+                "data": {
+                  "value": "current"
+                }
+              }
+            },
+            {
+              "id": "outline.row.1",
+              "outcome": {
+                "data": {
+                  "value": "part-a"
+                }
+              }
+            },
+            {
+              "id": "outline.row.2",
+              "outcome": {
+                "data": {
+                  "value": "part-b"
+                }
+              }
+            }
+          ]
+        }
+      ]
+    },
     {
       "name": "Stepper/bound:current",
       "input": {