@akinon/pz-theme 2.0.31-rc.0 → 2.0.32-beta.0

package/src/theme-placeholder-wrapper.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useState, useMemo } from 'react';
 import ThemeSection, { Section } from './theme-section';
+import SectionErrorBoundary from './components/section-error-boundary';
+import { safeDeepClone } from './utils/safe-clone';
 import {
   registerPlaceholder,
   unregisterPlaceholder
@@ -600,7 +602,7 @@ export default function ThemePlaceholderWrapper({
                     return {
                       ...incomingSection,
                       blocks: incomingSection.blocks
-                        ? JSON.parse(JSON.stringify(incomingSection.blocks))
+                        ? safeDeepClone(incomingSection.blocks)
                         : [],
                       styles: incomingSection.styles
                         ? { ...incomingSection.styles }
@@ -738,54 +740,55 @@ export default function ThemePlaceholderWrapper({
                 isPublishWindowVisible(section.properties?.['publish-window']))
           )
           .map((section) => (
-            <ThemeSection
-              key={section.id}
-              section={section}
-              placeholderId={placeholderSlug}
-              pageContext={resolvedPageContext}
-              isDesigner={isDesigner}
-              isSelected={selectedSectionId === section.id}
-              selectedBlockId={selectedBlockId}
-              currentBreakpoint={currentBreakpoint}
-              onSelect={setSelectedSectionId}
-              onMoveUp={() =>
-                sendAction('MOVE_SECTION_UP', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onMoveDown={() =>
-                sendAction('MOVE_SECTION_DOWN', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onDuplicate={() =>
-                sendAction('DUPLICATE_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onToggleVisibility={() =>
-                sendAction('TOGGLE_SECTION_VISIBILITY', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onDelete={() =>
-                sendAction('DELETE_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id
-                })
-              }
-              onRename={(newLabel) =>
-                sendAction('RENAME_SECTION', {
-                  placeholderId: placeholderSlug,
-                  sectionId: section.id,
-                  label: newLabel
-                })
-              }
-            />
+            <SectionErrorBoundary key={section.id} sectionId={section.id}>
+              <ThemeSection
+                section={section}
+                placeholderId={placeholderSlug}
+                pageContext={resolvedPageContext}
+                isDesigner={isDesigner}
+                isSelected={selectedSectionId === section.id}
+                selectedBlockId={selectedBlockId}
+                currentBreakpoint={currentBreakpoint}
+                onSelect={setSelectedSectionId}
+                onMoveUp={() =>
+                  sendAction('MOVE_SECTION_UP', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id
+                  })
+                }
+                onMoveDown={() =>
+                  sendAction('MOVE_SECTION_DOWN', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id
+                  })
+                }
+                onDuplicate={() =>
+                  sendAction('DUPLICATE_SECTION', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id
+                  })
+                }
+                onToggleVisibility={() =>
+                  sendAction('TOGGLE_SECTION_VISIBILITY', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id
+                  })
+                }
+                onDelete={() =>
+                  sendAction('DELETE_SECTION', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id
+                  })
+                }
+                onRename={(newLabel) =>
+                  sendAction('RENAME_SECTION', {
+                    placeholderId: placeholderSlug,
+                    sectionId: section.id,
+                    label: newLabel
+                  })
+                }
+              />
+            </SectionErrorBoundary>
           ))}
       </div>
     </ThemeSettingsProvider>

package/src/theme-placeholder.tsx

@@ -8,6 +8,8 @@ import {
 import ThemePlaceholderWrapper from './theme-placeholder-wrapper';
 import { Section } from './theme-section';
 import { generateThemeCSS } from './utils';
+import { devWarn } from './utils/dev-warn';
+import { validateThemeSectionsInDev } from './schemas/theme-schema';
 
 type ThemePlaceholderData = {
   theme_editor_placeholder: Array<{
@@ -112,6 +114,10 @@ export default async function ThemePlaceholder({
         try {
           placeholderData = JSON.parse(placeholderData);
         } catch {
+          devWarn(
+            'ThemePlaceholder',
+            `Placeholder "${slug}" layout JSON is malformed; rendering no sections`
+          );
           placeholderData = [];
         }
       }
@@ -146,6 +152,10 @@ export default async function ThemePlaceholder({
               });
             } catch {
               // Not a collection widget either; sectionData stays null
+              devWarn(
+                'ThemePlaceholder',
+                `Section "${sectionSlug}" data could not be resolved as a regular or collection widget; rendering from schema only`
+              );
             }
           }
 
@@ -160,6 +170,13 @@ export default async function ThemePlaceholder({
               try {
                 return JSON.parse(attrData);
               } catch {
+                const trimmed = attrData.trim();
+                if (trimmed.startsWith('{') || trimmed.startsWith('[')) {
+                  devWarn(
+                    'ThemePlaceholder',
+                    `Block "${blockId}" value looks like JSON but failed to parse; using the raw string`
+                  );
+                }
                 return attrData;
               }
             } else if (typeof attrData === 'object' && 'value' in attrData) {
@@ -206,6 +223,13 @@ export default async function ThemePlaceholder({
             ? dataSources.find((ds) => ds.id === dataSourceId)
             : undefined;
 
+          if (dataSourceId && !dataSource) {
+            devWarn(
+              'ThemePlaceholder',
+              `Section "${sectionSlug}" references data source "${dataSourceId}" which was not found; rendering placeholder items`
+            );
+          }
+
           let dataSourceWithData = dataSource;
           if (dataSource && dataSource.details) {
             // Only fetch collection data if we have a valid widget slug
@@ -282,6 +306,11 @@ export default async function ThemePlaceholder({
       );
     }
 
+    // Dev-only, warn-only shape validation of the reconstructed tree. Surfaces
+    // structural drift between the editor/backend data and the render engine
+    // without changing what renders (no-op in production).
+    validateThemeSectionsInDev(sections);
+
     const themeCSS = generateThemeCSS(sections);
 
     return (

package/src/theme-section.tsx

@@ -11,6 +11,8 @@ import {
   buildIteratorBlock,
   resolveBlockBindings
 } from './utils/iterator-utils';
+import { devWarn } from './utils/dev-warn';
+import { safeDeepClone } from './utils/safe-clone';
 
 export interface Section {
   id: string;
@@ -434,6 +436,24 @@ export default function ThemeSection({
   const CustomSectionRenderer = hasTabBlocks
     ? sectionRendererRegistry.getRenderer('tabs')
     : sectionRendererRegistry.getRenderer(effectiveSection.type);
+
+  if (!CustomSectionRenderer && !hasTabBlocks) {
+    // An explicitly-typed section (not the generic default/custom) with no
+    // registered renderer is registry drift: it silently degrades to generic
+    // block rendering. Surface it in dev so the missing renderer is noticed.
+    const normalizedType = String(effectiveSection.type || '').toLowerCase();
+    if (
+      normalizedType &&
+      normalizedType !== 'default' &&
+      normalizedType !== 'custom'
+    ) {
+      devWarn(
+        'ThemeSection',
+        `No custom renderer registered for section type: "${effectiveSection.type}"; falling back to generic block rendering`
+      );
+    }
+  }
+
   const shouldApplyGenericBindings =
     String(effectiveSection.type || '').toLowerCase() === 'custom' ||
     effectiveSection.dataSource?.type === 'page-context';
@@ -806,7 +826,7 @@ export default function ThemeSection({
             ? { ...target.properties }
             : target.properties,
           styles: target.styles
-            ? JSON.parse(JSON.stringify(target.styles))
+            ? safeDeepClone(target.styles)
             : target.styles,
           blocks: target.blocks
             ? target.blocks.map((child, childIndex) =>
@@ -824,7 +844,7 @@ export default function ThemeSection({
                   ? { ...sourceCard.properties }
                   : sourceCard.properties,
                 styles: sourceCard.styles
-                  ? JSON.parse(JSON.stringify(sourceCard.styles))
+                  ? safeDeepClone(sourceCard.styles)
                   : sourceCard.styles,
                 blocks: sourceCard.blocks
                   ? sourceCard.blocks.map((child, childIndex) =>

package/src/utils/__tests__/css-safety.test.ts

@@ -0,0 +1,80 @@
+import {
+  neutralizeStyleTagBreakout,
+  escapeCssAttributeValue
+} from '../css-safety';
+import { generateThemeCSS } from '../index';
+
+describe('neutralizeStyleTagBreakout', () => {
+  it('neutralizes a </style> breakout so no parser-visible closing tag remains', () => {
+    const malicious = 'color: red</style><script>alert(1)</script>';
+    const safe = neutralizeStyleTagBreakout(malicious);
+
+    expect(safe).not.toMatch(/<\/style/i);
+    expect(safe).toContain('<\\/style');
+  });
+
+  it('is case-insensitive', () => {
+    expect(neutralizeStyleTagBreakout('a</STYLE>b')).not.toMatch(/<\/style/i);
+  });
+
+  it('catches </style even without a trailing > (a following newline can terminate it)', () => {
+    expect(neutralizeStyleTagBreakout('x</style')).not.toMatch(/<\/style/i);
+  });
+
+  it('leaves legitimate CSS untouched', () => {
+    const css = '[data-section-id="s"]{color:red;font-size:16px;}';
+    expect(neutralizeStyleTagBreakout(css)).toBe(css);
+  });
+});
+
+describe('escapeCssAttributeValue', () => {
+  it('escapes double quotes and backslashes', () => {
+    expect(escapeCssAttributeValue('a"b')).toBe('a\\"b');
+    expect(escapeCssAttributeValue('a\\b')).toBe('a\\\\b');
+  });
+
+  it('leaves a normal slug untouched', () => {
+    expect(escapeCssAttributeValue('section-hero-1')).toBe('section-hero-1');
+  });
+});
+
+// Minimal Section factory — generateThemeCSS only reads id/styles/blocks.
+const sectionWith = (over: Record<string, unknown>) =>
+  [
+    {
+      id: 's',
+      type: 'default',
+      name: 's',
+      label: 's',
+      properties: {},
+      styles: {},
+      blocks: [],
+      order: 0,
+      hidden: false,
+      ...over
+    }
+  ] as never;
+
+describe('generateThemeCSS — <style> breakout neutralized at the source', () => {
+  it('strips the </style> breakout from a malicious style value (stored XSS fix)', () => {
+    const css = generateThemeCSS(
+      sectionWith({
+        styles: { color: 'red</style><script>alert(document.cookie)</script>' }
+      })
+    );
+
+    // The only thing that can break out of a <style> is </style; it must be gone.
+    expect(css).not.toMatch(/<\/style/i);
+  });
+
+  it('escapes a quote injected through the section id selector', () => {
+    const css = generateThemeCSS(
+      sectionWith({ id: 'x"]{}body{display:none}', styles: { color: 'red' } })
+    );
+
+    // The crafted id is emitted with the quote escaped, so it cannot close the
+    // attribute selector and inject a new rule.
+    expect(css).toContain('x\\"]');
+    expect(css).not.toContain('[data-section-id="x"]');
+  });
+});

package/src/utils/__tests__/dev-warn.test.ts

@@ -0,0 +1,63 @@
+import { devWarn, resetDevWarnCacheForTests } from '../dev-warn';
+
+const setNodeEnv = (value: string | undefined): void => {
+  (process.env as Record<string, string | undefined>).NODE_ENV = value;
+};
+
+describe('devWarn', () => {
+  let warnSpy: jest.SpyInstance;
+  const originalNodeEnv = process.env.NODE_ENV;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    setNodeEnv(originalNodeEnv);
+  });
+
+  it('warns in non-production (jest runs with NODE_ENV=test)', () => {
+    devWarn('ThemeBlock', 'Unknown block type: "mystery"');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:ThemeBlock] Unknown block type: "mystery"'
+    );
+  });
+
+  it('is a no-op in production', () => {
+    setNodeEnv('production');
+
+    devWarn('ThemeBlock', 'Unknown block type: "mystery"');
+
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('emits each unique warning only once', () => {
+    devWarn('iterator', 'dataPath "products" resolved to a non-array');
+    devWarn('iterator', 'dataPath "products" resolved to a non-array');
+    devWarn('iterator', 'dataPath "products" resolved to a non-array');
+
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('warns separately for distinct messages and scopes', () => {
+    devWarn('ThemeBlock', 'Unknown block type: "a"');
+    devWarn('ThemeBlock', 'Unknown block type: "b"');
+    devWarn('ThemeSection', 'Unknown block type: "a"');
+
+    expect(warnSpy).toHaveBeenCalledTimes(3);
+  });
+
+  it('appends the optional detail argument', () => {
+    const detail = { sectionId: 'sec-1' };
+    devWarn('ThemePlaceholder', 'Malformed layout JSON', detail);
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:ThemePlaceholder] Malformed layout JSON',
+      detail
+    );
+  });
+});

package/src/utils/__tests__/safe-clone.test.ts

@@ -0,0 +1,42 @@
+import { safeDeepClone } from '../safe-clone';
+
+describe('safeDeepClone', () => {
+  it('deep-clones a nested object (new references, equal values)', () => {
+    const original = { a: 1, nested: { b: [1, 2, 3] } };
+    const cloned = safeDeepClone(original);
+
+    expect(cloned).toEqual(original);
+    expect(cloned).not.toBe(original);
+    expect(cloned.nested).not.toBe(original.nested);
+  });
+
+  it('isolates the clone from the original (mutation does not leak)', () => {
+    const original = { styles: { color: 'red' } };
+    const cloned = safeDeepClone(original);
+
+    cloned.styles.color = 'blue';
+
+    expect(original.styles.color).toBe('red');
+  });
+
+  it('never throws on a value JSON cannot serialize (BigInt)', () => {
+    // JSON.stringify throws on BigInt; the helper must degrade (to a
+    // structuredClone or the original) rather than crash the render.
+    const original = { big: BigInt(7), label: 'x' };
+
+    let result: unknown;
+    expect(() => {
+      result = safeDeepClone(original);
+    }).not.toThrow();
+    expect(result).toBeDefined();
+  });
+
+  it('never throws even when the value cannot be cloned at all', () => {
+    // JSON.stringify throws on the BigInt and structuredClone throws on the
+    // function; the helper degrades to the original reference instead of
+    // crashing the render.
+    const original = { big: BigInt(1), fn: () => undefined };
+
+    expect(() => safeDeepClone(original)).not.toThrow();
+  });
+});

package/src/utils/__tests__/style-warn.test.ts

@@ -0,0 +1,71 @@
+import { generateThemeCSS, getResponsiveValue } from '../index';
+import { resetDevWarnCacheForTests } from '../dev-warn';
+
+// Minimal Section factory — generateThemeCSS only reads id/styles/blocks.
+const sectionWith = (styles: Record<string, unknown>) =>
+  [
+    {
+      id: 'sec',
+      type: 'default',
+      name: 'sec',
+      label: 'sec',
+      properties: {},
+      styles,
+      blocks: [],
+      order: 0,
+      hidden: false
+    }
+  ] as never;
+
+describe('getResponsiveValue — array dev-warn', () => {
+  let warnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  it('warns and returns the fallback for an array', () => {
+    expect(getResponsiveValue([1, 2, 3], 'desktop', 'fb')).toBe('fb');
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:getResponsiveValue] Received an array where a scalar or per-breakpoint object was expected; using the fallback'
+    );
+  });
+
+  it('does not warn for a normal responsive object or scalar', () => {
+    getResponsiveValue({ desktop: '24px', mobile: '16px' }, 'mobile');
+    getResponsiveValue('24px', 'desktop');
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});
+
+describe('formatCSSValue (via generateThemeCSS) — unitless numeric string warn', () => {
+  let warnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
+  it('warns for a unitless numeric string on a unit property (font-size "16")', () => {
+    generateThemeCSS(sectionWith({ 'font-size': '16' }));
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:css] "font-size" got a unitless numeric string ("16"); the browser drops it (use a number or add a unit)'
+    );
+  });
+
+  it('stays silent for line-height (unitless is valid), "0", and unit-bearing values', () => {
+    generateThemeCSS(sectionWith({ 'line-height': '1.5' }));
+    generateThemeCSS(sectionWith({ padding: '0' }));
+    generateThemeCSS(sectionWith({ 'font-size': '16px' }));
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});

package/src/utils/css-safety.ts

@@ -0,0 +1,29 @@
+/**
+ * CSS-context safety helpers for theme styles that are emitted into a
+ * `<style dangerouslySetInnerHTML>` tag.
+ *
+ * A `<style>` element is HTML *raw text*: the parser ends it at the first
+ * `</style` it sees, so any `</style` that appears inside the generated CSS
+ * lets the following markup execute in the visitor's browser (stored XSS via
+ * editor-controlled style values). Legitimate CSS never contains the literal
+ * `</style`, so neutralizing it is safe for real themes.
+ */
+
+/**
+ * Make a generated CSS string safe to inline inside a `<style>` element by
+ * neutralizing every `</style` sequence (case-insensitive). The `<` is split
+ * from the following `/` so the HTML parser no longer recognizes a closing
+ * tag, while the only legitimate closing `</style>` (emitted by React around
+ * the value) stays intact.
+ */
+export const neutralizeStyleTagBreakout = (css: string): string =>
+  css.replace(/<\/style/gi, '<\\/style');
+
+/**
+ * Escape a value interpolated into a CSS attribute selector such as
+ * `[data-block-id="..."]`, so a crafted id cannot break out of the quoted
+ * value and inject extra rules. Legitimate ids (slugs) contain none of these
+ * characters, so this is a no-op for real data.
+ */
+export const escapeCssAttributeValue = (value: string): string =>
+  String(value).replace(/\\/g, '\\\\').replace(/"/g, '\\"');

package/src/utils/dev-warn.ts

@@ -0,0 +1,46 @@
+/**
+ * Development-only warning helper for the theme render engine.
+ *
+ * Warnings fire only when NODE_ENV is not 'production' (i.e. in development and
+ * in jest, where NODE_ENV === 'test'), so they are assertable from tests and
+ * never reach end users on a brand storefront. Each unique warning is emitted
+ * once to avoid flooding the console from React re-renders.
+ */
+
+const emitted = new Set<string>();
+
+/**
+ * Emit a one-time, development-only console warning.
+ *
+ * @param scope   Short subsystem tag, e.g. 'ThemeBlock' or 'iterator'.
+ * @param message Description of the unexpected condition. Include the offending
+ *                id/type/path in the message so distinct problems dedupe
+ *                independently (the dedup key is scope + message).
+ * @param detail  Optional extra context appended to the log.
+ */
+export const devWarn = (
+  scope: string,
+  message: string,
+  detail?: unknown
+): void => {
+  if (process.env.NODE_ENV === 'production') return;
+
+  const key = `${scope}::${message}`;
+  if (emitted.has(key)) return;
+  emitted.add(key);
+
+  const label = `[pz-theme:${scope}] ${message}`;
+  if (detail !== undefined) {
+    console.warn(label, detail);
+  } else {
+    console.warn(label);
+  }
+};
+
+/**
+ * Test-only: reset the dedup cache so the same warning can be asserted across
+ * multiple test cases.
+ */
+export const resetDevWarnCacheForTests = (): void => {
+  emitted.clear();
+};

package/src/utils/index.ts

@@ -1,5 +1,10 @@
 import React from 'react';
 import type { Block as ThemeBlockData } from '../theme-block';
+import { devWarn } from './dev-warn';
+import {
+  neutralizeStyleTagBreakout,
+  escapeCssAttributeValue
+} from './css-safety';
 
 export * from './publish-window';
 
@@ -178,6 +183,16 @@ export const getResponsiveValue = (
 ) => {
   if (value === undefined || value === null || value === '') return fallback;
   if (typeof value === 'object') {
+    if (Array.isArray(value)) {
+      // Arrays are typeof 'object' so they would be treated as a responsive
+      // map (arr['desktop'] is undefined), silently yielding the fallback. A
+      // responsive value should be a scalar or a per-breakpoint object.
+      devWarn(
+        'getResponsiveValue',
+        'Received an array where a scalar or per-breakpoint object was expected; using the fallback'
+      );
+      return fallback;
+    }
     const responsiveValue = value as Record<string, unknown>;
     const matched = responsiveValue[breakpoint];
     if (matched !== undefined) return matched;
@@ -425,6 +440,24 @@ const formatCSSValue = (property: string, value: string | number): string => {
     return `${value}px`;
   }
 
+  // A bare numeric string for a unit-requiring property (e.g. font-size: "16")
+  // emits "16" with no unit, which the browser drops — yet the inline-style
+  // path auto-pixels the same bare number, so it renders there. Surface this
+  // parity trap in dev; output is unchanged. line-height is excluded (a
+  // unitless number is valid there) and "0" is excluded (valid without a unit).
+  if (
+    typeof value === 'string' &&
+    kebabProperty !== 'line-height' &&
+    needsUnit.includes(kebabProperty) &&
+    /^-?\d+(?:\.\d+)?$/.test(value.trim()) &&
+    parseFloat(value) !== 0
+  ) {
+    devWarn(
+      'css',
+      `"${kebabProperty}" got a unitless numeric string ("${value}"); the browser drops it (use a number or add a unit)`
+    );
+  }
+
   return String(value);
 };
 
@@ -828,7 +861,9 @@ const collectBlockCSS = (
 
   blocks.forEach((block) => {
     if (block.styles && Object.keys(block.styles).length > 0) {
-      const selector = `[data-block-id="${block.styleSourceId || block.id}"]`;
+      const selector = `[data-block-id="${escapeCssAttributeValue(
+        block.styleSourceId || block.id
+      )}"]`;
       css += generateElementCSS(selector, block.styles, targetBreakpoint);
     }
 
@@ -848,7 +883,9 @@ export const generateThemeCSS = (
 
   sections.forEach((section) => {
     if (section.styles && Object.keys(section.styles).length > 0) {
-      const selector = `[data-section-id="${section.id}"]`;
+      const selector = `[data-section-id="${escapeCssAttributeValue(
+        section.id
+      )}"]`;
       css += generateElementCSS(selector, section.styles, targetBreakpoint);
     }
 
@@ -857,5 +894,7 @@ export const generateThemeCSS = (
     }
   });
 
-  return css;
+  // Neutralize any </style> breakout coming from editor-controlled style
+  // values before this string is inlined into a <style> tag (stored XSS fix).
+  return neutralizeStyleTagBreakout(css);
 };