@akinon/pz-theme 2.0.140-rc.0 → 2.0.141-beta.0

package/CHANGELOG.md

@@ -1,40 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.140-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 [1595d458e]
-- Updated dependencies [dca128112]
-  - @akinon/next@2.0.140-rc.0
-  - @akinon/theme-contract@2.0.140-rc.0
+## 2.0.141-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.141-beta.0
+  - @akinon/theme-contract@2.0.141-beta.0
+
+## 2.0.140
+
+### Patch Changes
+
+- 80aed36: ZERO-5189: Keep a carousel mounted when the breakpoint resolves
+  - @akinon/next@2.0.140
+  - @akinon/theme-contract@2.0.140
 
 ## 2.0.139
 

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.140-rc.0",
+  "version": "2.0.141-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.140-rc.0",
+    "@akinon/next": "2.0.141-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.140-rc.0",
+    "@akinon/theme-contract": "2.0.141-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.140-rc.0",
+    "@akinon/next": "2.0.141-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/slider-block.tsx

@@ -13,7 +13,11 @@ import {
   partAttrs,
   resolveThemeCssVariables
 } from '../utils';
-import { DESKTOP_MIN_WIDTH, isNarrowBreakpoint } from '../utils/breakpoints';
+import {
+  DESKTOP_MIN_WIDTH,
+  isNarrowBreakpoint,
+  setAtAnyBreakpoint
+} from '../utils/breakpoints';
 import { useCarouselSsr } from '../utils/carousel-ssr';
 import {
   authoredSlideIndex,
@@ -322,7 +326,18 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
     false
   );
 
-  const useInfinite = useAutoPlay;
+  /**
+   * Asked WITHOUT the breakpoint, unlike everything around it.
+   *
+   * react-multi-carousel reads `infinite` when it mounts and builds its
+   * clones from it; nothing re-reads it on a prop change, so the only way to
+   * honour a later answer is to remount — and a remount destroys and rebuilds
+   * every slide one commit after the page became interactive. Since
+   * `currentBreakpoint` is seeded desktop and corrected after mount, a
+   * per-breakpoint autoplay made that happen on every phone and tablet load.
+   * One answer at every width, one mount.
+   */
+  const useInfinite = setAtAnyBreakpoint(getConfigEntry('autoplay'));
 
   /*
    * Read through the breakpoint like every other entry above it.
@@ -359,7 +374,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
    * to come back with it. Two copies of this template literal would eventually
    * disagree.
    */
-  const carouselKey = `${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`;
+  const carouselKey = `${desktopItems}-${mobileItems}-${desktopSlides}-${mobileSlides}-${visibleCount}-${useInfinite}`;
 
   // Server-render the slides. Without this the track ships empty and the whole
   // band is 0px tall until hydration — see `utils/carousel-ssr`.

package/src/sections/posts-slider-section.tsx

@@ -20,7 +20,11 @@ import {
   getResponsiveValue,
   SECTION_CONTENT_ATTRIBUTE
 } from '../utils';
