@blogmcp/community 0.1.0 → 0.2.0

package/src/element.ts

@@ -1,19 +1,30 @@
 /// <reference path="./shims.d.ts" />
 /**
- * The three custom elements (Vue inside a shadow root each), m1-contracts.md §10.4:
+ * The custom elements (Vue inside a shadow root each), m1-contracts.md §10.4 and m2-contracts.md §3.10:
  *
- *   <blogmcp-discussion>    article-id, api-base, site-base, lang, sign-in-href, routes, poll-ms, nonce
- *   <blogmcp-notice-form>   api-base, site-base, lang, turnstile-site-key, target | article-id, routes, nonce
- *   <blogmcp-my-community>  api-base, site-base, lang, decision-id, routes, sign-in-href, nonce
+ *   <blogmcp-discussion>           article-id, api-base, site-base, lang, sign-in-href, routes, poll-ms, nonce
+ *                                  (+ the `realtime` property: a session factory the host passes, M2)
+ *   <blogmcp-notice-form>          api-base, site-base, lang, turnstile-site-key, target | article-id, routes, nonce
+ *   <blogmcp-my-community>         api-base, site-base, lang, decision-id, routes, sign-in-href, nonce
+ *   <blogmcp-notification-centre>  api-base, site-base, lang, routes, sign-in-href, nonce                       (M2)
+ *   <blogmcp-badge>                api-base, site-base, lang, routes, poll-ms, nonce                            (M2)
+ *   <blogmcp-member-settings>      api-base, site-base, lang, sw-path, routes, sign-in-href, nonce              (M2)
+ *   <blogmcp-profile>              handle, api-base, site-base, lang, routes, sign-in-href, nonce               (M2)
+ *   <blogmcp-welcome>              api-base, site-base, lang, routes, sign-in-href, nonce                       (M2)
  *
  * Each carries ONE inline stylesheet in its shadow root, with the CSP nonce honoured: the one given when the
  * elements are defined (the script build passes `document.currentScript.nonce`), else the element's own
  * `nonce` — read from the property, because a page with a CSP hides the attribute once it is connected.
  */
 import { defineCustomElement, type Component } from 'vue'
+import BadgeView from './ui/BadgeView.vue'
 import DiscussionView from './ui/DiscussionView.vue'
+import MemberSettingsView from './ui/MemberSettingsView.vue'
 import MyCommunityView from './ui/MyCommunityView.vue'
 import NoticeFormView from './ui/NoticeFormView.vue'
