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

package/CHANGELOG.md

@@ -1,36 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.70-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- 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 [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.70-rc.0
-  - @akinon/theme-contract@2.0.70-rc.0
+## 2.0.70
+
+### Patch Changes
+
+- 93a05ef: ZERO-4856: Enhance GroupBlock to use Next.js Link for internal navigation and add bfcache reload listener in ThemePlaceholderWrapper
+  - @akinon/next@2.0.70
+  - @akinon/theme-contract@2.0.70
 
 ## 2.0.69
 

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

package/src/blocks/group-block.tsx

@@ -1,10 +1,22 @@
 import React from 'react';
+import NextLink from 'next/link';
 import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
+
+/**
+ * Composed anchors to the storefront's own routes navigate client-side. A
+ * plain <a> makes every product-card click a full page load, and coming BACK
+ * from it re-enters through the browser's history cache, where client-fetched
+ * composition data (wishlist context, carousel items) does not reliably
+ * survive. Router navigation keeps the app state alive in both directions.
+ * External hrefs keep the plain anchor — the router cannot take those anyway.
+ */
+const isInternalHref = (href: unknown): href is string =>
+  typeof href === 'string' && href.startsWith('/') && !href.startsWith('//');
 const GroupBlock = ({
   block,
   placeholderId,
@@ -24,7 +36,8 @@ const GroupBlock = ({
   const tagProps: Record<string, unknown> = {
     className: 'contents'
   };
-  if (tag === 'a' && href) {
+  const useRouterLink = tag === 'a' && !isDesigner && isInternalHref(href);
+  if (tag === 'a' && href && !useRouterLink) {
     tagProps.href = href;
   }
   if (tag === 'form') {
@@ -55,9 +68,7 @@ const GroupBlock = ({
     );
   }
 
-  return (
-    <Tag {...tagProps}>
-      {block.blocks
+  const renderedChildren = block.blocks
         .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
         .sort((a, b) => (a.order || 0) - (b.order || 0))
         .map((childBlock, index) => {
@@ -109,9 +120,17 @@ const GroupBlock = ({
               onRename={handleRename}
             />
           );
-        })}
-    </Tag>
-  );
+        });
+
+  if (useRouterLink) {
+    return (
+      <NextLink href={href as string} prefetch={false} className="contents">
+        {renderedChildren}
+      </NextLink>
+    );
+  }
+
+  return <Tag {...tagProps}>{renderedChildren}</Tag>;
 };
 
 export default GroupBlock;

package/src/theme-placeholder-wrapper.tsx

@@ -24,6 +24,9 @@ import { parseEditorMessage, postToEditor } from './editor-bridge';
 import { useBrowseMode } from './browse-mode';
 import { neutralizeStyleTagBreakout } from './utils/css-safety';
 
+// One pageshow listener per page, not per placeholder — see the effect below.
+let bfcacheReloadListenerArmed = false;
+
 // Helper function to inject theme colors as CSS custom properties
 const injectThemeColors = (settings: Record<string, unknown>) => {
   if (!settings) return;
@@ -339,6 +342,29 @@ export default function ThemePlaceholderWrapper({
   // visibility rules apply) without disturbing anything above.
   const isBrowseMode = useBrowseMode();
   const isEditing = isDesigner && !isBrowseMode;
+
+  // A bfcache restore resumes the frozen page instead of loading it: the
+  // client-fetched composition data (wishlist page context, carousel items)
+  // does not reliably survive the freeze, and the page comes back with its
+  // data-driven sections blank until a manual refresh. Reloading once on a
+  // persisted pageshow trades the bfcache speedup for a page that is correct.
+  // Guarded at module level — a page hosts several placeholders and one
+  // listener is enough.
+  useEffect(() => {
+    if (isDesigner) return;
+    if (bfcacheReloadListenerArmed) return;
+    bfcacheReloadListenerArmed = true;
+
+    const onPageShow = (event: PageTransitionEvent) => {
+      if (event.persisted) window.location.reload();
+    };
+
+    window.addEventListener('pageshow', onPageShow);
+    return () => {
+      window.removeEventListener('pageshow', onPageShow);
+      bfcacheReloadListenerArmed = false;
+    };
+  }, [isDesigner]);
   const [dataSources, setDataSources] = useState<any[]>(initialDataSources);
   const [themeSettings, setThemeSettings] = useState<Record<
     string,