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

package/CHANGELOG.md

@@ -1,12 +1,12 @@
 # @akinon/pz-theme
 
-## 2.0.116-beta.0
+## 2.0.116
 
 ### Patch Changes
 
-- Updated dependencies [cbbbfd757]
-  - @akinon/next@2.0.116-beta.0
-  - @akinon/theme-contract@2.0.116-beta.0
+- 9062fa0: Give sliders back the drag gesture the browser was stealing: cancel the native image/link drag inside a carousel, stop the text selection it painted, lower the commit threshold a drag has to reach, and swallow the click that ends a real drag so it no longer opens the card it finished on
+  - @akinon/next@2.0.116
+  - @akinon/theme-contract@2.0.116
 
 ## 2.0.115
 

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@akinon/pz-theme",
   "description": "Theme package for Project Zero Next — ThemePlaceholder system and theme editor infrastructure",
-  "version": "2.0.116-beta.0",
+  "version": "2.0.116",
   "license": "MIT",
   "main": "src/index.ts",
   "scripts": {
     "test": "jest"
   },
   "peerDependencies": {
-    "@akinon/next": "2.0.116-beta.0",
+    "@akinon/next": "2.0.116",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@akinon/theme-contract": "2.0.116-beta.0",
+    "@akinon/theme-contract": "2.0.116",
     "clsx": "2.1.1",
     "lottie-web": "^5.13.0",
     "react-multi-carousel": "2.8.4",
@@ -21,7 +21,7 @@
     "zod": "4.4.1"
   },
   "devDependencies": {
-    "@akinon/next": "2.0.116-beta.0",
+    "@akinon/next": "2.0.116",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "16.3.2",
     "@testing-library/user-event": "14.1.1",

package/src/blocks/__tests__/slider-drag-guard.test.tsx

@@ -0,0 +1,227 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+/**
+ * The drag repair, from the shopper's side.
+ *
+ * `react-multi-carousel` listens for the drag on its own track and never
+ * cancels the browser's native one, so a press-and-move over a slide — a link
+ * around a photo — became a drag-and-drop instead of a swipe and the row
+ * lurched part of the way and stuck. These tests pin the three things that
+ * stop that: the native drag is refused, the slider does not paint a text
+ * selection, and the library is handed a commit threshold a real drag can
+ * actually reach.
+ *
+ * The carousel itself is stubbed with a passthrough, exactly as
+ * `slider-block.test.tsx` does — the assertions are about the box AROUND it
+ * and about the props the call site hands it, neither of which needs the
+ * library's measuring to have run.
+ */
+
+const carouselProps: Record<string, unknown>[] = [];
+
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: (props: { children: React.ReactNode } & Record<string, unknown>) => {
+    carouselProps.push(props);
+    return (
+      <div data-testid="carousel">
+        {/* A slide as the shopper meets it: a link around a photo, both of
+            which the browser will happily drag away from the carousel. */}
+        <a href="/product" data-testid="slide-link">
+          <img src="/p.jpg" alt="" data-testid="slide-image" />
+        </a>
+        {props.children}
+      </div>
+    );
+  }
+}));
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <div data-testid="tb" data-id={block.id} />
+  )
+}));
+
+import SliderBlock from '../slider-block';
+import { CAROUSEL_MINIMUM_TOUCH_DRAG } from '../../hooks/use-carousel-drag';
+
+const child = (id: string): any => ({
+  id,
+  type: 'text',
+  label: id,
+  value: '',
+  properties: {},
+  styles: {},
+  order: 0,
+  hidden: false
+});
+
+const props = (over: Record<string, unknown> = {}) =>
+  ({
+    block: {
+      id: 'slider',
+      type: 'slider',
+      label: 'slider',
+      value: '',
+      properties: {},
+      styles: {},
+      order: 0,
+      hidden: false,
+      blocks: [child('a'), child('b'), child('c')]
+    },
+    placeholderId: 'p',
+    sectionId: 's',
+    isDesigner: false,
+    ...over
+  } as any);
+
+/** jsdom has no PointerEvent constructor; the hook only reads mouse fields. */
+const pointer = (type: string, init: MouseEventInit = {}) =>
+  new MouseEvent(type, { bubbles: true, cancelable: true, ...init });
+
+const guardBox = (container: HTMLElement) =>
+  container.querySelector('[data-testid="carousel"]')!
+    .parentElement as HTMLElement;
+
+beforeEach(() => {
+  carouselProps.length = 0;
+});
+
+describe('SliderBlock — the native drag no longer steals the swipe', () => {
+  it('cancels dragstart on a photo inside the slider', () => {
+    const { getByTestId } = render(<SliderBlock {...props()} />);
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    getByTestId('slide-image').dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('cancels dragstart on the link wrapping the photo', () => {
+    const { getByTestId } = render(<SliderBlock {...props()} />);
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    getByTestId('slide-link').dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('leaves dragstart alone in the editor, where designer drag-and-drop owns it', () => {
+    const { getByTestId } = render(
+      <SliderBlock {...props({ isDesigner: true })} />
+    );
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    getByTestId('slide-image').dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it('turns off text selection across the slider', () => {
+    const { container } = render(<SliderBlock {...props()} />);
+
+    expect(guardBox(container).style.userSelect).toBe('none');
+  });
+
+  it('hands the library a commit threshold a real drag reaches', () => {
+    render(<SliderBlock {...props()} />);
+
+    expect(carouselProps[0].minimumTouchDrag).toBe(CAROUSEL_MINIMUM_TOUCH_DRAG);
+    expect(carouselProps[0].minimumTouchDrag as number).toBeLessThan(80);
+    expect(carouselProps[0].swipeable).toBe(true);
+    expect(carouselProps[0].draggable).toBe(true);
+  });
+});
+
+describe('SliderBlock — a drag does not also open the slide', () => {
+  it('swallows the click that ends a real drag', () => {
+    const { container, getByTestId } = render(<SliderBlock {...props()} />);
+    const box = guardBox(container);
+    const link = getByTestId('slide-link');
+
+    const onClick = jest.fn();
+    box.addEventListener('click', onClick);
+
+    box.dispatchEvent(pointer('pointerdown', { clientX: 100 }));
+    box.dispatchEvent(pointer('pointermove', { clientX: 40 }));
+    box.dispatchEvent(pointer('pointerup', { clientX: 40 }));
+
+    const click = pointer('click', { clientX: 40 });
+    link.dispatchEvent(click);
+
+    expect(click.defaultPrevented).toBe(true);
+    expect(onClick).not.toHaveBeenCalled();
+  });
+
+  it('leaves an honest click completely alone', () => {
+    const { container, getByTestId } = render(<SliderBlock {...props()} />);
+    const box = guardBox(container);
+    const link = getByTestId('slide-link');
+
+    const onClick = jest.fn();
+    box.addEventListener('click', onClick);
+
+    box.dispatchEvent(pointer('pointerdown', { clientX: 100 }));
+    box.dispatchEvent(pointer('pointerup', { clientX: 100 }));
+
+    const click = pointer('click', { clientX: 100 });
+    link.dispatchEvent(click);
+
+    expect(click.defaultPrevented).toBe(false);
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('treats a press that barely moved as a click, not a drag', () => {
+    const { container, getByTestId } = render(<SliderBlock {...props()} />);
+    const box = guardBox(container);
+
+    box.dispatchEvent(pointer('pointerdown', { clientX: 100 }));
+    box.dispatchEvent(pointer('pointermove', { clientX: 97 }));
+    box.dispatchEvent(pointer('pointerup', { clientX: 97 }));
+
+    const click = pointer('click', { clientX: 97 });
+    getByTestId('slide-link').dispatchEvent(click);
+
+    expect(click.defaultPrevented).toBe(false);
+  });
+
+  it('swallows only the click that followed the drag, not the next honest one', () => {
+    jest.useFakeTimers();
+    try {
+      const { container, getByTestId } = render(<SliderBlock {...props()} />);
+      const box = guardBox(container);
+      const link = getByTestId('slide-link');
+
+      box.dispatchEvent(pointer('pointerdown', { clientX: 100 }));
+      box.dispatchEvent(pointer('pointermove', { clientX: 40 }));
+      box.dispatchEvent(pointer('pointerup', { clientX: 40 }));
+
+      // The drag ended somewhere that is not clickable, so no click ever
+      // arrives — the guard must not sit there waiting for the next one.
+      jest.advanceTimersByTime(1);
+
+      const click = pointer('click', { clientX: 40 });
+      link.dispatchEvent(click);
+
+      expect(click.defaultPrevented).toBe(false);
+    } finally {
+      jest.useRealTimers();
+    }
+  });
+
+  it('ignores a secondary-button press', () => {
+    const { container, getByTestId } = render(<SliderBlock {...props()} />);
+    const box = guardBox(container);
+
+    box.dispatchEvent(pointer('pointerdown', { clientX: 100, button: 2 }));
+    box.dispatchEvent(pointer('pointermove', { clientX: 40 }));
+    box.dispatchEvent(pointer('pointerup', { clientX: 40 }));
+
+    const click = pointer('click', { clientX: 40 });
+    getByTestId('slide-link').dispatchEvent(click);
+
+    expect(click.defaultPrevented).toBe(false);
+  });
+});

package/src/blocks/slider-block.tsx

@@ -15,6 +15,11 @@ import {
 } from '../utils';
 import { DESKTOP_MIN_WIDTH, isNarrowBreakpoint } from '../utils/breakpoints';
 import { useCarouselSsr } from '../utils/carousel-ssr';
+import {
+  CAROUSEL_MINIMUM_TOUCH_DRAG,
+  carouselDragStyle,
+  useCarouselDrag
+} from '../hooks/use-carousel-drag';
 import { BlockRendererProps } from './block-renderer-registry';
 
 import { postToEditor } from '../editor-bridge';
@@ -45,6 +50,12 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
   const themeSettings = useThemeSettingsContext();
   const carouselRef = React.useRef<Carousel>(null);
   const containerRef = React.useRef<HTMLDivElement>(null);
+  /**
+   * The slides are links around photos, which the browser would rather
+   * drag than let the carousel swipe. Left alone in the editor, where the
+   * designer's own drag-and-drop owns `dragstart`.
+   */
+  const dragRef = useCarouselDrag<HTMLDivElement>(!isDesigner);
   /**
    * Whether the pointer (or the keyboard) is inside the slider, for the
    * arrows-on-hover option below.
@@ -853,7 +864,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
       onFocus={arrowsOnHover ? () => setPointerInside(true) : undefined}
       onBlur={arrowsOnHover ? () => setPointerInside(false) : undefined}
     >
-      <div style={{ position: 'relative' }}>
+      <div ref={dragRef} style={{ position: 'relative', ...carouselDragStyle }}>
         <Carousel
           ref={carouselRef}
           key={carouselKey}
@@ -878,6 +889,7 @@ const SliderBlock: React.FC<BlockRendererProps> = ({
           slidesToSlide={currentSlidesToSlide}
           swipeable={true}
           draggable={true}
+          minimumTouchDrag={CAROUSEL_MINIMUM_TOUCH_DRAG}
           /*
            * `visibleCount > itemsShown` is what keeps the server and the
            * mounted library agreeing. The library decides for itself whether

package/src/hooks/use-carousel-drag.ts

@@ -0,0 +1,166 @@
+'use client';
+
+import { useCallback, useEffect, useRef } from 'react';
+
+/**
+ * Handing a `react-multi-carousel` slider back the drag gesture the browser
+ * takes away from it.
+ *
+ * ## The bug this exists to end
+ *
+ * The library listens for the drag on the track itself — `onMouseDown`,
+ * `onMouseMove`, `onMouseUp`, `onMouseLeave` and the touch trio are React
+ * props on `<ul class="react-multi-carousel-track">` — and it never calls
+ * `preventDefault` on any of them. Its shipped `lib/styles.css` carries no
+ * `user-select` rule either.
+ *
+ * A slide is a link around a photo, and both are natively draggable. So a
+ * press-and-move over a slide does not reach the carousel as a drag at all:
+ * Chrome answers it with its OWN drag-and-drop, and the moment `dragstart`
+ * fires the mouse-move stream stops. `handleMove` had already written a few
+ * pixels of `translate3d` straight to the track's style, and now nothing moves
+ * it again — the track sits where the gesture died. The `mouseup` lands on the
+ * drag layer rather than on the track, so `handleOut` never runs and the slide
+ * is never committed or reverted. What the shopper sees is a row that lurches
+ * part of the way, a text selection or a ghost image following the cursor, and
+ * a slider that has to be fought to move at all.
+ *
+ * The same failure is documented from the other side in `use-drag-scroll.ts`,
+ * which is where a strip authored with `overflow-x: auto` solves it. This hook
+ * is that fix for the sliders the library drives.
+ *
+ * ## What it does, and what it deliberately does not
+ *
+ * - Cancels `dragstart` inside the slider. That is the whole repair: with the
+ *   native drag refused, the browser keeps sending the mouse moves the library
+ *   is already listening for, and the carousel works as it was written to.
+ *   Cancelled on the container rather than by `preventDefault()` on the press,
+ *   which would also swallow focus.
+ * - Turns off text selection across the slider, so a horizontal drag over a
+ *   product title paints no selection behind the cards.
+ * - Swallows the click that follows a REAL drag, once. Without it the repair
+ *   creates a new bug: now that the gesture reaches the carousel, a drag that
+ *   ends on top of a card would also open that card — `posts-slider-section`
+ *   opens its quick view from a capture-phase click, and a plain slide is an
+ *   anchor. A press that never moved is left completely alone, so clicking a
+ *   product still opens it.
+ *
+ * It does NOT touch the library's own transform maths, its throttle, or touch
+ * scrolling. Native events on the container, not React props, so the click
+ * guard runs before React's own capture-phase handlers (React 18 delegates
+ * from the root container, which is above this element).
+ */
+
+/** Below this the gesture is a click, above it a drag. */
+const DRAG_THRESHOLD = 4;
+
+/**
+ * How far a drag must travel before the library commits to the next slide.
+ *
+ * The library's own default is 80px — measured against a press, not against a
+ * flick, and far enough that a deliberate mouse drag across a card routinely
+ * falls short and springs back. `handleOut` reverts everything below this, so
+ * the number IS the "nothing sticks" feeling. 40px is still past any accidental
+ * nudge (the drag guard above already ignores anything under 4px) while being
+ * reachable in one comfortable movement.
+ */
+export const CAROUSEL_MINIMUM_TOUCH_DRAG = 40;
+
+export const useCarouselDrag = <T extends HTMLElement>(enabled = true) => {
+  const ref = useRef<T | null>(null);
+  const moved = useRef(0);
+  const active = useRef(false);
+  const startX = useRef(0);
+
+  /**
+   * ON `document`, NOT ON THE SLIDER, AND THAT IS THE WHOLE TRICK.
+   *
+   * React does not attach `onClickCapture` to the element that declares it; it
+   * attaches one listener to the root container and replays the capture
+   * traversal from there. The root is ABOVE this slider, so a capture listener
+   * on the slider itself runs too LATE — `posts-slider-section` had already
+   * opened its quick view by the time the guard saw the click. Cancelling the
+   * anchor's navigation still worked, which is exactly the kind of half-fix
+   * that reads as fixed. `document` is above React's root, so the guard gets
+   * there first and `stopPropagation` keeps the event from ever reaching it.
+   *
+   * Scoped by `contains`, so a click anywhere else on the page while the guard
+   * is armed passes through untouched and leaves the guard armed for the click
+   * it was set for.
+   */
+  const swallowNextClick = useCallback((element: T) => {
+    const onClick = (event: MouseEvent) => {
+      const target = event.target as Node | null;
+      if (!target || !element.contains(target)) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      document.removeEventListener('click', onClick, true);
+    };
+
+    document.addEventListener('click', onClick, true);
+
+    // The click only arrives when the pointer came up over something
+    // clickable. Without this the listener would sit there and eat the NEXT
+    // honest click instead — the one the shopper meant.
+    window.setTimeout(
+      () => document.removeEventListener('click', onClick, true),
+      0
+    );
+  }, []);
+
+  useEffect(() => {
+    const element = ref.current;
+    if (!element || !enabled) return;
+
+    const onDragStart = (event: Event) => event.preventDefault();
+
+    const onPointerDown = (event: PointerEvent) => {
+      // A secondary button belongs to the context menu. Written as `> 0` so a
+      // synthetic event carrying no button at all still counts as the primary.
+      if (event.button > 0) return;
+      active.current = true;
+      moved.current = 0;
+      startX.current = event.clientX;
+    };
+
+    const onPointerMove = (event: PointerEvent) => {
+      if (!active.current) return;
+      moved.current = Math.max(
+        moved.current,
+        Math.abs(event.clientX - startX.current)
+      );
+    };
+
+    const end = () => {
+      if (!active.current) return;
+      active.current = false;
+      if (moved.current > DRAG_THRESHOLD) swallowNextClick(element);
+    };
+
+    element.addEventListener('dragstart', onDragStart);
+    element.addEventListener('pointerdown', onPointerDown);
+    element.addEventListener('pointermove', onPointerMove);
+    element.addEventListener('pointerup', end);
+    element.addEventListener('pointercancel', end);
+
+    return () => {
+      element.removeEventListener('dragstart', onDragStart);
+      element.removeEventListener('pointerdown', onPointerDown);
+      element.removeEventListener('pointermove', onPointerMove);
+      element.removeEventListener('pointerup', end);
+      element.removeEventListener('pointercancel', end);
+    };
+  }, [enabled, swallowNextClick]);
+
+  return ref;
+};
+
+/**
+ * The style half of the fix, kept next to the hook so a call site cannot take
+ * one without the other. Both spellings: Safari only dropped the prefix in 17.
+ */
+export const carouselDragStyle = {
+  userSelect: 'none',
+  WebkitUserSelect: 'none'
+} as const;

package/src/sections/__tests__/posts-slider-drag-guard.test.tsx

@@ -0,0 +1,245 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+
+/**
+ * The drag repair on the slider a shopper meets most: a row of product cards.
+ *
+ * `react-multi-carousel` hangs the gesture off its own track and never cancels
+ * the browser's native drag, so a press-and-move over a card — an anchor
+ * around a photo — became a drag-and-drop, the mouse-move stream died, and the
+ * row stuck part of the way across with nothing to commit it. These tests pin
+ * the repair and the thing the repair could easily break: a drag that happens
+ * to end on a card must not ALSO open that card, because this section turns a
+ * card click into quick view from the capture phase.
+ *
+ * The card stub and the carousel passthrough mirror
+ * `posts-slider-quick-view.test.tsx` — the real library renders an empty track
+ * at a jsdom width of zero, so no slide would reach the DOM through it.
+ */
+
+const carouselProps: Record<string, unknown>[] = [];
+
+jest.mock('../../theme-block', () => ({
+  __esModule: true,
+  default: ({ block }: { block: { id: string } }) => (
+    <a data-testid="card" data-id={block.id} href={`/product/${block.id}/`}>
+      card
+      <img src={`/img/${block.id}.jpg`} alt="" data-testid="card-image" />
+    </a>
+  )
+}));
+
+jest.mock('react-multi-carousel', () => ({
+  __esModule: true,
+  default: (props: { children?: React.ReactNode } & Record<string, unknown>) => {
+    carouselProps.push(props);
+    return <div data-testid="carousel">{props.children}</div>;
+  }
+}));
+
+import PostsSliderSection from '../posts-slider-section';
+import { CAROUSEL_MINIMUM_TOUCH_DRAG } from '../../hooks/use-carousel-drag';
+
+const product = (pk: number, name: string, price: number) => ({
+  pk,
+  name,
+  absolute_url: `/product/${pk}/`,
+  productimage_set: [{ image: `/img/${pk}.jpg` }],
+  active_price: { price, currency_type: 'TRY' }
+});
+
+const ITERATOR = {
+  id: 'iter',
+  label: 'Iterator',
+  isIterator: true,
+  order: 0,
+  properties: {},
+  styles: {},
+  blocks: [
+    {
+      id: 'card',
+      type: 'group',
+      label: 'Deal Card 1',
+      properties: { tag: 'a' },
+      styles: {},
+      blocks: []
+    }
+  ]
+};
+
+const renderSection = (
+  properties: Record<string, unknown> = {},
+  isDesigner = false
+) =>
+  render(
+    <div data-section-id="sec">
+      <div data-section-content="" className="relative z-10">
+        <PostsSliderSection
+          {...({
+            section: {
+              id: 'sec',
+              type: 'flash-deals-slider',
+              label: 'sec',
+              properties: { 'items-per-slide': 1, ...properties },
+              styles: {},
+              blocks: [ITERATOR],
+              dataSource: {
+                details: {
+                  collection: {
+                    products: [
+                      product(11, 'Blue Stool', 2790),
+                      product(22, 'Red Chair', 1490)
+                    ]
+                  }
+                }
+              }
+            },
+            currentBreakpoint: 'desktop',
+            placeholderId: 'ph',
+            isDesigner
+          } as any)}
+        />
+      </div>
+    </div>
+  );
+
+/** The box the guard is attached to — the one holding only the slides. */
+const slidesBox = () =>
+  document.querySelector('[data-part="slides"]') as HTMLElement;
+
+/** jsdom has no PointerEvent constructor; the hook only reads mouse fields. */
+const pointer = (type: string, init: MouseEventInit = {}) =>
+  new MouseEvent(type, { bubbles: true, cancelable: true, ...init });
+
+const dragAcross = (from = 200, to = 120) => {
+  const box = slidesBox();
+  act(() => {
+    box.dispatchEvent(pointer('pointerdown', { clientX: from }));
+    box.dispatchEvent(pointer('pointermove', { clientX: to }));
+    box.dispatchEvent(pointer('pointerup', { clientX: to }));
+  });
+};
+
+const clickCard = (element: Element) => {
+  const event = pointer('click', { button: 0 });
+  act(() => {
+    element.dispatchEvent(event);
+  });
+  return event;
+};
+
+const panel = () => document.querySelector('[data-part="quick-view-panel"]');
+
+beforeEach(() => {
+  carouselProps.length = 0;
+});
+
+describe('posts slider — the native drag no longer steals the swipe', () => {
+  it('cancels dragstart on a card photo', () => {
+    renderSection();
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    screen.getAllByTestId('card-image')[0].dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('cancels dragstart on the card anchor itself', () => {
+    renderSection();
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    screen.getAllByTestId('card')[0].dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('leaves dragstart alone in the editor', () => {
+    renderSection({}, true);
+
+    const event = new Event('dragstart', { bubbles: true, cancelable: true });
+    screen.getAllByTestId('card-image')[0].dispatchEvent(event);
+
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it('turns off text selection across the slides', () => {
+    renderSection();
+
+    expect(slidesBox().style.userSelect).toBe('none');
+  });
+
+  it('hands the library a commit threshold a real drag reaches', () => {
+    renderSection();
+
+    expect(carouselProps[0].minimumTouchDrag).toBe(CAROUSEL_MINIMUM_TOUCH_DRAG);
+    expect(carouselProps[0].minimumTouchDrag as number).toBeLessThan(80);
+  });
+
+  it('leaves a click outside the slider alone while the guard is armed', () => {
+    renderSection();
+    const outside = document.createElement('button');
+    document.body.appendChild(outside);
+
+    try {
+      dragAcross();
+
+      const stray = pointer('click', { button: 0 });
+      act(() => {
+        outside.dispatchEvent(stray);
+      });
+      expect(stray.defaultPrevented).toBe(false);
+
+      // Still armed for the click the drag was actually going to produce.
+      const onCard = clickCard(screen.getAllByTestId('card')[0]);
+      expect(onCard.defaultPrevented).toBe(true);
+    } finally {
+      outside.remove();
+    }
+  });
+});
+
+describe('posts slider — a drag does not also open the card', () => {
+  it('does not navigate when a drag ends on a card', () => {
+    renderSection();
+    dragAcross();
+
+    const event = clickCard(screen.getAllByTestId('card')[0]);
+
+    expect(event.defaultPrevented).toBe(true);
+  });
+
+  it('does not open quick view when a drag ends on a card', () => {
+    renderSection({ 'show-quick-view': true });
+    dragAcross();
+
+    clickCard(screen.getAllByTestId('card')[0]);
+
+    expect(panel()).toBeNull();
+  });
+
+  it('still opens quick view on an honest click', () => {
+    renderSection({ 'show-quick-view': true });
+
+    const event = clickCard(screen.getAllByTestId('card')[0]);
+
+    expect(event.defaultPrevented).toBe(true);
+    expect(panel()).not.toBeNull();
+  });
+
+  it('still navigates on an honest click when quick view is off', () => {
+    renderSection();
+
+    const event = clickCard(screen.getAllByTestId('card')[0]);
+
+    expect(event.defaultPrevented).toBe(false);
+  });
+
+  it('treats a press that barely moved as a click', () => {
+    renderSection({ 'show-quick-view': true });
+    dragAcross(200, 198);
+
+    clickCard(screen.getAllByTestId('card')[0]);
+
+    expect(panel()).not.toBeNull();
+  });
+});

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

@@ -22,6 +22,11 @@ import {
 } from '../utils';
 import { DESKTOP_MIN_WIDTH, TABLET_MIN_WIDTH } from '../utils/breakpoints';
 import { useCarouselSsr } from '../utils/carousel-ssr';
+import {
+  CAROUSEL_MINIMUM_TOUCH_DRAG,
+  carouselDragStyle,
+  useCarouselDrag
+} from '../hooks/use-carousel-drag';
 import {
   findSliderArrowBlocks,
   isSliderArrowIconBlock,
@@ -276,6 +281,13 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
    * rendered as siblings of the carousel and paged through this instead.
    */
   const carouselRef = React.useRef<Carousel | null>(null);
+  /**
+   * The cards are links around photos, which the browser would rather drag
+   * than let the carousel swipe — and the guard also keeps a drag that ends
+   * on a card from opening the quick view below. Left alone in the editor,
+   * where the designer's own drag-and-drop owns `dragstart`.
+   */
+  const dragRef = useCarouselDrag<HTMLDivElement>(!isDesigner);
 
   const getConfigEntry = (key: string) =>
     section.properties?.[key] ?? section.styles?.[key];
@@ -872,7 +884,12 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
        * `slides` part — `generatePartCSS` emits it against this attribute — so
        * padding it does not move anything but the cards.
        */}
-      <div data-part="slides" {...carouselSsr.gateProps}>
+      <div
+        data-part="slides"
+        ref={dragRef}
+        style={carouselDragStyle}
+        {...carouselSsr.gateProps}
+      >
         <Carousel
           key={carouselKey}
           responsive={carouselResponsive}
@@ -895,6 +912,7 @@ const PostsSliderSection: React.FC<PostsSliderSectionProps> = ({
           {...(isDesigner ? { slidesToSlide: currentSlidesToSlide } : {})}
           swipeable={true}
           draggable={true}
+          minimumTouchDrag={CAROUSEL_MINIMUM_TOUCH_DRAG}
           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