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

package/src/blocks/variant-selector-block.tsx

@@ -0,0 +1,1110 @@
+'use client';
+
+import React from 'react';
+import NextLink from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useSession } from 'next-auth/react';
+import { useAddStockAlertMutation } from '@akinon/next/data/client/wishlist';
+import { getResponsiveValue, partAttrs } from '../utils';
+import { useOverlay } from '../hooks/use-overlay';
+import { BlockRendererProps } from './block-renderer-registry';
+import {
+  DesignerPlaceholder,
+  ThemeVariantGroup,
+  ThemeVariantOption,
+  getVariantOptionColor,
+  getVariantOptionImage,
+  getVariantOptionStock,
+  pickProductField,
+  readToggle,
+  useThemeProduct
+} from './product-block-utils';
+
+const getOptionUrl = (option: ThemeVariantOption): string =>
+  String(option?.product?.absolute_url || '').trim();
+
+const isOptionDisabled = (option: ThemeVariantOption): boolean =>
+  option?.is_selectable === false || !getOptionUrl(option);
+
+/**
+ * Sold out, as opposed to merely unpickable. `isOptionDisabled` also catches an
+ * option commerce sent without a url, and offering to tell a shopper when an
+ * IN-STOCK product "comes back" would be a lie. Commerce spells the same fact
+ * three ways across payloads, so all three are read.
+ */
+const isOptionSoldOut = (option: ThemeVariantOption): boolean =>
+  option?.in_stock === false ||
+  option?.is_selectable === false ||
+  getVariantOptionStock(option) === 0;
+
+/**
+ * The variant's own product id — the whole point of binding the alert to the
+ * option the shopper picked rather than to the product in general. Without one
+ * there is nothing to register, so the option stays the inert span it is today.
+ */
+const getOptionProductPk = (option: ThemeVariantOption): number | null => {
+  const numeric = Number(option?.product?.pk);
+
+  return Number.isFinite(numeric) && numeric > 0 ? numeric : null;
+};
+
+const isEmail = (value: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+
+const SCRIPT_SCHEME = /^(?:javascript|vbscript|data):/;
+
+/**
+ * Browsers strip whitespace and control characters while parsing a url, so a
+ * tab wedged into "javascript:" still resolves to a live handler; the merchant
+ * value is normalised the same way before it is judged.
+ */
+const isScriptUrl = (value: string): boolean =>
+  SCRIPT_SCHEME.test(value.replace(/[\u0000-\u0020]/g, '').toLowerCase());
+
+/** An authored url is merchant input on its way to `href`: never trusted. */
+const safeHref = (value: string): string => {
+  const trimmed = value.trim();
+
+  return trimmed && !isScriptUrl(trimmed) ? trimmed : '';
+};
+
+/**
+ * Only the tokens this block supplies are substituted; anything else the author
+ * typed stays literal, so a stray brace in legal copy is never eaten.
+ */
+const fillTemplate = (
+  template: string,
+  tokens: Record<string, string>
+): string =>
+  template.replace(/\{(option|attribute|product)\}/g, (match, key: string) =>
+    tokens[key] === undefined ? match : tokens[key]
+  );
+
+/** Which sold-out option currently owns the alert form. */
+type OpenAlert = {
+  /** Unique across groups, so two attributes cannot open one another's form. */
+  key: string;
+  /** Which group draws the inline panel — kept apart from `key` so a group
+   *  whose attribute key contains the separator cannot be mismatched. */
+  groupKey: string;
+  productPk: number;
+  optionLabel: string;
+  attributeName: string;
+};
+
+/**
+ * The four shapes one picker can draw, as a designer names them per attribute.
+ * `box` is what the block has always drawn for its block-level `swatch` layout,
+ * whose stored value stays as it is so published compositions keep resolving to
+ * the same renderer path. `chip` is the round colour/photo swatch — it is NOT
+ * called `swatch` here precisely because that word already means the bordered
+ * box one control higher up the same panel.
+ */
+const GROUP_LAYOUTS = ['box', 'chip', 'dropdown', 'text'];
+const SWATCH_CONTENTS = ['auto', 'color', 'image'];
+const DISABLED_STYLES = ['line-through', 'diagonal', 'none'];
+
+/**
+ * A design almost never renders every attribute the same way: colour is a
+ * circle, size is a box, and a third attribute may be a dropdown. The panel has
+ * no map control, so the override is authored the same way attribute filters
+ * already are — `color:chip, size:box`, keyed by the commerce attribute key.
+ * Anything unparseable is skipped rather than guessed at, which is what keeps
+ * an empty or half-typed value on the block-wide layout.
+ */
+const parseGroupLayouts = (raw: unknown): Record<string, string> => {
+  const map: Record<string, string> = {};
+
+  String(raw || '')
+    .split(',')
+    .forEach((entry) => {
+      const separator = entry.indexOf(':');
+      if (separator === -1) return;
+
+      const key = entry.slice(0, separator).trim().toLowerCase();
+      const value = entry.slice(separator + 1).trim().toLowerCase();
+
+      if (key && GROUP_LAYOUTS.includes(value)) map[key] = value;
+    });
+
+  return map;
+};
+
+/**
+ * Functional PDP block: renders the commerce variant matrix
+ * (product.variants). Each option is its own product URL, so selecting a
+ * variant is a navigation — that keeps SSR, canonical URLs and analytics
+ * intact. The editor owns layout, labels and styling.
+ *
+ * A sold-out option is a dead end by default and stays one unless a brand turns
+ * `stockAlert` on: then it becomes a real control that opens a back-in-stock
+ * form bound to THAT option's own product id.
+ *
+ * Parts: group, label, selected-value, dropdown, option-list, option, swatch,
+ * strike, low-stock, alert-backdrop, alert-panel, alert-title,
+ * alert-description, alert-close, alert-form, alert-label, alert-input,
+ * alert-consent, alert-submit, alert-success, alert-error, alert-signin.
+ * Properties: layout, groupLayouts, showGroupLabel, showSelectedValue,
+ * selectedValueSeparator, swatchContent, swatchSize, disabledStyle,
+ * strikeWidth, lowStockThreshold, lowStockLabel, gap, optionGap, stockAlert,
+ * stockAlertPresentation, stockAlertTriggerLabel, stockAlertTitle,
+ * stockAlertDescription, stockAlertEmailLabel, stockAlertEmailPlaceholder,
+ * stockAlertConsentText, stockAlertConsentRequired, stockAlertSubmitLabel,
+ * stockAlertLoadingLabel, stockAlertSuccessLabel, stockAlertErrorLabel,
+ * stockAlertInvalidEmailLabel, stockAlertConsentErrorLabel,
+ * stockAlertSignedOutText, stockAlertSignInLabel, stockAlertSignInUrl,
+ * stockAlertCloseLabel.
+ */
+const VariantSelectorBlock = ({
+  block,
+  currentBreakpoint = 'desktop',
+  isDesigner = false
+}: BlockRendererProps) => {
+  const product = useThemeProduct();
+  const router = useRouter();
+  const { data: session, status: sessionStatus } = useSession();
+  const [addStockAlert, { isLoading: isAlertSubmitting }] =
+    useAddStockAlertMutation();
+
+  const [openAlert, setOpenAlert] = React.useState<OpenAlert | null>(null);
+  const [alertEmail, setAlertEmail] = React.useState('');
+  const [alertConsent, setAlertConsent] = React.useState(false);
+  const [alertStatus, setAlertStatus] = React.useState<
+    'idle' | 'success' | 'error'
+  >('idle');
+  const [alertErrorKind, setAlertErrorKind] = React.useState<
+    'email' | 'consent' | 'request'
+  >('request');
+  const alertTriggerRef = React.useRef<HTMLElement | null>(null);
+  // React's own id rather than the block id: the field id is markup, and two
+  // copies of this block on one page must not both answer to the same label.
+  const alertFieldId = React.useId();
+
+  const layoutValue = String(
+    getResponsiveValue(block.properties?.layout, currentBreakpoint, 'swatch')
+  );
+  const layout = layoutValue === 'dropdown' ? 'dropdown' : 'swatch';
+  const showGroupLabel = readToggle(
+    block.properties?.showGroupLabel,
+    currentBreakpoint,
+    true
+  );
+  const gap = Number(
+    getResponsiveValue(block.properties?.gap, currentBreakpoint, 16)
+  );
+  const optionGap = Number(
+    getResponsiveValue(block.properties?.optionGap, currentBreakpoint, 8)
+  );
+
+  const groupLayouts = parseGroupLayouts(
+    getResponsiveValue(block.properties?.groupLayouts, currentBreakpoint, '')
+  );
+  const swatchContentValue = String(
+    getResponsiveValue(block.properties?.swatchContent, currentBreakpoint, 'auto')
+  );
+  const swatchContent = SWATCH_CONTENTS.includes(swatchContentValue)
+    ? swatchContentValue
+    : 'auto';
+  const swatchSizeValue = Number(
+    getResponsiveValue(block.properties?.swatchSize, currentBreakpoint, 32)
+  );
+  const swatchSize =
+    Number.isFinite(swatchSizeValue) && swatchSizeValue > 0
+      ? swatchSizeValue
+      : 32;
+  const showSelectedValue = readToggle(
+    block.properties?.showSelectedValue,
+    currentBreakpoint,
+    false
+  );
+  const selectedValueSeparator = String(
+    getResponsiveValue(
+      block.properties?.selectedValueSeparator,
+      currentBreakpoint,
+      ': '
+    )
+  );
+  const disabledStyleValue = String(
+    getResponsiveValue(
+      block.properties?.disabledStyle,
+      currentBreakpoint,
+      'line-through'
+    )
+  );
+  const disabledStyle = DISABLED_STYLES.includes(disabledStyleValue)
+    ? disabledStyleValue
+    : 'line-through';
+  const strikeWidthValue = Number(
+    getResponsiveValue(block.properties?.strikeWidth, currentBreakpoint, 1)
+  );
+  const strikeWidth =
+    Number.isFinite(strikeWidthValue) && strikeWidthValue > 0
+      ? strikeWidthValue
+      : 1;
+  const lowStockThresholdValue = Number(
+    getResponsiveValue(block.properties?.lowStockThreshold, currentBreakpoint, 0)
+  );
+  // 0 is off: a marker may only appear on a threshold a brand asked for.
+  const lowStockThreshold =
+    Number.isFinite(lowStockThresholdValue) && lowStockThresholdValue > 0
+      ? Math.round(lowStockThresholdValue)
+      : 0;
+  const lowStockLabel = String(
+    getResponsiveValue(
+      block.properties?.lowStockLabel,
+      currentBreakpoint,
+      'Low stock'
+    )
+  );
+
+  /**
+   * The whole back-in-stock capability behind one switch, off by default: a
+   * composition nobody edited must keep rendering the inert struck-through
+   * span it renders today, byte for byte.
+   */
+  const stockAlertEnabled = readToggle(
+    block.properties?.stockAlert,
+    currentBreakpoint,
+    false
+  );
+
+  const alertProp = (key: string, fallback: string): string => {
+    const value = getResponsiveValue(
+      block.properties?.[key],
+      currentBreakpoint,
+      fallback
+    );
+
+    return value === undefined || value === null ? fallback : String(value);
+  };
+
+  // Every word a shopper reads is the brand's, never ours: these markets
+  // attach legal text to collecting an email and only the brand knows it.
+  const alertPresentation =
+    alertProp('stockAlertPresentation', 'inline') === 'modal'
+      ? 'modal'
+      : 'inline';
+  const alertTriggerLabel = alertProp(
+    'stockAlertTriggerLabel',
+    'Notify me when back in stock'
+  );
+  const alertTitle = alertProp('stockAlertTitle', 'Notify me when available');
+  const alertDescription = alertProp(
+    'stockAlertDescription',
+    'We will email you when {attribute} {option} is back in stock.'
+  );
+  const alertEmailLabel = alertProp('stockAlertEmailLabel', 'Email address');
+  const alertEmailPlaceholder = alertProp('stockAlertEmailPlaceholder', '');
+  const alertConsentText = alertProp('stockAlertConsentText', '');
+  const alertConsentRequired =
+    readToggle(
+      block.properties?.stockAlertConsentRequired,
+      currentBreakpoint,
+      false
+    ) && alertConsentText !== '';
+  const alertSubmitLabel = alertProp('stockAlertSubmitLabel', 'Notify me');
+  const alertLoadingLabel = alertProp('stockAlertLoadingLabel', '');
+  const alertSuccessLabel = alertProp(
+    'stockAlertSuccessLabel',
+    'Done — we will email you when it is back.'
+  );
+  const alertErrorLabel = alertProp(
+    'stockAlertErrorLabel',
+    'We could not register your alert. Please try again.'
+  );
+  const alertInvalidEmailLabel = alertProp(
+    'stockAlertInvalidEmailLabel',
+    'Enter a valid email address.'
+  );
+  const alertConsentErrorLabel = alertProp(
+    'stockAlertConsentErrorLabel',
+    'Please accept to continue.'
+  );
+  const alertSignedOutText = alertProp(
+    'stockAlertSignedOutText',
+    'Sign in to be notified when this size is back in stock.'
+  );
+  const alertSignInLabel = alertProp('stockAlertSignInLabel', 'Sign in');
+  const alertSignInUrl = safeHref(alertProp('stockAlertSignInUrl', ''));
+  const alertCloseLabel = alertProp('stockAlertCloseLabel', 'Close');
+
+  /**
+   * Commerce registers a product alert against the SIGNED-IN account:
+   * `/wishlists/product-alerts/` answers 401 to a guest, which is why every
+   * brand that ships this sends the session's own address and sends a signed-out
+   * shopper to auth first. So a guest is told the truth and offered the way
+   * forward the brand authored — never a form that looks like it worked.
+   */
+  const alertSessionEmail = String(
+    (session as { user?: { email?: string } } | null)?.user?.email || ''
+  );
+  // The designer is never signed in as a shopper, and an author who could only
+  // ever see the signed-out branch could not style the form at all.
+  const alertSignedOut = !isDesigner && sessionStatus !== 'authenticated';
+
+  const closeAlert = () => {
+    setOpenAlert(null);
+    setAlertStatus('idle');
+  };
+
+  const openAlertFor = (entry: OpenAlert, trigger: HTMLElement | null) => {
+    alertTriggerRef.current = trigger;
+    setOpenAlert(entry);
+    // A fresh option is a fresh form: a success or an error left over from the
+    // last size must never read as this one's answer.
+    setAlertStatus('idle');
+    setAlertErrorKind('request');
+    setAlertConsent(false);
+    setAlertEmail(alertSessionEmail);
+  };
+
+  const handleAlertSubmit = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    // A submit inside the designer must never reach the brand's alert list.
+    if (isDesigner || isAlertSubmitting || !openAlert) return;
+
+    if (alertConsentRequired && !alertConsent) {
+      setAlertErrorKind('consent');
+      setAlertStatus('error');
+      return;
+    }
+
+    const value = alertEmail.trim();
+    if (!isEmail(value)) {
+      setAlertErrorKind('email');
+      setAlertStatus('error');
+      return;
+    }
+
+    try {
+      await addStockAlert({
+        productPk: openAlert.productPk,
+        email: value
+      }).unwrap();
+      setAlertStatus('success');
+    } catch {
+      // Say so. A shopper who believes they are on a waiting list and is not
+      // is worse off than one who was told nothing.
+      setAlertErrorKind('request');
+      setAlertStatus('error');
+    }
+  };
+
+  /**
+   * Escape, the scroll lock, the focus trap and the `aria-modal` claim all
+   * come from the shared overlay primitive rather than from a copy kept here.
+   * This block can legitimately appear twice on one PDP — a desktop picker and
+   * a mobile one — and two hand-rolled traps, each watching the whole document
+   * and each reading the other's panel as "outside", pulled focus back and
+   * forth until the tab died. The primitive keeps one stack: only the overlay
+   * on top traps focus, answers Escape and claims the page is inert, and the
+   * scroll lock is counted once for the whole package.
+   */
+  const overlay = useOverlay<HTMLDivElement>({
+    open: stockAlertEnabled && openAlert !== null,
+    onClose: closeAlert,
+    isDesigner,
+    // The inline panel sits next in reading order behind no backdrop, so it
+    // neither traps focus nor claims anything about the page around it.
+    modal: alertPresentation === 'modal',
+    // No `fallbackFocusRef`: nothing this block draws outside the panel takes
+    // focus without a tabindex it does not have today, and a fallback that
+    // cannot hold focus would only hide the handover failing.
+    returnFocusRef: alertTriggerRef
+  });
+
+  const rawGroups = pickProductField<ThemeVariantGroup[]>(product, 'variants');
+  const groups = (Array.isArray(rawGroups) ? rawGroups : []).filter(
+    (group) => Array.isArray(group?.options) && group.options.length > 0
+  );
+
+  if (groups.length === 0) {
+    return isDesigner ? (
+      <DesignerPlaceholder
+        label="Variant selector (product has no variants)"
+        attribute="data-variant-selector"
+      />
+    ) : null;
+  }
+
+  const safeGap = Number.isFinite(gap) && gap >= 0 ? gap : 16;
+  const safeOptionGap =
+    Number.isFinite(optionGap) && optionGap >= 0 ? optionGap : 8;
+
+  const alertTokens = openAlert
+    ? {
+        option: openAlert.optionLabel,
+        attribute: openAlert.attributeName,
+        product: String(pickProductField<string>(product, 'title') || '')
+      }
+    : { option: '', attribute: '', product: '' };
+
+  const alertSucceeded = alertStatus === 'success';
+  const alertErrorMessage =
+    alertErrorKind === 'email'
+      ? alertInvalidEmailLabel
+      : alertErrorKind === 'consent'
+      ? alertConsentErrorLabel
+      : alertErrorLabel;
+
+  /**
+   * The form the shopper meets, bound to the one option they picked. Rendered
+   * inside that option's group for the inline presentation and once at the
+   * root for the modal, so it is never detached from what it is about.
+   */
+  const renderAlertBody = () => (
+    <>
+      {alertTitle && (
+        <strong
+          data-variant-alert-title=""
+          {...partAttrs('alert-title')}
+          style={{ display: 'block' }}
+        >
+          {fillTemplate(alertTitle, alertTokens)}
+        </strong>
+      )}
+
+      {alertDescription && (
+        <span
+          data-variant-alert-description=""
+          {...partAttrs('alert-description')}
+          style={{ display: 'block', fontSize: '0.9em' }}
+        >
+          {fillTemplate(alertDescription, alertTokens)}
+        </span>
+      )}
+
+      {alertSignedOut ? (
+        <>
+          <span
+            data-variant-alert-signed-out=""
+            {...partAttrs('alert-description')}
+            style={{ display: 'block', fontSize: '0.9em' }}
+          >
+            {fillTemplate(alertSignedOutText, alertTokens)}
+          </span>
+          {alertSignInUrl && (
+            <NextLink
+              href={alertSignInUrl}
+              data-variant-alert-signin=""
+              {...partAttrs('alert-signin')}
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+              }}
+              style={{ color: 'inherit' }}
+            >
+              {alertSignInLabel}
+            </NextLink>
+          )}
+        </>
+      ) : alertSucceeded ? (
+        <span
+          data-variant-alert-success=""
+          {...partAttrs('alert-success')}
+          role="status"
+          style={{ display: 'block' }}
+        >
+          {fillTemplate(alertSuccessLabel, alertTokens)}
+        </span>
+      ) : (
+        <form
+          data-variant-alert-form=""
+          {...partAttrs('alert-form', {
+            loading: isAlertSubmitting,
+            invalid: alertStatus === 'error'
+          })}
+          onSubmit={handleAlertSubmit}
+          noValidate
+          style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}
+        >
+          {alertEmailLabel && (
+            <label
+              data-variant-alert-label=""
+              {...partAttrs('alert-label')}
+              htmlFor={alertFieldId}
+              style={{ fontSize: '0.85em' }}
+            >
+              {alertEmailLabel}
+            </label>
+          )}
+
+          <input
+            id={alertFieldId}
+            type="email"
+            value={alertEmail}
+            onChange={(event) => {
+              setAlertEmail(event.target.value);
+              if (alertStatus === 'error') setAlertStatus('idle');
+            }}
+            placeholder={alertEmailPlaceholder}
+            aria-label={alertEmailLabel || alertTriggerLabel}
+            aria-invalid={alertStatus === 'error' && alertErrorKind === 'email'}
+            data-variant-alert-input=""
+            {...partAttrs('alert-input', {
+              invalid: alertStatus === 'error' && alertErrorKind === 'email'
+            })}
+            style={{
+              border: '1px solid currentColor',
+              borderRadius: 'inherit',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              padding: '10px 12px',
+              outline: 'none'
+            }}
+          />
+
+          {alertConsentText && (
+            <label
+              data-variant-alert-consent=""
+              {...partAttrs('alert-consent', {
+                invalid: alertStatus === 'error' && alertErrorKind === 'consent'
+              })}
+              style={{
+                display: 'flex',
+                alignItems: 'flex-start',
+                gap: '8px',
+                fontSize: '0.8em'
+              }}
+            >
+              {alertConsentRequired && (
+                <input
+                  type="checkbox"
+                  checked={alertConsent}
+                  onChange={(event) => {
+                    setAlertConsent(event.target.checked);
+                    if (alertStatus === 'error') setAlertStatus('idle');
+                  }}
+                  aria-invalid={
+                    alertStatus === 'error' && alertErrorKind === 'consent'
+                  }
+                />
+              )}
+              <span>{fillTemplate(alertConsentText, alertTokens)}</span>
+            </label>
+          )}
+
+          <button
+            type="submit"
+            data-variant-alert-submit=""
+            {...partAttrs('alert-submit', {
+              loading: isAlertSubmitting,
+              disabled: isAlertSubmitting
+            })}
+            disabled={isAlertSubmitting}
+            aria-busy={isAlertSubmitting}
+            style={{
+              border: '1px solid currentColor',
+              borderRadius: 'inherit',
+              background: 'transparent',
+              color: 'inherit',
+              font: 'inherit',
+              padding: '10px 16px',
+              cursor: isAlertSubmitting ? 'not-allowed' : 'pointer',
+              opacity: isAlertSubmitting ? 0.7 : 1
+            }}
+          >
+            {isAlertSubmitting && alertLoadingLabel
+              ? alertLoadingLabel
+              : alertSubmitLabel}
+          </button>
+
+          {alertStatus === 'error' && (
+            <span
+              data-variant-alert-error=""
+              {...partAttrs('alert-error', { invalid: true })}
+              role="alert"
+              style={{ fontSize: '0.85em' }}
+            >
+              {alertErrorMessage}
+            </span>
+          )}
+        </form>
+      )}
+    </>
+  );
+
+  const renderAlertPanel = (asModal: boolean) => (
+    <div
+      ref={overlay.panelRef}
+      data-variant-alert=""
+      data-variant-alert-state={
+        alertSignedOut
+          ? 'signed-out'
+          : isAlertSubmitting
+          ? 'busy'
+          : alertStatus
+      }
+      {...partAttrs('alert-panel')}
+      role={asModal ? 'dialog' : 'group'}
+      // Only where the backdrop really covers the page and the trap really
+      // holds: the inline panel, the canvas and a dialog that another dialog
+      // has since opened on top of all claim nothing.
+      aria-modal={overlay.ariaModal}
+      aria-label={fillTemplate(alertTitle || alertTriggerLabel, alertTokens)}
+      tabIndex={asModal ? -1 : undefined}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '8px',
+        ...(asModal
+          ? {
+              // Centred on its own rather than inside a flex wrapper, so the
+              // backdrop can stay a sibling and nothing extra sits between
+              // the dialog and the block root.
+              position: 'fixed',
+              top: '50%',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+              zIndex: 1001,
+              width: 'calc(100% - 32px)',
+              maxWidth: '420px',
+              maxHeight: '90vh',
+              overflowY: 'auto',
+              padding: '20px',
+              background: 'var(--variant-alert-background, #ffffff)',
+              color: 'inherit'
+            }
+          : { marginTop: '12px' })
+      }}
+    >
+      {renderAlertBody()}
+
+      <button
+        type="button"
+        data-variant-alert-close=""
+        {...partAttrs('alert-close')}
+        onClick={closeAlert}
+        style={{
+          border: 0,
+          background: 'transparent',
+          color: 'inherit',
+          font: 'inherit',
+          padding: 0,
+          cursor: 'pointer',
+          textAlign: 'left'
+        }}
+      >
+        {alertCloseLabel}
+      </button>
+    </div>
+  );
+
+  return (
+    <div
+      data-variant-selector=""
+      data-variant-layout={layout}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: `${safeGap}px`,
+        width: '100%'
+      }}
+    >
+      {groups.map((group, groupIndex) => {
+        const options = group.options || [];
+        const selectedOption = options.find(
+          (option) => option?.is_selected === true
+        );
+        // The <select> is controlled by URL, so an empty value needs a real
+        // matching option or React drops the selection on every render.
+        const selectedUrl = selectedOption ? getOptionUrl(selectedOption) : '';
+        const groupKey = String(group.attribute_key || groupIndex);
+        const attributeKey = String(group.attribute_key || '')
+          .trim()
+          .toLowerCase();
+        const override = attributeKey ? groupLayouts[attributeKey] : undefined;
+        const groupLayout =
+          override || (layout === 'dropdown' ? 'dropdown' : 'box');
+        const selectedLabel = String(
+          selectedOption?.label || selectedOption?.value || ''
+        );
+        const selectedValueNode =
+          showSelectedValue && selectedLabel ? (
+            <span
+              data-variant-selected-value=""
+              {...partAttrs('selected-value')}
+              style={{ opacity: 1 }}
+            >
+              {selectedLabel}
+            </span>
+          ) : null;
+
+        const renderOption = (
+          option: ThemeVariantOption,
+          optionIndex: number
+        ) => {
+          const label = String(option?.label || option?.value || '');
+          const url = getOptionUrl(option);
+          const disabled = isOptionDisabled(option);
+          const selected = option?.is_selected === true;
+          const struck = disabled && disabledStyle === 'line-through';
+          const showStrike = disabled && disabledStyle === 'diagonal';
+          // A number commerce actually sent, above zero (zero is sold out, not
+          // low) and at or under the threshold the brand set.
+          const stock =
+            lowStockThreshold > 0 ? getVariantOptionStock(option) : null;
+          const isLowStock =
+            stock !== null && stock > 0 && stock <= lowStockThreshold;
+          // Overlays are absolutely placed, so the option only becomes a
+          // positioning context when one of them is actually drawn.
+          const anchored = showStrike || isLowStock;
+
+          const color =
+            swatchContent === 'image' ? '' : getVariantOptionColor(option);
+          const image =
+            swatchContent === 'color' ? '' : getVariantOptionImage(option);
+          const swatchNode =
+            groupLayout !== 'chip'
+              ? null
+              : color ? (
+                  <span
+                    {...partAttrs('swatch')}
+                    style={{
+                      display: 'block',
+                      width: `${swatchSize}px`,
+                      height: `${swatchSize}px`,
+                      background: color
+                    }}
+                  />
+                ) : image ? (
+                  // Plain img: variant swatches come from arbitrary commerce
+                  // CDNs that the brand next.config may not allow.
+                  // eslint-disable-next-line @next/next/no-img-element
+                  <img
+                    src={image}
+                    alt=""
+                    loading="lazy"
+                    {...partAttrs('swatch')}
+                    style={{
+                      display: 'block',
+                      width: `${swatchSize}px`,
+                      height: `${swatchSize}px`,
+                      objectFit: 'cover'
+                    }}
+                  />
+                ) : null;
+
+          const optionStyle: React.CSSProperties =
+            groupLayout === 'text'
+              ? {
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  color: 'inherit',
+                  textDecoration: struck
+                    ? 'line-through'
+                    : selected
+                    ? 'underline'
+                    : 'none',
+                  textUnderlineOffset: '3px',
+                  opacity: disabled ? 0.4 : 1,
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  ...(anchored ? { position: 'relative' } : null)
+                }
+              : groupLayout === 'chip'
+              ? {
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  padding: '2px',
+                  color: 'inherit',
+                  textDecoration: struck ? 'line-through' : 'none',
+                  opacity: disabled ? 0.4 : 1,
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  border: selected
+                    ? '1px solid var(--variant-option-active, currentColor)'
+                    : '1px solid var(--variant-option-border, transparent)',
+                  ...(anchored ? { position: 'relative' } : null)
+                }
+              : {
+                  display: 'inline-flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  minWidth: '40px',
+                  padding: '8px 12px',
+                  color: 'inherit',
+                  textDecoration: struck ? 'line-through' : 'none',
+                  opacity: disabled ? 0.4 : 1,
+                  cursor: disabled ? 'not-allowed' : 'pointer',
+                  border: selected
+                    ? '1px solid var(--variant-option-active, currentColor)'
+                    : '1px solid var(--variant-option-border, #d1d5db)',
+                  ...(anchored ? { position: 'relative' } : null)
+                };
+
+          const body = swatchNode ?? label;
+          // Kept as a single child in the default case: an extra fragment with
+          // adjacent text children makes React's SSR emit comment separators,
+          // which would change the markup of a composition nobody edited.
+          const content = anchored ? (
+            <>
+              {body}
+              {showStrike && (
+                <svg
+                  {...partAttrs('strike')}
+                  aria-hidden="true"
+                  viewBox="0 0 100 100"
+                  preserveAspectRatio="none"
+                  style={{
+                    position: 'absolute',
+                    left: 0,
+                    top: 0,
+                    width: '100%',
+                    height: '100%',
+                    color: 'inherit',
+                    pointerEvents: 'none'
+                  }}
+                >
+                  {/* Stretched to the box, so the line always runs corner to
+                      corner; the stroke stays the authored width. */}
+                  <line
+                    x1="0"
+                    y1="100"
+                    x2="100"
+                    y2="0"
+                    stroke="currentColor"
+                    strokeWidth={strikeWidth}
+                    vectorEffect="non-scaling-stroke"
+                  />
+                </svg>
+              )}
+              {isLowStock && (
+                <span
+                  {...partAttrs('low-stock')}
+                  role="img"
+                  aria-label={lowStockLabel}
+                  style={{
+                    position: 'absolute',
+                    top: '2px',
+                    right: '2px',
+                    width: '6px',
+                    height: '6px',
+                    borderRadius: '50%',
+                    background: 'var(--variant-option-low-stock, currentColor)',
+                    pointerEvents: 'none'
+                  }}
+                />
+              )}
+            </>
+          ) : (
+            body
+          );
+
+          // A colour or photo swatch carries no text, so the option needs an
+          // accessible name of its own.
+          const named = swatchNode ? { 'aria-label': label, title: label } : {};
+
+          if (disabled) {
+            const optionPk = getOptionProductPk(option);
+            const alertable =
+              stockAlertEnabled &&
+              isOptionSoldOut(option) &&
+              optionPk !== null;
+
+            if (alertable) {
+              const optionKey = `${groupKey}::${String(
+                option?.value || optionIndex
+              )}`;
+              const isOpen = openAlert?.key === optionKey;
+
+              return (
+                <button
+                  key={String(option?.value || optionIndex)}
+                  type="button"
+                  data-variant-option="disabled"
+                  {...named}
+                  {...partAttrs('option', { disabled: true })}
+                  /**
+                   * Sold out but no longer a dead end, so it must not be
+                   * announced as disabled: `aria-disabled` would tell a screen
+                   * reader "you cannot use this" about the highest-intent
+                   * control on the page. The `disabled` part state stays, so
+                   * everything a brand styled for a sold-out swatch still lands
+                   * (the generator matches `[data-state~="disabled"]`).
+                   */
+                  aria-label={[label, alertTriggerLabel]
+                    .filter(Boolean)
+                    .join(' — ')}
+                  title={alertTriggerLabel || label}
+                  aria-haspopup={
+                    alertPresentation === 'modal' ? 'dialog' : undefined
+                  }
+                  aria-expanded={isOpen}
+                  onClick={(event) => {
+                    if (isOpen) {
+                      closeAlert();
+                      return;
+                    }
+
+                    openAlertFor(
+                      {
+                        key: optionKey,
+                        groupKey,
+                        productPk: optionPk,
+                        optionLabel: label,
+                        attributeName: String(group.attribute_name || '')
+                      },
+                      event.currentTarget
+                    );
+                  }}
+                  style={{
+                    ...optionStyle,
+                    // A <button> brings its own chrome; the span it replaces
+                    // had none, so the authored look is what survives.
+                    background: 'transparent',
+                    font: 'inherit',
+                    textAlign: 'center',
+                    cursor: 'pointer'
+                  }}
+                >
+                  {content}
+                </button>
+              );
+            }
+
+            return (
+              <span
+                key={String(option?.value || optionIndex)}
+                data-variant-option="disabled"
+                aria-disabled="true"
+                {...named}
+                {...partAttrs('option', { disabled: true })}
+                style={optionStyle}
+              >
+                {content}
+              </span>
+            );
+          }
+
+          return (
+            <NextLink
+              key={String(option?.value || optionIndex)}
+              href={url}
+              data-variant-option={selected ? 'selected' : 'default'}
+              aria-current={selected}
+              {...named}
+              {...partAttrs('option', { selected })}
+              onClick={(event) => {
+                if (isDesigner) event.preventDefault();
+              }}
+              style={optionStyle}
+            >
+              {content}
+            </NextLink>
+          );
+        };
+
+        return (
+          <div
+            key={groupKey}
+            data-variant-group={groupKey}
+            // Only emitted for a group a designer actually overrode, so a
+            // composition on the block-wide layout keeps its exact markup.
+            {...(override ? { 'data-variant-group-layout': groupLayout } : {})}
+            {...partAttrs('group')}
+          >
+            {showGroupLabel && group.attribute_name && (
+              <span
+                data-variant-group-label=""
+                {...partAttrs('label')}
+                style={{
+                  display: 'block',
+                  marginBottom: '6px',
+                  fontSize: '0.85em',
+                  opacity: 0.75
+                }}
+              >
+                {selectedValueNode ? (
+                  <>
+                    {group.attribute_name}
+                    {selectedValueSeparator}
+                    {selectedValueNode}
+                  </>
+                ) : (
+                  group.attribute_name
+                )}
+              </span>
+            )}
+
+            {groupLayout === 'dropdown' ? (
+              <select
+                data-variant-dropdown=""
+                {...partAttrs('dropdown')}
+                aria-label={group.attribute_name || 'Variant'}
+                value={selectedUrl}
+                onChange={(event) => {
+                  const url = event.target.value;
+                  // Designer clicks must never navigate the preview frame.
+                  if (isDesigner || !url) return;
+                  router.push(url);
+                }}
+                style={{
+                  width: '100%',
+                  padding: '8px 10px',
+                  font: 'inherit',
+                  color: 'inherit',
+                  background: 'transparent',
+                  border: '1px solid var(--variant-selector-border, #d1d5db)'
+                }}
+              >
+                {!selectedUrl && <option value="">—</option>}
+                {options.map((option, optionIndex) => (
+                  <option
+                    key={String(option?.value || optionIndex)}
+                    value={getOptionUrl(option)}
+                    disabled={isOptionDisabled(option)}
+                  >
+                    {String(option?.label || option?.value || '')}
+                  </option>
+                ))}
+              </select>
+            ) : (
+              <div
+                {...partAttrs('option-list')}
+                style={{
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: `${safeOptionGap}px`
+                }}
+              >
+                {options.map(renderOption)}
+              </div>
+            )}
+
+            {/* Inline: drawn in the group that owns the sold-out option, so
+                the form reads as belonging to THAT size. The switch is read
+                again here because it is per-breakpoint: an author who turns it
+                off, or a canvas switched to a breakpoint where it is off, must
+                not be left with a panel whose trigger no longer exists. */}
+            {stockAlertEnabled &&
+              alertPresentation === 'inline' &&
+              openAlert?.groupKey === groupKey &&
+              renderAlertPanel(false)}
+          </div>
+        );
+      })}
+
+      {stockAlertEnabled && alertPresentation === 'modal' && openAlert !== null && (
+        <>
+          {/* A sibling of the dialog, never its ancestor: `aria-hidden` on a
+              wrapper would hide the very form it exists to sit behind. */}
+          <div
+            data-variant-alert-backdrop=""
+            {...partAttrs('alert-backdrop')}
+            aria-hidden="true"
+            onClick={closeAlert}
+            style={{
+              position: 'fixed',
+              inset: 0,
+              zIndex: 1000,
+              background: 'var(--variant-alert-backdrop, rgba(0, 0, 0, 0.5))'
+            }}
+          />
+          {renderAlertPanel(true)}
+        </>
+      )}
+    </div>
+  );
+};
+
+export default VariantSelectorBlock;