@blogmcp/community 0.0.0-stage → 0.2.0

package/dist/vue.js

@@ -0,0 +1,201 @@
+import { defineComponent, ref, onMounted, watch, onBeforeUnmount, h } from "vue";
+function useMount(kind, options, load) {
+  const host = ref(null);
+  let unmount = null;
+  let gone = false;
+  let ticket = 0;
+  async function mount() {
+    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) => typeof v === "function" ? "[fn]" : v),
+    () => void mount()
+  );
+  onBeforeUnmount(() => {
+    gone = true;
+    unmount?.();
+    unmount = null;
+  });
+  return () => h("div", { ref: host, "data-blogmcp-community": kind });
+}
+function defined(o) {
+  const out = {};
+  for (const [k, v] of Object.entries(o)) if (v !== void 0 && v !== null) out[k] = v;
+  return out;
+}
+const KbDiscussion = defineComponent({
+  name: "KbDiscussion",
+  props: {
+    articleId: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object,
+    pollMs: Number,
+    nonce: String,
+    transport: Function,
+    /** M2: `createRealtimeSession` of `@blogmcp/sdk/community/realtime`. */
+    realtime: Function
+  },
+  setup(props) {
+    return useMount(
+      "discussion",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountDiscussion
+    );
+  }
+});
+const KbNoticeForm = defineComponent({
+  name: "KbNoticeForm",
+  props: {
+    target: Object,
+    articleId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    turnstileSiteKey: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "notice-form",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountNoticeForm
+    );
+  }
+});
+const KbMyCommunity = defineComponent({
+  name: "KbMyCommunity",
+  props: {
+    decisionId: String,
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "my-community",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountMyCommunity
+    );
+  }
+});
+const KbNotificationCentre = defineComponent({
+  name: "KbNotificationCentre",
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "notification-centre",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountNotificationCentre
+    );
+  }
+});
+const KbBadge = defineComponent({
+  name: "KbBadge",
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    routes: Object,
+    pollMs: Number,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "badge",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountBadge
+    );
+  }
+});
+const KbMemberSettings = defineComponent({
+  name: "KbMemberSettings",
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    swPath: String,
+    signInHref: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "member-settings",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountMemberSettings
+    );
+  }
+});
+const KbProfile = defineComponent({
+  name: "KbProfile",
+  props: {
+    handle: { type: String, required: true },
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "profile",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountProfile
+    );
+  }
+});
+const KbWelcome = defineComponent({
+  name: "KbWelcome",
+  props: {
+    apiBase: String,
+    siteBase: String,
+    lang: String,
+    signInHref: String,
+    routes: Object,
+    nonce: String,
+    transport: Function
+  },
+  setup(props) {
+    return useMount(
+      "welcome",
+      () => defined({ ...props }),
+      async () => (await import("./chunks/mount-WadUnaTa.js").then((n) => n.J)).mountWelcome
+    );
+  }
+});
+export {
+  KbBadge,
+  KbDiscussion,
+  KbMemberSettings,
+  KbMyCommunity,
+  KbNoticeForm,
+  KbNotificationCentre,
+  KbProfile,
+  KbWelcome
+};

package/package.json

@@ -1,6 +1,82 @@
 {
   "name": "@blogmcp/community",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.2.0",
+  "description": "Community elements for your own site: the discussion under an article, the DSA notice form and the reader's „My community” panel. Custom elements + Vue/React wrappers + a script build, over @blogmcp/sdk/community.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": [
+    "./dist/global.js",
+    "./dist/blogmcp-community.global.js",
+    "./src/global.ts"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./vue": {
+      "types": "./dist/vue.d.ts",
+      "import": "./dist/vue.js"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js"
+    },
+    "./global": "./dist/blogmcp-community.global.js"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "vite build && vite build --config vite.global.config.ts && vue-tsc -p tsconfig.build.json && node scripts/check-size.mjs",
+    "test": "vitest run",
+    "test:e2e": "playwright test --config test/e2e/playwright.config.ts",
+    "typecheck": "vue-tsc --noEmit -p tsconfig.json",
+    "prepack": "node ../../scripts/pack-dist-types.mjs prepack",
+    "postpack": "node ../../scripts/pack-dist-types.mjs postpack"
+  },
+  "dependencies": {
+    "@blogmcp/sanitize": "^0.10.0",
+    "@blogmcp/sdk": "^0.10.0",
+    "vue": "^3.5.0"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.49.0",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-vue": "^6.0.0",
+    "happy-dom": "^17.4.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "typescript": "^5.3.3",
+    "vite": "^7.3.0",
+    "vitest": "^3.0.0",
+    "vue-tsc": "^2.0.0"
+  },
+  "keywords": [
+    "blogmcp",
+    "community",
+    "discussion",
+    "comments",
+    "dsa",
+    "custom-element",
+    "vue",
+    "react"
+  ],
+  "license": "MIT"
+}

