Panel & navigation

An app panel composing the navigation primitives: a Breadcrumb trail, a Tabs switcher whose active tab binds to the data model (one panel is a live Timeline), and a multi-select FilterChip row.

[  {    "createSurface": {      "surfaceId": "main",      "catalogId": "urn:flab-ui:a2ui:catalog:v1"    },    "version": "v1.0"  },  {    "updateComponents": {      "surfaceId": "main",      "components": [        {          "id": "root",          "component": "Panel",          "title": "Project overview",          "child": "body"        },        {          "id": "body",          "component": "Column",          "children": [            "crumbs",            "tabs",            "filters"          ],          "gap": "md"        },        {          "id": "crumbs",          "component": "Breadcrumb",          "items": {            "path": "/crumbs"          }        },        {          "id": "tabs",          "component": "Tabs",          "value": {            "path": "/tab"          },          "tabs": [            {              "value": "summary",              "label": "Summary",              "child": "tab_summary"            },            {              "value": "members",              "label": "Members",              "child": "tab_members"            },            {              "value": "activity",              "label": "Activity",              "child": "tab_activity"            }          ]        },        {          "id": "tab_summary",          "component": "Text",          "text": "A calm, data-dense overview of the project."        },        {          "id": "tab_members",          "component": "Text",          "text": "Four contributors are active on this project."        },        {          "id": "tab_activity",          "component": "Timeline",          "items": {            "path": "/events"          }        },        {          "id": "filters",          "component": "FilterChip",          "label": "Issue filters",          "multiple": true,          "value": {            "path": "/active"          },          "options": [            {              "value": "open",              "label": "Open",              "count": 8            },            {              "value": "blocked",              "label": "Blocked",              "count": 2            },            {              "value": "done",              "label": "Done",              "count": 14            }          ]        }      ]    },    "version": "v1.0"  },  {    "updateDataModel": {      "surfaceId": "main",      "value": {        "tab": "summary",        "active": [          "open"        ],        "crumbs": [          {            "label": "Projects",            "href": "#"          },          {            "label": "Flab UI",            "href": "#"          },          {            "label": "Overview"          }        ],        "events": [          {            "title": "Merged the renderer PR",            "meta": "2h ago",            "tone": "success"          },          {            "title": "Opened an RFC",            "meta": "1d ago",            "tone": "info"          }        ]      }    },    "version": "v1.0"  }]

[
  {
    "createSurface": {
      "surfaceId": "main",
      "catalogId": "urn:flab-ui:a2ui:catalog:v1"
    },
    "version": "v1.0"
  },
  {
    "updateComponents": {
      "surfaceId": "main",
      "components": [
        {
          "id": "root",
          "component": "Panel",
          "title": "Project overview",
          "child": "body"
        },
        {
          "id": "body",
          "component": "Column",
          "children": [
            "crumbs",
            "tabs",
            "filters"
          ],
          "gap": "md"
        },
        {
          "id": "crumbs",
          "component": "Breadcrumb",
          "items": {
            "path": "/crumbs"
          }
        },
        {
          "id": "tabs",
          "component": "Tabs",
          "value": {
            "path": "/tab"
          },
          "tabs": [
            {
              "value": "summary",
              "label": "Summary",
              "child": "tab_summary"
            },
            {
              "value": "members",
              "label": "Members",
              "child": "tab_members"
            },
            {
              "value": "activity",
              "label": "Activity",
              "child": "tab_activity"
            }
          ]
        },
        {
          "id": "tab_summary",
          "component": "Text",
          "text": "A calm, data-dense overview of the project."
        },
        {
          "id": "tab_members",
          "component": "Text",
          "text": "Four contributors are active on this project."
        },
        {
          "id": "tab_activity",
          "component": "Timeline",
          "items": {
            "path": "/events"
          }
        },
        {
          "id": "filters",
          "component": "FilterChip",
          "label": "Issue filters",
          "multiple": true,
          "value": {
            "path": "/active"
          },
          "options": [
            {
              "value": "open",
              "label": "Open",
              "count": 8
            },
            {
              "value": "blocked",
              "label": "Blocked",
              "count": 2
            },
            {
              "value": "done",
              "label": "Done",
              "count": 14
            }
          ]
        }
      ]
    },
    "version": "v1.0"
  },
  {
    "updateDataModel": {
      "surfaceId": "main",
      "value": {
        "tab": "summary",
        "active": [
          "open"
        ],
        "crumbs": [
          {
            "label": "Projects",
            "href": "#"
          },
          {
            "label": "Flab UI",
            "href": "#"
          },
          {
            "label": "Overview"
          }
        ],
        "events": [
          {
            "title": "Merged the renderer PR",
            "meta": "2h ago",
            "tone": "success"
          },
          {
            "title": "Opened an RFC",
            "meta": "1d ago",
            "tone": "info"
          }
        ]
      }
    },
    "version": "v1.0"
  }
]

Rendered with Flab components

Project overview

A calm, data-dense overview of the project.