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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.52-beta.0
+## 2.0.52
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.52-beta.0
-  - @akinon/theme-contract@2.0.52-beta.0
+- c3a713d: ZERO-4752: Pin a composed chrome slot for real instead of writing unread header variables
+  - @akinon/next@2.0.52
+  - @akinon/theme-contract@2.0.52
 
 ## 2.0.51
 

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

package/src/chrome/__tests__/sticky-slot.test.tsx

@@ -0,0 +1,223 @@
+import React from 'react';
+import { render, screen, cleanup } from '@testing-library/react';
+
+/**
+ * Sticky used to be a theme setting that wrote three CSS variables nothing
+ * read, so a designer could turn "sticky header" on and nothing moved. The pin
+ * now lands on the slot element, which is the only box in the chain tall
+ * enough for a pin to travel — everything inside it hugs the header's own
+ * height.
+ *
+ * Two things have to hold together, and only ever did in a browser before:
+ * the slot emits the pinned declarations, AND the body overflow patch that
+ * sticky depends on fires with them. A pinned slot under the app template's
+ * `body.overflow-x-hidden` is silently unpinned without the second half.
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const compositionState = jest.fn<any, [string]>();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const themeConfig = jest.fn<any, []>();
+
+jest.mock('../composition-source', () => ({
+  getSlugCompositionState: (slug: string) => compositionState(slug)
+}));
+
+jest.mock('../theme-config-source', () => ({
+  getThemeConfig: () => themeConfig()
+}));
+
+// The placeholder is an async server component that reaches for the data
+// layer; what the slot decides about itself is what is under test.
+jest.mock('../../theme-placeholder', () => ({
+  __esModule: true,
+  default: ({ slug }: { slug: string }) => (
+    <div data-testid={`composition-${slug}`} />
+  )
+}));
+
+import ChromeSlot from '../chrome-slot';
+import {
+  resolveSlotSticky,
+  slotStickyStyle,
+  SLOT_STICKY_DEFAULTS
+} from '../sticky-slot';
+
+const composed = { kind: 'composed', sectionCount: 1 } as const;
+const uncomposed = { kind: 'empty' } as const;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderSlot = async (props: any) => {
+  const tree = await ChromeSlot(props);
+  return render(tree);
+};
+
+const slotElement = (slug: string) =>
+  document.querySelector(`[data-chrome-slot="${slug}"]`) as HTMLElement;
+
+describe('resolveSlotSticky', () => {
+  it('pins a composed header when the designer turned the setting on', () => {
+    expect(
+      resolveSlotSticky({
+        slug: 'header',
+        hasComposition: true,
+        themeSettings: { mainMenuSticky: true }
+      })
+    ).toEqual(SLOT_STICKY_DEFAULTS);
+  });
+
+  it('leaves an uncomposed header alone', () => {
+    // Still the brand's own header inside the slot, and the brand's stylesheet
+    // already decides how it behaves — a second, competing rule is worse than
+    // no rule.
+    expect(
+      resolveSlotSticky({
+        slug: 'header',
+        hasComposition: false,
+        themeSettings: { mainMenuSticky: true }
+      })
+    ).toBeNull();
+  });
+
+  it('does not spread the header setting to other slugs', () => {
+    expect(
+      resolveSlotSticky({
+        slug: 'footer',
+        hasComposition: true,
+        themeSettings: { mainMenuSticky: true }
+      })
+    ).toBeNull();
+  });
+
+  it('honours slot configuration whether or not the slug is composed', () => {
+    expect(
+      resolveSlotSticky({ slug: 'checkout-top-body', sticky: true, hasComposition: false })
+    ).toEqual(SLOT_STICKY_DEFAULTS);
+  });
+
+  it('lets a slot refuse the theme setting', () => {
+    expect(
+      resolveSlotSticky({
+        slug: 'header',
+        sticky: false,
+        hasComposition: true,
+        themeSettings: { mainMenuSticky: true }
+      })
+    ).toBeNull();
+  });
+
+  it('overrides only what the configuration names', () => {
+    expect(
+      resolveSlotSticky({
+        slug: 'header',
+        sticky: { top: '64px' },
+        hasComposition: true
+      })
+    ).toEqual({ top: '64px', zIndex: SLOT_STICKY_DEFAULTS.zIndex });
+  });
+
+  it('emits nothing at all for a slot that is not pinned', () => {
+    expect(slotStickyStyle(null)).toBeUndefined();
+  });
+});
+
+describe('ChromeSlot sticky', () => {
+  beforeEach(() => {
+    compositionState.mockReset();
+    themeConfig.mockReset();
+    themeConfig.mockReturnValue({ settings: null, dataSources: [] });
+    // What the app template ships, and what breaks sticky.
+    document.body.className = 'overflow-x-hidden';
+    document.body.style.overflowX = '';
+  });
+
+  it('pins the slot element for a composed header with the setting on', async () => {
+    compositionState.mockReturnValue(composed);
+    themeConfig.mockReturnValue({
+      settings: { mainMenuSticky: true },
+      dataSources: []
+    });
+
+    await renderSlot({ slug: 'header', fallback: <div>brand header</div> });
+
+    const slot = slotElement('header');
+    expect(slot.style.position).toBe('sticky');
+    expect(slot.style.top).toBe('0px');
+    expect(slot.style.zIndex).toBe('40');
+    expect(slot.dataset.sticky).toBe('true');
+    // The composition still renders — pinning is a wrapper concern only.
+    expect(screen.getByTestId('composition-header')).toBeInTheDocument();
+  });
+
+  it('keeps horizontal overflow clipped rather than hidden while pinned', async () => {
+    compositionState.mockReturnValue(composed);
+    themeConfig.mockReturnValue({
+      settings: { mainMenuSticky: true },
+      dataSources: []
+    });
+
+    const view = await renderSlot({ slug: 'header' });
+
+    // `hidden` would make body a scroll container and kill the pin; `clip`
+    // clips the same pixels without one, so wide sections still cannot produce
+    // a horizontal scrollbar.
+    expect(document.body.style.overflowX).toBe('clip');
+    expect(document.body.className).toBe('overflow-x-hidden');
+
+    view.unmount();
+    expect(document.body.style.overflowX).toBe('');
+  });
+
+  it('holds the overflow patch until the last pinned slot leaves', async () => {
+    compositionState.mockReturnValue(composed);
+
+    const promo = await renderSlot({ slug: 'header', sticky: true });
+    const bar = await renderSlot({ slug: 'checkout-top-body', sticky: true });
+
+    expect(document.body.style.overflowX).toBe('clip');
+
+    promo.unmount();
+    expect(document.body.style.overflowX).toBe('clip');
+
+    bar.unmount();
+    expect(document.body.style.overflowX).toBe('');
+  });
+
+  it('leaves an unpinned slot and the page overflow untouched', async () => {
+    compositionState.mockReturnValue(composed);
+
+    await renderSlot({ slug: 'header' });
+
+    const slot = slotElement('header');
+    expect(slot.getAttribute('style')).toBeNull();
+    expect(slot.dataset.sticky).toBeUndefined();
+    expect(document.body.style.overflowX).toBe('');
+  });
+
+  it('pins an uncomposed slot only when the mounting code asked for it', async () => {
+    compositionState.mockReturnValue(uncomposed);
+    themeConfig.mockReturnValue({
+      settings: { mainMenuSticky: true },
+      dataSources: []
+    });
+
+    await renderSlot({ slug: 'header', fallback: <div>brand header</div> });
+    expect(slotElement('header').style.position).toBe('');
+    cleanup();
+
+    await renderSlot({
+      slug: 'header',
+      sticky: true,
+      fallback: <div>brand header</div>
+    });
+    expect(slotElement('header').style.position).toBe('sticky');
+  });
+
+  it('does not read the theme config when the mounting code decided', async () => {
+    compositionState.mockReturnValue(composed);
+
+    await renderSlot({ slug: 'header', sticky: false });
+
+    expect(themeConfig).not.toHaveBeenCalled();
+  });
+});

package/src/chrome/__tests__/theme-config-source.test.ts

@@ -0,0 +1,96 @@
+/**
+ * The theme-config parser moved out of ThemePlaceholder so a ChromeSlot can
+ * ask the same question (is this slot pinned?) without a second read and
+ * without a second copy of the parse. These pin the shapes a backend actually
+ * sends — a v1 attribute arrives wrapped in `{ value }`, a v2 one does not —
+ * because getting either wrong drops every data source on the page.
+ */
+const getWidgetData = jest.fn();
+
+jest.mock('@akinon/next/data/server', () => ({
+  getWidgetData: (...args: unknown[]) => getWidgetData(...args)
+}));
+
+import { getThemeConfig, readThemeConfig } from '../theme-config-source';
+
+describe('readThemeConfig', () => {
+  it('reads settings and data sources from a JSON string attribute', () => {
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_settings: JSON.stringify({ mainMenuSticky: true }),
+          theme_dataSources: JSON.stringify([{ id: 'ds-1' }])
+        }
+      })
+    ).toEqual({
+      settings: { mainMenuSticky: true },
+      dataSources: [{ id: 'ds-1' }]
+    });
+  });
+
+  it('reads the v1 wrapped attribute shape', () => {
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_settings: { value: JSON.stringify({ mainMenuSticky: true }) },
+          theme_dataSources: { value: [{ id: 'ds-1' }] }
+        }
+      })
+    ).toEqual({
+      settings: { mainMenuSticky: true },
+      dataSources: [{ id: 'ds-1' }]
+    });
+  });
+
+  it('reads an already-parsed attribute', () => {
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_settings: { mainMenuSticky: false },
+          theme_dataSources: [{ id: 'ds-1' }]
+        }
+      })
+    ).toEqual({
+      settings: { mainMenuSticky: false },
+      dataSources: [{ id: 'ds-1' }]
+    });
+  });
+
+  it('keeps the half it can read when the other half is malformed', () => {
+    const error = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+
+    expect(
+      readThemeConfig({
+        attributes: {
+          theme_settings: '{not json',
+          theme_dataSources: JSON.stringify([{ id: 'ds-1' }])
+        }
+      })
+    ).toEqual({ settings: null, dataSources: [{ id: 'ds-1' }] });
+
+    error.mockRestore();
+  });
+
+  it('answers empty for a brand with no theme at all', () => {
+    expect(readThemeConfig(null)).toEqual({ settings: null, dataSources: [] });
+    expect(readThemeConfig({ attributes: {} })).toEqual({
+      settings: null,
+      dataSources: []
+    });
+  });
+});
+
+describe('getThemeConfig', () => {
+  beforeEach(() => getWidgetData.mockReset());
+
+  it('answers empty rather than throwing when no widget exists', async () => {
+    // theme-config is optional: a brand that has never opened the editor must
+    // still render every placeholder on the page.
+    getWidgetData.mockRejectedValue(new Error('404'));
+
+    await expect(getThemeConfig()).resolves.toEqual({
+      settings: null,
+      dataSources: []
+    });
+  });
+});

