npm - @blogmcp/community - Versions diffs - 0.0.0-stage → 0.2.0 - Mend

@blogmcp/community 0.0.0-stage → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (112) hide show

package/LICENSE +21 -0
package/README.md +243 -2
package/dist/blogmcp-community.global.js +10 -0
package/dist/chunks/mount-WadUnaTa.js +6436 -0
package/dist/core/attrs.d.ts +99 -0
package/dist/core/avatars.d.ts +16 -0
package/dist/core/badge.d.ts +30 -0
package/dist/core/centre.d.ts +28 -0
package/dist/core/client.d.ts +27 -0
package/dist/core/digest-token.d.ts +2 -0
package/dist/core/discussion.d.ts +175 -0
package/dist/core/download.d.ts +4 -0
package/dist/core/format.d.ts +24 -0
package/dist/core/i18n.d.ts +28 -0
package/dist/core/names.d.ts +15 -0
package/dist/core/notice.d.ts +50 -0
package/dist/core/onboarding.d.ts +92 -0
package/dist/core/outcomes.d.ts +29 -0
package/dist/core/panel.d.ts +96 -0
package/dist/core/profile.d.ts +40 -0
package/dist/core/push.d.ts +63 -0
package/dist/core/realtime.d.ts +35 -0
package/dist/core/receipt.d.ts +5 -0
package/dist/core/settings.d.ts +53 -0
package/dist/core/text.d.ts +35 -0
package/dist/core/turnstile.d.ts +33 -0
package/dist/element.d.ts +47 -0
package/dist/global.d.ts +11 -0
package/dist/index.d.ts +33 -0
package/dist/index.js +45 -0
package/dist/mount.d.ts +105 -0
package/dist/react.d.ts +28 -0
package/dist/react.js +55 -0
package/dist/ui/AuthorAvatar.vue.d.ts +11 -0
package/dist/ui/BadgeView.vue.d.ts +13 -0
package/dist/ui/ConfirmDialog.vue.d.ts +20 -0
package/dist/ui/DiscussionView.vue.d.ts +44 -0
package/dist/ui/LinkedText.vue.d.ts +6 -0
package/dist/ui/MemberSettingsView.vue.d.ts +13 -0
package/dist/ui/MessageComposer.vue.d.ts +26 -0
package/dist/ui/MessageItem.vue.d.ts +6 -0
package/dist/ui/MessageMenu.vue.d.ts +10 -0
package/dist/ui/MyCommunityView.vue.d.ts +16 -0
package/dist/ui/NoticeFormView.vue.d.ts +26 -0
package/dist/ui/NoticeStatusView.vue.d.ts +15 -0
package/dist/ui/NotificationCentreView.vue.d.ts +12 -0
package/dist/ui/OnboardingSteps.vue.d.ts +11 -0
package/dist/ui/ProfileView.vue.d.ts +13 -0
package/dist/ui/ReactionBar.vue.d.ts +13 -0
package/dist/ui/ReportDialog.vue.d.ts +15 -0
package/dist/ui/StatementView.vue.d.ts +15 -0
package/dist/ui/WelcomeView.vue.d.ts +12 -0
package/dist/ui/context.d.ts +21 -0
package/dist/ui/discussion-context.d.ts +19 -0
package/dist/ui/types.d.ts +7 -0
package/dist/version.d.ts +1 -0
package/dist/vue.d.ts +200 -0
package/dist/vue.js +201 -0
package/package.json +80 -4
package/src/core/attrs.ts +186 -0
package/src/core/avatars.ts +44 -0
package/src/core/badge.ts +120 -0
package/src/core/centre.ts +136 -0
package/src/core/client.ts +54 -0
package/src/core/digest-token.ts +26 -0
package/src/core/discussion.ts +876 -0
package/src/core/download.ts +21 -0
package/src/core/format.ts +112 -0
package/src/core/i18n.ts +49 -0
package/src/core/names.ts +51 -0
package/src/core/notice.ts +178 -0
package/src/core/onboarding.ts +492 -0
package/src/core/outcomes.ts +86 -0
package/src/core/panel.ts +446 -0
package/src/core/profile.ts +144 -0
package/src/core/push.ts +174 -0
package/src/core/realtime.ts +39 -0
package/src/core/receipt.ts +28 -0
package/src/core/settings.ts +363 -0
package/src/core/text.ts +174 -0
package/src/core/turnstile.ts +98 -0
package/src/element.ts +165 -0
package/src/global.ts +26 -0
package/src/index.ts +70 -0
package/src/mount.ts +234 -0
package/src/react.ts +97 -0
package/src/shims.d.ts +11 -0
package/src/ui/AuthorAvatar.vue +26 -0
package/src/ui/BadgeView.vue +51 -0
package/src/ui/ConfirmDialog.vue +38 -0
package/src/ui/DiscussionView.vue +334 -0
package/src/ui/LinkedText.vue +24 -0
package/src/ui/MemberSettingsView.vue +175 -0
package/src/ui/MessageComposer.vue +141 -0
package/src/ui/MessageItem.vue +223 -0
package/src/ui/MessageMenu.vue +67 -0
package/src/ui/MyCommunityView.vue +378 -0
package/src/ui/NoticeFormView.vue +244 -0
package/src/ui/NoticeStatusView.vue +82 -0
package/src/ui/NotificationCentreView.vue +159 -0
package/src/ui/OnboardingSteps.vue +174 -0
package/src/ui/ProfileView.vue +91 -0
package/src/ui/ReactionBar.vue +41 -0
package/src/ui/ReportDialog.vue +88 -0
package/src/ui/StatementView.vue +141 -0
package/src/ui/WelcomeView.vue +72 -0
package/src/ui/context.ts +75 -0
package/src/ui/discussion-context.ts +30 -0
package/src/ui/styles.css +259 -0
package/src/ui/types.ts +7 -0
package/src/version.ts +3 -0
package/src/vue.ts +242 -0

