@commonpub/layer 0.76.0 → 0.80.0

package/components/ImageCropperModal.vue

@@ -0,0 +1,342 @@
+<script setup lang="ts">
+/**
+ * Reusable image cropper modal. Shows a fixed aspect-ratio crop frame; the user
+ * drags to reposition and zooms (slider / +/- / scroll / pinch) the image behind
+ * it, so the crop is WYSIWYG for the target element (avatar 1:1, banner 4:1,
+ * cover 16:9). Emits a cropped Blob. Built on vue-advanced-cropper for correct
+ * EXIF/touch/retina handling; styled entirely to the design system.
+ */
+import { Cropper } from 'vue-advanced-cropper';
+import 'vue-advanced-cropper/dist/style.css';
+
+const props = withDefaults(defineProps<{
+  /** Source image as a data/object URL. */
+  src: string;
+  /** Crop aspect ratio (width / height), e.g. 1, 4, 16/9. */
+  aspectRatio: number;
+  /** Show a circular mask hint over the (still square) crop — for avatars.
+   *  Avatars also export as PNG to preserve transparency (e.g. logos). */
+  round?: boolean;
+  /** Max output width in px; height derives from the aspect ratio. */
+  outputWidth?: number;
+  title?: string;
+}>(), {
+  round: false,
+  outputWidth: 1600,
+  title: 'Crop image',
+});
+
+const emit = defineEmits<{ crop: [blob: Blob]; cancel: [] }>();
+
+// vue-advanced-cropper's instance methods (getResult/zoom) aren't in its exported
+// types; reference them through a loose handle.
+interface CropperHandle {
+  getResult: () => { coordinates?: { width: number; height: number }; canvas?: HTMLCanvasElement };
+  zoom: (factor: number) => void;
+}
+const cropperRef = ref<CropperHandle | null>(null);
+
+// Modal a11y: focus trap, scroll lock, Esc, focus restore (shared pattern).
+const dialogRef = ref<HTMLElement | null>(null);
+const visible = ref(false);
+onMounted(() => { visible.value = true; });
+useFocusTrap(dialogRef, () => visible.value, () => emit('cancel'));
+
+const ZOOM_MAX = 5;
+const zoom = ref(1);
+/** Crop width (in image px) at min zoom = "fit". image-restriction keeps the
+ *  image covering the stencil, so this is the largest crop width ever seen. */
+let fitCropWidth = 0;
+const saving = ref(false);
+
+// Reset zoom bookkeeping when the source image changes (defensive — today the
+// parent remounts the modal per file, but don't rely on that).
+watch(() => props.src, () => { fitCropWidth = 0; zoom.value = 1; });
+
+const stencilProps = computed(() => ({
+  aspectRatio: props.aspectRatio,
+  movable: false,
+  resizable: false,
+  // The frame is fixed; the user manipulates the image, not the stencil. Don't
+  // render resize handles/lines (they'd be dead, non-draggable decorations).
+  handlers: {},
+  lines: {},
+}));
+
+function stencilSize({ boundaries }: { boundaries: { width: number; height: number } }): { width: number; height: number } {
+  let w = boundaries.width;
+  let h = w / props.aspectRatio;
+  if (h > boundaries.height) {
+    h = boundaries.height;
+    w = h * props.aspectRatio;
+  }
+  return { width: Math.round(w * 0.92), height: Math.round(h * 0.92) };
+}
+
+const exportMime = computed(() => (props.round ? 'image/png' : 'image/jpeg'));
+const canvasOpts = computed(() => ({
+  maxWidth: props.outputWidth,
+  maxHeight: Math.round(props.outputWidth / props.aspectRatio),
+  // Only flatten onto white for JPEG (no alpha). PNG keeps transparency.
+  ...(props.round ? {} : { fillColor: '#ffffff' }),
+}));
+
+function onChange(result: { coordinates?: { width: number } }): void {
+  const w = result?.coordinates?.width;
+  if (!w) return;
+  if (w > fitCropWidth) fitCropWidth = w;
+  if (fitCropWidth > 0) zoom.value = Math.min(ZOOM_MAX, Math.max(1, fitCropWidth / w));
+}
+
+function applyZoom(target: number): void {
+  const c = cropperRef.value;
+  if (!c || !fitCropWidth) return;
+  const curW = c.getResult().coordinates?.width;
+  if (!curW) return;
+  const t = Math.min(ZOOM_MAX, Math.max(1, target));
+  const factor = curW / (fitCropWidth / t);
+  if (Number.isFinite(factor) && factor > 0) c.zoom(factor);
+}
+
+function onSlider(e: Event): void { applyZoom(Number((e.target as HTMLInputElement).value)); }
+function zoomIn(): void { applyZoom(zoom.value * 1.25); }
+function zoomOut(): void { applyZoom(zoom.value / 1.25); }
+
+function apply(): void {
+  const c = cropperRef.value;
+  if (!c) return;
+  const { canvas } = c.getResult();
+  if (!canvas) { emit('cancel'); return; }
+  saving.value = true;
+  canvas.toBlob((blob) => {
+    saving.value = false;
+    if (blob) emit('crop', blob); else emit('cancel');
+  }, exportMime.value, 0.92);
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div class="cpub-crop-overlay" @click.self="emit('cancel')">
+      <div ref="dialogRef" class="cpub-crop-modal" role="dialog" aria-modal="true" :aria-label="title">
+        <header class="cpub-crop-head">
+          <span class="cpub-crop-title">{{ title }}</span>
+          <button type="button" class="cpub-crop-x" aria-label="Cancel" @click="emit('cancel')">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </header>
+
+        <div class="cpub-crop-stage" :class="{ 'cpub-crop-stage-round': round }">
+          <Cropper
+            ref="cropperRef"
+            class="cpub-cropper"
+            :src="src"
+            :stencil-props="stencilProps"
+            :stencil-size="stencilSize"
+            image-restriction="stencil"
+            :resize-image="{ touch: true, wheel: { ratio: 0.1 }, adjustStencil: false }"
+            :move-image="{ touch: true, mouse: true }"
+            :canvas="canvasOpts"
+            :transitions="true"
+            @change="onChange"
+          />
+          <div v-if="round" class="cpub-crop-round-mask" aria-hidden="true"></div>
+        </div>
+
+        <div class="cpub-crop-controls">
+          <button type="button" class="cpub-crop-zbtn" aria-label="Zoom out" @click="zoomOut">
+            <i class="fa-solid fa-minus"></i>
+          </button>
+          <input
+            class="cpub-crop-slider"
+            type="range"
+            :min="1"
+            :max="ZOOM_MAX"
+            step="0.01"
+            :value="zoom"
+            aria-label="Zoom"
+            @input="onSlider"
+          />
+          <button type="button" class="cpub-crop-zbtn" aria-label="Zoom in" @click="zoomIn">
+            <i class="fa-solid fa-plus"></i>
+          </button>
+        </div>
+
+        <p class="cpub-crop-hint">Drag to reposition. Scroll, pinch, or use the slider to zoom.</p>
+
+        <footer class="cpub-crop-foot">
+          <button type="button" class="cpub-btn" @click="emit('cancel')">Cancel</button>
+          <button type="button" class="cpub-btn cpub-btn-primary" :disabled="saving" @click="apply">
+            {{ saving ? 'Saving...' : 'Apply' }}
+          </button>
+        </footer>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.cpub-crop-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-modal, 9999);
+  background: var(--color-surface-scrim, rgba(0, 0, 0, 0.6));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+}
+
+.cpub-crop-modal {
+  width: 100%;
+  max-width: 560px;
+  background: var(--surface);
+  border: var(--border-width-default, 2px) solid var(--border);
+  box-shadow: var(--shadow-lg, 6px 6px 0 var(--border));
+  display: flex;
+  flex-direction: column;
+}
+
+.cpub-crop-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default, 2px) solid var(--border);
+}
+
+.cpub-crop-title {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text);
+}
+
+.cpub-crop-x {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 1rem;
+  padding: 4px;
+  line-height: 1;
+}
+.cpub-crop-x:hover { color: var(--text); }
+.cpub-crop-x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.cpub-crop-stage {
+  position: relative;
+  background: var(--surface2, var(--color-surface));
+  height: 340px;
+  overflow: hidden;
+}
+
+.cpub-cropper {
+  height: 100%;
+  width: 100%;
+  background: transparent;
+}
+
+/* Circular hint for avatars (the stored crop stays square). */
+.cpub-crop-round-mask {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.cpub-crop-round-mask::after {
+  content: '';
+  height: 92%;
+  aspect-ratio: 1;
+  border-radius: 50%;
+  border: var(--border-width-default, 2px) dashed var(--accent);
+}
+
+/* Style vue-advanced-cropper internals to the design system. */
+.cpub-cropper :deep(.vue-advanced-cropper__background),
+.cpub-cropper :deep(.vue-advanced-cropper__foreground) {
+  background: var(--color-surface-scrim, rgba(0, 0, 0, 0.55));
+}
+/* Belt-and-suspenders with handlers:{}/lines:{}: never show the resize chrome. */
+.cpub-cropper :deep(.vue-line-wrapper),
+.cpub-cropper :deep(.vue-handler-wrapper) {
+  display: none;
+}
+/* One clean accent frame around the crop window (outline = no layout shift,
+   no per-side border doubling). Verified via headless render: the crop window is
+   `.vue-rectangle-stencil`. */
+.cpub-cropper :deep(.vue-rectangle-stencil) {
+  outline: var(--border-width-default, 2px) solid var(--accent);
+  outline-offset: calc(-1 * var(--border-width-default, 2px));
+}
+
+.cpub-crop-controls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px 4px;
+}
+
+.cpub-crop-zbtn {
+  flex: 0 0 auto;
+  width: 30px;
+  height: 30px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface);
+  border: var(--border-width-default, 2px) solid var(--border);
+  color: var(--text-dim);
+  cursor: pointer;
+}
+.cpub-crop-zbtn:hover { border-color: var(--accent); color: var(--accent); }
+.cpub-crop-zbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+
+.cpub-crop-slider {
+  flex: 1;
+  appearance: none;
+  height: 4px;
+  background: var(--border);
+  cursor: pointer;
+}
+.cpub-crop-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
+.cpub-crop-slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  border-radius: 0;
+  background: var(--accent);
+  border: var(--border-width-default, 2px) solid var(--accent);
+  cursor: pointer;
+}
+.cpub-crop-slider::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  background: var(--accent);
+  border: var(--border-width-default, 2px) solid var(--accent);
+  border-radius: 0;
+  cursor: pointer;
+}
+
+.cpub-crop-hint {
+  font-size: 0.6875rem;
+  color: var(--text-faint);
+  text-align: center;
+  padding: 4px 16px 0;
+}
+
+.cpub-crop-foot {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding: 16px;
+}
+
+@media (max-width: 560px) {
+  .cpub-crop-stage { height: 280px; }
+}
+</style>

