@commonpub/layer 0.21.18 → 0.21.20

package/components/blocks/BlockCodeView.vue

@@ -201,6 +201,13 @@ pre.hljs .hljs-title.class_ { color: var(--hljs-variable); }
   font-size: 13px;
   line-height: 1.6;
   overflow-x: auto;
+  /* Reset the global `.cpub-prose pre` rule from prose.css that adds
+     border + 16px top/bottom margin to every <pre> inside prose. Inside
+     a BlockCodeView the container already owns the border + the header
+     sits directly above the body — the global rule's margin and extra
+     border created a visible "floating bar with gap then code block"
+     effect (heatsynclabs.io report, 2026-05-21). */
+  border: 0 !important;
 }
 
 .cpub-code-body code {

package/components/blocks/BlockImageView.vue

@@ -4,22 +4,53 @@ const props = defineProps<{ content: Record<string, unknown> }>();
 const src = computed(() => (props.content.src as string) || (props.content.url as string) || '');
 const alt = computed(() => (props.content.alt as string) || '');
 const caption = computed(() => (props.content.caption as string) || '');
+
+/**
+ * Rendered-width preset. New uploads (editor ≥ 0.7.11) carry `size` on
+ * the BlockTuple content; pre-picker content (no `size` field) falls
+ * back to `l` to preserve its pre-0.21.19 visual width — that's the
+ * 760px cap from layer 0.21.18.
+ */
+type ImageSize = 's' | 'm' | 'l' | 'full';
+const size = computed<ImageSize>(() => {
+  const v = props.content.size;
+  return v === 's' || v === 'm' || v === 'l' || v === 'full' ? v : 'l';
+});
 </script>
 
 <template>
-  <figure v-if="src" class="cpub-block-image">
+  <figure v-if="src" class="cpub-block-image" :class="`cpub-image-size-${size}`">
     <img :src="src" :alt="alt" class="cpub-image-img" loading="lazy" />
     <figcaption v-if="caption" class="cpub-image-caption">{{ caption }}</figcaption>
   </figure>
 </template>
 
 <style scoped>
+/**
+ * Width preset is applied via a class on the <figure> wrapper. The image
+ * itself is `width: 100%` of the wrapper, so capping the wrapper's
+ * max-width caps the image. `margin-inline: auto` centers when narrower
+ * than the available column. The caption sits underneath at the wrapper's
+ * width so it never extends past the image.
+ *
+ * Aspect ratio is preserved via the image's intrinsic ratio + `height:
+ * auto`. The .cpub-prose :deep(img) cap in ProjectView.vue still applies
+ * but at 760px — these per-block presets stay within that envelope (the
+ * 760-cap in ProjectView is the fallback when no per-block size is set).
+ */
 .cpub-block-image {
-  margin: 24px 0;
+  margin: 24px auto;
+  display: block;
 }
 
+.cpub-image-size-s { max-width: 320px; }
+.cpub-image-size-m { max-width: 540px; }
+.cpub-image-size-l { max-width: 760px; }
+.cpub-image-size-full { max-width: 100%; }
+
 .cpub-image-img {
   width: 100%;
+  height: auto;
   display: block;
   border: var(--border-width-default) solid var(--border);
 }

package/components/blocks/BlockPartsListView.vue

@@ -77,6 +77,15 @@ const totalPrice = computed(() => {
 
 .cpub-parts-table { width: 100%; border-collapse: collapse; }
 
+/* Reset the global `.cpub-prose th` rule from prose.css that puts a
+   1px border on every <th>. With `border-collapse: collapse`, those
+   borders merge into thin lines that visually split the dark header
+   row into separate "rounded gap" boxes against the var(--text)
+   background. The container's outer border already frames the row;
+   internal cell borders are not wanted (heatsynclabs.io report,
+   2026-05-21). Use !important to beat the global rule (specificity
+   0,2,0 vs 0,1,1 would normally win, but the global rule sets
+   `border` which the scoped rule doesn't, so it leaks through). */
 .cpub-parts-table th {
   font-family: var(--font-mono);
   font-size: 9px;
@@ -87,10 +96,12 @@ const totalPrice = computed(() => {
   padding: 8px 12px;
   background: var(--text);
   color: var(--surface);
+  border: 0 !important;
 }
 
 .cpub-parts-table td {
   padding: 10px 12px;
+  border: 0;
   border-bottom: var(--border-width-default) solid var(--border2);
   font-size: 13px;
   color: var(--text-dim);

package/components/views/ProjectView.vue

@@ -713,7 +713,10 @@ async function handleBuild(): Promise<void> {
 .cpub-page-outer {
   max-width: 1160px;
   margin: 0 auto;
-  padding: 0 clamp(12px, 3vw, 32px);
+  /* A smidge more breathing room at all widths: min 20 (was 12),
+     max 40 (was 32). Keeps content from hugging the viewport edge
+     on mid-size screens. */
+  padding: 0 clamp(20px, 3.5vw, 40px);
 }
 
 /* ── BREADCRUMB ── */
@@ -989,9 +992,16 @@ async function handleBuild(): Promise<void> {
   overflow-wrap: break-word;
 }
 
-/* ── COVER PHOTO (in-body) ── */
+/* ── COVER PHOTO (in-body) ──
+ * The in-body featured image. Lives OUTSIDE .cpub-prose, so the
+ * `.cpub-prose img` cap doesn't reach it. Cap here at 880px (a touch
+ * wider than the 'l' preset for body images, since this is the hero
+ * featured image) and center. Pre-0.21.19 this was unbounded `width:
+ * 100%` and grew to whatever the content column was — too big on wide
+ * layouts. */
 .cpub-cover-photo {
-  margin-bottom: 24px;
+  margin: 0 auto 24px;
+  max-width: 880px;
 }
 
 .cpub-cover-photo-img {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.18",
+  "version": "0.21.20",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,15 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.6.0",
+    "@commonpub/docs": "0.6.3",
     "@commonpub/config": "0.13.0",
     "@commonpub/explainer": "0.7.15",
-    "@commonpub/server": "2.55.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/protocol": "0.12.0",
     "@commonpub/schema": "0.16.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/editor": "0.7.10",
-    "@commonpub/docs": "0.6.3",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/editor": "0.7.11",
+    "@commonpub/ui": "0.8.5",
+    "@commonpub/server": "2.55.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",