@exponential_app/eui 0.2.0 → 0.3.0

package/catalog/macros.json

@@ -1,5 +1,5 @@
 {
-  "$comment": "VAPP-85: the ONE declarative macro table. A macro component (core.catalog.json `kind: macro`) expands into this template before painting; the TS reference expander (src/macros.ts) and the Rust core apply the same table and fixtures/catalog-macros.json locks the output. Template node = { part, component, props?, style?, children?, slots?, $if?, $any?, $each?, $as?, $on?, $context?, $set?, $recipe?, $a11y? }. Values: `\"{props.x}\"` alone = the raw prop (a data BINDING passes through untouched, so two-way binding survives); `\"{props.x|fallback}\"` = with a default; `{…}` inside a longer string interpolates; `{id}` = the macro node's id; `{len(props.rows)}` = an array length; `{range(props.max|5)}` = the indexes 0..n-1 (for `$each`); `{index}` = the current $each index; `{!path}` negates. Value objects: $map {from, cases, default}, $cond [condition, then, else], $eq [a, b] (a number equals a string spelling it), $lt [a, b], $add [a, b], $sub [a, b], $clamp [value, min, max] (a missing bound does not clamp), $percent [value, max] (→ \"N%\"), $coalesce [a, b, …], $text value (→ the value as a string, absent when missing), $not condition, $fill [template, {name: value}] (ALWAYS emits the core `fill` call: the template is usually a `$string.<id>` sentence with `{name}` placeholders the surface's string table resolves at bind time). Object KEYS interpolate too (`\"@media (max-width: $breakpoint.{props.collapseBelow|md})\"`). `$if` = a condition or an array of conditions (all must hold); `$any` = an array where one must hold. `$each` repeats a part per item of an array (`$as` names the item, default `item`). Children: `\"$children\"` splices the author's children, `\"$slot:name\"` splices an author slot in place; `slots: {\"trigger\": \"$slot:trigger\"}` copies an author slot, `slots: {\"footer\": {template node}}` builds one as a part. `$on: {\"press\": \"change\"}` routes the author's `on.change` handler to this part's `press` (merging `$context` into an event action's context); without `$on` the author's `on` map stays on the root. `$set: {\"press\": {\"prop\": \"open\", \"value\": \"{!props.open}\"}}` = TWO-WAY BINDING (round 1): when the author's `props.open` is a data binding `{path}`, this part's `press` action also carries `functionCall: {call: \"set\", args: {path, value}}` (the value evaluated like any template value, so usually a call), key order `event` then `functionCall`; a literal prop adds nothing (the host owns the state through the routed event); when the author's routed handler is itself a FUNCTION (an Action carries one), it wins, no `set` is added and the reducer reports an issue. `$a11y: {role, label, description, level, expanded, current, selected, pressed, checked, valueNow, valueMin, valueMax, hidden, autoFocus}` = the part's ACCESSIBILITY (docs/round-1-contract.md §6): evaluated like props (a bound input emits a call) into the expanded node's `accessibility`; `role` is one of catalog/a11y.json `roles`; on the root the author's `accessibility` label/description win. Ids: the root keeps the author's id, parts get `<id>.<part>` and `<id>.<part>.<index>` under `$each`. Every expanded node carries `recipe: {macro, part, props}` where props = `recipeProps` evaluated from the author's props (+ a part's `$recipe`); the THEME (VAPP-92) keys its visual recipes on that, so nothing here states a colour, a border or a font — only structure and token-named spacing, radius and control heights. VAPP-163: the expansion ROOT's recipe also carries `authored` = the top-level keys of the style written ON the macro node (condition blocks count as one key), SORTED, omitted when none; painters apply native recipe < node style < part recipe < those authored keys, so an author's colour or size on a Heading/Badge beats the theme's part recipe while the template's own structure does not (only the author's keys count: a macro node an outer template drew passes on just its root's `authored`, never template style). Macros may use other macros (Row → TreeGuides); expansion recurses until every node is native (innermost recipe wins). ROUND 1 (docs/round-1-contract.md §1, BOUND INPUTS): when an expression input is a data binding `{path}` or a function call, the expander does NOT evaluate — it EMITS an A2UI function call the renderer evaluates at bind time, over the core functions: interpolation → concat, `|fallback` → fallback (as an operand; a whole-string MEMBER of props/style/context passes the binding itself through, so two-way binding survives), `!` → not, len → len, $map → map, $cond → cond, $eq → eq, $lt → lt, $add → add, $sub → sub, $percent → percent, $text → text, $coalesce → coalesce, $not → not; a `$if`/`$any` whose conditions are bound emits the part WITH `visible` = the bound condition (`and{values}` over several bound `$if`s, `or{values}` over several bound `$any`s; literal conditions still decide at expansion); `$each` over a bound array emits nothing (use List with a template); a `$recipe` value may therefore be a call too (renderers resolve recipe props like props). RESPONSIVE PROPS: an author prop `{base, sm?, md?, lg?, xl?}` on a `responsive` prop is evaluated per breakpoint: a part's style is computed with the `base` values, then once per breakpoint named (ascending sm<md<lg<xl, each key inheriting the last smaller one) and every key that changed lands in a `\"@media (min-width: $breakpoint.<bp>)\"` block of that part; props and conditions see the `base` value. Strings of the form `$string.<id>` (catalog/strings.json) are built-in UI copy the renderer shows in the surface locale. Round 3 (VAPP-102): AFTER the table is applied the core runs ONE post-expansion pass, src/tree-guides.ts applyTreeGuides (Rust: tree_guides::apply): over every node's children in order, each Row root (`recipe.macro` Row, part root) contributes its numeric `recipe.props.depth` (anything else counts as depth 0 and ends every subtree), the ×4 treeGuides rule (elbow at depth-1, tee while a later sibling follows, pass-through for every ancestor level that continues) fills the Row's `guides` part (a TreeGuides) with `elbowAt`/`tee`/`passThrough`; fixtures/tree-guides.json locks the rule, catalog-macros.json the filled trees.",
+  "$comment": "VAPP-85: the ONE declarative macro table. A macro component (core.catalog.json `kind: macro`) expands into this template before painting; the TS reference expander (src/macros.ts) and the Rust core apply the same table and fixtures/catalog-macros.json locks the output. Template node = { part, component, props?, style?, children?, slots?, $if?, $any?, $each?, $as?, $on?, $context?, $set?, $recipe?, $a11y? }. Values: `\"{props.x}\"` alone = the raw prop (a data BINDING passes through untouched, so two-way binding survives); `\"{props.x|fallback}\"` = with a default; `{…}` inside a longer string interpolates; `{id}` = the macro node's id; `{len(props.rows)}` = an array length; `{range(props.max|5)}` = the indexes 0..n-1 (for `$each`); `{index}` = the current $each index; `{!path}` negates. Value objects: $map {from, cases, default}, $cond [condition, then, else], $eq [a, b] (a number equals a string spelling it), $lt [a, b], $add [a, b], $sub [a, b], $clamp [value, min, max] (a missing bound does not clamp), $percent [value, max] (→ \"N%\"), $coalesce [a, b, …], $text value (→ the value as a string, absent when missing), $not condition, $fill [template, {name: value}] (ALWAYS emits the core `fill` call: the template is usually a `$string.<id>` sentence with `{name}` placeholders the surface's string table resolves at bind time). Object KEYS interpolate too (`\"@media (max-width: $breakpoint.{props.collapseBelow|md})\"`). `$if` = a condition or an array of conditions (all must hold); `$any` = an array where one must hold. `$each` repeats a part per item of an array (`$as` names the item, default `item`). Children: `\"$children\"` splices the author's children, `\"$slot:name\"` splices an author slot in place; `slots: {\"trigger\": \"$slot:trigger\"}` copies an author slot, `slots: {\"footer\": {template node}}` builds one as a part. `$on: {\"press\": \"change\"}` routes the author's `on.change` handler to this part's `press` (merging `$context` into an event action's context); without `$on` the author's `on` map stays on the root. `$set: {\"press\": {\"prop\": \"open\", \"value\": \"{!props.open}\"}}` = TWO-WAY BINDING (round 1): when the author's `props.open` is a data binding `{path}`, this part's `press` action also carries `functionCall: {call: \"set\", args: {path, value}}` (the value evaluated like any template value, so usually a call), key order `event` then `functionCall`; a literal prop adds nothing (the host owns the state through the routed event); when the author's routed handler is itself a FUNCTION (an Action carries one), it wins, no `set` is added and the reducer reports an issue. `$a11y: {role, label, description, level, expanded, current, selected, pressed, checked, valueNow, valueMin, valueMax, hidden, autoFocus}` = the part's ACCESSIBILITY (docs/round-1-contract.md §6): evaluated like props (a bound input emits a call) into the expanded node's `accessibility`; `role` is one of catalog/a11y.json `roles`; on the root the author's `accessibility` label/description win. Ids: the root keeps the author's id, parts get `<id>.<part>` and `<id>.<part>.<index>` under `$each`. Every expanded node carries `recipe: {macro, part, props}` where props = `recipeProps` evaluated from the author's props (+ a part's `$recipe`); the THEME (VAPP-92) keys its visual recipes on that, so nothing here states a colour, a border or a font — only structure and token-named spacing, radius and control heights. VAPP-163: the expansion ROOT's recipe also carries `authored` = the top-level keys of the style written ON the macro node (condition blocks count as one key), SORTED, omitted when none; painters apply native recipe < node style < part recipe < those authored keys, so an author's colour or size on a Heading/Badge beats the theme's part recipe while the template's own structure does not (only the author's keys count: a macro node an outer template drew passes on just its root's `authored`, never template style). Macros may use other macros (Row → TreeGuides); expansion recurses until every node is native (innermost recipe wins). ROUND 1 (docs/round-1-contract.md §1, BOUND INPUTS): when an expression input is a data binding `{path}` or a function call, the expander does NOT evaluate — it EMITS an A2UI function call the renderer evaluates at bind time, over the core functions: interpolation → concat, `|fallback` → fallback (as an operand; a whole-string MEMBER of props/style/context passes the binding itself through, so two-way binding survives), `!` → not, len → len, $map → map, $cond → cond, $eq → eq, $lt → lt, $add → add, $sub → sub, $percent → percent, $text → text, $coalesce → coalesce, $not → not; a `$if`/`$any` whose conditions are bound emits the part WITH `visible` = the bound condition (`and{values}` over several bound `$if`s, `or{values}` over several bound `$any`s; literal conditions still decide at expansion); `$each` over a bound array emits nothing (use List with a template); a `$recipe` value may therefore be a call too (renderers resolve recipe props like props). RESPONSIVE PROPS: an author prop `{base, sm?, md?, lg?, xl?}` on a `responsive` prop is evaluated per breakpoint: a part's style is computed with the `base` values, then once per breakpoint named (ascending sm<md<lg<xl, each key inheriting the last smaller one) and every key that changed lands in a `\"@media (min-width: $breakpoint.<bp>)\"` block of that part; props and conditions see the `base` value. Strings of the form `$string.<id>` (catalog/strings.json) are built-in UI copy the renderer shows in the surface locale. Round 3 (VAPP-102): AFTER the table is applied the core runs ONE post-expansion pass, src/tree-guides.ts applyTreeGuides (Rust: tree_guides::apply): over every node's children in order, each Row root (`recipe.macro` Row, part root) contributes its numeric `recipe.props.depth` (anything else counts as depth 0 and ends every subtree), the ×4 treeGuides rule (elbow at depth-1, tee while a later sibling follows, pass-through for every ancestor level that continues) fills the Row's `guides` part (a TreeGuides) with `elbowAt`/`tee`/`passThrough`; fixtures/tree-guides.json locks the rule, catalog-macros.json the filled trees. EXP-1495 (docs/round-6-contract.md): Outline (the anchor list) and Mosaic (the wide picture group) are macros over Box/Text/Image.",
   "macros": {
     "Stack": {
       "recipeProps": [],
@@ -2333,6 +2333,169 @@
         ]
       }
     },
