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

package/CHANGELOG.md

@@ -1,33 +1,17 @@
 # @akinon/pz-theme
 
-## 2.0.35-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea0688]
-- Updated dependencies
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08f]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- Updated dependencies [57d7eb30]
-- Updated dependencies [d99a6a7d5]
-- Updated dependencies [9db81a71]
-- Updated dependencies [591e345e1]
-- Updated dependencies [4de5303c5]
-- Updated dependencies [95b139dc1]
-- Updated dependencies [1d00f2d0]
-- Updated dependencies [4ac7b2a1e]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.35-rc.0
+## 2.0.35
+
+### Patch Changes
+
+- 2f500a32: ZERO-4657: Render scale, rotate and translate style keys from the theme editor and skip them in inline styles to prevent double application
+- 8dca03f2: ZERO-4663: introduce shared wire contract for theme editor and storefront
+
+  New `@akinon/theme-contract` package: shared wire types, versioned postMessage envelope (`protocolVersion`), runtime validation (`parseThemeMessage`) and origin helpers. `@akinon/pz-theme` now routes all designer postMessage traffic through an origin-guarded `editor-bridge` — inbound designer messages are validated against the editor-origin allowlist (`NEXT_PUBLIC_THEME_EDITOR_ORIGINS`, localhost auto-trusted outside production) and nothing is posted to `'*'` anymore.
+
+- Updated dependencies [8dca03f2]
+  - @akinon/next@2.0.35
+  - @akinon/theme-contract@2.0.35
 
 ## 2.0.34
 

package/package.json

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

package/src/__tests__/theme-contract.test.ts

@@ -0,0 +1,130 @@
+import {
+  LEGACY_PROTOCOL_VERSION,
+  ParsedThemeMessageRejected,
+  THEME_CONTRACT_PROTOCOL_VERSION,
+  createOriginGuard,
+  isKnownThemeMessageType,
+  parseOriginList,
+  parseThemeMessage,
+  safeOrigin,
+  stampThemeMessage
+} from '@akinon/theme-contract';
+
+describe('theme-contract envelope', () => {
+  it('stamps outbound messages with the current protocol version, preserving legacy top-level fields', () => {
+    const stamped = stampThemeMessage({
+      type: 'ROUTE_CHANGE_COMPLETE',
+      url: '/en/tr/',
+      layoutSegment: 'pages'
+    });
+    expect(stamped).toEqual({
+      type: 'ROUTE_CHANGE_COMPLETE',
+      url: '/en/tr/',
+      layoutSegment: 'pages',
+      protocolVersion: THEME_CONTRACT_PROTOCOL_VERSION
+    });
+  });
+
+  it('round-trips a stamped message through parseThemeMessage', () => {
+    const parsed = parseThemeMessage(
+      stampThemeMessage({ type: 'UPDATE_THEME', data: { theme: {} } })
+    );
+    expect(parsed.ok).toBe(true);
+    if (parsed.ok) {
+      expect(parsed.message.type).toBe('UPDATE_THEME');
+      expect(parsed.remoteVersion).toBe(THEME_CONTRACT_PROTOCOL_VERSION);
+      expect(parsed.versionMismatch).toBe(false);
+    }
+  });
+
+  it('accepts pre-contract messages (no protocolVersion) as the legacy version', () => {
+    const parsed = parseThemeMessage({ type: 'IFRAME_READY' });
+    expect(parsed.ok).toBe(true);
+    if (parsed.ok) {
+      expect(parsed.remoteVersion).toBe(LEGACY_PROTOCOL_VERSION);
+      expect(parsed.versionMismatch).toBe(false);
+    }
+  });
+
+  it('flags a version mismatch but still returns the message', () => {
+    const parsed = parseThemeMessage({
+      type: 'UPDATE_THEME',
+      data: {},
+      protocolVersion: THEME_CONTRACT_PROTOCOL_VERSION + 1
+    });
+    expect(parsed.ok).toBe(true);
+    if (parsed.ok) {
+      expect(parsed.versionMismatch).toBe(true);
+    }
+  });
+
+  it.each([
+    [null, 'not-an-object'],
+    ['LOAD_THEME', 'not-an-object'],
+    [['LOAD_THEME'], 'not-an-object'],
+    [{}, 'missing-type'],
+    [{ type: 42 }, 'missing-type'],
+    [{ type: 'WIDGET_COPY' }, 'unknown-type'],
+    [{ type: 'LOAD_THEME', data: 'nope' }, 'invalid-data']
+  ])('rejects %j with reason %s', (raw, reason) => {
+    const parsed = parseThemeMessage(raw);
+    expect(parsed.ok).toBe(false);
+    // Cast instead of narrowing — this tsconfig compiles with strict off,
+    // where the boolean-discriminant union does not narrow.
+    expect((parsed as ParsedThemeMessageRejected).reason).toBe(reason);
+  });
+
+  it('accepts the legacy boolean data used by SET_THEME_EDITOR_COOKIE', () => {
+    expect(
+      parseThemeMessage({ type: 'SET_THEME_EDITOR_COOKIE', data: true }).ok
+    ).toBe(true);
+  });
+
+  it('knows both directions of the protocol', () => {
+    expect(isKnownThemeMessageType('SCROLL_TO_SECTION')).toBe(true);
+    expect(isKnownThemeMessageType('REGISTER_NATIVE_WIDGETS')).toBe(true);
+    expect(isKnownThemeMessageType('WIDGET_MOVE')).toBe(false);
+  });
+});
+
+describe('theme-contract origin helpers', () => {
+  it('derives origins the same way on both sides', () => {
+    expect(safeOrigin('https://shop.example.com/en/page?x=1')).toBe(
+      'https://shop.example.com'
+    );
+    expect(safeOrigin('not a url')).toBeNull();
+    expect(safeOrigin('')).toBeNull();
+  });
+
+  it('parses env-style origin lists', () => {
+    expect(
+      parseOriginList(
+        'https://editor.akinon.com, https://staging-editor.akinon.com/path'
+      )
+    ).toEqual([
+      'https://editor.akinon.com',
+      'https://staging-editor.akinon.com'
+    ]);
+    expect(parseOriginList(undefined)).toEqual([]);
+  });
+
+  it('trusts only allowlisted origins by default', () => {
+    const guard = createOriginGuard({
+      allowedOrigins: ['https://editor.akinon.com']
+    });
+    expect(guard.isTrusted('https://editor.akinon.com')).toBe(true);
+    expect(guard.isTrusted('https://evil.example.com')).toBe(false);
+    expect(guard.isTrusted('http://localhost:5173')).toBe(false);
+  });
+
+  it('additionally trusts localhost when allowLocalDev is on', () => {
+    const guard = createOriginGuard({
+      allowedOrigins: [],
+      allowLocalDev: true
+    });
+    expect(guard.isTrusted('http://localhost:5173')).toBe(true);
+    expect(guard.isTrusted('http://127.0.0.1:3000')).toBe(true);
+    expect(guard.isTrusted('https://evil.example.com')).toBe(false);
+    expect(guard.isTrusted('http://localhost.evil.com')).toBe(false);
+  });
+});

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

