@blogmcp/community 0.0.0-stage → 0.1.0

package/src/ui/StatementView.vue

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+/**
+ * A statement of reasons (DSA art. 17(3); m1-contracts.md §7.3 `me/decisions/get`) and its redress: the
+ * stored fields as text — the facts in a `<pre class="bcm-facts">` —, the subject as its author may see it,
+ * the whole statement kb-api rendered, and the appeal within its window (or the open appeal's state).
+ */
+import { computed } from 'vue'
+import { COMMUNITY_APPEAL_MAX, type Statement } from '@blogmcp/sdk/community'
+import type { AppealDraft } from '../core/panel'
+import { formatDate, formatTerritorialScope, isPast } from '../core/format'
+import { knownKey } from '../core/i18n'
+import { failureText } from '../core/outcomes'
+import { codePointLength, normalizeBody } from '../core/text'
+import LinkedText from './LinkedText.vue'
+import { uid, useText } from './context'
+
+const props = defineProps<{ statement: Statement; appeal: AppealDraft; withdrawing: boolean }>()
+const emit = defineEmits<{ appeal: []; withdraw: [] }>()
+const { t, lang } = useText()
+const id = uid('bcm-statement')
+
+const s = computed(() => props.statement)
+const restriction = computed(() => knownKey(`restriction.${s.value.restriction}`))
+const basis = computed(() => knownKey(`basis.${s.value.basis}`))
+const category = computed(() => knownKey(`category.${s.value.category}`))
+/** `all` in words, a list of regions by their names; a value of a newer kb-api as it came. */
+const scope = computed(() => formatTerritorialScope(lang.value, s.value.territorialScope))
+const appealStatus = computed(() => (s.value.appeal ? knownKey(`appealStatus.${s.value.appeal.status}`) : null))
+const subjectKey = computed(() =>
+  s.value.subject.kind === 'message' ? 'statement.subjectMessage' : s.value.subject.kind === 'article' ? 'statement.subjectArticle' : 'statement.subjectProfile',
+)
+const subjectText = computed(() => {
+  const subject = s.value.subject
+  return subject.kind === 'message' && subject.message ? (subject.message.body ?? subject.message.displayBody) : null
+})
+const appealOpen = computed(() => s.value.appeal?.status === 'open')
+const windowClosed = computed(() => isPast(s.value.appealWindowClosesAt))
+const length = computed(() => codePointLength(normalizeBody(props.appeal.body)))
+const canSend = computed(() => !props.appeal.sending && length.value > 0 && length.value <= COMMUNITY_APPEAL_MAX)
+const failure = computed(() => {
+  const f = props.appeal.failure
+  if (!f) return ''
+  const r = failureText(f, lang.value)
+  return t(r.key, r.params)
+})
+</script>
+
+<template>
+  <article class="bcm-section" :aria-labelledby="`${id}-title`">
+    <h3 :id="`${id}-title`">{{ t('statement.title') }}</h3>
+    <p class="bcm-muted">{{ t('statement.decidedAt', { date: formatDate(lang, s.decidedAt) }) }}</p>
+    <p>{{ t('statement.provider', { entity: s.providerEntity }) }}</p>
+
+    <dl class="bcm-dl">
+      <template v-if="restriction">
+        <dt>{{ t('statement.restriction') }}</dt>
+        <dd>
+          {{ t(restriction) }}
+          <span v-if="s.restrictionUntil" class="bcm-muted">{{ t('statement.until', { date: formatDate(lang, s.restrictionUntil) }) }}</span>
+        </dd>
+      </template>
+      <template v-if="category">
+        <dt>{{ t('report.category') }}</dt>
+        <dd>{{ t(category) }}</dd>
+      </template>
+      <template v-if="scope">
+        <dt>{{ t('statement.scope') }}</dt>
+        <dd>{{ scope }}</dd>
+      </template>
+      <template v-if="basis">
+        <dt>{{ t('statement.basis') }}</dt>
+        <dd>{{ t(basis) }}</dd>
+      </template>
+      <dt>{{ t('statement.automation') }}</dt>
+      <dd>
+        <span v-if="s.automatedDetection">{{ t('statement.automatedDetection') }}</span>
+        <span>{{ s.automated ? t('statement.automatedDecision') : t('statement.humanDecision') }}</span>
+      </dd>
+      <template v-if="s.legalGround">
+        <dt>{{ t('statement.legalGround') }}</dt>
+        <dd>
+          <p>{{ s.legalGround }}</p>
+          <p v-if="s.legalExplanation" class="bcm-text">{{ s.legalExplanation }}</p>
+        </dd>
+      </template>
+      <template v-if="s.contractualGround">
+        <dt>{{ t('statement.contractualGround') }}</dt>
+        <dd>
+          <p>{{ s.contractualGround }}</p>
+          <p v-if="s.contractualExplanation" class="bcm-text">{{ s.contractualExplanation }}</p>
+        </dd>
+      </template>
+      <dt>{{ t('statement.subject') }}</dt>
+      <dd>
+        <p>{{ t(subjectKey) }}</p>
+        <p v-if="subjectText" class="bcm-note bcm-text"><LinkedText :text="subjectText" /></p>
+      </dd>
+    </dl>
+
+    <h4>{{ t('statement.facts') }}</h4>
+    <pre class="bcm-facts">{{ s.facts }}</pre>
+
+    <h4>{{ t('statement.redress') }}</h4>
+    <p class="bcm-text">{{ s.redress }}</p>
+
+    <details>
+      <summary>{{ t('statement.full') }}</summary>
+      <pre class="bcm-facts">{{ s.statement }}</pre>
+    </details>
+
+    <section class="bcm-card" :aria-labelledby="`${id}-appeal`">
+      <h4 :id="`${id}-appeal`">{{ t('statement.appealTitle') }}</h4>
+      <template v-if="appealOpen">
+        <p>{{ t('statement.appealOpen') }}</p>
+        <p v-if="appealStatus" class="bcm-muted">{{ t(appealStatus) }}</p>
+        <div class="bcm-row">
+          <button type="button" class="bcm-btn" :disabled="withdrawing" @click="emit('withdraw')">{{ t('statement.appealWithdraw') }}</button>
+        </div>
+      </template>
+      <template v-else-if="s.canAppeal">
+        <p>{{ t('statement.appealLede') }}</p>
+        <p class="bcm-muted">{{ t('statement.appealUntil', { date: formatDate(lang, s.appealWindowClosesAt) }) }}</p>
+        <form class="bcm-form" novalidate @submit.prevent="canSend && emit('appeal')">
+          <div class="bcm-field">
+            <label :for="`${id}-body`">{{ t('statement.appealBody') }}</label>
+            <textarea :id="`${id}-body`" v-model="appeal.body" class="bcm-input bcm-textarea" rows="5" :aria-describedby="`${id}-counter`" :aria-invalid="length > COMMUNITY_APPEAL_MAX" />
+            <p :id="`${id}-counter`" class="bcm-counter">{{ t('statement.appealCounter', { length, max: COMMUNITY_APPEAL_MAX }) }}</p>
+          </div>
+          <p v-if="failure" class="bcm-error" role="alert">{{ failure }}</p>
+          <div class="bcm-row">
+            <button type="submit" class="bcm-btn bcm-primary" :disabled="!canSend">{{ appeal.sending ? t('statement.appealSending') : t('statement.appealSubmit') }}</button>
+          </div>
+        </form>
+      </template>
+      <template v-else>
+        <p v-if="appealStatus" class="bcm-muted">{{ t(appealStatus) }}</p>
+        <p>{{ windowClosed ? t('statement.appealClosed') : t('statement.appealUnavailable') }}</p>
+      </template>
+    </section>
+  </article>
+</template>

