@commonpub/layer 0.11.0 → 0.14.0

package/components/nav/NavLink.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+const props = defineProps<{
+  item: NavItem;
+}>();
+
+const isExternal = computed(() => props.item.type === 'external' && props.item.href);
+</script>
+
+<template>
+  <span v-if="item.disabled" class="cpub-nav-link cpub-nav-link--disabled">
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </span>
+  <a
+    v-else-if="isExternal"
+    :href="item.href"
+    target="_blank"
+    rel="noopener"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+    <i class="fa-solid fa-arrow-up-right-from-square cpub-nav-external-icon"></i>
+  </a>
+  <NuxtLink
+    v-else-if="item.route"
+    :to="item.route"
+    class="cpub-nav-link"
+  >
+    <i v-if="item.icon" :class="item.icon"></i> {{ item.label }}
+  </NuxtLink>
+</template>
+
+<style scoped>
+.cpub-nav-external-icon {
+  font-size: 8px;
+  color: var(--text-faint);
+  margin-left: 2px;
+}
+</style>

package/components/nav/NavRenderer.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
+defineProps<{
+  items: NavItem[];
+  openDropdown: string | null;
+}>();
+
+const emit = defineEmits<{
+  'toggle-dropdown': [name: string];
+  'close-dropdowns': [];
+}>();
+
+const { isAuthenticated, isAdmin } = useAuth();
+const features = useFeatures();
+
+const featureMap = computed(() => {
+  const map: Record<string, boolean> = {};
+  for (const [key, val] of Object.entries(features)) {
+    if (typeof val === 'object' && val !== null && 'value' in val) {
+      map[key] = (val as { value: boolean }).value;
+    }
+  }
+  return map;
+});
+
+function isVisible(item: NavItem): boolean {
+  if (item.featureGate && !featureMap.value[item.featureGate]) return false;
+  if (item.visibleTo === 'authenticated' && !isAuthenticated.value) return false;
+  if (item.visibleTo === 'admin' && !isAdmin.value) return false;
+  return true;
+}
+</script>
+
+<template>
+  <nav class="cpub-topbar-nav" aria-label="Main navigation">
+    <template v-for="item in items" :key="item.id">
+      <NavDropdown
+        v-if="item.type === 'dropdown' && isVisible(item)"
+        :item="item"
+        :open="openDropdown === item.id"
+        @toggle="emit('toggle-dropdown', item.id)"
+        @close="emit('close-dropdowns')"
+      />
+      <NavLink
+        v-else-if="isVisible(item)"
+        :item="item"
+      />
+    </template>
+  </nav>
+</template>

package/composables/useAuth.ts

@@ -20,6 +20,21 @@ export interface ClientAuthSession {
   expiresAt: string;
 }
 
