{
  "name": "members-active-table-search-filter",
  "kind": "block",
  "primary": "div",
  "page": "/apps/saas/app/members/members.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-col": "",
    "data-members-pane": "",
    "data-members-state": "ready"
  },
  "html": "<div data-col data-members-pane data-members-state=\"ready\">\n      <!-- Error: rendered when fetch fails. Spec §11.\n           alert-ui only supports `leading|content|close` slots — so the\n           retry affordance lives as a sibling button-ui inside a col-ui\n           wrapper rather than a (non-existent) `slot=\"action\"`. -->\n      <col-ui id=\"members-error-block\" gap=\"2\" hidden>\n        <alert-ui id=\"members-error\" variant=\"danger\" icon=\"warning\" text=\"Couldn't load members. Something went wrong fetching your team.\"></alert-ui>\n        <row-ui justify=\"end\">\n          <button-ui id=\"members-retry\" text=\"Retry\" variant=\"outline\" size=\"sm\" icon=\"arrow-clockwise\"></button-ui>\n        </row-ui>\n      </col-ui>\n      <!-- Empty: rendered when no members have accepted yet. Spec §11.\n           Inline anchor matches the established `<a href=\"#…\">` pattern\n           in other example pages (registration/invite, auth/sign-up). -->\n      <text-ui id=\"members-empty-hint\" color=\"subtle\" size=\"sm\" hidden>\n        No one has accepted an invite yet — see <a href=\"#pending\">Pending invites</a> below.\n      </text-ui>\n      <row-ui align=\"center\" gap=\"2\">\n        <input-ui id=\"members-search\" type=\"search\" placeholder=\"Search members…\" prefix=\"magnifying-glass\" grow></input-ui>\n        <select-ui id=\"members-role-filter\" value=\"all\">\n          <option value=\"all\">All roles</option>\n          <option value=\"admin\">Admin</option>\n          <option value=\"member\">Member</option>\n          <option value=\"viewer\">Viewer</option>\n        </select-ui>\n      </row-ui>\n      <card-ui>\n        <section bleed>\n          <table-ui id=\"members-table\" sortable striped></table-ui>\n        </section>\n      </card-ui>\n    </div>",
  "source": "apps/saas/app/members/members.contents.html",
  "metadata": {
    "domain": "data",
    "description": "Active members management — a search input plus a role-filter select above a sortable striped table-ui of team members. The canonical roster pane for a team/members settings page, with role and status columns.",
    "keywords": [
      "members",
      "team",
      "active",
      "roster",
      "table",
      "search",
      "filter",
      "role",
      "select",
      "sortable",
      "striped",
      "table-ui",
      "input-ui",
      "search-members",
      "admin",
      "member",
      "viewer",
      "settings",
      "people",
      "users",
      "management",
      "data"
    ]
  },
  "captured_at": "2026-06-10T13:16:11.236Z",
  "template": [
    {
      "id": "members-error",
      "component": "Alert",
      "icon": "warning",
      "text": "Couldn't load members. Something went wrong fetching your team.",
      "variant": "danger"
    },
    {
      "id": "members-retry",
      "component": "Button",
      "icon": "arrow-clockwise",
      "size": "sm",
      "text": "Retry",
      "variant": "outline"
    },
    {
      "id": "row",
      "component": "Row",
      "justify": "end",
      "children": [
        "members-retry"
      ]
    },
    {
      "id": "members-error-block",
      "component": "Column",
      "gap": "2",
      "children": [
        "members-error",
        "row"
      ]
    },
    {
      "id": "text",
      "component": "Text",
      "textContent": "Pending invites",
      "variant": "body"
    },
    {
      "id": "link",
      "component": "Link",
      "href": "#pending",
      "text": "Pending invites",
      "children": [
        "text"
      ]
    },
    {
      "id": "members-empty-hint",
      "component": "Text",
      "color": "subtle",
      "size": "sm",
      "textContent": "No one has accepted an invite yet — see below.",
      "children": [
        "link"
      ]
    },
    {
      "id": "members-search",
      "component": "Input",
      "type": "search",
      "placeholder": "Search members…",
      "prefix": "magnifying-glass"
    },
    {
      "id": "members-role-filter",
      "component": "ChoicePicker",
      "value": "all",
      "options": [
        {
          "value": "all",
          "label": "All roles"
        },
        {
          "value": "admin",
          "label": "Admin"
        },
        {
          "value": "member",
          "label": "Member"
        },
        {
          "value": "viewer",
          "label": "Viewer"
        }
      ]
    },
    {
      "id": "row-2",
      "component": "Row",
      "align": "center",
      "gap": "2",
      "children": [
        "members-search",
        "members-role-filter"
      ]
    },
    {
      "id": "members-table",
      "component": "Table",
      "sortable": true,
      "striped": true
    },
    {
      "id": "section",
      "component": "Section",
      "bleed": true,
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "members-table"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "section"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "data-col": "",
      "data-members-pane": "",
      "data-members-state": "ready",
      "children": [
        "members-error-block",
        "members-empty-hint",
        "row-2",
        "card"
      ]
    }
  ]
}