@akinon/pz-theme 2.0.82-beta.0 → 2.0.82

package/src/sections/posts-slider-section.tsx

@@ -7,13 +7,30 @@ import { twMerge } from 'tailwind-merge';
 import ThemeBlock from '../theme-block';
 import { useThemeSettingsContext } from '../theme-settings-context';
 import { safeDeepClone } from '../utils/safe-clone';
-import { getPriceWithCurrency, isPriceBinding } from '../utils/iterator-utils';
+import {
+  getPriceWithCurrency,
+  isPriceBinding,
+  readProductCurrency,
+  readProductPricePair
+} from '../utils/iterator-utils';
 import {
   applyFirstSlideImageLoading,
-  getCSSStyles,
-  getResponsiveValue
+  getResponsiveValue,
+  SECTION_CONTENT_ATTRIBUTE
 } from '../utils';
 import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../utils/breakpoints';
+import {
+  findSliderArrowBlocks,
+  isSliderArrowIconBlock,
+  SliderArrow
+} from '../utils/slider-arrows';
+
+import SliderQuickView from './slider-quick-view';
+import {
+  DESIGNER_SAMPLE_PRODUCT,
+  resolveSliderRowProduct
+} from '../blocks/item-template-utils';
+import type { ThemeProduct } from '../blocks/product-block-utils';
 
 import { postToEditor } from '../editor-bridge';
 import { PreviewToEditorMessageType } from '@akinon/theme-contract';
@@ -25,6 +42,14 @@ interface PostsSliderSectionProps {
   selectedBlockId?: string | null;
 }
 
+/**
+ * Things inside a card that own their own click, so quick view must not take
+ * it. `a` is deliberately absent: the card IS a link, and swallowing that
+ * navigation is the whole point.
+ */
+const INNER_CONTROL_SELECTOR =
+  'button, input, select, textarea, label, [role="button"], [contenteditable]';
+
 const parseNumber = (value: unknown, fallback: number) => {
   if (value === undefined || value === null || value === '') return fallback;
   const parsed = typeof value === 'string' ? Number(value) : Number(value);
@@ -65,23 +90,6 @@ const cloneBlock = (block: any): any => ({
     : undefined
 });
 
-const parseProductPrice = (value: unknown): number => {
-  const parsed = Number(value);
-  return Number.isFinite(parsed) ? parsed : 0;
-};
-
-const readProductPricePair = (productData: Record<string, unknown>) => {
-  const activePrice = (productData as any)?.active_price as
-    | Record<string, unknown>
-    | undefined;
-  return {
-    current: parseProductPrice(activePrice?.price ?? (productData as any)?.price),
-    retail: parseProductPrice(
-      activePrice?.retail_price ?? (productData as any)?.retail_price
-    )
-  };
-};
-
 const replaceBlockValues = (
   blockToReplace: any,
   productData: Record<string, unknown>,
@@ -126,13 +134,7 @@ const replaceBlockValues = (
       const isRetail =
         bindingPath === 'retail_price' ||
         bindingPath === 'active_price.retail_price';
-      const activePrice = (productData as any)?.active_price as
-        | Record<string, unknown>
-        | undefined;
-      const currency =
-        activePrice?.currency_type ??
-        (productData as any)?.currency_type ??
-        (productData as any)?.currency;
+      const currency = readProductCurrency(productData);
 
       if (isRetail) {
         // A struck-through retail price only means something when it is
@@ -255,6 +257,17 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   selectedBlockId = null
 }) => {
   const themeSettings = useThemeSettingsContext();
+  /**
+   * Drives the carousel from outside it.
+   *
+   * The arrows cannot live where react-multi-carousel puts a `customArrow` —
+   * inside `.react-multi-carousel-list`, which carries `overflow: hidden`
+   * because that is what hides the off-screen slides. An arrow placed at a
+   * negative offset to overhang the band's padding is clipped by it, and the
+   * overflow cannot be opened without spilling every slide. So the arrows are
+   * rendered as siblings of the carousel and paged through this instead.
+   */
+  const carouselRef = React.useRef<Carousel | null>(null);
 
   const getConfigEntry = (key: string) =>
     section.properties?.[key] ?? section.styles?.[key];
@@ -299,7 +312,15 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     { desktop: 1, tablet: 1, mobile: 1 }
   );
 
+  // The arrow icons live in `section.blocks` so the editor can list them as
+  // layers, but they are chrome rather than slides — matched by label, not by
+  // type, so an icon block a designer adds as an actual slide still is one.
+  const { left: leftArrowBlock, right: rightArrowBlock } =
+    findSliderArrowBlocks(section.blocks);
+  const hasOwnArrows = Boolean(leftArrowBlock || rightArrowBlock);
+
   const sortedBlocks = [...(section.blocks || [])]
+    .filter((block) => !isSliderArrowIconBlock(block))
     .sort((a, b) => (a.order || 0) - (b.order || 0))
     .filter((block) => (isDesigner ? true : !block.hidden));
 
@@ -325,7 +346,12 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
         ...cloned,
         id: `${template.id || block.id}-iter-${index}`,
         __iteratorParentId: block.id,
-        __fromIterator: true
+        __fromIterator: true,
+        // The row behind this slide, when the section is one whose slides are
+        // products AND the data source actually returned one for this index.
+        // `products[index] || {}` above makes every clone truthy, so quick
+        // view cannot gate on the clone — it gates on this.
+        __qvProduct: resolveSliderRowProduct(section?.type, products[index])
       };
     });
   });
