simple-module-pagebuilder 0.0.2__tar.gz → 0.0.4__tar.gz

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: simple_module_pagebuilder
-Version: 0.0.2
+Version: 0.0.4
 Summary: Drag-and-drop visual page builder for simple_module apps
 Project-URL: Repository, https://github.com/antosubash/simple_module_python_modules
 Author-email: Anto Subash <antosubash@live.com>
@@ -81,6 +81,38 @@ Once installed and migrated, sign in and open `/pagebuilder`:
 Every transition writes a revision, so `/pagebuilder/{id}/edit` can compare any
 two revisions and restore either one as a draft.
 
+## Contributing blocks from another module
+
+A module ships Puck blocks by calling `registerPuckBlocks` from its
+`puck-blocks.ts`; the host imports every module's registration eagerly at app
+start, so the registry is populated before the first render.
+
+Because registration is eager, a block that statically imports a heavy render
+component puts that component's whole dependency graph in the entry chunk —
+on every page of the site, for every visitor. Measured on a consuming site, a
+map block's static import put maplibre-gl (1 MB minified, 62% of the bundle)
+in front of visitors who never opened the map. Register heavy blocks with
+`lazyBlock` instead, which keeps fields and defaults eager but loads the
+component the first time a page actually renders the block:
+
+```tsx
+import { lazyBlock } from '@simple-module-py/pagebuilder/pagebuilder/components/lazyBlock';
+import { registerPuckBlocks } from '@simple-module-py/pagebuilder/pagebuilder/components/blockRegistry';
+
+registerPuckBlocks({
+  blocks: {
+    AtlasMap: lazyBlock(
+      () => import('./components/AtlasMap').then((m) => m.AtlasMapEmbed),
+      { label: 'Atlas map', fields: { /* … */ }, defaultProps: { /* … */ } },
+      (props) => <div className={heightClass[props.height]} aria-busy="true" />,
+    ),
+  },
+});
+```
+
+Light blocks (text, cards, lists) can keep their static imports — the split
+only pays for itself when the component drags in something big.
+
 ## Migrations
 
 This module ships **no** migrations — that is the framework convention. Its

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/README.md

@@ -59,6 +59,38 @@ Once installed and migrated, sign in and open `/pagebuilder`:
 Every transition writes a revision, so `/pagebuilder/{id}/edit` can compare any
 two revisions and restore either one as a draft.
 
