@commonpub/layer 0.10.1 → 0.13.0

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,9 @@ const userMenuOpen = ref(false);
 const mobileMenuOpen = ref(false);
 const openDropdown = ref<string | null>(null);
 
+// Fetch configurable nav items (falls back to defaults on server)
+const { data: navItems } = await useFetch<NavItem[]>('/api/navigation/items');
+
 function toggleDropdown(name: string): void {
   openDropdown.value = openDropdown.value === name ? null : name;
 }
@@ -80,58 +85,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 +143,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 +157,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 +188,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>
@@ -358,6 +293,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-mobile-link:hover { background: var(--surface2); color: var(--text); }
 .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

@@ -7,6 +7,7 @@ const ROUTE_FEATURE_MAP: Record<string, keyof import('../composables/useFeatures
   '/videos': 'video',
   '/admin': 'admin',
   '/contests': 'contests',
+  '/events': 'events',
   '/explainer': 'explainers',
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.10.1",
+  "version": "0.13.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.32.1",
+    "@commonpub/schema": "^0.13.0",
+    "@commonpub/server": "^2.39.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/docs": "0.6.2",
-    "@commonpub/auth": "0.5.1",
     "@commonpub/editor": "0.7.9",
-    "@commonpub/ui": "0.8.5",
     "@commonpub/learning": "0.5.0",
+    "@commonpub/config": "0.10.0",
+    "@commonpub/auth": "0.5.1",
+    "@commonpub/ui": "0.8.5",
     "@commonpub/protocol": "0.9.9"
   },
   "devDependencies": {

package/pages/admin/features.vue

@@ -0,0 +1,338 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'admin', middleware: 'auth' });
+useSeoMeta({ title: `Feature Flags — Admin — ${useSiteName()}` });
+
+const toast = useToast();
+
+interface FlagInfo {
+  enabled: boolean;
+  isOverridden: boolean;
+}
+
+const { data, refresh } = await useFetch<{
+  flags: Record<string, FlagInfo>;
+  overrides: Record<string, boolean>;
+}>('/api/admin/features');
+
+const saving = ref(false);
+const pendingChanges = ref<Record<string, boolean>>({});
+
+const flagMeta: Record<string, { label: string; description: string; icon: string }> = {
+  content: { label: 'Content', description: 'Content system (CRUD, publishing)', icon: 'fa-solid fa-newspaper' },
+  social: { label: 'Social', description: 'Likes, comments, bookmarks, follows', icon: 'fa-solid fa-heart' },
+  hubs: { label: 'Hubs', description: 'Communities, products, companies', icon: 'fa-solid fa-layer-group' },
+  docs: { label: 'Docs', description: 'Documentation sites with versioning', icon: 'fa-solid fa-book' },
+  video: { label: 'Video', description: 'Video content and categories', icon: 'fa-solid fa-video' },
+  contests: { label: 'Contests', description: 'Contest system with judging', icon: 'fa-solid fa-trophy' },
+  learning: { label: 'Learning', description: 'Learning paths and courses', icon: 'fa-solid fa-graduation-cap' },
+  explainers: { label: 'Explainers', description: 'Interactive explainer modules', icon: 'fa-solid fa-lightbulb' },
+  editorial: { label: 'Editorial', description: 'Staff picks and content categories', icon: 'fa-solid fa-pen-fancy' },
+  federation: { label: 'Federation', description: 'ActivityPub federation', icon: 'fa-solid fa-globe' },
+  seamlessFederation: { label: 'Seamless Federation', description: 'Mix federated content into feeds', icon: 'fa-solid fa-arrows-spin' },
+  federateHubs: { label: 'Federate Hubs', description: 'Hub federation via AP Groups', icon: 'fa-solid fa-diagram-project' },
+  admin: { label: 'Admin Panel', description: 'Admin dashboard and management', icon: 'fa-solid fa-shield-halved' },
+  emailNotifications: { label: 'Email Notifications', description: 'Email digests and instant notifications', icon: 'fa-solid fa-envelope' },
+};
+
+const flagKeys = computed(() => data.value ? Object.keys(data.value.flags) : []);
+
+function getEffectiveValue(key: string): boolean {
+  if (key in pendingChanges.value) return pendingChanges.value[key]!;
+  return data.value?.flags[key]?.enabled ?? false;
+}
+
+function isOverridden(key: string): boolean {
+  if (key in pendingChanges.value) return true;
+  return data.value?.flags[key]?.isOverridden ?? false;
+}
+
+function toggleFlag(key: string): void {
+  const current = getEffectiveValue(key);
+  pendingChanges.value = { ...pendingChanges.value, [key]: !current };
+}
+
+function resetFlag(key: string): void {
+  const changes = { ...pendingChanges.value };
+  delete changes[key];
+  pendingChanges.value = changes;
+}
+
+const hasPendingChanges = computed(() => Object.keys(pendingChanges.value).length > 0);
+
+async function saveChanges(): Promise<void> {
+  if (!hasPendingChanges.value) return;
+  saving.value = true;
+
+  try {
+    // Build the full overrides object: existing overrides + pending changes
+    const currentOverrides = data.value?.overrides ?? {};
+    const merged = { ...currentOverrides, ...pendingChanges.value };
+
+    await $fetch('/api/admin/features', {
+      method: 'PUT',
+      body: { overrides: merged },
+    });
+
+    toast.success('Feature flags updated');
+    pendingChanges.value = {};
+    await refresh();
+  } catch {
+    toast.error('Failed to update feature flags');
+  } finally {
+    saving.value = false;
+  }
+}
+
+async function resetOverride(key: string): Promise<void> {
+  try {
+    // Remove this key from overrides
+    const currentOverrides = { ...(data.value?.overrides ?? {}) };
+    delete currentOverrides[key];
+
+    await $fetch('/api/admin/features', {
+      method: 'PUT',
+      body: { overrides: currentOverrides },
+    });
+
+    toast.success(`Reset ${flagMeta[key]?.label ?? key} to default`);
+    resetFlag(key);
+    await refresh();
+  } catch {
+    toast.error('Failed to reset flag');
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-admin-features">
+    <div class="cpub-admin-header">
+      <div>
+        <h1 class="cpub-admin-title">Feature Flags</h1>
+        <p class="cpub-admin-subtitle">Toggle features on or off at runtime. Changes take effect within 60 seconds.</p>
+      </div>
+      <button
+        v-if="hasPendingChanges"
+        class="cpub-btn cpub-btn-primary cpub-btn-sm"
+        :disabled="saving"
+        @click="saveChanges"
+      >
+        <i :class="saving ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-check'"></i>
+        Save Changes
+      </button>
+    </div>
+
+    <div v-if="data?.flags" class="cpub-flags-list">
+      <div
+        v-for="key in flagKeys"
+        :key="key"
+        class="cpub-flag-row"
+        :class="{
+          'cpub-flag-row--changed': key in pendingChanges,
+          'cpub-flag-row--overridden': isOverridden(key) && !(key in pendingChanges),
+        }"
+      >
+        <div class="cpub-flag-info">
+          <div class="cpub-flag-icon">
+            <i :class="flagMeta[key]?.icon ?? 'fa-solid fa-toggle-on'"></i>
+          </div>
+          <div class="cpub-flag-text">
+            <span class="cpub-flag-label">{{ flagMeta[key]?.label ?? key }}</span>
+            <span class="cpub-flag-desc">{{ flagMeta[key]?.description ?? '' }}</span>
+          </div>
+        </div>
+
+        <div class="cpub-flag-controls">
+          <span v-if="isOverridden(key) && !(key in pendingChanges)" class="cpub-flag-badge cpub-flag-badge--override">
+            overridden
+          </span>
+          <span v-if="key in pendingChanges" class="cpub-flag-badge cpub-flag-badge--pending">
+            unsaved
+          </span>
+
+          <button
+            v-if="data.flags[key]?.isOverridden && !(key in pendingChanges)"
+            class="cpub-flag-reset"
+            title="Reset to default"
+            @click="resetOverride(key)"
+          >
+            <i class="fa-solid fa-rotate-left"></i>
+          </button>
+
+          <button
+            class="cpub-flag-toggle"
+            :class="{ 'cpub-flag-toggle--on': getEffectiveValue(key) }"
+            :aria-pressed="getEffectiveValue(key)"
+            :aria-label="`Toggle ${flagMeta[key]?.label ?? key}`"
+            @click="toggleFlag(key)"
+          >
+            <span class="cpub-flag-toggle-track">
+              <span class="cpub-flag-toggle-thumb" />
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div v-if="hasPendingChanges" class="cpub-flags-footer">
+      <span class="cpub-flags-footer-text">{{ Object.keys(pendingChanges).length }} unsaved change(s)</span>
+      <button class="cpub-btn cpub-btn-sm" @click="pendingChanges = {}">Discard</button>
+      <button class="cpub-btn cpub-btn-primary cpub-btn-sm" :disabled="saving" @click="saveChanges">
+        Save Changes
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-admin-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--space-6); gap: var(--space-4); }
+.cpub-admin-title { font-size: var(--text-xl); font-weight: var(--font-weight-bold); }
+.cpub-admin-subtitle { font-size: 12px; color: var(--text-dim); margin-top: 4px; }
+
+.cpub-flags-list {
+  display: flex;
+  flex-direction: column;
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-flag-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 14px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  gap: var(--space-4);
+}
+
+.cpub-flag-row:last-child { border-bottom: none; }
+
+.cpub-flag-row--changed {
+  background: var(--yellow-bg, var(--surface2));
+}
+
+.cpub-flag-row--overridden {
+  background: var(--accent-bg);
+}
+
+.cpub-flag-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-width: 0;
+}
+
+.cpub-flag-icon {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.cpub-flag-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+}
+
+.cpub-flag-label { font-size: 13px; font-weight: 600; }
+.cpub-flag-desc { font-size: 11px; color: var(--text-dim); }
+
+.cpub-flag-controls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-shrink: 0;
+}
+
+.cpub-flag-badge {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding: 2px 6px;
+}
+
+.cpub-flag-badge--override { color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-flag-badge--pending { color: var(--yellow); background: var(--yellow-bg); border: var(--border-width-default) solid var(--yellow); }
+
+.cpub-flag-reset {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 11px;
+  padding: 4px;
+}
+.cpub-flag-reset:hover { color: var(--accent); }
+
+/* Toggle switch */
+.cpub-flag-toggle {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px;
+}
+
+.cpub-flag-toggle-track {
+  display: block;
+  width: 36px;
+  height: 20px;
+  background: var(--border);
+  border: var(--border-width-default) solid var(--border2);
+  position: relative;
+  transition: background 0.2s;
+}
+
+.cpub-flag-toggle--on .cpub-flag-toggle-track {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+.cpub-flag-toggle-thumb {
+  display: block;
+  width: 14px;
+  height: 14px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  transition: transform 0.2s;
+}
+
+.cpub-flag-toggle--on .cpub-flag-toggle-thumb {
+  transform: translateX(16px);
+  border-color: var(--surface);
+}
+
+.cpub-flags-footer {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
+  padding: var(--space-4);
+  margin-top: var(--space-4);
+  background: var(--yellow-bg, var(--surface2));
+  border: var(--border-width-default) solid var(--yellow, var(--border));
+}
+
+.cpub-flags-footer-text {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--yellow, var(--text-dim));
+  flex: 1;
+}
+
+@media (max-width: 768px) {
+  .cpub-admin-header { flex-direction: column; }
+  .cpub-flag-row { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
+  .cpub-flag-controls { align-self: flex-end; }
+}
+</style>