@@ -410,25 +436,17 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
       : '';
   const hasMaxWidth = maxWidth !== 'none' && maxWidth !== 'full';
 
-  const styleEntries = section.styles || {};
-  const filteredStyles = Object.fromEntries(
-    Object.entries(styleEntries).filter(
-      ([key]) =>
-        ![
-          'items-per-slide',
-          'slides-to-slide',
-          'show-arrows',
-          'show-dots',
-          'max-width'
-        ].includes(key)
-    )
-  );
-
-  const sectionStyles = getCSSStyles(
-    filteredStyles,
-    themeSettings,
-    currentBreakpoint
-  );
+  /*
+   * The section's own declarations are NOT applied here.
+   *
+   * `generateThemeCSS` already emits them against `[data-section-id="…"]`, which
+   * is the `<section>` this component renders inside — so applying them again to
+   * the box below meant every one of them landed on two nested elements. The
+   * ones that compound are the ones that showed: a designer setting 68px of side
+   * padding got 136px, with the band's background painted once full-width and
+   * again inside it. The section element owns the section's dressing; this box
+   * owns nothing but its own centring and content width.
+   */
 
   const gapValue = getResponsiveValue(
     section.styles?.gap,
@@ -465,6 +483,178 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
   const useInfinite = infinite && hasMultipleSlides;
   const useAutoPlay = autoPlay && hasMultipleSlides;
 
+  /**
+   * Edge treatment: cards flush to the band, and a lead-in only at the start.
+   *
+   * A strip that stops short of its own right edge reads as finished. Slicing
+   * the next card there is what says "there is more" — which is why the outer
+   * half-gaps have to go: with them the last card can never touch the edge.
+   * The slice itself comes from a FRACTIONAL item count the author types
+   * (3.5), which the library already honours; nothing here computes it.
+   */
+  const flushEdges =
+    getResponsiveValue(
+      getConfigEntry('flush-edges'),
+      currentBreakpoint,
+      false
+    ) === true;
+
+  /**
+   * The lead-in is not padding, and could not be: no padding is
+   * position-dependent, and every candidate — on the track, on the wrapper,
+   * on the item — either survives the scroll (so the gap never goes away) or
+   * is subtracted from the width the item count is measured against (so "3.5
+   * items" silently becomes 3.5 items of a narrower strip).
+   *
+   * `additionalTransfrom` — the library's spelling — is added to the track's
+   * own translate in both the render path and the drag path, so it costs the
+   * layout nothing and clips nothing. Handing back 0 as soon as the shopper
+   * leaves slide 0 is what makes the gap a lead-in rather than an inset, and
+   * because the library fires `beforeChange` in the same commit as its own
+   * transform, it slides away with the track instead of snapping.
+   */
+  // Through `getResponsiveValue` like every other authored knob: the panel
+  // stores a property as `{ desktop: 60 }`, and handing that object straight to
+  // `parseNumber` yields NaN — which fell back to 0 and silently disabled the
+  // whole feature while the editor showed the value as set.
+  const leadIn = clampNumber(
+    parseNumber(
+      getResponsiveValue(getConfigEntry('lead-in'), currentBreakpoint, 0),
+      0
+    ),
+    0,
+    400
+  );
+  /**
+   * Which edge the gap belongs to, and when it exists.
+   *
+   * `left` is a LEAD-IN: it sits before the first card while the track is at
+   * the start and slides away the moment it moves. `right` is its mirror, a
+   * TRAIL-OUT at the far end — because a right-hand gap at the START is not
+   * something the geometry can offer: what sits against the right edge there
+   * is the sliced next card, and how much of it shows is the item count's
+   * job, not a gap's.
+   *
+   * Both ride the library's own `additionalTransfrom`: +N pushes the track
+   * right and opens the left gap, -N pulls it left and opens the right one.
+   */
+  const leadInSide =
+    String(
+      getResponsiveValue(
+        getConfigEntry('lead-in-side'),
+        currentBreakpoint,
+        'left'
+      ) ?? 'left'
+    ) === 'right'
+      ? 'right'
+      : 'left';
+
+  // Infinite mode starts on a clone and never rests at either extreme, so
+  // there is no edge for a gap to belong to.
+  const useLeadIn = leadIn > 0 && hasMultipleSlides && !useInfinite;
+  const [slidePosition, setSlidePosition] = React.useState(0);
+  const lastPosition = Math.max(0, visibleCount - itemsPerView);
+  const edgeOffset =
+    leadInSide === 'left'
+      ? slidePosition <= 0
+        ? leadIn
+        : 0
+      : slidePosition >= lastPosition - 0.001
+      ? -leadIn
+      : 0;
+
+  /**
+   * Quick view: a tap on a card opens a panel instead of leaving for the
+   * product page. Off unless the section says otherwise, which is what keeps
+   * every composition published before this behaving exactly as it did — the
+   * key is absent, so no handler is built and nothing is rendered.
+   *
+   * Declared above the empty-slider early return below, because hooks are.
+   */
+  const [quickViewRow, setQuickViewRow] = React.useState<ThemeProduct | null>(
+    null
+  );
+  const quickViewOpenerRef = React.useRef<HTMLElement | null>(null);
+  const bandRef = React.useRef<HTMLDivElement | null>(null);
+
+  const showQuickView =
+    getResponsiveValue(
+      getConfigEntry('show-quick-view'),
+      currentBreakpoint,
+      false
+    ) === true;
+  const quickViewLinkLabel = String(
+    getResponsiveValue(
+      getConfigEntry('quick-view-link-label'),
+      currentBreakpoint,
+      'View Product'
+    ) ?? 'View Product'
+  );
+  const quickViewCloseLabel = String(
+    getResponsiveValue(
+      getConfigEntry('quick-view-close-label'),
+      currentBreakpoint,
+      'Close'
+    ) ?? 'Close'
+  );
+  const quickViewShowFavorite =
+    getResponsiveValue(
+      getConfigEntry('quick-view-show-favorite'),
+      currentBreakpoint,
+      true
+    ) !== false;
+  // Canvas only: holds the panel visible, in the flow, so it can be styled.
+  const quickViewPreview =
+    isDesigner &&
+    showQuickView &&
+    getResponsiveValue(
+      getConfigEntry('quick-view-preview'),
+      currentBreakpoint,
+      false
+    ) === true;
+
+  // One expression for "the panel is over the page", so the row and anything
+  // keyed off it can never disagree.
+  const quickViewOpen = showQuickView && quickViewRow !== null;
+
+  /**
+   * A row must not outlive the panel that shows it. Resizing past a
+   * breakpoint where the author left quick view off unmounts the panel while
+   * the row is still held, and without this the section would stay lifted
+   * over the page and re-open the panel by itself on the way back.
+   */
+  React.useEffect(() => {
+    if (!showQuickView) setQuickViewRow(null);
+  }, [showQuickView]);
+
+  /**
+   * Lift the section over a sticky header for as long as the panel is up.
+   *
+   * The band below is `relative z-10`, and so is `[data-section-content]`
+   * that `SectionWrapper` renders around it — so the panel's own
+   * `z-index: 1000` resolves INSIDE two nested stacking contexts and the
+   * section still competes with the page at 10, losing to a sticky header at
+   * 40. The element that has to move is the outermost of the two, which this
+   * component does not render; reaching for it is the honest cost of not
+   * portalling the panel out, and portalling would take it out of
+   * `[data-section-id]` and leave every `quick-view-*` part style behind.
+   */
+  React.useEffect(() => {
+    if (!quickViewOpen) return;
+
+    const host = bandRef.current?.closest?.(
+      `[${SECTION_CONTENT_ATTRIBUTE}]`
+    ) as HTMLElement | null;
+    if (!host) return;
+
+    const previous = host.style.zIndex;
+    host.style.zIndex = '1000';
+
+    return () => {
+      host.style.zIndex = previous;
+    };
+  }, [quickViewOpen]);
+
   // 'overlay' keeps the library's centred side arrows; 'top-right' moves
   // navigation into a header row above the track (with an optional inline
   // title), the pattern fashion sliders use. Composition-driven via section
@@ -494,7 +684,8 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
       '400'
   );
   const titleFont = String(
-    getResponsiveValue(getConfigEntry('title-font'), currentBreakpoint, '') || ''
+    getResponsiveValue(getConfigEntry('title-font'), currentBreakpoint, '') ||
+      ''
   ).trim();
   const titleTransform = String(
     getResponsiveValue(
@@ -504,7 +695,6 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     ) || 'uppercase'
   );
   const useTopNav = showArrows && arrowPosition === 'top-right';
