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

package/src/blocks/responsive-array.ts

@@ -0,0 +1,54 @@
+import { getResponsiveValue } from '../utils';
+
+/**
+ * The one "nothing was stored" answer, shared by every call.
+ *
+ * Identity matters more than it looks: a renderer that puts the result in a
+ * `useMemo`/`useEffect` dependency list would re-run on every render if each
+ * miss produced a fresh `[]`, and the churn is invisible until something
+ * expensive (a fetch, a measurement) hangs off it. Frozen so a caller that
+ * mutates the result fails loudly here instead of poisoning the next block
+ * that reads an empty list.
+ */
+export const EMPTY_RESPONSIVE_ARRAY: never[] = Object.freeze([]) as never[];
+
+/**
+ * Reads a stored list that may have been written three different ways.
+ *
+ * The repeatable panel writes properties flat, so a list normally arrives as a
+ * bare array. A descriptor whose `getDefaultValue` seeded per-breakpoint
+ * buckets, or a merchant who authored the list at one breakpoint, makes it
+ * arrive as `{desktop: [...], mobile: [...]}` instead. Anything else — a
+ * string, a number, an object of something other than lists — is "no list".
+ *
+ * The bucketed case is handed to `getResponsiveValue` rather than walked here:
+ * the tablet -> mobile -> desktop chain is the same chain the emitted
+ * stylesheet cascades through, and a second copy of it would be a second thing
+ * to keep in step with `BREAKPOINT_FALLBACKS`.
+ */
+export const readResponsiveArray = <T>(
+  value: unknown,
+  breakpoint = 'desktop'
+): T[] => {
+  // Checked before the object branch: an array IS an object, and
+  // `getResponsiveValue` deliberately rejects arrays as malformed responsive
+  // maps, so asking it first would throw away every flat list.
+  if (Array.isArray(value)) return value as T[];
+
+  if (value && typeof value === 'object') {
+    const resolved = getResponsiveValue(
+      value,
+      breakpoint,
+      EMPTY_RESPONSIVE_ARRAY
+    );
+    return Array.isArray(resolved) ? (resolved as T[]) : EMPTY_RESPONSIVE_ARRAY;
+  }
+
+  return EMPTY_RESPONSIVE_ARRAY;
+};
+
+/** True when the stored value yields at least one entry at this breakpoint. */
+export const hasResponsiveArray = (
+  value: unknown,
+  breakpoint = 'desktop'
+): boolean => readResponsiveArray(value, breakpoint).length > 0;