package/components/ImageUpload.vue

@@ -5,6 +5,8 @@ const props = defineProps<{
   label?: string;
   hint?: string;
   aspectClass?: string;
+  /** Override the crop aspect ratio (width/height). Defaults by purpose. */
+  aspectRatio?: number;
 }>();
 
 const emit = defineEmits<{
@@ -15,31 +17,50 @@ const uploading = ref(false);
 const error = ref('');
 const fileInput = ref<HTMLInputElement | null>(null);
 
+// The image is cropped to the target element's aspect ratio before upload, so it
+// displays WYSIWYG instead of being arbitrarily cover-cropped on the page.
+const cropConfig = computed(() => {
+  switch (props.purpose) {
+    case 'avatar': return { ratio: props.aspectRatio ?? 1, round: true, output: 512, title: 'Crop avatar' };
+    case 'banner': return { ratio: props.aspectRatio ?? 4, round: false, output: 1600, title: 'Crop banner' };
+    case 'cover': return { ratio: props.aspectRatio ?? 16 / 9, round: false, output: 1600, title: 'Crop cover image' };
+    default: return { ratio: props.aspectRatio ?? 1, round: false, output: 1200, title: 'Crop image' };
+  }
+});
+
+const cropSrc = ref('');
+
 function triggerPicker(): void {
   fileInput.value?.click();
 }
 
-async function handleFileChange(event: Event): Promise<void> {
+function handleFileChange(event: Event): void {
   const target = event.target as HTMLInputElement;
   const file = target.files?.[0];
   if (!file) return;
 
   if (!file.type.startsWith('image/')) {
     error.value = 'Please select an image file.';
-    return;
-  }
-
-  if (file.size > 10 * 1024 * 1024) {
+  } else if (file.size > 10 * 1024 * 1024) {
     error.value = 'Image must be under 10MB.';
-    return;
+  } else {
+    error.value = '';
+    const reader = new FileReader();
+    reader.onload = () => { cropSrc.value = reader.result as string; };
+    reader.onerror = () => { error.value = 'Could not read the image.'; };
+    reader.readAsDataURL(file);
   }
+  target.value = '';
+}
 
-  error.value = '';
+async function onCropped(blob: Blob): Promise<void> {
+  cropSrc.value = '';
   uploading.value = true;
-
+  error.value = '';
   try {
+    const ext = blob.type === 'image/png' ? 'png' : 'jpg';
     const formData = new FormData();
-    formData.append('file', file);
+    formData.append('file', new File([blob], `${props.purpose}.${ext}`, { type: blob.type || 'image/jpeg' }));
     formData.append('purpose', props.purpose);
 
     const result = await $fetch<{ url: string }>('/api/files/upload', {
@@ -52,7 +73,6 @@ async function handleFileChange(event: Event): Promise<void> {
     error.value = (err as { data?: { statusMessage?: string } })?.data?.statusMessage || 'Upload failed.';
   } finally {
     uploading.value = false;
-    if (target) target.value = '';
   }
 }
 
@@ -94,6 +114,19 @@ function clearImage(): void {
 
     <span v-if="hint && !error" class="cpub-img-hint">{{ hint }}</span>
     <span v-if="error" class="cpub-img-error">{{ error }}</span>
+
+    <ClientOnly>
+      <ImageCropperModal
+        v-if="cropSrc"
+        :src="cropSrc"
+        :aspect-ratio="cropConfig.ratio"
+        :round="cropConfig.round"
+        :output-width="cropConfig.output"
+        :title="cropConfig.title"
+        @crop="onCropped"
+        @cancel="cropSrc = ''"
+      />
+    </ClientOnly>
   </div>
 </template>
 

package/components/RegistryDirectory.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
+// `id`/`status` are absent on the public remote-registry directory (read-only view);
+// present only on the local owner view (actAsRegistry).
 interface RegistryRow {
-  id: string;
+  id?: string;
   domain: string;
   actorUri: string;
   name: string | null;
@@ -10,24 +12,29 @@ interface RegistryRow {
   localPostCount: number;
   softwareName: string | null;
   softwareVersion: string | null;
-  status: string;
+  status?: string;
   lastPingAt: string | null;
   online: boolean;
 }
 
-defineProps<{ instances: RegistryRow[]; announcingTo?: string | null }>();
+defineProps<{ instances: RegistryRow[]; announcingTo?: string | null; readonlyMode?: boolean }>();
 const emit = defineEmits<{ changed: []; search: [value: string] }>();
 
 const toast = useToast();
 const searchTerm = ref('');
-const busyId = ref<string | null>(null);
+const busyKey = ref<string | null>(null);
+
+/** Stable per-row key — domain is unique in a registry; remote rows have no id. */
+function rowKey(r: RegistryRow): string {
+  return r.id ?? r.domain;
+}
 
 function onSearch(): void {
   emit('search', searchTerm.value.trim());
 }
 
 async function mirror(row: RegistryRow, direction: 'pull' | 'push'): Promise<void> {
-  busyId.value = row.id;
+  busyKey.value = rowKey(row);
   try {
     await $fetch('/api/admin/federation/mirrors', {
       method: 'POST',
@@ -40,12 +47,13 @@ async function mirror(row: RegistryRow, direction: 'pull' | 'push'): Promise<voi
   } catch {
     toast.error(direction === 'pull' ? 'Failed to add mirror' : 'Failed to send request');
   } finally {
-    busyId.value = null;
+    busyKey.value = null;
   }
 }
 
 async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocked'): Promise<void> {
-  busyId.value = row.id;
+  if (!row.id) return;
+  busyKey.value = rowKey(row);
   const url: string = `/api/admin/registry/instances/${row.id}/status`;
   try {
     await $fetch(url, { method: 'POST', body: { status } });
@@ -54,7 +62,7 @@ async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocke
   } catch {
     toast.error('Failed to update instance');
   } finally {
-    busyId.value = null;
+    busyKey.value = null;
   }
 }
 </script>
@@ -63,11 +71,10 @@ async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocke
   <div>
     <p class="cpub-fed-explain">
       The <strong>registry</strong> lists CommonPub instances that announce themselves here. Mirror
-      one to pull its content, or request it to mirror you (CommonPub-to-CommonPub). Hide or block
-      an entry to curate the public directory.
+      one to pull its content, or request it to mirror you (CommonPub-to-CommonPub).<template v-if="!readonlyMode"> Hide or block an entry to curate the public directory.</template>
     </p>
     <p v-if="announcingTo" class="cpub-fed-info-text" style="margin-bottom: 12px;">
-      This instance is announcing itself to <strong>{{ announcingTo }}</strong>.
+      This instance is announcing itself to <strong>{{ announcingTo }}</strong>{{ readonlyMode ? ', showing every instance registered there' : '' }}.
     </p>
 
     <form class="cpub-fed-form" style="margin-bottom: 12px;" @submit.prevent="onSearch">
@@ -83,20 +90,22 @@ async function setStatus(row: RegistryRow, status: 'active' | 'hidden' | 'blocke
 
     <div class="cpub-fed-activity-list">
       <div v-if="!instances.length" class="cpub-fed-empty">No instances registered yet.</div>
-      <div v-for="i in instances" :key="i.id" class="cpub-fed-activity-row">
+      <div v-for="i in instances" :key="rowKey(i)" class="cpub-fed-activity-row">
         <span class="cpub-reg-dot" :class="{ online: i.online }" :title="i.online ? 'online' : 'offline'" aria-hidden="true"></span>
         <span class="cpub-fed-type">{{ i.name || i.domain }}</span>
         <span class="cpub-fed-actor">
           {{ i.domain }} · {{ i.userCount }} users · {{ i.localPostCount }} posts<template v-if="i.softwareName"> · {{ i.softwareName }} {{ i.softwareVersion }}</template>
         </span>
-        <span v-if="i.status !== 'active'" class="cpub-fed-status" :class="i.status === 'blocked' ? 'failed' : 'paused'">{{ i.status }}</span>
-        <button class="cpub-fed-btn-sm" :disabled="busyId === i.id" @click="mirror(i, 'pull')">Mirror</button>
-        <button class="cpub-fed-btn-sm" :disabled="busyId === i.id" @click="mirror(i, 'push')">Request mirror</button>
-        <button v-if="i.status === 'active'" class="cpub-fed-btn-sm" :disabled="busyId === i.id" @click="setStatus(i, 'hidden')">Hide</button>
-        <button v-else-if="i.status === 'hidden'" class="cpub-fed-btn-sm" :disabled="busyId === i.id" @click="setStatus(i, 'active')">Unhide</button>
-        <button class="cpub-fed-btn-sm cpub-fed-btn-danger" :disabled="busyId === i.id" @click="setStatus(i, i.status === 'blocked' ? 'active' : 'blocked')">
-          {{ i.status === 'blocked' ? 'Unblock' : 'Block' }}
-        </button>
+        <span v-if="i.status && i.status !== 'active'" class="cpub-fed-status" :class="i.status === 'blocked' ? 'failed' : 'paused'">{{ i.status }}</span>
+        <button class="cpub-fed-btn-sm" :disabled="busyKey === rowKey(i)" @click="mirror(i, 'pull')">Mirror</button>
+        <button class="cpub-fed-btn-sm" :disabled="busyKey === rowKey(i)" @click="mirror(i, 'push')">Request mirror</button>
+        <template v-if="!readonlyMode">
+          <button v-if="i.status === 'active'" class="cpub-fed-btn-sm" :disabled="busyKey === rowKey(i)" @click="setStatus(i, 'hidden')">Hide</button>
+          <button v-else-if="i.status === 'hidden'" class="cpub-fed-btn-sm" :disabled="busyKey === rowKey(i)" @click="setStatus(i, 'active')">Unhide</button>
+          <button class="cpub-fed-btn-sm cpub-fed-btn-danger" :disabled="busyKey === rowKey(i)" @click="setStatus(i, i.status === 'blocked' ? 'active' : 'blocked')">
+            {{ i.status === 'blocked' ? 'Unblock' : 'Block' }}
+          </button>
+        </template>
       </div>
     </div>
   </div>

package/components/editors/BlogEditor.vue

@@ -142,7 +142,17 @@ const siteDomain = computed(() => {
 const seoDesc = computed(() => (props.metadata.seoDescription as string) || (props.metadata.description as string) || '');
 
 // --- Schedule ---
+// Open the schedule control automatically when editing an already-scheduled post
+// (metadata loads asynchronously, hence the immediate watch rather than a one-shot init).
 const scheduleEnabled = ref(false);
+watch(() => props.metadata.scheduledAt, (v) => {
+  if (v) scheduleEnabled.value = true;
+}, { immediate: true });
+// Turning the toggle off discards any pending schedule time so the Schedule
+// button (gated on metadata.scheduledAt) and saved drafts don't keep a stale value.
+watch(scheduleEnabled, (on) => {
+  if (!on && props.metadata.scheduledAt) updateMeta('scheduledAt', '');
+});
 
 // --- Mobile sidebar toggles ---
 const mobileLeftOpen = ref(false);

package/components/hub/HubHero.vue

@@ -16,7 +16,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
     <!-- Banner overlay slot (e.g., origin banner for federated hubs) -->
     <slot name="banner-overlay" />
 
-    <div class="cpub-hub-banner" :style="hub.bannerUrl ? { backgroundImage: `url(${hub.bannerUrl})`, backgroundSize: 'cover', backgroundPosition: 'center' } : {}">
+    <div class="cpub-hub-banner" :style="bannerBgStyle(hub.bannerUrl)">
       <template v-if="!hub.bannerUrl">
         <div class="cpub-hub-banner-pattern"></div>
         <div class="cpub-hub-banner-dots"></div>

package/composables/useContentSave.ts

@@ -30,6 +30,8 @@ export interface ContentSaveReturn {
   handleSave: () => Promise<void>;
   /** Validate, save, publish, and navigate */
   handlePublish: (validate?: () => string[]) => Promise<string[]>;
+  /** Validate, save, and schedule for future publish using metadata.scheduledAt */
+  handleSchedule: (validate?: () => string[]) => Promise<string[]>;
   /** Build a clean save body from current state */
   buildSaveBody: () => Record<string, unknown>;
   /** Schedule an autosave after the debounce delay */
@@ -81,6 +83,13 @@ export function useContentSave(opts: ContentSaveOptions): ContentSaveReturn {
     for (const key of Object.keys(body)) {
       if (body[key] === '') body[key] = undefined;
     }
+    // scheduledAt arrives from a datetime-local control as a bare local string;
+    // resolve it to an absolute UTC instant client-side so the server never
+    // reparses it in its own timezone (which would shift the stored time).
+    if (typeof body.scheduledAt === 'string' && body.scheduledAt) {
+      const d = new Date(body.scheduledAt);
+      body.scheduledAt = Number.isNaN(d.getTime()) ? undefined : d.toISOString();
+    }
     return body;
   }
 
@@ -225,6 +234,55 @@ export function useContentSave(opts: ContentSaveOptions): ContentSaveReturn {
     }
   }
 
+  async function handleSchedule(validate?: () => string[]): Promise<string[]> {
+    if (saving.value || !opts.title.value) return ['Title is required'];
+    const raw = opts.metadata.value?.scheduledAt as string | undefined;
+    if (!raw) return ['Pick a date and time to schedule'];
+    const when = new Date(raw);
+    if (Number.isNaN(when.getTime()) || when.getTime() <= Date.now()) {
+      error.value = 'Scheduled time must be in the future.';
+      return ['Scheduled time must be in the future'];
+    }
+    if (validate) {
+      const errs = validate();
+      if (errs.length > 0) return errs;
+    }
+    cancelAutoSave();
+    saving.value = true;
+    error.value = '';
+
+    try {
+      const body = buildSaveBody();
+      let resultSlug = useRoute().params.slug as string;
+
+      if (opts.isNew.value || !opts.contentId.value) {
+        const result = await createDraft(body);
+        opts.contentId.value = result.id;
+        opts.isNew.value = false;
+        resultSlug = result.slug;
+        if (opts.onAfterSave) await opts.onAfterSave(result.id);
+      } else {
+        const updated = await $fetch<{ slug: string }>(`/api/content/${opts.contentId.value}`, { method: 'PUT', body });
+        if (updated?.slug) resultSlug = updated.slug;
+        if (opts.onAfterSave) await opts.onAfterSave(opts.contentId.value!);
+      }
+
+      // Send an absolute instant: `raw` is a local "YYYY-MM-DDTHH:mm" value, so
+      // resolve it to UTC client-side rather than letting the server reparse it
+      // in its own timezone.
+      await $fetch(`/api/content/${opts.contentId.value}/schedule`, { method: 'POST', body: { scheduledAt: when.toISOString() } });
+
+      opts.isDirty.value = false;
+      await navigateTo(viewPath(opts.contentType.value, resultSlug));
+      return [];
+    } catch (err: unknown) {
+      error.value = opts.extractError(err);
+      return [];
+    } finally {
+      saving.value = false;
+    }
+  }
+
   function scheduleAutoSave(): void {
     if (autoSaveTimer) clearTimeout(autoSaveTimer);
     autoSaveTimer = setTimeout(async () => {
@@ -256,6 +314,7 @@ export function useContentSave(opts: ContentSaveOptions): ContentSaveReturn {
     silentSave,
     handleSave,
     handlePublish,
+    handleSchedule,
     buildSaveBody,
     scheduleAutoSave,
     cancelAutoSave,

package/composables/useFocusTrap.ts

@@ -86,5 +86,14 @@ export function useFocusTrap(
   onUnmounted(() => {
     document.body.style.overflow = '';
     document.removeEventListener('keydown', handleKeydown);
+    // Most consumers close by v-if-unmounting while still "open" (the isOpen
+    // getter never flips false), so the watch's else-branch never restores
+    // focus. Restore here too. `previousActive` is nulled by the else-branch
+    // when it does run, so this won't double-restore. Focusing a detached
+    // element is a harmless no-op.
+    if (previousActive) {
+      previousActive.focus();
+      previousActive = null;
+    }
   });
 }

package/layouts/default.vue

@@ -256,7 +256,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <NuxtLink v-if="docs" to="/docs" class="cpub-footer-link">Docs</NuxtLink>
           <NuxtLink to="/privacy" class="cpub-footer-link">Privacy Policy</NuxtLink>
           <NuxtLink to="/cookies" class="cpub-footer-link">Cookie Policy</NuxtLink>
-          <NuxtLink to="/terms" class="cpub-footer-link">Terms of Service</NuxtLink>
+          <NuxtLink to="/terms" class="cpub-footer-link">Terms &amp; Code of Conduct</NuxtLink>
           <a href="/feed.xml" class="cpub-footer-link">RSS Feed</a>
         </nav>
       </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.76.0",
+  "version": "0.80.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,19 +51,20 @@
     "sharp": "^0.34.5",
     "shiki": "^4.0.2",
     "vue": "^3.4.0",
+    "vue-advanced-cropper": "^2.8.9",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/config": "0.22.1",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/editor": "0.7.12",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/schema": "0.43.0",
+    "@commonpub/config": "0.22.1",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/server": "2.86.0",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/schema": "0.44.0",
+    "@commonpub/server": "2.88.0",
     "@commonpub/ui": "0.13.1",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/theme-studio": "0.6.1"
+    "@commonpub/editor": "0.7.12"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/federation.vue

@@ -94,9 +94,16 @@ async function rejectRequest(id: string): Promise<void> {
   }
 }
 
-// Registry directory (Phase 4) — only fetched when this instance acts as a registry.
-type RegistryRow = { id: string; domain: string; actorUri: string; name: string | null; description: string | null; userCount: number; activeMonthCount: number; localPostCount: number; softwareName: string | null; softwareVersion: string | null; status: string; lastPingAt: string | null; online: boolean };
+// Registry directory (Phase 4). When this instance ACTS AS a registry, show the
+// local directory (with owner hide/block controls). When it only ANNOUNCES to a
+// registry, pull that registry's public directory so the operator can still
+// discover every peer registered there (read-only). id/status are absent on the
+// remote (public) view.
+type RegistryRow = { id?: string; domain: string; actorUri: string; name: string | null; description: string | null; userCount: number; activeMonthCount: number; localPostCount: number; softwareName: string | null; softwareVersion: string | null; status?: string; lastPingAt: string | null; online: boolean };
 const registrySearch = ref('');
+const registryTabAvailable = computed(() => actAsRegistry.value || announceToRegistry.value);
+const showRemoteDirectory = computed(() => !actAsRegistry.value && announceToRegistry.value);
+
 const { data: registryData, refresh: refreshRegistry } = await useFetch<{ instances: RegistryRow[]; total: number }>(
   '/api/admin/registry/instances',
   {
@@ -106,9 +113,31 @@ const { data: registryData, refresh: refreshRegistry } = await useFetch<{ instan
   },
 );
 
+const { data: registryDirData, refresh: refreshRegistryDir } = await useFetch<{ instances: RegistryRow[]; total: number; registryUrl: string | null }>(
+  '/api/admin/registry/directory',
+  {
+    query: computed(() => ({ search: registrySearch.value || undefined })),
+    default: () => ({ instances: [], total: 0, registryUrl: null }),
+    immediate: showRemoteDirectory.value,
+  },
+);
+
+const registryInstances = computed<RegistryRow[]>(() =>
+  actAsRegistry.value ? (registryData.value?.instances ?? []) : (registryDirData.value?.instances ?? []),
+);
+const registryLabel = computed<string | null>(() => {
+  if (!announceToRegistry.value) return null;
+  const url = registryDirData.value?.registryUrl;
+  if (showRemoteDirectory.value && url) {
+    try { return new URL(url).hostname; } catch { return 'your configured registry'; }
+  }
+  return 'your configured registry';
+});
+
 function onRegistrySearch(value: string): void {
   registrySearch.value = value;
-  void refreshRegistry();
+  if (actAsRegistry.value) void refreshRegistry();
+  else void refreshRegistryDir();
 }
 
 // Mirror creation
@@ -341,7 +370,7 @@ async function refederate(): Promise<void> {
     <div class="cpub-fed-tabs">
       <button :class="{ active: activeTab === 'activity' }" @click="activeTab = 'activity'">Activity</button>
       <button :class="{ active: activeTab === 'mirrors' }" @click="activeTab = 'mirrors'">Mirrors</button>
-      <button v-if="actAsRegistry" :class="{ active: activeTab === 'registry' }" @click="activeTab = 'registry'">Registry</button>
+      <button v-if="registryTabAvailable" :class="{ active: activeTab === 'registry' }" @click="activeTab = 'registry'">Registry</button>
       <button :class="{ active: activeTab === 'clients' }" @click="activeTab = 'clients'">OAuth Clients</button>
       <button :class="{ active: activeTab === 'trusted' }" @click="activeTab = 'trusted'">Trusted Instances</button>
       <button :class="{ active: activeTab === 'tools' }" @click="activeTab = 'tools'">Tools</button>
@@ -514,10 +543,11 @@ async function refederate(): Promise<void> {
     </div>
 
     <!-- Registry Tab -->
-    <div v-if="activeTab === 'registry' && actAsRegistry">
+    <div v-if="activeTab === 'registry' && registryTabAvailable">
       <RegistryDirectory
-        :instances="registryData?.instances ?? []"
-        :announcing-to="announceToRegistry ? 'your configured registry' : null"
+        :instances="registryInstances"
+        :readonly-mode="showRemoteDirectory"
+        :announcing-to="registryLabel"
         @changed="refreshMirrors"
         @search="onRegistrySearch"
       />

package/pages/hubs/index.vue

@@ -39,7 +39,7 @@ function hubLink(hub: Record<string, unknown>): string {
         :to="hubLink(hub as Record<string, unknown>)"
         class="cpub-hub-card"
       >
-        <div class="cpub-hub-card-banner" :style="hub.bannerUrl ? { backgroundImage: `url(${hub.bannerUrl})` } : {}">
+        <div class="cpub-hub-card-banner" :style="bannerBgStyle(hub.bannerUrl, {})">
           <div class="cpub-hub-card-icon">
             <img v-if="hub.iconUrl" :src="hub.iconUrl" :alt="hub.name" class="cpub-hub-card-avatar" />
             <i v-else :class="hub.hubType === 'company' ? 'fa-solid fa-building' : hub.hubType === 'product' ? 'fa-solid fa-microchip' : 'fa-solid fa-users'"></i>

package/pages/terms.vue

@@ -1,91 +1,157 @@
 <script setup lang="ts">
+const config = useRuntimeConfig();
+// The instance's own brand name + domain, from config. The terms template was
+// authored against the deveco.io reference host; here we substitute this
+// instance's identity. On the canonical CommonPub instance we collapse
+// "CommonPub and <instance>" to just "CommonPub" (it would otherwise be redundant).
+const instanceName = computed(() => (config.public.siteName as string) || 'CommonPub');
+const instanceDomain = computed(() => (config.public.domain as string) || 'this instance');
+const isCanonical = computed(
+  () => instanceName.value.trim().toLowerCase() === 'commonpub' || instanceDomain.value === 'commonpub.io',
+);
+/** "CommonPub and <name>", or just "CommonPub" on the canonical instance. */
+const brandAnd = computed(() => (isCanonical.value ? 'CommonPub' : `CommonPub and ${instanceName.value}`));
+/** "CommonPub and <domain>" subtitle form. */
+const brandAndDomain = computed(() => (isCanonical.value ? 'CommonPub' : `CommonPub and ${instanceDomain.value}`));
+/** "CommonPub or <name>". */
+const brandOr = computed(() => (isCanonical.value ? 'CommonPub' : `CommonPub or ${instanceName.value}`));
+/** verb suffix so "CommonPub and X exist" becomes "CommonPub exists" when canonical. */
+const s = computed(() => (isCanonical.value ? 's' : ''));
+const host = instanceDomain;
+
 useSeoMeta({
-  title: `Terms of Service, ${useSiteName()}`,
-  description: 'Terms and conditions for using this platform.',
+  title: () => `Community Terms and Code of Conduct, ${instanceName.value}`,
+  description: 'Community terms and code of conduct for this CommonPub instance.',
 });
-
-const siteName = useSiteName();
 </script>
 
 <template>
   <div class="cpub-legal">
     <div class="cpub-legal-header">
-      <h1 class="cpub-legal-title">Terms of Service</h1>
-      <p class="cpub-legal-updated">Last updated: April 2026</p>
+      <h1 class="cpub-legal-title">Community Terms and Code of Conduct</h1>
+      <p class="cpub-legal-subtitle">{{ brandAndDomain }}</p>
+      <p class="cpub-legal-updated">Last updated: March 2026</p>
     </div>
 
     <div class="cpub-legal-body">
+      <p>Welcome to {{ brandAnd }}. CommonPub is an open source, federated publishing platform for maker and hardware communities. {{ host }} is where we host it, where people publish projects, build logs, and guides, and where they talk with each other about the work. These terms cover how you use {{ host }} and the community spaces around it.</p>
+      <p>The CommonPub software itself is open source under the AGPL-3.0 license. You are free to read it, change it, and run your own instance. If you self-host, the parts of these terms about our hosted service do not apply to you, but the spirit of the code of conduct and the values below is something we hope you carry forward.</p>
+      <p>By using {{ host }}, you agree to these terms and to the code of conduct here. If you do not agree with them, please do not use the service.</p>
+
       <section class="cpub-legal-section">
-        <h2>1. Acceptance</h2>
-        <p>By creating an account or using {{ siteName }}, you agree to these Terms of Service and our <NuxtLink to="/privacy">Privacy Policy</NuxtLink>. If you do not agree, do not use the service.</p>
+        <h2>1. What this covers</h2>
+        <p>These terms apply to the {{ host }} hosted service and the community spaces we run, including project pages, discussion threads, and our chat channels. They also cover interactions you start here that reach other servers.</p>
+        <p>CommonPub speaks ActivityPub, so the network is federated. When you post in public, your content can be sent to other servers in the network and to the people who follow you from those servers. Once something is public and federated, copies can live on servers we do not control, and we cannot pull those copies back. Keep that in mind when you decide what to publish.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>2. Your Account</h2>
+        <h2>2. Using {{ brandAnd }}</h2>
+        <p>You are welcome to:</p>
         <ul>
-          <li>You must provide accurate information when creating an account.</li>
-          <li>You are responsible for keeping your login credentials secure.</li>
-          <li>You must be at least 16 years old to create an account (or the minimum age required by your jurisdiction).</li>
-          <li>One person, one account. Automated or bot accounts require prior approval from the instance administrator.</li>
+          <li>Publish projects, build logs, guides, and writeups for personal, educational, and commercial purposes.</li>
+          <li>Run workshops, classes, and training programs that use {{ brandAnd }}.</li>
+          <li>Share tutorials, screenshots, and demos of your work anywhere you like.</li>
+          <li>Follow, reply to, and collaborate with people on other federated servers.</li>
+          <li>Build on the open source code and run your own instance.</li>
         </ul>
+        <p>If you share work that features {{ brandOr }}, a credit like "Published on {{ host }}" or a link back is appreciated. It is not required.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>3. Your content and ownership</h2>
+        <p>You own your work. We claim no ownership over your projects, posts, files, designs, or anything else you make or upload. We do not sell your content, and we do not train models on it.</p>
+        <p>By posting, you give us a limited license to store, display, and federate your content for the single purpose of running the service. That means holding it in our infrastructure, showing it in the interface, and sending your public posts to other servers and followers in the network. The license ends when you delete the content or your account, except for federated copies already sent to servers we do not control.</p>
+        <p>You are responsible for having the rights to what you post, and for getting consent when your work involves other people's data, faces, or voices. We encourage you to license your projects openly so others can learn from them and build on them, but that choice is always yours.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>3. Your Content</h2>
-        <p>You retain ownership of content you create on {{ siteName }}. By publishing content, you grant us a license to display, distribute, and federate it as part of operating the platform.</p>
+        <h2>4. An open community</h2>
+        <p>CommonPub exists so that the people who build things can share them and own them. We want you to:</p>
         <ul>
-          <li>You must have the right to publish any content you upload (no plagiarism, no copyright infringement).</li>
-          <li>Content you import must be your own original work.</li>
-          <li>You may delete your content at any time. Federated copies on remote instances are outside our control.</li>
-          <li>We may remove content that violates these terms or applicable law.</li>
+          <li>Publish your work freely, here and on any other platform.</li>
+          <li>Write tutorials and teach what you know.</li>
+          <li>Document the messy parts of a project, the dead ends and the rebuilds, not just the clean result.</li>
+          <li>Use the platform in classrooms, hackerspaces, and workshops.</li>
+          <li>Use it for paid and commercial work.</li>
+          <li>Contribute improvements back to the project under our contributor model, with a DCO sign-off, if you want to make the software better.</li>
         </ul>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>4. Acceptable Use</h2>
+        <h2>5. Code of conduct</h2>
+        <p>We want {{ brandAnd }} to be a place where people treat each other with respect.</p>
+        <p>Everyone is welcome here regardless of race, ethnicity, national origin, religion, gender, gender identity, sexual orientation, disability, age, or experience level. A beginner asking a basic question deserves the same respect as a veteran shipping their tenth board.</p>
+        <p>You agree to:</p>
+        <ul>
+          <li>Treat other people with respect and assume good faith.</li>
+          <li>Keep your criticism aimed at the work, not at the person who made it.</li>
+          <li>Respect other people's privacy and their consent.</li>
+        </ul>
         <p>You agree not to:</p>
         <ul>
-          <li>Post illegal content or content that infringes others' rights</li>
-          <li>Harass, threaten, or abuse other users</li>
-          <li>Spam, phish, or distribute malware</li>
-          <li>Attempt to gain unauthorized access to the platform or other users' accounts</li>
-          <li>Scrape, crawl, or automatically collect data from the platform beyond what public APIs allow</li>
-          <li>Impersonate another person or entity</li>
-          <li>Use the platform for commercial advertising without permission</li>
+          <li>Harass, threaten, demean, or discriminate against anyone.</li>
+          <li>Post hate speech or content that attacks people for who they are.</li>
+          <li>Share someone's private information without their consent.</li>
+          <li>Impersonate other people or misrepresent who built something.</li>
         </ul>
+        <p>How we enforce this: where we reasonably can, we reach out first and try to sort the problem out. Enforcement is proportionate, from a quiet word, to a warning, to suspension, to removal for serious or repeated harm. If you think we got it wrong, you can appeal. These rules apply in our community spaces and to federated interactions that start here.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>5. Moderation</h2>
-        <p>The instance administrator may, at their discretion:</p>
+        <h2>6. Acceptable use</h2>
+        <p>To keep the platform working and safe for everyone, you agree not to:</p>
         <ul>
-          <li>Remove content that violates these terms</li>
-          <li>Suspend or delete accounts that violate these terms</li>
-          <li>Block federation with other instances</li>
+          <li>Disrupt, damage, or try to gain unauthorized access to our systems.</li>
+          <li>Upload or share content that is illegal or that harms others.</li>
+          <li>Infringe anyone else's intellectual property.</li>
+          <li>Write, host, or distribute malware.</li>
+          <li>Build surveillance of individuals or populations, or track people without their knowledge and consent.</li>
+          <li>Collect personal or biometric data without clear consent and real protection.</li>
         </ul>
-        <p>We aim to handle moderation decisions transparently and fairly.</p>
+        <p>We can suspend or end accounts that break these rules.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>7. What we will not work with</h2>
+        <p>{{ brandAnd }} exist{{ s }} to help communities. We are clear about the work we will not be part of. These limits apply to us, to the partners and funders we take on, and to how the platform may be used.</p>
+        <ul>
+          <li>We do not work with defense contractors, and we do not support military or defense applications of our tools. We will not partner with, take funding from, or provide paid services to organizations whose purpose is building or deploying weapons or military systems.</li>
+          <li>We do not work with companies that materially support the Israeli military (IDF). This is about complicity in unlawful military operations and violations of international humanitarian law. It follows the call of the BDS movement and the No Tech for Apartheid campaign.</li>
+          <li>We will not knowingly platform or provide services for lethal or offensive weapons and targeting systems, for mass or targeted surveillance of people, or for any use meant to harm a community rather than help it.</li>
+          <li>We reserve the right to refuse or end service to any organization that uses our tools for these purposes, or that materially supports war crimes.</li>
+        </ul>
+        <p>To be clear, these limits are about conduct, about military and defense use, and about material support for war crimes. They are not about anyone's nationality, ethnicity, or faith. Individual makers are always welcome here no matter where they are from or what they believe, and section 5 protects them.</p>
+      </section>
+
+      <section class="cpub-legal-section">
+        <h2>8. Statement of values</h2>
+        <p>We are makers, and we believe the tools people build should belong to everyone and should be used to help, not to harm.</p>
+        <p>These values shape who we work with and what we build, and they are not up for negotiation.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>6. Availability and Changes</h2>
-        <p>We provide {{ siteName }} on an "as is" basis. We do not guarantee uninterrupted availability. We may modify or discontinue the service at any time.</p>
-        <p>These terms may be updated. Continued use after changes constitutes acceptance.</p>
+        <h2>9. No warranty and limits on liability</h2>
+        <p>{{ host }} is provided as is, without warranties of any kind. We work to keep it reliable, but we cannot promise it will never go down or never lose data.</p>
+        <p>To the extent the law allows, we are not liable for indirect, incidental, or consequential damages, including loss of data, projects, or business opportunities, even if we were told such loss was possible.</p>
+        <p>Because CommonPub is open source and federated, you can export your work and run your own instance at any time. We still recommend keeping your own backups of anything you cannot afford to lose.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>7. Limitation of Liability</h2>
-        <p>To the fullest extent permitted by law, the instance operator is not liable for any indirect, incidental, or consequential damages arising from your use of the platform. This includes data loss, service interruptions, or actions of other users or federated instances.</p>
+        <h2>10. Changes to these terms</h2>
+        <p>We may update these terms from time to time. We will tell you about material changes through the service or by email. Using {{ host }} after a change is posted means you accept the updated terms.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>8. Account Deletion</h2>
-        <p>You may delete your account at any time from your <NuxtLink to="/settings/account">account settings</NuxtLink>. Account deletion is permanent and removes all your data, content, and activity from this instance. See our <NuxtLink to="/privacy">Privacy Policy</NuxtLink> for details on data retention and federation.</p>
+        <h2>11. Governing law</h2>
+        <p>These terms are governed by and read in line with applicable law, and any disputes will be handled through the appropriate legal channels.</p>
       </section>
 
       <section class="cpub-legal-section">
-        <h2>9. Contact</h2>
-        <p>For questions about these terms, contact the administrator of this {{ siteName }} instance.</p>
+        <h2>12. Contact</h2>
+        <p>Questions about these terms or the code of conduct can come to us through {{ host }} or our community channels, including Discord and GitHub.</p>
       </section>
+
+      <p class="cpub-legal-closer">Made by makers. Built to help, not to harm.</p>
     </div>
   </div>
 </template>
@@ -107,6 +173,13 @@ const siteName = useSiteName();
   margin-bottom: 8px;
 }
 
+.cpub-legal-subtitle {
+  font-size: 14px;
+  color: var(--text-dim);
+  font-family: var(--font-mono);
+  margin-bottom: 8px;
+}
+
 .cpub-legal-updated {
   font-size: 12px;
   color: var(--text-faint);
@@ -119,6 +192,19 @@ const siteName = useSiteName();
   gap: 32px;
 }
 
+.cpub-legal-body > p {
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--text-dim);
+}
+
+.cpub-legal-closer {
+  font-style: italic;
+  color: var(--text);
+  border-top: var(--border-width-default) solid var(--border);
+  padding-top: 24px;
+}
+
 .cpub-legal-section h2 {
   font-size: 16px;
   font-weight: 600;

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

@@ -95,6 +95,7 @@ const {
   autoSaveStatus,
   silentSave,
   handlePublish: doPublish,
+  handleSchedule: doSchedule,
   buildSaveBody,
   cancelAutoSave,
   initAutoSave,
@@ -182,10 +183,20 @@ if (!isNew.value) {
       series: (d.series as string) || '',
       category: (d.category as string) || '',
       subtitle: (d.subtitle as string) || '',
+      scheduledAt: d.scheduledAt ? toLocalDatetimeInput(d.scheduledAt as string) : '',
     };
   }
 }
 
+// Convert a stored ISO timestamp to the local "YYYY-MM-DDTHH:mm" value that an
+// <input type="datetime-local"> expects, so an existing schedule shows correctly.
+function toLocalDatetimeInput(iso: string): string {
+  const dt = new Date(iso);
+  if (Number.isNaN(dt.getTime())) return '';
+  const pad = (n: number): string => String(n).padStart(2, '0');
+  return `${dt.getFullYear()}-${pad(dt.getMonth() + 1)}-${pad(dt.getDate())}T${pad(dt.getHours())}:${pad(dt.getMinutes())}`;
+}
+
 // --- Auto-generate slug from title ---
 const slugManuallyEdited = ref(false);
 function slugify(text: string): string {
@@ -294,6 +305,13 @@ async function handlePublish(): Promise<void> {
   }
 }
 
+// --- Schedule (deferred publish) ---
+// metadata.scheduledAt is set by the editor's schedule control (e.g. BlogEditor).
+const canSchedule = computed(() => !!(metadata.value.scheduledAt as string | undefined));
+async function handleSchedule(): Promise<void> {
+  await doSchedule(validate);
+}
+
 // --- Preview mode ---
 function enterPreview(): void {
   mode.value = 'preview';
@@ -473,6 +491,9 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
         <button class="cpub-topbar-btn" :disabled="saving || !title" @click="silentSave">
           {{ saving ? 'Saving...' : 'Save Draft' }}
         </button>
+        <button v-if="canSchedule" class="cpub-topbar-btn" :disabled="saving || !title" @click="handleSchedule">
+          Schedule
+        </button>
         <button class="cpub-topbar-btn cpub-topbar-btn-primary" :disabled="saving || !title" @click="handlePublish">
           Publish
         </button>

package/server/api/admin/federation/hub-mirrors/index.post.ts

@@ -33,6 +33,7 @@ export default defineEventHandler(async (event) => {
     name: actor.name ?? actor.preferredUsername ?? remoteSlug,
     description: actor.summary ?? undefined,
     iconUrl: actor.icon?.url ?? undefined,
+    bannerUrl: actor.image?.url ?? undefined,
     url: `https://${domain}/hubs/${remoteSlug}`,
   });
 

package/server/api/admin/registry/directory.get.ts

@@ -0,0 +1,56 @@
+import { safeFetch } from '@commonpub/protocol';
+
+/**
+ * GET /api/admin/registry/directory (Phase 4 — peer discovery)
+ *
+ * For an instance that ANNOUNCES to a registry but is not itself a registry:
+ * fetch the configured registry's PUBLIC directory (`GET /api/registry/instances`)
+ * so the operator can see every peer registered there. Without this, only the
+ * registry server itself could see the directory — pinging instances had no way
+ * to discover each other.
+ *
+ * Read-only (no hide/block — those are registry-owner controls). SSRF-guarded via
+ * `safeFetch`. Admin only, gated on `features.announceToRegistry`.
+ */
+export default defineEventHandler(async (event) => {
+  requirePermission(event, 'federation.manage');
+  requireFeature('announceToRegistry');
+
+  const config = useConfig();
+  const registryUrl = config.federation?.registryUrl;
+  if (!registryUrl) {
+    return { instances: [], total: 0, registryUrl: null, self: false };
+  }
+
+  let regHost: string;
+  try {
+    regHost = new URL(registryUrl).hostname;
+  } catch {
+    throw createError({ statusCode: 500, statusMessage: 'Invalid registryUrl config' });
+  }
+
+  // If we ping ourselves (this instance IS its own registry), there's no remote
+  // directory to pull — the local actAsRegistry view already covers it.
+  if (regHost === config.instance.domain) {
+    return { instances: [], total: 0, registryUrl, self: true };
+  }
+
+  const q = getQuery(event);
+  const search = typeof q.search === 'string' ? q.search : '';
+  const target = new URL('/api/registry/instances', registryUrl);
+  if (search) target.searchParams.set('search', search);
+  target.searchParams.set('limit', '50');
+
+  try {
+    const { html } = await safeFetch(target.toString(), { timeoutMs: 10_000 });
+    const json = JSON.parse(html) as { instances?: unknown[]; total?: number };
+    return {
+      instances: Array.isArray(json.instances) ? json.instances : [],
+      total: typeof json.total === 'number' ? json.total : 0,
+      registryUrl,
+      self: false,
+    };
+  } catch {
+    throw createError({ statusCode: 502, statusMessage: 'Could not reach the registry directory' });
+  }
+});

package/server/api/content/[id]/schedule.post.ts

@@ -0,0 +1,23 @@
+import { scheduleContent } from '@commonpub/server';
+import type { ContentDetail } from '@commonpub/server';
+import { z } from 'zod';
+
+const scheduleBodySchema = z.object({ scheduledAt: z.coerce.date() });
+
+export default defineEventHandler(async (event): Promise<ContentDetail> => {
+  const user = requireAuth(event);
+  const db = useDB();
+  const { id } = parseParams(event, { id: 'uuid' });
+  const { scheduledAt } = await parseBody(event, scheduleBodySchema);
+
+  if (scheduledAt.getTime() <= Date.now()) {
+    throw createError({ statusCode: 400, statusMessage: 'Scheduled time must be in the future' });
+  }
+
+  const content = await scheduleContent(db, id, user.id, scheduledAt);
+  if (!content) {
+    throw createError({ statusCode: 404, statusMessage: 'Content not found, not yours, or already published' });
+  }
+
+  return content;
+});

package/server/plugins/scheduled-publishing.ts

@@ -0,0 +1,51 @@
+/**
+ * Scheduled-publishing worker.
+ * Runs on an interval and publishes any content whose `scheduledAt` time has
+ * passed (status='scheduled'). Mirrors the federation-delivery worker: an
+ * in-process setInterval started after a short stagger, cleaned up on close.
+ *
+ * The claim is a single atomic `UPDATE ... RETURNING` inside publishDueScheduled,
+ * so this is safe to run on multiple replicas without double-publishing.
+ */
+import { publishDueScheduled } from '@commonpub/server';
+
+export default defineNitroPlugin((nitro) => {
+  if (process.env.NODE_ENV === 'test') return;
+
+  // Sweep cadence. One minute keeps publish latency low without meaningful load
+  // (a single indexed UPDATE per tick).
+  const INTERVAL_MS = 60_000;
+
+  let interval: ReturnType<typeof setInterval> | null = null;
+
+  const startupTimer = setTimeout(() => {
+    try {
+      console.log(`[scheduled-publishing] worker started (interval: ${INTERVAL_MS}ms)`);
+      runSweep();
+      interval = setInterval(runSweep, INTERVAL_MS);
+    } catch (err) {
+      console.error('[scheduled-publishing] worker failed to start:', err instanceof Error ? err.message : err);
+    }
+  }, 12_000);
+
+  async function runSweep() {
+    try {
+      const db = useDB();
+      const config = useConfig();
+      const published = await publishDueScheduled(db, config);
+      if (published > 0) {
+        console.log(`[scheduled-publishing] published ${published} scheduled item(s)`);
+      }
+    } catch (err) {
+      console.error('[scheduled-publishing] sweep error:', err instanceof Error ? err.message : err);
+    }
+  }
+
+  nitro.hooks.hook('close', () => {
+    clearTimeout(startupTimer);
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  });
+});

package/utils/safeStyle.ts

@@ -0,0 +1,16 @@
+/**
+ * Build a CSS `background-image` style from a possibly-untrusted URL — e.g. a
+ * federated hub's banner, which is now writable via inbound ActivityPub.
+ *
+ * Returns `{}` unless the URL is http(s). The URL is percent-encoded (so a `"`
+ * or backslash can't terminate the quoted string) and wrapped in double quotes,
+ * so a crafted value cannot break out of the `url(...)` context and inject CSS.
+ */
+export function bannerBgStyle(
+  url: string | null | undefined,
+  extra: Record<string, string> = { backgroundSize: 'cover', backgroundPosition: 'center' },
+): Record<string, string> {
+  if (!url || !/^https?:\/\//i.test(url)) return {};
+  const safe = encodeURI(url).replace(/["\\]/g, '');
+  return { backgroundImage: `url("${safe}")`, ...extra };
+}