@adia-ai/web-components 0.8.6 → 0.8.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adia-ai/web-components",
-  "version": "0.8.6",
+  "version": "0.8.8",
   "description": "AdiaUI web components \u2014 vanilla custom elements. A2UI runtime (renderer, registry, streams, wiring) lives in @adia-ai/a2ui-runtime.",
   "type": "module",
   "types": "./index.d.ts",
@@ -88,6 +88,7 @@
     "color/",
     "components/",
     "dist/",
+    "patterns/",
     "!components/**/*.html",
     "!components/**/*.examples.js",
     "components/**/*.examples.md",

package/patterns/access-requests/access-requests.examples.html

@@ -0,0 +1,132 @@
+<header>
+  <div>
+    <h1>Access requests</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui>
+    </div>
+  </div>
+  <p>The "Request access" path when a user lacks permission for a resource. Three connected surfaces: the access-denied state with a Request CTA, the request form, and the pending-status follow-up. Sub-flavor of approvals (13d) — same async-gate semantics, different entry point.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    When a user clicks a link or opens a resource they don't have
+    permission to see. Hard-403 the resource but offer a path to
+    ask the owner — better UX than a dead end. The owner gets a
+    notification (15d) + an entry in their approval queue (13d);
+    the requester gets a pending state until the request resolves.
+  </p>
+</section>
+
+<section data-section data-property="access-denied-cta">
+  <h2 variant="section">Access denied — with Request CTA</h2>
+  <p data-note>The standard access-denied state (cross-ref 36d) augmented with a "Request access" primary action. <code>alert-ui variant="warning"</code> carries the explanation; the CTA opens the request form.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access denied with request">
+      <card-ui data-chunk="access-denied-with-request" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">You don't have access to this</span>
+        </header>
+        <section>
+          <alert-ui variant="warning" icon="lock">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Q4 product roadmap is restricted.</text-ui>
+              <text-ui>Owned by Avery Chen. Ask them for access, or check if your team has a different version.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Go back" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Request access" variant="primary" icon-leading="paper-plane-tilt"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="request-form">
+  <h2 variant="section">Request form</h2>
+  <p data-note>The form the requester fills. Pre-fills the resource being requested; user picks the role they need + optional reason. Submit fires a notification to the owner.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access request form">
+      <card-ui data-chunk="access-request-form" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Request access</span>
+          <text-ui slot="description" color="subtle">Avery Chen will be notified</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Resource">
+              <input-ui name="resource" value="Q4 product roadmap" readonly></input-ui>
+            </field-ui>
+            <field-ui label="Role you need" required>
+              <select-ui name="role">
+                <option value="viewer" selected>Viewer — read only</option>
+                <option value="commenter">Commenter — read + comment</option>
+                <option value="editor">Editor — read + edit</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Why do you need access?" hint="Optional but speeds up approval">
+              <textarea-ui name="reason" rows="3" placeholder="e.g., I'm reviewing the Q4 plan for the engineering breakdown."></textarea-ui>
+            </field-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Send request" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="request-pending">
+  <h2 variant="section">Pending status</h2>
+  <p data-note>The state the requester sees after submission. <code>alert-ui variant="info"</code> with the reviewer name + reasonable ETA. "Cancel request" + "View other resources" actions.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="access request pending">
+      <card-ui data-chunk="access-request-pending" style="max-width: 480px;">
+        <header>
+          <span slot="heading" variant="section">Request sent</span>
+          <tag-ui slot="action" variant="warning">Pending</tag-ui>
+        </header>
+        <section>
+          <alert-ui variant="info" icon="clock-counter-clockwise">
+            <col-ui slot="content" gap="0-5">
+              <text-ui strong>Avery Chen has been notified.</text-ui>
+              <text-ui>You'll get an email when they approve or decline. Most requests are answered within a business day.</text-ui>
+            </col-ui>
+          </alert-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel request" variant="ghost"></button-ui>
+          <button-ui slot="action" text="View other resources" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Always show the owner's name</strong> — "ask Avery" reads as a real path; "ask the owner" reads as a system error. The owner identity comes from the same authorization data that produced the 403.</li>
+    <li><strong>Pre-fill the resource</strong> — never make the user re-type the resource name. The link they clicked is the request payload.</li>
+    <li><strong>Default role = least-privilege</strong> — Viewer is the default; the user can escalate. This is the same posture the role-picker (36a) uses for new members.</li>
+    <li><strong>Reason is optional but encouraged</strong> — a one-line reason cuts approval lag. Frame the hint around speed, not surveillance.</li>
+    <li><strong>Pending state shows the reviewer + ETA</strong> — "Avery Chen has been notified · most requests answered within a business day" beats a generic "request sent" toast. The requester can plan around the wait.</li>
+    <li><strong>Cancel-request is reversible</strong> — let the user pull the request back without contacting the owner. This is a polite-by-default convention.</li>
+    <li><strong>Don't auto-grant after timeout</strong> — pending should stay pending forever (or until manually canceled). Auto-grant is a security smell.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/patterns/approvals">approvals</a> — the owner-side surface (13d). Access requests appear in the approval queue.</li>
+    <li><a href="/site/components/alert">alert-ui</a> — explanation copy on all three surfaces.</li>
+    <li><a href="/site/components/field">field-ui</a> · <a href="/site/components/select">select-ui</a> · <a href="/site/components/textarea">textarea-ui</a> — request form primitives.</li>
+    <li><a href="/site/patterns/permissions-role-picker">permissions-role-picker</a> — same role vocabulary as the role select.</li>
+  </ul>
+</section>

