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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.122-beta.0
+## 2.0.122
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.122-beta.0
-  - @akinon/theme-contract@2.0.122-beta.0
+- 96129c1: ZERO-5109: A section no longer seals in the layers it raises. Its content box carried a z-index so the canvas could put the selection outline under it and the action toolbar over it, and that opened a stacking context on live pages too: a header section's open mega menu was ordered inside the box rather than against the page, so a product page's sticky bar painted straight over it. The box keeps that layer only while the editor is attached. Two consequences worth knowing, both needing merchant-authored CSS inside such a section: a negative z-index now sits behind the section's own background, and a section scrim written as a pseudo-element with a positive z-index now covers the content instead of sitting under it.
+  - @akinon/next@2.0.122
+  - @akinon/theme-contract@2.0.122
 
 ## 2.0.121
 

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

package/src/sections/__tests__/section-content-layer.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import SectionWrapper from '../section-wrapper';
+import { SECTION_CONTENT_ATTRIBUTE } from '../../utils/section-content-width';
+import type { Section } from '../../theme-section';
+
+/**
+ * A section must not seal in the layers it raises.
+ *
+ * The content box carried `z-10` so it would sit between the canvas's
+ * selection outline (z-0) and its action toolbar (z-20). Both are the editor's
+ * and neither exists on a live page — but a z-index on a positioned box opens
+ * a stacking context wherever it renders, so a header section's mega menu
+ * panel (z-40) was ordered inside that box rather than against the page, and
+ * the product page's add-to-basket bar painted over an open menu. The number
+ * now belongs to the canvas alone.
+ */
+const section = (): Section =>
+  ({
+    id: 's1',
+    type: 'custom:zsazsazsu:header',
+    label: 'Header',
+    properties: {},
+    styles: {},
+    order: 0,
+    hidden: false,
+    blocks: []
+  } as unknown as Section);
+
+const contentBox = (container: HTMLElement) =>
+  container.querySelector(`[${SECTION_CONTENT_ATTRIBUTE}]`) as HTMLElement;
+
+const renderSection = (isDesigner: boolean) =>
+  render(
+    <SectionWrapper section={section()} placeholderId="ph" isDesigner={isDesigner}>
+      <span>section content</span>
+    </SectionWrapper>
+  );
+
+describe('the section content box', () => {
+  it('claims no layer on the storefront', () => {
+    const { container } = renderSection(false);
+    const box = contentBox(container);
+
+    expect(box.className).toContain('relative');
+    expect(box.className).not.toContain('z-10');
+  });
+
+  it('keeps the canvas layering while the editor is attached', () => {
+    const { container } = renderSection(true);
+
+    expect(contentBox(container).className).toContain('z-10');
+  });
+
+  it('still renders what the section put in it', () => {
+    const { container } = renderSection(false);
+
+    expect(contentBox(container).textContent).toBe('section content');
+  });
+});

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

@@ -682,9 +682,9 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   /**
    * Lift the section over a sticky header for as long as the panel is up.
    *
-   * The band below is `relative z-10`, and so is `[data-section-content]`
+   * The band below is `relative z-10`, which is a stacking context of its own
    * that `SectionWrapper` renders around it — so the panel's own
-   * `z-index: 1000` resolves INSIDE two nested stacking contexts and the
+   * `z-index: 1000` resolves INSIDE it and the
    * section still competes with the page at 10, losing to a sticky header at
    * 40. The element that has to move is the outermost of the two, which this
    * component does not render; reaching for it is the honest cost of not

package/src/sections/section-wrapper.tsx

@@ -170,8 +170,22 @@ export default function SectionWrapper({
        * switch — only the attribute the content-width rule is written against.
        * A section that renders through its own component also keeps its own
        * `display`: this box has always been the thing that carried it.
+       *
+       * THE LAYER IS THE CANVAS'S, NOT THE STOREFRONT'S. `z-10` puts the
+       * content between the selection outline (z-0) and the action toolbar
+       * (z-20), both of which exist only while the editor is attached. On a
+       * live page it drew nothing and cost everything: a z-index on a
+       * positioned box opens a stacking context, so every layer a section
+       * raised — the mega menu's panel at 40, a quick view, a drawer — was
+       * sealed inside it and the page's own furniture painted straight over
+       * the menu. Without the number the box is still positioned, still the
+       * content-width target, and still above the outline, which comes before
+       * it in the markup.
        */}
-      <div {...{ [SECTION_CONTENT_ATTRIBUTE]: '' }} className="relative z-10">
+      <div
+        {...{ [SECTION_CONTENT_ATTRIBUTE]: '' }}
+        className={isDesigner ? 'relative z-10' : 'relative'}
+      >
         {children}
       </div>
     </section>