package/src/chrome/chrome-slot.tsx

@@ -2,7 +2,14 @@ import React from 'react';
 import ThemePlaceholder from '../theme-placeholder';
 import { warnAboutUncomposedSlot } from './composition-state';
 import { getSlugCompositionState } from './composition-source';
+import { getThemeConfig } from './theme-config-source';
 import { ChromeFallback } from './chrome-fallback';
+import {
+  resolveSlotSticky,
+  slotStickyStyle,
+  SlotStickyConfig
+} from './sticky-slot';
+import { StickySlotOverflow } from './sticky-slot-overflow';
 
 interface ChromeSlotProps {
   /** Placeholder slug the editor composes into ('header', 'product-page-body', …) */
@@ -34,6 +41,16 @@ interface ChromeSlotProps {
    * all: two competing CTAs for one slug is worse than none.
    */
   emptyZoneBand?: boolean;
+  /**
+   * Pin the slot to the top of the viewport: `true` for the defaults, an
+   * object to override `top` / `zIndex`, `false` to refuse the theme setting.
+   *
+   * Left unset, a composed header slot follows the designer's `mainMenuSticky`
+   * theme setting. Pinning belongs to the slot element rather than to a class
+   * the brand puts on it, because the slot is the only box in the chain that
+   * still has the page to travel down.
+   */
+  sticky?: SlotStickyConfig;
 }
 
 /**
@@ -48,7 +65,8 @@ export default async function ChromeSlot({
   pageContext = null,
   className,
   fallbackClassName,
-  emptyZoneBand = true
+  emptyZoneBand = true,
+  sticky
 }: ChromeSlotProps) {
   // Shared with ComposableRegion and memoized per request, so a slug mounted by
   // both is fetched once and both reach the same conclusion.
@@ -59,9 +77,25 @@ export default async function ChromeSlot({
   // for why "missing" and "empty" must not read as the same thing.
   warnAboutUncomposedSlot(slug, state);
 
+  // Only read when the mounting code said nothing, and memoized per request, so
+  // a page full of slots costs at most one theme-config read.
+  const themeSettings =
+    sticky === undefined ? (await getThemeConfig()).settings : null;
+  const pinned = resolveSlotSticky({
+    slug,
+    sticky,
+    hasComposition,
+    themeSettings
+  });
+
   if (hasComposition) {
     return (
-      <div data-chrome-slot={slug} className={className}>
+      <div
+        data-chrome-slot={slug}
+        data-sticky={pinned ? 'true' : undefined}
+        className={className}
+        style={slotStickyStyle(pinned)}
+      >
         {/* The fallback ships hidden: on the live site it never renders, but
             in the designer it must be able to COME BACK when the last
             section is removed — without it in the tree, deleting a menu or
@@ -82,13 +116,19 @@ export default async function ChromeSlot({
         ) : emptyZoneBand ? (
           <ChromeFallback slug={slug} emptyZone initiallyOverridden />
         ) : null}
+        {pinned && <StickySlotOverflow />}
         <ThemePlaceholder slug={slug} pageContext={pageContext} />
       </div>
     );
   }
 
   return (
-    <div data-chrome-slot={slug} className={className}>
+    <div
+      data-chrome-slot={slug}
+      data-sticky={pinned ? 'true' : undefined}
+      className={className}
+      style={slotStickyStyle(pinned)}
+    >
       {fallback ? (
         <ChromeFallback slug={slug} wrapperClassName={fallbackClassName}>
           {fallback}
@@ -99,6 +139,7 @@ export default async function ChromeSlot({
         // live site keeps rendering nothing.
         <ChromeFallback slug={slug} emptyZone />
       ) : null}
+      {pinned && <StickySlotOverflow />}
       {/* Empty until the designer overrides this area from the editor */}
       <ThemePlaceholder slug={slug} pageContext={pageContext} />
     </div>

