@akinon/pz-theme 2.0.130-rc.0 → 2.0.131-beta.0

package/CHANGELOG.md

@@ -1,40 +1,23 @@
 # @akinon/pz-theme
 
-## 2.0.130-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 [1595d458]
-- Updated dependencies [dca12811]
-  - @akinon/next@2.0.130-rc.0
-  - @akinon/theme-contract@2.0.130-rc.0
+## 2.0.131-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd757]
+  - @akinon/next@2.0.131-beta.0
+  - @akinon/theme-contract@2.0.131-beta.0
+
+## 2.0.130
+
+### Patch Changes
+
+- ab5e529: ZERO-5152: Render the breakpoints a designer adds next to desktop, tablet and mobile
+
+  The theme editor saves the breakpoints a designer defines (`theme_breakpoints` on the `theme-config` widget), each one a name and a pixel range, and stores the values authored for it under its own key in every per-breakpoint object. The renderer read none of that, so a value set for such a breakpoint showed in the canvas at best and never on the live site. The theme config reader now parses the list, the placeholder passes it to the stylesheet generator, and the generator writes the values a custom breakpoint sets inside its own media query, after the built-in ones so it wins inside its range. Anything a custom breakpoint does not set falls back to the built-in breakpoint its range starts in, in the stylesheet, in the canvas and in the value readers alike, and a visibility list saved before the breakpoint existed answers for it the way it answers for that built-in breakpoint. On the live site the wrapper reports the custom breakpoint whose range holds the viewport, so property values resolve the same way. A theme without custom breakpoints emits exactly the stylesheet it emitted before.
+
+  - @akinon/next@2.0.130
+  - @akinon/theme-contract@2.0.130
 
 ## 2.0.129
 

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.130-rc.0",
+  "version": "2.0.131-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.130-rc.0",
+    "@akinon/next": "2.0.131-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.130-rc.0",
+    "@akinon/theme-contract": "2.0.131-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.130-rc.0",
+    "@akinon/next": "2.0.131-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/chrome/__tests__/theme-config-source.test.ts

@@ -25,7 +25,8 @@ describe('readThemeConfig', () => {
     ).toEqual({
       settings: { mainMenuSticky: true },
       dataSources: [{ id: 'ds-1' }],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
   });
 
@@ -40,7 +41,8 @@ describe('readThemeConfig', () => {
     ).toEqual({
       settings: { mainMenuSticky: true },
       dataSources: [{ id: 'ds-1' }],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
   });
 
@@ -55,7 +57,8 @@ describe('readThemeConfig', () => {
     ).toEqual({
       settings: { mainMenuSticky: false },
       dataSources: [{ id: 'ds-1' }],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
   });
 
@@ -99,7 +102,8 @@ describe('readThemeConfig', () => {
           autoTrigger: undefined,
           visibilityRules: undefined
         }
-      ]
+      ],
+      breakpoints: []
     });
   });
 
@@ -113,7 +117,65 @@ describe('readThemeConfig', () => {
           theme_dataSources: JSON.stringify([{ id: 'ds-1' }])
         }
       })
-    ).toEqual({ settings: null, dataSources: [{ id: 'ds-1' }], modals: [] });
+    ).toEqual({
+      settings: null,
+      dataSources: [{ id: 'ds-1' }],
+      modals: [],
+      breakpoints: []
+    });
+
+    error.mockRestore();
+  });
+
+  it('reads the custom breakpoints the editor saves next to the settings', () => {
+    // The built-in names only ever set a canvas width in the editor, and an
+    // entry the reader cannot make sense of is dropped on its own.
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_breakpoints: {
+            value: JSON.stringify([
+              { name: 'desktop', width: 1024 },
+              { name: 'mobile', width: 390 },
+              {
+                name: 'custom-wide',
+                label: 'Wide desktop',
+                width: 1440,
+                minWidth: 1440
+              },
+              {
+                name: 'custom-small',
+                label: 'Small phone',
+                width: 374,
+                maxWidth: 374
+              },
+              { name: 'custom-broken', label: 'Broken', minWidth: 900, maxWidth: 600 }
+            ])
+          }
+        }
+      }).breakpoints
+    ).toEqual([
+      { name: 'custom-wide', label: 'Wide desktop', width: 1440, minWidth: 1440 },
+      { name: 'custom-small', label: 'Small phone', width: 374, maxWidth: 374 }
+    ]);
+  });
+
+  it('keeps the rest of the config when the breakpoints are malformed', () => {
+    const error = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_breakpoints: '[{not json',
+          theme_settings: JSON.stringify({ mainMenuSticky: true })
+        }
+      })
+    ).toEqual({
+      settings: { mainMenuSticky: true },
+      dataSources: [],
+      modals: [],
+      breakpoints: []
+    });
 
     error.mockRestore();
   });
