@sarimarcus/content-sites-ui 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All packages in the platform release in lockstep; entries are per release version.
 
+## 0.24.0 (2026-10-05)
+
+- `./primitives`: `ResponsiveImage` and `ResponsivePicture`, the responsive image call site. They take `sizes` and never `widths`, `formats` or `fallbackFormat`: the variant service builds the ladder and serves WebP only (SLA-2960).
+- Every package component with a ladder image uses them. Output is unchanged except that each `<picture>` drops its `<source>`: with WebP the only format it repeated the `<img>` srcset, and for an image without variants (a gallery) it was an empty `srcset`. Proven on all three sites: every changed page equals its 0.23.0 build with those `<source>` elements removed (SLA-2960).
+
+### Deprecated
+
+- `EntityCard` and `InlineImage` `formats`: ignored, since images are WebP only. Removed in 0.25.0; `scripts/platform/migrations/responsive-image.mjs` drops it from a site's call sites (SLA-2960).
+
+### Breaking
+
+- The image-variants push gate refuses any `widths=` call site once a site pins core 0.24.0. Run `scripts/platform/migrations/responsive-image.mjs --site-root=<site>` in the pin-bump commit; it moves every `<Picture>`/`<Image widths={IMAGE_LADDER}>` onto ui `ResponsivePicture`/`ResponsiveImage` (SLA-2960).
+
 ## 0.23.0 (2026-10-04)
 
 - No changes; lockstep release with core (SLA-2958).

package/README.md

@@ -12,7 +12,7 @@ text arrives through props and slots.
 ## Primitives
 
 ```ts
-import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callout, FeatureList, Blockquote, SectionHeader, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
+import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callout, FeatureList, Blockquote, SectionHeader, ResponsiveImage, ResponsivePicture, PILL_BASE, isBadgeLength, PRICE_LABEL_MAX } from '@sarimarcus/content-sites-ui/primitives';
 ```
 
 - `Icon`: any Lucide icon by kebab-case name.
@@ -42,6 +42,11 @@ import { Icon, Badge, Chip, ArrowLabel, SectionDivider, LinkArrow, Button, Callo
 - `Blockquote`: a centred pull-quote, `quote` plus an optional `source`.
 - `SectionHeader`: an icon tile (slot `icon`), an `h2` `title` and an optional `action` slot. `iconBg` and
   `iconColor` are raw classes the site supplies.
+- `ResponsiveImage`: Astro's `<Image>` at every `IMAGE_LADDER` width the source has variants for. Takes `<Image>`'s
+  props less `widths`, `densities` and `format`, and requires `sizes`. A fixed-size image (avatar, thumbnail) stays a
+  plain `<Image width={N}>`.
+- `ResponsivePicture`: `ResponsiveImage` inside a `<picture>` that takes `pictureAttributes`, for a styled wrapper.
+  Same HTML as Astro's `<Picture>` with WebP, less its redundant `<source>`.
 - `PILL_BASE`: the shared pill geometry. `isBadgeLength`, `BADGE_MAX_CHARS`, `PRICE_LABEL_MAX`: the label-length
   limits a call site branches on (pill or prose); a price-range schema `.max()` must equal `PRICE_LABEL_MAX`.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sarimarcus/content-sites-ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Universal Astro UI components, layout shell and design tokens shared by the content sites.",
   "type": "module",
   "license": "MIT",
@@ -49,6 +49,6 @@
     "@lucide/astro": "^1.23.0",
     "astro": "^7.0.6",
     "tailwindcss": "^4.1.18",
-    "@sarimarcus/content-sites-core": "0.23.0"
+    "@sarimarcus/content-sites-core": "0.24.0"
   }
 }

package/src/affiliate/AffiliateCard.astro

@@ -1,5 +1,4 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * AffiliateCard — a bookable activity as one sponsored link: image with the title over it, description, duration,
  * price, rating and the CTA. `href` arrives finished (tagged by the site) and `productId` is the site's.
