@commonpub/layer 0.80.0 → 0.81.0

package/components/ImageCropperModal.vue

@@ -256,10 +256,15 @@ function apply(): void {
   border: var(--border-width-default, 2px) dashed var(--accent);
 }
 
-/* Style vue-advanced-cropper internals to the design system. */
-.cpub-cropper :deep(.vue-advanced-cropper__background),
+/* Crop scrim: a theme-INDEPENDENT dark overlay so the crop bounds read clearly
+   on every theme. (`--color-surface-scrim` is near-white in light themes, which
+   washed the bounds out — a cropper surround must always darken.) The area
+   outside the crop frame is dimmed; the crop window stays bright. */
+.cpub-cropper :deep(.vue-advanced-cropper__background) {
+  background: #1a1a1a;
+}
 .cpub-cropper :deep(.vue-advanced-cropper__foreground) {
-  background: var(--color-surface-scrim, rgba(0, 0, 0, 0.55));
+  background: rgba(0, 0, 0, 0.6);
 }
 /* Belt-and-suspenders with handlers:{}/lines:{}: never show the resize chrome. */
 .cpub-cropper :deep(.vue-line-wrapper),

package/components/contest/ContestHero.vue

@@ -239,6 +239,10 @@ const dateRange = computed<string>(() => {
 /* ── BANNER BAND ── full-width, clean, like other content pages' hero banner. */
 .cpub-hero-banner {
   width: 100%;
+  /* Match the 4:1 upload crop so the banner shows exactly as framed (WYSIWYG)
+     instead of being re-cropped by a fixed height. */
+  aspect-ratio: 4 / 1;
+  max-height: 360px;
   background: var(--surface2);
   border-bottom: var(--border-width-default) solid var(--border);
   overflow: hidden;
@@ -246,9 +250,8 @@ const dateRange = computed<string>(() => {
 .cpub-hero-banner img {
   display: block;
   width: 100%;
-  max-height: 300px;
+  height: 100%;
   object-fit: cover;
-  margin: 0 auto;
 }
 
 /* ── HERO BODY ── the contest's dark, patterned section. */
@@ -318,7 +321,7 @@ const dateRange = computed<string>(() => {
 @media (max-width: 768px) {
   .cpub-hero-body { padding: 32px 0; }
   .cpub-hero-inner { padding: 0 16px; }
-  .cpub-hero-banner img { max-height: 200px; }
+  .cpub-hero-banner { max-height: 200px; }
   .cpub-hero-title { font-size: 24px; }
   .cpub-hero-meta { gap: 10px; }
 }

package/components/hub/HubHero.vue

@@ -62,7 +62,9 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 .cpub-hub-hero { position: relative; overflow: hidden; }
 
 .cpub-hub-banner {
-  height: 180px;
+  /* Match the 4:1 upload crop so the banner shows exactly as framed (WYSIWYG). */
+  aspect-ratio: 4 / 1;
+  max-height: 320px;
   background: linear-gradient(135deg, var(--accent) 0%, var(--teal) 50%, var(--accent-border) 100%);
   position: relative;
   overflow: hidden;
@@ -177,7 +179,7 @@ const isCompanyHub = computed(() => hubType.value === 'company');
 }
 
 @media (max-width: 640px) {
-  .cpub-hub-banner { height: 120px; }
+  .cpub-hub-banner { max-height: 160px; }
   .cpub-hub-meta-inner { flex-direction: column; padding: 0 16px; }
   .cpub-hub-icon { margin-top: -24px; width: 56px; height: 56px; font-size: 22px; }
   .cpub-hub-name { font-size: 1.25rem; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.80.0",
+  "version": "0.81.0",
   "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/docs": "0.6.3",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/config": "0.22.1",
+    "@commonpub/docs": "0.6.3",
+    "@commonpub/editor": "0.7.12",
     "@commonpub/protocol": "0.13.0",
+    "@commonpub/ui": "0.13.1",
     "@commonpub/learning": "0.5.2",
     "@commonpub/theme-studio": "0.6.1",
     "@commonpub/schema": "0.44.0",
-    "@commonpub/server": "2.88.0",
-    "@commonpub/ui": "0.13.1",
-    "@commonpub/explainer": "0.7.15",
-    "@commonpub/editor": "0.7.12"
+    "@commonpub/server": "2.88.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",