+import NotificationCentreView from './ui/NotificationCentreView.vue'
+import ProfileView from './ui/ProfileView.vue'
+import WelcomeView from './ui/WelcomeView.vue'
 import css from './ui/styles.css?inline'
 
 /**
@@ -36,6 +47,12 @@ function ensureVueFeatureFlags(): void {
 export const DISCUSSION_ELEMENT_TAG = 'blogmcp-discussion'
 export const NOTICE_FORM_ELEMENT_TAG = 'blogmcp-notice-form'
 export const MY_COMMUNITY_ELEMENT_TAG = 'blogmcp-my-community'
+/** M2 (m2-contracts.md §3.10). */
+export const NOTIFICATION_CENTRE_ELEMENT_TAG = 'blogmcp-notification-centre'
+export const BADGE_ELEMENT_TAG = 'blogmcp-badge'
+export const MEMBER_SETTINGS_ELEMENT_TAG = 'blogmcp-member-settings'
+export const PROFILE_ELEMENT_TAG = 'blogmcp-profile'
+export const WELCOME_ELEMENT_TAG = 'blogmcp-welcome'
 
 export interface DefineCommunityElementOptions {
   /** Another tag name for the element. */
@@ -47,7 +64,16 @@ export interface DefineCommunityElementOptions {
 export interface DefineCommunityElementsOptions {
   /** CSP nonce for the elements' `<style>`. */
   nonce?: string
-  tags?: { discussion?: string; noticeForm?: string; myCommunity?: string }
+  tags?: {
+    discussion?: string
+    noticeForm?: string
+    myCommunity?: string
+    notificationCentre?: string
+    badge?: string
+    memberSettings?: string
+    profile?: string
+    welcome?: string
+  }
 }
 
 /** The element's own nonce: the property (a CSP hides the attribute once connected), else the attribute. */
@@ -101,9 +127,39 @@ export function defineMyCommunityElement(opts: DefineCommunityElementOptions = {
   define(opts.tag ?? MY_COMMUNITY_ELEMENT_TAG, MyCommunityView, opts.nonce)
 }
 
-/** Register all three (once). Browser only. */
+/** Register `<blogmcp-notification-centre>` (once). Browser only. */
+export function defineNotificationCentreElement(opts: DefineCommunityElementOptions = {}): void {
+  define(opts.tag ?? NOTIFICATION_CENTRE_ELEMENT_TAG, NotificationCentreView, opts.nonce)
+}
+
+/** Register `<blogmcp-badge>` (once). Browser only. */
+export function defineBadgeElement(opts: DefineCommunityElementOptions = {}): void {
+  define(opts.tag ?? BADGE_ELEMENT_TAG, BadgeView, opts.nonce)
+}
+
+/** Register `<blogmcp-member-settings>` (once). Browser only. */
+export function defineMemberSettingsElement(opts: DefineCommunityElementOptions = {}): void {
+  define(opts.tag ?? MEMBER_SETTINGS_ELEMENT_TAG, MemberSettingsView, opts.nonce)
+}
+
+/** Register `<blogmcp-profile>` (once). Browser only. */
+export function defineProfileElement(opts: DefineCommunityElementOptions = {}): void {
+  define(opts.tag ?? PROFILE_ELEMENT_TAG, ProfileView, opts.nonce)
+}
+
+/** Register `<blogmcp-welcome>` (once). Browser only. */
+export function defineWelcomeElement(opts: DefineCommunityElementOptions = {}): void {
+  define(opts.tag ?? WELCOME_ELEMENT_TAG, WelcomeView, opts.nonce)
+}
+
+/** Register all eight (once). Browser only. */
 export function defineCommunityElements(opts: DefineCommunityElementsOptions = {}): void {
   defineDiscussionElement({ tag: opts.tags?.discussion, nonce: opts.nonce })
   defineNoticeFormElement({ tag: opts.tags?.noticeForm, nonce: opts.nonce })
   defineMyCommunityElement({ tag: opts.tags?.myCommunity, nonce: opts.nonce })
+  defineNotificationCentreElement({ tag: opts.tags?.notificationCentre, nonce: opts.nonce })
+  defineBadgeElement({ tag: opts.tags?.badge, nonce: opts.nonce })
+  defineMemberSettingsElement({ tag: opts.tags?.memberSettings, nonce: opts.nonce })
+  defineProfileElement({ tag: opts.tags?.profile, nonce: opts.nonce })
+  defineWelcomeElement({ tag: opts.tags?.welcome, nonce: opts.nonce })
 }

package/src/global.ts

@@ -1,12 +1,26 @@
 /**
- * The `<script>` build: registers `<blogmcp-discussion>`, `<blogmcp-notice-form>` and `<blogmcp-my-community>`
- * with the script tag's own CSP nonce, and exposes `window.BlogmcpCommunity`.
+ * The `<script>` build: registers every element — `<blogmcp-discussion>`, `<blogmcp-notice-form>`,
+ * `<blogmcp-my-community>` and (M2) `<blogmcp-notification-centre>`, `<blogmcp-badge>`, `<blogmcp-member-settings>`,
+ * `<blogmcp-profile>`, `<blogmcp-welcome>` — with the script tag's own CSP nonce, and exposes
+ * `window.BlogmcpCommunity`. Live updates are not in it: a site that wants them bundles `@blogmcp/sdk/community/realtime`
+ * and sets the discussion's `realtime` property.
  */
 import { defineCommunityElements } from './element'
-import { mountDiscussion, mountMyCommunity, mountNoticeForm } from './mount'
+import { mountBadge, mountDiscussion, mountMemberSettings, mountMyCommunity, mountNoticeForm, mountNotificationCentre, mountProfile, mountWelcome } from './mount'
 import { VERSION } from './version'
 
 const script = typeof document !== 'undefined' ? (document.currentScript as HTMLScriptElement | null) : null
 defineCommunityElements({ nonce: script?.nonce || undefined })
 
-export { defineCommunityElements, mountDiscussion, mountMyCommunity, mountNoticeForm, VERSION }
+export {
+  defineCommunityElements,
+  mountDiscussion,
+  mountMyCommunity,
+  mountNoticeForm,
+  mountNotificationCentre,
+  mountBadge,
+  mountMemberSettings,
+  mountProfile,
+  mountWelcome,
+  VERSION,
+}

package/src/index.ts

@@ -7,6 +7,9 @@
  *   - `<blogmcp-discussion>`   the discussion under an article;
  *   - `<blogmcp-notice-form>`  the DSA notice form, for anyone;
  *   - `<blogmcp-my-community>` the reader's „Moje komunita", a statement page, a notifier's status page;
+ *   - M2: `<blogmcp-notification-centre>` the notifications, `<blogmcp-badge>` the header's unread count,
+ *     `<blogmcp-member-settings>` the switches, push and the digest's unsubscribe, `<blogmcp-profile>` a member's
+ *     public profile, `<blogmcp-welcome>` the welcome page; the discussion's `realtime` property (live updates);
  *   - `defineCommunityElements()` and one `define…Element()` each — the custom elements;
  *   - `mountDiscussion(…)`, `mountNoticeForm(…)`, `mountMyCommunity(…)` — mount one from code;
  *   - `@blogmcp/community/vue`, `@blogmcp/community/react` — `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>`;
@@ -17,13 +20,45 @@ export {
   defineDiscussionElement,
   defineNoticeFormElement,
   defineMyCommunityElement,
+  defineNotificationCentreElement,
+  defineBadgeElement,
+  defineMemberSettingsElement,
+  defineProfileElement,
+  defineWelcomeElement,
   DISCUSSION_ELEMENT_TAG,
   NOTICE_FORM_ELEMENT_TAG,
   MY_COMMUNITY_ELEMENT_TAG,
+  NOTIFICATION_CENTRE_ELEMENT_TAG,
+  BADGE_ELEMENT_TAG,
+  MEMBER_SETTINGS_ELEMENT_TAG,
+  PROFILE_ELEMENT_TAG,
+  WELCOME_ELEMENT_TAG,
   type DefineCommunityElementOptions,
   type DefineCommunityElementsOptions,
 } from './element'
-export { mountDiscussion, mountNoticeForm, mountMyCommunity, type MountDiscussionOptions, type MountNoticeFormOptions, type MountMyCommunityOptions } from './mount'
+export {
+  mountDiscussion,
+  mountNoticeForm,
+  mountMyCommunity,
+  mountNotificationCentre,
+  mountBadge,
+  mountMemberSettings,
+  mountProfile,
+  mountWelcome,
+  type MountDiscussionOptions,
+  type MountNoticeFormOptions,
+  type MountMyCommunityOptions,
+  type MountNotificationCentreOptions,
+  type MountBadgeOptions,
+  type MountMemberSettingsOptions,
+  type MountProfileOptions,
+  type MountWelcomeOptions,
+} from './mount'
+export { createNotificationCentre, type NotificationCentreController, type CentreUi } from './core/centre'
+export { createBadge, badgeText, BADGE_INTERVAL_MS, type BadgeController, type BadgeOptions, type BadgeUi } from './core/badge'
+export { createMemberSettings, SETTING_KEYS, type MemberSettingsController, type MemberSettingsOptions, type SettingsUi, type SettingKey } from './core/settings'
+export { createProfile, createWelcome, type ProfileController, type WelcomeController } from './core/profile'
+export type { DiscussionRealtime, DiscussionRealtimeOptions, DiscussionRealtimeSession, DiscussionRealtimeMode } from './core/realtime'
 export { createDiscussionController, type DiscussionController, type DiscussionControllerOptions, type DiscussionUi, type ComposerMode, type Draft } from './core/discussion'
 export { createNoticeForm, type NoticeFormController, type NoticeFormOptions, type NoticeFormUi } from './core/notice'
 export { createPanel, type PanelController, type PanelOptions, type PanelUi } from './core/panel'

package/src/mount.ts

@@ -7,13 +7,24 @@
  */
 import type { CommunityTransport } from '@blogmcp/sdk/community'
 import type { CommunityRoutes } from './core/attrs'
+import type { DiscussionRealtime } from './core/realtime'
 import {
+  BADGE_ELEMENT_TAG,
   DISCUSSION_ELEMENT_TAG,
+  MEMBER_SETTINGS_ELEMENT_TAG,
   MY_COMMUNITY_ELEMENT_TAG,
   NOTICE_FORM_ELEMENT_TAG,
+  NOTIFICATION_CENTRE_ELEMENT_TAG,
+  PROFILE_ELEMENT_TAG,
+  WELCOME_ELEMENT_TAG,
+  defineBadgeElement,
   defineDiscussionElement,
+  defineMemberSettingsElement,
   defineMyCommunityElement,
   defineNoticeFormElement,
+  defineNotificationCentreElement,
+  defineProfileElement,
+  defineWelcomeElement,
 } from './element'
 
 interface CommonMountOptions {
@@ -42,6 +53,11 @@ export interface MountDiscussionOptions extends CommonMountOptions {
   signInHref?: string
   /** Head poll interval in ms (default 20 000; 0 = off). */
   pollMs?: number
+  /**
+   * M2: live updates — `createRealtimeSession` of `@blogmcp/sdk/community/realtime` (the host imports it; the element
+   * never does). Absent: the head poll.
+   */
+  realtime?: DiscussionRealtime
 }
 
 export interface MountNoticeFormOptions extends CommonMountOptions {
@@ -60,7 +76,36 @@ export interface MountMyCommunityOptions extends CommonMountOptions {
   signInHref?: string
 }
 
-type Settable = HTMLElement & { transport?: CommunityTransport }
+export interface MountNotificationCentreOptions extends CommonMountOptions {
+  /** The site's sign-in page. */
+  signInHref?: string
+}
+
+export interface MountBadgeOptions extends CommonMountOptions {
+  /** The unread count's poll in ms (default 60 000; 0 = once, and when the page is shown again). */
+  pollMs?: number
+}
+
+export interface MountMemberSettingsOptions extends CommonMountOptions {
+  /** The host's service worker route (default `<site-base>/sw.js`, served from `@blogmcp/sdk/community/sw`). */
+  swPath?: string
+  /** The site's sign-in page. */
+  signInHref?: string
+}
+
+export interface MountProfileOptions extends CommonMountOptions {
+  /** The member's handle. */
+  handle: string
+  /** The site's sign-in page. */
+  signInHref?: string
+}
+
+export interface MountWelcomeOptions extends CommonMountOptions {
+  /** The site's sign-in page (a visitor's link in the profile's place). */
+  signInHref?: string
+}
+
+type Settable = HTMLElement & { transport?: CommunityTransport; realtime?: DiscussionRealtime }
 
 function attrs(el: HTMLElement, values: Record<string, string | number | undefined | null>): void {
   for (const [name, value] of Object.entries(values)) if (value !== undefined && value !== null && value !== '') el.setAttribute(name, String(value))
@@ -88,6 +133,7 @@ export function mountDiscussion(o: MountDiscussionOptions): () => void {
     'poll-ms': o.pollMs,
     nonce: o.nonce,
   })
+  if (o.realtime) el.realtime = o.realtime
   return place(el, o)
 }
 
@@ -125,3 +171,64 @@ export function mountMyCommunity(o: MountMyCommunityOptions = {}): () => void {
   })
   return place(el, o)
 }
+
+/** Mount `<blogmcp-notification-centre>`; returns the function that removes it. */
+export function mountNotificationCentre(o: MountNotificationCentreOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineNotificationCentreElement({ nonce: o.nonce })
+  const el = document.createElement(NOTIFICATION_CENTRE_ELEMENT_TAG) as Settable
+  attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'sign-in-href': o.signInHref, nonce: o.nonce })
+  return place(el, o)
+}
+
+/** Mount `<blogmcp-badge>`; returns the function that removes it. */
+export function mountBadge(o: MountBadgeOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineBadgeElement({ nonce: o.nonce })
+  const el = document.createElement(BADGE_ELEMENT_TAG) as Settable
+  attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'poll-ms': o.pollMs, nonce: o.nonce })
+  return place(el, o)
+}
+
+/** Mount `<blogmcp-member-settings>`; returns the function that removes it. */
+export function mountMemberSettings(o: MountMemberSettingsOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineMemberSettingsElement({ nonce: o.nonce })
+  const el = document.createElement(MEMBER_SETTINGS_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    'sw-path': o.swPath,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+
+/** Mount `<blogmcp-profile>`; returns the function that removes it. */
+export function mountProfile(o: MountProfileOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineProfileElement({ nonce: o.nonce })
+  const el = document.createElement(PROFILE_ELEMENT_TAG) as Settable
+  attrs(el, {
+    handle: o.handle,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+
+/** Mount `<blogmcp-welcome>`; returns the function that removes it. */
+export function mountWelcome(o: MountWelcomeOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineWelcomeElement({ nonce: o.nonce })
+  const el = document.createElement(WELCOME_ELEMENT_TAG) as Settable
+  attrs(el, { 'api-base': o.apiBase, 'site-base': o.siteBase, lang: o.lang, routes: o.routes ? JSON.stringify(o.routes) : undefined, 'sign-in-href': o.signInHref, nonce: o.nonce })
+  return place(el, o)
+}

package/src/react.ts

@@ -1,5 +1,6 @@
 /**
- * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` for React (18 and 19, Next.js App Router included — this
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` and (M2) `<KbNotificationCentre>`, `<KbBadge>`,
+ * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` for React (18 and 19, Next.js App Router included — this
  * module is a client component): each mounts its element after hydration and removes it on unmount. Each
  * renders one empty `<div>` as the mount point — nothing else, on the server or the client — so the element
  * sits where the component does and the page's markup is otherwise the site's alone.
@@ -7,11 +8,25 @@
  *   <KbDiscussion articleId={article.id} apiBase="/api/community" signInHref={`/sign-in#${pathname}`} />
  */
 import { createElement, useEffect, useRef, type ReactElement } from 'react'
-import type { MountDiscussionOptions, MountMyCommunityOptions, MountNoticeFormOptions } from './mount'
+import type {
+  MountBadgeOptions,
+  MountDiscussionOptions,
+  MountMemberSettingsOptions,
+  MountMyCommunityOptions,
+  MountNoticeFormOptions,
+  MountNotificationCentreOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+} from './mount'
 
 export type KbDiscussionProps = Omit<MountDiscussionOptions, 'container'>
 export type KbNoticeFormProps = Omit<MountNoticeFormOptions, 'container'>
 export type KbMyCommunityProps = Omit<MountMyCommunityOptions, 'container'>
+export type KbNotificationCentreProps = Omit<MountNotificationCentreOptions, 'container'>
+export type KbBadgeProps = Omit<MountBadgeOptions, 'container'>
+export type KbMemberSettingsProps = Omit<MountMemberSettingsOptions, 'container'>
+export type KbProfileProps = Omit<MountProfileOptions, 'container'>
+export type KbWelcomeProps = Omit<MountWelcomeOptions, 'container'>
 
 /** The options that, changed, mount the element anew (functions by identity are left out). */
 const keyOf = (props: object): string => JSON.stringify(props, (_k, v: unknown) => (typeof v === 'function' ? '[fn]' : v))
@@ -50,4 +65,33 @@ export function KbMyCommunity(props: KbMyCommunityProps): ReactElement {
   return useMounted('my-community', props, async () => (await import('./mount')).mountMyCommunity)
 }
 
-export type { MountDiscussionOptions, MountNoticeFormOptions, MountMyCommunityOptions }
+export function KbNotificationCentre(props: KbNotificationCentreProps): ReactElement {
+  return useMounted('notification-centre', props, async () => (await import('./mount')).mountNotificationCentre)
+}
+
+export function KbBadge(props: KbBadgeProps): ReactElement {
+  return useMounted('badge', props, async () => (await import('./mount')).mountBadge)
+}
+
+export function KbMemberSettings(props: KbMemberSettingsProps): ReactElement {
+  return useMounted('member-settings', props, async () => (await import('./mount')).mountMemberSettings)
+}
+
+export function KbProfile(props: KbProfileProps): ReactElement {
+  return useMounted('profile', props, async () => (await import('./mount')).mountProfile)
+}
+
+export function KbWelcome(props: KbWelcomeProps): ReactElement {
+  return useMounted('welcome', props, async () => (await import('./mount')).mountWelcome)
+}
+
+export type {
+  MountDiscussionOptions,
+  MountNoticeFormOptions,
+  MountMyCommunityOptions,
+  MountNotificationCentreOptions,
+  MountBadgeOptions,
+  MountMemberSettingsOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+}

package/src/ui/BadgeView.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-badge>`: the unread count for a site's header (m2-contracts.md §3.3, §3.10) — a link to the notification
+ * centre showing the count (`99+` above 99), its accessible name the catalogue's „{count} nových upozornění". Nothing
+ * at all for a visitor, a reader who never joined, a dark module, or while there is nothing unread.
+ */
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import type { CommunityTransport } from '@blogmcp/sdk/community'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { badgeText, createBadge, type BadgeController } from '../core/badge'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { provideText } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  siteBase?: string
+  lang?: string
+  /** JSON (or an object): `notificationsPath` (where the badge links). */
+  routes?: string | Record<string, unknown>
+  /** The poll in ms (default 60 000, never less; 0 = read once and when the page is shown again). */
+  pollMs?: number
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: BadgeController | null = client ? createBadge({ client, ...(typeof props.pollMs === 'number' ? { intervalMs: props.pollMs } : {}) }) : null
+const state = ctl?.state ?? null
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+
+onMounted(() => void ctl?.start())
+onBeforeUnmount(() => ctl?.dispose())
+</script>
+
+<template>
+  <a
+    v-if="state && state.phase === 'shown' && state.count > 0"
+    class="bcm-badge-link"
+    :lang="lang"
+    :href="routes.notificationsPath"
+    :aria-label="t('badge.unread', { count: state.count })"
+    :title="t('badge.unread', { count: state.count })"
+    ><span aria-hidden="true">{{ badgeText(state.count) }}</span></a
+  >
+</template>

package/src/ui/DiscussionView.vue

@@ -13,10 +13,11 @@ const refusedAges = new WeakMap<object, number>()
  * and one sentence while the discussion takes no writes yet.
  */
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, shallowRef, useHost, watch } from 'vue'
-import { signInLink, statementPath, type CommunityTransport, type DiscussionRestriction } from '@blogmcp/sdk/community'
+import { communityMessageAnchor, communityMessageSeqFromHash, signInLink, statementPath, type CommunityTransport, type DiscussionRestriction } from '@blogmcp/sdk/community'
 import { parseRoutes, routesWithDefaults } from '../core/attrs'
 import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
 import { createDiscussionController, type DiscussionController } from '../core/discussion'
+import type { DiscussionRealtime } from '../core/realtime'
 import { formatDate } from '../core/format'
 import { documentLang, pickLang, type Lang } from '../core/i18n'
 import { failureText } from '../core/outcomes'
@@ -46,6 +47,11 @@ const props = defineProps<{
   pollMs?: number
   /** A replacement transport (a property, never an attribute): tests, a signing transport later. */
   transport?: CommunityTransport
+  /**
+   * M2: live updates — the host's session factory (`createRealtimeSession` of `@blogmcp/sdk/community/realtime`), a
+   * property, never an attribute. Absent: the head poll.
+   */
+  realtime?: DiscussionRealtime
 }>()
 
 const host = useHost()
@@ -78,6 +84,7 @@ function create(): DiscussionController | null {
     articleId,
     lang: lang.value,
     pollMs: props.pollMs,
+    realtime: typeof props.realtime === 'function' ? props.realtime : null,
     refusedAge: (host && refusedAges.get(host)) ?? null,
     onAgeRefused: (minAge) => {
       if (host) refusedAges.set(host, minAge)
@@ -109,8 +116,30 @@ provideDiscussion({
 })
 
 let observer: IntersectionObserver | null = null
+const section = ref<HTMLElement | null>(null)
+/** The page's `#bcm-msg-<seq>` was looked for once this discussion's first page was in. */
+let anchored = false
+
+/**
+ * M2 T10: a link to one message (the notification centre's: `<article>#bcm-msg-<seq>`). The rows live in this shadow
+ * root, so the browser cannot scroll to the fragment: once the first page is in, the row is scrolled into view — a
+ * reply hidden behind „more replies" is shown first. A message beyond the first page is not looked for.
+ */
+async function scrollToAnchor(): Promise<void> {
+  if (anchored || typeof location === 'undefined') return
+  anchored = true
+  const seq = communityMessageSeqFromHash(location.hash)
+  const id = seq === null ? null : communityMessageAnchor(seq)
+  if (seq === null || id === null) return
+  const parent = state.value?.thread.messages.find((m) => m.replies.some((r) => r.seq === seq))
+  if (parent) allReplies.add(parent.seq)
+  await nextTick()
+  const row = section.value?.querySelector<HTMLElement>(`#${id}`)
+  if (typeof row?.scrollIntoView === 'function') row.scrollIntoView({ block: 'start' })
+}
 
 function start(): void {
+  anchored = false
   current.value?.dispose()
   opened.clear()
   originals.clear()
@@ -132,7 +161,7 @@ onMounted(() => {
   }
 })
 // Another article, base or language is another discussion (the language picks the translations and the posts' languageCode).
-watch(() => [props.articleId, props.apiBase, siteBase.value, props.transport, props.pollMs, lang.value] as const, () => start())
+watch(() => [props.articleId, props.apiBase, siteBase.value, props.transport, props.realtime, props.pollMs, lang.value] as const, () => start())
 onBeforeUnmount(() => {
   observer?.disconnect()
   current.value?.dispose()
@@ -141,6 +170,12 @@ onBeforeUnmount(() => {
 
 const ctl = computed(() => current.value)
 const state = computed(() => current.value?.state ?? null)
+watch(
+  () => state.value?.phase,
+  (phase) => {
+    if (phase === 'ready') void scrollToAnchor()
+  },
+)
 const mode = computed(() => current.value?.mode() ?? 'pending')
 const composer = ref<InstanceType<typeof MessageComposer> | null>(null)
 // Joined: the reader goes on where the onboarding was, in the composer. A refusal closed: to the discussion's heading
@@ -194,7 +229,7 @@ async function confirmDelete(): Promise<void> {
 </script>
 
 <template>
-  <section v-if="ctl && state && state.phase !== 'hidden'" :key="generation" class="bcm bcm-discussion" :lang="lang" :aria-labelledby="headingId">
+  <section v-if="ctl && state && state.phase !== 'hidden'" ref="section" :key="generation" class="bcm bcm-discussion" :lang="lang" :aria-labelledby="headingId">
     <header class="bcm-head">
       <h2 :id="headingId" ref="heading" tabindex="-1">{{ t('discussion.title') }}</h2>
       <span v-if="state.phase === 'ready'" class="bcm-count">{{ t('discussion.count', { count: state.thread.count }) }}</span>
@@ -221,6 +256,8 @@ async function confirmDelete(): Promise<void> {
         <button type="button" class="bcm-btn" :disabled="state.refreshing" @click="ctl.refresh()">{{ t('discussion.refresh') }}</button>
       </div>
 
+      <p v-if="state.realtimeOff" class="bcm-hint" role="status">{{ t('realtime.off') }}</p>
+
       <p v-if="state.thread.messages.length === 0" class="bcm-muted">{{ t('discussion.empty') }}</p>
       <ol v-else class="bcm-thread">
         <MessageItem v-for="m in state.thread.messages" :key="m.id" :message="m" />
@@ -231,6 +268,7 @@ async function confirmDelete(): Promise<void> {
       </div>
 
       <div class="bcm-section">
+        <p v-if="mode === 'write' && state.art9RefusedNote" class="bcm-hint">{{ t('onboarding.art9RefusedDone') }}</p>
         <MessageComposer
           v-if="mode === 'write'"
           ref="composer"
@@ -238,6 +276,7 @@ async function confirmDelete(): Promise<void> {
           :draft="state.composer"
           :wait="ctl.waitLeft(state.composer)"
           :rules-href="routes.rulesPath"
+          :mentions-max="ctl.mentionCap()"
           @submit="ctl.submit()"
           @confirm="(code: string, checked: boolean) => ctl && ctl.setConfirmed(state!.composer, code, checked)"
           @confirmed="ctl.sendConfirmed(state.composer)"
@@ -261,6 +300,7 @@ async function confirmDelete(): Promise<void> {
           </p>
         </div>
         <p v-else-if="mode === 'notMoved'" class="bcm-note">{{ t('error.notMoved') }}</p>
+        <p v-else-if="mode === 'braked'" class="bcm-note" role="status">{{ t('state.braked') }}</p>
         <p v-else-if="mode === 'restricted'" class="bcm-note">
           {{ t('error.restricted') }}
           <a :href="routes.myCommunityPath">{{ t('panel.title') }}</a>

package/src/ui/LinkedText.vue

@@ -1,18 +1,24 @@
 <script setup lang="ts">
 /**
- * A member's text, as text: runs of text nodes, and the web addresses in it as links that went through
- * sanitizeUrl (core/text.ts) — `rel="nofollow ugc noopener noreferrer"`, a new tab. Never HTML.
+ * A member's text, as text: runs of text nodes, the web addresses in it as links that went through sanitizeUrl
+ * (core/text.ts) — `rel="nofollow ugc noopener noreferrer"`, a new tab — and, with `profilePath` (M2), each `@handle`
+ * as a link to that member's profile page on this site. Never HTML.
  */
 import { computed } from 'vue'
-import { linkify, UGC_LINK_REL } from '../core/text'
+import { profilePath as profilePathOf } from '@blogmcp/sdk/community'
+import { linkifyWithMentions, UGC_LINK_REL } from '../core/text'
 
-const props = defineProps<{ text: string | null }>()
-const segments = computed(() => linkify(props.text ?? ''))
+const props = defineProps<{ text: string | null; profilePath?: string | null }>()
+const segments = computed(() => {
+  const template = props.profilePath
+  return linkifyWithMentions(props.text ?? '', template ? (handle: string) => profilePathOf(template, handle) : null)
+})
 </script>
 
 <template>
   <template v-for="(s, i) in segments" :key="i">
     <a v-if="s.kind === 'link'" :href="s.href" :rel="UGC_LINK_REL" target="_blank">{{ s.text }}</a>
+    <a v-else-if="s.kind === 'mention'" class="bcm-mention" :href="s.href">{{ s.text }}</a>
     <template v-else>{{ s.text }}</template>
   </template>
 </template>