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

package/CHANGELOG.md

@@ -1,12 +1,14 @@
 # @akinon/pz-theme
 
-## 2.0.84-beta.0
+## 2.0.84
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.84-beta.0
-  - @akinon/theme-contract@2.0.84-beta.0
+- cef43540: ZERO-4848: Add close text and styling options for modals
+- cef43540: Composed modal chrome takes the designer's own styles and a visible close label
+- cef43540: Video player inherits the block's corner radius, so a rounded video block rounds its iframe
+  - @akinon/next@2.0.84
+  - @akinon/theme-contract@2.0.84
 
 ## 2.0.83
 

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

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

@@ -13,6 +13,48 @@ const renderBlock = (value: any, properties?: any, styles?: any) =>
   );
 
 describe('VideoBlock', () => {
+  /**
+   * A designer's Corner Radius lands on the block's `[data-block-id]` box, and
+   * the player is its direct child. An iframe paints its own square corners
+   * straight over a rounded parent, so the radius was written, saved, shown in
+   * the panel and visibly did nothing — the only way to get it was to also
+   * find `overflow: hidden` in the All CSS families. Inheriting is what makes
+   * the one control the designer reached for enough on its own.
+   */
+  describe('the corner radius of the player itself', () => {
+    it('is inherited by the iframe, so a rounded block rounds the player', () => {
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123'
+      );
+
+      expect(
+        (container.querySelector('iframe') as HTMLIFrameElement).style
+          .borderRadius
+      ).toBe('inherit');
+    });
+
+    it('is inherited by a direct video file too', () => {
+      const { container } = renderBlock('https://cdn.example.com/clip.mp4');
+
+      expect(
+        (container.querySelector('video') as HTMLVideoElement).style
+          .borderRadius
+      ).toBe('inherit');
+    });
+
+    it('needs no clipping context, so full screen still escapes the box', () => {
+      // `overflow: hidden` on the wrapper would have been the other fix, and
+      // it imposes a clipping context on a player that legitimately overflows.
+      const { container } = renderBlock(
+        'https://www.youtube.com/watch?v=abc123'
+      );
+
+      expect(
+        (container.querySelector('iframe') as HTMLIFrameElement).style.overflow
+      ).toBe('');
+    });
+  });
+
   describe('YouTube URLs -> iframe', () => {
     it('renders an iframe for a youtube.com watch URL', () => {
       const { container } = renderBlock(

package/src/blocks/video-block.tsx

@@ -208,6 +208,18 @@ const VideoBlock = ({
     );
   }
 
+  /**
+   * `borderRadius: 'inherit'` on the player, not on the wrapper.
+   *
+   * A designer's Corner Radius lands on the block's `[data-block-id]` box, and
+   * the player is its direct child — an `<iframe>` for YouTube and Vimeo. An
+   * iframe paints its own square corners straight over a rounded parent, so
+   * the radius was written, saved, shown in the panel and visibly did nothing;
+   * the only way to get it was to also find `overflow: hidden` in the All CSS
+   * families. Inheriting costs nothing when no radius is set (it resolves to
+   * 0) and needs no clipping context, which `overflow: hidden` would impose on
+   * a player that legitimately overflows in full screen.
+   */
   if (parsed.kind === 'embed') {
     return (
       <iframe
@@ -221,9 +233,15 @@ const VideoBlock = ({
                 width: '100%',
                 height: 'auto',
                 aspectRatio: ratio,
-                border: 'none'
+                border: 'none',
+                borderRadius: 'inherit'
+              }
+            : {
+                width: '100%',
+                height: '400px',
+                border: 'none',
+                borderRadius: 'inherit'
               }
-            : { width: '100%', height: '400px', border: 'none' }
         }
         allow="autoplay; fullscreen; picture-in-picture"
         allowFullScreen
@@ -246,8 +264,13 @@ const VideoBlock = ({
       playsInline={properties.playsInline !== false}
       style={
         ratio
-          ? { width: '100%', aspectRatio: ratio, objectFit: 'cover' }
-          : { width: '100%', height: 'auto' }
+          ? {
+              width: '100%',
+              aspectRatio: ratio,
+              objectFit: 'cover',
+              borderRadius: 'inherit'
+            }
+          : { width: '100%', height: 'auto', borderRadius: 'inherit' }
       }
     />
   );

package/src/overlays/__tests__/modal-chrome-styles.test.tsx

@@ -0,0 +1,168 @@
+import { act, render } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+import { __resetEditorBridgeForTests } from '../../editor-bridge';
+import { clearAutoOpenRecord } from '../modal-frequency';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+import ModalPreviewHost from '../modal-preview-host';
+import {
+  __resetOverlayBusForTests,
+  openModal,
+  registerModalHost
+} from '../overlay-bus';
+import ThemeModalMount from '../theme-modal-mount';
+import { __resetEditorModalsForTests } from '../use-editor-modals';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+
+/**
+ * The chrome a designer dresses: the panel, the backdrop, the ✕ and its text.
+ *
+ * Everything these assert used to be unreachable. The panel's radius,
+ * background and shadow are INLINE styles on an element no part rule could
+ * name — a part selector hangs off a `[data-block-id]` and chrome has none —
+ * so the fix had to both invent a selector for it and beat an inline style.
+ * That is why every case here checks the `!important`: without it a control
+ * would be written, saved, shown in the panel and quietly do nothing, which is
+ * strictly worse than having no control at all.
+ *
+ * Each case runs through BOTH hosts. Nothing else pins that the storefront
+ * mount and the canvas preview agree, and that gap has already shipped a bug
+ * once (see the comment in `modal-preview-host.tsx`).
+ */
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const mkModal = (
+  overrides: Record<string, unknown> = {},
+  chrome: Record<string, unknown> = {}
+): ThemeModal =>
+  readThemeModals([
+    { id: 'dressed', name: 'Dressed', chrome, ...overrides }
+  ])[0];
+
+/** The storefront path: a real trigger opens a saved modal. */
+const openOnStorefront = (modal: ThemeModal) => {
+  render(
+    <ThemeModalMount modal={modal}>
+      <p>composed content</p>
+    </ThemeModalMount>
+  );
+  act(() => {
+    openModal(modal.id);
+  });
+};
+
+/** The canvas path: the editor holds the modal open over the page. */
+const holdInCanvas = (modal: ThemeModal) => {
+  render(<ModalPreviewHost />);
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: {
+          type: 'PREVIEW_OPEN_MODAL',
+          data: { modalId: modal.id, modal }
+        }
+      })
+    );
+  });
+};
+
+const HOSTS: Array<[string, (modal: ThemeModal) => void]> = [
+  ['the storefront mount', openOnStorefront],
+  ['the canvas preview', holdInCanvas]
+];
+
+/** Every rule the surface emitted, as one string. */
+const emittedCss = () =>
+  Array.from(document.querySelectorAll('style'))
+    .map(tag => tag.innerHTML)
+    .join('\n');
+
+beforeEach(() => {
+  __resetOverlayBusForTests();
+  __resetModalPreviewForTests();
+  __resetEditorModalsForTests();
+  __resetEditorBridgeForTests();
+  registerModalHost();
+  clearAutoOpenRecord('dressed');
+  document.body.style.overflow = '';
+});
+
+describe.each(HOSTS)('chrome styles through %s', (_name, open) => {
+  it('sends a bare css key to the panel, and wins against its inline default', () => {
+    open(mkModal({ styles: { 'border-radius': { desktop: '0px' } } }));
+
+    const css = emittedCss();
+    // Scoped to this modal's panel — not to the overlay root, and not to
+    // every modal on the page.
+    expect(css).toContain('[data-theme-modal="dressed"]');
+    expect(css).toContain('[data-part="modal"]');
+    expect(css).toMatch(/border-radius:\s*0px\s*!important/);
+  });
+
+  it('sends a namespaced key to the part it names', () => {
+    open(
+      mkModal({
+        styles: { 'overlay/background-color': { desktop: 'rgb(1, 2, 3)' } }
+      })
+    );
+
+    // Note the alpha: the colour pipeline normalises every paint to rgba(),
+    // so the assertion pins what actually reaches the sheet.
+    expect(emittedCss()).toMatch(
+      /\[data-part="overlay"\][\s\S]*background-color:\s*rgba\(1, 2, 3, 1\)\s*!important/
+    );
+  });
+
+  it('carries a part state through as its own rule', () => {
+    open(mkModal({ styles: { 'close/hover/color': { desktop: 'red' } } }));
+
+    expect(emittedCss()).toMatch(/\[data-part="close"\][^{]*:hover/);
+  });
+
+  it('emits nothing at all when the designer has styled nothing', () => {
+    open(mkModal());
+
+    // Not an empty <style> either: the legacy golden pins this markup.
+    expect(emittedCss()).not.toContain('[data-theme-modal="dressed"]');
+  });
+
+  it('keeps the custom-CSS hatch out of the declaration stream', () => {
+    open(
+      mkModal({
+        styles: { customCss: { desktop: '.promo { color: red; }' } }
+      })
+    );
+
+    const css = emittedCss();
+    expect(css).toContain('.promo');
+    // A multi-line body inside a declaration would produce a broken rule.
+    expect(css).not.toMatch(/customCss\s*:/);
+  });
+});
+
+describe('the ownership guard', () => {
+  it('does not dress a panel block nested inside the modal', () => {
+    openOnStorefront(
+      mkModal({ styles: { 'border-radius': { desktop: '20px' } } })
+    );
+
+    // The guard is what keeps `[data-part="modal"]` from matching a nested
+    // block's own part of the same name.
+    expect(emittedCss()).toContain(':not(');
+  });
+});

package/src/overlays/__tests__/modal-close-text.test.tsx

@@ -0,0 +1,118 @@
+import { act, render, screen } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+import { clearAutoOpenRecord } from '../modal-frequency';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+import {
+  __resetOverlayBusForTests,
+  openModal,
+  registerModalHost
+} from '../overlay-bus';
+import ThemeModalMount from '../theme-modal-mount';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+
+/**
+ * A visible word beside the ✕.
+ *
+ * `closeLabel` could never do this: it reaches only `aria-label`, so a designer
+ * asking for "✕ Close" got a screen-reader-only string and an icon. No CSS
+ * control could supply it either — the `<span>` did not exist. Hence a chrome
+ * field rather than a style, and hence the last case here: the button without
+ * one has to stay byte-identical, because the legacy size-guide panel renders
+ * this same component and live storefronts style its markup.
+ */
+
+const mkModal = (chrome: Record<string, unknown> = {}): ThemeModal =>
+  readThemeModals([{ id: 'newsletter', name: 'Newsletter', chrome }])[0];
+
+const openWith = (chrome: Record<string, unknown> = {}) => {
+  render(
+    <ThemeModalMount modal={mkModal(chrome)}>
+      <p>composed content</p>
+    </ThemeModalMount>
+  );
+
+  act(() => {
+    openModal('newsletter');
+  });
+
+  // The LAST one: a test that opens twice to compare two settings stacks two
+  // containers, and the first match would answer for the previous render.
+  return Array.from(
+    document.querySelectorAll('[data-part="close"]')
+  ).pop() as HTMLElement;
+};
+
+beforeEach(() => {
+  __resetOverlayBusForTests();
+  __resetModalPreviewForTests();
+  registerModalHost();
+  clearAutoOpenRecord('newsletter');
+  document.body.style.overflow = '';
+});
+
+describe('the text beside the close button', () => {
+  it('survives the config parser, and stays absent when never authored', () => {
+    expect(mkModal({ closeText: 'Kapat' }).chrome.closeText).toBe('Kapat');
+    expect(mkModal().chrome.closeText).toBeUndefined();
+    // An empty string is an absence, not "a text that is blank".
+    expect(mkModal({ closeText: '   ' }).chrome.closeText).toBeUndefined();
+  });
+
+  it('renders inside the button, as its own styleable part', () => {
+    const button = openWith({ closeText: 'Kapat' });
+
+    expect(screen.getByText('Kapat')).toBeInTheDocument();
+    expect(
+      button.querySelector('[data-part="close-text"]')?.textContent
+    ).toBe('Kapat');
+    // Still a real button, so the text is inside it rather than beside it.
+    expect(button.tagName).toBe('BUTTON');
+  });
+
+  it('leaves the accessible name to closeLabel, which may differ', () => {
+    const button = openWith({
+      closeText: 'Şimdi değil',
+      closeLabel: 'Close the newsletter dialog'
+    });
+
+    expect(button.getAttribute('aria-label')).toBe(
+      'Close the newsletter dialog'
+    );
+  });
+
+  it('puts the text where the designer asked', () => {
+    expect(openWith({ closeText: 'Kapat' }).style.flexDirection).toBe('row');
+    expect(
+      openWith({ closeText: 'Kapat', closeTextSide: 'before' }).style
+        .flexDirection
+    ).toBe('row-reverse');
+    // Only 'before' flips it; anything else is the historical order.
+    expect(mkModal({ closeTextSide: 'sideways' }).chrome.closeTextSide).toBe(
+      undefined
+    );
+  });
+
+  it('changes nothing about the button when there is no text', () => {
+    const button = openWith();
+
+    expect(button.querySelector('[data-part="close-text"]')).toBeNull();
+    // The golden fixture pins exactly these, and nothing else.
+    expect(button.style.display).toBe('');
+    expect(button.style.gap).toBe('');
+    expect(button.style.flexDirection).toBe('');
+  });
+});

package/src/overlays/__tests__/modal-preview-registers-region.test.tsx

@@ -0,0 +1,117 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+
+jest.mock('next/navigation', () => ({
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams()
+}));
+
+jest.mock('next-auth/react', () => ({
+  useSession: () => ({ status: 'unauthenticated' })
+}));
+
+jest.mock('@akinon/next/hooks/use-localization', () => ({
+  useLocalization: () => ({ locale: 'en', currency: 'USD' })
+}));
+
+import { __resetEditorBridgeForTests } from '../../editor-bridge';
+import { __resetPlaceholderRegistryForTests } from '../../placeholder-registry';
+import ModalPreviewHost from '../modal-preview-host';
+import { readThemeModals, ThemeModal } from '../modal-registry';
+import { __resetOverlayBusForTests } from '../overlay-bus';
+import { __resetEditorModalsForTests } from '../use-editor-modals';
+import { __resetModalPreviewForTests } from '../use-modal-preview';
+
+/**
+ * The seam between the two repos, and the one `modal-preview-host.test.tsx`
+ * cannot pin: it stands the placeholder wrapper in for a stub, which is
+ * precisely the component whose mount ANNOUNCES the modal's slug.
+ *
+ * That announce is the editor's only channel for learning a modal exists:
+ * its left-hand tree lists the regions the frame reported, so a preview host
+ * that drew the surface without registering its region would open a modal the
+ * designer could look at and never fill. Rendered here with the real wrapper.
+ */
+
+const EDITOR_ORIGIN = 'http://localhost:5174';
+
+const postMessage = jest.fn();
+
+const framesOfType = (type: string) =>
+  postMessage.mock.calls
+    .map(([message]) => message)
+    .filter(message => message?.type === type);
+
+const mkModal = (): ThemeModal =>
+  readThemeModals([{ id: 'newsletter', name: 'Newsletter' }])[0];
+
+const hold = (modal: ThemeModal) =>
+  act(() => {
+    fireEvent(
+      window,
+      new MessageEvent('message', {
+        origin: EDITOR_ORIGIN,
+        data: {
+          type: 'PREVIEW_OPEN_MODAL',
+          data: { modalId: modal.id, modal }
+        }
+      })
+    );
+  });
+
+describe('the region a held modal announces', () => {
+  beforeAll(() => {
+    // `postToEditor` drops everything unless the document is framed.
+    Object.defineProperty(window, 'top', {
+      configurable: true,
+      value: { name: 'designer' }
+    });
+    Object.defineProperty(window, 'parent', {
+      configurable: true,
+      value: { postMessage }
+    });
+  });
+
+  beforeEach(() => {
+    jest.useFakeTimers();
+    postMessage.mockClear();
+    delete (window as { __iframeReadySent?: boolean }).__iframeReadySent;
+    __resetModalPreviewForTests();
+    __resetEditorModalsForTests();
+    __resetOverlayBusForTests();
+    __resetEditorBridgeForTests();
+    __resetPlaceholderRegistryForTests();
+  });
+
+  afterEach(() => {
+    __resetPlaceholderRegistryForTests();
+    jest.useRealTimers();
+  });
+
+  it('reports the modal slug to the editor, so its region can be listed', () => {
+    render(<ModalPreviewHost />);
+
+    // Nothing is held yet: no modal region exists to report.
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+    expect(
+      framesOfType('PLACEHOLDERS_AVAILABLE').flatMap(
+        frame => frame.data?.placeholders ?? []
+      )
+    ).not.toContain('modal-newsletter');
+
+    hold(mkModal());
+    act(() => {
+      jest.advanceTimersByTime(500);
+    });
+
+    const announced = framesOfType('PLACEHOLDERS_AVAILABLE').flatMap(
+      frame => frame.data?.placeholders ?? []
+    );
+
+    // The whole set travels on every frame, never a delta — the editor
+    // replaces what it holds.
+    expect(announced).toContain('modal-newsletter');
+  });
+});

package/src/overlays/modal-chrome-css.ts

@@ -0,0 +1,95 @@
+import {
+  buildCustomCss,
+  buildPartCustomCss,
+  PART_CUSTOM_CSS_PREFIX
+} from '../utils/custom-css';
+import {
+  escapeCssAttributeValue,
+  neutralizeStyleTagBreakout
+} from '../utils/css-safety';
+import { generatePartCSS } from '../utils';
+import {
+  buildPartScopeSelector,
+  buildPartStyleKey,
+  isPartStyleKey
+} from '../utils/part-styles';
+import type { ThemeModal } from './modal-registry';
+
+/**
+ * The designer's styles for a modal's CHROME, as CSS.
+ *
+ * Chrome is the one surface a part rule could not already reach: every part
+ * selector hangs off a `[data-block-id]`, and the panel, the backdrop and the
+ * close button belong to no block — they are drawn by `overlay-surface.tsx`
+ * from inline styles. Inline styles outrank any stylesheet, which is why the
+ * emitter here is `generatePartCSS` and not a hand-rolled one: it is the path
+ * that already rewrites every declaration `!important`, so "no radius at all"
+ * beats the renderer's historical `4px` instead of being written, saved, shown
+ * in the panel and quietly doing nothing.
+ *
+ * NEVER import this from `modal-registry.ts`. That module is a server read
+ * path, policed by `__tests__/server-read-path-client-free.test.ts`, and
+ * `../utils` pulls React in.
+ */
+
+/**
+ * The parts a modal's chrome offers. `modal` is the panel itself, which is
+ * also what a BARE css key means — see the key grammar on `ThemeModal.styles`.
+ */
+export const MODAL_CHROME_PARTS = [
+  'modal',
+  'overlay',
+  'close',
+  'close-text',
+  'handle'
+] as const;
+
+export type ModalChromePart = (typeof MODAL_CHROME_PARTS)[number];
+
+export const buildModalChromeCss = (
+  modal: Pick<ThemeModal, 'id' | 'styles'>,
+  targetBreakpoint?: string
+): string => {
+  const styles = modal.styles;
+  if (!styles || typeof styles !== 'object' || Array.isArray(styles)) return '';
+
+  const entries = Object.entries(styles as Record<string, unknown>);
+  if (entries.length === 0) return '';
+
+  // The modal's own root carries this attribute in both hosts, so one anchor
+  // serves the canvas and the storefront identically.
+  const anchor = `[data-theme-modal="${escapeCssAttributeValue(modal.id)}"]`;
+
+  const hatch: Record<string, unknown> = {};
+  const parted: Record<string, unknown> = {};
+
+  entries.forEach(([key, value]) => {
+    // Split BEFORE the part emitter sees them: `customCss/close` parses as the
+    // part "customCss" with the property "close", and a multi-line CSS body
+    // inside a declaration produces a broken rule.
+    if (
+      key === 'customCss' ||
+      key === 'custom-css' ||
+      key.startsWith(PART_CUSTOM_CSS_PREFIX)
+    ) {
+      hatch[key] = value;
+      return;
+    }
+
+    // A bare key is the panel. Namespacing it here — rather than emitting the
+    // root bucket against the anchor as well — is what makes double
+    // application structurally impossible.
+    parted[isPartStyleKey(key) ? key : buildPartStyleKey('modal', key)] = value;
+  });
+
+  let css = generatePartCSS(anchor, parted, targetBreakpoint);
+
+  css += buildCustomCss(
+    { customCss: hatch.customCss ?? hatch['custom-css'] },
+    buildPartScopeSelector(anchor, 'modal') ?? anchor,
+    targetBreakpoint
+  );
+  css += buildPartCustomCss(hatch, anchor, targetBreakpoint);
+
+  return neutralizeStyleTagBreakout(css);
+};