package/src/ui/context.ts

@@ -0,0 +1,75 @@
+/**
+ * What the components of one element share: the language and its texts (`t` reads the catalogue through
+ * `communityMessage` and nothing else), ids unique to the element, and the dialog's focus handling.
+ */
+import { inject, nextTick, onBeforeUnmount, onMounted, provide, type InjectionKey, type Ref } from 'vue'
+import { communityMessage } from '@blogmcp/sdk/community'
+import type { Lang, TextRef, Translate } from '../core/i18n'
+
+export interface TextContext {
+  lang: Ref<Lang>
+  t: Translate
+  /** A TextRef (a controller's outcome) as text. */
+  text(ref: TextRef | null | undefined): string
+}
+
+const TEXT: InjectionKey<TextContext> = Symbol('bcm-text')
+
+export function provideText(lang: Ref<Lang>): TextContext {
+  // Reads lang.value on every call, so a view that renders a text re-renders when the language changes.
+  const t: Translate = (key, params) => communityMessage(lang.value, key, params)
+  const ctx: TextContext = { lang, t, text: (ref) => (ref ? t(ref.key, ref.params) : '') }
+  provide(TEXT, ctx)
+  return ctx
+}
+
+export function useText(): TextContext {
+  const ctx = inject(TEXT, null)
+  if (!ctx) throw new Error('[blogmcp-community] a component rendered outside its element')
+  return ctx
+}
+
+let counter = 0
+/** An id unique on the page (ids live in each element's shadow root, but the labels reference them). */
+export function uid(prefix: string): string {
+  counter += 1
+  return `${prefix}-${counter}`
+}
+
+/**
+ * A native `<dialog>` opened modally while the component lives: the top layer, Esc, the focus kept
+ * inside — and returned to where it was (or to `fallback` when that is gone, e.g. a deleted message's menu).
+ */
+export function useModal(dialog: Ref<HTMLDialogElement | null>, onCancel: () => void, fallback?: () => HTMLElement | null): void {
+  let previous: HTMLElement | null = null
+  const onCancelEvent = (e: Event): void => {
+    e.preventDefault()
+    onCancel()
+  }
+  onMounted(() => {
+    const el = dialog.value
+    if (!el) return
+    const root = el.getRootNode() as Document | ShadowRoot
+    previous = (root.activeElement as HTMLElement | null) ?? null
+    el.addEventListener('cancel', onCancelEvent)
+    if (typeof el.showModal === 'function') {
+      try {
+        el.showModal()
+      } catch {
+        el.setAttribute('open', '')
+      }
+    } else {
+      el.setAttribute('open', '')
+    }
+  })
+  onBeforeUnmount(() => {
+    const el = dialog.value
+    el?.removeEventListener('cancel', onCancelEvent)
+    if (el?.open && typeof el.close === 'function') el.close()
+    const back = previous
+    void nextTick(() => {
+      const target = back && back.isConnected ? back : (fallback?.() ?? null)
+      target?.focus()
+    })
+  })
+}

