{
  "name": "integrations-api-keys-card-list",
  "kind": "block",
  "primary": "div",
  "page": "/apps/saas/app/integrations/integrations.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-col": ""
  },
  "html": "<div data-col>\n      <row-ui justify=\"space-between\" align=\"center\">\n        <text-ui color=\"subtle\">3 active keys</text-ui>\n        <button-ui text=\"+ Create key\" variant=\"primary\"></button-ui>\n      </row-ui>\n      <card-ui>\n        <header>\n          <span slot=\"heading\">\n            <text-ui strong>Production</text-ui>\n            <badge-ui text=\"Read/Write\" variant=\"accent\"></badge-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Reveal\" variant=\"ghost\" icon=\"eye\"></button-ui>\n            <button-ui text=\"Rotate\"></button-ui>\n          </span>\n        </header>\n        <section>\n          <code-ui>\n            <header>\n              <span slot=\"label\">Key</span>\n              <div role=\"button\" tabindex=\"0\" slot=\"copy\">Copy</div>\n            </header>\n            <pre><code>sk_live_••••••••••••4f72</code></pre>\n            <footer>Created Jan 14, 2026 · Last used 3m ago</footer>\n          </code-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <header>\n          <span slot=\"heading\">\n            <text-ui strong>Staging</text-ui>\n            <badge-ui text=\"Read/Write\" variant=\"accent\"></badge-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Reveal\" variant=\"ghost\" icon=\"eye\"></button-ui>\n            <button-ui text=\"Rotate\"></button-ui>\n          </span>\n        </header>\n        <section>\n          <code-ui>\n            <header>\n              <span slot=\"label\">Key</span>\n              <div role=\"button\" tabindex=\"0\" slot=\"copy\">Copy</div>\n            </header>\n            <pre><code>sk_test_••••••••••••9a1c</code></pre>\n            <footer>Created Feb 28, 2026 · Last used 2h ago</footer>\n          </code-ui>\n        </section>\n      </card-ui>\n      <card-ui>\n        <header>\n          <span slot=\"heading\">\n            <text-ui strong>Analytics read-only</text-ui>\n            <badge-ui text=\"Read only\" variant=\"muted\"></badge-ui>\n          </span>\n          <span slot=\"action\">\n            <button-ui text=\"Reveal\" variant=\"ghost\" icon=\"eye\"></button-ui>\n            <button-ui text=\"Rotate\"></button-ui>\n          </span>\n        </header>\n        <section>\n          <code-ui>\n            <header>\n              <span slot=\"label\">Key</span>\n              <div role=\"button\" tabindex=\"0\" slot=\"copy\">Copy</div>\n            </header>\n            <pre><code>sk_ro_••••••••••••b240</code></pre>\n            <footer>Created Mar 12, 2026 · Last used yesterday</footer>\n          </code-ui>\n        </section>\n      </card-ui>\n      <alert-ui variant=\"info\" icon=\"info\" text=\"Keys grant full API access. Store them in your secrets manager — never commit to source control.\"></alert-ui>\n    </div>",
  "source": "apps/saas/app/integrations/integrations.contents.html",
  "metadata": {
    "domain": "data",
    "description": "API keys list — a count-plus-Create-key header above card-ui rows, each showing a key name, read/write scope badge, masked secret in a copyable code-ui block, and Reveal/Rotate actions. The programmatic-access section of an integrations or developer settings page.",
    "keywords": [
      "api",
      "keys",
      "secret",
      "tokens",
      "card-ui",
      "code-ui",
      "reveal",
      "rotate",
      "copy",
      "masked",
      "production",
      "staging",
      "read-write",
      "scope",
      "badge",
      "create-key",
      "programmatic",
      "access",
      "developer",
      "settings",
      "credentials",
      "data"
    ]
  },
  "captured_at": "2026-06-10T13:16:11.236Z",
  "template": [
    {
      "id": "text",
      "component": "Text",
      "color": "subtle",
      "textContent": "3 active keys"
    },
    {
      "id": "button",
      "component": "Button",
      "text": "+ Create key",
      "variant": "primary"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "justify": "space-between",
      "children": [
        "text",
        "button"
      ]
    },
    {
      "id": "text-3",
      "component": "Text",
      "strong": true,
      "textContent": "Production"
    },
    {
      "id": "badge",
      "component": "Badge",
      "text": "Read/Write",
      "variant": "accent"
    },
    {
      "id": "text-2",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-3",
        "badge"
      ]
    },
    {
      "id": "button-2",
      "component": "Button",
      "icon": "eye",
      "text": "Reveal",
      "variant": "ghost"
    },
    {
      "id": "button-3",
      "component": "Button",
      "text": "Rotate"
    },
    {
      "id": "text-4",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button-2",
        "button-3"
      ]
    },
    {
      "id": "header",
      "component": "Header",
      "children": [
        "text-2",
        "text-4"
      ]
    },
    {
      "id": "text-5",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Key"
    },
    {
      "id": "text-6",
      "component": "Text",
      "variant": "body",
      "slot": "copy",
      "textContent": "Copy"
    },
    {
      "id": "header-2",
      "component": "Header",
      "children": [
        "text-5",
        "text-6"
      ]
    },
    {
      "id": "code-3",
      "component": "Code",
      "textContent": "sk_live_••••••••••••4f72"
    },
    {
      "id": "code-2",
      "component": "Code",
      "children": [
        "code-3"
      ]
    },
    {
      "id": "text-7",
      "component": "Text",
      "textContent": "Created Jan 14, 2026 · Last used 3m ago",
      "variant": "body"
    },
    {
      "id": "footer",
      "component": "Footer",
      "children": [
        "text-7"
      ]
    },
    {
      "id": "code",
      "component": "Code",
      "children": [
        "header-2",
        "code-2",
        "footer"
      ]
    },
    {
      "id": "section",
      "component": "Section",
      "children": [
        "column"
      ]
    },
    {
      "id": "column",
      "component": "Column",
      "children": [
        "code"
      ]
    },
    {
      "id": "card",
      "component": "Card",
      "children": [
        "header",
        "section"
      ]
    },
    {
      "id": "text-9",
      "component": "Text",
      "strong": true,
      "textContent": "Staging"
    },
    {
      "id": "badge-2",
      "component": "Badge",
      "text": "Read/Write",
      "variant": "accent"
    },
    {
      "id": "text-8",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-9",
        "badge-2"
      ]
    },
    {
      "id": "button-4",
      "component": "Button",
      "icon": "eye",
      "text": "Reveal",
      "variant": "ghost"
    },
    {
      "id": "button-5",
      "component": "Button",
      "text": "Rotate"
    },
    {
      "id": "text-10",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button-4",
        "button-5"
      ]
    },
    {
      "id": "header-3",
      "component": "Header",
      "children": [
        "text-8",
        "text-10"
      ]
    },
    {
      "id": "text-11",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Key"
    },
    {
      "id": "text-12",
      "component": "Text",
      "variant": "body",
      "slot": "copy",
      "textContent": "Copy"
    },
    {
      "id": "header-4",
      "component": "Header",
      "children": [
        "text-11",
        "text-12"
      ]
    },
    {
      "id": "code-6",
      "component": "Code",
      "textContent": "sk_test_••••••••••••9a1c"
    },
    {
      "id": "code-5",
      "component": "Code",
      "children": [
        "code-6"
      ]
    },
    {
      "id": "text-13",
      "component": "Text",
      "textContent": "Created Feb 28, 2026 · Last used 2h ago",
      "variant": "body"
    },
    {
      "id": "footer-2",
      "component": "Footer",
      "children": [
        "text-13"
      ]
    },
    {
      "id": "code-4",
      "component": "Code",
      "children": [
        "header-4",
        "code-5",
        "footer-2"
      ]
    },
    {
      "id": "section-2",
      "component": "Section",
      "children": [
        "column-2"
      ]
    },
    {
      "id": "column-2",
      "component": "Column",
      "children": [
        "code-4"
      ]
    },
    {
      "id": "card-2",
      "component": "Card",
      "children": [
        "header-3",
        "section-2"
      ]
    },
    {
      "id": "text-15",
      "component": "Text",
      "strong": true,
      "textContent": "Analytics read-only"
    },
    {
      "id": "badge-3",
      "component": "Badge",
      "text": "Read only",
      "variant": "muted"
    },
    {
      "id": "text-14",
      "component": "Text",
      "variant": "body",
      "slot": "heading",
      "children": [
        "text-15",
        "badge-3"
      ]
    },
    {
      "id": "button-6",
      "component": "Button",
      "icon": "eye",
      "text": "Reveal",
      "variant": "ghost"
    },
    {
      "id": "button-7",
      "component": "Button",
      "text": "Rotate"
    },
    {
      "id": "text-16",
      "component": "Text",
      "variant": "body",
      "slot": "action",
      "children": [
        "button-6",
        "button-7"
      ]
    },
    {
      "id": "header-5",
      "component": "Header",
      "children": [
        "text-14",
        "text-16"
      ]
    },
    {
      "id": "text-17",
      "component": "Text",
      "variant": "body",
      "slot": "label",
      "textContent": "Key"
    },
    {
      "id": "text-18",
      "component": "Text",
      "variant": "body",
      "slot": "copy",
      "textContent": "Copy"
    },
    {
      "id": "header-6",
      "component": "Header",
      "children": [
        "text-17",
        "text-18"
      ]
    },
    {
      "id": "code-9",
      "component": "Code",
      "textContent": "sk_ro_••••••••••••b240"
    },
    {
      "id": "code-8",
      "component": "Code",
      "children": [
        "code-9"
      ]
    },
    {
      "id": "text-19",
      "component": "Text",
      "textContent": "Created Mar 12, 2026 · Last used yesterday",
      "variant": "body"
    },
    {
      "id": "footer-3",
      "component": "Footer",
      "children": [
        "text-19"
      ]
    },
    {
      "id": "code-7",
      "component": "Code",
      "children": [
        "header-6",
        "code-8",
        "footer-3"
      ]
    },
    {
      "id": "section-3",
      "component": "Section",
      "children": [
        "column-3"
      ]
    },
    {
      "id": "column-3",
      "component": "Column",
      "children": [
        "code-7"
      ]
    },
    {
      "id": "card-3",
      "component": "Card",
      "children": [
        "header-5",
        "section-3"
      ]
    },
    {
      "id": "alert",
      "component": "Alert",
      "icon": "info",
      "text": "Keys grant full API access. Store them in your secrets manager — never commit to source control.",
      "variant": "info"
    },
    {
      "id": "root",
      "component": "Column",
      "data-col": "",
      "children": [
        "row",
        "card",
        "card-2",
        "card-3",
        "alert"
      ]
    }
  ]
}