@@ -17,12 +16,12 @@ import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
  * the default derives a page-unique id).
  */
 import type { ImageMetadata } from 'astro';
-import { Picture } from 'astro:assets';
 import { deterministicId } from '@sarimarcus/content-sites-core/dom';
 import Badge from '../primitives/Badge.astro';
 import Icon from '../primitives/Icon.astro';
 import type { AffiliateCardLabels } from './types';
 import { templateLine } from './templateText';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   href: string;
@@ -168,13 +167,10 @@ const priceFrame = skipQueueFrame && title.toLowerCase().includes('skip')
         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
       />
     ) : (
-      <Picture
+      <ResponsivePicture
         src={image}
         alt={title}
-        widths={IMAGE_LADDER}
         sizes={imageSizes}
-        formats={['webp']}
-        fallbackFormat="webp"
         loading="lazy"
         decoding="async"
         fetchpriority={imageFetchpriority}

package/src/composed/EntityCard.astro

@@ -1,5 +1,4 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * EntityCard — the shared frame of an entity teaser card: a whole-card link with a focus ring, an image block
  * (optimized Picture, or a fallback img), a content area and a footer row. Everything that varies between card types
@@ -15,10 +14,8 @@ import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
  *   footer-meta — start of the footer row (location, closing time…).
  *   footer-cta  — end of the footer row.
  */
-import { Picture } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
-
-type ImageFormat = 'avif' | 'webp' | 'png' | 'jpeg' | 'jpg' | 'svg';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   href: string;
@@ -27,7 +24,8 @@ interface Props {
   /** Shown when `image` is absent. */
   fallbackSrc: string;
   imageAlt: string;
-  formats?: ImageFormat[];
+  /** @deprecated Ignored: images are WebP only (SLA-2960). Removed in the next minor. */
+  formats?: Array<'avif' | 'webp' | 'png' | 'jpeg' | 'jpg' | 'svg'>;
   /** Position in the list: the first three load eagerly, the first one at high priority. */
   index?: number;
   class?: string;
@@ -39,7 +37,6 @@ const {
   image,
   fallbackSrc,
   imageAlt,
-  formats = ['webp'],
   index = 999,
   class: className,
 } = Astro.props;
@@ -63,13 +60,10 @@ const footerClass = poster
   <a href={href} class={linkClass}>
     <div class={mediaClass}>
       {image ? (
-        <Picture
+        <ResponsivePicture
           src={image}
           alt={imageAlt}
-          widths={IMAGE_LADDER}
           sizes="(max-width: 639px) 100vw, (max-width: 1023px) 50vw, 33vw"
-          formats={formats}
-          fallbackFormat="webp"
           pictureAttributes={{ class: 'block w-full h-full' }}
           class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
           loading={index < 3 ? "eager" : "lazy"}

package/src/composed/InlineImage.astro

@@ -1,8 +1,7 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
-import { Picture } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import type { TrustedHtml } from '../types/index.ts';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   /** Imported image (ImageMetadata from Astro asset pipeline) */
@@ -43,7 +42,7 @@ interface Props {
   aspectRatio?: string;
   /** Optional URL to wrap the image in a link */
   href?: string;
-  /** Image formats for the <picture> sources (WebP only: the variant service serves nothing else). */
+  /** @deprecated Ignored: images are WebP only (SLA-2960). Removed in the next minor. */
   formats?: 'webp'[];
   /** Additional CSS classes on the outer figure element */
   class?: string;
@@ -61,7 +60,6 @@ const {
   size = 'medium',
   aspectRatio = '16/9',
   href,
-  formats = ['webp'],
   class: className,
 } = Astro.props;
 
@@ -104,13 +102,10 @@ const sizes = isFloat
 >
   {href ? (
     <a href={href} class="block group" aria-label={captionText || alt}>
-      <Picture
+      <ResponsivePicture
         src={src}
         alt={alt}
-        widths={IMAGE_LADDER}
         sizes={sizes}
-        formats={formats}
-        fallbackFormat="webp"
         pictureAttributes={{ class: 'block w-full h-full' }}
         class:list={[
           'w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]',
@@ -122,13 +117,10 @@ const sizes = isFloat
       />
     </a>
   ) : (
-    <Picture
+    <ResponsivePicture
       src={src}
       alt={alt}
-      widths={IMAGE_LADDER}
       sizes={sizes}
-      formats={formats}
-      fallbackFormat="webp"
       pictureAttributes={{ class: 'block w-full h-full' }}
       class:list={[
         'w-full object-cover',

package/src/composed/RelatedContentCard.astro

@@ -1,12 +1,11 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RelatedContentCard — one card inside RelatedContent. The grid and the carousel render this same card; only the
  * shell classes and the responsive image hints differ. Three shapes, by precedence: image-led, icon-led, plain text.
  */
-import { Picture } from 'astro:assets';
 import Icon from '../primitives/Icon.astro';
 import type { RelatedItem, RelatedTone } from './related';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   item: RelatedItem;
@@ -60,12 +59,9 @@ const hasImage = !!item.image;
 >
   {hasImage && (
     <div class="relative aspect-video overflow-hidden">
-      <Picture
+      <ResponsivePicture
         src={item.image!}
         alt={item.imageAlt || item.title}
-        widths={IMAGE_LADDER}
-        formats={['webp']}
-        fallbackFormat="webp"
         sizes={pictureSizes}
         class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
       />

package/src/editorial/ArticleCard.astro

@@ -1,13 +1,12 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * ArticleCard — one article in a grid: image, title, byline with the published or "Updated" date, description and
  * a read link. Dates arrive formatted; the image is the route's import.
  */
-import { Picture } from 'astro:assets';
 import ArticleByline from './ArticleByline.astro';
 import Icon from '../primitives/Icon.astro';
 import type { ArticleSummary } from './types';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   article: ArticleSummary;
@@ -29,13 +28,10 @@ const { article: a, readLabel, updatedLabel, loading = 'lazy', pagefindIgnore =
 >
   {a.image ? (
     <div class="aspect-[4/3] overflow-hidden">
-      <Picture
+      <ResponsivePicture
         src={a.image}
         alt={a.imageAlt ?? ''}
-        widths={IMAGE_LADDER}
         sizes="(max-width: 640px) 100vw, 33vw"
-        formats={['webp']}
-        fallbackFormat="webp"
         class="w-full h-full object-cover motion-safe:transition-transform motion-safe:duration-500 motion-safe:group-hover:scale-105"
         loading={loading}
       />

package/src/editorial/ArticleFeatureCard.astro

@@ -1,13 +1,12 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * ArticleFeatureCard — the wide lead card above an article grid: image left, label, title, byline with the
  * published or "Updated" date, description and a read link. Dates arrive formatted; the image is the route's import.
  */
-import { Picture } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import ArticleByline from './ArticleByline.astro';
 import Icon from '../primitives/Icon.astro';
+import ResponsivePicture from '../primitives/ResponsivePicture.astro';
 
 interface Props {
   href: string;
@@ -41,13 +40,10 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3';
   <div class="grid sm:grid-cols-[1.2fr_1fr] gap-0">
     {image ? (
       <div class="aspect-[4/3] sm:aspect-auto overflow-hidden">
-        <Picture
+        <ResponsivePicture
           src={image}
           alt={imageAlt}
-          widths={IMAGE_LADDER}
           sizes="(max-width: 640px) 100vw, 50vw"
-          formats={['webp']}
-          fallbackFormat="webp"
           class="w-full h-full object-cover motion-safe:transition-transform motion-safe:duration-500 motion-safe:group-hover:scale-105"
           loading={loading}
           fetchpriority={loading === 'eager' ? 'high' : undefined}

package/src/editorial/interludes/RelatedCard.astro

@@ -1,12 +1,11 @@
 ---
-import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
 /**
  * RelatedCard — an in-article link to another page. `inline`: a ruled "read next" row. `featured`: the mid-article
  * feature card, image left. The site resolves href, eyebrow and image; an unresolved target should render nothing.
  */
 import type { ImageMetadata } from 'astro';
-import { Picture } from 'astro:assets';
 import Icon from '../../primitives/Icon.astro';
+import ResponsivePicture from '../../primitives/ResponsivePicture.astro';
 
 interface Props {
   href: string;
@@ -51,13 +50,10 @@ const { href, eyebrow, title, description, variant = 'inline', image, imageAlt,
   >
     <div class="sm:w-2/5 shrink-0 overflow-hidden bg-muted aspect-video sm:aspect-auto">
       {image ? (
-        <Picture
+        <ResponsivePicture
           src={image}
           alt={imageAlt ?? title}
-          widths={IMAGE_LADDER}
           sizes="(min-width: 640px) 40vw, 100vw"
-          formats={['webp']}
-          fallbackFormat="webp"
           class="w-full h-full object-cover"
           loading="lazy"
         />

package/src/primitives/ResponsiveImage.astro

@@ -0,0 +1,14 @@
+---
+/**
+ * ResponsiveImage — a content image served at every IMAGE_LADDER width the source has variants for. The variant
+ * service builds the ladder and serves WebP only, so a call site passes `sizes` and never widths or formats.
+ * A fixed-size image (an avatar, a thumbnail) stays a plain `<Image width={N}>`: without `sizes` a srcset
+ * reads as 100vw.
+ */
+import { Image } from 'astro:assets';
+import type { ComponentProps } from 'astro/types';
+import { IMAGE_LADDER } from '@sarimarcus/content-sites-core/images';
+
+type Props = Omit<ComponentProps<typeof Image>, 'widths' | 'densities' | 'format' | 'sizes'> & { sizes: string };
+---
+<Image {...Astro.props} widths={IMAGE_LADDER} />

package/src/primitives/ResponsivePicture.astro

@@ -0,0 +1,22 @@
+---
+/**
+ * ResponsivePicture — ResponsiveImage inside a `<picture>`, for call sites that style or select the wrapper. It
+ * renders what Astro's `<Picture>` does minus its `<source>`: with WebP the only format, the source repeated the
+ * img's srcset.
+ */
+import type { ComponentProps, HTMLAttributes } from 'astro/types';
+import ResponsiveImage from './ResponsiveImage.astro';
+
+type Props = ComponentProps<typeof ResponsiveImage> & { pictureAttributes?: HTMLAttributes<'picture'> };
+
+const { pictureAttributes = {}, ...props } = Astro.props;
+// Forwarded to <picture> as Astro's <Picture> does, so a parent's scoped styles still reach the wrapper.
+const attrs: Record<string, unknown> = { ...pictureAttributes };
+const scoped = typeof props.class === 'string' ? props.class.match(/\bastro-\w{8}\b/)?.[0] : undefined;
+if (scoped) attrs.class = attrs.class ? `${attrs.class} ${scoped}` : scoped;
+for (const key in props) if (key.startsWith('data-astro-cid')) attrs[key] = (props as Record<string, unknown>)[key];
+// No whitespace before <ResponsiveImage>: Astro's <Image> emits the space before its <img>, so the output matches
+// <Picture>'s byte for byte, less the <source>.
+---
+<picture {...attrs}><ResponsiveImage {...props} />
+</picture>

package/src/primitives/index.ts

@@ -10,5 +10,7 @@ export { default as Callout } from './Callout.astro';
 export { default as FeatureList } from './FeatureList.astro';
 export { default as Blockquote } from './Blockquote.astro';
 export { default as SectionHeader } from './SectionHeader.astro';
+export { default as ResponsiveImage } from './ResponsiveImage.astro';
+export { default as ResponsivePicture } from './ResponsivePicture.astro';
 export { PILL_BASE } from './pillRecipe';
 export { BADGE_MAX_CHARS, PRICE_LABEL_MAX, isBadgeLength } from './badgeText';