@commonpub/layer 0.71.1 → 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.1",
+  "version": "0.72.0",
   "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/editor": "0.7.11",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/protocol": "0.13.0",
     "@commonpub/config": "0.21.0",
-    "@commonpub/schema": "0.39.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/theme-studio": "0.5.1",
-    "@commonpub/ui": "0.12.2"
+    "@commonpub/schema": "0.40.0",
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/protocol": "0.13.0",
+    "@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;
     }
   }

package/pages/contests/[slug]/entries/__tests__/entryDetail.test.ts

@@ -1,150 +0,0 @@
-/**
- * Component tests for the contest entry-detail page (artifact timeline).
- *
- * Locks: the content summary card, the stage-ordered artifact timeline with
- * template-labelled fields, url fields rendered as safe links, orphaned values
- * (template field later removed) still rendering, artifact section hidden when
- * the server stripped artifacts (unprivileged viewer), and an axe scan.
- *
- * Page uses Nuxt auto-imports (useRoute, useLazyFetch, useSeoMeta, useSiteName,
- * plus the auto-imported contestStages utils) — stub them on globalThis.
- */
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render } from '@testing-library/vue';
-import { defineComponent, h, ref } from 'vue';
-import axe from 'axe-core';
-import EntryDetailPage from '../[entryId].vue';
-import { normalizeStages, currentStageId } from '../../../../../utils/contestStages';
-
-const NuxtLink = defineComponent({
-  name: 'NuxtLink',
-  props: { to: String },
-  setup(props, { slots }) {
-    return () => h('a', { href: props.to }, slots.default?.());
-  },
-});
-const stubs = { NuxtLink };
-
-const STAGES = [
-  { id: 'prop', name: 'Proposals', kind: 'submission', submissionTemplate: [
-    { key: 'summary', label: 'Summary', type: 'textarea', required: true },
-  ] },
-  { id: 'rev1', name: 'Screening', kind: 'review' },
-  { id: 'proto', name: 'Prototype', kind: 'submission', submissionTemplate: [
-    { key: 'repo_url', label: 'Repository URL', type: 'url', required: true },
-  ] },
-];
-
-function makeContest(overrides: Record<string, unknown> = {}) {
-  return {
-    title: 'Resilient America',
-    status: 'active',
-    startDate: '2026-04-01T00:00:00.000Z',
-    endDate: '2026-08-01T00:00:00.000Z',
-    judgingEndDate: null,
-    stages: STAGES,
-    currentStageId: 'proto',
-    ...overrides,
-  };
-}
-
-function makeEntry(overrides: Record<string, unknown> = {}) {
-  return {
-    id: 'e1',
-    contestId: 'c1',
-    contentId: 'ct1',
-    userId: 'u1',
-    score: 88,
-    rank: 2,
-    stageState: [{ stageId: 'rev1', status: 'advanced' }],
-    eliminated: false,
-    stageSubmissions: [
-      // Deliberately out of stage order — the timeline must sort by stage.
-      { stageId: 'proto', fields: { repo_url: 'https://github.com/x/y' }, submittedAt: '2026-07-01T12:00:00.000Z' },
-      { stageId: 'prop', fields: { summary: 'A mesh network.', legacy_field: 'kept' }, submittedAt: '2026-05-01T12:00:00.000Z' },
-    ],
-    submittedAt: '2026-04-20T12:00:00.000Z',
-    contentTitle: 'Solar Mesh Node',
-    contentSlug: 'solar-mesh-node',
-    contentType: 'project',
-    contentCoverImageUrl: null,
-    authorName: 'Ada Maker',
-    authorUsername: 'ada',
-    authorAvatarUrl: null,
-  };
-}
-
-let contestData: Record<string, unknown> | null = makeContest();
-let entryData: Record<string, unknown> | null = makeEntry();
-
-Object.assign(globalThis, {
-  useRoute: () => ({ params: { slug: 'resilient', entryId: 'e1' } }),
-  useLazyFetch: vi.fn((url: string) => ({
-    data: ref(String(url).includes('/entries/') ? entryData : contestData),
-    error: ref(null),
-  })),
-  useSeoMeta: () => {},
-  useSiteName: () => 'Test',
-  normalizeStages,
-  currentStageId,
-});
-
-function mount() {
-  return render(EntryDetailPage, { global: { stubs } });
-}
-
-beforeEach(() => {
-  contestData = makeContest();
-  entryData = makeEntry();
-});
-
-describe('entry detail page', () => {
-  it('shows the content summary with author, status badges, and a project link', () => {
-    const { container } = mount();
-    expect(container.querySelector('.cpub-ed-title')?.textContent).toBe('Solar Mesh Node');
-    expect(container.textContent).toContain('Ada Maker');
-    expect(container.textContent).toContain('Advanced');
-    expect(container.textContent).toContain('#2');
-    expect(container.textContent).toContain('Score 88');
-    const projectLink = Array.from(container.querySelectorAll('a')).find((a) => a.textContent?.includes('View the project'));
-    expect(projectLink?.getAttribute('href')).toBe('/u/ada/project/solar-mesh-node');
-  });
-
-  it('renders the artifact timeline in stage order with template labels', () => {
-    const { container } = mount();
-    const names = Array.from(container.querySelectorAll('.cpub-ed-stagename')).map((n) => n.textContent);
-    expect(names).toEqual(['Proposals', 'Prototype']); // stage order, not submit order
-    expect(container.textContent).toContain('Summary');
-    expect(container.textContent).toContain('A mesh network.');
-  });
-
-  it('renders url fields as hardened external links', () => {
-    const { container } = mount();
-    const link = Array.from(container.querySelectorAll('.cpub-ed-fields a')).find((a) => a.textContent === 'https://github.com/x/y');
-    expect(link).toBeTruthy();
-    expect(link!.getAttribute('rel')).toContain('noopener');
-  });
-
-  it('still renders values whose template field was later removed (never drop data)', () => {
-    const { container } = mount();
-    expect(container.textContent).toContain('legacy_field');
-    expect(container.textContent).toContain('kept');
-  });
-
-  it('hides the artifact section entirely when the server stripped artifacts', () => {
-    // The route handler `delete`s the key for unprivileged viewers — mirror that.
-    const stripped = makeEntry();
-    delete (stripped as Record<string, unknown>).stageSubmissions;
-    entryData = stripped;
-    const { container } = mount();
-    expect(container.querySelector('.cpub-ed-stages')).toBeNull();
-    // The content card still shows — the page is useful to the public.
-    expect(container.querySelector('.cpub-ed-title')?.textContent).toBe('Solar Mesh Node');
-  });
-
-  it('passes an axe scan', async () => {
-    const { container } = mount();
-    const results = await axe.run(container);
-    expect(results.violations).toEqual([]);
-  });
-});