@commonpub/layer 0.18.3 → 0.19.0

package/components/ContentPicker.vue

@@ -53,12 +53,15 @@ watch(() => props.open, (v) => {
     search.value = '';
   }
 });
+
+const dialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(dialogRef, () => props.open, close);
 </script>
 
 <template>
   <Teleport to="body">
     <div v-if="open" class="cpub-picker-overlay" @click.self="close">
-      <div class="cpub-picker-dialog" role="dialog" aria-label="Select content" @keydown.escape="close">
+      <div ref="dialogRef" class="cpub-picker-dialog" role="dialog" aria-label="Select content">
         <div class="cpub-picker-header">
           <h2 class="cpub-picker-title"><i class="fa-solid fa-link"></i> Link Existing Content</h2>
           <button class="cpub-picker-close" aria-label="Close" @click="close"><i class="fa-solid fa-xmark"></i></button>

package/components/ImportUrlModal.vue

@@ -77,16 +77,14 @@ function resetState(): void {
   confirmed.value = false;
 }
 
-function onKeydown(e: KeyboardEvent): void {
-  if (e.key === 'Escape') handleClose();
-  if (e.key === 'Enter' && !result.value && canSubmit.value && !loading.value) handleFetch();
-}
+const dialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(dialogRef, () => props.show, handleClose);
 </script>
 
 <template>
   <Teleport to="body">
-    <div v-if="show" class="cpub-import-overlay" @click.self="handleClose" @keydown="onKeydown">
-      <div class="cpub-import-dialog" role="dialog" aria-labelledby="import-url-title" aria-modal="true">
+    <div v-if="show" class="cpub-import-overlay" @click.self="handleClose">
+      <div ref="dialogRef" class="cpub-import-dialog" role="dialog" aria-labelledby="import-url-title" aria-modal="true">
         <div class="cpub-import-header">
           <h2 id="import-url-title"><i class="fa-solid fa-file-import"></i> Import from URL</h2>
           <button class="cpub-import-close" aria-label="Close" @click="handleClose">

package/components/PublishErrorsModal.vue

@@ -3,7 +3,7 @@
  * Modal showing publish validation errors.
  * Displayed when the user tries to publish content that's missing required fields.
  */