package/src/blocks/social-glyphs.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+
+/**
+ * Stroke glyphs on the shared 24x24 grid the other chrome blocks draw on, so a
+ * single `stroke: currentColor` inherits the header colour. The keys are the
+ * platform values the editor's social icon picker stores.
+ *
+ * This table lives beside the renderers rather than inside `social-links-block`
+ * because more than one block draws a platform mark now. There is exactly one
+ * copy: a second table would drift the moment the editor's picker gained a
+ * platform, and the mismatch shows up as a silently wrong logo, not an error.
+ */
+export const SOCIAL_GLYPHS: Record<string, React.ReactNode> = {
+  facebook: (
+    <path d="M14 8.5V7a1.5 1.5 0 0 1 1.5-1.5H17V3h-2A4 4 0 0 0 11 7v1.5H9V11h2v10h3V11h2.2l.4-2.5H14z" />
+  ),
+  instagram: (
+    <>
+      <rect x="3" y="3" width="18" height="18" rx="5" />
+      <circle cx="12" cy="12" r="4" />
+      <circle cx="17.4" cy="6.6" r="0.6" />
+    </>
+  ),
+  twitter: <path d="M4 4l16 16M20 4L4 20" />,
+  youtube: (
+    <>
+      <rect x="2.5" y="6" width="19" height="12" rx="4" />
+      <path d="M10 9.5l5 2.5-5 2.5z" />
+    </>
+  ),
+  linkedin: (
+    <>
+      <path d="M6.5 9.5V20" />
+      <circle cx="6.5" cy="5" r="1.1" />
+      <path d="M11 20v-6.5a3.5 3.5 0 0 1 7 0V20" />
+    </>
+  ),
+  tiktok: (
+    <>
+      <path d="M14 4v11a4 4 0 1 1-4-4" />
+      <path d="M14 4c.5 2.6 2.2 4.2 5 4.4" />
+    </>
+  ),
+  pinterest: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M9.5 21l2.2-8.5" />
+      <path d="M9 11a3 3 0 1 1 5 2.2" />
+    </>
+  ),
+  whatsapp: (
+    <>
+      <path d="M3.5 20.5l1.4-4.2A8.2 8.2 0 1 1 8 19.4z" />
+      <path d="M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.6-2-1-1 .9a5 5 0 0 1-1.8-1.8l.9-1-1-2z" />
+    </>
+  ),
+  telegram: <path d="M21 4.5L2.8 11.3l5 1.8L18 7l-7.5 7.4.3 5 2.7-3.4 4 3z" />,
+  discord: (
+    <>
+      <path d="M9 18c-2 0-4-1-4.5-2.5C4 12 5 8.5 6.5 7A11 11 0 0 1 12 5.8 11 11 0 0 1 17.5 7C19 8.5 20 12 19.5 15.5 19 17 17 18 15 18" />
+      <circle cx="9.5" cy="13" r="1.1" />
+      <circle cx="14.5" cy="13" r="1.1" />
+    </>
+  ),
+  snapchat: (
+    <path d="M12 4c2.8 0 4.3 2 4.3 4.6v2c.9.5 1.8.4 2.4.9-.8 1.4-1.9 1.5-1.9 2.3 0 1 1.7 2 2.7 2.2-.9 1.2-2.8 1.2-3.7 1.9-.9.7-1.5 1.1-3.8 1.1s-2.9-.4-3.8-1.1c-.9-.7-2.8-.7-3.7-1.9 1-.2 2.7-1.2 2.7-2.2 0-.8-1.1-.9-1.9-2.3.6-.5 1.5-.4 2.4-.9v-2C7.7 6 9.2 4 12 4z" />
+  ),
+  reddit: (
+    <>
+      <circle cx="12" cy="13" r="8" />
+      <circle cx="9.5" cy="12.5" r="1" />
+      <circle cx="14.5" cy="12.5" r="1" />
+      <path d="M9 16c1.8 1.2 4.2 1.2 6 0" />
+      <path d="M15 5.6l.7 3.4" />
+      <circle cx="16.4" cy="4.6" r="1.1" />
+    </>
+  ),
+  twitch: (
+    <>
+      <path d="M4.5 4h15v9.5L15 18h-3l-3 3H7.5v-3h-3z" />
+      <path d="M11 8v4M15 8v4" />
+    </>
+  ),
+  spotify: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M7.5 9.5c3-1 6.5-.6 9 1" />
+      <path d="M8.2 13c2.4-.8 5.2-.5 7.3.9" />
+      <path d="M9 16.2c1.8-.6 3.9-.4 5.5.7" />
+    </>
+  ),
+  apple: (
+    <>
+      <path d="M15.5 3c.2 1.4-.9 3-2.3 3.1-.2-1.4.9-3 2.3-3.1z" />
+      <path d="M18.5 16.5c-.6 1.6-1.9 3.5-3.2 3.5-1 0-1.4-.6-2.6-.6s-1.6.6-2.6.6c-1.4 0-3.2-2.6-3.7-4.6-.7-2.8 0-6.4 2.6-7 1.2-.3 2.3.6 3 .6.7 0 2-.8 3.3-.6.9.1 2.2.5 3 1.8-2.5 1.5-2.3 5 .2 6.3z" />
+    </>
+  ),
+  google: (
+    <>
+      <path d="M20.5 12A8.5 8.5 0 1 1 17.9 5.9" />
+      <path d="M20.5 12H12" />
+    </>
+  ),
+  email: (
+    <>
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <path d="M3.5 6.5L12 13l8.5-6.5" />
+    </>
+  ),
+  phone: (
+    <path d="M6 3h3l1.5 4-2 1.5a12 12 0 0 0 5 5L15 11.5 19 13v3.5a1.5 1.5 0 0 1-1.7 1.5A15.5 15.5 0 0 1 4.5 5.2 1.5 1.5 0 0 1 6 3z" />
+  ),
+  globe: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M3 12h18" />
+      <path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z" />
+    </>
+  )
+};
+
+export const PLATFORM_LABELS: Record<string, string> = {
+  twitter: 'Twitter / X',
+  globe: 'Website',
+  email: 'Email',
+  phone: 'Phone'
+};
+
+export const platformLabel = (platform: string) =>
+  PLATFORM_LABELS[platform] ||
+  (platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'Link');

