@akinon/pz-theme 2.0.38-rc.0 → 2.0.39-beta.0

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

@@ -0,0 +1,391 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { DesignerPlaceholder, readToggle } from './product-block-utils';
+import { hasItemTemplate, ItemTemplateList } from './item-template';
+
+interface SocialLinkItem {
+  icon?: string;
+  link?: string;
+  size?: number | string;
+  color?: string;
+  /** Per-entry override for the accessible name and the optional caption. */
+  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
+ * has no other way to reach the accessible name of an icon.
+ */
+const parseLabelOverrides = (raw: string): Record<string, string> =>
+  raw
+    .split(/[;\n]/)
+    .map((entry) => entry.trim())
+    .filter(Boolean)
+    .reduce<Record<string, string>>((acc, entry) => {
+      const separatorIndex = entry.indexOf('=');
+      if (separatorIndex <= 0) return acc;
+
+      const key = entry.slice(0, separatorIndex).trim().toLowerCase();
+      const value = entry.slice(separatorIndex + 1).trim();
+      if (key && value) acc[key] = value;
+
+      return acc;
+    }, {});
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/** Stroke width is the one dimension here that is meaningful below 1px. */
+const clampDecimal = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Number(value);
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+/**
+ * Functional chrome block: the row of social icons in the header or footer.
+ * The entries (platform + url, with an optional per-icon size, colour and
+ * label) are authored in the editor through the `items` repeatable property;
+ * the block owns the row layout, and a group marked as the row layout replaces
+ * the icon with whatever the designer built.
+ * Properties: items, iconSize, gap, strokeWidth, wrap, maxItems, showLabels,
+ * labelGap, showTooltip, openInNewTab, labelOverrides.
+ * Parts: list, link, icon, label.
+ */
+const SocialLinksBlock = ({
+  block,
+  placeholderId,
+  sectionId,
+  selectedBlockId = null,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  // Read straight off properties: `items` is an array, and getResponsiveValue
+  // treats arrays as a malformed responsive map and returns the fallback.
+  const rawItems = block.properties?.items;
+  const items: SocialLinkItem[] = Array.isArray(rawItems) ? rawItems : [];
+
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 20),
+    20,
+    12,
+    64
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 12),
+    12,
+    0,
+    48
+  );
+  const strokeWidth = clampDecimal(
+    getResponsiveValue(block.properties?.strokeWidth, currentBreakpoint, 1.6),
+    1.6,
+    0.5,
+    4
+  );
+  const wrap = readToggle(block.properties?.wrap, currentBreakpoint, true);
+  const showLabels = readToggle(
+    block.properties?.showLabels,
+    currentBreakpoint,
+    false
+  );
+  const showTooltip = readToggle(
+    block.properties?.showTooltip,
+    currentBreakpoint,
+    true
+  );
+  const openInNewTab = readToggle(
+    block.properties?.openInNewTab,
+    currentBreakpoint,
+    true
+  );
+  const labelGap = clampNumber(
+    getResponsiveValue(block.properties?.labelGap, currentBreakpoint, 8),
+    8,
+    0,
+    32
+  );
+  const maxItems = clampNumber(
+    getResponsiveValue(block.properties?.maxItems, currentBreakpoint, 0),
+    0,
+    0,
+    30
+  );
+  const labelOverrides = parseLabelOverrides(
+    String(
+      getResponsiveValue(
+        block.properties?.labelOverrides,
+        currentBreakpoint,
+        ''
+      ) ?? ''
+    )
+  );
+
+  const visibleItems = items.filter((item) => item && (item.icon || item.link));
+  const limitedItems =
+    maxItems > 0 ? visibleItems.slice(0, maxItems) : visibleItems;
+
+  // Resolved once so the built-in icon and a designer-authored row read the
+  // same fields — `item.url`, `item.label`, `item.icon`.
+  const resolvedItems = limitedItems.map((item, index) => {
+    const platform = String(item.icon || 'globe').toLowerCase();
+    const href = String(item.link || '');
+    const label = String(
+      item.label || labelOverrides[platform] || platformLabel(platform)
+    );
+
+    return {
+      key: `${platform}-${index}`,
+      icon: platform,
+      platform,
+      label,
+      name: label,
+      url: href,
+      link: href,
+      color: String(item.color || ''),
+      size: clampNumber(item.size, iconSize, 12, 64),
+      index: index + 1
+    };
+  });
+
+  // A designer who marked a child as the row layout gets that layout repeated
+  // per entry; otherwise the built-in icon renders unchanged.
+  const customRows =
+    hasItemTemplate(block, currentBreakpoint) &&
+    (resolvedItems.length > 0 || isDesigner) ? (
+      <ItemTemplateList
+        block={block}
+        items={resolvedItems}
+        placeholderId={placeholderId}
+        sectionId={sectionId}
+        isDesigner={isDesigner}
+        selectedBlockId={selectedBlockId}
+        currentBreakpoint={currentBreakpoint}
+        designerPlaceholderCount={4}
+      />
+    ) : null;
+
+  if (resolvedItems.length === 0 && !customRows) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Social links (no entries)"
+        attribute="data-social-links"
+      />
+    ) : null;
+  }
+
+  return (
+    <div
+      data-social-links=""
+      {...partAttrs('list')}
+      style={{
+        display: 'flex',
+        alignItems: 'center',
+        flexWrap: wrap ? 'wrap' : 'nowrap',
+        gap: `${gap}px`
+      }}
+    >
+      {customRows ??
+        resolvedItems.map((item) => {
+          const glyph = SOCIAL_GLYPHS[item.platform] || SOCIAL_GLYPHS.globe;
+
+          return (
+            <NextLink
+              key={item.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 ? '#' : item.url || '#'}
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+              }}
+              aria-label={item.label}
+              title={showTooltip ? item.label : undefined}
+              data-social-link={item.platform}
+              {...partAttrs('link')}
+              {...(isDesigner || !openInNewTab
+                ? {}
+                : { target: '_blank', rel: 'noopener noreferrer' })}
+              style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: item.color || 'inherit',
+                textDecoration: 'none',
+                // Zero line-height keeps a lone icon from adding a text
+                // baseline; a caption needs its own leading back.
+                lineHeight: showLabels ? 'normal' : 0,
+                ...(showLabels ? { gap: `${labelGap}px` } : null)
+              }}
+            >
+              <svg
+                width={item.size}
+                height={item.size}
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth={strokeWidth}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+                focusable="false"
+                {...partAttrs('icon')}
+              >
+                {glyph}
+              </svg>
+
+              {showLabels && (
+                <span data-social-link-label="" {...partAttrs('label')}>
+                  {item.label}
+                </span>
+              )}
+            </NextLink>
+          );
+        })}
+    </div>
+  );
+};
+
+export default SocialLinksBlock;

