@adia-ai/web-components 0.8.6 → 0.8.8

package/patterns/marketing-engagement/marketing-engagement.examples.html

@@ -0,0 +1,280 @@
+<header>
+  <div>
+    <h1>Marketing &amp; engagement</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">button-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">stat-ui</tag-ui> <tag-ui size="sm">field-ui</tag-ui>
+    </div>
+  </div>
+  <p>Three adjacent marketing-side surfaces: hero/CTA blocks (14c) for landing pages, referral and invite flows (14f) for word-of-mouth growth, and achievement/milestone moments (14g) for ongoing engagement. All compose existing primitives — heroes are layout-heavy card-ui, referrals are field-ui + tag-ui status, achievements are tag-ui + stat-ui + progress-ui.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Hero/CTA: top-of-page block on any marketing or landing page
+    where the goal is "do this one thing". Referral: when growth
+    benefits from existing users inviting others (paid plans,
+    workspaces, social products). Achievements: when ongoing
+    engagement needs a non-monetary reward — streaks, completion
+    badges, level-ups.
+  </p>
+</section>
+
+<section data-section data-property="hero-simple">
+  <h2 variant="section">Hero — title + subtitle + CTA</h2>
+  <p data-note>The minimal hero. Centered display headline, subtitle, primary CTA + secondary "Learn more" ghost. No supporting image — works when the headline carries the weight.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="simple hero">
+      <card-ui data-chunk="hero-cta-simple" raw>
+        <section bleed>
+          <col-ui gap="3" align="center" padding="10">
+            <tag-ui size="sm" variant="muted">v0.0.27 — out today</tag-ui>
+            <text-ui variant="display" strong>Generative UI, deterministically.</text-ui>
+            <text-ui variant="deck" color="subtle">AdiaUI emits A2UI JSON the runtime renders into Light-DOM web components. No model, no surprise.</text-ui>
+            <row-ui gap="2">
+              <button-ui text="Get started" variant="primary" size="lg"></button-ui>
+              <button-ui text="See demos" variant="ghost" size="lg" icon-trailing="arrow-right"></button-ui>
+            </row-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="hero-split">
+  <h2 variant="section">Hero — split with visual</h2>
+  <p data-note>Two-column hero. Headline + subtitle + CTA on the left, supporting visual on the right. The visual is a placeholder card here; in production it's a screenshot, animation, or video poster.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="split hero">
+      <card-ui data-chunk="hero-cta-split" raw>
+        <section bleed>
+          <grid-ui columns="2" gap="6" align="center" padding="8">
+            <col-ui gap="4" align="start">
+              <tag-ui size="sm" variant="muted">For teams</tag-ui>
+              <text-ui variant="display" strong>Ship UI as fast as your model thinks.</text-ui>
+              <text-ui variant="deck" color="subtle">A2UI is a typed JSON protocol your agent emits and the runtime renders. No React rebuild for every prompt.</text-ui>
+              <row-ui gap="2">
+                <button-ui text="Start free" variant="primary"></button-ui>
+                <button-ui text="Talk to sales" variant="ghost" icon-trailing="arrow-right"></button-ui>
+              </row-ui>
+              <row-ui gap="6">
+                <stat-ui label="Components" value="94"></stat-ui>
+                <stat-ui label="Chunks" value="755"></stat-ui>
+                <stat-ui label="Cost ratio" value="0.18×"></stat-ui>
+              </row-ui>
+            </col-ui>
+            <card-ui variant="soft">
+              <section bleed>
+                <col-ui align="center" justify="center" padding="10">
+                  <text-ui color="subtle">[ Product visual ]</text-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+          </grid-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="referral-link">
+  <h2 variant="section">Referral — share link</h2>
+  <p data-note>Read-only input prefilled with the user's referral URL + Copy button. Below it: per-channel share buttons (email, X, LinkedIn). Reward copy describes what referrer + referee get ("$10 credit each").</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="referral share link">
+      <card-ui data-chunk="referral-share-link">
+        <header>
+          <span slot="heading" variant="section">Invite a friend, both get $10</span>
+          <text-ui slot="description" color="subtle">When they sign up and verify, $10 in credit lands in both your accounts.</text-ui>
+        </header>
+        <section>
+          <col-ui gap="3">
+            <field-ui label="Your referral link">
+              <input-ui name="referral_url" value="adia.ai/r/kim-A4F92" readonly icon-trailing="copy"></input-ui>
+            </field-ui>
+            <row-ui gap="2">
+              <button-ui text="Copy link" variant="primary" icon-leading="copy"></button-ui>
+              <button-ui text="Email" variant="ghost" icon-leading="envelope"></button-ui>
+              <button-ui text="X" variant="ghost"></button-ui>
+              <button-ui text="LinkedIn" variant="ghost"></button-ui>
+            </row-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="referral-status">
+  <h2 variant="section">Referral — status</h2>
+  <p data-note>The user's referral history. Stats grid (referrals sent / converted / credits earned), then a list of per-referral rows with avatar + status tag. Pending = invite sent, no signup; Joined = signed up, no verify; Verified = credit earned.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="referral status">
+      <card-ui data-chunk="referral-status">
+        <header>
+          <span slot="heading" variant="section">Your referrals</span>
+          <text-ui slot="description" color="subtle">$30 credit earned · 3 friends joined</text-ui>
+        </header>
+        <section>
+          <col-ui gap="4">
+            <grid-ui columns="3" gap="3">
+              <stat-ui label="Sent" value="7"></stat-ui>
+              <stat-ui label="Joined" value="3"></stat-ui>
+              <stat-ui label="Credit earned" value="$30"></stat-ui>
+            </grid-ui>
+            <list-ui divider contained>
+              <list-item-ui text="Avery Chen">
+                <avatar-ui slot="icon" size="sm" text="Avery Chen"></avatar-ui>
+                <span slot="description">avery@example.com · 5 days ago</span>
+                <tag-ui slot="action" size="sm" variant="success">Verified · $10</tag-ui>
+              </list-item-ui>
+              <list-item-ui text="Jordan Lee">
+                <avatar-ui slot="icon" size="sm" text="Jordan Lee"></avatar-ui>
+                <span slot="description">jordan@example.com · 2 weeks ago</span>
+                <tag-ui slot="action" size="sm" variant="success">Verified · $10</tag-ui>
+              </list-item-ui>
+              <list-item-ui text="Sam Park">
+                <avatar-ui slot="icon" size="sm" text="Sam Park"></avatar-ui>
+                <span slot="description">sam@example.com · 3 weeks ago</span>
+                <tag-ui slot="action" size="sm">Joined</tag-ui>
+              </list-item-ui>
+              <list-item-ui text="riley@example.com">
+                <avatar-ui slot="icon" size="sm" text="riley@example.com"></avatar-ui>
+                <span slot="description">Sent 1 month ago</span>
+                <tag-ui slot="action" size="sm" variant="muted">Pending</tag-ui>
+              </list-item-ui>
+            </list-ui>
+          </col-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="achievement-badges">
+  <h2 variant="section">Achievements — earned badges</h2>
+  <p data-note>Grid of earned + locked badges. Each card shows the icon, name, description, and earn-date. Earned badges carry the date as a <code>success</code> tag; locked badges show progress as a <code>muted</code> tag and live in a <code>ghost</code> card so they read as quieter without raw opacity.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="achievement badges">
+      <card-ui data-chunk="achievement-badges">
+        <header>
+          <span slot="heading" variant="section">Achievements</span>
+          <text-ui slot="description" color="subtle">5 of 12 unlocked</text-ui>
+        </header>
+        <section>
+          <grid-ui columns="3" gap="3">
+            <card-ui variant="outlined">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display">🚀</text-ui>
+                  <text-ui strong>First launch</text-ui>
+                  <text-ui variant="caption" color="subtle">Shipped your first prompt</text-ui>
+                  <tag-ui size="sm" variant="success">Apr 12</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+            <card-ui variant="outlined">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display">🔥</text-ui>
+                  <text-ui strong>7-day streak</text-ui>
+                  <text-ui variant="caption" color="subtle">A week of daily use</text-ui>
+                  <tag-ui size="sm" variant="success">Apr 19</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+            <card-ui variant="outlined">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display">🎨</text-ui>
+                  <text-ui strong>Theme artist</text-ui>
+                  <text-ui variant="caption" color="subtle">Created 3 custom themes</text-ui>
+                  <tag-ui size="sm" variant="success">Apr 22</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+            <card-ui variant="ghost">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display" color="subtle">🏗️</text-ui>
+                  <text-ui color="subtle" strong>Builder</text-ui>
+                  <text-ui variant="caption" color="subtle">Ship 10 prompts</text-ui>
+                  <tag-ui size="sm" variant="muted">7 of 10</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+            <card-ui variant="ghost">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display" color="subtle">🌟</text-ui>
+                  <text-ui color="subtle" strong>30-day streak</text-ui>
+                  <text-ui variant="caption" color="subtle">A month of daily use</text-ui>
+                  <tag-ui size="sm" variant="muted">12 of 30</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+            <card-ui variant="ghost">
+              <section bleed>
+                <col-ui align="center" gap="2" padding="4">
+                  <text-ui variant="display" color="subtle">🤝</text-ui>
+                  <text-ui color="subtle" strong>Connector</text-ui>
+                  <text-ui variant="caption" color="subtle">Refer 5 friends</text-ui>
+                  <tag-ui size="sm" variant="muted">3 of 5</tag-ui>
+                </col-ui>
+              </section>
+            </card-ui>
+          </grid-ui>
+        </section>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="achievement-unlock">
+  <h2 variant="section">Achievements — unlock moment</h2>
+  <p data-note>The just-earned achievement card — usually appears as a toast or modal moment. Big icon, "You earned…" header, description, and a CTA to share or keep going. This is the dopamine hit; don't make it dismissive.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="achievement unlock">
+      <card-ui data-chunk="achievement-unlock">
+        <section>
+          <col-ui gap="3" align="center" padding="6">
+            <text-ui variant="display">🔥</text-ui>
+            <tag-ui size="sm" variant="primary">Achievement unlocked</tag-ui>
+            <text-ui variant="display" strong>7-day streak</text-ui>
+            <text-ui color="subtle">A full week of daily use. You've shipped 14 prompts and 23 chunks since you started.</text-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <button-ui slot="action" text="Keep going" variant="ghost"></button-ui>
+          <button-ui slot="action" text="Share" variant="primary" icon-leading="share-network"></button-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Hero CTA is one primary action, not three</strong> — "Get started" + "See demos" (ghost) is the maximum. Three primaries means none — the user reads ambivalence.</li>
+    <li><strong>Hero kicker tag is for new/version/audience badges</strong> — "v0.0.27 out today" or "For teams" reads as a slim eyebrow above the headline. Skip the tag if there's no signal.</li>
+    <li><strong>Referral copy leads with the symmetrical reward</strong> — "Both get $10" beats "Get $10 when they sign up". Symmetry signals trust; one-sided rewards trigger spam reflex.</li>
+    <li><strong>Referral statuses are 3-state</strong> — Pending (link sent, no signup) · Joined (signed up, not verified) · Verified (credit earned). Anything else is collapsing distinct states into noise.</li>
+    <li><strong>Achievement badges show locked + earned together</strong> — locked badges with progress hints ("7 of 10") drive engagement; hiding them removes the goalpost. Use <code>variant="ghost"</code> on locked cards + <code>color="subtle"</code> on the icon — communicates state without raw opacity hacks.</li>
+    <li><strong>Don't auto-advance the unlock modal</strong> — the moment is the reward; let the user dismiss when ready. Auto-dismiss erases the dopamine hit.</li>
+    <li><strong>Streaks reset honestly</strong> — "You broke your 7-day streak" is honest; "You earned a 6-day streak" is patronizing. The product respects the user when it doesn't hide the loss.</li>
+    <li><strong>Achievements are private by default, shareable by choice</strong> — auto-posting "Kim earned 7-day streak" to a feed feels like surveillance. The Share button is the consent.</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/card">card-ui</a> · <a href="/site/components/button">button-ui</a> · <a href="/site/components/tag">tag-ui</a> — primitives.</li>
+    <li><a href="/site/components/stat">stat-ui</a> — referral metrics.</li>
+    <li><a href="/site/components/field">field-ui</a> · <a href="/site/components/input">input-ui</a> — referral link field.</li>
+    <li><a href="/site/patterns/system-banners">system-banners</a> — adjacent (announcement banners are sibling marketing-promo surfaces).</li>
+    <li><a href="/site/patterns/profile-public-and-verification">profile-public-and-verification</a> — adjacent (achievements often surface on the public profile).</li>
+  </ul>
+</section>

