@commonpub/layer 0.72.0 → 0.72.2

package/components/ContentCard.vue

@@ -141,6 +141,8 @@ function formatCount(n: number | undefined): string {
   border: var(--border-width-default) solid var(--border);
   overflow: hidden;
   transition: transform 0.15s, box-shadow 0.15s;
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .cpub-cc:hover {

package/components/ContentPicker.vue

@@ -114,6 +114,8 @@ useFocusTrap(dialogRef, () => props.open, close);
   background: var(--surface);
   border: var(--border-width-default) solid var(--border);
   box-shadow: var(--shadow-xl);
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
   width: 520px;
   max-width: 90vw;
   max-height: 70vh;

package/components/ImportUrlModal.vue

@@ -193,6 +193,8 @@ useFocusTrap(dialogRef, () => props.show, handleClose);
   display: flex;
   flex-direction: column;
   max-height: 80vh;
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .cpub-import-header {

package/components/PublishErrorsModal.vue

@@ -52,6 +52,8 @@ useFocusTrap(dialogRef, () => props.show, () => emit('dismiss'));
   max-width: 420px;
   width: 100%;
   box-shadow: var(--shadow-md);
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .cpub-publish-errors-title {

package/components/RemoteFollowDialog.vue

@@ -87,6 +87,8 @@ useFocusTrap(dialogRef, () => open.value, close);
   background: var(--bg); border: var(--border-width-default) solid var(--border);
   width: 100%; max-width: 420px; padding: 24px;
   box-shadow: var(--shadow-md);
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 .cpub-rfd-header {
   display: flex; align-items: center; justify-content: space-between;

package/components/ShareToHubModal.vue

@@ -100,6 +100,8 @@ async function handleShare(): Promise<void> {
   background: var(--surface);
   border: var(--border-width-default) solid var(--border);
   box-shadow: var(--shadow-lg);
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
   padding: 24px;
   max-width: 420px;
   width: 90vw;

package/components/editors/MarkdownImportDialog.vue

@@ -150,6 +150,8 @@ async function readFile(file: File): Promise<void> {
   box-shadow: var(--shadow-xl);
   display: flex; flex-direction: column;
   max-height: 80vh;
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .md-import-header {

package/layouts/default.vue

@@ -323,6 +323,8 @@ const userUsername = computed(() => user.value?.username ?? '');
   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;
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 :deep(.cpub-nav-panel-item) {
   display: flex; align-items: center; gap: 8px; padding: 8px 14px;
@@ -363,7 +365,7 @@ const userUsername = computed(() => user.value?.username ?? '');
 .cpub-user-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--purple-bg); border: var(--border-width-default) solid var(--purple); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--purple); font-family: var(--font-mono); overflow: hidden; }
 .cpub-user-avatar-img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
 .cpub-user-menu-wrapper { position: relative; }
-.cpub-user-dropdown { position: absolute; top: calc(100% + 6px); right: 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; }
+.cpub-user-dropdown { position: absolute; top: calc(100% + 6px); right: 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; -webkit-backdrop-filter: var(--surface-backdrop, none); backdrop-filter: var(--surface-backdrop, none); }
 .cpub-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: var(--text-dim); text-decoration: none; background: none; border: none; cursor: pointer; font-family: inherit; width: 100%; text-align: left; transition: all 0.15s; }
 .cpub-dropdown-item:hover { background: var(--surface2); color: var(--text); }
 .cpub-dropdown-item i { width: 14px; text-align: center; font-size: 11px; }
@@ -375,7 +377,7 @@ 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: var(--cpub-topbar-height, 48px); z-index: 99; background: var(--color-surface-overlay-light); }
-: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-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); -webkit-backdrop-filter: var(--surface-backdrop, none); backdrop-filter: var(--surface-backdrop, none); }
 :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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.72.0",
+  "version": "0.72.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -53,16 +53,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.8.0",
-    "@commonpub/config": "0.21.0",
-    "@commonpub/server": "2.84.1",
-    "@commonpub/ui": "0.13.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/theme-studio": "0.6.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/schema": "0.40.0",
     "@commonpub/editor": "0.7.11",
+    "@commonpub/config": "0.21.0",
+    "@commonpub/schema": "0.40.1",
+    "@commonpub/auth": "0.8.0",
     "@commonpub/protocol": "0.13.0",
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/learning": "0.5.2",
+    "@commonpub/ui": "0.13.1",
+    "@commonpub/server": "2.84.1",
     "@commonpub/explainer": "0.7.15"
   },
   "devDependencies": {

package/server/utils/instanceTheme.ts

@@ -3,7 +3,7 @@
 // Users only toggle light/dark within that family.
 
 import { eq } from 'drizzle-orm';
-import { instanceSettings } from '@commonpub/schema';
+import { instanceSettings, isSafeBgImageValue } from '@commonpub/schema';
 import {
   getCustomTokenOverrides,
   listCustomThemes,
@@ -15,6 +15,21 @@ import { THEME_TO_FAMILY, FAMILY_VARIANTS, IS_DARK, VALID_THEME_IDS } from '../.
 
 const CACHE_TTL = 60_000; // 1 minute, admin changes propagate fast
 
+/**
+ * Sink-side guard for the one token whose VALUE can fetch when rendered:
+ * `--bg-image` feeds `background-image`, so a `url(...)` is a beacon/exfil
+ * channel. The themes POST/PUT already reject unsafe values, but the token
+ * map has other write paths (the generic admin settings route writes
+ * `instance_settings` keys wholesale), so the render sink enforces the same
+ * allowlist: a non-gradient bg-image is dropped, never injected.
+ */
+export function sanitizeRenderTokens(tokens: Record<string, string>): Record<string, string> {
+  const v = tokens['bg-image'];
+  if (v === undefined || isSafeBgImageValue(v)) return tokens;
+  const { 'bg-image': _dropped, ...rest } = tokens;
+  return rest;
+}
+
 interface CachedThemeState {
   /** The admin's chosen default theme (built-in id, custom data-attr, or registered id) */
   defaultTheme: string;
@@ -138,7 +153,7 @@ export async function resolveThemeContext(
       const sib = state.customByAttr.get(sibAttr);
       if (sib) members.push({ attr: sibAttr, rec: sib });
     }
-    themeVariants = members.map((m) => ({ attr: m.attr, tokens: m.rec.tokens }));
+    themeVariants = members.map((m) => ({ attr: m.attr, tokens: sanitizeRenderTokens(m.rec.tokens) }));
     const lightM = members.find((m) => !m.rec.isDark);
     const darkM = members.find((m) => m.rec.isDark);
     if (members.length === 2 && lightM && darkM) {
@@ -167,7 +182,7 @@ export async function resolveThemeContext(
     instanceTheme: admin,
     isDark,
     themeVariants,
-    overrides: { ...state.tokenOverrides },
+    overrides: sanitizeRenderTokens({ ...state.tokenOverrides }),
     pair,
     fontHref,
   };

package/theme/layouts.css

@@ -283,6 +283,9 @@
   border: var(--border-width-default) solid var(--border);
   overflow: hidden;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast);
+  /* Glass treatment hook — `none` default is a true no-op. */
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .cpub-card:hover {