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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.90-beta.0
+## 2.0.90
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.90-beta.0
-  - @akinon/theme-contract@2.0.90-beta.0
+- dfe76c5c: ZERO-4984: Stop an unnamed slot from adopting a custom section's regions
+  - @akinon/next@2.0.90
+  - @akinon/theme-contract@2.0.90
 
 ## 2.0.89
 

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

package/src/custom/__tests__/region-node-wire.test.tsx

@@ -162,6 +162,47 @@ const registerHeader = () =>
     })
   });
 
+/**
+ * The same header, with its one slot spelled as a bare `<ThemeSlot />`.
+ *
+ * That spelling is not exotic — it is what every block written against the
+ * original single-slot API uses, and a developer moving a header into a section
+ * carries it over unchanged. On a section it resolves against the SECTION node,
+ * whose direct children are the seeded regions.
+ */
+function ZsaHeaderBareSlot() {
+  return (
+    <header>
+      <div data-testid="logo-area">
+        <ThemeRegion name="logo" />
+      </div>
+      <div data-testid="search-area">
+        <ThemeRegion name="search" label="Store search" />
+      </div>
+      <div data-testid="basket-area">
+        <ThemeRegion name="basket" />
+      </div>
+      <div data-testid="extras-area">
+        <ThemeSlot label="Extra header actions" />
+      </div>
+    </header>
+  );
+}
+
+const registerHeaderWithBareSlot = () =>
+  registerCustomSections('zsazsazsu', {
+    header: defineCustomSection(ZsaHeaderBareSlot, {
+      label: 'ZSA ZSA ZSU Header',
+      regions: [
+        { name: 'logo', label: 'Logo', block: 'image' },
+        { name: 'search', label: 'Store search', block: 'search-box' },
+        { name: 'basket', label: 'Basket', block: 'mini-basket' }
+      ],
+      slots: [{ label: 'Extra header actions' }],
+      lockRootTransforms: true
+    })
+  });
+
 const renderComposition = (section: Section, isDesigner = false) =>
   render(
     <ThemeSettingsProvider value={null}>
@@ -280,6 +321,35 @@ describe('the region blocks the editor actually seeds', () => {
     expect(childIdsIn('extras-area')).toEqual(['extras-child']);
   });
 
+  it('are never adopted by an unnamed slot the merchant has not opened', () => {
+    registerHeaderWithBareSlot();
+
+    // THE OTHER HALF OF THE ANTI-SLOT-FALLBACK INVARIANT, from the slot's side.
+    // The test above pins that a region never falls back to the section's
+    // direct children; this one pins that the slot's legacy fallback never
+    // claims them either. A merchant who has never opened the extras slot has
+    // no `custom-slot` node in the composition, so `resolveSlotChildren` takes
+    // that fallback — and every region is an ordinary block, invisible to
+    // `isSlotNode`. Without the region filter the whole header renders a second
+    // time inside the slot, with two `data-block-id` wrappers per region.
+    const neverOpened = composition();
+    neverOpened.blocks = neverOpened.blocks.filter(
+      (block) => block.id !== 'block-t6qz0'
+    );
+
+    renderComposition(neverOpened);
+
+    expect(childIdsIn('extras-area')).toEqual([]);
+    expect(childIdsIn('logo-area')).toEqual(['block-h3n1a']);
+    expect(childIdsIn('search-area')).toEqual(['block-k92rd']);
+    expect(childIdsIn('basket-area')).toEqual(['block-p47xv']);
+
+    // Counted across the whole render, not per area: the doubling this guards
+    // against puts the second copy somewhere the per-area assertions above
+    // cannot reach.
+    expect(screen.queryAllByTestId('region-child')).toHaveLength(3);
+  });
+
   it('are never spilled onto the page by a build that cannot draw the section', () => {
     const warn = jest
       .spyOn(console, 'warn')

package/src/custom/__tests__/slot-nodes.test.ts

@@ -6,6 +6,7 @@ import {
   slotNameError,
   slotNodeName
 } from '../slot-nodes';
+import { REGION_NAME_PROPERTY } from '../section-types';
 import { CUSTOM_SLOT_BLOCK_TYPE, SLOT_NAME_PROPERTY } from '../types';
 
 const block = (over: Partial<Block> = {}): Block => ({
@@ -27,6 +28,19 @@ const slotNode = (properties: Record<string, unknown>, blocks: Block[] = []) =>
     blocks
   });
 
+/**
+ * A seeded region as the editor writes one: an ORDINARY block of a real type
+ * carrying the reserved name property, NOT a reserved-type wrapper. That is
+ * precisely why `isSlotNode` cannot recognise it — see the region case below.
+ */
+const regionBlock = (name: string): Block =>
+  block({
+    id: `region-${name}`,
+    type: 'image',
+    label: name,
+    properties: { [REGION_NAME_PROPERTY]: name }
+  });
+
 describe('slotNodeName', () => {
   it('reads the bare string the editor stamps', () => {
     expect(slotNodeName(slotNode({ [SLOT_NAME_PROPERTY]: 'promo' }))).toBe(
@@ -90,6 +104,20 @@ describe('resolveSlotChildren', () => {
     expect(resolveSlotChildren(halfMigrated, '')).toEqual([inAside]);
   });
 
+  it('keeps the regions a section seeds out of the unnamed slot', () => {
+    // The legacy branch reads a host's direct children as the merchant's own
+    // content, which is true of a custom block and false of a custom section:
+    // there the host is the section and its direct children are its regions.
+    // Regions are ordinary blocks, so `isSlotNode` waves every one of them
+    // through and a bare `<ThemeSlot />` on a section would render the whole
+    // header a second time for shoppers.
+    const section = block({
+      blocks: [regionBlock('logo'), regionBlock('search'), inPromo]
+    });
+
+    expect(resolveSlotChildren(section, '')).toEqual([inPromo]);
+  });
+
   it('never falls back for a named slot', () => {
     // A named slot cannot have legacy content to find: naming one was refused
     // at define time before slots were nodes.

package/src/custom/slot-nodes.ts

@@ -1,4 +1,5 @@
 import type { Block } from '../theme-block';
+import { isRegionNode } from './region-nodes';
 import {
   CUSTOM_SLOT_BLOCK_TYPE,
   SLOT_NAME_PATTERN,
@@ -58,6 +59,20 @@ export const slotNodeName = (block: Block): string => {
  * unnamed one — a named slot was refused at define time, so it can have no
  * legacy content to find. Slot nodes are filtered out of that branch so a block
  * re-saved with nodes does not render another slot's content here as well.
+ *
+ * REGION BLOCKS ARE FILTERED OUT OF IT TOO, and the slot-node filter does not
+ * cover them. The legacy branch reads a host's direct children as the
+ * merchant's own content, which is true of a custom BLOCK and false of a custom
+ * SECTION: `ThemeSlot` resolves against whatever node the context carries, and
+ * for a section that is the section itself, whose direct children are its
+ * seeded regions. A region is an ORDINARY block carrying
+ * `properties.regionName` rather than a reserved type, so `isSlotNode` waves
+ * every one of them through — a section that renders a bare `<ThemeSlot />`
+ * would draw its whole region set a SECOND time inside the slot for shoppers,
+ * with two `data-block-id` wrappers answering to each region's id. Reaching
+ * across to `isRegionNode` costs one import and both modules are
+ * directive-free, so nothing about the client boundary changes;
+ * `region-nodes.ts` states the same asymmetry from its own side.
  */
 export const resolveSlotChildren = (
   block: Block,
@@ -71,7 +86,10 @@ export const resolveSlotChildren = (
 
   if (node) return node.blocks ?? [];
 
-  if (name === '') return children.filter((child) => !isSlotNode(child));
+  if (name === '')
+    return children.filter(
+      (child) => !isSlotNode(child) && !isRegionNode(child)
+    );
 
   return null;
 };