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

package/CHANGELOG.md

@@ -1,12 +1,13 @@
 # @akinon/pz-theme
 
-## 2.0.36-beta.0
+## 2.0.36
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.36-beta.0
-  - @akinon/theme-contract@2.0.36-beta.0
+- 72be24d3: ZERO-4706: Add the theme render foundations — a tablet breakpoint, named parts with state styling, per-row bindings and conditions, one overlay contract, and a scoped custom-CSS hatch
+- Updated dependencies [72be24d3]
+  - @akinon/theme-contract@2.0.36
+  - @akinon/next@2.0.36
 
 ## 2.0.35
 

package/jest/__mocks__/hookform-resolvers.js

@@ -0,0 +1,5 @@
+// Mock for @hookform/resolvers: it ships ESM that jest will not transform, and
+// a render test never exercises the validation it wires up.
+const yupResolver = () => async () => ({ values: {}, errors: {} });
+
+module.exports = { yupResolver };

package/jest/__mocks__/next-auth-react.js

@@ -0,0 +1,5 @@
+// Mock for next-auth/react: it ships ESM that jest will not transform, and the
+// blocks that reach for it only ask whether somebody is signed in.
+const useSession = () => ({ data: null, status: 'unauthenticated' });
+
+module.exports = { useSession, signIn: () => {}, signOut: () => {} };

package/jest.config.js

