@duffcloudservices/cms 0.11.0 → 0.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duffcloudservices/cms",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Vue 3 composables and Vite plugins for DCS CMS integration",
   "type": "module",
   "exports": {
@@ -46,15 +46,6 @@
     "src/components",
     "src/composables"
   ],
-  "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "type-check": "tsc --noEmit",
-    "lint": "eslint src --ext .ts",
-    "prepublishOnly": "pnpm run build"
-  },
   "peerDependencies": {
     "vue": "^3.4.0",
     "@unhead/vue": "^1.9.0",
@@ -66,8 +57,8 @@
     }
   },
   "dependencies": {
-    "@duffcloudservices/cms-core": "0.4.3",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "@duffcloudservices/cms-core": "0.7.0"
   },
   "devDependencies": {
     "@types/js-yaml": "^4.0.9",
@@ -106,5 +97,13 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "type-check": "tsc --noEmit",
+    "lint": "eslint src --ext .ts"
   }
-}
+}

package/src/components/DcsReviewShowcase.vue

@@ -148,7 +148,11 @@ function isEditorContext(): boolean {
             </div>
           </div>
 
-          <div class="dcs-review-card__rating" :aria-label="`${review.rating} out of 5 stars`">
+          <div
+            class="dcs-review-card__rating"
+            role="img"
+            :aria-label="`${review.rating} out of 5 stars`"
+          >
             <svg
               v-for="star in 5"
               :key="star"

package/src/components/ManagedImage.test.ts

@@ -73,3 +73,63 @@ describe('ManagedImage self-healing fallback', () => {
     expect(wrapper.find('img').attributes('src')).toBe(ORIGINAL)
   })
 })
+
+describe('ManagedImage layout-shift (CLS) dimension hints', () => {
+  it('emits width/height on the <img> when explicit dimensions are provided', () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageKey: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+        width: 1920,
+        height: 1080,
+      },
+    })
+
+    const img = wrapper.find('img')
+    expect(img.attributes('width')).toBe('1920')
+    expect(img.attributes('height')).toBe('1080')
+    // Hero context also gets the LCP priority hint.
+    expect(img.attributes('fetchpriority')).toBe('high')
+  })
+
+  it('emits NO width/height when dimensions are unknown (never fabricated)', () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageKey: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+      },
+    })
+
+    const img = wrapper.find('img')
+    expect(img.attributes('width')).toBeUndefined()
+    expect(img.attributes('height')).toBeUndefined()
+  })
+
+  it('reads .src/.width/.height from a D1-A dot-suffix imageBase and targets the .src key for the VE', () => {
+    const wrapper = mount(ManagedImage, {
+      props: {
+        pageSlug: 'home',
+        imageBase: 'hero.image',
+        fallbackSrc: ORIGINAL,
+        fallbackAlt: 'Hero',
+        context: 'hero',
+        width: 1600,
+        height: 900,
+      },
+    })
+
+    const img = wrapper.find('img')
+    // Dimensions flow through to the CLS hint.
+    expect(img.attributes('width')).toBe('1600')
+    expect(img.attributes('height')).toBe('900')
+    // The VE stages replacements against the `<base>.src` key.
+    expect(img.attributes('data-dcs-image-key')).toBe('hero.image.src')
+    expect(img.attributes('data-dcs-image-url')).toBe(ORIGINAL)
+  })
+})

package/src/components/ManagedImage.vue

@@ -8,38 +8,82 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<{
   pageSlug: string
-  imageKey: string
+  imageKey?: string
   fallbackSrc: string
   altKey?: string
   fallbackAlt?: string
   context?: ImageContext
   sizes?: string
   original?: boolean
+  /**
+   * D1-A structured image base (Q-168=A): a single dot-suffix key group, e.g.
+   * `hero.image`, from which `.src` / `.alt` / `.width` / `.height` are read.
+   * When set it supersedes `imageKey`/`altKey`. The legacy two-key form keeps
+   * working forever for backward compatibility. The `.width`/`.height` values
+   * feed the CLS layout-shift hint; when they are absent no hint is emitted
+   * (never fabricated).
+   */
+  imageBase?: string
+  /**
+   * Explicit intrinsic dimensions — a fallback when no `.width`/`.height`
+   * content key exists (e.g. a static hero whose size is known at build time).
+   * Both must be positive to emit a hint.
+   */
+  width?: number
+  height?: number
 }>(), {
+  imageKey: '',
   altKey: '',
   fallbackAlt: '',
   context: 'content',
   sizes: undefined,
   original: false,
+  imageBase: '',
+  width: undefined,
+  height: undefined,
 })
 
