@exponential_app/eui 0.2.1 → 0.4.0

package/dist/chunks/{index-5fmaa0xq.js → index-f9wkb6aq.js}

@@ -319,6 +319,27 @@ var core_runtime_default = {
       "running",
       "done",
       "declined"
+    ],
+    zoomInitial: [
+      "auto",
+      "fit",
+      "fitWidth",
+      "actual"
+    ],
+    zoomControls: [
+      "auto",
+      "always",
+      "none"
+    ],
+    motionDirection: [
+      "forward",
+      "reverse",
+      "alternate"
+    ],
+    motionFit: [
+      "contain",
+      "cover",
+      "fill"
     ]
   },
   defs: {
@@ -557,6 +578,10 @@ var core_runtime_default = {
         },
         decimals: {
           type: "number"
+        },
+        truncate: {
+          type: "boolean",
+          default: false
         }
       }
     },
@@ -620,6 +645,34 @@ var core_runtime_default = {
           enum: "traceStatus"
         }
       }
+    },
+    outlineItem: {
+      properties: {
+        id: {
+          type: "string",
+          required: true
+        },
+        title: {
+          type: "string",
+          required: true,
+          bindable: true
+        },
+        count: {
+          type: "number",
+          bindable: true
+        }
+      }
+    },
+    picture: {
+      properties: {
+        src: {
+          type: "url",
+          required: true
+        },
+        alt: {
+          type: "string"
+        }
+      }
     }
   },
   functions: {
@@ -938,7 +991,10 @@ var core_runtime_default = {
     "Toast.icon.success": "ui-success",
     "Toast.icon.warning": "ui-warning",
     "Toast.icon.error": "ui-error",
-    "Unknown.root": "ui-warning"
+    "Unknown.root": "ui-warning",
+    "ZoomableImage.zoomOut": "ui-minus",
+    "ZoomableImage.zoomIn": "ui-add",
+    "ZoomableImage.fit": "ui-fullscreen"
   },
   components: {
     Box: {
@@ -1566,6 +1622,55 @@ var core_runtime_default = {
         }
       }
     },
+    ZoomableImage: {
+      kind: "native",
+      group: "media",
+      lite: false,
+      children: "none",
+      props: {
+        src: {
+          type: "url",
+          required: true,
+          bindable: true
+        },
+        alt: {
+          type: "string",
+          required: true,
+          bindable: true
+        },
+        naturalWidth: {
+          type: "number"
+        },
+        naturalHeight: {
+          type: "number"
+        },
+        initial: {
+          type: "enum",
+          enum: "zoomInitial",
+          default: "auto"
+        },
+        maxScale: {
+          type: "number",
+          default: 8
+        },
+        controls: {
+          type: "enum",
+          enum: "zoomControls",
+          default: "auto"
+        },
+        scale: {
+          type: "number",
+          bindable: true
+        },
+        style: {
+          type: "style"
+        }
+      },
+      events: [
+        "zoom",
+        "tap"
+      ]
+    },
     Icon: {
       kind: "native",
       group: "media",
@@ -1709,12 +1814,44 @@ var core_runtime_default = {
         indicators: {
           type: "boolean",
           default: true
+        },
+        counter: {
+          type: "boolean",
+          default: false
+        },
+        thumbnails: {
+          type: "array",
+          items: {
+            type: "url"
+          }
         }
       },
       events: [
         "change"
       ]
     },
+    Mosaic: {
+      kind: "macro",
+      group: "media",
+      lite: false,
+      children: "none",
+      props: {
+        pictures: {
+          type: "array",
+          items: {
+            type: "object",
+            shape: "picture"
+          },
+          required: true
+        },
+        label: {
+          type: "string"
+        }
+      },
+      events: [
+        "select"
+      ]
+    },
     Tabs: {
       kind: "native",
       group: "navigation",
@@ -1994,6 +2131,32 @@ var core_runtime_default = {
         "select"
       ]
     },
+    Outline: {
+      kind: "macro",
+      group: "navigation",
+      lite: true,
+      children: "none",
+      props: {
+        items: {
+          type: "array",
+          items: {
+            type: "object",
+            shape: "outlineItem"
+          },
+          required: true
+        },
+        value: {
+          type: "string",
+          bindable: true
+        },
+        caption: {
+          type: "string"
+        }
+      },
+      events: [
+        "select"
+      ]
+    },
     Stepper: {
       kind: "macro",
       group: "navigation",
@@ -3940,6 +4103,117 @@ var core_runtime_default = {
           type: "string"
         }
       }
+    },
+    Motion: {
+      kind: "native",
+      group: "media",
+      lite: true,
+      children: "none",
+      props: {
+        layers: {
+          type: "array",
+          items: {
+            type: "object"
+          }
+        },
+        size: {
+          type: "array",
+          items: {
+            type: "number"
+          }
+        },
+        duration: {
+          type: "number"
+        },
+        fps: {
+          type: "number",
+          default: 60
+        },
+        assets: {
+          type: "object"
+        },
+        markers: {
+          type: "array",
+          items: {
+            type: "object"
+          }
+        },
+        lottie: {
+          type: "object"
+        },
+        src: {
+          type: "url"
+        },
+        autoplay: {
+          type: "boolean",
+          default: true
+        },
+        loop: {
+          type: "boolean",
+          default: true
+        },
+        plays: {
+          type: "number"
+        },
+        direction: {
+          type: "enum",
+          enum: "motionDirection",
+          default: "forward"
+        },
+        speed: {
+          type: "number",
+          default: 1
+        },
+        segment: {
+          type: "array",
+          items: {
+            type: "number"
+          }
+        },
+        marker: {
+          type: "string"
+        },
+        progress: {
+          type: "number",
+          bindable: true
+        },
+        play: {
+          type: "boolean",
+          bindable: true,
+          default: true
+        },
+        poster: {
+          type: "number"
+        },
+        fit: {
+          type: "enum",
+          enum: "motionFit",
+          default: "contain"
+        },
+        slots: {
+          type: "object"
+        },
+        stateMachine: {
+          type: "object"
+        },
+        inputs: {
+          type: "object",
+          bindable: true
+        },
+        label: {
+          type: "string"
+        },
+        style: {
+          type: "style"
+        }
+      },
+      events: [
+        "press",
+        "hover",
+        "visible",
+        "complete",
+        "state"
+      ]
     }
   }
 };
