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

package/src/blocks/container-block.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import React from 'react';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+import { renderComposedChildren } from './render-composed-children';
+
+/**
+ * A plain band a designer fills with other blocks: the header's top row, a
+ * free-shipping strip above the basket, the card a campaign sits in.
+ *
+ * Everything a container LOOKS like is authored as style — the descriptor
+ * offers background, the four paddings, border width/colour and radius, and
+ * the advanced controls reach it like any other block. Everything a container
+ * CONTAINS is authored as child blocks. That leaves this component with one
+ * job, rendering those children, and nothing to read: the descriptor declares
+ * no properties and no parts, and every style key it declares is real CSS the
+ * generated sheet already applies, so `block.styles` is never touched here.
+ *
+ * Properties: none.
+ * Parts: none.
+ */
+const ContainerBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  isDesigner = false,
+  selectedBlockId,
+  currentBreakpoint = 'desktop'
+}: BlockRendererProps) => {
+  /*
+   * Rendered with NO element of its own — the children go straight into the
+   * block wrapper.
+   *
+   * The box the merchant paints already exists. `collectBlockCSS` routes a
+   * block's root styles to `[data-block-id]`, which is the WithDesignerFeatures
+   * div around this component, present on the live storefront exactly as it is
+   * on the canvas and always a real `position: relative` box. So the
+   * background, paddings, border and radius have something to paint on before
+   * this component renders anything at all.
+   *
+   * A box drawn here would be a SECOND box inside the painted one, and the
+   * damage is not cosmetic: an authored `display: flex` / `grid` — with its
+   * `gap` and `grid-template-columns` — also lands on the wrapper, so all the
+   * children would sit inside one single flex item and the layout controls
+   * would look inert.
+   *
+   * `group` avoids that with `display: contents` because it still needs an
+   * element: its `tag` property can make it an `<a>` or a `<form>`. A container
+   * has no properties at all, so there is nothing for an element to carry,
+   * while the element itself would still be counted by `:nth-child()` and by
+   * any `[data-block-id] > *` rule written against the wrapper — box or no box.
+   * Adding none is the honest version of the same trick.
+   */
+  const children = renderComposedChildren({
+    blocks: block.blocks,
+    placeholderId,
+    sectionId,
+    isDesigner,
+    selectedBlockId,
+    currentBreakpoint
+  });
+
+  // Empty is a legitimate published state — a container with only a background
+  // and padding is a band or a spacer, and the wrapper paints it whatever this
+  // returns. On the canvas that same band is invisible until a padding is set,
+  // so adding one has to say what it is waiting for.
+  if (children.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Container (drop blocks here)"
+        attribute="data-container-placeholder"
+      />
+    ) : null;
+  }
+
+  return <>{children}</>;
+};
+
+export default ContainerBlock;

package/src/blocks/hover-showcase-item-block.tsx

