{
  "name": "settings-profile-security",
  "kind": "block",
  "primary": "div",
  "page": "/apps/saas/app/profile-security/profile-security.contents.html",
  "slots": [],
  "nested": [],
  "attrs": {
    "data-col": ""
  },
  "html": "<div data-col>\n      <row-ui gap=\"4\" align=\"center\">\n        <avatar-ui text=\"Kim Granlund\" size=\"xl\"></avatar-ui>\n        <upload-ui grow accept=\"image/*\" label=\"Upload new avatar\" hint=\"JPG, PNG or WebP. Max 2 MB. Square images render best.\"></upload-ui>\n      </row-ui>\n      <field-ui label=\"Full name\">\n        <input-ui value=\"Kim Granlund\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Display name\">\n        <input-ui value=\"kimba\" prefix=\"@\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Email\">\n        <input-ui value=\"kim@acme.com\" type=\"email\"></input-ui>\n      </field-ui>\n      <field-ui label=\"Bio\">\n        <textarea-ui placeholder=\"Tell the team a bit about yourself\" rows=\"3\">Product engineer. Working on the gen-UI pipeline.</textarea-ui>\n      </field-ui>\n    </div>",
  "source": "apps/saas/app/profile-security/profile-security.contents.html",
  "metadata": {
    "domain": "settings",
    "description": "Profile + security settings section — avatar + name fields, password change, 2FA toggle, session list.",
    "keywords": [
      "settings",
      "profile",
      "security",
      "account",
      "password",
      "2fa",
      "avatar",
      "sessions",
      "identity"
    ]
  },
  "captured_at": "2026-06-07T19:28:13.657Z",
  "template": [
    {
      "id": "avatar",
      "component": "Avatar",
      "size": "xl",
      "text": "Kim Granlund"
    },
    {
      "id": "upload",
      "component": "Upload",
      "accept": "image/*",
      "hint": "JPG, PNG or WebP. Max 2 MB. Square images render best.",
      "label": "Upload new avatar"
    },
    {
      "id": "row",
      "component": "Row",
      "align": "center",
      "gap": "4",
      "children": [
        "avatar",
        "upload"
      ]
    },
    {
      "id": "input",
      "component": "Input",
      "value": "Kim Granlund"
    },
    {
      "id": "field",
      "component": "Field",
      "label": "Full name",
      "children": [
        "input"
      ]
    },
    {
      "id": "input-2",
      "component": "Input",
      "prefix": "@",
      "value": "kimba"
    },
    {
      "id": "field-2",
      "component": "Field",
      "label": "Display name",
      "children": [
        "input-2"
      ]
    },
    {
      "id": "input-3",
      "component": "Input",
      "type": "email",
      "value": "kim@acme.com"
    },
    {
      "id": "field-3",
      "component": "Field",
      "label": "Email",
      "children": [
        "input-3"
      ]
    },
    {
      "id": "text-area",
      "component": "TextArea",
      "placeholder": "Tell the team a bit about yourself",
      "rows": "3",
      "value": "Product engineer. Working on the gen-UI pipeline."
    },
    {
      "id": "field-4",
      "component": "Field",
      "label": "Bio",
      "children": [
        "text-area"
      ]
    },
    {
      "id": "root",
      "component": "Column",
      "data-col": "",
      "children": [
        "row",
        "field",
        "field-2",
        "field-3",
        "field-4"
      ]
    }
  ]
}