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

package/CHANGELOG.md

@@ -1,11 +1,15 @@
 # @akinon/pz-theme
 
-## 2.0.31-beta.0
+## 2.0.31
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd75]
-  - @akinon/next@2.0.31-beta.0
+- 7717c4e: ZERO-4594: Make the render engine resilient to a single bad section. Every section is now wrapped in an error boundary, so a throwing custom section/block renderer is skipped (and dev-warned) instead of unmounting the whole placeholder. Unguarded `JSON.parse(JSON.stringify(...))` style/block deep-clones are replaced with a `safeDeepClone` helper that degrades gracefully instead of throwing on non-serializable values. No output change for healthy themes.
+- 238fbdb: ZERO-4594: Add dev-only shape validation (zod) for the theme section tree. During the server render, each section and its nested blocks are validated against a loose structural schema; malformed shapes (missing id/type, non-array blocks, non-object styles) are surfaced via a single dev-only warning naming the offending section. Validation runs only outside production and never drops or mutates data, so render output is unchanged. Adds `zod` as an explicit dependency (it was previously present only transitively).
+- d7f9621: ZERO-4594: Add dev-only render-engine warnings (devWarn) that surface previously silent failures — unknown block/section types (registry drift), malformed placeholder layout JSON, section data that cannot be resolved, missing/renamed data sources, iterator paths resolving to a non-array, and malformed visibility rules. Warnings fire only outside production (assertable in tests) and never change render output; all existing graceful fallbacks are preserved.
+- cd7c590: ZERO-4594: Add dev-only warnings for responsive-value and CSS-unit mistakes. `getResponsiveValue` warns when handed an array (which it silently treats as an empty responsive map), and the emitted-CSS path warns when a unit-requiring property receives a unitless numeric string (e.g. `font-size: "16"`) — the browser drops it even though the inline-style path auto-pixels the same bare number, a silent parity trap. Dev-only (stripped in production); render output is unchanged.
+- d2fe927: ZERO-4594: Harden theme CSS output against `</style>` tag breakout (security fix). Editor-controlled style values and section/block ids that flow into `<style dangerouslySetInnerHTML>` are now neutralized/escaped at the source — the generated CSS from `generateThemeCSS` (theme placeholder) and the shipping-threshold-progress section's dynamic CSS pass through a `</style>`-neutralizing step, and ids interpolated into attribute selectors are escaped — so injected markup can no longer close the style element and execute in a visitor's browser. No output change for legitimate themes.
+  - @akinon/next@2.0.31
 
 ## 2.0.30
 

package/jest.config.js

