@commonpub/layer 0.7.1 → 0.7.3

package/components/editors/ArticleEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -201,7 +200,7 @@ const canvasMaxWidth = computed(() => {
 
       <!-- Modules tab -->
       <div v-if="activeLeftTab === 'modules'" class="cpub-ae-left-body">
-        <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+        <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
       </div>
 
       <!-- Structure tab -->
@@ -267,7 +266,7 @@ const canvasMaxWidth = computed(() => {
       <!-- Scrollable canvas -->
       <div class="cpub-ae-canvas">
         <div class="cpub-ae-canvas-inner" :style="{ maxWidth: canvasMaxWidth }">
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -297,7 +296,7 @@ const canvasMaxWidth = computed(() => {
       </div>
       <div class="cpub-ae-right-body">
         <!-- Content / Metadata -->
-        <EditorsEditorSection title="Content" icon="fa-pen-nib" :open="openSections.content" @toggle="toggleSection('content')">
+        <EditorSection title="Content" icon="fa-pen-nib" :open="openSections.content" @toggle="toggleSection('content')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -331,22 +330,22 @@ const canvasMaxWidth = computed(() => {
               </div>
             </template>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- SEO -->
-        <EditorsEditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Meta Description</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description..." @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Publishing -->
-        <EditorsEditorSection title="Publishing" icon="fa-rocket" :open="openSections.publishing" @toggle="toggleSection('publishing')">
+        <EditorSection title="Publishing" icon="fa-rocket" :open="openSections.publishing" @toggle="toggleSection('publishing')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Visibility</label>
-            <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+            <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Category</label>
@@ -362,9 +361,9 @@ const canvasMaxWidth = computed(() => {
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/BlogEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -149,7 +148,7 @@ const canvasMaxWidth = computed(() => {
 
     <!-- LEFT: Block Library -->
     <aside class="cpub-be-library" :class="{ 'cpub-be-sidebar-open': mobileLeftOpen }" aria-label="Block library">
-      <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+      <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
     </aside>
 
     <!-- CENTER: Canvas with toolbar, cover, title, subtitle, byline, blocks -->
@@ -231,7 +230,7 @@ const canvasMaxWidth = computed(() => {
         </div>
 
         <!-- Block editor canvas -->
-        <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+        <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
       </div>
 
       <!-- Word count bar -->
@@ -247,7 +246,7 @@ const canvasMaxWidth = computed(() => {
     <aside class="cpub-be-right" :class="{ 'cpub-be-sidebar-open': mobileRightOpen }" aria-label="Blog properties">
       <div class="cpub-be-right-body">
         <!-- Meta -->
-        <EditorsEditorSection title="Meta" icon="fa-tag" :open="openSections.meta" @toggle="toggleSection('meta')">
+        <EditorSection title="Meta" icon="fa-tag" :open="openSections.meta" @toggle="toggleSection('meta')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input cpub-ep-input-mono" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -266,21 +265,21 @@ const canvasMaxWidth = computed(() => {
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Excerpt / Description -->
-        <EditorsEditorSection title="Excerpt" icon="fa-align-left" :open="openSections.excerpt" @toggle="toggleSection('excerpt')">
+        <EditorSection title="Excerpt" icon="fa-align-left" :open="openSections.excerpt" @toggle="toggleSection('excerpt')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Custom Excerpt</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="(metadata.description as string) || ''" placeholder="Short description shown in feed previews..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.description as string) || '').length }} / 300</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- SEO Preview -->
-        <EditorsEditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO Preview" icon="fa-brands fa-google" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-be-seo-card">
             <div class="cpub-be-seo-url">
               <span class="cpub-be-seo-favicon">C</span>
@@ -294,13 +293,13 @@ const canvasMaxWidth = computed(() => {
             <textarea class="cpub-ep-textarea" rows="3" :value="(metadata.seoDescription as string) || ''" placeholder="Search engine description..." @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-ep-hint cpub-ep-hint-right">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Publishing -->
-        <EditorsEditorSection title="Publishing" icon="fa-globe" :open="openSections.publishing" @toggle="toggleSection('publishing')">
+        <EditorSection title="Publishing" icon="fa-globe" :open="openSections.publishing" @toggle="toggleSection('publishing')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Visibility</label>
-            <EditorsEditorVisibility :model-value="(metadata.visibility as string) || 'public'" @update:model-value="(v: string) => updateMeta('visibility', v)" />
+            <EditorVisibility :model-value="(metadata.visibility as string) || 'public'" @update:model-value="(v: string) => updateMeta('visibility', v)" />
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-be-schedule-row">
@@ -319,10 +318,10 @@ const canvasMaxWidth = computed(() => {
             <label class="cpub-ep-flabel">Series <span class="cpub-ep-optional">(optional)</span></label>
             <input class="cpub-ep-input" type="text" :value="metadata.series" placeholder="e.g. Home Lab Chronicles" @input="updateMeta('series', ($event.target as HTMLInputElement).value)">
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Author -->
-        <EditorsEditorSection title="Author" icon="fa-user" :open="openSections.author" @toggle="toggleSection('author')">
+        <EditorSection title="Author" icon="fa-user" :open="openSections.author" @toggle="toggleSection('author')">
           <div class="cpub-be-author-row">
             <div class="cpub-be-author-av">{{ authorInitials }}</div>
             <div class="cpub-be-author-info">
@@ -331,10 +330,10 @@ const canvasMaxWidth = computed(() => {
             </div>
             <span class="cpub-be-author-badge">You</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
         <!-- Social -->
-        <EditorsEditorSection title="Social" icon="fa-share-nodes" :open="openSections.social" @toggle="toggleSection('social')">
+        <EditorSection title="Social" icon="fa-share-nodes" :open="openSections.social" @toggle="toggleSection('social')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Open Graph Image</label>
             <div class="cpub-be-og-thumb">
@@ -344,7 +343,7 @@ const canvasMaxWidth = computed(() => {
               </div>
             </div>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/ExplainerEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -203,7 +202,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
       </div>
 
       <div v-if="activeLeftTab === 'modules'" class="cpub-ee-left-body">
-        <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+        <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
       </div>
 
       <div v-else-if="activeLeftTab === 'structure'" class="cpub-ee-left-body" style="padding: 10px;">
@@ -299,7 +298,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 
       <div class="cpub-ee-canvas">
         <div class="cpub-ee-canvas-inner" :style="{ maxWidth: canvasMaxWidth }">
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -318,7 +317,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
     <!-- RIGHT: Properties -->
     <aside class="cpub-ee-right" :class="{ 'cpub-ee-sidebar-open': mobileRightOpen }" aria-label="Explainer properties">
       <div class="cpub-ee-right-body">
-        <EditorsEditorSection title="Content" icon="fa-sliders" :open="openSections.section" @toggle="toggleSection('section')">
+        <EditorSection title="Content" icon="fa-sliders" :open="openSections.section" @toggle="toggleSection('section')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="auto-generated" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -333,27 +332,27 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           </div>
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Tags</label>
-            <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+            <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Difficulty" icon="fa-gauge-high" :open="openSections.difficulty" @toggle="toggleSection('difficulty')">
+        <EditorSection title="Difficulty" icon="fa-gauge-high" :open="openSections.difficulty" @toggle="toggleSection('difficulty')">
           <select class="cpub-ep-select" :value="metadata.difficulty || 'beginner'" @change="updateMeta('difficulty', ($event.target as HTMLSelectElement).value)">
             <option value="beginner">Beginner</option>
             <option value="intermediate">Intermediate</option>
             <option value="advanced">Advanced</option>
           </select>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
-          <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
+          <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
+        <EditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
           <div class="cpub-ep-field">
             <input class="cpub-ep-input" type="url" :value="metadata.coverImageUrl" placeholder="https://..." @input="updateMeta('coverImageUrl', ($event.target as HTMLInputElement).value)">
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/components/editors/ProjectEditor.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
-import type { BlockEditor } from '../../composables/useBlockEditor';
-import type { BlockTypeGroup } from './BlockPicker.vue';
+import { BlockCanvas, EditorBlocks, EditorSection, EditorTagInput, EditorVisibility, type BlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 
 const props = defineProps<{
   blockEditor: BlockEditor;
@@ -151,7 +150,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 
     <!-- LEFT: Block Library -->
     <aside class="cpub-pe-library" :class="{ 'cpub-pe-sidebar-open': mobileLeftOpen }" aria-label="Block library">
-      <EditorsEditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
+      <EditorBlocks :groups="blockTypes" :block-editor="blockEditor" />
     </aside>
 
     <!-- CENTER: Canvas with toolbar -->
@@ -202,7 +201,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
             placeholder="Project title..."
           />
 
-          <EditorsBlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -217,7 +216,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
     <!-- RIGHT: Settings Panel -->
     <aside class="cpub-pe-settings" :class="{ 'cpub-pe-sidebar-open': mobileRightOpen }" aria-label="Project settings">
       <div class="cpub-pe-settings-body">
-        <EditorsEditorSection title="Project Meta" icon="fa-sliders" :open="openSections.meta" @toggle="toggleSection('meta')">
+        <EditorSection title="Project Meta" icon="fa-sliders" :open="openSections.meta" @toggle="toggleSection('meta')">
           <div class="cpub-ep-field">
             <label class="cpub-ep-flabel">Slug</label>
             <input class="cpub-ep-input" type="text" :value="metadata.slug" placeholder="project-url-slug" @input="updateMeta('slug', ($event.target as HTMLInputElement).value)">
@@ -246,17 +245,17 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
             <label class="cpub-ep-flabel">Description</label>
             <textarea class="cpub-ep-textarea" rows="3" :value="metadata.description as string" placeholder="Brief project description..." @input="updateMeta('description', ($event.target as HTMLTextAreaElement).value)" />
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Tags" icon="fa-tag" :open="openSections.tags" @toggle="toggleSection('tags')">
-          <EditorsEditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Tags" icon="fa-tag" :open="openSections.tags" @toggle="toggleSection('tags')">
+          <EditorTagInput :tags="tags" @update:tags="onTagsUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
-          <EditorsEditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
-        </EditorsEditorSection>
+        <EditorSection title="Visibility" icon="fa-eye" :open="openSections.visibility" @toggle="toggleSection('visibility')">
+          <EditorVisibility :model-value="visibility" @update:model-value="onVisibilityUpdate" />
+        </EditorSection>
 
-        <EditorsEditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
+        <EditorSection title="Cover Image" icon="fa-image" :open="openSections.cover" @toggle="toggleSection('cover')">
           <div class="cpub-pe-cover" :class="{ 'has-image': !!coverImageUrl }">
             <template v-if="coverImageUrl">
               <img :src="coverImageUrl" alt="Cover image" class="cpub-pe-cover-img" />
@@ -282,17 +281,17 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
               </div>
             </template>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
+        <EditorSection title="SEO" icon="fa-magnifying-glass" :open="openSections.seo" @toggle="toggleSection('seo')">
           <div class="cpub-pe-field">
             <label class="cpub-pe-flabel">Meta Description</label>
             <textarea class="cpub-pe-textarea" rows="3" :value="metadata.seoDescription as string" placeholder="Search engine description (recommended 50-160 chars)" @input="updateMeta('seoDescription', ($event.target as HTMLTextAreaElement).value)" />
             <span class="cpub-pe-hint">{{ ((metadata.seoDescription as string) || '').length }}/160</span>
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
 
-        <EditorsEditorSection title="Checklist" icon="fa-circle-check" :open="openSections.checklist" @toggle="toggleSection('checklist')">
+        <EditorSection title="Checklist" icon="fa-circle-check" :open="openSections.checklist" @toggle="toggleSection('checklist')">
           <div class="cpub-pe-checklist">
             <div v-for="item in checklist" :key="item.label" class="cpub-pe-check-item" :class="{ pass: item.pass }">
               <i :class="item.pass ? 'fa-regular fa-square-check' : 'fa-regular fa-square'" :style="{ color: item.pass ? 'var(--green)' : 'var(--text-faint)' }"></i>
@@ -302,7 +301,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
           <div class="cpub-pe-checklist-summary">
             {{ checklistDone }}/{{ checklist.length }} complete
           </div>
-        </EditorsEditorSection>
+        </EditorSection>
       </div>
     </aside>
   </div>

package/composables/useMarkdownImport.ts

@@ -3,7 +3,7 @@
  */
 import { markdownToBlockTuples } from '@commonpub/editor';
 import type { BlockTuple } from '@commonpub/editor';
-import type { BlockEditor } from './useBlockEditor';
+import type { BlockEditor } from '@commonpub/editor/vue';
 
 export function useMarkdownImport(blockEditor: BlockEditor) {
   const importing = ref(false);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.1",
+  "version": "0.7.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -52,14 +52,14 @@
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
     "@commonpub/config": "0.8.0",
-    "@commonpub/editor": "0.5.0",
-    "@commonpub/learning": "0.5.0",
     "@commonpub/docs": "0.6.1",
-    "@commonpub/schema": "0.9.1",
-    "@commonpub/ui": "0.8.4",
-    "@commonpub/explainer": "0.7.2",
-    "@commonpub/server": "2.27.1",
-    "@commonpub/protocol": "0.9.7"
+    "@commonpub/explainer": "0.7.3",
+    "@commonpub/editor": "0.6.0",
+    "@commonpub/learning": "0.5.0",
+    "@commonpub/protocol": "0.9.7",
+    "@commonpub/schema": "0.9.2",
+    "@commonpub/server": "2.27.2",
+    "@commonpub/ui": "0.8.4"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { BlockTuple } from '@commonpub/editor';
-import type { BlockTypeGroup } from '../../../components/editors/BlockPicker.vue';
+import { BlockCanvas, EditorShell, useBlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
 import type { PageTreeItem } from '../../../components/editors/DocsPageTree.vue';
 
 definePageMeta({ layout: false, middleware: 'auth' });
@@ -489,7 +489,7 @@ async function createVersion(): Promise<void> {
     </div>
 
     <!-- 3-panel editor -->
-    <EditorsEditorShell :show-left-sidebar="true" :show-right-sidebar="!!selectedPageId">
+    <EditorShell :show-left-sidebar="true" :show-right-sidebar="!!selectedPageId">
       <!-- LEFT: Page tree -->
       <template #left>
         <div class="cpub-docs-left-header">
@@ -543,7 +543,7 @@ async function createVersion(): Promise<void> {
           </div>
 
           <!-- Block canvas -->
-          <EditorsBlockCanvas
+          <BlockCanvas
             :block-editor="blockEditor"
             :block-types="blockTypes"
           />
@@ -649,7 +649,7 @@ async function createVersion(): Promise<void> {
           </span>
         </span>
       </template>
-    </EditorsEditorShell>
+    </EditorShell>
 
     <!-- Markdown import dialog -->
     <EditorsMarkdownImportDialog

package/pages/federated-hubs/[id]/posts/[postId].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { FederatedHubListItem, FederatedHubPostItem } from '@commonpub/server';
+import type { FederatedHubListItem, FederatedHubPostItem, FederatedHubPostReplyItem } from '@commonpub/server';
 
 const route = useRoute();
 const id = route.params.id as string;
@@ -10,6 +10,9 @@ const toast = useToast();
 
 const { data: hub } = useLazyFetch<FederatedHubListItem>(`/api/federated-hubs/${id}`);
 const { data: post, refresh: refreshPost } = useLazyFetch<FederatedHubPostItem>(`/api/federated-hubs/${id}/posts/${postId}`);
+const { data: repliesData, refresh: refreshReplies } = useLazyFetch<{ items: FederatedHubPostReplyItem[]; total: number }>(`/api/federated-hubs/${id}/posts/${postId}/replies`, { default: () => ({ items: [], total: 0 }) });
+
+const replies = computed(() => repliesData.value?.items ?? []);
 
 function formatDate(d: string | Date | null): string {
   if (!d) return '';
@@ -68,6 +71,7 @@ async function handleLike(): Promise<void> {
 // Reply
 const replyContent = ref('');
 const replying = ref(false);
+const replyingTo = ref<string | null>(null);
 
 async function handleReply(): Promise<void> {
   if (!replyContent.value.trim()) return;
@@ -75,11 +79,12 @@ async function handleReply(): Promise<void> {
   try {
     await $fetch('/api/federation/hub-post-reply' as string, {
       method: 'POST',
-      body: { federatedHubPostId: postId, content: replyContent.value },
+      body: { federatedHubPostId: postId, content: replyContent.value, parentId: replyingTo.value || undefined },
     });
     replyContent.value = '';
-    toast.success('Reply sent via federation');
-    await refreshPost();
+    replyingTo.value = null;
+    toast.success('Reply posted');
+    await Promise.all([refreshReplies(), refreshPost()]);
   } catch {
     toast.error('Failed to send reply');
   } finally {
@@ -162,12 +167,15 @@ useHead({
 
     <!-- Reply form -->
     <div v-if="isAuthenticated" class="cpub-reply-form">
+      <div v-if="replyingTo" class="cpub-replying-to">
+        Replying to a comment <button class="cpub-cancel-reply" @click="replyingTo = null"><i class="fa-solid fa-xmark"></i></button>
+      </div>
       <div class="cpub-reply-row">
         <input
           v-model="replyContent"
           class="cpub-reply-input"
           type="text"
-          placeholder="Write a reply (sent via federation)..."
+          placeholder="Write a reply..."
           aria-label="Write a reply"
           @keydown.enter="handleReply"
         />
@@ -176,18 +184,53 @@ useHead({
         </button>
       </div>
       <p class="cpub-fed-reply-hint">
-        <i class="fa-solid fa-globe"></i> Your reply will be sent to {{ hub?.originDomain }} via ActivityPub
+        <i class="fa-solid fa-globe"></i> Your reply will also be sent to {{ hub?.originDomain }} via ActivityPub
       </p>
     </div>
 
-    <!-- Reply thread info -->
+    <!-- Replies -->
     <div class="cpub-replies-section">
-      <div class="cpub-empty-state" style="padding: 32px 16px">
-        <p class="cpub-empty-state-title"><i class="fa-solid fa-globe"></i> Federated thread</p>
+      <h3 v-if="replies.length" class="cpub-replies-title">{{ repliesData?.total ?? 0 }} Local Replies</h3>
+      <div v-for="reply in replies" :key="reply.id" class="cpub-reply">
+        <div class="cpub-reply-author">
+          <div class="cpub-reply-avatar">
+            <img v-if="reply.author?.avatarUrl" :src="reply.author.avatarUrl" :alt="reply.author?.displayName || reply.author?.username" class="cpub-reply-avatar-img" />
+            <span v-else>{{ (reply.author?.displayName || reply.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+          </div>
+          <NuxtLink v-if="reply.author" :to="`/u/${reply.author.username}`" class="cpub-reply-author-name">{{ reply.author.displayName || reply.author.username }}</NuxtLink>
+          <span class="cpub-post-sep">&middot;</span>
+          <time class="cpub-post-time">{{ formatDate(reply.createdAt) }}</time>
+        </div>
+        <div class="cpub-reply-content"><MentionText :text="reply.content" /></div>
+        <div class="cpub-reply-actions">
+          <button v-if="isAuthenticated" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author?.username ?? ''} `">
+            <i class="fa-solid fa-reply"></i> Reply
+          </button>
+        </div>
+
+        <!-- Nested replies -->
+        <div v-if="reply.replies?.length" class="cpub-nested-replies">
+          <div v-for="child in reply.replies" :key="child.id" class="cpub-reply cpub-reply-nested">
+            <div class="cpub-reply-author">
+              <div class="cpub-reply-avatar">
+                <img v-if="child.author?.avatarUrl" :src="child.author.avatarUrl" :alt="child.author?.displayName || child.author?.username" class="cpub-reply-avatar-img" />
+                <span v-else>{{ (child.author?.displayName || child.author?.username || 'U').charAt(0).toUpperCase() }}</span>
+              </div>
+              <NuxtLink v-if="child.author" :to="`/u/${child.author.username}`" class="cpub-reply-author-name">{{ child.author.displayName || child.author.username }}</NuxtLink>
+              <span class="cpub-post-sep">&middot;</span>
+              <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
+            </div>
+            <div class="cpub-reply-content"><MentionText :text="child.content" /></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Federation thread info -->
+      <div class="cpub-fed-thread-info" style="padding: 16px">
         <p class="cpub-empty-state-desc">
-          Replies sent here are delivered to <strong>{{ hub?.originDomain }}</strong> via ActivityPub.
+          <i class="fa-solid fa-globe"></i>
           <a v-if="post.objectUri" :href="post.objectUri" target="_blank" rel="noopener noreferrer" class="cpub-inline-link">
-            View full thread on origin <i class="fa-solid fa-arrow-up-right-from-square"></i>
+            View full thread on {{ hub?.originDomain }} <i class="fa-solid fa-arrow-up-right-from-square"></i>
           </a>
         </p>
       </div>
@@ -278,6 +321,11 @@ useHead({
 
 /* Reply form */
 .cpub-reply-form { margin-bottom: 16px; }
+.cpub-replying-to {
+  font-size: 11px; color: var(--text-dim); margin-bottom: 6px;
+  display: flex; align-items: center; gap: 6px;
+}
+.cpub-cancel-reply { background: none; border: none; cursor: pointer; color: var(--text-faint); font-size: 12px; }
 .cpub-reply-row { display: flex; gap: 8px; }
 .cpub-reply-input {
   flex: 1; padding: 8px 12px; background: var(--surface); border: var(--border-width-default) solid var(--border);
@@ -293,8 +341,38 @@ useHead({
 
 /* Replies section */
 .cpub-replies-section {}
-.cpub-empty-state { text-align: center; }
-.cpub-empty-state-title { font-size: 14px; font-weight: 600; color: var(--text-dim); margin-bottom: 4px; }
+.cpub-replies-title { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
+
+.cpub-reply {
+  padding: 12px 16px; background: var(--surface); border: var(--border-width-default) solid var(--border);
+  margin-bottom: 8px;
+}
+.cpub-reply-nested { margin-left: 24px; border-color: var(--border2); }
+.cpub-nested-replies { margin-top: 8px; }
+
+.cpub-reply-author { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-faint); margin-bottom: 6px; }
+
+.cpub-reply-avatar {
+  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
+  background: var(--surface2); border: 1px solid var(--border);
+  font-family: var(--font-mono); font-size: 9px; font-weight: 700; color: var(--text-dim);
+  overflow: hidden;
+}
+.cpub-reply-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
+
+.cpub-reply-author-name { font-weight: 500; color: var(--text-dim); text-decoration: none; }
+.cpub-reply-author-name:hover { color: var(--accent); }
+
+.cpub-reply-content { font-size: 13px; line-height: 1.6; color: var(--text); }
+
+.cpub-reply-actions { margin-top: 6px; }
+.cpub-reply-btn {
+  background: none; border: none; cursor: pointer; font-size: 11px;
+  color: var(--text-faint); padding: 2px 0;
+}
+.cpub-reply-btn:hover { color: var(--accent); }
+
+.cpub-fed-thread-info { text-align: center; margin-top: 8px; }
 .cpub-empty-state-desc { font-size: 12px; color: var(--text-faint); line-height: 1.5; }
 .cpub-inline-link { color: var(--accent); text-decoration: none; white-space: nowrap; }
 .cpub-inline-link:hover { text-decoration: underline; }

package/pages/hubs/[slug]/index.vue

@@ -63,7 +63,7 @@ const postsVM = computed<HubPostViewModel[]>(() => {
     author: {
       name: p.author?.displayName || p.author?.username || p.remoteActorName || 'Unknown',
       handle: p.author ? null : remoteDomain(p.remoteActorUri ?? undefined),
-      avatarUrl: p.author?.avatarUrl ?? null,
+      avatarUrl: p.author?.avatarUrl ?? p.remoteActorAvatarUrl ?? null,
     },
     createdAt: p.createdAt,
     likeCount: p.likeCount ?? 0,