@commonpub/layer 0.23.1 → 0.23.3

package/components/views/ArticleView.vue

@@ -419,13 +419,31 @@ useJsonLd({
   font-weight: 400;
 }
 
-/* ── AVATARS ── */
+/* ── AVATARS ──
+ * Two render modes share the .cpub-av class:
+ *   <img class="cpub-av cpub-av-lg" ...>     ← avatar photo
+ *   <div class="cpub-av cpub-av-lg">JD</div>  ← initials fallback when no avatar
+ *
+ * Sizing + border-radius is shared. But `display: flex` MUST NOT apply to
+ * the <img> — when a replaced element gets `display: flex` set, browsers
+ * (notably Chromium) treat the img content render-box inconsistently and
+ * the inline `object-fit: cover` is silently dropped, producing a squished
+ * (stretched-to-box) image instead of a center-cropped one. Visible on
+ * deveco.io blog pages where author avatars are vertical photos (e.g.
+ * 816×1456) rendered into a 44×44 square.
+ *
+ * Fix: scope display:flex centering to the div variant only.
+ */
 .cpub-av {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+div.cpub-av {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -433,7 +451,12 @@ useJsonLd({
   font-weight: 600;
   color: var(--text-dim);
   font-family: var(--font-mono);
-  flex-shrink: 0;
+}
+
+/* Defensive: even when consumers forget the inline `object-fit:cover`,
+   img.cpub-av crops instead of stretching. */
+img.cpub-av {
+  object-fit: cover;
 }
 
 .cpub-av-lg { width: 44px; height: 44px; font-size: 14px; }

package/components/views/ProjectView.vue

@@ -763,12 +763,19 @@ async function handleBuild(): Promise<void> {
   flex-wrap: wrap;
 }
 
+/* See ArticleView.vue's .cpub-av comment for why display:flex is scoped
+ * to the div-variant only — stops img-variant from squishing portrait
+ * avatars (object-fit:cover gets dropped on flex-set replaced elements). */
 .cpub-av {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   background: var(--surface3);
   border: var(--border-width-default) solid var(--border);
+  flex-shrink: 0;
+}
+
+div.cpub-av {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -776,7 +783,10 @@ async function handleBuild(): Promise<void> {
   font-weight: 700;
   color: var(--text-dim);
   font-family: var(--font-mono);
-  flex-shrink: 0;
+}
+
+img.cpub-av {
+  object-fit: cover;
 }
 
 .cpub-av-lg { width: 36px; height: 36px; font-size: 12px; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.23.1",
+  "version": "0.23.3",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,16 +51,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
-    "@commonpub/auth": "0.6.0",
     "@commonpub/config": "0.15.0",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/editor": "0.7.11",
-    "@commonpub/explainer": "0.7.15",
     "@commonpub/protocol": "0.12.0",
-    "@commonpub/server": "2.57.0",
     "@commonpub/schema": "0.17.0",
-    "@commonpub/learning": "0.5.2",
+    "@commonpub/server": "2.57.0",
     "@commonpub/ui": "0.9.0",
-    "@commonpub/docs": "0.6.3"
+    "@commonpub/auth": "0.6.0",
+    "@commonpub/explainer": "0.7.15"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/index.vue

@@ -14,9 +14,22 @@ const sortedSections = computed(() =>
 );
 
 const { user: authUser } = useAuth();
-const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled, layoutEngine: layoutEngineEnabled } = useFeatures();
+const { hubs: hubsEnabled, contests: contestsEnabled, learning: learningEnabled, video: videoEnabled, docs: docsEnabled, editorial: editorialEnabled, layoutEngine: layoutEngineFlag } = useFeatures();
 const { enabledTypeMeta } = useContentTypes();
 
+// Layout engine path — only active when BOTH the flag is on AND a layout
+// actually exists in the DB for this route. Prevents the "operator enables
+// the flag without seeding a homepage layout → page goes blank" trap
+// (reported by user, session 158 follow-up). When the flag's on but
+// useLayout returns null (feature off OR no published layout for route),
+// we fall through to the configurable/legacy render paths so the user
+// still sees content. Admin can call POST /api/admin/layouts/seed-homepage
+// to populate a default and start using the layout engine for real.
+const { layout: homepageLayout } = useLayout('/');
+const layoutEngineActive = computed(
+  () => layoutEngineFlag.value && homepageLayout.value !== null,
+);
+
 const activeTab = ref(authUser.value ? 'foryou' : 'latest');
 const tabs = computed(() => [
   { value: 'foryou', label: 'For You', icon: 'fa-solid fa-sparkles' },
@@ -144,15 +157,16 @@ async function handleHubJoin(hubSlug: string): Promise<void> {
 <template>
   <div>
     <!-- ═══ LAYOUT ENGINE (Phase 1c — feature-flagged) ═══
-         When `features.layoutEngine` is ON, render the homepage via
-         <LayoutSlot> zones backed by the layouts table. Operators flip
-         this on AFTER running POST /api/admin/layouts/seed-homepage so
-         a default layout exists at scope ('route', '/'). If the flag is
-         on but no layout exists, LayoutSlot renders nothing and the
-         user sees an empty page — documented at
-         docs/reference/guides/layout-engine.md. Falls through to the
-         configurable section renderer when the flag is OFF (default). -->
-    <template v-if="layoutEngineEnabled">
+         Renders DB-driven layout via <LayoutSlot> zones ONLY when BOTH
+         (a) features.layoutEngine is ON AND (b) a layout actually exists
+         at scope ('route', '/'). Falls through to the configurable or
+         legacy renderer otherwise — including when the flag's ON but
+         no layout has been seeded yet (the "blank page" trap reported
+         in session 158 follow-up).
+
+         To enable for real: POST /api/admin/layouts/seed-homepage,
+         then flip the flag. See docs/reference/guides/layout-engine.md. -->
+    <template v-if="layoutEngineActive">
       <LayoutSlot route="/" zone="full-width" />
       <div class="cpub-main-layout">
         <main class="cpub-feed-col">

package/server/api/admin/features/index.put.ts

@@ -37,13 +37,15 @@ export default defineEventHandler(async (event) => {
 
   const merged = { ...existing, ...body.overrides };
 
-  // Remove overrides that match the base config default (no point overriding to same value)
-  const base = config.features as unknown as Record<string, boolean>;
-  for (const [key, value] of Object.entries(merged)) {
-    if (base[key] === value) {
-      delete (merged as Record<string, unknown>)[key];
-    }
-  }
+  // NOTE: previously this block tried to "remove overrides that match the
+  // base config" as a dedup, but `config.features` is the EFFECTIVE config
+  // (with overrides ALREADY applied) — so re-saving a previously-overridden
+  // flag would see `base[key] === value` (because the override was applied
+  // to base) and delete the override. The flag would then revert to the
+  // build-time default on next read. User-visible symptom: "I flipped X on
+  // in the UI but it kept reverting off." The dedup is dropped — the user's
+  // explicit override is persisted verbatim. Future "reset to default" can
+  // be a separate DELETE-overrides handler.
 
   await setInstanceSetting(db, 'features.overrides', merged, user.id, getRequestIP(event) ?? undefined);