+interface AuthResponse {
+  user: ClientAuthUser | null;
+  session: ClientAuthSession | null;
+}
+
+/** Type-safe POST fetch that avoids Nuxt $fetch TS2589 deep instantiation */
+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',
+    body,
+    credentials: 'include',
+    headers: { 'Content-Type': 'application/json' },
+  });
+}
+
 export function useAuth() {
   const user = useState<ClientAuthUser | null>('auth-user', () => null);
   const session = useState<ClientAuthSession | null>('auth-session', () => null);
@@ -28,27 +43,19 @@ export function useAuth() {
   const isAdmin = computed(() => user.value?.role === 'admin');
 
   async function signIn(email: string, password: string): Promise<void> {
-    const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>('/api/auth/sign-in/email', {
-      method: 'POST',
-      body: { email, password },
-      credentials: 'include',
-    });
+    const data = await authPost('/api/auth/sign-in/email', { email, password });
     user.value = data?.user ?? null;
     session.value = data?.session ?? null;
   }
 
   async function signUp(email: string, password: string, username: string): Promise<void> {
-    const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>('/api/auth/sign-up/email', {
-      method: 'POST',
-      body: { email, password, username, name: username },
-      credentials: 'include',
-    });
+    const data = await authPost('/api/auth/sign-up/email', { email, password, username, name: username });
     user.value = data?.user ?? null;
     session.value = data?.session ?? null;
   }
 
   async function signOut(): Promise<void> {
-    await $fetch('/api/auth/sign-out', { method: 'POST', credentials: 'include', headers: { 'Content-Type': 'application/json' }, body: {} });
+    await authPost('/api/auth/sign-out', {});
     user.value = null;
     session.value = null;
     await navigateTo('/');
@@ -61,14 +68,12 @@ export function useAuth() {
   async function refreshSession(): Promise<void> {
     if (import.meta.server) return;
     try {
-      const data = await $fetch<{ user: ClientAuthUser | null; session: ClientAuthSession | null }>(
-        '/api/me',
-        { credentials: 'include' },
+      const data = await ($fetch as (url: string, opts: Record<string, unknown>) => Promise<AuthResponse | null>)(
+        '/api/me', { credentials: 'include' },
       );
       user.value = data?.user ?? null;
       session.value = data?.session ?? null;
     } catch {
-      // Session invalid or server unreachable — clear client state
       user.value = null;
       session.value = null;
     }

package/composables/useFeatures.ts

@@ -1,4 +1,6 @@
 // Feature flag composable — reactive access to enabled features
+// Initializes from build-time runtime config, then hydrates from /api/features
+// to pick up runtime DB overrides set via admin panel.
 
 export interface FeatureFlags {
   content: boolean;
@@ -7,6 +9,7 @@ export interface FeatureFlags {
   docs: boolean;
   video: boolean;
   contests: boolean;
+  events: boolean;
   learning: boolean;
   explainers: boolean;
   editorial: boolean;
@@ -15,23 +18,41 @@ export interface FeatureFlags {
   emailNotifications: boolean;
 }
 
+let hydrated = false;
+
 export function useFeatures() {
   const config = useRuntimeConfig();
-  const flags = config.public.features as unknown as FeatureFlags;
+  const buildFlags = config.public.features as unknown as FeatureFlags;
+
+  // Shared reactive state — initialized from build-time config
+  const flags = useState<FeatureFlags>('feature-flags', () => ({ ...buildFlags }));
+
+  // On client, fetch dynamic features once to pick up DB overrides
+  if (import.meta.client && !hydrated) {
+    hydrated = true;
+    ($fetch as Function)('/api/features')
+      .then((dynamic: FeatureFlags) => {
+        if (dynamic && typeof dynamic === 'object') {
+          flags.value = { ...flags.value, ...dynamic };
+        }
+      })
+      .catch(() => { /* use build-time defaults on failure */ });
+  }
 
   return {
     features: flags,
-    content: computed(() => flags.content),
-    social: computed(() => flags.social),
-    hubs: computed(() => flags.hubs),
-    docs: computed(() => flags.docs),
-    video: computed(() => flags.video),
-    contests: computed(() => flags.contests),
-    learning: computed(() => flags.learning),
-    explainers: computed(() => flags.explainers),
-    editorial: computed(() => flags.editorial),
-    federation: computed(() => flags.federation),
-    admin: computed(() => flags.admin),
-    emailNotifications: computed(() => flags.emailNotifications),
+    content: computed(() => flags.value.content),
+    social: computed(() => flags.value.social),
+    hubs: computed(() => flags.value.hubs),
+    docs: computed(() => flags.value.docs),
+    video: computed(() => flags.value.video),
+    contests: computed(() => flags.value.contests),
+    events: computed(() => flags.value.events),
+    learning: computed(() => flags.value.learning),
+    explainers: computed(() => flags.value.explainers),
+    editorial: computed(() => flags.value.editorial),
+    federation: computed(() => flags.value.federation),
+    admin: computed(() => flags.value.admin),
+    emailNotifications: computed(() => flags.value.emailNotifications),
   };
 }

package/layouts/admin.vue

@@ -34,6 +34,7 @@ const sidebarOpen = ref(false);
           <NuxtLink to="/admin/audit" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-clipboard-list"></i> Audit Log</NuxtLink>
           <NuxtLink to="/admin/theme" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-palette"></i> Theme</NuxtLink>
           <NuxtLink to="/admin/homepage" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-house"></i> Homepage</NuxtLink>
+          <NuxtLink to="/admin/navigation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-bars"></i> Navigation</NuxtLink>
           <NuxtLink to="/admin/features" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-toggle-on"></i> Features</NuxtLink>
           <NuxtLink to="/admin/federation" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-globe"></i> Federation</NuxtLink>
           <NuxtLink to="/admin/settings" class="admin-nav-link" @click="sidebarOpen = false"><i class="fa-solid fa-gear"></i> Settings</NuxtLink>

package/layouts/default.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
+import type { NavItem } from '@commonpub/server';
+
 const { user, isAuthenticated, isAdmin, signOut, refreshSession } = useAuth();
 const { count: unreadCount, connect: connectNotifications, disconnect: disconnectNotifications } = useNotifications();
 const { count: unreadMessages, connect: connectMessages, disconnect: disconnectMessages } = useMessages();
-const { hubs, learning, video, docs, contests, admin, federation, explainers } = useFeatures();
+const { hubs, learning, video, docs, contests, events, admin, federation, explainers } = useFeatures();
 const { isDark, setDarkMode } = useTheme();
 const { enabledTypeMeta } = useContentTypes();
 const runtimeConfig = useRuntimeConfig();
@@ -18,6 +20,13 @@ const userMenuOpen = ref(false);
 const mobileMenuOpen = ref(false);
 const openDropdown = ref<string | null>(null);
 
+// Fetch configurable nav items (falls back to defaults on server)
+// useAsyncData avoids Nuxt's typed route inference which triggers TS2589
+const { data: navItems } = await useAsyncData('nav-items', () =>
+  ($fetch as Function)('/api/navigation/items') as Promise<NavItem[]>,
+  { default: () => [] as NavItem[] },
+);
+
 function toggleDropdown(name: string): void {
   openDropdown.value = openDropdown.value === name ? null : name;
 }
@@ -80,58 +89,13 @@ const userUsername = computed(() => user.value?.username ?? '');
         <SiteLogo />
       </NuxtLink>
 
-      <nav class="cpub-topbar-nav" aria-label="Main navigation">
-        <NuxtLink to="/" class="cpub-nav-link"><i class="fa-solid fa-house"></i> Home</NuxtLink>
-
-        <!-- Learn dropdown -->
-        <div v-if="learning || docs" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'learn' }" aria-haspopup="true" :aria-expanded="openDropdown === 'learn'" @click.stop="toggleDropdown('learn')">
-            <i class="fa-solid fa-graduation-cap"></i> Learn <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'learn'" class="cpub-nav-panel">
-            <NuxtLink v-if="learning" to="/learn" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
-            <NuxtLink v-if="explainers" to="/explainer" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
-            <NuxtLink v-if="docs" to="/docs" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Build dropdown -->
-        <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'build' }" aria-haspopup="true" :aria-expanded="openDropdown === 'build'" @click.stop="toggleDropdown('build')">
-            <i class="fa-solid fa-hammer"></i> Build <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'build'" class="cpub-nav-panel">
-            <NuxtLink to="/project" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
-            <NuxtLink v-if="contests" to="/contests" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Read dropdown -->
-        <div class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'read' }" aria-haspopup="true" :aria-expanded="openDropdown === 'read'" @click.stop="toggleDropdown('read')">
-            <i class="fa-solid fa-newspaper"></i> Read <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'read'" class="cpub-nav-panel">
-            <NuxtLink to="/blog" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
-          </div>
-        </div>
-
-        <!-- Watch dropdown -->
-        <div v-if="video" class="cpub-nav-dropdown">
-          <button class="cpub-nav-link cpub-nav-trigger" :class="{ 'cpub-nav-trigger--open': openDropdown === 'watch' }" aria-haspopup="true" :aria-expanded="openDropdown === 'watch'" @click.stop="toggleDropdown('watch')">
-            <i class="fa-solid fa-play"></i> Watch <i class="fa-solid fa-chevron-down cpub-nav-caret" />
-          </button>
-          <div v-if="openDropdown === 'watch'" class="cpub-nav-panel">
-            <NuxtLink to="/videos" class="cpub-nav-panel-item" @click="closeDropdowns"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
-            <span class="cpub-nav-panel-item cpub-nav-panel-item--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
-          </div>
-        </div>
-
-        <NuxtLink v-if="hubs" to="/hubs" class="cpub-nav-link"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="federation" to="/federation" class="cpub-nav-link"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
-        <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-nav-link"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
-      </nav>
+      <NavRenderer
+        v-if="navItems"
+        :items="navItems"
+        :open-dropdown="openDropdown"
+        @toggle-dropdown="toggleDropdown"
+        @close-dropdowns="closeDropdowns"
+      />
 
       <div class="cpub-topbar-spacer" />
 
@@ -183,38 +147,12 @@ const userUsername = computed(() => user.value?.username ?? '');
 
     <!-- Mobile menu -->
     <div v-if="mobileMenuOpen" class="cpub-mobile-menu" @click.self="mobileMenuOpen = false">
-      <nav class="cpub-mobile-nav" aria-label="Mobile navigation">
-        <NuxtLink to="/" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-house"></i> Home</NuxtLink>
-
-        <!-- Learn -->
-        <template v-if="learning || docs">
-          <div class="cpub-mobile-section-label">Learn</div>
-          <NuxtLink v-if="learning" to="/learn" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-route"></i> Learning Paths</NuxtLink>
-          <NuxtLink v-if="explainers" to="/explainer" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-lightbulb"></i> Explainers</NuxtLink>
-          <NuxtLink v-if="docs" to="/docs" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-book"></i> Docs</NuxtLink>
-        </template>
-
-        <!-- Build -->
-        <div class="cpub-mobile-section-label">Build</div>
-        <NuxtLink to="/project" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-cube"></i> Projects</NuxtLink>
-        <NuxtLink v-if="contests" to="/contests" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-trophy"></i> Contests</NuxtLink>
-
-        <!-- Read -->
-        <div class="cpub-mobile-section-label">Read</div>
-        <NuxtLink to="/blog" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-pen-nib"></i> Blog</NuxtLink>
-
-        <!-- Watch -->
-        <template v-if="video">
-          <div class="cpub-mobile-section-label">Watch</div>
-          <NuxtLink to="/videos" class="cpub-mobile-link cpub-mobile-link--indent" @click="mobileMenuOpen = false"><i class="fa-solid fa-video"></i> Videos</NuxtLink>
-          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-tower-broadcast"></i> Live Streams</span>
-          <span class="cpub-mobile-link cpub-mobile-link--indent cpub-mobile-link--disabled"><i class="fa-solid fa-podcast"></i> Podcasts</span>
-        </template>
-
-        <div class="cpub-mobile-divider" />
-        <NuxtLink v-if="hubs" to="/hubs" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-users"></i> Hubs</NuxtLink>
-        <NuxtLink v-if="federation" to="/federation" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-globe"></i> Fediverse</NuxtLink>
-        <NuxtLink v-if="isAdmin && admin" to="/admin" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-shield-halved"></i> Admin</NuxtLink>
+      <MobileNavRenderer
+        v-if="navItems"
+        :items="navItems"
+        @close="mobileMenuOpen = false"
+      />
+      <div class="cpub-mobile-nav cpub-mobile-nav-extra">
         <NuxtLink to="/search" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-magnifying-glass"></i> Search</NuxtLink>
         <template v-if="isAuthenticated">
           <div class="cpub-mobile-divider" />
@@ -223,7 +161,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <NuxtLink to="/messages" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-envelope"></i> Messages</NuxtLink>
           <NuxtLink to="/notifications" class="cpub-mobile-link" @click="mobileMenuOpen = false"><i class="fa-solid fa-bell"></i> Notifications</NuxtLink>
         </template>
-      </nav>
+      </div>
     </div>
 
     <!-- ═══ MAIN ═══ -->
@@ -254,6 +192,7 @@ const userUsername = computed(() => user.value?.username ?? '');
           <h4 class="cpub-footer-col-title">Community</h4>
           <NuxtLink v-if="hubs" to="/hubs" class="cpub-footer-link">Hubs</NuxtLink>
           <NuxtLink v-if="contests" to="/contests" class="cpub-footer-link">Contests</NuxtLink>
+          <NuxtLink v-if="events" to="/events" class="cpub-footer-link">Events</NuxtLink>
           <NuxtLink v-if="learning" to="/learn" class="cpub-footer-link">Learning Paths</NuxtLink>
           <NuxtLink v-if="video" to="/videos" class="cpub-footer-link">Videos</NuxtLink>
           <NuxtLink to="/search" class="cpub-footer-link">Explore</NuxtLink>
@@ -289,42 +228,44 @@ const userUsername = computed(() => user.value?.username ?? '');
 }
 .cpub-topbar-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; color: var(--text); }
 
-.cpub-topbar-nav { display: flex; align-items: center; gap: 2px; margin-left: 24px; }
-.cpub-nav-link { font-size: 12px; color: var(--text-dim); padding: 5px 12px; border: var(--border-width-default) solid transparent; background: none; text-decoration: none; transition: color 0.15s, background 0.15s; display: flex; align-items: center; gap: 6px; }
-.cpub-nav-link i { font-size: 10px; }
-.cpub-nav-link:hover { color: var(--text); background: var(--surface2); }
-.cpub-nav-link.router-link-active { color: var(--text); background: var(--surface2); border-color: var(--border); }
+/* Nav styles use :deep() to reach into NavRenderer/NavDropdown/NavLink child components */
+:deep(.cpub-topbar-nav) { display: flex; align-items: center; gap: 2px; margin-left: 24px; }
+:deep(.cpub-nav-link) { font-size: 12px; color: var(--text-dim); padding: 5px 12px; border: var(--border-width-default) solid transparent; background: none; text-decoration: none; transition: color 0.15s, background 0.15s; display: flex; align-items: center; gap: 6px; }
+:deep(.cpub-nav-link i) { font-size: 10px; }
+:deep(.cpub-nav-link:hover) { color: var(--text); background: var(--surface2); }
+:deep(.cpub-nav-link.router-link-active) { color: var(--text); background: var(--surface2); border-color: var(--border); }
+:deep(.cpub-nav-link--disabled) { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
 
 /* Nav dropdowns */
-.cpub-nav-dropdown { position: relative; }
-.cpub-nav-trigger { cursor: pointer; }
-.cpub-nav-caret { font-size: 7px !important; margin-left: 2px; transition: transform 0.15s; }
-.cpub-nav-trigger--open .cpub-nav-caret { transform: rotate(180deg); }
-.cpub-nav-panel {
+:deep(.cpub-nav-dropdown) { position: relative; }
+:deep(.cpub-nav-trigger) { cursor: pointer; }
+:deep(.cpub-nav-caret) { font-size: 7px !important; margin-left: 2px; transition: transform 0.15s; }
+:deep(.cpub-nav-trigger--open .cpub-nav-caret) { transform: rotate(180deg); }
+:deep(.cpub-nav-panel) {
   position: absolute; top: 100%; left: 0; min-width: 180px;
   background: var(--surface); border: var(--border-width-default) solid var(--border);
   box-shadow: var(--shadow-md); z-index: 200; display: flex; flex-direction: column; padding: 4px 0;
   margin-top: 4px;
 }
-.cpub-nav-panel-item {
+:deep(.cpub-nav-panel-item) {
   display: flex; align-items: center; gap: 8px; padding: 8px 14px;
   font-size: 12px; color: var(--text-dim); text-decoration: none;
   transition: background 0.1s, color 0.1s; cursor: pointer;
 }
-.cpub-nav-panel-item:hover { background: var(--surface2); color: var(--text); }
-.cpub-nav-panel-item i { width: 14px; text-align: center; font-size: 11px; }
-.cpub-nav-panel-item--disabled {
+:deep(.cpub-nav-panel-item:hover) { background: var(--surface2); color: var(--text); }
+:deep(.cpub-nav-panel-item i) { width: 14px; text-align: center; font-size: 11px; }
+:deep(.cpub-nav-panel-item--disabled) {
   opacity: 0.35; cursor: not-allowed; pointer-events: none;
 }
 
-/* Mobile nav sections */
-.cpub-mobile-section-label {
+/* Mobile nav sections — :deep() for MobileNavRenderer child component */
+:deep(.cpub-mobile-section-label) {
   font-family: var(--font-mono); font-size: 9px; font-weight: 700;
   text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-faint);
   padding: 10px 20px 2px; margin-top: 4px;
 }
-.cpub-mobile-link--indent { padding-left: 36px; }
-.cpub-mobile-link--disabled { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
+:deep(.cpub-mobile-link--indent) { padding-left: 36px; }
+:deep(.cpub-mobile-link--disabled) { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
 
 .cpub-topbar-spacer { flex: 1; }
 .cpub-topbar-actions { display: flex; align-items: center; gap: 6px; }
@@ -353,11 +294,12 @@ const userUsername = computed(() => user.value?.username ?? '');
 
 .cpub-mobile-toggle { display: none; width: 32px; height: 32px; background: none; border: var(--border-width-default) solid transparent; color: var(--text-dim); font-size: 16px; cursor: pointer; align-items: center; justify-content: center; }
 .cpub-mobile-menu { display: none; position: fixed; inset: 0; top: 48px; z-index: 99; background: var(--color-surface-overlay-light); }
-.cpub-mobile-nav { background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); padding: 8px 0; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
-.cpub-mobile-link { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; color: var(--text-dim); text-decoration: none; transition: background 0.1s; }
-.cpub-mobile-link:hover { background: var(--surface2); color: var(--text); }
-.cpub-mobile-link i { width: 16px; text-align: center; font-size: 12px; }
+:deep(.cpub-mobile-nav) { background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); padding: 8px 0; display: flex; flex-direction: column; box-shadow: var(--shadow-md); }
+:deep(.cpub-mobile-link) { display: flex; align-items: center; gap: 10px; padding: 10px 20px; font-size: 13px; color: var(--text-dim); text-decoration: none; transition: background 0.1s; }
+:deep(.cpub-mobile-link:hover) { background: var(--surface2); color: var(--text); }
+:deep(.cpub-mobile-link i) { width: 16px; text-align: center; font-size: 12px; }
 .cpub-mobile-divider { height: 2px; background: var(--border2); margin: 4px 16px; }
+.cpub-mobile-nav-extra { border-top: var(--border-width-default) solid var(--border2); }
 
 #main-content { margin-top: 48px; flex: 1; }
 

package/middleware/feature-gate.global.ts

@@ -1,21 +1,26 @@
 // Global client-side middleware that mirrors server/middleware/features.ts.
 // Prevents client-side navigation to feature-gated pages when the flag is disabled.
+// Uses useState('feature-flags') which is hydrated by useFeatures() from /api/features.
 
-const ROUTE_FEATURE_MAP: Record<string, keyof import('../composables/useFeatures').FeatureFlags> = {
+import type { FeatureFlags } from '../composables/useFeatures';
+
+const ROUTE_FEATURE_MAP: Record<string, keyof FeatureFlags> = {
   '/learn': 'learning',
   '/docs': 'docs',
   '/videos': 'video',
   '/admin': 'admin',
   '/contests': 'contests',
+  '/events': 'events',
   '/explainer': 'explainers',
 };
 
 export default defineNuxtRouteMiddleware((to) => {
   for (const [prefix, feature] of Object.entries(ROUTE_FEATURE_MAP)) {
     if (to.path === prefix || to.path.startsWith(prefix + '/')) {
-      const config = useRuntimeConfig();
-      const flags = config.public.features as Record<string, boolean>;
-      if (!flags[feature]) {
+      // Prefer reactive state (hydrated from /api/features), fall back to build-time config
+      const featureState = useState<FeatureFlags | null>('feature-flags', () => null);
+      const flags = featureState.value ?? (useRuntimeConfig().public.features as Record<string, boolean>);
+      if (!(flags as Record<string, boolean>)[feature]) {
         throw createError({ statusCode: 404, statusMessage: 'Not Found' });
       }
       return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.11.0",
+  "version": "0.14.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -29,8 +29,8 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1010.0",
     "@commonpub/explainer": "^0.7.11",
-    "@commonpub/schema": "^0.10.0",
-    "@commonpub/server": "^2.33.0",
+    "@commonpub/schema": "^0.13.0",
+    "@commonpub/server": "^2.41.0",
     "@tiptap/core": "^2.11.0",
     "@tiptap/extension-bold": "^2.11.0",
     "@tiptap/extension-bullet-list": "^2.11.0",
@@ -53,12 +53,12 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/config": "0.9.2",
     "@commonpub/auth": "0.5.1",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/protocol": "0.9.9",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/protocol": "0.9.9",
+    "@commonpub/config": "0.10.0",
     "@commonpub/ui": "0.8.5"
   },
   "devDependencies": {