@@ -8,7 +8,14 @@ import TextBlock from '../text-block';
 
 const renderBlock = (value: unknown, styles?: Record<string, unknown>) => {
   const block: any = { id: 'b1', type: 'text', value, styles };
-  return render(<TextBlock block={block} />);
+  return render(
+    <TextBlock
+      block={block}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={false}
+    />
+  );
 };
 
 describe('TextBlock value-shape resolution', () => {

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

@@ -3,7 +3,14 @@ import { render, screen } from '@testing-library/react';
 import VideoBlock from '../video-block';
 
 const renderBlock = (value: any, properties?: any) =>
-  render(<VideoBlock block={{ value, properties } as any} />);
+  render(
+    <VideoBlock
+      block={{ value, properties } as any}
+      placeholderId="p1"
+      sectionId="s1"
+      isDesigner={false}
+    />
+  );
 
 describe('VideoBlock', () => {
   describe('YouTube URLs -> iframe', () => {
@@ -115,9 +122,9 @@ describe('VideoBlock', () => {
         'https://www.youtube.com/watch?v=abc123',
         { muted: true }
       );
-      expect(
-        container.querySelector('iframe')?.getAttribute('src')
-      ).toContain('mute=1');
+      expect(container.querySelector('iframe')?.getAttribute('src')).toContain(
+        'mute=1'
+      );
     });
 
     it('appends controls=0 only when controls === false', () => {
@@ -125,9 +132,9 @@ describe('VideoBlock', () => {
         'https://www.youtube.com/watch?v=abc123',
         { controls: false }
       );
-      expect(
-        container.querySelector('iframe')?.getAttribute('src')
-      ).toContain('controls=0');
+      expect(container.querySelector('iframe')?.getAttribute('src')).toContain(
+        'controls=0'
+      );
     });
 
     it('does not append controls when controls is true', () => {

package/src/blocks/counter-block.tsx

@@ -7,6 +7,8 @@ import { useThemeSettingsContext } from '../theme-settings-context';
 import { getCSSStyles, getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 type CounterUnit = 'days' | 'hours' | 'minutes' | 'seconds';
 
 type CounterValues = Record<CounterUnit, string>;
@@ -170,18 +172,15 @@ const CounterBlock = ({
     if (onCompleteAction === 'hide_self') {
       // In designer (iframe) mode: use editor's show/hide so the user can still select/manage it
       if (isDesigner && window.parent && window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'SET_BLOCK_VISIBILITY',
-            data: {
-              placeholderId,
-              sectionId,
-              blockId: block.id,
-              hidden: true
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'SET_BLOCK_VISIBILITY',
+          data: {
+            placeholderId,
+            sectionId,
+            blockId: block.id,
+            hidden: true
+          }
+        });
         return;
       }
 
@@ -198,17 +197,14 @@ const CounterBlock = ({
     if (onCompleteAction === 'hide_section') {
       // In designer (iframe) mode: use editor's show/hide
       if (isDesigner && window.parent && window.parent !== window) {
-        window.parent.postMessage(
-          {
-            type: 'SET_SECTION_VISIBILITY',
-            data: {
-              placeholderId,
-              sectionId,
-              hidden: true
-            }
-          },
-          '*'
-        );
+        postToEditor({
+          type: 'SET_SECTION_VISIBILITY',
+          data: {
+            placeholderId,
+            sectionId,
+            hidden: true
+          }
+        });
         return;
       }
 
@@ -242,18 +238,15 @@ const CounterBlock = ({
     if (didAutoShowRef.current) return;
     didAutoShowRef.current = true;
 
-    window.parent.postMessage(
-      {
-        type: 'SET_BLOCK_VISIBILITY',
-        data: {
-          placeholderId,
-          sectionId,
-          blockId: block.id,
-          hidden: false
-        }
-      },
-      '*'
-    );
+    postToEditor({
+      type: 'SET_BLOCK_VISIBILITY',
+      data: {
+        placeholderId,
+        sectionId,
+        blockId: block.id,
+        hidden: false
+      }
+    });
   }, [
     block.hidden,
     block.id,
@@ -289,36 +282,31 @@ const CounterBlock = ({
   return (
     <div style={innerStyles}>
       {renderedBlocks.map((childBlock) => {
-        const createActionHandler = (actionType: string) => () => {
-          if (window.parent) {
-            window.parent.postMessage(
-              {
+        const createActionHandler =
+          (actionType: PreviewToEditorMessageType) => () => {
+            if (window.parent) {
+              postToEditor({
                 type: actionType,
                 data: {
                   placeholderId,
                   sectionId,
                   blockId: childBlock.id
                 }
-              },
-              '*'
-            );
-          }
-        };
+              });
+            }
+          };
 
         const handleRename = (newLabel: string) => {
           if (window.parent) {
-            window.parent.postMessage(
-              {
-                type: 'RENAME_BLOCK',
-                data: {
-                  placeholderId,
-                  sectionId,
-                  blockId: childBlock.id,
-                  label: newLabel
-                }
-              },
-              '*'
-            );
+            postToEditor({
+              type: 'RENAME_BLOCK',
+              data: {
+                placeholderId,
+                sectionId,
+                blockId: childBlock.id,
+                label: newLabel
+              }
+            });
           }
         };
 

package/src/blocks/group-block.tsx

@@ -3,6 +3,8 @@ import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import ThemeBlock from '../theme-block';
 
+import { postToEditor } from '../editor-bridge';
+import { PreviewToEditorMessageType } from '@akinon/theme-contract';
 const GroupBlock = ({
   block,
   placeholderId,
@@ -11,7 +13,11 @@ const GroupBlock = ({
   selectedBlockId,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
-  const tag = getResponsiveValue(block.properties?.tag, currentBreakpoint, 'div');
+  const tag = getResponsiveValue(
+    block.properties?.tag,
+    currentBreakpoint,
+    'div'
+  );
   const Tag = tag as keyof React.JSX.IntrinsicElements;
   const href = tag === 'a' ? block.properties?.href : undefined;
 
@@ -55,36 +61,31 @@ const GroupBlock = ({
         .filter((childBlock) => (isDesigner ? true : !childBlock.hidden))
         .sort((a, b) => (a.order || 0) - (b.order || 0))
         .map((childBlock, index) => {
-          const createActionHandler = (actionType: string) => () => {
-            if (window.parent) {
-              window.parent.postMessage(
-                {
+          const createActionHandler =
+            (actionType: PreviewToEditorMessageType) => () => {
+              if (window.parent) {
+                postToEditor({
                   type: actionType,
                   data: {
                     placeholderId,
                     sectionId,
                     blockId: childBlock.id
                   }
-                },
-                '*'
-              );
-            }
-          };
+                });
+              }
+            };
 
           const handleRename = (newLabel: string) => {
             if (window.parent) {
-              window.parent.postMessage(
-                {
-                  type: 'RENAME_BLOCK',
-                  data: {
-                    placeholderId,
-                    sectionId,
-                    blockId: childBlock.id,
-                    label: newLabel
-                  }
-                },
-                '*'
-              );
+              postToEditor({
+                type: 'RENAME_BLOCK',
+                data: {
+                  placeholderId,
+                  sectionId,
+                  blockId: childBlock.id,
+                  label: newLabel
+                }
+              });
             }
           };