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

package/CHANGELOG.md

@@ -1,36 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.45-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea23]
-- Updated dependencies [324f97d5]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08f]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f4]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1]
-- Updated dependencies [e9598c71]
-- Updated dependencies [4998a963]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b2]
-  - @akinon/next@2.0.45-rc.0
-  - @akinon/theme-contract@2.0.45-rc.0
+## 2.0.45
+
+### Patch Changes
+
+- cd66ce0: ZERO-4736: Hold chrome overlays open in the designer canvas so their open states can be styled
+  - @akinon/next@2.0.45
+  - @akinon/theme-contract@2.0.45
 
 ## 2.0.44
 

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

package/src/blocks/__tests__/force-open.test.tsx

@@ -0,0 +1,378 @@
+import React from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+  usePathname: () => '/',
+  useSearchParams: () => new URLSearchParams('')
+}));
+
+// Nested fixture: buildTree consumes it as-is, the flat consumers read
+// `children` directly. "Sale" first so the forced pin has to SKIP an entry
+// that yields no panel and land on the first one that does.
+const mockMenu = [
+  { pk: 3, label: 'Sale', url: '/sale', children: [] },
+  {
+    pk: 1,
+    label: 'Women',
+    url: '/women',
+    children: [{ pk: 2, label: 'Shoes', url: '/women/shoes', children: [] }]
+  }
+];
+
+// The hamburger drawer gates its fetch on being open, so the mock honours
+// `skip` — a forced drawer that forgot to unskip would render zero rows here.
+jest.mock('@akinon/next/data/client/misc', () => ({
+  useGetMenuQuery: (_args: unknown, options?: { skip?: boolean }) =>
+    options?.skip
+      ? {
+          data: undefined,
+          isLoading: false,
+          isFetching: false,
+          isSuccess: false,
+          isError: false
+        }
+      : {
+          data: mockMenu,
+          isLoading: false,
+          isFetching: false,
+          isSuccess: true,
+          isError: false
+        }
+}));
+
+// Stub the recursive ThemeBlock (default export) with a countable marker.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import SearchBoxBlock from '../search-box-block';
+import HamburgerMenuBlock from '../hamburger-menu-block';
+import MegaMenuBlock from '../mega-menu-block';
+import NavMenuBlock from '../nav-menu-block';
+import HotspotBlock from '../hotspot-block';
+import { PartStatePreview } from '../../components/part-state-preview';
+
+const mkBlock = (
+  type: string,
+  properties: Record<string, unknown> = {},
+  styles: Record<string, unknown> = {}
+) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles,
+    blocks: []
+  } as never);
+
+const blockProps = {
+  placeholderId: 'p',
+  sectionId: 's',
+  currentBreakpoint: 'desktop'
+};
+
+const pin = (blockId: string, partName: string, state: string | null) =>
+  act(() => {
+    window.dispatchEvent(
+      new MessageEvent('message', {
+        data: {
+          type: 'PREVIEW_PART_STATE',
+          data: { blockId, partName, state }
+        }
+      })
+    );
+  });
+
+describe('SearchBoxBlock under force-open', () => {
+  const renderBox = (isDesigner: boolean, styles: Record<string, unknown>) =>
+    render(
+      <SearchBoxBlock
+        block={mkBlock('search-box', {}, styles)}
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('mounts the overlay panel with no interaction in the designer', () => {
+    renderBox(true, { forceOpen: true });
+
+    const panel = document.querySelector('[data-search-overlay]');
+    expect(panel).toBeInTheDocument();
+    expect(panel).toHaveAttribute('data-part', 'panel');
+    expect(panel).toHaveAttribute('data-state', 'open');
+    // The trigger reports the effective state, exactly as a real open would.
+    expect(document.querySelector('[data-part="trigger"]')).toHaveAttribute(
+      'data-state',
+      'open'
+    );
+  });
+
+  it('leaves the panel mounted when the close button is clicked', () => {
+    renderBox(true, { forceOpen: true });
+
+    fireEvent.click(document.querySelector('[data-search-close]') as Element);
+
+    expect(document.querySelector('[data-search-overlay]')).toBeInTheDocument();
+    expect(document.querySelector('[data-part="trigger"]')).toHaveAttribute(
+      'data-state',
+      'open'
+    );
+  });
+
+  it('leaves the panel mounted when the trigger is clicked again', () => {
+    renderBox(true, { forceOpen: true });
+
+    fireEvent.click(document.querySelector('[data-part="trigger"]') as Element);
+
+    expect(document.querySelector('[data-search-overlay]')).toBeInTheDocument();
+  });
+
+  it('lets a pin match the force-mounted panel with no click', () => {
+    render(
+      <div data-block-id="search-box-1">
+        <PartStatePreview isDesigner />
+        <SearchBoxBlock
+          block={mkBlock('search-box', {}, { forceOpen: true })}
+          isDesigner
+          {...blockProps}
+        />
+      </div>
+    );
+
+    pin('search-box-1', 'panel', 'open');
+
+    const panel = document.querySelector('[data-search-overlay]');
+    expect(panel).toHaveAttribute('data-part-state-preview', 'open');
+    expect(panel?.getAttribute('data-state')).toContain('open');
+  });
+
+  it('ignores forceOpen on the storefront, byte for byte', () => {
+    const forced = renderBox(false, { forceOpen: true });
+    const forcedHtml = forced.container.innerHTML;
+    forced.unmount();
+
+    const plain = renderBox(false, {});
+
+    expect(document.querySelector('[data-search-overlay]')).toBeNull();
+    expect(forcedHtml).toBe(plain.container.innerHTML);
+  });
+});
+
+describe('HamburgerMenuBlock under force-open', () => {
+  const renderMenu = (isDesigner: boolean, styles: Record<string, unknown>) =>
+    render(
+      <HamburgerMenuBlock
+        block={mkBlock('hamburger-menu', {}, styles)}
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('mounts the drawer with its item rows and no interaction', () => {
+    renderMenu(true, { forceOpen: true });
+
+    const drawer = document.querySelector('[data-hamburger-panel]');
+    expect(drawer).toBeInTheDocument();
+    expect(drawer).toHaveAttribute('data-state', 'open');
+    // The menu fetch is unskipped under force, so the rows exist to style.
+    expect(screen.getByText('Women')).toBeInTheDocument();
+  });
+
+  it('leaves the drawer mounted when the backdrop is clicked', () => {
+    renderMenu(true, { forceOpen: true });
+
+    fireEvent.click(
+      document.querySelector('[data-hamburger-overlay]') as Element
+    );
+
+    expect(
+      document.querySelector('[data-hamburger-panel]')
+    ).toBeInTheDocument();
+  });
+
+  it('leaves the drawer mounted when the close button is clicked', () => {
+    renderMenu(true, { forceOpen: true });
+
+    fireEvent.click(
+      document.querySelector('[data-hamburger-close]') as Element
+    );
+
+    expect(
+      document.querySelector('[data-hamburger-panel]')
+    ).toBeInTheDocument();
+  });
+
+  it('ignores forceOpen on the storefront, byte for byte', () => {
+    const forced = renderMenu(false, { forceOpen: true });
+    const forcedHtml = forced.container.innerHTML;
+    forced.unmount();
+
+    const plain = renderMenu(false, {});
+
+    expect(document.querySelector('[data-hamburger-panel]')).toBeNull();
+    expect(forcedHtml).toBe(plain.container.innerHTML);
+  });
+});
+
+describe('MegaMenuBlock under force-open', () => {
+  const renderMenu = (
+    isDesigner: boolean,
+    styles: Record<string, unknown>,
+    properties: Record<string, unknown> = {}
+  ) =>
+    render(
+      <MegaMenuBlock
+        block={mkBlock('mega-menu', properties, styles)}
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('pins open the first entry that yields a panel, with no interaction', () => {
+    renderMenu(true, { forceOpen: true });
+
+    const panel = document.querySelector('[data-mega-menu-panel]');
+    expect(panel).toBeInTheDocument();
+    // "Sale" has no children and no promo, so the pin lands on "Women".
+    expect(screen.getByText('Shoes')).toBeInTheDocument();
+  });
+
+  it('does not close when the pointer leaves for the editor UI', () => {
+    jest.useFakeTimers();
+    try {
+      renderMenu(true, { forceOpen: true });
+
+      fireEvent.mouseLeave(document.querySelector('[data-mega-menu]') as Element);
+      act(() => {
+        jest.advanceTimersByTime(2000);
+      });
+
+      expect(
+        document.querySelector('[data-mega-menu-panel]')
+      ).toBeInTheDocument();
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('keeps the panel open when the open entry is clicked in click mode', () => {
+    renderMenu(true, { forceOpen: true }, { trigger: 'click' });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Women' }));
+
+    expect(
+      document.querySelector('[data-mega-menu-panel]')
+    ).toBeInTheDocument();
+  });
+
+  it('ignores forceOpen on the storefront, byte for byte', () => {
+    const forced = renderMenu(false, { forceOpen: true });
+    const forcedHtml = forced.container.innerHTML;
+    forced.unmount();
+
+    const plain = renderMenu(false, {});
+
+    expect(document.querySelector('[data-mega-menu-panel]')).toBeNull();
+    expect(forcedHtml).toBe(plain.container.innerHTML);
+  });
+});
+
+describe('NavMenuBlock under force-open', () => {
+  const renderMenu = (
+    isDesigner: boolean,
+    styles: Record<string, unknown>,
+    properties: Record<string, unknown> = { showSubmenu: true }
+  ) =>
+    render(
+      <NavMenuBlock
+        block={mkBlock('nav-menu', properties, styles)}
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('pins open the first submenu-bearing entry with no interaction', () => {
+    renderMenu(true, { forceOpen: true });
+
+    const submenu = document.querySelector('[data-nav-submenu]');
+    expect(submenu).toBeInTheDocument();
+    expect(submenu).toHaveAttribute('data-state', 'open');
+    expect(screen.getByText('Shoes')).toBeInTheDocument();
+  });
+
+  it('does not close when the pointer leaves the pinned entry', () => {
+    renderMenu(true, { forceOpen: true });
+
+    fireEvent.mouseLeave(
+      document.querySelector('[data-nav-item-wrapper]') as Element
+    );
+
+    expect(document.querySelector('[data-nav-submenu]')).toBeInTheDocument();
+  });
+
+  it('cannot conjure a submenu the composition turned off', () => {
+    renderMenu(true, { forceOpen: true }, {});
+
+    expect(document.querySelector('[data-nav-submenu]')).toBeNull();
+  });
+
+  it('ignores forceOpen on the storefront, byte for byte', () => {
+    const forced = renderMenu(false, { forceOpen: true });
+    const forcedHtml = forced.container.innerHTML;
+    forced.unmount();
+
+    const plain = renderMenu(false, {});
+
+    expect(document.querySelector('[data-nav-submenu]')).toBeNull();
+    expect(forcedHtml).toBe(plain.container.innerHTML);
+  });
+});
+
+describe('HotspotBlock under force-open', () => {
+  const renderHotspot = (isDesigner: boolean, styles: Record<string, unknown>) =>
+    render(
+      <HotspotBlock
+        block={mkBlock('hotspot', { title: 'Hot Title' }, styles)}
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('mounts the popup with no interaction in the designer', () => {
+    renderHotspot(true, { forceOpen: true });
+
+    expect(screen.getByText('Hot Title')).toBeInTheDocument();
+  });
+
+  it('leaves the popup mounted when the close button is clicked', () => {
+    const { container } = renderHotspot(true, { forceOpen: true });
+
+    fireEvent.click(
+      container.querySelector('.text-gray-400') as Element
+    );
+
+    expect(screen.getByText('Hot Title')).toBeInTheDocument();
+  });
+
+  it('resolves a responsive value instead of a raw truthy read', () => {
+    // `{ desktop: false }` is a truthy OBJECT: the old raw check would have
+    // mounted the popup for a value the designer explicitly turned off.
+    renderHotspot(true, { forceOpen: { desktop: false } });
+
+    expect(screen.queryByText('Hot Title')).not.toBeInTheDocument();
+  });
+
+  it('ignores forceOpen on the storefront', () => {
+    renderHotspot(false, { forceOpen: true });
+
+    expect(screen.queryByText('Hot Title')).not.toBeInTheDocument();
+  });
+});

package/src/blocks/hamburger-menu-block.tsx

@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 import NextLink from 'next/link';
 import { useGetMenuQuery } from '@akinon/next/data/client/misc';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { useOverlay } from '../hooks/use-overlay';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
@@ -51,6 +51,11 @@ const HamburgerMenuBlock = ({
   const [open, setOpen] = useState(false);
   const [expanded, setExpanded] = useState<string[]>([]);
 
+  // Designer-only: hold the drawer mounted so its open state can be styled.
+  // Backdrop, close button and navigation stay rendered but never unmount it.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
+
   const depth = Number(
     getResponsiveValue(block.properties?.depth, currentBreakpoint, 2)
   );
@@ -153,7 +158,8 @@ const HamburgerMenuBlock = ({
       depth: Number.isFinite(depth) && depth > 0 ? depth : 2,
       ...(parent ? { parent } : {})
     } as Parameters<typeof useGetMenuQuery>[0],
-    { skip: !open }
+    // The forced drawer must fetch too, or it renders with zero item rows.
+    { skip: !(open || forcedOpen) }
   );
 
   const allItems: MenuItemLike[] = Array.isArray(menu) ? menu : [];
@@ -204,7 +210,7 @@ const HamburgerMenuBlock = ({
   // page they are editing, so every drawer link is inert there.
   const handleNavigate = (event: React.MouseEvent) => {
     if (isDesigner) event.preventDefault();
-    if (closeOnNavigate) setOpen(false);
+    if (closeOnNavigate && !forcedOpen) setOpen(false);
   };
 
   // A designer who marked a child as the row layout gets that layout repeated
@@ -233,9 +239,9 @@ const HamburgerMenuBlock = ({
       <button
         type="button"
         data-hamburger-menu=""
-        {...partAttrs('trigger', { open })}
+        {...partAttrs('trigger', { open: open || forcedOpen })}
         aria-label={ariaLabel}
-        aria-expanded={open}
+        aria-expanded={open || forcedOpen}
         onClick={() => setOpen(true)}
         style={{
           display: 'inline-flex',
@@ -268,7 +274,7 @@ const HamburgerMenuBlock = ({
         )}
       </button>
 
-      {open && (
+      {(open || forcedOpen) && (
         <div
           data-hamburger-drawer=""
           style={{ position: 'fixed', inset: 0, zIndex: 1000 }}
@@ -277,7 +283,10 @@ const HamburgerMenuBlock = ({
             <div
               data-hamburger-overlay=""
               {...partAttrs('overlay')}
-              onClick={() => setOpen(false)}
+              onClick={() => {
+                if (forcedOpen) return;
+                setOpen(false);
+              }}
               style={{
                 position: 'absolute',
                 inset: 0,
@@ -317,7 +326,10 @@ const HamburgerMenuBlock = ({
                   aria-label={closeLabel}
                   data-hamburger-close=""
                   {...partAttrs('close')}
-                  onClick={() => setOpen(false)}
+                  onClick={() => {
+                    if (forcedOpen) return;
+                    setOpen(false);
+                  }}
                   style={{
                     background: 'none',
                     border: 'none',

package/src/blocks/hotspot-block.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 import { BlockRendererProps } from './block-renderer-registry';
-import { getResponsiveValue, getCSSStyles } from '../utils';
+import { getResponsiveValue, getCSSStyles, resolveForceOpen } from '../utils';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { useLocalization } from '@akinon/next/hooks';
 import ThemeBlock from '../theme-block';
@@ -24,6 +24,10 @@ const HotspotBlock = ({
   const styles = block.styles || {};
   const properties = block.properties || {};
 
+  // Designer-only: hold the popup mounted so its open state can be styled.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(styles, currentBreakpoint);
+
   const getLocalizedContent = (content: any): string => {
     if (typeof content === 'string') return content;
     if (typeof content === 'object' && content !== null) {
@@ -102,13 +106,14 @@ const HotspotBlock = ({
         ></span>
       </button>
 
-      {(isOpen || (isDesigner && styles.forceOpen)) && (
+      {(isOpen || forcedOpen) && (
         <div className="absolute left-1/2 bottom-full mb-2 -translate-x-1/2 w-64 bg-white p-4 rounded-lg shadow-xl z-20 text-left text-sm pointer-events-auto">
           <div className="flex justify-between items-start mb-2">
             {title && <h3 className="font-bold text-gray-900">{title}</h3>}
             <button
               onClick={(e) => {
                 e.stopPropagation();
+                if (forcedOpen) return;
                 setIsOpen(false);
               }}
               className="text-gray-400 hover:text-gray-600"

package/src/blocks/mega-menu-block.tsx

@@ -10,7 +10,7 @@ import React, {
 import NextLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useGetMenuQuery } from '@akinon/next/data/client/misc';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { useOverlay } from '../hooks/use-overlay';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
@@ -326,6 +326,19 @@ const MegaMenuBlock = ({
   );
   const items = maxItems > 0 ? allItems.slice(0, maxItems) : allItems;
 
+  // Designer-only: pin a panel open so its open state can be styled. The
+  // first item that actually yields a panel (children, hence renderPanel is
+  // not null) is pinned by default; hover/click may switch WHICH item is
+  // open but never close them all.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
+  const forcedKey =
+    forcedOpen && openKey === null
+      ? (items.find((item) => item.children.length > 0) ?? items[0])?.key ??
+        null
+      : null;
+  const effectiveOpenKey = openKey ?? forcedKey;
+
   const clearTimers = useCallback(() => {
     if (openTimer.current) clearTimeout(openTimer.current);
     if (closeTimer.current) clearTimeout(closeTimer.current);
@@ -365,6 +378,9 @@ const MegaMenuBlock = ({
   };
 
   const scheduleClose = () => {
+    // While forced, the pointer leaving for the editor UI must not close the
+    // pinned panel — switching items stays live, closing them all does not.
+    if (forcedOpen) return;
     clearTimers();
     closeTimer.current = setTimeout(() => setOpenKey(null), closeDelay);
   };
@@ -641,7 +657,7 @@ const MegaMenuBlock = ({
         }}
       >
         {items.map((item) => {
-          const open = openKey === item.key;
+          const open = effectiveOpenKey === item.key;
           const highlighted = isHighlighted(item.label);
           const current = isCurrent(item.url);
           const entryStyle: React.CSSProperties = {
@@ -670,6 +686,7 @@ const MegaMenuBlock = ({
                 setOpenKey(item.key);
               }}
               onBlur={(event) => {
+                if (forcedOpen) return;
                 if (
                   !event.currentTarget.contains(event.relatedTarget as Node)
                 ) {
@@ -683,7 +700,11 @@ const MegaMenuBlock = ({
                   type="button"
                   aria-expanded={open}
                   {...partAttrs('item', { open, selected: current })}
-                  onClick={() => setOpenKey(open ? null : item.key)}
+                  onClick={() =>
+                    // While forced, clicking the open entry keeps it open:
+                    // switching is allowed, closing them all is not.
+                    setOpenKey(open && !forcedOpen ? null : item.key)
+                  }
                   style={entryStyle}
                 >
                   {item.label}

package/src/blocks/nav-menu-block.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import NextLink from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useGetMenuQuery } from '@akinon/next/data/client/misc';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
 import { readToggle } from './product-block-utils';
@@ -145,6 +145,20 @@ const NavMenuBlock = ({
       ? allItems.slice(0, Math.round(maxItems))
       : allItems;
 
+  // Designer-only: pin a submenu open so its open state can be styled. The
+  // first item with children is pinned by default; hover/click may switch
+  // WHICH submenu is open but never close them all. It cannot conjure a
+  // submenu when the composition turned `showSubmenu` off — that gate stays.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
+  const forcedIndex =
+    forcedOpen && showSubmenu && openKey === null
+      ? items.findIndex((item) => (item.children || []).length > 0)
+      : -1;
+  const effectiveOpenKey =
+    openKey ??
+    (forcedIndex >= 0 ? String(items[forcedIndex].pk ?? forcedIndex) : null);
+
   // A designer who marked a child as the row layout gets that layout repeated
   // per menu entry; otherwise the built-in links render unchanged.
   const customItems = hasItemTemplate(block, currentBreakpoint) ? (
@@ -179,7 +193,8 @@ const NavMenuBlock = ({
 
   const submenuPanel = (item: MenuItemLike, key: string) => {
     const children = item.children || [];
-    if (!showSubmenu || children.length === 0 || openKey !== key) return null;
+    if (!showSubmenu || children.length === 0 || effectiveOpenKey !== key)
+      return null;
 
     return (
       <div
@@ -213,7 +228,7 @@ const NavMenuBlock = ({
               // Navigating inside the designer iframe would drop the author
               // out of the page they are editing.
               if (isDesigner) event.preventDefault();
-              setOpenKey(null);
+              if (!forcedOpen) setOpenKey(null);
             }}
             style={{
               color: 'inherit',
@@ -255,13 +270,15 @@ const NavMenuBlock = ({
               aria-current={current ? 'page' : undefined}
               {...partAttrs('item', {
                 selected: current,
-                open: showSubmenu && hasChildren && openKey === key
+                open: showSubmenu && hasChildren && effectiveOpenKey === key
               })}
               onClick={(event) => {
                 if (isDesigner) event.preventDefault();
                 if (showSubmenu && hasChildren && submenuTrigger === 'click') {
                   event.preventDefault();
-                  setOpenKey(openKey === key ? null : key);
+                  // While forced, clicking the open entry keeps it open:
+                  // switching is allowed, closing them all is not.
+                  setOpenKey(!forcedOpen && openKey === key ? null : key);
                 }
               }}
               style={{
@@ -289,7 +306,7 @@ const NavMenuBlock = ({
                 if (submenuTrigger === 'hover') setOpenKey(key);
               }}
               onMouseLeave={() => {
-                if (submenuTrigger === 'hover') setOpenKey(null);
+                if (submenuTrigger === 'hover' && !forcedOpen) setOpenKey(null);
               }}
               style={{
                 position: 'relative',

package/src/blocks/search-box-block.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { getResponsiveValue, partAttrs } from '../utils';
+import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { readToggle } from './product-block-utils';
 
@@ -37,6 +37,12 @@ const SearchBoxBlock = ({
   const [term, setTerm] = useState('');
   const inputRef = useRef<HTMLInputElement>(null);
 
+  // Designer-only: hold the overlay panel mounted so its open state can be
+  // styled. Close routes stay rendered but never unmount it while forced.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(block.styles, currentBreakpoint);
+  const panelOpen = open || forcedOpen;
+
   const prop = (key: string, fallback: string) =>
     String(
       getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
@@ -176,10 +182,13 @@ const SearchBoxBlock = ({
       <button
         type="button"
         data-search-box=""
-        {...partAttrs('trigger', { open })}
+        {...partAttrs('trigger', { open: panelOpen })}
         aria-label={triggerLabel || placeholder}
-        aria-expanded={open}
-        onClick={() => setOpen((value) => !value)}
+        aria-expanded={panelOpen}
+        onClick={() => {
+          if (forcedOpen) return;
+          setOpen((value) => !value);
+        }}
         style={{
           display: 'inline-flex',
           alignItems: 'center',
@@ -193,7 +202,7 @@ const SearchBoxBlock = ({
         {icon}
       </button>
 
-      {open && (
+      {panelOpen && (
         <div
           data-search-overlay=""
           {...partAttrs('panel', { open: true })}
@@ -247,7 +256,10 @@ const SearchBoxBlock = ({
               aria-label={closeLabel}
               data-search-close=""
               {...partAttrs('close')}
-              onClick={() => setOpen(false)}
+              onClick={() => {
+                if (forcedOpen) return;
+                setOpen(false);
+              }}
               style={{
                 background: 'none',
                 border: 'none',

package/src/sections/__tests__/tabs-section.test.tsx

@@ -33,14 +33,17 @@ const tab = (id: string, headerChildId: string, contentChildId: string): AnyBloc
   ]
 });
 
-const makeSection = (blocks: AnyBlock[]): Section =>
+const makeSection = (
+  blocks: AnyBlock[],
+  styles: Record<string, unknown> = {}
+): Section =>
   ({
     id: 'section-1',
     type: 'tabs',
     name: 'Tabs',
     label: 'Tabs',
     properties: {},
-    styles: {},
+    styles,
     blocks,
     order: 0,
     hidden: false
@@ -112,4 +115,46 @@ describe('TabsSection', () => {
 
     expect(shown()).toEqual(['t1-c']);
   });
+
+  describe('under force-open', () => {
+    const contentIds = ['t1-c', 't2-c', 't3-c'];
+    const forcedSection = () =>
+      makeSection(
+        [tab('t1', 't1-h', 't1-c'), tab('t2', 't2-h', 't2-c'), tab('t3', 't3-h', 't3-c')],
+        { forceOpen: true }
+      );
+    const shown = () =>
+      contentIds.filter((id) => idsRendered().includes(id));
+
+    it('renders every pane stacked in the designer with no interaction', () => {
+      render(<TabsSection section={forcedSection()} isDesigner />);
+
+      expect(shown()).toEqual(contentIds);
+    });
+
+    it('keeps every pane mounted when a header is clicked', () => {
+      render(<TabsSection section={forcedSection()} isDesigner />);
+
+      fireEvent.click(document.querySelector('[data-id="t2-h"]') as Element);
+
+      expect(shown()).toEqual(contentIds);
+    });
+
+    it('keeps forceOpen out of the container inline styles', () => {
+      const { container } = render(
+        <TabsSection section={forcedSection()} isDesigner />
+      );
+
+      const style =
+        (container.firstElementChild as HTMLElement).getAttribute('style') ||
+        '';
+      expect(style.toLowerCase()).not.toContain('force');
+    });
+
+    it('ignores forceOpen on the storefront: only the active pane renders', () => {
+      render(<TabsSection section={forcedSection()} />);
+
+      expect(shown()).toEqual(['t1-c']);
+    });
+  });
 });

package/src/sections/tabs-section.tsx

@@ -4,6 +4,7 @@ import ThemeBlock from '../theme-block';
 import {
   getCSSStyles,
   getResponsiveValue as readResponsiveValue,
+  resolveForceOpen,
   resolveThemeCssVariables,
   resolveThemeStyleObject
 } from '../utils';
@@ -30,6 +31,12 @@ const TabsSection: React.FC<TabsSectionProps> = ({
   const [activeTabIndex, setActiveTabIndex] = useState(0);
   const themeSettings = useThemeSettingsContext();
 
+  // Designer-only: render every pane stacked so each one is mounted and
+  // styleable without racing the selected-block effect below. Header clicks
+  // keep switching the active highlight but never unmount a pane.
+  const forcedOpen =
+    isDesigner && resolveForceOpen(section.styles, currentBreakpoint);
+
   // Separate tab blocks from non-tab blocks (like headers)
   const nonTabBlocks = section.blocks
     .filter(
@@ -136,6 +143,10 @@ const TabsSection: React.FC<TabsSectionProps> = ({
     const styles: Record<string, string | number> = {};
 
     Object.keys(properties).forEach((key) => {
+      // Not a CSS value: the designer-only force-open flag must never land in
+      // the container's inline styles.
+      if (key === 'forceOpen') return;
+
       const value = getResponsiveValue<string | number | undefined>(
         properties[key],
         undefined
@@ -493,7 +504,7 @@ const TabsSection: React.FC<TabsSectionProps> = ({
 
       <div>
         {tabBlocks.map((tabBlock, index) => {
-          if (index !== activeTabIndex) return null;
+          if (!forcedOpen && index !== activeTabIndex) return null;
 
           const contentBlock = tabBlock.blocks?.find(
             (b) => b.label === 'Tab Content'

package/src/utils/index.ts

@@ -234,6 +234,27 @@ export const getResponsiveValue = (
   return value;
 };
 
+/**
+ * Designer-only "hold this panel open" flag, read from `styles.forceOpen`.
+ *
+ * The editor stores it as a plain boolean, but published JSON may carry a
+ * per-breakpoint object or the string a select would store, so resolution
+ * goes through the same breakpoint chain as every other style value with the
+ * coercion the toggle reader applies. Callers gate on `isDesigner` — a value
+ * left in published widget JSON is inert on the storefront.
+ */
+export const resolveForceOpen = (
+  styles: Record<string, unknown> | undefined | null,
+  currentBreakpoint = 'desktop'
+): boolean => {
+  const raw = getResponsiveValue(styles?.forceOpen, currentBreakpoint, false);
+  if (typeof raw === 'boolean') return raw;
+  if (typeof raw === 'number') return raw !== 0;
+
+  const normalized = String(raw).trim().toLowerCase();
+  return normalized === 'true' || normalized === '1' || normalized === 'yes';
+};
+
 export const resolveOption = <T extends string>(
   value: unknown,
   currentBreakpoint: string,