package/src/mount.ts ADDED Viewed

@@ -0,0 +1,234 @@
+/**
+ * Put an element on the page from code: what the Vue and React wrappers do, and what any other framework can
+ * call from its client-side mount hook. The element is defined first, so it is created already upgraded (no
+ * upgrade of an unknown element later, which some DOMs never run), and every attribute and property is set
+ * BEFORE it connects, so it mounts with them; the returned function removes the element again (its poll and
+ * requests stop with it).
+ */
+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 {
+  /** The host's relative base (default `/api/community` under `siteBase`): its proxy or BFF. Never kb-api's URL. */
+  apiBase?: string
+  /**
+   * The path the site is served under (`/blog` on a managed blog, whose host's own `/api/` is kb-api): the default
+   * api-base and the default pages are taken under it. A page or base the host names itself is used as it is.
+   */
+  siteBase?: string
+  /** `cs` or `en` (`sk` reads Czech); default the page's `<html lang>`. */
+  lang?: string
+  /** The host's community pages (statements, the panel, the rules, the notice form, a notifier's status). */
+  routes?: CommunityRoutes
+  /** CSP nonce for the element's stylesheet (and the Turnstile script). */
+  nonce?: string
+  /** A replacement transport (tests; a signing transport later). */
+  transport?: CommunityTransport
+  /** Where the element goes; default `document.body`. */
+  container?: Element
+}
+export interface MountDiscussionOptions extends CommonMountOptions {
+  articleId: string
+  /** The site's sign-in page; the current path is put in its fragment. */
+  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 {
+  /** What is reported: a message, a member (by id or handle) or an article. */
+  target?: { conversationId: string; seq: number } | { memberId: string } | { handle: string } | { articleId: string }
+  /** Or the article (when `target` is absent). */
+  articleId?: string
+  /** The site's Turnstile site key; without it no widget renders (kb-api then decides alone). */
+  turnstileSiteKey?: string
+}
+export interface MountMyCommunityOptions extends CommonMountOptions {
+  /** Open this statement of reasons (the host's statement page). */
+  decisionId?: string
+  /** The site's sign-in page. */
+  signInHref?: string
+}
+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))
+}
+function place(el: Settable, o: CommonMountOptions): () => void {
+  // Set before the element connects, so it mounts with it.
+  if (o.transport) el.transport = o.transport
+  ;(o.container ?? document.body).appendChild(el)
+  return () => el.remove()
+}
+/** Mount `<blogmcp-discussion>`; returns the function that removes it. */
+export function mountDiscussion(o: MountDiscussionOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineDiscussionElement({ nonce: o.nonce })
+  const el = document.createElement(DISCUSSION_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'article-id': o.articleId,
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    'sign-in-href': o.signInHref,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'poll-ms': o.pollMs,
+    nonce: o.nonce,
+  })
+  if (o.realtime) el.realtime = o.realtime
+  return place(el, o)
+}
+/** Mount `<blogmcp-notice-form>`; returns the function that removes it. */
+export function mountNoticeForm(o: MountNoticeFormOptions): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineNoticeFormElement({ nonce: o.nonce })
+  const el = document.createElement(NOTICE_FORM_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    'turnstile-site-key': o.turnstileSiteKey,
+    target: o.target ? JSON.stringify(o.target) : undefined,
+    'article-id': o.articleId,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    nonce: o.nonce,
+  })
+  return place(el, o)
+}
+/** Mount `<blogmcp-my-community>`; returns the function that removes it. */
+export function mountMyCommunity(o: MountMyCommunityOptions = {}): () => void {
+  if (typeof document === 'undefined') return () => {}
+  defineMyCommunityElement({ nonce: o.nonce })
+  const el = document.createElement(MY_COMMUNITY_ELEMENT_TAG) as Settable
+  attrs(el, {
+    'api-base': o.apiBase,
+    'site-base': o.siteBase,
+    lang: o.lang,
+    'decision-id': o.decisionId,
+    routes: o.routes ? JSON.stringify(o.routes) : undefined,
+    'sign-in-href': o.signInHref,
+    nonce: o.nonce,
+  })
+  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 ADDED Viewed

@@ -0,0 +1,97 @@
+/**
+ * `<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.
+ *
+ *   <KbDiscussion articleId={article.id} apiBase="/api/community" signInHref={`/sign-in#${pathname}`} />
+ */
+import { createElement, useEffect, useRef, type ReactElement } from 'react'
+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))
+function useMounted<P extends object>(kind: string, props: P, load: () => Promise<(o: P & { container: Element }) => () => void>): ReactElement {
+  const host = useRef<HTMLDivElement>(null)
+  // The latest props, read at mount: a parent that rebuilds an object prop on every render must not tear
+  // the element down (an open composer, its text) — only a changed value does.
+  const latest = useRef(props)
+  latest.current = props
+  const key = keyOf(props)
+  useEffect(() => {
+    let unmount: (() => void) | null = null
+    let gone = false
+    void load().then((mount) => {
+      if (!gone && host.current) unmount = mount({ ...latest.current, container: host.current })
+    })
+    return () => {
+      gone = true
+      unmount?.()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key])
+  return createElement('div', { ref: host, 'data-blogmcp-community': kind })
+}
+export function KbDiscussion(props: KbDiscussionProps): ReactElement {
+  return useMounted('discussion', props, async () => (await import('./mount')).mountDiscussion)
+}
+export function KbNoticeForm(props: KbNoticeFormProps): ReactElement {
+  return useMounted('notice-form', props, async () => (await import('./mount')).mountNoticeForm)
+}
+export function KbMyCommunity(props: KbMyCommunityProps): ReactElement {
+  return useMounted('my-community', props, async () => (await import('./mount')).mountMyCommunity)
+}
+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/shims.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+// Module shapes for the build's own imports, so a TypeScript consumer reading this package's
+// sources (in-repo, before `prepack` points `types` at dist) compiles without Vue tooling.
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>
+  export default component
+}
+declare module '*.css?inline' {
+  const css: string
+  export default css
+}

