@akinon/pz-theme 2.0.75-rc.0 → 2.0.76-beta.0

package/src/chrome/retrying-widget-data.ts

@@ -0,0 +1,33 @@
+import { getWidgetData } from '@akinon/next/data/server';
+
+const RETRY_DELAYS_MS = [100, 250];
+
+/**
+ * The data layer swallows transport errors and resolves with nothing — and a
+ * widget that truly does not exist answers with an empty 404 body, which the
+ * layer's JSON parse turns into the same nothing. The two cannot be told
+ * apart here, so a falsy answer is retried on a short backoff: a flaky
+ * socket recovers within a beat and a published composition stops flickering
+ * back to the brand markup, while a genuinely missing widget only costs two
+ * quick extra reads before the caller keeps the project's own chrome.
+ *
+ * Only for the low-volume chrome reads (placeholder widgets, theme-config).
+ * Per-section data fetches must not use this: a regular-widget miss is the
+ * NORMAL path for a collection section, and retrying it would tax every
+ * composed page.
+ */
+export const getWidgetDataWithRetry = async <T>(
+  slug: string
+): Promise<T | null> => {
+  for (let attempt = 0; ; attempt++) {
+    const lastAttempt = attempt >= RETRY_DELAYS_MS.length;
+    try {
+      const data = await getWidgetData<T>({ slug });
+      if (data) return data as T;
+    } catch (error) {
+      if (lastAttempt) throw error;
+    }
+    if (lastAttempt) return null;
+    await new Promise((resolve) => setTimeout(resolve, RETRY_DELAYS_MS[attempt]));
+  }
+};

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { getWidgetData } from '@akinon/next/data/server';
+import { getWidgetDataWithRetry } from './retrying-widget-data';
 
 import { readThemeModals, ThemeModal } from '../overlays/modal-registry';
 