package/src/blocks/wishlist-button-block.tsx

@@ -0,0 +1,115 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { BlockRendererProps } from './block-renderer-registry';
+import { readToggle } from './product-block-utils';
+
+const clampNumber = (
+  value: unknown,
+  fallback: number,
+  min: number,
+  max: number
+) => {
+  const numeric = Math.round(Number(value));
+  if (!Number.isFinite(numeric)) return fallback;
+  return Math.min(max, Math.max(min, numeric));
+};
+
+const HEART_PATH =
+  'M12 20s-7-4.35-7-9a4 4 0 0 1 7-2.65A4 4 0 0 1 19 11c0 4.65-7 9-7 9z';
+
+/**
+ * Functional chrome block: favourites/wishlist entry point. The editor
+ * owns placement, target URL, label, icon fill and styling.
+ * Properties: href, ariaLabel, showLabel, label, labelPosition, showIcon,
+ * iconSize, iconVariant, gap.
+ * Parts: link, icon, label.
+ */
+const WishlistButtonBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const prop = (key: string, fallback: string) =>
+    String(
+      getResponsiveValue(block.properties?.[key], currentBreakpoint, fallback)
+    );
+
+  const href = prop('href', '/account/favourite-products');
+  const ariaLabel = prop('ariaLabel', 'Favourites');
+  const label = prop('label', 'Favourites');
+  const labelPosition = prop('labelPosition', 'after');
+  const iconVariant = prop('iconVariant', 'outline');
+  const showLabel = readToggle(
+    block.properties?.showLabel,
+    currentBreakpoint,
+    false
+  );
+  const showIcon = readToggle(
+    block.properties?.showIcon,
+    currentBreakpoint,
+    true
+  );
+  const iconSize = clampNumber(
+    getResponsiveValue(block.properties?.iconSize, currentBreakpoint, 24),
+    24,
+    12,
+    64
+  );
+  const gap = clampNumber(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 6),
+    6,
+    0,
+    32
+  );
+
+  const labelNode = showLabel ? (
+    <span data-wishlist-label="" {...partAttrs('label')}>
+      {label}
+    </span>
+  ) : null;
+
+  return (
+    <NextLink
+      href={href}
+      data-wishlist-button=""
+      {...partAttrs('link')}
+      aria-label={ariaLabel}
+      // Navigating inside the designer iframe would drop the author out of the
+      // page they are editing.
+      onClick={(event) => {
+        if (isDesigner) event.preventDefault();
+      }}
+      style={{
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: showLabel ? `${gap}px` : undefined,
+        color: 'inherit',
+        textDecoration: 'none'
+      }}
+    >
+      {labelPosition === 'before' && labelNode}
+
+      {showIcon && (
+        <svg
+          width={iconSize}
+          height={iconSize}
+          viewBox="0 0 24 24"
+          fill={iconVariant === 'filled' ? 'currentColor' : 'none'}
+          stroke="currentColor"
+          strokeWidth="1.5"
+          data-wishlist-icon=""
+          {...partAttrs('icon')}
+        >
+          <path d={HEART_PATH} />
+        </svg>
+      )}
+
+      {labelPosition !== 'before' && labelNode}
+    </NextLink>
+  );
+};
+
+export default WishlistButtonBlock;