package/src/ui/AuthorAvatar.vue ADDED Viewed

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/** A member's avatar preset (an emoji), else the initial of their name; decoration only (the name is beside it). */
+import { computed } from 'vue'
+import type { KnownAuthor } from '@blogmcp/sdk/community'
+import { avatarEmoji, hueOf, initialOf } from '../core/avatars'
+const props = defineProps<{ author: KnownAuthor | { kind: 'member'; memberId: string | null; displayName: string | null; avatarPreset: string | null } }>()
+const emoji = computed(() => (props.author.kind === 'member' ? avatarEmoji(props.author.avatarPreset) : null))
+const initial = computed(() => {
+  const a = props.author
+  if (a.kind === 'member') return initialOf(a.displayName)
+  if (a.kind === 'staff') return initialOf(a.displayName)
+  return ''
+})
+const background = computed(() => {
+  const a = props.author
+  if (emoji.value || !initial.value) return undefined
+  const id = a.kind === 'member' ? a.memberId : a.kind === 'staff' ? a.staffId : null
+  return `hsl(${hueOf(id)} 45% 42%)`
+})
+</script>
+<template>
+  <span class="bcm-avatar" :class="{ 'bcm-avatar-initial': !emoji && initial }" :style="background ? { background } : undefined" aria-hidden="true">{{ emoji ?? initial }}</span>
+</template>

package/src/ui/BadgeView.vue ADDED Viewed

@@ -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/ConfirmDialog.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+/** A yes/no question in a native modal dialog (delete a message, withdraw the consent, delete the profile). */
+import { ref } from 'vue'
+import { uid, useModal, useText } from './context'
+import type { CommunityMessageKey } from '@blogmcp/sdk/community'
+import type { TextParams } from '../core/i18n'
+const props = defineProps<{
+  title: CommunityMessageKey
+  explain?: CommunityMessageKey
+  explainParams?: TextParams
+  confirm: CommunityMessageKey
+  cancel?: CommunityMessageKey
+  danger?: boolean
+  busy?: boolean
+  fallbackFocus?: () => HTMLElement | null
+}>()
+const emit = defineEmits<{ confirm: []; cancel: [] }>()
+const { t } = useText()
+const dialog = ref<HTMLDialogElement | null>(null)
+const id = uid('bcm-dialog')
+useModal(dialog, () => emit('cancel'), props.fallbackFocus)
+</script>
+<template>
+  <dialog ref="dialog" class="bcm-dialog" :aria-labelledby="`${id}-title`" :aria-describedby="explain ? `${id}-explain` : undefined">
+    <div class="bcm-dialog-body">
+      <h3 :id="`${id}-title`">{{ t(title) }}</h3>
+      <p v-if="explain" :id="`${id}-explain`">{{ t(explain, explainParams) }}</p>
+      <div class="bcm-row">
+        <span class="bcm-spacer" />
+        <button type="button" class="bcm-btn" :disabled="busy" @click="emit('cancel')">{{ t(cancel ?? 'common.cancel') }}</button>
+        <button type="button" class="bcm-btn bcm-primary" :class="{ 'bcm-danger': danger }" :disabled="busy" @click="emit('confirm')">{{ t(confirm) }}</button>
+      </div>
+    </div>
+  </dialog>
+</template>