@commonpub/layer 0.86.0 → 0.86.2

package/components/LayoutSection.vue

@@ -640,7 +640,7 @@ function onHandlePointerDown(e: PointerEvent): void {
   gap: 4px;
   align-items: center;
 }
-.cpub-layout-section-placeholder code { color: var(--accent); }
+.cpub-layout-section-placeholder code { color: var(--code-inline); }
 .cpub-layout-section-placeholder-hint {
   font-size: var(--text-xs);
   color: var(--text-faint);

package/components/admin/theme/AdminThemeSceneGallery.vue

@@ -205,7 +205,7 @@ export function digestFor(body: string): string {
 .scene-muted { font-size: var(--text-sm); color: var(--text-dim); margin: 0; }
 .scene-faint { font-size: var(--text-sm); color: var(--text-faint); margin: 0; }
 .scene-mono-label { font-family: var(--font-mono); font-size: var(--text-label); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-dim); margin: 0; }
-.scene-inline-code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); color: var(--accent); border: var(--border-width-thin) solid var(--border2); }
+.scene-inline-code { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); color: var(--code-inline); border: var(--border-width-thin) solid var(--border2); }
 
 /* Buttons */
 .scene-btn {

package/components/admin/theme/AdminThemeSceneProse.vue

@@ -119,7 +119,7 @@
   color: var(--text-dim);
   background: var(--accent-bg);
 }
-.scene-prose-code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--accent); }
+.scene-prose-code-inline { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; background: var(--surface2); border: var(--border-width-thin) solid var(--border2); color: var(--code-inline); }
 .scene-prose-pre {
   background: var(--code-bg);
   color: var(--code-text);

package/components/blocks/BlockEmbedView.vue

@@ -56,17 +56,20 @@ const size = computed<EmbedSize>(() => {
 .cpub-embed-label i { color: var(--accent); }
 
 .cpub-embed-wrap {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
+  display: block;
+  line-height: 0;
   border-radius: 0;
 }
 
+/* 16:9 via aspect-ratio so a prose `iframe { height: auto }` rule cooperates with
+   the ratio rather than collapsing the iframe (see BlockVideoView). */
 .cpub-embed-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: block;
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  background: var(--text);
+  border-radius: 0;
 }
 </style>

package/components/blocks/BlockTextView.vue

@@ -25,7 +25,7 @@ const html = computed(() => sanitizeBlockHtml((props.content.html as string) ||
 .cpub-block-text :deep(code) {
   font-family: var(--font-mono);
   font-size: 13px;
-  color: var(--teal);
+  color: var(--code-inline);
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;

package/components/blocks/BlockVideoView.vue

@@ -78,18 +78,22 @@ const platform = computed(() => {
 .cpub-video-label i { color: var(--accent); }
 
 .cpub-video-wrap {
-  position: relative;
-  padding-bottom: 56.25%;
-  height: 0;
-  background: var(--text);
+  display: block;
+  line-height: 0;
   border-radius: 0;
 }
 
+/* 16:9 via aspect-ratio on the iframe (not the legacy padding-bottom hack), so a
+   prose `iframe { height: auto }` rule (ProjectView/ArticleView/ExplainerView)
+   COOPERATES with the ratio instead of collapsing the iframe inside a 0-height
+   wrap and leaving black space below it. */
 .cpub-video-iframe {
-  position: absolute;
-  top: 0;
-  left: 0;
+  display: block;
   width: 100%;
-  height: 100%;
+  aspect-ratio: 16 / 9;
+  height: auto;
+  border: 0;
+  background: var(--text);
+  border-radius: 0;
 }
 </style>

package/components/views/ArticleView.vue

@@ -568,7 +568,7 @@ useJsonLd({
 .cpub-prose :deep(code) {
   font-family: var(--font-mono);
   font-size: 13px;
-  color: var(--teal);
+  color: var(--code-inline);
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;

package/components/views/ExplainerView.vue

@@ -696,7 +696,7 @@ onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
   background: var(--surface2);
   border: var(--border-width-default) solid var(--border);
   padding: 1px 6px;
-  color: var(--accent);
+  color: var(--code-inline);
 }
 
 .cpub-empty-section {

package/components/views/ProjectView.vue

@@ -926,7 +926,7 @@ async function handleBuild(): Promise<void> {
   background: var(--surface2);
   padding: 2px 5px;
   border: var(--border-width-default) solid var(--border2);
-  color: var(--accent);
+  color: var(--code-inline);
 }
 
 .cpub-prose :deep(pre code) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.86.0",
+  "version": "0.86.2",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -55,16 +55,16 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.8.0",
-    "@commonpub/learning": "0.5.2",
-    "@commonpub/explainer": "0.8.0",
+    "@commonpub/config": "0.23.0",
     "@commonpub/schema": "0.48.0",
+    "@commonpub/learning": "0.5.2",
     "@commonpub/server": "2.92.0",
     "@commonpub/protocol": "0.14.0",
-    "@commonpub/theme-studio": "0.6.1",
-    "@commonpub/config": "0.23.0",
-    "@commonpub/ui": "0.13.1",
     "@commonpub/editor": "0.9.0",
-    "@commonpub/docs": "0.6.3"
+    "@commonpub/theme-studio": "0.6.1",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/explainer": "0.8.0",
+    "@commonpub/ui": "0.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",