-defineProps<{
+const props = defineProps<{
   errors: string[];
   show: boolean;
 }>();
@@ -11,12 +11,15 @@ defineProps<{
 const emit = defineEmits<{
   dismiss: [];
 }>();
+
+const dialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(dialogRef, () => props.show, () => emit('dismiss'));
 </script>
 
 <template>
   <Teleport to="body">
     <div v-if="show" class="cpub-publish-errors-overlay" @click.self="emit('dismiss')">
-      <div class="cpub-publish-errors-card" role="alertdialog" aria-labelledby="publish-errors-title">
+      <div ref="dialogRef" class="cpub-publish-errors-card" role="alertdialog" aria-labelledby="publish-errors-title">
         <h3 id="publish-errors-title" class="cpub-publish-errors-title">
           <i class="fa-solid fa-circle-exclamation" /> Not ready to publish
         </h3>

package/components/RemoteFollowDialog.vue

@@ -36,12 +36,15 @@ function submit(): void {
 }
 
 defineExpose({ show });
+
+const dialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(dialogRef, () => open.value, close);
 </script>
 
 <template>
   <Teleport to="body">
     <div v-if="open" class="cpub-rfd-overlay" @click.self="close">
-      <div class="cpub-rfd-dialog" role="dialog" aria-modal="true">
+      <div ref="dialogRef" class="cpub-rfd-dialog" role="dialog" aria-modal="true">
         <div class="cpub-rfd-header">
           <h3>Follow from your instance</h3>
           <button class="cpub-rfd-close" aria-label="Close" @click="close">

package/composables/useFocusTrap.ts

@@ -0,0 +1,90 @@
+import type { Ref } from 'vue';
+
+/**
+ * Modal a11y helper: focus trap, initial focus, focus restoration, body
+ * scroll lock. Mirrors the behaviour of `<Dialog>` in @commonpub/ui without
+ * forcing a visual refactor of layer-side modals that have their own
+ * header/footer styling.
+ *
+ * Wire it from a modal's `<script setup>`:
+ *
+ *   const dialogRef = ref<HTMLElement | null>(null);
+ *   useFocusTrap(dialogRef, () => props.open, close);
+ *
+ * Where `() => props.open` is a getter that returns true while the modal
+ * is visible, and `close` is the function that dismisses it (called when
+ * the user presses Escape).
+ *
+ * The trap cycles Tab/Shift+Tab within `dialogRef`'s focusable
+ * descendants. On open, focus moves to the first focusable element. On
+ * close, focus restores to whatever element had focus when the modal
+ * opened. Body scroll is locked while open.
+ */
+export function useFocusTrap(
+  dialogRef: Ref<HTMLElement | null>,
+  isOpen: () => boolean,
+  onEscape: () => void,
+): void {
+  let previousActive: HTMLElement | null = null;
+
+  function focusableElements(): HTMLElement[] {
+    if (!dialogRef.value) return [];
+    return Array.from(
+      dialogRef.value.querySelectorAll<HTMLElement>(
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])',
+      ),
+    );
+  }
+
+  function handleKeydown(event: KeyboardEvent): void {
+    if (!isOpen()) return;
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      onEscape();
+      return;
+    }
+    if (event.key !== 'Tab') return;
+
+    const focusable = focusableElements();
+    if (focusable.length === 0) {
+      event.preventDefault();
+      return;
+    }
+    const first = focusable[0]!;
+    const last = focusable[focusable.length - 1]!;
+    const active = document.activeElement as HTMLElement | null;
+
+    if (event.shiftKey) {
+      if (active === first || !dialogRef.value?.contains(active)) {
+        event.preventDefault();
+        last.focus();
+      }
+    } else {
+      if (active === last || !dialogRef.value?.contains(active)) {
+        event.preventDefault();
+        first.focus();
+      }
+    }
+  }
+
+  watch(isOpen, async (open) => {
+    if (open) {
+      previousActive = document.activeElement as HTMLElement | null;
+      document.body.style.overflow = 'hidden';
+      document.addEventListener('keydown', handleKeydown);
+      await nextTick();
+      const first = focusableElements()[0];
+      first?.focus();
+    } else {
+      document.body.style.overflow = '';
+      document.removeEventListener('keydown', handleKeydown);
+      previousActive?.focus();
+      previousActive = null;
+    }
+  });
+
+  onUnmounted(() => {
+    document.body.style.overflow = '';
+    document.removeEventListener('keydown', handleKeydown);
+  });
+}

package/layouts/default.vue

@@ -83,6 +83,10 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 <template>
   <div class="cpub-layout">
+    <!-- WCAG 2.4.1 — visually hidden until focused, lets keyboard users
+         skip past the global nav directly to page content. -->
+    <a href="#main-content" class="cpub-skip-link">Skip to content</a>
+
     <!-- ═══ TOP NAV ═══ -->
     <header class="cpub-topbar">
       <NuxtLink to="/" class="cpub-topbar-logo">
@@ -218,6 +222,28 @@ const userUsername = computed(() => user.value?.username ?? '');
 </template>
 
 <style scoped>
