@commonpub/layer 0.73.1 → 0.73.3

package/components/nav/NavRenderer.vue

@@ -65,6 +65,11 @@ onMounted(() => {
     resizeObserver = new ResizeObserver(() => measure());
     resizeObserver.observe(containerEl.value);
   }
+  // Web fonts widen the ITEMS without resizing the container, so the
+  // ResizeObserver alone misses the post-FOUT width change.
+  if (typeof document !== 'undefined' && document.fonts?.ready) {
+    document.fonts.ready.then(() => measure()).catch(() => {});
+  }
 });
 onUnmounted(() => resizeObserver?.disconnect());
 watch(shownItems, () => nextTick(measure));

package/composables/useCookieConsent.ts

@@ -19,8 +19,12 @@ const BUILTIN_COOKIES: CookieDefinition[] = [
   },
   {
     name: 'cpub-color-scheme',
-    category: 'functional',
-    description: 'Remembers your light/dark mode preference across visits.',
+    // Essential, not functional: it's a preference the user explicitly
+    // requests by pressing the Light/Dark toggle (consent-exempt class:
+    // stores no identifier, does no tracking). When it was consent-gated,
+    // anyone on "Essential only" lost their theme on every refresh.
+    category: 'essential',
+    description: 'Remembers your light/dark mode preference. Set only when you use the theme toggle.',
     duration: '1 year',
   },
 ];

package/composables/useTheme.ts

@@ -8,8 +8,11 @@ import { THEME_TO_FAMILY, FAMILY_VARIANTS } from '../utils/themeConfig';
  * between light and dark mode within that theme's family. The server middleware
  * resolves the correct theme on every request — no theme-selection cookie needed.
  *
- * The dark mode preference cookie (`cpub-color-scheme`) is only persisted
- * when the user has accepted functional cookies via the consent banner.
+ * The dark mode preference cookie (`cpub-color-scheme`) is an ESSENTIAL
+ * preference cookie (set only by the user pressing the toggle, no
+ * identifier) — always persisted, no consent gate. It used to be gated on
+ * functional consent, which silently dropped the preference on refresh for
+ * anyone who chose "Essential only".
  *
  * Custom themes (`cpub-custom-*`) and code-registered themes pass through —
  * the user's cookie toggle is recorded but the server picks the actual variant
@@ -35,15 +38,12 @@ export function useTheme(): {
     path: '/',
     sameSite: 'lax',
   });
-  const { allowsFunctional } = useCookieConsent();
-
   function setDarkMode(dark: boolean): void {
     isDark.value = dark;
 
-    // Only persist to cookie if user consented to functional cookies
-    if (allowsFunctional.value) {
-      schemeCookie.value = dark ? 'dark' : 'light';
-    }
+    // Always persist — pressing the toggle IS the consent for this
+    // preference cookie (registered as essential in useCookieConsent).
+    schemeCookie.value = dark ? 'dark' : 'light';
 
     // Custom light/dark PAIR: both variants' tokens are injected (scoped to
     // their data-theme attr), so flip the attribute client-side for an instant

package/layouts/default.vue

@@ -385,7 +385,15 @@ const userUsername = computed(() => user.value?.username ?? '');
 :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; }
+/* The spacer takes NO share of the free space — the nav does (flex:1). This
+   is load-bearing for the priority nav: its measurement reads the nav's
+   allocated width, and a flex-basis:auto item that SPLITS slack with a
+   spacer gets an allocation that depends on its own content — collapsing
+   links shrinks the nav, which re-justifies the collapse (a ratchet: links
+   hidden beside a huge empty gap). With the spacer inert, the nav's
+   allocation is `row minus everything else`, independent of what's
+   collapsed, so the measurement is stable in both directions. */
+.cpub-topbar-spacer { flex: 0 0 0; }
 .cpub-topbar-actions { display: flex; align-items: center; gap: 6px; }
 
 .cpub-search-btn { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--surface2); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); font-size: 12px; min-width: 180px; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; cursor: text; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.73.1",
+  "version": "0.73.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -54,16 +54,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.22.1",
     "@commonpub/editor": "0.7.11",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/learning": "0.5.2",
     "@commonpub/protocol": "0.13.0",
     "@commonpub/schema": "0.40.1",
-    "@commonpub/theme-studio": "0.6.1",
     "@commonpub/server": "2.84.1",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/ui": "0.13.1",
-    "@commonpub/docs": "0.6.3"
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/ui": "0.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/privacy.vue

@@ -67,7 +67,7 @@ const { federation: federationEnabled } = useFeatures();
         <ul>
           <li><strong>Session cookie</strong> (<code>better-auth.session_token</code>): strictly necessary, authenticates your login session. HttpOnly, secure, 7-day expiry.</li>
           <li><strong>Consent cookie</strong> (<code>cpub-consent</code>): strictly necessary, stores your cookie consent choice.</li>
-          <li><strong>Color scheme</strong> (<code>cpub-color-scheme</code>): functional, remembers your light/dark mode preference. Set only with your consent.</li>
+          <li><strong>Color scheme</strong> (<code>cpub-color-scheme</code>): strictly necessary preference, remembers your light/dark mode choice. Set only when you use the theme toggle. No identifier, no tracking.</li>
         </ul>
         <p>We do not use any advertising or tracking cookies. Your instance operator may add analytics cookies, these require your explicit consent. For the full list of cookies and to manage your preferences, visit our <NuxtLink to="/cookies">Cookie Policy</NuxtLink>.</p>
       </section>