+    "Outline": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "navigation",
+          "label": "{props.caption|$string.outline}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "column",
+          "gap": "$spacing.xxs",
+          "minWidth": 0
+        },
+        "children": [
+          {
+            "part": "caption",
+            "component": "Text",
+            "$if": "props.caption",
+            "props": {
+              "text": "{props.caption}",
+              "variant": "caption",
+              "lines": 1
+            },
+            "$a11y": {
+              "hidden": true
+            }
+          },
+          {
+            "part": "row",
+            "component": "Box",
+            "$each": "props.items",
+            "$as": "item",
+            "props": {
+              "pressable": 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": {
+              "active": {
+                "$eq": [
+                  "{item.id}",
+                  "{props.value}"
+                ]
+              }
+            },
+            "$a11y": {
+              "role": "link",
+              "label": {
+                "$cond": [
+                  "item.count",
+                  {
+                    "$fill": [
+                      "$string.outlineRow",
+                      {
+                        "title": "{item.title}",
+                        "count": "{item.count}"
+                      }
+                    ]
+                  },
+                  "{item.title}"
+                ]
+              },
+              "current": {
+                "$cond": [
+                  {
+                    "$eq": [
+                      "{item.id}",
+                      "{props.value}"
+                    ]
+                  },
+                  "location",
+                  false
+                ]
+              }
+            },
+            "$on": {
+              "press": "select"
+            },
+            "$context": {
+              "id": "{item.id}"
+            },
+            "$set": {
+              "press": {
+                "prop": "value",
+                "value": "{item.id}"
+              }
+            },
+            "children": [
+              {
+                "part": "bar",
+                "component": "Box",
+                "$if": {
+                  "$eq": [
+                    "{item.id}",
+                    "{props.value}"
+                  ]
+                },
+                "$a11y": {
+                  "hidden": true
+                },
+                "style": {
+                  "position": "absolute",
+                  "insetInlineStart": 0,
+                  "top": 0,
+                  "bottom": 0,
+                  "width": 2
+                }
+              },
+              {
+                "part": "title",
+                "component": "Text",
+                "props": {
+                  "text": "{item.title}",
+                  "lines": 1
+                },
+                "$recipe": {
+                  "active": {
+                    "$eq": [
+                      "{item.id}",
+                      "{props.value}"
+                    ]
+                  }
+                },
+                "style": {
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "minWidth": 0
+                }
+              },
+              {
+                "part": "count",
+                "component": "Text",
+                "$if": "item.count",
+                "props": {
+                  "text": "· {item.count}",
+                  "variant": "caption",
+                  "lines": 1
+                },
+                "$a11y": {
+                  "hidden": true
+                },
+                "style": {
+                  "flexShrink": 0
+                }
+              }
+            ]
+          }
+        ]
+      }
+    },
     "Stepper": {
       "recipeProps": [
         "orientation"
@@ -4147,6 +4310,383 @@
           }
         ]
       }