package/patterns/marketing-engagement/marketing-engagement.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>Marketing &amp; engagement (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/avatar/avatar.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/grid/grid.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/stat/stat.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/avatar/avatar.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/grid/grid.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/stat/stat.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('./marketing-engagement.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 marketing-engagement.examples.html — ${err.message}</p>`;
+      console.error('[marketing-engagement.html]', err);
+    }
+  </script>
+
+</body>
+</html>

package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.examples.html

@@ -0,0 +1,213 @@
+<header>
+  <div>
+    <h1>Bell menu &amp; digest preview</h1>
+    <div data-actions>
+      <tag-ui size="sm">card-ui</tag-ui> <tag-ui size="sm">empty-state-ui</tag-ui> <tag-ui size="sm">avatar-ui</tag-ui> <tag-ui size="sm">tag-ui</tag-ui> <tag-ui size="sm">row-ui</tag-ui> <tag-ui size="sm">col-ui</tag-ui>
+    </div>
+  </div>
+  <p>Two adjacent notification surfaces: the bell-icon popover that opens from the app shell (15d) and the email-digest preview that shows a user what their daily/weekly summary will contain (15e). Both compose existing primitives — `menu-ui` + per-row `list-item-ui` shapes.</p>
+</header>
+
+<section data-section data-property="when-to-use">
+  <h2 variant="section">When to use</h2>
+  <p data-note>
+    Bell menu: the ambient affordance — a small popover the user
+    glances at when the bell icon shows an unread count. Distinct
+    from the full notifications feed (15a) which is a dedicated
+    page and from toasts (08e) which are transient.
+    Digest preview: the in-app preview of what a scheduled email
+    will contain — used inside notification-prefs (15c) so the
+    user can validate the digest before committing.
+  </p>
+</section>
+
+<section data-section data-property="bell-empty">
+  <h2 variant="section">Bell menu — empty</h2>
+  <p data-note>Default state when there are no unread notifications. Uses an empty-state-ui in the menu body so the popover doesn't feel broken; "View all" footer links to the full feed.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="bell menu empty">
+      <card-ui data-chunk="bell-menu-empty" style="max-width: 360px;" data-shape="popover">
+        <header>
+          <text-ui slot="heading" strong>Notifications</text-ui>
+        </header>
+        <section>
+          <empty-state-ui
+            icon="bell-slash"
+            size="sm"
+            heading="All caught up"
+            description="No new notifications since you last checked."
+          ></empty-state-ui>
+        </section>
+        <footer divider>
+          <row-ui gap="2" align="center" justify="space-between" style="width: 100%;">
+            <text-ui size="sm">View all activity</text-ui>
+            <icon-ui name="arrow-right" size="sm"></icon-ui>
+          </row-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="bell-unread">
+  <h2 variant="section">Bell menu — unread items</h2>
+  <p data-note>Each row carries an avatar (or icon for system events), a one-line summary, a timestamp, and a small unread-dot. Clicking a row marks it read and navigates to the source. "Mark all read" + "View all activity" in the footer.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="bell menu with unread">
+      <card-ui data-chunk="bell-menu-unread" style="max-width: 380px;" data-shape="popover">
+        <header>
+          <row-ui slot="heading" align="center" gap="2">
+            <text-ui strong>Notifications</text-ui>
+            <tag-ui size="sm" variant="primary">3 new</tag-ui>
+          </row-ui>
+        </header>
+        <section>
+          <col-ui gap="2">
+            <row-ui gap="2" align="start">
+              <avatar-ui size="sm" text="Avery Chen"></avatar-ui>
+              <col-ui gap="0" style="flex: 1;">
+                <text-ui><strong>Avery Chen</strong> commented on your PR</text-ui>
+                <text-ui color="subtle" size="sm">"OKLCH ramp comment" · 4 minutes ago</text-ui>
+              </col-ui>
+              <span aria-label="Unread" style="flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-primary-strong);"></span>
+            </row-ui>
+            <row-ui gap="2" align="start">
+              <avatar-ui size="sm" text="Jordan Lee"></avatar-ui>
+              <col-ui gap="0" style="flex: 1;">
+                <text-ui><strong>Jordan Lee</strong> assigned you a task</text-ui>
+                <text-ui color="subtle" size="sm">"Audit kanban accessibility" · 1 hour ago</text-ui>
+              </col-ui>
+              <span aria-label="Unread" style="flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-primary-strong);"></span>
+            </row-ui>
+            <row-ui gap="2" align="start">
+              <icon-ui name="check-circle" size="sm"></icon-ui>
+              <col-ui gap="0" style="flex: 1;">
+                <text-ui>Build #4823 succeeded on <strong>main</strong></text-ui>
+                <text-ui color="subtle" size="sm">2 hours ago</text-ui>
+              </col-ui>
+              <span aria-label="Unread" style="flex-shrink: 0; display: inline-block; width: 8px; height: 8px; margin-block-start: 0.4rem; border-radius: 50%; background: var(--a-primary-strong);"></span>
+            </row-ui>
+            <row-ui gap="2" align="start">
+              <avatar-ui size="sm" text="Sam Park"></avatar-ui>
+              <col-ui gap="0" style="flex: 1;">
+                <text-ui><strong>Sam Park</strong> mentioned you</text-ui>
+                <text-ui color="subtle" size="sm">"#design — auth review" · yesterday</text-ui>
+              </col-ui>
+            </row-ui>
+            <row-ui gap="2" align="start">
+              <icon-ui name="warning" size="sm"></icon-ui>
+              <col-ui gap="0" style="flex: 1;">
+                <text-ui>Storage 80% full</text-ui>
+                <text-ui color="subtle" size="sm">2 days ago · Workspace</text-ui>
+              </col-ui>
+            </row-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <row-ui gap="2" align="center" justify="space-between" style="width: 100%;">
+            <row-ui gap="1" align="center">
+              <icon-ui name="check" size="sm"></icon-ui>
+              <text-ui size="sm">Mark all as read</text-ui>
+            </row-ui>
+            <row-ui gap="1" align="center">
+              <text-ui size="sm">View all activity</text-ui>
+              <icon-ui name="arrow-right" size="sm"></icon-ui>
+            </row-ui>
+          </row-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="digest-preview">
+  <h2 variant="section">Email digest preview</h2>
+  <p data-note>The in-app rendering of the digest email — frequency header, "What's in this digest" summary, sectioned content. Used inside notification prefs so the user can see exactly what a daily/weekly digest will look like before opting in.</p>
+  <div data-artifact-container>
+    <div data-artifact-item data-artifact-label="email digest preview">
+      <card-ui data-chunk="digest-email-preview" style="max-width: 640px;">
+        <header>
+          <span slot="heading" variant="section">Weekly digest preview</span>
+          <text-ui slot="description" color="subtle">This is what your Monday morning email will contain</text-ui>
+          <button-ui slot="action" text="Send test" variant="ghost" size="sm" icon-leading="paper-plane-tilt"></button-ui>
+        </header>
+        <section>
+          <col-ui gap="4">
+            <col-ui gap="1">
+              <text-ui strong>Hi Kim,</text-ui>
+              <text-ui>Here's what happened in <strong>Adia AI</strong> this week.</text-ui>
+            </col-ui>
+            <col-ui gap="2">
+              <text-ui strong size="sm" color="subtle">Mentions · 4</text-ui>
+              <col-ui gap="2">
+                <row-ui gap="2" align="start">
+                  <avatar-ui size="xs" text="Avery Chen"></avatar-ui>
+                  <col-ui gap="0" style="flex: 1;">
+                    <text-ui>Avery on "OKLCH ramp comment"</text-ui>
+                    <text-ui color="subtle" size="sm">"Should we use chrome or data scale here?" · Tuesday</text-ui>
+                  </col-ui>
+                </row-ui>
+                <row-ui gap="2" align="start">
+                  <avatar-ui size="xs" text="Jordan Lee"></avatar-ui>
+                  <col-ui gap="0" style="flex: 1;">
+                    <text-ui>Jordan on "Auth flow rebuild"</text-ui>
+                    <text-ui color="subtle" size="sm">"Nominating for review" · Wednesday</text-ui>
+                  </col-ui>
+                </row-ui>
+              </col-ui>
+            </col-ui>
+            <col-ui gap="2">
+              <text-ui strong size="sm" color="subtle">Activity · 12</text-ui>
+              <col-ui gap="2">
+                <col-ui gap="0">
+                  <text-ui>3 PRs merged</text-ui>
+                  <text-ui color="subtle" size="sm">v0.0.26 hotfix, attribute-API migration sweep, INDEX update</text-ui>
+                </col-ui>
+                <col-ui gap="0">
+                  <text-ui>9 issues closed</text-ui>
+                  <text-ui color="subtle" size="sm">5 by you, 4 by team</text-ui>
+                </col-ui>
+              </col-ui>
+            </col-ui>
+            <col-ui gap="2">
+              <text-ui strong size="sm" color="subtle">Coming up</text-ui>
+              <row-ui gap="2" align="start">
+                <icon-ui name="calendar" size="sm"></icon-ui>
+                <col-ui gap="0" style="flex: 1;">
+                  <text-ui>Design review — Tuesday 2pm</text-ui>
+                  <text-ui color="subtle" size="sm">v0.0.27 cut planning</text-ui>
+                </col-ui>
+              </row-ui>
+            </col-ui>
+          </col-ui>
+        </section>
+        <footer divider>
+          <text-ui slot="description" color="subtle" size="sm">Delivered Mondays at 8am · <a href="#">Manage preferences</a></text-ui>
+        </footer>
+      </card-ui>
+    </div>
+  </div>
+</section>
+
+<section data-section data-property="composition">
+  <h2 variant="section">Composition rules</h2>
+  <ul>
+    <li><strong>Unread dot, not unread badge</strong> — a small primary-tinted dot on the trailing edge of the row reads as "new" without screaming. Per-row badges with counts are noise on a glance-surface.</li>
+    <li><strong>Cap the menu at ~5–7 rows</strong> — anything more is a feed, not a glance. Older items live in the full activity surface (15a) reachable via "View all".</li>
+    <li><strong>Empty state is mandatory</strong> — bare "No notifications" text reads as broken. The empty-state-ui treatment (icon + heading + description) is the difference between "system is working and there's nothing to show" vs. "did the page fail to load?".</li>
+    <li><strong>Mark-all-read goes in the footer</strong> — destructive-ish actions (clearing the unread state across many items) live below a divider, not inline with row clicks.</li>
+    <li><strong>Digest previews use the same components as the email</strong> — the in-app preview should be visually faithful to what the email renders. Don't render a different layout for the preview.</li>
+    <li><strong>"Send test" on the digest preview</strong> — let the user fire one to themselves before committing to a recurring schedule. The preview is a confidence check; the test is the proof.</li>
+    <li><strong>Frequency lives in the header</strong> — "Weekly digest", "Monday 8am". Without that anchor, users don't know if the preview is "what I'd see today" or "the standard shape".</li>
+  </ul>
+</section>
+
+<section data-section data-property="cross-references">
+  <h2 variant="section">See also</h2>
+  <ul>
+    <li><a href="/site/components/menu">menu-ui</a> · <a href="/site/components/empty-state">empty-state-ui</a> — bell-menu primitives.</li>
+    <li><a href="/site/components/list">list-ui</a> · <a href="/site/components/list-item">list-item-ui</a> — digest section anatomy.</li>
+    <li><a href="/site/patterns/comments-and-collaboration">comments-and-collaboration</a> — what mentions in the bell menu link to.</li>
+    <li><a href="/site/components/avatar">avatar-ui</a> — actor identity in both surfaces.</li>
+  </ul>
+</section>

package/patterns/notifications-bell-and-digest/notifications-bell-and-digest.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en" theme="auto">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Bell menu &amp; digest preview (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/avatar/avatar.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/empty-state/empty-state.css">
+  <link rel="stylesheet" href="../../components/icon/icon.css">
+  <link rel="stylesheet" href="../../components/row/row.css">
+  <link rel="stylesheet" href="../../components/tag/tag.css">
+  <link rel="stylesheet" href="../../components/text/text.css">
+
+  <!-- Component JS -->
+  <script type="module" src="../../components/avatar/avatar.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/empty-state/empty-state.js"></script>
+  <script type="module" src="../../components/icon/icon.js"></script>
+  <script type="module" src="../../components/row/row.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('./notifications-bell-and-digest.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 notifications-bell-and-digest.examples.html — ${err.message}</p>`;
+      console.error('[notifications-bell-and-digest.html]', err);
+    }
+  </script>
+
+</body>
+</html>