@commonpub/layer 0.7.5 → 0.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.5",
+  "version": "0.7.7",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,15 +50,15 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.9.0",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.0",
+    "@commonpub/config": "0.9.0",
     "@commonpub/explainer": "0.7.4",
-    "@commonpub/protocol": "0.9.7",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/learning": "0.5.0",
-    "@commonpub/schema": "0.9.3",
-    "@commonpub/server": "2.27.4",
+    "@commonpub/protocol": "0.9.7",
+    "@commonpub/schema": "0.9.4",
+    "@commonpub/server": "2.27.6",
     "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { provide } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
-import { BlockCanvas, EditorShell, useBlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
+import { BlockCanvas, EditorShell, useBlockEditor, UPLOAD_HANDLER_KEY, type BlockTypeGroup } from '@commonpub/editor/vue';
 import type { PageTreeItem } from '../../../components/editors/DocsPageTree.vue';
 
 definePageMeta({ layout: false, middleware: 'auth' });
@@ -9,6 +10,15 @@ const route = useRoute();
 const siteSlug = computed(() => route.params.siteSlug as string);
 const { show: toast } = useToast();
 
+// Provide upload handler to block components (ImageBlock, GalleryBlock)
+provide(UPLOAD_HANDLER_KEY, async (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'content');
+  const res = await $fetch<{ url: string; width?: number | null; height?: number | null }>('/api/files/upload', { method: 'POST', body: formData });
+  return { url: res.url, width: res.width ?? null, height: res.height ?? null };
+});
+
 // ═══ DATA FETCHING ═══
 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}`);
 

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

@@ -190,20 +190,24 @@ useHead({
 
     <!-- Replies -->
     <div class="cpub-replies-section">
-      <h3 v-if="replies.length" class="cpub-replies-title">{{ repliesData?.total ?? 0 }} Local Replies</h3>
+      <h3 v-if="replies.length" class="cpub-replies-title">{{ repliesData?.total ?? 0 }} 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>
+            <img v-if="reply.author?.avatarUrl || reply.remoteActorAvatarUrl" :src="(reply.author?.avatarUrl || reply.remoteActorAvatarUrl)!" :alt="reply.author?.displayName || reply.remoteActorName || 'User'" class="cpub-reply-avatar-img" />
+            <span v-else>{{ (reply.author?.displayName || reply.remoteActorName || '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 v-else class="cpub-reply-author-name cpub-reply-remote">
+            {{ reply.remoteActorName || 'Remote user' }}
+            <i class="fa-solid fa-globe" style="font-size: 9px; opacity: 0.5; margin-left: 2px"></i>
+          </span>
           <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 ?? ''} `">
+          <button v-if="isAuthenticated && reply.author" class="cpub-reply-btn" @click="replyingTo = reply.id; replyContent = `@${reply.author.username} `">
             <i class="fa-solid fa-reply"></i> Reply
           </button>
         </div>
@@ -213,10 +217,14 @@ useHead({
           <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>
+                <img v-if="child.author?.avatarUrl || child.remoteActorAvatarUrl" :src="(child.author?.avatarUrl || child.remoteActorAvatarUrl)!" :alt="child.author?.displayName || child.remoteActorName || 'User'" class="cpub-reply-avatar-img" />
+                <span v-else>{{ (child.author?.displayName || child.remoteActorName || '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 v-else class="cpub-reply-author-name cpub-reply-remote">
+                {{ child.remoteActorName || 'Remote user' }}
+                <i class="fa-solid fa-globe" style="font-size: 9px; opacity: 0.5; margin-left: 2px"></i>
+              </span>
               <span class="cpub-post-sep">&middot;</span>
               <time class="cpub-post-time">{{ formatDate(child.createdAt) }}</time>
             </div>

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

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
+import { provide } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
-import { BlockCanvas, useBlockEditor } from '@commonpub/editor/vue';
+import { BlockCanvas, useBlockEditor, UPLOAD_HANDLER_KEY, SEARCH_PRODUCTS_KEY } from '@commonpub/editor/vue';
 import { isExplainerDocument, createEmptyDocument } from '@commonpub/explainer';
 import type { ExplainerDocument } from '@commonpub/explainer';
 import { ExplainerSectionEditor } from '@commonpub/explainer/vue';
@@ -93,6 +94,20 @@ const { errors: publishErrors, showErrors: showPublishErrors, validate, dismiss:
   getBlockTuples: getContentForSave as () => BlockTuple[],
 });
 
+// --- Provide upload + search handlers to block components via inject ---
+provide(UPLOAD_HANDLER_KEY, async (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'content');
+  const res = await $fetch<{ url: string; width?: number | null; height?: number | null }>('/api/files/upload', { method: 'POST', body: formData });
+  return { url: res.url, width: res.width ?? null, height: res.height ?? null };
+});
+
+provide(SEARCH_PRODUCTS_KEY, async (query: string) => {
+  const res = await $fetch<{ items: Array<{ id: string; name: string; slug: string; description: string | null; category: string | null; imageUrl: string | null; purchaseUrl: string | null }> }>(`/api/products?q=${encodeURIComponent(query)}&limit=10`);
+  return res.items ?? [];
+});
+
 // --- Specialized editor component map ---
 const editorMap: Record<string, Component> = {
   article: resolveComponent('EditorsArticleEditor') as Component,