-import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../utils/breakpoints';
+import {
+  DESKTOP_MIN_WIDTH,
+  TABLET_MIN_WIDTH,
+  setAtAnyBreakpoint
+} from '../utils/breakpoints';
 import { useCarouselSsr } from '../utils/carousel-ssr';
 import {
   authoredSlideIndex,
@@ -512,7 +516,15 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     getResponsiveValue(getConfigEntry('infinite'), currentBreakpoint, false) ===
     true;
   const hasMultipleSlides = visibleCount > itemsPerView;
-  const useInfinite = infinite && hasMultipleSlides;
+  /**
+   * Asked WITHOUT the breakpoint — see `setAtAnyBreakpoint`. The library
+   * builds its clones from `infinite` at mount and never re-reads it, and
+   * `itemsPerView` is breakpoint-derived, so the old expression changed its
+   * answer the moment the viewport was measured and took the whole strip
+   * down with it on every phone and tablet load.
+   */
+  const useInfinite =
+    setAtAnyBreakpoint(getConfigEntry('infinite')) && visibleCount > 1;
   const useAutoPlay = autoPlay && hasMultipleSlides;
 
   /*
@@ -530,7 +542,9 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
    * change. Without the remount, switching device in the editor would leave the
    * canvas showing the previous breakpoint's item count.
    */
-  const carouselKey = `${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`;
+  const carouselKey = `${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${
+    isDesigner ? currentBreakpoint : ''
+  }-${useInfinite}`;
 
   // Server-render the slides. Without this the strip ships an empty track and
   // occupies no height until hydration — see `utils/carousel-ssr`.

package/src/utils/__tests__/set-at-any-breakpoint.test.ts

@@ -0,0 +1,55 @@
+import { setAtAnyBreakpoint } from '../breakpoints';
+
+/**
+ * The primitive that keeps a carousel mounted once.
+ *
+ * `currentBreakpoint` is seeded 'desktop' and corrected only after the
+ * viewport is measured, so a structural setting read through it answers one
+ * thing in the server HTML and another a paint later. react-multi-carousel
+ * builds its clones from `infinite` at mount and never re-reads it, so the
+ * only way to honour the later answer is a remount — which destroys and
+ * rebuilds every slide on every phone load. Asked this way the question has
+ * one answer at every width.
+ */
+describe('setAtAnyBreakpoint', () => {
+  it('is true when the switch is on at any single breakpoint', () => {
+    expect(setAtAnyBreakpoint({ desktop: true, mobile: false })).toBe(true);
+    expect(setAtAnyBreakpoint({ mobile: true })).toBe(true);
+    expect(setAtAnyBreakpoint({ tablet: true })).toBe(true);
+  });
+
+  it('is false when it is off everywhere', () => {
+    expect(setAtAnyBreakpoint({ desktop: false, mobile: false })).toBe(false);
+    expect(setAtAnyBreakpoint({})).toBe(false);
+  });
+
+  it('treats an absent value as off', () => {
+    expect(setAtAnyBreakpoint(undefined)).toBe(false);
+    expect(setAtAnyBreakpoint(null)).toBe(false);
+    expect(setAtAnyBreakpoint('')).toBe(false);
+  });
+
+  it('accepts a flat value, which is how an older composition stores it', () => {
+    expect(setAtAnyBreakpoint(true)).toBe(true);
+    expect(setAtAnyBreakpoint('true')).toBe(true);
+    expect(setAtAnyBreakpoint(false)).toBe(false);
+  });
+
+  it('ignores a key that is not a breakpoint', () => {
+    expect(setAtAnyBreakpoint({ phablet: true })).toBe(false);
+  });
+
+  it('gives the same answer whatever breakpoint the caller is on', () => {
+    // The whole point: no argument can change it, so the server and the
+    // first client render cannot disagree.
+    const authored = { desktop: true, tablet: false, mobile: false };
+    const answers = ['desktop', 'tablet', 'mobile'].map(() =>
+      setAtAnyBreakpoint(authored)
+    );
+    expect(new Set(answers).size).toBe(1);
+  });
+
+  it('rejects an array rather than reading index 0 as a breakpoint', () => {
+    expect(setAtAnyBreakpoint([true])).toBe(false);
+  });
+});

package/src/utils/breakpoints.ts

@@ -336,3 +336,27 @@ export const PHONE_AND_TABLET_MEDIA_CONDITION = `(max-width: ${
 export const TABLET_ONLY_MEDIA_CONDITION = `(min-width: ${TABLET_MIN_WIDTH}px) and (max-width: ${
   DESKTOP_MIN_WIDTH - 1
 }px)`;
+
+/**
+ * True when a per-breakpoint switch is on at ANY width.
+ *
+ * `currentBreakpoint` is seeded `'desktop'` and corrected only after mount, so
+ * a value read through it answers one thing in the server HTML and another a
+ * paint later. For a setting that is merely styling that is harmless. For one
+ * that decides a carousel's STRUCTURE — whether the library builds clones —
+ * it is not: react-multi-carousel reads `infinite` when it mounts and never
+ * again, so the only way to honour a change is to remount, which destroys and
+ * rebuilds every slide a beat after the page became interactive.
+ *
+ * Asking the question without the breakpoint gives one answer at every width,
+ * so the carousel mounts once. A slider set to loop on desktop also loops on a
+ * phone; that is the price, and it is far cheaper than throwing the band away
+ * and redrawing it on every mobile load.
+ */
+export const setAtAnyBreakpoint = (value: unknown): boolean => {
+  if (value === null || value === undefined || value === '') return false;
+  if (typeof value !== 'object') return Boolean(value);
+  if (Array.isArray(value)) return false;
+  const perBreakpoint = value as Record<string, unknown>;
+  return BREAKPOINTS.some((breakpoint) => Boolean(perBreakpoint[breakpoint]));
+};