@blogmcp/community 0.0.0-stage → 0.2.0

package/src/ui/MyCommunityView.vue

@@ -0,0 +1,378 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-my-community>`: the reader's „Moje komunita" (m1-contracts.md §10.4; community.md §5). Three
+ * pages in one element:
+ *   - with `decision-id`: that statement of reasons and its appeal (the host's statement page);
+ *   - with `#t=<receipt>` in the address: that notice's status and appeal — no sign-in needed; the receipt
+ *     is read from this page's own address once and cleared from the address bar (core/receipt.ts);
+ *   - otherwise the panel: profile, notifications, statements, reports, blocks, consents, export, deletion.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, useHost, watch } from 'vue'
+import {
+  COMMUNITY_HANDLE_CHANGE_DAYS,
+  signInLink,
+  statementPath,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type NotificationItem,
+} from '@blogmcp/sdk/community'
+import { AVATAR_PRESETS } from '../core/avatars'
+import { HANDLE_MAX, HANDLE_MIN } from '../core/names'
+import { parseRoutes, routesWithDefaults } from '../core/attrs'
+import { communityClientFor, siteBaseFor } from '../core/client'
+import { exportFileName, saveJson } from '../core/download'
+import { formatDate } from '../core/format'
+import { documentLang, knownKey, pickLang, type Lang } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { createPanel, type PanelController } from '../core/panel'
+import { receiptForElement } from '../core/receipt'
+import AuthorAvatar from './AuthorAvatar.vue'
+import ConfirmDialog from './ConfirmDialog.vue'
+import NoticeStatusView from './NoticeStatusView.vue'
+import OnboardingSteps from './OnboardingSteps.vue'
+import StatementView from './StatementView.vue'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  /** The path the site is served under (`/blog`): its proxy and its pages, as the defaults. */
+  siteBase?: string
+  lang?: string
+  /** Opens this statement (the host's statement page). */
+  decisionId?: string
+  /** JSON (or an object): `statementPath`, `myCommunityPath`, `rulesPath`, `reportPath`, `noticesPath`. */
+  routes?: string | Record<string, unknown>
+  /** The site's sign-in page, for a reader without a session. */
+  signInHref?: string
+  transport?: CommunityTransport
+}>()
+
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t, text } = provideText(lang)
+const id = uid('bcm-panel')
+const heading = ref<HTMLElement | null>(null)
+
+const siteBase = siteBaseFor(props.siteBase)
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const ctl: PanelController | null = client ? createPanel({ client, lang: lang.value }) : null
+const state = ctl?.state ?? null
+
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), state?.me?.links, siteBase ?? ''))
+const decisionMode = computed(() => !!props.decisionId)
+const noticeMode = ref(false)
+const confirming = ref<'consent' | 'erase' | null>(null)
+
+const host = useHost()
+
+onMounted(() => {
+  if (!ctl) return
+  // Only a receipt this page's own address carried (or this element took before it was moved), never the tab's.
+  const receipt = receiptForElement(host)
+  if (receipt !== undefined) {
+    noticeMode.value = true
+    void ctl.loadNotice(receipt)
+  }
+  if (props.decisionId) void ctl.loadStatement(props.decisionId)
+  else void ctl.loadMember()
+})
+// A host that reuses the element for another statement (client-side navigation) reads that one.
+watch(
+  () => props.decisionId,
+  (id, before) => {
+    if (!ctl || id === before) return
+    if (id) void ctl.loadStatement(id)
+    else if (state?.phase === 'idle') void ctl.loadMember()
+  },
+)
+onBeforeUnmount(() => ctl?.dispose())
+
+const memberFailure = computed(() => {
+  const f = state?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const statementFailure = computed(() => {
+  const f = state?.statement.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const noticeFailure = computed(() => {
+  const f = state?.notice.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+
+function signInHref(): string | null {
+  return signInLink(props.signInHref, typeof location === 'undefined' ? null : location.pathname)
+}
+const statementHref = (decisionId: string): string | null => statementPath(routes.value.statementPath, decisionId)
+const notificationKey = (n: NotificationItem): CommunityMessageKey | null => knownKey(`notification.${n.code}`)
+const restrictionKey = (code: string): CommunityMessageKey | null => knownKey(`restriction.${code}`)
+const categoryKey = (code: string): CommunityMessageKey | null => knownKey(`category.${code}`)
+const caseStatusKey = (code: string): CommunityMessageKey | null => knownKey(`caseStatus.${code}`)
+const appealStatusKey = (decisionId: string): CommunityMessageKey | null => {
+  const a = state?.appeals.find((x) => x.decisionId === decisionId)
+  return a ? knownKey(`appealStatus.${a.status}`) : null
+}
+
+const consent = computed(() => state?.me?.acceptances.art9Consent ?? null)
+const consentRefused = computed(() => state?.me?.acceptances.art9Refused === true)
+const member = computed(() => state?.me?.member ?? null)
+const profile = computed(() => state?.me?.profile ?? null)
+
+function exportNow(): void {
+  void ctl?.exportData((data) => saveJson(data, exportFileName(t('panel.exportFileName'))))
+}
+
+async function confirmAction(): Promise<void> {
+  if (!ctl) return
+  if (confirming.value === 'consent') await ctl.withdrawConsent()
+  else if (confirming.value === 'erase') await ctl.erase()
+  confirming.value = null
+}
+
+// One live region for the outcomes (cleared in between, so the same one is announced again).
+const liveText = ref('')
+watch(
+  () => state?.announceId,
+  () => {
+    liveText.value = ''
+    const next = text(state?.announcement)
+    void nextTick(() => {
+      liveText.value = next
+    })
+  },
+)
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-panel" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`" ref="heading" tabindex="-1">{{ decisionMode ? t('statement.title') : t('panel.title') }}</h2>
+
+    <!-- the notifier's part (#t=) -->
+    <template v-if="noticeMode">
+      <p v-if="state.notice.phase === 'missing'" class="bcm-note" role="alert">{{ t('notice.receiptMissing') }}</p>
+      <p v-else-if="state.notice.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <p v-else-if="state.notice.phase === 'failed'" class="bcm-error" role="alert">{{ noticeFailure }}</p>
+      <NoticeStatusView
+        v-else-if="state.notice.value"
+        :notice="state.notice.value"
+        :appeal="state.notice.appeal"
+        :withdrawing="!!state.busy.noticeWithdraw"
+        @appeal="ctl.fileNoticeAppeal()"
+        @withdraw="ctl.withdrawNoticeAppeal()"
+      />
+    </template>
+
+    <!-- the statement page (decision-id) -->
+    <template v-if="decisionMode">
+      <p v-if="state.statement.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <div v-else-if="state.statement.phase === 'signIn'" class="bcm-row">
+        <p>{{ t('panel.signIn') }}</p>
+        <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+      </div>
+      <p v-else-if="state.statement.phase === 'failed'" class="bcm-error" role="alert">{{ statementFailure }}</p>
+      <StatementView
+        v-else-if="state.statement.value"
+        :statement="state.statement.value"
+        :appeal="state.statement.appeal"
+        :withdrawing="!!state.busy.withdraw"
+        @appeal="ctl.fileAppeal()"
+        @withdraw="ctl.withdrawAppeal()"
+      />
+      <p><a :href="routes.myCommunityPath">{{ t('common.back') }}</a></p>
+    </template>
+
+    <!-- the panel -->
+    <template v-else>
+      <p v-if="state.phase === 'loading'" class="bcm-muted" role="status">{{ t('common.loading') }}</p>
+      <div v-else-if="state.phase === 'signIn' && !noticeMode" class="bcm-row">
+        <p>{{ t('panel.signIn') }}</p>
+        <a v-if="signInHref()" class="bcm-btn bcm-primary" :href="signInHref() ?? undefined">{{ t('common.signIn') }}</a>
+      </div>
+      <p v-else-if="state.phase === 'failed'" class="bcm-error" role="alert">{{ memberFailure }}</p>
+      <template v-else-if="state.phase === 'ready'">
+        <!-- profile -->
+        <section v-if="profile && member" class="bcm-section" :aria-labelledby="`${id}-profile`">
+          <h3 :id="`${id}-profile`">{{ t('panel.profile') }}</h3>
+          <div v-if="!state.profile" class="bcm-msg">
+            <AuthorAvatar :author="{ kind: 'member', memberId: member.memberId, displayName: profile.displayName, avatarPreset: profile.avatarPreset }" />
+            <div class="bcm-msg-main">
+              <span class="bcm-author">{{ profile.displayName }}</span>
+              <span class="bcm-handle">{{ profile.handle }}</span>
+              <div class="bcm-row">
+                <button type="button" class="bcm-btn bcm-small" @click="ctl.editProfile()">{{ t('panel.profileEdit') }}</button>
+              </div>
+            </div>
+          </div>
+          <form v-else class="bcm-form bcm-card" novalidate @submit.prevent="ctl.saveProfile()">
+            <div class="bcm-field">
+              <label :for="`${id}-name`">{{ t('onboarding.displayName') }}</label>
+              <input :id="`${id}-name`" v-model="state.profile.displayName" class="bcm-input" autocomplete="nickname" :aria-invalid="state.profile.fields.includes('displayName')" />
+              <p class="bcm-hint">{{ t('onboarding.displayNameHint') }}</p>
+            </div>
+            <div class="bcm-field">
+              <label :for="`${id}-handle`">{{ t('onboarding.handle') }}</label>
+              <input :id="`${id}-handle`" v-model="state.profile.handle" class="bcm-input" autocomplete="username" autocapitalize="none" spellcheck="false" :maxlength="HANDLE_MAX" :aria-invalid="state.profile.fields.includes('handle')" />
+              <p class="bcm-hint">{{ t('onboarding.handleHint', { min: HANDLE_MIN, max: HANDLE_MAX, days: COMMUNITY_HANDLE_CHANGE_DAYS }) }}</p>
+            </div>
+            <fieldset class="bcm-choices">
+              <legend>{{ t('onboarding.avatar') }}</legend>
+              <label class="bcm-choice">
+                <input v-model="state.profile.avatarPreset" type="radio" :name="`${id}-avatar`" :value="null" />
+                <span>{{ t('onboarding.avatarNone') }}</span>
+              </label>
+              <label v-for="preset in AVATAR_PRESETS" :key="preset.id" class="bcm-choice">
+                <input v-model="state.profile.avatarPreset" type="radio" :name="`${id}-avatar`" :value="preset.id" />
+                <span>{{ preset.emoji }}</span>
+              </label>
+            </fieldset>
+            <p v-if="state.profile.failure" class="bcm-error" role="alert">{{ text(failureText(state.profile.failure, lang)) }}</p>
+            <div class="bcm-row">
+              <span class="bcm-spacer" />
+              <button type="button" class="bcm-btn" :disabled="state.profile.sending" @click="ctl.cancelProfile()">{{ t('composer.cancel') }}</button>
+              <button type="submit" class="bcm-btn bcm-primary" :disabled="state.profile.sending">{{ state.profile.sending ? t('composer.sending') : t('composer.save') }}</button>
+            </div>
+          </form>
+        </section>
+
+        <!-- notifications -->
+        <section class="bcm-section" :aria-labelledby="`${id}-notifications`">
+          <div class="bcm-row">
+            <h3 :id="`${id}-notifications`">{{ t('panel.notifications') }}</h3>
+            <span v-if="ctl.unreadCount() > 0" class="bcm-badge">{{ t('panel.unread', { count: ctl.unreadCount() }) }}</span>
+            <span class="bcm-spacer" />
+            <button v-if="ctl.unreadCount() > 0" type="button" class="bcm-btn bcm-small" :disabled="!!state.busy.markRead" @click="ctl.markAllRead()">{{ t('panel.markRead') }}</button>
+          </div>
+          <p v-if="state.notifications.length === 0" class="bcm-muted">{{ t('panel.notificationsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="n in state.notifications" :key="n.id" :class="{ 'bcm-unread': n.readAt === null }">
+              <p v-if="notificationKey(n)">{{ t(notificationKey(n)!) }}</p>
+              <time class="bcm-time" :datetime="n.createdAt">{{ formatDate(lang, n.createdAt) }}</time>
+              <a v-if="n.decisionId && statementHref(n.decisionId)" :href="statementHref(n.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+            </li>
+          </ul>
+        </section>
+
+        <!-- statements -->
+        <section class="bcm-section" :aria-labelledby="`${id}-statements`">
+          <h3 :id="`${id}-statements`">{{ t('panel.statements') }}</h3>
+          <p v-if="state.decisions.length === 0" class="bcm-muted">{{ t('panel.statementsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="d in state.decisions" :key="d.decisionId">
+              <p v-if="restrictionKey(d.restriction)"><strong>{{ t(restrictionKey(d.restriction)!) }}</strong></p>
+              <p v-if="categoryKey(d.category)" class="bcm-muted">{{ t(categoryKey(d.category)!) }}</p>
+              <p class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, d.decidedAt) }) }}</p>
+              <p v-if="appealStatusKey(d.decisionId)" class="bcm-muted">{{ t(appealStatusKey(d.decisionId)!) }}</p>
+              <p v-else-if="d.canAppeal" class="bcm-muted">{{ t('statement.appealUntil', { date: formatDate(lang, d.appealWindowClosesAt) }) }}</p>
+              <a v-if="statementHref(d.decisionId)" :href="statementHref(d.decisionId) ?? undefined">{{ t('sanction.statement') }}</a>
+            </li>
+          </ul>
+        </section>
+
+        <!-- reports -->
+        <section class="bcm-section" :aria-labelledby="`${id}-reports`">
+          <h3 :id="`${id}-reports`">{{ t('panel.reports') }}</h3>
+          <p v-if="state.reports.length === 0" class="bcm-muted">{{ t('panel.reportsEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="r in state.reports" :key="r.caseId">
+              <p v-if="categoryKey(r.category)"><strong>{{ t(categoryKey(r.category)!) }}</strong></p>
+              <p v-if="caseStatusKey(r.status)">{{ t(caseStatusKey(r.status)!) }}</p>
+              <time class="bcm-time" :datetime="r.reportedAt">{{ formatDate(lang, r.reportedAt) }}</time>
+              <p v-if="r.decidedAt" class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, r.decidedAt) }) }}</p>
+            </li>
+          </ul>
+        </section>
+
+        <!-- blocks -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-blocks`">
+          <h3 :id="`${id}-blocks`">{{ t('panel.blocks') }}</h3>
+          <p v-if="state.blocks.length === 0" class="bcm-muted">{{ t('panel.blocksEmpty') }}</p>
+          <ul v-else class="bcm-list">
+            <li v-for="b in state.blocks" :key="b.memberId" class="bcm-row">
+              <span>{{ b.author.kind === 'member' && 'displayName' in b.author && b.author.displayName ? b.author.displayName : t('author.deleted') }}</span>
+              <span class="bcm-spacer" />
+              <button type="button" class="bcm-btn bcm-small" :disabled="!!state.busy[`block:${b.memberId}`]" @click="ctl.unblock(b.memberId)">{{ t('discussion.unblock') }}</button>
+            </li>
+          </ul>
+        </section>
+
+        <!-- consents -->
+        <section v-if="member && consent !== null" class="bcm-section" :aria-labelledby="`${id}-consents`">
+          <h3 :id="`${id}-consents`">{{ t('panel.consents') }}</h3>
+          <template v-if="consent === 'accepted'">
+            <p>{{ t('panel.art9Given') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn" :disabled="!!state.busy.consent" @click="confirming = 'consent'">{{ t('panel.art9Withdraw') }}</button>
+            </div>
+          </template>
+          <template v-else-if="consentRefused">
+            <p>{{ t('panel.art9Refused') }}</p>
+            <OnboardingSteps v-if="ctl.consent.value" :model="ctl.consent.value" :rules-href="routes.rulesPath" @cancel="ctl.closeConsent()" />
+            <div v-else class="bcm-row">
+              <button type="button" class="bcm-btn bcm-primary" @click="ctl.giveConsent()">{{ t('discussion.giveConsent') }}</button>
+            </div>
+          </template>
+          <p v-else>{{ t('panel.art9NotGiven') }}</p>
+        </section>
+
+        <!-- export -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-export`">
+          <h3 :id="`${id}-export`">{{ t('panel.export') }}</h3>
+          <p class="bcm-hint">{{ t('panel.exportHint') }}</p>
+          <div class="bcm-row">
+            <button type="button" class="bcm-btn" :disabled="state.exporting" @click="exportNow()">{{ state.exporting ? t('panel.exporting') : t('panel.export') }}</button>
+          </div>
+        </section>
+
+        <!-- the profile's deletion -->
+        <section v-if="member" class="bcm-section" :aria-labelledby="`${id}-erase`">
+          <h3 :id="`${id}-erase`">{{ t('panel.erase') }}</h3>
+          <template v-if="ctl.erasing()">
+            <p>{{ state.purgeAfter ? t('panel.eraseScheduled', { date: formatDate(lang, state.purgeAfter) }) : t('notification.erasure_scheduled') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn bcm-primary" :disabled="!!state.busy.erase" @click="ctl.cancelErase()">{{ t('panel.eraseCancel') }}</button>
+            </div>
+          </template>
+          <template v-else>
+            <p class="bcm-hint">{{ t('panel.eraseExplain') }}</p>
+            <div class="bcm-row">
+              <button type="button" class="bcm-btn bcm-danger" :disabled="!!state.busy.erase" @click="confirming = 'erase'">{{ t('panel.erase') }}</button>
+            </div>
+          </template>
+        </section>
+      </template>
+    </template>
+
+    <p class="bcm-sr" aria-live="polite">{{ liveText }}</p>
+
+    <ConfirmDialog
+      v-if="confirming === 'consent'"
+      title="panel.art9WithdrawTitle"
+      explain="panel.art9WithdrawExplain"
+      confirm="panel.art9WithdrawConfirm"
+      cancel="panel.art9WithdrawCancel"
+      :busy="!!state.busy.consent"
+      :fallback-focus="() => heading"
+      @confirm="confirmAction()"
+      @cancel="confirming = null"
+    />
+    <ConfirmDialog
+      v-if="confirming === 'erase'"
+      title="panel.eraseTitle"
+      explain="panel.eraseExplain"
+      confirm="panel.eraseConfirm"
+      cancel="panel.eraseKeep"
+      danger
+      :busy="!!state.busy.erase"
+      :fallback-focus="() => heading"
+      @confirm="confirmAction()"
+      @cancel="confirming = null"
+    />
+  </section>
+</template>

package/src/ui/NoticeFormView.vue

@@ -0,0 +1,244 @@
+<script setup lang="ts">
+/**
+ * `<blogmcp-notice-form>`: the DSA notice form for anyone (m1-contracts.md §7.7, §10.4; community.md §5).
+ * The target comes from `target` (JSON), else `article-id`, else the discussion's report link (`#c=…&s=…`).
+ * Without one — the notice page opened directly, or a fragment that names nothing — the element says where a report
+ * starts (at the content itself) and links to the rules, instead of a form with nothing to report.
+ * The Turnstile widget renders into this element's light DOM (projected through the `turnstile` slot), its
+ * script loaded by this form only.
+ */
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useHost, watch } from 'vue'
+import {
+  CASE_CATEGORIES,
+  COMMUNITY_NOTICE_DESCRIPTION_MAX,
+  COMMUNITY_NOTIFIER_NAME_MAX,
+  type CaseCategory,
+  type CommunityMessageKey,
+  type CommunityTransport,
+  type NoticeTarget,
+} from '@blogmcp/sdk/community'
+import { parseRoutes, parseTarget, routesWithDefaults, targetFromHash, targetKind } from '../core/attrs'
+import { communityClientFor, siteBaseFor, warnOnce } from '../core/client'
+import { documentLang, pickLang, type Lang } from '../core/i18n'
+import { createNoticeForm, type NoticeFormController } from '../core/notice'
+import { failureText } from '../core/outcomes'
+import { renderTurnstile, type TurnstileWidget } from '../core/turnstile'
+import { provideText, uid } from './context'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  apiBase?: string
+  /** The path the site is served under (`/blog`): its proxy and its pages, as the defaults. */
+  siteBase?: string
+  lang?: string
+  turnstileSiteKey?: string
+  /** JSON (or an object): `{ conversationId, seq }`, `{ memberId }`, `{ handle }` or `{ articleId }`. */
+  target?: string | Record<string, unknown>
+  articleId?: string
+  /** JSON (or an object): `noticesPath` (the status page), `rulesPath`. */
+  routes?: string | Record<string, unknown>
+  transport?: CommunityTransport
+}>()
+
+const host = useHost()
+const lang = ref<Lang>(pickLang(props.lang, documentLang()))
+const { t } = provideText(lang)
+const id = uid('bcm-notice')
+const heading = ref<HTMLElement | null>(null)
+const done = ref<HTMLElement | null>(null)
+
+function resolveTarget(): NoticeTarget | null {
+  const fromAttr = parseTarget(props.target)
+  if (fromAttr) return fromAttr
+  if (props.articleId) return parseTarget({ articleId: props.articleId })
+  return typeof location === 'undefined' ? null : targetFromHash(location.hash)
+}
+
+const siteBase = siteBaseFor(props.siteBase)
+const routes = computed(() => routesWithDefaults(parseRoutes(props.routes), null, siteBase ?? ''))
+const ctl = shallowRef<NoticeFormController | null>(null)
+
+const client = siteBase === null ? null : communityClientFor(props.apiBase, props.transport, siteBase)
+const target = resolveTarget()
+/** Nothing to report (and a usable base): the explanation instead of the form. */
+const untargeted = !!client && !target
+if (untargeted) {
+  warnOnce(
+    'notice-target',
+    '[blogmcp-community] <blogmcp-notice-form> has no target (a target, an article-id or the report link’s #c=…&s= fragment): it shows where a report starts instead of the form',
+  )
+}
+if (client && target) {
+  ctl.value = createNoticeForm({
+    client,
+    lang: lang.value,
+    target,
+    captcha: !!props.turnstileSiteKey,
+    noticesPath: routes.value.noticesPath,
+    onSubmitted: (answer) => host?.dispatchEvent(new CustomEvent('bcm-notice-submitted', { detail: answer, bubbles: true, composed: true })),
+  })
+}
+
+const state = computed(() => ctl.value?.state ?? null)
+const kind = computed(() => (state.value?.target ? targetKind(state.value.target) : null))
+const targetText = computed(() => (kind.value === 'message' ? t('notice.targetMessage') : kind.value === 'article' ? t('notice.targetArticle') : t('notice.targetProfile')))
+const categoryKey = (c: CaseCategory): CommunityMessageKey => `category.${c}`
+const failure = computed(() => {
+  const f = state.value?.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+const absoluteStatusLink = computed(() => {
+  const link = state.value?.statusLink
+  return link && typeof location !== 'undefined' ? `${location.origin}${link}` : (link ?? '')
+})
+
+// ── Turnstile, in the light DOM ──
+let widget: TurnstileWidget | null = null
+let slotted: HTMLElement | null = null
+let gone = false
+
+onMounted(async () => {
+  const c = ctl.value
+  if (!c || !props.turnstileSiteKey || !host) return
+  slotted = document.createElement('div')
+  slotted.slot = 'turnstile'
+  host.appendChild(slotted)
+  try {
+    const nonce = (host as HTMLElement & { nonce?: string }).nonce || host.getAttribute('nonce') || undefined
+    const w = await renderTurnstile(slotted, { siteKey: props.turnstileSiteKey, language: lang.value, onToken: (token) => c.setToken(token), nonce })
+    if (gone) {
+      w.remove()
+      return
+    }
+    widget = w
+    c.setCaptcha('ready')
+  } catch {
+    c.setCaptcha('unavailable')
+  }
+})
+watch(
+  () => state.value?.resetSignal,
+  (n, before) => {
+    if (n !== undefined && before !== undefined && n !== before) widget?.reset()
+  },
+)
+watch(
+  () => state.value?.receipt,
+  (receipt) => {
+    if (!receipt) return
+    widget?.remove()
+    widget = null
+    void nextTick(() => done.value?.focus())
+  },
+)
+onBeforeUnmount(() => {
+  gone = true
+  widget?.remove()
+  widget = null
+  slotted?.remove()
+  slotted = null
+  ctl.value?.dispose()
+})
+</script>
+
+<template>
+  <section v-if="ctl && state" class="bcm bcm-notice" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`" ref="heading" tabindex="-1">{{ t('notice.title') }}</h2>
+
+    <div v-if="state.receipt" ref="done" class="bcm-receipt" role="status" tabindex="-1">
+      <p>{{ t('notice.done') }}</p>
+      <p>{{ t('notice.receiptLede') }}</p>
+      <p v-if="state.statusLink"><a :href="state.statusLink">{{ t('notice.statusLink') }}</a></p>
+      <input v-if="absoluteStatusLink" class="bcm-input" readonly :value="absoluteStatusLink" :aria-label="t('notice.statusLink')" @focus="($event.target as HTMLInputElement).select()" />
+      <p v-if="!state.receipt.contactKept" class="bcm-note">{{ t('notice.noContactKept') }}</p>
+    </div>
+
+    <form v-else class="bcm-form" novalidate @submit.prevent="ctl.submit()">
+      <p>{{ t('notice.lede') }}</p>
+
+      <div class="bcm-field">
+        <span class="bcm-label">{{ t('notice.target') }}</span>
+        <span>{{ targetText }}</span>
+      </div>
+
+      <fieldset class="bcm-choices">
+        <legend>{{ t('notice.category') }}</legend>
+        <label v-for="c in CASE_CATEGORIES" :key="c" class="bcm-choice">
+          <input type="radio" :name="`${id}-category`" :value="c" :checked="state.category === c" @change="ctl.setCategory(c)" />
+          <span>{{ t(categoryKey(c)) }}</span>
+        </label>
+      </fieldset>
+
+      <div v-if="state.category === 'rules' && state.rules && state.rules.length" class="bcm-field">
+        <label :for="`${id}-rule`">{{ t('notice.rule') }}</label>
+        <select :id="`${id}-rule`" v-model="state.ruleId" class="bcm-input">
+          <option value="" />
+          <option v-for="rule in state.rules" :key="rule.id" :value="rule.id">{{ rule.title }}</option>
+        </select>
+      </div>
+
+      <div class="bcm-field">
+        <label :for="`${id}-description`">{{ t('notice.description') }}</label>
+        <textarea
+          :id="`${id}-description`"
+          v-model="state.description"
+          class="bcm-input bcm-textarea"
+          rows="5"
+          :aria-describedby="`${id}-description-hint`"
+          :aria-invalid="ctl.descriptionLength() > COMMUNITY_NOTICE_DESCRIPTION_MAX"
+        />
+        <p :id="`${id}-description-hint`" class="bcm-hint">
+          {{ t('notice.descriptionHint') }}
+          {{ t('notice.counter', { length: ctl.descriptionLength(), max: COMMUNITY_NOTICE_DESCRIPTION_MAX }) }}
+        </p>
+      </div>
+
+      <fieldset v-if="ctl.contactAllowed()" class="bcm-fieldset">
+        <legend>{{ t('notice.contactTitle') }}</legend>
+        <p class="bcm-hint">{{ t('notice.contactHint') }}</p>
+        <div class="bcm-field">
+          <label :for="`${id}-name`">{{ t('notice.name') }}</label>
+          <input :id="`${id}-name`" v-model="state.name" class="bcm-input" autocomplete="name" :maxlength="COMMUNITY_NOTIFIER_NAME_MAX" />
+        </div>
+        <div class="bcm-field">
+          <label :for="`${id}-email`">{{ t('notice.email') }}</label>
+          <input
+            :id="`${id}-email`"
+            v-model="state.email"
+            class="bcm-input"
+            type="email"
+            autocomplete="email"
+            :aria-invalid="!!state.failure?.fields?.includes('notifier.email')"
+          />
+        </div>
+      </fieldset>
+      <p v-else class="bcm-note">{{ t('notice.childAtRisk') }}</p>
+
+      <div v-if="state.captcha !== 'off'" class="bcm-turnstile">
+        <slot name="turnstile" />
+        <p v-if="state.captcha === 'unavailable'" class="bcm-error" role="alert">{{ t('notice.captchaUnavailable') }}</p>
+      </div>
+
+      <label class="bcm-check">
+        <input v-model="state.goodFaith" type="checkbox" />
+        <span>{{ t('confirm.good_faith') }}</span>
+      </label>
+
+      <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+
+      <div class="bcm-row">
+        <span class="bcm-spacer" />
+        <button type="submit" class="bcm-btn bcm-primary" :disabled="!ctl.canSubmit()">{{ state.sending ? t('notice.sending') : t('notice.submit') }}</button>
+      </div>
+    </form>
+  </section>
+
+  <section v-else-if="untargeted" class="bcm bcm-notice" :lang="lang" :aria-labelledby="`${id}-title`">
+    <h2 :id="`${id}-title`">{{ t('notice.title') }}</h2>
+    <p>{{ t('notice.noTarget') }}</p>
+    <p><a :href="routes.rulesPath">{{ t('onboarding.rulesTitle') }}</a></p>
+  </section>
+</template>