package/src/chrome/sticky-slot-overflow.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { useEffect } from 'react';
+
+/**
+ * Keeps a pinned slot's `position: sticky` alive.
+ *
+ * The app template puts `overflow-x-hidden` on `body` so a wide section cannot
+ * produce a horizontal scrollbar, and an ancestor that *hides* overflow becomes
+ * a scroll container — which is the box a sticky descendant pins itself inside,
+ * so the pin dies at the header's own height. `clip` clips the same pixels
+ * without creating that scroll container, which is why the patch exists at all.
+ *
+ * It used to live in the `mainMenuSticky` branch of the theme-settings
+ * injector, which meant it only ever fired for a setting nothing else honoured,
+ * and never fired for a slot the designer actually pinned.
+ *
+ * Ref-counted because a page can pin more than one slot (a promo bar above a
+ * header): the first to unmount must not undo the patch the others still need.
+ */
+let pinnedSlots = 0;
+let overflowXToRestore: string | null = null;
+
+export function StickySlotOverflow() {
+  useEffect(() => {
+    if (pinnedSlots === 0) {
+      overflowXToRestore = document.body.style.overflowX;
+      document.body.style.overflowX = 'clip';
+    }
+
+    pinnedSlots += 1;
+
+    return () => {
+      pinnedSlots -= 1;
+
+      if (pinnedSlots === 0) {
+        document.body.style.overflowX = overflowXToRestore ?? '';
+        overflowXToRestore = null;
+      }
+    };
+  }, []);
+
+  return null;
+}