@@ -4146,7 +4420,7 @@ var basic_map_default = {
 };
 // packages/exponential-ui/catalog/macros.json
 var macros_default = {
-  $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: [],
@@ -6172,6 +6446,7 @@ var macros_default = {
             }
           },
           alignItems: "stretch",
+          gap: "$spacing.lg",
           width: "100%",
           minHeight: 0
         },
@@ -6480,51 +6755,214 @@ var macros_default = {
         ]
       }
     },
-    Stepper: {
-      recipeProps: [
-        "orientation"
-      ],
+    Outline: {
+      recipeProps: [],
       root: {
         part: "root",
         component: "Box",
         $a11y: {
-          role: "list"
+          role: "navigation",
+          label: "{props.caption|$string.outline}"
         },
         style: {
           display: "flex",
-          flexDirection: {
-            $map: {
-              from: "props.orientation",
-              cases: {
-                vertical: "column"
-              },
-              default: "row"
-            }
-          },
-          alignItems: {
-            $map: {
-              from: "props.orientation",
-              cases: {
-                vertical: "stretch"
-              },
-              default: "flex-start"
-            }
-          },
-          gap: "$spacing.md",
-          width: "100%"
+          flexDirection: "column",
+          gap: "$spacing.xxs",
+          minWidth: 0
         },
         children: [
           {
-            part: "step",
+            part: "caption",
+            component: "Text",
+            $if: "props.caption",
+            props: {
+              text: "{props.caption}",
+              variant: "caption",
+              lines: 1
+            },
+            $a11y: {
+              hidden: true
+            }
+          },
+          {
+            part: "row",
             component: "Box",
-            $each: "props.steps",
-            $as: "step",
+            $each: "props.items",
+            $as: "item",
+            props: {
+              pressable: true
+            },
             style: {
               display: "flex",
-              flexDirection: {
-                $map: {
-                  from: "props.orientation",
-                  cases: {
+              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"
+      ],
+      root: {
+        part: "root",
+        component: "Box",
+        $a11y: {
+          role: "list"
+        },
+        style: {
+          display: "flex",
+          flexDirection: {
+            $map: {
+              from: "props.orientation",
+              cases: {
+                vertical: "column"
+              },
+              default: "row"
+            }
+          },
+          alignItems: {
+            $map: {
+              from: "props.orientation",
+              cases: {
+                vertical: "stretch"
+              },
+              default: "flex-start"
+            }
+          },
+          gap: "$spacing.md",
+          width: "100%"
+        },
+        children: [
+          {
+            part: "step",
+            component: "Box",
+            $each: "props.steps",
+            $as: "step",
+            style: {
+              display: "flex",
+              flexDirection: {
+                $map: {
+                  from: "props.orientation",
+                  cases: {
                     vertical: "row"
                   },
                   default: "column"
@@ -8294,6 +8732,383 @@ var macros_default = {
           }
         ]
       }
+    },
+    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
+                        }
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
     }
   }
 };
@@ -8380,5 +9195,5 @@ function coreLite2() {
 
 export { basic_map_default, coreCatalog2, CORE_CATALOG_ID2, CORE_LITE_CATALOG_ID2, A2UI_BASIC_CATALOG_ID2, A2UI_VERSION2, SUPPORTED_CATALOG_IDS2, UNKNOWN_COMPONENT2, coreMacros2, TOKEN_GROUPS2, parseTokenRef2, isKnownToken2, catalogView2, sharedCatalogView2, componentDef2, isOffered2, componentNames2, coreLite2 };
 
-//# debugId=9AAC1D5C9F2B466E64756E2164756E21
-//# sourceMappingURL=index-5fmaa0xq.js.map
+//# debugId=BADB7DDAF7A42C8A64756E2164756E21
+//# sourceMappingURL=index-f9wkb6aq.js.map