package/src/core/attrs.ts

@@ -0,0 +1,186 @@
+/**
+ * What the elements read from their attributes: the host's page routes (`routes`, JSON), the notice form's
+ * target (`target`, JSON, or `article-id`), and the link the discussion gives a reader without a session
+ * to report a message on the host's notice page.
+ *
+ * Every path is the HOST's (m1-contracts.md §10.2: the elements take the host's routes as attributes) and
+ * must be a path on its own site — one leading `/`, never `//` or `/\`, no blank, control character or
+ * backslash; anything else is dropped and the managed blog's default (COMMUNITY_ROUTES) applies.
+ *
+ * The defaults are router-relative (the SDK's COMMUNITY_ROUTES: "the blog prepends its own base"). A site served
+ * under a path — a managed blog under `/blog`, whose host's own `/api/` goes straight to kb-api — names it in
+ * `site-base`, and the defaults (the pages and the api-base) are taken under it; what the host names itself
+ * (`routes`, `api-base`, the tenant's MyState.links) is a full site path already and is used as it is.
+ */
+import { COMMUNITY_ROUTES, type NoticeTarget } from '@blogmcp/sdk/community'
+
+/** The host's community pages, as the `routes` attribute names them (all optional). */
+export interface CommunityRoutes {
+  /** A statement of reasons; `{id}` is the decision's id (`/komunita/rozhodnuti/{id}`). */
+  statementPath?: string
+  /** The „Moje komunita" panel. */
+  myCommunityPath?: string
+  /** The rules page (rendered by the host without JavaScript). */
+  rulesPath?: string
+  /** The notice form. */
+  reportPath?: string
+  /** A notifier's status page (the receipt goes in its fragment). */
+  noticesPath?: string
+  /**
+   * The site's consultation page (drhoubicka's „poradna"): the regulated preset's `report_to_manufacturer` note
+   * becomes a link to it (m1-contracts.md §7.6). No default — without it the note stays text.
+   */
+  consultationPath?: string
+  /**
+   * M2 (m2-contracts.md §3.10): a member's public profile; `{handle}` is the handle (`/komunita/u/{handle}`) — a
+   * template, as statementPath is. A mention in a message links to it.
+   */
+  profilePath?: string
+  /** M2: the member's notification settings (where the digest's unsubscribe link lands with `#u=`). */
+  settingsPath?: string
+  /** M2: the notification centre (the badge links to it). */
+  notificationsPath?: string
+  /** M2: the welcome page after joining. */
+  welcomePath?: string
+  /** M2: the discussions overview. */
+  discussionsPath?: string
+  /**
+   * M2 T10: an article's page; `{slug}` is the article's slug (`/blog/articles/{slug}`, the storefront `/blog/{slug}`)
+   * — a template, as profilePath is. The notification centre links a reply's or a mention's message on it (the
+   * message's anchor in the fragment). No default: without it those rows stay unlinked.
+   */
+  articlePath?: string
+}
+
+const ROUTE_KEYS = [
+  'statementPath',
+  'myCommunityPath',
+  'rulesPath',
+  'reportPath',
+  'noticesPath',
+  'consultationPath',
+  'profilePath',
+  'settingsPath',
+  'notificationsPath',
+  'welcomePath',
+  'discussionsPath',
+  'articlePath',
+] as const
+
+/** A path on the host's own site (the SDK's links.ts rule). */
+export function isSitePath(path: unknown): path is string {
+  return typeof path === 'string' && /^\/(?![/\\])/.test(path) && !/[\s\\\u0000-\u001f\u007f]/.test(path)
+}
+
+type Rec = Record<string, unknown>
+const isRecord = (v: unknown): v is Rec => typeof v === 'object' && v !== null && !Array.isArray(v)
+
+/** A JSON attribute's value (a string), or the object a framework set as the property. */
+function jsonOf(value: unknown): unknown {
+  if (typeof value !== 'string') return value
+  if (value.trim() === '') return null
+  try {
+    return JSON.parse(value) as unknown
+  } catch {
+    return null
+  }
+}
+
+/** The `routes` attribute: the site paths it names; anything malformed is left out. */
+export function parseRoutes(value: unknown): CommunityRoutes {
+  const raw = jsonOf(value)
+  const out: CommunityRoutes = {}
+  if (!isRecord(raw)) return out
+  for (const key of ROUTE_KEYS) if (isSitePath(raw[key])) out[key] = raw[key] as string
+  return out
+}
+
+/**
+ * The `site-base` attribute: the path the site is served under, without a trailing `/` (`/blog`; '' for the root,
+ * also when absent) — or null when it is no plain path (a URL, a query, a dot segment): the element then renders
+ * nothing, as for an absolute api-base.
+ */
+export function siteBaseOf(value: unknown): string | null {
+  if (value === undefined || value === null || value === '') return ''
+  if (typeof value !== 'string') return null
+  const base = value.replace(/\/+$/, '')
+  if (base === '') return value.startsWith('/') ? '' : null
+  return /^(?:\/(?!\.{1,2}(?:\/|$))[A-Za-z0-9._~%-]+)+$/.test(base) ? base : null
+}
+
+/**
+ * The pages with the managed blog's defaults filled in under the site's base (statementPath and profilePath stay
+ * templates; articlePath, a template too, has no default).
+ * A page the host or the tenant names is its own full path.
+ */
+export function routesWithDefaults(
+  routes: CommunityRoutes,
+  tenant?: { statementPath?: string | null; myCommunityPath?: string | null } | null,
+  siteBase = '',
+) {
+  const site = (path: string | null | undefined): string | undefined => (isSitePath(path) ? path : undefined)
+  return {
+    statementPath: routes.statementPath ?? site(tenant?.statementPath) ?? `${siteBase}${COMMUNITY_ROUTES.statement}`,
+    myCommunityPath: routes.myCommunityPath ?? site(tenant?.myCommunityPath) ?? `${siteBase}${COMMUNITY_ROUTES.myCommunity}`,
+    rulesPath: routes.rulesPath ?? `${siteBase}${COMMUNITY_ROUTES.rules}`,
+    reportPath: routes.reportPath ?? `${siteBase}${COMMUNITY_ROUTES.report}`,
+    noticesPath: routes.noticesPath ?? `${siteBase}${COMMUNITY_ROUTES.notices}`,
+    consultationPath: routes.consultationPath ?? null,
+    profilePath: routes.profilePath ?? `${siteBase}${COMMUNITY_ROUTES.profile}`,
+    settingsPath: routes.settingsPath ?? `${siteBase}${COMMUNITY_ROUTES.settings}`,
+    notificationsPath: routes.notificationsPath ?? `${siteBase}${COMMUNITY_ROUTES.notifications}`,
+    welcomePath: routes.welcomePath ?? `${siteBase}${COMMUNITY_ROUTES.welcome}`,
+    discussionsPath: routes.discussionsPath ?? `${siteBase}${COMMUNITY_ROUTES.discussions}`,
+    articlePath: routes.articlePath ?? null,
+  }
+}
+
+const ID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i
+const HANDLE_RE = /^[a-z0-9][a-z0-9_]{2,29}$/
+const isId = (v: unknown): v is string => typeof v === 'string' && ID_RE.test(v)
+const isSeq = (v: unknown): v is number => typeof v === 'number' && Number.isSafeInteger(v) && v > 0
+
+/** A notice target of one of kb-api's four shapes, or null (the form then has nothing to report). */
+export function parseTarget(value: unknown): NoticeTarget | null {
+  const raw = jsonOf(value)
+  if (!isRecord(raw)) return null
+  if ('conversationId' in raw) return isId(raw.conversationId) && isSeq(raw.seq) ? { conversationId: raw.conversationId.toLowerCase(), seq: raw.seq } : null
+  if ('memberId' in raw) return isId(raw.memberId) ? { memberId: raw.memberId.toLowerCase() } : null
+  if ('handle' in raw) return typeof raw.handle === 'string' && HANDLE_RE.test(raw.handle) ? { handle: raw.handle } : null
+  if ('articleId' in raw) return isId(raw.articleId) ? { articleId: raw.articleId.toLowerCase() } : null
+  return null
+}
+
+export type NoticeTargetKind = 'message' | 'profile' | 'article'
+
+export function targetKind(target: NoticeTarget): NoticeTargetKind {
+  if ('conversationId' in target) return 'message'
+  if ('articleId' in target) return 'article'
+  return 'profile'
+}
+
+/**
+ * The notice page's link for a message, for a reader without a session (who cannot use the member's
+ * report): `${reportPath}#c=<conversationId>&s=<seq>`. The ids are public; they travel in the fragment so
+ * the notice page stays one address (no crawlable variants — the storefront's rule for the sign-in link).
+ */
+export function reportLink(reportPath: string, target: { conversationId: string; seq: number }): string | null {
+  if (!isSitePath(reportPath) || reportPath.includes('#') || !isId(target.conversationId) || !isSeq(target.seq)) return null
+  return `${reportPath}#c=${target.conversationId.toLowerCase()}&s=${target.seq}`
+}
+
+/** The target the discussion's report link carries (`#c=…&s=…`), or `#a=<articleId>`; null for anything else. */
+export function targetFromHash(hash: string): NoticeTarget | null {
+  if (typeof hash !== 'string' || !hash.startsWith('#') || hash.startsWith('#t=')) return null
+  const params = new Map<string, string>()
+  for (const part of hash.slice(1).split('&')) {
+    const eq = part.indexOf('=')
+    if (eq > 0) params.set(part.slice(0, eq), part.slice(eq + 1))
+  }
+  const c = params.get('c')
+  const s = params.get('s')
+  if (c !== undefined && s !== undefined && /^\d{1,15}$/.test(s)) return parseTarget({ conversationId: c, seq: Number(s) })
+  const a = params.get('a')
+  if (a !== undefined) return parseTarget({ articleId: a })
+  return null
+}