package/src/chrome/sticky-slot.ts

@@ -0,0 +1,70 @@
+import type { CSSProperties } from 'react';
+
+import { PLACEHOLDER_SLUGS } from './placeholder-slugs';
+
+/** The values a pinned slot renders with. */
+export interface SlotSticky {
+  top: number | string;
+  zIndex: number;
+}
+
+/**
+ * How a mounted slot asks to be pinned: `true` for the defaults, an object to
+ * override one of them, `false` to refuse the designer's theme setting.
+ */
+export type SlotStickyConfig = boolean | Partial<SlotSticky>;
+
+/**
+ * Inherited from the `--theme-header-position` / `-top` / `-z-index` variables
+ * this replaces, so anything a brand had layered against the (never honoured)
+ * sticky header lands on the same stacking order.
+ */
+export const SLOT_STICKY_DEFAULTS: SlotSticky = { top: 0, zIndex: 40 };
+
+/**
+ * Whether a chrome slot pins itself, and with what.
+ *
+ * Two sources, deliberately not symmetric:
+ *
+ * `sticky` is the mounting code's own decision, so it holds for whichever
+ * markup the slot ends up rendering.
+ *
+ * `mainMenuSticky` is the designer's, and it only pins a slot that is actually
+ * composed. An uncomposed header slot is still wrapping the brand's own
+ * header, whose stylesheet already decides how that header behaves; pinning
+ * the wrapper around it would layer a second, competing rule onto markup this
+ * feature does not own.
+ */
+export const resolveSlotSticky = ({
+  slug,
+  sticky,
+  hasComposition,
+  themeSettings
+}: {
+  slug: string;
+  sticky?: SlotStickyConfig;
+  hasComposition: boolean;
+  themeSettings?: Record<string, unknown> | null;
+}): SlotSticky | null => {
+  if (sticky === false) return null;
+  if (sticky === true) return { ...SLOT_STICKY_DEFAULTS };
+  if (sticky) return { ...SLOT_STICKY_DEFAULTS, ...sticky };
+
+  if (!hasComposition) return null;
+  if (slug !== PLACEHOLDER_SLUGS.header) return null;
+
+  return themeSettings?.mainMenuSticky ? { ...SLOT_STICKY_DEFAULTS } : null;
+};
+
+/**
+ * The pin goes on the slot element itself, not on anything the composition
+ * renders: every box inside the slot hugs the composed header's own height, so
+ * a `position: sticky` set in there has no distance left to travel. The slot's
+ * parent is the page-height wrapper, which is what makes the pin real.
+ */
+export const slotStickyStyle = (
+  sticky: SlotSticky | null
+): CSSProperties | undefined =>
+  sticky
+    ? { position: 'sticky', top: sticky.top, zIndex: sticky.zIndex }
+    : undefined;

