{
  "name": "notification-badges-feed",
  "kind": "block",
  "primary": "grid-ui",
  "page": "/apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {},
  "html": "<grid-ui>\n            <card-ui>\n              <header>\n                <h3>Notifications</h3>\n                <p slot=\"description\">System and team activity</p>\n                <row-ui slot=\"action\" gap=\"2\" align=\"center\">\n                  <segmented-ui value=\"all\" size=\"sm\">\n                    <segment-ui value=\"all\" text=\"All\"></segment-ui>\n                    <segment-ui value=\"unread\" text=\"Unread\"></segment-ui>\n                    <segment-ui value=\"mentions\" text=\"Mentions\"></segment-ui>\n                  </segmented-ui>\n                  <button-ui text=\"Mark all read\" variant=\"ghost\" size=\"sm\"></button-ui>\n                </row-ui>\n              </header>\n              <section>\n                <list-ui divider>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"check-circle\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Deployment completed</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2m ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">Production deploy v2.14.0 succeeded. 12 files changed.</text-ui>\n                    <badge-ui slot=\"action\" text=\"New\" variant=\"accent\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" text=\"Alex Chen\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Alex Chen mentioned you</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">18m ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">\"@you can you take a look at the Safari issue?\"</text-ui>\n                    <badge-ui slot=\"action\" text=\"Mention\" variant=\"warning\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"warning\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Usage threshold reached</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2h ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">API calls at 85% of monthly quota. Consider upgrading your plan.</text-ui>\n                    <badge-ui slot=\"action\" text=\"Warning\" variant=\"warning\"></badge-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" text=\"Sarah Miller\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">Sarah Miller invited you</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">Yesterday</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">You were added to the \"Brand refresh\" workspace.</text-ui>\n                  </list-item-ui>\n                  <list-item-ui>\n                    <avatar-ui slot=\"icon\" icon=\"key\" size=\"sm\"></avatar-ui>\n                    <row-ui slot=\"text\" gap=\"2\" align=\"center\">\n                      <text-ui weight=\"semibold\">API key rotated</text-ui>\n                      <text-ui color=\"subtle\" size=\"sm\">2 days ago</text-ui>\n                    </row-ui>\n                    <text-ui slot=\"description\" color=\"subtle\">Your production API key was rotated. Old key is revoked.</text-ui>\n                  </list-item-ui>\n                </list-ui>\n              </section>\n            </card-ui>\n          </grid-ui>",
  "source": "apps/saas/app/admin-dashboard/admin-dashboard.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Notification center feed card — recent alerts and activity with unread badge-ui indicators per item, segmented filter (all/unread/mentions), and mark-all-read action.",
    "keywords": [
      "notification",
      "center",
      "notifications",
      "feed",
      "activity",
      "timeline",
      "unread",
      "badge",
      "badge-ui",
      "notification",
      "badge",
      "alert",
      "indicator",
      "mark",
      "read",
      "segmented",
      "filter",
      "mentions",
      "dashboard",
      "badges",
      "notification-badges",
      "center",
      "unread"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "variant": "heading",
      "textContent": "Notifications"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "description",
      "textContent": "System and team activity"
    },
    {
      "id": "segment",
      "component": "Segment",
      "text": "All",
      "value": "all"
    },
    {
      "id": "segment-2",
      "component": "Segment",
      "text": "Unread",
      "value": "unread"
    },
    {
      "id": "segment-3",
      "component": "Segment",
      "text": "Mentions",
      "value": "mentions"
    },
    {
      "id": "segmented-control",
      "component": "SegmentedControl",
      "value": "all",
      "children": [
        "segment",
        "segment-2",
        "segment-3"
      ]
    },
    {
      "id": "button",
      "component": "Button",
      "size": "sm",
      "text": "Mark all read",
      "variant": "ghost"
    },
    {
      "id": "row",
      "component": "Row",
      "slot": "action",
      "align": "center",
      "gap": "2",
      "children": [
        "segmented-control",
        "button"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text",
        "text-2",
        "row"
      ]
    },
    {
      "id": "avatar",
      "component": "Avatar",
      "slot": "icon",
      "icon": "check-circle",
      "size": "sm"
    },
    {
      "id": "text-3",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Deployment completed"
    },
    {
      "id": "text-4",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2m ago"
    },
    {
      "id": "row-2",
      "component": "Row",
      "slot": "text",
      "align": "center",
      "gap": "2",
      "children": [
        "text-3",
        "text-4"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "Production deploy v2.14.0 succeeded. 12 files changed."
    },
    {
      "id": "badge",
      "component": "Badge",
      "slot": "action",
      "text": "New",
      "variant": "accent"
    },
    {
      "id": "list-item",
      "component": "ListItem",
      "children": [
        "avatar",
        "row-2",
        "text-5",
        "badge"
      ]
    },
    {
      "id": "avatar-2",
      "component": "Avatar",
      "slot": "icon",
      "size": "sm",
      "text": "Alex Chen"
    },
    {
      "id": "text-6",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Alex Chen mentioned you"
    },
    {
      "id": "text-7",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "18m ago"
    },
    {
      "id": "row-3",
      "component": "Row",
      "slot": "text",
      "align": "center",
      "gap": "2",
      "children": [
        "text-6",
        "text-7"
      ]
    },
    {
      "id": "text-8",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "\"@you can you take a look at the Safari issue?\""
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "slot": "action",
      "text": "Mention",
      "variant": "warning"
    },
    {
      "id": "list-item-2",
      "component": "ListItem",
      "children": [
        "avatar-2",
        "row-3",
        "text-8",
        "badge-2"
      ]
    },
    {
      "id": "avatar-3",
      "component": "Avatar",
      "slot": "icon",
      "icon": "warning",
      "size": "sm"
    },
    {
      "id": "text-9",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Usage threshold reached"
    },
    {
      "id": "text-10",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2h ago"
    },
    {
      "id": "row-4",
      "component": "Row",
      "slot": "text",
      "align": "center",
      "gap": "2",
      "children": [
        "text-9",
        "text-10"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "API calls at 85% of monthly quota. Consider upgrading your plan."
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "slot": "action",
      "text": "Warning",
      "variant": "warning"
    },
    {
      "id": "list-item-3",
      "component": "ListItem",
      "children": [
        "avatar-3",
        "row-4",
        "text-11",
        "badge-3"
      ]
    },
    {
      "id": "avatar-4",
      "component": "Avatar",
      "slot": "icon",
      "size": "sm",
      "text": "Sarah Miller"
    },
    {
      "id": "text-12",
      "component": "Text",
      "weight": "semibold",
      "textContent": "Sarah Miller invited you"
    },
    {
      "id": "text-13",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "Yesterday"
    },
    {
      "id": "row-5",
      "component": "Row",
      "slot": "text",
      "align": "center",
      "gap": "2",
      "children": [
        "text-12",
        "text-13"
      ]
    },
    {
      "id": "text-14",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "You were added to the \"Brand refresh\" workspace."
    },
    {
      "id": "list-item-4",
      "component": "ListItem",
      "children": [
        "avatar-4",
        "row-5",
        "text-14"
      ]
    },
    {
      "id": "avatar-5",
      "component": "Avatar",
      "slot": "icon",
      "icon": "key",
      "size": "sm"
    },
    {
      "id": "text-15",
      "component": "Text",
      "weight": "semibold",
      "textContent": "API key rotated"
    },
    {
      "id": "text-16",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "2 days ago"
    },
    {
      "id": "row-6",
      "component": "Row",
      "slot": "text",
      "align": "center",
      "gap": "2",
      "children": [
        "text-15",
        "text-16"
      ]
    },
    {
      "id": "text-17",
      "component": "Text",
      "slot": "description",
      "color": "subtle",
      "textContent": "Your production API key was rotated. Old key is revoked."
    },
    {
      "id": "list-item-5",
      "component": "ListItem",
      "children": [
        "avatar-5",
        "row-6",
        "text-17"
      ]
    },
    {
      "id": "list",
      "component": "List",
      "divider": true,
      "children": [
        "list-item",
        "list-item-2",
        "list-item-3",
        "list-item-4",
        "list-item-5"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "list"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Grid",
      "children": [
        "card"
      ]
    }
  ]
}