@commonpub/layer 0.71.2 → 0.72.1

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 {
@@ -164,6 +166,10 @@ function formatCount(n: number | undefined): string {
   align-items: center;
   justify-content: center;
   overflow: hidden;
+  /* Edge-spanning section inside the card's overflow:hidden — the container
+     clips the outer corners; rounding HERE creates wedge gaps on rounded
+     themes (universal radius leak). */
+  border-radius: 0;
 }
 
 .cpub-cc-cover {

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/VideoCard.vue

@@ -55,6 +55,9 @@ function formatDuration(seconds: number | null | undefined): string {
   background: var(--surface2);
   border-bottom: var(--border-width-default) solid var(--border);
   overflow: hidden;
+  /* Edge-spanning section inside the card's overflow:hidden — rounding here
+     creates wedge gaps on rounded themes; the container clips the corners. */
+  border-radius: 0;
 }
 
 .cpub-video-thumb img {

package/components/admin/theme/studio/AdminThemeStudio.vue

@@ -83,8 +83,30 @@ const SCHEMES: { val: HarmonyScheme; label: string }[] = [
 // --- Design-ethos archetype (Phase 3) ----------------------------------
 // Applies a whole structural preset (shape/shadow/border/type/density/texture)
 // while preserving the user's chosen color + mode, then tags the recipe.
+// `treatment` is REPLACED, not merged: switching Glass → Brutalist must clear
+// the translucency, otherwise the ethos switch is incoherent.
 function applyArchetype(a: DesignArchetype): void {
-  recipe.value = { ...recipe.value, ...a.patch, archetype: a.k };
+  const { treatment, ...rest } = a.patch;
+  recipe.value = { ...recipe.value, ...rest, treatment, archetype: a.k };
+}
+
+// --- Surface treatment (glass + page gradient) --------------------------
+// Normalized so "all off" stores `undefined` (keeps legacy recipes and the
+// no-treatment projection byte-identical).
+const glassPct = computed(() => Math.round((recipe.value.treatment?.glass ?? 0) * 100));
+function setTreatment(patch: { glass?: number; bgGradient?: boolean }): void {
+  const next = {
+    glass: recipe.value.treatment?.glass ?? 0,
+    bgGradient: recipe.value.treatment?.bgGradient ?? false,
+    ...patch,
+  };
+  recipe.value.treatment =
+    next.glass > 0 || next.bgGradient
+      ? {
+          ...(next.glass > 0 ? { glass: next.glass } : {}),
+          ...(next.bgGradient ? { bgGradient: true } : {}),
+        }
+      : undefined;
 }
 
 // --- Neutral temperature (Phase 2) -------------------------------------
@@ -529,6 +551,14 @@ function finishWith(apply: boolean): void {
           <span class="cpub-studio-lbl">Grain <span class="cpub-studio-val">{{ Math.round(recipe.texture * 100) }}%</span></span>
           <input type="range" min="0" max="12" :value="Math.round(recipe.texture * 100)" class="cpub-studio-range" @input="recipe.texture = Number(($event.target as HTMLInputElement).value) / 100" />
         </label>
+        <label class="cpub-studio-field">
+          <span class="cpub-studio-lbl">Glass <span class="cpub-studio-val">{{ glassPct }}%</span></span>
+          <input type="range" min="0" max="30" :value="glassPct" class="cpub-studio-range" aria-label="Glass strength" @input="setTreatment({ glass: Number(($event.target as HTMLInputElement).value) / 100 })" />
+        </label>
+        <div class="cpub-studio-toggle-line">
+          <span class="cpub-studio-lbl">Background gradient <span class="cpub-studio-hint">tints toward accent</span></span>
+          <button type="button" class="cpub-studio-switch" :class="{ on: recipe.treatment?.bgGradient }" :aria-pressed="Boolean(recipe.treatment?.bgGradient)" aria-label="Toggle background gradient" @click="setTreatment({ bgGradient: !recipe.treatment?.bgGradient })" />
+        </div>
         <label class="cpub-studio-field">
           <span class="cpub-studio-lbl">Motion</span>
           <span class="cpub-studio-seg">

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/components/hub/HubHero.vue

@@ -67,6 +67,9 @@ const isCompanyHub = computed(() => hubType.value === 'company');
   position: relative;
   overflow: hidden;
   border-bottom: var(--border-width-default) solid var(--border);
+  /* Edge-spanning band inside the hero's overflow:hidden — rounding here
+     creates wedge gaps on rounded themes; the container clips the corners. */
+  border-radius: 0;
 }
 
 .cpub-hub-banner-pattern {

package/layouts/default.vue

@@ -281,6 +281,7 @@ const userUsername = computed(() => user.value?.username ?? '');
   border-bottom-left-radius: var(--cpub-topbar-radius, 0);
   border-bottom-right-radius: var(--cpub-topbar-radius, 0);
   box-shadow: var(--cpub-topbar-shadow, none);
+  -webkit-backdrop-filter: var(--cpub-topbar-blur, none);
   backdrop-filter: var(--cpub-topbar-blur, none);
   display: flex; align-items: center;
   padding: 0 var(--cpub-topbar-padding-x, 20px); gap: 0; z-index: 100;
@@ -322,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;
@@ -362,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; }
@@ -374,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.71.2",
+  "version": "0.72.1",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -57,13 +57,13 @@
     "@commonpub/config": "0.21.0",
     "@commonpub/docs": "0.6.3",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/schema": "0.39.0",
+    "@commonpub/schema": "0.40.0",
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/ui": "0.13.1",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/server": "2.84.1",
-    "@commonpub/theme-studio": "0.5.1",
-    "@commonpub/ui": "0.12.2"
+    "@commonpub/learning": "0.5.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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/base.css

@@ -216,6 +216,15 @@
   --shadow-block: 4px 4px 0 var(--border);
   --shadow-block-sm: 2px 2px 0 var(--border);
 
+  /* === TREATMENTS ===
+     Surface effects. Defaults are TRUE no-ops: `none`, never `blur(0)` — any
+     non-none backdrop-filter creates a stacking context and becomes the
+     containing block for fixed/absolute descendants, which would move
+     dropdowns/modals on every existing theme. Built-in themes don't set
+     these; Theme Studio emits them for glass recipes. */
+  --surface-backdrop: none;  /* backdrop-filter for cards/panels (glass) */
+  --bg-image: none;          /* page background gradient (gradients only) */
+
   /* === TRANSITIONS === */
   --transition-fast: 0.1s ease;
   --transition-default: 0.15s ease;
@@ -298,6 +307,7 @@ body {
   line-height: var(--leading-normal);
   color: var(--text);
   background-color: var(--bg);
+  background-image: var(--bg-image, none);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

package/theme/components.css

@@ -90,6 +90,10 @@
   padding: 16px;
   margin-bottom: 12px;
   box-shadow: var(--shadow-block);
+  /* Glass treatment hook — `none` by default (a true no-op; non-none values
+     create a stacking context, so only opted-in themes pay that cost). */
+  -webkit-backdrop-filter: var(--surface-backdrop, none);
+  backdrop-filter: var(--surface-backdrop, none);
 }
 
 .cpub-sb-title {

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 {

package/utils/themeDiscovery.ts

@@ -15,6 +15,25 @@ export interface DiscoveredTheme {
   isDark: boolean;
 }
 
+/**
+ * Substitute `var(--x)` / `var(--x, fallback)` references in a default
+ * value using a property getter (computed style). getComputedStyle returns
+ * custom properties with their var() references ALREADY substituted, so a
+ * spec default like `var(--surface)` must be resolved the same way before
+ * diffing — otherwise every var()-defaulted token (font-heading, the chrome
+ * family) reads as "overridden" on a stock site.
+ */
+export function resolveVarRefs(get: (name: string) => string, value: string): string {
+  let out = value;
+  for (let i = 0; i < 4 && out.includes('var('); i++) {
+    out = out.replace(/var\((--[a-zA-Z0-9_-]+)(?:,\s*([^()]*))?\)/g, (_, name: string, fb?: string) => {
+      const v = get(name).trim();
+      return v || fb || '';
+    });
+  }
+  return out;
+}
+
 /**
  * Read `getComputedStyle(:root)` for every canonical token and return
  * the subset that differs from `TOKEN_SPECS[i].default`.
@@ -23,11 +42,12 @@ export function detectAppliedOverrides(): DiscoveredTheme {
   if (typeof window === 'undefined') return { count: 0, tokens: {}, isDark: false };
   const root = document.documentElement;
   const cs = getComputedStyle(root);
+  const get = (name: string): string => cs.getPropertyValue(name);
   const overrides: Record<string, string> = {};
   for (const spec of TOKEN_SPECS) {
     const actual = cs.getPropertyValue(`--${spec.key}`).trim();
     if (!actual) continue;
-    if (normalize(actual) !== normalize(spec.default)) {
+    if (normalize(actual) !== normalize(resolveVarRefs(get, spec.default))) {
       overrides[spec.key] = actual;
     }
   }