@adia-ai/a2ui-corpus 0.4.2 → 0.4.4

package/compositions/settings/api-keys.json

@@ -1,57 +1,602 @@
 {
   "$schema": "../_schema.json",
   "name": "api-keys",
-  "version": 1,
+  "version": 2,
   "kind": "composition",
   "domain": "settings",
-  "description": "API keys / tokens management — list of masked tokens with scopes, last-used, status; plus create flow and rotate/revoke actions. Stripe/Vercel/OpenAI-style developer dashboard pattern.",
-  "tags": { "purpose": ["developer", "api-keys", "tokens", "secrets", "rbac"], "complexity": "composed", "layout": "list" },
-  "keywords": ["api keys", "tokens", "secrets", "bearer", "rotate", "revoke", "scopes", "stripe", "openai", "vercel", "developer", "sdk"],
-  "related": ["webhooks", "team-members-rbac", "session-device-mgmt"],
-
+  "description": "API keys / tokens management \u2014 list of masked tokens with scopes, last-used, status; plus create flow and rotate/revoke actions. Stripe/Vercel/OpenAI-style developer dashboard pattern.",
+  "tags": {
+    "purpose": [
+      "developer",
+      "api-keys",
+      "tokens",
+      "secrets",
+      "rbac"
+    ],
+    "complexity": "composed",
+    "layout": "list"
+  },
+  "keywords": [
+    "api keys",
+    "tokens",
+    "secrets",
+    "bearer",
+    "rotate",
+    "revoke",
+    "scopes",
+    "stripe",
+    "openai",
+    "vercel",
+    "developer",
+    "sdk"
+  ],
+  "related": [
+    "webhooks",
+    "team-members-rbac",
+    "session-device-mgmt"
+  ],
   "template": [
-    { "id": "root", "component": "Card", "children": ["hdr", "sec", "ftr"] },
-    { "id": "hdr", "$fragment": "card-header-with-description",
-      "bindings": { "heading": "API keys", "description": "Secrets are shown once at creation. Treat like a password." } },
-    { "id": "sec", "component": "Section", "children": ["alert", "stats", "keys-toolbar", "table", "keys-title", "keys-list", "newkey-name"] },
-
-    { "id": "keys-toolbar", "component": "Toolbar", "children": ["kt-search", "kt-new"] },
-    { "id": "kt-search", "component": "Search", "placeholder": "Search keys by name or scope…" },
-    { "id": "kt-new", "component": "Button", "variant": "primary", "icon": "plus", "text": "Create new API key" },
-
-    { "id": "alert", "component": "Alert", "variant": "warning", "icon": "warning", "title": "Secret shown only once at creation", "description": "Copy your new key immediately — we never display the full value again. Rotate compromised keys; Revoke to permanently invalidate." },
-
-    { "id": "stats", "component": "Row", "children": ["s1", "s2", "s3", "s4"], "gap": "4" },
-    { "id": "s1", "$fragment": "stat-card", "bindings": { "label": "Live keys", "value": "3", "trend": "sk_live_*" } },
-    { "id": "s2", "$fragment": "stat-card", "bindings": { "label": "Test keys", "value": "2", "trend": "sk_test_*" } },
-    { "id": "s3", "$fragment": "stat-card", "bindings": { "label": "Requests (24h)", "value": "184k", "trend": "+12% vs yesterday" } },
-    { "id": "s4", "$fragment": "stat-card", "bindings": { "label": "Last rotation", "value": "14d ago", "trend": "Next due in 76d" } },
-
-    { "id": "table", "component": "Table",
+    {
+      "id": "root",
+      "component": "Card",
+      "children": [
+        "hdr",
+        "sec",
+        "ftr"
+      ]
+    },
+    {
+      "id": "hdr",
+      "component": "Header",
+      "children": [
+        "hdr--h-title",
+        "hdr--h-desc"
+      ]
+    },
+    {
+      "id": "hdr--h-title",
+      "component": "Text",
+      "slot": "heading",
+      "variant": "section",
+      "textContent": "API keys"
+    },
+    {
+      "id": "hdr--h-desc",
+      "component": "Text",
+      "slot": "description",
+      "variant": "caption",
+      "textContent": "Secrets are shown once at creation. Treat like a password."
+    },
+    {
+      "id": "sec",
+      "component": "Section",
+      "children": [
+        "alert",
+        "stats",
+        "keys-toolbar",
+        "table",
+        "keys-title",
+        "keys-list",
+        "newkey-name"
+      ]
+    },
+    {
+      "id": "keys-toolbar",
+      "component": "Toolbar",
+      "children": [
+        "kt-search",
+        "kt-new"
+      ]
+    },
+    {
+      "id": "kt-search",
+      "component": "Input",
+      "type": "search",
+      "prefix": "magnifying-glass",
+      "placeholder": "Search keys by name or scope\u2026"
+    },
+    {
+      "id": "kt-new",
+      "component": "Button",
+      "variant": "primary",
+      "icon": "plus",
+      "text": "Create new API key"
+    },
+    {
+      "id": "alert",
+      "component": "Alert",
+      "variant": "warning",
+      "icon": "warning",
+      "title": "Secret shown only once at creation",
+      "description": "Copy your new key immediately \u2014 we never display the full value again. Rotate compromised keys; Revoke to permanently invalidate."
+    },
+    {
+      "id": "stats",
+      "component": "Row",
+      "children": [
+        "s1",
+        "s2",
+        "s3",
+        "s4"
+      ],
+      "gap": "4"
+    },
+    {
+      "id": "s1",
+      "component": "Card",
+      "children": [
+        "s1--sc-sec"
+      ]
+    },
+    {
+      "id": "s1--sc-sec",
+      "component": "Section",
+      "children": [
+        "s1--sc-col"
+      ]
+    },
+    {
+      "id": "s1--sc-col",
+      "component": "Column",
+      "children": [
+        "s1--sc-label",
+        "s1--sc-value",
+        "s1--sc-trend"
+      ],
+      "gap": "1"
+    },
+    {
+      "id": "s1--sc-label",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Live keys"
+    },
+    {
+      "id": "s1--sc-value",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "3"
+    },
+    {
+      "id": "s1--sc-trend",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "sk_live_*"
+    },
+    {
+      "id": "s2",
+      "component": "Card",
+      "children": [
+        "s2--sc-sec"
+      ]
+    },
+    {
+      "id": "s2--sc-sec",
+      "component": "Section",
+      "children": [
+        "s2--sc-col"
+      ]
+    },
+    {
+      "id": "s2--sc-col",
+      "component": "Column",
+      "children": [
+        "s2--sc-label",
+        "s2--sc-value",
+        "s2--sc-trend"
+      ],
+      "gap": "1"
+    },
+    {
+      "id": "s2--sc-label",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Test keys"
+    },
+    {
+      "id": "s2--sc-value",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "2"
+    },
+    {
+      "id": "s2--sc-trend",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "sk_test_*"
+    },
+    {
+      "id": "s3",
+      "component": "Card",
+      "children": [
+        "s3--sc-sec"
+      ]
+    },
+    {
+      "id": "s3--sc-sec",
+      "component": "Section",
+      "children": [
+        "s3--sc-col"
+      ]
+    },
+    {
+      "id": "s3--sc-col",
+      "component": "Column",
+      "children": [
+        "s3--sc-label",
+        "s3--sc-value",
+        "s3--sc-trend"
+      ],
+      "gap": "1"
+    },
+    {
+      "id": "s3--sc-label",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Requests (24h)"
+    },
+    {
+      "id": "s3--sc-value",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "184k"
+    },
+    {
+      "id": "s3--sc-trend",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "+12% vs yesterday"
+    },
+    {
+      "id": "s4",
+      "component": "Card",
+      "children": [
+        "s4--sc-sec"
+      ]
+    },
+    {
+      "id": "s4--sc-sec",
+      "component": "Section",
+      "children": [
+        "s4--sc-col"
+      ]
+    },
+    {
+      "id": "s4--sc-col",
+      "component": "Column",
+      "children": [
+        "s4--sc-label",
+        "s4--sc-value",
+        "s4--sc-trend"
+      ],
+      "gap": "1"
+    },
+    {
+      "id": "s4--sc-label",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Last rotation"
+    },
+    {
+      "id": "s4--sc-value",
+      "component": "Text",
+      "variant": "heading",
+      "textContent": "14d ago"
+    },
+    {
+      "id": "s4--sc-trend",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "Next due in 76d"
+    },
+    {
+      "id": "table",
+      "component": "Table",
       "columns": [
-        { "key": "name",     "label": "Name",     "type": "text", "flex": 2 },
-        { "key": "token",    "label": "Token",    "type": "text", "flex": 2 },
-        { "key": "scopes",   "label": "Scopes",   "type": "text", "flex": 2 },
-        { "key": "lastUsed", "label": "Last used", "type": "text", "width": 120 },
-        { "key": "status",   "label": "Status",   "type": "badge", "width": 100 }
+        {
+          "key": "name",
+          "label": "Name",
+          "type": "text",
+          "flex": 2
+        },
+        {
+          "key": "token",
+          "label": "Token",
+          "type": "text",
+          "flex": 2
+        },
+        {
+          "key": "scopes",
+          "label": "Scopes",
+          "type": "text",
+          "flex": 2
+        },
+        {
+          "key": "lastUsed",
+          "label": "Last used",
+          "type": "text",
+          "width": 120
+        },
+        {
+          "key": "status",
+          "label": "Status",
+          "type": "badge",
+          "width": 100
+        }
       ],
       "data": [
-        { "name": "Production backend",    "token": "sk_live_••••2Kj", "scopes": "read_all, write_charges",   "lastUsed": "3 min ago",  "status": "Active" },
-        { "name": "CI / deploy hooks",     "token": "sk_live_••••8Fx", "scopes": "read_deploys, write_deploys", "lastUsed": "2 hours ago", "status": "Active" },
-        { "name": "Legacy webhook relay",  "token": "sk_live_••••p1A", "scopes": "read_all",                   "lastUsed": "Yesterday",   "status": "Rotate" },
-        { "name": "Staging QA",            "token": "sk_test_••••qT3", "scopes": "read_all, write_all",        "lastUsed": "1 hour ago",  "status": "Test" }
-      ]
-    },
-
-    { "id": "keys-title", "component": "Text", "variant": "section", "textContent": "Keys — copy, rotate, revoke" },
-    { "id": "keys-list", "component": "Column", "gap": "2", "children": ["k1", "k2", "k3"] },
-    { "id": "k1", "$fragment": "credential-entry-atom", "bindings": { "keyName": "Production backend", "maskedToken": "sk_live_****abc1", "scopes": "read_all · write_charges", "scopeVariant": "info", "lastUsed": "used 3 min ago" } },
-    { "id": "k2", "$fragment": "credential-entry-atom", "bindings": { "keyName": "CI / deploy hooks", "maskedToken": "sk_live_****d9f2", "scopes": "read_deploys · write_deploys", "scopeVariant": "info", "lastUsed": "used 2h ago" } },
-    { "id": "k3", "$fragment": "credential-entry-atom", "bindings": { "keyName": "Legacy webhook relay", "maskedToken": "sk_live_****7e4a", "scopes": "read_all", "scopeVariant": "warning", "lastUsed": "used yesterday" } },
-
-    { "id": "newkey-name", "$fragment": "labeled-input", "bindings": { "label": "New key name", "name": "new_key_name", "placeholder": "e.g. Production backend" } },
-
-    { "id": "ftr", "$fragment": "footer-cancel-save",
-      "bindings": { "cancelLabel": "View docs", "confirmLabel": "Create new key" } }
-  ]
+        {
+          "name": "Production backend",
+          "token": "sk_live_\u2022\u2022\u2022\u20222Kj",
+          "scopes": "read_all, write_charges",
+          "lastUsed": "3 min ago",
+          "status": "Active"
+        },
+        {
+          "name": "CI / deploy hooks",
+          "token": "sk_live_\u2022\u2022\u2022\u20228Fx",
+          "scopes": "read_deploys, write_deploys",
+          "lastUsed": "2 hours ago",
+          "status": "Active"
+        },
+        {
+          "name": "Legacy webhook relay",
+          "token": "sk_live_\u2022\u2022\u2022\u2022p1A",
+          "scopes": "read_all",
+          "lastUsed": "Yesterday",
+          "status": "Rotate"
+        },
+        {
+          "name": "Staging QA",
+          "token": "sk_test_\u2022\u2022\u2022\u2022qT3",
+          "scopes": "read_all, write_all",
+          "lastUsed": "1 hour ago",
+          "status": "Test"
+        }
+      ]
+    },
+    {
+      "id": "keys-title",
+      "component": "Text",
+      "variant": "section",
+      "textContent": "Keys \u2014 copy, rotate, revoke"
+    },
+    {
+      "id": "keys-list",
+      "component": "Column",
+      "gap": "2",
+      "children": [
+        "k1",
+        "k2",
+        "k3"
+      ]
+    },
+    {
+      "id": "k1",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "k1--akr-n",
+        "k1--akr-tok",
+        "k1--akr-scope",
+        "k1--akr-last",
+        "k1--akr-copy",
+        "k1--akr-rot",
+        "k1--akr-rev"
+      ]
+    },
+    {
+      "id": "k1--akr-n",
+      "component": "Text",
+      "variant": "label",
+      "textContent": "Production backend"
+    },
+    {
+      "id": "k1--akr-tok",
+      "component": "Code",
+      "textContent": "sk_live_****abc1"
+    },
+    {
+      "id": "k1--akr-scope",
+      "component": "Badge",
+      "text": "read_all \u00b7 write_charges",
+      "variant": "info"
+    },
+    {
+      "id": "k1--akr-last",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "used 3 min ago"
+    },
+    {
+      "id": "k1--akr-copy",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "copy",
+      "text": "Copy"
+    },
+    {
+      "id": "k1--akr-rot",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "arrows-clockwise",
+      "text": "Rotate"
+    },
+    {
+      "id": "k1--akr-rev",
+      "component": "Button",
+      "variant": "danger",
+      "size": "sm",
+      "icon": "trash",
+      "text": "Revoke"
+    },
+    {
+      "id": "k2",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "k2--akr-n",
+        "k2--akr-tok",
+        "k2--akr-scope",
+        "k2--akr-last",
+        "k2--akr-copy",
+        "k2--akr-rot",
+        "k2--akr-rev"
+      ]
+    },
+    {
+      "id": "k2--akr-n",
+      "component": "Text",
+      "variant": "label",
+      "textContent": "CI / deploy hooks"
+    },
+    {
+      "id": "k2--akr-tok",
+      "component": "Code",
+      "textContent": "sk_live_****d9f2"
+    },
+    {
+      "id": "k2--akr-scope",
+      "component": "Badge",
+      "text": "read_deploys \u00b7 write_deploys",
+      "variant": "info"
+    },
+    {
+      "id": "k2--akr-last",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "used 2h ago"
+    },
+    {
+      "id": "k2--akr-copy",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "copy",
+      "text": "Copy"
+    },
+    {
+      "id": "k2--akr-rot",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "arrows-clockwise",
+      "text": "Rotate"
+    },
+    {
+      "id": "k2--akr-rev",
+      "component": "Button",
+      "variant": "danger",
+      "size": "sm",
+      "icon": "trash",
+      "text": "Revoke"
+    },
+    {
+      "id": "k3",
+      "component": "Row",
+      "gap": "3",
+      "children": [
+        "k3--akr-n",
+        "k3--akr-tok",
+        "k3--akr-scope",
+        "k3--akr-last",
+        "k3--akr-copy",
+        "k3--akr-rot",
+        "k3--akr-rev"
+      ]
+    },
+    {
+      "id": "k3--akr-n",
+      "component": "Text",
+      "variant": "label",
+      "textContent": "Legacy webhook relay"
+    },
+    {
+      "id": "k3--akr-tok",
+      "component": "Code",
+      "textContent": "sk_live_****7e4a"
+    },
+    {
+      "id": "k3--akr-scope",
+      "component": "Badge",
+      "text": "read_all",
+      "variant": "warning"
+    },
+    {
+      "id": "k3--akr-last",
+      "component": "Text",
+      "variant": "caption",
+      "textContent": "used yesterday"
+    },
+    {
+      "id": "k3--akr-copy",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "copy",
+      "text": "Copy"
+    },
+    {
+      "id": "k3--akr-rot",
+      "component": "Button",
+      "variant": "outline",
+      "size": "sm",
+      "icon": "arrows-clockwise",
+      "text": "Rotate"
+    },
+    {
+      "id": "k3--akr-rev",
+      "component": "Button",
+      "variant": "danger",
+      "size": "sm",
+      "icon": "trash",
+      "text": "Revoke"
+    },
+    {
+      "id": "newkey-name",
+      "component": "Field",
+      "label": "New key name",
+      "children": [
+        "newkey-name--fi-in"
+      ]
+    },
+    {
+      "id": "newkey-name--fi-in",
+      "component": "Input",
+      "name": "new_key_name",
+      "placeholder": "e.g. Production backend",
+      "type": "text"
+    },
+    {
+      "id": "ftr",
+      "component": "Footer",
+      "children": [
+        "ftr--f-row"
+      ]
+    },
+    {
+      "id": "ftr--f-row",
+      "component": "Row",
+      "children": [
+        "ftr--f-btn-cancel",
+        "ftr--f-btn-save"
+      ],
+      "gap": "2"
+    },
+    {
+      "id": "ftr--f-btn-cancel",
+      "component": "Button",
+      "variant": "ghost",
+      "text": "View docs"
+    },
+    {
+      "id": "ftr--f-btn-save",
+      "component": "Button",
+      "variant": "primary",
+      "text": "Create new key"
+    }
+  ],
+  "_migrated": "2026-05-12 \u2014 inlined per Option C (fragments retired)"
 }