@akinon/pz-theme 2.0.61-rc.0 → 2.0.62-beta.0

package/CHANGELOG.md

@@ -1,36 +1,20 @@
 # @akinon/pz-theme
 
-## 2.0.61-rc.0
-
-### Patch Changes
-
-- Updated dependencies [0cf9ea239]
-- Updated dependencies [324f97d55]
-- Updated dependencies [51ea06888]
-- Updated dependencies
-- Updated dependencies [2fea4143]
-- Updated dependencies [b55acb768]
-- Updated dependencies [760258c1c]
-- Updated dependencies [143be2b9d]
-- Updated dependencies [7889b08fe]
-- Updated dependencies [9f8cd3bc5]
-- Updated dependencies [bfafa3f49]
-- 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 [e9598c71]
-- Updated dependencies [4998a9631]
-- Updated dependencies [804d2bd6]
-- Updated dependencies [3909d3224]
-- Updated dependencies [6a3d8a63]
-- Updated dependencies [e18836b20]
-  - @akinon/next@2.0.61-rc.0
-  - @akinon/theme-contract@2.0.61-rc.0
+## 2.0.62-beta.0
+
+### Patch Changes
+
+- Updated dependencies [cbbbfd75]
+  - @akinon/next@2.0.62-beta.0
+  - @akinon/theme-contract@2.0.62-beta.0
+
+## 2.0.61
+
+### Patch Changes
+
+- 760ea8b: ZERO-4799: Read slider arrow button geometry from its own block styles
+  - @akinon/next@2.0.61
+  - @akinon/theme-contract@2.0.61
 
 ## 2.0.60
 

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.61-rc.0",
+  "version": "2.0.62-beta.0",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.61-rc.0",
+    "@akinon/next": "2.0.62-beta.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.61-rc.0",
+    "@akinon/theme-contract": "2.0.62-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.61-rc.0",
+    "@akinon/next": "2.0.62-beta.0",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

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