package/src/blocks/social-icons-list-block.tsx

@@ -0,0 +1,159 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+import { readResponsiveArray } from './responsive-array';
+import { IconGlyph } from './icon-source';
+import { SOCIAL_GLYPHS, platformLabel } from './social-glyphs';
+
+/**
+ * What the editor's social icon panel writes per entry
+ * (pz-dynamic-widget `src/components/theme-editor/social-icons-editor.tsx`,
+ * `SocialIconItem`). There is no label and no caption here: the panel offers
+ * a platform, a link, a size and a colour, and nothing else.
+ */
+interface SocialIconItem {
+  icon?: string;
+  link?: string;
+  size?: number | string;
+  color?: string;
+}
+
+/** The panel writes a number, but published JSON has carried strings too. */
+const clampSize = (value: unknown, fallback: number) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(64, Math.max(12, numeric));
+};
+
+/**
+ * Off-site, and therefore worth leaving the storefront for in a new tab.
+ * The descriptor advertises no "open in new tab" property, so the href itself
+ * has to answer it: a brand's own `/contact` stays in place, `https://…`
+ * does not.
+ */
+const isExternalHref = (href: string) => /^(https?:)?\/\//i.test(href);
+
+/**
+ * Functional chrome block: a row of social platform marks, each one a link.
+ * Entries are authored through the `icons` property (platform, url, size,
+ * colour); this block has no children, no captions and no layout properties —
+ * it is `social-links` reduced to the icons.
+ *
+ * NO BOX OF ITS OWN, deliberately. The entries are returned as siblings so
+ * they are the direct children of the `[data-block-id]` wrapper the generated
+ * stylesheet writes onto. The descriptor advertises `gap` as a block-level
+ * style, and a `gap` (or a `display: flex`, or a `grid-template-columns`) set
+ * on the wrapper only reaches the icons if nothing of ours sits in between —
+ * a list element here would collect the whole row into one flex item.
+ *
+ * Properties: icons.
+ * Parts: link, icon.
+ */
+const SocialIconsListBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  // `icons`, not `items` — the property key differs from the sibling block.
+  const items = readResponsiveArray<SocialIconItem>(
+    block.properties?.icons,
+    currentBreakpoint
+  );
+
+  const entries = items
+    .filter((item) => item && (item.icon || item.link))
+    .map((item, index) => {
+      const platform = String(item.icon || 'globe').toLowerCase();
+      const href = String(item.link || '').trim();
+
+      return {
+        key: `${platform}-${index}`,
+        platform,
+        href,
+        label: platformLabel(platform),
+        // 24 is what the panel seeds a new entry with, so an entry saved
+        // before the size field existed matches the ones saved after it.
+        size: clampSize(item.size, 24),
+        color: String(item.color || '')
+      };
+    });
+
+  if (entries.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Social icons (no entries)"
+        attribute="data-social-icons-list"
+      />
+    ) : null;
+  }
+
+  return (
+    <>
+      {entries.map((entry) => {
+        // An unknown platform still draws something recognisable rather than
+        // an empty box; the picker and this table are separate lists.
+        const glyph = SOCIAL_GLYPHS[entry.platform] || SOCIAL_GLYPHS.globe;
+
+        const icon = (
+          <IconGlyph
+            glyph={glyph}
+            size={entry.size}
+            data-social-icon-glyph=""
+            {...partAttrs('icon')}
+          />
+        );
+
+        // Per-entry colour is the one authored value with no other channel:
+        // it differs per icon, so no block or part rule can express it. It
+        // lands on the link rather than on the glyph so that a part rule for
+        // `icon` still has somewhere to win from.
+        const colorStyle = entry.color ? { color: entry.color } : undefined;
+
+        if (!entry.href) {
+          return (
+            <span
+              key={entry.key}
+              // A mark with no link is a logo, not a control — announced as an
+              // image so it is not silent, but not focusable.
+              role="img"
+              aria-label={entry.label}
+              data-social-icon={entry.platform}
+              style={colorStyle}
+              {...partAttrs('link')}
+            >
+              {icon}
+            </span>
+          );
+        }
+
+        return (
+          <NextLink
+            key={entry.key}
+            // Navigating inside the designer iframe would drop the author out
+            // of the page they are editing, so the icons are inert there.
+            href={isDesigner ? '#' : entry.href}
+            onClick={(event) => {
+              if (isDesigner) event.preventDefault();
+            }}
+            aria-label={entry.label}
+            title={entry.label}
+            data-social-icon={entry.platform}
+            style={colorStyle}
+            {...partAttrs('link')}
+            {...(!isDesigner && isExternalHref(entry.href)
+              ? { target: '_blank', rel: 'noopener noreferrer' }
+              : {})}
+          >
+            {icon}
+          </NextLink>
+        );
+      })}
+    </>
+  );
+};
+
+export default SocialIconsListBlock;

