mlola-ui 1.9.2 → 1.10.0

package/registry/render-rules.json

@@ -0,0 +1,1356 @@
+{
+  "$comment": "Generated by scripts/build-render-catalog.mjs from packages/registry/render/definition.json. Do not edit.",
+  "version": "1.10.0",
+  "catalogId": "https://ui.mlola.com/a2ui/catalog/v1",
+  "title": "Mlola Render catalog",
+  "description": "Mlola UI components for interfaces an agent composes at runtime. Every component is accessible by construction and follows the surface's theme; an agent picks named values (tone, variant, size) and never writes a color, size or class.",
+  "protocolVersions": [
+    "v0.9",
+    "v0.9.1"
+  ],
+  "themes": [
+    "graphite",
+    "atelier",
+    "machined",
+    "aerogel",
+    "nordic"
+  ],
+  "defaultTheme": "graphite",
+  "modes": [
+    "light",
+    "dark",
+    "system"
+  ],
+  "groups": {
+    "layout": "Layout",
+    "text": "Text",
+    "container": "Containers",
+    "form": "Forms",
+    "action": "Actions",
+    "data": "Data"
+  },
+  "limits": {
+    "messages": 200,
+    "surfaces": 20,
+    "components": 300,
+    "depth": 24,
+    "idLength": 128,
+    "textLength": 4000,
+    "labelLength": 120,
+    "options": 100,
+    "columns": 12,
+    "rows": 500,
+    "contextKeys": 32,
+    "pathLength": 512,
+    "dataBytes": 262144,
+    "inputBytes": 1048576
+  },
+  "components": {
+    "Stack": {
+      "group": "layout",
+      "description": "Places its children in a column with the theme's spacing. Use it as the root of most surfaces.",
+      "mlola": {
+        "class": "ml-stack"
+      },
+      "props": {
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The components inside, top to bottom."
+        }
+      }
+    },
+    "Row": {
+      "group": "layout",
+      "description": "Places its children side by side and wraps them on a narrow screen. Use it for a row of buttons or badges.",
+      "mlola": {
+        "class": "ml-cluster"
+      },
+      "props": {
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The components inside, start to end."
+        }
+      }
+    },
+    "Grid": {
+      "group": "layout",
+      "description": "Places its children in equal columns that collapse to one column on a phone.",
+      "mlola": {
+        "class": "ml-grid"
+      },
+      "props": {
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The components inside, in reading order."
+        },
+        "columns": {
+          "kind": "enum",
+          "description": "How many columns on a wide screen. Leave it out to fit as many as the width allows.",
+          "values": [
+            "1",
+            "2",
+            "3",
+            "4",
+            "6"
+          ]
+        }
+      }
+    },
+    "Heading": {
+      "group": "text",
+      "description": "A heading. Levels follow the page outline: never skip a level going deeper.",
+      "mlola": {
+        "element": "h1-h6"
+      },
+      "props": {
+        "text": {
+          "kind": "text",
+          "required": true,
+          "description": "The heading's words.",
+          "maxLength": 120
+        },
+        "level": {
+          "kind": "integer",
+          "description": "The outline level, 1 to 6. Inside a chat a surface usually starts at 2.",
+          "minimum": 1,
+          "maximum": 6,
+          "default": 2
+        }
+      }
+    },
+    "Text": {
+      "group": "text",
+      "description": "A paragraph of plain text.",
+      "mlola": {
+        "element": "p"
+      },
+      "props": {
+        "text": {
+          "kind": "text",
+          "required": true,
+          "description": "The words. Line breaks are kept; markup is shown as text."
+        }
+      }
+    },
+    "Card": {
+      "group": "container",
+      "description": "Groups related content on a surface of its own.",
+      "mlola": {
+        "item": "card",
+        "export": "Card"
+      },
+      "props": {
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The card's content."
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "How the card stands off the page.",
+          "values": [
+            "default",
+            "elevated",
+            "glass",
+            "specular"
+          ],
+          "default": "default"
+        }
+      }
+    },
+    "Alert": {
+      "group": "container",
+      "description": "A message about the surface: a confirmation, a warning or an error. Warnings and errors interrupt a screen reader; calmer tones are announced politely.",
+      "mlola": {
+        "item": "alert",
+        "export": "Alert"
+      },
+      "props": {
+        "title": {
+          "kind": "text",
+          "description": "A short summary, read first.",
+          "maxLength": 120
+        },
+        "text": {
+          "kind": "text",
+          "required": true,
+          "description": "What happened and what to do about it."
+        },
+        "tone": {
+          "kind": "enum",
+          "description": "What the message means.",
+          "values": [
+            "neutral",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "neutral"
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "A card, or a tinted band across the surface.",
+          "values": [
+            "card",
+            "soft"
+          ],
+          "default": "card"
+        }
+      }
+    },
+    "EmptyState": {
+      "group": "container",
+      "description": "Says that there is nothing here yet and what to do next.",
+      "mlola": {
+        "item": "empty-state",
+        "export": "EmptyState"
+      },
+      "props": {
+        "title": {
+          "kind": "text",
+          "required": true,
+          "description": "What is empty, in a few words.",
+          "maxLength": 120
+        },
+        "description": {
+          "kind": "text",
+          "description": "What to do next."
+        },
+        "children": {
+          "kind": "children",
+          "description": "Actions, usually one or two Buttons."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "inline inside a surface, page when it fills one.",
+          "values": [
+            "inline",
+            "page"
+          ],
+          "default": "inline"
+        }
+      }
+    },
+    "Tabs": {
+      "group": "container",
+      "description": "Shows one panel at a time, chosen from a row of tabs. Its children are Tab components.",
+      "accepts": [
+        "Tab"
+      ],
+      "mlola": {
+        "item": "tabs",
+        "export": "Tabs"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "What the tabs choose between, for a screen reader.",
+          "maxLength": 120
+        },
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The Tab components, in order.",
+          "minItems": 1
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "The look of the tab row.",
+          "values": [
+            "default",
+            "pills",
+            "enclosed"
+          ],
+          "default": "default"
+        }
+      }
+    },
+    "Tab": {
+      "group": "container",
+      "description": "One tab of a Tabs: its name and its panel.",
+      "parents": [
+        "Tabs"
+      ],
+      "mlola": {
+        "item": "tabs",
+        "export": "TabsTrigger"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The tab's name.",
+          "maxLength": 120
+        },
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "What the panel shows."
+        }
+      }
+    },
+    "Accordion": {
+      "group": "container",
+      "description": "A list of sections that open and close. Its children are AccordionItem components.",
+      "accepts": [
+        "AccordionItem"
+      ],
+      "mlola": {
+        "item": "accordion",
+        "export": "Accordion"
+      },
+      "props": {
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The AccordionItem components, in order.",
+          "minItems": 1
+        },
+        "type": {
+          "kind": "enum",
+          "description": "single keeps one section open at a time; multiple lets several stay open.",
+          "values": [
+            "single",
+            "multiple"
+          ],
+          "default": "single"
+        }
+      }
+    },
+    "AccordionItem": {
+      "group": "container",
+      "description": "One section of an Accordion: its title and its content.",
+      "parents": [
+        "Accordion"
+      ],
+      "mlola": {
+        "item": "accordion",
+        "export": "AccordionItem"
+      },
+      "props": {
+        "title": {
+          "kind": "text",
+          "required": true,
+          "description": "The section's title, which opens and closes it.",
+          "maxLength": 120
+        },
+        "children": {
+          "kind": "children",
+          "required": true,
+          "description": "The section's content."
+        }
+      }
+    },
+    "Input": {
+      "group": "form",
+      "description": "A one-line text field with its label.",
+      "mlola": {
+        "item": "input",
+        "export": "Input"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The field's name, shown above it and read by a screen reader.",
+          "maxLength": 120
+        },
+        "value": {
+          "kind": "text",
+          "description": "Bind it to the data model ({\"path\": \"/form/email\"}) so the value comes back with the action."
+        },
+        "type": {
+          "kind": "enum",
+          "description": "The kind of text, which picks the phone keyboard and the browser's checks.",
+          "values": [
+            "text",
+            "email",
+            "password",
+            "url",
+            "tel",
+            "search"
+          ],
+          "default": "text"
+        },
+        "placeholder": {
+          "kind": "text",
+          "description": "An example of what to type. Never a replacement for the label.",
+          "maxLength": 120
+        },
+        "hint": {
+          "kind": "text",
+          "description": "Help shown under the field.",
+          "maxLength": 120
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The form cannot be sent without it."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "How the field sits on its surface.",
+          "values": [
+            "default",
+            "filled",
+            "subtle"
+          ],
+          "default": "default"
+        }
+      }
+    },
+    "Textarea": {
+      "group": "form",
+      "description": "A text field for several lines, with its label.",
+      "mlola": {
+        "item": "textarea",
+        "export": "Textarea"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The field's name.",
+          "maxLength": 120
+        },
+        "value": {
+          "kind": "text",
+          "description": "Bind it to the data model so the value comes back with the action."
+        },
+        "placeholder": {
+          "kind": "text",
+          "description": "An example of what to type. Never the only label.",
+          "maxLength": 120
+        },
+        "hint": {
+          "kind": "text",
+          "description": "A short help line under the field.",
+          "maxLength": 120
+        },
+        "rows": {
+          "kind": "integer",
+          "description": "How many lines show before it scrolls.",
+          "minimum": 2,
+          "maximum": 12,
+          "default": 4
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The person must fill it in before the action is sent; a screen reader says so."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        }
+      }
+    },
+    "Select": {
+      "group": "form",
+      "description": "Picks one value from a list that opens on demand. Use RadioGroup when there are only two to five options and room to show them.",
+      "mlola": {
+        "item": "select",
+        "export": "Select"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The field's name.",
+          "maxLength": 120
+        },
+        "options": {
+          "kind": "options",
+          "required": true,
+          "description": "The choices, each {\"label\", \"value\"}.",
+          "minItems": 1
+        },
+        "value": {
+          "kind": "text",
+          "description": "The chosen option's value. Bind it to the data model."
+        },
+        "placeholder": {
+          "kind": "text",
+          "description": "Shown while nothing is chosen.",
+          "maxLength": 120
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The person must fill it in before the action is sent; a screen reader says so."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        }
+      }
+    },
+    "RadioGroup": {
+      "group": "form",
+      "description": "Picks one value from options that are all visible.",
+      "mlola": {
+        "item": "radio-group",
+        "export": "RadioGroup"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The question the options answer.",
+          "maxLength": 120
+        },
+        "options": {
+          "kind": "options",
+          "required": true,
+          "description": "The choices, each {\"label\", \"value\"}.",
+          "minItems": 2
+        },
+        "value": {
+          "kind": "text",
+          "description": "The chosen option's value. Bind it to the data model."
+        },
+        "orientation": {
+          "kind": "enum",
+          "description": "Options stacked or in a row.",
+          "values": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "vertical"
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The person must fill it in before the action is sent; a screen reader says so."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        }
+      }
+    },
+    "Checkbox": {
+      "group": "form",
+      "description": "A yes or no choice with its label.",
+      "mlola": {
+        "item": "checkbox",
+        "export": "Checkbox"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "What checking it means.",
+          "maxLength": 120
+        },
+        "checked": {
+          "kind": "boolean",
+          "description": "Bind it to the data model so the choice comes back with the action."
+        },
+        "description": {
+          "kind": "text",
+          "description": "More about the choice, under the label.",
+          "maxLength": 120
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The person must fill it in before the action is sent; a screen reader says so."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        }
+      }
+    },
+    "Switch": {
+      "group": "form",
+      "description": "Turns a setting on or off right away.",
+      "mlola": {
+        "item": "toggle",
+        "export": "Switch"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The setting it turns on.",
+          "maxLength": 120
+        },
+        "checked": {
+          "kind": "boolean",
+          "description": "Bind it to the data model."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        }
+      }
+    },
+    "Slider": {
+      "group": "form",
+      "description": "Picks a number in a range by dragging or with the arrow keys.",
+      "mlola": {
+        "item": "slider",
+        "export": "Slider"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "What the number is.",
+          "maxLength": 120
+        },
+        "value": {
+          "kind": "number",
+          "description": "Bind it to the data model."
+        },
+        "min": {
+          "kind": "number",
+          "description": "The lowest value.",
+          "literal": true,
+          "default": 0
+        },
+        "max": {
+          "kind": "number",
+          "description": "The highest value.",
+          "literal": true,
+          "default": 100
+        },
+        "step": {
+          "kind": "number",
+          "description": "How far one arrow press moves it.",
+          "literal": true,
+          "default": 1
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
+        }
+      }
+    },
+    "DatePicker": {
+      "group": "form",
+      "description": "A date field that opens a calendar and picks one day. The reader sees the date in their own format; the value is an ISO date.",
+      "mlola": {
+        "item": "date-picker",
+        "export": "DatePicker"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "The field's name.",
+          "maxLength": 120
+        },
+        "value": {
+          "kind": "date",
+          "description": "The chosen day as an ISO date, like \"2026-10-12\". Bind it to the data model so it comes back with the action."
+        },
+        "min": {
+          "kind": "date",
+          "description": "The earliest day that can be picked.",
+          "literal": true
+        },
+        "max": {
+          "kind": "date",
+          "description": "The latest day that can be picked.",
+          "literal": true
+        },
+        "hint": {
+          "kind": "text",
+          "description": "Help shown under the field.",
+          "maxLength": 120
+        },
+        "required": {
+          "kind": "boolean",
+          "description": "The form cannot be sent without it."
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        }
+      }
+    },
+    "Button": {
+      "group": "action",
+      "description": "Sends an action back to the agent. Its text says what happens (\"Create workspace\", not \"Submit\").",
+      "mlola": {
+        "item": "button",
+        "export": "Button"
+      },
+      "props": {
+        "text": {
+          "kind": "text",
+          "required": true,
+          "description": "What pressing it does.",
+          "maxLength": 120
+        },
+        "action": {
+          "kind": "action",
+          "required": true,
+          "description": "The event sent when it is pressed."
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "primary for the main action of a surface, one at most.",
+          "values": [
+            "primary",
+            "secondary",
+            "subtle",
+            "danger",
+            "outline",
+            "link"
+          ],
+          "default": "primary"
+        },
+        "size": {
+          "kind": "enum",
+          "description": "Icon-only buttons are not in the catalog: every button has words.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "excluded": [
+            "icon"
+          ],
+          "default": "md"
+        },
+        "width": {
+          "kind": "enum",
+          "description": "auto fits the words, full fills the container.",
+          "values": [
+            "auto",
+            "full"
+          ],
+          "default": "auto"
+        },
+        "disabled": {
+          "kind": "boolean",
+          "description": "Shows the control but does not let it change."
+        }
+      }
+    },
+    "Badge": {
+      "group": "data",
+      "description": "A short label for a status or a count.",
+      "mlola": {
+        "item": "badge",
+        "export": "Badge"
+      },
+      "props": {
+        "text": {
+          "kind": "text",
+          "required": true,
+          "description": "The badge's words, a few at most.",
+          "maxLength": 120
+        },
+        "tone": {
+          "kind": "enum",
+          "description": "What the status means.",
+          "values": [
+            "neutral",
+            "primary",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "neutral"
+        },
+        "variant": {
+          "kind": "enum",
+          "description": "How strongly the badge stands out.",
+          "values": [
+            "soft",
+            "solid",
+            "outline"
+          ],
+          "default": "soft"
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        }
+      }
+    },
+    "Progress": {
+      "group": "data",
+      "description": "Shows how far along something is.",
+      "mlola": {
+        "item": "progress",
+        "export": "Progress"
+      },
+      "props": {
+        "label": {
+          "kind": "text",
+          "required": true,
+          "description": "What is in progress, for a screen reader.",
+          "maxLength": 120
+        },
+        "value": {
+          "kind": "number",
+          "description": "How far along, from 0 to max."
+        },
+        "max": {
+          "kind": "number",
+          "description": "The value that means complete.",
+          "literal": true,
+          "default": 100
+        },
+        "showLabel": {
+          "kind": "boolean",
+          "description": "Shows the percentage beside the bar."
+        },
+        "tone": {
+          "kind": "enum",
+          "description": "What the progress means.",
+          "values": [
+            "primary",
+            "info",
+            "success",
+            "warning",
+            "danger"
+          ],
+          "default": "primary"
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The control size from the density scale.",
+          "values": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "default": "md"
+        }
+      }
+    },
+    "Avatar": {
+      "group": "data",
+      "description": "A person or a team shown by their initials.",
+      "mlola": {
+        "item": "avatar",
+        "export": "Avatar"
+      },
+      "props": {
+        "name": {
+          "kind": "text",
+          "required": true,
+          "description": "The full name: the initials come from it and a screen reader reads it.",
+          "maxLength": 120
+        },
+        "size": {
+          "kind": "enum",
+          "description": "The avatar's size.",
+          "values": [
+            "xs",
+            "sm",
+            "md",
+            "lg",
+            "xl"
+          ],
+          "default": "md"
+        },
+        "status": {
+          "kind": "enum",
+          "description": "A presence dot, announced with the name.",
+          "values": [
+            "online",
+            "offline",
+            "away",
+            "busy"
+          ]
+        }
+      }
+    },
+    "Table": {
+      "group": "data",
+      "description": "Rows of data under named columns. Cells hold text and numbers.",
+      "mlola": {
+        "item": "table",
+        "export": "Table"
+      },
+      "props": {
+        "caption": {
+          "kind": "text",
+          "required": true,
+          "description": "What the table shows, read first by a screen reader.",
+          "maxLength": 120
+        },
+        "columns": {
+          "kind": "columns",
+          "required": true,
+          "description": "Each {\"key\", \"label\", \"align\"?}: key names the row field the column shows.",
+          "minItems": 1,
+          "align": {
+            "values": [
+              "left",
+              "center",
+              "right"
+            ]
+          }
+        },
+        "rows": {
+          "kind": "rows",
+          "required": true,
+          "description": "An array of objects keyed by column key, or a path to one in the data model."
+        },
+        "size": {
+          "kind": "enum",
+          "description": "Row density.",
+          "values": [
+            "sm",
+            "md"
+          ],
+          "default": "md"
+        }
+      }
+    }
+  },
+  "aliases": {
+    "Column": "Stack",
+    "List": "Stack",
+    "TextField": "Input",
+    "CheckBox": "Checkbox",
+    "ChoicePicker": "Select",
+    "Toggle": "Switch",
+    "Label": "Text",
+    "Paragraph": "Text",
+    "Title": "Heading",
+    "Callout": "Alert",
+    "Banner": "Alert",
+    "Chip": "Badge",
+    "Tag": "Badge",
+    "ProgressBar": "Progress",
+    "DataTable": "Table",
+    "DataGrid": "Table",
+    "DateTimeInput": "DatePicker",
+    "DateInput": "DatePicker",
+    "Calendar": "DatePicker"
+  },
+  "borrowed": {
+    "components": {
+      "Image": "Say what matters in Text, or leave the image out.",
+      "Icon": "Every control has words: put the meaning in the text, or in a Badge.",
+      "Video": "Describe it in Text, or leave it out.",
+      "AudioPlayer": "Describe it in Text, or leave it out.",
+      "Modal": "A surface shows inline, with no dialog. Put the content on the surface, or in a Tab or an AccordionItem to keep it out of the way.",
+      "Divider": "Spacing comes from Stack, and a Card or a Heading separates groups. Leave the divider out."
+    },
+    "props": {
+      "weight": "Children share space by the theme's layout. For equal columns use a Grid.",
+      "justify": "A Row or a Stack places its children by the theme's layout. For equal columns use a Grid.",
+      "align": "A Row or a Stack places its children by the theme's layout. For equal columns use a Grid.",
+      "Stack.direction": "A Stack is a column. For side by side use a Row.",
+      "Text.variant": "Text is one style of paragraph. For a heading use a Heading with \"level\".",
+      "Button.child": "A Button holds its words in \"text\", not in a child component.",
+      "Tabs.tabs": "A Tabs' \"children\" are Tab components, each with a \"label\" and \"children\".",
+      "Checkbox.value": "A Checkbox's state is \"checked\": true, false or {\"path\": \"/…\"}.",
+      "Switch.value": "A Switch's state is \"checked\": true, false or {\"path\": \"/…\"}.",
+      "Input.validationRegexp": "Client-side checks are not in the Mlola catalog yet. Mark the field \"required\", and check the value when the action arrives.",
+      "Select.variant": "A Select picks one value. For several choices, use a Checkbox for each.",
+      "Select.displayStyle": "A Select always opens a list. For options that are all visible use a RadioGroup.",
+      "Select.filterable": "A Select lists its options as they are. Keep to the ones that matter, at most 100.",
+      "Input.variant=longText": "For several lines use a Textarea.",
+      "Input.variant=obscured": "For a password use \"type\": \"password\".",
+      "Input.variant=number": "Numbers are not a field type yet. Use a Slider for a number in a range, or an Input with a hint.",
+      "Input.variant=shortText": "An Input is one line already, so leave \"variant\" out.",
+      "Button.variant=default": "For a button beside the main one use \"secondary\".",
+      "Button.variant=borderless": "For a quiet button use \"subtle\" or \"link\".",
+      "DatePicker.enableDate": "A DatePicker always picks a day, so leave \"enableDate\" out.",
+      "DatePicker.enableTime": "Times are not in the Mlola catalog yet: a DatePicker picks a day. Ask for the time in an Input with a hint."
+    }
+  },
+  "examples": [
+    {
+      "name": "workspace-signup",
+      "title": "A sign-up form",
+      "description": "A form whose values are bound to the data model and come back with the button's action.",
+      "messages": [
+        {
+          "version": "v0.9.1",
+          "createSurface": {
+            "surfaceId": "signup",
+            "catalogId": "https://ui.mlola.com/a2ui/catalog/v1",
+            "theme": {
+              "name": "graphite",
+              "mode": "system"
+            }
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateComponents": {
+            "surfaceId": "signup",
+            "components": [
+              {
+                "id": "root",
+                "component": "Card",
+                "children": [
+                  "title",
+                  "form"
+                ]
+              },
+              {
+                "id": "title",
+                "component": "Heading",
+                "level": 2,
+                "text": "Create your workspace"
+              },
+              {
+                "id": "form",
+                "component": "Stack",
+                "children": [
+                  "name",
+                  "email",
+                  "plan",
+                  "actions"
+                ]
+              },
+              {
+                "id": "name",
+                "component": "Input",
+                "label": "Workspace name",
+                "value": {
+                  "path": "/form/name"
+                },
+                "required": true
+              },
+              {
+                "id": "email",
+                "component": "Input",
+                "type": "email",
+                "label": "Work email",
+                "value": {
+                  "path": "/form/email"
+                },
+                "required": true
+              },
+              {
+                "id": "plan",
+                "component": "RadioGroup",
+                "label": "Plan",
+                "options": [
+                  {
+                    "label": "Free",
+                    "value": "free"
+                  },
+                  {
+                    "label": "Team",
+                    "value": "team"
+                  }
+                ],
+                "value": {
+                  "path": "/form/plan"
+                }
+              },
+              {
+                "id": "actions",
+                "component": "Row",
+                "children": [
+                  "submit"
+                ]
+              },
+              {
+                "id": "submit",
+                "component": "Button",
+                "variant": "primary",
+                "text": "Create workspace",
+                "action": {
+                  "event": {
+                    "name": "create_workspace",
+                    "context": {
+                      "form": {
+                        "path": "/form"
+                      }
+                    }
+                  }
+                }
+              }
+            ]
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateDataModel": {
+            "surfaceId": "signup",
+            "path": "/form",
+            "value": {
+              "name": "",
+              "email": "",
+              "plan": "free"
+            }
+          }
+        }
+      ]
+    },
+    {
+      "name": "order-status",
+      "title": "A status summary with a table",
+      "description": "Read-only data: badges, a progress bar and a table whose rows come from the data model.",
+      "messages": [
+        {
+          "version": "v0.9.1",
+          "createSurface": {
+            "surfaceId": "orders",
+            "catalogId": "https://ui.mlola.com/a2ui/catalog/v1"
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateComponents": {
+            "surfaceId": "orders",
+            "components": [
+              {
+                "id": "root",
+                "component": "Stack",
+                "children": [
+                  "heading",
+                  "status",
+                  "progress",
+                  "table"
+                ]
+              },
+              {
+                "id": "heading",
+                "component": "Heading",
+                "level": 2,
+                "text": "This week's orders"
+              },
+              {
+                "id": "status",
+                "component": "Row",
+                "children": [
+                  "shipped",
+                  "waiting"
+                ]
+              },
+              {
+                "id": "shipped",
+                "component": "Badge",
+                "tone": "success",
+                "text": "42 shipped"
+              },
+              {
+                "id": "waiting",
+                "component": "Badge",
+                "tone": "warning",
+                "text": "3 waiting"
+              },
+              {
+                "id": "progress",
+                "component": "Progress",
+                "label": "Orders shipped",
+                "value": 42,
+                "max": 45,
+                "showLabel": true
+              },
+              {
+                "id": "table",
+                "component": "Table",
+                "caption": "Orders waiting to ship",
+                "columns": [
+                  {
+                    "key": "order",
+                    "label": "Order"
+                  },
+                  {
+                    "key": "city",
+                    "label": "City"
+                  },
+                  {
+                    "key": "items",
+                    "label": "Items",
+                    "align": "right"
+                  }
+                ],
+                "rows": {
+                  "path": "/waiting"
+                }
+              }
+            ]
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateDataModel": {
+            "surfaceId": "orders",
+            "path": "/waiting",
+            "value": [
+              {
+                "order": "#1041",
+                "city": "Surabaya",
+                "items": 2
+              },
+              {
+                "order": "#1042",
+                "city": "Bandung",
+                "items": 1
+              },
+              {
+                "order": "#1045",
+                "city": "Medan",
+                "items": 4
+              }
+            ]
+          }
+        }
+      ]
+    },
+    {
+      "name": "task-list",
+      "title": "A list from the data model",
+      "description": "A template repeats one component for each item of an array in the data model; inside it, relative paths read the item.",
+      "messages": [
+        {
+          "version": "v0.9.1",
+          "createSurface": {
+            "surfaceId": "tasks",
+            "catalogId": "https://ui.mlola.com/a2ui/catalog/v1",
+            "theme": {
+              "name": "nordic",
+              "mode": "system"
+            }
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateComponents": {
+            "surfaceId": "tasks",
+            "components": [
+              {
+                "id": "root",
+                "component": "Stack",
+                "children": [
+                  "heading",
+                  "list",
+                  "add"
+                ]
+              },
+              {
+                "id": "heading",
+                "component": "Heading",
+                "level": 2,
+                "text": "Due today"
+              },
+              {
+                "id": "list",
+                "component": "Stack",
+                "children": {
+                  "componentId": "task",
+                  "path": "/tasks"
+                }
+              },
+              {
+                "id": "task",
+                "component": "Row",
+                "children": [
+                  "done",
+                  "due"
+                ]
+              },
+              {
+                "id": "done",
+                "component": "Checkbox",
+                "label": {
+                  "path": "title"
+                },
+                "checked": {
+                  "path": "done"
+                }
+              },
+              {
+                "id": "due",
+                "component": "Badge",
+                "tone": "warning",
+                "text": {
+                  "path": "due"
+                }
+              },
+              {
+                "id": "add",
+                "component": "Button",
+                "text": "Add a task",
+                "action": {
+                  "event": {
+                    "name": "add_task"
+                  }
+                }
+              }
+            ]
+          }
+        },
+        {
+          "version": "v0.9.1",
+          "updateDataModel": {
+            "surfaceId": "tasks",
+            "path": "/tasks",
+            "value": [
+              {
+                "title": "Send the March invoice",
+                "done": false,
+                "due": "By 5 pm"
+              },
+              {
+                "title": "Confirm the venue",
+                "done": true,
+                "due": "Noon"
+              }
+            ]
+          }
+        }
+      ]
+    }
+  ]
+}