@almadar/std 16.228.0 → 16.229.0

package/behaviors/registry/ui/core/atoms/std-card-grid.orb

@@ -0,0 +1,826 @@
+{
+  "description": "std-card-grid — a titled grid of content cards from a config list. Each card can carry an image (screenshots, portfolio, case studies), a portrait (team members), an icon, a badge, a title, a description and a link. `look` picks media cards, centered profile cards, or plain text cards. Pick for showcases, team pages, case studies, service catalogs and testimonials.",
+  "ledger": {
+    "entries": {
+      "ent_01M3B9EHHAAF2B1WF48WQPG8AD": {
+        "bakedName": "CardGridView",
+        "curName": "CardGridView",
+        "id": "ent_01M3B9EHHAAF2B1WF48WQPG8AD",
+        "kind": "entity",
+        "owner": "workspace",
+        "renames": []
+      },
+      "evt_01M3B9EHHA5VTMGMN3DHF6M9HF": {
+        "bakedName": "CARD_OPEN",
+        "curName": "CARD_OPEN",
+        "id": "evt_01M3B9EHHA5VTMGMN3DHF6M9HF",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHHA4BA0J2ZD89TB37F2",
+        "renames": []
+      },
+      "evt_01M3B9EHHAMEE06ARG020NWAT1": {
+        "bakedName": "INIT",
+        "curName": "INIT",
+        "id": "evt_01M3B9EHHAMEE06ARG020NWAT1",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHHA4BA0J2ZD89TB37F2",
+        "renames": []
+      },
+      "evt_01M3B9EHHANCDZDBWY18N83K3C": {
+        "bakedName": "CARD_OPENED",
+        "curName": "CARD_OPENED",
+        "id": "evt_01M3B9EHHANCDZDBWY18N83K3C",
+        "kind": "event",
+        "owner": "workspace",
+        "parent": "trt_01M3B9EHHA4BA0J2ZD89TB37F2",
+        "renames": []
+      },
+      "orb_01M3B9EHHA2K14KZX9AXMA91P2": {
+        "bakedName": "CardGridOrbital",
+        "curName": "CardGridOrbital",
+        "id": "orb_01M3B9EHHA2K14KZX9AXMA91P2",
+        "kind": "orbital",
+        "owner": "workspace",
+        "renames": []
+      },
+      "pag_01M3B9EHHBCCEX825B05KP1V0W": {
+        "bakedName": "CardGridPage",
+        "curName": "CardGridPage",
+        "id": "pag_01M3B9EHHBCCEX825B05KP1V0W",
+        "kind": "page",
+        "owner": "workspace",
+        "renames": []
+      },
+      "trt_01M3B9EHHA4BA0J2ZD89TB37F2": {
+        "bakedName": "CardGridRender",
+        "curName": "CardGridRender",
+        "id": "trt_01M3B9EHHA4BA0J2ZD89TB37F2",
+        "kind": "trait",
+        "owner": "workspace",
+        "renames": []
+      }
+    },
+    "schemaVersion": 1
+  },
+  "name": "std-card-grid",
+  "orbitals": [
+    {
+      "entity": {
+        "fields": [
+          {
+            "name": "id",
+            "required": true,
+            "type": "string"
+          }
+        ],
+        "id": "ent_01M3B9EHHAAF2B1WF48WQPG8AD",
+        "name": "CardGridView",
+        "persistence": "runtime"
+      },
+      "id": "orb_01M3B9EHHA2K14KZX9AXMA91P2",
+      "name": "CardGridOrbital",
+      "pages": [
+        {
+          "id": "pag_01M3B9EHHBCCEX825B05KP1V0W",
+          "name": "CardGridPage",
+          "path": "/card-grid",
+          "traits": [
+            {
+              "ref": "CardGridRender",
+              "refId": "trt_01M3B9EHHA4BA0J2ZD89TB37F2"
+            }
+          ]
+        }
+      ],
+      "traits": [
+        {
+          "category": "interaction",
+          "config": {
+            "alignment": {
+              "default": "center",
+              "label": "Heading alignment",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "center",
+                "start"
+              ]
+            },
+            "columns": {
+              "default": 3.0,
+              "label": "Max columns",
+              "tier": "presentation",
+              "type": "number"
+            },
+            "heading": {
+              "default": "",
+              "description": "Section heading above the grid; empty hides it",
+              "label": "Heading",
+              "synonyms": "title",
+              "tier": "presentation",
+              "type": "string"
+            },
+            "items": {
+              "default": [
+                {
+                  "description": "What this card is about.",
+                  "title": "First card"
+                },
+                {
+                  "description": "What this card is about.",
+                  "title": "Second card"
+                },
+                {
+                  "description": "What this card is about.",
+                  "title": "Third card"
+                }
+              ],
+              "description": "One card per entry: title plus any of image, avatar, icon, badge, meta, description, href + linkLabel",
+              "items": {
+                "properties": {
+                  "avatar": {
+                    "name": "avatar",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "badge": {
+                    "name": "badge",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "description": {
+                    "name": "description",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "href": {
+                    "name": "href",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "icon": {
+                    "name": "icon",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "image": {
+                    "name": "image",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "imageAlt": {
+                    "name": "imageAlt",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "linkLabel": {
+                    "name": "linkLabel",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "meta": {
+                    "name": "meta",
+                    "required": false,
+                    "type": "string"
+                  },
+                  "title": {
+                    "name": "title",
+                    "required": true,
+                    "type": "string"
+                  }
+                },
+                "type": "object"
+              },
+              "label": "Cards",
+              "synonyms": "items, entries, showcase, portfolio, team members, case studies, services, testimonials",
+              "tier": "presentation",
+              "type": "[CardItem]"
+            },
+            "lede": {
+              "default": "",
+              "description": "Text under the heading; empty hides it",
+              "label": "Supporting text",
+              "tier": "presentation",
+              "type": "string"
+            },
+            "look": {
+              "default": "plain",
+              "description": "media = image-led cards, profile = centered portrait cards, plain = text cards",
+              "label": "Card look",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "media",
+                "profile",
+                "plain"
+              ]
+            },
+            "surface": {
+              "default": "plain",
+              "description": "Background behind the section",
+              "label": "Surface",
+              "tier": "presentation",
+              "type": "string",
+              "values": [
+                "plain",
+                "muted"
+              ]
+            }
+          },
+          "effectRow": [
+            {
+              "kind": "emit",
+              "resource": "CARD_OPENED"
+            },
+            {
+              "kind": "render-ui",
+              "resource": "main"
+            }
+          ],
+          "emits": [
+            {
+              "description": "A card's link was clicked; carries its href and title.",
+              "event": "CARD_OPENED",
+              "eventId": "evt_01M3B9EHHANCDZDBWY18N83K3C",
+              "payloadSchema": [
+                {
+                  "name": "href",
+                  "type": "string"
+                },
+                {
+                  "name": "title",
+                  "type": "string"
+                }
+              ],
+              "scope": "external",
+              "tier": "domain"
+            }
+          ],
+          "entityContract": {
+            "provides": [],
+            "requires": []
+          },
+          "entityRebindable": true,
+          "entityRefIds": {
+            "CardGridView": "ent_01M3B9EHHAAF2B1WF48WQPG8AD"
+          },
+          "id": "trt_01M3B9EHHA4BA0J2ZD89TB37F2",
+          "linkedEntity": "CardGridView",
+          "linkedEntityId": "ent_01M3B9EHHAAF2B1WF48WQPG8AD",
+          "name": "CardGridRender",
+          "scope": "instance",
+          "stateMachine": {
+            "events": [
+              {
+                "id": "evt_01M3B9EHHAMEE06ARG020NWAT1",
+                "key": "INIT",
+                "name": "Initialize"
+              },
+              {
+                "description": "Card link click.",
+                "id": "evt_01M3B9EHHA5VTMGMN3DHF6M9HF",
+                "key": "CARD_OPEN",
+                "name": "Card Open",
+                "payloadSchema": [
+                  {
+                    "name": "href",
+                    "type": "string"
+                  },
+                  {
+                    "name": "title",
+                    "type": "string"
+                  }
+                ],
+                "tier": "internal"
+              },
+              {
+                "description": "A card's link was clicked; carries its href and title.",
+                "id": "evt_01M3B9EHHANCDZDBWY18N83K3C",
+                "key": "CARD_OPENED",
+                "name": "Card Opened",
+                "payloadSchema": [
+                  {
+                    "name": "href",
+                    "type": "string"
+                  },
+                  {
+                    "name": "title",
+                    "type": "string"
+                  }
+                ],
+                "tier": "domain"
+              }
+            ],
+            "states": [
+              {
+                "isInitial": true,
+                "name": "idle"
+              }
+            ],
+            "transitions": [
+              {
+                "effects": [
+                  [
+                    "render-ui",
+                    "main",
+                    {
+                      "bg": [
+                        "if",
+                        [
+                          "==",
+                          "@config.surface",
+                          "muted"
+                        ],
+                        "muted",
+                        "transparent"
+                      ],
+                      "children": [
+                        {
+                          "children": [
+                            {
+                              "children": [
+                                {
+                                  "align": [
+                                    "if",
+                                    [
+                                      "==",
+                                      "@config.alignment",
+                                      "center"
+                                    ],
+                                    "center",
+                                    "start"
+                                  ],
+                                  "children": [
+                                    {
+                                      "align": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.alignment",
+                                          "center"
+                                        ],
+                                        "center",
+                                        "left"
+                                      ],
+                                      "className": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.heading",
+                                          ""
+                                        ],
+                                        "hidden",
+                                        "tracking-tight text-balance"
+                                      ],
+                                      "content": "@config.heading",
+                                      "type": "typography",
+                                      "variant": "h2",
+                                      "weight": "bold"
+                                    },
+                                    {
+                                      "align": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.alignment",
+                                          "center"
+                                        ],
+                                        "center",
+                                        "left"
+                                      ],
+                                      "className": [
+                                        "if",
+                                        [
+                                          "==",
+                                          "@config.lede",
+                                          ""
+                                        ],
+                                        "hidden",
+                                        "max-w-2xl text-pretty"
+                                      ],
+                                      "color": "muted",
+                                      "content": "@config.lede",
+                                      "type": "typography",
+                                      "variant": "large"
+                                    }
+                                  ],
+                                  "className": [
+                                    "if",
+                                    [
+                                      "==",
+                                      "@config.heading",
+                                      ""
+                                    ],
+                                    [
+                                      "if",
+                                      [
+                                        "==",
+                                        "@config.lede",
+                                        ""
+                                      ],
+                                      "hidden",
+                                      ""
+                                    ],
+                                    ""
+                                  ],
+                                  "direction": "vertical",
+                                  "gap": "sm",
+                                  "type": "stack"
+                                },
+                                {
+                                  "children": [
+                                    "array/map",
+                                    "@config.items",
+                                    [
+                                      "fn",
+                                      "item",
+                                      {
+                                        "children": [
+                                          {
+                                            "alt": [
+                                              "object/get",
+                                              "@item",
+                                              "imageAlt",
+                                              [
+                                                "object/get",
+                                                "@item",
+                                                "title",
+                                                ""
+                                              ]
+                                            ],
+                                            "aspect": "16/9",
+                                            "rounded": "none",
+                                            "src": [
+                                              "object/get",
+                                              "@item",
+                                              "image",
+                                              ""
+                                            ],
+                                            "type": "image"
+                                          },
+                                          {
+                                            "align": [
+                                              "if",
+                                              [
+                                                "==",
+                                                "@config.look",
+                                                "profile"
+                                              ],
+                                              "center",
+                                              "start"
+                                            ],
+                                            "children": [
+                                              {
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@item",
+                                                      "avatar",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  ""
+                                                ],
+                                                "name": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "title",
+                                                  ""
+                                                ],
+                                                "size": "xl",
+                                                "src": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "avatar",
+                                                  ""
+                                                ],
+                                                "type": "avatar"
+                                              },
+                                              {
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@item",
+                                                      "icon",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  "text-primary"
+                                                ],
+                                                "name": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "icon",
+                                                  ""
+                                                ],
+                                                "size": "lg",
+                                                "type": "icon"
+                                              },
+                                              {
+                                                "label": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "badge",
+                                                  ""
+                                                ],
+                                                "type": "badge",
+                                                "variant": "primary"
+                                              },
+                                              {
+                                                "align": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    "@config.look",
+                                                    "profile"
+                                                  ],
+                                                  "center",
+                                                  "left"
+                                                ],
+                                                "content": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "title",
+                                                  ""
+                                                ],
+                                                "type": "typography",
+                                                "variant": "h4",
+                                                "weight": "semibold"
+                                              },
+                                              {
+                                                "align": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    "@config.look",
+                                                    "profile"
+                                                  ],
+                                                  "center",
+                                                  "left"
+                                                ],
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@item",
+                                                      "meta",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  ""
+                                                ],
+                                                "color": "muted",
+                                                "content": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "meta",
+                                                  ""
+                                                ],
+                                                "type": "typography",
+                                                "variant": "caption"
+                                              },
+                                              {
+                                                "align": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    "@config.look",
+                                                    "profile"
+                                                  ],
+                                                  "center",
+                                                  "left"
+                                                ],
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@item",
+                                                      "description",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  "text-pretty"
+                                                ],
+                                                "color": "muted",
+                                                "content": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "description",
+                                                  ""
+                                                ],
+                                                "type": "typography",
+                                                "variant": "body"
+                                              },
+                                              {
+                                                "action": "CARD_OPEN",
+                                                "actionPayload": {
+                                                  "href": [
+                                                    "object/get",
+                                                    "@item",
+                                                    "href",
+                                                    ""
+                                                  ],
+                                                  "title": [
+                                                    "object/get",
+                                                    "@item",
+                                                    "title",
+                                                    ""
+                                                  ]
+                                                },
+                                                "className": [
+                                                  "if",
+                                                  [
+                                                    "==",
+                                                    [
+                                                      "object/get",
+                                                      "@item",
+                                                      "linkLabel",
+                                                      ""
+                                                    ],
+                                                    ""
+                                                  ],
+                                                  "hidden",
+                                                  ""
+                                                ],
+                                                "href": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "href",
+                                                  ""
+                                                ],
+                                                "label": [
+                                                  "object/get",
+                                                  "@item",
+                                                  "linkLabel",
+                                                  ""
+                                                ],
+                                                "rightIcon": "arrow-right",
+                                                "type": "button",
+                                                "variant": "link"
+                                              }
+                                            ],
+                                            "className": [
+                                              "if",
+                                              [
+                                                "==",
+                                                "@config.look",
+                                                "media"
+                                              ],
+                                              "p-5",
+                                              ""
+                                            ],
+                                            "direction": "vertical",
+                                            "gap": "sm",
+                                            "type": "stack"
+                                          }
+                                        ],
+                                        "className": "h-full",
+                                        "look": [
+                                          "if",
+                                          [
+                                            "==",
+                                            "@config.look",
+                                            "media"
+                                          ],
+                                          "tile-image-first",
+                                          "elevated"
+                                        ],
+                                        "padding": [
+                                          "if",
+                                          [
+                                            "==",
+                                            "@config.look",
+                                            "media"
+                                          ],
+                                          "none",
+                                          "md"
+                                        ],
+                                        "type": "card"
+                                      }
+                                    ]
+                                  ],
+                                  "cols": [
+                                    "math/min",
+                                    [
+                                      "math/max",
+                                      "@config.columns",
+                                      1.0
+                                    ],
+                                    6.0
+                                  ],
+                                  "gap": "lg",
+                                  "type": "simple-grid"
+                                }
+                              ],
+                              "direction": "vertical",
+                              "gap": "xl",
+                              "type": "stack"
+                            }
+                          ],
+                          "maxWidth": "xl",
+                          "padding": "lg",
+                          "size": "xl",
+                          "type": "container"
+                        }
+                      ],
+                      "fullWidth": true,
+                      "paddingY": "xl",
+                      "type": "box"
+                    }
+                  ]
+                ],
+                "event": "INIT",
+                "eventId": "evt_01M3B9EHHAMEE06ARG020NWAT1",
+                "from": "idle",
+                "to": "idle"
+              },
+              {
+                "effects": [
+                  [
+                    "emit",
+                    "CARD_OPENED",
+                    {
+                      "href": "@payload.href",
+                      "title": "@payload.title"
+                    }
+                  ]
+                ],
+                "event": "CARD_OPEN",
+                "eventId": "evt_01M3B9EHHA5VTMGMN3DHF6M9HF",
+                "from": "idle",
+                "to": "idle"
+              }
+            ]
+          }
+        }
+      ],
+      "types": {
+        "CardItem": [
+          {
+            "name": "title",
+            "required": true,
+            "type": "string"
+          },
+          {
+            "name": "description",
+            "type": "string"
+          },
+          {
+            "name": "image",
+            "type": "string"
+          },
+          {
+            "name": "imageAlt",
+            "type": "string"
+          },
+          {
+            "name": "avatar",
+            "type": "string"
+          },
+          {
+            "name": "icon",
+            "type": "string"
+          },
+          {
+            "name": "badge",
+            "type": "string"
+          },
+          {
+            "name": "meta",
+            "type": "string"
+          },
+          {
+            "name": "href",
+            "type": "string"
+          },
+          {
+            "name": "linkLabel",
+            "type": "string"
+          }
+        ]
+      }
+    }
+  ],
+  "schemaVersion": 1,
+  "version": "1.0.0"
+}