@akinon/pz-theme 2.0.119-rc.0 → 2.0.120-beta.0

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.119-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c2]
-- 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 [b1111d7b1]
-- Updated dependencies [1595d45]
-- Updated dependencies [dca1281]
-  - @akinon/next@2.0.119-rc.0
-  - @akinon/theme-contract@2.0.119-rc.0
+## 2.0.120-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.120-beta.0
+  - @akinon/theme-contract@2.0.120-beta.0
+
+## 2.0.119
+
+### Patch Changes
+
+- 322f3bd: Let a slider actually turn at the autoplay speed the merchant set: the value is stored per breakpoint like every other slider option, so reading it without resolving the breakpoint produced no number at all and every slider silently kept the three-second default
+  - @akinon/next@2.0.119
+  - @akinon/theme-contract@2.0.119
 
 ## 2.0.118
 

package/package.json

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

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

@@ -4,11 +4,13 @@ import { fireEvent, render } from '@testing-library/react';
 // react-multi-carousel is an ESM/DOM-heavy dependency. Replace its default
 // export with a passthrough that simply renders its children so we can assert
 // on the slides the SliderBlock produces.
+const mockCarouselProps: Record<string, any>[] = [];
 jest.mock('react-multi-carousel', () => ({
   __esModule: true,
-  default: ({ children }: { children: React.ReactNode }) => (
-    <div data-testid="carousel">{children}</div>
-  )
+  default: (carouselProps: any) => {
+    mockCarouselProps.push(carouselProps);
+    return <div data-testid="carousel">{carouselProps.children}</div>;
+  }
 }));
 
 // Stub the recursive ThemeBlock (default export) with a countable marker so we
@@ -53,6 +55,9 @@ const props = (over: Record<string, unknown> = {}) =>
     ...over
   } as any);
 
+/** The props the carousel was handed by the most recent render. */
+const lastCarouselProps = () => mockCarouselProps[mockCarouselProps.length - 1];
+
 const markers = (container: HTMLElement) =>
   Array.from(container.querySelectorAll('[data-testid="tb"]')).map((el) =>
     el.getAttribute('data-id')
@@ -629,3 +634,56 @@ describe('SliderBlock — arrow rotate and reveal-on-hover', () => {
     expect(buttons(container)[0].style.transition).toBe('');
   });
 });
+
+
+describe('SliderBlock — autoplay speed', () => {
+  beforeEach(() => {
+    mockCarouselProps.length = 0;
+  });
+
+  const renderWithSpeed = (speed: unknown, currentBreakpoint = 'desktop') =>
+    render(
+      <SliderBlock
+        {...props({
+          currentBreakpoint,
+          block: {
+            ...props().block,
+            properties: { autoplay: true, 'autoplay-speed': speed },
+            blocks: [child('a'), child('b')]
+          }
+        })}
+      />
+    );
+
+  it('honours a speed the editor stored per breakpoint', () => {
+    // THE DEFECT. Every sibling entry is read through the breakpoint, this one
+    // was read raw — and the editor writes `{ desktop: '15000' }` for all of
+    // them. `Number({...})` is NaN, so the parse fell through to its own 3000
+    // and a merchant who typed 15000 got a slider that still turned every three
+    // seconds, with the value they typed still sitting in the panel.
+    renderWithSpeed({ desktop: '15000' });
+    expect(lastCarouselProps().autoPlaySpeed).toBe(15000);
+  });
+
+  it('gives a phone the phone value when the two differ', () => {
+    renderWithSpeed({ desktop: '15000', mobile: '4000' }, 'mobile');
+    expect(lastCarouselProps().autoPlaySpeed).toBe(4000);
+  });
+
+  it('falls through to the desktop value on a breakpoint that authored none', () => {
+    // The live composition stores the key under `desktop` only, so a phone has
+    // to inherit it rather than drop to the default.
+    renderWithSpeed({ desktop: '15000' }, 'mobile');
+    expect(lastCarouselProps().autoPlaySpeed).toBe(15000);
+  });
+
+  it('keeps reading the plain number older compositions hold', () => {
+    renderWithSpeed(3000);
+    expect(lastCarouselProps().autoPlaySpeed).toBe(3000);
+  });
+
+  it('defaults to 3000 when nothing was authored', () => {
+    renderWithSpeed(undefined);
+    expect(lastCarouselProps().autoPlaySpeed).toBe(3000);
+  });
+});

package/src/blocks/slider-block.tsx

@@ -234,7 +234,21 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
 
   const useInfinite = useAutoPlay;
 
-  const autoPlaySpeedRaw = getConfigEntry('autoplay-speed');
+  /*
+   * Read through the breakpoint like every other entry above it.
+   *
+   * This one was asked for raw, and the editor stores it the same way it
+   * stores the rest — `{ desktop: '15000' }`. `Number({...})` is `NaN`, so
+   * `parseNumber` fell through to its own fallback and every slider ran at
+   * 3000ms whatever the merchant typed. The value was written, saved and shown
+   * back in the panel, which is why it looked like the control simply did
+   * nothing.
+   */
+  const autoPlaySpeedRaw = getResponsiveValue(
+    getConfigEntry('autoplay-speed'),
+    currentBreakpoint,
+    3000
+  );
   const autoPlaySpeed = parseNumber(autoPlaySpeedRaw, 3000);
 
   const slideGap = parseNumber(getConfigEntry('slide-gap'), 16);