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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.139-beta.0
+## 2.0.139
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.139-beta.0
-  - @akinon/theme-contract@2.0.139-beta.0
+- 1bd9583: ZERO-5188: Refuse to render an anchor inside another anchor
+  - @akinon/next@2.0.139
+  - @akinon/theme-contract@2.0.139
 
 ## 2.0.138
 

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

package/src/blocks/__tests__/link-block-interactive-nesting.test.tsx

@@ -248,10 +248,10 @@ describe('interactive nesting', () => {
     expect(html).toContain('<button type="button" data-block-id="cta"');
   });
 
-  it('still catches the nesting when neither link acts', () => {
-    // Guards the guard. With no action the root is an anchor again, and a
-    // nested link is the original defect — which only the descendant-side
-    // guard can fix, not the root element choice.
+  it('refuses to nest an anchor when neither link acts', () => {
+    // The original defect: with no action the root is a real anchor again,
+    // and the merchant nested a second link inside it. The descendant guard
+    // in ThemeLink is what covers this one — the root element choice cannot.
     const html = renderToStaticMarkup(
       <LinkBlock
         {...props({
@@ -261,7 +261,13 @@ describe('interactive nesting', () => {
       />
     );
 
-    expect(invalidNestings(html)).toContain('a-in-a');
+    expect(invalidNestings(html)).toEqual([]);
+    // The outer link keeps the destination: it is what a shopper aims at and
+    // what a crawler should follow.
+    expect(html).toContain('href="/koleksiyonlar/"');
+    // The inner one degraded rather than disappearing.
+    expect(html).toContain('data-nested-link');
+    expect((html.match(/<a /g) ?? []).length).toBe(1);
   });
 
   it('detects button-in-button, so the native-button root cannot come back', () => {

package/src/blocks/link-block.tsx

@@ -207,6 +207,12 @@ const LinkBlock = ({
         rel={isDesigner ? undefined : rel}
         {...rootProps}
       >
+        {/*
+         * No anchor guard needed here: `ThemeLink` declares the open anchor
+         * for its own subtree, so every link in the package is covered at
+         * one place. The action branch above renders a span, which can
+         * legally hold a link, and correctly declares nothing.
+         */}
         {children}
       </NextLink>
     );

package/src/components/interactive-ancestor.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { createContext, useContext } from 'react';
+
+/**
+ * Whether an anchor is already open above this point in the composed tree.
+ *
+ * `<a>` is an HTML formatting element: an anchor nested inside another is not
+ * merely invalid, the parser REPARENTS it, so the DOM the browser builds stops
+ * matching the markup react-dom streamed. With no Suspense boundary over
+ * composed content React 18 answers that mismatch by client-rendering the
+ * whole document — one nested link a merchant dragged into a card takes the
+ * entire page down.
+ *
+ * A composition is authored, not written, so the renderer cannot assume the
+ * shape is legal. This context lets the anchor that is already open say so,
+ * and `components/theme-link.tsx` — the one place every link in the package
+ * goes through — renders something that is not an anchor instead.
+ *
+ * Only ANCHORS provide it. A `<span role="button">` action root may hold a
+ * real link, and `<a>` inside `<button>` is not reparented either; the pair
+ * that breaks is anchor-in-anchor (and button-in-button, which the package
+ * cannot author because no button-rooted block renders child blocks).
+ */
+const AnchorAncestorContext = createContext(false);
+
+/** True when the nearest composed ancestor already rendered an `<a>`. */
+export const useInsideAnchor = (): boolean => useContext(AnchorAncestorContext);
+
+/**
+ * Wrap the CHILDREN of an element that is a real anchor. Rendered from the
+ * same branch that chose the anchor, so the signal always describes the
+ * element that actually shipped rather than the block's type — a link block
+ * performing an action renders a span and must not claim an anchor is open.
+ */
+export const AnchorAncestor = ({
+  children
+}: {
+  children: React.ReactNode;
+}): React.ReactElement => (
+  <AnchorAncestorContext.Provider value={true}>
+    {children}
+  </AnchorAncestorContext.Provider>
+);
+
+export default AnchorAncestor;

package/src/components/theme-link.tsx

@@ -3,6 +3,7 @@
 import React, { forwardRef } from 'react';
 import NextLink from 'next/link';
 import { useLocalizeHref } from '../hooks/use-localize-href';
+import { AnchorAncestor, useInsideAnchor } from './interactive-ancestor';
 
 type ThemeLinkProps = React.ComponentPropsWithoutRef<typeof NextLink>;
 
@@ -28,18 +29,85 @@ type ThemeLinkProps = React.ComponentPropsWithoutRef<typeof NextLink>;
  * prefetching them is paid once per click by the shopper who actually
  * navigates. `prefetch` is still a prop: a caller that measured its own case
  * can pass `true`.
+ *
+ * INSIDE ANOTHER ANCHOR IT IS NOT AN ANCHOR (ZERO-5188). Every link in the
+ * package comes through here, so this is the one place that can refuse to
+ * nest one. See `components/interactive-ancestor.tsx` for why a nested anchor
+ * costs the whole document.
  */
 export const ThemeLink = forwardRef<HTMLAnchorElement, ThemeLinkProps>(
   function ThemeLink({ href, prefetch = false, ...rest }, ref) {
     const localize = useLocalizeHref();
+    const insideAnchor = useInsideAnchor();
+
+    const resolved = typeof href === 'string' ? localize(href) : href;
+
+    if (insideAnchor) {
+      const { target, rel, onClick, children, ...spanProps } = rest;
+
+      /**
+       * The destination survives as a real navigation, so the shopper still
+       * gets where they were going. `window.location` rather than the router:
+       * a hook here would make every block test that renders a link need an
+       * app-router context, and this path is the rare one — the OUTER link is
+       * the card a shopper aims at, this is the control nested inside it.
+       *
+       * Middle click, the context menu and crawling are the real loss. Both
+       * authored examples put something redundant here (a decorative icon
+       * with `href="#"`, a read-more pointing at the post the card already
+       * links to), so the outer anchor keeps the destination that matters.
+       */
+      const go = () => {
+        if (typeof window === 'undefined') return;
+
+        const to = typeof resolved === 'string' ? resolved : undefined;
+        if (!to || to === '#') return;
+
+        if (target === '_blank') {
+          window.open(to, '_blank', rel || 'noopener noreferrer');
+          return;
+        }
+
+        window.location.assign(to);
+      };
+
+      return (
+        <span
+          // Not `role="link"`: that would announce a link the keyboard cannot
+          // follow the way a link is followed, and it is already inside one.
+          // The element stays styleable and clickable, and the ancestor
+          // anchor still describes the destination.
+          ref={ref as unknown as React.Ref<HTMLSpanElement>}
+          data-nested-link=""
+          onClick={(event: React.MouseEvent<HTMLSpanElement>) => {
+            onClick?.(
+              event as unknown as React.MouseEvent<HTMLAnchorElement, MouseEvent>
+            );
+            if (event.defaultPrevented) return;
+            // The ancestor anchor would otherwise navigate to its own href.
+            event.preventDefault();
+            event.stopPropagation();
+            go();
+          }}
+          {...(spanProps as React.HTMLAttributes<HTMLSpanElement>)}
+        >
+          {children}
+        </span>
+      );
+    }
+
+    const { children, ...anchorProps } = rest;
 
     return (
-      <NextLink
-        ref={ref}
-        href={typeof href === 'string' ? localize(href) : href}
-        prefetch={prefetch}
-        {...rest}
-      />
+      <NextLink ref={ref} href={resolved} prefetch={prefetch} {...anchorProps}>
+        {/*
+         * Both sides of the rule live here, which is why there is no
+         * per-block contract to keep: this is the only element in the
+         * package that is a real anchor, so it is also the only one that has
+         * to tell its subtree one is open.
+         */}
+        <AnchorAncestor>{children}</AnchorAncestor>
+      </NextLink>
     );
   }
 );