@akinon/pz-theme 2.0.97-rc.0 → 2.0.97

package/CHANGELOG.md

@@ -1,38 +1,15 @@
 # @akinon/pz-theme
 
-## 2.0.97-rc.0
-
-### Patch Changes
-
-- Updated dependencies [86187b1c]
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea41430]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb305]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a714]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d06]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [e9598c71d]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6c]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a631]
-- Updated dependencies [e18836b20]
-- Updated dependencies [b1111d7b]
-  - @akinon/next@2.0.97-rc.0
-  - @akinon/theme-contract@2.0.97-rc.0
+## 2.0.97
+
+### Patch Changes
+
+- d4fe7b15: ZERO-5013: Hide the empty Group block placeholder from shoppers
+
+  An empty `group` rendered the literal string "Empty group block" on the live storefront with no designer guard. Every shipped section layout template seeds its columns with `blocks: []`, so a half-filled layout leaked grey debug text to real visitors. The chip now only draws on the canvas, matching `ContainerBlock`; the storefront keeps the group's own element (`display: contents`) so an `<a>` or `<form>` group survives being empty.
+
+  - @akinon/next@2.0.97
+  - @akinon/theme-contract@2.0.97
 
 ## 2.0.96
 

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

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

@@ -87,21 +87,60 @@ describe('GroupBlock — ordering', () => {
 });
 
 describe('GroupBlock — empty states', () => {
-  it('renders the "Empty group block" placeholder when there are no children', () => {
+  it('shows the designer placeholder when there are no children', () => {
     const block = { ...props().block, blocks: [] };
-    const { container } = render(<GroupBlock {...props({ block })} />);
-    expect(container.textContent).toContain('Empty group block');
+    const { container } = render(
+      <GroupBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(container.textContent).toContain('Group (drop blocks here)');
+    expect(
+      container.querySelector('[data-group-placeholder]')
+    ).toBeInTheDocument();
     expect(markers(container)).toHaveLength(0);
   });
 
+  /*
+   * Every shipped layout template seeds its columns with `blocks: []`, so a
+   * half-filled layout section put this branch straight in front of real
+   * shoppers. Nothing about it may be readable.
+   */
+  it('shows a shopper no debug text at all when there are no children', () => {
+    const block = { ...props().block, blocks: [] };
+    const { container } = render(
+      <GroupBlock {...props({ block, isDesigner: false })} />
+    );
+    expect(container.textContent).toBe('');
+    expect(
+      container.querySelector('[data-theme-block-placeholder]')
+    ).toBeNull();
+  });
+
+  it.each([
+    ['a', { tag: 'a', href: 'https://kargotakip.example.com' }, 'A'],
+    ['form', { tag: 'form' }, 'FORM']
+  ])(
+    'keeps the group element on the storefront so an empty <%s> survives',
+    (_name, properties, expectedTag) => {
+      const block = { ...props().block, blocks: [], properties };
+      const { container } = render(
+        <GroupBlock {...props({ block, isDesigner: false })} />
+      );
+      const wrapper = container.querySelector('.contents') as HTMLElement;
+      expect(wrapper.tagName).toBe(expectedTag);
+      expect(wrapper).toBeEmptyDOMElement();
+    }
+  );
+
   it('renders an empty tag (no placeholder text) for visual-utility groups', () => {
     const block = {
       ...props().block,
       blocks: [],
       properties: { shippingRole: 'progress-fill' }
     };
-    const { container } = render(<GroupBlock {...props({ block })} />);
-    expect(container.textContent).not.toContain('Empty group block');
+    const { container } = render(
+      <GroupBlock {...props({ block, isDesigner: true })} />
+    );
+    expect(container.textContent).toBe('');
     expect(container.querySelector('.contents')).toBeInTheDocument();
   });
 });

package/src/blocks/group-block.tsx

@@ -7,7 +7,7 @@ import {
   readItemsCurrency
 } from '../utils/analytics';
 import { BlockRendererProps } from './block-renderer-registry';
-import { useThemeItemScope } from './product-block-utils';
+import { DesignerPlaceholder, useThemeItemScope } from './product-block-utils';
 import { renderComposedChildren } from './render-composed-children';
 
 /**
@@ -83,8 +83,28 @@ const GroupBlock = ({
       return <Tag {...tagProps} />;
     }
 
+    /*
+     * Empty is a legitimate PUBLISHED state, not a mistake to shout about:
+     * every shipped layout template seeds its columns with `blocks: []`, so a
+     * half-filled layout used to leak grey debug text to real shoppers. The
+     * chip belongs behind the designer guard, the way ContainerBlock's does.
+     *
+     * The live branch still renders the tag rather than returning null. The
+     * tag is `display: contents`, so an empty one draws nothing either way,
+     * but it is the group's only element: `tag` can make it an `<a>` or a
+     * `<form>`, and a brand's CSS or script written against that element
+     * would lose it. Keeping it makes the empty case a true no-op instead of
+     * a structural change, and matches the visual-utility branch above.
+     */
     return (
-      <div style={{ padding: '20px', color: '#6b7280' }}>Empty group block</div>
+      <Tag {...tagProps}>
+        {isDesigner ? (
+          <DesignerPlaceholder
+            label="Group (drop blocks here)"
+            attribute="data-group-placeholder"
+          />
+        ) : null}
+      </Tag>
     );
   }
 

package/src/custom/theme-slot.tsx

@@ -103,10 +103,12 @@ const releaseSlot = (
  *
  * EMPTY BEHAVES DIFFERENTLY PER SIDE. The designer draws a dashed band so the
  * hole is visible and droppable; the live storefront renders nothing at all.
- * That distinction is the whole point of the split — the empty branch of
- * `GroupBlock` (blocks/group-block.tsx) still ships the literal string
- * "Empty group block" to shoppers, which is exactly the outcome this must
- * not repeat.
+ * That distinction is the whole point of the split, and it is the rule across
+ * the package rather than a local habit: the empty branches of `GroupBlock`
+ * and `ContainerBlock` (blocks/) put their chip behind the same guard, after
+ * `GroupBlock` was found shipping a literal "Empty group block" string to
+ * shoppers (ZERO-5013). A placeholder that is not guarded is a live defect,
+ * not a rough edge.
  */
 export function ThemeSlot({ label, name }: ThemeSlotProps) {
   const context = useCustomBlockContext();