package/src/chrome/theme-config-source.ts

@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { getWidgetData } from '@akinon/next/data/server';
+
+/**
+ * The `theme-config` widget, read and parsed once per request.
+ *
+ * It carries the two things the render engine needs before any section renders
+ * — the designer's theme settings and the data sources sections bind to — and
+ * every placeholder on the page used to fetch and parse it for itself. Now
+ * that a ChromeSlot also has to consult the settings (to know whether it is
+ * pinned) that would be another read per slot, so the read lives here and is
+ * memoized for the request.
+ */
+export interface ThemeConfig {
+  settings: Record<string, unknown> | null;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  dataSources: any[];
+}
+
+type ThemeConfigWidget = {
+  attributes?: Record<string, unknown> | null;
+} | null;
+
+/**
+ * Attribute values arrive either bare or wrapped in `{ value }`, depending on
+ * which backend and which core version answered.
+ */
+const unwrapAttribute = (raw: unknown): unknown => {
+  if (raw && typeof raw === 'object' && !Array.isArray(raw) && 'value' in raw) {
+    return (raw as { value?: unknown }).value ?? raw;
+  }
+
+  return raw;
+};
+
+export const readThemeConfig = (data: ThemeConfigWidget): ThemeConfig => {
+  const config: ThemeConfig = { settings: null, dataSources: [] };
+  const attributes = data?.attributes;
+
+  if (!attributes) return config;
+
+  if (attributes.theme_dataSources) {
+    try {
+      const resolved = unwrapAttribute(attributes.theme_dataSources);
+
+      if (typeof resolved === 'string') {
+        config.dataSources = JSON.parse(resolved);
+      } else if (Array.isArray(resolved)) {
+        config.dataSources = resolved;
+      }
+    } catch (error) {
+      console.error('Failed to parse theme_dataSources:', error);
+    }
+  }
+
+  if (attributes.theme_settings) {
+    try {
+      const resolved = unwrapAttribute(attributes.theme_settings);
+
+      if (typeof resolved === 'string') {
+        config.settings = JSON.parse(resolved);
+      } else if (resolved && typeof resolved === 'object') {
+        config.settings = resolved as Record<string, unknown>;
+      }
+    } catch (error) {
+      console.error('Failed to parse theme_settings:', error);
+    }
+  }
+
+  return config;
+};
+
+const load = async (): Promise<ThemeConfig> => {
+  try {
+    // The generic is the widget's attributes bag, not the widget wrapper
+    const data = await getWidgetData<{
+      theme_settings?: unknown;
+      theme_dataSources?: unknown;
+    }>({ slug: 'theme-config' });
+
+    return readThemeConfig(data as ThemeConfigWidget);
+  } catch {
+    // A brand with no published theme still renders: no settings, no sources.
+    return { settings: null, dataSources: [] };
+  }
+};
+
+// `React.cache` exists on the RSC-capable React this package renders under;
+// fall back to the raw function on older cores, where correctness is identical
+// and the only cost is a second fetch.
+const cache = (React as { cache?: <T>(fn: T) => T }).cache;
+
+export const getThemeConfig = cache ? cache(load) : load;