@@ -22,10 +22,7 @@ jest.mock('../../theme-block', () => ({
 
 import SliderBlock from '../slider-block';
 
-const child = (
-  id: string,
-  over: Record<string, unknown> = {}
-): any => ({
+const child = (id: string, over: Record<string, unknown> = {}): any => ({
   id,
   type: 'text',
   label: id,
@@ -146,3 +143,120 @@ describe('SliderBlock — child filtering, ordering and empty state', () => {
     expect(markers(container)).toEqual(['a', 'b', 'c']);
   });
 });
+
+/**
+ * The arrow button's geometry used to be hardcoded, so the only way to reach it
+ * was to edit this component. These cover the contract the panel now relies on:
+ * the legacy circle when nothing is authored, and the block's own styles when
+ * something is.
+ */
+describe('SliderBlock — arrow button geometry', () => {
+  const arrow = (label: string, styles: Record<string, unknown>) =>
+    child(label === 'Left Arrow Icon' ? 'left' : 'right', {
+      type: 'icon',
+      label,
+      styles
+    });
+
+  const renderArrows = (
+    styles: Record<string, unknown>,
+    over: Record<string, unknown> = {}
+  ) =>
+    render(
+      <SliderBlock
+        {...props({
+          isDesigner: true,
+          block: {
+            ...props().block,
+            blocks: [
+              arrow('Left Arrow Icon', styles),
+              child('s1'),
+              arrow('Right Arrow Icon', styles)
+            ]
+          },
+          ...over
+        })}
+      />
+    );
+
+  const previous = (container: HTMLElement) =>
+    container.querySelector('button[aria-label="Previous"]') as HTMLElement;
+
+  it('keeps the 40px circle when no geometry is authored', () => {
+    const { container } = renderArrows({});
+    const style = previous(container).style;
+
+    expect(style.width).toBe('40px');
+    expect(style.height).toBe('40px');
+    expect(style.borderRadius).toBe('50%');
+  });
+
+  it('takes width, height and radius from the arrow block', () => {
+    const { container } = renderArrows({
+      width: '32px',
+      height: '64px',
+      'border-radius': '8px'
+    });
+    const style = previous(container).style;
+
+    expect(style.width).toBe('32px');
+    expect(style.height).toBe('64px');
+    expect(style.borderRadius).toBe('8px');
+  });
+
+  it('rounds one side only, which is what a half-round tab needs', () => {
+    const { container } = renderArrows({
+      width: '32px',
+      height: '64px',
+      'border-top-left-radius': '32px',
+      'border-bottom-left-radius': '32px'
+    });
+    const style = previous(container).style;
+
+    expect(style.borderTopLeftRadius).toBe('32px');
+    expect(style.borderBottomLeftRadius).toBe('32px');
+    // The legacy 50% must not stand in here, or the flat side would be round.
+    expect(style.borderTopRightRadius).toBe('');
+    expect(style.borderBottomRightRadius).toBe('');
+  });
+
+  it('writes the shorthand before a corner, so the corner overrides it', () => {
+    const { container } = renderArrows({
+      'border-radius': '20px',
+      'border-top-left-radius': '0px'
+    });
+    const button = previous(container);
+
+    expect(button.style.borderRadius).toBe('20px');
+    expect(button.style.borderTopLeftRadius).toBe('0px');
+
+    // Order is the whole mechanism: the shorthand has to be declared first or
+    // it would reset the corner. jsdom does not expand the shorthand into
+    // longhands, so the declaration order is what there is to assert.
+    const declarations = button.getAttribute('style') ?? '';
+    expect(declarations.indexOf('border-radius')).toBeLessThan(
+      declarations.indexOf('border-top-left-radius')
+    );
+  });
+
+  it('appends px to the bare numbers the numeric controls store', () => {
+    const { container } = renderArrows({ width: 48, height: 48 });
+    const style = previous(container).style;
+
+    expect(style.width).toBe('48px');
+    expect(style.height).toBe('48px');
+  });
+
+  it('reads the breakpoint being previewed, not always desktop', () => {
+    const styles = {
+      width: { desktop: '40px', mobile: '28px' },
+      height: { desktop: '40px', mobile: '28px' }
+    };
+
+    expect(previous(renderArrows(styles).container).style.width).toBe('40px');
+    expect(
+      previous(renderArrows(styles, { currentBreakpoint: 'mobile' }).container)
+        .style.width
+    ).toBe('28px');
+  });
+});

package/src/blocks/slider-block.tsx

@@ -118,8 +118,9 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
     }
   };
 
-  const currentSlidesToSlide =
-    isNarrowBreakpoint(currentBreakpoint) ? mobileSlides : desktopSlides;
+  const currentSlidesToSlide = isNarrowBreakpoint(currentBreakpoint)
+    ? mobileSlides
+    : desktopSlides;
 
   const showArrows = getResponsiveValue(
     getConfigEntry('show-arrows'),
@@ -263,32 +264,60 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const rightArrowIconUrl = getIconUrl(rightArrowIconBlock);
 
   const leftArrowIconSize = String(
-    getResponsiveValue(leftArrowIconBlock?.styles?.size, '24')
+    getResponsiveValue(
+      leftArrowIconBlock?.styles?.size,
+      currentBreakpoint,
+      '24'
+    )
   );
   const rightArrowIconSize = String(
-    getResponsiveValue(rightArrowIconBlock?.styles?.size, '24')
+    getResponsiveValue(
+      rightArrowIconBlock?.styles?.size,
+      currentBreakpoint,
+      '24'
+    )
   );
 
   const leftArrowIconColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(leftArrowIconBlock?.styles?.['color'], '#ffffff')
+      getResponsiveValue(
+        leftArrowIconBlock?.styles?.['color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
     ),
     themeSettings
   );
   const rightArrowIconColor = resolveThemeCssVariables(
     String(
-      getResponsiveValue(rightArrowIconBlock?.styles?.['color'], '#ffffff')
+      getResponsiveValue(
+        rightArrowIconBlock?.styles?.['color'],
+        currentBreakpoint,
+        '#ffffff'
+      )
     ),
     themeSettings
   );
 
   const leftArrowIconOpacity =
     parseFloat(
-      String(getResponsiveValue(leftArrowIconBlock?.styles?.['opacity'], '1'))
+      String(
+        getResponsiveValue(
+          leftArrowIconBlock?.styles?.['opacity'],
+          currentBreakpoint,
+          '1'
+        )
+      )
     ) || 1;
   const rightArrowIconOpacity =
     parseFloat(
-      String(getResponsiveValue(rightArrowIconBlock?.styles?.['opacity'], '1'))
+      String(
+        getResponsiveValue(
+          rightArrowIconBlock?.styles?.['opacity'],
+          currentBreakpoint,
+          '1'
+        )
+      )
     ) || 1;
 
   // Process SVGs with color
@@ -328,6 +357,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       getResponsiveValue(
         leftArrowIconBlock?.styles?.['background'] ??
           leftArrowIconBlock?.styles?.['backgroundColor'],
+        currentBreakpoint,
         'rgba(0, 0, 0, 0.5)'
       )
     ),
@@ -339,12 +369,80 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       getResponsiveValue(
         rightArrowIconBlock?.styles?.['background'] ??
           rightArrowIconBlock?.styles?.['backgroundColor'],
+        currentBreakpoint,
         'rgba(0, 0, 0, 0.5)'
       )
     ),
     themeSettings
   );
 
+  // The arrow button's geometry used to live here and nowhere else — a 40px
+  // circle — so the panel could set the button's background and nothing else: a
+  // half-round tab, a square, a wider pill were all unreachable, and a Corner
+  // Radius typed in the editor was stored and then ignored. Geometry now comes
+  // from the arrow icon block's own styles, with the old circle as the default
+  // so a slider that authored none of it renders exactly as before.
+  //
+  // Only geometry is read. `color` and `opacity` stay bound to the icon image
+  // below; reading them here as well would apply each of them twice.
+  const arrowLength = (value: unknown): string | undefined => {
+    const text = String(value ?? '').trim();
+    if (!text) return undefined;
+    // A bare number is what the editor's numeric controls store; its free-text
+    // corner fields carry their own unit (`32px`, `50%`).
+    return /^-?\d*\.?\d+$/.test(text) ? `${text}px` : text;
+  };
+
+  const arrowGeometry = (iconBlock?: {
+    styles?: Record<string, unknown>;
+  }): React.CSSProperties => {
+    const styles = iconBlock?.styles ?? {};
+    const read = (key: string) => {
+      // Published JSON may carry either spelling of a two-word key.
+      const camelKey = key.replace(/-([a-z])/g, (_, letter: string) =>
+        letter.toUpperCase()
+      );
+      return arrowLength(
+        getResponsiveValue(
+          styles[key] ?? styles[camelKey],
+          currentBreakpoint,
+          ''
+        )
+      );
+    };
+
+    const corners: Record<string, string> = {};
+    (
+      [
+        ['border-top-left-radius', 'borderTopLeftRadius'],
+        ['border-top-right-radius', 'borderTopRightRadius'],
+        ['border-bottom-right-radius', 'borderBottomRightRadius'],
+        ['border-bottom-left-radius', 'borderBottomLeftRadius']
+      ] as const
+    ).forEach(([styleKey, cssProperty]) => {
+      const value = read(styleKey);
+      if (value) corners[cssProperty] = value;
+    });
+
+    const geometry: React.CSSProperties = {
+      width: read('width') ?? '40px',
+      height: read('height') ?? '40px'
+    };
+
+    // The shorthand is written before the corners so an authored corner
+    // overrides just that corner, the way the cascade does. The 50% default
+    // only stands in when no radius was authored at all — otherwise rounding
+    // one corner would leave the other three on the legacy circle.
+    const radius = read('border-radius');
+    if (radius) geometry.borderRadius = radius;
+    else if (Object.keys(corners).length === 0) geometry.borderRadius = '50%';
+
+    return { ...geometry, ...corners };
+  };
+
+  const leftArrowButtonStyle = arrowGeometry(leftArrowIconBlock);
+  const rightArrowButtonStyle = arrowGeometry(rightArrowIconBlock);
+
   const handleLeftArrowClick = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -377,9 +475,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       style={{
         backgroundColor: leftArrowBackground,
         border: 'none',
-        borderRadius: '50%',
-        width: '40px',
-        height: '40px',
+        ...leftArrowButtonStyle,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -419,9 +515,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       style={{
         backgroundColor: rightArrowBackground,
         border: 'none',
-        borderRadius: '50%',
-        width: '40px',
-        height: '40px',
+        ...rightArrowButtonStyle,
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
@@ -544,9 +638,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
               style={{
                 backgroundColor: leftArrowBackground,
                 border: 'none',
-                borderRadius: '50%',
-                width: '40px',
-                height: '40px',
+                ...leftArrowButtonStyle,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -577,9 +669,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
               style={{
                 backgroundColor: rightArrowBackground,
                 border: 'none',
-                borderRadius: '50%',
-                width: '40px',
-                height: '40px',
+                ...rightArrowButtonStyle,
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'center',