@commonpub/layer 0.18.2 → 0.18.3

package/composables/useAuth.ts

@@ -25,7 +25,12 @@ interface AuthResponse {
   session: ClientAuthSession | null;
 }
 
-/** Type-safe POST fetch that avoids Nuxt $fetch TS2589 deep instantiation */
+// `$fetch<T>(url, options)` instantiates Nuxt's NitroFetchRequest generic
+// with an excessively deep type graph, which fails TS2589 on this
+// specific call shape. The cast below narrows `$fetch` to a concrete
+// signature the compiler can check without recursing. Verified session
+// 133: removing the cast immediately reintroduces the error. Cleanup is
+// upstream — wait for Nuxt to simplify the $fetch type.
 async function authPost(url: string, body: Record<string, unknown>): Promise<AuthResponse | null> {
   return ($fetch as (url: string, opts: Record<string, unknown>) => Promise<AuthResponse | null>)(url, {
     method: 'POST',
@@ -35,6 +40,12 @@ async function authPost(url: string, body: Record<string, unknown>): Promise<Aut
   });
 }
 
+async function authGet(url: string): Promise<AuthResponse | null> {
+  return ($fetch as (url: string, opts: Record<string, unknown>) => Promise<AuthResponse | null>)(url, {
+    credentials: 'include',
+  });
+}
+
 export function useAuth() {
   const user = useState<ClientAuthUser | null>('auth-user', () => null);
   const session = useState<ClientAuthSession | null>('auth-session', () => null);
@@ -68,9 +79,7 @@ export function useAuth() {
   async function refreshSession(): Promise<void> {
     if (import.meta.server) return;
     try {
-      const data = await ($fetch as (url: string, opts: Record<string, unknown>) => Promise<AuthResponse | null>)(
-        '/api/me', { credentials: 'include' },
-      );
+      const data = await authGet('/api/me');
       user.value = data?.user ?? null;
       session.value = data?.session ?? null;
     } catch {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.18.2",
+  "version": "0.18.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,10 +54,10 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.1",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/config": "0.11.0",
-    "@commonpub/learning": "0.5.2",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.9",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/ui": "0.8.5",
     "@commonpub/protocol": "0.9.9"
   },

package/pages/learn/index.vue

@@ -357,4 +357,47 @@ const activeDifficultyFilter = ref('');
 .cpub-empty-icon { font-size: 32px; color: var(--text-faint); margin-bottom: 12px; }
 .cpub-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
 .cpub-empty-sub { font-size: 12px; color: var(--text-dim); }
+
+/* MOBILE (≤ 768px) — stack sidebar, collapse multi-column grids,
+   shrink outer padding so content gets the full viewport. */
+@media (max-width: 768px) {
+  .cpub-learn-hero { padding: 24px 16px 18px; }
+  .cpub-hero-title { font-size: 22px; }
+  .cpub-hero-sub { font-size: 13px; margin-bottom: 18px; }
+  .cpub-hero-stats { gap: 16px; margin-top: 18px; padding-top: 16px; }
+
+  .cpub-shell { flex-direction: column; min-height: auto; }
+  .cpub-page { padding: 20px 16px; }
+  .cpub-sidebar {
+    width: 100%;
+    border-left: none;
+    border-top: var(--border-width-default) solid var(--border);
+    padding: 16px 0;
+  }
+
+  /* In-progress cards: already scroll horizontally on mobile via cpub-ip-row */
+
+  /* Path cards: stack vertically so description + aside don't crush */
+  .cpub-path-card { flex-direction: column; gap: 14px; padding: 16px; }
+  .cpub-path-aside {
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    width: 100%;
+  }
+
+  /* My-path rows: put status/meta under title instead of side-by-side */
+  .cpub-my-path-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding: 12px;
+  }
+  .cpub-my-path-meta { gap: 10px; flex-wrap: wrap; }
+
+  /* Course + explainer grids (not currently rendered on this page but
+     safe to include in case the template adds them back) */
+  .cpub-course-grid { grid-template-columns: 1fr; }
+  .cpub-explainer-grid { grid-template-columns: 1fr; }
+}
 </style>

package/pages/videos/[id].vue

@@ -227,4 +227,18 @@ const authorInitial = computed(() => {
 .cpub-link:hover {
   text-decoration: underline;
 }
+
+/* MOBILE (≤ 768px) — let meta items wrap instead of overflowing, shrink
+   title + info padding so content gets the full viewport width. */
+@media (max-width: 768px) {
+  .cpub-video-player { margin-bottom: 16px; }
+  .cpub-video-info { padding: 16px; }
+  .cpub-video-title { font-size: 18px; }
+  .cpub-video-meta {
+    flex-wrap: wrap;
+    gap: 10px;
+    row-gap: 6px;
+  }
+  .cpub-video-desc { font-size: 13px; margin-bottom: 16px; }
+}
 </style>

package/pages/videos/index.vue

@@ -324,4 +324,23 @@ function formatDate(dateStr: string): string {
 .cpub-empty-icon { font-size: 32px; color: var(--text-faint); margin-bottom: 12px; }
 .cpub-empty-title { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
 .cpub-empty-sub { font-size: 12px; color: var(--text-dim); }
+
+/* MOBILE (≤ 768px) — collapse 2-track grid to single column, stack
+   sidebar under main content, shrink outer padding, and single-col
+   the thumbnail grid so cards get full viewport width. */
+@media (max-width: 768px) {
+  .cpub-video-hero { padding: 24px 16px 18px; }
+  .cpub-hero-row { flex-wrap: wrap; gap: 10px; }
+  .cpub-hero-title { font-size: 22px; }
+  .cpub-hero-sub { font-size: 12px; margin-bottom: 14px; }
+
+  .cpub-filter-bar { padding: 0 16px; }
+
+  .cpub-page-wrap { padding: 20px 16px; }
+  .cpub-main-grid { grid-template-columns: 1fr; gap: 20px; }
+
+  .cpub-video-grid { grid-template-columns: 1fr; gap: 14px; }
+
+  .cpub-featured-title { font-size: 15px; }
+}
 </style>

package/server/middleware/security.ts

@@ -1,6 +1,36 @@
 // Security middleware — rate limiting + security headers + CSP
 import { checkRateLimit, createRateLimitStore, createRedisFailOpenLogger, shouldSkipRateLimit, getSecurityHeaders, buildCspHeader, buildCspDirectives } from '@commonpub/server';
 
+// Structured JSON sink for fail-open events. Emits one JSON line per event
+// to stdout so Docker logs / Loki / Datadog / CloudWatch can parse without
+// regex-scraping. Duplicated from packages/infra/structuredLogger.ts
+// because layers/base doesn't depend on @commonpub/infra directly and the
+// symbol isn't re-exported via @commonpub/server (which pins to the npm
+// registry, not the workspace, in apps/reference). Keep this helper in
+// sync with the one in infra if the event shape changes.
+function jsonLog(component: string) {
+  return (message: string, meta?: Record<string, unknown>) => {
+    try {
+      const event: Record<string, unknown> = {
+        ts: new Date().toISOString(),
+        level: 'warn',
+        component,
+        message,
+      };
+      if (meta) {
+        for (const [k, v] of Object.entries(meta)) {
+          if (k === 'ts' || k === 'level' || k === 'component' || k === 'message') continue;
+          event[k] = v;
+        }
+      }
+      process.stdout.write(JSON.stringify(event) + '\n');
+    } catch {
+      // Circular meta; fall through to plain console so the event isn't lost.
+      console.warn(`[${component}] ${message}`, meta);
+    }
+  };
+}
+
 // Selects a Redis-backed store when NUXT_REDIS_URL is set, otherwise the
 // in-process memory store. Unset env = byte-identical behavior to pre-0.6.
 // `onRedisError` is rate-limited: first event logs immediately, subsequent
@@ -8,7 +38,10 @@ import { checkRateLimit, createRateLimitStore, createRedisFailOpenLogger, should
 // flood the log at real traffic.
 const store = createRateLimitStore({
   redisUrl: process.env.NUXT_REDIS_URL,
-  onRedisError: createRedisFailOpenLogger({ scope: 'ratelimit:ip' }),
+  onRedisError: createRedisFailOpenLogger({
+    scope: 'ratelimit:ip',
+    sink: jsonLog('ratelimit-ip'),
+  }),
 });
 const isDev = process.env.NODE_ENV !== 'production';