Contributor profile

A composed detail view: an avatar header, KPI stats, tag badges, a callout, and an activity Timeline bound to the data model.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Column",          "children": [            "card",            "note",            "timelineCard"          ],          "gap": "lg"        },        {          "id": "card",          "component": "Card",          "child": "cardCol"        },        {          "id": "cardCol",          "component": "Column",          "children": [            "head",            "stats",            "tags"          ],          "gap": "md"        },        {          "id": "head",          "component": "Row",          "children": [            "avatar",            "headText"          ],          "gap": "md",          "align": "center"        },        {          "id": "avatar",          "component": "Avatar",          "name": {            "path": "/user/name"          }        },        {          "id": "headText",          "component": "Column",          "children": [            "name",            "role"          ],          "gap": "none"        },        {          "id": "name",          "component": "Text",          "text": {            "path": "/user/name"          },          "variant": "title-sm"        },        {          "id": "role",          "component": "Text",          "text": {            "path": "/user/role"          },          "tone": "secondary",          "variant": "body-sm"        },        {          "id": "stats",          "component": "Row",          "children": [            "st1",            "st2",            "st3"          ],          "gap": "lg"        },        {          "id": "st1",          "component": "Stat",          "label": "Merged PRs",          "value": {            "path": "/user/prs"          }        },        {          "id": "st2",          "component": "Stat",          "label": "Reviews",          "value": {            "path": "/user/reviews"          }        },        {          "id": "st3",          "component": "Stat",          "label": "Streak",          "value": {            "path": "/user/streak"          },          "hint": "days"        },        {          "id": "tags",          "component": "Row",          "children": [            "t1",            "t2",            "t3"          ],          "gap": "sm"        },        {          "id": "t1",          "component": "Badge",          "text": "TypeScript",          "tone": "info"        },        {          "id": "t2",          "component": "Badge",          "text": "React",          "tone": "alt"        },        {          "id": "t3",          "component": "Badge",          "text": "A2UI",          "tone": "success"        },        {          "id": "note",          "component": "Callout",          "tone": "ai",          "text": "Suggested reviewer for the renderer package based on recent activity."        },        {          "id": "timelineCard",          "component": "Card",          "child": "tl"        },        {          "id": "tl",          "component": "Timeline",          "items": {            "path": "/activity"          }        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "user": {          "name": "Ada Lovelace",          "role": "Principal Engineer",          "prs": "128",          "reviews": "342",          "streak": "17"        },        "activity": [          {            "title": "Shipped the A2UI renderer",            "meta": "2h ago",            "tone": "success",            "body": "v1.0 landed with 24 catalog components."          },          {            "title": "Opened an RFC",            "meta": "1d ago",            "tone": "info",            "body": "Proposed inline catalog negotiation."          },          {            "title": "Closed an incident",            "meta": "3d ago",            "tone": "neutral"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Column",
          "children": [
            "card",
            "note",
            "timelineCard"
          ],
          "gap": "lg"
        },
        {
          "id": "card",
          "component": "Card",
          "child": "cardCol"
        },
        {
          "id": "cardCol",
          "component": "Column",
          "children": [
            "head",
            "stats",
            "tags"
          ],
          "gap": "md"
        },
        {
          "id": "head",
          "component": "Row",
          "children": [
            "avatar",
            "headText"
          ],
          "gap": "md",
          "align": "center"
        },
        {
          "id": "avatar",
          "component": "Avatar",
          "name": {
            "path": "/user/name"
          }
        },
        {
          "id": "headText",
          "component": "Column",
          "children": [
            "name",
            "role"
          ],
          "gap": "none"
        },
        {
          "id": "name",
          "component": "Text",
          "text": {
            "path": "/user/name"
          },
          "variant": "title-sm"
        },
        {
          "id": "role",
          "component": "Text",
          "text": {
            "path": "/user/role"
          },
          "tone": "secondary",
          "variant": "body-sm"
        },
        {
          "id": "stats",
          "component": "Row",
          "children": [
            "st1",
            "st2",
            "st3"
          ],
          "gap": "lg"
        },
        {
          "id": "st1",
          "component": "Stat",
          "label": "Merged PRs",
          "value": {
            "path": "/user/prs"
          }
        },
        {
          "id": "st2",
          "component": "Stat",
          "label": "Reviews",
          "value": {
            "path": "/user/reviews"
          }
        },
        {
          "id": "st3",
          "component": "Stat",
          "label": "Streak",
          "value": {
            "path": "/user/streak"
          },
          "hint": "days"
        },
        {
          "id": "tags",
          "component": "Row",
          "children": [
            "t1",
            "t2",
            "t3"
          ],
          "gap": "sm"
        },
        {
          "id": "t1",
          "component": "Badge",
          "text": "TypeScript",
          "tone": "info"
        },
        {
          "id": "t2",
          "component": "Badge",
          "text": "React",
          "tone": "alt"
        },
        {
          "id": "t3",
          "component": "Badge",
          "text": "A2UI",
          "tone": "success"
        },
        {
          "id": "note",
          "component": "Callout",
          "tone": "ai",
          "text": "Suggested reviewer for the renderer package based on recent activity."
        },
        {
          "id": "timelineCard",
          "component": "Card",
          "child": "tl"
        },
        {
          "id": "tl",
          "component": "Timeline",
          "items": {
            "path": "/activity"
          }
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "user": {
          "name": "Ada Lovelace",
          "role": "Principal Engineer",
          "prs": "128",
          "reviews": "342",
          "streak": "17"
        },
        "activity": [
          {
            "title": "Shipped the A2UI renderer",
            "meta": "2h ago",
            "tone": "success",
            "body": "v1.0 landed with 24 catalog components."
          },
          {
            "title": "Opened an RFC",
            "meta": "1d ago",
            "tone": "info",
            "body": "Proposed inline catalog negotiation."
          },
          {
            "title": "Closed an incident",
            "meta": "3d ago",
            "tone": "neutral"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Ada Lovelace

Principal Engineer

Merged PRs

128

Reviews

342

Streak

17days

TypeScriptReactA2UI

Suggested reviewer for the renderer package based on recent activity.

Shipped the A2UI renderer
2h ago
v1.0 landed with 24 catalog components.
Opened an RFC
1d ago
Proposed inline catalog negotiation.
Closed an incident
3d ago