@@ -15,6 +15,9 @@ module.exports = {
     '\\.(css|less|scss|sass)$': '<rootDir>/jest/style-mock.js',
     '^settings$': '<rootDir>/jest/__mocks__/settings.js',
     '^next/link$': '<rootDir>/jest/__mocks__/next-link.js',
+    '^next-auth/react$': '<rootDir>/jest/__mocks__/next-auth-react.js',
+    '^@hookform/resolvers(/.*)?$':
+      '<rootDir>/jest/__mocks__/hookform-resolvers.js',
     '^@akinon/next/hooks$': '<rootDir>/jest/__mocks__/akinon-next-hooks.js',
     '^@akinon/next/hooks/use-localization$':
       '<rootDir>/jest/__mocks__/akinon-next-hooks.js',

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

package/src/blocks/accordion-block.tsx

@@ -1,7 +1,26 @@
 import React, { useState } from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
+import { partAttrs } from '../utils';
 
+/**
+ * Accordion: a heading row that toggles a content panel.
+ *
+ * Whether the accordion was open used to exist only as inline styles the
+ * renderer computed for itself — a rotated icon child and a collapsed grid
+ * row — and never as anything a stylesheet could match. So the near-universal
+ * "+ becomes −" was inexpressible: not as a part style, and not even from
+ * scoped custom CSS, because the markup offered no hook to select on. The
+ * header, the panel and the content box now carry `data-state="open"` while
+ * the accordion is expanded, which is the same vocabulary every other block
+ * uses (see utils/part-styles.ts) and which `[data-state~="open"]` matches.
+ *
+ * The heading and content children are authored blocks with their own ids and
+ * their own style panels; the open state reaches them as a descendant of
+ * `[data-part="header"][data-state~="open"]`.
+ *
+ * Parts: header, panel, content, empty.
+ */
 const AccordionBlock: React.FC<BlockRendererProps> = ({
   block,
   placeholderId,
@@ -20,7 +39,10 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
 
   if (!headingBlock && !contentBlock) {
     return (
-      <div className="p-4 text-gray-400 border border-dashed border-gray-300 rounded">
+      <div
+        {...partAttrs('empty')}
+        className="p-4 text-gray-400 border border-dashed border-gray-300 rounded"
+      >
         No accordion content
       </div>
     );
@@ -116,18 +138,28 @@ const AccordionBlock: React.FC<BlockRendererProps> = ({
 
   return (
     <>
-      <div style={{ cursor: 'pointer' }} onClick={toggleAccordion}>
+      <div
+        {...partAttrs('header', { open: isOpen })}
+        style={{ cursor: 'pointer' }}
+        onClick={toggleAccordion}
+      >
         {renderHeading()}
       </div>
 
       <div
+        {...partAttrs('panel', { open: isOpen })}
         style={{
           display: 'grid',
           gridTemplateRows: isOpen ? '1fr' : '0fr',
           transition: 'grid-template-rows 0.3s ease-in-out'
         }}
       >
-        <div style={{ overflow: 'hidden' }}>{renderContent()}</div>
+        <div
+          {...partAttrs('content', { open: isOpen })}
+          style={{ overflow: 'hidden' }}
+        >
+          {renderContent()}
+        </div>
       </div>
     </>
   );

package/src/blocks/commerce-format.ts

@@ -0,0 +1,220 @@
+/**
+ * One money/date formatter for every commerce block.
+ *
+ * Three families of blocks each grew their own price format, so the same
+ * product read differently on the PDP, the grid and the basket. Two of
+ * them also called Intl with an implicit locale, which resolves to the
+ * Node default on the server and the browser locale on the client — a
+ * hydration mismatch waiting for the basket page context to be wired.
+ * Everything formats through here, with the locale passed in explicitly.
+ */
+
+const FALLBACK_LOCALE = 'tr-TR';
+
+/** Accepts "1.299,90", "1299.90", 1299.9 — returns null when unparseable */
+export function parseAmount(value: unknown): number | null {
+  if (typeof value === 'number') {
+    return Number.isFinite(value) ? value : null;
+  }
+  if (typeof value !== 'string') return null;
+
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+
+  // Strip anything that is not a digit, separator or sign, then decide
+  // which separator is the decimal one by looking at the last occurrence.
+  const cleaned = trimmed.replace(/[^\d.,-]/g, '');
+  if (!cleaned) return null;
+
+  const lastComma = cleaned.lastIndexOf(',');
+  const lastDot = cleaned.lastIndexOf('.');
+  let normalized = cleaned;
+
+  if (lastComma > lastDot) {
+    normalized = cleaned.replace(/\./g, '').replace(',', '.');
+  } else if (lastDot > lastComma) {
+    normalized = cleaned.replace(/,/g, '');
+  } else {
+    normalized = cleaned.replace(/,/g, '');
+  }
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : null;
+}
+
+/** 'always' = two digits; 'auto' drops a whole amount's ",00"; 'never' = none. */
+export type MoneyDecimals = 'always' | 'auto' | 'never';
+
+/**
+ * '' keeps the locale's own currency format. 'custom' prints the literal the
+ * brand typed (`TL`), which no locale data can produce.
+ */
+export type MoneyCurrencyDisplay = '' | 'symbol' | 'code' | 'custom' | 'none';
+
+/** '' keeps the side the locale itself puts the currency on. */
+export type MoneyCurrencyPosition = '' | 'before' | 'after';
+
+/**
+ * The half of the format a brand owns, without the locale and currency the
+ * page already knows. Blocks hand their editor properties straight through,
+ * so every member is optional and every unset member reproduces the format
+ * the theme shipped with.
+ */
+export interface MoneyStyleOptions {
+  decimals?: MoneyDecimals;
+  currencyDisplay?: MoneyCurrencyDisplay;
+  /** Read only when `currencyDisplay` is 'custom'. */
+  currencyText?: string;
+  currencyPosition?: MoneyCurrencyPosition;
+}
+
+export interface MoneyFormatOptions extends MoneyStyleOptions {
+  locale?: string;
+  currency?: string;
+  showCurrency?: boolean;
+}
+
+const resolveFractionDigits = (
+  amount: number,
+  decimals: MoneyDecimals
+): number => {
+  if (decimals === 'never') return 0;
+  if (decimals !== 'auto') return 2;
+  // Rounded before the test: 1599.004 is not an integer but prints as one, and
+  // a brand asking for "1.599" does not want that value to keep its ",00".
+  return Number.isInteger(Math.round(amount * 100) / 100) ? 0 : 2;
+};
+
+const formatPlain = (amount: number, locale: string, digits: number): string =>
+  new Intl.NumberFormat(locale, {
+    minimumFractionDigits: digits,
+    maximumFractionDigits: digits
+  }).format(amount);
+
+/** The symbol a locale uses for a code, e.g. tr-TR + TRY -> ₺. */
+const readCurrencySymbol = (locale: string, code: string): string => {
+  try {
+    const parts = new Intl.NumberFormat(locale, {
+      style: 'currency',
+      currency: code
+    }).formatToParts(1);
+
+    return parts.find((part) => part.type === 'currency')?.value || code;
+  } catch {
+    return code;
+  }
+};
+
+/**
+ * Designs are written in the brand's own money format — "1.599 TL", not the
+ * "₺1.599,00" a locale hands out — so the digit count, the currency token and
+ * the side it sits on are all options. Leaving them unset formats exactly as
+ * this file always did, which is what keeps published compositions still.
+ */
+export function formatMoney(
+  value: unknown,
+  {
+    locale,
+    currency,
+    showCurrency = true,
+    decimals = 'always',
+    currencyDisplay = '',
+    currencyText = '',
+    currencyPosition = ''
+  }: MoneyFormatOptions = {}
+): string {
+  const amount = parseAmount(value);
+  if (amount === null) return '';
+
+  const resolvedLocale = locale || FALLBACK_LOCALE;
+  const code = (currency || '').trim();
+  const digits = resolveFractionDigits(amount, decimals);
+  const wantsCurrency = showCurrency && currencyDisplay !== 'none';
+  // A custom label stands on its own; every other display needs a code to
+  // resolve against, so without one the amount prints bare — as it does today.
+  const label =
+    !wantsCurrency
+      ? ''
+      : currencyDisplay === 'custom'
+        ? currencyText.trim()
+        : code;
+
+  try {
+    if (!label) return formatPlain(amount, resolvedLocale, digits);
+
+    // Locale-native path: Intl owns the token, its placement and its spacing.
+    // This is where an untouched block lands, so its output cannot move.
+    if (currencyDisplay !== 'custom' && !currencyPosition) {
+      return new Intl.NumberFormat(resolvedLocale, {
+        style: 'currency',
+        currency: code,
+        currencyDisplay: currencyDisplay === 'code' ? 'code' : 'symbol',
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits
+      }).format(amount);
+    }
+
+    // Intl can express neither a chosen side nor a brand's own label, so the
+    // amount is formatted alone and the token attached with a single space —
+    // one rule, both sides. The tight locale form stays available by leaving
+    // the position unset.
+    const token =
+      currencyDisplay === 'custom'
+        ? label
+        : currencyDisplay === 'code'
+          ? code
+          : readCurrencySymbol(resolvedLocale, code);
+    const plain = formatPlain(amount, resolvedLocale, digits);
+
+    return currencyPosition === 'before'
+      ? `${token} ${plain}`
+      : `${plain} ${token}`;
+  } catch {
+    // Unknown currency code (commerce sometimes returns a symbol): fall
+    // back to a plain number plus whatever label we were handed
+    const plain = formatPlain(amount, resolvedLocale, digits);
+    return label ? `${plain} ${label}` : plain;
+  }
+}
+
+/**
+ * A non-money number a shopper reads — today only a distance. It is not
+ * currency, so it must not be pushed through `formatMoney`, but it still needs
+ * the page's explicit locale: "2.4" and "2,4" are the same distance, and an
+ * implicit Intl locale resolves to the Node default on the server and the
+ * browser locale on the client, which hydrates as a mismatch.
+ */
+export function formatDecimal(
+  value: unknown,
+  locale?: string,
+  digits = 1
+): string {
+  const amount = parseAmount(value);
+  if (amount === null) return '';
+
+  const safeDigits = Number.isFinite(digits)
+    ? Math.min(6, Math.max(0, Math.round(digits)))
+    : 1;
+
+  try {
+    return formatPlain(amount, locale || FALLBACK_LOCALE, safeDigits);
+  } catch {
+    return String(amount);
+  }
+}
+
+export function formatDate(value: unknown, locale?: string): string {
+  if (!value) return '';
+  const parsed = new Date(value as string);
+  if (Number.isNaN(parsed.getTime())) return '';
+
+  try {
+    return new Intl.DateTimeFormat(locale || FALLBACK_LOCALE, {
+      day: '2-digit',
+      month: '2-digit',
+      year: 'numeric'
+    }).format(parsed);
+  } catch {
+    return parsed.toISOString().slice(0, 10);
+  }
+}

package/src/blocks/icon-block.tsx

@@ -20,6 +20,11 @@ const IconBlock = ({
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
   const iconValue = getResponsiveValue(block.value, currentBreakpoint, '');
+  // An uploaded brand mark announced itself to screen readers as "Icon"
+  // because the alt the panel offers was never read.
+  const iconAlt = String(
+    getResponsiveValue(block.properties?.alt, currentBreakpoint, 'Icon')
+  );
   const iconSize = getResponsiveValue(
     block.styles?.size,
     currentBreakpoint,
@@ -162,7 +167,7 @@ const IconBlock = ({
                 src={svgSrc}
                 width={Number(iconSize)}
                 height={Number(iconSize)}
-                alt="Icon"
+                alt={iconAlt}
               />
             </div>
           );

package/src/blocks/image-gallery-block.tsx

@@ -58,7 +58,7 @@ const ImageGalleryBlock = ({
           typeof rawAlt === 'string'
             ? rawAlt
             : typeof rawAlt === 'object' && rawAlt
-            ? String(rawAlt[currentBreakpoint] ?? rawAlt.desktop ?? '')
+            ? String(getResponsiveValue(rawAlt, currentBreakpoint, ''))
             : '';
 
         const objectFit = getResponsiveValue(

package/src/blocks/link-block.tsx

@@ -31,7 +31,15 @@ const LinkBlock = ({
       )
     : '_self';
 
-  const rel = target === '_blank' ? 'noopener noreferrer' : undefined;
+  const authoredRel = String(
+    getResponsiveValue(block.properties?.rel, currentBreakpoint, '')
+  ).trim();
+  // An external link still needs the security pair, so an authored rel is
+  // merged with it rather than replacing it.
+  const rel =
+    target === '_blank'
+      ? [authoredRel, 'noopener noreferrer'].filter(Boolean).join(' ')
+      : authoredRel || undefined;
 
   const formattedHref = useMemo(() => {
     if (!href) {

package/src/blocks/slider-block.tsx

@@ -12,6 +12,7 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import { isNarrowBreakpoint } from '../utils/breakpoints';
 import { BlockRendererProps } from './block-renderer-registry';
 
 import { postToEditor } from '../editor-bridge';
@@ -118,7 +119,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   };
 
   const currentSlidesToSlide =
-    currentBreakpoint === 'mobile' ? mobileSlides : desktopSlides;
+    isNarrowBreakpoint(currentBreakpoint) ? mobileSlides : desktopSlides;
 
   const showArrows = getResponsiveValue(
     getConfigEntry('show-arrows'),

package/src/blocks/tab-block.tsx

@@ -1,8 +1,21 @@
 import React from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
 
-// Tab blocks are rendered by TabsSection, not individually
-// This component should not be used directly
+/**
+ * A tab pane draws nothing of its own.
+ *
+ * TabsSection reaches into each tab block, pulls out its header and content
+ * children and draws them itself, because only the section knows which pane is
+ * current. This component is still registered so a tab keeps a designer
+ * wrapper (selection, rename, reorder) — it just has no markup to contribute,
+ * and the surrounding designer overlay is the only reason it mounts at all.
+ *
+ * Consequence for styling, and the reason this note exists: a tab therefore
+ * emits no `data-part` and no `data-state`, so `part/...` style keys on the
+ * tab descriptor would have nothing to land on. The current-tab hooks belong
+ * on the elements TabsSection renders (the header row, each header button, the
+ * active pane), not here.
+ */
 const TabBlock: React.FC<BlockRendererProps> = () => {
   return null;
 };

package/src/blocks/video-block.tsx

@@ -108,6 +108,12 @@ const VideoBlock = ({ block }: BlockRendererProps) => {
         autoPlay={properties.autoplay}
         loop={properties.loop}
         muted={properties.muted}
+        poster={
+          typeof properties.poster === 'string' ? properties.poster : undefined
+        }
+        // Without it iOS opens the video full screen, which is never what an
+        // inline background clip is for.
+        playsInline={properties.playsInline !== false}
         style={{
           width: '100%',
           height: 'auto'

package/src/components/__tests__/part-state-preview-scope.test.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import { act, render } from '@testing-library/react';
+import ThemeBlock from '../../theme-block';
+import { PartStatePreview } from '../part-state-preview';
+
+/**
+ * Pinning a state must stamp only the parts the pinned block owns.
+ *
+ * The editor says "show me this block's header in its open state" and the
+ * canvas writes `data-state` onto the matching elements. Part names are
+ * generic on purpose, so a plain `querySelectorAll` under the block's wrapper
+ * also finds the identically-named part of any block nested inside it. The
+ * generated stylesheet no longer reaches those elements, but the *nested*
+ * block's own state rules still do — so pinning "open" on an outer accordion
+ * could paint an inner accordion open while it is shut, and the author would
+ * be styling against a canvas that lies.
+ *
+ * A part belongs to its closest `[data-block-id]` ancestor. That is already
+ * how a click decides which part it selected (hooks/use-designer-features).
+ */
+
+const heading = (id: string, children: unknown[] = []) => ({
+  id: `${id}-heading`,
+  type: 'group',
+  label: 'Accordion Heading',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: children
+});
+
+const content = (id: string, children: unknown[] = []) => ({
+  id: `${id}-content`,
+  type: 'group',
+  label: 'Accordion Content',
+  properties: {},
+  styles: {},
+  order: 1,
+  hidden: false,
+  blocks: children
+});
+
+const text = (id: string) => ({
+  id,
+  type: 'text',
+  label: 'Text',
+  value: '<p>copy</p>',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const accordion = (id: string, inner?: unknown) => ({
+  id,
+  type: 'accordion',
+  label: 'Accordion',
+  value: '',
+  properties: { defaultOpen: true },
+  styles: {},
+  order: 0,
+  hidden: false,
+  blocks: [
+    heading(id, [text(`${id}-title`)]),
+    content(id, inner ? [inner] : [text(`${id}-copy`)])
+  ]
+});
+
+const pin = (blockId: string, partName: string, state: string | null) =>
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'PREVIEW_PART_STATE',
+          data: { blockId, partName, state }
+        }
+      })
+    );
+  });
+
+/** Which block owns each element currently carrying the pinned token. */
+const stampedOwners = (root: HTMLElement, token: string): string[] => {
+  const owners = new Set<string>();
+
+  root.querySelectorAll<HTMLElement>('[data-part]').forEach((element) => {
+    const state = element.getAttribute('data-state') || '';
+    if (!state.split(/\s+/).includes(token)) return;
+    owners.add(
+      element.closest('[data-block-id]')?.getAttribute('data-block-id') || '?'
+    );
+  });
+
+  return Array.from(owners).sort();
+};
+
+const renderCanvas = () =>
+  render(
+    <>
+      <PartStatePreview isDesigner />
+      <ThemeBlock
+        block={accordion('outer', accordion('inner')) as never}
+        placeholderId="p"
+        sectionId="sec-1"
+        isDesigner
+      />
+    </>
+  );
+
+describe('pinning a part state', () => {
+  it('renders both accordions, each naming a header', () => {
+    // Guards the premise: without two headers the test below would pass for
+    // the wrong reason.
+    const { container } = renderCanvas();
+
+    expect(container.querySelectorAll('[data-part="header"]')).toHaveLength(2);
+  });
+
+  it('stamps only the pinned block, not a nested block naming the same part', () => {
+    const { container } = renderCanvas();
+
+    pin('outer', 'header', 'hover');
+
+    expect(stampedOwners(container, 'hover')).toEqual(['outer']);
+  });
+
+  it('still stamps the nested block when the nested block is the one pinned', () => {
+    const { container } = renderCanvas();
+
+    pin('inner', 'header', 'hover');
+
+    expect(stampedOwners(container, 'hover')).toEqual(['inner']);
+  });
+
+  it('clears the token it wrote and leaves the renderer state alone', () => {
+    const { container } = renderCanvas();
+
+    pin('outer', 'header', 'hover');
+    pin('outer', 'header', null);
+
+    expect(stampedOwners(container, 'hover')).toEqual([]);
+    // `defaultOpen` is on, so the renderer's own token has to survive.
+    const header = container.querySelector(
+      '[data-block-id="outer"] [data-part="header"]'
+    ) as HTMLElement;
+    expect(header.getAttribute('data-state')).toContain('open');
+  });
+});