package/patterns/access-requests/access-requests.html

@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Access requests (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/alert/alert.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+  <link rel="stylesheet" href="../../components/textarea/textarea.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/alert/alert.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+  <script type="module" src="../../components/textarea/textarea.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./access-requests.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load access-requests.examples.html — ${err.message}</p>`;
+      console.error('[access-requests.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/patterns/admin-keys-and-export/admin-keys-and-export.examples.html

@@ -0,0 +1,236 @@
+<header>
+  <div>
+    <h1>API keys, webhooks &amp; data export</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui> <tag-ui size="sm">input-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">alert-ui</tag-ui>
+    </div>
+  </div>
+  <p>Two adjacent admin surfaces: API key + webhook management (04g), and data-export / account-portability (04i). Both compose existing primitives — the patterns are in the wiring, the security copy, and the destructive-action flow.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    API keys: programmatic access to your account — server-side
+    integrations, scripts, CI. Distinct from per-user OAuth tokens
+    (account login flow); these are long-lived bearer tokens scoped
+    to a workspace. Webhooks deliver events to a URL.
+    Data export: GDPR / CCPA / SOC-2 compliance + workspace
+    migration. The user requests, the system queues, an email
+    arrives with a download link.
+  </p>
+</section>
+
+<section data-section data-property="api-keys-list">
+  <h2 variant="section">API keys list</h2>
+  <p data-note>The active-keys list. Each row carries a name, prefix (last 4 chars only — never the full secret), scope tag, last-used time, and a kebab menu (Rotate / Revoke). "Create key" header action.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="api keys list">
+      <card-ui data-chunk="api-keys-list">
+        <header>
+          <span slot="heading" variant="section">API keys</span>
+          <text-ui slot="description" color="subtle">3 active · last rotated 12 days ago</text-ui>
+          <button-ui slot="action" text="Create key" variant="primary" size="sm" icon-leading="plus"></button-ui>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="Production — backend">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_live_…A4F2</code> · last used 4 minutes ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="primary">read · write</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="CI — read-only">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_live_…9821</code> · last used 2 hours ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm">read</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="Local dev — kim">
+              <icon-ui slot="icon" name="key" size="sm"></icon-ui>
+              <span slot="description"><code>sk_test_…7f0e</code> · last used 18 days ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="muted">test</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="api-keys-create">
+  <h2 variant="section">Create key — one-time reveal</h2>
+  <p data-note>The just-created key shown once. After this view closes, the secret is not retrievable; only the prefix shows in the list. Copy button + alert explaining the one-shot semantics.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="key one-time reveal">
+      <card-ui data-chunk="api-keys-create" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Your new API key</span>
+          <text-ui slot="description" color="subtle">Copy it now — it won't be shown again</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Production — backend">
+              <input-ui name="api_key" value="sk_live_4f8b2e7c91d2a48fA4F2" readonly icon-trailing="copy"></input-ui>
+            </field-ui>
+            <alert-ui variant="warning" icon="warning">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>This is the only time we'll show this key.</text-ui>
+                <text-ui>Store it in your secrets manager now. If you lose it, you'll need to revoke this key and create a new one.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="I've stored it safely" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="webhooks-list">
+  <h2 variant="section">Webhooks list</h2>
+  <p data-note>Endpoints + the events they subscribe to + last delivery status. Failed deliveries surface as a danger tag with a "Retry" affordance per row.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="webhooks list">
+      <card-ui data-chunk="webhooks-list">
+        <header>
+          <span slot="heading" variant="section">Webhooks</span>
+          <text-ui slot="description" color="subtle">2 endpoints · 1 failing</text-ui>
+          <button-ui slot="action" text="Add endpoint" variant="primary" size="sm" icon-leading="plus"></button-ui>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="https://api.example.com/adia/events">
+              <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
+              <span slot="description">5 events · last delivery 3 minutes ago</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="success">200 OK</tag-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="https://hooks.zapier.com/…/abc123/">
+              <icon-ui slot="icon" name="webhooks-logo" size="sm"></icon-ui>
+              <span slot="description">3 events · last attempt 2 hours ago · 3 retries</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="danger">503</tag-ui>
+                <button-ui text="Retry" variant="ghost" size="sm"></button-ui>
+                <button-ui icon="dots-three-vertical" variant="ghost" size="sm" aria-label="Manage"></button-ui>
+              </row-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="data-export-request">
+  <h2 variant="section">Data export — request</h2>
+  <p data-note>Compliance / portability flow. User picks scope (full workspace vs. just my data) + format, the system queues the job, an email arrives with a download link. Async, not synchronous.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="data export request">
+      <card-ui data-chunk="data-export-request" style="max-width: 560px;">
+        <header>
+          <span slot="heading" variant="section">Export your data</span>
+          <text-ui slot="description" color="subtle">We'll email you when the archive is ready</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="What to include" required>
+              <select-ui name="scope">
+                <option value="self">Just my data (GDPR Article 15)</option>
+                <option value="workspace" selected>Entire workspace (admin only)</option>
+              </select-ui>
+            </field-ui>
+            <field-ui label="Format" required>
+              <select-ui name="format">
+                <option value="json" selected>JSON archive (.zip)</option>
+                <option value="ndjson">NDJSON (line-delimited)</option>
+                <option value="csv">CSV per table</option>
+              </select-ui>
+            </field-ui>
+            <alert-ui variant="info" icon="clock">
+              <col-ui slot="content" gap="0-5">
+                <text-ui strong>Exports are usually ready within 1 hour.</text-ui>
+                <text-ui>Large workspaces (≥ 1M records) can take up to 24 hours. We'll email <code>kim@example.com</code> with a download link valid for 7 days.</text-ui>
+              </col-ui>
+            </alert-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Cancel" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Request export" variant="primary"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="data-export-history">
+  <h2 variant="section">Export history</h2>
+  <p data-note>The user's recent export jobs. Status tags (Queued / Running / Ready / Expired). "Ready" rows show a Download button until the link expires; expired rows are still visible for audit but disabled.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="export history">
+      <card-ui data-chunk="data-export-history">
+        <header>
+          <span slot="heading" variant="section">Recent exports</span>
+        </header>
+        <section bleed>
+          <list-ui divider contained>
+            <list-item-ui text="Workspace · JSON">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Requested 12 minutes ago · 1.2M records</span>
+              <tag-ui slot="action" size="sm" variant="warning">Running</tag-ui>
+            </list-item-ui>
+            <list-item-ui text="My data · CSV">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Ready 2 hours ago · 4.2 MB · expires in 6 days</span>
+              <row-ui slot="action" gap="2" align="center">
+                <tag-ui size="sm" variant="success">Ready</tag-ui>
+                <button-ui text="Download" variant="primary" size="sm" icon-leading="download-simple"></button-ui>
+              </row-ui>
+            </list-item-ui>
+            <list-item-ui text="Workspace · JSON">
+              <icon-ui slot="icon" name="download-simple" size="sm"></icon-ui>
+              <span slot="description">Ready 14 days ago · link expired</span>
+              <tag-ui slot="action" size="sm" variant="muted">Expired</tag-ui>
+            </list-item-ui>
+          </list-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Show the prefix, never the full key</strong> — the list view always renders <code>sk_live_…A4F2</code>. The full secret only ever appears in the one-time reveal card; if the user lost it, they have to revoke + recreate. Storing the full key in the DB plaintext is the smell this convention prevents.</li>
+    <li><strong>One-time reveal needs a confirmation gate</strong> — the "I've stored it safely" button is the user's acknowledgment that they grabbed the key. Closing the modal/page without clicking it should still hide the secret (security default).</li>
+    <li><strong>Webhook failures are first-class</strong> — a 503 tag + Retry button is the canonical row. Hiding failures in a sub-page guarantees they get ignored.</li>
+    <li><strong>Data export is async, not sync</strong> — never block the UI on a "Generate now" call. Queue the job; email the link. Users with 1M-record workspaces shouldn't see a spinner.</li>
+    <li><strong>Download links expire</strong> — 7 days is typical; longer for SOC-2 retention requirements. The UI shows the expiry and the "Expired" state retains audit visibility (don't delete the row).</li>
+    <li><strong>Scope selection is policy-aware</strong> — "Entire workspace" must be admin-gated; non-admins see only "Just my data" (GDPR Article 15). Don't show the option then 403 the request.</li>
+    <li><strong>Format choices match the consumer</strong> — JSON archive for re-import, NDJSON for streaming consumers, CSV for spreadsheets. Three is enough; PDF or XLSX adds support tickets without value.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/field">field-ui</a> · <a href="/site/components/input">input-ui</a> · <a href="/site/components/select">select-ui</a> — form primitives.</li>
+    <li><a href="/site/components/alert">alert-ui</a> — security + scheduling copy.</li>
+    <li><a href="/site/components/tag">tag-ui</a> — status (200 OK / 503 / Running / Ready / Expired).</li>
+    <li><a href="/site/patterns/permissions-sharing">permissions-sharing</a> — adjacent (API key scopes overlap with sharing scopes).</li>
+    <li><a href="/site/patterns/profile-public-and-verification">profile + verification</a> — adjacent (KYC also gates high-value API actions per 16e).</li>
+  </ul>
+</section>

package/patterns/admin-keys-and-export/admin-keys-and-export.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>API keys, webhooks &amp; data export (pattern) — AdiaUI</title>
+
+  <!-- Token base -->
+  <link rel="stylesheet" href="../../styles/resets.css">
+  <link rel="stylesheet" href="../../styles/tokens.css">
+
+  <!-- Component CSS — primitives this pattern composes -->
+  <link rel="stylesheet" href="../../components/alert/alert.css">
+  <link rel="stylesheet" href="../../components/button/button.css">
+  <link rel="stylesheet" href="../../components/card/card.css">
+  <link rel="stylesheet" href="../../components/col/col.css">
+  <link rel="stylesheet" href="../../components/field/field.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/input/input.css">
+  <link rel="stylesheet" href="../../components/list/list.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/select/select.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/alert/alert.js"></script>
+  <script type="module" src="../../components/button/button.js"></script>
+  <script type="module" src="../../components/card/card.js"></script>
+  <script type="module" src="../../components/col/col.js"></script>
+  <script type="module" src="../../components/field/field.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/input/input.js"></script>
+  <script type="module" src="../../components/list/list.js"></script>
+  <script type="module" src="../../components/row/row.js"></script>
+  <script type="module" src="../../components/select/select.js"></script>
+  <script type="module" src="../../components/tag/tag.js"></script>
+  <script type="module" src="../../components/text/text.js"></script>
+
+  <style>
+    :where(html, body) { margin: 0; min-height: 100vh; background: var(--md-sys-color-neutral-background); color: var(--md-sys-color-neutral-on-surface); font-family: var(--a-font-family); }
+    main { max-width: 960px; margin-inline: auto; padding: var(--a-space-6) var(--a-space-5); }
+  </style>
+</head>
+<body>
+
+  <main id="demo-root">
+    <p>Loading examples…</p>
+  </main>
+
+  <script type="module">
+    const root = document.getElementById('demo-root');
+    try {
+      const res = await fetch('./admin-keys-and-export.examples.html');
+      if (!res.ok) throw new Error(`fetch failed (${res.status})`);
+      root.innerHTML = await res.text();
+    } catch (err) {
+      root.innerHTML = `<p style="color:var(--a-danger-strong);">Failed to load admin-keys-and-export.examples.html — ${err.message}</p>`;
+      console.error('[admin-keys-and-export.html]', err);
+    }
+  </script>
+
+</body>
+</html>