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

package/CHANGELOG.md

@@ -1,36 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.47-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [2fea414]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f4]
-- 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 [e9598c7]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b2]
-  - @akinon/next@2.0.47-rc.0
-  - @akinon/theme-contract@2.0.47-rc.0
+## 2.0.48-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.48-beta.0
+  - @akinon/theme-contract@2.0.48-beta.0
+
+## 2.0.47
+
+### Patch Changes
+
+- b9a50e8: ZERO-4740: Promote the size guide renderer into a generic Panel block with drawer, modal, sheet and anchored presentations
+  - @akinon/next@2.0.47
+  - @akinon/theme-contract@2.0.47
 
 ## 2.0.46
 

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

package/src/__tests__/registry-parity.test.ts

@@ -77,6 +77,7 @@ const EXPECTED_BLOCK_TYPES = [
   'order-list',
   'order-success',
   'order-tracking',
+  'panel',
   'payment-badges',
   'product-attributes',
   'product-breadcrumb',

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

@@ -54,6 +54,7 @@ import HamburgerMenuBlock from '../hamburger-menu-block';
 import MegaMenuBlock from '../mega-menu-block';
 import NavMenuBlock from '../nav-menu-block';
 import HotspotBlock from '../hotspot-block';
+import PanelBlock from '../panel-block';
 import { PartStatePreview } from '../../components/part-state-preview';
 
 const mkBlock = (
@@ -376,3 +377,94 @@ describe('HotspotBlock under force-open', () => {
     expect(screen.queryByText('Hot Title')).not.toBeInTheDocument();
   });
 });
+
+describe('PanelBlock under force-open', () => {
+  // A panel with nothing in it disappears on the storefront, so the byte-for-
+  // byte comparison below would otherwise compare two empty strings.
+  const child = {
+    id: 'row-1',
+    type: 'text',
+    label: 'Row',
+    order: 0,
+    hidden: false,
+    value: 'S / M / L',
+    properties: {},
+    styles: {},
+    blocks: []
+  };
+
+  const renderPanel = (
+    isDesigner: boolean,
+    styles: Record<string, unknown>,
+    properties: Record<string, unknown> = {}
+  ) =>
+    render(
+      <PanelBlock
+        block={
+          {
+            ...(mkBlock('size-guide', properties, styles) as object),
+            blocks: [child]
+          } as never
+        }
+        isDesigner={isDesigner}
+        {...blockProps}
+      />
+    );
+
+  it('mounts the backdrop and the panel with no interaction', () => {
+    renderPanel(true, { forceOpen: true });
+
+    // The backdrop is the point: it cannot be coloured or blurred in a canvas
+    // that never draws it.
+    expect(
+      document.querySelector('[data-part="overlay"][data-state="open"]')
+    ).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-part="modal"][data-state="open"]')
+    ).toBeInTheDocument();
+    expect(document.querySelector('[data-part="trigger"]')).toHaveAttribute(
+      'data-state',
+      'open'
+    );
+  });
+
+  it('leaves the panel mounted when the backdrop is clicked', () => {
+    renderPanel(true, { forceOpen: true });
+
+    fireEvent.click(document.querySelector('[data-part="overlay"]') as Element);
+
+    expect(
+      document.querySelector('[data-part="modal"][data-state="open"]')
+    ).toBeInTheDocument();
+  });
+
+  it('leaves the panel mounted when the close button is clicked', () => {
+    renderPanel(true, { forceOpen: true });
+
+    fireEvent.click(document.querySelector('[data-size-guide-close]') as Element);
+
+    expect(
+      document.querySelector('[data-part="modal"][data-state="open"]')
+    ).toBeInTheDocument();
+  });
+
+  it('holds the drawer open too, backdrop and all', () => {
+    renderPanel(true, { forceOpen: true }, { presentation: 'drawer' });
+
+    expect(
+      document.querySelector('[data-panel-presentation="drawer"]')
+    ).toBeInTheDocument();
+    expect(document.querySelector('[data-part="overlay"]')).toBeInTheDocument();
+  });
+
+  it('ignores forceOpen on the storefront, byte for byte', () => {
+    const forced = renderPanel(false, { forceOpen: true });
+    const forcedHtml = forced.container.innerHTML;
+    forced.unmount();
+
+    const plain = renderPanel(false, {});
+
+    expect(document.querySelector('[data-part="modal"]')).toBeNull();
+    expect(forcedHtml).toBe(plain.container.innerHTML);
+  });
+});

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

