@akinon/pz-theme 2.0.85-rc.0 → 2.0.85

package/CHANGELOG.md

@@ -1,38 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.85-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.85-rc.0
-  - @akinon/theme-contract@2.0.85-rc.0
+## 2.0.85
+
+### Patch Changes
+
+- a5787dcf: ZERO-4848: Refactor ImageBlock to improve box sizing and CSS generation logic
+  - @akinon/next@2.0.85
+  - @akinon/theme-contract@2.0.85
 
 ## 2.0.84
 

package/package.json

@@ -1,26 +1,26 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.85-rc.0",
+  "version": "2.0.85",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.85-rc.0",
+    "@akinon/next": "2.0.85",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.85-rc.0",
+    "@akinon/theme-contract": "2.0.85",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.85-rc.0",
+    "@akinon/next": "2.0.85",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/image-block.test.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import ImageBlock from '../image-block';
+import { generateThemeCSS } from '../../utils';
 import type { BlockRendererProps } from '../block-renderer-registry';
 
 // ImageBlock renders a native <img> / <div> directly (no child ThemeBlock /
@@ -137,3 +138,122 @@ describe('ImageBlock - loading strategy', () => {
     expect(getImg(container)?.getAttribute('loading')).toBe('eager');
   });
 });
+
+/**
+ * The box is declared once.
+ *
+ * `width`, `height` and `aspect-ratio` are ordinary root style keys, so the
+ * generated stylesheet writes them onto this block's wrapper — the element the
+ * parent lays out. The renderer inlined the same numbers on the picture as
+ * well, which is one authored value applied to two elements that do not have to
+ * agree: a wrapper carrying `flex: 1 1 0` is resized by the flex algorithm, an
+ * inline `height: 160px` on an <img> is not.
+ *
+ * On a collection card that is exactly what happened. The card was a 162px
+ * square whose caption took 33px, leaving the image block a 127px box — and the
+ * picture, carrying the mobile breakpoint's authored `160px`, was 33px taller
+ * than the box it sat in. The card's `overflow: hidden` cut the difference off,
+ * so on a phone every image was cropped.
+ */
+describe('ImageBlock leaves its box to the sheet', () => {
+  const sized = (overrides: Record<string, unknown> = {}) => ({
+    id: 'box',
+    value: 'https://example.com/a.jpg',
+    styles: {
+      width: { desktop: '100%' },
+      height: { desktop: '100%', mobile: '160px' },
+      'object-fit': { desktop: 'contain', mobile: 'cover' },
+      'border-radius': { desktop: '8px' }
+    },
+    ...overrides
+  });
+
+  it('fills the box rather than repeating the authored height', () => {
+    const { container } = renderBlock(sized(), 'mobile');
+    const img = getImg(container) as HTMLImageElement;
+
+    // The authored 160px is the WRAPPER's; repeating it here is what overflowed
+    // a box the layout had already made shorter.
+    expect(img.style.height).toBe('100%');
+    expect(img.style.width).toBe('100%');
+  });
+
+  it('does not drop the authored value — it moves to the wrapper rule', () => {
+    // The other half of "declared once": the number still reaches the page.
+    const css = generateThemeCSS([
+      {
+        id: 'sec-1',
+        styles: {},
+        blocks: [sized()]
+      }
+    ] as unknown as Parameters<typeof generateThemeCSS>[0]);
+
+    expect(css).toContain('[data-block-id="box"]');
+    expect(css).toContain('height: 160px');
+  });
+
+  it('still paints what a rule on the wrapper cannot say', () => {
+    // `object-fit` is meaningless on a <div>, and the radius has to be on the
+    // painted element because the wrapper does not clip.
+    const { container } = renderBlock(sized(), 'mobile');
+    const img = getImg(container) as HTMLImageElement;
+
+    expect(img.style.objectFit).toBe('cover');
+    expect(img.style.borderRadius).toBe('8px');
+  });
+
+  it('leaves an unsized picture on its intrinsic height', () => {
+    // The narrow half of the fix: with nothing authored, the wrapper rule sizes
+    // nothing, so filling it would let a stretched flex row crop the picture
+    // under the default `object-fit: cover`. Unchanged behaviour on purpose.
+    const { container } = renderBlock({
+      id: 'unsized',
+      value: 'https://example.com/a.jpg',
+      styles: { 'object-fit': { desktop: 'cover' } }
+    });
+
+    expect((getImg(container) as HTMLImageElement).style.height).toBe('auto');
+  });
+
+  it('fills a box the sheet sized with an aspect ratio alone', () => {
+    // An aspect ratio sizes the wrapper without naming a height, and it is on
+    // the wrapper too — so the picture has to fill, or it would sit at its
+    // intrinsic height inside a box shaped for it.
+    const { container } = renderBlock({
+      id: 'ratio',
+      value: 'https://example.com/a.jpg',
+      styles: { 'aspect-ratio': { desktop: '1/1' } }
+    });
+    const img = getImg(container) as HTMLImageElement;
+
+    expect(img.style.height).toBe('100%');
+    expect(img.style.aspectRatio).toBe('');
+  });
+
+  it('inlines a size the row resolved for itself', () => {
+    // One rule serves every clone, so a per-row value has nowhere else to live.
+    const { container } = renderBlock(
+      sized({ rowStyleKeys: ['height'] }),
+      'mobile'
+    );
+
+    expect((getImg(container) as HTMLImageElement).style.height).toBe('160px');
+  });
+
+  it('gives an empty block a floor only when nothing sized it', () => {
+    const unsized = renderBlock({ id: 'empty', value: '' });
+    const placeholder = screen.getByText('No image uploaded');
+
+    expect(placeholder.style.minHeight).toBe('150px');
+    unsized.unmount();
+
+    // Sized by the wrapper, so filling it is already the right height; the
+    // repeated minimum is what pushed the placeholder out of a shorter box.
+    renderBlock(
+      { id: 'empty-sized', value: '', styles: { height: { mobile: '160px' } } },
+      'mobile'
+    );
+
+    expect(screen.getByText('No image uploaded').style.minHeight).toBe('');
+  });
+});