package/src/index.ts

@@ -35,6 +35,7 @@ export {
   LiveAccountOrderPageContext
 } from './chrome/live-order-page-context';
 export { LiveCheckoutPageContext } from './chrome/live-checkout-page-context';
+export type { SlotSticky, SlotStickyConfig } from './chrome/sticky-slot';
 
 export {
   buildProductPageContext,

package/src/theme-placeholder-wrapper.tsx

@@ -96,23 +96,10 @@ const injectThemeColors = (settings: Record<string, unknown>) => {
     root.style.removeProperty('--theme-breadcrumb-icon-display');
   }
 
-  if (settings.mainMenuSticky !== undefined) {
-    const isSticky = settings.mainMenuSticky;
-    root.style.setProperty(
-      '--theme-header-position',
-      isSticky ? 'sticky' : 'relative'
-    );
-    root.style.setProperty('--theme-header-top', isSticky ? '0' : 'auto');
-    root.style.setProperty('--theme-header-z-index', isSticky ? '40' : 'auto');
-
-    // Sticky positioning requires ancestors to not have overflow: hidden
-    // We force overflow-x to 'clip' (modern browsers) or 'visible' to fix this
-    if (isSticky) {
-      document.body.style.overflowX = 'clip';
-    } else {
-      document.body.style.overflowX = '';
-    }
-  }
+  // `mainMenuSticky` is deliberately not handled here: it used to write three
+  // --theme-header-* variables for a brand's own header CSS to read, which
+  // nothing ever did, and a composed header is not the brand's markup anyway.
+  // It is answered where the pin can actually work — chrome/sticky-slot.ts.
 };
 
 /**

package/src/theme-placeholder.tsx

@@ -56,6 +56,7 @@ import { Section } from './theme-section';
 import { generateThemeCSS } from './utils';
 import { devWarn } from './utils/dev-warn';
 import { validateThemeSectionsInDev } from './schemas/theme-schema';
+import { getThemeConfig } from './chrome/theme-config-source';
 
 type ThemePlaceholderData = {
   theme_editor_placeholder: Array<{
@@ -74,58 +75,10 @@ export default async function ThemePlaceholder({
   pageContext = null
 }: ThemePlaceholderProps) {
   try {
-    let dataSources: any[] = [];
-    let themeSettings: Record<string, unknown> | null = null;
-    try {
-      const themeConfigData = await getWidgetData<any>({
-        slug: 'theme-config'
-      });
-
-      if (themeConfigData?.attributes?.theme_dataSources) {
-        try {
-          const raw = themeConfigData.attributes.theme_dataSources;
-          // Handle both plain string/array and { value: "..." } attribute format
-          const resolved =
-            typeof raw === 'string'
-              ? raw
-              : typeof raw === 'object' && raw !== null && !Array.isArray(raw)
-              ? (raw as { value?: any }).value ?? raw
-              : raw;
-
-          if (typeof resolved === 'string') {
-            dataSources = JSON.parse(resolved);
-          } else if (Array.isArray(resolved)) {
-            dataSources = resolved;
-          }
-        } catch (e) {
-          console.error('Failed to parse theme_dataSources:', e);
-        }
-      }
-
-      if (themeConfigData?.attributes?.theme_settings) {
-        try {
-          const rawSettings = themeConfigData.attributes.theme_settings;
-          const resolvedValue =
-            typeof rawSettings === 'string'
-              ? rawSettings
-              : typeof rawSettings === 'object' && rawSettings !== null
-              ? (rawSettings as { value?: string }).value ?? rawSettings
-              : null;
-
-          if (resolvedValue) {
-            if (typeof resolvedValue === 'string') {
-              themeSettings = JSON.parse(resolvedValue);
-            } else if (typeof resolvedValue === 'object') {
-              themeSettings = resolvedValue as Record<string, unknown>;
-            }
-          }
-        } catch (e) {
-          console.error('Failed to parse theme_settings:', e);
-        }
-      }
-    } catch (configError) {
-      // theme-config is optional for placeholder rendering
-    }
+    // theme-config is optional for placeholder rendering, and the reader is
+    // memoized per request — a page with several placeholders, or a ChromeSlot
+    // asking the same question to decide whether it is pinned, reads it once.
+    const { dataSources, settings: themeSettings } = await getThemeConfig();
 
     let data: { slug?: string; attributes?: { theme_editor_placeholder?: unknown; [key: string]: unknown } } | null = null;
     try {