+    },
+    "Mosaic": {
+      "recipeProps": [],
+      "root": {
+        "part": "root",
+        "component": "Box",
+        "$a11y": {
+          "role": "group",
+          "label": "{props.label}"
+        },
+        "style": {
+          "display": "flex",
+          "flexDirection": "row",
+          "width": "100%",
+          "aspectRatio": 1.6,
+          "minWidth": 0
+        },
+        "children": [
+          {
+            "part": "lead",
+            "component": "Box",
+            "$if": "props.pictures.0",
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "position": "relative",
+              "overflow": "hidden",
+              "minWidth": 0,
+              "minHeight": 0,
+              "cursor": "pointer",
+              "flexGrow": {
+                "$cond": [
+                  {
+                    "$lt": [
+                      2,
+                      "{len(props.pictures)}"
+                    ]
+                  },
+                  0,
+                  1
+                ]
+              },
+              "flexShrink": {
+                "$cond": [
+                  {
+                    "$lt": [
+                      2,
+                      "{len(props.pictures)}"
+                    ]
+                  },
+                  0,
+                  1
+                ]
+              },
+              "flexBasis": {
+                "$cond": [
+                  {
+                    "$lt": [
+                      2,
+                      "{len(props.pictures)}"
+                    ]
+                  },
+                  "60%",
+                  0
+                ]
+              },
+              "height": "100%"
+            },
+            "$recipe": {
+              "size": {
+                "$cond": [
+                  {
+                    "$lt": [
+                      2,
+                      "{len(props.pictures)}"
+                    ]
+                  },
+                  "large",
+                  {
+                    "$cond": [
+                      {
+                        "$lt": [
+                          1,
+                          "{len(props.pictures)}"
+                        ]
+                      },
+                      "half",
+                      "large"
+                    ]
+                  }
+                ]
+              }
+            },
+            "$a11y": {
+              "role": "button",
+              "label": "{props.pictures.0.alt}"
+            },
+            "$on": {
+              "press": "select"
+            },
+            "$context": {
+              "index": 0
+            },
+            "children": [
+              {
+                "part": "image",
+                "component": "Image",
+                "props": {
+                  "src": "{props.pictures.0.src}",
+                  "alt": "{props.pictures.0.alt}",
+                  "fit": "cover"
+                },
+                "$a11y": {
+                  "hidden": true
+                },
+                "style": {
+                  "position": "absolute",
+                  "inset": 0,
+                  "width": "100%",
+                  "height": "100%"
+                }
+              }
+            ]
+          },
+          {
+            "part": "pair",
+            "component": "Box",
+            "$if": [
+              {
+                "$eq": [
+                  "{len(props.pictures)}",
+                  2
+                ]
+              }
+            ],
+            "props": {
+              "pressable": true
+            },
+            "style": {
+              "position": "relative",
+              "overflow": "hidden",
+              "minWidth": 0,
+              "minHeight": 0,
+              "cursor": "pointer",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "flexBasis": 0,
+              "height": "100%"
+            },
+            "$recipe": {
+              "size": "half"
+            },
+            "$a11y": {
+              "role": "button",
+              "label": "{props.pictures.1.alt}"
+            },
+            "$on": {
+              "press": "select"
+            },
+            "$context": {
+              "index": 1
+            },
+            "children": [
+              {
+                "part": "image",
+                "component": "Image",
+                "props": {
+                  "src": "{props.pictures.1.src}",
+                  "alt": "{props.pictures.1.alt}",
+                  "fit": "cover"
+                },
+                "$a11y": {
+                  "hidden": true
+                },
+                "style": {
+                  "position": "absolute",
+                  "inset": 0,
+                  "width": "100%",
+                  "height": "100%"
+                }
+              }
+            ]
+          },
+          {
+            "part": "side",
+            "component": "Box",
+            "$if": {
+              "$lt": [
+                2,
+                "{len(props.pictures)}"
+              ]
+            },
+            "style": {
+              "display": "flex",
+              "flexDirection": "column",
+              "flexGrow": 1,
+              "flexShrink": 1,
+              "flexBasis": 0,
+              "minWidth": 0,
+              "height": "100%"
+            },
+            "children": [
+              {
+                "part": "top",
+                "component": "Box",
+                "$if": "props.pictures.1",
+                "props": {
+                  "pressable": true
+                },
+                "style": {
+                  "position": "relative",
+                  "overflow": "hidden",
+                  "minWidth": 0,
+                  "minHeight": 0,
+                  "cursor": "pointer",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "width": "100%"
+                },
+                "$recipe": {
+                  "size": "small"
+                },
+                "$a11y": {
+                  "role": "button",
+                  "label": "{props.pictures.1.alt}"
+                },
+                "$on": {
+                  "press": "select"
+                },
+                "$context": {
+                  "index": 1
+                },
+                "children": [
+                  {
+                    "part": "image",
+                    "component": "Image",
+                    "props": {
+                      "src": "{props.pictures.1.src}",
+                      "alt": "{props.pictures.1.alt}",
+                      "fit": "cover"
+                    },
+                    "$a11y": {
+                      "hidden": true
+                    },
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "width": "100%",
+                      "height": "100%"
+                    }
+                  }
+                ]
+              },
+              {
+                "part": "bottom",
+                "component": "Box",
+                "$if": "props.pictures.2",
+                "props": {
+                  "pressable": true
+                },
+                "style": {
+                  "position": "relative",
+                  "overflow": "hidden",
+                  "minWidth": 0,
+                  "minHeight": 0,
+                  "cursor": "pointer",
+                  "flexGrow": 1,
+                  "flexShrink": 1,
+                  "flexBasis": 0,
+                  "width": "100%"
+                },
+                "$recipe": {
+                  "size": "small"
+                },
+                "$a11y": {
+                  "role": "button",
+                  "label": {
+                    "$cond": [
+                      {
+                        "$lt": [
+                          3,
+                          "{len(props.pictures)}"
+                        ]
+                      },
+                      {
+                        "$fill": [
+                          "$string.morePicturesLabel",
+                          {
+                            "alt": "{props.pictures.2.alt}",
+                            "count": {
+                              "$sub": [
+                                "{len(props.pictures)}",
+                                3
+                              ]
+                            }
+                          }
+                        ]
+                      },
+                      "{props.pictures.2.alt}"
+                    ]
+                  }
+                },
+                "$on": {
+                  "press": "select"
+                },
+                "$context": {
+                  "index": 2
+                },
+                "children": [
+                  {
+                    "part": "image",
+                    "component": "Image",
+                    "props": {
+                      "src": "{props.pictures.2.src}",
+                      "alt": "{props.pictures.2.alt}",
+                      "fit": "cover"
+                    },
+                    "$a11y": {
+                      "hidden": true
+                    },
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "width": "100%",
+                      "height": "100%"
+                    }
+                  },
+                  {
+                    "part": "more",
+                    "component": "Box",
+                    "$if": {
+                      "$lt": [
+                        3,
+                        "{len(props.pictures)}"
+                      ]
+                    },
+                    "$a11y": {
+                      "hidden": true
+                    },
+                    "style": {
+                      "position": "absolute",
+                      "inset": 0,
+                      "display": "flex",
+                      "alignItems": "center",
+                      "justifyContent": "center"
+                    },
+                    "children": [
+                      {
+                        "part": "moreLabel",
+                        "component": "Text",
+                        "props": {
+                          "text": {
+                            "$fill": [
+                              "$string.morePictures",
+                              {
+                                "count": {
+                                  "$sub": [
+                                    "{len(props.pictures)}",
+                                    3
+                                  ]
+                                }
+                              }
+                            ]
+                          },
+                          "lines": 1
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
     }
   }
 }

package/catalog/recipes.json

@@ -1,5 +1,5 @@
 {
-  "$comment": "VAPP-92: the RECIPE contract. A theme styles a component PART under a `when` selector (the node's recipe props + the interaction `state`); this file fixes what a theme may name. `states` = the interaction states a painter reports (`default` is the absence of all; round 1 adds `invalid` = a field whose checks failed, `dragover` = a drop zone a drag hovers); `keys` = the whitelist a recipe style may set: a SUBSET of style.json's visual keys plus the padding/gap/size keys a part's box needs and `native` (true = the painter may use the platform's own control for this part, geometry still from the tokens); round 1 lets a recipe set `transition`/`transitionEasing` (so a theme's motion tokens finally animate hover/press/open), `transform` (a chevron that rotates when `open`), `borderStyle`, the four per-side border widths (an app bar's bottom rule, a tab bar's top rule), `textDecoration`, `letterSpacing`, `fontStyle`, `textTransform`. A part-level discriminator the painter supplies per drawn piece: CodeBlock/token `kind` (the codeToken enum), Table/headerCell+cell `align` and Table/row `striped` (true on ODD rows of a striped table), Stepper's step `status` (a macro `$recipe`). `native` lists every native component's PARTS (the painter paints each part with its resolved recipe) and the PROPS a `when` may key on (the component's enum/boolean props; the catalog default fills an unset one, so a theme always sees a concrete value; a part-level discriminator the PAINTER supplies is listed too, see below). Macro parts come from macros.json (every template `part`) and their `when` props from the macro's `recipeProps` (+ a part's `$recipe` keys); src/recipes.ts derives them. Both lists are append-only. Round 2 (docs/round-2-contract.md §6): `parts` lists EVERY part a painter lays out (the conformance dump names each `<node id>.<part>[.<index or row key>]`), so the layout-only parts are here too (Switch/body, Radio/items, Slider/header, Table/body, CodeBlock/body+code, FileUpload/title+browse+fileIcon, the fields' `input`, Tooltip/anchor, Accordion/count, List/section, Carousel/controls+previous+next); keys add `backdropBlur` (`$blur.*`) and `animation`; Resizable is new. EXP-1259: SearchList is new (its parts are also a searchable Menu submenu's: head, search, count, list, empty, fade), Tabs gain `close` + `new` (props `closable`, `addable`), Skeleton gains its rows (`row`, `dot`, `bar`). EXP-1324: CodeBlock gains the `variant` (default|destructive) and `size` (default|sm) props, shadcn's code-block. VAPP-162 (docs/round-5-contract.md): Segmented gains `orientation` + the `badge` part (an option `count`), VoiceWave the `variant` prop + the `bar` part (the `bars` meter), QrCode and QrScanner are new.",
+  "$comment": "VAPP-92: the RECIPE contract. A theme styles a component PART under a `when` selector (the node's recipe props + the interaction `state`); this file fixes what a theme may name. `states` = the interaction states a painter reports (`default` is the absence of all; round 1 adds `invalid` = a field whose checks failed, `dragover` = a drop zone a drag hovers); `keys` = the whitelist a recipe style may set: a SUBSET of style.json's visual keys plus the padding/gap/size keys a part's box needs and `native` (true = the painter may use the platform's own control for this part, geometry still from the tokens); round 1 lets a recipe set `transition`/`transitionEasing` (so a theme's motion tokens finally animate hover/press/open), `transform` (a chevron that rotates when `open`), `borderStyle`, the four per-side border widths (an app bar's bottom rule, a tab bar's top rule), `textDecoration`, `letterSpacing`, `fontStyle`, `textTransform`. A part-level discriminator the painter supplies per drawn piece: CodeBlock/token `kind` (the codeToken enum), Table/headerCell+cell `align` and Table/row `striped` (true on ODD rows of a striped table), Stepper's step `status` (a macro `$recipe`). `native` lists every native component's PARTS (the painter paints each part with its resolved recipe) and the PROPS a `when` may key on (the component's enum/boolean props; the catalog default fills an unset one, so a theme always sees a concrete value; a part-level discriminator the PAINTER supplies is listed too, see below). Macro parts come from macros.json (every template `part`) and their `when` props from the macro's `recipeProps` (+ a part's `$recipe` keys); src/recipes.ts derives them. Both lists are append-only. Round 2 (docs/round-2-contract.md §6): `parts` lists EVERY part a painter lays out (the conformance dump names each `<node id>.<part>[.<index or row key>]`), so the layout-only parts are here too (Switch/body, Radio/items, Slider/header, Table/body, CodeBlock/body+code, FileUpload/title+browse+fileIcon, the fields' `input`, Tooltip/anchor, Accordion/count, List/section, Carousel/controls+previous+next); keys add `backdropBlur` (`$blur.*`) and `animation`; Resizable is new. EXP-1259: SearchList is new (its parts are also a searchable Menu submenu's: head, search, count, list, empty, fade), Tabs gain `close` + `new` (props `closable`, `addable`), Skeleton gains its rows (`row`, `dot`, `bar`). EXP-1324: CodeBlock gains the `variant` (default|destructive) and `size` (default|sm) props, shadcn's code-block. VAPP-162 (docs/round-5-contract.md): Segmented gains `orientation` + the `badge` part (an option `count`), VoiceWave the `variant` prop + the `bar` part (the `bars` meter), QrCode and QrScanner are new. EXP-1495 (docs/round-6-contract.md): Carousel gains `counter` (prop + part) and the `thumbnails` strip (parts `thumbnails`, `thumbnail`, state `selected` = the current page).",
   "states": ["hover", "pressed", "focus", "disabled", "checked", "open", "selected", "invalid", "dragover"],
   "keys": [
     "backgroundColor", "color", "borderColor", "borderWidth", "borderTopWidth", "borderRightWidth", "borderBottomWidth", "borderLeftWidth", "borderRadius", "borderStyle",
@@ -20,7 +20,7 @@
     "AudioPlayer": { "parts": ["root", "controls", "track"], "props": [] },
     "Avatar": { "parts": ["root", "image", "fallback"], "props": ["size"] },
     "QrCode": { "parts": ["root", "plate", "module", "label"], "props": ["level"] },
-    "Carousel": { "parts": ["root", "page", "indicator", "controls", "previous", "next"], "props": ["loop", "indicators"] },
+    "Carousel": { "parts": ["root", "page", "indicator", "controls", "previous", "next", "counter", "thumbnails", "thumbnail"], "props": ["loop", "indicators", "counter"] },
     "Tabs": { "parts": ["root", "list", "tab", "indicator", "content", "close", "new"], "props": ["fill", "closable", "addable"] },
     "Segmented": { "parts": ["root", "item", "icon", "label", "badge"], "props": ["type", "variant", "size", "fill", "orientation"] },
     "Accordion": { "parts": ["root", "item", "trigger", "content", "count"], "props": ["type"] },

package/catalog/strings.json

@@ -32,6 +32,8 @@
     "menu": "Menu",
     "message": "Message",
     "more": "More",
+    "morePictures": "+{count}",
+    "morePicturesLabel": "{alt}, {count} more",
     "mute": "Mute",
     "newTab": "New tab",
     "next": "Next",
@@ -39,6 +41,9 @@
     "no": "No",
     "noResults": "No results",
     "optional": "Optional",
+    "outline": "Outline",
+    "outlineRow": "{title}, {count}",
+    "pageCounter": "{page} / {total}",
     "pageOf": "Page {page} of {total}",
     "pagination": "Pagination",
     "previous": "Previous",