@@ -0,0 +1,232 @@
+'use client';
+
+import React from 'react';
+import { useLocalization } from '@akinon/next/hooks';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+import { renderComposedChildren } from './render-composed-children';
+
+/**
+ * One authored string, read through both shapes the editor can store it in.
+ *
+ * A `localetext` control writes a LOCALE map (`{ 'en-us': …, 'tr-tr': … }`)
+ * while `getDefaultValue` seeds the same key as a BREAKPOINT bucket
+ * (`{ desktop: …, mobile: … }`) — so a hover showcase item that was never
+ * edited and one that was carry the same key in two different shapes. Locale
+ * wins when the map has one, otherwise it resolves as an ordinary responsive
+ * value.
+ *
+ * Exported so `hover-showcase-section.tsx` can be repointed at it: the section
+ * carries a byte-identical private copy today (:53), and a third copy of a
+ * reader is a third place for the two shapes to be resolved differently.
+ */
+export const resolveLocalizedBlockText = (
+  value: unknown,
+  locale: string,
+  defaultLocale: string,
+  currentBreakpoint: string,
+  fallback = ''
+): string => {
+  if (value == null) return fallback;
+
+  if (typeof value === 'object' && !Array.isArray(value)) {
+    const localized = value as Record<string, unknown>;
+
+    if (localized[locale] != null) return String(localized[locale]);
+    if (localized[defaultLocale] != null)
+      return String(localized[defaultLocale]);
+
+    const responsive = getResponsiveValue(value, currentBreakpoint);
+    if (responsive != null && typeof responsive !== 'object') {
+      return String(responsive);
+    }
+
+    const firstValue = Object.values(localized).find((item) => item != null);
+    if (firstValue != null) return String(firstValue);
+  }
+
+  const responsive = getResponsiveValue(value, currentBreakpoint, fallback);
+  return String(responsive ?? fallback);
+};
+
+/**
+ * One entry of a hover showcase: a title, an optional subtitle, and whatever
+ * media the author dropped inside it.
+ *
+ * `hover-showcase-section.tsx` draws these itself, by type, never through
+ * ThemeBlock (:122). This renderer exists so the same stored block also draws
+ * when it sits anywhere else, and it draws the item's WHOLE content stacked —
+ * which is what the section's mobile arm shows. The desktop split pane and the
+ * cross-fade between entries are the SECTION's, not the block's: both are
+ * coordination across siblings (which entry is active), and a single block has
+ * no siblings to coordinate with.
+ *
+ * Parts: title, link, subtitle.
+ */
+const HoverShowcaseItemBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const { locale } = useLocalization();
+  const defaultLocale = process.env.NEXT_PUBLIC_DEFAULT_LOCALE || 'en';
+
+  /**
+   * Properties first, styles second — for one key, in two places.
+   *
+   * The descriptor declares title/subtitle/link under `properties` but without
+   * `target: 'property'`, and the panel defaults an untargeted field to
+   * `'style'` (generic-properties-panel.tsx:471). So `getDefaultValue` SEEDS
+   * these into `block.properties` while every edit the merchant makes LANDS in
+   * `block.styles`. Both locations therefore hold real authored values today.
+   *
+   * Properties still wins, and the asymmetry is deliberate. Preferring styles
+   * would make today's edits visible — and would then let a value typed BEFORE
+   * the descriptor is fixed shadow every edit made after it, permanently, with
+   * no control left that could clear it. Preferring properties costs only what
+   * the section already costs (an edit that landed in styles stays ignored
+   * while a seed sits in properties) and self-heals the moment the panel starts
+   * writing to the right place.
+   *
+   * The seeded value is also why this cannot be a `??` chain: the seed writes
+   * `link: ''`, and an empty string is not nullish, so a nullish fallback would
+   * let the untouched seed shadow the URL the merchant actually typed. Emptiness
+   * is what makes a location absent here, not nullishness.
+   */
+  const authored = (key: string): string => {
+    const fromProperties = resolveLocalizedBlockText(
+      block.properties?.[key],
+      locale,
+      defaultLocale,
+      currentBreakpoint
+    );
+    if (fromProperties) return fromProperties;
+
+    return resolveLocalizedBlockText(
+      block.styles?.[key],
+      locale,
+      defaultLocale,
+      currentBreakpoint
+    );
+  };
+
+  const title = authored('title');
+  const subtitle = authored('subtitle');
+  const link = authored('link');
+
+  /**
+   * The two style keys this renderer is allowed to read, because they are the
+   * only two it CAN read: `title-font-size` and `subtitle-font-size` are not
+   * CSS properties, so the generated sheet emits them verbatim as declarations
+   * the browser drops. Nothing else from `block.styles` is touched — every real
+   * property, `padding-top`/`padding-bottom` included, already lands on the
+   * `[data-block-id]` wrapper as a rule.
+   *
+   * Returns undefined rather than a default size on purpose. The panel also
+   * offers the advanced typography family, so a merchant can set a real
+   * `font-size` on this block; a default inlined here would outrank that rule
+   * (and its media queries) for everyone who never touched these two controls.
+   */
+  const fontSizeOverride = (key: string): string | undefined => {
+    const raw = getResponsiveValue(block.styles?.[key], currentBreakpoint, '');
+    const text = String(raw ?? '').trim();
+
+    return text || undefined;
+  };
+
+  const titleFontSize = fontSizeOverride('title-font-size');
+  const subtitleFontSize = fontSizeOverride('subtitle-font-size');
+
+  const children = renderComposedChildren({
+    blocks: block.blocks,
+    placeholderId,
+    sectionId,
+    isDesigner,
+    selectedBlockId,
+    currentBreakpoint
+  });
+
+  /**
+   * No invented title. The section falls back to `Item ${index + 1}`, which it
+   * can only do because it is looping — a standalone block has no index, and
+   * the alternatives are worse than nothing: `block.label` is the layer-tree
+   * name ("Hover Showcase Item") and would ship that to a shopper as a heading.
+   * So an item with no authored text and nothing inside draws the labelled
+   * designer band and stays invisible on the storefront.
+   */
+  if (!title && !subtitle && children.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Hover showcase item (set a title, or add a block inside)"
+        attribute="data-hover-showcase-item"
+      />
+    ) : null;
+  }
+
+  // A click in the designer selects the block; following the href would
+  // navigate the preview iframe away from the page being edited.
+  const handleLinkClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
+    if (isDesigner) event.preventDefault();
+  };
+
+  const heading = title ? (
+    <h3
+      data-hover-showcase-title=""
+      {...partAttrs('title')}
+      style={{
+        margin: 0,
+        ...(titleFontSize ? { fontSize: titleFontSize } : null)
+      }}
+    >
+      {title}
+    </h3>
+  ) : null;
+
+  /**
+   * A fragment, not a box. Every layout property the merchant authors on this
+   * item (`display`, `gap`, `grid-template-columns`) is emitted against the
+   * `[data-block-id]` wrapper around this component — a box of my own would
+   * make the title, the subtitle and the media a single flex item inside it,
+   * and the authored layout would have exactly one thing to lay out.
+   */
+  return (
+    <>
+      {heading && link ? (
+        // Only the title is linked, matching the section. With no title there
+        // is nothing to hang the anchor on, so an authored link is simply not
+        // reachable — the same as in the section today.
+        <a
+          href={link}
+          data-hover-showcase-link=""
+          {...partAttrs('link')}
+          onClick={handleLinkClick}
+        >
+          {heading}
+        </a>
+      ) : (
+        heading
+      )}
+
+      {subtitle ? (
+        <p
+          data-hover-showcase-subtitle=""
+          {...partAttrs('subtitle')}
+          style={{
+            margin: 0,
+            ...(subtitleFontSize ? { fontSize: subtitleFontSize } : null)
+          }}
+        >
+          {subtitle}
+        </p>
+      ) : null}
+
+      {children}
+    </>
+  );
+};
+
+export default HoverShowcaseItemBlock;

