@blogmcp/community 0.1.0 → 0.3.0

package/src/mount.ts

@@ -7,13 +7,36 @@
  */
 import type { CommunityTransport } from '@blogmcp/sdk/community'
 import type { CommunityRoutes } from './core/attrs'
+import type { DiscussionRealtime, TopicRealtime } from './core/realtime'
 import {
+  BADGE_ELEMENT_TAG,
   DISCUSSION_ELEMENT_TAG,
+  FOLLOW_BUTTON_ELEMENT_TAG,
+  FORUM_CATEGORY_ELEMENT_TAG,
+  FORUM_ELEMENT_TAG,
+  FORUM_MODERATION_ELEMENT_TAG,
+  FORUM_SEARCH_ELEMENT_TAG,
+  MEMBER_SETTINGS_ELEMENT_TAG,
   MY_COMMUNITY_ELEMENT_TAG,
   NOTICE_FORM_ELEMENT_TAG,
+  NOTIFICATION_CENTRE_ELEMENT_TAG,
+  PROFILE_ELEMENT_TAG,
+  TOPIC_ELEMENT_TAG,
+  WELCOME_ELEMENT_TAG,
+  defineBadgeElement,
   defineDiscussionElement,
+  defineFollowButtonElement,
+  defineForumCategoryElement,
+  defineForumElement,
+  defineForumModerationElement,
+  defineForumSearchElement,
+  defineMemberSettingsElement,
   defineMyCommunityElement,
   defineNoticeFormElement,
+  defineNotificationCentreElement,
+  defineProfileElement,
+  defineTopicElement,
+  defineWelcomeElement,
 } from './element'
 
 interface CommonMountOptions {
@@ -42,6 +65,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 +88,79 @@ 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
+}
+
+/** M3 (m3-contracts.md §5.3): the forum's index — its categories, their latest topics, the search box. */
+export interface MountForumOptions extends CommonMountOptions {
+  /** The site's sign-in page (the members-only sentence's link for a visitor). */
+  signInHref?: string
+}
+
+/** M3: one category's page — its topics, its follow button, the new-topic composer. */
+export interface MountForumCategoryOptions extends CommonMountOptions {
+  /** The category's slug. */
+  slug: string
+  signInHref?: string
+}
+
+/** M3: one topic's page — the discussion's view over the topic, with its header. */
+export interface MountTopicOptions extends CommonMountOptions {
+  /** The topic's conversation id. */
+  conversationId: string
+  signInHref?: string
+  /** Head poll interval in ms (default 20 000; 0 = off). */
+  pollMs?: number
+  /** Live updates — `createRealtimeSession` of `@blogmcp/sdk/community/realtime` (the host imports it). Absent: the head poll. */
+  realtime?: TopicRealtime
+}
+
+/** M3: the forum's search. */
+export interface MountForumSearchOptions extends CommonMountOptions {
+  signInHref?: string
+}
+
+/** M3: a follow button — a topic or an article discussion (`conversation`) or a category, by its id. */
+export interface MountFollowButtonOptions extends CommonMountOptions {
+  targetKind: 'conversation' | 'category'
+  targetId: string
+  /** Whether the member follows it, when the host knows (absent: the member's follows are read). */
+  following?: boolean
+}
+
+/** M3: a category moderator's queue (renders nothing for a member who moderates nothing). */
+export interface MountForumModerationOptions extends CommonMountOptions {
+  /** Narrow the queue to one of the moderator's categories. */
+  categoryId?: string
+}
+
+type Settable = HTMLElement & { transport?: CommunityTransport; realtime?: DiscussionRealtime | TopicRealtime }
 
 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 +188,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 +226,151 @@ 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)