+## Contributing blocks from another module
+
+A module ships Puck blocks by calling `registerPuckBlocks` from its
+`puck-blocks.ts`; the host imports every module's registration eagerly at app
+start, so the registry is populated before the first render.
+
+Because registration is eager, a block that statically imports a heavy render
+component puts that component's whole dependency graph in the entry chunk —
+on every page of the site, for every visitor. Measured on a consuming site, a
+map block's static import put maplibre-gl (1 MB minified, 62% of the bundle)
+in front of visitors who never opened the map. Register heavy blocks with
+`lazyBlock` instead, which keeps fields and defaults eager but loads the
+component the first time a page actually renders the block:
+
+```tsx
+import { lazyBlock } from '@simple-module-py/pagebuilder/pagebuilder/components/lazyBlock';
+import { registerPuckBlocks } from '@simple-module-py/pagebuilder/pagebuilder/components/blockRegistry';
+
+registerPuckBlocks({
+  blocks: {
+    AtlasMap: lazyBlock(
+      () => import('./components/AtlasMap').then((m) => m.AtlasMapEmbed),
+      { label: 'Atlas map', fields: { /* … */ }, defaultProps: { /* … */ } },
+      (props) => <div className={heightClass[props.height]} aria-busy="true" />,
+    ),
+  },
+});
+```
+
+Light blocks (text, cards, lists) can keep their static imports — the split
+only pays for itself when the component drags in something big.
+
 ## Migrations
 
 This module ships **no** migrations — that is the framework convention. Its

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@simple-module-py/pagebuilder",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "private": true,
   "description": "Frontend assets for the PageBuilder module",
   "peerDependencies": {

simple_module_pagebuilder-0.0.4/pagebuilder/components/blocks/Image.test.tsx

@@ -0,0 +1,94 @@
+import type { ReactElement } from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+
+import { ImageBlock } from './Image';
+
+// Puck passes its own `id`/`puck` props alongside the authored ones; the block
+// reads none of them, so these tests supply the authored props alone.
+const Image = ImageBlock.render as unknown as (props: Record<string, unknown>) => ReactElement;
+
+const BASE = {
+  ...ImageBlock.defaultProps,
+  src: '/media/pagebuilder/atlas-map.jpg',
+  alt: 'The Global Canopy Atlas interactive map',
+};
+
+function html(props: Record<string, unknown> = {}): string {
+  return renderToStaticMarkup(<Image {...BASE} {...props} />);
+}
+
+describe('ImageBlock caption', () => {
+  it('offers a Caption field in the inspector', () => {
+    expect(ImageBlock.fields?.caption).toEqual({ type: 'text', label: 'Caption' });
+  });
+
+  it('defaults to no caption', () => {
+    expect(ImageBlock.defaultProps?.caption).toBe('');
+  });
+
+  it('renders the caption in a figcaption inside a figure', () => {
+    const markup = html({ caption: 'Image caption goes here, if CMS field is populated' });
+    expect(markup).toContain('<figure');
+    expect(markup).toContain('<figcaption');
+    expect(markup).toContain('Image caption goes here, if CMS field is populated');
+  });
+
+  it('takes the caption’s colour and metrics from the design pack', () => {
+    // A tenant restyles captions by overriding tokens, not by patching this
+    // block — same contract the widget set gives the rest of the page.
+    const markup = html({ caption: 'A caption' });
+    expect(markup).toContain('--pb-caption-color');
+    expect(markup).toContain('--pb-body-color');
+    expect(markup).toContain('--pb-caption-size');
+  });
+
+  it('keeps alt and caption separate', () => {
+    // alt is the accessible description, caption is visible prose; the two are
+    // rarely the same sentence, so neither may stand in for the other.
+    const markup = html({ alt: 'A map of the world', caption: 'Figure 1' });
+    expect(markup).toContain('alt="A map of the world"');
+    expect(markup).toContain('>Figure 1</figcaption>');
+  });
+
+  it('renders the caption as light markdown, like every other copy field', () => {
+    // Table, Carousel and CallToAction captions all go through renderRichText,
+    // so `**bold**` cannot mean one thing in one caption and another here.
+    expect(html({ caption: '**Figure 1** — the map' })).toContain('<strong');
+  });
+
+  it('escapes caption text rather than emitting it as markup', () => {
+    expect(html({ caption: '<b>bold</b>' })).not.toContain('<b>bold</b>');
+  });
+
+  it('emits a bare <img> when no caption is set', () => {
+    // Existing pages carry no caption prop at all — `undefined`, not `''`, is
+    // what Puck hands the block for them — and must render exactly as they did
+    // before the field existed.
+    const markup = html({ caption: undefined });
+    expect(markup).not.toContain('figure');
+    expect(markup.startsWith('<img')).toBe(true);
+    expect(markup).toContain('class="my-3"');
+  });
+
+  it('treats an empty or blank caption as no caption', () => {
+    // Whitespace-only would otherwise be truthy and render an empty caption
+    // box under the image.
+    const bare = html({ caption: undefined });
+    expect(html({ caption: '' })).toBe(bare);
+    expect(html({ caption: '   ' })).toBe(bare);
+  });
+
+  it('leaves the empty-src placeholder alone', () => {
+    const markup = html({ src: '', caption: 'A caption' });
+    expect(markup).toContain('No image selected');
+    expect(markup).not.toContain('figcaption');
+  });
+
+  it('still hides a decorative image from screen readers', () => {
+    const markup = html({ altKind: 'decorative', caption: 'A caption' });
+    expect(markup).toContain('alt=""');
+    expect(markup).toContain('aria-hidden="true"');
+    expect(markup).toContain('<figcaption');
+  });
+});

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/blocks/Image.tsx

@@ -6,6 +6,7 @@ import {
   lookupAsset,
   type MediaAssetRead,
 } from '../../utils/api';
+import { renderRichText } from '../widgets/_internal/rich-text';
 import { MediaPicker } from './MediaPicker';
 
 type AltKind = 'meaningful' | 'decorative';
@@ -14,6 +15,10 @@ interface ImageProps {
   src: string;
   alt: string;
   altKind: AltKind;
+  /** Visible prose under the image, as light markdown. Distinct from `alt`,
+   *  which describes the image to a screen reader — the two are rarely the
+   *  same sentence. */
+  caption?: string;
   width: number | null;
   height: number | null;
   objectFit: 'cover' | 'contain' | 'fill';
@@ -21,6 +26,14 @@ interface ImageProps {
   sizes: string;
 }
 
+// Captions read their look from the design pack the way the widget set does,
+// so a tenant restyles them by overriding tokens instead of patching this
+// block. `--pb-caption-color` falls through to the pack's body colour, which
+// is what an unstyled pack (and widgets-base) already defines.
+const CAPTION_CLASS =
+  'mt-2 text-[length:var(--pb-caption-size,0.875rem)] leading-[var(--pb-body-leading,1.625)]';
+const CAPTION_STYLE = { color: 'var(--pb-caption-color, var(--pb-body-color))' };
+
 function resolveSizes(srcset: string, sizes: string): string | undefined {
   if (sizes) return sizes;
   // Browsers assume 100vw when sizes is omitted but srcset is present;
@@ -50,6 +63,7 @@ export const ImageBlock: ComponentConfig<ImageProps> = {
       ],
     },
     alt: { type: 'text' },
+    caption: { type: 'text', label: 'Caption' },
     width: { type: 'number' },
     height: { type: 'number' },
     objectFit: {
@@ -67,6 +81,7 @@ export const ImageBlock: ComponentConfig<ImageProps> = {
     src: '',
     alt: '',
     altKind: 'meaningful',
+    caption: '',
     width: null,
     height: null,
     objectFit: 'cover',
@@ -96,7 +111,7 @@ export const ImageBlock: ComponentConfig<ImageProps> = {
       },
     };
   },
-  render: ({ src, alt, altKind, width, height, objectFit, srcset, sizes }) => {
+  render: ({ src, alt, altKind, caption, width, height, objectFit, srcset, sizes }) => {
     if (!src) {
       return (
         <div className="my-3 p-6 border-2 border-dashed border-gray-300 rounded text-center text-gray-500 text-sm">
@@ -105,7 +120,11 @@ export const ImageBlock: ComponentConfig<ImageProps> = {
       );
     }
     const decorative = altKind === 'decorative';
-    return (
+    // Trimmed, so a caption of nothing but spaces is no caption: it would
+    // otherwise render an empty <figcaption> box under the image. Same rule
+    // the translation extractor applies to every other copy field.
+    const hasCaption = Boolean(caption?.trim());
+    const image = (
       <img
         src={src}
         srcSet={srcset || undefined}
@@ -118,8 +137,23 @@ export const ImageBlock: ComponentConfig<ImageProps> = {
         loading="lazy"
         decoding="async"
         style={{ objectFit, maxWidth: '100%' }}
-        className="my-3"
+        // Inside a <figure> the margin belongs to the figure, and `block`
+        // drops the inline descender gap above the caption. Uncaptioned
+        // images keep the exact markup they had before the field existed.
+        className={hasCaption ? 'block' : 'my-3'}
       />
     );
+    if (!hasCaption) return image;
+    return (
+      <figure className="my-3">
+        {image}
+        <figcaption className={CAPTION_CLASS} style={CAPTION_STYLE}>
+          {/* Light markdown, like every other copy field in the module — the
+              Table/Carousel/CallToAction captions all render this way, so
+              `**Figure 1**` can't work in one caption and not another. */}
+          {renderRichText(caption)}
+        </figcaption>
+      </figure>
+    );
   },
 };

simple_module_pagebuilder-0.0.4/pagebuilder/components/lazyBlock.tsx

@@ -0,0 +1,58 @@
+/**
+ * Register a Puck block whose render component loads on demand (issue #16).
+ *
+ * Block registration is eager by design — the host imports every module's
+ * `puck-blocks.ts` before first render so the registry is populated when a
+ * page reads the Puck config. But a registration that statically imports its
+ * render component drags the component's whole dependency graph into the
+ * entry chunk, on every page of the site. Measured on a consuming site, a
+ * map block put maplibre-gl — 1 MB minified, 62% of the bundle — in front
+ * of every visitor.
+ *
+ * `lazyBlock` keeps the cheap parts eager (fields, defaults, labels) and
+ * loads the component the first time a page actually renders the block:
+ *
+ * ```tsx
+ * registerPuckBlocks({
+ *   blocks: {
+ *     CanopyAtlasMap: lazyBlock(
+ *       () => import('./components/CanopyAtlasMap').then((m) => m.CanopyAtlasMapEmbed),
+ *       {
+ *         label: 'Canopy Atlas map',
+ *         fields: { height: { type: 'select', options: HEIGHTS } },
+ *         defaultProps: { height: 'screen' },
+ *       },
+ *       (props) => <div className={heightClass[props.height]} aria-busy="true" />,
+ *     ),
+ *   },
+ * });
+ * ```
+ */
+
+import { type ComponentType, lazy, type ReactNode, Suspense } from 'react';
+
+import type { AnyBlock } from './blockRegistry';
+
+// Typed via AnyBlock rather than a precise ComponentConfig<P>: Puck's config
+// generic carries constraints a pass-through helper cannot restate, and the
+// registry these blocks land in erases the props type anyway.
+// biome-ignore lint/suspicious/noExplicitAny: heterogeneous block props, same as AnyBlock
+type AnyProps = Record<string, any>;
+
+export function lazyBlock<P extends AnyProps>(
+  load: () => Promise<ComponentType<P>>,
+  config: Omit<AnyBlock, 'render'>,
+  /** Rendered while the chunk downloads — size it like the block to avoid
+   *  layout shift. Defaults to nothing. */
+  fallback?: (props: P) => ReactNode,
+): AnyBlock {
+  const Lazy = lazy(async () => ({ default: await load() }));
+  return {
+    ...config,
+    render: (props: AnyProps) => (
+      <Suspense fallback={fallback ? fallback(props as P) : null}>
+        <Lazy {...(props as P)} />
+      </Suspense>
+    ),
+  };
+}

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/_shared/background-media.tsx

@@ -1,4 +1,5 @@
 import { cn, decorativeAriaProps } from '../../../utils/widgetUtils';
+import { SIZES_FULL, srcsetAttrs } from './image-srcset';
 
 export type BackgroundMediaOverlay = 'none' | 'subtle' | 'dark';
 export type BackgroundMediaFallback = 'gradient-mesh' | 'solid';
@@ -15,6 +16,8 @@ export type BackgroundMediaProps = {
    * anchors to the top; centered, the sky is cut away). Omitted = centered.
    */
   objectPosition?: string;
+  /** Variant srcset recorded at pick time (see _shared/image-srcset.ts). */
+  imageSrcset?: string;
 };
 
 // The "dark" scrim strength is tenant-tunable: GCA's Figma hero is nearly
@@ -41,6 +44,7 @@ export function BackgroundMedia({
   overlay = 'none',
   fallback = 'gradient-mesh',
   objectPosition,
+  imageSrcset,
 }: BackgroundMediaProps) {
   // data-pb-* attributes are stable selectors for tests and CMS-side analytics.
   return (
@@ -48,6 +52,7 @@ export function BackgroundMedia({
       {imageUrl ? (
         <img
           src={imageUrl}
+          {...srcsetAttrs(imageSrcset, SIZES_FULL)}
           alt={imageAlt ?? ''}
           {...decorativeAriaProps(imageAlt)}
           loading="lazy"

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/_shared/content-media.tsx

@@ -1,4 +1,5 @@
 import { cn, decorativeAriaProps } from '../../../utils/widgetUtils';
+import { srcsetAttrs } from './image-srcset';
 
 export type ContentMediaAspect = 'square' | 'video' | 'portrait';
 
@@ -6,6 +7,10 @@ export type ContentMediaProps = {
   imageUrl: string;
   imageAlt: string;
   aspect?: ContentMediaAspect;
+  /** Variant srcset recorded at pick time (see _shared/image-srcset.ts). */
+  imageSrcset?: string;
+  /** `sizes` for the srcset; callers in split layouts pass SIZES_HALF. */
+  sizes?: string;
 };
 
 const ASPECT_CLASSES: Record<ContentMediaAspect, string> = {
@@ -23,13 +28,20 @@ const DOTTED_STYLE = {
   backgroundSize: '16px 16px, 100% 100%',
 } as const;
 
-export function ContentMedia({ imageUrl, imageAlt, aspect = 'video' }: ContentMediaProps) {
+export function ContentMedia({
+  imageUrl,
+  imageAlt,
+  aspect = 'video',
+  imageSrcset,
+  sizes = '100vw',
+}: ContentMediaProps) {
   const wrapperCls = cn('w-full rounded-xl overflow-hidden', ASPECT_CLASSES[aspect], 'shadow-xl');
   if (imageUrl) {
     return (
       <div className={wrapperCls}>
         <img
           src={imageUrl}
+          {...srcsetAttrs(imageSrcset, sizes)}
           alt={imageAlt ?? ''}
           {...decorativeAriaProps(imageAlt)}
           loading="lazy"

simple_module_pagebuilder-0.0.4/pagebuilder/components/widgets/_shared/image-srcset.ts

@@ -0,0 +1,55 @@
+/** Responsive-image support for picker-backed widgets (issue #15).
+ *
+ * The media library generates WebP variants at upload, but widgets that
+ * store a bare `imageUrl` string shipped the full-size original to every
+ * viewport. These helpers let a widget persist the variant srcset next to
+ * the URL the same way the Image block does: `resolveImageSrcset` runs as
+ * Puck's `resolveData` when the picked URL changes, and the value lands in
+ * block data so the public render needs no lookup at all. Old content
+ * without the prop renders exactly as before.
+ */
+
+import { buildSrcset, lookupAsset } from '../../../utils/mediaApi';
+
+/** Full-bleed imagery (background heroes, banners). */
+export const SIZES_FULL = '100vw';
+
+/** Half-width split layouts (side hero, media object) — full width stacked. */
+export const SIZES_HALF = '(min-width: 1024px) 50vw, 100vw';
+
+/** Field for the persisted srcset — visible so an author can override it. */
+export const imageSrcsetField = {
+  type: 'textarea',
+  label: 'Image srcset (auto-filled from the media library)',
+} as const;
+
+/** Spreadable `<img>` attributes; nothing when no srcset is recorded. */
+export function srcsetAttrs(
+  srcset: string | undefined,
+  sizes: string,
+): { srcSet: string; sizes: string } | Record<string, never> {
+  return srcset ? { srcSet: srcset, sizes } : {};
+}
+
+type SrcsetProps = { imageUrl: string; imageSrcset?: string };
+
+/** `resolveData` for any widget with `imageUrl` + `imageSrcset` props.
+ *  `changed` is typed to just the key read here — Puck's own param type
+ *  (which also carries `id: string`) stays assignable. */
+export async function resolveImageSrcset<P extends SrcsetProps>(
+  { props }: { props: P },
+  { changed }: { changed: { imageUrl?: unknown } },
+): Promise<{ props: P }> {
+  if (!changed.imageUrl) return { props };
+  if (!props.imageUrl) return { props: { ...props, imageSrcset: '' } };
+  let asset: Awaited<ReturnType<typeof lookupAsset>>;
+  try {
+    asset = await lookupAsset(props.imageUrl);
+  } catch {
+    // Network failure mid-edit shouldn't break the editor — keep the picked
+    // URL and let the image serve without variants.
+    return { props };
+  }
+  if (!asset) return { props };
+  return { props: { ...props, imageSrcset: buildSrcset(asset) } };
+}

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/_shared/index.ts

@@ -26,6 +26,13 @@ export type {
   HeadingTone,
 } from './heading';
 export { Heading } from './heading';
+export {
+  imageSrcsetField,
+  resolveImageSrcset,
+  SIZES_FULL,
+  SIZES_HALF,
+  srcsetAttrs,
+} from './image-srcset';
 export {
   EYEBROW_CASE_STYLE,
   eyebrowTextStyle,

simple_module_pagebuilder-0.0.4/pagebuilder/components/widgets/hero-widget-props.ts

@@ -0,0 +1,33 @@
+/** Prop shape for HeroWidget — extracted so hero-widget.tsx stays under the
+ *  repo's 300-line cap. Re-exported from there, so importers are unaffected. */
+
+export type HeroWidgetProps = {
+  eyebrow: string;
+  title: string;
+  subtitle: string;
+  logoUrl: string;
+  logoAlt: string;
+  imageUrl: string;
+  imageAlt: string;
+  /** Variant srcset recorded at pick time (see _shared/image-srcset.ts). */
+  imageSrcset?: string;
+  /**
+   * Organic mask (SVG url, from the tenant's content) applied to the side
+   * image in the right/left layouts. Empty = the standard rounded media.
+   */
+  imageMaskUrl?: string;
+  /**
+   * "native" renders supplied transparent artwork exactly as-is — no mask, no
+   * crop — for a photo already cut to its final organic shape. Preferred over
+   * `imageMaskUrl`, which re-derives the silhouette from a hand-kept SVG.
+   */
+  imageShape?: 'rounded' | 'native';
+  imagePosition: 'background' | 'right' | 'left';
+  primaryLabel: string;
+  primaryHref: string;
+  secondaryLabel: string;
+  secondaryHref: string;
+  overlay: boolean;
+  align: 'left' | 'center';
+  surface: 'plain' | 'card';
+};

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/hero-widget.tsx

@@ -8,38 +8,17 @@ import {
   CTAButton,
   EyebrowText,
   Heading,
+  imageSrcsetField,
   maskStyle,
+  resolveImageSrcset,
   Section,
+  SIZES_HALF,
+  srcsetAttrs,
 } from './_shared';
 
-export type HeroWidgetProps = {
-  eyebrow: string;
-  title: string;
-  subtitle: string;
-  logoUrl: string;
-  logoAlt: string;
-  imageUrl: string;
-  imageAlt: string;
-  /**
-   * Organic mask (SVG url, from the tenant's content) applied to the side
-   * image in the right/left layouts. Empty = the standard rounded media.
-   */
-  imageMaskUrl?: string;
-  /**
-   * "native" renders supplied transparent artwork exactly as-is — no mask, no
-   * crop — for a photo already cut to its final organic shape. Preferred over
-   * `imageMaskUrl`, which re-derives the silhouette from a hand-kept SVG.
-   */
-  imageShape?: 'rounded' | 'native';
-  imagePosition: 'background' | 'right' | 'left';
-  primaryLabel: string;
-  primaryHref: string;
-  secondaryLabel: string;
-  secondaryHref: string;
-  overlay: boolean;
-  align: 'left' | 'center';
-  surface: 'plain' | 'card';
-};
+import type { HeroWidgetProps } from './hero-widget-props';
+
+export type { HeroWidgetProps } from './hero-widget-props';
 
 // Exported so CenteredHeroWidget can render through it without smuggling
 // Puck's ComponentConfig.render signature past the type system.
@@ -51,6 +30,7 @@ export function renderHero({
   logoAlt,
   imageUrl,
   imageAlt,
+  imageSrcset = '',
   imageMaskUrl = '',
   imageShape = 'rounded',
   imagePosition,
@@ -120,6 +100,7 @@ export function renderHero({
         <BackgroundMedia
           imageUrl={imageUrl}
           imageAlt={imageAlt}
+          imageSrcset={imageSrcset}
           overlay={overlay ? 'dark' : 'none'}
           fallback="gradient-mesh"
           objectPosition="var(--pb-hero-image-position, 50% 50%)"
@@ -189,6 +170,7 @@ export function renderHero({
             // Figma's box width. No mask, no crop — the file IS the shape.
             <img
               src={imageUrl}
+              {...srcsetAttrs(imageSrcset, SIZES_HALF)}
               alt={imageAlt || title}
               loading="lazy"
               className="h-auto w-full max-w-[var(--pb-hero-media-max-w,none)]"
@@ -199,6 +181,7 @@ export function renderHero({
             // unset, the image keeps its previous free-flowing size.
             <img
               src={imageUrl}
+              {...srcsetAttrs(imageSrcset, SIZES_HALF)}
               alt={imageAlt || title}
               loading="lazy"
               className="h-auto w-full max-w-[var(--pb-hero-media-max-w,none)] object-cover"
@@ -208,7 +191,13 @@ export function renderHero({
               }}
             />
           ) : (
-            <ContentMedia imageUrl={imageUrl} imageAlt={imageAlt} aspect="square" />
+            <ContentMedia
+              imageUrl={imageUrl}
+              imageAlt={imageAlt}
+              imageSrcset={imageSrcset}
+              sizes={SIZES_HALF}
+              aspect="square"
+            />
           )}
         </div>
       </div>
@@ -226,6 +215,7 @@ export const HeroWidget: ComponentConfig<HeroWidgetProps> = {
     logoAlt: { type: 'text', label: 'Logo alt text' },
     imageUrl: createImageField(mediaLibraryAdapter, 'Image'),
     imageAlt: { type: 'text', label: 'Image alt text' },
+    imageSrcset: imageSrcsetField,
     imageMaskUrl: {
       type: 'text',
       label: 'Image mask URL (organic shape, side layouts — optional)',
@@ -277,6 +267,7 @@ export const HeroWidget: ComponentConfig<HeroWidgetProps> = {
     logoAlt: '',
     imageUrl: '',
     imageAlt: '',
+    imageSrcset: '',
     imageMaskUrl: '',
     imageShape: 'rounded',
     imagePosition: 'background',
@@ -288,5 +279,6 @@ export const HeroWidget: ComponentConfig<HeroWidgetProps> = {
     align: 'center',
     surface: 'plain',
   },
+  resolveData: resolveImageSrcset,
   render: renderHero,
 };

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/media-object-layout.ts

@@ -5,6 +5,8 @@ import type { CSSProperties } from 'react';
 export type MediaObjectWidgetProps = {
   imageUrl: string;
   imageAlt: string;
+  /** Variant srcset recorded at pick time (see _shared/image-srcset.ts). */
+  imageSrcset?: string;
   imagePosition: 'left' | 'right';
   heading: string;
   body: string;

{simple_module_pagebuilder-0.0.2 → simple_module_pagebuilder-0.0.4}/pagebuilder/components/widgets/media-object-render.tsx

@@ -9,7 +9,7 @@ import { cn } from '../../utils/widgetUtils';
 import { AccentText } from './_internal/accent-text';
 import { LinkArrow } from './_internal/link-arrow';
 import { RichTextBlock, renderRichText } from './_internal/rich-text';
-import { CTAButton, eyebrowTextStyle, maskStyle } from './_shared';
+import { CTAButton, eyebrowTextStyle, maskStyle, SIZES_HALF, srcsetAttrs } from './_shared';
 
 import { GRID_IMAGE, GRID_TEXT, type MediaObjectWidgetProps } from './media-object-layout';
 import { MediaObjectText } from './media-object-text';
@@ -19,6 +19,7 @@ export type { MediaObjectWidgetProps } from './media-object-layout';
 export const MediaObjectWidgetRender = ({
   imageUrl,
   imageAlt,
+  imageSrcset = '',
   imageMaskUrl = '',
   imageShape = 'rounded',
   imageTag = '',
@@ -86,6 +87,7 @@ export const MediaObjectWidgetRender = ({
   const imageEl = imageUrl ? (
     <img
       src={imageUrl}
+      {...srcsetAttrs(imageSrcset, SIZES_HALF)}
       alt={imageAlt || heading}
       loading="lazy"
       className={cn('w-full h-auto', !masked && !native && 'rounded-lg')}
@@ -196,6 +198,8 @@ export const MediaObjectWidgetRender = ({
             {imageUrl && (
               <img
                 src={imageUrl}
+                // Rendered 68px tall — the smallest variant is plenty.
+                {...srcsetAttrs(imageSrcset, '320px')}
                 alt={imageAlt || heading}
                 loading="lazy"
                 className="mt-8 h-[68px] w-auto max-w-full object-contain object-left"