@commonpub/layer 0.5.4 → 0.5.6

package/components/views/ExplainerView.vue

@@ -165,7 +165,18 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 
 <template>
   <!-- Scroll viewer for ExplainerDocument format -->
-  <ScrollViewer v-if="isDocumentFormat && explainerDoc" :document="explainerDoc" />
+  <div v-if="isDocumentFormat && explainerDoc" class="cpub-scroll-viewer-wrap">
+    <ScrollViewer :document="explainerDoc" />
+    <NuxtLink
+      v-if="isOwner"
+      :to="`/${content.type}/${content.slug}/edit`"
+      class="cpub-scroll-edit-btn"
+      title="Edit explainer"
+      aria-label="Edit explainer"
+    >
+      <i class="fa-solid fa-pen"></i>
+    </NuxtLink>
+  </div>
 
   <!-- Block-based viewer fallback -->
   <div v-else class="cpub-explainer-view">
@@ -332,6 +343,30 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 </template>
 
 <style scoped>
+/* ── SCROLL VIEWER WRAPPER + EDIT BUTTON ── */
+.cpub-scroll-viewer-wrap { position: relative; }
+.cpub-scroll-edit-btn {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface, #1a1a1a);
+  border: 1px solid var(--border, #333);
+  color: var(--text-dim, #999);
+  font-size: 14px;
+  text-decoration: none;
+  z-index: 100;
+  transition: background 0.15s, color 0.15s;
+}
+.cpub-scroll-edit-btn:hover {
+  background: var(--accent-bg, #1a2a4a);
+  color: var(--accent, #5b9cf6);
+}
+
 /* ── PROGRESS BAR ── */
 .cpub-progress-line {
   position: fixed;

package/nuxt.config.ts

@@ -47,6 +47,11 @@ export default defineNuxtConfig({
     uiTheme('layouts.css'),
     uiTheme('forms.css'),
     uiTheme('editor-panels.css'),
+    // Explainer theme presets only (NOT base.css — it overrides site design system vars)
+    '@commonpub/explainer/vue/theme/dark-industrial.css',
+    '@commonpub/explainer/vue/theme/punk-zine.css',
+    '@commonpub/explainer/vue/theme/paper-teal.css',
+    '@commonpub/explainer/vue/theme/clean-light.css',
   ],
   runtimeConfig: {
     databaseUrl: '',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.5.0",
-    "@commonpub/config": "0.8.0",
+    "@commonpub/explainer": "0.7.0",
     "@commonpub/docs": "0.6.0",
+    "@commonpub/config": "0.8.0",
+    "@commonpub/auth": "0.5.0",
     "@commonpub/editor": "0.5.0",
-    "@commonpub/explainer": "0.6.4",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.8.17",
     "@commonpub/protocol": "0.9.6",
-    "@commonpub/server": "2.24.1",
-    "@commonpub/ui": "0.8.4"
+    "@commonpub/schema": "0.8.17",
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/ui": "0.8.4",
+    "@commonpub/server": "2.25.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/[type]/[slug]/edit.vue

@@ -386,7 +386,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
       <div class="cpub-mode-tabs">
         <button :class="['cpub-mode-tab', { active: mode === 'write' }]" @click="mode = 'write'">Write</button>
         <button :class="['cpub-mode-tab', { active: mode === 'preview' }]" @click="enterPreview">Preview</button>
-        <button :class="['cpub-mode-tab', { active: mode === 'code' }]" @click="mode = 'code'">Code</button>
+        <button v-if="!isExplainer" :class="['cpub-mode-tab', { active: mode === 'code' }]" @click="mode = 'code'">Code</button>
       </div>
       <div class="cpub-topbar-spacer" />
       <div class="cpub-topbar-actions">
@@ -466,7 +466,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
             slug: (metadata.slug as string) || 'preview',
             subtitle: null,
             description: (metadata.description as string) || null,
-            content: blockEditor.toBlockTuples(),
+            content: isExplainer ? (explainerDocLatest ?? explainerDocInit) : blockEditor.toBlockTuples(),
             coverImageUrl: (metadata.coverImageUrl as string) || null,
             category: null,
             difficulty: (metadata.difficulty as string) || null,
@@ -778,7 +778,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
   inset: 0;
   z-index: 9999;
   background: var(--bg);
-  overflow: hidden;
+  overflow-y: auto;
 }
 
 .cpub-preview-close-btn {

package/pages/authorize_interaction.vue

@@ -0,0 +1,188 @@
+<script setup lang="ts">
+/**
+ * /authorize_interaction — Standard ActivityPub remote interaction endpoint.
+ * When a user on another instance wants to follow/interact with content on this instance,
+ * their instance redirects them here with ?uri=<actor-or-object-uri>.
+ *
+ * If logged in: show the resource and offer to follow/interact.
+ * If not logged in: redirect to login first, then back here.
+ */
+const route = useRoute();
+const uri = computed(() => (route.query.uri as string) || '');
+
+const { isAuthenticated } = useAuth();
+const toast = useToast();
+
+const loading = ref(false);
+const resolved = ref<{ type: string; name: string; url: string } | null>(null);
+const error = ref('');
+const actionDone = ref(false);
+
+onMounted(async () => {
+  if (!uri.value) {
+    error.value = 'No URI provided.';
+    return;
+  }
+
+  if (!isAuthenticated.value) {
+    // Redirect to login, then back here
+    navigateTo(`/auth/login?redirect=${encodeURIComponent(route.fullPath)}`);
+    return;
+  }
+
+  // Try to resolve what the URI points to
+  loading.value = true;
+  try {
+    // Check if it's a hub actor URI
+    const result = await $fetch<{ type: string; name: string; url: string }>('/api/federation/resolve-uri', {
+      method: 'POST',
+      body: { uri: uri.value },
+    }).catch(() => null);
+
+    if (result) {
+      resolved.value = result;
+    } else {
+      // Fallback: just show the URI and offer to open it
+      resolved.value = { type: 'unknown', name: uri.value, url: uri.value };
+    }
+  } catch {
+    error.value = 'Could not resolve the remote resource.';
+  } finally {
+    loading.value = false;
+  }
+});
+
+async function handleFollow(): Promise<void> {
+  if (!uri.value) return;
+  loading.value = true;
+  try {
+    // Try to follow as a remote actor (user or hub)
+    await $fetch('/api/federation/remote-follow', {
+      method: 'POST',
+      body: { uri: uri.value },
+    });
+    actionDone.value = true;
+    toast.success('Follow request sent');
+  } catch {
+    toast.error('Failed to send follow request');
+  } finally {
+    loading.value = false;
+  }
+}
+
+useSeoMeta({
+  title: 'Authorize Interaction',
+  robots: 'noindex',
+});
+</script>
+
+<template>
+  <div class="cpub-authorize-page">
+    <div class="cpub-authorize-card">
+      <h1 class="cpub-authorize-title">Authorize Interaction</h1>
+
+      <div v-if="loading" class="cpub-authorize-loading">
+        <i class="fa-solid fa-spinner fa-spin"></i> Resolving...
+      </div>
+
+      <div v-else-if="error" class="cpub-authorize-error">
+        <i class="fa-solid fa-triangle-exclamation"></i> {{ error }}
+      </div>
+
+      <div v-else-if="resolved" class="cpub-authorize-content">
+        <p class="cpub-authorize-desc">
+          You are about to interact with a remote resource:
+        </p>
+        <div class="cpub-authorize-resource">
+          <strong>{{ resolved.name }}</strong>
+          <span v-if="resolved.type !== 'unknown'" class="cpub-authorize-type">{{ resolved.type }}</span>
+        </div>
+        <code class="cpub-authorize-uri">{{ uri }}</code>
+
+        <div v-if="actionDone" class="cpub-authorize-success">
+          <i class="fa-solid fa-check"></i> Follow request sent successfully.
+        </div>
+        <div v-else class="cpub-authorize-actions">
+          <button class="cpub-btn cpub-btn-primary" :disabled="loading" @click="handleFollow">
+            <i class="fa-solid fa-user-plus"></i> Follow
+          </button>
+          <a :href="uri" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
+            <i class="fa-solid fa-arrow-up-right-from-square"></i> View Original
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-authorize-page {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 60px 16px;
+  min-height: 60vh;
+}
+.cpub-authorize-card {
+  max-width: 520px;
+  width: 100%;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 32px;
+}
+.cpub-authorize-title {
+  font-size: 18px;
+  font-weight: 700;
+  margin-bottom: 20px;
+}
+.cpub-authorize-loading {
+  color: var(--text-dim);
+  font-size: 14px;
+}
+.cpub-authorize-error {
+  color: var(--red, #ef4444);
+  font-size: 14px;
+}
+.cpub-authorize-desc {
+  font-size: 13px;
+  color: var(--text-dim);
+  margin-bottom: 16px;
+}
+.cpub-authorize-resource {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.cpub-authorize-resource strong {
+  font-size: 15px;
+}
+.cpub-authorize-type {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--accent);
+  background: var(--accent-bg);
+  padding: 2px 6px;
+}
+.cpub-authorize-uri {
+  display: block;
+  font-size: 11px;
+  color: var(--text-faint);
+  word-break: break-all;
+  margin-bottom: 20px;
+  padding: 8px;
+  background: var(--surface2);
+  border: 1px solid var(--border);
+}
+.cpub-authorize-success {
+  color: var(--green, #22c55e);
+  font-size: 14px;
+  font-weight: 600;
+}
+.cpub-authorize-actions {
+  display: flex;
+  gap: 8px;
+}
+</style>

package/pages/docs/[siteSlug]/[...pagePath].vue

@@ -9,9 +9,17 @@ const pagePath = computed(() => {
   return Array.isArray(p) ? p[p.length - 1] : p;
 });
 
+const selectedVersion = ref('');
+
 const { data: site } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/nav`);
-const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/nav`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
 
 // Fetch the rendered page (server-side markdown rendering or block content)
 interface RenderedPage {
@@ -37,7 +45,10 @@ const blockContent = computed<BlockTuple[]>(() => {
 });
 
 const { data: renderedPage, pending: pagePending, error: pageError, refresh: refreshPage } = useLazyFetch<RenderedPage>(
-  () => `/api/docs/${siteSlug.value}/pages/${pagePath.value}`,
+  () => {
+    const base = `/api/docs/${siteSlug.value}/pages/${pagePath.value}`;
+    return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+  },
   { key: `doc-page-${siteSlug.value}-${pagePath.value}` },
 );
 
@@ -178,15 +189,20 @@ watch(searchQuery, (q) => {
   searchTimeout = setTimeout(handleSearch, 300);
 });
 
-// Version switching
-const selectedVersion = ref('');
+// Version switching — initialize from site data
 watch(site, (s) => {
   if (s?.versions?.length) {
     const def = s.versions.find((v: { isDefault: boolean }) => v.isDefault) ?? s.versions[0];
-    if (def) selectedVersion.value = def.version;
+    if (def && !selectedVersion.value) selectedVersion.value = def.version;
   }
 }, { immediate: true });
 
+// Reload page content and nav when version changes
+watch(selectedVersion, () => {
+  refreshNav();
+  refreshPage();
+});
+
 // Mobile sidebar
 const sidebarOpen = ref(false);
 

package/pages/docs/[siteSlug]/edit.vue

@@ -10,8 +10,26 @@ const siteSlug = computed(() => route.params.siteSlug as string);
 const { show: toast } = useToast();
 
 // ═══ DATA FETCHING ═══
-const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name: string; slug: string; description: string; ownerId: string }>(() => `/api/docs/${siteSlug.value}`);
-const { data: rawPages, refresh: refreshPages } = await useFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null; content: string | BlockTuple[] | null; format?: string }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions?: Array<{ id: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
+
+// Version selector
+const selectedVersion = ref('');
+watch(site, (s) => {
+  if (s?.versions?.length && !selectedVersion.value) {
+    const def = s.versions.find((v) => v.isDefault) ?? s.versions[0];
+    if (def) selectedVersion.value = def.version;
+  }
+}, { immediate: true });
+
+const { data: rawPages, refresh: refreshPages } = await useFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null; content: string | BlockTuple[] | null; format?: string }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+
+watch(selectedVersion, () => {
+  selectedPageId.value = null;
+  refreshPages();
+});
 
 useSeoMeta({ title: () => `Edit ${site.value?.name ?? 'Docs'} — ${useSiteName()}` });
 
@@ -478,6 +496,13 @@ async function createVersion(): Promise<void> {
           <span class="cpub-docs-left-label">Pages</span>
           <span class="cpub-docs-page-count">{{ pages.length }}</span>
         </div>
+        <div v-if="site?.versions && site.versions.length > 1" class="cpub-docs-version-select">
+          <select v-model="selectedVersion" class="cpub-docs-version-dropdown" aria-label="Select version">
+            <option v-for="v in site.versions" :key="v.id" :value="v.version">
+              {{ v.version }}{{ v.isDefault ? ' (latest)' : '' }}
+            </option>
+          </select>
+        </div>
         <EditorsDocsPageTree
           :pages="treePages"
           :selected-page-id="selectedPageId"
@@ -794,6 +819,20 @@ async function createVersion(): Promise<void> {
   color: var(--text-faint);
 }
 
+.cpub-docs-version-select {
+  padding: 4px 0 6px;
+}
+.cpub-docs-version-dropdown {
+  width: 100%;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 6px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text);
+  cursor: pointer;
+}
+
 .cpub-docs-page-count {
   font-family: var(--font-mono);
   font-size: 9px;

package/pages/docs/[siteSlug]/index.vue

@@ -2,9 +2,17 @@
 const route = useRoute();
 const siteSlug = computed(() => route.params.siteSlug as string);
 
+const selectedVersion = ref('');
+
 const { data: site, pending: sitePending, error: siteError, refresh: refreshSite } = useLazyFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions: Array<{ id: string; label: string; slug: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
-const { data: nav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/nav`);
-const { data: pages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => `/api/docs/${siteSlug.value}/pages`);
+const { data: nav, refresh: refreshNav } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/nav`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
+const { data: pages, refresh: refreshPages } = useLazyFetch<Array<{ id: string; title: string; slug: string; sortOrder: number; parentId: string | null }>>(() => {
+  const base = `/api/docs/${siteSlug.value}/pages`;
+  return selectedVersion.value ? `${base}?version=${encodeURIComponent(selectedVersion.value)}` : base;
+});
 
 const { user } = useAuth();
 const isOwner = computed(() => site.value && user.value && site.value.ownerId === user.value.id);
@@ -44,15 +52,19 @@ function toggleSection(id: string): void {
   else expandedSections.value.add(id);
 }
 
-// Version selector
-const selectedVersion = ref('');
+// Version selector — initialize from site data, refresh nav on change
 watch(site, (s) => {
   if (s?.versions?.length) {
     const def = s.versions.find((v: { isDefault: boolean }) => v.isDefault) ?? s.versions[0];
-    if (def) selectedVersion.value = def.version;
+    if (def && !selectedVersion.value) selectedVersion.value = def.version;
   }
 }, { immediate: true });
 
+watch(selectedVersion, () => {
+  refreshNav();
+  refreshPages();
+});
+
 // Search
 const searchQuery = ref('');
 const searchOpen = ref(false);

package/pages/federated-hubs/[id]/index.vue

@@ -206,6 +206,33 @@ async function handleDiscPost(): Promise<void> {
 const mirrorStatus = computed(() => hub.value?.followStatus ?? 'pending');
 
 const remoteFollowRef = ref<{ show: () => void } | null>(null);
+const hubFollowing = ref(false);
+const hubFollowStatus = ref('');
+
+/** Follow the hub — if logged in, call API directly; otherwise show the remote follow modal */
+async function handleJoinHub(): Promise<void> {
+  if (isAuthenticated.value && hub.value) {
+    // Logged-in user: call the hub-follow API directly
+    hubFollowing.value = true;
+    try {
+      const result = await $fetch<{ success: boolean; status: string }>('/api/federation/hub-follow', {
+        method: 'POST',
+        body: { federatedHubId: hub.value.id },
+      });
+      hubFollowStatus.value = result.status;
+      toast.success(result.status === 'accepted' ? 'Now following this hub' : 'Follow request sent');
+      await refreshHub();
+    } catch (err: unknown) {
+      const msg = err instanceof Error ? err.message : 'Failed to follow hub';
+      toast.error(msg);
+    } finally {
+      hubFollowing.value = false;
+    }
+  } else {
+    // Not logged in: show the remote follow modal
+    remoteFollowRef.value?.show();
+  }
+}
 
 // --- Like state tracking ---
 const likedPostIds = ref<Set<string>>(new Set());
@@ -272,8 +299,8 @@ async function handlePostVote(postId: string): Promise<void> {
           <span v-if="mirrorStatus === 'accepted'" class="cpub-member-badge cpub-member-badge-mirrored">
             <i class="fa-solid fa-globe"></i> Mirrored
           </span>
-          <button v-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" @click="remoteFollowRef?.show()">
-            <i class="fa-solid fa-user-plus"></i> Join from your instance
+          <button v-if="hub?.actorUri" class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="hubFollowing" @click="handleJoinHub">
+            <i class="fa-solid fa-user-plus"></i> {{ hubFollowing ? 'Following...' : 'Join from your instance' }}
           </button>
           <a v-if="hub?.url" :href="hub.url" target="_blank" rel="noopener noreferrer" class="cpub-btn cpub-btn-sm">
             <i class="fa-solid fa-arrow-up-right-from-square"></i> Visit original

package/server/api/federation/remote-follow.post.ts

@@ -0,0 +1,27 @@
+import { sendFollow, resolveRemoteActor } from '@commonpub/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  uri: z.string().url(),
+});
+
+/**
+ * Follow a remote actor by URI. Used by /authorize_interaction.
+ * Resolves the actor, then sends an AP Follow activity.
+ */
+export default defineEventHandler(async (event): Promise<{ success: boolean }> => {
+  requireFeature('federation');
+  const user = requireAuth(event);
+  const db = useDB();
+  const config = useConfig();
+  const { uri } = await parseBody(event, schema);
+
+  // Resolve actor to ensure it's cached
+  const actor = await resolveRemoteActor(db, uri);
+  if (!actor) {
+    throw createError({ statusCode: 404, statusMessage: 'Could not resolve remote actor' });
+  }
+
+  await sendFollow(db, user.id, uri, config.instance.domain);
+  return { success: true };
+});

package/server/api/federation/resolve-uri.post.ts

@@ -0,0 +1,32 @@
+import { resolveRemoteActor } from '@commonpub/server';
+import { z } from 'zod';
+
+const schema = z.object({
+  uri: z.string().url(),
+});
+
+/**
+ * Resolve a remote AP URI to a displayable resource.
+ * Used by /authorize_interaction to show what the user is about to follow.
+ */
+export default defineEventHandler(async (event): Promise<{ type: string; name: string; url: string }> => {
+  requireFeature('federation');
+  requireAuth(event);
+  const db = useDB();
+  const { uri } = await parseBody(event, schema);
+
+  const actor = await resolveRemoteActor(db, uri);
+  if (actor) {
+    const actorType = (actor as Record<string, unknown>).type as string || 'Person';
+    const name = (actor as Record<string, unknown>).name as string
+      || (actor as Record<string, unknown>).preferredUsername as string
+      || uri;
+    return {
+      type: actorType === 'Group' ? 'Hub' : actorType,
+      name,
+      url: uri,
+    };
+  }
+
+  return { type: 'unknown', name: uri, url: uri };
+});

package/server/api/social/comments.post.ts

@@ -1,11 +1,22 @@
-import { createComment } from '@commonpub/server';
+import { createComment, onContentCommented } from '@commonpub/server';
 import type { CommentItem } from '@commonpub/server';
 import { createCommentSchema } from '@commonpub/schema';
 
+/** Content types that should federate comments */
+const FEDERABLE_COMMENT_TYPES = new Set(['project', 'article', 'blog', 'explainer']);
+
 export default defineEventHandler(async (event): Promise<CommentItem> => {
   const user = requireAuth(event);
   const db = useDB();
+  const config = useConfig();
   const input = await parseBody(event, createCommentSchema);
 
-  return createComment(db, user.id, input);
+  const comment = await createComment(db, user.id, input);
+
+  // Federate comment on content items (non-blocking)
+  if (FEDERABLE_COMMENT_TYPES.has(input.targetType)) {
+    onContentCommented(db, comment.id, user.id, input.targetType, input.targetId, config).catch(() => {});
+  }
+
+  return comment;
 });