@akinon/pz-theme 2.0.82-beta.0 → 2.0.82

package/CHANGELOG.md

@@ -1,12 +1,16 @@
 # @akinon/pz-theme
 
-## 2.0.82-beta.0
+## 2.0.82
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.82-beta.0
-  - @akinon/theme-contract@2.0.82-beta.0
+- d4a89926: ZERO-4816: enhance PostsSliderSection to utilize custom arrow blocks
+- e6ba4d0a: ZERO-4816: add an optional quick view panel to the product slider sections
+- f358b65b: Line breaks that apply only at chosen widths: a `<br data-pz-break="mobile tablet">` in a text block breaks the line at 1023px and under and disappears on the desktop, so one authored sentence can be two lines narrow and one line wide.
+- b0722874: ZERO-4816: run a slider flush to its edges and offset the track only at the start position
+- c41ea578: ZERO-4816: play YouTube Shorts and direct video files whose address carries a query
+  - @akinon/next@2.0.82
+  - @akinon/theme-contract@2.0.82
 
 ## 2.0.81
 

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.82-beta.0",
+  "version": "2.0.82",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.82-beta.0",
+    "@akinon/next": "2.0.82",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.82-beta.0",
+    "@akinon/theme-contract": "2.0.82",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "tailwind-merge": "^2.5.4",
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.82-beta.0",
+    "@akinon/next": "2.0.82",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

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

@@ -182,3 +182,90 @@ describe('LinkBlock', () => {
     expect(anchor(container)).toHaveAttribute('href', '#');
   });
 });
+
+/**
+ * The double-drawn card box.
+ *
+ * `data-block-id` rides the designer wrapper this anchor renders inside, and the
+ * generated stylesheet paints the block's box on that wrapper. The wrapper is
+ * the grid item, so it stretches to its row; the anchor only hugs its content.
+ * A card with one border in the inspector therefore showed two on the page —
+ * one closing under the label, one at the bottom of the row.
+ */
+describe('LinkBlock leaves the block box to the wrapper', () => {
+  const boxStyles = {
+    border: { desktop: '1px solid #d4d4d4' },
+    'border-radius': { desktop: '12px' },
+    padding: { desktop: '16px' },
+    'margin-bottom': { desktop: '8px' },
+    'box-shadow': { desktop: '0 1px 2px #0001' },
+    outline: { desktop: '1px solid red' }
+  };
+
+  it('writes none of the box keys inline', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          block: {
+            id: 'l',
+            properties: { href: '/foo' },
+            styles: boxStyles,
+            blocks: [child({ id: 'a', order: 0 })]
+          }
+        })}
+      />
+    );
+    const style = anchor(container).getAttribute('style') || '';
+    ['border', 'padding', 'margin', 'box-shadow', 'outline'].forEach(
+      (fragment) => expect(style).not.toContain(fragment)
+    );
+  });
+
+  it('still writes the layout keys inline, since the wrapper has one child', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          block: {
+            id: 'l',
+            properties: { href: '/foo' },
+            styles: {
+              ...boxStyles,
+              display: { desktop: 'flex' },
+              'flex-direction': { desktop: 'column' },
+              gap: { desktop: '8px' }
+            },
+            blocks: [child({ id: 'a', order: 0 })]
+          }
+        })}
+      />
+    );
+    const el = anchor(container);
+    expect(el.style.display).toBe('flex');
+    expect(el.style.flexDirection).toBe('column');
+    expect(el.style.gap).toBe('8px');
+  });
+
+  /**
+   * Painting the same colour on the wrapper and on the anchor leaves no
+   * artifact, and an iterator resolves a bound colour per row into this inline
+   * copy — the one shared stylesheet rule cannot hold a value per row.
+   */
+  it('still writes background inline, which duplication cannot spoil', () => {
+    const { container } = render(
+      <LinkBlock
+        {...props({
+          block: {
+            id: 'l',
+            properties: { href: '/foo' },
+            styles: {
+              ...boxStyles,
+              'background-color': { desktop: 'rgb(255, 0, 0)' }
+            },
+            blocks: [child({ id: 'a', order: 0 })]
+          }
+        })}
+      />
+    );
+    expect(anchor(container).style.backgroundColor).toBe('rgb(255, 0, 0)');
+  });
+});

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

