@commonpub/layer 0.71.2 → 0.72.0

package/components/ContentCard.vue

@@ -164,6 +164,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/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/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;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.71.2",
+  "version": "0.72.0",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,15 +55,15 @@
     "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/explainer": "0.7.15",
-    "@commonpub/learning": "0.5.2",
     "@commonpub/protocol": "0.13.0",
-    "@commonpub/schema": "0.39.0",
-    "@commonpub/server": "2.84.1",
-    "@commonpub/theme-studio": "0.5.1",
-    "@commonpub/ui": "0.12.2"
+    "@commonpub/explainer": "0.7.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

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/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;
     }
   }