@@ -122,12 +184,14 @@ describe('readThemeConfig', () => {
     expect(readThemeConfig(null)).toEqual({
       settings: null,
       dataSources: [],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
     expect(readThemeConfig({ attributes: {} })).toEqual({
       settings: null,
       dataSources: [],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
   });
 });
@@ -143,7 +207,8 @@ describe('getThemeConfig', () => {
     await expect(getThemeConfig()).resolves.toEqual({
       settings: null,
       dataSources: [],
-      modals: []
+      modals: [],
+      breakpoints: []
     });
   });
 });

package/src/chrome/error-composition-source.ts

@@ -30,7 +30,11 @@ export async function loadErrorComposition(): Promise<ErrorComposition | null> {
       slug,
       placeholderId: loaded.placeholderId,
       sections: loaded.sections,
-      themeCSS: generateThemeCSS(loaded.sections),
+      themeCSS: generateThemeCSS(
+        loaded.sections,
+        undefined,
+        loaded.customBreakpoints
+      ),
       themeSettings: loaded.themeSettings,
       pageContext: buildErrorPageContext()
     };

package/src/chrome/preview-snapshot-source.ts

@@ -11,6 +11,8 @@ export interface PreviewSnapshot {
   savedAt?: string;
   themeSettings?: Record<string, unknown> | null;
   dataSources?: unknown[];
+  /** `theme.breakpoints` as the working copy was saved with it. */
+  breakpoints?: unknown[];
   sections: unknown[];
 }
 

package/src/chrome/theme-config-source.ts

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { getWidgetDataWithRetry } from './retrying-widget-data';
 
 import { readThemeModals, ThemeModal } from '../overlays/modal-registry';
+import {
+  type CustomBreakpoint,
+  readCustomBreakpoints
+} from '../utils/breakpoints';
 
 /**
  * The `theme-config` widget, read and parsed once per request.
@@ -23,6 +27,12 @@ export interface ThemeConfig {
    * every page already fetches once.
    */
   modals: ThemeModal[];