+.cpub-skip-link {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: var(--z-modal, 9999);
+  padding: 8px 16px;
+  background: var(--accent);
+  color: var(--color-on-accent, #fff);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-wider);
+  text-decoration: none;
+  transform: translateY(-100%);
+  transition: transform var(--transition-fast);
+}
+.cpub-skip-link:focus {
+  transform: translateY(0);
+  outline: 2px solid var(--text);
+  outline-offset: -2px;
+}
+
 .cpub-layout { min-height: 100vh; display: flex; flex-direction: column; }
 
 /* ═══ TOPBAR ═══ */

package/nuxt.config.ts

@@ -14,10 +14,16 @@ export default defineNuxtConfig({
   compatibilityDate: '2024-11-01',
   app: {
     head: {
+      htmlAttrs: { lang: 'en' },
       link: [
         {
           rel: 'stylesheet',
           href: 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css',
+          // SRI: protects against a compromised CDN serving altered CSS.
+          // If Font Awesome is upgraded, regenerate via:
+          //   curl -sS https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css \
+          //     | openssl dgst -sha384 -binary | openssl base64 -A | sed 's/^/sha384-/'
+          integrity: 'sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk',
           crossorigin: 'anonymous',
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -28,9 +28,6 @@
   },
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
-    "@commonpub/explainer": "^0.7.12",
-    "@commonpub/schema": "^0.14.4",
-    "@commonpub/server": "^2.47.3",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -56,10 +53,13 @@
     "@commonpub/auth": "0.5.1",
     "@commonpub/config": "0.11.0",
     "@commonpub/docs": "0.6.2",
-    "@commonpub/editor": "0.7.9",
+    "@commonpub/protocol": "0.9.9",
+    "@commonpub/schema": "0.15.0",
+    "@commonpub/server": "2.48.0",
+    "@commonpub/explainer": "0.7.12",
     "@commonpub/learning": "0.5.2",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/protocol": "0.9.9"
+    "@commonpub/editor": "0.7.9"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/admin/api-keys.vue

@@ -446,4 +446,19 @@ function fmtErrorRate(rate: number): string {
 .cpub-empty { padding: 40px; text-align: center; color: var(--text-dim); background: var(--surface); border: var(--border-width-default) solid var(--border); }
 .cpub-empty code { font-family: var(--font-mono); background: var(--surface2); padding: 1px 6px; }
 .cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+
+/* Mobile — admin api-keys table is the worst offender at 375px because
+   Postgres-style 6-column tables don't shrink. We let the table-wrapper
+   scroll horizontally and tighten everything else. The usage drawer's
+   stat grid drops to a single column. */
+@media (max-width: 768px) {
+  .cpub-key-table { display: block; overflow-x: auto; white-space: nowrap; }
+  .cpub-key-table th,
+  .cpub-key-table td { padding: 8px 10px; font-size: 11px; }
+  .cpub-key-actions { flex-direction: column; gap: 4px; align-items: stretch; }
+  .cpub-key-actions .cpub-btn-link { padding: 4px 6px; }
+  .cpub-usage-grid { grid-template-columns: 1fr; gap: 12px; }
+  .cpub-usage-by-day ul { font-size: 10px; }
+  .cpub-key-usage-row td { padding: 12px; }
+}
 </style>

package/pages/admin/federation.vue

@@ -526,4 +526,22 @@ async function refederate(): Promise<void> {
   margin-top: 10px; padding: 10px 14px; font-size: 0.8125rem; font-family: var(--font-mono);
   background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); color: var(--text);
 }
+
+/* Mobile — admin federation dashboard. The stats grid (4 cells × 100px min)
+   plus 24px gap claims the entire 375px viewport with nothing left for
+   labels. The form wraps each input + button onto its own line. The
+   activity-list rows shrink to legible. */
+@media (max-width: 768px) {
+  .cpub-fed-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
+  .cpub-fed-stat { padding: 12px 10px; }
+  .cpub-fed-stat-val { font-size: 1.25rem; }
+  .cpub-fed-tabs { overflow-x: auto; }
+  .cpub-fed-tabs button { padding: 8px 12px; white-space: nowrap; }
+  .cpub-fed-form { flex-direction: column; align-items: stretch; gap: 8px; }
+  .cpub-fed-form .cpub-fed-btn,
+  .cpub-fed-form .cpub-fed-input { width: 100%; }
+  .cpub-fed-actor { font-size: 11px; }
+  .cpub-fed-time { font-size: 9px; }
+  .cpub-admin-title { font-size: 1rem; }
+}
 </style>

package/pages/federation/users/[handle].vue

@@ -325,4 +325,38 @@ function stripHtml(html: string): string {
   font-weight: 600;
   margin-bottom: var(--space-4);
 }
+
+/* Mobile — federated profile view. The header's avatar+info+follow-btn
+   row at gap:16px overflows 375px. Stats wrap, actions stack, DM form
+   actions stack. Avatar shrinks. */
+@media (max-width: 768px) {
+  .cpub-remote-profile { padding: var(--space-4) var(--space-3); }
+  .cpub-remote-profile__header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+  .cpub-remote-profile__avatar {
+    width: 56px;
+    height: 56px;
+  }
+  .cpub-remote-profile__name { font-size: 1.125rem; }
+  .cpub-remote-profile__actions {
+    flex-direction: column;
+    align-items: stretch;
+    width: 100%;
+    gap: var(--space-2);
+  }
+  .cpub-remote-profile__follow-btn,
+  .cpub-remote-profile__dm-send,
+  .cpub-remote-profile__dm-cancel { width: 100%; }
+  .cpub-remote-profile__stats {
+    flex-wrap: wrap;
+    gap: var(--space-2);
+    font-size: var(--font-size-sm);
+  }
+  .cpub-remote-profile__dm-actions {
+    flex-direction: column;
+  }
+}
 </style>

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

@@ -4,13 +4,15 @@ import { incrementViewCount } from '@commonpub/server';
 const recentViews = new Map<string, number>();
 const VIEW_COOLDOWN_MS = 5 * 60 * 1000;
 
-// Periodic cleanup every 2 minutes
+// Periodic cleanup every 2 minutes. `.unref()` so this interval doesn't
+// hold the event loop on shutdown — Nitro's graceful-exit path shouldn't
+// have to wait on a view-dedup timer.
 setInterval(() => {
   const now = Date.now();
   for (const [key, ts] of recentViews) {
     if (now - ts > VIEW_COOLDOWN_MS) recentViews.delete(key);
   }
-}, 120_000);
+}, 120_000).unref();
 
 export default defineEventHandler(async (event): Promise<{ success: boolean }> => {
   const db = useDB();

package/server/api/image-proxy.get.ts

@@ -3,13 +3,18 @@
  * Proxies and caches remote images for federated content.
  * Prevents slow cross-origin fetches on content cards.
  *
- * Security: only proxies images from known federation origins
- * (federated_content.origin_domain or remote_actors.instance_domain).
+ * Security: enforces HTTPS, blocks private/reserved hosts on the input
+ * URL AND on every redirect target (via safeFetchBinary), streams the
+ * response body with a hard size cap so a chunked-encoding upstream
+ * can't OOM us by withholding Content-Length.
  */
+import { safeFetchBinary } from '@commonpub/server';
+
 export default defineEventHandler(async (event) => {
   const query = getQuery(event);
   const url = query.url as string | undefined;
-  const width = Math.min(parseInt(String(query.w || '800'), 10), 1920);
+  // `w` query param is reserved for future image-resize work; not currently
+  // used for proxying — the upstream image is returned as-is.
 
   if (!url || typeof url !== 'string') {
     throw createError({ statusCode: 400, statusMessage: 'Missing url parameter' });
@@ -23,66 +28,24 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, statusMessage: 'Invalid URL' });
   }
 
-  // Only allow HTTPS image URLs
+  // Only allow HTTPS image URLs (defense-in-depth on top of safeFetchBinary's
+  // own private-URL check; safeFetchBinary allows http for content-import use,
+  // but image-proxy is HTTPS-only).
   if (parsed.protocol !== 'https:') {
     throw createError({ statusCode: 400, statusMessage: 'Only HTTPS URLs allowed' });
   }
 
-  // Block localhost/private IPs (SSRF prevention)
-  const hostname = parsed.hostname.toLowerCase();
-  const h = hostname.replace(/^\[|\]$/g, ''); // strip IPv6 brackets
-  if (
-    h === 'localhost' ||
-    h === 'localhost.localdomain' ||
-    h === 'metadata.google.internal' ||
-    h.endsWith('.local') ||
-    /^127\./.test(h) ||
-    /^10\./.test(h) ||
-    /^172\.(1[6-9]|2\d|3[01])\./.test(h) ||
-    /^192\.168\./.test(h) ||
-    /^169\.254\./.test(h) ||
-    /^0\./.test(h) ||
-    h === '::1' ||
-    /^f[cd]/i.test(h) ||
-    /^fe80/i.test(h)
-  ) {
-    throw createError({ statusCode: 403, statusMessage: 'Private addresses not allowed' });
-  }
-
-  // Fetch the remote image
-  const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), 15_000);
-
   try {
-    const response = await fetch(url, {
-      signal: controller.signal,
-      headers: {
-        Accept: 'image/*',
-        'User-Agent': 'CommonPub/1.0 (image-proxy)',
-      },
-      redirect: 'follow',
+    const { buffer, contentType } = await safeFetchBinary(url, {
+      accept: 'image/*',
+      userAgent: 'CommonPub/1.0 (image-proxy)',
+      timeoutMs: 15_000,
     });
 
-    clearTimeout(timeout);
-
-    if (!response.ok) {
-      throw createError({ statusCode: 502, statusMessage: `Upstream returned ${response.status}` });
-    }
-
-    const contentType = response.headers.get('content-type') || '';
     if (!contentType.startsWith('image/')) {
       throw createError({ statusCode: 502, statusMessage: 'Not an image' });
     }
 
-    // Limit to 10MB
-    const contentLength = parseInt(response.headers.get('content-length') || '0', 10);
-    if (contentLength > 10 * 1024 * 1024) {
-      throw createError({ statusCode: 502, statusMessage: 'Image too large' });
-    }
-
-    const buffer = Buffer.from(await response.arrayBuffer());
-
-    // Set aggressive cache headers — federated images rarely change
     setResponseHeaders(event, {
       'Content-Type': contentType,
       'Cache-Control': 'public, max-age=86400, s-maxage=604800, stale-while-revalidate=86400',
@@ -91,8 +54,16 @@ export default defineEventHandler(async (event) => {
 
     return buffer;
   } catch (err: unknown) {
-    clearTimeout(timeout);
     if ((err as { statusCode?: number })?.statusCode) throw err;
+    const msg = err instanceof Error ? err.message : 'Failed to fetch image';
+    // Map known private-URL/redirect rejections to 403 so callers can distinguish
+    // them from upstream failures.
+    if (msg.includes('private or reserved') || msg.includes('Too many redirects')) {
+      throw createError({ statusCode: 403, statusMessage: msg });
+    }
+    if (msg === 'Response too large') {
+      throw createError({ statusCode: 502, statusMessage: 'Image too large' });
+    }
     throw createError({ statusCode: 502, statusMessage: 'Failed to fetch image' });
   }
 });

package/server/api/realtime/stream.get.ts

@@ -16,11 +16,37 @@ import { getUnreadCount, getUnreadMessageCount, subscribeSseEvents } from '@comm
  * the DB. The pub/sub payload is a nudge; we never trust it as the source
  * of truth.
  */
+
+/**
+ * Per-user concurrent SSE connection cap. A normal browser will hold
+ * 1–2 connections per origin (HTTP/2 multiplexes); a script could
+ * trivially open hundreds, each holding a Redis subscriber + interval
+ * timers. Cap at 10 — generous for legitimate clients, hostile for
+ * abuse. The map lives at module scope and persists for the Nitro
+ * process lifetime.
+ *
+ * Multi-instance scale-out: each Nitro process has its own map, so
+ * the effective cap across N instances is `10 × N`. Acceptable; an
+ * attacker can't pin to one instance via L7 routing without a
+ * sticky-session config.
+ */
+const MAX_CONNECTIONS_PER_USER = 10;
+const userConnections = new Map<string, number>();
+
 export default defineEventHandler(async (event) => {
   const user = requireAuth(event);
   const userId = user.id;
   const db = useDB();
 
+  const current = userConnections.get(userId) ?? 0;
+  if (current >= MAX_CONNECTIONS_PER_USER) {
+    throw createError({
+      statusCode: 429,
+      statusMessage: 'Too many concurrent realtime connections',
+    });
+  }
+  userConnections.set(userId, current + 1);
+
   const encoder = new TextEncoder();
   const stream = new ReadableStream({
     async start(controller) {
@@ -39,6 +65,9 @@ export default defineEventHandler(async (event) => {
           unsubscribe = null;
         }
         try { controller.close(); } catch { /* already closed */ }
+        const next = (userConnections.get(userId) ?? 1) - 1;
+        if (next <= 0) userConnections.delete(userId);
+        else userConnections.set(userId, next);
       }
 
       async function sendCounts(): Promise<void> {