package/src/core/avatars.ts

@@ -0,0 +1,44 @@
+/**
+ * The avatar presets a member picks from (kb-api stores the id, `^[a-z0-9_]{1,64}$`, and knows no list).
+ * Each is one emoji: a screen reader names it in the reader's own language, so the picker needs no words of
+ * ours. An id this list does not know (a newer element's) shows the name's initial instead.
+ */
+export interface AvatarPreset {
+  readonly id: string
+  readonly emoji: string
+}
+
+export const AVATAR_PRESETS: readonly AvatarPreset[] = Object.freeze([
+  Object.freeze({ id: 'fox', emoji: '🦊' }),
+  Object.freeze({ id: 'owl', emoji: '🦉' }),
+  Object.freeze({ id: 'bear', emoji: '🐻' }),
+  Object.freeze({ id: 'hedgehog', emoji: '🦔' }),
+  Object.freeze({ id: 'frog', emoji: '🐸' }),
+  Object.freeze({ id: 'bee', emoji: '🐝' }),
+  Object.freeze({ id: 'leaf', emoji: '🍃' }),
+  Object.freeze({ id: 'flower', emoji: '🌼' }),
+  Object.freeze({ id: 'tree', emoji: '🌲' }),
+  Object.freeze({ id: 'star', emoji: '⭐' }),
+])
+
+const BY_ID = new Map(AVATAR_PRESETS.map((p) => [p.id, p.emoji]))
+
+/** The preset's emoji, or null for none or an unknown id. */
+export function avatarEmoji(preset: string | null | undefined): string | null {
+  return typeof preset === 'string' ? (BY_ID.get(preset) ?? null) : null
+}
+
+/** The first letter of a name (the avatar of a member without a known preset). */
+export function initialOf(name: string | null | undefined): string {
+  if (typeof name !== 'string') return ''
+  for (const ch of name.trim()) return ch.toLocaleUpperCase()
+  return ''
+}
+
+/** A stable hue for a member id, so the same member keeps the same initial's colour (decoration only). */
+export function hueOf(id: string | null | undefined): number {
+  if (typeof id !== 'string' || id === '') return 210
+  let h = 0
+  for (let i = 0; i < id.length; i++) h = (h * 31 + id.charCodeAt(i)) % 360
+  return h
+}