@@ -92,3 +92,91 @@ describe('TextBlock rendering', () => {
     expect(div.getAttribute('style')).toBeNull();
   });
 });
+
+/**
+ * Which half of a text block's style map this div wears.
+ *
+ * Not none of it. A bound value (`{{item.badgeColor}}`) is deliberately stripped
+ * from the shared `[data-block-id]` rule — every row of an iterator shares that
+ * id, and one rule cannot hold a different colour per row — so inline is the
+ * only place a per-row value can land. `iterator-bindings.test.tsx` is where
+ * that contract is asserted.
+ *
+ * Margin and padding are the exception, and they were the bug. They describe the
+ * block's box, the stylesheet already puts them on the wrapper this div renders
+ * inside, and a box inside a box compounds: measured on a live page, nine blocks
+ * carried the same margin at both levels, so 29px under a heading was applied
+ * twice with nothing in the inspector to explain the second copy.
+ */
+describe('TextBlock leaves the block box geometry to the wrapper', () => {
+  it('writes no margin inline, at any side', () => {
+    const { container } = renderBlock('hello', {
+      'margin-bottom': { desktop: '29px' },
+      'margin-top': { desktop: '12px' },
+      'margin-left': { desktop: '4px' },
+      'margin-right': { desktop: '4px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.getAttribute('style')).toBeNull();
+  });
+
+  it('writes no padding inline, shorthand or longhand', () => {
+    const { container } = renderBlock('hello', {
+      padding: { desktop: '20px' },
+      'padding-left': { desktop: '8px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.getAttribute('style')).toBeNull();
+  });
+
+  it('recognises the camelCase spelling published JSON may carry', () => {
+    const { container } = renderBlock('hello', {
+      marginBottom: { desktop: '29px' },
+      paddingTop: { desktop: '10px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.getAttribute('style')).toBeNull();
+  });
+
+  it('still wears everything else, which per-row bindings depend on', () => {
+    const { container } = renderBlock('hello', {
+      'background-color': { desktop: '#00a86b' },
+      color: { desktop: '#610529' },
+      'border-radius': { desktop: '4px' },
+      'margin-bottom': { desktop: '29px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.style.backgroundColor).toBe('rgb(0, 168, 107)');
+    expect(div.style.color).toBe('rgb(97, 5, 41)');
+    expect(div.style.borderRadius).toBe('4px');
+    expect(div.style.marginBottom).toBe('');
+  });
+
+  it('does not leave an empty style attribute when only geometry was set', () => {
+    const { container } = renderBlock('hello', {
+      'margin-bottom': { desktop: '29px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.getAttribute('style')).toBeNull();
+  });
+
+  it('still hosts the content, which is the only job this div has', () => {
+    const { container } = renderBlock('<p>hello</p>', {
+      padding: { desktop: '20px' }
+    });
+
+    const div = container.querySelector('div') as HTMLDivElement;
+
+    expect(div.querySelector('p')?.textContent).toBe('hello');
+  });
+});

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import VideoBlock from '../video-block';
 
-const renderBlock = (value: any, properties?: any) =>
+const renderBlock = (value: any, properties?: any, styles?: any) =>
   render(
     <VideoBlock
-      block={{ value, properties } as any}
+      block={{ value, properties, styles } as any}
       placeholderId="p1"
       sectionId="s1"
       isDesigner={false}
@@ -194,6 +194,211 @@ describe('VideoBlock', () => {
     });
   });
 
+  /**
+   * A Shorts link used to render the grey "Invalid video URL" box: it contains
+   * `youtube.com`, so it entered the YouTube branch, matched none of the three
+   * shapes the parser knew, and fell out with an empty id.
+   */
+  describe('YouTube Shorts', () => {
+    it('embeds a Shorts link', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/shorts/AbC123xyz'
+      );
+      expect(container.querySelector('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/AbC123xyz'
+      );
+    });
+
+    it('carries the playback properties a watch URL carries', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/shorts/AbC123xyz',
+        { autoplay: true, loop: true }
+      );
+      expect(container.querySelector('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/AbC123xyz?autoplay=1&loop=1&playlist=AbC123xyz'
+      );
+    });
+
+    it('drops a share query rather than baking it into the id', () => {
+      const { container } = renderBlock(
+        'https://youtube.com/shorts/AbC123xyz?feature=share'
+      );
+      expect(container.querySelector('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/AbC123xyz'
+      );
+    });
+
+    it('stands itself up vertical without the author saying so', () => {
+      // A Short is filmed 9:16; the historic 400px box letterboxes it.
+      const { container } = renderBlock(
+        'https://www.youtube.com/shorts/AbC123xyz'
+      );
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      expect(iframe.style.aspectRatio).toBe('9/16');
+      expect(iframe.style.height).not.toBe('400px');
+    });
+  });
+
+  /**
+   * The direct-file test was anchored at the end of the whole URL, so every
+   * address carrying a query — the ordinary shape of an uploaded asset — was
+   * rejected.
+   */
+  describe('direct video files', () => {
+    it('plays a file whose URL carries a signature query', () => {
+      const url = 'https://cdn.example.com/clip.mp4?sig=abc&exp=123';
+      const { container } = renderBlock(url);
+      expect(container.querySelector('video')).toHaveAttribute('src', url);
+    });
+
+    it('reads the extension case-insensitively, on a dotted path', () => {
+      const url = 'https://cdn.example.com/a.b.c/clip.WEBM?x=1';
+      expect(renderBlock(url).container.querySelector('video')).toHaveAttribute(
+        'src',
+        url
+      );
+    });
+
+    it('refuses a page that merely mentions a file in its query', () => {
+      // The trap an unanchored regex would fall into.
+      renderBlock('https://example.com/watch?ref=clip.mp4');
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+
+    it('plays an extensionless URL when the author says it is a file', () => {
+      const url = 'https://cdn.example.com/asset/9f2a';
+      const { container } = renderBlock(url, { sourceType: 'file' });
+      expect(container.querySelector('video')).toHaveAttribute('src', url);
+    });
+
+    it('refuses the same URL when they have not', () => {
+      renderBlock('https://cdn.example.com/asset/9f2a');
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+
+    it('plays a clip served from the storefront itself', () => {
+      const { container } = renderBlock('/media/clip.mp4');
+      expect(container.querySelector('video')).toHaveAttribute(
+        'src',
+        '/media/clip.mp4'
+      );
+    });
+  });
+
+  describe('other YouTube shapes', () => {
+    it('embeds a /live/ link', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/live/LiveIdAbc'
+      );
+      expect(container.querySelector('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/LiveIdAbc'
+      );
+    });
+
+    it('accepts a nocookie link as input', () => {
+      const { container } = renderBlock(
+        'https://www.youtube-nocookie.com/embed/AbC123xyz'
+      );
+      expect(container.querySelector('iframe')).toHaveAttribute(
+        'src',
+        'https://www.youtube.com/embed/AbC123xyz'
+      );
+    });
+
+    it('is not fooled by a host that merely mentions youtube', () => {
+      renderBlock('https://evil.example.com/?u=youtube.com/watch?v=abc123');
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+  });
+
+  /**
+   * Both of these satisfied the old extension test and were handed straight to
+   * `<video src>`.
+   */
+  describe('schemes it refuses', () => {
+    it.each([
+      'javascript:alert(1)//x.mp4',
+      'data:text/html,<script>a</script>//x.mp4'
+    ])('refuses %s', (url) => {
+      renderBlock(url);
+      expect(screen.getByText('Invalid video URL')).toBeInTheDocument();
+    });
+  });
+
+  describe('aspect ratio', () => {
+    it('takes the authored ratio', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        undefined,
+        { 'aspect-ratio': { desktop: '16/9' } }
+      );
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      expect(iframe.style.aspectRatio).toBe('16/9');
+      // Not `100%`: inside an auto-height box that resolves to zero, which is
+      // exactly the box a ratio-styled block has.
+      expect(iframe.style.height).toBe('auto');
+    });
+
+    it('keeps the historic box when nothing is authored', () => {
+      // The backwards-compatibility lock: every published video keeps its size.
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123'
+      );
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      expect(iframe.style.height).toBe('400px');
+      expect(iframe.style.aspectRatio).toBeFalsy();
+    });
+
+    it('lets the author override a Short’s vertical default', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/shorts/AbC123xyz',
+        undefined,
+        { 'aspect-ratio': { desktop: '1/1' } }
+      );
+      expect(
+        (container.querySelector('iframe') as HTMLIFrameElement).style
+          .aspectRatio
+      ).toBe('1/1');
+    });
+
+    it('treats `auto` as nothing authored', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123',
+        undefined,
+        { 'aspect-ratio': { desktop: 'auto' } }
+      );
+      expect(
+        (container.querySelector('iframe') as HTMLIFrameElement).style.height
+      ).toBe('400px');
+    });
+
+    it('never collapses to nothing inside an auto-height box', () => {
+      // `height: 100%` of an auto-height parent is zero. A ratio-styled block
+      // is exactly that box, so the player rendered but was invisible.
+      const { container } = renderBlock(
+        'https://www.youtube.com/shorts/AbC123xyz'
+      );
+      const iframe = container.querySelector('iframe') as HTMLIFrameElement;
+      expect(iframe.style.height).not.toBe('100%');
+      expect(iframe.style.height).toBe('auto');
+    });
+
+    it('shapes a direct file too', () => {
+      const { container } = renderBlock(
+        'https://cdn.example.com/clip.mp4',
+        undefined,
+        { 'aspect-ratio': { desktop: '9/16' } }
+      );
+      const video = container.querySelector('video') as HTMLVideoElement;
+      expect(video.style.aspectRatio).toBe('9/16');
+      expect(video.style.objectFit).toBe('cover');
+    });
+  });
+
   describe('non-string value (BUG-4 fix)', () => {
     it('renders the invalid placeholder instead of crashing on a non-string value', () => {
       renderBlock(123 as any);

package/src/blocks/item-template-utils.ts

@@ -20,7 +20,7 @@ export const findItemTemplate = (
   currentBreakpoint = 'desktop'
 ): Block | null =>
   (block.blocks || []).find(
-    child => readRole(child, currentBreakpoint) === ITEM_TEMPLATE_ROLE
+    (child) => readRole(child, currentBreakpoint) === ITEM_TEMPLATE_ROLE
   ) ?? null;
 
 export const hasItemTemplate = (
@@ -54,9 +54,7 @@ export const publishesProductItems = (blockType?: string): boolean =>
  */
 const PRODUCT_PK_FIELDS = ['productPk', 'pk'];
 
-const readProductPk = (
-  item: Record<string, unknown>
-): number | undefined => {
+const readProductPk = (item: Record<string, unknown>): number | undefined => {
   for (const field of PRODUCT_PK_FIELDS) {
     const value = item[field];
     if (value === undefined || value === null || value === '') continue;
@@ -94,6 +92,48 @@ export const resolveItemProduct = (
   return { ...item, pk } as ThemeProduct;
 };
 
+/**
+ * The section types whose SLIDES are products.
+ *
+ * The same declared-not-sniffed rule as `PRODUCT_ITEM_LIST_TYPES`, one level
+ * up: a slider repeats its rows from the section's own data source rather
+ * than through `ItemTemplateList`, so no item scope is opened for it and the
+ * list-type allow-list above never sees it. `flash-deals-slider` is the type
+ * both the Flash Deals and the Product Slider templates publish;
+ * `posts-slider` shares the same renderer but its rows are blog posts, and a
+ * favourite heart pointed at a post id is precisely the bug the declaration
+ * exists to prevent.
+ */
+const PRODUCT_SLIDER_SECTION_TYPES = new Set(['flash-deals-slider']);
+
+export const publishesProductSlides = (sectionType?: string): boolean =>
+  typeof sectionType === 'string' &&
+  PRODUCT_SLIDER_SECTION_TYPES.has(sectionType);
+
+/**
+ * A slider row seen as the ambient product, or null when this section
+ * publishes no products or the row is one of the empty placeholders the
+ * designer draws against.
+ *
+ * "Is there a product here" cannot be a truthiness test: the slider's own
+ * expansion writes `products[index] || {}`, so every clone carries an object
+ * whether or not the data source returned a row for it. Falling back to the
+ * pk rule is what keeps an unmatched slide behaving as the plain link it is
+ * today instead of opening a panel with nothing in it.
+ */
+export const resolveSliderRowProduct = (
+  sectionType: string | undefined,
+  item: Record<string, unknown> | null | undefined
+): ThemeProduct | null => {
+  if (!publishesProductSlides(sectionType)) return null;
+  if (!item || Object.keys(item).length === 0) return null;
+
+  const pk = readProductPk(item);
+  if (pk === undefined) return null;
+
+  return { ...item, pk } as ThemeProduct;
+};
+
 /**
  * What a product row shows in the editor when the page has no live data.
  *
@@ -123,7 +163,13 @@ export const DESIGNER_SAMPLE_PRODUCT: ThemeProduct = {
       attribute_name: 'Size',
       options: [
         { label: 'S', value: 's', in_stock: true, is_selectable: true },
-        { label: 'M', value: 'm', in_stock: true, is_selectable: true, is_selected: true },
+        {
+          label: 'M',
+          value: 'm',
+          in_stock: true,
+          is_selectable: true,
+          is_selected: true
+        },
         { label: 'L', value: 'l', in_stock: false, is_selectable: false }
       ]
     }

package/src/blocks/link-block.tsx

@@ -10,6 +10,45 @@ import { useBlockAction } from '../hooks/use-block-action';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
+/**
+ * The lines and gaps of the block's box, which this anchor must not draw a
+ * second time.
+ *
+ * `data-block-id` sits on the designer wrapper this anchor renders inside, and
+ * the generated stylesheet already paints the block's box there. Copying these
+ * keys inline as well draws them twice at two different sizes: the wrapper is
+ * the grid item and stretches to fill its row, while the anchor only hugs its
+ * content. Measured on a live page: one border set on a card rendered as two,
+ * one closing under the label and another at the bottom of the row. Padding
+ * and margin compound the same way — the spacing came out doubled.
+ *
+ * `background` is deliberately NOT here. Painting the same colour on both
+ * boxes is idempotent, so there is no artifact to fix, and an iterator resolves
+ * a bound colour per row into this inline copy — the shared stylesheet rule
+ * cannot hold a different value per row, so stripping it would lose it.
+ *
+ * Layout keys stay inline too. The wrapper's only child is this anchor, so
+ * `display: flex` up there arranges nothing — the anchor is what lays out the
+ * card's image and label.
+ *
+ * A row-bound `border-color` is the one thing this gives up: it would tint a
+ * border the anchor no longer has. Row data carries prices and colours for the
+ * content, not the outline of the box it sits in.
+ */
+const BOX_STYLE_PREFIXES = [
+  'margin',
+  'padding',
+  'border',
+  'outline',
+  'box-shadow'
+];
+
+const isBoxStyleKey = (normalizedKey: string): boolean =>
+  BOX_STYLE_PREFIXES.some(
+    (prefix) =>
+      normalizedKey === prefix || normalizedKey.startsWith(`${prefix}-`)
+  );
+
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 const LinkBlock = ({
@@ -137,6 +176,10 @@ const LinkBlock = ({
       if (styleEntry) {
         const val = getResponsiveValue(styleEntry, currentBreakpoint);
         if (val !== undefined && val !== null) {
+          if (isBoxStyleKey(normalizedKey)) {
+            return;
+          }
+
           const camelKey = normalizedKey.replace(/-([a-z])/g, (_, letter) =>
             letter.toUpperCase()
           );