@commonpub/layer 0.21.4 → 0.21.6

package/components/CookieConsent.vue

@@ -34,7 +34,7 @@ const visible = computed(() => !hasConsented.value && hasNonEssentialCookies.val
   z-index: var(--z-toast);
   background: var(--surface);
   border-top: var(--border-width-default) solid var(--border);
-  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 -2px 0 var(--border);
 }
 
 .cpub-consent-inner {

package/components/RemoteFollowDialog.vue

@@ -79,14 +79,14 @@ useFocusTrap(dialogRef, () => open.value, close);
 <style scoped>
 .cpub-rfd-overlay {
   position: fixed; inset: 0; z-index: 9999;
-  background: rgba(0, 0, 0, 0.5); display: flex;
+  background: var(--color-surface-overlay, rgba(0, 0, 0, 0.5)); display: flex;
   align-items: center; justify-content: center;
   padding: 16px;
 }
 .cpub-rfd-dialog {
   background: var(--bg); border: var(--border-width-default) solid var(--border);
   width: 100%; max-width: 420px; padding: 24px;
-  box-shadow: 4px 4px 0 var(--shadow);
+  box-shadow: var(--shadow-md);
 }
 .cpub-rfd-header {
   display: flex; align-items: center; justify-content: space-between;

package/components/SearchFilters.vue

@@ -156,7 +156,7 @@ function removeTag(tag: string): void {
   padding: 7px 10px;
   font-size: 12px;
   color: var(--text);
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans);
   outline: none;
   margin-bottom: 6px;
   transition: border-color 0.15s;

package/components/ShareToHubModal.vue

@@ -14,6 +14,14 @@ const { data: userHubs } = useLazyFetch<{ items: Array<{ id: string; name: strin
 const sharing = ref(false);
 const selectedHub = ref('');
 
+// Parent mounts/unmounts this modal via v-if, so it's always "open" while
+// mounted. A local ref flipped on mount drives useFocusTrap's watcher
+// (false -> true), activating the trap, Esc handler and scroll lock.
+const contentRef = ref<HTMLElement | null>(null);
+const visible = ref(false);
+onMounted(() => { visible.value = true; });
+useFocusTrap(contentRef, () => visible.value, () => emit('close'));
+
 async function handleShare(): Promise<void> {
   if (!selectedHub.value) return;
   sharing.value = true;
@@ -35,9 +43,9 @@ async function handleShare(): Promise<void> {
 
 <template>
   <div class="cpub-modal-backdrop" @click.self="emit('close')">
-    <div class="cpub-modal-content">
+    <div ref="contentRef" class="cpub-modal-content" role="dialog" aria-modal="true" aria-labelledby="cpub-share-hub-title">
       <div class="cpub-modal-header">
-        <h3 class="cpub-modal-title">Share to Hub</h3>
+        <h3 id="cpub-share-hub-title" class="cpub-modal-title">Share to Hub</h3>
         <button class="cpub-modal-close" aria-label="Close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
       </div>
 

package/components/editors/MarkdownImportDialog.vue

@@ -10,6 +10,9 @@ const emit = defineEmits<{
   import: [md: string, mode: 'append' | 'replace'];
 }>();
 
+const dialogRef = ref<HTMLElement | null>(null);
+useFocusTrap(dialogRef, () => props.show, () => emit('close'));
+
 const activeTab = ref<'paste' | 'file'>('paste');
 const markdownText = ref('');
 const mode = ref<'append' | 'replace'>('append');
@@ -58,9 +61,9 @@ async function readFile(file: File): Promise<void> {
 <template>
   <Teleport to="body">
     <div v-if="show" class="md-import-overlay" @click.self="emit('close')">
-      <div class="md-import-dialog">
+      <div ref="dialogRef" class="md-import-dialog" role="dialog" aria-modal="true" aria-labelledby="md-import-title">
         <div class="md-import-header">
-          <h2><i class="fa-brands fa-markdown"></i> Import Markdown</h2>
+          <h2 id="md-import-title"><i class="fa-brands fa-markdown"></i> Import Markdown</h2>
           <button class="md-import-close" @click="emit('close')"><i class="fa-solid fa-xmark"></i></button>
         </div>
 

package/components/homepage/HomepageSectionRenderer.vue

@@ -21,7 +21,7 @@ const features = useFeatures();
 
 function isFeatureEnabled(featureGate?: string): boolean {
   if (!featureGate) return true;
-  return (features.features as unknown as Record<string, boolean>)?.[featureGate] ?? true;
+  return (features.features.value as unknown as Record<string, boolean>)?.[featureGate] ?? true;
 }
 
 /** Section types that render in the full-width zone (above the 2-column layout) */

package/error.vue

@@ -125,7 +125,7 @@ function handleBack(): void {
 
 .cpub-error-btn-primary {
   background: var(--accent, #5b9cf6);
-  color: #fff;
+  color: var(--color-text-inverse, #fff);
   box-shadow: var(--shadow-md);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.4",
+  "version": "0.21.6",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/editor": "0.7.9",
-    "@commonpub/protocol": "0.9.10",
-    "@commonpub/schema": "0.16.0",
     "@commonpub/docs": "0.6.3",
+    "@commonpub/config": "0.12.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/auth": "0.6.0",
     "@commonpub/explainer": "0.7.12",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/ui": "0.8.5",
-    "@commonpub/config": "0.12.0",
-    "@commonpub/server": "2.53.0"
+    "@commonpub/schema": "0.16.0",
+    "@commonpub/editor": "0.7.9",
+    "@commonpub/protocol": "0.9.10",
+    "@commonpub/server": "2.53.1",
+    "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",
@@ -68,5 +68,7 @@
     "jsdom": "^25.0.1",
     "vitest": "^3.2.4"
   },
-  "scripts": {}
+  "scripts": {
+    "test": "vitest run"
+  }
 }

package/pages/search.vue

@@ -512,7 +512,7 @@ const { data: relatedCommunities } = await useFetch('/api/hubs', {
   font-size: 15px;
   font-weight: 500;
   color: var(--text);
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans);
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }

package/pages/u/[username]/index.vue

@@ -679,7 +679,7 @@ async function handleReport(): Promise<void> {
   background: none;
   cursor: pointer;
   border-bottom: 3px solid transparent;
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family: var(--font-sans);
   display: flex;
   align-items: center;
   gap: 6px;

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

@@ -47,6 +47,23 @@ export default defineEventHandler(async (event) => {
   }
   userConnections.set(userId, current + 1);
 
+  // Decrement exactly once on disconnect. Registered at handler scope (not
+  // inside ReadableStream.start) because start() is invoked lazily when the
+  // runtime begins pulling the stream — if the client aborts before that,
+  // start() never runs and an in-start cleanup would never fire, leaking
+  // the slot permanently and eventually 429-locking the user for the
+  // process lifetime. cleanup() also calls release(); the guard makes it
+  // idempotent so there is no double-decrement.
+  let released = false;
+  const release = (): void => {
+    if (released) return;
+    released = true;
+    const next = (userConnections.get(userId) ?? 1) - 1;
+    if (next <= 0) userConnections.delete(userId);
+    else userConnections.set(userId, next);
+  };
+  event.node.req.on('close', release);
+
   const encoder = new TextEncoder();
   const stream = new ReadableStream({
     async start(controller) {
@@ -65,9 +82,7 @@ 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);
+        release();
       }
 
       async function sendCounts(): Promise<void> {