package/src/blocks/social-links-block.tsx

@@ -6,6 +6,7 @@ import { getResponsiveValue, partAttrs } from '../utils';
 import { BlockRendererProps } from './block-renderer-registry';
 import { DesignerPlaceholder, readToggle } from './product-block-utils';
 import { hasItemTemplate, ItemTemplateList } from './item-template';
+import { SOCIAL_GLYPHS, platformLabel } from './social-glyphs';
 
 interface SocialLinkItem {
   icon?: string;
@@ -16,131 +17,6 @@ interface SocialLinkItem {
   label?: string;
 }
 
-/**
- * Stroke glyphs on the shared 24x24 grid the other chrome blocks draw on, so a
- * single `stroke: currentColor` inherits the header colour. The keys are the
- * platform values the editor's social icon picker stores.
- */
-const SOCIAL_GLYPHS: Record<string, React.ReactNode> = {
-  facebook: (
-    <path d="M14 8.5V7a1.5 1.5 0 0 1 1.5-1.5H17V3h-2A4 4 0 0 0 11 7v1.5H9V11h2v10h3V11h2.2l.4-2.5H14z" />
-  ),
-  instagram: (
-    <>
-      <rect x="3" y="3" width="18" height="18" rx="5" />
-      <circle cx="12" cy="12" r="4" />
-      <circle cx="17.4" cy="6.6" r="0.6" />
-    </>
-  ),
-  twitter: <path d="M4 4l16 16M20 4L4 20" />,
-  youtube: (
-    <>
-      <rect x="2.5" y="6" width="19" height="12" rx="4" />
-      <path d="M10 9.5l5 2.5-5 2.5z" />
-    </>
-  ),
-  linkedin: (
-    <>
-      <path d="M6.5 9.5V20" />
-      <circle cx="6.5" cy="5" r="1.1" />
-      <path d="M11 20v-6.5a3.5 3.5 0 0 1 7 0V20" />
-    </>
-  ),
-  tiktok: (
-    <>
-      <path d="M14 4v11a4 4 0 1 1-4-4" />
-      <path d="M14 4c.5 2.6 2.2 4.2 5 4.4" />
-    </>
-  ),
-  pinterest: (
-    <>
-      <circle cx="12" cy="12" r="9" />
-      <path d="M9.5 21l2.2-8.5" />
-      <path d="M9 11a3 3 0 1 1 5 2.2" />
-    </>
-  ),
-  whatsapp: (
-    <>
-      <path d="M3.5 20.5l1.4-4.2A8.2 8.2 0 1 1 8 19.4z" />
-      <path d="M9 9.5c0 3 2.5 5.5 5.5 5.5l1-1.6-2-1-1 .9a5 5 0 0 1-1.8-1.8l.9-1-1-2z" />
-    </>
-  ),
-  telegram: <path d="M21 4.5L2.8 11.3l5 1.8L18 7l-7.5 7.4.3 5 2.7-3.4 4 3z" />,
-  discord: (
-    <>
-      <path d="M9 18c-2 0-4-1-4.5-2.5C4 12 5 8.5 6.5 7A11 11 0 0 1 12 5.8 11 11 0 0 1 17.5 7C19 8.5 20 12 19.5 15.5 19 17 17 18 15 18" />
-      <circle cx="9.5" cy="13" r="1.1" />
-      <circle cx="14.5" cy="13" r="1.1" />
-    </>
-  ),
-  snapchat: (
-    <path d="M12 4c2.8 0 4.3 2 4.3 4.6v2c.9.5 1.8.4 2.4.9-.8 1.4-1.9 1.5-1.9 2.3 0 1 1.7 2 2.7 2.2-.9 1.2-2.8 1.2-3.7 1.9-.9.7-1.5 1.1-3.8 1.1s-2.9-.4-3.8-1.1c-.9-.7-2.8-.7-3.7-1.9 1-.2 2.7-1.2 2.7-2.2 0-.8-1.1-.9-1.9-2.3.6-.5 1.5-.4 2.4-.9v-2C7.7 6 9.2 4 12 4z" />
-  ),
-  reddit: (
-    <>
-      <circle cx="12" cy="13" r="8" />
-      <circle cx="9.5" cy="12.5" r="1" />
-      <circle cx="14.5" cy="12.5" r="1" />
-      <path d="M9 16c1.8 1.2 4.2 1.2 6 0" />
-      <path d="M15 5.6l.7 3.4" />
-      <circle cx="16.4" cy="4.6" r="1.1" />
-    </>
-  ),
-  twitch: (
-    <>
-      <path d="M4.5 4h15v9.5L15 18h-3l-3 3H7.5v-3h-3z" />
-      <path d="M11 8v4M15 8v4" />
-    </>
-  ),
-  spotify: (
-    <>
-      <circle cx="12" cy="12" r="9" />
-      <path d="M7.5 9.5c3-1 6.5-.6 9 1" />
-      <path d="M8.2 13c2.4-.8 5.2-.5 7.3.9" />
-      <path d="M9 16.2c1.8-.6 3.9-.4 5.5.7" />
-    </>
-  ),
-  apple: (
-    <>
-      <path d="M15.5 3c.2 1.4-.9 3-2.3 3.1-.2-1.4.9-3 2.3-3.1z" />
-      <path d="M18.5 16.5c-.6 1.6-1.9 3.5-3.2 3.5-1 0-1.4-.6-2.6-.6s-1.6.6-2.6.6c-1.4 0-3.2-2.6-3.7-4.6-.7-2.8 0-6.4 2.6-7 1.2-.3 2.3.6 3 .6.7 0 2-.8 3.3-.6.9.1 2.2.5 3 1.8-2.5 1.5-2.3 5 .2 6.3z" />
-    </>
-  ),
-  google: (
-    <>
-      <path d="M20.5 12A8.5 8.5 0 1 1 17.9 5.9" />
-      <path d="M20.5 12H12" />
-    </>
-  ),
-  email: (
-    <>
-      <rect x="3" y="5" width="18" height="14" rx="2" />
-      <path d="M3.5 6.5L12 13l8.5-6.5" />
-    </>
-  ),
-  phone: (
-    <path d="M6 3h3l1.5 4-2 1.5a12 12 0 0 0 5 5L15 11.5 19 13v3.5a1.5 1.5 0 0 1-1.7 1.5A15.5 15.5 0 0 1 4.5 5.2 1.5 1.5 0 0 1 6 3z" />
-  ),
-  globe: (
-    <>
-      <circle cx="12" cy="12" r="9" />
-      <path d="M3 12h18" />
-      <path d="M12 3a15 15 0 0 1 0 18 15 15 0 0 1 0-18z" />
-    </>
-  )
-};
-
-const PLATFORM_LABELS: Record<string, string> = {
-  twitter: 'Twitter / X',
-  globe: 'Website',
-  email: 'Email',
-  phone: 'Phone'
-};
-
-const platformLabel = (platform: string) =>
-  PLATFORM_LABELS[platform] ||
-  (platform ? platform.charAt(0).toUpperCase() + platform.slice(1) : 'Link');
-
 /**
  * `platform=Label` pairs, one per `;` or newline. The built-in names are
  * English and singular ("Twitter / X"); a brand running in another language

package/src/blocks/value-props-list-block.tsx

@@ -0,0 +1,152 @@
+'use client';
+
+import React from 'react';
+import { partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder } from './product-block-utils';
+import { readResponsiveArray } from './responsive-array';
+import { IconGlyph, resolveIconSource } from './icon-source';
+import { useThemeSettingsContext } from '../theme-settings-context';
+
+/**
+ * What the editor's value proposition panel writes per entry
+ * (pz-dynamic-widget `src/components/theme-editor/value-props-editor.tsx`,
+ * `ValuePropItem`). The icon is a catalogue KEY — that panel's picker calls
+ * `onSelect(iconKey)` and stores the key even when the brand uploaded its own
+ * mark, which is why the key is resolved rather than used as a src.
+ */
+interface ValuePropItem {
+  icon?: string;
+  title?: string;
+  description?: string;
+}
+
+/**
+ * Functional chrome block: the "free shipping / secure payment / easy returns"
+ * strip. Rows are authored through the `items` property, which the descriptor
+ * SEEDS WITH THREE ENTRIES — this block draws content the moment it is
+ * inserted, so a list read that silently yielded nothing would ship as a
+ * visibly empty strip rather than as a placeholder anyone notices.
+ *
+ * NO BOX OF ITS OWN, deliberately: the rows are returned as siblings so they
+ * are the direct children of the `[data-block-id]` wrapper the generated
+ * stylesheet writes onto. That is what lets the three-across desktop grid and
+ * the stacked mobile list (the shape the editor previews) come from a
+ * `display`/`gap`/`grid-template-columns` set on the block itself. A wrapper
+ * of ours would take those rules and leave the rows unarranged inside it.
+ *
+ * Properties: items.
+ * Parts: item, icon, text, title, description.
+ */
+const ValuePropsListBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const themeSettings = useThemeSettingsContext();
+
+  const items = readResponsiveArray<ValuePropItem>(
+    block.properties?.items,
+    currentBreakpoint
+  );
+
+  const rows = items
+    .filter((item) => item && (item.icon || item.title || item.description))
+    .map((item, index) => ({
+      key: `${item.title || item.icon || 'row'}-${index}`,
+      icon: String(item.icon || '').trim(),
+      title: String(item.title || '').trim(),
+      description: String(item.description || '').trim()
+    }));
+
+  if (rows.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Value propositions (no entries)"
+        attribute="data-value-props-list"
+      />
+    ) : null;
+  }
+
+  return (
+    <>
+      {rows.map((row) => {
+        const source = resolveIconSource(row.icon, themeSettings);
+
+        let icon: React.ReactNode = null;
+
+        if (source.kind === 'glyph') {
+          icon = (
+            <IconGlyph
+              glyph={source.glyph}
+              data-value-prop-icon=""
+              {...partAttrs('icon')}
+            />
+          );
+        } else if (source.kind === 'svg') {
+          icon = (
+            <span
+              data-value-prop-icon=""
+              {...partAttrs('icon')}
+              // Brand-uploaded theme-settings markup, injected the way
+              // `icon-block` and `text-block` already inject stored markup.
+              // Sanitization is a package-wide decision, not this block's.
+              dangerouslySetInnerHTML={{ __html: source.markup }}
+            />
+          );
+        } else if (source.kind === 'url') {
+          icon = (
+            // Plain img: an uploaded mark is served from the brand's own CDN,
+            // which the next.config image allowlist does not necessarily
+            // cover. Empty alt because the title beside it carries the
+            // meaning — an icon named twice is worse than an unnamed one.
+            // eslint-disable-next-line @next/next/no-img-element
+            <img
+              src={source.url}
+              alt=""
+              loading="lazy"
+              width={24}
+              height={24}
+              data-value-prop-icon=""
+              {...partAttrs('icon')}
+            />
+          );
+        }
+        // `kind: 'none'` draws no icon element at all. The panel's add form
+        // starts on an icon name that is in no catalogue, so an entry saved
+        // without opening the picker resolves to nothing — the row still has
+        // to carry its title.
+
+        const hasText = Boolean(row.title || row.description);
+
+        return (
+          <div key={row.key} data-value-prop="" {...partAttrs('item')}>
+            {icon}
+            {hasText && (
+              // The text sits in its own box so the row can be laid out as
+              // "icon beside a stacked title and description" without the
+              // three pieces becoming siblings of each other.
+              <div data-value-prop-text="" {...partAttrs('text')}>
+                {row.title && (
+                  <span data-value-prop-title="" {...partAttrs('title')}>
+                    {row.title}
+                  </span>
+                )}
+                {row.description && (
+                  <span
+                    data-value-prop-description=""
+                    {...partAttrs('description')}
+                  >
+                    {row.description}
+                  </span>
+                )}
+              </div>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+};
+
+export default ValuePropsListBlock;