@@ -36,10 +36,13 @@ module.exports = {
     '^.+\\.(ts|tsx)$': [
       'ts-jest',
       {
+        // Transpile-only: pz-theme has no tsconfig and is consumed by brands
+        // via SWC transpilation (never type-checked), so tests verify runtime
+        // behavior, not types. `diagnostics: false` keeps the runner
+        // deterministic (no cache-dependent type-check surprises) and matches
+        // how the package is actually built downstream.
+        diagnostics: false,
         tsconfig: {
-          // Transpile-only: avoids whole-program type-checking (pz-theme has
-          // no tsconfig and relies on consumer transpilation) while still
-          // eliding type-only imports such as `import { Block }`.
           isolatedModules: true,
           jsx: 'react-jsx',
           esModuleInterop: true,

package/package.json

@@ -1,24 +1,25 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.31-beta.0",
+  "version": "2.0.31",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.31-beta.0",
+    "@akinon/next": "2.0.31",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
-    "tailwind-merge": "^2.5.4"
+    "tailwind-merge": "^2.5.4",
+    "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.31-beta.0",
+    "@akinon/next": "2.0.31",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/__tests__/theme-block.test.tsx

@@ -12,6 +12,7 @@ jest.mock('../components/with-designer-features', () => ({
 }));
 
 import ThemeBlock from '../theme-block';
+import { resetDevWarnCacheForTests } from '../utils/dev-warn';
 
 const props = (over: Record<string, unknown> = {}) =>
   ({
@@ -31,6 +32,17 @@ const props = (over: Record<string, unknown> = {}) =>
   } as any);
 
 describe('ThemeBlock — unknown block type', () => {
+  let warnSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+  });
+
   it('renders nothing in production (no debug text leaks to end users)', () => {
     const { container } = render(<ThemeBlock {...props({ isDesigner: false })} />);
     expect(container.textContent).not.toMatch(/Unknown block type/);
@@ -43,4 +55,11 @@ describe('ThemeBlock — unknown block type', () => {
       'Unknown block type: nonexistent-xyz'
     );
   });
+
+  it('dev-warns naming the missing renderer (catches registry drift)', () => {
+    render(<ThemeBlock {...props({ isDesigner: false })} />);
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:ThemeBlock] No renderer registered for block type: "nonexistent-xyz"'
+    );
+  });
 });

package/src/components/__tests__/section-error-boundary.test.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import SectionErrorBoundary from '../section-error-boundary';
+import { resetDevWarnCacheForTests } from '../../utils/dev-warn';
+
+const Boom = (): React.ReactElement => {
+  throw new Error('section blew up');
+};
+
+describe('SectionErrorBoundary', () => {
+  let warnSpy: jest.SpyInstance;
+  let errorSpy: jest.SpyInstance;
+
+  beforeEach(() => {
+    resetDevWarnCacheForTests();
+    warnSpy = jest.spyOn(console, 'warn').mockImplementation(() => undefined);
+    // React logs caught render errors to console.error; silence it so the test
+    // output stays clean.
+    errorSpy = jest.spyOn(console, 'error').mockImplementation(() => undefined);
+  });
+
+  afterEach(() => {
+    warnSpy.mockRestore();
+    errorSpy.mockRestore();
+  });
+
+  it('renders its children when nothing throws', () => {
+    render(
+      <SectionErrorBoundary sectionId="sec-ok">
+        <div data-testid="child">ok</div>
+      </SectionErrorBoundary>
+    );
+
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('renders nothing and dev-warns (naming the section) when a child throws', () => {
+    const { container } = render(
+      <SectionErrorBoundary sectionId="sec-boom">
+        <Boom />
+      </SectionErrorBoundary>
+    );
+
+    // The broken section is skipped — no markup leaks to end users.
+    expect(container).toBeEmptyDOMElement();
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:SectionErrorBoundary] Section "sec-boom" failed to render and was skipped',
+      expect.any(Error)
+    );
+  });
+
+  it('falls back to "unknown" when no sectionId is provided', () => {
+    render(
+      <SectionErrorBoundary>
+        <Boom />
+      </SectionErrorBoundary>
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      '[pz-theme:SectionErrorBoundary] Section "unknown" failed to render and was skipped',
+      expect.any(Error)
+    );
+  });
+});

package/src/components/section-error-boundary.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import React from 'react';
+import { devWarn } from '../utils/dev-warn';
+
+interface SectionErrorBoundaryProps {
+  sectionId?: string;
+  children: React.ReactNode;
+}
+
+interface SectionErrorBoundaryState {
+  hasError: boolean;
+}
+
+/**
+ * Isolates a single section's render. A throw in one custom section/block
+ * renderer skips only that section instead of unmounting the whole placeholder.
+ * Renders nothing on failure (end users never see a broken section); the
+ * dev-only warning names the offending section so authors/devs notice it.
+ */
+export default class SectionErrorBoundary extends React.Component<
+  SectionErrorBoundaryProps,
+  SectionErrorBoundaryState
+> {
+  state: SectionErrorBoundaryState = { hasError: false };
+
+  static getDerivedStateFromError(): SectionErrorBoundaryState {
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: unknown): void {
+    devWarn(
+      'SectionErrorBoundary',
+      `Section "${
+        this.props.sectionId ?? 'unknown'
+      }" failed to render and was skipped`,
+      error
+    );
+  }
+
+  render(): React.ReactNode {
+    if (this.state.hasError) {
+      return null;
+    }
+    return this.props.children;
+  }
+}

package/src/schemas/__tests__/theme-schema.test.ts

@@ -0,0 +1,93 @@
+import { validateThemeSectionsInDev } from '../theme-schema';
+import { resetDevWarnCacheForTests } from '../../utils/dev-warn';
+
+const setNodeEnv = (value: string | undefined): void => {
+  (process.env as Record<string, string | undefined>).NODE_ENV = value;
+};
+
+const validSection = (over: Record<string, unknown> = {}) => ({
+  id: 'sec-1',
+  type: 'default',
+  order: 0,
+  hidden: false,
+  styles: { color: 'red' },
+  properties: {},
+  blocks: [
+    {
+      id: 'blk-1',
+      type: 'text',
+      order: 0,
+      hidden: false,
+      styles: {},
+      properties: {},
+      blocks: []
+    }
+  ],
+  ...over
+});
+
+describe('validateThemeSectionsInDev', () => {
+  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('stays silent for a valid section tree (incl. nested blocks)', () => {
+    validateThemeSectionsInDev([validSection()]);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('accepts null styles/properties (render tolerates them)', () => {
+    validateThemeSectionsInDev([validSection({ styles: null, properties: null })]);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('warns when a section is missing its id', () => {
+    validateThemeSectionsInDev([validSection({ id: undefined })]);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy.mock.calls[0][0]).toContain('[pz-theme:themeSchema]');
+    expect(warnSpy.mock.calls[0][0]).toContain('index 0');
+    expect(warnSpy.mock.calls[0][0]).toContain('id');
+  });
+
+  it('warns when section type is not a string', () => {
+    validateThemeSectionsInDev([validSection({ type: 5 })]);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy.mock.calls[0][0]).toContain('sec-1');
+  });
+
+  it('warns when styles is a string instead of an object', () => {
+    validateThemeSectionsInDev([validSection({ styles: 'color:red' })]);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy.mock.calls[0][0]).toContain('styles');
+  });
+
+  it('warns about a malformed nested block (path points at the block)', () => {
+    validateThemeSectionsInDev([
+      validSection({ blocks: [{ id: 'blk-bad', type: 5 }] })
+    ]);
+    expect(warnSpy).toHaveBeenCalledTimes(1);
+    expect(warnSpy.mock.calls[0][0]).toContain('blocks.0.type');
+  });
+
+  it('is a no-op in production (zero behavior change)', () => {
+    setNodeEnv('production');
+    validateThemeSectionsInDev([validSection({ id: undefined })]);
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+
+  it('is a no-op for non-array input', () => {
+    validateThemeSectionsInDev(null);
+    validateThemeSectionsInDev(undefined);
+    validateThemeSectionsInDev('nope');
+    expect(warnSpy).not.toHaveBeenCalled();
+  });
+});

package/src/schemas/theme-schema.ts

@@ -0,0 +1,65 @@
+import { z } from 'zod';
+import { devWarn } from '../utils/dev-warn';
+
+// Loose, structural-only schemas. They assert just the invariants the render
+// engine relies on — id/type are strings, styles/properties are plain objects
+// (when present), blocks is an array of blocks — and intentionally ignore value
+// contents. Extra keys are allowed, so legitimate data with additional fields
+// validates cleanly and we avoid false-positive warnings.
+const blockSchema: z.ZodType<unknown> = z.lazy(() =>
+  z.object({
+    id: z.string(),
+    type: z.string(),
+    order: z.number().optional(),
+    hidden: z.boolean().optional(),
+    styles: z.object({}).nullable().optional(),
+    properties: z.object({}).nullable().optional(),
+    blocks: z.array(blockSchema).optional()
+  })
+);
+
+const sectionSchema = z.object({
+  id: z.string(),
+  type: z.string(),
+  order: z.number().optional(),
+  hidden: z.boolean().optional(),
+  styles: z.object({}).nullable().optional(),
+  properties: z.object({}).nullable().optional(),
+  blocks: z.array(blockSchema).optional()
+});
+
+const describeIssues = (error: z.ZodError): string =>
+  error.issues
+    .map((issue) => `${issue.path.join('.') || '(root)'}: ${issue.message}`)
+    .join('; ');
+
+/**
+ * Dev-only, warn-only shape check for the section tree. It runs nothing in
+ * production (zero cost, zero behavior change) and never mutates or drops data —
+ * it only surfaces structurally malformed sections/blocks so developers notice
+ * shape drift between the editor/backend and the render engine. Intended to be
+ * called from the server entry point so zod stays out of the client bundle.
+ */
+export const validateThemeSectionsInDev = (sections: unknown): void => {
+  if (process.env.NODE_ENV === 'production') return;
+  if (!Array.isArray(sections)) return;
+
+  sections.forEach((section, index) => {
+    const result = sectionSchema.safeParse(section);
+    if (result.success) return;
+
+    const rawId =
+      section && typeof section === 'object'
+        ? (section as { id?: unknown }).id
+        : undefined;
+    const label =
+      typeof rawId === 'string' && rawId ? rawId : `at index ${index}`;
+
+    devWarn(
+      'themeSchema',
+      `Section "${label}" has an unexpected shape: ${describeIssues(
+        result.error
+      )}`
+    );
+  });
+};

package/src/sections/featured-product-spotlight-section.tsx

@@ -6,6 +6,7 @@ import { useGetProductByPkQuery } from '@akinon/next/data/client/product';
 import ThemeBlock, { Block } from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { Section } from '../theme-section';
+import { safeDeepClone } from '../utils/safe-clone';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 
 interface FeaturedProductSpotlightSectionProps {
@@ -335,7 +336,7 @@ export default function FeaturedProductSpotlightSection({
         ...block,
         properties: block.properties ? { ...block.properties } : block.properties,
         styles: block.styles
-          ? JSON.parse(JSON.stringify(block.styles))
+          ? safeDeepClone(block.styles)
           : block.styles,
         blocks: undefined
       };

package/src/sections/posts-slider-section.tsx

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 
 import ThemeBlock from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { safeDeepClone } from '../utils/safe-clone';
 import {
   applyFirstSlideImageLoading,
   getCSSStyles,
@@ -55,7 +56,7 @@ const cloneBlock = (block: any): any => ({
   ...block,
   properties: block.properties ? { ...block.properties } : block.properties,
   styles: block.styles
-    ? JSON.parse(JSON.stringify(block.styles))
+    ? safeDeepClone(block.styles)
     : block.styles,
   blocks: block.blocks
     ? block.blocks.map((child: any) => cloneBlock(child))

package/src/sections/pre-order-launch-banner-section.tsx

@@ -6,6 +6,7 @@ import { useLocalization } from '@akinon/next/hooks';
 
 import ThemeBlock, { Block } from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
+import { safeDeepClone } from '../utils/safe-clone';
 import { Section } from '../theme-section';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 
@@ -497,7 +498,7 @@ export default function PreOrderLaunchBannerSection({
           ? { ...block.properties }
           : block.properties,
         styles: block.styles
-          ? JSON.parse(JSON.stringify(block.styles))
+          ? safeDeepClone(block.styles)
           : block.styles,
         blocks: undefined
       };

package/src/sections/shipping-threshold-progress-section.tsx

@@ -13,6 +13,10 @@ import {
   getResponsiveValue,
   resolveThemeCssVariables
 } from '../utils';
+import {
+  neutralizeStyleTagBreakout,
+  escapeCssAttributeValue
+} from '../utils/css-safety';
 
 interface ShippingThresholdProgressSectionProps {
   section: Section;
@@ -227,10 +231,6 @@ const findProgressBlockIds = (
   return { fillBlockId, markerBlockId, wrapperBlockId, startLabelBlockId };
 };
 
-const escapeCssAttributeValue = (value: string): string => {
-  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-};
-
 const injectDynamicState = (
   blocks: Block[],
   tokens: Record<string, string>,
@@ -485,7 +485,9 @@ const ShippingThresholdProgressSection: React.FC<
       rules.push(`[data-block-id="${escapedStartLabelId}"]{display:none !important;}`);
     }
 
-    return rules.join('');
+    // Neutralize any </style> breakout from editor-controlled color/radius
+    // values before this string is inlined into a <style> tag (stored XSS fix).
+    return neutralizeStyleTagBreakout(rules.join(''));
   }, [
     fillBlockId,
     markerBlockId,

package/src/theme-block.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import blockRendererRegistry from './blocks/block-renderer-registry';
 import { WithDesignerFeatures } from './components/with-designer-features';
 import { isPublishWindowVisible } from './utils';
+import { devWarn } from './utils/dev-warn';
 
 export interface Block {
   id: string;
@@ -58,7 +59,13 @@ export default function ThemeBlock({
 
   if (!BlockRenderer) {
     // Surface unknown types to authors in the designer, but never leak debug
-    // text to end users in production.
+    // text to end users in production. The dev-only warning catches registry
+    // drift (a type saved in the editor but missing from the runtime registry)
+    // which otherwise vanishes silently on the live site.
+    devWarn(
+      'ThemeBlock',
+      `No renderer registered for block type: "${block.type}"`
+    );
     return isDesigner ? <div>Unknown block type: {block.type}</div> : null;
   }
 

package/src/theme-placeholder-client.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from 'react';
 import ThemeSection, { Section } from './theme-section';
+import SectionErrorBoundary from './components/section-error-boundary';
 import {
   registerPlaceholder,
   unregisterPlaceholder
@@ -163,62 +164,64 @@ export default function ThemePlaceholderClient({
   };
 
   return (
-      <div data-placeholder={slug} className="theme-placeholder">
+    <div data-placeholder={slug} className="theme-placeholder">
       {renderedSections
         .sort((a, b) => a.order - b.order)
-        .filter((section) =>
-          !section.hidden &&
-          (isDesigner ||
-            isPublishWindowVisible(section.properties?.['publish-window']))
+        .filter(
+          (section) =>
+            !section.hidden &&
+            (isDesigner ||
+              isPublishWindowVisible(section.properties?.['publish-window']))
         )
         .map((section) => (
-          <ThemeSection
-            key={section.id}
-            section={section}
-            placeholderId={placeholderSlug}
-            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}
+              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>
   );