@exponential_app/eui 0.2.1 → 0.4.0

package/catalog/host.json

@@ -68,6 +68,16 @@
       "transports": ["http", "stdio", "script"],
       "functionPrefix": "tools."
     },
+    "exposes": {
+      "$comment": "VAPP-180 (the format half of the eMCP contract, packages/emcp fixtures/exposes.json in the Exponential repo): `exposes: [{name, title, description, input, access, run}]` = MCP tools a host's broker lists (as `<app>__<name>`) and runs as the CALLING person, data never code. `name` matches `limits.namePattern`, at most `limits.nameMax`, never holds `limits.separator`, unique; `title` (at most titleMax) and `description` (at most descriptionMax) non-blank; `input` = a JSON Schema `{type: \"object\", properties?}`; `access` read | write; at most `limits.maxTools` tools. `run` holds EXACTLY ONE of `runKinds`: `records: {op, kind, id?, where?, data?, limit?}` over the package's OWN kinds (op in `recordOps`; `readRecordOps` read, upsert writes; a delete is destructive and refused); `action` (+ `args`) = a host function name matching `actionPattern` (it reads when the last word of its name is a `readOpWords` word, else it writes); `upstream` (+ `tool`, `args`) = one of the package's `upstreams` (the MCP server names the HOST provides: Exponential = the team's MCP servers). Every string of `run` may hold `${input.<dotted path>}` templates whose first key is a declared input property. Destructive is never exposed: an action or upstream tool whose name holds a `destructiveWords` word (words = the lowercase letter runs) is refused. A binding declared read whose run writes is refused; an upstream tool's level is its live annotations', checked by the host at call. Issues come in binding order with the eMCP error code (`exposeIssues`). What a run may reach on a given host (which actions exist and are grantable, destructive arguments, which upstreams the team has) is the host's own check on top.",
+      "limits": { "namePattern": "^[a-z][a-z0-9_]*$", "nameMax": 40, "titleMax": 80, "descriptionMax": 1024, "maxTools": 32, "separator": "__" },
+      "runKinds": ["records", "action", "upstream"],
+      "recordOps": ["list", "get", "upsert"],
+      "readRecordOps": ["list", "get"],
+      "readOpWords": ["list", "get", "show", "catalog", "activity", "files"],
+      "destructiveWords": ["delete", "merge", "close", "end", "remove", "trash"],
+      "actionPattern": "^[a-z][a-z0-9_]*(\\.[a-z][a-z0-9_]*)+$"
+    },
     "extensions": {
       "$comment": "VAPP-161: `extensions: [{id, version, components?}]`: an extension catalog id the package needs beyond its catalogId, the minimum MAJOR.MINOR.PATCH (caret: the host's has the same major and is not lower; an unversioned registration satisfies any) and the components it uses. Install issues: an id not registered on the host (`extension <id> is not available on this host`), a version that does not satisfy (`extension <id> <have> does not satisfy ^<want>`), a component the registered extension does not define (`extension <id> has no component <name>`), a duplicate id. A host registers an extension's version as ExtensionDef.version.",
       "versionPattern": "^(0|[1-9]\\d*)\\.(0|[1-9]\\d*)\\.(0|[1-9]\\d*)$"

package/catalog/layout.json

@@ -1,5 +1,5 @@
 {
-  "$comment": "Round 2 (docs/round-2-contract.md §7): the layout NUMBERS every painter shares where no theme token decides (px unless noted). `windowThreshold` = items past which List and Table window; `windowOverscan` = items rendered beyond each viewport edge; `resizeStep` = percentage points per arrow key on a Resizable handle; `panelMin` = a panel's min (percent) when unset; `resizeHandleHit` = a handle's hit area across its hairline; `fieldIntrinsicWidth` = the max-content width of a text field (Input, Textarea, NumberField, ChipInput: never the browser's `size` default) — picker triggers (Select, DatePicker, DateRangePicker, TimePicker) size to their content; `mediaIntrinsicWidth` = the max-content width of an Image/Video without a width (its min-content is 0); `mediaAspectRatio` = width/height of an Image without `aspectRatio` or a height (Video: its `aspectRatio` default); `treeGuideColumn` = one TreeGuides gutter column (the recipe's `line` width is the STROKE; round 3: 14, the ×4 app indent, the elbow lands on the parent's lead glyph); `treeGuideRadius` = the elbow's corner radius; `treeGuideBridge` = how far the guide verticals overshoot the row's TOP edge (paint only) so a Section's hairline divider never breaks the line. EXP-1259 (packages/domain-contract/fixtures/feedback-states.json + search-list.json): `pendingDelayMs` = how long a `loading` Button waits before it shows the spinner and its `pendingLabel` (a fast action never flashes; presses are refused at once); `skeletonPulseMs` / `skeletonOpacityLow` / `skeletonOpacityHigh` = the placeholder's ONE opacity pulse (low → high → low, ease-in-out), `skeletonReducedOpacity` = its static opacity under reduce motion; `searchListFade` = the bottom fade over a SearchList (or a searchable submenu) while more rows sit below. Generated into every target; src/layout.ts reads it.",
+  "$comment": "Round 2 (docs/round-2-contract.md §7): the layout NUMBERS every painter shares where no theme token decides (px unless noted). `windowThreshold` = items past which List and Table window; `windowOverscan` = items rendered beyond each viewport edge; `resizeStep` = percentage points per arrow key on a Resizable handle; `panelMin` = a panel's min (percent) when unset; `resizeHandleHit` = a handle's hit area across its hairline; `fieldIntrinsicWidth` = the max-content width of a text field (Input, Textarea, NumberField, ChipInput: never the browser's `size` default) — picker triggers (Select, DatePicker, DateRangePicker, TimePicker) size to their content; `mediaIntrinsicWidth` = the max-content width of an Image/Video without a width (its min-content is 0); `mediaAspectRatio` = width/height of an Image without `aspectRatio` or a height (Video: its `aspectRatio` default); `treeGuideColumn` = one TreeGuides gutter column (the recipe's `line` width is the STROKE; round 3: 14, the ×4 app indent, the elbow lands on the parent's lead glyph); `treeGuideRadius` = the elbow's corner radius; `treeGuideBridge` = how far the guide verticals overshoot the row's TOP edge (paint only) so a Section's hairline divider never breaks the line. EXP-1259 (packages/domain-contract/fixtures/feedback-states.json + search-list.json): `pendingDelayMs` = how long a `loading` Button waits before it shows the spinner and its `pendingLabel` (a fast action never flashes; presses are refused at once); `skeletonPulseMs` / `skeletonOpacityLow` / `skeletonOpacityHigh` = the placeholder's ONE opacity pulse (low → high → low, ease-in-out), `skeletonReducedOpacity` = its static opacity under reduce motion; `searchListFade` = the bottom fade over a SearchList (or a searchable submenu) while more rows sit below. EXP-1548: `tableColumnMin` = the narrowest a Table column without a `width` gets; a table whose columns need more than its box scrolls horizontally. Generated into every target; src/layout.ts reads it.",
   "windowThreshold": 50,
   "windowOverscan": 5,
   "resizeStep": 10,
@@ -16,5 +16,6 @@
   "skeletonOpacityLow": 0.45,
   "skeletonOpacityHigh": 0.9,
   "skeletonReducedOpacity": 0.6,
-  "searchListFade": 24
+  "searchListFade": 24,
+  "tableColumnMin": 120
 }

package/catalog/limits.json

@@ -5,5 +5,14 @@
   "maxMessageBytes": 4194304,
   "maxTemplateItems": 10000,
   "maxPointerBytes": 1024,
-  "maxPointerSegments": 64
+  "maxPointerSegments": 64,
+  "motion": {
+    "$comment": "EXP-1584/1602: the eUI Motion (Lottie) limits, enforced by the one engine (apps/desktop/crates/eui-motion, src/validate.rs Limits) on every renderer through its WASM and uniffi builds. A source past maxBytes (UTF-8 JSON), maxShapes (shape items: objects with a string `ty` inside a layer's `shapes` or a group's `it`) or maxSeconds ((op − ip) / fr) is refused with an issue (`limit-bytes`, `limit-shapes`, `limit-duration`; expressions are refused too: `expression`); maxVertices = path vertices in one sampled frame (checked per frame by the player, not by the validator); maxFps = the highest frame rate a player samples at; maxPlayingPerSurface = Motion components one surface animates at once. Cases: fixtures/motion-validate.json.",
+    "maxBytes": 2097152,
+    "maxShapes": 5000,
+    "maxVertices": 100000,
+    "maxSeconds": 120,
+    "maxFps": 60,
+    "maxPlayingPerSurface": 8
+  }
 }

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": [],
@@ -2025,6 +2025,7 @@
             }
           },
           "alignItems": "stretch",
+          "gap": "$spacing.lg",
           "width": "100%",
           "minHeight": 0
         },
@@ -2333,6 +2334,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 +4311,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
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
     }
   }
 }