package/src/chrome/chrome-fallback.tsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+
+import { isTrustedEditorEvent, postToEditor } from '../editor-bridge';
+
+/**
+ * Wraps the brand's original chrome markup.
+ *
+ * On the live site it renders untouched. Inside the theme editor it stays
+ * visible — showing an empty slot (or a template the brand never chose)
+ * would misrepresent what visitors actually see — but it is marked as
+ * coming from project code and offers to hand the area over to the
+ * editor. Taking over is deliberate: nothing is composed, saved or
+ * published until the designer asks for it.
+ */
+export function ChromeFallback({
+  slug,
+  children
+}: {
+  slug: string;
+  children: React.ReactNode;
+}) {
+  const [inDesigner, setInDesigner] = useState(false);
+  const [isHovered, setIsHovered] = useState(false);
+  const [isOverridden, setIsOverridden] = useState(false);
+
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.self !== window.top) {
+      setInDesigner(true);
+    }
+  }, []);
+
+  // Whether this area is composed is decided server-side at request time,
+  // so a takeover that just happened in the editor would otherwise leave
+  // the project markup stacked above the new composition. Follow the theme
+  // the editor pushes and step aside as soon as it has sections — and come
+  // back if the designer removes them again.
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent) => {
+      if (!isTrustedEditorEvent(event)) return;
+
+      const { type, data } = event.data || {};
+      if (type !== 'UPDATE_THEME' && type !== 'LOAD_THEME') return;
+
+      const placeholders = data?.theme?.placeholders;
+      if (!Array.isArray(placeholders)) return;
+
+      const placeholder = placeholders.find(
+        (item: { slug?: string; id?: string }) =>
+          item?.slug === slug || item?.id === slug
+      );
+      const sections = placeholder?.sections;
+      // Mirror the server's takeover rule exactly: only a *composed* section
+      // replaces the project markup, and a composed section is one that reached
+      // the saved order.
+      //
+      // The `native` exclusion guards against the retired native widget path
+      // rather than supporting it. That path styled a project component in place
+      // instead of replacing it, so its sections never entered the order; the
+      // runtime is gone, but the editor can still hold such a section in a
+      // stored theme and push it here, and withdrawing the project markup for
+      // one would show the designer an empty area no visitor ever sees. It goes
+      // when the editor-side machinery does.
+      setIsOverridden(
+        Array.isArray(sections) &&
+          sections.some(
+            (section: { hidden?: boolean; type?: string }) =>
+              !section?.hidden && section?.type !== 'native'
+          )
+      );
+    };
+
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [slug]);
+
+  if (!inDesigner) {
+    return <div data-chrome-fallback={slug}>{children}</div>;
+  }
+
+  if (isOverridden) return null;
+
+  const requestOverride = () => {
+    postToEditor({ type: 'REQUEST_CHROME_OVERRIDE', data: { slug } });
+  };
+
+  return (
+    <div
+      data-chrome-fallback={slug}
+      data-chrome-managed-by="project"
+      style={{ position: 'relative' }}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {/* The brand markup is not editable, so swallow interactions with it */}
+      <div style={{ pointerEvents: 'none' }}>{children}</div>
+
+      <div
+        style={{
+          position: 'absolute',
+          inset: 0,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          gap: '12px',
+          background: isHovered ? 'rgba(15, 23, 42, 0.55)' : 'transparent',
+          outline: isHovered ? '2px dashed #60a5fa' : 'none',
+          outlineOffset: '-2px',
+          transition: 'background 120ms ease',
+          zIndex: 30
+        }}
+      >
+        {isHovered && (
+          <>
+            <span
+              style={{
+                color: '#ffffff',
+                fontSize: '13px',
+                fontWeight: 500,
+                textShadow: '0 1px 2px rgba(0,0,0,0.4)'
+              }}
+            >
+              This {slug} comes from the project code
+            </span>
+            <button
+              type="button"
+              onClick={requestOverride}
+              style={{
+                background: '#2563eb',
+                color: '#ffffff',
+                border: 'none',
+                borderRadius: '6px',
+                padding: '8px 14px',
+                fontSize: '13px',
+                fontWeight: 600,
+                cursor: 'pointer'
+              }}
+            >
+              Edit in theme editor
+            </button>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}