@akinon/pz-theme 2.0.36-rc.0 → 2.0.37-beta.0

package/src/sections/hover-showcase-section.tsx

@@ -9,6 +9,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { Section } from '../theme-section';
 import { WithDesignerFeatures } from '../components/with-designer-features';
@@ -115,7 +116,7 @@ const HoverShowcaseSection: React.FC<HoverShowcaseSectionProps> = ({
     themeSettings
   );
 
-  const isMobile = currentBreakpoint === 'mobile';
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
 
   const items = (section.blocks || []).filter(
     (b: Block) => b.type === 'hover-showcase-item'

package/src/sections/installment-options-section.tsx

@@ -20,6 +20,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -417,7 +418,7 @@ export default function InstallmentOptionsSection({
 }: InstallmentOptionsSectionProps) {
   const themeSettings = useThemeSettingsContext();
   const { t } = useLocalization();
-  const isMobile = currentBreakpoint === 'mobile';
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
 
   const maxWidth = getResponsiveValue(
     section.styles?.['max-width'],

package/src/sections/order-tracking-lookup-section.tsx

@@ -22,6 +22,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -55,8 +56,12 @@ const readProperty = (
   if (typeof raw === 'string') return raw;
   if (typeof raw === 'object') {
     const responsive = raw as Record<string, unknown>;
+    // Same order as the emitted cascade: a tablet inherits mobile before it
+    // inherits desktop. Reading desktop first made 768-1023 show one thing and
+    // the stylesheet paint another.
     const picked =
       responsive[breakpoint] ??
+      (breakpoint === 'tablet' ? responsive.mobile : undefined) ??
       responsive.desktop ??
       responsive.mobile ??
       Object.values(responsive)[0];
@@ -1051,7 +1056,7 @@ export default function OrderTrackingLookupSection({
   const trackingUrl = resolveTrackingUrl(lookupOrder);
   const trackingNumber = resolveTrackingNumber(lookupOrder);
   const localeCode = locale || 'en';
-  const isMobile = currentBreakpoint === 'mobile';
+  const isMobile = isNarrowBreakpoint(currentBreakpoint);
 
   return (
     <div

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

@@ -12,6 +12,7 @@ import {
   getCSSStyles,
   getResponsiveValue
 } from '../utils';
+import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -275,19 +276,23 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
       ? tabletItems
       : desktopItems;
 
+  // This section had the three bands before the system did, and it picked the
+  // same two lines by hand. They come from the shared constants now, so the
+  // carousel switches at the width the stylesheet switches at rather than at a
+  // number that merely used to agree.
   const responsive = {
     desktop: {
-      breakpoint: { max: 3000, min: 1024 },
+      breakpoint: { max: 3000, min: DESKTOP_MIN_WIDTH },
       items: desktopItems,
       slidesToSlide: desktopSlides
     },
     tablet: {
-      breakpoint: { max: 1023, min: 768 },
+      breakpoint: { max: DESKTOP_MIN_WIDTH - 1, min: TABLET_MIN_WIDTH },
       items: tabletItems,
       slidesToSlide: tabletSlides
     },
     mobile: {
-      breakpoint: { max: 767, min: 0 },
+      breakpoint: { max: TABLET_MIN_WIDTH - 1, min: 0 },
       items: mobileItems,
       slidesToSlide: mobileSlides
     }

package/src/sections/pre-order-launch-banner-section.tsx

@@ -9,6 +9,7 @@ import { useThemeSettingsContext } from '../theme-settings-context';
 import { safeDeepClone } from '../utils/safe-clone';
 import { Section } from '../theme-section';
 import { getCSSStyles, getResponsiveValue } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 
 import { postToEditor } from '../editor-bridge';
 interface PreOrderLaunchBannerSectionProps {
@@ -352,7 +353,7 @@ export default function PreOrderLaunchBannerSection({
     return {
       ...baseStyles,
       flexDirection:
-        currentBreakpoint === 'mobile' ? 'column-reverse' : 'row-reverse'
+        isNarrowBreakpoint(currentBreakpoint) ? 'column-reverse' : 'row-reverse'
     };
   }, [
     currentBreakpoint,

package/src/sections/tabs-section.tsx

@@ -3,6 +3,7 @@ import { Section } from '../theme-section';
 import ThemeBlock from '../theme-block';
 import {
   getCSSStyles,
+  getResponsiveValue as readResponsiveValue,
   resolveThemeCssVariables,
   resolveThemeStyleObject
 } from '../utils';
@@ -42,20 +43,13 @@ const TabsSection: React.FC<TabsSectionProps> = ({
     )
     .sort((a, b) => (a.order || 0) - (b.order || 0));
 
+  // Reads through the shared chain rather than a local desktop fallback: a
+  // tablet inherits the mobile value, which is what the emitted stylesheet
+  // does at 768-1023. A private reader here made the markup disagree with the
+  // CSS on compositions nobody had touched.
   const getResponsiveValue = useCallback(
-    <T,>(value: unknown, fallback: T): T => {
-      if (value === undefined || value === null || value === '')
-        return fallback;
-      if (typeof value === 'object' && !Array.isArray(value)) {
-        const responsiveValue = value as Record<string, T | undefined> & {
-          desktop?: T;
-        };
-        const matchedValue =
-          responsiveValue[currentBreakpoint] ?? responsiveValue.desktop;
-        return matchedValue !== undefined ? (matchedValue as T) : fallback;
-      }
-      return value as T;
-    },
+    <T,>(value: unknown, fallback: T): T =>
+      readResponsiveValue(value, currentBreakpoint, fallback) as T,
     [currentBreakpoint]
   );
 

package/src/theme-block.tsx

@@ -3,9 +3,35 @@
 import React from 'react';
 import blockRendererRegistry from './blocks/block-renderer-registry';
 import { WithDesignerFeatures } from './components/with-designer-features';
-import { isPublishWindowVisible } from './utils';
+import { getResponsiveValue, isPublishWindowVisible } from './utils';
 import { devWarn } from './utils/dev-warn';
 
+/**
+ * Narrows what a designer typed into something usable as a document-wide id.
+ *
+ * The value ends up in three places at once — an `#fragment` in a link, an
+ * `id` attribute, and any `#id` selector written later — so it is reduced to
+ * the intersection all three accept. Stripped: whitespace (runs become a
+ * single hyphen first, so "Size guide" stays readable as "Size-guide"), and
+ * every character outside `[A-Za-z0-9_-]`. That drops the duplicate-hostile
+ * ones specifically: `#` and `.` and `:` and `[` `]` would split a selector,
+ * `/` and `?` would end a URL fragment, and quotes would close an attribute.
+ * Leading characters that are not a letter or underscore go too, because an id
+ * must not start with a digit. Nothing left means no id at all.
+ *
+ * Two blocks given the same id is the designer's problem, not a crash: the
+ * markup is still valid HTML and the browser simply jumps to the first one.
+ */
+export const sanitizeHtmlId = (value: unknown): string => {
+  if (typeof value !== 'string') return '';
+
+  return value
+    .trim()
+    .replace(/\s+/g, '-')
+    .replace(/[^A-Za-z0-9_-]/g, '')
+    .replace(/^[^A-Za-z_]+/, '');
+};
+
 export interface Block {
   id: string;
   styleSourceId?: string;
@@ -76,6 +102,28 @@ export default function ThemeBlock({
     return null;
   }
 
+  const htmlId = sanitizeHtmlId(
+    getResponsiveValue(block.properties?.htmlId, currentBreakpoint, '')
+  );
+
+  const renderedBlock = (
+    <BlockRenderer
+      block={block}
+      placeholderId={placeholderId}
+      sectionId={sectionId}
+      isDesigner={isDesigner}
+      isSelected={isSelected}
+      selectedBlockId={selectedBlockId}
+      currentBreakpoint={currentBreakpoint}
+      onMoveUp={onMoveUp}
+      onMoveDown={onMoveDown}
+      onDuplicate={onDuplicate}
+      onToggleVisibility={onToggleVisibility}
+      onDelete={onDelete}
+      onRename={onRename}
+    />
+  );
+
   return (
     <WithDesignerFeatures
       block={block}
@@ -91,21 +139,38 @@ export default function ThemeBlock({
       onDelete={onDelete}
       onRename={onRename}
     >
-      <BlockRenderer
-        block={block}
-        placeholderId={placeholderId}
-        sectionId={sectionId}
-        isDesigner={isDesigner}
-        isSelected={isSelected}
-        selectedBlockId={selectedBlockId}
-        currentBreakpoint={currentBreakpoint}
-        onMoveUp={onMoveUp}
-        onMoveDown={onMoveDown}
-        onDuplicate={onDuplicate}
-        onToggleVisibility={onToggleVisibility}
-        onDelete={onDelete}
-        onRename={onRename}
-      />
+      {htmlId ? (
+        <>
+          {/*
+            The id rides a zero-size marker rather than the block's own
+            element. The wrapper this renders inside is the block's box, but it
+            belongs to WithDesignerFeatures, and every alternative that owns an
+            element changes the layout of a block that asked only for a name:
+            an extra flex item adds a gap, and `display: contents` has no box
+            at all, which is precisely what a browser needs to scroll to a
+            fragment. Absolute positioning keeps the marker out of flow (no
+            flex item, no grid cell, no space) while still generating the box
+            that makes the jump land — at the block's top-left corner, since
+            that wrapper is always `relative`.
+          */}
+          <span
+            id={htmlId}
+            data-theme-anchor=""
+            aria-hidden="true"
+            style={{
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: 0,
+              height: 0,
+              overflow: 'hidden'
+            }}
+          />
+          {renderedBlock}
+        </>
+      ) : (
+        renderedBlock
+      )}
     </WithDesignerFeatures>
   );
 }

package/src/theme-placeholder-client.tsx

@@ -10,6 +10,7 @@ import {
 import { useVisibilityContext } from './hooks/use-visibility-context';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
 import { isPublishWindowVisible } from './utils/publish-window';
+import { useThemePageContext } from './theme-page-context';
 
 import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -46,7 +47,13 @@ export default function ThemePlaceholderClient({
   const [isDesigner, setIsDesigner] = useState(
     () => typeof window !== 'undefined' && window.__themeEditorDesigner === true
   );
-  const visibilityContext = useVisibilityContext(currentBreakpoint);
+  // Null unless a ThemePageContextProvider sits above this placeholder; data
+  // conditions then have nothing to read and resolve the same way on both sides.
+  const pageContext = useThemePageContext();
+  const visibilityContext = useVisibilityContext(currentBreakpoint, {
+    pageContext,
+    isDesigner
+  });
   const renderedSections = applyVisibilityRulesToSections(
     sections,
     visibilityContext

package/src/theme-placeholder-wrapper.tsx

@@ -9,8 +9,11 @@ import {
   unregisterPlaceholder
 } from './placeholder-registry';
 import { useThemePageContext } from './theme-page-context';
+import { ThemePageContextProvider } from './theme-page-context';
 import { ThemeSettingsProvider } from './theme-settings-context';
 import { generateThemeCSS } from './utils';
+import { breakpointForWidth } from './utils/breakpoints';
+import { PartStatePreview } from './components/part-state-preview';
 import { useVisibilityContext } from './hooks/use-visibility-context';
 import { createPageContextDiscovery } from './utils/page-context-discovery';
 import { applyVisibilityRulesToSections } from './utils/visibility-rules';
@@ -427,8 +430,10 @@ export default function ThemePlaceholderWrapper({
     if (!checkIsInIframe()) {
       const checkBreakpoint = () => {
         const width = window.innerWidth;
-        // Use 1024px as the cutoff for desktop/mobile based on DEFAULT_BREAKPOINTS
-        const newBreakpoint = width < 1024 ? 'mobile' : 'desktop';
+        // 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);
 
         setCurrentBreakpoint((prev) => {
           if (prev !== newBreakpoint) {
@@ -708,14 +713,22 @@ export default function ThemePlaceholderWrapper({
       generateThemeCSS(sections, isDesigner ? currentBreakpoint : undefined),
     [sections, isDesigner, currentBreakpoint]
   );
-  const visibilityContext = useVisibilityContext(currentBreakpoint);
+  const visibilityContext = useVisibilityContext(currentBreakpoint, {
+    pageContext: resolvedPageContext,
+    isDesigner
+  });
   const renderedSections = useMemo(
     () => applyVisibilityRulesToSections(sections, visibilityContext),
     [sections, visibilityContext]
   );
 
   return (
+    // Blocks read commerce data through useThemePageContext(); the provider
+    // has to sit above the rendered sections or every data-driven block
+    // falls back to its empty state.
+    <ThemePageContextProvider value={resolvedPageContext}>
     <ThemeSettingsProvider value={themeSettings}>
+      <PartStatePreview isDesigner={isDesigner} />
       {dynamicCSS && <style dangerouslySetInnerHTML={{ __html: dynamicCSS }} />}
       <div
         data-placeholder={slug}
@@ -783,5 +796,6 @@ export default function ThemePlaceholderWrapper({
           ))}
       </div>
     </ThemeSettingsProvider>
+    </ThemePageContextProvider>
   );
 }

package/src/theme-placeholder.tsx

@@ -1,10 +1,56 @@
 import 'server-only';
 
-import {
-  getCollectionWidgetData,
-  getWidgetData,
-  getWidgetSchemaData
-} from '@akinon/next/data/server';
+import * as serverData from '@akinon/next/data/server';
+import appFetch from '@akinon/next/utils/app-fetch';
+import { ServerVariables } from '@akinon/next/utils/server-variables';
+
+const { getWidgetData } = serverData;
+
+/**
+ * v1 cores ship a smaller server data layer: only `getWidgetData` exists,
+ * `getWidgetSchemaData` and `getCollectionWidgetData` arrived with v2.
+ *
+ * The endpoints are identical on both backends — v1 just never wrapped them.
+ * Degrading to "no data" would render every published section *without its
+ * blocks* (a section's block tree lives in the widget schema, not in the
+ * widget), so on v1 we call the REST endpoints directly. This is what keeps
+ * composed pages rendering on the brands still running v1.
+ */
+type ServerDataFn = (<T>(args: never) => Promise<T | null>) | undefined;
+
+const optionalServerFn = (name: string): ServerDataFn =>
+  (serverData as unknown as Record<string, ServerDataFn>)[name];
+
+const directFetch = async <T,>(url: string): Promise<T | null> => {
+  try {
+    const result = await appFetch<T>({
+      url,
+      locale: ServerVariables.locale,
+      currency: ServerVariables.currency
+    });
+    return result ?? null;
+  } catch {
+    return null;
+  }
+};
+
+const getCollectionWidgetData = async <T,>(args: {
+  slug: string;
+}): Promise<T | null> => {
+  const fn = optionalServerFn('getCollectionWidgetData');
+  if (fn) return (await fn<T>(args as never)) ?? null;
+  if (!args?.slug) return null;
+  return directFetch<T>(`/product_collection_widgets/${args.slug}/`);
+};
+
+const getWidgetSchemaData = async <T,>(args: {
+  widgetSlug: string;
+}): Promise<T | null> => {
+  const fn = optionalServerFn('getWidgetSchemaData');
+  if (fn) return (await fn<T>(args as never)) ?? null;
+  if (!args?.widgetSlug) return null;
+  return directFetch<T>(`/widgets/${args.widgetSlug}/schema/`);
+};
 import ThemePlaceholderWrapper from './theme-placeholder-wrapper';
 import { Section } from './theme-section';
 import { generateThemeCSS } from './utils';

package/src/theme-section.tsx

@@ -9,9 +9,12 @@ import SectionWrapper from './sections/section-wrapper';
 import sectionRendererRegistry from './sections/section-renderer-registry';
 import {
   buildIteratorBlock,
-  resolveBlockBindings
+  resolveBlockBindings,
+  setBindingLocale
 } from './utils/iterator-utils';
+import { useLocalization } from '@akinon/next/hooks';
 import { devWarn } from './utils/dev-warn';
+import { isNarrowBreakpoint } from './utils/breakpoints';
 import { safeDeepClone } from './utils/safe-clone';
 
 import { isTrustedEditorEvent, postToEditor } from './editor-bridge';
@@ -117,6 +120,13 @@ export default function ThemeSection({
 
   const sectionRef = useRef<HTMLElement>(null);
 
+  // Bound prices are formatted deep inside the binding walk, which has no
+  // React context to read. Publishing the storefront's locale before the
+  // bindings resolve is what stops an en-GB brand rendering Turkish number
+  // grouping in every repeated row.
+  const { locale } = useLocalization();
+  setBindingLocale(locale);
+
   useEffect(() => {
     if (!isDesigner) return;
 
@@ -615,9 +625,15 @@ export default function ThemeSection({
           )
         )
       );
-      const tabletCount = Math.max(1, Math.min(desktopCount, 2));
-      const activeCount =
-        currentBreakpoint === 'mobile' ? mobileCount : desktopCount;
+      // This section offers a desktop count and a mobile count and no tablet
+      // control, so a tablet inherits the mobile count the same way every
+      // other unauthored value does. Synthesising `min(desktopCount, 2)` here
+      // put FEWER columns at 900px than the phone shows whenever the mobile
+      // count was above two — a regression on compositions nobody had edited.
+      const tabletCount = mobileCount;
+      const activeCount = isNarrowBreakpoint(currentBreakpoint)
+        ? mobileCount
+        : desktopCount;
       return {
         desktop: desktopCount,
         tablet: tabletCount,