@@ -23,7 +23,7 @@ jest.mock('@akinon/next/data/client/misc', () => ({
 }));
 
 import FacetFiltersBlock from '../facet-filters-block';
-import SizeGuideBlock from '../size-guide-block';
+import PanelBlock from '../panel-block';
 import HamburgerMenuBlock from '../hamburger-menu-block';
 import MegaMenuBlock from '../mega-menu-block';
 import SortSelectBlock from '../sort-select-block';
@@ -356,7 +356,7 @@ describe('the filter drawer next to an overlay already on the primitive', () =>
 describe('the size guide next to an overlay already on the primitive', () => {
   const SizeGuidePage = ({ migratedOpen = false }: { migratedOpen?: boolean }) => (
     <>
-      <SizeGuideBlock
+      <PanelBlock
         block={mkBlock('size-guide', {}, [
           {
             id: 'row-1',
@@ -421,7 +421,7 @@ describe('the size guide next to an overlay already on the primitive', () => {
 
   it('honours a composition that turned Escape off', () => {
     render(
-      <SizeGuideBlock
+      <PanelBlock
         block={mkBlock('size-guide', { closeOnEscape: false }, [
           {
             id: 'row-1',
@@ -449,6 +449,42 @@ describe('the size guide next to an overlay already on the primitive', () => {
       screen.getByRole('dialog', { name: 'Size guide' })
     ).toBeInTheDocument();
   });
+
+  // The same renderer under its current type id. The cases above are now the
+  // legacy-alias regression too, so both keys are exercised against the
+  // primitive rather than only the one the block used to be called.
+  it('behaves the same way under the `panel` type', () => {
+    render(
+      <PanelBlock
+        block={mkBlock('panel', {}, [
+          {
+            id: 'row-1',
+            type: 'text',
+            label: 'Row',
+            order: 0,
+            hidden: false,
+            value: 'S / M / L',
+            properties: {},
+            styles: {},
+            blocks: []
+          }
+        ])}
+        placeholderId="p"
+        sectionId="s"
+        isDesigner={false}
+        currentBreakpoint="desktop"
+      />
+    );
+    openGuide();
+
+    expect(
+      screen.getByRole('dialog', { name: 'Size guide' })
+    ).toHaveAttribute('aria-modal', 'true');
+
+    fireEvent.keyDown(document, { key: 'Escape' });
+
+    expect(screen.queryByRole('dialog', { name: 'Size guide' })).toBeNull();
+  });
 });
 
 describe('the hamburger drawer next to an overlay already on the primitive', () => {

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

@@ -0,0 +1,329 @@
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+
+// Stub the recursive ThemeBlock (default export) with a countable marker, so
+// the golden captures this block's own markup and nothing downstream of it.
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import PanelBlock from '../panel-block';
+import blockRendererRegistry from '../block-renderer-registry';
+import GOLDEN from './panel-legacy-golden.json';
+
+const CHILD = {
+  id: 'child-1',
+  type: 'text',
+  label: 'row',
+  order: 0,
+  hidden: false,
+  value: 'row',
+  properties: {},
+  styles: {},
+  blocks: []
+};
+
+const mkBlock = (
+  type: string,
+  properties: Record<string, unknown> = {},
+  styles: Record<string, unknown> = {},
+  blocks: unknown[] = [CHILD]
+) =>
+  ({
+    id: `${type}-1`,
+    type,
+    label: type,
+    order: 0,
+    hidden: false,
+    value: '',
+    properties,
+    styles,
+    blocks
+  } as never);
+
+const renderPanel = (
+  properties: Record<string, unknown>,
+  {
+    isDesigner = false,
+    open = false,
+    type = 'size-guide',
+    currentBreakpoint = 'desktop',
+    styles = {},
+    blocks = [CHILD]
+  }: {
+    isDesigner?: boolean;
+    open?: boolean;
+    type?: string;
+    currentBreakpoint?: string;
+    styles?: Record<string, unknown>;
+    blocks?: unknown[];
+  } = {}
+) => {
+  const view = render(
+    <PanelBlock
+      block={mkBlock(type, properties, styles, blocks)}
+      isDesigner={isDesigner}
+      placeholderId="p"
+      sectionId="s"
+      currentBreakpoint={currentBreakpoint}
+    />
+  );
+
+  if (open) {
+    fireEvent.click(
+      view.container.querySelector('[data-size-guide-trigger]') as Element
+    );
+  }
+
+  return view;
+};
+
+/* ------------------------------------------------------------------ */
+/* Back-compat: a published `size-guide` renders exactly as before.     */
+/* ------------------------------------------------------------------ */
+
+describe('the legacy size-guide markup, byte for byte', () => {
+  // Captured from the unmodified size-guide renderer BEFORE this block was
+  // generalised. Every one of these is markup a live storefront is already
+  // styling, so nothing here may move: the centred modal keeps its combined
+  // root/backdrop node, its attribute order and its missing `tabIndex`.
+  const CASES: Array<[string, Record<string, unknown>, boolean, boolean]> = [
+    ['legacy-closed', {}, false, false],
+    ['legacy-open', {}, false, true],
+    [
+      'legacy-open-titled',
+      { modalTitle: 'Size chart', modalWidth: 900 },
+      false,
+      true
+    ],
+    ['legacy-open-noclose', { showClose: false }, false, true],
+    ['legacy-designer', {}, true, false]
+  ];
+
+  it.each(CASES)('%s matches the pre-Panel golden', (name, properties, isDesigner, open) => {
+    const { container } = renderPanel(properties as Record<string, unknown>, {
+      isDesigner: isDesigner as boolean,
+      open: open as boolean
+    });
+
+    expect(container.innerHTML).toBe(
+      (GOLDEN as Record<string, string>)[name as string]
+    );
+  });
+
+  it('covers every captured case', () => {
+    expect(CASES.map(([n]) => n).sort()).toEqual(Object.keys(GOLDEN).sort());
+  });
+
+  it('renders the same markup whether or not `modal` was chosen explicitly', () => {
+    const implicit = renderPanel({}, { open: true });
+    const implicitHtml = implicit.container.innerHTML;
+    implicit.unmount();
+
+    const explicit = renderPanel({ presentation: 'modal' }, { open: true });
+
+    expect(explicit.container.innerHTML).toBe(implicitHtml);
+  });
+
+  it('renders the same markup under the `panel` type as under `size-guide`', () => {
+    const legacy = renderPanel({}, { open: true, type: 'size-guide' });
+    const legacyHtml = legacy.container.innerHTML;
+    legacy.unmount();
+
+    const current = renderPanel({}, { open: true, type: 'panel' });
+
+    expect(current.container.innerHTML).toBe(legacyHtml);
+  });
+});
+
+describe('the renderer registry', () => {
+  it('resolves the legacy type to the very same renderer', () => {
+    expect(blockRendererRegistry.getRenderer('panel')).toBe(PanelBlock);
+    expect(blockRendererRegistry.getRenderer('size-guide')).toBe(
+      blockRendererRegistry.getRenderer('panel')
+    );
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* Presentations.                                                      */
+/* ------------------------------------------------------------------ */
+
+describe('presentation modes', () => {
+  it('draws the drawer against the side the composition picked', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer', panelSide: 'left' },
+      { open: true }
+    );
+
+    const panel = container.querySelector('[data-part="modal"]');
+    expect(panel).toHaveAttribute('data-panel-presentation', 'drawer');
+    expect(panel).toHaveAttribute('data-state', 'open');
+    expect((panel as HTMLElement).style.left).toBe('0px');
+    expect((panel as HTMLElement).style.right).toBe('');
+    expect(container.querySelector('[data-part="overlay"]')).toHaveAttribute(
+      'data-state',
+      'open'
+    );
+    // Only the sheet grows a grab bar.
+    expect(container.querySelector('[data-part="handle"]')).toBeNull();
+  });
+
+  it('draws the sheet from the bottom with a grab bar', () => {
+    const { container } = renderPanel(
+      { presentation: 'sheet', sheetHeight: 40 },
+      { open: true }
+    );
+
+    const panel = container.querySelector('[data-part="modal"]');
+    expect(panel).toHaveAttribute('data-panel-presentation', 'sheet');
+    expect((panel as HTMLElement).style.maxHeight).toBe('40vh');
+    expect(container.querySelector('[data-part="handle"]')).toBeInTheDocument();
+  });
+
+  it('hangs the anchored panel off the block root rather than a fixed layer', () => {
+    const { container } = renderPanel(
+      { presentation: 'anchored', anchorOffset: 12, anchorAlign: 'end' },
+      { open: true }
+    );
+
+    const root = container.querySelector('[data-size-guide]') as HTMLElement;
+    expect(root.style.position).toBe('relative');
+
+    const panel = container.querySelector('[data-part="modal"]') as HTMLElement;
+    expect(panel).toHaveAttribute('data-panel-presentation', 'anchored');
+    expect(panel.style.top).toBe('calc(100% + 12px)');
+    expect(panel.style.right).toBe('0px');
+    // The panel is a child of the block root, not of the fixed backdrop layer.
+    expect(panel.closest('[data-panel-root]')).toBeNull();
+  });
+
+  it('keeps the bare root every other presentation shipped with', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer' },
+      { open: true }
+    );
+
+    expect(
+      (container.querySelector('[data-size-guide]') as HTMLElement).getAttribute(
+        'style'
+      )
+    ).toBeNull();
+  });
+
+  it('resolves the presentation per breakpoint', () => {
+    const { container } = renderPanel(
+      { presentation: { desktop: 'modal', mobile: 'sheet' } },
+      { open: true, currentBreakpoint: 'mobile' }
+    );
+
+    expect(container.querySelector('[data-part="modal"]')).toHaveAttribute(
+      'data-panel-presentation',
+      'sheet'
+    );
+    expect(container.querySelector('[data-part="handle"]')).toBeInTheDocument();
+  });
+
+  it('falls back to the centred modal for a value it does not know', () => {
+    const { container } = renderPanel(
+      { presentation: 'popover' },
+      { open: true }
+    );
+
+    expect(container.querySelector('[data-size-guide-mode="modal"]')).toBeInTheDocument();
+  });
+});
+
+/* ------------------------------------------------------------------ */
+/* The backdrop.                                                       */
+/* ------------------------------------------------------------------ */
+
+describe('the backdrop', () => {
+  it('is drawn by default, because every published composition had one', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer' },
+      { open: true }
+    );
+
+    expect(container.querySelector('[data-part="overlay"]')).toBeInTheDocument();
+  });
+
+  it('lets the page through when it is turned off', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer', showBackdrop: false },
+      { open: true }
+    );
+
+    expect(container.querySelector('[data-part="overlay"]')).toBeNull();
+    expect(
+      (container.querySelector('[data-panel-root]') as HTMLElement).style
+        .pointerEvents
+    ).toBe('none');
+    expect(
+      (container.querySelector('[data-part="modal"]') as HTMLElement).style
+        .pointerEvents
+    ).toBe('auto');
+  });
+
+  it('makes no `aria-modal` claim with the page behind still clickable', () => {
+    const { container } = renderPanel(
+      { presentation: 'anchored', showBackdrop: false },
+      { open: true }
+    );
+
+    expect(container.querySelector('[data-part="modal"]')).not.toHaveAttribute(
+      'aria-modal'
+    );
+  });
+
+  it('claims the page once a backdrop really covers it', () => {
+    const { container } = renderPanel(
+      { presentation: 'anchored' },
+      { open: true }
+    );
+
+    expect(container.querySelector('[data-part="modal"]')).toHaveAttribute(
+      'aria-modal',
+      'true'
+    );
+  });
+
+  it('honours a composition that turned the backdrop dismissal off', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer', closeOnOverlay: false },
+      { open: true }
+    );
+
+    fireEvent.click(container.querySelector('[data-part="overlay"]') as Element);
+
+    expect(container.querySelector('[data-part="modal"]')).toBeInTheDocument();
+  });
+
+  it('closes on a backdrop click when it was left on', () => {
+    const { container } = renderPanel(
+      { presentation: 'drawer' },
+      { open: true }
+    );
+
+    fireEvent.click(container.querySelector('[data-part="overlay"]') as Element);
+
+    expect(container.querySelector('[data-part="modal"]')).toBeNull();
+  });
+});
+
+describe('an empty panel', () => {
+  it('disappears on the storefront rather than offering a dead trigger', () => {
+    const { container } = renderPanel({}, { blocks: [] });
+
+    expect(container.innerHTML).toBe('');
+  });
+
+  it('still shows its drop target in the designer', () => {
+    const { container } = renderPanel({}, { isDesigner: true, blocks: [] });
+
+    expect(container.querySelector('[data-size-guide]')).toBeInTheDocument();
+  });
+});

package/src/blocks/__tests__/panel-legacy-golden.json

@@ -0,0 +1,7 @@
+{
+  "legacy-closed": "<div data-size-guide=\"\" data-size-guide-state=\"closed\"><button type=\"button\" data-size-guide-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"false\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 0px; margin: 0px; background: transparent; text-decoration: underline; cursor: pointer;\">Size guide</button></div>",
+  "legacy-open": "<div data-size-guide=\"\" data-size-guide-state=\"open\"><button type=\"button\" data-size-guide-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 0px; margin: 0px; background: transparent; text-decoration: underline; cursor: pointer;\" data-state=\"open\">Size guide</button><div data-size-guide-overlay=\"\" data-part=\"overlay\" data-state=\"open\" style=\"position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5);\"><div data-size-guide-content=\"\" data-size-guide-mode=\"modal\" data-part=\"modal\" data-state=\"open\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Size guide\" style=\"position: relative; width: 100%; max-width: 640px; max-height: 80vh; overflow: auto; padding: 24px; border-radius: 4px; background: rgb(255, 255, 255); color: rgb(17, 24, 39); text-align: left;\"><button type=\"button\" data-size-guide-close=\"\" data-part=\"close\" aria-label=\"Close\" style=\"position: absolute; top: 12px; right: 12px; background: transparent; cursor: pointer; padding: 0px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg></button><div data-testid=\"tb\" data-id=\"child-1\"></div></div></div></div>",
+  "legacy-open-titled": "<div data-size-guide=\"\" data-size-guide-state=\"open\"><button type=\"button\" data-size-guide-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 0px; margin: 0px; background: transparent; text-decoration: underline; cursor: pointer;\" data-state=\"open\">Size guide</button><div data-size-guide-overlay=\"\" data-part=\"overlay\" data-state=\"open\" style=\"position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5);\"><div data-size-guide-content=\"\" data-size-guide-mode=\"modal\" data-part=\"modal\" data-state=\"open\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Size chart\" style=\"position: relative; width: 100%; max-width: 900px; max-height: 80vh; overflow: auto; padding: 24px; border-radius: 4px; background: rgb(255, 255, 255); color: rgb(17, 24, 39); text-align: left;\"><button type=\"button\" data-size-guide-close=\"\" data-part=\"close\" aria-label=\"Close\" style=\"position: absolute; top: 12px; right: 12px; background: transparent; cursor: pointer; padding: 0px;\"><svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\"><path d=\"M6 6l12 12M18 6L6 18\"></path></svg></button><div data-size-guide-title=\"\" data-part=\"title\" style=\"margin-bottom: 12px; font-weight: 600;\">Size chart</div><div data-testid=\"tb\" data-id=\"child-1\"></div></div></div></div>",
+  "legacy-open-noclose": "<div data-size-guide=\"\" data-size-guide-state=\"open\"><button type=\"button\" data-size-guide-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"true\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 0px; margin: 0px; background: transparent; text-decoration: underline; cursor: pointer;\" data-state=\"open\">Size guide</button><div data-size-guide-overlay=\"\" data-part=\"overlay\" data-state=\"open\" style=\"position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5);\"><div data-size-guide-content=\"\" data-size-guide-mode=\"modal\" data-part=\"modal\" data-state=\"open\" role=\"dialog\" aria-modal=\"true\" aria-label=\"Size guide\" style=\"position: relative; width: 100%; max-width: 640px; max-height: 80vh; overflow: auto; padding: 24px; border-radius: 4px; background: rgb(255, 255, 255); color: rgb(17, 24, 39); text-align: left;\"><div data-testid=\"tb\" data-id=\"child-1\"></div></div></div></div>",
+  "legacy-designer": "<div data-size-guide=\"\" data-size-guide-state=\"inline\"><button type=\"button\" data-size-guide-trigger=\"\" data-part=\"trigger\" aria-haspopup=\"dialog\" aria-expanded=\"false\" style=\"display: inline-flex; align-items: center; gap: 6px; padding: 0px; margin: 0px; background: transparent; text-decoration: underline; cursor: pointer;\">Size guide</button><div data-size-guide-content=\"\" data-size-guide-mode=\"inline\" data-part=\"modal\" style=\"margin-top: 8px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 4px;\"><div data-testid=\"tb\" data-id=\"child-1\"></div></div></div>"
+}

package/src/blocks/block-renderer-registry.tsx

@@ -66,7 +66,7 @@ import OrderTrackingBlock from './order-tracking-block';
 import ProductBreadcrumbBlock from './product-breadcrumb-block';
 import ProductAttributesBlock from './product-attributes-block';
 import ProductRecommendationsBlock from './product-recommendations-block';
-import SizeGuideBlock from './size-guide-block';
+import PanelBlock from './panel-block';
 import AppliedFiltersBlock from './applied-filters-block';
 import ListingResultCountBlock from './listing-result-count-block';
 import CountdownBlock from './countdown-block';
@@ -187,7 +187,10 @@ blockRendererRegistry.register('checkout-summary-outlet', CheckoutSummaryOutletB
 blockRendererRegistry.register('product-breadcrumb', ProductBreadcrumbBlock);
 blockRendererRegistry.register('product-attributes', ProductAttributesBlock);
 blockRendererRegistry.register('product-recommendations', ProductRecommendationsBlock);
-blockRendererRegistry.register('size-guide', SizeGuideBlock);
+blockRendererRegistry.register('panel', PanelBlock);
+// Legacy alias: published widget JSON still carries `size-guide`, and the AI
+// generator manifest still emits it. Same renderer, same parts, same markup.
+blockRendererRegistry.register('size-guide', PanelBlock);
 blockRendererRegistry.register('applied-filters', AppliedFiltersBlock);
 blockRendererRegistry.register('listing-result-count', ListingResultCountBlock);
 blockRendererRegistry.register('countdown', CountdownBlock);