package/src/ui/discussion-context.ts

@@ -0,0 +1,30 @@
+/** What the discussion's components share: the controller, the host's routes, what the reader opened. */
+import { inject, provide, type ComputedRef, type InjectionKey } from 'vue'
+import type { DiscussionController } from '../core/discussion'
+import type { routesWithDefaults } from '../core/attrs'
+
+export interface DiscussionContext {
+  ctl: DiscussionController
+  routes: ComputedRef<ReturnType<typeof routesWithDefaults>>
+  /** Messages of a blocked author the reader opened anyway. */
+  opened: Set<number>
+  /** Translated messages the reader reads in the original. */
+  originals: Set<number>
+  /** Top-level messages whose every reply the reader asked to see. */
+  allReplies: Set<number>
+  /** Where the focus goes when the element it came from is gone (a deleted message). */
+  focusHeading(): HTMLElement | null
+  deleteMessage(seq: number): void
+}
+
+const KEY: InjectionKey<DiscussionContext> = Symbol('bcm-discussion')
+
+export function provideDiscussion(ctx: DiscussionContext): void {
+  provide(KEY, ctx)
+}
+
+export function useDiscussion(): DiscussionContext {
+  const ctx = inject(KEY, null)
+  if (!ctx) throw new Error('[blogmcp-community] a discussion component rendered outside <blogmcp-discussion>')
+  return ctx
+}

package/src/ui/styles.css