+  /**
+   * The breakpoints the designer added next to desktop, tablet and mobile.
+   * The editor has always saved `theme_breakpoints` on this widget; the live
+   * stylesheet needs them to emit the rules authored for them.
+   */
+  breakpoints: CustomBreakpoint[];
 }
 
 type ThemeConfigWidget = {
@@ -42,11 +52,30 @@ const unwrapAttribute = (raw: unknown): unknown => {
 };
 
 export const readThemeConfig = (data: ThemeConfigWidget): ThemeConfig => {
-  const config: ThemeConfig = { settings: null, dataSources: [], modals: [] };
+  const config: ThemeConfig = {
+    settings: null,
+    dataSources: [],
+    modals: [],
+    breakpoints: []
+  };
   const attributes = data?.attributes;
 
   if (!attributes) return config;
 
+  if (attributes.theme_breakpoints) {
+    try {
+      const resolved = unwrapAttribute(attributes.theme_breakpoints);
+
+      // `readCustomBreakpoints` drops a bad entry on its own, so a malformed
+      // one never costs the others.
+      config.breakpoints = readCustomBreakpoints(
+        typeof resolved === 'string' ? JSON.parse(resolved) : resolved
+      );
+    } catch (error) {
+      console.error('Failed to parse theme_breakpoints:', error);
+    }
+  }
+
   if (attributes.theme_modals) {
     // `readThemeModals` already survives a malformed blob one entry at a time,
     // so it needs no try/catch of its own here.
@@ -95,7 +124,7 @@ const load = async (): Promise<ThemeConfig> => {
     return readThemeConfig(data as ThemeConfigWidget);
   } catch {
     // A brand with no published theme still renders: no settings, no sources.
-    return { settings: null, dataSources: [], modals: [] };
+    return { settings: null, dataSources: [], modals: [], breakpoints: [] };
   }
 };
 

package/src/load-placeholder-sections.ts

@@ -13,6 +13,7 @@ import {
   PreviewSnapshot
 } from './chrome/preview-snapshot-source';
 import { getThemeConfig, ThemeConfig } from './chrome/theme-config-source';
+import { readCustomBreakpoints } from './utils/breakpoints';
 // One acceptance rule for this loader and the designer canvas's client fetch
 // (utils/live-rows.ts), so the two cannot take different answers.
 import { carriesProducts } from './utils/live-rows';
@@ -226,7 +227,12 @@ async function loadFromPreviewSnapshot(
     placeholderId: slug,
     dataSources,
     themeSettings:
-      (snapshot.themeSettings as Record<string, unknown> | null) ?? null
+      (snapshot.themeSettings as Record<string, unknown> | null) ?? null,
+    // The working copy's own list; a blob written before it carried one
+    // renders with the live theme's.
+    customBreakpoints: Array.isArray(snapshot.breakpoints)
+      ? readCustomBreakpoints(snapshot.breakpoints)
+      : (await getThemeConfig()).breakpoints
   };
 }
 
@@ -235,6 +241,7 @@ export interface LoadedPlaceholder {
   placeholderId: string;
   dataSources: ThemeConfig['dataSources'];
   themeSettings: ThemeConfig['settings'];
+  customBreakpoints: ThemeConfig['breakpoints'];
 }
 
 /**
@@ -262,7 +269,11 @@ export async function loadPlaceholderSections(
     // theme-config is optional for placeholder rendering, and the reader is
     // memoized per request — a page with several placeholders, or a ChromeSlot
     // asking the same question to decide whether it is pinned, reads it once.
-    const { dataSources, settings: themeSettings } = await getThemeConfig();
+    const {
+      dataSources,
+      settings: themeSettings,
+      breakpoints: customBreakpoints
+    } = await getThemeConfig();
 
     let data: {
       slug?: string;
@@ -493,7 +504,8 @@ export async function loadPlaceholderSections(
       sections,
       placeholderId: data?.slug?.toString() || slug,
       dataSources,
-      themeSettings
+      themeSettings,
+      customBreakpoints
     };
   } catch (error) {
     console.error(`Error fetching theme placeholder data for ${slug}:`, error);

package/src/overlays/use-overlay-breakpoint.ts

@@ -3,7 +3,7 @@
 import { useEffect, useState } from 'react';
 
 import { parseEditorMessage } from '../editor-bridge';
-import { breakpointForWidth } from '../utils/breakpoints';
+import { breakpointForWidth, builtInBreakpointOf } from '../utils/breakpoints';
 
 /**
  * Which breakpoint the surrounding page is at.
@@ -39,7 +39,9 @@ export const useOverlayBreakpoint = (): string => {
         if (message?.type !== 'CHANGE_BREAKPOINT') return;
 
         const next = (message.data as { breakpoint?: string })?.breakpoint;
-        if (next) setBreakpoint(next);
+        // Modal chrome knows the three built-in breakpoints only; a custom one
+        // shows the chrome of the band it stands on, as its range does live.
+        if (next) setBreakpoint(builtInBreakpointOf(next));
       };
 
       window.addEventListener('message', handleMessage);

package/src/theme-placeholder-wrapper.tsx

@@ -19,7 +19,12 @@ import { ThemeSettingsProvider } from './theme-settings-context';
 import { MenuSeedProvider } from './menu-seed-context';
 import type { MenuSeeds } from './blocks/menu-query-args';
 import { generateThemeCSS, readThemeTypographyFont } from './utils';
-import { breakpointForWidth } from './utils/breakpoints';
+import {
+  type CustomBreakpoint,
+  breakpointForViewport,
+  readCustomBreakpoints,
+  registerCustomBreakpoints
+} from './utils/breakpoints';
 import { PartStatePreview } from './components/part-state-preview';
 import { useVisibilityContext } from './hooks/use-visibility-context';
 import { createPageContextDiscovery } from './utils/page-context-discovery';
@@ -222,6 +227,12 @@ interface ThemePlaceholderWrapperProps {
   isDesignMode: boolean;
   dataSources?: any[];
   initialThemeSettings?: Record<string, unknown> | null;
+  /**
+   * The theme's custom breakpoints (`theme_breakpoints`), read with the theme
+   * settings. Absent for a caller that has none to give; the editor canvas
+   * gets them with the theme it sends.
+   */
+  initialCustomBreakpoints?: CustomBreakpoint[] | null;
   initialPageContext?: Record<string, unknown> | null;
   /**
    * Menus the server fetched for this placeholder's nav-menu blocks
@@ -366,6 +377,7 @@ export default function ThemePlaceholderWrapper({
   isDesignMode,
   dataSources: initialDataSources = [],
   initialThemeSettings = null,
+  initialCustomBreakpoints = null,
   initialPageContext = null,
   initialMenuSeeds = null
 }: ThemePlaceholderWrapperProps) {
@@ -378,6 +390,17 @@ export default function ThemePlaceholderWrapper({
   );
   const [selectedBlockId, setSelectedBlockId] = useState<string | null>(null);
   const [currentBreakpoint, setCurrentBreakpoint] = useState<string>('desktop');
+  // Registered for the readers that only see a value and a breakpoint name
+  // (see utils/breakpoints). Only when this caller has a list to give: a
+  // wrapper without one must not clear what another placeholder registered.
+  const [customBreakpoints, setCustomBreakpoints] = useState<
+    CustomBreakpoint[]
+  >(() => {
+    if (initialCustomBreakpoints) {
+      registerCustomBreakpoints(initialCustomBreakpoints);
+    }
+    return initialCustomBreakpoints ?? [];
+  });
   // Designer flag survives remounts via the window global; the editor sends
   // SET_THEME_EDITOR_COOKIE only once per document (IFRAME_READY guard).
   const [isDesigner, setIsDesigner] = useState(
@@ -728,8 +751,9 @@ export default function ThemePlaceholderWrapper({
         const width = window.innerWidth;
         // The cutoffs live in utils/breakpoints, alongside the media queries
         // the generated stylesheet is built from, so the viewport this reports
-        // and the query that is matching it can never drift apart.
-        const newBreakpoint = breakpointForWidth(width);
+        // and the query that is matching it can never drift apart. A custom
+        // breakpoint whose range holds the width is the one being read.
+        const newBreakpoint = breakpointForViewport(width, customBreakpoints);
 
         setCurrentBreakpoint((prev) => {
           if (prev !== newBreakpoint) {
@@ -754,7 +778,7 @@ export default function ThemePlaceholderWrapper({
         clearTimeout(timeoutId);
       };
     }
-  }, []);
+  }, [customBreakpoints]);
 
   // Re-hangs the editor's data-source records over the sections, and again
   // whenever live rows arrive (`liveRowsRevision`). Waits for the editor's
@@ -865,6 +889,18 @@ export default function ThemePlaceholderWrapper({
         case 'UPDATE_THEME': {
           const theme = messageData?.theme;
 
+          // Before any state is set, so the render this message causes already
+          // resolves custom breakpoints against the list it carries.
+          if (Array.isArray(theme?.breakpoints)) {
+            const incoming = readCustomBreakpoints(theme.breakpoints);
+            registerCustomBreakpoints(incoming);
+            setCustomBreakpoints((previous) =>
+              JSON.stringify(previous) === JSON.stringify(incoming)
+                ? previous
+                : incoming
+            );
+          }
+
           // Inject theme colors as CSS custom properties
           if (theme?.settings) {
             injectThemeColors(theme.settings);
@@ -1032,8 +1068,12 @@ export default function ThemePlaceholderWrapper({
   // mobile-width frame — a layout jump on every toggle.
   const dynamicCSS = useMemo(
     () =>
-      generateThemeCSS(sections, isDesigner ? currentBreakpoint : undefined),
-    [sections, isDesigner, currentBreakpoint]
+      generateThemeCSS(
+        sections,
+        isDesigner ? currentBreakpoint : undefined,
+        customBreakpoints
+      ),
+    [sections, isDesigner, currentBreakpoint, customBreakpoints]
   );
   const themeBackgroundCSS = useMemo(
     () =>
@@ -1059,7 +1099,9 @@ export default function ThemePlaceholderWrapper({
         applyVisibilityRulesToSections(sections, visibilityContext),
         currentBreakpoint
       ),
-    [sections, visibilityContext, currentBreakpoint]
+    // `customBreakpoints` too: the chain a custom breakpoint reads through is
+    // the registered list, which changes without the breakpoint changing.
+    [sections, visibilityContext, currentBreakpoint, customBreakpoints]
   );
 
   return (

package/src/theme-placeholder.tsx

@@ -22,8 +22,14 @@ export default async function ThemePlaceholder({
     return null;
   }
 
-  const { sections, placeholderId, dataSources, themeSettings } = loaded;
-  const themeCSS = generateThemeCSS(sections);
+  const {
+    sections,
+    placeholderId,
+    dataSources,
+    themeSettings,
+    customBreakpoints
+  } = loaded;
+  const themeCSS = generateThemeCSS(sections, undefined, customBreakpoints);
   // The live and the preview-snapshot loads both arrive here, so both get the
   // menus their nav-menu blocks would otherwise fetch after hydration.
   const menuSeeds = await loadMenuSeeds(sections);
@@ -40,6 +46,7 @@ export default async function ThemePlaceholder({
         isDesignMode={false}
         dataSources={dataSources}
         initialThemeSettings={themeSettings}
+        initialCustomBreakpoints={customBreakpoints}
         initialPageContext={pageContext}
         initialMenuSeeds={menuSeeds}
       />