package/src/core/badge.ts

@@ -0,0 +1,120 @@
+/**
+ * `<blogmcp-badge>`'s brain (m2-contracts.md §3.3, §3.10): the unread count of the member's notifications for a
+ * site's header. `me/get` once (who is viewing, the module's state); then `me/notifications/unread-count` at once
+ * when the page is visible, every `intervalMs` (60 s, never less) while it is visible, and again when it is shown again (`visibilitychange`). A
+ * visitor, a reader who never joined and a module that is `dark` get nothing: no count, no further request.
+ */
+import { reactive } from 'vue'
+import { isKnownModuleState, type CommunityCallOptions, type CommunityClient } from '@blogmcp/sdk/community'
+
+/** The badge's poll (the contract's 60 s). */
+export const BADGE_INTERVAL_MS = 60_000
+/** A count above it reads `99+`. */
+export const BADGE_MAX = 99
+
+export interface BadgeUi {
+  /** `hidden`: nothing to show (a visitor, no member, a dark module, or not decided yet). */
+  phase: 'pending' | 'hidden' | 'shown'
+  count: number
+}
+
+export interface BadgeController {
+  readonly state: BadgeUi
+  start(): Promise<void>
+  /** Read the count now (coalesced with one on its way). */
+  refresh(): Promise<void>
+  dispose(): void
+}
+
+export interface BadgeOptions {
+  client: CommunityClient
+  /**
+   * Default 60 s, and never more often (a smaller value above 0 reads as 60 s: the contract's rate per open tab);
+   * 0 or less = no poll (the count is read once and on visibility).
+   */
+  intervalMs?: number
+  /** Whether the page is visible now (default: document.visibilityState). */
+  visible?: () => boolean
+}
+
+/** The count as the badge shows it. */
+export const badgeText = (count: number): string => (count > BADGE_MAX ? `${BADGE_MAX}+` : String(count))
+
+export function createBadge(o: BadgeOptions): BadgeController {
+  const { client } = o
+  const asked = typeof o.intervalMs === 'number' && Number.isFinite(o.intervalMs) ? o.intervalMs : BADGE_INTERVAL_MS
+  const interval = asked > 0 ? Math.max(asked, BADGE_INTERVAL_MS) : 0
+  // `!== 'hidden'` as the discussion's head poll reads it: a browser without the API (or a prerendered page) counts.
+  const visible = o.visible ?? ((): boolean => typeof document === 'undefined' || document.visibilityState !== 'hidden')
+  const abort = new AbortController()
+  const call: CommunityCallOptions = { signal: abort.signal }
+  const state = reactive<BadgeUi>({ phase: 'pending', count: 0 }) as BadgeUi
+  let disposed = false
+  let active = false
+  let timer: ReturnType<typeof setInterval> | null = null
+  let reading: Promise<void> | null = null
+
+  function stop(): void {
+    active = false
+    if (timer) clearInterval(timer)
+    timer = null
+    if (typeof document !== 'undefined') document.removeEventListener('visibilitychange', onVisibility)
+  }
+
+  function hide(): void {
+    state.phase = 'hidden'
+    state.count = 0
+    stop()
+  }
+
+  function refresh(): Promise<void> {
+    if (disposed || !active) return Promise.resolve()
+    reading ??= (async () => {
+      const r = await client.me.notifications.unreadCount(call)
+      if (disposed || !active) return
+      if (r.ok) {
+        state.count = Math.max(0, Math.floor(r.value.count))
+        state.phase = 'shown'
+        return
+      }
+      // The session ended (signed out elsewhere): nothing to count any more.
+      if (r.code === 'signIn') hide()
+      // Any other failure keeps what the badge shows; the next tick tries again.
+    })().finally(() => {
+      reading = null
+    })
+    return reading
+  }
+
+  function onVisibility(): void {
+    if (visible()) void refresh()
+  }
+
+  return {
+    state,
+    async start() {
+      const me = await client.me.get(call)
+      if (disposed) return
+      const moduleState = me.ok ? me.value.module?.state : undefined
+      // An unknown state reads as dark (the SDK's open enum); a kb-api older than M2 sends none: the badge counts.
+      const dark = moduleState !== undefined && (!isKnownModuleState(moduleState) || moduleState === 'dark')
+      if (!me.ok || me.value.needs.includes('sign_in') || !me.value.member || dark) return hide()
+      active = true
+      if (typeof document !== 'undefined') document.addEventListener('visibilitychange', onVisibility)
+      if (interval > 0) {
+        timer = setInterval(() => {
+          if (visible()) void refresh()
+        }, interval)
+      }
+      // A tab opened in the background asks nothing until it is shown (the visibilitychange listener reads it then).
+      if (visible()) await refresh()
+    },
+    refresh,
+    dispose() {
+      if (disposed) return
+      disposed = true
+      stop()
+      abort.abort()
+    },
+  }
+}