@@ -0,0 +1,243 @@
+/* The community elements' one stylesheet. It lives in each element's shadow root: nothing here reaches the
+   site, nothing of the site's reaches here but what :host lets through. A site themes the elements with the
+   --bcm-* custom properties (set them on the element: `blogmcp-discussion { --bcm-accent: … }`). */
+
+:host {
+  all: initial;
+  display: block;
+  --bcm-bg: #ffffff;
+  --bcm-fg: #1d1f23;
+  --bcm-muted: #5f6672;
+  --bcm-line: #dfe2e7;
+  --bcm-soft: #f4f5f7;
+  --bcm-accent: #2457d6;
+  --bcm-accent-fg: #ffffff;
+  --bcm-danger: #b42318;
+  --bcm-ok: #1f7a3f;
+  --bcm-warn-bg: #fff6d6;
+  --bcm-shadow: 0 8px 28px rgba(16, 24, 40, 0.18);
+  --bcm-z: 20;
+  color-scheme: light dark;
+  font: var(--bcm-font-size, 16px) / 1.5 var(--bcm-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+  color: var(--bcm-fg);
+}
+:host([hidden]) { display: none; }
+
+@media (prefers-color-scheme: dark) {
+  :host {
+    --bcm-bg: #1c1f24;
+    --bcm-fg: #eceef1;
+    --bcm-muted: #a4abb6;
+    --bcm-line: #343943;
+    --bcm-soft: #262a31;
+    --bcm-accent: #6d93ff;
+    --bcm-accent-fg: #0d1117;
+    --bcm-danger: #ff8a7a;
+    --bcm-ok: #6fd08e;
+    --bcm-warn-bg: #3a3420;
+    --bcm-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
+  }
+}
+
+* { box-sizing: border-box; }
+h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.3; }
+h2 { font-size: 1.25em; }
+h3 { font-size: 1.05em; }
+h4 { font-size: 1em; }
+p { margin: 0; }
+ul, ol { margin: 0; padding: 0; }
+a { color: var(--bcm-accent); }
+
+.bcm {
+  background: var(--bcm-bg);
+  color: var(--bcm-fg);
+  border-radius: 14px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+/* visually hidden, read by screen readers */
+.bcm-sr {
+  position: absolute !important;
+  width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
+}
+
+/* ── controls ── */
+.bcm-btn {
+  font: inherit;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  min-height: 36px;
+  padding: 6px 14px;
+  border-radius: 8px;
+  border: 1px solid var(--bcm-line);
+  background: var(--bcm-bg);
+  color: var(--bcm-fg);
+  cursor: pointer;
+  text-decoration: none;
+}
+.bcm-btn:hover:not(:disabled) { background: var(--bcm-soft); }
+.bcm-btn:disabled { opacity: 0.55; cursor: default; }
+.bcm-primary { background: var(--bcm-accent); border-color: var(--bcm-accent); color: var(--bcm-accent-fg); }
+.bcm-primary:hover:not(:disabled) { background: var(--bcm-accent); filter: brightness(1.08); }
+.bcm-danger { color: var(--bcm-danger); }
+.bcm-primary.bcm-danger { background: var(--bcm-danger); border-color: var(--bcm-danger); color: var(--bcm-bg); }
+.bcm-small { min-height: 30px; padding: 2px 10px; font-size: 0.875em; }
+.bcm-link { font: inherit; border: 0; background: none; padding: 0; color: var(--bcm-accent); cursor: pointer; text-align: left; text-decoration: underline; }
+.bcm-quiet { font: inherit; border: 0; background: none; padding: 4px 6px; color: var(--bcm-muted); cursor: pointer; border-radius: 6px; min-height: 30px; }
+.bcm-quiet:hover:not(:disabled) { background: var(--bcm-soft); color: var(--bcm-fg); }
+.bcm-btn:focus-visible, .bcm-link:focus-visible, .bcm-quiet:focus-visible, .bcm-input:focus-visible, .bcm-react:focus-visible, a:focus-visible,
+.bcm-choice input:focus-visible + span {
+  outline: 2px solid var(--bcm-accent);
+  outline-offset: 2px;
+}
+
+.bcm-input {
+  font: inherit;
+  width: 100%;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid var(--bcm-line);
+  background: var(--bcm-bg);
+  color: var(--bcm-fg);
+}
+.bcm-input[aria-invalid='true'] { border-color: var(--bcm-danger); border-width: 2px; }
+.bcm-textarea { resize: vertical; min-height: 96px; }
+.bcm-field { display: flex; flex-direction: column; gap: 4px; }
+.bcm-field > label, .bcm-label { font-weight: 600; }
+.bcm-check { display: flex; gap: 8px; align-items: flex-start; }
+.bcm-check input { margin-top: 0.3em; width: 18px; height: 18px; flex: none; }
+.bcm-choices { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
+.bcm-choices legend, .bcm-fieldset legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
+.bcm-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.bcm-choice { position: relative; display: inline-flex; }
+.bcm-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
+.bcm-choice span {
+  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+  min-height: 40px; min-width: 40px; padding: 6px 12px;
+  border: 1px solid var(--bcm-line); border-radius: 999px; cursor: pointer; background: var(--bcm-bg);
+}
+/* The chosen one: a thicker border and a check, not colour alone. */
+.bcm-choice input:checked + span { border: 2px solid var(--bcm-accent); font-weight: 650; }
+.bcm-choice input:checked + span::before { content: '✓'; }
+
+/* ── text ── */
+.bcm-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.bcm-spacer { flex: 1; }
+.bcm-full { flex-basis: 100%; }
+.bcm-muted, .bcm-hint { color: var(--bcm-muted); font-size: 0.875em; }
+.bcm-error { color: var(--bcm-danger); }
+.bcm-ok { color: var(--bcm-ok); }
+.bcm-note { background: var(--bcm-soft); border-radius: 8px; padding: 8px 12px; font-size: 0.9375em; }
+.bcm-warning { background: var(--bcm-warn-bg); border-radius: 8px; padding: 8px 12px; font-size: 0.9375em; }
+.bcm-banner {
+  background: var(--bcm-warn-bg); border-radius: 10px; padding: 10px 12px;
+  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
+}
+.bcm-text { white-space: pre-wrap; overflow-wrap: anywhere; }
+.bcm-facts {
+  font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
+  background: var(--bcm-soft); border-radius: 8px; padding: 10px 12px;
+}
+.bcm-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  border: 1px solid currentColor; border-radius: 999px; padding: 0 8px;
+  font-size: 0.8125em; line-height: 1.6;
+}
+.bcm-badge-team { color: var(--bcm-accent); font-weight: 650; }
+
+/* ── the discussion ── */
+.bcm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
+.bcm-count { color: var(--bcm-muted); }
+.bcm-thread, .bcm-replies { list-style: none; display: flex; flex-direction: column; gap: 12px; }
+.bcm-replies { margin-top: 12px; padding-left: 20px; border-left: 2px solid var(--bcm-line); }
+.bcm-msg { display: flex; gap: 10px; align-items: flex-start; }
+.bcm-msg-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
+.bcm-msg-pending { opacity: 0.65; }
+.bcm-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; font-size: 0.875em; }
+.bcm-author { font-weight: 650; }
+.bcm-handle, .bcm-time { color: var(--bcm-muted); }
+.bcm-handle::before { content: '@'; }
+.bcm-placeholder { color: var(--bcm-muted); font-style: italic; }
+.bcm-own-state { border-left: 3px solid var(--bcm-line); padding-left: 10px; display: flex; flex-direction: column; gap: 4px; }
+.bcm-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 6px; }
+.bcm-avatar {
+  flex: none; width: 36px; height: 36px; border-radius: 999px;
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--bcm-soft); font-size: 20px; line-height: 1; user-select: none;
+}
+.bcm-avatar-initial { color: #fff; font-size: 16px; font-weight: 650; }
+.bcm-reactions { display: flex; flex-wrap: wrap; gap: 6px; }
+.bcm-react {
+  font: inherit; display: inline-flex; align-items: center; gap: 4px;
+  min-height: 32px; padding: 2px 10px; border-radius: 999px;
+  border: 1px solid var(--bcm-line); background: var(--bcm-bg); color: var(--bcm-fg); cursor: pointer;
+}
+button.bcm-react:hover:not(:disabled) { background: var(--bcm-soft); }
+/* The viewer's own: a thicker border and a bold count, not colour alone. */
+.bcm-react[aria-pressed='true'] { border: 2px solid var(--bcm-accent); font-weight: 700; }
+span.bcm-react { cursor: default; }
+.bcm-menu { position: relative; display: inline-flex; }
+.bcm-menu-list {
+  position: absolute; right: 0; top: calc(100% + 4px); z-index: var(--bcm-z);
+  min-width: 200px; display: flex; flex-direction: column; padding: 4px;
+  background: var(--bcm-bg); border: 1px solid var(--bcm-line); border-radius: 10px; box-shadow: var(--bcm-shadow);
+}
+.bcm-menu-list button, .bcm-menu-list a {
+  font: inherit; text-align: left; border: 0; background: none; color: var(--bcm-fg);
+  padding: 8px 10px; border-radius: 6px; cursor: pointer; text-decoration: none; min-height: 36px;
+}
+.bcm-menu-list button:hover, .bcm-menu-list a:hover { background: var(--bcm-soft); }
+
+/* ── the composer ── */
+.bcm-composer { display: flex; flex-direction: column; gap: 8px; }
+.bcm-composer-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.bcm-counter { color: var(--bcm-muted); font-size: 0.8125em; font-variant-numeric: tabular-nums; }
+.bcm-counter-over { color: var(--bcm-danger); font-weight: 650; }
+.bcm-confirm { border: 2px solid var(--bcm-accent); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
+
+/* ── onboarding, forms, the panel ── */
+.bcm-card { border: 1px solid var(--bcm-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
+.bcm-steps { color: var(--bcm-muted); font-size: 0.875em; }
+.bcm-rules { list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.bcm-rules li { display: flex; flex-direction: column; gap: 2px; }
+.bcm-consent { max-height: 260px; overflow: auto; border: 1px solid var(--bcm-line); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
+.bcm-form { display: flex; flex-direction: column; gap: 14px; }
+.bcm-section { display: flex; flex-direction: column; gap: 10px; }
+.bcm-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
+.bcm-list > li { border: 1px solid var(--bcm-line); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
+.bcm-unread { border-left: 4px solid var(--bcm-accent) !important; }
+.bcm-dl { display: grid; grid-template-columns: minmax(120px, max-content) 1fr; gap: 6px 14px; margin: 0; }
+.bcm-dl dt { font-weight: 600; }
+.bcm-dl dd { margin: 0; }
+.bcm-receipt { display: flex; flex-direction: column; gap: 8px; }
+.bcm-turnstile { min-height: 0; }
+
+/* ── dialogs (native <dialog>: the top layer, Esc, focus kept inside) ── */
+.bcm-dialog {
+  border: 1px solid var(--bcm-line); border-radius: 14px; padding: 0;
+  width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
+  background: var(--bcm-bg); color: var(--bcm-fg); box-shadow: var(--bcm-shadow);
+}
+.bcm-dialog::backdrop { background: rgba(10, 12, 16, 0.45); }
+.bcm-dialog-body { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
+
+@media (max-width: 480px) {
+  .bcm { padding: 12px; border-radius: 0; }
+  .bcm-replies { padding-left: 12px; }
+  .bcm-avatar { width: 30px; height: 30px; font-size: 17px; }
+  .bcm-dl { grid-template-columns: 1fr; }
+  .bcm-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: 16px 16px 0 0; }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .bcm-dialog[open] { animation: bcm-in 140ms ease-out; }
+  @keyframes bcm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
+}

package/src/ui/types.ts

@@ -0,0 +1,7 @@
+/** One action of a message's menu: a button, or a link (the notice page for a reader without a session). */
+export interface MenuItem {
+  id: string
+  label: string
+  href?: string
+  danger?: boolean
+}

package/src/version.ts

@@ -0,0 +1,3 @@
+/** This package's version; the build reads it from package.json. */
+declare const __BLOGMCP_COMMUNITY_VERSION__: string | undefined
+export const VERSION: string = typeof __BLOGMCP_COMMUNITY_VERSION__ === 'string' ? __BLOGMCP_COMMUNITY_VERSION__ : '0.0.0-dev'

package/src/vue.ts

@@ -0,0 +1,116 @@
+/**
+ * `<KbDiscussion>`, `<KbNoticeForm>`, `<KbMyCommunity>` for Vue / Nuxt: each mounts its element on the
+ * client, 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.
+ *
+ *   <KbDiscussion :article-id="article.id" :sign-in-href="localePath('/login')" />
+ *
+ * A site served under a path names it: `site-base="/blog"` on a managed blog (its proxy is `/blog/api/community`;
+ * the host's own `/api/` there is kb-api, which no element may call).
+ */
+import { defineComponent, h, onBeforeUnmount, onMounted, ref, watch, type PropType } from 'vue'
+import type { CommunityTransport } from '@blogmcp/sdk/community'
+import type { CommunityRoutes } from './core/attrs'
+import type { MountDiscussionOptions, MountMyCommunityOptions, MountNoticeFormOptions } from './mount'
+
+type Mounter<O> = (o: O & { container: Element }) => () => void
+
+/** The shared life of a wrapper: mount after hydration, remount when an option changes, unmount with it. */
+function useMount<O extends object>(kind: string, options: () => O, load: () => Promise<Mounter<O>>) {
+  const host = ref<HTMLElement | null>(null)
+  let unmount: (() => void) | null = null
+  let gone = false
+  let ticket = 0
+  async function mount(): Promise<void> {
+    const mine = ++ticket
+    const mountFn = await load()
+    if (gone || mine !== ticket || !host.value) return
+    unmount?.()
+    unmount = mountFn({ ...options(), container: host.value })
+  }
+  onMounted(() => void mount())
+  watch(
+    () => JSON.stringify(options(), (_k, v: unknown) => (typeof v === 'function' ? '[fn]' : v)),
+    () => void mount(),
+  )
+  onBeforeUnmount(() => {
+    gone = true
+    unmount?.()
+    unmount = null
+  })
+  return () => h('div', { ref: host, 'data-blogmcp-community': kind })
+}
+
+function defined<T extends object>(o: T): T {
+  const out = {} as T
+  for (const [k, v] of Object.entries(o)) if (v !== undefined && v !== null) (out as Record<string, unknown>)[k] = v
+  return out
+}
+
+export const KbDiscussion = defineComponent({
+  name: 'KbDiscussion',
+  props: {
+    articleId: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    pollMs: Number,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountDiscussionOptions>(
+      'discussion',
+      () => defined({ ...props }) as MountDiscussionOptions,
+      async () => (await import('./mount')).mountDiscussion as Mounter<MountDiscussionOptions>,
+    )
+  },
+})
+
+export const KbNoticeForm = defineComponent({
+  name: 'KbNoticeForm',
+  props: {
+    target: Object as PropType<MountNoticeFormOptions['target']>,
+    articleId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    turnstileSiteKey: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountNoticeFormOptions>(
+      'notice-form',
+      () => defined({ ...props }) as MountNoticeFormOptions,
+      async () => (await import('./mount')).mountNoticeForm as Mounter<MountNoticeFormOptions>,
+    )
+  },
+})
+
+export const KbMyCommunity = defineComponent({
+  name: 'KbMyCommunity',
+  props: {
+    decisionId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object as PropType<CommunityRoutes>,
+    nonce: String,
+    transport: Function as PropType<CommunityTransport>,
+  },
+  setup(props) {
+    return useMount<MountMyCommunityOptions>(
+      'my-community',
+      () => defined({ ...props }) as MountMyCommunityOptions,
+      async () => (await import('./mount')).mountMyCommunity as Mounter<MountMyCommunityOptions>,
+    )
+  },
+})
+
+export type { MountDiscussionOptions, MountNoticeFormOptions, MountMyCommunityOptions, CommunityRoutes }