@almadar/std 16.228.0 → 16.230.0

package/behaviors/registry/ui/core/atoms/std-media-section.orb

@@ -0,0 +1,740 @@
+{
+  "description": "std-media-section — content rows that pair copy with a screenshot or illustration: each row has an eyebrow, heading, body text, a short bullet list and an optional link action on one side and its media on the other, and consecutive rows alternate sides. A row without media sits alone at reading width. Stacks on small screens. Pick for 'how it works', product tours and feature-detail pages.",
+  "ledger": {
+    "entries": {
+      "ent_01M3B9EHKQZQCBMZ0F409ZWBN5": {
+        "bakedName": "MediaSectionView",
+        "curName": "MediaSectionView",
+        "id": "ent_01M3B9EHKQZQCBMZ0F409ZWBN5",
+        "kind": "entity",
+        "owner": "workspace",
+        "renames": []
+      },
+      "evt_01M3B9EHKQ1RCHZJDPQMD81SQ5": {
+        "bakedName": "INIT",
+        "curName": "INIT",
+        "id": "evt_01M3B9EHKQ1RCHZJDPQMD81SQ5",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G",
+        "renames": []
+      },
+      "evt_01M3B9EHKQA8PCQ1RXBTD0GZC4": {
+        "bakedName": "SECTION_ACTION",
+        "curName": "SECTION_ACTION",
+        "id": "evt_01M3B9EHKQA8PCQ1RXBTD0GZC4",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G",
+        "renames": []
+      },
+      "evt_01M3B9EHKQYW4321SP4H36V6FR": {
+        "bakedName": "SECTION_ACTION_CLICKED",
+        "curName": "SECTION_ACTION_CLICKED",
+        "id": "evt_01M3B9EHKQYW4321SP4H36V6FR",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G",
+        "renames": []
+      },
+      "orb_01M3B9EHKQTWT06C30YC4ZTFNK": {
+        "bakedName": "MediaSectionOrbital",
+        "curName": "MediaSectionOrbital",
+        "id": "orb_01M3B9EHKQTWT06C30YC4ZTFNK",
+        "kind": "orbital",
+        "owner": "workspace",
+        "renames": []
+      },
+      "pag_01M3B9EHKQSNV6T31KAR750Z42": {
+        "bakedName": "MediaSectionPage",
+        "curName": "MediaSectionPage",
+        "id": "pag_01M3B9EHKQSNV6T31KAR750Z42",
+        "kind": "page",
+        "owner": "workspace",
+        "renames": []
+      },
+      "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G": {
+        "bakedName": "MediaSectionRender",
+        "curName": "MediaSectionRender",
+        "id": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G",
+        "kind": "trait",
+        "owner": "workspace",
+        "renames": []
+      }
+    },
+    "schemaVersion": 1
+  },
+  "name": "std-media-section",
+  "orbitals": [
+    {
+      "entity": {
+        "fields": [
+          {
+            "name": "id",
+            "required": true,
+            "type": "string"
+          }
+        ],
+        "id": "ent_01M3B9EHKQZQCBMZ0F409ZWBN5",
+        "name": "MediaSectionView",
+        "persistence": "runtime"
+      },
+      "id": "orb_01M3B9EHKQTWT06C30YC4ZTFNK",
+      "name": "MediaSectionOrbital",
+      "pages": [
+        {
+          "id": "pag_01M3B9EHKQSNV6T31KAR750Z42",
+          "name": "MediaSectionPage",
+          "path": "/media-section",
+          "traits": [
+            {
+              "ref": "MediaSectionRender",
+              "refId": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G"
+            }
+          ]
+        }
+      ],
+      "traits": [
+        {
+          "category": "interaction",
+          "config": {
+            "firstMediaSide": {
+              "default": "end",
+              "description": "Which side the first row's media sits on; later rows alternate",
+              "label": "First row media side",
+              "synonyms": "image position, image left, image right, flip",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "start",
+                "end"
+              ]
+            },
+            "rows": {
+              "default": [
+                {
+                  "body": "Say what you want and see it take shape.",
+                  "bullets": [
+                    "Fast",
+                    "Verified",
+                    "Yours"
+                  ],
+                  "heading": "Everything in one place"
+                }
+              ],
+              "description": "One row per entry: eyebrow, heading, body, bullets, media (mediaSrc + mediaAlt) and an optional link action (actionLabel + actionHref)",
+              "items": {
+                "properties": {
+                  "actionHref": {
+                    "name": "actionHref",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "actionLabel": {
+                    "name": "actionLabel",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "body": {
+                    "name": "body",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "bullets": {
+                    "items": {
+                      "type": "string"
+                    },
+                    "name": "bullets",
+                    "required": false,
+                    "type": "array"
+                  },
+                  "eyebrow": {
+                    "name": "eyebrow",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "heading": {
+                    "name": "heading",
+                    "required": true,
+                    "type": "string"
+                  },
+                  "mediaAlt": {
+                    "name": "mediaAlt",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "mediaSrc": {
+                    "name": "mediaSrc",
+                    "required": false,
+                    "type": "string"
+                  }
+                },
+                "type": "object"
+              },
+              "label": "Rows",
+              "synonyms": "feature rows, product tour, split sections, alternating sections, how it works",
+              "tier": "presentation",
+              "type": "[MediaRow]"
+            },
+            "surface": {
+              "default": "plain",
+              "description": "Background behind the rows",
+              "label": "Surface",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "plain",
+                "muted"
+              ]
+            }
+          },
+          "effectRow": [
+            {
+              "kind": "emit",
+              "resource": "SECTION_ACTION_CLICKED"
+            },
+            {
+              "kind": "render-ui",
+              "resource": "main"
+            }
+          ],
+          "emits": [
+            {
+              "description": "A row's link action was clicked; carries its href.",
+              "event": "SECTION_ACTION_CLICKED",
+              "eventId": "evt_01M3B9EHKQYW4321SP4H36V6FR",
+              "payloadSchema": [
+                {
+                  "name": "href",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "domain"
+            }
+          ],
+          "entityContract": {
+            "provides": [],
+            "requires": []
+          },
+          "entityRebindable": true,
+          "entityRefIds": {
+            "MediaSectionView": "ent_01M3B9EHKQZQCBMZ0F409ZWBN5"
+          },
+          "id": "trt_01M3B9EHKQ9Y0B4Q7R5J1F0E0G",
+          "linkedEntity": "MediaSectionView",
+          "linkedEntityId": "ent_01M3B9EHKQZQCBMZ0F409ZWBN5",
+          "name": "MediaSectionRender",
+          "scope": "instance",
+          "stateMachine": {
+            "events": [
+              {
+                "id": "evt_01M3B9EHKQ1RCHZJDPQMD81SQ5",
+                "key": "INIT",
+                "name": "Initialize"
+              },
+              {
+                "description": "Row link action click.",
+                "id": "evt_01M3B9EHKQA8PCQ1RXBTD0GZC4",
+                "key": "SECTION_ACTION",
+                "name": "Section Action",
+                "payloadSchema": [
+                  {
+                    "name": "href",
+                    "type": "string"
+                  }
+                ],
+                "tier": "internal"
+              },
+              {
+                "description": "A row's link action was clicked; carries its href.",
+                "id": "evt_01M3B9EHKQYW4321SP4H36V6FR",
+                "key": "SECTION_ACTION_CLICKED",
+                "name": "Section Action Clicked",
+                "payloadSchema": [
+                  {
+                    "name": "href",
+                    "type": "string"
+                  }
+                ],
+                "tier": "domain"
+              }
+            ],
+            "states": [
+              {
+                "isInitial": true,
+                "name": "idle"
+              }
+            ],
+            "transitions": [
+              {
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "bg": [
+                        "if",
+                        [
+                          "==",
+                          "@config.surface",
+                          "muted"
+                        ],
+                        "muted",
+                        "transparent"
+                      ],
+                      "children": [
+                        {
+                          "children": [
+                            {
+                              "children": [
+                                "array/map",
+                                "@config.rows",
+                                [
+                                  "fn",
+                                  "row",
+                                  [
+                                    "if",
+                                    [
+                                      "==",
+                                      [
+                                        "object/get",
+                                        "@row",
+                                        "mediaSrc",
+                                        ""
+                                      ],
+                                      ""
+                                    ],
+                                    {
+                                      "children": [
+                                        {
+                                          "align": "start",
+                                          "children": [
+                                            {
+                                              "label": [
+                                                "object/get",
+                                                "@row",
+                                                "eyebrow",
+                                                ""
+                                              ],
+                                              "type": "badge",
+                                              "variant": "primary"
+                                            },
+                                            {
+                                              "content": [
+                                                "object/get",
+                                                "@row",
+                                                "heading",
+                                                ""
+                                              ],
+                                              "type": "typography",
+                                              "variant": "h2",
+                                              "weight": "bold"
+                                            },
+                                            {
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "object/get",
+                                                    "@row",
+                                                    "body",
+                                                    ""
+                                                  ],
+                                                  ""
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "color": "muted",
+                                              "content": [
+                                                "object/get",
+                                                "@row",
+                                                "body",
+                                                ""
+                                              ],
+                                              "type": "typography",
+                                              "variant": "large"
+                                            },
+                                            {
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "array/len",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ]
+                                                  ],
+                                                  0.0
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "content": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "array/len",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ]
+                                                  ],
+                                                  0.0
+                                                ],
+                                                "",
+                                                [
+                                                  "str/concat",
+                                                  "- ",
+                                                  [
+                                                    "str/join",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ],
+                                                    "\n- "
+                                                  ]
+                                                ]
+                                              ],
+                                              "type": "markdown-content"
+                                            },
+                                            {
+                                              "action": "SECTION_ACTION",
+                                              "actionPayload": {
+                                                "href": [
+                                                  "object/get",
+                                                  "@row",
+                                                  "actionHref",
+                                                  ""
+                                                ]
+                                              },
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "object/get",
+                                                    "@row",
+                                                    "actionLabel",
+                                                    ""
+                                                  ],
+                                                  ""
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "href": [
+                                                "object/get",
+                                                "@row",
+                                                "actionHref",
+                                                ""
+                                              ],
+                                              "label": [
+                                                "object/get",
+                                                "@row",
+                                                "actionLabel",
+                                                ""
+                                              ],
+                                              "type": "button",
+                                              "variant": "secondary"
+                                            }
+                                          ],
+                                          "direction": "vertical",
+                                          "gap": "md",
+                                          "type": "stack"
+                                        }
+                                      ],
+                                      "className": "mx-auto w-full max-w-3xl",
+                                      "type": "box"
+                                    },
+                                    {
+                                      "align": "center",
+                                      "children": [
+                                        {
+                                          "align": "start",
+                                          "children": [
+                                            {
+                                              "label": [
+                                                "object/get",
+                                                "@row",
+                                                "eyebrow",
+                                                ""
+                                              ],
+                                              "type": "badge",
+                                              "variant": "primary"
+                                            },
+                                            {
+                                              "content": [
+                                                "object/get",
+                                                "@row",
+                                                "heading",
+                                                ""
+                                              ],
+                                              "type": "typography",
+                                              "variant": "h2",
+                                              "weight": "bold"
+                                            },
+                                            {
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "object/get",
+                                                    "@row",
+                                                    "body",
+                                                    ""
+                                                  ],
+                                                  ""
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "color": "muted",
+                                              "content": [
+                                                "object/get",
+                                                "@row",
+                                                "body",
+                                                ""
+                                              ],
+                                              "type": "typography",
+                                              "variant": "large"
+                                            },
+                                            {
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "array/len",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ]
+                                                  ],
+                                                  0.0
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "content": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "array/len",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ]
+                                                  ],
+                                                  0.0
+                                                ],
+                                                "",
+                                                [
+                                                  "str/concat",
+                                                  "- ",
+                                                  [
+                                                    "str/join",
+                                                    [
+                                                      "object/get",
+                                                      "@row",
+                                                      "bullets",
+                                                      []
+                                                    ],
+                                                    "\n- "
+                                                  ]
+                                                ]
+                                              ],
+                                              "type": "markdown-content"
+                                            },
+                                            {
+                                              "action": "SECTION_ACTION",
+                                              "actionPayload": {
+                                                "href": [
+                                                  "object/get",
+                                                  "@row",
+                                                  "actionHref",
+                                                  ""
+                                                ]
+                                              },
+                                              "className": [
+                                                "if",
+                                                [
+                                                  "==",
+                                                  [
+                                                    "object/get",
+                                                    "@row",
+                                                    "actionLabel",
+                                                    ""
+                                                  ],
+                                                  ""
+                                                ],
+                                                "hidden",
+                                                ""
+                                              ],
+                                              "href": [
+                                                "object/get",
+                                                "@row",
+                                                "actionHref",
+                                                ""
+                                              ],
+                                              "label": [
+                                                "object/get",
+                                                "@row",
+                                                "actionLabel",
+                                                ""
+                                              ],
+                                              "type": "button",
+                                              "variant": "secondary"
+                                            }
+                                          ],
+                                          "direction": "vertical",
+                                          "gap": "md",
+                                          "type": "stack"
+                                        },
+                                        {
+                                          "alt": [
+                                            "object/get",
+                                            "@row",
+                                            "mediaAlt",
+                                            ""
+                                          ],
+                                          "bordered": true,
+                                          "rounded": "xl",
+                                          "src": [
+                                            "object/get",
+                                            "@row",
+                                            "mediaSrc",
+                                            ""
+                                          ],
+                                          "type": "image"
+                                        }
+                                      ],
+                                      "gap": "xl",
+                                      "ratio": "1:1",
+                                      "reverse": [
+                                        "==",
+                                        [
+                                          "math/mod",
+                                          [
+                                            "+",
+                                            "@index",
+                                            [
+                                              "if",
+                                              [
+                                                "==",
+                                                "@config.firstMediaSide",
+                                                "start"
+                                              ],
+                                              1.0,
+                                              0.0
+                                            ]
+                                          ],
+                                          2.0
+                                        ],
+                                        1.0
+                                      ],
+                                      "type": "split"
+                                    }
+                                  ]
+                                ]
+                              ],
+                              "direction": "vertical",
+                              "gap": "2xl",
+                              "type": "stack"
+                            }
+                          ],
+                          "maxWidth": "xl",
+                          "padding": "lg",
+                          "size": "xl",
+                          "type": "container"
+                        }
+                      ],
+                      "fullWidth": true,
+                      "paddingY": "xl",
+                      "type": "box"
+                    }
+                  ]
+                ],
+                "event": "INIT",
+                "eventId": "evt_01M3B9EHKQ1RCHZJDPQMD81SQ5",
+                "from": "idle",
+                "to": "idle"
+              },
+              {
+                "effects": [
+                  [
+                    "emit",
+                    "SECTION_ACTION_CLICKED",
+                    {
+                      "href": "@payload.href"
+                    }
+                  ]
+                ],
+                "event": "SECTION_ACTION",
+                "eventId": "evt_01M3B9EHKQA8PCQ1RXBTD0GZC4",
+                "from": "idle",
+                "to": "idle"
+              }
+            ]
+          }
+        }
+      ],
+      "types": {
+        "MediaRow": [
+          {
+            "name": "eyebrow",
+            "type": "string"
+          },
+          {
+            "name": "heading",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "name": "body",
+            "type": "string"
+          },
+          {
+            "name": "bullets",
+            "type": "[string]"
+          },
+          {
+            "name": "mediaSrc",
+            "type": "string"
+          },
+          {
+            "name": "mediaAlt",
+            "type": "string"
+          },
+          {
+            "name": "actionLabel",
+            "type": "string"
+          },
+          {
+            "name": "actionHref",
+            "type": "string"
+          }
+        ]
+      }
+    }
+  ],
+  "schemaVersion": 1,
+  "version": "1.0.0"
+}