package/src/blocks/image-block.tsx

@@ -123,11 +123,50 @@ const ImageBlock = ({
     undefined
   ) as string | undefined;
 
+  /**
+   * THE PICTURE FILLS ITS BOX; IT DOES NOT RE-DECLARE IT.
+   *
+   * `width`, `height` and `aspect-ratio` are ordinary root style keys, so the
+   * generated stylesheet already writes them onto this block's WRAPPER — the
+   * element the parent lays out (`image` is not one of
+   * INNER_ROOT_BLOCK_TYPES, so the rule lands there). Inlining the same
+   * numbers here applied one authored value to two elements, and the two do
+   * not have to agree: a wrapper carrying `flex: 1 1 0` is resized by the flex
+   * algorithm, an inline `height` on this element is not. A card whose caption
+   * left 127px of a 162px square therefore drew a 160px picture inside a 127px
+   * box, and the card's `overflow: hidden` ate the rest.
+   *
+   * The exception is a value the row resolved for itself: one rule serves every
+   * clone, so a per-row size has nowhere to live but here (see
+   * `collectRowBoundStyleKeys`).
+   */
+  const isRowBound = (key: string): boolean =>
+    (block.rowStyleKeys ?? []).includes(key);
+  /**
+   * Whether the wrapper rule gives the box a height at all. Deliberately narrow:
+   * where nothing was authored the picture keeps its intrinsic `auto` height, so
+   * an unsized image in a stretched flex row renders exactly as it does today
+   * rather than filling the stretch and being cropped by the default
+   * `object-fit: cover` — a regression the fix must not trade for the one it
+   * repairs.
+   */
+  const boxIsSized =
+    (typeof height === 'string' && height !== 'auto') || Boolean(aspectRatio);
+  const boxWidth = isRowBound('width') ? width ?? '100%' : '100%';
+  const boxHeight = isRowBound('height')
+    ? height ?? 'auto'
+    : boxIsSized
+      ? '100%'
+      : 'auto';
+  const boxAspectRatio = isRowBound('aspect-ratio')
+    ? aspectRatio || undefined
+    : undefined;
+
   const content = !src ? (
     <div
       style={{
-        width: width ?? '100%',
-        height: height ?? '100%',
+        width: boxWidth,
+        height: boxHeight,
         borderRadius: borderRadius ?? '0px',
         overflow: 'hidden',
         backgroundColor: '#e5e7eb',
@@ -135,9 +174,12 @@ const ImageBlock = ({
         alignItems: 'center',
         justifyContent: 'center',
         textAlign: 'center',
-        minHeight:
-          typeof height === 'string' && height !== 'auto' ? height : '150px',
-        aspectRatio: aspectRatio || undefined,
+        // A floor only when nothing sized the box. An authored height is on the
+        // wrapper, so filling it is already the right size — repeating the
+        // number as a minimum is what pushed the placeholder out of a box the
+        // layout had made shorter.
+        minHeight: boxIsSized ? undefined : '150px',
+        aspectRatio: boxAspectRatio,
         color: '#6b7280'
       }}
     >
@@ -152,11 +194,14 @@ const ImageBlock = ({
       fetchPriority={priority}
       style={{
         display: 'block',
-        width: width ?? '100%',
-        height: height ?? 'auto',
+        width: boxWidth,
+        height: boxHeight,
+        // These two stay: `object-fit` is meaningless on the wrapper <div>, and
+        // the radius has to be on the painted element because the wrapper does
+        // not clip.
         objectFit: objectFit ?? 'cover',
         borderRadius: borderRadius ?? '0px',
-        aspectRatio: aspectRatio || undefined
+        aspectRatio: boxAspectRatio
       }}
     />
   );