-  const carouselRef = React.useRef<Carousel | null>(null);
 
   const topNavChevron = (direction: 'left' | 'right') => (
     <svg
@@ -550,12 +740,25 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
     });
   };
 
+  /**
+   * Hand selection to an arrow's own layer.
+   *
+   * The editor already answers `SELECT_BLOCK_FROM_PREVIEW` by selecting the
+   * block, so the arrow becomes clickable in the canvas the way any other block
+   * is — without which a designer would have to hunt for it in the layer tree
+   * to reach its styles.
+   */
+  const postArrowSelection = (blockId: string) => {
+    if (!window.parent) return;
+    postToEditor({
+      type: 'SELECT_BLOCK_FROM_PREVIEW',
+      data: { placeholderId, sectionId: section.id, blockId }
+    });
+  };
+
   if (expandedBlocks.length === 0) {
     return (
-      <div
-        className="p-4 text-gray-400 border border-dashed border-gray-300 rounded"
-        style={sectionStyles}
-      >
+      <div className="p-4 text-gray-400 border border-dashed border-gray-300 rounded">
         No posts available
       </div>
     );
@@ -563,10 +766,14 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
 
   return (
     <div
+      ref={bandRef}
       className={twMerge(
         clsx('relative z-10 w-full', hasMaxWidth && 'mx-auto', maxWidthClass)
       )}
-      style={sectionStyles}
+      // Focusable only where it is the panel's last-resort focus target — the
+      // card the shopper opened from can be gone by the time they close, and
+      // focus has to land somewhere in the section rather than on the body.
+      tabIndex={showQuickView ? -1 : undefined}
     >
       {useTopNav && (
         <div
@@ -599,7 +806,9 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
               type="button"
               aria-label="Previous"
               style={topNavButtonStyle}
-              onClick={() => carouselRef.current?.previous(currentSlidesToSlide)}
+              onClick={() =>
+                carouselRef.current?.previous(currentSlidesToSlide)
+              }
             >
               {topNavChevron('left')}
             </button>
@@ -614,67 +823,225 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
           </div>
         </div>
       )}
-      <Carousel
-        key={`${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
-        ref={carouselRef}
-        responsive={carouselResponsive}
-        {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
-        swipeable={true}
-        draggable={true}
-        arrows={showArrows && !useTopNav}
-        showDots={showDots}
-        renderDotsOutside={showDots}
-        infinite={useInfinite}
-        rewind={useInfinite}
-        rewindWithAnimation={useInfinite}
-        autoPlay={useAutoPlay}
-        autoPlaySpeed={autoPlaySpeed}
-        containerClass="posts-slider-carousel"
-        dotListClass="posts-slider-dots"
-      >
-        {expandedBlocks.map((block, index) => {
-          const controlBlockId = block.__iteratorParentId || block.id;
-          const isIteratorClone = Boolean(block.__fromIterator);
-          const renderedBlock =
-            index === 0 ? applyFirstSlideImageLoading(block) : block;
-
-          return (
-            <div
-              key={block.id}
-              style={{
-                paddingLeft: slidePadding,
-                paddingRight: slidePadding
-              }}
-            >
-              <ThemeBlock
-                block={renderedBlock}
-                placeholderId={placeholderId}
-                sectionId={section.id}
-                isDesigner={isDesigner && !isIteratorClone}
-                isSelected={selectedBlockId === controlBlockId}
-                selectedBlockId={selectedBlockId}
-                currentBreakpoint={currentBreakpoint}
-                onMoveUp={() =>
-                  postBlockAction('MOVE_BLOCK_UP', controlBlockId)
-                }
-                onMoveDown={() =>
-                  postBlockAction('MOVE_BLOCK_DOWN', controlBlockId)
-                }
-                onDuplicate={() =>
-                  postBlockAction('DUPLICATE_BLOCK', controlBlockId)
-                }
-                onToggleVisibility={() =>
-                  postBlockAction('TOGGLE_BLOCK_VISIBILITY', controlBlockId)
-                }
-                onDelete={() => postBlockAction('DELETE_BLOCK', controlBlockId)}
-                onRename={(newLabel) =>
-                  postBlockAction('RENAME_BLOCK', controlBlockId, newLabel)
+      {/*
+       * The box the slides sit in, and only the slides.
+       *
+       * The arrows are its siblings, not its children, which is the whole point:
+       * a design that insets the cards from the left while leaving the arrows at
+       * the band's edge has somewhere to put that inset now. Styled through the
+       * `slides` part — `generatePartCSS` emits it against this attribute — so
+       * padding it does not move anything but the cards.
+       */}
+      <div data-part="slides">
+        <Carousel
+          key={`${desktopItems}-${tabletItems}-${mobileItems}-${desktopSlides}-${tabletSlides}-${mobileSlides}-${visibleCount}-${currentBreakpoint}-${useInfinite}-${useAutoPlay}-${autoPlaySpeed}`}
+          responsive={carouselResponsive}
+          {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
+          swipeable={true}
+          draggable={true}
+          ref={carouselRef}
+          // The library's own arrows only when the section neither moved navigation
+          // into its header row nor brought arrow blocks of its own; ours are
+          // rendered outside the carousel, below.
+          arrows={showArrows && !useTopNav && !hasOwnArrows}
+          showDots={showDots}
+          renderDotsOutside={showDots}
+          infinite={useInfinite}
+          rewind={useInfinite}
+          rewindWithAnimation={useInfinite}
+          autoPlay={useAutoPlay}
+          autoPlaySpeed={autoPlaySpeed}
+          containerClass="posts-slider-carousel"
+          dotListClass="posts-slider-dots"
+          /*
+           * Spread conditionally so a slider that has not opted in is handed
+           * the identical prop object it was handed before — there is no
+           * `additionalTransfrom: 0` for the library to reason about, and no
+           * `beforeChange` for it to call.
+           */
+          {...(useLeadIn
+            ? {
+                additionalTransfrom: edgeOffset,
+                beforeChange: (nextSlide: number) => setSlidePosition(nextSlide)
+              }
+            : {})}
+        >
+          {expandedBlocks.map((block, index) => {
+            const controlBlockId = block.__iteratorParentId || block.id;
+            const isIteratorClone = Boolean(block.__fromIterator);
+            const renderedBlock =
+              index === 0 ? applyFirstSlideImageLoading(block) : block;
+
+            /**
+             * The whole card is the trigger, because the card IS the link —
+             * there is no element inside it a designer placed for this.
+             *
+             * Capture phase, so the card anchor's own navigation never runs;
+             * and only for a plain left click, so ⌘/ctrl/shift-click and the
+             * middle button still open the product page in a tab, which is
+             * what the anchor is for. A slide with no resolved product gets
+             * no handler at all and keeps navigating exactly as it does now.
+             */
+            const quickViewHandlers =
+              showQuickView && !isDesigner && block.__qvProduct
+                ? {
+                    onClickCapture: (
+                      event: React.MouseEvent<HTMLDivElement>
+                    ) => {
+                      if (
+                        event.button !== 0 ||
+                        event.metaKey ||
+                        event.ctrlKey ||
+                        event.shiftKey ||
+                        event.altKey
+                      ) {
+                        return;
+                      }
+
+                      const target = event.target as HTMLElement | null;
+
+                      // A control the designer dropped INTO the card owns its
+                      // own click — a button carrying an authored action, a
+                      // favourite heart, a form field. Swallowing those would
+                      // break them silently: this runs in the capture phase,
+                      // so nothing downstream ever sees the click to object.
+                      // Only the card itself is ours to take over.
+                      if (target?.closest?.(INNER_CONTROL_SELECTOR)) return;
+
+                      event.preventDefault();
+                      // Stops the card's own bubble handlers, so an authored
+                      // action on the card group cannot navigate out from
+                      // under the panel we are about to open.
+                      event.stopPropagation();
+
+                      // Focus returns to the card LINK. The slide wrapper this
+                      // handler sits on is a plain div and cannot hold focus,
+                      // so storing it would drop the shopper at the top of the
+                      // page on close; leaving the ref null hands the job to
+                      // the fallback instead.
+                      quickViewOpenerRef.current =
+                        target?.closest?.('a[href]') ?? null;
+
+                      setQuickViewRow(block.__qvProduct as ThemeProduct);
+                    }
+                  }
+                : null;
+
+            return (
+              <div
+                key={block.id}
+                {...quickViewHandlers}
+                style={
+                  flushEdges
+                    ? {
+                        // The inter-card gap is unchanged — it just all sits on
+                        // one side now, so the outer edges carry none. The last
+                        // card drops its own so its content reaches the edge.
+                        paddingLeft: 0,
+                        paddingRight:
+                          index === expandedBlocks.length - 1 ? 0 : gap
+                      }
+                    : {
+                        paddingLeft: slidePadding,
+                        paddingRight: slidePadding
+                      }
                 }
-              />
-            </div>
-          );
-        })}
-      </Carousel>
+              >
+                <ThemeBlock
+                  block={renderedBlock}
+                  placeholderId={placeholderId}
+                  sectionId={section.id}
+                  isDesigner={isDesigner && !isIteratorClone}
+                  isSelected={selectedBlockId === controlBlockId}
+                  selectedBlockId={selectedBlockId}
+                  currentBreakpoint={currentBreakpoint}
+                  onMoveUp={() =>
+                    postBlockAction('MOVE_BLOCK_UP', controlBlockId)
+                  }
+                  onMoveDown={() =>
+                    postBlockAction('MOVE_BLOCK_DOWN', controlBlockId)
+                  }
+                  onDuplicate={() =>
+                    postBlockAction('DUPLICATE_BLOCK', controlBlockId)
+                  }
+                  onToggleVisibility={() =>
+                    postBlockAction('TOGGLE_BLOCK_VISIBILITY', controlBlockId)
+                  }
+                  onDelete={() =>
+                    postBlockAction('DELETE_BLOCK', controlBlockId)
+                  }
+                  onRename={(newLabel) =>
+                    postBlockAction('RENAME_BLOCK', controlBlockId, newLabel)
+                  }
+                />
+              </div>
+            );
+          })}
+        </Carousel>
+      </div>
+
+      {/*
+       * One panel for the whole section rather than one per card: only one
+       * can be open, and it stays a descendant of `[data-section-id]`, which
+       * is what lets the section's `quick-view-*` part styles reach it.
+       */}
+      {showQuickView && (
+        <SliderQuickView
+          row={
+            quickViewPreview
+              ? (expandedBlocks.find((block) => block.__qvProduct)
+                  ?.__qvProduct as ThemeProduct) ?? DESIGNER_SAMPLE_PRODUCT
+              : quickViewRow
+          }
+          open={quickViewPreview || quickViewOpen}
+          inline={quickViewPreview}
+          onClose={() => setQuickViewRow(null)}
+          openerRef={quickViewOpenerRef}
+          fallbackRef={bandRef}
+          isDesigner={isDesigner}
+          currentBreakpoint={currentBreakpoint}
+          linkLabel={quickViewLinkLabel}
+          closeLabel={quickViewCloseLabel}
+          showFavorite={quickViewShowFavorite}
+        />
+      )}
+
+      {/*
+       * Outside the carousel, inside the box that positions it.
+       *
+       * This box is `relative` and clips nothing, so an authored negative offset
+       * reaches past the band's padding — which is what a design asking for the
+       * arrow flush to the page edge while the cards stay inset actually needs.
+       * A `customArrow` could not: it lands inside `overflow: hidden`.
+       */}
+      {showArrows && leftArrowBlock && (
+        <SliderArrow
+          block={leftArrowBlock}
+          direction="left"
+          currentBreakpoint={currentBreakpoint}
+          themeSettings={themeSettings}
+          isSelected={isDesigner && selectedBlockId === leftArrowBlock.id}
+          onClick={() => carouselRef.current?.previous(currentSlidesToSlide)}
+          onSelect={
+            isDesigner ? () => postArrowSelection(leftArrowBlock.id) : undefined
+          }
+        />
+      )}
+      {showArrows && rightArrowBlock && (
+        <SliderArrow
+          block={rightArrowBlock}
+          direction="right"
+          currentBreakpoint={currentBreakpoint}
+          themeSettings={themeSettings}
+          isSelected={isDesigner && selectedBlockId === rightArrowBlock.id}
+          onClick={() => carouselRef.current?.next(currentSlidesToSlide)}
+          onSelect={
+            isDesigner
+              ? () => postArrowSelection(rightArrowBlock.id)
+              : undefined
+          }
+        />
+      )}
     </div>
   );
 };