package/src/blocks/icon-block.tsx

@@ -1,7 +1,11 @@
+'use client';
+
 import React from 'react';
 import { getResponsiveValue } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { Image } from '@akinon/next/components/image';
+import { useThemeSettingsContext } from '../theme-settings-context';
+import { IconGlyph, resolveIconSource } from './icon-source';
 
 const isValidUrlValue = (value: string): boolean => {
   if (!value) return false;
@@ -19,6 +23,7 @@ const IconBlock = ({
   block,
   currentBreakpoint = 'desktop'
 }: BlockRendererProps) => {
+  const themeSettings = useThemeSettingsContext();
   const iconValue = getResponsiveValue(block.value, currentBreakpoint, '');
   // An uploaded brand mark announced itself to screen readers as "Icon"
   // because the alt the panel offers was never read.
@@ -44,13 +49,6 @@ const IconBlock = ({
     justifyContent: 'center'
   } as React.CSSProperties;
 
-  const isInlineSvg = (value: string): boolean => {
-    return (
-      typeof value === 'string' &&
-      (value.includes('<svg') || value.includes('<?xml'))
-    );
-  };
-
   const modifySVGColor = (svgContent: string, color: string) => {
     if (color === 'currentColor' || !color) return svgContent;
 
@@ -90,120 +88,21 @@ const IconBlock = ({
     }
   };
 
-  let iconContent;
-
-  let svgSrc = '';
-
-  if (iconValue) {
-    if (typeof iconValue === 'string') {
-      svgSrc = iconValue.trim();
-    } else if (typeof iconValue === 'object' && iconValue !== null) {
-      if ('url' in iconValue) {
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        svgSrc = String((iconValue as any).url || '').trim();
-      } else {
-        // Try to find a string value in the object (e.g. localized)
-        const values = Object.values(iconValue);
-        const stringVal = values.find((v) => typeof v === 'string');
-        if (stringVal) {
-          svgSrc = (stringVal as string).trim();
-        }
-      }
-    }
-
-    const isBase64 =
-      typeof svgSrc === 'string' && svgSrc.startsWith('data:image');
-    const isSvg = isInlineSvg(svgSrc);
-    const isAbsolutePath = svgSrc.startsWith('/');
-
-    if (
-      !isBase64 &&
-      !isSvg &&
-      svgSrc &&
-      !isAbsolutePath &&
-      !svgSrc.startsWith('http') &&
-      !svgSrc.startsWith('//')
-    ) {
-      const cloudName = process.env.NEXT_PUBLIC_IMAGE_CLOUD_NAME?.trim();
-      svgSrc = cloudName
-        ? `https://${cloudName}/${svgSrc.replace(/^\/+/, '')}`
-        : '';
-    }
-
-    if (
-      isBase64 &&
-      svgSrc.includes('data:image/svg+xml;base64,') &&
-      iconColor !== 'currentColor'
-    ) {
-      svgSrc = processBase64SVG(svgSrc, iconColor);
-    }
-
-    if (svgSrc && svgSrc.trim() !== '') {
-      // Check if it's inline SVG content
-      if (isInlineSvg(svgSrc)) {
-        // Apply color modification to inline SVG
-        const coloredSvg =
-          iconColor !== 'currentColor'
-            ? modifySVGColor(svgSrc, iconColor)
-            : svgSrc;
-
-        iconContent = (
-          <div
-            style={{
-              ...iconStyles,
-              // eslint-disable-next-line @typescript-eslint/no-explicit-any
-              ['--svg-size' as any]: iconSize + 'px'
-            }}
-            className="[&>svg]:w-[var(--svg-size)] [&>svg]:h-[var(--svg-size)]"
-            dangerouslySetInnerHTML={{ __html: coloredSvg }}
-          />
-        );
-      } else {
-        // It's a URL or base64, use img tag
-        if (isValidUrlValue(svgSrc)) {
-          iconContent = (
-            <div style={iconStyles}>
-              <Image
-                src={svgSrc}
-                width={Number(iconSize)}
-                height={Number(iconSize)}
-                alt={iconAlt}
-              />
-            </div>
-          );
-        }
-      }
-    } else {
-      iconContent = (
-        <div
-          style={{
-            ...iconStyles,
-            border: '1px dashed #ccc',
-            borderRadius: '4px',
-            backgroundColor: '#f9f9f9'
-          }}
-        >
-          <span style={{ fontSize: '10px', color: '#999' }}>No icon</span>
-        </div>
-      );
-    }
+  const noIcon = (
+    <div
+      style={{
+        ...iconStyles,
+        border: '1px dashed #ccc',
+        borderRadius: '4px',
+        backgroundColor: '#f9f9f9'
+      }}
+    >
+      <span style={{ fontSize: '10px', color: '#999' }}>No icon</span>
+    </div>
+  );
 
-    if (!iconContent) {
-      iconContent = (
-        <div
-          style={{
-            ...iconStyles,
-            border: '1px dashed #ccc',
-            borderRadius: '4px',
-            backgroundColor: '#f9f9f9'
-          }}
-        >
-          <span style={{ fontSize: '10px', color: '#999' }}>No icon</span>
-        </div>
-      );
-    }
-  } else {
-    iconContent = (
+  if (!iconValue) {
+    return (
       <div
         style={{
           ...iconStyles,
@@ -234,7 +133,69 @@ const IconBlock = ({
     );
   }
 
-  return iconContent;
+  // What the stored value actually is — markup, a URL, a catalogue key, or
+  // nothing. The CDN prefix used to be applied to every bare value, which is
+  // why a picked catalogue key such as `basket` shipped as a broken image.
+  const source = resolveIconSource(iconValue, themeSettings);
+
+  if (source.kind === 'svg') {
+    const coloredSvg =
+      iconColor !== 'currentColor'
+        ? modifySVGColor(source.markup, iconColor)
+        : source.markup;
+
+    return (
+      <div
+        style={{
+          ...iconStyles,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ['--svg-size' as any]: iconSize + 'px'
+        }}
+        className="[&>svg]:w-[var(--svg-size)] [&>svg]:h-[var(--svg-size)]"
+        dangerouslySetInnerHTML={{ __html: coloredSvg }}
+      />
+    );
+  }
+
+  if (source.kind === 'glyph') {
+    return (
+      <div
+        style={{
+          ...iconStyles,
+          // The glyphs are drawn with `currentColor`, so the colour the panel
+          // stores is inherited rather than rewritten into the markup.
+          ...(iconColor && iconColor !== 'currentColor'
+            ? { color: iconColor }
+            : null)
+        }}
+      >
+        <IconGlyph glyph={source.glyph} size={Number(iconSize) || 24} />
+      </div>
+    );
+  }
+
+  if (source.kind === 'url') {
+    const src =
+      source.url.includes('data:image/svg+xml;base64,') &&
+      iconColor !== 'currentColor'
+        ? processBase64SVG(source.url, iconColor)
+        : source.url;
+
+    if (isValidUrlValue(src)) {
+      return (
+        <div style={iconStyles}>
+          <Image
+            src={src}
+            width={Number(iconSize)}
+            height={Number(iconSize)}
+            alt={iconAlt}
+          />
+        </div>
+      );
+    }
+  }
+
+  return noIcon;
 };
 
 export default IconBlock;