+// Resolve the effective content keys. `imageBase` (D1-A) derives the four
+// dot-suffix keys; otherwise fall back to the legacy imageKey/altKey pair.
+const srcKey = computed(() => (props.imageBase ? `${props.imageBase}.src` : props.imageKey))
+const effectiveAltKey = computed(() => (props.imageBase ? `${props.imageBase}.alt` : props.altKey))
+const widthKey = computed(() => (props.imageBase ? `${props.imageBase}.width` : ''))
+const heightKey = computed(() => (props.imageBase ? `${props.imageBase}.height` : ''))
+
 const attrs = useAttrs()
 const { t } = useTextContent({
   pageSlug: props.pageSlug,
   defaults: {
-    [props.imageKey]: props.fallbackSrc,
-    ...(props.altKey ? { [props.altKey]: props.fallbackAlt } : {}),
+    ...(srcKey.value ? { [srcKey.value]: props.fallbackSrc } : {}),
+    ...(effectiveAltKey.value ? { [effectiveAltKey.value]: props.fallbackAlt } : {}),
+    ...(widthKey.value && props.width ? { [widthKey.value]: String(props.width) } : {}),
+    ...(heightKey.value && props.height ? { [heightKey.value]: String(props.height) } : {}),
   },
 })
 
-const imageSrc = computed(() => t(props.imageKey, props.fallbackSrc))
-const imageAlt = computed(() => (props.altKey ? t(props.altKey, props.fallbackAlt) : props.fallbackAlt))
+/** Parse a content value (always a string) into a positive integer, or undefined. */
+function toPositiveInt(value: string | undefined): number | undefined {
+  if (!value) return undefined
+  const n = Number.parseInt(value, 10)
+  return Number.isFinite(n) && n > 0 ? n : undefined
+}
+
+const imageSrc = computed(() => t(srcKey.value, props.fallbackSrc))
+const imageAlt = computed(() => (effectiveAltKey.value ? t(effectiveAltKey.value, props.fallbackAlt) : props.fallbackAlt))
+const imageWidth = computed(() =>
+  toPositiveInt(widthKey.value ? t(widthKey.value, '') : undefined) ?? (props.width && props.width > 0 ? props.width : undefined),
+)
+const imageHeight = computed(() =>
+  toPositiveInt(heightKey.value ? t(heightKey.value, '') : undefined) ?? (props.height && props.height > 0 ? props.height : undefined),
+)
 const image = useResponsiveImage({
   src: imageSrc,
   alt: imageAlt,
   context: () => props.context,
   sizes: () => props.sizes,
   original: () => props.original,
+  width: imageWidth,
+  height: imageHeight,
 })
 
 // Self-heal: a fit-variant (`-md`/`-lg`) may legitimately be absent when the
@@ -61,7 +105,10 @@ const imgAttrs = computed(() => ({
   // When a variant has failed, render the original (also exposed as
   // data-dcs-image-url for the visual editor) instead of the 404'd variant.
   ...(failed.value ? { src: imageSrc.value } : {}),
-  'data-dcs-image-key': props.imageKey,
+  // The VE stages a replacement against the SRC key (the key that holds the
+  // image URL), which is the dot-suffix `<base>.src` when imageBase is used,
+  // or the legacy imageKey otherwise.
+  'data-dcs-image-key': srcKey.value,
   'data-dcs-image-url': imageSrc.value,
   'data-dcs-image-alt': imageAlt.value,
 }))

package/src/composables/useResponsiveImage.ts

@@ -50,6 +50,10 @@ export interface UseResponsiveImageOptions {
   sizes?: MaybeRefOrGetter<string | undefined>
   /** Skip variant resolution and use the original URL only. */
   original?: MaybeRefOrGetter<boolean | undefined>
+  /** Intrinsic width — emitted as a layout-shift hint when paired with `height`. */
+  width?: MaybeRefOrGetter<number | undefined>
+  /** Intrinsic height — emitted as a layout-shift hint when paired with `width`. */
+  height?: MaybeRefOrGetter<number | undefined>
 }
 
 /**
@@ -67,6 +71,8 @@ export function useResponsiveImage(options: UseResponsiveImageOptions): Responsi
       context: toValue(options.context),
       sizes: toValue(options.sizes),
       original: toValue(options.original) ?? undefined,
+      width: toValue(options.width) ?? undefined,
+      height: toValue(options.height) ?? undefined,
     }),
   )