@@ -86,12 +86,11 @@ export const readThemeConfig = (data: ThemeConfigWidget): ThemeConfig => {
 
 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;
-      theme_modals?: unknown;
-    }>({ slug: 'theme-config' });
+    // Retried on a short backoff: a transient miss here silently drops every
+    // data source and theme setting on the page.
+    const data = await getWidgetDataWithRetry<ThemeConfigWidget>(
+      'theme-config'
+    );
 
     return readThemeConfig(data as ThemeConfigWidget);
   } catch {

package/src/load-placeholder-sections.ts

@@ -7,6 +7,7 @@ import { ServerVariables } from '@akinon/next/utils/server-variables';
 import { Section } from './theme-section';
 import { devWarn } from './utils/dev-warn';
 import { validateThemeSectionsInDev } from './schemas/theme-schema';
+import { getPlaceholderWidget } from './chrome/composition-source';
 import { getThemeConfig, ThemeConfig } from './chrome/theme-config-source';
 
 const { getWidgetData } = serverData;
@@ -57,13 +58,6 @@ const getWidgetSchemaData = async <T,>(args: {
   return directFetch<T>(`/widgets/${args.widgetSlug}/schema/`);
 };
 
-type ThemePlaceholderData = {
-  theme_editor_placeholder: Array<{
-    section_slug: string;
-    order: number;
-  }>;
-};
-
 export interface LoadedPlaceholder {
   sections: Section[];
   placeholderId: string;
@@ -94,9 +88,9 @@ export async function loadPlaceholderSections(
 
     let data: { slug?: string; attributes?: { theme_editor_placeholder?: unknown; [key: string]: unknown } } | null = null;
     try {
-      data = await getWidgetData<ThemePlaceholderData>({
-        slug
-      }) as typeof data;
+      // Shared with ChromeSlot's composed/uncomposed decision — see
+      // getPlaceholderWidget for why the two must read one fetch.
+      data = (await getPlaceholderWidget(slug)) as typeof data;
     } catch (placeholderError) {
       console.warn(
         `Theme placeholder widget "${slug}" was not found. Rendering empty placeholder.`,

package/src/utils/__tests__/color-alpha.test.ts

@@ -0,0 +1,29 @@
+import { colorToRgba } from '../index';
+
+/**
+ * The theme CSS generator routes every background-color through
+ * `colorToRgba(value, backgroundAlpha)` with backgroundAlpha defaulting to 1.
+ * A colour the author already gave an alpha must keep it — rebuilding
+ * rgba(0,0,0,0.07) used to print rgba(0, 0, 0, 1) and turn a 7% tint into
+ * solid black.
+ */
+describe('authored rgba alpha survives the background pass', () => {
+  it('keeps a 7% tint at the default background opacity', () => {
+    expect(colorToRgba('rgba(0, 0, 0, 0.07)', 1)).toBe('rgba(0, 0, 0, 0.07)');
+    expect(colorToRgba('rgb(0 0 0 / 7%)', 1)).toBe('rgba(0, 0, 0, 0.07)');
+  });
+
+  it('multiplies an authored alpha with a background-opacity below 100', () => {
+    expect(colorToRgba('rgba(0, 0, 0, 0.5)', 0.5)).toBe('rgba(0, 0, 0, 0.25)');
+  });
+
+  it('keeps the alpha channel of an 8-digit hex', () => {
+    expect(colorToRgba('#00000012', 1)).toBe('rgba(0, 0, 0, 0.0706)');
+    expect(colorToRgba('#0003', 1)).toBe('rgba(0, 0, 0, 0.2)');
+  });
+
+  it('still applies the requested alpha to opaque colours', () => {
+    expect(colorToRgba('#000000', 0.4)).toBe('rgba(0, 0, 0, 0.4)');
+    expect(colorToRgba('rgb(10, 20, 30)', 0.5)).toBe('rgba(10, 20, 30, 0.5)');
+  });
+});

package/src/utils/index.ts

@@ -115,6 +115,28 @@ export const colorToRgba = (color: string, alpha: number): string | null => {
   }
   const short = normalized.match(/^#([0-9a-f]{3})$/i);
   const long = normalized.match(/^#([0-9a-f]{6})$/i);
+  // #RRGGBBAA / #RGBA: the authored alpha channel is kept and multiplied
+  // with the requested one, like the rgba() branches below.
+  const longAlpha = normalized.match(/^#([0-9a-f]{8})$/i);
+  const shortAlpha = normalized.match(/^#([0-9a-f]{4})$/i);
+
+  if (longAlpha) {
+    const h = longAlpha[1];
+    const r = parseInt(h.slice(0, 2), 16);
+    const g = parseInt(h.slice(2, 4), 16);
+    const b = parseInt(h.slice(4, 6), 16);
+    const authored = parseInt(h.slice(6, 8), 16) / 255;
+    return `rgba(${r}, ${g}, ${b}, ${Number((authored * alpha).toFixed(4))})`;
+  }
+
+  if (shortAlpha) {
+    const h = shortAlpha[1];
+    const r = parseInt(h[0] + h[0], 16);
+    const g = parseInt(h[1] + h[1], 16);
+    const b = parseInt(h[2] + h[2], 16);
+    const authored = parseInt(h[3] + h[3], 16) / 255;
+    return `rgba(${r}, ${g}, ${b}, ${Number((authored * alpha).toFixed(4))})`;
+  }
 
   if (short) {
     const h = short[1];
@@ -132,7 +154,10 @@ export const colorToRgba = (color: string, alpha: number): string | null => {
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
 
-  // rgb(12, 34, 56) or rgba(12, 34, 56, 0.5)
+  // rgb(12, 34, 56) or rgba(12, 34, 56, 0.5). An alpha the author already
+  // put into the colour is kept and multiplied with the requested one —
+  // rebuilding rgba(0,0,0,0.07) at the default background opacity used to
+  // print rgba(0, 0, 0, 1) and turn a 7% tint solid black.
   const commaRgb = normalized.match(
     /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})(?:\s*,\s*([0-9.]+))?\s*\)$/i
   );
@@ -141,7 +166,10 @@ export const colorToRgba = (color: string, alpha: number): string | null => {
     const g = Number(commaRgb[2]);
     const b = Number(commaRgb[3]);
     if ([r, g, b].some((v) => Number.isNaN(v))) return null;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    const authored =
+      commaRgb[4] !== undefined ? Number(commaRgb[4]) : 1;
+    const effective = Number.isNaN(authored) ? alpha : authored * alpha;
+    return `rgba(${r}, ${g}, ${b}, ${effective})`;
   }
 
   // rgb(12 34 56) or rgb(12 34 56 / 0.5)
@@ -153,7 +181,15 @@ export const colorToRgba = (color: string, alpha: number): string | null => {
     const g = Number(spaceRgb[2]);
     const b = Number(spaceRgb[3]);
     if ([r, g, b].some((v) => Number.isNaN(v))) return null;
-    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    const rawAuthored = spaceRgb[4];
+    const authored =
+      rawAuthored === undefined
+        ? 1
+        : rawAuthored.endsWith('%')
+        ? Number(rawAuthored.slice(0, -1)) / 100
+        : Number(rawAuthored);
+    const effective = Number.isNaN(authored) ? alpha : authored * alpha;
+    return `rgba(${r}, ${g}, ${b}, ${effective})`;
   }
 
   return null;

package/src/utils/style-resolution.test.ts

@@ -59,14 +59,18 @@ describe('colorToRgba', () => {
     expect(colorToRgba('rgb(12 34 56)', 0.5)).toBe('rgba(12, 34, 56, 0.5)');
   });
 
-  it('returns null for formats it cannot parse (named, var, 8-digit hex, hsl)', () => {
+  it('returns null for formats it cannot parse (named, var, hsl)', () => {
     // These return null -> the caller silently drops the alpha. Locking the
     // current behavior so a future change here is a conscious decision.
     expect(colorToRgba('red', 0.5)).toBeNull();
     expect(colorToRgba('var(--theme-primary)', 0.5)).toBeNull();
-    expect(colorToRgba('#11223344', 0.5)).toBeNull();
     expect(colorToRgba('hsl(0, 100%, 50%)', 0.5)).toBeNull();
   });
+
+  it('multiplies the alpha channel of an 8-digit hex with the requested one', () => {
+    // 0x44 = 68/255 ≈ 0.2667; halved ≈ 0.1333.
+    expect(colorToRgba('#11223344', 0.5)).toBe('rgba(17, 34, 51, 0.1333)');
+  });
 });
 
 describe('applyAlphaToColor', () => {