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

package/CHANGELOG.md

@@ -1,36 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.48-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d5]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea414]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08f]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- 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 [e9598c7]
-- Updated dependencies [4998a963]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.48-rc.0
-  - @akinon/theme-contract@2.0.48-rc.0
+## 2.0.48
+
+### Patch Changes
+
+- 1763ea1: ZERO-4741: Render authored children in the search overlay and route it through the shared overlay primitive
+  - @akinon/next@2.0.48
+  - @akinon/theme-contract@2.0.48
 
 ## 2.0.47
 

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

@@ -93,15 +93,37 @@ const pin = (blockId: string, partName: string, state: string | null) =>
   });
 
 describe('SearchBoxBlock under force-open', () => {
-  const renderBox = (isDesigner: boolean, styles: Record<string, unknown>) =>
+  const renderBox = (
+    isDesigner: boolean,
+    styles: Record<string, unknown>,
+    properties: Record<string, unknown> = {},
+    blocks: unknown[] = []
+  ) =>
     render(
       <SearchBoxBlock
-        block={mkBlock('search-box', {}, styles)}
+        block={
+          {
+            ...(mkBlock('search-box', properties, styles) as object),
+            blocks
+          } as never
+        }
         isDesigner={isDesigner}
         {...blockProps}
       />
     );
 
+  const suggestion = {
+    id: 'sugg-1',
+    type: 'text',
+    label: 'Suggestion',
+    order: 0,
+    hidden: false,
+    value: 'Trending',
+    properties: {},
+    styles: {},
+    blocks: []
+  };
+
   it('mounts the overlay panel with no interaction in the designer', () => {
     renderBox(true, { forceOpen: true });
 
@@ -155,6 +177,47 @@ describe('SearchBoxBlock under force-open', () => {
     expect(panel?.getAttribute('data-state')).toContain('open');
   });
 
+  it('mounts the backdrop it is asked for and leaves it inert', () => {
+    renderBox(true, { forceOpen: true }, { showBackdrop: true });
+
+    const backdrop = document.querySelector('[data-search-backdrop]');
+    // The backdrop is the point: it cannot be coloured or blurred in a canvas
+    // that never draws it.
+    expect(backdrop).toBeInTheDocument();
+    expect(backdrop).toHaveAttribute('data-part', 'backdrop');
+
+    fireEvent.click(backdrop as Element);
+
+    expect(document.querySelector('[data-search-overlay]')).toBeInTheDocument();
+  });
+
+  it('renders the authored children behind the body part', () => {
+    renderBox(true, { forceOpen: true }, {}, [suggestion]);
+
+    const body = document.querySelector('[data-part="body"]');
+    expect(body).toBeInTheDocument();
+    expect(body?.querySelector('[data-testid="tb"]')).toHaveAttribute(
+      'data-id',
+      'sugg-1'
+    );
+  });
+
+  it('keeps a drop target in the canvas for a panel nobody has filled yet', () => {
+    renderBox(true, { forceOpen: true });
+
+    expect(document.querySelector('[data-part="body"]')).toBeInTheDocument();
+  });
+
+  it('does not answer Escape in the canvas', () => {
+    renderBox(true, { forceOpen: true });
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    // The primitive is inert in the designer, so the key cannot take away the
+    // panel the author is styling.
+    expect(document.querySelector('[data-search-overlay]')).toBeInTheDocument();
+  });
+
   it('ignores forceOpen on the storefront, byte for byte', () => {
     const forced = renderBox(false, { forceOpen: true });
     const forcedHtml = forced.container.innerHTML;
@@ -165,6 +228,55 @@ describe('SearchBoxBlock under force-open', () => {
     expect(document.querySelector('[data-search-overlay]')).toBeNull();
     expect(forcedHtml).toBe(plain.container.innerHTML);
   });
+
+  /**
+   * The back-compat pin. Published widget JSON carries none of the overlay
+   * properties and — because the renderer ignored `block.blocks` entirely —
+   * no children, so an opened panel must gain no node it did not have before.
+   */
+  it('grows no backdrop and no body for a published composition', () => {
+    renderBox(false, {}, {}, []);
+
+    fireEvent.click(document.querySelector('[data-part="trigger"]') as Element);
+
+    expect(document.querySelector('[data-search-overlay]')).toBeInTheDocument();
+    expect(document.querySelector('[data-search-backdrop]')).toBeNull();
+    expect(document.querySelector('[data-part="body"]')).toBeNull();
+    // And with no backdrop the panel makes no claim about the page behind it.
+    expect(
+      document.querySelector('[data-search-overlay]')
+    ).not.toHaveAttribute('aria-modal');
+  });
+
+  it('moves focus into the field on open and hands it back on close', () => {
+    renderBox(false, {});
+
+    const trigger = document.querySelector('[data-part="trigger"]') as
+      HTMLElement;
+    trigger.focus();
+    fireEvent.click(trigger);
+
+    expect(document.activeElement).toBe(
+      document.querySelector('[data-search-input]')
+    );
+
+    fireEvent.click(document.querySelector('[data-search-close]') as Element);
+
+    // Never handed back before the migration: a keyboard shopper who closed
+    // the panel was dropped at the top of the document.
+    expect(document.activeElement).toBe(trigger);
+  });
+
+  it('leaves focus on the icon when the composition turned it off', () => {
+    renderBox(false, {}, { autoFocus: false });
+
+    const trigger = document.querySelector('[data-part="trigger"]') as
+      HTMLElement;
+    trigger.focus();
+    fireEvent.click(trigger);
+
+    expect(document.activeElement).toBe(trigger);
+  });
 });
 
 describe('HamburgerMenuBlock under force-open', () => {

package/src/blocks/__tests__/overlay-sweep.test.tsx

@@ -25,6 +25,7 @@ jest.mock('@akinon/next/data/client/misc', () => ({
 import FacetFiltersBlock from '../facet-filters-block';
 import PanelBlock from '../panel-block';
 import HamburgerMenuBlock from '../hamburger-menu-block';
+import SearchBoxBlock from '../search-box-block';
 import MegaMenuBlock from '../mega-menu-block';
 import SortSelectBlock from '../sort-select-block';
 import { useOverlay } from '../../hooks/use-overlay';
@@ -487,6 +488,178 @@ describe('the size guide next to an overlay already on the primitive', () => {
   });
 });
 
+/**
+ * The search panel was never an overlay at all: a bare `position: fixed` div
+ * with a close button, no backdrop, no role, no Escape and no scroll lock. It
+ * lives in the header, which is exactly where a shopper opens a hamburger
+ * drawer or a mini basket over it, so it joins the same stack as the rest.
+ */
+describe('the search panel next to an overlay already on the primitive', () => {
+  const SearchPage = ({
+    migratedOpen = false,
+    properties = {}
+  }: {
+    migratedOpen?: boolean;
+    properties?: Record<string, unknown>;
+  }) => (
+    <>
+      <SearchBoxBlock
+        block={mkBlock('search-box', properties)}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+      <MigratedPanel open={migratedOpen} />
+    </>
+  );
+
+  const openPanel = () =>
+    fireEvent.click(document.querySelector('[data-search-box]') as HTMLElement);
+
+  it('opens exactly the panel it always opened', () => {
+    render(<SearchPage />);
+    openPanel();
+
+    // The shipped behaviour, stated: no scrim over the page, no claim that the
+    // page behind is hidden, and a page that still scrolls.
+    expect(document.querySelector('[data-search-backdrop]')).toBeNull();
+    expect(screen.getByRole('dialog', { name: 'Search' })).not.toHaveAttribute(
+      'aria-modal'
+    );
+    expect(document.body.style.overflow).toBe('');
+  });
+
+  it('claims the page only while it is the backdropped panel on top', () => {
+    const { rerender } = render(
+      <SearchPage properties={{ showBackdrop: true }} />
+    );
+    openPanel();
+
+    expect(screen.getByRole('dialog', { name: 'Search' })).toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+
+    rerender(<SearchPage properties={{ showBackdrop: true }} migratedOpen />);
+    expect(screen.getByRole('dialog', { name: 'Search' })).not.toHaveAttribute(
+      'aria-modal'
+    );
+
+    rerender(
+      <SearchPage properties={{ showBackdrop: true }} migratedOpen={false} />
+    );
+    expect(screen.getByRole('dialog', { name: 'Search' })).toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+  });
+
+  it('counts its scroll lock with every other overlay', () => {
+    document.body.style.overflow = 'auto';
+
+    const { rerender } = render(
+      <SearchPage
+        properties={{ showBackdrop: true, lockScroll: true }}
+        migratedOpen
+      />
+    );
+    openPanel();
+    expect(document.body.style.overflow).toBe('hidden');
+
+    // The panel that froze the page first closes while the search panel is up.
+    rerender(
+      <SearchPage
+        properties={{ showBackdrop: true, lockScroll: true }}
+        migratedOpen={false}
+      />
+    );
+    expect(document.body.style.overflow).toBe('hidden');
+
+    fireEvent.click(document.querySelector('[data-search-close]') as HTMLElement);
+    expect(document.body.style.overflow).toBe('auto');
+  });
+
+  it('closes the panel on the backdrop it was given', () => {
+    render(<SearchPage properties={{ showBackdrop: true }} />);
+    openPanel();
+
+    fireEvent.click(
+      document.querySelector('[data-search-backdrop]') as HTMLElement
+    );
+
+    expect(screen.queryByRole('dialog', { name: 'Search' })).toBeNull();
+  });
+
+  it('honours a composition that keeps the backdrop but not the dismissal', () => {
+    render(
+      <SearchPage properties={{ showBackdrop: true, closeOnBackdrop: false }} />
+    );
+    openPanel();
+
+    fireEvent.click(
+      document.querySelector('[data-search-backdrop]') as HTMLElement
+    );
+
+    expect(screen.getByRole('dialog', { name: 'Search' })).toBeInTheDocument();
+  });
+
+  it('answers Escape when it is the panel on top', () => {
+    render(<SearchPage />);
+    openPanel();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    // It answered nothing at all before: a keyboard shopper was stuck with it.
+    expect(screen.queryByRole('dialog', { name: 'Search' })).toBeNull();
+  });
+
+  it('leaves Escape to the overlay on top', () => {
+    const { rerender } = render(<SearchPage />);
+    openPanel();
+    rerender(<SearchPage migratedOpen />);
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.getByRole('dialog', { name: 'Search' })).toBeInTheDocument();
+  });
+
+  it('honours a composition that turned Escape off', () => {
+    render(<SearchPage properties={{ closeOnEscape: false }} />);
+    openPanel();
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.getByRole('dialog', { name: 'Search' })).toBeInTheDocument();
+  });
+
+  it('re-arms Escape for a panel with no pointer route out', () => {
+    render(
+      <SearchPage
+        properties={{
+          showClose: false,
+          showBackdrop: false,
+          closeOnEscape: false
+        }}
+      />
+    );
+    openPanel();
+
+    // Every pointer route is a designer toggle, so a composition can legally
+    // turn all of them off. It must never seal a shopper in.
+    expect(document.querySelector('[data-search-close]')).toBeInTheDocument();
+    fireEvent.keyDown(document, { key: 'Escape' });
+    expect(screen.queryByRole('dialog', { name: 'Search' })).toBeNull();
+  });
+
+  it('drops the close button when the backdrop can dismiss it', () => {
+    render(<SearchPage properties={{ showClose: false, showBackdrop: true }} />);
+    openPanel();
+
+    expect(document.querySelector('[data-search-close]')).toBeNull();
+  });
+});
+
 describe('the hamburger drawer next to an overlay already on the primitive', () => {
   const HamburgerPage = ({
     migratedOpen = false,

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

@@ -326,4 +326,18 @@ describe('an empty panel', () => {
 
     expect(container.querySelector('[data-size-guide]')).toBeInTheDocument();
   });
+
+  it('invites any blocks into its drop target, not a size table', () => {
+    const { container } = renderPanel({}, { isDesigner: true, blocks: [] });
+
+    const placeholder = container.querySelector(
+      '[data-theme-block-placeholder]'
+    );
+
+    expect(placeholder).toHaveTextContent(
+      'Panel (drop the blocks it opens here)'
+    );
+    // The generic block must not steer the author towards its legacy use.
+    expect(placeholder?.textContent).not.toMatch(/size/i);
+  });
 });

package/src/blocks/panel-block.tsx

@@ -295,7 +295,7 @@ const PanelBlock = ({
           {childBlocks.length > 0 ? (
             renderChildren()
           ) : (
-            <DesignerPlaceholder label="Size guide (drop the size table blocks here)" />
+            <DesignerPlaceholder label="Panel (drop the blocks it opens here)" />
           )}
         </div>
       </div>

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

@@ -1,10 +1,12 @@
 'use client';
 
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { getResponsiveValue, partAttrs, resolveForceOpen } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import ThemeBlock from '../theme-block';
 import { BlockRendererProps } from './block-renderer-registry';
-import { readToggle } from './product-block-utils';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
 
 const clampNumber = (
   value: unknown,
@@ -22,20 +24,32 @@ const clampNumber = (
  * expands into an overlay input (mode: 'icon', the common brand pattern)
  * or as an always-visible inline input (mode: 'inline'). The editor owns
  * placement, mode, every label and the styling of each piece.
+ *
+ * The open panel is a surface the author fills: whatever is dropped into the
+ * block renders inside it as CHILD blocks behind the `body` part — recent
+ * searches, quick links, a promo — so none of that is hardcoded here. The
+ * panel itself is a real overlay rather than a bare fixed div: Escape, the
+ * focus trap, the counted scroll lock and the `aria-modal` claim all belong to
+ * the shared primitive, which keeps ONE stack for the page.
+ *
  * Properties: mode, placeholder, searchUrl, queryParam, showIcon, iconSize,
  * showSubmit, submitLabel, submitStyle, closeLabel, triggerLabel,
- * formMaxWidth, autoFocus, clearOnSubmit.
- * Parts: trigger, icon, form, input, submit, panel, close.
+ * formMaxWidth, autoFocus, clearOnSubmit, showClose, showBackdrop,
+ * closeOnBackdrop, closeOnEscape, lockScroll.
+ * Parts: trigger, icon, backdrop, form, input, submit, panel, body, close.
  */
 const SearchBoxBlock = ({
   block,
+  placeholderId,
+  sectionId,
+  selectedBlockId,
   currentBreakpoint = 'desktop',
   isDesigner = false
 }: BlockRendererProps) => {
   const router = useRouter();
   const [open, setOpen] = useState(false);
   const [term, setTerm] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
+  const triggerRef = useRef<HTMLButtonElement | null>(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.
@@ -91,9 +105,80 @@ const SearchBoxBlock = ({
     1600
   );
 
-  useEffect(() => {
-    if (open && autoFocus) inputRef.current?.focus();
-  }, [open, autoFocus]);
+  /**
+   * Every fallback below is the behaviour this block already shipped with, so
+   * a composition published before these properties existed keeps rendering
+   * exactly what it rendered. They have to stay identical to the editor's
+   * `defaultValue`s, or a widget saved after the change behaves differently
+   * from one saved before it.
+   */
+  const showClose = readToggle(
+    block.properties?.showClose,
+    currentBreakpoint,
+    true
+  );
+  // Off, because no storefront draws one today: turning it on is a designer's
+  // deliberate choice, not something a published header grows overnight.
+  const showBackdrop = readToggle(
+    block.properties?.showBackdrop,
+    currentBreakpoint,
+    false
+  );
+  const closeOnBackdrop = readToggle(
+    block.properties?.closeOnBackdrop,
+    currentBreakpoint,
+    true
+  );
+  const closeOnEscape = readToggle(
+    block.properties?.closeOnEscape,
+    currentBreakpoint,
+    true
+  );
+  // The panel is a band across the top with the page still readable behind it,
+  // and that page has always kept scrolling.
+  const lockScroll = readToggle(
+    block.properties?.lockScroll,
+    currentBreakpoint,
+    false
+  );
+
+  // Every pointer route out of the panel is a designer toggle, so a
+  // composition can legally turn all of them off and seal a shopper inside.
+  // When none survives, the close button comes back and Escape is re-armed no
+  // matter what the properties say.
+  const hasPointerDismissRoute = showClose || (showBackdrop && closeOnBackdrop);
+  const closeVisible = showClose || !hasPointerDismissRoute;
+  const escapeClosesPanel = closeOnEscape || !hasPointerDismissRoute;
+
+  /**
+   * Escape, the focus trap, the scroll lock, handing focus back to the icon
+   * and the `aria-modal` claim are the shared overlay primitive's.
+   *
+   * This panel had none of them: it was a bare `position: fixed` div with a
+   * close button, so a keyboard shopper who opened it had no way out and
+   * assistive tech was told nothing about it. A header composes several
+   * overlays — this, the hamburger drawer, a mini basket — and the primitive
+   * keeps one stack for the page, so the claim and the key belong to whichever
+   * overlay is actually on top.
+   *
+   * `modal` is `showBackdrop` because the panel only really covers the page
+   * once a backdrop is drawn; with the page behind still clickable the claim
+   * would be the opposite of what is true. `open` rather than the forced state
+   * is deliberate: nothing in the primitive may ever see the canvas's held-open
+   * panel as a live overlay.
+   */
+  const overlay = useOverlay<HTMLDivElement>({
+    open,
+    onClose: () => setOpen(false),
+    isDesigner,
+    modal: showBackdrop,
+    lockScroll,
+    closeOnEscape: escapeClosesPanel,
+    // The block's own "Focus Field On Open", now honoured by the primitive —
+    // which also hands focus back to the icon on close, which it never did.
+    manageFocus: autoFocus,
+    returnFocusRef: triggerRef
+  });
 
   const submit = (event: React.FormEvent) => {
     event.preventDefault();
@@ -177,11 +262,67 @@ const SearchBoxBlock = ({
     );
   }
 
+  const childBlocks = (block.blocks || [])
+    .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
+    .sort((a, b) => (a.order || 0) - (b.order || 0));
+
+  const renderChildren = () =>
+    childBlocks.map((childBlock, index) => {
+      const createActionHandler = (actionType: string) => () => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: actionType,
+              data: { placeholderId, sectionId, blockId: childBlock.id }
+            },
+            '*'
+          );
+        }
+      };
+
+      const handleRename = (newLabel: string) => {
+        if (window.parent) {
+          window.parent.postMessage(
+            {
+              type: 'RENAME_BLOCK',
+              data: {
+                placeholderId,
+                sectionId,
+                blockId: childBlock.id,
+                label: newLabel
+              }
+            },
+            '*'
+          );
+        }
+      };
+
+      return (
+        <ThemeBlock
+          key={childBlock.id || `search-box-block-${index}`}
+          block={childBlock}
+          placeholderId={placeholderId}
+          sectionId={sectionId}
+          isDesigner={isDesigner}
+          isSelected={selectedBlockId === childBlock.id}
+          selectedBlockId={selectedBlockId}
+          currentBreakpoint={currentBreakpoint}
+          onMoveUp={createActionHandler('MOVE_BLOCK_UP')}
+          onMoveDown={createActionHandler('MOVE_BLOCK_DOWN')}
+          onDuplicate={createActionHandler('DUPLICATE_BLOCK')}
+          onToggleVisibility={createActionHandler('TOGGLE_BLOCK_VISIBILITY')}
+          onDelete={createActionHandler('DELETE_BLOCK')}
+          onRename={handleRename}
+        />
+      );
+    });
+
   return (
     <>
       <button
         type="button"
         data-search-box=""
+        ref={triggerRef}
         {...partAttrs('trigger', { open: panelOpen })}
         aria-label={triggerLabel || placeholder}
         aria-expanded={panelOpen}
@@ -203,84 +344,141 @@ const SearchBoxBlock = ({
       </button>
 
       {panelOpen && (
-        <div
-          data-search-overlay=""
-          {...partAttrs('panel', { open: true })}
-          style={{
-            position: 'fixed',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 1000,
-            background: '#ffffff',
-            color: '#111827',
-            boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
-            padding: '20px 24px'
-          }}
-        >
-          <form
-            onSubmit={submit}
-            data-search-form=""
-            {...partAttrs('form')}
-            style={{
-              display: 'flex',
-              alignItems: 'center',
-              gap: '12px',
-              maxWidth: `${formMaxWidth}px`,
-              margin: '0 auto'
-            }}
-          >
-            {showIcon && icon}
-            <input
-              ref={inputRef}
-              type="search"
-              value={term}
-              onChange={(e) => setTerm(e.target.value)}
-              placeholder={placeholder}
-              aria-label={placeholder}
-              data-search-input=""
-              {...partAttrs('input')}
-              style={{
-                flex: 1,
-                border: 'none',
-                borderBottom: '1px solid #d1d5db',
-                background: 'transparent',
-                fontSize: '18px',
-                padding: '8px 0',
-                outline: 'none'
-              }}
-            />
-            {submitButton}
-            <button
-              type="button"
-              aria-label={closeLabel}
-              data-search-close=""
-              {...partAttrs('close')}
+        <>
+          {/*
+            A sibling of the panel rather than a wrapper around it: the panel's
+            own `position` and `z-index` are controls a brand already styles
+            against, and hoisting it into a fixed root would take both away.
+            Held open in the canvas the backdrop is inert, so the author can
+            click the scrim they are colouring without it vanishing.
+          */}
+          {showBackdrop && (
+            <div
+              data-search-backdrop=""
+              {...partAttrs('backdrop', { open: true })}
               onClick={() => {
                 if (forcedOpen) return;
-                setOpen(false);
+                if (closeOnBackdrop) setOpen(false);
               }}
               style={{
-                background: 'none',
-                border: 'none',
-                cursor: 'pointer',
-                padding: '4px'
+                position: 'fixed',
+                inset: 0,
+                zIndex: 999,
+                background: 'rgba(0,0,0,0.5)'
+              }}
+            />
+          )}
+          <div
+            data-search-overlay=""
+            {...partAttrs('panel', { open: true })}
+            role="dialog"
+            // Carries the panel ref and the `aria-modal` claim, made only
+            // while a backdrop really is hiding the page behind it.
+            {...overlay.overlayProps}
+            aria-label={triggerLabel || placeholder}
+            // Focus target of last resort, for a panel whose every control a
+            // composition turned off.
+            tabIndex={-1}
+            style={{
+              position: 'fixed',
+              top: 0,
+              left: 0,
+              right: 0,
+              zIndex: 1000,
+              background: '#ffffff',
+              color: '#111827',
+              boxShadow: '0 4px 20px rgba(0,0,0,0.15)',
+              padding: '20px 24px'
+            }}
+          >
+            <form
+              onSubmit={submit}
+              data-search-form=""
+              {...partAttrs('form')}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: '12px',
+                maxWidth: `${formMaxWidth}px`,
+                margin: '0 auto'
               }}
             >
-              <svg
-                width="20"
-                height="20"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.8"
-                strokeLinecap="round"
+              {showIcon && icon}
+              <input
+                type="search"
+                value={term}
+                onChange={(e) => setTerm(e.target.value)}
+                placeholder={placeholder}
+                aria-label={placeholder}
+                data-search-input=""
+                {...partAttrs('input')}
+                style={{
+                  flex: 1,
+                  border: 'none',
+                  borderBottom: '1px solid #d1d5db',
+                  background: 'transparent',
+                  fontSize: '18px',
+                  padding: '8px 0',
+                  outline: 'none'
+                }}
+              />
+              {submitButton}
+              {closeVisible && (
+                <button
+                  type="button"
+                  aria-label={closeLabel}
+                  data-search-close=""
+                  {...partAttrs('close')}
+                  onClick={() => {
+                    if (forcedOpen) return;
+                    setOpen(false);
+                  }}
+                  style={{
+                    background: 'none',
+                    border: 'none',
+                    cursor: 'pointer',
+                    padding: '4px'
+                  }}
+                >
+                  <svg
+                    width="20"
+                    height="20"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="1.8"
+                    strokeLinecap="round"
+                  >
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                </button>
+              )}
+            </form>
+
+            {/*
+              Whatever the author dropped into the block. Gated so that a
+              published composition — none of which could have children, since
+              the renderer ignored them — grows no empty wrapper, while the
+              canvas always offers somewhere to drop the first one.
+            */}
+            {(childBlocks.length > 0 || isDesigner) && (
+              <div
+                data-search-body=""
+                {...partAttrs('body')}
+                style={{
+                  maxWidth: `${formMaxWidth}px`,
+                  margin: '0 auto'
+                }}
               >
-                <path d="M6 6l12 12M18 6L6 18" />
-              </svg>
-            </button>
-          </form>
-        </div>
+                {childBlocks.length > 0 ? (
+                  renderChildren()
+                ) : (
+                  <DesignerPlaceholder label="Search panel (drop suggestions, links or promos here)" />
+                )}
+              </div>
+            )}
+          </div>
+        </>
       )}
     </>
   );