+}
+
+/** M3: mount `<blogmcp-forum>`; returns the function that removes it. */
+export function mountForum(o: MountForumOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_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)
+}
+
+/** M3: mount `<blogmcp-forum-category>`; returns the function that removes it. */
+export function mountForumCategory(o: MountForumCategoryOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumCategoryElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_CATEGORY_ELEMENT_TAG) as Settable
+  attrs(el, {
+    slug: o.slug,
+    '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)
+}
+
+/** M3: mount `<blogmcp-topic>`; returns the function that removes it. */
+export function mountTopic(o: MountTopicOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineTopicElement({ nonce: o.nonce })
+  const el = document.createElement(TOPIC_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'conversation-id': o.conversationId,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    'poll-ms': o.pollMs,
+    nonce: o.nonce,
+  })
+  if (o.realtime) el.realtime = o.realtime
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-forum-search>`; returns the function that removes it. */
+export function mountForumSearch(o: MountForumSearchOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumSearchElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_SEARCH_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)
+}
+
+/** M3: mount `<blogmcp-follow-button>`; returns the function that removes it. */
+export function mountFollowButton(o: MountFollowButtonOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineFollowButtonElement({ nonce: o.nonce })
+  const el = document.createElement(FOLLOW_BUTTON_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'target-kind': o.targetKind,
+    'target-id': o.targetId,
+    following: typeof o.following === 'boolean' ? String(o.following) : undefined,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+
+/** M3: mount `<blogmcp-forum-moderation>`; returns the function that removes it. */
+export function mountForumModeration(o: MountForumModerationOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineForumModerationElement({ nonce: o.nonce })
+  const el = document.createElement(FORUM_MODERATION_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'category-id': o.categoryId,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}

package/src/react.ts

@@ -1,5 +1,7 @@
 /**
- * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` for React (18 and 19, Next.js App Router included — this
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>`, (M2) `<KbNotificationCentre>`, `<KbBadge>`,
+ * `<KbMemberSettings>`, `<KbProfile>`, `<KbWelcome>` and (M3) `<KbForum>`, `<KbForumCategory>`, `<KbTopic>`,
+ * `<KbForumSearch>`, `<KbFollowButton>`, `<KbForumModeration>` 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 +9,37 @@
  *   <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,
+  MountFollowButtonOptions,
+  MountForumCategoryOptions,
+  MountForumModerationOptions,
+  MountForumOptions,
+  MountForumSearchOptions,
+  MountMemberSettingsOptions,
+  MountMyCommunityOptions,
+  MountNoticeFormOptions,
+  MountNotificationCentreOptions,
+  MountProfileOptions,
+  MountTopicOptions,
+  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'>
+export type KbForumProps = Omit<MountForumOptions, 'container'>
+export type KbForumCategoryProps = Omit<MountForumCategoryOptions, 'container'>
+export type KbTopicProps = Omit<MountTopicOptions, 'container'>
+export type KbForumSearchProps = Omit<MountForumSearchOptions, 'container'>
+export type KbFollowButtonProps = Omit<MountFollowButtonOptions, 'container'>
+export type KbForumModerationProps = Omit<MountForumModerationOptions, '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 +78,63 @@ 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 function KbForum(props: KbForumProps): ReactElement {
+  return useMounted('forum', props, async () => (await import('./mount')).mountForum)
+}
+
+export function KbForumCategory(props: KbForumCategoryProps): ReactElement {
+  return useMounted('forum-category', props, async () => (await import('./mount')).mountForumCategory)
+}
+
+export function KbTopic(props: KbTopicProps): ReactElement {
+  return useMounted('topic', props, async () => (await import('./mount')).mountTopic)
+}
+
+export function KbForumSearch(props: KbForumSearchProps): ReactElement {
+  return useMounted('forum-search', props, async () => (await import('./mount')).mountForumSearch)
+}
+
+export function KbFollowButton(props: KbFollowButtonProps): ReactElement {
+  return useMounted('follow-button', props, async () => (await import('./mount')).mountFollowButton)
+}
+
+export function KbForumModeration(props: KbForumModerationProps): ReactElement {
+  return useMounted('forum-moderation', props, async () => (await import('./mount')).mountForumModeration)
+}
+
+export type {
+  MountDiscussionOptions,
+  MountNoticeFormOptions,
+  MountMyCommunityOptions,
+  MountNotificationCentreOptions,
+  MountBadgeOptions,
+  MountMemberSettingsOptions,
+  MountProfileOptions,
+  MountWelcomeOptions,
+  MountForumOptions,
+  MountForumCategoryOptions,
+  MountTopicOptions,
+  MountForumSearchOptions,
+  MountFollowButtonOptions,
+  MountForumModerationOptions,
+}

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/FollowButtonView.vue

@@ -0,0 +1,85 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-follow-button target-kind target-id>` (m3-contracts.md §3.3, §4.3, §5.3; D-M3-4): follow a topic or an
+ * article discussion (`target-kind="conversation"`, its conversation id) or a category (`category`, its id) — its new
+ * messages, or its new topics, come as notifications. The state starts from the host's `following` attribute when it
+ * knows it, else from the member's follows. A follow kb-api refuses as `notFound` reads „not available"; an unfollow
+ * never fails on its target. Renders nothing for a viewer who cannot follow (a visitor) and for a target that is none.
+ */
+import { onBeforeUnmount, onMounted, ref, shallowRef, watch } from 'vue'
+import { followTargetOf, type CommunityTransport } from '@blogmcp/sdk/community'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { createFollow, type FollowController } from '../core/follow'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import FollowToggle from './FollowToggle.vue'
+import { provideText } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    /** `conversation` (a topic, an article discussion) or `category`. */
+    targetKind?: string
+    /** The conversation's or the category's id. */
+    targetId?: string
+    /** `true` / `false` when the host knows whether the member follows it (absent: the member's follows are read). */
+    following?: string | boolean
+    apiBase?: string
+    siteBase?: string
+    lang?: string
+    transport?: CommunityTransport
+  }>(),
+  // An explicit default: without one Vue casts an absent boolean prop to `false`, and „absent" means „not known".
+  { following: undefined },
+)
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+provideText(lang)
+
+const ctl = shallowRef<FollowController | null>(null)
+
+function known(): boolean | null {
+  const f = props.following
+  if (f === true || f === 'true' || f === '') return true
+  if (f === false || f === 'false') return false
+  return null
+}
+
+function start(): void {
+  ctl.value?.dispose()
+  ctl.value = null
+  const target = followTargetOf(props.targetKind, props.targetId)
+  if (target === null) {
+    warnOnce('follow-target', '[blogmcp-community] <blogmcp-follow-button> needs target-kind ("conversation" or "category") and a target-id')
+    return
+  }
+  const siteBase = siteBaseFor(props.siteBase)
+  const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+  if (!client) return
+  ctl.value = createFollow({ client, target, lang: lang.value })
+  void ctl.value.load(known())
+}
+
+onMounted(start)
+watch(() => [props.targetKind, props.targetId, props.apiBase, props.siteBase, props.transport] as const, start)
+watch(
+  () => props.following,
+  () => {
+    const k = known()
+    if (k !== null) ctl.value?.sync(k)
+  },
+)
+watch(
+  () => props.lang,
+  (v) => {
+    lang.value = pickLang(v, documentLang())
+  },
+)
+onBeforeUnmount(() => ctl.value?.dispose())
+</script>
+
+<template>
+  <div v-if="ctl && (ctl.state.phase === 'ready' || ctl.state.phase === 'unavailable')" class="bcm-follow-host" :lang="lang">
+    <FollowToggle :ctl="ctl" />
+  </div>
+</template>